/* 动画库 */




@keyframes bouncein_y {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
    }

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

.bouncein_y {
    -webkit-animation-name: bouncein_y;
    animation-name: bouncein_y;
}

@keyframes bounceout_y {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
    }
}

.bounceout_y {
    -webkit-animation-name: bounceout_y;
    animation-name: bounceout_y;
}

@keyframes bounceinleft_y {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceinleft_y {
    -webkit-animation-name: bounceinleft_y;
    animation-name: bounceinleft_y;
}

@keyframes bounceinright_y {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceinright_y {
    -webkit-animation-name: bounceinright_y;
    animation-name: bounceinright_y;
}

@keyframes fadeinleft_y {
    0% {
        opacity: 0;
        -webkit-transform: translatex(-20px);
        -ms-transform: translatex(-20px);
        transform: translatex(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translatex(0);
        -ms-transform: translatex(0);
        transform: translatex(0);
    }
}

.fadeinleft_y {
    -webkit-animation-name: fadeinleft_y;
    animation-name: fadeinleft_y;
}

@keyframes fadeinright_y {
    0% {
        opacity: 0;
        -webkit-transform: translatex(20px);
        -ms-transform: translatex(20px);
        transform: translatex(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translatex(0);
        -ms-transform: translatex(0);
        transform: translatex(0);
    }
}

.fadeinright_y {
    -webkit-animation-name: fadeinright_y;
    animation-name: fadeinright_y;
}

@keyframes fadeindown_y {
    0% {
        opacity: 0;
        -webkit-transform: translatey(-20px);
        -ms-transform: translatey(-20px);
        transform: translatey(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translatey(0);
        -ms-transform: translatey(0);
        transform: translatey(0);
    }
}

.fadeindown_y {
    -webkit-animation-name: fadeindown_y;
    animation-name: fadeindown_y;
}

@keyframes fadeoutup_y {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
}

.fadeoutup {
    -webkit-animation-name: fadeoutup_y;
    animation-name: fadeoutup_y;
}

@keyframes fadeinup_y {
    0% {
        opacity: 0;
        -webkit-transform: translatey(50px);
        -ms-transform: translatey(50px);
        transform: translatey(50px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translatey(0);
        -ms-transform: translatey(0);
        transform: translatey(0);
    }
}

.fadeinup_y {
    -webkit-animation-name: fadeinup_y;
    animation-name: fadeinup_y;
}

@keyframes fadein_y {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadein_y {
    -webkit-animation-name: fadein_y;
    animation-name: fadein_y;
}

@keyframes zoomindown_y {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomindown_y {
    -webkit-animation-name: zoomindown_y;
    animation-name: zoomindown_y;
}

@keyframes rotatein_y {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, -200deg);
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  .rotatein_y {
    -webkit-animation-name: rotatein_y;
    animation-name: rotatein_y;
  }





.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-200 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.animated.delay-400 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.animated.delay-600 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.animated.delay-800 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

/* .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
} */

@media (print),
(prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}