@charset "utf-8";
/* ==========================================================================
   浙江世弘自动化设备有限公司 — 官网样式
   ========================================================================== */

:root{
  --navy:#0c2c56;
  --navy-d:#071c38;
  --navy-l:#16407a;
  --red:#d8202a;
  --red-d:#b2151e;
  --blue:#1a5fa8;
  --gold:#c8961e;
  --gray:#f4f6f9;
  --gray-2:#e8ecf2;
  --line:#dfe4ec;
  --text:#2b3442;
  --text-2:#63708a;
  --white:#fff;
  --radius:4px;
  --wrap:1200px;
  --shadow:0 6px 24px rgba(12,44,86,.10);
  --shadow-lg:0 16px 48px rgba(12,44,86,.18);
  --t:.32s cubic-bezier(.4,.2,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  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.8;color:var(--text);background:var(--white);
  overflow-x:hidden;
  /* 禁止复制文字 */
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
img{border:0;vertical-align:middle;max-width:100%;height:auto;
  -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;
  -webkit-user-select:none;user-select:none;pointer-events:none}
a{color:inherit;text-decoration:none;transition:var(--t)}
a img{pointer-events:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-weight:700;line-height:1.35;color:var(--navy)}
input,textarea,select{font-family:inherit;font-size:14px;
  -webkit-user-select:text;user-select:text}
::selection{background:var(--navy);color:#fff}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.clear:after{content:"";display:block;clear:both}
.tc{text-align:center}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;padding:12px 34px;font-size:15px;border-radius:2px;
  background:var(--red);color:#fff;border:1px solid var(--red);cursor:pointer;text-align:center;
}
.btn:hover{background:var(--red-d);border-color:var(--red-d);color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(216,32,42,.32)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.line:hover{background:var(--navy);color:#fff}
.btn.sm{padding:8px 22px;font-size:13.5px}

/* ==========================================================================
   顶部
   ========================================================================== */
#topbar{background:var(--navy-d);color:#9fb2ce;font-size:12.5px;line-height:38px}
#topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
#topbar .tl span{margin-right:18px}
#topbar .tl i{color:var(--red);margin-right:5px;font-style:normal}
#topbar .tr a{margin-left:16px;color:#9fb2ce}
#topbar .tr a:hover{color:#fff}
@media(max-width:820px){#topbar .tl span:nth-child(2){display:none}}
@media(max-width:620px){#topbar{display:none}}

#header{
  position:sticky;top:0;z-index:900;background:#fff;
  box-shadow:0 2px 14px rgba(12,44,86,.09);
  transition:var(--t);
}
#header .wrap{display:flex;align-items:center;justify-content:space-between;height:86px;gap:20px}
#header.small .wrap{height:68px}
#logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
#logo img{height:46px;width:auto;pointer-events:auto}
#header.small #logo img{height:38px}
#logo .lt b{display:block;font-size:19px;color:var(--navy);letter-spacing:.5px;line-height:1.3}
#logo .lt span{display:block;font-size:10px;color:var(--text-2);letter-spacing:.4px;text-transform:uppercase}
@media(max-width:1100px){#logo .lt{display:none}}

#nav{display:flex;align-items:center;height:100%}
#nav>li{position:relative;height:100%;display:flex;align-items:center}
#nav>li>a{
  display:block;padding:0 19px;height:100%;line-height:86px;font-size:15.5px;color:var(--navy);
  font-weight:500;position:relative;white-space:nowrap;
}
#header.small #nav>li>a{line-height:68px}
#nav>li>a:after{
  content:"";position:absolute;left:50%;bottom:24px;width:0;height:2px;background:var(--red);
  transition:var(--t);transform:translateX(-50%);
}
#header.small #nav>li>a:after{bottom:16px}
#nav>li>a:hover,#nav>li.active>a{color:var(--red)}
#nav>li>a:hover:after,#nav>li.active>a:after{width:26px}

.subnav{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);
  background:#fff;min-width:230px;box-shadow:var(--shadow-lg);border-top:3px solid var(--red);
  opacity:0;visibility:hidden;transition:var(--t);padding:8px 0;border-radius:0 0 3px 3px;
}
#nav>li:hover .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.subnav li a{display:block;padding:9px 22px;font-size:14px;color:var(--text);border-left:2px solid transparent}
.subnav li a:hover{background:var(--gray);color:var(--red);border-left-color:var(--red);padding-left:26px}

#navbtn{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:0}
#navbtn span{display:block;width:24px;height:2px;background:var(--navy);margin:5px auto;transition:var(--t)}
#navbtn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navbtn.on span:nth-child(2){opacity:0}
#navbtn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1100px){
  #navbtn{display:block}
  #nav{
    position:fixed;top:0;right:-320px;width:300px;height:100vh;background:#fff;display:block;
    padding:80px 0 30px;overflow-y:auto;box-shadow:-6px 0 30px rgba(0,0,0,.15);transition:var(--t);z-index:950;
  }
  #nav.open{right:0}
  #nav>li{display:block;height:auto}
  #nav>li>a{line-height:1.6;padding:14px 26px;border-bottom:1px solid var(--line);height:auto}
  #nav>li>a:after{display:none}
  .subnav{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border-top:0;
    display:none;background:var(--gray);min-width:0;padding:0;
  }
  #nav>li.open .subnav{display:block}
  #nav>li:hover .subnav{transform:none}
  .subnav li a{padding:11px 40px;border-left:0}
  .subnav li a:hover{padding-left:44px}
}
#mask{position:fixed;inset:0;background:rgba(7,28,56,.55);z-index:940;opacity:0;visibility:hidden;transition:var(--t)}
#mask.on{opacity:1;visibility:visible}

/* ==========================================================================
   语言切换器（右上角，参照主流站点下拉样式）
   ========================================================================== */
.lang{position:relative;margin-left:20px;flex:0 0 auto;z-index:60}
.lang .cur{
  display:flex;align-items:center;gap:7px;padding:8px 13px 8px 11px;background:#fff;
  border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:13.5px;
  color:var(--navy);line-height:1;white-space:nowrap;transition:var(--t);
  -webkit-user-select:none;user-select:none
}
.lang .cur:hover,.lang.open .cur{border-color:var(--red);color:var(--red);box-shadow:0 4px 14px rgba(216,32,42,.14)}
.lang .cur .globe{width:16px;height:16px;flex:0 0 16px;display:block}
.lang .cur .globe path,.lang .cur .globe circle{stroke:currentColor}
.lang .cur b{font-weight:600}
.lang .cur .caret{
  width:0;height:0;margin-left:2px;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform var(--t);display:block
}
.lang.open .cur .caret{transform:rotate(180deg)}

.lang .list{
  position:absolute;right:0;top:calc(100% + 10px);min-width:186px;background:#fff;border-radius:6px;
  box-shadow:0 14px 40px rgba(12,44,86,.20);border:1px solid var(--line);padding:7px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--t);overflow:hidden
}
.lang.open .list{opacity:1;visibility:visible;transform:translateY(0)}
.lang .list:before{
  content:"";position:absolute;top:-6px;right:22px;width:10px;height:10px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)
}
.lang .list a{display:block;padding:10px 18px;font-size:14px;color:var(--text);line-height:1.35}
.lang .list a small{display:block;font-size:11.5px;color:var(--text-2);margin-top:2px}
.lang .list a:hover{background:var(--gray);color:var(--red)}
.lang .list a:hover small{color:var(--red)}
.lang .list a.on{color:var(--red);font-weight:700;background:#fdf5f5}
.lang .list a.on small{color:var(--red)}
.lang .list a.on:after{content:"✓";float:right;font-size:13px;margin-top:2px}
@media(max-width:620px){
  .lang{margin-left:8px}
  .lang .cur{padding:7px 9px}
  .lang .cur b{display:none}       /* 窄屏只留地球图标，省空间 */
  .lang .cur .caret{display:none}
  .lang .list{min-width:160px}
}

/* ==========================================================================
   首屏滚屏
   ========================================================================== */
#hero{position:relative;height:calc(100vh - 86px);min-height:480px;max-height:900px;overflow:hidden;background:var(--navy-d)}
#hero .slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
  background-size:cover;background-position:center;
  pointer-events:none;   /* 非当前海报不可点击：否则隐形海报的按钮会盖住可见海报的链接 */
}
#hero .slide.on{opacity:1;pointer-events:auto}
#hero .slide.on .cap{transform:translateY(0);opacity:1}
#hero .slide:before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,28,56,.88) 0%,rgba(7,28,56,.62) 45%,rgba(7,28,56,.28) 100%)}
#hero .cap{
  position:absolute;left:0;right:0;top:50%;transform:translateY(28px);opacity:0;
  transition:all .9s ease .35s;
}
#hero .cap .wrap{max-width:var(--wrap)}
#hero .cap .en{color:var(--red);font-size:14px;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;font-weight:600}
#hero .cap h2{font-size:52px;color:#fff;line-height:1.22;margin-bottom:20px;text-shadow:0 3px 22px rgba(0,0,0,.4);max-width:760px}
#hero .cap p{font-size:17px;color:rgba(255,255,255,.86);max-width:620px;margin-bottom:34px;line-height:1.9}
@media(max-width:900px){
  #hero .cap h2{font-size:32px}
  #hero .cap p{font-size:15px}
  #hero{height:auto;min-height:520px;padding:90px 0}
  #hero .slide{position:absolute}
}
@media(max-width:620px){#hero .cap h2{font-size:25px}#hero .cap p{display:none}}

/* 导航点：抬高层级，避免被下方 "SCROLL" 装饰元素遮挡（这正是"点不到中间一个"的原因） */
#hero .dots{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);display:flex;gap:12px;z-index:8}
#hero .dots b{
  width:38px;height:4px;background:rgba(255,255,255,.4);cursor:pointer;border-radius:2px;
  transform:scaleX(1);transform-origin:center;
  transition:transform var(--t),background var(--t)
}
/* 当前项用 scaleX 拉长，而不是改 width —— 改 width 会让整排圆点左右位移，鼠标要追着点 */
#hero .dots b:hover{background:rgba(255,255,255,.75)}
#hero .dots b.on{background:var(--red);transform:scaleX(1.5)}
#hero .arr{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.45);
  color:#fff;background:rgba(255,255,255,.06);cursor:pointer;z-index:8;font-size:20px;line-height:50px;text-align:center;
  border-radius:50%;transition:var(--t);backdrop-filter:blur(3px)
}
#hero .arr:hover{background:var(--red);border-color:var(--red)}
#hero .arr.prev{left:26px}
#hero .arr.next{right:26px}
@media(max-width:760px){#hero .arr{display:none}}
#hero .scroll{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:5;color:rgba(255,255,255,.7);
  font-size:11px;letter-spacing:2px;text-align:center;padding-bottom:4px;
  pointer-events:none   /* 纯装饰，绝不能吃掉点击 */
}
#hero .scroll i{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);margin:6px auto 0;
  animation:sc 1.8s infinite}
