/* ====================================================================
   响应式核心引擎：
   手机端：1rem = 1vw (完美还原你之前的布局)
   PC端 (大于 500px)：锁定 1rem = 5px (变成一个完美的 500px 居中手机壳)
==================================================================== */
html { font-size: 1vw; }
@media (min-width: 500px) {
    html { font-size: 5px; }
    body {
        background-color: #111 !important; /* PC端两侧显示深色背景 */
        display: flex;
        justify-content: center;
    }
    .mobile, .page-swiper {
        max-width: 500px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); /* 加个阴影更像手机 */
    }
}

* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body { overflow: hidden; background-color: #1f2631; font-size: 0.24rem; margin: 0 auto !important; position: relative; outline: none; }

.mobile {
    color: #fff;
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: url("bg.png") no-repeat center/cover;
    background-color: #fff;
}

.header {
    width: 100%;
    flex-shrink: 0;
    height: 20rem; /* 从 vw 变成 rem，下同 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fixed-bg { flex: 1; width: 100%; font-size: 0; overflow: auto; }
.btnImg1, .btnImg2 { width: 8rem !important; z-index: 2; margin-right: 2rem; }

.logo {
    display: flex;
    justify-content: center;
    height: 9rem !important;
    width: 42rem !important;
}
.logo img { width: 9rem !important; }
.logo span { color: #fff; font-size: 24px !important; line-height: 9rem !important; }
.contact { display: flex; }

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    width: 100%;
    padding-bottom: calc(env(safe-area-inset-bottom) + 18rem);
}

.content .title { height: 30%; width: 100%; object-fit: contain; }

/* 跑马灯动画区域 */
.title-marquee {
    position: absolute;
    top: 23rem;
    width: 90%;
    height: 45%;
    overflow: hidden;
}
.title-marquee .track {
    width: 200%;
    display: flex;
    animation: titleScroll 20s linear infinite;
}
.title-marquee img.title {
    width: 75%;
    height: 100%;
    object-fit: contain;
}

@keyframes titleScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.banner { position: relative; width: 100%; height: 100%; overflow: hidden; }
.swiper-container { width: 100%; height: 100%; }
.swiper-slide img { width: 100%; height: auto; object-fit: contain; }
.swiper-slide { height: 100%; width: 100%; box-sizing: border-box; }

.banner-swiper {
    position: relative;
    width: 100%;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-zoom-container img { max-width: 100%; max-height: 100%; display: block; }
.mobile.swiper-container, .page-swiper { touch-action: pan-y pinch-zoom; }
.fix-bot { bottom: 13rem !important; }

/* 下载按钮 (改为 absolute 防止 Fixed 在 PC 居中时跑偏) */
.leftIcon {
    width: 45rem !important;
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 23rem);
    z-index: 9;
    object-fit: contain;
}

.text {
    position: absolute;
    bottom: 38rem;
    z-index: 3;
    width: 70rem !important;
}

/* 极小屏设备优化 */
@media (max-height: 650px) {
    .leftIcon {
        width: 70rem !important;
        bottom: calc(env(safe-area-inset-bottom) + 8rem);
    }
}

.bottom_text {
    position: absolute;
    bottom: 15rem;
    left: 0;
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    flex-direction: column;
}

.back {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem !important;
}

.title-dots {
    position: relative;
    top: 60%;
    left: 0%;
}