.sec1{
--col: 1924.34;              
position: relative;
width: 100%;
aspect-ratio: 1924.34 / 1935.68;
container-type: inline-size;
background: var(--sec1-bg,
linear-gradient(180deg,
rgba(0,40,125,1) 0%,          
rgba(0,40,125,1) 6.460%,
rgba(0,41,126,.98) 28.736%,
rgba(0,45,131,.9) 45.443%,
rgba(0,51,140,.78) 59.366%,
rgba(1,61,152,.6) 72.360%,
rgba(2,73,168,.37) 84.426%,
rgba(3,87,188,.1) 95.564%,
rgba(4,93,195,0) 99.277%),
linear-gradient(90deg, #004ca2 0%, #045dc3 100%));
overflow: hidden;            
isolation: isolate;
}
.sec1 .page{ position:absolute; left:0; right:0; top:6.46%; bottom:0 }
.sec1 [data-at]{ position:absolute; display:block; }
.sec1 img[data-at], .sec1 svg[data-at]{ height:auto; }
.sec1::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:14%;
background: var(--sec1-fade,
linear-gradient(90deg,#014ea5 0%,#055fc6 100%));
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
z-index:0; pointer-events:none;
}
.sec1 .z-ground { z-index:0 }
.sec1 .z-road   { z-index:1 }
.sec1 .z-copy   { z-index:2 }
.sec1 .z-sign   { z-index:3 }
.sec1 .z-cloud  { z-index:4 }
.sec1 .truss{
position:absolute; display:block;
left:0; right:0; width:100%;
top:16.28%; height:8.65%;
background:url("../../assets/v2/section-01/truss-cell.webp") repeat-x center;
background-size:auto 100%;
z-index:2;
}
.sec1 .copy{
position:absolute;
margin:0;
text-align:center;
color:#fff;
font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
}
.sec1 .copy h1,.sec1 .copy h2,.sec1 h2.copy{ margin:0; font-weight:900; line-height:1.06 }
.sec1 .copy h1 span{ display:block }
.sec1 .l1{ font-size:2.271cqw }                 
.sec1 .l2{ font-size:3.927cqw }                 
.sec1 .l3{ font-size:1.621cqw }                 
.sec1 h2.copy{ font-size:2.749cqw; white-space:nowrap }   
.sec1 .sub span{ display:block; white-space:nowrap }
.sec1 .sub{
font-size:1.230cqw;                           
font-weight:400; line-height:1.28;
font-family:"Highway Gothic Expanded","Be Vietnam Pro",Arial,sans-serif;
}
.sec1 .body{ font-size:1.025cqw; font-weight:300; line-height:1.42 }  
.sec1 .cta{ position:relative; display:inline-block; text-decoration:none }
.sec1 .cta img,
.sec1 .cta svg.plate{ display:block; width:100%; height:auto }
.sec1 .cta svg.plate [fill="#059236"]{
fill: var(--cta-plate, #059236);
stroke: var(--cta-line, none);
stroke-miterlimit:10;
transition: fill 1s linear, stroke 1s linear;
}
.sec1 .cta{
filter: var(--cta-glow, none);
transition: filter 1s linear;
}
.sec1 .cta span{
font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
position:absolute; left:23.37%; right:0; top:50%; transform:translateY(-50%);
color:#fff; font-weight:800; font-size:7.07cqi; white-space:nowrap;
text-align:center;
}
.sec1 svg.z-sign{ position:absolute; display:block; height:auto }
.sec1 [style*="--sx"]{
transform:scaleX(var(--sx));
transform-origin:50% 0;
}
.sec1 .z-sign .svc{ cursor:pointer }
.sec1 .z-sign .svc .ul{
transform-box:fill-box; transform-origin:50% 50%;
transform:scaleX(0.3);
opacity:0;
transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s linear;
}
.sec1 .z-sign .svc:hover .ul,
.sec1 .z-sign .svc:focus-visible .ul,
.sec1 .z-sign .svc:focus-within .ul{
transform:scaleX(1);
opacity:1;
}
@media (prefers-reduced-motion: reduce){
.sec1 .z-sign .svc .ul{ transition:opacity .18s linear; transform:scaleX(1) }
}
.sec1 .cruise{
--rx: 5.2cqw; --ry: 10cqw;
animation: cruise-move 75s linear infinite;
}
.sec1 .cruise > *{ animation: cruise-turn 75s linear infinite }
.sec1 .cruise-fast{
--lane: 7.2cqw; --run: 64cqw;
animation: dash-move 24s linear infinite;
}
.sec1 .cruise-fast > *{ animation: dash-turn 24s linear infinite }
.sec1 .cruise-fast.still, .sec1 .cruise-fast.still > *{ animation-play-state:paused }
.sec1 .fast-boat > .shade{ left:-3.450%; top:-0.055%; width:106.898% }
@media (prefers-reduced-motion: reduce){
.sec1 .cruise-fast, .sec1 .cruise-fast > *{ animation:none }
}
.sec1 .cruise.still, .sec1 .cruise.still > *{ animation-play-state:paused }
.sec1 .boat > .shade{ left:3.220%; top:-4.513%; width:93.559% }
@media (prefers-reduced-motion: reduce){
.sec1 .cruise, .sec1 .cruise > *{ animation:none }
}
@keyframes cruise-move{
0% { translate: calc(var(--rx) * 0.00000) calc(var(--ry) * 0.00000) }
4.1667% { translate: calc(var(--rx) * 0.03407) calc(var(--ry) * -0.25882) }
8.3333% { translate: calc(var(--rx) * 0.13397) calc(var(--ry) * -0.50000) }
12.5% { translate: calc(var(--rx) * 0.29289) calc(var(--ry) * -0.70711) }
16.6667% { translate: calc(var(--rx) * 0.50000) calc(var(--ry) * -0.86603) }
20.8333% { translate: calc(var(--rx) * 0.74118) calc(var(--ry) * -0.96593) }
25% { translate: calc(var(--rx) * 1.00000) calc(var(--ry) * -1.00000) }
29.1667% { translate: calc(var(--rx) * 1.25882) calc(var(--ry) * -0.96593) }
33.3333% { translate: calc(var(--rx) * 1.50000) calc(var(--ry) * -0.86603) }
37.5% { translate: calc(var(--rx) * 1.70711) calc(var(--ry) * -0.70711) }
41.6667% { translate: calc(var(--rx) * 1.86603) calc(var(--ry) * -0.50000) }
45.8333% { translate: calc(var(--rx) * 1.96593) calc(var(--ry) * -0.25882) }
50% { translate: calc(var(--rx) * 2.00000) calc(var(--ry) * -0.00000) }
54.1667% { translate: calc(var(--rx) * 1.96593) calc(var(--ry) * 0.25882) }
58.3333% { translate: calc(var(--rx) * 1.86603) calc(var(--ry) * 0.50000) }
62.5% { translate: calc(var(--rx) * 1.70711) calc(var(--ry) * 0.70711) }
66.6667% { translate: calc(var(--rx) * 1.50000) calc(var(--ry) * 0.86603) }
70.8333% { translate: calc(var(--rx) * 1.25882) calc(var(--ry) * 0.96593) }
75% { translate: calc(var(--rx) * 1.00000) calc(var(--ry) * 1.00000) }
79.1667% { translate: calc(var(--rx) * 0.74118) calc(var(--ry) * 0.96593) }
83.3333% { translate: calc(var(--rx) * 0.50000) calc(var(--ry) * 0.86603) }
87.5% { translate: calc(var(--rx) * 0.29289) calc(var(--ry) * 0.70711) }
91.6667% { translate: calc(var(--rx) * 0.13397) calc(var(--ry) * 0.50000) }
95.8333% { translate: calc(var(--rx) * 0.03407) calc(var(--ry) * 0.25882) }
100% { translate: calc(var(--rx) * 0.00000) calc(var(--ry) * 0.00000) }
}
@keyframes cruise-turn{
0% { rotate: -0.00deg }
4.1667% { rotate: 15.00deg }
8.3333% { rotate: 30.00deg }
12.5% { rotate: 45.00deg }
16.6667% { rotate: 60.00deg }
20.8333% { rotate: 75.00deg }
25% { rotate: 90.00deg }
29.1667% { rotate: 105.00deg }
33.3333% { rotate: 120.00deg }
37.5% { rotate: 135.00deg }
41.6667% { rotate: 150.00deg }
45.8333% { rotate: 165.00deg }
50% { rotate: 180.00deg }
54.1667% { rotate: 195.00deg }
58.3333% { rotate: 210.00deg }
62.5% { rotate: 225.00deg }
66.6667% { rotate: 240.00deg }
70.8333% { rotate: 255.00deg }
75% { rotate: 270.00deg }
79.1667% { rotate: 285.00deg }
83.3333% { rotate: 300.00deg }
87.5% { rotate: 315.00deg }
91.6667% { rotate: 330.00deg }
95.8333% { rotate: 345.00deg }
100% { rotate: 360.00deg }
}
.sec1 .sign-shadow{
position:absolute; z-index:2; background:#000; border-radius:1.372cqw;
pointer-events:none;
}
@keyframes dash-move{
0% { translate: calc(var(--lane) * 0.00000) 0 }
21.2479% { translate: calc(var(--lane) * 0.00000) calc(var(--run) * -0.50000) }
42.4957% { translate: calc(var(--lane) * 0.00000) calc(var(--run) * -1.00000) }
42.8084% { translate: calc(var(--lane) * -0.00428) calc(var(--run) * -1.00000 + var(--lane) * -0.06526) }
43.1211% { translate: calc(var(--lane) * -0.01704) calc(var(--run) * -1.00000 + var(--lane) * -0.12941) }
43.4338% { translate: calc(var(--lane) * -0.03806) calc(var(--run) * -1.00000 + var(--lane) * -0.19134) }
43.7465% { translate: calc(var(--lane) * -0.06699) calc(var(--run) * -1.00000 + var(--lane) * -0.25000) }
44.0591% { translate: calc(var(--lane) * -0.10332) calc(var(--run) * -1.00000 + var(--lane) * -0.30438) }
44.3718% { translate: calc(var(--lane) * -0.14645) calc(var(--run) * -1.00000 + var(--lane) * -0.35355) }
44.6845% { translate: calc(var(--lane) * -0.19562) calc(var(--run) * -1.00000 + var(--lane) * -0.39668) }
44.9972% { translate: calc(var(--lane) * -0.25000) calc(var(--run) * -1.00000 + var(--lane) * -0.43301) }
45.3098% { translate: calc(var(--lane) * -0.30866) calc(var(--run) * -1.00000 + var(--lane) * -0.46194) }
45.6225% { translate: calc(var(--lane) * -0.37059) calc(var(--run) * -1.00000 + var(--lane) * -0.48296) }
45.9352% { translate: calc(var(--lane) * -0.43474) calc(var(--run) * -1.00000 + var(--lane) * -0.49572) }
46.2479% { translate: calc(var(--lane) * -0.50000) calc(var(--run) * -1.00000 + var(--lane) * -0.50000) }
46.5605% { translate: calc(var(--lane) * -0.56526) calc(var(--run) * -1.00000 + var(--lane) * -0.49572) }
46.8732% { translate: calc(var(--lane) * -0.62941) calc(var(--run) * -1.00000 + var(--lane) * -0.48296) }
47.1859% { translate: calc(var(--lane) * -0.69134) calc(var(--run) * -1.00000 + var(--lane) * -0.46194) }
47.4986% { translate: calc(var(--lane) * -0.75000) calc(var(--run) * -1.00000 + var(--lane) * -0.43301) }
47.8113% { translate: calc(var(--lane) * -0.80438) calc(var(--run) * -1.00000 + var(--lane) * -0.39668) }
48.1239% { translate: calc(var(--lane) * -0.85355) calc(var(--run) * -1.00000 + var(--lane) * -0.35355) }
48.4366% { translate: calc(var(--lane) * -0.89668) calc(var(--run) * -1.00000 + var(--lane) * -0.30438) }
48.7493% { translate: calc(var(--lane) * -0.93301) calc(var(--run) * -1.00000 + var(--lane) * -0.25000) }
49.062% { translate: calc(var(--lane) * -0.96194) calc(var(--run) * -1.00000 + var(--lane) * -0.19134) }
49.3746% { translate: calc(var(--lane) * -0.98296) calc(var(--run) * -1.00000 + var(--lane) * -0.12941) }
49.6873% { translate: calc(var(--lane) * -0.99572) calc(var(--run) * -1.00000 + var(--lane) * -0.06526) }
50% { translate: calc(var(--lane) * -1.00000) calc(var(--run) * -1.00000 + var(--lane) * -0.00000) }
71.2479% { translate: calc(var(--lane) * -1.00000) calc(var(--run) * -0.50000) }
92.4957% { translate: calc(var(--lane) * -1.00000) 0 }
92.8084% { translate: calc(var(--lane) * -0.99572) calc(var(--lane) * 0.06526) }
93.1211% { translate: calc(var(--lane) * -0.98296) calc(var(--lane) * 0.12941) }
93.4338% { translate: calc(var(--lane) * -0.96194) calc(var(--lane) * 0.19134) }
93.7465% { translate: calc(var(--lane) * -0.93301) calc(var(--lane) * 0.25000) }
94.0591% { translate: calc(var(--lane) * -0.89668) calc(var(--lane) * 0.30438) }
94.3718% { translate: calc(var(--lane) * -0.85355) calc(var(--lane) * 0.35355) }
94.6845% { translate: calc(var(--lane) * -0.80438) calc(var(--lane) * 0.39668) }
94.9972% { translate: calc(var(--lane) * -0.75000) calc(var(--lane) * 0.43301) }
95.3098% { translate: calc(var(--lane) * -0.69134) calc(var(--lane) * 0.46194) }
95.6225% { translate: calc(var(--lane) * -0.62941) calc(var(--lane) * 0.48296) }
95.9352% { translate: calc(var(--lane) * -0.56526) calc(var(--lane) * 0.49572) }
96.2479% { translate: calc(var(--lane) * -0.50000) calc(var(--lane) * 0.50000) }
96.5605% { translate: calc(var(--lane) * -0.43474) calc(var(--lane) * 0.49572) }
96.8732% { translate: calc(var(--lane) * -0.37059) calc(var(--lane) * 0.48296) }
97.1859% { translate: calc(var(--lane) * -0.30866) calc(var(--lane) * 0.46194) }
97.4986% { translate: calc(var(--lane) * -0.25000) calc(var(--lane) * 0.43301) }
97.8113% { translate: calc(var(--lane) * -0.19562) calc(var(--lane) * 0.39668) }
98.1239% { translate: calc(var(--lane) * -0.14645) calc(var(--lane) * 0.35355) }
98.4366% { translate: calc(var(--lane) * -0.10332) calc(var(--lane) * 0.30438) }
98.7493% { translate: calc(var(--lane) * -0.06699) calc(var(--lane) * 0.25000) }
99.062% { translate: calc(var(--lane) * -0.03806) calc(var(--lane) * 0.19134) }
99.3746% { translate: calc(var(--lane) * -0.01704) calc(var(--lane) * 0.12941) }
99.6873% { translate: calc(var(--lane) * -0.00428) calc(var(--lane) * 0.06526) }
100% { translate: calc(var(--lane) * 0.00000) calc(var(--lane) * 0.00000) }
}
@keyframes dash-turn{
0% { rotate: -14.35deg }
21.2479% { rotate: -14.35deg }
42.4957% { rotate: -14.35deg }
42.8084% { rotate: -21.85deg }
43.1211% { rotate: -29.35deg }
43.4338% { rotate: -36.85deg }
43.7465% { rotate: -44.35deg }
44.0591% { rotate: -51.85deg }
44.3718% { rotate: -59.35deg }
44.6845% { rotate: -66.85deg }
44.9972% { rotate: -74.35deg }
45.3098% { rotate: -81.85deg }
45.6225% { rotate: -89.35deg }
45.9352% { rotate: -96.85deg }
46.2479% { rotate: -104.35deg }
46.5605% { rotate: -111.85deg }
46.8732% { rotate: -119.35deg }
47.1859% { rotate: -126.85deg }
47.4986% { rotate: -134.35deg }
47.8113% { rotate: -141.85deg }
48.1239% { rotate: -149.35deg }
48.4366% { rotate: -156.85deg }
48.7493% { rotate: -164.35deg }
49.062% { rotate: -171.85deg }
49.3746% { rotate: -179.35deg }
49.6873% { rotate: -186.85deg }
50% { rotate: -194.35deg }
71.2479% { rotate: -194.35deg }
92.4957% { rotate: -194.35deg }
92.8084% { rotate: -201.85deg }
93.1211% { rotate: -209.35deg }
93.4338% { rotate: -216.85deg }
93.7465% { rotate: -224.35deg }
94.0591% { rotate: -231.85deg }
94.3718% { rotate: -239.35deg }
94.6845% { rotate: -246.85deg }
94.9972% { rotate: -254.35deg }
95.3098% { rotate: -261.85deg }
95.6225% { rotate: -269.35deg }
95.9352% { rotate: -276.85deg }
96.2479% { rotate: -284.35deg }
96.5605% { rotate: -291.85deg }
96.8732% { rotate: -299.35deg }
97.1859% { rotate: -306.85deg }
97.4986% { rotate: -314.35deg }
97.8113% { rotate: -321.85deg }
98.1239% { rotate: -329.35deg }
98.4366% { rotate: -336.85deg }
98.7493% { rotate: -344.35deg }
99.062% { rotate: -351.85deg }
99.3746% { rotate: -359.35deg }
99.6873% { rotate: -366.85deg }
100% { rotate: -374.35deg }
}