html {
    font-size: 312.5%;
}

body {
    background: #155783;
}

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

.bgImg {
    width: 100%;
}

.ofi {
    overflow: inherit;
}

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

/* 第一屏 */
.star {
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: url('../images/a1.jpg') no-repeat 0 0/100% 100%;
}

.moon {
    width: 8vw;
    position: absolute;
    left: 18.3vw;
    top: 27.1vw;
    z-index: 10;
    transform-origin: 0% 0%;
    transform: scale(5) translate(0%, 63%);
}

.prison {
    margin-top: 100vh;
}

.p1txt {
    width: 61.1vw;
    position: absolute;
    left: 50%;
    top: 65vw;
    transform: translateX(-50%);
}

.p2txt {
    width: 58.2vw;
    position: absolute;
    left: 9vw;
    top: 26.7vw;
    z-index: 20;
}

.clock {
    position: absolute;
    width: 45vw;
    height: 44.2vw;
    top: 0;
    right: -7.6vw;
    z-index: 10;
    background: url('../images/d2.png') no-repeat 0 0/ auto 100%;
    animation: clockRoll 2s infinite steps(6);
}

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

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

.book1,
.book2,
.book3 {
    position: absolute;
    transform-origin: 0 100%;
    transform: rotateZ(90deg);
    opacity: 0;
}

.book1 {
    width: 35.2vw;
    left: 14.8vw;
    top: 22.1vw;
    z-index: 5;
}

.book2 {
    width: 29.6vw;
    left: 44.9vw;
    top: 20.1vw;
    z-index: 3;
    animation-delay: .8s;
}

.book3 {
    width: 43.6vw;
    left: 53.5vw;
    top: 31.6vw;
    z-index: 1;
    animation-delay: 1.6s;
}

.book1.bookOn,
.book2.bookOn,
.book3.bookOn {
    animation-name: bookUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

@keyframes bookUp {
    0% {
        opacity: 0;
        transform: rotateZ(90deg);
    }

    100% {
        opacity: 1;
        transform: rotateZ(0);
    }
}

.pass {
    width: 42.9vw;
    height: 40.1vw;
    position: absolute;
    left: 43.8vw;
    top: 52.5vw;
    background: url('../images/f2.png') no-repeat 0 0 / auto 100%;
    z-index: 1;
}

.open {
    animation: passOpen .6s forwards steps(6);
}

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

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

.passed {
    width: 42.9vw;
    position: absolute;
    left: 43.8vw;
    top: 60.5vw;
    z-index: 10;
    display: none;
    transition: all 1s;
    transform-origin: 100% 0;
}

.bigger {
    transform: scale(2) translateX(8%);
}

.passFinger {
    width: 24.8vw;
    position: absolute;
    left: 71.8vw;
    top: 88.5vw;
    z-index: 1;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
}

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

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

.p3txt {
    width: 71vw;
    position: absolute;
    left: 18vw;
    top: 13.7vw;
}

.p4txt {
    width: 62vw;
    position: absolute;
    left: 20vw;
    top: 19.7vw;
}

.Paper {
    width: 100vw;
    height: 160vw;
    position: absolute;
    left: 0;
    top: 53vw;
    background: url('../images/h3.png') no-repeat 0 0/auto 100%;
    animation: throw 2s infinite steps(3);
}

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

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

.p5txt {
    width: 50.3vw;
    position: absolute;
    left: 38vw;
    top: 41.6vw;
}

.p6txt {
    width: 55vw;
    position: absolute;
    left: 35vw;
    top: 6.8vw;
}

.pa {
    width: 28.1vw;
    position: absolute;
    left: 55vw;
    top: 78.3vw;
    opacity: 0;
    transform-origin: 50% 50%;
}

.shootFinger {
    width: 24.8vw;
    position: absolute;
    left: 71vw;
    top: 104.3vw;
    z-index: 1;
    transform-origin: 0 0;
    animation: bigSmall 1s infinite alternate;
}

.shoot {
    animation: pashow 1s forwards linear;
}

@keyframes pashow {

    0%,
    100% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }
}

.camera {
    position: relative;
    perspective: 450;
    -webkit-perspective: 450;
}

.photo {
    width: 73.1vw;
    position: absolute;
    left: 13.4vw;
    bottom: 8vw;
    z-index: 20;
    transform-origin: 50% 0;
    transform: translate3d(10vw, -30vw, 0) rotateX(90deg) scale(0.2);
    opacity: 0;
    transition: transform 1.5s, opacity .5s;
}

.photoOut {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    opacity: 1;
}

.p7txt {
    width: 80vw;
    position: absolute;
    left: 10vw;
    top: 5.2vw;
}

.oillamp {
    width: 28.7vw;
    position: absolute;
    bottom: 0;
    right: 5vw;
    z-index: 130;
    animation: lampLight 2s infinite ease-in;
}

