/* ================================================
   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}
}