html {
    font-size: 312.5%;
}

body {
    background: #3a6f67;
}

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

.piece {
    position: relative;
    width: 100vw;
    overflow: hidden;
    z-index: 1;
}

.off {
    overflow: visible;
    z-index: 5;
}

.bgImg {
    width: 100%;
}

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

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

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

.p1Txt {
    width: 67.9vw;
    position: absolute;
    left: 16.1vw;
    top: 93.2vw;
    z-index: 30;
}

.p1Hero {
    width: 96.6vw;
    position: absolute;
    left: 3.2vw;
    top: 184.2vw;
}



.p1Thunder {
    width: 52.3vw;
    height: 76.5vw;
    position: absolute;
    left: 35.4vw;
    top: 19.3vw;
    background: url(../images/a3.png) no-repeat 0 0/auto 100%;
    animation: flash infinite steps(1) 1.6s;
}

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

    13% {
        background-position: 25% 0;
    }

    16%,
    25% {
        background-position: 50% 0;
    }

    28%,
    31% {
        background-position: 75% 0;
    }

    33%,
    15%,
    27%,
    100% {
        background-position: 100% 0;
    }
}

.p1Block,
.p1Head {
    width: 41.5vw;
    position: absolute;
    left: 28.2vw;
    top: 5.9vw;
}

.p1Head {
    opacity: 0;
    z-index: 10;
    transition: opacity 1s linear;
}

.show .p1Head {
    opacity: 1;
}

.p1Finger {
    width: 25.5vw;
    position: absolute;
    left: 37.7vw;
    top: 34.7vw;
    z-index: 10;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
    transition: opacity 1s linear;
}

.p1Show .p1Finger {
    opacity: 0;
}

#rain {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

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

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

.p2Txt {
    width: 77.4vw;
    position: absolute;
    left: 12.1vw;
    top: 5vw;
    z-index: 50;
}

.p2Flag {
    width: 98vw;
    height: 79vw;
    position: absolute;
    left: -3vw;
    top: 106.7vw;
    background: url('../images/b9.png') no-repeat 0 0/auto 100%;
    animation: flagFloat infinite steps(4) 1s;
}

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

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

.p2Map {
    width: 84.7vw;
    position: absolute;
    left: 12.2vw;
    top: 151.1vw;
    z-index: 5;
}

.p2Point {
    width: 4.7vw;
    position: absolute;
    left: 61.5vw;
    top: 166.4vw;
    z-index: 10;
    transform-origin: 50% 100%;
    animation: bigSmall .5s infinite alternate;
}

.p2Block {
    width: 55.1vw;
    position: absolute;
    left: 6vw;
    top: 158.1vw;
    z-index: 10;
}

.p2Head {
    width: 55.1vw;
    position: absolute;
    left: 6vw;
    top: 158.1vw;
    z-index: 13;
    opacity: 0;
    transition: opacity .8s;
}

.show .p2Head {
    opacity: 1;
}

.p2Finger {
    width: 25.8vw;
    position: absolute;
    left: 37.8vw;
    top: 209.1vw;
    z-index: 15;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
    transition: opacity .8s;
}

.show .p2Finger {
    opacity: 0;
}

.p2Bird {
    width: 31.7vw;
    position: absolute;
    left: 50.7vw;
    top: 119.7vw;
    z-index: 15;
}

.p2Leaf1 {
    width: 36.7vw;
    position: absolute;
    left: -3vw;
    top: 64.5vw;
    z-index: 20;
    transform-origin: 0 50%;
    animation: leafShake 1s alternate infinite linear;
}

.p2Leaf2 {
    width: 25.2vw;
    position: absolute;
    left: 76.8vw;
    top: 79.5vw;
    z-index: 20;
    transform-origin: 100% 50%;
    animation: leafShake 1s alternate infinite linear;
}

.p2Leaf3 {
    width: 25.3vw;
    position: absolute;
    left: 76.7vw;
    top: 172.7vw;
    z-index: 20;
    transform-origin: 100% 50%;
    animation: leafShake 1s alternate infinite linear;
}

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

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

.p3Txt {
    width: 74vw;
    position: absolute;
    left: 11.5vw;
    top: 5.6vw;
}

.p3Solid {
    width: 67.6vw;
    position: absolute;
    left: 0.5vw;
    top: 63.1vw;
    z-index: 3;
    transform: translateX(-100%);
}

.p3Flag {
    width: 96.2vw;
    height: 55.3vw;
    position: absolute;
    left: 0;
    top: 133.2vw;
    z-index: 5;
    background: url('../images/c4.png') no-repeat 0 0 / auto 100%;
    animation: p3FlagFloat infinite steps(3) 1.5s;
}

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

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

.p3Team {
    width: 50.6vw;
    position: absolute;
    left: 49.4vw;
    top: 131.6vw;
    z-index: 10;
}

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

