html, body {
    width: 100%;
    margin: 0;
    background: #e9d3eb;
}

html {
    font-size: 100px;
}

body.summer-modal-open {
    overflow: hidden;
}

.summer-page {
    width: 100%;
}

.summer-stage {
    width: 19.2rem;
    height: 45.7rem;
    margin: 0 auto;
    position: relative;
    background-image: url("../../imgs/hd2/summer/BG_01.jpg"), url("../../imgs/hd2/summer/BG_02.jpg"), url("../../imgs/hd2/summer/BG_03.jpg"), url("../../imgs/hd2/summer/BG_04.jpg");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, 100% auto, 100% auto, 100% 12.5rem;
    background-position: 0 0, 0 11.09rem, 0 22.90rem, 0 34.2rem;
}

.go-home-btn {
    position: absolute;
    right: 2.22rem;
    top: 0.22rem;
    width: 1.1rem;
    height: 0.31rem;
    background: url("../../imgs/hd2/summer/go_home.png") no-repeat;
    background-size: 100% 100%;
    z-index: 1000;
    display: block;
}

.part {
    position: absolute;
    left: 0;
    width: 100%;
}

.appointment-actions {
    width: 7.1rem;
    position: absolute;
    left: 50%;
    margin-left: -3.55rem;
    top: 7.55rem;
    display: flex;
    justify-content: space-between;
}

.appointment-actions.appointment-actions-no-taptap {
    width: 4.86rem;
    margin-left: -2.43rem;
}

.appointment-btn {
    width: 2.3rem;
    height: 0.85rem;
    display: block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.btn-steam { background-image: url("../../imgs/hd2/summer/steam.png"); }
.btn-taptap { background-image: url("../../imgs/hd2/summer/taptap.png"); }
.btn-wegame { background-image: url("../../imgs/hd2/summer/Wegame.png"); }

.btn-steam:hover { background-image: url("../../imgs/hd2/summer/steam_click.png"); }
.btn-taptap:hover { background-image: url("../../imgs/hd2/summer/taptap_click.png"); }
.btn-wegame:hover { background-image: url("../../imgs/hd2/summer/Wegame_click.png"); }

.youth-part {
    top: 11.2rem;
    height: 13.4rem;
}

.youth-img {
    width: 9.93rem;
    display: block;
    margin: 0 auto;
}

.heart-img {
    width: 5.72rem;
    display: block;
    margin: 1.0rem auto 0;
}

.decor {
    position: absolute;
    pointer-events: none;
}

.plane,
.hot-air,
.suitcase,
.tower,
.camera {
    transform-origin: center center;
    animation-name: summer-sway-rotate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
}

.plane {
    width: 1.93rem;
    left: 2.25rem;
    top: 3.25rem;
    --sway-angle: 4deg;
    --sway-angle-negative: -4deg;
    animation-duration: 4.2s;
    animation-delay: -0.7s;
}

.hot-air {
    width: 1.27rem;
    right: 2.45rem;
    top: 1.35rem;
    --sway-angle: 3.5deg;
    --sway-angle-negative: -3.5deg;
    animation-duration: 3.8s;
    animation-delay: -1.1s;
}

.cone {
    width: 0.89rem;
    right: 1.15rem;
    top: 6.45rem;
    transform-origin: center center;
    animation-name: summer-sway-rotate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
    --sway-angle: 4deg;
    --sway-angle-negative: -4deg;
    animation-duration: 4.2s;
    animation-delay: -0.7s;
}

.car {
    width: 2.29rem;
    left: 0.35rem;
    top: 10.95rem;
    transform: translateX(0);
    animation: summer-car-drive 10s linear infinite;
    will-change: transform;
}

.role-list {
    width: 12.28rem;
    margin: 0.22rem auto 0;
    display: flex;
    justify-content: space-between;
}

.role-list li {
    width: 2.9rem;
    position: relative;
    perspective: 10rem;
    transform-style: preserve-3d;
}

.role-list img {
    width: 100%;
    display: block;
    transform: rotateY(0deg);
    transform-origin: center center;
    transition: transform 2s ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.role-list li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: rotateY(180deg);
    transform-origin: center center;
    transition: transform 2s ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

.role-list li:nth-child(1):after { background-image: url("../../imgs/hd2/summer/girl7_back.png"); }
.role-list li:nth-child(2):after { background-image: url("../../imgs/hd2/summer/girl2_back.png"); }
.role-list li:nth-child(3):after { background-image: url("../../imgs/hd2/summer/girl4_back.png"); }
.role-list li:nth-child(4):after { background-image: url("../../imgs/hd2/summer/girl5_back.png"); }

.role-list li:hover img {
    transform: rotateY(180deg);
}

.role-list li:hover:after {
    transform: rotateY(360deg);
}

.video-part {
    top: 24.1rem;
    height: 11.3rem;
}

.summer-title {
    width: 6.82rem;
    display: block;
    margin: 0 auto;
}

.camera {
    width: 1.31rem;
    left: 2.3rem;
    top: 1.45rem;
    --sway-angle: 3deg;
    --sway-angle-negative: -3deg;
    animation-duration: 3.5s;
    animation-delay: -0.5s;
}

.suitcase {
    width: 1.34rem;
    left: 1.35rem;
    top: 5.85rem;
    --sway-angle: 3.2deg;
    --sway-angle-negative: -3.2deg;
    animation-duration: 3.9s;
    animation-delay: -1.6s;
}

.tower {
    width: 1.6rem;
    right: 1.6rem;
    top: 2.85rem;
    --sway-angle: 2.8deg;
    --sway-angle-negative: -2.8deg;
    animation-duration: 4.6s;
    animation-delay: -2s;
}

@keyframes summer-sway-rotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(var(--sway-angle, 3deg));
    }
    75% {
        transform: rotate(var(--sway-angle-negative, -3deg));
    }
}

