@import "../../variable.less";
#main {
    width: 100%;
}

#container {
    width: 100%;
    padding-top: 220px;
}

#container {
    width: 100%;
    padding-top: 220px;
    transition: padding-top 1200ms cubic-bezier(.45, 0, 0, 1) 0ms;
}

:global(.pagefullModel) {
    width: 100%;
    animation: fadeIn 1s cubic-bezier(.64, .13, .08, 1.01);
    -webkit-animation: fadeIn 1s cubic-bezier(.64, .13, .08, 1.01);
    &:global(.route-page-leave) {
        opacity: 0 !important;
    }
}

.fixedFloatingButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.fullModel#container {
    padding-top: 64px;
}

// :global(.route-page-enter) {
//     opacity: 0.01;
//     transition: opacity 200ms ease-in;
// }
// :global(.route-page-enter):global(.route-page-enter-active) {
//     opacity: 1;
// }
// :global(.route-page-leave) {
//     opacity: 1;
//     transition: opacity 200ms ease-in;
// }
// :global(.route-page-leave):global(.route-page-leave-active) {
//     opacity: 0;
// }
:global {
    @keyframes e(":global(enterIn)") {
        from {
            transform: translateY(100px);
            opacity: 0;
        }
        to {
            transform: translateY(0px);
            opacity: 1;
        }
    }
    .route-page-enter:not(.pagefullModel) {
        position: absolute;
        top: 0;
        animation: enterIn 450ms;
        animation-delay: 450ms;
        animation-fill-mode: both;
    }
    .route-page-enter.route-page-enter-active:not(.pagefullModel) {}
    .route-page-leave:not(.pagefullModel) {
        opacity: 1;
        position: absolute;
        top: 0;
        transition: opacity 450ms;
    }
    .route-page-leave.route-page-leave-active:not(.pagefullModel) {
        opacity: 0;
    }
}

.TransitionGroup {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    >div {
        width: 100%;
    }
}