/* ============================================================
   2026-11 现代化补丁（追加在文件末尾，不改动上方原有规则）
   背景：原样式停留在 2014–2019 年模板审美——纯黑页脚、带灰边框
   的表格式产品网格、字体回落到宋体、hover 整块变红。
   这里只做六件事：字体栈 / 导航微交互 / 产品卡片 / 页脚 /
   二维码白色静区 / 图片文字蒙版。主色仍用 #c42733。
   注意：mob.css 在本文件之后加载，凡与之竞争的属性都用
   「.container .home-cp-fl …」这类更高特异性 + !important 覆盖。
   ============================================================ */

/* 1. 字体栈：中文优先系统黑体，避免 Windows 下回落到宋体 */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 2. 导航：hover 细化下划线，语言切换药丸化 */
.header .menu li{font-size:16px;margin-left:30px;}
.header .menu li a{position:relative;padding-bottom:6px;transition:color .2s;}
.header .menu li a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:currentColor;transition:width .25s ease;
}
.header .menu li a:hover::after,
.header .menu li a.on::after{width:100%;}
.header .menu li.lang{margin-left:22px;}
.header .menu li.lang a{
  display:inline-block;padding:3px 8px;border-radius:4px;font-size:13px;line-height:1;
  opacity:.8;transition:opacity .2s,background .2s;text-decoration:none;
}
.header .menu li.lang a:hover{opacity:1;background:rgba(255,255,255,.16);}
.header .menu li.lang a::after{display:none;}
.header2 .menu li.lang a{opacity:.65;}
.header2 .menu li.lang a:hover{opacity:1;background:rgba(0,0,0,.07);}

