html,
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden
}

#pages_wrapper,
#pages_wrapper.rotate {
    box-sizing: border-box
}

#pages_wrapper.rotate {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: left top;
    overflow: hidden;
    background: #fff
}

.page-home {
    background: url(home_bg.jpg) no-repeat 50%;
    background-size: cover
}

.page-home video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.page-home .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.page-home .inner .logo {
    width: 38.2813rem;
    animation: jackInTheBox 1s
}

.page-home .inner .main {
    text-align: center;
    color: #fff;
    font-size: 1.6411rem;
    line-height: 1.4;
    transform-origin: right bottom
}

.page-home .inner .main h4 {
    opacity: 0;
    animation: fadeInDown 1s 1s both;
    font-weight: 400
}

.page-home .inner .main p {
    width: 35.104166666vmax;
    height: 14.3229166vmax;
    font-size: 1.5rem;
    line-height: 1.8;
    background-image: url("bt5.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
        animation: fadeInUp 1s 1s both;
        animation-delay: 1s;
}

.page-home .inner .btn span {
    font-size: 2.9167rem;
    color: #fff
}

.page-select {
    background-size: auto 100%;
    display: flex;
    overflow: hidden
}

.nav {
    flex: 1;
    z-index: 98;
    position: fixed;
    right: 0;
    bottom: 2rem
}

.nav .back {
    cursor: pointer;
    width: 13.28125vmax;
    height: 3.3333vmax;
    box-sizing: border-box;
    z-index: 1;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7.29vmax;
    animation: navBackFadeIn 1s;
    animation-iteration-count: infinite
}

@keyframes navBackFadeIn {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.nav .back span {
    font-size: 1.3099vmax;
    color: #fff;
    line-height: 1.1
}

.page-select .slides {
    width: 100%;
    display: flex;
    cursor: pointer
}

.page-select .slides .slide {
    width: 17.5vmax;
    position: relative;
    transition: all .5s;
    box-shadow: 0 0 5.2083vmax 1.5625vmax #162d09e6
}

.page-select .slides .slide:before {
    content: "";
    height: 100%;
    width: .2604vmax;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAQ4CAMAAAD7BJbwAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAASxQTFRF////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////A6wvwgAAAGR0Uk5TzAAasjNNmX9mtrquvm60hqqOlrCDmryojF4upqFhUmS3PZJGaqukMkNsdpw+cGjGXCofmFaeoidJejWJQUt5JDZOfsmQHBYiBZS9pzp0WgI4UFWAfHIKEsKKWAwIGDAOQkoQwG/rca0AAAMdSURBVHicpdjnTltREATgQ++hY6qpppneO6YHU0MnlYT3f4fMRrNkZHFx+/HJFgJk+87ZnetQUlISopUWoRvK8zAIFQWag+ocTUBVnpqhMk9JKCtQPYTCHUNpFke0QCewK1ZhnrrpJ4zRBqXgGs5pEKZoC15gHIbFGvyGbaiAPfhCcbiBJfoKfTAHXXxu+qEaZmAEJqABpuEeLmASdmAd7mAfquAW2qhRbMIzdFIzHcIQnUILLUIltFMSlqkXVmCUeuAMYtBECaijViijT1RDA1BLHZCGenqFJ5rNcEAhhCv6LL7TA3yjX/SHHumYflApHdGCOKFdWhXzolsgWmGMygHRCim6pnNCxMIUbRFiFsZpmNYIUQvbhLiFPULcQpxuaIkQu3BJc9Ql+qhfVNOMGMkwIRoiTIt7st9HpMOk2KF1QsTDPiHmATEPbRkaBeIensmeI/Kh+R2HYkicipZ3LIpKan9HUixn6BUrGUYFjleI8VGdiViEpgiJCHU5aI1QlqNPEWpyNBChNgcdEdKiPosaPqb5t/r/B+R1+vvy9+2fk3+OCbkeMV5Hv7Z+7S0LnhHPjWXJ82W58xx6Ni2znmPLtWe9U/i5MHpu/Czdkp01P3d2Bv082tnU83pBdp79fOu5tzPuc8Lnh80Tny99QmeRzyefVza7fI7ZTIsLm3k+/2wW+ly0Genz0uenz9OX8H/O+twdJJ/JNp9TtEE2x32m23zXea97QPeD74wTobvF943vH9tFx+JR2P7yfeb77YF89+k+vBK2M9/250HGXn0Sr7KL09zPHbKvB2SP+173Pd9K3gES0g1i7As95D1ihd2iV7pGUjpIJXvJovSUU+kvh9JrOsUz+89mRidqE9abrD/tk3WqdbKeNSkuyLrYNDUI62sjNEPW5/qFd70uMUeXZP3Qu6L1xriwPrlH1jO3ybrnGnknHSeE/V9vNd5jB8k7rvXdFHkPRtjfurH15G7+LEq2fl4MBLyo+4cPzRZxX5OLZAH3WrnqzPO+Lx93Ifd70ELEQ+H3x9mMh/zu1fNVzPcI2TyED77D+Au3f4R4ySbsOgAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%);
    transition: all .5s
}

.page-select .slides .slide .bg {
    width: 47.5vmax;
    height: 100%;
    transition: all .5s;
    overflow: hidden;
    position: relative
}

.page-select .slides .slide .bg img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.page-select .slides .slide .bg:after {
    content: "";
    width: 20.8854vmax;
    height: 16.45833vmax;
    position: absolute;
    background: url(select_icon1.png) no-repeat -3vmax top;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    z-index: 1;
    border-top-left-radius: 10vmax;
    opacity: 0;
    transition: all 1s;
    transform-origin: left top;
    transform: rotateX(-90deg)
}

.page-select .slides .slide .video {
    position: absolute;
    width: 47.5vmax;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .5s;
    overflow: hidden
}

.page-select .slides .slide .video video {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.page-select .slides .slide .inner {
    width: 47.5vmax;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-size: cover;
    transition: all .5s
}

.page-select .slides .slide .season-title {
    height: 100%;
    left: 0;
    bottom: 0
}

.page-select .slides .slide .season-title .info {
    opacity: 0;
    display: none;
    transition: all .5s
}

.page-select .slides .slide.choosed {
    width: 47.5vmax;
    border-top-left-radius: 10vmax
}

.page-select .slides .slide.choosed:before {
    top: 30%
}

.page-select .slides .slide.choosed .bg {
    border-top-left-radius: 10vmax
}

.page-select .slides .slide.choosed .bg:after {
    opacity: 1;
    transform: rotateX(0)
}

.page-select .slides .slide.choosed .video {
    border-top-left-radius: 10vmax;
    opacity: 1
}

.page-select .slides .slide.choosed .inner {
    border-top-left-radius: 10vmax
}

.page-select .slides .slide.choosed .season-title {
    left: 0
}

.page-select .slides .slide.choosed .season-title h4 {
    display: none;
    transition: all .5s
}

.page-select .slides .slide.choosed .season-title .info {
    opacity: 1;
    display: block;
    height: 100%;
    transform: translateZ(0)
}

.page-select .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto
}

.page-select .mask img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.page-select .hold-slides {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    opacity: 0;
    z-index: 5
}

.page-select .slide-btn {
    width: 5vmax;
    height: 5vmax;
    background: #0006 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHtQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////zYJG8AAAACl0Uk5TAFPCTWD+/2+SgOB5f58BbnGL/N3cuRiBfGJ1lf3fvRqQqJrjbHBWyk/lyIK+AAAApklEQVR4nO3Q2Q6CMBCF4VHpoOKCuBYXXNH3f0I1hYRGgTkSruy5JHzp3xK5uVnrdHug8BSzD4n+SzAPYMFDuQiM4JFYeJkYT8AqnopFXhXCZ8xaFL9XAcIAjuaL0i1X36qqF8CC1wWyEQmLkBaR2Lr+Nvu625fvkNhPlrcdpW9cMHH9rx/m1LLRDe6DGN2g7Yy3XQBijLoi5N2mbpAgSu8PULj9y56bYRHQUsJzCQAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: 3vmax 3vmax;
    opacity: .75;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2.6vmax;
    cursor: pointer;
    z-index: 10;
    animation: pulsePrev 1s linear infinite alternate
}

.page-select .slide-btn.disabled {
    display: none
}

.page-select .slide-btn.next-btn {
    transform: rotate(180deg) translateY(50%);
    left: auto;
    right: 2.6vmax;
    animation-name: pulseNext
}

@keyframes pulsePrev {
    0% {
        transform: scaleX(1) translateY(-50%)
    }

    50% {
        transform: scale3d(1.2, 1.2, 1.2) translateY(-50%)
    }

    to {
        transform: scaleX(1) translateY(-50%)
    }
}

@keyframes pulseNext {
    0% {
        transform: rotate(180deg) translateY(50%) scaleX(1)
    }

    50% {
        transform: rotate(180deg) translateY(50%) scale3d(1.2, 1.2, 1.2)
    }

    to {
        transform: rotate(180deg) translateY(50%) scaleX(1)
    }
}

.nav-wrapper {
    width: 100%;
    height: 22.5926vmin;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    animation: slideInLeft .5s forwards;
    z-index: 10;
    background-image: url(select_mask.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto
}

.nav-wrapper .bg {
    height: 100%;
    opacity: .3
}

.nav-wrapper .bg img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.nav-wrapper .inner {
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.nav-wrapper .inner .title {
    font-weight: 400;
    line-height: 1.1;
    font-size: 7.3786rem;
    color: #fff;
    margin-bottom: 1.5625rem;
    flex-shrink: 0;
    position: relative;
    right: -2.6042rem
}

.nav-wrapper .inner ul {
    width: 9.5833rem;
    z-index: 2;
    position: relative;
    flex: 1;
    max-height: 26.0417rem;
    counter-reset: section
}

.nav-wrapper .inner ul li {
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    margin-bottom: 1.3021rem
}

.nav-wrapper .inner ul li h4 {
    font-size: 1.3411rem;
    width: 4.4792rem;
    height: 4.4792rem;
    border-radius: 50%;
    background-color: #26480d;
    line-height: normal;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all .3s;
    position: relative
}

.nav-wrapper .inner ul li h4,
.nav-wrapper .inner ul li h4:before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400
}

.nav-wrapper .inner ul li h4:before {
    counter-increment: section;
    content: "0" counter(section);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .1;
    font-size: 3.451rem
}

.nav-wrapper .inner ul li .time {
    flex: 1;
    font-size: .7578rem;
    text-align: center;
    position: relative;
    line-height: 1.2
}

.nav-wrapper .inner ul li .time span {
    font-size: 1.1276rem
}

.nav-wrapper .inner ul li .time:after {
    position: absolute;
    right: .2604rem;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .3125rem 0 .3125rem .5208rem;
    border-color: transparent transparent transparent #fff
}

.nav-wrapper .inner ul li:last-child {
    margin-bottom: 0
}

.nav-wrapper .inner ul li.current h4 {
    background-color: #63c11d;
    border: .1563rem solid #defbc3
}

.nav-wrapper .inner .back {
    cursor: pointer;
    width: 9.3229rem;
    height: 4.5313rem;
    box-sizing: border-box;
    border: .1042rem solid #fff;
    z-index: 1;
    flex-shrink: 0;
    margin-bottom: 2.9167rem;
    position: relative;
    left: 1.875rem;
    border-top-left-radius: 2.6042rem;
    border-bottom-right-radius: 2.6042rem;
    background-color: #1e3a00d9;
    display: flex;
    align-items: center;
    justify-content: center
}

.nav-wrapper .inner .back span {
    font-size: 1.3021rem;
    color: #fff;
    line-height: 1.2
}

.nav-wrapper .inner .back span i {
    font-style: normal;
    font-size: 1.0417rem
}

.nav-wrapper .inner:before {
    content: "";
    height: 100%;
    width: .2604rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAQ4CAMAAAD7BJbwAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAASxQTFRF////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////A6wvwgAAAGR0Uk5TzAAasjNNmX9mtrquvm60hqqOlrCDmryojF4upqFhUmS3PZJGaqukMkNsdpw+cGjGXCofmFaeoidJejWJQUt5JDZOfsmQHBYiBZS9pzp0WgI4UFWAfHIKEsKKWAwIGDAOQkoQwG/rca0AAAMdSURBVHicpdjnTltREATgQ++hY6qpppneO6YHU0MnlYT3f4fMRrNkZHFx+/HJFgJk+87ZnetQUlISopUWoRvK8zAIFQWag+ocTUBVnpqhMk9JKCtQPYTCHUNpFke0QCewK1ZhnrrpJ4zRBqXgGs5pEKZoC15gHIbFGvyGbaiAPfhCcbiBJfoKfTAHXXxu+qEaZmAEJqABpuEeLmASdmAd7mAfquAW2qhRbMIzdFIzHcIQnUILLUIltFMSlqkXVmCUeuAMYtBECaijViijT1RDA1BLHZCGenqFJ5rNcEAhhCv6LL7TA3yjX/SHHumYflApHdGCOKFdWhXzolsgWmGMygHRCim6pnNCxMIUbRFiFsZpmNYIUQvbhLiFPULcQpxuaIkQu3BJc9Ql+qhfVNOMGMkwIRoiTIt7st9HpMOk2KF1QsTDPiHmATEPbRkaBeIensmeI/Kh+R2HYkicipZ3LIpKan9HUixn6BUrGUYFjleI8VGdiViEpgiJCHU5aI1QlqNPEWpyNBChNgcdEdKiPosaPqb5t/r/B+R1+vvy9+2fk3+OCbkeMV5Hv7Z+7S0LnhHPjWXJ82W58xx6Ni2znmPLtWe9U/i5MHpu/Czdkp01P3d2Bv082tnU83pBdp79fOu5tzPuc8Lnh80Tny99QmeRzyefVza7fI7ZTIsLm3k+/2wW+ly0Genz0uenz9OX8H/O+twdJJ/JNp9TtEE2x32m23zXea97QPeD74wTobvF943vH9tFx+JR2P7yfeb77YF89+k+vBK2M9/250HGXn0Sr7KL09zPHbKvB2SP+173Pd9K3gES0g1i7As95D1ihd2iV7pGUjpIJXvJovSUU+kvh9JrOsUz+89mRidqE9abrD/tk3WqdbKeNSkuyLrYNDUI62sjNEPW5/qFd70uMUeXZP3Qu6L1xriwPrlH1jO3ybrnGnknHSeE/V9vNd5jB8k7rvXdFHkPRtjfurH15G7+LEq2fl4MBLyo+4cPzRZxX5OLZAH3WrnqzPO+Lx93Ifd70ELEQ+H3x9mMh/zu1fNVzPcI2TyED77D+Au3f4R4ySbsOgAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: auto 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%)
}

.nav-wrapper .inner:after {
    content: "";
    width: 10.1563rem;
    height: 13.4375rem;
    position: absolute;
    left: 0;
    bottom: 0
}

.page-season {
    overflow: hidden
}

.page-season .bg-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity .3s
}

.page-season .bg-video.show {
    opacity: 1;
    z-index: 2
}

.page-season .season-title {
    left: 3.4375rem;
    bottom: 3.125rem;
    z-index: 2
}

.page-season .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .3s;
    cursor: pointer
}

.page-season .mask .bg,
.page-season .mask .stroke {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.page-season .mask .stroke {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    animation: strokeFlash 2s infinite
}

.page-season .mask .btn {
    border-radius: 2.0833rem;
    background-color: #fff;
    min-width: 15.4167rem;
    height: 4.1667rem;
    padding: 0 2.0833rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    box-sizing: border-box
}

.page-season .mask .btn:before {
    border: .1042rem solid #fff;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -.5208rem;
    content: "";
    background-color: #eb5c05;
    border-radius: 2.0833rem
}

.page-season .mask .btn span {
    font-size: 1.9792rem;
    color: #fff;
    position: relative;
    top: -.5208rem;
    z-index: 1
}

.page-season .mask .frame-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8.3333rem
}

.page-season .mask .frame-wrapper .item:first-child {
    margin-top: 0
}

.page-season .mask .frame-wrapper .intro {
    position: absolute;
    left: -31.1458rem;
    top: 1.9271rem
}

.page-season .mask .frame-wrapper .intro .mask-title {
    width: 37.4479rem;
    opacity: 0
}

.page-season .mask .frame-wrapper .intro .btn {
    left: 0;
    top: 5.9896rem;
    opacity: 0
}

.page-season .mask.show {
    opacity: 1;
    z-index: 5
}

.page-season .mask.show .frame-wrapper .item {
    animation: fadeInRight .5s forwards
}

.page-season .mask.show .frame-wrapper .item:last-child {
    animation-delay: .3s
}

.page-season .mask.show .frame-wrapper .item .intro .mask-title {
    animation: introZoomIn .5s 1s forwards
}

.page-season .mask.show .frame-wrapper .item .intro .btn {
    animation: fadeInUp .5s 1.5s forwards
}

@keyframes strokeFlash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: .3
    }
}

