/* ============================================================
   前台样式 · 鸣朋纸业（mpaper.cn）版
   ------------------------------------------------------------
   本文件是「全局样式」，任何页面都会加载：
     配色令牌 → 基础重置 → 页头/页脚/通用板块骨架 → 响应式 → 咨询弹层
   页面专属样式在 assets/css/pages/ 下，由各页面按需 <link>。

   换肤：只改下面第 1 段 :root 里的色值，其余文件不用动。
   ============================================================ */



/* ==== 1. 配色令牌 ==== */
/* ============================================================
   兰博慧选 · 网站配色 Tokens
   基于 Logo 双色：环保绿 #4C9B4C ＋ 古铜纸张色 #c79d6e
   色值按 主色 / 标准色 / 辅助色 / CTA / 背景 / 文本 / 链接交互 / 状态色 / 页脚 分组
   对比度已核对，可直接用于生产
   ============================================================ */

:root {
  /* ---------- 页头高度（单一事实源） ----------
     页头是 position:fixed 的，主区靠 margin-top 让开。这三个值以前散落在
     style.css / responsive.css / home.css / cms.css 共 10 处，改动时必漏：
     曾经 980~1200px 区间 CMS 页留白 68px、主区少算 1px 边框、以及一个没写样式的
     .skip 链接白占 16px 行高，症状都是「页头下面多出一条白带」。
     现在只改这里，主区顶距 / 吸顶位置全部自动跟随。 */
  --topbar-h: 36px;                            /* 置顶工具条（≤1200px 隐藏） */
  --header-h: 80px;                            /* 导航条（≤1200 → 64，≤600 → 58） */
  --header-line: 1px;                          /* #news_main_top 底部分隔线 */
  --header-total: calc(var(--topbar-h) + var(--header-h) + var(--header-line));
  /* 页面下滑后工具条收起，吸顶元素要贴着「收起后」的页头 */
  --header-stuck: calc(var(--header-h) + var(--header-line));

  /* ---------- 主色 Primary ---------- */
  --color-primary: #4C9B4C;          /* 品牌绿（Logo 主，仅大字号/图形，勿作小字底色） */
  --color-primary-dark: #3D7D3D;     /* 按钮/深绿，白字对比 5.0:1，过 AA */
  --color-primary-tint: #E7F1E7;     /* 浅绿底：选中态 / 绿系 hover */
  --color-primary-mist: #F2F8F2;     /* 极浅绿底 */

  /* ---------- 标准色 Brand Standard ---------- */
  --color-brand-green: #4C9B4C;      /* 环保绿（Logo 主） */
  --color-brand-bronze: #c79d6e;     /* 古铜纸张色（Logo 辅，中性提示可用） */

  /* ---------- 辅助色 Auxiliary ---------- */
  --color-accent-bronze: #9C6B33;    /* 古铜金：主 CTA / 强调，白字 4.6:1 */
  --color-accent-gold: #B8863E;      /* 暖蜜金：点缀 / 高亮 */
  --color-accent-gold-light: #C9A36A;/* 浅金：描边 / 图标 */
  --color-ink-green: #20402C;        /* 墨绿：深色区块（Hero / Footer） */
  --color-paper: #FAF8F3;            /* 宣纸白：中性暖白 */

  /* ---------- CTA 行动色 ---------- */
  --color-cta: #9C6B33;              /* 主 CTA（古铜金，白字） */
  --color-cta-secondary: #4C9B4C;    /* 次 CTA（环保绿，白字） */
  --color-cta-hover: #825A2B;        /* 主 CTA hover（古铜金加深，白字） */

  /* ---------- 背景色 Background ---------- */
  --color-bg-page: #FAF8F3;          /* 页面主背景 */
  --color-bg-card: #FFFFFF;          /* 卡片 / 内容背景 */
  --color-bg-soft: #F3EFE6;          /* 浅色区块 / 交替行 */
  --color-bg-dark: #20402C;          /* 深色区块 */
  --color-footer-bg: #2d2d2d;        /* 页脚底色（中性近黑灰） */
  --color-footer-line: #444444;      /* 页脚分隔线 / 描边 */
  /* 页脚链接：默认白、hover 转绿（两个状态都过 AA，别再引入第三种颜色）。
     深底 #2d2d2d 上 #fff ≈ 11.6:1，#8FD48F ≈ 7.8:1；
     品牌绿 #4C9B4C 只有 3.9:1，小字号不过 AA，所以 hover 用提亮两档的 #8FD48F。
     全站页脚链接只用这一对，别再往里写 #fff / 古铜色——
     那正是以前「同一页脚三种链接色」的来源。 */
  --color-footer-link: #FFFFFF;      /* 页脚链接默认白 */
  --color-footer-link-hover: #8FD48F;/* 页脚链接 hover 绿（深底提亮档） */
  --color-footer-link-line: #808080; /* 页脚扁平按钮描边（中性灰 3.4:1，hover 转绿） */

  /* ---------- 文本色 Text ---------- */
  --color-text: #2B2A24;             /* 主文本（暖墨，非纯黑） */
  --color-text-secondary: #5E5C52;   /* 次文本 */
  --color-text-muted: #9A958A;       /* 弱文本 / 占位符 */
  --color-text-invert: #F5F1E8;      /* 反白文本（深色背景上） */

  /* ---------- 链接与交互 Link & Interaction ---------- */
  --color-link: #2E7D45;             /* 链接（深绿，保证白底可读） */
  --color-hover-green: #E7F1E7;      /* hover 背景（绿调，作用于绿色系） */
  --color-hover-warm: #EFEBE0;       /* hover 背景（暖调，作用于通用元素） */
  --color-border: #e0e0e0;           /* 边框（默认） */
  --color-border-strong: #D2C8B4;    /* 边框（强调） */

  /* ---------- 状态色 Status ---------- */
  --color-success: #3F9D52;          /* 成功 */
  --color-warning: #D99A2B;          /* 警告 */
  --color-error: #C0492F;            /* 错误（暖红） */
  --color-info: #2F6F8F;             /* 信息（沉静蓝，功能中性） */
  --color-notice: #c79d6e;           /* 中性提示（古铜） */
  --color-error-tint: #F6E3DE;       /* 错误 / 痛点浅底（配 --color-error 文字） */
  --color-overlay-dark: rgba(0,0,0,.5); /* 半透明遮罩（图片压字 / 箭头 hover） */
  /* 右侧悬浮工具条：咨询按钮的绿底已烘焙进位图（assets/img/side-consult.png），
     这里只管「返回顶部」的灰底。取华为官网同款 #7C7C7C，白箭头对比 4.2:1（图形需 ≥3:1）。 */
  --color-side-top: #7C7C7C;          /* 返回顶部按钮底色 */
  --color-side-top-hover: #6A6A6A;    /* 返回顶部按钮 hover */
}

