/* GAI³ 样板 —— 参考 jland.com.my 的呈现方式（Montserrat、粗标题、整条色带、圆角描边钮、大照片） 配色照顾客 PDF 第 15 页：Navy #102B4E · Blue #1765A3 · Ice blue #DDECF5 · Teal #258D81 · White */ @font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/montserrat-latin.woff2) format("woff2")} /* 顾客 PDF 写 Inter、口头说照 jland（Montserrat）—— 预设 Montserrat，网址加 ?font=inter 可以对照，?font=montserrat 换回 */ @font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format("woff2")} html.f-inter{--ff:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif} :root{ --navy:#102B4E;--blue:#1765A3;--ice:#DDECF5;--ice2:#F1F6FA;--teal:#258D81;--teal-d:#1C6F66;--teal-l:#8FD6CC; --ink:#102B4E;--body:#3A4F66;--muted:#566B82;--line:#D6E1EA;--bg:#FAFBFC; --hh:64px;--pad:20px;--max:1180px; --ff:Montserrat,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 20px)} body{margin:0;font-family:var(--ff);font-size:16px;line-height:1.6;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased} body.lang-en .lang-ms-only,body.lang-en .lang-zh-only,body.lang-ms .lang-en-only,body.lang-ms .lang-zh-only,body.lang-zh .lang-en-only,body.lang-zh .lang-ms-only{display:none!important} /* 中文：英文字母照用 Montserrat，中文字用思源黑体（只有切到中文才下载），再不行就用装置自己的黑体 */ body.lang-zh{--ff:Montserrat,"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC",sans-serif;line-height:1.8;line-break:strict} html.f-inter body.lang-zh{--ff:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC",sans-serif} body.lang-zh h1,body.lang-zh h2,body.lang-zh h3,body.lang-zh h4{letter-spacing:0;line-height:1.3} body.lang-zh .hero h1{line-height:1.22} body.lang-zh .lead,body.lang-zh .vm p,body.lang-zh .story p{line-height:1.75} body.lang-zh .eb{letter-spacing:.22em} .ph,.ph0{display:inline-block} .sp{word-spacing:.72em} body.lang-zh p,body.lang-zh li,body.lang-zh dd{text-wrap:pretty} body.lang-zh .mock h4{text-transform:none;letter-spacing:.08em} img,svg{display:block;max-width:100%} img{height:auto} a{color:inherit} h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:700;line-height:1.08;letter-spacing:-.012em;text-wrap:balance} p{margin:0 0 1em} p:last-child{margin-bottom:0} ul,ol{margin:0;padding:0;list-style:none} button{font-family:inherit} :focus-visible{outline:3px solid var(--teal);outline-offset:3px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} /* ── 按钮（jland 的圆角描边钮） ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 26px;border-radius:999px;border:1px solid currentColor;background:transparent;color:var(--ink);font:600 15px/1.2 var(--ff);text-decoration:none;text-align:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s} .btn svg{width:16px;height:16px;flex:none;transition:transform .2s} .btn:hover svg{transform:translateX(3px)} .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn-fill{background:var(--blue);border-color:var(--blue);color:#fff} .btn-fill:hover{background:var(--navy);border-color:var(--navy)} .btn-white{background:#fff;border-color:#fff;color:var(--ink)} .btn-white:hover{background:var(--ice);border-color:var(--ice);color:var(--ink)} .btn-w{color:#fff} .btn-w:hover{background:#fff;border-color:#fff;color:var(--ink)} .btns{display:flex;flex-wrap:wrap;gap:12px} .more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:15px;color:var(--blue);text-decoration:none} .more svg{width:16px;height:16px;transition:transform .2s} .more:hover svg{transform:translateX(4px)} .more:hover{text-decoration:underline;text-underline-offset:4px} .on-dark .more{color:#fff} /* ── 页头 ── */ .hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)} .hd-in{display:flex;align-items:center;gap:16px;height:var(--hh)} .logo{font-weight:800;font-size:27px;letter-spacing:-.02em;color:var(--navy);text-decoration:none;line-height:1;display:inline-flex;align-items:center;min-height:44px} .logo sup{font-size:.5em;font-weight:800;margin-left:1px;position:relative;top:-.42em;vertical-align:baseline} .nav{display:none} .hd-r{margin-left:auto;display:flex;align-items:center;gap:8px} /* 语言：一颗钮显示现在的语言，按了往下开清单（之后翻译外挂加到 10 种语言也放得下） */ .lang{position:relative} .lang-t{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:700 12.5px/1 var(--ff);letter-spacing:.06em;cursor:pointer;transition:border-color .2s} .lang-t:hover,.lang.on .lang-t{border-color:var(--blue)} .lang-t svg{flex:none} .lang-g{width:16px;height:16px;color:var(--teal-d)} .lang-c{width:10px;height:10px;transition:transform .2s} .lang.on .lang-c{transform:rotate(180deg)} body.lang-zh .lang-cur{letter-spacing:.02em;font-size:13px} .lang-p{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:216px;max-height:min(70vh,440px);overflow-y:auto;padding:6px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--teal);box-shadow:0 18px 40px -18px rgba(16,43,78,.35);visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s} .lang.on .lang-p{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s} .lang-p button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:4px;background:transparent;color:var(--body);font:500 14px/1.2 var(--ff);text-align:left;cursor:pointer} .lang-p button>b{flex:0 0 38px;font-weight:700;font-size:12.5px;letter-spacing:.06em;color:var(--ink)} .lang-p button:hover{background:var(--ice2)} .lang-p button[aria-pressed=true]{background:var(--ice);color:var(--ink)} .lang-p button[aria-pressed=true]::after{content:"";margin-left:auto;width:6px;height:11px;border:solid var(--teal-d);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)} .lang-p button[data-lang=zh]{display:none} html.zh-on .lang-p button[data-lang=zh]{display:flex} .lang-p button[data-lang=zh]>b{letter-spacing:.02em;font-size:13px} .hd-cta{display:none} .menubtn{width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center} .menubtn i{display:block;width:22px;height:2px;background:var(--navy);position:relative;transition:background .2s} .menubtn i::before,.menubtn i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--navy);transition:transform .2s,top .2s} .menubtn i::before{top:-7px}.menubtn i::after{top:7px} .menubtn[aria-expanded=true] i{background:transparent} .menubtn[aria-expanded=true] i::before{top:0;transform:rotate(45deg)} .menubtn[aria-expanded=true] i::after{top:0;transform:rotate(-45deg)} .drawer{position:fixed;inset:var(--hh) 0 0 0;z-index:49;background:#fff;overflow-y:auto;padding:8px var(--pad) 32px;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s} .drawer.on{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s} .drawer a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)} .drawer a.sub{min-height:46px;padding-left:16px;font-weight:500;font-size:15px;letter-spacing:0;text-transform:none;color:var(--body)} .drawer .btn{margin-top:22px;width:100%;border-bottom:1px solid var(--blue);color:#fff;letter-spacing:.04em} body.menu-on{overflow:hidden} /* 方案各页共用的第二排导览（jland 内页那一排） */ .subnav{background:#fff;border-bottom:1px solid var(--line)} .subnav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .subnav-in::-webkit-scrollbar{display:none} .subnav a{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font-size:14.5px;font-weight:500;color:var(--body);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap} .subnav a:first-child{padding-left:0} .subnav a[aria-current]{color:var(--teal-d);border-bottom-color:var(--teal);font-weight:600} .subnav a:hover{color:var(--ink)} /* ── 区块共用 ── */ .sec{padding:60px 0} .sec-white{background:#fff} .sec-ice{background:var(--ice2)} .sec-navy{background:var(--navy);color:#DCE6F0} .sec-navy h2,.sec-navy h3,.on-dark h2,.on-dark h3{color:#fff} .eb{margin:0 0 14px;font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d)} .on-dark .eb,.sec-navy .eb,.band .eb{color:var(--teal-l)} .h1{font-size:clamp(31px,6.6vw,52px)} .h2{font-size:clamp(27px,5.2vw,40px)} .h3{font-size:clamp(19px,2.6vw,22px);line-height:1.25;letter-spacing:-.005em} .hl{color:var(--teal)} .lead{font-size:clamp(17px,2.2vw,20px);line-height:1.5;font-weight:600;color:var(--ink)} .on-dark .lead,.sec-navy .lead{color:#fff} .txt{max-width:720px} .sec-hd{margin-bottom:34px} .sec-hd .h2+p{margin-top:16px;max-width:680px} .sec-ft{margin-top:26px} .note{font-size:13.5px;line-height:1.5;color:var(--muted)} .rv{opacity:1} html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} html.js .rv.in{opacity:1;transform:none} /* ── 首屏 ── */ .hero{position:relative;display:flex;align-items:center;min-height:560px;min-height:min(84svh,760px);background:var(--navy);color:#fff;overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-2} .hero-bg img{width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(16,43,78,.93) 0%,rgba(16,43,78,.74) 46%,rgba(23,101,163,.30) 100%)} .hero-in{position:relative;z-index:1;padding-block:64px 84px} .hero h1{color:#fff;font-size:clamp(34px,8.4vw,66px);line-height:1.04;max-width:13em} .hero-sub{display:flex;flex-wrap:wrap;gap:4px 26px;margin:20px 0 30px;font-size:clamp(15.5px,2.2vw,19px);font-weight:500;color:#E3ECF5} .hero .eb{color:#BFE6E0} /* ── 谁是我们（整条色带 + 斜切照片，jland 的做法） ── */ .band{background:var(--navy);color:#DCE6F0;overflow:hidden} .band-in{display:grid;gap:0} .band-txt{padding:60px 0 44px} .band-txt .h2{color:#fff;margin-bottom:20px} .band-txt p{max-width:600px} .band-txt .btns{margin-top:26px} .band-img{margin-inline:calc(var(--pad) * -1)} .band-img img{width:100%;aspect-ratio:16/10;object-fit:cover} /* ── 五个方案卡片 ── */ .cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)} .cards::-webkit-scrollbar{display:none} .card{flex:0 0 min(80vw,330px);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--body);transition:border-color .2s,transform .25s} .card:hover{border-color:var(--blue);transform:translateY(-4px)} .card-img{position:relative;overflow:hidden;background:var(--ice)} .card-img img{width:100%;aspect-ratio:10/7;object-fit:cover;transition:transform .5s} .card:hover .card-img img{transform:scale(1.04)} .card-no{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-weight:700;font-size:13px;letter-spacing:.08em;padding:8px 14px} .card-bd{display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;flex:1} .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)} .card h3{font-size:20px;letter-spacing:.02em;text-transform:uppercase} .card-val{font-size:15px;line-height:1.5} .flowline{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px;font-weight:600;color:var(--ink)} .flowline>span+span::before{content:"/";margin-right:8px;color:#9FB2C4;font-weight:400} .card .more{margin-top:auto;padding-top:6px} /* ── 行业（大照片轮播，jland 首页那种） ── */ .car{position:relative} .car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)} .car-track::-webkit-scrollbar{display:none} .slide{position:relative;flex:0 0 min(84vw,720px);scroll-snap-align:start;display:block;color:#fff;text-decoration:none;overflow:hidden;background:var(--navy)} .slide img{width:100%;aspect-ratio:4/3.4;object-fit:cover;transition:transform .6s} .slide:hover img{transform:scale(1.03)} .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,43,78,0) 30%,rgba(16,43,78,.9) 100%)} .slide-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 18px} .slide-cap h3{color:#fff;font-size:clamp(19px,2.6vw,26px);margin-bottom:6px} .slide-cap p{font-size:14px;line-height:1.45;color:#DCE6F0;margin:0} .car-nav{display:none} .car-btn{width:48px;height:48px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .2s} .car-btn:hover{background:var(--blue)} .car-btn[disabled]{opacity:.3;cursor:default} .car-btn svg{width:20px;height:20px} /* ── 技术（深色 + 顾客 PDF 第 15 页那张图的画法） ── */ .tech{background:linear-gradient(120deg,#0E2646 0%,#102B4E 45%,#17568C 100%);color:#DCE6F0} .tech-grid{display:grid;gap:34px} .levels{display:grid;gap:0;counter-reset:lv} .level{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:baseline;padding:15px 12px;border-top:1px solid rgba(255,255,255,.16)} .level:last-child{border-bottom:1px solid rgba(255,255,255,.16)} .level b{grid-row:span 2;font-size:15px;font-weight:700;color:var(--teal-l);letter-spacing:.06em} .level strong{font-size:16.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff} .level>span{font-size:15px;color:#C6D4E2} /* ── 创新模式 四步 ── */ .four{display:grid;grid-template-columns:1fr 1fr;gap:12px} .four li{position:relative;background:#fff;border:1px solid var(--line);padding:18px 16px 16px} .four b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--teal-d);margin-bottom:8px} .four strong{display:block;font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.15} .four li>span{display:block;margin-top:6px;font-size:14.5px;line-height:1.45} .h2-four{display:flex;flex-wrap:wrap;gap:0 .55em} .split{display:grid;gap:30px;align-items:center} .split-img img{width:100%;aspect-ratio:10/7;object-fit:cover} /* ── 七个市场：国旗 + 状态（已营运 / 洽谈伙伴中 / 目标市场），第一格是图例 ── */ .markets{display:grid;gap:10px} .markets>li{display:flex;align-items:center;gap:14px;min-width:0;min-height:66px;padding:12px 14px;background:#fff;border:1px solid var(--line)} .markets img{width:40px;height:auto;aspect-ratio:4/3;flex:none;border:1px solid rgba(16,43,78,.14)} .markets strong{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:3px} .st{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;line-height:1.3;color:var(--body)} .st>i{display:block;flex:none;width:9px;height:9px;border-radius:50%;position:relative} .st-op>i{background:var(--teal);color:var(--teal)} .st-dev>i{background:var(--blue)} .st-tg>i{border:2px solid #7F93A8} .markets>.mk-key{flex-direction:column;align-items:stretch;justify-content:center;gap:9px;background:var(--navy);border-color:var(--navy)} .mk-key b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-l)} .mk-key .st{color:#fff} .mk-key .st em{margin-left:auto;padding-left:10px;font-style:normal;font-weight:700} .mk-key .st-op>i{background:var(--teal-l);color:var(--teal-l)} .mk-key .st-dev>i{background:#7FB6E6} .mk-key .st-tg>i{border-color:#C6D4E2} /* ── 永续 ESG ── */ .esg{position:relative;color:#fff;background:var(--navy);isolation:isolate;overflow:hidden} .esg-bg{position:absolute;inset:0;z-index:-2} .esg-bg img{width:100%;height:100%;object-fit:cover} .esg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,43,78,.82) 0%,rgba(16,43,78,.42) 48%,rgba(16,43,78,.30) 100%)} .esg .h2{color:#fff} .pillars{display:grid;gap:12px} .pillar{background:rgba(255,255,255,.97);color:var(--body);padding:22px 20px;border-top:4px solid var(--teal)} .pillar b{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:8px} .pillar p{font-size:15px;line-height:1.55} /* ── 资讯分类 ── */ .topics{border-top:1px solid var(--line)} .topics li{display:grid;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line)} .topics strong{font-size:17px;font-weight:700;color:var(--ink)} .topics li>span{font-size:15px} /* ── 询问表格 ── */ .enq{background:var(--ice2)} .enq-grid{display:grid;gap:30px} .enq-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .chip{display:inline-flex;align-items:center;min-height:46px;padding:8px 18px;border-radius:999px;border:1px solid var(--navy);background:transparent;color:var(--ink);font:600 14.5px/1.2 var(--ff);cursor:pointer;transition:background .2s,color .2s} .chip[aria-pressed=true],.chip:hover{background:var(--navy);color:#fff} .contact{display:grid;gap:2px;margin-top:22px} .contact a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink);text-decoration:none;overflow-wrap:anywhere} .contact a:hover{color:var(--blue)} .contact svg{flex:none;width:22px;height:22px;color:var(--teal-d)} .ft .contact{margin-top:14px} .ft .contact a{color:#fff;font-weight:500;font-size:15px} .ft .contact a:hover{color:var(--teal-l)} .ft .contact svg{color:var(--teal-l)} .form{background:#fff;border:1px solid var(--line);padding:22px 18px 24px} .fg{display:grid;gap:14px} .f label,.f .lab{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px} .f em{font-style:normal;color:#B3261E} .f input,.f select,.f textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid #B9C8D6;border-radius:4px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--ff)} .f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23102B4E' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px} .f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)} .f.bad input,.f.bad select{border-color:#B3261E} .f .err{display:none;margin-top:5px;font-size:13px;color:#B3261E} .f.bad .err{display:block} .f label.chk{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:44px;margin:0;font-size:14.5px;font-weight:400;line-height:1.5;color:var(--body);cursor:pointer} .chk input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--blue)} .form .btn{margin-top:6px;width:100%} .done{display:none;background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);padding:24px 20px} .done:focus{outline:none} .done h3{font-size:20px;margin-bottom:10px} .done dl{margin:16px 0;display:grid;gap:6px;font-size:14.5px} .done dl div{display:grid;gap:2px} .done dt{color:var(--muted)} .done dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere} .sent .form{display:none} .sent .done{display:block} /* ── 页脚 ── */ .ft{background:var(--navy);color:#C6D4E2;padding:52px 0 26px;font-size:14.5px} .ft-grid{display:grid;gap:30px} .ft .logo{color:#fff;font-size:30px} .ft-about{max-width:380px;margin-top:10px;line-height:1.6} .ft h4{color:#fff;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} .ft li a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:#C6D4E2;text-decoration:none} .ft li a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px} .ft-bot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:13px;color:#A9BACB} .ft-bot a{display:inline-flex;align-items:center;min-height:44px;color:#C6D4E2} /* ── 浮动钮 ── */ .fab{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;flex-direction:column;gap:10px;align-items:center} .fab a,.fab button{width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(16,43,78,.26);text-decoration:none} .fab .wa{background:#25D366;color:#fff} .fab .wa svg{width:28px;height:28px} .fab .up{width:44px;height:44px;background:#fff;color:var(--navy);border:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} .fab .up.on{opacity:1;visibility:visible} .fab .up svg{width:18px;height:18px} /* ── 内页：页首（浅色带 + 标题，照片压在色带下缘，jland 内页的做法） ── */ .intro{background:var(--ice2);padding:44px 0 0} .intro .h1{max-width:15em} .intro .lead{margin-top:18px;max-width:780px} .intro-pad{padding-bottom:48px} .intro-img{margin-top:34px;background:linear-gradient(180deg,var(--ice2) 0 55%,#fff 55% 100%)} .intro-img img{width:100%;aspect-ratio:900/620;object-fit:cover} .narr{display:flex;flex-wrap:wrap;gap:8px 6px;margin-top:26px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .narr li{display:inline-flex;align-items:center;gap:6px} .narr li+li::before{content:"→";color:var(--teal);font-weight:400} /* 两栏文字（左标题、右内容） */ .duo{display:grid;gap:18px} .duo .h2{font-size:clamp(24px,4.4vw,34px)} .how{display:grid;gap:12px;counter-reset:how} .how li{position:relative;background:#fff;border:1px solid var(--line);padding:52px 18px 18px} .how li::before{counter-increment:how;content:"0" counter(how);position:absolute;left:18px;top:16px;font-weight:700;font-size:20px;color:var(--teal);letter-spacing:.02em} .how strong{display:block;font-size:17px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:4px} .how li>span{font-size:15px;line-height:1.5} .sec-navy .how li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)} .sec-navy .how strong{color:#fff} .sec-navy .how li::before{color:var(--teal-l)} .mods{display:flex;flex-wrap:wrap;gap:10px} .mods li{padding:10px 16px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink)} .uses{display:grid;gap:0;border-top:1px solid var(--line)} .uses li{padding:16px 0;border-bottom:1px solid var(--line)} .uses strong{display:block;font-size:17px;color:var(--ink);font-weight:700} .uses li>span{display:block;margin-top:3px;font-size:15px} .story{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);padding:22px 20px} .story b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-bottom:10px} .story p{font-size:16.5px;line-height:1.55;color:var(--ink);font-weight:500} .stories{display:grid;gap:14px} .num-list{display:grid;gap:0;border-top:1px solid var(--line);counter-reset:nl} .num-list li{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:20px 0;border-bottom:1px solid var(--line)} .num-list li::before{counter-increment:nl;content:"0" counter(nl);grid-row:span 2;font-weight:700;font-size:15px;color:var(--teal-d);letter-spacing:.04em;padding-top:2px} .num-list strong{font-size:18px;font-weight:700;color:var(--ink);line-height:1.3} .num-list li>span{font-size:15.5px;line-height:1.55} .vm{display:grid;gap:28px} .vm b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-l);margin-bottom:12px} .vm p{font-size:clamp(18px,2.4vw,22px);line-height:1.45;font-weight:600;color:#fff} /* 示意画面（报告 / 仪表板 / 账单分析） */ .mock{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(16,43,78,.45)} .mock-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 16px;background:var(--navy);color:#fff;font-weight:700;font-size:14.5px} .mock-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.14);border-radius:999px;padding:5px 10px;color:#E3ECF5} .mock-bd{padding:16px} .kv{display:grid;gap:0} .kv div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px} .kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:700;color:var(--ink);text-align:right} .ok{color:var(--teal-d)} .mock h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;font-weight:700} .mock svg{width:100%;height:auto} .mock .ax{font:500 9px var(--ff);fill:#6B7F94} .tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tiles3 div{background:var(--ice2);padding:12px 10px;border-radius:6px} .tiles3 b{display:block;font-size:22px;color:var(--ink);line-height:1.1} .tiles3 div>span{font-size:12px;line-height:1.3;display:block;margin-top:4px} .alerts li{display:grid;grid-template-columns:10px 1fr;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45} .alerts li::before{content:"";width:8px;height:8px;border-radius:50%;background:#D9822B;transform:translateY(-1px)} .alerts li.b::before{background:var(--blue)} .alerts strong{color:var(--ink)} .mock-ft{padding:12px 16px;background:var(--ice2);font-size:12.5px;color:var(--muted);line-height:1.45} /* 方案总览：一行一个方案 */ .grp{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);margin:0 0 4px} .offers{border-top:2px solid var(--navy);margin-bottom:40px} .offers:last-of-type{margin-bottom:0} .offer{display:grid;gap:10px;padding:24px 0;border-bottom:1px solid var(--line)} .offer-no{font-weight:700;font-size:14px;color:var(--teal-d);letter-spacing:.06em} .offer h3{font-size:22px;letter-spacing:.03em;text-transform:uppercase} .offer h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none} .offer h3 a:hover{color:var(--blue)} .offer p{font-size:16px;margin:0} .offer .btn{justify-self:start;min-height:44px;padding:8px 20px;font-size:14px} .fw{display:grid;gap:14px} .fw li{background:#fff;border:1px solid var(--line);padding:22px 20px} .fw strong{display:block;font-size:19px;color:var(--ink);margin-bottom:6px} /* 行业页：一行一个行业 */ .ind{display:grid;gap:22px;padding:34px 0;border-bottom:1px solid var(--line)} .ind:first-child{padding-top:0} .ind:last-child{border-bottom:0;padding-bottom:0} .ind img{width:100%;aspect-ratio:3/2;object-fit:cover} .ind h2{font-size:clamp(24px,4vw,32px);margin-bottom:16px} .ind dl{margin:0;display:grid;gap:14px} .ind dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-bottom:3px} .ind dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink)} .links{display:flex;flex-wrap:wrap;gap:8px} .links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border:1px solid var(--navy);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink)} .links a:hover{background:var(--navy);color:#fff} /* 技术页：数据 → AI 核心 → 输出 */ .flow{display:grid;gap:12px} .flow-box{background:#fff;border:1px solid var(--line);padding:22px 20px} .flow-box b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);margin-bottom:12px} .flow-box p{font-size:16px;color:var(--ink);font-weight:500;line-height:1.5} .flow-core{background:var(--navy);border-color:var(--navy)} .flow-core b{color:var(--teal-l)} .flow-core p{color:#fff;font-weight:600;font-size:17px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips li{padding:7px 13px;background:var(--ice2);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink)} .lv5{display:grid;gap:10px} .lv5 li{background:#fff;border:1px solid var(--line);padding:18px 18px 16px} .lv5 b{font-size:13px;color:var(--teal-d);letter-spacing:.06em} .lv5 strong{display:block;margin:8px 0 4px;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .lv5 li>span{font-size:15px} .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px} .trust li{padding:14px 14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);font-weight:600;font-size:14.5px;color:#fff;line-height:1.3} /* ───────── 平板 ───────── */ @media (min-width:700px){ :root{--pad:32px;--hh:72px} .sec{padding:84px 0} .sec-hd{margin-bottom:44px} .markets{grid-template-columns:repeat(2,minmax(0,1fr))} .done dl div{grid-template-columns:120px 1fr;gap:10px} .pillars{grid-template-columns:repeat(3,1fr);gap:16px} .topics li{grid-template-columns:230px 1fr;align-items:baseline} .four{grid-template-columns:repeat(4,1fr)} .fg{grid-template-columns:1fr 1fr} .fg .wide{grid-column:1/-1} .form{padding:30px 28px 32px} .form .btn{width:auto;justify-self:start} .ft-grid{grid-template-columns:1.5fr 1fr 1fr} .ft-grid>div:first-child{grid-column:1/-1} .how{grid-template-columns:repeat(3,1fr)} .how.how4{grid-template-columns:repeat(2,1fr)} .how li{padding:62px 20px 22px} .uses{grid-template-columns:1fr 1fr;column-gap:32px} .stories{grid-template-columns:1fr 1fr} .vm{grid-template-columns:1fr 1fr;gap:44px} .fw{grid-template-columns:1fr 1fr} .offer{grid-template-columns:54px 1.1fr 1.3fr;gap:8px 24px;align-items:start} .offer-main{grid-column:2} .offer-side{grid-column:3;display:grid;gap:12px} .offer-act{grid-column:2 / -1} .ind{grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:48px 0} .ind:nth-child(even) .ind-img{order:2} .lv5{grid-template-columns:repeat(3,minmax(0,1fr))} .trust{grid-template-columns:repeat(3,1fr)} .intro{padding-top:64px} .intro-pad{padding-bottom:64px} .intro-img img{aspect-ratio:2000/860} .slide img{aspect-ratio:16/10} .slide-cap{padding:28px 28px} .slide-cap p{font-size:15.5px;max-width:560px} .car-nav{display:flex;gap:10px} .sec-hd.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} .fab{right:22px;bottom:22px} .tiles3 b{font-size:26px} .mock-bd{padding:22px} } /* ───────── 电脑 ───────── */ @media (min-width:1000px){ .sec{padding:104px 0} .band-in{grid-template-columns:1.05fr 1fr;align-items:stretch;gap:0} .band-txt{padding:104px 56px 104px 0} .band-img{margin:0 calc((100vw - min(100vw,var(--max))) / -2 - var(--pad)) 0 0;position:relative;clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)} .band-img img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} .cards{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;overflow:visible;margin:0;padding:0} .card{grid-column:span 2} .card:nth-child(n+4){grid-column:span 3;flex-direction:row} .card:nth-child(n+4) .card-img{flex:0 0 42%} .card:nth-child(n+4) .card-img img{height:100%;aspect-ratio:auto} .tech-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center} .split{grid-template-columns:1fr 1fr;gap:64px} .split.rev .split-img{order:-1} .enq-grid{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start} .enq-side{position:sticky;top:calc(var(--hh) + 32px)} .ft-grid{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px} .ft-grid>div:first-child{grid-column:auto} .duo{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start} .how.how4{grid-template-columns:repeat(4,1fr)} .flow{grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:stretch} .trust{grid-template-columns:repeat(6,1fr)} .lv5{grid-template-columns:repeat(5,minmax(0,1fr))} .lv5 li{padding:20px 16px 18px} .offer{grid-template-columns:64px 1fr 1.2fr auto;align-items:center} .offer-side{grid-column:3} .offer-act{grid-column:4;display:grid;gap:8px;justify-items:start} } @media (min-width:1080px){ :root{--pad:40px;--hh:78px} .markets{grid-template-columns:repeat(4,minmax(0,1fr))} .markets>li{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px} .markets>.mk-key{align-items:stretch;justify-content:flex-start} .markets img{width:46px} .menubtn,.drawer{display:none} .nav{display:flex;align-items:center;gap:6px;margin-left:36px;height:100%} .nav>a,.dd-t{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 13px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--body);border-bottom:2px solid transparent;border-top:2px solid transparent;white-space:nowrap} .nav>a:hover,.dd-t:hover,.dd:focus-within .dd-t,.dd:hover .dd-t{color:var(--ink)} .nav [aria-current]{color:var(--teal-d);border-bottom-color:var(--teal)} .dd{position:relative;height:100%} .dd-t svg{width:10px;height:10px;transition:transform .2s} .dd:hover .dd-t svg,.dd:focus-within .dd-t svg{transform:rotate(180deg)} .dd-p{position:absolute;left:-8px;top:100%;width:340px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--teal);box-shadow:0 18px 40px -18px rgba(16,43,78,.35);padding:8px;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s} .dd:hover .dd-p,.dd:focus-within .dd-p{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s} .dd-p a{display:block;padding:11px 14px;text-decoration:none;border-radius:4px} .dd-p a:hover{background:var(--ice2)} .dd-p strong{display:block;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)} .dd-p a>span{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px} .hd-r{gap:16px} .hd-cta{display:inline-flex;min-height:44px;padding:8px 22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .subnav a{min-height:52px;padding:0 18px} } /* GAI³ 动画（顾客 2026-10-09：「要有动画会动的，不是图片而已」） 会一直动的东西全部挂在 html.js 底下 —— 没有 JS、或网址带 ?noanim（量测、截图用）时整站是静态的。 */ /* ── 进场：一组东西一个接一个 ── */ html.js .stg>*{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),border-color .25s,background-color .3s,box-shadow .3s} html.js .stg:not(.in)>*{opacity:0;transform:translateY(24px)} html.js .stg>*:nth-child(2){transition-delay:.08s} html.js .stg>*:nth-child(3){transition-delay:.16s} html.js .stg>*:nth-child(4){transition-delay:.24s} html.js .stg>*:nth-child(5){transition-delay:.32s} html.js .stg>*:nth-child(6){transition-delay:.4s} html.js .stg>*:nth-child(7){transition-delay:.48s} html.js .stg>*:nth-child(8){transition-delay:.56s} html.js .stg.stg-ok>*{transition-delay:0s} /* 进场完就清掉延迟，不然滑鼠移上去会慢半拍 */ /* ── 页头：往下滑之后加一道影子 ── */ .hd{transition:box-shadow .25s} .hd.sc{box-shadow:0 8px 26px -14px rgba(16,43,78,.42)} /* ── 首屏：照片慢慢移动 + 画布上的能源网络（site.js 的 heroNet）+ 文字进场 ── */ html.js .hero-bg img{animation:drift 38s ease-in-out infinite alternate;will-change:transform} @keyframes drift{from{transform:scale(1.16) translate3d(-1.6%,.6%,0)}to{transform:scale(1.06) translate3d(1.6%,-1%,0)}} .hero-net{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.8;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) 40%,rgba(0,0,0,.55) 70%,#000 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) 40%,rgba(0,0,0,.55) 70%,#000 100%)} html.js .hero .eb,html.js .hero h1,html.js .hero-sub,html.js .hero .btns{animation:rise 1s cubic-bezier(.2,.7,.2,1) both} html.js .hero h1{animation-delay:.14s} html.js .hero-sub{animation-delay:.3s} html.js .hero .btns{animation-delay:.46s} @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes fadeOnly{from{opacity:0}to{opacity:1}} .hero-cue{position:absolute;left:50%;bottom:12px;z-index:1;width:44px;height:48px;margin-left:-22px;display:grid;place-items:center} .hero-cue i{display:block;width:22px;height:36px;border:2px solid rgba(255,255,255,.85);border-radius:12px;position:relative} .hero-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff} html.js .hero-cue i::after{animation:wheel 1.8s ease-in-out infinite} @keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{transform:translateY(0);opacity:0}} /* ── 照片慢慢推近（在画面里才跑，site.js 加 .on） ── */ .kb{overflow:hidden} .kb picture{display:block} html.js .kb img{animation:kb 24s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform} html.js .kb.on img{animation-play-state:running} @keyframes kb{from{transform:scale(1.01)}to{transform:scale(1.12) translate3d(-1.5%,-1.2%,0)}} /* 产品页首图：一道光扫过去 */ .scan,.intro-img .kb{position:relative} html.js .scan::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 42%,rgba(199,242,236,.36) 50%,transparent 58%);transform:translateX(-100%);animation:sweep 5.5s ease-in-out infinite;pointer-events:none} @keyframes sweep{0%,30%{transform:translateX(-100%)}72%,100%{transform:translateX(100%)}} /* 方案页首图左下角：步骤一个个打勾，循环 */ .tick{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;flex-wrap:wrap;gap:8px} .tick li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 8px 20px -10px rgba(16,43,78,.65)} .tick svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--teal);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} html.js .tick li{animation:tickIn 8s infinite both;animation-delay:calc(var(--i) * .9s)} @keyframes tickIn{0%{opacity:0;transform:translateY(12px)}6%,76%{opacity:1;transform:none}84%,100%{opacity:0;transform:translateY(-6px)}} html.js .tick path{stroke-dasharray:14;stroke-dashoffset:14;animation:tickDraw 8s infinite both;animation-delay:calc(var(--i) * .9s)} @keyframes tickDraw{0%,7%{stroke-dashoffset:14}13%,100%{stroke-dashoffset:0}} /* ── 轮播：自己会换张，底下那一格是进度 ── */ .dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;height:8px} .dots i{display:block;width:8px;height:8px;border-radius:4px;background:#B9C8D6;position:relative;overflow:hidden;transition:width .35s ease} .dots i.on{width:34px} .dots i.on::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--navy)} html.js .car.auto .dots i.on::after{transform-origin:0 50%;animation:prog var(--ap,5s) linear both} @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}} html.js .slide.cur img{animation:slidez 7s ease-out both} @keyframes slidez{from{transform:scale(1)}to{transform:scale(1.08)}} /* ── 步骤轮流亮起来（3 步 / 4 步 / 5 步） ── */ .loop3,.loop4,.loop5{--on-bg:#fff;--on-bd:var(--teal);--on-sh:0 12px 28px -14px rgba(16,43,78,.5);--off-bg:#fff;--off-bd:var(--line);--off-sh:0 0 0 0 rgba(16,43,78,0)} .sec-navy .loop3,.sec-navy .loop4{--on-bg:rgba(255,255,255,.17);--on-bd:var(--teal-l);--on-sh:0 0 0 0 rgba(16,43,78,0);--off-bg:rgba(255,255,255,.06);--off-bd:rgba(255,255,255,.18)} .levels.loop5{--on-bg:rgba(255,255,255,.1);--on-bd:rgba(255,255,255,.16);--on-sh:inset 3px 0 0 var(--teal-l);--off-bg:rgba(255,255,255,0);--off-bd:rgba(255,255,255,.16);--off-sh:inset 3px 0 0 rgba(143,214,204,0)} @keyframes on3{0%,33.33%,100%{background-color:var(--off-bg);border-color:var(--off-bd);box-shadow:var(--off-sh)}5%,28%{background-color:var(--on-bg);border-color:var(--on-bd);box-shadow:var(--on-sh)}} @keyframes on4{0%,25%,100%{background-color:var(--off-bg);border-color:var(--off-bd);box-shadow:var(--off-sh)}4%,21%{background-color:var(--on-bg);border-color:var(--on-bd);box-shadow:var(--on-sh)}} @keyframes on5{0%,20%,100%{background-color:var(--off-bg);border-color:var(--off-bd);box-shadow:var(--off-sh)}3%,17%{background-color:var(--on-bg);border-color:var(--on-bd);box-shadow:var(--on-sh)}} html.js .loop3>*{animation:on3 6s infinite} html.js .loop4>*{animation:on4 8s infinite} html.js .loop5>*{animation:on5 10s infinite} html.js .loop3>*:nth-child(2),html.js .loop4>*:nth-child(2),html.js .loop5>*:nth-child(2){animation-delay:2s} html.js .loop3>*:nth-child(3),html.js .loop4>*:nth-child(3),html.js .loop5>*:nth-child(3){animation-delay:4s} html.js .loop4>*:nth-child(4),html.js .loop5>*:nth-child(4){animation-delay:6s} html.js .loop5>*:nth-child(5){animation-delay:8s} /* 文字版：页首那一行叙事、卡片上的步骤 */ @keyframes txt5{0%,20%,100%{color:var(--ink)}3%,17%{color:var(--teal-d)}} @keyframes txt4{0%,25%,100%{color:var(--ink)}4%,21%{color:var(--teal-d)}} html.js .narr li{animation:txt5 10s infinite} html.js .flowline>span{animation:txt4 8s infinite} html.js .narr li:nth-child(2),html.js .flowline>span:nth-child(2){animation-delay:2s} html.js .narr li:nth-child(3),html.js .flowline>span:nth-child(3){animation-delay:4s} html.js .narr li:nth-child(4),html.js .flowline>span:nth-child(4){animation-delay:6s} html.js .narr li:nth-child(5){animation-delay:8s} /* ── 首页技术区：数据 → AI 核心 → 输出，底下的图一直在动 ── */ .viz{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(120deg,#12365F,#1A6C9C);padding:18px 18px 0} .viz-flow{display:flex;align-items:center;gap:6px;margin-bottom:20px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#E3ECF5;white-space:nowrap} .viz-flow>span.core{padding:7px 12px;border-radius:999px;background:#fff;color:var(--navy)} .viz-flow>i{display:block;flex:1;min-width:10px;height:2px;background:rgba(255,255,255,.22);position:relative;overflow:hidden} html.js .viz-flow>i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,#C7F2EC);animation:feed 1.5s linear infinite} html.js .viz-flow>i:last-of-type::after{animation-delay:.75s} @keyframes feed{from{transform:translateX(-110%)}to{transform:translateX(260%)}} .viz-lab{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.14em;color:#BFD3E6} .viz svg{width:100%;height:auto;margin-top:6px} .viz .bar{fill:rgba(255,255,255,.2)} .viz .bg,.viz .bar{transform-origin:50% 100%;transform-box:fill-box} .viz .ln{fill:none;stroke:#C7F2EC;stroke-width:1.6} .viz .pt{fill:#C7F2EC} .viz .trav{fill:#fff;filter:drop-shadow(0 0 5px #C7F2EC)} html.js .viz .bg{transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * .1s)} html.js .viz.in .bg{transform:none} html.js .viz .bar{animation:breathe 5s ease-in-out infinite,barOn 10s infinite;animation-delay:calc(var(--i) * -1.3s),calc(var(--i) * 2s)} @keyframes breathe{50%{transform:scaleY(.86)}} @keyframes barOn{0%,20%,100%{fill:rgba(255,255,255,.2)}3%,17%{fill:rgba(199,242,236,.62)}} html.js .viz .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease .5s} html.js .viz.in .ln{stroke-dashoffset:0} html.js .viz .pt,html.js .viz .trav{opacity:0;transition:opacity .5s ease 1.7s} html.js .viz.in .pt,html.js .viz.in .trav{opacity:1} /* ── 示意画面：柱子长出来、线画出来、异常点一直闪、数字跳上去 ── */ .mock .mb{transform-origin:50% 100%;transform-box:fill-box} .mock .ma{opacity:.1} .mock .mz{opacity:.12} .mock .an-ring{transform-origin:center;transform-box:fill-box;opacity:0} html.js .mock .mb{transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 50ms + .25s)} html.js .mock.in .mb{transform:none} html.js .mock.in .mb.hot{animation:hot 1.6s ease-in-out 1.8s infinite} @keyframes hot{50%{opacity:.45}} html.js .mock .ml{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s ease .3s} html.js .mock.in .ml{stroke-dashoffset:0} html.js .mock .ma,html.js .mock .ml2,html.js .mock .mz{opacity:0;transition:opacity .8s ease .2s} html.js .mock.in .ma{opacity:.1} html.js .mock.in .ml2{opacity:1} html.js .mock.in .mz{opacity:.12} html.js .mock .an{opacity:0;transition:opacity .4s ease 2s} html.js .mock.in .an{opacity:1} html.js .mock.in .an-ring{animation:ping2 1.6s ease-out 2.1s infinite} @keyframes ping2{from{transform:scale(1);opacity:.85}to{transform:scale(3.4);opacity:0}} html.js .mock .kv>div,html.js .mock .alerts li,html.js .mock .tiles3>div{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease} html.js .mock.in .kv>div,html.js .mock.in .alerts li,html.js .mock.in .tiles3>div{opacity:1;transform:none} html.js .mock .kv>div:nth-child(1),html.js .mock .tiles3>div:nth-child(1){transition-delay:.15s} html.js .mock .kv>div:nth-child(2),html.js .mock .tiles3>div:nth-child(2){transition-delay:.3s} html.js .mock .kv>div:nth-child(3),html.js .mock .tiles3>div:nth-child(3){transition-delay:.45s} html.js .mock .kv>div:nth-child(4){transition-delay:.6s} html.js .mock .kv>div:nth-child(5){transition-delay:.75s} html.js .mock .alerts li:nth-child(1){transition-delay:1.5s} html.js .mock .alerts li:nth-child(2){transition-delay:1.75s} html.js .mock .alerts li:nth-child(3){transition-delay:2s} /* ── 技术页：三个方块之间有东西在流 ── */ .flow-arrow{position:relative;display:block;height:36px} .flow-arrow::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line)} .flow-arrow i{position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--teal);opacity:0} html.js .flow-arrow i{animation:dropY 1.8s linear infinite} html.js .flow-arrow i:nth-child(2){animation-delay:.6s} html.js .flow-arrow i:nth-child(3){animation-delay:1.2s} @keyframes dropY{0%{transform:translateY(-4px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(32px);opacity:0}} @keyframes dropX{0%{transform:translateX(-4px);opacity:0}15%,85%{opacity:1}100%{transform:translateX(52px);opacity:0}} @keyframes chipOn{0%,16%,100%{background-color:var(--ice2);color:var(--ink)}4%,11%{background-color:var(--teal-d);color:#fff}} html.js .seq li{animation:chipOn 6.4s infinite;animation-delay:calc(var(--i) * .8s)} html.js .flow-core{animation:core 2.4s ease-out infinite} @keyframes core{from{box-shadow:0 0 0 0 rgba(37,141,129,.55)}to{box-shadow:0 0 0 16px rgba(37,141,129,0)}} /* ── 市场状态：已营运的点一直往外扩，洽谈中的点一明一暗 ── */ html.js .st-op>i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:ping 2s ease-out infinite} @keyframes ping{from{transform:scale(.5);opacity:.9}to{transform:scale(1.8);opacity:0}} html.js .st-dev>i{animation:blink 2.4s ease-in-out infinite} @keyframes blink{50%{opacity:.3}} @media (min-width:700px){ .viz-flow{gap:10px;letter-spacing:.1em} .tick{left:22px;bottom:22px} .tick li{font-size:13.5px;gap:8px;padding:9px 16px 9px 10px} .tick svg{width:20px;height:20px} } @media (min-width:1000px){ .hero-net{opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 26%,#000 58%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 26%,#000 58%)} .flow-arrow{height:auto} .flow-arrow::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0} .flow-arrow i{left:0;top:50%;margin:-3.5px 0 0} html.js .flow-arrow i{animation-name:dropX} } /* 装置设了「减少动态效果」：大幅度的移动关掉，淡入、画线、状态点这些小动作留着 */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.js .hero-bg img,html.js .kb img,html.js .slide.cur img,html.js .scan::after,html.js .hero-cue i::after,html.js .viz .bar{animation:none} html.js .rv,html.js .stg:not(.in)>*,html.js .mock .kv>div,html.js .mock .alerts li,html.js .mock .tiles3>div{transform:none} html.js .hero .eb,html.js .hero h1,html.js .hero-sub,html.js .hero .btns{animation-name:fadeOnly} } /* 中文字体子集（tools/zhfont.js 产生，不要手改）：全站 782 个中文字 */ @font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/noto-sans-sc-a843c396.woff2) format("woff2");unicode-range:U+3001-3002,U+4e00,U+4e03,U+4e09-4e0b,U+4e0d-4e0e,U+4e13-4e14,U+4e1a,U+4e1c,U+4e24,U+4e2a,U+4e2d,U+4e3a-4e3b,U+4e45,U+4e48-4e49,U+4e4b,U+4e5f-4e60,U+4e66,U+4e70,U+4e86,U+4e88,U+4e8b,U+4e8e,U+4e92,U+4e94,U+4e9a-4e9b,U+4ea4,U+4ea7,U+4eab,U+4eba,U+4ec0,U+4ec5,U+4eca,U+4ecd-4ece,U+4ed3-4ed4,U+4ed6,U+4ed8,U+4ee3,U+4ee5,U+4eea,U+4eec,U+4ef6-4ef7,U+4efb,U+4efd,U+4f01,U+4f17-4f1a,U+4f20,U+4f30,U+4f34,U+4f38,U+4f46,U+4f4d-4f4f,U+4f53,U+4f55,U+4f5c,U+4f60,U+4f7f,U+4f8b,U+4f9b,U+4f9d,U+4fdd,U+4fe1,U+4fee,U+5019,U+501f,U+503c,U+5047,U+504f,U+505a,U+50a8,U+50cf,U+5145,U+5148-5149,U+514b,U+514d,U+5165,U+5168,U+516c,U+5171,U+5173-5174,U+5176-5177,U+517b,U+5185,U+518c-518d,U+5199,U+51b2-51b3,U+51b5,U+51b7,U+51c6,U+51cf,U+51e0,U+51fa,U+5206-5207,U+520a,U+5212,U+5217,U+5219,U+521b,U+521d,U+5224,U+5229,U+522b,U+5230,U+5236,U+523a,U+524d,U+529b,U+529e-52a1,U+52a8-52a9,U+52bf,U+52d8,U+5305,U+5316,U+533a-533b,U+5347,U+534f,U+5355-5356,U+5374,U+5382,U+5386,U+5398,U+539f,U+53bb,U+53c2,U+53c8,U+53ca,U+53cc,U+53d1,U+53d6,U+53d8,U+53e5-53e6,U+53ea,U+53ef-53f0,U+53f8,U+5404,U+5408,U+540c-540e,U+5411,U+5417,U+542b-542c,U+542f,U+5438,U+544a,U+5458,U+547d,U+548c,U+54a8,U+54c1,U+54c8,U+54cd,U+54ea,U+552e,U+5546,U+5584,U+5668,U+56de,U+56e0,U+56e2,U+56ed,U+56f4,U+56fd-56fe,U+571f,U+5728,U+5730,U+573a,U+574a,U+5757,U+5761,U+5766,U+578b,U+57ce,U+57d4,U+57df,U+57f9-57fa,U+5806,U+586b,U+5883,U+589e,U+58f0,U+5904,U+5907,U+590d,U+5916,U+591a,U+591f,U+5927,U+5929-592a,U+5934,U+5951,U+5956-5957,U+597d,U+59cb,U+59d3-59d4,U+5a92,U+5b50,U+5b57-5b58,U+5b63,U+5b66,U+5b83,U+5b85,U+5b89,U+5b8c,U+5b97-5b98,U+5b9a,U+5b9e,U+5ba1-5ba2,U+5bb6,U+5bb9,U+5bdf,U+5be8,U+5bf9,U+5bfb-5bfc,U+5c06,U+5c0f,U+5c11,U+5c24,U+5c31,U+5c3a,U+5c40,U+5c42,U+5c4b,U+5c55,U+5c5e,U+5dde,U+5de5,U+5dee,U+5df1-5df2,U+5e02-5e03,U+5e26,U+5e2d-5e2e,U+5e38,U+5e45,U+5e72-5e74,U+5e76,U+5e7f,U+5e8f,U+5e93-5e95,U+5e97,U+5e9c,U+5ea6,U+5ead,U+5ef6,U+5efa,U+5f00,U+5f02,U+5f04,U+5f0f,U+5f15,U+5f20,U+5f31,U+5f3a,U+5f52-5f53,U+5f55,U+5f62,U+5f71,U+5f80,U+5f84,U+5f88,U+5f8b,U+5f97,U+5fb7,U+5fc3,U+5fc5,U+5fd7,U+5feb,U+5ff5,U+6001,U+600e,U+601d,U+6027,U+603b,U+606f,U+6076,U+6089,U+60c5,U+60e0,U+60f3,U+610f,U+611f,U+613f,U+61c2,U+6210-6211,U+6216,U+6218,U+6237,U+623f-6240,U+624b,U+624d,U+6253,U+6267,U+6269,U+6279,U+627e,U+6280,U+628a,U+6295,U+62a4-62a5,U+62c5,U+62d3,U+62e5,U+62e9,U+62ff,U+6301,U+6307,U+6309,U+6311,U+6325,U+6362,U+636e,U+6388-6389,U+6392,U+6398,U+63a2,U+63a5,U+63a8,U+63aa,U+63cf-63d0,U+63e1,U+6458,U+64ad,U+64c5,U+64ce,U+652f,U+6536,U+6539} @font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/noto-sans-sc-7e4ec95d.woff2) format("woff2");unicode-range:U+653e-653f,U+6545,U+6548,U+6563,U+6570,U+6574,U+6587,U+6599,U+65ad,U+65af-65b0,U+65b9,U+65bd,U+65c5,U+65d7,U+65e0,U+65e5,U+65e8-65e9,U+65f6,U+660e,U+6613,U+662f,U+663e,U+666e-666f,U+667a,U+6682,U+66f4,U+6700,U+6708-6709,U+670d,U+671f,U+672a,U+672c,U+672f,U+673a,U+6742-6743,U+6761,U+6765,U+677f,U+6784,U+6790,U+679c,U+67b6,U+67d0,U+67e5,U+67ec,U+6807,U+680f,U+6837-6838,U+683c,U+6846,U+6848,U+6863,U+68c0,U+695a,U+697c,U+6a21,U+6b21,U+6b23,U+6b3e,U+6b62-6b65,U+6bb5,U+6bcf,U+6bd4,U+6c14,U+6c34,U+6c42,U+6c99,U+6ca1,U+6cbb,U+6cd5,U+6ce2,U+6d0b,U+6d1e,U+6d3b,U+6d3d,U+6d41,U+6d45,U+6d4b,U+6d4e-6d4f,U+6d6a,U+6d88-6d89,U+6db5,U+6df1,U+6e05,U+6e20,U+6e90,U+6eaf,U+6eda,U+6ee1,U+6f14,U+6f5c,U+70b9,U+7136,U+7167,U+719f,U+7247-7248,U+7269,U+7275,U+7279,U+72b6,U+72ec,U+7387,U+73af-73b0,U+73ed,U+7403,U+7406,U+751f,U+7528,U+7531,U+7533,U+7535,U+753b,U+754c,U+7559,U+7565,U+7597,U+767b,U+767d,U+7684,U+76ca,U+76d1-76d2,U+76d6,U+76ee,U+76f4,U+76f8,U+7701,U+770b,U+771f,U+7740,U+7763,U+77e5,U+77ed,U+7801,U+7814,U+7840,U+786e,U+78b3,U+793a,U+793e,U+79c1,U+79cd,U+79d2,U+79ef-79f0,U+79fb,U+7a0b,U+7a3f,U+7a76,U+7a7a,U+7a81,U+7acb,U+7ad9,U+7ae0,U+7b14,U+7b26,U+7b2c,U+7b51,U+7b54,U+7b56,U+7b5b,U+7b80,U+7b97,U+7ba1,U+7bb1,U+7c7b,U+7cbe,U+7cfb,U+7d22,U+7d27,U+7ea6,U+7eaa,U+7eb8,U+7ebf,U+7ec4,U+7ec6-7ec7,U+7ecf,U+7ed3,U+7ed5,U+7ed9,U+7edc,U+7edf,U+7ee9,U+7eed,U+7ef4,U+7efc,U+7eff,U+7f16,U+7f29,U+7f51,U+7f6e,U+7f72,U+7ffb,U+8003,U+8005,U+800c,U+8017,U+8054,U+80cc,U+80fd,U+8109,U+81ea,U+81f3-81f4,U+820d,U+822c,U+8272,U+8282,U+82f1,U+8303,U+8349,U+8350,U+83b7,U+8425,U+8428,U+843d,U+8584,U+85cf,U+8651,U+878d,U+884c,U+8861,U+8868,U+88ab,U+88c5,U+897f,U+8981,U+89c1-89c2,U+89c4,U+89c6,U+89c8,U+89d2,U+89e3,U+89e6,U+8a00,U+8b66,U+8ba1-8ba2,U+8ba4,U+8ba8-8ba9,U+8bad-8bb0,U+8bb2,U+8bb8,U+8bba,U+8bbe-8bbf,U+8bc1,U+8bc4,U+8bc6,U+8bc9-8bca,U+8bd1,U+8bd5,U+8bdd,U+8be2,U+8be5,U+8bed,U+8bf4,U+8bf7,U+8bfb,U+8c01,U+8c03,U+8c08,U+8c61,U+8d1f,U+8d22-8d23,U+8d26,U+8d2d,U+8d34-8d35,U+8d39,U+8d44,U+8d4f,U+8d56,U+8d70,U+8d77,U+8d85,U+8d8a-8d8b,U+8da3,U+8db3,U+8ddf,U+8de8,U+8def,U+8e2a,U+8eab,U+8f6c,U+8f6f,U+8f7d,U+8f83,U+8f91,U+8f93,U+8fa8,U+8fb9,U+8fbe,U+8fc7,U+8fd0,U+8fd8-8fd9,U+8fdb,U+8ff0,U+8ffd,U+9001-9002,U+9009,U+900f-9010,U+9014,U+901a,U+901f-9020,U+903b,U+9047,U+9053,U+907f,U+90ae,U+90e8,U+90fd,U+914d,U+9152,U+91c7,U+91ca,U+91cc-91cd,U+91cf,U+91d1,U+9488,U+94ae,U+94b1,U+94f6,U+94fe,U+9500,U+9547,U+957f,U+95e8,U+95ed-95ee,U+95f4,U+95fb,U+9605,U+961f,U+9633,U+9636,U+9644-9645,U+964d,U+9650,U+9662,U+9664,U+9669,U+968f-9690,U+969c,U+96be,U+96c6,U+96f6,U+9700,U+9760,U+9762} @font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/noto-sans-sc-ff7910c3.woff2) format("woff2");unicode-range:U+97f3,U+9875-9876,U+9879,U+987b,U+987e,U+9884,U+9886,U+9898,U+989d,U+98ce,U+98df,U+9996,U+9a6c,U+9a71,U+9a8c,U+9ad8,U+ff08-ff09,U+ff0c,U+ff1a-ff1b} /* ── 10-logos.js ── */ /* 顾客的 logo。高度照各个 logo 的形状分开定：Homly / Factorly / Enersave 是上图下字（接近方形），AIDT Lab 和 GAI³ 是横的 */ .m10-brand img{height:32px;width:auto} .m10-brand-ft img{height:44px} .m10-logo{display:block;line-height:0} .m10-logo img{width:auto;height:var(--lh);max-width:none} /* 内页页首：logo 在小标上面 */ .m10-intro{--lh:84px;margin:0 0 20px} .m10-intro.m10-enersave{--lh:76px} .m10-intro.m10-aidt{--lh:50px} .m10-intro.m10-gai3{--lh:46px} /* 首页五张卡片：logo 放在固定高度的一格里，五张卡片下面的字才会对齐 */ .m10-card{--lh:62px;display:flex;align-items:center;height:66px;margin-bottom:4px} .m10-card.m10-enersave{--lh:58px} .m10-card.m10-aidt{--lh:46px} .m10-card.m10-gai3{--lh:40px} /* 方案总览：logo 在名称上面 */ .m10-offer{--lh:60px;margin:2px 0 6px} .m10-offer.m10-enersave{--lh:56px} .m10-offer.m10-aidt{--lh:46px} .m10-offer.m10-gai3{--lh:40px} @media (min-width:700px){ .m10-intro{--lh:100px;margin-bottom:24px} .m10-intro.m10-enersave{--lh:90px} .m10-intro.m10-aidt{--lh:58px} .m10-intro.m10-gai3{--lh:54px} } @media (min-width:1000px){ .m10-brand img{height:36px} .m10-brand-ft img{height:48px} } /* ── 20-deck.js ── */ /* 模块 20：产品页的「一句话介绍 ＋ 目标 / 好处 / 适合谁」（.m20-deck），方案总览的「三类顾客」（.m20-seg） 颜色、字级都用站上现成的；会动的东西全部挂在 html.js 底下，只动 transform / opacity。 */ /* ── 产品页：一句话介绍（左边一条青色线，线上有一段光往下走） ── */ .m20-say{position:relative;max-width:940px;margin:0;padding-left:16px;font-size:clamp(18px,calc(12.5px + 1.72vw),28px);line-height:1.38;font-weight:600;letter-spacing:-.008em;color:var(--ink);text-wrap:balance} body.lang-zh .m20-say{line-height:1.55;letter-spacing:0} .m20-nm{font-weight:700;color:var(--teal-d)} .m20-g{display:inline-block} /* 中文那一句用：一组字整组换行（产品名不会自己落单一行） */ .m20-bar{position:absolute;left:0;top:.32em;bottom:.32em;width:4px;border-radius:2px;background:var(--teal);overflow:hidden} html.js .m20-bar::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(180deg,transparent,#C7F2EC);animation:m20-run 3.6s linear infinite} @keyframes m20-run{0%{transform:translateY(-110%)}72%,100%{transform:translateY(300%)}} /* ── 产品页：三格（白底卡片，跟站上浅色带里的卡片同一种） ── */ .m20-cols{display:grid;gap:10px;margin-top:26px} .m20-col{min-width:0;background:#fff;border:1px solid var(--line);padding:20px 18px} .m20-lab{margin:0 0 10px;font-size:12.5px;line-height:1.35;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d)} body.lang-zh .m20-lab{font-size:13px;line-height:1.35;letter-spacing:.2em} .m20-col p{margin:0;font-size:15px;line-height:1.55} .m20-pts{display:grid;gap:10px} .m20-pts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.5} .m20-pts svg{width:20px;height:20px;margin-top:1px;padding:3.5px;border-radius:50%;background:var(--teal);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} body.lang-zh .m20-col p,body.lang-zh .m20-pts li{line-height:1.7} body.lang-zh .m20-pts svg{margin-top:3px} /* 卡片进场之后，三个勾一个接一个弹出来 */ html.js .m20-pts svg{transition:transform .5s cubic-bezier(.2,.7,.2,1.25);transition-delay:calc(.45s + var(--i) * .14s)} html.js .m20-cols:not(.in) .m20-pts svg{transform:scale(0)} /* ── 方案总览：四格（三类顾客 ＋ Global Reach）—— 深色带里的半透明格子，整格是连结 ── 手机一栏、平板 2×2、电脑（1080 以上）四格一排 */ .sec.m20-seg{padding:38px 0 42px} .m20-seg .m20-lab{margin-bottom:14px;color:var(--teal-l)} .m20-segs{display:grid;gap:8px} .m20-seg-a{display:grid;grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"h a" "p p";column-gap:14px;align-items:start;align-content:start;height:100%;padding:14px 16px 16px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#DCE6F0;text-decoration:none;transition:background-color .2s,border-color .2s} .m20-seg-a:hover{background:rgba(255,255,255,.12);border-color:var(--teal-l)} .m20-seg-a:focus-visible{outline-color:var(--teal-l)} .m20-seg-a h3{grid-area:h;font-size:18px;line-height:1.25;letter-spacing:0;color:#fff} .m20-seg-a svg{grid-area:a;width:16px;height:16px;margin-top:3px;color:var(--teal-l);transition:transform .2s} .m20-seg-a p{grid-area:p;margin:4px 0 0;font-size:14.5px;line-height:1.5} body.lang-zh .m20-seg-a p{line-height:1.7} .m20-seg-a:hover svg{transform:translateX(4px)} /* 箭头轮流往右点一下（四格，每格隔 2 秒） */ html.js .m20-seg-a svg{animation:m20-nudge 8s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)} html.js .m20-seg-a:hover svg{animation:none} @keyframes m20-nudge{0%,12%,100%{transform:none}6%{transform:translateX(5px)}} @media (min-width:700px){ .m20-say{padding-left:24px} .m20-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px} .m20-who{grid-column:1/-1} .m20-col{padding:26px 24px} .m20-lab{margin-bottom:12px} .m20-pts{gap:11px} .sec.m20-seg{padding:56px 0 60px} .m20-seg .m20-lab{margin-bottom:16px} .m20-segs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .m20-seg-a{padding:18px 20px 20px} .m20-seg-a h3{font-size:19px} .m20-seg-a svg{margin-top:4px} .m20-seg-a p{margin-top:6px;font-size:15px;line-height:1.55} } @media (min-width:1000px){ .m20-cols{grid-template-columns:repeat(3,minmax(0,1fr))} .m20-who{grid-column:auto} } @media (min-width:1080px){ .m20-segs{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .m20-seg-a{padding:22px 20px 24px} .m20-seg-a p{margin-top:8px} } /* 同一排的格子共用「标题」「句子」两行的高度：标题折成两行时，旁边几格的句子还是从同一条线开始。 浏览器不支援 subgrid 的话各格照自己的内容排，只是句子起头不一定对齐。 */ @supports (grid-template-rows:subgrid){ @media (min-width:700px){ .m20-segs>li{display:grid;grid-template-columns:minmax(0,1fr);grid-row:span 2;grid-template-rows:subgrid;row-gap:0} .m20-seg-a{grid-row:span 2;grid-template-rows:subgrid;row-gap:0} } } /* 装置设了「减少动态效果」：一直在动的关掉，勾直接出现 */ @media (prefers-reduced-motion:reduce){ html.js .m20-bar::after{display:none} html.js .m20-seg-a svg{animation:none} html.js .m20-pts svg{transition:none} html.js .m20-cols:not(.in) .m20-pts svg{transform:none} } /* ── 25-demo.js ── */ /* 产品页「演示与报告范例」：装置框（笔电 / 手机）里放影片或影片画面，旁边是报告范例四页，点开放大。 颜色、圆角、动作都沿用 site.css / motion.css 现有的；class 一律 m25- 开头。 */ .m25-grid{display:grid;gap:32px} .m25-txt,.m25-show,.m25-pages{min-width:0} .m25-show{margin:0} .m25-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center} .m25-pages>.m25-note{text-align:left} .m25-dot{margin:0 8px} /* ── 装置框 ── */ .m25-dev{margin-inline:auto} .m25-lid{background:var(--navy)} .m25-screen{position:relative;height:0;overflow:hidden;background:#fff} .m25-v{position:absolute;inset:0;display:block;width:100%;height:100%;background:#fff} .m25-cover{position:absolute;inset:0} .m25-cover[hidden]{display:none} .m25-stills{position:absolute;inset:0} .m25-stills>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .m25-stills>img+img{display:none} .m25-lap{max-width:640px} .m25-lap>.m25-lid{margin-inline:5.5%;padding:2.2% 2.2% 2.6%;border-radius:12px 12px 0 0} .m25-lap .m25-screen{border-radius:3px} .m25-base{position:relative;height:13px;background:var(--line);border-radius:2px 2px 12px 12px} .m25-base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;transform:translateX(-50%);background:#B9C8D6;border-radius:0 0 6px 6px} .m25-ph{width:min(58vw,216px)} .m25-ph>.m25-lid{padding:8px;border-radius:30px} .m25-ph .m25-screen{border-radius:22px} .m25-ph .m25-play-t{right:14px;bottom:14px} /* 播放钮：盖住整个画面，按下去才开始下载影片 */ .m25-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;background:rgba(16,43,78,.2);color:#fff;cursor:pointer} .m25-play:focus-visible{outline-offset:-5px} .m25-play-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(255,255,255,.6);transition:background .2s,transform .2s} .m25-play-ic>svg{width:22px;height:22px;margin-left:3px} .m25-play:hover>.m25-play-ic{background:var(--navy);transform:scale(1.06)} .m25-play-t{position:absolute;right:8px;bottom:8px;padding:4px 9px;border-radius:999px;background:var(--navy);font:700 12.5px/1.2 var(--ff);letter-spacing:.04em} /* 会动的部分：画面轮流淡入（后一张盖上来，前一张才收掉，中间不会露底）、播放钮往外扩的圈 */ html.js .m25-stills>img+img{display:block;opacity:0} html.js .m25-stills>img:nth-child(2){animation:m25s2 15s infinite} html.js .m25-stills>img:nth-child(3){animation:m25s3 15s infinite} @keyframes m25s2{0%,33.33%{opacity:0}38%,72%{opacity:1}72.01%,100%{opacity:0}} @keyframes m25s3{0%,66.66%{opacity:0}71.33%,95.33%{opacity:1}100%{opacity:0}} html.js .m25-play-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;animation:m25ping 2.4s ease-out infinite} @keyframes m25ping{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}} /* ── 报告范例缩图 ── */ .m25-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .m25-thumb{position:relative;display:block;border:1px solid var(--line);background:#fff;transition:border-color .2s,transform .25s} .m25-thumb>img{width:100%} .m25-thumb:hover{border-color:var(--blue);transform:translateY(-4px)} .m25-zoom{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff} .m25-zoom>svg{width:11px;height:11px} /* 有名称的页（Enersave 八页）：一条横向卷的，名称在缩图底下。排法借用 .car-track（横排、可滑、贴到画面边） */ .m25-thumbs.m25-row{display:flex;gap:10px;align-items:flex-start;padding-bottom:4px} .m25-row>li{flex:0 0 152px;scroll-snap-align:start;min-width:0} .m25-cap{margin:8px 0 0;font-size:12.5px;line-height:1.35;font-weight:600;color:var(--ink)} .m25-many>.m25-pages>.m25-note{margin-top:10px} /* 影片的图说两句择一：预设「演示影片」，播不了这个格式时换成「演示画面」 */ .m25-cap-s,.m25-novid .m25-cap-v{display:none} .m25-novid .m25-cap-s{display:inline} /* ── 简报里的范例个案：小图 + 基本资料 ── */ .m25-case{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)} .m25-case>img{width:100%;aspect-ratio:1;object-fit:cover} .m25-case.m25-case-noimg{grid-template-columns:minmax(0,1fr)} .m25-case b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-bottom:8px} body.lang-zh .m25-case b{letter-spacing:.22em} .m25-case li{font-size:14px;line-height:1.45;color:var(--ink)} .m25-case li+li{margin-top:5px} /* ── 放大看 ── */ html.m25-lock,html.m25-lock body{overflow:hidden} .m25-lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto minmax(0,1fr);background:rgba(16,43,78,.96);color:#fff} .m25-lb[hidden]{display:none} .m25-lb :focus-visible{outline-color:var(--teal-l)} .m25-lb-bar{display:flex;align-items:center;gap:8px;min-height:64px;padding:8px 8px 8px 16px} .m25-lb-cap{flex:1;min-width:0;margin:0;font-size:14px;font-weight:600;line-height:1.4} .m25-lb-n{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;font-weight:700;white-space:nowrap} .m25-lb-btn{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;transition:background .2s} .m25-lb-btn:hover{background:var(--ice)} .m25-lb-btn[aria-pressed=true]{background:var(--teal-l)} .m25-lb-btn>svg{width:20px;height:20px} .m25-lb-stage{position:relative;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pinch-zoom} /* 整张图都在画面里，不用卷；左右滑留给换页 */ .m25-lb-stage>img{position:absolute;inset:0 12px 78px;margin:auto;width:auto;height:auto;max-width:calc(100% - 24px);max-height:calc(100% - 78px);background:#fff;cursor:zoom-in} .m25-zoomed>.m25-lb-stage{touch-action:pan-x pan-y pinch-zoom} .m25-zoomed>.m25-lb-stage>img{position:static;display:block;margin:0 auto 78px;max-width:none;max-height:none;cursor:zoom-out} .m25-lb-prev,.m25-lb-next{position:absolute;bottom:15px;left:50%} .m25-lb-prev{margin-left:-54px} .m25-lb-next{margin-left:6px} @media (min-width:700px){ .m25-grid{gap:40px} .m25-thumbs{gap:12px} .m25-zoom{right:6px;bottom:6px;width:22px;height:22px} .m25-zoom>svg{width:12px;height:12px} .m25-play-ic{width:76px;height:76px} .m25-play-ic>svg{width:28px;height:28px} .m25-play-t{right:14px;bottom:14px} .m25-case{grid-template-columns:104px minmax(0,1fr);gap:18px} .m25-case.m25-case-noimg{grid-template-columns:minmax(0,1fr)} .m25-row>li{flex-basis:160px} /* 手机框那一版：手机在左、四页排成 2×2 在右 */ .m25-is-ph{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} .m25-is-ph>.m25-txt{grid-column:1 / -1} .m25-is-ph .m25-ph{width:232px} .m25-is-ph>.m25-pages{justify-self:center;width:100%;max-width:330px} .m25-is-ph .m25-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))} /* 手机框 + 八页：字在上面一整行，下面左边手机、右边那一条报告页 */ .m25-is-ph.m25-many{grid-template-columns:auto minmax(0,1fr)} .m25-is-ph.m25-many>.m25-pages{justify-self:stretch;max-width:none;min-width:0} .m25-is-ph.m25-many .m25-thumbs.m25-row{display:flex;margin-inline:0;padding-inline:0;scroll-padding-inline:0} .m25-lb-bar{padding:10px 16px 10px 24px} .m25-lb-cap{font-size:15px} .m25-lb-stage>img{inset:0 84px 24px;max-width:calc(100% - 168px);max-height:calc(100% - 24px)} .m25-zoomed>.m25-lb-stage>img{margin-bottom:24px} .m25-lb-prev,.m25-lb-next{top:50%;bottom:auto;margin:-24px 0 0} .m25-lb-prev{left:18px} .m25-lb-next{left:auto;right:18px} } @media (min-width:1000px){ /* 笔电框那一版：左边是字和四页缩图，右边整栏是笔电 */ .m25-is-lap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;row-gap:32px} .m25-is-lap>.m25-txt{grid-column:1;grid-row:1;align-self:end} .m25-is-lap>.m25-pages{grid-column:1;grid-row:2;align-self:start} .m25-is-lap>.m25-show{grid-column:2;grid-row:1 / span 2;align-self:center} } @media (min-width:1000px){ /* 那一条报告页在电脑上露出细的卷动条，滑鼠才知道可以往右拉 */ .m25-is-ph.m25-many .m25-thumbs.m25-row{scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:12px} .m25-is-ph.m25-many{column-gap:56px} } @media (min-width:1100px){ /* 手机框那一版：字、手机、四页（2×2）三栏 */ .m25-is-ph{grid-template-columns:minmax(0,1fr) auto minmax(0,290px);column-gap:52px} .m25-is-ph>.m25-txt{grid-column:auto} .m25-is-ph .m25-ph{width:256px} .m25-is-ph.m25-many{grid-template-columns:auto minmax(0,1fr);column-gap:56px} .m25-is-ph.m25-many>.m25-txt{grid-column:1 / -1} } @media (prefers-reduced-motion:reduce){ html.js .m25-stills>img+img{display:none;animation:none} html.js .m25-play-ic::after{animation:none;opacity:0} } /* ── 30-pitch.js ── */ /* ── 30-pitch：顾客写的文案（两行标题、导言、三个重点、六段说明、按钮）── 手机：一栏。平板：三个重点排成一横条。电脑：左边是导言＋三个重点（往下读的时候会跟着），右边是说明文字。 「先露两段、其余收起」只在 html.js 底下才生效：没有 JS、或网址带 ?noanim 时六段全部看得到，展开钮不出现。 会动的只动 transform / opacity（展开收起也是：见最下面那一段）。 */ .m30-pitch{position:relative} .m30-pitch .sec-hd{margin-bottom:26px} .m30-grid{display:grid;gap:34px} .m30-side>.lead{max-width:780px} /* 三个重点：每一项上面一条线。动画开着时，青色那条轮流从左边画过去 */ .m30-pil{display:grid;margin-top:26px} .m30-pil>li{position:relative;padding:15px 0 16px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .m30-pil>li::before,.m30-pil>li::after{content:"";position:absolute;left:0;right:0;top:0;height:2px} .m30-pil>li::before{background:var(--line)} .m30-pil>li::after{background:var(--teal);transform-origin:0 50%} body.lang-zh .m30-pil>li{font-size:15px;letter-spacing:.14em} html.js .m30-pil>li::after{animation:m30-sweep 6s cubic-bezier(.4,0,.2,1) infinite both} html.js .m30-pil>li:nth-child(2)::after{animation-delay:2s} html.js .m30-pil>li:nth-child(3)::after{animation-delay:4s} @keyframes m30-sweep{0%{transform:scaleX(0);opacity:1}26%,33.33%{transform:scaleX(1);opacity:1}42%,100%{transform:scaleX(1);opacity:0}} /* 说明文字 */ .m30-txt>p,.m30-more>p{margin:0 0 1.1em;font-size:16px;line-height:1.7} .m30-more>p:last-child{margin-bottom:0} .m30-txt strong{font-weight:700;color:var(--ink)} .m30-nb{white-space:nowrap} /* Learn–Use–Build–Own、AI-to-IP：整个词不要从中间断行 */ body.lang-zh .m30-txt>p,body.lang-zh .m30-more>p{line-height:1.9} .m30-anchor{position:relative;display:flow-root} .m30-cta{margin-top:26px} .m30-cta .btn{text-wrap:balance} /* 手机上钮里的字折成两行时，不要只掉一个字到第二行 */ /* 展开钮（一条线把前两段和后面隔开）。没有 JS 时不显示 */ .m30-fold{display:none} html.js .m30-fold{display:flex;align-items:center;gap:16px;margin:-4px 0 8px} html.js .m30-fold::after{content:"";flex:1;min-width:20px;height:1px;background:var(--line)} .m30-tog{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--blue);font:600 15px/1.25 var(--ff);text-align:left;cursor:pointer} .m30-tog svg{flex:none;width:11px;height:11px;transition:transform .3s} .m30-tog[aria-expanded=true] svg{transform:rotate(180deg)} .m30-tog:hover{text-decoration:underline;text-underline-offset:4px} .m30-tog[aria-expanded=true] .m30-l0,.m30-tog[aria-expanded=false] .m30-l1{display:none} /* ── 展开 / 收起（状态由 30-pitch.client.js 加在 section 上）── m30-x ＝后四段在。平常就这一个：四段排在版面里，一段接一段浮上来。 展开、收起的那半秒另外加 m30-o：四段先「浮」在版面上面（absolute，不占位置），底下垫一块跟这一段同色的底（::before）， 那块底用 scaleY 往下拉开（m30-g），按钮用 translateY 跟着往下走 —— 看起来是这一段慢慢变长，其实版面没有在动。 拉到底之后才把四段放回版面里（那一下画面不变）。收起就是倒过来。只动 transform / opacity。 --m30-h ＝四段的高度，--m30-r ＝拉到底之后画面底下还露出来的那一截（大萤幕才会有；那一截最后用淡出收掉，m30-t）。 */ html.js .m30-more{display:none} html.js .m30-x .m30-more{display:block} html.js .m30-x .m30-more>p{animation:m30-in .5s cubic-bezier(.2,.7,.2,1) both} html.js .m30-x .m30-more>p:nth-child(1){animation-delay:.14s} html.js .m30-x .m30-more>p:nth-child(2){animation-delay:.22s} html.js .m30-x .m30-more>p:nth-child(3){animation-delay:.29s} html.js .m30-x .m30-more>p:nth-child(4){animation-delay:.36s} html.js .m30-h .m30-more>p:nth-child(n){animation:m30-out .16s ease both} @keyframes m30-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes m30-out{to{opacity:0}} @keyframes m30-fade{from{opacity:0}to{opacity:1}} html.js .m30-o,html.js .m30-t{z-index:2} html.js .m30-o .m30-more{position:absolute;left:0;right:0;top:0;z-index:1} html.js .m30-o .m30-cta{position:relative;z-index:1;pointer-events:none;transition:transform .46s cubic-bezier(.4,0,.2,1)} html.js .m30-o::before{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--m30-h,0px) + var(--m30-r,0px));background:inherit;transform:scaleY(0);transform-origin:50% 0;transition:transform .46s cubic-bezier(.4,0,.2,1)} html.js .m30-o.m30-g::before{transform:none} html.js .m30-o.m30-g .m30-cta{transform:translateY(var(--m30-h,0px))} html.js .m30-o.m30-h::before,html.js .m30-o.m30-h .m30-cta{transition-duration:.4s;transition-delay:.07s} html.js .m30-n::before,html.js .m30-n .m30-cta{transition:none} html.js .m30-t::before{content:"";position:absolute;left:0;right:0;top:100%;height:var(--m30-r,0px);background:inherit;transition:opacity .3s ease} html.js .m30-t.m30-t2::before{opacity:0} @media (min-width:700px){ .m30-pitch .sec-hd{margin-bottom:30px} .m30-grid{gap:40px} .m30-pil{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;margin-top:32px} .m30-pil>li{padding-bottom:0} .m30-txt{max-width:680px} .m30-txt>p,.m30-more>p{font-size:16.5px} } @media (min-width:1000px){ .m30-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start} .m30-side{position:sticky;top:calc(var(--hh) + 32px)} .m30-pil{grid-template-columns:minmax(0,1fr);margin-top:34px} .m30-pil>li{padding-bottom:16px} .m30-txt{max-width:none} } /* 装置设了「减少动态效果」：线不扫；展开收起不拉开，四段只淡入（client.js 也不会加 m30-o） */ @media (prefers-reduced-motion:reduce){ html.js .m30-pil>li::after{animation:none} html.js .m30-x .m30-more>p{animation-name:m30-fade} .m30-tog svg{transition:none} } @media print{ html.js .m30-more{display:block} html.js .m30-fold{display:none} } /* ── 40-voices.js ── */ /* Module 40: quote cards, quote slider, awards page. Every class here starts with m40-. Reused from the site: .car-track (the scroll-snap row), .car-btn (round arrow buttons), .chip (filter pills), .more, .btn. */ /* ── the line that says these are stand-in texts ── */ .m40-note{margin:16px 0 0;max-width:680px;padding-left:12px;border-left:3px solid var(--teal);font-size:13.5px;line-height:1.5;font-weight:500;color:var(--muted)} .sec-navy .m40-note{border-left-color:var(--teal-l);color:#C6D4E2} /* ── quote card: opening mark, the text, role and place underneath ── */ .m40-q{--q-bg:#fff;--q-bd:var(--line);--q-ink:var(--ink);--q-sub:var(--teal-d);--q-mark:var(--teal);--q-rule:var(--line); display:flex;flex-direction:column;flex:1;min-width:0;margin:0;padding:24px 20px 20px;background:var(--q-bg);border:1px solid var(--q-bd)} .sec-navy .m40-q{--q-bg:rgba(255,255,255,.06);--q-bd:rgba(255,255,255,.18);--q-ink:#fff;--q-sub:var(--teal-l);--q-mark:var(--teal-l);--q-rule:rgba(255,255,255,.18)} .sec-white .m40-q{--q-bg:var(--ice2);--q-bd:var(--ice2);--q-rule:var(--line)} .m40-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px} .m40-mark{flex:none;width:34px;height:25px;fill:var(--q-mark)} .m40-tag{margin:0;padding-top:4px;text-align:right;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--q-sub)} .m40-q>blockquote{flex:1;margin:0} .m40-q>blockquote>p{margin:0;font-size:16.5px;line-height:1.6;font-weight:500;color:var(--q-ink)} .m40-q>figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--q-rule)} .m40-who{display:block;font-size:15.5px;line-height:1.35;font-weight:700;color:var(--q-ink)} .m40-where{display:block;margin-top:3px;font-size:13.5px;line-height:1.35;font-weight:600;letter-spacing:.02em;color:var(--q-sub)} body.lang-zh .m40-q>blockquote>p{line-height:1.85} body.lang-zh .m40-tag{letter-spacing:.16em} /* ── slider: one card per view (two from 1000px with .m40-two). Without JavaScript it is a plain row you can scroll ── */ .m40-sl{--m40-g:var(--pad);min-width:0} .m40-sl>.car-track{gap:var(--m40-g);margin-inline:calc(var(--m40-g) * -1);padding-inline:var(--m40-g);scroll-padding-inline:var(--m40-g)} .m40-sl>.car-track:focus-visible{outline-offset:-3px} .m40-sl:not(.m40-on)>.car-track{scrollbar-width:thin;padding-bottom:10px} .sec-navy .m40-sl:not(.m40-on)>.car-track{scrollbar-color:rgba(255,255,255,.5) transparent} .m40-slide{flex:0 0 100%;display:flex;min-width:0;scroll-snap-align:start;scroll-snap-stop:always} .m40-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px} .m40-ctl>.car-btn{display:none} .m40-dots{display:none;flex:1 0 100%;justify-content:center} .m40-on .m40-dots{display:flex} .m40-on.m40-single .m40-dots,.m40-on.m40-single .m40-ctl>.car-btn{display:none} .m40-on.m40-single .m40-all{margin-left:0} .m40-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;cursor:pointer} .m40-dot[hidden]{display:none} .m40-dot:focus-visible{outline-offset:-7px} .m40-dot>i{display:block;position:relative;overflow:hidden;width:28px;height:4px;border-radius:2px;background:#6B7F94;transition:opacity .2s} /* 3:1 against the band behind it: these are buttons, not decoration */ .m40-dot:hover>i{opacity:.7} .m40-dot[aria-current]>i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--navy)} .m40-dot[aria-current]:hover>i{opacity:1} .sec-navy .m40-dot>i{background:rgba(255,255,255,.4)} .sec-navy .m40-dot[aria-current]>i::after{background:#fff} /* an arrow at either end is faded through its background, not opacity, so its focus ring stays at full strength */ .m40-ctl>.car-btn[aria-disabled=true],.m40-ctl>.car-btn[aria-disabled=true]:hover{background:rgba(16,43,78,.3);cursor:default} .sec-navy .m40-ctl>.car-btn{background:#fff;color:var(--navy)} .sec-navy .m40-ctl>.car-btn:hover{background:var(--teal-l)} .sec-navy .m40-ctl>.car-btn[aria-disabled=true],.sec-navy .m40-ctl>.car-btn[aria-disabled=true]:hover{background:rgba(255,255,255,.3)} .sec-navy .m40-sl :focus-visible{outline-color:var(--teal-l)} /* the active position fills up while the slider is waiting to move on (class m40-auto is set by the script) */ html.js .m40-auto .m40-dot[aria-current]>i::after{transform-origin:0 50%;animation:m40-prog var(--m40-ap,5.5s) linear both} @keyframes m40-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ── home page band: compact, heading on the left and one card at a time on the right ── */ .sec.m40-home{padding-block:52px} .m40-home-in{display:grid;gap:26px} .m40-home-in>*{min-width:0} .m40-home .m40-ctl>.btn{margin-top:6px} /* ── awards.html: award tiles (white tiles on the navy band) ── */ .m40-aw{display:grid;gap:16px;min-width:0} .m40-aw-i{display:flex;flex-direction:column;min-width:0;padding:22px 20px 20px;background:rgba(255,255,255,.97);border-top:4px solid var(--teal);color:var(--body)} .m40-aw-img{margin-bottom:18px;padding:14px;background:var(--ice2)} .m40-aw-img>img{width:100%;aspect-ratio:3/2;object-fit:contain} .m40-aw-y{font-size:13px;line-height:1.3;font-weight:700;letter-spacing:.1em;color:var(--teal-d)} .m40-aw-t{display:block;margin:8px 0 16px;font-size:19px;line-height:1.25;font-weight:700;color:var(--ink)} .m40-aw-d{display:grid;gap:12px;margin:0} .m40-aw-d dt{margin-bottom:2px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)} .m40-aw-d dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere} .m40-aw-i>.more{align-self:flex-start;margin:auto 0 -10px;padding-top:10px} /* ── awards.html: all perspectives, with a filter (the filter only shows once the script is running) ── */ .m40-filter{display:none;flex-wrap:wrap;gap:8px;margin-bottom:24px} .m40-filter.m40-on{display:flex} .m40-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))} .m40-grid>li{display:flex;min-width:0} .m40-grid>li[hidden]{display:none} html.js .m40-grid.m40-swap>li{animation:m40-in .45s ease both} @keyframes m40-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (min-width:700px){ .m40-q{padding:30px 28px 26px} .m40-q>blockquote>p{font-size:17px} .m40-ctl{gap:8px 10px;margin-top:18px} .m40-on .m40-ctl>.car-btn{display:grid} .m40-dots{flex:0 0 auto} .m40-on .m40-all{margin-left:auto} .m40-home .m40-ctl>.btn{margin-top:0} .sec.m40-home{padding-block:68px} .m40-filter{margin-bottom:30px} .m40-grid{gap:20px} .m40-aw{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1000px){ .m40-sl{--m40-g:20px} .m40-two .m40-slide{flex-basis:calc(50% - var(--m40-g) / 2)} .m40-two .m40-slide:nth-child(even){scroll-snap-align:none} /* two per view: a swipe stops on pairs */ .sec.m40-home{padding-block:84px} .m40-home-in{grid-template-columns:.74fr 1.26fr;gap:64px;align-items:center} .m40-aw:not(.m40-aw-few){grid-template-columns:repeat(3,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){ html.js .m40-auto .m40-dot[aria-current]>i::after,html.js .m40-grid.m40-swap>li{animation:none} } /* ── 50-media.js ── */ /* 模块 50：媒体与公告 —— media.html（清单、筛选钮、滑出面板）、media-post.html（示范发布画面）、首页的一个钮 颜色、字级、按钮、表格栏位都用站上现成的；会动的东西挂在 html.js 底下，只动 transform / opacity。 「要有 JS 才有意义」的东西（整行可点、点开才看全文）认 html.js 或 html.m50-on（?noanim 时没有 html.js，由 50-media.client.js 加 m50-on）； 没有 JS 时每一则的全文直接摊开在清单里。 */ [class*="m50-"][hidden]{display:none!important} /* ── 首页「Latest Insights」标题底下的钮 ── */ .m50-home{margin:26px 0 0} /* ── 页面最上面那一条（样板专用：去发布画面 / 回清单） ── */ .m50-bar{background:var(--navy);color:#fff} .m50-bar a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 0;font-size:14px;font-weight:600;line-height:1.35;color:#fff;text-decoration:none} .m50-bar b{font-weight:700;color:var(--teal-l)} .m50-bar a:hover{text-decoration:underline;text-underline-offset:4px} .m50-bar a:focus-visible{outline-color:var(--teal-l)} .m50-bar svg{flex:none;width:16px;height:16px;transition:transform .2s} .m50-bar a:hover svg{transform:translateX(4px)} .m50-bar .m50-bar-back:hover svg{transform:translateX(-4px)} .m50-bar i{position:relative;flex:none;display:block;width:8px;height:8px;border-radius:50%;background:var(--teal-l)} html.js .m50-bar i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal-l);animation:m50-ping 2.2s ease-out infinite} @keyframes m50-ping{from{transform:scale(.5);opacity:.9}to{transform:scale(1.5);opacity:0}} /* ── media.html：筛选钮（用站上的 .chip） ── */ .m50-tools{display:none;flex-wrap:wrap;gap:10px;margin-bottom:26px} :is(html.js,html.m50-on) .m50-tools{display:flex} /* ── 清单：一行一则（跟方案总览「一行一个方案」同一路写法） ── */ .m50-list{border-top:2px solid var(--navy)} .m50-item{position:relative;display:grid;gap:6px 28px;padding:20px 0 24px;border-bottom:1px solid var(--line)} .m50-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} .m50-date{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);white-space:nowrap} .m50-type{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)} .m50-pub{font-size:13px;font-weight:600;line-height:1.3;color:var(--body);overflow-wrap:anywhere} .m50-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} .m50-tag-s{border:1px dashed #7F93A8;color:var(--muted)} .m50-tag-t{background:var(--teal-d);color:#fff} .m50-main{min-width:0} .m50-title{font-size:clamp(19px,2.6vw,22px);line-height:1.25;letter-spacing:-.005em} .m50-open{display:block;width:100%;min-height:44px;margin:0;padding:8px 0;border:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;overflow-wrap:anywhere;transition:color .2s;-webkit-tap-highlight-color:transparent} .m50-sum{max-width:720px;margin:0;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere} .m50-more{display:none;align-items:center;gap:8px;margin-top:12px;font-size:15px;font-weight:600;line-height:1.3;color:var(--blue)} .m50-more svg{width:16px;height:16px;transition:transform .2s} .m50-go,.m50-thumb{display:none} .m50-thumb{order:-1;margin-bottom:8px;background:var(--ice);overflow:hidden} .m50-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s} /* 最新的那一则：日期前面一个点 */ .m50-first .m50-date::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal)} /* 整行可点：标题是按钮，点击范围用 ::after 铺满整行 */ :is(html.js,html.m50-on) .m50-open{cursor:pointer} :is(html.js,html.m50-on) .m50-open::after{content:"";position:absolute;inset:0 -12px} :is(html.js,html.m50-on) .m50-open:active{color:var(--blue)} :is(html.js,html.m50-on) .m50-open:focus-visible{outline:none} :is(html.js,html.m50-on) .m50-open:focus-visible::after{outline:3px solid var(--teal);outline-offset:-3px} :is(html.js,html.m50-on) .m50-more{display:inline-flex} :is(html.js,html.m50-on) .m50-thumb{display:block} :is(html.js,html.m50-on) .m50-item::before{content:"";position:absolute;left:-12px;top:-1px;bottom:-1px;width:3px;background:var(--teal);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s cubic-bezier(.2,.7,.2,1)} :is(html.js,html.m50-on) .m50-item:focus-within::before{transform:scaleY(1)} @media (hover:hover){ :is(html.js,html.m50-on) .m50-item:hover::before{transform:scaleY(1)} :is(html.js,html.m50-on) .m50-item:hover .m50-open{color:var(--blue)} :is(html.js,html.m50-on) .m50-item:hover .m50-more svg{transform:translateX(4px)} :is(html.js,html.m50-on) .m50-item:hover .m50-go{background:var(--navy);color:#fff} :is(html.js,html.m50-on) .m50-item:hover .m50-go svg{transform:translateX(3px)} :is(html.js,html.m50-on) .m50-item:hover .m50-thumb img{transform:scale(1.04)} } .m50-empty{margin:0;padding:26px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)} /* ── 一则的全文区（没有 JS 时摊开在清单里；有 JS 时藏起来，点开才复制到面板） ── */ .m50-full{display:grid;gap:18px;max-width:720px;margin-top:18px} :is(html.js,html.m50-on) .m50-item .m50-full{display:none} .m50-body{display:grid;gap:14px;font-size:16px;line-height:1.65;overflow-wrap:anywhere} .m50-body p{margin:0} .m50-pre{white-space:pre-line} .m50-photo{margin:0;background:var(--ice)} .m50-photo img{width:100%} /* 范例的虚线框：说明照片、PDF、媒体名称、连结之后放在哪里 */ .m50-slot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 14px;padding:16px 16px 17px;border:1px dashed #7F93A8;background:var(--ice2)} .m50-slot svg{grid-row:span 2;width:28px;height:28px;color:var(--teal-d)} .m50-slot-l{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink)} .m50-slot-t{font-size:14.5px;line-height:1.5} .m50-slot-photo{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:6px;min-height:200px;padding:24px 20px;text-align:center} .m50-slot-photo svg{grid-row:auto;width:40px;height:40px;margin-bottom:4px} /* 真的内容：PDF 下载、媒体名称与原文连结；访客自己发布的那一则只显示 PDF 档名 */ .m50-dl,.m50-file{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;gap:14px;align-items:center;min-height:64px;padding:12px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s} .m50-dl:hover{border-color:var(--blue)} .m50-dl>svg,.m50-file>svg{width:28px;height:28px;color:var(--teal-d)} .m50-dl>svg:last-child{width:18px;height:18px;color:var(--blue)} .m50-dl-b,.m50-file-b{display:grid;gap:2px;min-width:0} .m50-dl-l,.m50-file-n{font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);overflow-wrap:anywhere} .m50-dl-s,.m50-file-t{font-size:13.5px;line-height:1.5;color:var(--muted)} .m50-file{grid-template-columns:28px minmax(0,1fr);align-items:start;padding:16px;border:1px dashed #7F93A8;background:var(--ice2)} .m50-src{display:grid;gap:4px;justify-items:start;padding:16px;border:1px solid var(--line)} .m50-src-l{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)} .m50-src-n{font-size:17px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere} .m50-src .m50-src-a{margin-top:12px;min-height:44px;padding:8px 20px;font-size:14px} /* ── 滑出的面板：手机从下面上来，700px 以上从右边进来 ── */ body.m50-lock{overflow:hidden} .m50-panel{position:fixed;inset:0;z-index:100;overflow:hidden} .m50-backdrop{position:absolute;inset:0;background:rgba(16,43,78,.58);touch-action:none} .m50-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;border-radius:14px 14px 0 0;box-shadow:0 -18px 40px -22px rgba(16,43,78,.5)} .m50-sheet:focus{outline:none} .m50-sheet-hd{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;background:#fff;border-bottom:1px solid var(--line)} .m50-sheet .m50-sheet-meta{flex-direction:row;align-items:center;gap:6px 12px;min-height:44px;padding:6px 0} .m50-x{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--navy);cursor:pointer;transition:background .2s} .m50-x:hover{background:var(--ice)} .m50-x svg{width:18px;height:18px} .m50-sheet-bd{padding:22px 20px calc(36px + env(safe-area-inset-bottom,0px))} .m50-sheet-title{font-size:clamp(23px,5.4vw,30px);line-height:1.15;overflow-wrap:anywhere} .m50-sheet-sum{margin:14px 0 0;font-size:17px;line-height:1.5;font-weight:600;color:var(--ink);overflow-wrap:anywhere} .m50-sheet-full{display:grid;gap:18px;margin-top:22px} .m50-sum:empty,.m50-sheet-sum:empty,.m50-sheet-full:empty{display:none} /* ── media-post.html：示范发布画面（表格用站上的 .form / .fg / .f） ── */ body.m50-post #enquiry{display:none} .m50-post-grid{display:grid;gap:26px} .m50-note{padding:22px 20px;border:1px solid var(--line);border-left:4px solid var(--teal);background:var(--ice2)} .m50-note-l{display:block;margin-bottom:10px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)} .m50-note p{margin:0;font-size:16.5px;line-height:1.55;font-weight:500;color:var(--ink)} .m50-formwrap{min-width:0} .m50-form-h{margin-bottom:18px;font-size:22px;line-height:1.2} .m50-form textarea{display:block;resize:vertical;line-height:1.5} /* 日期栏：iPhone 上不设这几样会比别的栏位矮、字置中，窄萤幕还可能撑出去 */ .m50-form input[type=date]{display:block;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none} .m50-form input[type=date]::-webkit-date-and-time-value{text-align:left} .m50-form .f.bad textarea{border-color:#B3261E} .m50-form input.m50-file-in{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .m50-pick{display:grid;gap:10px;justify-items:start} .m50-form .m50-pick-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:10px 24px;border:1px solid var(--navy);border-radius:999px;background:#fff;color:var(--ink);font:600 15px/1.2 var(--ff);cursor:pointer;transition:background .2s,color .2s} .m50-form .m50-pick-btn:hover{background:var(--navy);color:#fff} .m50-file-in:focus-visible+.m50-pick-btn{outline:3px solid var(--teal);outline-offset:3px} .m50-pick-st{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;font-size:14.5px;line-height:1.45;color:var(--muted)} .m50-st{min-width:0;overflow-wrap:anywhere} .m50-st-bad{color:#B3261E} .m50-prev{flex:none;width:56px;height:56px;object-fit:cover;border:1px solid var(--line);background:var(--ice)} .m50-hint{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)} .m50-formerr{margin:0;padding:12px 14px;border:1px solid #B3261E;font-size:14.5px;line-height:1.5;color:#B3261E} .m50-form .btn[disabled]{opacity:.55;cursor:default;pointer-events:none} .m50-done{padding:24px 20px;border:1px solid var(--line);border-top:4px solid var(--teal);background:#fff} .m50-done:focus{outline:none} .m50-done-h{margin-bottom:12px;font-size:20px;line-height:1.25} .m50-done p{margin:0 0 10px;font-size:15.5px} .m50-done .m50-done-t{font-size:17px;font-weight:700;line-height:1.35;color:var(--ink);overflow-wrap:anywhere} .m50-done .m50-done-w{color:#B3261E} .m50-done .btns{margin-top:18px} .m50-sent .m50-form{display:none} .m50-manage{display:grid;gap:14px;justify-items:start;align-content:start} .m50-manage-n{margin:0;font-size:15.5px;color:var(--ink)} .m50-manage .btn[disabled]{opacity:.45;cursor:default;pointer-events:none} .m50-status{margin:0;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--teal-d)} .m50-status:focus{outline:none} /* ── 中文：访客自己打的字不走网站那套中文字体（它只收了站上用到的字，其余的字会跳成另一种字体，一句话里两种字形），整段用装置自己的黑体 ── */ body.lang-zh .m50-user,body.lang-zh .m50-form input,body.lang-zh .m50-form textarea{font-family:Montserrat,"PingFang SC","Microsoft YaHei","Heiti SC",sans-serif} html.f-inter body.lang-zh .m50-user,html.f-inter body.lang-zh .m50-form input,html.f-inter body.lang-zh .m50-form textarea{font-family:Inter,"PingFang SC","Microsoft YaHei","Heiti SC",sans-serif} body.lang-zh .m50-body{line-height:1.8} body.lang-zh .m50-sum,body.lang-zh .m50-sheet-sum,body.lang-zh .m50-note p{line-height:1.7} body.lang-zh .m50-type,body.lang-zh .m50-tag,body.lang-zh .m50-note-l,body.lang-zh .m50-src-l{letter-spacing:.16em} /* ── 会动的：筛选换一批、新发布的那一则进场、面板滑出来、最新一则的点往外扩 ── */ html.js .m50-list.m50-out>li{opacity:0;transform:translateY(10px);transition-duration:.18s;transition-delay:0s!important} html.js .m50-list>li.m50-enter{opacity:0;transform:translateY(24px)} html.js .m50-first .m50-date::after{content:"";position:absolute;left:-4px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid var(--teal);animation:m50-ping 2.2s ease-out infinite} html.js .m50-backdrop{opacity:0;transition:opacity .35s ease} html.js .m50-panel.on .m50-backdrop{opacity:1} html.js .m50-sheet{transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)} html.js .m50-panel.on .m50-sheet{transform:none} @media (min-width:700px){ .m50-tools{margin-bottom:32px} .m50-item{grid-template-columns:150px minmax(0,1fr) 48px;align-items:start;padding:26px 0 30px} .m50-item.m50-has-img{grid-template-columns:150px minmax(0,1fr) 180px 48px} .m50-meta{flex-direction:column;align-items:flex-start;gap:8px;padding-top:13px} .m50-thumb{order:0;margin:6px 0 0} :is(html.js,html.m50-on) .m50-more{display:none} :is(html.js,html.m50-on) .m50-go{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--navy);border-radius:50%;color:var(--navy);transition:background .2s,color .2s} .m50-go svg{width:16px;height:16px;transition:transform .2s} .m50-note{padding:26px 26px} .m50-done{padding:30px 28px} .m50-sheet{left:auto;top:0;width:min(600px,100%);max-height:none;border-radius:0;box-shadow:-18px 0 40px -22px rgba(16,43,78,.5)} .m50-sheet-hd{padding:14px 22px 14px 36px} .m50-sheet-bd{padding:30px 36px 56px} html.js .m50-sheet{transform:translateX(100%)} } @media (min-width:1000px){ .m50-item{grid-template-columns:190px minmax(0,1fr) 48px;gap:6px 36px} .m50-item.m50-has-img{grid-template-columns:190px minmax(0,1fr) 220px 48px} .m50-post-grid{grid-template-columns:.8fr 1.2fr;grid-template-rows:auto 1fr;gap:28px 64px;align-items:start} .m50-note{grid-column:1;grid-row:1} .m50-formwrap{grid-column:2;grid-row:1 / span 2} .m50-manage{grid-column:1;grid-row:2} } /* 装置设了「减少动态效果」：滑动、位移关掉，只留淡入淡出 */ @media (prefers-reduced-motion:reduce){ html.js .m50-bar i::after,html.js .m50-first .m50-date::after{animation:none;opacity:0} html.js .m50-list.m50-out>li,html.js .m50-list>li.m50-enter{transform:none} html.js .m50-sheet{transform:none;opacity:0;transition:opacity .2s ease} html.js .m50-panel.on .m50-sheet{opacity:1} :is(html.js,html.m50-on) .m50-item::before{transition:none} } /* ── wp/base.css ── */ /* WordPress 专用的基本样式（主线的档）*/ /* 登入后上面有一条管理列：整条页头要让开它（手机 600px 以下管理列会跟着页面卷走，就不用让） */ .admin-bar .hd{top:32px} @media (max-width:782px){.admin-bar .hd{top:46px}} @media (max-width:600px){.admin-bar .hd{top:0}} html:has(.admin-bar){scroll-padding-top:calc(var(--hh) + 52px)}