@keyframes introZoomIn {
    0% {
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 1
    }
}

.page-spring {
    background-color: #486d3a
}

.page-spring .mask.mask-1 .btn-holder {
    position: absolute;
    height: 110%;
    left: 0;
    top: 0;
    width: 17rem
}

.page-spring .mask.mask-2 .intro {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    padding-bottom: 9.5rem
}

.page-spring .mask.mask-2 .intro .circle {
    width: 7.6042rem;
    position: absolute;
    top: -7rem;
    left: -8rem;
    animation: strokeFlash 2s infinite
}

.page-spring .mask.mask-2 .intro .btn {
    position: relative
}

.page-spring .mask.mask-2 .intro .desc {
    width: 34.3229rem;
    font-size: 1.2568rem;
    color: #fff;
    border-radius: .5208rem;
    border: 1px dashed #fff;
    box-sizing: border-box;
    padding: 1.4583rem;
    line-height: 1.4;
    margin-top: 1.6667rem;
    position: absolute
}

.page-spring .mask.mask-2.show .btn {
    animation: slideInRight .5s
}

.page-spring .mask.mask-2.show .desc {
    animation: slideInRight .8s
}

.page-spring .mask.mask-3 {}

.page-spring .mask.mask-3 .bg {
    -o-object-position: center bottom;
    object-position: center bottom;
    -o-object-fit: contain;
    object-fit: contain
}

