@charset "utf-8"; /* ========================================================================== K2N Homepage – Core stylesheet 기획서: 260814_케이투엔_홈페이지개편_LNBversion.pdf ========================================================================== */ /* ---------- Web fonts ---------- */ /* 본문 글꼴 @font-face 는 tools/build.py 가 각 페이지 에 인라인으로 심습니다. 파일명에 내용 해시가 들어가기 때문에 이 파일에 URL 을 적어 둘 수 없습니다. 글꼴 자체는 Pretendard 기반 전용 서브셋이며 tools/fonts.py 가 굽습니다. SIL Open Font License 1.1 · 전문은 assets/fonts/OFL.txt */ /* ---------- Design tokens (기획서 p.5 컬러 시스템) ---------- */ :root{ --brand:#0A3F8E; /* 메인 */ --point:#2468D8; /* 보조 포인트 */ --point-hover:#286EDC; /* 버튼 Hover */ --light-point:#27D3E2; /* 라이트 포인트 */ --dark:#071A33; /* 푸터 / 다크 영역 */ --cta-dark:#011A42; /* Process 하단 CTA 영역 */ --bg:#FFFFFF; /* 메인 배경 */ --bg-soft:#F4F7FB; /* 섹션 배경 */ --text:#0B1F33; /* 메인 텍스트 */ --text-sub:#4C6073; /* 보조 텍스트 */ --muted:#6B7D90; /* 비활성 · 캡션 */ --link:#16499B; /* 링크 · 강조 텍스트 */ --error:#D93025; --border:#E2E8F0; --border-strong:#CBD5E1; --header-h:80px; --lnb-h:56px; --container:1280px; --radius:14px; --radius-sm:8px; --shadow-card:0 6px 24px rgba(11,31,51,.07); --shadow-card-hover:0 14px 36px rgba(11,31,51,.13); --ease:cubic-bezier(.22,.61,.36,1); /* 이미지 소스 교체 지점 – 실제 이미지 전달 시 아래 경로만 변경하면 됩니다. ※ HOME 히어로 배경은 이미지가 아니라 assets/js/k2n-hero.js 의 캔버스 이펙트입니다. */ --img-biz-consulting:url("../img/placeholder/business-consulting.svg"); --img-biz-development:url("../img/placeholder/business-development.svg"); --img-biz-design:url("../img/placeholder/business-design.svg"); --img-biz-marketing:url("../img/placeholder/business-marketing.svg"); --img-biz-commercialization:url("../img/placeholder/business-commercialization.svg"); --img-biz-operation:url("../img/placeholder/business-operation.svg"); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{margin:0;background:var(--bg);color:var(--text); font-family:"K2N Sans",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif; font-size:16px;line-height:1.7;font-weight:400;letter-spacing:-.01em; -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;} h1,h2,h3,h4,h5,p,figure,dl,dd{margin:0;} ul,ol{margin:0;padding:0;list-style:none;} a{color:inherit;text-decoration:none;} img,svg{max-width:100%;height:auto;vertical-align:middle;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;} address{font-style:normal;} :focus-visible{outline:2px solid var(--point);outline-offset:2px;border-radius:2px;} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--brand);color:#fff;padding:10px 18px;border-radius:0 0 8px 8px;transition:top .2s;} .skip-link:focus{top:0;} /* 데스크톱에서 문장을 두 줄로 나누는 개행. 좁은 화면에서는 display:none 으로 무시합니다. */ .br-pc{display:inline;} /* ---------- Layout helpers ---------- */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 40px;} .section{padding:120px 0;} .section--soft{background:var(--bg-soft);} .section--tight{padding:96px 0;} /* 좌 : 타이틀 / 우 : 콘텐츠 2단 레이아웃 (Core Value · Why K2N · Built on Founder Experience 동일 가로 폭 기준) */ .split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:80px;align-items:start;} .split__aside{position:sticky;top:calc(var(--header-h) + 40px);} .split__body{min-width:0;} .section-label{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--brand);margin-bottom:18px;} .section-title{font-size:40px;line-height:1.3;font-weight:700;color:var(--brand);letter-spacing:-.02em;} .section-title--dark{color:var(--text);} .section-desc{margin-top:20px;font-size:17px;line-height:1.8;color:var(--text-sub);} .section-head{margin-bottom:56px;} .section-head--center{text-align:center;} .section-head--center .section-desc{max-width:760px;margin-left:auto;margin-right:auto;} .kw{color:var(--brand);} .kw-point{color:var(--point);} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:0 34px;border-radius:999px;font-size:16px;font-weight:700; transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);} .btn__arrow{width:18px;height:18px;flex:none;} .btn--primary{background:var(--brand);color:#fff;} .btn--primary:hover{background:var(--point-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,110,220,.28);} .btn--point{background:var(--point);color:#fff;} .btn--point:hover{background:var(--point-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,110,220,.32);} .btn--ghost{border:1px solid rgba(255,255,255,.5);color:#fff;} .btn--ghost:hover{background:#fff;color:var(--brand);border-color:#fff;} .btn--line{border:1px solid var(--border-strong);color:var(--text);} .btn--line:hover{border-color:var(--brand);color:var(--brand);} /* ========================================================================== Header : GNB + LNB (기획서 p.8) ========================================================================== */ .site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff; border-bottom:1px solid var(--border);transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);} .site-header__inner{display:flex;align-items:center;gap:32px;height:var(--header-h);} .logo{display:inline-flex;align-items:center;flex:none;} .logo__img{display:block;height:30px;width:auto;transition:filter .3s var(--ease);} .gnb{margin-left:auto;display:flex;align-items:center;} .gnb__list{display:flex;align-items:center;gap:8px;} .gnb__link{position:relative;display:block;padding:0 22px;line-height:var(--header-h);font-size:17px;font-weight:500;color:var(--text);transition:color .2s var(--ease);} .gnb__link::after{content:"";position:absolute;left:22px;right:22px;bottom:22px;height:2px;background:var(--brand); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);} .gnb__link:hover,.gnb__item.is-active .gnb__link{color:var(--brand);} .gnb__link:hover::after,.gnb__item.is-active .gnb__link::after{transform:scaleX(1);} /* 언어 전환 */ .lang{position:relative;flex:none;margin-left:12px;} .lang__toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--border-strong); border-radius:999px;font-size:14px;font-weight:500;color:var(--text);transition:border-color .2s,color .2s,background-color .2s;} .lang__toggle:hover{border-color:var(--brand);color:var(--brand);} .lang__caret{width:10px;height:10px;transition:transform .25s var(--ease);} .lang.is-open .lang__caret{transform:rotate(180deg);} .lang__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:132px;padding:6px;background:#fff;border:1px solid var(--border); border-radius:10px;box-shadow:var(--shadow-card);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s var(--ease);} .lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0);} .lang__option{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--text-sub);} .lang__option:hover{background:var(--bg-soft);color:var(--text);} .lang__option[aria-selected="true"]{color:var(--brand);font-weight:700;background:var(--bg-soft);} /* LNB : BUSINESS 하위메뉴 (GNB > BUSINESS 항목 내부에 위치) */ .gnb__item--business{position:static;} .lnb{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border); box-shadow:0 12px 24px rgba(11,31,51,.06); max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s var(--ease),visibility .3s;} .gnb__item--business:hover .lnb, .gnb__item--business:focus-within .lnb, .site-header.lnb-fixed .lnb{max-height:var(--lnb-h);visibility:visible;} .lnb__list{display:flex;align-items:center;gap:4px;height:var(--lnb-h);} .lnb__link{position:relative;display:block;padding:0 20px;line-height:var(--lnb-h);font-size:15px;color:var(--text-sub);transition:color .2s var(--ease);} .lnb__link::after{content:"";position:absolute;left:20px;right:20px;bottom:14px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);} .lnb__link:hover{color:var(--brand);} .lnb__link:hover::after{transform:scaleX(1);} .lnb__item.is-active .lnb__link{color:var(--brand);font-weight:700;} .lnb__item.is-active .lnb__link::after{transform:scaleX(1);} /* Hero 위 투명 헤더 */ .site-header.is-overlay:not(.is-solid){background:transparent;border-bottom-color:transparent;} .site-header.is-overlay:not(.is-solid) .gnb__link, .site-header.is-overlay:not(.is-solid) .lang__toggle{color:#fff;} .site-header.is-overlay:not(.is-solid) .lang__toggle{border-color:rgba(255,255,255,.45);} /* 어두운 배경 위에서는 로고를 흰색 실루엣으로 반전시킵니다 (별도 흰색 파일 없이). */ .site-header.is-overlay:not(.is-solid) .logo__img{filter:brightness(0) invert(1);} .site-header.is-overlay:not(.is-solid) .gnb__link::after{background:#fff;} .site-header.is-overlay:not(.is-solid) .nav-toggle__bar{background:#fff;} .site-header.is-stuck{box-shadow:0 4px 20px rgba(11,31,51,.07);} /* 모바일 토글 */ .nav-toggle{display:none;flex:none;width:44px;height:44px;margin-left:auto;position:relative;} .nav-toggle__bar{position:absolute;left:11px;width:22px;height:2px;background:var(--text);transition:transform .3s var(--ease),opacity .2s;} .nav-toggle__bar:nth-child(1){top:15px;} .nav-toggle__bar:nth-child(2){top:21px;} .nav-toggle__bar:nth-child(3){top:27px;} .is-nav-open .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg);} .is-nav-open .nav-toggle__bar:nth-child(2){opacity:0;} .is-nav-open .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .page-main{padding-top:var(--header-h);} .page-main--lnb{padding-top:calc(var(--header-h) + var(--lnb-h));} .page-main--hero{padding-top:0;} /* ========================================================================== Hero (기획서 p.10) ========================================================================== */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff;} /* 배경은 assets/js/k2n-hero.js 가 이 안에 를 꽂아 그립니다. 아래 그라디언트는 스크립트 로드 전 · Canvas 미지원 시의 폴백이며, 이펙트의 배경 방사 그라디언트(소실점 71%/44%)와 같은 값입니다. */ .hero__media{position:absolute;inset:0; background:radial-gradient(120% 130% at 71% 44%,#08325F 0%,#062A5C 16%,#031A3E 42%,#01091C 100%);} .hero__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;} .hero__media::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(1,26,66,.86) 0%,rgba(1,26,66,.66) 46%,rgba(1,26,66,.34) 100%);} .hero__inner{position:relative;z-index:1;width:100%;padding-top:var(--header-h);} .hero__title{font-size:clamp(38px,5vw,72px);line-height:1.2;font-weight:700;letter-spacing:-.03em;} .hero__desc{margin-top:28px;max-width:620px;font-size:17px;line-height:1.85;color:rgba(255,255,255,.86);} .hero__cta{margin-top:44px;} .hero__scroll{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px; font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.7);} .hero__scroll span{display:block;width:1px;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));animation:scrollHint 1.8s ease-in-out infinite;} @keyframes scrollHint{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top;}50%{opacity:1;transform:scaleY(1);transform-origin:top;}} /* ========================================================================== HOME – Business Overview (기획서 p.12~13) ========================================================================== */ .biz-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-radius:var(--radius);overflow:hidden;} .biz-card{position:relative;display:block;min-height:460px;overflow:hidden;color:#fff;isolation:isolate;} .biz-card__media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--ease);} .biz-card:nth-child(1) .biz-card__media{background-image:var(--img-biz-consulting);} .biz-card:nth-child(2) .biz-card__media{background-image:var(--img-biz-development);} .biz-card:nth-child(3) .biz-card__media{background-image:var(--img-biz-design);} .biz-card:nth-child(4) .biz-card__media{background-image:var(--img-biz-marketing);} .biz-card:nth-child(5) .biz-card__media{background-image:var(--img-biz-commercialization);} .biz-card:nth-child(6) .biz-card__media{background-image:var(--img-biz-operation);} .biz-card__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,26,66,.18) 0%,rgba(1,26,66,.72) 100%); transition:background .45s var(--ease);} .biz-card__body{position:relative;z-index:1;height:100%;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 28px;} .biz-card__title{font-size:21px;font-weight:700;letter-spacing:-.02em;} .biz-card__desc{margin-top:14px;font-size:14px;line-height:1.75;color:rgba(255,255,255,.88); opacity:0;max-height:0;transform:translateY(10px);overflow:hidden;transition:opacity .35s var(--ease),transform .45s var(--ease),max-height .45s var(--ease);} .biz-card__go{position:absolute;right:24px;bottom:32px;width:44px;height:44px;border-radius:50%; border:1px solid rgba(255,255,255,.6);display:grid;place-items:center; opacity:0;transform:translateY(8px) scale(.9);transition:all .35s var(--ease);} .biz-card__go svg{width:16px;height:16px;} .biz-card:hover .biz-card__media{transform:scale(1.08);} .biz-card:hover .biz-card__overlay{background:linear-gradient(180deg,rgba(10,63,142,.72) 0%,rgba(1,26,66,.92) 100%);} .biz-card:hover .biz-card__desc{opacity:1;max-height:180px;transform:translateY(0);} .biz-card:hover .biz-card__go{opacity:1;transform:translateY(0) scale(1);} .biz-card:focus-visible .biz-card__desc{opacity:1;max-height:180px;transform:translateY(0);} .biz-card:focus-visible .biz-card__go{opacity:1;transform:none;} /* ========================================================================== HOME – Core Value 2×2 (기획서 p.14) ========================================================================== */ .cv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;} .cv-card{display:block;padding:44px 40px;background:#fff;border:1px solid var(--border);border-radius:var(--radius); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);} .cv-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:transparent;} .cv-card__icon{width:44px;height:44px;color:var(--brand);margin-bottom:22px;} .cv-card__title{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text);} .cv-card__title .kw{color:var(--brand);} .cv-card__lead{margin-top:14px;font-size:16px;font-weight:500;color:var(--text);} .cv-card__desc{margin-top:10px;font-size:15px;line-height:1.8;color:var(--text-sub);} /* ========================================================================== CTA band (Have a Game Project?) ========================================================================== */ .cta-band{background:var(--cta-dark);color:#fff;} .cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:76px 0;} .cta-band__title{font-size:34px;font-weight:700;letter-spacing:-.02em;} .cta-band__desc{margin-top:16px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.72);} .cta-band__desc br{display:block;} /* ========================================================================== ABOUT ========================================================================== */ .page-hero{padding:120px 0 100px;} .page-hero__title{font-size:clamp(34px,4.2vw,56px);line-height:1.28;font-weight:700;letter-spacing:-.03em;color:var(--text);} .page-hero__title .kw{color:var(--brand);} .page-hero__desc{margin-top:28px;max-width:760px;font-size:17px;line-height:1.85;color:var(--text-sub);} .page-hero__eyebrow{display:block;margin-bottom:20px;font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--text);} .page-hero__eyebrow .kw{color:var(--brand);} /* 404 : 주요 메뉴로 되돌아가는 버튼 묶음 */ .notfound-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;} /* Core Value – 가로형 카드 세로 배치 */ .cv-list{display:flex;flex-direction:column;gap:24px;} .cv-row{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:44px; padding:40px 44px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);} .cv-row__key{position:relative;font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--text);} .cv-row__key .kw{color:var(--brand);} .cv-row__key::after{content:"";position:absolute;right:-22px;top:50%;transform:translateY(-50%);width:1px;height:64px;background:var(--border);} .cv-row__lead{font-size:17px;font-weight:500;color:var(--text);} .cv-row__desc{margin-top:10px;font-size:15px;line-height:1.8;color:var(--text-sub);} /* Why K2N – 번호 리스트 */ .why-list{border-top:1px solid var(--border);} .why-item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:24px;padding:40px 0;border-bottom:1px solid var(--border);} .why-item__no{font-size:18px;font-weight:700;color:var(--brand);letter-spacing:.02em;} .why-item__key{font-size:19px;font-weight:700;color:var(--brand);letter-spacing:-.01em;} .why-item__title{margin-top:8px;font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.02em;} .why-item__desc{margin-top:14px;font-size:15px;line-height:1.85;color:var(--text-sub);} /* Founder Experience – 2×2 카드 */ .fx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .fx-card{position:relative;padding:36px 34px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);} .fx-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} .fx-card__cat{font-size:15px;font-weight:700;color:var(--brand);letter-spacing:-.01em;} .fx-card__no{margin-right:6px;} .fx-card__icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--brand);} .fx-card__icon svg{width:24px;height:24px;} .fx-card__rule{width:36px;height:2px;background:var(--brand);margin:22px 0 18px;} .fx-card__title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.45;} .fx-card__year{margin-top:12px;font-size:14px;color:var(--text-sub);} .fx-card__note{margin-top:4px;font-size:13px;color:var(--muted);} /* ========================================================================== BUSINESS 상세 페이지 ========================================================================== */ .svc-intro{padding:110px 0 0;} .svc-intro__en{font-size:clamp(32px,3.6vw,48px);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--text);} .svc-intro__ko{margin-top:12px;font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.02em;} .svc-intro__desc{margin-top:26px;max-width:900px;font-size:17px;line-height:1.85;color:var(--text-sub);} .svc-divider{height:2px;background:var(--brand);margin:56px 0 0;} .wwd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .wwd-card{padding:36px 32px;background:#fff;border:1px solid var(--border);border-radius:var(--radius); transition:border-color .3s var(--ease),box-shadow .3s var(--ease);} .wwd-card__icon{width:40px;height:40px;color:var(--brand);margin-bottom:22px;} .wwd-card__title{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.45;min-height:2.9em;} .wwd-card__desc{margin-top:14px;font-size:15px;line-height:1.8;color:var(--text-sub);} .st-list{display:flex;flex-direction:column;gap:24px;} .st-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:28px;align-items:start; padding:38px 40px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);} .st-card__icon{width:56px;height:56px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--brand);} .st-card__icon svg{width:26px;height:26px;} .st-card__title{font-size:21px;font-weight:700;color:var(--text);letter-spacing:-.02em;} .st-card__desc{margin-top:12px;font-size:15px;line-height:1.85;color:var(--text-sub);} /* Process */ .process{position:relative;margin-top:8px;} .process__track{position:relative;display:grid;gap:24px;} .process__track--4{grid-template-columns:repeat(4,1fr);} .process__track--5{grid-template-columns:repeat(5,1fr);} .process__line{position:absolute;left:12%;right:12%;top:48px;height:2px;background:var(--border);overflow:hidden;} .process__line::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease);} .process.is-visible .process__line::after{transform:scaleX(1);} .step{position:relative;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .process.is-visible .step{opacity:1;transform:none;} .step__circle{width:96px;height:96px;margin:0 auto 22px;border-radius:50%;background:#fff;border:2px solid var(--border); display:grid;place-items:center;color:var(--brand);transition:border-color .4s var(--ease),background-color .4s var(--ease);} .step__circle svg{width:36px;height:36px;} .process.is-visible .step__circle{border-color:var(--brand);} .step__no{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--point);} .step__title{margin-top:10px;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.4;} .step__desc{margin-top:12px;font-size:14px;line-height:1.75;color:var(--text-sub);} /* ========================================================================== CONTACT (문의 폼 제외 – 문의 채널 안내) ========================================================================== */ .contact-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start;} .contact-title{font-size:clamp(34px,3.8vw,52px);line-height:1.3;font-weight:700;letter-spacing:-.03em;color:var(--brand);} .contact-title .sub{display:block;color:var(--text-sub);} .contact-desc{margin-top:28px;font-size:17px;line-height:1.9;color:var(--text-sub);} .contact-list{display:flex;flex-direction:column;gap:20px;} .contact-item{display:grid;grid-template-columns:60px minmax(0,1fr);gap:22px;align-items:center; padding:30px 34px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);} .contact-item__icon{width:52px;height:52px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--brand);} .contact-item__icon svg{width:24px;height:24px;} .contact-item__label{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted);} .contact-item__value{margin-top:6px;font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.01em;} .contact-item__value a:hover{color:var(--point);} .contact-item__sub{margin-top:6px;font-size:14px;color:var(--text-sub);} .contact-cta{margin-top:32px;} /* ========================================================================== Legal (개인정보처리방침) ========================================================================== */ .legal{max-width:900px;} .legal__lead{font-size:16px;line-height:1.9;color:var(--text-sub);padding-bottom:36px;border-bottom:1px solid var(--border);} .legal__article{padding-top:40px;} .legal__article h2{font-size:21px;font-weight:700;color:var(--text);margin-bottom:16px;} .legal__article p{font-size:15px;line-height:1.95;color:var(--text-sub);margin-bottom:12px;} .legal__article ol{margin:0 0 12px;padding-left:20px;list-style:decimal;font-size:15px;line-height:1.95;color:var(--text-sub);} .legal__article ol ol{list-style:hangul;margin-top:8px;} .legal__note{margin-top:48px;padding:24px 28px;background:var(--bg-soft);border-radius:var(--radius-sm); font-size:14px;line-height:1.8;color:var(--muted);} /* ========================================================================== Footer / FNB (기획서 p.8) ========================================================================== */ .site-footer{background:var(--dark);color:rgba(255,255,255,.62);padding:64px 0 56px;font-size:14px;line-height:1.9;} .site-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;} .site-footer .logo__img{height:28px;filter:brightness(0) invert(1);} .footer-links{display:flex;align-items:center;gap:22px;} .footer-links a{color:#fff;font-weight:500;} .footer-links a:hover{color:var(--light-point);} .footer-info{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 26px;} .footer-info__item{display:inline-flex;gap:8px;} .footer-info__label{color:rgba(255,255,255,.42);} .footer-info a:hover{color:#fff;} .footer-copy{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.42);} /* ========================================================================== Scroll reveal ========================================================================== */ /* 스크립트가 차단·실패해도 본문이 보이도록 숨김 상태는 .js 로 스코프한다. .js 는 head 의 인라인 스크립트가 즉시 붙이므로 깜빡임은 없다. */ .js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--delay,0ms);} .js [data-reveal].is-visible{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} .js [data-reveal]{opacity:1;transform:none;} } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1280px){ .container{padding:0 32px;} .split{grid-template-columns:300px minmax(0,1fr);gap:56px;} } @media (max-width:1080px){ .section{padding:96px 0;} .split{grid-template-columns:1fr;gap:36px;} .split__aside{position:static;} .section-title{font-size:34px;} .biz-grid{grid-template-columns:repeat(3,1fr);} .biz-card,.biz-card__body{min-height:340px;} .biz-card__desc{opacity:1;max-height:180px;transform:none;} .biz-card__go{opacity:1;transform:none;} .wwd-grid{grid-template-columns:repeat(2,1fr);} .wwd-card__title{min-height:0;} .process__track--4,.process__track--5{grid-template-columns:repeat(2,1fr);gap:40px 24px;} .process__line{display:none;} .contact-split{grid-template-columns:1fr;gap:48px;} } @media (max-width:900px){ :root{--header-h:64px;} .nav-toggle{display:block;} .gnb{display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;margin:0;background:#fff;padding:16px 24px 48px; overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;} .is-nav-open .gnb{transform:none;visibility:visible;} .gnb__list{flex-direction:column;align-items:stretch;gap:0;} .gnb__link{line-height:1.5;padding:20px 4px;font-size:20px;font-weight:700;border-bottom:1px solid var(--border);color:var(--text) !important;} .gnb__link::after{display:none;} .lang{margin:24px 0 0;} .lang__toggle{width:100%;justify-content:space-between;height:48px;color:var(--text) !important;border-color:var(--border-strong) !important;} .lang__menu{left:0;right:0;} .site-header.is-overlay:not(.is-solid) .gnb{background:#fff;} .site-header .gnb .lnb{position:static;max-height:none;visibility:visible;overflow:visible; border:0;box-shadow:none;background:transparent;} .lnb .container{padding:0;max-width:none;} .lnb__list{flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;gap:0;} .lnb__link{padding:14px 4px 14px 16px;line-height:1.5;font-size:16px;border-bottom:1px solid var(--border);} .lnb__link::after{display:none;} .lnb__item.is-active .lnb__link{color:var(--brand);} .page-main--lnb{padding-top:var(--header-h);} .biz-grid{grid-template-columns:repeat(2,1fr);} .cv-grid,.fx-grid{grid-template-columns:1fr;gap:20px;} .cv-row{grid-template-columns:1fr;gap:18px;padding:32px 28px;} .cv-row__key::after{display:none;} .cta-band__inner{flex-direction:column;align-items:flex-start;padding:60px 0;} .cta-band__title{font-size:28px;} } @media (max-width:640px){ .container{padding:0 20px;} .section,.section--tight{padding:72px 0;} .page-hero{padding:80px 0 64px;} .svc-intro{padding:72px 0 0;} .section-title{font-size:28px;} .section-head{margin-bottom:36px;} .biz-grid{grid-template-columns:1fr;} .wwd-grid{grid-template-columns:1fr;} .process__track--4,.process__track--5{grid-template-columns:1fr;} .why-item{grid-template-columns:1fr;gap:10px;padding:32px 0;} .st-card{grid-template-columns:1fr;gap:18px;padding:30px 26px;} .fx-card,.contact-item{padding:26px 22px;} .contact-item{grid-template-columns:1fr;gap:14px;} .btn{width:100%;} .br-pc{display:none;} /* 폭이 좁아도 'From K-Game to the' 가 한 줄에 들어가도록 글자 크기를 줄입니다. (8.94em 필요) */ .hero__title{font-size:clamp(28px,calc(10.5vw - 4.2px),38px);} .hero__desc{font-size:15px;} .footer-info{flex-direction:column;gap:4px;} }