/* =============================================================
   style53.css  v53  科学传播交流活动 - 通用样式
   -------------------------------------------------------------
   1) 主题色板：蓝色色调（深蓝主背景 + 浅蓝纹理装饰）
   2) 响应式尺寸：六档（<=400, 768, 1024, 1280, 1920, >1920）
   3) 布局：上中下（公共顶部 / 主体 / 公共页脚）
   4) 组件：Hero / 导航 Tab / 卡片 / 轮播 / 详情页 / 调试页
   list 页面card hover时缩放和平移 有抖动
   ============================================================= */

/* =============================================================
   1. 主题色板（蓝色色调）
   ============================================================= */
:root {
  color-scheme: light;

  /* 主色 - 深蓝渐变 */
  --c-bg-1: #0a2a8c;
  --c-bg-2: #1a3aa8;
  --c-bg-3: #2a4db8;
  --c-bg-grad: linear-gradient(180deg, #0a2a8c 0%, #1a3aa8 50%, #0a2a8c 100%);
  --c-bg-deep: #061f6e;
  --c-bg-card: #ffffff;
  --c-bg-btn: #2660FF;
  --c-bg-text: #F6F8FF;
  --c-bg-mark: #E9F1FD;
  --c-bg-bar: #C4DDFF;

  /* 蓝色表面/纹理 */
  --c-texture: #e8f0ff;
  --c-blue-light: #cfe0ff;
  --c-blue-soft: #e6f0ff;
  --c-blue-mid: #6a92e8;
  --c-blue-accent: #286DD0;

  /* 文字 */
  --c-text: #1a2a5e;
  --c-text-sub: #091F4C;
  --c-text-mut: #8a99b8;
  --c-text-light: #ffffff;
  --c-text-dark: #000000;
  --c-text-light-sub: rgba(255, 255, 255, .85);

  /* 表面 / 边框 */
  --c-surface: #f6f9ff;
  --c-surface-2: #eaf1ff;
  --c-bd: #cad9f5;
  --c-bd-soft: #e0e9f8;
  --c-bd-strong: #2a64d8;

  /* 阴影 / 发光 */
  --shadow-card: 0 6px 20px rgba(10, 42, 140, .12);
  --shadow-card-hover: 0 12px 32px rgba(10, 42, 140, .22);
  --c-glow: 0 0 18px rgba(42, 100, 216, .35);

  /* 页脚 */
  --c-footer-bg: #061f6e;
  --c-footer-text: rgba(255, 255, 255, .92);
  --c-footer-bd: rgba(255, 255, 255, .12);

  /* 圆角 */
  --r-sm: 4px;
  --r-ss: 8px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* 过渡 */
  --tr: .35s cubic-bezier(.4, 0, .2, 1);

  /* 版面尺寸 */
  --content-w: 1200px;
  --page-w: 91.46%;
}

/* =============================================================
   2. 响应式尺寸 - 六档
   ============================================================= */
:root {
  --fs-hero: 26px;
  --fs-hero-sub: 12px;
  --fs-nav: 14px;
  --fs-st: 18px;
  --fs-st-sub: 11px;
  --fs-h1: 18px;
  --fs-h2: 16px;
  --fs-h2-lg: 20px;
  --fs-h2-sm: 14px;
  --fs-h3: 22px;
  --fs-title: 10px;
  --fs-sub: 6px;
  --fs-body: 12px;
  --fs-mark: 10px;
  --fs-xs: 10px;
  --fw-st: 700;
  --fw-sp: 500;
  --fw-bd: 600;
  --sec-gap: 24px;
  --gap-card: 12px;
  --pad-card: 14px;
  --w-bar: 4px;
  --w-bd-lg: 2px;
  
  --gap-text: 3px;
  --gap-line: 3px;
  --gap-list: 4px;
  --gap-moments: 8px;
  --fs-sm: 10px;
  --fs-body-l: 12px;
  --w-icon: 24px;
  --content-w: 91.46%;
  --fs-btn: 10px;
  --r-md: 4px;
  --r-lg: 8px;
}

@media (min-width: 400px) {
  :root {
    --fs-hero: 32px;
    --fs-hero-sub: 3.75vw;
    --fs-nav: 15px;
    --fs-st: 20px;
    --fs-st-sub: 12px;
    --fs-h1: 20px;
    --fs-h2: 18px;
    --fs-sub: 1.6vw;
    --fs-body: 3.2vw;
    --fs-mark: 2.66vw;
    --fs-xs: 11px;
    --sec-gap: 28px;
    --gap-card: 14px;
    --gap-text: 4px;
    --gap-line: 5px;
    --gap-list: 5px;
    --gap-moments: 2.13vw;
    --fs-sm: 2.66vw;
    --fs-body-l: 3.2vw;
    --w-icon: 26px;
    --content-w: 91.46%;
    --fs-btn: 2.66vw;
    --w-bd-lg: 4px;
    --fs-h2-sm: 3.73vw;
    --fs-h2-lg: 5.33vw;
    --fs-title: 2.66vw;
    --r-md: 1.1vw;
    --r-lg: 2.13vw;
  }
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 44px;
    --fs-hero-sub: 33px;
    --fs-st: 28px;
    --fs-st-sub: 13px;

    --fs-title: 18px;

    --fs-xs: 12px;
    --gap-card: 18px;
    --pad-card: 18px;
    --content-w: 720px;
    --sec-gap: 48px;
    --fs-h1: 36px;
    --fs-h2: 19px;
    --fs-h2-lg: 24px;
    --fs-h2-sm: 16px;
    --fs-h3: 13px;
    --fs-sub: 12px;
    --fs-btn: 10px;
    --fs-mark: 12px;
    --gap-text: 5px;
    --gap-line: 7.2px;
    --gap-list: 19px;
    --gap-moments: 9.6px;
    --fs-body: 12px;
    --fs-sm: 10px;
    --fs-body-l: 13px;
    --w-icon: 43px;
    --w-bd-lg: 6px;
    --fs-nav: 24px;
    --r-md: 10px;
    --r-lg: 12px;
  }
  /**0.6*/
}

