/* =============================================================
   style41.css
   专题类页面通用样式（variables + 布局 合并版）
   index / list / detail 共用
   -------------------------------------------------------------
   第一部分：响应式尺寸 + 明暗主题变量
   第二部分：通用布局（hero / 容器 / 页脚 / 主题切换 等）
   ============================================================= */

/* =============================================================
   1. 主题色板 + 响应式尺寸变量
   -------------------------------------------------------------
   1) 主题色板：:root(浅色) / [data-theme="dark"](深色)
   2) 响应式尺寸：为 6 档屏幕宽度定义字号与内容宽度
      断点：  <400 | 400-768 | 768-1280 | 1280-1920 | 1920-2560 | 2560<
   ============================================================= */

/* ---------- 主题色板（默认：浅色） ---------- */
:root {
  color-scheme: light;

  /* 背景 / 表面 */
  --c-bg:            #f4f7fb;   /* 页面主背景 */
  --c-surface:       #ffffff;   /* 卡片 / 内容容器背景 */
  --c-surface-alt:   #eef3f9;   /* 次级表面 */
  --section-bg:      #0a7dff;   /* 区块背景 */
  --section-bg-2:    #0177ff;   /* 区块背景 */

  /* 文本 */
  --c-text:          #16202e;   /* 主标题 / 正文主色 */
  --c-text-sub:      #55637a;   /* 次要文本 */
  --c-text-invert:   #ffffff;   /* 反白文本（用于深底/hero） */

  /* 品牌 / 强调 */
  --c-primary:       #1a6fdb;   /* 科协主蓝 */
  --c-primary-weak:  #4d94ec;
  --c-accent:        #ff8a3c;   /* 点缀橙 */

  /* 边框 / 分隔 */
  --c-border:        #dce4ef;
  --c-divider:       #e8eef6;
  --c-bd-glod:       #f3970e;
  --c-bd-gree:       #08f027;
  --c-bd-blue:       #00c9ff;

  /* 标记 / 标签内容 */
  --c-mark-bg:       #e7f1ff;   /* 标签底色 */
  --c-mark-text:     #1a6fdb;   /* 标签文字 */

  /* 页脚 */
  --c-footer-bg:     #0f1e33;
  --c-footer-text:   #c7d3e6;
  --c-footer-title:  #ffffff;

  /* 阴影 / hero 遮罩 */
  --c-shadow:        rgba(20, 40, 80, .12);
  --hero-overlay:    linear-gradient(180deg, rgba(6,16,32,.15) 0%, rgba(6,16,32,.55) 100%);

  /* 圆角 / 过渡 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --transition: .4s ease;
}

/* ---------- 深色主题 ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:            #0f1420;
  --c-surface:       #1a2233;
  --c-surface-alt:   #222c40;

  --c-text:          #eef3fb;
  --c-text-sub:      #9aa7bd;
  --c-text-invert:   #ffffff;

  --c-primary:       #4a90e2;
  --c-primary-weak:  #6ba8ef;
  --c-accent:        #ffa25c;

  --c-border:        #2a3448;
  --c-divider:       #232d40;

  --c-mark-bg:       #1c2b45;
  --c-mark-text:     #7fb0f0;

  --c-footer-bg:     #060a12;
  --c-footer-text:   #8593a8;
  --c-footer-title:  #e9eef6;

  --c-shadow:        rgba(0, 0, 0, .5);
  --hero-overlay:    linear-gradient(180deg, rgba(2,6,14,.35) 0%, rgba(2,6,14,.75) 100%);
}

/* 跟随系统偏好（用户未手动设置时） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg:            #0f1420;
    --c-surface:       #1a2233;
    --c-surface-alt:   #222c40;
    --c-text:          #eef3fb;
    --c-text-sub:      #9aa7bd;
    --c-text-invert:   #ffffff;
    --c-primary:       #4a90e2;
    --c-primary-weak:  #6ba8ef;
    --c-accent:        #ffa25c;
    --c-border:        #2a3448;
    --c-divider:       #232d40;
    --c-mark-bg:       #1c2b45;
    --c-mark-text:     #7fb0f0;
    --c-footer-bg:     #060a12;
    --c-footer-text:   #8593a8;
    --c-footer-title:  #e9eef6;
    --c-shadow:        rgba(0, 0, 0, .5);
    --hero-overlay:    linear-gradient(180deg, rgba(2,6,14,.35) 0%, rgba(2,6,14,.75) 100%);
  }
}

/* =============================================================
   2. 响应式尺寸变量
   字号：--fs-hero(超大标题) / --fs-title(标题) / --fs-subtitle(副标题)
        --fs-body(正文) / --fs-mark(标记/标签)
   宽度：--w-content(中间页面容器) / --w-footer(页脚内容)
   -------------------------------------------------------------
   默认档 = 最小屏（<400），随后用 min-width 逐档增大
   ============================================================= */

/* ---- 档位 1：<400（超小屏 / 小手机） ---- */
:root {
  --fs-hero:     28px;
  --fs-title:    16px;
  --fs-subtitle: 14px;
  --fs-body:     12px;
  --fs-mark:     10px;
  --chamfer:     10px;

  /* 宽度：<768 时按视口减边距，>=768 起用具体/百分比值（见各档位） */
  --w-content:   94%;   /* <768：100% - 40px */
  --w-footer:    calc(100% - 20px);   /* <768：100% - 20px */

  --sec-gap:     32px;   /* 区块纵向间距 */
  --bd-h-warp:   calc(20% + 2px);
  --bd-h:        calc(20% );
}

/* ---- 档位 2：400 – 768（手机 / 大屏手机） ---- */
@media (min-width: 400px) {
  :root {
    --fs-hero:     36px;
    --fs-title:    16px;
    --fs-subtitle: 14px;
    --fs-body:     12px;
    --fs-mark:     10px;
    --chamfer:     15px;

    --w-content:   94%;
    --w-footer:    calc(100% - 20px); 

    --sec-gap:     20px;
  }
}

/* ---- 档位 3：768 – 1280（平板 / 小笔记本） ---- */
@media (min-width: 768px) {
  :root {
    --fs-hero:     48px;
    --fs-title:    20px;
    --fs-subtitle: 16px;
    --fs-body:     14px;
    --fs-mark:     12px;
    --chamfer:     20px;

    --w-content:   94%;                /* >=768：80% */
    --w-footer:    calc(100% - 20px);    /* >=768：100% - 40px */

    --sec-gap:     30px;
  }
}

/* ---- 档位 4：1280 – 1920（桌面显示器） ---- */
@media (min-width: 1280px) {
  :root {
    --fs-hero:     60px;
    --fs-title:    28px;
    --fs-subtitle: 18px;
    --fs-body:     16px;
    --fs-mark:     12px;
    --chamfer:     25px;

    --w-content:   980px;     /* >=1280：980px */
    --w-footer:    1060px;    /* >=1280：1060px */

    --sec-gap:     40px;
  }
}

/* ---- 档位 4.5：>=1600（大桌面） ---- */
@media (min-width: 1600px) {
  :root {
    --fs-title:    28px;
    --fs-subtitle: 22px;
    --fs-body:     16px;
    --fs-mark:     14px;
    --chamfer:     30px;

    --w-content:   1280px;    /* >=1600：1280px */
    --w-footer:    1400px;    /* >=1600：1400px */
    --sec-gap:     50px;
  }
}

/* ---- 档位 5：>=1920（大屏 / 2K） ---- */
@media (min-width: 1920px) {
  :root {
    --fs-hero:     76px;
    --fs-title:    34px;
    --fs-subtitle: 24px;
    --fs-body:     18px;
    --fs-mark:     14px;
    --chamfer:     30px;

    --w-content:   1580px;    /* >=1920：1580px */
    --w-footer:    1720px;    /* >=1920：1720px */

    --sec-gap:     50px;
  }
}

/* ---- 档位 6：2560<（超宽 / 4K） ---- */
/* 宽度沿用 1920 档（1580 / 1720），此处仅放大字号 */
@media (min-width: 2560px) {
  :root {
    --fs-hero:     96px;
    --fs-title:    64px;
    --fs-subtitle: 32px;
    --fs-body:     24px;
    --fs-mark:     16px;
    --chamfer:     35px;

    --sec-gap:     60px;
  }
}

/* =============================================================
   3. 通用布局样式
   结构：全屏 hero  →  居中页面容器(中间内容)  →  全屏页脚(内容居中)
   ============================================================= */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: sans-serif,"Microsoft YaHei", "Source Han Sans CN", "PingFang SC", system-ui ;
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-bg);
  transition: background var(--transition), color var(--transition);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