.p3Flash {
    width: 65.4vw;
    height: 34.4vw;
    position: absolute;
    left: 34.4vw;
    top: 42.3vw;
    z-index: 1;
    background: url('../images/c6.png') no-repeat 0 0 /auto 100%;
    animation: seaFlash infinite steps(2) .8s;
}

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

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

.p4Txt {
    width: 71.6vw;
    position: absolute;
    left: 15.1vw;
    top: 85.6vw;
}

.p4Honor {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 12.3vw;
    transform: scale(1.5);
}

.p4Aim {
    width: 22.4vw;
    position: absolute;
    left: 68.6vw;
    top: 146.8vw;
    transition: opacity .8s;
}

.show .p4Aim {
    opacity: 0;
}

.p4Gun1 {
    width: 5.5vw;
    position: absolute;
    left: 77.1vw;
    top: 87.1vw;
    opacity: 0;
    transition: opacity .1s .8s;
}

.p4Gun2 {
    width: 5.5vw;
    position: absolute;
    left: 72.1vw;
    top: 90.7vw;
    opacity: 0;
    transition: opacity .1s 1s;
}

.p4Gun3 {
    width: 5.5vw;
    position: absolute;
    left: 79.3vw;
    top: 92.4vw;
    opacity: 0;
    transition: opacity .1s 1.2s;
}

.show .p4Gun1,
.show .p4Gun2,
.show .p4Gun3 {
    opacity: 1;
}

.p5Txt {
    width: 36.6vw;
    position: absolute;
    left: 31.7vw;
    top: 295.4vw;
    z-index: 10;
}

.cloud1 {
    width: 248.8vw;
    position: absolute;
    left: -120.7vw;
    top: 0;
    z-index: 50;
    transform: translateX(-51%);
}

.cloud2 {
    width: 238.3vw;
    position: absolute;
    left: -11.5vw;
    top: 0;
    z-index: 50;
    transform: translateX(50%);
}

.p6Txt {
    width: 72vw;
    position: absolute;
    left: 15.2vw;
    top: 3.1vw;
}

.p6Finger {
    width: 25.5vw;
    position: absolute;
    left: 15vw;
    top: 109.4vw;
    transform-origin: 100% 0;
    animation: bigSmall 1s infinite alternate;
    transition: opacity .8s;
}

.show .p6Finger {
    opacity: 0;
}

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

.p6Wave {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    animation: waveUp 1s infinite alternate linear;
}

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

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

.p6Sand1 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 124.9vw;
    opacity: 0;
    transition: opacity .8s;
}

.p6Sand2 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 116.8vw;
    opacity: 0;
    transition: opacity .8s .8s;
}

.show .p6Sand1,
.show .p6Sand2 {
    opacity: 1;
}

.changeDate {
    position: relative;
}

.changeDate .swiper-slide {
    width: 100vw;
}

.dateMenu {
    width: 60vw;
    height: calc(9.3vw * 3);
    position: absolute;
    left: 20vw;
    top: 11vw;
    z-index: 50;
    box-sizing: border-box;
    overflow: hidden;
}

.dateMenu .swiper-wrapper {
    position: absolute;
    width: 20vw;
    top: 10vw;
    left: 30vw;
}

.dateMenu .swiper-slide {
    width: 15.8vw;
    height: 9.3vw;
    text-align: center;
    font-size: 5vw;
    line-height: 9.3vw;
    color: #fff;
    font-size: 5vw;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .2);
    opacity: .6;
}

.dateMenu .swiper-slide-active {
    font-size: 12vw;
    opacity: .8;
}

.p7Finger {
    width: 25.5vw;
    position: absolute;
    left: 71.8vw;
    top: 142.3vw;
    animation: bigSmall 1s infinite alternate linear;
    z-index: 30;
    outline: none;
}

.p7Monther {
    width: 6vw;
    position: absolute;
    left: 20vw;
    top: 11.6vw;
    z-index: 10;
}

.p7Date {
    width: 5vw;
    position: absolute;
    left: 49.4vw;
    top: 11.6vw;
    z-index: 10;
}

.p7Number {
    font-size: 12vw;
    line-height: 1em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .2);
    opacity: .8;
    color: #fff;
    position: absolute;
    left: 9vw;
    top: 8.6vw;
    z-index: 10;
}

.p8Txt {
    width: 78vw;
    position: absolute;
    left: 11.2vw;
    top: 24.6vw;
    z-index: 20;
}

.p8Talk {
    width: 50.5vw;
    position: absolute;
    left: 46.1vw;
    top: 84.6vw;
    z-index: 10;
    opacity: 0;
}

.p8Finger {
    width: 25.5vw;
    position: absolute;
    left: 72.1vw;
    top: 113.5vw;
    z-index: 10;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
}

.p8Circle {
    width: 79.4vw;
    position: absolute;
    left: -7.3vw;
    top: 78.1vw;
    transform-origin: 50% 100%;
}

.p8Grand {
    width: 66.8vw;
    position: absolute;
    left: 0;
    top: 65.2vw;
    z-index: 1;
}

