/*滚动动画的样式*/
.disable-hover {
    pointer-events: none;
}

.scroll-animate.animated {
    visibility: hidden;
}

.font-fadeIn font {
    display: inline-block;
}

.scrolly {
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
}

/*animate补充动画*/
@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeftSmall {
    animation-name: fadeInLeftSmall;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
}

@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRightSmall {
    animation-name: fadeInRightSmall;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
}

@keyframes fadeInDownSmall {
    from {
        opacity: 0;
        transform: translate3d(0%, -20px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDownSmall {
    animation-name: fadeInDownSmall;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
}

@keyframes fadeOutDownSmall {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(0%, 10px, 0);
    }
}

.fadeOutDownSmall {
    animation-name: fadeOutDownSmall;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
}

@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        transform: translate3d(0%, 30px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUpSmall {
    animation-name: fadeInUpSmall;
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
    }
}

.scaleIn {
    animation-name: scaleIn;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    animation-name: ripple;
}

@keyframes bannerIn {
    0% {
        transform: translate3d(100%, 0%, 0) scale3d(0.7, 0.7, 0.7);
    }

    50% {
        transform: translate3d(0, 0%, 0) scale3d(0.7, 0.7, 0.7);
    }

    100% {
        transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
    }
}

.bannerIn {
    animation-name: bannerIn;
}

@keyframes banner_in {
    0% {
        transform: translate3d(100%, 0%, 0);
        clip-path: inset(10vw 10vw 10vw 10vw round 10px);
    }

    50% {
        transform: translate3d(0, 0%, 0);
        clip-path: inset(10vw 10vw 10vw 10vw round 10px);
    }

    100% {
        transform: translate3d(0, 0%, 0);
        clip-path: inset(0 0 0 0 round 10px);
    }
}

.banner_in {
    animation-name: banner_in;
}

@keyframes banner_out {
    0% {
        transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
    }

    50% {
        transform: translate3d(0, 0%, 0) scale3d(0.7, 0.7, 0.7);
    }

    100% {
        transform: translate3d(-100%, 0, 0) scale3d(0.7, 0.7, 0.7);
    }
}

.banner_out {
    animation-name: banner_out;
}

@keyframes banner_in_1 {
    0% {
        transform: translate3d(0, 0%, 0);
        clip-path: inset(0 0 0 0 round 10px);
    }

    50% {
        transform: translate3d(0, 0%, 0);
        clip-path: inset(10vw 10vw 10vw 10vw round 10px);
    }

    100% {
        transform: translate3d(-100%, 0%, 0);
        clip-path: inset(10vw 10vw 10vw 10vw round 10px);
    }
}

.banner_in_1 {
    animation-name: banner_in_1;
}

@keyframes banner_out_1 {
    0% {
        transform: translate3d(0, 0%, 0);
        clip-path: inset(0 0 0 0 round 10px);
    }

    50% {
        transform: translate3d(0, 0%, 0);
        clip-path: inset(10vw 10vw 10vw 10vw round 10px);
    }

    100% {
        transform: translate3d(-100%, 0%, 0);
        clip-path: inset(10vw 10vw 10vw 10vw round 10px);
    }
}

.banner_out_1 {
    animation-name: banner_out_1;
}

@keyframes loopCir {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

.loopCir {
    animation-name: loopCir;
}

@keyframes ani1 {
    0% {
        opacity: 0;
        transform: translateY(8px);
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        -o-transform: translateY(8px);
        -ms-transform: translateY(8px);
    }

    30% {
        opacity: 1;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
    }

    70% {
        opacity: 1;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
    }

    100% {
        opacity: 0;
        transform: translateY(-8px);
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        -o-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
    }
}

.ani1 {
    animation-name: ani1;
}

@keyframes Tmouse {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        -o-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

.Tmouse {
    animation-name: Tmouse;
}

@keyframes fn1 {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translate3d(0%, 20px, 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

.fn1 {
    animation-name: fn1;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.49, 0.54, 0.16, 1);
}