h1, h2, h3, p { margin: 0; }

/* ---------- 通用文字层级（绑定响应式变量） ---------- */
.t-hero      { font-size: var(--fs-hero);     font-weight: 800; line-height: 1.15; }
.t-title     { font-size: var(--fs-title);    font-weight: 700; line-height: 1.25; color: var(--c-text); }
.t-subtitle  { font-size: var(--fs-subtitle); font-weight: 600; line-height: 1.4;  color: var(--c-text); }
.t-body      { font-size: var(--fs-body);     color: var(--c-text-sub); }

/* 标记 / 标签内容 */
.mark {
  display: inline-block;
  font-size: var(--fs-mark);
  font-weight: 600;
  line-height: 1.6;
  padding: .25em .9em;
  border-radius: 999px;
  color: var(--c-mark-text);
  background: var(--c-mark-bg);
}
.pr {position: relative;}
.pa {position: absolute;}
.t0 {top: 0;}
.l0 {left: 0;}
.r0 {right: 0;}
.b0 {bottom: 0;}
.flec { display: flex;align-items: center;justify-content: center;}
.flex1 {  flex: 1;}
.flex2 {  flex: 2;}
.flex3 {  flex: 3;}
.w100 { width: 100%;}
.w200 { width: 200px;}
.w12 { width: 12.5%;}
.w20 { width: 20px;}
.w24 { width: 24px;}
.w30 { width: 30px;}
.w40 { width: 40px;}
.h100 { height: 100%;}
.wh100 { width: 100%; height: 100%;}
.center {text-align: center;}
.bd2t {
  border: 2px solid transparent;
}
.rotateY{transform: rotateY(180deg);}
.w4 {width: 4px;}
.h40{height: 40px;}
.disn{display: none;}

