/*
Theme Name: 鼎力数码
Theme URI: http://47.107.104.187/
Author: WorkBuddy
Description: 深圳鼎力数码科技 - UV打印机企业站主题
Version: 1.0
License: GPL-2.0-or-later
Text Domain: dlican
*/

/* ===== 基础 ===== */
:root{
  --primary:#065e99;
  --primary-light:#1683d8;
  --primary-dark:#04466f;
  --text:#333;
  --text-light:#666;
  --border:#e6ecf1;
  --bg-soft:#f5fafc;
  --radius:4px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.8;
  color:var(--text);
  background:#fff;
  /* 原来是 overflow-x:hidden，但它会让 body 成为滚动容器，
     导致 .site-header 的 position:sticky 直接失效。
     clip 同样能裁掉横向溢出，却不建立滚动容器，吸顶才能生效。
     老浏览器不支持时就退回 hidden（失去吸顶，但布局不受影响）。 */
  overflow-x:hidden;
  overflow-x:clip;
}
a{color:var(--primary);text-decoration:none;transition:color .2s;}
a:hover{color:var(--primary-light);}
img{max-width:100%;height:auto;border:0;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.clearfix::after{content:"";display:table;clear:both;}

/* 正文里的图片统一限宽 */
.entry-content img{max-width:100%!important;height:auto!important;}
.entry-content p{margin:0 0 16px;}
/* 原站编辑器残留的 text-wrap-mode:nowrap（新版编辑器产物）会让整段不换行，
   撑破布局并把侧栏挤出屏幕。内联样式优先级高于类选择器，故用 !important 纠正。 */
.entry-content p,.entry-content span,.entry-content li,
.entry-content div,.entry-content td{text-wrap-mode:wrap!important;}
.entry-content{overflow-wrap:break-word;word-break:break-word;}
.entry-content table{width:100%;border-collapse:collapse;margin:16px 0;}
.entry-content td,.entry-content th{border:1px solid var(--border);padding:8px 12px;}
.entry-content th{background:var(--bg-soft);font-weight:600;}

/* 产品详情分节 */
.prod-intro{
  background:var(--bg-soft);border-left:3px solid var(--primary);
  padding:14px 18px;margin:0 0 26px!important;color:#455a6b;
  font-size:15px;line-height:1.9;border-radius:0 var(--radius) var(--radius) 0;
}
.entry-content h3.prod-sec-title{
  font-size:17px;color:var(--primary-dark);font-weight:700;
  margin:30px 0 16px;padding-left:11px;border-left:4px solid var(--primary);
  line-height:1.4;
}
.entry-content h3.prod-sec-title:first-child{margin-top:0;}
.entry-content table tr:nth-child(odd) td{background:#fafcfd;}
.entry-content table td:first-child{background:var(--bg-soft);font-weight:600;color:#3d5666;white-space:nowrap;}

/* 结构化参数表 */
.prod-spec-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;}
.prod-spec-table td{border:1px solid var(--border);padding:10px 14px;line-height:1.7;}
.prod-spec-table tr:nth-child(odd) td{background:#fafcfd;}
.prod-spec-table td:first-child{
  background:var(--bg-soft);font-weight:600;color:#3d5666;
  width:130px;white-space:nowrap;
}

/* 产品详情图片稍作间距 */
.entry-content p img{border-radius:var(--radius);}

/* ===== 头部（吸顶） ===== */
/* 吸顶要点：父级不能有 overflow:hidden，否则 position:sticky 失效。
   body 上原本是 overflow-x:hidden，这里改成 clip（clip 不产生滚动容器），
   老浏览器不支持 clip 时退回 hidden，只是失去吸顶，布局不会坏。 */
.site-header{
  position:sticky;top:0;z-index:1000;background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  transition:box-shadow .25s ease;
  /* 关键：吸顶前后页头高度保持一致。
     如果这里让 is-stuck 改变高度，文档总高会跟着变，浏览器滚动锚定会补偿 scrollTop，
     把滚动位置推回阈值另一侧 → 与吸顶判定形成死循环，表现为导航疯狂抖动。
     高度不变，就切断了这条反馈。
     需要「收紧」的视觉效果全部放在内部元素上（Logo 缩小 + 白色留白加大），不改变盒子高度。 */
  --hdr-h:88px;
  min-height:var(--hdr-h);
}
.site-header.is-stuck{box-shadow:0 4px 18px rgba(0,0,0,.10);}
/* 登录后 WP 管理条是 fixed 定位（桌面 32px / 移动 46px），
   不把吸顶位置让出来的话导航会被它压住。 */
body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px;}
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 0;transition:padding .25s ease;
  min-height:var(--hdr-h);
}
/* 吸顶时不改 padding，只缩小 Logo —— 页头总高恒定，但视觉上仍有「收紧」感 */
.site-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.site-logo img{max-height:52px;width:auto;}
/* 自定义 Logo */
.site-logo .custom-logo-link{display:block;line-height:0;}
.site-logo .custom-logo{
  display:block;width:auto;height:auto;
  max-height:56px;max-width:210px;object-fit:contain;
  transition:max-height .25s ease;
}
.site-header.is-stuck .site-logo .custom-logo{max-height:40px;}
.logo-text .name{font-size:24px;font-weight:700;color:var(--primary);letter-spacing:1px;line-height:1.2;}
.logo-text .slogan{font-size:12px;color:#8a9aa6;letter-spacing:.5px;}

/* ===== 导航：底部细线指示器 ===== */
/* 不用整块蓝底块：色块在白色页头上显得重、和 Logo 抢视觉。
   改成「文字变色 + 底部 2px 细线」，hover 时细线从中间展开，当前栏目常驻。 */
/* align-self:stretch + 负 margin 吃掉 .header-inner 的上下 padding，
   让导航块正好撑满页头高度。这样下拉的 top:100% 就精确落在横幅上沿。
   padding 现在恒为 16px（吸顶态不再变化），所以负 margin 固定 -16px 即可。 */
.main-nav{
  margin-left:auto;align-self:stretch;
  margin-top:-16px;margin-bottom:-16px;
  display:flex;align-items:stretch;
}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap;}
/* 一级项撑满导航高度：下拉菜单才能靠 top:100% 精确落到横幅上沿 */
.main-nav > ul{align-items:stretch;align-self:stretch;}
.main-nav li{position:relative;}
/* li 撑满页头高度（供下拉定位），但 a 保持自身高度并垂直居中 ——
   否则下划线会被拉到页头最底部，紧贴小横幅 */
.main-nav > ul > li{display:flex;align-items:center;}
.main-nav > ul > li > a{
  position:relative;display:block;padding:12px 18px;
  color:#2b3a45;font-size:15px;font-weight:500;
  border-radius:0;white-space:nowrap;transition:color .22s ease;
}
.main-nav > ul > li > a::after{
  content:"";position:absolute;left:17px;right:17px;bottom:5px;height:2px;
  background:var(--primary);border-radius:1px;
  transform:scaleX(0);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.main-nav > ul > li > a:hover{color:var(--primary);}
.main-nav > ul > li > a:hover::after{transform:scaleX(1);}
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current_page_item > a{color:var(--primary);font-weight:600;}
.main-nav > ul > li.current-menu-item > a::after,
.main-nav > ul > li.current_page_item > a::after{transform:scaleX(1);}

/* 下拉菜单
 * 规范（2026-10 定）：
 *   ① 水平居中对齐到一级菜单项（left:50% + translateX(-50%)）
 *   ② 顶部与小横幅上沿齐平（一级项已撑满 header 高度，top:100% 即 header 底边）
 *   ③ 无蓝色顶线
 *   ④ 宽度 184px → 138px（减 25%）
 *   ⑤ 文字水平居中
 */
.main-nav .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:138px;min-width:0;background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.13);border-radius:var(--radius);
  border-top:0;
  padding:6px 0;display:none;flex-direction:column;z-index:200;
}
.main-nav li:hover > .sub-menu{display:flex;}
.main-nav .sub-menu a{
  display:block;padding:9px 6px;font-size:14px;color:#444;
  text-align:center;line-height:1.4;
  /* 菜单项文字较长时（如「UV平板打印机」）允许折行，不撑宽容器 */
  white-space:normal;word-break:break-word;
}
.main-nav .sub-menu a:hover{background:var(--bg-soft);color:var(--primary);}

/* 移动菜单按钮 */
.nav-toggle{display:none;background:none;border:0;font-size:26px;color:var(--primary);cursor:pointer;padding:6px 10px;}

/* ===== 首页 Banner 轮播（1920×760，图内自带文案） ===== */
.hero-banner{
  position:relative;
  overflow:hidden;
  background:#0b3a5c;   /* 图未加载前的底色，避免白闪 */
}
.hero-track{
  position:relative;
  /* 用 aspect-ratio 锁定 1920:760，任何屏宽都保持原图比例、不裁切不变形 */
  aspect-ratio:1920 / 760;
  max-height:760px;
  width:100%;
}
.hero-slide{
  position:absolute; inset:0;
  display:block;
  opacity:0;
  transition:opacity .55s ease;
  pointer-events:none;
}
.hero-slide.is-active{opacity:1;pointer-events:auto;}
.hero-slide img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;     /* 宽屏时上下裁一点，保证铺满无黑边 */
  object-position:center;
}

/* 左右切换按钮：默认半隐，hover 才明显，避免压在图上干扰阅读 */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:64px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.22); color:#fff;
  border:0; border-radius:4px; cursor:pointer;
  font-size:20px; line-height:1;
  opacity:0; transition:opacity .25s, background .2s;
  z-index:3;
}
.hero-banner:hover .hero-nav{opacity:1;}
.hero-nav:hover{background:rgba(0,0,0,.5);}
.hero-nav.prev{left:18px;}
.hero-nav.next{right:18px;}
.hero-nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px;}

