/* 首页（guanwang.html）版式。
   设计变量与 reset 在 theme.css（全站唯一来源），这里只写首页自己的区块。

   这一版把「区块」当成有节奏的整体来排：
     · 每个 section 自己带统一的上下留白（原先靠 .about-us/.service/
       .company-activities 各写各的 margin-top，凑出来的空档大小不一）；
     · 标题用 theme.css 的 .title1（48px 渐变短杠），不再用 83% 宽的下划线；
     · 卡片统一走 .card 的观感（描边 + 圆角 + 悬浮位移），不再用 scale(1.05)。
   ========================================================================== */

img {
  width: 100%;
}

html {
  overflow-x: hidden;
}

/* ==========================================================================
   轮播（英雄区）
   ========================================================================== */

.glide {
  position: relative;
  z-index: 50;
  /* 原先这里是 `top: -80px`。那是头部还在文档流里时的补偿写法，头部改成
     position:fixed 之后它就只剩副作用了：整块被上移 80px，顶部 80px 图像被
     裁掉，同时在下方空出 80px 的缝（相对定位不改变占位）。去掉即可。 */
}

/* position: relative 是必需的不是装饰 —— 少了它，slide 里那两个绝对定位后代
   （.slide-caption 和 .backdrop）会一路向上找到有 transform 的 .glide__slides
   当包含块。而 .glide__slides 是铺开所有 slide + Glide 克隆出来的副本的整条轨道
   （2 张图 ≈ 6 个 slide，量到 8400px 宽），于是：

     · 字幕的 left:50% 算出来是 4233px（半条轨道），不是半屏 —— 实测值。
     · 遮罩的 100deg 渐变被摊在 8400px 上，视口里只能看到最前面 1/6 那一段，
       强度几乎恒为 .85 的深蓝 —— 这才是英雄区图片「看不见、整块发闷」的真正
       原因，不是图片本身暗。

   同时 display 从 flex 改成 block：flex 会把绝对定位子元素的静态位置按
   align/justify 摆开，`.slide-caption.left` 会被摆到正中，类名里的 left 失效。 */
.glide__slide {
  position: relative;
  display: block;
}

.glide__slide img,
.glide__slide video {
  width: 100%;
  height: clamp(520px, 74vh, 760px);
  object-fit: cover;
  display: block;
}

/* 遮罩：两层叠加。
   1) 横向渐变 —— 左侧压到 .90 保证白字对比度（字幕占 160–820px，正好落在左半），
      右侧一路降到 .06 把图片让出来。原先是一层均匀的 30% 黑：该深的地方不够深、
      该透的地方不透，整张图被拉成一块灰。
   2) 纵向渐变 —— 只在底部压暗，给轮播圆点一个能读的底，顺便收住英雄区下缘。 */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 60;
  background:
    linear-gradient(
      180deg,
      rgba(6, 20, 45, 0) 58%,
      rgba(6, 20, 45, .42) 100%
    ),
    linear-gradient(
      100deg,
      rgba(6, 20, 45, .90) 0%,
      rgba(6, 20, 45, .78) 34%,
      rgba(6, 20, 45, .46) 58%,
      rgba(6, 20, 45, .14) 78%,
      rgba(6, 20, 45, .06) 100%
    );
}

/* 字幕对齐到与下方 section 内容完全相同的左边缘：section 是
   max-width:--container + padding-inline:clamp(20px,6vw,80px) 且整体居中，
   所以 1440 下正文左边缘在 (1440-1280)/2 + 80 = 160px。这里用同样的
   「居中一个 container 宽的盒子 + 同一条 padding」复刻出同一个 160px，
   英雄区标题就和下方 `.features` / `.services` 的栅格严丝合缝对上了。 */
.slide-caption {
  position: absolute;
  z-index: 70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: var(--container);
  padding-inline: clamp(20px, 6vw, 80px);
  color: #fff;
  text-align: left;
}

/* 文字块自身限宽：容器有 1120px，但正文一行拉这么长会读不动 */
.slide-caption h1,
.slide-caption h3,
.slide-caption .explore-btn {
  max-width: 660px;
}

/* color 必须显式写。theme.css 有一条基础的 `h1..h6 { color: var(--ink) }`，
   那是直接声明，**优先级高于继承** —— 父级 .slide-caption 的 color:#fff 传不下来。
   实测 h1 的 computed color 就是 rgb(31,41,55)，深灰标题压在深色夜景图上，
   正是「首页主标题像看不见一样」的原因。h3 早就单独写了 color 才没中招。 */
