/* ==========================================================================
   高美官网主题 · 新增组件样式
   --------------------------------------------------------------------------
   老站没有的几类页面（品牌、标签、站内搜索、错误页、在线询价），
   这里按老站内页的视觉语言（深蓝 #0b4da2、灰底 #f4f6f8、1px #dedede 描边）
   补齐，不引入任何新的设计风格。
   加载顺序：style.css / reset.css → extra.css → responsive.css
   ========================================================================== */

/* ---------- 通用小标题（老站 .i_h3 的补充：无背景时的兜底） ---------- */
.right_main > .i_h3 { margin-top: 6px; }

/* ---------- 品牌页 ---------- */
.brand_head {
  overflow: hidden;
  padding: 16px;
  margin-bottom: 14px;
  background: #f7f9fb;
  border: 1px solid #e3e8ee;
}
.brand_head .brand_logo {
  float: left;
  max-width: 160px;
  max-height: 80px;
  margin-right: 18px;
}
.brand_head .brand_txt { overflow: hidden; }
.brand_head .brand_txt h1 {
  font-size: 22px;
  line-height: 32px;
  color: #0b4da2;
  font-weight: bold;
}
.brand_head .brand_sub {
  font-size: 13px;
  color: #777;
  line-height: 22px;
  margin-top: 4px;
}
.brand_head .brand_cnt {
  font-size: 13px;
  color: #666;
  line-height: 24px;
  margin-top: 8px;
}
.brand_head .brand_cnt b { color: #d80d15; font-size: 16px; padding: 0 3px; }

/* ---------- 标签聚合页 ---------- */
.tag_head {
  padding: 12px 16px;
  margin-bottom: 12px;
  border-left: 4px solid #0b4da2;
  background: #f7f9fb;
}
.tag_head h1 { font-size: 20px; line-height: 30px; color: #222; font-weight: bold; }
.tag_head p { font-size: 13px; color: #777; line-height: 22px; }
.tag_head p b { color: #d80d15; padding: 0 2px; }

/* 详情页底部标签 */
.taglink { padding: 12px 0 4px; font-size: 13px; color: #888; line-height: 26px; }
.taglink a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 10px;
  color: #555;
  background: #f2f4f7;
  border: 1px solid #e2e6ec;
  border-radius: 2px;
}
.taglink a:hover { color: #fff; background: #0b4da2; border-color: #0b4da2; text-decoration: none; }

/* ---------- 站内搜索 ---------- */
.search_page { padding: 4px 0 20px; }
.search_form { overflow: hidden; padding: 0 0 14px; }
.search_form input[type="text"] {
  float: left;
  width: 420px;
  max-width: 70%;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  color: #333;
  border: 1px solid #cfd6de;
  border-right: 0;
  background: #fff;
  box-sizing: border-box;
}
.search_form button {
  float: left;
  height: 36px;
  padding: 0 26px;
  font-size: 14px;
  color: #fff;
  background: #0b4da2;
  border: 0;
  cursor: pointer;
}
.search_form button:hover { background: #093d80; }

.search_tip { font-size: 13px; color: #666; line-height: 24px; padding: 0 0 8px; border-bottom: 1px solid #eee; }
.search_tip b { color: #d80d15; padding: 0 2px; }

.search_list { padding-top: 6px; }
.search_list .sitem { padding: 14px 0; border-bottom: 1px dashed #e6e6e6; }
.search_list .sitem_t { font-size: 15px; line-height: 26px; }
.search_list .sitem_t a { color: #1a4f8b; }
.search_list .sitem_t a:hover { color: #d80d15; }
.search_list .stype {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  border-radius: 2px;
  vertical-align: 1px;
}
.search_list .stype.type_p { background: #0b4da2; }
.search_list .stype.type_a { background: #7a8b9a; }
.search_list .sitem_d { font-size: 13px; color: #777; line-height: 24px; margin-top: 4px; }
.search_list .sitem_m { font-size: 12px; color: #aaa; line-height: 20px; }

.search_empty { padding: 30px 0; font-size: 14px; color: #777; line-height: 28px; }
.search_empty a { color: #0b4da2; }

/* ---------- 错误页 / 404 ---------- */
.error-page { padding: 40px 20px 60px; text-align: center; }
.error-page .err-code {
  font-size: 96px;
  line-height: 110px;
  font-weight: bold;
  color: #e3e8ee;
  letter-spacing: 4px;
}
.error-page h1 { font-size: 22px; line-height: 34px; color: #333; margin-bottom: 10px; }
.error-page > p { font-size: 14px; color: #777; line-height: 26px; }
.error-page .err-links { margin-top: 10px; }
.error-page .err-links a { color: #0b4da2; margin: 0 4px; }
.error-page .err-search { margin: 22px auto 0; max-width: 420px; }
.error-page .err-search form { display: flex; }
.error-page .err-search input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #cfd6de;
  border-right: 0;
  box-sizing: border-box;
}
.error-page .err-search button {
  height: 36px;
  padding: 0 22px;
  font-size: 14px;
  color: #fff;
  background: #0b4da2;
  border: 0;
  cursor: pointer;
}

/* ---------- 在线询价 ---------- */
.inquiry-box { margin-top: 10px; }
.inquiry-form { padding: 16px; background: #f7f9fb; border: 1px solid #e3e8ee; }
.inquiry-form .row { display: flex; gap: 12px; margin-bottom: 10px; }
.inquiry-form input[type="text"],
.inquiry-form input[type="tel"] {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  color: #333;
  border: 1px solid #cfd6de;
  background: #fff;
  box-sizing: border-box;
}
.inquiry-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  border: 1px solid #cfd6de;
  background: #fff;
  box-sizing: border-box;
}
.inquiry-form .submit {
  margin-top: 12px;
  height: 38px;
  padding: 0 30px;
  font-size: 14px;
  color: #fff;
  background: #d80d15;
  border: 0;
  cursor: pointer;
}
.inquiry-form .submit:hover { background: #b90b12; }
.inquiry-form .submit:disabled { opacity: .6; cursor: default; }

/* ---------- 侧栏联系方式 ---------- */
.l_contact_b { padding: 10px 12px 14px; font-size: 13px; color: #555; line-height: 24px; }
.l_contact_b .tel { font-size: 18px; color: #d80d15; font-weight: bold; line-height: 30px; }

/* ---------- 分页兜底（老站 .apage 在 style.css 里，这里只补窄屏换行） ---------- */
.apage .next_page { line-height: 30px; }

/* ---------- 首页底部三栏（.mbox：新闻中心 / 公司动态 / 在线留言） ---------- */
.mbox .feedback .box p { font-size: 14px; line-height: 26px; color: #595758; }
.mbox .feedback .box em { display: block; font-size: 14px; font-weight: normal; line-height: 26px; margin-bottom: 6px; }
.mbox .feedback .box span { color: #e50311; }
.mbox .feedback .fromcontent { width: auto; }
.mbox .feedback .form_group { padding: 4px 0; overflow: hidden; }
.mbox .feedback .control_label {
  float: left;
  width: 78px;
  font-size: 13px;
  line-height: 28px;
  color: #595758;
}
.mbox .feedback .infoInput {
  float: left;
  width: 250px;
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  border: 1px solid #d8d8d8;
  background: #f0f0f0;
  box-sizing: border-box;
}
.mbox .feedback textarea {
  float: left;
  width: 250px;
  padding: 5px 6px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid #d8d8d8;
  background: #f0f0f0;
  box-sizing: border-box;
}
.mbox .feedback .button {
  height: 30px;
  padding: 0 18px;
  font-size: 13px;
  color: #fff;
  background: #e50112;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.mbox .feedback .button:disabled { opacity: .6; cursor: default; }

/* 关于高美的产品滚动图（老站 .picMarquee-left） */
.maboutfaq .left .box .img .picList { overflow: hidden; }
.maboutfaq .left .box .img .picList li { list-style: none; }
.maboutfaq .left .box .img .picList li a { display: block; }
.maboutfaq .left .box .img .picList li img { display: block; width: 208px; height: 136px; object-fit: cover; }

/* --------------------------------------------------------------------------
   关于高美 / 常见问题 板块加高
   --------------------------------------------------------------------------
   老站这块 .box 定高 295px，但左图(4.gif 208×208)+简介文字实际高约 300px，
   跑马灯图片条再占 144px —— 老站之所以没穿帮，是因为当年模板里跑马灯是空的
   （ul.picList 没输出任何 li，实测高度 0）。现在跑马灯有真实产品图，
   必须把板块加高，否则图片条溢出盒子、被下方「产品分类」区盖住。
   加高后左右两栏同步 325 → 416，阴影位置跟着挪，视觉比例不变。
   -------------------------------------------------------------------------- */
.maboutfaq .left,
.maboutfaq .right { height: 416px; }
.maboutfaq .left .box { height: 385px; overflow: hidden; }
.maboutfaq .right .box { height: 345px; }
.maboutfaq .left .shadow,
.maboutfaq .right .shadow { top: 416px; }
.maboutfaq .right .box .txtMarquee-top { height: 300px; }
/* 简介最多 6 行，超出一律裁掉，保证跑马灯永远在盒子内 */
.maboutfaq .left .box .text .textr span {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   「+更多」胶囊按钮
   --------------------------------------------------------------------------
   老站 .COM-more 定宽 45px，不同字体渲染下「+更多」三个字会超出胶囊
   （实测文字宽约 37px + 缩进，45px 装不下），改成自适应宽 + 居中，
   视觉仍是黑色圆角胶囊，但文字永远在框内。
   -------------------------------------------------------------------------- */
.COM-more {
  width: auto;
  min-width: 45px;
  box-sizing: border-box;
  padding: 0 8px;
  text-indent: 0;
  text-align: center;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   页脚
   --------------------------------------------------------------------------
   1. 老站 .footer 定高 348px，内容一旦超高（二维码换行等）就会画到页脚外；
      改成 min-height + 背景纵向拉伸（fbg.png 是 #eb242a→#bf0003 的竖向渐变条），
      任何高度下渐变都完整。
   2. .flogo 一行是 logo(281) + 简介 + 二维码(130)，老站简介文字窄(实测 379px)
      三者放得下；迁移后备案号一行较长，简介被内容撑到 610px，三个加起来
      超 1000px，二维码被挤到第二行、画出页脚。给简介定宽 588px 住回压。
   -------------------------------------------------------------------------- */
.footer {
  height: auto;
  min-height: 348px;
  background: #d00e12 url(../images/fbg.png) repeat-x top center;
  background-size: auto 100%;
}
.footer .flogo .text { width: 588px; }

/* 左侧漂浮窗：完全沿用老站 index.css 的 200×300 float.jpg 原样
   （定位、热区都由 index.css + 模板内联样式提供，这里不再覆盖）。
   1200px 以下内容区左边距不足 200px，漂浮窗会压住正文，收掉交给底栏 */

/* ============================================================
   V1.3.3 新增组件
   内页 Banner / 产品分类瀑布流 / 品牌独立页 / 详情页按钮与名片
   ============================================================ */

/* 内页 Banner：后台传图后自适应铺满，没图时整块不输出 */
.inner-banner{width:100%;overflow:hidden;background:#f4f4f4;line-height:0}
.inner-banner img{display:block;width:100%;height:auto;max-width:1920px;margin:0 auto}

/* 产品分类页：按分类分板块（每板块最多 6 个，一行 3 个，等宽等高） */
.pro-groups{padding:0 0 6px}
.pro-group{margin:0 0 26px}
.pro-group .pg-head{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid #d80d15;padding:0 0 8px;margin:0 6px 14px}
.pro-group .pg-head h2{margin:0;font-size:19px;font-weight:600;color:#222;line-height:24px}
.pro-group .pg-head em{font-style:normal;font-size:12px;color:#999}
.pro-group .pg-head .pg-more{margin-left:auto;font-size:12px;color:#666}
.pro-group .pg-head .pg-more:hover{color:#d80d15}

/* 3 列网格；dt 用 1:1 方形占位（padding-bottom 实现，兼容所有浏览器），
   图片 object-fit:contain 完整显示不裁切，卡片高度一致，行行对齐。 */
.pg-water{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px;padding:0 6px}
.pg-water .pro-card{float:none;display:block;width:auto;margin:0}
.pg-water .pro-card dt{position:relative;width:100%;height:0;padding-bottom:100%;border:1px solid #dedede;background:#fff;overflow:hidden;box-sizing:border-box}
.pg-water .pro-card dt img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box}
.pg-water .pro-card dt a{display:block;width:100%;height:100%}
.pg-water .pro-card dd{width:auto;height:40px;min-height:40px;margin:0;padding:8px 2px 0;text-align:center;font-size:13px;line-height:20px;overflow:hidden}
.pg-water .pro-card dd a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#333}
.pg-water .pro-card dd a:hover{color:#d80d15}

/* 品牌页：产品板块 4 列（同一套方形图片框，保证对齐） */
.brand-pro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px;padding:0 6px}
.brand-pro .pro-card{float:none;display:block;width:auto;margin:0}
.brand-pro .pro-card dt{position:relative;width:100%;height:0;padding-bottom:100%;border:1px solid #dedede;background:#fff;overflow:hidden;box-sizing:border-box}
.brand-pro .pro-card dt img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box}
.brand-pro .pro-card dt a{display:block;width:100%;height:100%}
.brand-pro .pro-card dd{width:auto;height:40px;min-height:40px;margin:0;padding:8px 2px 0;text-align:center;font-size:13px;line-height:20px;overflow:hidden}
.brand-pro .pro-card dd a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#333}
.brand-pro .pro-card dd a:hover{color:#d80d15}

/* 品牌页：相关资讯（纯文字标题，SEO 内链） */
.brand-news{margin:8px 0 20px}
.brand-news ul{list-style:none;margin:0;padding:0 6px}
.brand-news li{overflow:hidden;padding:9px 0;border-bottom:1px dashed #e6e6e6;font-size:14px}
.brand-news li:last-child{border-bottom:0}
.brand-news li a{float:left;max-width:82%;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-news li a:hover{color:#d80d15}
.brand-news li span{float:right;color:#999;font-size:12px}

/* ============================================================
   产品详情页：流式两栏（彻底不用老站的固定高度）
   老站 .prodetailsinfo 定高 402px、.ul_prodinfoshow 定高 290px，
   内容一多就裁切、浮动溢出压到下面的板块 —— 这里全部改成自适应。
   ============================================================ */
.prodetailsinfo{height:auto}
body.page-product .pd-top{display:flex;align-items:flex-start;gap:22px;padding:14px 6px 20px;border-bottom:1px dashed #bbb}

/* 左：主图 + 缩略图条 */
.pd-gallery{flex:0 0 322px;max-width:322px}
.pd-main{display:flex;align-items:center;justify-content:center;width:100%;height:320px;border:1px solid #ddd;background:#fff;overflow:hidden;box-sizing:border-box}
.pd-main img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd-thumbs{position:relative;margin:12px 0 0;padding:0 26px}
.pd-thumbview{width:100%;overflow:hidden}
.pd-thumblist{display:flex;flex-wrap:nowrap;margin:0;padding:0;list-style:none;transition:margin-left .25s ease}
.pd-thumblist li{flex:0 0 78px;width:78px;height:64px;padding:0 3px;box-sizing:border-box;cursor:pointer}
.pd-thumblist li img{display:block;width:72px;height:62px;object-fit:contain;border:1px solid #ddd;background:#fff;padding:1px;box-sizing:border-box}
.pd-thumblist li.now img{border-color:#e7c70c}
.pd-nav{position:absolute;top:0;width:22px;height:64px;line-height:60px;text-align:center;font-size:16px;color:#fff;background:#d80d15;cursor:pointer;user-select:none}
.pd-nav.pd-prev{left:0}
.pd-nav.pd-next{right:0}
.pd-nav:hover{background:#b00b12}

/* 右：名称 / 型号 / 品牌 / 简介 / 参数 / 热线 / 按钮 */
.pd-info{flex:1 1 340px;min-width:0}
.pd-title{margin:0 0 12px;font-size:18px;line-height:28px;font-weight:600;color:#222}
.pd-meta{list-style:none;margin:0 0 12px;padding:0;font-size:14px;line-height:24px;color:#555}
.pd-meta li{display:flex;align-items:flex-start;gap:10px;padding:4px 0;border-bottom:1px dotted #ececec}
.pd-meta li:last-child{border-bottom:0}
.pd-meta em{flex:0 0 66px;font-style:normal;color:#999}
.pd-meta > li > span{flex:1 1 auto;min-width:0;word-break:break-word}
.pd-brand{max-height:26px;width:auto;vertical-align:middle}
/* 参数行：老站样式，普通文字行，不做滚动框 */
.pd-params{margin:0 0 6px;font-size:14px;line-height:26px;color:#555}
.pd-params p{margin:0}
.pd-params table{width:100%;border-collapse:collapse;font-size:13px}
.pd-params td,.pd-params th{border:1px solid #e6e6e6;padding:7px 10px;text-align:left}
.pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pd-btn{display:inline-block;height:36px;line-height:36px;min-width:122px;padding:0 16px;background:#fef200;color:#000;font-size:14px;font-weight:600;text-align:center;border-radius:7px;box-sizing:border-box}
.pd-btn:hover{background:#ffe94d;color:#000}
.pd-tel{margin:0 0 12px;font-size:13px;color:#777}
.pd-tel b{margin-left:4px;color:#f00;font-size:20px;font-weight:600}

/* 板块标题右侧的热线文字 */
.i_h3 .fr{float:right;font-size:12px;color:#999}

/* 正文板块：图片与表格在窄屏也不会撑破 */
.pro_read_c img{max-width:100%;height:auto}

/* 销售电子名片：等比缩放，居中 */
.sales-card{margin:0 0 14px;text-align:center}
.sales-card img{display:block;max-width:100%;height:auto;margin:0 auto}

/* 品牌名以 Logo 展示时 */
.brand-label{max-height:36px;width:auto;vertical-align:middle}

/* 断点 */
@media (max-width:1100px){
  .pg-water{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-pro{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  body.page-product .pd-top{flex-wrap:wrap;gap:14px}
  .pd-gallery{flex:1 1 100%;max-width:100%}
  .pd-main{height:auto;min-height:200px;padding:8px}
  .pd-main img{max-height:300px}
  .pd-info{flex:1 1 100%}
  .pg-water{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inner-banner img{min-height:80px;object-fit:cover}
}
@media (max-width:560px){
  .pg-water{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .brand-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pro-group .pg-head h2{font-size:17px}
  .pd-thumbs{padding:0 24px}
  .pd-thumblist li{flex:0 0 62px;width:62px;height:58px}
  .pd-thumblist li img{width:56px;height:56px}
  .pd-nav{height:58px;line-height:54px}
  .pd-btn{min-width:110px;padding:0 12px}
}

/* ── V1.3.5：左侧「推荐产品」+ 主图放大镜 ─────────────────────── */

/* 左侧推荐产品（结构沿用老站 .l_pro / .l_pro_m，样式已在 style.css，这里补齐细节） */
.l_pro_m dl{margin:0 0 12px}
.l_pro_m dl:last-child{margin-bottom:0}
.l_pro_m dl dd a{color:#333;text-decoration:none}
.l_pro_m dl dd a:hover{color:#d80d15}

/* 主图放大镜：取景框跟随鼠标，放大窗显示在主图右侧 */
.pd-gallery{position:relative}
.pd-main{position:relative;cursor:crosshair}
.pd-lens{position:absolute;display:none;background:rgba(0,0,0,.4);border:1px solid #999;cursor:crosshair;pointer-events:none;z-index:2;box-sizing:border-box}
.pd-zoom{position:absolute;left:334px;top:0;width:320px;height:320px;display:none;overflow:hidden;border:1px solid #ddd;background:#fff;z-index:6}
.pd-zoom img{position:absolute;left:0;top:0;max-width:none}

@media (max-width:900px){
  .pd-zoom{display:none !important}
  .pd-lens{display:none !important}
}