/* ====================================================================
   V52 - 北京科技漫游指南 · 样式
   结构：主题变量 → 全局重置 → 通用组件 → 栏目布局 → 轮播组件 → 小屏响应式
   ==================================================================== */

/* ==================== 主题变量 ==================== */
:root {
    --primary: #1e90ff;
    --primary-dark: #0466bb;
    --primary-light: #5dadec;
    --primary-deep: #01478a;
    --primary-rgb: 30, 144, 255;
    --text: #333333;
    --text-secondary: #454344;
    --text-muted: #899095;
    --text-light: #FFFFFF;
    --bg: #d5f0ff;
    --bg-page: #9ad0fd;
    --border: #e6f2fb;
    --border-light: #f0f7fd;
    --card-bg: #ffffff;
    --card-text: #222222;
    --c-icon: #6486fc;
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap-md: 16px;
    --gap-lg: 24px;
    --gap-xl: 40px;
    --radius-sm: 12px;
    --radius-md: 30px;
    --radius-lg: 30px;
    --radius-xl: 50px;
    --fs-hero: 25px;
    --fs-title: 48px;
    --fs-title-p: 30px;
    --fs-list-t: 40px;
    --fs-list-p: 24px;
    --fs-list-s: 20px;
    --fs-bk: 30px;
    --fs-big: 60px;
    --fs-mid: 35px;
    --fs-norm: 24px;
    --fs-sm: 20px;
    --fs-xs: 16px;
    --fs-foot: 16px;
    --w: 1680px;
    --w-bd: 13px;
    --tr: 0.2s;
    --r-cd: 50px;
}

/* ==================== 全局重置 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: #cfeafd;
    min-height: 100vh;
    scrollbar-gutter: stable;
    font-size: var(--fs-norm);
}

body {
    overflow-x: hidden;   /* 防止栏目滑入动画初始右移产生水平滚动条 */
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
}

/* ==================== 工具类 ==================== */
.w100 {
    width: 100%;
}

.h100 {
    height: 100%;
}

.wh100 {
    width: 100%;
    height: 100%;
}

.center {
    text-align: center;
}

