/*animation In&Out*/
.toRight,
.toRightSmall,
.toLeft,
.toLeftSmall,
.toBottom,
.toBottomSmall,
.toTop,
.toTopSmall,
.scaleIn {
    transition: all .6s;
    opacity: 0;
}

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

.toRightSmall {
    transform: translate3d(-20%, 0, 0);
}

.toLeft {
    transform: translate3d(100%, 0, 0);
}

.toLeftSmall {
    transform: translate3d(20%, 0, 0);
}

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

.toBottomSmall {
    transform: translate3d(0, -10%, 0);
}

.toTop {
    transform: translate3d(0, 100%, 0);
}

.toTopSmall {
    transform: translate3d(0, 20%, 0);
}

.scaleIn {
    transform: scale(1.4, 1.4);
}

.part.show .toRight,
.part.show .toRightSmall,
.part.show .toLeft,
.part.show .toLeftSmall,
.part.show .toBottom,
.part.show .toBottomSmall,
.part.show .toTop,
.part.show .toTopSmall {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.part.show .scaleIn {
    transform: scale(1, 1);
    opacity: 1;
}

/*transition delay*/
.part.show .delay1 {
    transition-delay: .1s;
}

.part.show .delay2 {
    transition-delay: .2s;
}

.part.show .delay3 {
    transition-delay: .3s;
}

.part.show .delay4 {
    transition-delay: .4s;
}

.part.show .delay5 {
    transition-delay: .5s;
}

.part.show .delay6 {
    transition-delay: .6s;
}

.part.show .delay7 {
    transition-delay: .7s;
}

.part.show .delay8 {
    transition-delay: .8s;
}

.part.show .delay9 {
    transition-delay: .9s;
}

.part.show .delay10 {
    transition-delay: 1s;
}

@keyframes ani {
    0% {
        opacity: .5;
    }

    to {
        opacity: 1;
    }
}

@keyframes ani1 {

    0%,
    to {
        transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        transform: translateX(.1rem);
        transform: translateX(.1rem)
    }
}

@keyframes ani2 {
    50% {
        transform: translateX(0);
        transform: translateX(0)
    }

    0%,
    to {
        transform: translateX(.1rem);
        transform: translateX(.1rem)
    }
}

@keyframes ani3 {
    0% {
        opacity: 0;
        transform: translateY(.3rem);
    }

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

@keyframes ani4 {
    0% {
        opacity: 0;
        transform: translateY(.1rem);
    }

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

@keyframes yumao {
    0% {
        transform: translateY(-.5rem);
    }

    50% {
        transform: translate(-.3rem, 6rem);
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(.3rem, 9rem);
        opacity: 0;
    }
}

@keyframes arrow {

    0%,
    100% {
        transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        transform: translateX(.05208rem);
        transform: translateX(.05208rem);
    }
}



@keyframes baidong {
    0% {
        transform: translateY(.1rem);
        transform: translateY(.1rem)
    }

    50% {
        transform: translateY(0);
        transform: translateY(0)
    }

    to {
        transform: translateY(.1rem);
        transform: translateY(.1rem)
    }
}

@keyframes huxi {
    0% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

@keyframes sca1 {
    0% {
        opacity: 0;
        transform: translateY(-.26042rem) perspective(13.02083rem) rotateY(-100deg);
        transform: translateY(-.26042rem) perspective(13.02083rem) rotateY(-100deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) perspective(13.02083rem) rotateY(0);
        transform: translateY(0) perspective(13.02083rem) rotateY(0);
    }
}

@keyframes sca {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: bottom right;
    }

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

@keyframes faguang {
    0% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 0, .9));
    }

    20% {
        filter: drop-shadow(0 0 0 rgba(255, 255, 0, .9));
    }

    40% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 0, .9));
    }

    60% {
        filter: drop-shadow(0 0 0 rgba(255, 255, 0, .9));
    }

    80% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 0, .9));
    }

    100% {
        filter: drop-shadow(0 0 0 rgba(255, 255, 0, .9));
    }
}

@keyframes sca2 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: left bottom;
    }

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

@keyframes index-fade {
    0% {
        opacity: .8
    }

    to {
        opacity: 0
    }
}

@keyframes ellipsis {

    0%,
    12.5% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    50% {
        text-shadow: .5em 0
    }

    75% {
        text-shadow: .5em 0, 1em 0
    }

    to {
        text-shadow: .5em 0, 1em 0, 1.5em 0
    }
}

@keyframes index-fadeIn-2PNid {
    0% {
        opacity: 0;
        transform: translateZ(5rem);
        transform: translateZ(5rem)
    }

    to {
        opacity: 1;
        transform: translateZ(5rem);
        transform: translateZ(5rem)
    }
}

@keyframes index-rightCorner-57sQl {
    0% {
        opacity: 0;
        transform: translate(2rem, -1.5rem) translateZ(5rem);
        transform: translate(2rem, -1.5rem) translateZ(5rem)
    }

    25% {
        opacity: 1
    }

    to {
        opacity: 1;
        transform: translate(0) translateZ(5.20833rem);
        transform: translate(0) translateZ(5.20833rem)
    }
}

@keyframes index-leftCorner-5YAam {
    0% {
        opacity: 0;
        transform: translate(-1.5rem, 1rem) translateZ(5rem);
        transform: translate(-1.5rem, 1rem) translateZ(5rem)
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 1;
        transform: translate(0) translateZ(5.20833rem);
        transform: translate(0) translateZ(5.20833rem)
    }
}

@keyframes index-scale-QrGY2 {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    25% {
        transform: scale(.9);
        transform: scale(.9)
    }

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

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

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

@keyframes envelopeEntry {
    0% {
        opacity: 0;
        transform: rotateY(90deg) scale(0.5);
    }

    70% {
        opacity: 1;
        transform: rotateY(-10deg) scale(1.1);
    }

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