@charset "utf-8";
/* ==========================================================================
   wb-lk-m.css  ·  黎民康 lemonkord 手机端版面修补层（2026-09-24）
   策略：只加一层覆盖 CSS，绝不改原 skin.css / common.css / index.css。
   只修用户实际反馈的三处：
     1) 厂家实力 / 技术水平 / 服务完善：图被 .ys01{} 限制在 59% 宽（实测 230px）-> 放宽到 92%
     2) 客户案例：两列只占 84% 且贴左、右侧留白。原意靠 .m-cp a:first-child li{margin-left:8%}
        补左缩进，但该选择器要求 li 在 a 里面，真实结构是 li>a，永远不匹配。
        -> 容器收到 92%（与全站其它区块对齐），两列 48%+4% 铺满，卡片等高。
     3) 公司简介：外层 .st-c{} 68% × 内层 .st-p{} 85% 双重收窄（实测 225px）-> 放宽
   回滚：删除本文件、还原 Public_header.html（备份在 /root/wb_lk_mcss_*）
   ========================================================================== */

/* --- 1. 厂家实力 / 技术水平 / 服务完善 ---------------------------------- */
.ys01, .ys02, .ys03, .ys04, .ys05 { width: 92%; margin: 1.7em auto; }
.m-ys:before { width: 92%; left: 4%; }
.m-ys .ys-p img { width: 100%; display: block; }

/* --- 2. 客户案例（首页 .m-cp 区块） ------------------------------------- */
.m-cp ul { width: 92%; margin: 0 auto; height: auto; overflow: hidden; }
.m-cp li { width: 48%; height: auto; float: left; margin: 0 0 4% 0; overflow: hidden; }
.m-cp li:nth-child(even) { margin-left: 4%; }
.m-cp li img { width: 100%; height: 9.3em; object-fit: cover; display: block; }

/* --- 3. 公司简介（首页 .m-st 区块） ------------------------------------- */
.m-st h2, .st-c { width: 92%; }
.st-p { width: 100%; }

/* --- 4. 品牌动态 / 行业动态 / 常见问题：列表补满宽度 -------------------- */
.zx01 li { width: 88%; }

/* --- 5. 首页资讯 tab（公司新闻/行业动态/常见问题）：让点击真的换内容 -------
   原主题把 3 个 .zx01 列表 float 成一条 1077px 横条，外层 overflow:hidden 只留第一个，
   而页面脚本只写了"列表少于2个时隐藏 tab"，没有任何切换实现 => 标签亮、内容不换。
   这里做最小补齐：默认只显示第一个列表，其余收起；点击由 wb-lk-m.js 切换 .wb-on。 */
/* ★ 主题脚本会给每个 .zx01 写【内联样式】float:left/display:block/width:359px，
   内联优先级高于样式表 => 必须用 !important 才能盖住它（实测踩坑）。 */
.m-zx .m-box.zx-c { width: 92% !important; margin: 0 auto !important; height: auto !important; overflow: visible !important; }
.m-zx .m-box.zx-c > .zx01 { float: none !important; display: none !important; width: 100% !important; }
.m-zx .m-box.zx-c > .zx01.wb-on { display: block !important; }

/* ===== 6. 手机端首页大图轮播（与 PC 共用广告位 id=6，4 张图） =====
   ★ 主题 skin.css 把 .sclwrap_box 写死 14.1em(≈197px)、.m-box 13.7em，
     而 1920x684 的图在 390px 宽下只有 139px 高 => 会留 58px 空白，必须覆盖。
   ★ 高度取 41.3vw(=2.42:1)，与 3 张主图的原始比例(2.42:1)一致，
     cover 裁切量 0%~7%，不会切到图上文字（实测 390px 下主标题清晰可读）。 */
.g-adv .sclwrap_box { height: 41.3vw !important; overflow: hidden !important; }
.g-adv .m-box      { height: 41.3vw !important; }
.g-adv .m-box li img {
  width: 100% !important; height: 41.3vw !important;
  object-fit: cover; object-position: center; display: block;
}
/* 圆点分页：主题写死 width:33.3%(按 3 张算)，改为 flex 均分，几张都对齐 */
.g-adv .m-cnt      { display: flex !important; height: auto !important; }
.g-adv .m-cnt li   { flex: 1 1 0 !important; width: auto !important;
                     float: none !important; height: 0.38em !important; }

