html {
    font-size: 312.5%;
}

body {
    background: #155783;
}

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

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

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

.bgImg {
    width: 100%;
}

/* 第一屏 */

.p1Head {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 30;
}

.p1Shine {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 40;
    opacity: 0;
    transform-origin: 100% 0;
    transform: rotate(45deg);
    animation: shineDown 6s infinite ease-out;
}

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

    50% {
        opacity: 1;
    }

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

.p1Txt {
    width: 52vw;
    position: absolute;
    left: 24vw;
    top: 4.4vw;
    z-index: 50;
}

.p1Sky {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 25;
}

.p1Cloudy {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    background: url(../images/a4.png) repeat-x 0px 0px;
    background-size: cover;
    animation: posterDrop2 8000s linear infinite;
}

@keyframes posterDrop2 {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30000% 0;
    }
}

.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;
    }
}

.p2Txt {
    width: 48.2vw;
    position: absolute;
    left: 25.9vw;
    top: 21vw;
    z-index: 10;
}

.p2Light {
    width: 100vw;
    height: 50.5vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: url('../images/b2.png') no-repeat 0 0/auto 100%;
    animation: p2sun 1s infinite steps(2);
}

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

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

.p3Txt {
    width: 82.8vw;
    position: absolute;
    left: 8.6vw;
    top: 20.7vw;
}

.p3Plane {
    width: 92.4vw;
    height: 29.2vw;
    background: url('../images/c3.png') no-repeat 0 0/auto 100%;
    position: absolute;
    left: -10%;
    top: 51vw;
    transform-origin: 0 0;
    animation:
        planeShake 1s infinite alternate linear,
        propeller .5s infinite steps(2);
    transition: left 2s;
}

.p3Plane.comeIn {
    left: -60%;
}

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

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

@keyframes planeShake {
    0% {
        transform: translateY(3%) rotate(1deg);
    }

    100% {
        transform: translateY(-3%) rotate(0);
    }
}

.p4Txt {
    width: 68.7vw;
    position: absolute;
    left: 15.6vw;
    top: 11.8vw;
}

.p4Plane1 {
    width: 84.1vw;
    position: absolute;
    left: 15vw;
    top: 39.4vw;
    z-index: 20;
    animation: planeShake 1s .5s infinite alternate linear;
    transition: left 1s;
}

.p4Plane2 {
    width: 35vw;
    position: absolute;
    left: 34.3vw;
    top: 28.8vw;
    z-index: 10;
    animation: planeShake 1s .2s infinite alternate linear;
    transition: left 1s;
}

.p4Plane1.comeIn,
.p4Plane2.comeIn {
    left: 70%;
}

.p4Cloudy {
    width: 100vw;
    height: 60vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 30;
    animation: p4CdGo 800s linear infinite;
    background: url('../images/cd2.png') repeat-x 0 0/ auto 100%;
}

@keyframes p4CdGo {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -30000% 0;
    }
}

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

.p5Txt {
    width: 89vw;
    position: absolute;
    left: 5vw;
    top: 13.6vw;
}

.p6Txt {
    width: 67.5vw;
    position: absolute;
    left: 16.2vw;
    top: 11.7vw;
}

.vdoBlock {
    width: 90vw;
    height: 50vw;
    position: absolute;
    left: 5vw;
    top: 43.3vw;
    background: #000 url('../images/f3.png') no-repeat 50% 50%/ cover;
    box-sizing: border-box;
    padding: 1vw;
}

.vdoBlock img {
    width: 100%;
    height: 100%;
}

.p7Txt {
    width: 56.2vw;
    position: absolute;
    left: 38.5vw;
    top: 23.3vw;
    z-index: 10;
}

.bgHr {
    width: 100vw;
    height: 1vw;
    position: absolute;
    left: 0;
    top: 218vw;
    z-index: 300;
}

.p8Txt1 {
    width: 38vw;
    position: absolute;
    z-index: 50;
    left: 5.3vw;
    top: 135.5vw;
}

.p8Txt2 {
    width: 58.1vw;
    position: absolute;
    z-index: 50;
    left: 20.9vw;
    top: 328.6vw;
}

.p8Txt3 {
    width: 36.8vw;
    position: absolute;
    z-index: 50;
    left: 58vw;
    top: 416.9vw;
}

.p8cloud1 {
    width: 104vw;
    position: absolute;
    z-index: 40;
    animation: p8CloudMove1 2s infinite linear;
}

@keyframes p8CloudMove1 {
    0% {
        left: 55.1vw;
        top: 201.3vw;
        opacity: 1;
    }

    100% {
        left: -40vw;
        top: 50vw;
        opacity: 0;
    }
}

.p8cloud2 {
    width: 94.7vw;
    position: absolute;
    z-index: 40;
    animation: p8CloudMove2 2s 1s infinite linear;
}

