@charset "utf-8";
/* ==========================================================================
   南京江源环保设备有限公司 — 全站新版样式
   配色：藏青(Navy) + 机械青(Machinery Cyan)
   ========================================================================== */

:root{
  /* 藏青 */
  --navy-900:#061A2B;
  --navy-800:#0A2A42;
  --navy-700:#0F3A5A;
  --navy-600:#17496F;
  --navy-500:#20608F;
  /* 机械青 */
  --cyan-700:#046B7C;
  --cyan-600:#0291A6;
  --cyan-500:#06A6BC;
  --cyan-400:#35C0D2;
  --cyan-100:#DCEEF3;
  --cyan-50:#EEF8FA;
  /* 中性 */
  --line:#DFE8EF;
  --line-soft:#EDF3F7;
  --bg:#F1F5F8;
  --card:#FFFFFF;
  --text:#1E2C38;
  --text-2:#3D5164;
  --muted:#6C8098;
  --amber:#B45309;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 3px rgba(10,42,66,.07), 0 1px 2px rgba(10,42,66,.04);
  --shadow-md:0 4px 18px rgba(10,42,66,.09);
  --shadow-lg:0 12px 36px rgba(10,42,66,.14);
  --maxw:1280px;
}

*{ -webkit-box-sizing:border-box; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",Arial,sans-serif;
  font-size:15px;
  line-height:1.75;
}

a{ color:var(--navy-600); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--cyan-600); text-decoration:none; }
a:active,a:visited{ text-decoration:none; }

img{ border:0; }

ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ margin:0; font-weight:700; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }
.clearfix::after{ content:""; display:table; clear:both; }

/* ============================ 顶部通栏 ============================ */
.topbar{
  background:var(--navy-900);
  color:#A9C3D6;
  font-size:13px;
  line-height:36px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.topbar .tb-l{ letter-spacing:.4px; }
.topbar .tb-r{ display:flex; align-items:center; gap:18px; }
.topbar .tb-r span{ display:inline-flex; align-items:center; gap:6px; }
.topbar .tb-r b{ color:#EAF4FA; font-weight:600; letter-spacing:.4px; }
.topbar .tb-r .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan-400); box-shadow:0 0 0 3px rgba(53,192,210,.18); }

/* ============================ 页头 ============================ */
.sitehead{
  background:
    linear-gradient(180deg,#FFFFFF 0%,#F7FBFD 100%);
  border-bottom:1px solid var(--line);
}
.sitehead .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:14px; padding-bottom:14px;
}
.logo{ display:flex; align-items:center; gap:14px; flex:0 1 auto; min-width:0; }
.logo img{ display:block; height:64px; width:auto; max-width:100%; }

.head-tel{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:8px 18px 8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--navy-700) 0%,var(--navy-600) 55%,var(--cyan-700) 140%);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.head-tel .ic{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex:0 0 auto;
}
.head-tel .tx{ line-height:1.25; }
.head-tel .tx small{ display:block; font-size:11px; letter-spacing:1.5px; color:#9FD9E3; }
.head-tel .tx b{ display:block; font-size:20px; letter-spacing:.6px; font-family:Verdana,Arial,sans-serif; }

/* ============================ 主导航 ============================ */
.sitenav{
  background:linear-gradient(90deg,var(--navy-800) 0%,var(--navy-700) 52%,var(--navy-600) 100%);
  box-shadow:0 2px 10px rgba(6,26,43,.18);
  position:relative;
  z-index:20;
}
.sitenav .wrap{ display:flex; flex-wrap:wrap; align-items:stretch; }
.sitenav a{
  position:relative;
  display:block;
  padding:0 24px;
  line-height:50px;
  color:#E4EFF6;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  white-space:nowrap;
}
.sitenav a::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:0; height:3px;
  background:var(--cyan-400);
  transition:width .22s ease, left .22s ease;
}
.sitenav a:hover{
  color:#FFFFFF;
  background:rgba(255,255,255,.07);
}
.sitenav a:hover::after{ width:100%; left:0; }
.sitenav a.on{ color:#FFFFFF; background:rgba(6,166,188,.28); }
.sitenav a.on::after{ width:100%; left:0; background:var(--cyan-400); }
.sitenav a.hi{ color:#FFE08A; }
.sitenav a.hi:hover{ color:#FFF3CB; }

/* ============================ 幻灯横幅 ============================ */
.banner{
  position:relative;
  overflow:hidden;
  background:var(--navy-800);
  line-height:0;
  height:clamp(190px, 23.5vw, 320px);
}
.banner img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 44%; }
.banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(6,26,43,.94) 0%,rgba(10,42,66,.62) 22%,rgba(10,42,66,.16) 48%,rgba(6,166,188,.06) 72%,rgba(6,26,43,.30) 100%),
    linear-gradient(180deg,rgba(6,26,43,.55) 0%,rgba(6,26,43,0) 26%,rgba(6,26,43,0) 62%,rgba(6,26,43,.72) 100%);
  pointer-events:none;
  z-index:1;
}
.banner::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--cyan-400),var(--cyan-600) 42%,transparent 100%);
  z-index:3;
}
.banner .bar{ display:none; }
@media (max-width:860px){
  .banner{ height:clamp(150px, 26vw, 210px); }
}