.page-spring .mask.mask-3 .say {
    position: absolute;
    width: 28.6979rem;
    left: 50%;
    bottom: 27.7604rem;
    margin-left: -7.3958rem
}

.page-spring .mask.mask-3 .btn {
    bottom: 9.8958rem;
    left: 50%
}

.page-spring .mask.mask-3.show .say {
    animation: jackInTheBox 1s
}

.page-spring .mask.mask-4 .intro {
    position: absolute;
    left: 50%;
    transform: translate3d(-100%, -100%, 0);
    top: 50%;
    text-align: center
}

.page-spring .mask.mask-4 .intro p {
    font-size: 2.4573rem;
    color: #fff;
    margin-bottom: 1.5625rem
}

.page-spring .mask.mask-4 .intro .line {
    width: 24.6875rem
}

.page-spring .mask.mask-4 .intro .hand {
    width: 4.1146rem;
    position: absolute;
    bottom: -1.7708rem;
    right: -1.4063rem;
    animation: handMoveLeft 1.2s linear infinite
}

.page-spring .mask.mask-5 .bg {
    -o-object-position: center bottom;
    object-position: center bottom;
    -o-object-fit: contain;
    object-fit: contain
}

.page-spring .mask.mask-5 .say {
    position: absolute;
    left: 50%;
    margin-left: .625rem;
    width: 29.9479rem;
    bottom: 33.6458rem
}