/* ---------- 常用复合（可选，按需启用） ---------- */
:root {
  --radius-card: 12px;
  --radius-btn: 10px;
  --shadow-card: 0 1px 3px rgba(43, 42, 36, 0.06), 0 6px 18px rgba(43, 42, 36, 0.05);
}



/* ==== 2. 基础重置 + 头部/页脚/通用板块骨架 ==== */
/* =========================================================
   mpaper.cn 全站公用层 reset.css
   ① 浏览器默认样式清除 + 基础元素排版
   ② 图标字体（Material Icons）+ 表单控件字体继承
   ③ 全站公共结构：页头导航 / 右侧浮动栏 / 页底栏
   ④ 子页通用 banner（.new_banner_box）
   ⑤ 通用板块骨架（.hp-container / .hp-band / .hp-section-title）
   ⑥ 弹层组件（.cta-*：立即咨询 / 投递简历共用同一套皮肤）
   加载顺序：tokens → reset.css → style.css → 页面组 css → responsive.css
   适用：整站所有页面（中英文站共用）
   归类方法：按「选择器在哪些页面真实命中」统计，跨页面组者即为公用
   ========================================================= */

/* 默认样式清除 开始*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-appearance: none;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /*height: 100%;*/
 background-color: var(--color-bg-page);
}
img {
  border: 0;
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: var(--color-link);
  cursor: pointer;
  transition: color .2s;
}
a:hover {
  color: var(--color-primary-dark);
}
hr {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  margin: 10px 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td,th {
    padding: 0;
}
.image {
	background-image: url(../img/img_blank.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.clear {
	clear: both;
}
.richtext {
  /*font-size: 16px;
  line-height: 1.5;*/
  font-size: 13px;
  line-height: 1.5;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.richtext img,
.richtext video {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.richtext p {
  max-width: 100%;
  /*text-indent: 2em;*/
  margin: 0;
}
.richtext .table {
  overflow-y: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.richtext table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-collapse: collapse;  
  border-spacing: 0;
  text-align: left;
  margin-bottom: 60px;
  overflow: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.richtext table caption {
  text-align: left;
  padding: 10px 0;
  font-weight: bold;
}
.richtext table caption small {
  font-size: 12px;
}
.richtext th,
.richtext td {
  border: 1px solid var(--color-border);
  font-size: 14px;
  padding: 5px 10px;
  background-color: var(--color-bg-card);
}
.richtext th {
  font-size: 14px;
  padding: 10px;
  background-color: var(--color-bg-soft);
}
.richtext .face {
  display: inline-block;
}

/* 块级元素基础排版 —— 后台正文改用 wangEditor 后，编辑器会产出标题、列表、
   引用、分割线、图注这些结构，原样式表里一条都没有，全靠浏览器默认（标题忽大忽小、
   列表符号被全局重置抹掉）。这里只补「结构」，字号仍由各页面正文规则决定。 */
.richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 1.2em 0 0.6em;
}
.richtext h2 { font-size: 1.45em; }
.richtext h3 { font-size: 1.22em; }
.richtext h4 { font-size: 1.08em; }
.richtext h5, .richtext h6 { font-size: 1em; }
.richtext > :first-child { margin-top: 0; }
.richtext ul, .richtext ol {
  list-style-position: outside;
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.richtext ul { list-style-type: disc; }
.richtext ol { list-style-type: decimal; }
.richtext li { margin-bottom: 0.4em; }
.richtext li > ul, .richtext li > ol { margin: 0.4em 0 0; }
.richtext blockquote {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
}
.richtext hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1.6em 0;
}
.richtext figure { margin: 1em 0; }
.richtext figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: var(--color-text-muted);
  text-align: center;
}
.richtext a { color: var(--color-primary); text-decoration: underline; }
.richtext a:hover { color: var(--color-primary-dark); }
.richtext sup, .richtext sub { line-height: 0; }
/* 默认样式清除 结束*/

/**
https://github.com/google/material-design-icons
感谢Google
**/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/materialicons/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: url(../fonts/materialicons/MaterialIcons-Regular.eot) format('embedded-opentype'),
       url(../fonts/materialicons/MaterialIcons-Regular.woff2) format('woff2'),
       url(../fonts/materialicons/MaterialIcons-Regular.woff) format('woff'),
       url(../fonts/materialicons/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  /*cursor: default;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

/* 公共样式 开始 */
.main {
	margin-top: var(--header-total);
}

.main_tap {
	background-color: var(--color-bg-card);
	height: 50px;
	box-shadow: 0 3px 5px rgba(0,0,0,.1);
}
.main_tap .main_tap_wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 10px;
}
.main_tap .main_tap_wrap .tap_item {
	height: 50px;
	line-height: 50px;
	padding: 0 25px;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	border-left: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
}
.main_tap .main_tap_wrap .tap_item:hover,
.main_tap .main_tap_wrap .tap_item.active {
  color: var(--color-primary);
}
.main_tap .main_tap_wrap .tap_item:first-child {
	padding-left: 0;
	border-left: none;
}
/* 公共样式 结束 */

/* ---------- 表单控件继承全站字体（input 等默认不继承） ---------- */
input, textarea, select, button { font-family: inherit; }

/* 变量别名层（供各层 CSS 使用短名） */
/* =========================================================
   mpaper.cn 共用样式 style.css
   内容：① 变量别名层 ② 页头导航 / 右侧浮动按钮 / 页底栏
        ③ 通用板块骨架（hp-band / hp-container / hp-section-title）
        ④ 各内页共用模块（产品 / 品质 / 新闻 / 服务 / 招聘 / 联系 …）
   依赖：website-color-tokens.css、reset.css（须先加载）
   ========================================================= */

/* ---------- 变量别名层（供各模块 / 页面级 CSS 引用） ---------- */
:root {
  --c-primary:var(--color-primary); --c-primary-dark:var(--color-primary-dark); --c-bronze:var(--color-accent-bronze);
  --c-bg:var(--color-bg-page); --c-bg-tint:var(--color-bg-soft); --c-card:var(--color-bg-card);
  --c-ink:var(--color-text); --c-ink-2:var(--color-text-secondary); --c-ink-3:var(--color-text-muted);
  --c-border:var(--color-border); --c-border-strong:var(--color-border-strong); --c-dark:var(--color-ink-green);
  --c-bronze-soft:var(--color-brand-bronze);
}

/* ==========================================================================
   reset.css  ·  全站公用层
   ① 默认样式清除与基础排版  ② 页头导航 / 右侧浮动栏 / 页底栏
   ③ 子页通用 banner（.new_banner_box）  ④ 通用板块骨架（.hp-band 等）
   ⑤ 弹层组件（.cta-*：立即咨询 / 投递简历共用）
   生成方式：脚本按「选择器在哪些页面真实命中」自动归类，跨页面组即为公用
   ========================================================================== */



/* 页头导航 开始*/
.main_top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: var(--color-bg-card);
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main_top .header_box {
	flex: 1;
	height: var(--header-h);
	background-color: var(--color-bg-card);
	-webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 0 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main_top .header_logo img {
	height: 50px;
}
.main_top .header_nav {
	white-space: nowrap;
}
.main_top .header_nav .header_nav_item {
	position: relative;
	display: inline-block;
  font-size: 15px;
  color: var(--color-text-secondary);
  /* 高度与行高都取 --header-h：以前这里还挂着上下各 4px 透明边框，
     border-box 下把内容盒压成 72px，行盒 80px 撑出去，导航文字整体比
     Logo/CTA 中线低 4px（Logo 中线 76，导航文字中线 80）。下划线由 ::after 画，
     这 4px 边框没有任何作用，删掉即对齐。 */
  line-height: var(--header-h);
  height: var(--header-h);
  vertical-align: top;
  padding: 0 15px;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  /* text-shadow: 0 2px 10px rgba(0,0,0,.5); */
}
.main_top .header_nav .header_nav_item::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 12px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.main_top .header_nav .header_nav_item:hover {
  color: var(--color-primary);
}

.main_top .header_nav .header_nav_item:hover::after,
.main_top .header_nav .header_nav_item.active::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.main_top .header_nav .header_nav_item.active {
  font-weight: bold;
  color: var(--color-primary);
}
.header_shop_content {
	flex-shrink: 0;
  width: 140px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: var(--color-bg-soft);
}
.header_shop_content span {
	font-size: 14px;
}
/* 页头导航 结束*/

/* ---------- 右侧悬浮工具条（立即咨询 / 返回顶部） ----------
   尺寸按 huawei.com/cn 实测对齐：按钮 40×40、圆角 6px、贴右边缘 0（right:0）；
   咨询按钮底距 67px、返回顶部底距 24px，两者间距 3px。
   ⚠ z-index 必须是 90：要压住吸顶 Tab（z-50）与正文，但必须低于页头 .main_top（z-100）——
    手机端汉堡抽屉是 .main_top 的子元素，同一层叠上下文里，工具条若高过 100
    就会浮在整屏抽屉上方。咨询弹层是 1200，永远盖住本工具条。
   这块替换了原站遗留、全站无人引用的 .float_button（圆形 50px、右侧 10px）。 */
.side_tool {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: 40px;
  height: 107px;          /* 24 + 40 + 3 + 40：底距 + 顶部钮 + 间隙 + 咨询钮 */
  pointer-events: none;   /* 定位盒本身是空的，别挡住它左边/上面的正文点击 */
}

.side_tool_btn {
  position: absolute;     /* 绝对定位而非 flex 排列：返回顶部出现时咨询钮不会往上跳一格 */
  right: 0;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-invert);
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}

/* 两个按钮的底距与华为一致：咨询 67px、返回顶部 24px */
.side_tool_consult { bottom: 67px; }
.side_tool_top { bottom: 24px; }

/* 键盘用户才看得到焦点环（鼠标点不描边，避免贴边时出现半截蓝框） */
.side_tool_btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.side_tool_consult img {
  display: block;
  width: 40px;
  height: 40px;
}

.side_tool_consult:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(76, 155, 76, .35);
}

/* 返回顶部：滚过 320px 才出现（见 mp.js 第 5 段），出现时用小弹跳提示可点 */
.side_tool_top {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--color-side-top);
}

.side_tool_top.is-on {
  display: flex;
  animation: scroll_to_top_ani .3s ease-out;
}

.side_tool_top:hover {
  background-color: var(--color-side-top-hover);
}

.side_tool_top svg {
  display: block;
}



/* 页底栏 开始 */
#footer {
	background-color: var(--color-footer-bg);
	color: var(--color-text-invert);
}
/* 页脚一律同一套链路：默认白、hover 转绿。默认色不能用 --color-link（深绿落在
   #2d2d2d 上只有 2:1，等于看不清），也不能让各块自己写色。
   统一到 --color-footer-link 一件事：导航列、联系方式、二维码入口、底栏备案号、
   网站地图全部同色，hover 一律转 --color-footer-link-hover 的绿。 */
#footer a { color: var(--color-footer-link); }
#footer a:hover,
#footer a:focus-visible { color: var(--color-footer-link-hover); }

#footer .footer_content {
	max-width: 1400px;
	margin: 0 auto;
	background-color: var(--color-footer-bg);
}
#footer .footer_content .footer_wrap {
	font-size: 0;
	padding: 50px 0;
}
.footer_wrap > div {
	display: inline-block;
	width: 50%;
	vertical-align: top;
	font-size: 14px;
}
.footer_wrap .footer_nav {
	font-size: 0;
}
.footer_wrap .footer_nav .list_footer {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	font-size: 14px;
}
.footer_nav .list_footer .title,
.footer_wrap .footer_info .title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}
.footer_nav .list_footer .list_nav .item_nav,
.footer_wrap .footer_info .footer_details_views {
	display: block;
	color: var(--color-text-invert);
	line-height: 40px;
}
/* 导航列是 <a>，默认与页脚正文同为白色（不靠颜色区分层级，靠 hover 转绿给反馈）；
   联系方式那一行是 div（标签+值），本体保持反白，只让里面的邮箱 / 电话链接走 #footer a。 */
