@charset "utf-8";

.et-04s {
    -webkit-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.et-03s {
    -webkit-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.et-02s {
    -webkit-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

/* 右边往左切入 */
.fadeIn {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

/* 从上往下 */
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
}

/* 弹入 */
.hvr-pop {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
}

/* 下降Q弹 */
.upDown {
    -webkit-animation: upDown 2s infinite ease-in-out;
    -moz-animation: upDown 2s infinite ease-in-out;
    -ms-animation: upDown 2s infinite ease-in-out;
    animation: upDown 2s infinite ease-in-out;
}

/* 下降 */
.slideUpRetourn {
    -webkit-animation: slideUpRetourn 2s infinite ease-in-out;
    -moz-animation: slideUpRetourn 2s infinite ease-in-out;
    -ms-animation: slideUpRetourn 2s infinite ease-in-out;
    animation: slideUpRetourn 2s infinite ease-in-out;
}

.Round {
    -webkit-animation: Round 5s infinite ease-in-out;
    -moz-animation: Round 5s infinite ease-in-out;
    -ms-animation: Round 5s infinite ease-in-out;
    animation: Round 5s infinite ease-in-out;
}

.shakeSign {
    -webkit-animation: shakeSign 2s infinite ease-in-out;
    -moz-animation: shakeSign 2s infinite ease-in-out;
    -ms-animation: shakeSign 2s infinite ease-in-out;
    animation: shakeSign 2s infinite ease-in-out;
}

.rotateF {
    -webkit-animation: rotate 2s linear infinite;
    -o-animation: rotate 2s linear infinite;
    -moz-animation: rotate 2s linear infinite;
    -ms-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}

.rotate {
    -webkit-animation: rotate 20s linear infinite;
    -o-animation: rotate 20s linear infinite;
    -moz-animation: rotate 20s linear infinite;
    -ms-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
}

.bg-font-animate {
    animation: bgFontAnimate .3s linear;
    -webkit-animation: bgFontAnimate .3s linear;
    -moz-animation: bgFontAnimate .3s linear;
    -o-animation: bgFontAnimate .3s linear;
    -ms-animation: bgFontAnimate .3s linear;
}

.slideInUp {
    animation: slideInUp .8s linear;
    -webkit-animation: slideInUp .8s linear;
    -moz-animation: slideInUp .8s linear;
    -o-animation: slideInUp .8s linear;
    -ms-animation: slideInUp .8s linear;
}

.bAf {
    -webkit-animation: nudge 5s linear infinite alternate;
    -moz-animation: nudge 5s linear infinite alternate;
    -ms-animation: nudge 5s linear infinite alternate;
    -o-animation: nudge 5s linear infinite alternate;
    animation: nudge 5s linear infinite alternate;
}

.fade {
    animation: fade 3s linear infinite alternate;
    -webkit-animation: fade 3s linear infinite alternate;
    -moz-animation: fade 3s linear infinite alternate;
    -o-animation: fade 3s linear infinite alternate;
    -ms-animation: fade 3s linear infinite alternate;
}

.flicker {
    animation: flicker .5s linear infinite alternate;
    -webkit-animation: flicker .5s linear infinite alternate;
    -moz-animation: flicker .5s linear infinite alternate;
    -o-animation: flicker .5s linear infinite alternate;
    -ms-animation: flicker .5s linear infinite alternate;
}

.frame-size {
    animation: base-btn-animation 1.3s ease-in-out 0s infinite alternate;
    -webkit-animation: base-btn-animation 1.3s ease-in-out 0s infinite alternate;
    -moz-animation: base-btn-animation 1.3s ease-in-out 0s infinite alternate;
    -ms-animation: base-btn-animation 1.3s ease-in-out 0s infinite alternate;
    -o-animation: base-btn-animation 1.3s ease-in-out 0s infinite alternate;
}

.fadeInUp {
    animation: fadeInUp 1s .2s ease both;
    -webkit-animation: fadeInUp 1s .2s ease both;
    -moz-animation: fadeInUp 1s .2s ease both;
}

/* 点击动作 */

.clickEffect:active {
    animation-name: clickAction;
    -webkit-animation-name: clickAction;
    animation-name: clickAction;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    opacity: 0.8;
}


/*左右摇动*/

.swingLR {
    animation-name: swingLR;
    -webkit-animation-name: swingLR;
    animation-name: swingLR;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    opacity: 0.8;
}

/*抖动*/

.shakeEffect {
    animation: shakeEffect .5s linear infinite alternate;
    -webkit-animation: shakeEffect .5s linear infinite alternate;
    -moz-animation: shakeEffect .5s linear infinite alternate;
    -o-animation: shakeEffect .5s linear infinite alternate;
    -ms-animation: shakeEffect .5s linear infinite alternate;
}



/* 漂浮 */
.float0 {
    -webkit-animation: float0 3s ease-in-out infinite;
    -moz-animation: float0 3s ease-in-out infinite;
    -o-animation: float0 3s ease-in-out infinite;
    animation: float0 3s ease-in-out infinite
}

.float1 {
    -webkit-animation: float1 4s ease-in-out infinite;
    -moz-animation: float1 4s ease-in-out infinite;
    -o-animation: float1 4s ease-in-out infinite;
    animation: float1 4s ease-in-out infinite
}

.float2 {
    -webkit-animation: float2 5s ease-in-out infinite;
    -moz-animation: float2 5s ease-in-out infinite;
    -o-animation: float2 5s ease-in-out infinite;
    animation: float2 5s ease-in-out infinite
}

.float3 {
    -webkit-animation: float3 5s ease-in-out infinite;
    -moz-animation: float3 5s ease-in-out infinite;
    -o-animation: float3 5s ease-in-out infinite;
    animation: float3 5s ease-in-out infinite
}

.float4 {
    -webkit-animation: float4 5s ease-in-out infinite;
    -moz-animation: float4 5s ease-in-out infinite;
    -o-animation: float4 5s ease-in-out infinite;
    animation: float4 5s ease-in-out infinite
}

@keyframes clickAction {
    from {
        opacity: 1.0;
        transform: scale(1.0);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }

    1000% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

@-webkit-keyframes clickAction {
    from {
        opacity: 1.0;
        transform: scale(1.0);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }

    1000% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

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

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flicker {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px)
    }

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

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px)
    }

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

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(40px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@keyframes fade {
    from {
        opacity: 1.0;
    }

    60% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.5;
    }

    40% {
        opacity: 0.4;
    }

    30% {
        opacity: 0.3;
    }

    20% {
        opacity: 0.2;
    }

    10% {
        opacity: 0.1;
    }

    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.1;
    }

    20% {
        opacity: 0.2;
    }

    30% {
        opacity: 0.3;
    }

    40% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.5;
    }

    60% {
        opacity: 0.6;
    }

    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }

    60% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.5;
    }

    40% {
        opacity: 0.4;
    }

    30% {
        opacity: 0.3;
    }

    20% {
        opacity: 0.2;
    }

    10% {
        opacity: 0.1;
    }

    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.1;
    }

    20% {
        opacity: 0.2;
    }

    30% {
        opacity: 0.3;
    }

    40% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.5;
    }

    60% {
        opacity: 0.6;
    }

    to {
        opacity: 1.0;
    }
}