.p9Txt {
    width: 66.4vw;
    position: absolute;
    left: 16vw;
    top: 6.3vw;
}

.p9Car {
    width: 93.6vw;
    position: absolute;
    left: 6.4vw;
    top: 30.7vw;
}

.p9Doc {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 73.2vw;
    z-index: 5;
}

.p10Txt {
    width: 64.7vw;
    position: absolute;
    left: 17vw;
    top: 12vw;
}

.p10Eye {
    width: 100vw;
    height: 31.4vw;
    position: absolute;
    left: 0;
    top: 79.8vw;
    background: url('../images/k2.png') no-repeat 0 0/ auto 100%;
}

.close .p10Eye {
    animation: closeEye 3s forwards steps(4);
}

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

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

.p11Txt {
    width: 66.4vw;
    position: absolute;
    left: 16vw;
    top: 8.5vw;
}

.p12Txt {
    width: 70.7vw;
    position: absolute;
    left: 14.1vw;
    top: 9.6vw;
    z-index: 20;
}

.p12Botton {
    width: 56vw;
    position: absolute;
    left: 22vw;
    top: 160.5vw;
    z-index: 20;
}

.p12Flower {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 30vw;
    opacity: 0;
    transition: opacity .5s;
    z-index: 10;
}

.show .p12Flower,
.show .p12Video {
    opacity: 1;
}

.p12Photo {
    width: 82.1vw;
    height: 52.9vw;
    position: absolute;
    left: 9.5vw;
    top: 98.4vw;
    z-index: 1;
    transition: opacity .5s;
}

.show .p12Photo {
    opacity: 0;
}

.p12Video {
    width: 82.1vw;
    height: 52.9vw;
    position: absolute;
    left: 9.5vw;
    top: 98.4vw;
    z-index: 30;
    opacity: 0;
    transition: opacity .5s;
}

.p13Play {
    width: 33.1vw;
    position: absolute;
    left: 9vw;
    top: 76.1vw;
    z-index: 30;
}

.p13Block {
    width: 93.3vw;
    position: absolute;
    left: 3.3vw;
    top: 24.4vw;
}

.p13Photo,
.p13Video {
    width: 89.8vw;
    height: 61.5vw;
    position: absolute;
    left: 5.1vw;
    top: 26vw;
    z-index: 10;
}

.p13Video {
    opacity: 0;
    transform: opacity .8s;
}

.show .p13Video {
    opacity: 1;
}

.p14Txt {
    width: 59.7vw;
    position: absolute;
    left: 19.4vw;
    top: 21.5vw;
}

.p14Block {
    width: 91.6vw;
    position: absolute;
    left: 4.8vw;
    top: 89.2vw;
}

.p14Person {
    width: 28.4vw;
    position: absolute;
    left: 47vw;
    top: 99.2vw;
    z-index: 10;
}

.p15Txt {
    width: 59.1vw;
    position: absolute;
    left: 26vw;
    top: 66.4vw;
}

.p15Txt img {
    width: 59.1vw;
}

.p15Txt p {
    font-size: 20px;
    width: 0px;
    overflow: hidden;
}

.p15Txt p:nth-child(1) {
    transition: width 1s;
}

.p15Txt p:nth-child(2) {
    transition: width 1s 1s;
}

.p15Txt p:nth-child(3) {
    transition: width 1s 2s;
}

.show .p15Txt p {
    width: 100%;
}

.p16Say {
    width: 32.6vw;
    position: absolute;
    left: 33.7vw;
    top: 28vw;
}

.bullet1 {
    width: 358.2vw;
    height: 38vw;
    position: absolute;
    left: 100vw;
    top: 45vw;
    z-index: 10;
    animation: butGo 80s linear infinite;
}

.bullet2 {
    width: 358.2vw;
    height: 38vw;
    position: absolute;
    left: 100vw;
    top: 45vw;
    z-index: 10;
    animation: butGo 80s 40s linear infinite;
}

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

    100% {
        left: -716.4vw;
    }
}

.p16Txt {
    width: 67.7vw;
    position: absolute;
    left: 15.6vw;
    top: 184.5vw;
    z-index: 10;
}

.p16Run {
    width: 72.7vw;
    position: absolute;
    left: 15.9vw;
    top: 98.6vw;
    z-index: 1;
    transform-origin: 50% 100%;
}

.p16Cloud1 {
    width: 117vw;
    position: absolute;
    left: -79.7vw;
    top: 199.4vw;
    animation: cloudIn 7s infinite linear alternate;
}

.p16Cloud2 {
    width: 117vw;
    position: absolute;
    left: 56.7vw;
    top: 202.3vw;
    animation: cloudIn1 7s infinite linear alternate;
}

@keyframes cloudIn {
    0% {
        transform: translateX(-80%);
    }

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

@keyframes cloudIn1 {
    0% {
        transform: translateX(80%);
    }

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

.last .mp3Play {
    position: absolute;
    left: 0;
    top: 45vw;
}