.sec0{
position:relative;
width:100%;
height:140svh;
padding-bottom:min(300px, 25svh);
box-sizing:border-box;
display:flex; align-items:flex-start; justify-content:center;
overflow:clip;
isolation:isolate;
z-index:5;
box-shadow:inset 0 -.375rem 0 #000,
0 1.6rem 3.4rem -.6rem rgba(2,14,34,.55);
background:#1479d0 var(--bn-photo,
image-set(url("../../assets/v2/banner/road-wide.webp") 1x,
url("../../assets/v2/banner/road-wide@2x.webp") 2x))
left center/cover no-repeat;
font-family:"Be Vietnam Pro","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
color:#fff;
}
.sec0 .bn-stage{
position:sticky; top:max(200px, calc(var(--hh) + var(--hbar)));
height:min(calc(100svh - max(200px, calc(var(--hh) + var(--hbar))) - 8px),
calc(100vw / 1.5400));
aspect-ratio:1937.04 / 1257.84;
container-type:inline-size;
}
.sec0 .bn-say{ --say:1.03;
position:absolute; left:17.8%; top:21.9%; width:calc(44% * var(--say)); z-index:1 }
.sec0 .bn-h1{
margin:0; font-weight:800; letter-spacing:-.018em; line-height:.96;
text-shadow:0 .12cqw .5cqw rgba(0,32,64,.28);
text-transform:uppercase;
}
.sec0 .bn-l0{ display:block; font-size:calc(1.18cqw * var(--say)); font-weight:700;
letter-spacing:.2em; line-height:1; color:#fff; opacity:.95;
margin:0 0 calc(1.5cqw * var(--say)) .15em; text-shadow:0 .08cqw .35cqw rgba(0,32,64,.35) }
.sec0 .bn-l1{ display:block; font-size:calc(7.60cqw * var(--say)); transform-origin:left bottom;
transform:rotate(-2.39deg) scale(.82,1.1) skewX(-3.24deg) }
.sec0 .bn-l2{ display:block; font-size:calc(3.02cqw * var(--say)); font-weight:600; color:#f2f2f2;
margin:.28em 0 0 .38em; letter-spacing:-.01em;
transform-origin:left bottom;
transform:rotate(-2.39deg) scale(.83,1) skewX(-2.92deg) }
.sec0 .bn-l3{
margin:1.30em 0 0 .65em; font-size:calc(2.10cqw * var(--say)); font-weight:300; color:#f2f2f2;
letter-spacing:.005em; line-height:1.1; text-transform:uppercase;
}
.sec0 .bn-rule{ display:block; width:66.4%; height:calc(2.8cqw * var(--say)); margin:calc(.55cqw * var(--say)) 0 0 1.07%;
object-fit:fill }
.sec0 .bn-list{
list-style:none; margin:calc(.19cqw * var(--say)) 0 0 2.70%; padding:0;
max-width:67%;
font-size:calc(1.42cqw * var(--say)); line-height:1.30; color:#f2f2f2; font-weight:600;
text-shadow:0 .08cqw .35cqw rgba(0,32,64,.30);
}
.sec0 .bn-list li{ position:relative; padding-left:1.55em; margin:0 0 .75em }
.sec0 .bn-list b{ font-size:1.37em; font-weight:800; line-height:1; color:#fff }
.sec0 .bn-list li::before{
content:""; position:absolute; left:0; top:.30em;
width:1.05em; height:1.05em;
background:url("../../assets/v2/banner/tick.svg") no-repeat center/contain;
}
.sec0 .bn-form{
position:absolute; left:59.68%; top:14.09%; width:29.62%; height:66.73%;
z-index:2; display:flex; flex-direction:column; align-items:center;
box-sizing:border-box;
padding:4.32cqw 4.00cqw 3.42cqw;
background:var(--bn-panel,rgba(12,124,0,.9));
border:.155cqw solid #fff;
border-radius:1.78cqw;
box-shadow:0 1.2cqw 3.2cqw rgba(0,28,56,.30);
}
.sec0 .bn-f-h{
margin:0; align-self:flex-start; font-size:1.632cqw; font-weight:800;
letter-spacing:-.005em; line-height:1.1; color:#fff; text-transform:uppercase;
white-space:nowrap;
}
.sec0 .bn-f-sub{
margin:.22em 0 0; align-self:flex-start; font-size:1.382cqw; font-weight:300;
line-height:1.15; color:#fff; white-space:nowrap;
}
.sec0 .bn-fields{ width:100%; margin-top:2.07cqw; display:flex; flex-direction:column;
gap:.505cqw }
.sec0 .bn-f{ position:relative; display:block; width:100% }
.sec0 .bn-f input, .sec0 .bn-f select{
-webkit-appearance:none; appearance:none;
width:100%; height:3.09cqw; box-sizing:border-box;
border:0; border-radius:.79cqw; background:#fff;
font:inherit; font-size:.843cqw; font-weight:300; color:#001328;
padding:0 1.1cqw 0 2.92cqw;
line-height:3.09cqw;
}
.sec0 .bn-f select{ cursor:pointer; padding-right:2.4cqw }
.sec0 .bn-f input::placeholder{ color:#001328; opacity:1 }
.sec0 .bn-f :focus-visible{ outline:.18cqw solid #ffda00; outline-offset:.14cqw }
.sec0 .bn-f::before{
content:""; position:absolute; left:1.02cqw; top:50%; translate:0 -50%;
width:1.18cqw; height:1.18cqw; opacity:.92;
background:no-repeat center/contain;
}
.sec0 .bn-f:nth-child(1)::before{ background-image:url("../../assets/v2/banner/i-name.svg") }
.sec0 .bn-f:nth-child(2)::before{ background-image:url("../../assets/v2/banner/i-mail.svg") }
.sec0 .bn-f:nth-child(3)::before{ background-image:url("../../assets/v2/banner/i-web.svg") }
.sec0 .bn-f:nth-child(4)::before{ background-image:url("../../assets/v2/banner/i-phone.svg") }
.sec0 .bn-f:nth-child(5)::before{ background-image:url("../../assets/v2/banner/i-find.svg") }
.sec0 .bn-f:nth-child(6)::before{ background-image:url("../../assets/v2/banner/i-info.svg") }
.sec0 .bn-f:nth-child(7)::before{ background-image:url("../../assets/v2/banner/i-note.svg") }
.sec0 .bn-f--pick::after{
content:""; position:absolute; right:1.15cqw; top:50%; translate:0 -50%;
width:.85cqw; height:.85cqw; pointer-events:none;
background:no-repeat center/contain;
background-image:url("../../assets/v2/ui-select-arrow.svg");
}
.sec0 .bn-go{
margin-top:auto; width:71.45%; height:2.96cqw;
display:flex; align-items:center; justify-content:center; gap:.9cqw;
border:0; border-radius:.65cqw; cursor:pointer;
background:#ffda00; color:#001328;
font:inherit; font-size:1.155cqw; font-weight:800; letter-spacing:-.01em;
box-shadow:0 .35cqw 1.1cqw rgba(0,28,56,.28);
transition:background .16s ease, translate .16s ease;
}
.sec0 .bn-go:hover{ background:#ffe54d; translate:0 -.12cqw }
.sec0 .bn-go:focus-visible{ outline:.18cqw solid #fff; outline-offset:.2cqw }
.sec0 .bn-go-a{ width:1.55cqw; height:1.55cqw; flex:none }
.sec0 .form__status{
position:absolute; left:0; right:0; bottom:.75cqw; margin:0; text-align:center;
font-size:.85cqw; font-weight:600; color:#fff;
}
.sec0 .form__status.is-err{ color:#ffd2d2 }
.sec0 .form__status.is-ok { color:#d6ffd2 }
.sec0 .sr-only{
position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
@media (max-width:900px) and (pointer:coarse){
.sec0{
aspect-ratio:1088.16 / 3411.84;
height:auto;
max-height:none;
background-image:var(--bn-photo-mob,url("../../assets/v2/banner/road-tall.webp"));
background-attachment:scroll;
margin-top:0; padding-top:0; padding-bottom:0;
}
.sec0 .bn-stage{ position:relative; top:auto;
aspect-ratio:1088.16 / 3411.84; width:100%; height:100% }
.sec0 .bn-say{ --say:1; left:13.18%; top:8.82%; width:86%;
display:flex; flex-direction:column; align-items:flex-start }
.sec0 .bn-h1{ display:contents }
.sec0 .bn-l0{ order:0; font-size:3.55cqw; letter-spacing:.16em; margin:0 0 2.6cqw .4em }
.sec0 .bn-l1{ font-size:17.04cqw; order:1 }
.sec0 .bn-l2{ font-size:6.76cqw; font-weight:800; margin:.30em 0 0 .10em; order:2 }
.sec0 .bn-rule{ order:3; width:88.2%; height:5.52cqw; margin:2.23cqw 0 0 2.5% }
.sec0 .bn-l3{ order:4; margin:1.05cqw 0 0 .35%; line-height:1.02 }
.sec0 .bn-l3 span{ display:block; font-size:5.16cqw; font-weight:600 }
.sec0 .bn-l3b{ font-size:9.78cqw !important; font-weight:800 !important }
.sec0 .bn-list{ order:5; margin:12.2cqw 0 0 13.8%; max-width:none;
font-size:3.64cqw }
.sec0 .bn-form{
left:9.22%; top:46.36%; width:83.89%; height:39.14%;
padding:12.17cqw 11.34cqw 9.68cqw;
background:var(--bn-panel-mob,rgba(0,43,97,.41));
border-radius:3.16cqw;
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
border:.18cqw solid rgba(255,255,255,.28);
}
.sec0 .bn-f-h{ font-size:4.627cqw }
.sec0 .bn-f-sub{ font-size:3.917cqw; margin:.18em 0 0 }
.sec0 .bn-fields{ margin-top:4.6cqw; gap:1.43cqw }
.sec0 .bn-f input, .sec0 .bn-f select{
height:8.74cqw; line-height:8.74cqw; border-radius:1.41cqw;
font-size:2.39cqw; padding:0 3.2cqw 0 8.1cqw;
}
.sec0 .bn-f::before{ left:2.9cqw; width:3.3cqw; height:3.3cqw }
.sec0 .bn-f--pick::after{ right:3.1cqw; width:2.4cqw; height:2.4cqw }
.sec0 .bn-go{ width:71.46%; height:8.38cqw; border-radius:1.16cqw;
font-size:3.27cqw; gap:2.2cqw }
.sec0 .bn-go-a{ width:4.4cqw; height:4.4cqw }
.sec0 .form__status{ bottom:2.2cqw; font-size:2.4cqw }
}