/* 3. 产品卡片：去灰边框 → 圆角卡片 + 统一图片底色 + hover 微动 */
.container .home-cp-fl ul{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0;padding:0;list-style:none;
}
.container .home-cp-fl ul li{
  float:none !important;width:auto !important;height:auto !important;
  border:0 !important;background:#fff !important;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.container .home-cp-fl ul li a{display:block;background:transparent !important;color:inherit !important;}
.container .home-cp-fl ul li a img{
  width:100%;height:230px;display:block;
  object-fit:contain;background:#f6f7f9;padding:16px;box-sizing:border-box;
  transition:transform .35s ease;
}
.container .home-cp-fl ul li a p{
  font-size:15px;line-height:1.4;padding:16px 12px;margin:0;
  color:#1a1d21;font-weight:500;letter-spacing:.2px;transition:color .2s;
}
.container .home-cp-fl ul li:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(16,24,40,.13);}
.container .home-cp-fl ul li:hover a img{transform:scale(1.05);}
.container .home-cp-fl ul li:hover a p{color:#c42733;}

/* 4. 页脚：纯黑 → 深灰 #15181c，7 列改 flex 等宽对齐 */
.footer{background:#15181c;}
.footer .footpic{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:32px 18px;align-items:start;
  padding:36px 0 30px;max-width:1050px;
}
.footer .footpic ul{float:none;margin:0;min-width:0;}
.footer .footpic ul h3{
  font-size:15px;font-weight:600;line-height:24px;margin-bottom:14px;
  color:#e8eaed;letter-spacing:.3px;
}
.footer .footpic ul li{line-height:28px;}
.footer .footpic ul li a{color:#9aa1a9;transition:color .2s;}
.footer .footpic ul li a:hover{color:#fff;border-bottom:0;}
.footer .footpic .gz{float:none;width:auto;margin:0;justify-self:end;}
.footer .footpic .gz .ewm{line-height:1.4;}
/* 二维码白色静区：erwei.png 四角是纯黑且 alpha 全 255，
   直接贴深色页脚会连成一片，普通扫码器识别不了，必须垫白底 */
.footer .footpic .gz .ewm img{
  width:100%;max-width:116px;background:#fff;padding:7px;border-radius:8px;box-sizing:border-box;
}
.banquan{background:#111417;}

/* 5. 新闻条底衬：图片上压白字，用渐变蒙版保证对比度 */
.news-by{background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 62%,rgba(0,0,0,0) 100%);}
.news-by h3{font-size:14px;line-height:30px;margin:0;font-weight:400;}

/* 6. 移动端 */
@media screen and (max-width:768px){
  .container .home-cp-fl ul{grid-template-columns:repeat(2,1fr);gap:12px;}
  .container .home-cp-fl ul li{height:auto !important;}
  .container .home-cp-fl ul li a img{height:150px;padding:10px;}
  .container .home-cp-fl ul li a p{font-size:13px;padding:10px 6px;}
  .footer .footpic{gap:22px 14px;padding:26px 0;max-width:100%;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));}
  .footer .footpic ul{min-width:0;}
  .footer .footpic .gz{justify-self:start;}
  .footer .footpic .gz .ewm img{max-width:96px;}
}

/* 7. 移动端：悬浮联系按钮在小屏上会压住正文（390px 下实测盖掉「行业应用」整段右侧），
   且与页脚联系方式重复。这里只保留「置顶」，其余隐藏，杜绝遮挡。 */
@media screen and (max-width:768px){
  #ycFixed .yc-btn:not(.yc-top),
  #ycFixed .yc-wx{display:none !important;}
  #ycFixed{bottom:24px;right:10px;gap:0;}
}

/* 8. 收尾：区块之间拉开层次，避免白卡片浮在白页面上看不出边界 */
.container .home-cp-fl ul li{
  border:1px solid #edf0f4 !important;
}
/* 联系条比页脚略亮一档，形成「页脚深灰 / 联系条中灰」两层 */
.home-lianxi-bg{background:#1d2126;}
/* 页脚二维码靠右由 grid 的 justify-self 处理（DOM 里已移到导航列之后） */
/* 公司照片：cover 在 215px 高、半宽容器里上下裁掉太多，抬高到 258px 并下移取景点 */
.home-box-about .a-z .a-pho{
  height:258px !important;
  background-position:center 58% !important;
}

/* 9. 英文站：副标题原来固定 310px 宽，英文会被拆成「…fasteners & / precision parts」两行，
      这里按 lang 属性区分，改用更宽的自适应盒子；导航英文单词更长，间距略收 */
html[lang="en"] .banner .biaoyu h1{width:auto;max-width:470px;}
html[lang="en"] .header .menu li{margin-left:26px;}
html[lang="en"] .header .menu li.lang{margin-left:18px;}
@media screen and (max-width:768px){
  html[lang="en"] .banner .biaoyu h1{max-width:100%;}
}

/* 10. 产品服务这类「只有下级栏目卡片、栏目正文为空」的单页：
       模板已按「无正文就不输出标题块」处理，卡片会直接贴到页脚，
       这里补一段底部留白，避免页面被截断的感觉。 */
.about:not(:has(.container)){padding-bottom:76px;}
@media screen and (max-width:768px){
  .about:not(:has(.container)){padding-bottom:44px;}
}

/* 11. 单页栏目正文排版（.yc-svc）：产品服务 / 服务流程用。
       只作用于模板里显式带 yc-svc 的容器，不会碰到旧站已有的 inline 样式段落。 */
.yc-svc{margin-top:26px;color:#4a5560;font-size:15px;line-height:1.85;}
.yc-svc > h3{
  margin:34px 0 14px;padding-left:13px;border-left:3px solid #c42733;
  font-size:20px;font-weight:600;color:#1a1f26;line-height:1.4;letter-spacing:.3px;
}
.yc-svc > h3:first-child{margin-top:0;}
.yc-svc > p{margin:0 0 14px;}
.yc-svc > table{
  width:100%;border-collapse:collapse;margin:6px 0 22px;
  font-size:14px;background:#fff;border:1px solid #e9edf2;border-radius:8px;overflow:hidden;
}
.yc-svc > table th,
.yc-svc > table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #edf0f4;line-height:1.7;}
.yc-svc > table thead th{background:#f7f8fa;color:#1a1f26;font-weight:600;white-space:nowrap;}
.yc-svc > table tbody tr:last-child td{border-bottom:0;}
.yc-svc > table tbody tr:hover{background:#fcfcfd;}
.yc-svc > ul{margin:6px 0 10px;padding:0;list-style:none;}
.yc-svc > ul > li{
  position:relative;padding:0 0 10px 22px;margin:0 0 4px;
}
.yc-svc > ul > li:before{
  content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;
  border-radius:2px;background:#c42733;
}
.yc-svc > ul > li b{color:#1a1f26;font-weight:600;}
.yc-svc a{color:#c42733;text-decoration:none;}
.yc-svc a:hover{text-decoration:underline;}
.yc-svc > p.yc-svc-cta{
  margin:30px 0 0;padding:16px 20px;background:#f7f8fa;border-radius:8px;
  border-left:3px solid #c42733;color:#1a1f26;font-size:15px;
}
@media screen and (max-width:768px){
  .yc-svc{font-size:14px;line-height:1.8;}
  .yc-svc > h3{font-size:18px;margin-top:26px;}
  .yc-svc > table{font-size:13px;}
  .yc-svc > table th,.yc-svc > table td{padding:9px 8px;}
  .yc-svc > table thead th{white-space:normal;}
}

/* 12. 正文区的 .gg-title h2 按原站约定保留：它是正文块的栏目标题，
       与 banner 的 h1 各司其职；产品服务 / 服务流程 / 联系我们 / 在线留言
       等单页统一保留，不隐藏、不单独改留白，沿用 .ptb 原生
       桌面 100px / 移动 30px，保证全站风格一致。 */

/* 13. 移动端表格列宽：三列在 390px 下列宽被第二、三列的长文本挤掉，
       第一列「大客户业务部」会被压成竖排三行。给首列一个下限宽度。 */
@media screen and (max-width:768px){
  .yc-svc > table{font-size:12.5px;}
  .yc-svc > table th:first-child,
  .yc-svc > table td:first-child{width:26%;min-width:74px;}
  .yc-svc > table th,.yc-svc > table td{padding:9px 7px;}
}

/* 14. 详情正文图片自适应：手机 / iPad 打开详情页时图片不超出屏幕。
       迁移过来的旧正文（UEditor）里图片常带写死的 width / height 属性
       甚至内联样式，小屏会横向撑破页面。这里统一按容器宽度等比缩放。
       作用范围：.main 是除首页外所有内页正文的公共容器（首页无 .main，
       轮播图不受影响）；banner、页脚二维码、悬浮图标都在 .main 之外。
       已核对容器：产品详情 .area .home-cp-fl、案例详情 .hangye .container、
       新闻/简介详情 .news-xx-pic、各单页 .yc-svc 等全部在 .main 内，
       一条规则全覆盖。 */
.main img{
  max-width:100% !important;
  height:auto !important;
}

/* 15. 移动端短页背景：body.home-bg 的深灰 #2e373e 是 PC 时代设计（style.css:27），
       body 背景会外溢成整块画布色；移动端页脚 .footer 整体隐藏（mob.css 第 20 行），
       内容不足一屏时版权条下方会露出大片深灰（如「行业资讯」只有一条新闻的页面，
       中英文表现相同）。移动端改白底与正文一致；PC 维持原样。
       已核对：首页主要区块均有自身背景（.home #f1f1f1、白卡片、黑/红色块），
       内页正文全是白底，不受影响。 */
@media screen and (max-width:768px){
  body.home-bg{background:#fff;}
}

/* 16. 移动端英文 banner 副标题：中文 23 字一行放得下、英文约 68 字符必折两行，
       属文字长度差异。用户选择「不动字号、改文案」——副标题碎片
       gywmmklbtsywjs 精简为 34 字符的 "Reliable Precision. Better Living."
       （保留中文原句两层意思：精密可靠 + 提升生活品质），
       12px 大写在 360px 屏（可用宽约 288px）也能一行放下，因此这里不改字体。
       若以后把副标题改回长句，可解除下面注释启用英文移动端 11px 兜底：
@media screen and (max-width:768px){
  html[lang="en"] .ggbanner .ggbiaoyu h2{font-size:11px;line-height:1.6;letter-spacing:.3px;}
}
*/