.flec {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flc {
    display: flex;
    flex-direction: column;
}

.fl {
    display: flex;
    align-items: center;
}

.pa {
    position: absolute;
}

.pr {
    position: relative;
}

.bgf {
    background-color: #fff;
}

.bg-blue {
    background-color: var(--bg);
}

.t0 {
    top: 0;
}

.l0 {
    left: 0;
}

.r0 {
    right: 0;
}

.b0 {
    bottom: 0;
}

/* ==================== 3D 斜面浮雕边框（栏目卡片可用） ==================== */
/*
  用法：给元素加 .bevel-border，再叠加 .--blue / .--gold 配色
  结构（对应图片观察）：
    外层  - 白色高光圈 + 内嵌阴影（凸起感）
    ::before  - 渐变描边（145°，左上亮、右下暗，模拟 3D 圆管）
    ::after   - 内容区背景（圆角白底 + 顶部高光、底部阴影）
*/
.bevel-border {
    position: relative;
    border-radius: 16px;
    padding: 2px;
    /* 留给外白圈 */
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
    /* 外发光（凸起）+ 内细白圈 */
    box-shadow:
        0 4px 12px rgba(11, 92, 175, 0.15),
        0 1px 2px rgba(11, 92, 175, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* 渐变描边层（145° 模拟斜面光泽） */
.bevel-border::before {
    content: '';
    position: absolute;
    inset: 2px;
    /* 缩进到白色外圈内侧 */
    border-radius: 14px;
    padding: 7px;
    /* 描边厚度 */
    background: linear-gradient(145deg,
            #e8f8ff 0%,
            /* 左上：最浅（受光面） */
            #7fd4ff 25%,
            #4cb8f5 50%,
            #2196f3 75%,
            #0d6fb8 100%);
    /* 右下：最深（背光面） */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* 内容背景层（圆角白底 + 顶亮底暗，模拟内凹面） */
.bevel-border::after {
    content: '';
    position: absolute;
    inset: 9px;
    /* 与描边厚度对齐 */
    border-radius: 8px;
    background: linear-gradient(180deg,
            #ffffff 0%,
            #fafdff 50%,
            #f0f6fb 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 0 -2px 4px rgba(11, 92, 175, 0.08);
    pointer-events: none;
    z-index: 1;
}

/* 内容容器（真正放置内容的层） */
.bevel-border__content {
    position: relative;
    z-index: 2;
    padding: 14px;
    border-radius: 8px;
}

/* ==================== 浅蓝配色 ==================== */
.bevel-border.--blue::before {
    background: linear-gradient(145deg,
            #d9f2ff 0%,
            #88d6ff 25%,
            #4cb8f5 50%,
            #2196f3 75%,
            #0d6fb8 100%);
}

.bevel-border.--blue::after {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f5fbff 60%,
            #e6f3fb 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(13, 111, 184, 0.12);
}

/* ==================== 金橙配色 ==================== */
.bevel-border.--gold::before {
    background: linear-gradient(145deg,
            #fff8e0 0%,
            #ffd980 25%,
            #f5b54a 50%,
            #e08a1a 75%,
            #a85a00 100%);
}

.bevel-border.--gold::after {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #fffaf0 60%,
            #fcefd6 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(168, 90, 0, 0.12);
}

.bevel-border.--gold {
    box-shadow:
        0 4px 12px rgba(168, 90, 0, 0.18),
        0 1px 2px rgba(168, 90, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* ==================== 页面背景 ==================== */
.page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fdf6ed;
    background-image: url('./topic-tech-tour-guide-v2-bg-page-0.jpg');
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 300%;
}
.page-bg-list {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fdf6ed;
    background-image: url('./topic-tech-tour-guide-v2-bg-page-0.jpg');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-bg::before {
    content: '';
    position: relative;
    display: block;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('./topic-tech-tour-guide-v2-bg-page-0t.jpg');
    background-repeat: repeat-y;
    background-size: 100% auto;
}
.hero-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10.0%;
    font-size: var(--fs-hero);
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
    color: #0466bb;
}
/* ==================== 页面容器 ==================== */
.page-wrapper {
    width: var(--w);
    max-width: var(--w);
    margin: 0 auto;
}

section,
header,
footer {
    position: relative;
}

@keyframes pulseIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.img-pulse {
    animation: pulseIn 0.7s ease;
}

/* ==================== 回到顶部 ==================== */
.arrow,
.arrow-2,
.arrow-3,
.arrow-4,
.arrow-5 {
    container-type: inline-size;
    /*border: 0.1px solid rgba(0, 255, 0, 0.8);*/
    box-sizing: border-box;
    position: relative;
    --c: var(--c-bd, #ffffff);
}

.arrow::before, 
.arrow-2::before,
.arrow-3::before,
.arrow-4::before,
.arrow-5::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70.71%;
    height: 70.71%;
    box-sizing: border-box;
    border-width: calc(25cqw * 0.7071);
    border-color: var(--c);
    border-style: solid;
    border-bottom-width: 0;
    border-left-width: 0;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
}

.arrow::before {
    transform: translateX(-76.5%) translateY(-50%) rotateZ(45deg);
}


.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
    transition: all 0.3s ease;
    user-select: none;
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.5);
}

.back-to-top .arrow {
    transform: rotateZ(-90deg);
    width: 22px;
    height: 22px;
}

/* ==================== 返回按钮 ==================== */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 26px;
    background: #cfeafd;
    border: 1px solid #b3defb;
    border-radius: 50px;
    color: var(--primary-dark);
    font-size: var(--fs-norm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    margin: 30px auto 40px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
}

.back-button:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35);
}

.back-button svg {
    width: 22px;
    height: 22px;
}

.back-button-wrap {
    text-align: center;
}

/* ==================== 共用 HERO 区域 ==================== */
.section-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1413;
    overflow: visible;
    /*background-color: #cfeafd;
    background-image: url('./topic-tech-tour-guide-v2-bg-hero-1.jpg');*/
    background-size: cover;
    background-position: center top;
}

.section-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 16%, black 21%);
    mask-image: linear-gradient(to top, transparent 16%, black 21%);
}

.section-hero__img {
    display: block;
    position: absolute;
    left: 50%;
    top: 10%;
    width: 63.0%;
    max-width: 100%;
    transform: translateX(-48.5%);
    z-index: 1;
}

.section-hero__pd {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    pointer-events: none;
}

.section-hero__pd img {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleY(-1);
}


.section-hero__nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 00px;
    display: flex;
    justify-content: center;
}

.section-hero__nav__wrap {
    position: relative;
    transform: translateY(40%);
    width: var(--w);
    aspect-ratio: 1680 / 135;
    display: flex;
    justify-content: space-between;
    gap: 4%;
    z-index: 2;
    overflow: hidden;
}

.section-hero__nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20.83%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    position: relative;
    cursor: pointer;
    border-radius: 24px;
    filter: drop-shadow(0 6px 12px rgba(11, 92, 175, 0.25));
    transition: transform 0.25s;
}

.section-hero__nav-tab img {
    width: 100%;
    height: auto;
}

.section-hero__nav-tab:first-child {
    width: 16.66%;
    padding: 0 1%;
}

.section-hero__nav-tab:first-child img {
    width: auto;
    height: 100%;
}

.section-hero__nav-tab:hover {
    transform: translateY(-4px) scale(1.04);
}

.section-hero__nav-tab.active {
    transform: translateY(-6px) scale(1.06);
    filter: drop-shadow(0 10px 16px rgba(11, 92, 175, 0.45));
}

.section-hero__nav-unit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

.section-hero__nav-unit p {
    margin: 0;
    line-height: 1.4;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ==================== 共用页脚 ==================== */
.section-footer {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 176;
    background-color: #127dd7;
    color: #ffffff;
    padding: 2.08% 0;
    
}

.section-footer__bar {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    pointer-events: none;
}

.section-footer__inner {
    width: var(--w);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    position: relative;
}

.section-footer__logo {
    width: 84px;
    height: auto;
    flex-shrink: 0;
}

.section-footer__center {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.section-footer__center img {
    width: 1em;
    display: inline-block;
}

.section-footer__row {
    font-size: var(--fs-foot);
    color: rgba(255, 255, 255, 0.92);
    line-height: 2.25;
}

.section-footer__row a {
    color: inherit;
}
.section-footer__left {
    position: absolute;
    top: 0;
    left: 0;
    width: 14%;
    /*padding-top: 2.08%;*/
    text-align: left;
}
.section-footer__left img {
    width: 100%;
    height: auto;
}
.section-footer__right {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.57%;
    /*padding-top: 2.08%;*/
    text-align: right;
}

.section-footer__right img {
    width: 100%;
}

.section-footer__bottom {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.78);
}

/* ==================== 栏目标题 ==================== */
.col-title {
    display: block;
    margin: 0 auto;
    width: clamp(180px, 28vw, 460px);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(11, 92, 175, 0.3));
}

