@charset "utf-8";
/* ==========================================================================
   艾普斯 APS · 新设计系统
   加载顺序：在 style.css 之后，覆盖视觉层
   原则：不动任何易优数据标签，只改样式与版式
   ========================================================================== */

/* ==========================================================================
   【重要】box-sizing 兜底 —— 放在最前面，别删
   --------------------------------------------------------------------------
   这个站的老 CSS（style.css / qhdcontent.css）里**没有任何全局 box-sizing 重置**，
   全站默认是浏览器原始的 content-box。

   后果：只要一个元素既写 width:100%、又加了 padding 或 border，
        它的实际宽度 = 容器宽 + 左右内边距 + 左右边框，必然溢出。
        2026-09-20 就踩了这个坑 —— 内页留言条四个输入框各溢出 34px，
        互相压在一起，看着像框叠框。

   做法：给 aps 组件、以及组件「里面的所有元素」统一成 border-box。
   为什么必须连里面一起管：光管带 aps- 类名的还不够 ——
   像 .aps-cbar-fields 里那四个 <input> 身上是没有 aps- 类名的，
   单独漏掉它们，框照样溢出、照样叠在一起（第一次就是这么修错的）。

   唯一让开的地方是 .qhd-content —— 那是后台编辑器写进正文的内容，
   里面的 table / img 都是按 content-box 排的，动它会直接搞乱客户正文排版。
   实测确认过：这个站的正文区现在就是 content-box，这里原样还回去，等于没动。
   ========================================================================== */
[class^="aps-"],
[class*=" aps-"],
[class^="aps-"] *,
[class*=" aps-"] *{ box-sizing: border-box; }

/* 后台编辑器正文区：保持原样，不要动 */
[class^="aps-"] .qhd-content,
[class*=" aps-"] .qhd-content,
[class^="aps-"] .qhd-content *,
[class*=" aps-"] .qhd-content *{ box-sizing: content-box; }

:root{
  /* 品牌 */
  --aps-red:      #D11927;
  --aps-red-d:    #A8121E;
  --aps-red-l:    #E8343F;

  /* 深色 */
  --aps-navy:     #0A2540;
  --aps-navy-2:   #13375C;
  --aps-navy-3:   #1E4A73;

  /* 中性 */
  --aps-ink:      #111820;
  --aps-text:     #39434E;
  --aps-muted:    #6B7785;
  --aps-line:     #E6EBF0;
  --aps-soft:     #F6F7F9;

  /* 尺寸 */
  --aps-w:        1200px;
  --aps-hd:       84px;
  /* ⚠️ 圆角有两套名字：--aps-r / --aps-r-lg 是先写的（4px / 8px，偏方），
     --r-sm/md/lg/xl 是后加的正式阶（6/10/14/20，偏圆）。
     组件各用各的，导致全站圆角不统一、整体看着偏方。
     2026-09-20 把旧名字直接指向新阶，32 处引用一次性统一，不用挨个改。 */
  --aps-r:        var(--r-md);   /* 旧名 → 10px（输入框 / 按钮 / 小面板） */
  --aps-r-lg:     var(--r-lg);   /* 旧名 → 14px（卡片 / 大块） */
  --aps-sh:       0 2px 12px rgba(10,37,64,.06);
  --aps-sh-lg:    0 12px 32px rgba(10,37,64,.14);

  --aps-font: "PingFang SC","Microsoft YaHei","微软雅黑","Helvetica Neue",Arial,sans-serif;
  /* 数字用等宽表格数字，价格/参数/数据条对齐才好看 */
  --aps-font-num: "DIN Alternate","Bebas Neue","Helvetica Neue",Arial,sans-serif;

  /* ---------- 垂直节奏（全站统一，改这里就够） ---------- */
  --aps-sec:    48px;   /* 区块上下留白 */
  --aps-sec-sm: 36px;   /* 窄条区块（数据条 / 咨询条 / 页脚） */
  --aps-ttl:    30px;   /* 区块标题 → 内容 */

  /* ==========================================================================
     设计令牌 · 2026-09-20 新增
     全站所有字号/间距/圆角/阴影都必须从下面取值，不要再写死数字。
     要整体调大调小，改这里一处即可。
     ========================================================================== */

  /* ---------- 字号阶（1.25 倍音阶，从 12 到 52）---------- */
  --fs-xs:   12px;   /* 角标、英文副标题、页脚小字 */
  --fs-sm:   13px;   /* 卡片说明、表格、面包屑 */
  --fs-base: 14px;   /* 正文默认、输入框、按钮小号 */
  --fs-md:   15px;   /* 卡片标题、列表标题 */
  --fs-16:   16px;   /* 大正文、正文强调 */
  --fs-lg:   18px;   /* 小标题、卡片大标题 */
  --fs-xl:   20px;   /* 区块副标题 */
  --fs-2xl:  24px;   /* 区块标题（内页） */
  --fs-3xl:  30px;   /* 区块标题（首页） */
  --fs-4xl:  38px;   /* 首屏标题（大屏） */
  --fs-5xl:  52px;   /* 数字展示、超大标题 */

  /* ---------- 行高 ---------- */
  --lh-tight:  1.2;   /* 大标题 */
  --lh-title:  1.35;  /* 卡片标题、小标题 */
  --lh-base:   1.7;   /* 正文（中文阅读舒适区） */
  --lh-loose:  1.95;  /* 长段落（关于我们这类） */

  /* ---------- 字重 ---------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---------- 间距阶（4 的倍数，别写 13px 这种）---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* ---------- 圆角阶 ---------- */
  --r-sm:   6px;    /* 标签、小按钮 */
  --r-md:   10px;   /* 输入框、按钮 */
  --r-lg:   14px;   /* 卡片 */
  --r-xl:   20px;   /* 大面板、图片卡 */
  --r-full: 999px;  /* 胶囊 */

  /* ---------- 阴影阶（越往上越"浮"）---------- */
  --sd-xs: 0 1px 2px rgba(10,37,64,.04);
  --sd-sm: 0 2px 8px rgba(10,37,64,.05);
  --sd-md: 0 6px 20px rgba(10,37,64,.07);
  --sd-lg: 0 14px 38px rgba(10,37,64,.12);
  --sd-red: 0 10px 24px rgba(209,25,39,.26);

  /* ---------- 过渡曲线（统一手感）---------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .18s var(--ease);
  --t-base:    .26s var(--ease);
  --t-slow:    .45s var(--ease-out);

  /* ---------- 容器宽度 ---------- */
  --w-lg: 1200px;   /* 常规内容区 */
  --w-md: 940px;    /* 表单卡片、窄内容 */
  --w-sm: 720px;    /* 长文阅读区（超过这个宽度中文读起来累） */
}

/* ---------- 基础 ---------- */
body.font-zh-CN,
body{ font-family: var(--aps-font); color: var(--aps-text); }

.page-width{ width: var(--aps-w); max-width: var(--aps-w); margin: 0 auto; }

/* ==========================================================================
   一、顶部导航
   ========================================================================== */
.top.header-v4{
  /* 吸顶：初始在 banner 上方占位（不遮挡），滚动时固定在顶部 */
  position: sticky !important;
  top: 0;
  z-index: 1500;
  height: var(--aps-hd);
  background: #fff;
  border-bottom: 1px solid var(--aps-line);
  box-shadow: none;
  font-family: var(--aps-font);
}
.top.header-v4.aps-scrolled{ box-shadow: 0 2px 14px rgba(10,37,64,.08); }
.top.header-v4 .top-main{ height: var(--aps-hd); }
.top.header-v4 .top-main > .page-width{
  height: var(--aps-hd);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* logo */
.top.header-v4 .logo{ display: flex; align-items: center; flex: 0 0 auto; }
.top.header-v4 .logo a{ display: block; }
.top.header-v4 .logo img{
  height: 48px;
  width: auto;
  display: block;
}

/* 导航主体 */
.top.header-v4 .top-main-content{ flex: 1 1 auto; display: flex; justify-content: center; }
.top.header-v4 .main-nav{ height: var(--aps-hd); }

.top.header-v4 .main-nav .sf-menu{ display: flex; align-items: center; height: var(--aps-hd); }
.top.header-v4 .main-nav .sf-menu > li{
  position: relative;
  height: var(--aps-hd);
  background: none;
  float: none;
}

/* 一级菜单文字 */
.top.header-v4 .main-nav .sf-menu > li > a,
.top.header-v4 .main-nav .sf-menu > li > a:visited{
  display: block;
  position: relative;
  height: var(--aps-hd);
  line-height: var(--aps-hd);
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--aps-ink);
  background: none;
  border: none;
  transition: color .22s ease;
}
.top.header-v4 .main-nav .sf-menu > li > a strong{ font-weight: 500; }

/* 红色下划线（hover / 当前） */
.top.header-v4 .main-nav .sf-menu > li > a::after{
  content: "";
  position: absolute;
  left: 22px; right: 22px; bottom: 0;
  height: 2px;
  background: var(--aps-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .26s ease;
}
.top.header-v4 .main-nav .sf-menu > li > a:hover,
.top.header-v4 .main-nav .sf-menu > li.current > a{ color: var(--aps-red); }
.top.header-v4 .main-nav .sf-menu > li > a:hover::after,
.top.header-v4 .main-nav .sf-menu > li.current > a::after{ transform: scaleX(1); }

/* 干掉老式的小圆点分隔 */
.top.header-v4 .main-nav .sf-menu > li > i{ display: none !important; }

/* 二级下拉 */
.top.header-v4 .main-nav .sf-menu li > ul{
  position: absolute;
  top: var(--aps-hd);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 190px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-top: 2px solid var(--aps-red);
  border-radius: 0 0 var(--aps-r) var(--aps-r);
  box-shadow: var(--aps-sh-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1200;
}
.top.header-v4 .main-nav .sf-menu li:hover > ul{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.top.header-v4 .main-nav .sf-menu li > ul > li{ display: block; width: 100%; }
.top.header-v4 .main-nav .sf-menu li > ul > li > a{
  display: block;
  height: auto;
  line-height: 1.5;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 400;
  color: var(--aps-text);
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.top.header-v4 .main-nav .sf-menu li > ul > li > a::after{ display: none; }

/* 右上联系方式 */
.top.header-v4 .lainxfiangshiajid{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.top.header-v4 .lainxfiangshiajid .hnuahsdiuaw{ text-align: right; }
.top.header-v4 .lainxfiangshiajid .hnuahsdiuaw p{
  font-size: 12px;
  color: var(--aps-muted);
  line-height: 1.3;
  margin: 0;
}
.top.header-v4 .lainxfiangshiajid .hnuahsdiuaw h3{
  font-size: 21px;
  font-weight: 700;
  color: var(--aps-red);
  line-height: 1.25;
  margin: 0;
  letter-spacing: .3px;
}
.top.header-v4 .lainxfiangshiajid .bnuhsauhdiew img{
  width: 42px; height: 42px;
  display: block;
  border-radius: 50%;
}

/* ==========================================================================
   二、首屏 Banner（文字层）
   ========================================================================== */
#a1portalSkin_headerAreaA{ position: relative; }

.slideshow.carousel{ position: relative; }
.slideshow .carousel-item{ position: relative; overflow: hidden; }

/* 图上的深藏青遮罩 */
.slideshow .carousel-item::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
      rgba(10,37,64,.94) 0%,
      rgba(10,37,64,.80) 34%,
      rgba(10,37,64,.42) 62%,
      rgba(10,37,64,.10) 100%);
  pointer-events: none;
  z-index: 2;
}

/* 文字层 */
.aps-hero-text{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
  /* 左侧白纱：保证深色文字在任何底图上都读得清。
     底图是浅色时这层纱几乎看不见；
     万一以后换成深色照片，左边会自动浮出一块白，深色字照样能读。
     这一层是「换任何图都不会翻车」的保险，别删。 */
  background: linear-gradient(90deg,
              rgba(255,255,255,.94) 0%,
              rgba(255,255,255,.82) 34%,
              rgba(255,255,255,.42) 52%,
              rgba(255,255,255,0)   68%);
}
.aps-hero-text .page-width{ width: var(--aps-w); }
.aps-hero-inner{ max-width: 660px; pointer-events: auto; }

.aps-hero-eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--aps-red);
  font-weight: 600;
  margin-bottom: 16px;
}
/* 首屏标题走深色。
   2026-09-20 改：原来这里是白字，但轮播三张图换成了浅底三维渲染图，
   白字压白底直接看不见了，所以整体改成深色。 */
.aps-hero-title{
  font-size: 44px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--aps-navy);
  margin: 0 0 18px;
  letter-spacing: .5px;
}
.aps-hero-title em{
  font-style: normal;
  color: var(--aps-red);
}
.aps-hero-desc{
  font-size: 17px;
  line-height: 1.85;
  color: var(--aps-text);
  margin: 0 0 30px;
  max-width: 560px;
}
.aps-hero-btn{
  display: inline-block;
  height: 48px;
  line-height: 48px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--aps-red);
  border-radius: var(--aps-r);
  text-decoration: none;
  transition: background .22s, transform .22s;
}
.aps-hero-btn:hover{
  background: var(--aps-red-d);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* 轮播圆点 */
.slideshow .carousel-btn a{
  width: 30px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.35);
  margin: 0 5px;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
}
.slideshow .carousel-btn a.selected{ background: var(--aps-red); }

/* ==========================================================================
   三、通用 section 标题（克制化）
   ========================================================================== */
.module-full-screen-title h2,
.module-full-screen-title .dwqwh2,
.module-full-screen-title .sdjioa{
  font-family: var(--aps-font);
  font-size: 34px;
  font-weight: 700;
  color: var(--aps-ink);
  letter-spacing: 1px;
}
.module-full-screen-title h3{
  font-family: var(--aps-font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--aps-muted);
  text-transform: uppercase;
}
/* 标题下方短红线 */
.module-full-screen-title-line{
  display: block;
  width: 40px;
  height: 3px;
  background: var(--aps-red);
  margin: 16px auto 0;
}
/* 两侧装饰线收敛 */
.module-full-screen-title .mark-left,
.module-full-screen-title .mark-right{ opacity: .35; }

/* ---------- 模块标题可点击（替代「查看全部」按钮） ---------- */
.aps-title-link{
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.aps-title-link h2,
.aps-title-link .dwqwh2,
.aps-title-link .sdjioa{
  transition: color .25s ease;
}
.aps-title-link:hover h2,
.aps-title-link:hover .dwqwh2,
.aps-title-link:hover .sdjioa{ color: var(--aps-red); }
.aps-title-link .module-full-screen-title-line{
  transition: width .3s ease, background .3s ease;
}
.aps-title-link:hover .module-full-screen-title-line{ width: 72px; }
/* 标题后的小箭头 */
.aps-title-link h2::after{
  content: "›";
  display: inline-block;
  margin-left: 8px;
  font-size: .8em;
  color: var(--aps-muted);
  transition: color .25s ease, transform .25s ease;
}
.aps-title-link:hover h2::after{
  color: var(--aps-red);
  transform: translateX(4px);
}

/* 隐藏原来的「查看全部 / 查看更多」按钮 */
.module-full-screen-more,
.tab-more{ display: none !important; }

/* ==========================================================================
   四、首页模块版式
   ========================================================================== */

/* ---------- 区块节奏：深浅交替 ---------- */
.module-full-screen{
  padding: var(--aps-sec) 0;
  background: #fff;
}
.module-full-screen.module-full-screen-gray,
.module-full-screen.module-full-screen-bg-img{ background: var(--aps-soft) !important; }

/* ---------- 模块标题区 ---------- */
.module-full-screen-title{ text-align: center; margin-bottom: var(--aps-ttl); }
.module-full-screen-title h2,
.module-full-screen-title .dwqwh2,
.module-full-screen-title .sdjioa{
  font-size: 34px;
  font-weight: 700;
  color: var(--aps-ink);
  letter-spacing: 1px;
  margin: 0 0 10px;
}
.module-full-screen-title .module-title-content{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.module-full-screen-title .module-title-content h3{
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--aps-muted);
  margin: 0;
}
.module-full-screen-title .module-title-content .mark-left,
.module-full-screen-title .module-title-content .mark-right{
  display: none;
}

/* ---------- 通用卡片（图片统一比例 + 悬停） ---------- */
.col-4-111{
  width: 23.5%;
  margin: 0 2% 24px 0;
  float: left;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.col-4-111:nth-child(4n){ margin-right: 0; }
.col-4-111:hover{
  transform: translateY(-6px);
  box-shadow: var(--aps-sh-lg);
  border-color: transparent;
}
/* 图片统一裁切成 4:3 */
.col-4-111 p:first-child{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.col-4-111 p:first-child a{ display: block; height: 100%; }
.col-4-111 p:first-child img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.col-4-111:hover p:first-child img{ transform: scale(1.06); }
/* 卡片文字 */
.col-4-111 p:last-child{
  margin: 0;
  padding: 18px 16px;
  text-align: center;
}
.col-4-111 p:last-child a{ text-decoration: none; }
.col-4-111 p:last-child span{
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--aps-ink);
  transition: color .25s;
}
.col-4-111:hover p:last-child span{ color: var(--aps-red); }

/* ---------- 案例网格 ---------- */
.portfolio-grid-4col .portfolio-grid-item{
  width: 23.5%;
  margin: 0 2% 24px 0;
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  position: relative;
}
.portfolio-grid-4col .portfolio-grid-item:nth-child(4n){ margin-right: 0; }
.portfolio-grid-4col .portfolio-grid-img{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--aps-soft);
}
.portfolio-grid-4col .portfolio-grid-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.portfolio-grid-4col .portfolio-grid-item:hover .portfolio-grid-img img{ transform: scale(1.07); }
.portfolio-grid-4col .portfolio-grid-text{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(10,37,64,.92), rgba(10,37,64,0));
  margin: 0;
}
.portfolio-grid-4col .portfolio-grid-text h3{
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 案例页 tab ---------- */
.tabs-default .tabs-nav{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 44px;
  background: none;
  border: none;
}
.tabs-default .tabs-nav li{
  background: none;
  margin: 0;
}
.tabs-default .tabs-nav li a{
  display: block;
  height: 40px;
  line-height: 38px;
  padding: 0 26px;
  font-size: 15px;
  color: var(--aps-text);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: 40px;
  transition: all .25s ease;
}
.tabs-default .tabs-nav li a:hover,
.tabs-default .tabs-nav li a.current{
  color: #fff;
  background: var(--aps-red);
  border-color: var(--aps-red);
}
/* 老模板的圆圈 / 连接线 / 横线一律清掉（选择器要压过 style.css） */
.tabs-default.tab-round .tabs-nav li i.line-v,
.tabs-default.tab-round .tabs-nav li i.line-v-c{ display: none !important; height: 0 !important; }
.tabs-default.tab-round .tabs-nav li .clear{ display: none !important; }
.tabs-default.tab-round .tab-box-content-line{ display: none !important; }
/* 服务流程（首页）的完整样式见文件末尾「二十、首页服务流程」 */

/* ---------- 通用按钮 ---------- */
.module-full-screen-more,
.tab-more{
  text-align: center;
  margin-top: 40px;
}
.module-full-screen-more a,
.tab-more a,
.module-full-screen-more > a{
  display: inline-block;
  height: 46px;
  line-height: 44px;
  padding: 0 34px;
  font-size: 15px;
  color: var(--aps-text);
  background: transparent;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r);
  text-decoration: none;
  transition: all .25s ease;
}
.module-full-screen-more a:hover,
.tab-more a:hover{
  color: #fff;
  background: var(--aps-red);
  border-color: var(--aps-red);
}

