[class^="mob-"],[class*=" mob-"]{ display:none }
.mob-wrap{ display:contents }
html,body{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
@media (max-width:900px) and (pointer:coarse){
html,body{ overflow-x:clip }
:root{
--mix:7vw;    
--t-h1a:   clamp(27px, 7.85vw, 36px);   
--t-h1b:   clamp(44px, 12.8vw, 58px);   
--t-h1c:   clamp(19px, 5.59vw, 26px);   
--t-h2:    clamp(35px, 10.1vw, 46px);   
--t-h2b:   clamp(32px, 9.2vw, 42px);    
--t-lead:  clamp(19px, 5.67vw, 26px);   
--t-leadb: clamp(18px, 5.13vw, 24px);   
--t-body:  clamp(16px, 4.63vw, 21px);   
--t-bodyb: clamp(15px, 4.19vw, 19px);   
--t-board: clamp(21px, 6.05vw, 28px);   
--t-banner:clamp(14px, 4.15vw, 19px);   
--t-cta:   clamp(18px, 5.33vw, 24px);   
--t-cta2:  clamp(14px, 4.04vw, 19px);   
--t-rest:  clamp(14px, 3.98vw, 18px);   
--t-sign:  clamp(24px, 6.89vw, 32px);   
--t-signp: clamp(15px, 4.44vw, 20px);   
--t-h3:    clamp(28px, 8.0vw, 36px);    
--t-h3s:   clamp(15px, 4.45vw, 20px);   
--t-card:  clamp(20px, 5.91vw, 27px);   
--t-cardp: clamp(11px, 3.15vw, 14px);   
--t-learn: clamp(11px, 3.26vw, 15px);   
}
:root{
--mob-blue:#00287d;      
--mob-blue-2:#045dc3;    
--mob-sand:#fbe7c2;
--mob-ink:#fff;
--mob-pad:7vw;           
--mob-tar:#5b5b5b;
--mob-gold:#e8b800;
}
:root[data-mode="night"]{ --mob-blue:#020a1e; --mob-blue-2:#062a5c;
--mob-sand:#2a2418; --mob-tar:#242a34; --mob-gold:#8a6a26 }
.sec1,.sec2,.sec4{
position:relative; width:100%; margin:0; padding:0;
height:auto; min-height:0; aspect-ratio:auto;
display:flex; flex-direction:column; align-items:stretch;
container-type:normal;
background:linear-gradient(180deg,var(--mob-blue) 0,var(--mob-blue-2) 100%);
}
.sec1 > .page{ display:contents }
:root .sec1 .page > *, :root .sec2 > *, :root .sec4 > *{
display:none;
}
.sec1 > .traffic, .sec2 > .traffic,
.sec3 > .traffic, .sec4 > .traffic{ display:none }
.mob-road{ position:relative }
:root .sec1 .copy, :root .sec2 .copy, :root .sec4 .copy,
:root .sec1 .cta, :root .sec4 .cta, :root .sec4 .sign-copy{
position:static !important; inset:auto !important;
width:min(91vw,470px) !important; max-width:none !important;
height:auto !important;
margin-left:auto !important; margin-right:auto !important; padding:0;
text-align:center; transform:none !important;
white-space:normal !important;
}
:root .sec1 h1{
font-size:var(--t-h1b) !important; line-height:.92;
letter-spacing:-.01em; margin:0 0 .5em; white-space:normal !important;
}
:root .sec1 h2.copy{
font-size:var(--t-h2) !important; line-height:1.2;
letter-spacing:-.01em; margin:0 0 .42em; white-space:normal !important;
}
:root .sec2 h2.copy{
font-size:var(--t-h2b) !important; line-height:1.2;
letter-spacing:-.01em; margin:0 0 .42em; white-space:normal !important;
}
:root .sec1 h1 .l1{ font-size:.578em !important }
:root .sec1 h1 .l2{ font-size:1em !important }
:root .sec1 h1 .l3{ font-size:.412em !important; line-height:1.24 }
:root .sec1 h1 span,:root .sec2 h2 span{ display:block }
:root .sec1 .sub{
font-size:var(--t-lead) !important; line-height:1.18;
margin:0 0 1.05em; font-weight:400;
}
:root .sec2 .sub{
font-size:var(--t-leadb) !important; line-height:1.18;
margin:0 0 1.05em; font-weight:400;
}
:root .sec1 .sub span,:root .sec2 .sub span{
display:block; white-space:normal !important;
}
:root .sec1 .page > .body:last-of-type,
:root .sec2 > .body{ margin-bottom:clamp(52px,15vw,86px) !important }
:root .sec1 .body,:root .sec4 .body{
font-size:var(--t-body) !important; line-height:1.18;
margin:0 0 1.4em; font-weight:300;
}
:root .sec2 .body{
font-size:var(--t-bodyb) !important; line-height:1.18;
margin:0 0 1.4em; font-weight:300;
}
:root .sec1 .body br,:root .sec2 .body br,:root .sec4 .body br{ display:none }
:root .sec1 .body span,:root .sec4 .body span{ display:inline }
:root .sec4 .body span + span::before{ content:" " }
.mob-road{ display:block; width:100%; line-height:0 }
.mob-road svg{ display:block; width:100%; height:auto }
.mob-board{
display:block; position:relative; width:86vw; max-width:420px;
margin:clamp(96px,38.5vw,190px) auto clamp(56px,21.8vw,104px);
}
.mob-board svg{ display:block; width:100%; height:auto }
.mob-board ul{
position:absolute; left:0; right:0;
top:20.4%; bottom:5.8%;
margin:0; padding:0; list-style:none;
display:grid; grid-template-rows:repeat(4,1fr);
}
.mob-board li{ display:grid; align-items:center }
.mob-board a{
display:block; padding:0 24% 0 6.5%;
color:#fff; text-decoration:none;
font-family:"Be Vietnam Pro",system-ui,sans-serif; font-weight:700;
font-size:var(--t-board); line-height:1.1;
}
.mob-board a:active{ opacity:.7 }
.mob-board .mob-banner{
position:absolute; left:0; right:0; top:0; height:17.03%;
margin:0; padding:0 3% 0 1.5%;
display:flex; align-items:center; gap:2.5%;
}
.mob-board .mob-banner img{
display:block; width:23%; height:auto; flex:0 0 auto;
margin:-19% 0;
}
.mob-board .mob-banner b{
color:#1a1a1a; font-family:"Be Vietnam Pro",system-ui,sans-serif;
font-weight:800; font-size:var(--t-banner); line-height:1.14;
letter-spacing:-.01em;
}
.mob-board .mob-gantry{
display:block; position:absolute; left:60%; right:-30vw; top:34%; height:14%;
background:url("../../assets/v2/section-01/truss-cell.webp") repeat-x center;
background-size:auto 100%; z-index:-1; pointer-events:none;
}
:root .sec1 .page > .mob-board,
:root .sec1 .page > .mob-road,
:root .sec1 .page > .copy,
:root .sec1 .page > .cta{ display:block }
:root .sec1 .page > .cta,:root .sec4 > .cta{
position:relative !important;
margin:clamp(10px,3vw,18px) auto clamp(52px,15vw,86px) !important;
width:min(80vw,360px) !important;
}
:root .sec1 .cta span{ font-size:var(--t-cta) !important; font-weight:700 }
:root .sec4 .cta span{ font-size:var(--t-cta2) !important; font-weight:700 }
:root .sec1 .page > .mob-head{
display:flex; align-items:center; justify-content:center;
gap:4.5vw; width:min(94vw,470px);
margin:clamp(46px,13vw,78px) auto clamp(16px,4.5vw,24px);
}
:root .sec1 .mob-head > svg.z-copy{
display:block; flex:0 0 auto; position:static !important;
width:clamp(50px,15.9vw,73px) !important; height:auto !important;
margin:0 !important; inset:auto !important;
}
:root .sec1 .mob-head:has(h2) > svg.z-copy{
width:clamp(70px,22.6vw,104px) !important;
}
:root .sec1 .mob-head > .copy,:root .sec1 .mob-head > h2.copy{
margin:0 !important; width:auto !important; max-width:none !important;
flex:0 1 auto; text-align:left;
}
:root .sec1 .mob-head h1,:root .sec1 .mob-head h2.copy{ margin:0 }
:root .sec1 .page > svg.z-copy,
:root .sec2 > svg.z-copy{
display:block; position:static !important;
width:clamp(84px,25.9vw,118px) !important; height:auto !important;
margin:clamp(40px,11vw,66px) auto clamp(16px,4.4vw,24px) !important;
}
:root .sec2 > .sand{ display:none }
:root .sec2 > .waves,:root .sec2 .waves.z-ground{ display:block; position:relative;
width:100%; height:clamp(119px,36.2vw,186px); margin:0; inset:auto;
overflow:visible; clip-path:inset(0 0 -18px 0);
background: var(--sec1-fade,
linear-gradient(90deg,#014ea5 0%,#055fc6 100%)) }
:root .sec2 .waves .wave{
width:184% !important; left:-42% !important;
height:170.6vw !important; top:-62.6vw !important;
preserveAspectRatio:none;
}
:root .sec2 .waves{ --swell:5 }
:root .sec2 .wave-surf { --dur:6s }
:root .sec2 .wave-mid  { --dur:8s }
:root .sec2 .wave-swell{ --dur:10s }
:root .sec2 .wave-far  { --dur:13s }
:root .sec2 > .copy,:root .sec2 > .mob-road{ display:block }
.sec2{ background:var(--mob-sand); color:#241a06 }
.sec2 h2,.sec2 .sub,.sec2 .body{ color:#241a06 }
:root[data-mode="night"] .sec2{ color:#d9cdb6 }
:root[data-mode="night"] .sec2 h2,:root[data-mode="night"] .sec2 .sub,
:root[data-mode="night"] .sec2 .body{ color:#d9cdb6 }
.sec3{ margin-top:0 !important }
.sec3{ position:relative; z-index:1;
overflow:visible !important;
clip-path:inset(0 -60% calc(-1 * var(--mix)) -60%) }
.sec4{ margin-top:0 !important }
.sec3{ display:block; padding:0; overflow:hidden }
:root .sec3 .mob-scene{
display:block; position:absolute; inset:0;
transform:scale(1.35); transform-origin:50% 100%;
}
:root .sec3 .mob-scene > svg.z-ground[style*="width:99.783%"],
:root .sec3 .mob-scene > svg.z-ground[style*="width:103.75%"]{
transform:translateY(calc(var(--mix) / 1.35));
}
:root .sec3 .z-road, :root .sec3 .z-cloud{ display:none }
.sec4{ background:#1a8820; padding-bottom:26vw }
:root .sec4 > .z-back{ display:block; position:static !important;
width:168% !important; max-width:none !important;
margin:-21vw 0 0 -34% !important;
height:auto !important; inset:auto !important }
:root .sec4 .signlamps{ display:none !important }
:root .sec4 .mob-sign > .our-sign{ display:none !important }
:root .sec4 .mob-sign > .mob-gantry{ display:none !important }
:root .sec4 > .mob-sign{
display:block; position:relative; z-index:2;
width:92.8vw; max-width:470px;
aspect-ratio:1002.82 / 744.19;
margin:-70vw 0 clamp(20px,6vw,32px) auto;
}
:root .sec4 .mob-sign > .mob-restsign{
display:block; position:absolute; inset:0;
width:100%; height:100%; margin:0; max-width:none;
}
:root .sec4 .mob-sign > .mob-restlabel{
display:block; position:absolute;
left:33.4%; top:10.4%; height:6.4%;
line-height:1; color:#1a1a1a;
font-family:"Be Vietnam Pro",system-ui,sans-serif; font-weight:800;
font-size:var(--t-rest); letter-spacing:.005em; white-space:nowrap;
}
:root .sec4 .mob-sign > .sign-copy{
display:block !important; position:absolute !important;
left:2.5% !important; right:14.5% !important;
top:27.6% !important; bottom:auto !important;
transform:none !important;
width:auto !important; height:auto !important; margin:0 !important;
text-align:center; padding:0 !important; overflow:visible;
}
:root .sec4 .mob-sign h2,:root .sec4 .mob-sign p{
transform:scaleX(.82) !important; transform-origin:50% 50%;
width:121.95% !important; margin-left:-10.98% !important;
white-space:normal !important; text-align:center;
}
:root .sec4 .mob-sign h2{
font-size:var(--t-sign) !important; line-height:.97;
margin:0 0 .5em -10.98% !important;
}
:root .sec4 .mob-sign p{
font-size:var(--t-signp) !important; line-height:1.01;
width:103% !important; margin:0 0 0 -1.5% !important;
}
:root .sec4 .mob-sign h2 br{ display:inline }
:root .sec4 .par-sign-m{ --par:9; --par-bias:-0.12 }
:root[data-mode="night"] .sec4 .mob-restsign,
:root[data-theme="dark"]:not([data-mode="day"]) .sec4 .mob-restsign{
filter:brightness(.40) saturate(.72);
}
:root[data-mode="night"] .sec4 .mob-restlabel,
:root[data-theme="dark"]:not([data-mode="day"]) .sec4 .mob-restlabel{
color:#4a4028;
}
:root .sec4 > .mob-roadv{
display:block; position:absolute; left:80.1%; right:auto;
top:clamp(80px,24vw,126px); width:47.5%;
z-index:0; pointer-events:none; line-height:0;
}
.sec4{ overflow:hidden }
:root .sec4 .mob-roadv svg{ display:block; width:100%; height:auto }
:root .sec4 > .z-back,:root .sec4 > .mob-sign,:root .sec4 > .body,
:root .sec4 > .mob-btn{ position:relative; z-index:1 }
:root .sec4 > .body,:root .sec4 > .mob-btn{
width:min(70vw,380px) !important;
margin-left:6.5vw !important; margin-right:auto !important;
}
:root .sec4 > .body{ display:block; color:#fff }
:root .sec4 > .mob-btn{
display:block; position:relative; width:min(80vw,340px);
margin:0 auto clamp(26px,8vw,42px);
}
:root .sec4 .mob-btn > svg.z-copy{
display:block; position:static !important; width:100% !important;
height:auto !important; inset:auto !important;
}
:root .sec4 .mob-btn > .cta{
position:absolute !important; left:0 !important; right:0 !important;
top:50% !important; transform:translateY(-50%) !important;
width:auto !important; margin:0 !important; text-align:center;
font-size:clamp(14px,4vw,17px) !important; white-space:nowrap !important;
}
:root .sec4 .body span{ white-space:normal !important }
.sec4 > .z-ground{ display:none }
.sec4 > .rock-layer,.sec4 > .z-ground.rock-shadow{ display:none }
.sec6{ display:flex; flex-direction:column;
height:auto !important; min-height:0; aspect-ratio:auto !important;
background:var(--sec6-bg,#fff);
overflow:visible !important;
clip-path:inset(-34vw -60% 0 -60%);
padding:0 0 clamp(34px,10vw,60px) }
:root .sec6 > .rock-layer{
display:block; position:static !important; order:-1;
width:177% !important; height:auto !important; aspect-ratio:1918.34 / 497.43;
margin:-32vw -38.5% clamp(24px,7vw,40px) !important; inset:auto !important;
}
:root .sec6 > .mob-cast{
display:block; position:absolute !important;
width:177% !important; height:auto !important; aspect-ratio:1918.34 / 497.43;
margin:0 !important; z-index:1; pointer-events:none;
right:auto !important; bottom:auto !important;
left:-38.5% !important; top:-32vw !important;
}
:root .sec6 > .sky-cloud{ display:none }
:root .sec6 .page{ position:static; width:auto; margin:0 3.6vw;
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4.3vw }
:root .sec6 .page .copy .mob-br{ display:block; height:0 }
:root .sec6 .page > .copy{ grid-column:1 / -1; position:static !important;
width:auto !important; margin:0 0 .2em; text-align:left;
font-size:var(--t-h3) !important; line-height:1 }
:root .sec6 .page > .copy.sub{ font-size:var(--t-h3s) !important;
margin:0 0 1.5em; font-weight:500; line-height:1.2 }
:root .sec6 .page .card{
position:relative !important; inset:auto !important;
width:auto !important; height:auto !important; margin:0 !important;
transform:none !important; font-size:inherit;
display:flex; flex-direction:column; align-items:center;
aspect-ratio:475.97 / 832.86; min-width:0;
padding:0 0 5.8%; overflow:visible;
}
:root .sec6 .page .card > *{
position:static !important; inset:auto !important;
width:auto !important; height:auto !important;
margin:0 !important; transform:none !important;
}
:root .sec6 .page .card:nth-of-type(1){ order:3 }   
:root .sec6 .page .card:nth-of-type(2){ order:4 }   
:root .sec6 .page .card:nth-of-type(3){ order:1 }   
:root .sec6 .page .card:nth-of-type(4){ order:2 }   
:root .sec6 .page .card .label{ width:46.7% !important; height:auto !important;
margin-top:-2.3% !important }
:root .sec6 .page .card h3{ padding:0 2% }
:root .sec6 .page .card p { padding:0 8% }
:root .sec6 .page .card > .icon{
position:absolute !important; left:50% !important; top:0.6% !important;
width:26% !important; height:auto !important; max-width:none !important;
transform:translateX(-50%) !important; margin:0 !important;
}
:root .sec6 .page .card h3{
font-size:var(--t-card) !important; line-height:1;
margin:.66em 0 .52em !important; text-align:center;
}
:root .sec6 .page .card p{
font-size:var(--t-cardp) !important; line-height:1.12; font-weight:300;
margin:0 0 1.3em !important; text-align:center;
color:var(--card-sub, #333);
}
:root .sec6 .page .card p br{ display:none }
:root .sec6 .page .card .btn{
position:static !important; opacity:1 !important; translate:none !important;
pointer-events:auto !important; transition:none !important;
width:75.6% !important; margin-top:auto !important;
padding:.62em 0 !important; border-radius:.42em !important;
border-width:1px !important;
font-size:var(--t-learn) !important; font-weight:500; white-space:nowrap;
}
:root .sec6 .page h2.copy{ white-space:normal !important }
:root .sec6 .page .sub{ white-space:normal !important }
.mode-switch{ z-index:10002 }
.hdr .mode-switch{ z-index:auto }
}