.page-spring .mask.mask-5 .btn {
    bottom: 4.7917rem;
    right: 50%;
    margin-right: -3rem
}

.page-spring .mask.mask-5 .audio {
    left: 14.0625rem;
    bottom: 5.7292rem
}

.page-spring .mask.mask-5.show .say {
    animation: jackInTheBox 1s
}

.page-spring .mask.mask-6 .btn-holder {
    position: absolute;
    height: 110%;
    right: 0;
    top: 0;
    width: 17rem
}

.page-spring .mask.mask-6 .frame-wrapper {
    left: auto;
    right: 50%;
    margin-left: 0;
    margin-right: -2rem
}

.page-spring .mask.mask-6 .frame-wrapper .item .intro {
    position: absolute;
    left: auto;
    right: -28.9063rem;
    top: 0
}

.page-spring .mask.mask-6 .frame-wrapper .item .intro .mask-title {
    width: 33.2292rem
}

.page-spring .mask.mask-6 .frame-wrapper .item .intro .btn {
    left: auto;
    right: 0
}

.page-spring .mask.mask-6.show .frame-wrapper .item {
    animation: fadeInLeft .5s forwards
}

.page-spring .mask.mask-6.show .frame-wrapper .item:last-child {
    animation-duration: .8s
}

.page-spring .mask.mask-7 .intro {
    position: absolute;
    left: 50%;
    transform: translate3d(0, -50%, 0);
    top: 50%;
    padding-bottom: 8.3333rem;
    margin-left: 10.4167rem
}

.page-spring .mask.mask-7 .intro .circle {
    width: 5.9896rem;
    position: absolute;
    bottom: 3.5416rem;
    left: -6.0938rem;
    animation: strokeFlash 2s infinite
}

.page-spring .mask.mask-7 .intro .btn {
    position: relative;
    flex-direction: row-reverse
}

.page-spring .mask.mask-7 .intro .btn:after {
    margin: 0 .9375rem 0 0
}

.page-spring .mask.mask-7.show .btn {
    animation: slideInRight .5s
}

.page-spring .mask.mask-7.show .desc {
    animation: slideInRight .8s
}

.page-PWang {
    background-color: #486d3a
}

.page-PWang .mask .frame-wrapper .intro {
    top: .7292rem
}

.page-PWang .mask .frame-wrapper .intro .mask-title {
    width: 40.4688rem
}

.page-PWang .mask.mask-1 .btn-holder {
    width: 21rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.page-PWang .mask.mask-2 .bg {
    -o-object-position: center bottom;
    object-position: center bottom;
    -o-object-fit: cover;
    object-fit: cover
}

.page-PWang .mask.mask-2 .say {
    position: absolute;
    width: 26.7188rem;
    left: 50%;
    top: 2.2917rem;
    margin-left: -30.2083rem
}

.page-PWang .mask.mask-2 .audio {
    left: 9.0104rem;
    bottom: 1.875rem
}

.page-PWang .mask.mask-2 .mask-title {
    width: 33.5417rem;
    position: absolute;
    left: 50%;
    top: 19.4271rem;
    margin-left: -29.5313rem
}

.page-PWang .mask.mask-2 .btn {
    top: 31.4583rem;
    left: 50%;
    margin-left: -29.375rem
}

.page-PWang .mask.mask-2.show .say {
    animation: jackInTheBox 1s
}

.page-PWang .mask.mask-3 .frame-wrapper {
    margin-left: 4.9479rem;
    padding-bottom: 10.4167rem;
    box-sizing: border-box
}

.page-PWang .mask.mask-3 .frame-wrapper .item .item-mask .item-title span:first-child {
    font-size: 2.9688rem
}

.page-PWang .mask.mask-3 .line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14.9479rem;
    margin: -9.8958rem 0 0 -10.625rem
}

.page-PWang .mask.mask-3 .pk {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end
}

.page-PWang .mask.mask-3 .pk .pk-btn {
    position: relative;
    width: 12.0313rem;
    height: 12.0313rem;
    margin-bottom: 4.4792rem;
    opacity: 0
}

.page-PWang .mask.mask-4 {
    background-color: #0009
}

.page-PWang .mask.mask-4 .select-list {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -23.3854rem 0 0 -32.1875rem;
    display: flex
}

.page-PWang .mask.mask-4 .select-list .select-item {
    width: 39.6875rem;
    opacity: 0
}

.page-PWang .mask.mask-4 .select-list .select-item:last-child {
    width: 40.3646rem;
    position: relative;
    margin: 3.3854rem 0 0 -4.4271rem
}

.page-PWang .mask.mask-4 .btn {
    bottom: 6.4583rem;
    left: 50%;
    margin-left: -1.6667rem;
    opacity: 0
}

