palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

sub

remotes/origin/main
김지은 1 month ago
parent
3dd6bcf060
commit
7c74856637
4 changed files with 103 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      src/components/SubHero.jsx
  2. 130
      src/css/common.css
  3. 8
      src/css/header.css
  4. 88
      src/css/main.css

44
src/components/SubHero.jsx
Unescape View File

@ -1,4 +1,3 @@
import { useEffect, useRef } from "react";
import { Link, useLocation } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
@ -18,9 +17,7 @@ export default function SubHero({ title, desc, navItems }) {
<> <>
<section className="sh4"> <section className="sh4">
<div className="sh4-inner"> <div className="sh4-inner">
<motion.span className="sh4-label" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}> <span className="sh4-label">{menuMap["/" + pathname.split("/")[1]]?.label}</span>
{menuMap["/" + pathname.split("/")[1]]?.label}
</motion.span>
<h1 className="sh4-title"> <h1 className="sh4-title">
{titleLines.map((line, li) => ( {titleLines.map((line, li) => (
@ -29,11 +26,11 @@ export default function SubHero({ title, desc, navItems }) {
<motion.span <motion.span
key={ci} key={ci}
className="sh4-char" className="sh4-char"
initial={{ opacity: 0 }} initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1 }} animate={{ opacity: 1, y: 0 }}
transition={{ transition={{
duration: 0.7, duration: 0.5,
delay: 0.25 + li * 0.18 + ci * 0.03, delay: li * 0.08 + ci * 0.022,
ease: [0.16, 1, 0.3, 1], ease: [0.16, 1, 0.3, 1],
}} }}
> >
@ -44,31 +41,20 @@ export default function SubHero({ title, desc, navItems }) {
))} ))}
</h1> </h1>
{desc && ( {desc && <p className="sh4-desc">{desc}</p>}
<motion.p className="sh4-desc" initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}>
{desc}
</motion.p>
)}
</div> </div>
<div className="sh4-deco sh4-deco--1" />
<div className="sh4-deco sh4-deco--2" />
</section> </section>
{navItems?.length > 1 && ( {navItems?.length > 1 && (
<div className="sh4-nav-wrap"> <nav className="sh4-nav-wrap" aria-label="Sub Navigation">
<nav className="sh4-nav"> <div className="sh4-nav">
{navItems.map((item) => { {navItems.map((item) => (
const active = pathname === item.to; <Link key={item.to} to={item.to} className={`sh4-nav-tab${pathname === item.to ? " sh4-nav-tab--active" : ""}`}>
return ( {item.label}
<Link key={item.to} to={item.to} className={`sh4-nav-tab${active ? " sh4-nav-tab--active" : ""}`}> </Link>
{active && <motion.span className="sh4-nav-bg" layoutId="sh4-pill" transition={{ type: "spring", stiffness: 380, damping: 34 }} />} ))}
<span className="sh4-nav-label">{item.label}</span> </div>
</Link> </nav>
);
})}
</nav>
</div>
)} )}
</> </>
); );

130
src/css/common.css
Unescape View File