.z1{z-index: 1;}
.z2{z-index: 2;}
.bg-ac{ background-color: var(--c-accent);}
.bg-bd{ background-color: var(--c-bd-glod);}
.bg-bl{ background-color: var(--c-bd-blue);}
.bg-sg{ background-color: var(--section-bg);}
.bg-sg2{ background-color: var(--section-bg-2);}
.scale1px{ top: -1px;right: -1px;bottom: -1px;left: -1px}
.scale2px{ top: -2px;right: -2px;bottom: -2px;left: -2px}
.scale_1px{ top: 1px;right: 1px;bottom: 1px;left: 1px}
.scale_2px{ top: 2px;right: 2px;bottom: 2px;left: 2px}
.scale_3px{ top: 3px;right: 3px;bottom: 3px;left: 3px}
.scale_4px{ top: 4px;right: 4px;bottom: 4px;left: 4px}
.scale_6px{ top: 6px;right: 6px;bottom: 6px;left: 6px}
.scale_0px{ top: 0px;right: 0px;bottom: 0px;left: 0px}
.h1 {height: 1px;}
.h2 {height: 2px;}
.h4 {height: 4px;}
.w1 {width: 1px;}
.w2 {width: 2px;}
.w4 {width: 4px;}
.aspect1 { aspect-ratio: 1; }
.pd0 {padding: 0;}
.bgf {background-color: white;}
.bgb {background-color: #0256fd;}

.skewrw {
  display: flex;
  width: 6px;height: 40px;transform: skewX(-30deg);
}
.skewr {width: 6px;height: 30px;transform: skewX(-30deg);margin-right: 6px;}
/* =============================================================
   3.1 顶部全屏 HERO
   ============================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after {                       /* 遮罩，保证文字可读 */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: var(--w-content);
  max-width: var(--w-content);
  color: var(--c-text-invert);
  padding: 0 16px;
}
.hero__eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: var(--fs-mark);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hero .t-hero { color: var(--c-text-invert); }
.hero-desc-inner {
  padding-bottom: 15px;
}
@media (max-width: 768px) {
  .hero-desc-inner {
    padding-bottom: 0;
  }
}
.hero__desc {
  font-size: var(--fs-body);
  font-weight: 400;
  color: rgba(255,255,255,.9);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,.8);
  font-size: var(--fs-mark);
  letter-spacing: .2em;
  animation: heroBounce 2s ease-in-out infinite;
}
@keyframes heroBounce {
  0%, 100% { transform: translate(-50%, 0); opacity: .6; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* =============================================================
   3.1b 固定比例(1920:1090) hero 容器（index 专用）
   整个 header = 固定比例容器
   内部 = 占满容器的图文元素 + 左上角图标快速导航栏
   ============================================================= */
.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1090;   /* 固定比例 */
  overflow: hidden;
}
@media (max-width: 768px) {
  .hero-banner {
    aspect-ratio: 750 / 920;
  }
}

/* 占满容器的图文元素 */
.hero-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 移动端专用图片：默认隐藏，<=768px 时显示 */
.hero-banner__img-m {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
@media (max-width: 768px) {
  .hero-banner__img { display: none; }
  .hero-banner__img-m { display: block; }
}
.hero-banner__content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: var(--w-content);
  max-width: var(--w-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px;
  color: var(--c-text-invert);
}

/* 左上角图标快速导航栏（无边框/无背景，仅图标） */
.hero-banner__quicknav {
  position: absolute;
  top: clamp(16px, 3vw, 40px);
  left: clamp(16px, 3vw, 40px);
  z-index: 5;
  display: none;
  align-items: center;
  gap: clamp(10px, 1.5vw, 20px);
}
.hero-banner__quicknav a {
  display: inline-flex;
  line-height: 0;                 /* 去掉图标下方间隙 */
  transition: var(--transition);
}
.hero-banner__quicknav a:hover {
  opacity: .75;
  transform: translateY(-2px);
}
.hero-banner__quicknav img {
  width: auto;
  height: 4.1vw;                  /* 图标高度 = 视口宽度的 4.1%，自适应屏幕 */
  max-height: 80px;               /* 最大高度 80px */
  min-height: 30px;               /* 最小高度 30px */
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* =============================================================
   3.1c 主导航菜单（header 与 main 之间）
   蓝色背景 + 固定宽高比 1920:100；内容宽 --w-content；链接 space-between
   每个链接 = 底纹图片 + 白色文本图片；激活态文本过滤为深黄色
   ============================================================= */
.nav-menu {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 100;          /* 固定比例容器 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: var(--c-primary);                 /* 蓝色背景兜底 */
}
.nav-menu__inner {
  width: var(--w-content);             /* 内容宽度用 --w-content */
  max-width: var(--w-content);
  display: flex;
  align-items: center;
  justify-content: space-between;      /* 间距由剩余比例自动分配 */
  height: 80%;
}
.nav-menu__item {
  position: relative;
  flex: 0 0 15.2%;                     /* 除第一个外，宽度 15.2% */
  height: 100%;                        /* 与导航 band 等高 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: var(--transition);

  /* 八角形外边距保护 */
  padding: 0 8px;
}
.nav-menu__item:first-child {
  flex-basis: 8.8%;                    /* 首页宽度 8.8% */
}
.nav-menu__item:hover { transform: translateY(-4px); }
.nav-menu__bd {                        /* 底纹图片（来自 nav-index-bd.png） */
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 25%;
}

.nav-menu__text {                      /* 白色文本图片（前景层） */
  position: relative;
  z-index: 2;
  width: auto;
  object-fit: contain;
}
.nav-menu__item:first-child .nav-menu__text{                      /* 白色文本图片（前景层） */
  position: relative;
  z-index: 2;
  height: 50%;
}



/* 悬停链接：浅暖金色过滤 */
.nav-menu__item:hover .nav-menu__text {
  filter: brightness(0) saturate(100%)
          invert(92%) sepia(18%) saturate(1000%)
          hue-rotate(344deg) brightness(112%);
}
/* 激活链接：深暖金色过滤 #fecc6b */
.nav-menu__item[aria-current="page"] .nav-menu__text {
  filter: brightness(0) saturate(100%)
          invert(88%) sepia(28%) saturate(1400%)
          hue-rotate(344deg) brightness(103%);
}

/* 蓝色渐变背景：左上 #379dff → 右下 #1183ff */
.bg-linear-blue {
  background: linear-gradient(135deg, #379dff 0%, #1183ff 100%);
}

/* 屏幕 >768px 时强制隐藏移动端面板和遮罩 */
@media (min-width: 769px) {
  .mobile-nav-toggle,
  .mobile-nav-panel,
  .mobile-nav-overlay,
  .page-title-wrap,
  .page-title-mobile {
    display: none !important;
  }
}

/* =============================================================
   3.2 中间主体：居中页面容器
   宽度 = --w-content（与页脚不同）
   ============================================================= */
.page {                              /* 全宽包裹，用于居中容器 */
  width: 100%;
  background: var(--c-bg);
  padding: var(--sec-gap) 0;
}
/* 三段式内容宽度容器（随屏幕档位自适应） */
.header_container {                   /* 顶部 banner 内文字内容宽度 */
  width: var(--w-content);
  max-width: var(--w-content);
  margin-inline: auto;
}
.body_container {                     /* 中间主体内容宽度（与页脚不同） */
  width: var(--w-content);
  max-width: var(--w-content);
  margin-inline: auto;
}
.footer_container {                   /* 底部页脚内容宽度（更宽） */
  width: var(--w-footer);
  max-width: var(--w-footer);
  margin-inline: auto;
}

/* 区块通用间距 */
.section { margin-bottom: var(--sec-gap); }
.section:last-child { margin-bottom: 0; }

.section__head {
  text-align: center;
  margin-bottom: calc(var(--sec-gap) * .6);
}
.section__head .mark { margin-bottom: 14px; }
.section__head .t-body { margin-top: 12px; max-width: 42em; margin-inline: auto; }

/* 内容卡片 */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px var(--c-shadow);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px var(--c-shadow); }
.card__media { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.card__body { padding: 20px; }
.card__body .t-subtitle { margin: 10px 0 8px; }

/* 网格布局 */
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* 列表行（list 页使用） */
.list { display: flex; flex-direction: column; gap: 20px; }
.list__item {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px var(--c-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.list__item:hover { transform: translateY(-4px); box-shadow: 0 16px 38px var(--c-shadow); }
.list__thumb { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.list__content { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.list__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--c-text-sub); font-size: var(--fs-mark); }

@media (max-width: 640px) {
  .list__item { grid-template-columns: 1fr; }
  .list__thumb { aspect-ratio: 16 / 9; min-height: auto; }
}

/* detail 正文排版 */
.detail-article { 
  background: var(--c-surface);color: var(--c-text-invert);
  position: relative;
  padding: clamp(24px, 4vw, 64px); 
  box-shadow: 0 12px 34px var(--c-shadow); }
.detail-article__meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 18px 0 28px; font-size: var(--fs-mark); }
.detail-article__lead { font-size: var(--fs-subtitle); font-weight: 500; margin-bottom: 24px; }
.detail-article p { margin-bottom: 1.2em;font-size: var(--fs-body); text-indent: 2rem;}
.detail-article h2 { font-size: var(--fs-subtitle); margin: 1.6em 0 .6em; }
.detail-article figure { margin: 28px 0; overflow: hidden; border-radius: var(--radius-md); }
.detail-article figure img { width: 100%; display: block; transition: transform 0.5s ease; }
.detail-article figure:hover img { transform: scale(1.1); }
.detail-article figcaption { margin-top: 10px; text-align: center; font-size: var(--fs-mark); }
.detail-article .title { text-align: center; font-size: var(--fs-title); }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .7em 1.6em;
  border-radius: 10px;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-weak); }
.btn--ghost { background-color: #014ee8;; color: var(--c-text-invert); border-color: var(--c-border); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* =============================================================
   3.3 底部全屏页脚：全宽背景，内容居中
   宽度 = --w-footer（与中间容器不同）
   ============================================================= */
.footer {
  width: 100%;
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding: var(--sec-gap) 0 calc(var(--sec-gap) * .5);
  
  background-color: #014ee8;
}
.footer__inner {
  width: var(--w-footer);          /* 页脚内容宽度，明显宽于中间容器 */
  max-width: var(--w-footer);
  margin: 0 auto;
}
.footer__top {
  display: flex ;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand .t-subtitle { color: var(--c-footer-title); margin-bottom: 12px; }
.footer__col h3 { color: var(--c-footer-title); font-size: var(--fs-body); margin-bottom: 14px; font-weight: 600; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col ul li { display: flex; justify-content: center;flex-wrap: wrap;}
.footer__col a { font-size: var(--fs-body); color: var(--c-text-invert); opacity: 0.8; 
  transition: opacity var(--transition); padding: 0 15px;display: flex;align-items: center; }
.footer__col a:hover { opacity: 1; color: #fff; }
.footer__copyright { display: inline-flex; align-items: center; }
.footer__copyright-mark { display: inline-block; min-width: .72em; }
.footer__copyright-mark::before { content: "\00a9"; }
.footer__bottom {
  padding-top: 22px;
  text-align: center;
  font-size: var(--fs-mark);
  color: var(--c-footer-text);
  opacity: .75;
}
@media (max-width: 768px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* =============================================================
   3.4 顶部导航（透明浮于 hero 之上）
   ============================================================= */
.nav {
  position: absolute;
  top: 0; left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(16px, 4vw, 64px);
  color: #fff;
}
.nav__brand { font-size: var(--fs-subtitle); font-weight: 700; color: #fff; }
.nav__menu { display: flex; gap: clamp(16px, 2vw, 36px); }
.nav__menu a { font-size: var(--fs-body); color: rgba(255,255,255,.9); }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: #fff; font-weight: 600; }
@media (max-width: 640px) { .nav__menu { display: none; } }

/* =============================================================
   3.5 明暗主题切换按钮
   ============================================================= */
.theme-toggle {
  display: none;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--c-shadow);
  transition: var(--transition);
}
.theme-toggle:hover { transform: scale(1.08); color: var(--c-primary); }
.theme-toggle .icon-dark  { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark  { display: inline; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }

/* 面包屑（list / detail 顶部内容区） */
.breadcrumb { display: flex; gap: 8px; align-items: center; 
  font-size: var(--fs-subtitle); color: var(--c-text-invert); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--c-text-invert); }
.breadcrumb span { opacity: .95; }

/* =============================================================
   4. 危险预警栏目板块（index）
   蓝色背景 #2089ff，固定比例 1580:900，四角直线倒角
   标题 20%，内容轮播窗口 1360:660
   ============================================================= */
.section-alert {
  width: 100%;
  padding: var(--sec-gap) 0;
}
.alert-container {
  width: var(--w-content);
  max-width: var(--w-content);
  margin: 0 auto;
  aspect-ratio: 1580 / 900;
  overflow: hidden;
}
.alert-header {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-header__img {
  height: 90%;                  /* 占标题区 60%，即整体约 12% */
  width: auto;
  display: block;
  object-fit: contain;
  transition: filter .4s ease, transform .4s ease;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.alert-header__img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)) brightness(1.15);
}

/* 轮播外框 1280:600 */
.section-content {
  width: 100%;    
  padding: 0 7%;                   /* 1280 / 1580 ≈ 81% */
}
.alert-carousel {
  width: 100%;                  /* 1280 / 1580 ≈ 81% */
  aspect-ratio: 1360 / 660;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* warp 边框层 */
.alert-carousel__wrap {
  width: 94%;
  aspect-ratio: 1280 / 600;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.12),
    0 8px 32px rgba(0,0,0,.3);
  position: relative;
}
.alert-track {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;                   /* 3D 轮播需要 relative 定位 */
  opacity: 0;                           /* 加载前透明 */
  transition: opacity 0.6s ease;        /* fade 渐入 */
  pointer-events: none;
}
.alert-slide {
  position: relative;
}
.alert-slide__visual {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.alert-carousel__hit-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  cursor: pointer;
}
.alert-carousel__hit-link[hidden] {
  display: none;
}
.alert-carousel__hit-link > .alert-slide__btn {
  position: absolute;
  left: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 4vw, 40px);
  z-index: 1;
}
.alert-carousel__hit-link > .alert-slide__btn:hover,
.alert-carousel__hit-link:focus-visible > .alert-slide__btn {
  background: rgba(255,255,255,.3);
  border-color: #fff;
  transform: translateY(-1px);
}
.alert-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.alert-slide__caption {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;                        /* 左侧一半 */
  height: 100%;
  padding: clamp(16px, 4vw, 40px);
  padding-bottom: calc(clamp(16px, 4vw, 40px) + 2.6em + 12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;

  /* 蓝色从左到右渐变透明 */
  background: linear-gradient(to right, rgba(32,137,255,.99) 0%, rgba(32,137,255,.75) 80%, transparent 100%);
  color: #fff;
}
.alert-slide__title {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alert-slide__desc {
  font-size: calc(var(--fs-mark) * 1.2);
  font-weight: 400;
  line-height: 1.6;
  opacity: .9;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alert-slide__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: .45em 1.5em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: var(--fs-mark);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.alert-slide__btn:hover {
  background: rgba(255,255,255,.3);
  border-color: #fff;
}

/* ===== 栏目二：快速处理（橙色主题） ===== */
.section-quick {
  width: 100%;
  padding: var(--sec-gap) 0;
}

/* 轮播指示圆点（右下角） */
.alert-dots {
  position: absolute;
  right: 8%;
  bottom: 10%;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.alert-dots a {
  user-select: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.45);
  transition: var(--transition);
}
.alert-dots a:hover {
  background: rgba(255,255,255,.8);
}
.alert-dots a.active {
  width: 24px;                     /* 激活项加宽 */
  border-radius: 5px;
  background: #ff8c42;             /* 橙色背景 */
}

/* 左右翻页箭头（纯 CSS，可选） */
.alert-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 6%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background-color: transparent;
}
.alert-arrow span {
  transition: var(--transition);
}
.alert-arrow:hover span { background: var(--c-bd-glod); }
.alert-arrow--prev { left: 2%; }
.alert-arrow--next { right: 2%; }

/* =============================================================
   4b. 快速处理栏目板块（index） —— quick-* 独立样式
   橙色主题，复用 alert 结构
   ============================================================= */
.section-quick {
  width: 100%;
  padding: var(--sec-gap) 0;
}
.quick-container {
  width: var(--w-content);
  max-width: var(--w-content);
  margin: 0 auto;
  aspect-ratio: 1580 / 1060;
  overflow: hidden;
}
.quick-header {
  height: 18.8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-header__img {
  height: 90%;
  width: auto;
  display: block;
  object-fit: contain;
  transition: filter .4s ease, transform .4s ease;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.quick-header__img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)) brightness(1.15);
}
.quick-carousel {
  width: 100%;
  aspect-ratio: 1360 / 800;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-carousel__wrap {
  width: 94%;
  aspect-ratio: 1280 / 730;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.12),
    0 8px 32px rgba(0,0,0,.3);
  position: relative;
}
.quick-track {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;                           /* 加载前透明 */
  transition: opacity 0.6s ease;        /* fade 渐入 */
}
.quick-slide { position: relative; }
.quick-slide__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.quick-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(2, 11, 24, .88) 0%, rgba(2, 11, 24, .52) 48%, rgba(2, 11, 24, 0) 100%);
  pointer-events: none;
}
/* 居中播放按钮 */
.quick-slide__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(48px, 6vw, 80px);
  height: clamp(48px, 6vw, 80px);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.quick-slide__play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.quick-slide__play:hover {
  background: rgba(0,0,0,.55);
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
.quick-slide__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  padding: clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  color: #fff;
}
.quick-slide__title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
}
.quick-slide__desc {
  font-size: calc(var(--fs-mark) * 1.2);
  font-weight: 400;
  line-height: 1.6;
  opacity: .9;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quick-slide__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: .45em 1.5em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: var(--fs-mark);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.quick-slide__btn:hover {
  background: rgba(255,255,255,.3);
  border-color: #fff;
}
.quick-dots {
  position: absolute;
  right: 8%;
  bottom: 10%;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.quick-dots a {
  user-select: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.45);
  transition: var(--transition);
}
.quick-dots a:hover { background: rgba(255,255,255,.8); }
.quick-dots a.active {
  width: 24px;
  border-radius: 5px;
  background: #ff8c42;
}
.quick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 6%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background-color: transparent;
}
.quick-arrow span { transition: var(--transition); }
.quick-arrow:hover span { background: var(--c-bd-glod); }
.quick-arrow--prev { left: 2%; }
.quick-arrow--next { right: 2%; }

/* =============================================================
   4c. 隐患排查栏目板块（index） —— check-* 独立样式
   绿色主题，容器 1580:1070，标题 20%，内容 1280:830
   ============================================================= */
.section-check {
  width: 100%;
  padding: var(--sec-gap) 0;
}
.check-container {
  width: var(--w-content);
  max-width: var(--w-content);
  margin: 0 auto;
  aspect-ratio: 1580 / 1070;
  overflow: hidden;
}
.check-container .section-content {
    width: 100%;
    padding: 0 3.1%;
}
.check-header {
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-header__img {
  height: 90%;
  width: auto;
  display: block;
  object-fit: contain;
  transition: filter .4s ease, transform .4s ease;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.check-header__img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)) brightness(1.15);
}
.check-content-wrap {
  width: 100%;
  aspect-ratio: 1450 / 840;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-content {
  width: 96%;
  aspect-ratio: 1400 / 740;
  display: flex;
}
/* 左侧图文 */
.check-featured {
  flex: 0 0 52%;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.check-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, opacity .3s ease;
}
.check-featured__img.zoom {
  transform: scale(1.08);
  opacity: .85;
}
.check-featured__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 24px);
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-featured__title {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.check-featured__desc {
  font-size: calc(var(--fs-mark) * 0.9);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 右侧文章列表 */
.check-list {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: 4%;
}
.check-list__items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.check-list__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(6px, 1vw, 12px) 0;
  transition: var(--transition);
}
.check-list__item:hover { opacity: .8; }
.check-list__item .arrow-right {
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: 6px;
}
/* 每两条记录之间加分隔线 */
.check-list__item:nth-child(-n + 3) {
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.check-list__thumb {
  flex: 0 0 26%;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.check-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.check-list__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.check-list__title {
  font-size: var(--fs-subtitle);
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 右下角 查看更多（脱离文档流） */
.check-list__more {
  position: absolute;
  right: 2%;
  bottom: 10px;
  z-index: 2;
}
.check-list__more a {
  font-size: calc(var(--fs-mark));
  color: rgba(255,255,255,1.0);
  text-decoration: none;
  transition: var(--transition);
}
.check-list__more a:hover { color: #fff; 
}
.check-list__meta {
  font-size: var(--fs-mark);
  color: rgba(255,255,255,.85);
}

/* =============================================================
   4d. 独立箭头样式
   ============================================================= */
.arrow-right {
  display: inline-flex;
  width: 1.2em;
  height: 1.2em;
  background: rgba(255,255,255,1.0);
  clip-path: polygon(
    25% 0%, 75% 50%, 
    25% 100%, 25% calc(100% - 2px),
    calc(75% - 2px) 50%, 25% 2px
    );
  transition: var(--transition);
}
.arrow-right:hover {
  background: #fff;
  transform: translateX(3px);
}

/* 悬停上移 2px */
.hover-up {
  transition: transform var(--transition);
}
.hover-up:hover {
  transform: translateY(-2px);
}



/* 平行四边形边框（斜切 8%） */
.parallelogram {
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
}
/* 平行四边形边框 + 伪元素描边 */
.parallelogram-border {
  position: relative;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
}
.parallelogram-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  background: var(--c-primary);
}

/* 恶魔之眼发光 */
.evil-eye-glow {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ff4400 0%, #cc0000 40%, #440000 100%);
  box-shadow:
    0 0 8px 3px rgba(255,60,0,.8),
    0 0 20px 8px rgba(255,20,0,.5),
    0 0 40px 15px rgba(200,0,0,.3),
    0 0 80px 30px rgba(255,100,0,.15);
}
/* 瞳孔横线 */
.evil-eye-glow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 10%;
  border-radius: 2px;
  background: #000;
}

/* =============================================================
   list 文章列表项（固定比例 1400:420）
   ============================================================= */
.list-page {
  width: 100%;
  padding: var(--sec-gap) 0;
}
.list-container {
  width: var(--w-content);
  max-width: var(--w-content);
  margin: 0 auto;
}
.detail-page {
  width: 100%;
  padding: var(--sec-gap) 0;
}
.detail-container {
  width: var(--w-content);
  max-width: var(--w-content);
  margin: 0 auto;
}
.list-item-wrap {
  margin-top: 2%;
  width: 100%;
  aspect-ratio: 1400 / 420;
  position: relative;
  overflow: hidden;
  background-color: var(--c-bg);
  clip-path: polygon(
    2%   0,     98%   0,       /* 上边 */
    100% 6%,    100%  94%,    /* 右上→右边→右下 */
    98%  100%,  2%    100%,   /* 下边 */
    0    94%,   0     6%      /* 左下→左边→左上 */
  );
}
.list-article {
  top: 1px;right: 1px;bottom: 1px;left: 1px;
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 24px;
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 16px var(--c-shadow);
  transition: var(--transition);
  background-color: var(--section-bg-2);
  clip-path: polygon(
    2%   0,     98%   0,       /* 上边 */
    100% 6%,    100%  94%,    /* 右上→右边→右下 */
    98%  100%,  2%    100%,   /* 下边 */
    0    94%,   0     6%      /* 左下→左边→左上 */
  );
}
.list-article:hover {
  box-shadow: 0 8px 28px var(--c-shadow);
}
.list-article__img {
  position: relative;
  flex: 0 0 42%;
  height: 100%;
  
  overflow: hidden;
  padding: 1%;
}
.list-article__img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.list-article__img:hover img {
  transform: scale(1.1);
}
.list-article__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2% 1%;
}
.list-article__title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--c-text-invert);
  line-height: 1.4;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-article__desc {
  font-size: var(--fs-subtitle);
  color: var(--c-text-invert);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-article__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.list-article__date {
  font-size: calc(var(--fs-body) * 0.85);
  color: var(--c-text-invert);
  opacity: .9;
}
.list-article__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  min-width: 80px;
  aspect-ratio: 4/1;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  font-size: calc(var(--fs-body));
  color: var(--c-text-invert);
  text-decoration: none;
  transition: var(--transition);
}
.list-article__more:hover { opacity: .75; }

/* 跑马灯发光条 */
.marquee-glow-green {
  border-radius: 30px;
  overflow: hidden;
  opacity: 0.8;
}
/* 跑动的亮斑 */
.marquee-glow-green::after {
  content: '';
  position: absolute;
  top: 0; left: -25%;
  width: 40%;
  height: 100%;
  border-radius: 50%;                   /* 椭圆亮斑 */
  background: linear-gradient(90deg, transparent, #01d31d,#8bf799,#01d31d, transparent);
  animation: marquee-scan 2.5s ease-in-out infinite;
}
.marquee-glow-glod {
  border-radius: 30px;
  overflow: hidden;
  opacity: 0.8;
}
.marquee-glow-glod::after {
  content: '';
  position: absolute;
  top: 0; left: -25%;
  width: 40%;
  height: 100%;
  border-radius: 50%;                   /* 椭圆亮斑 */
  background: linear-gradient(90deg, transparent, #ebad37,#f3f9cc,#ebad37, transparent);
  animation: marquee-scan 2.5s ease-in-out infinite;
}
.marquee-glow-blue {
  border-radius: 30px;
  overflow: hidden;
  opacity: 0.8;
}
.marquee-glow-blue::after {
  content: '';
  position: absolute;
  top: 0; left: -25%;
  width: 40%;
  height: 100%;
  border-radius: 50%;                   /* 椭圆亮斑 */
  background: linear-gradient(90deg, transparent, #74d2fd,#b9f7ff,#74d2fd, transparent);
  animation: marquee-scan 2.5s ease-in-out infinite;
}
@keyframes marquee-scan {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* =============================================================
   4e. 安全知识储备栏目（index） —— know-* 独立样式
   青蓝色主题，容器 1580:1070，内容 1360:780，双卡轮播 1280:710
   ============================================================= */
.section-know {
  width: 100%;
  padding: var(--sec-gap) 0;
}
.know-container {
  width: var(--w-content);
  max-width: var(--w-content);
  margin: 0 auto;
  aspect-ratio: 1580 / 1070;
  overflow: hidden;
}
.know-header {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.know-header__img {
  height: 80%;
  width: auto;
  display: block;
  object-fit: contain;
  transition: filter .4s ease, transform .4s ease;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.know-header__img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)) brightness(1.15);
}
.know-content {
  width: 100%;
  padding: 0 7%;
}
/* 轮播外包容器 */
.know-carousel-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1360 / 780;
}
/* 轮播视口 */
.know-carousel {
  width: 94%;
  aspect-ratio: 1280 / 710;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0);
}
.know-track {
  display: flex;
  width: 100%;
  height: 100%;
}
/* 卡片 */
.know-card {
  flex: 0 0 50%;                   /* 每张占 50% 宽（视口同时显示 2 张） */
  height: 100%;
  padding: 0 1.5%;
  position: relative;
}
.know-card-wrap {
  isolation: isolate;
  overflow: hidden;
}
.know-card-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(2, 11, 24, .88) 0%, rgba(2, 11, 24, .52) 48%, rgba(2, 11, 24, 0) 100%);
}
.know-card__inner {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--c-surface);
}
.know-card__frame {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
}
.know-card__img {
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
  display: block;
}
.know-card__body {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: clamp(8px, 1.2vw, 14px);
}
.know-card__title {
  font-size: calc(var(--fs-subtitle) * 1.05);
  font-weight: 600;
  color: var(--c-text-invert);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.know-card__desc {
  font-size: calc(var(--fs-body));
  color: var(--c-text-invert);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.know-card__link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-mark);
  color: var(--c-text-invert);
  text-decoration: none;
  padding: 2px 10px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 6px;
  transition: var(--transition);
}
.know-card__link:hover {
  background: rgba(255,255,255,.2);
  border-color: #fff;
}
/* 左右切换箭头 */
.know-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 6%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background: transparent;
  padding: 0;
}
.know-arrow:hover { background: rgba(0,0,0,.45); }
.know-arrow--prev { left: 2%; }
.know-arrow--next { right: 2%; }