.slide-caption h1,
.slide-caption h2,
.slide-caption h3,
.slide-caption h4 {
  color: #fff;
}

.slide-caption h1 {
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

/* 标题下的品牌色短线。放在 h1::after 而不是新加 DOM —— ::after 不是子元素，
   不影响下面按 nth-child 排的错峰入场延时。
   数据未到时 h1 是空的，此时只剩一条孤零零的短线，用 :not(:empty) 挡掉。 */
.slide-caption h1:not(:empty)::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: var(--sp-6);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand), rgba(255, 255, 255, .35));
}

.slide-caption h3 {
  margin: var(--sp-6) 0 var(--sp-8);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.8;
  font-weight: 400;
  color: rgba(255, 255, 255, .84);
  /* 详情是长段文字，限制行数免得把按钮顶出首屏 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 字幕入场。隐藏态限定在 `html.js-anim` 下 —— 这个类只由 glide.js 成功装配后
   才加上，所以脚本挂了字幕依然是可见的（旧实现把 opacity:0 写成内联样式，靠
   anime 才能变回来，anime 一出问题主标题就永久消失）。 */
.js-anim .slide-caption > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js-anim .slide-caption.is-active > * {
  opacity: 1;
  transform: none;
}

/* 依次入场，三个元素错开 */
.js-anim .slide-caption.is-active > *:nth-child(2) { transition-delay: .1s; }
.js-anim .slide-caption.is-active > *:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .slide-caption > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 var(--sp-8);
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 28px rgba(0, 102, 235, .42);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.explore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 102, 235, .52);
}

/* 轮播箭头：圆形玻璃按钮，替代原先的方块 */
.glide__arrow {
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: .9;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.glide__arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
  opacity: 1;
}

.glide__arrow--left { left: var(--sp-6); }
.glide__arrow--right { right: var(--sp-6); }

/* 圆点：未选中是半透明短横，选中拉长成品牌色胶囊 */
.glide__bullets {
  bottom: var(--sp-8);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
}

.glide__bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .5);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.glide__bullet--active {
  width: 30px;
  background: #fff;
}

/* ==========================================================================
   内容区
   ========================================================================== */

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

section {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: var(--container);
  padding-inline: clamp(20px, 6vw, 80px);
  /* 统一的区块垂直节奏 */
  padding-block: clamp(60px, 7.5vw, 104px);
}

/* 「最新动态」与「建议与反馈」的标题段。
   --------------------------------------------------------------------------
   这里原本有一条 .section-bg::before 浅底色带，挂在只包住 <h2> 的那个 <section>
   上。两个问题叠在一起：
     · 宽度 —— ::before 铺的是 section 自己的盒子，而 section 是
       max-width:--container 的居中子项。1440 视口下实测色带 x=73..1352（1279px），
       两侧各留 72px 白边，整条带子悬在白色底上，像一张没加载出来的图。
     · 高度 —— 列表（.latest-news / .suggest）是 <section> 的**兄弟**而不是子元素，
       所以色带只有标题那么高，到列表就断掉；「建议与反馈」那一段更明显：
       1280 宽的色带下面紧跟着 1120 宽的 .suggest-empty 面板，两条不同宽度的
       浅灰矩形叠在一起。
   这两处底色不带任何结构信息（标题本来就有 .title1 的品牌色下划线），去掉后
   整页回到「白底 + 卡片」的一致结构，和 关于平台 / 功能模块 / 信息中心 一致。
   保留 padding-bottom:0 —— 它是 .section-bg 唯一带来的布局效果，去掉会把
   标题与列表之间的间距撑开 104px。 */
#latestNews,
.suggest-section {
  padding-bottom: 0;
}

.intro {
  max-width: 760px;
  margin: calc(-1 * var(--sp-8)) 0 var(--sp-12);
  font-size: var(--fs-lg);
  line-height: 1.7;
  text-align: center;
  color: var(--ink-3);
}

/* ==========================================================================
   最新动态
   —— 标题在 <section> 里、列表在它外面（HTML 结构如此），所以两段留白要自己接上：
      标题段收掉下边距，列表段接住本该有的下边距。
   ========================================================================== */

/* max-width 是关键，不是装饰。本块与 #about-us/#service 一样是 .content-wrapper
   的居中子项，但它们是 <section>（自带 max-width:--container + 80px 内边距，
   内容框 1120），而这里是裸 <div> —— 不写就铺满 1425，内容框 1265。
   于是整页左边缘在「最新动态」这一节突然向外跳 73px，和上面的栅格对不齐。
   实测（_probe.py）：.services x=153 w=1120，而 .latest-news ul x=80 w=1265。 */
