/* ================================================
   jschengzhan.com 响应式CSS
   基于原有 style.css，添加移动端自适应
   ================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
.clearfix::after { content: ""; display: table; clear: both; }
.clear { clear: both; }

/* 核心修复 - 容器宽度 */
.w_auto {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 栅格 */
.le { float: left; display: inline-block; }
.rh { float: right; display: inline-block; }
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.col-4 { width: 33.33%; padding: 0 10px; }
.col-3 { width: 25%; padding: 0 10px; }
.col-2 { width: 50%; padding: 0 10px; }
.col-8 { width: 66.66%; padding: 0 10px; }

/* Banner */
.banner { height: auto !important; }
.banner li { height: 300px !important; background-size: cover !important; }
.ban { height: 300px !important; }

/* 导航 */
.head_bottom ul { display: flex; flex-wrap: wrap; }
.head_bottom li { margin-left: 0 !important; padding: 15px 20px !important; }
.head_bottom li i { display: none !important; }

/* 主体 */
.index_1, .index_3, .index_4, .index_5, .index_6, .index_7 { padding: 30px 0; }

/* 产品列表 */
.indexpro ul { display: flex; flex-wrap: wrap; }
.indexpro li { width: 33.33%; padding: 10px; }
.indexpro li img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* 品牌展示 */
.indexpai_top { display: flex; flex-direction: column; }
.indexpai_le, .indexpai_rh { width: 100% !important; float: none !important; }
.indexpai_rh img { width: 100%; max-width: 500px; margin: 15px auto; }

/* 新闻/留言 */
.indexwen, .indexnew, .indexform { width: 100% !important; float: none !important; margin-bottom: 20px; }
.indextable input, .indextable textarea { width: 100% !important; }

/* 合作案例 */
.indexcase li { width: 50%; padding: 5px; }
.indexcase li img { width: 100%; }

/* 过渡背景 */
.index_6 { padding: 40px 0; }

/* 侧边栏 */
.sidebar-box { margin-bottom: 15px; }

/* 产品详情 */
.bimg { display: flex; flex-direction: column; }
.spec-preview { width: 100% !important; }
.spec-scroll { width: 100% !important; overflow-x: auto; }
.items ul { display: flex; gap: 10px; white-space: nowrap; }

/* 文章内容 */
.w_auto > .article-body { padding: 0 10px; }

/* 分页 */
.pagination a, .pagination span { padding: 5px 10px; font-size: 13px; }

/* 底部 */
.footBox { padding: 20px 0; }

/* 滑块 */
.txtMarquee-top { overflow: hidden; }

/* ================================================
   平板 768-1024px
   ================================================ */
@media screen and (max-width: 1024px) {
    .head_bottom li { padding: 15px 15px !important; }
    .head_bottom li dl { left: 0 !important; }
    .indexpai_le ul { padding: 0 10px; }
    .indexpro li { width: 50%; }
}

/* ================================================
   平板竖屏 & 大手机 768px
   ================================================ */
@media screen and (max-width: 768px) {
    body { font-size: 13px; }
    .head_top { padding: 5px 0; text-align: center; }
    .head_shou, .head_huan { display: none; }
    .head_zhong { text-align: center; }
    .head_zhong .head_pro { text-align: center; margin-top: 10px; }
    .head_zhong .head_tell { padding-right: 0; text-align: center; }
    .head_zhong .head_tell img { display: none; }
    .head_bottom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .head_bottom ul { flex-wrap: nowrap; overflow-x: auto; }
    .head_bottom li { padding: 12px 15px !important; margin-left: 0 !important; flex-shrink: 0; }
    .head_bottom li dl { left: 50% !important; transform: translateX(-50%); }
    .head_bottom li i { display: none !important; }

    .indexpro li { width: 50%; }
    .indexpai_top { flex-direction: column-reverse; }
    .indexwen, .indexnew, .indexform { width: 100% !important; float: none !important; }

    .banner { height: 200px !important; }
    .banner li { height: 200px !important; }
    .ban { height: 200px !important; }

    .indexcase li { width: 50%; }
    .indexnew_pic { display: none; }
    .indextable label { display: block; margin-bottom: 10px; }
    .indextable .shu, .indextable textarea { width: 100% !important; }
    .slider_qq, .slider_phone, .slider_ewm { display: none; }
    .footBox { padding: 15px 0; font-size: 12px; text-align: center; }
    .footBox img { max-width: 120px; margin: 0 auto 10px; }
}

/* ================================================
   手机 480px
   ================================================ */
@media screen and (max-width: 480px) {
    .index_1, .index_3, .index_4, .index_5, .index_6, .index_7 { padding: 20px 0; }
    .index_title { font-size: 18px; }
    .index_long { font-size: 13px; }
    .indexpro li { width: 50%; padding: 5px; }
    .indexpro li .indexpro_name h4 { font-size: 12px; }
    .indexcase li { width: 100%; }
    .indexpai_num { font-size: 14px; }
    .index_6 .w_auto a { padding: 10px 20px; font-size: 14px; }
    .indexwen_ti span { font-size: 15px; }
    .indextable input[type="text"], .indextable textarea { font-size: 13px; padding: 8px !important; }
    .index_butt input { width: 100% !important; }
    .banner { height: 150px !important; }
    .banner li { height: 150px !important; }
}

/* 汉堡菜单 */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;background:none;border:2px solid rgba(255,255,255,0.7);border-radius:4px;cursor:pointer;padding:0;margin:10px 0 10px 10px;flex-shrink:0}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;margin:3px 0;transition:all 0.3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media screen and (max-width:768px){
  .nav-toggle{display:flex}
  .dh_phone{display:none!important}
  .dh_nav{display:none}
  .dh_nav.nav-open{display:block}
  .dh_nav ul{flex-direction:column;padding:0}
  .dh_nav ul li{border-bottom:1px solid rgba(255,255,255,0.15)}
  .dh_nav ul li a{height:46px!important;line-height:46px!important;padding:0 15px!important;display:block}
  .hd_cont{display:flex!important;align-items:center;justify-content:space-between}
  .hd_logo{text-align:left}
}
@media screen and (max-width:480px){
  .hd_logo img{max-width:180px;height:auto}
}