/* =============================================================
   5. 通用工具类：四角 30° 直线倒角
   切角量 3% 宽度，y 按 element 宽高比校正（公式：y% = x% × W/H × tan30°）
   默认按 2:1 宽高比 → y% = 3% × 2 × 0.577 ≈ 3.5%
   使用时根据实际宽高比微调 y 值即可
   ============================================================= */
.chamfer-30 {
  clip-path: polygon(
    3%   0,     97%   0,       /* 上边 */
    100% 3.5%,  100%  96.5%,  /* 右上→右边→右下 */
    97%  100%,  3%    100%,   /* 下边 */
    0    96.5%, 0     3.5%   /* 左下→左边→左上 */
  );
}
.a {opacity: 0;}
.aspect8 {
  aspect-ratio: 240 / 30;
}
.chamfer-tl {
  aspect-ratio: 240 / 30;
  clip-path: polygon(
    12.5%   0,    100%   0,       /* 上边 */
    100%  10%,  13.5%    10.0%,  /* 右上→右边→右下 */
    2.0%  100%, 0%     100%   /* 下边 */
  );
}
.chamfer-tli {
  aspect-ratio: 150 / 100;
  clip-path: polygon(
    75%   0,    100%   0,       /* 上边 */
    25%   100%, 0%     100%
  );
}

