/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Source Han Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "PingFang SC", "Heiti SC", "Noto Sans CJK SC", Arial, sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.6;
}

/* Header: 消除底部空隙 */
.headpc {
    margin-bottom: 10px;
}

/* Header 补充：右侧 logo 推至右端（简化版 header 无中间元素） */
.head1d_230824 {
    margin-left: auto;
}

/* Navigation — 覆盖在 bg-1 上端，粉色渐变透明 */
.site-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(255,154,158,0.85) 0%, rgba(255,220,222,0.7) 60%, rgba(255,255,255,0) 100%);
}

.nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.nav-list li {
    flex: 1;
    text-align: center;
}

.nav-list a {
    display: block;
    padding: 10px 8px;
    color: #444;
    text-decoration: none;
    font-size: 1.88vw;       /* 36/1920 */
    font-weight: 600;
    transition: color 0.25s ease;
}

.nav-list a:hover {
    color: #c00;
}

/* 右侧悬浮导航 */
.side-nav {
    position: fixed;
    right: 0.5vw;
    top: 8vw;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.side-nav.visible {
    opacity: 1;
    pointer-events: auto;
}

.side-nav a {
    display: block;
    width: 7.0vw;         /* 226 * 2/3 / 1920 */
    max-width: 151px;       /* 226 * 2/3 */
    min-width: 48px;
    text-decoration: none;
}

.side-nav a img {
    width: 100%;
    height: auto;
    display: block;
}

.side-nav a:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.section-bg {
    position: relative;
}

.section-bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* 宽幅默认：桌面背景图可见，移动端隐藏 */
.section-bg .bg-desk { display: block; }
.section-bg .bg-mob  { display: none;  }

.section-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
}

/* Section 1 — 体育之缘 (体育之缘.png 1920×1110，顶部裁掉空白187px) */
.section-hero {
    z-index: 1;
    margin-top: 0;
}

/* 文案块: 左上角 (840,343), 宽度 940px → 百分比 */
.hero-text-block {
    display:none;
    position: absolute;
    left: 43.75%;          /* 840/1920 */
    top: 33.0%;           /* 343/1110 (旧图 y=530, 裁掉顶部187px空白) */
    width: 48.958%;        /* 940/1920 */
    color: #333;
}

.hero-text-block p {
    font-size: 1.6vw;
    line-height: 1.6;
    margin: 0 0 1.5em;
}

.hero-text-block p:last-child {
    line-height: 1.9;
    margin-bottom: 0;
}

.hero-text-block b {
    font-weight: 700;
}

.hero-text-block-temp {
    position: absolute;
    left: 17.75%;          /* 840/1920 */
    top: 34.0%;           /* 343/1110 (旧图 y=530, 裁掉顶部187px空白) */
    width: 37.0%;        /* 940/1920 */
    color: #333;
}
.hero-text-block-temp p {
    font-size: 2.1vw;
    line-height: 1.6;
    margin: 0 0 1.5em;
}

/* 右上角气泡装饰（bubble.png 603×440，基于设计稿 1920×1110 左上角 1100,186）；
   定位在链接层上，图片填满链接 */
.hero-bubble-link {
    position: absolute;
    left: 57.29%;   /* 1100/1920 */
    top: 19.76%;    /* 186/1110 */
    width: 31.41%;  /* 603/1920 */
    z-index: 2;
    display: block;
}
.hero-bubble {
    width: 100%;
    height: auto;
    display: block;
}

/* 窄布局左侧三角形缩进浮块（宽布局隐藏） */
.hero-indent-left {
    display: none;
}

/* 时间线区域: belt 位于 bg-2 中 y=500 处 (500/3212≈15.57%) */
.timeline-area {
    position: absolute;
    top: 13.45%;
    left: 0;
    width: 100%;
    z-index: 2;
}

.timeline-belt {
    width: 100%;
    height: auto;
    display: block;
}

.timeline-groups {
    position: absolute;
    inset: 0;
}

.tl-group {
    pointer-events: none;
}

.tl-group .tl-logo,
.tl-group .tl-pin {
    pointer-events: auto;
    cursor: pointer;
}

/* 默认: 正常图片显示, 高亮图片隐藏 */
.tl-logo {
    position: absolute;
    transition: opacity 0.4s ease;
}
.tl-logo-normal { opacity: 1; }
.tl-logo-hl { opacity: 0; }