@keyframes p8CloudMove2 {
    0% {
        left: 90vw;
        top: 338vw;
        opacity: 1;
    }

    100% {
        left: -10vw;
        top: 187vw;
        opacity: 0;
    }
}

.debris {
    width: 100vw;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 177.5vw;
    z-index: 10;
    transition: height 10s;
}

.parachute {
    width: 31.6vw;
    position: absolute;
    left: 14.4vw;
    top: 135.5vw;
    z-index: 20;
    transform-origin: 50% 0;
}

.paraDown {
    animation: paraShake 2s infinite ease-in-out alternate, paraoff 15s infinite linear;
}

@keyframes paraShake {
    0% {
        transform: translateX(30%) rotate(10deg);
    }

    100% {
        transform: translateX(-30%) rotate(-10deg);
    }
}

@keyframes paraoff {
    0% {
        top: 135.5vw;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 328.6vw;
        opacity: 0;
    }
}

.p8loud {
    width: 35vw;
    position: absolute;
    left: 32vw;
    top: 615.5vw;
    transition: transform .5s;
    animation: bigSmall 1s infinite alternate;
}

.p8Chip1 {
    width: 42.1vw;
    height: 60.7vw;
    position: absolute;
    left: 24.5vw;
    top: -22.7vw;
    z-index: 1;
    animation: chipUp 2.5s infinite steps(2);
    background: url('../images/h8.png') no-repeat 0 0/auto 100%;
}

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

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

.p8Chip2 {
    width: 42.1vw;
    height: 60.7vw;
    position: absolute;
    left: 58.3vw;
    top: 192.5vw;
    z-index: 1;
    animation: chipDown 2.5s infinite steps(2);
    background: url('../images/h9.png') no-repeat 0 0/auto 100%;
}

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

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

.p9Plane {
    width: 111.2vw;
    position: absolute;
    left: -16.1vw;
    top: 41.7vw;
}

.p9Star {
    width: 10vw;
    position: absolute;
    display: none;
}

.p9Star1 {
    left: 31vw;
    top: 6.1vw;
}

.p9Star2 {
    left: 17vw;
    top: 20.1vw;
}

.p9Star3 {
    left: 30vw;
    top: 14.1vw;
}

.p9Star4 {
    left: 40vw;
    top: 15.1vw;
}

.p9Star5 {
    left: 55vw;
    top: 7.5vw;
}

.p9Star6 {
    left: 70vw;
    top: 3.5vw;
}

.p9Star7 {
    left: 79vw;
    top: -.5vw;
}

.p9Star8 {
    left: 74vw;
    top: 10.5vw;
}

.p9Star9 {
    left: 100vw;
    top: 4.1vw;
}

.p9Txt {
    width: 62.2vw;
    position: absolute;
    left: 18.9vw;
    top: 74.6vw;
}

.p10Txt {
    width: 26.5vw;
    position: absolute;
    left: 36.8vw;
    top: 6.2vw;
    z-index: 39;
}

.p10flag {
    width: 102.6vw;
    height: 76.7vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background: url('../images/k3.png') no-repeat 0 0/auto 100%;
    animation: p10ani 1s infinite steps(4);
}

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

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

.p11Txt {
    width: 73vw;
    position: absolute;
    left: 13.4vw;
    top: 29.2vw;
    z-index: 30;
}

.viewport {
    width: 100vw;
    height: 80vw;
    position: absolute;
    left: 0;
    bottom: 40vw;
    z-index: 100;
}

.p12Txt {
    width: 22.1vw;
    position: absolute;
    left: 48.4vw;
    top: 57vw;
    z-index: 5;
    transform: skew(0deg,
            4deg) rotateX(0deg) rotateY(-13deg);
}

.p12point {
    width: 29.8vw;
    position: absolute;
    left: 66.1vw;
    top: 65.4vw;
    z-index: 30;
    opacity: 1;
    transition: opacity .3s;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
}

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

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

.paint {
    perspective: 62px;
}

.p12Draw {
    width: 28vw;
    position: absolute;
    left: 48.5vw;
    top: 41vw;
    z-index: 30;
    transition: all 1s;
    transform-origin: 0 0;
    transform: skew(-9deg,
            18deg) rotateX(1deg) rotateY(-10deg) scale(0.88);
}

.drawOpen .p12Draw {
    width: 80vw;
    position: absolute;
    left: 10vw;
    top: 35.8vw;
    transform: rotate(0) skew(0) scale(1);
}

.drawOpen .p12Frame {
    opacity: 1;
}


.p12Frame {
    width: 80vw;
    position: absolute;
    left: 10vw;
    top: 35.8vw;
    z-index: 1;
    transition: opacity .5s 1s;
    opacity: 0;
}

.drawOpen .p12point {
    opacity: 0;
}

.p13Txt {
    width: 62.4vw;
    position: absolute;
    left: 18.7vw;
    top: 8.6vw;
}

.warship1 {
    width: 100vw;
    position: absolute;
    left: -70vw;
    top: 41.5vw;
    transition: left 2s;
}