@keyframes summer-car-drive {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(16.56rem);
    }
}

.video-wrap {
    width: 13.59rem;
    height: 10.5rem;
    margin: -1rem auto 0;
    position: relative;
}

.video-border {
    width: 100%;
    height: 100%;
    display: block;
}

.video-content {
    position: absolute;
    left: 1.7rem;
    top: 2.25rem;
    width: 9.79rem;
    height: 5.99rem;
    cursor: pointer;
}

.video-cover {
    width: 100%;
    height: 100%;
    display: block;
}

.video-player {
    width: 1.07rem;
    height: 1.07rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -0.535rem;
    margin-top: -0.535rem;
}

.config-part {
    top: 34.6rem;
    min-height: 5.6rem;
    height: auto;
}

.config-text {
    width: 2.03rem;
    display: block;
    margin: 0 auto;
}

.config-line {
    width: 1.52rem;
    display: block;
    margin: 0.1rem auto 0;
}

.sys-container-content {
    width: 9.6rem;
    margin: 0.18rem auto 0;
}

.sys-tab-box {
    width: 7.8rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.sys-tab-item {
    width: 2.2rem;
    height: 0.36rem;
    line-height: 0.34rem;
    text-align: center;
    font-size: clamp(12px, 0.15rem, 15px);
    color: #8f84d4;
    border: 0.01rem solid transparent;
    border-radius: 0.2rem;
    cursor: pointer;
}

.sys-tab-item.active {
    border-color: #8f84d4;
}

.sys-tab-contents{
    margin: 0 auto;
    width: 7.8rem;
    display: flex;
}

.sys-tab-content {
    display: none;
    margin-top: 0.18rem;
    color: #8579cc;
    font-size: 0.13rem;
    line-height: 1.55;
}


.sys-tab-content li {
    width: 3.72rem;
    display: inline-block;
    margin: 0 0.08rem;
    float: none;
    overflow-wrap: anywhere;
    text-align: left;
    font-size: 0.15rem;
}

.sys-tab-content:after {
    content: "";
    display: block;
    clear: both;
}

.head {
    position: absolute;
    transform-origin: center center;
    animation-name: summer-sway-rotate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
    --sway-angle: 4deg;
    --sway-angle-negative: -4deg;
    animation-duration: 4.2s;
    animation-delay: -0.7s;
}

.head-1 {
    width: 1rem;
    left: 3.65rem;
    top: 1.3rem;
}

.head-2 {
    width: 1.2rem;
    left: 1.4rem;
    top: 3.36rem;
}

.head-3 {
    width: 1.18rem;
    right: 4.25rem;
    top: 2.12rem;
}

.head-4 {
    width: 1.36rem;
    right: 3.2rem;
    top: 4.32rem;
}

.head-5 {
    width: 1.1rem;
    left: 3.4rem;
    top: 4.85rem;
}
.bottom-part {
    top: 39.02rem;
    height: 6.8rem;
}

.qrcode-box-dlc {
    width: 14rem;
    height: 1.8rem;
    margin: 0.36rem auto 0;
    padding: 0;
    list-style: none;
    background: url("../../imgs/hd2/summer/qr_code.png") no-repeat;
    background-size: 100% 100%;
}

.qrcode-box-dlc .qrcode-item {
    width: 14%;
    height: 100%;
    float: left;
}

.qrcode-box-dlc .qrcode-item:nth-child(4) {
    width: 16%;
}

.qrcode-box-dlc .qrcode-item > a {
    display: block;
    width: 100%;
    height: 100%;
}

.qrcode-box-dlc:after {
    content: "";
    display: block;
    clear: both;
}

.summer-text {
    width: 6.72rem;
    display: block;
    margin: 0 auto;
}

.bottom-brand {
    width: 3.8rem;
    margin: 0.22rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
}

.brand-line {
    width: 0.02rem;
    height: 0.38rem;
}

.brand-copy {
    width: 0.83rem;
    height: 0.35rem;
}

.video-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    z-index: 1999;
}