/* ---------- 关于我们：正文排版 ---------- */
/* 左右边界与下方三张图片对齐（图片撑满 1200 容器），不再收窄居中 */
.jianjiesde{
  max-width: 100%;
  margin: 0 0 44px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--aps-text);
}
.quiiijide ul{
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.quiiijide ul li{
  flex: 1;
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  position: relative;
}
.quiiijide ul li .djisaqwd{ aspect-ratio: 4 / 3; overflow: hidden; margin: 0; }
.quiiijide ul li .djisaqwd img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.quiiijide ul li:hover .djisaqwd img{ transform: scale(1.06); }
.quiiijide ul li .biaoirjie{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px 16px 14px;
  background: linear-gradient(to top, rgba(10,37,64,.9), rgba(10,37,64,0));
  margin: 0;
  text-align: center;
}
.quiiijide ul li .biaoirjie p{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

/* ==========================================================================
   五、实力数据条（新增模块）
   ========================================================================== */
.aps-stats{
  background: var(--aps-navy);
  padding: var(--aps-sec-sm) 0;
  position: relative;
  overflow: hidden;
}
.aps-stats::before{
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(209,25,39,.10);
  pointer-events: none;
}
.aps-stats .page-width{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.aps-stat{
  flex: 1;
  text-align: center;
  position: relative;
}
.aps-stat + .aps-stat::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 44px;
  background: rgba(255,255,255,.14);
}
.aps-stat-num{
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: .5px;
}
.aps-stat-num em{
  font-style: normal;
  font-size: 20px;
  font-weight: 500;
  color: var(--aps-red-l);
  margin-left: 4px;
}
.aps-stat-label{
  font-size: 14px;
  color: rgba(255,255,255,.62);
  margin-top: 10px;
  letter-spacing: .5px;
}

/* ==========================================================================
   六、底部咨询 CTA
   ========================================================================== */
.aps-cta{
  background: var(--aps-navy-2);
  padding: var(--aps-sec-sm) 0;
}
.aps-cta .page-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aps-cta-title{
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.aps-cta-desc{
  font-size: 15px;
  color: rgba(255,255,255,.68);
  margin: 0;
}
.aps-cta-btn{
  display: inline-block;
  height: 52px;
  line-height: 52px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--aps-red);
  border-radius: var(--aps-r);
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s, transform .25s;
}
.aps-cta-btn:hover{
  background: var(--aps-red-d);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ==========================================================================
   七、页脚（深藏青）
   ========================================================================== */
.footer{
  background: var(--aps-navy) !important;
  padding: var(--aps-sec-sm) 0 0;
  color: rgba(255,255,255,.62);
  font-size: 14px;
}
.footer .wenzhubabkllij img{ max-height: 48px; width: auto; }
.footer h3{ color: #fff; font-size: 17px; font-weight: 600; margin: 0; }
.footer p{ color: rgba(255,255,255,.55); margin: 0 0 4px; }
.footer .youlianbq{
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 40px;
  padding: 22px 0 26px;
}
.footer .biaotiggy{ color: rgba(255,255,255,.45); }
.footer .ledfrft{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 0; margin: 0 0 14px; list-style: none; }
.footer .ledfrft li a{ color: rgba(255,255,255,.55); text-decoration: none; }
.footer .ledfrft li a:hover{ color: #fff; }
.footer .banquanbeianh{ color: rgba(255,255,255,.40); font-size: 13px; }
.footer .banquanbeianh a{ color: rgba(255,255,255,.40); }

/* 右侧悬浮条 —— 整套样式已重做，见文件末尾「七十七」节。
   原来这里只给图标垫了一块深蓝方块（--aps-navy-2），
   放在 80px 宽的白盒子里很突兀，2026-09-21 一并去掉。 */

/* ==========================================================================
   八、响应式（≤1200px 收敛容器）
   ========================================================================== */
@media (max-width: 1240px){
  .page-width{ width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  .aps-hero-text .page-width{ padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 992px){
  .aps-hero-title{ font-size: 32px; }
  .aps-hero-desc{ font-size: 15px; }
  .col-4-111{ width: 48%; margin-right: 4%; }
  .col-4-111:nth-child(2n){ margin-right: 0; }
  .col-4-111:nth-child(4n){ margin-right: 4%; }
  .portfolio-grid-4col .portfolio-grid-item{ width: 48%; margin-right: 4%; }
  .portfolio-grid-4col .portfolio-grid-item:nth-child(2n){ margin-right: 0; }
  .aps-stats .page-width{ flex-wrap: wrap; }
  .aps-stat{ flex: 0 0 50%; margin-bottom: 32px; }
  .aps-stat + .aps-stat::before{ display: none; }
  .quiiijide ul{ flex-wrap: wrap; }
  .quiiijide ul li{ flex: 0 0 100%; }
  .aps-cta .page-width{ flex-direction: column; text-align: center; gap: 24px; }
}

/* ==========================================================================
   九、内页正文排版（产品页 / 案例页 / 资讯页通用）
   ========================================================================== */
.content-wrapper .qhd-content,
.content-wrapper{
  font-size: 15px;
  line-height: 1.95;
  color: var(--aps-text);
}
.content-wrapper h3{
  font-size: 20px;
  font-weight: 700;
  color: var(--aps-ink);
  margin: 38px 0 18px;
  padding-left: 14px;
  border-left: 4px solid var(--aps-red);
  line-height: 1.4;
}
.content-wrapper h4{
  font-size: 17px;
  font-weight: 600;
  color: var(--aps-ink);
  margin: 26px 0 12px;
}
.content-wrapper p{ margin: 0 0 16px; }

.content-wrapper ul,
.content-wrapper ol{ padding: 0; margin: 0 0 18px; }
.content-wrapper ul li,
.content-wrapper ol li{
  position: relative;
  list-style: none;
  padding-left: 20px;
  margin-bottom: 11px;
  line-height: 1.8;
}
.content-wrapper ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aps-red);
}

/* 参数表 */
.content-wrapper table{
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 28px;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  font-size: 15px;
}
.content-wrapper table th,
.content-wrapper table td{
  padding: 15px 22px;
  text-align: left;
  border-bottom: 1px solid var(--aps-line);
  background: none !important;
  color: var(--aps-text) !important;
  font-weight: 400;
}
.content-wrapper table th{
  width: 190px;
  background: var(--aps-soft) !important;
  color: var(--aps-ink) !important;
  font-weight: 500;
  border-right: 1px solid var(--aps-line);
}
.content-wrapper table td{ font-weight: 600; color: var(--aps-ink) !important; }
.content-wrapper table tr:last-child th,
.content-wrapper table tr:last-child td{ border-bottom: none; }
.content-wrapper table tr:hover th,
.content-wrapper table tr:hover td{ background: #FAFBFC !important; }

/* 内页顶部 banner 收紧 */
.slideshow-min .carousel-img{ height: 320px !important; }
.slideshow-min .carousel-img img{ width: 100%; height: 100%; object-fit: cover; }

/* 侧栏菜单 */
.page-menu-title{
  background: var(--aps-navy);
  padding: 20px 22px;
  border-radius: var(--aps-r-lg) var(--aps-r-lg) 0 0;
}
.page-menu-title h3{
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.page-menu-content ul{ margin: 0; padding: 0; list-style: none; }
.page-menu-content ul li a{
  display: block;
  padding: 15px 22px;
  font-size: 15px;
  color: var(--aps-text);
  background: var(--aps-soft);
  border-bottom: 1px solid #fff;
  text-decoration: none;
  transition: all .22s ease;
}
.page-menu-content ul li a:hover{ color: var(--aps-red); background: #fff; padding-left: 28px; }
.page-menu-content ul li.current a{
  color: #fff;
  background: var(--aps-red);
  font-weight: 500;
}

/* 面包屑 + 页标题 */
.page-title-inner{
  border-bottom: 1px solid var(--aps-line);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.breadcrumbs{ font-size: 13px; color: var(--aps-muted); }
.breadcrumbs a{ color: var(--aps-muted); text-decoration: none; }
.breadcrumbs a:hover{ color: var(--aps-red); }
.page-name h2{
  font-size: 24px;
  font-weight: 700;
  color: var(--aps-ink);
  margin: 0;
}

/* ==========================================================================
   十、内页 banner 面包屑（左下角，与侧栏左对齐）
   ========================================================================== */
#a1portalSkin_headerAreaA{ position: relative; }

.aps-crumb-bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 90px 0 22px;
  background: linear-gradient(to top,
      rgba(10,37,64,.90) 0%,
      rgba(10,37,64,.55) 45%,
      rgba(10,37,64,0) 100%);
  pointer-events: none;
}
.aps-crumb-bar > .page-width{
  display: block !important;
  justify-content: flex-start !important;
}
.aps-crumb{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  pointer-events: auto;
}
.aps-crumb a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .2s;
}
.aps-crumb a:hover{ color: #fff; }
.aps-crumb .sep{ margin: 0 9px; opacity: .45; }
.aps-crumb .cur{ color: #fff; font-weight: 500; }

/* 内页 banner 高度收紧 */
.slideshow-min,
.slideshow-min .carousel-img{ height: 340px !important; }
.slideshow-min .carousel-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   十一、三列圆角卡片（产品 / 案例列表）
   ========================================================================== */
.content-wrapper .portfolio-list ul.column{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.content-wrapper .portfolio-list .col-3-1{
  width: calc(33.333% - 20px);
  margin: 0 10px 20px;          /* 卡片间距 26 → 20，手机端省不少高度 */
  float: none;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  box-sizing: border-box;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.content-wrapper .portfolio-list .col-3-1:hover{
  transform: translateY(-6px);
  box-shadow: var(--aps-sh-lg);
  border-color: transparent;
}
.content-wrapper .portfolio-list .portfolio-img{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--aps-soft);
}
.content-wrapper .portfolio-list .portfolio-img a{ display: block; height: 100%; }
/* 缩略图铺满居中（用户 2026-09-20 定的）：
   外框锁死 4:3，图片用 cover 铺满、object-position 居中。
   后台大多是 4:3 的图，铺满正好；比例差得多的图会居中裁掉一点点四边，
   比留一圈白边好看。 */
.content-wrapper .portfolio-list .portfolio-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .5s ease;
}
.content-wrapper .portfolio-list .col-3-1:hover .portfolio-img img{ transform: scale(1.06); }
/* 卡片文字区
   --------------------------------------------------------------------
   两个要求同时成立：
     ① 一行卡片必须一样高 —— 靠外层固定高度锁死
     ② 标题只有一行时，字要**垂直居中**，不能贴着顶
        （2026-09-20 用户反馈：「改后的字好像上下不居中」）
   所以把固定高度和居中放在外层容器上用 flex 做，
   里面只负责「最多两行、超出省略号」。

   字号/间距全部取自全站令牌，不写死数字：
     卡片标题 = var(--fs-md)      行高 = var(--lh-title)
     上下留白 = var(--sp-3)
   -------------------------------------------------------------------- */
.content-wrapper .portfolio-list .portfolio-title{
  display: flex;
  align-items: center;
  justify-content: center;
  /* 让下面的 em 以卡片标题的字号为准 */
  font-size: var(--fs-md);
  /* 固定高度 = 上下留白 + 两行标题，保证一行卡片永远等高 */
  height: calc(var(--sp-3) * 2 + 2em * var(--lh-title));
  padding: 0 var(--sp-4);
  margin: 0;
  border-top: 1px solid var(--aps-line);
}
.content-wrapper .portfolio-list .portfolio-title h2{
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  color: var(--aps-ink);
  margin: 0;
  width: 100%;
  text-align: center;
  /* 最多两行，超出才省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.content-wrapper .portfolio-list .portfolio-title h2 a{
  color: inherit;
  text-decoration: none;
  transition: color .25s;
}
/* 卡片不要正文列表的圆点 */
.content-wrapper .portfolio-list ul li{ padding-left: 0 !important; }
.content-wrapper .portfolio-list ul li::before{ display: none !important; }
.content-wrapper .portfolio-list .col-3-1:hover .portfolio-title h2 a{ color: var(--aps-red); }

/* 三列卡片响应式 */
@media (max-width: 992px){
  .content-wrapper .portfolio-list .col-3-1{ width: calc(50% - 20px); }
}
@media (max-width: 640px){
  .content-wrapper .portfolio-list .col-3-1{ width: calc(100% - 20px); }
  .slideshow-min,
  .slideshow-min .carousel-img{ height: 200px !important; }
  .aps-crumb-bar{ padding: 60px 0 14px; }
}

/* ==========================================================================
   十二、性能与体验修复
   ========================================================================== */

/* ① 首页轮播固定高度
      原来容器没有 height，JS 初始化前 3 张图会纵向堆叠、闪一下 */
.slideshow.carousel{ position: relative; }
.slideshow.carousel:not(.slideshow-min){
  height: 500px;
  overflow: hidden;
}
.slideshow .carousel-item{ overflow: hidden; }

/* ①-2 平板/手机端：图片填满容器，文案保持可读（2026-09-22 新增）
      原来窄屏下容器仍是固定的 500px，但图片按 3.84:1 缩下来只剩 97px 高，
      文案整个压在图上、下方一大片空白。现在让图片 cover 撑满、容器随屏收窄。
      只作用于首页轮播，内页 banner（.slideshow-min）不受影响。 */
@media (max-width: 992px){
  .slideshow.carousel:not(.slideshow-min){ height: 400px; }
  .slideshow.carousel:not(.slideshow-min) .carousel-img{ height: 100%; }
  .slideshow.carousel:not(.slideshow-min) .carousel-img img{
    width: 100%; height: 100%; object-fit: cover;
  }
}
@media (max-width: 640px){
  .slideshow.carousel:not(.slideshow-min){ height: 320px; }
  /* 手机上图片被 cover 放大后只剩中间一条，左边那层横向渐变压不住字了，
     换成整体压暗，保证任何底图上文案都读得清 */
  .slideshow.carousel:not(.slideshow-min) .carousel-item::after{
    background: linear-gradient(180deg, rgba(10,37,64,.78) 0%, rgba(10,37,64,.60) 100%);
  }
  .aps-hero-inner{ max-width: 100%; }
  .aps-hero-eyebrow{ font-size: 11px; letter-spacing: 2px; margin-bottom: 10px; }
  .aps-hero-title{ font-size: 23px; margin-bottom: 12px; }
  .aps-hero-desc{ font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; max-width: 100%; }
  .aps-hero-btn{ height: 42px; line-height: 42px; padding: 0 24px; font-size: 14px; }
}

/* ② 关闭入场动画
      .not-animated 默认 opacity:0（靠 JS 滚动到时显示），这里直接接管，
      让内容立刻可见，不再依赖 animate 库 */
.not-animated{ opacity: 1 !important; }
.animated{
  animation: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   十三、首页产品卡片（8 个一组）
   ========================================================================== */
.aps-product-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.aps-product-card{
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.aps-product-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--aps-sh-lg);
  border-color: transparent;
}
.aps-product-card a{ display: block; text-decoration: none; }
.aps-product-img{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--aps-soft);
}
.aps-product-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.aps-product-card:hover .aps-product-img img{ transform: scale(1.06); }
.aps-product-info{
  padding: 20px 22px 22px;
  border-top: 1px solid var(--aps-line);
}
.aps-product-info h3{
  font-size: 17px;
  font-weight: 600;
  color: var(--aps-ink);
  margin: 0 0 6px;
  transition: color .25s;
}
.aps-product-card:hover .aps-product-info h3{ color: var(--aps-red); }
.aps-product-info p{
  font-size: 13px;
  color: var(--aps-muted);
  margin: 0;
  letter-spacing: .3px;
}
@media (max-width: 992px){
  .aps-product-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px){
  .aps-product-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   十四、案例轮播（每页 4 个，自动轮播，tab 各自独立）
   ========================================================================== */
.aps-carousel{
  position: relative;
  overflow: hidden;
  /* 跟产品卡片一样限制在 1200px 容器内，左右留白 */
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 13px !important;
  box-sizing: border-box !important;
}
.aps-carousel-track{
  display: flex;
  flex-wrap: nowrap;
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}

/* 首屏下方第一个区块：上边距收紧，别离 banner 太远 */
#a1portalSkin_mainArea > .module-full-screen:first-child,
#a1portalSkin_mainArea > section:first-child{
  padding-top: 32px;
}

.aps-carousel-track .portfolio-grid-item{
  position: relative;
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  margin: 0;
  padding: 0 13px;
  box-sizing: border-box;
  float: none;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.aps-carousel-track .portfolio-grid-item > a{ display: block; position: relative; }

.aps-carousel-track .portfolio-grid-img{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--aps-r-lg);
  background: var(--aps-soft);
}
.aps-carousel-track .portfolio-grid-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.aps-carousel-track .portfolio-grid-item:hover .portfolio-grid-img img{ transform: scale(1.06); }

.aps-carousel-track .portfolio-grid-text{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 18px 16px;
  margin: 0;
  border-radius: 0 0 var(--aps-r-lg) var(--aps-r-lg);
  background: linear-gradient(to top, rgba(10,37,64,.92) 0%, rgba(10,37,64,0) 100%);
}
.aps-carousel-track .portfolio-grid-text h3{
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页点 */
.aps-carousel-dots{ text-align: center; margin-top: 26px; }
.aps-carousel-dots span{
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 4px;
  background: #D5DBE2;
  margin: 0 5px;
  cursor: pointer;
  transition: background .25s, width .25s;
}
.aps-carousel-dots span.on{ background: var(--aps-red); width: 24px; }

@media (max-width: 992px){
  .aps-carousel-track .portfolio-grid-item{ flex: 0 0 50%; width: 50%; max-width: 50%; }
}
@media (max-width: 640px){
  .aps-carousel-track .portfolio-grid-item{ flex: 0 0 100%; width: 100%; max-width: 100%; }
}

/* ==========================================================================
   十五、Tab 面板显示控制
   老 CSS 里 .tab-box 默认 display:none，原来靠 jQuery Tools 切换。
   这里改为自有 class 控制，不依赖老库。
   ========================================================================== */
.tabs-default .tabs-panes > .tab-box{ display: none; }
.tabs-default .tabs-panes > .tab-box.aps-on{ display: block; }

/* tab 按钮选中态 */
.tabs-default .tabs-nav li > a.current{ color: #fff; background: var(--aps-red); border-color: var(--aps-red); }
.tabs-default.tab-round .tabs-nav li > a.current{
  color: var(--aps-red) !important;
  background: none !important;
  border-bottom-color: var(--aps-red) !important;
}

/* ==========================================================================
   十六、垂直节奏响应式（全站统一）
   ========================================================================== */
@media (max-width: 992px){
  :root{
    --aps-sec:    48px;
    --aps-sec-sm: 36px;
    --aps-ttl:    28px;
  }
}
@media (max-width: 640px){
  :root{
    --aps-sec:    36px;
    --aps-sec-sm: 28px;
    --aps-ttl:    22px;
  }
  /* 内页正文段落也收紧 */
  .content-wrapper h3{ margin: 26px 0 12px; }
  .content-wrapper table th,
  .content-wrapper table td{ padding: 12px 14px; }
  .content-wrapper table th{ width: 120px; }
}


/* ==========================================================================
   十七、视觉统一修正（2026-09-19 第二轮）
   ========================================================================== */

/* ① 栏目标题：中英文间距收紧 */
.module-full-screen-title > h2,
.module-full-screen-title > .dwqwh2,
.module-full-screen-title > .sdjioa{
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
}
.module-full-screen-title > .module-title-content{
  margin: 0 0 10px !important;
}
/* 老 style.css:2952 有一条 `.module-full-screen-title > em{ ...display:none }`，
   特异性 (0,1,1) 比上面 .module-full-screen-title-line (0,1,0) 高，
   所以只要 em 是 .module-full-screen-title 的直接子元素就被隐藏掉。
   产品中心/案例展示/关于我们 的 em 被包在 <a class="aps-title-link"> 里躲过了，
   但 服务流程 和 留言表单 的标题没有链接，红线一直没显示。这里补回来。 */
.module-full-screen-title > em.module-full-screen-title-line{
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  overflow: visible !important;
  margin: 16px auto 0 !important;
  background: var(--aps-red) !important;
}

/* ② 服务流程 / tab 横向居中（压过老模板的 inline-block + font-size:0） */
.tabs-default > .tabs-nav{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end;
  flex-wrap: wrap;
  font-size: 14px !important;
  text-align: center !important;
}
.tabs-default > .tabs-nav > li{
  display: block !important;
  float: none !important;
}
.tabs-default.tab-round > .tabs-nav > li > a{
  float: none !important;
  display: block !important;
}
/* 服务流程下方两行说明文字居中 */
.tabs-default.tab-round .tabs-panes > .tab-box{ text-align: center; }
.tabs-default.tab-round .tabs-panes > .tab-box p{ text-align: center; }

/* ③ 关于我们：图片 + 名称压回图片上，底部保留深藏青渐变 */
/*    （老 CSS 给 .biaoirjie 写死了 48px 高、红底 D11927ba，这里全部覆盖掉） */
.quiiijide ul li{
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  background: #fff;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.quiiijide ul li:hover{ transform: translateY(-6px); box-shadow: var(--aps-sh-lg); }
.quiiijide ul li a{ display: block; position: relative; }
.quiiijide ul li .djisaqwd{ overflow: hidden; margin: 0; }
.quiiijide ul li .djisaqwd img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.quiiijide ul li:hover .djisaqwd img{ transform: scale(1.05); }
.quiiijide ul li .biaoirjie{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  padding: 46px 16px 16px !important;
  margin: 0 !important;
  border: none !important;
  background: linear-gradient(to top, rgba(10,37,64,.92) 0%, rgba(10,37,64,0) 100%) !important;
  text-align: center;
}
.quiiijide ul li .biaoirjie p{
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  transition: color .25s;
}
.quiiijide ul li:hover .biaoirjie p{ color: var(--aps-red-l) !important; }

/* ④ 案例卡片：清掉老模板的红色半透明底，用统一渐变 */
.aps-carousel-track .portfolio-grid-item .portfolio-grid-text,
.content-wrapper .portfolio-grid-item .portfolio-grid-text{
  background: linear-gradient(to top, rgba(10,37,64,.92) 0%, rgba(10,37,64,.55) 45%, rgba(10,37,64,0) 100%) !important;
  opacity: 1 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
}

/* ⑤ 底部 CTA：统一到数据条风格 */
.aps-cta{
  background: var(--aps-navy) !important;
  padding: 40px 0 !important;
}
.aps-cta-title{ font-size: 24px; margin: 0 0 8px; }
.aps-cta-btn{
  height: 50px;
  line-height: 50px;
  padding: 0 36px;
  box-shadow: 0 6px 20px rgba(209,25,39,.35);
}
.aps-cta-btn:hover{ box-shadow: 0 10px 26px rgba(209,25,39,.45); }

/* ⑥ 留言表单：统一视觉 */
.gbook-content, .guestbook-content, #a1portalSkin_mainArea .qhd-content form{
  max-width: 900px;
  margin: 0 auto;
}
.aps-gbook-wrap{
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  padding: 40px 44px;
}

/* 服务流程的最终样式见文件末尾「二十、首页服务流程」 */

/* ==========================================================================
   十八、留言表单美化（统一视觉）
   ========================================================================== */
.gbook-wrapper, .guestbook, .qhd-content .gbook{ max-width: 860px; margin: 0 auto; }
/* 输入框统一 */
.qhd-content input[type="text"],
.qhd-content input[type="tel"],
.qhd-content input[type="email"],
.qhd-content textarea,
.gbook-content input[type="text"],
.gbook-content textarea{
  height: 46px;
  line-height: 46px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--aps-ink);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r);
  box-sizing: border-box;
  transition: border-color .22s, box-shadow .22s;
}
.qhd-content textarea, .gbook-content textarea{
  height: auto; line-height: 1.7; padding: 12px 16px; min-height: 100px;
}
.qhd-content input[type="text"]:focus,
.qhd-content input[type="tel"]:focus,
.qhd-content textarea:focus,
.gbook-content input:focus,
.gbook-content textarea:focus{
  border-color: var(--aps-red);
  box-shadow: 0 0 0 3px rgba(209,25,39,.10);
  outline: none;
}
/* 提交按钮 */
.qhd-content input[type="submit"],
.qhd-content button[type="submit"],
.gbook-content input[type="submit"],
.gbook-content .submit,
.aps-gbook-submit{
  display: inline-block;
  height: 48px;
  padding: 0 44px;
  font-size: 15px;
  font-weight: 500;
  color: #fff !important;
  background: var(--aps-red) !important;
  border: none !important;
  border-radius: var(--aps-r) !important;
  cursor: pointer;
  transition: background .22s, transform .22s;
}
.qhd-content input[type="submit"]:hover,
.gbook-content input[type="submit"]:hover{
  background: var(--aps-red-d) !important;
  transform: translateY(-2px);
}
/* 字段标签 */
.gbook-content label, .qhd-content .gbook label{ color: var(--aps-text); font-size: 14px; }

/* 服务流程的最终样式见文件末尾「二十、首页服务流程」 */

/* ==========================================================================
   十九、修复 .page-width 的 flex 布局把模块内容挤到左边
   老 CSS: .page-width{ display:flex; justify-content:space-between }
   导致模块内的标题/内容块作为 flex 子项靠左排列
   ========================================================================== */
.page-width{
  display: block !important;   /* 改回块级，子元素自然占满整行 */
}
/* 导航里的 .page-width 需要保持 flex（logo/菜单/电话三栏） */
.top.header-v4 .top-main > .page-width{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
/* 面包屑那一条也要保持 flex 之外的行为 */
.aps-crumb-bar > .page-width{ display: block !important; }

/* 数据条 / 咨询条的 page-width 要保持横向 flex */
.aps-stats .page-width{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.aps-cta .page-width{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
@media (max-width: 992px){
  .aps-stats .page-width{ flex-wrap: wrap !important; }
  .aps-cta .page-width{ flex-direction: column !important; text-align: center !important; gap: 24px !important; }
}

/* ==========================================================================
   二十、首页「服务流程」——点＋线串起来的流程条
   --------------------------------------------------------------------------
   改动目的：
     ① 做出「流程」感：每步一个序号圆点，中间用一条牵引线串起来
     ② 左右边界与上方「案例展示」的卡片对齐
        （案例卡片在 1200 容器里左右各内缩 26px，所以这里取 1200-52 = 1148）
     ③ 6 个步骤两端对齐、间距自动均分
     ④ 下方说明小字左对齐同一条左边线；与上方拉开距离，自身行距收紧
   只作用于首页（.aps-flow），留言页的 .tabs-default.tab-round 不受影响
   ========================================================================== */

/* 步骤条容器：收到与案例卡片同宽，整体居中 */
.aps-flow.tabs-default.tab-round{
  display: block !important;
  text-align: left !important;
  width: 1148px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 6 步一行：两端对齐（首尾贴住左右边界），中间间距均分 */
.aps-flow.tabs-default.tab-round > .tabs-nav{
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: inherit !important;
  counter-reset: aps-step;
}

/* 关键：ul 上带 clearfix，而 clearfix:after 会生成一个 0 宽伪元素，
   在 flex 里它算作一个 flex item，会白白吃掉最后一段间距，
   导致第 6 步贴不到右边。这里必须干掉它。 */
.aps-flow.tabs-default.tab-round > .tabs-nav::after{
  display: none !important;
  content: none !important;
}

/* 牵引线：横贯整行、穿过每个序号圆点，两端渐隐（圆点是不透明的，会压住线） */
.aps-flow.tabs-default.tab-round > .tabs-nav::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;                    /* 圆点高 40px，竖向正中 = 20px，线高 2px 故取 19px */
  height: 2px;
  background: linear-gradient(90deg,
      rgba(213,221,229,0) 0px,
      #D5DDE5 40px,
      #D5DDE5 calc(100% - 40px),
      rgba(213,221,229,0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* 每个步骤：宽度由内容决定，不参与拉伸，z-index 抬到牵引线之上 */
.aps-flow.tabs-default.tab-round > .tabs-nav > li{
  position: relative !important;
  display: block !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  text-align: center !important;
  counter-increment: aps-step;
  z-index: 1;
}

.aps-flow.tabs-default.tab-round > .tabs-nav > li > a{
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: none !important;
}

/* 序号圆点：01 ~ 06，底色与区块底色一致，好把背后的牵引线盖住 */
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a::before{
  content: counter(aps-step, decimal-leading-zero);
  display: block;
  width: 40px;
  height: 40px;
  line-height: 36px;            /* 减去上下 2px 边框，数字才居中 */
  margin: 0 auto 14px;
  box-sizing: border-box;
  border: 2px solid #D5DDE5;
  border-radius: 50%;
  background: #F6F6F6;
  color: #8B96A3;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-align: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a:hover::before,
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a.current::before{
  background: var(--aps-red) !important;
  border-color: var(--aps-red) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* 步骤名 */
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a span{
  display: block !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.4 !important;
  color: var(--aps-ink) !important;
  white-space: nowrap;
  transition: color .25s ease;
}
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a:hover span,
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a.current span{
  color: var(--aps-red) !important;
}

/* 步骤名下方的英文小字 */
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a em{
  display: block !important;
  margin: 5px 0 0 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .4px;
  color: var(--aps-muted) !important;
  white-space: nowrap;
}
.aps-flow.tabs-default.tab-round > .tabs-nav > li > a.current em{
  color: var(--aps-red) !important;
}

/* 说明小字：与上方流程条拉开距离，左对齐同一条左边线 */
.aps-flow.tabs-default.tab-round > .tabs-panes{
  display: block !important;
  width: 100% !important;
  margin-top: 46px !important;
  text-align: left !important;
}
.aps-flow.tabs-default.tab-round > .tabs-panes > .tab-box{
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
}
.aps-flow.tabs-default.tab-round > .tabs-panes > .tab-box.aps-on{
  display: block !important;
}
.aps-flow .qhd-content,
.aps-flow .qhd-content p{
  text-align: left !important;
}
/* 小字之间收紧（原来是每段 15px 下边距） */
.aps-flow .qhd-content p{
  margin: 0 0 4px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--aps-muted) !important;
}
.aps-flow .qhd-content p:last-child{
  margin-bottom: 0 !important;
}

/* 窄屏兜底：PC 模板在窄屏下让步骤换行、隐藏牵引线，避免挤成一团 */
@media (max-width: 1250px){
  .aps-flow.tabs-default.tab-round{
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 992px){
  .aps-flow.tabs-default.tab-round > .tabs-nav{
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 28px 34px !important;
  }
  .aps-flow.tabs-default.tab-round > .tabs-nav::before{
    display: none !important;
  }
}

/* ==========================================================================
   二十一、留言表单（全站通用，每个页面底部都有）
   --------------------------------------------------------------------------
   改前的问题（实测样式）：
     · 标题位挂的是公司 logo，195×40 还靠左，看着像没做完
     · 姓名 / 公司 / 手机 / 需求 四个标签是暗红 #A8121E、16px，
       跟输入框并排挤在一起，标签右边距只有 10px
     · 输入框直角、1px 深灰硬边(#666)、透明底（透出 #F6F6F6）、
       文字缩进 30px、placeholder #999
     · 提交只是「提交」两个字 + 一张 60×10 的细箭头图，看着像链接不像按钮
   改后：白卡片 + 标签在上/输入框在下 + 统一浅边框圆角 + 实心红按钮
   老样式在 style.css:2999~3065，这里逐条覆盖
   ========================================================================== */

/* 整张表单独立成一张白卡片：比铺满 1200 更好读，也跟灰底拉开层次 */
.formadqqawsw{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  /* 22px/28px 不在刻度上，拉回 20/24（令牌） */
  gap: var(--sp-5) var(--sp-6) !important;
  width: 940px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 44px 48px 40px !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  box-shadow: 0 2px 16px rgba(10,37,64,.05);
}

/* 一组 = 标签 + 输入框，从「左右并排」改成「上下排」 */
.formadqqawsw .anijdiww{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 标签：暗红 → 深墨色，跟输入框拉开一点距离 */
.formadqqawsw .anijdiww .iiijininio{
  display: block !important;
  margin: 0 0 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--aps-ink) !important;
}

/* 输入框：深灰硬边直角 → 浅边圆角，聚焦变红 */
.formadqqawsw .anijdiww .inpoiouhiu{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--aps-font) !important;
  font-size: 14px !important;
  color: var(--aps-ink) !important;
  background: #fff !important;
  border: 1px solid var(--aps-line) !important;
  border-radius: var(--aps-r) !important;
  text-indent: 0 !important;      /* 老样式缩进 30px，改回正常 */
  outline: none !important;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.formadqqawsw .anijdiww .inpoiouhiu::placeholder{
  color: #A9B3BF !important;
}
.formadqqawsw .anijdiww .inpoiouhiu:hover{
  border-color: #CBD5DF !important;
}
.formadqqawsw .anijdiww .inpoiouhiu:focus{
  border-color: var(--aps-red) !important;
  box-shadow: 0 0 0 3px rgba(209,25,39,.10) !important;
}
/* 浏览器自动填充时别变成默认的黄色底 */
.formadqqawsw .inpoiouhiu:-webkit-autofill,
.formadqqawsw .inpoiouhiu:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--aps-ink) !important;
}

/* 提交按钮：实心红 + 悬停上浮，箭头用 CSS 画，不再依赖那张细图 */
.formadqqawsw .hjuaiuqi{
  grid-column: 1 / -1 !important;   /* 占满整行 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 200px !important;
  height: 50px !important;
  margin: 12px auto 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: var(--aps-red) !important;
  border: none !important;
  border-radius: var(--aps-r) !important;
  cursor: pointer;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.formadqqawsw .hjuaiuqi p{
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #fff !important;
  transition: none !important;      /* 干掉老样式的位移效果 */
}
.formadqqawsw .hjuaiuqi::after{
  content: "\2192";                 /* → */
  margin-left: 8px;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  transition: transform .22s ease;
}
.formadqqawsw .hjuaiuqi:hover{
  background: var(--aps-red-d) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(209,25,39,.28);
}
.formadqqawsw .hjuaiuqi:hover p{ margin-left: 0 !important; }
.formadqqawsw .hjuaiuqi:hover::after{ transform: translateX(4px); }

/* 窄屏兜底 */
@media (max-width: 992px){
  .formadqqawsw{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 28px 22px 26px !important;
  }
  .formadqqawsw .hjuaiuqi{ width: 100% !important; }
}

/* ==========================================================================
   二十二、全站视觉统一层（2026-09-20 重做）
   --------------------------------------------------------------------------
   这一节是全站视觉的「单一事实来源」：
     · 字号一律走 --fs-*，间距走 --sp-*，圆角走 --r-*，阴影走 --sd-*
     · 老的 style.css / qhdcontent.css 在下面被逐条压过
     · 以后调版式优先改这里和 :root 的令牌，不要再往别处写死数字
   注意：用户反馈过「上下留白还是多」，所以这轮只统一"样子"，不放大留白。
   ========================================================================== */

/* ---------- 1. 全局排版基准 ---------- */
body.font-zh-CN,
body{
  font-family: var(--aps-font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--aps-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   正文（富文本）排版层级
   --------------------------------------------------------------------------
   ⚠️ 2026-09-20 重要修正：这几条原来写的是 .content-wrapper h2 / h3 / p …
      而且全带 !important。

      后果：它不只是「正文排版」，而是把**整个内容区里所有的 h1/h2/h3/h4/p 全管了**——
      包括卡片标题、列表条目、板块小标题。因为带 !important，
      组件自己写的样式（不管多具体）全被压掉。

      实际翻车现场：产品列表卡片标题被顶成 24px、上边距 40px
      （我写的是 15px / margin 0），所以看着「字特别大、上下留白特别多」。

      修法：收窄到只作用于 .qhd-content —— 也就是后台编辑器写进正文的那块，
      并去掉 !important。这样组件标题归组件自己管，
      正文标题归这里管，两边井水不犯河水。
      （正文里不会出现 aps- 类名，所以这个收窄是安全的。）
   ========================================================================== */
.qhd-content h1{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  letter-spacing: 0;
  margin: 0 0 var(--sp-5);
}
.qhd-content h2{
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-title);
  color: var(--aps-ink);
  margin: var(--sp-8) 0 var(--sp-4);
}
.qhd-content h3{
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-title);
  color: var(--aps-ink);
  margin: var(--sp-7) 0 var(--sp-3);
}
.qhd-content h4{
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  color: var(--aps-ink);
  margin: var(--sp-6) 0 var(--sp-2);
}

/* 正文段落：中文阅读舒适区是 1.7 行高 */
.qhd-content p{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--aps-text);
  margin: 0 0 var(--sp-4);
}
/* 详情页大标题（文章/单页的 H1）单独管，它不在 qhd-content 里面 */
.article-detail h1{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  letter-spacing: 0;
  margin: 0 0 var(--sp-5);
}
/* 长文阅读宽度收到 720px，太宽中文读起来累 */
.article-content .qhd-content p,
.article-content .qhd-content ul,
.article-content .qhd-content ol{ max-width: var(--w-sm); }

/* 正文链接统一红色 + 细下划线 */
.qhd-content a{
  color: var(--aps-red) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(209,25,39,.3);
  transition: border-color var(--t-fast);
}
.qhd-content a:hover{ border-bottom-color: var(--aps-red); }

/* 正文图片统一圆角 + 不溢出 */
.qhd-content img{
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* ---------- 2. 区块标题统一 ---------- */
.module-full-screen-title > h2,
.module-full-screen-title > .dwqwh2,
.module-full-screen-title > .sdjioa,
.module-full-screen-title h2,
.module-full-screen-title .dwqwh2,
.module-full-screen-title .sdjioa{
  font-size: var(--fs-3xl) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-tight) !important;
  color: var(--aps-ink) !important;
  letter-spacing: .5px;
  margin: 0 !important;
}
.module-full-screen-title h3,
.module-full-screen-title .module-title-content h3{
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-normal) !important;
  letter-spacing: 3px !important;
  color: var(--aps-muted) !important;
  text-transform: uppercase;
  margin: var(--sp-2) 0 0 !important;
}
.module-full-screen-title-line{
  width: 44px !important;
  height: 3px !important;
  border-radius: var(--r-full);
  background: var(--aps-red) !important;
  margin: var(--sp-4) auto 0 !important;
}

/* ---------- 3. 按钮系统（全站三个变体，其余一律归并） ---------- */
.aps-btn,
.aps-hero-btn,
.aps-cta-btn,
.module-full-screen-more a,
.tab-more a,
.qhd-content input[type="submit"],
.qhd-content button[type="submit"],
.gbook-content input[type="submit"],
.formadqqawsw .hjuaiuqi{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 0 var(--sp-7) !important;
  font-family: var(--aps-font) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  line-height: 1 !important;
  border-radius: var(--r-md) !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: background var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
/* 主按钮：实心红 */
.aps-btn-primary,
.aps-hero-btn,
.aps-cta-btn,
.qhd-content input[type="submit"],
.qhd-content button[type="submit"],
.gbook-content input[type="submit"],
.formadqqawsw .hjuaiuqi{
  background: var(--aps-red) !important;
  color: #fff !important;
}
.aps-btn-primary:hover,
.aps-hero-btn:hover,
.aps-cta-btn:hover,
.qhd-content input[type="submit"]:hover,
.gbook-content input[type="submit"]:hover,
.formadqqawsw .hjuaiuqi:hover{
  background: var(--aps-red-d) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--sd-red);
}
/* 次按钮：描边 */
.aps-btn-ghost,
.module-full-screen-more a,
.tab-more a{
  background: #fff !important;
  color: var(--aps-ink) !important;
  border-color: var(--aps-line) !important;
}
.aps-btn-ghost:hover,
.module-full-screen-more a:hover,
.tab-more a:hover{
  color: var(--aps-red) !important;
  border-color: var(--aps-red) !important;
  transform: translateY(-2px);
  box-shadow: var(--sd-md);
}

/* ---------- 4. 卡片系统 ---------- */
.aps-card,
.aps-product-card,
.quiiijide ul li{
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sd-sm);
  border: 1px solid var(--aps-line);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.aps-card:hover,
.aps-product-card:hover,
.quiiijide ul li:hover{
  transform: translateY(-5px);
  box-shadow: var(--sd-lg);
  border-color: transparent;
}
.aps-product-img,
.aps-card-img,
.quiiijide ul li .djisaqwd{
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--aps-soft);
}

/* ---------- 5. 内页面包屑 ---------- */
.breadcrumbs,
.aps-crumb-bar{
  font-size: var(--fs-sm) !important;
  color: var(--aps-muted) !important;
  line-height: 1.6 !important;
}
.breadcrumbs a{
  color: var(--aps-muted) !important;
  transition: color var(--t-fast);
}
.breadcrumbs a:hover{ color: var(--aps-red) !important; }

/* ---------- 6. 分页统一 ---------- */
.pagination a,
.pagination span,
.pagebar a,
.pagebar span{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 var(--sp-3) !important;
  margin: 0 var(--sp-1) !important;
  font-size: var(--fs-base) !important;
  line-height: 1 !important;
  color: var(--aps-text) !important;
  background: #fff !important;
  border: 1px solid var(--aps-line) !important;
  border-radius: var(--r-sm) !important;
  text-decoration: none !important;
  transition: all var(--t-fast);
}
.pagination a:hover,
.pagebar a:hover{
  color: #fff !important;
  background: var(--aps-red) !important;
  border-color: var(--aps-red) !important;
}
.pagination .page-num-current,
.pagination .current,
.pagebar .current{
  color: #fff !important;
  background: var(--aps-red) !important;
  border-color: var(--aps-red) !important;
  font-weight: var(--fw-semi) !important;
}

/* ---------- 7. 内页 hero 统一高度 ---------- */
.slideshow.slideshow-min.carousel{ height: 380px !important; overflow: hidden; }
.slideshow.slideshow-min .carousel-item{ height: 380px; }
.slideshow.slideshow-min .carousel-img img{
  width: 100%; height: 380px; object-fit: cover; display: block;
}

/* ---------- 8. 侧栏栏目树统一 ---------- */
/* 侧栏标题是深藏青底，字必须白（统一层里一度写成深色，导致几乎看不清） */
.page-menu-title h3{
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semi) !important;
  color: #fff !important;
  line-height: var(--lh-title) !important;
}

/* 老的内页标题条（页名 + 老式面包屑）已被 banner 左下角的面包屑取代，
   留着会出现「首页 / 新闻资讯 / 新闻资讯」这种重复，还撑出一大片空白 */
.page-title-inner{ display: none !important; }
.page-menu-content ul li a{
  display: block;
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: var(--fs-md) !important;
  color: var(--aps-text) !important;
  border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  transition: all var(--t-fast);
}
.page-menu-content ul li a:hover,
.page-menu-content ul li.current a{
  color: var(--aps-red) !important;
  background: var(--aps-soft) !important;
  border-left-color: var(--aps-red) !important;
}

/* ---------- 9. 全站输入控件统一 ---------- */
input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], textarea, select{
  border-radius: var(--r-md);
  font-family: var(--aps-font);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus,
input[type="search"]:focus, textarea:focus, select:focus{
  border-color: var(--aps-red) !important;
  box-shadow: 0 0 0 3px rgba(209,25,39,.10) !important;
  outline: none;
}

/* ==========================================================================
   二十三、首页新增模块（2026-09-20）
   ① 行业应用（深色区，用「应用领域」栏目 8 个子栏目）
   ② 新闻资讯（3 篇）
   ③ 常见问题（原生 <details> 折叠，无需 JS）
   ========================================================================== */

/* ---------- ① 深色区块（行业应用）---------- */
.aps-dark-sec{
  position: relative;
  overflow: hidden;
  background: var(--aps-navy) !important;
}
/* 右上角一团红色光晕，避免大面积纯深色显得闷 */
.aps-dark-sec::before{
  content: "";
  position: absolute;
  right: -160px; top: -180px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209,25,39,.22) 0%, rgba(209,25,39,0) 68%);
  pointer-events: none;
}
.aps-dark-sec .module-inner{ position: relative; z-index: 1; }
.aps-dark-sec .module-full-screen-title h2,
.aps-dark-sec .module-full-screen-title .dwqwh2,
.aps-dark-sec .module-full-screen-title .sdjioa{
  color: #fff !important;
}
.aps-dark-sec .module-full-screen-title h3,
.aps-dark-sec .module-full-screen-title .module-title-content h3{
  color: rgba(255,255,255,.45) !important;
}
.aps-dark-sec .module-full-screen-title .mark-left,
.aps-dark-sec .module-full-screen-title .mark-right{ opacity: .2; }
.aps-dark-sec .aps-title-link:hover h2,
.aps-dark-sec .aps-title-link:hover .sdjioa{ color: var(--aps-red-l) !important; }
.aps-dark-sec .aps-title-link h2::after{ color: rgba(255,255,255,.4); }
.aps-dark-sec .aps-title-link:hover h2::after{ color: var(--aps-red-l); }

/* 行业卡片：4 列图片卡，底部渐变压字 */
.aps-industry-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.aps-industry-card{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none !important;
  background: var(--aps-navy-2);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.aps-industry-card img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.aps-industry-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(10,37,64,.94) 0%,
      rgba(10,37,64,.55) 42%,
      rgba(10,37,64,.06) 100%);
  transition: opacity var(--t-base);
}
.aps-industry-card span{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  color: #fff !important;
  text-align: center;
  letter-spacing: .5px;
}
.aps-industry-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.aps-industry-card:hover img{ transform: scale(1.07); }

/* ---------- ② 新闻资讯：3 列图文卡 ---------- */
.aps-news-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.aps-news-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: var(--sd-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.aps-news-img{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--aps-soft);
}
.aps-news-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.aps-news-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.aps-news-date{
  display: block;
  font-size: var(--fs-xs);
  color: var(--aps-muted);
  letter-spacing: .5px;
  margin-bottom: var(--sp-2);
}
.aps-news-title{
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semi) !important;
  line-height: var(--lh-title) !important;
  color: var(--aps-ink) !important;
  margin: 0 0 var(--sp-3) !important;
  transition: color var(--t-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aps-news-desc{
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-base) !important;
  color: var(--aps-muted) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aps-news-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--sd-lg);
  border-color: transparent;
}
.aps-news-card:hover .aps-news-img img{ transform: scale(1.06); }
.aps-news-card:hover .aps-news-title{ color: var(--aps-red) !important; }

/* ---------- ③ 常见问题：原生 details 折叠 ---------- */
.aps-faq{
  max-width: 900px;
  margin: 0 auto;
}
.aps-faq-item{
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.aps-faq-item[open]{
  background: #fff;
  border-color: var(--aps-red);
  box-shadow: var(--sd-md);
}
.aps-faq-q{
  position: relative;
  padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-6);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  line-height: var(--lh-title);
  color: var(--aps-ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}
.aps-faq-q::-webkit-details-marker{ display: none; }
.aps-faq-q::after{
  content: "";
  position: absolute;
  right: var(--sp-6);
  top: 50%;
  width: 9px; height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--aps-muted);
  border-bottom: 2px solid var(--aps-muted);
  transform: rotate(45deg);
  transition: transform var(--t-base), border-color var(--t-base), margin-top var(--t-base);
}
.aps-faq-item[open] .aps-faq-q::after{
  transform: rotate(-135deg);
  margin-top: -3px;
  border-color: var(--aps-red);
}
.aps-faq-q:hover,
.aps-faq-item[open] .aps-faq-q{ color: var(--aps-red); }
.aps-faq-a{
  padding: 0 var(--sp-10) var(--sp-6) var(--sp-6);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--aps-text);
}

/* ---------- ④ 新增模块的响应式 ---------- */
@media (max-width: 992px){
  .aps-industry-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .aps-industry-card span{ font-size: var(--fs-base); padding: var(--sp-5) var(--sp-3) var(--sp-3); }
  .aps-news-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .aps-news-grid .aps-news-card:nth-child(3){ display: none; }  /* 两列时只留 2 条，避免落单 */
}
@media (max-width: 768px){
  .aps-news-grid{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .aps-news-grid .aps-news-card:nth-child(3){ display: flex; }
  .aps-faq-q{ padding: var(--sp-4) var(--sp-9) var(--sp-4) var(--sp-5); font-size: var(--fs-md); }
  .aps-faq-a{ padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-sm); }
}
@media (max-width: 480px){
  .aps-industry-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   二十四、资讯列表 / 资讯详情 / 单页（2026-09-20）
   补齐原来没改造的页面，让全站和首页、产品页、案例页视觉一致。
   ========================================================================== */

/* ---------- ① 资讯列表：横向条目（比 3 列卡片更适合文字型内容）---------- */
.aps-news-list{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.aps-news-row{
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-lg);
  text-decoration: none !important;
  box-shadow: var(--sd-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.aps-news-row-img{
  flex: 0 0 220px;
  width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--aps-soft);
}
.aps-news-row-img img{
  width: 100%; height: 100%;
  object-fit: cover;            /* 铺满 */
  object-position: center center;
  display: block;
  transition: transform var(--t-slow);
}
.aps-news-row-body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.aps-news-row-title{
  font-size: var(--fs-16) !important;
  font-weight: var(--fw-semi) !important;
  line-height: var(--lh-title) !important;
  color: var(--aps-ink) !important;
  margin: 0 0 var(--sp-2) !important;
  transition: color var(--t-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aps-news-row-desc{
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-base) !important;
  color: var(--aps-muted) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aps-news-row:hover{
  transform: translateY(-3px);
  box-shadow: var(--sd-md);
  border-color: transparent;
}
.aps-news-row:hover .aps-news-row-img img{ transform: scale(1.06); }
.aps-news-row:hover .aps-news-row-title{ color: var(--aps-red) !important; }

/* ---------- ② 资讯详情 ---------- */
.article-detail{ width: 100%; }
/* 标题和元信息一律左对齐。
   左边是竖着的栏目树，正文区要是居中，两条轴线对不上，看着发散。
   老 CSS 在几处把这一块设成了居中，这里显式压回来。 */
.article-detail,
.article-title,
.article-content-wrapper{ text-align: left !important; }
.article-title h1,
.article-detail h1{
  font-size: var(--fs-3xl) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-tight) !important;
  color: var(--aps-ink) !important;
  margin: 0 0 var(--sp-5) !important;
  text-align: left !important;
}
/* 标题下的元信息条：栏目 / 时间 / 分享 */
.entry-meta{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;   /* 不要居中，跟标题左对齐 */
  gap: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin: 0 0 var(--sp-8) !important;
  font-size: var(--fs-sm) !important;
  color: var(--aps-muted) !important;
  text-align: left !important;
}
.entry-meta > span{ display: inline-flex; align-items: center; gap: var(--sp-1); }
.entry-meta strong{ font-weight: var(--fw-normal) !important; color: var(--aps-muted) !important; }
.entry-meta a{
  color: var(--aps-red) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(209,25,39,.3);
}
.entry-meta a:hover{ border-bottom-color: var(--aps-red); }
.share-toolbar{ margin-left: auto !important; }
.share-toolbar .bdsharebuttonbox{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.share-toolbar .bdsharebuttonbox span{
  font-size: var(--fs-xs);
  color: var(--aps-muted);
  margin: 0;
}
.share-toolbar .bdsharebuttonbox a{
  display: inline-block;
  width: 28px !important; height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--r-full);
  background-color: var(--aps-soft);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  opacity: .65;
  transition: opacity var(--t-fast), background-color var(--t-fast);
}
.share-toolbar .bdsharebuttonbox a:hover{
  opacity: 1;
  background-color: #fff;
  box-shadow: var(--sd-sm);
}
/* 正文容器 */
.article-content-wrapper{ margin-top: var(--sp-2); }
.article-content{ width: 100%; }

/* ---------- ③ 单页正文（关于我们 / 联系我们 / 应用领域详情）---------- */
.content-wrapper .qhd-content > *:first-child{ margin-top: 0 !important; }
.content-wrapper .qhd-content > *:last-child{ margin-bottom: 0 !important; }
/* 正文里的图片统一圆角，避免直角老气 */
.content-wrapper .qhd-content img{
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
/* 正文里的表格统一 */
.content-wrapper .qhd-content table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--fs-base);
  border-radius: var(--r-md);
  overflow: hidden;
}
.content-wrapper .qhd-content table th{
  background: var(--aps-soft);
  color: var(--aps-ink);
  font-weight: var(--fw-semi);
  text-align: left;
}
.content-wrapper .qhd-content table th,
.content-wrapper .qhd-content table td{
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--aps-line);
  line-height: var(--lh-base);
}
.content-wrapper .qhd-content table tr:last-child td{ border-bottom: none; }

/* ---------- ④ 侧栏 + 内容区：两栏布局 ----------
   注意：原来用 inline-block 排，两个标签之间的换行会产生一个空格，
   240+40+920 再加这个空格就超过 1200，内容被挤到下一行，
   侧栏右下方出现一大片空白。改用 flex，没有空白符问题。 */
.main > .page-width{
  display: flex !important;
  align-items: flex-start;
  gap: var(--sp-8);
}
/* ⚠️⚠️ 必须把 clearfix 的 ::after 关掉（2026-09-21 修，踩了很久）
   --------------------------------------------------------------------------
   现象（用户报的）：768 / 820 / 1024 下，产品、案例、资讯、联系我们这几块的
   左右留白不对称 —— 内容偏左，右边空出一条，而且窗口越宽空得越多：

       视口    左空白   右空白
       768      20px    35px
       820      20px    59px
       1024     30px    85px

   根因：模板里写的是 <div class="page-width clearfix">，
   而 clearfix 的 ::after 是 `content:""; display:block; clear:both`。
   **在 flex 容器里，这个伪元素会被当成一个真实的 flex 项** ——
   于是容器里变成「.content + 看不见的 ::after」两项，
   gap 就在它们之间照样生效，在内容右边空出一整条：

       1024px：page-width 内宽 949，内容只有 909  →  差的 40px 正是 --sp-8(40px)
       820px ：按 ≤992 的规则 gap 是 --sp-6(24px) →  差的 24px 也对得上

   为什么以前没发现：桌面端（>1200）左栏是显示出来的，
   视觉上左边有东西、右边那条空白看着像"两栏之间的间距"，不违和；
   一旦左栏被藏起来（≤1200），内容就该占满，那条 gap 就变成"右边莫名空一块"。

   修法：.page-width 是 flex 容器，子项本来就都是 float:none !important，
   这个 clearfix 早就不起作用了，直接关掉最省事。
   ⚠️ 只认 .main 的直接子级 —— 页头页脚、首页各板块也有 .page-width，
      那些地方不是 flex，clearfix 还得留着，别一竿子打翻。 */
.main > .page-width::after{
  content: none !important;
  display: none !important;
}

.main .sidebar{
  flex: 0 0 240px;
  width: 240px;
  float: none !important;
  box-sizing: border-box;
}
.main .content{
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  float: none !important;
  box-sizing: border-box;
}

/* ---------- ⑤ 响应式 ---------- */
@media (max-width: 992px){
  .aps-news-row-img{ flex: 0 0 180px; width: 180px; }
  .main > .page-width{ gap: var(--sp-6); }
  .main .sidebar{ flex: 0 0 200px; width: 200px; }
}
@media (max-width: 768px){
  /* 窄屏收起侧栏，内容占满 —— 手机上看侧栏栏目树没意义 */
  .main > .page-width{ display: block !important; }
  .main .sidebar{ display: none !important; }
  .entry-meta{ gap: var(--sp-4); margin-bottom: var(--sp-6) !important; }
  .share-toolbar{ margin-left: 0 !important; }
}
@media (max-width: 640px){
  .aps-news-row{ flex-direction: column; gap: var(--sp-3); }
  .aps-news-row-img{ flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .article-title h1, .article-detail h1{ font-size: var(--fs-2xl) !important; }
}

/* ==========================================================================
   二十五、联系我们页（2026-09-20）
   原来这套 .contactqsewe / .leftgtr / .dianhuazuoji 全是老样式：
   电话是普通黑字、地址没有层级、地图 iframe 没有圆角。
   这里重做成「左侧信息卡 + 右侧地图」的现代两栏。
   ========================================================================== */

.aps-page-h1{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  margin: 0 0 var(--sp-6);
}

.contactqsewe{
  display: flex;
  gap: var(--sp-8);
  align-items: stretch;
}
.contactqsewe .leftgtr{
  flex: 1 1 auto;
  min-width: 0;
}
/* 右侧地图 */
.contactqsewe .righhueh{
  flex: 0 0 46%;
  min-width: 0;
  min-height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--aps-soft);
  box-shadow: var(--sd-md);
}
.contactqsewe .righhueh iframe{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
}

/* 公司 logo 图 */
.contactqsewe .wenzhubabkllij{ margin-bottom: var(--sp-6); }
.contactqsewe .wenzhubabkllij img{ max-width: 220px; height: auto; display: block; }

/* 电话卡：从普通文字改成两张浅底卡片，号码放大标红 */
.contactqsewe ul.dianhuazuoji{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6) !important;
}
.contactqsewe ul.dianhuazuoji li{
  flex: 1 1 200px;
  background: var(--aps-soft);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--aps-red);
  padding: var(--sp-5);
  box-sizing: border-box;
}
.contactqsewe ul.dianhuazuoji li p{
  font-size: var(--fs-sm) !important;
  color: var(--aps-muted) !important;
  margin: 0 0 var(--sp-2) !important;
}
.contactqsewe ul.dianhuazuoji li h3{
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--aps-red) !important;
  line-height: 1.2 !important;
  letter-spacing: .5px;
  margin: 0 !important;
}

/* 地址 / 邮箱：加小红点做条目感 */
.contactqsewe .dizhiyouxiang{ margin-bottom: var(--sp-6); }
.contactqsewe .dizhiyouxiang p{
  position: relative;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base) !important;
  color: var(--aps-text) !important;
  margin: 0 0 var(--sp-3) !important;
  padding-left: var(--sp-6);
}
.contactqsewe .dizhiyouxiang p::before{
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aps-red);
}

/* 在线咨询按钮 */
.contactqsewe .zaixniajzjis{ margin-bottom: var(--sp-6); }
.contactqsewe .zaixniajzjis a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--sp-8);
  background: var(--aps-red);
  color: #fff !important;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-radius: var(--r-md);
  text-decoration: none !important;
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.contactqsewe .zaixniajzjis a:hover{
  background: var(--aps-red-d);
  transform: translateY(-2px);
  box-shadow: var(--sd-red);
}

/* 二维码 */
.contactqsewe .nniqjiwjwi{ display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.contactqsewe .nniqjiwjwi .sahsiao{ text-align: center; }
.contactqsewe .nniqjiwjwi .tubian{
  width: 120px; height: 120px;
  padding: var(--sp-2);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.contactqsewe .nniqjiwjwi .tubian img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.contactqsewe .nniqjiwjwi .sahsiao p{
  font-size: var(--fs-xs) !important;
  color: var(--aps-muted) !important;
  margin: var(--sp-2) 0 0 !important;
}

/* 响应式 */
@media (max-width: 992px){
  .contactqsewe{ flex-direction: column; gap: var(--sp-6); }
  .contactqsewe .righhueh{ flex: none; width: 100%; min-height: 360px; }
  .contactqsewe .righhueh iframe{ min-height: 360px; }
}
@media (max-width: 640px){
  .aps-page-h1{ font-size: var(--fs-2xl); }
  .contactqsewe ul.dianhuazuoji li h3{ font-size: var(--fs-xl) !important; }
}

/* ==========================================================================
   二十六、页脚（2026-09-20 推翻重做）
   原版：左边一大坨「公司名图片 + 电话 + 地址」，右边「logo + 二维码」，主次不分。
   新版：四栏（品牌 / 网站导航 / 联系我们 / 扫码咨询）+ 底部一条版权栏。
   公司名从图片换成真文字，导航栏自动取后台一级栏目。
   ========================================================================== */

.aps-foot{
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.5fr auto;
  gap: var(--sp-9);
  padding: var(--sp-10) 0 var(--sp-8);
  align-items: start;
}

/* ---------- 品牌列 ---------- */
.aps-foot-brand .aps-foot-logo{
  height: 46px;
  width: auto;
  display: block;
  margin: 0 0 var(--sp-5);
}
.aps-foot-cname{
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  color: #fff;
  line-height: var(--lh-title);
  margin: 0 0 var(--sp-2);
}
.aps-foot-cen{
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.40);
  letter-spacing: .3px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- 栏目标题（带一道红色短横） ---------- */
.aps-foot-h{
  position: relative;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: #fff;
  line-height: 1.4;
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
}
.aps-foot-h::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  border-radius: var(--r-full);
  background: var(--aps-red);
}

/* ---------- 网站导航 ---------- */
.aps-foot-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.aps-foot-list a{
  font-size: var(--fs-base);
  color: rgba(255,255,255,.64) !important;
  text-decoration: none !important;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.aps-foot-list a:hover{
  color: #fff !important;
  padding-left: var(--sp-1);
}

/* ---------- 联系我们 ---------- */
.aps-foot-contact{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.aps-foot-contact li{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aps-foot-contact span{
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.38);
}
.aps-foot-contact em{
  font-style: normal;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: rgba(255,255,255,.80);
}
.aps-foot-contact a{
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: .3px;
  transition: color var(--t-fast);
}
.aps-foot-contact a:hover{ color: var(--aps-red-l) !important; }

/* ---------- 二维码 ---------- */
.aps-foot-qr-box{
  width: 116px;
  height: 116px;
  padding: var(--sp-2);
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--r-md);
}
.aps-foot-qr-box img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ---------- 版权栏 ---------- */
.aps-foot-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.aps-foot-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.34);
}
.aps-foot-links a{
  color: rgba(255,255,255,.54) !important;
  text-decoration: none !important;
  transition: color var(--t-fast);
}
.aps-foot-links a:hover{ color: #fff !important; }
.aps-foot-copy{
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255,255,255,.40);
  text-align: right;
}
.aps-foot-copy p{
  margin: 0 0 var(--sp-1) !important;
  color: rgba(255,255,255,.52) !important;
}
.aps-foot-copy a{ color: rgba(255,255,255,.54) !important; }

/* ---------- 页脚响应式 ---------- */
@media (max-width: 992px){
  .aps-foot{
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7) var(--sp-6);
    padding: var(--sp-8) 0 var(--sp-6);
  }
  .aps-foot-bottom{ flex-direction: column; align-items: flex-start; }
  .aps-foot-copy{ text-align: left; }
}
@media (max-width: 640px){
  .aps-foot{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .aps-foot-qr{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
  .aps-foot-qr .aps-foot-h{ flex: 0 0 100%; }
  .aps-foot-contact a{ font-size: var(--fs-lg); }
}

/* ==========================================================================
   二十七、修两个线上可见的问题（2026-09-20）
   ========================================================================== */

/* ① 联系我们页的「在线咨询」按钮 —— 白底白字，不悬停看不见
      原因：我写的 .contactqsewe .zaixniajzjis a 特异性(0,2,1) 低于老样式的
            .contactqsewe .leftgtr .zaixniajzjis a (0,3,1)，
            所以 background 被老样式的 #fff 盖掉，但 color:#fff !important 生效了 → 白底白字。
      改法：选择器提到同等特异性并加 !important。 */
.contactqsewe .leftgtr .zaixniajzjis a,
.contactqsewe .zaixniajzjis a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 180px;
  height: 48px !important;
  line-height: 1 !important;
  margin-top: var(--sp-5) !important;
  padding: 0 var(--sp-8) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  color: #fff !important;
  background: var(--aps-red) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.contactqsewe .leftgtr .zaixniajzjis a:hover,
.contactqsewe .zaixniajzjis a:hover{
  color: #fff !important;
  background: var(--aps-red-d) !important;
  transform: translateY(-2px);
  box-shadow: var(--sd-red);
}

/* ② 联系我们页顶部那张「公司名图片」多余 —— 页面标题已经是「联系我们」，
      下面几行就是电话地址，再放一张写死公司名的图纯属重复。
      模板里的 .wenzhubabkllij 已删除，这里兜底隐藏（万一别的页面还有残留）。 */
.contactqsewe .wenzhubabkllij{ display: none !important; }

/* ==========================================================================
   二十八、顶部导航改版（2026-09-20）
   改动：
     · 导航项从「红色下划线」改成「浅底圆角胶囊」，反馈更清楚、更好看
     · 当前栏目用实心红胶囊
     · 新增搜索入口（齿轮图标那种放大镜）
     · 电话整块做成可点击拨号，原来是「文字 + 图标图」两块分开
     · 顺带给站内搜索页写样式
   ========================================================================== */

/* ---------- 1. 导航项：胶囊式 ---------- */
.top.header-v4 .main-nav .sf-menu > li{
  display: flex;
  align-items: center;
  height: var(--aps-hd);
}
.top.header-v4 .main-nav .sf-menu > li > a{
  position: relative;
  height: 42px !important;
  line-height: 42px !important;
  margin: 0 2px;
  padding: 0 18px !important;
  border-radius: var(--r-md);
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--aps-ink) !important;
  background: transparent;
  transition: color var(--t-base), background var(--t-base);
}
/* 干掉旧版的红色下划线 */
.top.header-v4 .main-nav .sf-menu > li > a::after{ display: none !important; }

.top.header-v4 .main-nav .sf-menu > li > a:hover{
  color: var(--aps-red) !important;
  background: var(--aps-soft);
}
/* 当前栏目：实心红 */
.top.header-v4 .main-nav .sf-menu > li.current > a,
.top.header-v4 .main-nav .sf-menu > li.current > a:hover{
  color: #fff !important;
  background: var(--aps-red);
}
/* 有下拉的栏目：hover 时也让父项高亮 */
.top.header-v4 .main-nav .sf-menu > li:hover > a{
  color: var(--aps-red) !important;
  background: var(--aps-soft);
}
.top.header-v4 .main-nav .sf-menu > li.current:hover > a{
  color: #fff !important;
  background: var(--aps-red);
}

/* ---------- 2. 搜索按钮 ---------- */
.aps-nav-search{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  color: var(--aps-text);
  background: transparent;
  text-decoration: none !important;
  transition: color var(--t-fast), background var(--t-fast);
}
.aps-nav-search:hover{
  color: var(--aps-red);
  background: var(--aps-soft);
}

/* ---------- 3. 电话（可点击拨号）---------- */
.aps-nav-tel{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--aps-soft);
  text-decoration: none !important;
  transition: background var(--t-base);
}
.aps-nav-tel:hover{ background: #FDECEE; }
.aps-nav-tel-txt{
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
}
.aps-nav-tel-txt em{
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--aps-muted);
}
.aps-nav-tel-txt strong{
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--aps-red);
  letter-spacing: .3px;
}
.aps-nav-tel-icon img{
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
}

