@charset "utf-8";
/* CSS Document */
.crumbs-bar{
  background:#fff;
  /*border-bottom:1px solid var(--gray);*/border-top: 1px solid var(--gray);
	padding: 0.8rem 1.3rem 0rem 1.3rem;background-color: #F9F9F9;
}
.crumbs-inner{
  width: 100%;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:300;
 
}
.crumbs-inner a{transition:color .2s;color:var(--text-t);}
.crumbs-inner a:hover{color:var(--primary)}
.crumbs-inner svg{width:7px;height:11px;flex-shrink:0;color:var(--text-t)}
.crumbs-inner .cur{
  color:var(--text-t);
  max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ---------- Page intro ---------- */
.page-intro{
  padding: 0.8rem 1.3rem 0rem 1.3rem;
  position:relative;background-color: #F9F9F9;
}
.page-intro .kicker{
  display:inline-flex;align-items:center;gap:12px;
  text-transform:uppercase;
  color:var(--primary);font-weight:400;margin-bottom:20px;
}
.page-intro .kicker::before{
  content:"";width:34px;height:2px;background:var(--primary);display:block;
}
.page-intro h1{
  font-weight:400;color: var(--text-t);
  line-height:1.24;/*margin-bottom:18px;*/
}
.page-intro h1 em{font-style:normal;color:var(--primary)}
.page-intro p{
  color:var(--dark);max-width:680px;line-height:1.9;font-weight:400;
}
/* ---------- 产品主视觉 ---------- */
.pd-hero{
  /*margin-top:76px;*/
  background-color: #F9F9F9;
  /*border-bottom:1px solid #e8e8e6;*/
}
.pd-hero-a{margin-top: 0.8rem;}
.pd-hero-inner{
  /*padding: 0.8rem 1.3rem 0rem 1.3rem;*/
  display:grid;grid-template-columns:1fr 1fr;gap:56px;/*align-items:center;*/
}
.pd-hero .kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:3px;text-transform:uppercase;
  color:var(--primary);font-weight:500;margin-bottom:20px;
}
.pd-hero .kicker::before{
  content:"";width:30px;height:2px;background:var(--primary);display:block;
}
.pd-hero h1{
 font-weight:400;line-height:1.25; color:var(--text-t);
  margin-bottom:16px;
}
/*.pd-hero h1 em{font-style:normal;color:var(--primary)}*/
.pd-hero .model-line{
  color:var(--text-t);letter-spacing:.5px;margin-bottom:24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.pd-hero .model-line b{color:var(--dark);font-weight:600}
.pd-hero .model-line .sep{color:var(--gray)}
.pd-hero .points{
  list-style:none;margin-bottom:30px; display: inline-block;
}
.pd-hero .points li{
  position:relative;padding-left:24px;float:left; width: 34%;
  font-size:15.5px;color:var(--text-t);line-height:2.05;
}
.pd-hero .points li::before{
  content:"";position:absolute;left:2px;top:.68em;
  width:8px;height:8px;border-radius:2px;background:var(--primary);
  transform:rotate(45deg);
}
.pd-hero-btns{ clear: both; display:flex;gap:14px;flex-wrap:wrap;margin:0.25rem 0}
.btn-solid{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--primary);color:#fff;
  padding:14px 32px;border-radius:var(--radius);font-weight:400;
  transition:background .2s,transform .2s;
}
.btn-solid:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn-solid svg{width:15px;height:15px}
.btn-line{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid var(--text-t);color:var(--text-t);
  padding:13px 32px;border-radius:var(--radius);font-size:15px;
  transition:.2s;
}
.btn-line:hover{border-color:var(--primary);color:var(--primary)}
.pd-hero-img{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow); width: 90%;
}
.pd-hero-img img{width:100%;object-fit:cover}
.pd-hero-img .badge{
  position:absolute;top:16px;left:16px;
  background:rgba(50,50,47,.86);color:#fff;
  font-size:12px;letter-spacing:.8px;
  padding:6px 14px;border-radius:999px;backdrop-filter:blur(4px);
}
/* ---------- 通用区块 ---------- */
.sec{
  padding: 0.8rem 1.3rem 0rem 1.3rem;background-color: #F9F9F9;
}
.sec:last-of-type{padding-bottom:84px}
.sec-head{margin-bottom:38px}
.sec-head .kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--primary);font-weight:500;margin-bottom:14px;
}
.sec-head .kicker::before{
  content:"";width:26px;height:2px;background:var(--primary);display:block;
}
.sec-head h2{
  font-weight:400;letter-spacing:1.5px;line-height:1.3;
}
.sec-head p{
  font-size:14.5px;color:var(--gray);margin-top:12px;letter-spacing:.5px;
}
/* ---------- 产品优势 ---------- */
.adv-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.adv-card{
  background:#fff;border:1px solid #e8e8e6;border-radius:var(--radius);
  padding:32px 28px;position:relative;overflow:hidden;
  transition:transform .28s,box-shadow .28s,border-color .28s;
}
.adv-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),transparent 78%);
  opacity:0;transition:opacity .28s;
}
.adv-card:hover{
  transform:translateY(-5px);border-color:var(--primary);
  box-shadow:0 16px 38px rgba(50,50,47,.1);
}
.adv-card:hover::before{opacity:1}
.adv-card .a-icon{
  width:54px;height:54px;border-radius:13px;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.adv-card .a-icon svg{width:26px;height:26px}
.adv-card h3{font-size:17.5px;font-weight:700;letter-spacing:.5px;margin-bottom:10px}
.adv-card p{font-size:13.8px;color:var(--text);line-height:1.85}

/* ---------- 产品参数（键值属性表，金能现有详情页形式） ---------- */
.spec-wrap{
  background:#fff;border:1px solid #e8e8e6;
  border-radius:var(--radius);overflow:hidden;
}
.spec-intro{
  padding:30px 36px 26px;
  border-bottom:1px solid #e8e8e6;
  color:var(--text);line-height:1.95;
}
.spec-intro b{color:var(--ink);font-weight:600}
.attr-grid{
  display:grid;grid-template-columns:1fr 1fr;
}
.attr{
  display:flex;align-items:flex-start;gap:0;
  border-bottom:1px solid #e8e8e6;
  min-height:58px;
}
.attr:nth-child(odd){border-right:1px solid #e8e8e6}
.attr .k{
  flex-shrink:0;width:128px;
  background:#f7f7f6;
  color:var(--text);
  padding:17px 18px;
  display:flex;align-items:center;
  border-right:1px solid #e8e8e6;
}
.attr .v{
  flex:1;min-width:0;
  padding:17px 20px;
  color:var(--ink);line-height:1.7;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
}
.attr .v b{font-weight:600}
.attr .v .hl{
  color:var(--primary-dark);font-weight:600;
}
.attr.full{grid-column:1 / -1;border-right:none}
.spec-foot{
  padding:16px 36px;font-size:12.5px;color:var(--gray);line-height:1.8;
  background:var(--bg);
}
/* 颜色小色块 */
.swatch{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;
}
.swatch i{
  width:15px;height:15px;border-radius:4px;display:inline-block;
  border:1px solid rgba(0,0,0,.08);
}
.swatch i.c-black{background:#23211f}
.swatch i.c-red{background:#b3202c}
.swatch i.c-green{background:#1f7a4d}

/* ---------- 产品详情（详情图） ---------- */
.pd-detail{
  background:#fff;border:1px solid #e8e8e6;
  border-radius:var(--radius);overflow:hidden;
}
.pd-detail .pd-inner{
  max-width:1000px;margin:0 auto;/*padding:44px 36px 52px;*/
}
.pd-fig{margin-bottom:38px}
.pd-fig:last-child{margin-bottom:0}
.pd-fig h4{
  font-size:16.5px;font-weight:700;letter-spacing:.6px;
  margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.pd-fig h4 .no{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:var(--primary);color:#fff;
  font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.pd-fig img{
  width:100%;border-radius:10px;
  border:1px solid #e8e8e6;
}
.pd-fig figcaption{
  margin-top:12px;font-size:13px;color:var(--gray);
  letter-spacing:.4px;text-align:center;
}
.pd-fig p{
  font-size:14.5px;color:var(--ink-2);line-height:1.95;margin-bottom:16px;
}
/* 规格速览卡 */
.variant-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 4px;
}
.variant-card{
  border:1px solid #e8e8e6;border-radius:10px;
  padding:18px 20px;background:var(--bg);
}
.variant-card b{
  display:block;font-size:14.5px;font-weight:700;margin-bottom:6px;
  color:var(--ink);
}
.variant-card span{font-size:13px;color:var(--ink-2);line-height:1.8}

/* ---------- 产品详情两栏布局（左：详情图+案例，右：相关产品） ---------- */
.detail-layout{
  display:grid;grid-template-columns:1.35fr 0.65fr;gap:26px;align-items:start;
}
.detail-main{min-width:0}
.detail-side{
  position:sticky;top:150px;
  display:flex;flex-direction:column;gap:18px;
}

/* 右侧相关产品栏 */
.side-box{
  background:#fff;border:1px solid #e8e8e6;
  border-radius:var(--radius);overflow:hidden;
}
.side-head{
  padding:20px 22px 16px;
  font-weight:400;letter-spacing:.8px;
  display:flex;align-items:center;gap:11px;
  border-bottom:1px solid #e8e8e6;
}
.side-head::before{
  content:"";width:5px;height:20px;background:var(--primary);
  border-radius:3px;display:block;
}
.side-card{
  /*display:flex;gap:14px;align-items:center;*/
  padding:16px 22px;
  border-bottom:1px solid #e8e8e6;
  transition:background .2s;
}
/*.side-card:hover{background:var(--primary-dark)}*/
.side-card .s-img{
  width:100%;height:auto;flex-shrink:0;
  border-radius:9px;overflow:hidden;
  
}
.side-card .s-img img{width:100%;height:100%;object-fit:cover}
.side-card .s-body{flex:1;min-width:0}
.side-card h3{
  font-weight:400;line-height:1.45;
  margin-bottom:6px;transition:color .2s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side-card:hover h3{color:var(--primary-dark)}
.side-card .s-tip{
  font-size:12px;color:var(--primary);
  letter-spacing:.4px;
}
.side-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px;font-size:13.5px;color:var(--primary);font-weight:500;
  transition:background .2s;
}
/*.side-more:hover{background:var(--gray)}*/
.side-more svg{width:7px;height:12px;transition:transform .2s}
.side-more:hover svg{transform:translateX(4px)}

/* 右侧咨询卡 */
.side-cta{
  background:var(--dark);border-radius:var(--radius);
  padding:24px 22px;color:rgba(255,255,255,.7);
}
.side-cta h3{color:#fff;font-weight:400;margin-bottom:8px}
.side-cta p{line-height:1.8;margin-bottom:16px; color: rgba(255,255,255,.7)}
.side-cta a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;border-radius:999px;
  padding:12px;font-weight:400;transition:background .2s;
}
.side-cta a:hover{background:var(--primary-dark)}
.side-cta a svg{width:14px;height:14px}