@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut2 {
    0% {
        opacity: 1;
    }
    10%{
        opacity: .7;
    }
    100% {
        opacity: 0;
    }
}
@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateRing2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}


@keyframes scale {
    0%{
        transform: scale(1);
        opacity:1;
    }
    40% {
        opacity:1;
        transform: scale(0.8);
    }
    80% {
        opacity:1;
        transform: scale(1.2);
    }
}

@keyframes scale2 {
    0%{
        transform: scale(1);
        opacity:1;
    }
    40% {
        opacity:1;
        transform: scale(0.9);
    }
    80% {
        opacity:1;
        transform: scale(1.1);
    }
}

@keyframes scale3 {
    0%{
        transform: scale(1);
        opacity:1;
    }
    40% {
        opacity:1;
        transform: scale(0.6);
    }
    80% {
        opacity:1;
        transform: scale(1);
    }
}

@keyframes fadeInUp1 {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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


@keyframes flipGu {
    0% {
        opacity: 1;
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: linear;
    }

    40% {
        opacity: 1;
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: linear;
    }

    45% {
        opacity: 1;
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: linear;
    }

    100%{
        opacity: 1;
        transform: perspective(400px);
        animation-timing-function: linear;
    }
}

@keyframes lightMove1 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    40%{
        transform: translate3d(-20%, 0, 0);
    }
    80% {
        transform: translate3d(20%, 0, 0);
    }
}

@keyframes lightMove2 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    40%{
        transform: translate3d(20%, 0, 0);
    }
    80% {
        transform: translate3d(-20%, 0, 0);
    }
}

@keyframes imgBG0 {
    0% {
        opacity: 1;
        height:100%;
    }
    100% {
        opacity: 1;
        height:0%
    }
}

@keyframes fadeInOut1 {
    0% {
        opacity: 0;
    }
    1%{
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}


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


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

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

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

@keyframes dot3 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-90deg);
    }
}