@keyframes sc{0%{opacity:0;transform:scaleY(.4)}50%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
@media(max-width:900px){#hero .scroll,#hero .dots{bottom:20px}}

/* ---------- 数字条 ---------- */
#stats{background:var(--navy);color:#fff;padding:0}
#stats .wrap{display:flex;flex-wrap:wrap}
#stats .it{flex:1;min-width:180px;text-align:center;padding:34px 10px;border-right:1px solid rgba(255,255,255,.1)}
#stats .it:last-child{border-right:0}
#stats .it b{display:block;font-size:40px;color:#fff;line-height:1.1;font-weight:700}
#stats .it b em{font-size:18px;font-style:normal;color:var(--red);margin-left:2px}
#stats .it span{font-size:13.5px;color:#a8bcd8;letter-spacing:1px}
@media(max-width:760px){#stats .it{flex:0 0 50%;border-bottom:1px solid rgba(255,255,255,.1)}}

/* ==========================================================================
   通用区块
   ========================================================================== */
.sec{padding:84px 0}
.sec.gray{background:var(--gray)}
.sec.dark{background:var(--navy-d);color:#c3d1e5}
.sec.dark h2,.sec.dark h3{color:#fff}
@media(max-width:760px){.sec{padding:52px 0}}

.head{margin-bottom:52px}
.head .en{color:var(--red);font-size:13px;letter-spacing:4px;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.head h2{font-size:34px;position:relative;display:inline-block;padding-bottom:18px}
.head h2:after{content:"";position:absolute;left:0;bottom:6px;width:52px;height:3px;background:var(--red)}
.head p{color:var(--text-2);margin-top:14px;max-width:760px;font-size:15px}
.head.tc h2:after{left:50%;transform:translateX(-50%)}
.head.tc p{margin-left:auto;margin-right:auto}
.sec.dark .head p{color:#9fb2ce}
@media(max-width:760px){.head h2{font-size:25px}.head{margin-bottom:34px}}

/* ---------- 关于 ---------- */
#about .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
#about .pic{position:relative}
#about .pic img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
#about .pic .badge{
  position:absolute;right:-16px;bottom:-16px;background:var(--red);color:#fff;padding:22px 26px;
  border-radius:var(--radius);box-shadow:0 12px 30px rgba(216,32,42,.35);text-align:center
}
#about .pic .badge b{display:block;font-size:34px;line-height:1}
#about .pic .badge span{font-size:12.5px;opacity:.9}
#about .txt h2{font-size:32px;margin-bottom:8px}
#about .txt .en{color:var(--red);font-size:12.5px;letter-spacing:3px;text-transform:uppercase;font-weight:600}
#about .txt p{color:var(--text-2);margin:18px 0;text-align:justify}
#about .pts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
#about .pts li{padding-left:26px;position:relative;font-size:14.5px;color:var(--text)}
#about .pts li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
@media(max-width:900px){
  #about .grid{grid-template-columns:1fr;gap:40px}
  #about .pic .badge{right:12px;bottom:-14px;padding:16px 20px}
  #about .pic .badge b{font-size:26px}
}

/* ---------- 产品 ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:var(--t);display:flex;flex-direction:column
}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.cat .ph{position:relative;padding-top:66%;overflow:hidden;background:var(--navy-d)}
.cat .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cat:hover .ph img{transform:scale(1.07)}
.cat .ph .no{
  position:absolute;left:0;top:0;background:var(--red);color:#fff;font-size:12px;padding:5px 12px;
  letter-spacing:1px;z-index:2
}
.cat .bd{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.cat .bd h3{font-size:19px;margin-bottom:6px}
.cat .bd .en{font-size:11.5px;color:var(--text-2);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:12px}
.cat .bd p{font-size:13.8px;color:var(--text-2);flex:1;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat .bd .more{font-size:13.5px;color:var(--red);font-weight:600}
.cat .bd .more:after{content:" →";transition:var(--t)}
.cat:hover .bd .more:after{margin-left:5px}
@media(max-width:980px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cats{grid-template-columns:1fr;gap:18px}}

/* ---------- 应用行业 ---------- */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.app{
  position:relative;padding-top:60%;overflow:hidden;border-radius:var(--radius);cursor:pointer;background:var(--navy-d)
}
.app img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;opacity:.92}
.app:hover img{transform:scale(1.08)}
.app .ov{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(7,28,56,.9));z-index:2}
.app .tx{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:3;color:#fff}
.app .tx b{display:block;font-size:18px;margin-bottom:4px}
.app .tx span{font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.5px}
@media(max-width:900px){.apps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.apps{grid-template-columns:1fr}}

/* ---------- 优势 ---------- */
.adv{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.adv .it{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 24px;text-align:center;transition:var(--t)}
.adv .it:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.adv .it .ic{
  width:64px;height:64px;line-height:64px;margin:0 auto 18px;border-radius:50%;background:var(--gray);
  font-size:26px;color:var(--red);font-weight:700
}
.adv .it:hover .ic{background:var(--red);color:#fff}
.adv .it h3{font-size:17px;margin-bottom:10px}
.adv .it p{font-size:13.5px;color:var(--text-2)}
@media(max-width:980px){.adv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.adv{grid-template-columns:1fr}}

/* ---------- 案例 ---------- */
.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.case{position:relative;padding-top:78%;overflow:hidden;border-radius:var(--radius);background:var(--navy-d)}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.case:hover img{transform:scale(1.09)}
.case .ov{position:absolute;inset:0;background:rgba(7,28,56,.45);opacity:0;transition:var(--t);z-index:2}
.case:hover .ov{opacity:1}
.case .tx{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transform:translateY(10px);transition:var(--t);font-size:14.5px;text-align:center;padding:14px}
.case:hover .tx{opacity:1;transform:translateY(0)}
@media(max-width:900px){.cases{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.cases{grid-template-columns:repeat(2,1fr)}}

/* ---------- 新闻 ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.nw{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:var(--t)}
.nw:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.nw .ph{padding-top:58%;overflow:hidden;position:relative;background:var(--navy-d)}
.nw .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nw:hover .ph img{transform:scale(1.06)}
.nw .bd{padding:22px}
.nw .bd time{font-size:12.5px;color:var(--text-2)}
.nw .bd h3{font-size:17px;margin:8px 0 10px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw .bd p{font-size:13.5px;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.news{grid-template-columns:1fr}}

/* ---------- 联系 ---------- */
#contact .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:50px}
#contact .info li{display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
#contact .info li .ic{
  width:40px;height:40px;flex:0 0 40px;line-height:40px;text-align:center;border-radius:50%;
  background:rgba(216,32,42,.16);color:var(--red);font-size:16px;font-weight:700
}
#contact .info li b{color:#fff;display:block;font-size:15px}
#contact .info li span{color:#9fb2ce;font-size:13.8px;word-break:break-all}
#contact .qr{display:flex;gap:26px;margin-top:26px}
#contact .qr div{text-align:center;color:#9fb2ce;font-size:12.5px}
#contact .qr img{width:118px;height:118px;object-fit:cover;border-radius:4px;background:#fff;padding:5px}
#contact form{background:#fff;border-radius:var(--radius);padding:30px}
#contact form h3{font-size:20px;margin-bottom:6px}
#contact form .sub{font-size:13px;color:var(--text-2);margin-bottom:20px}
#contact .fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#contact .fg{margin-bottom:14px}
#contact .fg.wide{grid-column:1/-1}
#contact input,#contact textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:#fbfcfe;
  transition:var(--t);color:var(--text);outline:none
}
#contact input:focus,#contact textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(26,95,168,.10)}
#contact textarea{height:112px;resize:vertical}
#contact .tip{font-size:12.5px;color:var(--text-2);margin-top:12px}
@media(max-width:900px){#contact .grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){#contact .fr{grid-template-columns:1fr}}

/* ==========================================================================
   页脚
   ========================================================================== */
#footer{background:#061a33;color:#8fa3bd;font-size:13.5px;padding:58px 0 0}
#footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:40px}
#footer h4{color:#fff;font-size:16px;margin-bottom:20px;position:relative;padding-bottom:12px}
#footer h4:after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--red)}
#footer .fl img{height:44px;margin-bottom:16px}
#footer p{line-height:1.9}
#footer li{margin-bottom:10px}
#footer li a:hover{color:#fff;padding-left:5px}
#footer .fli{display:flex;gap:10px;margin-bottom:12px}
#footer .fli i{color:var(--red);font-style:normal;flex:0 0 16px}
#footer .bt{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.8px;color:#6f84a1}
#footer .bt a:hover{color:#fff}
/* 备案号 */
#footer .bt .icp a{color:#9fb2ce;border-bottom:1px dotted rgba(159,178,206,.5)}
#footer .bt .icp a:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:760px){
  #footer .bt{flex-direction:column;gap:6px;text-align:center}
  #footer .bt .icp{order:-1}
}
@media(max-width:900px){#footer .cols{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:560px){#footer .cols{grid-template-columns:1fr}}

/* ==========================================================================
   内页
   ========================================================================== */
#banner{
  position:relative;padding:96px 0;background:var(--navy-d) center/cover no-repeat;text-align:center
}
#banner:before{content:"";position:absolute;inset:0;background:rgba(7,28,56,.80)}
#banner .wrap{position:relative;z-index:2}
#banner h1{color:#fff;font-size:38px;margin-bottom:12px}
#banner p{color:rgba(255,255,255,.72);font-size:14.5px;letter-spacing:1px}
@media(max-width:760px){#banner{padding:56px 0}#banner h1{font-size:25px}}

#crumb{background:var(--gray);border-bottom:1px solid var(--line);font-size:13.5px;line-height:50px;color:var(--text-2)}
#crumb a:hover{color:var(--red)}
#crumb span{margin:0 8px;color:#b9c3d3}

.side{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
.side .sd{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:sticky;top:106px}
.side .sd .st{background:var(--navy);color:#fff;padding:18px 22px;font-size:17px;font-weight:700}
.side .sd .st span{display:block;font-size:10.5px;color:#9fb2ce;letter-spacing:2px;font-weight:400;text-transform:uppercase}
.side .sd li a{display:block;padding:13px 22px;border-bottom:1px solid var(--line);font-size:14.2px;color:var(--text)}
.side .sd li a:hover{background:var(--gray);color:var(--red);padding-left:27px}
.side .sd li.on a{background:var(--red);color:#fff;border-color:var(--red)}
.side .sd .ct{padding:20px;background:var(--gray);text-align:center}
.side .sd .ct b{display:block;color:var(--navy);font-size:15px}
.side .sd .ct strong{display:block;color:var(--red);font-size:19px;margin:6px 0 12px}
@media(max-width:900px){.side{grid-template-columns:1fr;gap:26px}.side .sd{position:static}.side .sd ul{display:none}}

.pd h2{font-size:26px;margin:0 0 6px}
.pd .en{font-size:12.5px;color:var(--text-2);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}
.pd h3{font-size:19px;margin:38px 0 16px;padding-left:14px;border-left:4px solid var(--red);line-height:1.2}
.pd p{color:var(--text-2);margin-bottom:14px;text-align:justify}
.pd .mainpic img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.gal a{display:block;position:relative;padding-top:72%;overflow:hidden;border-radius:var(--radius);background:var(--navy-d)}
.gal a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal a:hover img{transform:scale(1.07)}
@media(max-width:620px){.gal{grid-template-columns:repeat(2,1fr)}}

.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.tbl th,.tbl td{border:1px solid var(--line);padding:12px 16px;text-align:left}
.tbl th{background:var(--navy);color:#fff;font-weight:600;white-space:nowrap}
.tbl tr:nth-child(even) td{background:#fafbfd}

.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.feat li{background:var(--gray);border-left:3px solid var(--red);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:14px;color:var(--text)}
.feat li b{color:var(--navy)}
@media(max-width:620px){.feat{grid-template-columns:1fr}}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.tags span{background:var(--gray);border:1px solid var(--line);padding:7px 16px;border-radius:40px;font-size:13.5px;color:var(--text-2)}
.tags span:hover{border-color:var(--red);color:var(--red)}

/* 产品筛选 */
.filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.filter b{padding:9px 22px;border:1px solid var(--line);border-radius:40px;font-size:14px;font-weight:400;
  cursor:pointer;color:var(--text-2);transition:var(--t);background:#fff}
.filter b:hover{border-color:var(--red);color:var(--red)}
.filter b.on{background:var(--red);border-color:var(--red);color:#fff}

/* 新闻列表 */
.nlist li{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center}
.nlist li:hover{background:#fafbfd}
.nlist .d{flex:0 0 92px;text-align:center;border-right:1px solid var(--line);padding-right:20px}
.nlist .d b{display:block;font-size:30px;color:var(--navy);line-height:1}
.nlist .d span{font-size:12.5px;color:var(--text-2)}
.nlist .c{flex:1}
.nlist .c h3{font-size:17.5px;margin-bottom:6px}
.nlist .c h3:hover{color:var(--red)}
.nlist .c p{font-size:13.8px;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:620px){.nlist li{gap:16px}.nlist .d{flex:0 0 66px;padding-right:12px}.nlist .d b{font-size:22px}}

/* 分页 */
.pager{text-align:center;margin-top:40px}
.pager a,.pager span{display:inline-block;min-width:38px;height:38px;line-height:36px;padding:0 12px;
  border:1px solid var(--line);margin:0 4px;border-radius:2px;font-size:14px;color:var(--text-2)}
.pager a:hover,.pager .cur{background:var(--red);border-color:var(--red);color:#fff}

/* 友情链接 / 资质 */
.honor{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.honor img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
@media(max-width:760px){.honor{grid-template-columns:repeat(2,1fr)}}

/* 浮动联系 */
#float{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:800;background:#fff;
  box-shadow:-4px 0 20px rgba(12,44,86,.14);border-radius:6px 0 0 6px;overflow:hidden
}
#float a,#float b{display:block;width:60px;padding:14px 0;text-align:center;font-size:11px;color:var(--text-2);
  border-bottom:1px solid var(--line);font-weight:400;cursor:pointer}
#float a:hover,#float b:hover{background:var(--red);color:#fff}
#float .ic{display:block;font-size:19px;margin-bottom:3px;font-weight:700}
#float .qq{background:var(--red);color:#fff;border:0}
#float .qq:hover{background:var(--red-d)}
#float #gotop{display:none}
@media(max-width:1100px){#float{display:none}}

/* 返回顶部 */
#totop{
  position:fixed;right:26px;bottom:26px;width:46px;height:46px;line-height:46px;text-align:center;
  background:var(--navy);color:#fff;border-radius:50%;z-index:700;opacity:0;visibility:hidden;transition:var(--t);
  box-shadow:var(--shadow);cursor:pointer
}
#totop.on{opacity:1;visibility:visible}
#totop:hover{background:var(--red)}

/* 动画 */
.fade{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

/* 提示条（禁止复制说明） */
#warn{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:rgba(7,28,56,.94);
  color:#fff;font-size:13.5px;padding:11px 24px;border-radius:40px;z-index:1200;opacity:0;visibility:hidden;
  transition:var(--t);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis
}
#warn.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}