/* ============================ 主体布局 ============================ */
.mainwrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 16px 46px;
  display:grid;
  grid-template-columns:262px minmax(0,1fr);
  gap:22px;
  align-items:start;
}

/* ============================ 侧栏 ============================ */
.sidebar{ min-width:0; }
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
  margin-bottom:20px;
}
.card-hd{
  position:relative;
  background:linear-gradient(90deg,var(--navy-700) 0%,var(--navy-600) 70%,var(--cyan-700) 165%);
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:1px;
  padding:12px 16px 12px 20px;
}
.card-hd::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:18px; border-radius:0 3px 3px 0;
  background:var(--cyan-400);
}
.card-bd{ padding:10px 8px 12px; }

/* 产品分类 */
.cat-list li a{
  display:block;
  padding:8px 12px 8px 14px;
  font-size:14px;
  color:var(--text-2);
  border-radius:var(--radius-sm);
  transition:all .16s ease;
}
.cat-list li.top > a{
  font-weight:700;
  font-size:14.5px;
  color:var(--navy-700);
  background:var(--cyan-50);
  margin:2px 0;
}
.cat-list li.sub > a{
  padding-left:26px;
  position:relative;
  color:var(--muted);
}
.cat-list li.sub > a::before{
  content:"";
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan-400);
  opacity:.55;
}
.cat-list li.grp > span{
  display:block;
  padding:8px 12px 8px 14px;
  margin:2px 0;
  font-weight:700;
  font-size:14.5px;
  color:var(--navy-700);
  background:var(--cyan-50);
  border-radius:var(--radius-sm);
}
.cat-list li.divider{ height:1px; background:var(--line-soft); margin:8px 10px; }
.cat-list li a:hover{
  background:var(--cyan-600);
  color:#fff;
  padding-left:18px;
}
.cat-list li.sub > a:hover{ color:#fff; }
.cat-list li.sub > a:hover::before{ background:#fff; opacity:1; }

/* 联系方式 */
.info-list{ padding:4px 6px 2px; }
.info-list li{
  font-size:13.5px;
  color:var(--text-2);
  padding:7px 10px;
  border-bottom:1px dashed var(--line-soft);
  line-height:1.65;
}
.info-list li:last-child{ border-bottom:0; }
.info-list li b{ color:var(--navy-700); }
.info-list li .tel{
  display:inline-block;
  font-family:Verdana,Arial,sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--cyan-700);
  letter-spacing:.5px;
}

/* 新闻中心 */
.news-list li a{
  display:block;
  padding:8px 10px 8px 16px;
  font-size:13.5px;
  color:var(--text-2);
  position:relative;
  line-height:1.6;
  border-bottom:1px dashed var(--line-soft);
}
.news-list li:last-child a{ border-bottom:0; }
.news-list li a::before{
  content:"";
  position:absolute; left:6px; top:16px;
  width:0; height:0;
  border-left:5px solid var(--cyan-400);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}
.news-list li a:hover{ background:var(--cyan-50); color:var(--cyan-700); }

/* ============================ 内容卡片 ============================ */
.content{ min-width:0; }
.page-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
}
.page-head{
  position:relative;
  background:linear-gradient(90deg,var(--navy-700) 0%,var(--navy-600) 58%,var(--cyan-700) 150%);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.8px;
  padding:15px 22px 15px 24px;
  display:flex; align-items:center; gap:10px;
}
.page-head::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--cyan-400),var(--cyan-600));
}
.page-head .crumb{ font-size:13px; font-weight:400; color:#BED9E8; }
.page-head .crumb a{ color:#CFE3EE; }
.page-head .crumb a:hover{ color:#fff; }

.article{
  padding:24px 28px 30px;
  font-size:15px;
  line-height:2;
  color:var(--text);
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.article p{ margin:0 0 14px; }
.article h1{
  font-size:23px;
  color:var(--navy-700);
  line-height:1.5;
  margin:0 0 20px;
  padding:0 0 14px 14px;
  border-left:5px solid var(--cyan-500);
  border-bottom:1px solid var(--line-soft);
}
.article h2{
  font-size:18px; color:var(--navy-700);
  margin:22px 0 10px; padding-left:12px;
  border-left:4px solid var(--cyan-400);
}
.article h3{ font-size:16px; color:var(--navy-600); margin:16px 0 8px; }
.article strong{ color:var(--navy-700); }
.article img{ max-width:100%; height:auto; border-radius:var(--radius-sm); }
.article img[align="right"]{ float:right; margin:0 0 16px 22px; }
.article img[align="left"]{ float:left; margin:0 22px 16px 0; }
.article table{ max-width:100%; }
.article table[border="1"]{
  border-collapse:collapse;
  width:100%;
  border:1px solid var(--line);
}
.article table[border="1"] td{
  border:1px solid var(--line);
  padding:6px;
}
.article td{ vertical-align:top; }
.article br{ line-height:2.05; }

/* 文章内联字号统一（原站 font size="+1"） */
.article font[size="+1"]{ font-size:17px; }

/* 原站红色强调改为机械青 */
.article font[color="#FF0000"],
.article font[color="#ff0000"]{ color:var(--cyan-700); }
.article font[color="#0000FF"],
.article font[color="#0000ff"]{ color:var(--navy-600); }
.article font[color="#666666"]{ color:var(--muted); }

/* 文章底部联系方式卡 */
.article table.contact-card{
  margin-top:26px;
  background:linear-gradient(135deg,var(--cyan-50) 0%,#F7FBFD 100%);
  border:1px solid var(--cyan-100);
  border-left:5px solid var(--cyan-500);
  border-radius:var(--radius-sm);
  padding:6px;
}
.article table.contact-card td{ padding:14px 16px; }
.article table.contact-card img{
  width:100%; max-width:275px; height:auto;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}
.article table.contact-card font[color="#FF0000"],
.article table.contact-card font[color="#ff0000"]{
  color:var(--navy-700); font-size:16px; letter-spacing:.5px;
}

/* ============================ 产品列表（product.asp 等） ============================ */
.pro-grid{ text-align:center; }
.pro-grid td{ padding:14px; vertical-align:top; }
.pro-grid img{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pro-grid a:hover img{
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
  border-color:var(--cyan-400);
}
.pro-grid td a{ font-weight:600; color:var(--navy-700); font-size:14.5px; }
.pro-grid td a:hover{ color:var(--cyan-600); }

/* ============================ 图文网格（产品细节图 + 图注） ============================ */
.img-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,340px));
  justify-content:center;
  gap:24px 26px;
  margin:24px 0 30px;
}
.img-grid figure{ margin:0; }
.img-grid .ph{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--shadow);
  aspect-ratio:4 / 3;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.img-grid .ph img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  transition:transform .45s ease;
}
.img-grid figure:hover .ph{ border-color:var(--cyan-400); box-shadow:var(--shadow-md); }
.img-grid figure:hover .ph img{ transform:scale(1.045); }
.img-grid figcaption{
  margin-top:11px; text-align:center;
  font-size:14px; line-height:1.65; font-weight:600;
  color:var(--text-2);
}
/* 跨两列的宽图 */
.img-grid .full{ grid-column:1 / -1; }
.img-grid .full .ph{ aspect-ratio:auto; max-width:540px; margin:0 auto; }
.img-grid .full .ph img{ height:auto; }
/* 保持原始比例（竖图/长图） */
.img-grid .natural .ph{ aspect-ratio:auto; }
.img-grid .natural .ph img{ height:auto; }
/* 单列居中（整幅竖图） */
.img-grid.one{ grid-template-columns:minmax(0,430px); justify-content:center; }
.img-grid.one .ph{ aspect-ratio:auto; }
.img-grid.one .ph img{ height:auto; }

@media (max-width:760px){
  .img-grid{ grid-template-columns:1fr; gap:20px; }
  .img-grid .ph{ aspect-ratio:auto; }
  .img-grid .ph img{ height:auto; }
  .img-grid .full .ph{ max-width:100%; }
}

/* ============================ 新闻列表 ============================ */
.news-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.news-box{ margin:-4px 0; }
.news-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px;
  border-bottom:1px dashed var(--line-soft);
  border-radius:var(--radius-sm);
  transition:background .18s ease;
}
.news-row:hover{ background:var(--cyan-50); }
.news-row .nr-t{
  font-size:15px; color:var(--text-2);
  position:relative; padding-left:16px;
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.news-row .nr-t::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:2px; background:var(--cyan-400);
}
.news-row:hover .nr-t{ color:var(--cyan-700); }
.news-row .date{ font-size:13px; color:var(--muted); font-family:Verdana,Arial,sans-serif; flex:0 0 auto; }
.news-row.is-text{ cursor:default; }
.news-row.is-text .nr-t::before{ background:#C6D4DF; }
.news-row.is-text:hover{ background:transparent; }
.news-row.is-text:hover .nr-t{ color:var(--text-2); }
@media (max-width:860px){ .news-grid{ grid-template-columns:1fr; } }

/* ============================ 页脚 ============================ */
.sitefoot{
  background:var(--navy-900);
  color:#93AFC5;
  margin-top:0;
  border-top:4px solid var(--cyan-600);
  font-size:13.5px;
}
.foot-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:26px;
  padding:34px 0 26px;
}
.foot-top .ft-t{
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.6px;
  margin:0 0 12px; position:relative; padding-bottom:10px;
}
.foot-top .ft-t::after{
  content:""; position:absolute; left:0; bottom:0;
  width:34px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-400),var(--cyan-700));
}
.foot-top p{ margin:0 0 8px; line-height:1.9; }
.foot-top .ft-tel{
  font-family:Verdana,Arial,sans-serif;
  font-size:22px; font-weight:700; color:#fff; letter-spacing:.6px;
}
.foot-top a{ color:#AFC9DC; }
.foot-top a:hover{ color:var(--cyan-400); }
.foot-top .ft-links{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.foot-bot{
  border-top:1px solid rgba(255,255,255,.09);
  padding:14px 0 20px;
  font-size:13px;
  color:#7E9AB1;
  line-height:1.9;
}
.foot-bot a{ color:#AFC9DC; }
.foot-bot a:hover{ color:var(--cyan-400); }
.foot-bot .ft-seo{
  display:flex; flex-wrap:wrap; gap:4px 12px;
  margin-top:8px;
}
.foot-bot .ft-seo a{ color:#8FAABF; }
.foot-bot .ft-seo a:hover{ color:var(--cyan-400); }

/* ============================ 友情链接条 ============================ */
.friendbar{
  max-width:var(--maxw);
  margin:0 auto 22px;
  padding:0 16px;
}
.friendbar .fb-in{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px 18px;
  font-size:13.5px;
  color:var(--muted);
}
.friendbar .fb-in a{ color:var(--text-2); }
.friendbar .fb-in a:hover{ color:var(--cyan-600); }

/* ============================ 响应式 ============================ */
@media (max-width:1080px){
  .mainwrap{ grid-template-columns:230px minmax(0,1fr); gap:16px; }
  .sitenav a{ padding:0 16px; font-size:15px; }
}
@media (max-width:860px){
  .mainwrap{ grid-template-columns:1fr; padding-top:16px; }
  .article{ padding:18px 16px 24px; font-size:15px; }
  .logo img{ height:50px; }
  .head-tel .tx b{ font-size:17px; }
  .foot-top{ grid-template-columns:1fr; gap:18px; padding:24px 0 16px; }
  .sitenav a{ padding:0 13px; line-height:44px; font-size:14px; }
  .article img[align="right"],
  .article img[align="left"]{ float:none; display:block; margin:14px auto; }
  .topbar{ font-size:12px; }
  .topbar .wrap{ justify-content:center; }
  .sitehead .wrap{ flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:520px){
  .banner::after{ background:linear-gradient(100deg,rgba(10,42,66,.9) 0%,rgba(15,58,90,.6) 60%,rgba(6,166,188,.2) 100%); }
  .article h1{ font-size:19px; }
}