@media (min-width: 1024px) {
  :root {
    --fs-hero: 52px;
    --fs-hero-sub: 46px;
    --fs-st: 32px;
    --fs-st-sub: 14px;
    --fs-title: 20px;

    --fs-xs: 13px;
    --gap-card: 20px;
    --pad-card: 22px;
    --content-w: 980px;
    --sec-gap: 65px;
    --fs-h1: 49px;
    --fs-h2: 26px;
    --fs-h2-lg: 32px;
    --fs-h2-sm: 23px;
    --fs-h3: 18px;
    --fs-sub: 20px;
    --fs-btn: 13px;
    --fs-mark: 15px;
    --gap-text: 6px;
    --gap-line: 9.8px;
    --gap-list: 12px;
    --gap-moments: 13px;
    --fs-body: 16px;
    --fs-sm: 13px;
    --fs-body-l: 18px;
    --w-icon: 58px;
    --w-bd-lg: 8px;
    --fs-nav: 32px;
    --r-md: 12px;
    --r-lg: 16px;
  }
  /* 0.8166**/
}

@media (min-width: 1280px) {
  :root {
    --fs-hero: 60px;
    --fs-hero-sub: 56px;
    --fs-st: 36px;
    --fs-st-sub: 15px;
    --fs-title: 22px;
    --fs-xs: 13px;
    --gap-card: 22px;
    --pad-card: 24px;
    --content-w: 1200px;
    --sec-gap: 80px;
    --fs-h1: 60px;
    --fs-h2: 32px;
    --fs-h2-lg: 40px;
    --fs-h2-sm: 28px;
    --fs-h3: 22px;
    --fs-sub: 20px;
    --fs-btn: 16px;
    --fs-mark: 18px;
    --gap-text: 8px;
    --gap-line: 12px;
    --gap-list: 15px;
    --gap-moments: 16px;
    --fs-body: 20px;
    --fs-sm: 16px;
    --fs-body-l: 22px;
    --w-icon: 72px;
    --w-bd-lg: 12px;
    --fs-nav: 40px;
    --r-md: 16px;
    --r-lg: 20px;
  }
}

@media (min-width: 1600px) {
  :root {
    --fs-hero: 60px;
    --fs-hero-sub: 56px;

    --fs-st: 36px;
    --fs-st-sub: 15px;
    --fs-title: 22px;
    --fs-xs: 13px;
    --gap-card: 22px;
    --pad-card: 24px;
    --content-w: 1200px;
    --sec-gap: 80px;
    --fs-h1: 60px;
    --fs-h2: 32px;
    --fs-h2-lg: 40px;
    --fs-h2-sm: 28px;
    --fs-h3: 22px;
    --fs-sub: 20px;
    --fs-btn: 16px;
    --fs-mark: 18px;
    --gap-text: 8px;
    --gap-line: 12px;
    --gap-list: 15px;
    --gap-moments: 16px;
    --fs-body: 20px;
    --fs-sm: 16px;
    --fs-body-l: 22px;
    --w-icon: 72px;
    --w-bd-lg: 12px;
    --fs-nav: 40px;
    --r-md: 16px;
    --r-lg: 20px;
  }
}

@media (min-width: 1920px) {
  :root {
    --fs-hero: 72px;
    --fs-hero-sub: 56px;
    --fs-st: 42px;
    --fs-st-sub: 16px;
    --fs-title: 24px;
  
    --fs-xs: 14px;
    --gap-card: 26px;
    --pad-card: 28px;
    --content-w: 1200px;
    --sec-gap: 80px;
    --fs-h1: 60px;
    --fs-h2: 32px;
    --fs-h2-lg: 40px;
    --fs-h2-sm: 28px;
    --fs-h3: 22px;
    --fs-sub: 20px;
    --fs-btn: 16px;
    --fs-mark: 18px;
    --gap-text: 8px;
    --gap-line: 12px;
    --gap-list: 15px;
    --gap-moments: 16px;
    --fs-body: 20px;
    --fs-body-l: 22px;
    --w-icon: 72px;
    --w-bd-lg: 12px;
    --fs-nav: 40px;
    --r-md: 16px;
    --r-lg: 20px;
  }
}


/* =============================================================
   3. 基础重置
   ============================================================= */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.6;
  background: var(--c-bg-card);
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================================
   4. 通用工具类
   ============================================================= */
.flex { display: flex; }
.flex-c { display: flex; align-items: center; justify-content: center; }
.flex-sb { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pr { position: relative; }
.pa { position: absolute; }
.ofh { overflow: hidden; }
.hide { display: none; }
.ry {
  transform: rotateY(180deg);
}

/* =============================================================
   5. 内容容器
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  position: relative;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container { padding: 0 24px; }
}

/* =============================================================
   6. 公共顶部：Hero 全屏头图
   ============================================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: var(--c-bg-grad);
}

/* Hero 深蓝底图 */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("./topic-science-communication-exchange-v3-hero-bg-c.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Hero 流动光带装饰 */
.hero__light {
  position: absolute;
  inset: 0;
  background-image: url("./topic-science-communication-exchange-v3-hero-bg.png");
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
  opacity: .9;
  z-index: 1;
}

/* 左上 LOGO */
.hero__logo {
  position: absolute;
  top: 2.2vw;
  left: 3.2vw;
  z-index: 3;
  width: 14vw;
  max-width: 230px;
  min-width: 120px;
}

.hero__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

/* Hero 标题层（科普新途 实践领航 + 副标题） */
.hero__title-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  text-align: center;
  pointer-events: none;
}

.hero__title {
  width: 50.78%;
  aspect-ratio: 975 / 517;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  z-index: 3;
}

.hero__title img {
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}

.hero__title-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 76.82%;
  aspect-ratio: 749 / 400;
}

.hero__title-2 {
  position: absolute;
  right: 0;
  bottom: 4.97%;
  width: 68.51%;
  aspect-ratio: 668 / 274;
}

.hero__sub {
  width: 98.46%;
  aspect-ratio: 960 / 82;
  color: var(--c-text-light);
  font-size: var(--fs-hero-sub);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  font-weight: 400;
  text-align: justify;
  text-align-last: justify;
  line-height: 1;
}

/* =============================================================
   7. 公共导航栏（征集通知 / 活动预告 / 精彩瞬间） 286DD0
   ============================================================= */
.nav-wrap {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--c-blue-accent) 0%, var(--c-blue-accent) 100%);
  box-shadow: 0 4px 18px rgba(10, 42, 140, .25);
  z-index: 50;
}

.nav {
  width: 100%;
  aspect-ratio: 1200 / 116;
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
}


.nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  min-height: 56px;
}

@media (min-width: 768px) {
  .nav__inner { min-height: 68px; }
}

.nav__item {
  position: relative;
  flex: 1;
  padding: 16px 8px;
  text-align: center;
  font-size: var(--fs-nav);
  color: var(--c-text-light);
  letter-spacing: .12em;
  font-weight: var(--fw-bd);
  transition: var(--tr);
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav__item { padding: 20px 12px; }
}

.nav__item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c-blue-light), transparent);
  border-radius: 2px;
  transition: var(--tr);
}

.nav__item:hover {
  color: var(--c-text-light);
}

.nav__item.is-active {
  color: var(--c-text-light);
  text-shadow: 0 0 12px rgba(207, 224, 255, .8);
}

.nav__item.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav__sub {
  display: block;
  font-size: var(--fs-st-sub);
  font-weight: 400;
  letter-spacing: .14em;
  opacity: .85;
  margin-top: 4px;
  color: var(--c-text-light-sub);
}

/* =============================================================
   8. 主体容器
   ============================================================= */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
.bg-page-half {
  background-image: url(./topic-science-communication-exchange-v3-page-bg-full.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
}
.section {
  position: relative;
  width: 100%;
  padding: var(--sec-gap) 0;
}

.section__inner {
  width: var(--content-w);
  max-width: var(--content-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section__inner__s1 {
  width: 100%;
  aspect-ratio: 1200 / 817;
}


/* =============================================================
   9. 栏目标题装饰图（征集通知 / 活动预告 / 精彩瞬间）
   ============================================================= */
.sec-title {
  
  position: relative;
}

.sec-title-s1 {
  width: 90%;
  aspect-ratio: 1080 / 130;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-image: url(./topic-science-communication-exchange-v3-st1-n-p.png);
  background-size: 100% 100%;
  margin-bottom: var(--sec-gap);
}

.sec-title-text {
  font-size: calc(var(--fs-h1) * 0.8);
  color: var(--c-text-light);
  position: relative;
  width: 24.81%;
  aspect-ratio: 268 / 88;
}
.sec-title-mark {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25.18%;
  aspect-ratio: 272 / 32;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sub);
  font-weight: normal;
  color: #688AB0;
  line-height: 1;
}
.sec-title-text span {
  transform: translateX(18%);
  text-align: justify;
  text-align-last: justify;
}
.sec-title-text span:first-child {
  position: absolute;
  width: 42.91%;
  aspect-ratio: 115 / 78;
  /*background-image: url(./topic-science-communication-exchange-v3-st1-1.png);*/
  background-size: 100% 100%;
  top: 0;
  left: 0;
}
.sec-title-text span:last-child {
  position: absolute;
  width: 42.91%;
  aspect-ratio: 115 / 78;
  /*background-image: url(./topic-science-communication-exchange-v3-st1-2.png);*/
  background-size: 100% 100%;
  bottom: 0;
  right: 0;
}

/* =============================================================
   10. 通用卡片（图片 + 文字）
   ============================================================= */
.card {
  position: relative;
  background: var(--c-bg-card);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--tr), box-shadow var(--tr);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 218;
  overflow: hidden;
  background: var(--c-surface);
}

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

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

.card__body {
  position: relative;
}

.card__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bd);
  color: var(--c-text);
  line-height: 1.4;
}

.card__desc {
  font-size: var(--fs-mark);
  color: var(--c-text-sub);
  line-height: 1.6;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}

.card__meta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =============================================================
   11. 首页栏目一：征集通知（大图文卡片）
   ============================================================= */
.notice {
  position: relative;
  background-image: url(./topic-science-communication-exchange-v3-page-bg-bds.png);
  background-size: 100% 200%;      /* 宽度拉满，高度放大到2倍，只显示上半部分 */
  background-position: top;
  background-repeat: no-repeat;
}

.notice::before { 
  content: '';
  position: absolute;
  height: 50%;
  aspect-ratio: 370 / 490;
  bottom: 0;
  right: 0;
  background-image: url(./topic-science-communication-exchange-v3-page-bg-cube.png);
  background-size: 100% 100%;
}
.notice::after { 
  content: '';
  position: absolute;
  height: 50%;
  aspect-ratio: 370 / 490;
  top: 0;
  left: 0;
  background-image: url(./topic-science-communication-exchange-v3-page-bg-cube.png);
  background-size: 100% 100%;
  transform: rotateX(180deg) rotateY(180deg);
}

.notice__card {
  width: 100%;
  aspect-ratio: 1200 / 607;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-card);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-image: linear-gradient(to bottom,
   rgba(6, 79, 245, 0.5), rgba(109, 141, 216, 0.288) 30%, rgba(136, 206, 209, 0.1 ));
}

.notice__header {
  width: 100%;
  aspect-ratio: 1200 / 195;
  background-image: linear-gradient(rgba(6, 79, 245, 0.5), rgba(136, 206, 209, 0.1 )), url(./topic-science-communication-exchange-v3-bg-s1-t1-g1.png);
  background-image:  url(./topic-science-communication-exchange-v3-bg-s1-t1-g1.png);
  background-size: 100% 100%;
  padding-top: 4.92%;
}
.notice__header__body {
  width: 94.66%;
  margin: 0 auto;
  aspect-ratio: 1136 / 104;
  font-weight: bold;
  font-size: var(--fs-h2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.notice__header__body .title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice__header__body .button {
  width: 8.8%;
  aspect-ratio: 100 / 40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  font-size: var(--fs-btn);
  background-color: var(--c-bg-btn);
  color: var(--c-text-light);
  border-radius: var(--r-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-surface);
  flex-shrink: 0;
}


.notice__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左图上的蓝色 "News" 角标 */
.notice__img-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  padding: 4px 10px;
  background: linear-gradient(135deg, #2a64d8, #5080e8);
  color: var(--c-text-light);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bd);
  border-radius: var(--r-sm);
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(42, 100, 216, .35);
}

.notice__body {
  width: 94.66%;
  margin: 0 auto;
  aspect-ratio: 1136 / 383;
  display: flex;
  align-items: center;
  background-color: var(--c-bg-card);
  border-radius: var(--r-ss);
}
.notice__body__inner {
  width: 94.36%;
  margin: 0 auto;
  aspect-ratio: 1072 / 319;
  display: flex;
  flex-direction: column;
}

.notice__title {
  width: 100%;
  aspect-ratio: 1072 / 30;
  font-size: var(--fs-mark);
  font-weight: normal;
  color: var(--c-blue-accent);
  line-height: 1.4;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: var(--gap-text);
}
.icon-s1-clock-b {
  height: 20px;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-icon-s1-clock-b.png);
  background-size: 100% 100%;
}
.icon-s1-clock {
  height: 20px;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-icon-s1-clock.png);
  background-size: 100% 100%;
}
.icon-s1-location {
  height: 20px;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-icon-s1-location.png);
  background-size: 100% 100%;
}
.notice__title .icon-s1-clock-b {
  height: 66.66%;
  aspect-ratio: 1 / 1;
}

