* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #ffffff;
    -webkit-tap-highlight-color: transparent;
}

.container-sm {
    max-width: 720px !important;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.content {
    font-size: 0;
}

.slice {
    position: relative;
    width: 100%;
    font-size: 0;
}

.big-img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}



.download-hotspot {
    position: absolute;
    z-index: 1;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

/* ===== 顶部信息栏（纯 HTML，背景/图标/星级/按钮取自设计切片）=====
   --u = 1 个设计稿像素：设计稿宽 720，故 100vw/720；容器 ≥720px 封顶后固定 1px */
.header {
    position: relative;
    width: 100%;
    --u: calc(100vw / 720);
    height: 106px; /* 老浏览器兜底：不支持 var() 时按设计稿原始高度 */
    height: calc(106 * var(--u)); /* 与设计稿等比（720 宽时为精确 106px，与下方长图严丝合缝） */
    /* #343B26 为背景图底部同色，用于兜住非 720 宽时亚像素舍入产生的细缝，避免露出白线 */
    background: #343B26 url("../image/header-bg.png") no-repeat 0 0 / 100% 100%;
    font-size: 0;
}
@media (min-width: 720px) {
    .header {
        --u: 1px;
    }
}

.header .app-img {
    position: absolute;
    left: calc(46 * var(--u));
    top: calc(13 * var(--u));
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
    display: block;
}

.header-info {
    position: absolute;
    left: calc(137 * var(--u));
    top: calc(14 * var(--u));
    color: #ffffff;
}

.header-title {
    font-size: calc(24 * var(--u));
    line-height: calc(24 * var(--u));
    font-weight: 700;
}

.header-hot {
    position: relative;
    margin-top: calc(3 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(18 * var(--u));
    height: calc(18 * var(--u));
}

/* 星级按设计稿固定在信息块左侧 45 设计像素处，不随文字字宽变化 */
.header-hot .star {
    position: absolute;
    left: calc(45 * var(--u));
    top: 0;
    display: block;
    width: calc(98 * var(--u));
    height: calc(18 * var(--u));
}

.header-tags {
    display: flex;
    margin-top: calc(4 * var(--u));
}

.tag {
    height: calc(24 * var(--u));
    line-height: calc(24 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-radius: calc(5 * var(--u));
    font-size: calc(16 * var(--u));
    color: #ffffff;
    white-space: nowrap;
}

.header-tags .tag + .tag {
    margin-left: calc(10 * var(--u));
}

.tag-1 {
    background-color: #5B6986;
}

.tag-2 {
    background-color: #D6B38D;
}

.tag-3 {
    background-color: #FFAC56;
}

.header-download-btn {
    position: absolute;
    left: calc(492 * var(--u));
    top: calc(14 * var(--u));
    width: calc(222 * var(--u));
    height: calc(78 * var(--u));
    display: block;
    cursor: pointer;
}

/* banner 下方橙色条内的「立即下载」按钮图层（图层 5 切片不含按钮，单独叠加） */
.download-hotspot-banner {
    top: 0;
    left: 30.83%;
    width: 37.5%;
    height: 100%;
}

.wx-tips {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.wx-tips img {
    display: block;
    width: 80%;
    margin: 2% auto 0;
}

.wx-tips-douyin {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.wx-tips-douyin img {
    width: 100%;
    margin: 2% auto 0;
}