/* ===== 7. 厂家实力 / 技术水平 / 服务完善：让"图 + 说明"成比例、成整体 =====
   用户反馈：图片放大到 359px 后，下方文字仍是主题的 0.8em(11.2px) 小字，
     紧贴图片下沿、左右顶到边 —— 「大图配小注」，字比图小一号，像说明书夹注。
   实测(390px)：img 358.8x230.8 而 li 仅 11.2px/2 行，比例严重失衡。
   改法：
     ① 字号随图片放大幅度同步提到 1em(14px)、行高 1.8，正文不再"小一号"；
     ② 把 ul 做成与图片【同宽同左边界】的浅蓝说明条（顶部 2px 主题蓝分隔线），
        文字在条内左右各留 1em，视觉上一图一文成套，不再"浮"在白卡上像夹注；
     ③ 图与说明条无缝相接（img 改 block，消除 inline 基线空隙）；
     ④ 三个块之间的留白 1.2em -> 1.7em，块与块分隔更清楚。
   ★ 选择器一律限定在 .m-ys 内，不碰 .m-st（公司简介）。
   ★ ul 的宽度不设值：父级 .ys01 已是 92%，ul 自然等宽，与图片逐像素对齐。 */
.m-ys .ys-p      { margin: 0 !important; }
.m-ys .ys-p img  { display: block !important;
                    /* ★ 三张 ys_pic 都是 443x285：给出宽高比后，
                       懒加载没跑到时也不会被 1x1 灰图撑成正方形（实测高 358.8 的布局跳动） */
                    aspect-ratio: 443 / 285; object-fit: cover; }
.m-ys ul         { background: #eef4fd !important; border-top: 2px solid #005ddb;
                   margin: 0 !important; padding: 0 !important; }
.m-ys li         { font-size: 1em !important; line-height: 1.8 !important;
                   color: #333333 !important; padding: 0.72em 1em !important;
                   text-align: left !important; }
.m-ys .ys01 h2, .m-ys .ys02 h2, .m-ys .ys03 h2 { font-size: 1em !important; }

/* ==========================================================================
   8. 全站统一字体栈（2026-09-24 第六轮）
   --------------------------------------------------------------------------
   核验发现：手机端各页字体「不协调」的根因不在字号，而在【字体栈本身】：
     首页   css/index.css + css/tb.css : "Microsoft Yahei", Verdana, Arial, ...
     内页   style/common.css          : 'Microsoft YaHei', arial, helvetica, ...
     另有一批元素（nav a / .m-cp span / .zx01 li a / .x_db span，源自
     skin.css 里 font-family:"Microsoft Yahei" 这种【不带任何兜底】的写法）
   真机（iPhone/Android）上 "Microsoft YaHei" 并不存在，于是：
     · 中文 -> 落到系统中文衬底（iOS=PingFang SC，Android=Noto Sans CJK）  ✅
     · 拉丁字母/数字 -> 首页走 Verdana、内页走 Arial、无兜底的走浏览器默认
                        （iOS 默认是衬线 Times）                ❌ 于是
        同一段「电话：13772496889」「2000平米」「回收率95%」里，
        中文一个字体、数字一个字体、有时还是衬线 —— 这就是"不协调"。
   改法：统一为【系统原生 UI 字体优先】的单一字体栈，
        让中英文与数字都来自同一套字族（iOS=SF Pro + PingFang SC，
        Android=Roboto + Noto Sans CJK，Windows=微软雅黑，与改前一致，桌面预览无变化）。
   ★ 只加这一层，不改主题任何 CSS；图标字体按类名放行，避免误伤。
   ========================================================================== */
html, body, body *,
input, textarea, select, button, optgroup {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Helvetica Neue", Helvetica, "Noto Sans SC", "Source Han Sans SC",
               "Microsoft YaHei", "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, sans-serif !important;
}
/* 图标字体放行（主题目前未用到；留作护栏，防止将来加图标字体被上面那条覆盖掉） */
.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"] { font-family: "Glyphicons Halflings" !important; }
.fa, .fas, .far, .fab, .iconfont, [class^="iconfont"], [class*=" iconfont"] { font-family: inherit !important; }

/* ==========================================================================
   9. 首页资讯区「公司新闻 / 行业动态 / 常见问题」——修正文字位移
   --------------------------------------------------------------------------
   实机（390px）量测出的三个客观病灶：
     a) 列表容器 .m-box.zx-c 宽 330.1 而上方 tab 行 358.8（右边界差 28.6px）
        —— 列表与自己的 tab 不在同一栏，视觉上"整体缩了一截/偏左"；
     b) 容器仍是主题的 .m-zx .sclwrap_box{height:14em=196px; overflow:hidden}，
        而 7 条内容高 203.9px -> 第 7 条被裁掉 8px，并越界压到页脚 .x_footer 上；
     c) 条目左缩进是主题写死的 padding-left:12%（=39.6px），文字明显右移。
   改法：容器与 tab 同栏（100%）、高度自适应且不裁切、缩进收到 1.25em。
   ★ .zx01 li 用 width:auto 而不是 100%：本页是 content-box，
     width:auto 才能让"内容宽 = 父宽 - padding"，写成 100% 会撑出容器。
   ========================================================================== */
.m-zx .sclwrap_box { position: static !important; height: auto !important; overflow: visible !important; }
.m-zx .m-box.zx-c  { position: static !important; width: 100% !important; height: auto !important;
                     margin: 0 !important; overflow: visible !important; }