@keyframes lampLight {

    0%,
    100% {
        filter: brightness(1.1) contrast(1) saturate(1.4);
    }

    50% {
        filter: brightness(.8) contrast(1.3) saturate(1);
    }
}

.letter {
    width: 80vw;
    height: 120vw;
    position: absolute;
    left: 10vw;
    top: 105.7vw;
    z-index: 100;
    background: url('../images/k3.jpg') no-repeat 0 0 /cover;
    animation: letterLight 2s infinite linear;
}

.letter img {
    width: 40vw;
    position: absolute;
    top: 11.4vw;
    right: 17vw;
    display: none;
}

@keyframes letterLight {

    0%,
    100% {
        filter: brightness(1) contrast(1) saturate(1.3);
    }

    50% {
        filter: brightness(.85) contrast(1.3) saturate(1);
    }
}

.letterShadow {
    width: 80vw;
    height: 120vw;
    position: absolute;
    left: 10vw;
    top: 105.7vw;
    z-index: 70;
    background-color: rgba(0, 0, 0, .3);
    animation: ltshadow 2s infinite linear;
    transform-origin: 100% 100%;
    filter: blur(1vw);
}

@keyframes ltshadow {

    0%,
    100% {
        transform: skewY(4deg) scaleX(1.03);
    }

    50% {
        transform: skewY(3deg) scaleX(1.02);
    }
}

.envelope {
    width: 28vw;
    height: 58vw;
    position: absolute;
    left: 36vw;
    top: 57.8vw;
    z-index: 10;
    background: url('../images/k4.jpg') 50% 0/100% 100%;
    box-shadow: 0 -2vw 2vw rgba(0, 0, 0, .3),
        2vw 0 2vw rgba(0, 0, 0, .3),
        0 2vw 2vw rgba(0, 0, 0, .3),
        -2vw 0 2vw rgba(0, 0, 0, .3);
    transition: all .6s;
}

.envelope1 {
    transform-origin: 0 100%;
    transform: translate(-20vw, 7vw) rotate(-13deg);
    z-index: 15;
}

.envelope3 {
    transform-origin: 100% 100%;
    transform: translate(20vw, 7vw) rotate(13deg);
    z-index: 5;
}

.envelope .inshadow {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: box-shadow 1s;
}

.envelope .inshadow img {
    width: 10.2vw;
}

.envelope.click .inshadow {
    box-shadow:
        0 4vw 4vw rgba(247, 242, 232, .5) inset,
        -4vw 0 4vw rgba(247, 242, 232, .5) inset,
        0 -4vw 4vw rgba(247, 242, 232, .5) inset,
        4vw 0 4vw rgba(247, 242, 232, .5) inset;
}

.p8txt {
    width: 74vw;
    position: absolute;
    left: 13vw;
    top: 16.3vw;
}

.p8Say {
    width: 30.4vw;
    position: absolute;
    left: 50%;
    bottom: 5vw;
    z-index: 50;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .5s;
}

.swiper {
    width: 100vw;
    height: 160vw;
    position: absolute;
    left: 0;
    bottom: 0;
}

.swiper .swiper-slide img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}


.swiper .swiper-slide-shadow-left,
.swiper .swiper-slide-shadow-right {
    display: none;
}


.head {
    width: 86vw;
    position: absolute;
    left: 5.6vw;
    bottom: 0;
    transform-origin: 0 100%;
    z-index: 50;
    transition: width 1s;
}

.change .head {
    width: 46.9vw;
}

.oldSh {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: -25vw;
    z-index: 30;
    transition: transform 1s 1s;
    transform: translateY(100%);
}

.change .oldSh,
.change .newSh {
    transform: translateY(0);
    opacity: 1;
}

.newSh1 {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    transition: all 2s 2s linear;
    transform-origin: 100% 0;
    opacity: 0;
}

.newSh2 {
    width: 50vw;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 20;
    transition: all 2s 2s linear;
    transform: skew(90deg);
    transform-origin: 0 0;
    opacity: 0;
}

.change .newSh1,
.change .newSh2 {
    opacity: 1;
}

/* .waitan {
    width: 160vw;
    position: absolute;
    left: 50%;
    top: 0;
    opacity: 0;
    z-index: 40;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    transition: opacity 1s 4s, width 1s 5s;
}

.change .waitan {
    opacity: 1;
    width: 140vw;
} */



.bullet1 {
    width: 434.7vw;
    height: 38vw;
    position: absolute;
    left: 100vw;
    top: 0;
    z-index: 40;
}

.bullet2 {
    width: 434.7vw;
    height: 38vw;
    position: absolute;
    left: 100vw;
    top: 0;
    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;
    }
}

.mp3Hide,
.letterMp3,
.bgMp3,
.paMp3 {
    display: none;
}