html {
    font-size: 312.5%;
}

body {
    background: #3F586B;
}

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

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

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

.bgImg {
    width: 100%;
}

/* 第一屏 */

#rain {
    width: 100%;
    height: 95%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.thunder {
    width: 52vw;
    height: 76.5vw;
    position: absolute;
    left: 22.7vw;
    top: 55.6vw;
    background: url('../images/a3.png') no-repeat 0 0 / auto 100%;
    animation: break infinite steps(1) 1.6s;
    z-index: 3;
}

@keyframes break {
    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;
    }
}

.p1txt {
    width: 26.6vw;
    position: absolute;
    left: 7vw;
    top: 82.1vw;
    z-index: 5;
}

/* 第二屏 */

.glasses {
    width: 69vw;
    position: absolute;
    top: 28vw;
    left: 8vw;
    z-index: 10;
}

.p2finger {
    width: 34.2vw;
    position: absolute;
    top: 49.5vw;
    right: 5vw;
    z-index: 15;
    transform-origin: 0 0;
    animation: p2flash infinite linear 2s;
}

@keyframes p2flash {

    0%,
    100% {
        transform: scale(1);
    }

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

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

.circle1,
.circle2 {
    width: 97vw;
    height: 97vw;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: rgba(136, 250, 253, .4);
    padding: 5px;
    border: 1px solid rgba(136, 250, 253, 1);
}

.circle1 {
    top: 79.8vw;
    left: -13.3vw;
}

.circle1 div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.circle1 .per {
    height: 100%;
    position: absolute;
    left: -19%;
    bottom: 0;
    z-index: 10;
}

.circle1 .bgWave {
    /* height: 150%; */
    width: 200vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    animation: waveRoll infinite linear 10s;
}

@keyframes waveRoll {
    0% {
        transform: translate(0, 0);
    }


    100% {
        transform: translate(-32%, 30%);
    }
}

.circle2 {
    top: 197.4vw;
    right: -13.3vw;
}

.circle2 div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* position: relative; */
    overflow: hidden;
    background: #fff url('../images/b8.jpg') no-repeat 0 0/auto 100%;
    animation: cc2 infinite steps(7) 1s;
}

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

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

/* 沙漏 */
.calendar {
    width: 48.1vw;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.sand {
    width: 19.1vw;
    height: 74.1vw;
    position: absolute;
    left: 40.5vw;
    bottom: 0;
    z-index: 1;
    background: url('../images/c3.png') no-repeat 0 0/auto 100%;
    animation: sandDown infinite steps(1) 1s;
}

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

    33% {
        background-position: 50% 0;
    }

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

}

.p2txt {
    width: 35.8vw;
    position: absolute;
    left: 50%;
    top: 15.5vw;
    transform: translateX(-50%);
}

