.sec6{
position:relative;
width:100%;
aspect-ratio:1923.2 / 1475.9;
container-type:inline-size;
margin-top:-2.860%;
background: var(--sec6-bg,
linear-gradient(180deg, transparent 0, transparent 3.67%,
#fff 3.67%, #fff calc(59.28% + 100px), rgba(255,255,255,0) 100%)),
var(--sec6-sky-glow,
radial-gradient(760px 620px at 11% 104%,
rgba(255,255,255,.98), rgba(255,255,255,0) 60%)) left bottom / 100% 100vh no-repeat,
var(--sec6-sky,
linear-gradient(68deg,#fff 0%,#d4e7ff 15%,#a3ccff 36%,#7cb7ff 55%,
#60a8ff 73%,#4f9fff 88%,#4a9cff 100%)) left bottom / 100% 100vh no-repeat;
overflow:hidden;
isolation:isolate;
}
.sec6::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:var(--night, 0); transition:opacity 1s linear;
background-image:
radial-gradient(1.5px 1.5px at 18% 22%,rgba(255,255,255,.95),transparent),
radial-gradient(1.1px 1.1px at 62% 9%,rgba(255,255,255,.75),transparent),
radial-gradient(1.3px 1.3px at 84% 41%,rgba(255,255,255,.85),transparent),
radial-gradient(1px 1px at 37% 58%,rgba(210,230,255,.7),transparent),
radial-gradient(1.6px 1.6px at 8% 74%,rgba(255,255,255,.6),transparent),
radial-gradient(1.1px 1.1px at 71% 66%,rgba(220,235,255,.65),transparent);
background-size:340px 240px,340px 240px,470px 330px,470px 330px,610px 410px,610px 410px;
background-position:left bottom;
-webkit-mask-image:linear-gradient(180deg,transparent 44%,#000 96%);
mask-image:linear-gradient(180deg,transparent 44%,#000 96%);
}
.sec6 .sky-cloud{
position:absolute; left:0; z-index:0; pointer-events:none; height:auto;
animation:h19-drift 240s linear infinite;
filter:brightness(1) sepia(0) saturate(1) hue-rotate(0deg) brightness(1);
transition:filter 1s linear;
}
:root[data-mode="night"] .sec6 .sky-cloud{
filter:brightness(.4) sepia(1) saturate(6) hue-rotate(200deg) brightness(.45);
}
@keyframes h19-drift{ from{ translate:-24vw 0 } to{ translate:124vw 0 } }
@media (prefers-reduced-motion: reduce){ .sec6 .sky-cloud{ animation:none } }
.sec6 .page{
position:absolute; left:0; right:0; top:14.88%; z-index:0;
aspect-ratio:1923.2 / 1189.6;
}
.sec6 .page [data-at]{ position:absolute; display:block }
.sec6 .page img[data-at], .sec6 .page svg[data-at]{ height:auto }
.sec6 .page .z-ground{ z-index:0 }
.sec6 .page .copy{ position:absolute; margin:0; text-align:center; color:var(--sec6-ink, #1a1a1a);
font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif; z-index:2 }
.sec6 .page h2.copy{ font-size:2.133cqw; font-weight:900; line-height:1.1; white-space:nowrap }
.sec6 .page .sub    { font-size:1.508cqw; font-weight:500; line-height:1.2; white-space:nowrap }
.sec6 .page .card{
position:absolute; top:21.45%; width:13.49%; height:40.80%;
text-decoration:none; color:inherit;
background:var(--card-bg, #fff); border:0.052cqw solid var(--card-line, #1a1a1a); border-radius:1.071cqw;
z-index:1;
font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
scale:1;
box-shadow:none;
transition:scale .22s ease-out, box-shadow .22s ease-out,
background-color .22s ease-out;
}
.sec6 .page .card:hover,
.sec6 .page .card:focus-within{
scale:1.05;
box-shadow:0 0.16cqw 0.85cqw rgba(0,0,0,.16);
background:var(--card-hover-bg, var(--card-bg, #fff));
z-index:2;
}
.sec6 .page .card > *{ position:absolute; margin:0; text-align:center }
.sec6 .page .card .label{
left:24.65%; top:-3.24%; width:46.72%; height:17.28%;
overflow:visible;
}
.sec6 .page .card .label .body{ fill:var(--c) }
.sec6 .page .card .label .fold{ fill:#1a1a1a }
.sec6 .page .card .icon{ height:auto }
.sec6 [style*="--sx"]{ transform:scaleX(var(--sx)); transform-origin:50% 0 }
.sec6 .page .card h3,
.sec6 .page .card p { transform:scaleX(0.97); transform-origin:50% 0 }
.sec6 .page .card h3{
left:0; right:0; top:26.09%; font-size:1.808cqw; font-weight:900;
line-height:1.00; color:var(--card-ink, #1a1a1a);
}
.sec6 .page .card p{
left:4.31%; right:4.31%; top:44.63%; font-size:0.917cqw; font-weight:300;
line-height:1.09; color:var(--card-sub, #333);
}
.sec6 .page .card p > b{ display:block; font-weight:600;
margin-bottom:0.545em }
.sec6 .page .card p .nb{ white-space:nowrap }
.sec6 .page .card .btn{
left:13.06%; width:75.58%; top:86.41%; height:8.92%;
background:var(--c); border:0.104cqw solid #fff; border-radius:0.582cqw;
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:0.86cqw; font-weight:500; white-space:nowrap;
opacity:0; translate:0 22%; pointer-events:none;
transition:opacity .18s linear, translate .22s cubic-bezier(.2,.7,.3,1);
}
.sec6 .page .card:hover .btn,
.sec6 .page .card:focus-visible .btn,
.sec6 .page .card:focus-within .btn{ opacity:1; translate:0 0; pointer-events:auto }
@media (hover:none){
.sec6 .page .card .btn{ opacity:1; translate:0 0; pointer-events:auto }
}
@media (prefers-reduced-motion: reduce){
.sec6 .page .card{ transition:box-shadow .22s ease-out }
.sec6 .page .card:hover,
.sec6 .page .card:focus-within{ scale:1 }
.sec6 .page .card .btn{ translate:0 0; transition:opacity .18s linear }
}
.sec6 .rock-layer{ position:absolute; display:block; height:auto; z-index:1 }
.sec6 .mob-cast{ display:none }
.sec6 .rock-shadow{ filter:brightness(0) }