.latest-news {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 clamp(20px, 6vw, 80px) clamp(60px, 7.5vw, 104px);
}

.latest-news ul {
  width: 100%;
  padding: var(--sp-2) clamp(0px, 2vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.latest-news ul li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur) var(--ease);
}

.latest-news ul li:last-child {
  border-bottom: 0;
}

.latest-news ul li:hover {
  background: var(--brand-soft);
}

/* 原先序号压在一张 ind-bg.png 蓝箭头上，左右靠 top/left 硬调。
   那个图是纯装饰，这里直接不显示，序号用 CSS 画。 */
.latest-news ul li img {
  display: none;
}

.new-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  /* 底色原来是 --surface-2（#F7F9FC），压在白色卡片上几乎等于没有 ——
     4 号之后的序号看上去像「忘了加样式」。换成品牌浅色，让每一行都有明确的
     序号块，前三名再用实心渐变拉开层次。 */
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 前三名给实心品牌色，一眼能看出排序 */
.latest-news ul li:nth-child(-n+3) .new-num {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
}

.new-title {
  flex: 1 1 auto;
  /* flex 子项默认 min-width:auto，配合 nowrap 会拒绝收缩、反过来撑破容器 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}

.latest-news ul li:hover .new-title {
  color: var(--brand);
}

/* 悬停时整行是浅蓝底，标签的浅蓝底就糊在一起了，翻成白底 */
.latest-news ul li:hover .new-tag {
  background: var(--surface);
}


.new-time {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink-4);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   关于平台
   ========================================================================== */

/* 列间距必须与 .services 完全一致，否则上下两个三栏栅格的列边界错开
   （原来这里是 clamp(28px,4vw,56px)=56、.services 是 --sp-6=24，
   1440 下列宽一个 336 一个 357，同一页里两套栅格看着就是没对齐）。 */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) var(--sp-8);
  width: 100%;
}

.feature {
  display: grid;
  grid-template-areas:
    "icon title"
    "content content";
  grid-template-columns: 54px 1fr;
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
}

/* 图标统一住进「圆角方块」里：原先是 34px 的裸图标，六个并排显得散且单薄。

   尺寸与填充必须与 .service-item i.fas 完全一致。两节是上下相邻的两个
   三栏栅格，图标块又落在同样的列位置上 —— 之前这里是 52px 浅蓝底 + 图标取
   --brand，下面那节是 54px 品牌渐变底 + 白图标，同一块方块只差一个填充色，
   读起来不是「两种设计」而是「同一个组件被改坏了」。两节的**容器**仍然不同
   （关于平台是开放式条目、功能模块是卡片），那是层级差异，保留。 */
.feature i.fas {
  grid-area: icon;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-size: 22px;
}

.feature-title {
  grid-area: title;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.feature-content {
  grid-area: content;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-3);
}

/* ==========================================================================
   功能模块
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  width: 100%;
}

.service-item {
  display: grid;
  grid-template-areas:
    "icon"
    "title"
    "content";
  grid-template-columns: 1fr;
  row-gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.service-item:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 102, 235, .28);
  box-shadow: var(--shadow-lg);
}

.service-item i.fas {
  grid-area: icon;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-size: 22px;
}

.service-item .service-title {
  grid-area: title;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.service-item .service-content {
  grid-area: content;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-3);
}

/* ==========================================================================
   信息中心
   ========================================================================== */

/* 与 .features / .services 同一套栅格参数：三个三栏区块的列边界必须落在
   同一条竖线上，否则整页从上到下有一条看不出来源、但能感觉到的错位。 */
.activities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  width: 100%;
}

.activity {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.activity:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 102, 235, .28);
  box-shadow: var(--shadow-lg);
}

.act-image-wrapper {
  /* 原先写死 160px 高并靠 margin:-24px 出血 —— 卡片去掉内边距后不再需要 */
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.act-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}

.activity:hover .act-image-wrapper img {
  transform: scale(1.05);
}

.activity .meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5, 20px) var(--sp-5, 20px) 0;
  color: var(--ink-4);
  font-size: var(--fs-sm);
}

.activity .meta > p {
  margin: 0;
}

/* 原先靠 margin-left:36px 硬推开，改成 flex gap */
.activity .meta > p:last-child {
  margin-left: 0;
}

