/* 立捷印刷 · 首页（按旧站 1:1 复刻版式）2026-09-23 */
:root{
  --orered:#ff4328; --orange:#ff9c00; --ink:#5a5a5a; --ink2:#8a8a8a;
  --line:#e6e6e6; --bg:#f7f7f7;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,"Microsoft YaHei","PingFang SC",宋体,sans-serif;color:var(--ink);font-size:14px;line-height:1.7;background:#fff}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
.wrap{width:1200px;max-width:96%;margin:0 auto}
.clear:after{content:"";display:block;clear:both}

/* ── 1 头部 ── */
.h-top{border-bottom:1px solid var(--line)}
.h-top .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.h-logo{display:flex;align-items:center;gap:14px}
.h-logo img.mk{height:58px;width:auto}
.h-logo .name b{display:block;font-size:20px;color:#333;letter-spacing:1px}
.h-logo .name span{font-size:11px;color:var(--ink2);letter-spacing:.5px}
.h-right{display:flex;align-items:center;gap:20px}
.h-tel{text-align:right}
.h-tel span{display:block;font-size:12px;color:var(--ink2)}
.h-tel b{display:block;font-size:21px;color:#333;letter-spacing:.5px}
.h-qr{text-align:center}
.h-qr img{width:74px;height:74px;background:#fff;padding:3px;border:1px solid var(--line)}
.h-qr p{font-size:11px;color:var(--ink2);margin-top:2px}
/* 主导航 */
.h-nav{background:#fff;border-bottom:1px solid var(--line)}
.h-nav ul{display:flex;justify-content:center;flex-wrap:wrap}
.h-nav li{list-style:none}
.h-nav a{display:block;padding:15px 34px;font-size:16px;color:#333}
.h-nav a:hover,.h-nav a.on{color:#fff;background:var(--orered)}
/* 搜索条 */
.h-search{background:#333}
.h-search .wrap{display:flex;align-items:center;gap:0;height:46px}
.h-cat{background:var(--orered);color:#fff;height:46px;line-height:46px;padding:0 22px;font-size:15px}
.h-search form{display:flex;flex:1;background:#fff;height:32px;margin-left:10px;align-items:center}
.h-search .pl{background:var(--bg);color:#666;font-size:13px;padding:0 12px;height:32px;line-height:32px;border-right:1px solid var(--line)}
.h-search input{flex:1;border:0;outline:0;padding:0 10px;font-size:14px;height:32px}
.h-search button{border:0;background:transparent;padding:0 12px;cursor:pointer;font-size:15px;color:#888}
.h-msg{background:var(--orange);color:#fff;height:46px;line-height:46px;padding:0 26px;font-size:15px}

/* ── 3 首屏轮播 ── */
.h-banner{position:relative;height:535px;overflow:hidden;background:#6a5acd}
.h-banner .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:hs 12s infinite}
.h-banner .slide:nth-child(2){animation-delay:6s}
@keyframes hs{0%,45%{opacity:1}55%,100%{opacity:0}}
.h-catmenu{position:absolute;left:calc((100% - 1200px)/2);top:6px;width:200px;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.13);z-index:3}
.h-catmenu li{list-style:none}
.h-catmenu a{display:block;padding:11px 18px;font-size:14px;color:#444;border-bottom:1px solid #f2f2f2}
.h-catmenu a:hover{background:var(--orered);color:#fff}
.h-catmenu .more{background:var(--bg);text-align:center;color:var(--orered);font-weight:700}
.h-cap{position:absolute;left:0;right:0;top:190px;text-align:center;color:#fff;z-index:2}
.h-cap .en{font-size:15px;letter-spacing:3px;opacity:.9}
.h-cap h1{font-size:44px;letter-spacing:2px;margin:10px 0 6px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.h-cap p{font-size:19px;opacity:.95;margin-bottom:22px}
.h-cap .go{display:inline-block;background:var(--orered);color:#fff;padding:12px 42px;font-size:16px;border-radius:2px}
.h-dots{position:absolute;left:0;right:0;bottom:16px;text-align:center;z-index:2}
.h-dots i{display:inline-block;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.55);margin:0 5px}
.h-dots i:first-child{background:#fff}

/* ── 6 三大保障 ── */
.h-assure{padding:32px 0 8px}
.h-assure .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.h-assure .it{display:flex;gap:14px;align-items:flex-start}
.h-assure img{width:52px;height:52px;object-fit:contain;flex:0 0 52px}
.h-assure h3{font-size:17px;color:#333;margin-bottom:4px}
.h-assure p{font-size:13.5px;color:var(--ink2);line-height:1.65}

/* ── 7 四图拼贴 ── */
.h-mosaic{padding:26px 0 4px}
.h-mosaic .wrap{display:grid;grid-template-columns:1.02fr 1fr 1fr;grid-template-rows:315px 315px;gap:6px}
.h-mosaic a{display:block;background:#f0f0f0;overflow:hidden;position:relative}
.h-mosaic a img{width:100%;height:100%;object-fit:cover}
.h-mosaic .big{grid-column:1;grid-row:1/3}
.h-mosaic .wide{grid-column:2/4;grid-row:1}
.h-mosaic .s1{grid-column:2;grid-row:2}
.h-mosaic .s2{grid-column:3;grid-row:2}
.h-mosaic span{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;font-size:13px;padding:5px 12px}

/* ── 通用板块标题 ── */
.h-sec{padding:44px 0}
.h-sec.alt{background:var(--bg)}
.h-ttl{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:12px}
.h-ttl h2{font-size:26px;color:#333;font-weight:400}
.h-ttl em{font-style:normal;font-size:14px;color:var(--ink2);margin-left:10px;letter-spacing:1px}
.h-ttl .more{color:var(--orered);font-size:14px}

/* ── 商品卡 ── */
.h-goods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.h-goods .g{background:#fff;border:1px solid var(--line);transition:.2s}
.h-goods .g:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-2px)}
.h-goods .ph{height:210px;background:#fafafa;overflow:hidden;display:flex;align-items:center;justify-content:center}
.h-goods .ph img{width:100%;height:100%;object-fit:cover}
.h-goods .tx{padding:12px 14px 16px}
.h-goods .tag{font-size:12px;color:var(--ink2)}
.h-goods h3{font-size:15px;color:#333;font-weight:400;margin:3px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-goods .px{color:var(--orered);font-size:15px;font-weight:700}
.h-goods .px s{color:#bbb;font-weight:400;font-size:13px;margin-left:6px}

/* ── 9 全宽环境轮播 ── */
.h-env{position:relative;background:#eef1f6 url(../img/p_bg6.png) center/cover no-repeat;padding:38px 3.5vw}
.h-env .ph{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:20px;align-items:center}
.h-env .ph img{display:block;width:100%;height:auto;object-fit:contain;
  box-shadow:0 12px 30px rgba(0,0,0,.20);border-radius:4px}
.h-env .ph img:nth-child(2){box-shadow:0 16px 38px rgba(0,0,0,.26)}

/* ── 11 公司简介 ── */
.h-about{background:url(../img/title_bg.jpg) center/cover no-repeat;padding:56px 0;color:#fff}
.h-about h2{font-size:26px;font-weight:400;margin-bottom:16px}
.h-about p{font-size:15px;line-height:2;color:rgba(255,255,255,.92);margin-bottom:12px}
.h-about .more{display:inline-block;margin-top:8px;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}

/* ── 12 为什么选择我们 ── */
.h-why .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.h-why h2{font-size:26px;color:#333;font-weight:400;margin-bottom:14px}
.h-why p{font-size:14.5px;color:var(--ink);line-height:1.95}
.h-why ul{list-style:none}
.h-why li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px;color:#333}
.h-why li img{width:20px;height:20px;margin-top:2px}

/* ── 13 场景图 ── */
.h-pics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.h-pics img{width:100%;height:210px;object-fit:cover}

/* ── 14 新闻 ── */
.h-news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.h-news .n{border:1px solid var(--line);background:#fff}
.h-news .n:hover{box-shadow:0 6px 18px rgba(0,0,0,.09)}
.h-news .ph{height:190px;overflow:hidden;background:#f5f5f5}
.h-news .ph img{width:100%;height:100%;object-fit:cover}
.h-news .tx{padding:14px 16px 18px}
.h-news .d{font-size:12px;color:var(--ink2)}
.h-news h3{font-size:16px;color:#333;font-weight:400;margin:6px 0 8px;line-height:1.5}
.h-news p{font-size:13.5px;color:var(--ink2);line-height:1.7}

/* ── 16 页脚 ── */
.h-foot{background:#2b2b2b;color:#b9b9b9;font-size:13.5px;padding:36px 0 20px}
.h-foot .cols{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.3fr;gap:30px}
.h-foot h4{color:#fff;font-size:16px;font-weight:400;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #3d3d3d}
.h-foot li{list-style:none;padding:4px 0}
.h-foot a:hover{color:var(--orange)}
.h-foot .social{display:flex;gap:10px;margin-top:12px}
.h-foot .social img{width:30px;height:30px;background:#fff;padding:3px;border-radius:3px}
.h-foot .copy{border-top:1px solid #3d3d3d;margin-top:24px;padding-top:14px;text-align:center;color:#8d8d8d}
.h-foot .copy a{color:#b9b9b9}

/* ── 悬浮留言 ── */
.h-float{position:fixed;right:0;top:36%;z-index:9}
.h-float a{display:block;background:var(--orange);color:#fff;writing-mode:vertical-rl;letter-spacing:3px;
  padding:16px 10px;font-size:14px;border-radius:4px 0 0 4px}
.h-float a:hover{background:var(--orered)}

/* ── 手机端 ── */
@media (max-width:900px){
  .h-logo img.mk{height:44px}
  .h-right{gap:10px}
  .h-tel b{font-size:16px}
  .h-qr{display:none}
  .h-nav a{padding:12px 14px;font-size:14px}
  .h-search .wrap{height:auto;padding:8px 0;flex-wrap:wrap}
  .h-cat,.h-msg{height:38px;line-height:38px;font-size:14px;padding:0 14px}
  .h-search form{margin:8px 0 0;order:3;flex:1 0 100%}
  .h-banner{height:230px}
  .h-catmenu{display:none}
  .h-cap{top:60px}
  .h-cap h1{font-size:22px}
  .h-cap p{font-size:13px;margin-bottom:12px}
  .h-cap .go{padding:8px 22px;font-size:14px}
  .h-cap .en{font-size:12px}
  .h-assure .wrap,.h-goods,.h-pics,.h-news,.h-foot .cols{grid-template-columns:1fr 1fr;gap:14px}
  .h-mosaic .wrap{grid-template-columns:1fr;grid-template-rows:auto}
  .h-mosaic .big{grid-row:auto;height:220px}
  .h-mosaic .wide,.h-mosaic .s1{grid-column:auto;grid-row:auto;height:160px}
  .h-env{padding:14px 10px}
  .h-env .ph{grid-template-columns:1fr 1fr;gap:8px}
  .h-env .ph img:nth-child(3){display:none}
  .h-why .wrap{grid-template-columns:1fr;gap:20px}
  .h-sec{padding:26px 0}
  .h-ttl h2{font-size:20px}
  .h-goods .ph,.h-news .ph,.h-pics img{height:150px}
}
@media (max-width:560px){
  .h-assure .wrap,.h-goods,.h-pics,.h-news,.h-foot .cols{grid-template-columns:1fr}
}

/* ── 右侧悬浮客服条（微信二维码 / QQ / 电话 / 留言 / 回顶部） ── */
.h-side{position:fixed;right:14px;bottom:16%;z-index:99;display:flex;flex-direction:column;gap:6px;cursor:grab;touch-action:none;user-select:none}
.h-side a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62px;height:60px;background:#fff;border:1px solid var(--line);border-radius:6px;color:#666;
  font-size:11px;line-height:1.25;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:.18s;text-decoration:none}
.h-side a img{width:26px;height:26px;object-fit:contain;margin-bottom:3px}
.h-side a:hover{background:var(--orered);color:#fff;border-color:var(--orered)}
.h-side a:hover img{filter:brightness(0) invert(1)}
.h-side a.qq:hover{background:#12b7f5;border-color:#12b7f5}
.h-side a.wx:hover{background:#3cb034;border-color:#3cb034}
.h-side .qr{position:absolute;right:74px;top:50%;transform:translateY(-50%);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);
  display:none;text-align:center;width:176px}
.h-side .qr img{width:150px;height:150px;margin:0 auto 6px}
.h-side .qr b{font-size:12px;color:#333;font-weight:400;display:block}
.h-side .qr b i{font-style:normal;color:var(--orered)}
.h-side a.wx:hover .qr,.h-side a.wx.on .qr{display:block}
@media (max-width:820px){
  .h-side{right:8px;bottom:10%;gap:5px}
  .h-side a{width:52px;height:52px;font-size:10px;border-radius:5px}
  .h-side a img{width:22px;height:22px;margin-bottom:2px}
  .h-side .qr{right:62px;width:158px}
  .h-side .qr img{width:132px;height:132px}
}

/* 拖动状态 */
.h-side.drag{cursor:grabbing;opacity:.92;transition:none}
.h-side.drag a{pointer-events:none}
.h-side .drag-hint{position:absolute;left:-8px;top:-22px;background:rgba(0,0,0,.62);color:#fff;
  font-size:11px;line-height:1;padding:5px 8px;border-radius:10px;white-space:nowrap;opacity:0;transition:.2s;pointer-events:none}
.h-side:hover .drag-hint{opacity:1}

/* 面板里的复制按钮 + QQ 号面板 */
.h-side .cp{display:block;margin:8px auto 2px;width:100%;text-align:center;background:var(--orered);
  color:#fff;font-size:12px;line-height:1;padding:8px 6px;border-radius:14px;text-decoration:none}
.h-side .cp:hover{background:#e2371d;color:#fff}
.h-side .qqpanel{width:186px}
.h-side .qqpanel b{margin-bottom:2px}
.h-side a.qq:hover .qr,.h-side a.qq.on .qr{display:block}

/* ── 2026-10-06 修复：二维码看不到 ──
   ① 侧边条被拖到屏幕左半边时，二维码改往右弹（原来固定往左弹，会跑到屏幕外）
   ② 手机上改成居中弹出的大面板，不依赖侧边条位置，一定看得见 */
.h-side.lj-flip .qr{right:auto;left:74px}
@media (max-width:820px){
  .h-side .qr{position:fixed;left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:min(82vw,300px);padding:16px;border-radius:12px;z-index:9999;
    box-shadow:0 14px 44px rgba(0,0,0,.4);border:1px solid #eee}
  .h-side .qr img{width:200px;height:200px}
  .h-side .qr b{font-size:14px;line-height:1.6}
}
/* ── 2026-10-06 页头手机上换行修复（原来公司名被硬拆成两行、电话也断行） ── */
@media (max-width:820px){
  .h-logo .name b{font-size:17px;letter-spacing:0;white-space:nowrap}
  .h-logo .name span{font-size:9.5px;letter-spacing:0;white-space:nowrap;display:block}
  .h-tel b{white-space:nowrap}
}
@media (max-width:560px){
  .h-top .wrap{flex-wrap:wrap;row-gap:8px;padding:10px 0}
  .h-logo{width:100%;gap:10px}
  .h-logo img.mk{height:38px}
  .h-logo .name b{font-size:15px}
  .h-right{width:100%;justify-content:space-between;gap:6px;border-top:1px solid var(--line);padding-top:8px}
  .h-tel{text-align:left}
  .h-tel span{font-size:10.5px}
  .h-tel b{font-size:14px}
}

/* ── 2026-10-07 banner 只留一句主文案，标题下留出按钮间距 ── */
.h-cap h1{margin:10px 0 26px}
/* ── 2026-10-07 信任条（banner 下方一行小字 · 素雅） ── */
.h-trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h-trust .wrap{padding:14px 0;text-align:center}
.h-trust p{font-size:14.5px;color:#555;letter-spacing:.4px;line-height:1.7}
.h-trust b{color:#333}
/* ── 2026-10-07 为什么选择我们 · 客户最想看的三句 ── */
.h-quotes{margin-top:18px;display:grid;gap:8px}
.h-quotes q{display:block;background:#fff;border-left:3px solid var(--orered);padding:9px 14px;
  font-size:14.5px;color:#333;quotes:"\201C" "\201D"}
.h-quotes q:before{color:var(--orered);font-weight:700}
.h-quotes q:after{color:var(--orered);font-weight:700}
@media (max-width:900px){
  .h-cap h1{font-size:20px;line-height:1.45}
  .h-cap h1{margin:8px 0 16px}
  .h-trust .wrap{padding:11px 4px}
  .h-trust p{font-size:12.5px;letter-spacing:0}
}