@charset "utf-8";
/* ==========================================================================
   浙江瑞森厨房设备有限公司 —— 共用基础样式
   色板取自客户 logo：蓝 #103080 + 红 #e81810；红为主色（强调/按钮），蓝为辅色（结构/装饰）
   断点 6 档：1600 / 1400 / 1200 / 992 / 768 / 500
   ========================================================================== */

/* ---------- 1 基础 ---------- */
:root{
  /* 色板取自客户 logo：蓝 #103080 + 红 #e81810 */
  --red:#d81b12;          /* 主色（logo 红，标题/强调/悬停） */
  --red-btn:#e81810;      /* 按钮底色（logo 红原色） */
  --red-hover:#c9140d;    /* 按钮悬停 */
  --blue:#103080;         /* 辅色（logo 蓝，版块英文小标/装饰线/列表点） */
  --blue-on-dark:#6f9dff; /* 深色底上的亮蓝（保证深底对比度） */
  --navy:#0d1c3d;         /* 深蓝面（页脚/移动头部/内页 banner 底色） */
  --dark:#0d1c3d;         /* 页脚深色 */
  --dark2:#0d1c3d;        /* 移动端头部 */
  --ink:#0e1013;          /* 首屏底色 */
  --gray:#999999;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;
  font:400 16px/1.6 "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:#333;background:#fff;
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,ol,li,figure,form{margin:0}
ul,ol{list-style:none;padding:0}
img{border:0;vertical-align:middle;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
i,em{font-style:normal}
table{border-collapse:collapse}

.w-con{width:1520px;margin:0 auto}
.w-in{width:1200px;margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 2 通用按钮 ---------- */
.btn{
  display:inline-block;width:200px;font-size:16px;line-height:54px;
  border-radius:28px;text-align:center;color:#fff;background:var(--red-btn);
  border:1px solid transparent;transition:background .3s,color .3s,border-color .3s;
}
.btn-fill:hover{background:var(--red-hover)}
.btn-line{background:none;border-color:var(--red-btn);color:var(--red-btn);margin-left:1.4vw}
.btn-line:hover{background:var(--red-btn);color:#fff}

/* ---------- 3 版块标题（左装饰水印 + 中文大标 + 英文斜体小标） ---------- */
.sec-title{padding-top:52px;background-repeat:no-repeat;background-position:left center}
.sec-title h2{color:var(--red);font:600 44px/66px "Microsoft YaHei";padding-left:80px}
.sec-title h3{
  color:#d3d3d3;font:600 italic 30px/40px "Microsoft YaHei";
  text-transform:uppercase;padding-left:30px;
}
.sec-title h3 i{color:var(--blue)}
.deco-p{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 144'%3E%3Ctext x='2' y='120' font-family='Arial,Helvetica,sans-serif' font-size='150' font-weight='700' fill='none' stroke='%23e2e2e2' stroke-width='2'%3EP%3C/text%3E%3C/svg%3E")}
.deco-s{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 116'%3E%3Ctext x='2' y='96' font-family='Arial,Helvetica,sans-serif' font-size='120' font-weight='700' fill='none' stroke='%23dedede' stroke-width='2'%3ES%3C/text%3E%3C/svg%3E")}
.deco-n{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136 144'%3E%3Ctext x='2' y='120' font-family='Arial,Helvetica,sans-serif' font-size='150' font-weight='700' fill='none' stroke='%23dedede' stroke-width='2'%3EN%3C/text%3E%3C/svg%3E")}

/* ==========================================================================
   4 PC 顶部导航
   ========================================================================== */
.hd{
  position:fixed;left:0;top:0;width:100%;z-index:99;
  padding:10px 0;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.hd.is-stuck{background:rgba(13,28,61,.95);border-bottom-color:rgba(255,255,255,.12)}
.hd-in{display:flex;align-items:center;justify-content:space-between}
.hd-logo{display:flex;align-items:center;gap:12px}
.hd-logo img{display:block;height:52px;width:auto;padding:4px;background:#fff;border-radius:9px}
.hd-logo-tx{min-width:0}
.hd-logo-tx b{display:block;color:#fff;font:700 19px/1.3 "Microsoft YaHei";letter-spacing:.02em;white-space:nowrap}
.hd-logo-tx i{display:block;color:rgba(255,255,255,.55);font:400 9px/1.5 Arial,sans-serif;letter-spacing:.05em;white-space:nowrap}
.hd-nav{flex:1 1 auto;min-width:0;margin-left:3.4vw}
.hd-menu{display:flex;align-items:center;justify-content:space-between}
.hd-menu>li{position:relative}
.hd-menu>li>a{position:relative;z-index:1;display:block;padding:0 15px;font-size:17px;color:#fff;line-height:78px;white-space:nowrap;border-radius:8px 8px 0 0;transition:background .2s ease,color .2s ease}
.hd-menu>li>a.on{color:#ff8177}
.cr{
  display:inline-block;width:0;height:0;margin-left:5px;vertical-align:2px;
  border:4px solid transparent;border-top-color:rgba(255,255,255,.75);
}
/* 二级菜单
   第 14 轮：把 top:calc(100%+6px) 的 6px「hover 死区」去掉（鼠标穿缝隙时丢 :hover）。
   第 15 轮（客户复现仍未修好）：改用 JS 驱动开合 + 与主菜单拼成同一块白色。
   原因：纯 CSS :hover 依赖「指针始终落在 li 的几何范围内」，Chrome 在缩放/亚像素布局下
   会出现 1px 级缝隙，指针穿过即丢 :hover → 下拉立刻淡出，「想点时点不到」。
   现在的做法：
     ① 主菜单项 hover（= 加 .open）变白底红字，白卡紧贴其下沿，视觉与命中区都是连成一体的；
     ② 开合由 JS 的 mouseenter/mouseleave 控制，mouseleave 后延迟 260ms 才收起（宽限期），
        期间下拉保持完全不透明、可点击，鼠标快一点也点得到；
     ③ 收起动画里白卡只做 -6px → 0 的上浮（初始位置更高，藏在主菜单项后面），
        任何时刻都不会在主菜单与白卡之间拉开空隙。
   注意：这里不能再写 :hover 版本，否则 :hover 一旦失效会绕过 JS 的宽限期直接把下拉淡出。 */
.hd-sub{
  position:absolute;left:50%;top:100%;min-width:100%;z-index:2;
  padding:0 0 10px;background:#fff;border-radius:0 0 8px 8px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.hd-menu>li.open>a{background:#fff;color:var(--red);z-index:3}
.hd-menu>li.open>a .cr{border-top-color:var(--red)}
.hd-menu>li.open .hd-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hd-sub a{position:relative;display:block;padding:.55em 1.5em;font-size:14px;color:#333;line-height:1.5;white-space:nowrap}
.hd-sub a:hover{background:#f2f3f4;color:var(--red)}
/* 搜索 + 电话 */
.hd-last{display:flex;align-items:center;gap:16px}
.hd-so{width:22px;height:22px;padding:0;line-height:0;flex:0 0 auto}
.hd-so img,.hd-so svg{display:block;width:22px;height:22px}
.hd-menu>li>a.hd-tel{font:400 clamp(15px,1.05vw,19px)/1.2 Arial,sans-serif;letter-spacing:.02em}
.hd-ss{
  position:absolute;right:0;top:calc(100% + 6px);z-index:6;display:none;
  background:#fff;padding:10px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14);
  gap:8px;
}
.hd-ss.on{display:flex}
.hd-ss input{
  width:180px;height:36px;padding:0 12px;font-size:14px;
  border:1px solid #ddd;border-radius:4px;outline:none;background:#fff;color:#333;
}
.hd-ss input:focus{border-color:var(--red)}
.hd-ss button{
  height:36px;padding:0 16px;font-size:14px;color:#fff;
  background:var(--red);border-radius:4px;
}

/* ==========================================================================
   5 移动端头部 + 抽屉
   ========================================================================== */
.mhd{
  display:none;position:fixed;left:0;right:0;top:0;z-index:100;
  height:60px;background:var(--dark2);
}
.mhd-burger{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:3;
  width:28px;height:20px;padding:0;
}
.mhd-burger span,.mhd-burger::before,.mhd-burger::after{
  content:"";position:absolute;left:0;width:100%;height:2px;background:#fff;
  transition:transform .35s,opacity .35s,top .35s,bottom .35s;
}
.mhd-burger::before{top:0}
.mhd-burger span{top:9px}
.mhd-burger::after{bottom:0}
.mhd-burger.on span{opacity:0}
.mhd-burger.on::before{top:9px;transform:rotate(45deg)}
.mhd-burger.on::after{bottom:9px;transform:rotate(-45deg)}
.mhd-logo{position:absolute;left:56px;right:56px;top:50%;transform:translateY(-50%);text-align:center;z-index:1;pointer-events:none}
.mhd-logo img{display:inline-block;height:32px;width:auto;padding:2px;background:#fff;border-radius:6px;pointer-events:auto}
.mhd-tel{position:absolute;right:16px;top:50%;transform:translateY(-50%);line-height:0;z-index:2}
.mhd-tel svg{display:block;width:21px;height:21px}

.mnav{
  position:fixed;left:0;top:0;bottom:0;width:286px;max-width:84vw;z-index:120;
  background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-100%);transition:transform .35s;
}
.mnav.on{transform:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}
.mnav-top .mnav-logo{display:flex;align-items:center;gap:8px;min-width:0}
.mnav-top .mnav-logo img{display:block;width:28px;height:28px;flex:0 0 auto;padding:1px;background:#fff;border-radius:5px}
.mnav-top .mnav-logo b{font:700 13px/1.35 "Microsoft YaHei";color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnav-close{position:relative;width:22px;height:22px;padding:0}
.mnav-close::before,.mnav-close::after{
  content:"";position:absolute;left:0;top:10px;width:100%;height:2px;background:#666;
}
.mnav-close::before{transform:rotate(45deg)}
.mnav-close::after{transform:rotate(-45deg)}
.mnav-list>li{border-bottom:1px solid #f0f0f0;position:relative}
.mnav-list>li>a{display:block;padding:14px 16px;font-size:15px;color:#333}
.mnav-list>li.has-sub>i{
  position:absolute;right:16px;top:14px;width:26px;height:26px;cursor:pointer;
}
.mnav-list>li.has-sub>i::before,.mnav-list>li.has-sub>i::after{
  content:"";position:absolute;top:50%;background:#999;
}
.mnav-list>li.has-sub>i::before{left:7px;width:12px;height:1px;margin-top:-1px}
.mnav-list>li.has-sub>i::after{left:12.5px;width:1px;height:12px;margin-top:-6px;transition:transform .3s}
.mnav-list>li.has-sub.on>i::after{transform:scaleY(0)}
.mnav-list>li>ul{display:none;background:#fafafa;padding:4px 0}
.mnav-list>li.on>ul{display:block}
.mnav-list>li>ul a{display:block;padding:10px 16px 10px 30px;font-size:14px;color:#666}
.mmask{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:110;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.mmask.on{opacity:1;visibility:visible}

/* ==========================================================================
   6 首屏：满屏大图 + 文字（2 组轮播）
   前层为原生比例的清晰大图，后层为同图放大模糊的氛围底 —— 既有满屏观感，
   又不必把 1920×400 的素材放大到失真。文字叠在清晰大图上，内容见 sitedata.py
   ========================================================================== */
.sec{position:relative;overflow-x:clip}
.sec-hero{
  min-height:clamp(672px,86.4vh,912px);background:var(--ink);color:#fff;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 0 34px;
}
/* 满屏模糊氛围层 */
.hero-bgs{position:absolute;inset:0;z-index:0}
.hero-bg{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-bg.on{opacity:1}
.hero-bg img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:blur(26px) brightness(.60) saturate(.96);transform:scale(1.14);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(118% 92% at 50% 42%,rgba(14,16,19,.12),rgba(14,16,19,.62) 84%);
}
/* 清晰大图 + 叠字 */
/* 清晰图带从 y=0 起（顶部透明导航直接叠在图上），高度对齐内页 .pg-bn 的 400px，
   并按 1920×400 的素材比例 20.8vw 等比跟随，避免把横幅拉伸到发虚。 */
.hero-slides{position:relative;z-index:2;flex:1 1 auto;min-height:clamp(380px,46vh,560px)}
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 1s ease}
.hero-slide.on{opacity:1;pointer-events:auto}
/* 无障碍：用户系统开启「减少动态效果」时不播放淡入动画，但轮播仍照常切换（瞬时换图），
   避免首屏永远停在第一组而让用户以为「没有切换」。 */
@media (prefers-reduced-motion: reduce){
  .hero-slide,.hero-bg{transition:none}
}
.hero-shot{position:relative;height:100%;overflow:hidden;background:#191c1f}
.hero-shot img{display:block;width:100%;height:100%;object-fit:cover}
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,12,14,.70),rgba(10,12,14,0) 152px),
    linear-gradient(90deg,rgba(10,12,14,.90),rgba(10,12,14,.66) 34%,rgba(10,12,14,.14) 68%,rgba(10,12,14,.34));
}
.hero-tx{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding-top:104px}
/* 注意：这里必须保留 .w-con 自己的宽度与 margin:0 auto。
   写成 flex:1 1 auto 会让容器被拉伸到整个视口宽，auto 外边距失去余量，
   文字直接贴到视口左边缘（与其它版块的居中栅格不一致）。 */
.hero-tx .w-con{flex:0 0 auto;min-width:0}
.hero-en{
  font:400 13px/1.4 Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;
  color:#8fb0ff;margin-bottom:14px;
}
.sec-hero h1,.sec-hero .hero-title{
  font:700 clamp(26px,3.2vw,52px)/1.16 "Microsoft YaHei";
  letter-spacing:-.03em;margin:0 0 16px;max-width:17em;
}
.sec-hero h1 em,.sec-hero .hero-title em{color:var(--red)}
.hero-sub{
  max-width:730px;color:rgba(255,255,255,.8);
  font:400 clamp(14px,1.02vw,16px)/1.85 "Microsoft YaHei";margin-bottom:24px;
}
.hero-btns{display:flex;gap:16px}
.hero-btns .btn-line{margin-left:0}
/* 首屏底图明暗不可控（滑到亮区时红描边几乎看不见）→ 改深底白字幽灵按钮，
   悬停仍回落到品牌红，与站内其它描边按钮行为一致。 */
.hero-btns .btn-line{background:rgba(12,14,16,.46);border-color:rgba(255,255,255,.6);color:#fff}
.hero-btns .btn-line:hover{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
/* 红标签与 .w-con 左边缘对齐（容器的 4 档宽度分别见文件末尾各断点），
   否则它会贴在视口最左，与上面整列文字/按钮的栅格错位。 */
.hero-cap{
  position:absolute;left:calc((100% - 1520px) / 2);bottom:0;z-index:3;
  padding:11px 22px;background:var(--red);color:#fff;
  font:400 14px/1.4 "Microsoft YaHei";letter-spacing:.06em;
}
/* 底部数据与轮播圆点 */
.hero-foot{position:relative;z-index:2;padding-top:clamp(24px,3.6vh,44px)}
.hero-foot-in{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.hero-nums{display:flex;gap:clamp(26px,4.4vw,72px)}
.hero-nums .hn b{
  display:block;font:700 clamp(30px,2.6vw,44px)/1 Arial,sans-serif;color:#fff;
  letter-spacing:-.02em;
}
.hero-nums .hn b i{font-size:.5em;font-style:normal;font-weight:400;margin-left:3px;color:rgba(255,255,255,.6)}
.hero-nums .hn span{display:block;margin-top:9px;font-size:14px;color:rgba(255,255,255,.5)}
.hero-dots{display:flex;gap:10px;padding-bottom:8px}
.hero-dots button{
  width:34px;height:3px;padding:0;border:0;background:rgba(255,255,255,.28);
  transition:background .4s,width .4s;
}
.hero-dots button.on{background:var(--red);width:56px}

/* 多图拼接图带：首屏第 2 组与区域分站横幅共用。
   每格按图片自身比例铺满，640×480 的实景照因此不必放大到 1920 宽。 */
.photo-panels{position:absolute;inset:0;display:grid;gap:4px;grid-template-columns:repeat(3,1fr)}
.photo-panels span{display:block;overflow:hidden}
.photo-panels img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 7 公司简介 ---------- */
.sec-about{background:var(--ink);color:#fff;overflow:hidden}
/* 公司简介背景图（第 4 条）：素材已换成 1760×960 的实拍分辨率，
   无需再 blur 放大藏糊——改为「压暗 + 冷蓝调」，白字落上去更稳，
   整段也与上下版块的深色系自然衔接。
   想换成纯色（不要背景图）时：把 background 一行改成 background:none，
   再把 .sec-about 自身的 background-color 调成想要的深色即可，其它规则都不用动。 */
.sec-about::before{
  content:"";position:absolute;inset:0;
  background:url(../images/about-bg.jpg) no-repeat center/cover;
  filter:brightness(.62) saturate(.94);
}
.sec-about::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(11,20,40,.86) 0%,rgba(13,16,19,.72) 54%,rgba(13,16,19,.88) 100%);
}
.sec-about>.w-con{position:relative;z-index:2}
.about-tit{font-size:42px;line-height:1.35;font-weight:700;text-align:center;letter-spacing:-.02em}
.about-tit em{color:var(--blue-on-dark);font-style:normal}
.about-sm{
  text-align:center;color:rgba(143,176,255,.66);letter-spacing:.3em;
  font:400 13px/1.4 Arial,sans-serif;text-transform:uppercase;padding-top:10px;
}
.about-txt{font:400 16px/1.85 "Microsoft YaHei";padding:2.6vh 7.1% 3vh;color:rgba(255,255,255,.86)}
.about-txt p+p{margin-top:1.2em}
.about-nums{margin-top:4vh;padding:2.6vh 0 3.2vh;background:rgba(0,0,0,.16);position:relative;z-index:2}
.nums{display:flex;flex-wrap:wrap;justify-content:space-between}
.num{width:195px}
.num-v{
  display:block;font:700 84px/1 Arial,sans-serif;letter-spacing:-.03em;
  background-image:linear-gradient(to top,#b1bbbd,#f7f7f7,#b1bbbd);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;
  -webkit-text-stroke:2px #fff;
  /* 金属渐变靠 background-clip:text 实现，而背景只铺元素自身的盒。
     .num 的宽度是固定的 195/172/220px，但 84px 字号下「10000」实测宽 221px，
     超出的字形拿不到背景，配上 text-fill-color:transparent 就只剩描边——
     表现为最后一个 0 发空、像被切掉一半。
     width:max-content 让背景盒贴合整串数字（padding 保证描边不被裁）。 */
  width:max-content;padding-right:8px;
}
.num-p{
  display:block;margin-top:5px;padding-left:44px;color:#fff;
  font-size:17px;line-height:2.2;white-space:nowrap;
  background-repeat:no-repeat;background-position:3px center;background-size:26px auto;
}
.num-p::before{
  content:"";display:inline-block;width:26px;height:26px;margin:0 10px -6px -44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d50c19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5.5 20V10l6.5-6 6.5 6v10M9.5 20v-5h5v5'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---------- 8 产品展示（首页横滑 / 内页网格通用卡片） ---------- */
.sec-pro{background:#f4f5f7}
.sec-head{display:flex;justify-content:space-between;gap:30px}
.sec-desc{width:66%;padding-top:50px;color:#444;font:400 18px/36px "Microsoft YaHei"}
.pro-wrap{position:relative;margin-top:5vh}
.pro-track{
  display:flex;gap:20px;padding:30px 0 0;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pro-track::-webkit-scrollbar{display:none}
.pro-card{flex:0 0 calc((100% - 60px) / 4);min-width:0}
.pro-card a{
  position:relative;display:block;background:#888888;border-radius:20px;
  overflow:hidden;transition:background .3s;
}
.pro-card a:hover{background:#db0000}
.pro-img{display:block;background:#fff;aspect-ratio:1/1;overflow:hidden}
.pro-img img{display:block;width:100%;height:100%;object-fit:contain}
.pro-name{
  position:relative;display:block;padding:15px 0 0;
  color:#fff;font:400 20px/80px "Microsoft YaHei";text-align:center;
}
/* 省略号交给内层文字元素处理：.pro-name 自身若 overflow:hidden，
   上凸的圆形图标会被裁成半圆（客户第 5 条「图标显示不完整」的根因）。 */
.pro-name-tx{
  display:block;padding:0 16px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.pro-ico{
  position:absolute;left:50%;top:-36px;transform:translateX(-50%);
  width:72px;height:72px;background:var(--red);border-radius:50%;
  border:4px solid #d2d9df;transition:background .3s;
  display:flex;align-items:center;justify-content:center;
}
.pro-ico svg{width:34px;height:34px}
.pro-card a:hover .pro-ico{background:#939393}
.pro-nav{
  position:absolute;top:50%;z-index:6;width:60px;height:60px;margin-top:-30px;
  border-radius:50%;cursor:pointer;background:#fff;
  opacity:0;visibility:hidden;
  transition:background-color .5s ease,opacity .3s,visibility .3s;
  display:flex;align-items:center;justify-content:center;
}
.pro-nav svg{width:14px;height:24px;stroke:#999}
.pro-prev{left:-30px}
.pro-next{right:-30px}
.pro-prev:hover,.pro-next:hover{background:#dc0000}
.pro-prev:hover svg,.pro-next:hover svg{stroke:#fff}
.pro-wrap:hover .pro-nav{opacity:1;visibility:visible}
.pro-wrap:hover .pro-nav[disabled]{opacity:.3;cursor:default}
.pro-wrap.is-static .pro-nav{display:none}
.sec-more{text-align:center;margin-top:7vh;font-size:0}

/* ---------- 9 四大优势 ---------- */
/* 去掉 100vh 强制高度：大屏下整块过高，且把 640×480 实景图拉成竖向长条发虚。
   改为自适应高度 + 深色底托白字，列高限制在 430px，照片不再被过度拉伸。 */
.sec-adv{background:#15181b;padding:7vh 0 8vh;overflow:hidden}
.adv-title{
  position:static;z-index:2;width:100%;text-align:center;margin-bottom:5vh;
  color:#fff;font:600 44px/60px "Microsoft YaHei";
}
.adv-title em{color:var(--blue-on-dark);font-style:normal}
.adv-list{display:flex;height:auto}
.adv-col{
  position:relative;flex:1;min-height:430px;overflow:hidden;
  background-repeat:no-repeat;background-position:center;background-size:cover;
}
.adv-col::before{
  content:"";position:absolute;inset:0;transition:background .5s;
  background:linear-gradient(180deg,rgba(16,18,20,.24) 0%,rgba(16,18,20,.46) 46%,rgba(16,18,20,.74) 100%);
}
.adv-col:hover::before{background:rgba(16,48,128,.72)}
.adv-in{
  position:absolute;left:0;right:0;bottom:0;padding:42px 26px;text-align:center;
  transition:transform .8s;z-index:2;
}
.adv-col:hover .adv-in{transform:translateY(-14px)}
.adv-in .ico{width:88px;height:88px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center}
.adv-in .ico svg{width:64px;height:64px}
.adv-in h3{color:#fff;font:600 26px/66px "Microsoft YaHei";margin-bottom:10px}
.adv-in p{color:#efefef;font:400 17px/30px "Microsoft YaHei"}
/* 四个理由：卡片改为可点击（每张卡对应一篇论证文章），补可点击提示与栏目入口 */
.adv-in .adv-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  padding:8px 20px;border:1px solid rgba(255,255,255,.5);border-radius:20px;
  color:#fff;font:400 14px/1 "Microsoft YaHei";
  transition:background .3s,border-color .3s,color .3s;
}
.adv-in .adv-more svg{width:14px;height:14px;stroke:#fff;transition:stroke .3s}
.adv-col:hover .adv-more{background:#fff;border-color:#fff;color:var(--blue)}
.adv-col:hover .adv-more svg{stroke:var(--blue)}
.adv-more-all{margin-top:30px;text-align:center}
.adv-more-all a{
  display:inline-block;padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.42);
  color:rgba(255,255,255,.88);font:400 15px/1 "Microsoft YaHei";
  transition:color .3s,border-color .3s;
}
.adv-more-all a:hover{color:#fff;border-color:#fff}

/* ---------- 10 服务与支持 ---------- */
.sec-svc{background:#fff}
.svc-in{display:flex;align-items:center;justify-content:space-between;gap:min(4vw,64px)}
.svc-l{flex:1 1 auto;min-width:0}
.sec-title.deco-s{padding-top:33px;padding-bottom:10px}
.deco-s h2{color:#000}
.deco-s h3{padding-left:80px;line-height:30px}
.svc-txt{margin:6vh 0 7vh;color:#333;font:400 17px/34px "Microsoft YaHei"}
.svc-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:7vh}
.svc-tags li{
  padding:9px 18px;border:1px solid #dcdcdc;border-radius:20px;
  font-size:15px;color:#555;
}
.svc-phone{display:flex;align-items:center}
.svc-phone-ico{
  position:relative;flex:0 0 100px;width:100px;height:100px;
  border-radius:50%;background:rgba(216,27,18,.32);
}
.svc-phone-ico::before{content:"";position:absolute;left:11px;top:11px;width:78px;height:78px;border-radius:50%;background:rgba(216,27,18,.32)}
.svc-phone-ico::after{content:"";position:absolute;left:20px;top:20px;width:60px;height:60px;border-radius:50%;background:var(--red)}
.svc-phone-ico svg{position:absolute;left:50%;top:50%;z-index:2;width:30px;height:30px;transform:translate(-50%,-50%)}
.svc-phone-tx{padding-left:20px}
.svc-phone-tx small{display:block;color:#333;font:400 18px/36px "Microsoft YaHei"}
.svc-phone-tx b{display:block;color:var(--red);font:600 30px/38px Arial,"Microsoft YaHei"}
.svc-r{position:relative;flex:0 0 640px;max-width:640px}
.svc-r .svc-photo{display:block;width:100%;height:auto;border-radius:6px}
.svc-note{
  position:absolute;left:0;bottom:0;width:100%;padding:26px 30px;
  background:linear-gradient(0deg,rgba(16,18,20,.92),rgba(16,18,20,0));
  color:#fff;border-radius:0 0 6px 6px;
}
.svc-note b{display:block;font:600 20px/1.6 "Microsoft YaHei";margin-bottom:4px}
.svc-note span{font-size:14px;color:rgba(255,255,255,.7)}

/* ---------- 11 新闻资讯 ---------- */
.sec-news{background:#f4f4f4}
.news-in{display:flex;align-items:center;gap:40px}
.news-l{flex:0 0 30%}
.deco-n h2{padding-left:110px;color:#333}
.deco-n h3{padding-left:110px}
.news-sub{margin:4vh 0;color:#000;font:600 22px/40px "Microsoft YaHei"}
.news-tabs{padding-left:4vh}
.news-tabs li a{color:#444;font:400 18px/38px "Microsoft YaHei"}
.news-tabs li:hover a,.news-tabs li.on a{color:var(--red)}
.news-more{width:166px;line-height:44px;margin-top:5vh}
.news-list{display:flex;flex:1;min-width:0}
.news-list>li{flex:1;min-width:0;padding:0 2%;border-left:1px solid #cecece}
.news-list h3{
  position:relative;margin-bottom:15px;padding-bottom:25px;
  color:#333;font:600 22px/38px "Microsoft YaHei";
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.news-list h3::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:2px;background:var(--red)}
.news-wz{
  margin-bottom:6vh;color:#666;font:400 16px/32px "Microsoft YaHei";
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-img{position:relative;display:block;overflow:hidden}
.news-img img{display:block;width:100%;height:auto;transition:transform .8s}
.news-date{
  position:absolute;left:0;top:0;width:76px;height:76px;padding:10px 6px;
  background:var(--red);color:#fff;font:400 16px/28px "Microsoft YaHei";text-align:center;
}
.news-date b{display:block;font:400 30px/32px "Microsoft YaHei"}
.news-lnk{
  display:inline-flex;align-items:center;gap:10px;margin-top:4vh;
  color:#444;font:400 16px/32px "Microsoft YaHei";transition:color .3s;
}
.news-lnk svg{width:18px;height:26px;stroke:#b4b4b4;transition:stroke .3s}
.news-list>li:hover h3{color:var(--red)}
.news-list>li:hover .news-img img{transform:scale(1.05)}
.news-list>li:hover .news-lnk{color:var(--red)}
.news-list>li:hover .news-lnk svg{stroke:var(--red)}

/* ---------- 12 常见问题（首页板块与 faq.html 共用） ---------- */
.sec-faq{background:#f7f8f9;padding:6vh 0}
.faq-in{display:flex;gap:5%;align-items:flex-start}
.faq-l{flex:0 0 25%;min-width:0}
.faq-r{flex:1 1 auto;min-width:0}
.faq-note{color:#8d8d8d;font:400 15px/1.95 "Microsoft YaHei";padding:20px 0 28px}
.faq-more{margin-top:2px}
.faq-list{border-top:1px solid #e4e4e4}
.faq-item{border-bottom:1px solid #e4e4e4}
.faq-q{
  position:relative;padding:19px 54px 19px 46px;cursor:pointer;
  font:400 17px/1.65 "Microsoft YaHei";color:#222;transition:color .3s;
}
.faq-q::before{
  content:"Q";position:absolute;left:6px;top:20px;
  font:700 15px/1.5 Arial,sans-serif;color:var(--red);
}
.faq-q::after{
  content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid #b4b4b4;border-bottom:2px solid #b4b4b4;
  transform:rotate(45deg);transition:transform .3s,border-color .3s;
}
.faq-item.on .faq-q{color:var(--red)}
.faq-item.on .faq-q::after{transform:rotate(-135deg);border-color:var(--red)}
.faq-a{position:relative;max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.on .faq-a{max-height:680px}
.faq-a::before{
  content:"A";position:absolute;left:6px;top:0;
  font:700 15px/1.65 Arial,sans-serif;color:#c3c3c3;
}
.faq-a p{padding:0 54px 22px 46px;color:#5c5c5c;font:400 15px/1.95 "Microsoft YaHei"}
.faq-cat{font:600 20px/1.5 "Microsoft YaHei";color:#1a1a1a;padding:34px 0 10px}
.faq-cat:first-of-type{padding-top:0}
.deco-q{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 144'%3E%3Ctext x='2' y='120' font-family='Arial,Helvetica,sans-serif' font-size='150' font-weight='700' fill='none' stroke='%23e2e2e2' stroke-width='2'%3EQ%3C/text%3E%3C/svg%3E")}

/* ==========================================================================
   12 页脚
   ========================================================================== */
.ft{background:var(--navy);border-top:3px solid var(--blue);color:rgba(255,255,255,.7)}
.ft-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px min(3vw,48px);padding:7vh 0 2vh;align-items:flex-start}
.ft-nav{display:contents}
.ft-nav dt{color:#fff;font:600 20px/38px "Microsoft YaHei";margin-bottom:4px;white-space:nowrap}
.ft-nav dl{flex:0 0 auto;margin:0}
.ft-nav dd a{color:var(--gray);font:400 15px/32px "Microsoft YaHei";transition:color .3s;white-space:nowrap}
.ft-nav dd a:hover{color:var(--red)}
.ft-contact{flex:0 1 356px;min-width:0}
.ft-contact h4{color:#fff;font:600 20px/38px "Microsoft YaHei";margin-bottom:4px}
.ft-contact p{display:flex;font-size:14px;line-height:1.85;color:rgba(255,255,255,.66)}
.ft-contact p i{flex:0 0 62px;color:rgba(255,255,255,.4);white-space:nowrap}
.ft-contact p b{color:#fff;font-weight:400}
.ft-contact p.ft-ct-line{margin-top:2px}
.ft-contact p.ft-ct-line i{flex:0 0 62px;color:rgba(255,255,255,.4);white-space:nowrap}
.ft-qr{flex:0 0 136px;text-align:center}
.ft-qr-img{display:inline-block;padding:8px;background:rgba(255,255,255,.1)}
.ft-qr-img img{display:block;width:120px;height:120px}
.ft-qr em{display:block;margin-top:15px;padding:.8em 0;background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);font:400 13px/1.7 "Microsoft YaHei"}
.ft-link{padding:20px 0;color:var(--gray);font:400 14px/28px "Microsoft YaHei"}
.ft-link a{display:inline-block;margin-left:20px;color:var(--gray)}
.ft-link a:hover{color:#fff}
.ft-copy{border-top:1px solid rgba(255,255,255,.1);padding:11px 0;font-size:12px;line-height:1.9;color:rgba(255,255,255,.5)}
.ft-copy-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ft-copy a{color:rgba(255,255,255,.5)}
.ft-copy a:hover{color:#fff}
.ft-region{text-align:right;white-space:nowrap}
.ft-region a{margin-left:8px}

/* footer 新增：关于瑞森 / 二维码组 / 占位二维码（内页由 build.py 的 _footer() 生成） */
.ft-about{flex:0 1 268px;min-width:0;color:rgba(255,255,255,.66);font-size:14px;line-height:1.85}
.ft-about h4{color:#fff;font:600 20px/38px "Microsoft YaHei";margin-bottom:10px}
.ft-about p{margin-bottom:12px}
.ft-about-tel{margin-top:8px}
.ft-about-tel b{color:#fff;font:600 18px/1.4 Arial,"Microsoft YaHei"}
.ft-qrs{display:flex;gap:20px;margin-top:16px;align-items:flex-start;flex-wrap:wrap}
.ft-qrs em{margin-top:8px;padding:.6em 0;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);font:400 12px/1.5 "Microsoft YaHei"}
.ft-qr-img--ph{display:flex;align-items:center;justify-content:center;width:120px;height:120px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:13px;text-align:center;line-height:1.5}

/* ---------- 13 右侧悬浮工具条 ---------- */
.side{position:fixed;right:0;top:50%;z-index:80;transform:translateY(-50%)}
.side-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:70px;height:70px;margin-bottom:0;border-radius:0;background:var(--red);color:#fff;
  font-size:12px;gap:5px;transition:box-shadow .3s;
}
/* 相邻按钮之间用「盒内 1px 线」分隔：视觉可分，但盒子间距严格为 0 */
.side-btn + .side-btn{border-top:1px solid rgba(255,255,255,.15)}
.side-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.24)}
.side-btn svg{width:26px;height:26px}
.side-qr em{
  position:absolute;right:100%;top:50%;margin-right:8px;padding:8px;background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(-50%) scale(.9);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.side-qr:hover em{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.side-qr em img{display:block;width:120px;height:120px}

/* ---------- 14 移动端底部固定条 ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:var(--dark)}
.mbar a{
  display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;
  height:56px;color:#fff;font-size:12px;gap:4px;
}
.mbar svg{width:20px;height:20px}

/* ==========================================================================
   15 断点：1600 / 1400 / 1200 / 992 / 768 / 500
   ========================================================================== */
@media (min-width:993px){
  /* 公司简介 / 产品 / 服务 / 新闻：不再强制占满一屏（min-height:100vh 会在内容偏短的分区
     上下留出大片空白，服务板块尤其明显，观感像“变形”）。改为自然高度，仅公司简介单独处理数字栏间距。 */
  .sec-about{display:block;min-height:0}
  .sec-about>.about-nums{margin-top:clamp(30px,4.2vh,54px)}
}

@media (max-width:1600px){
  .w-con{width:1280px}
  .hero-cap{left:calc((100% - 1280px) / 2)}
  .w-in{width:1140px}
  .num{width:172px}
  .num-v{font-size:74px}
}
@media (max-width:1400px){
  .w-con{width:calc(100% - 30px)}
  .hero-cap{left:15px}
  .w-in{width:calc(100% - 60px)}
  .hd-logo img{height:44px}
  .hd-logo-tx b{font-size:16px}
  .hd-logo-tx i{display:none}
  .hd-menu>li>a{line-height:70px;font-size:16px}
  .svc-l{max-width:none}
  .svc-r{flex-basis:560px}
  .pro-prev{left:0}
  .pro-next{right:0}
  .num{width:auto;flex:1 1 22%}
}
@media (max-width:1200px){
  .about-tit{font-size:30px}
  .about-txt{font:400 16px/32px "Microsoft YaHei";padding:5vh 0}
  .num-p{padding-left:38px;font-size:16px;background-size:22px auto}
  .num-p::before{width:22px;height:22px;margin:0 10px -5px -38px}
  .hero-nums{gap:26px}
  .hero-nums .hn b{font-size:28px}
}

/* ---------- 平板 / 手机 ---------- */
@media (max-width:1200px){
  .ft-in{gap:32px}
  .ft-about{flex:0 1 236px}
  .ft-contact{flex:0 1 310px}
  .ft-nav{gap:20px 34px}
}
@media (max-width:992px){

  html{scroll-padding-top:60px}
  body{padding-bottom:56px;font-size:15px}

  .hd,.side{display:none}
  .mhd,.mbar{display:flex}

  .w-con,.w-in{width:calc(100% - 30px)}

  .sec{min-height:0}
  .sec-about,.sec-pro,.sec-svc,.sec-news{padding:6vh 0}
  .sec-hero{min-height:0;padding:0 0 40px}
  .hero-slides{height:clamp(400px,58vh,480px)}
  .hero-tx{padding-top:70px}
  .hero-shot::after{background:linear-gradient(180deg,rgba(10,12,14,.66),rgba(10,12,14,.86))}
  .hero-tx .w-con{flex:0 0 auto;width:calc(100% - 30px)}
  .hero-btns{gap:12px}
  .hero-btns .btn{width:auto;flex:1 1 0;min-width:0;padding:0 10px;font-size:15px;line-height:48px}
  .hero-foot-in{display:block;padding-top:26px}
  .hero-nums{flex-wrap:wrap;gap:0}
  .hero-nums .hn{width:50%;margin-bottom:16px}
  .hero-nums .hn b{font-size:28px}
  .hero-dots{padding:10px 0 0}
  .sec-hero h1,.sec-hero .hero-title{font-size:clamp(24px,5.6vw,38px)}

  /* 简介 */
  .about-txt{padding:3vh 0}
  .about-nums{margin-top:0;padding:2.4vh 0 3vh}
  .num{width:50%;flex:none;margin-bottom:8px}
  .num-v{font-size:36px}
  .num-p{padding-left:30px;font-size:14px;line-height:1.9}
  .num-p::before{width:18px;height:18px;margin:0 7px -4px -30px}

  /* 产品 */
  .sec-head{display:block}
  .sec-title{padding-top:0;background-image:none}
  .sec-title h2{padding-left:0;font:600 30px/52px "Microsoft YaHei"}
  .sec-title h3{padding-left:0;font:600 22px/30px "Microsoft YaHei"}
  .sec-desc{width:100%;padding-top:3vh;font:400 16px/32px "Microsoft YaHei"}
  .pro-wrap{margin-top:4vh}
  .pro-card{flex:0 0 calc((100% - 60px) / 4)}
  .pro-track{gap:20px;padding:34px 0 0}
  .pro-name{font:400 13px/52px "Microsoft YaHei";padding:20px 0 0}
  .pro-name-tx{padding:0 6px}
  .pro-ico{top:-32px;width:64px;height:64px;border-width:3px}
  .pro-ico svg{width:28px;height:28px}
  .pro-nav{width:44px;height:44px;margin-top:-22px}
  .pro-nav svg{width:11px;height:18px}
  .pro-prev{left:-12px}
  .pro-next{right:-12px}
  .sec-more{margin-top:4vh}
  .btn{width:160px;line-height:44px}
  .btn-line{margin-left:12px}

  /* 优势 */
  .sec-adv{height:auto;min-height:0;padding:6vh 0 7vh}
  .adv-title{position:static;color:#fff;font:600 30px/60px "Microsoft YaHei";margin-bottom:3vh}
  .adv-title em{color:var(--blue-on-dark)}
  .adv-list{flex-wrap:wrap;height:auto}
  .adv-col{flex:0 0 50%;min-height:300px}
  /* position:static 时 z-index 失效，文字会被 ::before 遮罩压住看不清 → 改回定位层叠 */
  .adv-in{position:relative;z-index:2;padding:44px 20px 30px}
  .adv-in p{font:400 16px/30px "Microsoft YaHei"}
  .adv-col::before{background:linear-gradient(180deg,rgba(16,18,20,.28) 0%,rgba(16,18,20,.5) 46%,rgba(16,18,20,.76) 100%)}

  /* 服务 */
  .svc-in{display:block}
  .svc-l{max-width:none}
  .svc-txt{margin:2vh 0;font:400 16px/30px "Microsoft YaHei"}
  .svc-tags{margin-bottom:3vh}
  .svc-phone-ico{flex:0 0 80px;width:80px;height:80px}
  .svc-phone-ico::before{left:5px;top:5px;width:70px;height:70px}
  .svc-phone-ico::after{left:10px;top:10px;width:60px;height:60px}
  .svc-phone-tx b{font:600 26px/36px Arial,"Microsoft YaHei"}
  .svc-r{margin-top:4vh;max-width:none;margin-left:0}
  .svc-note{position:static;background:none;padding:16px 0 0;color:#333}
  .svc-note b{color:#111;font-size:17px}
  .svc-note span{color:#777}

  /* 新闻 */
  .news-in{display:block}
  .news-l{margin-bottom:4vh}
  .news-sub{margin:2vh 0;font:600 18px/32px "Microsoft YaHei"}
  .news-tabs{display:flex;padding-left:0}
  .news-tabs li{width:50%}
  .news-tabs li a{display:block;text-align:center;font-size:16px}
  .news-more{margin-top:2vh}
  .news-list{display:block}
  .news-list>li{padding:3vh 0;border-left:0;border-top:1px solid #e2e2e2}
  .news-list>li:first-child{border-top:0;padding-top:0}
  .news-list h3{white-space:normal;font-size:18px;line-height:30px}
  .news-wz{margin-bottom:3vh}

  /* 常见问题 */
  .sec-faq{padding:6vh 0}
  .faq-in{display:block}
  .faq-l{margin-bottom:3vh}
  .faq-note{padding:2vh 0 3vh}
  .faq-q{padding:16px 44px 16px 34px;font-size:16px}
  .faq-q::before{left:2px;top:17px;font-size:14px}
  .faq-q::after{right:12px}
  .faq-a p{padding:0 44px 18px 34px;font-size:15px}
  .faq-cat{font-size:18px;padding:26px 0 8px}

  /* 页脚：移动端只保留版权条（友情链接按客户第 9 条要求隐藏） */
  .ft-nav,.ft-contact,.ft-about{display:none}
  .ft-link{display:none}
  .ft-in{padding:0}
  .ft-copy-in{display:block;text-align:center}
  .ft-region{text-align:center;margin-top:6px;white-space:normal}
}

@media (max-width:768px){
  /* 与首页一致：手机上隐藏新闻摘要与配图 */
  .news-sub,.news-more,.news-img{display:none}
  .num-v{font-size:34px;-webkit-text-stroke-width:1px}
  .pro-card{flex:0 0 calc((100% - 60px) / 4)}
  /* 手机上三格拼接会变成窄条，收成单格 */
  .photo-panels{grid-template-columns:1fr}
  .photo-panels span+span{display:none}
}

@media (max-width:500px){
  .adv-col{flex:0 0 100%;min-height:240px}
  .adv-in{padding:30px 20px 20px}
  .adv-title{font:600 25px/60px "Microsoft YaHei"}
  .adv-in h3{font:600 22px/52px "Microsoft YaHei";margin-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   20 宽屏档（视口 ≥1720px）：内容容器 1680
   1680 容器需要至少 1720 的视口才装得下，所以单独加一档，
   而不是把 .w-con 的 1520 直接改成 1680 —— 那会让 1601–1719 的视口两侧溢出。
   .w-in 按同一比例放大（1520:1200 ≈ 1680:1320），保证内页与首页宽度节奏一致。
   ========================================================================== */
@media (min-width:1720px){
  .w-con{width:1680px}
  .w-in{width:1320px}
  .hero-cap{left:calc((100% - 1680px) / 2)}
  .num{width:220px}
}

/* ==========================================================================
   2026-09-30 第三轮（追加）
   1 首屏整图 / 2 首页产品静态网格 / 3 服务与支持多图轮播 / 4 新闻缩略图统一尺寸
   5 悬浮工具条微信与热线 / 6 页脚二维码与移动端地址电话 / 7 移动端 LOGO 文字
   8「选择瑞森的四个理由」改浅色底 / 9 PC 滚动出现特效
   ========================================================================== */

/* ---------- 1 首屏：整张图 ---------- */
.hero-unit{position:relative;flex:1 1 auto;min-height:clamp(456px,55.2vh,672px);overflow:hidden;background:#191c1f}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,14,.72),rgba(10,12,14,.12) 176px),
             linear-gradient(90deg,rgba(10,12,14,.90),rgba(10,12,14,.66) 34%,rgba(10,12,14,.16) 68%,rgba(10,12,14,.38))}

/* ---------- 2 首页产品展示：静态网格（PC 一排 4 个 × 2 排；移动 2 × 4） ---------- */
.pro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:5vh 0 0;padding:0;list-style:none}
.pro-grid .pro-card{min-width:0}
.pro-empty{grid-column:1/-1;padding:8vh 0;text-align:center;color:#9a9a9a;font:400 15px/2 "Microsoft YaHei"}
.pro-empty a{color:var(--red)}

/* ---------- 3 服务与支持：右侧多图轮播 ---------- */
.svc-slider{position:relative;overflow:hidden;border-radius:6px;background:#1b1e21;aspect-ratio:4/3}
.svc-slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .8s ease}
.svc-slide.on{opacity:1}
.svc-slide img{display:block;width:100%;height:100%;object-fit:cover}
.svc-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:8px}
.svc-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .3s,width .3s}
.svc-dots button.on{width:26px;border-radius:5px;background:var(--red)}

/* ---------- 4 首页新闻缩略图统一尺寸（超出部分裁掉） ---------- */
.news-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* ---------- 5 右侧悬浮工具条：微信 / 服务热线 ---------- */
button.side-btn{border:0;padding:0;font:inherit;cursor:pointer}
.side-pop{position:absolute;right:calc(100% + 12px);top:50%;z-index:5;margin:0;padding:10px;
  background:#fff;border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.2);
  font-style:normal;text-align:center;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(-50%) scale(.92);
  transition:opacity .28s,transform .28s,visibility .28s}
.side-pop::after{content:"";position:absolute;left:100%;top:50%;margin-top:-7px;border:7px solid transparent;border-left-color:#fff}
.side-pop img{display:block;width:120px;height:120px}
.side-pop b{display:block;margin-top:7px;color:#333;font:400 13px/1.6 "Microsoft YaHei"}
.side-wx.on .side-pop,.side-tel:hover .side-pop,.side-tel:focus-visible .side-pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.side-wx.on{box-shadow:0 2px 10px rgba(0,0,0,.26)}
.side-tel .side-pop{padding:13px 18px}
.side-tel .side-pop b{margin:0;color:var(--red);font:600 19px/1.5 Arial,"Microsoft YaHei"}
.side-tel .side-pop em{display:block;margin-top:3px;color:#9a9a9a;font:400 12px/1.6 "Microsoft YaHei";font-style:normal}

/* ---------- 6 页脚：二维码并列 + 移动端地址电话 ---------- */
.ft-qrs{display:flex;gap:14px;margin-top:14px}
.ft-qrs figure{margin:0;text-align:center}
.ft-qrs img{display:block;width:104px;height:104px;padding:3px;border-radius:6px;background:#fff}
.ft-qrs figcaption{margin-top:6px;color:rgba(255,255,255,.55);font:400 12px/1.5 "Microsoft YaHei"}
.ft-mob{display:none}

/* ---------- 7 移动端顶部 LOGO 文字 ----------
   第 14 轮：公司名字号整体下调 2px（clamp 三档同步下调：18→16 / 6.8vw→6.2vw / 28→26），
   各视口实测均约 -2px，避免在 360~430 宽的手机上与 32px 的 LOGO 挤在一起。 */
.mhd-logo{display:flex;align-items:center;justify-content:center;gap:8px}
.mhd-logo-tx{color:#fff;font:700 clamp(16px,6.2vw,26px)/1 "Microsoft YaHei";white-space:nowrap;pointer-events:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- 8「选择瑞森的四个理由」：深色底 + 白字（第 6 条：原来太灰） ---------- */
.sec-adv{background:#101315}
.adv-title{color:#fff}
.adv-title em{color:var(--blue-on-dark)}
.adv-col::before{background:linear-gradient(180deg,rgba(10,12,14,.52) 0%,rgba(10,12,14,.68) 46%,rgba(10,12,14,.88) 100%)}
.adv-col:hover::before{background:rgba(16,48,128,.74)}
.adv-in .ico svg{stroke:#fff}
.adv-in h3{color:#fff}
.adv-in p{color:rgba(255,255,255,.86)}
.adv-col:hover .adv-in h3,.adv-col:hover .adv-in p{color:#fff}
.adv-col:hover .adv-in .ico svg{stroke:#fff}

/* ---------- 9 PC 滚动出现特效 ---------- */
@media (min-width:993px){
  .rv{opacity:0;transform:translateY(46px);
    transition:opacity .72s cubic-bezier(.22,.8,.28,1),transform .72s cubic-bezier(.22,.8,.28,1)}
  .rv.on{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
}

@media (max-width:1400px){
  .pro-grid{gap:18px}
}
@media (max-width:992px){
  .hero-unit{height:clamp(480px,69.6vh,576px);min-height:0}
  .pro-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:4vh}
  .ft-mob{display:block;border-top:1px solid rgba(255,255,255,.1);padding:13px 0 11px}
  .ft-mob-in p{color:rgba(255,255,255,.6);font:400 13px/1.95 "Microsoft YaHei"}
  .ft-mob-in p b,.ft-mob-in p a{color:#fff;font-weight:400}
  .adv-col::before{background:linear-gradient(180deg,rgba(10,12,14,.60) 0%,rgba(10,12,14,.74) 46%,rgba(10,12,14,.88) 100%)}
}
@media (max-width:500px){
  .pro-grid{gap:12px}
  .mhd-logo{gap:6px;left:50px;right:50px}
  .svc-dots{bottom:10px}
}

/* ---------- 第五轮修正：悬浮工具条（右 70px）安全区 ----------
   原来用「第 4 列单独加宽 84px」来避让右侧固定工具条，结果四列宽度不一致（客户第 6 条）。
   改为整条列表右侧整体内缩 84px —— 四列仍然等宽，右侧留出 84px 安全区。 */
@media (min-width:993px){
  .sec-adv .adv-list{padding-right:84px}
}

/* ---------- 第五轮：工具条安全区（列表页与版块容器） ---------- */
@media (min-width:993px) and (max-width:1400px){
  /* ≤1400px 时 .w-con 宽为 calc(100% - 30px)，内容会压到固定的 .side 工具条（右 70px）下方。
     给版块容器与列表页容器留出右侧安全区；页脚容器在 .ft 内、不属于 .sec，不受影响。 */
  .w-con{padding-right:62px}
}

/* ==========================================================================
   2026-10-01 第六轮（追加）
   1 公司简介下方 3 个入口按钮 / 2 友情链接新位置 / 3 手机号链接
   ========================================================================== */

/* ---------- 1 公司简介下方 3 个入口按钮（第 3 条） ---------- */
.about-btns{
  position:relative;z-index:2;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  margin-top:3.2vh;padding:0 7.1%;
}
.about-btns a{
  display:inline-block;min-width:184px;padding:0 26px;text-align:center;color:#fff;
  font:400 16px/48px "Microsoft YaHei";border-radius:26px;
  border:1px solid rgba(255,255,255,.62);background:rgba(12,14,16,.42);
  transition:background .3s,border-color .3s;
}
.about-btns a:hover{background:var(--red-btn);border-color:var(--red-btn)}
@media (max-width:992px){
  .about-btns{gap:12px;margin-top:2.6vh;padding:0}
  .about-btns a{flex:1 1 0;min-width:0;padding:0 10px;font-size:15px;line-height:44px}
}

/* ---------- 2 友情链接：已移到版权条下方，样式随之微调 ---------- */
.ft-link{border-top:1px solid rgba(255,255,255,.1);padding:16px 0 22px}
.ft-link a{margin-left:18px}

/* ---------- 3 电话链接：可点但外观与原来一致 ---------- */
a.side-ct-tel,a.svc-phone-lnk{color:inherit}
a.svc-phone-lnk:hover,a.side-ct-tel:hover{color:var(--red-hover)}
.ft-about-tel a,.ft-contact p b a,.ct-info .tx b a{color:inherit}
.ft-about-tel a:hover,.ft-contact p b a:hover,.ct-info .tx b a:hover{color:var(--red)}

/* ==========================================================================
   2026-10-02 第 15 轮（追加）
   1 首屏 banner 改为「多组图 + 文」轮播（4s 一组）
   2 首屏亮度恢复正常（原来的压暗层太重，整块发灰）
   3 公司简介区亮度恢复一半
   ========================================================================== */

/* ---------- 1 首屏轮播：一组 = 图 + 文，整组一起交叉淡入 ----------
   结构：.hero-unit（position:relative;overflow:hidden）
           > .hero-slide ×N（绝对定位铺满，.on 为当前组）
               > picture.hero-pic > img.hero-img
               > span.hero-shade
               > div.hero-tx（文字）
               > span.hero-cap（红标签）
           > .hero-dotbar（轮播指示条，不属于任何一组，所以不会跟着淡）
   每组自带 .hero-shade，压暗层随图一起淡入淡出，
   不会出现「新图已亮、文字被旧压暗层盖住」的中间态。 */
.hero-slide{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .7s ease}
.hero-slide.on{opacity:1;pointer-events:auto;z-index:1}
.hero-pic{position:absolute;inset:0;display:block}
/* 指示条：用 .w-con 对齐，省掉一套断点；容器不吃鼠标事件，只有圆点吃 */
.hero-dotbar{position:absolute;left:0;right:0;bottom:14px;z-index:4;pointer-events:none}
.hero-dotbar-in{display:flex;justify-content:flex-end}
.hero-dots{position:static;padding:0;pointer-events:auto}

/* ---------- 2 首屏亮度：压暗层减到原来的约 1/3，可读性交给文字阴影 ---------- */
.hero-shade{
  background:linear-gradient(180deg,rgba(10,12,14,.30),rgba(10,12,14,0) 168px),
             linear-gradient(90deg,rgba(10,12,14,.38),rgba(10,12,14,.18) 40%,rgba(10,12,14,.02) 72%,rgba(10,12,14,.10));
}
.hero-en,.hero-title,.hero-sub{text-shadow:0 2px 12px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.42)}
.hero-cap{text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* ---------- 3 公司简介：亮度恢复一半（背景图滤镜与压暗渐变各减半） ---------- */
.sec-about::before{filter:brightness(.81) saturate(.94)}
.sec-about::after{
  background:linear-gradient(135deg,rgba(11,20,40,.43) 0%,rgba(13,16,19,.36) 54%,rgba(13,16,19,.44) 100%);
}