.act-title {
  margin: var(--sp-3) 0 0;
  padding: 0 var(--sp-5, 20px);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.activity article {
  height: auto;
  margin: var(--sp-3) 0 0;
  padding: 0 var(--sp-5, 20px);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* 正文来自富文本，字号/字体由内联样式带进来，这里压回统一值 */
.activity article p span {
  font-size: var(--fs-sm) !important;
  font-family: inherit !important;
}

.read-more-btn {
  align-self: flex-start;
  margin: var(--sp-4) var(--sp-5, 20px) var(--sp-5, 20px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.read-more-btn::after {
  content: " →";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.read-more-btn:hover {
  color: var(--brand-dark);
}

.read-more-btn:hover::after {
  transform: translateX(3px);
}

/* ==========================================================================
   建议与反馈
   ========================================================================== */

/* 从一行居中的小蓝字改成描边按钮。原来只有 14px 的品牌色文字，
   底下没有任何可点的形状，在空列表时更是孤零零悬在版心中央。 */
.more-suggest {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-3) var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* 箭头由 ::after 补，不吃字体里的空格宽度 —— 原来写的是 content:" →"，
   那个前导空格在字号变化时会跟着变，和 .read-more-btn 的做法也不一致。 */
.more-suggest::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}

.more-suggest:hover {
  color: var(--brand-dark);
  border-color: var(--brand);
  background: var(--brand-soft);
}

.more-suggest:hover::after {
  transform: translateX(3px);
}

/* 空状态 —— 原来反馈列表为空时这里什么都不剩，标题下面直接空一大片，
   只有一枚「查看更多」，看不出是「没有反馈」还是「没加载出来」。 */
/* 面板观感（底色、圆角、限宽、居中）统一在 theme.css 的
   .feedback-empty/.suggest-empty/... 那一组里，这里只补这一处特有的：
   图标 + 标题 + 说明的三段结构，以及比通用空状态略紧的内边距
   （下面紧跟着整个留言区，不需要再占满一屏）。 */
.suggest-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}

.suggest-empty i {
  margin-bottom: var(--sp-3);
  font-size: 30px;
  color: var(--brand);
  opacity: .85;
}

.suggest-empty-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-2);
}

.suggest-empty-sub {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-4);
}

.suggest-section {
  clear: both;
  width: 100%;
}

/* 同 .latest-news：不写 max-width 就会比其它区块宽 145px（实测 x=0 w=1425） */
.suggest {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-8) clamp(20px, 6vw, 80px) var(--sp-12);
}

.suggest a {
  text-decoration: none;
}

.suggest .newsbox-list {
  margin-top: var(--sp-3);
}

.suggest .newsbox-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.suggest .newsbox-banner:hover {
  background-color: var(--brand);
}

.suggest .newsbox-banner i {
  flex: 0 0 auto;
  width: 13px;
  height: 16px;
  background-image: url(../img/guanwang/play-black_07.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.suggest .newsbox-banner:hover > i {
  background-image: url(../img/guanwang/play_07.png);
}

.suggest .newsbox-banner .newsbox-nav-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
}

.suggest .newsbox-banner:hover > .newsbox-nav-title,
.suggest .newsbox-banner:hover > .newsbox-nav-content,
.suggest .newsbox-banner:hover > .newsbox-nav-time {
  color: #fff;
}

.suggest .newsbox-banner .newsbox-nav-content {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest .newsbox-banner .newsbox-nav-time {
  flex: 0 0 auto;
  margin: 0;
  float: none;
  color: var(--ink-4);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* 选中项原先是 #FF0000 !important */
.li-select {
  background-color: var(--brand) !important;
  color: #fff;
}

.suggest ul,
.suggest li {
  list-style: none;
}

/* ==========================================================================
   留言（请留下您的建议和反馈）
   ========================================================================== */

.data-section {
  position: relative;
  z-index: 20;
  width: 100%;
  min-height: 300px;
  max-width: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 不能用 overflow:hidden —— 底部的圆形笔徽章要压出这条色带。背景图自己
     是 inset:0 + object-fit:cover，本来就不会溢出。 */
}

/* 背景图 + 压暗。原先把 <img> 本身当背景层用（position:absolute + 又给
   background-color + content:""），既能生效又很难读，这里拆成两层说清楚。 */
.data-section > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1px) saturate(1.05);
}

.data-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 20, 45, .62), rgba(6, 20, 45, .76));
}

.data-section .message-wrap {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  max-width: 720px;
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: #fff;
}

