@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root { --ink:#10274f; --blue:#0e346b; --red:#cf2636; --paper:#f6f6f2; --warm:#e8e7e0; --line:#d8dce0; --muted:#5c6878; --white:#fffefa; --display:"Noto Sans SC", sans-serif; --body:"IBM Plex Sans","Noto Sans SC",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); } a { color:inherit; text-decoration:none; } button { font:inherit; } img { max-width:100%; } .skip { position:fixed; top:-100px; left:16px; z-index:99; padding:10px; background:var(--white); } .skip:focus { top:16px; }
.site-header { height:82px; background:rgba(255,254,250,.94); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,80px); border-bottom:1px solid rgba(16,39,79,.13); position:sticky; top:0; z-index:50; }.brand { display:block; width:181px; }.brand img { display:block; width:100%; height:auto; }.site-header nav { display:flex; gap:clamp(18px,2vw,38px); height:100%; align-items:center; }.site-header nav a { font-size:15px; height:100%; display:grid; align-items:center; position:relative; }.site-header nav a.active:after { content:""; width:100%; height:3px; background:var(--red); position:absolute; bottom:0; }.nav-toggle { display:none; border:0; background:none; color:var(--ink); }
.eyebrow { font-size:12px; letter-spacing:.18em; font-weight:700; text-transform:uppercase; color:var(--red); }.section { padding:clamp(70px,9vw,150px) clamp(22px,8vw,140px); }.section-head { max-width:800px; margin-bottom:56px; }.section-head h2 { font:700 clamp(32px,4vw,64px)/1.15 var(--display); letter-spacing:-.055em; margin:14px 0; }.section-head p { color:var(--muted); font-size:17px; line-height:1.9; max-width:660px; }.button { display:inline-flex; align-items:center; gap:17px; font-weight:600; color:var(--white); background:var(--red); padding:15px 20px; }.button:after { content:"↗"; font-size:20px; }.button:hover { background:#ae1526; }.button.light { background:var(--white); color:var(--ink); }.button.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }.rule { border:0; border-top:1px solid var(--line); margin:0; }
.hero { min-height:calc(100vh - 82px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr); background:var(--ink); color:var(--white); overflow:hidden; }.hero-copy { padding:clamp(64px,10vw,160px) clamp(22px,8vw,140px); align-content:center; position:relative; z-index:1; }.hero h1 { font:900 clamp(44px,5.6vw,92px)/1.06 var(--display); letter-spacing:-.08em; margin:18px 0 25px; max-width:750px; }.hero p { max-width:570px; color:#dbe5f4; line-height:1.85; font-size:17px; margin:0 0 34px; }.hero-art { position:relative; min-height:500px; background:linear-gradient(135deg,#123c79 0%,#0b2144 62%,#071632 100%); overflow:hidden; }.road { position:absolute; width:140%; height:38%; border-top:2px solid rgba(255,255,255,.27); border-bottom:2px solid rgba(255,255,255,.16); transform:rotate(-38deg); right:-55%; top:37%; }.road:after { content:""; position:absolute; left:0; top:50%; width:100%; border-top:3px dashed var(--red); }.warehouse { position:absolute; right:13%; bottom:11%; width:71%; height:45%; background:linear-gradient(158deg,rgba(255,255,255,.19),rgba(255,255,255,.02)); clip-path:polygon(12% 20%,89% 0,100% 69%,16% 100%,0 77%); border:1px solid rgba(255,255,255,.5); }.warehouse:after { content:""; position:absolute; inset:19% 14%; background:repeating-linear-gradient(90deg,transparent 0 13%,rgba(255,255,255,.45) 13.3% 14%,transparent 14.3% 21%); }.route-dot { position:absolute; width:14px; height:14px; background:var(--red); border-radius:50%; box-shadow:0 0 0 12px rgba(207,38,54,.15); }.route-dot.one{ top:21%;left:18%; }.route-dot.two{ top:47%;right:32%; }.route-dot.three{ bottom:21%;left:27%; }.hero-stamp { position:absolute; bottom:36px; left:clamp(22px,8vw,140px); writing-mode:vertical-rl; color:#9cb2d2; letter-spacing:.2em; font-size:11px; }
.proof { display:grid; grid-template-columns:repeat(4,1fr); background:var(--white); }.proof-item { padding:34px clamp(18px,3vw,46px); border-right:1px solid var(--line); }.proof-item:last-child{ border-right:0 }.proof strong { display:block; font:700 30px/1 var(--display); letter-spacing:-.06em; margin-bottom:8px; }.proof span { font-size:13px; color:var(--muted); }
.service-strip { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.service-strip a { min-height:250px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; background:var(--paper); transition:.25s; }.service-strip a:hover{ background:var(--ink); color:var(--white); }.service-no { color:var(--red); font-weight:700; }.service-cn { font:700 46px/1 var(--display); letter-spacing:-.08em; }.service-en { font-size:12px; color:var(--muted); }.service-strip a:hover .service-en { color:#c3cee0; }
.digital { background:var(--warm); display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:end; }.digital h2 { font:700 clamp(34px,4.3vw,68px)/1.15 var(--display); letter-spacing:-.06em; margin:12px 0; }.digital p { max-width:500px; line-height:1.85; color:var(--muted); }.digital-list { border-top:1px solid rgba(16,39,79,.2); }.digital-list div { display:flex; justify-content:space-between; gap:30px; border-bottom:1px solid rgba(16,39,79,.2); padding:22px 0; }.digital-list strong { font-size:22px; }.digital-list span{ color:var(--muted); text-align:right; }.map { padding:clamp(60px,8vw,120px); background:var(--ink); color:var(--white); position:relative; overflow:hidden; }.map:after { content:""; width:75vw; height:75vw; position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:47% 53% 57% 43%; right:-25vw; top:-27vw; }.map h2 { font:700 clamp(34px,4.3vw,68px)/1.15 var(--display); letter-spacing:-.06em; position:relative; z-index:1; max-width:650px; }.cities { margin:58px 0 0; display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1; }.city { border:1px solid rgba(255,255,255,.3); padding:12px 17px; color:#dce5f4; }.client-wall { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.client-wall div { padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font:600 19px/1.2 var(--display); color:#61708a; }.posts { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.post { padding:28px; background:var(--white); border-top:3px solid var(--ink); min-height:235px; display:flex; flex-direction:column; }.post time{ color:var(--red); font-size:13px; font-weight:600; }.post h3 { font:700 23px/1.35 var(--display); margin:18px 0 12px; letter-spacing:-.04em; }.post p{ color:var(--muted); line-height:1.7; font-size:14px; margin:0; }.post .read { margin-top:auto; padding-top:20px; font-weight:600; }.cta { background:var(--red); color:var(--white); display:flex; align-items:end; justify-content:space-between; gap:30px; }.cta h2 { font:800 clamp(35px,5vw,78px)/1.1 var(--display); letter-spacing:-.07em; max-width:800px; margin:0; }.site-footer { background:#091a36; color:#d5deeb; padding:36px clamp(22px,8vw,140px) 24px; }.footer-top { display:flex; justify-content:space-between; align-items:center; gap:30px; padding-bottom:30px; }.footer-logo { width:180px; filter:brightness(0) invert(1); }.footer-links { display:flex; flex-wrap:wrap; gap:15px 28px; align-content:flex-start; }.footer-bottom { font-size:12px; color:#8293af; border-top:1px solid rgba(255,255,255,.17); padding-top:20px; }
.page-hero { padding:clamp(75px,10vw,145px) clamp(22px,8vw,140px) clamp(65px,8vw,115px); background:var(--ink); color:var(--white); }.page-hero h1 { font:800 clamp(44px,6vw,88px)/1.07 var(--display); letter-spacing:-.08em; margin:16px 0; }.page-hero p { color:#d5dfed; max-width:680px; line-height:1.85; font-size:17px; }.intro-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; }.intro-grid h2,.culture-grid h2 { font:700 clamp(30px,3.6vw,55px)/1.2 var(--display); letter-spacing:-.06em; margin:0; }.intro-grid p { font-size:18px; line-height:1.95; color:var(--muted); margin:0; }.timeline { margin-top:75px; border-top:1px solid var(--line); }.milestone { display:grid; grid-template-columns:180px 1fr; gap:30px; padding:24px 0; border-bottom:1px solid var(--line); }.milestone time { font:700 22px var(--display); color:var(--red); }.milestone h3 { margin:0 0 7px; font:700 22px var(--display); }.milestone p{ color:var(--muted); margin:0; line-height:1.7; }.culture-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.culture-card { background:var(--white); padding:38px; }.culture-card.wide { grid-column:span 2; background:var(--ink); color:var(--white); }.culture-card h3 { font:700 28px var(--display); margin:0 0 15px; letter-spacing:-.05em; }.culture-card p { line-height:1.8; color:var(--muted); margin:0; }.culture-card.wide p { color:#d1dced; }.certs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.cert { min-height:170px; background:var(--white); padding:25px; border-top:3px solid var(--red); display:flex; flex-direction:column; justify-content:space-between; }.cert b { font:700 25px var(--display); }.cert span { color:var(--muted); font-size:13px; }
.service-detail { display:grid; grid-template-columns:150px 1fr 1.2fr; gap:38px; padding:43px 0; border-top:1px solid var(--line); }.service-detail:last-child{ border-bottom:1px solid var(--line); }.service-detail .glyph { font:800 70px/.9 var(--display); color:var(--red); letter-spacing:-.1em; }.service-detail h2{ margin:0; font:700 32px var(--display); letter-spacing:-.06em; }.service-detail p{ margin:0; line-height:1.85; color:var(--muted); }.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }.chips span { padding:7px 11px; background:var(--warm); font-size:13px; }.scenario-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); }.scenario-grid div { padding:22px; background:var(--white); min-height:150px; }.scenario-grid strong { display:block; font:700 21px var(--display); }.scenario-grid span { color:var(--muted); font-size:13px; line-height:1.6; display:block; margin-top:10px; }
.tabs { display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:52px; }.tabs a { padding:0 0 15px; font:600 19px var(--display); color:var(--muted); }.tabs a.active { color:var(--ink); border-bottom:3px solid var(--red); }.activity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }.activity { padding:32px; background:var(--white); border-top:3px solid var(--ink); min-height:220px; }.activity time{ color:var(--red); font-size:13px; font-weight:600; }.activity h3{ margin:16px 0 10px; font:700 25px var(--display); letter-spacing:-.05em; }.activity p { color:var(--muted); line-height:1.7; }.benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }.benefits div{ min-height:165px; padding:25px; background:var(--warm); }.benefits b { display:block; font:700 21px var(--display); margin-bottom:12px; }.benefits span{ font-size:14px; line-height:1.6; color:var(--muted); }.job-list { border-top:1px solid var(--line); }.job { display:grid; grid-template-columns:1.2fr .8fr .7fr auto; gap:18px; align-items:center; padding:25px 0; border-bottom:1px solid var(--line); }.job h3 { margin:0; font:700 22px var(--display); }.job span{ color:var(--muted); }.job button { border:0; background:var(--ink); color:var(--white); padding:11px 15px; cursor:pointer; }.job-detail{ display:none; grid-column:1/-1; padding:24px; background:var(--warm); line-height:1.8; }.job.open .job-detail{ display:block; }.job-detail b{ display:block; margin-top:13px; }.news-list { border-top:1px solid var(--line); }.news-row{ display:grid; grid-template-columns:150px 1fr auto; gap:32px; padding:31px 0; border-bottom:1px solid var(--line); align-items:center; cursor:pointer; }.news-row time { color:var(--red); font-weight:600; }.news-row h2{ margin:0 0 8px; font:700 26px var(--display); letter-spacing:-.05em; }.news-row p{ margin:0; color:var(--muted); line-height:1.6; }.news-row .arrow{ font-size:25px; }.article { max-width:850px; }.article h1{ font:800 clamp(35px,5vw,66px)/1.16 var(--display); letter-spacing:-.07em; }.article time{ color:var(--red); font-size:14px; font-weight:600; }.article .body { margin-top:50px; color:#37485e; line-height:2; font-size:17px; }.article .back{ color:var(--red); font-weight:600; }.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:1px; background:var(--line); }.contact-card { background:var(--white); padding:clamp(30px,4vw,60px); min-height:330px; }.contact-card h2 { font:700 35px var(--display); letter-spacing:-.06em; margin:0 0 28px; }.contact-card p { line-height:1.9; color:var(--muted); }.contact-card b { color:var(--ink); }.qr-placeholder { width:154px; height:154px; background:repeating-linear-gradient(45deg,#10274f 0 7px,#fffefa 7px 14px); padding:15px; display:grid; place-items:center; color:var(--white); font-weight:700; text-align:center; }.locations { margin-top:62px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }.locations div { background:var(--warm); padding:25px; }.locations b{ display:block; font:700 22px var(--display); }.locations span { color:var(--muted); font-size:14px; }
@media (max-width:800px) { .site-header{ height:66px; padding:0 20px; }.brand{ width:143px; }.site-header nav { display:none; position:absolute; top:66px; right:0; left:0; height:auto; padding:15px 20px; background:var(--white); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; }.site-header nav.open{ display:flex; }.site-header nav a{ height:auto; padding:14px 0; }.site-header nav a.active:after{ width:3px; height:100%; left:-20px; bottom:0; }.nav-toggle{ display:block; }.hero{ min-height:auto; grid-template-columns:1fr; }.hero-copy{ padding-top:90px; padding-bottom:100px; }.hero-art{ min-height:310px; }.hero-stamp{ display:none; }.proof{ grid-template-columns:1fr 1fr; }.proof-item:nth-child(2){ border-right:0; }.proof-item:nth-child(-n+2){ border-bottom:1px solid var(--line); }.service-strip{ grid-template-columns:1fr 1fr; }.service-strip a{ min-height:180px; }.service-strip a:last-child{ grid-column:span 2; }.digital,.intro-grid,.contact-grid{ grid-template-columns:1fr; gap:40px; }.posts,.certs,.activity-grid{ grid-template-columns:1fr; }.client-wall{ grid-template-columns:1fr 1fr; }.client-wall div{ padding:22px; }.cta{ align-items:flex-start; flex-direction:column; }.footer-top{ flex-direction:column; }.page-hero{ padding-top:80px; }.milestone{ grid-template-columns:100px 1fr; gap:15px; }.culture-grid{ grid-template-columns:1fr; }.culture-card.wide{ grid-column:auto; }.service-detail{ grid-template-columns:70px 1fr; gap:18px; }.service-detail p{ grid-column:1/-1; }.service-detail .glyph{ font-size:52px; }.scenario-grid,.benefits,.locations{ grid-template-columns:1fr 1fr; }.job{ grid-template-columns:1fr auto; }.job span{ grid-column:1; }.job button{ grid-column:2; grid-row:1/3; }.news-row{ grid-template-columns:1fr auto; gap:12px; }.news-row time{ grid-column:1/-1; }.news-row p{ display:none; } }

/* Production footer records: the public-security slot stays hidden until an approved number exists. */
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px 28px; flex-wrap:wrap; }
.footer-records { display:flex; align-items:center; gap:18px; white-space:nowrap; }
.footer-records a { color:#aab6c8; text-underline-offset:4px; }
.footer-records a:hover,.footer-records a:focus-visible { color:#fffefa; }
@media (max-width:800px) { .footer-bottom { align-items:flex-start; flex-direction:column; } }

/* Final legal row: readable at normal viewing distance on desktop and mobile. */
.footer-bottom { font-size:14px; color:#9aabc3; line-height:1.6; }

/* Compact site map: primary pages stay prominent while frequent destinations remain one click away. */
.footer-top { align-items:flex-start; gap:clamp(44px,6vw,104px); padding-bottom:28px; }
.footer-brand { flex:0 0 auto; margin-top:3px; }
.footer-sitemap { flex:1; max-width:1080px; display:grid; grid-template-columns:minmax(210px,1.35fr) minmax(210px,1.35fr) minmax(70px,.55fr) minmax(120px,.78fr) minmax(90px,.68fr); gap:clamp(24px,2.5vw,44px); }
.footer-nav-group { min-width:0; }
.footer-nav-group__title { display:inline-flex; min-height:24px; align-items:center; color:#fffefa; font-size:16px; font-weight:650; line-height:1.5; }
.footer-nav-group__links { margin-top:11px; display:grid; gap:7px 18px; }
.footer-nav-group--wide .footer-nav-group__links { grid-template-columns:repeat(2,minmax(0,1fr)); }
.footer-nav-group__links a { width:max-content; max-width:100%; color:#9eacc0; font-size:14px; line-height:1.55; transition:color .2s ease,transform .2s ease; }
.footer-nav-group :is(a:hover,a:focus-visible) { color:#fffefa; }
.footer-nav-group__links a:hover,.footer-nav-group__links a:focus-visible { transform:translateX(2px); }

@media (max-width:1100px) {
  .footer-sitemap { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .footer-nav-group--wide { grid-column:span 2; }
}

@media (max-width:800px) {
  .footer-top { align-items:stretch; gap:30px; }
  .footer-sitemap { width:100%; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; }
  .footer-nav-group--wide { grid-column:span 2; }
  .footer-nav-group__title { font-size:16px; }
  .footer-nav-group__links a { font-size:14px; }
}

@media (max-width:440px) {
  .footer-sitemap { grid-template-columns:1fr 1fr; }
  .footer-nav-group--wide .footer-nav-group__links { grid-template-columns:1fr 1fr; }
}