/* ============================================================================
 * chengbolin 主题样式表（assets/css/main.css）
 * 适用站点：北京诚渤林金属丝网有限公司企业站
 * 设计基调：钢蓝(#14508c) 主色 + 工业橙红(#e8551d) 强调，专业、稳重
 * 依赖：normalize.css（重置）、bootstrap.min.css（栅格 col-md-*/row 等）
 * 注释规范：每个区块以「功能说明」开头，便于扩展与维护
 * ============================================================================ */

/* ---------- 全局基础 ---------- */
html { color: #333; font-size: 100%; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: #333;
  background: #fff;
}
a { color: #14508c; text-decoration: none; }
a:hover { color: #e8551d; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; border: 0; }
.clear { clear: both; }

/* 容器：内容居中限宽 */
.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.text-center { text-align: center; }

/* ---------- 页头 header（沿用框架导航结构，仅换配色） ---------- */
/* 注意：logo 与导航均为浮动元素，必须清除浮动，否则 header 高度塌陷为 0，
   蓝色背景条消失、白色导航文字落在页面白底上"隐形" */
.header { position: relative; z-index: 100; background: #14508c; }
.header::after { content: ""; display: block; clear: both; }
.header .logo { float: left; height: 90px; line-height: 90px; margin-left: 32px; }
.header .logo img { max-height: 64px; vertical-align: middle; }
.header .logo a { color: #fff; font-size: 22px; font-weight: bold; }
.header .nav { float: right; }
.header .nav .menu { list-style: none; margin: 0; padding: 0; }
.header .nav .menu > li { float: left; position: relative; }
.header .nav .menu > li > a {
  display: block; padding: 0 20px; line-height: 90px; color: #fff; font-size: 16px;
}
.header .nav .menu > li:hover > a,
.header .nav .menu > li.current > a { color: #ffd9c2; background: rgba(0,0,0,.12); }
.header .nav .menu > li:hover > .submenu { display: block; }
.header .nav .submenu {
  display: none; position: absolute; left: 0; top: 90px; z-index: 99;
  min-width: 150px; background: #14508c; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.header .nav .submenu li a { display: block; padding: 10px 18px; color: #fff; font-size: 14px; }
.header .nav .submenu li a:hover { background: #e8551d; }

/* 移动端导航 */
.moblie_head { display: none; }
.a_txt { display: none; }

/* ---------- 页脚 footer ---------- */
.footer { background: #0f3d6e; color: #cfe0f2; padding: 36px 0 20px; margin-top: 30px; }
/* 三栏各 33.33% 同样存在浮动取整溢出风险，改用 flex（子项可收缩，不会换行掉列） */
.footer-cols { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.footer-cols > li { box-sizing: border-box; padding: 0 20px; vertical-align: top; }
.footer-cols h3 { color: #fff; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 8px; }
.footer-cols p { line-height: 1.9; font-size: 14px; margin: 6px 0; }
.footer-cols a { color: #cfe0f2; }
.footer-cols a:hover { color: #ffd9c2; }
.footer-tel { font-size: 26px; font-family: Impact, sans-serif; color: #fff; }
.footer-bottom { background: #0b3057; color: #9fb6d0; text-align: center; padding: 12px 0; font-size: 13px; }
.footer-bottom a { color: #9fb6d0; margin: 0 6px; }

/* ---------- 区块通用 section（美术优化：加大留白、标题层级更清晰） ---------- */
.section { padding: 56px 0; }
.section-title { text-align: center; margin-bottom: 42px; }
.section-title h2 {
  font-size: 32px; font-weight: 700; color: #14508c; margin: 0;
  letter-spacing: 2px; position: relative; display: inline-block;
  padding-bottom: 16px;
}
/* 装饰分割线：居中渐变短线，位于标题正下方 */
.section-title h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #e8551d, #f0894b);
}
/* 分割线上方的小圆点，增强装饰层次 */
.section-title h2::before {
  content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 14px;
  background: #e8551d; border-radius: 50%;
}
.section-title p { color: #999; font-size: 14px; letter-spacing: 3px; margin: 14px 0 0; font-weight: 400; }
/* 关于我们等左对齐变体：统一改为居中，保持整站风格一致 */
.section-title.left { text-align: center; }
.section-title.left h2::after { left: 50%; transform: translateX(-50%); margin: 0; }
.section-title.left h2::before { margin: 0 auto 14px; }

/* ---------- 首屏 Banner hero（渐变视觉，无图片依赖，杜绝破图） ---------- */
.hero { position: relative; }
.hero-swiper { width: 100%; height: 460px; }
.hero-slide { height: 460px; color: #fff; position: relative; overflow: hidden; }
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.14), transparent 55%);
}
.hero-slide-a { background: linear-gradient(120deg, #14508c 0%, #1b63ad 55%, #0f3d6e 100%); }
.hero-slide-b { background: linear-gradient(120deg, #0f3d6e 0%, #14508c 50%, #0b3057 100%); }
.hero-slide-c { background: linear-gradient(120deg, #1b63ad 0%, #14508c 60%, #b8430f 150%); }
/* 文字垂直居中：绝对定位 + translateY(-50%)，规避 Swiper 样式对 flex 居中的干扰 */
.hero-inner { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 2; }
.hero-eyebrow {
  display: inline-block; font-size: 14px; letter-spacing: 2px; color: #ffd9c2;
  border: 1px solid rgba(255,217,194,.5); padding: 4px 14px; border-radius: 20px; margin: 0 0 18px;
}
.hero-title { font-size: 40px; line-height: 1.25; margin: 0 0 16px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.2); }
.hero-sub { font-size: 17px; line-height: 1.8; max-width: 640px; opacity: .92; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-hero { display: inline-block; padding: 13px 34px; border-radius: 4px; font-size: 16px; font-weight: 600; transition: .2s; }
.btn-hero-primary { background: #e8551d; color: #fff; }
.btn-hero-primary:hover { background: #c8460f; color: #fff; }
.btn-hero-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn-hero-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.hero-swiper .swiper-pagination-bullet { background: #fff; opacity: .6; }
.hero-swiper .swiper-pagination-bullet-active { background: #e8551d; opacity: 1; }

/* ---------- 产品卡片 product_card 组件 ---------- */
.product-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.product-card {
  flex: 0 0 calc(25% - 15px); background: #fff; border: 1px solid #eee;
  border-radius: 4px; overflow: hidden; transition: box-shadow .2s, transform .2s;
  display: flex;
}
.product-card > a { display: flex; flex-direction: column; width: 100%; }
.product-card:hover { box-shadow: 0 6px 18px rgba(20,80,140,.18); transform: translateY(-3px); }
.product-thumb { height: 200px; overflow: hidden; background: #f5f7fa; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.product-title { font-size: 16px; color: #333; margin: 0 0 8px; line-height: 1.4; min-height: 44px; overflow: hidden; flex: 1 1 auto; }
.product-price { font-size: 16px; margin-top: 4px; }
.product-price .price-now { color: #e8551d; font-weight: bold; font-size: 18px; }
.product-price .price-negotiable { color: #14508c; font-weight: bold; }

/* ---------- 首页产品供应：分类标签 + 图片展示墙 ---------- */
.home-cat-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin: 0 0 30px; }
.cat-tag {
  display: inline-block; padding: 8px 22px; border: 1px solid #cfd8e3; border-radius: 999px;
  color: #3a4a5c; font-size: 14px; background: #fff; transition: all .2s ease;
}
.cat-tag:hover {
  background: #14508c; border-color: #14508c; color: #fff;
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(20,80,140,.25);
}
.showcase-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.showcase-card {
  position: relative; display: block; flex: 0 0 calc(25% - 13.5px);
  height: 230px; border-radius: 8px; overflow: hidden; background: #f5f7fa;
  box-shadow: 0 2px 8px rgba(15,45,80,.08); transition: box-shadow .25s, transform .25s;
}
.showcase-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.showcase-card:hover { box-shadow: 0 10px 24px rgba(15,45,80,.22); transform: translateY(-3px); }
.showcase-card:hover img { transform: scale(1.06); }
.showcase-mask {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,25,45,0) 0%, rgba(10,25,45,.74) 100%);
}
.showcase-name {
  position: absolute; left: 10px; right: 10px; bottom: 18px; margin: 0;
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1px;
  text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showcase-name::after {
  content: ""; display: block; width: 0; height: 2px; margin: 6px auto 0;
  background: #e8551d; transition: width .3s ease;
}
.showcase-card:hover .showcase-name::after { width: 34px; }

/* ---------- 关于我们 about ---------- */
.about-inner { display: flex; gap: 40px; align-items: center; }
.about-text { flex: 1; }
.about-content { color: #666; line-height: 1.9; margin: 16px 0 20px; }
.about-image { flex: 0 0 42%; }
.about-image img { width: 100%; border-radius: 4px; }
/* 关于我们右侧：推荐产品卡（替代占位图） */
.about-feature { flex: 0 0 42%; }
.feature-card { display: block; background: #fff; border: 1px solid #e6ecf3; border-radius: 6px; overflow: hidden; transition: .2s; }
.feature-card:hover { box-shadow: 0 8px 22px rgba(20,80,140,.16); transform: translateY(-3px); }
.feature-thumb { height: 220px; overflow: hidden; background: #eaf1f8; }
.feature-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feature-info { padding: 16px 18px; }
.feature-label { display: inline-block; font-size: 12px; color: #e8551d; background: #fff1ea; padding: 3px 10px; border-radius: 12px; margin-bottom: 8px; }
.feature-title { font-size: 18px; color: #222; margin: 0 0 8px; }
.feature-desc { color: #777; font-size: 13px; line-height: 1.7; margin: 0 0 10px; }
.feature-price { color: #14508c; font-weight: bold; font-size: 16px; margin-right: 12px; }
.feature-more { color: #e8551d; font-size: 14px; font-weight: 600; }

/* ---------- 新闻动态 news ---------- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-bottom: 1px dashed #e5e5e5; }
.news-list li a { display: flex; align-items: center; padding: 14px 4px; }
.news-list .news-date { color: #e8551d; font-size: 14px; width: 110px; flex: 0 0 110px; }
.news-list .news-title { color: #444; font-size: 15px; flex: 1; }
.news-list li a:hover .news-title { color: #14508c; }

/* ---------- 联系我们 contact ---------- */
.contact-section { background: #f5f7fa; }
.contact-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.contact-cards li {
  background: #fff; border-top: 3px solid #e8551d; border-radius: 4px;
  padding: 24px 32px; text-align: center; min-width: 200px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.contact-cards .c-icon { font-size: 26px; color: #14508c; }
.contact-cards p { margin: 8px 0 0; line-height: 1.7; color: #555; }
.contact-cards b { color: #14508c; font-size: 16px; }

/* ---------- 面包屑 breadcrumb 组件 ---------- */
/* 面包屑在页面模板中位于 .container 之外，这里自行限宽居中，与内容区对齐 */
.breadcrumb {
  max-width: 1170px; margin: 0 auto; padding: 14px 15px; box-sizing: border-box;
  color: #888; font-size: 13px;
}
.breadcrumb a { color: #14508c; }
.breadcrumb .sep { margin: 0 8px; color: #bbb; }
.breadcrumb .current { color: #e8551d; }

/* ---------- 侧栏 / 分类导航 ---------- */
/* 列表页左右栏改用 flex 布局：Bootstrap 3 浮动栅格 25%+75%=100% 在 Windows
   DPI 缩放下会因亚像素取整溢出换行（主区掉到侧栏下方），flex 可自动收缩规避 */
.product-list-page { padding-top: 26px; }
.product-list-page .row, .article-list-page .row { display: flex; flex-wrap: wrap; }
.product-list-page .product-sidebar, .article-list-page .article-sidebar { float: none; width: 25%; }
.product-list-page .col-md-9, .article-list-page .col-md-9 { float: none; width: 75%; }
.product-sidebar, .article-sidebar { margin-bottom: 20px; }

/* 产品中心分类导航：强调色左条 + 悬停/选中态，视觉层次更清晰 */
.cat-box { background: #fff; border: 1px solid #e6ecf3; border-radius: 6px; padding: 16px; box-shadow: 0 1px 6px rgba(20,80,140,.05); }
.sidebar-title { font-size: 17px; color: #14508c; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e8551d; }
.category-nav { list-style: none; margin: 0; padding: 0; }
.category-nav li { border-bottom: 1px dashed #eaeef3; }
.category-nav li:last-child { border-bottom: 0; }
.category-nav li a {
  position: relative; display: block; padding: 12px 12px 12px 18px; color: #555;
  font-size: 15px; transition: .2s;
}
.category-nav li a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; background: #e8551d; border-radius: 2px; transition: height .2s;
}
.category-nav li a .cat-arrow { float: right; color: #b9c4d1; transition: .2s; }
.category-nav li a:hover { color: #14508c; background: #f3f7fb; padding-left: 22px; }
.category-nav li a:hover::before { height: 60%; }
.category-nav li a:hover .cat-arrow { color: #14508c; }
.category-nav li.active a { color: #14508c; font-weight: bold; background: #eef4fb; padding-left: 22px; }
.category-nav li.active a::before { height: 70%; }
.category-nav li.active a .cat-arrow { color: #14508c; }

/* ---------- 产品详情 product detail ---------- */
.product-detail-img { border: 1px solid #eee; border-radius: 4px; padding: 12px; }
.product-detail-img img { width: 100%; }
.product-detail-title { font-size: 24px; color: #222; margin: 0 0 14px; }
.product-detail-price { font-size: 18px; margin-bottom: 16px; }
.product-detail-meta { margin-top: 16px; color: #666; line-height: 1.9; }
.product-detail-meta a { color: #14508c; }
.product-detail-content { margin-top: 30px; }
.product-detail-content .block-title { font-size: 20px; color: #14508c; border-left: 4px solid #e8551d; padding-left: 10px; margin: 0 0 14px; }
.product-rich { line-height: 1.9; color: #555; }

/* 产品图缩略图组：主图 + 下方横向缩略图，点击切换 */
.product-gallery { margin-bottom: 20px; }
.gallery-main { border: 1px solid #eee; border-radius: 4px; padding: 12px; background: #fff; }
.gallery-main img { width: 100%; height: 360px; object-fit: contain; background: #f7f9fc; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 6px; }
.gallery-thumb {
  flex: 0 0 76px; height: 76px; border: 2px solid #eee; border-radius: 4px; overflow: hidden;
  padding: 0; cursor: pointer; background: #fff; transition: border-color .2s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: #e8551d; }

/* ---------- 通用按钮 btn ---------- */
.btn-more {
  display: inline-block; margin-top: 22px; padding: 10px 30px; border: 1px solid #14508c;
  color: #14508c; border-radius: 4px; font-size: 15px; transition: .2s;
}
.btn-more:hover { background: #14508c; color: #fff; }

/* ---------- 工程案例 cases（调用真实产品图作视觉） ---------- */
.cases-section { background: #f5f7fa; }
.cases-grid { display: flex; flex-wrap: wrap; gap: 22px; }
.case-card {
  flex: 0 0 calc(25% - 17px); background: #fff; border: 1px solid #eee; border-radius: 6px;
  overflow: hidden; transition: .2s;
}
.case-card:hover { box-shadow: 0 8px 22px rgba(20,80,140,.16); transform: translateY(-3px); }
.case-link-wrap { display: block; color: inherit; }
.case-visual { position: relative; height: 180px; overflow: hidden; background: #eaf1f8; }
.case-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.case-card:hover .case-visual img { transform: scale(1.06); }
.case-tag { position: absolute; left: 12px; bottom: 12px; background: rgba(20,80,140,.88); color: #fff; font-size: 13px; padding: 5px 14px; border-radius: 20px; }
.case-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.case-title { font-size: 18px; color: #14508c; margin: 0 0 10px; }
.case-desc { color: #666; font-size: 14px; line-height: 1.8; margin: 0 0 14px; flex: 1; }
.case-link { color: #e8551d; font-size: 14px; font-weight: 600; }
.case-link:hover { color: #c8460f; }

/* ---------- 服务优势 advantage ---------- */
.advantage-section { background: #fff; }
.advantage-grid { display: flex; flex-wrap: wrap; gap: 22px; }
.advantage-item {
  flex: 0 0 calc(25% - 17px); text-align: center; padding: 28px 18px; border: 1px solid #eee;
  border-radius: 6px; background: #fafcff; transition: .2s;
}
.advantage-item:hover { border-color: #14508c; }
.adv-icon {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: #14508c; color: #fff; font-size: 22px; font-weight: bold;
}
.advantage-item h4 { font-size: 17px; color: #222; margin: 0 0 8px; }
.advantage-item p { color: #777; font-size: 14px; line-height: 1.7; margin: 0; }

/* ---------- 相关产品（横向滚动） ---------- */
.related-products { margin-top: 34px; }
.related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.related-head .block-title { margin: 0; }
.related-nav { display: flex; gap: 8px; }
.rel-arrow {
  width: 36px; height: 36px; border: 1px solid #ddd; background: #fff; border-radius: 4px;
  color: #14508c; font-size: 20px; line-height: 1; cursor: pointer; transition: .2s;
}
.rel-arrow:hover { background: #14508c; color: #fff; border-color: #14508c; }
.related-track {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.related-track::-webkit-scrollbar { height: 8px; }
.related-track::-webkit-scrollbar-thumb { background: #cdd9e6; border-radius: 4px; }
.related-track .product-card { flex: 0 0 220px; }
.btn-buy {
  display: inline-block; margin-top: 10px; padding: 12px 36px; background: #e8551d;
  color: #fff; border: 0; border-radius: 4px; font-size: 16px; cursor: pointer; transition: .2s;
}
.btn-buy:hover { background: #c8460f; color: #fff; }

/* ---------- 新闻卡片 news card ---------- */
.news-grid { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.news-card { flex: 0 0 calc(33.33% - 14px); border: 1px solid #eee; border-radius: 4px; overflow: hidden; transition: .2s; background: #fff; }
.news-card:hover { box-shadow: 0 6px 18px rgba(20,80,140,.15); }
.news-card-thumb { height: 170px; overflow: hidden; background: #f5f7fa; }
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 14px; }
.news-card-title { font-size: 16px; color: #333; margin: 0 0 8px; line-height: 1.4; height: 44px; overflow: hidden; }
.news-card-summary { color: #888; font-size: 13px; line-height: 1.6; height: 42px; overflow: hidden; margin: 0 0 6px; }
.news-card-date { color: #e8551d; font-size: 12px; }

/* ---------- 文章详情 article detail ---------- */
.article-detail-title { font-size: 26px; color: #222; margin: 0 0 12px; }
.article-detail-meta { color: #999; font-size: 13px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.article-detail-content { line-height: 1.9; color: #555; }

/* ---------- 上一篇 / 下一篇 ---------- */
.product-pager { display: flex; justify-content: space-between; margin-top: 26px; padding-top: 16px; border-top: 1px solid #eee; color: #666; font-size: 14px; }
.product-pager a { color: #14508c; }

/* ---------- 单页 / 留言 / 搜索 ---------- */
.single-page { padding: 30px 0; }
.single-title { text-align: center; margin-bottom: 24px; }
.single-title h1 { font-size: 26px; color: #14508c; margin: 0; }
.single-content { line-height: 1.9; color: #555; }
.empty-tip { text-align: center; color: #999; padding: 50px 0; }

/* 留言表单 */
.guestbook-form { max-width: 720px; margin: 0 auto; }
.form-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.form-item { flex: 1; min-width: 200px; }
.form-item.full { flex: 0 0 100%; }
.form-item label { display: block; margin-bottom: 6px; font-weight: bold; color: #444; }
.form-item .required { color: #e8551d; }
.form-control { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 14px; }
.guestbook-tip { text-align: center; color: #999; margin-top: 14px; }

/* 搜索 */
.search-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 20px; }
.search-form .form-control { flex: 1; }
.search-count { text-align: center; color: #666; margin-bottom: 16px; }

/* 分页 pagebar */
.pagebar { text-align: center; margin-top: 26px; }
.pagination { display: inline-block; }
.page-item { display: inline-block; padding: 7px 13px; margin: 0 3px; border: 1px solid #ddd; border-radius: 4px; color: #555; font-size: 14px; }
.page-item.page-link:hover, .page-item.page-link.current { background: #14508c; color: #fff; border-color: #14508c; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .product-card { flex: 0 0 calc(33.33% - 14px); }
  .showcase-card { flex: 0 0 calc(33.33% - 12px); height: 200px; }
  .news-card { flex: 0 0 calc(50% - 10px); }
  .case-card { flex: 0 0 calc(50% - 11px); }
  .about-inner { flex-direction: column; }
  .about-image { flex: 0 0 100%; width: 100%; }
  .about-feature { flex: 0 0 100%; width: 100%; }
}
@media (max-width: 768px) {
  .header { display: none; }                 /* 移动端隐藏 PC 页头，改用折叠菜单头部 */
  /* 列表页左右栏恢复上下堆叠 */
  .product-list-page .row, .article-list-page .row { display: block; }
  .product-list-page .product-sidebar, .article-list-page .article-sidebar,
  .product-list-page .col-md-9, .article-list-page .col-md-9 { width: auto; }
  .moblie_head { display: block; position: relative; height: 60px; background: #14508c; }
  .moblie_head .lf { float: left; height: 60px; line-height: 60px; padding-left: 15px; }
  .moblie_head .lf a { color: #fff; font-weight: bold; }
  .moblie_head .lf img { max-height: 40px; vertical-align: middle; }
  .moblie_head .rg { float: right; height: 60px; line-height: 60px; padding-right: 15px; }
  .moblie_head .rg img { width: 26px; vertical-align: middle; }
  .a_txt { display: none; position: absolute; left: 0; top: 60px; width: 100%; background: #14508c; z-index: 200; }
  .a_txt .div3 ul { list-style: none; margin: 0; padding: 0; }
  .a_txt .div3 li { border-bottom: 1px solid rgba(255,255,255,.15); }
  .a_txt .div3 li a { display: block; padding: 14px 18px; color: #fff; }
  .hero-swiper, .hero-slide { height: 260px; }
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: 14px; }
  .btn-hero { padding: 11px 24px; font-size: 14px; }
  .product-card, .news-card { flex: 0 0 calc(50% - 8px); }
  .showcase-card { flex: 0 0 calc(50% - 9px); height: 170px; }
  .case-card, .advantage-item { flex: 0 0 calc(50% - 11px); }
  .footer-cols > li { flex: 0 0 100%; margin-bottom: 18px; }
}
@media (max-width: 480px) {
  .product-card, .news-card { flex: 0 0 100%; }
  .showcase-card { flex: 0 0 calc(50% - 7px); height: 150px; }
  .case-card, .advantage-item { flex: 0 0 100%; }
  .about-feature { flex: 0 0 100%; }
}