/* ===== SOURCE: 2_왝트_홈_01_ABOUT(1).html ===== */
:root{
--lime: #CFFF04;
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
--pink-soft: #FDEAF3;
}
*{ box-sizing:border-box; margin:0; padding:0; }
.home-section{ padding:56px 24px; word-break:keep-all; }
.home-eyebrow{
font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
margin-bottom:14px; display:block; color:var(--pink);
}
/* 헤드라인 : 상단 "웰니스 브랜드 성장 전문 기업"과 동일한 폰트사이즈(24px)·굵기(900) */
.home-about-title{
font-size:24px; font-weight:900; letter-spacing:-0.02em; line-height:1.42;
margin-bottom:22px; color:var(--ink);
}
.home-figure{
position:relative; margin:0 0 24px; border-radius:20px; overflow:hidden;
background:linear-gradient(150deg, rgba(16,16,16,0.08), rgba(16,16,16,0.02));
}
.home-figure img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.home-signature{
position:absolute; right:14px; bottom:12px; z-index:2;
font-family:'Pretendard','Apple SD Gothic Neo',sans-serif; font-weight:300;
font-size:12.5px; letter-spacing:0.04em; color:#4a4a4a;
text-shadow:0 1px 2px rgba(255,255,255,0.5);
}
.home-greeting p{ font-size:15px; font-weight:500; line-height:1.8; margin-bottom:16px; color:#2a2a24; }
.home-greeting .biz-lead{ font-weight:800; color:var(--ink); margin-bottom:14px; }
.home-greeting .biz-item{ margin-bottom:16px; }
.home-greeting .biz-item b{ color:var(--pink); font-weight:900; }
/* ===== SOURCE: 3_왝트_홈_02_03_04(1).html ===== */
:root{
--lime: #CFFF04;
--lime-soft: rgba(216,245,62,0.55);
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
--charcoal: #16130F;
--orange: #FF7A45;
--blue: #02137D;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* ==========================================================================
SECTION 03~05 — 첨부 레퍼런스 캡처 기준 타이포/정렬 정밀 반영
========================================================================== */
.home-section{ padding:52px 24px; word-break:keep-all; }
.home-eyebrow{
font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
margin-bottom:14px; display:block;
}
.home-title{
font-size:27px; font-weight:900; letter-spacing:-0.02em; line-height:1.32;
margin-bottom:16px;
}
.home-desc{ font-size:14px; font-weight:500; line-height:1.65; }
/* ===== SECTION 02 — TWO BUSINESS AREAS ===== */
.home-two{ background:var(--ink); color:var(--paper); }
.home-two .home-eyebrow{ color:var(--lime); }
.home-two .home-desc{ color:rgba(251,251,243,0.55); margin-bottom:32px; }
.home-two-cards{ display:flex; flex-direction:column; gap:16px; }
.home-two-card{
display:block; text-align:left; border-radius:22px; padding:28px 26px 26px;
border:none; cursor:pointer; min-height:44px; text-decoration:none; width:100%;
}
.home-two-card.lime{ background:var(--lime); color:var(--ink); }
.home-two-card.pink{ background:var(--pink); color:var(--paper); }
.home-two-card-kicker{
font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
opacity:0.7; margin-bottom:14px;
}
.home-two-card-main{ font-size:21px; font-weight:900; line-height:1.35; margin-bottom:18px; }
.home-two-card ul{ list-style:none; padding:0; margin:0 0 22px; }
.home-two-card li{ font-size:13.5px; font-weight:600; line-height:2.05; }
.home-two-card li::before{ content:'— '; }
.home-two-card .home-cta{
font-size:14px; font-weight:800; letter-spacing:-0.01em; color:inherit;
background:none; border:none; padding:0; cursor:pointer; display:inline-flex; gap:6px;
}
/* ===== SECTION 03 — BUSINESS PROBLEM ===== */
.home-problem{ background:#DEDBCF; color:var(--ink); }
.home-problem .home-eyebrow{ color:#7A7462; }
.home-problem-list{ margin:26px 0 28px; }
.home-problem-list li{
list-style:none; display:flex; gap:12px; align-items:baseline; padding:17px 0;
border-bottom:1px solid rgba(16,16,16,0.14); font-size:14.5px; font-weight:600; line-height:1.6;
}
.home-problem-list li:first-child{ border-top:1px solid rgba(16,16,16,0.14); }
.home-problem-list li span{ font-size:12px; font-weight:800; color:var(--pink); flex-shrink:0; }
.home-problem-conclusion{ font-size:14px; font-weight:500; line-height:1.7; color:rgba(16,16,16,0.6); margin-bottom:22px; }
.home-problem-strong{ font-size:19px; font-weight:900; line-height:1.5; color:var(--ink); margin-bottom:26px; }
.home-problem-ctas{ display:flex; flex-direction:column; gap:10px; }
.home-btn-primary{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--ink); color:var(--paper); font-size:14.5px; font-weight:800;
padding:15px 20px; border-radius:999px; border:none; cursor:pointer; min-height:44px; text-decoration:none;
}
.home-btn-ghost{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:transparent; color:var(--ink); font-size:14px; font-weight:700;
padding:14px 20px; border-radius:999px; border:1px solid rgba(16,16,16,0.28); cursor:pointer; min-height:44px; text-decoration:none;
}
/* ===== SECTION 04 — WHY WACT (기존 왝트 홈페이지 시각화 반영: 3장 비교 카드) ===== */
.home-why{ background:var(--blue); color:var(--paper); text-align:center; }
.home-why .home-eyebrow{ color:rgba(251,251,243,0.4); text-align:left; }
.home-why-header{ margin-bottom:34px; }
.home-why-title{ font-size:25px; font-weight:900; line-height:1.4; margin-bottom:14px; }
.home-why-tagline{ font-size:14px; font-weight:700; line-height:1.55; color:rgba(251,251,243,0.65); margin-bottom:18px; }
.home-why-squiggle{ display:block; margin:0 auto 14px; width:64px; height:14px; }
.home-why-chip{
display:inline-block; font-size:12px; font-weight:700; color:rgba(251,251,243,0.7);
border:1px solid rgba(251,251,243,0.25); border-radius:999px; padding:6px 16px;
}
.home-why-cards{ display:flex; flex-direction:column; gap:16px; text-align:left; }
.home-why-card{ border-radius:20px; padding:24px 22px; }
.home-why-card.light{ background:var(--paper); color:var(--ink); }
.home-why-card.neon{ background:var(--lime); color:var(--ink); }
.home-why-card.dark{
background:#242322; color:var(--paper);
border:1px solid rgba(251,251,243,0.22);
box-shadow:0 12px 28px rgba(0,0,0,0.35);
}
.home-why-num{ font-size:12px; font-weight:700; opacity:0.5; margin-bottom:10px; display:block; }
.home-why-eng{ font-size:22px; font-weight:900; letter-spacing:-0.01em; margin-bottom:4px; }
.home-why-kor{ font-size:14px; font-weight:800; margin-bottom:14px; opacity:0.85; }
.home-why-desc{ font-size:13.5px; font-weight:500; line-height:1.6; margin-bottom:20px; opacity:0.75; }
.home-why-compare{ border-top:1px solid rgba(16,16,16,0.12); padding-top:14px; }
.home-why-card.dark .home-why-compare{ border-top-color:rgba(251,251,243,0.14); }
.home-why-compare .row{
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
font-size:12px; font-weight:600; padding:5px 0; opacity:0.55;
}
.home-why-compare .row.brand{ opacity:1; font-weight:800; font-size:12.5px; }
.home-why-card.light .row.brand .value{ color:var(--orange); }
.home-why-card.neon .row.brand .value{ color:var(--blue); }
.home-why-card.dark .row.brand .value{ color:var(--lime); }
.home-download-badge{
display:flex; align-items:center; justify-content:center; gap:10px;
width:fit-content; margin:32px auto 0; padding:16px 28px;
background:var(--lime); border-radius:999px;
font-size:15px; font-weight:800; letter-spacing:-0.01em; color:var(--ink);
text-decoration:none; min-height:44px;
}
/* ===== SOURCE: 4_왝트_홈_05_06(1).html ===== */
:root{
--lime: #CFFF04;
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
--warm: #F2F0EB;
--deep-gray: #DFDBD2;
--muted: #77756F;
--line: rgba(16,16,16,.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
.home-section{ word-break:keep-all; }
.home-title{ word-break:keep-all; }
/* ===== SECTION 05 — WACT SERVICES ===== */
.home-services{ background:#ffffff; color:var(--ink); padding:52px 24px 60px; }
.home-services .home-eyebrow{
font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
color:var(--pink); margin-bottom:14px; display:block;
}
.home-services .home-title{
font-size:27px; font-weight:900; letter-spacing:-0.02em; line-height:1.3;
margin-bottom:30px; color:var(--ink);
}
.home-service-cards{ display:flex; flex-direction:column; gap:20px; }
.home-service-card{
border-radius:22px; padding:26px 22px; text-align:left; width:100%;
border:1px solid rgba(16,16,16,0.08); box-shadow:0 12px 28px rgba(16,16,16,0.05);
}
.home-service-card.light{ background:var(--deep-gray); }
.home-service-card.dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.home-service-card.neon{ background:var(--lime); border-color:rgba(16,16,16,0.15); }
.home-service-num{ font-size:12.5px; font-weight:700; color:rgba(16,16,16,0.4); margin-bottom:10px; display:block; }
.home-service-card.dark .home-service-num{ color:rgba(251,251,243,0.4); }
.home-service-name{ font-size:22px; font-weight:900; margin-bottom:8px; letter-spacing:-0.01em; }
.home-service-tagline{ font-size:15px; font-weight:700; margin-bottom:14px; }
.home-service-desc{ font-size:14px; font-weight:500; line-height:1.65; margin-bottom:18px; opacity:0.72; }
.home-service-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.home-service-tags span{
font-size:12px; font-weight:700; letter-spacing:-0.005em; padding:7px 13px; border-radius:999px;
background:rgba(16,16,16,0.07); color:var(--ink);
}
.home-service-card.dark .home-service-tags span{ background:rgba(251,251,243,0.14); color:var(--paper); }
.home-service-card.neon .home-service-tags span{ background:rgba(16,16,16,0.1); }
.home-service-checklist{ list-style:none; margin:0 0 18px; padding:0; border-top:1px solid rgba(16,16,16,0.08); }
.home-service-card.dark .home-service-checklist{ border-top-color:rgba(251,251,243,0.14); }
.home-service-checklist li{
display:flex; align-items:flex-start; gap:8px; padding:11px 0;
border-bottom:1px solid rgba(16,16,16,0.08); font-size:13px; font-weight:600; line-height:1.5;
}
.home-service-card.dark .home-service-checklist li{ border-bottom-color:rgba(251,251,243,0.14); }
.home-service-checklist li .check{ flex-shrink:0; margin-top:1px; }
.home-service-card.light .check{ color:#8C9A1E; }
.home-service-card.dark .check{ color:var(--lime); }
.home-service-card.neon .check{ color:var(--pink); }
.home-service-card-cta{
display:block; width:100%; text-align:center; margin-top:16px;
font-size:14px; font-weight:800; padding:14px 20px; border-radius:12px;
border:none; cursor:pointer; text-decoration:none;
}
.home-service-card.light .home-service-card-cta{ background:var(--ink); color:var(--paper); }
.home-service-card.dark .home-service-card-cta{ background:var(--lime); color:var(--ink); }
.home-service-card.neon .home-service-card-cta{ background:var(--ink); color:var(--lime); }
/* WACT UP — GO·GET·GOAL 레벨 상세 */
.home-up-levels{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.home-up-level{ border-radius:14px; padding:14px 16px; background:rgba(251,251,243,0.06); border:1px solid rgba(251,251,243,0.12); }
.home-up-level-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.home-up-level-name{ font-size:15px; font-weight:900; }
.home-up-level.go .home-up-level-name{ color:var(--lime); }
.home-up-level.get .home-up-level-name{ color:var(--pink); }
.home-up-level.goal .home-up-level-name{ color:var(--lime); }
.home-up-level-badge{
font-size:10px; font-weight:800; letter-spacing:0.02em; padding:3px 8px; border-radius:999px;
background:rgba(251,251,243,0.12); color:rgba(251,251,243,0.7);
}
.home-up-level-desc{ font-size:12.5px; font-weight:500; line-height:1.55; color:rgba(251,251,243,0.7); }
/* WACT ONE — 잠금 안내 + 4단계 프로세스 */
.home-one-lock{
display:flex; align-items:center; gap:10px; margin:16px 0;
padding:12px 14px; border-radius:12px; background:rgba(16,16,16,0.08);
font-size:12px; font-weight:700; line-height:1.5;
}
.home-one-lock .icon{ flex-shrink:0; font-size:16px; }
.home-one-steps{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.home-one-step{ text-align:center; padding:14px 8px; border-radius:12px; background:rgba(16,16,16,0.08); }
.home-one-step .num{ font-size:20px; font-weight:900; color:var(--ink); display:block; }
.home-one-step .label{ font-size:11.5px; font-weight:700; opacity:0.75; margin-top:2px; display:block; }
.home-service-principles{ margin-top:28px; padding-top:24px; border-top:1px solid rgba(16,16,16,0.1); }
.home-service-principle{
display:flex; align-items:baseline; gap:8px; font-size:17px; font-weight:900;
letter-spacing:-0.01em; line-height:1.4; color:var(--ink); padding:10px 0;
}
.home-service-principle .arrow{ color:var(--pink); flex-shrink:0; font-weight:900; }
.home-services-cta{ text-align:center; margin-top:36px; }
.home-services-cta .home-cta{
font-size:15px; font-weight:800; color:var(--paper); background:var(--ink);
padding:14px 28px; border-radius:999px; border:none; cursor:pointer;
display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
/* --warm(연그레이 배경)/--muted/--line 은 이 섹션 전용 보조 변수로 유지 */
.home-case-study {
background: var(--warm);
padding: 52px 24px 60px;
}
.home-section-head { margin-bottom: 30px; }
.home-case-study .home-eyebrow {
margin-bottom: 14px;
color: #6F6D67;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.home-case-study h1 {
max-width: 330px;
font-size: 27px;
font-weight: 900;
line-height: 1.32;
letter-spacing: -.02em;
word-break: keep-all;
}
.home-case-list { display: grid; gap: 20px; }
.home-case-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(16,16,16,.055);
border-radius: 22px;
background: #FFF;
box-shadow: 0 15px 36px rgba(16,16,16,.055);
}
/* 인포그래픽 대신 서비스별 컬러 구분 + 역할(ACTION) 한 줄 문구로 단순화 */
.home-case-visual {
position: relative;
height: 132px;
overflow: hidden;
background: var(--paper);
}
.home-topic-in, .home-topic-up, .home-topic-one {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px 18px;
}
.home-case-index,
.home-service-mark {
font-size: 10px;
font-weight: 900;
letter-spacing: .07em;
}
.home-service-mark { opacity: .6; }
.home-case-visual .home-topline {
display: flex; justify-content: space-between; align-items: center;
}
.home-role-line {
font-size: 18px;
font-weight: 900;
line-height: 1.35;
letter-spacing: -.015em;
word-break: keep-all;
}
.home-topic-in { background: var(--deep-gray); color: var(--ink); }
.home-topic-in .home-role-line { color: var(--ink); }
.home-topic-in .home-role-line b { color: #8C9A1E; }
.home-topic-up { background: var(--ink); color: var(--paper); }
.home-topic-up .home-service-mark { color: var(--lime); opacity: 1; }
.home-topic-up .home-role-line b { color: var(--lime); }
.home-topic-one { background: var(--lime); color: var(--ink); }
.home-topic-one .home-role-line b { color: var(--pink); }
.home-case-body { padding: 18px 18px 20px; }
.home-case-title {
margin-bottom: 16px;
font-size: clamp(13.5px, 3.9vw, 16px);
font-weight: 900;
line-height: 1.35;
letter-spacing: -.035em;
word-break: keep-all;
white-space: nowrap;
}
.home-story { display: grid; gap: 12px; }
.home-story-item {
display: grid;
grid-template-columns: 58px 1fr;
align-items: start;
gap: 10px;
}
.home-story-label {
padding-top: 2px;
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
}
.home-story-item.action .home-story-label { color: var(--pink); }
.home-story-item.result .home-story-label { color: var(--ink); }
.home-story-copy {
font-size: 11px;
font-weight: 800;
line-height: 1.42;
letter-spacing: -.025em;
word-break: keep-all;
}
.home-story-item + .home-story-item {
border-top: 1px solid var(--line);
padding-top: 12px;
}
@media (max-width: 370px) {
.home-case-study { padding-inline: 16px; }
h1 { font-size: 28px; }
.home-story-item { grid-template-columns: 52px 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {}
/* ===== SOURCE: 5_왝트_홈_07_08(1).html ===== */
:root{
--lime: #CFFF04;
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
--pink-soft: #FDEAF3;
}
*{box-sizing:border-box; margin:0; padding:0;}
.home-section{ padding:52px 24px; word-break:keep-all; }
.home-eyebrow{
font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
margin-bottom:14px; display:block;
}
.home-title{ font-size:27px; font-weight:900; letter-spacing:-0.02em; line-height:1.32; margin-bottom:16px; }
.home-desc{ font-size:14px; font-weight:500; line-height:1.65; }
.home-btn-primary{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--ink); color:var(--lime); font-size:14.5px; font-weight:800;
padding:15px 20px; border-radius:999px; border:none; cursor:pointer; min-height:44px; text-decoration:none;
width:100%;
}
.home-btn-ghost{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:transparent; font-size:14px; font-weight:700;
padding:14px 20px; border-radius:999px; cursor:pointer; min-height:44px; text-decoration:none;
width:100%;
}
/* ===== SECTION 07 — BNR INTRO ===== */
.home-bnr{ background:var(--pink); color:var(--paper); }
.home-bnr .home-eyebrow{ color:rgba(251,251,243,0.75); }
/* 3원 벤다이어그램 박스 : Body(상단)·Needs(좌)·Relationship(우), 중앙 BNR */
.home-bnr-diagram-box{
position:relative; aspect-ratio:1/1.05; margin-bottom:26px;
border:1.5px solid rgba(251,251,243,0.9); border-radius:24px;
overflow:hidden;
}
/* venn을 정사각형으로 고정해 3원이 대칭으로 겹치도록, 박스 안에서 가운데 정렬 */
.home-venn{
position:absolute; width:78%; aspect-ratio:1;
left:50%; top:50%; transform:translate(-50%,-50%);
}
.home-venn .circle{
position:absolute; width:60%; aspect-ratio:1; border-radius:50%;
border:2.5px solid #ffffff;
box-shadow:
0 0 6px rgba(255,255,255,0.95),
0 0 16px rgba(255,255,255,0.6),
0 0 26px rgba(216,245,62,0.85),
0 0 48px rgba(216,245,62,0.55);
}
.home-venn .circle.top{ top:0%; left:20%; }
.home-venn .circle.left{ top:34.6%; left:0%; }
.home-venn .circle.right{ top:34.6%; left:40%; }
.home-venn .label{
position:absolute; font-size:13px; font-weight:700; letter-spacing:-0.005em; color:var(--paper);
z-index:2;
}
.home-venn .label.body{ top:6%; left:50%; transform:translateX(-50%); }
.home-venn .label.needs{ top:68%; left:8%; }
.home-venn .label.relationship{ top:68%; right:4%; }
.home-venn .label.bnr{
top:52%; left:50%; transform:translate(-50%,-50%);
font-size:14.4px; font-weight:900; letter-spacing:0.03em; color:var(--lime);
text-shadow:0 0 10px rgba(216,245,62,0.8), 0 0 20px rgba(216,245,62,0.4);
}
.home-bnr-keyword{ font-size:13px; font-weight:900; letter-spacing:0.1em; margin-bottom:16px; }
.home-bnr .home-desc{ margin-bottom:16px; }
.home-bnr-strong{ font-size:17px; font-weight:800; line-height:1.6; background:rgba(16,16,16,0.12); padding:14px 16px; border-radius:12px; }
.home-bnr-ctas{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.home-bnr .home-btn-ghost{ color:var(--paper); border:1px solid rgba(251,251,243,0.4); }
/* ===== SECTION 08 — LECTURE SCHEDULE ===== */
.home-schedule{ background:var(--pink-soft); color:var(--ink); }
.home-schedule .home-eyebrow{ color:var(--pink); }
.home-swipe-track{
display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
margin:6px -24px 0; padding:6px 24px 4px; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.home-swipe-track::-webkit-scrollbar{ display:none; }
.home-swipe-track{ cursor:grab; }
.home-swipe-track.is-dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.home-swipe-card{
scroll-snap-align:start; flex:0 0 78%; background:#fff; border-radius:16px; padding:20px;
border:1px solid rgba(16,16,16,0.1); min-height:44px;
}
.home-swipe-card .status{
display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.05em;
color:var(--pink); background:rgba(255,46,138,0.1); padding:5px 10px; border-radius:999px; margin-bottom:14px;
}
.home-swipe-card h3{ font-size:16px; font-weight:800; margin:0 0 6px; }
.home-swipe-card p{ font-size:13px; font-weight:500; line-height:1.6; color:#6a655a; margin:0; }
/* 스와이프 진행 표시 바 */
.home-swipe-progress-track{
position:relative; height:6px; background:rgba(16,16,16,0.1); border-radius:999px; overflow:hidden; margin-top:14px;
cursor:pointer;
}
.home-swipe-progress-fill{
position:absolute; top:0; left:0; height:100%; width:50%; background:var(--pink); border-radius:999px;
transition:width .12s ease-out, margin-left .12s ease-out;
cursor:grab;
}
.home-swipe-progress-fill.is-dragging{ cursor:grabbing; transition:none; }
.home-schedule-note{ font-size:11.5px; font-weight:600; color:#8a8578; margin-top:18px; }
.home-schedule-ctas{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.home-schedule .home-btn-primary{ background:var(--pink); color:var(--paper); flex:1; min-width:140px; }
.home-schedule .home-btn-ghost{ background:transparent; color:var(--ink); border:1px solid rgba(16,16,16,0.25); flex:1; min-width:140px; }
/* ===== SOURCE: 6_왝트_홈_09_CONTACT(1).html ===== */
:root{
--lime: #CFFF04;
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
}
*{box-sizing:border-box; margin:0; padding:0;}
.home-section{ padding:52px 24px; word-break:keep-all; }
.home-eyebrow{
font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
margin-bottom:14px; display:block;
}
.home-title{ font-size:27px; font-weight:900; letter-spacing:-0.02em; line-height:1.32; margin-bottom:16px; }
.home-desc{ font-size:14px; font-weight:500; line-height:1.65; }
.home-btn-primary{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--ink); color:var(--lime); font-size:14.5px; font-weight:800;
padding:15px 20px; border-radius:999px; border:none; cursor:pointer; min-height:44px; text-decoration:none;
width:100%;
}
/* ===== SECTION 11 — CONTACT ===== */
.home-contact{ background:var(--ink); color:var(--paper); }
.home-contact .home-eyebrow{ color:var(--pink); }
.home-contact-person{ margin:26px 0 24px; padding:18px 0; border-top:1px solid rgba(251,251,243,0.15); border-bottom:1px solid rgba(251,251,243,0.15); }
.home-contact-person strong{ display:block; font-size:16px; font-weight:800; margin-bottom:4px; }
.home-contact-person span{ display:block; font-size:13px; color:rgba(251,251,243,0.6); margin-bottom:8px; }
.home-contact-person a{ color:var(--lime); font-size:13.5px; font-weight:700; text-decoration:none; }
.home-contact-label{ font-size:12px; font-weight:800; letter-spacing:0.04em; margin-bottom:12px; display:block; color:rgba(251,251,243,0.6); }
.home-contact-choices{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.home-contact-choice{
font-size:12.5px; font-weight:700; padding:9px 14px; border-radius:999px;
background:transparent; border:1px solid rgba(251,251,243,0.3); color:var(--paper); cursor:pointer; min-height:40px;
}
.home-contact-choice[aria-pressed="true"]{ background:var(--pink); border-color:var(--pink); }
.home-form{ display:flex; flex-direction:column; gap:12px; }
.home-form label{ font-size:12.5px; font-weight:700; color:rgba(251,251,243,0.7); margin-bottom:6px; display:block; }
.home-form input, .home-form textarea{
width:100%; background:rgba(251,251,243,0.06); border:1px solid rgba(251,251,243,0.2);
border-radius:10px; padding:13px 14px; font-size:14px; color:var(--paper); font-family:inherit;
}
.home-form input:focus-visible, .home-form textarea:focus-visible{ outline:2px solid var(--lime); outline-offset:1px; }
.home-form textarea{ min-height:110px; resize:vertical; }
.home-form-file{ padding:10px 14px; cursor:pointer; }
.home-form-file::file-selector-button{
background:var(--lime); color:var(--ink); font-weight:800; font-size:12.5px;
border:none; border-radius:8px; padding:8px 14px; margin-right:12px; cursor:pointer;
}
.home-contact .home-btn-primary{
margin:8px auto 0; width:fit-content; display:inline-flex; align-self:center;
background:var(--lime); color:var(--ink);
}
/* ===== SOURCE: 7_왝트_홈_FOOTER(1).html ===== */
:root{
--lime: #CFFF04;
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
--footer-ink: #2A2A2A;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* ===== SECTION 13 — FOOTER ===== */
.home-footer{ background:var(--footer-ink); color:rgba(251,251,243,0.7); padding:48px 24px 36px; }
.home-footer-logo-img{ height:22px; width:auto; display:block; margin-bottom:22px; }
.home-footer-tagline{ font-size:14px; font-weight:500; line-height:1.6; margin-bottom:26px; color:rgba(251,251,243,0.75); }
.home-footer-tagline b{ display:block; color:var(--paper); font-weight:800; font-size:16px; margin-bottom:6px; }
.home-footer-block{ margin-bottom:34px; }
.home-footer-label{
font-size:17px; font-weight:800; letter-spacing:-0.01em;
color:var(--paper); margin-bottom:10px; display:block;
}
.home-footer-lines p{ font-size:14px; font-weight:500; color:rgba(251,251,243,0.75); line-height:1.85; margin:0; }
.home-footer-lines a{ color:rgba(251,251,243,0.75); text-decoration:none; }
.home-footer-quote{ font-size:20px; font-weight:800; color:var(--lime); margin:26px 0 24px; }
.home-footer-bottom{ border-top:1px solid rgba(251,251,243,0.14); padding-top:18px; font-size:15.4px; font-weight:800; line-height:1.7; }
.home-footer-legal-links{ display:flex; gap:12px; margin-bottom:6px; }
.home-footer-legal-links a{ color:var(--paper); text-decoration:none; }
.home-footer-legal-links .sep{ color:rgba(251,251,243,0.4); }
.home-footer-copy{ color:var(--paper); }
/* ===== SOURCE: 1_왝트_홈_MOTION(1).html ===== */
:root{
--lime: #CFFF04;
--lime-soft: rgba(216,245,62,0.55);
--pink: #FF2E8A;
--ink: #101010;
--paper: #FBFBF3;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* ===== NAV ===== */
.nav{ display:flex; justify-content:space-between; align-items:center; padding:24px 22px 8px; }
.nav img.brand{ height:22px; width:auto; display:block; }
.burger{ width:24px; display:flex; flex-direction:column; gap:5px; }
.burger span{ display:block; height:2.5px; background:var(--ink); border-radius:2px; }
/* ===== IDENTITY MOTION (상단 타원) : v3 궤도모션 + 프레임 1개 추가(4단), 무의미한 점선 링 제거, 핑크 미사용 ===== */
.identity-stage{
margin:32px 20px 0; position:relative; height:224px;
border-radius:999px; background:#0a0a0a; overflow:hidden;
}
.glow-orb{
position:absolute; width:170px; height:170px; border-radius:50%;
background:radial-gradient(circle, rgba(216,245,62,0.28), transparent 70%);
filter:blur(8px); z-index:1;
animation:drift 11s ease-in-out infinite;
}
.glow-orb.id{ top:-50px; left:-30px; }
@keyframes drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(20px,16px); } }
/* WITH & ACT를 원형 점선으로 연결하는 구조 */
.ring-wrap{
position:absolute;
top:46%; left:50%;
width:166px; height:166px;
margin:-83px 0 0 -83px;
border-radius:50%;
z-index:1;
animation:spin 22s linear infinite;
}
.ring-wrap::before{
content:'';
position:absolute; inset:0;
border:1.5px dashed rgba(216,245,62,0.4);
border-radius:50%;
}
.ring-wrap i{
position:absolute;
width:6px; height:6px;
border-radius:50%;
background:var(--lime);
}
.ring-wrap i:nth-child(1){ top:-3px; left:50%; margin-left:-3px; }
.ring-wrap i:nth-child(2){ top:50%; right:-3px; margin-top:-3px; opacity:1; background:var(--pink); box-shadow:0 0 6px rgba(255,46,138,0.6); }
.ring-wrap i:nth-child(3){ bottom:-3px; left:22%; opacity:0.8; }
.frame{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; animation:cycle5 15s infinite; }
.frame.f1{ animation-delay:0s; }
.frame.f2{ animation-delay:3s; }
.frame.f3{ animation-delay:6s; }
.frame.f4{ animation-delay:9s; }
.frame.f5{ animation-delay:12s; }
@keyframes cycle5{
0%{opacity:0; transform:scale(0.96);}
2.4%{opacity:1; transform:scale(1);}
17.6%{opacity:1; transform:scale(1);}
21.6%{opacity:0; transform:scale(1.02);}
100%{opacity:0;}
}
/* f1 : WITH / ACT 궤도 회전 (v3) */
.word-orbit{ position:relative; width:170px; height:170px; animation:spin 20s linear infinite reverse; }
.word-orbit .pill{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; animation:counterspin 20s linear infinite; }
.word-orbit .pill.a{ top:50%; left:-6px; transform:translateY(-50%); }
.word-orbit .pill.b{ top:50%; right:-6px; transform:translateY(-50%); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes counterspin{ to{ transform:translateY(-50%) rotate(360deg); } }
.word-orbit .pill .w{ font-size:19px; font-weight:900; color:var(--lime); letter-spacing:0.01em; }
.word-orbit .pill .k{ font-size:10px; font-weight:600; color:rgba(251,251,243,0.5); letter-spacing:0.03em; }
.word-orbit .plus{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:15px; color:rgba(216,245,62,0.5); font-weight:700; }
/* f2 : WITH+ACT 조각들이 각기 다른 방향에서 회전하며 날아와 "WACT" 텍스트로 합쳐졌다가, 다시 흩어지는 연출 */
.assemble-mark{
position:relative; font-size:32px; font-weight:900; letter-spacing:-0.05em;
color:var(--lime); -webkit-text-stroke:0.9px var(--lime); white-space:nowrap;
animation:mark-glow-pulse 6s ease-in-out infinite;
}
@keyframes mark-glow-pulse{
0%,55%{ text-shadow:0 0 14px rgba(216,245,62,0.4); filter:brightness(1); }
70%{ text-shadow:0 0 14px rgba(216,245,62,0.4); filter:brightness(1); }
76%{ text-shadow:0 0 10px #ffffff, 0 0 30px rgba(216,245,62,1), 0 0 55px rgba(216,245,62,0.6); filter:brightness(1.3); }
82%{ text-shadow:0 0 14px rgba(216,245,62,0.5); filter:brightness(1.05); }
88%{ text-shadow:0 0 12px #ffffff, 0 0 36px rgba(216,245,62,1), 0 0 68px rgba(216,245,62,0.65); filter:brightness(1.4); }
94%{ text-shadow:0 0 10px #ffffff, 0 0 42px rgba(216,245,62,1), 0 0 84px rgba(216,245,62,0.5); filter:brightness(1.5); }
100%{ text-shadow:0 0 14px rgba(216,245,62,0.4); filter:brightness(1); }
}
.assemble-mark span{
display:inline-block; position:relative;
animation:letter-assemble 6s cubic-bezier(.2,.8,.2,1) infinite;
}
.assemble-mark span:nth-child(1){ animation-delay:0s; }
.assemble-mark span:nth-child(2){ animation-delay:0.09s; }
.assemble-mark span:nth-child(3){ animation-delay:0.18s; }
.assemble-mark span:nth-child(4){ animation-delay:0.27s; }
@keyframes letter-assemble{
0%{ opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(0.4); filter:blur(3px); }
22%{ opacity:1; transform:translate(0,0) rotate(0deg) scale(1); filter:blur(0px); }
80%{ opacity:1; transform:translate(0,0) rotate(0deg) scale(1); filter:blur(0px); }
100%{ opacity:0; transform:translate(calc(var(--tx) * -0.8),calc(var(--ty) * -0.8)) rotate(calc(var(--rot) * -1)) scale(0.4); filter:blur(3px); }
}
/* f3 : 태그라인 */
.frame3 .tagline{ font-size:18px; font-weight:800; color:var(--paper); letter-spacing:-0.01em; text-align:center; line-height:1.4; padding:0 30px; word-break:keep-all; }
.frame3 .tagline b{ color:var(--lime); }
/* f4 : 산업군 태그 (신규 추가된 네번째 모션) */
.frame4 .tag-pill{
border:1px solid rgba(216,245,62,0.4); border-radius:999px;
padding:9px 20px; font-size:13.5px; font-weight:800; color:var(--lime); letter-spacing:0.01em;
}
.frame4 .tag-caption{ margin-top:8px; font-size:11px; font-weight:600; color:rgba(251,251,243,0.45); letter-spacing:0.03em; }
/* f5 : BNR — Femtech · Wellness(frame4)와 동일한 pill/caption 구조, 컬러만 핑크로 */
.frame5 .tag-pill{
border:1px solid rgba(255,46,138,0.4); border-radius:999px;
padding:9px 20px; font-size:13.5px; font-weight:800; color:var(--pink); letter-spacing:0.01em;
}
.frame5 .tag-caption{ margin-top:8px; font-size:11px; font-weight:600; color:rgba(251,251,243,0.45); letter-spacing:0.03em; }
.dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:3; }
.dots span{ width:5px; height:5px; border-radius:50%; background:rgba(216,245,62,0.28); }
.dots span.on{ background:var(--lime); }
/* ===== HOOK : 굵은 그래픽 타이포 — 두꺼운 액센트 바 + 볼드 왝트, 여유로운 행간의 본문 2줄 ===== */
.hook-wrap{ padding:60px 26px 60px; }
.brand-row{ display:flex; align-items:stretch; gap:13px; margin-bottom:20px; }
.hook-accent{ width:6px; border-radius:2px; background:var(--ink); }
.brand-word{
display:block; font-size:34px; font-weight:900; letter-spacing:-0.01em;
color:var(--ink); line-height:0.92;
}
.line{
font-size:24px; font-weight:900; letter-spacing:-0.02em; line-height:1.32;
color:#1c1c18; word-break:keep-all; max-width:270px; margin-bottom:2px;
}
.meta-line{
font-size:13px; font-weight:500; letter-spacing:-0.003em; line-height:1.5;
color:#3a3a34; word-break:keep-all;
}
.meta-line .mdot{ margin:0 4px; opacity:0.6; }
/* ===== 롤링 배너 : 상단부 바로 아래, 좌측 라임/우측 핑크 글로우 + 무한 스크롤 ===== */
.ticker-banner{ position:relative; height:78px; background:#0a0a0a; overflow:hidden; }
.ticker-banner::before{
content:''; position:absolute; left:0; top:0; bottom:0; width:34%; z-index:2; pointer-events:none;
background:radial-gradient(ellipse at left, rgba(216,245,62,0.32), transparent 72%);
}
.ticker-banner::after{
content:''; position:absolute; right:0; top:0; bottom:0; width:34%; z-index:2; pointer-events:none;
background:radial-gradient(ellipse at right, rgba(255,46,138,0.32), transparent 72%);
}
.ticker-track{
display:flex; align-items:center; height:100%; width:max-content;
white-space:nowrap; animation:ticker-scroll 20s linear infinite;
}
.ticker-set{ display:flex; align-items:center; gap:14px; padding-right:64px; }
.t-tag{ font-size:10.5px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; }
.t-tag.lime{ color:var(--lime); }
.t-tag.pink{ color:var(--pink); }
.t-line{ width:40px; height:1px; opacity:0.65; }
.t-line.lime{ background:var(--lime); }
.t-line.pink{ background:var(--pink); }
.t-center{ font-size:13px; font-weight:800; color:rgba(251,251,243,0.85); letter-spacing:-0.003em; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* ===== BUSINESS MODEL MOTION (하단 직사각형) : 상단과 통일감 + 라이트 트레일로 차별화, 핑크 미사용 ===== */
.model-stage{ position:relative; height:340px; background:#0a0a0a; overflow:hidden; }
.glow-orb.bottom{ top:-60px; right:-50px; }
/* 은은한 행성감 — 모서리에 살짝 걸치는 구체, 과하지 않게 저채도/저대비로 */
.planet{
position:absolute; z-index:0; width:250px; height:250px; border-radius:50%;
right:-95px; bottom:-120px; pointer-events:none;
background:radial-gradient(circle at 32% 28%, rgba(216,245,62,0.10), rgba(20,16,14,0.85) 52%, #0a0a0a 72%);
box-shadow:
inset -16px -14px 34px rgba(0,0,0,0.55),
inset 8px 6px 18px rgba(216,245,62,0.05),
0 0 50px rgba(216,245,62,0.05);
opacity:0.7;
animation:planet-drift 16s ease-in-out infinite;
}
.planet::after{
content:''; position:absolute; inset:-14px; border-radius:50%;
border:1px solid rgba(255,46,138,0.08);
transform:rotate(-18deg) scaleY(0.34);
}
@keyframes planet-drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-6px,-5px); } }
.trail-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.trail-path{ fill:none; stroke-linecap:round; }
.tp1{ stroke:var(--lime); stroke-width:2; opacity:0.45; stroke-dasharray:6 300; animation:flow 7s linear infinite; }
.tp2{ stroke:var(--lime-soft); stroke-width:1.6; opacity:0.35; stroke-dasharray:4 260; animation:flow 9s linear infinite reverse; }
.tp3{ stroke:var(--paper); stroke-width:1.2; opacity:0.18; stroke-dasharray:3 220; animation:flow 11s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-600; } }
.mframe{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; justify-content:flex-end;
padding:42px 24px 58px;
opacity:0; animation:mcycle 9s infinite;
}
.mframe.m1{ animation-delay:0s; }
.mframe.m2{ animation-delay:4.5s; }
@keyframes mcycle{
0%{opacity:0; transform:translateY(8px);} 4%{opacity:1; transform:translateY(0);}
46%{opacity:1; transform:translateY(0);} 50%{opacity:0;} 100%{opacity:0;}
}
/* 사라지지 않는 그라데이션 키워드 (Consulting / Lecture) */
.m-kw{
display:inline-block; font-size:34px; font-weight:900; letter-spacing:-0.01em; margin-bottom:6px;
background:linear-gradient(100deg, var(--lime) 0%, #f4ffb0 50%, var(--lime) 100%);
background-size:220% 100%;
-webkit-background-clip:text; background-clip:text; color:transparent;
animation:kw-shimmer 4.5s ease-in-out infinite;
}
@keyframes kw-shimmer{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }
/* 은은한 연두 그라데이션 배경 워시 (밋밋함 제거용, 아주 옅게) */
.bg-wash{
position:absolute; inset:0; z-index:0;
background:
radial-gradient(ellipse at 18% 12%, rgba(216,245,62,0.09), transparent 55%),
radial-gradient(ellipse at 88% 92%, rgba(216,245,62,0.06), transparent 60%);
}
/* 코멧 스윕 배경 (선호하셨던 유형) */
.comet-path{ fill:none; stroke:rgba(216,245,62,0.10); stroke-width:1.2; }
.comet-trail{ fill:none; stroke-linecap:round; stroke-width:2.2; stroke-dasharray:120 900; }
.comet-head{ offset-path:path('M -10 260 C 90 60, 230 340, 340 90 S 470 40, 520 140'); }
/* Consulting 프레임(0~4.5s)과 함께 보이는 라임 코멧 */
.comet-trail-a{ stroke:var(--lime); opacity:0; animation:comet-trail-anim 9s ease-in-out infinite; animation-delay:0s; animation-fill-mode:backwards; }
.comet-head-a{ fill:var(--lime); opacity:0; filter:drop-shadow(0 0 6px rgba(216,245,62,0.9)) drop-shadow(0 0 14px rgba(216,245,62,0.5));
animation:comet-move 9s ease-in-out infinite; animation-delay:0s; animation-fill-mode:backwards; }
/* Lecture 프레임(4.5~9s)과 함께 보이는 핑크 코멧 */
.comet-trail-b{ stroke:var(--pink); opacity:0; animation:comet-trail-anim 9s ease-in-out infinite; animation-delay:4.5s; animation-fill-mode:backwards; }
.comet-head-b{ fill:var(--pink); opacity:0; filter:drop-shadow(0 0 6px rgba(255,46,138,0.9)) drop-shadow(0 0 14px rgba(255,46,138,0.5));
animation:comet-move 9s ease-in-out infinite; animation-delay:4.5s; animation-fill-mode:backwards; }
@keyframes comet-move{ 0%{offset-distance:0%;opacity:0;} 4%{opacity:1;} 46%{offset-distance:100%;opacity:1;} 50%{opacity:0;} 100%{opacity:0;} }
@keyframes comet-trail-anim{ 0%{stroke-dashoffset:120;opacity:0;} 4%{opacity:0.7;} 46%{stroke-dashoffset:-780;opacity:0.7;} 50%{opacity:0;} 100%{opacity:0;} }
.sparkle{ position:absolute; border-radius:50%; background:var(--lime); animation:twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:0.15; transform:scale(0.7); } 50%{ opacity:0.9; transform:scale(1.15); } }
/* 태양처럼 회전하는 그라데이션 링 + 글로우를 두른 CTA */
.cta-fab .sun-ring{
position:absolute; inset:-7px; border-radius:50%;
background:conic-gradient(from 0deg,
var(--lime), rgba(216,245,62,0.05) 22%, var(--lime) 45%,
rgba(216,245,62,0.05) 60%, var(--pink) 78%, rgba(216,245,62,0.05) 90%, var(--lime) 100%);
animation:sun-spin 5s linear infinite;
filter:blur(0.5px);
}
.cta-fab .sun-ring::after{ content:''; position:absolute; inset:6px; border-radius:50%; background:#0a0a0a; }
@keyframes sun-spin{ to{ transform:rotate(360deg); } }
.cta-fab .core{
position:absolute; inset:0; border-radius:50%; background:var(--lime);
display:flex; align-items:center; justify-content:center;
box-shadow:0 0 22px rgba(216,245,62,0.55), 0 8px 20px rgba(0,0,0,0.35);
}
.cta-fab .core svg{ width:27px; height:27px; }
.m-eyebrow{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(216,245,62,0.85); font-weight:700; margin-bottom:8px; }
.m-title{
font-size:24px; font-weight:900; color:var(--paper); letter-spacing:-0.02em; margin-bottom:7px;
display:inline-block; animation:title-wipe 9s infinite;
}
@keyframes title-wipe{
0%{ clip-path:inset(0 101% 0 0); transform:translateX(-6px); }
9%{ clip-path:inset(0 101% 0 0); transform:translateX(-6px); }
24%{ clip-path:inset(0 0 0 0); transform:translateX(0); }
100%{ clip-path:inset(0 0 0 0); transform:translateX(0); }
}
.mframe.m1 .m-title{ animation-delay:0s; }
.mframe.m2 .m-title{ animation-delay:4.5s; }
.m-desc{ font-size:13px; font-weight:500; color:rgba(251,251,243,0.62); line-height:1.62; letter-spacing:-0.003em; max-width:320px; word-break:keep-all; overflow-wrap:break-word; }
.mframe.m2 .m-desc{ font-size:12px; letter-spacing:-0.015em; white-space:nowrap; }
.m-chips{ display:flex; gap:6px; margin-top:13px; flex-wrap:wrap; }
.m-chips span{ display:inline-flex; align-items:center; font-size:10.5px; line-height:1; font-weight:800; color:var(--ink); background:var(--lime); border-radius:6px; padding:5px 9px; white-space:nowrap; }
.cta-fab{
position:absolute; right:22px; top:56px; width:80px; height:80px; z-index:4;
}
@media (prefers-reduced-motion: reduce){
.frame,.mframe,.glow-orb,.ring-wrap,.word-orbit,.word-orbit .pill,.assemble-mark span,.m-title,.m-kw,.sun-ring,.comet-head-a,.comet-head-b,.comet-trail-a,.comet-trail-b,.sparkle{ animation:none !important; }
.frame{ opacity:1 !important; }
.frame.f2,.frame.f3,.frame.f4,.frame.f5{ display:none; }
.mframe{ opacity:1 !important; }
.mframe.m2{ display:none; }
}
/* Lecture / BNR 핑크 강조 */
.m-kw.pink{
background:linear-gradient(100deg, var(--pink) 0%, #ffd3ea 50%, var(--pink) 100%);
background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
animation:kw-shimmer 4.5s ease-in-out infinite;
}
.m-chips.pink span{ background:var(--pink); color:var(--paper); }
/* CTA 회전 링 : 네온 50% / 핑크 50% */
.sun-ring.split{
background:conic-gradient(from 0deg,
var(--lime) 0%, rgba(216,245,62,0.18) 20%, var(--lime) 46%,
var(--pink) 50%, rgba(255,46,138,0.18) 70%, var(--pink) 96%, var(--lime) 100%);
}
/* ========================================================================
PALETTE COHERENCE OVERRIDE
Reference: Neon Fuchsia / Electric Indigo / Cyber Lime / Graphite Black
Scope intentionally starts at .home-section so SECTION 00 MOTION stays
exactly as supplied.
======================================================================== */
.home-section,
.home-footer{
--palette-fuchsia:#FF2E9A;
--palette-indigo:#5D00FF;
--palette-lime:#CFFF04;
--palette-graphite:#1C1C1C;
--pink:var(--palette-fuchsia);
--blue:var(--palette-indigo);
--lime:var(--palette-lime);
--ink:var(--palette-graphite);
--footer-ink:var(--palette-graphite);
}
/* 01 ABOUT — neutral introduction, both brand colors as small cues */
.home-about{
background:#FDEAF3 !important;
color:var(--palette-graphite);
}
.home-about .home-eyebrow{ color:var(--palette-fuchsia); }
.home-about .home-about-title,
.home-about .home-greeting p,
.home-about .home-greeting .biz-lead{ color:var(--palette-graphite); }
.home-about .home-greeting p{ opacity:1; color:rgba(28,28,28,.82); }
.home-about .home-greeting .biz-lead{ opacity:1; }
.home-about .home-greeting .biz-item b{
padding:2px 7px 3px;
border-radius:5px;
background:var(--palette-lime);
color:var(--palette-graphite);
line-height:1.7;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
.home-about .home-greeting .biz-item + .biz-item b{
background:var(--palette-fuchsia);
color:var(--palette-graphite);
}
/* 02 TWO MODELS — shared Graphite Black, each model keeps its own color */
.home-two{ background:var(--palette-graphite); }
.home-two .home-eyebrow{ color:#fff; opacity:.65; }
.home-two-route{
display:flex;
align-items:center;
gap:13px;
margin:-10px 0 24px;
padding:13px 14px;
border:1px solid rgba(255,255,255,.15);
border-radius:16px;
background:rgba(255,255,255,.055);
}
.home-two-route-count{
display:flex;
flex:0 0 44px;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:50%;
background:linear-gradient(135deg,var(--palette-lime) 0 50%,var(--palette-fuchsia) 50% 100%);
color:var(--palette-graphite);
font-size:23px;
font-weight:950;
}
.home-two-route-copy strong{
display:block;
margin-bottom:4px;
color:#fff;
font-size:11px;
font-weight:900;
letter-spacing:.12em;
}
.home-two-route-copy span{
display:block;
color:rgba(255,255,255,.62);
font-size:11.5px;
font-weight:650;
line-height:1.45;
}
.home-two-card{
position:relative;
overflow:hidden;
box-shadow:0 15px 34px rgba(0,0,0,.22);
transition:transform .22s ease, box-shadow .22s ease;
}
.home-two-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.home-two-card:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.home-two-card.lime{ background:var(--palette-lime); color:var(--palette-graphite); }
.home-two-card.pink{ background:var(--palette-fuchsia); color:#fff; }
.home-two-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:15px;
}
.home-two-card-top .home-two-card-kicker{ margin-bottom:0; }
.home-business-no{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:31px;
height:24px;
padding:0 8px;
border:1px solid currentColor;
border-radius:999px;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
opacity:.72;
}
.home-two-card .home-cta{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:48px;
padding:12px 15px;
border-radius:999px;
font-size:13.5px;
font-weight:900;
}
.home-two-card.lime .home-cta{ background:var(--palette-graphite); color:var(--palette-lime); }
.home-two-card.pink .home-cta{ background:#fff; color:var(--palette-fuchsia); }
.home-two-card .home-cta-arrow{
display:flex;
align-items:center;
justify-content:center;
width:27px;
height:27px;
border-radius:50%;
background:currentColor;
font-size:0;
}
.home-two-card .home-cta-arrow::after{
content:'→';
color:var(--palette-graphite);
font-size:14px;
line-height:1;
}
.home-two-card.pink .home-cta-arrow::after{ color:#fff; }
#home-services,
#home-bnr{ scroll-margin-top:24px; }
/* 03–06 WACT SERVICE — Lime / White / Graphite rhythm */
.home-problem,
.home-why,
.home-services,
.home-case-study{
--pink:var(--palette-fuchsia);
--orange:var(--palette-fuchsia);
}
.home-problem{
background:var(--palette-lime);
color:var(--palette-graphite);
}
.home-problem .home-eyebrow,
.home-problem-list li span{ color:var(--palette-graphite); }
.home-problem-conclusion{ color:rgba(28,28,28,.68); }
.home-problem .home-btn-primary{ background:var(--palette-graphite); color:#fff; }
.home-problem .home-btn-ghost{ color:var(--palette-graphite); border-color:rgba(28,28,28,.38); }
.home-why{
background:var(--palette-graphite);
color:#fff;
text-align:left;
}
.home-why .home-eyebrow{ color:var(--palette-lime); opacity:1; }
.home-why-header{ text-align:center; }
.home-why-squiggle{ margin-left:auto; margin-right:auto; }
.home-why .home-download-badge{ margin:32px auto 0; }
.home-why-card.neon{ background:var(--palette-lime); color:var(--palette-graphite); }
.home-why-card.dark{ background:var(--palette-graphite); }
.home-why-card.light .row.brand .value{ color:var(--palette-indigo); }
.home-download-badge{ background:var(--palette-lime); color:var(--palette-graphite); }
.home-services{
background:#FBFBF3;
color:var(--palette-graphite);
}
.home-services .home-eyebrow{
display:inline-block;
width:auto;
padding:6px 10px;
border-radius:999px;
background:var(--palette-lime);
color:var(--palette-graphite);
}
.home-services .home-title{ color:var(--palette-graphite); }
.home-service-card.light{
background:#fff;
color:var(--palette-graphite);
border:1px solid rgba(28,28,28,.24);
box-shadow:inset 0 5px 0 var(--palette-lime),
0 18px 38px rgba(28,28,28,.14);
}
.home-service-card.dark{
background:var(--palette-graphite);
color:#fff;
border-color:rgba(255,255,255,.22);
}
.home-service-card.neon{ background:var(--palette-lime); color:var(--palette-graphite); }
.home-service-card.neon .check,
.home-up-level.get .home-up-level-name{ color:var(--palette-fuchsia); }
/* WACT UP — capture-inspired GO / GET / GOAL stage cards */
.home-up-levels{
gap:12px;
margin:18px 0;
}
.home-up-level{
padding:0;
overflow:hidden;
border-radius:18px;
background:#252832;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.home-up-level-head{
display:block;
margin:0;
padding:14px 16px 13px;
color:#101010;
}
.home-up-level.go .home-up-level-head{ background:#FFC044; }
.home-up-level.get .home-up-level-head{ background:#FF812B; }
.home-up-level.goal .home-up-level-head{ background:#FF4B1B; }
.home-up-level-kicker{
display:block;
margin-bottom:5px;
font-size:9px;
font-weight:900;
letter-spacing:.14em;
color:rgba(16,16,16,.72);
}
.home-up-level .home-up-level-name{
display:block;
color:#101010;
font-size:20px;
font-weight:950;
letter-spacing:-.03em;
line-height:1;
}
.home-up-level.go .home-up-level-name,
.home-up-level.get .home-up-level-name,
.home-up-level.goal .home-up-level-name{ color:#101010; }
.home-up-level-priority{
display:inline-flex;
margin-top:12px;
padding:6px 11px;
border-radius:999px;
background:#101010;
color:#FF4B1B;
font-size:10px;
font-weight:900;
}
.home-up-level-body{ padding:15px 16px 17px; }
.home-up-level-desc{
margin:0 0 14px;
color:rgba(255,255,255,.70);
font-size:11.5px;
font-weight:700;
font-style:italic;
line-height:1.72;
}
.home-up-level-list{
display:flex;
flex-direction:column;
gap:8px;
margin:0;
padding:0;
list-style:none;
}
.home-up-level-list li{
position:relative;
padding-left:19px;
color:rgba(255,255,255,.88);
font-size:11px;
font-weight:700;
line-height:1.55;
}
.home-up-level-list li::before{
content:'➜';
position:absolute;
left:0;
top:0;
color:#FF5A1F;
font-size:11px;
font-weight:900;
}
.home-up-level-list strong{ color:#fff; font-weight:900; }
.home-up-level-footer{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.home-up-level-footer span,
.home-up-level-badge{
display:inline-flex;
align-items:center;
min-height:25px;
padding:5px 9px;
border-radius:999px;
background:rgba(255,255,255,.13);
color:#fff;
font-size:9.5px;
font-weight:900;
letter-spacing:0;
}
.home-up-level-footer .performance{
background:var(--palette-fuchsia);
color:#fff;
}
.home-up-role{
margin-top:18px;
padding:20px;
border-radius:15px;
background:#111219;
border:1px solid rgba(255,75,27,.78);
}
.home-up-role h4{
margin:0 0 10px;
color:#fff;
font-size:17px;
font-weight:950;
line-height:1.35;
}
.home-up-role-badge{
display:inline-flex;
margin-bottom:14px;
padding:6px 11px;
border-radius:999px;
border:1px solid #FFC044;
color:#FFC044;
font-size:10px;
font-weight:900;
}
.home-up-role p{
margin:0 0 16px;
color:rgba(255,255,255,.76);
font-size:12.5px;
font-weight:650;
line-height:1.7;
}
.home-service-principles{
margin-top:30px;
padding:0;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
background:#171A22;
box-shadow:0 16px 34px rgba(28,28,28,.18);
}
.home-service-principle{
display:block;
padding:24px 20px;
color:#fff;
}
.home-service-principle + .home-service-principle{
border-top:1px solid rgba(255,255,255,.22);
}
.home-service-principle-label{
display:block;
margin-bottom:14px;
color:#FF5A1F;
font-size:10px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
}
.home-service-principle strong{
display:block;
color:#FF5A1F;
font-size:20px;
font-weight:950;
letter-spacing:-.035em;
line-height:1.3;
}
.home-services-cta .home-cta{ background:var(--palette-graphite); color:var(--palette-lime); }
.home-case-study{
background:var(--palette-lime);
color:var(--palette-graphite);
}
.home-case-study .home-eyebrow{ color:var(--palette-graphite); }
.home-case-study h1{ color:var(--palette-graphite); }
.home-case-card{ border-color:rgba(28,28,28,.14); box-shadow:0 15px 36px rgba(28,28,28,.12); }
.home-topic-in{ background:#fff; color:var(--palette-graphite); }
.home-topic-in .home-role-line b,
.home-topic-one .home-role-line b,
.home-story-item.action .home-story-label{ color:var(--palette-fuchsia); }
.home-topic-up{ background:var(--palette-graphite); color:#fff; }
.home-topic-one{ background:var(--palette-lime); color:var(--palette-graphite); }
/* 07–08 BNR LECTURE — Fuchsia + White only, Lime is a small signal accent */
.home-bnr{
background:var(--palette-fuchsia);
color:#fff;
}
.home-bnr .home-eyebrow{ color:#fff; opacity:.76; }
.home-venn .circle{
box-shadow:0 0 6px rgba(255,255,255,.95),
0 0 16px rgba(255,255,255,.6),
0 0 26px rgba(207,255,4,.85),
0 0 48px rgba(207,255,4,.55);
}
.home-schedule{
background:#FFF2F8;
color:var(--palette-graphite);
}
.home-schedule .home-eyebrow,
.home-swipe-card .status{ color:var(--palette-fuchsia); }
.home-swipe-card .status{ background:rgba(255,46,154,.10); }
.home-swipe-progress-fill,
.home-schedule .home-btn-primary{ background:var(--palette-fuchsia); }
/* 09 CONTACT + FOOTER — unified Graphite closing zone */
.home-contact{
background:var(--palette-graphite);
color:#fff;
padding-top:64px;
padding-bottom:72px;
}
.home-contact .home-eyebrow{
display:inline-flex;
width:auto;
padding:8px 12px;
border-radius:999px;
background:var(--palette-graphite);
color:var(--palette-lime);
margin-bottom:20px;
}
.home-contact .home-title{
font-size:32px;
line-height:1.22;
color:#fff;
}
.home-contact .home-desc{ color:rgba(255,255,255,.68) !important; }
.home-contact-person{
border-top-color:rgba(255,255,255,.18);
border-bottom-color:rgba(255,255,255,.18);
}
.home-contact-person span{ color:rgba(255,255,255,.66); }
.home-contact-person a{ color:var(--palette-lime); }
.home-contact-label,
.home-form label{ color:rgba(28,28,28,.62); }
.home-contact-choice{
background:#FBFBF3;
border-color:rgba(28,28,28,.24);
color:var(--palette-graphite);
}
.home-contact-choice[aria-pressed="true"]{
background:var(--palette-fuchsia);
border-color:var(--palette-fuchsia);
color:#fff;
}
.home-contact .home-form{
background:rgba(251,251,243,.96);
border:1px solid rgba(255,255,255,.68);
border-radius:22px;
padding:20px;
box-shadow:0 18px 42px rgba(0,0,0,.24);
backdrop-filter:blur(10px);
}
.home-form input,
.home-form textarea{
background:#fff;
border-color:rgba(28,28,28,.20);
color:var(--palette-graphite);
}
.home-form input:focus-visible,
.home-form textarea:focus-visible{ outline-color:var(--palette-fuchsia); }
.home-form-file::file-selector-button{
background:var(--palette-lime);
color:var(--palette-graphite);
}
.home-contact .home-btn-primary{
background:var(--palette-graphite);
color:var(--palette-lime);
min-height:52px;
box-shadow:0 10px 24px rgba(28,28,28,.18);
}
.home-footer{
background:var(--palette-graphite);
border-top:1px solid rgba(255,255,255,.16);
}
.home-footer-quote{ color:var(--palette-lime); }
.home-footer-block:nth-of-type(2) .home-footer-label{ color:var(--palette-lime); }
.home-footer-block:nth-of-type(3) .home-footer-label{ color:var(--palette-fuchsia); }
/* SECTION BADGES — one oval navigation language across the long homepage */
.home-section > .home-eyebrow,
.home-section-head > .home-eyebrow{
display:inline-flex;
align-items:center;
width:auto;
min-height:42px;
padding:9px 16px;
margin-bottom:20px;
border-radius:999px;
background:#0A0A0A;
color:var(--palette-lime);
font-size:11px;
font-weight:900;
letter-spacing:.13em;
line-height:1;
opacity:1;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.home-about > .home-eyebrow,
.home-bnr > .home-eyebrow,
.home-schedule > .home-eyebrow{ color:var(--palette-fuchsia); }
.home-two > .home-eyebrow{ color:#fff; }
.home-contact > .home-eyebrow{
color:var(--palette-lime);
box-shadow:inset 0 0 0 1px rgba(207,255,4,.34);
}
/* FIXED SNS QUICK MENU */
.home-social-quick{
position:fixed;
top:50%;
right:max(14px, calc((100vw - 412px)/2 - 62px));
z-index:1000;
display:flex;
flex-direction:column;
gap:10px;
transform:translateY(-50%);
}
.home-social-link{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
background:#0A0A0A;
color:#FF2E9A;
text-decoration:none;
box-shadow:0 10px 24px rgba(0,0,0,.24);
transition:transform .2s ease, box-shadow .2s ease;
}
.home-social-link.kakao{
border-color:rgba(28,28,28,.15);
background:#CFFF04;
color:#1C1C1C;
}
.home-social-link.inquiry{
border-color:rgba(255,255,255,.35);
background:#FF2E9A;
color:#fff;
}
html{ scroll-behavior:smooth; }
#home-contact{ scroll-margin-top:24px; }
.home-social-link:hover,
.home-social-link:focus-visible{
outline:none;
transform:translateX(-3px);
box-shadow:0 14px 30px rgba(0,0,0,.32);
}
.home-social-link svg{
display:block;
width:22px;
height:22px;
}
.home-social-label{
position:absolute;
top:50%;
right:58px;
padding:7px 10px;
border-radius:8px;
background:#0A0A0A;
color:#fff;
font-size:11px;
font-weight:800;
line-height:1;
white-space:nowrap;
opacity:0;
pointer-events:none;
transform:translateY(-50%) translateX(6px);
transition:opacity .2s ease, transform .2s ease;
}
.home-social-link:hover .home-social-label,
.home-social-link:focus-visible .home-social-label{
opacity:1;
transform:translateY(-50%) translateX(0);
}
@media(max-width:560px){
.home-social-quick{ right:10px; gap:8px; }
.home-social-link{ width:44px; height:44px; }
.home-social-label{ display:none; }
}
/* ═══ WACT 빌드 추가분 — 페이지 레이아웃 (통합본의 폰 목업 프레임 대체) ═══ */
.home-wrap{width:100%;background:var(--paper,#FBFBF3);overflow-x:clip;position:relative}
/* ═══ PC 재해석 (8/24 v2) ═══════════════════════════════════
통합본은 모바일 시안이다. 767px 이하는 통합본 그대로,
768px 부터는 데스크톱 레이아웃으로 확장한다:
풀폭 배경 + 1140px 칼럼, 타이포 스케일업, 카드류 멀티칼럼. */
@media(min-width:768px){
.home-wrap > .home-section,
.home-wrap > footer.home-footer{
padding-left:max(32px, calc(50vw - 570px));
padding-right:max(32px, calc(50vw - 570px));
}
/* 히어로 모션: 풀폭 블랙 섹션 안 중앙 무대, 비율 보존 확대 */
.home-hero .home-hero-stage{max-width:640px;margin:0 auto;zoom:1.25}
.home-wrap > .ticker-banner{zoom:1.25}
/* 타이포 스케일업 — 통합본의 5단계 위계 유지한 채 크기만 */
.home-wrap .home-title{font-size:clamp(34px,3.6vw,52px)!important;line-height:1.16}
.home-wrap .home-eyebrow{font-size:14px!important;letter-spacing:.22em}
.home-wrap .home-desc{font-size:17px!important;max-width:56ch}
/* 카드 멀티칼럼 — 카드 래퍼(.home-*-cards)가 실제로 있다 (DOM 실측 확인) */
.home-wrap .home-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.home-wrap .home-why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.home-wrap .home-service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.home-wrap .home-two-card,
.home-wrap .home-why-card,
.home-wrap .home-service-card{margin:0!important;height:100%}
/* CASE STUDY — 카드 안의 상황→실행→결과 3단을 가로로 */
.home-wrap .home-story{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.home-wrap .home-story-item{margin:0!important}
/* 강의 일정 — 스와이프 트랙을 넓은 그리드로 */
.home-wrap .home-swipe-track{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible}
.home-wrap .home-swipe-card{width:auto!important;min-width:0!important}
.home-wrap .home-swipe-progress-track{display:none}
/* CONTACT 폼 — 2열 그리드 (문의유형·내용·첨부·버튼은 풀폭) */
.home-wrap .home-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:820px}
.home-wrap .home-form > div:first-child,
.home-wrap .home-form > div:has(textarea),
.home-wrap .home-form > div:has(input[type=file]),
.home-wrap .home-form > button[type=submit]{grid-column:1 / -1}
/* FOOTER 3열 — 같은 풀스팬 패턴 */
.home-wrap footer.home-footer{display:grid;column-gap:28px;grid-template-columns:repeat(3,1fr)}
.home-wrap footer.home-footer > *{grid-column:1 / -1}
.home-wrap footer.home-footer > .home-footer-block{grid-column:auto}
}
@media(min-width:1200px){
.home-hero .home-hero-stage{zoom:1.45}
}
/* ═══ v3 (8/24 오후) — 히어로 블랙·퀵메뉴·대표사진·톤앤매너 ═══ */
/* ① 히어로: 풀폭 블랙. 캡슐 radius 는 유지하되 배경이 같아 경계가 사라진다 —
모션 구도는 통합본 그대로, "배너 같다" 문제만 소멸. */
.home-hero{background:#0a0a0a;padding:64px 20px 56px;position:relative;overflow:hidden}
.home-hero .identity-stage{margin:0 0 8px}
.home-hero .hook-wrap{color:#FBFBF3}
.home-hero .hook-wrap .hook-accent{background:var(--lime,#CFFF04)}
/* fixed nav(라임) 아래로 히어로가 파고들어 잘려 보이던 문제 */
body.wact-main{padding-top:72px}
@media(max-width:900px){body.wact-main{padding-top:62px}}
/* ② SNS 퀵메뉴: 통합본은 폰 목업 우측에 붙이는 계산이라 PC 화면 중앙에 떴다.
뷰포트 우측 고정으로 교체. */
.home-social-quick{right:20px!important;left:auto!important}
@media(max-width:767px){
.home-social-quick{top:auto!important;bottom:18px!important;right:12px!important;transform:none!important}
}
/* ③ 대표 사진: PC 는 좌측 사진 + 우측 글 2열, 모바일은 통합본 세로 그대로 */
@media(min-width:768px){
.home-wrap .home-about{display:grid;grid-template-columns:440px 1fr;column-gap:64px;align-items:start}
.home-wrap .home-about > *{grid-column:2}
.home-wrap .home-about > .home-figure{grid-column:1;grid-row:1 / 99;margin:0;align-self:start;position:sticky;top:96px}
}
@media(max-width:767px){
.home-wrap .home-figure{max-width:420px;margin-left:auto;margin-right:auto}
}
/* ④ 톤앤매너 — 히어로의 글로우·궤도 모티프를 다크 섹션에 확산 */
.wact-scene{position:relative;overflow:hidden;isolation:isolate}
.wact-scene::before{
content:"";position:absolute;right:-140px;top:-100px;width:460px;height:460px;border-radius:50%;
background:radial-gradient(circle, rgba(207,255,4,.14), transparent 62%);
pointer-events:none;z-index:0;
}
.wact-scene::after{
content:"";position:absolute;left:-160px;bottom:-180px;width:560px;height:560px;border-radius:50%;
border:1.5px dashed rgba(207,255,4,.20);
pointer-events:none;z-index:0;
animation:wactOrbit 70s linear infinite;
}
@keyframes wactOrbit{to{transform:rotate(360deg)}}
.wact-scene > *{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.wact-scene::after{animation:none}}
/* 3 Levels 리스킨 — 오렌지 → 브랜드 다크 (통합본 팔레트와 충돌하던 유일한 색) */
.home-wrap .ggg-hero{background:#101010;color:var(--paper,#FBFBF3)}
.home-wrap .ggg-hero .ggg-word{color:var(--lime,#CFFF04);opacity:.92}
.home-wrap .ggg-hero .ggg-tag{color:var(--paper,#FBFBF3)}
.home-wrap .ggg-hero .ggg-meta{color:rgba(251,251,243,.7)}
.home-wrap .ggg-ed{background:#FBFBF3}
.home-wrap .ggg-ed .ggg-ed-sub{color:#c7d813}
/* ═══ v4 (8/24) — 폰 프레임 완전 해제: model·hook 풀폭, 정렬선 통일 ═══ */
.home-up-more{
display:inline-flex;align-items:center;gap:8px;margin-top:18px;
padding:13px 22px;border:1.5px solid currentColor;border-radius:100px;
font-weight:800;font-size:14px;color:inherit;text-decoration:none;opacity:.85;
}
.home-up-more:hover{opacity:1}
@media(min-width:768px){
/* 히어로에서 중앙 무대를 유지할 것은 궤도 모션(identity)뿐.
hook(텍스트)·model(카드 슬라이드)은 풀폭 — 배경 그라데이션이 화면 끝까지,
텍스트는 본문과 같은 칼럼 왼쪽 선에 정렬된다. */
.home-hero .home-hero-stage:has(> .hook-wrap),
.home-hero .home-hero-stage:has(> .model-stage){max-width:none;zoom:1}
.home-hero .hook-wrap{padding:72px max(32px, calc(50vw - 570px))}
.model-stage{height:560px;margin-left:-20px;margin-right:-20px} /* 히어로 패딩 상쇄 — 완전 풀블리드 */
.model-stage .mframe{padding:64px max(32px, calc(50vw - 570px)) 88px}
.model-stage .m-kw{font-size:54px}
.model-stage .m-title{font-size:32px}
.model-stage .m-desc{font-size:17px;max-width:56ch}
/* ═══ v5 — 히어로 완성 (8/24) ═══ */
/* ① 궤도 모션: 캡슐 윤곽의 정체는 identity 자체 배경이 radius 로 잘린 것.
배경을 투명화하면 윤곽이 소멸하고 글로우가 자유롭게 퍼진다. zoom 으로 히어로급 확대. */
.home-hero .home-hero-stage:has(> .identity-stage){max-width:none;zoom:1}
.home-hero .identity-stage{
width:640px;margin:0 auto;border-radius:0;
background:transparent;overflow:visible;zoom:1.5;
}
/* ② model 무대의 CTA 장식(라임 화살표 원 무리)이 화면 끝으로 밀려
퀵메뉴와 겹치던 것 — 콘텐츠 칼럼 오른쪽 선 안으로 */
.model-stage .cta-fab{right:max(56px, calc(50vw - 540px))!important;left:auto!important}
/* ③ hook 텍스트: 다크 배경 위 검정 글씨 색출 + 히어로급 타이포 */
.home-hero .hook-wrap .brand-word{color:var(--lime,#CFFF04);font-size:clamp(44px,4.6vw,68px);line-height:1.1}
.home-hero .hook-wrap .line{color:#FBFBF3;font-size:clamp(24px,2.5vw,38px);line-height:1.35}
.home-hero .hook-wrap .mdot{color:rgba(251,251,243,.45)}
}
/* ═══════════════════════════════════════════════════════════════════════
v6 (8/24 저녁) — HERO 전면 재설계
문제: 통합본은 '폰 목업' 시안이라 무대 224px·로고 34px·인디케이터 5px.
그걸 zoom 으로 늘려 쓰니 PC 히어로가 아니라 확대된 배너였다.
해법: 폰 값을 버리고 PC 값으로 다시 잡는다.
① 폴드 = 한 화면(100vh) 좌 카피 / 우 궤도 2단 컴포지션
② 카피 위계 재설정 + CTA 신설, 본문과 같은 150px 정렬선
③ 궤도는 zoom 이 아니라 실제 치수(380px 링)로 재작도
④ 5px 점 5개 → 진행 세그먼트 바 (모션 사이클과 동기)
⑤ 블랙 배경에 묻히던 폰 시안 색 정리
═════════════════════════════════════════════════════════════════════ */
/* ⑤ 묻히던 글씨 — 전 뷰포트 (모바일 히어로도 블랙이라 같이 적용) */
.home-hero .hook-wrap .meta-line{color:rgba(251,251,243,.62)}
.home-hero .hook-wrap .meta-line .mdot{color:rgba(207,255,4,.75)}
.home-hero .identity-stage .pill .k{color:rgba(251,251,243,.6)}
.home-hero .identity-stage .tag-caption{color:rgba(251,251,243,.6)}
/* ② 히어로 CTA — 모바일 기본값 */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;
height:50px;padding:0 24px;border-radius:100px;
font-size:15px;font-weight:800;letter-spacing:-.01em;text-decoration:none;
transition:transform .18s ease, box-shadow .18s ease}
.hero-btn-lime{background:var(--lime,#CFFF04);color:#101010;box-shadow:0 10px 34px rgba(207,255,4,.18)}
.hero-btn-ghost{border:1.5px solid rgba(251,251,243,.32);color:#FBFBF3}
.hero-btn:hover{transform:translateY(-2px)}
.hero-btn-lime:hover{box-shadow:0 14px 40px rgba(207,255,4,.30)}
@media(min-width:1024px){
.home-hero{padding:0}
/* ① 폴드: 좌 카피 470px / 우 궤도, 세로 중앙, 한 화면 */
.hero-lead{
display:grid;
grid-template-columns:minmax(0,470px) minmax(0,1fr);
align-items:center;column-gap:60px;
min-height:calc(100vh - 72px);
padding:80px max(32px, calc(50vw - 570px));
}
.hero-lead > .home-hero-stage{max-width:none!important;margin:0!important;zoom:1!important}
.hero-lead > .home-hero-stage:has(> .hook-wrap){order:1}
.hero-lead > .home-hero-stage:has(> .identity-stage){order:2}
/* ② 카피 위계: 왝트(대형 라임) → 한 줄(페이퍼) → 메타 → CTA */
.home-hero .hook-wrap{padding:0}
.home-hero .hook-wrap .brand-row{gap:18px;margin-bottom:24px;align-items:stretch}
.home-hero .hook-wrap .hook-accent{width:8px;border-radius:3px;box-shadow:0 0 22px rgba(207,255,4,.5)}
.home-hero .hook-wrap .brand-word{font-size:clamp(76px,7.4vw,116px);line-height:.9;letter-spacing:-.03em}
.home-hero .hook-wrap .line{font-size:clamp(32px,3.1vw,46px);line-height:1.24;letter-spacing:-.02em;max-width:14ch;margin-bottom:18px}
.home-hero .hook-wrap .meta-line{font-size:16px;letter-spacing:.01em}
/* ③ 궤도 무대 — zoom 폐기, 실제 치수로 재작도 */
.home-hero .identity-stage{
width:100%;max-width:660px;height:min(620px, calc(100vh - 220px));
margin:0 auto;border-radius:0;background:transparent;overflow:visible;zoom:1;
}
.home-hero .identity-stage .ring-wrap{top:50%;width:380px;height:380px;margin:-190px 0 0 -190px}
.home-hero .identity-stage .word-orbit{width:380px;height:380px}
.home-hero .identity-stage .pill .w{font-size:38px}
.home-hero .identity-stage .pill .k{font-size:15px}
.home-hero .identity-stage .plus{font-size:26px}
.home-hero .identity-stage .glow-orb.id{width:320px;height:320px;top:-60px;left:4%}
.home-hero .identity-stage .assemble-mark{font-size:76px}
.home-hero .identity-stage .tagline{font-size:34px;line-height:1.3;padding:0}
.home-hero .identity-stage .tag-pill{font-size:19px;padding:13px 30px}
.home-hero .identity-stage .tag-caption{font-size:15px;margin-top:14px}
/* ④ 인디케이터: 5px 점 → 세그먼트 바, 모션 사이클(15s/5프레임)과 동기 */
.home-hero .hero-lead .dots{bottom:4px;gap:12px}
.home-hero .hero-lead .dots span{
width:52px;height:3px;border-radius:2px;background:rgba(251,251,243,.18);
animation:heroSeg 15s linear infinite;
}
.home-hero .hero-lead .dots span:nth-child(1){animation-delay:0s}
.home-hero .hero-lead .dots span:nth-child(2){animation-delay:3s}
.home-hero .hero-lead .dots span:nth-child(3){animation-delay:6s}
.home-hero .hero-lead .dots span:nth-child(4){animation-delay:9s}
.home-hero .hero-lead .dots span:nth-child(5){animation-delay:12s}
}
@keyframes heroSeg{
0%,20%{background:var(--lime,#CFFF04);box-shadow:0 0 14px rgba(207,255,4,.55)}
20.01%,100%{background:rgba(251,251,243,.18);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
.home-hero .hero-lead .dots span{animation:none}
}
/* ── v6.1 히어로 마감 ─────────────────────────────────────────
① 섹터 마커: 하단 5px 점이 아니라, 다른 섹션(01 — ABOUT WACT)과 같은
좌상단 pill 로. 히어로는 블랙이라 라임 아웃라인으로 대응한다.
DOM 은 그대로 두고 order 로 카피 맨 위에 올린다.
② 히어로에는 자체 글로우(glow-orb)가 있어 wact-scene 의 공용 글로우가
배경에 얼룩으로 겹쳤다 — 히어로만 공용 장식 해제.
③ 진행 세그먼트를 궤도 가까이 (무대 바닥에서 떠 있던 것)
④ 카피 줄바꿈 균형: "웰니스 브랜드 성장 / 전문 기업"
───────────────────────────────────────────────────────── */
.home-hero.wact-scene::before,
.home-hero.wact-scene::after{display:none}
@media(min-width:1024px){
.home-hero .hook-wrap{display:flex;flex-direction:column;align-items:flex-start}
.home-hero .hook-wrap .meta-line{
order:-1;margin:0 0 26px;
display:inline-flex;align-items:center;
padding:9px 20px;border:1px solid rgba(207,255,4,.45);border-radius:100px;
font-size:13px;font-weight:800;letter-spacing:.06em;
color:var(--lime,#CFFF04);
}
.home-hero .hook-wrap .meta-line .mdot{margin:0 8px;color:rgba(207,255,4,.55)}
.home-hero .hook-wrap .line{max-width:11ch}
.home-hero .hero-lead .dots{bottom:56px}
}
/* ═══════════════════════════════════════════════════════════════════════
v7 (8/24) — 히어로 다음 밴드(Consulting / Lecture 교차) 재설계
① 궤적 애니메이션 복구: 통합본에 .glow-svg 규칙이 아예 없다(.trail-svg 만 있음).
그래서 SVG 가 static·height 1221px 로 렌더 → 곡선 시작점이 무대 밖.
모바일은 폰 폭 412 = viewBox 폭이라 우연히 맞아 보였던 것.
절대배치·풀사이즈로 잡으면 preserveAspectRatio="none" 이 화면 폭에 맞춰
늘려주므로 모바일과 같은 궤적(좌하 → 우상)이 PC 에서도 그대로 나온다.
② 배경 분리: 히어로와 같은 #0a0a0a 라 경계가 없었다 → 딥올리브 그라데이션 +
상단 라임 헤어라인. 같은 팔레트 안에서 '다음 장'으로 읽히게.
③ 좌하단에 처박힌 폰 시안 조판 → 화면 중앙 대형 타이포 (텍스트 모션은 유지)
④ 히어로 폴드(100vh)에 맞춰 높이 560 → 780
═════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
/* ① */
.model-stage .glow-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* ② */
.model-stage{
height:780px;
background:
radial-gradient(ellipse 80% 60% at 50% 118%, rgba(207,255,4,.13), transparent 62%),
radial-gradient(ellipse 60% 50% at 92% -10%, rgba(255,46,138,.10), transparent 60%),
linear-gradient(180deg,#101508 0%,#0c1006 46%,#080a04 100%);
border-top:1px solid rgba(207,255,4,.16);
}
.model-stage::before{
content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:0;pointer-events:none;
background:linear-gradient(180deg, rgba(207,255,4,.07), transparent);
}
/* ③ 중앙 대형 조판 */
.model-stage .mframe{
justify-content:center;align-items:center;text-align:center;
padding:96px max(32px, calc(50vw - 570px));
}
.model-stage .m-kw{font-size:clamp(86px,9.4vw,148px);line-height:.95;margin-bottom:6px}
.model-stage .m-title{font-size:clamp(34px,3.4vw,50px);line-height:1.15;margin-bottom:20px}
.model-stage .m-desc{
font-size:19px;line-height:1.72;max-width:64ch;white-space:normal;
color:rgba(251,251,243,.72);
}
.model-stage .m-chips{justify-content:center;gap:10px;margin-top:30px}
.model-stage .m-chips span{font-size:14px;line-height:1;padding:12px 22px;border-radius:100px}
/* ④ 장식 재배치 — 무대가 커진 만큼 */
.model-stage .planet{width:340px;height:340px;right:-110px;bottom:-150px}
.model-stage .cta-fab{top:72px}
}
/* ── v7.1 밴드 마감 ───────────────────────────────────────────
⑤ Lecture(m2) 설명만 12px·nowrap 인 폰 시안 규칙이 남아 있었다
(.mframe.m2 .m-desc 가 더 구체적이라 v7 이 졌다) → 같은 급으로 통일
⑥ 궤적 선명화: SVG 가 가로로 3.6배·세로 2.3배 늘어나 stroke 가
방향마다 두께가 달라졌다 → non-scaling-stroke 로 균일하게,
화면 좌표 기준이 되므로 dash 값도 PC 용으로 다시 잡는다.
─────────────────────────────────────────────────────────── */
@media(min-width:768px){
.model-stage .mframe .m-desc{
font-size:19px;line-height:1.72;max-width:64ch;white-space:normal;
letter-spacing:-.003em;color:rgba(251,251,243,.72);
}
.model-stage .comet-path{stroke:rgba(207,255,4,.16);stroke-width:1.4;vector-effect:non-scaling-stroke}
.model-stage .comet-trail{stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-dasharray:300 2600}
.model-stage .comet-trail-a,
.model-stage .comet-trail-b{animation-name:cometPC}
.model-stage .comet-head{r:3} /* [v65.8] 유성 헤드. CSS r 이 attr 을 덮는다(attr 은 768 미만 모바일 크기) */
}
@media(max-width:767px){
.model-stage .sparkle{width:12px!important;height:12px!important} /* [v65.8] 모바일 균형 */
}
@keyframes cometPC{
0%{stroke-dashoffset:300;opacity:0}
4%{opacity:.85}
46%{stroke-dashoffset:-2300;opacity:.85}
50%{opacity:0}
100%{opacity:0}
}
/* ── v7.2 — ABOUT 뒤 회사소개서 CTA 배경 통일 ─────────────────
이 블록은 기존 사이트에서 오려온 유지 블록(.wrap.cp-cta)이라
테마 공용 배경(페이퍼 #FBFBF3)을 그대로 쓰고 있었다.
ABOUT(연핑크 #FDEAF3)에서 이어지는 같은 장이므로 배경을 잇고,
.wrap 의 1280 고정폭도 풀어 좌우 끝까지 칠해지게 한다. */
.home-wrap .cp-cta{
background:#FDEAF3;
max-width:none;width:auto;margin:0;
padding:8px 24px 84px;
text-align:center;
}
@media(min-width:768px){
.home-wrap .cp-cta{padding:8px max(32px, calc(50vw - 570px)) 92px}
}
/* ── v8 (정리본) — People → WHAT WE DO 이음새 ────────────────
전환 애니메이션은 폐기. 배경 톤만 이어 붙이고,
제목은 PC 에서 한 줄로 둔다. */
.home-wrap .home-two{
background:linear-gradient(180deg,#171b24 0,#1c1c1c 150px,#1c1c1c 100%);
}
@media(min-width:1024px){
.home-wrap .home-two .home-title br{display:none}
.home-wrap .home-two .home-title{font-size:clamp(44px,4.4vw,64px)!important;letter-spacing:-.03em;line-height:1.1}
}
/* ═══════════════════════════════════════════════════════════════════════
v10 (8/24) — 03~09 섹션 PC 리디자인
통합본은 폰 시안이라 본문이 11~16px, 제목이 25px, 버튼은 칼럼 풀폭이었다.
히어로(107px)·밴드(135px)와 급이 맞도록 PC 전용 스케일로 다시 잡는다.
1024px 미만은 통합본 원형 유지.
═════════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
/* ── 공통: 섹션 호흡 + 제목/본문 급 ───────────────────────── */
.home-wrap > .home-section{padding-top:118px;padding-bottom:118px}
.home-wrap .home-title{font-size:clamp(46px,4.6vw,68px)!important;line-height:1.12;letter-spacing:-.03em}
.home-wrap .home-eyebrow{font-size:14px!important}
.home-wrap .home-desc{font-size:19px!important;line-height:1.7}
/* 버튼: 칼럼 풀폭으로 늘어나던 것 → 내용 폭, 나란히 */
.home-wrap .home-btn-primary,
.home-wrap .home-btn-ghost{
display:inline-flex;align-items:center;justify-content:center;
width:auto;min-width:230px;height:62px;padding:0 38px;
font-size:16px;margin:0 12px 12px 0;
}
/* ── 03 BUSINESS CHALLENGE ─────────────────────────────── */
.home-wrap .home-problem-list{margin-top:44px}
.home-wrap .home-problem-item{padding:26px 0}
.home-wrap .home-problem-item span{font-size:15px!important}
.home-wrap .home-problem-item strong,
.home-wrap .home-problem-item p{font-size:22px!important;line-height:1.45}
.home-wrap .home-problem-conclusion{font-size:19px!important;line-height:1.7;margin-top:34px}
.home-wrap .home-problem-point{font-size:30px!important;line-height:1.4;margin:22px 0 40px}
/* ── 04 WHY WACT ───────────────────────────────────────── */
.home-wrap .home-why-title{font-size:46px!important;line-height:1.2;letter-spacing:-.03em}
.home-wrap .home-why-sub{font-size:20px!important;line-height:1.7}
.home-wrap .home-why-chip{font-size:14px!important;padding:11px 22px}
.home-wrap .home-why-cards{gap:26px;margin-top:52px}
.home-wrap .home-why-card{padding:38px 34px 32px}
.home-wrap .home-why-num{font-size:14px!important;margin-bottom:14px}
.home-wrap .home-why-eng{font-size:30px!important;line-height:1.2}
.home-wrap .home-why-kor{font-size:17px!important;margin-top:4px}
.home-wrap .home-why-desc{font-size:16px!important;line-height:1.72;margin-top:18px}
.home-wrap .home-why-card .row{font-size:14px!important;padding:10px 0}
.home-wrap .home-why-card .row span,
.home-wrap .home-why-card .row .value{font-size:14px!important}
/* ── 05 WACT SERVICE ───────────────────────────────────── */
.home-wrap .home-service-cards{gap:26px;margin-top:52px}
.home-wrap .home-service-card{padding:38px 34px}
.home-wrap .home-service-num{font-size:15px!important}
.home-wrap .home-service-name{font-size:32px!important;line-height:1.15}
.home-wrap .home-service-tagline{font-size:18px!important;margin-top:6px}
.home-wrap .home-service-desc{font-size:16px!important;line-height:1.72;margin-top:16px}
.home-wrap .home-service-checklist li{font-size:16px!important;padding:14px 0}
.home-wrap .home-service-card-cta{font-size:16px!important;height:58px}
.home-wrap .home-service-principle-label{font-size:13px!important;letter-spacing:.14em}
.home-wrap .home-service-principle strong{font-size:28px!important;line-height:1.35}
.home-wrap .home-service-principles{margin-top:44px}
/* ── 06 CASE STUDY ─────────────────────────────────────── */
.home-wrap .home-case-list{gap:26px;margin-top:52px}
.home-wrap .home-case-card{padding:0}
.home-wrap .home-case-index{font-size:13px!important;letter-spacing:.1em}
.home-wrap .home-service-mark{font-size:13px!important;letter-spacing:.1em}
.home-wrap .home-case-title{font-size:22px!important;line-height:1.45}
.home-wrap .home-story-label{font-size:13px!important;letter-spacing:.12em}
.home-wrap .home-story-copy{font-size:17px!important;line-height:1.6}
.home-wrap .home-story{gap:28px;margin-top:8px}
.home-wrap .home-story-item{padding:22px 0}
/* ── 08 LECTURE SCHEDULE : 좌 카피 / 우 카드 2단 ─────────── */
.home-wrap .home-schedule{
display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
column-gap:64px;align-items:start;
}
.home-wrap .home-schedule > *{grid-column:1}
.home-wrap .home-schedule > .home-swipe-wrap,
.home-wrap .home-schedule > .home-swipe-track{grid-column:2;grid-row:1 / 99;margin:0}
.home-wrap .home-swipe-track{grid-template-columns:repeat(2,1fr);gap:22px}
.home-wrap .home-swipe-card{padding:30px 28px}
.home-wrap .home-swipe-card h3{font-size:20px!important;line-height:1.4}
.home-wrap .home-swipe-card p{font-size:15px!important;margin-top:10px}
.home-wrap .home-swipe-link{font-size:16px!important;margin-top:16px}
.home-wrap .home-swipe-card .status{font-size:12px!important;padding:7px 14px}
.home-wrap .home-schedule-note{font-size:15px!important;margin-top:26px}
/* [v57] 구 09 CONTACT 잔재 제거 — mailto a 19px 등이 새 시안(v54/v56)을 덮었다 */
}
/* ── v10.1 — DOM 실측 후 교정 ────────────────────────────────
· 버튼이 풀폭이던 진짜 이유: 부모 *-ctas 가 flex 라 stretch 됐다.
· 06 제목은 클래스 없는 이라 .home-title 규칙을 못 받아 27px 였다.
· 클래스명 오타 교정: home-problem-point→strong, bnr-quote→bnr-strong
────────────────────────────────────────────────────────── */
@media(min-width:1024px){
/* CTA 묶음: 내용 폭으로, 왼쪽 정렬, 줄바꿈 허용 */
.home-wrap [class*="-ctas"]{flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:14px}
.home-wrap [class*="-ctas"] > .home-btn-primary,
.home-wrap [class*="-ctas"] > .home-btn-ghost,
.home-wrap [class*="-ctas"] > button,
.home-wrap [class*="-ctas"] > a{flex:0 0 auto;width:auto;margin:0}
/* 섹션 헤더의 클래스 없는 제목도 같은 급으로 */
.home-wrap .home-section-head h1,
.home-wrap .home-section-head h2{
font-size:clamp(46px,4.6vw,68px);line-height:1.12;letter-spacing:-.03em;max-width:none;
}
/* 03 리스트 */
.home-wrap .home-problem-list li{font-size:20px;padding:24px 0;gap:20px}
.home-wrap .home-problem-list li > span{font-size:15px;min-width:28px}
.home-wrap .home-problem-strong{font-size:30px!important;line-height:1.42;margin:22px 0 38px}
/* 06 케이스 상단 카피 */
.home-wrap .home-role-line{font-size:27px!important;line-height:1.34}
.home-wrap .home-topline{margin-bottom:18px}
}
/* ── v10.3 — 07·09 를 2단 레이아웃으로 ────────────────────────
좌측에 카피만 있고 우측이 통째로 비어 있었다(폰 시안의 세로 흐름).
07: 좌 카피/CTA · 우 벤다이어그램(원 축소로 세로 길이 절반)
09: 좌 카피/연락처 · 우 문의 폼
────────────────────────────────────────────────────────── */
@media(min-width:1024px){
/* 09 CONTACT */
.home-wrap .home-contact{
display:grid;grid-template-columns:minmax(0,450px) minmax(0,1fr);
column-gap:70px;align-items:start;
}
.home-wrap .home-contact > *{grid-column:1}
.home-wrap .home-contact > .home-form{
grid-column:2;grid-row:1 / 99;margin:0;max-width:none;align-self:start;
}
}
/* ═══ v11 — 03 BUSINESS CHALLENGE 깊이 주기 ═══════════════════════════
라임 평면 + 정적 리스트라 클라이언트가 만든 밴드에 비해 납작했다.
① 배경: 단색 → 광원 2개(우상단 하이라이트 / 좌하단 그림자)
② 대형 아웃라인 워터마크 CHALLENGE 를 제목 뒤에 겹친다
③ 제목·본문은 아래에서 올라오며, 리스트 01·02·03 은 플립 디졸브로 순차 등장
④ 리스트 hover 시 밑줄이 채워지고 항목이 밀려난다
═══════════════════════════════════════════════════════════════════ */
.home-wrap .home-problem{position:relative;overflow:hidden;background:#CFFF04}
.home-problem-mark{
position:absolute!important;right:-3vw;top:172px;transform:none;
font-size:clamp(110px,15.5vw,230px);font-weight:900;letter-spacing:-.045em;line-height:1;
color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.34);
filter:drop-shadow(0 0 22px rgba(255,255,255,.22));
white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
}
.home-wrap .home-problem > *:not(.home-problem-mark){position:relative;z-index:1}
/* 리빌 */
.home-problem .rv{opacity:0;transform:translateY(28px);
transition:opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1)}
.home-problem.is-in .rv{opacity:1;transform:none}
.home-problem .home-problem-list{perspective:900px}
.home-problem .home-problem-list li.rv{
opacity:0;transform:rotateX(-78deg) translateY(6px);transform-origin:50% 0;
transition:opacity .62s ease, transform .62s cubic-bezier(.2,.8,.25,1);
}
.home-problem.is-in .home-problem-list li.rv{opacity:1;transform:none}
.home-problem .home-problem-list li:nth-child(1){transition-delay:.06s}
.home-problem .home-problem-list li:nth-child(2){transition-delay:.20s}
.home-problem .home-problem-list li:nth-child(3){transition-delay:.34s}
.home-problem .home-problem-conclusion.rv{transition-delay:.42s}
.home-problem .home-problem-strong.rv{transition-delay:.50s}
.home-problem .home-problem-ctas.rv{transition-delay:.58s}
/* 리스트 인터랙션 */
@media(min-width:1024px){
.home-wrap .home-problem-list li{position:relative;transition:padding-left .32s ease}
.home-wrap .home-problem-list li::after{
content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#101010;
transition:width .55s cubic-bezier(.2,.7,.2,1);
}
.home-wrap .home-problem-list li:hover{padding-left:16px}
.home-wrap .home-problem-list li:hover::after{width:100%}
}
@media(prefers-reduced-motion:reduce){
.home-problem .rv{opacity:1!important;transform:none!important;transition:none}
}
/* ═══ v13 — 카드 펼침(딜링) 모션 ═════════════════════════════════════
3장이 가운데 겹쳐 기울어져 있다가, 화면에 들어오면 좌·우로 촥 펼쳐지며
회전이 풀린다. 중앙 → 좌 → 우 순으로 시차. 06 케이스는 세로 스택이라
아래에서 순차로 올라오는 모션으로 구분.
══════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
.home-wrap .home-why-cards .home-why-card{
opacity:0;will-change:transform;
transition:transform .9s cubic-bezier(.18,.85,.22,1), opacity .55s ease;
}
/* 접힌 상태 — 가운데로 모으고 살짝 눕힌다 */
.home-wrap .home-why-cards .home-why-card:nth-child(1){
transform:translateX(58%) translateY(30px) rotate(-7deg) scale(.9);
}
.home-wrap .home-why-cards .home-why-card:nth-child(2){
transform:translateY(44px) scale(.9);
}
.home-wrap .home-why-cards .home-why-card:nth-child(3){
transform:translateX(-58%) translateY(30px) rotate(7deg) scale(.9);
}
/* 펼친 상태 */
.home-wrap .home-why-cards.is-in .home-why-card{opacity:1;transform:none}
.home-wrap .home-why-cards.is-in .home-why-card:nth-child(2){transition-delay:0s}
.home-wrap .home-why-cards.is-in .home-why-card:nth-child(1){transition-delay:.10s}
.home-wrap .home-why-cards.is-in .home-why-card:nth-child(3){transition-delay:.18s}
/* 06 CASE — 세로 스택은 아래에서 순차로 */
.home-wrap .home-case-list .home-case-card{
opacity:0;transform:translateY(46px) scale(.985);
transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.home-wrap .home-case-list.is-in .home-case-card{opacity:1;transform:none}
.home-wrap .home-case-list.is-in .home-case-card:nth-child(1){transition-delay:.04s}
.home-wrap .home-case-list.is-in .home-case-card:nth-child(2){transition-delay:.16s}
.home-wrap .home-case-list.is-in .home-case-card:nth-child(3){transition-delay:.28s}
}
@media(prefers-reduced-motion:reduce){
.home-wrap .home-two-card,.home-wrap .home-why-card,.home-wrap .home-service-card,.home-wrap .home-case-card{
opacity:1!important;transform:none!important;transition:none!important;
}
}
/* ═══ v14 — 05 WACT SERVICE: 카드 모션 대신 제목 모션그래픽 ═══════════
04 와 연달아 같은 카드 펼침이 반복돼 지루했다. 05 는 카드를 정지시키고
제목 두 줄이 아래에서 밀려 올라오며, 두 번째 줄 뒤로 라임 바가 좌→우로
쓸고 지나간다.
══════════════════════════════════════════════════════════════════ */
/* [v60] 05 전용이던 제목 리빌을 전 섹터 공통(t-ttl)으로 — JS 가 줄(.ln>i) 래핑 */
.home-wrap .t-ttl .ln{display:block;overflow:hidden;padding-bottom:.04em}
.home-wrap .t-ttl .ln i{
display:inline-block;font-style:normal;position:relative;transform:translateY(112%);
transition:transform .95s cubic-bezier(.16,.84,.24,1);
}
.home-wrap .t-ttl.is-in .ln i{transform:translateY(0)}
.home-wrap .t-ttl.is-in .ln:nth-child(2) i{transition-delay:.13s}
.home-wrap .t-ttl.is-in .ln:nth-child(3) i{transition-delay:.26s}
/* [v61] 라임 밑줄 스윕 제거(정우 8/28) — 제목 애니는 아래→위 라인 리빌로만 통일 */
@media(prefers-reduced-motion:reduce){
.home-wrap .t-ttl .ln i{transform:none}
}
/* ── 카드 CTA 정렬 (block + 고정높이라 텍스트가 위로 붙어 있었다) ── */
.home-wrap .home-service-card-cta,
.home-wrap .home-up-more{
display:inline-flex!important;align-items:center;justify-content:center;text-align:center;
}
.home-wrap .home-service-card-cta{width:100%;min-height:58px;padding:14px 20px;line-height:1.25}
/* GO·GET·GOAL 버튼이 아래 칩과 붙어 겹쳐 보이던 것 */
.home-wrap .home-up-more{margin:20px 0 24px}
/* ═══ v15 — 06 CASE STUDY 카드 디자인 ════════════════════════════════
흰/다크/라임 단색 블록에 흰 본문이라 세 장이 다 납작했다.
① 상단 블록: 단색 → 카드별 대각 그라데이션(같은 색족 안에서 명암)
② 카드마다 대형 아웃라인 번호를 우하단에 깔아 면을 채운다
③ BEFORE → ACTION → RESULT 중 RESULT 를 결론답게 강조(도트+굵기)
④ hover 시 카드가 떠오르고 그림자가 깊어진다
⑤ 카피는 PC 에서 한 줄 (왜 2줄인지 모를 강제 개행 제거)
══════════════════════════════════════════════════════════════════ */
.home-wrap .home-topic-in{background:linear-gradient(118deg,#FBFBF3 0%,#FFFFFF 40%,#EDF6C4 100%)!important}
.home-wrap .home-topic-up{background:linear-gradient(118deg,#191919 0%,#242B15 54%,#161616 100%)!important}
.home-wrap .home-topic-one{background:linear-gradient(118deg,#CFFF04 0%,#E7FF7C 46%,#C2F300 100%)!important}
.home-wrap .home-case-card{position:relative;overflow:hidden;
transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease}
.home-wrap .home-case-card > *{position:relative;z-index:1}
.home-wrap .home-case-card::after{
content:"01";position:absolute;right:38px;bottom:-26px;z-index:0;pointer-events:none;user-select:none;
font-size:180px;font-weight:900;letter-spacing:-.055em;line-height:1;
color:transparent;-webkit-text-stroke:2px rgba(16,16,16,.10);
}
.home-wrap .home-case-list > .home-case-card:nth-child(2)::after{content:"02";-webkit-text-stroke-color:rgba(207,255,4,.18)}
.home-wrap .home-case-list > .home-case-card:nth-child(3)::after{content:"03";-webkit-text-stroke-color:rgba(16,16,16,.14)}
/* RESULT = 결론 */
.home-wrap .home-story-item.result .home-story-copy{font-weight:800}
.home-wrap .home-story-item.result .home-story-copy::before{
content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
margin-right:10px;vertical-align:middle;background:#FF2E8A;box-shadow:0 0 10px rgba(255,46,138,.55);
}
.home-wrap .home-case-up .home-story-item.result .home-story-copy::before{
background:var(--lime,#CFFF04);box-shadow:0 0 10px rgba(207,255,4,.6);
}
.home-wrap .home-case-one .home-story-item.result .home-story-copy::before{
background:#101010;box-shadow:none;
}
@media(min-width:1024px){
.home-wrap .home-role-line br{display:none}
.home-wrap .home-case-list.is-in .home-case-card:hover{
transform:translateY(-8px);box-shadow:0 30px 72px rgba(16,16,16,.26);
}
}
/* ═══ v49-M4 — 07 BNR 벤 모션 최종 (8/28 정우 확정) ═══════════════════
"선에 그려진 대로 글로우가 타고 가야 한다. 원은 뱅글뱅글."
· 원·라벨 정지. 하이라이트 호(border-top)가 원과 같은 반경·두께로
선 위에 정확히 겹쳐 회전 → 선이 밝아져 흐르고 = 원이 도는 인상
· 번짐 = drop-shadow(호 모양 그대로) · transform 회전만(GPU 안전)
· conic 마스크 회전(M2)은 GPU 크롬에서 정지, 별개 발광 타원 공전(M3)은
"글로우가 따로 논다"로 반려됨
══════════════════════════════════════════════════════════════════ */
@keyframes bnrSpin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
/* 글로우는 '하나'다 — 6s 를 3등분해 한 원에만 존재. 2s 에 한 바퀴 그리고
교차부 각도에서 다음 원으로 넘어가 도식 전체를 이어 그린다(정우 8/28). */
@keyframes bnrPass{
0%{opacity:1} 30.5%{opacity:1} 33.3%{opacity:0}
96.5%{opacity:0} 100%{opacity:1}
}
@keyframes bnrPulse{
0%,100%{text-shadow:0 0 10px rgba(207,255,4,.45);opacity:.92}
50%{text-shadow:0 0 24px rgba(207,255,4,.95), 0 0 46px rgba(207,255,4,.5);opacity:1}
}
.home-wrap .home-venn{animation:none}
.home-wrap .home-venn .label{animation:none}
.home-wrap .home-venn .circle{animation:none}
.home-wrap .home-venn .circle::before{
content:"";position:absolute;inset:calc(-3 * var(--u));
border-radius:50%;
border:calc(3 * var(--u)) solid transparent;
border-top-color:#FFF3CE;
filter:
drop-shadow(0 0 calc(5 * var(--u)) rgba(255,255,255,.95))
drop-shadow(0 0 calc(14 * var(--u)) rgba(255,226,130,.95))
drop-shadow(0 0 calc(30 * var(--u)) rgba(255,182,70,.65))
drop-shadow(0 0 calc(55 * var(--u)) rgba(255,140,60,.3));
opacity:0;
animation:bnrSpin 2s linear infinite, bnrPass 6s linear infinite;
}
/* 시작 각도(spin delay)와 등장 순서(pass delay).
Body 는 하단 교차부(180°)에서, Needs 는 상단 교차부(0°)에서,
Rel 은 좌상 교차부(300°)에서 — 넘겨받듯 이어진다 */
.home-wrap .home-venn .circle.top::before{animation-delay:-1s, 0s}
.home-wrap .home-venn .circle.left::before{animation-delay:0s, -4s}
.home-wrap .home-venn .circle.right::before{animation-delay:-1.67s, -2s}
/* '원 자체'가 돈다(정우 8/28 최종) — 링은 한 겹뿐이다.
원주 방향으로 밝기가 이음새 없이 변하는 conic 링(방사 마스크로 두께 3u 만 남김)을
통째로 저속 회전. 선을 얹어 흉내내면 끊김·혼재가 생긴다(반호안 반려). */
.home-wrap .home-venn .circle::after{
content:"";position:absolute;inset:calc(-3 * var(--u));
border-radius:50%;
background:conic-gradient(from 0deg,
rgba(255,255,255,1) 0deg,
rgba(255,255,255,.55) 100deg,
rgba(255,255,255,.24) 180deg,
rgba(255,255,255,.55) 260deg,
rgba(255,255,255,1) 360deg);
-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.8 * var(--u)), #000 calc(100% - 3 * var(--u)));
mask:radial-gradient(farthest-side, transparent calc(100% - 3.8 * var(--u)), #000 calc(100% - 3 * var(--u)));
filter:drop-shadow(0 0 calc(5 * var(--u)) rgba(255,255,255,.38));
animation:bnrSpin 24s linear infinite;
}
.home-wrap .home-venn .circle.left::after{animation-duration:30s;animation-direction:reverse}
.home-wrap .home-venn .circle.right::after{animation-duration:26s}
.home-wrap .home-venn .label.bnr{animation:bnrPulse 3.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
.home-wrap .home-venn .circle::before{animation:none!important}
.home-wrap .home-venn .label.bnr{animation:none!important}
}
/* v17 — 로고의 #home 앵커 착지점 (nav 높이만큼 여백) */
.home-wrap #home{scroll-margin-top:72px}
@media(max-width:900px){.home-wrap #home{scroll-margin-top:62px}}
/* ═══════════════════════════════════════════════════════════════════════
v18 — 타이포 스케일 통일 (전 뷰포트)
섹션마다 px 를 따로 박아 위계가 흩어져 있었다. 8단계 스케일을 정의하고
모든 텍스트를 여기에 매핑한다. 값은 전부 clamp(min, vw, max) 라
PC 에서 창을 줄이면 그대로 태블릿·모바일 크기로 내려간다.
Display 히어로 로고 · 밴드 키워드 56 → 120
H1 섹션 대제목 34 → 66
H2 블록 제목 26 → 46
H3 카드 제목 20 → 30
H4 카드 부제 16 → 20
Body L 섹션 설명 16 → 19
Body M 카드 본문 15 → 17
Body S 보조 문구 14 → 15
Label 마커 · 라벨(트래킹) 12 → 14
═════════════════════════════════════════════════════════════════════ */
.home-wrap{
/* 클라이언트 요청: 텍스트 크기 최대 5단계
① 메인 타이틀 ② 섹션 타이틀 ③ 서브 타이틀 ④ 본문 ⑤ 캡션·버튼 */
--fs-display:clamp(56px, 8.4vw, 120px); /* ① 메인 타이틀 */
--fs-h1:clamp(34px, 4.6vw, 66px); /* ② 섹션 타이틀 */
--fs-h2:clamp(21px, 2.4vw, 34px); /* ③ 서브 타이틀 */
--fs-h3:var(--fs-h2);
--fs-h4:var(--fs-h2);
--fs-body-l:clamp(15px, 1.3vw, 18px); /* ④ 본문 */
--fs-body-m:var(--fs-body-l);
--fs-body-s:var(--fs-body-l);
--fs-label:clamp(13px, 1.05vw, 15px); /* ⑤ 캡션·버튼 */
}
/* ── Display ─────────────────────────────────────────────── */
.home-wrap .home-hero .hook-wrap .brand-word,
.home-wrap .model-stage .m-kw{font-size:var(--fs-display)!important;line-height:.94;letter-spacing:-.035em}
/* ── H1 : 섹션 대제목 ────────────────────────────────────── */
.home-wrap .home-title,
.home-wrap .home-section-head h1,
.home-wrap .home-section-head h2{font-size:var(--fs-h1)!important;line-height:1.13;letter-spacing:-.03em}
/* ── H2 : 블록 제목 ──────────────────────────────────────── */
.home-wrap .home-hero .hook-wrap .line,
.home-wrap .model-stage .m-title,
.home-wrap .home-why-title,
.home-wrap .home-role-line,
.home-wrap .home-problem-strong{font-size:var(--fs-h2)!important;line-height:1.26;letter-spacing:-.025em}
/* ── H3 : 카드 제목 ──────────────────────────────────────── */
.home-wrap .home-service-name,
.home-wrap .home-why-eng,
.home-wrap .home-case-title,
.home-wrap .home-swipe-card h3,
.home-wrap .home-service-principle strong,
.home-wrap .home-bnr-strong,
.home-wrap .home-contact-person strong,
.home-wrap .home-contact-row strong{font-size:var(--fs-h3)!important;line-height:1.32;letter-spacing:-.02em}
/* ── H4 : 카드 부제 ──────────────────────────────────────── */
.home-wrap .home-service-tagline,
.home-wrap .home-why-kor,
.home-wrap .home-problem-list li,
.home-wrap .home-bnr-quote{font-size:var(--fs-h4)!important;line-height:1.45}
/* ── Body L : 섹션 설명 ─────────────────────────────────── */
.home-wrap .home-desc,
.home-wrap .model-stage .m-desc,
.home-wrap .home-bnr-desc,
.home-wrap .home-problem-conclusion,
.home-wrap .home-why-sub,
/* [v58] 구 CONTACT mailto 잔재 제거 — 새 카드(.ct-lines)는 li 상속 */
/* ── Body M : 카드 본문 ─────────────────────────────────── */
.home-wrap .home-service-desc,
.home-wrap .home-why-desc,
.home-wrap .home-story-copy,
.home-wrap .home-service-checklist li,
.home-wrap .home-swipe-card p,
.home-wrap .home-two-card p,
.home-wrap .home-two-card li{font-size:var(--fs-body-m)!important;line-height:1.7}
/* ── Body S : 보조 ──────────────────────────────────────── */
.home-wrap .home-schedule-note,
.home-wrap .home-why-card .row,
.home-wrap .home-why-card .row span,
.home-wrap .home-why-card .row .value,
.home-wrap .home-contact-person span,
.home-wrap .home-contact-row span{font-size:var(--fs-body-s)!important;line-height:1.55}
/* [v58] .home-form label · .home-contact-label 을 통일 타이포에서 분리(새 09 시안 자체 크기) */
/* ── Label : 마커·라벨 (트래킹 통일) ────────────────────── */
.home-wrap .home-eyebrow,
.home-wrap .home-story-label,
.home-wrap .home-case-index,
.home-wrap .home-service-mark,
.home-wrap .home-service-num,
.home-wrap .home-why-num,
.home-wrap .home-service-principle-label,
.home-wrap .home-bnr-keyword,
.home-wrap .home-swipe-card .status,
.home-wrap .home-hero .hook-wrap .meta-line{
font-size:var(--fs-label)!important;letter-spacing:.1em;
}
/* ── 버튼·칩 : 두 급으로만 ──────────────────────────────── */
.home-wrap .home-btn-primary,
.home-wrap .home-btn-ghost,
.home-wrap .hero-btn,
.home-wrap .home-service-card-cta,
.home-wrap .home-up-more{font-size:var(--fs-body-m)!important}
.home-wrap .m-chips span,
.home-wrap .home-service-tags span,
.home-wrap .home-why-chip{font-size:var(--fs-body-s)!important}
/* [v57] 폼 잔재 제거 — 16px 하한 취지는 아래 모바일 ct-f 룰이 승계 */
/* ═══ v19 — 클라이언트 요청서 미달 항목 마감 ═════════════════════════
① 3 Levels 텍스트 잘림 (8/10 요청서에 명시된 항목인데 모바일만 고쳐져
있었다) — PC 에서 691px·2280px 폭이라 화면 밖으로 840px 잘렸다.
화면 폭에 맞춰 스케일한다.
② 카드·버튼 마우스 오버 하이라이트 (요청서: 오버 효과 유지,
모바일은 터치 상태로) — hover 가능한 기기에서만, 터치는 :active
══════════════════════════════════════════════════════════════════ */
.home-wrap .ggg-word{font-size:min(28vw, 470px)!important;line-height:.92}
@media(hover:hover){
.home-wrap .home-why-card,
.home-wrap .home-service-card,
.home-wrap .home-swipe-card{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.home-wrap .home-why-cards.is-in .home-why-card:hover,
.home-wrap .home-service-cards.is-in .home-service-card:hover,
.home-wrap .home-swipe-card:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(16,16,16,.20)}
.home-wrap .home-btn-primary,
.home-wrap .home-btn-ghost,
.home-wrap .hero-btn,
.home-wrap .home-service-card-cta,
.home-wrap .home-up-more,
.home-wrap .home-swipe-link{transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease}
.home-wrap .home-btn-primary:hover,
.home-wrap .home-btn-ghost:hover,
.home-wrap .hero-btn:hover,
.home-wrap .home-service-card-cta:hover,
.home-wrap .home-up-more:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,16,16,.22)}
.home-wrap .home-swipe-link:hover{opacity:.72}
.home-wrap .home-contact-choice{transition:transform .2s ease, background-color .2s ease}
.home-wrap .home-contact-choice:hover{transform:translateY(-2px)}
}
/* 모바일·터치: 눌린 상태로 대체 */
.home-wrap .home-btn-primary:active,
.home-wrap .home-btn-ghost:active,
.home-wrap .hero-btn:active,
.home-wrap .home-service-card-cta:active,
.home-wrap .home-up-more:active,
.home-wrap .home-why-card:active,
.home-wrap .home-service-card:active,
.home-wrap .home-swipe-card:active,
.home-wrap .home-case-card:active{transform:scale(.985)}
/* ═══ v20 — 대비 전수 교정 ══════════════════════════════════════════
창 폭에 따라 글자색이 달라지던 원인: 히어로 카피 색을
@media(min-width:768px) 안에만 넣어, 그 아래에서는 통합본 원본색
(--ink #101010 / #1c1c18)이 살아나 블랙 배경에 검정 글씨가 됐다.
색은 폭과 무관하므로 미디어쿼리 밖으로 뺀다. 겸사 페이퍼 배경 위
저대비 텍스트(라임 #c7d813 1.52:1, 오렌지 2.49:1)도 함께 정리.
══════════════════════════════════════════════════════════════════ */
/* ① 히어로 카피 — 전 뷰포트 동일 */
.home-wrap .home-hero .hook-wrap .brand-word{color:var(--lime,#CFFF04)}
.home-wrap .home-hero .hook-wrap .line{color:#FBFBF3}
.home-wrap .home-hero .hook-wrap .hook-accent{background:var(--lime,#CFFF04)}
.home-wrap .home-hero .identity-stage .tagline{color:#FBFBF3}
/* ② 3 Levels 소개(페이퍼 배경) — 라임 본문은 읽히지 않는다.
본문은 잉크, 강조어만 라임 하이라이트로 */
.home-wrap .ggg-ed .ggg-ed-sub{color:#1c1c1c}
.home-wrap .ggg-ed .ggg-ed-sub b,
.home-wrap .ggg-ed .ggg-ed-sub strong{
color:#101010;background:var(--lime,#CFFF04);
padding:.04em .22em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* ③ 오렌지 잔존(3 Levels 리스킨에서 빠진 곳) → 브랜드 핑크 */
.home-wrap .ggg-ed em{color:#FF2E8A;font-style:normal}
/* ④ 대표 사진 서명 — 사진 위라 회색은 묻힌다 */
.home-wrap .home-signature{color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* ═══ v21 — 유지 섹션을 공통 기준에 맞춤 ═════════════════════════════
클라이언트 공통 기준 중 두 가지가 유지 섹션(People·STEPS·3 Levels)에서
지켜지지 않았다.
· 여백: 통합본 섹션 118/118 vs 유지 섹션 110~130 / 0~150
· 정렬: 통합본 150 vs 유지 섹션 128·160·300·638
→ 같은 칼럼(1140, 좌우 max(32px, 50vw-570px))과 같은 여백으로 통일한다.
단 STEPS·3Level 의 대형 타이포는 "섹션 사이 대형 디자인 영역"이라
칼럼 밖으로 풀블리드 복원해 연출을 유지한다.
══════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
.home-wrap .curr,
.home-wrap .mods,
.home-wrap .ggg-ed,
.home-wrap .ggg-cards,
.home-wrap .ggg-hero{
padding-top:118px;padding-bottom:118px;
padding-left:max(32px, calc(50vw - 570px));
padding-right:max(32px, calc(50vw - 570px));
}
.home-wrap .ggg-hero{padding-bottom:0}
/* 내부 고정폭 래퍼 해제 — 정렬선은 섹션 패딩이 담당 */
.home-wrap .mods > *,
.home-wrap .ggg-cards > *,
.home-wrap .ggg-ed > *,
.home-wrap .curr > *{max-width:none;margin-left:0;margin-right:0}
/* 유지 섹션 안 .wrap 의 48px 내부 패딩 — 정렬선을 198 로 밀던 원인 */
.home-wrap .curr > .wrap,
.home-wrap .mods > .wrap,
.home-wrap .ggg-ed > .wrap,
.home-wrap .ggg-cards > .wrap{padding-left:0;padding-right:0}
/* 대형 타이포 섹션은 원래 풀블리드가 의도다. 칼럼 패딩을 주면
인라인 박스인 .ggg-word 는 음수 마진으로 폭이 늘지 않고 위치만
왼쪽으로 밀려 '3'이 화면 밖으로 잘렸다(정우 지적).
→ 섹션 패딩을 0 으로 되돌리고, 안의 텍스트 요소에만 칼럼을 준다. */
.home-wrap .ggg-hero{padding-left:0;padding-right:0}
/* 대형 워드는 뷰포트 폭 기준 풀블리드 — 인라인/블록 여부와 무관하게 안전 */
.home-wrap .curr .curr-word,
.home-wrap .ggg-hero .ggg-word{
width:100vw;max-width:none;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
}
/* ═══ v22 — 2단 레이아웃의 빈 칼럼 채우기 ════════════════════════════
PC 2단으로 바꾸면서 짧은 쪽 칼럼 아래가 크게 비었다(CONTACT 좌측 676px).
그 빈 자리의 '위쪽'에 굵직한 아웃라인 타이포를 흐름으로 앉힌다 —
절대배치가 아니라 칼럼의 마지막 요소라 어느 화면 높이에서도 안 겹친다.
03 CHALLENGE 워터마크 · 06 대형 번호와 같은 아웃라인 언어.
══════════════════════════════════════════════════════════════════ */
.home-wrap .sec-mark{display:none}
.home-wrap .sec-mark i{display:block;font-style:normal}
@media(min-width:1024px){
.home-wrap .sec-mark{
display:block;grid-column:1;align-self:start;
margin-top:56px;font-weight:900;letter-spacing:-.045em;line-height:.92;
color:transparent;pointer-events:none;user-select:none;
}
/* CONTACT — 좌측 칼럼(연락처 아래) */
.home-wrap .sec-mark-contact{
font-size:clamp(44px,4.2vw,62px);
-webkit-text-stroke:2px rgba(207,255,4,.32);
filter:drop-shadow(0 0 24px rgba(207,255,4,.16));
}
.home-wrap .sec-mark-contact i{color:var(--lime,#CFFF04);-webkit-text-stroke:0;margin-top:.06em}
/* SCHEDULE — 우측 칼럼(카드 아래) */
.home-wrap .sec-mark-schedule{
grid-column:2;font-size:clamp(52px,5.4vw,84px);
-webkit-text-stroke:2px rgba(255,46,138,.26);
}
.home-wrap .sec-mark-schedule i{color:rgba(255,46,138,.5);-webkit-text-stroke:0}
/* ABOUT — 좌측 칼럼(사진 아래) */
.home-wrap .sec-mark-about{
font-size:clamp(38px,3.4vw,50px);
-webkit-text-stroke:2px rgba(16,16,16,.18);
}
.home-wrap .sec-mark-about i{color:#FF2E8A;-webkit-text-stroke:0;margin-top:.04em}
/* SCHEDULE 카드가 1장일 때 트랙이 반만 차던 것 */
.home-wrap .home-swipe-track{grid-template-columns:repeat(auto-fit, minmax(300px, 380px))}
}
/* v27 — 3 Levels 상단 라벨과 카피 사이 공백 축소 (.ggg-tag margin-top 260px) */
@media(min-width:768px){
.home-wrap .ggg-hero{min-height:720px}
.home-wrap .ggg-hero .ggg-tag{margin-top:130px}
}
/* ═══════════════════════════════════════════════════════════════════════
v28/v30 — 히어로(시안 sector/2.png) 1:1 구현
★ v30 (8/26) — 32인치 풀화면 지적 반영. 스케일 기준을 1920 으로 올렸다.
이전에는 1440 환산값을 px 로 박아 1920 화면에서 전부 75% 로 축소됐다.
정렬선 218 · 궤도 x794 가 그대로라 오른쪽 671px 이 통째로 비었고,
라임 면적이 0.75²=56% 로 줄어 색까지 죽어 보였다(정우 지적 3건의 공통 원인).
해법 = 스케일 단위 --u.
1920 이상 → 1px (시안 원본 픽셀 그대로)
1440 → 0.75px (기존 검증값과 완전히 동일)
그 아래 → 계속 비례, 1152 미만은 0.6px 로 하한
아래 수치는 전부 **시안 1920 실측값** 이다. calc(V * var(--u)) 로 쓴다.
1920 을 넘으면 --u 가 1px 에 걸려 크기가 멈추므로, 그때부터는
--hpad 의 max() 항이 이겨 콘텐츠 덩어리 전체가 화면 중앙에 온다.
시안 1920 실측: 정렬선 290.67 · 배지 y181(h46) · 제목1 y268 · 제목2 y365
설명 y500·y533 · CTA y742(250.67×66.67) · 궤도 x1058.67~1665(606.67×637.33)
모션(궤도 회전·프레임 전환)은 기존 그대로 유지한다.
═════════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
.home-wrap .home-hero{background:#000}
/* 폴드 레이아웃 — 좌 카피(정렬선 290.67) / 우 패널 */
.home-wrap .hero-lead{
/* 스케일 단위: 1920→1px, 1440→0.75px, 1152 미만→0.6px 고정 */
--u: clamp(.6px, .052083vw, 1px);
/* 좌 여백 = 남는 폭을 시안의 좌우 비(290.67 : 254.67 = .533)로 나눈 값.
이 한 식이 전 구간을 덮는다 — 1440→218, 1920→290.67(시안 그대로),
1920 초과에서는 덩어리가 같은 비율을 유지한 채 화면 가운데로 온다. */
--hpad: calc((100vw - var(--col1) - var(--col2)) * .533);
--col1: calc(768 * var(--u));
--col2: calc(606.67 * var(--u));
display:grid;
grid-template-columns:minmax(0,var(--col1)) minmax(0,var(--col2));
justify-content:start;column-gap:0;
align-items:start;
min-height:calc(1093.33 * var(--u));
padding:0 0 0 var(--hpad);
}
.home-wrap .hero-lead > .home-hero-stage{max-width:none!important;margin:0!important;zoom:1!important}
.home-wrap .hero-lead > .home-hero-stage:has(> .hook-wrap){order:1}
.home-wrap .hero-lead > .home-hero-stage:has(> .identity-stage){order:2}
/* ── 좌측 카피 ───────────────────────────────────────── */
.home-wrap .home-hero .hook-wrap{
display:flex;flex-direction:column;align-items:flex-start;
padding:calc(181.33 * var(--u)) 0 0;
}
/* 배지 */
.home-wrap .home-hero .hook-wrap .meta-line{
order:-1;margin:0;height:calc(46 * var(--u));
display:inline-flex;align-items:center;padding:0 calc(33.33 * var(--u));
border:1px solid #CFFF04;border-radius:100px;background:transparent;
color:#CFFF04!important;font-size:calc(20 * var(--u))!important;
font-weight:700;letter-spacing:-.01em;opacity:1;
}
/* 원본 .meta-line .mdot 이 opacity:.6 이라 가운뎃점만 라임이 죽어 있었다 */
.home-wrap .home-hero .hook-wrap .meta-line .mdot{
margin:0 calc(9.33 * var(--u));color:#CFFF04;opacity:1;
}
/* 제목1 — 흰색, 배지 아래 33.33 */
.home-wrap .home-hero .hook-wrap .line{
order:0;margin:calc(33.33 * var(--u)) 0 0;max-width:none;
color:#fff!important;font-size:calc(66.67 * var(--u))!important;font-weight:800;
line-height:1.16;letter-spacing:-.047em;white-space:nowrap;
}
/* 제목2 — 라임 + 좌측 바 */
.home-wrap .home-hero .hook-wrap .brand-row{
order:1;margin:calc(10.67 * var(--u)) 0 0 calc(6.67 * var(--u));
gap:calc(17.33 * var(--u));align-items:center;
}
.home-wrap .home-hero .hook-wrap .hook-accent{
width:calc(8 * var(--u));height:calc(53.33 * var(--u));
border-radius:0;background:#CFFF04;box-shadow:none;
}
.home-wrap .home-hero .hook-wrap .brand-word{
color:#CFFF04!important;font-size:calc(66.67 * var(--u))!important;font-weight:800;
line-height:1.16;letter-spacing:-.047em;
}
/* 설명 2줄 */
.home-wrap .home-hero .hook-wrap .hero-lede{
order:2;margin:calc(62.67 * var(--u)) 0 0;
color:#A3A3A3;font-size:calc(26.67 * var(--u));font-weight:500;
line-height:1.65;letter-spacing:-.047em;
}
/* CTA */
.home-wrap .home-hero .hook-wrap .hero-cta{
order:3;margin:calc(165.33 * var(--u)) 0 0;gap:calc(29.33 * var(--u));
}
.home-wrap .hero-btn{
width:calc(250.67 * var(--u));height:calc(66.67 * var(--u));padding:0;
border-radius:calc(10.67 * var(--u));
font-size:calc(21.33 * var(--u));font-weight:700;letter-spacing:-.02em;
}
.home-wrap .hero-btn-lime{background:#CFFF04;color:#101010;box-shadow:none}
.home-wrap .hero-btn-pink{
background:#000;color:#FB48C4;border:1px solid #FB48C4;box-shadow:none;
}
.home-wrap .hero-btn-pink:hover{background:rgba(251,72,196,.12);color:#FB48C4}
/* ── 우측 궤도 패널 ──────────────────────────────────── */
/* 무대 배경 — 시안의 사각 패널은 애니메이션 자리 표시용 스샷이라
그대로 옮기면 하드 엣지 자국이 남는다. 중앙 밝기는 시안과 같게(#0a0a0a
≒ 흰색 4%) 두고 가장자리를 배경으로 페이드시켜 경계를 없앤다.
글로우가 자연스럽게 번지도록 overflow 도 푼다. */
.home-wrap .home-hero .identity-stage{
width:calc(606.67 * var(--u));height:calc(637.33 * var(--u));
margin:calc(236 * var(--u)) 0 0;
border-radius:0;overflow:visible;zoom:1;
background:radial-gradient(ellipse 50% 50% at 50% 48%,
rgba(255,255,255,.045) 0%,
rgba(255,255,255,.034) 46%,
rgba(255,255,255,.014) 76%,
rgba(255,255,255,0) 100%);
}
.home-wrap .home-hero .identity-stage .ring-wrap{
top:47%;width:calc(394.67 * var(--u));height:calc(394.67 * var(--u));
margin:calc(-197.33 * var(--u)) 0 0 calc(-197.33 * var(--u));
}
/* [v65.8] 클라 "궤도 점 2배" 3차 — 진짜 대상은 ring-wrap i(원본 6px)였다. 20px + 글로우 */
.home-wrap .home-hero .identity-stage .ring-wrap i{
width:12px;height:12px;box-shadow:0 0 12px rgba(207,255,4,.55);
}
.home-wrap .home-hero .identity-stage .ring-wrap i:nth-child(1){top:-6px;margin-left:-6px}
.home-wrap .home-hero .identity-stage .ring-wrap i:nth-child(2){right:-6px;margin-top:-6px;box-shadow:0 0 12px rgba(255,46,138,.65)}
.home-wrap .home-hero .identity-stage .ring-wrap i:nth-child(3){bottom:-6px}
.home-wrap .home-hero .identity-stage .word-orbit{
width:calc(394.67 * var(--u));height:calc(394.67 * var(--u));
}
.home-wrap .home-hero .identity-stage .pill .w{font-size:calc(40 * var(--u))}
.home-wrap .home-hero .identity-stage .pill .k{font-size:calc(17.33 * var(--u))}
.home-wrap .home-hero .identity-stage .plus{font-size:calc(26.67 * var(--u))}
.home-wrap .home-hero .identity-stage .glow-orb.id{
width:calc(333.33 * var(--u));height:calc(333.33 * var(--u));
top:calc(-66.67 * var(--u));left:-8%;
}
.home-wrap .home-hero .identity-stage .assemble-mark{font-size:calc(77.33 * var(--u))}
.home-wrap .home-hero .identity-stage .tagline{
font-size:calc(34.67 * var(--u));padding:0 calc(32 * var(--u));
}
.home-wrap .home-hero .identity-stage .tag-pill{
font-size:calc(20 * var(--u));padding:calc(13.33 * var(--u)) calc(29.33 * var(--u));
}
.home-wrap .home-hero .identity-stage .tag-caption{
font-size:calc(17.33 * var(--u));margin-top:calc(13.33 * var(--u));
}
/* 인디케이터 — 시안 y804 = 패널 상단(236)에서 568 */
.home-wrap .home-hero .hero-lead .dots{bottom:calc(62.67 * var(--u));gap:calc(13.33 * var(--u))}
.home-wrap .home-hero .hero-lead .dots span{
width:calc(58.67 * var(--u));height:calc(5.33 * var(--u));border-radius:calc(2.67 * var(--u));
}
}
/* ── 슬라이드 마커 위치 ─────────────────────────────────────
PC: 시안대로 패널 하단(y804, 패널 좌단 = 정렬선 + 좌컬럼)
모바일: 궤도 바로 밑이 아니라 섹터 맨 아래 (정우 지적) */
.home-wrap .hero-lead{position:relative}
.home-wrap .hero-lead > .dots{
position:static;display:flex;justify-content:center;gap:10px;
margin:36px 0 0;padding:0 0 8px;
}
.home-wrap .hero-lead > .dots span{
width:44px;height:4px;border-radius:2px;background:rgba(251,251,243,.22);
}
.home-wrap .hero-lead > .dots span.on{background:#CFFF04}
@media(min-width:1024px){
.home-wrap .hero-lead > .dots{
position:absolute;
left:calc(var(--hpad) + var(--col1));
top:calc(804 * var(--u));
width:var(--col2);margin:0;padding:0;
gap:calc(13.33 * var(--u));
}
.home-wrap .hero-lead > .dots span{
width:calc(58.67 * var(--u));height:calc(5.33 * var(--u));border-radius:calc(2.67 * var(--u));
}
}
/* ── 라임 채도 복구 (8/26 정우 지적) ────────────────────────
색값은 시안과 동일한 #CFFF04 인데 통합본 원본이 곳곳에 opacity 를 걸어
실제로는 올리브로 죽어 보였다. 라임을 흐리는 규칙을 걷어낸다. */
.home-wrap .t-line.lime{opacity:1}
.home-wrap .meta-line .mdot{opacity:1}
/* ═══════════════════════════════════════════════════════════════════════
v48 (8/28) — 06 CASE STUDY (시안 images/main_01_06.png + _모션.gif)
시안 1920×1229 실측:
배경 #000 · 라벨 잉크 y250(font 18, #CFFF04) · 제목 y295(font 49.5, #fff, 1 줄)
카드 340×519 · x427/790/1150 (gap 23) · radius 10
테두리 1px rgba(207,255,4,.5) · 배경은 아래로 갈수록 올리브 rgba(207,255,4,.153)
내부(카드 top 기준 잉크): CASE index 20(10.3, 우측정렬 · #A3A3A3)
오브젝트 97(h81) · WACT IN 245(13.9) · 제목 280(21.6) · 부제 314(14.2)
BEFORE 374 · 구분선 395 · ACTION 407 · 구분선 430 · RESULT 442
행 x462~731 (좌우 35) · 라벨 11.4 / 값 12.2 우측정렬
BEFORE 회색 · ACTION 라임 · RESULT 흰색
오브젝트는 라임 와이어프레임 3D — GIF 에서 계속 회전한다.
이미지로 박지 않고 CSS 3D(preserve-3d)로 세워 실제로 돌린다:
1 원뿔 나선(원 12개를 Z 로 밀며 확대) · 2 동심 큐브 4겹 · 3 2×2 격자 큐브
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-case-study{
--u: clamp(.52px, .052083vw, 1px);
--side: max(20px, calc((100vw - 1066 * var(--u)) / 2));
background:#000!important;
padding:calc(244 * var(--u)) var(--side) calc(247 * var(--u))!important;
}
.home-wrap .home-case-study .home-section-head{margin:0 0 calc(105 * var(--u));max-width:none;text-align:left}
.home-wrap .home-case-study .home-eyebrow{
display:block;width:fit-content;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#CFFF04!important;font-size:calc(18 * var(--u))!important;font-weight:800;
letter-spacing:.02em;line-height:1.2!important;text-align:left!important;
}
.home-wrap .home-case-study .home-section-head h1{
margin:calc(3 * var(--u)) 0 0;color:#fff!important;
font-size:calc(49.5 * var(--u))!important;font-weight:800;
line-height:1.2!important;letter-spacing:-.03em;
}
.home-wrap .home-case-study .home-section-head h1 br{display:none} /* 시안은 한 줄 */
.home-wrap .home-case-list{
display:grid;grid-template-columns:repeat(3, calc(340 * var(--u)));
gap:calc(23 * var(--u));margin:0;max-width:none;justify-content:space-between;
}
.home-wrap .home-case-card{
position:relative;display:block;width:100%;margin:0;padding:0;
min-height:calc(519 * var(--u));
background:linear-gradient(180deg, rgba(207,255,4,0) 44%, rgba(207,255,4,.153) 100%), #000;
border:1px solid rgba(207,255,4,.5);border-radius:calc(10 * var(--u));
overflow:hidden;box-shadow:none;
opacity:1!important;transform:none!important;
}
.home-wrap .home-case-card .home-case-visual,
.home-wrap .home-case-card .home-case-body{
display:block;padding:0;margin:0;background:none;border:0;min-height:0;height:auto;
}
.home-wrap .home-case-card .home-topic-in,
.home-wrap .home-case-card .home-topic-up,
.home-wrap .home-case-card .home-topic-one{height:auto!important;padding:0;background:none;display:block}
.home-wrap .home-case-card .home-topline{display:block;margin:0;padding:0}
.home-wrap .home-case-card .home-case-index{
margin:calc(25 * var(--u)) calc(21 * var(--u)) 0 0;padding:0;text-align:right;
color:#A3A3A3!important;font-size:calc(10.3 * var(--u))!important;font-weight:500;
letter-spacing:.01em;line-height:1.3!important;background:none;
}
/* 아이콘 타일 자리 — 시안(8/28 교체) 실측: 카드 top+86, 70x70 r12 */
.home-wrap .home-case-card .cs-obj{
position:relative;width:100%;height:calc(70 * var(--u));margin:calc(61.5 * var(--u)) 0 0;
}
.home-wrap .home-case-card .cs-obj > .cs-spin{
position:absolute;left:50%;top:50%;
background-repeat:no-repeat;background-position:center;background-size:100% 100%;
animation:csFloat 4.6s ease-in-out infinite;
}
/* 셋이 '동시에' 아주 살짝 아래→위 둥실 — 위상차 없음, 과하지 않게 (정우 8/28) */
@keyframes csFloat{ 0%,100%{transform:translateY(calc(3 * var(--u)))} 50%{transform:translateY(calc(-4 * var(--u)))} }
@media(prefers-reduced-motion:reduce){
.home-wrap .home-case-card .cs-obj > .cs-spin{animation:none;transform:none;opacity:1}
}
.home-wrap .home-case-card .home-service-mark{
margin:calc(49 * var(--u)) 0 0;padding:0;text-align:center;background:none;
color:#CFFF04!important;font-size:calc(13.9 * var(--u))!important;font-weight:700;
letter-spacing:.02em;line-height:1.3!important;
}
.home-wrap .home-case-card .home-role-line{
margin:calc(17 * var(--u)) 0 0;padding:0;text-align:center;
color:#fff!important;font-size:calc(21.6 * var(--u))!important;font-weight:700;
line-height:1.3!important;letter-spacing:-.02em;
}
.home-wrap .home-case-card .home-role-line br{display:none}
.home-wrap .home-case-card .home-role-line b{font-weight:700;color:#fff;background:none!important;padding:0!important}
.home-wrap .home-case-card .home-case-title{
margin:calc(7 * var(--u)) 0 0;padding:0;text-align:center;
color:#A7A8A4!important;font-size:calc(14.2 * var(--u))!important;font-weight:400;
line-height:1.4!important;letter-spacing:-.01em;
}
/* BEFORE · ACTION · RESULT */
.home-wrap .home-case-card .home-story{
display:block;margin:calc(32 * var(--u)) calc(35 * var(--u)) 0;padding:0;border:0;
}
.home-wrap .home-case-card .home-story-item{
display:flex;align-items:baseline;justify-content:space-between;gap:calc(12 * var(--u));
margin:0;padding:calc(9 * var(--u)) 0 calc(10 * var(--u));background:none;border:0;
border-bottom:1px solid rgba(207,255,4,.30);
}
.home-wrap .home-case-card .home-story-item:last-child{border-bottom:0}
/* 원본 잔재 : 카드 배경의 대형 번호 워터마크(::after "02")와 값 앞 라임 점(copy::before) */
.home-wrap .home-case-card::before,
.home-wrap .home-case-card::after{display:none!important;content:none!important}
.home-wrap .home-case-card .home-story-copy::before,
.home-wrap .home-case-card .home-story-copy::after{display:none!important;content:none!important}
.home-wrap .home-case-card .home-story-label{
margin:0;padding:0;flex:0 0 auto;
font-size:calc(11.4 * var(--u))!important;font-weight:700;letter-spacing:.06em;
line-height:1.3!important;color:#A7A8A4!important;
}
.home-wrap .home-case-card .home-story-copy{
margin:0;padding:0;text-align:right;
font-size:calc(12.2 * var(--u))!important;font-weight:500;letter-spacing:-.01em;
line-height:1.3!important;color:#A7A8A4!important;
}
.home-wrap .home-case-card .home-story-item.action .home-story-label,
.home-wrap .home-case-card .home-story-item.action .home-story-copy{color:#CFFF04!important;font-weight:700}
.home-wrap .home-case-card .home-story-item.result .home-story-label,
.home-wrap .home-case-card .home-story-item.result .home-story-copy{color:#fff!important;font-weight:700}
/* ── 1023 이하 ── */
@media(max-width:1023px){
.home-wrap .home-case-study{padding:clamp(56px,10vw,110px) clamp(24px,6.5vw,44px)!important}
.home-wrap .home-case-study .home-section-head{margin-bottom:clamp(26px,5.5vw,48px)}
.home-wrap .home-case-study .home-section-head h1{font-size:clamp(21px,4.7vw,36px)!important}
.home-wrap .home-case-list{grid-template-columns:1fr;gap:clamp(14px,3.2vw,22px)}
.home-wrap .home-case-card{min-height:0;padding-bottom:clamp(18px,4vw,28px)}
.home-wrap .home-case-card .cs-obj{height:64px;margin-top:30px}
.home-wrap .home-case-card .cs-obj > .cs-spin{
width:64px!important;height:64px!important;margin:-32px 0 0 -32px!important;
}
.home-wrap .home-case-card .home-case-index{margin:14px 16px 0 0;font-size:11px!important}
.home-wrap .home-case-card .home-service-mark{margin-top:26px;font-size:13px!important}
.home-wrap .home-case-card .home-role-line{margin-top:14px;font-size:clamp(17px,4.2vw,22px)!important}
.home-wrap .home-case-card .home-case-title{margin-top:12px;font-size:clamp(12px,3vw,15px)!important}
.home-wrap .home-case-card .home-story{margin:clamp(20px,4.4vw,34px) clamp(20px,4.6vw,30px) 0}
.home-wrap .home-case-card .home-story-label{font-size:11px!important}
.home-wrap .home-case-card .home-story-copy{font-size:12px!important}
}
/* ═══════════════════════════════════════════════════════════════════════
v46 (8/27) — 3 LEVELS CONSULTING · 좌 고정 + 우 스크롤
(시안 main_01_03.jpg / main_01-2_03.jpg / main_01-3_03.jpg + 모션.gif)
시안 1920×1764 실측 (3 장 공통):
좌 텍스트 x169~ "3 LEVELS" 잉크 y678(h83,w329) / "CONSULTING" y798(h83,w487)
└ Archivo 900 은 그 높이(cap83→font 118.6)에서 폭이 589/844 라 시안보다 넓다
→ scaleX(.568) 로 압축(6 STEPS 와 같은 처리, 웹폰트에 wdth 축 없음)
부제 y943(h45,w370) font 47.5 · 본문 y1059/y1094(행간 35) font 22.6
세로 레일 x796 · 1px · rgba(255,255,255,.5)
글로우 = 라임 4px · 길이 154 · 위(#CFFF04)→아래(45%) 그라데이션
위치는 스크롤 진행률에 그대로 비례 — GIF 실측(f0 y97 → f55 y577 → f60~80 멈춤
→ f100~120 되돌아감 → f125 y97)이 "올리면 위로·내리면 아래로·멈추면 정지"다.
카드 x1060~1655(596) · radius 8 · 테두리 1px rgba(255,255,255,.5)
헤더 h188 가로 그라데이션 (GO #FEBD3B→#FEB228 / GET #FF9338→#FF7F24 / GOAL #FE6323→#FF4711)
본문 #1C1C1A · 좌우 패딩 74
라벨 잉크 +73(font 17) · 제목 +104(font 31) · 설명 +283/+318(행간 35, font 18.8)
체크 +399 부터 행간 50 (font 20.6) · 마커는 카드 accent 색
pill h38 w108 · 테두리·글자 accent · 카드 하단 여백 73
※ 시안3 은 레일이 빠져 있고 카드·글로우가 57 밀려 있다(포토샵 그룹 이동)
→ 스크롤로 교체되는 구조라 시안1·2 좌표로 고정한다.
═════════════════════════════════════════════════════════════════════ */
.home-wrap .ggg-cards{
--u: clamp(.52px, .052083vw, 1px);
--side: max(0px, calc((100vw - 1920 * var(--u)) / 2));
--rail: 8.7vh;
background:#000!important;
padding:0!important;
/* ★ .wact-scene 의 overflow:hidden 이 position:sticky 를 무력화한다 → 반드시 푼다 */
overflow:visible!important;
}
.home-wrap .ggg-cards.wact-scene::before,
.home-wrap .ggg-cards.wact-scene::after{display:none!important}
/* ★ 통합본 원본의 body{overflow-x:hidden} 이 body 를 스크롤 컨테이너로 만들어
position:sticky 가 전혀 고정되지 않았다. clip 은 넘침을 똑같이 자르면서
스크롤 컨테이너를 만들지 않는다(미지원 브라우저는 hidden 로 폴백). */
body{overflow-x:hidden;overflow-x:clip}
.home-wrap .ggg-cards > .wrap{max-width:none;width:100%;margin:0;padding:0}
.home-wrap .lv-stage{
display:grid;
grid-template-columns:calc(627 * var(--u)) calc(264 * var(--u)) calc(596 * var(--u));
align-items:start;
padding:0 calc(264 * var(--u) + var(--side)) 0 calc(169 * var(--u) + var(--side));
}
/* ── 좌 : 화면에 고정 ── */
.home-wrap .lv-left{
position:sticky;top:0;height:100vh;padding-top:calc(35 * var(--u));
display:flex;flex-direction:column;justify-content:center;
}
/* 배경 올리브 글로우도 스크롤과 함께 위→아래로 내려온다(시안1 상단·2 중간·3 하단) */
.home-wrap .lv-left::before{
content:"";position:absolute;z-index:0;pointer-events:none;
left:calc(-169 * var(--u) - var(--side));top:0;width:100vw;height:100%;
background:radial-gradient(ellipse 73% 57% at 0% var(--gy,0%),
rgba(207,255,4,.30) 0%, rgba(207,255,4,.10) 44%, transparent 74%);
}
.home-wrap .lv-left > *{position:relative;z-index:1}
/* 시안의 대형 타이포는 포토샵에서 가로로 눌린 것이라 폭/높이 비가 3.96 이다.
어떤 웹폰트도 그 비율이 안 나오고, scaleX 로 누르면 세로획만 얇아져
(시안 세로20/가로15.5 ↔ scaleX 결과 세로16/가로19.5) 글자가 길쭉해 보였다.
→ 시안에서 추출해 쓴다. 텍스트는 스크린리더용으로 남긴다. */
.home-wrap .lv-title{
margin:0;padding:0;border:0;
width:calc(487 * var(--u));height:calc(203 * var(--u));
background:url(../img/lv-title.png) no-repeat left top/100% 100%;
font-size:0!important;line-height:0!important;
}
.home-wrap .lv-title span{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.home-wrap .lv-sub{
margin:calc(57 * var(--u)) 0 0;color:#fff;
font-size:calc(47.5 * var(--u))!important;font-weight:800;
line-height:1.2!important;letter-spacing:-.02em;
}
.home-wrap .lv-desc{
margin:calc(57 * var(--u)) 0 0;color:rgba(255,255,255,.62);
font-size:calc(22.6 * var(--u))!important;font-weight:400;
line-height:1.55!important;letter-spacing:-.01em;
}
/* ── 가운데 : 세로 레일 + 스크롤에 붙어 움직이는 글로우 ── */
.home-wrap .lv-rail{
position:sticky;top:calc(148 * var(--u));height:calc(100vh - 148 * var(--u));
justify-self:start;width:calc(4 * var(--u));margin-left:calc(-2 * var(--u));
}
.home-wrap .lv-rail::before{
content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
background:rgba(255,255,255,.5);
}
.home-wrap .lv-rail i{
position:absolute;left:0;right:0;top:0;height:var(--rail);
background:linear-gradient(180deg,#CFFF04 0%, rgba(207,255,4,.45) 100%);
box-shadow:0 0 calc(10 * var(--u)) calc(2 * var(--u)) rgba(207,255,4,.55),
0 0 calc(26 * var(--u)) calc(6 * var(--u)) rgba(207,255,4,.30),
0 0 calc(60 * var(--u)) calc(14 * var(--u)) rgba(180,255,4,.16);
will-change:transform;
}
/* ── 우 : 카드 3 장이 한 장씩 지나간다 ── */
.home-wrap .lv-slot{
/* 슬롯을 100vh 로 두면 카드 높이차(775 vs 1152)만큼 1↔2 간격이 벌어진다
→ 카드 아래위 고정 여백으로 간격을 균일하게(정우 8/27) */
min-height:0;display:flex;align-items:center;padding:calc(210 * var(--u)) 0;
}
.home-wrap .ggg-cards .gc{
width:100%;background:#1C1C1A;border:1px solid rgba(255,255,255,.5);
border-radius:calc(8 * var(--u));overflow:hidden;box-shadow:none;
display:block;
}
.home-wrap .ggg-cards .gc-hd{
position:relative;padding:calc(69 * var(--u)) calc(74 * var(--u)) 0;
height:calc(188 * var(--u));color:#101010;
}
.home-wrap .ggg-cards .gc-1 .gc-hd{background:linear-gradient(90deg,#FEBD3B,#FEB228)}
.home-wrap .ggg-cards .gc-2 .gc-hd{background:linear-gradient(90deg,#FF9338,#FF7F24)}
.home-wrap .ggg-cards .gc-3 .gc-hd{background:linear-gradient(90deg,#FE6323,#FF4711)}
.home-wrap .ggg-cards .gc-lv{
margin:0;font-size:calc(17 * var(--u))!important;font-weight:700;
letter-spacing:.04em;line-height:1!important;color:rgba(16,16,16,.62);
text-transform:uppercase;
}
.home-wrap .ggg-cards .gc-name{
margin:calc(12 * var(--u)) 0 0;font-family:var(--en);
font-size:calc(36 * var(--u))!important;font-weight:900;
line-height:1!important;letter-spacing:-.02em;color:#101010;
}
.home-wrap .ggg-cards .gc-flag{
position:absolute;top:calc(20 * var(--u));right:calc(24 * var(--u));
display:inline-flex;align-items:center;justify-content:center;
margin:0;padding:0 calc(18 * var(--u));height:calc(34 * var(--u));
background:#101010;color:#fff;border-radius:100px;
font-family:var(--kr);font-size:calc(15 * var(--u))!important;font-weight:700;letter-spacing:-.01em;
text-transform:none;
}
.home-wrap .ggg-cards .gc-body{
display:block;padding:calc(86 * var(--u)) calc(74 * var(--u)) calc(73 * var(--u));
color:#fff;background:none;
}
.home-wrap .ggg-cards .gc-who{
margin:0;font-style:normal;color:#fff;
font-size:calc(18.8 * var(--u))!important;font-weight:500;
line-height:1.86!important;letter-spacing:-.01em;
}
.home-wrap .ggg-cards .gc-ul{
list-style:none;margin:calc(39 * var(--u)) 0 0;padding:0;
display:flex;flex-direction:column;gap:0;
}
.home-wrap .ggg-cards .gc-ul li{
position:relative;margin:0;padding:0 0 0 calc(31 * var(--u));
font-size:calc(18.7 * var(--u))!important;font-weight:500;
line-height:2.67!important;letter-spacing:-.01em;color:#fff;
}
.home-wrap .ggg-cards .gc-ul li::before{
content:"◆";position:absolute;left:0;top:0;font-weight:700; /* v63: GOAL 기호 기준 통일(클라) */
font-size:calc(15 * var(--u));line-height:3.3;
}
.home-wrap .ggg-cards .gc-1 .gc-ul li::before{color:#FEBD3B}
.home-wrap .ggg-cards .gc-2 .gc-ul li::before{color:#FF9338}
.home-wrap .ggg-cards .gc-3 .gc-ul li::before{color:#FE6323}
.home-wrap .ggg-cards .gc-ul li b{font-weight:700;color:#fff}
.home-wrap .ggg-cards .gc-pills{
display:flex;flex-wrap:wrap;gap:calc(14 * var(--u));padding:0;margin:calc(30 * var(--u)) 0 0;
}
.home-wrap .ggg-cards .gc-pill{
display:inline-flex;align-items:center;justify-content:center;
height:calc(38 * var(--u));padding:0 calc(22 * var(--u));border-radius:100px;
background:transparent;border:1px solid currentColor;
font-family:var(--kr);font-size:calc(17 * var(--u))!important;font-weight:600;letter-spacing:-.01em;
white-space:nowrap;
}
.home-wrap .ggg-cards .gc-1 .gc-pill{color:#FEBD3B}
.home-wrap .ggg-cards .gc-2 .gc-pill{color:#FF9338}
.home-wrap .ggg-cards .gc-3 .gc-pill{color:#FE6323}
.home-wrap .ggg-cards .gc-3 .gc-pill.hot{background:#FE6323;color:#101010;border-color:#FE6323}
/* [v65.3] GOAL 안쪽 박스 제거 — 테두리·배경·패딩 없이 GET 리스트와 같은 흐름(정우 9/10).
전용 ul margin-top 도 삭제 -> 기본 39u 적용, 칩 -4u 와 합쳐 GET 의 리듬과 동일 */
.home-wrap .ggg-cards .gc-inner{margin:0;padding:0;background:none;border:0;border-radius:0}
/* ── 1023 이하 : 고정 해제, 위→아래 한 줄 흐름 ── */
@media(max-width:1023px){
.home-wrap .ggg-cards{
padding:clamp(56px,10vw,110px) clamp(24px,6.5vw,44px)!important;
/* 고정이 풀리면 좌패널 안의 글로우만으로는 섹션 상단이 검정으로 잘린다 */
background:
radial-gradient(ellipse 120% 30% at 0% 8%,
rgba(207,255,4,.28) 0%, rgba(207,255,4,.09) 44%, transparent 74%),
#000!important;
}
.home-wrap .lv-left::before{display:none}
.home-wrap .lv-title{width:min(100%, calc(487px * .82));height:calc((100vw - 48px) * .417);max-height:calc(203px * .82)}
.home-wrap .lv-slot{padding:0}
.home-wrap .lv-stage{display:block;padding:0}
.home-wrap .lv-left{position:static;height:auto;display:block;margin-bottom:clamp(28px,6vw,52px)}
.home-wrap .lv-sub{margin-top:clamp(14px,3vw,26px);font-size:clamp(19px,4.4vw,34px)!important}
.home-wrap .lv-desc{margin-top:clamp(14px,3vw,26px);font-size:clamp(13px,3.1vw,17px)!important}
.home-wrap .lv-desc br{display:none}
.home-wrap .lv-rail{display:none}
.home-wrap .lv-slot{min-height:0;display:block;margin-bottom:clamp(26px,5.5vw,40px)} /* [v65.3c] 모바일 카드 간격 살짝 확대(정우 9/10) */
.home-wrap .lv-slot:last-child{margin-bottom:0}
.home-wrap .ggg-cards .gc{border-radius:12px}
.home-wrap .ggg-cards .gc-hd{height:auto;padding:clamp(28px,6.4vw,42px) clamp(22px,5vw,34px)} /* [v65.4] 여유 */
.home-wrap .ggg-cards .gc-lv{font-size:clamp(11px,2.6vw,14px)!important}
.home-wrap .ggg-cards .gc-name{margin-top:8px;font-size:clamp(24px,5.6vw,34px)!important}
.home-wrap .ggg-cards .gc-flag{
position:static;margin:12px 0 0;height:26px;padding:0 12px;font-size:clamp(11px,2.6vw,13px)!important;
}
.home-wrap .ggg-cards .gc-body{padding:clamp(28px,6.4vw,40px) clamp(22px,5vw,34px) clamp(30px,6.6vw,42px)} /* [v65.4] 여유 */
.home-wrap .ggg-cards .gc-who{font-size:clamp(13px,3.1vw,17px)!important;line-height:1.7!important}
.home-wrap .ggg-cards .gc-ul{margin-top:clamp(20px,4.4vw,30px)} /* [v65.4] */
.home-wrap .ggg-cards .gc-ul li{
font-size:clamp(13px,3.1vw,17px)!important;line-height:1.7!important;
padding-left:22px;margin-bottom:11px; /* [v65.4] */
}
.home-wrap .ggg-cards .gc-ul li::before{line-height:1.9;font-size:14px}
.home-wrap .ggg-cards .gc-pills{margin-top:clamp(14px,3vw,22px);gap:8px}
.home-wrap .ggg-cards .gc-pill{height:30px;padding:0 14px;font-size:clamp(11px,2.7vw,14px)!important}
}
/* ═══════════════════════════════════════════════════════════════════════
v44 (8/27) — STEPS (시안 images/main_01_04.png + 모션 GIF)
시안 1920×950 실측:
배경 #171B24 · 라임 #CFFF04 · 전부 가운데 정렬
라벨 "What is the curriculum?" 잉크 y310~346(h37) · font 49.8 · w900
"6 STEPS" 잉크 y444~680(h237) x522~1403(w882)
└ Archivo 900 은 그 높이에서 폭이 1461 이라 시안보다 넓다 →
font 338.6 + scaleX(.603) 로 시안 폭(882)에 맞춘다(웹폰트에 wdth 축 없음).
라벨↔대형 잉크 간격 98 · 위 310 / 아래 270
모션(main_01_04_모션.gif, 14f·60ms) 실측 궤적:
y190 → 90 → 71 → 67 → 64 → 62 → 60 … → 58 (자기 높이 132 만큼 아래→위, 감속)
상단이 잘린 채 올라온다 = overflow:hidden 마스크 안에서 translateY(100%)→0
═════════════════════════════════════════════════════════════════════ */
.home-wrap .curr{
--u: clamp(.52px, .052083vw, 1px);
background:#171B24!important;
padding:calc(303.6 * var(--u)) 20px calc(269 * var(--u))!important;
text-align:center;overflow:hidden;
}
.home-wrap .curr > .wrap{max-width:none;width:100%;margin:0;padding:0}
.home-wrap .curr .curr-top{margin:0}
.home-wrap .curr .curr-top h3{
margin:0;font-size:calc(49.8 * var(--u))!important;font-weight:900;
line-height:1!important;letter-spacing:-.02em;color:#CFFF04;
}
.home-wrap .curr .curr-word{
width:100%;max-width:none;margin:calc(90.6 * var(--u)) 0 0;
overflow:hidden; /* scaleX 전 레이아웃 폭이 화면보다 넓다 */
}
/* 시안 글자는 포토샵에서 가로로 눌린 것이라 scaleX 로는 획 균형이 안 맞는다
(세로획만 얇아져 길쭉해 보임 — 3 LEVELS 와 같은 문제) → 시안에서 추출 */
.home-wrap .curr .curr-word span{
display:block;overflow:hidden;
width:calc(882 * var(--u));max-width:100%;
height:calc(237 * var(--u));margin:0 auto;
font-size:0!important;line-height:0!important;
}
.home-wrap .curr .curr-word span .rise{
display:block;width:100%;height:100%;
background:url(../img/steps-word.png) no-repeat center/100% 100%;
}
/* v53 — 시안 변경(8/28): 6 STEPS 아래 라임 언더라인 바. 워드보다 좌우 +8.5 */
.home-wrap .curr .curr-word::after{
content:"";display:block;width:calc(899 * var(--u));max-width:100%;
height:calc(14 * var(--u));margin:calc(50 * var(--u)) auto 0;
background:#CFFF04;
}
/* 아래에서 위로 솟는 리빌 — GIF 궤적(감속) 그대로 */
/* 리빌 래퍼는 라 기본이 이탤릭이다 — 반드시 normal 로 되돌린다 */
.home-wrap .curr .rise{
display:block;font-style:normal;white-space:nowrap;
transform:translateY(108%);
transition:transform .7s cubic-bezier(.16,.84,.36,1);
}
/* 시안(main_01_04.png)은 배경이 깨끗하다 — 공용 씬 장식(점선 원호·글로우) 제외 */
.home-wrap .curr.wact-scene::before,
.home-wrap .curr.wact-scene::after{display:none!important}
.home-wrap .curr.is-in .rise{transform:translateY(0)}
/* 되돌릴 때는 애니메이션 없이 즉시 — 다시 들어올 때만 솟는다 */
.home-wrap .curr:not(.is-in) .rise{transition:none}
.home-wrap .curr.is-in .curr-word .rise{transition-delay:.13s}
@media(prefers-reduced-motion:reduce){
.home-wrap .curr .rise{transform:none;transition:none}
}
@media(max-width:1023px){
.home-wrap .curr{padding:clamp(64px,12vw,120px) clamp(24px,6.5vw,44px) clamp(56px,10vw,110px)!important}
.home-wrap .curr .curr-top h3{font-size:clamp(17px,3.7vw,30px)!important}
.home-wrap .curr .curr-word{margin-top:clamp(14px,3vw,28px)}
/* 시각 폭(= font × 2.605)이 화면 안에 들어오게 */
.home-wrap .curr .curr-word span{width:calc(100vw - 48px);height:calc((100vw - 48px) * .2687)}
.home-wrap .curr .curr-word::after{
width:calc(100vw - 48px);height:calc((100vw - 48px) * .0159);
margin-top:calc((100vw - 48px) * .0567);
}
}
/* ═══════════════════════════════════════════════════════════════════════
v45 (8/27) — 교육 6가지 커리큘럼 (시안 images/main_01_05.jpg)
시안 1920×2324 실측:
배경 #171B24 + 좌상단 청록 글로우(0,0 에서 rgba(35,99,114,.5), 가로 ~1000·세로 ~800)
제목 잉크 y295~346 · font 49.6 · #fff · 가운데
리드 잉크 y406~426 · font 22.6 · #A9AAAF · 가운데
카드 x470~1535(1066) · h206 · 피치 246.5(간격 40.5) · radius 8
배경 #1A1E2A · 테두리 1px rgba(255,255,255,.5) · 좌우 패딩 52
제목행 잉크 +52 : 한글 21.6/w800/#fff · 영문 21/Archivo500/#A9AAAF · 배지
배지 h24 · 좌우 padding 14.5 · font 11.5 · 필수 #E92D8E / 선택 #CEFF05 / 심화 #FF4F19
본문 잉크 +104, +139(행간 35) · font 18.85 · #A9AAAF
리드 잉크 bottom 426 → 카드1 top 562 (136) · 카드6 bottom 2000 → 아래 324
═════════════════════════════════════════════════════════════════════ */
.home-wrap .mods{
--u: clamp(.52px, .052083vw, 1px);
--side: max(20px, calc((100vw - 1066 * var(--u)) / 2));
background:
radial-gradient(ellipse 52% 34% at 0% 0%,
rgba(35,99,114,.5) 0%, rgba(35,99,114,.2) 42%, transparent 78%),
#171B24!important;
padding:calc(290 * var(--u)) var(--side) calc(326 * var(--u))!important;
}
.home-wrap .mods > .wrap{max-width:none;width:100%;margin:0;padding:0}
.home-wrap .mods .mods-head{
max-width:none;margin:0 0 calc(126 * var(--u));text-align:center;
}
.home-wrap .mods .mods-head h2{
margin:0;font-size:calc(49.6 * var(--u))!important;font-weight:800;
line-height:1.15!important;letter-spacing:-.03em;color:#fff!important;
}
.home-wrap .mods .mods-head h2 em{font-style:normal;color:#fff}
.home-wrap .mods .mods-lead{
margin:calc(53 * var(--u)) 0 0;font-size:calc(22.6 * var(--u))!important;font-weight:500;
line-height:1.5!important;letter-spacing:-.01em;color:#A9AAAF!important;
}
.home-wrap .mods .mods-list{
max-width:none;margin:0;display:flex;flex-direction:column;gap:calc(40.5 * var(--u));
}
.home-wrap .mods .mod{
display:block;margin:0;
background:#1A1E2A!important;border:1px solid rgba(255,255,255,.5);
border-radius:calc(8 * var(--u));
padding:calc(50 * var(--u)) calc(53 * var(--u)) calc(40 * var(--u));
min-height:calc(206 * var(--u));
/* 뷰포트에 들어오면 위로 솟으며 한 장씩 촤르르 (정우 8/28) */
opacity:0;transform:translateY(calc(26 * var(--u)));
transition:opacity .55s ease, transform .62s cubic-bezier(.16,.84,.36,1);
}
.home-wrap .mods-list.is-in .mod{opacity:1;transform:none}
.home-wrap .mods-list.is-in .mod:nth-child(1){transition-delay:0s}
.home-wrap .mods-list.is-in .mod:nth-child(2){transition-delay:.09s}
.home-wrap .mods-list.is-in .mod:nth-child(3){transition-delay:.18s}
.home-wrap .mods-list.is-in .mod:nth-child(4){transition-delay:.27s}
.home-wrap .mods-list.is-in .mod:nth-child(5){transition-delay:.36s}
.home-wrap .mods-list.is-in .mod:nth-child(6){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
.home-wrap .mods .mod{opacity:1;transform:none;transition:none}
}
.home-wrap .mods .mod-h{
display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0;
font-size:calc(21.6 * var(--u))!important;font-weight:800;letter-spacing:-.01em;
line-height:1.2!important;color:#fff!important;
}
.home-wrap .mods .mod-h em{
font-style:normal;font-family:var(--en);font-weight:500;
font-size:calc(21 * var(--u))!important;letter-spacing:0;color:#A9AAAF;
margin-left:calc(15 * var(--u));
}
.home-wrap .mods .mod-tag{
display:inline-flex;align-items:center;justify-content:center;
height:calc(24 * var(--u));padding:0 calc(14.5 * var(--u));
margin:0 0 0 calc(15 * var(--u));border-radius:100px;border:0;
font-family:var(--kr);font-size:calc(11.5 * var(--u))!important;font-weight:700;
letter-spacing:0;text-transform:none;line-height:1!important;white-space:nowrap;
}
.home-wrap .mods .mod-tag.t-req{background:#E92D8E;color:#fff!important}
.home-wrap .mods .mod-tag.t-opt{background:#CEFF05;color:#101010!important}
.home-wrap .mods .mod-tag.t-adv{background:#FF4F19;color:#fff!important}
.home-wrap .mods .mod-d{
margin:calc(18 * var(--u)) 0 0;max-width:none;
font-size:calc(18.85 * var(--u))!important;font-weight:400;
line-height:1.86!important;letter-spacing:-.01em;color:#A9AAAF!important;
}
@media(max-width:1023px){
.home-wrap .mods{
padding:clamp(56px,10vw,110px) clamp(24px,6.5vw,44px) clamp(56px,10vw,110px)!important;
background:
radial-gradient(ellipse 90% 26% at 0% 0%,
rgba(35,99,114,.5) 0%, rgba(35,99,114,.2) 42%, transparent 78%),
#171B24!important;
}
.home-wrap .mods .mods-head{margin-bottom:clamp(28px,6vw,54px)}
.home-wrap .mods .mods-head h2{font-size:clamp(21px,4.7vw,36px)!important}
.home-wrap .mods .mods-lead{
margin-top:clamp(12px,2.6vw,22px);font-size:clamp(13px,3.1vw,17px)!important;line-height:1.6!important;
}
.home-wrap .mods .mods-list{gap:clamp(12px,2.6vw,22px)}
.home-wrap .mods .mod{
padding:clamp(22px,5vw,34px) clamp(20px,4.6vw,32px);border-radius:10px;min-height:0;
}
.home-wrap .mods .mod-h{font-size:clamp(15px,3.6vw,20px)!important;gap:0}
.home-wrap .mods .mod-h em{font-size:clamp(14px,3.4vw,19px)!important;margin-left:10px}
.home-wrap .mods .mod-tag{
height:20px;padding:0 10px;margin-left:10px;font-size:clamp(10px,2.4vw,11px)!important;
}
.home-wrap .mods .mod-d{
margin-top:clamp(12px,2.8vw,22px);font-size:clamp(13px,3.1vw,17px)!important;line-height:1.72!important;
}
.home-wrap .mods .mod-d br{display:none}
}
/* ═══════════════════════════════════════════════════════════════════════
v43 (8/27) — 05 WACT SERVICE · 시안 1:1 재측정 (images/main_01_02.jpg)
시안 1920×3257 실측 (0.794 축소본이라 값 그대로 사용):
배경 #CEFF05 · 콘텐츠 x437~1483(1047) · 카드 radius 10(20 아님)
카드1 y522~1044(523) / 카드2 y1072~1594(523) / 카드3 y1621~2529(909) · 간격 27
카드 패딩 76 / 60 / 81 / 68 · 패널 453×366 (카드 높이 = 76+366+81)
좌컬럼 리듬(카드 top 기준 잉크): 번호 80 · 제목 134 · 태그라인 173 · 본문 233(행간 31)
CTA 박스 244×57 (세 카드 동일) · 본문 끝에서 45
패널 패딩 52/46/56 · 제목 잉크 +57 · 체크 행간 31.5 · pill h28 gap12
└ 체크리스트는 제목과 pill 사이에서 '세로 중앙'(카드3 은 4줄이라 앞뒤가 줄어든다)
패널2(카드3) 자물쇠 +55 · 본문 +125(행간 32) · 스텝 원 43 gap41 · 라벨 원+16
원칙 1047×163 · radius 10 · 라벨 잉크 +48 · 본문 +86 · 카드3 에서 70, 서로 34
폰트(폭 역산) 번호 19.5 · 제목 30 · 태그라인 22.5 · 본문 17.25 · CTA 16.7
패널제목 17.8 · 체크 17 · lock 17 · 스텝라벨 11.9 · 원칙라벨 18.9 · 원칙본문 30
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-services{
--u: clamp(.52px, .052083vw, 1px);
--side: max(20px, calc((100vw - 1047 * var(--u)) / 2));
background:#000 radial-gradient(ellipse calc(980 * var(--u)) calc(1050 * var(--u)) at 45% 0%,
rgba(207,255,4,.27) 0%, rgba(207,255,4,.09) 48%, transparent 100%) no-repeat!important;
padding:calc(205 * var(--u)) var(--side) calc(300 * var(--u));
}
.home-wrap .home-services .home-eyebrow{
display:block;width:fit-content;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#CFFF04!important;font-weight:800;letter-spacing:.02em;
line-height:1.2!important;text-align:left!important;
}
.home-wrap .home-services .home-title{
margin:calc(3 * var(--u)) 0 calc(102 * var(--u));
color:#fff!important;font-size:calc(49.2 * var(--u))!important;font-weight:800;
line-height:1.34!important;letter-spacing:-.03em;text-align:left;
}
.home-wrap .home-services .home-title .ln{display:block}
.home-wrap .home-services .home-title .ln i{font-style:normal}
/* ── 카드 ── */
.home-wrap .home-service-cards{
display:flex;flex-direction:column;gap:calc(27 * var(--u));
margin:0;padding:0;
}
.home-wrap .home-service-card{
display:grid;grid-template-columns:1fr calc(453 * var(--u));
column-gap:calc(52 * var(--u));align-items:start;
width:100%;max-width:none;margin:0;
padding:calc(76 * var(--u)) calc(60 * var(--u)) calc(81 * var(--u)) calc(68 * var(--u))!important;
border-radius:calc(10 * var(--u));border:0;box-shadow:none;
/* [v62] 구 '펼침모션 정지'용 opacity/transform !important 제거 — v60 스케일 팝이 막혔었다 */
}
.home-wrap .home-service-card.light{background:#fff;color:#101010}
.home-wrap .home-service-card.dark{background:#000;color:#FBFBF3;border:1px solid rgba(255,255,255,.5)}
.home-wrap .home-service-card.neon{
background:#CFFF04;color:#101010;
border:1px solid #101010;
padding:calc(78 * var(--u)) calc(59 * var(--u)) calc(78 * var(--u)) calc(67 * var(--u))!important;
}
.home-wrap .home-service-card .svc-main{grid-column:1;min-width:0}
.home-wrap .home-service-card .svc-side{
grid-column:2;display:flex;flex-direction:column;gap:calc(15 * var(--u));
}
/* 번호 — 잉크 top 이 카드 top+80 (패딩 76 + 4) */
.home-wrap .home-service-num{
display:block;margin:0 0 calc(29.5 * var(--u));
color:#A1A1A1!important;font-size:calc(19.5 * var(--u))!important;font-weight:700;
line-height:1!important;background:none!important;border:0!important;padding:0!important;
width:auto;height:auto;min-width:0;letter-spacing:.02em;
}
.home-wrap .home-service-card.dark .home-service-num{color:#8C8C8C!important}
.home-wrap .home-service-card.neon .home-service-num{color:rgba(16,16,16,.42)!important}
.home-wrap .home-service-name{
margin:0;font-size:calc(30 * var(--u))!important;font-weight:800;
line-height:1.3333!important;letter-spacing:-.02em;color:inherit;
}
.home-wrap .home-service-tagline{
margin:calc(4 * var(--u)) 0 0;font-size:calc(22.5 * var(--u))!important;font-weight:700;
line-height:1.3!important;letter-spacing:-.02em;color:inherit;
}
.home-wrap .home-service-card.dark .home-service-tagline{color:#fff}
.home-wrap .home-service-desc{
margin:calc(27.25 * var(--u)) 0 0;font-size:calc(17.25 * var(--u))!important;font-weight:400;
line-height:1.8!important;letter-spacing:-.02em;max-width:none;
color:rgba(16,16,16,.66);
}
.home-wrap .home-service-card.dark .home-service-desc{color:rgba(255,255,255,.72)}
.home-wrap .home-service-card.neon .home-service-desc{color:rgba(16,16,16,.72)}
/* CTA — 세 카드 모두 244×57 고정 */
.home-wrap .home-service-card-cta{
display:inline-flex!important;align-items:center;justify-content:center;gap:calc(19 * var(--u));
width:calc(244 * var(--u))!important;max-width:100%;
margin:calc(35 * var(--u)) 0 0;
padding:0;height:calc(57 * var(--u));
border-radius:100px;border:0;
font-size:calc(16.7 * var(--u))!important;font-weight:700;letter-spacing:-.02em;
transition:transform .25s ease, box-shadow .25s ease;
}
.home-wrap .home-service-card-cta .ar{font-style:normal;display:inline-block;line-height:1}
.home-wrap .home-service-card.light .home-service-card-cta{background:#101010;color:#fff!important}
.home-wrap .home-service-card.dark .home-service-card-cta{background:#CFFF04;color:#101010!important}
.home-wrap .home-service-card.neon .home-service-card-cta{
background:transparent;color:#101010!important;border:1px solid #101010;
}
@media(hover:hover){
.home-wrap .home-service-card-cta:hover{transform:translateY(-2px)}
.home-wrap .home-service-card.neon .home-service-card-cta:hover{background:rgba(16,16,16,.06)}
}
/* ── 검정 서브패널 ── */
.home-wrap .svc-panel{
position:relative;background:#000;border-radius:calc(10 * var(--u)); /* v53: 완전 블랙(정우) */
padding:calc(52 * var(--u)) calc(34 * var(--u)) calc(56 * var(--u)) calc(46 * var(--u));
color:#FBFBF3;
min-height:calc(366 * var(--u));
display:flex;flex-direction:column;
}
.home-wrap .home-service-card.dark .svc-panel{border:1px solid rgba(255,255,255,.5)}
.home-wrap .home-service-card.neon .svc-panel{background:#000}
.home-wrap .svc-panel-h{
flex:0 0 auto;margin:0;
font-size:calc(17.8 * var(--u))!important;font-weight:800;letter-spacing:.01em;
line-height:1.2!important;color:#fff;
}
.home-wrap .svc-panel-h b{color:#CFFF04;font-weight:800}
/* 체크리스트 — 제목과 태그 사이에서 세로 중앙 */
.home-wrap .svc-panel .home-service-checklist{
flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
margin:0;padding:calc(8 * var(--u)) 0 0;list-style:none;
border:0!important; /* 원본 .home-service-checklist{border-top} 잔재 */
}
.home-wrap .svc-panel .home-service-checklist li{
position:relative;display:flex;gap:calc(13 * var(--u));align-items:flex-start;
margin:0;padding:0;border:0!important; /* 원본 li{border-bottom} 잔재 */
font-size:calc(17 * var(--u))!important;font-weight:400;line-height:1.82!important;
letter-spacing:-.01em;color:rgba(255,255,255,.94);
}
.home-wrap .svc-panel .home-service-checklist li:last-child{margin-bottom:0}
.home-wrap .svc-panel .home-service-checklist li .check{
color:#CFFF04;flex:0 0 calc(11 * var(--u));font-size:calc(14 * var(--u))!important;
}
.home-wrap .svc-panel .home-service-tags{
flex:0 0 auto;display:flex;flex-wrap:wrap;gap:calc(12 * var(--u));margin:0;
}
.home-wrap .home-service-card.neon .svc-panel .home-service-checklist{padding-top:calc(3 * var(--u))}
.home-wrap .svc-panel .home-service-tags span{
display:inline-flex;align-items:center;justify-content:center;
height:calc(28 * var(--u));padding:0 calc(19.5 * var(--u));
border:1px solid #CFFF04;border-radius:100px;background:transparent;
color:#CFFF04;font-size:calc(10.8 * var(--u))!important;font-weight:600;letter-spacing:.01em;
white-space:nowrap;
}
/* 02 "자세히보기" — 패널 우상단 배지 */
.home-wrap .svc-panel .home-up-more i{font-style:normal}
.home-wrap .svc-panel .home-up-more{
position:absolute;top:calc(21 * var(--u));right:calc(22 * var(--u));
display:inline-flex!important;align-items:center;justify-content:center;gap:calc(5 * var(--u));
width:auto!important;height:calc(27 * var(--u));min-height:0;
padding:0 calc(14.5 * var(--u));margin:0;
background:#CFFF04;border:0;border-radius:100px;
color:#101010!important;font-size:calc(12.5 * var(--u))!important;font-weight:700;
letter-spacing:-.01em;white-space:nowrap;
}
@media(hover:hover){.home-wrap .svc-panel .home-up-more:hover{background:#E4FF57}}
/* ── 03 두 번째 패널 (잠금 안내 + 4단계) ── */
.home-wrap .svc-panel-2{
padding:calc(54 * var(--u)) calc(46 * var(--u)) calc(65 * var(--u));
min-height:calc(367 * var(--u));
padding-right:calc(46 * var(--u));justify-content:flex-start;
}
.home-wrap .svc-panel-2 .home-one-lock{
display:block;margin:0;padding:0;background:none;border:0;border-radius:0;
font-size:calc(17 * var(--u))!important;line-height:1.88!important;letter-spacing:-.01em;
color:rgba(255,255,255,.92);
}
.home-wrap .svc-panel-2 .home-one-lock .icon{
display:block;margin:0 0 calc(43 * var(--u));font-size:calc(21 * var(--u));line-height:1;
}
/* 4단계 — 원 43 · gap 41 · 연결선이 좌우로 27 씩 삐져나온다 */
.home-wrap .svc-panel-2 .home-one-steps{
position:relative;margin:calc(50 * var(--u)) 0 0;padding-right:calc(18 * var(--u));
display:flex;align-items:flex-start;justify-content:center;gap:calc(41 * var(--u));
}
.home-wrap .svc-panel-2 .home-one-steps::before{
content:"";position:absolute;left:calc(1 * var(--u));right:calc(14 * var(--u));
top:calc(21.5 * var(--u));height:1px;
background:rgba(206,255,5,.55);z-index:0;
}
.home-wrap .svc-panel-2 .home-one-step{
position:relative;z-index:1;flex:0 0 calc(43 * var(--u));min-width:0;
display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--u));
padding:0!important;margin:0;background:none!important;border-radius:0;text-align:center;
}
.home-wrap .svc-panel-2 .home-one-step .num{
display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
width:calc(43 * var(--u));height:calc(43 * var(--u));border-radius:50%;
background:#000;
border:1px solid rgba(255,255,255,.64);color:rgba(255,255,255,.62);
font-size:calc(13.5 * var(--u))!important;font-weight:700;letter-spacing:.02em;
animation:oneStep 6s linear infinite; /* v63: 속도 ×2 (클라) */
}
.home-wrap .svc-panel-2 .home-one-step .label{
margin:0!important;
font-size:calc(11.9 * var(--u))!important;font-weight:500;line-height:1!important;
color:rgba(255,255,255,.5);white-space:nowrap;
animation:oneStepLabel 6s linear infinite;
}
.home-wrap .svc-panel-2 .home-one-step:nth-child(1) .num,
.home-wrap .svc-panel-2 .home-one-step:nth-child(1) .label{animation-delay:0s}
.home-wrap .svc-panel-2 .home-one-step:nth-child(2) .num,
.home-wrap .svc-panel-2 .home-one-step:nth-child(2) .label{animation-delay:1.5s}
.home-wrap .svc-panel-2 .home-one-step:nth-child(3) .num,
.home-wrap .svc-panel-2 .home-one-step:nth-child(3) .label{animation-delay:3s}
.home-wrap .svc-panel-2 .home-one-step:nth-child(4) .num,
.home-wrap .svc-panel-2 .home-one-step:nth-child(4) .label{animation-delay:4.5s}
@keyframes oneStep{
0%,22%{border-color:#CFFF04;color:#CFFF04;box-shadow:0 0 calc(22 * var(--u)) rgba(207,255,4,.55)}
30%,100%{border-color:rgba(255,255,255,.64);color:rgba(255,255,255,.62);box-shadow:none}
}
@keyframes oneStepLabel{
0%,22%{color:#fff}
30%,100%{color:rgba(255,255,255,.5)}
}
@media(prefers-reduced-motion:reduce){
.home-wrap .svc-panel-2 .home-one-step .num,
.home-wrap .svc-panel-2 .home-one-step .label{animation:none}
.home-wrap .svc-panel-2 .home-one-step:first-child .num{
border-color:#CFFF04;color:#CFFF04;box-shadow:0 0 calc(22 * var(--u)) rgba(207,255,4,.55);
}
.home-wrap .svc-panel-2 .home-one-step:first-child .label{color:#fff}
}
/* ── 원칙 밴드 ── */
.home-wrap .home-service-principles{
display:flex;flex-direction:column;gap:calc(34 * var(--u));
margin:calc(70 * var(--u)) 0 0;
padding:0!important;border:0!important;border-radius:0!important;
background:none!important;box-shadow:none!important;overflow:visible!important;
}
.home-wrap .home-service-principle{
display:block;
margin:0;padding:calc(45 * var(--u)) calc(58 * var(--u)) calc(40 * var(--u));
background:#1A1A1A;border:1px solid rgba(255,255,255,.5);
border-radius:calc(8 * var(--u));min-height:calc(163 * var(--u));
}
.home-wrap .home-service-principle-label{
display:block;margin:0 0 calc(10 * var(--u));
color:#A4A4A4;font-size:calc(20 * var(--u))!important;font-weight:500;
line-height:1.2!important;letter-spacing:-.01em;
}
.home-wrap .home-service-principle strong{
display:block;color:#fff;font-size:calc(30 * var(--u))!important;font-weight:800;
line-height:1.35!important;letter-spacing:-.02em;
}
.home-wrap .home-service-principle strong b{color:#CFFF04;font-weight:800}
/* ── 1023 이하 ── */
@media(max-width:1023px){
.home-wrap .home-services{padding:clamp(48px,8vw,96px) clamp(24px,6.5vw,44px)}
.home-wrap .home-services .home-title{
font-size:clamp(21px,4.7vw,36px)!important;margin-bottom:clamp(24px,5vw,44px);
}
.home-wrap .home-service-cards{gap:clamp(14px,3.4vw,24px)}
.home-wrap .home-service-card,
.home-wrap .home-service-card.neon{
display:block;padding:clamp(26px,6vw,44px) clamp(20px,5vw,34px)!important;border-radius:12px;
}
.home-wrap .home-service-card .svc-side{margin-top:clamp(22px,5vw,36px);gap:12px}
.home-wrap .home-service-num{font-size:clamp(14px,3.4vw,20px)!important;margin-bottom:clamp(8px,2vw,14px)}
.home-wrap .home-service-name{font-size:clamp(20px,4.6vw,28px)!important}
.home-wrap .home-service-tagline{font-size:clamp(15px,3.5vw,20px)!important;margin-top:6px}
.home-wrap .home-service-desc{font-size:clamp(13px,3.1vw,16px)!important;max-width:none;margin-top:clamp(14px,3.4vw,24px)}
.home-wrap .home-service-desc br{display:none}
.home-wrap .home-service-card-cta{
width:100%!important;max-width:none;height:52px;font-size:clamp(13px,3.2vw,16px)!important;
margin-top:clamp(18px,4vw,28px);gap:10px;
}
.home-wrap .svc-panel{padding:clamp(20px,4.6vw,30px);border-radius:12px;min-height:0}
.home-wrap .svc-panel-h{font-size:clamp(14px,3.3vw,18px)!important;margin-bottom:14px}
.home-wrap .svc-panel .home-service-checklist{display:block}
.home-wrap .svc-panel .home-service-checklist li{
font-size:clamp(12px,3vw,15px)!important;line-height:1.6!important;margin-bottom:10px;
}
.home-wrap .svc-panel .home-service-tags{margin-top:16px;gap:8px}
.home-wrap .svc-panel .home-service-tags span{
height:26px;padding:0 12px;font-size:clamp(10px,2.6vw,12px)!important;
}
.home-wrap .svc-panel .home-up-more{
position:static;margin:0 0 12px;height:24px;font-size:11px!important;
}
.home-wrap .svc-panel-2{padding:clamp(20px,4.6vw,30px);min-height:0}
.home-wrap .svc-panel-2 .home-one-lock{font-size:clamp(12px,3vw,15px)!important;line-height:1.7!important}
.home-wrap .svc-panel-2 .home-one-lock .icon{margin-bottom:12px;font-size:18px}
.home-wrap .svc-panel-2 .home-one-lock br{display:none}
.home-wrap .svc-panel-2 .home-one-steps{
margin-top:clamp(22px,5vw,36px);gap:clamp(8px,2.6vw,20px);
}
.home-wrap .svc-panel-2 .home-one-step{flex:1 1 0;gap:10px}
.home-wrap .svc-panel-2 .home-one-step .num{width:34px;height:34px;font-size:11px!important}
.home-wrap .svc-panel-2 .home-one-steps::before{top:17px;left:0;right:0}
.home-wrap .svc-panel-2 .home-one-step .label{
font-size:10px!important;white-space:normal;text-align:center;line-height:1.3!important;
}
.home-wrap .home-service-principles{margin-top:clamp(30px,6vw,54px);gap:clamp(12px,3vw,22px)}
.home-wrap .home-service-principle{
padding:clamp(22px,5vw,34px);border-radius:12px;min-height:0;
}
.home-wrap .home-service-principle-label{font-size:clamp(12px,3vw,15px)!important;margin-bottom:8px}
.home-wrap .home-service-principle strong{font-size:clamp(17px,4.1vw,25px)!important}
}
/* ═══════════════════════════════════════════════════════════════════════
v40 (8/27) — 01 ABOUT WACT (시안 images/main_01_03.png)
시안 1920×1301 실측 (이미 0.794 축소본이라 값을 그대로 쓴다):
배경 y0~643 흰색 / y644~ #F4F4F4 (2단)
정렬선 440 · 콘텐츠 우측 1749 (폭 1309)
eyebrow y213(h14) · #8FC31F · font 18
제목 y262~375 · 2줄 · font 49.2 · 검정
사진 x440~820(381×612) y456 · radius 24
본문 x879~1749(871) · font 18.9 · 줄간격 40
형광펜 라임 194×36 / 핑크 181×36
서명 사진 아래 x448 (CEO + 손글씨)
※ eyebrow/제목은 상단 전체 폭, 그 아래 사진(좌)+본문(우) 2열.
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-about{
/* 01 만 콘텐츠가 1309 라 02·03(1065)보다 컸다 → --u 를 0.8136 배로 낮춰
실효 폭·좌우 여백을 02·03 과 완전히 일치시킨다(1920 에서 1065 / side 427.5). */
--u: clamp(.423px, .042376vw, .8136px);
--side: max(20px, calc((100vw - 1309 * var(--u)) / 2));
background:linear-gradient(180deg,
#fff 0, #fff calc(644 * var(--u)), #F4F4F4 calc(644 * var(--u)))!important;
display:grid;
grid-template-columns:calc(381 * var(--u)) calc(871 * var(--u));
justify-content:space-between;
column-gap:calc(59 * var(--u));
padding:calc(205 * var(--u)) var(--side) calc(226 * var(--u));
align-items:start;
}
/* 라벨·제목은 상단 전체 폭.
★ 기존 규칙이 .home-figure 에 grid-row:1/99 + position:sticky 를 걸어
사진이 전 행을 점유하면서 라벨·제목이 아래로 밀렸다 — 행을 명시한다. */
.home-wrap .home-about > .home-eyebrow{grid-column:1 / -1;grid-row:1}
.home-wrap .home-about > .home-about-title{grid-column:1 / -1;grid-row:2}
.home-wrap .home-about > .home-figure{
grid-column:1;grid-row:3!important;position:static!important;top:auto!important;
display:flex;flex-direction:column;align-items:flex-start;
}
.home-wrap .home-about > .home-greeting{grid-column:2;grid-row:3}
/* 서명은 사진 아래 (마크업상 img 앞에 있다) */
.home-wrap .home-about .home-figure img{order:1}
.home-wrap .home-about .home-figure .home-signature{order:2}
.home-wrap .home-about .home-eyebrow{
display:block;width:fit-content;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#8FC31F!important;font-weight:800;letter-spacing:.02em;
line-height:1.2!important;text-align:left!important;
}
.home-wrap .home-about .home-about-title{
margin:calc(3 * var(--u)) 0 calc(72 * var(--u));
color:#000!important;font-size:calc(49.2 * var(--u))!important;font-weight:800;
line-height:1.38!important;letter-spacing:-.03em;
}
/* 사진 */
.home-wrap .home-about .home-figure{
grid-column:1;margin:0;padding:0;position:relative;
background:none!important;box-shadow:none!important;border:0;border-radius:0;
}
.home-wrap .home-about .home-figure img{
display:block;width:100%;height:calc(612 * var(--u));object-fit:cover;
border-radius:calc(24 * var(--u));margin:0;
}
/* 서명 — 시안 손글씨를 그대로 추출해 쓴다 */
.home-wrap .home-about .home-signature{
position:static;display:block;
width:calc(248 * var(--u));height:calc(36 * var(--u));
margin:calc(14 * var(--u)) 0 0 calc(8 * var(--u));
background:url('../img/ceo-sign.png') left center/contain no-repeat;
font-size:0;color:transparent;border:0;padding:0;
}
/* 본문 */
.home-wrap .home-about .home-greeting{grid-column:2;margin:0}
.home-wrap .home-about .home-greeting p{
/* 시안(적용/main_01_031.png) 실측: 기본 행간 40 · 문단 사이만 추가 여백 */
margin:0;
color:#1A1A1A;font-size:calc(18.9 * var(--u))!important;font-weight:400;
line-height:2.12!important;letter-spacing:-.02em;
}
.home-wrap .home-about .home-greeting p.biz-item{margin-top:calc(50 * var(--u))}
.home-wrap .home-about .home-greeting p.biz-item + p.biz-item{margin-top:calc(13 * var(--u))}
.home-wrap .home-about .home-greeting p:last-child{margin-bottom:0;margin-top:calc(24 * var(--u))}
.home-wrap .home-about .home-greeting b{
font-weight:700;color:#101010;
/* 기존 .biz-item b 규칙이 형광펜 배경을 걸어놨다 — 강조 볼드는 배경 없이 */
background:none!important;padding:0!important;border-radius:0;box-shadow:none!important;
}
/* 형광펜 */
.home-wrap .home-about .home-greeting b.hl-lime,
.home-wrap .home-about .home-greeting b.hl-pink{
display:inline-block;padding:calc(2 * var(--u)) calc(10 * var(--u))!important;
border-radius:calc(4 * var(--u));color:#101010;font-weight:700;
}
.home-wrap .home-about .home-greeting b.hl-lime{background:#CFFF04!important}
.home-wrap .home-about .home-greeting b.hl-pink{background:#FF2E9A!important;color:#fff}
/* ── 1023 이하: 1단 ── */
@media(max-width:1023px){
.home-wrap .home-about{
display:block;
background:linear-gradient(180deg, #fff 0, #fff 46%, #F4F4F4 46%)!important;
padding:clamp(48px,8vw,96px) clamp(24px,6.5vw,44px);
}
.home-wrap .home-about .home-about-title{
font-size:clamp(21px,4.7vw,36px)!important;
margin:calc(3 * var(--u)) 0 clamp(24px,5vw,44px);
line-height:1.32!important;
}
.home-wrap .home-about .home-figure{margin:0 0 clamp(22px,5vw,40px)}
.home-wrap .home-about .home-figure img{
width:100%;height:auto;aspect-ratio:381 / 612;max-height:none;border-radius:12px;
}
.home-wrap .home-about .home-signature{
width:clamp(150px,42vw,220px);height:clamp(22px,6vw,32px);margin:10px 0 0;
}
.home-wrap .home-about .home-greeting p{
font-size:clamp(13px,3.2vw,17px)!important;line-height:1.9!important;
margin-bottom:clamp(12px,3vw,18px);
}
.home-wrap .home-about .home-greeting p.biz-item{margin-top:clamp(18px,4vw,30px)}
.home-wrap .home-about .home-greeting b.hl-lime,
.home-wrap .home-about .home-greeting b.hl-pink{padding:3px 8px;border-radius:4px}
}
/* ═══════════════════════════════════════════════════════════════════════
v38 (8/26) — 02 WHAT WE DO (시안 02 — WHAT WE DO.png)
시안 1920×1531 실측:
배경 #000 (People 밴드도 같은 검정으로 이어진다)
eyebrow x302 y207~224 · 라임 · font 22.5
제목 x301 y260~324 · 흰색 · font 63 · **한 줄** (2행 강제 금지)
부제 x302 y363~388 · font 28.7 · 회색
안내박스 x290~1631 y471~678(1342×208) · #1A1A1A
BUSINESS MODELS x359 y541 (22.2) + 설명 x592 (25.8)
바로가기 pill 180×35 · 라임 아웃라인 / 핑크 아웃라인
카드 x289 / 985 · 645×544 · y725 · 라임 #CFFF04 / 핑크 #FF2E9A
번호 우상단 y40 · 제목 y117(38.7·2줄) · 불릿 y256(24.2)
버튼 y407 506×64 검정 pill
호버: 카드가 아주 살짝 커지는 것만 (정우 지시)
═════════════════════════════════════════════════════════════════════ */
/* People 밴드는 원래 배경 그대로 둔다 — 검정은 02 섹터부터 (정우 지시,
images/적용/main_01_051.png 이 지점부터가 검정 구간) */
.home-wrap .home-two{
/* ★ wact_03.png (8/27) — 콘텐츠 전체를 0.794배로 축소. PC 에서 좌우 여백을
확보하고 한 화면에 들어오게. 값은 그대로 두고 스케일 단위만 줄인다.
1920 → .794px · 1440 → .595px · 그 아래는 비례 */
--u: clamp(.41px, .04135vw, .794px);
background:#000!important;
/* 1920 초과에서는 콘텐츠 폭 1342 를 유지한 채 화면 중앙으로 */
/* 콘텐츠 폭(1342 * --u)을 화면 가운데 놓는다 — 시안 좌 428 / 우 427 */
--side: max(20px, calc((100vw - 1342 * var(--u)) / 2));
padding:calc(200 * var(--u)) var(--side) calc(263 * var(--u));
text-align:left;
}
.home-wrap .home-two .home-eyebrow{
display:block;width:fit-content;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#CFFF04!important;font-weight:800;
letter-spacing:.02em;line-height:1.2!important;text-align:left!important;
}
.home-wrap .home-two .home-title{
margin:calc(3 * var(--u)) 0 0;
color:#fff!important;font-size:calc(63 * var(--u))!important;font-weight:800;
line-height:1.2!important;letter-spacing:-.03em;white-space:nowrap;
}
.home-wrap .home-two .home-desc{
margin:calc(24 * var(--u)) 0 0;
color:#8A8A8A!important;font-size:calc(28.7 * var(--u))!important;font-weight:500;
line-height:1.4!important;letter-spacing:-.02em;
}
/* 안내 박스 */
.home-wrap .home-two-route{
display:block;margin:calc(60 * var(--u)) 0 0;
padding:calc(62 * var(--u)) calc(69 * var(--u)) calc(57 * var(--u));
min-height:calc(208 * var(--u));
background:#1A1A1A;border:0;border-radius:calc(12 * var(--u));
}
.home-wrap .home-two-route-copy{display:block}
.home-wrap .home-two-route-copy strong{
display:inline;margin:0;
color:#fff!important;font-size:calc(22.2 * var(--u))!important;font-weight:800;
letter-spacing:.01em;line-height:1.2!important;
}
.home-wrap .home-two-route-copy > span:not(.home-two-route-pills){
display:inline;margin-left:calc(26 * var(--u));
color:#8A8A8A!important;font-size:calc(25.8 * var(--u))!important;font-weight:500;
letter-spacing:-.02em;line-height:1.2!important;
}
.home-wrap .home-two-route-pills{
display:flex;gap:calc(22 * var(--u));margin:calc(23 * var(--u)) 0 0;
}
.home-wrap .home-two-pill{
display:inline-flex;align-items:center;justify-content:center;
width:calc(180 * var(--u));height:calc(35 * var(--u));
border-radius:100px;background:transparent;text-decoration:none;
font-size:calc(15 * var(--u))!important;font-weight:700;letter-spacing:.04em;
transition:background-color .22s ease, color .22s ease;
}
.home-wrap .home-two-pill.lime{border:1px solid #CFFF04;color:#CFFF04!important}
.home-wrap .home-two-pill.pink{border:1px solid #FF2E9A;color:#FF2E9A!important}
@media(hover:hover){
.home-wrap .home-two-pill.lime:hover{background:#CFFF04;color:#101010!important}
.home-wrap .home-two-pill.pink:hover{background:#FF2E9A;color:#fff!important}
}
/* 카드 2장 */
.home-wrap .home-two-cards{
display:grid;grid-template-columns:repeat(2, calc(645 * var(--u)));
justify-content:space-between;gap:0;
margin:calc(47 * var(--u)) 0 0;
}
.home-wrap .home-two-card{
position:relative;display:block;text-decoration:none;overflow:hidden;
min-height:calc(544 * var(--u));
padding:calc(63 * var(--u)) calc(68 * var(--u)) calc(73 * var(--u));
border:0;border-radius:calc(12 * var(--u));
transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
}
.home-wrap .home-two-card.lime{background:#CFFF04;color:#101010}
.home-wrap .home-two-card.pink{background:#FF2E9A;color:#fff}
/* 호버 — 아주 살짝만 (정우 지시) */
@media(hover:hover){
.home-wrap .home-two-card:hover{transform:scale(1.018)}
}
.home-wrap .home-two-card:active{transform:scale(.995)}
.home-wrap .home-two-card-top{display:block;position:static}
.home-wrap .home-two-card-kicker{
margin:0;font-size:calc(19 * var(--u))!important;font-weight:600;
letter-spacing:.04em;line-height:1.2!important;opacity:.62;
}
.home-wrap .home-business-no{
position:absolute;right:calc(49 * var(--u));top:calc(40 * var(--u));
font-size:calc(30 * var(--u))!important;font-weight:800;line-height:1!important;
letter-spacing:0;opacity:1;
/* 통합본 시절 원형 배지 잔재 제거 — 시안은 숫자만 */
width:auto;height:auto;min-width:0;padding:0;border:0!important;border-radius:0;
background:none!important;box-shadow:none!important;display:block;
}
.home-wrap .home-two-card.pink .home-business-no{color:#fff}
.home-wrap .home-two-card-main{
margin:calc(12 * var(--u)) 0 0;
font-size:calc(38.7 * var(--u))!important;font-weight:800;
line-height:1.29!important;letter-spacing:-.03em;
}
.home-wrap .home-two-card ul{
margin:calc(45 * var(--u)) 0 0;padding:0;list-style:none;
}
.home-wrap .home-two-card ul li{
position:relative;padding-left:calc(22 * var(--u));
font-size:calc(24.2 * var(--u))!important;font-weight:500;
line-height:1.3!important;letter-spacing:-.02em;
}
.home-wrap .home-two-card ul li + li{margin-top:calc(11 * var(--u))}
.home-wrap .home-two-card ul li::before{
content:"";position:absolute;left:0;top:calc(13 * var(--u));
width:calc(5 * var(--u));height:calc(5 * var(--u));border-radius:50%;
background:currentColor;opacity:.85;
}
.home-wrap .home-two-card .home-cta{
display:flex;align-items:center;justify-content:space-between;
margin:calc(45 * var(--u)) 0 0;
width:calc(506 * var(--u));height:calc(64 * var(--u));
padding:0 calc(36 * var(--u)) 0 calc(49 * var(--u));
background:#101010;border-radius:100px;
font-size:calc(23 * var(--u))!important;font-weight:700;letter-spacing:-.02em;
}
.home-wrap .home-two-card.lime .home-cta{color:#CFFF04!important}
.home-wrap .home-two-card.pink .home-cta{color:#FF2E9A!important}
.home-wrap .home-two-card .home-cta-arrow{
width:calc(13 * var(--u));height:calc(14 * var(--u));flex:0 0 auto;
display:block;line-height:0;
/* 통합본 원본 잔재 — 배경 사각형과 텍스트 "→" 가 SVG 위에 겹쳐 있었다 */
background:none!important;-webkit-mask:none;mask:none;
}
.home-wrap .home-two-card .home-cta-arrow::after,
.home-wrap .home-two-card .home-cta-arrow::before{content:none!important;display:none!important}
.home-wrap .home-two-card .home-cta-arrow svg{width:100%;height:100%;display:block}
/* ── 1023 이하 ── */
@media(max-width:1023px){
.home-wrap .home-two{padding:clamp(48px,8vw,96px) clamp(24px,6.5vw,44px)}
.home-wrap .home-two .home-title{
white-space:normal;font-size:clamp(21px,4.7vw,36px)!important;word-break:keep-all;
/* 라벨→제목 여백은 03 과 동일하게 (모바일에서 02 만 12~24px 벌어져 있었다) */
}
.home-wrap .home-two .home-desc{
font-size:clamp(13px,2.9vw,18px)!important;margin-top:clamp(10px,2.6vw,20px);word-break:keep-all;
}
.home-wrap .home-two-route{
margin-top:clamp(26px,6vw,50px);padding:clamp(20px,5vw,40px);min-height:0;border-radius:12px;
}
.home-wrap .home-two-route-copy strong{display:block;font-size:clamp(14px,3.4vw,20px)!important}
.home-wrap .home-two-route-copy > span:not(.home-two-route-pills){
display:block;margin:6px 0 0;font-size:clamp(12px,3.1vw,18px)!important;word-break:keep-all;
}
.home-wrap .home-two-route-pills{margin-top:clamp(14px,3.4vw,24px);gap:10px;flex-wrap:wrap}
.home-wrap .home-two-pill{
width:auto;padding:0 clamp(14px,4vw,24px);height:clamp(30px,8vw,38px);
font-size:clamp(11px,2.8vw,14px)!important;
}
.home-wrap .home-two-cards{
grid-template-columns:1fr;gap:clamp(14px,3.4vw,24px);margin-top:clamp(18px,4vw,32px);
}
.home-wrap .home-two-card{
min-height:0;padding:clamp(26px,6vw,44px) clamp(20px,5vw,36px);border-radius:12px;
}
.home-wrap .home-business-no{
right:clamp(20px,5vw,36px);top:clamp(20px,5vw,36px);font-size:clamp(17px,4.2vw,26px)!important;
}
.home-wrap .home-two-card-kicker{font-size:clamp(11px,2.8vw,16px)!important}
.home-wrap .home-two-card-main{
font-size:clamp(17px,4vw,26px)!important;margin-top:clamp(10px,2.6vw,18px);word-break:keep-all;
}
.home-wrap .home-two-card ul{margin-top:clamp(20px,4.6vw,36px)}
.home-wrap .home-two-card ul li{
font-size:clamp(13px,3.3vw,19px)!important;padding-left:clamp(13px,3vw,20px);
}
.home-wrap .home-two-card ul li + li{margin-top:clamp(9px,2.2vw,16px)}
.home-wrap .home-two-card ul li::before{top:clamp(7px,1.7vw,11px);width:4px;height:4px}
.home-wrap .home-two-card .home-cta{
width:100%;height:clamp(46px,12vw,56px);margin-top:clamp(22px,5vw,40px);
padding:0 clamp(16px,4vw,26px);font-size:clamp(13px,3.4vw,18px)!important;
}
.home-wrap .home-two-card .home-cta-arrow{width:18px;height:18px}
}
/* ═══════════════════════════════════════════════════════════════════════
v37 (8/26) — 04 WHY WACT (시안 04 — WHY WACT.png)
시안 1920×1799 실측:
배경 #F4F4F4 (검정 → 밝은 회색으로 반전)
eyebrow x866~1053 y208~225 · #8FC31F · font 23 · pill 아님
제목 폭389 y259~315 · 검정 · font 63
부제 폭481 y369~394 · font 26 · 한 줄
chip x819~1101 y485~550(283×66) · 검정 배경 + 라임 글씨 24
카드 x254 / 735 / 1220 · 폭449 · radius12 · gap35
01·03 y604~1251(h648) / 02 y506~1390(h885) ← 계단식
01 흰색 · 02 라임 #CFFF04 · 03 검정
우상단 그라데이션 아이콘 · 내부 padding 40
밴드 y1555~1798 검정 풀블리드
버튼 x676~1243(568×97) · 배경 #262626 · 흰 글씨 30
호버(마우스오버 시안): 버튼만 바뀐다 — 배경 #1F2601 + 라임 1px 테두리.
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-why{
/* ★ wact_03.png (8/27) — 콘텐츠 전체를 0.794배로 축소. PC 에서 좌우 여백을
확보하고 한 화면에 들어오게. 값은 그대로 두고 스케일 단위만 줄인다.
1920 → .794px · 1440 → .595px · 그 아래는 비례 */
--u: clamp(.41px, .04135vw, .794px);
background:#F4F4F4!important;
padding:calc(204 * var(--u)) max(20px, calc((100vw - 1417 * var(--u)) / 2)) 0;
text-align:center;position:relative;overflow:hidden;
}
.home-wrap .home-why .home-eyebrow{
display:block;margin:0 auto;padding:0;background:none!important;border:0;border-radius:0;
box-shadow:none!important;
color:#8FC31F!important;font-weight:800;
letter-spacing:.02em;line-height:1.2!important;text-align:center!important;
}
.home-wrap .home-why .home-why-header{display:block;margin:0;padding:0}
.home-wrap .home-why .home-why-title{
margin:calc(3 * var(--u)) 0 0;
color:#000!important;font-size:calc(63 * var(--u))!important;font-weight:800;
line-height:1.2!important;letter-spacing:-.03em;
}
.home-wrap .home-why .home-why-tagline{
margin:calc(28 * var(--u)) 0 0;
color:#8A8A8A!important;font-size:calc(26 * var(--u))!important;font-weight:500;
line-height:1.4!important;letter-spacing:-.02em;
}
.home-wrap .home-why .home-why-chip{
display:inline-flex;align-items:center;justify-content:center;
margin:calc(63 * var(--u)) 0 0;
width:calc(283 * var(--u));height:calc(66 * var(--u));
background:#000!important;border:0;border-radius:100px;
color:#CFFF04!important;font-size:calc(24 * var(--u))!important;font-weight:700;
letter-spacing:-.02em;
}
/* ── 카드 3장 · 계단식 ── */
.home-wrap .home-why-cards{
display:grid;grid-template-columns:repeat(3, calc(449 * var(--u)));
justify-content:center;align-items:start;
gap:0 calc(35 * var(--u));
margin:calc(59 * var(--u)) 0 0;padding:0;
text-align:left;
}
.home-wrap .home-why-card{
position:relative;overflow:hidden;
border:0;border-radius:calc(12 * var(--u));
padding:calc(56 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u))!important;
/* 계단식 — 세 카드 모두 h648, 02 만 139 아래로. align-self 로 stretch 를 끊는다 */
margin-top:0!important;
align-self:start;height:auto!important;min-height:calc(648 * var(--u))!important;
box-shadow:none;
}
.home-wrap .home-why-card.light{background:#fff;color:#101010}
.home-wrap .home-why-card.dark{background:#000;color:#fff}
.home-wrap .home-why-card.neon{
background:#CFFF04;color:#101010;
margin-top:calc(139 * var(--u))!important;
/* 01·03 과 같은 상하 여백 — padding-bottom:0 이라 마지막 줄이 카드 밑변에
붙어 잘린 것처럼 보였다(정우 지적). 콘텐츠 548 + 56 + 44 = 648 로 맞는다. */
padding-top:calc(56 * var(--u))!important;padding-bottom:calc(44 * var(--u))!important;
}
/* 우상단 그라데이션 아이콘 */
.home-wrap .home-why-icon{
position:absolute;right:calc(46 * var(--u));top:calc(41 * var(--u));
display:block;width:calc(132 * var(--u));line-height:0;pointer-events:none;
}
.home-wrap .home-why-card.neon .home-why-icon{
/* 시안(04 — WHY WACT.png)에서 그대로 추출한 그라데이션 심볼.
두 타원 반원이 서로 다른 지름선에서 blur 로 녹아드는 형태라
SVG 로는 결이 안 나온다 — 원본을 쓰는 게 정확하다. */
width:calc(93 * var(--u));aspect-ratio:93 / 56;height:auto;
right:calc(40 * var(--u));top:calc(49 * var(--u));
background:url('../img/why-icon-02.png') center/100% 100% no-repeat;
}
.home-wrap .home-why-card.dark .home-why-icon{width:calc(72 * var(--u));right:calc(53 * var(--u));top:calc(45 * var(--u))} /* v63: 01·02와 높이 통일(클라) */
.home-wrap .home-why-icon svg{width:100%;height:auto;display:block}
.home-wrap .home-why-num{
display:block;margin:0;
color:#9A9A9A!important;font-size:calc(30 * var(--u))!important;font-weight:700;
letter-spacing:.02em;line-height:1.2!important;
}
.home-wrap .home-why-card.dark .home-why-num{color:#7A7A7A!important}
.home-wrap .home-why-eng{
margin:calc(47 * var(--u)) 0 0;
font-size:calc(37 * var(--u))!important;font-weight:800;
line-height:1.2!important;letter-spacing:-.02em;color:inherit;
}
.home-wrap .home-why-kor{
margin:calc(8 * var(--u)) 0 0;
font-size:calc(28 * var(--u))!important;font-weight:700;
line-height:1.2!important;letter-spacing:-.02em;color:inherit;
}
.home-wrap .home-why-desc{
margin:calc(51 * var(--u)) 0 0;
font-size:calc(22 * var(--u))!important;font-weight:500;
line-height:1.36!important;letter-spacing:-.02em;opacity:.78;
max-width:calc(330 * var(--u)); /* 시안 최장 줄 325 (02 카드) */
}
.home-wrap .home-why-compare{
margin:calc(69 * var(--u)) 0 0;padding:calc(50 * var(--u)) 0 0;
border-top:1px solid currentColor;
}
.home-wrap .home-why-card.light .home-why-compare,
.home-wrap .home-why-card.neon .home-why-compare{border-top-color:rgba(16,16,16,.22)}
.home-wrap .home-why-card.dark .home-why-compare{border-top-color:rgba(255,255,255,.24)}
.home-wrap .home-why-compare .row{
display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u));
font-size:calc(19 * var(--u))!important;font-weight:500;letter-spacing:-.02em;opacity:.72;
/* 통합본 원본의 padding:10px 0 을 걷는다 — 두 행 간격이 시안보다 20px 벌어져 있었다 */
padding:0!important;line-height:1.2!important;
}
.home-wrap .home-why-compare .row + .row{margin-top:calc(23 * var(--u));opacity:1;font-weight:800}
.home-wrap .home-why-compare .row.brand .value{color:#7B2BF0!important;font-weight:800}
.home-wrap .home-why-card.dark .home-why-compare .row.brand .value{color:#CFFF04!important}
.home-wrap .home-why-card.neon .home-why-compare .row.brand .value{color:#5B2BD8!important}
/* ── 하단 검정 밴드 + 다운로드 버튼 ── */
.home-wrap .home-why-band{
width:100vw;margin:calc(165 * var(--u)) 0 0 calc(50% - 50vw);
padding:calc(74 * var(--u)) 20px calc(73 * var(--u));
background:#000;
display:flex;justify-content:center;align-items:center;
}
.home-wrap .home-why-band .home-download-badge{
display:inline-flex;align-items:center;justify-content:center;gap:calc(20 * var(--u));
vertical-align:top;line-height:1;margin:0!important;
width:calc(568 * var(--u));height:calc(97 * var(--u));padding:0;
background:#1A1F02;color:#CFFF04!important;border:1px solid rgba(207,255,4,.8);border-radius:calc(10 * var(--u)); /* v63: 더 잘 보이게(클라) */
font-size:calc(30 * var(--u))!important;font-weight:700;letter-spacing:-.02em;
box-shadow:none;transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.home-wrap .home-why-band .home-download-badge svg{
width:calc(30 * var(--u));height:calc(30 * var(--u));flex:0 0 auto;
}
.home-wrap .home-why-band .home-download-badge svg path{stroke:currentColor}
@media(hover:hover){
.home-wrap .home-why-band .home-download-badge:hover{
background:#1F2601;border-color:#CFFF04;color:#fff!important;transform:none;
}
.home-wrap .home-why-band .home-download-badge:hover svg path{stroke:#CFFF04}
}
.home-wrap .home-why-band .home-download-badge:active{background:#1F2601;border-color:#CFFF04}
/* ── 1023 이하: 1단 ── */
@media(max-width:1023px){
.home-wrap .home-why{padding:clamp(48px,8vw,96px) clamp(24px,6.5vw,44px) 0}
.home-wrap .home-why .home-why-title{font-size:clamp(21px,4.7vw,36px)!important}
.home-wrap .home-why .home-why-tagline{font-size:clamp(13px,2.9vw,18px)!important;word-break:keep-all}
.home-wrap .home-why .home-why-chip{
width:auto;padding:0 clamp(20px,5vw,34px);height:clamp(40px,10vw,56px);
font-size:clamp(13px,3.2vw,19px)!important;margin-top:clamp(24px,6vw,50px);
}
.home-wrap .home-why-cards{
grid-template-columns:1fr;gap:clamp(16px,4vw,28px);
margin-top:clamp(28px,6vw,48px);
}
.home-wrap .home-why-card,
.home-wrap .home-why-card.neon{
margin-top:0!important;min-height:0!important;
padding:clamp(26px,6vw,44px) clamp(20px,5vw,36px)!important;
}
.home-wrap .home-why-icon,
.home-wrap .home-why-card.neon .home-why-icon,
.home-wrap .home-why-card.dark .home-why-icon{
top:clamp(20px,5vw,36px);right:clamp(20px,5vw,36px);width:clamp(64px,17vw,110px);
}
.home-wrap .home-why-num{font-size:clamp(15px,3.6vw,24px)!important}
.home-wrap .home-why-eng{font-size:clamp(19px,4.3vw,27px)!important;margin-top:clamp(20px,4.4vw,34px)}
.home-wrap .home-why-kor{font-size:clamp(15px,3.4vw,21px)!important;margin-top:8px}
.home-wrap .home-why-desc{
font-size:clamp(13px,3.3vw,18px)!important;margin-top:clamp(18px,4vw,32px);
max-width:none;line-height:1.6!important;
}
.home-wrap .home-why-compare{margin-top:clamp(22px,5vw,40px);padding-top:clamp(16px,4vw,30px)}
.home-wrap .home-why-compare .row{font-size:clamp(12px,3vw,17px)!important}
.home-wrap .home-why-compare .row + .row{margin-top:clamp(12px,3vw,22px)}
.home-wrap .home-why-band{
margin-top:clamp(40px,8vw,80px);padding:clamp(34px,7vw,64px) 20px;
}
.home-wrap .home-why-band .home-download-badge{
width:100%!important;max-width:none!important;height:auto;min-height:clamp(46px,12vw,54px);
padding:12px 18px;font-size:clamp(14px,3.6vw,16px)!important;border-radius:10px;
}
.home-wrap .home-why-band .home-download-badge svg{width:20px;height:20px}
}
/* ═══════════════════════════════════════════════════════════════════════
v35 (8/26) — 03 BUSINESS CHALLENGE (시안 03 — BUSINESS CHALLENGE.png)
시안 1920×1552 실측 (섹션 상단 기준):
eyebrow 잉크 y204~221 · x302~604 · 라임 #CFFF04 · font 22.4
제목 잉크 y255~312 · x302~1207(폭906) · 흰색 · font 63 · 한 줄
구분선 y444 / 616 / 788 / 960 · x290~1631 · rgb(130,130,128)
행 높이 172 · 번호 x322(폭26·font22·회색) · 문장 x389 · font 39 흰색
박스 y1105~1312(h207) · x290~1631 · 라임 1px 테두리 · radius 10
강조문 잉크 y1164~1203 · x366 · font 39 (뒷 문장만 라임)
설명 잉크 y1226~1251 · x367 · font 26 · 회색
버튼 x1274~1560(폭287) · y1173~1244(h72) · 라임 pill + 글로우
호버(마우스오버 시안): 그 행만 배경 라임 #CFFF04 · 글자 검정 ·
위아래 구분선은 라임에 흡수. 글자 위치는 이동하지 않는다.
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-problem{
/* ★ wact_03.png (8/27) — 콘텐츠 전체를 0.794배로 축소. PC 에서 좌우 여백을
확보하고 한 화면에 들어오게. 값은 그대로 두고 스케일 단위만 줄인다.
1920 → .794px · 1440 → .595px · 그 아래는 비례 */
--u: clamp(.41px, .04135vw, .794px);
--pad: max(20px, calc((100vw - 1342 * var(--u)) / 2));
position:relative;overflow:hidden;
/* main_01_04.png: 글로우가 좌상단 → 상단 중앙으로 바뀌었다.
실측 밝기 x960 y0=42 · y450=17 · y750=3 / x480=18 · x240=6 */
background:
radial-gradient(ellipse 50% 55% at 50% 0%, rgba(140,190,10,.27), transparent 70%),
#000;
padding:calc(201 * var(--u)) var(--pad) calc(240 * var(--u));
}
.home-wrap .home-problem > *{position:relative;z-index:1}
/* eyebrow — 시안은 pill 이 아니라 라임 텍스트 */
.home-wrap .home-problem .home-eyebrow{
display:block;margin:0 0 0 calc(12 * var(--u));padding:0;background:none;border:0;border-radius:0;
color:#CFFF04;font-weight:800;letter-spacing:.02em;
line-height:1.2!important;
/* pill 시절 잔재 — 1px inset 테두리가 폭 1329 블록에 사각 선으로 남았다 */
box-shadow:none!important;outline:0;width:fit-content;
}
/* 제목 — 흰색 한 줄 */
.home-wrap .home-problem .home-title{
margin:calc(3 * var(--u)) 0 0 calc(12 * var(--u));
color:#fff;font-size:calc(63 * var(--u))!important;font-weight:800;
line-height:1.2!important;letter-spacing:-.03em;white-space:nowrap;
}
/* 리스트 — 구분선 4줄, 행 높이 172 */
.home-wrap .home-problem-list{
margin:calc(121 * var(--u)) 0 0;padding:0;list-style:none;
border-top:1px solid rgba(255,255,255,.5);
}
.home-wrap .home-problem-list li{
display:flex;align-items:center;gap:0;
height:calc(172 * var(--u));padding:0 0 0 calc(32 * var(--u));
border-bottom:1px solid rgba(255,255,255,.5);
color:#fff;font-size:calc(39 * var(--u))!important;font-weight:700;letter-spacing:-.03em;
line-height:1.2!important;
transition:background-color .28s ease, color .28s ease;
}
.home-wrap .home-problem-list li > span{
flex:0 0 calc(67 * var(--u));width:calc(67 * var(--u));
color:rgba(255,255,255,.65);font-size:calc(29 * var(--u))!important;font-weight:700;letter-spacing:0;
line-height:1.2!important;
transition:color .28s ease;
}
/* 호버 — 행 전체 라임, 글자 검정, 구분선은 라임에 흡수 */
@media(hover:hover){
.home-wrap .home-problem-list li:hover{
background:#CFFF04;color:#101010;
border-bottom-color:#CFFF04;
box-shadow:0 -1px 0 0 #CFFF04; /* 위 구분선(=앞 행의 border-bottom)까지 덮는다 */
}
.home-wrap .home-problem-list li:hover > span{color:rgba(16,16,16,.55)}
}
.home-wrap .home-problem-list li:active{
background:#CFFF04;color:#101010;border-bottom-color:#CFFF04;box-shadow:0 -1px 0 0 #CFFF04;
}
.home-wrap .home-problem-list li:active > span{color:rgba(16,16,16,.55)}
/* 하단 박스 */
.home-wrap .home-problem-box{
display:flex;align-items:center;justify-content:space-between;
gap:calc(40 * var(--u));
margin:calc(145 * var(--u)) 0 0;
padding:0 calc(71 * var(--u)) 0 calc(76 * var(--u));
min-height:calc(207 * var(--u));
border:1px solid #CFFF04;border-radius:calc(10 * var(--u));
}
.home-wrap .home-problem-box-copy{min-width:0}
.home-wrap .home-problem-strong{
margin:0;color:#fff;font-size:calc(39 * var(--u))!important;font-weight:800;
line-height:1.25!important;letter-spacing:-.03em;
}
.home-wrap .home-problem-strong b{color:#CFFF04;font-weight:800}
.home-wrap .home-problem-conclusion{
margin:calc(14 * var(--u)) 0 0;
color:rgba(255,255,255,.62);font-size:calc(26 * var(--u))!important;font-weight:500;
line-height:1.45;letter-spacing:-.03em;
}
.home-wrap .home-problem-ctas{flex:0 0 auto;margin:0}
.home-wrap .home-problem .home-btn-primary{
display:inline-flex;align-items:center;justify-content:center;gap:calc(18 * var(--u));
width:calc(287 * var(--u));height:calc(72 * var(--u));padding:0;
background:#CFFF04;color:#101010;border:0;border-radius:100px;
font-size:calc(24 * var(--u))!important;font-weight:700;letter-spacing:-.02em;
box-shadow:0 0 calc(34 * var(--u)) rgba(207,255,4,.55);
transition:box-shadow .25s ease, transform .25s ease;
}
.home-wrap .home-problem .home-btn-primary:hover{
box-shadow:0 0 calc(52 * var(--u)) rgba(207,255,4,.85);transform:translateY(-2px);
}
/* 리빌은 유지 */
.home-wrap .home-problem .home-problem-box.rv{transition-delay:.42s}
/* ── 1023 이하: 1단으로 접는다 ── */
@media(max-width:1023px){
.home-wrap .home-problem{
padding:clamp(48px,8vw,96px) clamp(24px,6.5vw,44px);
}
.home-wrap .home-problem .home-title{
white-space:normal;font-size:clamp(21px,4.7vw,36px)!important;word-break:keep-all;
}
.home-wrap .home-problem-list{margin-top:clamp(30px,6vw,60px)}
.home-wrap .home-problem-list li{
height:auto;min-height:clamp(58px,13vw,104px);padding:clamp(12px,3vw,20px) 0 clamp(12px,3vw,20px) clamp(6px,1.7vw,16px);
gap:clamp(12px,3vw,24px);font-size:clamp(13px,3.4vw,23px)!important;
}
.home-wrap .home-problem-list li > span{font-size:clamp(13px,3vw,22px)!important;flex:0 0 auto;width:auto}
.home-wrap .home-problem-box{
display:block;margin-top:clamp(34px,7vw,70px);
padding:clamp(20px,4.6vw,36px);min-height:0;border-radius:10px;
}
.home-wrap .home-problem-strong{font-size:clamp(17px,4.2vw,30px)!important}
.home-wrap .home-problem-conclusion{font-size:clamp(13px,3.2vw,20px)!important;margin-top:10px}
.home-wrap .home-problem-ctas{margin-top:clamp(18px,4vw,28px)}
.home-wrap .home-problem .home-btn-primary{width:100%;max-width:none}
}
/* ═══════════════════════════════════════════════════════════════════════
v31 (8/26) — 1024px 미만 히어로를 시안 구성으로 정리
32인치 대응을 검증하다 좁은 폭에서 히어로가 시안과 다르게 조판되는 걸 봤다.
v28/v30 이 @media(min-width:1024px) 안에만 있어서, 그 아래로 내려가면
통합본(폰 목업) 원본 순서·스타일이 그대로 드러났다.
· 순서가 뒤집힘 — 궤도 → |왝트 → 제목 → 배지 (시안은 배지 → 제목 → |왝트)
· 배지가 pill 이 아니라 평문
· 제목1 보다 제목2(|왝트)가 훨씬 큼 (시안은 둘이 같은 크기)
· 핑크 아웃라인 CTA 가 스타일 없이 맨텍스트
· 궤도 무대가 640px×zoom1.5 = 960px 라 화면 밖으로 잘림
시안은 PC 한 장뿐이므로, 구성·위계·색은 시안을 그대로 따르고
치수만 폭에 맞춰 1단으로 접는다.
═════════════════════════════════════════════════════════════════════ */
@media(max-width:1023px){
.home-wrap .home-hero{padding:44px 20px 40px}
/* 1단 세로 — 시안의 읽기 순서(좌 카피 → 우 궤도)를 위→아래로 */
.home-wrap .hero-lead{display:flex;flex-direction:column;align-items:stretch}
.home-wrap .hero-lead > .home-hero-stage{max-width:none!important;margin:0!important;zoom:1!important}
.home-wrap .hero-lead > .home-hero-stage:has(> .hook-wrap){order:1}
.home-wrap .hero-lead > .home-hero-stage:has(> .identity-stage){order:2}
.home-wrap .hero-lead > .dots{order:3} /* 마커는 섹터 맨 아래 (정우 지시) */
/* ── 카피: 시안 순서 배지 → 제목1 → 제목2 → 설명 → CTA ── */
.home-wrap .home-hero .hook-wrap{
display:flex;flex-direction:column;align-items:flex-start;padding:0;
}
.home-wrap .home-hero .hook-wrap .meta-line{
order:-1;margin:0;
height:clamp(28px, 7.4vw, 38px);
display:inline-flex;align-items:center;padding:0 clamp(14px, 4.4vw, 26px);
border:1px solid #CFFF04;border-radius:100px;background:transparent;
color:#CFFF04!important;font-size:clamp(11px, 3.2vw, 15px);
font-weight:700;letter-spacing:-.01em;opacity:1;
}
.home-wrap .home-hero .hook-wrap .meta-line .mdot{
margin:0 clamp(5px, 1.6vw, 8px);color:#CFFF04;opacity:1;
}
/* 제목 1·2 는 시안에서 같은 크기 — 통합본은 |왝트만 2배였다 */
.home-wrap .home-hero .hook-wrap .line{
order:0;margin:clamp(14px, 4.4vw, 26px) 0 0;max-width:none;
color:#fff!important;font-size:clamp(22px, 6.6vw, 40px)!important;font-weight:800;
line-height:1.16;letter-spacing:-.047em;white-space:normal;word-break:keep-all;
}
.home-wrap .home-hero .hook-wrap .brand-row{
order:1;margin:clamp(4px, 1.4vw, 8px) 0 0 2px;
gap:clamp(7px, 2.3vw, 13px);align-items:center;
}
.home-wrap .home-hero .hook-wrap .hook-accent{
width:clamp(4px, 1.1vw, 6px);height:clamp(22px, 5.3vw, 32px);
border-radius:0;background:#CFFF04;box-shadow:none;
}
.home-wrap .home-hero .hook-wrap .brand-word{
color:#CFFF04!important;font-size:clamp(22px, 6.6vw, 40px)!important;font-weight:800;
line-height:1.16;letter-spacing:-.047em;
}
.home-wrap .home-hero .hook-wrap .hero-lede{
order:2;margin:clamp(20px, 6.2vw, 38px) 0 0;
color:#A3A3A3;font-size:clamp(15px, 4vw, 20px);font-weight:500;
line-height:1.65;letter-spacing:-.047em;
}
/* CTA — 두 버튼 같은 크기로 나란히. 시안대로 라임 채움 / 핑크 아웃라인 */
.home-wrap .home-hero .hook-wrap .hero-cta{
order:3;margin:clamp(26px, 8vw, 48px) 0 0;gap:12px;
display:flex;flex-wrap:nowrap;width:100%;max-width:400px;
}
.home-wrap .hero-btn{
flex:1 1 0;min-width:0;width:auto;padding:0;
height:clamp(44px, 12vw, 54px);border-radius:8px;
font-size:clamp(13px, 3.7vw, 16px);font-weight:700;letter-spacing:-.02em;
white-space:nowrap;
}
.home-wrap .hero-btn-lime{background:#CFFF04;color:#101010;box-shadow:none}
.home-wrap .hero-btn-pink{
background:#000;color:#FB48C4;border:1px solid #FB48C4;box-shadow:none;
}
/* ── 궤도 무대: 화면 밖으로 나가지 않게 ── */
.home-wrap .home-hero .identity-stage{
width:min(100%, 520px);height:min(88vw, 460px);
margin:clamp(28px, 8vw, 56px) auto 0;
border-radius:0;overflow:visible;zoom:1;
background:radial-gradient(ellipse 50% 50% at 50% 48%,
rgba(255,255,255,.045) 0%, rgba(255,255,255,.034) 46%,
rgba(255,255,255,.014) 76%, rgba(255,255,255,0) 100%);
}
/* 음수에서 min() 은 절댓값이 큰 쪽을 고른다 — min(-35vw,-160px) 이
768px 에서 -268.8px 이 되어 궤도가 108px 왼쪽으로 밀렸다. calc 로 정확히 반. */
.home-wrap .home-hero .identity-stage .ring-wrap{
top:47%;width:min(70vw, 320px);height:min(70vw, 320px);
margin:calc(min(70vw, 320px) / -2) 0 0 calc(min(70vw, 320px) / -2);
}
.home-wrap .home-hero .identity-stage .ring-wrap i{width:10px;height:10px} /* [v65.8] */
.home-wrap .home-hero .identity-stage .ring-wrap i:nth-child(1){top:-5px;margin-left:-5px}
.home-wrap .home-hero .identity-stage .ring-wrap i:nth-child(2){right:-5px;margin-top:-5px}
.home-wrap .home-hero .identity-stage .ring-wrap i:nth-child(3){bottom:-5px}
.home-wrap .home-hero .identity-stage .word-orbit{width:min(70vw, 320px);height:min(70vw, 320px)}
.home-wrap .home-hero .identity-stage .pill .w{font-size:clamp(22px, 6.4vw, 32px)}
.home-wrap .home-hero .identity-stage .pill .k{font-size:clamp(11px, 2.9vw, 14px)}
.home-wrap .home-hero .identity-stage .plus{font-size:clamp(15px, 4.2vw, 21px)}
.home-wrap .home-hero .identity-stage .glow-orb.id{
width:min(52vw, 250px);height:min(52vw, 250px);top:-12%;left:-10%;
}
.home-wrap .home-hero .identity-stage .assemble-mark{font-size:clamp(34px, 11vw, 60px)}
.home-wrap .home-hero .identity-stage .tagline{font-size:clamp(19px, 5.4vw, 28px);padding:0 18px}
.home-wrap .home-hero .identity-stage .tag-pill{
font-size:clamp(12px, 3.4vw, 16px);padding:9px 18px;
}
.home-wrap .home-hero .identity-stage .tag-caption{font-size:clamp(11px, 3vw, 14px);margin-top:9px}
.home-wrap .home-hero .hero-lead .dots{display:none} /* 폴드 마지막 마커만 쓴다 */
/* 마커 */
.home-wrap .hero-lead > .dots{
margin:clamp(22px, 6vw, 36px) 0 0;gap:clamp(6px, 1.8vw, 10px);
}
.home-wrap .hero-lead > .dots span{
width:clamp(26px, 8vw, 44px);height:3px;border-radius:2px;
}
}
/* ── v32 (8/26) — 좁은 폭 정렬 ─────────────────────────────
1024 미만은 1단이라 궤도가 화면 가운데인데 카피만 왼쪽에 남아 어긋났다.
PC 정렬(좌측 218 정렬선)은 2단일 때만 성립한다 → 1단이면 전부 중앙.
480 미만에서는 CTA 를 두 줄로 떨군다(가로로 두 개면 글자가 눌린다). */
@media(max-width:1023px){
.home-wrap .home-hero .hook-wrap{align-items:center;text-align:center}
.home-wrap .home-hero .hook-wrap .line,
.home-wrap .home-hero .hook-wrap .hero-lede{text-align:center}
.home-wrap .home-hero .hook-wrap .brand-row{margin-left:0;justify-content:center}
.home-wrap .home-hero .hook-wrap .hero-cta{
justify-content:center;margin-left:auto;margin-right:auto;
}
}
/* 480 미만 CTA 2열 → v36 에서 1023 이하 전체를 풀폭 스택으로 통일했다 */
/* 좁은 폭에서 Consulting 무대가 340px 로 줄어 원형 CTA(80px)가 제목을 덮었다 */
@media(max-width:767px){
.home-wrap .model-stage .cta-fab{top:14px;right:14px;left:auto;width:54px;height:54px}
}
/* ── v34 (8/26) — 03 무대의 사각 경계 제거 ────────────────────
① 767 이하에서 무대가 히어로 좌우 패딩(20px) 안에 갇혀 세로 선 두 줄이 생겼다.
게다가 overflow:hidden 이라 안쪽 라임 워시가 박스에서 딱 잘려 사각 얼룩.
② 상단 라임 헤어라인(border-top 1px)이 가로 선으로 보였다.
③ 무대 배경(#101508~)과 위(히어로)·아래(티커) 배경색이 달라 경계가 났다.
→ 위아래를 각 인접 배경색으로 페이드시켜 이음새를 지운다. */
.home-wrap .model-stage{border-top:0!important}
.home-wrap .model-stage::after{
content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;pointer-events:none;
/* 4.png: 히어로(검정)와 Consulting 밴드는 선처럼 딱 나뉘어야 한다.
상단 페이드를 걷고 하단 이음새만 남긴다. */
background:linear-gradient(180deg,
rgba(10,10,10,0) 0%, rgba(10,10,10,0) 88%, #0a0a0a 100%);
}
/* ═══════════════════════════════════════════════════════════════════════
v36 (8/26) — 1023 이하 CTA 는 풀폭 스택
좁은 폭에서 PC 의 고정폭 버튼(188 / 280 / 336 …)이 그대로 남아 왼쪽에
애매하게 떠 있었다(정우 지적). 모바일에서 눌러야 할 것은 화면 폭을 채우는
게 맞다 — 이미 그렇게 되어 있던 08 BNR 섹션 패턴(풀폭 · h49 · pill · gap10)
으로 전 섹션 CTA 를 통일한다.
※ CONTACT 의 관심분야 칩(.home-contact-choice)은 선택지지 CTA 가 아니라 제외.
═════════════════════════════════════════════════════════════════════ */
@media(max-width:1023px){
/* ① 컨테이너 — 가로 나열을 세로 스택으로 */
.home-wrap .home-hero .hook-wrap .hero-cta,
.home-wrap .home-problem-ctas,
.home-wrap .home-schedule-ctas,
.home-wrap .home-bnr-ctas,
.home-wrap .home-services-cta{
display:flex!important;flex-direction:column;align-items:stretch;
flex-wrap:nowrap!important;gap:10px;width:100%;max-width:none!important;
}
/* ② 버튼 — 풀폭 · 같은 높이 · 가운데 정렬 */
.home-wrap .hero-btn,
.home-wrap .home-problem .home-btn-primary,
.home-wrap .home-download-badge,
.home-wrap .home-service-card-cta,
.home-wrap .home-up-more,
.home-wrap .home-services-cta .home-cta,
.home-wrap .home-schedule-ctas .home-btn-primary,
.home-wrap .home-schedule-ctas .home-btn-ghost,
.home-wrap .home-bnr-ctas .home-btn-primary,
.home-wrap .home-bnr-ctas .home-btn-ghost,
.home-wrap .home-form .home-btn-primary{
display:flex!important;align-items:center;justify-content:center;
flex:0 0 auto;width:100%!important;max-width:none!important;
min-height:clamp(46px,12vw,54px);height:auto;padding:12px 18px;
font-size:clamp(14px,3.6vw,16px)!important;line-height:1.3;
text-align:center;box-sizing:border-box;
}
/* 03 박스 버튼은 박스 안쪽 폭을 꽉 채운다 */
.home-wrap .home-problem-box .home-problem-ctas{margin-top:clamp(18px,4vw,28px)}
}
/* 03 밴드는 히어로 섹션 안에 들어 있어서, 좁은 폭에서 히어로 슬라이드 마커
바로 밑에 붙어 버렸다(간격 0). 다른 섹션이니 사이를 띄운다. */
@media(max-width:1023px){
.home-wrap .model-stage{margin-top:clamp(52px, 11vw, 104px)}
}
@media(max-width:767px){
/* 히어로 좌우 패딩 상쇄 — 768 이상에는 이미 있던 규칙 */
.home-wrap .model-stage{margin-left:-20px;margin-right:-20px}
/* 시안(3.jpg)·768 이상과 같이 중앙 조판 — 여기만 왼쪽으로 남아 있었다 */
.home-wrap .model-stage .mframe{
align-items:center;justify-content:center;text-align:center;padding:0 20px;
}
.home-wrap .model-stage .m-desc{margin-left:auto;margin-right:auto}
.home-wrap .model-stage .m-chips{justify-content:center}
}
@media(min-width:1024px){
/* 이 구간 히어로 배경은 #000 */
.home-wrap .model-stage::after{
background:linear-gradient(180deg,
rgba(0,0,0,0) 0%, rgba(10,10,10,0) 88%, #0a0a0a 100%);
}
}
/* ── v33 (8/26) — 03 Consulting 밴드 세로 위치 (시안 3.jpg) ──
시안 1900×776 실측: 콘텐츠 y293~630 → 위 293 / 아래 145.
현재는 .mframe 이 padding 96/96 대칭 flex-center 라 정확히 한가운데(218/217)
에 놓여 아래가 비어 보였다. 무대 높이 780 은 그대로 두고 조판만 내린다.
(243 + (780-96)) / 2 = 463.5 = 시안 콘텐츠 중심 ✓ */
@media(min-width:768px){
.home-wrap .model-stage .mframe{padding-top:243px;padding-bottom:96px}
/* 원형 CTA 도 시안 위치로 (시안 y138, 폭 91) — top:72 라 nav 에 걸렸다 */
.home-wrap .model-stage .cta-fab{top:139px}
}
/* ═══════════════════════════════════════════════════════════════════════
v39 (8/26) — 섹션 라벨(eyebrow) 크기 통일
폭을 줄이면 섹터마다 라벨이 따로 놀았다(768px 기준 02·04 18px / 03 11.6px
/ 01·05 13px — 최대 1.55배). 시안값(1920 = 22.5)을 상한으로 두고
1450 아래로는 17px 로 고정해 전 섹터가 같은 크기를 갖게 한다.
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-eyebrow{
/* wact_03.png 축소 반영: 22.5 → 17.9 (0.794배), 모바일 하한도 14 로 */
font-size:clamp(14px, .93vw, 17.9px)!important;
line-height:1.2!important;
}
/* ═══ v49 — 07 BNR LECTURE 시안 재편 (8/28 · main_01_07.jpg 실측) ═══════
배경 #FF2E9B · 라벨 라임 · 제목/리드 흰 가운데
좌 x390 : 대형 타이포(추출 bnr-title.png 513x91, 잉크 505x83 y607)
strong(743) · pill(835 h28) · CTA 필 2개(961/1059, 285x70)
우 벤 : 세 원 전부 r202 — Body c(1245,745) Needs c(1254,1016) Rel c(1469,1034)
라벨 Body(1211,529) Needs(997,912) Rel(1390,888) BNR(1250,883 라임)
링 = 흰 3px + 바깥 웜(크림→살구) 글로우, 박스 테두리 없음
═════════════════════════════════════════════════════════════════════ */
.home-wrap .home-bnr{
--u: clamp(.52px, .052083vw, 1px);
--side: max(0px, calc((100vw - 1920 * var(--u)) / 2));
display:block!important;background:#FF2E9B!important;
width:auto;max-width:none;
padding:calc(194 * var(--u)) 0 calc(150 * var(--u))!important;
text-align:center;overflow:hidden;
}
.home-wrap .home-bnr .home-eyebrow{
display:block;width:auto;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#CFFF04!important;font-weight:800;letter-spacing:.02em;
line-height:1.2!important;text-align:center!important;opacity:1!important;
}
.home-wrap .home-bnr .home-title{
margin:calc(3 * var(--u)) 0 0;color:#fff!important;
font-size:calc(49.5 * var(--u))!important;font-weight:800;
line-height:1.3!important;letter-spacing:-.03em;text-align:center;
}
.home-wrap .home-bnr .bnr-lead{
margin:calc(30 * var(--u)) auto 0;max-width:none!important;width:auto!important;
color:#fff!important;
font-size:calc(22.6 * var(--u))!important;font-weight:500;
line-height:calc(36 * var(--u))!important;letter-spacing:-.01em;text-align:center;
}
.home-wrap .home-bnr .bnr-stage{
position:relative;text-align:left;
width:calc(1281 * var(--u));
margin:calc(143 * var(--u)) 0 0 calc(390 * var(--u) + var(--side));
min-height:calc(700 * var(--u));
}
/* ── 좌측 칼럼 ── */
/* ★ margin-top 은 stage 마진과 컬랩스돼 사라진다(word 가 60 위로 붙던 원인) → 패딩으로 */
.home-wrap .bnr-left{position:relative;z-index:2;width:calc(520 * var(--u));padding-top:calc(53 * var(--u))}
.home-wrap .bnr-word{
display:block;width:calc(513 * var(--u));height:calc(91 * var(--u));
margin:0 0 0 calc(-2 * var(--u));
background:url(../img/bnr-title.png) no-repeat left top/100% 100%;
}
.home-wrap .bnr-word > span{
position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}
.home-wrap .home-bnr .home-bnr-strong{
margin:calc(43 * var(--u)) 0 0;padding:0;background:none;border-radius:0;
color:#fff!important;font-size:calc(22.6 * var(--u))!important;font-weight:700;
line-height:calc(35 * var(--u))!important;letter-spacing:-.01em;
}
.home-wrap .bnr-pills{display:flex;gap:calc(16 * var(--u));margin:calc(30 * var(--u)) 0 0}
.home-wrap .bnr-pills span{
display:inline-flex;align-items:center;height:calc(28 * var(--u));
padding:0 calc(14 * var(--u));
border:1px solid rgba(255,255,255,.9);border-radius:100px;
color:#fff!important;font-size:calc(11.5 * var(--u))!important;font-weight:700;
letter-spacing:.06em;line-height:1!important;
}
.home-wrap .home-bnr .home-bnr-ctas{
display:flex;flex-direction:column;align-items:flex-start;
gap:calc(28 * var(--u));
margin:calc(85 * var(--u)) 0 0;
}
.home-wrap .home-bnr .home-bnr-ctas .home-btn-primary,
.home-wrap .home-bnr .home-bnr-ctas .home-btn-ghost{
display:flex;align-items:center;justify-content:space-between;
width:calc(285 * var(--u))!important;height:calc(70 * var(--u));
margin:0!important;
padding:0 calc(31 * var(--u)) 0 calc(33 * var(--u));box-sizing:border-box;
border-radius:100px;
font-size:calc(21 * var(--u))!important;font-weight:800;letter-spacing:-.01em;
line-height:1!important;text-decoration:none;cursor:pointer;
}
.home-wrap .home-bnr .home-bnr-ctas .home-btn-primary{
background:#fff!important;border:0;color:#FF2E9B!important; /* [v65.7] 클라: 흰 필 + 핑크 글자(텍스트는 기존 유지) */
justify-content:center;gap:calc(12 * var(--u)); /* [v65.7] 클라 시안: 중앙 정렬 */
}
.home-wrap .home-bnr .home-bnr-ctas .home-btn-ghost{
background:transparent!important;border:calc(1.5 * var(--u)) solid rgba(255,255,255,.95);
color:#fff!important;
}
.home-wrap .home-bnr .home-bnr-ctas .ar{
font-style:normal;font-size:calc(20 * var(--u));font-weight:700;
}
@media(hover:hover){
.home-wrap .home-bnr .home-bnr-ctas .home-btn-primary:hover{background:#FFE7F3!important} /* [v65.7] */
.home-wrap .home-bnr .home-bnr-ctas .home-btn-ghost:hover{background:rgba(255,255,255,.12)!important}
}
/* ── 우측 벤 ── */
.home-wrap .home-bnr .home-bnr-diagram-box{
position:absolute;top:0;right:0;
width:calc(628 * var(--u));height:calc(693 * var(--u));
margin:0!important;border:0!important;border-radius:0!important;
aspect-ratio:auto!important;overflow:visible!important;background:none!important;
}
.home-wrap .home-bnr .home-venn{
position:absolute;inset:0;left:0;top:0;transform:none;
width:100%;height:100%;aspect-ratio:auto;
}
.home-wrap .home-venn .circle{
position:absolute;width:calc(404 * var(--u));height:calc(404 * var(--u));
border-radius:50%;
border:calc(3 * var(--u)) solid transparent;
}
.home-wrap .home-venn .circle.top{left:0;top:0}
/* 시안 실측 : 링이 하단·우하로 갈수록 배경 핑크에 잠겨 사라진다.
circle 에 mask 를 걸면 box-shadow 영역에서 마스크가 반복돼 잔상이 남는다
→ 시안 제작 방식 그대로, 배경색 그라데이션 오버레이 두 장으로 덮는다 */
.home-wrap .home-venn::after{
content:"";position:absolute;z-index:1;pointer-events:none;
left:calc(-90 * var(--u));right:calc(-90 * var(--u));
top:calc(500 * var(--u));bottom:calc(-90 * var(--u));
background:linear-gradient(180deg, rgba(255,46,155,0) 0%, #FF2E9B 80%);
}
.home-wrap .home-venn .circle.left{left:calc(9 * var(--u));top:calc(271 * var(--u))}
.home-wrap .home-venn .circle.right{left:calc(224 * var(--u));top:calc(289 * var(--u))}
.home-wrap .home-venn .label{
position:absolute;z-index:2;color:#fff;
font-size:calc(21 * var(--u))!important;font-weight:700;letter-spacing:-.005em;
transform:none;line-height:1!important;
}
.home-wrap .home-venn .label.body{left:calc(168 * var(--u));top:calc(-15 * var(--u));right:auto}
.home-wrap .home-venn .label.needs{left:calc(-46 * var(--u));top:calc(367 * var(--u));right:auto}
.home-wrap .home-venn .label.relationship{left:calc(347 * var(--u));top:calc(344 * var(--u));right:auto}
.home-wrap .home-venn .label.bnr{
left:calc(207 * var(--u));top:calc(340 * var(--u));right:auto;
transform:translate(-50%,-50%);
color:#CFFF04;font-size:calc(16.5 * var(--u))!important;font-weight:900;letter-spacing:.03em;
}
/* ── 1023 이하 : 세로 스택 — 벤은 전용 --u 로 통째 축소 ── */
@media(max-width:1023px){
.home-wrap .home-bnr{padding:clamp(48px,8vw,96px) clamp(24px,6.5vw,44px)!important}
.home-wrap .home-bnr .home-title{font-size:clamp(21px,4.7vw,36px)!important}
.home-wrap .home-bnr .bnr-lead{font-size:clamp(14px,3.6vw,17px)!important;line-height:1.65!important}
.home-wrap .home-bnr .bnr-stage{
width:auto;min-height:0;margin:clamp(26px,6vw,44px) 0 0;
display:flex;flex-direction:column;align-items:center;
}
.home-wrap .home-bnr .home-bnr-diagram-box{
--u: min(calc(88vw / 628), .82px);
position:relative;order:-1;right:auto;
margin:0 auto clamp(30px,7vw,52px)!important;
}
.home-wrap .bnr-left{width:100%;max-width:520px;padding-top:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.home-wrap .bnr-word{
width:min(100%,505px);height:auto;aspect-ratio:513/91;
margin:0;
}
.home-wrap .home-bnr .home-bnr-strong{
margin-top:clamp(20px,4.6vw,32px);
font-size:clamp(16px,4.2vw,20px)!important;line-height:1.55!important;
}
.home-wrap .bnr-pills{margin-top:clamp(16px,3.6vw,24px);flex-wrap:wrap;justify-content:center;gap:10px}
.home-wrap .bnr-pills span{height:28px;padding:0 14px;font-size:11px!important}
.home-wrap .home-bnr .home-bnr-ctas{width:100%;margin-top:clamp(24px,5.4vw,40px);gap:10px}
.home-wrap .home-bnr .home-bnr-ctas .home-btn-primary,
.home-wrap .home-bnr .home-bnr-ctas .home-btn-ghost{
width:100%!important;height:auto;border-radius:100px!important;
}
}
/* ═══ v50.4 — 07 BNR 벤 = siri-orb 코드 그대로, 색도 코드의 것만 (8/28 정우) ═══
원1(Body)=컴포넌트 디폴트 팔레트 · 원2(Needs)=데모 커스텀 팔레트 ·
원3(Relationship)=주어진 색들의 제3 조합. 임의 색·임의 틴트 금지.
원은 투명(모든 conic 이 transparent 로 빠짐) — 배치·큰 라벨·중앙 BNR 은 참고 벤대로.
★--angle(@property) 리페인트 금지 — transform 회전 3레이어(GPU 안전).
컴포넌트 공식값(404u): blur 6u · contrast 3.2 · dot 3.2u · shadow 3.2u · mask 25%. */
@keyframes orbSpin{ to{ transform:rotate(360deg) } }
.home-wrap .home-venn .circle{
border:0; overflow:hidden;
background:none; box-shadow:none; filter:none; animation:none;
--obg:#FF2E9B;
-webkit-mask:radial-gradient(farthest-side, #000 94%, transparent 100%);
mask:radial-gradient(farthest-side, #000 94%, transparent 100%);
}
/* 정삼각 벤 배치 (v49 실측 배치를 덮는다) */
.home-wrap .home-venn .circle.top{left:calc(112 * var(--u));top:calc(16 * var(--u))}
.home-wrap .home-venn .circle.left{left:calc(-32 * var(--u));top:calc(265 * var(--u))}
.home-wrap .home-venn .circle.right{left:calc(256 * var(--u));top:calc(265 * var(--u))}
/* 팔레트 — 전부 siri-orb 코드에 있는 값 */
.home-wrap .home-venn .circle.top{
--oc1:oklch(75% .15 350); --oc2:oklch(80% .12 200); --oc3:oklch(78% .14 280);
}
.home-wrap .home-venn .circle.left{
--oc1:oklch(70% .2 120); --oc2:oklch(75% .18 60); --oc3:oklch(80% .15 300);
}
.home-wrap .home-venn .circle.right{
--oc1:oklch(80% .12 200); --oc2:oklch(75% .18 60); --oc3:oklch(75% .15 350);
}
/* 회전 베일 — 컴포넌트의 ::before 6개 conic 을 3레이어에 그대로 분배,
blur+contrast 는 i 에 한 번(컴포넌트의 filter 자리) */
.home-wrap .home-venn .circle i{
display:block; position:absolute; inset:calc(-3 * var(--u));
border-radius:50%; will-change:transform;
filter:blur(calc(6 * var(--u))) contrast(3.2);
opacity:.7;
background:conic-gradient(from 0deg at 20% 80%,
var(--oc1), transparent 10% 90%, var(--oc1));
animation:orbSpin 26s linear infinite;
}
.home-wrap .home-venn .circle i::before,
.home-wrap .home-venn .circle i::after{
content:""; position:absolute; inset:0; border-radius:50%; will-change:transform;
}
.home-wrap .home-venn .circle i::before{
background:
conic-gradient(from 40deg at 25% 70%,
var(--oc3), transparent 20% 80%, var(--oc3)),
conic-gradient(from 210deg at 45% 75%,
var(--oc2), transparent 30% 60%, var(--oc2)),
conic-gradient(from 120deg at 15% 5%,
var(--oc2), transparent 10% 90%, var(--oc2));
animation:orbSpin 12s linear infinite;
}
.home-wrap .home-venn .circle i::after{
background:
conic-gradient(from 300deg at 80% 20%,
var(--oc1), transparent 40% 60%, var(--oc1)),
conic-gradient(from 90deg at 85% 10%,
var(--oc3), transparent 20% 80%, var(--oc3));
animation:orbSpin 9s linear infinite reverse;
}
.home-wrap .home-venn .circle.left i{animation-duration:31s;animation-delay:-9s}
.home-wrap .home-venn .circle.left i::before{animation-duration:14s;animation-delay:-5s}
.home-wrap .home-venn .circle.left i::after{animation-duration:11s;animation-delay:-3s}
.home-wrap .home-venn .circle.right i{animation-duration:22s;animation-delay:-15s}
.home-wrap .home-venn .circle.right i::before{animation-duration:10s;animation-delay:-7s}
.home-wrap .home-venn .circle.right i::after{animation-duration:8s;animation-delay:-5s}
/* 컴포넌트의 inset --bg 섀도 (v49 아크 자리) */
.home-wrap .home-venn .circle::before{
content:""; position:absolute; inset:0; z-index:3; border-radius:50%;
border:0; background:none; opacity:1; filter:none; animation:none;
box-shadow:none;
}
/* 컴포넌트의 --bg 도트 오버레이 + 중심 마스크 25%→75% (v49 conic 링 자리) */
.home-wrap .home-venn .circle::after{
content:""; position:absolute; inset:0; z-index:2; border-radius:50%;
border:0; opacity:1; filter:none; animation:none;
background:radial-gradient(circle at center,
var(--obg) calc(3.2 * var(--u)), transparent calc(3.2 * var(--u)));
background-size:calc(6.4 * var(--u)) calc(6.4 * var(--u));
mix-blend-mode:overlay;
-webkit-mask:radial-gradient(#000 25%, transparent 75%);
mask:radial-gradient(#000 25%, transparent 75%);
}
/* 시안의 핑크 침강 오버레이 — 벤 참고안과 상충, 끈다 */
.home-wrap .home-venn::after{display:none}
/* 라벨 — 각 원 안에, 더 크게 */
.home-wrap .home-venn .label{
color:#fff;text-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(40,10,50,.55), 0 calc(4 * var(--u)) calc(22 * var(--u)) rgba(40,10,50,.45);
font-size:calc(30 * var(--u))!important;font-weight:800;
letter-spacing:-.01em;transform:translate(-50%,-50%);
animation:lblBreath 6.5s ease-in-out infinite;
}
.home-wrap .home-venn .label.body{left:calc(314 * var(--u));top:calc(190 * var(--u));right:auto}
.home-wrap .home-venn .label.needs{left:calc(128 * var(--u));top:calc(467 * var(--u));right:auto}
.home-wrap .home-venn .label.relationship{left:calc(500 * var(--u));top:calc(467 * var(--u));right:auto}
.home-wrap .home-venn .label.bnr{
left:calc(314 * var(--u));top:calc(385 * var(--u));right:auto;
color:#CFFF04;font-size:calc(38 * var(--u))!important;font-weight:900;letter-spacing:.02em;
text-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(40,0,45,.6), 0 0 calc(24 * var(--u)) rgba(40,0,45,.55);animation:none;
}
.home-wrap .home-venn .label.needs{animation-delay:-2.2s}
.home-wrap .home-venn .label.relationship{animation-delay:-4.3s}
@keyframes lblBreath{ 0%,100%{opacity:.22} 50%{opacity:1} }
@media(prefers-reduced-motion:reduce){
.home-wrap .home-venn .circle i,
.home-wrap .home-venn .circle i::before,
.home-wrap .home-venn .circle i::after{animation:none!important}
.home-wrap .home-venn .label{animation:none!important;opacity:1!important}
}
/* ═══ v51 — 08 LECTURE SCHEDULE 시안 재편 (8/28 · main_01_08.jpg 실측) ═══════
배경 = 다크와인 + 우상단 보라·마젠타 글로우(그리드 실측 재구성)
카드 564x339 r16 · 보더 rgba(255,222,235,.5) · 배지 검정필+핑크글자 ·
화살표 원 42 핑크+다크 글리프 · 제목 23.5/35 2줄 클램프 · 디바이더 y225 · 메타 15.5
마퀴: 2세트 복제 translateX(-50%) 46s · hover 정지 · hover 카드 연핑크 보더 ·
양끝 페이드 mask 6% · CTA 411x69 핑크/고스트 · 모바일(1023↓) 카드 84vw + CTA 풀폭 스택 */
.home-wrap .home-schedule{
--u: clamp(.52px, .052083vw, 1px);
display:block!important;width:auto;max-width:none;color:#fff;
padding:calc(271 * var(--u)) 0 calc(283 * var(--u))!important;
text-align:center;overflow:hidden;
background:
radial-gradient(ellipse 46% 26% at 74% 0%, rgba(213,95,205,.5), transparent 72%),
radial-gradient(ellipse 72% 52% at 74% 16%, rgba(255,22,108,.42), transparent 76%),
radial-gradient(ellipse 85% 55% at 58% 52%, rgba(206,44,96,.28), transparent 78%),
linear-gradient(90deg, rgba(8,0,4,.5) 0%, rgba(8,0,4,0) 34%, rgba(8,0,4,0) 84%, rgba(8,0,4,.3) 100%),
linear-gradient(180deg, #55102F 0%, #560122 30%, #47011C 52%, #260110 82%, #140006 100%)!important;
}
.home-wrap .home-schedule .home-eyebrow{
display:block;width:auto;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#CFFF04!important;font-weight:800;letter-spacing:.02em;
line-height:1.2!important;text-align:center!important;opacity:1!important;
}
.home-wrap .home-schedule .home-title{
margin:calc(3 * var(--u)) 0 0;color:#fff!important;
font-size:calc(49.5 * var(--u))!important;font-weight:800;
line-height:1.3!important;letter-spacing:-.03em;text-align:center;
}
.home-wrap .home-schedule .sch-lead{
margin:calc(30 * var(--u)) auto 0;max-width:none!important;width:auto!important;
color:rgba(255,222,234,.78)!important;
font-size:calc(22.6 * var(--u))!important;font-weight:500;
line-height:calc(36 * var(--u))!important;letter-spacing:-.01em;text-align:center;
}
/* ── 마퀴 ── */
.home-wrap .sch-mq{
margin:calc(133 * var(--u)) 0 0;overflow:hidden;
-webkit-mask:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.home-wrap .sch-mq-track{
display:flex;width:max-content;
animation:schFlow 46s linear infinite;will-change:transform;
}
.home-wrap .sch-mq:hover .sch-mq-track{animation-play-state:paused}
.home-wrap .sch-mq-set{display:flex;gap:calc(38 * var(--u));padding-right:calc(38 * var(--u))}
@keyframes schFlow{ to{ transform:translateX(-50%) } }
/* ── 카드 ── */
.home-wrap .sch-card{
position:relative;display:block;flex:none;box-sizing:border-box;
width:calc(564 * var(--u));height:calc(339 * var(--u));
padding:calc(129 * var(--u)) calc(56 * var(--u)) 0;
border:calc(1.5 * var(--u)) solid rgba(255,222,235,.5);
border-radius:calc(16 * var(--u));
background:linear-gradient(180deg, rgba(255,225,238,.10), rgba(255,225,238,.06));
text-align:left;text-decoration:none;cursor:pointer;
transition:border-color .25s, background-color .25s;
}
.home-wrap .sch-card:hover{border-color:#FFAAD4;background:linear-gradient(180deg, rgba(255,225,238,.13), rgba(255,225,238,.08))}
.home-wrap .sch-badge{
position:absolute;left:calc(56 * var(--u));top:calc(50 * var(--u));
display:inline-flex;align-items:center;height:calc(26 * var(--u));padding:0 calc(14 * var(--u));
border-radius:100px;background:#000;
color:#FF2E9A;font-size:calc(12.5 * var(--u));font-weight:800;letter-spacing:.08em;line-height:1;
}
.home-wrap .sch-go{
position:absolute;right:calc(23 * var(--u));top:calc(21 * var(--u));
display:flex;align-items:center;justify-content:center;
width:calc(42 * var(--u));height:calc(42 * var(--u));border-radius:50%;
box-sizing:border-box;padding-top:calc(3.2 * var(--u)); /* canvas TextMetrics 실측: 97 잉크가 라인박스 위로 몰림 → 잉크중심=원중심 보정 */
background:#FF2E9A;color:#40011A;font-size:calc(19 * var(--u));font-weight:700;line-height:1;
font-style:normal;transition:transform .25s;
}
.home-wrap .sch-card:hover .sch-go{transform:scale(1.1)}
.home-wrap .sch-t{
margin:0;min-height:calc(70 * var(--u));
color:#fff;font-size:calc(23.5 * var(--u));font-weight:700;
line-height:calc(35 * var(--u));letter-spacing:-.015em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.home-wrap .sch-div{display:block;height:1px;margin-top:calc(26 * var(--u));background:rgba(255,255,255,.18)}
.home-wrap .sch-m{
margin:calc(24 * var(--u)) 0 0;
color:rgba(255,219,232,.66);font-size:calc(15.5 * var(--u));font-weight:500;
line-height:1.4;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ── CTA ── */
.home-wrap .home-schedule-ctas{
display:flex;flex-direction:row;justify-content:center;align-items:center;
gap:calc(52 * var(--u));margin:calc(91 * var(--u)) auto 0;padding:0;
}
.home-wrap .home-schedule-ctas .home-btn-primary,
.home-wrap .home-schedule-ctas .home-btn-ghost{
display:inline-flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));
width:calc(411 * var(--u))!important;height:calc(69 * var(--u));
margin:0!important;border-radius:100px;box-sizing:border-box;
font-size:calc(21 * var(--u))!important;font-weight:800;letter-spacing:-.01em;
line-height:1!important;text-decoration:none;
}
.home-wrap .home-schedule-ctas .home-btn-primary{background:#FF2E9A!important;border:0;color:#fff!important}
.home-wrap .home-schedule-ctas .home-btn-ghost{background:transparent!important;border:calc(1.5 * var(--u)) solid rgba(255,255,255,.92);color:#fff!important}
.home-wrap .home-schedule-ctas .ar{font-style:normal;font-weight:700}
@media(hover:hover){
.home-wrap .home-schedule-ctas .home-btn-primary:hover{background:#E62287!important}
.home-wrap .home-schedule-ctas .home-btn-ghost:hover{background:rgba(255,255,255,.1)!important}
}
@media(prefers-reduced-motion:reduce){
.home-wrap .sch-mq-track{animation:none!important}
}
/* ── 1023 이하 ── */
@media(max-width:1023px){
.home-wrap .home-schedule{padding:clamp(48px,8vw,96px) 0!important}
.home-wrap .home-schedule .home-title{font-size:clamp(21px,4.7vw,36px)!important}
.home-wrap .home-schedule .sch-lead{
font-size:clamp(14px,3.6vw,17px)!important;line-height:1.65!important;
padding:0 clamp(24px,6.5vw,44px);
}
.home-wrap .sch-mq{--u:min(calc(84vw / 564), .82px);margin-top:clamp(26px,6vw,44px)}
.home-wrap .home-schedule-ctas{
flex-direction:column;gap:10px;
width:auto!important;/* 구 모바일 공통블록의 width:100% + 좌우마진 = 우측 넘침 방지 */
margin:clamp(28px,6.5vw,48px) clamp(24px,6.5vw,44px) 0;
}
.home-wrap .home-schedule-ctas .home-btn-primary,
.home-wrap .home-schedule-ctas .home-btn-ghost{width:100%!important;height:52px}
}
/* ═══ v52 — 모바일 섹터 간 호흡 (8/28 정우: 촘촘해서 복잡해 보임) ═══════════
1023 이하에서 홈 주요 섹션의 상하 패딩만 일괄 확대(좌우는 각 섹션 값 유지).
히어로·피플밴드·푸터는 제외. 각 섹션의 자체 모바일 !important 패딩(숏핸드)을
longhand + !important(더 뒤 위치)로 덮는다. */
@media(max-width:1023px){
.home-wrap .home-about, .home-wrap .home-two, .home-wrap .home-problem,
.home-wrap .home-why, .home-wrap .home-services, .home-wrap .curr,
.home-wrap .mods, .home-wrap .ggg-cards, .home-wrap .home-case-study,
.home-wrap .home-bnr, .home-wrap .home-schedule, .home-wrap .home-contact{
padding-top:clamp(84px,18vw,136px)!important;
padding-bottom:clamp(84px,18vw,136px)!important;
}
/* 04 는 마지막이 풀블리드 검정 다운로드 밴드 — 하단 패딩을 주면 밝은 배경 띠가
밴드 아래로 노출된다(정우 8/28). 밴드가 섹션 끝에 딱 붙게 하단만 되돌림.
04↔05 호흡은 05 의 상단 84px(어두운 배경)가 담당. */
.home-wrap .home-why{padding-bottom:0!important}
}
/* ═══ v52.1 — 06 CASE STUDY 모바일 아이브로·제목 표준화 (8/28 정우) ═══════
06 만 1023 이하 오버라이드가 없어 --u 축소가 그대로 적용됐었다
(아이브로 9.36px vs 표준 14px · 제목 12px vs 표준 21px · 간격 12px vs ~2px). */
@media(max-width:1023px){
.home-wrap .home-case-study .home-eyebrow{
font-size:clamp(14px,.93vw,17.9px)!important;line-height:1.2!important;
}
}
/* ═══ v54 — 09 CONTACT US 시안 재편 (8/28 · main_01_09.png 실측) · [v56] 재실측 반영 ═══
상단 악수 사진 = 시안 추출(contact-photo.jpg, 글자영역 패치) + 하단 마스크 페이드
좌 카드 613x793 r10 보더 #2A2A2A · 우 폼 386(언더라인 인풋·칩 7)
Boost 밴드 1586 r16 좌우 라임글로우 · 푸터 4열(167/762/1173/1521) */
.home-wrap .home-contact{
--u: clamp(.52px, .052083vw, 1px);
position:relative;display:block!important;width:auto;max-width:none;
background:#000!important;color:#fff;
padding:calc(288 * var(--u)) 0 calc(150 * var(--u))!important;
text-align:center;overflow:hidden;
}
.home-wrap .ct-photo{
position:absolute;left:0;top:0;width:100%;height:calc(1160 * var(--u));
background:url(../img/contact-photo.jpg?v=6) no-repeat center top/100% auto;
pointer-events:none;
}
.home-wrap .home-contact > *:not(.ct-photo){position:relative}
.home-wrap .home-contact .home-eyebrow{
display:block;width:auto;margin:0;padding:0;
background:none!important;border:0;border-radius:0;box-shadow:none!important;
color:#CFFF04!important;font-weight:800;letter-spacing:.02em;
line-height:1.2!important;text-align:center!important;opacity:1!important;
}
.home-wrap .home-contact .home-title{
margin:calc(3 * var(--u)) 0 0;color:#fff!important;
font-size:calc(49.5 * var(--u))!important;font-weight:800;
line-height:1.3!important;letter-spacing:-.03em;text-align:center;
}
.home-wrap .home-contact .ct-lead{
margin:calc(30 * var(--u)) auto 0;max-width:none!important;width:auto!important;
color:rgba(255,255,255,.62)!important;
font-size:calc(22.6 * var(--u))!important;font-weight:500;
line-height:1.6!important;letter-spacing:-.01em;text-align:center;
}
/* ── 좌 카드 + 우 폼 ── */
.home-wrap .ct-grid{
display:flex;justify-content:center;align-items:stretch;text-align:left;
gap:calc(75 * var(--u));margin:calc(105 * var(--u)) auto 0;
}
.home-wrap .ct-card{
width:calc(607 * var(--u));min-height:calc(795 * var(--u));box-sizing:border-box;
border:1px solid rgba(207,255,4,.54);border-radius:calc(10 * var(--u));
background:transparent; /* [v56] 시안: 카드 안까지 사진이 그대로 비친다 */
padding:calc(83 * var(--u)) calc(60 * var(--u)) calc(72 * var(--u)) calc(60 * var(--u));
display:flex;flex-direction:column;
}
.home-wrap .ct-name{color:#fff;font-size:calc(51.5 * var(--u));line-height:1.3;font-weight:800;letter-spacing:-.02em}
.home-wrap .ct-sub{margin-top:calc(5 * var(--u));color:rgba(255,255,255,.66);font-size:calc(36 * var(--u));line-height:1.35;font-weight:500}
.home-wrap .ct-lines{list-style:none;margin:calc(46 * var(--u)) 0 0;padding:0} /* v63: 이메일만, 부제 아래로(클라) */
.home-wrap .ct-lines li{
display:flex;align-items:center;gap:calc(21 * var(--u));
color:#fff;font-size:max(calc(22 * var(--u)), 13px);font-weight:700;line-height:1.3; /* v63: 이메일이 잘 보이도록(클라) */
}
.home-wrap .ct-lines li + li{margin-top:calc(13 * var(--u))}
.home-wrap .ct-lines a{color:inherit;text-decoration:none}
.home-wrap .ct-lines i{flex:none;width:calc(44 * var(--u));height:calc(44 * var(--u));background-size:100% 100%;background-repeat:no-repeat}
.home-wrap .home-contact .home-form{
display:block;width:calc(386 * var(--u));margin:0;padding:0;background:none;border:0;
}
.home-wrap .home-contact .home-contact-label{
display:block;color:#fff;font-size:max(calc(22.5 * var(--u)), 14px);font-weight:700;margin:0;
}
.home-wrap .home-contact .home-contact-choices{
display:flex;flex-wrap:wrap;gap:calc(13 * var(--u)) calc(12 * var(--u));
margin:calc(13 * var(--u)) 0 0;
}
.home-wrap .home-contact .home-contact-choice{
height:max(calc(42 * var(--u)), 32px);min-height:0!important;width:auto!important;flex:0 0 auto;
padding:0 calc(16 * var(--u))!important;box-sizing:border-box;
display:inline-flex;align-items:center;
background:none;border:1px solid #fff;border-radius:calc(12 * var(--u))!important;
color:#fff;font-size:max(calc(18.5 * var(--u)), 12px)!important;font-weight:600;cursor:pointer;
transition:background .15s,color .15s,border-color .15s;
}
.home-wrap .home-contact .home-contact-choice[aria-pressed="true"]{
background:#CFFF04;border-color:#CFFF04;color:#101010;font-weight:700;
}
.home-wrap .ct-f{margin-top:calc(16 * var(--u))}
.home-wrap .ct-f-first{margin-top:calc(40 * var(--u))}
/* v63: 입력해도 사라지지 않는 상시 라벨(클라 — "내용 입력 시 현재 텍스트 유지") */
.home-wrap .ct-fl{
display:block;color:#fff;font-size:max(calc(15 * var(--u)), 11px);font-weight:700;
margin:0 0 calc(6 * var(--u));letter-spacing:-.01em;
}
.home-wrap .ct-flabel{display:block;color:#fff;font-size:max(calc(22.5 * var(--u)), 14px);font-weight:700;margin:0}
.home-wrap .ct-f input[type="text"],
.home-wrap .ct-f input[type="tel"],
.home-wrap .ct-f input[type="email"]{
width:100%;box-sizing:border-box;height:calc(40 * var(--u));
background:none;border:0;border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;
color:#fff;font-size:max(calc(22.5 * var(--u)), 14px)!important;font-weight:600;
padding:0 0 calc(7 * var(--u));
}
.home-wrap .ct-f input::placeholder,.home-wrap .ct-f textarea::placeholder{color:#fff;opacity:1;font-weight:700}
.home-wrap .ct-f textarea{
width:100%;box-sizing:border-box;height:calc(143 * var(--u));resize:vertical;
background:none;border:0;border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;
color:#fff;font-size:max(calc(22.5 * var(--u)), 14px)!important;font-weight:600;
padding:calc(4 * var(--u)) 0 calc(6 * var(--u));
}
.home-wrap .ct-f input:focus,.home-wrap .ct-f textarea:focus{outline:none;border-bottom-color:#CFFF04}
.home-wrap .ct-file{margin-top:calc(14 * var(--u))}
.home-wrap .ct-filerow{display:flex;align-items:center;margin-top:calc(12 * var(--u))}
.home-wrap .ct-filebtn{
display:inline-flex;align-items:center;justify-content:center;
width:auto;min-width:max(calc(81 * var(--u)), 84px);
height:max(calc(36 * var(--u)), 32px);box-sizing:border-box;padding:0 12px;
border:1px solid rgba(207,255,4,.8);border-radius:4px;
color:#CFFF04;font-size:max(calc(14.5 * var(--u)), 12px);font-weight:700;cursor:pointer;white-space:nowrap;
}
.home-wrap .ct-filename{margin-left:calc(16 * var(--u));color:rgba(255,255,255,.45);font-size:max(calc(14 * var(--u)), 12px);white-space:nowrap}
.home-wrap .home-contact .home-form-file{display:none}
.home-wrap .ct-agree{
display:flex;align-items:center;gap:calc(10 * var(--u));
margin-top:calc(45 * var(--u));color:rgba(255,255,255,.8);
font-size:max(calc(20 * var(--u)), 12px);font-weight:500;cursor:pointer;
}
.home-wrap .ct-agree input{width:calc(20 * var(--u));height:calc(20 * var(--u));accent-color:#CFFF04;margin:0}
.home-wrap .ct-agree a{color:#CFFF04;text-decoration:underline;text-underline-offset:2px}
/* v63: 폼 안 제출 버튼 — '신청 버튼이 어딘지 헷갈리던' 문제(클라) */
.home-wrap .ct-submit{
display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));
width:100%;height:max(calc(58 * var(--u)), 48px);margin-top:calc(30 * var(--u));
background:#CFFF04;color:#101010;border:0;border-radius:calc(8 * var(--u));
font-size:max(calc(19 * var(--u)), 14px);font-weight:800;letter-spacing:-.01em;cursor:pointer;
transition:filter .15s;
}
.home-wrap .ct-submit:hover{filter:brightness(.95)}
.home-wrap .ct-submit i{font-style:normal}
/* ── Boost 밴드 ── */
.home-wrap .ct-boost{
width:auto;box-sizing:border-box; /* [v63.3] PC 좌우 여백 제거 — 풀블리드(정우 9/9) */
margin:calc(117 * var(--u)) 0 0;
padding:calc(160 * var(--u)) calc(24 * var(--u)) calc(156 * var(--u)); /* [v63.2] 버튼 삭제분만큼 아래로(정우 9/9) */
border-radius:0;
background:
radial-gradient(ellipse 34% 130% at 0% 50%, rgba(48,58,2,.95), transparent 72%),
radial-gradient(ellipse 34% 130% at 100% 50%, rgba(48,58,2,.95), transparent 72%),
#050502;
}
.home-wrap .ct-boost h3{margin:0;color:#fff;font-size:calc(58 * var(--u));font-weight:800;letter-spacing:-.02em} /* v63: 확대(클라) */
.home-wrap .ct-boost h3 b{color:#CFFF04;font-weight:800}
.home-wrap .ct-boost p{margin:calc(26 * var(--u)) 0 0;color:rgba(255,255,255,.72);font-size:calc(24 * var(--u));font-weight:500}
.home-wrap .ct-boost-btn{
display:inline-flex;align-items:center;justify-content:center;gap:calc(16 * var(--u));
margin-top:calc(50 * var(--u));width:calc(420 * var(--u));height:calc(74 * var(--u));
border:0;border-radius:100px;background:#CFFF04;color:#0E0E0E;
font-size:calc(19 * var(--u));font-weight:800;cursor:pointer;
box-shadow:0 0 calc(70 * var(--u)) rgba(207,255,4,.22);
transition:transform .2s, box-shadow .2s;
}
.home-wrap .ct-boost-btn:hover{transform:translateY(-2px);box-shadow:0 0 calc(90 * var(--u)) rgba(207,255,4,.38)}
.home-wrap .ct-boost-btn .bar{
display:flex;align-items:center;justify-content:center;flex:none;
width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:50%;
background:#101010;color:#CFFF04;font-style:normal;font-size:calc(17 * var(--u));
}
/* ── 홈 푸터 (시안 4열) ── */
.home-wrap .home-footer,
body .home-footer{
background:#000!important;border-top:0!important;color:#fff;
padding:calc(150 * var(--u, .8px)) 0 calc(64 * var(--u, .8px))!important;
display:block!important;
}
.home-footer{--u: clamp(.52px, .052083vw, 1px)}
.home-footer .hf-grid{
display:grid;grid-template-columns:calc(595 * var(--u)) calc(411 * var(--u)) calc(348 * var(--u)) 1fr;
width:calc(1586 * var(--u));margin:0 auto;text-align:left;
}
.home-footer .home-footer-logo-img{height:calc(45 * var(--u));width:auto;display:block;margin:0}
.home-footer .hf-slogan{display:block;margin-top:calc(59 * var(--u));color:#fff;font-size:calc(22 * var(--u));font-weight:800;letter-spacing:-.01em}
.home-footer .hf-tagline{margin:calc(20 * var(--u)) 0 0;color:rgba(255,255,255,.6);font-size:calc(16.5 * var(--u));font-weight:500;line-height:calc(29 * var(--u))}
.home-footer .hf-label{display:block;color:#fff;font-size:calc(20 * var(--u));font-weight:800;letter-spacing:-.01em;margin:0 0 calc(28 * var(--u))}
.home-footer .hf-lime .hf-label{color:#CFFF04}
.home-footer .hf-pink .hf-label{color:#FF2E9A}
.home-footer .hf-col p{margin:0;color:rgba(255,255,255,.72);font-size:calc(16.5 * var(--u));font-weight:500;line-height:calc(41 * var(--u))}
.home-footer .hf-col a{color:inherit;text-decoration:none}
.home-footer .hf-col a:hover{color:#fff}
.home-footer .hf-bottom{
width:calc(1586 * var(--u));margin:calc(96 * var(--u)) auto 0;
padding-top:calc(30 * var(--u));border-top:1px solid rgba(255,255,255,.15);
display:flex;justify-content:space-between;align-items:center;
color:rgba(255,255,255,.66);font-size:calc(15.5 * var(--u));font-weight:500;
}
.home-footer .hf-legal{display:flex;gap:calc(14 * var(--u))}
.home-footer .hf-legal a{color:rgba(255,255,255,.8);text-decoration:none}
.home-footer .hf-legal i{font-style:normal;color:rgba(255,255,255,.3)}
/* ═══ v55 — People → Partner 밴드 (시안 main_01_02.png) ═══════════════════ */
.home-wrap .ppl-band{
--u: clamp(.52px, .052083vw, 1px);
position:relative;height:calc(867 * var(--u));overflow:hidden;
display:flex;align-items:center;justify-content:center;text-align:center;
padding:0!important;
background:
radial-gradient(ellipse 62% 62% at 50% -4%, rgba(112,52,122,.8), rgba(112,52,122,.28) 52%, transparent 78%),
linear-gradient(180deg, #221A2C 0%, #171B24 72%, #141019 100%)!important;
}
.home-wrap .ppl-band .pt-inner{padding-bottom:calc(24 * var(--u))}
.home-wrap .pt-word{
display:block;font-size:calc(347 * var(--u));line-height:1;font-weight:800;letter-spacing:-.028em;
font-family:'Pretendard Variable',Pretendard,'Archivo',sans-serif;
background:linear-gradient(92deg,#F5309E 4%,#B02CC8 36%,#7A46DE 66%,#3E7BEF 98%);
background-size:230% 100%; /* [v60] 이동폭 130%p — 색 순환이 확실히 보이게 */
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:ptPan 6.5s ease-in-out infinite alternate;
}
@keyframes ptPan{ from{background-position:0% 0} to{background-position:100% 0} }
.home-wrap .pt-sub{
margin:calc(48 * var(--u)) 0 0;color:#fff;
font-size:calc(28 * var(--u));font-weight:600;letter-spacing:-.01em;
}
/* 라이즈 리빌 — 공용 IO(.is-in) */
.home-wrap .ppl-band .pt-rise{
display:block;opacity:0;transform:translateY(calc(46 * var(--u)));
transition:transform .8s cubic-bezier(.16,.84,.36,1), opacity .8s;
}
.home-wrap .ppl-band .pt-sub .pt-rise{transition-delay:.12s}
.home-wrap .ppl-band.is-in .pt-rise{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.home-wrap .pt-word{animation:none}
.home-wrap .ppl-band .pt-rise{opacity:1;transform:none;transition:none}
}
/* ── 1023 이하 ── */
@media(max-width:1023px){
.home-wrap .home-contact{padding:clamp(84px,18vw,136px) 0!important}
/* [v59] 모바일: 사진이 카드 상반까지 비치게 cover 확대(시안 느낌 유지) */
.home-wrap .ct-photo{height:min(150vw, 700px);background-size:cover}
.home-wrap .home-contact .home-title{font-size:clamp(21px,4.7vw,36px)!important}
.home-wrap .home-contact .ct-lead{font-size:clamp(14px,3.6vw,17px)!important;padding:0 clamp(24px,6.5vw,44px)}
.home-wrap .ct-grid{
flex-direction:column;align-items:center;gap:clamp(22px,5vw,36px);
margin:clamp(30px,7vw,52px) clamp(24px,6.5vw,44px) 0;
}
.home-wrap .ct-card{width:100%;max-width:560px;min-height:0;padding:clamp(28px,6.5vw,44px);gap:0}
.home-wrap .ct-name{font-size:clamp(22px,5.6vw,30px)}
.home-wrap .ct-sub{font-size:clamp(15px,3.9vw,21px);margin-top:6px}
.home-wrap .ct-lines{margin-top:clamp(24px,6vw,40px)}
.home-wrap .ct-lines li{font-size:clamp(13px,3.4vw,15px)}
.home-wrap .ct-lines i{width:36px;height:36px}
.home-wrap .home-contact .home-form{width:100%;max-width:560px}
.home-wrap .home-contact .home-contact-label{font-size:14px}
.home-wrap .home-contact .home-contact-choice{height:34px;font-size:12px!important;padding:0 12px!important;border-radius:9px!important}
.home-wrap .ct-f label{font-size:14px}
.home-wrap .ct-f input[type="text"],.home-wrap .ct-f input[type="tel"],.home-wrap .ct-f input[type="email"]{height:38px;font-size:16px!important}
.home-wrap .ct-f textarea{height:110px;font-size:16px!important}
.home-wrap .ct-f{margin-top:20px}
.home-wrap .ct-f-first{margin-top:34px}
.home-wrap .ct-filebtn{width:96px;height:38px;font-size:13px}
.home-wrap .ct-agree{font-size:13px}
.home-wrap .ct-boost{
width:auto;margin:clamp(40px,9vw,72px) 0 0;border-radius:0;
padding:clamp(40px,9vw,72px) clamp(24px,6.5vw,44px);
}
.home-wrap .ct-boost h3{font-size:clamp(24px,6vw,38px)}
.home-wrap .ct-boost p{font-size:clamp(14px,3.6vw,17px);margin-top:12px}
.home-wrap .ct-boost-btn{width:100%;max-width:360px;height:52px;font-size:15px;margin-top:26px}
.home-footer .hf-grid{
grid-template-columns:1fr;width:auto;
margin:0 clamp(24px,6.5vw,44px);row-gap:clamp(28px,6vw,40px);
}
.home-footer .hf-slogan{margin-top:22px;font-size:17px}
.home-footer .hf-tagline{font-size:14px;line-height:1.7}
.home-footer .hf-label{font-size:16px;margin-bottom:10px}
.home-footer .hf-col p{font-size:14px;line-height:1.9}
.home-footer .home-footer-logo-img{height:26px}
.home-footer .hf-bottom{
width:auto;margin:clamp(30px,7vw,48px) clamp(24px,6.5vw,44px) 0;
flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;
}
.home-wrap .ppl-band{height:auto;padding:clamp(84px,18vw,136px) 0!important}
.home-wrap .pt-word{font-size:min(25.5vw, 200px)}
.home-wrap .pt-sub{font-size:clamp(15px,4vw,22px);margin-top:clamp(14px,3.4vw,26px)}
}
/* ═══ v60 — 카드 출현 애니 (02 슬라이드 스플릿 · 05 스케일 팝) + 재진입 재생 ═══ */
@media(min-width:1024px){
.home-wrap .home-two-cards .home-two-card{
opacity:0;will-change:transform;
transition:transform .95s cubic-bezier(.16,.84,.24,1), opacity .6s ease;
}
.home-wrap .home-two-cards .home-two-card:nth-child(1){transform:translateX(-64px) rotate(-1.6deg)}
.home-wrap .home-two-cards .home-two-card:nth-child(2){transform:translateX(64px) rotate(1.6deg)}
.home-wrap .home-two-cards.is-in .home-two-card{opacity:1;transform:none}
.home-wrap .home-two-cards.is-in .home-two-card:nth-child(2){transition-delay:.12s}
.home-wrap .home-two-cards.is-in .home-two-card:hover{transform:scale(1.018)}
.home-wrap .home-service-cards .home-service-card{
opacity:0;will-change:transform;transform:translateY(34px) scale(.88);
transition:transform .8s cubic-bezier(.2,.85,.25,1.06), opacity .5s ease;
}
.home-wrap .home-service-cards.is-in .home-service-card{opacity:1;transform:none}
.home-wrap .home-service-cards.is-in .home-service-card:nth-child(2){transition-delay:.12s}
.home-wrap .home-service-cards.is-in .home-service-card:nth-child(3){transition-delay:.24s}
.home-wrap .home-service-cards.is-in .home-service-card:hover{
transform:translateY(-6px);box-shadow:0 22px 54px rgba(16,16,16,.20);
}
}
/* [v64.1] 관리자 전용 비주얼 등록 버튼(방문자에겐 안 보임) */
.home-wrap .home-hero .hv-admin-add{
position:absolute;right:10px;bottom:10px;z-index:6;
display:inline-flex;align-items:center;gap:6px;
padding:9px 16px;border:1px dashed rgba(207,255,4,.75);border-radius:100px;
background:rgba(0,0,0,.6);color:#CFFF04;font-size:12.5px;font-weight:700;
text-decoration:none;letter-spacing:-.01em;
}
.home-wrap .home-hero .hv-admin-add:hover{border-style:solid;background:#1A1F02}
/* [v64] 메인 비주얼 이미지 프레임 */
.home-wrap .home-hero .frame.f-img{padding:0}
.home-wrap .home-hero .frame.f-img img{
width:100%;height:100%;object-fit:cover;border-radius:24px;display:block;
}
@media(max-width:1023px){
.home-wrap .home-hero .frame.f-img img{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
.home-wrap .home-hero .frame.f-img{display:none}
}
/* [v65] GOAL — GET 내용 포함 칩 (클라 2차) */
.home-wrap .ggg-cards .gc-incl{
display:inline-flex;align-items:center;width:fit-content;
margin:calc(26 * var(--u)) 0 calc(-4 * var(--u)); /* [v65.3] 박스 제거 후 여백 복원 */
padding:calc(9 * var(--u)) calc(18 * var(--u));
border:1px solid #FE6323;border-radius:100px;
color:#FE6323;font-size:calc(14.5 * var(--u));font-weight:800;letter-spacing:.01em;
}
@media(max-width:1023px){ /* [v65.3b] u-쪼그라듦 방지 */
.home-wrap .ggg-cards .gc-incl{margin:10px 0 -2px;padding:5px 12px;font-size:clamp(11px,2.6vw,13px)}
}
/* [v65] 카드 하단 기준선 정렬 — 기간 뱃지를 카드 바닥에 고정(높이는 home.js 가 동기화) */
.home-wrap .ggg-cards .gc{display:flex;flex-direction:column}
.home-wrap .ggg-cards .gc-body{display:flex;flex-direction:column;flex:1}
.home-wrap .ggg-cards .gc-body .gc-pills{margin-top:auto;padding-top:calc(30 * var(--u))}
@media(max-width:1023px){
.home-wrap .ggg-cards .gc-body .gc-pills{margin-top:0;padding-top:clamp(20px,4.4vw,28px)} /* [v65.5] auto 해제 */
.home-wrap .ggg-cards .gc-body{justify-content:space-between} /* [v65.6] 잉여를 블록 사이에 분산 - 뱃지의 바닥 거리 3장 통일(정우 9/10) */
}
/* [v65] GO·GET 도 호버 시 하이라이트 (클라: GOAL 처럼) */
@media(hover:hover){
.home-wrap .ggg-cards .gc:hover{
box-shadow:0 0 0 2px #FF9338, 0 18px 64px rgba(255,147,56,.35);
transform:translateY(-4px);
}
}
/* [v63.1] 3 LEVELS — 카드 클릭 시 화면 하이라이트 (9/9 클라 "화면 클릭시 화면 하이라이트") */
.home-wrap .ggg-cards .gc{cursor:pointer;transition:box-shadow .3s ease, transform .3s ease}
.home-wrap .ggg-cards .gc.is-lit{
box-shadow:0 0 0 2px #FF9338, 0 18px 64px rgba(255,147,56,.35);
transform:translateY(-4px);
}