.page-PWang .mask.mask-4.show .select-list .select-item {
    animation: fadeInLeft .5s forwards
}

.page-PWang .mask.mask-4.show .select-list .select-item:last-child {
    animation: fadeInRight .5s .5s forwards
}

.page-PWang .mask.mask-4.show .btn {
    animation: fadeInUp .5s 1s forwards
}

.page-PWang .mask.mask-5 .people {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

.page-PWang .mask.mask-5 .people img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center
}

.page-PWang .mask.mask-5 .say {
    width: 21.0417rem;
    position: absolute;
    bottom: 35.3125rem;
    left: 50%;
    margin-left: -30.625rem
}

.page-PWang .mask.mask-5 .audio {
    left: 9.2188rem;
    bottom: 5rem;
    transform: rotate(-10deg)
}

.page-PWang .mask.mask-5 .intro {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13.5417rem 0 0 15.8333rem
}

.page-PWang .mask.mask-5 .intro .title {
    color: #fff;
    font-size: 3.4896rem;
    line-height: 1.4;
    margin-bottom: .7813rem;
    padding-left: .5208rem;
    opacity: 0
}

.page-PWang .mask.mask-5 .intro .sub-title {
    font-size: 1.9792rem;
    color: #fff;
    line-height: 1.4;
    margin-bottom: .7813rem;
    opacity: 0
}

.page-PWang .mask.mask-5 .intro .desc {
    font-size: 1.3542rem;
    color: #fff;
    line-height: 1.8;
    margin-bottom: 3.125rem;
    opacity: 0
}

.page-PWang .mask.mask-5 .intro .line {
    width: 7.8125rem;
    position: absolute;
    left: -8.6458rem;
    top: 1.25rem
}

.page-PWang .mask.mask-5 .intro .btn {
    opacity: 0
}

.page-PWang .mask.mask-5.show .people {
    animation: fadeInLeft .5s forwards
}

.page-PWang .mask.mask-5.show .say {
    animation: flipInX .5s forwards
}

.page-PWang .mask.mask-5.show .intro .line {
    animation: introZoomIn .5s forwards
}

.page-PWang .mask.mask-5.show .intro .title {
    animation: fadeInRight .5s .5s forwards
}

.page-PWang .mask.mask-5.show .intro .sub-title {
    animation: fadeInRight .8s .5s forwards
}

.page-PWang .mask.mask-5.show .intro .desc {
    animation: fadeInRight .5s 1.3s forwards
}

.page-PWang .mask.mask-5.show .intro .btn {
    animation: fadeInUp .5s 1.8s forwards
}

.page-PWang .mask.mask-6 {
    background-color: #000c
}

.page-PWang .mask.mask-6 .people {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

.page-PWang .mask.mask-6 .people img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center
}

.page-PWang .mask.mask-6 .intro {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin: -4.1667rem 0 0 -23.75rem
}

.page-PWang .mask.mask-6 .intro .say {
    width: 30.2083rem;
    margin: 0 0 3.3333rem .625rem;
    position: relative
}

.page-PWang .mask.mask-6 .intro .say .audio {
    left: 8.2292rem;
    bottom: 4.0104rem
}

.page-PWang .mask.mask-6 .intro .btn {
    position: relative;
    flex-direction: row-reverse;
    opacity: 0
}

.page-PWang .mask.mask-6 .intro .btn:after {
    margin: 0 .9375rem 0 0
}

.page-PWang .mask.mask-6.show .say {
    animation: fadeInRight .5s
}

.page-PWang .mask.mask-6.show .btn {
    animation: fadeInUp .5s .5s forwards
}

@keyframes spread {
    0% {
        transform: scale(1) translate3d(-50%, -50%, 0);
        opacity: .35
    }

    to {
        transform: scale(1.3) translate3d(-50%, -50%, 0);
        opacity: 0
    }
}

@keyframes spread2 {
    0% {
        transform: scale(1) translate3d(-50%, -50%, 0);
        opacity: .15
    }

    to {
        transform: scale(1.4) translate3d(-50%, -50%, 0);
        opacity: 0
    }
}

.page-PLi {
    background-color: #486d3a
}

.page-PLi .mask.mask-1 .btn {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -18.4896rem 0 0 9.1146rem;
    opacity: 0
}

.page-PLi .mask.mask-1 .arrow {
    width: 9.5833rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13.0208rem 0 0 19.0104rem
}

.page-PLi .mask.mask-1.show .btn {
    animation: fadeInDown .5s .5s forwards
}

.page-PLi .mask.mask-1.show .arrow {
    animation: rollIn .5s
}

.page-PLi .mask.mask-2 .intro {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -19.5313rem 0 0 -28.3333rem;
    opacity: 0
}

.page-PLi .mask.mask-2 .intro .line {
    width: 22.2917rem;
    opacity: 0
}

.page-PLi .mask.mask-2 .intro .hand {
    width: 3.6458rem;
    position: absolute;
    left: 22.6563rem;
    opacity: 0
}

.page-PLi .mask.mask-2 .frame-wrapper {
    margin-left: 0;
    box-sizing: border-box;
    left: auto;
    right: 5.625rem;
    top: 3.9063rem;
    height: auto
}

.page-PLi .mask.mask-2 .frame-wrapper .item {
    width: 33.9063rem;
    height: 18.1771rem;
    padding: .625rem 1.875rem 3.125rem 2.5rem
}

.page-PLi .mask.mask-2 .frame-wrapper .item .item-mask .item-title {
    font-size: 2.3438rem
}

.page-PLi .mask.mask-2 .frame-wrapper .item .item-mask .item-title span:last-child {
    font-size: 1.7708rem;
    margin-left: .9896rem
}

.page-PLi .mask.mask-2 .frame-wrapper .arrow {
    opacity: 0;
    width: 2.8125rem;
    position: absolute;
    left: 26.875rem;
    padding-top: 1.7708rem
}

.page-PLi .mask.mask-2.show .intro {
    animation: fadeIn .3s 1s forwards
}

.page-PLi .mask.mask-2.show .intro .line {
    opacity: 1;
    transition: opacity .3s 1.3s;
    animation: flipInY .8s 1.3s
}

