@charset "utf-8";
/* ==========================================================================
   responsive.css —— 全站响应式覆盖层
   --------------------------------------------------------------------------
   设计原则：
   1. 本文件必须在 global.css / default.css / css.css / index.css 之后加载。
   2. 除少量新增类外，所有规则一律写在 @media 内，因此 >=1241px 的电脑端
      渲染结果与改造前完全一致，不影响原有 PC 版式。
   3. 老站大量使用 float + 固定 px 宽度，且模板里有内联 style，
      故关键布局属性使用 !important 强制覆盖。

   断点：
     <=1240px  大屏笔记本 —— 主容器由固定 1200px 变为流式
     <=1024px  平板横屏   —— 栏目改百分比、列数递减
     <=768px   手机/平板竖屏 —— 单列布局、导航折叠为汉堡菜单
     <=480px   小屏手机   —— 进一步压缩
   ========================================================================== */


/* ==========================================================================
   0. 新增工具类（全尺寸生效，不影响原有元素）
   ========================================================================== */

/* 汉堡菜单按钮 —— 由 responsive.js 注入，默认隐藏，仅窄屏显示 */
.m-navToggle{
    display:none;
    float:right;
    width:44px;
    height:44px;
    margin:1px 0 0 0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}
/* 线条用站点主色 —— .menuWrap 背景是白色，白线会隐形 */
.m-navToggle span{
    display:block;
    width:24px;
    height:2px;
    margin:5px auto;
    background:#1a3c69;
    -webkit-transition:all .25s ease;
    transition:all .25s ease;
}
.m-navToggle.active span:nth-child(1){-webkit-transform:translateY(7px) rotate(45deg);transform:translateY(7px) rotate(45deg);}
.m-navToggle.active span:nth-child(2){opacity:0;}
.m-navToggle.active span:nth-child(3){-webkit-transform:translateY(-7px) rotate(-45deg);transform:translateY(-7px) rotate(-45deg);}

/* 宽表格 / 宽内容的横向滚动容器 —— 由 responsive.js 包裹生成 */
.rwd-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

/* 顶栏的手机端精简文案：默认（含电脑端）不显示，仅 <=768px 启用。
   电脑端因此与改造前完全一致。 */
.mTopTxt{display:none;}

/* “全部产品分类”的开合指示器（+/−），同样必须默认隐藏，
   否则电脑端的分类按钮上会多出一个 + 号。 */
.m-proToggleIcon{display:none;}

/* 移动端遮罩 */
.m-navMask{
    display:none;
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.45);
    z-index:900;
}
.m-navMask.active{display:block;}


/* ==========================================================================
   1. <=1240px —— 主容器流式化
   ========================================================================== */