/* ==================== 列表卡片 ==================== */
/* ====================================================================
   列表页 · 文章卡片（与首页 3D 浮雕卡片风格统一）
   ==================================================================== */
/* 列表项容器：复用首页 bevel-border 浮雕外框，蓝配色 */
.list-card {
    width: 100%;
    display: block;
    aspect-ratio: 1680 / 384;
    margin-bottom: var(--gap-lg);
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-md);
    background-color: #d5f0ff;
    border: 2px solid #9ad0fd;
}

/* 内部真正的内容框（浮雕白底 + 蓝边） */
.list-card__inner {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    background: linear-gradient(180deg, #d5f0ff 0%, #f5fbff 20%,#f5fbff 80%, #d5f0ff 100%),
    linear-gradient(to right, #d5f0ff 0%, #f5fbff 20%,#f5fbff 80%, #d5f0ff 100%);
    border: 2px solid #bfe4fb;
    border-radius: var(--radius-md);
    padding: var(--gap-md) var(--gap-lg);
    box-shadow:
        0 6px 18px rgba(13, 111, 184, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 calc(var(--w-bd) *2)  rgba(154, 208, 253, 0.55);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.list-card:hover .list-card__inner {
    transform: translateY(-4px);
    /*border-color: var(--primary);*/
    box-shadow:
        0 12px 30px rgba(var(--primary-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.list-card__img {
    width: clamp(80px, 36.41%, 600px);
    aspect-ratio: 590/350;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 3px 10px rgba(11, 92, 175, 0.18);
}

.list-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.list-card:hover .list-card__img img {
    transform: scale(1.06);
}

.list-card__body {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    position: relative;
}

.list-card__title {
    font-size: var(--fs-list-t);
    font-weight: 700;
    width: 100%;
    height: 34.2%;
    color: #1f6fc5;
    /*margin-bottom: 8px;*/
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-card__desc {
    width: 100%;
    flex: 1;
    overflow: hidden;
    font-size: var(--fs-list-p);
    color: var(--text-secondary);
    line-height: 1.7;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.list-card__date {
    width: 100%;
    height: 22%;
    font-size: var(--fs-list-s);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}


.list-card__date-icon {
    width: 1em;
    height: 1em;
    display: none;
    filter: invert(5%) sepia(60%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(95%);
}

/* 查看详情按钮（蓝渐变胶囊，与首页"更多"一致） */
.list-card__btn {
    position: absolute;
    z-index: 2;
    bottom: 2.8%;
    right: 2.6%;
    height: 2.5em;
    aspect-ratio: 168 / 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.list-card:hover .list-card__btn {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.45);
}

/* ==================== 翻页 ==================== */
.paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 12px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 12px;
}

.page-btn:hover:not(:disabled):not(.active) {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-dark);
}

.page-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.page-ellipsis {
    color: var(--text-muted);
}

/* ==================== 详情页 ==================== */
/* ====================================================================
   详情页（与首页 3D 浮雕卡片风格统一）
   ==================================================================== */
.detail-section {
    background:
        radial-gradient(1200px 500px at 50% -10%, #e7f6ff 0%, transparent 70%),
        #cfeafd;
    padding: 40px 0 60px;
    min-height: 20vh;
    flex: 1 0 auto;
}

/* 详情卡片：复用首页 bevel-border 浮雕白框 */
.detail-card {
    padding: 32px clamp(20px, 3vw, 44px) 40px;
}
.detail-card__header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid #cae6fa;
}

.detail-card__title {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--card-text);
    line-height: 1.4;
}

.detail-card__meta {
    margin-top: 14px;
    font-size: calc(var(--fs-title-p) * 0.6);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.detail-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.detail-card__body {
    font-size: var(--fs-norm);
    color: var(--text-secondary);
    line-height: 1.85;
    padding: 0 2%;
}

.detail-card__body p {
    margin-bottom: 16px;
}

.detail-card__body img {
    max-width: 100%;
    margin: 18px auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(11, 92, 175, 0.16);
    display: block;
    
}

/* 视频型：封面 + 居中播放按钮（与首页栏目4一致） */
.detail-card__video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 24px rgba(11, 92, 175, 0.2);
}

/* 视频封面图：绝对铺满 */
#videoPoster,
.detail-card__video-wrap > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

/* 视频消息遮罩 */
.detail-card__video-msg {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.78);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    text-align: center;
    padding: 0 20px;
}
.detail-card__video-msg-icon { font-size: 64px; margin-bottom: 12px; }
.detail-card__video-msg-text { font-size: var(--fs-norm); opacity: 0.9; }

/* 视频型详情卡片：返回按钮（底部居中） */
.detail-back--center {
    align-self: center;
    margin: 0;
}

.detail-card__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-card__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;z-index: 2;
    outline: none;
    border: none;
}

.detail-card__play-btn {
    width: clamp(64px, 14.28%, 248px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);

}

.detail-card__play-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.4);
}

.detail-card__play-btn::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background-image: url(./topic-tech-tour-guide-v2-icon-play-lg.png);
    background-size: 100% 100%;
}

/* ====================================================================
   栏目布局
   ==================================================================== */

/* ---- 栏目1：漫游科学城 大视频+2小卡 ---- */
.col__title {
    width: 100%;
    aspect-ratio: 1680 / 270;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col_footer {
    width: 100%;
    aspect-ratio: 1680 / 80;
    display: flex;
    align-items: end;
    justify-content: end;
}
.col_footer a {
    width: 7.14%;
    aspect-ratio: 983 /476;
}
.col_footer img {
    width: 100%;
}
.col1 {
    position: relative;
    background: transparent;
    padding-top: 28px;
}

.col1__wrap {
    width: 100%;
}

.col1__title {
    width: 30%;
}

.col1__layout {
    display: flex;
    width: 100%;
    aspect-ratio: 1680 / 755;
    align-items: center;
    justify-content: space-between;
    align-items: stretch;
}

.col1__main {
    width: 53.75%;
    aspect-ratio: 903 / 755;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #b3defb;
    border: var(--w-bd) solid #b3defb;
    aspect-ratio: 16/10;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(11, 92, 175, 0.2);
}

.col1__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
    position: relative;
    z-index: 0;
}

.col1__main:hover img {
    transform: scale(1.04);
}
.col1__main::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    transition: var(--tr);
    z-index: 1;
    pointer-events: none;
}
.col1__main:hover::before {
    opacity: 0;
}

.col1__main-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.col1__main-cap {
    position: absolute;
    left: var(--w-bd);
    right: var(--w-bd);
    bottom: var(--w-bd);
    padding: 5.0% 5.0%;
    background: none;
    color: var(--text-light);
}

.col1__main-title {
    font-size: var(--fs-title);
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}

.col1__main-desc {
    font-size: var(--fs-title-p);
    opacity: 0.92;
}

.col1__main-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.col1__main-play-btn {
    width: 16%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.0);;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.25s;
    container-type: inline-size;
}