/* 侧栏悬浮条里的电话也做成可点样式 */
.youcedaoh .cbasijd h3 a{
  color: inherit;
  text-decoration: none;
}
.youcedaoh .cbasijd h3 a:hover{ color: var(--aps-red); }

/* 联系页电话可点 */
.contactqsewe ul.dianhuazuoji li h3 a{
  color: inherit !important;
  text-decoration: none !important;
}
.contactqsewe ul.dianhuazuoji li h3 a:hover{ opacity: .78; }

/* ==========================================================================
   二十九、站内搜索页（2026-09-20 新增 pages）
   背景：这个站的搜索一直是坏的 —— 缺 lists_search.htm 模板，
        访问 /search.html?keywords=xxx 会 500。这一轮补上了模板。
   ========================================================================== */

.aps-search-bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 70px 0 28px;
  background: linear-gradient(to top,
      rgba(10,37,64,.90) 0%,
      rgba(10,37,64,.55) 48%,
      rgba(10,37,64,0) 100%);
}
.aps-search-form{
  display: flex;
  align-items: center;
  width: 540px;
  max-width: 100%;
  height: 52px;
  background: rgba(255,255,255,.97);
  border-radius: var(--r-full);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
}
.aps-search-form input{
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  padding: 0 var(--sp-6) !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: var(--fs-md) !important;
  color: var(--aps-ink) !important;
}
.aps-search-form input::placeholder{ color: #A9B3BF; }
.aps-search-form input:focus{ box-shadow: none !important; }
.aps-search-form button{
  flex: 0 0 58px;
  height: 100%;
  border: none;
  background: var(--aps-red);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.aps-search-form button:hover{ background: var(--aps-red-d); }

/* 结果区 */
.main > .page-width > .aps-search-result{ flex: 1 1 auto; min-width: 0; }
.aps-search-result{ padding: var(--sp-9) 0 var(--sp-10); }
.aps-search-title{
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  color: var(--aps-ink);
  margin: 0 0 var(--sp-7);
}
.aps-search-title em{
  font-style: normal;
  color: var(--aps-red);
}

/* 响应式 */
@media (max-width: 1240px){
  .aps-nav-tel-txt em{ display: none; }
  .aps-nav-tel-txt strong{ font-size: var(--fs-16); }
  .aps-nav-tel{ padding-left: var(--sp-3); }
}
@media (max-width: 992px){
  .aps-search-form{ width: 100%; }
  .aps-search-bar{ padding: 50px 0 20px; }
}

/* ==========================================================================
   三十、导航搜索面板（2026-09-20）
   为什么不做成「点图标直接跳搜索页」：
   易优的搜索 URL 必须带 keywords 参数 —— 不带参数 404，
   带空参数会跳到「跳转提示」页。所以只能点开面板让用户先输关键词。
   ========================================================================== */

/* 搜索按钮（<button> 元素，不是 <a>，所以要把浏览器默认样式清掉） */
.top.header-v4 .aps-nav-search{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--aps-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.top.header-v4 .aps-nav-search:hover,
.top.header-v4 .aps-search-open .aps-nav-search{
  color: var(--aps-red);
  background: var(--aps-soft);
}
.top.header-v4 .aps-nav-search svg{ display: block; }

/* 面板 */
.aps-nav-search-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--aps-hd);
  /* ⚠️ 层级必须比导航下拉面板（上面那条 z-index: 1200）低。
     这两个面板都从导航条下沿往下展开、占同一条竖直带 —— 一定会重叠。
     原来这里是 1400，比下拉高，结果鼠标划过导航项时弹出的下拉菜单
     被搜索框盖住（用户报的问题）。1100 < 1200，下拉在上面。
     ⚠️ 改其中一个的时候另一个要一起看，别单独调。 */
  z-index: 1100;
  padding: var(--sp-5) 0;
  background: #fff;
  /* 上面那条 border-top 去掉了（2026-09-20 用户反馈「搜索下拉后这条分界线不好看」）。
     导航条 .top.header-v4 自己已经有 border-bottom，面板紧贴在它下沿，
     两条 1px 叠在一起看着就是一条突兀的粗线。
     去掉面板这条之后，展开搜索时这里跟平时一样只有导航本身那一条线。 */
  border-top: none;
  border-bottom: 1px solid var(--aps-line);
  /* 阴影不能往上溢 —— 面板紧贴导航条下沿，往上溢就糊在导航上了。
     原来写的是 0 16px 32px：blur 32 会让阴影上沿跑到元素顶边往上 16px，
     正好压住导航条底部（用户反馈「阴影压住了导航」）。
     改成负 spread(-12)：阴影上沿落在元素顶边往下约 12px 处，爬不到导航上。 */
  box-shadow: 0 18px 36px -12px rgba(10, 37, 64, .16);
  opacity: 0;
  visibility: hidden;          /* 关闭时不参与 Tab 焦点 */
  pointer-events: none;
  transform: translateY(-10px);
  /* 注意：visibility 故意不写进 transition。
     写进去的话，chrome headless 的 --virtual-time-budget 会把过渡卡住，
     计算样式永远停在 hidden —— 调试时会误判成“样式没生效”。 */
  transition: opacity var(--t-base), transform var(--t-base);
}
.top.header-v4.aps-search-open .aps-nav-search-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* 搜索展开时，把导航条自己那条底线也收掉。
   导航条 .top.header-v4 一直有 border-bottom，面板又紧贴在它下沿，
   两条 1px 叠起来就是一条很突兀的线，横在导航和搜索框中间。
   收掉之后导航和搜索面板读成一个整体，中间没有分界线。
   （面板自己那条 border-top 也在上面一并去掉了，两处要一起去才干净。） */
.top.header-v4.aps-search-open{ border-bottom-color: transparent; }

/* 搜索展开时，把下面的页面内容压暗一层（2026-09-20）
   目的：一眼聚焦到搜索框，同时顺手挡住下面的链接 —— 免得搜索框开着的时候
   用户点到 banners 或正文里去。点这层暗色区域也会收起搜索（见 header.htm 的脚本）。
   做法是 header 的伪元素，不用加标签、也不用同步改手机端模板。
   · position: fixed 是相对视口的（header 上没有 transform/filter，不会改变参照系），
     所以 top 从视口顶算起，正好落在导航条下沿，导航本身不被压暗。
   · z-index 1000，低于搜索面板(1100)和导航下拉(1200) —— 这两个要浮在暗色之上。
     ⚠️ 三个数字是一组，改一个要一起看。 */
.top.header-v4::after{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--aps-hd);
  bottom: 0;
  z-index: 1000;
  background: rgba(10, 37, 64, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;        /* 收起时不挡下面的点击 */
  transition: opacity var(--t-base);
}
.top.header-v4.aps-search-open::after{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;        /* 展开时要能接住点击（点了就收起） */
  cursor: pointer;
}
.aps-nav-search-panel form{
  display: flex;
  align-items: center;
  height: 50px;
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.aps-nav-search-panel form:focus-within{
  border-color: var(--aps-red);
  box-shadow: 0 0 0 3px rgba(209,25,39,.10);
}
.aps-nav-search-panel input{
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  padding: 0 var(--sp-5) !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: var(--fs-md) !important;
  color: var(--aps-ink) !important;
}
.aps-nav-search-panel input::placeholder{ color: #A9B3BF; }
.aps-nav-search-panel button{
  flex: 0 0 62px;
  height: 100%;
  padding: 0;
  border: none;
  background: var(--aps-red);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.aps-nav-search-panel button:hover{ background: var(--aps-red-d); }

/* ==========================================================================
   三十一、产品详情页（2026-09-20 重做）
   结构：左大图 + 可切换缩略图 ｜ 右标题 + 参数表 + 转化按钮
         下面：产品详情正文 + 相关产品
   两个可后台改的地方：产品图集 cptu / 产品参数 cpcanshu
   ========================================================================== */

html{ scroll-behavior: smooth; }   /* 「咨询报价」按钮平滑滚到表单 */

.aps-pd{ width: 100%; }

/* ---------- ① 商品区：左图右信息 ---------- */
.aps-pd-top{
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--aps-line);
}

/* 图区 */
.aps-pd-gallery{
  flex: 0 0 46%;
  min-width: 0;
}
.aps-pd-main{
  aspect-ratio: 4 / 3;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;              /* 提示「可以点开看大图」，见下面的灯箱 */
}
/* 主图：铺满整个外框（2026-09-20 用户要求）
   改之前是 contain + 16px 内边距，图只占了外框的 8 成左右，看着缩水。
   现在去掉内边距、换 cover —— 图会填满整块，多出来的部分裁掉。
   ⚠️ 代价：产品图不是 4:3 的话会裁掉两边（800×533 的图在 4:3 框里
      左右各裁掉约 5%）。因为是白底产品图、主体居中，实测不影响识别。
      哪张图裁得不好看，让美工按 4:3 重出一张，别改回 contain。
   ⚠️ 想看完整不裁的图，点一下开灯箱（下面 .aps-lightbox），那里是 contain 全图。 */
.aps-pd-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--t-base);
}
.aps-pd-main:hover img{ transform: scale(1.03); }
.aps-pd-thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.aps-pd-thumb{
  width: 76px;
  height: 76px;
  padding: var(--sp-1);
  box-sizing: border-box;
  border: 2px solid var(--aps-line);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.aps-pd-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.aps-pd-thumb:hover{ border-color: #C9D3DE; transform: translateY(-2px); }
.aps-pd-thumb.is-on{ border-color: var(--aps-red); }

/* 信息区 */
.aps-pd-info{
  flex: 1 1 auto;
  min-width: 0;
}
.aps-pd-title{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  margin: 0 0 var(--sp-4);
}
.aps-pd-brief{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--aps-text);
  margin: 0 0 var(--sp-6);
}

/* 参数表：像表格但不用 table，方便响应式 */
.aps-pd-specs{
  border: 1px solid var(--aps-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.aps-pd-spec{
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--aps-line);
  font-size: var(--fs-base);
}
.aps-pd-spec:last-child{ border-bottom: none; }
.aps-pd-spec-n{
  flex: 0 0 40%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--aps-soft);
  color: var(--aps-muted);
  border-right: 1px solid var(--aps-line);
  box-sizing: border-box;
}
.aps-pd-spec-v{
  flex: 1 1 auto;
  padding: var(--sp-3) var(--sp-4);
  color: var(--aps-ink);
  font-weight: var(--fw-medium);
  box-sizing: border-box;
  word-break: break-word;
}
/* 参数为空时整块不出现 */
.aps-pd-specs:empty{ display: none; }

/* 转化按钮 */
.aps-pd-actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.aps-pd-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: 1 1 180px;
  height: 54px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.aps-pd-btn svg{ flex: 0 0 auto; }
.aps-pd-btn-primary{
  background: var(--aps-red);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(209,25,39,.20);
}
.aps-pd-btn-primary:hover{
  background: var(--aps-red-d);
  transform: translateY(-2px);
  box-shadow: var(--sd-red);
}
.aps-pd-btn-ghost{
  background: #fff;
  color: var(--aps-ink) !important;
  border: 1px solid var(--aps-line);
}
.aps-pd-btn-ghost:hover{
  color: var(--aps-red) !important;
  border-color: var(--aps-red);
  transform: translateY(-2px);
  box-shadow: var(--sd-md);
}

/* ---------- ② 正文 / ③ 相关产品 ---------- */
.aps-pd-h2{
  position: relative;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--aps-ink);
  line-height: var(--lh-title);
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-4);
}
.aps-pd-h2::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 18px;
  border-radius: var(--r-full);
  background: var(--aps-red);
}
.aps-pd-body{
  padding: var(--sp-8) 0 var(--sp-6);
  /* 这里原来有一条 border-bottom。
     2026-09-20 去掉 —— 正文下面紧跟的是标签栏和上下篇，
     而上下篇（.aps-postnav）自己带一条上边框，
     两条线就把标签夹在中间了，看着像标签被线压着。
     去掉这条之后，产品页跟案例/资讯/问答三个详情页的收尾方式一致：
     正文 → 标签 → 一条线 → 上下篇。
     ⚠️ 别再加回来。真要分隔正文和下面，让 .aps-postnav 那条线去干这活。 */
  border-bottom: none;
}
.aps-pd-related{ padding: var(--sp-8) 0 0; }
.aps-related-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.aps-related-card{
  display: block;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  text-decoration: none !important;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.aps-related-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--sd-lg);
  border-color: transparent;
}
.aps-related-img{
  aspect-ratio: 4 / 3;
  background: var(--aps-soft);
  overflow: hidden;
}
.aps-related-img img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: var(--sp-2);
  box-sizing: border-box;
  transition: transform var(--t-slow);
}
.aps-related-card:hover .aps-related-img img{ transform: scale(1.05); }
/* 同上：外层居中 + 固定高度，内层 span 负责两行截断 */
.aps-related-card h3{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  height: calc(var(--sp-3) * 2 + 2em * var(--lh-title));
  padding: 0 var(--sp-3);
  margin: 0;
  color: var(--aps-text);
  transition: color var(--t-fast);
}
.aps-related-card h3 span{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
  line-height: var(--lh-title);
}
.aps-related-card:hover h3{ color: var(--aps-red); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px){
  .aps-pd-top{ flex-direction: column; gap: var(--sp-6); }
  .aps-pd-gallery{ flex: none; width: 100%; }
  .aps-related-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .aps-pd-title{ font-size: var(--fs-2xl); }
  .aps-pd-spec{ font-size: var(--fs-sm); }
  .aps-pd-spec-n{ flex: 0 0 46%; padding: var(--sp-2) var(--sp-3); }
  .aps-pd-spec-v{ padding: var(--sp-2) var(--sp-3); }
  .aps-pd-btn{ flex: 1 1 100%; height: 48px; font-size: var(--fs-base); }
  .aps-related-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}

