@charset "utf-8";
/* ==========================================================================
   未来之城 看雄安 · 专题页样式
   说明：全部样式独立封装于本文件，命名遵循 BEM 规范；
   适配区间：320px ~ 430px 竖屏主流机型，并兼容横屏 / 宽屏浏览。
   ========================================================================== */

/* ---------- 设计变量（色彩取样自设计稿） ---------- */
:root {
  /* 主渐变：说明条 / 高亮块 / 页脚（左青蓝 → 右深蓝） */
  --grad-bar: linear-gradient(90deg, #0d94d0 0%, #1a5fa2 100%);
  --c-page: #f8fbfe;
  /* 页面底色 */
  --c-item-bg: #d5e5ff;
  /* 权威发布列表块底色 */
  --c-item-text: #1c4f9c;
  /* 列表文字蓝 */
  --c-headline: #1b3173;
  /* 头条标题深蓝 */
  --c-link: #1c66b0;
  /* 普通链接蓝 */
  --c-more: #7fb0dd;
  /* 查看更多浅蓝 */
  --c-desc: #9aa4b2;
  /* 摘要灰 */
  --c-card-bg: #eef6fd;
  /* 媒体聚焦卡片底 */
  --c-card-border: #cfe6f7;
  /* 媒体聚焦卡片描边 */
  --c-strip-border: #bfd9ef;
  /* 缩略图条描边 */
  --c-dot: rgba(255, 255, 255, .65);
  --c-dot-active: #2ca9e0;
  --c-marker: #f5a623;
  /* 列表橙色方点 */
  --c-line: #e2ecf7;
  /* 分隔细线 */
  /* 字号：随视口平滑缩放，px 端点已换算为 rem（基准 16px）；中间 vw 项与根字号无关，保留 */
  --fs-xs: clamp(0.5625rem, 2.7vw, 0.875rem);
  --fs-sm: clamp(0.625rem, 3vw, 1rem);
  --fs-md: clamp(0.6875rem, 3.4vw, 1.125rem);
  --fs-lg: clamp(0.75rem, 3.9vw, 1.5rem);
  /* 切换动效：时长与缓动统一 */
  --anim-dur: .45s;
  --anim-ease: cubic-bezier(.33, .1, .25, 1);
}

/* ---------- 基础重置 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* 全局 rem 根字号：1rem ≡ 视口宽的 1%（原 --fw），≥1600px 锁定 16px，窄屏下限 8px 保证可读。
     由此 ≥1600px 时所有 rem 值逐像素还原为原设计 px。 */
  font-size: clamp(8px, 1vw, 16px);
}

body {
  /* background: var(--c-page); */
     font-family: Microsoft YaHei UI, "microsoft yahei", "微软雅黑", simsun, "宋体", sans-serif;
  color: #333;
  -webkit-tap-highlight-color: transparent;
}

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

ul,
ol {
  list-style: none;
}

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

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

/* ---------- 页面容器 ---------- */
.page {
  width: 100%;
  overflow-x: hidden;
}

/* 中间区域内容版型：PC 端 1600px 居中，移动端通栏 */
.page__frame {
  margin-top: -4.375rem;
}

/* ==========================================================================
   首屏横幅
   ========================================================================== */
.banner {
  position: relative;
 
  overflow: hidden;
}

.banner__bg {
  width: 100%;
 
  /* 缓慢推拉的 Ken Burns 呼吸，让首屏静态插画产生纵深感 */
  animation: banner-kenburns 26s var(--anim-ease) infinite alternate;
  will-change: transform;
}

.banner__title {
  position: absolute;
  left: 15%;
  top: 15%;
  width: 40%;
  animation: banner-title-in 1.1s var(--anim-ease) both;
}

/* 底部向页面底色的过渡渐隐 */
.banner__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(248, 251, 254, 0) 0%, var(--c-page) 100%);
}

/* 首屏滚动提示：底部居中，箭头持续浮动；滚动后由 JS 加 is-hidden 淡出 */
.banner__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  z-index: 3;
  transition: opacity .5s var(--anim-ease), transform .5s var(--anim-ease);
}