/* =============================================================
   5b. 通用工具类：四角 45° 直线倒角
   切角量 3% 宽度，y = x% × W/H × tan45° = x% × W/H
   默认按 2:1 宽高比 → y% = 3% × 2 × 1 = 6%
   ============================================================= */
.chamfer-45 {
  clip-path: polygon(
    3%   0,     97%   0,       /* 上边 */
    100% 6%,    100%  94%,    /* 右上→右边→右下 */
    97%  100%,  3%    100%,   /* 下边 */
    0    94%,   0     6%      /* 左下→左边→左上 */
  );
}
/* =============================================================
   5b. 通用工具类：四角 45° 直线倒角
   切角量 3% 宽度，y = x% × W/H × tan45° = x% × W/H
   默认按 3:1 宽高比 → y% = 3% × 3 × 1 = 9%
   ============================================================= */
.chamfer-45-3-1 {
  clip-path: polygon(
    3%   0,     97%   0,       /* 上边 */
    100% 9%,    100%  91%,    /* 右上→右边→右下 */
    97%  100%,  3%    100%,   /* 下边 */
    0    91%,   0     9%      /* 左下→左边→左上 */
  );
}
.chamfer-45-2 {
  clip-path: polygon(
    2%   0,     98%   0,       /* 上边 */
    100% 4%,    100%  96%,    /* 右上→右边→右下 */
    98%  100%,  2%    100%,   /* 下边 */
    0    96%,   0     4%      /* 左下→左边→左上 */
  );
}
.chamfer-45-3 {
  clip-path: polygon(
    2%   0,     98%   0,       /* 上边 */
    100% 3%,    100%  97%,    /* 右上→右边→右下 */
    98%  100%,  2%    100%,   /* 下边 */
    0    97%,   0     3%      /* 左下→左边→左上 */
  );
}
.chamfer-45-2p {
  clip-path: polygon(
    2%   0,     98%   0,       /* 上边 */
    100% 2%,    100%  98%,    /* 右上→右边→右下 */
    98%  100%,  2%    100%,   /* 下边 */
    0    98%,   0     2%      /* 左下→左边→左上 */
  );
}