/* ==========================================================================
   三十二、案例详情页（2026-09-20）
   结构：标题 → 案例参数（产品类型/行业/载重）→ 视频 → 图集 → 正文 → 相关案例
   设计思路：跟产品详情页同一套语言（左对齐、细边框、圆角、红色强调），
             但参数用横排卡片而不是表格 —— 一眼看出「这是什么案例」。
   ========================================================================== */
.aps-anli{ margin: 0; }

/* ---------- 标题区：左对齐，和左侧栏目树同一条视觉轴线 ---------- */
.aps-anli-head{
  padding: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-6);
}
.aps-anli-title{
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.35;
  color: var(--aps-ink);
  margin: 0 0 var(--sp-3);
  text-align: left;
}
.aps-anli-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--aps-muted);
}
.aps-anli-meta-item{ display: inline-flex; align-items: center; gap: var(--sp-2); }
.aps-anli-meta-item em{
  font-style: normal;
  color: var(--aps-muted);
}
.aps-anli-meta-item em::after{ content: "："; }

/* ---------- 案例参数：三个并排的卡片 ---------- */
.aps-anli-params{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.aps-anli-param{
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-left: 3px solid var(--aps-red);
  border-radius: var(--aps-r);
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}
.aps-anli-param-n{
  display: block;
  font-size: var(--fs-xs);
  color: var(--aps-muted);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.aps-anli-param-v{
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--aps-ink);
  line-height: 1.4;
  word-break: break-all;
}
.aps-anli-param-v a{
  color: var(--aps-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.aps-anli-param-v a:hover{ border-bottom-color: var(--aps-red); }

/* ---------- 视频 ---------- */
.aps-anli-video{
  margin: 0 0 var(--sp-6);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.aps-anli-video video{
  width: 100%;
  max-height: 560px;
  display: block;
  background: #000;
}
.aps-anli-video iframe,
.aps-anli-video embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

/* ---------- 图集：两列，不裁图 ---------- */
.aps-anli-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.aps-anli-shot{
  display: block;
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.aps-anli-shot:hover{
  border-color: var(--aps-red);
  box-shadow: var(--sd-md);
}
.aps-anli-shot img{
  width: 100%; height: 100%;
  object-fit: contain;      /* 后台传什么比例都完整显示 */
  display: block;
  transition: transform .5s ease;
}
.aps-anli-shot:hover img{ transform: scale(1.04); }

/* ---------- 正文 ---------- */
.aps-anli-body{ margin-bottom: var(--sp-8); }
.aps-anli-h2{
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--aps-ink);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--aps-red);
  line-height: 1.3;
  text-align: left;
}

/* ---------- 相关案例 ---------- */
.aps-anli-related{ margin-bottom: var(--sp-8); }
.aps-anli-related-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.aps-anli-card{
  display: block;
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.aps-anli-card:hover{
  border-color: transparent;
  box-shadow: var(--sd-md);
  transform: translateY(-3px);
}
.aps-anli-card-img{
  aspect-ratio: 4 / 3;
  background: var(--aps-soft);
  overflow: hidden;
}
.aps-anli-card-img img{
  width: 100%; height: 100%;
  object-fit: cover;            /* 铺满 */
  object-position: center center;
  display: block;
  transition: transform .5s ease;
}
.aps-anli-card:hover .aps-anli-card-img img{ transform: scale(1.05); }
/* 标题区：外层 flex 垂直居中（标题只有一行时才不会贴着顶），
   外层固定高度保证卡片等高；两行截断交给里面的 span。
   字号/留白全部走全站令牌，不写死数字。 */
.aps-anli-card h3{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  height: calc(var(--sp-3) * 2 + 2em * var(--lh-title));
  padding: 0 var(--sp-3);
  margin: 0;
  color: var(--aps-ink);
  transition: color var(--t-fast);
}
.aps-anli-card h3 span{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
  line-height: var(--lh-title);
}
.aps-anli-card:hover h3{ color: var(--aps-red); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px){
  .aps-anli-params{ grid-template-columns: 1fr; gap: var(--sp-3); }
  .aps-anli-related-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .aps-anli-title{ font-size: var(--fs-2xl); }
  .aps-anli-gallery{ grid-template-columns: 1fr; }
  .aps-anli-related-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .aps-anli-param{ padding: var(--sp-3); }
}

/* ==========================================================================
   三十三、常见问题（2026-09-20）
   列表页复用首页那套 .aps-faq 无图手风琴，这里只补编号、页头和底部兜底条。
   详情页单独一套 .aps-faqview —— 用「问 / 答」两个色块把问答关系说清楚。
   ========================================================================== */

/* ---------- 列表页 ---------- */
.aps-faqpage{ margin: 0; }
.aps-faqpage-head{
  padding: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-6);
}
.aps-faqpage-title{
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.35;
  color: var(--aps-ink);
  margin: 0 0 var(--sp-3);
  text-align: left;
}
.aps-faqpage-sub{
  font-size: var(--fs-base);
  color: var(--aps-muted);
  line-height: 1.8;
  margin: 0;
  max-width: 780px;
}

/* 问题前那个 01 / 02 编号 */
.aps-faqpage-no{
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--aps-red);
  letter-spacing: .02em;
  margin-right: var(--sp-3);
  opacity: .55;
}
.aps-faqpage-q{ display: block; }
.aps-faq-item[open] .aps-faqpage-no{ opacity: 1; }

/* 「查看完整解答」 */
.aps-faqpage-more{
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--aps-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  line-height: 1.6;
  transition: opacity var(--t-fast);
}
.aps-faqpage-more::after{ content: " →"; }
.aps-faqpage-more:hover{ opacity: .7; }

/* 底部兜底条 */
.aps-faqpage-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-7);
  background: var(--aps-navy);
  border-radius: var(--aps-r-lg);
  position: relative;
  overflow: hidden;
}
.aps-faqpage-cta::after{
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(209,25,39,.4), transparent 70%);
  pointer-events: none;
}
.aps-faqpage-cta h3{
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}
.aps-faqpage-cta p{
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.62);
  margin: 0;
  line-height: 1.7;
}
.aps-faqpage-tel{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-6);
  background: var(--aps-red);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--aps-r);
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: background var(--t-fast), transform var(--t-fast);
}
.aps-faqpage-tel:hover{ background: #b8141f; transform: translateY(-2px); }

/* ---------- 详情页 ---------- */
.aps-faqview{ margin: 0; }
.aps-faqview-head{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-6);
}
.aps-faqview-badge{
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--aps-r);
  background: var(--aps-red);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.aps-faqview-badge-a{
  background: var(--aps-navy);
  width: 36px; height: 36px;
  font-size: var(--fs-base);
}
.aps-faqview-q{
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.45;
  color: var(--aps-ink);
  margin: 0;
  text-align: left;
  padding-top: 2px;
}

.aps-faqview-body{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.aps-faqview-body .qhd-content{ flex: 1 1 auto; min-width: 0; }

.aps-faqview-more{
  padding-top: var(--sp-6);
  border-top: 1px solid var(--aps-line);
}
.aps-faqview-h2{
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--aps-ink);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--aps-red);
  line-height: 1.3;
  text-align: left;
}
.aps-faqview-list{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.aps-faqview-link{
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--aps-soft);
  border-left: 2px solid transparent;
  border-radius: var(--aps-r);
  color: var(--aps-text);
  font-size: var(--fs-base);
  text-decoration: none;
  line-height: 1.6;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.aps-faqview-link:hover{
  background: #fff;
  border-left-color: var(--aps-red);
  color: var(--aps-red);
}
.aps-faqview-back{
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--aps-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.aps-faqview-back::before{ content: "← "; }
.aps-faqview-back:hover{ color: var(--aps-red); }

/* ---------- 响应式 ---------- */
@media (max-width: 640px){
  .aps-faqpage-title{ font-size: var(--fs-2xl); }
  .aps-faqpage-cta{ padding: var(--sp-5); gap: var(--sp-4); }
  .aps-faqpage-tel{ justify-content: center; width: 100%; }
  .aps-faqview-head{ gap: var(--sp-3); }
  .aps-faqview-badge{ width: 36px; height: 36px; font-size: var(--fs-base); }
  .aps-faqview-q{ font-size: var(--fs-xl); }
  .aps-faqview-body{ gap: var(--sp-3); }
}

/* ==========================================================================
   三十四、内页紧凑留言条（2026-09-20）
   替代内页原来那个整屏「获取方案」大模块。
   内容页正文往往不长，底下压一整屏表单会头轻脚重 —— 压成一条横条就好。
   字段跟首页大表单完全一样，后台看到的还是同一条留言。
   ========================================================================== */
.aps-cbar{
  background: var(--aps-soft);
  border-top: 1px solid var(--aps-line);
  padding: var(--sp-7) 0;
  margin-top: var(--sp-8);
}
.aps-cbar .page-width{ display: block; }

/* 左文案 + 右电话 */
.aps-cbar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.aps-cbar-txt h3{
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--aps-ink);
  margin: 0 0 4px;
  line-height: 1.4;
}
.aps-cbar-txt p{
  font-size: var(--fs-sm);
  color: var(--aps-muted);
  margin: 0;
  line-height: 1.6;
}
.aps-cbar-tel{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--aps-red);
  text-decoration: none;
  transition: opacity var(--t-fast);
}
.aps-cbar-tel:hover{ opacity: .75; }

/* 表单：四个输入框横排 + 一个按钮 */
.aps-cbar-form{
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.aps-cbar-fields{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  min-width: 0;
}
.aps-cbar-fields input{
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-r);
  font-size: var(--fs-base);
  color: var(--aps-ink);
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.aps-cbar-fields input::placeholder{ color: #A8B2BD; }
.aps-cbar-fields input:focus{
  border-color: var(--aps-red);
  box-shadow: 0 0 0 3px rgba(209,25,39,.10);
}
.aps-cbar-submit{
  flex: none;
  height: 48px;
  min-width: 132px;
  padding: 0 var(--sp-6);
  background: var(--aps-red);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: inherit;
  border: 0;
  border-radius: var(--aps-r);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.aps-cbar-submit:hover{ background: #b8141f; transform: translateY(-1px); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px){
  .aps-cbar-fields{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .aps-cbar{ padding: var(--sp-6) 0; }
  .aps-cbar-head{ margin-bottom: var(--sp-4); }
  .aps-cbar-fields{ grid-template-columns: 1fr; }
  .aps-cbar-submit{ width: 100%; }
}

/* ==========================================================================
   三十五、无左栏的整幅页面（2026-09-20）
   适用：常见问题列表 / 常见问题详情 / 关于我们
   这三个页面不属于「文章」，套文章那套「左侧栏目树 + 右侧窄正文」没意义，
   去掉左栏改成整幅。这里只放三个页面共用的容器 + 各自版式。
   ========================================================================== */

/* 去左栏后的整幅容器：上下留白跟原来 .content 的 45/55 对齐 */
.aps-full{ margin: 45px 0 55px; }

/* ---------- ① 常见问题列表：左固定说明栏 + 右问答 ---------- */
.aps-faqpage-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-10);
  align-items: start;
}
.aps-faqpage-side{
  position: sticky;
  top: var(--sp-6);
  padding-right: var(--sp-6);
  border-right: 1px solid var(--aps-line);
}
.aps-faqpage-eyebrow{
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  color: var(--aps-red);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.aps-faqpage-side .aps-faqpage-title{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  margin: 0 0 var(--sp-4);
  text-align: left;
}
.aps-faqpage-side .aps-faqpage-sub{
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--aps-muted);
  margin: 0;
  max-width: none;
}
.aps-faqpage-divider{
  height: 1px;
  background: var(--aps-line);
  margin: var(--sp-6) 0;
}
.aps-faqpage-tip{
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--aps-muted);
  margin: 0 0 var(--sp-4);
}
.aps-faqpage-side .aps-faqpage-tel{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-5);
  background: var(--aps-red);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  border-radius: var(--aps-r);
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.aps-faqpage-side .aps-faqpage-tel:hover{ background: var(--aps-red-d); transform: translateY(-2px); }
.aps-faqpage-main{ min-width: 0; }
.aps-faqpage-main .aps-faq-item{ margin-bottom: var(--sp-3); }

/* ---------- ② 常见问题详情：整幅问答 ---------- */
.aps-faqview-head{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-7);
}
.aps-faqview-body{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
/* 整幅 1200px 一行中文太长，答案收到 940 阅读宽度 */
.aps-faqview-body .qhd-content{ max-width: var(--w-md); }

/* 其他问题：横排卡片 */
.aps-faqview-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.aps-faqview-card{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--aps-soft);
  border: 1px solid transparent;
  border-radius: var(--aps-r-lg);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.aps-faqview-card:hover{
  background: #fff;
  border-color: var(--aps-red);
  transform: translateY(-2px);
}
.aps-faqview-card-q{
  flex: none;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aps-navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.aps-faqview-card:hover .aps-faqview-card-q{ background: var(--aps-red); }
.aps-faqview-card-t{
  font-size: var(--fs-base);
  line-height: var(--lh-title);
  color: var(--aps-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- ③ 关于我们：企业档案式整幅 ---------- */
.aps-about-hero{
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-8);
}
.aps-about-eyebrow{
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  color: var(--aps-red);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.aps-about-title{
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  margin: 0 0 var(--sp-5);
  text-align: left;
  letter-spacing: 0;
}
.aps-about-lead{
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--aps-text);
  margin: 0 0 var(--sp-6);
  max-width: var(--w-md);
}
.aps-about-tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.aps-about-tags span{
  display: inline-block;
  padding: 6px var(--sp-4);
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--aps-text);
  line-height: 1.4;
}

/* 数字条 */
.aps-about-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-8);
}
.aps-about-stat{
  padding-left: var(--sp-4);
  border-left: 3px solid var(--aps-red);
}
.aps-about-stat-num{
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--aps-navy);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-2);
}
.aps-about-stat-num em{
  font-style: normal;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--aps-red);
  margin-left: 2px;
}
.aps-about-stat-label{
  font-size: var(--fs-sm);
  color: var(--aps-muted);
  line-height: 1.5;
}

/* 正文 */
.aps-about-h2{
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  color: var(--aps-ink);
  line-height: var(--lh-title);
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--aps-red);
  text-align: left;
}
/* 整幅之后正文一行太长，收到阅读宽度 */
.aps-about-body .qhd-content{ max-width: var(--w-md); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px){
  .aps-faqpage-grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .aps-faqpage-side{
    position: static;
    padding-right: 0;
    padding-bottom: var(--sp-6);
    border-right: 0;
    border-bottom: 1px solid var(--aps-line);
  }
  .aps-faqview-grid{ grid-template-columns: repeat(2, 1fr); }
  .aps-about-stats{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 640px){
  .aps-full{ margin: var(--sp-6) 0 var(--sp-8); }
  .aps-faqpage-side .aps-faqpage-title{ font-size: var(--fs-2xl); }
  .aps-faqview-grid{ grid-template-columns: 1fr; }
  .aps-about-title{ font-size: var(--fs-3xl); }
  .aps-about-lead{ font-size: var(--fs-16); }
  .aps-about-stat-num{ font-size: var(--fs-3xl); }
}

/* ==========================================================================
   三十六、关于我们 · 分栏切换（2026-09-20）
   关于我们（16）下面挂着三个单页栏目：企业简介(17) / 专业团队(18) / 厂房设备(19)。
   上一轮把左侧栏目树删掉之后页面上没入口了，这里用一个胶囊标签栏补回来。
   当前所在的那一项带 is-on（由易优的 currentstyle 输出）。
   停在「关于我们」本身时（它没有对应子项），外层有 is-parent，
   用 CSS 把第一项当成选中，免得三个都不亮看着像坏了。
   ========================================================================== */
.aps-about-nav{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-7);
}
.aps-about-nav-item{
  display: inline-block;
  padding: 9px var(--sp-5);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  color: var(--aps-text);
  text-decoration: none;
  line-height: 1.5;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.aps-about-nav-item:hover{
  border-color: var(--aps-red);
  color: var(--aps-red);
}
.aps-about-nav-item.is-on,
.aps-about-nav.is-parent .aps-about-nav-item:first-child{
  background: var(--aps-navy);
  border-color: var(--aps-navy);
  color: #fff;
}
.aps-about-nav-item.is-on:hover,
.aps-about-nav.is-parent .aps-about-nav-item:first-child:hover{
  background: var(--aps-red);
  border-color: var(--aps-red);
  color: #fff;
}
@media (max-width: 640px){
  .aps-about-nav{ gap: var(--sp-1); }
  .aps-about-nav-item{ padding: 8px var(--sp-4); font-size: var(--fs-base); }
}

/* ==========================================================================
   三十七、常见问题 · 类目切换 + 宽度修正（2026-09-20）
   ========================================================================== */

/* 【宽度修正】.aps-full 在 .page-width 里被压窄的原因：
   老 CSS 有 .page-width{display:flex}，aps.css 第十九节把它改回 block，
   但紧接着又有一条 .main > .page-width{display:flex !important}
   （产品/案例列表页要左右两栏并排用），优先级更高。
   结果 .aps-full 作为 flex 子项被按内容宽度收缩 —— 实测只有 650px，
   导致右栏到不了容器右边，跟下面留言条的右边缘对不齐。
   这里让 .aps-full 无论如何都占满整行。 */
.main > .page-width > .aps-full{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* 类目切换栏 */
.aps-faqpage-nav{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-7);
}
.aps-faqpage-nav-item{
  display: inline-block;
  padding: 9px var(--sp-5);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  color: var(--aps-text);
  text-decoration: none;
  line-height: 1.5;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.aps-faqpage-nav-item:hover{
  border-color: var(--aps-red);
  color: var(--aps-red);
}
.aps-faqpage-nav-item.is-on,
.aps-faqpage-nav.is-parent .aps-faqpage-nav-item:first-child{
  background: var(--aps-navy);
  border-color: var(--aps-navy);
  color: #fff;
}
.aps-faqpage-nav-item.is-on:hover,
.aps-faqpage-nav.is-parent .aps-faqpage-nav-item:first-child:hover{
  background: var(--aps-red);
  border-color: var(--aps-red);
  color: #fff;
}

/* 右栏：宽度交还给网格（整幅之后右栏本来就该顶到容器右边），
   把首页那条 max-width:900px + 居中去掉 */
.aps-faqpage-main .aps-faq{
  max-width: none;
  margin: 0;
}

@media (max-width: 640px){
  .aps-faqpage-nav{ gap: var(--sp-1); margin-bottom: var(--sp-5); }
  .aps-faqpage-nav-item{ padding: 8px var(--sp-4); font-size: var(--fs-base); }
}

/* ==========================================================================
   三十八、整幅页面的「原地切换」淡入（2026-09-20）
   配套 footer.htm 里那段脚本：点标签不再整页刷新，只换 .aps-full 里的内容。
   取数据期间把整块压暗一点、降不透明度，换完淡回来 —— 有反馈才不显得卡。
   ========================================================================== */
.aps-full{
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.aps-full.aps-swapping{
  opacity: .35;
  transform: translateY(4px);
}
@media (prefers-reduced-motion: reduce){
  .aps-full{ transition: none; }
  .aps-full.aps-swapping{ transform: none; }
}

/* ==========================================================================
   三十九、导航下拉重做 + 导航右侧去红 + 内页 banner 压矮（2026-09-20）
   ========================================================================== */

/* ---------- 1. 导航下拉：重做 ----------
   原来三个问题：
     ① 面板顶上压了一条 2px 红杠（border-top），用户说「不好看」
     ② 只有下面两角圆，上面两角是直角，跟全站的圆角语言不一致
     ③ transition 里带了 visibility —— 这是「不丝滑」的技术原因：
        visibility 是离散属性，放进过渡列表后显示/隐藏的时机不受控，
        鼠标斜着往下移（还没进面板）时它就开始收，看着一闪一闪的。
   正确做法：visibility 用 0s + 延迟 ——
     显示时立刻可见（延迟 0），隐藏时等淡出放完再消失（延迟 = 动画时长）。
   另外把面板顶边贴住导航底边，鼠标从导航项直着往下走不会掉出去。 */
.top.header-v4 .main-nav .sf-menu li > ul{
  position: absolute;
  top: var(--aps-hd);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.98);
  transform-origin: top center;
  /* ⚠️ 面板宽度原本被 menu.css 写死成 width: 13em（约 182px），
     所以右边总留一大片空白。这里 width:auto 让绝对定位元素按内容收缩。 */
  width: auto;
  min-width: 0;
  padding: var(--sp-2);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-lg);              /* 四角都圆，跟全站一致 */
  box-shadow: 0 18px 44px rgba(10,37,64,.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  z-index: 1200;
}
/* 顶上一个小三角，指向所在的导航项 */
.top.header-v4 .main-nav .sf-menu li > ul::before{
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: #fff;
  border-left: 1px solid var(--aps-line);
  border-top: 1px solid var(--aps-line);
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
}
.top.header-v4 .main-nav .sf-menu li:hover > ul{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.top.header-v4 .main-nav .sf-menu li > ul > li{ display: block; width: 100%; }
/* 下拉菜单项
     · 常态  透明底（就是白面板上的普通文字，不要浅灰块）
     · 悬停  白底 + 红字 + 红色边框
   用户 2026-09-20 定：不要浅灰底，但悬停的那个红框保留。 */
.top.header-v4 .main-nav .sf-menu li > ul > li > a{
  display: block;
  height: auto;
  line-height: 1.5;
  padding: 10px var(--sp-4);
  margin: 2px 0;
  border-radius: var(--r-md);
  background: transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--aps-text);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.top.header-v4 .main-nav .sf-menu li > ul > li > a::after{ display: none !important; }

/* ⚠️ 老 CSS 埋伏了一条：style.css 里
     .header-v4 .main-nav .sf-menu li li:hover{ background: #D11927 }
   它改的是下拉项的**父级 li**，不是 a。
   而 a 上下留了 2px 外边距，父级那层红就从缝里透出来 ——
   看着就像「红边框下面还有一块红底」。
   这里把父级 li 的背景按死，红色只允许出现在 a 的描边上。 */
.top.header-v4 .main-nav .sf-menu li > ul > li,
.top.header-v4 .main-nav .sf-menu li > ul > li:hover,
.top.header-v4 .main-nav .sf-menu li > ul > li.sfHover,
.top.header-v4 .main-nav .sf-menu li > ul > li > a:focus{
  background: transparent !important;
}

/* 悬停：白底 + 红字 + 红色边框（跟左侧栏目树一模一样）。
   边框用 box-shadow: inset 而不是 border ——
   border 会把盒子撑大 1~2px，鼠标移上去时菜单项会轻微抖一下。 */
.top.header-v4 .main-nav .sf-menu li > ul > li > a:hover,
.top.header-v4 .main-nav .sf-menu li > ul > li > a:focus{
  color: var(--aps-red);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--aps-red);
}
/* 导航项圆角也给足，胶囊感 */
.top.header-v4 .main-nav .sf-menu > li > a{ border-radius: var(--r-full); }

/* ---------- 2. 导航右侧：把红色拿掉 ----------
   原来是「浅灰底 + 红色大字电话号 + 红色圆图标」，一片红压在最右边，用户说不好看。
   改成：白底细边框的胶囊，号码用深藏青（醒目但不刺眼），只有悬停时才泛一点红。 */
.top.header-v4 .aps-nav-tel{
  background: #fff;
  border: 1px solid var(--aps-line);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-5);
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.top.header-v4 .aps-nav-tel:hover{
  background: #fff;
  border-color: var(--aps-red);
  box-shadow: 0 6px 18px rgba(209,25,39,.12);
}
.aps-nav-tel-txt strong{ color: var(--aps-navy); }
.aps-nav-tel:hover .aps-nav-tel-txt strong{ color: var(--aps-red); }

/* ---------- 3. 内页 banner 压矮 ----------
   原来是 500px（模板里写死的内联高度），实测 380px 渲染高度，
   1080p 屏占掉三分之一、笔记本上占掉一半，而且全站十几个内页共用同一张图。
   压到 220px —— 图还在（后台设的 banner 照常用），但不再喧宾夺主。 */
.header .slideshow.slideshow-min{ height: 220px !important; }
.slideshow-min .carousel-img{ height: 220px !important; }
.slideshow-min .carousel-img img{ object-fit: cover; object-position: center 40%; }

/* 面包屑条：原来 padding 90px 0 22px（实测 134px 高），
   在 220px 的 banner 上会盖掉大半个图，收窄成一条细带 */
.aps-crumb-bar{ padding: 46px 0 var(--sp-3); }
.aps-crumb{ font-size: var(--fs-sm); }

@media (max-width: 992px){
  .header .slideshow.slideshow-min{ height: 170px !important; }
  .slideshow-min .carousel-img{ height: 170px !important; }
  .aps-crumb-bar{ padding: 34px 0 var(--sp-2); }
}
@media (max-width: 640px){
  .header .slideshow.slideshow-min{ height: 140px !important; }
  .slideshow-min .carousel-img{ height: 140px !important; }
}

/* ---------- 4. 导航右侧图标：跟着主题变色 ---------- */
.aps-nav-tel-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--aps-soft);
  color: var(--aps-navy);
  flex: 0 0 auto;
  transition: background var(--t-base), color var(--t-base);
}
.aps-nav-tel:hover .aps-nav-tel-icon{
  background: var(--aps-red);
  color: #fff;
}
.aps-nav-tel-icon img{ width: 100%; height: 100%; border-radius: var(--r-full); display: block; }

/* ==========================================================================
   四十、手机端抽屉导航重做（2026-09-20）
   --------------------------------------------------------------------------
   之前 aps.css 对 .touch-* 系列**一处都没接管**，手机上用的还是老配色：
   18px 大黑字、#eee 分隔线、悬停整条变红、图标是 PNG 贴图。
   P3 把 template/mobile 关掉之后，这就是手机上唯一的主导航，必须先做好。

   改后：白底细边、15px 字、每一项是圆角块、当前项红字浅红底，
        子栏目缩进一层，汉堡图标改成 CSS 画的三条线（不再依赖 PNG）。
   交互（点击展开）由老的 nav.js 负责，不动它。
   ========================================================================== */
.touch-top-wrapper{
  background: #fff;
  border-bottom: 1px solid var(--aps-line);
  box-shadow: 0 1px 10px rgba(10,37,64,.05);
}
.touch-toggle li i.touch-icon-menu{
  /* 干掉老的 PNG 汉堡图，用三层渐变画三条线。
     ⚠️ 这里踩过一次：原先是先写 `background-image: none !important`，
        再用 `background:` 简写画三条线 —— 简写里的背景图被前面那条
        `!important` 压掉了，结果是「图标什么都画不出来」。
        现在把 !important 直接加在简写上，一次说清楚，别再拆成两条。
     ⚠️ 视觉上这个图标是手机上唯一的导航入口（≤768px 时新导航整个 display:none），
        改完一定要在窄屏下量像素确认它真的画出来了。 */
  background:
    linear-gradient(currentColor, currentColor) 0 0    / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50%  / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat !important;
  background-color: transparent !important;
  width: 24px !important;
  height: 16px !important;
  border-radius: 1px;
  color: var(--aps-ink);
}
/* 汉堡按钮的文字：「导航」两个字原来继承的是老 CSS 的 #DDD（浅灰），
   白底上几乎看不见。一起压成深色。 */
.touch-toggle li a.drawer-menu{
  color: var(--aps-ink) !important;
}

/* 抽屉面板 */
.drawer-section{ background: #fff; }
.drawer-section-menu{ padding: var(--sp-4) var(--sp-4) var(--sp-6); }

.touch-menu ul li{
  border-bottom: 0;                    /* 老的 #eee 分隔线全部去掉 */
  margin-bottom: 2px;
  position: relative;
}
.touch-menu ul li > a{
  display: block;
  height: auto !important;
  line-height: 1.5 !important;
  padding: var(--sp-3) var(--sp-4) !important;
  border-radius: var(--r-md);
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium);
  color: var(--aps-ink) !important;
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
/* 悬停/按下：浅灰底 + 红字，不要整条翻红 */
.touch-menu ul li > a:hover,
.touch-menu ul li > a:active{
  background: var(--aps-soft) !important;
  color: var(--aps-red) !important;
}
/* 当前所在栏目 */
.touch-menu ul li.current > a{
  background: rgba(209,25,39,.07) !important;
  color: var(--aps-red) !important;
  font-weight: var(--fw-semi);
}
/* 子栏目：缩进一层，字小一号，浅底 */
.touch-menu ul li > ul{
  padding: var(--sp-1) 0 var(--sp-2) var(--sp-4);
}
.touch-menu ul li > ul li > a{
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-normal);
  color: var(--aps-text) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: var(--r-sm);
}
/* 展开箭头：老的 PNG 换成一个 CSS 画的 V */
.touch-menu ul li i.touch-arrow-down,
.touch-menu ul li i.touch-arrow-up{
  background-image: none !important;
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  margin-top: -5px;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid var(--aps-muted);
  border-bottom: 2px solid var(--aps-muted);
  transform: rotate(45deg);
  transition: transform var(--t-fast);
}
.touch-menu ul li i.touch-arrow-up{ transform: rotate(-135deg); margin-top: -2px; }