.footer_nav .list_footer .list_nav .item_nav { color: var(--color-footer-link); }
.footer_nav .list_footer .list_nav .item_nav:hover,
.footer_nav .list_footer .list_nav .item_nav:focus-visible {
	color: var(--color-footer-link-hover);
	opacity: 1;
}
.footer_wrap .footer_info .footer_details_views:hover {
	opacity: .7;
}
.footer_wrap .footer_info {
	padding: 0 10%;
}
#footer .footer_content_bottom {
	background-color: var(--color-footer-bg);
	border-top: 1px solid var(--color-footer-line);
}
.footer_content_bottom .footer_bottom {
	max-width: 1400px;
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 50px;
}
.new_banner_box {
	position: relative;
	overflow: hidden;
}
.new_banner_box .new_banner_wrap {
	padding-top: 22%;
}
.new_banner_box .cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	-webkit-animation: banner_box_cover 10s ease-out;
  animation: banner_box_cover 10s ease-out;
}
.new_banner_box .title_wrap {
	position: absolute;
  z-index: 5;
  color: var(--color-text-invert);
  width: 100%;
  max-width: 1400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.new_banner_box .title_wrap .title {
	font-size: 36px;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0,0,0.2);
}
.new_banner_box .title_wrap .subtitle {
	font-size: 14px;
	font-weight: 600;
	width: 50%;
  margin-top: 15px;
  line-height: 25px;
  text-shadow: 0 1px 2px rgba(0,0,0.2);
}

/* ===== 鸣朋首页（参考兰博布局：1200 容器 / 100px 板块间距 / 100vh hero） =====
   主题色沿用现有方案：主绿 var(--color-primary)，文字 var(--color-text)/var(--color-text-secondary)/var(--color-text-muted)，浅底 var(--color-bg-soft)。 */
.hp-container {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
}

/* ---------- 标签组件（列表筛选条 / 详情标签行） ---------- */
/* 后台「标签管理」给每个标签设的颜色，通过内联 --tc 传进来；没设就是品牌绿。
   整套只用 --color-* 令牌，换肤不用动这里。
   用「彩色圆点 + 中性胶囊」而不是整块上色：一屏十几个标签也不会花，
   只有当前选中的那一个才铺满颜色，一眼能看出自己在看什么。 */
.tagfilter {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 18px;
margin-bottom: 32px;
/* 白底而不是浅米底：站点底色本身就是宣纸米，米上叠米看不出边界，
   只剩一圈描边在撑着，远看像块脏印子。 */
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
}

.tagfilter__label {
display: inline-flex;
align-items: center;
gap: 4px;
flex: none;
padding-top: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
color: var(--color-text-secondary);
white-space: nowrap;
}

/* 「#」比一个小图标更贴标签语义，也不多一次字体请求 */
.tagfilter__label:before {
content: '#';
font-size: 15px;
font-weight: 700;
color: var(--color-brand-bronze);
}

.tagfilter__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}

.tagchip {
--tc: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px 6px 12px;
font-size: 13px;
line-height: 1.6;
color: var(--color-text-secondary);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 999px;
transition: color .18s, border-color .18s, background-color .18s, transform .18s;
}

.tagchip:before {
content: '';
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--tc);
transition: transform .18s, background-color .18s;
}

.tagchip:hover {
border-color: var(--tc);
color: var(--tc);
transform: translateY(-1px);
}

.tagchip:hover:before { transform: scale(1.35); }

.tagchip:focus-visible {
outline: 2px solid var(--tc);
outline-offset: 2px;
}

/* 选中态：只有这一个铺满颜色，其余保持中性 */
.tagchip.on,
.tagchip.on:hover {
color: var(--color-text-invert);
background: var(--tc);
border-color: var(--tc);
}

.tagchip.on:before { background: var(--color-text-invert); }

/* 引用条数：辅助信息，压到最小字重与字号 */
.tagchip__n {
font-size: 11.5px;
font-variant-numeric: tabular-nums;
color: var(--color-text-muted);
}

.tagchip:hover .tagchip__n,
.tagchip.on .tagchip__n { color: inherit; opacity: .78; }

.tagchip--sm { padding: 3px 11px 3px 9px; font-size: 12px; }
.tagchip--sm:before { width: 5px; height: 5px; }

/* 详情页标签行 */
.tagbox {
display: flex;
align-items: flex-start;
gap: 14px;
flex-wrap: wrap;
margin-top: 40px;
padding-top: 22px;
border-top: 1px solid var(--color-border);
}

.tagbox__label {
display: inline-flex;
align-items: center;
flex: none;
padding-top: 5px;
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
color: var(--color-text-muted);
white-space: nowrap;
}

.tagbox__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}

/* 侧栏竖排（FAQ 左栏沿用原来的位置，只是换成同一套胶囊） */
.tagfilter--stack {
flex-direction: column;
gap: 10px;
padding: 0;
margin-bottom: 0;
background: none;
border: 0;
border-radius: 0;
}

.tagfilter--stack .tagfilter__list { gap: 7px; }

/* 侧栏已经有「热门标签」这类小标题，条里再重复一个「标签」是废话 */
.tagfilter--stack .tagfilter__label { display: none; }

