/* ========================================================
   诚邦 baocaidg.com - 响应式覆盖样式
   覆盖参考站固定宽度(980px/1004px)布局，实现 PC + 移动端自适应
   原样式 width:980px / 1004px → max-width:100% + 移动端单列
   ======================================================== */

/* 基础重置 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Microsoft YaHei","微软雅黑","Helvetica Neue",Arial,sans-serif; overflow-x: hidden; }

/* ========================================================
   顶部区域样式（模板使用 .top-main 等自定义类名，
   原style.css未定义，需在此补充完整样式）
   ======================================================== */

/* 通用1200容器 */
.w1200 { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 10px; }

/* clearfix 清除浮动 */
.clearfix::after { content: ""; display: block; clear: both; }
.clear { clear: both; height: 0; overflow: hidden; }

/* 顶部主容器 */
.top-main { width: 100%; background: #fff; position: relative; z-index: 100; }

/* 欢迎条 */
.top-main .top-1 { width: 100%; background: #f5f5f5; border-bottom: 1px solid #e8e8e8; height: 34px; line-height: 34px; font-size: 12px; color: #888; }
.top-main .top-1 .fl { float: left; }
.top-main .top-1 .fr { float: right; }
.top-main .top-1 .top-1-tubiao { display: inline-block; margin-left: 15px; }
.top-main .top-1 .top-1-tubiao a { color: #888; }
.top-main .top-1 .top-1-tubiao a:hover { color: #c8161d; }

/* Logo + 电话区 */
.top-main .top-2 { width: 100%; background: #fff; padding: 15px 0; }
.top-main .top-2 .w1200 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.top-main .top-2 .top-logo { float: none; display: flex; align-items: center; }
.top-main .top-2 .top-logo a { text-decoration: none; color: #c8161d; }
.top-main .top-2 .top-logo .logo-text { display: inline-block; }
.top-main .top-2 .top-logo .logo-name { font-size: 36px; font-weight: bold; color: #c8161d; font-family: "Microsoft YaHei",sans-serif; }
.top-main .top-2 .top-logo .logo-slogan { display: block; font-size: 14px; color: #222c50; letter-spacing: 1px; font-family: Arial,sans-serif; margin-top: 2px; }
.top-main .top-2 .top-logo .logo_xian { width: 1px; height: 50px; background: #ddd; margin: 0 15px; }
.top-main .top-2 .top-logo .logo_biaoti { font-size: 18px; color: #333; font-weight: bold; line-height: 1.4; }
.top-main .top-2 .top-logo .logo_miaosu { font-size: 12px; color: #999; line-height: 1.6; margin-top: 2px; }

/* 电话区 */
.top-main .top-2 .top-tel { float: none; text-align: right; }
.top-main .top-2 .top-tel p { font-size: 12px; color: #999; margin: 0 0 2px 0; }
.top-main .top-2 .top-tel h1 { font-size: 28px; color: #c8161d; font-family: Arial,sans-serif; margin: 0; font-weight: bold; line-height: 1.2; }
.top-main .top-2 .top-tel span { font-size: 12px; color: #666; }

/* 主导航栏 */
.top-main .top-3 { width: 100%; background: #222c50; height: 50px; }
.top-main .top-3 .w1200 { height: 50px; }
.top-main .top-3 .top-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: center; height: 50px; }
.top-main .top-3 .top-menu li { height: 50px; position: relative; }
.top-main .top-3 .top-menu li a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; padding: 0 22px; color: #fff; font-size: 15px; text-decoration: none; transition: background 0.2s; }
.top-main .top-3 .top-menu li a:hover, .top-main .top-3 .top-menu li.on > a { background: #c8161d; }
.top-main .top-3 .top-menu .top-menu-ywdaohang { font-size: 10px; color: rgba(255,255,255,0.6); line-height: 1; margin-bottom: 2px; font-family: Arial,sans-serif; text-transform: uppercase; }

/* === 二级导航下拉菜单 === */
.top-main .top-3 .top-menu li.has-sub { position: relative; }
.top-main .top-3 .top-menu .submenu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  min-width: 150px;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 200;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.top-main .top-3 .top-menu .submenu li { height: auto; width: 100%; }
.top-main .top-3 .top-menu .submenu li a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #333;
  font-size: 13px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s;
}
.top-main .top-3 .top-menu .submenu li:last-child a { border-bottom: none; }
.top-main .top-3 .top-menu .submenu li a:hover {
  background: #c8161d;
  color: #fff;
}
.top-main .top-3 .top-menu li.has-sub:hover .submenu { display: block; }
.top-main .top-3 .top-menu li.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.6);
  margin-left: 6px;
  vertical-align: middle;
}
/* 没有子栏目的项：移除下拉箭头和下拉框 */
.top-main .top-3 .top-menu li:not(.has-sub) > a::after { display: none; }
.top-main .top-3 .top-menu .submenu:empty { display: none !important; }
.top-main .top-3 .top-menu li:not(.has-sub) .submenu { display: none !important; }

/* === PC端宽度自适应（保持最大980/1004，但不超过屏幕） === */
.main, .fyMain { width: 980px; max-width: 96%; margin: 0 auto; clear: both; position: relative; }
.aboutf { width: 980px; max-width: 96%; margin: 0 auto; }
.pro_lanfra { width: 980px; max-width: 96%; margin: 0 auto; }
.view-port { width: 980px; max-width: 100%; }
.ititle { width: 980px; max-width: 100%; }
.casecon { width: 980px; max-width: 100%; }
.news { width: 980px; max-width: 96%; margin: 0 auto; }
.newscon { width: 980px; max-width: 100%; }
.news_list { width: 980px; max-width: 96%; margin: 0 auto; }
.title_s { width: 980px; max-width: 96%; }
.menufra { width: 1004px; max-width: 100%; }
.bottomnav ul { width: 1004px; max-width: 100%; }
.fmain { width: 980px; max-width: 96%; margin: 0 auto; }

/* 隐藏元素工具类 */
.hide { display: none !important; }

/* === 顶部条响应式 === */
@media (max-width: 1004px) {
  .header { min-width: 100% !important; }
  .foot { min-width: 100% !important; }
  /* 顶部欢迎条 */
  .top-main .top-1 { display: none; }
  .top-2 .w1200, .top-2 .main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100% !important; max-width: 100% !important; padding: 0 12px; }
  .top-logo { float: none !important; max-width: 100%; }
  .top-logo .logo-text { display: inline-block; padding: 5px 0; }
  .top-logo .logo_xian, .top-logo .logo_biaoti, .top-logo .logo_miaosu { display: none; }
  .top-tel { float: none !important; text-align: right; padding: 5px 0; }
  .top-tel p { font-size: 12px; margin: 0; }
  .top-tel h1 { font-size: 20px !important; margin: 0; color: #c8161d; }
  .top-tel span { font-size: 12px; }
}

/* === 主导航响应式 === */
@media (max-width: 1004px) {
  .top-3 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .top-3 .top-menu { display: flex; flex-wrap: nowrap; min-width: max-content; }
  .top-3 .top-menu li { flex-shrink: 0; }
  .top-3 .top-menu a { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .top-3 .top-menu .top-menu-ywdaohang { font-size: 10px; }
  .top-3 .top-menu .submenu { display: none !important; }
  .top-3 .top-menu li.has-sub > a::after { display: none; }
}

/* === 通用标题 === */
.ititle { text-align: center; padding: 20px 0; float: none !important; }
.ititle p { font-size: 26px; color: #c8161d; font-weight: bold; margin: 0; }
.ititle span { font-size: 18px; color: #333; display: block; margin: 6px 0; width: auto !important; }
.ititle em { display: block; width: 60px; height: 2px; background: #c8161d; margin: 6px auto 0; }

/* === 通知条 === */
.notice .main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 96% !important; max-width: 96% !important; }
.notice b { font-size: 13px; }
.notice marquee { flex: 1; max-width: 100%; }
.notice .search { width: 100%; max-width: 280px; margin-left: auto; }
.notice .text { width: auto; max-width: 180px; }

/* === 关于我们 PC端 === */
.aboutf { height: auto !important; padding: 20px 0 !important; }
.aboutf .imgleft { width: 330px; max-width: 40%; height: auto; float: left; background-position: center bottom; background-size: contain; padding: 0 15px 15px 0; }
.aboutf .abright { width: 590px; max-width: 58%; float: right; }
.aboutf .abright p.con { width: 100% !important; max-width: 100%; }

/* === 产品滑动 === */
.track.product { height: auto !important; padding-top: 40px; padding-bottom: 30px; }
.track.product .main { width: 980px; max-width: 96%; margin: 0 auto; }
.track.product .view-port { overflow: hidden; padding-top: 20px; float: none; width: 100%; max-width: 100%; }
.track.product .slider-container { position: relative; height: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 15px; }
.track.product .slider-container .item { position: relative !important; width: 220px; max-width: calc(25% - 12px); margin: 0 !important; z-index: auto !important; }
.track.product .slider-container .item a { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; }
.track.product .slider-container .item .proimg { width: 100%; display: block; }
.track.product .slider-container .item .proimg img { width: 100%; height: auto; max-height: 200px; object-fit: cover; }
.track.product .slider-container .item .proname { width: 100% !important; }
.track.product .slider-container .item a em { display: none !important; }
.track.product .slider-container .item a:hover { top: 0 !important; }
.track.product .slider-container .item a:hover em { display: none !important; }
.track.product .pagination { display: none; }
.track.product .bullet-pagination { display: none; }

/* === 案例 PC端 === */
.casecon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px 0 !important; }
.casecon > a { width: 243px; max-width: 23%; margin: 0 0 10px 0 !important; }
.casecon img { width: 100% !important; height: auto !important; }
.caser { width: 100% !important; max-width: 100% !important; }

/* === 新闻 PC端 === */
.news { height: auto !important; padding: 30px 0 !important; }
.newscon { padding: 20px 0 0 0 !important; }
.newsleft { width: 470px; max-width: 48%; }
.newsright { width: 470px; max-width: 48%; }
.newsright li { width: 100% !important; max-width: 100%; }
.nnr { width: 307px; max-width: 65%; }
.www51buycom { width: 100%; max-width: 100%; }

/* === 底部 === */
.f_link .main { width: 980px; max-width: 96%; }

/* === 列表页通用 === */
.prolist, .newslist-page, .detail-page, .about-page, .search-page, .message-page, .contact-page, .not-found { padding: 10px 0; }
.prolist ul, .newslist-page ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 15px; }
.prolist li, .newslist-page li { width: 270px; max-width: 100%; }

/* 详情页 */
.detail-page h1 { font-size: 22px; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.detail-page .info { color: #999; font-size: 13px; margin: 10px 0; }
.detail-page .content { padding: 15px 0; line-height: 1.8; font-size: 14px; }
.detail-page .content img, .about-page .content img { max-width: 100%; height: auto; }
.detail-page .nav-prev-next { margin-top: 30px; padding: 10px 0; border-top: 1px dashed #ddd; font-size: 13px; }

/* 翻页 */
.pagebar { text-align: center; padding: 20px 0; }
.pagebar a, .pagebar span { display: inline-block; padding: 6px 12px; margin: 0 3px; border: 1px solid #ddd; color: #666; }
.pagebar .current, .pagebar .active { background: #c8161d; color: #fff; border-color: #c8161d; }

/* 单页 */
.about-page .content { padding: 15px 0; line-height: 1.9; font-size: 14px; }

/* 404 */
.not-found { text-align: center; padding: 60px 0; }
.not-found h1 { font-size: 80px; color: #c8161d; margin: 0; }
.not-found p { font-size: 18px; color: #666; margin: 15px 0; }
.not-found a { display: inline-block; margin-top: 20px; padding: 8px 24px; background: #c8161d; color: #fff; text-decoration: none; }

/* 搜索 */
.search-page form { display: flex; max-width: 600px; margin: 0 auto 20px; }
.search-page input { flex: 1; padding: 8px 12px; border: 1px solid #ddd; }
.search-page button { padding: 8px 24px; background: #c8161d; color: #fff; border: none; cursor: pointer; }

/* 留言表单 */
.message-page form { max-width: 600px; margin: 0 auto; }
.message-page .form-group { margin-bottom: 15px; }
.message-page label { display: block; margin-bottom: 5px; color: #666; }
.message-page input, .message-page textarea { width: 100%; padding: 8px 12px; border: 1px solid #ddd; font-size: 14px; }
.message-page textarea { min-height: 120px; }
.message-page button { padding: 10px 30px; background: #c8161d; color: #fff; border: none; cursor: pointer; }

/* 联系我们 */
.contact-page .info { font-size: 14px; line-height: 2; }
.contact-page .info strong { color: #333; }

/* ========================================================
   平板响应式 (max-width: 768px)
   ======================================================== */
@media (max-width: 768px) {
  /* 顶部 */
  .top-2 .main { flex-direction: column; align-items: flex-start; }
  .top-logo { width: 100%; }
  .top-logo .logo-text img { max-height: 50px; width: auto; }
  .top-tel { width: 100%; text-align: left !important; }

  /* 导航 */
  .top-3 .top-menu a { padding: 8px 10px; font-size: 12px; }

  /* 轮播图 */
  .banner .window, .banner .kv_item { height: 180px !important; }
  .banner .btn_prev, .banner .btn_next { display: none !important; }
  .banner .js_nav { bottom: 8px; }
  .banner .js_nav li { width: 25px; margin: 4px; }

  /* 通知条 */
  .notice .main { flex-direction: column; align-items: stretch; }
  .notice .search { max-width: 100%; margin: 5px 0; }
  .notice marquee { display: none; }

  /* 关于我们 */
  .aboutf { height: auto !important; }
  .aboutf .imgleft { float: none !important; width: 100% !important; max-width: 100%; height: auto; background-position: center; background-size: contain; min-height: 150px; padding: 0 0 15px 0; }
  .aboutf .abright { float: none !important; width: 100% !important; max-width: 100%; padding: 10px 0; }
  .aboutf .abright .name span { font-size: 18px; }
  .aboutf .abright .con { font-size: 13px; line-height: 1.7; height: auto !important; }

  /* 产品滑动 */
  .track.product .slider-container { flex-wrap: wrap; gap: 10px; }
  .track.product .slider-container .item { width: 100% !important; max-width: 100% !important; }
  .track.product .pro_lanfra { display: flex; flex-wrap: wrap; gap: 6px; }
  .track.product .pro_lanfra span { margin: 0; }
  .track.product .pro_lanfra .promore { margin: 0; }

  /* 案例 */
  .casecon { gap: 8px; }
  .casecon > a { width: 100% !important; max-width: 100%; }
  .casecon img { width: 100% !important; height: auto !important; max-height: 200px; object-fit: cover; }

  /* 新闻 */
  .newscon { flex-direction: column; }
  .newscon .newsleft { width: 100% !important; max-width: 100%; }
  .newscon .newsleft img { width: 100% !important; height: auto !important; max-height: 220px; }
  .newscon .newsright { width: 100% !important; max-width: 100%; padding: 8px 0; }
  .newscon .newsright li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #ddd; }
  .newscon .newsright li img { width: 100px !important; height: 80px !important; object-fit: cover; }
  .newscon .newsright .nnr { width: 100% !important; max-width: 100% !important; height: auto !important; border: none !important; }
  .newscon .newsright .nnr .name { font-size: 14px; }
  .newscon .newsright .nnrcon { width: 100% !important; font-size: 12px; line-height: 1.6; height: auto !important; padding: 5px 0 0 0; }

  /* 列表页 */
  .prolist li, .newslist-page li { width: 100% !important; }

  /* 底部 */
  .bottomnav ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .bottomnav li { margin: 4px 8px; }
  .foot .bootTxt { text-align: center; font-size: 12px; line-height: 1.8; }
  .foot { height: auto !important; min-height: 180px; }

  /* 详情页/单页 */
  .detail-page h1 { font-size: 18px; }
}

/* ========================================================
   手机响应式 (max-width: 480px)
   ======================================================== */
@media (max-width: 480px) {
  /* 导航 */
  .top-3 .top-menu a { padding: 8px 6px; font-size: 11px; }
  .top-3 .top-menu .top-menu-ywdaohang { font-size: 9px; }

  /* 标题 */
  .ititle p { font-size: 20px; }
  .ititle span { font-size: 14px; }

  /* 产品项 */
  .track.product .slider-container .item { width: 100% !important; max-width: 100% !important; }

  /* 新闻列表项 */
  .newscon .newsright li img { width: 80px !important; height: 60px !important; }

  /* 底部 */
  .foot .bootTxt { font-size: 11px; }
}