/* ==========================================================================
   四十一、正文内联样式压制 + 全站统一的胶囊子导航（2026-09-20）
   ========================================================================== */

/* ---------- 1. 正文里的内联 font-family / 两端对齐 ----------
   实测：71 篇文章里 33 篇、18 个单页里 15 篇，正文带内联 font-family
   （内容是后台编辑器写进去的，形如 style="font-family:'微软雅黑',sans-serif"），
   还有 18 篇用了 text-align:justify（两端对齐）。

   两个问题：
     · 内联样式优先级高于任何普通 CSS 规则 → 你在 :root 里改全站字体，正文不跟着变
     · 中文两端对齐会让字距忽大忽小，是 2010 年代网页的做法

   这里用 !important 把它们压回来（内联样式只能被 !important 覆盖）。
   为什么不在数据库里改：那要重写 89 篇正文，风险大得多；
   这样压制是纯前端的、随时能撤，而且后台以后再粘带格式的正文也照样被管住。 */
.qhd-content,
.qhd-content *{ font-family: var(--aps-font) !important; }

/* 从别处粘过来的正文（AI 对话、Word）常带一串内联样式：
     <p class="ds-markdown-paragraph" style="color: rgb(15,17,21);
        font-family: quote-cjk-patch, Inter, ...; background-color: rgb(255,255,255)">
   内联样式优先级最高，会盖掉全站的字色和字体。
   这里只针对「带内联 color 的元素」压制 —— 没写内联色的正常内容完全不受影响，
   所以不会误伤后台故意标的红字。 */
.qhd-content [style*="color"]{
  color: inherit !important;
  background-color: transparent !important;
  font-family: inherit !important;
}
.qhd-content p[style*="justify"],
.qhd-content div[style*="justify"]{ text-align: left !important; }

/* ---------- 2. 胶囊子导航（全站统一） ----------
   产品 / 案例 / 新闻这几个列表页原来左侧挂着一棵栏目树，
   而「常见问题」「关于我们」已经改成整幅 + 顶部胶囊切换栏了 ——
   同一个站两套骨架。这里统一成后者：去掉左栏，顶部放一条胶囊切换栏。
   样式跟 .aps-about-nav / .aps-faqpage-nav 完全一致，只是换了个通用名字。 */
/* 容器是「若干行」的竖排；每行里面才是横向排列的胶囊。
   为什么要分行：产品栏目以后可能有二级（比如「桁架机械手」下面再分龙门式/悬臂式），
   一行会被挤成一条长龙、而且看不出层级。分行之后第一行是同级、第二行是下级，
   再加多少层都不会乱。 */
.aps-subnav{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-7);
}
.aps-subnav-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* 下级那一行：缩进 + 前面一条小连线，一眼看出是从属关系 */
.aps-subnav-row + .aps-subnav-row{
  padding-left: var(--sp-6);
  position: relative;
}
.aps-subnav-row + .aps-subnav-row::before{
  content: "";
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  width: var(--sp-3);
  height: 1px;
  background: var(--aps-line);
}
/* 下级行的胶囊小一号、描边更淡 */
.aps-subnav-row + .aps-subnav-row .aps-subnav-item{
  font-size: var(--fs-base);
  padding: 7px var(--sp-4);
  border-style: dashed;
}
.aps-subnav-row + .aps-subnav-row .aps-subnav-item.is-on{
  border-style: solid;
}
.aps-subnav-item{
  display: inline-block;
  padding: 9px var(--sp-5);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  color: var(--aps-text);
  text-decoration: none;
  line-height: 1.5;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.aps-subnav-item:hover{ border-color: var(--aps-red); color: var(--aps-red); }
.aps-subnav-item.is-on,
.aps-subnav.is-parent .aps-subnav-item:first-child{
  background: var(--aps-navy);
  border-color: var(--aps-navy);
  color: #fff;
}
.aps-subnav-item.is-on:hover,
.aps-subnav.is-parent .aps-subnav-item:first-child:hover{
  background: var(--aps-red);
  border-color: var(--aps-red);
  color: #fff;
}
@media (max-width: 640px){
  .aps-subnav{ gap: var(--sp-1); margin-bottom: var(--sp-5); }
  .aps-subnav-item{ padding: 8px var(--sp-4); font-size: var(--fs-base); }
}

/* ==========================================================================
   四十二、统一骨架（2026-09-20，同日回滚）
   --------------------------------------------------------------------------
   曾经试过「全站去掉左侧栏目树，改用顶部胶囊切换栏」，
   但用户看过后要求：**列表页把左侧栏目树恢复**，
   「关于我们」和「常见问题」保持现在的样子（那两个页面没有左栏，用顶部胶囊）。

   所以这一节现在什么都不做，保留标题记录这次决策的来龙去脉。
   分工是：
     · 产品 / 案例 / 新闻 列表页 —— 左栏栏目树做主导航（.page-menu，见第四十三节）
     · 常见问题 / 关于我们     —— 没有左栏，用顶部胶囊切换栏（.aps-subnav / subnav.htm）
   ========================================================================== */

/* ==========================================================================
   四十三、左侧栏目树重做（2026-09-20）
   --------------------------------------------------------------------------
   原来是「深蓝标题块 + 白底行 + 白色分隔线 + 悬停整行位移」，
   视觉上是 2011 年门户站的做法。改成一整张圆角卡片：
     · 整块一个 1px 边框 + 圆角 + 轻阴影，跟全站的卡片语言一致
     · 标题块保持深藏青（它是栏目名，需要压住）
     · 列表项自己做圆角块，悬停浅灰、当前项浅红底 + 左侧红条
     · 去掉老 CSS 那个悬停位移（padding-left 变化会让字跳一下）
   ========================================================================== */
.main > .page-width > .sidebar .page-menu{
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sd-sm);
}
.page-menu-title{
  background: var(--aps-navy);
  padding: var(--sp-5) var(--sp-5);
  border-radius: 0 !important;
}
.page-menu-title h3{
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: #fff;
  margin: 0;
  line-height: var(--lh-title);
}
/* 列表外面留一圈内边距，让每一项都像独立的圆角块 */
.page-menu-content{ padding: var(--sp-3); }
/* ⚠️ 老 CSS 给 li 上了 #F6F6F6 灰底 + 8px 下边距（style.css:4220），
   只改 a 的话那层灰还在背后透出来。这里一并接管，让每一项是干净的圆角块。 */
.page-menu-content ul li,
.page-menu-content ul li:hover,
.page-menu-content ul li.current{
  margin-bottom: var(--sp-1) !important;
  background: transparent !important;   /* 老 CSS 有 li:hover{background:#D11927}，一并按死 */
}
.page-menu-content ul li a{
  display: block;
  padding: var(--sp-3) var(--sp-4) !important;
  border-radius: var(--r-md) !important;
  background: var(--aps-soft) !important;
  border-bottom: 0 !important;
  border-left: 3px solid transparent !important;
  font-size: var(--fs-md) !important;
  color: var(--aps-text) !important;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.page-menu-content ul li a:hover{
  background: #fff !important;
  color: var(--aps-red) !important;
  box-shadow: inset 0 0 0 1px var(--aps-red) !important;   /* 描边代替位移 */
  padding-left: var(--sp-4) !important;
}
/* 当前项：实心深藏青块 —— 一眼就知道自己在哪，
   跟顶部标题块同色，整块看着是一个整体 */
.page-menu-content ul li.current a{
  background: var(--aps-navy) !important;
  color: #fff !important;
  border-left-color: transparent !important;
  font-weight: var(--fw-semi);
}
/* 每一项右边一个小箭头，鼠标移上去才浮现，给个「点得进去」的暗示 */
.page-menu-content ul li a{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.page-menu-content ul li a::after{
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.page-menu-content ul li a:hover::after{ opacity: .75; transform: rotate(-45deg) translate(2px, -2px); }
.page-menu-content ul li.current a::after{ opacity: .5; }
/* 列表和标题之间留一点呼吸 */
.page-menu-content{ padding: var(--sp-3) !important; }

/* ==========================================================================
   四十四、正文排版全站统一 + 新闻详情页重做（2026-09-20）
   ========================================================================== */

/* ---------- 1. 正文（后台编辑器内容）全站统一 ----------
   实测五类页面的 .qhd-content，有三处不一致：
     · 容器字号   产品/案例/新闻 15px，关于我们/常见问题 14px
     · 行高       同上 1.95 vs 1.7
     · 段落颜色   案例页是 rgb(15,17,21)（近黑），其余 rgb(57,67,78)
     · 内容最大宽 新闻 720 / 产品·常见问题 800 / 关于我们 940 —— 三种
   这里一把统一：字号取 --fs-16，行高取 --lh-base，颜色取 --aps-text，
   最大宽统一到 --w-md（940px）。以后不管后台正文里带了什么内联样式，
   版面都是同一套。 */
/* ⚠️ 选择器必须带上 .content-wrapper .qhd-content ——
   文件前面那条 .content-wrapper .qhd-content{ font-size:15px; line-height:1.95 }
   优先级(0,2,0)比光写 .qhd-content (0,1,0) 高，不带上就压不住。 */
.qhd-content,
.content-wrapper .qhd-content,
.aps-full .qhd-content{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--aps-text);
  max-width: var(--w-md);
}
/* 老规则把文章正文的段落单独压到 720px，跟其他页面的 940 不一致，也去掉 */
.article-content .qhd-content p,
.article-content .qhd-content ul,
.article-content .qhd-content ol{
  max-width: none;
}
.qhd-content p,
.qhd-content li,
.qhd-content td,
.qhd-content th,
.qhd-content span{
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* 段落之间统一留白 */
.qhd-content p{ margin: 0 0 var(--sp-4); }
/* 正文里的图片不再被单独压窄（原来新闻 720 / 产品 800 / 关于我们 940 各不一样） */
.qhd-content img{ max-width: 100%; height: auto; }

/* ---------- 2. 新闻详情页 ---------- */
.aps-newsd{ margin: 0; }

/* 标题区：左对齐，跟左侧栏目树同一条轴线 */
.aps-newsd-head{
  padding: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--aps-line);
  margin-bottom: var(--sp-6);
}
.aps-newsd-title{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
  margin: 0 0 var(--sp-3);
  text-align: left;
  letter-spacing: 0;
}
.aps-newsd-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--aps-muted);
}
.aps-newsd-meta-item{ display: inline-flex; align-items: center; gap: var(--sp-1); }
.aps-newsd-meta-item em{ font-style: normal; }
.aps-newsd-meta-item em::after{ content: "："; }
.aps-newsd-meta-item a{
  color: var(--aps-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(209,25,39,.3);
  transition: border-color var(--t-fast);
}
.aps-newsd-meta-item a:hover{ border-bottom-color: var(--aps-red); }

.aps-newsd-body{ margin-bottom: var(--sp-10); }

/* 相关新闻 */
.aps-newsd-related{
  padding-top: var(--sp-6);
  border-top: 1px solid var(--aps-line);
}
.aps-newsd-h2{
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--aps-ink);
  line-height: var(--lh-title);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--aps-red);
  text-align: left;
}
.aps-newsd-back{
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--aps-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.aps-newsd-back::before{ content: "← "; }
.aps-newsd-back:hover{ color: var(--aps-red); }

@media (max-width: 640px){
  .aps-newsd-title{ font-size: var(--fs-2xl); }
  .aps-newsd-meta{ gap: var(--sp-3); }
}

/* ==========================================================================
   四十五、详情页底部：上一篇 / 下一篇 / 返回列表（2026-09-20）
   四个详情页共用（产品 / 案例 / 新闻 / 常见问题），
   模板是公共的 postnav.htm，改一处四个页面全变。
   ========================================================================== */
.aps-postnav{
  margin: 0 0 var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--aps-line);
}
.aps-postnav-lr{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* 只有一条时（第一篇 / 最后一篇）占满整行，不留一半空白 */
.aps-postnav-lr > .aps-postnav-item:only-child{ grid-column: 1 / -1; }

.aps-postnav-item{
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--aps-soft);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-decoration: none;
  min-width: 0;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.aps-postnav-item:hover{
  background: #fff;
  border-color: var(--aps-red);
  box-shadow: inset 0 0 0 1px var(--aps-red);
}
.aps-postnav-item em{
  display: block;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--aps-muted);
  margin-bottom: 4px;
  line-height: 1.4;
}
.aps-postnav-item span{
  display: block;
  font-size: var(--fs-base);
  color: var(--aps-text);
  line-height: var(--lh-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast);
}
.aps-postnav-item:hover span{ color: var(--aps-red); }
.aps-postnav-next{ text-align: right; }

/* 到头了的那一格（第一篇 / 最后一篇）：
   形状跟旁边正常的完全一样 —— 灰底、圆角、同样的内边距，
   但不可点，所以把 hover 的红框撤掉、文字压成次要色。
   选择器故意写长一点（双类名 + :hover），否则压不住上面那条 .aps-postnav-item:hover。 */
.aps-postnav-none{
  cursor: default;
}
.aps-postnav-none:hover,
.aps-postnav-item.aps-postnav-none:hover{
  background: var(--aps-soft);
  border-color: transparent;
  box-shadow: none;
}
.aps-postnav-none:hover span,
.aps-postnav-item.aps-postnav-none:hover span{
  color: var(--aps-muted);
}

.aps-postnav-back{
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--aps-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.aps-postnav-back::before{ content: "← "; }
.aps-postnav-back:hover{ color: var(--aps-red); }

@media (max-width: 640px){
  .aps-postnav-lr{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   四十六、正文图片自动跟正文栏对齐（2026-09-20）
   --------------------------------------------------------------------------
   要解决的问题：后台上传的图，宽度五花八门 —— 大部分 800px，少数 1080 / 1600，
   而正文栏在这种情况下是 880（带左侧栏的详情页）或 940（整幅页）。
   结果同一篇文章里，有的图铺满、有的缩进一截，看着不齐。
   而且编辑每次传图还得自己算尺寸，很麻烦。

   做法：段落里**独占一张**的图，直接铺满正文栏宽 —— 传多大都行，前台自动缩放。
   只有「独占一段」的图才铺满，跟文字混排的小图标保持原尺寸，不会被拉大。
   这是编辑器里最常见的写法（<p><img /></p>），实测正文里所有配图都是这个结构。

   ⚠️ 用 :only-child 判断「独占」—— 只要那个 <p> 里除了这张图还有别的元素
      （比如 <br> 或一行字），规则就不生效，图保持原尺寸。
      所以后台如果想放一张小图，把它跟别的元素放同一段就行。

   ⚠️ 宽度用 100% 而不是 max-width —— 用 max-width 的话，
      800px 的图在 880px 的栏里还是 800px，正是要修的这个问题。
   ========================================================================== */
.qhd-content > p > img:only-child,
.qhd-content > p > a:only-child > img:only-child,
.qhd-content > img,
.qhd-content > a > img{
  width: 100%;
  height: auto;
}

/* ==========================================================================
   四十七、分类切换栏 .aps-tabs（2026-09-20）
   搜索页和标签页共用，模板是 searchtabs.htm。
   一排「全部 / 产品 / 案例 / 资讯 / 问题」，右边跟着该类的条数。
   视觉沿用站内已有的胶囊栏（.aps-subnav-item），保证跟常见问题、关于我们
   那两个页面的栏目切换看起来是同一套东西。
   ========================================================================== */
.aps-tabs{
  background: #fff;
  border-bottom: 1px solid var(--aps-line);
}
.aps-tabs .page-width{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.aps-tabs-item{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-5);
  background: #fff;
  border: 1px solid var(--aps-line);
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  color: var(--aps-text);
  text-decoration: none;
  line-height: 1.5;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.aps-tabs-item:hover{ border-color: var(--aps-red); color: var(--aps-red); }

/* 条数：小一号、压淡，选中时跟着一起反白 */
.aps-tabs-item em{
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--aps-muted);
  transition: color var(--t-fast);
}
.aps-tabs-item:hover em{ color: var(--aps-red); }

.aps-tabs-item.is-on{
  background: var(--aps-navy);
  border-color: var(--aps-navy);
  color: #fff;
}
.aps-tabs-item.is-on em{ color: rgba(255, 255, 255, .72); }
.aps-tabs-item.is-on:hover{
  background: var(--aps-red);
  border-color: var(--aps-red);
  color: #fff;
}
.aps-tabs-item.is-on:hover em{ color: rgba(255, 255, 255, .78); }

@media (max-width: 640px){
  .aps-tabs .page-width{
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    /* 窄屏一行放不下就横向滚，不要挤成两行把页面顶下去 */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .aps-tabs .page-width::-webkit-scrollbar{ display: none; }
  .aps-tabs-item{
    flex: 0 0 auto;
    padding: 7px var(--sp-4);
    font-size: var(--fs-base);
  }
}

/* ---------- 搜索结果的「所属栏目」小标 ----------
   搜索是把产品/案例/资讯/问答混在一起出的，不标出来根本分不清这条是什么。
   .aps-news-date 原本是 display:block 独占一行，这里要跟它并排，所以覆盖掉。 */
.aps-news-row-meta{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.aps-news-row-meta .aps-news-date{
  display: inline-block;
  margin-bottom: 0;
}
.aps-search-cat{
  display: inline-block;
  padding: 2px var(--sp-3);
  background: var(--aps-soft);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: var(--aps-muted);
  line-height: 1.6;
  white-space: nowrap;
}

/* ---------- 详情页的标签栏 .aps-arctags ----------
   模板是 arctags.htm，四个详情页共用。
   故意不加 border-top —— 紧跟其后的 .aps-postnav 已经有一条上边框了，
   两边都加会挨出两条线。 */
.aps-arctags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
}
.aps-arctags-label{
  font-size: var(--fs-sm);
  color: var(--aps-muted);
  margin-right: var(--sp-1);
}
.aps-arctag{
  display: inline-block;
  padding: 5px var(--sp-4);
  background: var(--aps-soft);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--aps-text);
  text-decoration: none;
  line-height: 1.5;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.aps-arctag:hover{
  background: #fff;
  border-color: var(--aps-red);
  color: var(--aps-red);
}

/* ==========================================================================
   四十八、常见问题详情页改版（2026-09-20）
   模板 view_article_faq.htm。这节写在文件最末尾，用来盖住前面第三十三节里
   那套旧的 .aps-faqview 规则（旧版没把「答」框起来，短答案时中间一大片空）。
   ========================================================================== */

/* 问：标记 + 标题 + 元信息，整体居中留白收紧 */
.aps-faqview-head{
  align-items: flex-start;
  padding-bottom: var(--sp-4);
  border-bottom: none;          /* 改由下面的卡片分隔，不要这条例线了 */
  margin-bottom: var(--sp-4);
}
.aps-faqview-headtext{
  flex: 1 1 auto;
  min-width: 0;
}
.aps-faqview-q{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}

/* 元信息：发布时间 / 所属分类 */
.aps-faqview-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}
.aps-faqview-meta-item{
  font-size: var(--fs-sm);
  color: var(--aps-text);
  text-decoration: none;
  transition: color var(--t-fast);
}
.aps-faqview-meta-item em{
  font-style: normal;
  color: var(--aps-muted);
  margin-right: var(--sp-2);
}
a.aps-faqview-meta-item:hover{ color: var(--aps-red); }

/* 答：浅底卡片，把长短不一的答案收在一起 */
.aps-faqview-ans{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--aps-soft);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-7);
}
/* 卡片里的正文不再限宽 —— 卡片本身已经把内容收拢了，再限一次会显得右半边空 */
.aps-faqview-body{
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.aps-faqview-body .qhd-content{ max-width: none; }
/* 卡片里最后一段的下边距去掉，否则卡片底部会多出一块空 */
.aps-faqview-ans .qhd-content > *:last-child{ margin-bottom: 0; }

@media (max-width: 640px){
  .aps-faqview-ans{
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
  .aps-faqview-meta{ gap: var(--sp-4); }
}

/* ==========================================================================
   四十九、详情页元信息条 .aps-meta（2026-09-20）
   作者 · 发布时间 · 浏览 · 分类，四个详情页共用（模板 arcmmeta 那条 include）。
   原来每个页面的元信息各写各的、类名也不一样（.aps-anli-meta / .aps-newsd-meta
   / .aps-faqview-meta），加个「作者」要改四处。现在收成一个组件。
   旧的那几个类名保留着不动，避免外部样式引用断掉。
   ========================================================================== */
.aps-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--aps-text);
}
.aps-meta-item{
  display: inline-flex;
  align-items: center;
  color: var(--aps-text);
  text-decoration: none;
  line-height: 1.6;
  transition: color var(--t-fast);
}
.aps-meta-item em{
  font-style: normal;
  color: var(--aps-muted);
  margin-right: var(--sp-2);
}
a.aps-meta-item:hover{ color: var(--aps-red); }

/* 浏览数稍微加重一点，不然混在中间看不见 */
.aps-meta-num{
  color: var(--aps-ink);
  font-weight: var(--fw-semi);
}

@media (max-width: 640px){
  .aps-meta{ gap: var(--sp-1) var(--sp-4); font-size: var(--fs-xs); }
}

/* ==========================================================================
   五十、常见问题详情页：不放图（2026-09-20）
   --------------------------------------------------------------------------
   用户明确要求：问答正文里不要出现图片。
   后台录问答时基本也不会配图，但历史内容（早期从旧站导入的）正文里是带图的，
   所以这里直接挡掉，避免以后又冒出来。

   ⚠️ 这是一个「有意的限制」。如果哪天想在问答里放图，
      把下面两条规则删掉即可，其它地方不用动。
   ⚠️ display:none 的图浏览器**仍然会下载**（只是不显示），
      所以真正的干净做法是后台把那几张图从正文里删掉。
      交付目录里那份 SQL 做的就是这件事，这里是兜底。
   ========================================================================== */
.aps-faqview-ans .qhd-content img{ display: none !important; }
/* 图片被藏掉之后，包着它的那个空段落还会占一段间距，一并收掉 */
.aps-faqview-ans .qhd-content p:has(> img:only-child){ display: none; }

/* ==========================================================================
   五十一、图片灯箱 .aps-lightbox（2026-09-20）
   --------------------------------------------------------------------------
   产品详情页的主图点一下，全屏看大图。
   主图那块用了 object-fit: cover（铺满外框），非 4:3 的图会被裁掉两边；
   灯箱里用的是 object-fit: contain，**完整不裁**，所以是「看全图」的出口。

   结构（view_product.htm 页面底部生成）：
     .aps-lightbox          全屏遮罩，默认 display:none，加 .is-open 才显示
       img                  大图
       .aps-lightbox-close  右上角关闭按钮

   关闭方式三种：点遮罩、点关闭按钮、按 Esc。
   ========================================================================== */
.aps-lightbox{
  position: fixed;
  inset: 0;
  /* ⚠️ 这个数字看着离谱，是被逼的：
     爱番番（百度）的悬浮窗是外部脚本运行时注入的，
     层级写死成 embed-icon:2147482100 / embed-messageboard:2147482300，
     不盖住它的话，留言面板和右侧图标条会浮在灯箱上面（实测过，很难看）。
     按用户要求不动爱番番的代码，所以只能把灯箱的层级抬到它上面。
     它再改层级的话，这里跟着抬就行 —— 灯箱是全屏弹层，盖住一切才是对的行为。 */
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: rgba(10, 37, 64, .92);
  cursor: zoom-out;
}
.aps-lightbox.is-open{ display: flex; }

.aps-lightbox img{
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;          /* 灯箱里不裁，完整看 */
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sd-lg);
  cursor: default;
}

.aps-lightbox-close{
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.aps-lightbox-close:hover{ background: var(--aps-red); }

/* 灯箱打开时锁住背景滚动，否则滚轮会带着整页跑 */
body.aps-lightbox-on{ overflow: hidden; }

@media (max-width: 640px){
  .aps-lightbox{ padding: var(--sp-3); }
  .aps-lightbox-close{ top: var(--sp-3); right: var(--sp-3); width: 38px; height: 38px; }
  .aps-lightbox img{ max-height: 80vh; }
}

/* ==========================================================================
   五十二、常见问题详情页 · 重新设计（2026-09-20 第二次改）
   --------------------------------------------------------------------------
   用户反馈「太丑了，跟整个网站都不搭」。问题出在三个地方：

   ① 整页拉满 1200px，但答案卡片里的文字只有 700px 宽 ——
      右边常年一大片死白，灰卡看着像个占位框而不是内容。
   ② 灰卡又大又平，没有任何结构，跟站内「白底 + 细线 + 红色竖条小标题」
      那套语言完全不是一回事。
   ③ 卡片里的链接是浏览器默认的蓝色下划线，站内别处从来没出现过这种样式。

   改法：
   · 整页收成 --w-md(940px) 居中单栏 —— 问答是纯阅读型页面，不需要 1200px。
     收窄之后标题、答案卡、标签、上下篇、其他问题全落在同一条轴线上。
   · 问题区加一条底线做分隔，不再靠灰卡撑结构。
   · 答案卡保留浅灰底（长短答案都能被框住），但左侧加一条竖色带，
     跟 .aps-pd-h2 / .aps-anli-h2 / .aps-faqview-h2 的红色竖条是同一套语言。
   · 正文里的链接统一成站内的红色，去掉默认下划线。
   ========================================================================== */
.aps-faqview{
  max-width: var(--w-md);
  margin: 0 auto;
}

/* ---------- ① 问题区 ---------- */
/* 底下那条分隔线去掉了（2026-09-20 用户反馈「那条分界线不好看」）。
   问题区和答案卡本来就靠灰底区分得很清楚，再加一条线是多余的。
   去掉线之后把上下间距收一下，不然中间会显得空。 */
.aps-faqview-head{
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: var(--sp-5);
}
.aps-faqview-badge{
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--aps-red);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aps-faqview-q{
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--aps-ink);
}
.aps-faqview-headtext .aps-meta{ margin-top: var(--sp-3); }