/* 时间行（带蓝色时钟图标） */
.notice__meta {
  padding-top: 1%;
  padding-bottom: 1%;
  flex: 1;
  overflow: visible;
}

.notice__meta .notice__desc {
  padding: 1.49% 1.49%;
  background-color: var(--c-bg-text);
  font-size: var(--fs-body);
}

.notice__meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.notice__desc {
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  line-height: 1.8;
  margin-bottom: 10px;
  flex: 1;
}

.notice__footer {
  width: 100%;
  aspect-ratio: 1072 / 72;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid transparent;
}

.notice__footer-info {
  height: 55.55%;
  display: flex;
  align-items: center;
  padding: 0 1em;
  background-color: var(--c-bg-mark);
  font-size: var(--fs-sm);
}

.notice__footer-tip {
  color: var(--c-blue-accent);
}

.notice__btn {
  height: 100%;
  aspect-ratio: 200 / 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
  box-sizing: border-box;
  background: var(--c-blue-accent);
  background-image: linear-gradient(to right, rgba(32,111,245,1.0), rgba(92,160,253,1.0));
  color: var(--c-text-light);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-l);
  font-weight: bold;
  transition: var(--tr);
  overflow: hidden;
}

.notice__btn-text {
  max-width: 90%;
  text-overflow: ellipsis;
}

.notice__btn:hover {
  background: var(--c-bg-1);
  box-shadow: var(--c-glow);
}

.notice__btn-icon {
  width: calc(var(--fs-body-l) * 1.27);
  aspect-ratio: 1 / 1;
}

.notice__btn-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================
   12. 首页栏目二：活动预告（上方大图 + 下方3卡片轮播）
   ============================================================= */
.preview {
  position: relative;
  background-image: url(./topic-science-communication-exchange-v3-page-bg-bds.png);
  background-size: 100% 200%;      /* 宽度拉满，高度放大到2倍，只显示上半部分 */
  background-position: bottom;
  background-repeat: no-repeat;
  /*background-image: url(./topic-science-communication-exchange-v3-bg-line-tb-bw-1.png);
  background-size: 100% 100%;
  */
}
.preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url(./topic-science-communication-exchange-v3-bg-line-tb-bw-1.png);*/
  background-image: linear-gradient(to bottom, rgba(237, 244, 255, 0.5), rgba(237, 244, 255, 0.2));
  background-size: 100% 100%;
  pointer-events: none;
}
.section__inner__s2 {
  width: 100%;
  aspect-ratio: 1200 / 874;
}
.preview__main__wrap {
  width: 100%;
  aspect-ratio: 1200 / 664;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.preview__main {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 418;
  overflow: hidden;
  background-color: var(--c-bg-card);
  border-radius: var(--r-md);
  box-sizing: border-box;
  border-top: var(--w-bd-lg) solid var(--c-bg-bar);
  padding: 2.66% 2.66%;
}
.preview__main__footer {
  width: 100%;
  aspect-ratio: 1200 / 48;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-bg-bar);
  font-size: var(--fs-mark);
  color: var(--c-text-dark);
}
.preview__main__footer .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.preview__main__footer .icon-s1-arrow {
  display: inline-block;
  font-size: var(--fs-mark);
  width: 1.5em;
  aspect-ratio: 26 / 12;
  background-image: url(./topic-science-communication-exchange-v3-icon-s1-arrow-x.png);
  background-size: 100% 100%;
}
.preview__main-card {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  /*background: var(--c-bg-card);*/
  /*border-radius: var(--r-md);*/
  overflow: hidden;
  /*box-shadow: var(--shadow-card);*/
}


.preview__main-img {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}


.preview__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview__main-body {
  width: 67.42%;
  aspect-ratio: 766 / 346;
  /*padding: var(--pad-card);*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.preview__main-body-inner {
  width: 100%;
  aspect-ratio: 766/ 242;
  flex: 1;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.preview__main-tag {
  width: 13.05%;
  aspect-ratio: 100 / 40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-btn);
  color: var(--c-text-light);
  background-color: var(--c-bg-btn);
  border-radius: var(--r-sm);
  letter-spacing: .04em;
  margin-bottom: 1.56%;
}

.preview__main-title {
  width: 100%;
  aspect-ratio: 766 / 42;
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-bd);
  color: var(--c-text-dark);
  margin-bottom: 1.56%;
}



/* 活动预告：时间行 + 蓝色时钟图标 */
.preview__main-meta {
  width: 100%;
  aspect-ratio: 766 / 26;
  display: flex;
  align-items: center;
  column-gap: 1.8em;
  font-size: var(--fs-mark);
  color: #666666;
  margin-bottom: 1.56%;
  line-height: 1;
}
.preview__main-meta >div {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.preview__main-meta .icon-s1-clock, .preview__main-meta .icon-s1-location {
  height: 76.92%;
  aspect-ratio: 1 / 1;
} 

.preview__main-desc {
  padding: 2.08% 2.08%;
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  line-height: 1.7;
  margin-bottom: 1.56%;
  /*flex: 1;*/
  background-color: #F6F8FF;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* 以下为非必需但推荐增加的属性，用于处理长单词和美化 */
  word-break: break-word;
  text-overflow: ellipsis; /* 超出两行时显示省略号 */
}
.preview__main-desc p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* 以下为非必需但推荐增加的属性，用于处理长单词和美化 */
  word-break: break-word;
  text-overflow: ellipsis; /* 超出两行时显示省略号 */
}

.preview__main-footer {
  width: 100%;
  aspect-ratio: 766 / 72;
  display: flex;
  align-items: end;
  justify-content: space-between;
  font-size: var(--fs-mark);
  color: var(--c-text-mut);
  flex-wrap: wrap;
}

.preview__main-tip {
  font-weight: var(--fw-bd);
  color: var(--c-blue-accent);
  font-size: var(--fs-body);
}

.preview__main-btn {
  height: 100%;
  aspect-ratio: 200 / 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
  box-sizing: border-box;
  background: var(--c-blue-accent);
  background-image: linear-gradient(to right, rgba(79,79,255,1.0), rgba(76,107,255,1.0));
  color: var(--c-text-light);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-l);
  font-weight: bold;
  transition: var(--tr);
  overflow: hidden;
}

