/* ============================================================= KIG 移动端精修层 / Mobile refinement layer (2026-11-09) 由 foot.asp 全站引入，位于 style.css 与 enhance.css 之后。 目标：不改动桌面布局，只在 <=768px 收口以下 8 类问题： 1 固定头高度补偿 2 Hero 内容溢出被导航裁切 3 底部工具条未固定 4 Cookie 条过高 + 与客服球重叠 5 客服球遮挡表单 6 flex 子项未 min-width:0 导致横向溢出 7 英文单词被拦腰折断 8 卡片列数 / 标题截断 / 触控目标 Accessibility: 交互目标 >=44px；尊重 reduced-motion； 适配 iOS safe-area；正文对比度 >=4.5:1。 ============================================================= */ :root{ --m-head-h:52px; /* 与 .head 的 13.333vw @390px 对齐 */ --m-bar-h:56px; /* 底部工具条 */ --m-gutter:16px; /* 内容安全边距 */ --m-touch:44px; /* WCAG 最小触控目标 */ --m-safe-b:env(safe-area-inset-bottom,0px); --m-safe-t:env(safe-area-inset-top,0px); --m-ink:#1f2d3d; --m-muted:#5a6c7d; /* 对白底 5.6:1，达 AA */ --m-brand:#e0a200; /* 黄底上的深色文字用原色 */ } @media (max-width:768px){ /* ---------- 1. 固定头高度补偿 ---------- 桌面 main{margin-top:80px}，移动端头只有 ~52px，两者不一致。 统一按 CSS 变量补偿，避免内页 banner / 首页 hero 顶到导航下面。 */ main{margin-top:var(--m-head-h)!important} /* ---------- 2. 首页 Hero：内容溢出被裁 ---------- .khero-overlay 用 align-items:center，内容 349px > banner 166px， 导致 .khero-inner 顶部跑到 y<0 被 fixed 头盖住。 解法：banner 给足高度 + 文字按移动端缩放 + 允许纵向排布。 */ #swiper-banner{ height:auto!important; min-height:clamp(330px,88vw,420px)!important; } #swiper-banner .swiper-wrapper, #swiper-banner .swiper-slide{height:100%!important} #swiper-banner .swiper-slide img{ height:100%!important;min-height:clamp(330px,88vw,420px); object-fit:cover;object-position:center; } .khero-overlay{ align-items:flex-end!important; padding:var(--m-head-h) 0 26px; background:linear-gradient(180deg,rgba(17,17,17,.62) 0%,rgba(17,17,17,.72) 55%,rgba(17,17,17,.86) 100%)!important; } .khero-inner{padding:0 var(--m-gutter)!important;max-width:100%!important} .khero-eyebrow{font-size:10px!important;letter-spacing:.16em!important;margin:0 0 8px!important} .khero-title{font-size:clamp(23px,6.6vw,30px)!important;line-height:1.18!important;margin:0 0 10px!important} .khero-sub{font-size:13px!important;line-height:1.5!important;margin:0 0 16px!important;max-width:100%!important} .khero-cta{gap:8px!important;margin:0!important} .kcta{padding:10px 18px!important;font-size:13px!important;min-height:var(--m-touch)} /* ---------- 3. 底部工具条固定 ---------- 原来是 position:static（文档流末尾），滚到页尾才露出半截。 改为真正固定底栏，并给页脚让出空间，避免遮住内容。 */ .mobile-bottom{ position:fixed!important;left:0!important;right:0!important;bottom:0!important; width:100%!important;height:calc(var(--m-bar-h) + var(--m-safe-b))!important; padding-bottom:var(--m-safe-b)!important; display:flex!important;justify-content:space-around!important;align-items:stretch!important; background:#fdb812!important;box-shadow:0 -3px 14px rgba(0,0,0,.14); z-index:900!important; } .mobile-bottom .mobile-bottom-item{ height:auto!important;width:25%!important;flex:1!important; padding:0!important;display:flex!important;align-items:center!important; } .mobile-bottom .mobile-bottom-item a{ height:var(--m-bar-h)!important;min-height:var(--m-touch)!important; display:flex!important;align-items:center!important;justify-content:center!important; color:#3a2c00!important; /* 黄底 7.2:1，达 AA */ } .mobile-bottom .mobile-bottom-item i{font-size:22px!important;transform:none!important;margin:0!important} .foot{margin-bottom:calc(var(--m-bar-h) + var(--m-safe-b))!important} body{padding-bottom:0!important} /* ---------- 4. Cookie 条：压缩 + 避让客服球 ---------- 原条 148px 高，占近 1/4 屏且压住产品卡；与右下客服球重叠。 */ #kigCk{ left:10px!important;right:10px!important; bottom:calc(var(--m-bar-h) + var(--m-safe-b) + 8px)!important; padding:11px 12px!important;border-radius:12px!important; font-size:12px!important;line-height:1.45!important; max-width:none!important; } #kigCk .kig-ck-in{gap:9px!important} #kigCk .kig-ck-t{flex:1 1 100%!important;min-width:0!important} #kigCk .kig-ck-b{width:100%!important;gap:8px!important} #kigCk button{ flex:1!important;min-height:var(--m-touch)!important; padding:8px 10px!important;font-size:12.5px!important; } /* Cookie 未处理期间：客服球上移让位，避免两个浮层打架； 同时给页面底部留出等同高度，用户可把被压住的内容滚上来。 */ body:has(#kigCk.show) .kcw-btn{bottom:210px!important} body:has(#kigCk.show) .foot{margin-bottom:calc(var(--m-bar-h) + var(--m-safe-b) + 138px)!important} /* ---------- 5. 客服球：缩小 + 避让表单 ---------- 原 56px 悬浮在 bottom:96px，会盖住 Contact 页输入框。 */ .kcw-btn{ width:50px!important;height:50px!important; right:12px!important; bottom:calc(var(--m-bar-h) + var(--m-safe-b) + 12px)!important; border-radius:16px!important; opacity:.88; } .kcw-btn:hover,.kcw-btn:focus-visible,.kcw-btn.on{opacity:1} .kcw-btn:focus-visible{outline-width:3px!important} /* 表单区右侧留出球体宽度，滚到底也不会被盖 */ .common-main form, .send-inquiry{padding-right:0!important} .common-main input[type=text], .common-main input[type=email], .common-main textarea{ padding-right:56px!important;box-sizing:border-box!important; } .common-main{padding-bottom:76px!important} /* ---------- 6. 消灭横向溢出 ---------- .common-main{flex:7.5} 无 min-width:0，被卡片 min-content 撑到 471px。 */ html,body{overflow-x:hidden!important;max-width:100%!important} .common-content .common-wrapper{max-width:100%!important;overflow:hidden} .common-main{ min-width:0!important;width:100%!important;flex:1 1 100%!important; padding-left:0!important;padding-right:0!important; box-sizing:border-box!important; } .common-main,.applic-list,.applic-list ul,.common-pages{ max-width:100%!important;overflow:hidden; } /* 表格/长 URL 等硬内容不撑破视口 */ .common-main table{max-width:100%!important;display:block;overflow-x:auto} /* 只对正文图片放开高度；banner / 产品位图需要保持铺满，不能一刀切 */ .common-main img,.pro-detail .content img,.news-text img{ max-width:100%!important;height:auto!important; } .banner img{ height:100%!important;width:100%!important; object-fit:cover!important;object-position:center!important; } /* ---------- 7. 英文单词不再被拦腰折断 ---------- word-break:break-all 会把 growing 拆成 "g rowing"。 正文改为按词换行，仅超长无空格串才打断。 */ .project-list .project-content, .news-con, .hot-pro .pro-intro, .newslist-1 li .news-text, .applic-name, .prolist-1 .pro-name, .side-pro ul li .pro-name{ word-break:normal!important; overflow-wrap:break-word!important; -webkit-hyphens:none;hyphens:none; } .project-list .project-content{font-size:14px!important;line-height:1.65!important} /* ---------- 8a. Quality 证书卡：两列整齐网格 ---------- 原三列 137px 卡 + 30px 间距 = 471px，右侧被切。 */ .applic-list ul{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; width:100%!important; list-style:none!important;padding:0!important;margin:0 0 22px!important; } /* 奇数张时最后一张占满整行，避免孤列与分页按钮挤在一起 */ .applic-list ul li:last-child:nth-child(odd){grid-column:1 / -1} /* 分页独立成行，不与卡片浮动重叠 */ .common-pages{float:none!important;clear:both!important;display:flex!important;justify-content:center!important;gap:8px!important;margin:0 0 18px!important} .applic-list ul li{ width:100%!important;margin:0!important; min-width:0!important;overflow:hidden!important; border:1px solid #e6eef3!important;border-radius:10px!important; background:#fff!important; } .applic-item{display:block!important;overflow:hidden!important} .applic-img{padding-top:70%!important} /* 固定高度 + overflow:hidden：line-clamp 在本站被多处 -webkit-box 覆盖， 用确定的盒高最可靠，标题绝不会跑出卡片。 */ .applic-name{ display:block!important; white-space:normal!important; height:58px!important;min-height:58px!important;max-height:58px!important; overflow:hidden!important; padding:8px 10px!important;font-size:12.5px!important; line-height:1.5!important;box-sizing:border-box!important; text-align:center!important; } .applic-name br{display:none!important} /* ---------- 8b. 首页产品卡：标题两行不截断 ---------- */ /* Hero 与 PRODUCTS 眉标之间留出呼吸，避免视觉粘连 */ .hot-pro-wrapper{padding-top:30px!important} .ksec-head{margin-bottom:26px!important} .hot-pro ul li{width:calc(50% - 8px)!important;margin:0 0 14px!important} .hot-pro ul{display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;gap:0!important} .hot-pro .pro-name{ display:block!important; white-space:normal!important; height:48px!important;min-height:48px!important;max-height:48px!important; overflow:hidden!important;box-sizing:border-box!important; font-size:13px!important;line-height:1.35!important; padding:9px 8px!important; } /* ---------- 8c. 内页 banner 与搜索框 ---------- 内页 banner 原为 24vw 深色实底，视觉正常，不改高度（拉高会露出灰底）。 仅收敛标题字号，避免长标题换行；eyebrow 保持可见。 */ .banner-title .banner-text{font-size:clamp(21px,5.8vw,28px)!important} .banner-eyebrow{font-size:9.5px!important;letter-spacing:.14em!important} .banner-title{gap:7px!important;padding-bottom:4px!important} .search-input .stbn{width:auto!important;min-width:84px;padding:0 12px;min-height:var(--m-touch)} .search-input .seatxt{min-height:var(--m-touch)} .foot-right{font-size:12px!important;text-align:center;padding:0 12px} /* 搜索区两侧留白，按钮不被客服球压住 */ .search-box{padding-right:62px!important} /* ---------- 8d. 触控目标统一 >=44px ---------- */ .common-pages a,.common-pages span{min-width:var(--m-touch);min-height:var(--m-touch);display:inline-flex;align-items:center;justify-content:center} .nav-btn{min-width:var(--m-touch);min-height:var(--m-touch);align-items:center;justify-content:center} } @media (max-width:380px){ .applic-list ul{grid-template-columns:1fr!important} .hot-pro ul li{width:100%!important} .khero-title{font-size:22px!important} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }