/* ===================================================================== 웹프라자 메인 — Figma "2027 웹프라자 리뉴얼" 기준 (1920 해상도) 1920에서 시안과 같은 px, 그보다 작은 화면은 vw 비례로 줄어듦 ===================================================================== */ :root { --bg: #0a0506; --white: #f8eeed; --muted: #b5a0a1; --link: #d6c4c3; --side: min(160px, 8.334vw); /* 좌우 기본 여백 (1920 기준 160) */ --header-h: 85px; --grad-text: linear-gradient(105deg, #fff6f4 0%, #ffd9d2 22%, #ff7a68 44%, #f2849f 62%, #ffe0d9 80%, #fff7f5 100%); --grad-pill: linear-gradient(100deg, #ffe4dd 0%, #ffb3a4 22%, #ff7a68 48%, #f2849f 78%, #ffd5cd 108%); --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); } body { color: var(--white); font-family: var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: hidden; } :where(h1, h2, h3, p, ul, dl, dd, figure) { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } img, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid #ff9a8f; outline-offset: 4px; } /* ---------- 공통: 섹션 제목 / 링크 / 알약 버튼 ---------- */ .section-title { font-size: clamp(32px, 2.917vw, 56px); font-weight: 700; line-height: 1; text-align: center; color: var(--white); } .section-title--dark { color: #222; } .link-more { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-size: 15px; font-weight: 500; line-height: 1.2; } .link-more img { transition: transform .25s ease; } .btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 160px; color: #222; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--grad-pill); background-size: 160% 100%; background-position: 0% 50%; transition: background-position .5s ease, box-shadow .3s ease, transform .3s ease; } .btn-pill img { transition: transform .25s ease; } .btn-pill--sm { padding: 14px 24px; font-size: 15px; } .btn-pill--lg { gap: 12px; padding: clamp(18px, 1.25vw, 24px) clamp(44px, 3.75vw, 72px); font-size: clamp(18px, 1.25vw, 24px); } @media (hover: hover) and (pointer: fine) { .link-more:hover { color: #fff; } .link-more:hover img { transform: translateX(3px); } .btn-pill:hover { background-position: 100% 50%; box-shadow: 0 8px 24px rgba(255, 90, 80, .45); } .btn-pill:hover img { transform: translateX(3px); } } /* 스크롤 등장 (main.js가 .is-in 추가) */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform 1s cubic-bezier(.16, .84, .3, 1); } [data-reveal].is-in { opacity: 1; transform: none; } /* 나타나는 방식 옵션 — data-reveal="zoom"(커지며) · "down"(위에서) / data-reveal-delay="300"(ms, 순서대로 나타날 때) */ [data-reveal="zoom"] { transform: scale(.82); transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1); } [data-reveal="down"] { transform: translateY(-40px); } [data-reveal].is-in { transform: none; } /* ===================================================================== HEADER — 고정, 반투명 블러 ===================================================================== */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--side); background: rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .3s ease; } .site-header.is-scrolled { background: rgba(10, 5, 6, .55); } .site-logo img { width: clamp(150px, 10.417vw, 200px); height: auto; } .site-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .gnb { display: flex; gap: clamp(40px, 4.167vw, 80px); } .gnb-item { position: relative; } .gnb-item > a { display: block; color: #ddd; font-size: 18px; font-weight: 500; transition: color .2s ease; } /* 하위 메뉴 드롭다운 — 어두운 페이지 위에서 잘 읽히도록 밝은 패널 + 짙은 글자 위쪽 투명 여백(padding-top)이 메뉴명과 패널 사이를 이어 줘서 마우스를 옮겨도 닫히지 않음 */ .gnb-sub { position: absolute; left: 50%; top: 100%; z-index: 5; padding-top: 24px; opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .25s ease .1s, transform .35s cubic-bezier(.22, .61, .36, 1) .1s, visibility 0s .45s; /* 닫힐 땐 살짝 늦게 → 깜빡임 방지 */ } .gnb-sub ul { position: relative; min-width: 148px; padding: 10px; border-radius: 16px; background: #f7f2f1; /* 따뜻한 흰색 */ box-shadow: 0 24px 48px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .2); } .gnb-sub ul::before { /* 메뉴명을 가리키는 작은 꼭지 */ content: ""; position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px; background: #f7f2f1; border-radius: 2px; transform: rotate(45deg); } .gnb-sub a { position: relative; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 10px; color: #2b2325; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; /* 대비 약 14:1 */ transition: color .2s ease, background-color .2s ease; } .gnb-sub a::before { /* 호버 시 나타나는 코랄 점 — 평소엔 자리 없음(폭 0), 호버 때 펼쳐지며 글자가 살짝 밀림 */ content: ""; width: 0; height: 4px; margin-right: -8px; flex: none; border-radius: 50%; background: #ff5a50; /* 숨김 땐 gap(8px)만큼 당겨 자리 없앰 */ opacity: 0; transition: width .25s cubic-bezier(.22, .61, .36, 1), margin .25s cubic-bezier(.22, .61, .36, 1), opacity .2s ease; } .gnb-item.has-sub:hover > .gnb-sub, .gnb-item.has-sub:focus-within > .gnb-sub, .gnb-item.has-sub.is-open > .gnb-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s; } .gnb-item.has-sub.is-dismissed > .gnb-sub { opacity: 0; visibility: hidden; } /* Esc 로 닫은 직후 */ .gnb-sub a:hover, .gnb-sub a:focus-visible { color: #c8282a; background: #fde8e4; } /* 옅은 코랄 배경 + 붉은 글자 (대비 약 5:1) */ .gnb-sub a:focus-visible { outline-offset: 0; } .gnb-sub a:hover::before, .gnb-sub a:focus-visible::before { width: 4px; margin-right: 0; opacity: 1; } .site-util { display: flex; align-items: center; gap: 24px; } /* 메뉴 버튼 — 호버 시 옆 "제작 문의" 버튼 높이(44px)와 같은 흰색 원 배경이 퍼지고 아이콘은 검정으로 반전 버튼 자체 크기(24px)는 그대로 → 레이아웃·닫기 버튼 위치 영향 없음 */ .site-menu-btn { position: relative; isolation: isolate; display: grid; place-items: center; width: 24px; height: 24px; } .site-menu-btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #f4f0ef; opacity: 0; transform: scale(.4); transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .25s ease; pointer-events: none; } .site-menu-btn img { transition: filter .3s ease; } @media (hover: hover) and (pointer: fine) { .site-menu-btn:hover::before { opacity: 1; transform: none; } .site-menu-btn:hover img { filter: invert(1) brightness(.13); } /* 흰 아이콘 → 거의 검정(#222 톤) */ } .site-menu-btn:focus-visible::before { opacity: 1; transform: none; } .site-menu-btn:focus-visible img { filter: invert(1) brightness(.13); } /* ===================================================================== 전체 메뉴 — 좌: 큰 메뉴 / 우: 회사 정보 + 버튼 (참고 이미지 구조) main.js 가 [hidden] 해제 → .is-open 으로 등장 애니메이션 ===================================================================== */ .site-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: radial-gradient(ellipse 60% 55% at 85% 100%, rgba(120, 18, 22, .22), rgba(10, 5, 6, 0) 70%), #0e0a0b; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .4s ease; } .site-menu[hidden] { display: none; } .site-menu.is-open { opacity: 1; } /* 상단 바: 헤더와 같은 높이·여백 → 로고는 헤더 로고 자리, 닫기 버튼 중심은 메뉴 버튼(24px) 중심과 일치 */ .sm-top { --close: clamp(48px, 3.125vw, 60px); flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 calc(var(--side) - (var(--close) - 24px) / 2 + var(--sbw, 0px)) 0 var(--side); /* --sbw: 메뉴 열 때 사라진 스크롤바 폭 */ border-bottom: 1px solid rgba(255, 255, 255, .08); } .sm-close { display: grid; place-items: center; width: var(--close); height: var(--close); border-radius: 50%; background: #fff; color: #111; transition: transform .4s cubic-bezier(.22, .61, .36, 1), background-color .25s ease; } .sm-close svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .sm-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; column-gap: 40px; width: min(1420px, calc(100% - 48px)); margin: 0 auto; padding: 60px 0; } /* 좌측 큰 메뉴 */ .sm-nav { display: flex; flex-direction: column; align-items: flex-start; } .sm-nav a { display: block; overflow: hidden; padding: .06em 0; font-size: clamp(44px, 3.75vw, 72px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: #4b4547; transition: color .3s ease; } .sm-nav a span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.16, .84, .3, 1); transition-delay: calc(.08s + var(--i) * .07s); } .site-menu.is-open .sm-nav a span { transform: none; } /* 우측 회사 정보 */ .sm-info { opacity: 0; transform: translateY(24px); transition: opacity .7s ease .3s, transform .9s cubic-bezier(.16, .84, .3, 1) .3s; } .site-menu.is-open .sm-info { opacity: 1; transform: none; } .sm-company { color: #ccc; font-size: clamp(18px, 1.042vw, 20px); font-weight: 700; } .sm-contact { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; font-size: 16px; line-height: 1.6; } .sm-contact div { display: flex; gap: 18px; } .sm-contact dt { width: 48px; flex: none; color: #666; } .sm-contact dd { color: #ddd; } .sm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 64px; } .sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #ddd; font-size: 16px; font-weight: 600; transition: border-color .25s ease, background-color .25s ease, color .25s ease; } .sm-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .sm-nav a:hover { color: #fff; } .sm-nav a:hover span { background: var(--grad-text); background-size: 160% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .sm-close:hover { transform: rotate(90deg); } .sm-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .sm-btn:hover { border-color: rgba(255, 90, 80, .7); background: rgba(255, 59, 59, .08); color: #fff; } } /* 메뉴가 열려 있는 동안 뒤 화면 스크롤 잠금 */ html.is-menu-open { overflow: hidden; padding-right: var(--sbw, 0px); } /* 스크롤바가 사라져도 뒤 화면이 밀리지 않게 */ @media (hover: hover) and (pointer: fine) { .gnb-item > a:hover, .gnb-item.has-sub:hover > a { color: #fff; } } /* ===================================================================== HERO — AI × Security (3D는 LIB/JS/hero3d.js) ===================================================================== */ #hero3d { /* 3D 셰이더 색 (hero3d.js가 읽음) */ --h-energy-a: #ff3a2f; --h-energy-b: #ffaa3c; --h-rim-a: #ff4a3d; --h-rim-b: #ff8fb0; --h-accent: #ff3b3b; --h-gutter: max(24px, calc((100% - 1400px) / 2)); --h-stage-h: clamp(300px, 27.083vw, 520px); position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(120, 18, 22, .22), rgba(10, 5, 6, 0) 70%), var(--bg); } #hero3d .hero-ambient { animation-play-state: paused; } #hero3d[data-motion="running"] .hero-ambient { animation-play-state: running; } .hero-shell { width: min(1400px, calc(100% - 48px)); margin: 0 auto; padding-top: clamp(110px, 7.552vw, 145px); } .hero-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #c9b3b2; font-size: 15px; letter-spacing: .02em; } .hero-eyebrow em { font-style: normal; color: #ff5a50; } .hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(255, 90, 80, 0), rgba(255, 90, 80, .7)); } .hero-eyebrow::after { transform: scaleX(-1); } .hero-title { font-size: clamp(40px, 4.167vw, 80px); font-weight: 700; line-height: 1.15; word-break: keep-all; } .hero-lead { color: var(--muted); font-size: clamp(15px, .8855vw, 17px); line-height: 1.4; word-break: keep-all; } /* 그라데이션 글자 — 천천히 흐름 */ .hero-grad { color: var(--white); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero-grad { background: var(--grad-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: hero-title-flow 10s cubic-bezier(.45, 0, .55, 1) infinite alternate; } } @keyframes hero-title-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* 좌(AI) | 축 | 우(Security) */ .hero-duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 5vw, 96px) minmax(0, 1fr); margin-top: 22px; } .hero-card { position: relative; min-width: 0; text-align: center; transition: opacity .4s ease; } @media (hover: hover) and (pointer: fine) { .hero-duo:hover .hero-card:not(:hover) { opacity: .5; } } .hero-axis { position: relative; } .hero-axis::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -34px; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, rgba(255, 80, 70, 0), rgba(255, 80, 70, .38) 22%, rgba(248, 238, 237, .12) 60%, rgba(248, 238, 237, 0)); } .hero-stage { position: relative; isolation: isolate; width: 100%; height: var(--h-stage-h); margin-bottom: -20px; pointer-events: none; } .hero-stage::before { content: ""; position: absolute; inset: 6% 8% 4%; z-index: 0; border-radius: 50%; opacity: .6; filter: blur(44px); background: radial-gradient(ellipse at 50% 50%, var(--glow-a) 0%, var(--glow-b) 34%, rgba(40, 10, 14, .10) 54%, rgba(10, 5, 6, 0) 74%); transition: opacity .45s ease, transform .7s cubic-bezier(.22, .61, .36, 1); } .hero-card:hover .hero-stage::before { opacity: .9; transform: scale(1.08); } .hero-card--ai .hero-stage { --glow-a: rgba(255, 106, 61, .26); --glow-b: rgba(210, 60, 40, .14); } .hero-card--sec .hero-stage { --glow-a: rgba(255, 46, 99, .24); --glow-b: rgba(170, 30, 70, .15); } .hero-dust { position: absolute; inset: 10% 10% 8%; z-index: 0; opacity: .42; background-image: radial-gradient(circle at 14% 30%, rgba(255, 140, 120, .6) 0 1px, transparent 1.7px), radial-gradient(circle at 30% 70%, rgba(255, 90, 80, .45) 0 1px, transparent 1.8px), radial-gradient(circle at 52% 18%, rgba(255, 170, 150, .5) 0 1px, transparent 1.8px), radial-gradient(circle at 70% 76%, rgba(255, 110, 120, .48) 0 1.1px, transparent 1.9px), radial-gradient(circle at 86% 36%, rgba(255, 180, 140, .5) 0 1px, transparent 1.8px); animation: hero-dust 16s ease-in-out infinite alternate; } .hero-card--sec .hero-dust { transform: scaleX(-1); animation-name: hero-dust-m; } @keyframes hero-dust { from { transform: translate3d(-3px, 2px, 0); opacity: .30; } to { transform: translate3d(5px, -4px, 0); opacity: .48; } } @keyframes hero-dust-m { from { transform: scaleX(-1) translate3d(-3px, 2px, 0); opacity: .30; } to { transform: scaleX(-1) translate3d(5px, -4px, 0); opacity: .48; } } .hero-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease, filter .8s cubic-bezier(.22, .61, .36, 1), transform 1s cubic-bezier(.22, .61, .36, 1); will-change: opacity, filter, transform; } .hero-stage.is-webgl .hero-canvas { opacity: 1; } .hero-stage.is-enter .hero-canvas { transition: none; opacity: 0; filter: blur(38px); transform: scale(.9); } .hero-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .hero-card-title { font-size: clamp(52px, 4.167vw, 80px); font-weight: 700; line-height: 1; } .hero-card-desc { margin-top: 16px; color: var(--muted); font-size: clamp(16px, .9375vw, 18px); line-height: 1.4; word-break: keep-all; } .hero-card-body .link-more { margin-top: 32px; } /* 키워드 마키 */ .hero-marquee { position: relative; overflow: hidden; margin: 64px var(--side) 0; height: 68px; display: flex; align-items: center; border-block: 1px solid rgba(255, 255, 255, .2); } .hero-marquee::before, .hero-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .hero-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(10, 5, 6, 0)); } .hero-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(10, 5, 6, 0)); } .hero-marquee-track { display: flex; width: max-content; animation: hero-marquee 60s linear infinite; will-change: transform; } .hero-marquee-group { display: flex; align-items: center; flex: none; } .hero-marquee span { position: relative; display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; color: var(--muted); font-size: 18px; line-height: 1.4; white-space: nowrap; } .hero-marquee span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fc7d75; } @keyframes hero-marquee { to { transform: translate3d(-50%, 0, 0); } } /* 저사양 / 모션 줄이기 */ #hero3d[data-quality="lite"] .hero-dust { display: none; } #hero3d[data-quality="lite"] .hero-stage::before { filter: blur(30px); } /* ===================================================================== FEATURED WORKS — 대칭 회전 카루셀 (카드 4:3) ===================================================================== */ .section-title--works { margin-top: clamp(100px, 8.333vw, 160px); font-weight: 600; color: #e5e5e5; } #works { --u: min(1vw, 2.1vh); /* 기준 단위 (1920에서 19.2px) */ --cw: calc(var(--u) * 13); /* 카드 폭 249.6 */ --ch: calc(var(--cw) * 3 / 4); /* 카드 높이 4:3 → 187.2 */ --r0: calc(var(--u) * 90); /* 회전축 ~ 카드 안쪽 끝 */ --ax-off: calc(var(--u) * 88.8); /* 회전축을 가장자리 밖으로 숨기는 거리 */ --band: calc(var(--r0) + var(--ch) - var(--ax-off) + var(--u) * 1.2); --edge-fade: calc(var(--u) * 2.5); /* 축 쪽 페이드 48 */ --side-fade: calc(var(--u) * 4); /* 좌우 여백 경계 페이드 77 */ --gap: calc(var(--u) * 5); /* 카드 영역 ~ 가운데 문구 96 */ position: relative; z-index: 1; /* Services 그라데이션이 이 영역 뒤로 깔림 */ margin-top: clamp(32px, 3.125vw, 60px); background: transparent; } #works .wk-band { position: relative; height: var(--band); overflow: hidden; margin-inline: var(--side); touch-action: pan-y; user-select: none; -webkit-user-select: none; pointer-events: none; -webkit-mask-composite: source-in; mask-composite: intersect; } #works .wk-band .wk-card { pointer-events: auto; cursor: grab; } #works .wk-band.is-dragging .wk-card { cursor: grabbing; } #works .wk-band--top { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge-fade)), linear-gradient(90deg, transparent 0, #000 var(--side-fade), #000 calc(100% - var(--side-fade)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge-fade)), linear-gradient(90deg, transparent 0, #000 var(--side-fade), #000 calc(100% - var(--side-fade)), transparent 100%); } #works .wk-band--bottom { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 var(--edge-fade)), linear-gradient(90deg, transparent 0, #000 var(--side-fade), #000 calc(100% - var(--side-fade)), transparent 100%); mask-image: linear-gradient(0deg, transparent 0, #000 var(--edge-fade)), linear-gradient(90deg, transparent 0, #000 var(--side-fade), #000 calc(100% - var(--side-fade)), transparent 100%); } #works .wk-wheel { position: absolute; width: 0; height: 0; will-change: transform; } #works .wk-band--top .wk-wheel { left: 50%; top: calc(-1 * var(--ax-off)); } #works .wk-band--bottom .wk-wheel { left: 50%; top: calc(100% + var(--ax-off)); } #works .wk-slot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a)); } #works .wk-card { position: absolute; left: calc(var(--cw) / -2); width: var(--cw); height: var(--ch); border-radius: clamp(8px, .625vw, 12px); overflow: hidden; background: #1a1113; box-shadow: 0 1.2vw 2.6vw rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 235, 232, .08); filter: brightness(.86) saturate(.95); -webkit-user-drag: none; transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, filter .35s ease; } #works .wk-band--top .wk-card { top: var(--r0); } #works .wk-band--bottom .wk-card { top: calc(-1 * (var(--r0) + var(--ch))); } #works .wk-card.is-active { filter: none; box-shadow: 0 1.2vw 2.8vw rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 90, 80, .55), 0 0 2.4vw rgba(255, 58, 47, .22); } @media (hover: hover) and (pointer: fine) { #works .wk-card:hover { filter: none; } #works .wk-band--top .wk-card:hover { transform: translateY(1rem) scale(1.05); } #works .wk-band--bottom .wk-card:hover { transform: translateY(-1rem) scale(1.05); } } #works .wk-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; } #works .wk-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: clamp(4px, .417vw, 8px); padding: clamp(24px, 2.083vw, 40px) clamp(10px, .833vw, 16px) clamp(10px, .833vw, 16px); background: linear-gradient(180deg, rgba(10, 5, 6, 0) 0%, rgba(10, 5, 6, .78) 52%, rgba(10, 5, 6, .94) 100%); } #works .wk-cap b, #works .wk-cap span { display: block; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #works .wk-cap b { color: #fff; font-size: clamp(12px, .8334vw, 16px); font-weight: 600; letter-spacing: -.02em; } #works .wk-cap span { color: #d8c3c2; font-size: clamp(10px, .625vw, 12px); letter-spacing: -.02em; } #works .wk-center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 32px; width: min(520px, 86vw); margin: var(--gap) auto; text-align: center; pointer-events: none; } #works .wk-center > * { pointer-events: auto; } #works .wk-desc { color: var(--muted); font-size: clamp(15px, .9375vw, 18px); line-height: 1.4; word-break: keep-all; } /* ===================================================================== OUR SERVICES — 상단 돔 + 바깥쪽 노을 그라데이션 (위 섹션 뒤까지 올라감) ===================================================================== */ #services { --sv-page: #0a0506; --sv-c-left: #4a1228; --sv-c-mid: #2c0b18; --sv-c-right: #3e1035; --sv-warm: 255, 112, 70; --sv-red: 255, 46, 99; --sv-curve: clamp(120px, 14vw, 268.8px); /* 돔 곡률 */ --sv-sky: clamp(160px, 15.625vw, 300px); /* 섹션 상단 ~ 돔 꼭대기 */ --sv-reach: clamp(220px, 19.375vw, 372px); /* 그라데이션이 위 섹션 뒤로 올라가는 길이 */ --sv-strength: .6; position: relative; isolation: isolate; margin-top: calc(-1 * clamp(80px, 8.333vw, 160px)); /* 시안: WORKS 끝과 160 겹침 */ padding: calc(var(--sv-sky) + var(--sv-curve) * .75 + 18px) 0 clamp(140px, 16.667vw, 320px); } #services .sv-bg { position: absolute; inset: calc(var(--sv-reach) * -1) 0 0; z-index: -1; overflow: hidden; pointer-events: none; } #services .sv-sky { --sv-top: calc(var(--sv-reach) + var(--sv-sky)); position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sv-top) + var(--sv-curve) + 40px); background: radial-gradient(46% calc(var(--sv-top) * .8) at 50% calc(var(--sv-top) + 10px), rgba(var(--sv-warm), .62) 0%, rgba(var(--sv-red), .32) 32%, rgba(var(--sv-red), .1) 58%, rgba(var(--sv-red), 0) 82%), radial-gradient(90% var(--sv-top) at 50% calc(var(--sv-top) + var(--sv-curve) * .5), rgba(var(--sv-red), .28) 0%, rgba(var(--sv-red), .1) 50%, rgba(var(--sv-red), 0) 88%), linear-gradient(90deg, var(--sv-c-left) 0%, var(--sv-c-mid) 50%, var(--sv-c-right) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.32) 48%, rgba(0,0,0,.62) 66%, #000 86%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.32) 48%, rgba(0,0,0,.62) 66%, #000 86%); opacity: 0; transform: translateY(40px); transition: opacity 1.4s ease .1s, transform 1.8s cubic-bezier(.16, .84, .3, 1); } #services .sv-sky::after { /* 필름 그레인 */ content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #services .sv-round { position: absolute; top: calc(var(--sv-reach) + var(--sv-sky)); left: 50%; width: 150vw; height: calc(100% - var(--sv-reach) - var(--sv-sky) + 300px); border-radius: 50% 50% 0 0 / var(--sv-curve) var(--sv-curve) 0 0; background: var(--sv-page); box-shadow: 0 0 50px 4px rgba(var(--sv-warm), .15), 0 0 160px 30px rgba(var(--sv-red), .09); transform: translate(-50%, 90px) scaleX(.82); transform-origin: 50% 0; transition: transform 1.6s cubic-bezier(.16, .84, .3, 1); } #services.is-in .sv-sky { opacity: var(--sv-strength); transform: none; } #services.is-in .sv-round { transform: translate(-50%, 0) scaleX(1); } #services .sv-inner { margin: 0 var(--side); } #services .sv-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 3.125vw, 60px); } #services .sv-card { display: flex; align-items: center; gap: 20px; padding: clamp(28px, 2.083vw, 40px) 20px; border-radius: 18px; background: #15151a; border: 1px solid rgba(255, 240, 238, .08); transition: border-color .25s ease, background-color .25s ease, transform .25s ease, opacity .9s ease; } #services .sv-card.is-in { transition: border-color .25s ease, background-color .25s ease, transform .25s ease, opacity .9s ease; } /* 상단 메뉴(Solution 하위)로 이동했을 때 해당 카드를 잠깐 강조 */ #services .sv-card.is-target { border-color: rgba(255, 90, 80, .7); background: #23171c; animation: sv-target 1.1s ease-in-out 2; } @keyframes sv-target { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 80, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 90, 80, .18); } } #services .sv-icon { flex: none; width: clamp(64px, 5vw, 96px); height: auto; transition: transform .45s cubic-bezier(.22, .61, .36, 1); } #services .sv-text { min-width: 0; display: flex; flex-direction: column; gap: 8px; } #services .sv-text h3 { color: var(--white); font-size: clamp(18px, 1.146vw, 22px); font-weight: 600; line-height: 1.4; } #services .sv-text p { color: #9d8a8a; font-size: clamp(14px, .8334vw, 16px); line-height: 1.4; word-break: keep-all; } /* 넓은 화면: 시안처럼 지정한 줄바꿈(
)에서만 줄을 바꿈 (스크롤바 폭 때문에 3줄로 넘어가는 것 방지) */ @media (min-width: 1800px) { #services .sv-text p { white-space: nowrap; } } @media (hover: hover) and (pointer: fine) { #services .sv-card:hover { border-color: rgba(255, 90, 80, .45); background: #23171c; transform: translateY(-3px); } #services .sv-card:hover .sv-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); } } /* ===================================================================== OUR PARTNER — .rb-section.panel-box 바로 위 Services 가 화면에 고정되고, 이 흰색 패널이 위로 덮으며 올라옴 (main.js) ===================================================================== */ .rb-section.panel-box { position: relative; z-index: 2; margin: 0 clamp(10px, 1.042vw, 20px); border-radius: clamp(40px, 6.25vw, 120px); background: #e5e5e5; box-shadow: 0 -24px 80px rgba(0, 0, 0, .45); } .partner { padding: clamp(72px, 6.25vw, 120px) clamp(24px, 8.333vw, 160px); } .partner-list { display: grid; grid-template-columns: repeat(6, minmax(0, 160px)); justify-content: space-between; align-items: center; row-gap: clamp(36px, 3.125vw, 60px); margin-top: clamp(56px, 5.208vw, 100px); } .partner-list li { display: flex; justify-content: center; align-items: center; min-height: clamp(36px, 2.217vw, 42.56px); } /* 시안 로고 행 높이 */ .partner-list img { width: 160px; height: auto; transition: transform .3s ease; } @media (hover: hover) and (pointer: fine) { .partner-list img:hover { transform: scale(1.06); } } /* ===================================================================== CONSULTING — 배경 영상 (35%) ===================================================================== */ #consulting { position: relative; z-index: 2; background: var(--bg); overflow: hidden; padding: clamp(96px, 8.333vw, 160px) 24px clamp(110px, 12.5vw, 240px); text-align: center; /* 위 160 = 다른 영역 간격과 동일 */ } #consulting .cs-video { position: absolute; z-index: 0; left: 50%; top: clamp(56px, 6.25vw, 120px); /* 제목보다 살짝 위에서 시작 */ width: min(1431px, 74.537vw); aspect-ratio: 16 / 9; transform: translateX(-50%); object-fit: cover; pointer-events: none; mix-blend-mode: screen; /* 투명도는 영상 파일에 적용됨 · screen: 영상의 검정 배경이 페이지 배경에 녹아듦 (사각 테두리 안 보임) */ } #consulting .section-title, #consulting .cs-content { position: relative; z-index: 1; } #consulting .cs-content { display: flex; flex-direction: column; align-items: center; margin-top: clamp(56px, 5.417vw, 104px); } /* 영상 가운데에 오도록 */ #consulting .cs-head { font-size: clamp(40px, 4.167vw, 80px); font-weight: 700; line-height: 1.2; color: #fff; word-break: keep-all; } #consulting .cs-sub { margin-top: 20px; font-size: clamp(15px, .8855vw, 17px); font-weight: 400; line-height: 1.4; color: #fff; word-break: keep-all; } #consulting .btn-pill { margin-top: clamp(40px, 4.167vw, 80px); } /* ===================================================================== FOOTER ===================================================================== */ .site-footer { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: clamp(40px, 5.208vw, 100px); padding: 80px var(--side); background: #111; } .site-footer .site-logo { flex: none; } .ft-body { flex: 1; display: flex; flex-direction: column; gap: 80px; min-width: 0; font-size: 15px; line-height: 1; } .ft-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; } .ft-info { display: flex; flex-direction: column; gap: 20px; } .ft-info div { display: flex; gap: 16px; } .ft-info dt, .ft-dns dt { width: 56px; flex: none; color: #666; } .ft-info dd { color: #fff; } .ft-side { display: flex; flex-direction: column; align-items: flex-end; gap: 48px; } .ft-dns { display: flex; gap: 24px; } .ft-dns dd { display: flex; flex-direction: column; gap: 16px; color: #fff; } .ft-dns dd div { display: flex; gap: 16px; white-space: nowrap; } .ft-dns dd span { width: 56px; flex: none; } .ft-sns { display: flex; gap: 24px; } .ft-sns a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50px; transition: background-color .2s ease; } .ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ft-links { display: flex; gap: 70px; color: #fff; } .ft-copy { color: #aaa; font-size: 14px; } @media (hover: hover) and (pointer: fine) { .ft-links a:hover, .ft-info a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .ft-sns a:hover { background: rgba(255, 255, 255, .08); } } /* ===================================================================== 플로팅 버튼 — 좌측 중앙: AI 상담 / 우측 하단: TOP 모양: 모서리를 크게 둥글린 정사각형을 45° 돌린 부드러운 다이아몬드 (참고 이미지) 바탕(::before)만 돌리고 글자·아이콘은 똑바로 둠 ===================================================================== */ .fab { --fab: clamp(64px, 3.958vw, 76px); position: fixed; right: clamp(16px, 2.083vw, 40px); z-index: 90; isolation: isolate; width: var(--fab); height: var(--fab); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .35s ease, visibility .35s; } .fab::before { content: ""; position: absolute; z-index: -1; inset: 4.5%; /* 돌렸을 때 버튼 크기에 꼭 맞도록 */ border-radius: 38%; transform: rotate(45deg); transition: box-shadow .35s ease, background-color .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1); } .fab-label { font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .04em; } /* AI 상담 — 귀여운 로봇 캐릭터 + 옆 말풍선 */ .fab--ai { bottom: clamp(16px, 2.083vw, 40px); } /* 오른쪽 아래 (TOP 은 이 위) */ .fab--ai::before { /* 챗봇 창이 열렸을 때만 보이는 X 배경 */ background: linear-gradient(95deg, #ff8a74 0%, #ff5a50 45%, #f2547d 100%); box-shadow: 0 10px 28px rgba(255, 70, 80, .38), inset 0 1px 0 rgba(255, 255, 255, .35); opacity: 0; transform: rotate(45deg) scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.22, .61, .36, 1); } .fab--ai[aria-expanded="true"]::before { opacity: 1; transform: rotate(45deg); } .fab-robot { /* 말풍선 로봇 */ width: 106%; height: auto; overflow: visible; filter: drop-shadow(0 10px 16px rgba(255, 70, 80, .4)); /* 95% 크기 */ animation: fab-float 3.2s ease-in-out infinite; } @keyframes fab-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } } .fab-robot-eyes { transform-box: fill-box; transform-origin: center; animation: fab-blink 4.2s infinite; } @keyframes fab-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } } .fab-robot-light { animation: fab-light 1.6s ease-in-out infinite; } @keyframes fab-light { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .fab-ai-tip { /* AI 버튼 왼쪽 말풍선 (흰 배경 · 미니멀) */ --fab-x: clamp(16px, 2.083vw, 40px); --fab: clamp(64px, 3.958vw, 76px); position: fixed; z-index: 90; right: calc(var(--fab-x) + var(--fab) + 14px); bottom: calc(var(--fab-x) + var(--fab) / 2); display: flex; align-items: center; gap: 4px; padding: 0 6px 0 16px; height: 36px; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .04); transform: translateY(50%); transform-origin: 100% 50%; animation: fab-tip-in .6s cubic-bezier(.34, 1.4, .64, 1) 1s both; transition: opacity .25s ease, visibility .25s, translate .25s ease; } .fab-ai-tip[hidden] { display: none; } .fab-ai-tip::after { /* 꼬리 — 오른쪽(로봇 쪽)으로 길게 뻗은 뾰족한 삼각형 */ content: ""; position: absolute; right: -8px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); } .fab-ai-tip-text { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: #2b2325; font-size: 12px; font-weight: 500; white-space: nowrap; } .fab-ai-tip-text i { width: 4px; height: 4px; border-radius: 50%; background: #ff5a50; animation: fab-light 1.6s ease-in-out infinite; } .fab-ai-tip-close { /* 말풍선 안쪽 닫기 */ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #a39a9c; /* 말풍선 높이 36 에 맞춤 */ transition: background-color .2s ease, color .2s ease; } .fab-ai-tip-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @keyframes fab-tip-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } } .fab--ai[aria-expanded="true"] + .fab-ai-tip { opacity: 0; visibility: hidden; translate: 8px 0; animation: none; } /* 챗봇 창이 열리면 숨김 */ @media (hover: hover) and (pointer: fine) { .fab-ai-tip-text:hover { color: #e0463d; } .fab-ai-tip-close:hover { background: #f4f0ef; color: #1c1416; } } /* TOP — 글래스(블러). 어두운 영역·흰 패널 위 모두 읽히도록 어두운 반투명 */ .fab--top { bottom: calc(clamp(16px, 2.083vw, 40px) + var(--fab) + 24px); /* AI 상담 버튼 위 (간격 24) */ gap: 5px; /* 화살표 ~ TOP 간격 (기본 3px + 2px) */ opacity: 0; visibility: hidden; transform: translateY(12px); /* 스크롤하면 나타남 (main.js) */ } .fab--top::before { background-color: rgba(28, 16, 18, .38); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18); } .fab--top.is-visible { opacity: 1; visibility: visible; transform: none; } .fab-arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; /* 24 단위 viewBox를 20px로 그림 → 화면상 1.5px */ stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; } @media (hover: hover) and (pointer: fine) { .fab:hover::before { transform: rotate(45deg) scale(1.07); } .fab--ai:hover .fab-robot { rotate: -8deg; scale: 1.06; } /* 갸웃 */ .fab--top:hover::before { background-color: rgba(28, 16, 18, .5); } .fab--top:hover .fab-arrow { transform: translateY(-3px); } } /* 챗봇 창이 열려 있을 때 AI 버튼 — 로봇이 X(닫기)로 바뀜 */ .fab--ai { display: grid; grid-template: 100% / 100%; place-items: center; } /* 칸을 버튼 크기로 고정 — 로봇이 커도 X 가 가운데 */ .fab--ai > svg { grid-area: 1 / 1; transition: opacity .3s ease, scale .4s cubic-bezier(.22, .61, .36, 1), rotate .4s cubic-bezier(.22, .61, .36, 1); } .fab-x { width: 46%; height: auto; overflow: visible; fill: none; stroke: #fff; stroke-width: 1.5; /* 1.5px 선 */ stroke-linecap: round; opacity: 0; scale: .5; rotate: -90deg; } .fab-x path { vector-effect: non-scaling-stroke; } /* 크기와 상관없이 선 굵기 1.5px 유지 */ .fab--ai[aria-expanded="true"] .fab-robot { opacity: 0; scale: .5; animation-play-state: paused; } .fab--ai[aria-expanded="true"] .fab-x { opacity: 1; scale: 1; rotate: 0deg; } /* ===================================================================== AI 상담 챗봇 창 — AI 버튼(좌측 중앙) 오른쪽에서 열림 / 모바일은 아래에서 올라오는 시트 내용은 외부 챗봇(iframe). 처음 열 때 불러옴 (main.js) ===================================================================== */ .ai-chat { --fab-x: clamp(16px, 2.083vw, 40px); --fab: clamp(64px, 3.958vw, 76px); position: fixed; z-index: 150; right: calc(var(--fab-x) + var(--fab) + 16px); bottom: var(--fab-x); /* AI 버튼 왼쪽, 아래 맞춤 */ width: min(390px, calc(100vw - var(--fab-x) - var(--fab) - 32px)); height: min(680px, calc(100vh - 160px)); min-height: 360px; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; transform: translateX(14px) scale(.97); transform-origin: 100% 100%; transition: opacity .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1); } .ai-chat[hidden] { display: none; } .ai-chat.is-open { opacity: 1; transform: none; } .ai-chat-frame { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; } .ai-chat-close { /* 창 바깥 오른쪽 위 — 챗봇 자체 버튼(채팅 초기화 등)을 가리지 않음 */ position: absolute; z-index: 2; top: 0; right: -46px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1c1416; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .2s ease; } .ai-chat-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .ai-chat-loading { /* 챗봇을 불러오는 동안 */ position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 6px; } .ai-chat-loading span { width: 8px; height: 8px; border-radius: 50%; background: #ff5a50; animation: ai-chat-dot 1s ease-in-out infinite; } .ai-chat-loading span:nth-child(2) { animation-delay: .15s; } .ai-chat-loading span:nth-child(3) { animation-delay: .3s; } .ai-chat.is-loaded .ai-chat-loading { display: none; } @media (min-width: 481px) { .ai-chat-close { display: none; } /* 데스크톱은 AI 버튼(X)으로 닫음 — 모바일은 시트가 버튼을 가려서 유지 */ } @keyframes ai-chat-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } } @media (hover: hover) and (pointer: fine) { .ai-chat-close:hover { transform: rotate(90deg); background: #ff5a50; } } /* ===================================================================== 서브페이지 공통 (include/renewal/sub-visual.php) ===================================================================== */ /* 현재 페이지 메뉴 표시 */ .gnb-item.is-current > a { color: #fff; } .gnb-item.is-current > a::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #ff5a50; } .gnb-sub a[aria-current="page"] { color: #c8282a; background: #fde8e4; } .gnb-sub a[aria-current="page"]::before { width: 4px; margin-right: 0; opacity: 1; } .sm-nav a[aria-current="page"] { color: #fff; } .sub-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--header-h) + clamp(64px, 6.25vw, 120px)) var(--side) clamp(56px, 4.167vw, 80px); } .sub-hero-bg { /* 메인 히어로와 같은 붉은 빛 */ position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 0%, rgba(255, 90, 80, .22) 0%, rgba(255, 90, 80, 0) 70%), radial-gradient(40% 50% at 85% 20%, rgba(242, 84, 125, .12) 0%, rgba(242, 84, 125, 0) 70%); } .sub-hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); } .sub-title { font-size: clamp(40px, 4.167vw, 80px); font-weight: 700; line-height: 1.15; word-break: keep-all; } .sub-lead { margin-top: 24px; color: var(--muted); font-size: 17px; line-height: 1.6; word-break: keep-all; } /* Solution — 메인 Our Services 와 같은 노을 그라데이션 + 아래쪽 돔 (변수 · 색은 #services 와 동일) 처음 열 때: 화면 전체가 그라데이션 → 검은 돔이 아래에서 올라와 자리를 잡고 → 그라데이션이 위쪽만 남도록 옅어짐 */ .sub-hero--sky { --sv-page: #0a0506; --sv-c-left: #4a1228; --sv-c-mid: #2c0b18; --sv-c-right: #3e1035; --sv-warm: 255, 112, 70; --sv-red: 255, 46, 99; --sv-curve: clamp(90px, 9vw, 180px); /* 돔 곡률 */ --sv-dome: clamp(56px, 5.208vw, 100px); /* 히어로 아래 끝 ~ 돔 꼭대기 */ --sv-ease: cubic-bezier(.16, .84, .3, 1); overflow: visible; /* 등장할 때 그라데이션이 화면 아래까지 보이도록 */ padding-bottom: calc(var(--sv-dome) + clamp(48px, 3.75vw, 72px)); } .sub-hero--sky ~ * { position: relative; } /* 아래 콘텐츠가 올라오는 돔보다 위에 보이도록 */ .sub-hero--sky .sub-hero-bg { bottom: auto; height: calc(100% + 100vh); overflow: hidden; background: none; } .sub-hero--sky .sub-hero-bg::after { display: none; } .sub-hero--sky .sub-hero-bg::before { /* 등장용: 화면 전체를 덮는 그라데이션 */ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 62%, rgba(var(--sv-warm), .5) 0%, rgba(var(--sv-red), .26) 40%, rgba(var(--sv-red), 0) 80%), linear-gradient(90deg, var(--sv-c-left) 0%, var(--sv-c-mid) 50%, var(--sv-c-right) 100%); opacity: 0; animation: sub-intro-fade 1.1s ease 1.15s both; } .sub-sky { --sv-top: calc(100% - var(--sv-dome)); position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 100vh); /* 히어로 높이만큼 */ background: radial-gradient(46% 70% at 50% calc(var(--sv-top) + 10px), rgba(var(--sv-warm), .62) 0%, rgba(var(--sv-red), .32) 32%, rgba(var(--sv-red), .1) 58%, rgba(var(--sv-red), 0) 82%), radial-gradient(90% 90% at 50% 100%, rgba(var(--sv-red), .28) 0%, rgba(var(--sv-red), .1) 50%, rgba(var(--sv-red), 0) 88%), linear-gradient(90deg, var(--sv-c-left) 0%, var(--sv-c-mid) 50%, var(--sv-c-right) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.32) 48%, rgba(0,0,0,.62) 66%, #000 86%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.32) 48%, rgba(0,0,0,.62) 66%, #000 86%); opacity: .6; animation: sub-sky-in 1.1s ease 1.15s both; /* 등장용 그라데이션이 옅어지는 동안 나타남 */ } .sub-sky::after { /* 필름 그레인 (메인과 동일) */ content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .sub-round { /* 검은 돔 — 아래 콘텐츠 영역까지 덮을 만큼 길게 */ position: absolute; z-index: 1; top: calc(100% - 100vh - var(--sv-dome)); left: 50%; width: 150vw; height: calc(100vh + var(--sv-dome) + 40px); border-radius: 50% 50% 0 0 / var(--sv-curve) var(--sv-curve) 0 0; background: var(--sv-page); box-shadow: 0 0 50px 4px rgba(var(--sv-warm), .15), 0 0 160px 30px rgba(var(--sv-red), .09); transform: translateX(-50%) scaleX(.82); transform-origin: 50% 0; animation: sub-dome-rise 1.5s var(--sv-ease) .3s both; } @keyframes sub-intro-fade { from { opacity: 1; } to { opacity: 0; } } @keyframes sub-sky-in { from { opacity: 0; } to { opacity: .6; } } @keyframes sub-dome-rise { from { translate: 0 100vh; } to { translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .sub-hero--sky .sub-hero-bg::before { display: none; } .sub-round, .sub-sky { animation: none; } } /* 같은 메뉴의 페이지 탭 */ .sub-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(40px, 3.333vw, 64px); } .sub-tabs a { display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: #cbb9b8; font-size: 16px; font-weight: 500; transition: color .2s ease, background-color .2s ease, border-color .2s ease; } .sub-tabs a[aria-current="page"] { border-color: transparent; background: #f7f2f1; color: #1c1416; } /* 3단계 탭 — 한 단계 아래라 더 가볍게 */ .sub-tabs--leaf { /* 선택된 메뉴 바로 아래에 정렬 — 위치는 main.js 가 --leaf-x 로 맞춤 */ gap: 4px 28px; margin-top: 16px; transform: translateX(var(--leaf-x, 0px)); } .sub-tabs--leaf a { position: relative; height: 36px; padding: 0; border: 0; border-radius: 0; color: #8f7c7d; font-size: 15px; } .sub-tabs--leaf a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: #ff5a50; transform: scaleX(0); transition: transform .3s ease; } .sub-tabs--leaf a[aria-current="page"] { background: none; color: #fff; } .sub-tabs--leaf a[aria-current="page"]::after { transform: none; } @media (hover: hover) and (pointer: fine) { .sub-tabs a:not([aria-current="page"]):hover { color: #fff; border-color: rgba(255, 255, 255, .4); } .sub-tabs--leaf a:not([aria-current="page"]):hover { color: #fff; } } /* ===================================================================== 서브페이지 본문 섹션 (include/renewal/sections.php) ===================================================================== */ :root { --ss-space: clamp(80px, 8.333vw, 160px); } /* 서브페이지 영역 간격 — 메인과 같은 160 */ .ss { --ss-gap: clamp(40px, 3.333vw, 64px); padding: var(--ss-space) var(--side) 0; } .sub-hero--sky + .ss { padding-top: clamp(40px, 3.333vw, 64px); } /* 돔 곡선 아래는 시각적으로 멀어 보여서 좁힘 (돔 꼭대기 ~ 제목 약 160) */ .ss:last-child { padding-bottom: var(--ss-space); } /* Works · About · Contact 본문은 위아래 80 (좌우는 그대로) — Solution 페이지(.sol-page)는 제외 */ body:not(.sol-page) .sub-main .ss, body:not(.sol-page) .sub-main .ss:last-child { padding-top: 80px; padding-bottom: 80px; } body:not(.sol-page) .sub-main .ss-light + .ss { padding-top: var(--ss-space); } /* 흰 패널 다음 영역은 영역 간격(160)과 같게 */ body:not(.sol-page) .sub-main .ss + .ss-light { margin-top: calc(var(--ss-space) - 80px); } /* 앞 영역 아래 여백 80 + 이 값 = 160 */ .ss-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 56px; text-align: center; } .ss-title { font-size: clamp(28px, 2.083vw, 40px); font-weight: 700; line-height: 1.3; word-break: keep-all; } .ss-desc { color: var(--muted); font-size: 16px; line-height: 1.4; word-break: keep-all; } .ss-icon { display: grid; place-items: center; flex: none; } .ss-icon img { width: 100%; height: 100%; object-fit: contain; } .ss h3 { font-size: clamp(17px, 1.042vw, 20px); font-weight: 700; line-height: 1.4; word-break: keep-all; } .ss li p { color: var(--muted); font-size: 15px; line-height: 1.4; word-break: keep-all; } /* 큰 번호 (AI 서비스 페이지) */ .ss-no { margin-bottom: 18px; font-size: clamp(36px, 2.5vw, 48px); font-weight: 700; line-height: 1; color: #ff5a50; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .ss-no { background: var(--grad-pill); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } .ss-feature-text { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; } /* 흰 패널 — 유형 · 제작 과정 · 사례 (메인 Our Partner 와 같은 패널) */ .ss-light { position: relative; z-index: 1; margin: var(--ss-space) clamp(10px, 1.042vw, 20px) 0; border-radius: clamp(40px, 6.25vw, 120px) clamp(40px, 6.25vw, 120px) 0 0; background: #e5e5e5; color: #222; } .ss-light .ss-desc, .ss-light li p { color: #6b6264; } .ss-light .ss:first-child { padding-top: clamp(72px, 6.25vw, 120px); } @media (max-width: 768px) { .ss-no { margin-bottom: 6px; } } /* ===================================================================== Solution 서브페이지 — 레이아웃 (include/renewal/sections.php) · 페이지별 포인트 컬러 (config.php $solutionAccent) ===================================================================== */ /* ---------- A. 페이지별 포인트 컬러 ---------- */ :root { --ac: #ff5a50; --ac-2: #ff9a8f; --ac-rgb: 255, 90, 80; --ac-2-rgb: 255, 154, 143; } /* 기본값 (포인트 컬러가 없는 페이지) */ .sol-accent-violet { --ac: #6b3dff; --ac-2: #c4b2ff; --ac-rgb: 107, 61, 255; --ac-2-rgb: 196, 178, 255; } .sol-accent-blue { --ac: #2a5cff; --ac-2: #8fb8ff; --ac-rgb: 42, 92, 255; --ac-2-rgb: 143, 184, 255; } .sol-accent-teal { --ac: #00b08a; --ac-2: #7ff0d0; --ac-rgb: 0, 176, 138; --ac-2-rgb: 127, 240, 208; } .sol-accent-orange { --ac: #ff5a00; --ac-2: #ffad66; --ac-rgb: 255, 90, 0; --ac-2-rgb: 255, 173, 102; } .sol-accent-lilac { --ac: #9a7bff; --ac-2: #eee6ff; --ac-rgb: 154, 123, 255; --ac-2-rgb: 238, 230, 255; } .sol-accent-pink { --ac: #ff1f8a; --ac-2: #ff8cc6; --ac-rgb: 255, 31, 138; --ac-2-rgb: 255, 140, 198; } .sol-accent-yellow { --ac: #ffa800; --ac-2: #ffef5c; --ac-rgb: 255, 168, 0; --ac-2-rgb: 255, 239, 92; } /* 상단 노을: 가운데 빛은 포인트 컬러, 양옆은 기존 붉은 보라 톤 유지 → 브랜드 톤은 지키면서 페이지마다 다르게 */ .sol-page .sub-hero--sky { --sv-warm: var(--ac-2-rgb); --sv-red: var(--ac-rgb); } .sol-page .sub-tabs--leaf a::after { background: var(--ac); } .sol-page .gnb-item.is-current > a::after { background: var(--ac); } .sol-eyebrow { margin-bottom: -8px; color: var(--ac-2); font-size: 11px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; } /* 제목과 8px (ss-head gap 16 - 8) */ .ss-light .sol-eyebrow { color: var(--ac); } .sol-page .ss-head { align-items: center; } .sol-page .sol-head-left { align-items: flex-start; text-align: left; } .sol-page .ss-light { border-radius: clamp(40px, 6.25vw, 120px); } /* 유형 패널 — 네 모서리 모두 라운드 */ /* ---------- B. 문제점 — 왼쪽 고정 제목 + 번호 리스트 ---------- */ .sol-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 5.208vw, 100px); align-items: start; } .sol-sticky { position: sticky; top: calc(var(--header-h) + 48px); } .sol-sticky .ss-head { margin-bottom: 0; } .sol-issue-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .1); } .sol-issue-list li { display: grid; grid-template-columns: clamp(72px, 6.25vw, 120px) minmax(0, 1fr); gap: 24px; padding: clamp(28px, 2.083vw, 40px) 0; border-top: 1px solid rgba(255, 255, 255, .1); } .sol-no { font-size: clamp(40px, 2.917vw, 56px); font-weight: 700; line-height: 1; color: var(--ac-2); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .sol-no { background: linear-gradient(160deg, var(--ac-2), var(--ac)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } .sol-issue-list h3 { margin-bottom: 10px; font-size: clamp(19px, 1.25vw, 24px); } /* ---------- C. 서비스 소개 — 같은 크기의 세로 카드 (사진 위에 글) ---------- */ .sol-cards { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; } .sol-cards li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; border-radius: 20px; background: #1c1416; } .sol-cards figure { position: absolute; inset: 0; z-index: -1; } .sol-cards figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 5, 6, 0) 35%, rgba(10, 5, 6, .92) 100%); } .sol-cards img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, .84, .3, 1); } .sol-cards .ss-feature-text { padding: 0 20px 22px; } .sol-cards h3 { color: #fff; } .sol-cards li p { color: #d6c4c3; } @media (hover: hover) and (pointer: fine) { .sol-cards li:hover img { transform: scale(1.06); } } /* ---------- D. AI 확장 — 그라데이션 패널 ---------- */ .sol-ai { padding-left: 0; padding-right: 0; } .sol-ai-panel { /* 화면 가로 전체를 채우는 그라데이션 띠 — 위아래에 빛 테두리 */ position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 5.208vw, 100px) var(--side); border-top: 1px solid transparent; border-bottom: 1px solid transparent; background: radial-gradient(45% 90% at 10% 0%, rgba(var(--ac-rgb), .28), rgba(var(--ac-rgb), 0) 70%) padding-box, radial-gradient(40% 80% at 90% 100%, rgba(255, 90, 80, .18), rgba(255, 90, 80, 0) 70%) padding-box, linear-gradient(#120a0d, #120a0d) padding-box, linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(var(--ac-2-rgb), .7) 30%, rgba(255, 90, 80, .45) 70%, rgba(255, 255, 255, .04)) border-box; } .sol-ai-inner { /* 내용은 가운데 1585px 안에 */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; gap: clamp(32px, 4.167vw, 80px); /* 오른쪽 카드 영역 넓게 */ max-width: 1585px; margin: 0 auto; } .sol-ai-inner .ss-head { margin-bottom: 0; } .sol-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sol-ai-grid li { display: flex; align-items: center; gap: 16px; padding: 20px 28px 20px 16px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); } .sol-ai-grid img { flex: none; width: 76px; height: 76px; } .sol-ai-grid li p { color: var(--white); font-size: 20px; font-weight: 500; line-height: 1.4; } /* ---------- E. 적합한 조직 — 흐르는 띠 ---------- */ .sol-targets { padding-left: 0; padding-right: 0; } .sol-targets .ss-head { padding: 0 var(--side); } .sol-marquee { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .sol-marquee-track { display: flex; width: max-content; animation: sol-marquee 40s linear infinite; } .sol-marquee ul { display: flex; gap: 16px; padding-right: 16px; } .sol-marquee li { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px 16px 22px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); white-space: nowrap; font-size: clamp(16px, 1.042vw, 20px); font-weight: 500; } .sol-org { /* 선 아이콘 (org-0N.svg) 모양대로 잘라 페이지 포인트 컬러 그라데이션을 채움 */ flex: none; width: 32px; height: 32px; background: linear-gradient(180deg, var(--ac), var(--ac-2)); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } @keyframes sol-marquee { to { transform: translateX(-50%); } } @media (hover: hover) and (pointer: fine) { .sol-marquee:hover .sol-marquee-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .sol-marquee-track { animation: none; } } /* ---------- F. 유형 — 구분선 격자 ---------- */ .sol-type-grid { --line: 1px solid rgba(0, 0, 0, .12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--line); } .sol-type-grid li { display: flex; align-items: center; gap: 20px; padding: clamp(28px, 2.5vw, 48px) clamp(24px, 2.083vw, 40px); border-bottom: var(--line); } /* 세로선: 줄 첫 칸을 뺀 왼쪽 + 마지막 항목이 줄 끝이 아니면 오른쪽 → 5개 · 7개처럼 딱 떨어지지 않아도 칸이 닫힘 */ .sol-type-grid li:not(:nth-child(3n + 1)) { border-left: var(--line); } .sol-type-grid li:last-child:not(:nth-child(3n)) { border-right: var(--line); } .sol-type-grid.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 항목이 4개면 2×2 */ .sol-type-grid.is-2col li { border-left: 0; border-right: 0; } .sol-type-grid.is-2col li:nth-child(2n) { border-left: var(--line); } .sol-type-grid img { flex: none; width: 80px; height: 80px; margin: -8px 0 -8px -10px; } .sol-type-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sol-type-grid h3 { font-size: clamp(18px, 1.146vw, 22px); } /* ---------- 제작 과정 — 순환 링 (단계 원이 링 위에, 선택된 단계는 포인트 컬러) + 오른쪽 단계 설명 ---------- */ .sol-flow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(48px, 6.25vw, 120px); max-width: 1585px; margin: 0 auto; } .sol-flow-ring { /* 유리 느낌의 둥근 사각 판 */ --size: clamp(420px, 34.375vw, 660px); --r: calc(var(--size) * .344); --dot: calc(var(--size) * .2); position: relative; width: var(--size); height: var(--size); border-radius: 20%; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } .sol-flow-orbit { /* 단계를 잇는 점선 원 — 원(단계) 뒤로는 가려짐 */ position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .2); } .sol-flow-arrows { position: absolute; inset: 0; animation: sol-orbit 16s linear infinite; } /* 화살표가 점선을 따라 천천히 돎 */ .sol-flow-arrows i { /* 단계 사이 빈 칸마다 하나 — 점선과 같은 방향(시계 방향)을 가리킴 */ --a: calc(360deg / var(--n) * (var(--i) + .5) - 90deg); position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(90deg); } .sol-flow-arrows i::before { /* ┐ 를 45° 돌린 > 모양 */ content: ""; position: absolute; inset: 4px 6px 4px 2px; border-top: 2px solid var(--ac-2); border-right: 2px solid var(--ac-2); border-radius: 1px; transform: rotate(45deg); } @keyframes sol-orbit { to { transform: rotate(360deg); } } .sol-flow-list { margin: 0; padding: 0; list-style: none; } .sol-flow-list li { --a: calc(360deg / var(--n) * var(--i) - 90deg); /* 맨 위에서 시작해 시계 방향으로 */ position: absolute; left: 50%; top: 50%; z-index: 2; width: var(--dot); height: var(--dot); transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)); } .sol-flow-list button { /* 불투명한 원 — 뒤의 점선 · 화살표를 가림 */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; border-radius: 50%; background: #2a2326; color: #fff; transition: background .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease; } .sol-flow-list img { width: 28%; height: auto; } .sol-flow-list strong { padding: 0 10px; font-size: clamp(12px, .781vw, 15px); font-weight: 600; line-height: 1.3; word-break: keep-all; } .sol-flow-list li.is-on button { background: linear-gradient(140deg, var(--ac-2), var(--ac)); transform: scale(1.06); box-shadow: 0 16px 40px rgba(var(--ac-rgb), .4); } .sol-flow-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .sol-flow-center p { font-size: clamp(30px, 2.396vw, 46px); font-weight: 600; line-height: 1.3; color: #fff; } .sol-flow-center span { display: block; color: rgba(255, 255, 255, .5); font-size: clamp(15px, 1.042vw, 20px); font-weight: 500; } .sol-flow-text .ss-head { margin-bottom: 0; } .sol-flow-box { /* 제목 영역과 나눠지는 단계 설명 영역 */ display: flex; flex-direction: column; gap: 24px; margin-top: 48px; padding: clamp(28px, 2.083vw, 40px); border-radius: 24px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); } .sol-flow-nums { display: flex; flex-wrap: wrap; gap: 8px; } .sol-flow-nums button { /* ① ② ③ … */ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 600; line-height: 1; transition: background .3s ease, border-color .3s ease, color .3s ease; } .sol-flow-nums button.is-on { background: linear-gradient(140deg, var(--ac-2), var(--ac)); border-color: transparent; color: #fff; } .sol-flow-detail { display: grid; } .sol-flow-item { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease, visibility .4s; } .sol-flow-item.is-on { opacity: 1; visibility: visible; transform: none; } .sol-flow-item h3 { font-size: clamp(24px, 1.667vw, 32px); } .sol-flow-item p { color: var(--muted); font-size: 17px; line-height: 1.7; } @media (hover: hover) and (pointer: fine) { .sol-flow-list li:not(.is-on) button:hover { background: #3a3034; } .sol-flow-nums button:not(.is-on):hover { border-color: var(--ac-2); color: #fff; } } @media (prefers-reduced-motion: reduce) { .sol-flow-arrows { animation: none; } } /* ---------- 사례 (E-Book) — 표지 + 바로 보기 ---------- */ .sol-gallery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; } .sol-gallery-list a { display: flex; align-items: center; gap: clamp(24px, 2.5vw, 48px); height: 100%; padding: clamp(28px, 2.5vw, 48px); border-radius: 28px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .3s ease, background-color .3s ease; } .sol-gallery-list figure { /* 책 표지 — 적당한 크기로, 살짝 기울여 */ flex: none; width: clamp(140px, 11.458vw, 220px); overflow: hidden; border-radius: 4px 12px 12px 4px; box-shadow: 0 24px 48px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-3deg); transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .sol-gallery-list img { width: 100%; height: auto; } .sol-gallery-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .sol-gallery-text h3 { font-size: clamp(20px, 1.354vw, 26px); } .sol-gallery-go { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: #d6c4c3; font-size: 15px; font-weight: 500; transition: background-color .3s ease, color .3s ease; } @media (hover: hover) and (pointer: fine) { .sol-gallery-list a:hover { border-color: rgba(var(--ac-2-rgb), .45); background: rgba(255, 255, 255, .06); } .sol-gallery-list a:hover figure { transform: rotate(0) scale(1.03); } .sol-gallery-list a:hover .sol-gallery-go { background: #f7f2f1; color: #1c1416; } } /* ---------- G. 상담 유도 띠 ---------- */ .sol-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: var(--ss-space) var(--side); text-align: center; } .sol-cta-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 100%, rgba(var(--ac-rgb), .3), rgba(var(--ac-rgb), 0) 70%), radial-gradient(40% 60% at 50% 110%, rgba(255, 90, 80, .25), rgba(255, 90, 80, 0) 70%); } .sol-cta-title { font-size: clamp(30px, 2.5vw, 48px); font-weight: 700; line-height: 1.3; word-break: keep-all; } .sol-cta-sub { color: var(--muted); font-size: 17px; } .sol-cta .btn-pill { margin-top: 24px; } /* ---------- 반응형 ---------- */ @media (max-width: 1024px) { .sol-split { grid-template-columns: minmax(0, 1fr); } .sol-sticky { position: static; } /* 서비스 카드: 옆으로 넘겨 보는 한 줄 (화면 끝까지) */ .sol-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3.3); margin: 0 calc(var(--side) * -1); padding: 0 var(--side); scroll-padding: 0 var(--side); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .sol-cards::-webkit-scrollbar { display: none; } .sol-cards li { scroll-snap-align: start; } .sol-ai-inner { grid-template-columns: minmax(0, 1fr); } .sol-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sol-type-grid li:not(:nth-child(3n + 1)), .sol-type-grid li:last-child:not(:nth-child(3n)) { border-left: 0; border-right: 0; } .sol-type-grid li:nth-child(2n) { border-left: var(--line); } .sol-type-grid li:last-child:not(:nth-child(2n)) { border-right: var(--line); } .sol-flow-ring { --size: 420px; } } @media (max-width: 768px) { .sol-cards { grid-auto-columns: calc((100% - 16px) / 2.2); } .sol-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; } .sol-flow-ring { --size: min(480px, calc(100vw - var(--side) * 2)); } .sol-flow-text { width: 100%; max-width: 640px; } .sol-gallery-list { grid-template-columns: minmax(0, 1fr); max-width: 560px; } } @media (max-width: 480px) { .sol-issue-list li { grid-template-columns: minmax(0, 1fr); gap: 12px; } .sol-cards { grid-auto-columns: 72%; } .sol-ai-grid, .sol-type-grid, .sol-type-grid.is-2col { grid-template-columns: minmax(0, 1fr); } .sol-type-grid li:nth-child(n):nth-child(n), .sol-type-grid.is-2col li:nth-child(n):nth-child(n) { border-left: 0; border-right: 0; } /* 1열: 세로선 없음 */ .sol-type-grid li { padding: 24px 4px; } .sol-type-grid img { width: 64px; height: 64px; } .sol-ai-grid li { padding: 14px 20px 14px 12px; } .sol-ai-grid img { width: 60px; height: 60px; } .sol-ai-grid li p { font-size: 17px; } .sol-marquee li { padding: 12px 20px 12px 16px; } .sol-org { width: 26px; height: 26px; } .sol-flow-list strong { padding: 0 4px; font-size: 11px; } .sol-flow-list button { gap: 4px; } .sol-flow-center p { font-size: 26px; } .sol-flow-box { margin-top: 32px; padding: 24px; } .sol-flow-item p { font-size: 15px; } .sol-gallery-list a { gap: 20px; padding: 20px; } .sol-gallery-list figure { width: 104px; } .sol-gallery-text { gap: 14px; } .sol-gallery-text h3 { font-size: 18px; } .sol-gallery-go { height: 38px; padding: 0 16px; font-size: 14px; } .sol-cta-sub { font-size: 15px; word-break: keep-all; } .sol-cta-sub br { display: none; } } /* ---------- AI 서비스 (business2/ai.php) — 설명 + 예시 화면 ---------- */ .ai-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 5.208vw, 100px); } .ai-row--rev .ai-text { order: 2; } .ai-text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .ai-text .ss-no { margin-bottom: 4px; } .ai-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .ai-tags li { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: #d6c4c3 !important; font-size: 14px !important; } .ai-mock { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.083vw, 40px); border-radius: 28px; background: #f7f2f1; color: #222; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); } .ai-mock img { display: block; } .aim-msg { display: flex; align-items: flex-start; gap: 14px; } .aim-bot { width: 56px; height: auto; flex: none; } .aim-bubble { flex: 1; padding: 20px 22px; border-radius: 4px 20px 20px 20px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .06); } .aim-bubble > p { font-size: 15px; line-height: 1.6; } .aim-bubble b { color: #e0463d; } .aim-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .aim-chips li { padding: 7px 13px; border-radius: 999px; background: #fde8e4; color: #c8282a; font-size: 13px; font-weight: 500; } .aim-input { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 20px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .06); } .aim-input p { flex: 1; color: #9a8f90; font-size: 14px; } .aim-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f1ecea; color: #8a7f80; font-size: 18px; line-height: 1; } .aim-send { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(120deg, #ff8a74, #ff5a50 50%, #f2547d); } .aim-send img { width: 18px; height: auto; filter: brightness(0) invert(1); } .aim-cam { width: 24px; height: auto; } .aim-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .aim-results { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; } .aim-results > div { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; } .aim-results p { font-size: 14px; font-weight: 600; } .aim-imgs { display: flex; gap: 10px; } .aim-imgs img { flex: 1; min-width: 0; aspect-ratio: 1; border-radius: 12px; object-fit: cover; } .aim-btn { padding: 10px; border-radius: 10px; background: #f4f0ef; color: #6b6264; font-size: 13px; text-align: center; } .aim-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .aim-acts li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 18px; background: #fff; font-size: 14px; font-weight: 500; } .aim-acts span { display: grid; place-items: center; width: 44px; height: 44px; } .aim-acts img { max-width: 100%; max-height: 100%; } .aim-recos { display: grid; gap: 10px; margin-top: 14px; } .aim-recos li { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; background: #f7f2f1; } .aim-recos img { width: 72px; height: 48px; border-radius: 8px; object-fit: cover; } .aim-recos div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .aim-recos small { color: #8a7f80; font-size: 12px; } .aim-tag { padding: 5px 9px; border-radius: 6px; background: #ff5a50; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; } .aim-dash-title { font-size: 18px; font-weight: 700; } .aim-dash { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .aim-dash > div { padding: 18px; border-radius: 18px; background: #fff; } .aim-dash p { color: #6b6264; font-size: 13px; font-weight: 600; } .aim-stat b { display: block; margin: 10px 0 6px; font-size: clamp(20px, 1.354vw, 26px); } .aim-stat small { color: #9a8f90; font-size: 12px; } .aim-stat em { margin-left: 4px; font-style: normal; font-weight: 700; } .aim-stat .up { color: #e0463d; } .aim-stat .down { color: #3b82f6; } .aim-age { grid-row: span 2; display: flex; flex-direction: column; align-items: center; gap: 14px; } .aim-age p { align-self: flex-start; } .aim-age img { width: 70%; height: auto; } .aim-age ul { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 12px; color: #8a7f80; font-size: 12px; } .aim-chart { grid-column: span 2; } .aim-chart p { display: flex; justify-content: space-between; } .aim-chart p span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .aim-chart i { width: 8px; height: 8px; border-radius: 2px; } .aim-chart ul { display: flex; align-items: flex-end; justify-content: space-between; height: 110px; margin-top: 14px; } .aim-chart li { display: flex; align-items: flex-end; gap: 3px; height: 100%; } .aim-chart li span { width: 10px; border-radius: 3px 3px 0 0; } .aim-chart .m { background: #ff8a74; } .aim-chart .w { background: #f2547d; } @media (max-width: 1024px) { .ai-row { grid-template-columns: minmax(0, 1fr); } .ai-row--rev .ai-text { order: 0; } } @media (max-width: 480px) { .ai-mock { gap: 14px; padding: 16px; border-radius: 22px; } .aim-bot { width: 44px; } .aim-bubble { padding: 16px; } .aim-input { height: 52px; padding-left: 14px; } .aim-results { grid-template-columns: minmax(0, 1fr); } .aim-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 통계 두 칸 + 그래프는 한 줄 전체 */ .aim-age, .aim-chart { grid-row: auto; grid-column: 1 / -1; } .aim-age img { width: 56%; } .aim-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aim-chart li span { width: 7px; } } /* ---------- 공통 보조 ---------- */ .ss-eyebrow { color: #ff7a68; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .ss-light .ss-eyebrow { color: #e0463d; } /* ---------- 포트폴리오 (portfolio2) ---------- */ .pf-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; } .pf-filter button { height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: #cbb9b8; font-size: 16px; font-weight: 500; transition: color .2s ease, background-color .2s ease, border-color .2s ease; } .pf-filter button[aria-pressed="true"] { border-color: transparent; background: #f7f2f1; color: #1c1416; } .pf-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 2.5vw, 48px) 20px; } .pf-item[hidden] { display: none; } .pf-item a { display: block; } .pf-item figure { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; background: #1c1416; } .pf-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, .84, .3, 1); } .pf-item p { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 0 12px; } .pf-item b { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; } .pf-item span { color: var(--muted); font-size: 15px; } @media (hover: hover) and (pointer: fine) { .pf-filter button[aria-pressed="false"]:hover { color: #fff; border-color: rgba(255, 255, 255, .4); } .pf-item a:hover img { transform: scale(1.05); } } /* 상세 창 */ .pf-modal { position: fixed; inset: 0; z-index: 210; display: flex; justify-content: center; padding: clamp(16px, 3vw, 56px) 16px; background: rgba(6, 3, 4, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s ease; } .pf-modal[hidden] { display: none; } .pf-modal.is-open { opacity: 1; } .pf-modal-panel { position: relative; width: min(1100px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: 28px; background: #f7f2f1; color: #222; outline: none; transform: translateY(24px); transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .pf-modal.is-open .pf-modal-panel { transform: none; } /* 상세 창 스크롤바 — 얇은 둥근 막대 · 바탕 투명 · 창의 둥근 모서리 안쪽에서만 */ @supports not selector(::-webkit-scrollbar) { .pf-modal-panel { scrollbar-width: thin; scrollbar-color: rgba(28, 20, 22, .22) transparent; } } /* Firefox (크롬은 이 속성이 있으면 아래 디자인을 무시해서 분리) */ .pf-modal-panel::-webkit-scrollbar { width: 14px; } .pf-modal-panel::-webkit-scrollbar-track { margin: 28px 0; background: transparent; } .pf-modal-panel::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 999px; background: rgba(28, 20, 22, .22) padding-box; } /* 테두리를 투명하게 → 막대가 가운데 6px 로 */ .pf-modal-panel::-webkit-scrollbar-thumb:hover { background-color: rgba(224, 70, 61, .7); } .pf-modal-panel::-webkit-scrollbar-button { display: none; } .pf-modal-close { position: sticky; top: 16px; z-index: 2; float: right; display: grid; place-items: center; width: 44px; height: 44px; margin: 16px 16px -60px 0; border-radius: 50%; background: #1c1416; color: #fff; transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .2s ease; } .pf-modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .pf-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px); padding: clamp(24px, 3vw, 56px); } .pf-top { overflow: hidden; border-radius: 20px; background: #fff; } .pf-top img { width: 100%; height: auto; } .pf-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .pf-cat { color: #e0463d; font-size: 14px; font-weight: 600; } .pf-head h2 { font-size: clamp(26px, 1.875vw, 36px); font-weight: 700; line-height: 1.3; word-break: keep-all; } .pf-info { display: grid; gap: 12px; width: 100%; margin: 12px 0 8px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .1); } .pf-info div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; font-size: 15px; } .pf-info dt { color: #8a7f80; font-size: 13px; font-weight: 600; letter-spacing: .04em; } .pf-info dd { margin: 0; } .pf-colors { display: flex; gap: 8px; } .pf-colors i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .pf-go { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 24px; border-radius: 999px; background: #1c1416; color: #fff; font-size: 15px; font-weight: 600; } .pf-block { padding: 0 clamp(24px, 3vw, 56px) clamp(32px, 3vw, 56px); } .pf-block-text { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 24px; } .pf-block-head { color: #e0463d; font-size: 14px; font-weight: 700; } .pf-block h3 { font-size: clamp(20px, 1.25vw, 24px); font-weight: 700; line-height: 1.4; } .pf-block-text > p:last-child:not(.pf-block-head) { color: #5f5658; font-size: 15px; line-height: 1.75; word-break: keep-all; } .pf-block figure { overflow: hidden; border-radius: 20px; background: #fff; } .pf-block img { width: 100%; height: auto; } /* 기사 바로가기 버튼 (NEWS LINK) — 같은 크기 버튼을 한 줄에 */ .pf-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 760px; margin: 0; padding: 0; list-style: none; } .pf-links a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .14); background: #fff; color: #222; font-size: 15px; font-weight: 600; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .pf-links a span { color: #a39a9c; font-size: 13px; transition: color .2s ease; } @media (hover: hover) and (pointer: fine) { .pf-links a:hover { border-color: #1c1416; background: #1c1416; color: #fff; } .pf-links a:hover span { color: #ff9a8f; } } @media (hover: hover) and (pointer: fine) { .pf-modal-close:hover { transform: rotate(90deg); background: #ff5a50; } } /* ---------- 회사소개 (company2) ---------- */ .co-strengths ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .co-strengths li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: clamp(380px, 28vw, 540px); padding: clamp(28px, 2.083vw, 40px); border-radius: 28px; background: linear-gradient(180deg, rgba(10, 5, 6, .15) 0%, rgba(10, 5, 6, .88) 75%), var(--bg) center / cover no-repeat; } .co-strengths h2 { font-size: clamp(22px, 1.458vw, 28px); font-weight: 700; line-height: 1.35; word-break: keep-all; } .co-strengths p { color: #d6c4c3; font-size: 15px; line-height: 1.7; word-break: keep-all; } /* 연혁 — 가운데 세로선을 기준으로 좌우 번갈아 (연도 ↔ 내용) */ .co-timeline { position: relative; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; } .co-timeline::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, #ff5a50, rgba(255, 90, 80, .1)); } .co-timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 5vw, 96px); padding: 0 0 64px; } .co-timeline li:last-child { padding-bottom: 0; } .co-timeline li::before { content: ""; position: absolute; left: 50%; top: 10px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #0a0506; box-shadow: inset 0 0 0 3px #ff5a50; } .co-year { font-size: clamp(26px, 1.875vw, 36px); font-weight: 600; line-height: 1; color: var(--white); text-align: right; } .co-timeline li:nth-child(even) .co-year { order: 2; text-align: left; } .co-timeline li:nth-child(even) > div { order: 1; text-align: right; } .co-timeline h3 { margin-bottom: 8px; font-size: clamp(18px, 1.146vw, 22px); font-weight: 700; } .co-timeline div p { color: var(--muted); font-size: 15px; line-height: 1.5; } .co-timeline div p::before { content: "· "; } .co-clients .partner-list { margin-top: 0; } .ss-light--round { border-radius: clamp(40px, 6.25vw, 120px); } /* 아래에 다른 영역이 이어지는 흰 패널 */ /* 회사 정보 — 왼쪽 제목 + 오른쪽 정보 목록 (어두운 배경) */ .co-info-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(40px, 5.208vw, 100px); align-items: start; max-width: 1585px; margin: 0 auto; } .co-info-head { align-items: flex-start; margin-bottom: 0; text-align: left; } .co-table { margin: 0; border-top: 1px solid rgba(255, 255, 255, .2); } .co-table div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .co-table dt { color: #8f7c7d; font-size: 15px; font-weight: 500; line-height: 1.6; } .co-table dd { margin: 0; color: var(--white); font-size: clamp(16px, .938vw, 18px); font-weight: 500; line-height: 1.6; word-break: keep-all; } .co-table dd a { margin-right: 20px; color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; transition: text-decoration-color .2s ease; } @media (hover: hover) and (pointer: fine) { .co-table dd a:hover { text-decoration-color: #ff7a68; } } /* ---------- 제작 문의 (contact2/contact.php) ---------- */ .cf-form { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 3.125vw, 60px); border-radius: 28px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); } .cf-note { margin-bottom: 28px; color: var(--muted); font-size: 14px; } .cf-note span, .cf-field label span, .cf-check em { color: #ff5a50; font-style: normal; } .cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } .cf-full { grid-column: 1 / -1; } .cf-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .cf-field > label { color: #d6c4c3; font-size: 15px; font-weight: 600; } .cf-form input[type="text"], .cf-form select, .cf-form textarea { width: 100%; min-width: 0; height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 5, 6, .6); color: var(--white); font: inherit; font-size: 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .cf-form textarea { height: auto; min-height: 200px; padding: 16px 18px; line-height: 1.6; resize: vertical; } .cf-form select { flex: 0 0 150px; width: 150px; appearance: none; cursor: pointer; background: rgba(10, 5, 6, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5a0a1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; } .cf-form select option { background: #1c1416; } .cf-form input::placeholder, .cf-form textarea::placeholder { color: #6f5f60; } .cf-form input:focus, .cf-form select:focus, .cf-form textarea:focus { border-color: #ff7a68; box-shadow: 0 0 0 3px rgba(255, 90, 80, .18); } .cf-form input[readonly]:not(.cf-file-name) { color: #b5a0a1; } .cf-row { display: flex; align-items: center; gap: 8px; } .cf-row i { flex: none; color: #8f7c7d; font-style: normal; } .cf-unit i { margin-left: 4px; } .cf-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cf-file-btn { /* 다른 입력란과 같은 톤 */ flex: none; display: grid; place-items: center; height: 54px; padding: 0 22px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #d6c4c3; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .cf-file:focus-within .cf-file-btn { outline: 2px solid #ff9a8f; outline-offset: 3px; } .cf-help { color: #8f7c7d; font-size: 13px; } .cf-field.is-error input, .cf-field.is-error textarea { border-color: #ff5a50; } .cf-error { color: #ff7a68; font-size: 13px; font-weight: 600; } .cf-agree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); } .cf-check { display: inline-flex; align-items: center; gap: 10px; color: #d6c4c3; font-size: 15px; cursor: pointer; } .cf-check input { width: 20px; height: 20px; accent-color: #ff5a50; } .cf-agree > a { color: #8f7c7d; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .cf-agree .cf-error { flex-basis: 100%; } .cf-submit { display: flex; margin: 40px auto 0; border: 0; cursor: pointer; } .cf-submit:disabled { opacity: .5; cursor: default; } /* ---------- 오시는 길 (contact2/map.php) ---------- */ .mp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; } .mp-map { overflow: hidden; min-height: 480px; border-radius: 28px; background: #1c1416; } .mp-map iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; } .mp-contact { /* 회사명 / 정보 / 버튼그룹 — 한 장의 패널을 세 칸으로 */ display: flex; flex-direction: column; padding: clamp(28px, 2.5vw, 48px); border-radius: 28px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); } .mp-company { padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .mp-company h2 { font-size: clamp(24px, 1.667vw, 32px); font-weight: 700; line-height: 1.3; } .mp-company p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.5; word-break: keep-all; } .mp-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; margin: 0; padding: 28px 0; } .mp-info div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: baseline; } .mp-info dt { color: #8f7c7d; font-size: 15px; font-weight: 500; } .mp-info dd { margin: 0; font-size: clamp(16px, .938vw, 18px); font-weight: 500; line-height: 1.5; word-break: keep-all; } .mp-copy-item { /* 누르면 복사 (main.js) */ position: relative; padding: 0; color: inherit; font: inherit; text-align: left; cursor: copy; text-decoration: underline transparent; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; } .mp-copy-tip { /* "복사되었습니다" 안내 */ position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2; padding: 6px 12px; border-radius: 8px; background: #f7f2f1; color: #1c1416; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; } .mp-copy-tip.is-on { opacity: 1; transform: none; } .mp-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); } .mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .25s ease, border-color .25s ease; } .mp-btn i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 13px; font-style: normal; font-weight: 800; line-height: 1; } .mp-btn--naver i { background: #03c75a; color: #fff; } .mp-btn--kakao i { background: #fee500; color: #191919; } .mp-btn span { color: #8f7c7d; font-size: 13px; } .mp-ways ul { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 20px; } .mp-ways li { padding: clamp(24px, 2.083vw, 40px); border-radius: 24px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); } .mp-ways h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .mp-way-icon { display: grid; place-items: center; flex: none; } /* 선 아이콘만 (배경 원 없음) */ .mp-way-icon img { width: 32px; height: 32px; } .mp-ways dl { display: grid; gap: 14px; margin: 0; } .mp-ways dl div { display: flex; align-items: flex-start; gap: 12px; } .mp-ways dl .is-route { flex-direction: column; gap: 6px; } .mp-ways dt { flex: none; font-size: 15px; font-weight: 600; } .mp-ways dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; word-break: keep-all; } .mp-line { padding: 3px 10px; border-radius: 999px; color: #fff; font-size: 13px !important; } .mp-line--blue { background: #2f6fd6; } .mp-line--khaki { background: #747f00; } .mp-line--green { background: #3aa53a; } .mp-line--red { background: #e0463d; } @media (hover: hover) and (pointer: fine) { .mp-copy-item:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); } .mp-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); } } @media (max-width: 1440px) { .pf-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .mp, .mp-ways ul { grid-template-columns: minmax(0, 1fr); } .mp-ways ul { gap: 12px; } .pf-head { grid-template-columns: minmax(0, 1fr); } .co-info-wrap { grid-template-columns: minmax(0, 1fr); } .co-strengths ul { gap: 12px; } .co-strengths li { min-height: 360px; padding: 24px; } } @media (max-width: 768px) { .pf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } .pf-item b { font-size: 16px; } .pf-item span { font-size: 13px; } .pf-filter button { height: 42px; padding: 0 20px; font-size: 15px; } .co-strengths ul { grid-template-columns: minmax(0, 1fr); } .co-strengths li { min-height: 300px; } .cf-grid { grid-template-columns: minmax(0, 1fr); } .cf-field[data-field="email"] .cf-row { flex-wrap: wrap; } .cf-field[data-field="email"] .cf-row input { flex: 1 1 40%; } .cf-form select { flex: 1 1 100%; width: 100%; } } @media (max-width: 480px) { .pf-list { gap: 24px 10px; } .pf-item figure { border-radius: 14px; } .pf-item p { padding: 0 4px; } .pf-filter { gap: 6px; } .pf-filter button { height: 38px; padding: 0 16px; font-size: 14px; } .pf-modal { padding: 12px 8px; } .pf-modal-panel { border-radius: 20px; } .pf-info div { grid-template-columns: 1fr; gap: 4px; } .cf-form { padding: 24px 18px; border-radius: 20px; } .cf-form input[type="text"], .cf-form select, .cf-file-btn { height: 50px; } .co-strengths li { min-height: 280px; border-radius: 22px; } .co-timeline::before { left: 6px; margin-left: 0; } /* 모바일: 왼쪽 세로선 + 한 줄 */ .co-timeline li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 36px; padding-bottom: 48px; } .co-timeline li::before { left: 0; top: 6px; margin-left: 0; } .co-year, .co-timeline li:nth-child(even) .co-year, .co-timeline li:nth-child(even) > div { order: 0; text-align: left; } .co-table div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; } .mp-contact { padding: 24px; border-radius: 22px; } .mp-map { border-radius: 22px; } .mp-btns { grid-template-columns: minmax(0, 1fr); } .mp-info div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .mp-map, .mp-map iframe { min-height: 320px; } .mp-ways li { border-radius: 20px; } } /* ===================================================================== 반응형 ===================================================================== */ @media (max-width: 1440px) { #services .sv-card { flex-direction: column; align-items: flex-start; } .ft-row { flex-wrap: wrap; } } @media (max-width: 1024px) { :root { --header-h: 68px; --side: 32px; } .site-nav { display: none; } .sm-body { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 56px; padding-top: 48px; } #works { --u: 1vw; --cw: calc(var(--u) * 18); --r0: calc(var(--u) * 56); --ax-off: calc(var(--u) * 52.5); } #services .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #services .sv-card { flex-direction: row; align-items: center; } .partner-list { grid-template-columns: repeat(4, minmax(0, 140px)); } .partner-list img { width: 140px; } .site-footer { flex-direction: column; align-items: flex-start; } .ft-body { gap: 48px; width: 100%; } } @media (max-width: 768px) { :root { --side: 24px; } .sub-tabs { gap: 8px; } .sub-tabs a { height: 40px; padding: 0 16px; font-size: 14px; } .hero-shell { padding-top: 104px; } .hero-lead br, .hero-card-desc br { display: none; } .hero-marquee span { font-size: 15px; } .partner-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; } .partner-list img { width: 100%; max-width: 130px; } .ft-row, .ft-bottom { flex-direction: column; align-items: flex-start; } .ft-side { align-items: flex-start; gap: 32px; } .ft-dns { flex-direction: column; gap: 16px; } .ft-dns dd div { white-space: normal; } .ft-info dd { word-break: keep-all; } .ft-links { gap: 32px; } } @media (max-width: 480px) { :root { --side: 20px; } .fab, .fab-ai-tip, .ai-chat { --fab: 56px; } .fab-ai-tip { height: 30px; padding: 0 4px 0 12px; } .fab-ai-tip-text { gap: 6px; font-size: 11px; } .fab-ai-tip::after { right: -7px; width: 8px; height: 8px; margin-top: -4px; } .fab--top { bottom: calc(clamp(16px, 2.083vw, 40px) + var(--fab) + 20px); } /* 챗봇 버튼과 간격 20 */ .fab--top .fab-label { display: none; } /* 모바일: 화살표만 */ .fab-arrow { stroke-width: 1.45; } /* 챗봇: 아래에서 올라오는 시트 */ .ai-chat { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(82vh, 680px); min-height: 0; border-radius: 20px 20px 0 0; transform: translateY(24px); transform-origin: 50% 100%; } .ai-chat.is-open { transform: none; } .ai-chat-close { top: -48px; right: 12px; width: 38px; height: 38px; } /* 시트 위쪽 바깥 */ .ai-chat.is-open { box-shadow: 0 0 0 100vmax rgba(6, 3, 4, .55), 0 -10px 40px rgba(0, 0, 0, .4); } /* 뒤 화면 어둡게 → 시트가 앞으로 */ .ai-chat { padding-bottom: env(safe-area-inset-bottom); } /* 아이폰 홈 표시줄 위로 입력창 */ /* 전체 메뉴 — 한 화면 안에 (스크롤 없이) */ .sm-top { --close: 40px; } .sm-body { row-gap: 32px; width: calc(100% - var(--side) * 2); padding: 28px 0 40px; } .sm-nav a { font-size: 34px; line-height: 1.35; } .sm-company { font-size: 16px; } .sm-contact { gap: 10px; margin-top: 18px; font-size: 13px; line-height: 1.5; } .sm-contact div { gap: 14px; } .sm-contact dt { width: 44px; } .sm-actions { gap: 8px; margin-top: 28px; } .sm-btn { flex: 1 1 100%; min-width: 0; gap: 8px; height: 46px; font-size: 14px; } .sm-btn svg { width: 18px; height: 18px; } .site-util .btn-pill { display: none; } .hero-head { gap: 12px; } .hero-eyebrow { gap: 8px; font-size: 12px; white-space: nowrap; } .hero-eyebrow::before, .hero-eyebrow::after { width: 20px; } .hero-title { font-size: min(32px, 8.8vw); } /* 두 줄 (좁은 폰은 비례 축소) */ .hero-lead { font-size: 13px; line-height: 1.5; } /* 히어로 AI | Security — 모바일도 좌우 2단 (같은 크기 · 같은 높이 → 동등한 계층) */ .hero-duo { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: 12px; margin-top: 4px; } #hero3d { --h-stage-h: min(50vw, 210px); } .hero-stage { width: calc(100% + 32px); margin: 0 -16px -6px; } /* 오브젝트는 무대 가로 폭에 맞춰 그려짐 → 양옆으로 16px씩 넓혀 크게 (투명 캔버스라 겹쳐도 무방) */ .hero-axis::before { top: 12%; bottom: 0; } .hero-card-body { margin-top: -12px; } .hero-card-title { font-size: min(32px, 8.8vw); } /* 히어로 제목과 같게 */ .hero-card-desc { margin-top: 10px; padding: 0 2px; font-size: 12px; line-height: 1.45; } .hero-card-body .link-more { margin-top: 12px; font-size: 13px; } .hero-marquee { margin: 28px 0 0; height: 42px; } .hero-marquee::before, .hero-marquee::after { width: 42px; } .hero-marquee span { font-size: 13px; } .section-title { font-size: 26px; } /* 메인 섹션 제목 (Featured Works · Our Services · Our Partner · Consulting) */ .section-title--works { margin-top: 72px; } #works { --u: 1vw; --cw: 30vw; --r0: 140vw; --ax-off: 133vw; --card-gap: .05; --gap: 13vw; margin-top: 20px; } /* 반지름을 키워 곡선을 완만하게 → 카드가 더 많이 보임 · 카드 간격 5% */ #works .wk-band { margin-inline: 0; } /* 카드 띠는 화면 끝까지 */ #works .wk-center { gap: 16px; } #works .wk-desc { font-size: 13px; } #works .wk-center .link-more { font-size: 13px; } #works .wk-cap { padding: 7vw 2.6vw 2.2vw; } #services .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 메인 섹션 여백 — Featured Works 와 같은 기준 (제목 → 내용 24 안팎, 본문 13) */ #services { --sv-sky: 100px; --sv-curve: 80px; padding-bottom: 96px; } #services .sv-list { gap: 10px; margin-top: 24px; } #services .sv-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; } /* 2열: 아이콘 위 · 글 아래 */ #services .sv-icon { width: 48px; margin: -6px 0 -2px -10px; } /* 이미지 안 투명 여백(왼쪽 약 21% · 위 약 20%)만큼 당겨 그림을 글자 줄에 맞춤 */ #services .sv-text { gap: 6px; } #services .sv-text h3 { font-size: 16px; } #services .sv-text p { font-size: 13px; } #services .sv-text p { word-break: normal; } #services .sv-text p br { display: none; } .partner { padding: 56px 20px; } .partner-list { row-gap: 24px; margin-top: 28px; } #consulting { padding: 72px 20px; } #consulting .cs-video { /* 지구 영상을 문구 뒤에 크게 · 가장자리는 흐리게 (사각 테두리 안 보이게) */ top: 50%; width: 170%; max-width: none; transform: translate(-50%, -50%); /* 영역 세로 가운데 (가로 -50% 는 기존 가운데 정렬 유지) */ -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); } #consulting .cs-content { margin-top: 32px; } #consulting .cs-head { font-size: 28px; line-height: 1.3; } #consulting .cs-sub { margin-top: 14px; font-size: 13px; line-height: 1.5; } #consulting .btn-pill { margin-top: 32px; } .site-footer { gap: 24px; padding: 48px 20px 96px; } /* 아래는 플로팅 버튼(AI · TOP)에 가리지 않을 만큼 */ .site-footer .site-logo img { width: 120px; } .ft-body { gap: 28px; font-size: 13px; } .ft-row { gap: 24px; } .ft-side { gap: 20px; } .ft-dns { gap: 10px; } .ft-sns { gap: 8px; margin-left: -6px; } .ft-sns a { width: 30px; height: 30px; } .ft-bottom { gap: 10px; } .ft-links { gap: 20px; } .ft-info { gap: 10px; } .ft-info dd { line-height: 1.4; } .ft-info dt, .ft-dns dt, .ft-dns dd span { width: 52px; } .ft-dns dd { gap: 10px; } .ft-copy { font-size: 12px; } .partner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; } .partner-list li { min-height: 30px; } .partner-list img { width: 100%; max-width: 92px; } /* 칸 폭(약 90) 안에서 로고 크기 통일 */ .btn-pill--lg { gap: 8px; padding: 11px 22px; font-size: 15px; line-height: 1.2; } /* 모바일 큰 버튼 (제작 문의 · 문의하기) */ .btn-pill--lg img { width: 15px; height: 15px; } /* ---------- 서브페이지 — 메인과 같은 기준 (섹션 간격 72 · 제목 → 내용 28 · 본문 13) ---------- */ :root { --ss-space: 72px; } .sub-hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 40px; } .sub-title { font-size: min(32px, 8.8vw); } /* 메인 히어로 제목과 같게 */ .sub-lead { margin-top: 14px; font-size: 13px; line-height: 1.5; } .sub-lead br { display: none; } .sub-tabs { margin-top: 24px; } .sub-tabs a { height: 36px; padding: 0 14px; font-size: 13px; } .sub-tabs--leaf { gap: 4px 20px; margin-top: 12px; } .sub-tabs--leaf a { height: 32px; font-size: 14px; } .sub-hero--sky { --sv-curve: 60px; --sv-dome: 40px; padding-bottom: calc(var(--sv-dome) + 32px); } .sub-hero--sky + .ss { padding-top: 28px; } body:not(.sol-page) .sub-main .ss, body:not(.sol-page) .sub-main .ss:last-child { padding-top: 56px; padding-bottom: 56px; } body:not(.sol-page) .sub-main .ss + .ss-light { margin-top: calc(var(--ss-space) - 56px); } body:not(.sol-page) .sub-main .ss + .ss { padding-top: calc(var(--ss-space) - 56px); } /* 연달아 오는 섹션 사이도 72 (앞 섹션 아래 56 + 16) */ .ss-head { gap: 10px; margin-bottom: 28px; } .ss-title { font-size: 24px; } .ss-desc { font-size: 13px; } .ss-desc br { display: none; } .ss-desc, .sub-lead, .sol-cta-sub { text-wrap: balance; } /* 마지막 줄에 한두 글자만 남지 않게 */ .ss-eyebrow { font-size: 12px; } .ss h3 { font-size: 16px; } .ss li p { font-size: 13px; } .ss-light .ss:first-child { padding-top: 56px; } .ss-light .ss:last-child { padding-bottom: 56px; } /* 흰 패널 위아래 같게 */ .ss-no { font-size: 30px; } .sol-eyebrow { margin-bottom: -4px; font-size: 10px; } /* Solution 공통 섹션 */ .sol-issue-list li { padding: 20px 0; } .sol-no { font-size: 28px; } .sol-issue-list h3 { margin-bottom: 6px; font-size: 17px; } .sol-cards { grid-auto-columns: 62%; gap: 10px; } .sol-cards .ss-feature-text { padding: 0 16px 18px; } .sol-ai-panel { padding-top: 44px; padding-bottom: 44px; } .sol-ai-inner { gap: 24px; } .sol-ai-grid { gap: 8px; } .sol-ai-grid li { gap: 12px; padding: 12px 16px 12px 10px; border-radius: 16px; } .sol-ai-grid img { width: 44px; height: 44px; } .sol-ai-grid li p { font-size: 14px; } .sol-marquee li { gap: 8px; padding: 10px 16px 10px 12px; font-size: 13px; } .sol-org { width: 22px; height: 22px; } .sol-type-grid h3 { font-size: 16px; } .sol-type-text { gap: 4px; } .sol-type-grid li { gap: 16px; padding: 18px 4px; } .sol-type-grid img { width: 52px; height: 52px; margin: -4px 0 -4px -4px; } .sol-flow { gap: 28px; } .sol-flow-text { display: contents; } /* 제목 → 링 → 단계 설명 순서로 */ .sol-flow-text .ss-head { order: -1; align-items: center; text-align: center; } .sol-flow-box { width: 100%; margin-top: 0; } .sol-flow-item h3 { font-size: 20px; } .sol-flow-box { gap: 18px; } .sol-gallery-list { gap: 12px; } .sol-gallery-list a { gap: 18px; padding: 18px; border-radius: 22px; } .sol-gallery-list figure { width: 96px; } .sol-gallery-text { gap: 12px; } .sol-gallery-text h3 { font-size: 16px; } .sol-gallery-go { height: 34px; padding: 0 14px; font-size: 13px; } .sol-cta { gap: 10px; } .sol-cta-title { font-size: 24px; } .sol-cta-sub { font-size: 13px; } .sol-cta .btn-pill { margin-top: 18px; } /* AI 서비스 */ .ai-row { gap: 24px; } .ai-text { gap: 12px; } .aim-recos li { gap: 10px; } .aim-recos img { width: 56px; height: 40px; } .aim-bubble > p { font-size: 14px; } .aim-results > div { gap: 10px; padding: 14px; border-radius: 16px; } .aim-imgs { gap: 8px; } .aim-imgs img { aspect-ratio: 16 / 10; border-radius: 10px; } /* 검색 결과 이미지 낮게 */ .aim-btn { padding: 8px; font-size: 12px; } .aim-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* 클릭 · 조회 · 방문 · 구매 한 줄 */ .aim-acts li { gap: 6px; padding: 12px 4px; border-radius: 14px; font-size: 12px; } .aim-acts span { width: 30px; height: 30px; } .aim-dash-title { font-size: 16px; } .aim-dash > div { padding: 14px; border-radius: 14px; } .aim-stat b { font-size: 18px; } .aim-age img { width: 42%; } .aim-chart ul { height: 80px; } .ai-tags { gap: 6px; margin-top: 6px; } .ai-tags li { padding: 7px 12px; font-size: 12px !important; } /* 회사소개 */ .co-strengths ul { gap: 10px; } .co-strengths li { gap: 10px; min-height: 220px; padding: 22px 20px; } /* 강점 카드 3장 높이 축소 */ .co-strengths h2 { font-size: 17px; } .co-strengths p { font-size: 13px; } .co-year { font-size: 22px; } .co-timeline h3 { font-size: 16px; } .co-timeline div p { font-size: 13px; } .co-timeline li { padding-bottom: 36px; } .co-table dd { font-size: 14px; } .co-info-wrap { gap: 24px; } .co-info-head { margin-bottom: 0; } /* 공통 .ss-head 아래 여백 대신 gap 만 */ .co-table div { padding: 14px 0; } .co-table dt { font-size: 12px; } /* 제작 문의 · 오시는 길 */ .cf-note { margin-bottom: 20px; font-size: 13px; } .cf-grid { gap: 20px; } .cf-field { gap: 8px; } .cf-field > label, .cf-check { font-size: 14px; } .cf-form input[type="text"], .cf-form select, .cf-form textarea, .cf-file-btn { font-size: 14px; } .cf-agree { margin-top: 28px; padding-top: 20px; } .cf-submit { margin-top: 28px; } .cf-form { padding: 20px 16px; } .cf-form input[type="text"], .cf-form select, .cf-file-btn { height: 46px; border-radius: 12px; } .cf-form input[type="text"] { padding: 0 14px; } .cf-form select { padding-left: 14px; } .cf-form textarea { min-height: 140px; padding: 12px 14px; border-radius: 12px; } .cf-file-btn { padding: 0 16px; } .cf-help { font-size: 12px; } .cf-check input { width: 18px; height: 18px; } .cf-agree > a { font-size: 13px; } .mp { gap: 12px; } .mp-company { padding-bottom: 20px; } .mp-company h2 { font-size: 20px; } .mp-company p { font-size: 13px; } .mp-info { gap: 14px; padding: 20px 0; } .mp-info dt { font-size: 13px; } .mp-info dd { font-size: 14px; } .mp-btns { padding-top: 20px; } .mp-btn { height: 44px; font-size: 14px; } .mp-ways li { padding: 22px; } .mp-ways ul { gap: 10px; } .mp-ways h3 { gap: 10px; margin-bottom: 14px; } .mp-way-icon img { width: 26px; height: 26px; } .mp-ways dl { gap: 10px; } .mp-line { padding: 2px 8px; font-size: 12px !important; } .mp-ways dt, .mp-ways dd { font-size: 13px; } /* 포트폴리오 */ .pf-filter { margin-bottom: 24px; } .pf-item b { font-size: 15px; } .pf-item span { font-size: 12px; } .pf-item p { gap: 4px; margin-top: 10px; } /* 상세 창 */ .pf-modal-close { width: 38px; height: 38px; margin: 12px 12px -50px 0; } .pf-modal-close svg { width: 15px; height: 15px; } .pf-head { gap: 20px; padding: 16px 16px 28px; } .pf-top { border-radius: 14px; } .pf-head-text { gap: 10px; } .pf-cat { font-size: 13px; } .pf-head h2 { font-size: 21px; } .pf-info { gap: 10px; margin: 6px 0 4px; padding-top: 16px; } .pf-info dt { font-size: 11px; } .pf-info div { font-size: 14px; } .pf-colors i { width: 20px; height: 20px; } .pf-go { height: 42px; padding: 0 20px; font-size: 14px; } .pf-block { padding: 0 16px 28px; } .pf-block-text { gap: 8px; margin-bottom: 18px; } .pf-block-head { font-size: 13px; } .pf-block h3 { font-size: 17px; } .pf-block-text > p:last-child:not(.pf-block-head) { font-size: 14px; line-height: 1.7; } .pf-block figure { border-radius: 14px; } .pf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pf-links a { height: 44px; border-radius: 12px; font-size: 14px; } } } @media (prefers-reduced-motion: reduce) { .hero-ambient, .hero-marquee-track, .hero-grad, .hero-dust { animation: none !important; } .hero-canvas { transition: opacity .2s linear !important; filter: none !important; transform: none !important; } [data-reveal] { opacity: 1; transform: none; transition: none; } #services .sv-round, #services .sv-sky, #works .wk-card { transition: none; } .fab-robot, .fab-robot-eyes, .fab-robot-light, .fab-ai-tip, .fab-ai-tip-text i { animation: none; } .fab--ai > svg { transition: none; } .site-menu, .sm-nav a span, .sm-info { transition: none; } .ai-chat, .ai-chat.is-open { transition: none; } .ai-chat-loading span { animation: none; opacity: .6; } .gnb-sub, .gnb-item.has-sub:hover > .gnb-sub, .gnb-item.has-sub:focus-within > .gnb-sub { transition: none; transform: translate(-50%, 0); } }