/* ---------- ② 答案卡 ---------- */
.aps-faqview-ans{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--aps-soft);
  border-left: 3px solid var(--aps-navy);   /* 站内「竖条 + 标题」那套语言 */
  border-radius: var(--r-md);
  margin-bottom: var(--sp-7);
}
.aps-faqview-badge-a{
  width: 38px;
  height: 38px;
  font-size: var(--fs-md);
  border-radius: var(--r-sm);
  background: var(--aps-navy);
}
.aps-faqview-body{
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.aps-faqview-body .qhd-content{ max-width: none; }

/* 正文里的链接：站内统一是红色、无下划线，不加这条会出现浏览器默认的蓝色下划线 */
.aps-faqview-ans .qhd-content a{
  color: var(--aps-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 25, 39, .3);
}
.aps-faqview-ans .qhd-content a:hover{ border-bottom-color: var(--aps-red); }

/* 卡片里最后一段的下边距去掉，否则卡片底部会多出一块空 */
.aps-faqview-ans .qhd-content > *:last-child{ margin-bottom: 0; }

/* ---------- ③ 其他问题 ---------- */
.aps-faqview-more{ margin-top: var(--sp-8); }
.aps-faqview-grid{ grid-template-columns: repeat(2, 1fr); }

@media (max-width: 992px){
  .aps-faqview{ max-width: none; }
}
@media (max-width: 640px){
  .aps-faqview-head{ gap: var(--sp-3); padding-bottom: var(--sp-4); }
  .aps-faqview-badge{ width: 38px; height: 38px; font-size: var(--fs-base); }
  .aps-faqview-q{ font-size: var(--fs-xl); }
  .aps-faqview-ans{ padding: var(--sp-4); gap: var(--sp-3); }
  .aps-faqview-badge-a{ width: 32px; height: 32px; font-size: var(--fs-sm); }
  .aps-faqview-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   五十三、关于我们（企业简介 / 专业团队 / 厂房设备）收窄（2026-09-20）
   --------------------------------------------------------------------------
   用户反馈「这几个栏目感觉太宽」。
   原来整页拉满 1200px，但正文早就限了 940px（.aps-about-body .qhd-content），
   标题、行业标签、数据条却还是满幅 —— 上下几条边对不齐，
   而且正文右侧常年空一大块（跟问答页之前是同一个毛病）。

   改法跟问答页一致：整个 .aps-about 收成 --w-md(940px) 居中单栏，
   标题、标签、数据条、正文、图片全落在同一条轴线上。
   容器收窄之后，正文和导语就不用再各限一次了，去掉免得出现「宽度套宽度」。
   ========================================================================== */
.aps-about{
  max-width: var(--w-md);
  margin: 0 auto;
}
.aps-about-body .qhd-content{ max-width: none; }
.aps-about-lead{ max-width: none; }

/* ==========================================================================
   五十四、导航切换断点从 1200 收到 992（2026-09-20，P2）
   --------------------------------------------------------------------------
   老 CSS 在 style.css:5071 有个 @media (max-width:1200px)，
   里面把 .default-top（新导航）隐藏、换成 .touch-top（老手机导航条）。
   也就是说 **1200px 以下看到的是旧导航** —— 平板和 13 寸笔记本全中招。

   实测新导航各宽度下装不装得下：
     1200 → 需要 1138 / 可用 1185  ✅
     1100 → 需要 1045 / 可用 1085  ✅
     1024 → 需要  969 / 可用 1009  ✅
      992 → 需要  937 / 可用  977  ✅
      900 → 需要  853 / 可用  885  ✅（已经很紧）
      850 → 需要  853 / 可用  835  ❌ 装不下
   所以收到 992 是有依据的：992 以上新导航放得开，992 以下交给抽屉导航
   （抽屉更适合触摸，本来就该在这个区间出现）。

   这里只覆盖 style.css，不动它 —— P2 期间 style.css 只加不删。
   ========================================================================== */
@media screen and (min-width: 993px) and (max-width: 1200px){
  .top.header-v4.desktops-section.default-top{ display: block !important; }
  .touch-top.mobile-section{ display: none !important; }

  /* 光把导航显示出来还不够 —— 这个宽度下它会折行。
     根因不是导航自己太宽，而是**右边那块（搜索 + 电话）占掉 239px**，
     导航被挤得没地方，flex 又不换行，结果文字被压着折成两行
     （注意是折行不是换行：li 还是横排，只是每个 li 里的字折了）。

     实测：把电话那串数字收起来、只留可点的电话图标，右边立刻省下约 180px，
     导航从「差 130px」变成「余 180px」。光收导航自己的留白是不够的 ——
     一开始只改留白，看着像没生效，其实根本不够。

     电话没丢：外面还是 <a href="tel:...">，点图标照样拨号。

     ⚠️⚠️ 下面那两条必须带 !important —— 第 3102 行那条胶囊导航规则里
         padding 和 font-size 都写了 !important，不带就压不住，
         表现是「改了完全没反应」。这个坑踩过一次，别再踩。 */
  .top.header-v4 .main-nav .sf-menu > li > a,
  .top.header-v4 .main-nav .sf-menu > li > a:visited{
    padding: 0 var(--sp-3) !important;
    font-size: var(--fs-base) !important;
  }
}
/* 再窄一档（993~1100）：导航和电话号码挤不下，把数字收起来只留可点的电话图标。
   1101~1200 这一档放得下，数字照常显示 —— 桌面端能直接看到号码，
   比只给一个图标有用（tel: 链接在电脑上点了没反应）。
   电话没丢：外面还是 <a href="tel:...">。 */
@media screen and (min-width: 993px) and (max-width: 1100px){
  .top.header-v4 .aps-nav-tel-txt{ display: none; }
  .top.header-v4 .aps-nav-tel{ padding: var(--sp-2); }
}

/* ==========================================================================
   五十五、窄屏下内边距叠加（2026-09-20，P2）
   --------------------------------------------------------------------------
   老 CSS 在 style.css:5132（@media max-width:1200）给 .main 加了 padding:0 10px，
   aps.css 自己在 max-width:992 又给 .page-width 加了 padding:0 20px。
   两者是父子关系，于是**两边各叠成 30px** —— 375 的屏上一共吃掉 60px，
   内容只剩 300px 宽，左右空得比正文还宽。

   .page-width 的 20px 做安全边距已经够，把 .main 那 10px 在窄屏收掉。 */
@media (max-width: 992px){
  .main{ padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   五十六、产品详情页两栏的堆叠断点从 992 收到 768（2026-09-20，P2）
   --------------------------------------------------------------------------
   原来 @media (max-width:992px) 就把「左图 + 右信息」拆成上下。
   问题是 769~992 这一档（小平板、iPad 竖屏）宽度还很富余，
   拆开之后主图变成整幅 —— 992 屏上高达 714px，占掉七成屏幕高，
   用户得先滚过大半屏才看得到参数。

   收到 768：769~992 保持左右两栏（图占 46%，信息在右边），
   768 及以下才拆成上下 —— 那才是真正需要拆的宽度。

   下面这段放在文件末尾、盖住上面那条 992 的规则（同特异性，后者胜）。
   ⚠️ 992 那个块里还有 .aps-related-grid 和 .aps-pd-gallery 两条，
      这里只把 .aps-pd-top 的方向恢复成横向，其余不动。
   ========================================================================== */
@media (min-width: 769px) and (max-width: 992px){
  .aps-pd-top{ flex-direction: row; gap: var(--sp-6); }
  .aps-pd-gallery{ flex: 0 0 46%; width: auto; min-width: 0; }
}

/* ==========================================================================
   五十七、窄屏垂直节奏收口（2026-09-20，P2 观感优化）
   --------------------------------------------------------------------------
   背景：扫了一遍，375 下还有 6 个组件在用桌面级的 40px 留白没缩。
   40px 在 1280 的屏上是「透气」，在 375 的手机上就偏松了 ——
   一屏本来就不高，块与块之间再各空 40px，内容被推得很散。

   另外产品网格的 gap 是 18px、留条表单是 22px/28px ——
   都不在全站间距刻度上（刻度是 4/8/12/16/20/24/32/40/48/64/80）。
   刻度外的小数看着不整齐，节奏就散了。

   这一轮只收「手机上最显眼的那几处」，不做全量替换 —— 全量清死代码和
   刻度对齐是 P6 的活，这里动多了容易碰坏别的地方。
   ========================================================================== */
@media (max-width: 640px){
  /* 手机上的区块节奏统一成 32px（原来是 40px） */
  .aps-pd-top{ padding-bottom: var(--sp-7); }
  .aps-pd-body{ padding-top: var(--sp-7); }
  .aps-pd-related{ padding-top: var(--sp-7); }
  .aps-postnav{ margin-bottom: var(--sp-7); }
  .aps-cta{ padding: var(--sp-7) 0 !important; }
}
/* 产品卡片网格的间距拉回刻度：18px → 16px（两列那档） */
@media (max-width: 992px){
  .aps-product-grid{ gap: var(--sp-4); }
}

/* ==========================================================================
   五十八、窄屏栅格改两列 / 列表改横排（2026-09-20，用户反馈）
   --------------------------------------------------------------------------
   用户反馈：首页「产品中心」、关于我们、新闻资讯都竖着排，太占屏幕高度；
   案例展示那样最好。实测确实：

     首页 产品中心   1 列，高 3046px（近 4 屏）
     首页 应用领域   1 列，高 2242px
     首页 新闻       1 列，高 1117px
     新闻列表        每条 335x320（图上文下），7 条共 2339px

   手机上「一列铺满」对图文卡片是浪费 —— 卡片本来就窄，图占 4:3 之后
   一屏放不下一张半。改成两列/横排，同样的内容高度能压掉一半以上。

   ⚠️ 两列时卡片只有约 159px 宽，内部留白和字号要跟着收，否则字会被挤断。
   ========================================================================== */

/* ---------- ① 首页产品网格：≤640 也保持两列（原来掉成 1 列） ---------- */
@media (max-width: 640px){
  .aps-product-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  /* 卡片窄了，内边距跟着收，否则标题可用宽度不够 */
  .aps-product-info{ padding: var(--sp-3) var(--sp-3) var(--sp-4); }
}

/* ---------- ② 首页应用领域：≤768 保持两列（原来掉成 1 列） ---------- */
@media (max-width: 768px){
  .aps-industry-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}

/* ---------- ③ 首页新闻：≤768 保持两列（原来掉成 1 列） ---------- */
@media (max-width: 768px){
  .aps-news-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

/* ---------- ④ 新闻列表：≤640 回到「图左文右」，不要图上文下 ---------- */
@media (max-width: 640px){
  .aps-news-row{
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .aps-news-row-img{
    flex: 0 0 116px;
    width: 116px;
    aspect-ratio: 4 / 3;      /* 原来这里写的是 16/9，配 116 宽会太扁 */
  }
  /* 摘要收掉：一条新闻在手机上留「图 + 标题 + 日期」就够了，
     带上两行摘要把每条撑到 300px 高，一屏看不了两条 */
  .aps-news-row-desc{ display: none; }
  .aps-news-row-title{ -webkit-line-clamp: 2; margin-bottom: var(--sp-2) !important; }
}

/* ---------- ⑤ 正文里的横向图组（关于我们等页面的连续配图） ----------
   模板 lists_single_about.htm 会把「连着两张以上的纯图片段落」包成 .aps-imgrow。
   手机上两列，桌面也两列 —— 这几张本来就是成对的配图。 */
.aps-imgrow{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
}
.aps-imgrow > p{
  margin: 0 !important;         /* 段落自带的上边距会把两列顶歪 */
  overflow: hidden;
  border-radius: var(--r-md);
}
.aps-imgrow img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
@media (max-width: 640px){
  .aps-imgrow{ gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); }
}

/* ---------- ⑥ 首页「企业简介 / 专业团队 / 厂房设备」三张图：窄屏改三列 ----------
   用户反馈「关于我们也是三张图片竖着排，很占屏幕高度」——
   指的就是首页这一块。根因是 @media(max-width:992px) 里写了
   `.quiiijide ul li{ flex: 0 0 100% }`，每张图独占一整行，
   三张加起来 1000px 高，手机上要滑三屏才过得去。

   这三张本来就是并列的入口图（各带一个名称角标），
   所以窄屏也保持一行三列 —— 高度从 1000px 降到约 145px。 */
@media (max-width: 992px){
  .quiiijide ul{ flex-wrap: nowrap; gap: var(--sp-3); }
  .quiiijide ul li{ flex: 1 1 0; min-width: 0; }   /* 盖住 992 那条 flex:0 0 100% */

  /* ⚠️⚠️ 选择器必须跟 style.css:4907 那条**一模一样**
     （.quiiijide ul li a .djisaqwd，中间那层 a 不能少）——
     它在 @media(max-width:1200) 里把图写死成 height:350px，
     少写一层 a 特异性就低一档，压不住，图会一直 350px 高：
     三列会被撑成一列，白改。
     这个坑踩过：网格明明改成三列了，高度纹丝不动，
     查了半天才发现是「固定高度」而不是「列数」在作怪。 */
  .quiiijide ul li a .djisaqwd{ height: auto; aspect-ratio: 4 / 3; }
  .quiiijide ul li .biaoirjie p{ font-size: var(--fs-sm) !important; }
}

/* ---------- ⑦ 首页「企业简介」那段文字：排版统一到站内正文 ----------
   用户反馈「简介字体颜色不对，太抢眼」。实测三处跟站内正文不一致：
     颜色    纯黑 rgb(0,0,0)     ← 站内是 rgb(57,67,78)，黑色明显更重更跳
     字体    内联「微软雅黑」      ← 站内统一走 var(--aps-font)
     行高    1.95                ← 站内正文是 1.7，松了一大截
   原因是这段是直接输出栏目正文（模板里的 .jianjiesde），
   没走 .qhd-content，所以第四十一节那套「强制字体 + 颜色继承」的规则盖不到它。
   首页另一处输出正文的地方本来就包在 .qhd-content 里，只有这处是裸的。 */
.jianjiesde{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--aps-text);
}
.jianjiesde *{ font-family: var(--aps-font) !important; }
.jianjiesde p,
.jianjiesde span,
.jianjiesde div,
.jianjiesde li{
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
/* 后台编辑器塞进来的内联 color / 字体，一并让位给站内设置 */
.jianjiesde [style*="color"]{
  color: inherit !important;
  background-color: transparent !important;
  font-family: inherit !important;
}

/* ==========================================================================
   五十九、响应式规范落地：垂直留白 / 栅格 / 标题尺度（2026-09-20）
   --------------------------------------------------------------------------
   用户反馈「留白还是不对、各屏幕下不一样、要有规范」。查下来问题是**两层留白叠加**：

     .module-full-screen          padding: var(--aps-sec)   ← 48/36，随断点缩，没问题
     └ .module-inner              padding: 30px 0           ← 从 1200 起就锁死 30px，不缩
        └ .quiiijide              margin-bottom: 50px       ← 从头到尾 50px，不缩

   于是手机上一屏之内：区块下 36 + 内层下 30 + 内层上 30 + 区块上 36 = **132px 纯留白**。
   内层那 30px 是老的「整幅区块」结构留下来的，aps.css 的区块自己已经给了
   上下留白，再叠一层就是重复计算 —— 所以直接把内层收成 0，
   垂直节奏由**区块自己用令牌统一管**，这样各屏幕下才是同一套尺度。

   ── 规范（改这块前先看这张表）────────────────────────────
              桌面≥993   ≤992    ≤640
   --aps-sec     48       48      32    区块上下留白
   --aps-sec-sm  36       36      24    窄条区块（数据条/咨询条/页脚）
   --aps-ttl     30       28      22    区块标题 → 内容
   区块内层     0        0       0     不再叠加
   ────────────────────────────────────────────────────────
   ========================================================================== */

/* 去掉重复的那一层，垂直节奏交给区块自己 */
.module-full-screen > .module-inner{ padding-top: 0 !important; padding-bottom: 0 !important; }
/* 三张入口图自己有下边距 50px，跟区块留白重复，收掉 */
.quiiijide{ margin-bottom: 0 !important; }

/* 手机档把区块留白再收一档：36 → 32（区块之间 72 → 64px） */
@media (max-width: 640px){
  :root{
    --aps-sec:    32px;
    --aps-sec-sm: 24px;
  }
}

/* ---------- 首页三张入口图：标签不再被截断 ----------
   卡片在手机上只有约 108px 宽，而 .biaoirjie 的左右内边距是 16px、
   字号 16px —— 「厂房设备」四个字要 64px，可用只有 76px，
   屏幕再窄一点（320~360）就显示成「厂房」了。
   内边距和字号一起按屏幕收，保证四个字放得下。 */
@media (max-width: 768px){
  .quiiijide ul li .biaoirjie{
    padding: var(--sp-3) var(--sp-2) var(--sp-2) !important;
  }
  .quiiijide ul li .biaoirjie p{
    font-size: var(--fs-xs) !important;
    line-height: 1.4 !important;
  }
}

/* ---------- ⑧ 导航显示断点：1000px ----------
   ⚠️⚠️ 这里的数字是**量出来的**，别再凭感觉往低调。

   实测（判断依据是「导航项的文字有没有折行」，不是看总宽度）：
     890px  → 7 项全部折行（UL 被压到 527px，实际需要 595px）
     912px  → 全部折行（UL 549px）
     950px  → 全部折行（UL 587px）
     1000px → 正常（UL = 595px 自然宽度）
   UL 能拿到的宽度 ≈ 视口 − 363px，所以需要 ≥595 ⇒ 视口 ≥ 958px。
   取 1000 留 42px 余量。

   ⚠️ 踩过的坑：我上一次用「UL 容器宽 vs 内容宽」来量，那个方法在文字
      折行时会失效（折行后两者都变小、看起来「装得下」），
      于是误判成 890 就能放，把 890~992 这一整段弄成了折行。
      **判断折行要量「导航项的文字有没有溢出行高」（scrollHeight > clientHeight）。**

   ⚠️ 低于 1000 一律交给抽屉导航（对触摸更友好），不要硬压这个断点 ——
      再窄只能靠砍导航项或缩 logo，那是改设计不是改适配。
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1100px){
  .top.header-v4 .aps-nav-tel-txt{ display: none; }
  .top.header-v4 .aps-nav-tel{ padding: var(--sp-2); }
}

/* 1000px 及以上显示完整导航 */
@media screen and (min-width: 1000px) and (max-width: 1200px){
  .top.header-v4.desktops-section.default-top{ display: block !important; }
  .touch-top.mobile-section{ display: none !important; }
  .top.header-v4 .main-nav .sf-menu > li > a,
  .top.header-v4 .main-nav .sf-menu > li > a:visited{
    padding: 0 var(--sp-3) !important;
    font-size: var(--fs-base) !important;
  }
  .top.header-v4 .aps-nav-tel{ padding-left: var(--sp-3); }
}

/* ---------- ⑨ 修我自己上一轮改出来的 10px 横向溢出 ----------
   style.css:5106 给整幅区块写了 `.module-full-screen{ margin:0 -10px; padding:0 10px }`
   —— 这是「反向出血」的老写法：.main 有 10px 内边距，区块用 -10px 负边距抵消它、
   撑满整宽。第五十五节把 .main 那 10px 收掉之后，负边距就没人抵消了，
   区块比视口宽出 10px，手机上页面能左右晃。

   ⚠️ 排查时还发现：我之前的溢出扫描是拿「滚动条以外的宽度」当基准的，
      所以这 10px 一直没被查出来。改成拿 clientWidth 比才对。

   窄屏把负边距归零 —— 整幅效果由区块自己撑满，不受影响。 */
@media (max-width: 992px){
  .module-full-screen{ margin-left: 0; margin-right: 0; }
}

/* ==========================================================================
   六十、首页 banner 高度自适应（2026-09-20）
   --------------------------------------------------------------------------
   style.css:4845 写死了 `#carousel-121006{ height: 500px !important }`，
   全宽度都是 500px —— 在 1440 的桌面是合适的，在 375 的手机上占掉
   **62% 的屏高**，一进站就只剩半屏能看内容，用户反馈「banner 没自适应高度」。

   给一套跟断点对齐的高度阶梯。同时手机档把标题/描述字号降下来，
   否则 260px 的 banner 装不下 203px 的文字块。

   ⚠️ 真要有 banner 素材是竖向的，改高度不如让运营出一张横向图 ——
      这里只是让「现在这张 3.8 : 1 的横图」在手机上不被撑成大色块。
   ========================================================================== */
/* ⚠️⚠️ 必须把**整条链**一起改，只改最外层没用 ——
   轮播 JS（carouFredSel）会给 #carousel-121006 写内联 height，
   而里层的 .carousel-item / .carousel-img 也会撑到同样高度。
   只改外层的话：外层被裁到 260，里层还是 500，
   .aps-hero-text 是 absolute inset:0 跟着里层居中，
   文字就落到 260 的可见窗口外面去了 —— 表现是「banner 一片空白、字全不见」。
   这个坑踩过。 */
#carousel-121006 .carousel-img img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;              /* 高度被压矮之后靠裁切填满，不拉伸变形 */
}
@media (max-width: 1200px){
  #carousel-121006,
  #carousel-121006 .carousel-item,
  #carousel-121006 .carousel-img{ height: 440px !important; }
}
@media (max-width: 992px){
  #carousel-121006,
  #carousel-121006 .carousel-item,
  #carousel-121006 .carousel-img{ height: 380px !important; }
}
@media (max-width: 768px){
  #carousel-121006,
  #carousel-121006 .carousel-item,
  #carousel-121006 .carousel-img{ height: 320px !important; }
}
@media (max-width: 640px){
  #carousel-121006,
  #carousel-121006 .carousel-item,
  #carousel-121006 .carousel-img{ height: 260px !important; }
  /* banner 矮了，文字也要跟着收，不然装不下 */
  .aps-hero-title{ font-size: var(--fs-2xl) !important; margin-bottom: var(--sp-3) !important; }
  .aps-hero-desc{ font-size: var(--fs-sm) !important; line-height: 1.6 !important; margin-bottom: var(--sp-4) !important; }
  .aps-hero-eyebrow{ font-size: var(--fs-xs) !important; letter-spacing: 2px !important; margin-bottom: var(--sp-2) !important; }
  .aps-hero-btn{ height: 44px !important; line-height: 44px !important; padding: 0 var(--sp-6) !important; font-size: var(--fs-sm) !important; }
  .aps-hero-inner{ max-width: 100%; }
}

/* --------------------------------------------------------------------------
   收尾：不依赖老轮播 JS，用 CSS 把首页 banner 的幻灯片横向摆好
   实测：桌面正常，窄屏下老 JS（carouFredSel）会把 3 张幻灯片**竖着堆叠**
   （track 的 transform 是 none），结果可见区里只露出第一张的上半截，
   高度一压矮，文字正好落到窗口外面 —— 表现就是「banner 一片空白」。
   这里直接用 flex 把布局接管过来，老 JS 负责自动轮播，CSS 负责摆放。
   -------------------------------------------------------------------------- */
.slideshow.carousel{ position: relative; }
#carousel-121006{
  display: flex !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  position: relative !important;
  box-sizing: border-box !important;
}
#carousel-121006 .carousel-item{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   补：banner 下面那条深蓝色带子
   上一版只改了 track（#carousel-121006）和 item/img 的高度，漏了两层：
     · .slideshow.carousel 自己还是 280px —— 比 track 高 20px，
       多出来的那 20px 露出页面深色底，看着就是「banner 底下多一条深蓝」。
     · 轮播 JS 生成的 .caroufredsel_wrapper 还是 500px（跟 JS 写的内联高度一致）。
   这两层一起对齐到跟 track 同高，那条带子就没了。
   -------------------------------------------------------------------------- */
#carousel-121006,
.slideshow.carousel,
.slideshow.carousel .caroufredsel_wrapper{ height: 500px !important; }

@media (max-width: 1200px){
  .slideshow.carousel,
  .slideshow.carousel .caroufredsel_wrapper{ height: 440px !important; }
}
@media (max-width: 992px){
  .slideshow.carousel,
  .slideshow.carousel .caroufredsel_wrapper{ height: 380px !important; }
}
@media (max-width: 768px){
  .slideshow.carousel,
  .slideshow.carousel .caroufredsel_wrapper{ height: 320px !important; }
}
@media (max-width: 640px){
  .slideshow.carousel,
  .slideshow.carousel .caroufredsel_wrapper{ height: 260px !important; }
}

/* ==========================================================================
   六十一、两处遗留问题（2026-09-20）
   --------------------------------------------------------------------------
   ① 产品/案例列表在 769~992 卡片只占 1/3 宽、每行放 2 张
      实测 768：容器 728，卡片 228（= calc(33.333% - 20px)），
      两张加间距才 476px —— **右边空掉 252px**，图片自然显得又小又偏。
      aps.css 里那条 ≤992 改 50% 的规则没生效（具体被谁压住的没查出来，
      大概率是某个老 media 块没闭合导致嵌套），所以这里直接在文件末尾定死。

   ② banner 下面没有留白
      栏目列表页和详情页的 banner / 面包屑条下面紧贴着内容，一点喘息空间都没有。
      .main 是 banner 块的紧邻兄弟，给它加上与断点对齐的上留白。
      （首页的整幅区块自己有 --aps-sec，这里只加一次，不会两层叠加。）
   ========================================================================== */

/* ① 列表卡片：>992 三列 / 641~992 两列 / ≤640 一列 */
@media (max-width: 992px){
  .content-wrapper .portfolio-list .col-3-1{
    width: calc(50% - 21px) !important;
  }
}
@media (max-width: 640px){
  .content-wrapper .portfolio-list .col-3-1{
    width: calc(100% - 20px) !important;
  }
}

/* ② banner 与内容之间的留白
   ⚠️⚠️ 2026-09-21 重修（用户报「820 / 1024 栏目选项上方的留白那么多」）
   --------------------------------------------------------------------------
   原来这段留白在 **992~1200 区间完全没随宽度变化**：
     · `.header + .main` 的 padding-top 只到 ≤768 才开始收（40 → 32 → 24）
     · 而 style.css 给 `.content` 的 `margin:45px 0 55px` 是**任何宽度都不变的**
   两条叠在一起，820 和 1024 下 banner 底到胶囊栏固定空 **95px**：
       40 (main padding) + 45 (content margin) + 10 (content padding) = 95
   在平板上这个数太大，而且和桌面（85px）几乎一样 —— 等于没做自适应。

   现在把断点提到 **1200**，跟「侧栏隐藏 / 胶囊栏出现」的断点对齐
   （那两件事都发生在 1200，留白也该在同一处收）；
   同时把 `.content` 那 45px 的固定上边距在 ≤1200 撤掉。

   修完：>1200 仍是 85px（桌面留点呼吸感，不动）；
         ≤1200 变成 24 + 0 + 10 = **34px**；≤640 变成 16 + 0 + 10 = **26px**。 */
.header + .main{
  padding-top: var(--sp-8);      /* >1200：40px */
}
@media screen and (max-width: 1200px){
  .header + .main{ padding-top: var(--sp-6); }   /* 24px */
  /* 撤掉固定 45px 的上边距 —— 它是不随宽度变的元凶。
     style.css 里带这条 margin 的容器一共三处（第四处是 .sidebar，≤1200 已经隐藏）：
        .content        —— 产品/案例/资讯/搜索等大部分页面
        .contactqsewe   —— 联系我们（它没走 .content，用的是自己的容器）
        .aps-full       —— 常见问题 / 关于我们那套整幅页
     少列一个，那一类页面就还是老样子（2026-09-21 就漏了 .contactqsewe，
     改完一测「联系我们」还是 69px）。 */
  .main .content,
  .main .contactqsewe,
  .main .aps-full{ margin-top: 0 !important; }
}
@media (max-width: 640px){
  .header + .main{ padding-top: var(--sp-4); }   /* 16px */
}

/* ⚠️ 补充：卡片还有个 margin-right: 3%（21.4px）在作怪 ——
   老 CSS（content.css / qhdcontent.css 的 .col-3-1 规则）塞进来的，
   它让每张卡的外宽变成「宽 + 10 + 21.4」，两列就是 733.8 > 容器 713，
   结果**永远是每行一张、右边空掉一半**。光改 width 治不了，
   必须把左右边距一起锁死。 */
.content-wrapper .portfolio-list .col-3-1{
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* ⚠️ 首页的 <section class="main"> 没有背景色（其它页面都写了
   style="background-color:#fff"），所以上面那条 `.header + .main{padding-top}`
   一加，就把页面的深色底露出来了 —— 表现是 banner 下面多一条深蓝色带。
   这里统一补上白色，首页那些自带背景的区块（深色区 / 灰底区）不受影响。 */
section.main{ background-color: #fff; }

/* ==========================================================================
   六十二、产品 / 案例列表：手机上改两列（2026-09-20）
   --------------------------------------------------------------------------
   用户反馈「栏目下排列一列竖排，屏占比太高」。
   实测 375 下卡片占满整宽、6 张就要滑 1900px；
   而卡片本身就是「4:3 图 + 固定高度标题区」的结构，两列完全放得下
   （157 宽 → 图 118 高 + 标题区 64.5 = 约 183px 一张，比一列省 60% 高度）。

   >992 三列 / 769~992 两列 / ≤640 两列。
   ⚠️ 跟首页产品网格（aps-product-grid）保持一致 —— 手机上一律两列。
   ========================================================================== */
@media (max-width: 640px){
  .content-wrapper .portfolio-list .col-3-1{
    width: calc(50% - 21px) !important;
  }
  /* 卡片窄了，标题左右留白跟着收，四五个字才放得下一行 */
  .content-wrapper .portfolio-list .portfolio-title{
    padding: 0 var(--sp-3);
    height: calc(var(--sp-3) * 2 + 2em * var(--lh-title));
  }
  .content-wrapper .portfolio-list .portfolio-title h2{
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   六十三、分页在小屏下破出屏幕（2026-09-20）
   --------------------------------------------------------------------------
   易优输出的分页是 8 个元素：首页 / 上一页 / 1 2 3 4 / 下一页 / 末页。
   每个 min-width:38px + 左右各 12px 内边距 ≈ 62px，8 个就是 496px ——
   而 375 的手机只有 335px 可用，于是往两边破出去。

   小屏处理：
     · 收掉「首页 / 末页」—— 手机上它们本来就是冗余的（有上一页/下一页）
     · 按钮从 38px 收到 32px，内边距 12 → 8，字号降一档
     · 允许换行 + 居中，万一页数特别多也不至于破版
   算下来 6 个 × 48 = 288px ≤ 335px，放得下。
   ⚠️ 靠 :first-child / :last-child 定位「首页 / 末页」——
      易优的分页模板顺序是固定的（第一个永远是首页、最后一个永远是末页），
      但如果哪天换了分页模板，这两条要跟着改。
   ========================================================================== */
@media (max-width: 640px){
  .pagebar,
  .pagination{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-1);
  }
  .pagination a,
  .pagination span,
  .pagebar a,
  .pagebar span{
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 var(--sp-2) !important;
    font-size: var(--fs-xs) !important;
  }
  /* 首页 / 末页 在手机上冗余，收掉 */
  .pagination > a:first-child,
  .pagination > a:last-child{
    display: none !important;
  }
}

/* ⚠️ 修正：首页不要那条 padding-top
   上一轮加的 `.header + .main{padding-top}` 是为了给**内页**补 banner 下留白，
   但首页也是同样的结构，于是它也吃到了这个 40px ——
   而首页第一个区块（整幅区块）自己还有 --aps-sec（48/36）的上下留白，
   两层叠起来就是「banner 下面一大块空」。

   首页的外层是 <div id="wrapper" class="home-page">，用它排除掉。
   内页（.insi-page）照旧保留这条留白。 */
.home-page .header + .main{ padding-top: 0; }

/* ==========================================================================
   六十四、页脚改版（2026-09-20）
   --------------------------------------------------------------------------
   用户反馈：① 左侧 LOGO 和公司名重复 ② 上方深蓝留白太多
             ③ 扫码咨询在手机端想更好显示

   ① 上方留白 144px —— 又是「两层叠加」：
        style.css:4416  .ddwwssss{ padding: 80px 0 60px }   ← 老模板，所有断点都不缩
        aps.css:2867    .aps-foot{ padding: 64px 0 40px }   ← aps 又给一层
      把老的那层收掉，垂直节奏统一由 .aps-foot 用令牌管。

   ② LOGO 和公司名重复：
      logo 图里已经写了「艾普斯 / AIROBOTSTART / 十年桁架地轨智造」，
      紧接着又跟了一行粗白 16px 的公司中文名 + 一行英文名，三块大字叠在一起。
      而且页脚底部的版权栏里本来就有完整的公司名。
      处理：留 logo + 公司中文名（法定名称，页脚该有），
            去掉重复的英文行（AIROBOTSTART 已经在 logo 里），
            中文名压成次要色、不再是粗白，视觉重量降下来。
   ========================================================================== */

/* ① 收掉老模板那层页脚留白 */
.ddwwssss{ padding-top: 0 !important; padding-bottom: 0 !important; }

/* ② 品牌列收敛 */
.aps-foot-cname{
  font-size: var(--fs-base);          /* 16 → 14 */
  font-weight: var(--fw-normal);      /* 去掉粗白，降成次要 */
  color: rgba(255, 255, 255, .62);
  margin-bottom: 0;
}
.aps-foot-cen{ display: none; }       /* 英文名跟 logo 里的 AIROBOTSTART 重复 */

/* ③ 扫码咨询在手机上单独成块，二维码大一点、好扫 */
@media (max-width: 640px){
  .aps-foot-qr{
    display: block;
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, .10);
  }
  .aps-foot-qr .aps-foot-h{ margin-bottom: var(--sp-4); }
  .aps-foot-qr-box{ width: 132px; height: 132px; }
}

/* ==========================================================================
   六十五、页脚第二轮（2026-09-20）
   --------------------------------------------------------------------------
   ① 手机端左右没留白
      .ddwwssss 在老 CSS 里 ≥1200 是 width:1200px 居中（靠外边距留白），
      ≤1200 变成 width:100% —— 于是页脚内容直接贴着屏幕两边。
      统一成 max-width:1200px + 左右各 20px 内边距，任何宽度下都有边距。

   ② 两个二维码：业务咨询 + 抖音关注
      模板里已经改成 .aps-foot-qr-list > .aps-foot-qr-item ×2，
      这里给它们排成一行、下面各带一行小字。

   ③ 页脚「网站导航」一列下来太高
      手机上是 6 项竖排。改两列 —— 高度减半，也更像个导航区。
   ========================================================================== */

/* ① 页脚容器：任何宽度都有左右留白 */
.ddwwssss{
  width: 100% !important;
  max-width: 1200px !important;
  padding-left: var(--sp-5) !important;
  padding-right: var(--sp-5) !important;
  box-sizing: border-box !important;
}

/* ② 两张码并排 */
.aps-foot-qr-list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}
.aps-foot-qr-item{ text-align: center; }
.aps-foot-qr-t{
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);
  margin: var(--sp-2) 0 0;
  line-height: 1.4;
}

/* ③ 手机上的页脚 */
@media (max-width: 640px){
  /* 网站导航两列 */
  .aps-foot-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-5);
  }
  /* 两张码并排，尺寸略收，加间距正好放得下 */
  .aps-foot-qr-list{ gap: var(--sp-4); }
  .aps-foot-qr-item{ flex: 1 1 0; min-width: 0; }
  .aps-foot-qr-box{
    width: 100% !important;
    max-width: 132px;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
}

/* ==========================================================================
   六十六、PC 端把两张码挪到 LOGO 下方（2026-09-20）
   --------------------------------------------------------------------------
   用户反馈：品牌列去掉公司名之后只剩一个 LOGO，下面空了一大块，
             而右侧单独留一列放二维码，两边都不平衡。

   改法：页脚栅格从 4 列改 3 列，让二维码**自动落到第二行第一列** ——
        也就是 LOGO 正下方。DOM 顺序本来就是 品牌 → 导航 → 联系 → 扫码，
         三列栅格下自动排布正好是：
           第一行：LOGO | 网站导航 | 联系我们
           第二行：扫码咨询（占第一列，在 LOGO 下面）
        不用改模板。

   手机上本来就是单列堆叠，不受影响。
   ========================================================================== */
@media (min-width: 993px){
  .aps-foot{
    grid-template-columns: 1.7fr 1fr 1.5fr;
    align-items: start;
  }
  /* 明确放到第一列，否则会被自动排到第三列 */
  .aps-foot-qr{ grid-column: 1 / 2; }
}

/* 二维码挪到 LOGO 下方之后，左列比右列高出一大截，
   右边（联系我们下面）就空出一块。让「扫码咨询」标题跟两张码**横排**，
   整块矮下来，左右两列高度就差不多了。
   （左列 431px 宽：标题 56 + 两张码 116×2 + 间距 ≈ 350，放得下。） */
@media (min-width: 993px){
  .aps-foot-qr{
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }
  .aps-foot-qr .aps-foot-h{ margin: 0; flex: 0 0 auto; }
  .aps-foot-qr .aps-foot-qr-list{ flex: 1 1 auto; }
}

/* ⚠️ 修正上一版：二维码当「独立的一列」交给栅格自动排布时，
   它会被排到**第二行** —— 也就是要等第一行（导航 / 联系那两列）里
   最高的那列结束才落下来，结果跑到页脚很下面去了。
   用户要的是「紧跟在 LOGO 下面一点点的位置」。
   现在模板里已经把它挪进品牌列**内部**，这里补上间距即可。
   下面那条 grid-column 保留着没坏处（它已经不是栅格子项了）。 */
.aps-foot-brand{
  display: block;                  /* 品牌列改成正常流式，LOGO 和二维码上下排 */
}
.aps-foot-qr{
  margin-top: var(--sp-6);         /* 距 LOGO 24px —— 「下面一点点」 */
  grid-column: auto;
}

/* 标题统一「在上」—— 跟「网站导航 / 联系我们」两列保持一致。
   之前为了让左列矮一点把它做成了横排，现在二维码已经在品牌列里、
   整体高度不是问题了，改回竖排。 */
@media (min-width: 993px){
  .aps-foot-qr{
    display: block;
    margin-top: var(--sp-6);
  }
  .aps-foot-qr .aps-foot-h{ margin-bottom: var(--sp-4); }
  .aps-foot-qr .aps-foot-qr-list{ flex: none; }
}

/* ==========================================================================
   六十一、电话：分设备处理 + 右上角红字 + 图标动效（2026-09-21）
   --------------------------------------------------------------------------
   用户反馈原话：「电话能按的时候要在手机端能按」「电脑端这个设计能按不合理，
   电脑又打不了电话」「右上角的电话红字醒目，电话图标能动图更好」。

   拆成三件事：
     1. 手机端顶栏**原来根本没有电话** —— 见 header.htm 里新加的 .touch-tel
     2. 电脑端不要做成能点的 —— href 由 header.htm 的脚本摘掉，
        这里只负责把「可点」的视觉反馈也一起收掉（配套类 .aps-tel-nolink）
     3. 右上角号码改红 + 图标加铃响动效
   ========================================================================== */

/* ---------- 1. 右上角电话：号码回到红色 ----------
   aps.css:4749 当初把它从红改成了藏青（那会儿整块红压在最右边，用户嫌丑）。
   现在用户明确要「红字醒目」，改回红；底色保持白色细边胶囊，
   只有号码是红的，不会又变成一整块红。 */
.aps-nav-tel-txt strong{ color: var(--aps-red); }
.aps-nav-tel:hover .aps-nav-tel-txt strong{ color: var(--aps-red); }

/* em 那行「魏经理」是后台 web_attrname_23 传的，原来是 12px 浅灰，太小看不清 */
.aps-nav-tel-txt em{ font-weight: var(--fw-medium); }

/* ---------- 2. 图标：红底红图标 + 常驻铃响动效 ----------
   原来是静态线条图标 + 灰底，改前 → 改后：
     灰底藏青静态  →  浅红底红图标，听筒一直在小幅摆，外面一圈红晕在扩 */
.aps-nav-tel-icon{
  background: rgba(209,25,39,.10);
  color: var(--aps-red);
}
.aps-nav-tel-icon svg{
  display: block;
  transform-origin: 50% 50%;
  animation: aps-tel-ring 2.4s ease-in-out infinite;
}

/* 铃响：大部分时间不动，末尾集中摆几下 —— 常驻摆动会烦人，
   间歇性的才既显眼又不吵。 */
@keyframes aps-tel-ring{
  0%, 58%, 100%{ transform: rotate(0deg); }
  64%{ transform: rotate(-14deg); }
  70%{ transform: rotate(12deg); }
  76%{ transform: rotate(-10deg); }
  82%{ transform: rotate(8deg); }
  88%{ transform: rotate(-5deg); }
  94%{ transform: rotate(3deg); }
}

/* 图标外圈的红晕，跟着铃响一起扩，手机端和 PC 端共用 */
.aps-nav-tel-icon{
  animation: aps-tel-halo 2.4s ease-out infinite;
}
@keyframes aps-tel-halo{
  0%, 55%{ box-shadow: 0 0 0 0 rgba(209,25,39,.40); }
  85%{ box-shadow: 0 0 0 9px rgba(209,25,39,0); }
  100%{ box-shadow: 0 0 0 0 rgba(209,25,39,0); }
}

/* 悬停时图标转红底白图标，动效照旧 */
.aps-nav-tel:hover .aps-nav-tel-icon{
  background: var(--aps-red);
  color: #fff;
}

/* ⚠️ 尊重系统的「减少动态效果」。前庭功能敏感的用户会被常驻动画影响，
   这里必须给出口 —— 关掉动画但保留红色，信息一点不少。 */
@media (prefers-reduced-motion: reduce){
  .aps-nav-tel-icon,
  .aps-nav-tel-icon svg,
  .touch-tel .touch-icon-tel svg{
    animation: none !important;
  }
}

/* ---------- 3. 电脑端：既然不能拨号，把「可点」的反馈也收掉 ----------
   href 已经由脚本摘掉了（a 没有 href 时浏览器本来就不给 pointer 光标），
   这里补的是自绘的那部分：原来是「边框变红 + 浮起阴影」的按钮反馈。 */
.top.header-v4 .aps-nav-tel.aps-tel-nolink{
  cursor: default;
}
.top.header-v4 .aps-nav-tel.aps-tel-nolink:hover{
  background: #fff;
  border-color: var(--aps-line);
  box-shadow: none;
}

/* ==========================================================================
   手机端顶栏的拨号按钮（.touch-tel）
   --------------------------------------------------------------------------
   只活在 .touch-top 里，而 .touch-top 在 993px 以上是隐藏的 ——
   所以电脑上天然看不到它，不用额外写媒体查询去藏。
   ========================================================================== */

/* 两个图标（电话 / 导航）统一居中。
   老 CSS 给 .touch-toggle li i 写的是 margin-top:20px 往下堆，
   而现在汉堡被 aps.css:4810 改成了 24x16 的小图标，
   再按 20px 顶下去就和电话图标不在一条水平线上了 —— 改成 flex 居中一劳永逸。 */
.touch-toggle li a{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.touch-toggle li i{
  margin-top: 0 !important;
}
.touch-toggle li span{ display: none; }

/* 电话图标：红底红图标，和 PC 顶栏那块保持同一套语言 */
.touch-toggle li i.touch-icon-tel{
  background-image: none !important;   /* 老 CSS 会给 i 挂背景图，这里用内联 svg，先摘掉 */
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-full);
  background: rgba(209,25,39,.10) !important;
  color: var(--aps-red);
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: aps-tel-halo 2.4s ease-out infinite;
}
.touch-toggle li i.touch-icon-tel svg{
  width: 19px;
  height: 19px;
  display: block;
  animation: aps-tel-ring 2.4s ease-in-out infinite;
}
/* 按下去的时候给个明确反馈 —— 触摸屏上 hover 是假的，靠 :active */
.touch-toggle li a.touch-tel:active i.touch-icon-tel{
  background: var(--aps-red) !important;
  color: #fff;
}

/* ==========================================================================
   六十二、视觉隐藏工具类（2026-09-21）
   --------------------------------------------------------------------------
   给「搜索引擎要看、但设计里没有位置放」的元素用。目前只有一个用途：
   列表页和首页补 H1。

   为什么需要它：
     全站 23 个页面（首页 + 全部列表页）原来一个 H1 都没有 ——
     详情页模板里都有 <h1>，就列表页和首页漏了。
     H1 是搜索引擎判断「这页讲什么」的首要信号，缺了整页主题就弱一档。

   ⚠️ 用 clip 方案，**不要改成 display:none 或 visibility:hidden** ——
      那两个会让搜索引擎判定内容「不可见」，H1 等于没写。
      `position:absolute` + 1px + clip 是 W3C 和各家无障碍指南给的标准做法：
      元素仍在渲染树里、仍在无障碍树上（读屏会念），只是视觉上不占位。
   ========================================================================== */
.aps-sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 六十二之二 留空 —— 2026-09-21 曾在这里给 `.page-title .page-name h1` 写了一条
   字号压制规则，配合「把那个 h2 改成 h1」的方案。后来发现外层 .page-title-inner
   是 display:none（aps.css:2222），h1 塞进去搜索引擎当没有，方案作废、模板已改回 h2，
   这条规则就没有作用对象了，删掉。
   现在列表页的 H1 统一走 .aps-sr-only，补在各自模板的面包屑后面。 */

/* ==========================================================================
   六十三、手机端顶栏：搜索按钮 + 搜索面板（2026-09-21）
   --------------------------------------------------------------------------
   原来手机顶栏只有「汉堡」一个按钮，站内搜索在手机上完全没有入口 ——
   PC 那个放大镜在 992px 以下整条被藏了。
   现在顶栏是「搜索 / 电话 / 导航」三个按钮。

   ⚠️ 三个按钮挤在 375px 上要注意：style.css 给 .touch-toggle li 写的是
      padding: 0 12px（每个按钮左右各 12px），三个加起来约 156px，
      跟左边 LOGO 抢位置。这里收到 8px。改窄屏前先量一下别挤爆。
   ========================================================================== */

.touch-toggle li{ padding: 0 var(--sp-2) !important; }

/* 搜索按钮图标：和电话按钮同一套尺寸，但用中性色 ——
   红色留给电话（用户要的是电话醒目），两个红点并排反而都不显眼。 */
.touch-toggle li i.touch-icon-search{
  background-image: none !important;   /* 老 CSS 会给 i 挂 PNG 背景图，这里用内联 svg */
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-full);
  background: var(--aps-soft) !important;
  color: var(--aps-navy);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.touch-toggle li i.touch-icon-search svg{ width: 17px; height: 17px; display: block; }

/* 触摸屏上 hover 是假的，靠 :active 给反馈；展开时按钮常亮 */
.touch-toggle li a.touch-search-btn:active i.touch-icon-search,
.touch-top.aps-ms-open .touch-icon-search{
  background: var(--aps-red) !important;
  color: #fff !important;
}

/* ---------- 搜索面板 ---------- */
.touch-search-panel{
  display: none;
  background: #fff;
  border-top: 1px solid var(--aps-line);
  box-shadow: 0 8px 20px rgba(10,37,64,.07);
  padding: var(--sp-3) var(--sp-4);
}
.touch-top.aps-ms-open .touch-search-panel{ display: block; }

.touch-search-panel form{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--aps-soft);
  border: 1px solid var(--aps-line);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
}
.touch-search-panel input{
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: var(--fs-md);
  color: var(--aps-ink);
  outline: none;
}
.touch-search-panel input::placeholder{ color: var(--aps-muted); }
.touch-search-panel button{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--aps-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ==========================================================================
   六十四、手机端顶栏：吸顶 + 重排（2026-09-21）
   --------------------------------------------------------------------------
   用户原话：「就是顶部导航悬浮呀」「最左放菜单，右边就放电话和搜索」「手机端乱乱的」。

   ⚠️ 关键点：PC 那条顶栏（.top.header-v4）一直是 position:sticky，
      但它在 992px 以下被 style.css 整个 display:none ——
      手机上真正显示的是老顶栏 .touch-top，而**那条从来没有 sticky**。
      所以电脑上吸顶是好的，手机上滚滚就没了。这里补的就是它。
   ========================================================================== */

/* PC 那条顶栏吸顶的层高（见第一节 :1500），这里保持一致 */
.touch-top.mobile-section{
  position: sticky !important;
  top: 0;
  z-index: 1500;
  background: #fff;
}

/* ---------- 重排：左边「菜单 + LOGO」，右边「搜索 + 电话」----------
   style.css 给的是 .touch-logo{float:left} + .touch-toggle{position:absolute;right:10px}，
   那是「LOGO 在左、按钮全堆在右」的老布局。改成 flex，
   菜单按钮在最左（手指从左往右扫最容易够到）。 */
.touch-top-wrapper{
  display: flex !important;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) !important;
  position: relative;
}

/* 菜单按钮（汉堡）：最左 */
.touch-top-wrapper > a.touch-menu-btn{
  flex: 0 0 auto;
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--aps-ink);
  text-decoration: none;
  transition: background var(--t-fast);
}
.touch-top-wrapper > a.touch-menu-btn:active{
  background: var(--aps-soft);
}