.data-section .message-wrap div:nth-of-type(1) {
  margin-bottom: var(--sp-3);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.data-section .message-wrap div:nth-of-type(2) {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
}

.pen-wrap {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  width: 84px;
  height: 84px;
  border: 6px solid var(--surface);
  border-radius: 50%;
  background-color: var(--brand-soft);
  background-image: url(../img/guanwang/pen.png);
  background-size: 46%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgba(6, 20, 45, .18);
}

.item-center {
  text-align: center;
}

.contact-content {
  width: 100%;
  /* 给压出色带的笔徽章让出位置（它是 -42px 的绝对定位，不占文档流） */
  margin-top: var(--sp-16);
}

/* 表单给一张卡片。原先控件直接浮在白底上，和上面那条深色色带之间只有
   一大片留白，看不出这是一个「表单区块」。 */
.contact-content-right {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   表单
   —— 首页表单是 Element-UI，下面这些选择器是给它的皮肤（原生 input/textarea
      的规则保留，页面里还有非 Element 的裸控件）。
   ========================================================================== */

input,
textarea {
  width: 100%;
  padding: 12px 16px;
  margin-top: var(--sp-4);
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input {
  height: 48px;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow);
}

::placeholder,
::-webkit-input-placeholder {
  color: var(--ink-4);
  font-size: var(--fs-sm);
}

.contact-content-right div:nth-child(1) input {
  margin-top: 0;
}

.message-desc {
  position: relative;
}

/* 星号要跟着 textarea 的第一行走，而 textarea 自己带 margin-top:--sp-4，
   所以偏移量必须把这 16px 算进去。原先写 top:14px —— 那是相对 .message-desc
   的顶边，落在 textarea 上方的空白里，看上去像一枚飘在字段外面的红点。 */
.message-desc::before {
  content: "*";
  position: absolute;
  top: calc(var(--sp-4) + 14px);
  left: -10px;
  color: var(--danger, #E5484D);
  line-height: 1;
}

.el-form-item__error {
  position: absolute;
  top: 98%;
  left: 0;
  padding-top: 0;
  color: var(--danger, #E5484D);
  font-size: var(--fs-sm);
  line-height: 1;
}

/* width:auto 是必需的：上面那条 `input { width: 100% }` 是给文本框的，
   会把 <input type="button"> 一起撑满整行。min-width:132px 拦不住它
   （100% > 132px），于是提交按钮变成一条通栏胶囊 —— 桌面端的移动端观感。 */
.submit-btn {
  display: block;
  width: auto;
  min-width: 132px;
  margin: var(--sp-6) auto 0;
  height: 48px;
  padding: 0 var(--sp-8);
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 8px 22px var(--brand-glow);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--brand-glow);
}

.hidden .el-upload--picture-card {
  display: none;
}

/* ==========================================================================
   适配
   ========================================================================== */

@media (max-width: 1100px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }

  .activities {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .features,
  .services,
  .activities {
    grid-template-columns: 1fr;
  }

  /* 英雄区在窄屏改为「图在下、文字压在上面」太挤，直接把高度放低、
     文字靠左，保证 h1 + 一行副标题 + 按钮都能进首屏 */
  .glide__slide img,
  .glide__slide video {
    height: clamp(420px, 62vh, 520px);
  }

  .glide__arrow {
    display: none;
  }

  /* 最新动态的行在窄屏改两行。
     一行放不下：390 视口下这一行可用宽度约 304px，而序号 26 + 三个 16px 间距
     + 分类标签约 72 + 日期约 133 已经占掉 279，标题只剩 20 来个像素 ——
     实测在 390 下每一条的标题都被压成一个「...」，整块列表读不出任何内容。
     日期换到第二行、标题允许折两行，是这一行在窄屏上唯一放得下的排法。 */
  .latest-news ul li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas:
      "num title"
      ".   time";
    align-items: start;
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
  }

  .new-num {
    grid-area: num;
  }

  .new-title {
    grid-area: title;
    /* 覆盖桌面端的 nowrap + 省略号：窄屏上折两行比截成「...」可读 */
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .new-time {
    grid-area: time;
  }

  .data-section {
    flex-direction: column;
    padding-block: var(--sp-12);
  }

  .data-section .message-wrap {
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
  }

  .pen-wrap {
    width: 64px;
    height: 64px;
    margin-inline: 0;
  }
}

@media (max-width: 576px) {
  .new-time {
    font-size: 13px;
  }

  .new-title {
    font-size: var(--fs-sm);
  }
}