.tl-pin {
    position: absolute;
    height: auto;
    transition: opacity 0.4s ease;
}
.tl-pin-normal { opacity: 1; }
.tl-pin-hl { opacity: 0; }

/* 高亮态: 正常隐藏, 高亮显示 */
.tl-group.active .tl-logo-normal,
.tl-group.active .tl-pin-normal {
    opacity: 0;
}
.tl-group.active .tl-logo-hl,
.tl-group.active .tl-pin-hl {
    opacity: 1;
}
.section-history {
    z-index: 0;
    overflow: visible;
}

.section-history .section-content {
    position: absolute;
    inset: 0;
}

/* 文案块 1: 矩形区域 (500,260)-(1700,390) → 百分比 */
.hist-text-block {
    position: absolute;
    left: 33.4%;
    top: 5.09%;  /* 260/3212 */
    width: 58.5%;  /* 1200/1920 */
    color: #333;
}

.hist-text-block p {
    font-size: 1.8vw;
    line-height: 1.5;
    margin: 0;
}

/* 文案块 2: 右对齐三行，右上角 (1630,1500) */
.hist-text-right {
    position: absolute;
    right: 17.1%;   /* (1920-1630)/1920 */
    top: 45.2%;    /* 1500/3212 - 上移70px */
    color: #333;
    text-align: right;
}

.hist-text-right p {
    font-size: 1.8vw;
    line-height: 1.5;
    margin: 0;
}

/* Flip Cards — 各卡片独立绝对定位，以中心点对齐 */
.flip-card {
    position: absolute;
    width: 31.3%;          /* 550/1920 */
    cursor: pointer;
    perspective: 800px;
    transform: translate(-50%, -50%);
}

/* 宽幅卡片位置（基于 bg-2 1920×3049） */
.flip-card[data-year="2026"] { left: 27.90%; top: 62.52%; }
.flip-card[data-year="2025"] { left: 72.20%; top: 63.60%; }
.flip-card[data-year="2024"] { left: 70.50%; top: 88.02%; }
.flip-card[data-year="2023"] { left: 25.80%; top: 86.82%; }

.flip-card-inner {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    filter: drop-shadow(4px 6px 14px rgba(0,0,0,0.30));
}

.flip-card-front img,
.flip-card-back img {
    width: 100%;
    height: auto;
    display: block;
}

.flip-card-back {
    transform: rotateY(180deg);
    position: relative;
}

/* 卡片背面文字叠加层 */
.card-back-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8% 5% 4% 5%;
}

.card-back-title {
    font-size: 2.4vw;
    color: #8F1F01;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 -2em 0.3em;
    text-align: center;
}

.card-back-info {
    font-size: 1.4vw;
    color: #8F1F01;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 0.6em;
    text-align: center;
}

.card-back-body {
    font-size: 1.6vw;
    color: #fff;
    line-height: 1.8;
    margin: 0;
}

/* Section 3 — 运动与欢笑 (bg-3透明相框 + 轮播照片) */
.section-joy .section-bg {
    z-index: 1;
    pointer-events: none;  /* 背景图不拦截事件，滑动直达下层轮播 */
}

.section-joy .section-content {
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
}

.section-joy .joy-text-right {
    pointer-events: auto;
}