.col1__main-play-btn:hover {
    transform: scale(1.08);
    background: rgba(0, 0, 0, 0.4);
}

.col1__main-play-btn::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 44cqw solid #fff;
    border-top: 28cqw solid transparent;
    border-bottom: 28cqw solid transparent;
    margin-left: 12cqw;
}

.col1__card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: end;
    pointer-events: none;
    z-index: 2;
    padding: 4% 4%;
}
.col1__card-play-btn {
    width: 11.9%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.0);;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.25s;
    container-type: inline-size;
}
.col1__card-play-btn:hover {
    transform: scale(1.08);
    background: rgba(0, 0, 0, 0.4);
}

.col1__card-play-btn::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 44cqw solid #fff;
    border-top: 28cqw solid transparent;
    border-bottom: 28cqw solid transparent;
    margin-left: 12cqw;
}

.col1__side {
    width: 43.98%;
    aspect-ratio: 739 / 755;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.col1__card {
    position: relative;
    width: 100%;
    aspect-ratio: 739 / 360;
    display: flex;
    overflow: hidden;
    
}
.col1__card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: var(--w-bd) solid #b3defb;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(11, 92, 175, 0.12);
}
.col1__card__inner::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    transition: var(--tr);
    z-index: 1;
    pointer-events: none;
}
.col1__card:hover .col1__card__inner::before {
    opacity: 0;
}


.col1__card-img {
    width: 100%;
    height: 100%;
    min-width: 0;
}

.col1__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.col1__card:hover .col1__card-img img {
    transform: scale(1.06);
}

.col1__card-body {
    position: absolute;
    left: var(--w-bd);
    right: var(--w-bd);
    bottom: var(--w-bd);
    padding: 5.0% 5.0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    color: var(--text-light);
}

.col1__card-title {
    font-size: var(--fs-title);
    font-weight: bold;
    margin-bottom: 4px;
    line-height: 1.3;
}

.col1__card-desc {
    font-size: var(--fs-title-p);
    font-weight: 500;
}

/* ---- 栏目2：逛馆冷知识 ---- */
.col2 {
    padding: 60px 0 40px;
}

.col2__wrap {
    position: relative;
    /*background: linear-gradient(180deg, #b8e3fd 0%, #cfeafd 100%);*/
    border-radius: 24px;
    /*padding: 40px 16px 60px;*/
    overflow: hidden;
}

.col2__title {
    display: block;
    margin: 0 auto 30px;
    width: clamp(180px, 26vw, 380px);
    height: auto;
}
.col2__stage__wrap {
    width: 100%;
    aspect-ratio: 1680 / 770;
    position: relative;
}

/* ---- 栏目3：特色宝藏局 ---- */
.col3 {
    padding: 30px 0;
}

.col3__wrap {
    position: relative;
    border-radius: 24px;
    /*background: linear-gradient(180deg, #cfeafd 0%, #b8e3fd 100%);
    /*padding: 40px 16px 60px;*/
    overflow: hidden;
}

.col3__title {
    display: block;
    margin: 0 auto 30px;
    width: clamp(180px, 26vw, 380px);
    height: auto;
}

.col3__stage__wrap {
    width: 100%;
    aspect-ratio: 1680 / 730;
    position: relative;
}