/* 灯塔  */
.p3txt {
    width: 45.7vw;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.p3finger {
    width: 33.4vw;
    height: 23.1vw;
    position: absolute;
    left: 12.9vw;
    top: 122vw;
    background: url('../images/d2.png') no-repeat 50% 50%/cover;
    animation: p3push infinite 2s;
}

@keyframes p3push {
    0% {
        transform: translateX(30%) scale(1);
    }

    80%,
    100% {
        transform: translateX(-20%) scale(.9);
    }
}

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

.p3Roll {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: -20px;
    top: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 30px;
}

.p3person ul {
    width: 200vw;
    height: 100%;
    zoom: 1;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
}

.p3person li {
    width: 100vw;
    float: left;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.flag {
    width: 75vw;
    height: 60.8vw;
    position: absolute;
    left: 10vw;
    bottom: 90vw;
    background: url('../images/d6.png') no-repeat 0 0 /auto 100%;
    z-index: 1;
    animation: flutter 1s steps(1) infinite;
}

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

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

    50% {
        background-position: 66% 0;
    }

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

.flagstaff {
    width: 7vw;
    position: absolute;
    left: 7vw;
    bottom: 0;
    z-index: 5;
}

.spouse {
    width: 77.6vw;
    position: absolute;
    left: 7.2vw;
    bottom: 0;
    z-index: 20;
}

/* 阶梯 */
.step {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 20;
}

.p4foot {
    width: 33vw;
    position: absolute;
    left: 63.3vw;
    bottom: 2vw;
    z-index: 30;
    transform-origin: 50% 0;
    animation: p2flash infinite linear 2s;
}

.p4bg {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 22vw;
    z-index: 1;
}

.winter,
.summer {
    width: 100vw;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22vw;
    z-index: 5;
}

.winter {
    opacity: 1;
    transition: opacity 2s;
}

.summer {
    opacity: 0;
    transition: opacity 2s 1s;
}

.winter.p4change {
    opacity: 0;
}

.summer.p4change {
    opacity: 1;
}

.p4txt {
    width: 54.8vw;
    position: absolute;
    top: 21.8vw;
    left: 22.5vw;
    z-index: 20;
}

.p4lamp {
    width: 17vw;
    position: absolute;
    left: 6.7vw;
    top: 21.2vw;
    z-index: 15;
}

.p4yellow {
    width: 26.8vw;
    position: absolute;
    left: 1.6vw;
    top: 17.4vw;
    z-index: 10;
    transform-origin: 50% 50%;
    animation: light 2s infinite linear;
}

.p4cup {
    width: 17vw;
    position: absolute;
    left: 76.3vw;
    top: 72.2vw;
    z-index: 15;
}

.p4blue {
    width: 26.8vw;
    position: absolute;
    left: 71.2vw;
    top: 65.8vw;
    z-index: 10;
    transform-origin: 50% 50%;
    animation: light 4s infinite linear;
}

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

    50% {
        transform: scale(.4);
    }

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

/* 万家灯火 */

.p5Closelight {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 7.2vw;
    transition: opacity 1.5s;
}

.p5Closelight.p5hide {
    opacity: 0;
}

.p5finger {
    width: 33.4vw;
    position: absolute;
    left: 25.2vw;
    top: 86.9vw;
    z-index: 20;
    transform-origin: 0 0;
    animation: p2flash infinite linear 2s;
}

/* 人物消失 */

.p6txt1 {
    width: 83.5vw;
    position: absolute;
    left: 4.5vw;
    top: 4.5vw;
}

.p6txt2 {
    width: 59.9vw;
    position: absolute;
    left: 36vw;
    top: 58.1vw;
}

.p6man1 {
    width: 37vw;
    position: absolute;
    left: 36.3vw;
    top: 103.1vw;
    z-index: 5;
    opacity: 1;
    transition: opacity 4s;
}

.p6lady1 {
    width: 50.3vw;
    position: absolute;
    left: 4.3vw;
    top: 110.7vw;
    z-index: 10;
}

.p6flower1 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 154.7vw;
    z-index: 15;
}

.p6man2 {
    width: 94.8vw;
    position: absolute;
    left: 0;
    top: 179.3vw;
    z-index: 20;
    opacity: 1;
    transition: opacity 4s 3s;
}

.changeClass .p6man1,
.changeClass .p6man2 {
    opacity: 0;
}

.p6lady2 {
    width: 41.1vw;
    position: absolute;
    left: 58.3vw;
    top: 201.5vw;
    z-index: 25;
}

.p6flower2 {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 218.6vw;
    z-index: 30;
}

/* 写字 */
.p7wright {
    width: 56.9vw;
    position: absolute;
    left: 7vw;
    top: 48.5vw;
    overflow: hidden;
    height: 0;
    transition: height 6s linear;
}

.p7wright img {
    width: 100%;
}

.changeClass .p7wright {
    height: 59.4vw;
}

/* 弹幕 */

.bullet {
    position: absolute;
    left: 0;
    top: 27vw;
    height: 42.5vw;
    opacity: 0;
    transform: translateX(25%);
}

/* .bulletDom {
    position: absolute;
    left: 0;
    top: 27vw;
}

.bulletAll {
    display: flex;
    justify-content: flex-start;
    width: 800vw;
}

.bulletDom ul {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 4.8vw;
}

.bulletDom li {
    background-color: rgba(255, 255, 255, .6);
    padding: 0 3vw;
    border-radius: 20vw;
    font-size: 0.4rem;
    line-height: .7rem;
}

*/
@keyframes bulletIn {
    0% {
        transform: translateX(25%);
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    60%,
    100% {
        transform: translateX(-100%);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.bullet-come1 {
    animation: bulletIn 40s infinite linear;
}

.bullet-come2 {
    animation: bulletIn 40s 20s infinite linear;
}

/* 人物头像 */
.portrait {
    width: 100vw;
    height: 108.4vw;
    position: absolute;
    left: 0;
    bottom: 0;
    /* background-image: url('../images/m2.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover; */
    z-index: 20;
}

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

.portrait .color,
.portrait .black {
    position: absolute;
    left: 0;
    top: 0;
}

.portrait .color {
    z-index: 10;
    transition: filter 2s;
    /* opacity: 1; */
}

.portrait .black {
    z-index: 5;
}

.portFlag {
    width: 60vw;
    height: 125.78vw;
    position: absolute;
    bottom: -4%;
    left: 8vw;
    background: url('../images/d5.png') no-repeat 0 0 /auto 100%;
    z-index: 1;
    animation: portFly infinite .5s steps(1);
}

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

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

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

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

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

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

/* .changeClass .color {
    filter: grayscale(100%);
} */

.portTxt {
    width: 66.2vw;
    position: absolute;
    left: 50%;
    bottom: 14.1vw;
    transform: translateX(-50%);
    z-index: 30;
}

.mp3Hide {
    display: none;
}