@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{font-size:62.5%}html,body{width:100%;height:100%;overflow-x:hidden;font-size:1.6rem}@media (width >= 787px) and (width <= 1200px){html,body{font-size:1.5rem}}@media (width <= 786px){html,body{font-size:1.4rem}}img{max-width:100%;width:100%;height:100%;vertical-align:bottom}li{list-style:none}a{text-decoration:none;color:#222;font-weight:400}section{background:var(--color-bg-light);margin-bottom:-2px}section,footer{min-height:100vh;position:relative}#smooth-wrapper{overflow:hidden;height:100vh}#smooth-content{width:100%;overflow:hidden;pointer-events:none;>main{pointer-events:none;>*{pointer-events:auto}}}:root{--color-primary: #ffd64f;--color-secondary: #fc5778;--color-black-2: #0e0e0e;--color-black: #121212;--color-text-dark: #212121;--color-text-medium: #616161;--color-text-light: #9e9e9e;--color-text-info: #00b0f4;--color-text-success: #11b76b;--color-text-warning: #ffa100;--color-text-danger: #fa4362;--color-bg-info: #e5f3ff;--color-bg-success: #e6f6ed;--color-bg-warning: #fff2d7;--color-bg-danger: #ffe6ec;--color-bg-dark: #263238;--color-bg-light: #f5f6f7;--color-border-color: #dddedf;--color-border-radius: 4px;--color-tooltip-bg: #23282d;--color-tooltip-text: #eaecef;--color-bg: linear-gradient(0deg,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3)),linear-gradient(180deg,#e5e5e5,#f3f3f3 79.17%,#e2e2e2)}:root{--container-max-width: 1200px;--header-height: 80px;--content-padding: 4%}:root{--font-size-xs: 1.2rem;--font-size-sm: 1.4rem;--font-size-base: 1.6rem;--font-size-md: 1.8rem;--font-size-lg: 2rem;--font-size-xl: 2.2rem;--font-size-2xl: 2.4rem;--font-size-3xl: 3rem;--font-size-4xl: 4.8rem;--font-size-5xl: 5.2rem;--font-size-6xl: 6.8rem;--font-size-7xl: 18.2rem}@media (width >= 787px) and (width <= 1200px){:root{--font-size-xs: 1.1rem;--font-size-sm: 1.3rem;--font-size-base: 1.5rem;--font-size-md: 1.7rem;--font-size-lg: 1.9rem;--font-size-xl: 2rem;--font-size-2xl: 2.2rem;--font-size-3xl: 2.6rem;--font-size-4xl: 3.8rem;--font-size-5xl: 4rem;--font-size-6xl: 5.2rem;--font-size-7xl: 12rem}}@media (width <= 786px){:root{--font-size-xs: 1rem;--font-size-sm: 1.2rem;--font-size-base: 1.4rem;--font-size-md: 1.6rem;--font-size-lg: 1.8rem;--font-size-xl: 1.8rem;--font-size-2xl: 2rem;--font-size-3xl: 1.9rem;--font-size-4xl: 2.4rem;--font-size-5xl: 2.4rem;--font-size-6xl: 3.4rem;--font-size-7xl: 5.4rem}}@font-face{font-family:Orbitron;src:url(/fonts/orbitron/Orbitron-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Orbitron;src:url(/fonts/orbitron/Orbitron-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Orbitron;src:url(/fonts/orbitron/Orbitron-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Orbitron;src:url(/fonts/orbitron/Orbitron-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Orbitron;src:url(/fonts/orbitron/Orbitron-ExtraBold.ttf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Orbitron;src:url(/fonts/orbitron/Orbitron-Black.ttf) format("truetype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:PP Eiko;src:url(/fonts/PPEiko/PPEiko-Thin.otf) format("opentype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:PP Eiko;src:url(/fonts/PPEiko/PPEiko-LightItalic.otf) format("opentype");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:PP Eiko;src:url(/fonts/PPEiko/PPEiko-Medium.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:PP Editorial New;src:url(/fonts/PPEditorialNew/PPEditorialNew-Ultralight.otf) format("opentype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:PP Editorial New;src:url(/fonts/PPEditorialNew/PPEditorialNew-UltralightItalic.otf) format("opentype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:PP Editorial New;src:url(/fonts/PPEditorialNew/PPEditorialNew-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:PP Editorial New;src:url(/fonts/PPEditorialNew/PPEditorialNew-Italic.otf) format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:PP Editorial New;src:url(/fonts/PPEditorialNew/PPEditorialNew-Ultrabold.otf) format("opentype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:PP Editorial New;src:url(/fonts/PPEditorialNew/PPEditorialNew-UltraboldItalic.otf) format("opentype");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:PP Supply Sans;src:url(/fonts/PPSupply/PPSupplySans-Ultralight.otf) format("opentype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:PP Supply Sans;src:url(/fonts/PPSupply/PPSupplySans-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:PP Supply Mono;src:url(/fonts/PPSupply/PPSupplyMono-Ultralight.otf) format("opentype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:PP Supply Mono;src:url(/fonts/PPSupply/PPSupplyMono-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-Thin.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-ExtraLight.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/static/woff2/Pretendard-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}html{--current-color-bg: #f5f6f7;--current-color-text: #212121;user-select:none;-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}body{background-color:#000;color:var(--color-text-medium);font-family:Pretendard,sans-serif;font-weight:400;overflow:hidden;width:100%;height:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}#intro{position:fixed;inset:0;z-index:999;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:transparent;.intro-overlay{position:absolute;inset:0;background-color:#000;z-index:0;opacity:0;transform:translateZ(0);backface-visibility:hidden;will-change:opacity}.intro-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:0;z-index:1;@media (width <= 1024px) and (width > 786px){grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}@media (width <= 786px){grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}.grid-item{position:relative;background-color:#000;overflow:hidden;transform:translateZ(0);backface-visibility:hidden}}.intro-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3rem}.intro-progress{display:flex;flex-direction:column;align-items:center;gap:1.5rem;min-width:320px;@media (width <= 786px){min-width:280px;gap:1.2rem}.space-graphic{width:140px;height:140px;position:relative;margin-bottom:2rem;animation:graphicFloat 6s ease-in-out infinite;@media (width <= 786px){width:120px;height:120px;margin-bottom:1.5rem}.planet{width:70px;height:70px;background:radial-gradient(circle at 40% 40%,#fff,#f5fafff2 20%,#dcebfad9,#bed7f0bf 80%,#a0bee1a6);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 40px #ffffff80,0 0 80px #c8dcff66,0 0 120px #96bef033,inset -10px -10px 20px #96b4dc80,inset 10px 10px 20px #fff6;animation:planetRotate 20s linear infinite,planetPulse 4s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,255,255,.3));@media (width <= 786px){width:60px;height:60px}&:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.4) 0%,transparent 30%),radial-gradient(circle at 60% 70%,rgba(180,210,240,.3) 0%,transparent 40%),radial-gradient(circle at 80% 20%,rgba(200,220,245,.3) 0%,transparent 35%);animation:textureShift 15s ease-in-out infinite}&:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,#fff0,#fff9,#fff0,#c8dcff66,#fff0);animation:edgeGlow 8s linear infinite;filter:blur(6px);@media (width <= 786px){inset:-2px;filter:blur(4px)}}}.orbit{width:100%;height:100%;position:absolute;top:0;left:0;animation:orbitRotate 6s linear infinite;&:before{content:"";position:absolute;width:100%;height:100%;border:1px dashed rgba(255,255,255,.15);border-radius:50%;animation:dashRotate 20s linear infinite reverse}.satellite{width:12px;height:12px;background:radial-gradient(circle,#fff,#f5fafff2 40%,#dcebf5e6);border-radius:50%;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 20px #ffffffe6,0 0 40px #fff9,0 0 60px #c8dcff66;animation:satelliteBounce 2s ease-in-out infinite;@media (width <= 786px){width:10px;height:10px}&:before{content:"";width:2px;height:12px;background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,.6) 50%,transparent 100%);position:absolute;top:-12px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #ffffff80;animation:antennaGlow 1.5s ease-in-out infinite;@media (width <= 786px){height:10px;top:-10px}}&:after{content:"";width:30px;height:30px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:signalPulse 2s ease-out infinite}}}&:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);animation:bgGlow 5s ease-in-out infinite}}.loading-message{height:36px;display:flex;align-items:center;justify-content:center;overflow:visible;margin-bottom:1.2rem;perspective:1000px;@media (width <= 786px){height:32px;margin-bottom:1rem}.message-text{font-family:Orbitron,sans-serif;font-weight:400;font-size:var(--font-size-sm);color:#ffffffe6;letter-spacing:.1em;text-align:center;text-transform:uppercase;text-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(200,220,255,.3);transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}}.progress-bar{width:100%;height:12px;background:linear-gradient(180deg,#ffffff0d,#ffffff1a);border:1px solid rgba(255,255,255,.2);border-radius:20px;overflow:hidden;position:relative;box-shadow:0 0 20px #0000004d,0 0 40px #ffffff1a,inset 0 2px 4px #0000004d,inset 0 -1px 2px #ffffff1a;padding:2px;backdrop-filter:blur(10px);@media (width <= 786px){height:10px}.progress-fill{width:0%;height:100%;background:linear-gradient(90deg,#ffffffe6,#f0f5fff2,#fff,#f0f5fff2,#ffffffe6);transition:width .4s cubic-bezier(.25,.46,.45,.94);will-change:width;position:relative;border-radius:18px;box-shadow:0 0 20px #fff9,0 0 40px #fff6,0 0 60px #c8dcff4d,inset 0 1px 2px #fffc;&:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%);animation:batteryCharge 2.5s ease-in-out infinite;border-radius:18px}&:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 50%,transparent 100%);border-radius:18px 18px 0 0}}}.progress-text{font-family:Orbitron,sans-serif;font-weight:300;font-size:var(--font-size-md);color:#fff9;letter-spacing:.15em;text-transform:uppercase;display:flex;justify-content:center;align-items:baseline;gap:.3em;margin-top:.8rem;@media (width <= 786px){margin-top:.6rem}.progress-percentage{font-weight:500;color:#fffffff2;font-size:var(--font-size-2xl);text-shadow:0 0 15px rgba(255,255,255,.6),0 0 30px rgba(200,220,255,.4);min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}}}}@keyframes batteryCharge{0%{transform:translate(-100%);opacity:0}50%{opacity:1}to{transform:translate(100%);opacity:0}}@keyframes planetPulse{0%,to{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 30px rgba(255,255,255,.3))}50%{transform:translate(-50%,-50%) scale(1.05);filter:drop-shadow(0 0 40px rgba(255,255,255,.5))}}@keyframes planetRotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes textureShift{0%,to{opacity:.8;transform:scale(1) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(5deg)}}@keyframes edgeGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes graphicFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes bgGlow{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes orbitRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dashRotate{0%{transform:rotate(0);opacity:.3}50%{opacity:.5}to{transform:rotate(360deg);opacity:.3}}@keyframes satelliteBounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-3px)}}@keyframes antennaGlow{0%,to{opacity:.6;box-shadow:0 0 8px #fff6}50%{opacity:1;box-shadow:0 0 15px #fffc}}@keyframes signalPulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:.8;border-color:#ffffff80}to{transform:translate(-50%,-50%) scale(3);opacity:0;border-color:#fff0}}@keyframes messageOut{0%{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(-20px) rotateX(-15deg) scale(.85);filter:blur(5px)}}@keyframes messageIn{0%{opacity:0;transform:translateY(20px) rotateX(15deg) scale(.85);filter:blur(5px)}60%{transform:translateY(-3px) rotateX(-2deg) scale(1.05)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}}@keyframes arrowDown{0%{opacity:0;transform:translate(-50%) translateY(-10px) rotate(-45deg)}50%{opacity:1;transform:translate(-50%) translateY(0) rotate(-45deg)}to{opacity:0;transform:translate(-50%) translateY(10px) rotate(-45deg)}}.scroll-down{position:fixed;left:50%;bottom:4%;transform:translate(-50%);z-index:10;opacity:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:12px;@media (width <= 786px){bottom:10.4%;gap:8px}.scroll-arrows{position:relative;width:32px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;@media (width <= 1024px) and (width > 786px){width:28px;height:36px}@media (width <= 786px){width:24px;height:32px}.arrow{position:absolute;width:16px;height:16px;border-left:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);transform:translate(-50%) rotate(-45deg);left:50%;opacity:0;@media (width <= 1024px) and (width > 786px){width:14px;height:14px;border-left-width:1.8px;border-bottom-width:1.8px}@media (width <= 786px){width:12px;height:12px;border-left-width:1.5px;border-bottom-width:1.5px}&:nth-child(1){top:0}&:nth-child(2){top:8px;@media (width <= 1024px) and (width > 786px){top:7px}@media (width <= 786px){top:6px}}&:nth-child(3){top:16px;@media (width <= 1024px) and (width > 786px){top:14px}@media (width <= 786px){top:12px}}}}.scroll-text{font-family:Orbitron,sans-serif;font-weight:400;font-size:var(--font-size-xs);letter-spacing:.2em;color:#ffffffd6;text-transform:uppercase;@media (width <= 1024px) and (width > 786px){letter-spacing:.18em}@media (width <= 786px){letter-spacing:.15em}}&:hover{.arrow{border-color:#ffffffe6}.scroll-text{color:#ffffffe6}}}section.section,.waves{position:relative;&:before{content:"";position:absolute;inset:0% auto auto 0%;width:100%;height:100%;background-image:url(/images/texture-bg.webp);background-position:center;mix-blend-mode:exclusion;opacity:.04;pointer-events:none;z-index:100}}#progress{position:fixed;right:3%;top:50%;transform:translateY(-50%);z-index:8;font-family:Orbitron,sans-serif;font-weight:500;opacity:0;&.dark{color:var(--color-text-medium)}&.light{color:var(--color-bg-light)}@media (width <= 786px){display:none}.count{font-size:var(--font-size-3xl)}.per{font-size:.8em;font-weight:800}}#smooth-wrapper{visibility:hidden;opacity:0}body:not(.is-ios) #smooth-wrapper{overflow:hidden}body:not(.is-ios) #smooth-content{overflow:hidden}body.is-ios #smooth-wrapper{overflow:visible!important;height:auto!important}body.is-ios #smooth-content{overflow:visible!important;transform:none!important;will-change:auto!important}.l_container{max-width:var(--container-max-width);margin:0 auto}.intro-line{height:1px;background-color:var(--color-black);width:calc(100% - var(--content-padding));position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:10}.section-intro{padding:0 12px;width:calc(100% - var(--content-padding));margin:0 auto;font-family:PP Supply Mono,sans-serif;font-weight:400;font-size:var(--font-size-lg);padding-top:3rem;@media (width <= 786px){padding-top:2.8rem}.intro-description{color:var(--current-color-text);display:flex;justify-content:space-between;align-items:center}}.header{width:100%;max-width:240px;position:fixed;left:50%;top:2.4%;transform:translate(-50%);z-index:15;border-radius:40px;border:1px dashed #121212;background-color:#fff6;backdrop-filter:blur(7px);user-select:none;padding:16px;font-family:PP Supply Sans,sans-serif;font-weight:200;font-size:var(--font-size-lg);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014,0 4px 16px #0000000a;@media (width <= 786px){max-width:234px;padding:12px}.header-container{>ul{display:flex;justify-content:center;align-items:center;gap:1.2em;position:relative;font-size:1.7rem;>li{display:flex;align-items:center;justify-content:center;@media (width <= 786px){margin-bottom:-.06em}>a{margin-left:.05em;@media (width <= 786px){margin-left:unset}}&.active>a{color:#fff}}.back-round{width:0;height:28px;border-radius:28px;padding:4px;box-sizing:content-box;position:absolute;left:0;top:0;bottom:0;margin:auto 0;z-index:-1;background-color:#0000001a;@media (width <= 786px){height:24px;border-radius:24px;padding:3px}}}}}.canvas-wrapper{position:relative;background-color:transparent;.three-canvas-one-wrapper{position:relative;pointer-events:none;#three-canvas-one{pointer-events:auto;touch-action:pan-y;will-change:auto;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.scope{--x: 1%;--y: 2%;color:#fff;position:absolute;left:var(--x);right:var(--x);top:var(--y);bottom:var(--y);z-index:10;pointer-events:none;.box{width:1.5%;height:2.5%;position:absolute;border-radius:2px;--boder-color: #fff;--border: 1px solid var(--boder-color);opacity:.9;&.left-top{left:0;top:0;border-left:var(--border);border-top:var(--border);.logo{font-family:Orbitron,monospace;font-weight:700;position:absolute;left:60%;top:45%;white-space:nowrap;font-size:1.6rem;color:var(--color-bg-light);opacity:.8;@media (width < 786px){left:220%;font-size:1.4rem}}}&.right-top{right:0;top:0;border-right:var(--border);border-top:var(--border)}&.left-bottom{left:0;bottom:0;border-left:var(--border);border-bottom:var(--border);.device-info{font-family:PP Supply Mono,sans-serif;font-weight:200;position:absolute;left:70%;bottom:70%;white-space:nowrap;font-size:1.8rem;opacity:1;text-shadow:15px 15px 20px rgba(0,0,0,.8),5px 5px 10px rgba(0,0,0,.6);@media (width < 786px){left:220%;bottom:10%;opacity:.8;font-size:1.2rem}>li:not(:last-child){margin-bottom:.2em}}}&.right-bottom{right:0;bottom:0;border-right:var(--border);border-bottom:var(--border)}}}}.waves{--height: 200px;margin-bottom:-2px;width:100%;height:var(--height);margin-top:calc(var(--height) * -1);position:relative;overflow:hidden;svg{max-width:100%;width:100%;display:block;position:absolute;left:50%;transform:translate(-50%) scale(1.1);bottom:-2px;overflow:hidden;transform-origin:center bottom;@media (width <= 786px){transform:translate(-50%) scale(1.2);height:80px}}}.spacer{height:100px;width:100%}}.hero{background-color:var(--current-color-bg);padding-bottom:100px;pointer-events:none;.cube_wrapper{width:100%;min-height:100vh;position:relative;display:flex;justify-content:center;align-items:center;--perspective: 1000px;perspective:var(--perspective);perspective-origin:center center;transform-style:preserve-3d;transform:translateZ(0);overflow:visible;contain:layout style;pointer-events:none;@media (width <= 1024px) and (width > 786px){--perspective: 760px}@media (width <= 786px){--perspective: 600px}.cube{--size: 500px;--height: 250px;--translateZ: 250px;width:var(--size);height:var(--height);position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);transform-style:preserve-3d;transform-origin:center center;cursor:pointer;pointer-events:auto;@media (width <= 1024px) and (width > 786px){--size: 380px;--height: 190px;--translateZ: 190px;--fontSize: 38px}@media (width <= 786px){--size: 300px;--height: 150px;--translateZ: 150px;--fontSize: 36px}.fake{background-color:var(--current-color-bg);font-size:var(--font-size-4xl);font-family:Orbitron,monospace;letter-spacing:.04em;color:var(--color-text-medium);.fake-wrapper{.title{font-size:var(--font-size-6xl);margin-bottom:.5em;color:var(--color-text-dark);letter-spacing:.05em;>p{white-space:nowrap;&:nth-child(2){letter-spacing:.065em}}}.guide{font-family:Pretendard,sans-serif;font-weight:500;color:var(--color-text-medium);white-space:nowrap;line-height:1.84;font-size:var(--font-size-2xl);.bold{font-weight:600;color:var(--color-text-dark)}.point{font-weight:600;position:relative;color:var(--color-text-dark);--underline-width: 0%;&:after{content:"";width:var(--underline-width);height:2px;position:absolute;background-color:var(--color-secondary);bottom:-.2em;left:0}}}}}&.face1{transform:rotateX(0) rotateY(0)}&.face2{transform:rotateX(0) rotateY(-90deg)}&.face3{transform:rotateX(0) rotateY(-180deg)}&.face4{transform:rotateX(0) rotateY(-270deg)}&.face5{transform:rotateX(-90deg) rotateY(0)}&.face6{transform:rotateX(-270deg) rotateY(0)}>article{width:100%;height:100%;text-align:center;color:var(--color-text-light);font-size:var(--fontSize);font-weight:700;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;backface-visibility:hidden;overflow:hidden;pointer-events:auto;cursor:pointer;a{display:block;width:100%;height:100%;cursor:pointer;pointer-events:none}video{width:100%;height:100%;object-fit:cover;pointer-events:none;image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}&.current-progress{background:#000;&:after{font-family:PP Supply Sans,sans-serif;letter-spacing:.04em;font-weight:400;font-size:var(--font-size-2xl);content:"Currently in progress..";position:absolute}}&.skills{--rgb: 0, 0, 0;--color: #fff;background-color:transparent;overflow:hidden!important;transform-origin:center center;will-change:width,height,left,top;contain:layout style paint;.holder{opacity:0;width:100%;height:100%;max-width:100%;max-height:100%;background-color:transparent;color:var(--color);display:flex;justify-content:center;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateZ(0);overflow:hidden;backface-visibility:hidden;pointer-events:auto;will-change:opacity;contain:layout style;.rolodex{width:420px;position:absolute;overflow:hidden;perspective:1260px;display:grid;place-content:center;transform:translateZ(0);backface-visibility:hidden;contain:layout style;@media (width <= 1024px) and (width > 786px){width:320px;perspective:960px}@media (width <= 786px){width:250px;perspective:750px}ul{list-style-type:none;margin:0;padding:0;position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;li{font-family:PP Supply Sans,sans-serif;font-weight:300;text-transform:uppercase;line-height:1.7;text-align:center;white-space:nowrap;position:absolute;width:100%;backface-visibility:hidden;transform-style:preserve-3d;background-color:transparent;display:flex;justify-content:center;align-items:center;gap:14px;@media (width < 1024px){gap:12px}@media (width < 786px){gap:10px}.skill-logo{--size: 42px;max-width:var(--size);max-height:var(--size);display:flex;@media (width < 1024px){--size: 36px}@media (width < 786px){--size: 24px}img{max-width:100%;vertical-align:bottom;width:100%;height:100%;object-fit:cover;opacity:.5}}>p{font-size:4.2rem;font-weight:600;text-transform:uppercase;color:#fff;opacity:.8;@media (width < 1024px){font-size:3.2rem;line-height:1.8}@media (width < 786px){font-size:2.4rem;line-height:2.2}}>h2{font-size:6rem;@media (width < 1024px){font-size:4.6rem}@media (width < 786px){font-size:3.6rem}}}}}}>video{image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}&:nth-of-type(1){transform:rotateY(0) translateZ(var(--translateZ))}&:nth-of-type(2){transform:rotateY(90deg) translateZ(var(--translateZ))}&:nth-of-type(3){transform:rotateY(180deg) translateZ(var(--translateZ))}&:nth-of-type(4){transform:rotateY(270deg) translateZ(var(--translateZ))}&:nth-of-type(5){transform:rotateX(90deg) translateZ(calc(var(--translateZ) + 3px));@media (width >= 1025px){height:200%}@media (width <= 1024px) and (width > 786px){height:200%}@media (width <= 786px){height:200%}}&:nth-of-type(6){transform:rotateX(-90deg) translateZ(var(--translateZ));@media (width >= 1025px){height:200%;transform:rotateX(-90deg) translateZ(0)}@media (width <= 1024px) and (width > 786px){height:200%;transform:rotateX(-90deg) translateZ(0)}@media (width <= 786px){height:200%;transform:rotateX(-90deg) translateZ(0)}}}}.content-title{font-family:PP Eiko,sans-serif;font-weight:100;font-style:italic;overflow:hidden;color:var(--color-text-light);font-size:4vw;text-transform:uppercase;opacity:.3;z-index:-10;margin-top:-5%;pointer-events:none;.content-title-wrapper{position:relative;white-space:nowrap}.marquee-line{overflow:hidden;white-space:nowrap;position:relative;width:100%;height:auto;h2.marquee-content{display:inline-flex;white-space:nowrap;margin:0;padding:0;span{display:inline-block;white-space:nowrap;padding-right:0}}}}.hero-text-wrapper{max-width:800px;position:absolute;left:50%;top:67%;transform:translate(-50%);text-align:center;pointer-events:none;word-break:keep-all;padding:0 5%;@media (width <= 786px){top:62%;max-width:unset;width:100%}.tech-tags{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;font-size:var(--font-size-sm);margin-bottom:1.2em;font-family:PP Supply Sans,sans-serif;font-weight:500;>li{padding:.4em .8em;border-radius:.4em;color:#fff;&.html{background-color:#e34c26}&.css{background-color:#1572b6}&.javascript{background-color:#f1e05a}&.gsap{background-color:#00bd00}&.scss{background-color:#c6538c}&.tailwindcss{background-color:#38bdf8}&.react{background-color:#61dafb}&.threejs{color:#121212;background-color:#fff}&.typescript{background-color:#3178c6}&.nextjs{background-color:#000}&.zustand{background-color:#a57a2a}}}.description{font-size:var(--font-size-md);line-height:2;color:var(--color-text-medium)}}.scroll-down-guide{position:absolute;text-align:center;font-size:10vw;transform:translateY(-2%);white-space:nowrap;-webkit-text-stroke:1px #fff;color:transparent;opacity:0;visibility:hidden;@media (width <= 786px){font-size:12vw}h4{margin-bottom:.4em}.scroll-down{position:relative;left:auto;bottom:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto;margin-top:20px;.arrow{opacity:1;&:nth-child(1){animation:arrowDown 1.5s ease-in-out infinite;animation-delay:0s}&:nth-child(2){animation:arrowDown 1.5s ease-in-out infinite;animation-delay:.15s}&:nth-child(3){animation:arrowDown 1.5s ease-in-out infinite;animation-delay:.3s}}.scroll-text{opacity:1}}}}}.section01,.section02{height:200dvh;position:relative;background-color:var(--current-color-bg);padding-bottom:300px;padding-top:200px;@media (width <= 786px){height:100dvh;padding-bottom:150px;padding-top:100px}.section-content-wrapper{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.title-wrapper{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;white-space:nowrap;text-transform:uppercase;font-family:PP Supply Mono,sans-serif;text-align:center;pointer-events:none;.holder{color:var(--color-bg-light);height:fit-content;overflow:hidden;.title{font-weight:400;font-size:10vw;letter-spacing:-.08em;text-shadow:0 2px 20px rgba(255,255,255,.25)}}.view-project{padding-top:16px;font-weight:600;color:var(--color-bg-light);font-size:2rem;position:relative;@media (width <= 786px){font-size:1.6rem}&:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background-color:var(--color-bg-light);transition:width .3s ease-in-out}}}.clip-trigger-one,.clip-trigger-two{width:100%;height:100%;transform-origin:center center;display:flex;justify-content:center;align-items:center;position:relative;background:#121212;&:hover video{opacity:.78}video{pointer-events:none;width:100%;height:100%;vertical-align:bottom;max-width:100%;object-fit:cover;opacity:.65;transition:opacity .5s ease-in-out}}}.section01{z-index:10;@media (width <= 786px){padding-bottom:100px}}.section02{z-index:5}.section03{position:relative;background-color:var(--current-color-bg);.section-intro{position:absolute;left:50%;transform:translate(-50%);z-index:20}.section03-wrapper{overflow:hidden;section.section03-section{color:#fff;font-family:Pretendard,sans-serif;font-weight:400;&:nth-of-type(1){background-color:var(--current-color-bg);.section03-point-wrapper{margin:0 auto;width:34%;height:clamp(200px,20vh,300px);overflow:hidden;position:absolute;top:18%;left:0;right:0;transform-origin:center center;background-color:#000;z-index:10;@media (width <= 1279px){width:42%;height:clamp(180px,18vh,260px);top:19%}@media (width <= 1024px){width:50%;height:clamp(160px,16vh,220px);top:20%}@media (width <= 786px){width:90.4%;height:clamp(120px,15vh,150px);top:20%}>img{position:absolute;max-width:100%;width:100%;height:100%;vertical-align:bottom;object-fit:cover}}.section03-text-wrapper{position:absolute;left:0;right:0;top:calc(18% + clamp(200px,20vh,300px) + 4vh);text-align:center;padding:0 4.8%;z-index:2;@media (width <= 1279px){top:calc(19% + clamp(180px,18vh,260px) + 4vh)}@media (width <= 1024px){top:calc(20% + clamp(160px,16vh,220px) + 3.5vh)}@media (width <= 786px){top:calc(20% + clamp(120px,15vh,150px) + 3vh)}.section03-title{font-size:var(--font-size-3xl);line-height:1.6;margin-bottom:clamp(.8rem,1.5vw,1.6rem);font-weight:600;@media (width <= 1024px){line-height:1.7}@media (width <= 786px){line-height:1.8}p{white-space:nowrap}.name{color:#ffbe4e}}.section03-description{line-height:2;font-size:var(--font-size-md);color:var(--color-text-light);margin-bottom:clamp(1.2rem,2vw,2.4rem);@media (width <= 1024px){line-height:1.9}@media (width <= 786px){word-break:keep-all;line-height:1.8}.mobile-breakpoint{display:block;@media (width <= 786px){display:inline}}}.links{width:fit-content;margin:0 auto;display:flex;gap:clamp(1.2rem,2vw,2rem);@media (width <= 786px){flex-direction:column;gap:1rem;align-items:center}>li{display:flex;align-items:center;gap:4px;color:#fff;.icon{--size: 28px;width:var(--size);height:var(--size);opacity:.6;filter:invert(1);cursor:pointer;@media (width <= 1024px){--size: 26px}@media (width <= 786px){--size: 24px}}>a{color:var(--color-text-light);text-decoration:underline}}}}}&:nth-of-type(2){background-color:tomato}&:nth-of-type(3){background-color:#6b8e23}&:nth-of-type(4){background-color:#4169e1}}}.section03-line{position:absolute;left:50%;top:10%;transform:translate(-50%) rotate(-4deg);width:48%;z-index:1;@media (width <= 1279px){width:65%;top:14%}@media (width <= 1024px){width:72%;top:14%}@media (width <= 786px){display:none}}.section03-line path{fill:none;stroke:#424242;stroke-width:2px}}@keyframes rocket{0%{transform:translateY(0)}to{transform:translateY(-5%)}}.footer{font-family:PP Supply Mono,monospace;font-weight:200;position:sticky;left:0;bottom:0;--color: #fff;display:flex;z-index:-999;overflow:hidden;transform:translateZ(0);will-change:transform;pointer-events:none;#three-canvas-two{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:auto}.footer-wrapper{position:absolute;inset:0;pointer-events:none;color:var(--color);padding:2% 3%;z-index:10;@media (width <= 786px){padding:2% 4%}.footer-top{display:grid;grid-template-columns:repeat(3,1fr);font-size:var(--font-size-xl);margin-bottom:140px;@media (width <= 1200px){padding-top:110px}@media (width <= 786px){grid-template-columns:repeat(2,1fr);padding-top:84px;margin-bottom:42px}.footer-left{.name{font-weight:500;@media (width <= 786px){margin-bottom:.6em}}}.footer-right{padding-right:100px;@media (width <= 786px){padding-right:unset}p{margin-bottom:.3em;&.location{font-weight:600;margin-bottom:.8em}&.email{letter-spacing:.04em;text-decoration:underline;margin-bottom:.8em}&.phone{margin-bottom:.8em}&.address{margin-bottom:.8em}&.copyright{text-transform:uppercase;opacity:.8}}}}.footer-middle{display:grid;grid-template-columns:repeat(3,1fr);font-size:var(--font-size-xl);@media (width <= 786px){grid-template-columns:repeat(2,1fr)}.footer-left-title{.github-title{font-size:var(--font-size-xl);font-weight:400;letter-spacing:.02em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.1em;color:#fff;pointer-events:auto;a{color:inherit;text-decoration:inherit;cursor:pointer}}}.footer-right-content{grid-column:3;@media (width <= 786px){grid-column:unset}.footer-connect{font-size:var(--font-size-xl);font-weight:400;margin-bottom:.8em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.footer-email{.email-text{font-size:var(--font-size-md);margin-bottom:.8em;line-height:1.6;text-transform:uppercase;@media (width < 786px){line-height:1.4}}.email-input{font-size:var(--font-size-md);text-transform:uppercase;opacity:.7}}}}.footer-bottom{position:absolute;left:0;right:0;bottom:max(2%,env(safe-area-inset-bottom,0px));text-align:center;font-family:Orbitron,monospace;font-weight:700;padding:0 2%;font-size:8.8vw;@media (width <= 786px){letter-spacing:-.015em;bottom:max(6%,env(safe-area-inset-bottom,20px));padding-bottom:max(30px,env(safe-area-inset-bottom,20px))}.holder{overflow:hidden;pointer-events:auto;white-space:nowrap;&:hover>p{opacity:1;.rocket{animation:rocket .65s infinite alternate ease-in-out}}>p{opacity:.6;cursor:pointer;transition:opacity .25s ease-in-out;@media (width <= 786px){opacity:1}}}}}}.footer-connect-scene{width:100%;height:101dvh;position:relative;z-index:10;pointer-events:none}.pin-spacer{pointer-events:none}.mobile-menu-wrapper{position:fixed;top:0;right:0;z-index:100;-webkit-tap-highlight-color:transparent}.mobile-menu-toggle{position:fixed;top:3%;right:2.6%;width:42px;height:42px;opacity:0;visibility:hidden;background-color:#fff6;border:1px dashed #121212;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;z-index:50;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 2px 8px #00000014,0 4px 16px #0000000a;transform:translateZ(0);will-change:transform,background,box-shadow;@media (width <= 1024px) and (width > 786px){width:48px;height:48px;top:2.8%;right:2.6%}@media (width <= 786px){width:44px;height:44px;top:max(2.42%,env(safe-area-inset-top,2.42%));right:max(18px,env(safe-area-inset-right,18px));gap:5px}&:active{transform:translateZ(0) scale(.95);box-shadow:0 1px 4px #0000000f,0 2px 8px #00000008}}.hamburger-line{width:22px;height:2px;background:#121212;border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center;@media (width <= 786px){width:22px;height:2px}@media (width <= 480px){width:20px}}.mobile-menu-toggle.active{background-color:#ffffff8c;border-color:#121212;box-shadow:0 4px 12px #0000001a,0 6px 20px #0000000f;.hamburger-line:nth-child(1){transform:translateY(8px) rotate(45deg);@media (width <= 786px){transform:translateY(7px) rotate(45deg)}@media (width <= 480px){transform:translateY(7px) rotate(45deg)}}.hamburger-line:nth-child(2){opacity:0;transform:translate(-10px)}.hamburger-line:nth-child(3){transform:translateY(-8px) rotate(-45deg);@media (width <= 786px){transform:translateY(-7px) rotate(-45deg)}@media (width <= 480px){transform:translateY(-7px) rotate(-45deg)}}}.mobile-menu-panel{position:fixed;top:82px;right:2.6%;width:auto;opacity:0;visibility:hidden;font-family:PP Supply Sans,sans-serif;font-weight:200;transform:translate(120%);transform-origin:top right;will-change:transform,opacity;@media (width <= 1024px) and (width > 786px){top:80px;right:22px}@media (width <= 786px){top:max(84px,calc(env(safe-area-inset-top,18px) + 84px));right:max(18px,env(safe-area-inset-right,18px))}@media (width <= 480px){top:max(84px,calc(env(safe-area-inset-top,15px) + 84px));right:max(15px,env(safe-area-inset-right,15px))}}.mobile-menu-panel.active{opacity:1;visibility:visible;transform:translate(0)}.mobile-menu-nav{display:flex;align-items:flex-start;justify-content:flex-end;padding:0;ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;@media (width <= 786px){gap:10px}@media (width <= 480px){gap:8px}}li{opacity:0;transform:translate(50px)}a{display:block;color:#121212;text-decoration:none;font-size:14px;border:1px dashed #121212;font-weight:500;letter-spacing:.8px;padding:11px 22px 11px 26px;border-radius:40px;white-space:nowrap;background-color:#fff6;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 2px 8px #00000014,0 4px 16px #0000000a;text-align:left;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;transform:translateZ(0);will-change:transform,box-shadow;@media (width <= 1024px) and (width > 786px){font-size:13px;padding:10px 20px 10px 24px}@media (width <= 786px){font-size:12px;padding:9px 18px 9px 22px}@media (width <= 480px){font-size:11px;padding:8px 16px 8px 20px;letter-spacing:.6px}&:before{content:"";position:absolute;top:50%;left:11px;width:5px;height:5px;background:#121212;border-radius:50%;opacity:.6;transform:translateY(-50%);transition:all .3s cubic-bezier(.4,0,.2,1);@media (width <= 786px){left:9px;width:4px;height:4px}@media (width <= 480px){left:8px;width:3px;height:3px}}&:after{content:"";position:absolute;inset:0;border-radius:40px;background:#1212120d;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}&:hover{background-color:#ffffff8c;border-color:#121212;transform:translate(-10px) translateZ(0);box-shadow:0 4px 12px #0000001a,0 6px 20px #0000000f;&:before{opacity:.85;width:7px;height:7px;left:9px;@media (width <= 786px){left:7px;width:6px;height:6px}@media (width <= 480px){left:6px;width:5px;height:5px}}&:after{opacity:1}}&:active{transform:translate(-8px) translateZ(0) scale(.97);box-shadow:0 1px 4px #0000000f,0 2px 8px #00000008}}}.mobile-menu-panel.active .mobile-menu-nav li{opacity:1;transform:translate(0)}.mobile-menu-overlay{position:fixed;inset:0;background:#00000040;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:999;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mobile-menu-overlay.active{opacity:1;visibility:visible}