@ -1,28 +1,23 @@
:root{ :root{
--header-height:96px; --header-height:96px;
--color-primary:#3A4081; --color-primary:#1a1f5e;
--color-primary-hover:#2F5DAA; --color-primary-hover:#141852;
--color-primary-light:#6B78B5; --color-primary-light:#2d3380;
--color-primary-soft:rgba(58,64,129,.08); --color-primary-soft:rgba(26,31,94,.07);
--color-primary-soft-strong:rgba(58,64,129,.12); --color-primary-soft-strong:rgba(26,31,94,.11);
--color-primary-soft-border:rgba(58,64,129,.16); --color-primary-soft-border:rgba(26,31,94,.14);
--color-primary-border:rgba(58,64,129,.2); --color-primary-border:rgba(26,31,94,.18);
--color-primary-border-strong:rgba(58,64,129,.24); --color-primary-border-strong:rgba(26,31,94,.22);
--color-primary-shadow:rgba(58,64,129,.18); --color-primary-shadow:rgba(26,31,94,.16);
/* ── Bold & Editorial 확장 팔레트 (로고 그라디언트 추출) ── */ /* ── 브랜드 팔레트 ── */
--ink:#08080f; --navy:#1a1f5e;
--ink-2:#0e0e1a;
--ink-3:#161625;
--pink:#d94889; --pink:#d94889;
--pink-light:#e58fb5; --pink-light:#e58fb5;
--purple:#7b3fa0; --purple:#7b3fa0;
--purple-dark:#593a84;
--sky:#198dc7; --sky:#198dc7;
--grad-brand:linear-gradient(135deg,#d94889 0%,#7b3fa0 40%,#3A4081 75%,#198dc7 100%); --grad-brand:linear-gradient(135deg,#d94889 0%,#7b3fa0 40%,#1a1f5e 75%,#198dc7 100%);
--grad-brand-h:linear-gradient(90deg,#d94889 0%,#7b3fa0 50%,#3A4081 100%); --grad-brand-h:linear-gradient(90deg,#d94889 0%,#7b3fa0 50%,#1a1f5e 100%);
--grad-text:linear-gradient(100deg,#fff 0%,#e58fb5 35%,#b07fd4 65%,#6B78B5 100%);
--noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
} }
html{scrollbar-gutter:inherit;} html{scrollbar-gutter:inherit;}
@ -31,84 +26,37 @@ body{overflow-x:hidden;}
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} .main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} .sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
/*sh4 subhero*/
/*sub common*//*sh3 subhero canvas*/ .sh4{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));padding:calc(var(--header-height) + 80px) 80px 96px;background:#fff;}
.sh3{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));height:560px;display:flex;align-items:center;} .sh4-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
.sh3-canvas{position:absolute;inset:0;width:100%;height:100%;} .sh4-label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,31,94,.38);margin-bottom:20px;opacity:0;transform:translateY(10px);animation:sh4Up .55s cubic-bezier(.16,1,.3,1) forwards;}
.sh3-inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;padding:0 80px;padding-top:var(--header-height);} .sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:var(--navy);}
.sh3-bc{display:flex;align-items:center;margin-bottom:28px;} .sh4-title-line{display:block;}
.sh3-bc-item{font-size:12px;font-weight:600;letter-spacing:.08em;color:rgba(30,30,80,.45);text-decoration:none;transition:color .2s;} .sh4-char{display:inline-block;}
.sh3-bc-item:hover{color:var(--color-primary);} .sh4-desc{font-size:clamp(14px,1.2vw,17px);line-height:1.8;color:rgba(26,31,94,.42);max-width:520px;word-break:keep-all;margin:0;opacity:0;transform:translateY(12px);animation:sh4Up .6s .5s cubic-bezier(.16,1,.3,1) forwards;}
.sh3-bc-sep{margin:0 8px;font-size:12px;color:rgba(30,30,80,.25);}
.sh3-bc-drop{position:relative;} /*sh4 sticky 탭 네비 — 언더라인형*/
.sh3-bc-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:rgba(30,30,80,.55);cursor:pointer;padding:4px 10px;border-radius:6px;border:1px solid rgba(58,64,129,.18);background:rgba(255,255,255,.55);backdrop-filter:blur(8px);transition:background .2s,color .2s;} .sh4-nav-wrap{position:sticky;top:var(--header-height);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(26,31,94,.08);box-shadow:0 1px 0 rgba(26,31,94,.06);}
.sh3-bc-btn:hover{background:rgba(255,255,255,.82);color:var(--color-primary);} .sh4-nav{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;align-items:center;}
.sh3-bc-arrow{transition:transform .22s ease;color:rgba(58,64,129,.4);} .sh4-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(17,17,17,.38);text-decoration:none;transition:color .25s;white-space:nowrap;letter-spacing:-.01em;}
.sh3-bc-arrow--open{transform:rotate(180deg);} .sh4-nav-tab:hover{color:var(--navy);}
.sh3-bc-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);border:1px solid rgba(58,64,129,.1);border-radius:12px;padding:6px;z-index:200;box-shadow:0 12px 40px rgba(58,64,129,.12);animation:sh3MenuIn .18s ease;} .sh4-nav-tab--active{color:var(--navy);}
.sh3-bc-menu-item{display:block;padding:9px 14px;font-size:13px;font-weight:500;color:rgba(58,64,129,.55);border-radius:8px;text-decoration:none;transition:background .15s,color .15s;} .sh4-nav-tab--active::after{content:"";position:absolute;bottom:0;left:20px;right:20px;height:2px;border-radius:999px;background:var(--grad-brand-h);}
.sh3-bc-menu-item:hover{background:rgba(58,64,129,.06);color:var(--color-primary);}
.sh3-bc-menu-item--cur{color:var(--color-primary);font-weight:700;background:rgba(58,64,129,.08);} @keyframes sh4Up{
.sh3-bc-cur{font-size:12px;font-weight:600;color:var(--color-primary);}
.sh3-title-wrap{margin-bottom:16px;}
.sh3-title{display:block;font-size:clamp(36px,5vw,64px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:#1a1a3e;opacity:0;transform:translateY(22px);animation:sh3TitleIn .7s cubic-bezier(.16,1,.3,1) forwards;}
.sh3-desc{font-size:clamp(14px,1.2vw,16px);line-height:1.75;color:rgba(26,26,62,.48);max-width:500px;word-break:keep-all;opacity:0;animation:sh3FadeUp .7s .3s cubic-bezier(.16,1,.3,1) forwards;}
.sh3-nav{position:sticky;top:var(--header-height);z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(58,64,129,.08);box-shadow:0 2px 16px rgba(58,64,129,.06);}
.sh3-nav-inner{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;align-items:center;}
.sh3-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(17,17,17,.38);text-decoration:none;transition:color .25s;white-space:nowrap;letter-spacing:-.01em;}
.sh3-nav-tab:hover{color:var(--color-primary);}
.sh3-nav-tab--active{color:var(--color-primary);}
.sh3-nav-pip{position:absolute;bottom:0;left:20px;right:20px;height:2px;background:var(--grad-brand-h);border-radius:999px;}
@keyframes sh3MenuIn{
from{opacity:0;transform:translateY(-6px) scale(.97);}
to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes sh3TitleIn{
to{opacity:1;transform:translateY(0);}
}
@keyframes sh3FadeUp{
from{opacity:0;transform:translateY(12px);}
to{opacity:1;transform:translateY(0);} to{opacity:1;transform:translateY(0);}
} }
@media (max-width:1280px){ @media (max-width:1280px){
.sh3-inner{padding-left:48px;padding-right:48px;} .sh4{padding-left:48px;padding-right:48px;}
.sh3-nav-inner{padding-left:48px;padding-right:48px;} .sh4-nav{padding-left:48px;padding-right:48px;}
} }
@media (max-width:1024px){ @media (max-width:1024px){
.sh3-inner{padding-left:32px;padding-right:32px;} .sh4{padding-left:32px;padding-right:32px;}
.sh3-nav-inner{padding-left:32px;padding-right:32px;} .sh4-nav{padding-left:32px;padding-right:32px;}
} }
@media (max-width:768px){ @media (max-width:768px){
.sh3{height:440px;} .sh4{padding:calc(var(--header-height) + 48px) 20px 64px;}
.sh3-inner{padding-left:20px;padding-right:20px;} .sh4-nav{padding-left:20px;padding-right:20px;}
.sh3-nav-inner{padding-left:20px;padding-right:20px;} .sh4-nav-tab{padding:0 14px;font-size:13px;}
.sh3-nav-tab{padding:0 14px;font-size:13px;}
}/*sh4 subhero*/
.sh4{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));padding:calc(var(--header-height) + 80px) 80px 100px;background:#fff;}
.sh4-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
.sh4-deco{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);z-index:0;}
.sh4-deco--1{width:560px;height:560px;top:-200px;right:-100px;background:radial-gradient(circle,rgba(123,63,160,.08) 0%,transparent 70%);}
.sh4-deco--2{width:400px;height:400px;bottom:-160px;left:-80px;background:radial-gradient(circle,rgba(217,72,137,.07) 0%,transparent 70%);}
.sh4-label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(58,64,129,.5);margin-bottom:20px;}
.sh4-title{margin:0 0 24px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.055em;background:linear-gradient(90deg,#d94889 0%,#7b3fa0 30%,#3A4081 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.sh4-title-line{display:block;}
.sh4-desc{font-size:clamp(14px,1.3vw,17px);line-height:1.8;color:rgba(26,26,58,.45);max-width:540px;word-break:keep-all;margin:0;}
/*sh4 floating pill nav*/
.sh4-nav-wrap{position:sticky;top:var(--header-height);z-index:50;display:flex;justify-content:center;padding:14px 0;}
.sh4-nav{display:inline-flex;align-items:center;gap:4px;background:rgba(58,64,129,.06);border-radius:999px;padding:4px;}
.sh4-nav-tab{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 20px;font-size:13px;font-weight:600;color:rgba(17,17,17,.42);text-decoration:none;border-radius:999px;transition:color .25s;white-space:nowrap;letter-spacing:-.01em;}
.sh4-nav-tab:hover{color:var(--color-primary);}
.sh4-nav-tab--active{color:#fff;}
.sh4-nav-bg{position:absolute;inset:0;border-radius:999px;background:var(--grad-brand-h);z-index:-1;}
.sh4-nav-label{position:relative;z-index:1;}
@media (max-width:1280px){.sh4{padding-left:48px;padding-right:48px;}}
@media (max-width:1024px){.sh4{padding-left:32px;padding-right:32px;}}
@media (max-width:768px){
.sh4{padding:calc(var(--header-height) + 52px) 20px 72px;}
.sh4-nav-tab{padding:0 14px;font-size:12px;}
} }

8
src/css/header.css
Unescape View File

@ -52,12 +52,12 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
.pal-mega-panel-inner{position:relative;display:grid;grid-template-columns:360px 1fr;gap:40px;max-width:1440px;margin:0 auto;padding:24px 40px 28px;z-index:1;} .pal-mega-panel-inner{position:relative;display:grid;grid-template-columns:360px 1fr;gap:40px;max-width:1440px;margin:0 auto;padding:24px 40px 28px;z-index:1;}
.pal-mega-panel-intro{display:flex;flex-direction:column;justify-content:space-between;min-height:340px;padding:32px;border:1px solid rgba(17,17,17,.06);border-radius:32px;background:linear-gradient(180deg,var(--color-primary-soft-strong) 0%,rgba(42,145,201,.05) 100%);box-shadow:0 24px 50px rgba(15,23,42,.08);} .pal-mega-panel-intro{display:flex;flex-direction:column;justify-content:space-between;min-height:340px;padding:32px;border:1px solid rgba(17,17,17,.06);border-radius:32px;background:linear-gradient(180deg,var(--color-primary-soft-strong) 0%,rgba(26,31,94,.05) 100%);box-shadow:0 24px 50px rgba(15,23,42,.08);}
.pal-mega-panel-eyebrow{display:inline-block;margin-bottom:14px;font-size:13px;font-weight:700;line-height:1.2;color:var(--color-primary);letter-spacing:.08em;text-transform:uppercase;} .pal-mega-panel-eyebrow{display:inline-block;margin-bottom:14px;font-size:13px;font-weight:700;line-height:1.2;color:var(--color-primary);letter-spacing:.08em;text-transform:uppercase;}
.pal-mega-panel-intro h2{margin:0 0 16px;font-size:34px;font-weight:800;line-height:1.25;color:#111;letter-spacing:-0.03em;white-space:pre-line;} .pal-mega-panel-intro h2{margin:0 0 16px;font-size:34px;font-weight:800;line-height:1.25;color:#111;letter-spacing:-0.03em;white-space:pre-line;}
.pal-mega-panel-intro p{margin:0 0 24px;font-size:15px;font-weight:400;line-height:1.7;color:#555;word-break:keep-all;} .pal-mega-panel-intro p{margin:0 0 24px;font-size:15px;font-weight:400;line-height:1.7;color:#555;word-break:keep-all;}
.pal-mega-panel-cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;height:46px;padding:0 18px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background .3s ease,transform .3s ease,box-shadow .3s ease;} .pal-mega-panel-cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;height:46px;padding:0 18px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background .3s ease,transform .3s ease,box-shadow .3s ease;}
.pal-mega-panel-cta:hover,.pal-mega-panel-cta:focus-visible{background:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 12px 24px rgba(42,145,201,.22);outline:none;} .pal-mega-panel-cta:hover,.pal-mega-panel-cta:focus-visible{background:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 12px 24px rgba(26,31,94,.22);outline:none;}
.pal-mega-panel-content{padding:16px 0 0;} .pal-mega-panel-content{padding:16px 0 0;}
.pal-mega-panel-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 8px 24px;border-bottom:1px solid rgba(17,17,17,.08);} .pal-mega-panel-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 8px 24px;border-bottom:1px solid rgba(17,17,17,.08);}
@ -120,14 +120,14 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
.pal-mobile-submenu-link strong{display:block;font-size:15px;font-weight:700;line-height:1.4;color:#111;letter-spacing:-0.02em;} .pal-mobile-submenu-link strong{display:block;font-size:15px;font-weight:700;line-height:1.4;color:#111;letter-spacing:-0.02em;}
.pal-mobile-submenu-link p{margin:4px 0 0;font-size:13px;line-height:1.6;color:#666;word-break:keep-all;} .pal-mobile-submenu-link p{margin:4px 0 0;font-size:13px;line-height:1.6;color:#666;word-break:keep-all;}
.pal-mobile-featured-link{display:block;margin-top:18px;padding:18px;border-radius:22px;background:linear-gradient(180deg,var(--color-primary-soft-strong) 0%,rgba(42,145,201,.05) 100%);text-decoration:none;} .pal-mobile-featured-link{display:block;margin-top:18px;padding:18px;border-radius:22px;background:linear-gradient(180deg,var(--color-primary-soft-strong) 0%,rgba(26,31,94,.05) 100%);text-decoration:none;}
.pal-mobile-featured-link span{display:block;margin-bottom:8px;font-size:12px;font-weight:800;line-height:1.2;color:var(--color-primary);letter-spacing:.08em;text-transform:uppercase;} .pal-mobile-featured-link span{display:block;margin-bottom:8px;font-size:12px;font-weight:800;line-height:1.2;color:var(--color-primary);letter-spacing:.08em;text-transform:uppercase;}
.pal-mobile-featured-link strong{display:block;font-size:16px;font-weight:800;line-height:1.5;color:#111;letter-spacing:-0.02em;} .pal-mobile-featured-link strong{display:block;font-size:16px;font-weight:800;line-height:1.5;color:#111;letter-spacing:-0.02em;}
.pal-mobile-contact-box{margin-top:28px;padding:20px;border:1px solid rgba(17,17,17,.06);border-radius:24px;background:#fff;} .pal-mobile-contact-box{margin-top:28px;padding:20px;border:1px solid rgba(17,17,17,.06);border-radius:24px;background:#fff;}
.pal-mobile-contact-box p{margin:0 0 14px;font-size:14px;line-height:1.7;color:#555;word-break:keep-all;} .pal-mobile-contact-box p{margin:0 0 14px;font-size:14px;line-height:1.7;color:#555;word-break:keep-all;}
.pal-mobile-contact-link{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background .28s ease,transform .28s ease,box-shadow .28s ease;} .pal-mobile-contact-link{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background .28s ease,transform .28s ease,box-shadow .28s ease;}
.pal-mobile-contact-link:hover,.pal-mobile-contact-link:focus-visible{background:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 12px 24px rgba(42,145,201,.22);outline:none;} .pal-mobile-contact-link:hover,.pal-mobile-contact-link:focus-visible{background:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 12px 24px rgba(26,31,94,.22);outline:none;}
.pal-header-lang{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(17,17,17,.12);border-radius:999px;background:#fff;transition:border-color .3s ease,background .3s ease;} .pal-header-lang{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(17,17,17,.12);border-radius:999px;background:#fff;transition:border-color .3s ease,background .3s ease;}
.pal-header-lang-btn{height:100%;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(17,17,17,.55);font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease;} .pal-header-lang-btn{height:100%;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(17,17,17,.55);font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease;}

88
src/css/main.css
Unescape View File

@ -1,14 +1,14 @@
:root{ :root{
--header-height:96px; --header-height:96px;
--color-primary:#3A4081; --color-primary:#1a1f5e;
--color-primary-hover:#2F5DAA; --color-primary-hover:#2F5DAA;
--color-primary-light:#6B78B5; --color-primary-light:#6B78B5;
--color-primary-soft:rgba(58,64,129,.08); --color-primary-soft:rgba(26,31,94,.08);
--color-primary-soft-strong:rgba(58,64,129,.12); --color-primary-soft-strong:rgba(26,31,94,.12);
--color-primary-soft-border:rgba(58,64,129,.16); --color-primary-soft-border:rgba(26,31,94,.16);
--color-primary-border:rgba(58,64,129,.2); --color-primary-border:rgba(26,31,94,.2);
--color-primary-border-strong:rgba(58,64,129,.24); --color-primary-border-strong:rgba(26,31,94,.24);
--color-primary-shadow:rgba(58,64,129,.18); --color-primary-shadow:rgba(26,31,94,.18);
} }
html{scrollbar-gutter:inherit;} html{scrollbar-gutter:inherit;}
@ -33,7 +33,7 @@ body{overflow-x:hidden;}
.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;} .main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
.main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;} .main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
.main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;} .main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(26,31,94,.16) 0%,rgba(26,31,94,.08) 20%,rgba(26,31,94,0) 44%);z-index:1;pointer-events:none;}
.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;} .main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;} .main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
@ -116,49 +116,49 @@ body{overflow-x:hidden;}
} }
/* ─── utm ─── */ /* ─── utm ─── */
.main-utm-section{position:relative;width:100%;min-height:100vh;padding-top:86px;overflow:hidden;background:radial-gradient(circle at 12% 18%,rgba(58,64,129,.08),transparent 32%),radial-gradient(circle at 88% 18%,rgba(58,64,129,.06),transparent 34%),linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%);} .main-utm-section{position:relative;width:100%;min-height:100vh;padding-top:86px;overflow:hidden;background:radial-gradient(circle at 12% 18%,rgba(26,31,94,.08),transparent 32%),radial-gradient(circle at 88% 18%,rgba(26,31,94,.06),transparent 34%),linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%);}
.main-utm-section::before{content:"";position:absolute;top:0;right:0;width:68%;height:58%;background:url("/images/main-utm-background.png") no-repeat center top/cover;opacity:.5;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);} .main-utm-section::before{content:"";position:absolute;top:0;right:0;width:68%;height:58%;background:url("/images/main-utm-background.png") no-repeat center top/cover;opacity:.5;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);}
.main-utm-section::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,249,255,.86) 0%,rgba(247,249,255,.42) 22%,rgba(247,249,255,.08) 52%,rgba(247,249,255,.42) 78%,rgba(247,249,255,.86) 100%);pointer-events:none;z-index:0;} .main-utm-section::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,249,255,.86) 0%,rgba(247,249,255,.42) 22%,rgba(247,249,255,.08) 52%,rgba(247,249,255,.42) 78%,rgba(247,249,255,.86) 100%);pointer-events:none;z-index:0;}
.main-utm-bg-glow{position:absolute;border-radius:999px;filter:blur(90px);pointer-events:none;} .main-utm-bg-glow{position:absolute;border-radius:999px;filter:blur(90px);pointer-events:none;}
.main-utm-bg-glow--a{width:520px;height:520px;top:-160px;right:-120px;background:rgba(58,64,129,.13);} .main-utm-bg-glow--a{width:520px;height:520px;top:-160px;right:-120px;background:rgba(26,31,94,.13);}
.main-utm-bg-glow--b{width:460px;height:460px;left:-140px;bottom:-160px;background:rgba(112,180,255,.12);} .main-utm-bg-glow--b{width:460px;height:460px;left:-140px;bottom:-160px;background:rgba(112,180,255,.12);}
.main-utm-inner{position:relative;z-index:2;width:min(1440px,calc(100% - 120px));min-height:calc(100vh - 86px);margin:0 auto;padding-top:72px;padding-bottom:64px;} .main-utm-inner{position:relative;z-index:2;width:min(1440px,calc(100% - 120px));min-height:calc(100vh - 86px);margin:0 auto;padding-top:72px;padding-bottom:64px;}
.main-utm-head{position:relative;z-index:5;max-width:820px;margin-bottom:64px;} .main-utm-head{position:relative;z-index:5;max-width:820px;margin-bottom:64px;}
.main-utm-eyebrow{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;} .main-utm-eyebrow{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#1a1f5e;}
.main-utm-title{margin:0;font-size:clamp(40px,4vw,64px);font-weight:800;line-height:.92;letter-spacing:-0.08em;color:#0e1120;} .main-utm-title{margin:0;font-size:clamp(40px,4vw,64px);font-weight:800;line-height:.92;letter-spacing:-0.08em;color:#0e1120;}
.main-utm-desc{margin:22px 0 0;font-size:16px;line-height:1.6;letter-spacing:-.02em;color:#697083;} .main-utm-desc{margin:22px 0 0;font-size:16px;line-height:1.6;letter-spacing:-.02em;color:#697083;}
.main-utm-stack{position:relative;width:100%;height:min(430px,50vh);perspective:1400px;} .main-utm-stack{position:relative;width:100%;height:min(430px,50vh);perspective:1400px;}
.main-utm-card{position:absolute;inset:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:64px;padding:54px 62px;border-radius:34px;overflow:hidden;background:rgba(255,255,255,.86);border:1px solid rgba(58,64,129,.1);box-shadow:0 30px 80px rgba(14,17,32,.1),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(22px);will-change:transform,opacity,filter;} .main-utm-card{position:absolute;inset:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:64px;padding:54px 62px;border-radius:34px;overflow:hidden;background:rgba(255,255,255,.86);border:1px solid rgba(26,31,94,.1);box-shadow:0 30px 80px rgba(14,17,32,.1),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(22px);will-change:transform,opacity,filter;}
.main-utm-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.78),transparent 46%),radial-gradient(circle at 82% 28%,rgba(58,64,129,.11),transparent 34%);pointer-events:none;} .main-utm-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.78),transparent 46%),radial-gradient(circle at 82% 28%,rgba(26,31,94,.11),transparent 34%);pointer-events:none;}
.main-utm-card-text,.main-utm-card-visual{position:relative;z-index:2;} .main-utm-card-text,.main-utm-card-visual{position:relative;z-index:2;}
.main-utm-step{display:inline-flex;align-items:center;justify-content:center;width:58px;height:32px;margin-bottom:24px;border-radius:999px;background:rgba(58,64,129,.1);color:#3a4081;font-size:13px;font-weight:800;letter-spacing:.1em;} .main-utm-step{display:inline-flex;align-items:center;justify-content:center;width:58px;height:32px;margin-bottom:24px;border-radius:999px;background:rgba(26,31,94,.1);color:#1a1f5e;font-size:13px;font-weight:800;letter-spacing:.1em;}
.main-utm-label{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.18em;color:rgba(58,64,129,.62);} .main-utm-label{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.18em;color:rgba(26,31,94,.62);}
.main-utm-card h3{margin:0;font-size:clamp(34px,3.2vw,54px);line-height:1.06;letter-spacing:-.055em;color:#101322;} .main-utm-card h3{margin:0;font-size:clamp(34px,3.2vw,54px);line-height:1.06;letter-spacing:-.055em;color:#101322;}
.main-utm-card-text>p:last-child{max-width:430px;margin:22px 0 0;font-size:17px;line-height:1.72;word-break:keep-all;color:#636b7e;} .main-utm-card-text>p:last-child{max-width:430px;margin:22px 0 0;font-size:17px;line-height:1.72;word-break:keep-all;color:#636b7e;}
.main-utm-card-visual{position:relative;height:100%;min-height:300px;border-radius:28px;overflow:hidden;background:#f7f8fc;align-items:center;overflow:hidden;justify-content:center;} .main-utm-card-visual{position:relative;height:100%;min-height:300px;border-radius:28px;overflow:hidden;background:#f7f8fc;align-items:center;overflow:hidden;justify-content:center;}
.main-utm-card-visual::after{content:"";position:absolute;inset:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%);pointer-events:none;} .main-utm-card-visual::after{content:"";position:absolute;inset:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%);pointer-events:none;}
.main-utm-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(58,64,129,.06),0 18px 40px rgba(17,22,40,.08),0 0 0 8px rgba(255,255,255,.42);background:#fff;overflow:hidden;transform:translateZ(0);} .main-utm-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(26,31,94,.06),0 18px 40px rgba(17,22,40,.08),0 0 0 8px rgba(255,255,255,.42);background:#fff;overflow:hidden;transform:translateZ(0);}
.main-utm-orbit{position:absolute;inset:32px;border-radius:28px;} .main-utm-orbit{position:absolute;inset:32px;border-radius:28px;}
.main-utm-orbit span{position:absolute;border:1px solid rgba(58,64,129,.14);border-radius:50%;} .main-utm-orbit span{position:absolute;border:1px solid rgba(26,31,94,.14);border-radius:50%;}
.main-utm-orbit span:nth-child(1){width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%);} .main-utm-orbit span:nth-child(1){width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%);}
.main-utm-orbit span:nth-child(2){width:230px;height:230px;left:18%;top:16%;} .main-utm-orbit span:nth-child(2){width:230px;height:230px;left:18%;top:16%;}
.main-utm-orbit span:nth-child(3){width:170px;height:170px;right:10%;bottom:10%;} .main-utm-orbit span:nth-child(3){width:170px;height:170px;right:10%;bottom:10%;}
.main-utm-map{position:absolute;inset:0;} .main-utm-map{position:absolute;inset:0;}
.main-utm-route{position:absolute;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#3a4081,transparent);box-shadow:0 0 16px rgba(58,64,129,.32);opacity:.7;} .main-utm-route{position:absolute;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#1a1f5e,transparent);box-shadow:0 0 16px rgba(26,31,94,.32);opacity:.7;}
.main-utm-route--a{width:62%;left:18%;top:42%;transform:rotate(-18deg);} .main-utm-route--a{width:62%;left:18%;top:42%;transform:rotate(-18deg);}
.main-utm-route--b{width:48%;right:12%;top:62%;transform:rotate(22deg);} .main-utm-route--b{width:48%;right:12%;top:62%;transform:rotate(22deg);}
.utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;opacity:.78;} .utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;opacity:.78;}
.utm-floating-drone{position:absolute;width:46px;height:46px;border-radius:18px;background:rgba(255,255,255,.52);border:1px solid rgba(58,64,129,.1);backdrop-filter:blur(12px);box-shadow:0 14px 30px rgba(31,41,55,.08);} .utm-floating-drone{position:absolute;width:46px;height:46px;border-radius:18px;background:rgba(255,255,255,.52);border:1px solid rgba(26,31,94,.1);backdrop-filter:blur(12px);box-shadow:0 14px 30px rgba(31,41,55,.08);}
.utm-floating-drone::before{content:"";position:absolute;inset:-10px;border-radius:24px;border:1px solid rgba(91,108,255,.08);opacity:.6;animation:utmPulse 4s ease-out infinite;} .utm-floating-drone::before{content:"";position:absolute;inset:-10px;border-radius:24px;border:1px solid rgba(91,108,255,.08);opacity:.6;animation:utmPulse 4s ease-out infinite;}
.utm-floating-drone svg{position:absolute;inset:10px;width:26px;height:26px;overflow:visible;} .utm-floating-drone svg{position:absolute;inset:10px;width:26px;height:26px;overflow:visible;}
.utm-floating-drone svg circle{fill:none;stroke:#3a4081;stroke-width:1.7;opacity:.72;} .utm-floating-drone svg circle{fill:none;stroke:#1a1f5e;stroke-width:1.7;opacity:.72;}
.utm-floating-drone svg path{fill:none;stroke:#3a4081;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72;} .utm-floating-drone svg path{fill:none;stroke:#1a1f5e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72;}
.utm-floating-drone span{display:none;} .utm-floating-drone span{display:none;}
.utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveA 9s ease-in-out infinite;} .utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveA 9s ease-in-out infinite;}
.utm-floating-drone--b{left:44%;top:72px;animation:utmDroneMoveB 11s ease-in-out infinite;animation-delay:-2s;} .utm-floating-drone--b{left:44%;top:72px;animation:utmDroneMoveB 11s ease-in-out infinite;animation-delay:-2s;}
@ -232,15 +232,15 @@ body{overflow-x:hidden;}
.airspace-moving-dot, .airspace-moving-dot,
.airspace-uam-content {position: relative; z-index: 1; } .airspace-uam-content {position: relative; z-index: 1; }
.airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(58,64,129,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(58,64,129,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);} .airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(26,31,94,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(26,31,94,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);}
.airspace-transition-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 20%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.24) 80%,rgba(255,255,255,.72) 100%);pointer-events:none;} .airspace-transition-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 20%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.24) 80%,rgba(255,255,255,.72) 100%);pointer-events:none;}
.airspace-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;} .airspace-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;}
.airspace-panel--utm{background:transparent;} .airspace-panel--utm{background:transparent;}
.airspace-panel--uam{background:radial-gradient(circle at 72% 34%,rgba(112,180,255,.12),transparent 34%),radial-gradient(circle at 42% 78%,rgba(58,64,129,.08),transparent 28%);} .airspace-panel--uam{background:radial-gradient(circle at 72% 34%,rgba(112,180,255,.12),transparent 34%),radial-gradient(circle at 42% 78%,rgba(26,31,94,.08),transparent 28%);}
.airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#3a4081;} .airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#1a1f5e;}
.airspace-panel h2{margin:0;max-width:760px;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.96;letter-spacing:-.08em;color:#0e1120;} .airspace-panel h2{margin:0;max-width:760px;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.96;letter-spacing:-.08em;color:#0e1120;}
.airspace-lines{position:absolute;inset:0;z-index:5;pointer-events:none;} .airspace-lines{position:absolute;inset:0;z-index:5;pointer-events:none;}
.airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;} .airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#1a1f5e;border:1px solid rgba(26,31,94,.14);box-shadow:0 0 0 12px rgba(26,31,94,.06),0 20px 50px rgba(26,31,94,.18);transform-origin:center center;}
.airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;} .airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;}
.airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;} .airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;}
@ -249,7 +249,7 @@ body{overflow-x:hidden;}
.airspace-uam-content span{display:block;max-width:560px;font-size:18px;line-height:1.8;font-weight:500;color:rgba(255,255,255,.72);} .airspace-uam-content span{display:block;max-width:560px;font-size:18px;line-height:1.8;font-weight:500;color:rgba(255,255,255,.72);}
.airspace-dot-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:2;pointer-events:none;} .airspace-dot-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:2;pointer-events:none;}
.airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(58,64,129,.28));animation:float-uam 5s ease-in-out infinite;will-change:transform;} .airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(26,31,94,.28));animation:float-uam 5s ease-in-out infinite;will-change:transform;}
.airspace-mobile-br{display:none;} .airspace-mobile-br{display:none;}
@media (max-width:768px){ @media (max-width:768px){
@ -277,27 +277,27 @@ body{overflow-x:hidden;}
/* solution */ /* solution */
.main-solution-section{position:relative;height:100dvh;min-height:100dvh;overflow:hidden;padding:120px 8vw 110px;background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 52%,#ffffff 100%);} .main-solution-section{position:relative;height:100dvh;min-height:100dvh;overflow:hidden;padding:120px 8vw 110px;background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 52%,#ffffff 100%);}
.main-solution-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 10%,rgba(58,64,129,.045),transparent 30%),radial-gradient(circle at 86% 76%,rgba(112,180,255,.08),transparent 34%);pointer-events:none;} .main-solution-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 10%,rgba(26,31,94,.045),transparent 30%),radial-gradient(circle at 86% 76%,rgba(112,180,255,.08),transparent 34%);pointer-events:none;}
.main-solution-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;} .main-solution-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
.main-solution-arrow{width:42px;height:42px;margin:0 auto 46px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:#3a4081;opacity:.82;} .main-solution-arrow{width:42px;height:42px;margin:0 auto 46px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:#1a1f5e;opacity:.82;}
.main-solution-head{max-width:760px;margin-bottom:54px;will-change:transform,opacity;} .main-solution-head{max-width:760px;margin-bottom:54px;will-change:transform,opacity;}
.main-solution-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;} .main-solution-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#1a1f5e;}
.main-solution-title{margin:0;font-size:clamp(42px,5vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.07em;color:#10142b;} .main-solution-title{margin:0;font-size:clamp(42px,5vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.07em;color:#10142b;}
.main-solution-desc{margin:24px 0 0;max-width:620px;font-size:17px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.62);word-break:keep-all;} .main-solution-desc{margin:24px 0 0;max-width:620px;font-size:17px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.62);word-break:keep-all;}
.main-solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .main-solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.main-solution-card{position:relative;min-height:250px;padding:28px 26px;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.72);box-shadow:0 20px 60px rgba(58,64,129,.08),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease;will-change:transform;overflow:hidden;cursor:pointer;} .main-solution-card{position:relative;min-height:250px;padding:28px 26px;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.72);box-shadow:0 20px 60px rgba(26,31,94,.08),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease;will-change:transform;overflow:hidden;cursor:pointer;}
.main-solution-card:hover{transform:translateY(-14px);background:#3a4081;border-color:#3a4081;box-shadow:0 42px 100px rgba(58,64,129,.22),inset 0 1px 0 rgba(255,255,255,.08);} .main-solution-card:hover{transform:translateY(-14px);background:#1a1f5e;border-color:#1a1f5e;box-shadow:0 42px 100px rgba(26,31,94,.22),inset 0 1px 0 rgba(255,255,255,.08);}
.main-solution-card:hover .main-solution-card-body span{color:rgba(255,255,255,.55);} .main-solution-card:hover .main-solution-card-body span{color:rgba(255,255,255,.55);}
.main-solution-card:hover .main-solution-card-body h3{color:#fff;} .main-solution-card:hover .main-solution-card-body h3{color:#fff;}
.main-solution-card:hover .main-solution-card-body p{color:rgba(255,255,255,.6);} .main-solution-card:hover .main-solution-card-body p{color:rgba(255,255,255,.6);}
.main-solution-card:hover .main-solution-card-icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);box-shadow:none;} .main-solution-card:hover .main-solution-card-icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);box-shadow:none;}
.main-solution-card:hover .main-solution-card-icon img{filter:brightness(0) invert(1);} .main-solution-card:hover .main-solution-card-icon img{filter:brightness(0) invert(1);}
.main-solution-card-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:34px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,247,255,.82));border:1px solid rgba(95,110,255,.12);box-shadow:0 10px 24px rgba(58,64,129,.08),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .38s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;} .main-solution-card-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:34px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,247,255,.82));border:1px solid rgba(95,110,255,.12);box-shadow:0 10px 24px rgba(26,31,94,.08),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .38s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;}
.main-solution-card-icon img{width:28px;height:28px;object-fit:contain;display:block;} .main-solution-card-icon img{width:28px;height:28px;object-fit:contain;display:block;}
.main-solution-card-body{position:relative;z-index:2;} .main-solution-card-body{position:relative;z-index:2;}
.main-solution-card-body span{display:block;margin-bottom:14px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#3a4081;} .main-solution-card-body span{display:block;margin-bottom:14px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#1a1f5e;}
.main-solution-card-body h3{margin:0 0 14px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.05em;color:#10142b;word-break:keep-all;} .main-solution-card-body h3{margin:0 0 14px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.05em;color:#10142b;word-break:keep-all;}
.main-solution-card-body p{margin:0;font-size:15px;font-weight:500;line-height:1.7;color:rgba(16,20,43,.58);word-break:keep-all;} .main-solution-card-body p{margin:0;font-size:15px;font-weight:500;line-height:1.7;color:rgba(16,20,43,.58);word-break:keep-all;}
@ -306,21 +306,21 @@ body{overflow-x:hidden;}
@media (max-width:480px){.main-solution-section{padding:72px 5vw 64px;}.main-solution-title{font-size:clamp(32px,11vw,42px);}.main-solution-desc{font-size:13.5px;}.main-solution-card{padding:22px 20px;border-radius:22px;}.main-solution-card-icon{width:48px;height:48px;margin-bottom:22px;}.main-solution-card-body h3{font-size:20px;}.main-solution-card-body p{font-size:13.5px;}} @media (max-width:480px){.main-solution-section{padding:72px 5vw 64px;}.main-solution-title{font-size:clamp(32px,11vw,42px);}.main-solution-desc{font-size:13.5px;}.main-solution-card{padding:22px 20px;border-radius:22px;}.main-solution-card-icon{width:48px;height:48px;margin-bottom:22px;}.main-solution-card-body h3{font-size:20px;}.main-solution-card-body p{font-size:13.5px;}}
/* News */ /* News */
.main-news-section{position:relative;min-height:100vh;padding:130px 8vw;background:#ffffff;overflow:hidden;} .main-news-section{position:relative;min-height:100vh;padding:130px 8vw;background:#ffffff;overflow:hidden;}
.main-news-section::before{content:"";position:absolute;left:-18vw;bottom:-24vw;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle,rgba(58,64,129,.08),transparent 70%);filter:blur(18px);pointer-events:none;} .main-news-section::before{content:"";position:absolute;left:-18vw;bottom:-24vw;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle,rgba(26,31,94,.08),transparent 70%);filter:blur(18px);pointer-events:none;}
.main-news-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.35fr;gap:80px;align-items:start;} .main-news-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.35fr;gap:80px;align-items:start;}
.main-news-head{position:sticky;top:140px;} .main-news-head{position:sticky;top:140px;}
.main-news-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;} .main-news-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#1a1f5e;}
.main-news-title{margin:0;font-size:clamp(34px,4vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.06em;color:#10142b;} .main-news-title{margin:0;font-size:clamp(34px,4vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.06em;color:#10142b;}
.main-news-desc{margin:24px 0 0;max-width:420px;font-size:16px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.58);word-break:keep-all;} .main-news-desc{margin:24px 0 0;max-width:420px;font-size:16px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.58);word-break:keep-all;}
.main-news-list{border-top:1px solid rgba(58,64,129,.16);} .main-news-list{border-top:1px solid rgba(26,31,94,.16);}
.main-news-item{position:relative;display:grid;grid-template-columns:150px 1fr 42px;gap:34px;align-items:center;padding:34px 0;border-bottom:1px solid rgba(58,64,129,.16);cursor:pointer;transition:padding .35s ease,background .35s ease;} .main-news-item{position:relative;display:grid;grid-template-columns:150px 1fr 42px;gap:34px;align-items:center;padding:34px 0;border-bottom:1px solid rgba(26,31,94,.16);cursor:pointer;transition:padding .35s ease,background .35s ease;}
.main-news-item:hover{padding-left:18px;background:linear-gradient(90deg,rgba(58,64,129,.045),transparent 70%);} .main-news-item:hover{padding-left:18px;background:linear-gradient(90deg,rgba(26,31,94,.045),transparent 70%);}
.main-news-meta span{display:block;margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.18em;color:#3a4081;} .main-news-meta span{display:block;margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.18em;color:#1a1f5e;}
.main-news-meta em{font-style:normal;font-size:14px;font-weight:600;color:rgba(16,20,43,.42);} .main-news-meta em{font-style:normal;font-size:14px;font-weight:600;color:rgba(16,20,43,.42);}
.main-news-content h3{margin:0 0 12px;font-size:25px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:#10142b;word-break:keep-all;} .main-news-content h3{margin:0 0 12px;font-size:25px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:#10142b;word-break:keep-all;}
.main-news-content p{margin:0;font-size:15px;line-height:1.75;font-weight:500;color:rgba(16,20,43,.56);word-break:keep-all;} .main-news-content p{margin:0;font-size:15px;line-height:1.75;font-weight:500;color:rgba(16,20,43,.56);word-break:keep-all;}
.main-news-arrow{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(58,64,129,.16);color:#3a4081;font-size:18px;transition:transform .35s ease,background .35s ease,color .35s ease;} .main-news-arrow{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(26,31,94,.16);color:#1a1f5e;font-size:18px;transition:transform .35s ease,background .35s ease,color .35s ease;}
.main-news-item:hover .main-news-arrow{transform:translate(4px,-4px);background:#3a4081;color:#ffffff;} .main-news-item:hover .main-news-arrow{transform:translate(4px,-4px);background:#1a1f5e;color:#ffffff;}
@media (max-width:1024px){ @media (max-width:1024px){
.main-news-section{padding:110px 6vw;} .main-news-section{padding:110px 6vw;}
@ -366,8 +366,8 @@ body{overflow-x:hidden;}
.main-contact-modal-dim{position:absolute;inset:0;background:rgba(10,12,32,.62);backdrop-filter:blur(8px);} .main-contact-modal-dim{position:absolute;inset:0;background:rgba(10,12,32,.62);backdrop-filter:blur(8px);}
.main-contact-modal-card{position:relative;z-index:2;width:min(720px,100%);max-height:78vh;border-radius:24px;background:#fff;color:#222;box-shadow:0 30px 90px rgba(0,0,0,.32);overflow:hidden;} .main-contact-modal-card{position:relative;z-index:2;width:min(720px,100%);max-height:78vh;border-radius:24px;background:#fff;color:#222;box-shadow:0 30px 90px rgba(0,0,0,.32);overflow:hidden;}
.main-contact-modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid #edf0f5;} .main-contact-modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid #edf0f5;}
.main-contact-modal-head h3{margin:0;font-size:20px;font-weight:800;color:#31366f;} .main-contact-modal-head h3{margin:0;font-size:20px;font-weight:800;color:#141852;}
.main-contact-modal-head button{width:36px;height:36px;border:0;border-radius:50%;background:#f2f4fb;color:#31366f;font-size:24px;cursor:pointer;transition:background .3s ease;} .main-contact-modal-head button{width:36px;height:36px;border:0;border-radius:50%;background:#f2f4fb;color:#141852;font-size:24px;cursor:pointer;transition:background .3s ease;}
.main-contact-modal-head button:hover{background:#e6ebff;} .main-contact-modal-head button:hover{background:#e6ebff;}
.main-contact-modal-body{max-height:calc(78vh - 82px);overflow:auto;padding:26px;font-size:13px;line-height:1.85;color:#555;} .main-contact-modal-body{max-height:calc(78vh - 82px);overflow:auto;padding:26px;font-size:13px;line-height:1.85;color:#555;}
.main-contact-modal-body::-webkit-scrollbar{width:6px;} .main-contact-modal-body::-webkit-scrollbar{width:6px;}
@ -390,7 +390,7 @@ body{overflow-x:hidden;}
.main-contact-grid input:focus,.main-contact-grid textarea:focus{border-color:rgba(255,255,255,.46);background:rgba(255,255,255,.16);box-shadow:0 0 0 4px rgba(255,255,255,.08);} .main-contact-grid input:focus,.main-contact-grid textarea:focus{border-color:rgba(255,255,255,.46);background:rgba(255,255,255,.16);box-shadow:0 0 0 4px rgba(255,255,255,.08);}
.main-contact-grid textarea{height:110px;resize:none;line-height:1.65;} .main-contact-grid textarea{height:110px;resize:none;line-height:1.65;}
.main-contact-full{grid-column:1/-1;} .main-contact-full{grid-column:1/-1;}
.main-contact-submit{margin-top:22px;width:100%;height:52px;border:0;border-radius:16px;background:#ffffff;color:#3a4081;font-size:15px;font-weight:800;cursor:pointer;transition:transform .35s ease,box-shadow .35s ease,background .35s ease;} .main-contact-submit{margin-top:22px;width:100%;height:52px;border:0;border-radius:16px;background:#ffffff;color:#1a1f5e;font-size:15px;font-weight:800;cursor:pointer;transition:transform .35s ease,box-shadow .35s ease,background .35s ease;}
.main-contact-submit:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.22);background:#f4f6ff;} .main-contact-submit:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.22);background:#f4f6ff;}
@media (max-width:1024px){.main-contact-section{height:auto;min-height:auto;padding:100px 6vw;}.main-contact-inner{grid-template-columns:1fr;gap:46px;}.main-contact-title{font-size:clamp(38px,8vw,60px);}.main-contact-privacy{max-width:100%;}.main-contact-form{padding:28px;}} @media (max-width:1024px){.main-contact-section{height:auto;min-height:auto;padding:100px 6vw;}.main-contact-inner{grid-template-columns:1fr;gap:46px;}.main-contact-title{font-size:clamp(38px,8vw,60px);}.main-contact-privacy{max-width:100%;}.main-contact-form{padding:28px;}}

Write Preview
Loading…
Cancel
Save