@charset "UTF-8";

/*!
 * 设计院 animate css
 * Version - 1.1.1
 * Copyright (c) 2018 Lhave Team
 */

.cssanimations .J_ani {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    transition: all ease-out .3s;
}

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

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0.3
    }
    80% {
        opacity: 0.5
    }
    95% {
        opacity: 0.5
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0.3
    }
    80% {
        opacity: 0.5
    }
    95% {
        opacity: 0.5
    }
    to {
        opacity: 1
    }
}

.leftToRight {
    -webkit-animation-name: leftToRight;
    animation-name: leftToRight;
    animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    -webkit-animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    /* Safari 和 Chrome */
}

@keyframes leftToRight {
    from {
        transform: translateX(-101%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes leftToRight
/* Safari 和 Chrome */

{
    from {
        transform: translateX(-101%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.ToLeftOut {
    -webkit-animation-name: ToLeftOut;
    animation-name: ToLeftOut;
    animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    -webkit-animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    /* Safari 和 Chrome */
}

@keyframes ToLeftOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-101%);
        opacity: 0;
    }
}

@-webkit-keyframes ToLeftOut
/* Safari 和 Chrome */

{
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-101%);
        opacity: 0;
    }
}

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

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(5%, 0, 0);
        transform: translate3d(5%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(5%, 0, 0);
        transform: translate3d(5%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(80%, 0, 0);
        transform: translate3d(80%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(80%, 0, 0);
        transform: translate3d(80%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-5%, 0, 0);
        transform: translate3d(-5%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-5%, 0, 0);
        transform: translate3d(-5%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-80%, 0, 0);
        transform: translate3d(-80%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-80%, 0, 0);
        transform: translate3d(-80%, 0, 0)
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.8;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.minUp {
    -webkit-animation-name: minUp;
    animation-name: minUp;
    transition-timing-function: linear;
}

@-webkit-keyframes minUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes minUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

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

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

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

@-webkit-keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(2, 2);
        -webkit-filter: blur(4px);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        -webkit-filter: blur(0px);
    }
}

@keyframes puffIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2, 2);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1);
        filter: blur(0px);
    }
}