@charset "utf-8";
/* ********************************************************************
 * name : CodeBee CG LAB
 * filename : layout.css
 * author : JBieN 제이비엔
 * update : 2026-05-20
********************************************************************* */
:root {
  --container-padding: 3%;
  --container-mobile: 16px;
  --foot-h: 620px;
  --point: #ff5841;
  --line-dark: rgba(0, 0, 0, .14);

  /* ── 애니메이션 y 값 CSS 변수 ── */
  --anim-service-item-from-y: 120px;
  --anim-service-left-from-y: 72px;
  --anim-service-left-to-y: -44px;
  --anim-service-right-from-y: 180px;
  --anim-service-right-to-y: -24px;
  --anim-workflow-left-from-y: 70px;
  --anim-workflow-left-to-y: -26px;
  --anim-workflow-right-from-y: 120px;
  --anim-workflow-right-to-y: -16px;
  --anim-workflow-cards-from-y: 96px;
  --anim-workflow-cards-to-y: -20px;
  --anim-engineered-lines-from-y: 120px;
  --anim-engineered-caption-from-y: 40px;
}

html.lenis,
html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-smooth iframe {pointer-events: none;}

body {margin: 0;background: #09090c;color: var(--white-color);}

.skipL {position: absolute;left: 12px;top: -50px;z-index: 9999;padding: 10px 14px;border-radius: 8px;background: #fff;color: #000;}
.skipL:focus { top: 12px; }

/* Header */
.siteHd {position: fixed;inset: 0 0 auto 0;z-index: 100;height: clamp(100px,8vw,120px);background: linear-gradient(to bottom, rgba(9,9,12,0.78), rgba(9,9,12,0));pointer-events: none;transform: translateY(-100%);opacity: 0;transition:transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.45s ease,background 0.35s ease,backdrop-filter 0.35s ease;will-change: transform, opacity;}
img.svgW{filter: brightness(0) invert(1);}
.siteHd.is-visible {transform: translateY(0);opacity: 1;transition: all 0.5s;}
.siteHd.is-hidden {transform: translateY(-100%);opacity: 0;transition: all 0.5s;}
.siteHd.is-scrolled {background: linear-gradient(to bottom, rgb(9 9 12 / 17%), rgb(9 9 12 / 0%));backdrop-filter: blur(14px);height: 60px;transition: all 0.5s;}
.siteHdIn {width: min(calc(100% - (var(--container-padding) * 2)));height: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 24px;pointer-events: auto;}

.is-qv-open .siteHd{display: none;}

.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brandSb {width: clamp(100px, 10vw, 142px);height: auto;flex: 0 0 auto;transition: all 0.5s;}
.is-scrolled .brandSb{width: 80px;}

.brandTxtW {position: relative;width: clamp(200px, 12vw, 280px);height: clamp(22px, 2vw, 44px);overflow: hidden;opacity: 0;transform: translateY(8px);will-change: transform, opacity;}
.brandTxt {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;object-position: left center;filter: brightness(1.08);transition: all 0.5s;}
.is-scrolled .brandTxt{width: 180px;}
.is-sub .brandTxtW {opacity: 1 !important; visibility: visible !important; transform: none !important;}

.nav {display: flex;align-items: center;gap: clamp(16px, 2vw, 34px);transition: all 0.5s;}
.navLs {display: flex;align-items: center;gap: clamp(16px, 8vw, 70px);list-style: none;margin: 0;padding: 0;}
.is-scrolled .nav{margin-top: -5px;}

.navLk {position: relative;font-size: clamp(20px,1vw,24px);letter-spacing: 0.06em;text-transform: uppercase;color: rgba(255,255,255,0.88);transition: all 0.5s;}
.navLk::after {content: "";position: absolute;left: 0;bottom: -7px;width: 100%;height: 1px;background: rgba(255,255,255,0.8);transform: scaleX(0);transform-origin: left center;transition: transform 0.25s ease;}
.navLk:hover::after, .navLk:focus-visible::after { transform: scaleX(1); }
.is-scrolled .navLk{font-size: 1rem;}

.navCta {display: inline-flex;align-items: center;justify-content: center;min-width: 144px;height: 63px;padding: 0 20px;border-radius: 7px;background: #EB0000;color: #fff;font-size: 1.25rem;font-weight: 600;box-shadow: 0 12px 30px rgba(255,94,71,0.24);transition: transform 0.25s ease, box-shadow 0.25s ease;transition: all 0.5s;}
.navCta:hover, .navCta:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(255,94,71,0.34); }
.is-scrolled .navCta{font-size: 1rem;height: 40px;}

/* Mobile Burger Navigation */
.navTg {display: none;position: relative;z-index: 120;width: 46px;height: 46px;border: 1px solid rgba(255,255,255,0.18);border-radius: 12px;background: rgba(255,255,255,0.06);cursor: pointer;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.navTgLn {position: absolute;left: 12px;right: 12px;height: 2px;border-radius: 999px;background: rgba(255,255,255,0.94);transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, top 0.28s cubic-bezier(0.22, 1, 0.36, 1);}

.navTgLn:nth-child(1) { top: 15px; }
.navTgLn:nth-child(2) { top: 22px; }
.navTgLn:nth-child(3) { top: 29px; }

.navTg.is-active .navTgLn:nth-child(1) {top: 22px;transform: rotate(45deg);}
.navTg.is-active .navTgLn:nth-child(2) {opacity: 0;}
.navTg.is-active .navTgLn:nth-child(3) {top: 22px;transform: rotate(-45deg);}
.navPn {display: flex;align-items: center;gap: clamp(16px, 8vw, 70px);}

.subPage{position: relative;z-index: 10;padding-bottom: 85vh;background: transparent;}
.subHero {position: sticky;top: 0;z-index: 1;min-height: 60vh;padding: 22em 4.5vw 5em;display: flex;flex-direction: column;justify-content: flex-end;overflow: hidden;background:radial-gradient(circle at 82% 24%, rgba(255, 88, 65, 0.2), transparent 28%),linear-gradient(180deg, #050505 0%, #000 100%);}
.subHero::before {content: "";position: absolute;inset: 0;background: var(--sub-bg, none) center / cover no-repeat;opacity: var(--sub-bg-opacity, 0.28);transform: scale(1.04);pointer-events: none;}
.subHeroIn {position: relative;z-index: 2;}
.subEye {margin: 0 0 26px;color: rgba(255, 255, 255, 0.94);font-size: clamp(17px,1.3vw,28px);font-weight: 400;line-height: 1.45;letter-spacing: -0.03em;}
.subTit {margin: 0;overflow: hidden;color: #fff;font-size: clamp(72px, 9.5vw, 220px);line-height: 0.88;letter-spacing: -0.065em;font-weight: 500;margin-left: -13px;}
.subTit > span {display: flex;align-items: flex-end;overflow: hidden;}
.subTit em {display: inline-block;font-style: normal;transform: translateY(115%);opacity: 0;will-change: transform, opacity;}
.subDesc {margin: 34px 0 0;color: rgb(255 255 255 / 60%);font-size: clamp(15px,1.1vw,22px);line-height: 1.72;letter-spacing: -0.025em;}
.subTabs {display: flex;margin: clamp(50px, 6vw, 95px) 0 0;justify-content: space-between;}
.subTabs a {display: block;color: #fff;font-size: clamp(18px,1.1vw,26px);font-weight: 500;transition: color .3s ease;text-transform: uppercase;}
.subTabs a:hover {color: rgba(255,255,255,.7);}
.subTabs a.is-active {color: #ff5841;}
.subEye,.subDesc,.subTabs {opacity: 0;transform: translateY(40px);will-change: transform, opacity;}
.subHero.is-on .subEye {animation: subFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.subHero.is-on .subDesc {animation: subFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;}
.subHero.is-on .subTabs {animation: subFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;}
.subHero.is-on .subTit em {animation: subLetterUp 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;animation-delay: calc(var(--i) * 0.08s + 0.16s);}

@keyframes subLetterUp {
	0% {opacity: 0;transform: translateY(115%) scaleY(0.94);}
	100% {opacity: 1;transform: translateY(0) scaleY(1);}
}

@keyframes subFadeUp {
	to {opacity: 1;transform: translateY(0);}
}

/* Content */
.subContent {position: relative;z-index: 10;/*min-height: 110vh;*/padding: 90px 4.2vw 150px;border-radius: 58px 0 0 0;background: var(--white-color);color: #111;}

/* Footer */
.foot {position: relative;z-index: 12;background: #0e0e0e;color: #ff5841;margin-top: -5em;}
.is-sub .foot{position: fixed;left: 0;bottom: 0;z-index: 1;width: 100%;overflow: hidden;}
.portfolioView .foot{position: relative;}
.footIn {width: min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;padding: clamp(50px, 4vw, 64px) 0;}
.footTop {padding-bottom: clamp(38px, 4vw, 52px);display: flex;justify-content: space-between;width: 100%;}
.footAddr {margin: 0 0 22px;color: rgba(255,255,255,0.82);font-size: clamp(16px, 1vw, 22px);line-height: 1.7;letter-spacing: -0.02em;}
.footCall{font-size: clamp(24px, 2.9vw, 75px);display: flex;flex-direction: column;letter-spacing: .05em;line-height: 1.2;margin-top: 0.5em;}
.footMeta {display: flex;flex-wrap: wrap;gap: 18px;flex-direction: column;}
.footMeta span {color: rgba(255,255,255,0.58);font-size: clamp(15px, 0.9vw, 20px);}
.footMeta strong {margin-right: 10px;color: rgba(255,255,255,0.92);font-weight: 400;}
.footMeta a:hover{color: var(--point);transition: color 0.5s ease;}
.footBot {display: flex;align-items: center;justify-content: space-between;gap: 24px;padding-top: clamp(24px, 2.8vw, 34px);}
.footCopy {margin: 0;color: #fff;font-size: clamp(13px, 0.8vw, 18px);}
.footCopy span{margin-left: 0.5em;opacity: 0.5;}
.footCopy a{margin: 0 0.2em;}
.footCopy a:hover{color: var(--point);transition: color 0.5s ease;}
.footLinks {display: flex;align-items: center;gap: clamp(18px, 2vw, 36px);margin-right: 20px;}
.footLinks a {position: relative;color: rgba(255,255,255,0.58);font-size: clamp(15px, 0.8vw, 18px);line-height: 1.6;letter-spacing: -0.02em;transition: color 0.25s ease;}
.footLinks a::after {content: "";position: absolute;left: 0;bottom: -4px;width: 100%;height: 1px;background: rgba(255,255,255,0.88);transform: scaleX(0);transform-origin: left center;transition: transform 0.25s ease;}
.footLinks a:hover,
.footLinks a:focus-visible {color: rgba(255,255,255,0.92);}
.footLinks a:hover::after,.footLinks a:focus-visible::after {transform: scaleX(1);}
.footLogo {width: (calc(100% - (var(--container-padding) * 2)));filter: invert(52%) sepia(93%) saturate(2876%) hue-rotate(336deg) brightness(102%) contrast(101%);clip-path: inset(130% 0 0 0);will-change: clip-path, transform;}
.footAbout{margin: 15vh 0 3vh;text-align: right;opacity: 0.85;font-size: clamp(12px, 0.8vw, 22px);}

.topB {position: fixed;bottom: 24px;right: 24px;width: 52px;height: 52px;display: flex;align-items: center;justify-content: center;z-index: 999;border: 1px solid rgba(255,255,255,0.16);backdrop-filter: blur(12px);box-sizing: border-box;cursor: pointer;opacity: 0;visibility: hidden;transform: translateY(40px);transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s ease;box-shadow: 3px 4px 12px rgba(0,0,0,0.18);}
.topB.is-show {opacity: 1;visibility: visible;transform: translateY(0);}
.topB svg {transition: transform 0.3s ease;filter: brightness(0) saturate(100%) invert(47%) sepia(91%) saturate(2674%) hue-rotate(335deg) brightness(101%) contrast(101%);width: 12px;}
.topB:hover svg {transform: translateY(-3px);}


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

@media (Prefers-reduced-motion: Reduce) {
  *, *::Before, *::After {
	Animation-duration: 0.01ms !important;
	Animation-iteration-count: 1 !important;
	Transition-duration: 0.01ms !important;
	Scroll-behavior: Auto !important;
  }
}

@media all and (min-width:2300px){
	.subPage{padding-bottom: 76vh;}
}

@media all and (max-width:1680px){
	.is-sub .foot{height:655px;}
	.subPage{padding-bottom: 655px;}
}

@media (max-width: 1280px) {
	.navTg {display: inline-flex;align-items: center;justify-content: center;}
	.navPn {position: fixed;left: 0;top: 0;z-index: 110;width: 100%;height: 100vh;height: 100dvh;padding: 0 5%;display: flex;flex-direction: column;align-items: stretch;justify-content: center;gap: 32px;background:radial-gradient(circle at 70% 18%, rgba(255,79,196,0.16), transparent 30%),radial-gradient(circle at 18% 80%, rgba(112,44,239,0.18), transparent 34%),rgba(9,9,12,0.96);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);opacity: 0;visibility: hidden;transform: translateY(-14px);pointer-events: none;overflow-y: auto;transition:opacity 0.32s ease,visibility 0.32s ease,transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);}
	.navPn.is-open {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;}
	.navPn .navLs {display: grid;gap: 0;width: min(100%, 520px);margin: 0 auto;padding: 0;}
	.navLs li {border-bottom: 1px solid rgba(255,255,255,0.11);}
	.navLs li:first-child {border-top: 1px solid rgba(255,255,255,0.11);}
	.navLk {display: flex;align-items: center;min-height: 100px;font-size: clamp(20px, 7vw, 46px);letter-spacing: -0.005em;}
	.navLk::after {display: none;}
	.navPn .navCta {width: min(100%, 520px);height: 70px;margin: 0 auto;border-radius: 999px;font-size: 20px;}
	body.is-mobile-menu-open {overflow: hidden;touch-action: none;overscroll-behavior: none;}

	body.is-mobile-menu-open,
	body.is-mobile-menu-open html {height: 100%;}
	body.is-mobile-menu-open .siteHd {background: rgba(9,9,12,0.92);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);}
}

@media (max-width: 1024px) {
	.hd {padding: 0 24px;}

	.subHero {padding: 15em 5% 4em;}
}

@media (max-width: 900px) {
	.footMeta {flex-direction: column;gap: 10px;}
	.footBot {flex-direction: column;align-items: flex-start;}
	.footLinks {flex-wrap: wrap;gap: 14px 22px;}
}

@media (max-width: 767px) {
	.navTg {width: 42px;height: 42px;border-radius: 11px;}
	.navTgLn {left: 11px;right: 11px;}

	.navTgLn:nth-child(1) { top: 14px; }
	.navTgLn:nth-child(2) { top: 20px; }
	.navTgLn:nth-child(3) { top: 26px; }

	.navTg.is-active .navTgLn:nth-child(1),
	.navTg.is-active .navTgLn:nth-child(3) {top: 20px;}

	.footTop {flex-direction: column;}

	.subTabs{overflow-x: scroll;gap: 24px;padding-bottom: 1em;}
	.subTabs::-webkit-scrollbar-thumb {background-color: hsl(0deg 0% 100% / 30%) !important;}
	.subTabs::-webkit-scrollbar {height: 2px;}
}


@media (max-width: 640px) {
	:root {--container-padding: 5%;}

	.siteHd.is-scrolled {height: 75px;}

	.brand {flex-direction: column;gap: 2px;}
	.brandTxtW{width: 100px;}
	

	.footCall {font-size: 1.5rem;}

	.hd {height: 68px;padding: 0 22px;}
	.nav a:not(:last-child) {display: none;}
	.subHero {min-height: 530px;padding: 110px 24px 34px;}
	.subEye {font-size: 17px;}
	.subTabs button {font-size: 14px;}
	.subContent {padding: 1em 5% 4em;border-radius: 0;}

	.footAbout {margin: 5vh 0 3vh;text-align: left;}
	.footLogo {filter: invert(52%) sepia(93%) saturate(2876%) hue-rotate(336deg) brightness(102%) contrast(101%);clip-path: inset(180% 0 0 0);}
	.footCopy i{display:block;}

	.topB {right: 22px;}

	.is-sub .foot{height:610px;}
	.subPage{padding-bottom: 610px;}
}