.preview__main-btn:hover {
  background: var(--c-bg-1);
  box-shadow: var(--c-glow);
}

/* 下方三卡片轮播（无限循环） */
.preview__list {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 168;
  padding: 0 0px;
}


/* 轮播轨道容器（overflow:hidden 裁剪） */
.carousel3-track-wrap {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

/* 轮播轨道（flex + gap，被 transform 移动） */
.carousel3-track {
  display: flex;
  gap: var(--gap-card);
  transition: transform .5s ease;
  will-change: transform;
}
.preview__list .carousel3-track {
  gap: var(--gap-list);
}

/* 每张卡片：桌面 3 张 / 移动端 2 张（活动预告） */
.carousel3-card {
  flex: 0 0 calc((100% - var(--gap-card) * 2) / 3);
  min-width: 0;
}

/* 活动预告轮播：移动端显示 2 张 */
.preview__list .carousel3-card {
  width: 32.5%;
  aspect-ratio: 390 / 168;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 箭头 */
.preview__list .carousel3-arrow {
  position: absolute;
  top: 50%;
  width: 3.66%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(40, 109, 208, 0.2);
  border: 1px solid var(--c-bd);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0 0;
  transition: var(--tr);
}

.carousel3-arrow--prev { left: 0; transform: translateY(-50%) translateX(-100%); }
.carousel3-arrow--next { right: 0; transform: translateY(-50%) translateX(100%) rotateY(180deg); }

.preview__list .card__body {
  width: 87.69%;
  margin: 0 auto;
  aspect-ratio: 342 / 120;
  display: flex;
  flex-direction: column;
  gap: var(--gap-line);
}

.preview__list .card__title {
  width: 100%;
  aspect-ratio: 342 / 44;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 4.67%;
  font-size: var(--fs-body);
  background-image: linear-gradient(to right, rgba(214,226,255,1.0) 0%, rgba(200,230,255, 0.0) 100%);
  border-radius: var(--r-sm);
}

.preview__list .card__title img {
  width: 1em;
  aspect-ratio: 1 / 1;
  margin-right: 0.2em;
}


.preview__list .card__desc {
  width: 100%;
  aspect-ratio: 342 / 26;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.preview__list .card__meta {
  width: 100%;
  aspect-ratio: 342 / 26;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.carousel3-arrow:hover {
  background: var(--c-blue-accent);
  border-color: var(--c-blue-accent);
}

.carousel3-arrow:hover img {
  filter: brightness(0) invert(1);
}

.carousel3-arrow img {
  width: 18px;
  height: 18px;
}


/* =============================================================
   13. 首页栏目三：精彩瞬间（上两列图文 + 下3卡片轮播）
   ============================================================= */
.moments {
  position: relative;
  background-image: url(./topic-science-communication-exchange-v3-page-bg-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #EDF4FF;
}

.moments__list--carousel::before {
  content: '';
  position: absolute;
  display: block;
  width: calc(var(--content-w) * 1.15);
  aspect-ratio: 1380 / 510;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%) ;
  background-image: url(./topic-science-communication-exchange-v3-bg-s3-table.png);
  background-size: 100% 100%;
}
.section__inner__s3 {
  width: 100%;
  aspect-ratio: 1200 / 1316;
}
.section__inner__bottom {
  padding-bottom: 20%;
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 200;
}
/* 栏目内分组标题（如"往届活动报道"），含右侧"查看更多" */
.moments__card__wrap {
  width: 100%;
  aspect-ratio: 1200 / 433;
  margin-bottom: var(--sec-gap);
}
.moments__carousel__wrap {
  width: 100%;
  aspect-ratio: 1200 / 593;
}

.moments__head {
  width: 100%;
  aspect-ratio: 1200 / 59;
  display: flex;
  align-items: center;
  margin-bottom: 2%;
}

.moments__head::before {
  content: '';
  display: block;
  height: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-label-loc.png);
  background-size: 100% 100%;
  margin-right: 2%;
}

.moments__head-title {
  flex: 1;
  overflow: hidden;
  font-size: var(--fs-h2-lg);
  font-weight: var(--fw-st);
  color: var(--c-text);
  display: flex;
  align-items: center;
  transform: skewX(-10deg);
  letter-spacing: 0.1em;
}


.moments__head-more {
  font-size: var(--fs-mark);
  color: var(--c-text-dark);
  transition: var(--tr);
  display: flex;
  align-items: center;
  gap: var(--gap-text);
  opacity: 0.8;
}
.moments__head-more .icon-s1-arrow {
  display: inline-block;
  font-size: var(--fs-mark);
  width: 1.6em;
  aspect-ratio: 26 / 12;
  background-image: url(./topic-science-communication-exchange-v3-icon-s1-arrow-x.png);
  background-size: 100% 100%;
}

.moments__head-more:hover {
  transform: translateY(-10%);
  opacity: 1;
}

.moments__list {
  width: 100%;
  aspect-ratio: 1200 / 350;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: var(--gap-moments); 
  margin-bottom: 28px;
}

.moments__list__cards {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-moments);
  
}

.moments__list__texts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-line);
}

.moments__item {
  display: flex;
  align-items: center;
  background: var(--c-bg-card);
  border-radius: var(--r-ss);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--tr);
}
.moments__list__cards .moments__item {
  width: 100%;
  aspect-ratio: 592 / 167;
  padding: 4.05% 4.05%;
  color: var(--c-text-dark);
}
.moments__list__cards .moments__item:hover {
  transform: translateY(-3px);
  color: var(--c-blue-accent);
}
.moments__list__texts .moments__item {
  width: 100%;
  aspect-ratio: 592 / 78;
  padding: 0 4%;
  border-radius: var(--r-ss);
  color: var(--c-text-dark);
}

.moments__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  color: var(--c-blue-accent);
}