/* =============================================================
   5c. chamfer-45 变体：裁剪右下角 1/3 宽 × 3% 高，每角保持突出倒角
   ------------------------------------------------------------
   与 chamfer-45 相比：右下角区域 x∈[66.7%,100%] y∈[97%,100%] 被切掉
   新角 (66.7%,100%) 追加 3%×6% 的 45° 倒角
   ============================================================= */
.chamfer-45-br-cut {
  clip-path: polygon(
    3%    0,      97%   0,      /* 上边 */
    97%   0,      100%  6%,     /* 右上 45° 倒角（突出） */
    100%  6%,     100%  88%,    /* 右边 */
    100%  88%,    97%   94%,    /* 切口右缘 45° 倒角（突出） */
    97%   94%,    66.7% 94%,    /* 沿 y=94% 走到切口角 */
    66.7% 94%,    63.7% 100%,   /* 切口角 45° 倒角（突出） */
    63.7% 100%,   3%    100%,   /* 底部（跳过切口） */
    3%    100%,   0     94%,    /* 左下 45° 倒角（突出） */
    0     94%,    0     6%      /* 左边 → 左上倒角起点 */
  );
}

/* =============================================================
   5d. chamfer-45-br-cut 的 2% 倒角版
   ------------------------------------------------------------
   切角 x=2%, y=4%（2:1 宽高比 45° 校正）
   切口高度 = 倒角 y = 4%，随倒角等比缩放
   五个转角全部 45° 倒角
   ============================================================= */
.chamfer-45-br-cut-2 {
  clip-path: polygon(
    2%    0,      98%   0,      /* 上边 */
    98%   0,      100%  4%,     /* 右上 45° 倒角 */
    100%  4%,     100%  92%,    /* 右边（止于水平线 -4%） */
    100%  92%,    98%   96%,    /* 切口右缘 45° 倒角 */
    98%   96%,    66.7% 96%,    /* 水平线 y=96%（切口上缘） */
    66.7% 96%,    64.7% 100%,   /* 切口角 45° 倒角 */
    64.7% 100%,   2%    100%,   /* 底部（跳过切口） */
    2%    100%,   0     96%,    /* 左下 45° 倒角 */
    0     96%,    0     4%      /* 左边 → 左上倒角起点 */
  );
}
.chamfer-45-br-cut-2-wrap {
  clip-path: polygon(
    2%    0,      10%   0,      
    10%   2px,    50%   2px,     
    50%   0px,    90%   0px,     
    90%   2px,    98%   2px,     
    100%  4%,     100%  92%,     
    98%   96%,    66.7% 96%,
    64.7% calc(100% - 2px),   50.0% calc(100% - 2px),
    50.0% 100%,   10.0% 100%,
    2.0%  100%,   0     96%,
    0%    80%,    2px   80%,
    2px   20%,    0px   20%,
    0%    4%,     2%    0%
  );
}
.chamfer-45-br-cut-2-inner {
  clip-path: polygon(
    2%    6px,    10%   6px, 
    10%   4px,    50%   4px,    
    50%   6px,    90%   6px,   
    90%   4px,    calc( 98%  - 2px)   4px,     
    calc(100% - 2px)  calc( 4%  + 2px),    calc(100% - 2px)  calc( 92% - 2px),  
    calc( 98% - 2px)  calc( 96% - 2px),    66.6% calc( 96% - 2px),  
    64.6% calc(100% - 4px),   50.0% calc(100% - 4px),
    50.0% calc(100% - 6px),   10.0% calc(100% - 6px),
    calc( 2%  + 2px) calc(100% - 6px), 6px calc( 96% - 2px),
    6px   80%,    4px   80%,
    4px   20%,    6px   20%,
    6px   4%,     2%    6px,
    10%   6px
  );
}

/* =============================================================
   5e. 仅左上角 2% 倒角（其余三角直角）
   用于 ::before / ::after 叠加，与全角倒角样式配合
   形成左上角边框双倍加粗效果
   ============================================================= */
.chamfer-tl-2 {
  clip-path: polygon(
    2%   0,       /* 上边左端（倒角） */
    100% 0,       /* 右上直角 */
    100% 100%,    /* 右下直角 */
    0    100%,    /* 左下直角 */
    0    4%       /* 左边上端（倒角） */
  );
}

/* =============================================================
   5f. chamfer-45-br-cut 固定 20px 倒角版
   所有转角切角深 20px，使用 calc 混合 px 与 %
   切口位置 66.7%（1/3 宽度处）
   ============================================================= */
.chamfer-45-br-cut-20 {
  clip-path: polygon(
    20px                     0,                          /* 上边左 */
    calc(100% - 20px)        0,                          /* 上边右 */
    100%                     20px,                       /* 右上倒角 */
    100%                     calc(100% - 40px),          /* 右边（水平线上方 20px） */
    calc(100% - 20px)        calc(100% - 20px),          /* 切口右缘倒角（20px 45°） */
    66.7%                    calc(100% - 20px),          /* 水平线 y=100%-20px */
    calc(66.7% - 20px)       100%,                       /* 切口角倒角（20px 45°） */
    20px                     100%,                       /* 底部左 */
    0                        calc(100% - 20px),          /* 左下倒角 */
    0                        20px                        /* 左边 */
  );
}



