html {
    font-size: 312.5%;
}

body {
    background-color: #213c49;
}

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

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

.off {
    overflow-y: visible;
    overflow-x: hidden;
    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: 80vw;
    position: absolute;
    z-index: 20;
    left: 11vw;
    top: 218vw;
}

.p1Plane {
    width: 60.4vw;
    position: absolute;
    left: 39.6vw;
    top: 163.5vw;
    z-index: 10;
}

.p1Boom {
    width: 92.6vw;
    position: absolute;
    left: 22.9vw;
    top: 263.3vw;
    transform-origin: 50% 100%;
}

.p1Solider {
    width: 86vw;
    position: absolute;
    left: -18vw;
    top: 291.8vw;
    z-index: 10;
}

.p1Cloud1 {
    width: 159.4vw;
    position: absolute;
    left: -159.4vw;
    top: 26vw;
    animation: leftIn 50s infinite linear;
}

@keyframes leftIn {
    0% {
        left: -113.1vw;
    }

    100% {
        left: 113.1vw;
    }
}

.p1Cloud2 {
    width: 159.4vw;
    position: absolute;
    left: -159.4vw;
    top: 152.9vw;
    animation: leftIn 50s 15s infinite linear;
}

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

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

.p2Blood {
    width: 104.8vw;
    position: absolute;
    left: 20.3vw;
    top: 125.4vw;
    z-index: 20;
}

.p2cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background-color: rgba(126, 206, 204, .15);
}

.p2Leaf,
.p2Leaf1 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/b3.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 300% auto;
}

.p2Leaf {
    animation: leafDown 10s infinite linear;
}

.p2Leaf1 {
    opacity: 0;
    animation: leafDown 10s 5s infinite linear;
    background-size: 200% auto;
}

@keyframes leafDown {
    0% {
        transform: translateX(30%);
        background-position: 0 0;
        opacity: 1;
    }

    100% {
        transform: translateX(-200%);
        background-position: 0 100%;
    }
}

.p3Txt {
    width: 72vw;
    position: absolute;
    left: 14.5vw;
    top: 40.7vw;
}

.p3Photo1 {
    width: 33vw;
    position: absolute;
    left: 14.6vw;
    top: 74.5vw;
    z-index: 5;
}

.p3Photo1_shadow {
    width: 16.3vw;
    position: absolute;
    left: 26.6vw;
    top: 75.5vw;
    opacity: .5;
}

.p3Photo2 {
    width: 32.1vw;
    position: absolute;
    left: 61.5vw;
    top: 59.1vw;
    z-index: 5;
}

.p3Photo2_shadow {
    width: 32.9vw;
    position: absolute;
    left: 63.5vw;
    top: 61.1vw;
    opacity: .5;
}

.p3Photo3 {
    width: 57.7vw;
    position: absolute;
    left: 12.2vw;
    top: 108.3vw;
    z-index: 5;
}

.p3Photo3_shadow {
    width: 58.2vw;
    position: absolute;
    left: 13vw;
    top: 109vw;
    opacity: .5;
}

.p3Photo4 {
    width: 93vw;
    position: absolute;
    left: 4.8vw;
    top: 154.5vw;
    z-index: 5;
}

.p3Photo4_shadow {
    width: 97.4vw;
    position: absolute;
    left: 5vw;
    top: 157.2vw;
    opacity: .5;
}

.p4Txt {
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 6.9vw;
}

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

.p4Person,
.p4Person1 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 95.8vw;
}

.p4Person1 {
    z-index: 10;
    opacity: 1;
}

.p5Txt {
    width: 77vw;
    position: absolute;
    left: 5vw;
    top: 8.5vw;
    z-index: 10;
}

.p5Flags {
    width: 149vw;
    height: 131.1vw;
    position: absolute;
    left: 12.6vw;
    top: 43.6vw;
    background: url('../images/e2a.png') no-repeat 0 0/auto 100%;
    animation: flagFloat 1s infinite steps(4);
}

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

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


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

.p5Sign {
    width: 54.7vw;
    position: absolute;
    left: 11.2vw;
    top: 6.6vw;
}

.p5Sign1 {
    width: 56.8vw;
    position: absolute;
    left: 28.2vw;
    top: 22.8vw;
    z-index: 5;
}

.p5Gun {
    width: 95.1vw;
    position: absolute;
    left: 1.9vw;
    top: 47.9vw;
    z-index: 10;
}

.p5Buttler {
    width: 30vw;
    position: absolute;
    left: 6.1vw;
    top: 72vw;
}

.p6Txt {
    width: 73vw;
    position: absolute;
    left: 9.2vw;
    top: 0;
}

.p6Shadow {
    width: 46.9vw;
    position: absolute;
    left: 3vw;
    top: 59.5vw;
}

.p6Head {
    width: 74.4vw;
    position: absolute;
    left: 25.6vw;
    top: 82.5vw;
}

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

.p7Num1 {
    width: 38.7vw;
    position: absolute;
    left: 17.7vw;
    top: 164.2vw;
    display: flex;
    justify-content: flex-start;
}

