/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul { list-style: none;}
a { text-decoration: none; color: inherit; }

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{max-width:100%}

html{font-size:62.5%}

@media screen and (min-width: 0\0) {
  /* IE 9, IE 10, IE 11 */
  :root,
  html {
    font-size: 10px;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE 10, IE 11 */
  :root,
  html {
    font-size: 10px;
  }
}

body{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;font-size:1.6rem;line-height:1.5;color:#333;font-weight:300;letter-spacing:-0.025%;overflow-x:hidden}

input,textarea{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;font-size:1.6rem;line-height:1.5;color:#333;font-weight:200;letter-spacing:-0.025%}

#wrap{width:100%}

.header{position:fixed;top:0;left:0;right:0;z-index:100;margin:0;padding:0 10px 0 40px;height:100px;display:flex;justify-content:space-between;align-items:center;background-color:#fff;box-sizing:border-box;border-bottom:1px solid rgba(100, 100, 100, .15);transition:transform .26s ease, background-color .22s ease, border-bottom-color .22s ease, box-shadow .22s ease}
.header:not(.is-dark){border-bottom-color:#ddd;box-shadow:0 4px 12px rgba(0,0,0,.04)}

.header .gnb ul{display:flex}
.header .gnb li{padding:0 30px}
.header .gnb li a{position:relative;padding-bottom:4px;color:#1a1a1a;transition:color .22s ease}
.header .gnb li a::after{content:"";position:absolute;left:50%;bottom:0;width:100%;height:2px;background-color:#1a1a1a;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .22s ease, background-color .22s ease}
.header .gnb li a:hover{color:#1a1a1a}
.header .gnb li a:hover::after{transform:translateX(-50%) scaleX(1)}

.header.is-dark{background-color:rgba(0, 0, 0, .2)}
.header.is-dark .gnb li a{color:#fff}
.header.is-dark .gnb li a:hover{color:#fff}
.header.is-dark .gnb li a::after{background-color:#fff}
.header.is-hidden{transform:translateY(-100%)}

.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0;position:relative;z-index:101}
.menu-toggle span{display:block;width:24px;height:2px;background:#1a1a1a;transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease, background-color .25s ease}
.header.is-dark .menu-toggle span{background:#fff}
.header.is-menu-open .menu-toggle span{background:#fff}
.header.is-menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header.is-menu-open .menu-toggle span:nth-child(2){opacity:0}
.header.is-menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{width:100%;margin:0;background-color:#1a1a1a;padding:0;height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero .hero-slides{position:relative;display:flex;transition:transform .6s cubic-bezier(.65,0,.35,1);will-change:transform;z-index:2}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .8s ease;z-index:0;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(26,26,26,.55), rgba(26,26,26,.7))}
.hero-bg.is-active{opacity:.45}
.hero-bg.b1{background-image:url(../images/main1.png)}
.hero-bg.b2{background-image:url(../images/main4.png)}
.hero-bg.b3{background-image:url(../images/main3.png)}

.hero-graphic{position:absolute;top:50%;right:calc((100% - 1194px) / 2);width:575px;height:575px;margin-top:-287px;pointer-events:none;z-index:1;opacity:0;transform:scale(.85) translateY(20px);filter:blur(10px);transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1), filter .65s ease}
.hero-graphic.is-active{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
.hero-graphic::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(77,142,255,.18), transparent 60%);filter:blur(30px);z-index:-1}
.hero-graphic svg{width:100%;height:100%;display:block;overflow:visible}
.hero-graphic .label{fill:rgba(255,255,255,.55);font-size:10px;font-family:ui-monospace,"SF Mono",Menlo,Monaco,monospace;letter-spacing:.18em;text-transform:uppercase}
.hero-graphic .label--accent{fill:#4d8eff}

/* Variant 1 — Grid Topology (Innovation): blueprint, square grid */
.g-grid .frame-corners path{fill:none;stroke:rgba(77,142,255,.55);stroke-width:1.5;stroke-linecap:square}
.g-grid .divider{stroke:rgba(77,142,255,.25);stroke-width:1;stroke-dasharray:2 4}
.g-grid .zone-label{fill:rgba(77,142,255,.55);font-size:9px;font-family:ui-monospace,"SF Mono",Menlo,Monaco,monospace;letter-spacing:.15em}
.g-grid .path{fill:none;stroke:#4d8eff;stroke-width:1.2;opacity:.55;stroke-linecap:round}
.g-grid .path--soft{opacity:.2;stroke-width:1;stroke-dasharray:2 3}
.g-grid .node{fill:#1a1a1a;stroke:#4d8eff;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(77,142,255,.6));animation:nodeBlink 2.4s ease-in-out infinite}
.g-grid .node--blue{fill:#4d8eff;stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 8px rgba(77,142,255,.85))}
.g-grid .node:nth-of-type(2n){animation-delay:.6s}
.g-grid .node:nth-of-type(3n){animation-delay:1.2s}
.g-grid .hub-box{fill:rgba(77,142,255,.1);stroke:#4d8eff;stroke-width:1.5;filter:drop-shadow(0 0 12px rgba(77,142,255,.55));animation:hubGlow 2.8s ease-in-out infinite}
.g-grid .hub-rack{stroke:#4d8eff;stroke-width:1;opacity:.6}
.g-grid .hub-led{fill:#4d8eff;animation:ledBlink 1.6s ease-in-out infinite}
.g-grid .hub-label{fill:#4d8eff;font-size:8px;font-family:ui-monospace,"SF Mono",Menlo,Monaco,monospace;letter-spacing:.2em;text-anchor:middle}
.g-grid .packet{filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
.g-grid .packet-1{animation:packetPath1 4s linear infinite}
.g-grid .packet-2{animation:packetPath2 4s linear infinite 2s}
.g-grid .chart rect{fill:#4d8eff;opacity:.7;animation:chartGrow 1.4s ease-in-out infinite alternate}
.g-grid .chart rect:nth-of-type(2){animation-delay:.15s}
.g-grid .chart rect:nth-of-type(3){animation-delay:.3s}
.g-grid .chart rect:nth-of-type(4){animation-delay:.45s}
.g-grid .chart rect:nth-of-type(5){animation-delay:.6s}
.g-grid .chart rect:nth-of-type(6){animation-delay:.75s}
@keyframes nodeBlink{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes hubGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(77,142,255,.55))}50%{filter:drop-shadow(0 0 20px rgba(77,142,255,.9))}}
@keyframes packetPath1{0%{cx:120;cy:160}25%{cx:120;cy:220}40%{cx:200;cy:220}55%{cx:200;cy:250}70%{cx:260;cy:270}85%{cx:300;cy:270}100%{cx:340;cy:270}}
@keyframes packetPath2{0%{cx:420;cy:380}25%{cx:420;cy:320}40%{cx:340;cy:320}55%{cx:260;cy:290}70%{cx:220;cy:270}100%{cx:200;cy:250}}
@keyframes chartGrow{0%{transform:scaleY(.5);transform-origin:bottom}100%{transform:scaleY(1.2);transform-origin:bottom}}

/* Variant 2 — Redundant Paths (Reliability) */
.g-pulse .ring{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1;opacity:.6}
.g-pulse .ring--dashed{stroke-dasharray:2 6;animation:ringSpin 50s linear infinite;transform-origin:260px 260px}
.g-pulse .server{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.5);stroke-width:1.2}
.g-pulse .server-slot{stroke:#4d8eff;stroke-width:1;opacity:.55}
.g-pulse .server-led{fill:#4d8eff;filter:drop-shadow(0 0 4px #4d8eff);animation:ledBlink 1.8s ease-in-out infinite}
.g-pulse .server-led:nth-of-type(2n){animation-delay:.6s}
.g-pulse .path-line{fill:none;stroke:#4d8eff;stroke-width:1.4;opacity:.55}
.g-pulse .path-line--failed{stroke:#e8455e;stroke-dasharray:4 4;opacity:.7}
.g-pulse .dot{fill:#4d8eff;filter:drop-shadow(0 0 6px #4d8eff)}
.g-pulse .dot--a{animation:flowAB 3.2s linear infinite}
.g-pulse .dot--b{animation:flowAB 3.2s linear infinite .8s}
.g-pulse .dot--c{animation:flowAB 3.2s linear infinite 1.6s}
.g-pulse .failed-mark{stroke:#e8455e;stroke-width:2;fill:none;stroke-linecap:round}
@keyframes flowAB{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(200px);opacity:0}}
@keyframes ledBlink{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* Variant 3 — Shield / Radar (Security) */
.g-shield .radar{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1;opacity:.55}
.g-shield .radar--dashed{stroke-dasharray:3 6;animation:scanSpin 50s linear infinite;transform-origin:260px 260px}
.g-shield .crosshair{stroke:rgba(255,255,255,.4);stroke-width:1;opacity:.4}
.g-shield .sweep{fill:url(#sweepGradient);opacity:.55;transform-origin:260px 260px;animation:scanSpin 6s linear infinite}
.g-shield .radar-pulse{fill:none;stroke:#4d8eff;stroke-width:1.2;opacity:0;transform-origin:260px 260px;animation:radarPulse 3s ease-out infinite}
.g-shield .radar-pulse:nth-of-type(8){animation-delay:1.5s}
.g-shield .threat{fill:#e8455e;filter:drop-shadow(0 0 6px #e8455e);animation:threatBlink 1.4s ease-in-out infinite}
.g-shield .threat-ring{fill:none;stroke:#e8455e;stroke-width:1.2;opacity:.6;animation:threatRing 1.8s ease-out infinite}
.g-shield g circle.threat:nth-child(4){animation-delay:.3s}
.g-shield g circle.threat:nth-child(6){animation-delay:.6s}
.g-shield g circle.threat-ring:nth-child(3){animation-delay:.3s}
.g-shield g circle.threat-ring:nth-child(5){animation-delay:.6s}
.g-shield .shield-glow{fill:none;stroke:#4d8eff;stroke-width:6;stroke-linejoin:round;opacity:.25;filter:blur(4px);animation:shieldGlow 2.6s ease-in-out infinite}
.g-shield .shield{stroke:#4d8eff;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(77,142,255,.5))}
.g-shield .shield-inner{fill:none;stroke:rgba(77,142,255,.5);stroke-width:1;stroke-dasharray:2 3}
.g-shield .lock{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-shield .lock-body{fill:#4d8eff}
@keyframes scanSpin{to{transform:rotate(360deg)}}
@keyframes radarPulse{0%{r:80;opacity:.8;stroke-width:2}100%{r:220;opacity:0;stroke-width:.4}}
@keyframes threatBlink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes threatRing{0%{r:14;opacity:.7}100%{r:24;opacity:0}}
@keyframes shieldGlow{0%,100%{opacity:.2;stroke-width:5}50%{opacity:.45;stroke-width:7}}

@media (max-width:1280px){.hero-graphic{width:450px;height:450px;margin-top:-225px;right:3%}}
@media (max-width:960px){.hero-graphic{display:none}}
@media (prefers-reduced-motion:reduce){.g-grid .node,.g-grid .hub-box,.g-grid .hub-led,.g-grid .packet,.g-grid .chart rect,.g-pulse .dot,.g-pulse .ring--dashed,.g-pulse .server-led,.g-shield .sweep,.g-shield .radar-pulse,.g-shield .threat,.g-shield .threat-ring,.g-shield .shield-glow,.g-shield .radar--dashed{animation:none}}
.hero article{flex:0 0 100%;width:100%;margin:0;padding:0 calc((100% - 1194px) / 2);box-sizing:border-box}
.hero article .num{color:#fff}
.hero article .num span{margin-left:8px}
.hero article h1{margin:16px 0;font-size:7.2rem;color:#fff}
.hero article .contents{margin-bottom:48px;font-size:2rem;color:#ddd}

.hero article .num,
.hero article h1,
.hero article .contents,
.hero article .btn{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .525s cubic-bezier(.22,.61,.36,1), transform .525s cubic-bezier(.22,.61,.36,1), filter .525s ease}
.hero article.active .num{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:.225s}
.hero article.active h1{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:.525s}
.hero article.active .contents{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:.825s}
.hero article.active .btn{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:1.125s}

main > section:not(.hero) header .division,
main > section:not(.hero) header h1,
main > section:not(.hero) header > p{opacity:0;transform:translateY(40px)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .675s cubic-bezier(.22,.61,.36,1), transform .675s cubic-bezier(.22,.61,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
section header .division.reveal.is-visible{opacity:1;transform:translateY(0);transition-delay:var(--reveal-delay-base, 0s)}
section header h1.reveal.is-visible{opacity:1;transform:translateY(0);transition-delay:calc(var(--reveal-delay-base, 0s) + .11s)}
section header > p.reveal.is-visible{opacity:1;transform:translateY(0);transition-delay:calc(var(--reveal-delay-base, 0s) + .225s)}
.reveal-parallax{transform:translateY(60px);transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
.reveal-parallax.is-visible{transition-delay:0s}

.indicator{width:1194px;margin:0 auto;position:relative;z-index:2;animation:indicatorReveal .525s cubic-bezier(.22,.61,.36,1) 1.5s both}
@keyframes indicatorReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.indicator ul{display:flex;gap:7px;margin-top:64px}
.indicator ul li{cursor:pointer}
.indicator ul li a{display:block;width:40px;height:4px;background:#888;border-radius:999px;transition:width .3s ease, background-color .3s ease}
.indicator ul li.active a{width:64px;background:#fff}

section{width:1194px;margin:120px auto 80px}
section.pin-section{width:auto;max-width:none;margin:120px 0 80px;height:240vh;position:relative}
section.pin-section.core-values{background:#0b0b0b;margin:0}
section.pin-section.core-values .pin-stage{background-color:#0b0b0b;background-image:linear-gradient(rgba(11,11,11,.8), rgba(11,11,11,.8)), url(../images/main2.png);background-size:cover, cover;background-position:center, center;background-repeat:no-repeat, no-repeat;background-attachment:fixed, fixed}
section.pin-section.core-values::before{content:"";position:absolute;top:0;left:0;right:0;height:280px;background:linear-gradient(to bottom, #0b0b0b, transparent);pointer-events:none;z-index:3}
section.pin-section.core-values::after{content:"";position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to bottom, transparent, #0b0b0b);pointer-events:none;z-index:3}
section.pin-section.core-values header .division{color:#ccc}
section.pin-section.core-values header .division::before{background:#fff}
section.pin-section.core-values header h1{color:#fff}
section.pin-section.core-values header > p{color:#ccc}
section.pin-section.core-values .item_group{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:64px}
section.pin-section.core-values .item_group .item{width:auto}
section.pin-section.core-values .item_group .item,
section.pin-section.core-values .item_group .item:nth-child(1),
section.pin-section.core-values .item_group .item:nth-child(2),
section.pin-section.core-values .item_group .item:nth-child(3){background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03));backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 28px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1)}
section.pin-section.core-values .item_group .item h2{color:#fff}
section.pin-section.core-values .item_group .item > p{color:rgba(255,255,255,.85)}
section.pin-section.core-values .item_group .item .icon{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25)}
section.pin-section.core-values .item_group .item .icon span{color:#fff}
section.pin-section.products{background:#1a1a1a;margin:0}
section.pin-section.products .pin-stage{z-index:2;background-color:#1a1a1a;background-image:linear-gradient(rgba(26,26,26,.5), rgba(26,26,26,.5)), url(../images/main4.png);background-size:cover, cover;background-position:center, center;background-repeat:no-repeat, no-repeat;background-attachment:fixed, fixed}
section.pin-section.products::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom, #0b0b0b, transparent);pointer-events:none;z-index:3}
section.pin-section.products header .division{color:#ccc;position:relative;z-index:2}
section.pin-section.products header .division::before{background:#fff}
section.pin-section.products header h1{color:#fff;position:relative;z-index:2}
section.pin-section.products .product{background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px rgba(0,0,0,.25)}
section.pin-section.products .product+.product{margin-top:32px}
section.pin-section.products .product .num{color:rgba(255,255,255,.7)}
section.pin-section.products .product .num span{color:rgba(255,255,255,.5)}
section.pin-section.products .product > h1{color:#fff}
section.pin-section.products .product h2{color:rgba(255,255,255,.85)}
section.pin-section.products .product > p{color:rgba(255,255,255,.7)}
section.pin-section.products .btn.positive button{background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18)}
section.pin-section.products .btn.positive button:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35)}
section.pin-section.products .btn.positive button .icon{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2)}

.hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:280px;background:linear-gradient(to bottom, transparent, #0b0b0b);pointer-events:none;z-index:3}
section.pin-section .pin-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
section.pin-section .pin-stage > *{width:100%;max-width:1194px;flex-shrink:0;box-sizing:border-box}

.item_group .item .icon,
.item_group .item h2,
.item_group .item > p{opacity:0;transform:translateY(24px);transition:opacity .49s cubic-bezier(.22,.61,.36,1), transform .49s cubic-bezier(.22,.61,.36,1)}
.item_group .item.is-visible .icon{opacity:1;transform:translateY(0);transition-delay:calc(.15s + var(--item-stagger, 0s))}
.item_group .item.is-visible h2{opacity:1;transform:translateY(0);transition-delay:calc(.3s + var(--item-stagger, 0s))}
.item_group .item.is-visible > p{opacity:1;transform:translateY(0);transition-delay:calc(.45s + var(--item-stagger, 0s))}
.item_group.product .item:nth-child(2){--item-stagger:.15s}
.item_group.product .item:nth-child(3){--item-stagger:.3s}
.item_group.product .item:nth-child(4){--item-stagger:.45s}
.item_group .item .icon{position:relative}
.item_group .item .icon::after{content:"";position:absolute;left:50%;bottom:-14px;width:70%;height:10px;background:radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, transparent 65%);border-radius:50%;transform:translateX(-50%) scale(0);opacity:0;pointer-events:none}
@keyframes iconBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes groundShadow{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1);opacity:.5}
  50%{transform:translateX(-50%) translateY(8px) scale(.6);opacity:.25}
}
.item_group .item:hover .icon{animation:iconBounce .6s ease-in-out infinite}
.item_group .item:hover .icon::after{animation:groundShadow .6s ease-in-out infinite}
.item_group.product .item{opacity:0;transform:translateY(30px);transition:opacity .525s cubic-bezier(.22,.61,.36,1), transform .525s cubic-bezier(.22,.61,.36,1)}
.item_group.product .item.is-visible{opacity:1;transform:translateY(0);transition-delay:var(--item-stagger, 0s)}
section header .division::before{display:block;content:"";width:40px;height:2px;margin-bottom:16px;background:#333;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(0.65, 0, 0.35, 1)}
section header .division.reveal.is-visible::before{transform:scaleX(1);transition-delay:var(--reveal-delay-base, 0s)}
section header h1{font-size:4.8rem;padding:16px 0;color:#1a1a1a}
section header p{color:#4b4b4b}

section .item_group{display:flex;gap:0 30px;margin-top:64px}
section .item_group .item{width:378px;padding:24px;background:#f7f7f7;border-radius:8px}
section .item_group.product{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;padding:0;background:transparent;border-radius:0}
section .item_group.product .item{width:auto}
section .item_group:not(.product) .item:nth-child(1){background:#eef0f4}
section .item_group:not(.product) .item:nth-child(2){background:#eef2f0}
section .item_group:not(.product) .item:nth-child(3){background:#f0edf1}
section .item_group.product.career .item:nth-child(1){background:#eef0f4}
section .item_group.product.career .item:nth-child(2){background:#eef2f0}
section .item_group.product.career .item:nth-child(3){background:#f3efe9}
section .item_group.product.career .item:nth-child(4){background:#f0edf1}
section .item_group.product:not(.career) .item:nth-child(1){background:#edf1f5}
section .item_group.product:not(.career) .item:nth-child(2){background:#ecf2ee}
section .item_group.product:not(.career) .item:nth-child(3){background:#f2eee6}
section .item_group.product:not(.career) .item:nth-child(4){background:#efecf2}
section .item_group .item .icon{display:flex;justify-content:center;align-items:center;width:56px;height:56px;border:1px solid #ddd;background:#fff;border-radius:8px}
section .item_group .item h2{padding:32px 0 8px;font-weight:400;font-size:2rem;color:#4b4b4b}
section .item_group .item p{font-size:1.8rem;color:#666}

section .list{margin-top:24px}
section .list .item{width:100%}
section .list .item ul{list-style-type:disc;margin-left:24px}
section .list .item li{color:#666}

.list .item li{opacity:0;transform:translateY(20px);transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1)}
.list.is-visible .item li{opacity:1;transform:translateY(0);transition-delay:calc(var(--reveal-delay-base, 0s) + .9s)}
.list.is-visible .item li:nth-child(1){transition-delay:calc(var(--reveal-delay-base, 0s) + .45s)}
.list.is-visible .item li:nth-child(2){transition-delay:calc(var(--reveal-delay-base, 0s) + .5625s)}
.list.is-visible .item li:nth-child(3){transition-delay:calc(var(--reveal-delay-base, 0s) + .675s)}
.list.is-visible .item li:nth-child(4){transition-delay:calc(var(--reveal-delay-base, 0s) + .79s)}

.sub section{margin-top:80px}
.tab + section{margin-top:40px}

.sub .visual{width:100%;padding:120px 0 200px;margin:0;background:#1a1a1a;background-size:cover !important}
.visual .container{width:1194px;margin:0 auto}
.visual .breadcrumb{color:#ddd}
.visual .breadcrumb span:last-child{color:#fff}
.visual h1{font-size:7.2rem;color:#fff}
.visual p{font-size:2rem;color:#ededed}

@keyframes visualReveal{from{opacity:0;transform:translateY(40px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.visual .breadcrumb,
.visual h1,
.visual p{opacity:0;animation:visualReveal .675s cubic-bezier(.22,.61,.36,1) forwards}
.visual .breadcrumb{animation-delay:.15s}
.visual h1{animation-delay:.375s}
.visual p{animation-delay:.6s}

.visual.about{background:url(../images/about.png) no-repeat 60% 0;}
.visual.hydra{background:url(../images/hydra.png) no-repeat 60% 0;}
.visual.hydra-dns{background:url(../images/hydra-dns.png) no-repeat 60% 0;}
.visual.career{background:url(../images/career.png) no-repeat 60% 0;}
.visual.contact{background:url(../images/contact.png) no-repeat 60% 0;}

.middle_visual{height:320px;margin-top:48px;background:#1a1a1a;clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(0.55, 0.085, 0.68, 0.53);transition-delay:calc(var(--reveal-delay-base, 0s) + .45s);overflow:hidden}
.middle_visual.is-visible{clip-path:inset(0)}
.middle_visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.middle_visual:hover img{transform:scale(1.08)}

.tab{margin-top:80px;opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--reveal-delay-base, 0s)}
.tab.is-visible{opacity:1;transform:translateY(0)}
.tab ul{width:1194px;margin:0 auto;display:flex}
.tab ul li a{position:relative;display:block;padding:16px 0;margin:0 16px;color:#888;font-size:2.2rem;font-weight:400;transition:color .22s ease}
.tab ul li a::after{content:"";position:absolute;left:50%;bottom:0;width:100%;height:3px;background:#1a1a1a;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.tab ul li a:hover{color:#1a1a1a}
.tab ul li a:hover::after{transform:translateX(-50%) scaleX(1)}
.tab ul li.active a{color:#1a1a1a}
.tab ul li.active a::after{transform:translateX(-50%) scaleX(1)}

.product{padding:32px;margin-top:64px;background:#f7f7f7;border-radius:8px}
.product .num span{margin-left:8px;color:#666}
.product h1{padding:16px 0;font-size:5.6rem;color:#1a1a1a}
.product h2{font-size:2.2rem;color:#4b4b4b;}
.product p{font-size:1.8rem;color:#666}
.product .btn{margin-top:40px}

.product > .num,
.product > h1,
.product > h2,
.product > p,
.product > .btn{opacity:0;transform:translateY(30px);transition:opacity .525s cubic-bezier(.22,.61,.36,1), transform .525s cubic-bezier(.22,.61,.36,1)}
.product.is-visible > .num{opacity:1;transform:translateY(0);transition-delay:.075s}
.product.is-visible > h1{opacity:1;transform:translateY(0);transition-delay:.19s}
.product.is-visible > h2{opacity:1;transform:translateY(0);transition-delay:.3s}
.product.is-visible > p{opacity:1;transform:translateY(0);transition-delay:.41s}
.product.is-visible > .btn{opacity:1;transform:translateY(0);transition-delay:.525s}

.item_group.product.mono .item{background:#f7f7f7 !important}

section .item_group.career .item{padding:32px}
section .item_group.career h2{font-size:4rem;color:#1a1a1a;font-weight:500}
section .item_group.career h3{padding:8px 0 16px;font-size:2.2rem;color:#4b4b4b;font-weight:400}
section .item_group.career p{padding-bottom:24px}

.map_group{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.map iframe{display:block;width:100%;height:420px}
.map_group .info dt{font-size:1.8rem;font-weight:400}
.map_group .info dd{padding-bottom:32px;font-size:1.5rem}

.map_group > .map,
.map_group > .info{opacity:0;transform:translateY(30px);transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1)}
.map_group.is-visible > .map{opacity:1;transform:translateY(0);transition-delay:calc(var(--reveal-delay-base, 0s) + .3s)}
.map_group.is-visible > .info{opacity:1;transform:translateY(0);transition-delay:calc(var(--reveal-delay-base, 0s) + .5s)}

.inquiry{margin-top:40px;padding:48px;border-radius:8px;background:#f7f7f7}
.inquiry .item{display:flex;justify-content:space-between;align-items:center; padding:40px 24px;border-radius:8px;background:#fff;opacity:0;transform:translateY(20px);transition:transform .55s cubic-bezier(.4,0,.2,1), box-shadow .55s cubic-bezier(.4,0,.2,1), opacity .5s ease;cursor:pointer}
.inquiry.is-visible .item{opacity:1;transform:translateY(0);animation:inquiryItemReveal .55s cubic-bezier(.4,0,.2,1) backwards}
.inquiry.is-visible .item:nth-child(1){animation-delay:calc(var(--reveal-delay-base, 0s) + .3s)}
.inquiry.is-visible .item:nth-child(2){animation-delay:calc(var(--reveal-delay-base, 0s) + .45s)}
.inquiry.is-visible .item:nth-child(3){animation-delay:calc(var(--reveal-delay-base, 0s) + .6s)}
.inquiry.is-visible .item:nth-child(4){animation-delay:calc(var(--reveal-delay-base, 0s) + .75s)}
.inquiry.is-visible .item:hover{transform:translateY(-8px);box-shadow:0 16px 32px rgba(0,0,0,.1)}
@keyframes inquiryItemReveal{from{opacity:0;transform:translateY(20px)}}
.inquiry .item+.item{margin-top:24px}
.inquiry .item .title{font-size:2.4rem;font-weight:400;color:#1a1a1a}
.inquiry .item .icon{display:flex;align-items:center;justify-content:center}
.inquiry .item .icon span{margin-left:16px}

footer{background:#0a0a0a}
footer .container{width:1194px;margin:0 auto;padding:56px 0;display:flex;justify-content:space-between}
footer .infomation p{margin:8px 0;font-size:1.5rem;color:#e6e6e6}
footer address{margin-top:40px}
footer address,footer .infomation .copyright{font-size:1.3rem;color:#888}

.f_navi{display:flex;gap:0 48px}
.f_navi .title,.f_navi li{padding:0 24px}
.f_navi .title{margin-bottom:16px;font-size:1.5rem;color:#e6e6e6}

.f_navi li a{font-size:1.3rem;color:#888;transition:all .5s}
.f_navi li a:hover{color:#fff}

.form{margin-top:48px}
.form .input{display:flex;align-items:center;margin-bottom:16px;opacity:0;transform:translateY(15px);animation-fill-mode:backwards}
.form.is-visible .input{animation:formInputReveal .5s cubic-bezier(.22,.61,.36,1) backwards;opacity:1;transform:translateY(0)}
.form.is-visible .input:nth-child(1){animation-delay:calc(var(--reveal-delay-base, 0s) + .6s)}
.form.is-visible .input:nth-child(2){animation-delay:calc(var(--reveal-delay-base, 0s) + .75s)}
.form.is-visible .input:nth-child(3){animation-delay:calc(var(--reveal-delay-base, 0s) + .9s)}
.form.is-visible .input:nth-child(4){animation-delay:calc(var(--reveal-delay-base, 0s) + 1.05s)}
.form.is-visible .input:nth-child(5){animation-delay:calc(var(--reveal-delay-base, 0s) + 1.2s)}
.form.is-visible .input:nth-child(6){animation-delay:calc(var(--reveal-delay-base, 0s) + 1.35s)}
.form.is-visible .input:nth-child(7){animation-delay:calc(var(--reveal-delay-base, 0s) + 1.5s)}
.form.is-visible .input:nth-child(8){animation-delay:calc(var(--reveal-delay-base, 0s) + 1.65s)}
.form ~ .btn_group{opacity:0;transform:translateY(15px);transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1)}
.form.is-visible ~ .btn_group{opacity:1;transform:translateY(0);transition-delay:calc(var(--reveal-delay-base, 0s) + 1.5s)}
@keyframes formInputReveal{from{opacity:0;transform:translateY(15px)}}
.form .input span{width:180px}
.form .input span+span{width:680px}
.form .input input,.form .input textarea{width:100%;padding:16px 14px;border-radius:6px;border:1px solid #ccc;background:#f7f7f7;box-sizing:border-box;outline:none;transition:border-color .2s ease}
.form .input input:focus,.form .input textarea:focus{border:1px solid #1a1a1a}
.form .input input::placeholder,.form .input textarea::placeholder{color:transparent;transition:color .25s ease}
.form .input input:focus::placeholder,.form .input textarea:focus::placeholder{color:#bbb}

h1{font-weight:500}
h2{font-weight:400}

button{font-family:"Pretendard Variable", Pretendard;color:#333;font-weight:300;letter-spacing:-0.025;font-weight:400}
.btn button{display:flex;gap:0 24px;justify-content:space-between;align-items: center; padding:6px 6px 6px 24px;background:none;border-radius:999px;cursor:pointer;transition:.22s ease}
.btn button .icon{display:flex;width:39px;height:39px;justify-content:center;align-items:center;border-radius:999px;transition:.22s ease;overflow:hidden}
.btn button .icon img{transition:transform .22s ease}
.btn button:hover .icon img{animation:arrowBounce 1s ease-in-out infinite}
@keyframes arrowBounce{
  0%{transform:translateX(0)}
  50%{transform:translateX(5px)}
  100%{transform:translateX(0)}
}

.btn.negative button{border:2px solid #888;color:#fff}
.btn.negative button:hover{border-color:#ddd}
.btn button .icon{background:#666}
.btn.positive button{border:2px solid #ccc;background:#fff}
.btn.positive button:hover{border-color:#c41926}
.btn.negative button:hover .icon,
.btn.positive button:hover .icon{background:#c41926}

.btn_group{width:860px;gap:0 16px;display:flex;justify-content:right;}
.btn_group button{display:flex;gap:0 8px;justify-content:space-between;align-items:center;padding:12px 30px 12px 22px;background:none;border-radius:999px;cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1), background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;border:1px solid #ccc}
.btn_group button+button{padding:12px 30px;background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.btn_group button .material-symbols-outlined{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.btn_group button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);border-color:#1a1a1a;color:#1a1a1a}
.btn_group button:first-child:hover .material-symbols-outlined{transform:translateX(-5px)}
.btn_group button+button:hover{background:#000;border-color:#000;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* ==========================================================================
   Responsive — Tablet (≤1024px)
   ========================================================================== */
@media (max-width:1194px){
  .header{padding:0 24px;height:70px}
  .header .gnb li{padding:0 16px}
  .header .gnb li a{font-size:1.5rem}

  .hero article{padding:0 32px}
  .hero article h1{font-size:5.6rem}
  .hero article .contents{font-size:1.8rem;margin-bottom:36px}

  .indicator{width:auto;left:32px;right:32px;transform:none}
  .indicator ul{margin-top:48px}

  section{width:auto;max-width:none;padding:0 32px;box-sizing:border-box}
  section.pin-section{padding:0;height:200vh}
  section.pin-section .pin-stage{align-items:stretch}
  section.pin-section .pin-stage > *{width:auto;max-width:none;padding-left:0;padding-right:0;margin-left:32px;margin-right:32px}
  section.pin-section .pin-stage > .product{padding:24px}

  section header h1{font-size:3.6rem}
  section header > p{font-size:1.6rem}

  section .item_group{flex-wrap:wrap;gap:16px;margin-top:48px}
  section .item_group .item{width:calc(50% - 8px);box-sizing:border-box}
  section .item_group.product{grid-template-columns:repeat(2,1fr)}

  .product{padding:24px}
  .product h1{font-size:4.2rem;padding:12px 0}
  .product h2{font-size:1.9rem}
  .product p{font-size:1.6rem}

  .visual .container{width:auto;padding:0 32px}
  .visual h1{font-size:5.6rem}
  .visual p{font-size:1.7rem}

  .middle_visual{height:280px}

  .map_group{grid-template-columns:1fr;gap:24px}
  .map iframe{height:340px}

  .inquiry{padding:32px}
  .inquiry .item{padding:28px 24px}
  .inquiry .item .title{font-size:2rem}

  .form{padding:0}
  .form .input span{width:140px}
  .form .input span+span{width:auto;flex:1}

  .tab{margin-top:64px}
  .tab ul{width:auto;padding:0 32px}
  .tab ul li a{padding:14px 0;margin:0 12px;font-size:1.9rem}

  .btn_group{width:auto;padding:0 32px}

  footer .container{width:auto;padding:48px 32px}
  .f_navi{gap:0 32px}

  .hero-graphic{width:380px;height:380px;margin-top:-190px;right:32px}
  .hero-bg{background-attachment:scroll}
  section.pin-section.core-values .pin-stage,
  section.pin-section.products .pin-stage{background-attachment:scroll, scroll}
}

/* ==========================================================================
   Responsive — Mobile (≤640px)
   ========================================================================== */
@media (max-width:640px){
  html{font-size:56.25%}

  .header{padding:0 16px;height:60px}
  .header .logo img{max-height:32px;width:auto}
  .menu-toggle{display:flex}
  .header .gnb{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;background:rgba(10,10,10,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:99;padding-top:60px;box-sizing:border-box}
  .header.is-menu-open{transform:none !important;background-color:transparent !important;border-bottom-color:transparent !important;box-shadow:none !important}
  .header.is-menu-open .gnb{transform:translateX(0)}
  .header .gnb ul{flex-direction:column;gap:8px;text-align:center}
  .header .gnb li{padding:0}
  .header .gnb li a{display:block;padding:14px 32px;color:#fff !important;font-size:2.4rem;font-weight:300}
  .header .gnb li a::after{display:none}

  .hero{height:100vh;min-height:100vh;padding:100px 0 40px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto 1fr;grid-template-areas:"slides" "indicator" "." "graphic" ".";row-gap:16px}
  .hero .hero-slides{grid-area:slides;width:100%;min-width:0}
  .hero article{padding:0 20px}
  .hero article .num{font-size:1.4rem}
  .hero article h1{font-size:4.4rem;margin:12px 0}
  .hero article .contents{font-size:1.6rem;margin-bottom:28px}
  .hero article .contents br{display:none}

  .hero-graphic{display:block;grid-area:graphic;position:relative;top:auto;right:auto;left:auto;bottom:auto;width:240px;height:240px;margin:0 auto;transform:none;filter:none;transition:opacity .65s cubic-bezier(.22,.61,.36,1)}
  .hero-graphic.is-active{transform:none;filter:none}
  .hero-bg{opacity:.55}
  .hero-bg.is-active{opacity:.55}
  .hero::after{height:120px}

  .indicator{grid-area:indicator;position:static;width:100%;max-width:none;margin:24px 0 0;padding:0 20px;left:auto;right:auto;box-sizing:border-box;transform:none}
  .indicator ul{margin-top:0;gap:5px;justify-content:flex-start}
  .indicator ul li a{width:32px;height:3px}
  .indicator ul li.active a{width:48px}

  section{padding:0 20px}
  section.pin-section{height:auto;min-height:0;padding:0}
  section.pin-section .pin-stage{position:static;height:auto;padding:80px 0;align-items:stretch}
  section.pin-section .pin-stage > *{width:auto;max-width:none;padding-left:0;padding-right:0;margin-left:20px;margin-right:20px}
  section.pin-section .pin-stage > .product{padding:20px}
  section.pin-section.core-values::before,
  section.pin-section.core-values::after,
  section.pin-section.products::before{display:none}

  section header h1{font-size:2.8rem}
  section header > p{font-size:1.5rem}

  section .item_group{flex-direction:column;flex-wrap:nowrap;gap:12px;margin-top:32px}
  section .item_group .item{width:100% !important;padding:20px}
  section .item_group.product{display:flex;flex-direction:column}
  section.pin-section.core-values .item_group{grid-template-columns:1fr;gap:12px}
  section .list .item{width:100%}

  .product{padding:20px;margin-top:32px}
  .product h1{font-size:3.4rem}
  .product h2{font-size:1.7rem}
  .product p{font-size:1.5rem;line-height:1.6}
  .product p br{display:none}
  .product .btn{margin-top:24px}

  .btn button{padding:4px 4px 4px 18px;gap:0 14px}
  .btn button .icon{width:32px;height:32px}
  .btn button>span:first-child{font-size:1.4rem}

  .visual{padding:120px 0 80px !important}
  .visual .container{padding:0 20px}
  .visual h1{font-size:3.6rem}
  .visual p{font-size:1.5rem}  

  .middle_visual{height:200px;margin-top:32px}

  .tab{margin-top:48px}
  .tab ul{padding:0 20px;gap:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab ul li a{padding:12px 0;margin:0;font-size:1.6rem;white-space:nowrap}

  .map iframe{height:260px}
  .map_group .info dt{font-size:1.6rem}
  .map_group .info dd{font-size:1.4rem;padding-bottom:20px}

  .inquiry{padding:20px}
  .inquiry .item{padding:20px;flex-direction:column;align-items:flex-start;gap:12px}
  .inquiry .item .title{font-size:1.7rem}
  .inquiry .item+.item{margin-top:12px}

  .form{margin-top:32px}
  .form .input{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}
  .form .input span,.form .input span+span{width:100%}

  .btn_group{flex-wrap:wrap;justify-content:stretch;padding:0 20px;gap:8px}
  .btn_group button{flex:1;justify-content:center;padding:10px 20px;font-size:1.4rem}
  .btn_group button+button{padding:10px 20px}

  footer{padding:40px 0 32px}
  footer .container{padding:0 20px;flex-direction:column;gap:32px}
  footer address{margin-top:24px}
  .f_navi{display:none}
  footer .infomation p br{display:none}
}

/* ==========================================================================
   Responsive — Tablet Portrait (indicator left-align)
   ========================================================================== */
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
  .indicator{width:100%;max-width:none;margin:0;padding:0 32px;left:0;right:auto;box-sizing:border-box}
  .indicator ul{justify-content:flex-start}
}

/* ==========================================================================
   Responsive — Tablet Landscape (disable pin to prevent footer overlap)
   ========================================================================== */
@media (min-width:641px) and (max-width:1366px) and (orientation:landscape) and (max-height:1100px){
  section.pin-section{height:auto;min-height:0;padding:0}
  section.pin-section .pin-stage{position:static;height:auto;padding:80px 0;align-items:stretch;overflow:visible}
  section.pin-section .pin-stage > *{width:auto;max-width:none;margin-left:32px;margin-right:32px}
  section.pin-section .pin-stage > .product{padding:24px}
  section.pin-section.core-values::before,
  section.pin-section.core-values::after,
  section.pin-section.products::before{display:none}
}

/* ==========================================================================
   Responsive — Small Mobile (≤380px)
   ========================================================================== */
@media (max-width:380px){
  .hero article h1{font-size:3.6rem}
  .visual h1{font-size:3rem}
  section header h1{font-size:2.4rem}
  .product h1{font-size:2.8rem}
  .header .gnb li{padding:0 6px}
  .header .gnb li a{font-size:1.2rem}
}