:root{
  --blue:#009AD7;--green:#A2CE50;--navy-900:#0B1C2B;--navy-950:#07141F;--navy-700:#102A42;
  --tint:#E5F4FB;--surface:#FFFFFF;--surface-alt:#F5F8FA;
  --t900:#10243A;--t600:#72808D;--t500:#94A0AB;--border:#E8EDF1;
  --w68:rgba(255,255,255,.68);--w52:rgba(255,255,255,.52);--w48:rgba(255,255,255,.48);--w28:rgba(255,255,255,.28);--w10:rgba(255,255,255,.10);--w06:rgba(255,255,255,.06);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--t900);background:var(--surface);letter-spacing:-.4px;line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .2s}
ul{list-style:none}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}

.display{font-size:72px;font-weight:700;line-height:1.1;letter-spacing:-4.68px}
.h1s{font-size:46px;font-weight:700;line-height:1.2;letter-spacing:-2.53px}
.h2{font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-2.2px}
.h2m{font-size:42px;font-weight:700;line-height:1.28;letter-spacing:-2.31px}
.h2b{font-size:39px;font-weight:700;line-height:1.25;letter-spacing:-1.95px}
.h3l{font-size:33px;font-weight:700;line-height:1.35;letter-spacing:-1.49px}
.h3{font-size:26px;font-weight:700;line-height:1.35;letter-spacing:-1.17px}
.h4{font-size:21px;font-weight:700;line-height:1.55}
.body-l{font-size:19px;line-height:1.75}
.body{font-size:18px;line-height:1.75}
.body-s{font-size:17px;line-height:1.8}
.caption{font-size:16px;line-height:1.8;font-weight:500}
.small{font-size:17px;line-height:1.55}
.badge{font-size:16px;font-weight:700;line-height:1.55}
.micro{font-size:16px;line-height:1.55}
.eyebrow{display:block;font-size:17px;font-weight:800;line-height:1;letter-spacing:2.4px;text-transform:uppercase;color:var(--t900);margin-bottom:22px}
.eyebrow--light{color:#fff}
.eyebrow--blue{color:var(--blue)}

.btn{display:inline-flex;align-items:center;gap:40px;height:50px;padding:0 27px;background:var(--tint);color:var(--navy-700);font-size:17px;font-weight:800;border-radius:0;transition:background .2s,color .2s,gap .2s}
.btn:hover{background:var(--blue);color:#fff;gap:52px}
.btn--dark{background:var(--blue);color:#fff}
.btn--dark:hover{background:#fff;color:var(--navy-700)}
.btn--ghost{background:transparent;color:#fff;border:1px solid var(--w28)}
.btn--ghost:hover{background:#fff;color:var(--navy-700)}
.btn .arr{font-size:22px;line-height:1}

.site-header{position:fixed;top:0;left:0;right:0;height:92px;z-index:50;transition:background .25s,box-shadow .25s,height .25s}
.site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:block;height:34px}
.logo img{height:100%;width:auto}
.logo .l-dark{display:none}
.gnb{display:flex;gap:44px;margin-left:auto}
.gnb>li{position:relative}
.gnb>li>a{display:flex;align-items:center;gap:6px;height:92px;font-size:17px;font-weight:700;color:#fff;position:relative}
.gnb>li>a::after{content:"";position:absolute;left:0;bottom:22px;height:2px;width:0;background:var(--blue);transition:width .2s}
.gnb>li:hover>a::after{width:100%}
.gnb .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.7}
.dropdown{position:absolute;top:72px;left:-24px;min-width:200px;background:var(--navy-900);padding:12px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s}
.gnb>li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:11px 24px;font-size:17px;color:var(--w68)}
.dropdown a:hover{color:#fff;background:var(--w06);padding-left:30px;transition:color .18s,background-color .18s,padding-left .18s}
.hd-right{display:flex;align-items:center;gap:20px;margin-left:24px}
.site-header .btn{height:44px;gap:20px;padding:0 20px;background:var(--w06);color:#fff;border:1px solid var(--w28)}
.site-header .btn:hover{background:#fff;color:var(--navy-700)}
.site-header.is-scrolled{background:#fff;box-shadow:0 1px 0 var(--border);height:76px}
.site-header.is-scrolled .gnb>li>a{color:var(--t900);height:76px}
.site-header.is-scrolled .logo .l-white{display:none}
.site-header.is-scrolled .logo .l-dark{display:block}
.site-header.is-scrolled .btn{background:var(--tint);color:var(--navy-700);border-color:transparent}
.site-header.is-scrolled .btn:hover{background:var(--blue);color:#fff}
.site-header.is-scrolled .dropdown{top:64px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{display:block;width:22px;height:2px;background:#fff;transition:.25s}
.site-header.is-scrolled .burger span{background:var(--t900)}

.hero{position:relative;min-height:100vh;background:var(--navy-900);color:#fff;overflow:hidden;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;filter:saturate(1.1);animation:slowzoom 12s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero-dim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,28,43,.96) 0%,rgba(11,28,43,.86) 38%,rgba(11,28,43,.45) 68%,rgba(11,28,43,.35) 100%),linear-gradient(0deg,rgba(11,28,43,.9) 0%,rgba(11,28,43,0) 40%)}
.hero-inner{position:relative;padding:160px 24px 120px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 15px;line-height:1.45;border-radius:999px;border:1px solid var(--w28);background:var(--w06);color:rgba(255,255,255,.78);margin-bottom:28px}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{max-width:560px;color:var(--w68);margin-bottom:72px}
.hero-stats{display:flex}
.hero-stats li{padding:0 40px 0 0;margin-right:40px;border-right:1px solid var(--w28)}
.hero-stats li:last-child{border:0}
.hero-stats strong{display:block;font-size:27px;font-weight:700;line-height:1.3}
.hero-stats li>span{display:block;font-size:16px;font-weight:500;color:var(--w52)}
.scroll-cue{position:absolute;right:48px;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--w52);font-size:16px;letter-spacing:2px}
.scroll-cue i{width:1px;height:48px;background:linear-gradient(var(--w52),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

section{position:relative}
.sec{padding:120px 0}
.sec--alt{background:var(--surface-alt)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
.sec-head p{color:var(--t500);max-width:520px}
.sec-head .btn{flex:none}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-card{background:#fff;border:1px solid var(--border);border-radius:15px;padding:24px 24px 26px;text-align:center;transition:transform .22s,box-shadow .22s}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(16,36,58,.08)}
.cat-card .thumb{width:100%;aspect-ratio:16/10;border-radius:12px;background:var(--surface-alt);overflow:hidden;margin-bottom:18px;display:flex;align-items:center;justify-content:center}
.cat-card .thumb img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .45s}
.cat-card:hover .thumb img{transform:scale(1.035)}
.cat-card strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.9px}
.cat-card span{display:block;font-size:16px;font-weight:600;color:var(--t500);margin-top:2px}
.bento{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:240px 240px;gap:16px;margin-top:16px}
.bento .card:first-child{grid-row:span 2}
.card{position:relative;border-radius:18px;overflow:hidden;background:#111;display:block}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.card:hover img{transform:scale(1.035)}
.card .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,14,24,.9) 0%,rgba(5,17,27,.18) 60%,rgba(0,0,0,0) 100%)}
.card .txt{position:absolute;left:24px;right:24px;bottom:22px;color:#fff}
.card .txt h3{margin-bottom:4px}
.card .txt span{font-size:16px;font-weight:700;color:var(--w68)}
.bento .card:first-child .txt h3{font-size:33px;letter-spacing:-1.49px}

.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.biz-grid .card{height:520px}
.biz-grid .card img{object-fit:cover;object-position:center}
.biz-grid .card .txt{left:28px;right:28px;bottom:28px}
.biz-grid .card .num{display:block;font-size:16px;font-weight:800;color:var(--green);margin-bottom:10px;letter-spacing:2px}
.biz-grid .card p{font-size:16px;color:var(--w68);margin-top:10px;font-weight:500}

.tech{background:linear-gradient(115deg,#0B2B42 0%,#0F4C73 62%,#009AD7 100%);color:#fff;padding:142px 0;overflow:hidden}
.tech::after{content:"";position:absolute;right:-8%;bottom:-20%;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(162,206,80,.18),transparent)}
.tech-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:center;position:relative}
.tech h2{margin-bottom:22px}
.tech p{color:rgba(255,255,255,.58);font-size:17px;max-width:440px;margin-bottom:40px}
.stat-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:460px}
.stat-box li{border:1px solid var(--w48);border-radius:10px;padding:17px 18px}
.stat-box strong{display:block;font-size:27px;font-weight:700;color:var(--green);line-height:1.3}
.stat-box span{font-size:16px;font-weight:500;color:var(--w52)}
.tech-bento{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:180px 180px;gap:12px}
.tech-bento .card:first-child{grid-row:span 2}
.tech-bento .card{background:#0a2236}
.tech-bento .card .txt{bottom:16px;left:18px;right:18px}
.tech-bento .card .txt span{font-size:16px;font-weight:700;color:#fff}

.media-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.media-thumb{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;cursor:pointer}
.media-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.media-thumb:hover img{transform:scale(1.035)}
.media-thumb .play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--navy-700);font-size:17px;font-weight:800}
.media-thumb .count{position:absolute;right:18px;bottom:16px;color:#fff;font-size:16px;font-weight:700;background:rgba(7,20,31,.6);padding:6px 10px;border-radius:999px}
.media-copy h2{margin-bottom:20px}
.media-copy p{color:var(--t600);font-size:17px;margin-bottom:36px}
.fa-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:40px}
.fa-list li{font-size:17px;color:var(--t600);padding-left:14px;position:relative}
.fa-list li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--blue)}

.story-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}
.collage{position:relative;height:520px}
.collage img{position:absolute;border-radius:14px;object-fit:cover}
.collage .a{left:0;top:0;width:68%;height:78%}
.collage .b{right:0;bottom:0;width:48%;height:44%;border:6px solid #fff;box-shadow:0 20px 50px rgba(16,36,58,.12)}
.story-copy h2{margin-bottom:20px}
.quote{font-size:18px;font-weight:700;margin-bottom:28px}
.nlist li{display:flex;gap:18px;padding:14px 0}
.nlist .n{flex:none;width:32px;height:32px;border-radius:10px;background:var(--tint);color:var(--blue);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nlist strong{display:block;font-size:18px;font-weight:700;margin-bottom:2px}
.nlist span{font-size:17px;color:var(--t600)}
.story-foot{border-top:1px solid var(--border);margin-top:20px;padding-top:24px;color:var(--t600);font-size:19px}

.cust{padding:80px 0;overflow:hidden}
.cust .eyebrow{text-align:center;margin-bottom:40px}
.marquee{display:flex;gap:64px;width:max-content;animation:mq 40s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee img{height:44px;width:auto;filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
.marquee img:hover{filter:none;opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-wrap{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert{background:#fff;border:1px solid var(--border);border-radius:15px;padding:26px 24px;transition:transform .22s,box-shadow .22s}
.cert:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(16,36,58,.08)}
.cert .tag{display:inline-block;font-size:16px;font-weight:700;color:var(--blue);background:var(--tint);padding:3px 8px;border-radius:999px;margin-bottom:16px}
.cert strong{display:block;font-size:21px;font-weight:700;line-height:1.35;margin-bottom:8px}
.cert span{display:block;font-size:17px;color:var(--t600)}
.cert em{display:block;font-style:normal;font-size:17px;color:var(--t500);margin-top:12px}

.banner{position:relative;border-radius:18px;overflow:hidden;background:var(--navy-700);color:#fff;min-height:300px;display:flex;align-items:center}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .dim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,44,.96) 0%,rgba(7,27,44,.72) 47%,rgba(7,27,44,.1) 83%)}
.banner .in{position:relative;padding:56px;display:flex;justify-content:space-between;align-items:center;width:100%;gap:40px}
.banner h2{margin-bottom:12px}
.banner p{font-size:16px;color:rgba(255,255,255,.63);font-weight:500}

.site-footer{background:var(--navy-950);color:#fff;padding:80px 0 0}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.ft-grid .logo{height:26px;margin-bottom:24px}
.ft-grid p,.ft-grid li{font-size:16px;color:var(--w68);font-weight:500}
.ft-grid h3{font-size:18px;font-weight:700;margin-bottom:14px}
.ft-grid .tel{display:block;font-size:29px;font-weight:700;line-height:1.55;margin:4px 0 6px;color:#fff}
.ft-grid li{padding:3px 0}
.ft-bottom{border-top:1px solid var(--w10);padding:22px 0;display:flex;justify-content:space-between;font-size:17px;color:var(--w52)}

.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}

.mnav{position:fixed;inset:0;background:var(--navy-950);z-index:60;display:none;flex-direction:column;justify-content:center;padding:40px}
.mnav.open{display:flex}
.mnav a{display:block;font-size:26px;font-weight:700;color:#fff;padding:14px 0;border-bottom:1px solid var(--w10)}
.mnav .x{position:absolute;top:22px;right:24px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer}

.lb{position:fixed;inset:0;background:rgba(4,19,31,.94);z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:40px}
.lb.open{display:flex}
.lb img{max-width:min(1100px,90vw);max-height:70vh;border-radius:12px}
.lb .cap{color:#fff;font-size:18px;font-weight:700}
.lb .nav{display:flex;gap:12px}
.lb button{height:44px;padding:0 18px;border:1px solid var(--w28);background:transparent;color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.lb button:hover{background:#fff;color:var(--navy-700)}
.lb .x{position:absolute;top:24px;right:24px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

@media (max-width:1024px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bento .card{height:240px}.bento .card:first-child{grid-column:span 2;grid-row:auto;height:320px}
  .biz-grid{grid-template-columns:1fr;gap:16px}.biz-grid .card{height:360px}
  .tech-layout,.media-layout,.story-layout{grid-template-columns:1fr;gap:40px}
  .cert-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .gnb,.hd-right .btn{display:none}.burger{display:flex}
}
@media (max-width:768px){
  .display{font-size:40px;letter-spacing:-2.2px}
  .h1s{font-size:33px;letter-spacing:-1.49px}.h2,.h2m,.h2b{font-size:31px;letter-spacing:-1.55px}
  .body{font-size:17px}
  .sec{padding:80px 0}.tech{padding:96px 0}
  .hero-inner{padding:140px 24px 100px}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}.hero-stats li{width:auto;border:0;padding:0;margin:0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .cert-grid{grid-template-columns:1fr}
  .collage{height:360px}
  .banner .in{flex-direction:column;align-items:flex-start;padding:40px 28px}
  .ft-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;gap:8px}
  .scroll-cue{display:none}
  .bento .card .txt h3{font-size:22px;letter-spacing:-0.9px}.bento .card:first-child .txt h3{font-size:27px;letter-spacing:-1.08px}
  .card .txt{left:18px;right:18px;bottom:16px}
}