/* 左侧蓝色日期块（设计稿：28 / 2026-07） */
.moments__list__cards .moments__item-date {
  width: 12.69%;
  aspect-ratio: 69 / 77;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*color: var(--c-blue-accent);*/
  margin-right: 1.4%;
}
.moments__list__cards .moments__item-body {
  width: 43.93%;
  aspect-ratio: 239 / 119;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*gap: var(--gap-line);*/
  margin-right: 1.4%;
  padding: var(--gap-text) 0;;
}
.moments__list__cards .v-line {
  width: 0px;
  height: 100%;
  border-left: 1px dotted var(--c-blue-accent);
  margin-right: 1.4%;
}
.moments__list__cards .moments__item-title {
  font-size: calc(var(--fs-body) * 1.1);
  font-weight: bold;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.moments__list__cards .moments__item-desc {
  font-size: var(--fs-mark);
  opacity: 0.7;
  line-height: 1.0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.moments__list__img {
  width: 39.70%;
  aspect-ratio: 216 / 119;
  border-radius: var(--r-ss);
  overflow: hidden;
}
.moments__list__img img {
  width: 100%;
  height: 100%;
}

.moments__item-day {
  font-size: calc(var(--fs-h2) * 0.9375); /*592-48 = 544*/
  font-weight: var(--fw-st);
  line-height: 1;
  letter-spacing: -0.02em;
}

.moments__item-ym {
  display: inline-block;
  font-size: calc(var(--fs-mark) * 0.8);
  opacity: 0.7;
}


.moments__list__texts .moments__item-body {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.moments__list__texts .moments__item-date {
  font-size: var(--fs-mark);
  opacity: 0.7;
}

.moments__list__texts .moments__item-title {
  font-size: var(--fs-body);
  font-weight: normal;
  /*color: var(--c-text-dark);*/
  line-height: 1.0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.moments__list__texts .moments__item-desc {
  font-size: var(--fs-mark);
  /*color: var(--c-text-sub);*/
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 下方3卡片轮播（多卡平铺，参考 v41 实现） */
.moments__list--carousel {
  position: relative;
  aspect-ratio: 1200 / 510;
}
.moments__list--carousel .carousel3-arrow {
    position: absolute;
    top: 50%;
    width: 3.66%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--c-blue-accent);
    border: 1px solid var(--c-blue-accent);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: var(--tr);
}
.moments__list--carousel .carousel3-arrow img {
  filter: brightness(0) invert(1);
}
.moments__list--carousel .carousel3-arrow:hover {
  background: rgba(40, 109, 208, 0.2);
  border-color: var(--c-bd);
}
.moments__list--carousel .carousel3-arrow:hover img {
  filter:none;
}

/* 精彩瞬间轮播：卡片间距 */
.moments__list--carousel .carousel3-track {
  width: 100%;
  height: 100%;
  gap: var(--gap-card);
}
.moments__list--carousel .carousel3-track-wrap {
  width: 100%;
  aspect-ratio: 1200 / 361;
  height: auto;
  position: relative;
  overflow: visible;
}

.moments__list--carousel .carousel3-card {
  width: 32.5%;
  aspect-ratio: 390 / 361;
  border-radius: calc(var(--r-ss) * 1.5);
}

.moments__list--carousel .card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 218;
  overflow: hidden;
  background: var(--c-surface);
}
.moments__list--carousel .card__img::before {
  content: '';
  display: block;
  position: absolute;
  width: var(--w-icon);
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-icon-s3-play.png);
  background-size: 100% 100%;
  left: 50%;
  top: 50%;
  z-index: 9;
  transform: translate(-50%, -50%);
}
.moments__list--carousel .card__img .card-img-camera {
  position: absolute;
  width: calc(var(--w-icon) * 0.8);
  aspect-ratio: 1 / 1;
  background-color: var(--c-blue-accent);
  /*background-image: url(./topic-science-communication-exchange-v3-icon-camera.png);*/
  background-size: 80% 80%;
  background-repeat: no-repeat;
  border-top-left-radius: var(--r-md);
  right: 0;
  bottom: 0;
  z-index: 9;
}
.moments__list--carousel .card-img-camera::before {
  content: '';
  display: block;
  position: absolute;
  width: calc(var(--w-icon) * 0.6);
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-icon-camera.png);
  background-size: 80% 80%;
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
  z-index: 9;
}
.moments__list--carousel .card__body {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 101;
  overflow: hidden;
  margin-top: 4.61%;
  padding: 0 6.15%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.moments__list--carousel .moments__item-title {
  font-size: calc(var(--fs-body) * 1.1);
  font-weight: bold;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.moments__list--carousel .card__meta{
  width: 100%;
  aspect-ratio: 338 / 27;
  display: flex;
  align-items: center;
  gap: var(--gap-text);
}
/* 卡片标题作为链接（整卡不再可点，仅标题可点） */
.moments__list--carousel .card__title a {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  transition: color var(--tr);
}
.moments__list--carousel .card__title a:hover {
  color: var(--c-blue-accent);
}
.moments__list__dots {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-text);
  height: var(--gap-text);
  margin-top: calc(var(--sec-gap) * 0.875);
}
.moments__list__dots .dot {
  height: 100%;
  aspect-ratio: 2 / 1;
  background-color: var(--c-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  border: none;
  transition: var(--tr);
}
.moments__list__dots .dot:hover {
  background-color: var(--c-blue-mid);
}
.moments__list__dots .dot.is-active {
  background-color: var(--c-blue-accent);
  box-shadow: var(--c-glow);
  aspect-ratio: 4 / 1;
}

/* =============================================================
   14. 列表页（每行 2 列，左图右文卡片）
   ============================================================= */
.list-sec {
  padding: var(--sec-gap) 0 120px;
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card);
}


.list-card {
  aspect-ratio: 574 / 420;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-card);
  border-radius: calc(var(--r-md) * 0.8);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--tr);
}

.list-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* 图片区（视频卡片缩略图 + 右上角播放角标） */
.list-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 574 / 310;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-surface);
}

.list-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr);
  will-change: transform;
  display: block;
}

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

/* 右上角播放按钮角标：深蓝色实心圆角矩形 + 白色三角 */
.list-card__play {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  aspect-ratio: 1 / 1;
  padding-right: 3px;             /* 视觉居中三角形 */
  background: var(--c-blue-accent);
  border-top-left-radius: var(--r-ss);
  box-shadow: 0 2px 8px rgba(10, 42, 140, .35);
  pointer-events: none;
  transition: var(--tr);
}