/* 标签组件的窄屏版式（≤720px）在 responsive.css 的 720 断点里。
   本文件不放任何媒体查询：加载顺序是 style.css → pages/*.css → responsive.css，
   同特异度后加载者胜，把断点写在这里会被页面 css 整块反盖。 */

/* ---------- 通用板块 ---------- */
.hp-band {
padding: 100px 0;
}

/* 板块交错底色：白 ↔ 浅绿，相邻板块明确区分 */
.hp-band--light {
background: var(--color-bg-card);
}

.hp-band--tint {
background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.hp-section-title {
text-align: center; margin-bottom: 56px;
}

.hp-section-title h2 {
font-size: 42px;
  color: var(--color-text);
  position: relative;
  padding-bottom: 18px;
  display: inline-block;
}

.hp-section-title h2:before {
content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 5px;
  background: var(--color-primary);
}

.hp-section-title h3 {
color: var(--color-text-muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  max-width: 80%;
  margin: 16px auto 0;
}



/* --------------------------------------------------------------------------
   补充说明：以下为「未被页面静态命中」但确属全站公用的规则
   （两个滚动/横幅动画、通用板块骨架色变体）
   原有的 .float_button / .btn_cart（购物车浮动按钮）已随功能下线删除：
   模板里从来没有渲染过 .btn_cart，右侧悬浮位现在由 .side_tool 接管。
   -------------------------------------------------------------------------- */

@-webkit-keyframes scroll_to_top_ani {
  0% {
    -webkit-transform: scale(0);
  }
  80% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: .8;
  }
}

@keyframes scroll_to_top_ani {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes banner_box_cover {
  0%{ -webkit-transform: scale(1.1); }
  100%{ -webkit-transform: scale(1); }
}
@keyframes banner_box_cover {
  0%{ transform: scale(1.1); }
  100%{ transform: scale(1); }
}
/* 联系我们 结束 */

/* ===== 通用板块骨架（首页与子页共用） =====
*/

.hp-band--dark {
background:var(--c-dark)!important;
}

.hp-band--gray {
background: var(--color-bg-soft);
}

/* 旧 class 兼容 */
.hp-band--white {
background: var(--color-bg-card);
}



/* ==== 3. 响应式 ==== */
/* =========================================================
   mpaper.cn 响应式 / 滚动动效 / 顶部平台栏 增强样式
   依赖：style.css （本文件在其后引入）
   作用域：首页为主，含全站级基础响应式规则（级联到子页同样生效）
   ========================================================= */

/* ---------- 0. 基础自适应 ---------- */
img { max-width: 100%; height: auto; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* 防横向滚动条：
   1) .reveal-left/.reveal-right 的初始位移会探出视口边缘
   2) 首页轮播 .swiper-wrapper 按设计会平移出容器
   两者叠加会让移动端出现左右晃动，这里在根元素上兜底。
   注意用 html（overflow 会传播到视口），不要用 body——
   body 加 overflow 会成为 fixed 头部 .main_top 的包含块，可能影响其定位。
   实测 overflow-x:clip 在本站不能阻止横滚，必须用 hidden */
html {
  overflow-x: hidden;
  /* 页头是 position:fixed：页脚里 /about#honor、/services#sv-customer 这类锚点跳过去时，
     目标会顶到 y=0 被 117px（窄屏 59px）的页头整块盖住。
     scroll-padding-top 让浏览器自己让位。比给每个区块补 scroll-margin-top 可靠
     —— 锚点目标散在十个页面、二十多个 id 上，一条兜底规则不会漏。 */
  scroll-padding-top: calc(var(--header-total) + 8px);
}

/* ---------- 平台入口 / 二维码弹层（底部导航区使用，向上弹出） ---------- */
.tb_link,
.tb_btn {
  color: var(--color-footer-link);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: color .2s, background .2s, border-color .2s;
}
.tb_link:hover,
.tb_btn:hover,
.tb_qr:hover .tb_btn { color: var(--color-footer-link-hover); background: rgba(143,212,143,.12); }

.tb_qr { position: relative; display: inline-block; }
.tb_pop {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 14px;
  width: 184px;
  display: none;
  z-index: 200;
  text-align: center;
  margin-bottom: 10px;
}
.tb_qr:hover .tb_pop,
.tb_qr.open .tb_pop { display: block; }
.qr_card { color: var(--color-text); }
.qr_card img { width: 144px; height: 144px; display: block; margin: 0 auto 8px; border-radius: 6px; }
.qr_card .qr_name { font-size: 15px; font-weight: bold; color: var(--color-ink-green); }
.qr_card .qr_tip { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.qr_placeholder {
  width: 144px; height: 144px; margin: 0 auto 8px;
  border: 2px dashed var(--color-border-strong); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 8px; line-height: 1.5;
}

/* ---------- 底部导航区：平台入口（.footer_social） ---------- */
.footer_wrap .footer_social { color: #fff; }
.footer_wrap .footer_social > .title { font-size: 18px; font-weight: bold; margin-bottom: 15px; }
.footer_social .social_list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.footer_social .social_list .tb_btn {
  border: 1px solid var(--color-footer-link-line);
  border-radius: 4px;
  line-height: 30px;
  color: var(--color-footer-link);
}
.footer_social .social_list .tb_btn:hover,
.footer_social .social_list .tb_qr:hover .tb_btn {
  /* 描边同步转绿：--color-footer-link 现在是白，拿它当 hover 描边会让绿胶囊变白边 */
  border-color: var(--color-footer-link-hover);
  color: var(--color-footer-link-hover);
  background: rgba(143,212,143,.12);
}
.footer_social .social_extra { display: flex; flex-wrap: wrap; gap: 2px; }
.footer_social .social_extra .tb_link { color: var(--color-footer-link); line-height: 28px; padding: 0 8px 0 0; }
.footer_social .social_extra .tb_link:hover { color: var(--color-footer-link-hover); }

/* ---------- 2. 移动端导航（汉堡菜单） ---------- */
/* 默认完全不占位、不显示；仅 ≤992px 时由断点规则显式开启 */
.nav_toggle {
  display: none !important;
  flex-shrink: 0;
  width: 46px; height: 46px;
  margin: 0 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
/* 悬停/按压只加深线条本身，不加底色不加边框 */
.nav_toggle:hover span,
.nav_toggle:active span { background: var(--color-primary); }
.nav_toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav_toggle span {
  display: block; width: 24px; height: 3px; background: var(--color-primary-dark); border-radius: 2px;
  transition: transform .3s, opacity .3s, background .2s;
}
.nav_toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav_toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav_toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 汉堡抽屉底部的动作区（商城 / 语言）。
   默认不显示：桌面导航是横排内联项，往里塞块级元素会把导航撑开；
   只有 ≤1200 断点里 .header_nav 变成抽屉时才由 responsive.css 打开。 */
.nav_panel_foot { display: none; }

/* ---------- 3. 滚动揭示动效 ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.js .reveal.reveal-left  { transform: translateX(-60px); }
html.js .reveal.reveal-right { transform: translateX(60px); }
html.js .reveal.reveal-scale { transform: scale(.94); }
html.js .reveal.reveal-zoom  { transform: scale(1.06); }
html.js .reveal.in { opacity: 1; transform: none; }

/* 仅淡入：用于自身依赖 transform 定位的元素（避免覆盖定位） */
html.js .reveal-fade { opacity: 0; transition: opacity .8s ease; }
html.js .reveal-fade.in { opacity: 1; }



/* 移动端：左右滑入降级为上移淡入。
   reveal-left/right 初始 translateX(±60px)，在窄屏纵排布局下会探出视口
   40px 以上（transform 计入可滚动溢出区，且 overflow-x:hidden 不能可靠阻止），
   导致页面可横滚、观感"导航区超宽"。≤980px 时统一改为 translateY(30px)。 */


/* ---------- 4. 响应式断点 ---------- */

/* 大平板 / 窄桌面：汉堡菜单的生效阈值（与完整导航的切换点一致） */


/* 平板 */


/* 手机 */


/* 超小屏 */


/* 语义补全用：屏幕阅读器与搜索引擎可见，视觉不占位（GEO/SEO 的 h1 用） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   无障碍「跳到主要内容」
   --------------------------------------------------------------------------
   这个链接以前**一条样式都没有**：作为普通行内元素排在 body 最前面，
   白占 16px 行高，把整站内容往下推 16px —— 页头是 fixed 的不会跟着走，
   于是每个页面页头下面都多出一条 15px 白带（页头 117，主区顶距 116 + 16 = 132）。
   必须 position:absolute 让它脱离文档流；聚焦时才出现在页头之上。
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 400;                 /* 高于 .main_top(z-100)，聚焦时才看得见 */
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background-color: var(--color-primary-dark);
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip:focus,
.skip:focus-visible {
  left: 0;
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* ---------- 底部导航区（footer）响应式 ---------- */
#footer .footer_content .footer_wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 40px 20px;
}
#footer .footer_wrap > div { display: block; width: auto; }
.footer_wrap .footer_nav { flex: 1 1 52%; }
.footer_wrap .footer_info { flex: 1 1 26%; padding: 0 3%; }
.footer_wrap .footer_social { flex: 1 1 22%; }
/* footer_bottom 内容区补 20px 水平内边距，与 footer_wrap 对齐同宽 */
.footer_content_bottom .footer_bottom { padding: 0 20px; }

/* 底栏右侧：网站地图 + 备案号并排。
   用 flex 而不是靠空格或 | 分隔符：备案号可能只有一个、也可能两个都没有，
   分隔符留在原地就会出现「｜ 空」这种孤立符号。 */
.footer_content_bottom .footer_bottom_right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 20px;
	/* 右下角悬浮工具条（40px 宽）是固定定位，页脚滚到屏幕底部时会压住最后一个备案号。
	   这里预留它的宽度 + 12px 间距，让备案号始终露在工具条左边。 */
	padding-right: 52px;
}
.footer_content_bottom .footer_sitemap {
	flex: none;
	color: var(--color-footer-link);
	text-decoration: none;
	transition: color .2s;
}
.footer_content_bottom .footer_sitemap:hover,
.footer_content_bottom .footer_sitemap:focus-visible {
	color: var(--color-footer-link-hover);
	text-decoration: underline;
}

/* 备案号（ICP / 公安） -----------------------------------------------------
   两个号码可能只有一个，也可能都有，用 flex 排，不靠空格与 margin 撑。
   公安那个是「警徽图标 + 号码」整体，图标必须与文字垂直居中，
   歪一点在页脚这种小字号里非常明显。 */
.footer_beian {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	gap: 4px 20px;
}
.footer_beian .beian {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	color: var(--color-footer-link);
	text-decoration: none;
	-webkit-transition: color .2s;
	transition: color .2s;
}
.footer_beian .beian:hover,
.footer_beian .beian:focus-visible {
	color: var(--color-footer-link-hover);
	text-decoration: underline;
}
.footer_beian .beian__ico {
	width: 20px;
	height: 20px;
	-webkit-flex: 0 0 20px;
	flex: 0 0 20px;
	display: block;
}






/* ---------- PC 顶部工具条（热线 / 网上订购 / 语言切换，首页 + 子页共享）
   原 home.css 迁入：样式挂在 .main_top--topbar 修饰类上，未加修饰类的页面不受影响 ---------- */
.main_top--topbar { flex-direction: column; align-items: stretch; }

.topbar {
  background: var(--color-ink-green);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  max-height: 36px; /* 与 topbar-inner 同高；自身裁剪，收起时不影响下拉导航 */
  overflow: hidden;
  transition: max-height .3s ease;
}
/* PC 端页面下滑：工具条收起，只锁定 header_box */
.main_top--topbar.is-scrolled .topbar { max-height: 0; }
/* 下滑锁定后：header_box 底部细阴影与内容软分隔（顶部 1px 细线由 #news_main_top 提供） */
.main_top--topbar .header_box { transition: box-shadow .3s ease; }
.main_top--topbar.is-scrolled .header_box {
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 16px rgba(31,45,38,.10);
}
.topbar-inner {
  height: 36px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar a { color: inherit; text-decoration: none; transition: color .2s; }
.topbar a:hover { color: #c79d6e; }
.topbar-hotline { display: inline-flex; align-items: center; gap: 6px; }
.topbar-hotline .material-icons { font-size: 14px; }
.topbar-hotline a { color: #c79d6e; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.topbar-hotline a:hover { color: #fff; }
.topbar-links { display: inline-flex; align-items: center; gap: 14px; }
.topbar-order, .topbar-lang { display: inline-flex; align-items: center; gap: 5px; }
.topbar-order .shop_logo { height: 16px; width: auto; }
.topbar-lang .material-icons { font-size: 14px; }
.topbar-sep { width: 1px; height: 12px; background: rgba(255,255,255,.25); }

/* 页头底部分隔线：白 header 与下方内容之间的 1px 浅灰边界 */
#news_main_top { border-bottom: 1px solid var(--color-border, rgba(0,0,0,.08)); }

/* 子页：主区顶距与页头严格对齐。
   页头 = 工具条 36 + 导航 80 + 分隔线 1 = 117px，全部由 :root 的 --header-total 算出来
   （窄屏自动变 65 / 59），不要再在这里写死数字 */
#profile_main, #product_main, #news_main, #technology_main,
#service_main, #recruit_main, #about_main, #news_views_main, #productviews_main {
  margin-top: var(--header-total);
}



/* ---------- 内页统一对齐 about 版式（contact/culture/job/news/products/quality/service）
   ① banner 固定 420px（移动端 280）、遮罩渐变、标题容器 1200/48 居中
   ② main_tap 下滑吸顶（sticky top 80/64 + 棕色分割线 + z-50），与 about 一致
   ③ main_tap 容器宽度对齐 1200/48（覆盖 reset 默认 1400/10） ---------- */
.new_banner_box {
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.new_banner_box .new_banner_wrap {
  position: absolute;
  inset: 0;
  padding-top: 0 !important; /* 覆盖 quality 页 45% 撑高旧规则 */
}
/* 遮罩渐变（about .hp-subbanner .mask 同款，替代各页缺失的 mask 元素）
   中间原来只有 .16，压在「金牌服务」那张明亮天空图上时白字几乎看不见，
   统一提到 .40 上下：暗调图看不出差别，亮调图才托得住白色标题。 */
.new_banner_box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,34,24,.46) 0%, rgba(16,34,24,.40) 50%, rgba(16,34,24,.54) 100%);
}
.new_banner_box .title_wrap {
  max-width: 1200px;
  width: 100%;
  padding: 0 48px;
  text-align: center;
}
.new_banner_box .title_wrap .title {
  font-size: clamp(32px, 3.2vw, 50px);
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.new_banner_box .title_wrap .subtitle {
  width: auto;
  max-width: 900px;
  margin: 16px auto 0;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 1px;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}


/* main_tap 吸顶 + 棕色分割线（about.css 同款，覆盖页：products/news/quality/service/job，
   contact/culture 无此元素自动跳过；#profile_main=about 已有专属规则不在此列） */
#product_main .main_tap, #news_main .main_tap, #technology_main .main_tap,
#service_main .main_tap, #recruit_main .main_tap, #about_main .main_tap,
#news_views_main .main_tap, #productviews_main .main_tap {
  position: sticky;
  /* 吸顶时工具条已收起，贴的是「导航条 + 1px 线」，不是含工具条的 --header-total */
  top: var(--header-stuck);
  z-index: 50;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-brand-bronze);
}

/* 手机端 header_box 58px：吸顶条贴齐（about 页 tab ≤768px 隐藏不受影响，此档为分类导航页准备） */

/* main_tap 容器宽度对齐 1200/48 */
#product_main .main_tap_wrap, #news_main .main_tap_wrap, #technology_main .main_tap_wrap,
#service_main .main_tap_wrap, #recruit_main .main_tap_wrap, #about_main .main_tap_wrap,
#news_views_main .main_tap_wrap, #productviews_main .main_tap_wrap {
  max-width: 1200px;
  padding: 0 48px;
}


/* 各内页内容容器移动端水槽统一 20px（桌面值在各页面 css 中改为 1200/48） */


/* ---------- 内页 banner 文字统一（除首页外全站栏目页） ----------
   H1/主标题最大宽度 55%，P/副标题最大宽度 80%，水平居中；
   inner 内文字挂 reveal-fade 出场动画（淡入，不动 transform，可与绝对定位共存） ---------- */
.hp-subbanner .inner h1,
.pd-banner .inner h1,
.new_banner_box .title_wrap .title {
  max-width: 55%;
  margin-left: auto;
  margin-right: auto;
}
.hp-subbanner .inner p,
.pd-banner .inner p,
.new_banner_box .title_wrap .subtitle {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
/* inner 文字出场动画：副标题晚 0.15s，形成先后层次 */
.hp-subbanner .inner h1.reveal-fade,
.pd-banner .inner h1.reveal-fade {
  transition-delay: .05s;
}
.hp-subbanner .inner p.reveal-fade,
.pd-banner .inner p.reveal-fade {
  transition-delay: .2s;
}

/* about banner 的 .inner 是 flex 子元素（默认收缩到内容宽），拉满 1200 容器，
   55%/80% 的宽度百分比才能相对整容器计算（pd-banner .inner 本身是定宽块，无需处理） */
.hp-subbanner .inner {
  width: 100%;
}

/* 产品详情页（product_infolist）移动端：收窄详情区内边距，规格表满宽并收紧单元格，避免页面级横向溢出 */


/* 品质保障技术色带移动端：纵排，图片定高 */


/* 内页 banner ken-burns 动画（scale 1.1）溢出致移动端可横滚 ~10px：裁剪 banner 自身 */
.new_banner_box { overflow: hidden; }


/* ---------- 2026-09-23 移动端回归修复 ---------- */
/* 各内页 main_tap 分类导航移动端文字统一收紧为 products 同款（原 18px/25px 侧距在 375px 屏换行） */

/* service 锚点导航移动端隐藏（5 项在 640 以下必然换行，移动端直接滚动浏览） */

/* 品质保障应用场景圆形图标：移动端三等分一行完整显示（原 120px 圆 + 25px 边距超宽） */




/* ==== 4. 咨询弹层 ==== */
/* =========================================================
   立即咨询 CTA（整站共用）：头部按钮 + 在线留言弹层
   ========================================================= */

/* 头部「立即咨询」按钮（放在 .header_box 内 nav_toggle 之前） */
.header-cta {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 16px;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background .2s, transform .2s;
}
.header-cta:hover { background: var(--color-brand-bronze, #c79d6e); color: #fff; transform: translateY(-1px); }



/* ---------- 弹层 ---------- */
.cta-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cta-mask[hidden] { display: none; }

.cta-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 28px 26px 22px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.cta-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.cta-close:hover { color: #333; }

.cta-head { margin-bottom: 18px; }
.cta-title { font-size: 20px; font-weight: 700; color: #222; }
.cta-sub { font-size: 13px; color: #888; margin-top: 6px; }

.cta-row { margin-bottom: 14px; }
.cta-row > label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.cta-row input[type="text"],
.cta-row input[type="tel"],
.cta-row input[type="email"],
.cta-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;   /* textarea 不继承页面字体，不写就会变成等宽宋体 */
  color: inherit;
  outline: none;
  transition: border-color .2s;
}
.cta-row input:focus, .cta-row textarea:focus { border-color: var(--color-primary); }
/* 只读字段（招聘弹层的「应聘职位」）：视觉上明确"不用改"，别让人反复点击 */
.cta-row input[readonly] {
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  cursor: default;
}
.cta-row input[readonly]:focus { border-color: #ddd; }

/* 咨询场景 chips */
.cta-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.cta-chip { position: relative; margin: 0; }
.cta-chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.cta-chip span {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  transition: .2s;
}
.cta-chip span:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cta-chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.cta-chip input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 验证码行：题面与输入框同一行，题面不被 input 的 width:100% 挤到下一行 */
.cta-cap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta-cap > b {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 0 14px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-text);
  background-color: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  white-space: nowrap;
}
.cta-cap > input { flex: 1 1 auto; min-width: 0; }

/* 只有触发风控时才出现验证码，必须给一句解释，
   否则用户会觉得「刚才明明填完了，怎么又要我做题」。 */
.cta-cap-tip {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #888;
}

/* 弹层内的提示条：挑战回跳时后端文案显示在表单顶部 */
.cta-note {
  font-size: 13px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.cta-note.is-ok  { background: #eaf7ee; color: #1e7a45; }
.cta-note.is-err { background: #fdecec; color: #c0392b; }

.cta-error {
  background: #fdecec;
  color: #c0392b;
  font-size: 13px;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.cta-error[hidden] { display: none; }

.cta-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.cta-submit:hover { background: var(--color-brand-bronze, #c79d6e); }

.cta-tip { font-size: 12px; color: #aaa; text-align: center; margin-top: 10px; }

/* 成功态 */
.cta-success { text-align: center; padding: 20px 0 8px; }
.cta-success[hidden] { display: none; }
.cta-success-ico {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 30px;
  line-height: 56px;
}
.cta-success-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.cta-success-text { font-size: 13px; color: #777; margin-bottom: 16px; }
.cta-again {
  padding: 9px 24px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: .2s;
}
.cta-again:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* 弹层打开时锁整页滚动
   html 上有 overflow-x:hidden，body 的 overflow 就**不再向视口传播**，
   锁 body 等于没锁（背后照样能滚）。所以锁滚动一律落在 html 上。
   --lock-sbw 由 JS 写入（滚动条宽度），补掉滚动条消失时的横向跳动。 */
html.scroll-lock { overflow: hidden; }
html.scroll-lock body { padding-right: var(--lock-sbw, 0px); }
body.cta-lock { overflow: hidden; }   /* 旧类名保留，避免历史页面失样式 */

/* 手机端：底部抽屉式弹层 */


/* =========================================================
   ⑦ 表单辅助类（跨页面共用）
   ---------------------------------------------------------
   .hp    蜜罐字段：不能 display:none（部分机器人会跳过不可见元素），
          移到视口外即可，视觉上完全不可见、屏幕阅读器也不读。
   .form_note  提交结果提示条：成功绿边、失败红边，留言/投递简历共用。
   ========================================================= */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form_note {
  margin: 0 0 20px;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.7;
  border-left: 4px solid var(--color-brand-bronze);
  background-color: var(--color-bg-page);
  color: var(--color-text-secondary);
}
.form_note.is-ok { border-left-color: var(--color-primary); }
.form_note.is-err {
  border-left-color: var(--color-error);
  background-color: var(--color-error-tint);
  color: var(--color-error);
}
/* 算术验证码题面：各表单页可再覆盖尺寸，这里只保证「不写页面 CSS 也不会塌」 */
.cap__q {
  display: inline-block;
  padding: 0 16px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-text);
  background-color: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  white-space: nowrap;
}

/* ==========================================================================
   分页器（paginate() 输出，全站共用）
   --------------------------------------------------------------------------
   为什么放在 style.css：列表页各自只加载 style.css + pages/{页面}.css，
   把 .pager 写在某一个页面样式里，其他列表页的分页就是浏览器默认链接样式
   （16px 下划线小字）。分页是通用组件，必须进基础层。
   ========================================================================== */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 44px 0 8px;
}
.pager__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* flex: 0 0 auto —— 不让「下一页 →」被 .pager 的 flex-wrap 挤窄后折成两行；
     nowrap 是双保险（窄屏时宁可整条换行，也不要字被拆开） */
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 44px;
  height: 44px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-secondary);
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: .2s;
}
.pager__item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pager__item--on {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
/* 上一页 / 下一页：与页码同字号（14.5 会让「上一页」看起来比数字小一号，
   这两个是并列的点击区，不该有主次），靠横向内边距做出宽度差 */
.pager__item--dir {
  padding: 0 22px;
  font-size: 15px;
  letter-spacing: .2px;
}
.pager__gap { padding: 0 2px; color: var(--color-text-muted); }