/* ===========================================================
   SSZ 艾思瑞 —— 内页视觉重构
   目标：把 CMS 原生内页（banner + 橙色侧栏 + tab 内容）
   改造成参考站 cdxlhj.cn 的蓝白科技工业风
   =========================================================== */

/* ---------- 1. 主题变量补充 ---------- */
:root{
  --ssz-blue:#1e88e5;
  --ssz-blue-d:#166dba;
  --ssz-blue-l:#e8f2fd;
  --ssz-ink:#0f172a;
  --ssz-body:#475569;
  --ssz-mute:#64748b;
  --ssz-line:#e8edf3;
  --ssz-bg:#f7f9fc;
  --ssz-r:14px;
}

/* ---------- 2. 内页 Banner：参考站式大图 + 深色遮罩 ---------- */
body.ssz-inner .cases_banner,
body.ssz-inner .cases_banner,
body.ssz-inner .cases_banner{
  position:relative!important;
  min-height:300px!important;
  height:auto!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(120deg,#0f172a,#1e3a5f)!important;
}
body.ssz-inner .cases_banner>img,
body.ssz-inner .cases_banner>img,
body.ssz-inner .cases_banner>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.42!important;
  filter:saturate(.9);
}
body.ssz-inner .cases_banner::after,
body.ssz-inner .cases_banner::after,
body.ssz-inner .cases_banner::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(15,23,42,.35) 0%,rgba(15,23,42,.62) 100%)!important;
}