.page-PLi .mask.mask-2.show .intro .hand {
    opacity: 1;
    transition: opacity .5s 1.5s;
    animation: handMoveLeft 1.2s linear 1.5s infinite
}

.page-PLi .mask.mask-2.show .frame-wrapper .item .arrow {
    opacity: 1;
    transition: opacity 1s 1s;
    animation: flipInX 1s 1s
}

.page-PLi .mask.mask-3 .frame-wrapper {
    margin-left: -35.8333rem;
    padding-top: 15.4167rem;
    box-sizing: border-box
}

.page-PLi .mask.mask-3 .frame-wrapper .item {
    width: 36.0938rem;
    height: 19.3229rem;
    padding: .625rem 1.7188rem 2.1875rem 2.6042rem
}

.page-PLi .mask.mask-3 .frame-wrapper .item .item-mask .item-title span {
    font-size: 2.0313rem
}

.page-PLi .mask.mask-3 .frame-wrapper .item .item-mask .item-title:nth-of-type(2) {
    margin-top: -.8rem
}

.page-PLi .mask.mask-3 .frame-wrapper .item .item-mask .item-title:nth-of-type(2) span {
    font-size: 1.5104rem
}

.page-PLi .mask.mask-3 .frame-wrapper .item .arrow {
    width: 4.7917rem;
    left: 7.7083rem;
    top: -7.3958rem;
    position: absolute;
    opacity: 0
}

.page-PLi .mask.mask-3 .say {
    width: 26.3021rem;
    margin: -23.4375rem 0 0 -18.0208rem;
    position: absolute;
    left: 50%;
    top: 50%
}

.page-PLi .mask.mask-3 .say .audio {
    left: 9.375rem;
    bottom: 2.0833rem
}

.page-PLi .mask.mask-3 .btn-wrapper {
    position: absolute;
    right: 5.3125rem;
    top: 50%;
    margin-top: -8.0729rem;
    padding-top: 6rem;
    opacity: 0
}

.page-PLi .mask.mask-3 .btn-wrapper .btn {
    position: relative
}

.page-PLi .mask.mask-3.show .frame-wrapper .item {
    animation: fadeInLeft .5s .5s forwards
}

.page-PLi .mask.mask-3.show .frame-wrapper .item .arrow {
    opacity: 1;
    transition: opacity 1s 1s;
    animation: zoomIn 1s 1s
}

.page-PLi .mask.mask-3.show .say {
    animation: jackInTheBox 1s
}

.page-PLi .mask.mask-3.show .btn-wrapper {
    animation: fadeInRight .5s 1s forwards
}

.page-PLi .mask.mask-4 .skip-btn {
    cursor: pointer;
    width: 8.0208rem;
    height: 4.7917rem;
    box-sizing: border-box;
    border: .1042rem solid #fff;
    z-index: 1;
    flex-shrink: 0;
    position: absolute;
    right: 10rem;
    top: 2rem;
    border-top-left-radius: 2.6042rem;
    border-bottom-right-radius: 2.6042rem;
    background-color: #74523891;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-PLi .mask.mask-4 .skip-btn span {
    font-size: 1.4063rem;
    color: #fff;
    line-height: 1.1
}

.page-PLi .mask.mask-5 .mask-list {
    display: flex;
    justify-content: center;
    padding-top: 17.1875rem
}

.page-PLi .mask.mask-5 .mask-list .mask-item {
    display: flex;
    line-height: 1.33;
    margin: 0 2.8646rem
}

.page-PLi .mask.mask-5 .mask-list .mask-item label {
    font-size: 1.7188rem;
    color: #fecca4;
    margin-right: 1.5625rem;
    opacity: 0
}

.page-PLi .mask.mask-5 .mask-list .mask-item .names {
    font-size: 1.7188rem;
    color: #fff
}

.page-PLi .mask.mask-5 .mask-list .mask-item .names span {
    display: block;
    opacity: 0
}

.page-PLi .mask.mask-5 .back-btn {
    width: 31.3542rem;
    left: 50%;
    margin-left: -15.6771rem;
    position: absolute;
    bottom: 4.1667rem;
    opacity: 0;
    height: 11.0417rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
}

.page-PLi .mask.mask-5 .back-btn span {
    font-size: 3.4rem;
    color: #fff
}

.page-PLi .mask.mask-5.show .mask-list .mask-item label {
    animation: fadeInUp .3s .5s forwards
}

.page-PLi .mask.mask-5.show .mask-list .mask-item .names span {
    animation: fadeInUp .3s .8s forwards
}

