@charset "utf-8";
.spin {
    animation: 3s linear 0s normal infinite running spin;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

.spina {
    animation: 3s linear 0s normal infinite running spina;
}

.spinf {
    animation: 6s linear 0s normal infinite running spinf;
}

@keyframes spinf {
    0% {
        transform: rotate(359deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

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

    20% {
        transform: rotate(60deg);
    }

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

.moves {
    animation: 5s linear 0s alternate infinite running moves;
}

@keyframes moves {
    0% {
        bottom: -15px;
    }
    50% {
        bottom: 20px;
    }
    100% {
        bottom: -15px;
    }
}

.moves1 {
    animation: 3s linear 0s normal infinite running moves1;
}

@keyframes moves1 {
    0% {
        left: -15%;

    }
    15% {
        left: 40%;
    }
    30% {
        left: 80%;
        opacity: 0;
    }
    100% {
        left: 500%;
        opacity: 0;
    }
}

.moves2 {
    animation: 2s linear 0s normal infinite running moves2;
}

@keyframes moves2 {
    0% {
        top: 0%;
    }
    15% {
        top: 42%;
    }
    30% {
        top: 85%;
        opacity: 0;
    }
    100% {
        top: 500%;
        opacity: 0;
    }
}

.moves3 {
    animation: 2s linear 0s normal infinite running moves3;
}

@keyframes moves3 {
    0% {
        top: 0%;
    }
    15% {
        top: 30%;
    }
    30% {
        top: 60%;
    }
    100% {
        top: 500%;
    }
}

.shine {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: shine;
    background: #dfc5ff linear-gradient(to bottom, #e4fbff 0%, #dfc5ff 50%, #6ee7ff 100%) no-repeat scroll 0 0 / 1em auto padding-box text;
    color: rgba(110, 231, 255, 0.1);
    font-family: "微软雅黑";
}

@keyframes shine {
    0% {
        background-position: left top;
    }
    100% {
        background-position: left bottom;
    }
}

.rolled {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -webkit-animation: rolled 2.5s .2s ease both infinite;
    -moz-animation: rolled 2.5s .2s ease both infinite;
    -o-animation: rolled 2.5s .2s ease both infinite;
    -ms-animation: rolled 2.5s .2s ease both infinite;
    overflow: hidden;
}

@-webkit-keyframes rolled {
    0% {
        left: -150px;
    }
    100% {
        left: 920px;
    }
}

@-moz-keyframes rolled {
    0% {
        left: -150px;
    }
    100% {
        left: 920px;
    }
}

@-o-keyframes rolled {
    0% {
        left: -150px;
    }
    100% {
        left: 920px;
    }
}

@-ms-keyframes rolled {
    0% {
        left: -150px;
    }
    100% {
        left: 920px;
    }
}

@keyframes rolled {
    0% {
        left: -150px;
    }
    100% {
        left: 920px;
    }
}

.twinkle {
    animation: 3s linear 0s alternate infinite running twinkle;
}

@keyframes twinkle {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

.twinkle_quick {
    animation: 2s linear 0s alternate infinite running twinkle_quick;
}

@keyframes twinkle_quick {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.9;
    }
}

.changecolor {
    animation: 5s linear 0s alternate infinite running changecolor;
}

@keyframes changecolor {
    0% {
        border-color: #81f2ff;
    }
    50% {
        border-color: #ff3636;
    }
    100% {
        border-color: #81f2ff;
    }
}

.slide_lr {
    animation: 30s linear 0s normal infinite running slide_lr;
}

@keyframes slide_lr {
    0% {
        background-position: 0 center;
    }
    50% {
        background-position: -120px center;
    }
    100% {
        background-position: -240px center;
    }
}

.big_ani {
    animation: .5s linear 0s normal 1 running big_ani;
}

@keyframes big_ani {
    0% {
        transform: scale(0, 0);
    }
    100% {
        transform: scale(1, 1);
    }
}

.sx_ani {
    animation: 5s linear 0s normal infinite running sx_ani;
}

@keyframes sx_ani {
    0% {
        width: 350px;
        height: 300px;
    }
    10% {
        width: 70px;
        height: 60px;
    }
    100% {
        width: 70px;
        height: 60px;
    }
}

.roY {
    animation: 5s linear 0s normal infinite running roY;
}

@keyframes roY {
    0% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
    }
}

.img_bounce1 {
    animation: 3s linear 0s normal infinite running img_bounce1;
}

@keyframes img_bounce1 {
    0% {
        margin-top: 0;
    }
    70% {
        margin-top: 0;
    }
    75% {
        margin-top: -20px;
    }
    80% {
        margin-top: 0;
    }
}

.img_bounce2 {
    animation: 3s linear 0s normal infinite running img_bounce2;
}

@keyframes img_bounce2 {
    0% {
        margin-top: 0;
    }
    75% {
        margin-top: 0;
    }
    80% {
        margin-top: -20px;
    }
    85% {
        margin-top: 0;
    }
}

.img_bounce3 {
    animation: 3s linear 0s normal infinite running img_bounce3;
}

@keyframes img_bounce3 {
    0% {
        margin-top: 0;
    }
    80% {
        margin-top: 0;
    }
    85% {
        margin-top: -20px;
    }
    90% {
        margin-top: 0;
    }
}

.img_bounce4 {
    animation: 3s linear 0s normal infinite running img_bounce4;
}

@keyframes img_bounce4 {
    0% {
        margin-top: 0;
    }
    85% {
        margin-top: 0;
    }
    90% {
        margin-top: -20px;
    }
    95% {
        margin-top: 0;
    }
}

.img_bounce5 {
    animation: 3s linear 0s normal infinite running img_bounce5;
}

@keyframes img_bounce5 {
    0% {
        margin-top: 0;
    }
    90% {
        margin-top: 0;
    }
    95% {
        margin-top: -20px;
    }
    100% {
        margin-top: 0;
    }
}

.animatebox {
    position: relative;
}

.animatebox .ani {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.roll-TB {
    animation: 3s linear 0s alternate infinite running roll-TB;
}

@keyframes roll-TB {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, 5%);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.jjfa3-movehe {
    animation: 5s linear 0s alternate infinite running jjfa3-movehe;
}

@keyframes jjfa3-movehe {
    0% {
        transform: translate(-52px, -20px);
    }
    35% {
        transform: translate(-52px, -20px);
    }
    65% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.xiemove {
    animation: 1s linear 0s normal infinite running xiemove;
}

@keyframes xiemove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -20px 20px;
    }
}

.xiemove2 {
    animation: 30s linear 0s normal infinite running xiemove2;
}

@keyframes xiemove2 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1920px 1080px;
    }
}

.face_scan {
    animation: 4s linear 0s normal infinite running face_scan;
}

@keyframes face_scan {
    0% {
        background-position: center 143px;
    }
    15% {
        background-position: center 143px;
    }
    100% {
        background-position: center -143px;
    }
}