/* ---- 栏目4：探秘进行时 ---- */
.col4 {
    position: relative;
    padding: 0;
    min-height: clamp(480px, 60vw, 700px);
    overflow: hidden;
}

.col4__bg {
    position: absolute;
    inset: 0;
    background-image: url('./topic-tech-tour-guide-v2-bg-page-1.jpg');
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.col4__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 92, 175, 0.18);
}

.col4__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding: 40px 16px 60px;*/
}

.col4__title {
    display: block;
    margin: 0 auto 26px;
    width: clamp(180px, 26vw, 380px);
    height: auto;
}
.col4__viewport__wrap {
    width: 100%;
    aspect-ratio: 1680 / 817;
}

/* ====================================================================
   轮播组件
   ==================================================================== */

/* ---- 3D 旋转木马（栏目2/3 共用） ---- */
.carousel3d__stage {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 14000px;
    perspective-origin: 50% 50%;
    overflow: visible;
}


.carousel3d__track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel3d__item {
    position: absolute;
    left: 25%;
    top: 0;
    width: 50%;
    aspect-ratio: 634 / 708;
    border-radius: calc( var(--w-bd) * 2);
    /*
    border: var(--w-bd) solid #b3defb;
    box-shadow: 0 14px 30px rgba(11, 92, 175, 0.32);
    background: #112;
    */
    transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
.carousel3d__item .carousel3d__item__inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: var(--r-cd);
    border: var(--w-bd) solid #b3defb;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(11, 92, 175, 0.32);
    background: #112;
    transition: var(--tr);
}
.col2__item .carousel3d__item__inner{
    transform: scale(0.8);
    padding: var(--r-cd);
}
.col2__item.show-2-3 .carousel3d__item__inner{
    transform: scale(0.99);
}
.col2__track {
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
}
.col2__track .carousel3d__item {
    position: absolute;
    width: 40.00%;
    left: 30.0%;
    aspect-ratio: 634 / 708;
    padding: 1%;
}
.col2__track .hide,.col2__track .prev,.col2__track .next {
    opacity: 0;
}

.col2__item.show-3-3 {
    transform: rotateY(40deg) translateZ(55cqw) !important;
}
.col2__item.show-1-3 {
    transform: rotateY(-40deg) translateZ(55cqw) !important;
}


.carousel3d__item__inner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scaleX(1.15);
}

/* 3D 状态类（JS inline 控制 opacity/filter/z-index，此处为兜底+增强） */
.carousel3d__item.active .carousel3d__item__inner {
    box-shadow: 0 18px 40px rgba(11, 92, 175, 0.4);
}

.carousel3d__item.prev,
.carousel3d__item.next {
    opacity: 0.55;
    z-index: 1;
    filter: blur(2px);
}

.carousel3d__item.hide {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.carousel3d__item-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--r-cd);
    color: #fff;
    font-size: var(--fs-title-p);
    font-weight: 500;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}

.col2__item-cap.carousel3d__item-cap {
    top: 0px;
    display: flex;
    flex-direction: column;
}

.col2__item-cap .title {
    
    font-size: calc(var(--fs-title) * 1.25);
    font-weight: bold;
}
.col2__item-cap .desc {
    font-size: calc(var(--fs-title-p) * 1.2);
    font-weight: 500;
}


.carousel3d__ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: var(--c-icon);
    border: none;
    cursor: pointer;
    width: clamp(20px, 3.33%, 60px);
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(11, 92, 175, 0.18);
    transition: all 0.25s;
}
.carousel3d__ctrl > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel3d__ctrl--prev > div{
    transform: rotate(180deg);
}
.carousel3d__ctrl .arrow {
    display: block;
    width: 50%;
    height: 50%;
    --c: #ffffff;
    transition: var(--tr);
}
.carousel3d__ctrl:hover .arrow{
    transform: scale(1.1);
}
.carousel3d__ctrl:hover {
    /*transform: translateY(-50%) scale(1.1);*/
    box-shadow: 0 6px 18px rgba(11, 92, 175, 0.35);
}

.carousel3d__ctrl svg {
    width: 22px;
    height: 22px;
}

.carousel3d__ctrl--prev {
    left: 6px;
}

.carousel3d__ctrl--next {
    right: 6px;
}

.col3__track {
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
}
.col3__track .carousel3d__item {
    position: absolute;
    width: 66.10%;
    left: 16.95%;
    aspect-ratio: 1109 / 705;
    padding: 1%;
}
.col3__item.show-1-3 {
    transform: rotateY(-5deg) translateZ(20cqw) scale(0.75) translateX(-50%) !important;
}
.col3__item.show-3-3 {
    transform: rotateY(5deg) translateZ(20cqw) scale(0.75) translateX(50%)!important;
}
.col3__item-cap .title {
    font-size: var(--fs-title);
    font-weight: bold;
}


/* 栏目2/3 复用 3D 轮播组件（HTML 中 col2__* / col3__* 搭配 carousel3d__* 双类名） */

/* ---- 多卡轮播（栏目4） ---- */
.col4__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
}

.col4__viewport img,
.col4__viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.col4__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.col4__slide {
    border-radius: var(--r-cd);
    overflow: hidden;
    padding: 1%;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background: #112;
    border: var(--w-bd) solid #b3defb;
    */
}