/* 照片轮播 — 在背景图下方 */
.photo-carousel {
    position: absolute;
    left: 14.792%;        /* 284/1920 (镂空280+内缩4) */
    top: 24.0%;         /* 350/1406 (镂空348+内缩2) */
    width: 70.313%;       /* 1350/1920 */
    height: 64.011%;      /* 900/1406 */
    z-index: 0;
    overflow: hidden;
    touch-action: pan-y;  /* 允许纵向滚动，横向手势用于翻页 */
    user-select: none;
    -webkit-user-select: none;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.carousel-slide.active {
    opacity: 1;
}

/* 轮播控件 — 照片区域下方 */
.carousel-controls {
    position: absolute;
    left: 50%;
    top: 93.5%;         /* 1270/1406 */
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
    pointer-events: auto;
}

.carousel-dot {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: none;
    background: #8B8B8B;
    cursor: pointer;
    padding: 0;
    transition: width 0.35s ease, background 0.35s ease;
}

.carousel-dot.active {
    width: 60px;
    background: #B88484;
}

.carousel-dot:hover {
    background: #B88484;
}

/* 右对齐文案: 右上角 (1610,50)，字体与 hist-text-right 一致 */
.joy-text-right {
    position: absolute;
    right: 16.146%;      /* (1920-1610)/1920 */
    top: 3.788%;         /* 50/1320 */
    color: #333;
    text-align: right;
}

.joy-text-right p {
    font-size: 1.8vw;
    line-height: 1.5;
    margin: 0;
}

/* 锚点: 在 section-bg 内绝对定位, 坐标按图片百分比 */
.section-anchor {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Section 4 — bg-4.png, 与 bg-3 重叠 400px（参考 1920px 宽度） */
.section-bg4 {
    margin-top: -20.0vw;  /* 400/1920 */
    z-index: 1;
}

/* 文案层容器不拦截事件：swipe 直达下层轮播 */
.section-bg4 .section-content {
    pointer-events: none;
}
/* 文案块自身恢复交互（可选中文字；与轮播区域无重叠） */
.section-bg4 .behind-heroes-text-1 {
    pointer-events: auto;
}

/* bg-4 文案块1: 图片坐标 (430,1720)-(1760,1720) 为上边沿 */
.behind-heroes-text-1 {
    position: absolute;
    left: 23.0%;         /* 430/1920 */
    top: 82.564%;          /* 1720/2988 */
    width: 68%;        /* 1330/1920 */
    color: #333;
}

.behind-heroes-text-1 h4 {
    font-size: 1.95vw;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 0.5em;
    color: #222;
}

.behind-heroes-text-1 p {
    font-size: 1.5vw;
    line-height: 2.1;
    font-weight: 700;
    margin: 0;
}

.behind-heroes-text-1 p span {
    font-size: 1.85vw;
    color: #c00;
}

/* bg-4 英雄照片轮播 — 中心点 (980,1360), 照片 ~1690×890 */
.hero-photo-carousel {
    position: absolute;
    left: 6.901%;          /* 51.042% - 88.281%/2 */
    top: 41.198%;          /* 61.234% - 40.072%/2 */
    width: 88.281%;        /* 1695/1920 */
    height: 40.072%;       /* 890/2221 */
    z-index: 1;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.hero-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-carousel-slide.active {
    opacity: 1;
}

/* bg-4 轮播控件 — y=1780 */
.hero-carousel-controls {
    position: absolute;
    left: 50%;
    top: 80.144%;           /* 1780/2221 */
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}

/* Section 5 — bg-5.png, 感动赛场 + 轮播照片 */
.section-bg5 .section-bg {
    z-index: 1;
}

.moving-photo-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.section-bg5 .section-content {
    position: absolute;
    inset: 0;
}

/* bg-5 文案: 右上角图片坐标 (1110,60)，右对齐 */
.moving-games-text {
    position: absolute;
    right: 41.5%;        /* (1920-1110)/1920 */
    top: 2.15%;           /* 60/3468 */
    text-align: right;
    color: #333;
}

.moving-games-text p {
    font-size: 1.75vw;
    line-height: 1.7;
    margin: 0;
}

/* bg-5 文案2: 右上角图片坐标 (1800,1860)，右对齐 */
.moving-games-text-2 {
    position: absolute;
    left: 10.8%;
    right: 8.5%;           /* (1920-1800)/1920 */
    top: 52.6%;           /* 1860/3468 */
    text-align: right;
    color: #333;
}

.moving-games-text-2 p {
  font-size: 1.7vw;
  line-height: 1.7;
  margin: 0;
}

.photo-5-wrapper {
    position: absolute;
    left: 14.583%;      /* 280/1920 */
    top: 12.937%;       /* 455/3517 */
    width: 71.302%;     /* (1649-280)/1920 */
    height: 25.789%;    /* (1362-455)/3517 */
    overflow: hidden;
}

.moving-slide-group {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.moving-slide-group.active {
    opacity: 1;
}

.moving-slide-group img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.moving-controls {
    position: absolute;
    left: 50%;
    top: 37.0%;            /* 照片区域底部下方 (12.94% + 25.79%) */
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 12px;
}

/* bg-7 文案1: 右上角图片坐标 (1740,170)，右对齐 */
.meet-games-text-1 {
    position: absolute;
    right: 10%;          /* (1920-1740)/1920 */
    top: 6.0%;            /* 170/1750 */
    text-align: right;
    color: #333;
}

.meet-games-text-1 h3 {
    font-size: 2.6vw;
    font-style: italic;
    font-weight: 700;
    margin: 0 0 0.15em;
    color: #222;
}

.meet-games-text-1 h3 .c-purple { color: #4E3A93; }
.meet-games-text-1 h3 .c-gold   { color: #D5B200; }
.meet-games-text-1 h3 .c-green  { color: #079A3F; }

.meet-games-text-1 p {
    font-size: 1.85vw;
    line-height: 1.9;
    margin: 0;
}

/* bg-7 文案2: 右上角图片坐标 (1500,1310)，右对齐 */
.meet-games-text-2 {
    position: absolute;
    right: 21.875%;         /* (1920-1500)/1920 */
    top: 88.0%;           /* 1310/1750 */
    text-align: right;
    color: #333;
    font-style: italic;
}

.meet-games-text-2 p {
    font-size: 1.9vw;
    font-weight: 700;
    font-style: italic;
    line-height: 1.4;
    margin: 0;
}

.meet-games-text-2 a {
    color: #4E3A93;
    text-decoration: underline;
    font-weight: 700;
    font-style: italic;
}

/* ---- Section 6 — bg-6.png, 亚运之选 ---- */
.section-bg6 .section-content {
    pointer-events: none;
}

/* 产品组容器：铺满 section，不拦截事件 */
.product-group {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 产品卡片 */
.product-card {
    position: absolute;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.product-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* 页面显隐：按 data-page 匹配，可见卡片恢复原尺寸并接收事件 */
.product-group[data-page="1"] .product-card[data-page="1"],
.product-group[data-page="2"] .product-card[data-page="2"],
.product-group[data-page="3"] .product-card[data-page="3"] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 包裹容器自身不拦截事件：hover/点击仅发生在热点多边形上 */
.product-group[data-page="1"] .product-card.card-wrapped,
.product-group[data-page="2"] .product-card.card-wrapped,
.product-group[data-page="3"] .product-card.card-wrapped {
    pointer-events: none;
}

/* 卡片内容图：填充包裹容器，不拦截事件 */
.product-card .card-img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* 热点覆盖层：与卡片图同 viewBox 同渲染盒，多边形与图形精确对齐 */
.product-card .card-hotspot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.product-card .card-hotspot polygon {
    pointer-events: none;   /* 非当前页热点不响应 */
    cursor: pointer;
}
/* 仅当前页热点捕获事件（隐藏页卡片叠放于同位置，须屏蔽其热点） */
.product-group[data-page="1"] .product-card[data-page="1"] .card-hotspot polygon,
.product-group[data-page="2"] .product-card[data-page="2"] .card-hotspot polygon,
.product-group[data-page="3"] .product-card[data-page="3"] .card-hotspot polygon {
    pointer-events: auto;
}

/* hover 略微放大 */
.product-card:hover {
    transform: scale(1.06) !important;
}

/* 点击晃动（鼠标） */
@keyframes card-shake {
    0%, 100% { transform: scale(1.06) rotate(0deg); }
    25%      { transform: scale(1.06) rotate(-1.6deg); }
    50%      { transform: scale(1.06) rotate(1.6deg); }
    75%      { transform: scale(1.06) rotate(-1deg); }
}
.product-card.card-shake {
    animation: card-shake 0.4s ease;
}

/* 触屏点击：放大并晃动 */
@keyframes card-pop-shake {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12); }
    50%  { transform: scale(1.1) rotate(-1.8deg); }
    70%  { transform: scale(1.1) rotate(1.8deg); }
    100% { transform: scale(1); }
}
.product-card.card-pop {
    animation: card-pop-shake 0.55s ease;
}

/* 叠放次序（后→前）: 1, 2, 4, 3, 标题 */
.product-card.card-1 { z-index: 1; }
.product-card.card-2 { z-index: 2; }
.product-card.card-4 { z-index: 3; }
.product-card.card-3 { z-index: 4; }
.product-card.card-r5 { z-index: 1; }

/* 标题图片 */
.product-title {
    position: absolute;
    z-index: 5;
    width: auto;
    height: auto;
    display: block;
    pointer-events: none;
}

/* 宽幅默认：桌面产品图可见，移动端隐藏 */
.product-desk  { display: block; }
.product-mob   { display: none;  }
.product-svg-desk { display: block; }
.product-svg-mob  { display: none;  }

/* ---- 宽幅各卡片位置（基于 bg-6 1920×3263，pivot 对齐） ---- */
.product-group[data-group="1"] .product-title { left: 7.7%; top: 10.76%; width: 16.5%; }  /* t1 318/1920 */
.product-group[data-group="2"] .product-title { left: 70.0%; top: 28.5%; width: 17.5%; }  /* t2 337/1920 */
.product-group[data-group="3"] .product-title { left: 7.7%; top: 45.72%; width: 16.5%; }  /* t3 317/1920 */
.product-group[data-group="4"] .product-title { left: 69.0%; top: 63.1%; width: 17.5%; }  /* t4 333/1920 */
/* 第五组 r5 */
.product-group[data-group="5"] .card-r5 { left: 12.5%; top: 83.0%; width: 75.0%; }
/* 第三页较窄图（1075×493，为 5-1/5-2 宽度的 78.5%），水平居中；可点击查看活动规则 */
.product-group[data-group="5"] .card-r5-3 { left: 20.55%; top: 83.0%; width: 58.9%; cursor: pointer; }
.product-group[data-group="5"] .product-title { left: 10.35%; top: 81.0%; width: 16.56%; }  /* t5 318/1920，左上角 */

/* 第五组第三页：活动规则弹层 */
.promo-panel {
    position: fixed;
    inset: 0;
    z-index: 1000000;   /* 需盖过窄布局固定 header（common_6tkn: .headpc z-index 999999） */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 3vw;
}
.promo-panel.open {
    display: flex;
}
.pp-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    max-height: 88vh;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    padding: 10px 10px;
}
/* 滚动区域：pp-body（正文），标题行固定不滚动 */
.pp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 20px;
    -webkit-overflow-scrolling: touch;
}
.pp-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #eee;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pp-close:hover {
    background: #ddd;
}
/* 标题行：标题居面板正中，二维码绝对定位靠右；固定不随正文滚动 */
.pp-head {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 0 200px;   /* 为右侧二维码留位，标题不受其挤压 */
}
.pp-head-text {
    min-width: 0;
}
.pp-text {
    font-size: 14px;
    line-height: 1.9;
    color: #333;
}
.pp-title {
    margin: 15px 15px 14px;
    font-size: 28px;
    font-weight: bold;
    color: #222;
    text-align: center;
}
.pp-duration {
    margin: 0;
    font-size: 14px;
    color: #888;
    text-align: center;
}
.pp-sub {
    margin: 20px 0 8px;
    font-size: 20px;
    font-weight: bold;
    color: #e60012;
}
.pp-text p {
    margin: 0 0 10px;
}
.pp-strong {
    color: #e60012;
    font-weight: bold;
}
.pp-emph {
    font-weight: bold;
}
.pp-note {
    font-size: 14px;
    color: #333;
}
.pp-qr {
    position: absolute;
    right: 30px;
    top: 70%;
    transform: translateY(-50%);
    width: 110px;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 4px 6px 4px;
}
.pp-qr img {
    width: 100%;
    height: auto;
    display: block;
}
.pp-qr-tip {
    margin: -10px 0 2px;
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 1.3;
}

/* ---- SVG 卡片：以图形中心为 pivot（宽幅） ---- */
.product-card.card-svg.card-1 { height: 20%; }
.product-card.card-svg.card-2 { height: 20%; }
.product-card.card-svg.card-3 { height: 20%; }
.product-card.card-svg.card-4 { height: 20%; }

.product-group[data-group="1"] .card-svg.card-1 { left:  7.3%; top: 8.8%;  width: 28.2%; }
.product-group[data-group="1"] .card-svg.card-2 { left: 27.6%; top: 11.0%; width: 21.8%; }
.product-group[data-group="1"] .card-svg.card-3 { left: 45.2%; top: 10%; width: 27.0%; }
.product-group[data-group="1"] .card-svg.card-4 { left: 65.0%; top: 11.5%; width: 23.3%; }
.product-group[data-group="1"] .card-svg[src$="1-1-3.svg"] { top: 9.5%; width: 25.3%; }

.product-group[data-group="2"] .card-svg.card-1 { left:  7.6%; top: 28.5%; width: 22.2%; z-index: 3; }
.product-group[data-group="2"] .card-svg.card-2 { left: 24.5%; top: 27.0%; width: 26.1%; z-index: 4; }
.product-group[data-group="2"] .card-svg.card-3 { left: 46.5%; top: 28.5%; width: 21.4%; z-index: 2; }
.product-group[data-group="2"] .card-svg.card-4 { left: 60.5%; top: 26.5%; width: 28.6%; z-index: 1; }

.product-group[data-group="3"] .card-svg.card-1 { left:  7.3%; top: 43.5%; width: 28.0%; }
.product-group[data-group="3"] .card-svg.card-2 { left: 27.6%; top: 45.7%; width: 22.2%; }
.product-group[data-group="3"] .card-svg.card-3 { left: 45.2%; top: 44.2%; width: 25.8%; }
.product-group[data-group="3"] .card-svg.card-4 { left: 65.0%; top: 46.2%; width: 23.7%; }

.product-group[data-group="4"] .card-svg.card-1 { left:  7.6%; top: 63.0%; width: 23.0%; z-index: 3; }
.product-group[data-group="4"] .card-svg.card-2 { left: 24.5%; top: 61.5%; width: 25.6%; z-index: 4; }
.product-group[data-group="4"] .card-svg.card-3 { left: 46.5%; top: 63.0%; width: 21.5%; z-index: 2; }
.product-group[data-group="4"] .card-svg.card-4 { left: 61.0%; top: 61.5%; width: 28.0%; z-index: 1; }

/* 右侧切换按钮 */
.product-next-btn {
    position: absolute;
    width: 4.74%;         /* 91/1920 */
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    z-index: 6;
    pointer-events: auto;
    transition: transform 0.2s ease;
}

.product-next-btn img {
    width: 100%;
    height: auto;
    display: block;
}

.product-next-btn:hover {
    transform: scale(1.12);
}

/* 自动轮播时的闪动提示 */
@keyframes btn-flash {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.product-next-btn.flash {
    animation: btn-flash 0.4s ease;
}

/* 宽幅按钮位置（各组卡片区域垂直中心） */
.product-next-btn[data-group="1"] { left: 88.958%; top: 20.0%; }
.product-next-btn[data-group="2"] { left: 88.958%; top: 35.3%; }
.product-next-btn[data-group="3"] { left: 88.958%; top: 56.0%; }
.product-next-btn[data-group="4"] { left: 88.958%; top: 70.2%; }
.product-next-btn[data-group="5"] { left: 88.958%; top: 88.0%; }

/* 第三组单页：隐藏换页按钮 */
.product-next-btn[data-group="3"] { display: none; }

/* Placeholder sections */
.section-placeholder {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5f5 0%, #f0f8ff 100%);
    border-top: 1px solid #eee;
}

.placeholder-box {
    text-align: center;
    padding: 48px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.placeholder-box h2 {
    font-size: 36px;
    color: #c00;
    margin: 0 0 12px;
}

.placeholder-box p {
    color: #666;
    margin: 0;
}

/* ============================================
   Responsive — 单断点 975px
   宽幅基于 1920px 效果图，窄幅基于 975px 效果图
   ============================================ */

@media screen and (max-width: 974px) {
    /* 防止横向溢出 */
    html, body {
        overflow-x: hidden;
    }

    /* 具体 SVG 卡片微调（窄幅）示例 — 与宽幅同样格式，
       基于窄幅基础值调整，例如：
       .product-group[data-group="1"] .card-svg[src$="1-1-1.svg"] {
           left: 4.05%;   top: 3.38%;
           width: 70.84%; height: 13.54%;
       }
    */

    /* 固定 header 占位 */
    main {
        padding-top: 110px;
    }

    /* 窄幅：桌面背景图隐藏，移动端背景图显示 */
    .section-bg .bg-desk { display: none; }
    .section-bg .bg-mob  { display: block; }

    /* 导航菜单 */
    .nav-list a {
        font-size: 2.4vw;           /* ~29px @974px */
    }

    /* 右侧悬浮导航 */
    .side-nav {
        right: 1vw;
        top: 30vw;
        gap: 30px;
    }
    .side-nav a {
        width: 8vw;
        min-width: 24px;
    }

    /* 各 section 文案：窄幅提高 vw 值，保证可读性 */
    .hero-text-block {
        display:none;
        left: 38.0%;
        top: 25.0%;
        width: 58.0%;
    }
    .hero-text-block p {
        font-size: 2.1vw;
        line-height: 1.6;
        margin-right: 10%;
    }
    .hero-text-block p:first-child {
        margin-right: 0%;
    }

    .hero-indent-left {
        display: block;
        float: left;
        width: 16.4vw;          /* (540-380)/975 */
        height: 52.3vw;         /* (700-580)/975 */
        shape-outside: polygon(0 0, 0 65%, 100% 65%, 100% 100%, 0 100%);
    }

    .timeline-area {
        top: 7.45%;
    }

    .hist-text-block {
        left: 24.0%;
        top: 3.5%;
        width: 62.5%;
    }

    .hist-text-right {
        right: 13.0%;
        top: 23.5%;
    }

    .hist-text-block p, .hist-text-right p {
        font-size: 2.1vw;
        line-height: 1.4;
    }

    .joy-text-right p {
        font-size: 2vw;
        line-height: 1.4;
    }

    .hero-photo-carousel {
        top: 32.2%;          /* 61.234% - 40.072%/2 */
    }

    .behind-heroes-text-1 {
        left: 22.0%;
        top: 73.0%;
    }
    .behind-heroes-text-1 h4 {
        font-size: 2.5vw;
    }
    .behind-heroes-text-1 p {
        font-size: 1.9vw;
    }
    .behind-heroes-text-1 p span {
        font-size: 2.2vw;
    }
    .moving-games-text {
        top: 1.5%
    }
    .moving-games-text-2 {
        top: 53.3%;
        left: 20.0%;
        right: 11.0%;
    }
    .moving-games-text p,
    .moving-games-text-2 p {
        font-size: 2.2vw;
        line-height: 1.6;
    }

    /* 轮播照片矩形（bg-5-m 975×2071: (118,350)-(866,845)） */
    .photo-5-wrapper {
        left: 16.103%;      /* 118/975 */
        top: 16.900%;       /* 350/2071 */
        width: 68.0%;     /* (866-118)/975 */
        height: 23.902%;    /* (845-350)/2071 */
    }
    .moving-controls {
        top: 38.5%;         /* 照片区域底部下方 */
    }
    .meet-games-text-1 {
        top: 4.0%;
        right: 13%;
    }
    .meet-games-text-1 h3 {
        font-size: 3.2vw;
        line-height: 1.7;
    }
    .meet-games-text-1 p {
        font-size: 2.2vw;
        line-height: 1.9;
    }
    .meet-games-text-2 p {
        font-size: 2.0vw;
        line-height: 1.5;
    }

    /* 翻转卡片 */
    .flip-card {
        width: 50%;
    }
    /* 窄幅卡片位置（基于 bg-2-m 975×3746，待调整） */
    .flip-card[data-year="2026"] { left: 41.0%; top: 35.0%; }
    .flip-card[data-year="2025"] { left: 65.0%; top: 53.0%; }
    .flip-card[data-year="2024"] { left: 40.0%; top: 73.5%; }
    .flip-card[data-year="2023"] { left: 66.0%; top: 91.5%; }
    .card-back-title {
        font-size: 3.8vw;
    }
    .card-back-info {
        font-size: 2.3vw;
    }
    .card-back-body {
        font-size: 2.5vw;
    }

    /* 轮播控件 */
    .hero-carousel-controls {
        top: 68.0%;           /* 1780/2221 */
    }
    .carousel-dot {
        width: 20px;
        height: 20px;
        border-radius: 10px;
    }
    .carousel-dot.active {
        width: 60px;
    }

    /* 窄幅产品布局（基于 bg-6-m 975×4040，卡片 44% 缩放） */
    .product-desk  { display: none; }
    .product-mob   { display: block; }
    .product-svg-desk { display: none; }
    .product-svg-mob  { display: block; }

    /* 卡片宽度 44% 缩放 */
    .product-card.card-svg.card-1 { height: 13.0%; }
    .product-card.card-svg.card-2 { height: 13.0%; }
    .product-card.card-svg.card-3 { height: 13.0%; }
    .product-card.card-svg.card-4 { height: 13.0%; }

    .product-group[data-group="1"] .product-title { left: 10.0%; top: 4.50%; width: 25.0%; }  /* t1 318×0.75/975 */
    .product-group[data-group="2"] .product-title { left: 61.5%; top: 26.19%; width: 25.0%; }  /* t2 337×0.75/975 */
    .product-group[data-group="3"] .product-title { left: 10.0%; top: 46.68%; width: 25.0%; }  /* t3 317×0.75/975 */
    .product-group[data-group="4"] .product-title { left: 61.5%; top: 68.37%; width: 25.0%; }  /* t4 333×0.75/975 */

    /* 第五组 r5 */
    .product-group[data-group="5"] .card-r5 { left: 15.0%; top: 91.5%; width: 70.0%; }
    /* 第三页较窄图，水平居中；可点击查看活动规则 */
    .product-group[data-group="5"] .card-r5-3 { left: 22.5%; top: 91.5%; width: 55.0%; cursor: pointer; }
    .product-group[data-group="5"] .product-title { left: 6.5%; top: 89.0%; width: 25.0%; }  /* t5 318×0.75/975，左上角 */

    /* ---- SVG 卡片：以图形中心为 pivot（窄幅） ---- */
    .product-group[data-group="1"] .card-svg.card-1 { left: 11.25%; top: 3.2%;  width:48.1%; }
    .product-group[data-group="1"] .card-svg.card-2 { left: 48.0%; top: 4.43%;  width:37.2%; }
    .product-group[data-group="1"] .card-svg.card-3 { left: 9.25%; top: 12.76%; width:46.0%; }
    .product-group[data-group="1"] .card-svg.card-4 { left: 42.5%; top: 14.0%;  width:39.75%; z-index: 4; }
    .product-group[data-group="1"] .card-svg[src$="1-1-3.svg"] { top: 12.4%; width: 43.15%; }

    .product-group[data-group="2"] .card-svg.card-1 { left:  10.0%; top: 25.5%;  width: 37.87%; z-index: 2; }
    .product-group[data-group="2"] .card-svg.card-2 { left: 40.17%; top: 26.0%;  width: 44.52%; z-index: 1; }
    .product-group[data-group="2"] .card-svg.card-3 { left:  11.92%; top: 35.25%; width: 36.5%; z-index: 4; }
    .product-group[data-group="2"] .card-svg.card-4 { left: 37.84%; top: 34.40%; width: 48.78%; z-index: 3;}

    .product-group[data-group="3"] .card-svg.card-1 { left: 11.25%; top: 45.56%; width: 47.76%; }
    .product-group[data-group="3"] .card-svg.card-2 { left: 48.0%; top: 46.69%; width: 37.87%; }
    .product-group[data-group="3"] .card-svg.card-3 { left: 9.25%; top: 55.02%; width: 44.0%; }
    .product-group[data-group="3"] .card-svg.card-4 { left: 42.5%; top: 56.26%; width: 40.42%; z-index: 4; }

    .product-group[data-group="4"] .card-svg.card-1 { left:  10.0%; top: 67.8%; width: 39.23%; z-index: 2; }
    .product-group[data-group="4"] .card-svg.card-2 { left: 40.17%; top: 68.3%; width: 43.67%; z-index: 1; }
    .product-group[data-group="4"] .card-svg.card-3 { left:  11.92%; top: 77.55%; width: 36.67%; z-index: 4; }
    .product-group[data-group="4"] .card-svg.card-4 { left: 37.84%; top: 76.7%; width: 47.76%; z-index: 3; }

    /* 窄幅按钮位置 */
    .product-next-btn {
        width: 7vw;
    }
    .product-next-btn[data-group="1"] { left: 85.2%; top: 13.50%; }
    .product-next-btn[data-group="2"] { left: 85.2%; top: 35.08%; }
    .product-next-btn[data-group="3"] { left: 85.2%; top: 59.67%; }
    .product-next-btn[data-group="4"] { left: 85.2%; top: 78.25%; }
    .product-next-btn[data-group="5"] { left: 85.2%; top: 93.6%; }

    /* 活动规则弹层（窄幅）：加大字体，标题行与二维码保持并排 */
    .pp-title {
        font-size: 48px;
    }
    .pp-duration {
        font-size: 24px;
    }
    .pp-sub {
        font-size: 40px;
    }
    .pp-text {
        font-size: 30px;
    }
    .pp-note {
        font-size: 30px;
    }
    .pp-qr {
        width: 150px;
        right: 70px;
        top: 50%;
    }
    .pp-head {
        margin: 0 -50px 50px -50px
    }
    .pp-qr-tip {
        margin: -23px 0 2px;
    }
}