@media screen and (max-width:1240px){

    /* --- 主容器：1200px 固定宽 -> 流式 --- */
    /* .contentmy 原为 display:table，width:auto 在 table 上是“收缩包裹”，
       会让高级搜索页整体缩成内容宽度并居中，必须改回块级 */
    .contentmy{display:block !important;}

    .w,
    .main,
    .bannerGroup,
    .contentmy,
    .a1{
        width:auto !important;
        max-width:1200px;
        margin-left:auto;
        margin-right:auto;
        padding-left:12px;
        padding-right:12px;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    img{max-width:100%;}

    /* --- 头部：.headerR 为绝对定位，需跟随容器 padding --- */
    .headerR{right:12px !important;}

    /* --- 导航下拉面板不能溢出容器 --- */
    .proGuidePanel9{max-width:calc(100% - 220px);}
    .proGuidePanel{width:auto !important;max-width:100%;}

    /* --- 首页 banner：#banner 固定 762px -> 由左右定位撑开 --- */
    .bannerGroup{position:relative;}
    #banner{
        left:220px !important;
        right:232px !important;
        width:auto !important;
    }
    .bannerIn .w{padding-left:12px;padding-right:12px;}
    .bnSideR{right:12px !important;}

    /* --- 首页栏目区：220 + 980 -> 百分比 --- */
    .colSort{width:20% !important;}
    .colPro{width:79% !important;}
    /* 商品卡片原靠固定 203px 高度对齐；改流式后标题行数不一，float 会互相卡住，
       故改用 flex 换行 —— 同行自动等高，也顺带解决 ul 高度塌陷。
       这里不能加 !important：非当前 tab 的 ul 带内联 display:none，
       必须让内联样式继续生效，jQuery 的 show()/hide() 才能正常切换。 */
    .colPro .colProC{overflow:hidden;}
    .colPro .colProC ul.colProList{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        overflow:hidden;
    }
    .colPro .colProC ul.colProList li{
        float:none !important;
        width:20% !important;
        height:auto !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .colPro .colProC ul.colProList li a{
        width:auto !important;
        height:auto !important;
        display:block !important;
    }
    .colPro .colProC ul.colProList li .pro-img{
        display:-webkit-box !important;
        display:-ms-flexbox !important;
        display:flex !important;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        width:100% !important;
        height:150px;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .colPro .colProC ul.colProList li .pro-img img{
        max-width:100% !important;
        max-height:100%;
        width:auto !important;
        height:auto !important;
    }

    /* --- 首页行业应用 5 图 --- */
    .app_1{
        width:20% !important;
        height:auto !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    /* 这 5 张图的原始比例并不统一：多数是 234x307，另有两张是 245x522，高宽比差了近一倍。
       电脑端因为 img 上写死了 233x307 的行内尺寸，看不出问题；
       一旦改成按百分比缩放，各瓦片高度就相差一倍，多列浮动排版会互相顶开、下一行整体错位。
       这里把图片区统一成 233:307 的比例框，图片裁切填充，保证每块高度一致。 */
    .p3 > a:first-child{
        display:block;
        position:relative;
        width:100%;
        padding-bottom:131.76%;      /* 307 / 233 */
        overflow:hidden;
    }
    .p3 > a:first-child img{
        position:absolute !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover;
    }
    /* 栏目名条固定 30px 高，名字长时不换行，超出显示省略号，免得把瓦片撑高 */
    .p3 > div{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        padding:0 6px;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    /* --- 内页：侧栏 220 + 主体 960 -> 百分比 ---
       .content 带 1px 边框且是 content-box，须改 border-box 才不会多出 2px */
    .side{width:20% !important;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .content{
        width:78% !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    /* --- 产品列表：同样改 flex，避免卡片高度不一时 float 卡位 --- */
    ul.proList{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    }
    ul.proList li{
        float:none !important;
        width:23% !important;
        height:auto !important;
        margin:1% !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    ul.proList li .pro-imgwrap{width:100% !important;}
    ul.proList li .pro-img{
        display:-webkit-box !important;
        display:-ms-flexbox !important;
        display:flex !important;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        width:100% !important;
        height:150px !important;
    }
    ul.proList li .pro-img img{
        max-width:100% !important;
        max-height:100%;
        width:auto !important;
        height:auto !important;
    }

    /* --- 产品详情：400 + 555 -> 百分比 --- */
    .proPhoto{width:40% !important;height:auto !important;}
    .proDesc{width:58% !important;}
    .proPhotoBig .pro-img{width:100% !important;height:auto !important;display:block !important;}
    .spec-preview,
    .jqzoom{max-width:100% !important;height:auto !important;}
    .jqzoom img{max-width:100% !important;height:auto !important;}
    .spec-scroll{width:100% !important;}
    .spec-scroll .items{width:calc(100% - 32px) !important;}

    /* --- 通用内容块 --- */
    .b11,
    .b13,
    .c8,
    .e1,
    .e3,
    .e4{width:auto !important;max-width:100%;}
    /* index.css 里 .e3 是 width:960px;height:280px;overflow:hidden，图片同样写死
       960×280。这里把宽度放开、图片高度改 auto 后，容器仍是 280px：窄屏上图片
       只有 100 出头，下面就空出近 180px，看着行业图和产品列表隔了一大段。
       容器高度必须一并放开。 */
    .e3{height:auto !important;}
    .e3 img{width:100% !important;height:auto !important;}
    .b11 .left{width:auto !important;float:none !important;overflow:hidden;}
    .b11 .right{max-width:30%;}

    /* --- 页脚 --- */
    .sitemap dl{width:25% !important;-webkit-box-sizing:border-box;box-sizing:border-box;}
}


/* ==========================================================================
   2. <=1024px —— 移动布局起点（平板横屏及以下）
   --------------------------------------------------------------------------
   该站 PC 版式需要约 1000px 才舒展：主导航 9 个条目 + 220px 的“全部产品分类”，
   低于 1024px 就会折行压住 banner，头部 logo 也会被搜索框覆盖。
   因此从这里开始改为移动布局：头部堆叠、导航折叠为汉堡菜单、banner 纵向排列。
   内页的“侧栏 + 主体”两栏在本档仍然保留，到 768px 才合并为单列。
   ========================================================================== */
@media screen and (max-width:1024px){

    body{overflow-x:hidden;}

    /* ---------- 2.1 顶部欢迎条 ---------- */
    .topL{width:52% !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    .topR{width:48% !important;}

    /* ---------- 2.2 头部：左 logo + 右菜单图标（同一行），搜索框换行 ----------
       用 flex 让 logo 与菜单图标真正垂直居中对齐：
       h3.logo 自带 margin-top:20px、图高 65px，而按钮仅 44px，
       靠 float 对齐会差 20 多像素。float 保留作为不支持 flex 时的降级。 */
    .header{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        height:auto !important;
        position:relative !important;
        padding:8px 0 !important;
        text-align:left;
    }
    /* .w 的 clearfix 伪元素在 flex 下会变成一个多余的 flex item */
    .w.header:after{display:none !important;}

    h3.logo{
        float:left !important;
        margin:0 !important;
        -webkit-box-ordinal-group:1;
        -ms-flex-order:1;
        order:1;
    }
    /* logo：手机端用品牌标识 l1.jpg（Tiger Flex），而不是中文名 logo.png。
       l1.jpg 原本是左侧滚动条 l1~l4 轮播中的第一张，这里用背景图直接取用，
       既不必改 19 个模板，也不会让轮播在手机上一直动。
       电脑端仍是「左侧滚动条 + 右侧中文名」的原设计，完全不受影响。 */
    h3 .zuobian,
    #colee{display:none !important;}
    h3 .youbian{
        float:none !important;
        width:auto !important;
        height:auto !important;
        display:block;
    }
    h3 .youbian a{
        display:block;
        width:150px;
        height:59px;                 /* 由 164x65 等比缩放而来 */
        background:url(../Index/images/l1.jpg) no-repeat left center;
        -webkit-background-size:contain;
        background-size:contain;
    }
    h3 .youbian a img{display:none !important;}

    /* 汉堡按钮由 responsive.js 注入到 .header，与 logo 同行右对齐 */
    .header .m-navToggle{
        display:block !important;
        float:right;
        margin:0 !important;
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        order:2;
    }

    /* 搜索框整行独占：flex 下用 100% 基准强制换行，float 下用 clear 降级 */
    .headerR{
        position:static !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        -ms-flex:0 0 100%;
        flex:0 0 100%;
        -webkit-box-ordinal-group:3;
        -ms-flex-order:3;
        order:3;
        clear:both;
        margin-top:8px;
        overflow:hidden;
    }
    .headerR .searchIn input.searchKey{font-size:13px;}
    /* .searchBar 自带 3px 边框且是 content-box，width:100% 会溢出 6px。
       高度取 44px：减去上下各 3px 边框后内容区正好 38px，
       容得下同为 38px 的输入框与按钮（此前外框 38px 只剩 32px，底部被裁掉 3px），
       44px 也符合移动端触摸目标的最小尺寸。 */
    .headerR .searchBar{
        float:none !important;
        width:100% !important;
        height:44px !important;
        position:relative !important;
        -webkit-box-sizing:border-box !important;
        box-sizing:border-box !important;
    }
    /* 外框底色取与边框/按钮同色：外框原本透明，输入框与按钮之间、按钮与
       边框之间任何亚像素级缝隙都会混成白色（真机上表现为按钮右下角露白边）。 */
    .headerR .searchBar{background:#e99028 !important;}
    .headerR .searchIn{
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        right:80px;              /* 原 86px：按钮只有 80px，多出的 6px 会露出底色 */
        width:auto !important;
    }
    .headerR .searchIn input.searchKey{
        display:block !important; /* inline-block 会参与行盒，strut 在下方留白 */
        width:100% !important;
        height:38px !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .headerR .searchHandle{
        position:absolute !important;
        right:0 !important;
        top:0 !important;
        width:80px !important;
        height:38px !important;
        line-height:0 !important; /* 同上：消除行盒 strut 在按钮下方的基线间隙 */
    }
    .headerR .searchHandle .searchBtn{
        display:block !important;
        width:80px !important;
        height:38px !important;
        -webkit-appearance:none;  /* 去掉部分移动端浏览器给 submit 的原生外观 */
        appearance:none;
        border:0 !important;
        border-radius:0 2px 2px 0;/* 贴合外框 5px 圆角，右侧圆角处不露白 */
    }
    .headerR .sevTel,
    .headerR .cartBtn,
    .headerR .cartBtn1{display:none !important;}

    /* ---------- 2.3 主导航 -> 汉堡菜单 ----------
       按钮已移到头部，导航条本身在收起时不应再占任何高度，
       否则搜索框与 banner 之间会空出一条 48px 的白带。 */
    .menuWrap{
        height:auto !important;
        min-height:0 !important;
        position:relative;
        z-index:1000;
        border-bottom:0 !important;
    }
    .menuWrap .w{
        position:relative !important;
        min-height:0 !important;
    }
    /* 展开时才恢复分隔线 */
    .menuWrap.m-nav-open{border-bottom:2px solid #1a3c69 !important;}
    .m-navToggle{display:block !important;}

    /* 折叠内容：默认收起 */
    .menuWrap .w .allPro,
    .menuWrap .w ul.menu{
        position:static !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        display:none !important;
        clear:both;
    }
    .menuWrap.m-nav-open .w .allPro,
    .menuWrap.m-nav-open .w ul.menu{display:block !important;}
    .menuWrap.m-nav-open{padding-bottom:10px;}

    /* 主导航条目：两列排布 */
    ul.menu li{
        float:left !important;
        width:50% !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    ul.menu li a{
        display:block !important;
        padding:0 10px !important;
        height:42px;
        line-height:42px;
        border-bottom:1px solid #e5e5e5;
    }
    ul.menu li span.hot{display:none !important;}

    /* “全部产品分类”按钮 */
    .menuWrap .w .allPro{margin-top:6px;}
    a.allProHandle{
        width:100% !important;
        padding:0 10px !important;
        height:42px;
        line-height:42px;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    /* 一级产品分类列表：默认收起，点“全部产品分类”才展开。
       真实站点有 9 个一级分类，若默认展开会把下面的主导航挤出屏外。
       内页的 pageJs.js 会给 .allPro.mini 的面板写内联 display，
       故这里一律用 !important，由 .m-open 类统一控制开合。 */
    .bnProGuide,
    .bnProGuide.hei610{
        position:static !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
    }
    .menuWrap.m-nav-open .allPro .bnProGuide{display:none !important;}
    .menuWrap.m-nav-open .allPro.m-open .bnProGuide{display:block !important;}

    /* “全部产品分类”右侧的开合指示器，由 responsive.js 注入 */
    a.allProHandle{position:relative;}
    .m-proToggleIcon{
        display:block;
        position:absolute;
        right:10px;
        top:0;
        font-style:normal;
        font-size:18px;
        line-height:42px;
    }
    ul.bnProGuideLi li{height:auto !important;width:100% !important;overflow:visible !important;}
    .proGuideItem{height:auto !important;}
    /* 左侧的蓝色三角是 .proGuideItem a:before 伪元素，它 position:absolute 却没有 left，
       靠「静态位置 + margin-left:-15px」定位 —— 也就是跟着文字起点走。
       原 padding-left:30px 让箭头正好落在 15px 处；一旦改小，箭头就被推出容器。
       原高度 43px 本就满足触摸目标，这里只补 box-sizing，其余一律不覆盖。 */
    .proGuideItem a{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    ul.bnProGuideLi li.hover .proGuideItem{width:100% !important;}

    /* 二级面板：触屏无 hover，改为点击展开（.m-open 由 responsive.js 添加）。
       此处 !important 用于压制模板内联脚本对 .proGuidePanel9 的 show()/hide() */
    .proGuidePanel9,
    .proGuidePanel9.hei610{display:none !important;}
    ul.bnProGuideLi li.m-open .proGuidePanel9,
    ul.bnProGuideLi li.m-open .proGuidePanel{
        display:block !important;
        position:static !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        padding:0 !important;
    }
    .proGuidePanel dl{padding:6px 0 !important;}
    .proGuidePanel dl dt{margin:6px 0 6px 10px !important;}
    /* 标签自带 3px 外边距；容器不留白时首个标签会贴住左边缘，
       比上方“相应分类”标题（左边距 10px）更靠左。补 7px 使两者对齐。 */
    .proGuidePanel dl dd.proGuideBrand{padding-left:7px !important;}
    .proGuidePanel dl dd.proGuideBrand a{padding:4px 8px !important;margin:3px !important;}

    /* ---------- 2.4 首页 banner ---------- */
    .bannerWrap{height:auto !important;}
    .bannerGroup{position:static !important;}
    /* relative 而非 static：owl.carousel.css 的 .owl-theme .owl-controls
       是 position:absolute;width:100%，#banner 若不定位，它就以视口为包含块，
       从 banner 的静态位置 x=14 起算 100% 宽 -> 右侧溢出 14px，整页可横向拖动。 */
    #banner{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
    }
    #banner .item img{width:100% !important;height:auto !important;}
    /* banner 圆点：owl 主题把它 absolute 到 bottom:10px 压在图片上；#banner 未定位时
       更被甩到文档 836px 处、落进“优选推荐”里被内容盖住。移动端改为静态排在图片下方。
       共 17 张，圆点须缩小才排得下一行；主题里未选中圆点是白色，放到白底上会看不见，
       改为灰色。只作用于 #banner，“优选推荐” #proScroll 的左右翻页按钮保持原样。 */
    #banner > .owl-controls{
        position:static !important;
        bottom:auto !important;
        width:auto !important;
        margin:6px 0 2px !important;
        text-align:center !important;
        line-height:0 !important;
    }
    #banner > .owl-controls .owl-page span{
        width:7px !important;
        height:7px !important;
        margin:0 3px !important;
        background:#c9c9c9 !important;
    }
    #banner > .owl-controls .owl-page.active span{background:#007de4 !important;}
    .bannerIn{position:static !important;width:auto !important;}
    .bannerIn .w{padding:0 !important;}
    .bnSideR{
        position:static !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        margin-top:10px;
    }
    /* 图标列表原为 float，改 flex 避免各项高度不等时卡位 */
    .sortIcoGroup ul{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    }
    .sortIcoGroup ul li{
        float:none !important;
        width:16.66% !important;
        height:auto !important;
        padding:8px 0;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .sortIcoGroup ul li b img{width:40px !important;height:40px !important;}
    .sortIcoGroup ul li em{font-size:12px;}
    .bnSideR .bnAd{margin:10px 0 0 0 !important;}
    .bnSideR .bnAd img{width:100% !important;height:auto !important;}

    /* ---------- 2.5 首页优选推荐 / 行业应用 ---------- */
    .newProTitle{height:auto !important;line-height:1.6 !important;padding:10px !important;}
    .more_1{float:right !important;width:auto !important;height:auto !important;}
    .newProContent .item{height:auto !important;}
    .newProContent .item .pro-img{
        display:-webkit-box !important;
        display:-ms-flexbox !important;
        display:flex !important;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        width:100% !important;
        height:auto !important;
    }
    .newProContent .item .pro-img img{max-width:100% !important;width:auto !important;height:auto !important;}

    .app_1{width:33.33% !important;height:auto !important;}

    /* ---------- 2.6 首页分类栏目：左右两栏 -> 上下堆叠 ---------- */
    .colProWrap{height:auto !important;}
    .colSort{
        float:none !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
    }
    /* 各配色主题给 .colSort 挂了 background:url(...) 0 bottom 的装饰图，
       栏目由 461px 变为自适应高度后，该图会压住分类链接，故只保留纯色底 */
    .colSort{background-image:none !important;}
    .colSortTitle{height:auto !important;line-height:1.6 !important;padding:10px !important;}
    /* height:auto 已足够撑开；overflow 保持 hidden 以包住内部浮动链接 */
    .colSortList{margin:10px !important;height:auto !important;overflow:hidden !important;}
    .colPro{
        float:none !important;
        width:100% !important;
        height:auto !important;
    }
    .colPro ul.colProTab{height:auto !important;overflow:hidden;}
    .colPro ul.colProTab li{
        width:25% !important;
        height:40px;
        line-height:40px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .colPro ul.colProTab li.current:after{display:none !important;}

    /* 商品卡片原靠固定高度对齐；改流式后标题行数不一，float 会互相卡住，
       故改用 flex 换行 —— 同行自动等高。
       注意这里不能加 !important：非当前 tab 的 ul 带内联 display:none，
       必须让内联样式继续生效，jQuery 的 show()/hide() 才能正常切换。 */
    .colPro .colProC ul.colProList{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        overflow:hidden;
    }
    .colPro .colProC ul.colProList li{
        float:none !important;
        width:25% !important;
    }
    .colPro .colProC ul.colProList li .pro-img{height:130px !important;}
    /* 标题原为 line-height:15px 且无内边距，文字块只有 15px 高、紧贴卡片下边框；
       标题一换行还会挤成一团。改为相对行高 + 上下留白。 */
    .colPro .colProC ul.colProList li p{
        margin:0 !important;
        padding:8px 10px 14px !important;
        line-height:1.5 !important;
        font-size:13px !important;
    }

    /* ---------- 2.7 内页：两栏保留，改百分比 ---------- */
    /* 面包屑 .location 原写死 height:24px，标题一长就换行冒出容器、
       压住下方内容（产品列表/新闻/详情/单页都用它）——改为自适应高度 */
    /* 原先 padding-bottom 为 0，面包屑会紧贴下方内容块 */
    .location{
        height:auto !important;
        line-height:1.6 !important;
        padding:10px 0 12px !important;
    }
    /* 负外边距抵消内边距：可点区域变大，但视觉行高不变 */
    .location a{
        display:inline-block;
        padding:7px 5px;
        margin:-7px 0;
    }
    .side{width:26% !important;}
    .content{width:72% !important;}
    .category h4{height:auto !important;line-height:1.6 !important;padding:10px 12px !important;}
    .menu_head{height:42px !important;line-height:42px !important;background-size:16px auto !important;}
    .menu_body a{height:auto !important;line-height:1.6 !important;padding:10px 18px !important;}

    /* ---------- 2.8 产品列表 ---------- */
    /* 标题保持 20px 左内边距，与下方“类别/全部/分类项”的 20px 对齐 */
    .selectorPanel h1,
    .selectorPanel h4{padding:10px 12px 10px 20px !important;}
    /* height:auto —— 原 24px 定高在窄屏换行后会冒出容器 */
    .selector ul.sl-list li{
        width:50% !important;
        height:auto !important;
        margin:2px 0 !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .selector ul.sl-list li a{display:block;}

    ul.proList{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    }
    ul.proList li{float:none !important;width:31.33% !important;}

    /* ---------- 2.9 产品详情选项卡 ---------- */
    #tagsx LI{width:auto !important;min-width:120px;}
    #proInfoTab .tabContent{padding:20px !important;}
    #tagContentx{padding:12px !important;}
    /* 富文本编辑器会给上传的图片写死 width/height 属性（规格表那张是
       915×164，原图 2134×382）。窄屏下宽度被 max-width:100% 压到 340，
       但 height 属性仍是 164，图片就被横向压扁。height:auto 让它等比缩放。
       表格同理，超宽时给横向滚动而不是撑破容器。 */
    #tagContentx img{max-width:100% !important;height:auto !important;}
    #tagContentx table{max-width:100% !important;}

    /* ---------- 2.10 页脚 ---------- */
    .sitemap{padding:30px 0 !important;}
    .sitemap{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    }
    /* dt 仍是 76px 宽而图标已缩到 48px，导致文字与图标空出 38px；
       且 float 布局下图标与标题基线错位。改用 flex 让两者垂直居中、间距固定。 */
    .sitemap dl{
        float:none !important;
        width:50% !important;
        margin-bottom:12px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        /* 每项的「图标+文字」作为一组在各自列内水平居中，
           否则整组贴着列的左边、右侧空一大片 */
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        padding:0 8px;
    }
    .sitemap dl dt{
        float:none !important;
        -ms-flex:0 0 auto;
        flex:0 0 auto;
        margin-right:12px;
        line-height:0;
    }
    .sitemap dl dd{
        -ms-flex:0 1 auto;
        flex:0 1 auto;
        min-width:0;
        text-align:left;
        /* 原 margin-left:86px 是为 76px 图标 + float 布局准备的；
           margin-top:16px 又让文字相对图标下沉造成错位。
           flex 下间距改由 dt 的 margin-right 控制，两者一并归零。 */
        margin-left:0 !important;
        margin-top:0 !important;
    }
    .m-footer .footer-menu .menu-list .menu-item{width:130px !important;}
    .m-footer .footer-contact{max-width:220px !important;}
    .m-footer .footer-qrcode{max-width:140px !important;}

    /* ---------- 3.5b 轮播左右翻页 ----------
       三处轮播在手机上都需要能左右翻：首页 banner、首页“优选推荐”、
       产品详情主图。banner 的 navigation 在 Index/index.html 里打开，
       产品主图的箭头由 Product/read.html 的脚本注入，这里只管样式。 */

    /* 首页 banner：.owl-controls 已被上面改成静态排在图下方，
       按钮改为绝对定位压在图片左右两侧（包含块是 position:relative 的 #banner）。 */
    #banner > .owl-controls .owl-buttons div{
        position:absolute !important;
        top:50% !important;
        margin:-18px 0 0 !important;
        padding:0 !important;
        width:36px !important;
        height:36px !important;
        line-height:34px !important;
        text-align:center !important;
        font-size:22px !important;
        border-radius:50% !important;
        background:rgba(0,0,0,.35) !important;
        color:#fff !important;
        opacity:1 !important;
        filter:none !important;
    }
    #banner > .owl-controls .owl-buttons .owl-prev{left:6px !important;right:auto !important;}
    #banner > .owl-controls .owl-buttons .owl-next{right:6px !important;left:auto !important;}

    /* 优选推荐：原按钮只有 25×23，手机上点不中，撑到 34px 触摸目标。
       同时修三处观感问题：
       1) owl 主题给按钮的 opacity:.5 让它发灰、像禁用态，改为不透明；
       2) 控件盒是 width:100%+text-align:right，按钮紧贴标题栏右边框，
          补 10px 右内边距与标题文字的左内边距对称；
       3) 标题栏高 50.8px、控件盒 40px 且带 margin-top:10px，按钮实际
          上留 13.8px、下只剩 3px，明显偏下。把控件盒改为 34px 高、去掉
          margin 后垂直居中。注意 top 是相对 #proScroll 的「内边距边」算的，
          而 #proScroll 有 3px 上边框，所以要多减这 3px：
          top = -(50.8 - (50.8-34)/2) - 3 ≈ -45px。 */
    .newPro .owl-theme .owl-controls{
        top:-45px !important;
        height:34px !important;
        margin:0 !important;
        padding-right:10px !important;
        /* 按钮是 inline-block，父级行盒的 strut 会把它整体下压 3px 多，
           归零行高并让按钮按顶边对齐，位置才由 top 完全确定 */
        line-height:0 !important;
        -webkit-box-sizing:border-box !important;
        box-sizing:border-box !important;
    }
    .newPro .owl-theme .owl-controls .owl-buttons div{
        width:34px !important;
        height:34px !important;
        line-height:34px !important;
        vertical-align:top !important;
        padding:0 !important;
        margin:0 0 0 8px !important;
        border-radius:4px !important;
        opacity:1 !important;
        /* 控件盒是 text-align:right（default.css:198），该属性会继承进按钮，
           箭头字符便贴在方块右边缘；必须显式居中 */
        text-align:center !important;
        /* 箭头文案是 pageJs.js 写死的 ASCII "<" ">"，在 34px 方块里又尖又生硬。
           手机端把原字符隐掉（font-size:0），用伪元素画成与首页 banner
           一致的 ‹ ›。只在本媒体查询内生效，PC 端仍是原样。 */
        font-size:0 !important;
    }
    .newPro .owl-theme .owl-controls .owl-buttons div:before{
        font-family:Arial,"Microsoft Yahei",sans-serif;
        font-size:24px !important;
    }
    .newPro .owl-theme .owl-controls .owl-buttons .owl-prev:before{content:"\2039";}
    .newPro .owl-theme .owl-controls .owl-buttons .owl-next:before{content:"\203A";}

    /* 产品详情主图的左右箭头 */
    .spec-preview{position:relative !important;}
    .spec-preview .m-navPrev,
    .spec-preview .m-navNext{
        position:absolute;
        top:50%;
        margin-top:-20px;
        width:40px;
        height:40px;
        line-height:38px;
        text-align:center;
        font-size:26px;
        color:#fff;
        background:rgba(0,0,0,.3);
        border-radius:50%;
        cursor:pointer;
        z-index:5;
        -webkit-user-select:none;
        user-select:none;
    }
    .spec-preview .m-navPrev{left:4px;}
    .spec-preview .m-navNext{right:4px;}
    /* 触屏没有 hover，原本靠 :hover 标当前缩略图，改用脚本加的 .cur */
    .spec-scroll .items ul li.cur img{border:2px solid #FF6600 !important;padding:1px !important;}

    /* ---------- 2.10b 触摸目标尺寸 ----------
       老站的链接普遍只有 16~30px 高，手机上容易点不中
       （Apple HIG 建议 44px、Material 建议 48px）。
       这里只加内边距把可点区域撑到 ~40px，不改字号、不动 PC 端。
       纯展示性的 <a>（如 .d2/.d10 里当标签用的）不处理。 */
    .colSortList a{
        padding:9px 10px !important;
        line-height:1.4 !important;
    }
    .proGuidePanel dl dd.proGuideBrand a{
        padding:9px 10px !important;
        line-height:1.4 !important;
    }
    .selector ul.sl-list li a{
        padding:9px 8px !important;
        line-height:1.4 !important;
    }
    .selector .sl-values .sl-all{
        padding:9px 10px !important;
        line-height:1.4 !important;
    }
    /* 侧栏分类、下载分类等列表项 */
    ul.sideLink_1 li a,
    ul.sideLink_1 .smlist a{
        display:block;
        padding:10px 10px !important;
        line-height:1.4 !important;
    }
    /* “更多 +” 一类的小链接：靠撑满所在标题栏的高度达到触摸尺寸，
       不能加垂直 padding —— .sortIcoGroup h4 是固定 40px 高，会被顶破。 */
    .sortIcoGroup h4 span a{
        display:inline-block;
        height:40px;
        line-height:40px;
        padding:0 6px !important;
    }
    .more_1,
    .newProTitle .more_1{height:auto !important;}
    .more_1 a{
        display:inline-block;
        padding:8px 6px !important;
        line-height:1.4 !important;
    }
    .plateHead h3 span a{
        display:inline-block;
        padding:6px !important;
        line-height:1.4 !important;
    }
    /* 产品详情里的 PDF 下载链接（图标 + 文字），原本只有 16px 高 */
    .c4 a{
        display:inline-block;
        padding:8px 6px !important;
        line-height:1.6 !important;
    }
    /* 下载中心的分类标签 */
    .downtitle{height:auto !important;line-height:1.4 !important;}
    .downtitle a{display:block;padding:9px 4px !important;line-height:1.4 !important;}

    /* 新闻列表的“更多详细” */
    .news-mlist #handle2,
    #handle2{
        height:36px !important;
        line-height:36px !important;
    }
    /* 表单控件与小按钮 */
    /* 按钮为触摸目标撑到 38px，但输入框还是 default.css 里的 26px，
       两者一高一矮对不齐。输入框同步到 38px。 */
    .paixu .search-mini .search-mini-btn{height:38px !important;line-height:36px !important;}
    .paixu .search-mini .search-mini-in{
        height:38px !important;
        line-height:36px !important;
        vertical-align:top !important;
    }
    .paixu .search-mini .search-mini-btn{vertical-align:top !important;}
    select{min-height:40px;}
    /* 分页按钮 */
    .pg a,
    .pg span{
        min-height:36px !important;
        line-height:36px !important;
    }

    /* ---------- 2.11 新闻 / 相关产品 / 分类图列表 ---------- */
    /* 模板里每条是 <li style="margin:0;padding:0;">，内联样式会压掉外部 CSS，
       故间距必须带 !important，否则条目会紧贴在一起（上一条的“更多详细”
       直接顶住下一条标题）。顺便补一条浅分隔线便于区分条目。 */
    .news-mlist li{
        height:auto !important;
        overflow:hidden;
        padding:0 0 16px 0 !important;
        margin:0 0 16px 0 !important;
        border-bottom:1px solid #ececec;
    }
    .news-mlist li:last-child{border-bottom:0;margin-bottom:0 !important;}
    /* 图片外层的 <a> 是 inline，包不住图片，可点区域只有一行文字高 */
    .news-mlist li > a{display:block;}
    /* 摘要截断时补省略号，避免文字戛然而止 */
    .news-mlist .d{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .news-mlist .pic{width:150px !important;height:auto !important;}
    .infoss{padding-left:170px !important;}

    .xgcp ul li .tup img{height:auto !important;}
    .xgcp ul li .nrtext{height:auto !important;min-height:100px;}

    .ProCateList{height:auto !important;}
    .ProCateList ul{position:static !important;width:100% !important;margin:0 !important;overflow:hidden;}
    .ProCateList ul li{width:25% !important;height:auto !important;}
    .ProCateList ul li img{height:auto !important;}
}


/* ==========================================================================
   3. <=768px —— 手机 / 平板竖屏（全面单列）
   ========================================================================== */
@media screen and (max-width:768px){

    /* 手机端左右留白：贴边会很局促，这里给出足够的呼吸空间 */
    .w,
    .main,
    .bannerGroup,
    .contentmy,
    .a1{padding-left:16px !important;padding-right:16px !important;}

    /* ---------- 3.1 顶部欢迎条：精简为一句话 + 客服热线 ---------- */
    .top{height:auto !important;line-height:1.7 !important;padding:5px 0;}
    .topBar{text-align:center;}

    .topL{
        display:block !important;
        float:none !important;
        width:100% !important;
        text-align:center;
        font-size:12px;
        /* 覆盖 1024 档的单行截断 */
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }
    .topL .pcTopTxt{display:none !important;}
    .topL .mTopTxt{display:inline !important;}
    /* 首页小图标在精简版里不需要 */
    .topL > a{display:none !important;}

    .topR{
        float:none !important;
        width:100% !important;
        text-align:center;
        /* 链接之间的 "|" 是纯文本节点，无法单独选中；
           先把整块字号归零，再单独恢复客服热线 */
        font-size:0 !important;
    }
    .topR > a{display:none !important;}
    .topR .topTel{
        display:inline-block;
        font-size:12px !important;
    }

    h3 .youbian a{width:140px;height:55px;}

    /* ---------- 3.2 首页栏目 / 行业应用列数递减 ---------- */
    .sortIcoGroup ul li{width:25% !important;}
    .sortIcoGroup ul li b img{width:36px !important;height:36px !important;}
    .app_1{width:50% !important;}
    .colPro ul.colProTab li{width:50% !important;}
    .colPro .colProC ul.colProList li{width:50% !important;}
    .colPro .colProC ul.colProList li .pro-img{height:120px !important;}

    /* ---------- 3.3 页脚 ---------- */
    .sitemap{padding:20px 0 !important;}
    .sitemap dl dt span.foot-icon{width:48px !important;height:48px !important;background-size:contain !important;}

    .foot{padding:15px 0 !important;}
    .m-footer .footer-menu .menu-list{float:none !important;width:100% !important;}
    .m-footer .footer-menu .menu-list .menu-item{
        display:block !important;
        width:100% !important;
        margin-bottom:10px;
    }
    .m-footer .footer-menu .menu-list .menu-item .sub-list a{
        display:inline-block !important;
        margin:2px 8px 2px 0 !important;
        padding:8px 2px !important;    /* 触摸目标 */
        line-height:1.4 !important;
    }
    .m-footer .footer-contact,
    .m-footer .footer-qrcode{
        float:none !important;
        max-width:100% !important;
        width:100% !important;
        margin-top:12px;
    }
    .m-footer .footer-qrcode img{max-width:120px;}
    /* .item 的 padding-left:30px 是给 /static/image/public/icon_consult.png、
       icon_time.png 留的图标位，但这两张图在服务器上是 404，于是只剩一段 30px
       的空缩进，联系方式整块比上方菜单右偏 30px。去掉缩进和不存在的背景图，
       与 .menu-title / .sub-list a 一样从栏距左边起排。 */
    .m-footer .footer-contact .item{
        padding-left:0 !important;
        background-image:none !important;
        margin-bottom:16px !important;
    }
    /* 版权区原来是 16px，全站栏距是 14px，两者不一致导致底部一会儿宽一会儿窄 */
    .m-bottom{padding:12px 14px !important;}
    .m-bottom .bottom-flinks .flinks-title{float:none !important;}

    /* 右侧固定悬浮条 */
    .quickLink{top:auto !important;bottom:60px;}
    /* a 缩小后行高与图标字号必须同步，否则 24px 的图标字体会撑出容器 */
    .quickLink a{
        width:38px !important;
        height:38px !important;
        line-height:38px !important;
        background-size:contain !important;
    }
    .quickLink a i.ico{font-size:18px !important;line-height:38px !important;vertical-align:top;}
    .side-float a{width:38px !important;height:38px !important;}
    .side-float .qr{display:none !important;}
    .m-aside-tool{width:34px !important;}

    /* ---------- 3.4 内页：两栏 -> 单列 ---------- */
    .side{
        float:none !important;
        width:100% !important;
        margin-bottom:12px;
    }
    .content{
        float:none !important;
        width:100% !important;
    }
    /* 侧栏的行业应用 / 新闻动态区块信息密度低，收起以缩短首屏 */
    .side .plate{display:none !important;}

    /* ---------- 3.5 产品列表 ---------- */
    /* 筛选区整体缩进，与上方标题 .selectorPanel h4 的 20px 左内边距对齐：
       容器 12px + 各项自带的 8px 内边距 = 20px。
       否则“类别”会贴住左边框，而“全部”“蒸汽管”因自带 8px 内边距缩进，三者不齐。 */
    .selector{
        padding-left:12px !important;
        padding-right:12px !important;
    }
    .selector .sl-group{padding:8px 0 !important;}
    /* .sl-key 原为右对齐的 50px 定宽且带 15px 右内边距（content-box），
       用 width:auto 让块级元素自然占满，避免 100%+padding 溢出 */
    .selector .sl-key{
        float:none !important;
        width:auto !important;
        padding-right:0 !important;
        padding-left:8px !important;   /* 与 .sl-all / li a 的 8px 内边距看齐 */
        text-align:left !important;
        line-height:1.8 !important;
        margin-bottom:6px;
    }
    .selector .sl-values{margin-left:0 !important;}
    /* 原设计是「类别(50px 浮动) + 全部(45px 浮动) + 列表 margin-left:120px」三段并排。
       窄屏把“类别”改成独占一行后，这 120px 缩进就成了多余的右移，
       导致“全部”孤立在左、分类挤到右侧。这里让三者依次占行、列表回到左边缘。 */
    .selector ul.sl-list{
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .selector .sl-values .sl-all{
        float:none !important;
        display:inline-block !important;
        width:auto !important;
        min-width:44px;
        height:auto !important;
        line-height:1.8 !important;
        margin:0 0 6px 0 !important;
        padding:9px 10px !important;   /* 与触摸目标规则保持一致，勿改回 1px */
        text-align:left !important;
    }
    .selector .sl-options{position:static !important;right:auto !important;top:auto !important;margin:6px 0;}

    .paixu{padding:8px 10px !important;}
    .paixu .search-mini{float:none !important;display:block;margin-bottom:8px;}
    .paixu .search-mini .search-mini-in{width:calc(100% - 70px) !important;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .paixu .kuan,
    .paixu .mr,
    .paixu .jg{float:none !important;display:block !important;width:auto !important;}
    .fenye{float:none !important;text-align:center;}
    .page{padding-right:0 !important;}
    .page_m{float:none !important;display:block !important;text-align:center;}
    .pg{float:none !important;display:inline-block;}

    ul.proList li{width:48% !important;margin:1% !important;padding:6px !important;}
    ul.proList li .pro-img{height:120px !important;}
    ul.proList li p{height:auto !important;min-height:40px;}

    /* ---------- 3.6 产品详情 ---------- */
    /* default.css 里 .proDetail 是 border:1px + border-left:0——桌面端它左边紧贴
       左侧分类栏，所以省掉了左边线。改单列后左边不再贴任何东西，就成了
       上/右/下有线、左边缺一条。补回来。 */
    .proDetail{border-left:1px solid #ddd !important;}
    /* .proPhoto 内部的「可选颜色 / 产地」小块在模板里用内联 float:left|right，
       改单列后若不清浮动会溢出容器、压在下面的产品标题上 */
    .proPhoto{
        float:none !important;
        width:100% !important;
        height:auto !important;
        overflow:hidden;
    }
    .proDesc{
        float:none !important;
        width:100% !important;
        margin-top:15px;
        clear:both;
        /* border-left 是桌面端「图片 | 说明」两栏之间的竖分隔线；
           单列后它变成竖在说明区左侧的一条孤线，改为横向分隔线。 */
        border-left:0 !important;
        border-top:1px solid #ddd !important;
        min-height:0 !important;
    }
    .proDescItem{padding:10px !important;}
    #preview{margin:0 auto !important;float:none !important;}
    .spec-preview,
    .jqzoom{width:100% !important;height:auto !important;float:none !important;}
    /* 触屏无鼠标，关闭放大镜浮层 */
    .zoomdiv,
    .jqZoomPup,
    .bigimg{display:none !important;}
    .spec-scroll{width:100% !important;}
    .spec-scroll .items{width:calc(100% - 32px) !important;}

    #tagsx{height:auto !important;overflow:hidden;}
    #tagsx LI,
    #tagsx LI.selectTagx{
        width:auto !important;
        height:40px !important;
        line-height:40px !important;
        float:left;
    }
    #tagsx LI A{padding:0 12px !important;}
    #tagsx LI.selectTagx A{height:40px !important;line-height:40px !important;}
    #tagContentx{padding:10px !important;}
    /* 规格表来自后台富文本，往往很宽 —— 允许横向滚动而不撑破页面 */
    .tagContentx{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .c4{padding-left:0 !important;}
    .xgcp ul li{width:100% !important;margin:0 0 12px 0 !important;}
    .xgcp ul li .tup{width:35% !important;}
    .xgcp ul li .tup img{width:100% !important;height:auto !important;margin:0 !important;}
    .xgcp ul li .nrtext{width:63% !important;height:auto !important;margin-left:2%;}
    /* 相关产品的标题链接原本只有 16px 高 */
    .xgcp ul li .nrtext a{
        display:inline-block;
        padding:8px 0 !important;
        line-height:1.5 !important;
    }
    .gobacko{height:auto !important;padding:10px 0;}

    /* ---------- 3.7 文章 / 单页 ---------- */
    .container{padding:12px !important;}
    .article{padding:10px 0 !important;}
    .article img{max-width:100% !important;height:auto !important;}
    /* .artiInfo span 的图标是 CSS 精灵图（一张 ico_news.gif 靠 background-position
       负偏移取图）。改 display 会换掉背景绘制的盒子基准、改 padding-left 会移动
       文字与图标的相对位置，两者都会让图标错位 —— 这里保持原样，不做任何覆盖。 */
    .box1 .boxT{height:auto !important;line-height:1.6 !important;}
    .box1 .boxT b{height:auto !important;line-height:1.6 !important;padding:8px 12px !important;float:none !important;display:block !important;}
    .menu2{padding:10px 0 !important;height:auto !important;}
    .menu2 h2,
    .menu2 ul{float:none !important;}
    .menu2 ul li{padding:0 10px !important;}
    .tab ul.tabT li{padding:0 12px !important;}
    #proInfoTab .tab ul.tabT{height:auto !important;overflow:hidden;}
    #proInfoTab .tabContent{padding:12px !important;}

    /* 关于 / 联系页（原本已用百分比，仅需堆叠） */
    .section-left,
    .section-right,
    .contact-left,
    .contact-right{
        float:none !important;
        width:100% !important;
        /* index.css 里这两块是 width:48% + margin-right/left:2%（桌面两栏之间的
           间隙）。改成 width:100% 堆叠后若还留着这 2%，右侧那块就整体右移 2%、
           右边缘还超出容器，和上方图片对不齐。横向外边距必须一并清掉。 */
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .intro-text img{float:none !important;width:100% !important;margin:10px 0 !important;}
    .blackline{margin:24px 0 !important;}
    .aboutproduct{padding:12px 0 !important;}
    .product-list li{margin:.6rem 0 !important;}

    /* ---------- 3.8 新闻列表 ---------- */
    .news-mlist .pic{width:110px !important;}
    .infoss{padding-left:124px !important;}
    .news-mlist .info .t,
    .infoss h3{font-size:15px !important;}
    .d{height:auto !important;max-height:52px;}

    /* ---------- 3.9 下载中心 ---------- */
    .downtitle{margin:0 4px 6px 0 !important;}
    .downsearch{margin:10px 0 !important;}
    .searchtext{width:calc(100% - 90px) !important;}
    .searchsub{width:90px !important;}
    .searchsub input[type="submit"]{width:90px !important;}
    .downtable tr th,
    .downtable tr td{padding:0 6px !important;font-size:12px;}
    /* 表格里的「下载」链接是 inline 的，实际可点区域只有 16px 高 */
    .downtable tr td a{
        display:inline-block;
        padding:10px 6px !important;
        line-height:1.4 !important;
    }
    /* 四列依次是：文件名称 / 描述 / PDF(下载链接) / 下载次数。
       窄屏优先保住「文件名称 + 下载链接」，先隐去信息量最低的“描述”。 */
    .downtable tr th:nth-child(2),
    .downtable tr td:nth-child(2){display:none !important;}
    .downtable tr th:nth-child(1),
    .downtable tr td:nth-child(1){width:auto !important;text-align:left;}
    .downtable tr th:nth-child(3),
    .downtable tr td:nth-child(3){width:64px !important;text-align:center;}
    .downtable tr th:nth-child(4),
    .downtable tr td:nth-child(4){width:64px !important;text-align:center;}

    /* ---------- 3.10 表单（产品询价 / 注册 / 留言） ---------- */
    .register{padding:15px 10px !important;}
    .simpleBox{padding:10px !important;}
    /* .formBlock h2 左侧 5px 处有 arrow2.gif 箭头图标，原 padding-left:25px 是给它让位的；
       改小会让标题文字压住图标。这里只收窄右侧，左侧保持 25px。 */
    .formBlock h2{padding:0 0 5px 25px !important;}
    .formBlock td{padding:5px 2px !important;}
    td.lable{width:80px !important;font-size:13px;}
    /* 第三列提示单元格在窄屏下无内容，隐藏以让出输入宽度 */
    td.formTip,
    .formBlock td.formTip{display:none !important;}
    .inputTextStyle,
    .textareaStyle,
    .inputLong,
    input.input-style,
    .register .inputTextStyle{
        width:100% !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .inputShort{width:70px !important;}
    .codeBtn{width:auto !important;padding:0 10px;}
    .redBigBtn{
        float:none !important;
        display:block !important;
        width:100% !important;
        padding:0 !important;
        height:46px !important;
        line-height:46px !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .formTable{width:100% !important;margin:15px auto !important;}
    .formTableL{float:none !important;width:100% !important;}
    .tip{width:auto !important;margin:40px 10px !important;}
    .tipL,.tipR{width:auto !important;float:none !important;}
    .flowSteps li,
    .cartSteps ul li{width:33.33% !important;}

    /* ---------- 3.11 通用表格 / 证书 / 品牌 ---------- */
    .article table,
    table.tableStyle,
    .table,
    .tableDetail{width:100% !important;}
    table.tableStyle th,
    table.tableStyle td,
    .article table td,
    .article table th{padding:6px 4px !important;font-size:12px;}

    .certlist{-ms-flex-wrap:wrap;flex-wrap:wrap;}
    .certitem{width:50% !important;-webkit-box-sizing:border-box;box-sizing:border-box;}

    .b13{padding:10px !important;}
    .b14,.b14x{width:50% !important;height:auto !important;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .b14 img,.b14x img{width:90% !important;height:auto !important;margin:5% !important;}
    .b14 .bt,.b14x .bt{height:auto !important;min-height:40px;}
    .b12 a{padding:0 10px !important;}
    .b11 .right{float:none !important;width:auto !important;max-width:100%;}
    .b11 .left{margin:10px !important;}

    .ProCateList ul li{width:50% !important;}
    .logo-slider img{height:50px !important;}
    .brand-logo-track img{width:150px !important;}
    .brand-arrow{width:28px !important;height:28px !important;}

    .sideNav{float:none !important;width:auto !important;padding:10px !important;}
    .main .right{float:none !important;width:100% !important;}
    .apply-catlog-form{padding:15px !important;}
    .apply-catlog-part1,
    .apply-catlog-part2{float:none !important;width:100% !important;}
    .apply-catlog-part3{padding:15px !important;}
    ul.apply-industry li{width:auto !important;padding:8px 10px !important;}
    .input-row label{position:static !important;width:auto !important;padding:4px 0 !important;}
    ul.infoList.column2 li{width:100% !important;}
    .col5 ul.brandList li{width:50% !important;height:auto !important;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .half{width:100% !important;float:none !important;}
    .brandProfile dl{padding:10px !important;}
    .brandProfile dl dt,
    .brandProfile dl dd{float:none !important;width:100% !important;}
}


/* ==========================================================================
   4. <=480px —— 小屏手机
   ========================================================================== */
@media screen and (max-width:480px){

    body{font-size:13px;}

    .w,
    .main,
    .bannerGroup,
    .contentmy,
    .a1{padding-left:14px !important;padding-right:14px !important;}

    h3 .youbian a{width:124px;height:49px;}

    /* 主导航保持两列（小屏也不改单列，9 个条目才能一屏看全） */
    ul.menu li{width:50% !important;}
    ul.menu li a{padding:0 8px !important;font-size:13px;}

    /* 行业应用图标 3 列 */
    .sortIcoGroup ul li{width:33.33% !important;}

    /* 首页行业应用大图单列 */
    .app_1{width:100% !important;}

    /* 页脚服务承诺保持 2 列（单列时左右两侧空太多）。
       360px 宽下每列内容区仅约 150px，图标 48px + 间距 10px 后
       留给文字约 92px，故同时收紧字号与间距，避免标题折行。 */
    .sitemap dl{
        width:50% !important;
        padding:0 4px !important;
        margin-bottom:10px !important;
    }
    .sitemap dl dt{margin-right:8px !important;}
    .sitemap dl dt span.foot-icon{width:36px !important;height:36px !important;}
    .sitemap dl dd h4{font-size:14px !important;margin-bottom:2px !important;}
    .sitemap dl dd p{font-size:11px !important;line-height:1.35 !important;}

    /* 分类 tab / 产品卡片 */
    .colPro ul.colProTab li{width:50% !important;font-size:12px;}
    .colPro .colProC ul.colProList li .pro-img{height:100px !important;}
    ul.proList li .pro-img{height:100px !important;}
    ul.proList li p{font-size:12px;}

    /* 新闻列表图文改上下堆叠 */
    .news-mlist .pic{
        float:none !important;
        width:100% !important;
        height:auto !important;
        /* 页面内联样式给 .pic 加了 1px 边框，而它是 content-box：
           width:100% 之后实际占 336+2=338px，比容器宽 2px，右边那条边框
           正好被 li{overflow:hidden} 切掉，看着"右侧少了一根"。
           外层 .box 已经有边框了，这里直接去掉图片自身的边框；
           同时改 border-box，杜绝再次撑出容器。 */
        border:0 !important;
        -webkit-box-sizing:border-box !important;
        box-sizing:border-box !important;
    }
    .infoss{padding-left:0 !important;margin-top:8px !important;}

    /* 相关产品改上下堆叠 */
    .xgcp ul li .tup,
    .xgcp ul li .nrtext{float:none !important;width:100% !important;margin-left:0 !important;}

    /* 证书 / 品牌单列 */
    .certitem{width:100% !important;}
    .b14,.b14x{width:100% !important;}
    .ProCateList ul li{width:50% !important;}
    .col5 ul.brandList li{width:100% !important;}

    /* 表单标签改为上下排列更省空间 */
    td.lable{width:70px !important;font-size:12px;}
    .formBlock td{padding:4px 0 !important;}

    /* 下载中心表格进一步精简 */
    /* 小屏再隐去“下载次数”，只留「文件名称 + 下载」 */
    .downtable tr th:nth-child(4),
    .downtable tr td:nth-child(4){display:none !important;}
    .searchtext{width:calc(100% - 76px) !important;}
    .searchsub,
    .searchsub input[type="submit"]{width:76px !important;}

    /* 悬浮条再缩一档 */
    .quickLink a{width:32px !important;height:32px !important;line-height:32px !important;}
    .quickLink a i.ico{font-size:16px !important;line-height:32px !important;}
}


/* ==========================================================================
   5. 高级搜索页（/search/supsearch）补充
   --------------------------------------------------------------------------
   该页没有走 .w/.main 栅格，而是用较早的 .contentmy + .b2 组合，
   且表单的 td 和 input 都带内联像素宽度，需单独处理。
   ========================================================================== */
@media screen and (max-width:1240px){

    /* .b2 原为 960px 定宽 + float:left，改为 BFC 自动占满左侧栏剩余宽度 */
    .b2{
        width:auto !important;
        float:none !important;
        margin-left:20px !important;
        overflow:hidden;
    }
}

@media screen and (max-width:768px){

    .b2{
        width:100% !important;
        margin-left:0 !important;
        overflow:visible !important;
    }
    /* .b8 内是浮动的 .left，不清浮动会高度塌陷、文字压住下边框 */
    .b8{
        height:auto !important;
        line-height:1.6 !important;
        padding:6px 0;
        overflow:hidden;
    }
    .b8 a{line-height:1.6 !important;}
    .d2 a,
    .d3 a{line-height:2 !important;font-size:14px !important;}
    /* 原 .d10 a 的 line-height:40px 顺带撑出了标题上下的留白；
       改成相对行高后留白消失、标题贴住上方位置栏的横线，故在容器上补回间距 */
    .d10{padding:18px 0 12px !important;}
    .d10 a{line-height:1.6 !important;font-size:18px !important;}
    .d5{width:48% !important;margin:1% !important;}

    /* 搜索表单：<td width="110/500"> 与 input 的内联 width:600px 全部改流式 */
    .contentmy table{width:100% !important;}
    .contentmy table td{width:auto !important;height:auto !important;padding:4px 2px !important;}
    .contentmy table td[align="right"]{text-align:left !important;}

    /* 通用兜底：任何带内联像素宽度的表单控件都不得撑破视口 */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea{
        max-width:100% !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .contentmy input[type="text"],
    .contentmy select,
    .contentmy textarea{width:100% !important;}

    /* 提交按钮在模板里带内联 margin-left:300px，窄屏会被推出可视区 */
    .contentmy input[type="submit"],
    .contentmy .d8{
        margin-left:0 !important;
        display:block;
        width:100%;
        max-width:220px;
        height:40px;
        margin-top:10px !important;
        margin-right:auto !important;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .contentmy td[colspan="4"]{text-align:center;}
    .contentmy td[colspan="4"] input[type="submit"]{margin-left:auto !important;}
}


/* ==========================================================================
   6. 操作提示 / 跳转页（Public:success）补充
      该页用 <table width="670"> 定宽居中，无 class 可挂，故按属性选择器覆盖。
   ========================================================================== */
@media screen and (max-width:768px){

    table[width="670"]{
        width:auto !important;
        max-width:100% !important;
        margin-top:40px !important;
    }
    table[width="670"] td[width="120"]{width:80px !important;}
    table[width="670"] img{max-width:100%;height:auto;}
}

/* ==========================================================================
   7. 电脑端既有缺陷修正（不限断点，全宽度生效）
   --------------------------------------------------------------------------
   下面不是响应式规则，而是修正原站在电脑端本来就有的问题。
   会改变电脑端渲染，故逐条说明原因。
   ========================================================================== */

/* 版权条在 1920/2560 宽屏上，文字和那一长串友情链接会被拉满整个屏幕，
   与上方 1200px 的内容不齐。

   注意不能去限制外层 .g-wrapper 或 .m-bottom 的宽度 ——
   深蓝底色 (#1a3c69) 就画在 .m-bottom 上，一限宽整条背景就跟着缩，
   电脑端会变成中间一条蓝、两边露白。
   所以这里保持它们满屏，只用左右内边距把文字挤回 1200px 以内。 */
/* banner 的 navigation 是为手机/平板打开的（样式写在 max-width:1024px 区块）。
   1025px 起 #banner 回到电脑端的绝对定位布局，原本就没有左右箭头，
   若不隐藏就会露出 owl 主题的默认小箭头。断点必须与上面的 1024 严丝合缝，
   否则 1025~1239 之间会出现没样式的箭头。 */
@media screen and (min-width:1025px){
    #banner > .owl-controls .owl-buttons{display:none;}
}

@media screen and (min-width:1240px){
    .m-bottom{
        padding-left:calc((100% - 1200px) / 2);
        padding-right:calc((100% - 1200px) / 2);
    }
}