/* 内层容器：统一承载图片/文本/按钮，便于整体控制圆角/裁剪/悬浮效果 */
.col4__slide__inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: var(--r-cd);
    border: var(--w-bd) solid #bcadf8;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(11, 92, 175, 0.32);
    background: #112;
    transition: var(--tr);
}

/* 多卡轮播状态类（JS inline 控制 left/top/width/height/opacity，此处为兜底+增强） */
.col4__slide.active .col4__slide__inner {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.col4__slide.active-1-1 {
    width: 84.04%;
    aspect-ratio: 1412 / 817;
}
.col4__slide.prev,
.col4__slide.next {
    box-shadow: none;
    opacity: 0;
}

.col4__slide.hide {
    box-shadow: none;
}

/* ====================================================================
   栏目进入视口动画：内容卡片从右到左滑入（仅播放一次）
   ==================================================================== */
@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 初始态：进入视口前隐藏 */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
}

/* 三种进入方向，初始位移不同 */
.reveal--right { transform: translateX(80px); }
.reveal--up    { transform: translateY(60px); }
.reveal--scale { transform: scale(0.85); }

/* 进入视口：播放一次动画，按 --i 依次错开（每步 +0.12s） */
.reveal.in {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.reveal--right.in { animation-name: slideInFromRight; }
.reveal--up.in    { animation-name: slideInFromUp; }
.reveal--scale.in { animation-name: revealScaleIn; }

@keyframes slideInFromUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes revealScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* slide 内容 */
.col4__slide-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.9% 2.9%;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.col4__slide-cap-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col4__slide.active .col4__slide-cap-title {
    font-size: var(--fs-title);
}

.col4__slide img,
.col4__slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.col4__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    border: none;
}

.col4__play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}

.col4__play:hover .col4__play-btn {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.36);
}

.col4__play-btn::before {
    /*
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
    */
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(./topic-tech-tour-guide-v2-icon-play-lg.png);
    background-size: 100% 100%;
}

.col4__slide.active .col4__play-btn {
    width: 13.45%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-width: 50%;
}

.col4__slide.active .col4__play-btn::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(./topic-tech-tour-guide-v2-icon-play-lg.png);
    background-size: 100% 100%;
    /*
    border-left-width: 18px;
    border-top-width: 12px;
    border-bottom-width: 12px;
    margin-left: 5px;*/
}

.col4__ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: var(--c-icon);
    border: none;
    cursor: pointer;
    width: clamp(20px, 3.33%, 60px);
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(11, 92, 175, 0.18);
    transition: all 0.25s;
}
.col4__ctrl > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col4__ctrl--prev > div{
    transform: rotate(180deg);
}
.col4__ctrl .arrow {
    display: block;
    width: 50%;
    height: 50%;
    --c: #ffffff;
    transition: var(--tr);
}
.col4__ctrl:hover .arrow{
    transform: scale(1.1);
}

.col4__ctrl:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.col4__ctrl svg {
    width: 20px;
    height: 20px;
}

.col4__ctrl--prev {
    left: 14px;
}

.col4__ctrl--next {
    right: 14px;
}

/* ---- 更多按钮（栏目1/2/4 共用） ---- */
.col__more,
.col2__more,
.col4__more {
    display: inline-block;
    margin: 22px auto 0;
    padding: 0;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: linear-gradient(135deg, #5dadec, #1e90ff);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    font-size: var(--fs-norm);
    box-shadow: 0 4px 12px rgba(11, 92, 175, 0.3);
    transition: all 0.25s;
}

.col__more:hover,
.col2__more:hover,
.col4__more:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(11, 92, 175, 0.45);
}

.list-section{
    position: relative;
}
.detail-section {
    position: relative;
}
.list-section .page-wrapper::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1680 / 150;
}
.list-section .page-wrapper::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1680 / 90;
}
.detail-section .page-wrapper::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1680 / 150;
}
.detail-section .page-wrapper::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1680 / 90;
}

.detail-back-wrap {
    width: 100%;
    aspect-ratio: 1680 / 90;
    display: flex;
    align-items: center;
}
.detail-back {
    font-size: var(--fs-bk);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1f9bff;
}
.detail-back img {
    width: 1.2em;
    aspect-ratio: 1 / 1;
    margin-right: 0.2em;
    filter: invert(55%) sepia(60%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(95%);
}
.detail-card--text {
    border-radius: var(--radius-lg);
    padding: 6.54% 4.166% ;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}
.detail-video-back {
    display: none;
}
/* ====================================================================
   7断点响应式
   ==================================================================== */

/* 字体缩放 */

@media screen and (min-width: 1281px) and (max-width: 1680px) {
    :root {
        --fs-hero: 18px;
        --fs-title: 20px;
        --fs-title-p: 17px;
        --fs-list-t: 28px;
        --fs-list-p: 17px;
        --fs-list-s: 14px;
        --fs-big: 48px;
        --fs-mid: 30px;
        --fs-norm: 22px;
        --fs-sm: 18px;
        --fs-xs: 14px;
        --fs-foot: 14px;
        --fs-bk: 24px;
        --w: 1200px;
        --w-bd: 11px;
        --gap-md: 12px;
        --gap-lg: 17px;
        --r-cd: 40px;
        --radius-md: 24px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    :root {
        --fs-hero: 15px;
        --fs-title: 16px;
        --fs-title-p: 14px;
        --fs-list-t: 23px;
        --fs-list-p: 14px;
        --fs-list-s: 12px;
        --fs-big: 40px;
        --fs-mid: 26px;
        --fs-norm: 18px;
        --fs-sm: 16px;
        --fs-xs: 12px;
        --fs-foot: 12px;
        --fs-bk: 18px;
        --w: 980px;
        --w-bd: 8px;
        --gap-md: 10px;
        --gap-lg: 14px;
        --r-cd: 32px;
        --radius-md: 18px;
    }

}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    :root {
        --fs-hero: 12px;
        --fs-title: 12px;
        --fs-title-p: 11px;
        --fs-list-t: 17px;
        --fs-list-p: 12px;
        --fs-list-s: 9px;
        --fs-big: 32px;
        --fs-mid: 22px;
        --fs-norm: 16px;
        --fs-sm: 14px;
        --fs-xs: 11px;
        --fs-foot: 11px;
        --fs-bk: 14px;
        --w: 720px;
        --w-bd: 6px;
        --r-cd: 26px;
        --gap-md: 8px;
        --gap-lg: 10px;
        --radius-md: 16px;
    }

}


 @media (max-width: 768px) {
    :root {
        --fs-hero: 1.53vw;
        --fs-title: 3.73vw;
        --fs-title-p: 3.2vw;
        --fs-list-t: 3.73vw;
        --fs-list-p: 3.2vw;
        --fs-list-s: 3.2vw;
        --fs-big: 22px;
        --fs-mid: 16px;
        --fs-norm: 13px;
        --fs-sm: 11px;
        --fs-xs: 9px;
        --fs-foot: 10px;
        --fs-bk: 14px;
        --w: 94.66%;
        --w-bd: 5px;
        --r-cd: 20px;
        --gap-md: 2px;
        --gap-lg: 4px;
        --radius-md: 14px;
    }
    .hero-title {
        bottom: 8%;
    }
    .col1__title{
        width: 45%;
        padding: 2% 0;
    }
    .col1__layout{
        aspect-ratio: auto;
        flex-direction: column;
    }
    .col1__main {
        width: 100%;
        aspect-ratio: 710 / 408;
    }
    .col1__side{
        width: 100%;
        aspect-ratio: auto;
        flex-direction: row;
    }
    .col1__card {
        width: 49.2%;
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
    }
    .col1__card__inner {
        width: 100%;
        aspect-ratio: 350 / 202;
    }
    .col1__card-body {
        position: relative;
        padding: 5.71% 0;
    }
    .col1__card-title {
        color: #000000;
    }
    .col1__card-desc {
        color: #6a6a6a;
    }
    .col_footer{
        aspect-ratio: 710 / 60;
    }
    .col_footer a {
        width:  14.08%;
    }
    .col2__stage__wrap {
        aspect-ratio: 710 / 330;
    }
    .col2__track .carousel3d__item {
        aspect-ratio: 290 / 325;
    }
    .col2__item.show-3-3 {
    transform: rotateY(40deg) translateZ(60cqw) !important;
    }
    .col2__item.show-1-3 {
        transform: rotateY(-40deg) translateZ(60cqw) !important;
    }

    .col3__stage__wrap {
        aspect-ratio: 710 / 305;
    }
    .col3__track .carousel3d__item {
        aspect-ratio: 480 / 305;
        width: 68%;
        left: 16%;
    }
    .col3__item.show-1-3 {
    transform: rotateY(-5deg) translateZ(20cqw) scale(0.75) translateX(-52%) !important;
    }
    .col3__item.show-3-3 {
        transform: rotateY(5deg) translateZ(20cqw) scale(0.75) translateX(52%)!important;
    }
    .col4__viewport__wrap{
        aspect-ratio: 710 / 363;
    }
    .carousel3d__ctrl {
        width: clamp(12px, 4.22%, 36px);
        aspect-ratio: 1 / 1;
    }
    .col4__ctrl {
        width: clamp(12px, 4.22%, 36px);
        aspect-ratio: 1 / 1;
    }
    .section-footer__left, .section-footer__right {
        display: none;
    }
    .list-card {
        aspect-ratio: 710 / 180;
    }
    .list-card__inner {
        gap: 1.33vw;
    }
    .list-card__img {
        width: clamp(80px, 37.6%, 600px);
        aspect-ratio: 264 / 172;
        overflow: hidden;
    }
    .list-card__title{
        height: 25%;
    }
    .list-card__desc{
        flex: unset;
        height: 2.4em;
        overflow: hidden;
        line-height: 1.2;
    }
    .list-card__date {
        height: 22%;
        color: #4272a9;
    }
    .list-card__date-icon {
        display: inline-block;
    }
    .list-card__btn {
        display: none;
    }

    .detail-card__header {
        padding-bottom: 14px;
        margin-bottom: 18px;
    }
    .detail-card__meta {
        gap: 6px;
    }
    .detail-card__body p {
        margin-bottom: 12px;
    }
.detail-card__video-wrap {
        border-radius: 0;
    }
    .detail-back {
        margin: 0 0 14px;
    }
    .detail-back--center {
        margin: 0 auto;
    }
    .detail-back-wrap {
        display: none;
    }
    .detail-video-back {
        display: block;
        aspect-ratio: 1680 / 50;
        margin-top: 2.11%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width: 1600px) {
    .page-bg {
        padding-bottom: 0;
    }
    .page-bg::before {
        display: none;
    }
}

@media (min-width: 1920px) {
    .page-bg {
        padding-bottom: 0;
    }
    .page-bg::before {
        display: none;
    }
}

/* TRS integration: dynamic content, empty states and CMS media constraints. */
/* The home background is absolutely positioned; do not reserve scroll space below the footer. */
body > .page-bg {
  padding-bottom: 0 !important;
  pointer-events: none;
}
/* TRS rewrites literal copyright tokens; draw the visible mark in CSS. */
.section-footer__copyright-mark {
  display: inline-block;
  min-width: 0.72em;
}
.section-footer__copyright-mark::before {
  content: "\00a9";
}
.trs-card-link, .col4__slide-link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.list-card { display: block; width: 100%; color: inherit; text-decoration: none; }
body[data-topic-template="list"] > .section-footer { margin-top: auto; flex: 0 0 auto; }
.list-card__date { min-width: 0; padding-right: clamp(152px, 12.6vw, 202px); }
.list-card__date-icon { flex: 0 0 auto; }
.list-card__source { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-card__date-value { flex: 0 0 auto; white-space: nowrap; }
.col1__main-cap,
.col1__card-body,
.col3__item-cap.carousel3d__item-cap,
.col4__slide-cap {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 58%, rgba(0, 0, 0, 0) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}
.col2__item-cap.carousel3d__item-cap {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0) 75%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}
@media (min-width: 1681px) {
  .col1__main-title,
  .col1__card-title,
  .col3__item-cap .title,
  .col4__slide.active .col4__slide-cap-title {
    font-size: 32px;
  }
  .col2__item-cap .title {
    font-size: 34px;
  }
  .col1__main-desc,
  .col1__card-desc,
  .col2__item-cap .desc,
  .col3__item-cap .desc {
    font-size: 20px;
  }
}
.trs-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trs-list-heading { margin: 0 auto 24px; color: var(--primary-dark, #1f6fc5); font-size: clamp(24px, 3vw, 48px); line-height: 1.25; text-align: center; }
.trs-empty { margin: 0; padding: 56px 16px; color: var(--text-secondary, #4272a9); font-size: var(--fs-norm, 20px); text-align: center; }
.detail-card__title { font-size: 42px !important; line-height: 1.35; }
.detail-card__meta { font-size: 18px !important; }
.detail-trs-body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
.detail-card__video-wrap {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  margin: 0 0 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.detail-card__video-wrap .detail-card__video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  box-sizing: border-box !important;
}
.detail-card__video-msg[hidden] { display: none !important; }
.detail-trs-body img,
.detail-trs-body video,
.detail-trs-body iframe,
.detail-trs-body table,
.detail-trs-body pre,
.detail-trs-body code {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.detail-trs-body img {
  width: auto !important;
  height: auto !important;
  display: block;
}
.detail-trs-body video,
.detail-trs-body iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
}
.detail-trs-body table { table-layout: fixed; }
.detail-trs-body pre,
.detail-trs-body code { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-trs-body :where(p, section, div):not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout])[style*="background" i][style*="#fff" i],
.detail-trs-body :where(p, section, div):not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout])[style*="background" i][style*="white" i],
.detail-trs-body :where(p, section, div):not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout])[style*="background" i][style*="rgb(255" i],
.detail-trs-body p:not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) span[style*="background:#fff"],
.detail-trs-body p:not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) span[style*="background-color:#fff"],
.detail-trs-body p:not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) font[style*="background:#fff"],
.detail-trs-body p:not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) font[style*="background-color:#fff"],
.detail-trs-body :where(p, section, div):not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) :where(span, font)[style*="background" i][style*="#fff" i],
.detail-trs-body :where(p, section, div):not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) :where(span, font)[style*="background" i][style*="white" i],
.detail-trs-body :where(p, section, div):not(.callout):not(.notice):not(.tip):not(.highlight):not(.warning):not(.quote):not([class*="callout"]):not([class*="notice"]):not([class*="tip"]):not([class*="highlight"]):not([data-callout]) :where(span, font)[style*="background" i][style*="rgb(255" i] {
  background: transparent !important;
  background-color: transparent !important;
}
.col4__play, .col4__play-btn { pointer-events: none !important; }
.detail-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; margin: 28px auto 0; }
.trs-css-background-asset-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.paginator[hidden] { display: none !important; }
.paginator .page-btn { text-decoration: none; }
[data-trs-section][hidden], [hidden] { display: none !important; }
@media (min-width: 769px) and (max-width: 1024px) {
  .detail-card__title { font-size: 34px !important; }
  .detail-card__meta { font-size: 16px !important; }
}
@media (max-width: 768px) {
  .trs-list-heading { margin-bottom: 16px; font-size: 28px; }
  .detail-card__title { font-size: 26px !important; }
  .detail-card__meta { font-size: 14px !important; gap: 8px; }
  .detail-card__body { min-width: 0; overflow-x: hidden; }
  .detail-actions { gap: 12px; margin-top: 20px; }
  .list-card__date { padding-right: 0; }
  .list-card__desc.trs-summary { height: 2.8em; max-height: 2.8em; line-height: 1.4; }
  .col1__card-body { background: transparent !important; text-shadow: none; }
  .col2__item-cap .title { font-size: 16px; line-height: 1.35; }
  .col2__item-cap .desc { font-size: 12px; line-height: 1.45; }
}