.banner__scroll-cue.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(2rem);
  pointer-events: none;
}

.banner__scroll-cue-text {
  font-size: var(--fs-xs);
  letter-spacing: 0.3rem;
  text-shadow: 0 1px 6px rgba(12, 60, 110, .5);
  opacity: .95;
}

/* 纯 CSS 绘制的向下箭头（V 形） */
.banner__scroll-cue-icon {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 11px;
  min-height: 11px;
  border-right: 2px solid rgba(255, 255, 255, .92);
  border-bottom: 2px solid rgba(255, 255, 255, .92);
  transform: rotate(45deg);
  animation: scroll-cue-float 1.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(12, 60, 110, .45));
}

@keyframes banner-title-in {
  from {
    opacity: 0;
    transform: translateY(6rem) scale(.94);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 首屏背景 Ken Burns：缓慢放大 + 轻微平移，循环往复 */
@keyframes banner-kenburns {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.09) translate3d(-1.5%, -1.5%, 0);
  }
}

/* 滚动提示箭头浮动 */
@keyframes scroll-cue-float {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: .95;
  }

  50% {
    transform: rotate(45deg) translate(0.7rem, 0.7rem);
    opacity: .4;
  }
}

/* ==========================================================================
   滚动入场动画系统（data-animate）
   进入视口时由 JS 加 is-inview；is-reveal-ready 亦由 JS 标记，
   无 JS 时元素保持默认可见（渐进增强）。animation 用 backwards：
   延迟期间应用起始态，播放结束即解除 transform 锁定，不影响后续 hover。
   模式：rise=整体上滑 / zoom=缩放渐显 / fade=淡入 / stagger=子项交错上滑
   ========================================================================== */
[data-animate="rise"].is-reveal-ready:not(.is-inview),
[data-animate="zoom"].is-reveal-ready:not(.is-inview),
[data-animate="fade"].is-reveal-ready:not(.is-inview) {
  opacity: 0;
}

[data-animate="rise"].is-inview {
  animation: anim-rise .75s var(--anim-ease) backwards;
}

[data-animate="zoom"].is-inview {
  animation: anim-zoom .8s var(--anim-ease) backwards;
}

[data-animate="fade"].is-inview {
  animation: anim-fade .9s var(--anim-ease) backwards;
}

/* 交错入场：直接子项按 --i 序号依次延迟（--i 由 JS 写入） */
[data-animate="stagger"].is-reveal-ready:not(.is-inview) > * {
  opacity: 0;
}

[data-animate="stagger"].is-inview > * {
  animation: anim-rise .65s var(--anim-ease) backwards;
  animation-delay: calc(var(--i, 0) * .1s);
}

