@charset "utf-8";
/* ********************************************************************
 * name : CodeBee CG LAB
 * filename : main.css
 * author : JBieN 제이비엔
 * update : 2026-05-20
********************************************************************* */

#main-content{position: relative;min-width: 320px;width: 100%;height: 100%;/*overflow: hidden;*/}

/* Fixed Background Video */
.bgVid {position: fixed;inset: 0;z-index: 0;overflow: hidden;pointer-events: none;background: #0d1016;}
.bgVid video {width: 100%;height: 100%;object-fit: cover; filter:brightness(0.72)contrast(1.08)saturate(0.88); transform: scale(1.02);position: relative;z-index: 1;opacity: 0;transition: opacity .7s ease;}
.bgOv {position: absolute;inset: 0;background:linear-gradient(to bottom,rgba(7, 8, 10, 0.18) 0%,rgba(7, 8, 10, 0.28) 38%,rgba(7, 8, 10, 0.46) 62%,rgba(7, 8, 10, 0.72) 100%); mix-blend-mode: normal;}
.bgPost {position: absolute;inset: 0;z-index: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.02);filter: brightness(0.72) contrast(1.08) saturate(0.88);}
.bgVid.is-video-ready video {opacity: 1;}
.bgVid.is-video-ready .bgPost {opacity: 0;transition: opacity .7s ease;}

main { position: relative; }

/* Hero */
.hero {position: relative;z-index: 2;background: transparent;}
.heroCon {position: relative;z-index: 2;margin: 0 auto 13em;display: flex;flex-direction: column;align-items: center;}
.heroIntro {width: 100%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
.heroFLogo {position: fixed;left: 50%;top: 50vh;z-index: 4;width: min(90vw, 1313px);opacity: 0;transform: translate(-50%, -50%);transform-origin: 50% 50%;pointer-events: none;filter: drop-shadow(0 10px 32px rgba(0,0,0,0.28));will-change: transform, opacity;}
.heroLogo {position: relative;width: min(72vw, 940px);margin: 0 auto;opacity: 0;visibility: hidden;}
.heroLogoHd {margin: 0;line-height: 0;font-size: 0;}

.heroCp {}
.heroTxt {display: block;text-align: center;opacity: 1;transform: none;filter: none;will-change: transform, opacity, filter;}
.heroTxt01 {margin: 0;font-size: clamp(30px, 2vw, 44px);line-height: 1.08;font-weight: 600;text-wrap: balance;}
.heroTxt01 i{padding: 0 0.3em;}
.heroTxt01 b{font-family: 'Formation', sans-serif;display: grid;margin-top: 0;background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 10s infinite linear;font-size: clamp(42px, 8vw, 200px);font-weight: 900;}
.heroTxt01 span {font-size: 2.8rem;letter-spacing: 0;font-weight: 400;margin: 0.5em 0;display: flex;justify-content: center;}	
.heroTxt02{margin: 0;font-size: clamp(22px, 2vw, 40px);line-height: 1.4;letter-spacing: -0.02em;font-weight: 400;text-wrap: balance;color: #ffffff5e;text-shadow: 1px 1px 1px #000;margin-top: 1em;}
.heroTxt03 {max-width: 920px;margin: 0 auto;font-size: 28px;line-height: 1.5;color: rgba(255, 255, 255, 0.58);;text-wrap: balance;}
.heroTxt03 strong {background: linear-gradient(90deg, #ff0076 0%, #ff4fc4 28%, #ff44a3 42%, #eb1270 70%, #702cef 100%);-webkit-background-clip: text;background-clip: text;color: transparent;font-weight: 400;}
@-webkit-keyframes hue {
from {-webkit-filter: hue-rotate(0deg);}
to {-webkit-filter: hue-rotate(-360deg);}
}

.heroMsg {margin: 7em auto;display: flex;flex-direction: column;align-items: center;gap: 22px;text-align: center;}
.heroMsgTit {margin: 0;font-size: clamp(26px, 3.2vw, 80px);line-height: 1.14;letter-spacing: -0.04em;text-wrap: balance;}
.heroMsgDesc {margin: 0 auto;font-size: clamp(18px, 2vw, 26px);line-height: 2.2;text-wrap: balance;}
.heroRvTxt {--textProgress: 0%;background: linear-gradient(90deg,rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.98) var(--textProgress),rgba(255,255,255,0.16) var(--textProgress), rgba(255,255,255,0.16) 100%);-webkit-background-clip: text;background-clip: text;color: transparent;will-change: background;font-weight: 600;}
.heroMsgDesc.heroRvTxt {background: linear-gradient(90deg,rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.74) var(--textProgress),rgba(255,255,255,0.18) var(--textProgress), rgba(255,255,255,0.18) 100%);-webkit-background-clip: text;background-clip: text;color: transparent;}
h3.heroMsgDesc {font-size: clamp(18px, 3.7vw, 43px);margin-top: 2em;}
.heroRvLast{line-height: 1;margin-top: -0.7em;}

.heroLineW {position: relative;left: 19%;margin: 5em 0 8em;}
.heroLine {width: min(88vw, 1220px);margin: 0 auto;display: grid;grid-template-columns: minmax(0, 1fr) minmax(320px, 650px);gap: 52px;align-items: start;opacity: 0;transform: translateY(40px);transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, opacity;}

.lineFeat {padding-top: 12px;}
.lineBar {position: relative;height: 1px;margin-bottom: 22px;overflow: hidden;background: rgba(255,255,255,0.12);}
.lineBar::after {content: "";position: absolute;inset: 0 auto 0 0;width: 100%;height: 100%;background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.25));transform: scaleX(var(--lineProgress, 0));transform-origin: left center;will-change: transform;}
.lineKick {margin: 0 0 10px;font-size: 13px;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(255,255,255,0.42);}
.lineTit {margin: 0;font-size: clamp(24px, 2.5vw, 32px);line-height: 1.5;font-weight: 500;opacity: 0;transform: translateY(16px);transition: opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, opacity;}
.lineBody {opacity: 0;transform: translateY(16px);transition: opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, opacity;margin-top: 1em;}
.lineBody p {margin: 0;font-size: clamp(17px, 2vw, 20px);line-height: 1.7;color: rgba(255, 255, 255, 0.58);margin-bottom: 1em;}

