html {
    font-size: 312.5%;
}

body {
    background: #E7E7E7;
}

.loadStart {
    height: 100vh;
    overflow: hidden;
}

.piece {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

.bgImg {
    width: 100%;
}

.ofi {
    overflow: inherit;
}

.p1Txt {
    width: 78vw;
    position: absolute;
    left: 11vw;
    top: 25vw;
    z-index: 30;
}

.leaf1 {
    width: 10vw;
    position: absolute;
    left: 10vw;
    top: -10%;
    animation: leafDown 10s 2s infinite ease-in;
    opacity: 0;
}

.leaf2 {
    opacity: 0;
    width: 15vw;
    position: absolute;
    left: 30vw;
    top: -10%;
    animation: leafDown 6s infinite ease-in;
}

.leaf3 {
    opacity: 0;
    width: 5vw;
    position: absolute;
    left: 60vw;
    top: -10%;
    animation: leafDown 7s 5s infinite ease-in;
}

.leaf4 {
    opacity: 0;
    width: 8vw;
    position: absolute;
    left: 90vw;
    top: -10%;
    animation: leafDown 8s 8s infinite ease-in;
}

.leaf5 {
    opacity: 0;
    width: 11vw;
    position: absolute;
    left: 40vw;
    top: -10%;
    animation: leafDown 12s 10s infinite ease-in;
}

@keyframes leafDown {
    from {
        top: -10%;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 1;
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
}

.p2Txt {
    width: 50vw;
    position: absolute;
    left: 25vw;
    top: 38.5vw;
    z-index: 30;
}

.p2Leaf1 {
    width: 80.6vw;
    position: absolute;
    left: 0;
    top: 0;
    animation: lfDo 5s infinite linear alternate;
    transform-origin: 0 0;
}

.p2Leaf2 {
    width: 75vw;
    position: absolute;
    right: -10vw;
    top: 26.2vw;
    animation: lfDo 3s infinite linear alternate;
    transform-origin: 100% 0;
}

.p2Leaf3 {
    width: 44vw;
    position: absolute;
    left: -10vw;
    top: 124vw;
    animation: lfDo 2s infinite linear;
    transform-origin: 50% 50%;
}

@keyframes lfDo {

    0%,
    40%,
    100% {
        transform: skewX(0deg);
    }

    20% {
        transform: skewX(1deg);
    }

    80% {
        transform: skewX(-2deg);
    }
}

.p3Txt {
    width: 82vw;
    position: absolute;
    left: 9vw;
    top: 5.5vw;
    z-index: 30;
}

.p3Bg {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}

.p3rider {
    width: 98.2vw;
    position: absolute;
    left: -9.5vw;
    top: 55.2vw;
    z-index: 10;
    opacity: 1;
    transition: opacity 2s 1s;
}

.p3mulan {
    width: 97.1vw;
    position: absolute;
    left: 2.2vw;
    top: 66.6vw;
    opacity: 0;
    z-index: 10;
    transition: opacity 2s 1s;
}

.mulanShow .p3Bg {
    opacity: 1;
}

.mulanShow .p3rider {
    opacity: 0;
}

.mulanShow .p3mulan {
    opacity: 1;
}

.p3Finger {
    width: 24.8vw;
    position: absolute;
    right: 0vw;
    top: 105vw;
    z-index: 100;
    animation: fingerClick 1s infinite linear alternate;
    transform-origin: 0 0;
}

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

    100% {
        transform: scale(.8);
    }
}

.p4Txt {
    width: 45vw;
    position: absolute;
    left: 27.5vw;
    top: 9.5vw;
    z-index: 30;
}

.p4Person {
    width: 231vw;
    position: absolute;
    left: -20vw;
    bottom: 0;
    z-index: 1;
}

.p5Txt1 {
    width: 38vw;
    position: absolute;
    left: 31vw;
    top: 6vw;
    z-index: 30;
    opacity: 0;
    transition: opacity .5s;
}

.p5Txt2 {
    width: 38vw;
    position: absolute;
    left: 31vw;
    top: 20vw;
    z-index: 30;
    opacity: 0;
    transition: opacity .5s 1s;
}

.p5Txt3 {
    width: 30vw;
    position: absolute;
    left: 35vw;
    top: 34vw;
    z-index: 30;
    opacity: 0;
    transition: opacity .5s 2s;
}

.showTxt .p5Txt1,
.showTxt .p5Txt2,
.showTxt .p5Txt3 {
    opacity: 1;
}

.viewport {
    position: absolute;
    width: 100vw;
    height: 80vw;
    top: 0;
    left: 0;
}

.p6Txt {
    width: 60vw;
    position: absolute;
    left: 20vw;
    top: 10vw;
    z-index: 30;
}

.p7Txt {
    width: 67.1vw;
    position: absolute;
    left: 12.1vw;
    top: 13.6vw;
    z-index: 30;
}

.p7Book {
    width: 50vw;
    position: absolute;
    left: 7.8vw;
    bottom: 3.8vw;
    z-index: 20;
    transform-origin: 100% 0;
    transform: translateY(25%) scale(.1) rotate(55deg);
    opacity: 0;
}

.p8Txt {
    width: 71vw;
    position: absolute;
    left: 14.5vw;
    top: 4.7vw;
    z-index: 30;
}

.p9Txt {
    width: 70vw;
    position: absolute;
    left: 15vw;
    top: 6vw;
    z-index: 30;
}

.p10Txt {
    width: 74vw;
    position: absolute;
    left: 13vw;
    top: 6.4vw;
    z-index: 30;
}

.p11Txt {
    width: 57vw;
    position: absolute;
    left: 21vw;
    top: 0;
    z-index: 30;
}

.p11Txt1 {
    width: 42.1vw;
    position: absolute;
    right: 6.4vw;
    bottom: 0;
    z-index: 30;
}

.p11head {
    position: relative;
    z-index: 20;
}

.p11Right {
    width: 24.8vw;
    height: 24.8vw;
    position: absolute;
    right: 8vw;
    top: 135vw;
    z-index: 100;
    animation: fingerClick 1s infinite linear alternate;
    transform-origin: 0 0;
    outline: none;
}

.bgSwiper {
    width: 100%;
    position: absolute;
    top: 20vw;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.bgSwiper .swiper-slide img {
    width: 100%;
}

.p12Txt {
    width: 38.2vw;
    position: absolute;
    right: 6.4vw;
    top: 5.5vw;
    z-index: 30;
}

.p12Police {
    width: 60.8vw;
    position: absolute;
    left: 1.5vw;
    top: 76.6vw;
    transform: translateX(-100%);
}

.p12Car {
    width: 47.2vw;
    position: absolute;
    left: 60.9vw;
    top: 71.3vw;
    transform: translateX(100%);
}

.p12Sign {
    width: 38vw;
    position: absolute;
    left: 37.6vw;
    top: 147.4vw;
    z-index: 20;
    transform: scale(0);
}

.p13Txt {
    width: 60vw;
    position: absolute;
    left: 8.8vw;
    top: 10.3vw;
}

.p14Txt {
    width: 53vw;
    position: absolute;
    left: 9.7vw;
    top: 23.9vw;
    z-index: 20;
}

.p14Txt1 {
    width: 78.1vw;
    position: absolute;
    left: 12.3vw;
    top: 36vw;
    z-index: 20;
}

.p14LeftDown {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 50;
}

.p14Fire {
    width: 86.6vw;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 40;
}

.p14Hero {
    width: 46.8vw;
    position: absolute;
    left: 49vw;
    top: 16.1vw;
    transform-origin: 50% 0;
    animation: leftright 2s infinite alternate linear;
}

@keyframes leftright {
    0% {
        transform: skewX(-1deg);
    }

    100% {
        transform: skewX(1deg);
    }
}

.p14Bad {
    width: 61.2vw;
    height: 107vw;
    position: absolute;
    left: -5vw;
    top: 85vw;
    background-image: url('../images/p4.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 100%;
    animation: 1s BadDoing infinite steps(2);
}

@keyframes BadDoing {
    0% {
        background-position: 0 0;
    }

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

.window {
    width: 100vw;
    height: 100vw;
    position: relative;
    perspective: 500;
    overflow: hidden;
}

.p14Moon {
    width: 32.1vw;
    position: absolute;
    left: 24vw;
    top: 25.7vw;
    transform: scale(1);
}

.p14Win {
    width: 59.2vw;
    position: absolute;
    left: 22.5vw;
    top: 25.7vw;
    z-index: 10;
    transform: scale(12);
    display: none;
}

.pin-spacer {
    background-color: #000;
    background-image: url('../images/q.jpg');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.p15Txt {
    width: 80vw;
    position: absolute;
    left: 12.6vw;
    top: 0;
    z-index: 10;
}

.p15Txt1 {
    width: 68.4vw;
    position: absolute;
    left: 12.6vw;
    top: 14vw;
    z-index: 10;
    display: none;
}

.p15Say {
    width: 8.7vw;
    position: absolute;
    left: 70vw;
    top: 13vw;
    z-index: 20;
    animation: fingerClick 1s infinite linear alternate;
    transform-origin: 50% 50%;
}

.p15Door {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url('../images/r2.png');
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    transform-origin: 50% 35%;
    transform: scale(5);
    display: none;
}

.p15Eagle {
    width: 31.5vw;
    position: absolute;
    left: 93.6vw;
    top: 51.4vw;
    animation: eagleFly 5s infinite linear;
}

@keyframes eagleFly {
    0% {
        left: -31.5vw;
        top: 73.6vw;
        transform: rotate(0);
    }

    14% {
        left: -5.7vw;
        top: 59.6vw;
        transform: rotate(0);
    }

    28% {
        left: 12.3vw;
        top: 42.2vw;
        transform: rotate(10deg);
    }

    42% {
        left: 36.5vw;
        top: 33.9vw;
        transform: rotate(35deg);
    }

    56% {
        left: 56.4vw;
        top: 36.9vw;
        transform: rotate(50deg);
    }

    70% {
        left: 74.3vw;
        top: 47.4vw;
        transform: rotate(71deg);
    }

    84% {
        left: 93.6vw;
        top: 61.4vw;
        transform: rotate(70deg);
    }

    98%,
    100% {
        left: 112vw;
        top: 63.5vw;
    }
}

.p16Txt {
    width: 46vw;
    position: absolute;
    left: 30.6vw;
    top: 4.7vw;
    z-index: 10;
}

.p16Fire1,
.p16Fire2,
.p16Fire3 {
    width: 12vw;
    position: absolute;
    z-index: 5;
    display: none;
}

.p16Fire1 {
    left: 10.3vw;
    top: 72.3vw;
}

.p16Fire2 {
    left: 41.3vw;
    top: 72.3vw;
}

.p16Fire3 {
    left: 70.3vw;
    top: 71vw;
}

.p16Blood {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 47.7vw;
    z-index: 1;
    display: none;
}

.p17Txt {
    width: 88vw;
    position: absolute;
    left: 6vw;
    top: 9.1vw;
}

.p18Txt {
    width: 65vw;
    position: absolute;
    left: 17.5vw;
    top: 183vw;
}

.p18Say {
    width: 30.4vw;
    position: absolute;
    left: 6.8vw;
    top: 266vw;
}

.bullet1 {
    width: 362.6vw;
    height: 38vw;
    position: absolute;
    left: 100vw;
    bottom: 58.7vw;
    z-index: 40;
}

.bullet2 {
    width: 362.6vw;
    height: 38vw;
    position: absolute;
    left: 100vw;
    bottom: 58.7vw;
    z-index: 40;
}

.bullet1.goIn {
    animation: butGo 80s linear infinite;
}

.bullet2.goIn {
    animation: butGo 80s 40s linear infinite;
}

@keyframes butGo {
    0% {
        left: 100vw;
    }

    100% {
        left: -800vw;
    }
}

.lastPiece {
    filter: grayscale(100%);
    transition: filter 1s linear;
}

.lastPiece.shineDown {
    filter: grayscale(0%);
}

.p18Shine {
    width: 100%;
    position: absolute;
    top: 80vw;
    right: 0;
    z-index: 40;
    opacity: 0;
    /* display: none; */
    transform-origin: 100% 0;
    transform: rotate(45deg);
}

.lastPiece.shineDown .p18Shine {
    opacity: 1;
}

@keyframes shineDown {
    0% {
        transform: rotate(45deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

.p18Bird {
    width: 86.6vw;
    position: absolute;
    left: 9.6vw;
    top: 69.9vw;
    z-index: 30;
    opacity: 0;
    transition: opacity 1s;
}

.lastPiece.shineDown .p18Bird {
    opacity: 1;
}

.newTxt1 {
    width: 50.3vw;
    position: absolute;
    left: 10vw;
    top: 33vw;
}

.newTxt2 {
    width: 50.3vw;
    position: absolute;
    right: 10vw;
    bottom: 0;
}

.newTxt3 {
    width: 50.3vw;
    position: absolute;
    right: 10vw;
    top: 160vw;
}

.mp3Hide,
.bgMp3,
.song,
.childMp3 {
    display: none;
}

.good {
    width: 46vw;
    position: absolute;
    left: 6.3vw;
    bottom: 6vw;
}

.good .goodBg {
    width: 100%;
}

.good .num {
    font-size: 4vw;
    color: #fff;
}

.good .num span {
    font-size: 7vw;
    padding-right: 1.5vw;
    font-family: 'Arial';
    font-weight: bold;
}

.good .flUp1,
.good .flUp2,
.good .flUp3,
.good .flUp4 {
    width: 8vw;
    height: 8.3vw;
    position: absolute;
    top: -10vw;
    left: 7vw;
    background-image: url(../images/w4.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.good .flUp1 {
    background-position: 0 0;
    animation: heartUp 1.2s infinite linear;
}

.good .flUp2 {
    background-position: 0 0;
    animation: heartUp 1.2s .3s infinite linear;
}

.good .flUp3 {
    background-position: 100% 0;
    animation: heartUp 1.2s .6s infinite linear;
}

.good .flUp4 {
    background-position: 0 0;
    animation: heartUp 1.2s .9s infinite linear;
}


@keyframes heartUp {
    0% {
        top: 0;
        transform: scale(.2);
    }

    20%,
    60% {
        transform: translateX(-15%);
    }

    40%,
    80% {
        transform: translateX(15%);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: -33.5vw;
        opacity: 0;
        transform: scale(1.1);
    }
}

.p1finger {
    width: 12vw;
    position: fixed;
    right: 5vw;
    bottom: 20vw;
    z-index: 20;
    animation: p1Up 1s infinite linear;
    transform-origin: 0 0;
}

@keyframes p1Up {
    0% {
        opacity: 1;
        bottom: 20vw;
    }

    100% {
        bottom: 40vw;
        opacity: 0;
    }
}