@keyframes skeletonLoading {
    0% {
        background-position: -450px 0;
    }

    100% {
        background-position: 450px 0;
    }
}

@-webkit-keyframes skeletonLoading {
    0% {
        background-position: -450px 0;
    }

    100% {
        background-position: 450px 0;
    }
}

@keyframes base-btn-animation {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -webkit-transform: scale(0.93);
        transform: scale(0.93)
    }
}

@-webkit-keyframes base-btn-animation {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -webkit-transform: scale(0.93);
        transform: scale(0.93)
    }
}

.scaleBall {
    -webkit-animation: scaleBall 0.6s linear forwards;
    animation: scaleBall 0.6s linear forwards;
}

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

    78% {
        opacity: 1;
        transform: scale(1.3);
    }

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

@-webkit-keyframes scaleBall {
    0% {
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    78% {
        opacity: 1;
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }

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

@-webkit-keyframes upDown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, -15px);
        transform: translate(0, -15px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes upDown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, -15px);
        transform: translate(0, -15px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-o-keyframes rotate {
    0% {
        -o-transform: rotate(360deg);
    }

    100% {
        -o-transform: rotate(0deg);
    }
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(360deg);
    }

    100% {
        -moz-transform: rotate(0deg);
    }
}

@-ms-keyframes rotate {
    0% {
        -ms-transform: rotate(360deg);
    }

    100% {
        -ms-transform: rotate(0deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes Round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes Round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@-webkit-keyframes opacity {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3
    }
}

@keyframes opacity {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3
    }
}

@-webkit-keyframes shower {
    0% {
        opacity: 0;
        -webkit-transform: translate(1000px, -1500px);
        transform: translate(1000px, -1500px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(250px, -400px);
        transform: translate(250px, -400px);
    }

    100% {
        opacity: .6;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes shower {
    0% {
        opacity: 0;
        -webkit-transform: translate(500px, -500px);
        transform: translate(500px, -500px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(250px, -400px);
        transform: translate(250px, -400px);
    }

    100% {
        opacity: .6;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes showerB {
    0% {
        opacity: 0;
        -webkit-transform: translate(1000px, -800px);
        transform: translate(1000px, -800px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(500px, -400px);
        transform: translate(500px, -400px);
    }

    100% {
        opacity: .6;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes showerB {
    0% {
        opacity: 0;
        -webkit-transform: translate(1000px, -800px);
        transform: translate(1000px, -800px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(500px, -400px);
        transform: translate(500px, -400px);
    }

    100% {
        opacity: .6;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes shakeEffect {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 1px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, -2px) rotate(0deg);
    }

    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -2px) rotate(1deg);
    }

    90% {
        transform: translate(2px, -1px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@-moz-keyframes shakeEffect {

    /* Firefox */
    0% {
        -moz-transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        -moz-transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -moz-transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -moz-transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        -moz-transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -moz-transform: translate(-1px, 1px) rotate(-1deg);
    }

    60% {
        -moz-transform: translate(-3px, -2px) rotate(0deg);
    }

    70% {
        -moz-transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        -moz-transform: translate(-1px, -2px) rotate(1deg);
    }

    90% {
        -moz-transform: translate(2px, -1px) rotate(0deg);
    }

    100% {
        -moz-transform: translate(1px, -2px) rotate(-1deg);
    }
}

@-webkit-keyframes shakeEffect {

    /* Safari and Chrome */
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -webkit-transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -webkit-transform: translate(-1px, 1px) rotate(-1deg);
    }

    60% {
        -webkit-transform: translate(-3px, -2px) rotate(0deg);
    }

    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        -webkit-transform: translate(-1px, -2px) rotate(1deg);
    }

    90% {
        -webkit-transform: translate(2px, -1px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
    }
}

@-webkit-keyframes moveUp {
    50% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    52% {
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

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

@keyframes moveUp {
    50% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    52% {
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

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

@-webkit-keyframes bgFontAnimate {
    0% {
        -webkit-transform: scale(2, 2);
    }

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

@keyframes bgFontAnimate {
    0% {
        -webkit-transform: scale(2, 2);
    }

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

@keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes aclstop {
    from {
        opacity: 0;
        transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@keyframes aclstop {
    from {
        opacity: 0;
        transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes move_point {
    0% {
        -webkit-transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(-10px);
    }
}

@-o-keyframes move_point {
    0% {
        -o-transform: translateY(10px);
    }

    100% {
        -o-transform: translateY(-10px);
    }
}

@-moz-keyframes move_point {
    0% {
        -moz-transform: translateY(10px);
    }

    100% {
        -moz-transform: translateY(-10px);
    }
}

@-ms-keyframes move_point {
    0% {
        -ms-transform: translateY(10px);
    }

    100% {
        -V-transform: translateY(-10px);
    }
}

@keyframes move_point {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

@-webkit-keyframes nudge {

    0%,
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(150px, 0);
        transform: translate(150px, 0);
    }

    80% {
        -webkit-transform: translate(-150px, 0);
        transform: translate(-150px, 0);
    }
}

@keyframes nudge {

    0%,
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(150px, 0);
        transform: translate(150px, 0);
    }

    80% {
        -webkit-transform: translate(-150px, 0);
        transform: translate(-150px, 0);
    }
}

@-webkit-keyframes fadeInRightS {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 5%);
        -ms-transform: translate3d(0, 0, 5%);
        transform: translate3d(0, 0, 5%)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightS {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 5%);
        -ms-transform: translate3d(0, 0, 5%);
        transform: translate3d(0, 0, 5%)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@-webkit-keyframes shakeSign {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    45% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    47.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    55% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    57.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    62.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    65% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes shakeSign {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    45% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    47.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    55% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    57.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    62.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    65% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(5%, 0, 0);
        transform: translate3d(5%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(5%, 0, 0);
        -ms-transform: translate3d(5%, 0, 0);
        transform: translate3d(5%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@-webkit-keyframes bounceInDown {

    0%,
    100%,
    60%,
    75%,
    90% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }

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

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

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

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

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDown {

    0%,
    100%,
    60%,
    75%,
    90% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }

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

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

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

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

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

/**animate **/

@-webkit-keyframes spinright {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinright {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinleft {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

@-webkit-keyframes spinleft {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

/**************
    bounce
 **************/

@-webkit-keyframes bouncein {
    0% {
        -webkit-transform: scale(0);
    }

    75% {
        -webkit-transform: scale(1.1);
    }

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

@keyframes bouncein {
    0% {
        transform: scale(0);
    }

    75% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes bounceout {
    0% {
        -webkit-transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(0);
    }
}

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

    75% {
        transform: scale(1.1);
    }

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

/**************
    fade
 **************/

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/**************
    pop
 **************/

@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(0.8);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes popin {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes popout {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

/**************
    lower
 **************/

@-webkit-keyframes lowerin {
    from {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes lowerin {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes lowerout {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

@keyframes lowerout {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.1);
    }
}

/**************
   slide
 **************/

@-webkit-keyframes slideinfromright {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
    }

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

@keyframes slideinfromright {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideinfromleft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
    }

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

@keyframes slideinfromleft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideouttoleft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }

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

@keyframes slideouttoleft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes slideouttoright {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }

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

@keyframes slideouttoright {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/**************
    slidecover
 **************/

@-webkit-keyframes slideouttoleft_forcover {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(-20%, 0, 0);
        opacity: .9;
    }
}

@keyframes slideouttoleft_forcover {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-20%);
        opacity: .9;
    }
}

@-webkit-keyframes slideinfromright_forcover {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
    }

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

@keyframes slideinfromright_forcover {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideouttoright_forcover {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }

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

@keyframes slideouttoright_forcover {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@-webkit-keyframes slideinfromleft_forcover {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        opacity: .9;
    }

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

@keyframes slideinfromleft_forcover {
    from {
        transform: translateX(-20%);
        opacity: .9;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/**************
    slide from top
 **************/

@-webkit-keyframes slideinfromtop {
    from {
        -webkit-transform: translateY(-100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@keyframes slideinfromtop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideouttotop {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(-100%);
    }
}

@keyframes slideouttotop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

/**************
    slide from bottom
 **************/

@-webkit-keyframes slideinfrombottom {
    from {
        -webkit-transform: translateY(100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@keyframes slideinfrombottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideouttobottom {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(100%);
    }
}

@keyframes slideouttobottom {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

/**************
    flip
 **************/

@-webkit-keyframes flipouttoleft {
    from {
        -webkit-transform: rotateY(0);
    }

    to {
        -webkit-transform: rotateY(-90deg) scale(0.9);
    }
}

@keyframes flipouttoleft {
    from {
        transform: perspective(700px) rotateY(0);
    }

    to {
        transform: perspective(700px) rotateY(-90deg) scale(0.9);
    }
}

@-webkit-keyframes flipouttoright {
    from {
        -webkit-transform: perspective(700px) rotateY(0);
    }

    to {
        -webkit-transform: perspective(700px) rotateY(90deg) scale(0.9);
    }
}

@keyframes flipouttoright {
    from {
        transform: perspective(700px) rotateY(0);
    }

    to {
        transform: perspective(700px) rotateY(90deg) scale(0.9);
    }
}

@-webkit-keyframes flipintoleft {
    from {
        visibility: visible;
        -webkit-transform: perspective(700px) rotateY(-90deg) scale(0.9);
    }

    to {
        visibility: visible;
        -webkit-transform: perspective(700px) rotateY(0);
    }
}

@keyframes flipintoleft {
    from {
        visibility: visible;
        transform: perspective(700px) rotateY(-90deg) scale(0.9);
    }

    to {
        visibility: visible;
        transform: perspective(700px) rotateY(0);
    }
}

@-webkit-keyframes flipintoright {
    from {
        visibility: visible;
        -webkit-transform: perspective(700px) rotateY(90deg) scale(0.9);
    }

    to {
        visibility: visible;
        -webkit-transform: perspective(700px) rotateY(0);
    }
}

@keyframes flipintoright {
    from {
        visibility: visible;
        transform: perspective(700px) rotateY(90deg) scale(0.9);
    }

    to {
        visibility: visible;
        transform: perspective(700px) rotateY(0);
    }
}

/*最低升进*/

@keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes like-animation {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    15% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
    }

    32% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

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

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes like-animation {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    15% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
    }

    32% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

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

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes load {

    0%,
    100% {
        -webkit-transform: scaleY(1);
    }

    16.67% {
        -webkit-transform: scaleY(3);
    }

    33.33% {
        -webkit-transform: scaleY(1);
    }

    50% {
        -webkit-transform: scaleY(3);
    }

    66.67% {
        -webkit-transform: scaleY(1);
    }

    83.34% {
        -webkit-transform: scaleY(3);
    }
}

@keyframes load {

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

    16.67% {
        transform: scaleY(3);
    }

    33.33% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(3);
    }

    66.67% {
        transform: scaleY(1);
    }

    83.34% {
        transform: scaleY(3);
    }
}

@-webkit-keyframes loding-cubeGridScaleDelay {

    0%,
    70%,
    100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes loding-cubeGridScaleDelay {

    0%,
    70%,
    100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

/*---------抖动-----------*/

@-webkit-keyframes shakeSign {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    45% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    47.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    55% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    57.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    62.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    65% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes shakeSign {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    45% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    47.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    55% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    57.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    62.5% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    65% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

/* 左右摇晃 */

@-webkit-keyframes swingLR {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

@-moz-keyframes swingLR {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

@-o-keyframes swingLR {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

@keyframes swingLR {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

/* 漂浮 */
/* 0 */
@-webkit-keyframes float0 {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(-3deg)
    }

    50% {
        -webkit-transform: translateY(-20px) rotate(4deg)
    }
}

@-moz-keyframes float0 {

    0%,
    100% {
        -moz-transform: translateY(0) rotate(-3deg)
    }

    50% {
        -moz-transform: translateY(-20px) rotate(4deg)
    }
}

@-o-keyframes float0 {

    0%,
    100% {
        -o-transform: translateY(0) rotate(-3deg)
    }

    50% {
        -o-transform: translateY(-20px) rotate(4deg)
    }
}

@keyframes float0 {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg)
    }

    50% {
        transform: translateY(-20px) rotate(4deg)
    }
}

/* 1 */
@-webkit-keyframes float1 {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(-6deg)
    }

    50% {
        -webkit-transform: translateY(-20px) rotate(8deg)
    }
}

@-moz-keyframes float1 {

    0%,
    100% {
        -moz-transform: translateY(0) rotate(-6deg)
    }

    50% {
        -moz-transform: translateY(-20px) rotate(8deg)
    }
}

@-o-keyframes float1 {

    0%,
    100% {
        -o-transform: translateY(0) rotate(-6deg)
    }

    50% {
        -o-transform: translateY(-20px) rotate(8deg)
    }
}

@keyframes float1 {

    0%,
    100% {
        transform: translateY(0) rotate(-6deg)
    }

    50% {
        transform: translateY(-20px) rotate(8deg)
    }
}

/* 2 */
@-webkit-keyframes float2 {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(6eg)
    }

    50% {
        -webkit-transform: translateY(-30px) rotate(-8deg)
    }
}

@-moz-keyframes float2 {

    0%,
    100% {
        -moz-transform: translateY(0) rotate(6deg)
    }

    50% {
        -moz-transform: translateY(-30px) rotate(-8deg)
    }
}

@-o-keyframes float2 {

    0%,
    100% {
        -o-transform: translateY(0) rotate(6deg)
    }

    50% {
        -o-transform: translateY(-30px) rotate(-8deg)
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0) rotate(6deg)
    }

    50% {
        transform: translateY(-30px) rotate(-8deg)
    }
}

/* 3 */
@-webkit-keyframes float3 {

    0%,
    100% {
        -webkit-transform: translate(0, -10px) rotate(6eg)
    }

    50% {
        -webkit-transform: translate(-20px, 30px) rotate(-8deg)
    }
}

@-moz-keyframes float3 {

    0%,
    100% {
        -moz-transform: translate(0, -10px) rotate(6eg)
    }

    50% {
        -moz-transform: translate(-20px, 30px) rotate(-8deg)
    }
}

@-o-keyframes float3 {

    0%,
    100% {
        -o-transform: translate(0, -10px) rotate(6eg)
    }

    50% {
        -o-transform: translate(-20px, 30px) rotate(-8deg)
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: translate(0, -10px) rotate(6eg)
    }

    50% {
        transform: translate(-20px, 30px) rotate(-8deg)
    }
}

/* 4 */
@-webkit-keyframes float4 {

    0%,
    100% {
        -webkit-transform: translate(10px, -10px) rotate(-8eg)
    }

    50% {
        -webkit-transform: translate(-15px, 20px) rotate(10deg)
    }
}

@-moz-keyframes float4 {

    0%,
    100% {
        -moz-transform: translate(10px, -10px) rotate(-8eg)
    }

    50% {
        -moz-transform: translate(-15px, 10px) rotate(10deg)
    }
}

@-o-keyframes float4 {

    0%,
    100% {
        -o-transform: translate(10px, -10px) rotate(-8eg)
    }

    50% {
        -o-transform: translate(-15px, 10px) rotate(10deg)
    }
}

@keyframes float4 {

    0%,
    100% {
        transform: translate(10px, -10px) rotate(-8eg)
    }

    50% {
        transform: translate(-15px, 10px) rotate(10deg)
    }
}

@-moz-keyframes shared-horizonal-shimmer-animation {
    0% {
        background-position: -66vw 0
    }

    to {
        background-position: 66vw 0
    }
}

@-webkit-keyframes shared-horizonal-shimmer-animation {
    0% {
        background-position: -66vw 0
    }

    to {
        background-position: 66vw 0
    }
}

@-o-keyframes shared-horizonal-shimmer-animation {
    0% {
        background-position: -66vw 0
    }

    to {
        background-position: 66vw 0
    }
}

@keyframes shared-horizonal-shimmer-animation {
    0% {
        background-position: -66vw 0
    }

    to {
        background-position: 66vw 0
    }
}

@-webkit-keyframes slideUpRetourn {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(-100%);
    }

    100% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0%);
    }
}

@keyframes slideUpRetourn {
    0% {
        transform-origin: 0 0;
        transform: translateY(-100%);
    }

    100% {
        transform-origin: 0 0;
        transform: translateY(0%);
    }
}