.heroAct {display: flex;align-items: center;justify-content: center;gap: 20px;opacity: 0;transform: translateY(24px);transition: opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, opacity;}
.btn {display: inline-flex;align-items: center;justify-content: center;min-width: 300px;height: 80px;padding: 0 24px;border: 1px solid rgba(255,255,255,0.18);border-radius: 999px;background: rgba(255,255,255,0.03);color: #f5f5f5;backdrop-filter: blur(8px);font-size: clamp(16px, 2vw, 20px);font-weight: 500;transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;}
.btn:hover,.btn:focus-visible {transform: translateY(-2px);border-color: rgba(255,255,255,0.44);background: rgba(255,255,255,0.07);}
.btnPri {border-color: transparent;background:#ff5841;color: #fff;}

/* Service  */
.svcSec {position: relative;z-index: 3;padding: 240px 0 0;background: radial-gradient(circle at 50% 0%, rgba(166,108,255,0.12), transparent 28%),#171b24;overflow: clip;}
.svcBgTxt {position: sticky;top: 37vh;z-index: 1;width: min(calc(100% - (var(--container-padding) * 2)), 1400px);margin: 0 auto;display: flex;flex-direction: column;align-items: center;text-align: center;pointer-events: none;}
.svcEye {margin: 0 0 10px;font-size: clamp(18px, 0.95vw, 22px);color: #ff4fcb;font-weight: 700;letter-spacing: -0.02em;opacity: 0;transform: translateY(36px);transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, opacity;position: relative;left: -11.4vw;background: linear-gradient(90deg, #ff0076 0%, #ff4fc4 28%, #ff44a3 42%, #eb1270 70%, #702cef 100%);-webkit-background-clip: text;background-clip: text;color: transparent;}
.svcBgTxt span {display: block;font-size: clamp(72px, 6.4vw, 180px);font-weight: 500;line-height: 0.9;color: rgb(255 255 255);filter: none;white-space: nowrap;opacity: 0;transform: translateY(36px);transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, opacity;}
.svcBgTxt .tPrp {color: #7c29ff;font-weight: 500;}
.svcTrack {position: relative;z-index: 3;width: min(calc(100% - (var(--container-padding) * 2)), 1200px);margin: -220px auto 0;padding-bottom: clamp(220px, 24vh, 340px);}
.svcItem {min-height: 72vh;padding: clamp(82px, 8vw, 120px) 0;display: grid;grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr);gap: clamp(48px, 5.5vw, 72px);align-items: start;}
.svcItem + .svcItem {margin-top: -135px;}
.svcL, 
.svcR {border-top: 1px solid rgba(255, 255, 255, 0.09);border-left: 1px solid rgba(255, 255, 255, 0.09);border-bottom: 1px solid rgba(255, 255, 255, 0.09);backdrop-filter: blur(12px);box-shadow: 0 28px 90px rgba(0, 0, 0, 0.18);}
.svcL {position: sticky;top: 50vh;align-self: start;border-radius: 999px;}
.svcChip {display: inline-flex;align-items: center;gap: 20px;min-height: 82px;padding: 0 35px;border-radius: 999px;font-size: clamp(18px, 1.5vw, 24px);font-weight: 800;width: 100%;}
.svcChip small {font-size: 16px;color: rgba(255,255,255,0.58);font-weight: 500;}
.svcR {padding: 42px;border-radius: 28px;}
.svcR h4 {margin: 0 0 28px;font-size: 22px;line-height: 1.35;font-weight: 600;}
.svcR p {margin: 0 0 20px;font-size: 17px;line-height: 1.6;color: rgba(255,255,255,0.72);}
.svcList {margin: 36px 0 0;padding: 0;list-style: none;display: grid;gap: 15px;justify-content: center;}
.svcList li {font-size: clamp(18px, 1.5vw, 22px);line-height: 1.5;font-weight: 600;}
.svcList li::before{content:"◆";font-size: 8px;vertical-align: 5px;margin-right: 10px;}
.svcList span {margin-left: 6px;color: rgba(255,255,255,0.52);font-size: 0.82em;font-weight: 400;}

/* About / Engineered Section / 브랜드 철학 및 제작 기준 */
.engSec {position: relative;z-index: 4;padding: 0 0 100px;background: #ece8ea;overflow: visible;}
.engIn {width: min(calc(100% - (var(--container-padding) * 2)), 1780px);margin: 0 auto;position: relative;}
.engTxt {position: relative;display: grid;grid-template-columns: 1fr 1fr;/* gap: 10px 320px; */color: #33343a;margin: 0;padding-top: 120px;z-index: 5;font-family: "Pretendard Variable", sans-serif;justify-content: center;align-items: center;justify-items: stretch;font-weight: 500;}
.engTxt .line01 {--colorProgress: 100%;position: absolute;left: 50%;top: 0;width: 100vw;transform: translate(-50%, -50%);text-align: center;font-size: clamp(58px, 6.8vw, 200px);line-height: 1.2;background: linear-gradient(180deg,#ffffff 0%,#ffffff var(--colorProgress),#33343a var(--colorProgress),#33343a 100%);-webkit-background-clip: text;background-clip: text;color: transparent;pointer-events: none;z-index: 20;will-change: background, opacity;}
.engTxt .line02, 
.engTxt .line03 {position: relative;z-index: 2;font-size: clamp(58px, 7.3vw, 150px);line-height: 0.9;}
.engTxt .line03 {width: 100%;display: flex;justify-content: flex-end;}
.engTxt .line04 {font-size: 40px;display: flex;flex-direction: column;align-items: stretch;position: absolute;left: 50%;margin-left: -8.5em;bottom: 0;line-height: 1.3;width: 400px;}
.engTxt .line04 b {display: block;font-weight: 500;display: flex;justify-content: flex-end;}
.engCap {max-width: 680px;margin: 52px 4.5vw 0 auto;font-size: clamp(18px, 1.05vw, 22px);line-height: 2;color: #7f7f7f;font-weight: 500;}

.engStkShow {position: relative;z-index: 6;width: 100%;min-height: 320vh;}
.engStkFrm {position: relative;width: min(calc(100% - (var(--container-padding) * 2)), 1440px);height: 100vh;margin: 0 auto;display: grid;grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.1fr);gap: clamp(72px, 8vw, 140px);align-items: center;}
.engVCol {position: relative;min-width: 0;}
.engImgStg {position: relative;width: min(100%, 610px);aspect-ratio: 1 / 1.08;overflow: hidden;background: #d8d5d6;box-shadow: 0 24px 70px rgba(51,52,58,0.08);}
.engImgStg::after {content: "";position: absolute;inset: 0;z-index: 5;background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent 34%),linear-gradient(to bottom, transparent 58%, rgba(0,0,0,0.18));pointer-events: none;}
.engVImg {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0;transform: scale(1.045);transition: opacity 0.7s ease,transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);will-change: opacity, transform;}
.engVImg.is-active {opacity: 1;transform: scale(1);z-index: 2;}
.engVF {position: absolute;inset: 0;opacity: 0;transform: scale(1.045);transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);will-change: opacity, transform;}
.engVF.is-active {opacity: 1;transform: scale(1);z-index: 3;}
.engListM {position: relative;height: 68vh;min-height: 430px;max-height: 620px;overflow: hidden;width: 900px;/* border-top: 1px solid #b5b3b5; */}

.engListS {position: relative;width: 100%;margin-top: 10px;/* will-change: transform; */}
.engItem {display: grid;grid-template-columns: minmax(220px, 0.72fr) minmax(300px, 1.28fr);align-items: center;min-height: clamp(104px, 17vh, 150px);padding: clamp(22px, 2.5vh, 32px) 0;border-top: 1px solid rgb(51 52 58 / 75%);opacity: 0.4;transform: translateY(12px);transition: opacity 0.42s ease,transform 0.42s ease;will-change: opacity, transform;}
.engItem:last-child {border-bottom: 1px solid rgba(51,52,58,0.13);}
.engItem.is-active {opacity: 1;transform: translateY(0);border-top: 1px solid rgb(51 52 58 / 16%);}
.engItemTit {margin: 0;font-size: clamp(20px,1.35vw,28px);line-height: 1.28;color: #33343a;font-weight: 700;word-break: keep-all;}
.engItemDesc {margin: 0;font-size: clamp(18px,1vw,22px);line-height: 1.8;color: #222;word-break: keep-all;}


/* ── PC 기본: 슬라이드 요소 숨김, sticky 표시 ── */
.engSldOut,
.indCards {display: none;}

/* Industry -산업별 제작 범위 설명 */
.indSec {position: relative;z-index: 7;background: #141515;color: #fff;min-height: 360vh;overflow: clip;}
.indStk {position: relative;height: 100vh;display: grid;grid-template-columns: 1fr 1fr;align-items: stretch;background: #141515;}
.indMedia {position: relative;overflow: hidden;background: #0d0e0e;}
.indMedia img, .indVF {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 1;transform: scale(1.04);transition: opacity 0.75s ease,transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);will-change: opacity, transform;}
.indMedia img.is-active, .indVF.is-active {opacity: 1;transform: scale(1.01);z-index: 2;}
.indVF {display: grid;place-items: center;padding: 48px;background: radial-gradient(circle at 68% 24%, rgba(110,118,142,0.34), transparent 34%),linear-gradient(135deg, #18202a, #08090a);color: rgba(255,255,255,0.8);font-size: clamp(32px, 5.4vw, 86px);line-height: 0.96;letter-spacing: -0.075em;font-weight: 850;text-align: center;}
.indCon {position: relative;display: flex;flex-direction: column;justify-content: space-between;padding: clamp(30px, 4vw, 80px) clamp(30px, 4vw, 100px);min-width: 0;}
.indIntro {margin-left: auto;text-align: right;}
.indIntro p {margin: 0 0 34px;font-size: clamp(15px, 1.05vw, 42px);line-height: 1;color: rgba(255,255,255,0.76);font-weight: 500;}
.indIntro h2 {margin: 0;font-size: clamp(18px, 1.2vw, 28px);line-height: 1.6;letter-spacing: -0.01em;font-weight: 500;color: #fff;word-break: keep-all;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;}
.indTxtStg {position: relative;min-height: clamp(220px, 38vh, 450px);width:100%;align-self: flex-start;}
.indItem {position: absolute;inset: 0 auto auto 0;width: 100%;opacity: 0;transform: translateY(34px);transition: opacity 0.55s ease, transform 0.55s ease;will-change: opacity, transform;}
.indItem.is-active {opacity: 1;transform: translateY(0);z-index: 2;}
.indTit {margin: 0 0 26px;font-size: clamp(32px, 5vw, 150px);line-height: 0.9;font-weight: 500;color: #fff;position: absolute;left: -100%;margin-left: 40%;height: calc(100% + 2.45em);display: flex;width: 100%;text-align: center;align-items: flex-end;justify-content: center;}
.indKo {margin: 0 0 14px;font-size: clamp(22px, 1.8vw, 38px);line-height: 1.24;color: #fff;}
.indDesc {margin: 0;font-size: clamp(15px, 1.15vw, 24px);line-height: 1.75;color: rgba(255,255,255,0.54);word-break: keep-all;}
.indProg {position: absolute;left: clamp(56px, 7vw, 118px);right: clamp(56px, 7vw, 118px);bottom: clamp(34px, 5vh, 64px);height: 2px;background: rgba(255,255,255,0.14);overflow: hidden;}
.indProg span {display: block;width: 100%;height: 100%;background: rgba(255,255,255,0.88);transform: scaleX(0);transform-origin: left center;will-change: transform;}

.indVid {position: absolute;border: 0;width: 500px;bottom: 0;right: -47px;}
.indVidOv {position: absolute;inset: 0;background: linear-gradient(to bottom, rgb(20 21 21) 0%, rgba(7, 8, 10, 0.28) 38%, rgba(7, 8, 10, 0.46) 62%, rgb(20 21 21) 100%);mix-blend-mode: normal;}
.indVidOv::after {content: '';background: linear-gradient(to right, rgb(20 21 21) 0%, rgb(20 21 21) 38%, rgb(20 21 21) 62%, rgb(19 20 20 / 40%) 100%);width: 122px;height: 282px;position: absolute;left: 0;z-index: 1;}

/* Portfolio */
.portSec {position: relative;z-index: 8;overflow: hidden;padding: clamp(140px, 16vw, 270px) 0 120px;}
.portIn {position: relative;z-index: 2;width: min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;}
.portHead {text-align: center;margin-bottom: clamp(70px, 10vw, 200px);}
.portTit {margin: 0 0 40px;font-size: clamp(36px, 3.28vw, 72px);line-height: 1.02;letter-spacing: -0.06em;color: #fff;font-weight: 400;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;}
.portDesc {margin: 0 auto;font-size: clamp(18px, 1.35vw, 28px);line-height: 1.7;color: rgba(255,255,255,0.7);word-break: keep-all;}

.portGrid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));grid-auto-rows: 7px;grid-auto-flow: dense;gap: 5px;align-items: start;list-style: none;}
.portCard {min-width: 0;min-height: 0;opacity: 1;transform: none;}
.portLink {position: relative;display: block;overflow: hidden;min-height: 100%;background: rgba(255,255,255,0.04);color: #fff;isolation: isolate;}
.portLink::after {content: "";position: absolute;inset: 0;z-index: 2;background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.14) 56%, rgba(0,0,0,0));pointer-events: none;}
.portLink:focus-visible {outline: 3px solid rgba(255,255,255,0.9);outline-offset: 4px;}
.portMedia {width: 100%;height: auto;display: block;object-fit: cover;transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);}

.portLink:hover .portMedia,
.portLink:focus-visible .portMedia {transform: scale(1.04);}

.portBadge {position: absolute;top: clamp(14px, 1.4vw, 22px);left: clamp(14px, 1.4vw, 22px);z-index: 3;display: inline-flex;align-items: center;min-height: 28px;padding: 0 10px;border-radius: 999px;background: rgba(0,0,0,0.38);backdrop-filter: blur(8px);color: rgba(255,255,255,0.82);font-size: 12px;font-weight: 700;letter-spacing: 0.02em;}
.portMeta {position: absolute;left: 2em;bottom: 2em;z-index: 3;text-shadow: 0 2px 18px rgba(0,0,0,0.42);}
.portMeta small {display: block;margin-bottom: 6px;font-size: clamp(14px, 0.8vw, 18px);letter-spacing: 0.04em;color: rgba(255,255,255,0.68);font-weight: 700;}
.portMeta h3 {display: block;font-size: clamp(18px, 1.35vw, 32px);line-height: 1.22;letter-spacing: -0.04em;font-weight: 600;}
.portSum {margin: 8px 0 0;font-size: 13px;line-height: 1.55;color: rgba(255,255,255,0.72);word-break: keep-all;display:none;}
.portCta {margin-top: clamp(70px, 7vw, 105px);text-align: center;}
.portBtn {display: inline-flex;align-items: center;justify-content: center;min-width: 305px;height: 80px;padding: 0 30px;border-radius: 999px;border: 1px solid rgba(255,255,255,0.18);color: #fff;font-size: clamp(16px, 1vw, 20px);font-weight: 500;background: rgba(255,255,255,0.03);transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;}
.portBtn:hover,
.portBtn:focus-visible {transform: translateY(-2px);border-color: rgba(255,255,255,0.42);}
.portGlow {position: relative;margin-top: clamp(80px, 8vw, 200px);height: 1px;background: rgba(255,255,255,0.14);overflow: hidden;}
.portGlow::after {content: "";position: absolute;top: 0;left: -30%;width: 20%;height: 20px;background: linear-gradient(90deg, #ff0076 0%, #ff4fc4 28%, #ff44a3 42%, #eb1270 70%, #702cef 100%);filter: blur(10px);animation: glowLineMove 4.8s linear infinite;}

@keyframes glowLineMove {
	0% { left: -30%; }
	100% { left: 100%; }
}

/* Process */
.wfSec {position: relative;z-index: 9;overflow: hidden;padding: 2em 0 20em;color: #fff;opacity: 1 !important;}
.wfIn {position: relative;z-index: 2;width: min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;}
.wfIntro {display: grid;align-items: start;justify-content: end;}

.wfIntroL, 
.wfIntroR, 
.wfGrid, 
.wfTitleLayer {will-change: transform, opacity;}

.wfEye {margin: 0;color:rgb(255 255 255 / 73%);font-size: clamp(14px, 1vw, 20px);font-weight: 700;letter-spacing: -0.01em;}
.wfDesc {margin: 0;color: #fff;font-size: clamp(16px, 1.2vw, 26px);line-height: 1.9;word-break: keep-all;}
.wfProcW {position: relative;z-index: 3;padding-top: clamp(80px, 8vw, 140px);}
.wfTitleLayer {position: absolute;left: 50%;bottom: -4.22em;z-index: 1;width: 100vw;transform: translateX(-50%);transform-origin: 50% 100%;perspective: 900px;pointer-events: none;user-select: none;opacity: 1 !important;}
.wfBgTit {color: #835dc4;font-size: clamp(54px, 8.2vw, 210px);line-height: 0.78;letter-spacing: -0.006em;text-align: center;white-space: nowrap;filter: blur(0.15px);}
.wfBgTit i{font-style: normal;}
.wfBgKick {width: min(calc(100% - (var(--container-padding) * 2)));margin: 1em clamp(0.55em, 1.5vw, 2.5em) 0;color: #a46cff;font-size: clamp(12px, 0.8vw, 22px);font-weight: 500;letter-spacing: -0.02em;}

.wfEye::before,
.wfBgKick::before{content:"◆";font-size: 8px;vertical-align: 2px;margin-right: 10px;}

.wfGrid {position: relative;z-index: 4;display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));list-style: none;margin: 0;padding: 0;border-top: 1px solid rgba(255, 255, 255, 0.09);border-left: 1px solid rgba(255, 255, 255, 0.09);border-bottom: 1px solid rgba(255, 255, 255, 0.09);backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);}
.wfCard {position: relative;height: calc(clamp(314px, 30vh, 380px));padding: 3em;display: flex;flex-direction: column;justify-content: space-between;border-right: 1px solid rgba(255, 255, 255, 0.09);}
.wfCardHd {display: flex;flex-direction: row-reverse;justify-content: space-between;font-size: clamp(20px, 1.2vw, 26px);}
.wfNum {color: #ff5841;}
.wfIcon {width: 44px;height: 44px;opacity: 0.82;color: rgba(255,255,255,0.88);}
.wfTxt {font-size: clamp(14px, 0.85vw, 20px);word-break: keep-all;}
.wfCard::after {content: '';width: 61px;height: 69px;position: absolute;right: 3em;top: 50%;margin-top: -30.5px;}
.proicon01::after {background: url(../img/main/process_icon1.png) no-repeat;}
.proicon02::after {background: url(../img/main/process_icon2.png) no-repeat;}
.proicon03::after {background: url(../img/main/process_icon3.png) no-repeat;}
.proicon04::after {background: url(../img/main/process_icon4.png) no-repeat;}
.proicon05::after {background: url(../img/main/process_icon5.png) no-repeat;}

.wfCard::before {content: '┬';position: absolute;right: -8px;top: -11px;}
.proicon05::before {content: '┐';}
.wfCardHd::before {content: '┴';position: absolute;right: -8px;bottom: -11px;font-size: 15px;}
.proicon01 .wfCardHd::after{content: '┌';position: absolute;left: -8px;top: -11px;font-size: 15px;}
.proicon01 .wfCardHd::before{content: '└';left: -8px;}
.proicon02 .wfCardHd::after{content: '┴';position: absolute;left: -8px;bottom: -11px;font-size: 15px;}
.proicon05 .wfCardHd::before {content: '┘';}

/* Contact */
.contactSec {position: relative;z-index: 9;padding: clamp(110px, 12vw, 180px) 0;background: #09090c;color: #fff;}
.contactIn {width: min(calc(100% - (var(--container-padding) * 2)), 960px);margin: 0 auto;text-align: center;}
.contactEye {margin: 0 0 18px;font-size: 13px;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(255,255,255,0.42);font-weight: 700;}
.contactIn h2 {margin: 0 0 22px;font-size: clamp(32px, 4vw, 62px);line-height: 1.08;letter-spacing: -0.06em;}
.contactIn p:last-child {max-width: 720px;margin: 0 auto;font-size: clamp(15px, 1.2vw, 18px);line-height: 1.9;color: rgba(255,255,255,0.68);word-break: keep-all;}

/* JS 상태 클래스 */
.heroTxt.is-revealed,
.brandTxtW.is-revealed,
.heroLine.is-revealed,
.lineTit.is-revealed,
.lineBody.is-revealed,
.heroAct.is-revealed,
.portCard.is-revealed {opacity: 1;transform: translateY(0);filter: none;}

/* FAQ */
.faqSec {position: relative;z-index: 10;background: #0e0e0e;color: #fff;border-bottom: 1px solid rgba(255,255,255,.08)}
.faqIn {display: grid;grid-template-columns: minmax(320px,.95fr) minmax(480px,1.05fr);width: 100%;}
.faqIntro {display: flex;flex-direction: column;align-items: center;justify-content: center;/* padding: clamp(60px,7vw,120px); */border-right: 1px solid rgba(255,255,255,.08);text-align: center}
.faqBadge {margin: 0 0 28px;padding: 0 10px;border: 1px solid rgba(255,255,255,.12);border-radius: 5px;font-size: 15px;=: 700;}
.faqTit {font-size: clamp(32px, 2.5vw, 58px);line-height: 1.3;word-break: keep-all}
.faqLs {display: flex;flex-direction: column;}
.faqItem {border-bottom: 1px solid rgba(255,255,255,.08)}
.faqItem:last-child {border-bottom:0;}
.faqQ {width: 100%;min-height: 115px;padding: 0 clamp(26px,4vw,54px);display: flex;align-items: center;justify-content: space-between;gap: 28px;border: 0;background: transparent;color: #fff;font: inherit;text-align: left;cursor: pointer}
.faqQTxt {font-size: clamp(18px,1.1vw,24px);line-height: 1.35;word-break: keep-all}
.faqIco {width: 25px;transition: all 0.5s;}
.faqItem.is-open .faqIco {transform: rotate(180deg);}
.faqAns {max-height: 0;overflow: hidden;transition: max-height .36s cubic-bezier(.22,1,.36,1);}
.faqAnsIn {padding: 0 clamp(26px,4vw,54px) 34px;color: rgba(255,255,255,.58);font-size: clamp(15px,0.92vw,18px);word-break: keep-all}
.faqAnsIn p {margin: 0}

/* Final CTA */
.ctaSec {position: relative;z-index: 11;padding: clamp(82px, 8vw, 140px) 0;background: #0e0e0e;color: #fff;}
.ctaIn {position: relative;width: min(calc(100% - (var(--container-padding) * 2)));min-height: clamp(520px, 36vw, 900px);margin: 0 auto;display: grid;place-items: center;overflow: hidden;background: #000;}
.ctaCon {position: relative;z-index: 2;margin: 0 auto;display: flex;flex-direction: column;align-items: center;text-align: center;}
.ctaLogo {display: inline-flex;align-items: center;justify-content: center;gap: 12px;margin-bottom: clamp(32px, 3.4vw, 54px);}
.ctaLogoSb {width: clamp(100px, 8vw, 180px);height: auto;filter: brightness(0) invert(1);}
.ctaLogoTxt {width: clamp(170px, 11vw, 310px);height: auto;filter: brightness(0) invert(1);}
.ctaTit {margin: 0 0 clamp(22px, 2vw, 34px);font-size: clamp(30px, 2.45vw, 62px);line-height: 1.32;word-break: keep-all;}
.ctaDesc {font-size: clamp(20px, 1.55vw, 32px);word-break: keep-all;font-weight: 300;}
.ctaBtn {display: inline-flex;align-items: center;justify-content: center;min-width: 305px;height: 8vh;margin-top: clamp(34px, 3vw, 52px);padding: 0 32px;border: 1px solid rgb(255 255 255 / 15%);border-radius: 6px;background: rgba(255,255,255,0.015);color: rgba(255,255,255,0.94);font-size: clamp(18px, 2vw, 20px);letter-spacing: -0.02em;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);transition: transform 0.25s ease,border-color 0.25s ease,background 0.25s ease;}
.ctaBtn:hover, .ctaBtn:focus-visible {transform: translateY(-2px);border-color: rgba(255,255,255,0.52);background: rgba(255,255,255,0.06);}
.ctaVid {position: absolute;width: 50%;}
.ctaVidOv {position: absolute;inset: 0;background: #00000096;mix-blend-mode: normal;}


/*
===============================================
반응형 css
===============================================
*/

@media all and (min-width:1921px){
	.engStkFrm {width: min(calc(100% - (var(--container-padding) * 2)), 1920);}
	.engImgStg,
	.engVF img{width: 100%;}
	.indVid {width: 700px;}
}

@media all and (max-width:1919px){
	.engCap {margin: 52px 0.5vw 0 auto;}
}

@media (max-width: 1680px) {
	.heroLineW {left: 0;margin: 2em 0 6em;}
	.svcEye{left: -10.8vw;}

	.engTxt .line03 {font-size: clamp(58px, 5.3vw, 150px);}
	.engTxt .line04 {margin-left: -5.5em;}
	.engCap {margin: 52px 0 0;}
	.engTxt .line01 {font-size: clamp(20px, 8.8vw, 200px);}
	.engListM {width: 100%;}

	.wfCard::after {background-size: 80% !important;margin-top: -40.5px;}
}

@media (max-width: 1280px) {
	.heroIntro{height:max(600px, 80svh);}
	.svcEye{left: -4.5vw;}

	.indCon {padding: clamp(30px, 4vw, 80px) clamp(30px, 3vw, 100px);}
}

@media (max-width: 1200px) {
	.wfGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.wfCard:last-child {grid-column: 1 / -1;}

	.proicon02::before {content: '┐';}
	.proicon02 .wfCardHd::before{content: '┤';}
	.proicon01 .wfCardHd::before{content: '├';}
	.proicon03 .wfCardHd::before{content: '┴';}
	.proicon03 .wfCardHd::after{content:'├';position: absolute;left: -8px;bottom: -11px;font-size: 15px;}

	.proicon04::before{content: '';}
	.proicon04 .wfCardHd::before{content: '┤';}

	.proicon05 .wfCardHd::after{content:'└';position: absolute;left: -8px;bottom: -11px;font-size: 15px;}


	.engTxt .line04 {font-size: 30px; width: 280px;}
}

@media (max-width: 1100px) {
	.navLs { display: none; }
	.heroLine { width: min(90vw, 980px); grid-template-columns: 1fr; gap: 30px;text-align: center;}
	.svcTrack { margin-top: -160px; }
	.svcItem { grid-template-columns: 1fr; gap: 34px; }

	.portGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 1024px) {
	:root {
		--anim-service-item-from-y: 60px;
		--anim-workflow-left-from-y: 40px;
		--anim-workflow-left-to-y: -10px;
		--anim-workflow-right-from-y: 60px;
		--anim-workflow-right-to-y: -8px;
		--anim-workflow-cards-from-y: 50px;
		--anim-workflow-cards-to-y: -10px;
		--anim-engineered-lines-from-y: 60px;
		--anim-engineered-caption-from-y: 20px;
	}

	.engStkShow {min-height: unset;margin-top: 56px;}
	.engStkFrm {display: none;}
	.engSldOut {display: block;}

	.engSldTrack {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
	.engSldTrack::-webkit-scrollbar { display: none; }

	.engSld {flex: 0 0 100%;scroll-snap-align: start;display: flex;flex-direction: column;gap: 20px;/*padding: 28px var(--container-mobile) 36px;*/box-sizing: border-box;}
	.engSldImg {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;border-radius: 14px;background: #d8d5d6;box-shadow: 0 12px 40px rgba(51,52,58,0.08);display: block;flex-shrink: 0;}
	.engSldFb {width: 100%;aspect-ratio: 4 / 3;border-radius: 14px;display: grid;place-items: center;padding: 24px;background:  radial-gradient(circle at 72% 16%, rgba(62,78,112,0.62), transparent 36%),  linear-gradient(135deg, #111824, #3a3f4a);color: rgba(255,255,255,0.82);font-size: clamp(18px, 5vw, 26px);font-weight: 800;line-height: 1.22;letter-spacing: -0.055em;text-align: center;flex-shrink: 0;}
	.engSldTit {margin: 0 0 15px;font-size: clamp(20px, 5.5vw, 36px);font-weight: 800;line-height: 1.25;color: #33343a;word-break: keep-all;}
	.engSldDesc {margin: 0;font-size: 17px;line-height: 1.78;color: rgb(51 52 58 / 84%);word-break: keep-all;}

	.engSldCtr {display: flex;align-items: center;justify-content: space-between;margin-top: 1.5em;}
	.engSldDots {display: flex;gap: 20px;align-items: center;}
	.engSldDot {width: 6px;height: 6px;border-radius: 50%;background: rgba(51,52,58,0.2);border: none;padding: 0;cursor: pointer;transition: background 0.25s, transform 0.25s;}
	.engSldDot.is-active {background: #33343a;transform: scale(1.4);}
	.engSldBtn {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50%;border: 1px solid rgba(51,52,58,0.16);background: transparent;cursor: pointer;}
	.engSldBtn svg {width: 18px; height: 18px;stroke: #33343a; fill: none;stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}

	.svcL {position: relative !important;top: auto !important;}

	.indStk {grid-template-columns: auto;grid-template-rows: 1fr 1fr;height: 100svh;}
	.indTit {margin: 2em 0 26px;position: initial;margin-left: 0;justify-content: normal;align-items: normal;text-align: left;}
	.indVid {width: 300px;}
	.indVidOv::after {width: 50px;}
}

@media(max-width:900px){
	.heroTxt01 b {font-size: clamp(42px, 11vw, 200px);margin: 0.5rem 0 2rem;}

	.faqIn{grid-template-columns:1fr;min-height:auto}
	.faqIntro{min-height:360px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:72px 24px}
	.faqLs{padding:0}
	.faqQ{min-height:76px;padding:0 22px}
	.faqAnsIn{padding:0 22px 28px}
}

@media (max-width: 767px) {
	.indStk {height: calc(var(--stable-vh) * 100);}
	.engStkFrm {height: 100svh;}

	.siteHdIn, .heroCon { /*width: min(calc(100% - (var(--container-mobile) * 2)), var(--max));*/ }
	.navCta { min-width: 92px; height: 38px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
	.heroTxt03 {font-size: 16px; line-height: 1.6; }
	.heroMsgTit { font-size: clamp(24px, 8vw, 38px); }
	.heroMsgDesc {line-height: 1.8; }
	.heroLine { width: min(92vw, 980px); }
	.heroAct { width: min(calc(100% - (var(--container-padding) * 2)));}
	.btn { width: 100%; min-width: 0; height: 52px; }
	.svcSec { padding-top: 150px; }
	.svcTrack { /*width: min(calc(100% - (var(--container-mobile) * 2)), 1200px);*/ margin-top: -80px; padding-bottom: 120px; }
	.svcItem { min-height: auto; padding: 82px 0; gap: 30px; }
	.svcL { position: relative; top: auto; }
	.svcR { padding: 35px 22px; border-radius: 22px; }
	.svcChip {justify-content: center;}
	.svcList{justify-content: start;}
	.engSec { padding: 0 0 80px; overflow: visible; }
	.engTxt {width: 100%;display: flex; padding-top: 50px;}
	.engTxt span { display: block; margin-bottom: 12px; text-align: left !important; }
	.engTxt .line01 {left: 0;top: 0;width: 100%;transform: translateY(-50%);background: linear-gradient(180deg, #ffffff 0%, #ffffff var(--colorProgress), #ff5841 var(--colorProgress), #fe5f49 100%);background-clip: text;}
	.engTxt .line03 {justify-content: normal;}
	.engTxt .line04 {left: 0;margin-left: 0;width: 100%;align-items: center;flex-direction: row;top: 4em;}
	.engTxt .line04 b {margin-left: 4px;display: block;}
	.engCap {margin: 85px 0 0;font-size: 18px;font-weight: 400;}

	.engStkShow {margin-top: 48px;}

	.portSec {padding: 110px 0 55px;}
	.portIn {width: min(calc(100% - 28px), 1840px);}
	.portGrid {grid-template-columns: repeat(2, minmax(0, 1fr));--masonry-gap: 6px;--masonry-row: 9px;}
	.portMeta strong {font-size: 14px;}
	.portSum {display: none;}

	.wfIntro {justify-content: start;}

	.ctaSec {padding: 72px 0;}
	.ctaIn {width: min(calc(100% - 28px), 1720px);min-height: 520px;}
	.ctaIn::before {width: 92vw;}
	.ctaBtn {width: min(100%, 280px);min-width: 0;}

	.svcEye {left: 0;}
}

@media (max-width: 640px) {
	.heroTxt01 i{display: block;text-indent: -9999px;line-height: 0.5;}
	.heroTxt02 i{display: block;}
	.heroIntro{height:max(570px, 70svh);}
	.heroCp {padding-top: 7em;}
	.lineBody p{text-align: justify;}
	.lineBody p br{display:none;}
	.heroCon{margin: 0 auto 8em;}

	.svcBgTxt span{font-size: clamp(55px, 6.4vw, 180px);white-space: break-spaces;line-height: 1.2;}

	.engTxt .line02, 
	.engTxt .line03 {font-size: clamp(20px, 7.3vw, 150px);}
	.engTxt .line04 {font-size: 24px;}
	.engCap {font-size: 16px;}
	.engCap br{display:none;}
	.engCap i{display:block;}

	.indStk {height: calc(var(--stable-vh) * 100) !important;}
	.indTit {margin: 3.5em 0 26px;line-height: 1.1;}
	.portTit {line-height: 1.3;}
	.portTit i{display: block;}
	.portGrid {grid-template-columns: repeat(1, minmax(0, 1fr));position: relative;}
	.portGrid:after{content: '';width: 150%;height: 100%;background: #000000;position: absolute;z-index: -1;left: -10%;}

	.wfGrid {grid-template-columns: repeat(1, minmax(0, 1fr));}
	.wfCard::before {content: '┐';}
	.proicon02::before,
	.proicon03 .wfCardHd::before {content: '┤';}
	.proicon02 .wfCardHd::after {content: '├';}
	.proicon04 .wfCardHd::after {content: '├';position: absolute;left: -8px;bottom: -11px;font-size: 15px;}
	.wfBgTit i{display:none;}
	.wfSec {padding: 2em 0 12em;}
	.portDesc br,
	.wfDesc br{display:none;}
	.portDesc i,
	.wfDesc i{display:block;}
}

@media (max-width: 450px) {
	.svcChip {gap: 0px;flex-direction: column;}
	.svcList span {font-size: 12px;}
	.svcR p {font-size: 16px;}
}