.page-PLi .mask.mask-5.show .mask-list .mask-item .names span:nth-of-type(2) {
    animation-delay: .9s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item .names span:nth-of-type(3) {
    animation-delay: 1s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item .names span:nth-of-type(4) {
    animation-delay: 1.1s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item .names span:nth-of-type(5) {
    animation-delay: 1.2s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(2) label {
    animation-delay: 1.5s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(2) .names span {
    animation-delay: 1.8s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(2) .names span:nth-of-type(2) {
    animation-delay: 1.9s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(2) .names span:nth-of-type(3) {
    animation-delay: 2s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(2) .names span:nth-of-type(4) {
    animation-delay: 2.1s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(3) label {
    animation-delay: 2.4s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(3) .names span {
    animation-delay: 2.7s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(3) .names span:nth-of-type(2) {
    animation-delay: 2.8s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(4) label {
    animation-delay: 3.1s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(4) .names span {
    animation-delay: 3.4s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(5) label {
    animation-delay: 3.7s
}

.page-PLi .mask.mask-5.show .mask-list .mask-item:nth-of-type(5) .names span {
    animation-delay: 4s
}

.page-PLi .mask.mask-5.show .back-btn {
    animation: fadeInUp .5s 4.3s forwards
}

@keyframes handMoveLeft {
    to {
        transform: translate(-15.625rem)
    }
}

.app-wrapper {
    position: relative
}

.app-wrapper,
.page {
    width: 100%;
    height: 100%
}

.page {
    position: absolute;
    left: 0;
    top: 0
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0
}

.music {
    width: 4rem;
    height: 4rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAACgCAMAAACc0QqnAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAtlQTFRFDQ0NAAAA////3d3d////0tLSd3d3/v7+EhISISEh+/v7f39/3t7e9vb2////zMzM/Pz8/f3939/f7u7uW1tb////////9fX1////+vr6q6ur////6enpxcXF////////ZWVlRERE////9/f3////TU1N////////////1dXVX19f09PT////////////v7+/////+fn5Dw8P09PTOjo6tLS0w8PD////zs7O////////aWlp////////29vbbGxs////////HR0d////////////jY2Nvr6+////5eXl+Pj4////////KSkpODg44uLi6+vr7u7uYWFh5OTkoKCgMjIyfX190NDQKysrGBgY7OzsqKiox8fHHx8f////////qqqq////5+fn////////////RkZG8fHx/f39v7+/xsbG////c3Nz////gICA////////////4ODgy8vLmZmZ////////////PT09////////////+fn56Ojo4eHh0NDQenp6////////XV1dSkpKVVVVyMjILy8v8vLylJSUgoKC4+Pjz8/Pvb29oqKi////////s7Oz9PT0////hISE////QEBAFhYW////////////////i4uLrq6ul5eXGhoap6enJCQk7e3t////////iYmJ////////////nZ2dwcHB8PDwSEhI////////////8/Pz////srKy////////////39/f////3Nzc////////////S0tLnp6e////o6Oj7Ozs9fX119fXkZGRb29vKCgom5ubeXl5paWlYmJiZ2dnNDQ0dXV1QkJCampq////////////vLy8////////PDw8////tra2////sLCw////////////////urq62dnZ////////FBQU////JiYm////ZGRk////uLi4////////UlJSWVlZ2tra////UFBQV1dXhoaGPz8/f1XJQQAAAPN0Uk5TZgD/0v7Ii/1na/mO1PLvwvv91ed/JP3xB/ioAuG8BPyDdkLzOnmXeG7KgMgYDA+4tfVnyXOuuxbE9guE7ojQhUU9aub7t5W15N3028xuctjj6IHb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) no-repeat top;
    background-size: 100% auto;
    border-radius: 50%;
    overflow: hidden;
    z-index: 9;
    cursor: pointer;
    position: absolute;
    top: 2rem;
    right: 2rem
}

.music audio {
    display: none
}

.music.paused {
    animation-name: none;
    background-position: bottom
}

.logo-main {
    max-height: 45vmin;
        animation: jackInTheBox 1s;
}


.logo-main img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
}

.bt-logo {
    height: 5vmin;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%)
}

.bt-logo img {
    width: auto;
    height: auto;
    max-height: 100%
}

.btn {opacity: 0;
    height: 4.629vmin;
    margin: 2rem auto 6rem;
       animation: 
         navBackFadeIn 1s 2s infinite,  
        fadeIn 1s 2s forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.btn img {
    width: auto;
    height: auto;
    max-height: 100%
}

@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}

.dialog-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10
}

.dialog-inner {
    width: 71.2963vw;
    position: absolute;
    right: 2.03704vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.dialog-inner .dialog-content {
    min-height: 35vw;
    padding: 6vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 4vw;
    background-color: #000000b3;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    animation: fadeScaleIn .3s forwards
}

.dialog-inner .dialog-content-main {
    width: 100%;
    position: relative;
    z-index: 1
}

.dialog-inner p {
    font-size: 3.5vw;
    color: #fff;
    line-height: 1.5;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center
}

.dialog-inner .dialog-btns {
    display: flex;
    justify-content: center;
    margin-top: 4vw
}

.dialog-inner .dialog-btns .dialog-btn {
    min-width: 18vw;
    height: 6vw;
    display: inline-flex;
    justify-content: center;
    background-color: #fff;
    border-radius: 3vw;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin: 0 4vw;
    box-sizing: border-box;
    padding: 0 3vw
}

.dialog-inner .dialog-btns .dialog-btn span {
    font-size: 3vw;
    color: #333;
    line-height: normal
}

.dialog-inner .dialog-btns .dialog-btn.cancel-btn {
    background-color: #ffffffbd
}

html.webview-app {
    height: 100vh
}

#app {
    font-size: 0
}

#app .filter-show {
    filter: blur(10px)
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
li,
p,
ul {
    padding: 0;
    margin: 0
}

img {
    width: 100%;
    outline: none;
    -webkit-touch-callout: none
}

body {
    font-family: ΢ÈíÑźÚ, microsoft yahei;
    -webkit-text-size-adjust: none;
    position: relative;
    background: #fff
}

a:focus,
body,
div:focus,
img:focus,
input:focus,
p:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.filter-show {
    filter: blur(10px)
}

.season-title h4 {
    width: auto;
    height: 100%;
    max-width: 17.5vmax;
    color: #fff;
    display: flex;
    align-items: end
}

.season-title h4 img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover
}

.season-title .info {
    padding-bottom: 0
}

.season-title .info .desc {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    justify-content: right
}

.toast {
    position: fixed;
    bottom: 25vmax;
    left: 0;
    text-align: center;
    padding: 0 10vmax;
    box-sizing: border-box;
    z-index: 100;
    animation: fadeScaleIn 1s forwards;
    width: 100%
}

.toast .toast-inner {
    display: inline-block;
    font-size: 4vmax;
    color: #fff;
    background-color: #00000080;
    line-height: 1.5;
    padding: 3vmax 8vmax;
    border-radius: 10vmax
}

.toast.leave {
    animation-name: fadeOutScale
}

@keyframes fadeScaleIn {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

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

    to {
        opacity: 0;
        transform: scale(0)
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.iframeBox {
    width: 94vmax;
    height: 94vh;
    margin-top: 2vh;
    margin-left: auto;
    margin-right: auto;
    background-image: url(iframeBg.png);
    background-color: #fafafa;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    border-top-left-radius: 14.2vmax;
    box-shadow: 0 1px 10px #0003
}

.iframeBox iframe {
    display: block;
    width: calc(100% - 9rem);
    height: calc(94vh - 6rem - 10vmax);
    background: linear-gradient(to bottom, #fff0 100%, #fff 60%, #fff);
    padding: 6rem 3rem 6rem 6rem
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center
}

.mask.show {
    display: flex
}

.mask-content {
    width: 100%;
    height: 100%
}

.mask-main {
    width: 100%;
    height: 100%;
    position: relative
}

@media screen and (max-height:1080px) {

    .vx,
    .numBox {
        transform: scale(.8)
    }

    .logo-main {
        max-height: 43vmin;
    }
}

.hand[data-v-b94cbb46] {
    position: absolute;
    width: 9.114583vmax;
    left: 55.73vmax;
    top: 42.6vmin;
    animation: heartBeat 1s linear infinite
}

.hand img[data-v-b94cbb46] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover
}

.numBox[data-v-b94cbb46] {
    width: 25.5208vmax;
    position: absolute;
    right: 2vmax;
    top: 20.5vmin
}

.numBox img[data-v-b94cbb46] {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.vx[data-v-b94cbb46] {
    width: 33vmax;
    position: absolute;
    left: 3.6458vmax;
    top: 4.72vmin;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.mask-2>img[data-v-b94cbb46]:nth-of-type(1) {
    animation-delay: .5s
}

.numBox img[data-v-b94cbb46]:nth-child(1) {
    animation-delay: 1s
}

.numBox img[data-v-b94cbb46]:nth-child(2) {
    animation-delay: 1.5s
}

.numBox img[data-v-b94cbb46]:nth-child(3) {
    animation-delay: 2s
}

.numBox img[data-v-b94cbb46]:nth-child(4) {
    animation-delay: 2.5s
}
.numBox img:nth-last-child(1){
    max-width: 17.2vmax !important;
}
.hand[data-v-92037dcf] {
    position: absolute;
    width: 9.114583vmax;
    left: 55.73vmax;
    top: 50vmin;
    animation: heartBeat 1s linear infinite
}

.hand img[data-v-92037dcf] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover
}

.numBox[data-v-92037dcf] {
    width: 26vmax;
    position: absolute;
    left: 10.312vmax;
    bottom: 28vmin
}

.numBox img[data-v-92037dcf] {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.vx[data-v-92037dcf] {
    width: 33vmax;
    position: absolute;
    right: 3.6458vmax;
    top: 5.55vmin;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.mask-2>img[data-v-92037dcf]:nth-of-type(1) {
    animation-delay: .5s
}

.numBox img[data-v-92037dcf]:nth-child(1) {
    animation-delay: 1s
}

.numBox img[data-v-92037dcf]:nth-child(2) {
    animation-delay: 1.5s
}

.numBox img[data-v-92037dcf]:nth-child(3) {
    animation-delay: 2s
}

.numBox img[data-v-92037dcf]:nth-child(4) {
    animation-delay: 2.5s
}

.numBox img[data-v-92037dcf]:nth-child(5) {
    animation-delay: 3s
}

.mask-2 .mask-main[data-v-27b19a3a] {
    display: flex;
    flex-direction: column;
    padding-top: 10vmin;
    padding-left: 10.42vmax;
    justify-content: top;
    box-sizing: border-box
}

.hand[data-v-27b19a3a] {
    position: absolute;
    width: 9.114583vmax;
    right: 10vmax;
    top: 66vmin;
    animation: heartBeat 1s linear infinite
}

.hand img[data-v-27b19a3a] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover
}

.numBox[data-v-27b19a3a] {
    width: 34.9479vmax;
    margin-left: 5vmax
}

.numBox img[data-v-27b19a3a] {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    float: right;
    object-fit: cover;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.vx[data-v-27b19a3a] {
    width: auto;
    max-width: 41.875vmax;
    /* height: 23.796296vmin; */
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.mask-2>img[data-v-27b19a3a]:nth-of-type(1) {
    animation-delay: .5s
}

.numBox img[data-v-27b19a3a]:nth-child(1) {
    animation-delay: 1s
}

.numBox img[data-v-27b19a3a]:nth-child(2) {
    animation-delay: 1.5s
}

.numBox img[data-v-27b19a3a]:nth-child(3) {
    animation-delay: 2s
}

.numBox img[data-v-27b19a3a]:nth-child(4) {
    animation-delay: 2.5s
}

.hand[data-v-054a82de] {
    position: absolute;
    width: 9.114583vmax;
    left: 55.73vmax;
    top: 24.47916vmax;
    animation: heartBeat 1s linear infinite
}

.hand img[data-v-054a82de] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover
}

.numBox[data-v-054a82de] {
    width: 34.6354vmax;
    position: absolute;
    right: 2vmax;
    top: 13.8vmin
}

.numBox img[data-v-054a82de] {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.vx[data-v-054a82de] {
    width: auto;
    height: 57.4vmin;
    position: absolute;
    left: 15.625vmax;
    top: 6.48148vmin;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp .5s forwards
}

.mask-2>img[data-v-054a82de]:nth-of-type(1) {
    animation-delay: .5s
}

.numBox img[data-v-054a82de] {
    position: absolute
}

.numBox img[data-v-054a82de]:nth-child(1) {
    width: 16.1458vmax;
    right: 2vmax;
    animation-delay: 1s
}

.numBox img[data-v-054a82de]:nth-child(2) {
    width: 16.1458333vmax;
    top: 7vmin;
    animation-delay: 1.5s
}

.numBox img[data-v-054a82de]:nth-child(3) {
    width: 15.83333vmax;
    top: 15.555vmin;
    right: 0;
    animation-delay: 2s
}

.numBox img[data-v-054a82de]:nth-child(4) {

    top: 41.66vmin;
    right: 3.65vmax;
    animation-delay: 2.5s
}

.bgm-control-btn[data-v-200fc81f] {
    position: fixed !important;
    width: 4rem;
    height: 4rem;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background-color: #ffffffb3 !important;
    color: #000 !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    border: 1px rgb(0, 0, 0, .2) solid !important;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    text-align: center
}

.bgm-control-btn.playing[data-v-200fc81f]:after,
.bgm-control-btn.paused[data-v-200fc81f]:after {
    position: absolute;
    content: " ";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover
}

.bgm-control-btn.playing[data-v-200fc81f]:after {
    background-image: url(mPlay.png)
}

.bgm-control-btn.paused[data-v-200fc81f]:after {
    background-image: url(Mpused.png)
}
@keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
/* @media screen and (max-width: 1024px) {
    .logo-main{
        width: 39vmax;
    }
}
  */