.m-zx .m-box.zx-c > .zx01 { float: none !important; display: none !important; width: 100% !important; }
.m-zx .m-box.zx-c > .zx01.wb-on { display: block !important; }
.m-zx .zx01 li { width: auto !important; padding: 0 0 0 1.25em !important; line-height: 200% !important; }
.m-zx .zx01 li:before { left: 0.32em !important; top: 0.86em !important;
                        width: 0.3em !important; height: 0.3em !important; }
.m-zx { margin-bottom: 1.2em !important; }

/* ==========================================================================
   10. 内页列表卡片（style/common.css 那套主题）——不裁字 + 标题两行
   --------------------------------------------------------------------------
   实机量测：.news-list ul li 是 height:100px + overflow:hidden，
   而内容（.info padding 10 + 标题 + 10 + 摘要 40 + 10）实高 104px
   -> 【每一条卡片都被切掉 6px】；另外 .info{margin-left:120px} 使
   标题可用宽只剩 238px（16px 字号约 15 字），15~23 字的标题几乎全被省略号截断。
   ★ 实测踩坑：dl.time 与 div.info 的父元素是 <a class="go">，不是 <li>——
     所以 flex 必须加在 .news-list ul li > a 上；一开始加在 li 上等于没加，
     同时又把 .info 的 margin-left 去掉，结果日期块和正文叠成了上下两行（已修正）。
   ========================================================================== */
.news-list ul li { height: auto !important; min-height: 100px !important; overflow: visible !important; }
.news-list ul li > a { display: flex !important; align-items: stretch !important; }
.news-list ul li dl { float: none !important; width: 84px !important; flex: 0 0 84px !important; height: auto !important; }
.news-list ul li .info { margin-left: 0 !important; flex: 1 1 auto !important;
                         min-width: 0 !important; padding: 10px !important; }
.news-list ul li .info span { font-size: 15px !important; line-height: 1.45 !important;
                              display: -webkit-box !important; -webkit-box-orient: vertical !important;
                              -webkit-line-clamp: 2 !important; white-space: normal !important;
                              overflow: hidden !important; margin-bottom: 8px !important; }
.news-list ul li .info p { height: 40px !important; line-height: 20px !important; }

/* ==========================================================================
   11. 内页产品列表卡片标题（.product-list li .item span）——允许两行
   --------------------------------------------------------------------------
   实机量测（cid=5 工业废水处理）：两列网格每格可用宽仅 178px，
   而标题「工业废水为什么要使用专业的工业废水处理设备」(24 字) 需要 328px，
   在 nowrap+ellipsis 下只能看到约 12 字 —— 丢掉一半信息。
   cid=2「软化水设备的安装规范标准分类」需要 216px，同样被截。
   改法：改为最多两行（-webkit-line-clamp:2），行高收紧；
        卡片高度由模板里的 masonry 自动重排，不会错位。
   ========================================================================== */
.product-list li .item span { white-space: normal !important; line-height: 1.4 !important;
                              display: -webkit-box !important; -webkit-box-orient: vertical !important;
                              -webkit-line-clamp: 2 !important; overflow: hidden !important;
                              min-height: 2.8em !important; }

/* ====================================================================
   §12 产品列表（cid=8 等）：禁用 Masonry 瀑布流绝对定位，改【等高两列】
   原因：List_product.html 底部对 .product-list ul 调用了 masonry，
        产品图长宽比不一 => 两列各自流式堆叠 => 同行顶部不对齐（"凌乱不整齐"）。
        这里用 !important 覆盖 masonry 写入的 inline position/left/top。
   ==================================================================== */
.product-list ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  margin: 0 !important;
}
.product-list ul li {
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  width: 50% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 4px 12px 4px !important;
  display: flex !important;
}
.product-list ul li > a.item {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
/* 图片统一 4:3 裁切，保证两个卡片图片区高度完全一致 */
.product-list ul li .img {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 75% !important;
  position: relative !important;
  overflow: hidden !important;
}
.product-list ul li .img img {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* 标题固定两行高度，卡片底部对齐 */
.product-list ul li > a.item > span {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  line-height: 1.35 !important;
  flex: 0 0 auto !important;
}

/* ====================================================================
   §13 内容可见性兜底 —— ★重要
   wow.js(2014 v1.0.1) 会给「不在视口内」的 .wow 元素写入 inline
   style="visibility:hidden"，若因惯性滚动/低端机 scroll 事件丢失而
   未被触发，该块内容将【永久不可见】（表现为"只剩标题、内容丢失"）。
   此处用 !important 覆盖内联样式，保证内容永远可见；已激活元素的
   入场动画不受影响（wow.js 另行写入的 animationName 仍然生效）。
   ==================================================================== */
.wow {
  visibility: visible !important;
}