.callShow .warship1 {
    left: 0;
}

.warship2 {
    width: 89.3vw;
    position: absolute;
    left: -60vw;
    top: 120.1vw;
    transition: left 2s 1s;
}

.callShow .warship2 {
    left: 9.2vw;
}

.call1,
.call2,
.call3,
.call4 {
    position: absolute;
    transform-origin: 0 100%;
    opacity: 0;
    transform: scale(.1);
}

.call1 {
    width: 54.4vw;
    left: 26.4vw;
    top: 48.7vw;
    transition: all .4s 1.5s;
}

.call2 {
    width: 25vw;
    left: 46.2vw;
    top: 58.6vw;
    transition: all .4s 1.9s;
}

.call3 {
    width: 54.4vw;
    left: 33.7vw;
    top: 111.5vw;
    transition: all .4s 2.3s;
}

.call4 {
    width: 25vw;
    left: 58.4vw;
    top: 121.4vw;
    transition: all .4s 2.7s;
}

.callShow .call1,
.callShow .call2,
.callShow .call3,
.callShow .call4 {
    transform: scale(1);
    opacity: 1;
}

.aircraft {
    width: 150vw;
    position: absolute;
    left: 0;
    top: 201.1vw;
    z-index: 10;
    transform-origin: 0 0;
    /* transition: all 2s 7s; */
    /* transform: scale(1.65); */
}

.callShow .aircraft {
    /* transform: scale(1); */
    animation:
        planeSmall 2s 5s forwards linear,
        planeShake 1s infinite alternate linear;
}

@keyframes planeSmall {
    0% {
        width: 150vw;
    }

    100% {
        width: 100vw;
    }
}

.p13Cloud {
    width: 100vw;
    position: absolute;
    left: 0vw;
    top: 188.3vw;
    z-index: 20;
    transition: all 1s 3s;
    opacity: 1;
}

.callShow .p13Cloud {
    left: 100vw;
    opacity: 0;
}

.p13smCloud {
    width: 100vw;
    height: 60vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 30;
    animation: p4CdGo 800s linear infinite;
    background: url(../images/cd2.png) repeat-x 0 0/ auto 100%;
    opacity: 0;
    transition: opacity .5s 6s;
}

.callShow .p13smCloud {
    opacity: 1;
}

.p14Txt {
    width: 62vw;
    position: absolute;
    left: 19vw;
    top: 6.7vw;
}

#planeFly {
    margin-top: -1px;
}

.p15Txt {
    width: 55.1vw;
    position: absolute;
    left: 22.4vw;
    top: 11.2vw;
}

.p15Plane {
    width: 16.1vw;
    position: absolute;
    left: 59.3vw;
    top: 69.8vw;
    z-index: 1;
    opacity: 0;
}

.p15Ship {
    width: 33.3vw;
    position: absolute;
    left: 50.6vw;
    top: 67.9vw;
    z-index: 5;
}

.p15finger {
    width: 24.7vw;
    position: absolute;
    left: 7.6vw;
    top: 64.8vw;
    z-index: 30;
    transform-origin: 100% 0;
    animation: bigSmall 1s infinite alternate;
}

.fly .p15Plane {
    animation: planeFly 1s forwards linear;
}

@keyframes planeFly {
    0% {
        left: 53.3vw;
        top: 69.8vw;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 110vw;
        top: 5vw;
        opacity: 1;
    }
}

.p16Txt1 {
    width: 78.5vw;
    position: absolute;
    left: 10.7vw;
    top: 6.4vw;
    z-index: 20;
}

.p16Txt2 {
    width: 63.9vw;
    position: absolute;
    left: 9vw;
    top: 122.4vw;
    z-index: 20;
}

.p16Txt3 {
    width: 70.8vw;
    position: absolute;
    left: 14.6vw;
    top: 201vw;
    z-index: 20;
}

.p16Flower1 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
}

.p16Flower2 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 130vw;
}

.p16Finger {
    width: 25.4vw;
    position: absolute;
    left: 71vw;
    top: 129.4vw;
    z-index: 30;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
}

.p17Txt {
    width: 34.6vw;
    position: absolute;
    left: 32.7vw;
    top: 2.8vw;
    z-index: 30;
}

.pilot {
    width: 73.5vw;
    position: absolute;
    left: -1.9vw;
    bottom: 0;
    z-index: 20;
}

.p17Team {
    width: 121.6vw;
    position: absolute;
    left: -121.6vw;
    top: 71.4vw;
    z-index: 1;
    animation: teamFly 6s infinite linear;
}

@keyframes teamFly {
    0% {
        left: -121.6vw;
    }

    70%,
    100% {
        left: 100vw;
        top: 0;
    }
}

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

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

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

    100% {
        left: -1019vw;
    }
}

.mp3Hide,
.bgMp3,
.talkMp3,
.alertMp3 {
    display: none;
}