@keyframes anim-rise {
  from {
    opacity: 0;
    transform: translateY(3.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-zoom {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes anim-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ==========================================================================
   通用区块结构
   ========================================================================== */
.section {
  padding: 0 0 5rem;
}

/* 各区块顶部留白按设计稿纵向节奏取值 */
.section--auth {
  padding-top: 2rem;
}

.section--action {
  padding-top: 0;
}

.section--media {
  padding-top: 4rem;
}

.section--gallery {
  padding-top: 0;
}

.section__head {
  position: relative;
  width: 72.5%;
  margin: 0 auto 1rem;
  text-align: center;
}

.section__title {
  width: 34%;
  margin: 0 auto;
}

.section__more {
  position: absolute;
  right: 0;
  bottom: 25%;
  font-size: var(--fs-xs);
  color: var(--c-more);
  background: linear-gradient(90.00deg, rgba(1, 156, 222, 1) 0%, rgba(30, 79, 145, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4375rem;
  letter-spacing: 0px;
  text-align: left;
}

.section__body {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 2.5%;
}

/* flex 子项允许收缩，避免长文本撑破容器 */
.section__body>* {
  min-width: 0;
}

/* 区块背景插画（取自设计稿分层底图） */
.section--action {
  background: url("../images/jx4.png") center bottom / 100% auto no-repeat;
  margin-top: -7.5rem;
  padding-bottom: 7.5rem;
}

.section--media {
  background: url("../images/image178.png") no-repeat 100%;
}

.section--gallery {
  background: url("../images/image180.png") no-repeat;
  background-size: 100% 100%;
}

/* ==========================================================================
   渐隐轮播组件（权威发布左图 / 实干进行时右图）
   ========================================================================== */
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  position: relative;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--anim-dur) var(--anim-ease);
  pointer-events: none;
}

.carousel__slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.carousel__img {
  width: 100%;
  aspect-ratio: 136 / 81;
  object-fit: cover;
  position: relative;
}

/* 图片下方蓝色说明条 */
.carousel__caption {
  display: flex;
  align-items: center;
  background: linear-gradient(90.00deg, rgba(1, 156, 222, 1) 0%, rgba(30, 79, 145, 1) 100%);
  opacity: 0.9;
  height: 5.375rem;
  padding: 1.875rem;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.carousel__caption-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: 0px;
  text-align: left;
  padding-right: 5%;
}

/* 圆点指示器 */
.carousel__dots {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.carousel__dot {
  width: min(1.6rem, 12px);
  height: min(1.6rem, 12px);
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: #fff;
  transition: background var(--anim-dur) var(--anim-ease);
}

.carousel__dot.is-active {
  background: var(--c-dot-active);
}

/* ==========================================================================
   权威发布
   ========================================================================== */
.auth__media {
  width: 66%;
  min-width: 0;
}

.auth__list {
  width: 48.6%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: url(../images/4428.png) no-repeat 0;
  padding-left: 0.375rem;
}

.auth-list__item {
  border-radius: 0.125rem;
  padding: 1.6rem 2.2rem;
  flex: 1;
  display: flex;
  min-width: 0;
  background: rgba(210, 227, 255, 1);
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
  /* align-items: center; */
  position: relative;
  /* 按压缩回反馈的过渡 */
  transition: transform .2s var(--anim-ease);
}

.auth-list__item::after {
  content: "";
  width: 90%;
  position: absolute;
  bottom: 0;
  height: 1px;
  left: 5%;
  background: #fff;
  z-index: 99;
}

.auth-list__item a {
  width: 100%;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(2, 31, 102, 1);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: 0px;
  text-align: left;
  /* 文字置于渐变遮罩之上，颜色随遮罩同步过渡 */
  position: relative;
  z-index: 1;
  transition: color .35s var(--anim-ease);
}

/* 悬停/按压渐变遮罩：以透明度过渡实现平滑渐入动画 */
.auth-list__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.125rem;
  background: linear-gradient(90.00deg, rgba(1, 156, 222, 1) 0%, rgba(30, 79, 145, 1) 100%);
  opacity: 0;
  transition: opacity .35s var(--anim-ease);
  z-index: 0;
}

.auth-list__item:hover::before,
.auth-list__item:active::before {
  opacity: 1;
}

/* 触摸按压轻微缩回反馈 */
.auth-list__item:active {
  transform: scale(.985);
}

.auth-list__item:hover a,
.auth-list__item:active a {
  color: #fff;
}

.auth-list__item:hover::after {
  content: "";
  width: 0;

}

.auth-list__item:last-child::after {
  content: "";
  width: 0;

}

/* 高亮条目：蓝青渐变底 + 白字 */
.auth-list__item--highlight {
  /* background: var(--grad-bar); */
  /* background: linear-gradient(90.00deg, rgba(1, 156, 222, 1) 0%,rgba(30, 79, 145, 1) 100%); */
}

.auth-list__item--highlight a {
  color: #fff;
}

/* 入场动画：列表滚动进入视口后由 JS 加 is-inview，
   条目自右侧逐条渐显滑入（nth-child 控制逐条延迟）；
   is-reveal-ready 由 JS 标记，无 JS 时条目保持默认可见 */
.auth__list.is-reveal-ready:not(.is-inview) .auth-list__item {
  opacity: 0;
}

.auth__list.is-inview .auth-list__item {
  animation: auth-item-in .55s var(--anim-ease) backwards;
}

.auth__list.is-inview .auth-list__item:nth-child(1) {
  animation-delay: 0s;
}

.auth__list.is-inview .auth-list__item:nth-child(2) {
  animation-delay: .09s;
}

.auth__list.is-inview .auth-list__item:nth-child(3) {
  animation-delay: .18s;
}

.auth__list.is-inview .auth-list__item:nth-child(4) {
  animation-delay: .27s;
}

.auth__list.is-inview .auth-list__item:nth-child(5) {
  animation-delay: .36s;
}

@keyframes auth-item-in {
  from {
    opacity: 0;
    transform: translateX(6rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   实干进行时
   ========================================================================== */
.action__text {
  width: 41.6%;
  min-width: 0;
}
.action__list .action-list__item:nth-of-type(1){display:none}

.action__media {
  width: 55.5%;
  min-width: 0;
}

.action__headline {
  margin-bottom: 1.5rem;
  min-width: 0;
}

.action__headline a {
  width: 100%;
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(2, 31, 102, 1);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: 0px;
  text-align: left;
}

.action__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
  color: rgba(112, 131, 142, 1);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625rem;
  letter-spacing: 0px;
  text-align: justify;
  text-indent: 2em;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(2, 119, 245, 0.15);
}

.action-list__item {
  border-bottom: 1px solid rgba(2, 119, 245, 0.15);
  padding: 1.65rem 0;
}

.action-list__item a {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding-left: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(2, 31, 102, 1);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: 0px;
  text-align: left;
  padding-right: 6%;
}

/* 橙色方形项目符号 */
.action-list__item a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  /* min-width: 4px; */
  /* min-height: 4px; */
  background: var(--c-marker);
  transform: translateY(-50%);
  border-radius: 100%;
}

/* ==========================================================================
   媒体聚焦：三卡轮播
   ========================================================================== */
.media-carousel {
  position: relative;
  width: 72.5%;
  margin: 0 auto;
}

.media-carousel__stage {
  position: relative;
  height: 30rem;
}

.media-card {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0.61rem;
  box-shadow: 0 1rem 3rem rgba(30, 100, 180, .12);
  /* 左右滑动换位：几何属性平滑过渡；层叠顺序在换位中点再切换 */
  transition:
    left .55s cubic-bezier(.25, .8, .25, 1),
    width .55s cubic-bezier(.25, .8, .25, 1),
    top .55s cubic-bezier(.25, .8, .25, 1),
    height .55s cubic-bezier(.25, .8, .25, 1),
    opacity .45s var(--anim-ease),
    transform .4s var(--anim-ease),
    box-shadow .4s var(--anim-ease),
    z-index 0s linear .275s;
  background: rgba(237, 247, 255, 1);
}

.media-card__img {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  transition: transform .55s var(--anim-ease);
}

.media-card__caption {
  padding: 1.4rem 1rem 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
  color: rgba(30, 79, 145, 1);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4375rem;
  letter-spacing: 0px;
  text-align: left;
}

/* 三个槽位：左 / 中（放大）/ 右（明确百分比，保证滑动过程可插值；
   比例取自设计固定像素：1400 布局下中卡≈695px、侧卡≈529px，中卡压盖两侧形成遮罩式构图） */
.media-card.is-left {
  left: 0;
  width: 32.2%;
  height: 82%;
  top: 6%;
  z-index: 1;
  opacity: .92;
}

.media-card.is-center {
  left: 25.4%;
  width: 50.3%;
  height: 100%;
  top: 0;
  z-index: 99;
}

.media-card.is-right {
  width: 32.2%;
  height: 82%;
  top: 6%;
  z-index: 1;
  opacity: 0.92;
  left: 69%;
}

/* 回收卡（一端循环到另一端）：换位期间沉到最底层，
   从中间卡背后穿过，观感为正常左右滚动而非重叠横穿 */
.media-card.is-warp {
  z-index: 0;
}

/* 两侧箭头 */
.media-carousel__arrow {
  position: absolute;
  top: 42%;
  font-size: clamp(0.75rem, 4.4vw, 1.25rem);
  color: #66a9dc;
  z-index: 3;
  padding: 2rem;
  transition: transform .2s var(--anim-ease);
}

.media-carousel__arrow:active {
  transform: scale(.85);
}

.media-carousel__arrow--prev {
  left: -9rem;
}

.media-carousel__arrow--next {
  right: -9rem;
}

/* ---------- 六宫格新闻 ---------- */
.media-grid {
  width: 72.5%;
  margin: 4.4rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.6rem 3rem;
}

.media-grid__item {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
  border-radius: 0.25rem;
  padding: 1.6rem;
  box-sizing: border-box;
  background: url(../images/634.png) no-repeat 100% 100%;
  background-size: 100% 100%;
  overflow: hidden;
  transition: transform .4s var(--anim-ease), box-shadow .4s var(--anim-ease);
}

.media-grid__thumb {


  /* 矩形 4453：PC 基准 14.25rem(=228px)，移动端可收缩，aspect-ratio 保持比例 */
  flex: 0 1 14.25rem;
  max-width: 14.25rem;
  aspect-ratio: 228 / 130;
  object-fit: cover;
  transition: transform .55s var(--anim-ease);
}

.media-grid__text {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(30, 79, 145, 1);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.8125rem;
  letter-spacing: 0px;
  text-align: left;
  transition: color .35s var(--anim-ease);
}

/* ==========================================================================
   精彩回眸
   ========================================================================== */
.gallery {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery__main {
  width: 84%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  background: url(../images/635.png) no-repeat 100% 100%;
  background-size: 100% 100%;
  padding-bottom: 3.125rem;
}

.gallery__stage {
  position: relative;
  overflow: hidden;
  width: 98%;
  /* 用宽高比锁定比例：PC 还原 633px 高，移动端随宽度等比缩放，避免窄高失真 */
  aspect-ratio: 1152 / 633;
  height: auto;
  margin: 0 auto;
  top: 0.5625rem;
}

.gallery__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--anim-dur) var(--anim-ease);
}

.gallery__photo.is-active {
  opacity: 1;
  /* 主图切换后缓慢推近，增强层次与呼吸感 */
  animation: gallery-photo-breath 8s var(--anim-ease) both;
}

/* 日期 + 说明条：压住主图下沿 */
.gallery__bar {
  position: relative;
  z-index: 2;
  width: 93%;
  /* 矩形 4394 */
  height: 8.5625rem;
  margin: -2.2rem auto 0;
  display: flex;
  align-items: center;
  background: var(--grad-bar);
  padding: 1.8rem 3rem;
}

.gallery__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 3rem;
  margin-right: 3rem;
  border-right: 1px solid rgba(255, 255, 255, 1);
  color: #fff;
  line-height: 1.3;
}

.gallery__date-day {
  color: rgba(255, 255, 255, 1);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 2.375rem;
  letter-spacing: 0px;
  text-align: left;
}

.gallery__date-year {

  /* 2025 */
  width: 2.5rem;
  height: 1.625rem;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: 0px;
  text-align: left;
}

.gallery__bar-text {
  flex: 1;
  min-width: 0;

  color: rgba(255, 255, 255, 1);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.8125rem;
  letter-spacing: 0px;
  text-align: left;
}

/* ---------- 缩略图条 ---------- */
.gallery-strip {
  position: relative;
  border-radius: 0.375rem;
  padding: 3.4375rem;
  box-sizing: border-box;
  width: 100%;
  background: url(../images/zl11.png) no-repeat;
  top: -0.3125rem;
  background-color: #d7eaf7;
  background-size: 100% 100%;
}

.gallery-strip__thumbs {
  display: flex;
  /* 缩略图少时居中；数量多到溢出时自动左对齐并可横向滚动。
     safe 关键字防止溢出后起始项被裁切、无法滚到（不支持的浏览器会忽略本行退回 flex-start）*/
  justify-content: safe center;
  gap: 2.8rem;
  /* 内容超出即横向滚动，承载任意数量的缩略图，且不再压缩其尺寸 */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* 为悬浮上浮/阴影动效预留上下空间，避免被 overflow 裁切 */
  padding: 0.75rem 0.5rem;
  /* 两端轻微渐隐，暗示可横向滚动（收窄至 1.2rem，避免压暗边缘缩略图）*/
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
  /* 隐藏滚动条，保持版面整洁（仍可滚动/拖动）*/
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-strip__thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-strip__thumb {
  /* padding: 4px; */
  background: #fff;
  /* 矩形 17：固定宽度（PC 上限 16rem=256px，随根字号等比缩放）；
     不再随数量增多而被 flex 压缩变小，溢出部分交由容器横向滚动 */
  flex: 0 0 auto;
  width: 16rem;
  max-width: 16rem;
  aspect-ratio: 256 / 137;
  border: 1px solid transparent;
  transition: border-color var(--anim-dur) var(--anim-ease),
    transform .35s var(--anim-ease),
    box-shadow .35s var(--anim-ease);
}

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

.gallery-strip__thumb.is-active {
  box-sizing: border-box;
  border: 1.34px solid rgba(2, 146, 245, 1);
  background: linear-gradient(0.00deg, rgba(235, 247, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
  padding: 0.25rem;
}

.gallery-strip__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(0.6875rem, 3.6vw, 1rem);
  color: #66a9dc;
  padding: 1.6rem;
  transition: transform .2s var(--anim-ease);
}

.gallery-strip__arrow:active {
  transform: translateY(-50%) scale(.85);
}

.gallery-strip__arrow--prev {
  left: 0;
}

.gallery-strip__arrow--next {
  right: 0;
}

/* ==========================================================================
   页脚
   ========================================================================== */
.footer {
  text-align: center;
  height: 6.1875rem;
  background: linear-gradient(90.00deg, rgba(1, 156, 222, 1) 0%, rgba(30, 79, 145, 1) 100%);
}

.footer__text {
  color: rgba(255, 255, 255, 1);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 6.1875rem;
  letter-spacing: 0.0625rem;
}

/* ==========================================================================
   悬浮反馈与微交互增强
   统一复用 --anim-ease；hover 面向 PC，:active 面向触摸，二者并存不冲突
   ========================================================================== */

/* —— 图片呼吸：轮播主图 / 精彩回眸主图切换后缓慢推近 —— */
/* .carousel__slide.is-active .carousel__img {
  animation: carousel-img-breath 7.5s var(--anim-ease) both;
}*/

@keyframes carousel-img-breath {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

@keyframes gallery-photo-breath {
  from {
    transform: scale(1.01);
  }

  to {
    transform: scale(1.08);
  }
}

/* —— 媒体聚焦三卡：中卡悬浮上浮，卡片图片轻微放大 —— */
.media-card.is-center:hover {
  transform: translateY(-0.6rem);
  box-shadow: 0 1.6rem 4rem rgba(30, 100, 180, .24);
}

.media-card:hover .media-card__img {
  transform: scale(1.05);
}

/* —— 六宫格：整卡上浮 + 缩略图放大 + 标题变色 —— */
.media-grid__item:hover {
  transform: translateY(-0.6rem);
  box-shadow: 0 1.2rem 2.6rem rgba(30, 100, 180, .2);
}

.media-grid__item:hover .media-grid__thumb {
  transform: scale(1.07);
}

.media-grid__item:hover .media-grid__text {
  color: var(--c-dot-active);
}

/* —— 精彩回眸缩略图：悬浮上浮放大 —— */
.gallery-strip__thumb:hover {
  transform: translateY(-0.5rem) scale(1.03);
  box-shadow: 0 1rem 2.4rem rgba(30, 100, 180, .26);
}

/* —— 查看更多：悬浮右移 + 提亮 —— */
.section__more {
  transition: transform .3s var(--anim-ease), filter .3s var(--anim-ease);
}

.section__more:hover {
  transform: translateX(0.4rem);
  filter: brightness(1.2);
}

/* —— 轮播箭头：悬浮提亮 + 投影（不改 transform，避免与居中/按压冲突） —— */
.media-carousel__arrow,
.gallery-strip__arrow {
  transition: transform .25s var(--anim-ease), filter .25s var(--anim-ease);
}

.media-carousel__arrow:hover,
.gallery-strip__arrow:hover {
  filter: brightness(1.18) drop-shadow(0 0.3rem 0.6rem rgba(30, 100, 180, .35));
}

/* —— 轮播圆点：悬浮放大 —— */
.carousel__dot {
  transition: background var(--anim-dur) var(--anim-ease), transform .25s var(--anim-ease);
}

.carousel__dot:hover {
  transform: scale(1.3);
}

/* —— 实干进行时头条：悬浮变蓝 + 下划线自左展开（用背景绘制，规避 overflow 裁剪） —— */
.action__headline a {
  /* background-image: linear-gradient(90deg, var(--c-dot-active), var(--c-link)); */
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  transition: color .35s var(--anim-ease), background-size .45s var(--anim-ease);
}

.action__headline a:hover {
  color: var(--c-dot-active);
  background-size: 100% 2px;
}

/* —— 实干进行时列表项：悬浮标题变蓝 + 橙色圆点放大 —— */
.action-list__item a {
  transition: color .3s var(--anim-ease);
}

.action-list__item a::before {
  transition: transform .3s var(--anim-ease), background .3s var(--anim-ease);
}

.action-list__item:hover a {
  color: var(--c-dot-active);
}

.action-list__item:hover a::before {
  /* transform: translateY(-50%) scale(1.5); */
  background: var(--c-link);
  width: 6px;
}
@media (max-width: 1400px) {

.section__body {
    max-width: 1300px;
    
}
.gallery {
    max-width: 1300px;
}.gallery-strip {
    position: relative;
    border-radius: 0.375rem;
    padding: 3.4375rem;
    box-sizing: border-box;
    width: 100%;
    background: url(../images/zl11.png) no-repeat;
    background-size: 100% 100%;
    top: -0.3125rem;
    background-color: #d7eaf7;
}
}
@media (max-width: 1300px) {

.section__body {
    max-width: 1100px;
    
}
.gallery {
    max-width: 1100px;
}.gallery-strip {
    
    background-size: 100% 100%;
   
}
}
/* ==========================================================================
   响应式适配
   移动端（≤768px）：结构重排为纵向单列，规避横向拥挤与文字裁切；
   以下规则仅窄屏生效，PC（≥769px）观感严格不变。
   ========================================================================== */
@media (max-width: 768px) {
.banner {
    height: 30vh;
}
.section__title {
    width: 45%;
}
.section__head {
    width: 95%;
 
}
.action__media .carousel__caption-text {
    font-size: 1.875rem!important;
   
    -webkit-line-clamp: 1;
}
.action__desc {
        -webkit-line-clamp: 4;
    
}
.gallery-strip__arrow {
   
    display: none;
}
    .gallery-strip {
       
        padding: 1.4375rem;
       
    }
.section--gallery {
    padding-top: 2rem;
}
.media-card.is-center {
  left: 14.4%;
  width: 73.3%;
}
.is-center .media-card__caption {
    font-size: 1.875rem!important;
   
}


  /* 首屏背景：等比裁切填充，避免窄高视口下插画被纵向拉伸 */
  .banner__bg {
    object-fit: cover;
  }

  /* 权威发布 / 实干进行时：双栏改为上下堆叠，各占满宽 */
  .section__body {
    flex-direction: column;
    gap: 5vw;
    padding: 0px 1.5rem 0px 1.5rem;
  }

  .auth__media,
  .auth__list,
  .action__text,
  .action__media {
    width: 100%;
  }

  /* 媒体聚焦三卡轮播：容器加宽；舞台高度收敛，避免 rem 化后卡片过高 */
  .media-carousel {
    width: 92%;
  }

  .media-carousel__stage {
    height: 25rem;
  }

  /* 六宫格：改单列纵向排列，缩略图固定小尺寸、标题占满剩余宽度（根 8px 基准：11rem=88px） */
  .media-grid {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 3vw;
  }

  .media-grid__thumb {
    flex: 0 0 11rem;
    width: 11rem;
    max-width: 11rem;
  }

  /* 页脚：高度随内容自适应，长标题单行/换行均完整可见 */
  .footer {
    height: auto;
    padding: 5vw 5vw;
  }

  /* —— 移动端字号（根字号触底 8px，主规则 rem 偏小，按 8px 基准上调至可读；rem = 目标px / 8）—— */
  .media-grid__text,
  .gallery__bar-text,
  .action__media .carousel__caption-text,
  .is-center .media-card__caption,
  .auth-list__item a,
  .action-list__item a {
    font-size: 1.875rem;   /* 15px */
    line-height: 2.625rem; /* 21px */
  }

  .action__desc,
  .carousel__caption-text,
  .media-card__caption {
    font-size: 1.875rem;    /* 14px */
    line-height: 2.5rem;   /* 20px */
  }

  .action__headline a {
    font-size: 2.25rem;    /* 18px */
    line-height: 2.875rem; /* 23px */
  }

  .gallery__date-day {
    font-size: 2.25rem;    /* 18px */
    line-height: 2.75rem;  /* 22px */
  }

  .gallery__date-year {
    font-size: 1.75rem;    /* 14px */
    line-height: 2rem;     /* 16px */
  }

  .section__more {
    font-size: 1.5rem;   /* 13px */
    line-height: 2rem;
  }

  .footer__text {
    font-size: 1.875rem;   /* 15px */
    line-height: 1.6;
    letter-spacing: 0;
  }

  /* 说明条 / 日期条：高度改自适应，避免 rem 化后固定高裁切放大后的文字 */
  .carousel__caption {
    height: auto;
    padding: 1.25rem 1.5rem;
  }

  .gallery__bar {
    height: auto;
    padding: 1.5rem 2rem;
  }
}

/* ==========================================================================
   320px 以下极窄屏：微调间距防溢出
   ========================================================================== */
@media (max-width: 340px) {
  .media-grid {
    gap: 2vw 2vw;
  }

  .media-grid__thumb {
    /* 单列布局下进一步缩小缩略图（根 8px 基准：9rem=72px）；高度交给 aspect-ratio 控制，避免变形 */
    flex: 0 0 9rem;
    width: 9rem;
    max-width: 9rem;
    height: auto;
  }

  .gallery-strip {
    padding: 2.6vw 8vw;
  }

  .gallery-strip__thumbs {
    gap: 3.4vw;
  }
}

/* PC 版型：≥1600 的等比锁定已由 html 根字号 clamp(…, 1vw, 16px) 上限承担，无需额外 --fw 覆写 */

/* 减少动态偏好：关闭过渡动画 */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.section--auth {

  background: url(../images/image177.png) no-repeat 100% 100%;

  padding-bottom: 17.5rem;
}

.action__media .carousel__img {}

.action__media .carousel__caption {

  position: relative;
}




.action__media .carousel__caption-text {
  color: rgba(255, 255, 255, 1);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 2.625rem;
  letter-spacing: 0px;
  text-align: left;
}

.media-card__overlays {
  box-sizing: border-box;
  border: 1px solid rgba(1, 156, 222, 1);
  background: rgba(255, 255, 255, 1);
  padding: 0.625rem;
  height: 100%;
  /* 纵向弹性布局：图片区自适应填充剩余高度，避免固定像素溢出卡片 */
  display: flex;
  flex-direction: column;
}

.media-card__overlayimg {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: url(../images/bf.png) no-repeat 100%;
  background-size: 100px 100px;
  position: relative;
}
.media-card__overlayimg a::after{
    content: "";
    background: url(../images/bf.png) no-repeat 100%;
    background-size: 100%;
    position: absolute;
    width: 4rem;
    height: 4rem;
    /* background: red; */
    /* z-index: 999; */
    left: 45%;
    top: 45%;
    bottom: 0;
}
   
.is-center .media-card__overlayimg {
  /* 中卡图片区同样弹性填充，比例由 object-fit: cover 保持 */
  flex: 1;
  min-height: 0;
}

.is-center .media-card__caption {
  color: rgba(30, 79, 145, 1);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.8125rem;
  letter-spacing: 0px;
  text-align: left;
}