/* 指示点 */
.hero-dots{
  position:absolute; left:0; right:0; bottom:20px;
  display:flex; justify-content:center; gap:10px;
  z-index:3;
}
.hero-dots button{
  width:10px; height:10px; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.45);
  transition:background .2s, width .2s;
}
.hero-dots button.is-active{background:#fff;width:26px;border-radius:5px;}
.hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* 移动端：按钮缩一点、不压住图里的文字 */
@media(max-width:768px){
  .hero-nav{width:34px;height:46px;font-size:15px;opacity:.85;}
  .hero-nav.prev{left:8px;}
  .hero-nav.next{right:8px;}
  .hero-dots{bottom:10px;gap:7px;}
  .hero-dots button{width:7px;height:7px;}
  .hero-dots button.is-active{width:18px;}
}

/* ===== 按钮 ===== */
.btn{
  display:inline-block;padding:12px 30px;border-radius:var(--radius);
  font-size:15px;font-weight:500;transition:all .2s;border:1px solid transparent;
}

/* ===== 通用区块 ===== */
.section{padding:60px 0;}
.section-soft{background:var(--bg-soft);}
/* 相邻区块的保险丝。
   section 之间 padding 为 0 间距，若两个相邻区块同色会连成一整片、
   完全看不出分界（首页删掉「解决方案」后产品中心和应用案例就撞了）。
   这里给「白 + 浅灰」的交界补一条极细的分隔线，
   即使以后再加删区块导致同色相邻，也仍有一条线兜底。 */
.section + .section-soft,
.section-soft + .section:not(.section-soft){
  border-top:1px solid rgba(6,94,153,.07);
}
.section-head{text-align:center;margin-bottom:38px;}
.section-head h2{font-size:28px;margin:0 0 10px;color:#1a2b38;font-weight:700;}
.section-head .sub{font-size:14px;color:#8a9aa6;letter-spacing:1px;text-transform:uppercase;}
.section-head::after{
  content:"";display:block;width:44px;height:3px;background:var(--primary-light);
  margin:16px auto 0;border-radius:2px;
}
/* 左对齐版式（首页「关于鼎力」「新闻动态」两栏用）
   注意 ::after 的 margin 是 auto，光给父级 text-align:left 不够——
   块级伪元素不受 text-align 影响，必须显式把 auto 改成 0。 */
.section-head.is-left{text-align:left;}
.section-head.is-left::after{margin-left:0;margin-right:0;}

/* ===== 首页「关于 + 新闻」两栏 ===== */
/* grid 两列默认 stretch → 等高；每列 flex column + 正文 flex:1
   → 按钮沉底，左右两个按钮底边永远同一水平线，
     不管左栏文字几行、右栏几条新闻。 */
.home-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px;}
.home-col{display:flex;flex-direction:column;min-width:0;}
.home-col-body{flex:1 1 auto;min-width:0;}
/* 首行对齐：右侧 .sidebar-list a 有 padding:10px 0，
   把新闻文字往下推了 10px；左侧正文补同样偏移，两栏第一行字才齐。 */
.home-col-body.entry-content{padding-top:10px;}
/* 关于鼎力正文：两端对齐 + 首行缩进 2 个字。
   text-align:justify 让左右边缘都平齐；中文段落必须配 text-justify:inter-ideograph，
   Chrome 对中日的两端对齐默认按 inter-character 处理，加这行让行为更明确。
   text-indent:2em 随字号走（15px → 缩进 30px），正好两格汉字宽。 */
.home-col-body.entry-content p{
  margin:0;font-size:15px;line-height:1.8;color:#3a4652;
  text-align:justify;
  text-justify:inter-ideograph;
  text-indent:2em;
}
.home-col-foot{padding-top:22px;}
.home-col-foot .btn{margin:0;}

/* 新闻列表：标题左、日期右，单行省略 */
.home-col .sidebar-list{margin:0;padding:0;}
.home-col .sidebar-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.home-col .sidebar-list a{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:15px;color:#2b3a45;padding:10px 0;text-decoration:none;
}
.home-col .sidebar-list a:hover{color:var(--primary);padding-left:0;}
.home-col .sidebar-list .post-date{
  flex-shrink:0;font-size:13px;color:#9aabb8;padding:10px 0;white-space:nowrap;
}

/* ===== 产品/案例卡片 ===== */
.grid{display:grid;gap:22px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:all .25s;display:flex;flex-direction:column;
}
.card:hover{box-shadow:0 8px 26px rgba(6,94,153,.13);transform:translateY(-3px);border-color:#cfe3f0;}
.card-thumb{aspect-ratio:4/3;overflow:hidden;background:#f0f4f7;display:block;}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.card:hover .card-thumb img{transform:scale(1.05);}
.card-body{padding:16px;flex:1;display:flex;flex-direction:column;}
.card-title{font-size:16px;font-weight:600;margin:0 0 8px;line-height:1.5;}
.card-title a{color:#1a2b38;}
.card-title a:hover{color:var(--primary);}
.card-desc{font-size:13px;color:var(--text-light);line-height:1.7;margin:0;flex:1;}
.card-meta{font-size:12px;color:#9aabb8;margin-top:10px;}

/* ===== 新闻列表（横向 左图右文） ===== */
.news-list{display:flex;flex-direction:column;gap:0;}
.news-item{
  display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--border);
  transition:background .2s;
}
.news-item:first-child{padding-top:0;}
.news-item:last-child{border-bottom:0;}
.news-thumb{
  flex:0 0 220px;width:220px;align-self:flex-start;aspect-ratio:4/3;
  border-radius:var(--radius);overflow:hidden;background:#f0f4f7;display:block;
}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.news-item:hover .news-thumb img{transform:scale(1.05);}

/* 无图时退化为日期块 */
.news-thumb-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f2f8fc,#e3f0f9);
  border:1px solid #dbe9f3;color:var(--primary);line-height:1.2;
}
.news-thumb-date .d{font-size:34px;font-weight:700;letter-spacing:-1px;}
.news-thumb-date .m{font-size:13px;opacity:.85;margin-top:6px;letter-spacing:.5px;}

.news-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.news-title{font-size:17px;font-weight:600;line-height:1.55;margin:0 0 10px;}
.news-title a{color:#1a2b38;transition:color .2s;}
.news-item:hover .news-title a{color:var(--primary);}
.news-desc{
  font-size:13.5px;color:var(--text-light);line-height:1.8;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-meta{
  display:flex;align-items:center;gap:14px;font-size:12.5px;color:#9aabb8;margin-top:14px;
}
.news-cat{
  padding:2px 10px;background:var(--bg-soft);color:var(--primary);
  border-radius:10px;font-size:12px;
}
.news-more{color:var(--primary);font-size:13px;}
.news-more:hover{color:var(--primary-light);}

/* ===== 分类筛选 ===== */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:32px;}
.cat-tabs a{
  padding:8px 20px;border:1px solid var(--border);border-radius:20px;
  font-size:14px;color:#556;background:#fff;
}
.cat-tabs a:hover,.cat-tabs a.active{background:var(--primary);border-color:var(--primary);color:#fff;}

/* ===== 页面横幅 ===== */
.page-banner{
  background:linear-gradient(100deg,#04466f,#065e99 60%,#1683d8);
  color:#fff;padding:46px 0;
}
.page-banner h1{margin:0;font-size:30px;font-weight:700;}
.breadcrumb{font-size:13px;color:#bcd6e8;margin-top:8px;}
.breadcrumb a{color:#bcd6e8;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb span{margin:0 6px;opacity:.6;}
/* 末级（当前页）不可点，字色提亮以示「这是当前页」 */
.breadcrumb .crumb-current{font-style:normal;color:#fff;}

/* ===== 内容区 ===== */
.content-area{padding:48px 0 64px;}
/* minmax(0,1fr) 而非 1fr：1fr 默认 min-width:auto，长内容(nowrap/长URL/宽图)
   会把正文轨道撑到内容宽度，把 300px 侧栏挤出视口并被 overflow-x:hidden 裁掉。 */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;}
.layout-full{display:block;}

/* 侧边栏 */
.sidebar-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:22px;overflow:hidden;}
.sidebar-box h3{
  margin:0;padding:14px 18px;font-size:16px;background:var(--bg-soft);
  border-bottom:1px solid var(--border);color:var(--primary);
}
.sidebar-box .inner{padding:14px 18px;}
.sidebar-list{list-style:none;margin:0;padding:0;}
.sidebar-list li{border-bottom:1px dashed #eef2f5;}
.sidebar-list li:last-child{border-bottom:0;}
.sidebar-list a{display:block;padding:10px 0;font-size:14px;color:#445;}
.sidebar-list a:hover{color:var(--primary);padding-left:4px;}
.sidebar-list .post-date{font-size:12px;color:#9aabb8;display:block;}

/* 文章详情 */
.article{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px;}
.article-head{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:26px;}
.article-head h1{font-size:26px;margin:0 0 12px;line-height:1.45;color:#1a2b38;}
.article-meta{font-size:13px;color:#9aabb8;display:flex;gap:18px;flex-wrap:wrap;}
.article-meta a{color:#8a9aa6;}
.entry-content{font-size:15.5px;line-height:1.95;color:#3a4652;word-break:break-word;}
.entry-content h2{font-size:21px;margin:28px 0 14px;color:#1a2b38;padding-left:12px;border-left:4px solid var(--primary-light);}
.entry-content h3{font-size:18px;margin:24px 0 12px;color:#1a2b38;}
.entry-content img{border-radius:var(--radius);margin:10px auto;}
.entry-content ul,.entry-content ol{padding-left:24px;}
.entry-content blockquote{
  margin:18px 0;padding:14px 20px;background:var(--bg-soft);
  border-left:4px solid var(--primary-light);color:#556;font-size:14.5px;
}
.entry-content a{text-decoration:underline;}

/* 文章底部导航 */
.post-nav{display:flex;justify-content:space-between;gap:20px;margin-top:36px;padding-top:22px;border-top:1px solid var(--border);font-size:14px;flex-wrap:wrap;}
.post-nav a{max-width:48%;color:#556;}
.post-nav a:hover{color:var(--primary);}

/* 无图卡片的文字占位 */
.card-thumb-text{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#065e99,#1683d8);color:#fff;text-align:center;padding:16px;
}
.card-thumb-text span{font-size:22px;font-weight:700;letter-spacing:1px;opacity:.95;line-height:1.2;}
.card-thumb-text em{font-style:normal;font-size:13px;opacity:.85;margin-top:8px;line-height:1.5;}
.card:hover .card-thumb-text{filter:brightness(1.08);}

/* 分页 */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.pagination .page-numbers{
  display:inline-block;min-width:38px;height:38px;line-height:36px;text-align:center;
  padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:14px;color:#556;background:#fff;
}
.pagination .page-numbers:hover{background:var(--bg-soft);border-color:#cfe3f0;color:var(--primary);}
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff;}

/* 产品详情 */
.product-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:8px;}

/* ===== 优势区 ===== */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.feature{text-align:center;padding:28px 18px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);}
.feature .num{font-size:30px;font-weight:700;color:var(--primary);line-height:1.2;}
.feature .lbl{font-size:14px;color:#7a8a96;margin-top:6px;}

/* ===== 页脚 =====
 * 三段式：① 上排三列（品牌 / 四栏菜单 / 二维码）
 *         ② 联系方式横排　③ 版权 + 网站地图 + 备案号
 *
 * 为什么用三列并排、不做顶部整行品牌条：
 *   整行品牌条会把页脚高度从 ~440px 拉到 ~600px，
 *   而且四栏失去右侧挤压后被拉到每栏 290px，最长的链接只有 90px，
 *   中间大片空白。三列并排时四栏各 145px，正好贴住内容宽度，紧凑。
 *
 * 为什么联系方式提到第二段横排：
 *   「销售热线 / 0755-27219869」这组在 145px 的列里必然折两行，
 *   而其它三栏都是单行短链接，四栏底部就参差了。
 *   抽出来横排，四栏只剩链接，高度天然齐平。
 *
 * 高度控制：三段各自上下留白都比常规收紧一档
 * （上排 40/28、联系条 14、底排 15/16），整块控制在 440px 内。
 */
.site-footer{
  position:relative;
  /* 三段渐变：顶稍亮、中间最亮、底沉下去，比单色块有纵深 */
  background:linear-gradient(160deg,#0e2130 0%,#17374f 52%,#0b1c29 100%);
  color:#9fb3c2;font-size:14px;padding:0;
  overflow:hidden;
}
/* 顶沿一道细高光：和正文分界，但不用粗色块压顶 */
.site-footer::before{
  content:;position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,131,216,.7) 20%,rgba(22,131,216,.7) 80%,transparent);
}
/* 右上角一团极淡蓝光，避免大片深色发闷 */
.site-footer::after{
  content:;position:absolute;top:-170px;right:-130px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(22,131,216,.15),transparent 68%);
  pointer-events:none;
}
.site-footer > .wrap{position:relative;z-index:1;}

/* --- ① 上排三列 --- */
.ft-main{
  display:grid;
  /*
   * 220px 是实测值：品牌区「日本理光（RICOH）核心战略合作伙伴」13 个字
   * 在 12px 字号下约需 205px，给 200px 会折成两行，折行后品牌区比四栏高出一截，
   * 上排被撑胖。给 220px 刚好一行放完。
   */
  grid-template-columns:220px minmax(0,1fr) 168px;
  gap:36px;align-items:start;
  padding:40px 0 28px;
}

/* 品牌区：Logo 是深字 + 透明底，直接放深色页脚会糊掉，给一块白卡承托 */
.ft-brand{min-width:0;}
.ft-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:5px;padding:7px 11px;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
  transition:transform .2s;
}
.ft-logo:hover{transform:translateY(-1px);}
.ft-logo img{display:block;width:auto;height:auto;max-width:152px;max-height:44px;}
.ft-logo.is-txt{
  background:none;box-shadow:none;padding:0;color:#fff;
  font-size:19px;font-weight:700;letter-spacing:.5px;
}
.ft-slogan{
  margin:14px 0 0;font-size:10px;letter-spacing:1.2px;
  color:#7d97a8;line-height:1.6;font-weight:600;
}
/* 11.5px + 单行：13 个中文字在 220px 列里正好一行，折行会把上排撑高 */
.ft-desc{
  margin:5px 0 0;font-size:11.5px;line-height:1.6;color:#8ea4b4;
  white-space:nowrap;
}

/* --- 四栏菜单：夹在品牌与二维码之间，自然聚拢在左侧 --- */
.ft-nav{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  /* 与品牌区首行文字对齐：品牌 logo 高 44 + 上留白，标题基线基本齐平 */
  padding-top:2px;
}
.footer-col h4,
.ft-qr h4{
  position:relative;color:#fff;font-size:14px;font-weight:600;
  letter-spacing:.3px;margin:0 0 13px;padding-bottom:9px;
}
/* 标题下一条 20px 短横，比整行下划线轻，也比纯文字标题有结构 */
.footer-col h4::after,
.ft-qr h4::after{
  content:;position:absolute;left:0;bottom:0;width:20px;height:2px;
  background:var(--primary-light);border-radius:1px;
}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:8px;}
.footer-col li:last-child{margin-bottom:0;}
.footer-col a{
  display:inline-block;color:#9fb3c2;font-size:13px;line-height:1.55;
  transition:color .18s,transform .18s;
}
.footer-col a:hover{color:#fff;transform:translateX(2px);}

/* 第四栏三个电话：标签在上、号码在下，单行排不开，改上下两行更整齐 */
.ft-tel-list li{margin-bottom:10px;}
.ft-tel-list .ft-k{
  display:block;font-size:10.5px;color:#6d8798;
  letter-spacing:.6px;margin-bottom:1px;
}
.ft-tel-list a{color:#dbe7ef;font-size:12.5px;font-variant-numeric:tabular-nums;}
.ft-tel-list a:hover{color:#fff;transform:none;}

/* --- 二维码（右列） --- */
.ft-qr{min-width:0;}
.ft-qr-list{display:flex;gap:9px;}
.ft-qr-item{margin:0;text-align:center;}
.ft-qr-box{
  display:flex;width:72px;height:72px;padding:4px;
  background:#fff;border-radius:5px;
  box-shadow:0 5px 14px rgba(0,0,0,.24);
  transition:transform .2s,box-shadow .2s;
}
.ft-qr-box img{width:100%;height:100%;object-fit:contain;border-radius:2px;}
.ft-qr-item:hover .ft-qr-box{transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.3);}
.ft-qr-item figcaption{margin-top:5px;font-size:10.5px;color:#7d97a8;line-height:1.4;}
.ft-qr-hint{margin:9px 0 0;font-size:11px;color:#6d8798;line-height:1.5;}

/* --- ② 联系方式横排 --- */
.ft-bar{
  display:flex;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:14px 0;
}
.ft-bar-item{
  display:flex;align-items:baseline;gap:8px;
  padding:0 24px;font-size:13px;line-height:1.6;
  border-left:1px solid rgba(255,255,255,.09);
}
.ft-bar-item:first-child{border-left:0;padding-left:0;}
.ft-bar .ft-k{color:#6d8798;font-size:12px;white-space:nowrap;}
.ft-bar a,.ft-bar-item > span:last-child{color:#a9bcc9;}
.ft-bar a:hover{color:#fff;}

/* --- ③ 底排 --- */
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;
  padding:15px 0 16px;font-size:12.5px;color:#5f7889;
}
.footer-bottom a{color:#7d94a4;}
.footer-bottom a:hover{color:#fff;}
.ft-legal{display:flex;align-items:center;gap:10px;}
/* 分隔点：3px 圆点比竖线 | 轻，深色底上不抢眼 */
.ft-dot{
  display:inline-block;width:3px;height:3px;border-radius:50%;
  background:#3d5b70;flex:0 0 auto;
}


/* ============================================================
   网站地图页（page-sitemap.php）
   取向：一屏内可扫完全站结构，不堆花活。
   —— 多栏瀑布（CSS columns）而不是等高网格：栏目条目数差很大
      （产品 36 条 / 联系 4 条），等高网格会留下大片空洞。
   ============================================================ */
.sitemap-area{background:var(--bg-soft);padding:44px 0 64px;}
.sm-lead{
  margin:0 0 26px;font-size:14px;color:#5a6b78;line-height:1.85;
  max-width:760px;
}
.sm-xml{white-space:nowrap;}
.sm-grid{
  columns:3;column-gap:26px;
}
.sm-block{
  /* break-inside 防止一块被拆到两栏去，拆开就完全看不出分组了 */
  break-inside:avoid;-webkit-column-break-inside:avoid;
  background:#fff;border:1px solid var(--border);border-radius:6px;
  padding:20px 22px 22px;margin:0 0 24px;
}
.sm-block h2{
  margin:0 0 14px;padding-bottom:11px;font-size:16px;font-weight:600;
  color:#1d2a33;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.sm-block h2 a{color:#1d2a33;}
.sm-block h2 a:hover{color:var(--primary);}
/* 数量角标：让人先知道这块有多大，再决定要不要展开看 */
.sm-count{
  display:inline-block;min-width:22px;padding:1px 7px;
  background:var(--bg-soft);border-radius:10px;
  font-size:11.5px;font-weight:400;color:#8296a5;line-height:1.7;
  text-align:center;
}
.sm-block ul{list-style:none;margin:0;padding:0;}
.sm-block li{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:5px 0;font-size:13.5px;line-height:1.65;
}
.sm-block li a{color:#46596a;}
.sm-block li a:hover{color:var(--primary);}
/* 分类条目与后续条目之间加一道浅线，视觉上把两层分开 */
.sm-sub{margin-bottom:10px!important;padding-bottom:6px!important;border-bottom:1px dashed var(--border);}
.sm-n{color:#a3b3bf;font-size:12px;flex:0 0 auto;}
.sm-k{color:#8ea0ad;font-size:12.5px;flex:0 0 auto;}
.sm-more a{color:var(--primary);font-size:13px;}

/* ============================================================
   产品详情页（single-product.php）
   设计取向：工业设备站点的留白式排版
   —— 不用深色横幅压顶、不靠色块堆砌，靠「大图 + 呼吸空间」撑气场。
   ============================================================ */

/* 面包屑条：顶部横幅沿用主题原有 .page-banner（深蓝渐变），
   与原站既有样式一致，无需额外覆盖。 */

/* ===== 主视觉 ===== */
.pd-hero{background:#fff;padding:56px 0 64px;}
.pd-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:64px;align-items:center;
}
/* 图片容器不铺底色：产品图本身自带白底/渐变底，再套一层 #f7fafc 会形成
   「灰套白」的双层边框，显得小气。改为完全透明，让图片直接坐在白色页面上，
   边界只靠图片自身的底色过渡。 */
.pd-hero-media{
  background:transparent;border-radius:0;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  padding:0;min-height:340px;
}
.pd-hero-media img{
  width:100%;height:auto;max-height:560px;object-fit:contain;display:block;
}
.pd-hero-empty{color:#b6c4cf;font-size:14px;}

/* 标题已移到顶部横幅，右栏以「加大号简介」起手 */
.pd-intro{
  font-size:19px;line-height:1.75;color:#22323f;
  margin:0 0 34px;padding-left:18px;border-left:3px solid var(--primary);
  font-weight:400;
}

/* 关键参数：2×2 数据格，无边框靠留白分隔 */
.pd-keys{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 32px;margin-bottom:36px;
  padding-top:26px;border-top:1px solid var(--border);
}
.pd-key-k{font-size:12.5px;color:#9aabb8;letter-spacing:.5px;margin-bottom:7px;}
.pd-key-v{font-size:19px;color:#152430;font-weight:600;line-height:1.4;word-break:break-word;}

/* 按钮 */
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;}
.pd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;font-size:15px;font-weight:500;border-radius:4px;
  transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
}
.pd-btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary);}
.pd-btn-primary:hover{background:#05507f;border-color:#05507f;color:#fff;}
.pd-btn-ghost{background:#fff;color:var(--primary);border:1px solid #cfe0ed;}
.pd-btn-ghost:hover{border-color:var(--primary);background:#f7fbfe;color:var(--primary);}
.pd-btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);}
.pd-btn-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}

/* ===== 区块通用 ===== */
.pd-sec{padding:72px 0;}
.pd-sec-soft{background:var(--bg-soft);border-top:1px solid rgba(6,94,153,.07);}
.pd-head{margin-bottom:40px;}
.pd-head-en{
  display:block;font-size:12.5px;letter-spacing:2px;
  color:#a9bac6;margin-bottom:10px;
}
.pd-head h2{
  font-size:26px;margin:0;color:#152430;font-weight:700;
  padding-bottom:16px;position:relative;
}
.pd-head h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:40px;height:3px;background:var(--primary);border-radius:2px;
}

/* ===== 产品详情：纵向堆叠的长图流 =====
   内容来自编辑框正文，按顺序渲染：图片 / 视频 / 文字 / 表格。
   —— 不加滚动容器（不出现内层滚动条）
   —— 不裁切、不设固定高度、不限定图片数量
   —— 图片高度 auto，宽度 100%，宽度不同也占比相同
   内容多长页面就多长，长度完全由编辑在编辑框里放多少决定。 */
.pd-detail{
  max-width:1200px;margin:0 auto;
  display:block;            /* 块级流式排列，逐张往下排 */
  width:100%;
}
.pd-detail img{
  display:block;
  width:100%;               /* 统一铺满内容区，宽度参差的图也对齐左右边 */
  height:auto;              /* 等比缩放，不拉伸 */
  max-width:100%;
  margin:0;                 /* 图与图之间无缝相接：
                               若后台传的是同一张长图的连续切片，留缝会变成白色横线 */
  border:0;
  border-radius:0;
}

/* 正文里的文字段落，正常留白 */
.pd-detail p{
  margin:0 0 1.1em;
  font-size:15.5px;line-height:1.95;color:#3b4a56;
}
.pd-detail > *:first-child{margin-top:0;}
.pd-detail > *:last-child{margin-bottom:0;}

/* 编辑框里的每张图通常被包在独立 <p> 里（<p style="text-align:center"><img></p>），
   wpautop 也会补段落。不把段落外边距归零，图与图之间会出现 15px 白缝
   —— 连续切片的长图就会裂成一条条。
   .is-fig 由 PHP 直接写入（见 inc-product-content.php），不依赖 :has() 支持度。 */
.pd-detail p.is-fig,
.pd-detail p:has(> img){
  margin:0;
  line-height:0;            /* 消除行内基线留出的额外空隙 */
}
.pd-detail p.is-fig > img,
.pd-detail p > img:only-child{margin:0;}

/* ===== 规格参数：左右两列 ===== */
.pd-specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 72px;
}
.pd-spec-list{margin:0;padding:0;}
/*
 * align-items 从 baseline 改为 start ★
 *
 * 原来是 baseline —— 基线位置由字体的 ascent/descent 决定，Chrome 与 Safari
 *（WebKit）在同一字号下算出的小数位不同（实测每行差 0.4px）。
 * 这个差值会随行数累积：规格表 11 行 → 累计 4.5px，
 * 整块把下面的页脚推下去 5px，跨浏览器截图一比对就是「页脚错位」。
 *
 * 改成 start 后两列按顶边对齐，不再依赖字体度量，两引擎完全一致。
 * 视觉效果差别极小（dt 14px 与 dd 14.5px 顶边对齐 vs 基线对齐，差不到 1px），
 * 但换来的是「换任何字体、任何引擎都不漂移」。
 */
.pd-spec-row{
  display:grid;grid-template-columns:132px minmax(0,1fr);
  gap:18px;padding:15px 0;border-bottom:1px solid #e8eff4;
  align-items:flex-start;align-items:start;
}
.pd-spec-row dt{
  margin:0;font-size:14px;color:#7c8d9a;font-weight:400;
  /* 与 dd 同高，避免 dt 单行时基线下方留白不一致 */
  line-height:1.7;
}
.pd-spec-row dd{
  margin:0;font-size:14.5px;color:#22323f;font-weight:500;
  line-height:1.7;word-break:break-word;
}
.pd-spec-note{
  margin:28px 0 0;font-size:13px;color:#9aabb8;line-height:1.8;
}

/* ===== 正文补充区：编辑框里新增的文字 / 视频 / 表格 =====
   这一块是「兜底容器」，编辑写什么就长什么样，所以只给基础排版基线，
   不做卡片化、不加装饰。关键是：
   —— 图片按容器宽等比缩放（编辑常直接粘大图）
   —— 视频 / iframe 保持 16:9 且不溢出（微博/B站/YouTube 的 embed 宽度写死很容易撑破）
   —— 表格横向可滚，不撕裂页面（规格类表格动辄 6 列）
*/
.pd-detail{
  max-width:1200px;margin:0 auto;
  font-size:15.5px;line-height:1.95;color:#3b4a56;
}
.pd-detail > *:first-child{margin-top:0;}
.pd-detail > *:last-child{margin-bottom:0;}
.pd-detail h2,
.pd-detail h3,
.pd-detail h4{
  color:#152430;font-weight:700;line-height:1.4;
  margin:1.8em 0 .8em;
}
.pd-detail h2{font-size:22px;}
.pd-detail h3{font-size:19px;}
.pd-detail h4{font-size:17px;}
.pd-detail ul,
.pd-detail ol{margin:0 0 1.1em;padding-left:1.5em;}
.pd-detail li{margin:.4em 0;}
.pd-detail a{color:var(--primary);text-decoration:underline;}
.pd-detail a:hover{opacity:.85;}
.pd-detail strong{color:#22323f;font-weight:700;}

/* 图片：编辑直接粘进来的图宽度参差，统一按容器宽等比缩放 */
.pd-detail img{
  display:block;width:auto;max-width:100%;height:auto;
  margin:18px auto;border-radius:2px;
}
/* 图片段落不要额外外边距，避免「图上下各空一行」 */
.pd-detail p:has(> img){margin:0;}

/* 视频：原生 <video> 与 iframe 都锁 16:9，且铺满容器 */
.pd-detail video{
  display:block;width:100%;height:auto;max-width:100%;
  margin:22px 0;background:#000;border-radius:2px;
}
.pd-detail iframe{
  display:block;width:100%;aspect-ratio:16/9;height:auto;
  max-width:100%;margin:22px 0;border:0;border-radius:2px;
}
/* 视频播放器容器：B站/腾讯/优酷等，锁 16:9 由容器负责，
   iframe 铺满容器即可 —— 单独给 iframe 写 aspect-ratio 时，
   部分站点的播放器会自带高度，两边打架导致底部被切。 */
.pd-detail .pd-video{
  position:relative;width:100%;aspect-ratio:16/9;
  margin:22px 0;background:#000;border-radius:2px;overflow:hidden;
}
.pd-detail .pd-video iframe{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;border:0;display:block;
}
/* wp 的 embed 包裹层（oEmbed 会生成 .wp-block-embed / .wp-embedded-content） */
.pd-detail .wp-block-embed,
.pd-detail .wp-block-embed__wrapper{
  margin:22px 0;max-width:100%;
}
.pd-detail .wp-block-embed iframe{margin:0;}
.pd-detail .wp-block-embed figcaption{
  margin-top:10px;font-size:13px;color:#8b9ba8;text-align:center;
}

/* 表格：宽表在本块内横向滚动，不撑破页面 */
.pd-detail table{
  width:100%;border-collapse:collapse;margin:22px 0;
  font-size:14.5px;
}
.pd-detail th,
.pd-detail td{
  padding:11px 14px;border:1px solid #e2eaf0;
  text-align:left;vertical-align:top;line-height:1.75;
}
.pd-detail th{background:#f4f8fb;color:#22323f;font-weight:600;}
/* 外面套一层滚动容器：模板里用 JS 也会兜一层，这里直接用 CSS 兜 table 自身 */
.pd-detail .pd-table-wrap{
  margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* iOS 上滚动容器必须有 max-width，否则会被内容撑开而不产生滚动 */
  max-width:100%;
}
.pd-detail .pd-table-wrap table{margin:0;min-width:100%;}
/* 窄屏下表格不压扁：给单元格一个最小宽度，让宽表在容器内横向滚动。
   6 列表格挤进 350px 时每列只剩 58px，中文会断成一字一行，必须靠滚动。 */
.pd-detail .pd-table-wrap table th,
.pd-detail .pd-table-wrap table td{
  min-width:96px;white-space:normal;
}

/* 引用、分割线等基础元素 */
.pd-detail blockquote{
  margin:22px 0;padding:4px 0 4px 18px;
  border-left:3px solid var(--primary);
  color:#5a6b78;background:#f7fafc;
}
.pd-detail hr{
  border:0;border-top:1px solid #e6eef4;margin:34px 0;
}

/* ===== 咨询条 ===== */
.pd-cta{
  background:linear-gradient(100deg,#0a4a75,#065e99 62%,#0e6ea8);
  color:#fff;padding:52px 0;
}
.pd-cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:36px;flex-wrap:wrap;
}
.pd-cta-t{font-size:22px;font-weight:600;margin-bottom:9px;letter-spacing:.2px;}
.pd-cta-s{font-size:14.5px;color:rgba(255,255,255,.78);}
.pd-cta-act{display:flex;gap:12px;flex-wrap:wrap;}

/* ============================================================
   产品详情页响应式
   ============================================================ */
@media(max-width:1024px){
  .pd-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .pd-hero{padding:40px 0 48px;}
  .pd-hero-media{min-height:0;padding:0;}
  .pd-hero-media img{max-height:420px;}
  .pd-specs{grid-template-columns:minmax(0,1fr);gap:0;}
  .pd-sec{padding:56px 0;}
}
@media(max-width:768px){
  .pd-hero{padding:32px 0 40px;}
  .pd-intro{font-size:16.5px;line-height:1.7;margin-bottom:26px;padding-left:14px;}
  .pd-keys{gap:20px;margin-bottom:28px;padding-top:22px;}
  .pd-key-v{font-size:17px;}
  .pd-btn{flex:1 1 100%;padding:13px 22px;}
  .pd-actions{gap:10px;}
  .pd-sec{padding:44px 0;}
  .pd-head{margin-bottom:30px;}
  .pd-head h2{font-size:22px;}
  .pd-spec-row{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:13px 0;}
  .pd-spec-row dt,.pd-spec-row dd{font-size:13.5px;}
  .pd-cta{padding:38px 0;}
  .pd-cta-t{font-size:18px;}
  .pd-cta-act{width:100%;}
}

/* ===== 响应式 ===== */
/* 首页「关于 + 新闻」窄屏改单列。
   注意必须放在 .home-cols 基础规则之后，否则会被覆盖。 */
@media(max-width:900px){
  .home-cols{grid-template-columns:minmax(0,1fr);gap:36px;}
  /* 单列后两栏上下排列，不再需要靠 padding 对齐首行 */
  .home-col-body.entry-content{padding-top:0;}
}
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(3,1fr);}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .layout{grid-template-columns:1fr;}
  .news-thumb{flex-basis:200px;width:200px;}
  /* 页脚：中间屏宽下品牌列与二维码列收窄，菜单仍保持四栏 */
  .ft-main{grid-template-columns:172px minmax(0,1fr) 152px;gap:26px;padding:34px 0 24px;}
  .ft-nav{gap:16px;}
  .ft-qr-box{width:68px;height:68px;}
  .ft-qr-list{gap:8px;}
  .ft-bar-item{padding:0 16px;}
}

/*
 * 768 档：三列放不下了。728px 扣掉品牌 172 + 二维码 152 + 两个 26px 间隙，
 * 四栏只剩 88px/栏，「0755-27219869」会被折成两行。
 * 所以改成两行：第一行「品牌 | 二维码」各占一头，第二行菜单满宽四栏。
 * 菜单因此拿到 728/4 = 182px/栏，比三列时舒服得多，
 * 只多一行高度（品牌行 88px），比挤成两行文字划算。
 */
@media(max-width:900px){
  .ft-main{
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px 24px;padding:30px 0 22px;
  }
  .ft-brand{grid-column:1;grid-row:1;}
  .ft-qr{grid-column:2;grid-row:1;text-align:right;}
  .ft-qr-list{justify-content:flex-end;}
  .ft-qr h4{text-align:right;}
  .ft-qr h4::after{left:auto;right:0;}
  .ft-qr-hint{text-align:right;}
  /* 菜单跨满两列，独占第二行 */
  .ft-nav{grid-column:1 / -1;grid-row:2;padding-top:16px;gap:20px;
    border-top:1px solid rgba(255,255,255,.08);}
  .ft-slogan{margin-top:12px;}
}
@media(max-width:768px){
  .nav-toggle{display:block;}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.12);padding:6px 0 12px;max-height:70vh;overflow:auto;
    align-self:auto;
    /* 桌面端为了贴横幅上沿加的负 margin，移动端 absolute 定位下必须清掉 */
    margin-top:0;margin-bottom:0;
  }
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column;gap:0;align-self:auto;}
  .main-nav > ul > li{display:block;}
  /* 竖排时去掉底部细线指示器，改用左侧竖条标当前项 */
  .main-nav > ul > li > a{
    padding:12px 20px;border-radius:0;border-bottom:1px solid #f0f4f7;font-size:15px;
  }
  .main-nav > ul > li > a::after{display:none;}
  .main-nav > ul > li.current-menu-item > a,
  .main-nav > ul > li.current_page_item > a{
    background:var(--bg-soft);box-shadow:inset 3px 0 0 var(--primary);
  }
  /* 移动端下拉改为文档流内展开：必须重置 left/transform/width，否则会偏移出屏 */
  .main-nav .sub-menu{
    position:static;display:block;box-shadow:none;border-top:0;padding:0 0 6px;
    width:auto;left:auto;transform:none;background:var(--bg-soft);
  }
  .main-nav .sub-menu a{padding:10px 6px 10px 34px;font-size:13.5px;text-align:left;}
  /* 小屏不压缩头部高度，避免 Logo 跳动。
     高度同样固定（--hdr-h），吸顶前后不变，否则仍会触发滚动锚定抖动。 */
  .site-header{--hdr-h:76px;}
  .header-inner{padding:12px 0;position:relative;}
  .logo-text .name{font-size:19px;}
  .site-logo .custom-logo{max-height:44px;max-width:168px;}
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}
  .section{padding:40px 0;}
  .article{padding:20px;}
  .article-head h1{font-size:21px;}
  .entry-content{font-size:15px;}
  .page-banner{padding:32px 0;}
  .page-banner h1{font-size:23px;}
  /*
   * 页脚 768 档：沿用 900 档的「品牌 | 二维码」+「菜单满宽」两行结构，
   * 只做尺寸微调。菜单四栏各 182px，容纳「0755-27219869」绰绰有余。
   */
  .ft-logo img{max-width:126px;max-height:38px;}
  .ft-slogan{font-size:9.5px;letter-spacing:1px;margin-top:10px;}
  .ft-desc{font-size:11.5px;white-space:normal;}
  .footer-col h4,.ft-qr h4{font-size:13px;margin-bottom:11px;padding-bottom:8px;}
  .footer-col a{font-size:12.5px;}
  .ft-qr-box{width:62px;height:62px;}
  .ft-qr-list{gap:7px;}
  .ft-qr-hint{display:none;}
  .ft-bar{flex-direction:column;gap:0;padding:0;}
  .ft-bar-item{
    padding:11px 0;border-left:0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .ft-bar-item:last-child{border-bottom:0;}
  .footer-bottom{
    flex-direction:column;align-items:flex-start;gap:9px;padding:16px 0;
  }
  /* 新闻列表：小屏改为上图下文，图变宽 */
  .news-item{gap:0;flex-direction:column;padding:20px 0;}
  .news-thumb{flex-basis:auto;width:100%;aspect-ratio:16/9;}
  /* 无图时隐藏日期块：下方 meta 已有日期，避免重复占高 */
  .news-thumb-date{display:none;}
  .news-title{font-size:16px;margin-bottom:8px;}
  .news-desc{-webkit-line-clamp:2;}
}
@media(max-width:480px){
  /* minmax(0,1fr) 而不是 1fr：1fr 的最小值是 auto，里面若有 nowrap 长文本
     会把整列撑得比视口还宽（首页「关于+新闻」区块踩过这个坑） */
  .grid-4,.grid-3,.grid-2{grid-template-columns:minmax(0,1fr);}
  /*
   * 数据卡片在手机上必须保持 2×2，不能退成单列 ★
   *
   * 原来这里是 `grid-template-columns:1fr` —— 四个数字各占一行。
   * 实测(iPhone 390×844)：单卡 125px + 24px 间隙 → 网格高 572.8px、
   * 整个区块 646.8px，占掉 844px 视口的 77%，再加上顶部页头，
   * 用户一进首页看到的全是四张空白卡片，一个产品都没露出来。
   *
   * 2×2 后高度约 300px，一屏内能同时看到数据与下方产品区。
   * 卡片内边距和数字字号同步收一档，保证「36000㎡」在 165px 列里不折行。
   */
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .feature{padding:20px 10px;}
  .feature .num{font-size:23px;}
  .feature .lbl{font-size:12.5px;margin-top:4px;}
  .site-logo .custom-logo{max-height:38px;max-width:145px;}
}
/* ============================================================
   联系我们页面（page-contact.php）
   设计取向：简单大气 —— 靠留白与字号层级建立秩序，
   不用重边框、不用阴影堆叠，色块只出现在两处（卡片悬停、底部行动条）。
   ============================================================ */

/* ===== ② 四条主联系通道 ===== */
.ct-channels{background:#fff;padding:64px 0 20px;}
.ct-ch-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--border);
}
.ct-ch{
  padding:34px 28px 32px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transition:background .22s ease;
}
.ct-ch:first-child{border-left:1px solid var(--border);}
.ct-ch:hover{background:var(--bg-soft);}

.ct-ch-k{
  display:block;font-size:11.5px;letter-spacing:1.6px;
  color:#aebecb;margin-bottom:12px;
}
.ct-ch-t{
  font-size:17px;font-weight:600;color:#152430;
  margin:0 0 8px;line-height:1.4;
}
.ct-ch-d{
  font-size:13.5px;color:#8496a3;margin:0 0 20px;
  line-height:1.6;min-height:22px;
}
/* 主号码：整块最大的字，一眼可拨 */
.ct-ch-num{
  display:block;font-size:21px;font-weight:600;color:var(--primary);
  letter-spacing:.3px;line-height:1.3;white-space:nowrap;
}
.ct-ch-num:hover{color:var(--primary-light);}
.ct-ch-sub{
  display:block;margin-top:6px;font-size:12.5px;color:#9aabb8;
}
.ct-ch-sub:hover{color:var(--primary);}

/* ===== ③ 公司信息 + 到访说明 ===== */
.ct-info{background:#fff;padding:64px 0 72px;}
.ct-info-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:80px;align-items:start;
}

.ct-head{margin-bottom:26px;}
.ct-head-en{
  display:block;font-size:11.5px;letter-spacing:1.8px;
  color:#aebecb;margin-bottom:9px;
}
.ct-head h2{
  font-size:22px;margin:0;color:#152430;font-weight:700;
  padding-bottom:14px;position:relative;
}
.ct-head h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:36px;height:3px;background:var(--primary);border-radius:2px;
}

/* 信息行：左标签右内容，细线分隔 */
.ct-rows{margin:0;padding:0;}
.ct-row{
  display:grid;grid-template-columns:100px minmax(0,1fr);
  gap:20px;padding:15px 0;border-bottom:1px solid #eef4f8;
  /* start 而非 baseline：理由同 .pd-spec-row，消除 WebKit 与 Chrome 的基线小数差 */
  align-items:flex-start;align-items:start;
}
.ct-row:last-child{border-bottom:0;}
.ct-row dt{margin:0;font-size:13.5px;color:#8496a3;line-height:1.7;}
.ct-row dd{
  margin:0;font-size:14.5px;color:#22323f;font-weight:500;
  line-height:1.7;word-break:break-word;
}
.ct-row dd a{color:var(--primary);}

/* 到访三条：左侧竖线 + 说明文字 */
.ct-visit{list-style:none;margin:0;padding:0;}
.ct-visit li{
  position:relative;padding:0 0 22px 18px;
  border-left:2px solid #e3eef5;
}
.ct-visit li:last-child{padding-bottom:0;}
.ct-visit li::before{
  content:"";position:absolute;left:-2px;top:6px;
  width:2px;height:14px;background:var(--primary);
}
.ct-visit strong{
  display:block;font-size:14.5px;color:#152430;
  font-weight:600;margin-bottom:5px;
}
.ct-visit span{
  display:block;font-size:13.5px;color:#7c8d9a;line-height:1.75;
}

/* ===== ④ 行动条 ===== */
.ct-cta{
  background:linear-gradient(100deg,#0a4a75,#065e99 62%,#0e6ea8);
  color:#fff;padding:48px 0;
}
.ct-cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:36px;flex-wrap:wrap;
}
.ct-cta-t{font-size:21px;font-weight:600;margin-bottom:8px;letter-spacing:.2px;}
.ct-cta-s{font-size:14px;color:rgba(255,255,255,.78);}
.ct-cta-act{display:flex;gap:12px;flex-wrap:wrap;}

.ct-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;font-size:15px;font-weight:500;border-radius:4px;
  transition:background .2s,border-color .2s,color .2s;white-space:nowrap;
}
.ct-btn-primary{background:#fff;color:var(--primary-dark);border:1px solid #fff;}
.ct-btn-primary:hover{background:#eaf4fb;border-color:#eaf4fb;color:var(--primary-dark);}
.ct-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);}
.ct-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}

/* ===== 联系我们页响应式 ===== */
@media(max-width:1024px){
  .ct-ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ct-ch:nth-child(1){border-left:1px solid var(--border);}
  .ct-ch:nth-child(2){border-right:1px solid var(--border);}
  .ct-info-grid{grid-template-columns:minmax(0,1fr);gap:56px;}
  .ct-info{padding:52px 0 60px;}
}
@media(max-width:768px){
  .ct-channels{padding:44px 0 12px;}
  .ct-ch-grid{grid-template-columns:minmax(0,1fr);}
  .ct-ch{
    border-left:1px solid var(--border);border-right:1px solid var(--border);
    padding:26px 22px 24px;
  }
  .ct-ch-d{min-height:0;}
  .ct-ch-num{font-size:20px;}
  .ct-info{padding:40px 0 48px;}
  .ct-info-grid{gap:40px;}
  .ct-head h2{font-size:19px;}
  .ct-row{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:13px 0;}
  .ct-row dt,.ct-row dd{font-size:13.5px;}
  .ct-cta{padding:36px 0;}
  .ct-cta-t{font-size:18px;}
  .ct-cta-act{width:100%;}
  .ct-btn{flex:1 1 100%;padding:12px 20px;}
}

/* ============================================================
   关于我们页面（page-about.php）
   与联系页共用一套视觉语言：大留白、无重边框、字号分层。
   与小横幅（.page-banner）无关，横幅保持全站统一。

   图片编号来自正文顺序，最多 10 张，模板按语义分组：
   开篇 1 张航拍通栏 → 应用领域 1 张展厅 → 厂房 2 张宽图 → 办公 6 张三列。
   ============================================================ */

/* ===== ② 品牌开篇 ===== */
.ab-intro{background:#fff;padding:76px 0 0;}
/*
 * 文字区宽度收到 1160px，与下方 .ab-stats 的横线等宽。
 *
 * 上一版是 860px（居中小栏），视觉上比它下面那条 1160px 的分隔线窄 300px，
 * 读起来像「内容缩在里面」，下方线条反而更宽，重心不稳。
 * 1160 是 .wrap 1200 减去左右各 20px padding 后的内容宽 ——
 * 统计条正好是「内容宽 + 上下边框」，所以文字与线条两端严格对齐。
 *
 * 注意：这里不能直接写 1160px，因为 .wrap 本身有 padding:0 20px，
 * 860 时靠 max-width 居中即可；改成 1160 后也仍然居中，
 * 但在 1024 以下要放开（见响应式），否则窄屏会溢出。
 */
.ab-intro-inner{max-width:1160px;margin:0 auto;text-align:center;}
.ab-k{
  display:block;font-size:11.5px;letter-spacing:2.4px;
  color:#aebecb;margin-bottom:22px;
}
/* 引导句：整页唯一的粗体大字，用来一句话说清「我们是谁」 */
.ab-lead{
  font-size:25px;line-height:1.72;color:#12212c;font-weight:700;
  margin:0 0 34px;letter-spacing:.2px;
}
.ab-body{text-align:left;}
.ab-body p{
  font-size:14.5px;line-height:2;color:#5b6f7e;
  margin:0 0 14px;
}
.ab-body p:last-child{margin-bottom:0;}

/* 关键数据：四格，中间用细线分隔，不用卡片 */
.ab-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:56px 0 0;padding:34px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.ab-stat{
  text-align:center;padding:0 16px;
  border-right:1px solid #eef4f8;
}
.ab-stat:last-child{border-right:0;}
.ab-num{
  font-size:33px;font-weight:700;color:var(--primary);
  line-height:1.15;letter-spacing:-.5px;
}
.ab-num small{font-size:15px;font-weight:600;margin-left:2px;letter-spacing:0;}
.ab-lab{
  display:block;font-size:12.5px;color:#8496a3;
  margin-top:9px;letter-spacing:.2px;
}

/* ===== ③ 总部航拍通栏 ===== */
.ab-hero{padding:0;background:#fff;}
/*
 * 通栏按固定比例开窗 + cover 裁切。
 * 若写成 width:100% + height:auto + max-height:600px，
 * 宽度被拉满、高度被上限截断，图会纵向压扁（母图 1.85:1 被压成 2.4:1）。
 *
 * ⚠ aspect-ratio 配 max-height 时，**高度会反向决定宽度**：
 *   21/9 的盒子一旦被 max-height:600px 锁住高度，宽度就自动算成
 *   600 × 2.3333 = 1400px，而父容器是 1440px，于是右侧空出 40px 白边。
 *   （原图 2752×1484 宽度绰绰有余，不是图不够宽。）
 *   所以必须显式 width:100%，让宽度吃满、高度按比例算出来。
 *   同时把 max-height 交给 height 上限去管：宽度撑满后 1440/2.3333 = 617px，
 *   超过 600 的部分用 max-height 收，此时由 cover 裁切，不再是留白。
 */
.ab-hero-fig{
  position:relative;margin:0;overflow:hidden;
  width:100%;aspect-ratio:21/9;max-height:600px;
}
.ab-hero-fig img{
  width:100%;height:100%;display:block;object-fit:cover;
}
/* 通栏图左下角地名标注：半透明深色条，不挡主体画面 */
.ab-hero-fig span{
  position:absolute;left:0;bottom:0;
  padding:14px 26px;font-size:13px;color:#fff;
  background:rgba(10,28,42,.55);
  /* Safari 到 17 仍只认 -webkit- 前缀，仅写标准属性在 Safari 上等于没写（模糊失效） */
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);letter-spacing:.6px;
}

/* ===== 共用区块标题 ===== */
.ab-head{margin-bottom:28px;}
.ab-head-en{
  display:block;font-size:11.5px;letter-spacing:1.8px;
  color:#aebecb;margin-bottom:9px;
}
.ab-head h2{
  font-size:23px;margin:0;color:#152430;font-weight:700;
  padding-bottom:14px;position:relative;
}
.ab-head h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:36px;height:3px;background:var(--primary);border-radius:2px;
}

/* ===== ④ 产品应用领域 ===== */
.ab-apps{background:var(--bg-soft);padding:78px 0;border-top:1px solid rgba(6,94,153,.06);}
.ab-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:64px;align-items:center;
}
.ab-p{
  font-size:14.5px;line-height:2;color:#5b6f7e;
  margin:0 0 24px;
}
/* 行业标签：浅底胶囊，密排，视觉上替代一大段罗列文字 */
.ab-tags{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.ab-tag{
  font-size:12.5px;color:#4a6070;
  background:#fff;border:1px solid #e2ebf2;
  padding:6px 13px;border-radius:2px;line-height:1.4;
}
.ab-apps-fig{margin:0;}
/* 图片不做圆角与阴影，只保留一条极细边框，避免「卡片化」显得花 */
.ab-frame{
  position:relative;margin:0;border:1px solid #e7eef4;overflow:hidden;
  background:#fff;
}
.ab-frame img{width:100%;height:auto;display:block;}
.ab-frame span{
  position:absolute;left:0;bottom:0;
  padding:10px 18px;font-size:12px;color:#fff;
  background:rgba(10,28,42,.5);
}

/* ===== ⑤ 厂区实景 ===== */
.ab-fac{background:#fff;padding:78px 0;}
/* 两张宽图：等分，间距 3px 以内连成一排 */
.ab-wide{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;margin-bottom:20px;
}
/* 六张三列：3:2 固定比例裁切，行列齐整 */
.ab-grid3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.ab-ph{
  position:relative;margin:0;overflow:hidden;
  background:var(--bg-soft);aspect-ratio:3/2;
}
.ab-ph img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  transition:transform .55s ease;
}
.ab-ph:hover img{transform:scale(1.04);}
/* 角标：默认淡出，悬停浮现，静止时不干扰画面 */
.ab-ph span{
  position:absolute;left:0;bottom:0;
  padding:9px 16px;font-size:12px;color:#fff;
  background:rgba(10,28,42,.52);
  opacity:0;transform:translateY(4px);
  transition:opacity .28s ease,transform .28s ease;
}
.ab-ph:hover span{opacity:1;transform:translateY(0);}

/* ===== ⑥ 深入了解：两个子页面入口 ===== */
.ab-more{background:var(--bg-soft);padding:0 0 78px;}
.ab-more-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;border-top:1px solid var(--border);
}
.ab-more-item{
  display:block;position:relative;
  padding:34px 90px 34px 30px;
  background:#fff;border:1px solid #e7eef4;border-top:0;
  transition:background .22s ease,border-color .22s ease;
}
.ab-more-item:hover{background:#fff;border-color:#cfe0ed;}
.ab-more-en{
  display:block;font-size:11.5px;letter-spacing:1.8px;
  color:#aebecb;margin-bottom:8px;
}
.ab-more-t{
  display:block;font-size:18px;font-weight:600;color:#152430;
  line-height:1.4;
}
/* 箭头绝对定位在右侧，与标题同一水平线，不随文字长度移动 */
.ab-more-a{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--primary);white-space:nowrap;
}
.ab-more-item:hover .ab-more-a{color:var(--primary-light);}

/* ===== ⑥ 承诺行动条 ===== */
.ab-cta{
  background:linear-gradient(100deg,#0a4a75,#065e99 62%,#0e6ea8);
  color:#fff;padding:56px 0;
}
.ab-cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:52px;flex-wrap:wrap;
}
.ab-cta-txt{flex:1 1 460px;min-width:0;}
.ab-cta-t{
  font-size:20px;font-weight:600;line-height:1.6;
  margin-bottom:12px;letter-spacing:.2px;
}
.ab-cta-p{
  font-size:13.5px;line-height:1.9;
  color:rgba(255,255,255,.76);margin:0;
}
.ab-cta-act{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto;}

/* ===== 关于我们页响应式 ===== */
@media(max-width:1024px){
  .ab-intro{padding:58px 0 0;}
  .ab-lead{font-size:22px;line-height:1.7;margin-bottom:28px;}
  .ab-stats{margin-top:44px;padding:28px 0;}
  .ab-num{font-size:28px;}
  .ab-apps,.ab-fac{padding:60px 0;}
  .ab-more{padding:0 0 60px;}
  .ab-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .ab-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ab-hero-fig{aspect-ratio:2/1;max-height:none;}
}
@media(max-width:768px){
  .ab-intro{padding:44px 0 0;}
  .ab-k{margin-bottom:16px;}
  .ab-lead{font-size:19px;line-height:1.72;margin-bottom:22px;}
  .ab-body p,.ab-p{font-size:14px;line-height:1.9;}
  /* 四格数据在手机上排 2×2，仍保留线条分隔 */
  .ab-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:34px;padding:0;border-bottom:0;
  }
  .ab-stat{
    padding:20px 12px;border-bottom:1px solid #eef4f8;
  }
  .ab-stat:nth-child(2n){border-right:0;}
  .ab-num{font-size:26px;}
  .ab-lab{font-size:12px;margin-top:6px;}
  .ab-hero-fig{aspect-ratio:16/9;max-height:none;}
  .ab-hero-fig span{padding:9px 16px;font-size:11.5px;}
  .ab-apps,.ab-fac{padding:44px 0;}
  .ab-head{margin-bottom:22px;}
  .ab-head h2{font-size:19px;}
  .ab-wide{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px;}
  .ab-grid3{grid-template-columns:minmax(0,1fr);gap:14px;}
  .ab-tag{font-size:12px;padding:5px 11px;}
  .ab-more{padding:0 0 44px;}
  .ab-more-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
  .ab-more-item{padding:22px 20px;}
  .ab-more-t{font-size:16px;}
  .ab-more-a{position:static;transform:none;display:block;margin-top:10px;}
  .ab-cta{padding:38px 0;}
  .ab-cta-inner{gap:26px;}
  .ab-cta-t{font-size:17px;}
  .ab-cta-act{width:100%;}
}

/* ============================================================
   「关于我们」板块：子导航 + 企业文化 / 发展历程 / 资质荣誉
   ============================================================ */

/* ===== ①-2 板块子导航 =====
   紧跟在小横幅下方，白底 + 底部细线，作为「关于我们」板块的锚点。
   当前页用主色 + 短下划线标示，符合企业站二级导航的通行做法。 */
.ab-nav{
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 2px rgba(16,42,67,.03);
}
.ab-nav-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:0;
  justify-content:center;
}
.ab-nav-list li{margin:0;}
.ab-nav-list a{
  display:block;position:relative;
  padding:17px 30px;font-size:14.5px;color:#5b6f7e;
  line-height:1.4;transition:color .2s ease;
}
.ab-nav-list a::after{
  content:"";position:absolute;left:30px;right:30px;bottom:-1px;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:center;
  transition:transform .24s ease;
}
.ab-nav-list a:hover{color:var(--primary);}
.ab-nav-list a:hover::after{transform:scaleX(1);}
/* 当前页：字重 + 常驻下划线，不靠颜色单一维度区分 */
.ab-nav-list a.is-current{
  color:var(--primary);font-weight:600;
}
.ab-nav-list a.is-current::after{transform:scaleX(1);}

/* ===== 三页共用：开篇 ===== */
.cl-intro,.hs-intro,.hn-intro{background:#fff;padding:74px 0 0;}
.cl-intro .wrap,.hs-intro .wrap,.hn-intro .wrap{max-width:860px;}
.cl-k{
  display:block;font-size:11.5px;letter-spacing:2.4px;
  color:#aebecb;margin-bottom:20px;
}
.cl-lead{
  font-size:25px;line-height:1.7;color:#12212c;font-weight:700;
  margin:0 0 26px;letter-spacing:.2px;
}
.cl-p{
  font-size:14.5px;line-height:2;color:#5b6f7e;margin:0;
}

/* ===== 企业文化：四条价值观 ===== */
.cl-values{background:#fff;padding:64px 0 78px;}
.cl-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);
}
.cl-card{
  position:relative;
  padding:38px 36px 40px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transition:background .24s ease;
}
.cl-card:hover{background:var(--bg-soft);}
/* 编号：右上角淡出的大字，纯装饰不抢内容 */
.cl-num{
  position:absolute;right:26px;top:22px;
  font-size:40px;font-weight:700;line-height:1;
  color:rgba(6,94,153,.07);letter-spacing:-1px;
}
.cl-en{
  display:block;font-size:11.5px;letter-spacing:1.9px;
  color:#aebecb;margin-bottom:10px;
}
.cl-t{
  font-size:20px;font-weight:700;color:#152430;
  margin:0 0 14px;line-height:1.4;
}
.cl-d{
  font-size:14px;line-height:1.95;color:#5f7280;margin:0;
}

/* ===== 发展历程：竖向时间轴 ===== */
.hs-tl-sec{background:#fff;padding:56px 0 82px;}
.hs-tl{
  list-style:none;margin:0;padding:0;position:relative;
}
/* 中轴线由每个条目的左边框连成，不额外画伪元素线条 */
.hs-item{
  position:relative;
  display:grid;grid-template-columns:140px minmax(0,1fr);
  gap:44px;
  padding:0 0 46px 34px;
  border-left:1px solid #e6eef4;
}
.hs-item:last-child{padding-bottom:0;}
/* 节点圆点压在左边框上 */
.hs-item::before{
  content:"";position:absolute;left:-5px;top:12px;
  width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--primary);
}
.hs-year{
  font-size:26px;font-weight:700;color:var(--primary);
  line-height:1.25;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;
}
.hs-body{min-width:0;}
.hs-t{
  font-size:17px;font-weight:600;color:#152430;
  margin:0 0 10px;line-height:1.55;
}
.hs-d{
  font-size:14px;line-height:1.95;color:#5f7280;margin:0;
}
.hs-fig{
  margin:18px 0 0;border:1px solid #e7eef4;overflow:hidden;background:#fbfdfe;
}
.hs-fig img{width:100%;height:auto;display:block;}
.hs-empty{
  font-size:14.5px;color:#8496a3;line-height:1.9;
  padding:34px;background:var(--bg-soft);border:1px dashed #d5e2ec;
  margin:0;
}

/* ===== 资质荣誉 ===== */
.hn-sec{background:#fff;padding:52px 0 84px;}

/* 分类筛选：细边框胶囊，当前项实心 */
.hn-filter{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;
}
.hn-tab{
  font-family:inherit;font-size:13px;line-height:1.4;
  padding:7px 18px;border-radius:2px;cursor:pointer;
  background:#fff;border:1px solid #dde7ef;color:#5b6f7e;
  transition:background .2s,border-color .2s,color .2s;
}
.hn-tab:hover{border-color:var(--primary);color:var(--primary);}
.hn-tab.is-on{
  background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500;
}

/* 证书网格：三列，卡片等宽等高，图片区固定 4:3 白底 */
.hn-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.hn-card{
  margin:0;background:#fff;
  border:1px solid #e7eef4;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.hn-card:hover{border-color:#cfe0ed;box-shadow:0 6px 20px rgba(16,42,67,.06);}
.hn-pic{
  display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  background:#fff;aspect-ratio:4/3;overflow:hidden;
  /* 按钮默认字体/边框重置，避免不同浏览器出现内阴影 */
  font:inherit;color:inherit;text-align:center;
}
.hn-pic img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .4s ease;
}
.hn-card:hover .hn-pic img{transform:scale(1.03);}
/* 竖版证书（软著、CE）用纵向图框，避免在 4:3 里左右大片留白。
   同一行卡片高度仍由 grid 拉伸对齐，不会高低不齐。 */
.hn-card.is-tall .hn-pic{aspect-ratio:3/4;}
.hn-card figcaption{
  padding:16px 18px 18px;border-top:1px solid #f0f5f9;
}
.hn-cat{
  display:inline-block;font-size:11px;letter-spacing:.4px;
  color:var(--primary);background:#eef6fc;
  padding:3px 9px;border-radius:2px;margin-bottom:9px;
}
.hn-name{
  font-size:15px;font-weight:600;color:#152430;
  margin:0 0 7px;line-height:1.5;
}
.hn-org{
  font-size:12.5px;color:#8496a3;line-height:1.6;margin:0;
}
.hn-note{
  font-size:12px;color:#a0b0bc;line-height:1.6;margin:5px 0 0;
}

/* 大图弹层 */
.hn-dlg{
  border:0;padding:0;background:transparent;
  max-width:92vw;max-height:92vh;
  /* 关闭按钮定位在弹层外上方 -40px，默认 overflow:auto 会把它裁掉 */
  overflow:visible;
}
.hn-dlg::backdrop{background:rgba(8,22,34,.82);}
.hn-dlg img{
  max-width:88vw;max-height:78vh;width:auto;height:auto;
  object-fit:contain;display:block;margin:0 auto;
  background:#fff;
}
/* hidden 必须能压过上面的 display:block，否则空图框会占位 */
.hn-dlg img[hidden]{display:none;}
.hn-dlg-cap{
  color:#fff;font-size:13.5px;text-align:center;
  margin:14px 0 0;line-height:1.6;
  /* 行高不足会把字形下半裁掉，留 4px 余量 */
  padding-bottom:4px;
}
.hn-dlg-x{
  position:absolute;right:0;top:-42px;
  width:34px;height:34px;line-height:1;padding:0;
  background:transparent;border:1px solid rgba(255,255,255,.5);
  color:#fff;font-size:20px;cursor:pointer;border-radius:2px;
  font-family:inherit;
}
.hn-dlg-x:hover{background:rgba(255,255,255,.16);border-color:#fff;}

/* ===== 关于我们板块响应式 ===== */
@media(max-width:1024px){
  .ab-nav-list a{padding:15px 22px;font-size:14px;}
  .ab-nav-list a::after{left:22px;right:22px;}
  .cl-intro,.hs-intro,.hn-intro{padding:56px 0 0;}
  .cl-lead{font-size:22px;line-height:1.68;margin-bottom:22px;}
  .cl-values{padding:52px 0 62px;}
  .cl-card{padding:32px 28px 34px;}
  .cl-t{font-size:18px;}
  .hs-tl-sec{padding:46px 0 64px;}
  .hs-item{grid-template-columns:110px minmax(0,1fr);gap:32px;}
  .hs-year{font-size:23px;}
  .hn-sec{padding:44px 0 66px;}
  .hn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
}
@media(max-width:768px){
  /* 子导航横向可滚，避免四个中文标签挤成一团或换行撑高 */
  .ab-nav-list{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ab-nav-list::-webkit-scrollbar{display:none;}
  .ab-nav-list a{padding:14px 18px;font-size:13.5px;white-space:nowrap;}
  .ab-nav-list a::after{left:18px;right:18px;}
  .cl-intro,.hs-intro,.hn-intro{padding:42px 0 0;}
  .cl-k{margin-bottom:14px;}
  .cl-lead{font-size:19px;line-height:1.7;margin-bottom:18px;}
  .cl-p{font-size:14px;line-height:1.9;}
  .cl-values{padding:38px 0 46px;}
  .cl-grid{grid-template-columns:minmax(0,1fr);}
  .cl-card{padding:28px 22px 30px;}
  .cl-num{font-size:32px;right:18px;top:16px;}
  .cl-t{font-size:17px;margin-bottom:10px;}
  .cl-d{font-size:13.5px;line-height:1.85;}
  .hs-tl-sec{padding:36px 0 48px;}
  /* 小屏改为年份在上、内容在下，避免左栏挤压正文 */
  .hs-item{
    grid-template-columns:minmax(0,1fr);gap:10px;
    padding:0 0 34px 22px;
  }
  .hs-year{font-size:21px;}
  .hs-t{font-size:15.5px;margin-bottom:8px;}
  .hs-d{font-size:13.5px;line-height:1.85;}
  .hs-fig{margin-top:14px;}
  .hs-empty{padding:22px;font-size:13.5px;}
  .hn-sec{padding:34px 0 48px;}
  .hn-filter{margin-bottom:24px;gap:6px;}
  .hn-tab{font-size:12.5px;padding:6px 14px;}
  .hn-grid{grid-template-columns:minmax(0,1fr);gap:16px;}
  .hn-card figcaption{padding:14px 16px 16px;}
  .hn-dlg img{max-width:90vw;max-height:70vh;}
}

/* ============================================================
   解决方案：列表页（一屏一条，左文右图交替）
   ------------------------------------------------------------
   为什么不用宫格：
     宫格（grid-4）适合图多信息少的产品墙；方案是「工艺说明型」内容，
     每条要讲原理与适用材料，四列窄卡只能塞标题，读完不知所云。
     改成一屏一条，正文区给到 60% 宽，图给 40%，阅读节奏接近关于我们板块。
   ============================================================ */
.sol-sec{background:#fff;padding:56px 0 78px;}
.sol-list{display:flex;flex-direction:column;gap:0;}

/* 每条之间用细分隔线，而不是卡片阴影 —— 页面更长，阴影会显脏 */
.sol-item{
  display:grid;grid-template-columns:minmax(0,1fr) 44%;
  gap:56px;align-items:center;
  padding:46px 0;
  border-bottom:1px solid var(--border);
}
.sol-item:first-child{padding-top:0;}
.sol-item:last-child{border-bottom:0;padding-bottom:0;}

/* 偶数条图文互换：源顺序仍是「文 → 图」，只靠 order 调视觉位置，
   这样屏幕阅读器和移动端都还是先读文字，不影响可访问性 */
.sol-item.is-rev .sol-txt{order:2;}
.sol-item.is-rev .sol-fig{order:1;}

/* 无配图的条目：不能留 44% 空档，正文区撑满整行并限制阅读宽度，
   否则右边会出现一条突兀的空白带，看着像图没加载出来。
   再加一道主色竖线做视觉锚点，纯文字条目才不会显得「缺了点什么」。 */
.sol-item.no-fig{grid-template-columns:minmax(0,1fr);}
.sol-item.no-fig .sol-txt{
  max-width:760px;
  padding-left:26px;
  border-left:3px solid var(--primary);
}

.sol-txt{min-width:0;}
.sol-num{
  display:block;font-size:12px;letter-spacing:2.2px;
  color:#aebecb;margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.sol-t{
  font-size:22px;font-weight:700;color:#12212c;
  margin:0 0 14px;line-height:1.45;letter-spacing:.2px;
}
.sol-t a{color:inherit;transition:color .2s ease;}
.sol-t a:hover{color:var(--primary);}
.sol-d{
  font-size:14px;line-height:1.95;color:#5b6f7e;margin:0 0 18px;
}
.sol-pts{
  list-style:none;margin:0 0 22px;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
/* 要点用短横线做引导，比圆点更「技术文档」 */
.sol-pts li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:1.75;color:#425765;
}
.sol-pts li::before{
  content:"";position:absolute;left:0;top:10px;
  width:8px;height:1px;background:var(--primary);
}
.sol-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--primary);
  border-bottom:1px solid rgba(6,94,153,.28);
  padding-bottom:2px;transition:border-color .2s ease,gap .2s ease;
}
.sol-more:hover{border-bottom-color:var(--primary);gap:10px;}
.sol-more span{font-size:16px;line-height:1;}

.sol-fig{
  display:block;position:relative;overflow:hidden;
  background:var(--bg-soft);border:1px solid #e7eef4;
  aspect-ratio:4/3;
}
.sol-fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.sol-fig:hover img{transform:scale(1.035);}

/* ============================================================
   解决方案：详情页
   ============================================================ */
.sd-sec{background:#fff;padding:54px 0 76px;}
.sd-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 312px;
  gap:52px;align-items:start;
}
.sd-main{min-width:0;}

.sd-hero{
  margin:0 0 30px;border:1px solid #e7eef4;overflow:hidden;background:var(--bg-soft);
}
.sd-hero img{width:100%;height:auto;display:block;}

/* 正文里的图片统一圆角留白，避免原站迁移过来的行内样式打架 */
/*
 * 正文图：限宽 + 限高。
 * 只限宽不够 —— 玻璃方案那组图是 1150×1600 的竖图，
 * 按栏宽 796px 等比缩放后单张高 1121px，四张连排把页面拉到近 4000px，
 * 读者滚半天看不到第二段文字。
 *
 * 只用 max-height 会把图裁掉（宽度仍按父容器算，高度一压就溢出），
 * 所以改走 object-fit：给固定高度 + contain，图完整缩放、不裁不拉伸。
 * 只用 max-height 时原图比例会被破坏，这里用 width:100% 保证水平铺满。
 */
.sd-body img{
  max-width:100%;display:block;margin:20px auto;
  width:100%;height:auto;max-height:620px;
  object-fit:contain;object-position:center;
}
.sd-body p{margin:0 0 16px;}
.sd-body h2,.sd-body h3{color:#152430;margin:28px 0 14px;}
.sd-body h2{font-size:20px;}
.sd-body h3{font-size:17px;}

/* 右侧参数卡：sticky 跟随，长正文时要点不会滚走 */
.sd-side{
  position:sticky;top:calc(var(--hdr-h) + 20px);
  display:flex;flex-direction:column;gap:16px;
}
.sd-card{
  border:1px solid var(--border);background:#fff;
  padding:22px 22px 24px;
}
.sd-card-t{
  font-size:14px;font-weight:700;color:#152430;
  margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.sd-pts{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
.sd-pts li{
  position:relative;padding-left:16px;
  font-size:13.5px;line-height:1.8;color:#425765;
}
.sd-pts li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--primary);
}
.sd-tags{display:flex;flex-wrap:wrap;gap:8px;}
.sd-tag{
  display:inline-block;font-size:12.5px;line-height:1.4;
  padding:5px 11px;border-radius:3px;
  background:var(--bg-soft);color:#42576b;
  border:1px solid #e2ecf3;
}
/* 机型标签用主色描边区分，避免和材料混淆 */
.sd-tag.is-model{
  background:#fff;color:var(--primary);
  border-color:rgba(6,94,153,.35);
}
.sd-card-p{
  font-size:13px;line-height:1.85;color:#5b6f7e;margin:0 0 16px;
}
.sd-card-cta{background:var(--bg-soft);}
/*
 * 侧栏这张卡是浅底，而 .ct-btn-ghost 是为深色行动条设计的
 * （白字 + 半透明白边），直接用会变成「白底白字」看不见。
 * 这里在浅底卡片里换成主色描边款。
 */
.sd-card-cta .ct-btn-ghost{
  background:#fff;color:var(--primary);
  border:1px solid rgba(6,94,153,.32);
}
.sd-card-cta .ct-btn-ghost:hover{
  background:var(--primary);color:#fff;border-color:var(--primary);
}

/* 其它方案：三列小卡，不带阴影 */
.sd-rel{background:var(--bg-soft);padding:52px 0 58px;}
.sd-rel-t{
  font-size:18px;font-weight:700;color:#152430;
  margin:0 0 24px;
}
.sd-rel-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.sd-rel-item{
  display:block;background:#fff;border:1px solid var(--border);
  transition:border-color .22s ease,transform .22s ease;
}
.sd-rel-item:hover{border-color:rgba(6,94,153,.4);transform:translateY(-2px);}
.sd-rel-fig{
  display:block;aspect-ratio:16/10;overflow:hidden;background:#eef3f7;
}
.sd-rel-fig img{width:100%;height:100%;object-fit:cover;display:block;}

/* 没有配图的方案：用文字卡占住同样的高度，
   否则三张卡片高低不齐，看着像图没加载出来 */
.sd-rel-fig.is-txt{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:18px 20px;background:#f2f7fb;
  border-bottom:1px solid var(--border);
}
.sd-rel-num{
  font-size:11px;letter-spacing:2px;color:#9fb3c2;text-transform:uppercase;
}
.sd-rel-lead{
  font-size:13.5px;line-height:1.7;font-weight:600;color:#22323f;
}
.sd-rel-pt{
  font-size:12.5px;line-height:1.65;color:#6a7f8e;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sd-rel-name{
  display:block;padding:14px 16px;font-size:14px;font-weight:600;color:#22323f;
}

@media(max-width:1024px){
  .sol-item{grid-template-columns:minmax(0,1fr) 40%;gap:36px;}
  .sd-grid{grid-template-columns:minmax(0,1fr) 272px;gap:34px;}
}

@media(max-width:768px){
  .sol-sec{padding:34px 0 46px;}
  /* 小屏一律「图在上、文在下」，取消 order 交替，否则观感混乱 */
  .sol-item{
    grid-template-columns:minmax(0,1fr);gap:20px;
    padding:30px 0;
  }
  .sol-item.is-rev .sol-txt,
  .sol-item.is-rev .sol-fig{order:0;}
  .sol-num{margin-bottom:8px;}
  .sol-t{font-size:18px;margin-bottom:10px;}
  .sol-d{font-size:13.5px;line-height:1.85;margin-bottom:14px;}
  .sol-pts{margin-bottom:16px;gap:7px;}
  .sol-pts li{font-size:13px;line-height:1.7;}
  .sol-fig{aspect-ratio:16/10;}

  .sd-sec{padding:32px 0 44px;}
  .sd-grid{grid-template-columns:minmax(0,1fr);gap:26px;}
  /* 小屏必须解除 sticky：否则要点卡会盖住正文 */
  .sd-side{position:static;top:auto;}
  .sd-hero{margin-bottom:22px;}
  .sd-body h2{font-size:18px;}
  .sd-body h3{font-size:16px;}
  .sd-rel{padding:34px 0 40px;}
  .sd-rel-list{grid-template-columns:minmax(0,1fr);gap:14px;}
  .sd-rel-t{font-size:16px;margin-bottom:18px;}
}

/* ============================================================
   网站地图页 响应式
   三栏 → 两栏 → 单栏。列数减少时要同步缩小块间距，
   否则单栏下一块接一块，页尾会拖得很长。
   ============================================================ */
@media(max-width:1024px){
  .sitemap-area{padding:36px 0 52px;}
  .sm-grid{columns:2;column-gap:20px;}
  .sm-block{padding:18px 18px 20px;margin-bottom:20px;}
}
@media(max-width:768px){
  .sitemap-area{padding:28px 0 44px;}
  .sm-grid{columns:1;}
  .sm-lead{font-size:13.5px;margin-bottom:20px;}
  .sm-lead .sm-xml{display:block;margin-top:6px;}
  .sm-block{margin-bottom:16px;padding:16px 16px 18px;}
  .sm-block h2{font-size:15px;margin-bottom:12px;padding-bottom:9px;}
  .sm-block li{font-size:13px;padding:4px 0;}
}

/* ============================================================
   页脚 640 档：真正的手机竖排
   —— 三列并排收成单列堆叠：品牌（logo + 标语）→ 二维码 → 四栏降两列。
      640 是「三列已放不下」的临界点：品牌 150 + 二维码 140 + 四栏
      各 105px 已经到极限，再窄就只能堆叠。
   ============================================================ */
@media(max-width:640px){
  /* 单列后必须清掉 900 档设的 grid-column/row，否则元素会叠在同一格 */
  .ft-main{
    grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 0 20px;
  }
  .ft-brand,.ft-qr,.ft-nav{grid-column:auto;grid-row:auto;}
  /* 品牌区：logo 与标语上下排列，横扫小屏一行放不下英文标语 */
  .ft-brand{display:flex;flex-wrap:wrap;gap:0;align-items:center;}
  .ft-logo{margin-right:12px;}
  .ft-slogan{width:100%;margin:10px 0 0;}
  .ft-desc{width:100%;margin:4px 0 0;white-space:normal;}
  /* 二维码：码在左、提示语在右；左对齐（右对齐在单列里会显得飘） */
  .ft-qr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-align:left;
    padding-top:16px;border-top:1px solid rgba(255,255,255,.09);}
  .ft-qr h4{margin:0 0 10px;padding-bottom:0;width:100%;text-align:left;}
  .ft-qr h4::after{display:none;}
  .ft-qr-list{flex:0 0 auto;gap:10px;justify-content:flex-start;}
  .ft-qr-box{width:70px;height:70px;}
  .ft-qr-hint{display:block;margin:0;flex:1 1 100px;font-size:11px;text-align:left;}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-top:0;border-top:0;}
  .footer-col h4,.ft-qr h4{font-size:14px;margin-bottom:12px;padding-bottom:9px;}
  .footer-col a{font-size:13px;}
  .ft-tel-list a{font-size:13px;}
}

/* ============================================================
   新闻详情页 —— 干净的单栏正文
   ------------------------------------------------------------
   原则：样式只管「可读」，不管「好看」。
   横幅直接复用列表页的 .page-banner（深蓝底、白字、标题 + 面包屑），
   正文区不做卡片、不做色块、不做自动排版，后台编辑器里写成什么样，
   前台就显示成什么样。

   宽度不设限：正文直接吃满全站统一的 .wrap（1200px 内容区），
   与首页、产品、案例、联系等页面完全同宽。文章页如果单独收窄到
   800~900px，读者从列表页点进来会看到左右两边突然各空出一大块，
   页面像是在收缩 —— 一致性比「理想行宽」重要。
   ============================================================ */

.nd-article{margin:0;}

/* 分类 · 日期：一行小字，压在标题与正文之间 */
.nd-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 0 26px;font-size:13px;color:#8fa3b0;
}
.nd-meta a{color:var(--primary);}
.nd-meta span{font-variant-numeric:tabular-nums;}

/* 头图：通栏到正文宽度，不加圆角不加边框 */
.nd-fig{margin:0 0 30px;line-height:0;}
.nd-fig img{width:100%;height:auto;display:block;}

/*
 * 正文：与全站同宽（1200px 内容区 → 正文 1160px），因此每行字数会比窄栏多。
 * 长行必须配大字号与足行高，否则读到行尾再找回下一行开头会串行。
 * 实测 17.5px 时一行约 65 字、行高 34px，是宽栏下能接受的组合；
 * 再小就显密，再大又会把「一屏能看几段」压得过少。
 */
.nd-body{font-size:17.5px;line-height:1.95;color:#33414d;}
.nd-body p{margin:0 0 24px;}
.nd-body p:last-child{margin-bottom:0;}

/* 标题层级：靠字号与上下间距拉开，不加竖线、不加底色 */
.nd-body h2{
  font-size:22px;font-weight:700;line-height:1.5;color:#16232e;
  margin:46px 0 16px;
}
.nd-body h3{
  font-size:17.5px;font-weight:700;color:#16232e;
  margin:34px 0 14px;
}
.nd-body h2:first-child,
.nd-body h3:first-child{margin-top:0;}

/*
 * 宽栏里的图容易一屏放不下（1200px 内宽的横图能有 700px 高，
 * 加上前后段距会把正文截断得很碎）。正文内的图限一个最大高度，
 * 超高的等比缩到 620px；头图（.nd-fig）不受此限，它是版面主角。
 */
.nd-body img{margin:26px auto;border-radius:0;max-height:620px;width:auto;max-width:100%;}
.nd-body figure{margin:26px 0;}
.nd-body ul,.nd-body ol{margin:0 0 26px;padding-left:22px;}
.nd-body li{margin-bottom:8px;}
.nd-body blockquote{
  margin:26px 0;padding:0 0 0 18px;
  border-left:2px solid #dbe6ee;color:#5a6b78;
}
.nd-body a{text-decoration:underline;}

/* 编辑器留下的空段落（只有一个 <br> 或 &nbsp;）会撑出大块空白，藏掉 */
.nd-body p:empty,
.nd-body p > br:only-child{display:none;}

/* --- 相关阅读：纯文字紧凑列表 --- */
/*
 * 为什么不复用列表页的 .news-item：42 篇里只有 1 篇配图，其余是 220×165 的
 * 日期占位块。列表页一行一个还算好看，详情页底部连出 4 个就是四块大蓝方块，
 * 把文章收尾压得不像样。这里改成两列纯文字，有没有配图都一样整齐。
 *
 * 日期不甩到行尾：两列各 552px 宽，标题短的条目右边会空出一大片，
 * 看着像目录。让日期紧跟标题、用「·」断开，读起来是一句话。
 */
.nd-rel{margin-top:56px;}
.nd-rel-t{
  margin:0;padding:0 0 16px;
  font-size:16px;font-weight:700;color:#16232e;
  border-bottom:1px solid var(--border);
}
.nd-rel-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;margin:0;padding:0;list-style:none;
}
.nd-rel-item{
  padding:17px 0;border-bottom:1px solid var(--border);
  min-width:0;   /* 标题 nowrap，不加这条会把 grid 列撑破 */
}

.nd-rel-link{
  display:block;min-width:0;
  font-size:15px;line-height:1.6;
}
.nd-rel-tt{
  font-weight:600;color:#1a2b38;
  transition:color .2s;
}
.nd-rel-link:hover .nd-rel-tt{color:var(--primary);}
.nd-rel-dt{
  margin-left:10px;font-size:12px;color:#a8b6c0;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.nd-rel-ds{
  margin:6px 0 0;font-size:13.5px;line-height:1.75;color:var(--text-light);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- 上下篇：三栏一条线「上一篇 | 全部新闻 | 下一篇」 --- */
/*
 * 原来上下篇占满一行、返回按钮另起一行居中，两块之间 34px 空隙，
 * 中间那一段还会空出一大片白。改成三栏后中间格放「全部新闻」，
 * 左右文章夹住一个居中入口，三件事归成一排，没有空隙可看。
 */
.nd-pn{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:0;
  margin:44px auto 0;padding-top:22px;
  border-top:1px solid var(--border);
}
.nd-pn-item{padding-right:26px;transition:color .2s;min-width:0;}
.nd-pn-item--next{
  padding:0 0 0 26px;text-align:right;
  border-left:1px solid var(--border);
}
.nd-pn-k{display:block;font-size:12px;color:#a8b6c0;margin-bottom:6px;}
/*
 * 标题只排一行、超出省略。
 * 原来给的是两行（line-clamp:2），遇上「鼎力UV打印机：以数字印刷之力，
 * 连接现在与未来」这种长标题，第二行只剩一个「来」字挂在最右边，
 * 两条腿一高一矮，比居中留白更难看。单行 + 省略号后左右等高，
 * 完整标题本来也能在悬停 title 和文章页里看到。
 */
.nd-pn-v{
  display:block;font-size:14.5px;color:#3a4a57;line-height:1.65;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nd-pn-item:hover .nd-pn-v{color:var(--primary);}
.nd-pn-item.is-off{cursor:default;}
.nd-pn-item.is-off .nd-pn-v,
.nd-pn-item.is-off:hover .nd-pn-v{color:#c3ced6;}

/* 中间格：一枚小圆点按钮，比文字链更容易点到，也不抢左右文章的视线 */
.nd-pn-all{
  flex:0 0 auto;
  margin:0 22px;
  padding:7px 16px;
  border:1px solid var(--border);border-radius:20px;
  font-size:13px;color:#5a6b78;background:#fff;white-space:nowrap;
}
.nd-pn-all:hover{border-color:#cfe3f0;color:var(--primary);background:var(--bg-soft);}

/* --- 返回列表已经并进 .nd-pn 中间那一格，不再单独占一块 --- */

/* 相关阅读与上下篇都直接吃 .wrap 的宽度，不再单独锁宽 */

/* 案例/产品详情页的分类标签（原来是个纯文字 span，点不动） */
.am-tag{
  padding:2px 11px;border-radius:11px;
  background:var(--bg-soft);color:var(--primary);font-size:12.5px;
}
.am-tag:hover{background:var(--primary);color:#fff;}

/* ============================================================
   产品中心 / 应用案例 列表页 与 案例详情页
   ============================================================ */

/* --- 筛选 tab：一行平铺 --- */
/*
 * 曾把「UV打印行业」拆到第二行、加「行业专用机」前缀，想区分「按机型 / 按材料」
 * 两套维度，但第二行只有孤零零一个标签，多出一条分隔线反而像没做完的分组。
 * 5 个标签一行放得下，已改回单行。
 */
.cat-tabs-group{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cat-tabs-group .ct-row{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.cat-tabs-group .ct-label{
  font-size:12.5px;color:#a8b6c0;letter-spacing:.5px;
  padding-right:2px;white-space:nowrap;
}

/* --- 产品卡片：型号标签 + 名称 + 一行关键规格 --- */
/*
 * 客户在列表页做的是选型比较，先看「什么型号」，再看「能打多大」。
 * 原来那张卡是「名称 + 两行营销摘要 + 浅灰分类」，但 36 个产品里
 * 只有 19 个有摘要（53%），近一半卡片那块是空的，行高还参差。
 * 摘要换成一条硬规格（输出尺寸优先），24/36 有数据，没有的留空占位保持等高。
 */
.pgrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  /* 默认就是 stretch，显式写出来是因为下面要靠它让「有规格」和「没规格」
     的卡片在同一行里等高 —— 12 台行业专用机没有任何规格数据，
     如果卡片按内容高度收缩，同一行会出现高矮差。 */
  align-items:stretch;
}
.pcard{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s;
}
.pcard:hover{
  box-shadow:0 8px 26px rgba(6,94,153,.13);
  transform:translateY(-3px);border-color:#cfe3f0;
}
.pcard-fig{
  display:block;aspect-ratio:4/3;overflow:hidden;background:#f7fafc;
}
/* 产品特色图 36/36 全是 800×600（4:3），容器同比例，等于不裁图 */
.pcard-fig img{
  width:100%;height:100%;object-fit:contain;   /* contain 而非 cover：设备轮廓不能被切掉 */
  transition:transform .4s;
}
.pcard:hover .pcard-fig img{transform:scale(1.04);}
.pcard-noimg{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:15px;color:#b6c4cf;letter-spacing:1px;
}

.pcard-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;}
.pcard-model{
  align-self:flex-start;
  margin:0 0 8px;padding:2px 8px;
  font-size:11.5px;line-height:1.6;letter-spacing:.4px;
  color:var(--primary);background:var(--bg-soft);
  border-radius:3px;font-variant-numeric:tabular-nums;
}
.pcard-title{
  margin:0 0 10px;font-size:15px;font-weight:600;line-height:1.5;
}
.pcard-title a{color:#1a2b38;}
.pcard:hover .pcard-title a{color:var(--primary);}

/* 规格行钉在卡片底部，同一行卡片即使标题折行也能对齐 */
.pcard-spec{
  margin-top:auto;padding-top:9px;
  border-top:1px dashed #eef2f6;
  font-size:12.5px;color:#7b8d9b;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.pcard-spec.is-empty{border-top-color:transparent;}

/* --- 案例卡片：三列图片为主 --- */
/*
 * 63 个案例全是「一张图 + 2~7 个字的标题」，没有别的信息可放。
 * 分类靠 tab 筛选就够了，卡片里再挂一遍分类灰字是重复。
 * 三列比四列每张图大 33%，案例是纯看图的内容，图大比排得多更重要。
 */
.cgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.cgrid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}

.ccard{
  display:block;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s;
}
.ccard:hover{
  box-shadow:0 8px 26px rgba(6,94,153,.13);
  transform:translateY(-3px);border-color:#cfe3f0;
}
/* 案例图有 1.33 也有 0.95，统一裁成 4:3 —— 效果图裁掉边缘比高低不齐好看 */
.ccard-fig{
  margin:0;aspect-ratio:4/3;overflow:hidden;background:#f7fafc;
}
.ccard-fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s;
}
.ccard:hover .ccard-fig img{transform:scale(1.05);}
.ccard-noimg{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:15px;color:#b6c4cf;letter-spacing:1px;
}
/* 标题只排一行，超长省略：63 个标题都很短，两行反而让网格产生高低差 */
.ccard-cap{
  padding:12px 14px;font-size:14.5px;font-weight:500;color:#1a2b38;
  line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s;
}
.ccard:hover .ccard-cap{color:var(--primary);}

/* --- 案例详情：主图 + 缩略图条 --- */
/*
 * 原来 4 张 750px 的图纵向码下来，正文拉到 2252px，读者滚完还是不知道
 * 这是什么工艺。主图放一屏内，其余缩略图横向排列，点一下就换。
 */
.case-detail{margin:0;}

.cd-gallery{margin:0 0 26px;}
/*
 * 主图容器锁死 4:3。
 *
 * 案例图实测全是 4:3（1200×900 / 1024×768，比例 1.3333）。
 *
 * ⚠ 边框绝对不能用 border，也不能用 inset box-shadow：
 *   ① border：aspect-ratio 作用于 border-box，而 img 填的是 **content-box**。
 *      910×682.5 的盒子内容区只有 908×680.5，比例从 1.3333 变 1.3343，
 *      4:3 的图 contain 进去宽度只占 907.33px，**右边露出 0.67px 浅色底**
 *      —— 这就是用户看到的那条白线。
 *   ② inset box-shadow：不占布局（比例问题解决），但 inset 阴影绘制在
 *      background 阶段、**位于子元素下方**，被 img 完全盖住，边框直接消失。
 *   所以用 ::after 绝对定位画 1px 描边：不参与布局，且作为定位元素
 *      绘制在同层的 img 之上，边框可见。
 */
.cd-main{
  position:relative;
  margin:0;overflow:hidden;background:#f7fafc;
  border:0;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;
}
.cd-main::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--border);border-radius:inherit;
  pointer-events:none;
}
/*
 * 模糊底层：兜住「图不是 4:3」时 contain 出来的一条留白。
 *
 * 63 个案例里 57 个特色图正好 4:3，contain 铺满，这层完全被盖住、看不见。
 * 剩 6 个是竖图（手表带 1200×1260 = 0.95）或方图，硬 contain 进 4:3 后
 * 左右会空出浅色底 —— 那才是用户说的「白线」的另一半来源。
 *
 * 处理办法：同一张图放大到 cover + 高斯模糊 + 压暗当背景，把留白变成
 * 图片自身的延伸色。原图仍完整露出，一个像素都不裁。
 * scale(1.06) 是因为 blur 会让边缘半透明，放大一点把虚边推出裁剪框外。
 */
.cd-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(18px) brightness(.9) saturate(.95);
  transform:scale(1.06);
  pointer-events:none;
}
/*
 * img 提升为定位元素才能压在 .cd-bg 之上。
 * 两者 z-index 都是 auto，绘制顺序按树序：.cd-bg → img → ::after，
 * 所以 ::after 的 1px 描边仍然盖在最上层，不会被图吃掉。
 */
.cd-main img{
  position:relative;
  display:block;width:100%;height:100%;object-fit:contain;
}

.cd-thumbs{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;
}
/*
 * 缩略图：边框用 ::after 描边，理由同 .cd-main
 * （border 会把 content-box 压成 90×67 = 1.3433，cover 上下各裁 0.5px；
 *  inset box-shadow 又会被 img 盖住看不见）。
 * 选中态描边画在 ::after 上，用两层 box-shadow 模拟「内 1px + 外 1px 光晕」，
 * 不占布局，点击切换时整条尺寸完全不跳。
 */
.cd-thumb{
  position:relative;
  width:92px;flex:0 0 92px;aspect-ratio:4/3;
  padding:0;margin:0;cursor:pointer;
  background:#f7fafc;
  border:0;border-radius:3px;
  overflow:hidden;
  -webkit-appearance:none;appearance:none;
}
.cd-thumb::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--border);border-radius:inherit;
  pointer-events:none;transition:border-color .2s,box-shadow .2s;
}
.cd-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cd-thumb:hover::after{border-color:#cfe3f0;}
.cd-thumb.is-on::after{
  border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary);
}

/* 工艺说明：只有正文真有文字时才渲染，62/63 个案例这块不会出现 */
.cd-note{
  margin:0 0 24px;padding:18px 20px;
  background:var(--bg-soft);
  border-left:3px solid var(--primary);
  border-radius:0 var(--radius) var(--radius) 0;
}
.cd-note-t{
  margin:0 0 8px;font-size:15px;font-weight:700;color:#16232e;
}
.cd-note-p{
  margin:0;font-size:15px;line-height:1.95;color:#3d4e5c;
}

/* .cd-foot 已随「更多「XX」案例」一起移除（分类入口由侧栏承担） */

/* 同类案例 */
.cd-rel{margin-top:34px;}
.cd-rel-t{
  margin:0 0 18px;padding:0 0 14px;
  font-size:16px;font-weight:700;color:#16232e;
  border-bottom:1px solid var(--border);
}

/* ============================================================
   案例详情页侧栏（layout-case）
   ============================================================ */

/*
 * 案例页侧栏再收到 220px（上一版 248，用户仍觉偏宽）。
 * 这块侧栏只有「相关分类（四字短词）」和「推荐产品（小图 + 型号）」两类内容，
 * 220px 扣掉左右 14px 内边距还有 192px，一行放得下一个分类词条、
 * 也能放下 56px 图 + 两行文字。正文因此拿到 906px。
 *
 * minmax(0,1fr) 依然不能省：长型号把 1fr 顶破后侧栏会被挤出视口。
 */
.layout-case{grid-template-columns:minmax(0,1fr) 220px;gap:30px;}

/*
 * .layout-case 写在文件后段，同权重下会盖掉前面 1024 档的
 * .layout{grid-template-columns:1fr}。这里必须再声明一次，
 * 否则 1024 以下案例页仍是「正文 + 侧栏」两列，正文会被压窄。
 *
 * 侧栏落到正文下方后宽度从 248 变成整屏，两块内容如果还按单列排，
 * 8 个分类会拉成一列 8 行、每条右边空 900px，看着像表格错版。
 * 所以平板档把分类排成 3 列、产品排成 2 列，把宽度用回来。
 */
@media(max-width:1024px){
  .layout-case{grid-template-columns:minmax(0,1fr);gap:0;}
  .side-case{margin-top:34px;}
  .side-case .sidebar-box{margin-bottom:18px;}
  .side-case .sidebar-list{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 20px;
  }
  .side-case .sidebar-list li{border-bottom:1px dashed #eef2f5;}
  .sprod-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px;
  }
}

@media(max-width:600px){
  /* 手机上 3 列放不下 4 个字的分类名（350/3 ≈ 110px 还要扣内边距），
     回到 2 列；产品条保持单列，56px 图 + 两行字在 160px 里会折得很难看 */
  .side-case .sidebar-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sprod-list{grid-template-columns:minmax(0,1fr);}
}

/* 窄侧栏里的内边距收紧一档 */
.side-case .sidebar-box .inner-tight{padding:10px 14px;}
.side-case .sidebar-box h3{padding:12px 14px;font-size:15px;}

/* 相关分类：当前所在分类高亮，读者一眼知道自己站在哪 */
.side-case .sidebar-list a{padding:9px 0;font-size:13.5px;}
.side-case .sidebar-list a.is-on{
  color:var(--primary);font-weight:600;
  padding-left:8px;border-left:2px solid var(--primary);
}

/* --- 案例页侧栏的产品推荐：小图 + 型号/名称横条 --- */
/*
 * 不用产品页那种纯文字列表：案例页本身是图片为主的页面，
 * 一排光秃秃的型号名在这里太干；收窄后的 248px 也放不下两列小卡。
 * 小图 56px 正方形 + 右侧两行文字，是最省宽度的图文组合。
 */
.sprod-list{list-style:none;margin:0;padding:0;}
.sprod-item{border-bottom:1px dashed #eef2f5;}
.sprod-item:last-child{border-bottom:0;}
.sprod-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;min-width:0;
}
/*
 * 推荐产品的缩略图也锁 4:3，边框同样用 ::after 描边（理由同 .cd-main：
 * 用 border 会让 content-box 变成 54×40、比例 1.35，右边露 0.67px 底；
 * 用 inset box-shadow 又会被图片盖住）。
 */
.sprod-fig{
  position:relative;
  flex:0 0 56px;width:56px;aspect-ratio:4/3;height:auto;
  display:flex;align-items:center;justify-content:center;
  background:#f7fafc;
  border:0;border-radius:3px;
  overflow:hidden;
}
.sprod-fig::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--border);border-radius:inherit;
  pointer-events:none;
}
.sprod-fig img{width:100%;height:100%;object-fit:contain;}
.sprod-noimg{font-size:12px;color:#b6c4cf;}
.sprod-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sprod-model{
  font-size:11px;line-height:1.5;letter-spacing:.3px;
  color:var(--primary);font-variant-numeric:tabular-nums;
}
.sprod-name{
  font-size:13px;line-height:1.45;color:#2b3b48;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.sprod-link:hover .sprod-name{color:var(--primary);}

/* --- 案例页上下篇：单行两端对齐 --- */
/*
 * 不用新闻页的 .nd-pn（那是三栏 grid，中间一格留给「全部新闻」按钮）。
 * 案例页现在是「左边一组、右边一组」的两端布局：
 *   左：← 上一个案例  栏杆停车杆打印机
 *   右：下一个案例 →  发夹
 * 标签和标题**同一行横排**，不是上下两行 —— 两行时每条要占 40px 高，
 * 单行只要 20px，整块更接近一条分隔线，不抢同类案例的注意力。
 *
 * 位置在「同类案例」上方：读者看完主图先能翻相邻案例，
 * 再往下才是图片墙。之前放在页面最底部，被 4 张图挡住，
 * 翻页其实很难被看见。
 */
/*
 * 去掉卡片外框后的纯文字版：不再有 border / background / border-radius，
 * 也不再留左右 18px 内边距 —— 那 18px 原本是为了让文字别贴框，
 * 框去掉后还留着，左边的「← 上一个案例」就会比主图左边缩进一截，对不齐。
 * 现在文字两端正好压在主图的左右边缘上，整块读起来是一条线。
 *
 * 上下留 14px 只是让文字不贴着缩略图条，不画分隔线：
 * 下面紧接「同类案例」标题，再加一条线就是两道横杠挤在一起。
 */
.cd-pn{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  margin:0 0 30px;padding:14px 0 0;
}
.cd-pn-item{
  display:flex;align-items:baseline;gap:12px;
  min-width:0;max-width:46%;
  font-size:13.5px;line-height:1.6;
}
.cd-pn-item--next{
  margin-left:auto;justify-content:flex-end;text-align:right;
}
.cd-pn-k{
  flex:0 0 auto;font-size:12.5px;color:#a8b6c0;white-space:nowrap;
}
.cd-pn-v{
  min-width:0;color:#3a4a57;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cd-pn-item:hover .cd-pn-v{color:var(--primary);}
.cd-pn-item.is-off{cursor:default;}
.cd-pn-item.is-off .cd-pn-v,
.cd-pn-item.is-off:hover .cd-pn-v{color:#c3ced6;}

/* ===== 响应式 ===== */
@media(max-width:1100px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cgrid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:768px){
  .nd-meta{margin-bottom:20px;}
  .nd-body{font-size:16px;line-height:1.9;}
  .nd-body p{margin-bottom:22px;}
  .nd-body h2{font-size:17.5px;margin:34px 0 14px;}
  .nd-rel{margin-top:40px;}
  /* 两列在手机上会挤成窄条，改回单列。
     用 minmax(0,1fr) 而不是 1fr —— 1fr 的最小值是 auto，内容能把它顶破 */
  .nd-rel-list{grid-template-columns:minmax(0,1fr);gap:0;}
  .nd-rel-item{padding:14px 0;}
  .nd-rel-link{font-size:14.5px;}
  .nd-rel-dt{display:none;}   /* 窄屏上日期占地方，标题比日期有用 */
  .nd-rel-ds{display:none;}
  /* 手机上三栏放不下：改成「全部新闻」独占一行置顶，下面上一篇 | 下一篇并排。
     若让按钮留在中间，它会把上下两篇的连续关系切断，看着像三个孤岛 */
  .nd-pn{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"all all" "prev next";
    gap:16px 0;
  }
  .nd-pn-all{
    grid-area:all;justify-self:center;
    margin:0;padding:7px 18px;
  }
  .nd-pn-item{grid-area:prev;padding-right:16px;}
  .nd-pn-item--next{grid-area:next;padding:0 0 0 16px;text-align:right;}
  .nd-pn-k{font-size:11.5px;}
  .nd-pn-v{font-size:13.5px;}

  /* 案例页上下篇：手机上两端并排会把标题挤成一两个字，
     改成上下两行，各占满宽，标题能多显示几个字。
     不再画分隔虚线 —— 外框已去掉，这里加线又成了一道横杠 */
  .cd-pn{
    flex-direction:column;align-items:stretch;gap:8px;
    padding:12px 0 0;margin-bottom:24px;
  }
  .cd-pn-item{max-width:none;}
  .cd-pn-item--next{
    margin-left:0;justify-content:flex-start;text-align:left;
  }
  .cd-pn-k{font-size:11.5px;}
  .cd-pn-v{font-size:13px;}

  /* 产品：两列。一列会让 36 个产品翻 18 屏 */
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .pcard-body{padding:11px 12px 13px;}
  .pcard-title{font-size:13.5px;margin-bottom:8px;}
  .pcard-model{font-size:11px;margin-bottom:6px;}
  .pcard-spec{font-size:11.5px;padding-top:7px;}

  /* 案例：两列。手机上一列虽然图大，但 63 个要滑很久 */
  .cgrid,.cgrid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .ccard-cap{padding:9px 10px;font-size:13px;}

  /* 案例详情：缩略图变小。主图不用再单独处理 —— 容器已是 aspect-ratio:4/3，
     手机上图跟着容器等比缩，不会变形也不会留白 */
  .cd-thumb{width:68px;flex:0 0 68px;}
  .cd-note{padding:14px 15px;}
  .cd-note-p{font-size:14.5px;line-height:1.9;}
  .cd-rel{margin-top:34px;}

  .cat-tabs-group .ct-label{font-size:11.5px;}
}

@media(max-width:480px){
  .nd-body{font-size:15.5px;}

  /* 产品维持两列：一列时 4:3 的图高 260px，加上标题一屏只看得到一台半，
     36 个产品要滑很久。两列虽然标题会折行，但一屏能扫 4 台，选型效率高得多。
     卡片同步收紧内边距，避免两列挤在一起。 */
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .pcard-body{padding:9px 10px 11px;}
  .pcard-title{font-size:12.5px;line-height:1.45;margin-bottom:7px;}
  .pcard-model{font-size:10.5px;padding:1px 6px;margin-bottom:5px;}
  .pcard-spec{font-size:11px;padding-top:6px;}

  /* 案例一列：案例是纯看图，图大比排得多重要 */
  .cgrid,.cgrid-4{grid-template-columns:minmax(0,1fr);}
  .cd-thumb{width:60px;flex:0 0 60px;}
}