/* homepage layout fix 2026-05-07 */
@media screen and (min-width: 769px) {
  .indexpro ul { display:block; margin:0 -15px; }
  .indexpro li { float:left; display:inline-block; width:345px; margin:0 15px 13px; padding:0; box-sizing:content-box; }
  .indexpro li img { width:100%; height:auto; aspect-ratio:auto; object-fit:initial; }
  .indexcase ul { display:block; margin:0 -10px; }
  .indexcase li { float:left; display:inline-block; width:260px; height:194px; overflow:hidden; margin:0 10px 13px; padding:0; box-sizing:content-box; }
  .indexcase li img { width:100%; height:auto; }
  .foot .w_auto { width:1100px; max-width:none; padding:0; }
  .foot_le { float:left; display:inline-block; }
  .foot_rh { float:right; display:inline-block; width:900px; }
}




/* product grid desktop fix 2026-05-07-2105 */
@media screen and (min-width: 769px) {
  .indexpro .w_auto { width:1100px !important; max-width:none !important; padding:0 !important; box-sizing:content-box !important; }
  .indexpro ul { display:grid !important; grid-template-columns:repeat(3, 1fr) !important; column-gap:20px !important; row-gap:13px !important; margin:0 !important; padding:0 !important; }
  .indexpro li { float:none !important; display:block !important; width:auto !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; }
  .indexpro li a { display:block !important; }
  .indexpro li .indexpro_pic { height:257px !important; overflow:hidden !important; }
  .indexpro li .indexpro_pic img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  .indexpro li .indexpro_name h4 { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
}




/* case grid desktop fix 2026-05-07-2110 */
@media screen and (min-width: 769px) {
  .indexcase .w_auto { width:1100px !important; max-width:none !important; padding:0 !important; box-sizing:content-box !important; }
  .indexcase ul { display:grid !important; grid-template-columns:repeat(4, 1fr) !important; column-gap:20px !important; row-gap:13px !important; margin:0 !important; padding:0 !important; }
  .indexcase li { float:none !important; display:block !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; }
  .indexcase li a { display:block !important; width:100% !important; height:190px !important; overflow:hidden !important; background:#f5f5f5 !important; }
  .indexcase li img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
}




/* lower homepage desktop fix 2026-05-07-2138 */
@media screen and (min-width: 769px) {
  .index_7 .w_auto { width:1100px !important; max-width:none !important; padding:0 !important; box-sizing:content-box !important; }
  .indexwen { float:left !important; display:inline-block !important; width:328px !important; height:350px !important; overflow:hidden !important; margin:0 !important; box-sizing:content-box !important; }
  .indexnew { float:left !important; display:inline-block !important; width:398px !important; height:350px !important; overflow:hidden !important; margin-left:20px !important; margin-top:0 !important; box-sizing:content-box !important; }
  .indexform { float:left !important; display:inline-block !important; width:328px !important; height:350px !important; overflow:hidden !important; margin-left:20px !important; margin-top:0 !important; box-sizing:content-box !important; }
  .indexwen_li { height:250px !important; overflow:hidden !important; }
  .indexwen_li li { height:110px !important; overflow:hidden !important; }
  .indexwen_li li .indexwen_name h3 { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .indexwen_li li .indxwen_hui { height:72px !important; overflow:hidden !important; }
  .indexnew_con { height:260px !important; overflow:hidden !important; }
  .indexnew_pic { display:block !important; height:120px !important; overflow:hidden !important; margin-bottom:8px !important; }
  .indexnew_pic img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  .indexnew_con ul li h3 { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .indextable input.shu { width:98% !important; box-sizing:border-box !important; }
  .indextable textarea { width:98% !important; height:90px !important; box-sizing:border-box !important; }
  #slider1 { display:block !important; }
  .foot .w_auto { width:1100px !important; max-width:none !important; padding:0 !important; box-sizing:content-box !important; }
  .foot_le { float:left !important; display:inline-block !important; width:200px !important; text-align:center !important; }
  .foot_rh { float:right !important; display:inline-block !important; width:900px !important; }
  .foot_menu { display:block !important; }
  .foot_lian { display:block !important; }
}




/* global list pagination fix 2026-05-07-2145 */
.com_page, .pageccc { clear:both; text-align:center; padding:20px 0; overflow:hidden; }
.com_page ul, .pageccc ul, .com_page .plllko, .pageccc .plllko { display:inline-flex !important; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 auto !important; padding:0 !important; list-style:none !important; float:none !important; position:static !important; left:auto !important; }
.com_page li, .pageccc li, .com_page .thisclass, .pageccc .thisclass { display:inline-flex !important; align-items:center; justify-content:center; min-width:32px; height:32px; margin:0 !important; padding:0 8px !important; border:1px solid #e5e5e5 !important; list-style:none !important; float:none !important; position:static !important; left:auto !important; box-sizing:border-box; background:#fff; color:#666; font-style:normal; }
.com_page li a, .pageccc li a { display:block !important; color:#666 !important; line-height:30px !important; text-decoration:none !important; border:0 !important; padding:0 !important; }
.com_page li:hover, .pageccc li:hover, .com_page .thisclass, .pageccc .thisclass { background:#02a8ff !important; color:#fff !important; border-color:#02a8ff !important; }
.com_page li:hover a, .pageccc li:hover a { color:#fff !important; }
@media screen and (min-width: 769px) {
  .w_auto { max-width:1100px; }
  .new_li li { overflow:hidden; }
  .news-list > div { box-sizing:border-box; }
}