.p7Corpse1 {
    width: 29.4vw;
    position: absolute;
    left: 4.9vw;
    top: 4.6vw;
}

.p7Corpse2 {
    width: 42.1vw;
    position: absolute;
    left: 22.4vw;
    top: 20vw;
}

.p7Corpse3 {
    width: 44.2vw;
    position: absolute;
    left: 55.8vw;
    top: 45.4vw;
}

.p7Corpse4 {
    width: 92.9vw;
    position: absolute;
    left: -6.9vw;
    top: 64vw;
}

.p7Num1 img {
    width: 20%;
    height: 100%;
}

.p7Num2 {
    width: 46.3vw;
    position: absolute;
    left: 18.5vw;
    top: 194.8vw;
    display: flex;
    justify-content: flex-start;
}

.p7Num2 img {
    width: 16.6667%;
    height: 100%;
}

.p8Snow {
    width: 100vw;
    height: 172.5vw;
    position: absolute;
    left: 0;
    top: 0;
    background: url('../images/h1.png') 0 0/90% auto;
    animation: snowDown 15s infinite linear;
}

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

    100% {
        background-position: 600% 750%;
    }
}

.p8Hero {
    width: 54vw;
    position: absolute;
    left: 33.6vw;
    top: 71.4vw;
    z-index: 10;
}

.p8Tree {
    width: 91.6vw;
    position: absolute;
    left: 8.4vw;
    top: 149.4vw;
    z-index: 20;
}

.p9Txt {
    width: 62vw;
    position: absolute;
    left: 19vw;
    top: 48.6vw;
}

.p9Army {
    width: 149.8vw;
    position: absolute;
    left: -44.2vw;
    top: 157.9vw;
}

.p10Txt {
    width: 70vw;
    position: absolute;
    left: 15vw;
    top: 12vw;
    z-index: 20;
}

.p10Want {
    width: 83.3vw;
    position: absolute;
    left: 9.3vw;
    top: 83.2vw;
}

.p10People {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    transform-origin: 50% 100%;
}

.p11Txt {
    width: 70vw;
    position: absolute;
    left: 15vw;
    top: 12vw;
    z-index: 20;
}

.p11Boom {
    width: 100vw;
    position: absolute;
    left: -19.6vw;
    top: 20vw;
    transform-origin: 50% 100%;
}

.p11Wood {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 72.2vw;
    z-index: 10;
}

.p11Ride {
    width: 64.8vw;
    position: absolute;
    left: 35.7vw;
    top: 86.1vw;
    z-index: 20;
    transform-origin: 50% 100%;
}

.p12Txt {
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 32.4vw;
    z-index: 60;
}

.p12Walk1 {
    width: 48.9vw;
    position: absolute;
    left: 34.7vw;
    top: 67.3vw;
}

.p12Walk2 {
    width: 10.5vw;
    position: absolute;
    left: 13.9vw;
    top: 64.1vw;
    opacity: 0;
}

.p12Walk3 {
    width: 3vw;
    position: absolute;
    left: 35.5vw;
    top: 62.8vw;
    opacity: 0;
}

.p12Army {
    width: 110.4vw;
    position: absolute;
    left: -2.4vw;
    top: 160.8vw;
}

.snowWalk .snowWrap {
    bottom: auto;
    height: 70%;
}

.snowWrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: url('../images/l6.png') 0 0/100% auto;
    animation: snowDown 60s infinite linear;
}

.p13Txt {
    width: 77vw;
    position: absolute;
    left: 11.3vw;
    top: 2.4vw;
}

.p14Txt {
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 15vw;
}

.p14Sound {
    width: 100%;
    position: absolute;
    top: 95vw;
}

.p14Talk1 {
    width: 41vw;
    position: absolute;
    left: 15.3vw;
    top: 130vw;
    transform-origin: 100% 100%;
    transition: transform .6s;
    transform: scale(0) rotate(180deg);
}

.p14Talk1.show {
    transform: scale(1) rotate(0);
}

.p14Talk2 {
    width: 41vw;
    position: absolute;
    left: 10.5vw;
    top: 202.3vw;
    transform-origin: 0 100%;
    transition: transform .6s;
    transform: scale(0);
}

.p14Talk2.show {
    transform: scale(1);
}

.p14Btn {
    width: 36vw;
    position: absolute;
    left: 7.5vw;
    top: 198.4vw;
    transform-origin: 100% 0;
    animation: startJump 1s infinite linear alternate;
}

.p15Txt {
    width: 68vw;
    position: absolute;
    left: 16vw;
    top: 3.3vw;
}

.p15Army {
    width: 70.9vw;
    position: absolute;
    left: -4.3vw;
    top: 44.1vw;
    z-index: 10;
}

.p15Dog {
    width: 49.7vw;
    position: absolute;
    left: 32.3vw;
    top: 86.3vw;
}

.p15Traitor {
    width: 52.6vw;
    position: absolute;
    right: 0;
    bottom: 0;
}

.p15Cover {
    width: 99.8vw;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.p16Txt {
    width: 54vw;
    position: absolute;
    left: 23vw;
    top: 23.6vw;
    z-index: 60;
}

.p16Army {
    width: 46vw;
    position: absolute;
    left: 54vw;
    top: 155.1vw;
}

.p16Hero {
    width: 76.5vw;
    position: absolute;
    left: -1.6vw;
    top: 152.4vw;
    z-index: 10;
}

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

.p17Txt {
    width: 85vw;
    position: absolute;
    left: 7.5vw;
    top: 0;
    z-index: 60;
}

.p17Hero {
    width: 98vw;
    position: absolute;
    left: 4.4vw;
    top: 81.7vw;
    z-index: 65;
}

.p17Blood {
    width: 92.1vw;
    position: absolute;
    left: 0;
    top: 193.5vw;
    z-index: 60;
    transform-origin: 50% 0;
}

.p18Txt {
    width: 80vw;
    position: absolute;
    left: 10vw;
    top: 37.1vw;
    z-index: 30;
}

.p18Army1 {
    width: 23.5vw;
    position: absolute;
    left: -9.1vw;
    top: 126.7vw;
    z-index: 5;
    transform-origin: 100% 50%;
}

.p18Army2 {
    width: 18.2vw;
    position: absolute;
    left: 35.2vw;
    top: 111.1vw;
    z-index: 5;
    transform-origin: 50% 100%;
}

.p18Army3 {
    width: 63.8vw;
    position: absolute;
    left: 53.4vw;
    top: 131.4vw;
    z-index: 5;
    transform-origin: 0 50%;
}

.p18Hero {
    width: 80vw;
    position: absolute;
    left: 0;
    top: 156.9vw;
    transform-origin: 50% 0;
}

.p18Tree {
    width: 100vw;
    position: absolute;
    left: 48.6vw;
    top: 12.7vw;
}

.p18death {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.p18Cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url('../images/r7.png') no-repeat 0 50%/100% auto;
    z-index: 20;
}

.p18Eagle {
    width: 48.2vw;
    position: absolute;
    left: -31.5vw;
    top: 249.4vw;
}

.p18Eagle.fly {
    animation: eagleFly 5s infinite linear;
}

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

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

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

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

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

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

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

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

.p19Txt {
    width: 84vw;
    position: absolute;
    left: 8vw;
    top: 45.6vw;
    z-index: 10;
}

.p19Shine {
    width: 120vw;
    position: absolute;
    top: 33vw;
    left: -24vw;
    transform-origin: 0 0;
    transform: rotate(-45deg);
}

.p20Txt {
    width: 78vw;
    position: absolute;
    left: 11vw;
    top: 5.4vw;
}

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

.p20Solider {
    width: 76.8vw;
    position: absolute;
    left: 27vw;
    top: 68.1vw;
}

.p21Flag {
    width: 105vw;
    height: 83.7vw;
    position: absolute;
    left: -2vw;
    top: 12.6vw;
    background: url('../images/u2.png') no-repeat 0 0/auto 100%;
    animation: flagFloat 1s infinite steps(4);
}

.p21Txt {
    width: 82vw;
    position: absolute;
    left: 9vw;
    top: 99.6vw;
}

.p21Slogan1 {
    width: 61vw;
    position: absolute;
    left: 22.5vw;
    top: 146vw;
    overflow: hidden;
    transform-origin: 0 0;
}

.p21Slogan2 {
    width: 78.8vw;
    position: absolute;
    left: 14.9vw;
    top: 162vw;
    overflow: hidden;
    transform-origin: 0 0;
}

.p21Slogan1 img,
.p21Slogan2 img {
    width: 100%;
}

.p21Slogan1 .txt,
.p21Slogan2 .txt {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.p21Solider {
    width: 93vw;
    position: absolute;
    left: 0;
    top: 201vw;
}

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

.p21Bird1 {
    width: 15.2vw;
    position: absolute;
    left: 12.8vw;
    top: 2.5vw;
}

.p21Bird2 {
    width: 15vw;
    position: absolute;
    left: 47.5vw;
    top: 4vw;
}

.p21Bird3 {
    width: 30.3vw;
    position: absolute;
    left: 15.2vw;
    top: 17.1vw;
}

.p21Isay {
    width: 37vw;
    position: absolute;
    left: 32vw;
    top: 52.4vw;
}

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

.p21Cloud {
    width: 138vw;
    position: absolute;
    left: -48.6vw;
    top: 120vw;
}

.bullet1 {
    width: 311vw;
    position: absolute;
    left: 100vw;
    top: 73.1vw;
    z-index: 10;
    animation: butGo 60s linear infinite;
}

.bullet2 {
    width: 311vw;
    position: absolute;
    left: 100vw;
    top: 73.1vw;
    z-index: 10;
    animation: butGo 60s 30s linear infinite;
}

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

    100% {
        left: -600vw;
    }
}