* {
    padding: 0;
    margin: 0;
    -webkit-user-drag: none;
    user-select: none;
    box-sizing: border-box;
}

/* 统一缩放因子：1920×1080 设计稿（单位 = 设计 px ÷ 19.2），超宽屏按高度封顶；
   Chromium<79 无 min()，自定义属性双写兜底无效（声明不校验函数），必须用 @supports 门控 */
:root {
    --dw: 1vw;
}

@supports (width: min(1vw, 1vh)) {
    :root {
        --dw: min(1vw, 1.78vh);
    }
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    width: 100%;
    height: 100%;
}

.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #17070a;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ============ 三套素材轮播层（renwu+副标题文案+title 同步交叉淡切） ============ */
.fade-set {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    animation: setFade 12s infinite;
}

.set2 {
    animation-delay: -8s;
}

.set3 {
    animation-delay: -4s;
}

/* 每套展示 4s：约 3.3s 停留 + 0.7s 交叉淡切 */
@keyframes setFade {
    0% {
        opacity: 1;
    }

    28% {
        opacity: 1;
    }

    33.3% {
        opacity: 0;
    }

    94.7% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 右侧人物大图（三套位置/宽度不同，均贴底） */
.renwu-img {
    position: absolute;
    bottom: 0;
    height: auto;
}

.set1 .renwu-img {
    left: calc(55.42 * var(--dw));
    width: calc(37.86 * var(--dw));
}

.set2 .renwu-img {
    left: calc(56.2 * var(--dw));
    width: calc(34.06 * var(--dw));
}

.set3 .renwu-img {
    left: calc(43.28 * var(--dw));
    width: calc(54.43 * var(--dw));
}

/* 左上主标题金字大图（三套位置不同） */
.title-img {
    position: absolute;
    height: auto;
}

.set1 .title-img {
    left: calc(3.59 * var(--dw));
    top: calc(3.59 * var(--dw));
    width: calc(47.14 * var(--dw));
}

.set2 .title-img {
    left: calc(4.17 * var(--dw));
    top: calc(4.95 * var(--dw));
    width: calc(50 * var(--dw));
}

.set3 .title-img {
    left: calc(5.1 * var(--dw));
    top: calc(4.17 * var(--dw));
    width: calc(45.26 * var(--dw));
}

/* 人物两侧标签（设计稿 188×68 盒：#4F0316 半透明渐变底 + 金色渐变描边两端渐隐 + 背景模糊 + 金字），左列 tag1~3 / 右列 tag4~6，位置随套变 */
.tag {
    position: absolute;
    width: calc(9.8 * var(--dw));
    height: calc(3.54 * var(--dw));
    line-height: calc(3.54 * var(--dw));
    text-align: center;
    font-size: calc(1.7 * var(--dw));
    letter-spacing: calc(0.1 * var(--dw));
    color: #eacc9b;
    background: rgba(79, 3, 22, 0.85);
    border: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(234, 204, 155, 0), #ffb300, rgba(234, 204, 155, 0)) 1;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.set1 .tag1,
.set3 .tag1 {
    left: calc(53.02 * var(--dw));
    top: calc(16.93 * var(--dw));
}

.set1 .tag2,
.set3 .tag2 {
    left: calc(49.95 * var(--dw));
    top: calc(23.91 * var(--dw));
}

.set1 .tag3,
.set3 .tag3 {
    left: calc(51.77 * var(--dw));
    top: calc(30.89 * var(--dw));
}

.set1 .tag4,
.set3 .tag4 {
    left: calc(87.08 * var(--dw));
    top: calc(18.49 * var(--dw));
}

.set1 .tag5,
.set3 .tag5 {
    left: calc(88.96 * var(--dw));
    top: calc(25.05 * var(--dw));
}

.set1 .tag6,
.set3 .tag6 {
    left: calc(86.15 * var(--dw));
    top: calc(31.3 * var(--dw));
}

.set2 .tag1 {
    left: calc(52.97 * var(--dw));
    top: calc(19.48 * var(--dw));
}

.set2 .tag2 {
    left: calc(51.56 * var(--dw));
    top: calc(26.77 * var(--dw));
}

.set2 .tag3 {
    left: calc(51.77 * var(--dw));
    top: calc(33.54 * var(--dw));
}

.set2 .tag4 {
    left: calc(87.86 * var(--dw));
    top: calc(22.14 * var(--dw));
}

.set2 .tag5 {
    left: calc(88.02 * var(--dw));
    top: calc(28.54 * var(--dw));
}

.set2 .tag6 {
    left: calc(84.58 * var(--dw));
    top: calc(34.74 * var(--dw));
}

/* ============ 副标题：装饰边框条静态底图，金字文案随 fade-set 轮播 ============ */
.futitle {
    position: absolute;
    left: calc(7.34 * var(--dw));
    top: calc(28.85 * var(--dw));
    z-index: 1;
    width: calc(40.36 * var(--dw));
    height: calc(9.32 * var(--dw));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.futitle-text {
    position: absolute;
    left: calc(7.34 * var(--dw));
    top: calc(28.85 * var(--dw));
    width: calc(40.36 * var(--dw));
    height: calc(9.32 * var(--dw));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(2.08 * var(--dw));
    font-weight: bold;
    letter-spacing: calc(0.1 * var(--dw));
    white-space: nowrap;
    color: #f0d29a;
    background: linear-gradient(180deg, #fff6e0 20%, #f0c987 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============ 二维码面板（qrpic 1248×414 @2x，白盒区 42~371 → 设计 21,21 起 165×165） ============ */
.qr-panel {
    position: absolute;
    left: calc(5.89 * var(--dw));
    top: calc(43.23 * var(--dw));
    z-index: 3;
    width: calc(32.5 * var(--dw));
    height: calc(10.78 * var(--dw));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.qr-panel #qrcode {
    position: absolute;
    left: calc(1.09 * var(--dw));
    top: calc(1.09 * var(--dw));
    width: calc(8.59 * var(--dw));
    height: calc(8.59 * var(--dw));
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-panel #qrcode img,
.qr-panel #qrcode canvas {
    width: 92% !important;
    height: 92% !important;
    display: block;
}

/* ============ 右下跑马灯：banner 长图双份循环滚动，窗口到右边缘（左缘与二维码面板留距） ============ */
.banner {
    position: absolute;
    left: calc(40 * var(--dw));
    top: calc(42.71 * var(--dw));
    right: 0;
    z-index: 4;
    height: calc(11.82 * var(--dw));
    overflow: hidden;
}

.banner-track {
    display: flex;
    width: max-content;
    height: calc(10.1 * var(--dw));
    margin-top: calc(0.86 * var(--dw));
    animation: bannerScroll 40s linear infinite;
}

/* 右边距 = 图内卡片间隙（64px@2 = 32 设计 px），补齐两份长图拼接处的间隙 */
.banner-track img {
    height: 100%;
    width: auto;
    display: block;
    margin-right: calc(1.67 * var(--dw));
}

@keyframes bannerScroll {
    to {
        transform: translateX(-50%);
    }
}

/* ============ 顶栏：logo + 三胶囊合并图（叠透明点击区） ============ */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: calc(6.3 * var(--dw));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(3.59 * var(--dw));
}

.logo {
    height: calc(4.58 * var(--dw));
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.btn-bar {
    position: relative;
    width: calc(31.22 * var(--dw));
    height: calc(4.64 * var(--dw));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.btn-bar .zone {
    position: absolute;
    top: 0;
    height: 100%;
    width: 29%;
    cursor: pointer;
}

.btn-bar .zone:nth-child(1) {
    left: 6%;
}

.btn-bar .zone:nth-child(2) {
    left: 36.5%;
}

.btn-bar .zone:nth-child(3) {
    left: 66%;
}