/* =============================================================
   6. 4 顶点箭头：尖角 60° + V 形尾 120°
   ------------------------------------------------------------
   顶点 ①②③ 外凸 ≈60°，顶点 ①④③ 内凹 ≈120°
   4 点闭合，顺时针：①上肩→②尖端→③下肩→④尾切口
   ============================================================= */
.arrow-4pt {
  clip-path: polygon(
    75%  15%,     /* ① 上 */
    50%  50%,     /* ② 右（内角≈207°，深凹） */
    75%  85%,     /* ③ 下 */
    20%   50%      /* ④ 左（外侧≈60°） */
  );
}
/* 镜像：箭头指向左侧 */
.arrow-4pt-mirror {
  clip-path: polygon(
    25%  15%,     /* ① 上（75→25 水平翻转） */
    50%  50%,     /* ② 右→左（50→50 居中不变） */
    25%  85%,     /* ③ 下（75→25） */
    80%  50%      /* ④ 左→右（20→80，尖端在左侧） */
  );
}
.carousel-transition-1 {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chamfer-45-br-cut-30-wrap {
  clip-path: polygon(
    var(--chamfer)   0,      10%   0,      
    10%    1px,    50%   1px,     
    50%    0px,    90%   0px,     
    90%    1px,    calc(100% - var(--chamfer)) 1px,     
    100%   calc(var(--chamfer) + 1px),   100%  calc(100% - var(--chamfer) * 2.0),     
    calc(100% - var(--chamfer) - 1px)    calc(100% - var(--chamfer) - 1px),    66.7% calc(100% - var(--chamfer) - 1px),
    calc(66.7% - var(--chamfer) - 1px)   calc(100% - 1px),   50.0% calc(100% - 1px),
    50.0%  100%,   10.0% 100%,
    var(--chamfer)   100%,   0     calc(100% - var(--chamfer) - 1px),
    0%     80%,    1px   80%,
    1px    20%,    0     20%,
    0%     calc(var(--chamfer) + 1px),   calc(var(--chamfer) + 1px)  0%
  );
}
.chamfer-45-br-cut-30-inner {
  clip-path: polygon(
    var(--chamfer)  3px,    10%   3px, 
    10%   2px,    50%   2px,    
    50%   3px,    90%   3px,   
    90%   2px,    calc(100% - var(--chamfer) - 1px)   2px,     
    calc(100% - 1px)  calc(var(--chamfer) + 2px),    calc(100% - 1px)  calc(100% - var(--chamfer) * 2.0 - 2px),  
    calc(100% - var(--chamfer) - 2px) calc(100% - var(--chamfer) - 2px),   66.6% calc(100% - var(--chamfer) - 2px),  
    calc(66.6% - var(--chamfer) - 1px) calc(100% - 2px),   50.0% calc(100% - 2px),
    50.0% calc(100% - 3px),   10.0% calc(100% - 3px),
    calc(var(--chamfer) + 2px)  calc(100% - 3px),   3px calc(100% - var(--chamfer) - 2px),
    3px   80%,    2px   80%,
    2px   20%,    3px   20%,
    3px   calc(var(--chamfer) + 2px),   calc(var(--chamfer) + 2px)  3px,
    10%   3px
  );
}
.chamfer-45-br-cut-30 {
  clip-path: polygon(
    var(--chamfer)    0,      calc(100% - var(--chamfer))   0,      /* 上边 */
    100%  var(--chamfer),     /* 右上 45° 倒角 */
    100%  calc(100% - var(--chamfer) * 2.0),    /* 右边（止于水平线 -4%） */
    calc(100% - var(--chamfer))   calc(100% - var(--chamfer)),    /* 切口右缘 45° 倒角 */
    66.7% calc(100% - var(--chamfer)),    /* 水平线 y=96%（切口上缘） */
    calc(66.7% - var(--chamfer)) 100%,   /* 切口角 45° 倒角 */
    var(--chamfer)    100%,   /* 底部（跳过切口） */
    0     calc(100% - var(--chamfer)),    /* 左下 45° 倒角 */
    0     var(--chamfer)      /* 左边 → 左上倒角起点 */
  );
}
.chamfer-45-30 {
  clip-path: polygon(
    var(--chamfer)   0,     calc(100% - var(--chamfer))   0,       /* 上边 */
    100% var(--chamfer),    100%  calc(100% - var(--chamfer)),    /* 右上→右边→右下 */
    calc(100% - var(--chamfer))  100%,  var(--chamfer)    100%,   /* 下边 */
    0    calc(100% - var(--chamfer)),   0     var(--chamfer)      /* 左下→左边→左上 */
  );
}
.chamfer-45-28 {
  clip-path: polygon(
    calc(var(--chamfer) - 1px)   0,     calc(100% - var(--chamfer) + 1px)   0,       /* 上边 */
    100% calc(var(--chamfer) - 1px),    100%  calc(100% - var(--chamfer) + 1px),    /* 右上→右边→右下 */
    calc(100% - var(--chamfer))  100%,  calc(var(--chamfer) - 1px)    100%,   /* 下边 */
    0    calc(100% - var(--chamfer) + 1px),   0     calc(var(--chamfer) - 1px)      /* 左下→左边→左上 */
  );
}
nav .img-active {
    filter: brightness(0) saturate(100%) invert(88%) sepia(28%) saturate(1400%) hue-rotate(344deg) brightness(103%);
}
/* =============================================================
   3.1d 移动端导航（<=768px）
   ============================================================= */
@media (max-width: 768px) {
  .nav-menu__inner { display: none; }
  .nav-menu {
    aspect-ratio: unset;
    background-color: transparent;
  }

  /* 左侧触发按钮 */
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 999;
    width: 17%;
    aspect-ratio: 1/1;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    background-color: transparent;
    transition: var(--transition);
    box-shadow: 0 10px 30px rgb(32 103 241);
    border-radius: 25%;
    float: left;
  }
  .mobile-nav-toggle--float {
    position: fixed;
    top: 12px;
    left: 3%;
  }
  .mobile-nav-toggle:hover { opacity: .85; }
  .mobile-nav-toggle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    display: block;
  }

  /* mobile-nav-inner 使用 --w-content 宽度 */
  .mobile-nav-inner {
    width: var(--w-content);
    max-width: var(--w-content);
    margin: 0 auto;
    position: relative;
    height: 15px;
  }

  /* 下拉面板 - 展现在 toggle 按钮下方 */
  .mobile-nav-panel {
    position: fixed;
    z-index: 1000;
    width: 260px;
    display: none;
    flex-direction: column;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
  }
  .mobile-nav-panel.open { display: flex; }

  .mobile-nav-panel .mobile-nav-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
  }
  .mobile-nav-panel .mobile-nav-close:hover { background: rgba(255,255,255,.3); }

  .mobile-nav-panel .mobile-nav-link:first-child {
    padding-top: 56px;
  }
  .mobile-nav-panel .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px 20px 10px 0px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: var(--transition);
  }
  .mobile-nav-panel .mobile-nav-link:hover { background: rgba(255,255,255,.1); }
  .mobile-nav-panel .mobile-nav-link img {
    width: auto;
    height: 9vw;
    object-fit: contain;
    display: block;
  }
  .mobile-nav-link:first-child img {
    filter: brightness(0) saturate(100%) invert(88%) sepia(28%) saturate(1400%) hue-rotate(344deg) brightness(103%);
  }

  /* 遮罩 */
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .mobile-nav-overlay.open {
    opacity: 0;
    pointer-events: auto;
  }

  /* 主背景改为从上到下渐变 */
  .bg-linear-blue {
    background: linear-gradient(180deg, #1b7eff 0%, #4faeff 5%, #4faeff 100%);
  }
  .alert-container {
    aspect-ratio: 710 / 1250;
  }
  .alert-slide__desc { display: none; }
  .alert-slide__caption { justify-content: end; }
  .know-card__desc { display: none; }
  .alert-dots,
  .quick-dots {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  .check-content {
    flex-direction: column;
    aspect-ratio: auto;
  }
  .check-list__item:nth-child(n+3) { display: none; }
  .alert-container .alert-header {
    height: 8%;
  }
  .alert-container .alert-carousel__wrap {
    aspect-ratio: 577 / 1056;
  }
  .alert-carousel {
    aspect-ratio: 610 / 1090;
  }
  .quick-container {
    aspect-ratio: 710 / 1260;
  }
  .quick-header {
    height: 8.3%;
  }
  .quick-carousel {
    aspect-ratio: 610 / 1090;
  }
  .quick-container .quick-carousel__wrap {
    aspect-ratio: 577 / 1056;
  }
  .check-container {
    aspect-ratio: 710 / 1230;
  }
  .check-header {
    height: 8.1%;
  }
  .check-content-wrap {
    aspect-ratio: 650 / 1100;
  }
  .check-featured {
    width: 100%;
    aspect-ratio: 630 / 790;
  }
  .check-list {
    width: 100%;
    aspect-ratio: 630/ 280;
  }
  .check-container .section-content {
    width: 100%;
    padding: 0 4.6%;
  }
  .check-list__title {
    font-size: var(--fs-title);
  }
  .check-list__meta {
    font-size: var(--fs-subtitle);
  }
  .check-list {
    padding-right: 4%;
  }
  .check-list__more {
    right: 4%;
  }
  .know-container {
    aspect-ratio: 710 / 1240;
  }
  .know-header {
    height: 8.6%;
  }
  .know-carousel-wrap{
    aspect-ratio: 610 / 1080;
  }
  .know-carousel {
    width: 94%;
    aspect-ratio: 577 / 1033;
  }
  .know-card {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .know-card__title {
    font-size: calc(var(--fs-title) * 1.05);
  }
  .know-dots {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
  }
  .know-dots a {
    user-select: none;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255,255,255,.45);
    transition: var(--transition);
  }
  .know-dots a:hover { background: rgba(255,255,255,.8); }
  .know-dots a.active {
    width: 24px;
    border-radius: 5px;
    background: #ff8c42;
  }
  .alert-arrow,.quick-arrow,.know-arrow {
    width: 8%;
  }
  .list-wrap.bgf{
    background-color: transparent;
  }
  .list-wrap .chamfer-45-30.bg-sg2 {
    background-color: transparent;
  }
  .breadcrumb { display: none; }
  .page-title-wrap {
    display: block;
    text-align: center;
    margin-bottom: 16px;
  }
  .page-title-mobile {
    display: inline;
    width: 60%;
    height: auto;
    object-fit: contain;
  }
  .list-wrap .chamfer-left {
    opacity: 0;
  }
  .list-wrap .rotateY {
    opacity: 0;
  }
  .breadcrumb {
    display: none;
  }
  .list-article__title{
    margin: 0 0 2px;
  }
  .list-article__foot{
    margin-top: 2px;
  }
  .footer__right img {
    max-width: 50%;
  }
}


/* Dynamic TRS media and list pagination states. */
.article__video { margin: 1.5rem 0; }
.detail-video { display: block; width: 100%; max-height: 70vh; background: #071629; }
.video-unavailable { margin-top: .75rem; color: #667085; }
.trs-css-background-asset-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.quick-slide { display: block; color: inherit; text-decoration: none; }
.quick-slide__cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.check-featured__link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.know-card__inner { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; overflow: hidden; }
.know-card__frame { display: block; width: 100%; height: 100%; position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; }
.alert-track { pointer-events: none; }
.alert-carousel__hit-link { position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; }
.alert-carousel__hit-link[hidden] { display: none; }
.alert-carousel__hit-link > .alert-slide__btn { position: absolute; left: clamp(16px, 4vw, 40px); bottom: clamp(16px, 4vw, 40px); z-index: 1; }
.alert-carousel__hit-link > .alert-slide__btn:hover, .alert-carousel__hit-link:focus-visible > .alert-slide__btn { background: rgba(255,255,255,.3); border-color: #fff; transform: translateY(-1px); }
.alert-slide, .quick-slide, .check-featured__link, .know-card-wrap { isolation: isolate; overflow: hidden; }
.alert-slide__visual { display: block; width: 100%; height: 100%; position: relative; isolation: isolate; overflow: hidden; }
.alert-slide__visual::after, .quick-slide__overlay, .check-featured__link::after, .know-card-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(2, 11, 24, .88) 0%, rgba(2, 11, 24, .52) 48%, rgba(2, 11, 24, 0) 100%);
}
.alert-slide__caption, .quick-slide__caption, .check-featured__body, .know-card__body {
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .82);
}
.alert-slide__caption, .quick-slide__caption {
  width: 100%;
  justify-content: flex-end;
  background: transparent;
}
.alert-slide__caption { padding-bottom: calc(clamp(16px, 4vw, 40px) + 2.6em + 12px); }
.alert-slide { position: relative; }
.check-featured__body { background: transparent; }
.alert-slide__desc, .check-list__meta, .know-card__desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.check-list__item { flex: 0 0 25%; height: 25%; min-height: 0; overflow: hidden; }
.check-list__title { white-space: nowrap; text-overflow: ellipsis; }
.check-list__meta { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.check-list__more { display: none; }
.article__body { overflow-wrap: anywhere; word-break: break-word; }
.article__body, .article__body * { color: var(--c-text-invert) !important; }
.article__body img, .article__body video, .article__body iframe, .article__body table { max-width: 100% !important; height: auto; }
.article__body img { display: block; margin: 1rem auto; }
.article__body .app_image_container { max-width: 100% !important; overflow: hidden; color: #dbeafe !important; background: rgba(7, 22, 41, .35); }
.article__body .app_image_container p, .article__body .app_image_container span { color: #dbeafe !important; }
.article__body .app_image_container p.imagenote { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; overflow: visible !important; text-align: center; color: #dbeafe !important; background: rgba(7, 22, 41, .45); padding: .35rem .5rem; line-height: 1.5; }
.detail-article__meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; text-align: center; }
.list-article__desc { display: block !important; height: 6.4em; max-height: 6.4em; -webkit-line-clamp: 4; overflow: hidden; }
.list-article__foot { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.list-article__source, .list-article__date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-article__source { color: var(--c-text-invert); }
.list-article__foot { margin-top: auto !important; }
@media (min-width: 769px) {
  .article__body .app_image_container { width: min(80%, 760px) !important; margin: 1.5rem auto !important; }
  .article__body .app_image_container img { width: 100% !important; max-width: 100% !important; height: auto !important; }
}
@media (max-width: 768px) {
  .check-content { height: auto; min-height: 0; }
  .check-featured { flex: 0 0 50%; width: 100%; aspect-ratio: 630 / 790; }
  .check-list { flex: 0 0 50%; width: 100%; aspect-ratio: 630 / 280; min-height: 0; }
  .check-list__items { height: 100%; }
  .check-list__item { flex: 0 0 50%; height: 50%; }
  .know-card { flex: 0 0 100% !important; width: 100% !important; box-sizing: border-box; padding: 0 1%; }
  .know-card__img { height: 100%; }
}
.topic-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; margin: var(--sec-gap) auto 0; }
.topic-pagination > a, .topic-pagination > span { min-width: 2.25rem; padding: .55rem .8rem; border: 1px solid rgba(19, 69, 112, .25); border-radius: .25rem; color: #134570; text-align: center; text-decoration: none; }
.topic-pagination > a:hover, .topic-pagination > .is-active { background: #134570; color: #fff; }
.topic-pagination > .is-disabled { color: #98a2b3; cursor: default; }

[hidden]{display:none!important;}