/* ================================================
   响应式基础 - SEO优化版
   基于原有common.css扩展，添加移动端自适应
   ================================================ */

/* 基础重置 & 字体 */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #666;
    font-size: 14px;
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* 图片自适应 */
img { max-width: 100%; height: auto; border: 0; display: block; }

/* 链接 */
a { color: #666; text-decoration: none; }
a:hover { color: #008CE1; text-decoration: none; }
a:focus { outline: 2px solid #008CE1; }

/* 清除浮动 */
.clear { clear: both; }
.clearfix::after { content: ""; display: table; clear: both; }

/* 布局容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/*栅格系统*/
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col-12 { width: 100%; padding: 0 15px; }
.col-8 { width: 66.66%; padding: 0 15px; }
.col-6 { width: 50%; padding: 0 15px; }
.col-4 { width: 33.33%; padding: 0 15px; }
.col-3 { width: 25%; padding: 0 15px; }

/* PC主布局 */
.header { width: 100%; overflow: hidden; background: url(../images/headerbg.png) no-repeat center; background-size: cover; }
.content { width: 100%; max-width: 1200px; margin: 0 auto; }
.left { width: 21%; float: left; }
.right { width: 77%; float: right; }
.left2 { width: 72%; float: left; }
.right2 { width: 25%; float: right; }

/* 固定宽度旧版兼容（不动主要class） */
.w1000 { max-width: 1000px; margin: 0 auto; }

/* 文章内容区 */
.left2_main, .right_main { background: #fff; border: 1px solid #d5d5d5; padding: 20px; margin-bottom: 15px; }

/* 面包屑 */
.breadcrumb { padding: 10px 0; font-size: 13px; color: #999; }
.breadcrumb a { color: #666; }

/* H标签层级 */
h1 { font-size: 24px; color: #333; font-weight: bold; margin: 0 0 15px 0; }
h2 { font-size: 20px; color: #333; font-weight: bold; margin: 0 0 12px 0; }
h3 { font-size: 16px; color: #444; font-weight: bold; margin: 0 0 10px 0; }

/* 产品列表 */
.pro-list { display: flex; flex-wrap: wrap; gap: 15px; }
.pro-list dl { width: calc(25% - 15px); background: #fff; border: 1px solid #eee; }
.pro-list dt { overflow: hidden; }
.pro-list dt img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pro-list dd { padding: 10px; font-size: 13px; text-align: center; }

/* 新闻列表 */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { padding: 10px 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; }
.news-list li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list li span { color: #999; font-size: 12px; white-space: nowrap; margin-left: 15px; }

/* 侧边栏 */
.sidebar-box { border: 1px solid #d5d5d5; background: #fff; margin-bottom: 15px; }
.sidebar-box h4 { padding: 10px 15px; background: #f5f5f5; border-bottom: 1px solid #d5d5d5; font-size: 14px; margin: 0; }
.sidebar-box ul { list-style: none; margin: 0; padding: 10px 15px; }
.sidebar-box li { padding: 6px 0; border-bottom: 1px solid #f5f5f5; }
.sidebar-box li:last-child { border-bottom: none; }

/* 产品详情 */
.article-body { font-size: 15px; line-height: 1.8; color: #333; }
.article-body p { margin-bottom: 15px; text-align: justify; }
.article-body img { max-width: 100%; height: auto; margin: 10px 0; }
.article-body h2, .article-body h3 { margin-top: 20px; }

/* 导航 */
.dh_nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.dh_nav ul li { position: relative; }
.dh_nav ul li a { display: block; padding: 0 32px; height: 58px; line-height: 58px; font-size: 14px; color: #fff; white-space: nowrap; }
.dh_nav ul li a.cur, .dh_nav ul li:hover a { background: rgba(0,0,0,0.2); }

/* 相关文章/推荐 */
.related-articles { margin-top: 30px; border-top: 2px solid #008CE1; padding-top: 15px; }
.related-articles h4 { font-size: 16px; margin-bottom: 10px; color: #333; }

/* 分页 */
.pagination { display: flex; justify-content: center; gap: 5px; margin: 20px 0; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid #ddd; font-size: 13px; }
.pagination .current { background: #008CE1; color: #fff; border-color: #008CE1; }

/* Footer */
.footer { background-color: #008CE1; color: #fff; padding: 30px 0; }
.footer a { color: #fff; }

/* ================================================
   媒体查询 - 平板 & 手机自适应
   ================================================ */

/* 平板横屏 768px - 1024px */
@media screen and (max-width: 1024px) {
    .container { padding: 0 10px; }
    .left { width: 25%; }
    .right { width: 72%; }
    .left2 { width: 68%; }
    .right2 { width: 30%; }
    .pro-list dl { width: calc(33.33% - 15px); }
    .dh_nav ul li a { padding: 0 20px; font-size: 13px; }
}

/* 平板竖屏 & 大手机 768px */
@media screen and (max-width: 768px) {
    body { font-size: 13px; }
    .header { min-height: auto; }
    .hd_cont { height: auto; padding: 10px 0; }
    .hd_logo { position: static !important; text-align: center; width: 100%; }
    .dh_phone { display: none; }
    .dh_nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dh_nav ul { flex-wrap: nowrap; overflow-x: auto; }
    .dh_nav ul li a { padding: 0 18px; height: 50px; line-height: 50px; font-size: 13px; }
    .left, .right, .left2, .right2 { width: 100%; float: none; }
    .pro-list dl { width: calc(50% - 10px); }
    .col-3, .col-4 { width: 50%; }
    .right_main, .left2_main { padding: 15px 10px; }
    .content { padding: 0 10px; }
}

/* 手机 480px */
@media screen and (max-width: 480px) {
    .pro-list dl { width: calc(50% - 8px); }
    .pro-list dd { font-size: 12px; padding: 6px; }
    .col-6 { width: 100%; }
    h1 { font-size: 18px; }
    h2 { font-size: 16px; }
    .article-body { font-size: 14px; line-height: 1.7; }
    .breadcrumb { font-size: 12px; }
    .news-list li { flex-direction: column; gap: 4px; }
    .news-list li span { margin-left: 0; }
}

/* 汉堡菜单 */
.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}
}