被压到一两个字宽，
「导热垫片」竖成四行，「无人机」竖成三行，首尾条目还被切掉（实测 390px 下产品中心页
7 个条目全部竖排）。改成移动端常见的横向滚动条：不换行、不收缩、可左右滑。
断点取 1200px 与头部切汉堡菜单的断点对齐，避免 751~1200px 之间又出现夹缝。 */
@media only screen and (max-width: 1200px) {
.sub-menu {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 5vw !important;
}
.sub-menu::-webkit-scrollbar { display: none; }
.sub-menu a {
white-space: nowrap;
flex-shrink: 0;
line-height: 50px;
}
.sub-menu a + a { margin-left: 28px; }
/* main.css 里 .about .sub-menu 用 space-between + padding:0 5% 强行摊开，
条目多时同样会被压竖排，这里一并接管。 */
.about .sub-menu { justify-content: flex-start; }
.about .sub-menu a + a { margin-left: 28px !important; }
}
/* ⑧ 首页产品区 tab 条在 751~1200px 之间溢出
main.css 只在 ≤750px 给 .tab .bt 加了 overflow-x:auto，而 751~1200px 之间
仍是一行 flex + margin-left:3vw，7 个产品栏目排不下 —— 实测 768px 视口文档宽 805px。
把同一套横向滚动处理提前到 1200px（与头部断点对齐）。 */
@media only screen and (max-width: 1200px) {
.home-page .product .fw-box .center .tab {
flex-direction: column;
padding-right: 0;
width: 100%;
}
.home-page .product .fw-box .center .tab .bt {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.home-page .product .fw-box .center .tab .bt::-webkit-scrollbar { display: none; }
.home-page .product .fw-box .center .tab .bt .swiper-pagination-bullet {
margin-left: 0 !important;
margin-top: 15px;
white-space: nowrap;
flex-shrink: 0;
}
.home-page .product .fw-box .center .tab .bt .swiper-pagination-bullet + .swiper-pagination-bullet {
margin-left: 24px !important;
}
}
/* ⑨ 100vw 含滚动条宽度，桌面端会让这些整宽区块比 body 宽出一条滚动条
（被 body{overflow-x:hidden} 裁掉，表现为右侧内容缺一小条）。改成 100%。
移动端是覆盖式滚动条，本来就没差，属于顺手收掉的隐患。 */
body,
#footer .footer,
#footer .footer .center,
#footer .footer .footer-bottom { width: 100%; }
/* ⑩ 汉堡菜单按钮的点按区域太小
main.css 在 ≤750px 把按钮缩到 30×34，低于 iOS/Android 44px 的最小点按目标，
而它是移动端唯一的导航入口。这里把点按区扩到 44×44，三根横杠仍保持 30px 宽的视觉，
只是重新居中，外观不变。 */
@media only screen and (max-width: 750px) {
#header .header .header-cot .mobile-menu { width: 44px; height: 44px; }
#header .header .header-cot .mobile-menu span { width: 30px; left: 7px; top: 21px; }
#header .header .header-cot .mobile-menu span:nth-child(1) { top: 11px; }
#header .header .header-cot .mobile-menu span:nth-child(3) { top: 31px; }
#header.open .header .header-cot .mobile-menu span:nth-child(1),
#header.open .header .header-cot .mobile-menu span:nth-child(3) { top: 21px; }
}
/* ⑪ iOS Safari 聚焦表单会把整页放大
main.css 在 ≤640px 把 input / select / textarea 的字号降到 14px。
iOS Safari 的规则是：聚焦时字号 < 16px 就自动放大页面，而且失焦后不会自己缩回去，
用户填完「在线留言」会发现整站变成横向滚动的放大状态。
字号回到 16px 即可，视觉上和 14px 差别很小，换来的是不再跳缩放。 */
@media only screen and (max-width: 640px) {
.about .contact-us .box .form form .form-item input,
.about .contact-us .box .form form .form-item select,
.about .contact-us .box .form form .form-item textarea { font-size: 16px; }
}
/* ⑫ 富文本里的宽表格：滚动处理原来只在 ≤640px 生效
正文容器在桌面端是 1132px，641~1132px 之间（平板竖屏、分屏窗口）超宽表格照样撑破版心。
断点提到 1200px，与其他移动端处理对齐。桌面端不受影响。 */
@media only screen and (max-width: 1200px) {
.jj-article-body table,
.news-particulars .cont .txt table { display: block; overflow-x: auto; max-width: 100%; }
}
/* ⑬ 品质保障页顶部三张卡片的配图在窄屏被从顶部硬裁
.img-box 在移动端是固定 350px 高 + overflow:hidden，而里面的 img 只有 width:100%，
高度按原比例撑到 690px，等于只露出图片最上面一半。改成等比裁切并居中取景。
断点跟 main.css 里设 height:350px 的那条（≤1280px）保持一致。 */
@media only screen and (max-width: 1280px) {
.Product_service #cont2 .top-img .tou .item .img-box img {
height: 100%;
object-fit: cover;
object-position: center;
}
}
/* ⑭ 「查看该系列产品 ›」「查看详情 ›」的箭头在窄屏被甩到下一行
.test .icon 是主题给「多个图标 + 文字」的三栏列表设计的（column-count:3，移动端 2），
本站每个 .icon 里只放一条入口链接，被分栏挤成半栏宽后文字和箭头就断行了。
这两处用法在本套模板里都只有一个子元素，直接取消分栏并禁止链接断行。 */
.Product_service #cont1 .test .icon { column-count: 1; }
.Product_service #cont1 .test .icon div p a,
.home-page .product .fw-box .center .content .box .da .left .icon div a { white-space: nowrap; }
/* ⑮ 关于我们「总裁致辞 / 总裁寄语」切换按钮在 320px 机型撑出横向溢出
两个按钮 min-width:160px + 中间 5vw 间距，320px 视口下合计 336px（实测文档宽 328px）。
改成允许收缩：336px 以上的屏幕仍是原来的 160px，再窄就等比缩一点，外观基本无变化。 */
@media only screen and (max-width: 640px) {
.about .content4 .box .names .tab .item { min-width: 0; flex: 0 1 160px; }
}
/* ⑯ 常用导航链接的点按区域偏小（触摸屏建议 ≥44px）
头部/页脚 LOGO（回首页）在移动端只有 70×22，面包屑「首页」只有 24×17。
用「加 padding + 等量负 margin」把可点区域撑到 44px 高：
元素的外框尺寸不变，页面一个像素都不动，只是手指更容易点中。 */
@media only screen and (max-width: 1200px) {
#header .header .header-cot > a.left,
#footer .footer .footer-top-bg .footer-top > a {
padding: 11px 0;
margin: -11px 0;
}
.banner-sub .breadcrumb a,
.news-particulars .nav .crumb a,
.news-particulars .nav > a {
padding: 10px 0;
margin: -10px 0;
}
}
/* --------------------------------------------------------------------------
18. 首页新闻中心：桌面端缩略图不显示
.list 是 display:flex + align-items:center，而 .img 是个空 div（图走 background-image）。
main.css 只在 ≤1200px 的分支里给了 .img 高度（210×150），
桌面端那条基础规则（main.css:1794）只写了 width:290px 没写 height——
align-items:center 下 flex item 按内容高度收缩，空 div 的内容高度是 0，
于是整块缩略图在桌面端塌成 0 高、完全不显示，移动端反而正常。
高度按素材比例（imageSize 取的是 580×380 ≈ 1.526）配桌面两档宽度算：
290px 宽 → 190px 高（.list 高 220px，上下各留 15px）
220px 宽 → 144px 高（矮屏档 .list 高 160px，上下各留 8px）
⚠ 必须包在 min-width 里：jj.css 在 main.css 之后加载，
写成无条件规则会反过来盖掉 main.css 里 ≤1200px 的 150px。
顺带补 flex-shrink:0——桌面端基础规则也漏了，标题长时图片会被压窄。
-------------------------------------------------------------------------- */
@media screen and (min-width: 1201px) {
.home-page .home-news .xw-box .center .content .right .news-lists .list .img {
height: 190px;
flex-shrink: 0;
}
}
/* 矮屏笔记本档，对应 main.css 里把 .list 压到 160px、.img 压到 220px 的那条 */
@media screen and (min-width: 1366px) and (max-height: 900px) {
.home-page .home-news .xw-box .center .content .right .news-lists .list .img {
height: 144px;
}
}
/* --------------------------------------------------------------------------
19. 主行动按钮 .jj-btn-primary（实心品牌蓝）
用在「查看该系列产品」（产品总览页）和「查看详情」（首页产品轮播）这两个
进入产品列表的主入口上。原来是裸链接 + 内联 color，跟正文没有层次区分。
站内次级按钮（.gyTitle .button / .btns .btn）是「白底 + 描边 + hover 转蓝」，
这里用实心蓝拉开主次，不跟它们撞。
inline-flex 而不是 block：这两处外层都是 ，按钮要跟着文字流走、宽度包内容。
-------------------------------------------------------------------------- */
.jj-btn-primary {
display: inline-flex;
align-items: center;
padding: 13px 30px;
border-radius: 8px;
background: #146dc6;
color: #fff !important; /* 盖掉 .icon a 那条继承来的 color */
font-size: 16px;
font-weight: bold;
line-height: 1;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(20, 109, 198, 0.28);
transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.jj-btn-primary .iconfont {
margin-left: 8px;
font-size: 13px;
transition: transform 0.25s;
}
.jj-btn-primary:hover {
background: #0f57a0;
box-shadow: 0 8px 22px rgba(20, 109, 198, 0.38);
transform: translateY(-2px);
}
.jj-btn-primary:hover .iconfont { transform: translateX(4px); }
.jj-btn-primary:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(20, 109, 198, 0.30);
}
/* 触摸屏没有 hover，位移动画只会让点击有延迟感；同时收窄到更适合拇指的尺寸 */
@media only screen and (max-width: 1200px) {
.jj-btn-primary { padding: 12px 24px; font-size: 15px; }
.jj-btn-primary:hover { transform: none; }
}
/* --------------------------------------------------------------------------
20. 产品总览页入口按钮所在的 .icon 容器
⚠ 这里同时修正上面第 ⑭ 条：那条写的是 `.Product_service #cont1 .test .icon`
（ID 1 + class 3），而 main.css:3310 是
`.Product_service #cont1 .content .cp1 .test .icon`（ID 1 + class 5），
特异性更高，所以 column-count:3 一直没被盖掉，入口链接始终被挤在 1/3 栏宽里断行。
下面用与 main.css 完全相同的选择器重写（jj.css 后加载，同特异性后者胜）。
.icon div 原本是 align-items:center + text-align:center，
那是给「图标在上、文字在下」的三栏图标列表设计的；本站这里只放一个入口按钮，
居中会跟左对齐的标题、正文错位，桌面端改成左对齐。
移动端（≤750px）main.css 已经是 flex-direction:initial + justify-content:left，
本来就是左对齐，不用动，所以下面限定 min-width:751px。
-------------------------------------------------------------------------- */
.Product_service #cont1 .content .cp1 .test .icon,
.Product_service #cont1 .content2-2 .cp1 .test .icon,
.Product_service #cont1 .content3 .cp1 .test .icon {
column-count: 1;
}
/* text-align 不分端：移动端 main.css 没重置它，会继承桌面基础规则的 center，
于是按钮在手机上居中、跟左对齐的标题正文错位。 */
.Product_service #cont1 .content .cp1 .test .icon div,
.Product_service #cont1 .content2-2 .cp1 .test .icon div,
.Product_service #cont1 .content3 .cp1 .test .icon div {
text-align: left;
}
@media screen and (min-width: 751px) {
.Product_service #cont1 .content .cp1 .test .icon div,
.Product_service #cont1 .content2-2 .cp1 .test .icon div,
.Product_service #cont1 .content3 .cp1 .test .icon div {
align-items: flex-start;
padding-top: 40px; /* 原 56px 是给图标列表留的，按钮不需要那么空 */
}
}