.list-card__play img {
  width: 14px;
  height: 14px;
  display: block;
  /*filter: brightness(0) invert(1);  /* 白色三角 */
}

@media (min-width: 768px) {
  .list-card__play img { width: 16px; height: 16px; }
}

/* hover 时角标加亮 */
.list-card:hover .list-card__play {
  background: var(--c-bg-1);
  box-shadow: var(--c-glow);
}

/* 文字区 */
.list-card__body {
  aspect-ratio: 574 / 68;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

@media (min-width: 768px) {
  .list-card__body { padding: 16px 18px; gap: 8px; }
}

.list-card__title {
  font-size: var(--fs-body-l);
  font-weight: normal;
  color: var(--c-text-dark);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.list-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-mark);
  color: var(--c-blue-accent);
  font-weight: normal;
}

.list-card__meta-icon {
  width: 1em;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

/* =============================================================
   15. 详情页
   ============================================================= */
.detail-sec {
  padding: var(--sec-gap) 0 60px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: calc(var(--fs-mark) * 1.5);
  color: var(--c-text-sub);
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--c-text-sub);
  transition: var(--tr);
}

.breadcrumb a:hover {
  color: var(--c-blue-sub);
}

.breadcrumb span.sep {
  color: var(--c-text-sub);
}

.breadcrumb span.cur {
  color: var(--c-text-sub);
}

.detail {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: 8.33% 8.33%;
  box-shadow: var(--shadow-card);
}


.detail__title {
  font-size: var(--fs-h2-lg);
  font-weight: var(--fw-st);
  color: #091F4C;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 12px;
}

.detail__src {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: var(--fs-mark);
  color: var(--c-blue-accent);
  margin-bottom: 4.16%;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-bd-soft);
  flex-wrap: wrap;
}

.detail__src-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail__src-icon {
  width: calc(var(--fs-mark) * 1.1);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.detail__body {
  color: var(--c-text-sub);
  font-size: calc(var(--fs-body) * 1.2);
  line-height: 1.9;
}

.detail__body p {
  margin-bottom: 16px;
  text-indent: 2em;
}

.detail__body figure {
  margin: 24px 0;
  text-align: center;
}

.detail__body figure img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--r-sm);
  display: block;
}

.detail__body figcaption {
  font-size: var(--fs-mark);
  color: var(--c-text-mut);
  margin-top: 8px;
}

.detail-video-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  /*background: #000;*/
}

.detail-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.detail-video-wrap::before{
  content: '';
  display: block;
  width: 10%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-science-communication-exchange-v3-icon-s3-play.png);
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.detail__body video {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 24px auto;
  border-radius: var(--r-md);
  background: #000;
}

.detail__body iframe {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 24px auto;
  border: none;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 9;
}

.detail__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--c-bd-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid var(--c-bd);
  border-radius: var(--r-pill);
  color: var(--c-text);
  background: var(--c-bg-card);
  transition: var(--tr);
  font-size: var(--fs-mark);
  cursor: pointer;
}

.btn:hover {
  border-color: var(--c-blue-accent);
  color: var(--c-blue-accent);
  box-shadow: var(--c-glow);
}

/* =============================================================
   16. 公共页脚
   ============================================================= */
.footer {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #0a2a8c 0%, #061f6e 100%);
  color: var(--c-footer-text);
  padding: 32px 0 20px;
 
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-blue-light), transparent);
}

.footer__inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .footer__inner { padding: 0 24px; }
}

.footer__logo {
  height: 36px;
  margin: 0 auto 14px;
  display: block;
}

@media (min-width: 768px) {
  .footer__logo { height: 44px; }
}

.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: var(--fs-mark);
  color: var(--c-text-mut);
  margin-bottom: 10px;
}

.footer__links a {
  color: var(--c-text-light-sub);
  transition: var(--tr);
}

.footer__links a:hover {
  color: var(--c-text-light);
}

.footer__copy {
  font-size: var(--fs-xs);
  color: var(--c-text-mut);
  padding-top: 12px;
  border-top: 1px solid var(--c-footer-bd);
  margin-top: 12px;
}

/* =============================================================
   17. 主题切换按钮
   ============================================================= */
.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-bd);
  background: var(--c-bg-card);
  color: var(--c-blue-accent);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: var(--tr);
}

@media (min-width: 768px) {
  .theme-toggle { width: 46px; height: 46px; right: 20px; bottom: 20px; }
}

.theme-toggle:hover {
  transform: scale(1.08);
}

/* =============================================================
   18. 滚动条
   ============================================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--c-surface); }
::-webkit-scrollbar-thumb { background: var(--c-blue-mid); border-radius: 4px; }

/* =============================================================
   19. 通用动画
   ============================================================= */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 初始隐藏状态：观察前应用，避免入场动画闪烁 */
.reveal-init {
  opacity: 0;
  transform: translateX(30px);
}

.fade-in-up {
  animation: fade-in-up .7s ease both;
}

/* =============================================================
   20. 响应式细节（移动端调整）
   ============================================================= */
@media (max-width: 767px) {
  .section__inner__s1 {
    aspect-ratio: 343 / 515;
  }
  .sec-title-s1 {
    width: 94.46%;
    aspect-ratio: 324 / 39;
  }
  .notice__card {
    aspect-ratio: 343 / 452;
  }
  .notice__header {
    aspect-ratio: 343 / 75;
    background-image:  url(./topic-science-communication-exchange-v3-bg-s1-t1-g.png);
  }
  .notice__header__body {
    width: 90.67%;
    aspect-ratio: 311 / 52;
  }
  .notice__header__body .button {
    width: 15.43%;
    aspect-ratio: 50 / 20;
  }
  .notice__body {
    width: 90.67%;
    aspect-ratio: 311 / 340;
    margin: 4.66%;
  }
  .notice__body__inner {
    width: 89.71%;
    aspect-ratio: 279 / 308;
  }
  .notice__title {
    aspect-ratio: 279 / 16;
  }
  .notice__footer {
    aspect-ratio: 279 / 80;
    flex-direction: column;
    align-items: start;
  }
  .notice__footer-info {
    width: auto;
    padding: 0 0.5em;
    height: 2.4em;
    aspect-ratio: 176 / 24;
  }
  .notice__btn {
    height: auto;
    width: 100%;
    aspect-ratio: 279 / 40;
    justify-content: center;
    gap: 0.6em;
  }
  .preview::before {
    background-image: linear-gradient(to bottom, rgba(237, 244, 255, 0.5), #a49ce32b);
  }
  .preview__main__wrap {
    aspect-ratio: 343 / 693;
    gap: 2.1vw;
  }
  .preview__main {
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 343 / 553;
    padding: 4.66% 4.66%;
  }
  .preview__main-card {
    flex-direction: column;
  }
  .preview__main-img{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .preview__main-body {
    width: 100%;
    aspect-ratio: 311 / 190;
  }
  .preview__main-tag{
    width: 16.07%;
    aspect-ratio: 50 / 20;
  }
  .preview__main-meta{
    gap: 0.2em;
  }
  .preview__main-tag, .preview__main-title, .preview__main-meta {
    margin-bottom: 1.6vw;
  }
  .preview__main-footer{
    width: 100%;
    aspect-ratio: 311 / 40;
  }
  .preview__main-btn {
    width: 100%;
    aspect-ratio: 311 / 40;
    justify-content: center;
    gap: 0.6em;
  }
  .preview__list{
    aspect-ratio: 343 / 100;
  }
  .preview__list .carousel3-card {
    aspect-ratio: 167.5 / 100;
  }
  .preview__list .card__body {
    width: 85.67%;
    aspect-ratio: 143.5 / 76;
    justify-content: space-between;
  }
  .preview__list .card__title {
    aspect-ratio: 143.5 / 34;
    font-size: var(--fs-body);
  }
  .preview__main__footer {
    aspect-ratio: 343 / 24;
  }
  .preview__list .carousel3-arrow{
    width: 5.87vw;
  }
  .carousel3-arrow--next{
    transform: translateY(-50%) translateX(50%) rotateY(180deg);
  }
  .carousel3-arrow--prev{
    transform: translateY(-50%) translateX(-50%) ;
  }
  .carousel3-arrow img {
    width: 60%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .section__inner__s3 {
    aspect-ratio: 343 / 804;
  }
  .moments__card__wrap{
    aspect-ratio: 343 / 421;
  }
  .moments__carousel__wrap{
    aspect-ratio: 343 / 296;
  }
  .moments__head{
    aspect-ratio: 343 / 30;
  }
  .moments__head-more {
    font-size: 4.25vw;
  }
  .moments__head-more .icon-s1-arrow {
    width: 4.25vw;
    aspect-ratio: 26 / 12;
  }
  .moments__list{
    aspect-ratio: 343 / 379;
    grid-template-columns: repeat(1, 1fr);
  }
  .moments__list__texts {
    gap: var(--gap-moments);
  }
  .moments__list--carousel {
    aspect-ratio: 343 / 180;
    width: 100vw;                         /* 容器占满屏幕宽度 */
    margin-left: calc(50% - 50vw);
  }
  .moments__list--carousel .carousel3-card {
    aspect-ratio: 194 / 185;
  }
  .moments__list--carousel::before{
    background-image: url(./topic-science-communication-exchange-v3-bg-s3-table-m.png);
    bottom: -4vw;
  }
  .moments__list--carousel .carousel3-track-wrap {
    aspect-ratio: 375 / 180;
  }
  .moments__list--carousel .carousel3-card {
    border-radius: 1vw;
  }
  .moments__list__dots{
    margin-top: 9.33vw;
  }
  .moments__list--carousel .carousel3-arrow--prev {
    transform: translateY(-50%) translateX(50%);
  }
  .moments__list--carousel .carousel3-arrow--next {
    transform: translateY(-50%) translateX(-50%) rotateY(180deg);
  }
  .moments__list--carousel .carousel3-arrow {
    width: 5.87vw;
    padding: 0 0 ;
  }
  .moments__list__cards .moments__item-desc{
    font-size: calc(var(--fs-mark) * 1.1);
  }
  .moments__item-body {
    aspect-ratio: 163 / 61;
  }
  .moments__list__img {
    aspect-ratio: 106 / 60;
  }
  .list-card {
    aspect-ratio: 164 / 166;
  }
  .list-card__media {
    aspect-ratio: 164 / 89;
  }
  .list-card__body {
    aspect-ratio: 164 / 59;
    justify-content: space-between;
  }
  .list-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .detail__title {
    font-size: calc(var(--fs-h2-lg) * 0.8);
    font-weight: bold;
  }
  .bg-page-half {
    background-image: url(./topic-science-communication-exchange-v3-page-bg-bottom-m.png);
    background-repeat: repeat-y;
  }
}



/* TRS integration: keep empty dynamic sections out of the published page. */
[data-topic-section][hidden] { display: none !important; }
.trs-css-background-asset-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.detail__cover { max-width: 100%; margin: 0 0 24px; }
.detail__cover img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.detail__auto-media { width: 100%; }
.detail__video-shell {
  width: 100%; max-width: 900px; aspect-ratio: 16 / 9; margin: 0 auto 24px;
  overflow: hidden; background: #000; border-radius: var(--r-sm);
}
.detail__video-player {
  display: block; width: 100%; height: 100%; object-fit: contain; background: #000;
}
.detail__video-unavailable {
  max-width: 900px; margin: 0 auto 24px; padding: 42px 16px;
  border-radius: var(--r-sm); background: rgba(0, 0, 0, .05);
  color: var(--c-text-mut); text-align: center;
}
.detail__body {
  box-sizing: border-box; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto;
  overflow-wrap: anywhere; overflow-x: auto;
}
.detail__body p { margin-bottom: 16px; text-indent: 2em; }
.detail__body img {
  display: block !important; width: auto !important; max-width: 100% !important;
  height: auto !important; margin-left: auto !important; margin-right: auto !important;
}
.detail__body video, .detail__body iframe {
  display: block; max-width: 100% !important; margin-left: auto; margin-right: auto;
}
.detail__body video { height: auto !important; }
.detail__body table { max-width: 100% !important; }
.detail__body-video { margin-top: 28px; }
.detail__body-video:empty { display: none; }
@media screen and (max-width: 700px) {
  .detail__video-shell, .detail__video-player { width: 100%; max-width: 100%; }
  .detail__body-video { margin-top: 20px; }
}