/* LOGO：跟着菜单后面，占掉中间的空档 */
.touch-top-wrapper .touch-logo{
  order: 2;
  flex: 1 1 auto;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
}
.touch-top-wrapper .touch-logo img{
  height: 40px !important;
  width: auto;
  display: block;
}

/* 右侧 搜索 + 电话 */
.touch-top-wrapper .touch-navigation{
  order: 3;
  flex: 0 0 auto;
  display: block !important;
}
.touch-top-wrapper .touch-toggle{
  position: static !important;   /* 老 CSS 是 absolute;right:10px，跟 flex 打架 */
  right: auto !important;
  top: auto !important;
}
.touch-top-wrapper .touch-toggle ul{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.touch-top-wrapper .touch-toggle li{
  float: none !important;
  height: auto !important;
  padding: 0 !important;
}

/* ---------- 搜索展开时的暗蒙版（手机端）----------
   用户要求「点击搜索下拉一样全文加个暗蒙版」—— 桌面端本来就有（.top.header-v4::after），
   手机端原来没有。用同样的做法：给 .touch-top 挂一个 fixed 伪元素。
   ⚠️ z-index 必须低于搜索面板 —— 面板是 .touch-top 的子元素、在它上面渲染，
      所以伪元素的 z-index 取 -1 之外的小值即可；这里用 1、面板用 2，
      而且面板得自己 position:relative + z-index:2 才压得住。 */
.touch-top.mobile-section::after{
  content: "";
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 1;
  background: rgba(10, 37, 64, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.touch-top.aps-ms-open::after{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;      /* 展开时接住点击 —— 点了就收起 */
  cursor: pointer;
}
/* 顶栏本身和搜索面板要浮在蒙版之上 */
.touch-top-wrapper{ z-index: 3; background: #fff; }
.touch-search-panel{ position: relative; z-index: 3; }

/* ---------- 搜索面板：去掉红色，改干净的中性色 ----------
   用户反馈「搜索框可以不要红色投影」「手机端乱乱的」。
   原来按钮是整块红底、聚焦时还有一圈红晕，在窄屏上就一小条，看着糊。 */
.touch-search-panel button{
  background: var(--aps-navy);
}
.touch-search-panel button:active{ background: var(--aps-red); }
.touch-search-panel form{
  border-radius: var(--r-md);   /* 窄屏上全圆角太软，跟顶栏不搭 */
}
.touch-search-panel form:focus-within{
  border-color: var(--aps-navy);
  box-shadow: none;             /* 去掉聚焦红晕 */
}

/* 桌面端搜索框聚焦时的红晕也去掉（用户说不要红色投影）——
   保留边框变色做聚焦提示就够了，不用再叠一圈光。 */
.aps-nav-search-panel form:focus-within{
  border-color: var(--aps-navy);
  box-shadow: none;
}

/* 抽屉面板也要浮在搜索蒙版之上（上面那条 .touch-top::after 是 z-index:1）。
   两个面板有可能同时被打开（先点搜索、再点菜单），不给层级的话
   抽屉会被蒙版压暗、点不动。 */
.touch-top.mobile-section .touch-toggle-content{
  position: relative;
  z-index: 3;
  background: #fff;
}

/* ⚠️ 汉堡图标必须单独再写一条（2026-09-21）
   画三条线的那条规则（aps.css:4810 附近）选择器是 `.touch-toggle li i.touch-icon-menu`，
   而菜单按钮已经挪到 .touch-top-wrapper 上、不再是 .touch-toggle 的子元素 ——
   选择器匹配不到，结果按钮是空的、什么都看不见（改布局时踩的）。
   这里按同样的画法补一条给新位置。 */
.touch-top-wrapper > a.touch-menu-btn i.touch-icon-menu{
  background:
    linear-gradient(currentColor, currentColor) 0 0    / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50%  / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat !important;
  background-color: transparent !important;
  width: 22px !important;
  height: 15px !important;
  border-radius: 1px;
  color: var(--aps-ink);
  display: block !important;
  margin: 0 !important;
}

/* ==========================================================================
   六十五、搜索框：去掉输入时的红色外圈（2026-09-21）
   --------------------------------------------------------------------------
   用户反馈：「就是我输入的时候会出现红色的外圈，去掉」。

   ⚠️ 真正的来源是 aps.css:2246 那条**全局**规则（还带 !important）：
        input[type="text"]:focus { border-color: 红 !important;
                                   box-shadow: 0 0 0 3px rgba(209,25,39,.10) !important; }
      上一轮改的是 `.aps-nav-search-panel form:focus-within` —— 改错对象了：
      发光的是 **input 自己**，不是在它外面的 form，而且人家带 !important。
      ⚠️ 所以这里也必须是 !important，否则优先级压不过那条全局规则。

   只针对搜索框去掉。站内其它输入框（留言表单等）保留红色聚焦光圈 ——
   那些是转化入口，有点品牌色反而好；用户这次说的就是搜索框。
   要连表单一起改，把下面这个选择器里的 .gbook-content 之类也加进来即可。
   ========================================================================== */
.aps-nav-search-panel input:focus,
.touch-search-panel input:focus{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 聚焦的提示改由「外面的框」来给：边框从浅灰变深藏青，安静但看得见 */
.aps-nav-search-panel form:focus-within,
.touch-search-panel form:focus-within{
  border-color: var(--aps-navy) !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* ==========================================================================
   六十六、手机搜索面板：改成浮层 + 去掉分界线（2026-09-21）
   --------------------------------------------------------------------------
   用户反馈两件事：
     ① 「搜索栏展开和导航的分界线不要那么明显」
     ② 「在最顶部的时候点开，整个页面往下移」

   ② 的原因：手机端这个面板当初写的是普通文档流（display:block），
      一展开就把下面的内容**顶下去**了 —— 它又在吸顶栏里，所以整页跟着跳。
      桌面端那个面板没这毛病，因为它是 position:absolute，浮在内容上面、不占位。
      这里改成和桌面端一致：绝对定位，从顶栏下沿往下浮出来。

   ① 的原因：有两条 1px 线叠在一起 ——
      顶栏自己的 border-bottom（style.css:4807）+ 面板的 border-top。
      桌面端早就处理过这个（面板的 border-top 去掉了、展开时把顶栏那条线设成透明），
      手机端没跟上。这里补上，做法保持一致。
   ========================================================================== */
.touch-search-panel{
  position: absolute !important;
  left: 0;
  right: 0;
  top: 100%;                     /* 贴在自己所属顶栏的下沿 */
  z-index: 3;                    /* 高于 ::after 那层蒙版(1) */
  border-top: none !important;   /* ① 去掉面板自己那条 */
  box-shadow: 0 14px 28px -10px rgba(10, 37, 64, .14);
}

/* ① 展开时把顶栏自己那条底线也设成透明。
   ⚠️ 用 border-bottom-color 而不是 border-bottom:none ——
      后者会把那 1px 的高度也去掉，展开瞬间内容会再抖一下。 */
.touch-top.aps-ms-open .touch-top-wrapper{
  border-bottom-color: transparent !important;
}

/* 面板是浮层了，收起时只是 display:none，不再影响布局高度，
   所以「点开时页面往下跳」的问题从根上没了。 */
.touch-top.mobile-section{
  /* 顶栏本身高度固定，子面板绝对定位后不会把它撑高 */
  align-items: stretch;
}

/* 六十七、菜单展开时也压暗整页（2026-09-21）
   --------------------------------------------------------------------------
   用户反馈：「菜单展开了，下面正文还是亮堂堂的」「点其他地方要能收起，
   而且除了导航以外点不到别处」。

   上一轮只给搜索加了蒙版（aps-ms-open），菜单漏了 —— 两个面板是同一套交互，
   视觉上也该一致，补上 aps-drawer-open。

   复用同一个伪元素，只是多一个触发类：
     .aps-ms-open      点放大镜展开搜索时
     .aps-drawer-open  点菜单展开抽屉时
   两者互斥（开一个会自动关另一个），所以不会同时命中。 */
.touch-top.aps-drawer-open::after{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}

/* ==========================================================================
   六十八、手机端：蒙版改真实元素 + 抽屉浮层 + 箭头对位（2026-09-21）
   --------------------------------------------------------------------------
   用户反馈三条：
     ① 在最顶端点开菜单，整个页面下移
     ② 展开图标展开后不对位；有子栏目的一级项点不进去
     ③ 搜索下拉时页面没变暗

   ① 抽屉原来是普通文档流，一展开就把内容顶下去（和搜索面板之前是同一个毛病）。
      改成绝对定位浮层，不再影响页面高度。

   ② 箭头原来用 top:50% + margin-top 定位，展开态还单独写了个 margin-top:-2px，
      两个状态错开 3px，所以「展开后不对位」。现在把它放进一个 flex 居中的热区里，
      两种状态共用同一个中心，天然对齐。热区同时解决「点不进去」——
      箭头自己成为独立点击区，左边文字恢复成正常链接。

   ③ 蒙版换成 .aps-mobile-mask 这个真实元素（见 header.htm 里的说明），
      原来 .touch-top::after 那套请停用 —— 留着会和新的叠成两层黑。
   ========================================================================== */

/* ③ 停用旧的伪元素蒙版（保留注释说明来历，别再往回改） */
.touch-top.mobile-section::after{
  display: none !important;
}

/* ③ 新的真实蒙版 */
.aps-mobile-mask{
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1399;                    /* 低于顶栏(1500)，高于页面内容 */
  background: rgba(10, 37, 64, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.aps-mobile-mask.aps-on{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}
/* 只在手机端有；电脑端跑的是另一套（.top.header-v4::after），别互相干扰 */
@media (min-width: 993px){
  .aps-mobile-mask{ display: none !important; }
}

/* ① 抽屉改浮层：浮在内容之上，不再把页面顶下去 */
.touch-top.mobile-section .touch-toggle-content{
  position: absolute !important;
  left: 0;
  right: 0;
  top: 100%;                        /* 贴顶栏下沿 */
  z-index: 3;
  background: #fff;
  max-height: calc(100vh - 68px);   /* 菜单再长也在屏内，超了自己滚 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ② 箭头的独立点击热区 */
.touch-menu ul li .touch-subtoggle{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56px;                      /* 手指按得着的宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.touch-menu ul li .touch-subtoggle:active{
  background: var(--aps-soft);
  border-radius: var(--r-md);
}
/* 箭头本体：放进热区后改成静态、由 flex 居中。
   ⚠️ 必须把老规则里的 position:absolute / top:50% / margin-top 全部清掉 ——
      那个 margin-top:-2px 的「展开态修正」正是错位的来源。 */
.touch-menu ul li .touch-subtoggle i.touch-arrow-down,
.touch-menu ul li .touch-subtoggle i.touch-arrow-up{
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   六十八之二、子菜单箭头换成 SVG + 热区加大（2026-09-21）
   --------------------------------------------------------------------------
   用户反馈：「展开按钮跟左侧文字没上下居中对齐」「控件位置太小，不好按」。

   · 对齐：见 header.htm 里的说明 —— 老箭头是 CSS 画的「┐」旋转 45°，
     转 180° 时视觉重心会偏 2px，两个状态差 4px。换成对称的 SVG V 形后，
     转 180° 与自身重合，重心不动，天然居中。
   · 热区：56 → 64px 宽，整条 li 的高度，右侧整个空白区域都能按。
   -------------------------------------------------------------------------- */
.touch-menu ul li .touch-subtoggle{
  width: 64px !important;
}

/* 箭头本体：由 flex 居中，尺寸放大到看得清、点得着 */
.touch-menu ul li .touch-subtoggle svg.touch-chevron{
  display: block;
  width: 18px;
  height: 18px;
  color: var(--aps-muted);
  transition: transform var(--t-fast);
  transform-origin: 50% 50%;
}
.touch-menu ul li .touch-subtoggle.aps-open svg.touch-chevron{
  transform: rotate(180deg);
}
/* 展开时箭头也跟着变红，和当前项的高亮呼应 */
.touch-menu ul li.current > .touch-subtoggle svg.touch-chevron{
  color: var(--aps-red);
}

/* ==========================================================================
   六十九、搜索框：胶囊 + 平时安静、输入时才亮（2026-09-21）
   --------------------------------------------------------------------------
   用户原话：「搜索框圆角换成胶囊」「不点搜索的时候那个深蓝色太眨眼了」
             「只有输入的时候才变色」「边框也是输入的时候是红边框」。
   ========================================================================== */
.aps-nav-search-panel form,
.touch-search-panel form{
  border-radius: var(--r-full) !important;    /* 胶囊 */
  background: var(--aps-soft) !important;
  border-color: var(--aps-line) !important;   /* 平时浅灰，不抢眼 */
  box-shadow: none !important;
}

/* 输入时（form:focus-within 在聚焦到里面任何元素时都会命中）：
   底色转白、边框变红。⚠️ 只改边框色，不加光晕 ——
   用户之前明确说过不要那圈红色外发光。 */
.aps-nav-search-panel form:focus-within,
.touch-search-panel form:focus-within{
  background: #fff !important;
  border-color: var(--aps-red) !important;
  box-shadow: none !important;
}

/* 搜索按钮：平时是「灰底 + 灰图标」，低调；
   只在输入时才变红底白图标，作为聚焦提示。
   （桌面端原来是整块红底长条，后来我改成深藏青 —— 也扎眼，一并按这套来。） */
.aps-nav-search-panel button,
.touch-search-panel button{
  background: transparent !important;
  color: var(--aps-muted) !important;
  border-radius: var(--r-full) !important;
  transition: background var(--t-fast), color var(--t-fast);
}
.aps-nav-search-panel form:focus-within button,
.touch-search-panel form:focus-within button{
  background: var(--aps-red) !important;
  color: #fff !important;
}

/* 桌面端那个按钮本来是「贴满右侧的 62px 长条」，胶囊里放长条很怪 ——
   改成右端一个圆形按钮，四周留出胶囊的边距。 */
.aps-nav-search-panel button{
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-right: 5px !important;
}
.aps-nav-search-panel form{
  padding-right: 5px !important;
}
.aps-nav-search-panel input{
  padding: 0 var(--sp-4) 0 var(--sp-5) !important;
}

/* --------------------------------------------------------------------------
   六十九之二、两处修正（2026-09-21）
   -------------------------------------------------------------------------- */

/* ① 子菜单热区高度。
   实测：设置的是 top:0 + bottom:0（本该撑满 li 的 47px），实际却只有 13px ——
   被别的 height 规则压住了。显式写成 auto + min-height:100% 拿回来。
   ⚠️ 这个高度直接决定箭头位置：盒子只有 13px 高时，flex 居中的箭头
      落在 li 顶部附近，比左边文字高 17px —— 就是用户说的「没上下居中对齐」。
      热区太窄不好按，也是同一个原因。 */
.touch-menu ul li .touch-subtoggle{
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 100% !important;
}

/* ② 聚焦时按钮变红。
   上面那条 `.touch-search-panel form:focus-within button` 没生效（实测仍是透明），
   这里加上 button[type="submit"] 提高特异性，确保压过默认的 transparent。 */
.touch-search-panel form:focus-within button[type="submit"],
.aps-nav-search-panel form:focus-within button[type="submit"]{
  background: var(--aps-red) !important;
  color: #fff !important;
}

/* 聚焦时按钮变红：写死颜色（2026-09-21）
   前面用 var(--aps-red) 写了两遍都没生效 —— 选择器匹配、规则在、顺序也对，
   但计算值始终是 transparent（用 CSSOM 逐条查过，没找到原因）。
   同一份文件里 form 的 border-color 用 var(--aps-red) 是好的，
   所以不是变量没定义，像是这个位置解析出的问题。
   直接写十六进制绕开，不再纠结。 */
.touch-search-panel form:focus-within button,
.aps-nav-search-panel form:focus-within button{
  background-color: #D11927 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   六十九之三、箭头热区的参照物改成「那一行」而不是「整个 li」（2026-09-21）
   --------------------------------------------------------------------------
   问题：箭头原来挂在 li 上，热区 top:0 + bottom:0 撑满整个 li。
         收起时 li 只有 <a> 高 → 看着对；展开后 li 里多了子菜单 →
         热区跟着变高，箭头被居中到子菜单中间去了。

   现在箭头挪进了 <a> 里面（见 header.htm），只要把 <a> 设成定位参照物，
   热区的高度就永远是这一行的高度，跟子菜单展开与否无关。
   -------------------------------------------------------------------------- */
.touch-menu ul li > a{
  position: relative !important;   /* 让里面的 .touch-subtoggle 以它为准 */
}

/* 给右边的箭头腾出位置，免得长栏目名顶到箭头上。
   一级项统一留 72px（比 64px 的热区再宽一点）。
   ⚠️ 没有子栏目的项（比如「联系我们」）也会留这个边距，无所谓 ——
      它是左对齐的，右边空着不影响。 */
.touch-menu > ul > li > a{
  padding-right: 72px !important;
}

/* 热区高度跟着 <a> 走 */
.touch-menu ul li > a > .touch-subtoggle{
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;        /* 撤掉上一版给 li 撑高用的 min-height:100% */
}

/* ==========================================================================
   七十、横向滑动一栏：一排等高 + 窄屏露出下一张（2026-09-21）
   --------------------------------------------------------------------------
   用户要求（参考别人的自适应做法）：
     · 服务流程：改成一排等高卡片，每几秒自动换一批（1→2→3→4→5→6）
     · 新闻资讯：一排，小屏装不下就手滑，第 3 条露一点点
     · 首页关于我们那三张图：小屏只装得下两张时，第三张能滑出来

   三处共用一个组件 .aps-hscroll：
     · 桌面：一排放 3 个，等高
     · 窄屏：放 2 个 + 露出第三个的一角，手指可以直接滑（原生滚动，不用 JS 拖拽）
     · 自动轮播由 JS 负责（见 footer.htm 末尾那一段），这里只管样式

   ⚠️ 大量 !important 是必要的：.quiiijide ul 和 .aps-news-grid 都有各自的
      栅格/换行规则，而且在 992px 下还写死了 flex-wrap:wrap、每条 100% 宽。
      组件要盖住它们只能提权。将来清理老 CSS 时这几条可以一起收掉。

   ⚠️ 用原生 overflow-x 滚动，不要改成 JS 拖拽 ——
      手机上原生滚动自带惯性和回弹，手感最好，也不会和页面纵向滚动打架。
   ========================================================================== */

.aps-hscroll{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--sp-6);
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-x: contain;      /* 滑到头别把整页带着跑 */
  scroll-snap-type: x proximity;       /* proximity 比 mandatory 好：短内容不会硬吸附 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox 隐藏滚动条 */
  padding-bottom: var(--sp-2);
}
.aps-hscroll::-webkit-scrollbar{ display: none; height: 0; }

/* 一排三个（桌面） */
.aps-hscroll > *{
  flex: 0 0 calc((100% - var(--sp-6) * 2) / 3) !important;
  max-width: none !important;
  width: auto !important;
  scroll-snap-align: start;
  min-width: 0;
}

/* 窄屏：两个 + 第三个露一角（44% × 2 + 间距 ≈ 92%，第三张露约 8%） */
@media (max-width: 992px){
  .aps-hscroll{ gap: var(--sp-4); }
  .aps-hscroll > *{
    flex: 0 0 44% !important;
  }
}

/* 触屏上隐藏滚动条之后要给个「还能往右滑」的暗示：末尾留一点渐隐 */
@media (max-width: 992px){
  .aps-hscroll{
    padding-right: var(--sp-2);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* ---------- 服务流程 ----------
   ⚠️ 2026-09-21 这里原来写过一套「.aps-flow-card」等高卡片样式。
      那是我把用户的需求理解错了 —— 他要的是**保留原来「1-2-3-4-5-6 + 一条线连着」
      的标签样式**，不是改成一排卡片。模板已回退，那套样式也删掉了。

   现在的做法：标签样式原样不动，只加两件事 ——
     · 自动轮播（JS 定时替用户点下一个标签，见 footer.htm）
     · 窄屏下标签栏可以横向滑（下面这条），能露出后面的步骤

   ⚠️ 下面的标签栏滑动只作用于窄屏。桌面端 6 个步骤本来就排得下，不要给它加
      overflow —— 那条连接线是靠 ::before/::after 画在 ul 上的，
      一旦 ul 变成滚动容器，线的定位会跟着滚，两端就接不上了。 */
/* ⚠️ 选择器必须和上面 1606 / 1647 那两条**同特异性**（.aps-flow.tabs-default.tab-round
   四个类），否则压不住它们 —— 一开始我只写了 `.aps-flow > .tabs-nav`，
   特异性不够，规则写了等于没写，标签栏还是滚不动。 */
@media (max-width: 992px){

  /* 标签栏横向滚动：一屏两个步骤 + 第三个露一角，手指可以滑。
     ⚠️ 必须显式写 flex-wrap / justify-content / gap（全部 !important）——
        上面 1777 行那条窄屏规则原来把这里设成「换行 + 居中 + 大间距」，
        那套是「6 个步骤折成两行」的老设计，和滑动是互斥的：
        不盖住它，标签栏就会竖着堆成 6 行（实测过，就是这么坏的）。
        gap 要设 0：每个 li 固定 130px，下面那条连接线的宽度正是按
        「相邻两点的间距 = li 宽度」算的，加 gap 就对不上了。 */
  .aps-flow.tabs-default.tab-round > .tabs-nav{
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;   /* 溢出时从左排起；居中会把两头裁掉 */
    gap: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* ⚠️ 顶部必须留出空间，否则会把选中的圆圈「削平」——
        这是个很容易漏的连带效应：
          ① 按 CSS 规范，一个轴设成 overflow:auto，另一个轴就不能是 visible，
             visible 会被强制算成 auto —— 所以设了横向滚动，**纵向也一起被裁剪了**。
          ② 选中的圆圈有 transform: translateY(-2px)（上浮 2px 的强调效果），
             圆圈本来就贴着容器顶边，一浮起来顶部 2px 就被裁掉。
          表现：红色圆圈上面变成一条直线，看着像缺了一块、跟描边对不上。
        （桌面端没这毛病，因为那边标签栏不滚动、overflow 是 visible。） */
    padding-top: 6px !important;
    padding-bottom: var(--sp-4) !important;   /* 给滚动留出触控余量 */
  }
  .aps-flow.tabs-default.tab-round > .tabs-nav::-webkit-scrollbar{ display: none; height: 0; }

  /* 每个步骤固定宽度（原来是 width:auto 自适应，窄屏会全挤在一起）。
     130px ≈ 序号圈 + 两三个字的标题，一屏约 2.2 个。 */
  .aps-flow.tabs-default.tab-round > .tabs-nav > li{
    width: 130px !important;
    min-width: 130px !important;
  }

  /* 横贯那条牵引线：ul 变成滚动容器之后，它是绝对定位、宽度只等于可视区，
     一滑就跟着跑、右端会露馅。窄屏改成「每个步骤往右接一段」，
     视觉上还是一条线把 1-2-3-4-5-6 串起来，滑动时也不会断。
     ⚠️ 别图省事直接把它 display:none —— 用户明确说喜欢这条线。 */
  .aps-flow.tabs-default.tab-round > .tabs-nav::before{
    display: none !important;
  }
  .aps-flow.tabs-default.tab-round > .tabs-nav > li::after{
    content: "";
    position: absolute;
    top: 19px;                 /* 和原来那条线同一个高度 */
    left: 50%;
    width: 130px;              /* 正好连到下一个步骤的中心 */
    height: 2px;
    background: #D5DDE5;
    /* ⚠️ 必须是 -1，不能是 0。
       桌面端那条线画在 ul::before 上，属于「子元素之前」，天然在圈下面；
       而 li::after 属于「子元素之后」，z-index 给 0 的话就**压在圈上面**了 ——
       圈变红时一条灰线横穿过去，看着像圈上缺了一块（用户报的就是这个）。
       给 -1 之后它排到 li 这个层叠上下文的最底层，
       圈（a::before）自己的不透明底色会把它盖住，只在两个圈之间露出来。 */
    z-index: -1;
    pointer-events: none;
  }
  /* 最后一个不用再往右接 */
  .aps-flow.tabs-default.tab-round > .tabs-nav > li:last-child::after{
    display: none !important;
  }
}

/* 横向栏的子项：清掉老规则留下的 margin。
   实测 .quiiijide ul li 带着 margin-right:10px，和我设的 gap 叠在一起，
   3 张就多出 20px → 桌面端一排明明放得下却还是能横向滚一下（很难看）。
   间距统一交给 flex 的 gap，子项自己不许再留外边距。 */
.aps-hscroll > *{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   七十一、列表页的「窄屏栏目切换栏」（2026-09-21）
   --------------------------------------------------------------------------
   【问题】用户报的：「手机上显示的内容好像没完全同步电脑上的，
            比如产品中心没看到菜单栏，案例也是 ——
            除了常见问题和关于我们，好像都没有。」

   查下来是这样：
     产品中心 / 案例展示 / 新闻资讯 这三个列表页，栏目入口**只有左栏那棵树**
     （.sidebar > .page-menu），而它在 style.css:5136 被
         @media screen and (max-width:1200px){ .sidebar .page-menu{ display:none } }
     整块藏掉了 —— 于是 1200px 以下（手机、平板、13 寸笔记本）进了产品中心，
     除了右上角汉堡菜单里那套全站导航，**没有任何切换子栏目
     （桁架机械手 / 机器人第七轴 / 齿轮齿条模组）的地方**。

     常见问题、关于我们为什么没这毛病：那两个页面本来就是「整幅 + 顶部胶囊」，
     用的是 subnav.htm 输出的 .aps-subnav，压根不依赖左栏。

   【做法】直接把公用的 subnav.htm 引进来，外面包一层 .aps-subnav-mobile：
             · ≤1200px 显示（跟 .page-menu 被藏掉的是同一个断点，无缝接上）
             · >1200px 隐藏（那三个页面左栏已经有完整的栏目树，再显示一排就是重复）
           断点必须跟 style.css 保持一致，写成 992 的话
           993~1200 这段（平板横屏、13 寸笔记本）会两边都空着。

   ⚠️ 想在桌面端也显示这排胶囊，把这层 div 从模板里去掉即可，
      或者把下面的 display:none 改成 display:block。
   ========================================================================== */
.aps-subnav-mobile{ display: none; }

@media screen and (max-width: 1200px){
  .aps-subnav-mobile{ display: block; }

  /* .aps-subnav 原本是给「整幅页面」用的（常见问题 / 关于我们，
     它头顶上没别的东西）。搬进列表页的内容区之后，原来的下边距偏大 ——
     它下面紧跟着就是列表第一行，收一收，别把卡片顶得太远。 */
  .aps-subnav-mobile .aps-subnav{
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
  }
}

/* ==========================================================================
   七十二、栏目切换栏：窄屏改成一排横滑（2026-09-21）
   --------------------------------------------------------------------------
   【问题】用户报的：「栏目标题超出换行，感觉很不好看」——
            手机上那排栏目胶囊（全部 / 桁架机械手 / 机器人第七轴 / 齿轮齿条模组）
            放不下就折成两行，第二行孤零零挂着一个，很脏。

   【为什么不能靠缩小让它一行放下】
     375px 屏，内容区 320px。四个胶囊实测宽：
       全部 62 + 桁架机械手 104 + 机器人第七轴 118 + 齿轮齿条模组 118 = 402
     再加 3 个 gap（12×3 = 36）→ 438px。要压进 320 得砍掉 27%，
     字号得从 14 掉到 10 出头 —— 那就没法看了。
     更别说「应用领域」有 8 个胶囊，怎么缩都放不下。

   【做法】窄屏这排改成「一律不换行 + 横向可滑」。
     光横滑还不够 —— 右边藏着的栏目用户根本不知道有，
     那就等于把上一轮刚修好的「手机上没菜单」换个形式又犯一遍。
     所以配套三件事：
       ① 一排不换行，可横滑（下面这段 CSS）
       ② 两端渐隐：暗示「这边还有」，滑到端点时自动收起，不做无用暗示
          —— 由 .aps-scrollable / .at-start / .at-end 三个类控制，JS 在 footer.htm
       ③ 当前栏目自动滚进视野：否则进了「齿轮齿条模组」页，
          屏幕上还停着「全部 / 桁架机械手」，用户以为没切换成功

   【只在 ≤1200px 生效】桌面端空间够，换行也不难看，保持原样不动。
       ⚠️ 断点跟 .aps-subnav-mobile（第七十一节）、.page-menu 被隐藏的断点保持一致。

   【放得下时不滑也不渐隐】JS 会量 scrollWidth 和 clientWidth，
       没溢出就把 .aps-scrollable 摘掉 —— 比如新闻页只有 3 个胶囊，
       一行本来就放得下，不该出现任何滑动/渐隐的痕迹。
   ========================================================================== */

/* 让子项的 offsetLeft 是「相对这一行的内容起点」，
   这样 JS 里 scrollLeft = item.offsetLeft - 20 才是对的。
   ⚠️ 必须放在媒体查询**外面**：JS 在桌面端也会跑（虽然那时通常不溢出），
      少了这个定位，offsetLeft 会相对别的祖先算，位置就飘了。 */
.aps-subnav-row{ position: relative; }

@media screen and (max-width: 1200px){

  .aps-subnav-row{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    /* ⚠️ 必须显式写 hidden。给了一个轴 auto，另一个轴的 visible 会被浏览器
         强制算成 auto（CSS 规范），胶囊的描边/焦点圈上下会被切掉一条。
         首页服务流程那条线也踩过同款坑（第七十节）。 */
    overflow-y: hidden;
    gap: var(--sp-2) !important;
    padding: 3px 0;               /* 上下留一点，别把胶囊的描边贴边裁掉 */
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* 老 Edge/IE */
    -webkit-overflow-scrolling: touch;
  }
  .aps-subnav-row::-webkit-scrollbar{ width: 0; height: 0; display: none; }

  /* 胶囊不许被压扁、不许内部折行 */
  .aps-subnav-row > .aps-subnav-item{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 下级那一行（二级栏目）：窄屏也横滑。
     ⚠️ 但要把那条小连线关掉 —— 它是 ::before 绝对定位的，
        这一行现在是滚动容器，内容一滚线就跟着跑、两端对不上。
        缩进留着，从属关系还是看得出来。 */
  .aps-subnav-row + .aps-subnav-row::before{ display: none; }

  /* 两端渐隐：只有「确实溢出」时 JS 才会加 .aps-scrollable。
     两个变量控制左右各淡多少，滑到哪一端就把哪一端收掉。 */
  .aps-subnav-row.aps-scrollable{
    --aps-fade-l: 18px;
    --aps-fade-r: 18px;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 var(--aps-fade-l),
        #000 calc(100% - var(--aps-fade-r)), transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0, #000 var(--aps-fade-l),
        #000 calc(100% - var(--aps-fade-r)), transparent 100%);
  }
  .aps-subnav-row.aps-scrollable.at-start{ --aps-fade-l: 0px; }
  .aps-subnav-row.aps-scrollable.at-end  { --aps-fade-r: 0px; }
}

/* ==========================================================================
   七十三、无子栏目的单页栏目：去掉左栏 + 内容收成 940px 居中（2026-09-21）
   --------------------------------------------------------------------------
   用在「应用领域」总览页 /application-areas/。

   背景：这个栏目原来有 8 个子栏目，用的是「左栏栏目树 + 顶部胶囊切换栏」。
   2026-09-21 把 8 个子栏目的内容合并进了总览页，并把它们改成了
   「外部链接」类型（访问就 302 回总览页）。于是：
     · subnav.htm 已经排除 is_part=1 → 胶囊栏自动为空，不输出 ✓
     · 但 {eyou:models} 标签**不过滤 is_part** → 左栏会列出那 8 个
       全部指回本页自己的链接，点了原地打转 ✗

   模板里算了个布尔值，没有可切换子栏目时给 .main 加 aps-nosidebar（见
   template/pc/lists_single_product.htm 里那段 {eyou:php}）。

   ⚠️ 好消息：这里的布局**已经是 flex 了**（aps.css 更上面那段
      `.main > .page-width{ display:flex !important }`，
      `.content` 是 `flex: 1 1 auto; width: auto !important; float: none !important`）。
      所以把左栏 display:none 之后，内容区**自己就会占满整行**，
      不存在「float:right 定宽 900px、左栏一藏右边空一块」的问题。
      只要再给它一个 max-width 限制、让它居中即可。

   940px 这个宽度跟站内既有惯例一致：
     常见问题详情页 .aps-faqview、关于我们 .aps-about，都是 var(--w-md) 居中单栏。
   原因也一样 —— 满幅 1200px 的正文行太长，读起来累。
   ========================================================================== */

.main.aps-nosidebar .sidebar{ display: none; }

.main.aps-nosidebar > .page-width > .content{
  max-width: var(--w-md);
  /* flex 容器里 margin:auto 会把剩余空间均分到两侧 → 水平居中。
     比 float + margin:0 auto 可靠（float 在 flex 子项上是无效的）。 */
  margin-left: auto;
  margin-right: auto;
}

/* 窄屏（≤1200）时 .content 本来就是 width:100%，别再卡 940 的 padding 造成两次缩进 */
@media screen and (max-width: 1200px){
  .main.aps-nosidebar > .page-width > .content{ max-width: 100%; }
}

/* ==========================================================================
   七十四、首页「行业应用」板块的说明导语 + 行动入口（2026-09-21）
   --------------------------------------------------------------------------
   【用户提的】「首页行业应用栏目应该改成那种说明式的描述」——
   原来这块只有「标题 + 8 张图」，纯展示：
   看完只知道"你做过这些行业"，不知道"这跟我有什么关系"。

   加两层，把它从「展示」变成「说明」：
     ① .aps-industry-lead  —— 标题下面两句话
          主句给可信度：做了多少个、验证过没有
          副句给行动理由：有现成方案，不用从零试错
     ② .aps-industry-more  —— 卡片下面一个行动入口
          原来整块只有标题那一行可点，很容易被漏掉

   ⚠️ 文案写的是**通用能力**（八大行业 / 1000+ 个项目 / 有成熟配置可复用），
      不涉及具体项目细节，所以不会过时也不会被客户追问穿帮。
      要改文案直接改 index.htm 里那两行，不用动样式。

   ⚠️ 这个板块的背景是深藏青（.aps-dark-sec），
      所以文字用白色系、重点词用 --aps-red-l（亮红，深底上才够对比），
      **不要用 --aps-red**（那个是给白底用的，深底上发闷）。
   ========================================================================== */

/* ---------- ① 说明导语 ---------- */
.aps-industry-lead{
  max-width: 760px;              /* 太长一行读起来累，收窄一点 */
  margin: 0 auto var(--sp-9);
  text-align: center;
}
.aps-industry-lead-main{
  font-size: var(--fs-lg);       /* 18px：比正文大一档，当小标题用 */
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: #fff;
  margin: 0 0 var(--sp-3);
}
/* 重点词高亮。⚠️ em 默认是斜体，中文斜体不好看，必须 font-style: normal */
.aps-industry-lead-main em{
  font-style: normal;
  font-weight: var(--fw-semi);
  color: var(--aps-red-l);
}
.aps-industry-lead-sub{
  font-size: var(--fs-md);       /* 15px */
  line-height: var(--lh-base);
  color: rgba(255,255,255,.72);
  margin: 0;
}

/* ---------- ② 卡片下方的行动入口 ---------- */
.aps-industry-more{
  text-align: center;
  margin-top: var(--sp-8);
}
.aps-industry-more a{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-7);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  color: #fff;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.aps-industry-more a:hover{
  background: var(--aps-red);
  border-color: var(--aps-red);
  color: #fff;
}
/* 箭头跟着轻微右移，暗示"点进去" */
.aps-industry-more a svg{ transition: transform var(--t-fast); }
.aps-industry-more a:hover svg{ transform: translateX(3px); }

/* ---------- 窄屏 ---------- */
@media (max-width: 640px){
  .aps-industry-lead{ margin-bottom: var(--sp-7); }
  .aps-industry-lead-main{ font-size: var(--fs-md); }
  .aps-industry-lead-sub{ font-size: var(--fs-base); }
  .aps-industry-more{ margin-top: var(--sp-6); }
  .aps-industry-more a{ padding: 10px var(--sp-6); font-size: var(--fs-base); }
}

/* ==========================================================================
   七十五、首页「行业应用」滚轮（2026-09-21）
   --------------------------------------------------------------------------
   【用户提的】「设计成一个类似滚轮一样的，八大行业自动滚轮，去掉查看更多按钮，
                滚到哪个标题哪个标题就在正中间，下面对应哪个图片，
                这样可以压缩屏高，5 个图一行设计，适配到手机端也不占屏高」

   原来那块是 4 列 × 2 行的图片网格（8 张全铺开）：
     桌面 2 行 ≈ 430px，手机上 2 列 × 4 行 ≈ 480px，整块算上标题导语要 860px 高。
   现在改成**一排 5 张、自动横滚、正中间那张放大变亮**：只剩一行高度。

   滚动/高亮/循环的逻辑在 index.htm 末尾那段脚本里（搜 apsWheel），
   这里只负责"长什么样"。

   ⚠️ 一行几张由 --aps-wn 控制，脚本会读这个变量来决定"中间"是第几个。
      改行数只需改 --aps-wn 和 --aps-wg 两个变量，flex 宽度会自动跟着算。
   ========================================================================== */
.aps-wheel{
  --aps-wn: 5;                    /* 一行显示几张 */
  --aps-wg: var(--sp-4);          /* 张与张的间距 */
  position: relative;
  overflow: hidden;
  /* 上下留一点，中间那张放大了才不会被裁掉边 */
  padding: var(--sp-4) 0;
  /* 两侧渐隐：暗示"两边还有"，滑到边缘的那张自然淡出 */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  /* ⚠️ 只接管横向手势，竖向仍然交给页面滚动 ——
     不写这条的话，手机上想上下滑页面会被轮播的拖拽吃掉，页面滑不动。 */
  touch-action: pan-y;
  cursor: grab;
}
.aps-wheel.is-dragging{ cursor: grabbing; }
.aps-wheel-track{
  display: flex;
  gap: var(--aps-wg);
  will-change: transform;
  /* 停顿时长跟脚本里的 3000ms 对齐，略短一点，切过去更利落 */
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
}
.aps-wheel-item{
  position: relative;
  flex: 0 0 calc((100% - var(--aps-wg) * (var(--aps-wn) - 1)) / var(--aps-wn));
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* ⚠️ 这里**不是**链接（模板里用的是 div）—— 点一张只是把它滚到正中，
     不跳页。所以没有 a 的默认样式要清。
     要进内页走下面 .aps-wheel-more 那个小入口。 */
  cursor: pointer;
  /* 拖拽时不希望选中文字 / 拖动图片本身 */
  user-select: none;
  -webkit-user-drag: none;
  /* 非中间的那些：压暗、降饱和、略微缩小 —— 一眼看出"这不是当前项" */
  opacity: .42;
  filter: saturate(.5) brightness(.78);
  transform: scale(.94);
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              filter .55s var(--ease), box-shadow .55s var(--ease);
}
.aps-wheel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* ⚠️ 必须关掉图片自身的事件 ——
     不然拖拽时会触发浏览器原生的"拖动图片"（出现半透明的拖影），
     点击时 e.target 也会变成 img 而不是外面那层。 */
  pointer-events: none;
  -webkit-user-drag: none;
}
.aps-wheel-name{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-3) var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-title);
  color: #fff;
  text-align: center;
  /* 图上压字必须加渐变垫底，不然浅色照片上白字看不清 */
  background: linear-gradient(to top, rgba(6,20,34,.92) 0%, rgba(6,20,34,0) 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size .55s var(--ease);
}
/* 正中间那张：还原亮度、放大、抬到邻居上面（不然放大会被左右盖住）
   ⚠️ 阴影别用「大偏移 + 高透明度的纯黑」—— 这个板块底色是深藏青，
      黑阴影在深底上会糊成一块有硬边的黑斑，看着很脏（用户 2026-09-21 报过
      「滚到正中的阴影有点奇怪不柔和」）。
      改成：一层极淡的白色描边（把边缘勾出来，产生"浮起"的感觉）
          + 一层大范围、低透明度的黑（只做很轻的落影）。 */
.aps-wheel-item.is-center{
  opacity: 1;
  filter: none;
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10),
              0 18px 42px rgba(0,0,0,.20);
}
.aps-wheel-item.is-center .aps-wheel-name{
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
}

/* ---------- 滚轮下面那个小入口 ----------
   图片改成不可点之后（点一张只是把它滚到正中），
   这一块就只剩这一个去内页的地方了。
   但用户要的是「很小的层级」—— 所以：小字 + 半透明 + 一条细下划线，
   刻意不跟上面的大图抢注意力，鼠标移上去才提亮。 */
.aps-wheel-more{
  text-align: center;
  margin-top: var(--sp-5);
}
.aps-wheel-more a{
  display: inline-block;
  font-size: var(--fs-sm);                 /* 13px，比正文还小一档 */
  line-height: 1.6;
  color: rgba(255,255,255,.52);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.20);
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.aps-wheel-more a:hover{
  color: #fff;
  border-bottom-color: var(--aps-red-l);
}

/* ---------- 窄屏：行数递减，保证一张图不会小到看不清 ---------- */
@media (max-width: 992px){
  .aps-wheel{ --aps-wn: 3; --aps-wg: var(--sp-3); }
}
@media (max-width: 640px){
  .aps-wheel{ --aps-wn: 2; --aps-wg: var(--sp-3); padding: var(--sp-3) 0; }
  .aps-wheel-name{ padding: var(--sp-5) var(--sp-2) var(--sp-2); font-size: var(--fs-sm); }
  .aps-wheel-item.is-center .aps-wheel-name{ font-size: var(--fs-base); }
}

/* ==========================================================================
   七十六、列表页卡片网格：改用 CSS Grid，保证铺满整行（2026-09-21）
   --------------------------------------------------------------------------
   【用户报的】「栏目页左边留白偏少」。

   实测 820 产品列表：
       外层的 .content、面包屑、胶囊栏 —— 左=右=20px，都是齐的 ✓
       里面的卡片行             —— 左 20px、右 42px，**差 22px** ✗
     1024 案例列表同样，差 20px。

   根因：卡片用的是老式浮动栅格（style.css），
       .column .col-3-1{ width:30.3333%; margin-left:3% }
   **每张卡都带 3% 的左边距，第一张也带**，于是整个网格整体右移，
   右边自然空出一截。而且这一堆百分比在好几个媒体查询里互相覆盖
   （style.css 里 col-3-1 的宽度定义散在十几个地方），算起来很费劲、
   改一处还会牵连别处。

   ⚠️ 只影响「产品列表」和「案例列表」两个页面 ——
      资讯/搜索/标签/关于我们用的是 .aps-news-list（横向条目），
      实测左右本来就是齐的，**别动那边**。

   修法：直接换 CSS Grid。等分列 + 统一 gap，头一张贴左、最后一张贴右，
   任何宽度下都铺满，不用再跟百分比较劲。
   顺带好处：grid 的 align-items 默认 stretch，一行卡片天然等高。
   ========================================================================== */
/* ⚠️⚠️ 选择器权重是这里的关键，别顺手简化
   --------------------------------------------------------------------------
   style.css 里有一条老规则：
       .portfolio-list .column .col-3-1{ width:31.3333% !important; ... }
   它的权重是 (0,3,0)。如果这里写成 `.portfolio-list > ul.column > li`，
   权重只有 (0,2,2) —— **两边都带 !important 时，权重高的赢**，
   于是百分比的宽度照样压过来，grid 白写（2026-09-21 踩过，
   写完一看卡片还是 165px 宽，查了半天才发现是权重问题）。

   现在这两个选择器分别是 (0,3,1) 和 (0,3,2)，都高于 (0,3,0)；
   而且 aps.css 在 style.css 之后加载，同权重时后来的也赢。双保险。

   用 [class*="col-"] 而不是写死 .col-3-1 —— 以后后台换成一列或四列
   （col-2-1 / col-4-1）也一并管住。 */
.portfolio-list > ul.column.clearfix{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin: 0 !important;
  padding: 0 !important;
}
/* 老栅格的 float 和百分比宽度全部作废 */
.portfolio-list > ul.column > li[class*="col-"]{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}
@media (max-width: 992px){
  .portfolio-list > ul.column.clearfix{
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}
/* ⚠️⚠️ 手机上也是**两列**，不是一列 —— 别改成 1fr
   --------------------------------------------------------------------------
   用户 2026-09-20 明确要求过：「栏目下排列一列竖排，屏占比太高」，
   当时就把手机改成了两列（见上面第六十二节，规则是
   `.content-wrapper .portfolio-list .col-3-1{ width: calc(50% - 21px) }`）。

   2026-09-21 我把栅格换成 grid 时顺手写成 1fr，
   等于把那个决定又推翻了 —— 用户第二天就发现「内页缩略图怎么还是单列」。
   375 下两列每张 157px（4:3 的图 118 高 + 标题区），比一列省 60% 高度。
   gap 用 20px，跟原来 margin 10+10 的效果一致。 */
@media (max-width: 640px){
  .portfolio-list > ul.column.clearfix{
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}

/* ==========================================================================
   七十七、右侧悬浮条重做（2026-09-21）
   --------------------------------------------------------------------------
   【改前】
     · 每格 li 是 80×40 的白盒子，图标只有 30×30，而且 a 上被刷了一块
       --aps-navy-2 的深蓝方块 —— 看上去就是「白盒里塞了个蓝方块」；
     · 三个展开面板宽高各写各的（190×200 / 190×180 / 400×120），
       再靠 li:nth-child(n) 各自写死 top 去对位，动一个就全歪；
     · 第四格「返回顶部」(#fhdb) 压根没进这套样式，跟前三格对不上；
     · 手机上没有任何收缩，80px 宽的条压掉一截屏幕。

   【改后】
     · 四格统一 48×48、圆角、去掉深蓝底方块，图标 22px；
     · 面板统一宽度，用 top:50% + translateY(-50%) 对齐所在格，
       再加一个指向图标的小箭头，不用再逐格写 top；
     · ≤1200 收一档、≤640 再收一档。

   ⚠️ 展开动画是 nav.js 给 .hides 加/去 .pic 驱动的（nav.js:78-79）。
      所以 .hides **不能再用 display:none** —— 那样切类没有过渡。
      这里改成 visibility + opacity，切类就有淡入淡出。
   ⚠️ style.css 里那套 .youcedaoh 规则在 6116~6220 行，
      li:nth-child(2)/(3) 那两条权重是 (0,3,2)，
      所以本节把 nth-child 也一起写满，保证盖得住。
   ========================================================================== */

/* —— 容器：从 top:30% 改成垂直居中，右边留一点边距 —— */
.youcedaoh{
  position: fixed;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;   /* 低于导航(1500)/搜索面板(1100)/遮罩(1000)，滚动时该被盖住 */
}
.youcedaoh .asjiaocn ul{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* —— 四格统一 —— */
.youcedaoh .asjiaocn ul li,
.youcedaoh .asjiaocn ul li:nth-child(2),
.youcedaoh .asjiaocn ul li:nth-child(3),
.youcedaoh .asjiaocn ul li#fhdb{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--aps-line), 0 10px 26px rgba(10, 37, 64, .10);
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* —— 图标本体：干掉深蓝方块 —— */
.youcedaoh .asjiaocn ul li > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  border-radius: inherit;
}
.youcedaoh .asjiaocn ul li > a .icon{
  width: 22px;
  height: 22px;
  fill: var(--aps-navy-2);
  transition: fill .25s ease;
}

/* —— 悬停：整格转红、图标转白 —— */
.youcedaoh .asjiaocn ul li:hover{
  background: var(--aps-red);
  box-shadow: 0 0 0 1px var(--aps-red), 0 12px 28px rgba(209, 25, 39, .26);
  transform: translateX(-2px);
}
.youcedaoh .asjiaocn ul li:hover > a .icon{ fill: #fff; }

/* —— 展开面板：统一 220px、垂直对齐所在格 —— */
.youcedaoh .asjiaocn ul li .hides,
.youcedaoh .asjiaocn ul li:nth-child(2) .hides,
.youcedaoh .asjiaocn ul li:nth-child(3) .hides{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  width: 220px;
  height: auto;
  padding: var(--sp-5);
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--aps-line), 0 16px 40px rgba(10, 37, 64, .16);
  display: block;              /* 不用 display:none，见上面注释 */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.youcedaoh .asjiaocn ul li .hides.pic{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}
/* ⚠️⚠️ 面板与图标之间那 12px 空隙必须用一条透明的「桥」盖住（2026-09-21）
   --------------------------------------------------------------------------
   症状：面板在图标左边，读者想往左挪去选中电话号码 ——
         鼠标一进那道缝就离开 li，:hover 断掉，面板当场消失，号码选不中。
         原来只有那个 12×12 的小箭头能蹭到一点点，所以「很难拉过去」。
   原理：伪元素属于 .hides，而 .hides 又是 li 的子节点，
         鼠标压在伪元素上时 li:hover 依然成立，面板就不会关。
   注意：面板隐藏时 .hides 上是 pointer-events:none，伪元素跟着一起失效，
         所以不会隔着隐形的桥误触发。 */
.youcedaoh .asjiaocn ul li .hides::before{
  content: "";
  position: absolute;
  top: 0;
  right: -16px;      /* 比 12px 的缝宽一点，留 4px 余量 */
  width: 16px;
  height: 100%;
  background: transparent;
}

/* 指向图标的小箭头 */
.youcedaoh .asjiaocn ul li .hides::after{
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: #fff;
  border-right: 1px solid var(--aps-line);
  border-top: 1px solid var(--aps-line);
  transform: rotate(45deg);
}

/* —— 面板内排版 —— */
.youcedaoh .asjiaocn ul li .hides .ewm-box,
.youcedaoh .asjiaocn ul li:nth-child(2) .hides .ewm-box,
.youcedaoh .asjiaocn ul li:nth-child(3) .hides .ewm-box{
  width: 100%;
  margin: 0;
  padding: 0;
}
.youcedaoh .asjiaocn ul li .hides .ewm-box img{
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-sm);
}
.youcedaoh .asjiaocn ul li .hides .ewm-box > p,
.youcedaoh .asjiaocn ul li .hides .ewm-box .cbasijd p{
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: rgba(10, 37, 64, .60);
  text-align: center;
}
.youcedaoh .asjiaocn ul li .hides .ewm-box .cbasijd{
  margin: 0 0 var(--sp-3);
}
.youcedaoh .asjiaocn ul li .hides .ewm-box .cbasijd:last-child{
  margin-bottom: 0;
}
.youcedaoh .asjiaocn ul li .hides .ewm-box .cbasijd h3{
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-lg);
  line-height: var(--lh-title);
  color: var(--aps-red);
  text-align: center;
}
.youcedaoh .asjiaocn ul li .hides .ewm-box .cbasijd h3 a{
  color: inherit;
  text-decoration: none;
}

/* ⚠️⚠️ 踩过的坑：style.css:6139 有一条
       .youcedaoh ul li a{ display:block; width:30px; height:30px; margin:0 auto }
   它本意是只给那 4 个图标定尺寸，但选择器会命中面板里**所有** <a> ——
   手机号码、下面那个「立即咨询」按钮全被压成 30×30。
   按钮 30px 宽 + 两侧 padding = 一个红圆圈，字全挤在中间。
   这里把面板内的链接还原成自动尺寸（权重 (0,3,3) > (0,1,3)，盖得住）。 */
.youcedaoh .asjiaocn ul li .hides a{
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  /* ⚠️ 电话号码是 <a href="tel:…">，而 Chrome 默认把 <a> 当成可拖拽元素 ——
     从号码上按住往左拖会变成「拖链接」，选不中字。
     关掉拖拽、保留选中，读者才能正常拉选/复制。 */
  -webkit-user-drag: none;
  user-select: text;
}

/* —— 第③格「在线留言」的入口按钮 —— */
.youcedaoh .aps-float-go{
  display: block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-title);
  text-align: center;
  color: #fff;
  background: var(--aps-red);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background-color .2s ease;
}
.youcedaoh .aps-float-go:hover{ background: var(--aps-red-d); }

/* ⚠️ 「返回顶部」初始藏起来 —— nav.js 滚过 200px 后才 fadeIn。
   fadeIn/fadeOut 会写**内联**的 display，内联权重高于样式表，
   所以这条不会影响显隐逻辑，只是把「加载瞬间闪一下」消掉。
   必须排在上面那条 display:flex 之后（同权重，靠顺序取胜）。 */
.youcedaoh .asjiaocn ul li#fhdb{ display: none; }

/* —— 响应式 —— */
@media (max-width: 1200px){
  .youcedaoh{ right: var(--sp-2); }
  .youcedaoh .asjiaocn ul li,
  .youcedaoh .asjiaocn ul li:nth-child(2),
  .youcedaoh .asjiaocn ul li:nth-child(3),
  .youcedaoh .asjiaocn ul li#fhdb{
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
  }
  .youcedaoh .asjiaocn ul li > a .icon{ width: 20px; height: 20px; }
}
@media (max-width: 640px){
  .youcedaoh{ right: var(--sp-1); }
  .youcedaoh .asjiaocn ul{ gap: var(--sp-1); }
  .youcedaoh .asjiaocn ul li,
  .youcedaoh .asjiaocn ul li:nth-child(2),
  .youcedaoh .asjiaocn ul li:nth-child(3),
  .youcedaoh .asjiaocn ul li#fhdb{
    width: 40px;
    height: 40px;
  }
  .youcedaoh .asjiaocn ul li > a .icon{ width: 18px; height: 18px; }
  /* 面板别顶出屏幕 */
  .youcedaoh .asjiaocn ul li .hides,
  .youcedaoh .asjiaocn ul li:nth-child(2) .hides,
  .youcedaoh .asjiaocn ul li:nth-child(3) .hides{
    width: min(220px, calc(100vw - 72px));
    padding: var(--sp-4);
  }
}