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

    /* 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;padding: clamp(130px, 14vh, 180px) 0 clamp(120px, 14vh, 180px);background: transparent;}
	.heroCon {position: relative;z-index: 2;margin: 0 auto;display: flex;flex-direction: column;align-items: center;gap: clamp(92px, 13vh, 170px);}
	.heroIntro {width: 100%;min-height: clamp(520px, 74vh, 760px);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 {margin: -5em auto 0;display: grid;gap: 18px;text-align: center;}
	.heroTxt {display: block;text-align: center;opacity: 1;transform: none;filter: none;will-change: transform, opacity, filter;}
	.heroTxt01 {margin: 0;font-size: 26px;line-height: 1.08;font-weight: 600;text-wrap: balance;margin-top: 1.5em;}
	.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: 150px;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: 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: 0.35em;}
	.heroTxt03 {max-width: 920px;margin: 0 auto;font-size: 28px;line-height: 1.5;color: var(--muted);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: 20em auto 0;display: flex;flex-direction: column;align-items: center;gap: 22px;text-align: center;}
	.heroMsgTit {margin: 0;font-size: clamp(26px, 4.2vw, 70px);line-height: 1.14;letter-spacing: -0.04em;text-wrap: balance;}
	.heroMsgDesc {margin: 0 auto;font-size: clamp(16px, 1.7vw, 24px);line-height: 1.9;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(16px, 3.7vw, 43px);margin-top: 2em;}
	.heroRvLast{line-height: 1;margin-top: -0.7em;}

	.heroLineW {position: relative;left: 50%;left: 19%;margin-top: 5em;}
	.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: var(--dim);}
	.lineTit {margin: 0;font-size: clamp(20px, 2vw, 28px);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: 18px;line-height: 1.7;color: var(--muted);margin-bottom: 1em;}

	.heroAct {width: min(100%, 640px);margin: 0 auto 10em;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: 56px;padding: 0 24px;border: 1px solid rgba(255,255,255,0.18);border-radius: 5px;background: rgba(255,255,255,0.03);color: var(--text);backdrop-filter: blur(8px);font-size: 17px;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: 35vh;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(13px, 1.2vw, 18px);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: -220px;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, 10vw, 120px);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(16px, 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(16px, 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, 8.4vw, 130px);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, 8.2vw, 140px);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: -330px;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: 18px;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: 26px;line-height: 1.28;color: #33343a;font-weight: 700;word-break: keep-all;}
	.engItemDesc {margin: 0;font-size: 18px;line-height: 1.8;color: #575757;word-break: keep-all;}
	.engProg {position: absolute;left: 0;width: min(100%, 610px);height: 2px;background: rgba(51,52,58,0.12);overflow: hidden;}
	.engProg span {display: block;width: 100%;height: 100%;background: #33343a;transform: scaleX(0);transform-origin: left center;will-change: transform;}


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

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

    /* ── 1024px 이하: sticky → 슬라이드 전환, service sticky 해제 ── */
    @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;
		  }
		  /* engineered: sticky 숨기고 슬라이드 표시 */
		.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;}
		.engSldNum {display: block;font-size: 11px;font-weight: 700;letter-spacing: 0.1em;color: rgba(51,52,58,0.36);margin-bottom: 10px;}
		.engSldTit {margin: 0 0 10px;font-size: clamp(20px, 5.5vw, 28px);font-weight: 850;letter-spacing: -0.055em;line-height: 1.25;color: #33343a;word-break: keep-all;}
		.engSldDesc {margin: 0;font-size: 14px;line-height: 1.78;color: rgba(51,52,58,0.58);word-break: keep-all;}

      /* ── 슬라이드 컨트롤 ── */
		.engSldCtr {display: flex;align-items: center;justify-content: space-between;padding: 12px var(--container-mobile) 44px;}
		.engSldDots {display: flex;gap: 7px;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;}

		  /* service: left sticky 해제 */
		.svcL {position: relative !important;top: auto !important;}

		  /* industry: sticky 숨기고 카드 표시 */
		.indCards {display: flex;}
    }

    @media (max-width: 767px) {
		:root { --nav-h: 72px; }
		.siteHdIn, .heroCon { width: min(calc(100% - (var(--container-mobile) * 2)), var(--max)); }
		.brandSb { width: 70px; }
		.brandTxtW { width: 120px; height: 20px; }
		.navCta { min-width: 92px; height: 38px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
		.hero { padding: 110px 0 100px; }
		.heroIntro { min-height: 70vh; }
		.heroFLogo, .heroLogo { width: 92vw; }
		.heroTxt01 { font-size: clamp(24px, 9vw, 44px); }
		.heroTxt02 { font-size: 15px; line-height: 1.75; }
		.heroTxt03 { font-size: 16px; line-height: 1.6; }
		.heroMsgTit { font-size: clamp(24px, 8vw, 38px); }
		.heroMsgDesc { font-size: 15px; line-height: 1.8; }
		.heroLine { width: min(92vw, 980px); }
		.heroAct { width: 100%; flex-direction: column; }
		.btn { width: 100%; min-width: 0; height: 52px; }
		.svcSec { padding-top: 150px; }
		.svcBgTxt { top: 16vh; }
		.svcBgTxt span { font-size: clamp(54px, 16vw, 92px); filter: none; }
		.svcTrack { width: min(calc(100% - (var(--container-mobile) * 2)), 1200px); margin-top: -80px; padding-bottom: 220px; }
		.svcItem { min-height: auto; padding: 82px 0; gap: 30px; }
		.svcL { position: relative; top: auto; }
		.svcR { padding: 28px 22px; border-radius: 22px; }
		.svcChip { width: 100%; justify-content: center; padding: 0 18px; }
		.engSec { padding: 0 0 140px; overflow: visible; }
		.engIn { width: min(calc(100% - (var(--container-mobile) * 2)), 1440px); position: relative; }
		.engTxt { display: block; padding-top: 110px; }
		.engTxt span { display: block; margin-bottom: 12px; text-align: left !important; }
		.engTxt .line01 {left: 0;top: 0;width: 100vw;transform: translateY(-50%);text-align: left !important;font-size: clamp(48px, 14vw, 82px);}
		.engCap { margin: 34px 0 0; font-size: 15px; }

		.engStkShow {margin-top: 48px;}
    }


    /* 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);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(72px, 8vw, 80px) clamp(56px, 7vw, 100px);min-width: 0;}
	.indIntro {margin-left: auto;text-align: right;}
	.indIntro p {margin: 0 0 34px;font-size: clamp(15px, 1.1vw, 20px);line-height: 1;color: rgba(255,255,255,0.76);font-weight: 500;}
	.indIntro h2 {margin: 0;font-size: clamp(18px, 1.45vw, 23px);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, 330px);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(54px, 6.8vw, 91px);line-height: 0.9;font-weight: 500;color: #fff;text-align: center;position: absolute;left: -59%;bottom: -2.8em;width: 700px;}
	.indKo {margin: 0 0 14px;font-size: clamp(22px, 2vw, 28px);line-height: 1.24;color: #fff;}
	.indDesc {margin: 0;max-width: 520px;font-size: clamp(15px, 1.15vw, 20px);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: 0;}
	.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;}

    @media (max-width: 1024px) {
		.indSec {min-height: unset;overflow: visible;}

		.indStk {display: none;}

		.indCards {display: flex;flex-direction: column;gap: 0;padding: clamp(60px, 10vw, 100px) var(--container-mobile) clamp(60px, 10vw, 100px);}
		.indCardsIntro {margin-bottom: clamp(40px, 8vw, 64px);}
		.indCardsIntro p {margin: 0 0 12px;font-size: 13px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: rgba(255,255,255,0.46);}
		.indCardsIntro h2 {margin: 0;font-size: clamp(20px, 5.5vw, 28px);font-weight: 800;line-height: 1.5;letter-spacing: -0.04em;color: #fff;word-break: keep-all;}
		.indCard {display: flex;flex-direction: column;border-top: 1px solid rgba(255,255,255,0.1);padding: 32px 0;}
		.indCard:last-child {border-bottom: 1px solid rgba(255,255,255,0.1);}
		.indCardImg {width: 100%;aspect-ratio: 16 / 9;object-fit: cover;border-radius: 12px;background: #0d0e0e;display: block;margin-bottom: 20px;}
		.indCardImgFb {width: 100%;aspect-ratio: 16 / 9;border-radius: 12px;display: grid;place-items: center;font-size: clamp(18px, 5vw, 26px);font-weight: 850;letter-spacing: -0.07em;line-height: 1.0;text-align: center;color: rgba(255,255,255,0.8);background:radial-gradient(circle at 68% 24%, rgba(110,118,142,0.34), transparent 34%),linear-gradient(135deg, #18202a, #08090a);margin-bottom: 20px;}
		.indCardEn {margin: 0 0 6px;font-size: clamp(22px, 6vw, 32px);font-weight: 850;letter-spacing: -0.065em;line-height: 1.1;color: #fff;word-break: break-word;}
		.indCardKo {margin: 0 0 12px;font-size: clamp(15px, 4vw, 18px);font-weight: 800;letter-spacing: -0.04em;color: rgba(255,255,255,0.72);}
		.indCardDesc {margin: 0;font-size: 14px;line-height: 1.75;color: rgba(255,255,255,0.46);word-break: keep-all;}
    }


	/* 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)), 1840px);margin: 0 auto;}
	.portHead {text-align: center;margin-bottom: clamp(70px, 10vw, 200px);}
	.portTit {margin: 0 0 40px;font-size: clamp(36px, 4vw, 64px);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 {max-width: 560px;margin: 0 auto;font-size: 22px;line-height: 1.7;color: rgba(255,255,255,0.7);word-break: keep-all;}

	.portGrid {--masonry-gap: 6px;--masonry-row: 10px;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-auto-rows: var(--masonry-row);grid-auto-flow: dense;gap: var(--masonry-gap);align-items: start;list-style: none;margin: 0;padding: 0;}
	.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: clamp(14px, 1.4vw, 22px);right: clamp(14px, 1.4vw, 22px);bottom: clamp(14px, 1.4vw, 22px);z-index: 3;text-shadow: 0 2px 18px rgba(0,0,0,0.42);}
	.portMeta small {display: block;margin-bottom: 6px;font-size: 12px;letter-spacing: 0.04em;color: rgba(255,255,255,0.68);font-weight: 700;}
	.portMeta h3 {display: block;font-size: clamp(15px, 1.15vw, 22px);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;}
	.portCta {margin-top: clamp(70px, 7vw, 105px);text-align: center;}
	.portBtn {display: inline-flex;align-items: center;justify-content: center;min-width: 305px;height: 62px;padding: 0 30px;border-radius: 7px;border: 1px solid rgba(255,255,255,0.18);color: #fff;font-size: 18px;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, 120px);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%; }
    }

    @media (max-width: 1100px) {
		.portGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
    }

    @media (max-width: 767px) {
		.portSec {padding: 110px 0 90px;}
		.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;}
    }


    /* 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)), 1780px);margin: 0 auto;}
	.wfIntro {display: grid;align-items: start;justify-content: end;width: 1300px;margin: 0 auto;}

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

	.wfEye {margin: 0;color: rgba(255,255,255,0.42);font-size: 14px;font-weight: 700;letter-spacing: -0.01em;}
	.wfDesc {margin: 0;color: #fff;font-size: 24px;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 {margin: 0;color: #835dc4;font-size: clamp(54px, 8.8vw, 155px);line-height: 0.78;letter-spacing: -0.006em;/* font-weight: 850; */text-align: center;white-space: nowrap;filter: blur(0.15px);}
	.wfBgKick {width: min(calc(100% - (var(--container-padding) * 2)), 1780px);margin: 1em 2.5em 0;color: #a46cff;font-size: 15px;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: 314px;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: 22px;}
	.wfNum {color: #ff5841;}
	.wfIcon {width: 44px;height: 44px;opacity: 0.82;color: rgba(255,255,255,0.88);}
	.wfTxt {font-size: 16px;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: '┘';}

    @media (max-width: 1200px) {
		.wfGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
		.wfCard:last-child {grid-column: 1 / -1;}
		.wfBgTit {font-size: clamp(48px, 11vw, 120px);}
    }

    @media (max-width: 767px) {
		.wfSec {padding: 110px 0 120px;}
		.wfIn {width: min(calc(100% - (var(--container-mobile) * 2)), 1780px);}
		.wfIntro {grid-template-columns: 1fr;gap: 18px;margin-bottom: 72px;}
		.wfDesc {font-size: 15px;line-height: 1.85;}
		.wfProcW {padding-top: 92px;}
		.wfGrid {grid-template-columns: 1fr;}
		.wfCard:last-child {grid-column: auto;}
		.wfCard {min-height: 190px;}
		.wfTitleLayer {top: 0;bottom: auto;perspective: 700px;}
		.wfBgTit {font-size: clamp(44px, 17vw, 82px);line-height: 0.86;white-space: normal;}
		.wfBgKick {width: min(calc(100% - (var(--container-mobile) * 2)), 1780px);}
    }

    /* 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: var(--dim);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;}

    @media (max-width: 767px) {
		.contactIn {width: min(calc(100% - (var(--container-mobile) * 2)), 960px);}
    }


    /* 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;}


    /*
    |--------------------------------------------------------------------------
    | Safe Mobile Scroll Patch
    |--------------------------------------------------------------------------
    */
    @media (max-width: 767px) {
		html,
		body {overscroll-behavior-y: none;}

		.bgVid {position: fixed;min-height: 100svh;}
		.bgVid video {transform: scale(1.005);filter: brightness(0.68) contrast(1.04) saturate(0.88);}
		.heroIntro {min-height: 70svh;}
		.indStk {height: 100svh;}
		.engStkFrm {height: 100svh;}
    }


    /* 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: 3rem;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(17px,1.35vw,20px);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(14px,1vw,17px);word-break: keep-all}
	.faqAnsIn p {margin: 0}


    @media(max-width:900px){
		.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}
	}


    /* 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)), 1720px);min-height: clamp(520px, 54vw, 700px);margin: 0 auto;display: grid;place-items: center;overflow: hidden;background: #000;}
	.ctaCon {position: relative;z-index: 2;width: min(100% - 32px, 720px);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(88px, 8vw, 120px);height: auto;filter: brightness(0) invert(1);}
	.ctaLogoTxt {width: clamp(118px, 12vw, 210px);height: auto;filter: brightness(0) invert(1);}
	.ctaTit {margin: 0 0 clamp(22px, 2vw, 34px);font-size: clamp(26px, 2.45vw, 42px);line-height: 1.32;word-break: keep-all;}
	.ctaDesc {font-size: 1.9rem;word-break: keep-all;font-weight: 300;}
	.ctaBtn {display: inline-flex;align-items: center;justify-content: center;min-width: 305px;height: 65px;margin-top: clamp(34px, 3vw, 52px);padding: 0 32px;border: 1px solid rgb(255 255 255 / 7%);border-radius: 6px;background: rgba(255,255,255,0.015);color: rgba(255,255,255,0.94);font-size: 18px;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;}


    @media (max-width: 767px) {
		.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;}
    }