@charset "utf-8";

/* =================================================================== */
/* H-华仕Web 首页响应式（断点骨架 + 规则填充）                         */
/* 涵盖板块：topWrap/header/menu/banner/nat/cha/tablit/yshi/gongc/news/footWrap */
/* =================================================================== */

/* 默认隐藏移动端汉堡按钮（PC 不显示） */
.nav-toggle{ display:none; }


@media all and (max-width:1700px){/*1680 * 1050*/
}


@media all and (max-width:1580px){/*1680 * 1050*/
}


@media all and (max-width:1460px){/*1440 * 900*/
}


@media all and (max-width:1366px){/*1366 * 768*/
  .topWrap .menu ul li a{padding:0 40px;}
}


@media all and (max-width:1280px){
  .topWrap .menu ul li a{padding:0 35px;}
}


@media all and (max-width:1200px){ /*1200*/
  /* PC 窄屏：顶部容器轻微收缩 */
  .topWrap .header,
  .content,
  .footWrap .footer .w1200{ box-sizing:border-box; padding-left:15px; padding-right:15px;}
  .topWrap .menu ul li a{padding:0 33px;}
}


@media all and (max-width:1100px){/*1024 * 768 */
  /* ---- 关键：解除 body 最小宽度 1200 限制，否则移动端 media query 全部失效 ---- */
  body{ min-width:100% !important; }

  /* ---- 顶部容器 + 所有固定 1200px 板块宽度自适应 ---- */
  .topWrap .header,
  .content,
  .footWrap .footer .w1200,
  .news,
  #link #youqing,
  #tablit,
  #we #yshi,
  .tabcon{ width:100% !important; box-sizing:border-box; padding-left:15px; padding-right:15px; }

  /* ---- header 内部布局 + 汉堡按钮 ---- */
  .topWrap{ position:relative; overflow:visible !important; }
  .topWrap .header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; height:auto !important; padding:10px 15px; box-sizing:border-box; }
  .topWrap .header h2{ margin:0; float:none !important; width:auto !important; }
  .topWrap .header h2 img{ height:60px; width:auto; }
  .topWrap .header h3{ display:none; }   /* 副标题在窄屏隐藏 */
  .topWrap .header h5{ font-size:14px; float:none !important; margin-top:0;}

  .nav-toggle{ display:block !important; width:36px; height:36px; position:relative; cursor:pointer; flex-shrink:0; }
  .nav-toggle span{ display:block !important; width:100%; height:4px; background:#333; margin:5px 0; transition:transform .3s, opacity .3s; border-radius:2px; }
  .nav-toggle.on span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .nav-toggle.on span:nth-child(2){ opacity:0; }
  .nav-toggle.on span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  /* ---- 主导航折叠（display 不加 !important，否则 jQuery slideToggle 无法覆盖） ---- */
  .topWrap .menu{ display:none; width:100% !important; height:auto !important; background:#fff !important; position:absolute !important; top:100% !important; left:0 !important; z-index:9999; box-shadow:0 5px 10px rgba(0,0,0,.1); margin:0 !important; overflow:visible !important; }
  .topWrap .menu ul{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; }
  .topWrap .menu ul li{ width:100% !important; float:none !important; text-align:center; line-height:50px !important; height:auto !important; border-bottom:1px solid #eee; overflow:visible !important; }
  .topWrap .menu ul li a{ display:block !important; color:#333 !important; height:auto !important; padding:0 !important;}
  .topWrap .menu ul li.on a{color:#fff !important;}

  /* ---- banner Swiper 自适应 ---- */
  .focus{ height:auto !important;}
  .focus .swiper-slide{ height:auto !important; }
  .focus .swiper-slide a{ height:100%; }
  .focus .swiper-slide .pc{display:none;}
  .focus .swiper-slide .mb{display:block;}
  .swiper-button-prev, .swiper-button-next{width:32px !important; height:32px !important; background:rgba(0,0,0,.3);}
  .swiper-button-prev:after, .swiper-button-next:after{ font-size:16px !important; color:#fff; }

  /* ---- 搜索 ---- */
  .sou{ height:auto; padding:10px 0; }
  .sou p, .sou .sou3{ float:none; width:100%; margin:8px 0 0; }
  .sou3 .ip01{width:35px !important;}
  .sou p{width:100% !important;}
  .sou p b, .sou p span{ float:none; width:auto; display:inline;}
  .sou p span{width:auto !important;}
  .sou .sou3 input{ width:calc(100% - 50px); }

  /* ---- 公司简介 ---- */
  .nat{ height:auto !important; overflow:visible; padding:20px 0;}
  .nat .nat1, .nat dl{ float:none; width:100%;}
  .nat .nat1 h2 video{ width:100%; height:auto;}
  .nat dl{width:100%; height:auto;}
  .nat dt{ font-size:24px; height:auto; padding:20px 10px; text-align:center; }
  .nat dt em{ font-size:16px; }
  .nat dd{ height:auto; overflow:visible; padding:20px; }
  .nat dd em{ font-size:18px; }

  /* ---- 产品介绍 ---- */
  .cha{ height:auto !important; overflow:visible; }
  .cha2{ height:auto !important; padding:20px 0; background-size:cover; }
  .cha2 .content{ width:100%; box-sizing:border-box; padding:0 15px; }
  .cha3, .cha4{ float:none; width:100%; }
  .cha4 dl{ margin-bottom:20px; }
  .cha4 dl dd li{ display:inline-block; width:32%; vertical-align:top; }
  .cha4 dl dd li img{ width:100%; height:auto; }

  /* ---- 客户案例 ---- */
  #tablit dl dd{ display:inline-block; width:49%; text-align:center; }
  #tablit table{ width:100%; }
  #tablit table tr{ display:flex; flex-wrap:wrap; }
  #tablit table td,
  .tabcon > table > tbody > tr > td{ display:block; width:49% !important; height:auto !important; margin:0 0 15px !important; margin-left:0 !important; box-sizing:border-box; }
  #tablit table td img{ width:100%; height:auto; }

  /* ---- 优势 6 卡 ---- */
  #yshi .bottom{ display:flex; flex-direction:column; }
  #yshi .bottom .left,
  #yshi .bottom .zhong,
  #yshi .bottom > div[style*="float:right"]{ float:none !important; width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; }
  #yshi .bottom .left li{ width:30%; margin-bottom:15px; text-align:center; }
  #yshi .bottom .left li img{ width:60px; height:auto; }
  #yshi .bottom .zhong{ display:none; }   /* 中间装饰图在窄屏隐藏 */

  /* ---- 工厂展示 ---- */
  .gc_bj{ height:auto !important; padding:30px 0; margin-bottom:0; }
  .gc_bj .titis{ height:auto; }
  .gc_bj .gongc.content{ width:100%; box-sizing:border-box; padding:0 15px; }
  .gc_c ul li img{ width:100%; height:auto; }

  /* ---- 新闻中心 ---- */
  .news{ width:100% !important; height:auto !important; padding:20px 0; overflow:visible !important; }
  .news .tit{ height:auto; }
  .news_nav{ height:auto; margin:20px auto 0;}
  .news .news_c .newspic,
  .news .news_c .news_r{ float:none; width:100%; }
  .news .news_c .newspic img{ width:100%; height:auto; }
  .news .news_r dl{ padding:15px 0; border-bottom:1px dashed #eee; }

  /* ---- 友情链接 ---- */
  #link #youqing{ width:100% !important; height:auto !important; }
  #link #youqing div{ float:none; }

  /* ---- 底部 ---- */
  .footWrap .footer .fnav,
  .footWrap .footer .tele,
  .footWrap .footer .fwz,
  .footWrap .footer .code{ float:none; width:100%; text-align:left; padding:10px 0; box-sizing:border-box; }
  .footWrap .footer .fnav p a{ display:inline-block; margin:4px 8px; }
  .footWrap .footer .code img{ width:120px; height:auto; }
  .footWrap .foot .w1200{ font-size:12px; text-align:center; }
}

@media all and (max-width:998px){
 /* ---- 底部 ---- */
.footWrap .footer{flex-flow:column;}
.footWrap .footer .fnav{margin:40px 0 0; padding:0;}
.footWrap .footer .fnav p a{ margin:4px 6px; font-size:13px;}
.footWrap .footer .tele{margin:40px 0 0;}
.footWrap .footer .tele h2{ font-size:16px; height:auto; margin:10px 0 0 20px;}
.footWrap .footer .tele h2 i{ font-size:22px; }
.tele p{padding:0 0 0 20px !important; margin-top:10px;}
.footWrap .footer .fwz{margin:20px 0 0;}
.footWrap .footer .fwz p{ font-size:13px; line-height:1.8;}
.footWrap .footer .code{margin-top:20px;}
.footWrap .footer .code img{ width:100px;}
.footWrap .footer .code em{text-align:left;}
.foot{margin:30px auto 0 !important;}

/* 内页部分 */
#chan #chanping{overflow:hidden; margin:0 auto;} 
#chan #chanping .left{width:100%;}
#chan #chanping .left .lxwm{margin-bottom:20px;}
#chan #chanping .left .lxwm img{width:150px; margin:auto;}
#chan #chanping .left .lxwm .sz{width:100%; margin-bottom:10px;}
#chan #chanping .left .lxwm .dh{width:100%;}
#chan #chanping .left .cp_top span{line-height:66px;}
#chan #chanping .left .cp_top,#chan #chanping .left .cp_boom{height:66px;}
#chan #chanping .left .cp_boom .qg{padding-top:10px;}
#chan #chanping .right{width:100%; margin-top:20px;}
.pros_left{width:100%;}
.pros_right{width:100%;}
.right_bot .cpxq{margin-top:10px;}
.right_bot .xia .tup{width:30%; height:auto;}
.right_bot .xia .tup img{width:100%; height:auto; display:block;}
.right_bot .xia .wenzi{width:65%;}
.lianxi{width:100% !important;}
.lianxi_m{width:100% !important;}
.lianxi_ml{width:100%; text-align:center;}
.lianxi_mr{width:100% !important;}
.lianxi_ml_s{width:100%; margin:auto;}
.lianxi_mr_m{width:100% !important; float:initial !important; line-height:25px !important; padding:20px !important;}
.lianxi_mr_m span{font-size:24px !important;}
.lianxi_l{width:100% !important;}
.lianxi_r{width:100% !important; margin-top:20px; padding:20px !important; box-sizing:border-box !important;}
.layui-table tbody{width:100% !important;}
.lianxi_m .mr_i{display:none;}
.my-map{width:100% !important; height:420px !important;}
.layui-table,.layui-input,.layui-textarea{width:100% !important;}
.layui-table td, .layui-table th{border:none !important; display:block;}
/* 兜底覆盖 list-25-1.html 内联 #form input width:441px 和 textarea cols=60 在窄屏下溢出 */
#form input,#form textarea{width:100% !important; max-width:100%; box-sizing:border-box !important;}
}


@media all and (max-width:768px){
  /* ---- 顶部：手机端隐藏副标题、热线，缩小 logo ---- */
  .topWrap .header h2 img{ height:46px; }
  .topWrap .header h5{ display:none; }

  /* ---- banner：更扁，隐藏箭头只留分页 ---- */
  .swiper-button-prev, .swiper-button-next{ display:none; }
  .swiper-pagination-bullet{ width:6px; height:6px; }

  /* ---- 产品介绍：单列 ---- */
  .cha{margin:0 auto;}
  .tit{height:auto; font-size:30px;}
  .tit em{font-size:20px;}
  .cha3{padding:40px 0 60px;}
  .cha3 .pic{width:95%; margin:0 2.5%;}
  .cha3 .pic h5{width:100%; bottom:-20px;}
  .cha3 .pic h5 a{font-size:14px; padding:5px 10px; line-height:20px;}
  .cha4{margin-top:0; padding:20px;}
  .cha4 dl{height:auto;}
  .cha4 dt{font-size:20px;}
  .cha4 dl dd li{ width:31.333%; margin:1% 2% 0 0;}
  .cha4 dl dd li:last-of-type{margin-right:0;}

  /* ---- 客户案例：单列 ---- */
  #tablit{margin:20px auto;}
  #tablit dl dd{ display:block;}
  #tablit table td{ width:100%;}
  .fen{margin-top:0;}
  #tablit .on a{width:100%;}
  #tablit .out{width:49%;}
  #tablit dl dd:last-of-type{margin-right:0;}

  /* ---- 优势：单列 ---- */
 .ys .titi{height:auto; padding:2.5%; font-size:24px;} 
 .titi a{padding-top:0;}
 #we{height:auto;}
 #we #yshi .bottom li{padding-top:0;}
 #yshi .bottom .left li img{width:80px;}
 #we #yshi .bottom p{font-size:16px;}
 #we #yshi .bottom span{font-size:14px;}
 #yshi .bottom .zhong{display:block; padding:20px 0 !important;}
 #yshi .bottom .zhong img{width:100%; display:block;}

 .gc_nr{margin:20px auto 0; overflow:hidden;}
 .titis h4 a{font-size:24px;}
 .gc_bj .titis p{font-size:18px; height:auto;}
 .gc_c.swiper{height:auto;overflow:hidden;}
 .gc_c .swiper-slide img{width:100%;height:auto;}
 .gc_qh.swiper-pagination{margin:20px auto 0;}
 .gc_nr .prev,.gc_nr .next{top:35%;}

  /* ---- 新闻 ---- */
  .news{margin:0 auto 0; overflow:hidden !important;}
  .news_nr{margin:20px auto 0;}
  .news .tit{font-size:24px;}
  .news_c{width:95%; margin:auto;}
  .news_c dl{width:100%; height:auto;}
  .news_c dt{width:15%; padding-top:0;}
  .news_c dt::before{top:10px; height:60px;}
  .news_c dd{width:80%;}
  .news_c dd h3{padding-top:0;}
  .news .news_r dl dd p{ font-size:13px; line-height:1.6; padding-right:10px;}
}


@media all and (max-width:640px){
  /* 留作后续微调 */
  .nat dd{height:250px; overflow-y:auto;}
  .tit{font-size:22px;}
}


@media all and (max-width:580px){
.nat dt em{line-height:20px; margin-top:10px;}
#tablit .on{width:47%;}
#tablit .out{width:47%;}
.tabcon{padding:10px 0 0;}
.gc_bj .titis p a{font-size:16px; margin-left:0;}
.gc_c .swiper-slide span a{height:auto; font-size:14px;}
.news .news_c .newspic, .news .news_c .news_r{height:auto;}
#chan #chanping .right .right_bot li{width:49% !important; margin:2% 2% 0 0 !important;}
#chan #chanping .right .right_bot li:nth-child(3n){margin-right:2% !important;}
#chan #chanping .right .right_bot li:nth-child(2n){margin-right:0% !important;}
.right_bot .xia .tup{width:100%;}
.right_bot .xia .wenzi{width:100%; margin-top:20px;}
.lianxi_ml_m{font-size:24px !important; line-height:40px !important; margin-bottom:10px !important;}
.lianxi_ml_en{font-size:18px !important; line-height:30px !important;}
.cont1_list li .btitle{padding-bottom:10px !important;}
.cont1_list li .btitle h3{font-size:18px !important;}
.cont1_list li .btitle h4{font-size:16px !important;}
.cont1_list li .btitle h5{font-size:22px !important;}
}


@media all and (max-width:414px){
  /* ---- 小屏手机：基础字号、标题字号进一步缩小 ---- */
  body{ font-size:14px; }
  .topWrap .header h2 img{ height:38px;}
  .nat dt{ font-size:20px; margin-top:0;}
  .nat dt em{ font-size:14px;}
  .nat dd em{ font-size:16px;}
  .cha4 dl dd li{width:100%;}
  .news .news_r dl dt{width:100%;}
  .news .news_r dl dt span{ font-size:14px; font-weight:bold; padding-top:0; line-height: 1.6;}
  .news .news_r dl dd{width:100%; padding:0 5%;}
  #link{margin:0 auto 20px;}
  #chan #chanping .right .right_bot li{width:100% !important; min-height:auto !important;}
}


@media all and (max-width:375px){
  /* 留作后续微调 */
}