/* ---------- 3. 左侧栏：橙 → 蓝，并做成粘性卡片 ---------- */
body.ssz-inner .lg_nav,
body.ssz-inner .lg_nav{
  background:linear-gradient(170deg,#1e88e5,#166dba)!important;
  border-radius:var(--ssz-r)!important;
  box-shadow:0 12px 32px rgba(30,136,229,.22)!important;
  padding:10px 0!important;
  height:auto!important;
  max-height:none!important;
}
body.ssz-inner .lg_nav>div,
body.ssz-inner .lg_nav>div{
  color:#fff!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:1px;
  padding:14px 10px!important;
  border-bottom:1px solid rgba(255,255,255,.18);
  margin-bottom:6px;
}
body.ssz-inner .lg_nav li,
body.ssz-inner .lg_nav li{
  padding:9px 12px!important;
  border-radius:8px;
  transition:background .25s ease,transform .25s ease;
}
body.ssz-inner .lg_nav li:hover,
body.ssz-inner .lg_nav li:hover{
  background:rgba(255,255,255,.14)!important;
  transform:translateX(3px);
}
body.ssz-inner .lg_nav li a,
body.ssz-inner .lg_nav li a{
  color:rgba(255,255,255,.88)!important;
  font-size:14px!important;
}
body.ssz-inner .lg_nav li a:hover,
body.ssz-inner .lg_nav li a:hover{color:#fff!important}
body.ssz-inner .lg_nav ul.lg_nav,
body.ssz-inner .lg_nav ul.lg_nav{
  background:rgba(0,0,0,.14)!important;
  border-radius:8px;
  margin:2px 8px 6px!important;
  height:auto!important;
}
/* 选中态：原站为「白底 + 橙字」，重构后侧栏是蓝底，必须同步改成
   半透明浅蓝底 + 白字，否则 active 项会出现白底白字（文字不可见）。 */
body.ssz-inner .lg_nav>li.active,
body.ssz-inner .lg_nav>li.active:focus,
body.ssz-inner .lg_nav>li.active:hover,
body.ssz-inner .lg_nav>li:focus,
body.ssz-inner .lg_nav>li:hover{
  background:rgba(255,255,255,.18)!important;
}
body.ssz-inner .lg_nav>li.active>a,
body.ssz-inner .lg_nav>li.active>a:focus,
body.ssz-inner .lg_nav>li.active>a:hover,
body.ssz-inner .lg_nav>li>a{
  color:#fff!important;
  font-weight:600;
}
/* 嵌套子项（产品线 / 行业案例）保持白字，去掉原站白底 */
body.ssz-inner .lg_nav ul.lg_nav li a,
body.ssz-inner .lg_nav ul.lg_nav li a:hover{
  color:rgba(255,255,255,.92)!important;
}
body.ssz-inner .lg_nav ul.lg_nav li.active{
  background:rgba(255,255,255,.16)!important;
}
/* 侧栏条目文字不折行（如 "CREV 偏心旋转阀"），必要时收紧字距 */
body.ssz-inner .lg_nav li a,
body.ssz-inner .lg_nav ul.lg_nav li a{
  white-space:nowrap!important;
  letter-spacing:-.2px;
}
body.ssz-inner .lg_nav li,
body.ssz-inner .lg_nav ul.lg_nav li{
  padding-left:10px!important;
  padding-right:10px!important;
}
/* 小屏按钮组同步蓝化 */
body.ssz-inner .xs_nav .btn,
body.ssz-inner .xs_nav .btn{
  background:#1e88e5!important;
  border-color:#1e88e5!important;
  color:#fff!important;
}
body.ssz-inner .xs_nav .btn:hover,
body.ssz-inner .xs_nav .btn:hover{background:#166dba!important}

/* ---------- 4. 内容区卡片化 ---------- */
body.ssz-inner .tab-content,
body.ssz-inner .tab-content,
body.ssz-inner .tab-content{
  background:#fff!important;
}
body.ssz-inner .tab-pane .thumbnail,
body.ssz-inner .tab-pane .thumbnail,
body.ssz-inner .tab-pane .thumbnail{
  border:1px solid var(--ssz-line)!important;
  border-radius:var(--ssz-r)!important;
  overflow:hidden!important;
  box-shadow:0 4px 16px rgba(15,23,42,.05)!important;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  margin-bottom:22px!important;
}
body.ssz-inner .tab-pane .thumbnail:hover,
body.ssz-inner .tab-pane .thumbnail:hover,
body.ssz-inner .tab-pane .thumbnail:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(30,136,229,.16)!important;
  border-color:#cfe3fb!important;
}
body.ssz-inner .tab-pane .thumbnail img,
body.ssz-inner .tab-pane .thumbnail img,
body.ssz-inner .tab-pane .thumbnail img{
  transition:transform .45s ease;
}
body.ssz-inner .tab-pane .thumbnail:hover img,
body.ssz-inner .tab-pane .thumbnail:hover img,
body.ssz-inner .tab-pane .thumbnail:hover img{
  transform:scale(1.06);
}
body.ssz-inner .tab-pane .caption,
body.ssz-inner .tab-pane .caption,
body.ssz-inner .tab-pane .caption{
  padding:14px 12px 16px!important;
}
body.ssz-inner .tab-pane .substr,
body.ssz-inner .tab-pane .substr,
body.ssz-inner .tab-pane .substr{
  color:var(--ssz-ink)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:1.6!important;
  margin:0!important;
  text-align:left;
}
body.ssz-inner .tab-pane .substr.text-center,
body.ssz-inner .tab-pane .substr.text-center{
  text-align:center!important;
  color:var(--ssz-blue)!important;
  font-size:17px!important;
  font-weight:700!important;
  letter-spacing:.5px;
}

/* ---------- 5. 面包屑 ---------- */
body.ssz-inner .layui-breadcrumb,
body.ssz-inner .layui-breadcrumb,
body.ssz-inner .layui-breadcrumb{
  background:#fff!important;
  padding:14px 18px!important;
  border-radius:10px;
  border:1px solid var(--ssz-line);
  font-size:13.5px!important;
  color:var(--ssz-mute)!important;
  margin-bottom:22px!important;
}
body.ssz-inner .layui-breadcrumb a,
body.ssz-inner .layui-breadcrumb a,
body.ssz-inner .layui-breadcrumb a{
  color:var(--ssz-blue)!important;
}
body.ssz-inner .layui-breadcrumb a:hover,
body.ssz-inner .layui-breadcrumb a:hover,
body.ssz-inner .layui-breadcrumb a:hover{
  color:var(--ssz-blue-d)!important;
  text-decoration:underline;
}

/* ---------- 6. 详情页排版 ---------- */
body.ssz-inner .page-content,
body.ssz-inner .page-content,
body.ssz-inner .page-content{
  font-size:15px!important;
  line-height:2!important;
  color:var(--ssz-body)!important;
}
body.ssz-inner .page-content h1,
body.ssz-inner .page-content h2,
body.ssz-inner .page-content h3,
body.ssz-inner .page-content h1,
body.ssz-inner .page-content h2,
body.ssz-inner .page-content h3{
  color:var(--ssz-ink)!important;
  font-weight:700!important;
}
body.ssz-inner .page-content img,
body.ssz-inner .page-content img{
  max-width:100%!important;
  height:auto!important;
  border-radius:10px;
  box-shadow:0 6px 22px rgba(15,23,42,.08);
}

/* ---------- 7. 视频卡片 ---------- */
body.ssz-inner .tab-pane video{
  border-radius:10px;
  box-shadow:0 8px 26px rgba(15,23,42,.12);
}

/* ---------- 8. 悬浮联系条：橙 → 蓝 ---------- */
.buoy{
  background:rgba(30,136,229,.92)!important;
  color:#fff!important;
  border-radius:10px 10px 0 0;
  transition:background .25s ease,transform .25s ease;
}
.buoy:hover{background:#166dba!important;transform:translateX(-3px)}
.buoy a{color:#fff!important;font-weight:600}

/* ---------- 9. 响应式 ---------- */
@media(max-width:991px){
  body.ssz-inner .lg_nav,
  body.ssz-inner .lg_nav{border-radius:12px}
}

/* ===========================================================
   内页 Banner 标题层
   =========================================================== */
.ssz-banner-title{
  position:relative!important;
  z-index:2!important;
  text-align:center;
  padding:40px 20px;
  max-width:900px;
}
.ssz-banner-kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:2.5px;
  font-weight:700;
  color:#bfdbfe;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  padding:5px 14px;
  border-radius:100px;
  margin-bottom:16px;
}
.ssz-banner-h1{
  color:#fff!important;
  font-size:38px!important;
  font-weight:800!important;
  letter-spacing:2px;
  margin:0 0 12px!important;
  line-height:1.25!important;
  text-shadow:0 4px 20px rgba(0,0,0,.28);
}
.ssz-banner-sub{
  color:rgba(255,255,255,.88)!important;
  font-size:15.5px!important;
  margin:0!important;
  line-height:1.8!important;
}

/* ===========================================================
   产品线导航条（产品中心页）
   =========================================================== */
.ssz-linenav{
  background:linear-gradient(135deg,#f7fbff,#eef6ff)!important;
  border:1px solid #dbeafe;
  border-radius:16px;
  padding:30px 26px 26px;
  margin-bottom:26px;
}
.ssz-linenav-kicker{
  display:inline-block;
  font-size:11.5px;
  letter-spacing:2.2px;
  font-weight:800;
  color:var(--ssz-blue);
  margin-bottom:8px;
}
.ssz-linenav-title{
  font-size:24px!important;
  font-weight:800!important;
  color:var(--ssz-ink)!important;
  margin:0 0 8px!important;
  line-height:1.4!important;
}
.ssz-linenav-sub{
  font-size:14px!important;
  color:var(--ssz-mute)!important;
  margin:0 0 22px!important;
  line-height:1.85!important;
}
.ssz-linenav-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.ssz-linecard{
  display:block;
  background:#fff;
  border:1px solid var(--ssz-line);
  border-radius:12px;
  padding:18px 18px 16px;
  text-decoration:none!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.ssz-linecard:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(30,136,229,.14);
  border-color:#bfdbfe;
}
.ssz-linecard-name{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--ssz-ink);
  margin-bottom:5px;
}
.ssz-linecard-spec{
  display:block;
  font-size:12.5px;
  color:var(--ssz-mute);
  margin-bottom:10px;
}
.ssz-linecard-go{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--ssz-blue);
}
.ssz-linecard:hover .ssz-linecard-go{color:var(--ssz-blue-d)}

@media(max-width:991px){
  .ssz-linenav-grid{grid-template-columns:repeat(2,1fr)}
  .ssz-banner-h1{font-size:30px!important}
  .ssz-banner-sub{font-size:14px!important}
}
@media(max-width:767px){
  .ssz-linenav-grid{grid-template-columns:1fr}
  .ssz-linenav{padding:22px 18px}
  .ssz-linenav-title{font-size:20px!important}
  .ssz-banner-h1{font-size:24px!important}
}

/* ===========================================================
   10. 资讯视频页（contact_banner + 侧栏外层橙色块）
   =========================================================== */
body.ssz-inner .contact_banner{
  position:relative!important;
  min-height:300px!important;
  height:auto!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(120deg,#0f172a,#1e3a5f)!important;
}
body.ssz-inner .contact_banner>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.42!important;
  filter:saturate(.9);
}
body.ssz-inner .contact_banner::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(15,23,42,.35) 0%,rgba(15,23,42,.62) 100%)!important;
}
/* 侧栏外层容器原本是橙色底，改为透明让蓝渐变卡片完整显示 */
body.ssz-inner .bg-ee751b{
  background:transparent!important;
}