.video-modal.show {
    display: block;
}

.video-modal-dialog {
    width: 12.8rem;
    max-width: calc(100vw - 1rem);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-modal-dialog video {
    width: 100%;
    display: block;
    background: #000;
}

.video-modal-close {
    position: absolute;
    right: -0.45rem;
    top: -0.45rem;
    width: 0.36rem;
    height: 0.36rem;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.28rem;
    line-height: 0.36rem;
    text-align: center;
    cursor: pointer;
}

.coming-soon-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2001;
    background: rgba(18, 13, 40, 0.72);
    backdrop-filter: blur(0.03rem);
}

.coming-soon-modal.show {
    display: block;
}

.coming-soon-dialog {
    width: 4.6rem;
    max-width: calc(100vw - 0.8rem);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.48rem 0.36rem 0.34rem;
    text-align: center;
    border: 0.02rem solid rgba(255, 255, 255, 0.42);
    border-radius: 0.24rem;
    background: linear-gradient(180deg, rgba(81, 56, 133, 0.97) 0%, rgba(45, 31, 81, 0.97) 100%);
    box-shadow: 0 0.18rem 0.55rem rgba(0, 0, 0, 0.35);
}

.coming-soon-title {
    margin: 0;
    color: #fff;
    font-size: 0.42rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.coming-soon-confirm {
    margin-top: 0.3rem;
    min-width: 1.78rem;
    height: 0.56rem;
    border: 0;
    border-radius: 0.28rem;
    background: linear-gradient(180deg, #ffe59a 0%, #ffc25f 100%);
    color: #4e2f16;
    font-size: 0.2rem;
    font-weight: 700;
    cursor: pointer;
}

.coming-soon-confirm:hover {
    filter: brightness(1.05);
}

.bottom-footer {
    width: 12rem;
    margin: 0.48rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b84d2;
    font-size: 0.16rem;
    line-height: 1;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.14rem;
    margin-right: 0.34rem;
}

.footer-logo {
    width: 0.66rem;
}

.footer-copy {
    width: 1.06rem;
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.footer-meta span,
.footer-meta a {
    color: #8b84d2;
    text-decoration: none;
}

.footer-beian {
    position: relative;
    padding-left: 0.3rem;
}

.footer-beian:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.01rem;
    height: 0.2rem;
    background: #8b84d2;
    transform: translateY(-50%);
}