/* ========================================================================== KOCAI PRINT · profile.kocaiprint.com 共享样式：设计变量、通用元件、获取报价面板、图片灯箱、折叠区桌面版 pc.html 与手机版 m.html 共用这一份；各自的版面样式仍写在各自文件里。桌面页，手机页。 ========================================================================== */ :root{ --c:#003E8D; --m:#E60012; --y:#FFF100; --k:#000000; --gray:#8a8a8a; --line:#e3e3e3; --bg:#f2f2f2; --vol2:#efedE8; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ font-family:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--k); -webkit-font-smoothing:antialiased; } img{max-width:100%;} /* ---------- 四色标记 ---------- */ .dots4{display:inline-flex;gap:7px;align-items:center;} .dots4 i{width:9px;height:9px;border-radius:50%;display:block;} .dots4 i:nth-child(1){background:var(--c);} .dots4 i:nth-child(2){background:var(--m);} .dots4 i:nth-child(3){background:var(--y);} .dots4 i:nth-child(4){background:var(--k);} .band4{display:flex;height:5px;} .band4 i{flex:1;} .band4 i:nth-child(1){background:var(--c);} .band4 i:nth-child(2){background:var(--m);} .band4 i:nth-child(3){background:var(--y);} .band4 i:nth-child(4){background:var(--k);} .halftone-c{background-image:radial-gradient(var(--c) 2.4px, transparent 2.9px);background-size:14px 14px;} .halftone-m{background-image:radial-gradient(var(--m) 2.4px, transparent 2.9px);background-size:14px 14px;} .halftone-y{background-image:radial-gradient(var(--y) 2.4px, transparent 2.9px);background-size:14px 14px;} .halftone-k{background-image:radial-gradient(var(--k) 2.4px, transparent 2.9px);background-size:14px 14px;} .fade-l{-webkit-mask-image:linear-gradient(to left,#000 30%,transparent);mask-image:linear-gradient(to left,#000 30%,transparent);} .fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent);} /* ---------- 章节标题：一个序号 + 一个中文标题 ---------- */ .seclabel{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--k);} .seclabel .no{font-size:12px;font-weight:900;letter-spacing:2px;color:var(--gray); font-variant-numeric:tabular-nums;} .seclabel .zh{font-weight:800;letter-spacing:4px;} .seclabel .dots4{margin-left:auto;} .subhd{font-weight:800;letter-spacing:3px;display:flex;align-items:center;gap:10px;} .subhd::before{content:"";width:16px;height:3px;background:var(--k);flex-shrink:0;} /* ---------- 图片 ---------- */ .photo{position:relative;overflow:hidden;background:#f5f5f5;} .photo img{width:100%;height:100%;object-fit:cover;display:block;} .photo .cap{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.94); font-size:10px;letter-spacing:2px;color:#333;padding:6px 13px;font-weight:700;} img[data-lb]{cursor:zoom-in;} /* ---------- 标签 ---------- */ .deliv{display:flex;flex-wrap:wrap;gap:5px;} .deliv span{font-size:10.5px;letter-spacing:.4px;border:1px solid var(--line); padding:3px 8px;color:#444;background:#fafafa;} /* ---------- 折叠区（查看全部设备 / 完整流程 / 更多联系方式） ---------- */ .fold{border-top:1px solid var(--line);} .fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px; min-height:46px;font-size:13px;font-weight:800;letter-spacing:2.5px;color:var(--k); -webkit-tap-highlight-color:rgba(0,0,0,.06);} .fold>summary::-webkit-details-marker{display:none;} .fold>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--k); border-bottom:2px solid var(--k);transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;margin-left:auto;} .fold[open]>summary::after{transform:rotate(-135deg) translateY(-2px);} .fold>summary:focus-visible{outline:2px solid var(--c);outline-offset:2px;} .fold .fold-in{padding-bottom:18px;} @media (prefers-reduced-motion:reduce){.fold>summary::after{transition:none;}} /* ---------- 通用按钮 ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px; font-family:inherit;font-weight:800;letter-spacing:3px;cursor:pointer; text-decoration:none;border:2px solid var(--k);} .btn-solid{background:var(--k);color:#fff;} .btn-solid:hover{background:#fff;color:var(--k);} .btn-line{background:transparent;color:var(--k);} .btn-line:hover{background:var(--k);color:#fff;} .btn:focus-visible{outline:3px solid var(--c);outline-offset:3px;} a:focus-visible,button:focus-visible{outline:2px solid var(--c);outline-offset:2px;} /* ========================================================================== 获取报价面板顺序：企业微信二维码 → 总部邮箱 → 总部电话 → 更多联系方式 → 日本项目联系 → 报价九项 ========================================================================== */ .ctp{position:fixed;inset:0;z-index:200;display:none;zoom:var(--unzoom,1);} .ctp.open{display:block;} .ctp-mask{position:absolute;inset:0;background:rgba(0,0,0,.55);animation:kfade .18s ease;} .ctp-box{position:absolute;background:#fff;border:2px solid var(--k);overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.3);animation:krise .2s ease;} .is-pc .ctp-box{right:24px;bottom:24px;width:460px;max-height:calc(100vh - 48px);padding:0 26px 22px;} .is-m .ctp{zoom:1;} .is-m .ctp-box{left:0;right:0;bottom:0;width:auto;max-height:88vh;border-width:0; padding:0 0 calc(14px + env(safe-area-inset-bottom));} @keyframes kfade{from{opacity:0}to{opacity:1}} @keyframes krise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.ctp-mask,.ctp-box{animation:none;}} .ctp-box .band4{margin:0 -26px 18px;} .is-m .ctp-box .band4{margin:0;} .ctp-hd{display:flex;align-items:center;gap:12px;margin-bottom:16px;} .is-m .ctp-hd{padding:14px 18px 12px;margin-bottom:0;} .ctp-hd .t{font-size:19px;font-weight:900;letter-spacing:4px;} .ctp-x{margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--line); background:#fff;cursor:pointer;font-size:18px;line-height:1;color:#555;font-family:inherit;} .ctp-x:hover{background:var(--k);color:#fff;border-color:var(--k);} .ctp-qr{display:flex;gap:15px;align-items:center;border:1px solid var(--line);padding:13px;} .is-m .ctp-qr{margin:0 18px;} .ctp-qr img{width:126px;height:126px;object-fit:contain;background:#fff;flex-shrink:0;} .ctp-qr .qt{font-size:12.5px;font-weight:800;letter-spacing:1.5px;line-height:1.8;} .ctp-qr .qs{font-size:11px;line-height:1.8;color:#555;letter-spacing:.6px;margin-top:6px;} .ctp-list{margin-top:14px;} .is-m .ctp-list{margin:14px 18px 0;} .ctp-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f0f0;} .ctp-row .l{width:38px;flex-shrink:0;font-size:9.5px;letter-spacing:1.5px;color:var(--gray);} .ctp-row a{flex:1;min-width:0;color:var(--k);text-decoration:none;font-size:14px; letter-spacing:.6px;font-weight:700;min-height:46px;display:flex;align-items:center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; -webkit-tap-highlight-color:rgba(0,0,0,.06);} .ctp-row a:hover,.ctp-row a:active{background:#f6f6f6;} .copy{flex-shrink:0;border:1px solid var(--line);background:#fafafa;cursor:pointer; font-family:inherit;font-size:10.5px;letter-spacing:1.5px;color:#555; min-height:44px;min-width:56px;} .copy:hover{background:var(--k);color:#fff;border-color:var(--k);} .copy.done{background:var(--k);color:#fff;border-color:var(--k);} .ctp-box .fold{margin-top:12px;} .is-m .ctp-box .fold{margin:12px 18px 0;} .ctp-box .fold>summary{font-size:12px;letter-spacing:2px;} .ctp-who{font-size:11.5px;font-weight:800;letter-spacing:1px;color:#333;margin:4px 0 2px;} .ctp-tip{font-size:11px;line-height:1.8;color:#666;letter-spacing:.4px;margin:2px 0 10px;} .ctp-nine{counter-reset:q;list-style:none;display:grid;grid-template-columns:1fr 1fr; gap:6px 18px;padding-bottom:16px;} .ctp-nine.ctp-four{grid-template-columns:1fr;} .ctp-nine li{counter-increment:q;font-size:11.5px;letter-spacing:.4px;color:#333; display:flex;gap:8px;line-height:1.75;} .ctp-nine li::before{content:counter(q,decimal-leading-zero);font-weight:900; font-size:10.5px;color:var(--m);flex-shrink:0;} /* ========================================================================== 图片灯箱 ========================================================================== */ .lb{position:fixed;inset:0;z-index:300;display:none;background:rgba(12,12,12,.94);zoom:var(--unzoom,1);} .is-m .lb{zoom:1;background:rgba(12,12,12,.95);} .lb.open{display:flex;align-items:center;justify-content:center;} .lb-fig{position:relative;max-width:94vw;display:flex;flex-direction:column; align-items:center;gap:13px;padding:0 12px;} .lb-fig img{max-width:92vw;max-height:72vh;object-fit:contain;display:block;background:#1a1a1a;} .is-m .lb-fig img{max-height:62vh;} .lb-cap{max-width:min(860px,90vw);text-align:center;color:#eee;} .lb-cap .t{font-size:14px;font-weight:800;letter-spacing:2.5px;} .lb-cap .d{font-size:11.5px;line-height:1.9;color:#b6b6b6;margin-top:7px;letter-spacing:.4px;} .lb-cap .n{font-size:9.5px;letter-spacing:2px;color:#7d7d7d;margin-top:8px;font-variant-numeric:tabular-nums;} .lb button{position:fixed;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.32); color:#fff;cursor:pointer;font-family:inherit;font-size:19px;line-height:1; width:46px;height:46px;display:flex;align-items:center;justify-content:center;} .lb button:hover{background:#fff;color:#111;} .lb button:focus-visible{outline:2px solid #fff;outline-offset:3px;} .lb .lb-x{top:calc(20px + env(safe-area-inset-top));right:18px;} .lb .lb-p{left:14px;top:50%;transform:translateY(-50%);} .lb .lb-n{right:14px;top:50%;transform:translateY(-50%);} @media print{.ctp,.lb,.ui-fixed,.mbar,.sheet{display:none !important;}}