/* v239 · 서비스 상세(2뎁스)를 메인 기준으로 통일 — 메인 전용으로 묶여 있던 벤 · AS IS/TO BE · 프로세스 스타일을 서브에도 적용 */ .pv2 .syn{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center;margin-top:clamp(90px,10vw,150px)} @media (max-width:900px){.pv2 .syn{grid-template-columns:1fr}} .pv2 .syn.syn2{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:clamp(24px,3vw,56px);row-gap:clamp(10px,1.4vw,20px);align-items:center;margin-top:clamp(40px,5vw,80px)} .pv2 .syn2 .syn-fig{grid-column:2;grid-row:2;max-width:none;justify-self:center;width:100%} .pv2 .syn2 .si-ab{grid-column:2;grid-row:1;text-align:center;justify-self:center;max-width:340px} .pv2 .syn2 .si-ac{grid-column:1;grid-row:2;text-align:right;justify-self:end;align-self:end;margin-bottom:22%;max-width:300px} .pv2 .syn2 .si-bc{grid-column:3;grid-row:2;text-align:left;justify-self:start;align-self:end;margin-bottom:22%;max-width:300px} .pv2 .syn2 .syn-go{grid-column:1/-1;grid-row:3;justify-self:center;margin-top:clamp(20px,2.4vw,36px)} .pv2 .syn-info{cursor:default;opacity:.55;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)} .pv2 .syn-info span{display:block;font:700 11.5px/1 var(--en);letter-spacing:.14em;color:#fd4533} .pv2 .syn-info b{display:block;margin-top:10px;font:700 clamp(19px,1.6vw,24px)/1.25 var(--kr);letter-spacing:-.04em;color:#fff} .pv2 .syn-info p{margin:8px 0 0;font:400 14.5px/1.6 var(--kr);color:rgba(255,255,255,.62)} .pv2 .syn2[data-hl="ab"] .si-ab,.pv2 .syn2[data-hl="ac"] .si-ac,.pv2 .syn2[data-hl="bc"] .si-bc{opacity:1} .pv2 .syn2[data-hl="ac"] .si-ac{transform:translateX(-6px)} .pv2 .syn2[data-hl="bc"] .si-bc{transform:translateX(6px)} .pv2 .syn2[data-hl="ab"] .si-ab{transform:translateY(-4px)} .pv2 .syn2 .sy-l{transition:fill .7s ease,opacity .6s ease .9s !important} .pv2 .syn2[data-hl="ab"] .sy-l[data-l="ab"],.pv2 .syn2[data-hl="ac"] .sy-l[data-l="ac"],.pv2 .syn2[data-hl="bc"] .sy-l[data-l="bc"]{fill:rgba(253,69,51,.5)} .pv2 .syn2 .sy-core{animation:synCore 3.2s ease-in-out infinite} .pv2 .syn2 .sy-c{transition:stroke .5s} @media (max-width:900px){.pv2 .syn.syn2{grid-template-columns:1fr;grid-template-rows:none}} @media (max-width:900px){.pv2 .syn2>*{grid-column:1 !important;grid-row:auto !important;justify-self:stretch !important;text-align:left !important;margin:0 !important;max-width:none !important}} @media (max-width:900px){.pv2 .syn2 .syn-fig{order:-1;max-width:460px;justify-self:center !important}} @media (max-width:900px){.pv2 .syn-info{opacity:1}} /* 배경: 띠 없이 body의 그레이→블랙 배경 하나로 이어짐 */ #app .pv2 section,#app .pv2 .sec,#app .pv2 .band,#app .pv2 .phero{background:transparent !important;border-top:0 !important;border-bottom:0 !important;box-shadow:none !important} #app .pv2 .band::before,#app .pv2 .band::after,#app .pv2 .phero::before,#app .pv2 .phero::after{display:none !important} #app .pv2>section,#app .pv2>.sec{padding-top:var(--secgap,144px) !important;padding-bottom:0 !important} #app{--secgap:clamp(88px,10vw,144px)} /* 상단: 어떤 서비스 페이지인지 바로 보이게 */ #app .pv3-hero{padding-top:clamp(112px,11vw,160px) !important} #app .pv3-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} #app .pv3-tabs a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font:700 13px/1 var(--en);letter-spacing:.06em;color:rgba(255,255,255,.55);text-decoration:none;transition:color .35s ease,background-color .45s cubic-bezier(.22,1,.36,1)} #app .pv3-tabs a em{font:700 10px/1 var(--en);font-style:normal;letter-spacing:.08em;color:#fd4533;transition:color .35s} #app .pv3-tabs a:hover{color:#fff;background:rgba(255,255,255,.06)} #app .pv3-tabs a.on{background:#fd4533;color:#fff} #app .pv3-tabs a.on em{color:rgba(255,255,255,.85)} #app .pv3-id{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(48px,6vw,96px)} #app .pv3-crumb{display:flex;align-items:center;gap:12px;margin:0;font:600 13px/1 var(--en);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)} #app .pv3-crumb b{color:#fd4533;font-weight:700} #app .pv3-crumb i{font-style:normal;opacity:.35} #app .pv3-crumb span:last-child{font-family:var(--kr);letter-spacing:0;text-transform:none} #app .pv3-name{margin:24px 0 0 !important;font:800 clamp(72px,10.4vw,172px)/.9 var(--en) !important;letter-spacing:-.045em !important;color:#fff;white-space:nowrap} #app .pv3-ax{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.6)} #app .pv3-role{margin:26px 0 0;font:700 clamp(19px,1.7vw,26px)/1.3 var(--kr);letter-spacing:-.03em;color:#fff} #app .pv3-role span{margin-left:14px;font:600 12.5px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)} #app .pv3-icon{flex:0 0 auto;width:clamp(140px,14vw,220px) !important;height:clamp(140px,14vw,220px) !important;margin:0 !important} #app .pv3-icon canvas{width:100% !important;height:100% !important} #app .pv3-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end;margin-top:clamp(56px,6vw,104px)} #app .pv3-slogan{margin:0;font:800 clamp(22px,2vw,30px)/1.1 var(--en);letter-spacing:-.03em;color:rgba(255,255,255,.48)} #app .pv3-slogan .o{color:#fd4533} #app .pv3-intro h2{margin:14px 0 0 !important;font:700 clamp(30px,2.8vw,44px)/1.28 var(--kr) !important;letter-spacing:-.045em !important;color:#fff} #app .pv3-intro .d{margin:0;font:400 16px/1.75 var(--kr);color:rgba(255,255,255,.66)} #app .pv3-intro .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} @media (max-width:820px){ #app .pv3-tabs{border-radius:22px} #app .pv3-tabs a{padding:10px 13px;font-size:12px} #app .pv3-id{flex-direction:column-reverse;align-items:flex-start} #app .pv3-icon{width:110px !important;height:110px !important} #app .pv3-name{font-size:clamp(52px,15vw,80px) !important;white-space:normal} #app .pv3-role span{display:block;margin:10px 0 0} #app .pv3-intro{grid-template-columns:1fr} } /* 벤: 지금 보는 서비스의 원과 두 겹침만 강조 */ #app .pv3-syn .sy-c.is-cur{fill:rgba(253,69,51,.08) !important;stroke:#fd4533 !important;stroke-width:1.6 !important} #app .pv3-syn .sy-t.is-cur b{color:#fd4533} #app .pv3-syn .sy-t.is-cur span{color:#fff;opacity:1} #app .pv3-syn .syn-info:not(.is-mine){opacity:.22 !important} /* AS IS / TO BE: 메인 Edge 블록 그대로 (자동 재생) */ #app .pv3-cmp{margin-top:clamp(40px,5vw,72px)} /* 프로세스: 메인과 같은 스텝 카드 · 돌 배경 · 스텝별 등장 */ #app .pv3-psf{margin-top:clamp(40px,5vw,72px)} #app .pv3-psf .ps-card{min-height:0 !important} #app .pv3-psf .ps-card h3{margin:12px 0 10px !important} @media (min-width:1101px){ #app .pv3-psf .ps-list{display:grid !important;grid-template-columns:repeat(12,minmax(0,1fr)) !important;column-gap:24px !important;row-gap:0 !important} #app .pv3-psf .ps-card:nth-child(1){grid-column:1/6 !important;grid-row:1 !important;margin-top:0 !important} #app .pv3-psf .ps-card:nth-child(2){grid-column:7/12 !important;grid-row:1 !important;margin-top:150px !important} #app .pv3-psf .ps-card:nth-child(3){grid-column:2/7 !important;grid-row:2 !important;margin-top:-20px !important} #app .pv3-psf .ps-card:nth-child(4){grid-column:8/13 !important;grid-row:2 !important;margin-top:120px !important} #app .pv3-psf .ps-card:nth-child(5){grid-column:3/8 !important;grid-row:3 !important;margin-top:-10px !important} } /* v240 — 프로세스 카드 라운딩 아주 살짝 더 (6px → 10px, 메인 · 서브 공통) */ #app .ps-field .ps-card{border-radius:10px !important} /* v241 — 상단 네비: 둔탁한 검정 바 대신 투명 → 스크롤 시 옅은 유리. 선 없이 아래로 부드럽게 사라지는 그림자 */ #app ~ .hd,.hd,.hd.solid{border-bottom:0 !important;box-shadow:none !important} .hd:not(.solid){background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .hd.solid{height:68px !important;padding-top:11px !important;padding-bottom:11px !important; background:linear-gradient(180deg,rgba(28,28,32,.46),rgba(22,22,26,.30)) !important; backdrop-filter:blur(18px) saturate(1.25) !important;-webkit-backdrop-filter:blur(18px) saturate(1.25) !important; box-shadow:0 18px 40px -28px rgba(0,0,0,.55) !important; transition:background .5s ease,height .45s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,1,.36,1),box-shadow .5s ease !important} .hd{transition:background .5s ease,height .45s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,transform .5s var(--ease) !important} body.menu-on .hd{background:transparent !important;box-shadow:none !important} .hd.on-light,.hd.solid.on-light{background:linear-gradient(180deg,rgba(246,246,244,.86),rgba(246,246,244,.72)) !important;box-shadow:0 18px 40px -30px rgba(0,0,0,.25) !important} /* v242 — AI 버튼: 'AI Biz 바로가기' 라벨이 늘 보이게(PC). 모바일은 떠 있는 버튼을 없애고 하단 상담 바 + 메뉴 안 링크로 정리 */ @media (min-width:821px){ .fdock .fd-ai .fd-label{opacity:1 !important;transform:translate(0,-50%) !important;pointer-events:none} } @media (max-width:820px){ .fdock{display:none !important} .menu-bottom .mb-acts{display:flex;flex-wrap:wrap;gap:10px} } .menu-bottom .mb-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center} /* v242 — Services Step 1: 2원 벤 대신 수식(비즈니스 이해 + 아이디어 = AX 기획). 벤은 Synergy 하나만 */ #app .vf{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(12px,1.6vw,26px)} #app .vf-term{display:flex;flex-direction:column;gap:8px} #app .vf-term b{font:700 clamp(26px,2.5vw,40px)/1.1 var(--kr);letter-spacing:-.05em;color:#fff;white-space:nowrap} #app .vf-term small{font:500 13.5px/1.3 var(--kr);color:rgba(255,255,255,.62)} #app .vf-out b{color:#fd4533} #app .vf-out small{font-family:var(--en);letter-spacing:.06em} #app .vf-op{font:300 clamp(30px,3vw,48px)/1 var(--en);color:rgba(255,255,255,.4)} @media (min-width:901px){#app .venn.vf-wrap{grid-template-columns:minmax(0,1.35fr) auto minmax(0,1fr)}} #app .vf-wrap .vf-term,#app .vf-wrap .vf-op{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform 1s cubic-bezier(.34,1.3,.64,1)} #app .vf-wrap.in .vf-term,#app .vf-wrap.in .vf-op{opacity:1;transform:none} #app .vf-wrap.in .vf>*:nth-child(2){transition-delay:.12s}#app .vf-wrap.in .vf>*:nth-child(3){transition-delay:.24s} #app .vf-wrap.in .vf>*:nth-child(4){transition-delay:.36s}#app .vf-wrap.in .vf>*:nth-child(5){transition-delay:.5s} @media (max-width:900px){#app .vf{gap:10px 14px}#app .vf-arrow{transform:rotate(90deg)}} /* v242 — AS IS 문구 대비 한 단계 상향 */ #app .from-copy{color:rgba(255,255,255,.52) !important;text-decoration-color:rgba(255,255,255,.34) !important} /* v242 — 모바일 첫 화면 서비스 4개: 번호는 이름 위로, 2×2 정렬, 하단 상담 바와 겹치지 않게 */ @media (max-width:820px){ #app .hsx{display:grid !important;grid-template-columns:1fr 1fr !important;gap:20px 16px !important;margin-bottom:96px !important} #app .hsx-top{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:6px !important} #app .hsx-no{position:static !important;margin:0 !important} #app .hsx-name{font-size:17px !important;white-space:nowrap} #app .hsx-role,#app .hsx-q{margin-left:0 !important;font-size:12.5px !important} #app .hsx-item.is-one .hsx-top::after{display:none !important} } /* v242 — 모바일 가격 탭: 큰 원처럼 보이던 슬라이드 표시 대신 2×2 칸, 선택 칸만 키컬러 */ @media (max-width:820px){ #app .ptabs{display:grid !important;grid-template-columns:1fr 1fr !important;gap:4px !important;padding:5px !important;border-radius:18px !important;width:100% !important} #app .ptabs .ind{display:none !important} #app .ptabs button{padding:13px 10px !important;border-radius:13px !important;font-size:13px !important;justify-content:center;transition:background-color .35s ease,color .35s ease} #app .ptabs button.on{background:#fd4533 !important;color:#fff !important} } /* v242 — 모바일 AS IS → TO BE: 좌우 2열 대신 위(AS IS) · 아래(TO BE)로 */ @media (max-width:820px){ #app .transform-labels{display:none !important} #app .transform-row{display:grid !important;grid-template-columns:1fr !important;gap:6px !important;padding:18px 0 !important} #app .transform-arrow{display:none !important} #app .from-copy{padding:0 !important;font-size:14px !important} #app .from-copy::before{content:'AS IS';display:inline-block;width:100%;margin-bottom:4px;font:700 10.5px/1 var(--en);letter-spacing:.14em;color:rgba(255,255,255,.45);text-decoration:none} #app .flip-slot{min-height:0 !important} #app .flip-slot::before{content:'TO BE';display:block;margin-bottom:4px;font:700 10.5px/1 var(--en);letter-spacing:.14em;color:#fd4533} #app .to-copy{font-size:17px !important;line-height:1.45 !important} } @media (max-width:820px){ #app .flip-slot::before{grid-area:1/1} #app .flip-before,#app .to-copy{grid-area:2/1 !important} } /* service pages: the right-hand column is labelled in Korean (「BRIXON의 AX를 더한다면」, was "TO BE"), so it is set as a Korean phrase, not as a large English title. The main page keeps its own labels */ #app .pv3-cmp .transform-labels{align-items:baseline} #app .pv3-cmp .transform-labels>span{transform:none} #app .pv3-cmp .transform-labels>strong{font:700 clamp(22px,2vw,30px)/1.25 var(--kr);letter-spacing:-.045em} @media (max-width:820px){ /* phone rows: the per-row label takes its text from the template (data-lb) */ #app .pv3-cmp .flip-slot{margin-top:8px} #app .pv3-cmp .flip-slot[data-lb]::before{content:attr(data-lb);margin-bottom:5px;font:700 12.5px/1.2 var(--kr);letter-spacing:-.01em} } /* v242 — 인증: 3D 심볼은 그대로, 스크롤 길이를 절반 이하로(520vh → 230vh). 8개를 빠르게 훑고 지나가도록 */ @media (min-width:821px){#app .c3-pin{height:230vh !important}} @media (max-width:820px){ #app #estimate .ptabs{display:grid !important;grid-template-columns:1fr 1fr !important;gap:4px !important;padding:5px !important;border-radius:18px !important} #app #estimate .ptabs .ind{display:none !important} #app #estimate .ptabs button{background:transparent !important;border-radius:13px !important;padding:13px 10px !important;font-size:13px !important;justify-content:center !important} #app #estimate .ptabs button.on{background:#fd4533 !important;color:#fff !important} } /* v243 — Services 드롭다운: 설명 · 화살표 · 점선 박스 · 하단 링크 없이 번호 + 서비스명만, 옅은 유리 패널 */ .nav-links .dd-panel{padding-top:14px !important} .dd-in{min-width:236px !important;padding:8px !important;border:0 !important;border-radius:14px !important; background:linear-gradient(180deg,rgba(30,30,34,.82),rgba(22,22,26,.74)) !important; backdrop-filter:blur(18px) saturate(1.25) !important;-webkit-backdrop-filter:blur(18px) saturate(1.25) !important; box-shadow:0 24px 50px -24px rgba(0,0,0,.7) !important} .nav-links a.dd-item{display:flex !important;align-items:center !important;gap:14px !important;padding:13px 16px !important;border-radius:10px !important;border:0 !important;margin:0 !important; transition:background-color .3s ease,transform .35s cubic-bezier(.22,1,.36,1) !important} .nav-links a.dd-item .dd-no{width:26px;font:600 10.5px/1 var(--en) !important;letter-spacing:.08em;color:#fd4533} .nav-links a.dd-item .dd-name{font:700 15px/1 var(--en) !important;letter-spacing:.01em;color:rgba(255,255,255,.82);transition:color .3s ease,transform .35s cubic-bezier(.22,1,.36,1)} .nav-links a.dd-item:hover,.nav-links a.dd-item:focus-visible{background:rgba(255,255,255,.06) !important} .nav-links a.dd-item:hover .dd-name,.nav-links a.dd-item:focus-visible .dd-name{color:#fff;transform:translateX(3px)} .nav-links a.dd-item.dd-one .dd-name{color:#fd4533} .nav-links a.dd-item.is-here .dd-name{color:#fff} .nav-links a.dd-item.is-here{background:rgba(255,255,255,.05) !important} .nav-dd.open .dd-in .dd-item{animation:ddIn .45s cubic-bezier(.22,1,.36,1) both} .nav-dd.open .dd-in .dd-item:nth-child(2){animation-delay:.04s}.nav-dd.open .dd-in .dd-item:nth-child(3){animation-delay:.08s}.nav-dd.open .dd-in .dd-item:nth-child(4){animation-delay:.12s} @keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .nav-links .dd-panel{width:auto !important} .dd-in{width:236px !important;max-width:none !important} /* v246 — "We Quit Lying." Lying: 새빨간 거짓말 — 진한 빨강이 강하게 번쩍이며 들어와, 심장 박동처럼 부풀고 미세하게 떨리는 위협감 Quit : 글자가 파편으로 부서져 사방으로 날아갔다가 되돌아와 '쿵' 하고 박힘 → 그 순간 거짓말의 떨림이 멈춤 */ #app .qx{white-space:nowrap;--lie:#ff2416} #app .qx span,#app .qx i{display:inline-block;font-style:normal} #app .qx-we{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)} #app .qx.qx-a .qx-we{opacity:1;transform:none} /* Lying */ #app .qx-lie{color:var(--lie);opacity:0;transform:scale(1.32);filter:blur(10px);transform-origin:20% 60%} #app .qx.qx-b .qx-lie{opacity:1;transform:none;filter:none;transition:opacity .18s linear,transform .5s cubic-bezier(.2,1.6,.4,1),filter .35s ease;animation:qxMenace 1.7s ease-in-out .5s infinite} #app .qx.qx-b:not(.qx-e) .qx-lie i{animation:qxTremble .14s steps(2,end) infinite;animation-delay:calc(var(--k) * -.03s)} @keyframes qxMenace{ 0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(255,36,22,0)} 8%{transform:scale(1.055);text-shadow:0 0 28px rgba(255,36,22,.75),0 0 3px rgba(255,90,70,.9)} 18%{transform:scale(1);text-shadow:0 0 10px rgba(255,36,22,.35)} 28%{transform:scale(1.035);text-shadow:0 0 22px rgba(255,36,22,.6),0 0 2px rgba(255,90,70,.8)} 46%{transform:scale(1);text-shadow:0 0 6px rgba(255,36,22,.25)}} @keyframes qxTremble{0%{transform:translate(.6px,-.4px)}50%{transform:translate(-.6px,.5px)}100%{transform:translate(.3px,.6px)}} #app .qx.qx-e .qx-lie{animation:qxCalm 1.2s ease forwards} @keyframes qxCalm{0%{transform:scale(1.04);text-shadow:0 0 30px rgba(255,36,22,.7)}100%{transform:none;text-shadow:0 0 0 rgba(255,36,22,0)}} /* Quit */ #app .qx-quit{opacity:0;transform:translateY(14px)} #app .qx.qx-c .qx-quit{opacity:1;transform:none;transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)} #app .qx .ql{position:relative} #app .qx .qf{position:absolute;inset:0;clip-path:var(--cp);opacity:0;font-weight:inherit;will-change:transform} #app .qx.qx-d:not(.qx-e) .ql .qb{opacity:0} #app .qx.qx-d .ql .qf{opacity:1;animation:qxShard 1.25s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .035s)} @keyframes qxShard{ 0%{transform:none;filter:none} 34%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));filter:blur(1.5px);opacity:.85} 52%{transform:translate(calc(var(--dx) * 1.08),calc(var(--dy) * 1.08)) rotate(calc(var(--r) * 1.1));filter:blur(1.5px);opacity:.85} 100%{transform:none;filter:none;opacity:1}} #app .qx.qx-e .ql .qf{opacity:0 !important;animation:none} #app .qx.qx-e .ql .qb{opacity:1} #app .qx.qx-e{animation:qxThud .45s cubic-bezier(.22,1,.36,1) both} @keyframes qxThud{0%{transform:none}22%{transform:translateY(4px)}55%{transform:translateY(-1.5px)}100%{transform:none}} @media (prefers-reduced-motion:reduce){#app .qx *{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;filter:none !important}#app .qx .qf{display:none}} /* v247 — People 숫자 단위: 첫 화면 숫자와 같은 표기(y+ · +), 같은 크기 · 위치 · 키컬러 */ #app .cc-num .cc-u{font:400 .26em/1 var(--en) !important;letter-spacing:.01em !important;color:#fd4533 !important;transform:translateY(.1em);margin-left:.04em !important;text-transform:none !important} /* v249 — Brand(Brick + On) 석판: 오른쪽 쏠림 완화, 장면 전체를 살짝 왼쪽으로 */ @media (min-width:901px){#app .brand-visual{transform:translateX(clamp(-90px,-5vw,-40px))}} /* v253 — 하단 석판 캔버스: 준비가 끝난 뒤 부드럽게 나타남 */ #lavaBrick{opacity:0;transition:opacity .9s ease} #lavaBrick.is-ready{opacity:1} /* v254 — 모바일 Problem: 한 화면을 꽉 채우던 고정 판을 내용 높이에 맞춰 여백 축소 (PC는 그대로) */ @media (max-width:820px){ #app #planningStory{height:auto !important} #app #planningStory .story-stage{position:relative !important;height:auto !important;min-height:0 !important;display:block !important;padding:64px var(--pad) 48px !important;overflow:visible !important} #app #planningStory .story-message{position:relative !important;inset:auto !important;display:block !important;padding:0 !important;height:auto !important;min-height:0 !important} #app #planningStory .story-message:not(.is-current){display:none !important} #app #planningStory .story-message.is-current{display:block !important} #app #planningStory .story-foot{position:static !important;top:auto !important;margin-top:28px !important;text-align:left !important;padding:0 !important} } @media (max-width:820px){ #app #planningStory .story-stage>.section-index{position:static !important;top:auto !important;left:auto !important;margin:0 0 22px !important} } @media (max-width:820px){ #app #planningStory .story-stats{position:static !important;top:auto !important;bottom:auto !important;margin:26px 0 0 !important;padding:0 !important;justify-content:space-between !important;gap:12px !important} } /* v256 — Process → Pricing 사이 여백: Process 아래 빈 공간(약 317px)을 줄여 두 구간 사이를 공통 간격(144px)으로 */ #app #process.psteps{padding-bottom:0 !important} #app #process .ps-field{padding-bottom:0 !important} /* v257 — "Why trust us · We Quit Lying." 중앙 정렬 + 큰 타이포 (메인 Problem 문장 구간과 같은 결) */ #about{text-align:center} #about p.tag{display:inline-block;margin-left:auto;margin-right:auto} #app #about .quit{display:block;text-align:center;width:100%;margin:clamp(28px,3.4vw,48px) auto 0 !important;font:800 clamp(56px,8.6vw,132px)/1.02 var(--en) !important;letter-spacing:-.055em !important;white-space:nowrap} #app #about .quit .qx-quit{margin:0 .04em} #app #about .quit .ql{vertical-align:baseline} #app #about .quit + div{margin-top:clamp(36px,4vw,64px) !important;text-align:center} #app #about .quit + div p{margin-left:auto;margin-right:auto;text-align:center} #app #about .quit + div .fill,#app #about .quit + div p{font-size:clamp(18px,1.6vw,24px) !important;line-height:1.7 !important} @media (max-width:820px){#app #about .quit{font-size:clamp(44px,13vw,72px) !important;white-space:normal;line-height:1.05 !important}} #app #about p.tag{margin-top:clamp(40px,5vw,80px) !important} #app #about .story3 .st3{text-align:center} #app #about .story3 .st3-k{justify-content:center} #app #about .story3 .st3-t{margin-left:auto;margin-right:auto;max-width:34ch} /* v259 — Process 다섯 번째 카드가 잘리던 문제: 아래 여백을 0으로 줄이면서 overflow:hidden이 카드 끝을 자르고 있었음 */ #app #process .ps-field{overflow:visible !important;padding-bottom:clamp(56px,6vw,96px) !important} #app #process.psteps{padding-bottom:0 !important} /* v261 — Our story 세 단계: 위 가로선 제거, 숫자 · 글만 남겨 단순하게 */ #app #about .st3-line{display:none !important} #app #about .story3 .st3{border:0 !important;padding-top:0 !important} #app #about .story3 .st3::before,#app #about .story3 .st3::after{display:none !important} /* v262 — Services 팀 카드: 'AX GROWTH'까지 한 줄로 (네 이름 같은 크기로 살짝 축소, 줄바꿈 금지) */ #app .team .tm-top h4{font-size:clamp(26px,2.5vw,36px) !important;white-space:nowrap !important;letter-spacing:-.035em !important} /* v263 — 회사 소개 순서: About BRIXON → Our Story → People → Mission · Vision → 인증 → 연혁 People 다음 구간을 끌어올리던 예전 음수 여백 해제, 구간 간격을 공통 기준으로 */ #app #crew{padding-bottom:0 !important} #app #crew + section,#app #crew + .sec{margin-top:0 !important;padding-top:var(--secgap,144px) !important} #app #certs{padding-top:0 !important} /* v264 — People: 박스 없이 숫자 · 설명만, We Quit Lying 바로 아래 '대행사를 나온 디렉터들의 경력'으로 */ #app #about .crew-lead{margin:clamp(48px,5vw,80px) 0 0 !important;font:600 13px/1 var(--kr);letter-spacing:.02em;color:rgba(255,255,255,.55) !important;text-align:center} #app #about .crew-inline{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:clamp(20px,3vw,56px) !important;max-width:980px;margin:clamp(20px,2.4vw,32px) auto clamp(64px,7vw,112px) !important} #app #about .crew-inline .crew-card{background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} #app #about .crew-inline .crew-card::before,#app #about .crew-inline .crew-card::after{display:none !important} #app #about .crew-inline .cc-num{justify-content:center;font-size:clamp(52px,5.2vw,80px) !important;margin:0 !important} #app #about .crew-inline .cc-label{margin:10px 0 0 !important;font-size:15px !important;color:#fff !important} #app #about .crew-inline .cc-foot{margin:14px 0 0 !important;padding:0 !important;border:0 !important;position:static !important} #app #about .crew-inline .cc-foot h4{margin:0 !important;font:700 11.5px/1 var(--en) !important;letter-spacing:.1em !important;text-transform:uppercase;color:#fd4533 !important} #app #about .crew-inline .cc-foot p{margin:8px 0 0 !important;font-size:13.5px !important;color:rgba(255,255,255,.6) !important} @media (max-width:820px){#app #about .crew-inline{grid-template-columns:1fr !important;gap:36px !important}} @media (max-width:820px){ #app #about .crew-inline{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important} #app #about .crew-inline .cc-num{font-size:clamp(34px,10vw,44px) !important} #app #about .crew-inline .cc-label{font-size:12.5px !important;margin-top:6px !important} #app #about .crew-inline .cc-foot h4{font-size:9.5px !important;letter-spacing:.06em !important} #app #about .crew-inline .cc-foot p{display:none !important} } /* v266 — Our story 세 단계: 큰 숫자 대신 '이야기 흐름'. 단계는 작은 알약 라벨, 글은 Before(흐림) → Decision → BRIXON(또렷)으로 점점 밝아지고, 단계 사이엔 화살표 */ #app #about .story3{display:grid !important;grid-template-columns:1fr auto 1fr auto 1fr !important;align-items:start;gap:0 clamp(16px,2vw,32px) !important;max-width:1120px;margin:0 auto !important} #app #about .story3 .st3{grid-row:1} #app #about .story3 .st3:nth-child(1){grid-column:1}#app #about .story3 .st3:nth-child(2){grid-column:3}#app #about .story3 .st3:nth-child(3){grid-column:5} #app #about .story3 .st3-k{display:flex !important;justify-content:center !important;margin:0 0 18px !important} #app #about .story3 .st3-k b{display:none !important} #app #about .story3 .st3-k span{display:inline-block;padding:8px 16px;border-radius:999px;font:700 11px/1 var(--en) !important;letter-spacing:.16em !important;text-transform:uppercase;color:rgba(255,255,255,.62) !important;background:rgba(255,255,255,.06);margin:0 !important} #app #about .story3 .st3.is-now .st3-k span{background:#fd4533;color:#fff !important} #app #about .story3 .st3-t{font-size:16px !important;line-height:1.75 !important} #app #about .story3 .st3:nth-child(1) .st3-t{color:rgba(255,255,255,.5) !important} #app #about .story3 .st3:nth-child(2) .st3-t{color:rgba(255,255,255,.72) !important} #app #about .story3 .st3.is-now .st3-t{color:#fff !important;font-weight:600 !important} #app #about .story3::before,#app #about .story3::after{content:'→';grid-row:1;align-self:start;margin-top:2px;font:300 22px/1 var(--en);color:rgba(255,255,255,.3)} #app #about .story3::before{grid-column:2}#app #about .story3::after{grid-column:4;color:#fd4533} @media (max-width:820px){ #app #about .story3{grid-template-columns:1fr !important;gap:14px !important} #app #about .story3 .st3{grid-column:1 !important;grid-row:auto !important} #app #about .story3::before,#app #about .story3::after{display:none} #app #about .story3 .st3 + .st3::before{content:'↓';display:block;margin:0 auto 14px;font:300 20px/1 var(--en);color:rgba(255,255,255,.3)} } /* v267 — Our Story 한 단락: We Quit Lying → 디렉터들의 경력 → 걸어온 길 → 지키는 약속 (장마다 작은 리드 문장, 선 · 큰 번호 없이) */ #app #about .os-lead{margin-top:clamp(72px,8vw,128px) !important} #app #about .crew-inline{margin-bottom:0 !important} #app #about .story3{margin-top:clamp(20px,2.4vw,32px) !important} #app #about .vp-story{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:clamp(20px,2.6vw,44px) !important;max-width:1160px;margin:clamp(24px,2.6vw,36px) auto 0 !important;border:0 !important} #app #about .vp-story .vp-item{border:0 !important;padding:0 !important;background:none !important;text-align:center} #app #about .vp-story .vp-item::before,#app #about .vp-story .vp-item::after{display:none !important} #app #about .vp-story .vp-n{display:none !important} #app #about .vp-story h4{margin:0 !important;font:700 clamp(19px,1.6vw,23px)/1.3 var(--kr) !important;letter-spacing:-.04em;color:#fff} #app #about .vp-story .vp-std{margin:10px 0 0 !important;font-size:15px !important;color:rgba(255,255,255,.72) !important} #app #about .vp-story .vp-pr{margin:14px 0 0 !important;padding:0 !important;border:0 !important;font-size:13.5px !important;line-height:1.7 !important;color:rgba(255,255,255,.55) !important} #app #about .vp-story .vp-pr em{display:inline-block;margin:0 6px 0 0;padding:3px 9px;border-radius:999px;border:1px solid rgba(253,69,51,.55);font:700 10.5px/1 var(--kr);font-style:normal;color:#fd4533;vertical-align:1px} @media (max-width:820px){#app #about .vp-story{grid-template-columns:1fr 1fr !important;gap:28px 14px !important}} /* v268 — Our Story 고도화 걸어온 길: 단계마다 '한 마디'를 크게 — 근거 없는 확신(취소선) → 기획과 판단 → 기획으로 증명(키컬러 블록) 지키는 약속: 네 약속을 한 줄 큰 선언문으로, 차례로 켜지며 아래 설명이 바뀜 */ #app #about .jr{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:0 clamp(14px,2vw,28px);max-width:1180px;margin:clamp(24px,2.6vw,36px) auto 0} #app #about .jr-step{text-align:center} #app #about .jr-k{margin:0;font:700 11px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)} #app #about .jr-step.is-now .jr-k{color:#fd4533} #app #about .jr-w{margin:16px 0 0;font:800 clamp(28px,3vw,46px)/1.15 var(--kr);letter-spacing:-.05em;color:#fff;white-space:nowrap} #app #about .jr-step.is-past .jr-w{color:rgba(255,255,255,.38)} #app #about .jr-step.is-past .jr-w s{text-decoration:none;background:linear-gradient(#fd4533,#fd4533) no-repeat 0 55%/0% 3px;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .5s} #app #about .jr-step.is-past.in .jr-w s{background-size:100% 3px} #app #about .jr-step.is-mid .jr-w{color:rgba(255,255,255,.78)} #app #about .jr-t{margin:16px auto 0;max-width:30ch;font-size:15px;line-height:1.75;color:rgba(255,255,255,.55)} #app #about .jr-step.is-now .jr-t{color:rgba(255,255,255,.88)} #app #about .jr-ar{font:300 clamp(24px,2.4vw,34px)/1 var(--en);font-style:normal;color:rgba(255,255,255,.25);margin-top:clamp(30px,3vw,44px)} #app #about .jr-ar.is-on{color:#fd4533} #app #about .mf{max-width:1180px;margin:clamp(24px,2.6vw,36px) auto 0;text-align:center} #app #about .mf-line{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.15em .45em;font:800 clamp(30px,3.6vw,56px)/1.2 var(--kr);letter-spacing:-.05em} #app #about .mf-w{all:unset;cursor:pointer;color:rgba(255,255,255,.22);transition:color .6s ease} #app #about .mf-w:hover,#app #about .mf-w:focus-visible{color:rgba(255,255,255,.55)} #app #about .mf-w.on{color:#fff} #app #about .mf-dot{color:#fd4533;font-weight:400} #app #about .mf-detail{position:relative;min-height:96px;margin-top:clamp(22px,2.4vw,32px)} #app #about .mf-d{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none} #app #about .mf-d.on{opacity:1;transform:none;pointer-events:auto} #app #about .mf-std{margin:0;font:600 clamp(17px,1.4vw,20px)/1.5 var(--kr);color:#fff} #app #about .mf-pr{margin:10px 0 0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.62)} #app #about .mf-pr em{display:inline-block;margin-right:8px;padding:3px 10px;border-radius:999px;border:1px solid rgba(253,69,51,.55);font:700 11px/1 var(--kr);font-style:normal;color:#fd4533;vertical-align:1px} #app #about .mf-bar{display:flex;justify-content:center;gap:6px;margin-top:22px} #app #about .mf-bar i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.18);transition:width .5s cubic-bezier(.22,1,.36,1),background-color .5s} #app #about .mf-bar i.on{width:26px;background:#fd4533} @media (max-width:820px){ #app #about .jr{grid-template-columns:1fr;gap:10px} #app #about .jr-ar{transform:rotate(90deg);margin:6px auto} #app #about .jr-w{white-space:normal} #app #about .mf-line{font-size:clamp(24px,7vw,32px)} #app #about .mf-detail{min-height:130px} } /* v269 — Brick + On / = BRIXON 두 줄로, 제목 높이 축소 */ #app .eq.eq2 .eq-plus{margin:0 .12em 0 .16em} /* v270 — 회사 소개 구간 여백 정리: 보이는 내용 사이 간격을 다른 구간(약 200~290px)과 맞춤 */ #app #brand{padding-bottom:clamp(40px,5vw,80px) !important} #app #about{padding-bottom:clamp(40px,4vw,64px) !important} #app .sec:has(.mvx){padding-top:0 !important;padding-bottom:0 !important} #app .mvx{min-height:min(66vh,640px) !important;margin-bottom:0 !important} #app .sec:has(#certs){padding-top:clamp(56px,6vw,96px) !important} #app #blocks{padding-bottom:0 !important} #app #contact{padding-top:clamp(56px,6vw,96px) !important} @media (max-width:820px){ #app .mvx{min-height:0 !important} #app .sec:has(#certs){padding-top:48px !important} } /* v271 — Our Story: 벽돌 · 석판 언어로 다시 걸어온 길 = 벽돌 세 장이 스크롤에 따라 차례로 '켜짐'(Brick + On). Before는 금 간 벽돌, BRIXON은 붉은 빛 지키는 약속 = 석판 네 장이 쌓인 장면. 하나씩 빠져나와 붉게 빛나며 오른쪽 설명이 바뀜 */ #app #about .jb{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch;max-width:1180px;margin:clamp(24px,2.6vw,36px) auto 0;--lit0:0;--lit1:0;--lit2:0} #app #about .jb-step{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.22,1,.36,1)} #app #about .jb-step:hover{transform:translateY(-6px)} #app #about .jb-face{position:relative;height:100%;box-sizing:border-box;padding:clamp(28px,2.6vw,40px) clamp(20px,2vw,30px) clamp(34px,3vw,44px);text-align:center; background:linear-gradient(180deg,rgba(12,12,14,.72),rgba(12,12,14,.9)),url(img/gen/brick-surface.webp) center/420px; filter:grayscale(calc(1 - var(--lit))) brightness(calc(.55 + var(--lit) * .5));transition:filter .4s linear} #app #about .jb-step[data-jb-i="0"]{--lit:var(--lit0)}#app #about .jb-step[data-jb-i="1"]{--lit:var(--lit1)}#app #about .jb-step[data-jb-i="2"]{--lit:var(--lit2)} #app #about .jb-seam{position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none;z-index:1;opacity:calc(var(--lit) * .55);background:radial-gradient(70% 55% at 50% 105%,rgba(253,69,51,.75),rgba(253,69,51,0) 70%);mix-blend-mode:screen} #app #about .jb-step.is-now .jb-seam{opacity:var(--lit)} #app #about .jb-step.is-now{box-shadow:0 0 calc(var(--lit) * 60px) calc(var(--lit) * -10px) rgba(253,69,51,.55)} #app #about .jb-k{margin:0;font:700 11px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)} #app #about .jb-step.is-now .jb-k{color:#fd4533} #app #about .jb-w{margin:16px 0 0;font:800 clamp(24px,2.4vw,36px)/1.2 var(--kr);letter-spacing:-.05em;color:#fff;white-space:nowrap} #app #about .jb-step.is-past .jb-w s{text-decoration:none;color:rgba(255,255,255,.6);background:linear-gradient(#fd4533,#fd4533) no-repeat 0 55%/calc(var(--lit) * 100%) 3px} #app #about .jb-t{margin:16px auto 0;max-width:28ch;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.72)} #app #about .jb-crack{position:absolute;inset:0;pointer-events:none;opacity:calc(.25 + var(--lit) * .5); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cpath d='M210 0 L188 46 L204 70 L170 118 L182 150 L150 196 L162 222 L138 300' fill='none' stroke='rgba(0,0,0,.65)' stroke-width='3'/%3E%3Cpath d='M211 1 L189 47 L205 71 L171 119 L183 151 L151 197 L163 223 L139 300' fill='none' stroke='rgba(255,255,255,.14)' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat} #app #about .jb-ember{align-self:center;justify-self:center;width:10px;height:10px;border-radius:50%;background:#fd4533;opacity:.15;box-shadow:0 0 0 rgba(253,69,51,0);transition:opacity .4s,box-shadow .4s} #app #about .jb-ember.on{opacity:1;box-shadow:0 0 18px 4px rgba(253,69,51,.6);animation:jbEmber 1.6s ease-in-out infinite} @keyframes jbEmber{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} /* 약속 석판 */ #app #about .mf2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px);text-align:left;max-width:1120px} #app #about .slb-stage{position:relative;height:clamp(360px,34vw,460px);perspective:1400px} #app #about .slb{all:unset;position:absolute;left:46%;top:52%;width:clamp(220px,22vw,300px);aspect-ratio:300/190;cursor:pointer;transform-style:preserve-3d;z-index:calc(10 - var(--n)); transform:translate(-50%,-50%) translateY(calc((var(--n) - 1.5) * clamp(40px,4vw,56px))) rotateX(58deg) rotateZ(-40deg) translateX(var(--o,0px));transition:transform .9s cubic-bezier(.34,1.3,.64,1)} #app #about .slb.on{--o:clamp(48px,5vw,80px)} #app #about .slb:hover:not(.on){--o:14px} #app #about .slb-top{position:absolute;inset:0;border-radius:4px;display:flex;align-items:center;justify-content:center; background:linear-gradient(rgba(18,18,20,.25),rgba(18,18,20,.55)),url(img/gen/brick-surface.webp) center/280px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} #app #about .slb-top b{font:800 clamp(18px,1.8vw,26px)/1 var(--kr);letter-spacing:-.04em;color:rgba(255,255,255,.42);text-shadow:0 1px 0 rgba(0,0,0,.8),0 -1px 0 rgba(255,255,255,.08);transition:color .5s} #app #about .slb.on .slb-top b{color:#fff} #app #about .slb-front{position:absolute;left:0;top:100%;width:100%;height:24px;transform-origin:top;transform:rotateX(-90deg);background:linear-gradient(#262422,#121110);transition:background .6s,box-shadow .6s} #app #about .slb-side{position:absolute;left:100%;top:0;width:24px;height:100%;transform-origin:left;transform:rotateY(90deg);background:linear-gradient(90deg,#1b1918,#0c0b0b)} #app #about .slb.on .slb-front{background:linear-gradient(#ff5a44,#7a1a10);box-shadow:0 0 26px rgba(253,69,51,.75)} #app #about .mf2 .mf-detail{position:relative;min-height:230px;margin:0} #app #about .mf2 .mf-d{position:absolute;inset:0 0 auto 0} #app #about .mf-no{margin:0;font:700 11px/1 var(--en);letter-spacing:.16em;color:#fd4533} #app #about .mf-h{margin:14px 0 0 !important;font:800 clamp(30px,3vw,46px)/1.15 var(--kr) !important;letter-spacing:-.05em !important;color:#fff} #app #about .mf2 .mf-std{margin-top:16px !important} #app #about .mf2 .mf-bar{position:absolute;left:0;bottom:0;justify-content:flex-start;margin:0} @media (max-width:820px){ #app #about .jb{grid-template-columns:1fr;gap:10px} #app #about .jb-ember{margin:4px auto} #app #about .jb-w{white-space:normal} #app #about .mf2{grid-template-columns:1fr;text-align:center} #app #about .slb-stage{height:300px} #app #about .mf2 .mf-detail{min-height:220px} #app #about .mf2 .mf-bar{left:0;right:0;justify-content:center} } @media (prefers-reduced-motion:reduce){#app #about .jb{--lit0:1;--lit1:1;--lit2:1}} /* v272 — Process 카드: 유리 느낌이 보이게(반투명 + 뒤 돌 배경 흐림 + 윗면 빛), 외곽선은 더 옅게 (메인 · 서브 공통) */ #app .ps-field .ps-card,#app .ps-field .ps-card:nth-child(n){ background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 38%,rgba(255,255,255,.015) 100%) !important; -webkit-backdrop-filter:blur(16px) saturate(1.25) !important;backdrop-filter:blur(16px) saturate(1.25) !important; border:1px solid rgba(255,255,255,.07) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 50px -28px rgba(0,0,0,.65) !important} #app .ps-field .ps-card:nth-child(n):hover{background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.02) 100%) !important;border-color:rgba(255,255,255,.12) !important} /* v273 — 연혁 행: 오른쪽 설명 글이 끝에 붙지 않게 좌우 여백을 같게 */ #app #history .hrow{padding-right:clamp(16px,2vw,28px) !important} /* v274 — Our Story 후반: 패턴 · 카드 없이 정적인 큰 글씨 (Mission · Vision과 같은 결) 걸어온 길 = 세 문장이 흐림 → 또렷으로, 지키는 약속 = 2×2 선언문 */ #app #about .os-lead{display:block;max-width:1040px;margin-left:auto !important;margin-right:auto !important;text-align:left !important} #app #about .os-path{max-width:1040px;margin:clamp(22px,2.4vw,32px) auto 0;text-align:left} #app #about .op-row{display:grid;grid-template-columns:clamp(96px,10vw,140px) minmax(0,1fr);align-items:baseline;gap:clamp(12px,2vw,28px);padding:clamp(12px,1.4vw,20px) 0} #app #about .op-k{margin:0;font:700 11.5px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)} #app #about .op-row.is-now .op-k{color:#fd4533} #app #about .op-s{margin:0;font:700 clamp(24px,2.7vw,40px)/1.35 var(--kr);letter-spacing:-.045em;color:#fff} #app #about .op-row.is-past .op-s{color:rgba(255,255,255,.34)} #app #about .op-row.is-past s{text-decoration:line-through;text-decoration-color:#fd4533;text-decoration-thickness:3px} #app #about .op-row.is-mid .op-s{color:rgba(255,255,255,.6)} #app #about .op-row.is-mid b{color:#fff;font-weight:700} #app #about .os-promise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.4vw,64px) clamp(40px,6vw,96px);max-width:1040px;margin:clamp(22px,2.4vw,32px) auto 0;text-align:left} #app #about .pm-h{margin:0 !important;font:800 clamp(30px,3.4vw,50px)/1.1 var(--kr) !important;letter-spacing:-.05em !important;color:#fff} #app #about .pm-h i{font-style:normal;color:#fd4533} #app #about .pm-s{margin:16px 0 0;font:600 clamp(16px,1.3vw,19px)/1.55 var(--kr);color:rgba(255,255,255,.86)} #app #about .pm-p{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.55)} @media (max-width:820px){ #app #about .op-row{grid-template-columns:1fr;gap:8px} #app #about .os-promise{grid-template-columns:1fr;gap:36px} } /* v275 — 인증: 고정 판 높이를 화면 전체(100vh)에서 내용 높이 수준으로 줄여 제목 아래 · 연혁 위 빈 공간 축소. 3D 심볼은 그대로 */ @media (min-width:821px){ #app .c3-pin{margin-top:clamp(12px,1.6vw,24px) !important} #app .c3-stage{height:min(72vh,680px) !important;min-height:0 !important;top:calc(50vh - min(36vh,340px)) !important;padding-top:0 !important;padding-bottom:0 !important} #app .c3-vis{width:min(100%,64vh) !important} } /* v276 — 걸어온 길 + 약속을 한 줄 흐름으로: Before → Decision → BRIXON(네 가지 약속) 화면에 들어오면 왼쪽부터 차례로 켜지고, 불씨가 화살표를 따라 이동. 약속은 2.6초마다 바뀌고 올리면 머묾 */ #app #about .ow{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1.55fr);align-items:center;max-width:1180px;margin:clamp(22px,2.4vw,32px) auto 0;text-align:center} #app #about .ow-node{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)} #app #about .ow-k{margin:0;font:700 11px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)} #app #about .ow-w{margin:14px 0 0;font:800 clamp(22px,2.2vw,32px)/1.2 var(--kr);letter-spacing:-.045em;color:#fff;white-space:nowrap} #app #about .ow-t{margin:10px auto 0;max-width:20ch;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5)} #app #about .ow-node.is-past .ow-w{color:rgba(255,255,255,.42)} #app #about .ow-node.is-past s{text-decoration:none;background:linear-gradient(#fd4533,#fd4533) no-repeat 0 55%/0% 3px;transition:background-size .8s cubic-bezier(.65,0,.35,1) .45s} #app #about .ow-node.is-mid .ow-w{color:rgba(255,255,255,.82)} #app #about .ow-node.is-now{text-align:left;padding:clamp(22px,2.2vw,32px);border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(253,69,51,.16),rgba(253,69,51,.04) 55%,rgba(253,69,51,0))} #app #about .ow-node.is-now .ow-k{color:#fd4533} #app #about .ow-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} #app #about .ow-chip{all:unset;cursor:pointer;padding:11px 16px;border-radius:999px;font:700 clamp(14px,1.1vw,16px)/1 var(--kr);letter-spacing:-.02em;color:rgba(255,255,255,.78);background:rgba(255,255,255,.07);opacity:0;transform:translateY(8px) scale(.96);transition:background-color .35s,color .35s,opacity .5s ease,transform .6s cubic-bezier(.34,1.4,.64,1)} #app #about .ow-chip:hover{background:rgba(255,255,255,.12);color:#fff} #app #about .ow-chip.on{background:#fd4533;color:#fff} #app #about .ow-dets{position:relative;min-height:3.4em;margin-top:14px} #app #about .ow-det{position:absolute;inset:0;margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.72);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)} #app #about .ow-det.on{opacity:1;transform:none} #app #about .ow-ar{position:relative;height:10px;align-self:center;margin-top:-34px;background:radial-gradient(circle,rgba(255,255,255,.22) 1.2px,transparent 1.6px) 0 50%/10px 10px repeat-x;opacity:0;transition:opacity .5s ease} #app #about .ow-ar b{position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fd4533;box-shadow:0 0 14px 3px rgba(253,69,51,.55);opacity:0} /* 재생 */ #app #about .ow.go .ow-node{opacity:1;transform:none} #app #about .ow.go .ow-node.is-mid{transition-delay:.55s} #app #about .ow.go .ow-node.is-now{transition-delay:1.1s} #app #about .ow.go .ow-node.is-past s{background-size:100% 3px} #app #about .ow.go .ow-ar{opacity:1;transition-delay:.3s} #app #about .ow.go .ow-ar.is-hot{transition-delay:.85s} #app #about .ow.go .ow-ar b{animation:owRun 1.1s cubic-bezier(.45,0,.2,1) .3s both} #app #about .ow.go .ow-ar.is-hot b{animation-delay:.85s;animation-name:owRun2} @keyframes owRun{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}} @keyframes owRun2{0%{left:0;opacity:0}15%{opacity:1}100%{left:calc(100% - 8px);opacity:1}} #app #about .ow.go .ow-chip{opacity:1;transform:none;transition-delay:calc(1.35s + var(--d) * .09s)} #app #about .ow.go .ow-chip:hover,#app #about .ow.go .ow-chip.on{transition-delay:0s} @media (max-width:900px){ #app #about .ow{grid-template-columns:1fr;gap:12px} #app #about .ow-ar{width:10px;height:40px;margin:0 auto;background:radial-gradient(circle,rgba(255,255,255,.22) 1.2px,transparent 1.6px) 50% 0/10px 10px repeat-y} #app #about .ow-ar b{left:50%!important;margin-left:-4px;top:0;animation:none!important;opacity:1} #app #about .ow-node.is-now{text-align:center} #app #about .ow-chips{justify-content:center} } @media (prefers-reduced-motion:reduce){#app #about .ow *{transition:none!important;animation:none!important}#app #about .ow-node,#app #about .ow-chip,#app #about .ow-ar{opacity:1!important;transform:none!important}} /* v277 — 인증 → 연혁 사이 빈 공간 축소 (위 인증 제목 쪽과 같은 기준) */ #app .sec:has(#certs){padding-bottom:0 !important} #app #history{padding-top:clamp(48px,5vw,80px) !important} /* v279 — 디렉터 경력 줄과 걸어온 길 · 약속 줄의 가로 폭을 같게 (두 블록 모두 1080px 중앙) */ #app #about .crew-inline,#app #about .ow{max-width:1080px !important;width:100%;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box} /* v280 — We Quit Lying 타이틀과 본문 사이 여백 확대, 아래 줄(디렉터 경력 · 걸어온 길 · 약속)과의 리듬 정리 */ #app #about .quit{margin-bottom:clamp(20px,2.2vw,32px) !important} #app #about .quit + div{margin-top:clamp(40px,4.4vw,72px) !important} #app #about .crew-inline{margin-top:clamp(56px,6.4vw,104px) !important;margin-bottom:0 !important;padding-top:clamp(0px,1vw,8px)} #app #about .crew-inline .cc-num{transition:transform .6s cubic-bezier(.22,1,.36,1)} #app #about .crew-inline .crew-card:hover .cc-num{transform:translateY(-4px)} #app #about .ow{margin-top:clamp(96px,10vw,160px) !important} #app #about .ow-node.is-now{border:1px solid rgba(253,69,51,.14);box-shadow:0 30px 60px -40px rgba(253,69,51,.35)} #app #about .ow-chip.on{box-shadow:0 10px 24px -10px rgba(253,69,51,.7)} @media (max-width:820px){#app #about .quit + div{margin-top:36px !important}#app #about .crew-inline{margin-top:48px !important}#app #about .ow{margin-top:72px !important}} /* v281 — 리드 문장과 디렉터 경력 숫자 사이 여백 확대 */ #app #about .crew-inline{margin-top:clamp(104px,11vw,176px) !important} @media (max-width:820px){#app #about .crew-inline{margin-top:88px !important}} /* v282 — Our Story 아래 → Mission · Vision 사이 여백 확대 */ #app .sec:has(.mvx){padding-top:clamp(120px,12vw,200px) !important} @media (max-width:820px){#app .sec:has(.mvx){padding-top:96px !important}} /* v283 — BRIXON · 우리가 지키는 약속 패널: 빛을 또렷하고 긍정적으로 (은은하되 선명한 키라이트 + 림 라이트 + 바닥 반사광) */ #app #about .ow-node.is-now{position:relative;overflow:hidden;isolation:isolate;border:0 !important; background: radial-gradient(90% 70% at 0% 0%,rgba(255,110,90,.26),rgba(253,69,51,.07) 45%,rgba(253,69,51,0) 70%), linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.7)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),0 40px 80px -40px rgba(253,69,51,.55) !important} #app #about .ow-node.is-now::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0; background:linear-gradient(135deg,rgba(255,140,120,.7),rgba(253,69,51,.12) 35%,rgba(255,255,255,.05) 70%,rgba(253,69,51,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} #app #about .ow-node.is-now::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:40%;pointer-events:none;z-index:0; background:radial-gradient(60% 100% at 50% 100%,rgba(253,69,51,.32),rgba(253,69,51,0) 70%)} #app #about .ow-node.is-now > *{position:relative;z-index:1} #app #about .ow-node.is-now .ow-k{text-shadow:0 0 18px rgba(253,69,51,.45)} #app #about .ow-node.is-now .ow-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} #app #about .ow-node.is-now .ow-chip.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -10px rgba(253,69,51,.9)} /* 영문 제목 · 우측 국문 설명: 국문 마지막 줄 바닥을 영문 마지막 줄 베이스라인에 맞춤 */ #edge .hl .kc{padding-bottom:0;transform:translateY(-.22em)} /* 프로세스 카드: 맑은 유리 — 탁한 회색 틴트를 빼고, 뒤 돌이 선명하게 비치도록 투명도 · 흐림 · 채도 조정 */ #app .ps-field .ps-card,#app .ps-field .ps-card:nth-child(n){ background:linear-gradient(165deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.01) 45%,rgba(255,255,255,0) 100%) !important; -webkit-backdrop-filter:blur(7px) saturate(1.5) brightness(1.08) !important;backdrop-filter:blur(7px) saturate(1.5) brightness(1.08) !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 1px 0 0 rgba(255,255,255,.06),0 22px 44px -26px rgba(0,0,0,.55) !important} #app .ps-field .ps-card:nth-child(n):hover{ background:linear-gradient(165deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 100%) !important; border-color:rgba(255,255,255,.24) !important} /* 프로세스 카드 안 글씨: 그림자 · 외곽 빛 없이 흰 텍스트만 깔끔하게 */ #app .ps-field .ps-card,#app .ps-field .ps-card *{text-shadow:none !important;-webkit-text-stroke:0 !important;filter:none} #app .ps-field .ps-card h3,#app .ps-field .ps-card p,#app .ps-field .ps-card dt,#app .ps-field .ps-card dd,#app .ps-field .ps-card small{text-shadow:none !important} #app .ps-field .ps-card .ps-no{text-shadow:none !important;-webkit-text-stroke:0 !important} /* 첫 화면 두 줄 카피(상단 한 줄 · 카드 안 서브 카피): 더 크고 굵고 또렷하게 */ #app .wall-hero .wall-eyebrow{font-size:clamp(15px,1.25vw,18px) !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.02em !important;text-shadow:none !important} #app .wall-hero .wall-copy .p .k{font-size:clamp(17px,1.4vw,21px) !important;font-weight:700 !important;color:#fff !important;line-height:1.55 !important;letter-spacing:-.025em !important;max-width:none !important;text-shadow:none !important} @media (max-width:820px){ #app .wall-hero .wall-eyebrow{font-size:13px !important} #app .wall-hero .wall-copy .p .k{font-size:16px !important;max-width:22em !important} } /* 첫 화면 아래 지표: 'Top' 앞 글자 (숫자 왼쪽 위에 작게, 단위와 같은 결) */ #app #heroIntro .hero-proof b small.hp-pre{order:-1;margin:0 .06em 0 0 !important;font:400 .26em/1 var(--en) !important;letter-spacing:.01em !important;color:#fd4533 !important;transform:translateY(.1em) !important;text-transform:none !important} /* 상담 팝업 제목: 모바일에서 어색한 줄바꿈 방지 */ @media (max-width:820px){#modal #mTitle{font-size:clamp(20px,5.6vw,23px) !important;line-height:1.35 !important}#modal #mTitle br{display:none}} /* Services: 기능 나열 → 솔루션 뷰. 각 행은 '고객의 고민'이 기본, 마우스를 올리거나 After AX로 바꾸면 'BRIXON의 해결'로 전환 */ #app .sv-toggle{display:inline-flex;gap:4px;padding:5px;margin:clamp(18px,2vw,28px) 0 clamp(8px,1vw,14px);border-radius:999px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} #app .sv-toggle .sv-ind{display:none} #app .sv-toggle button{all:unset;cursor:pointer;padding:11px 18px;border-radius:999px;font:600 14px/1 var(--kr);letter-spacing:-.02em;color:rgba(255,255,255,.6);transition:background-color .4s cubic-bezier(.22,1,.36,1),color .3s} #app .sv-toggle button em{font:700 11px/1 var(--en);font-style:normal;letter-spacing:.1em;text-transform:uppercase;margin-right:6px;color:inherit;opacity:.8} #app .sv-toggle button:hover{color:#fff} #app .sv-toggle button.on{background:#fd4533;color:#fff} #app .svx-mid.sv-ba{display:grid !important;align-items:center;min-height:4.4em} #app .sv-ba>.sv-pain,#app .sv-ba>.sv-sol{grid-area:1/1;display:flex !important;flex-direction:column;gap:7px;transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1)} #app .sv-ba small{display:block;font:700 11px/1 var(--kr);letter-spacing:.06em;color:rgba(255,255,255,.5)} #app .sv-ba .sv-pain b{font:600 clamp(15px,1.2vw,17px)/1.5 var(--kr) !important;letter-spacing:-.03em;color:rgba(255,255,255,.86) !important} #app .sv-ba .sv-sol{opacity:0;transform:translateY(14px);pointer-events:none} #app .sv-ba .sv-sol small{color:#fd4533} #app .sv-ba .sv-sol b{font:700 clamp(15px,1.25vw,18px)/1.4 var(--kr) !important;letter-spacing:-.03em;color:#fff !important} #app .sv-ba .sv-sol>span{font-size:13.5px !important;line-height:1.6 !important;color:rgba(255,255,255,.72) !important} #app .svx-row:hover .sv-pain,#app .svx-row:focus-visible .sv-pain,#app .svx.is-after .sv-pain, #app .svx-row.is-hot .sv-pain{opacity:0;transform:translateY(-12px)} #app .svx-row:hover .sv-sol,#app .svx-row:focus-visible .sv-sol,#app .svx.is-after .sv-sol, #app .svx-row.is-hot .sv-sol{opacity:1;transform:none} #app .svx-row:hover .sv-sol small,#app .svx-row:focus-visible .sv-sol small, #app .svx-row.is-hot .sv-sol small{color:#fff} #app .svx-row:hover .sv-sol>span, #app .svx-row.is-hot .sv-sol>span{color:rgba(255,255,255,.9) !important} @media (max-width:820px){#app .sv-toggle{display:flex;width:100%;box-sizing:border-box}#app .sv-toggle button{flex:1;text-align:center;padding:11px 8px;font-size:13px}#app .sv-toggle button em{display:block;margin:0 0 5px}} /* Process = BRIXON AX Transformation Journey (4단계, 영문 단계명 + 국문 부제 + 설명) */ #app #process .ps-title-en{font-family:var(--en) !important;letter-spacing:-.045em !important} #app #process .ps-journey .ps-card h3{font:800 clamp(28px,2.5vw,40px)/1.1 var(--en) !important;letter-spacing:-.04em !important} #app #process .ps-journey .ps-lead{margin-top:10px !important;font:700 clamp(16px,1.3vw,19px)/1.4 var(--kr) !important;color:#fff !important} #app #process .ps-journey .ps-desc{margin:18px 0 0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.72)} #app #process .ps-journey .ps-card{min-height:0 !important} /* Pricing → Partnership: 3가지 협업 모델 카드 (가격표 대신) */ #app .pm3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(8px,1vw,16px)} #app .pm3-card{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.4vw,36px);border-radius:18px; background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07); transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s} #app .pm3-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -36px rgba(0,0,0,.7)} #app .pm3-card.is-key{background:radial-gradient(110% 80% at 0% 0%,rgba(253,69,51,.22),rgba(253,69,51,.05) 50%,rgba(253,69,51,0) 75%),linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,140,120,.35),inset 0 0 0 1px rgba(253,69,51,.28),0 30px 60px -40px rgba(253,69,51,.5)} #app .pm3-no{margin:0;font:700 11px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;color:#fd4533} #app .pm3-name{margin:16px 0 0 !important;font:800 clamp(28px,2.5vw,38px)/1.05 var(--en) !important;letter-spacing:-.04em !important;color:#fff} #app .pm3-type{margin:8px 0 0;font:700 clamp(15px,1.2vw,17px)/1.4 var(--kr);color:rgba(255,255,255,.88)} #app .pm3-for{margin:22px 0 0;padding-top:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font-size:15px;line-height:1.65;color:rgba(255,255,255,.78)} #app .pm3-card small{display:block;margin-bottom:8px;font:700 11px/1 var(--kr);letter-spacing:.04em;color:rgba(255,255,255,.45)} #app .pm3-del{margin-top:20px} #app .pm3-del small{font-family:var(--en);letter-spacing:.12em;text-transform:uppercase} #app .pm3-del ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} #app .pm3-del li{padding:8px 12px;border-radius:999px;font:600 13px/1.2 var(--kr);color:#fff;background:rgba(255,255,255,.07)} #app .pm3-card.is-key .pm3-del li{background:rgba(253,69,51,.16)} @media (max-width:900px){#app .pm3{grid-template-columns:1fr}} /* Synergy(벤다이어그램): 설명 글 가독성 · CTA 존재감 강화 */ #app .syn2 .syn-info{opacity:.82 !important} #app .syn2[data-hl="ab"] .si-ab,#app .syn2[data-hl="ac"] .si-ac,#app .syn2[data-hl="bc"] .si-bc{opacity:1 !important} #app .syn2 .syn-info span{font-size:12px !important;letter-spacing:.14em !important;color:#ff6a55 !important} #app .syn2 .syn-info b{font-size:clamp(22px,1.9vw,28px) !important;color:#fff !important} #app .syn2 .syn-info p{font-size:16px !important;line-height:1.65 !important;color:rgba(255,255,255,.82) !important} #app .syn2 .sy-t b{font-size:clamp(16px,1.35vw,20px) !important;color:#fff !important} #app .syn2 .sy-t span{font:500 13px/1.2 var(--kr) !important;color:rgba(255,255,255,.78) !important} #app .syn2 .sy-k{font:700 clamp(13px,1.05vw,15px)/1.2 var(--kr) !important;color:#fff !important;text-shadow:0 1px 8px rgba(0,0,0,.55)} #app .syn2 .sy-core-t b{font-size:clamp(17px,1.4vw,21px) !important} #app .syn2 .syn-go{gap:12px !important;margin-top:clamp(28px,3vw,44px) !important;padding:18px 30px !important;border-radius:999px !important; background:#fd4533 !important;color:#fff !important;font:700 clamp(15px,1.2vw,17px)/1 var(--kr) !important;letter-spacing:-.02em; box-shadow:0 14px 36px -12px rgba(253,69,51,.75),inset 0 1px 0 rgba(255,255,255,.3) !important;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s !important} #app .syn2 .syn-go:hover,#app .syn2 .syn-go:focus-visible{background:#ff5843 !important;transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(253,69,51,.85),inset 0 1px 0 rgba(255,255,255,.35) !important} #app .syn2 .syn-go svg,#app .syn2 .syn-go span[aria-hidden]{transition:transform .45s cubic-bezier(.22,1,.36,1)} #app .syn2 .syn-go:hover svg,#app .syn2 .syn-go:hover span[aria-hidden]{transform:translateX(4px)} /* Services 아래: 인피니티 트랙 — 스크롤하면 화면이 잠시 고정되고, 빛나는 에너지가 01→03으로 이동하며 노드가 켜짐 */ /* (구) 인피니티 트랙 규칙은 아래 v2로 대체 */ /* Services 카드 Before → After 고도화: 차이를 또렷하게, 움직임은 부드럽게 */ #app .svx-row:not(.is-one){transition:transform .8s cubic-bezier(.22,1,.36,1),box-shadow .8s cubic-bezier(.22,1,.36,1),background-color .6s ease !important;will-change:transform} #app .svx-row:not(.is-one):hover,#app .svx-row:not(.is-one):focus-visible, #app .svx-row:not(.is-one).is-hot{transform:translateY(-8px) !important;box-shadow:inset 0 0 0 1px rgba(253,69,51,.55),0 30px 60px -32px rgba(253,69,51,.55) !important} #app .svx-row:not(.is-one) .svx-fill{opacity:0 !important;background:radial-gradient(120% 70% at 50% 110%,rgba(253,69,51,.42),rgba(253,69,51,.1) 45%,rgba(253,69,51,0) 75%) !important;transition:opacity .8s cubic-bezier(.22,1,.36,1) !important} #app .svx-row:not(.is-one):hover .svx-fill,#app .svx-row:not(.is-one):focus-visible .svx-fill,#app .svx.is-after .svx-row:not(.is-one) .svx-fill, #app .svx-row:not(.is-one).is-hot .svx-fill{opacity:1 !important} /* 라벨: BEFORE(회색 알약) ↔ AFTER AX(키컬러 알약) */ #app .sv-ba small{display:inline-flex !important;align-items:center;gap:6px;width:max-content;padding:6px 10px;border-radius:999px;font:700 11px/1 var(--kr) !important;letter-spacing:.02em !important} #app .sv-ba .sv-pain small{background:rgba(255,255,255,.08);color:rgba(255,255,255,.62) !important} #app .sv-ba .sv-pain small::before{content:'BEFORE';font:800 10px/1 var(--en);letter-spacing:.12em;color:rgba(255,255,255,.45)} #app .sv-ba .sv-sol small{background:#fd4533;color:#fff !important} #app .sv-ba .sv-sol small::before{content:'AFTER AX';font:800 10px/1 var(--en);letter-spacing:.12em;color:rgba(255,255,255,.75)} /* 전환: 고민은 흐려지며 위로 사라지고, 해결은 살짝 늦게 아래에서 또렷하게 */ #app .sv-ba>.sv-pain,#app .sv-ba>.sv-sol{transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .55s ease !important;will-change:opacity,transform} #app .svx-row:hover .sv-pain,#app .svx-row:focus-visible .sv-pain,#app .svx.is-after .sv-pain, #app .svx-row.is-hot .sv-pain{opacity:0 !important;transform:translateY(-20px) scale(.98) !important;filter:blur(6px)} #app .sv-ba .sv-sol{transform:translateY(24px) !important;filter:blur(6px)} #app .svx-row:hover .sv-sol,#app .svx-row:focus-visible .sv-sol,#app .svx.is-after .sv-sol, #app .svx-row.is-hot .sv-sol{opacity:1 !important;transform:none !important;filter:none;transition-delay:.1s !important} #app .sv-ba .sv-sol b{font-size:clamp(17px,1.45vw,21px) !important;line-height:1.35 !important} #app .svx-row:hover .sv-sol small,#app .svx-row:focus-visible .sv-sol small, #app .svx-row.is-hot .sv-sol small{color:#fff !important} @media (prefers-reduced-motion:reduce){#app .sv-ba>.sv-pain,#app .sv-ba>.sv-sol,#app .svx-row:not(.is-one){transition:none !important}} /* About: 하이브리드 팀 카피 + Tech Stack 무한 롤링 (로고 대신 도구 이름 워드마크, 두 줄이 서로 반대로 흐름) */ #app #about .hyb-lead{margin:clamp(96px,10vw,160px) auto 0;max-width:1080px;text-align:center;font:700 clamp(24px,2.4vw,36px)/1.4 var(--kr);letter-spacing:-.04em;color:rgba(255,255,255,.72)} #app #about .hyb-lead b{color:#fff;font-weight:800} #app #about .hyb-lead + .crew-inline{margin-top:clamp(44px,4.6vw,72px) !important} #app #about .ts{max-width:1080px;margin:clamp(88px,9vw,140px) auto 0;text-align:center} #app #about .ts-k{margin:0 0 22px;font:600 14px/1 var(--kr);color:rgba(255,255,255,.6)} #app #about .ts-k span{margin-right:10px;font:700 11px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;color:#fd4533} #app #about .ts-lab{margin:18px 0 10px;text-align:left} #app #about .ts-lab b{font:700 10.5px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)} #app #about .ts-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} #app #about .ts-track{display:flex;width:max-content;gap:12px;animation:tsRoll 32s linear infinite} #app #about .ts-r .ts-track{animation-direction:reverse;animation-duration:28s} #app #about .ts-row:hover .ts-track{animation-play-state:paused} #app #about .ts-track span{flex:0 0 auto;padding:16px 26px;border-radius:999px;font:800 clamp(16px,1.4vw,20px)/1 var(--en);letter-spacing:-.02em;color:rgba(255,255,255,.88);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:color .3s,background-color .3s} #app #about .ts-track span:hover{color:#fff;background:rgba(253,69,51,.22)} @keyframes tsRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){#app #about .ts-track{animation:none}} @media (max-width:820px){#app #about .hyb-lead{font-size:21px}#app #about .ts-track span{padding:12px 18px;font-size:15px}} /* Contact · 대화형 진단 폼 (Typeform 스타일): 질문 하나 + 큰 알약 버튼, 슬라이드 전환, 얇은 진행 바 */ :is(#app,#modal) .cv{position:relative;flex:1;display:flex;flex-direction:column;min-height:440px;--prog:0} :is(#app,#modal) .cv-bar{height:3px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden} :is(#app,#modal) .cv-bar i{display:block;height:100%;width:calc(var(--prog)*100%);min-width:8%;background:#fd4533;border-radius:3px;transition:width .7s cubic-bezier(.22,1,.36,1)} :is(#app,#modal) .cv[data-at="3"] .cv-bar i{width:100%} :is(#app,#modal) .cv-top{display:flex;justify-content:space-between;align-items:center;min-height:40px;margin:10px 0 8px} :is(#app,#modal) .cv-count{margin-left:auto;font:600 12px/1 var(--en);letter-spacing:.08em;color:#9a9aa0} :is(#app,#modal) .cv-count b{color:#111} :is(#app,#modal) .cv-back{padding:6px 0;border:0;background:none;font:600 13px/1 var(--kr);color:#6b6b72;cursor:pointer} :is(#app,#modal) .cv-back:hover{color:#fd4533} :is(#app,#modal) .cv-stage{position:relative;flex:1;display:grid} :is(#app,#modal) .cv-step{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateX(48px);pointer-events:none;visibility:hidden;transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1),visibility 0s .7s} :is(#app,#modal) .cv-step.is-past{transform:translateX(-48px)} :is(#app,#modal) .cv-step.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:.12s,.12s,0s} :is(#app,#modal) .cv-q{margin:0 0 28px;font:700 clamp(22px,2vw,30px)/1.35 var(--kr);letter-spacing:-.04em;color:#111} :is(#app,#modal) .cv-q em{font-style:normal;color:#fd4533;margin-right:6px} :is(#app,#modal) .cv-pills{display:flex;flex-wrap:wrap;gap:10px} :is(#app,#modal) .cv-pill{padding:16px 24px;border:0;border-radius:999px;background:#f2f2f4;color:#111;font:600 16px/1.2 var(--kr);letter-spacing:-.02em;cursor:pointer;transition:background-color .3s ease,color .3s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease} :is(#app,#modal) .cv-pill:hover{background:#111;color:#fff;transform:translateY(-2px)} :is(#app,#modal) .cv-pill.on{background:#fd4533;color:#fff;box-shadow:0 14px 30px -14px rgba(253,69,51,.8)} :is(#app,#modal) .cv-form label{display:block;margin-bottom:14px} :is(#app,#modal) .cv-form .ct-send{width:100%} :is(#app,#modal) .cv-done{align-items:center;text-align:center} :is(#app,#modal) .cv-done .cv-q{margin:22px 0 8px} :is(#app,#modal) .cv-sub{margin:0;font:500 16px/1.5 var(--kr);color:#6b6b72} :is(#app,#modal) .cv-confetti{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none} :is(#app,#modal) .cv-check{width:76px;height:76px} :is(#app,#modal) .cv-check circle{fill:none;stroke:#fd4533;stroke-width:3;stroke-dasharray:183;stroke-dashoffset:183} :is(#app,#modal) .cv-check path{fill:none;stroke:#fd4533;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44} :is(#app,#modal) .cv-done.is-on .cv-check circle{transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1) .2s;stroke-dashoffset:0} :is(#app,#modal) .cv-done.is-on .cv-check path{transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) .8s;stroke-dashoffset:0} @media (max-width:820px){:is(#app,#modal) .cv{min-height:400px}:is(#app,#modal) .cv-pill{flex:1 1 100%;text-align:left;padding:15px 20px;font-size:15px}} @media (prefers-reduced-motion:reduce){:is(#app,#modal) .cv-step{transition:none}} :is(#app,#modal) .cv-count::after{content:' / 3';color:#9a9aa0} :is(#app,#modal) .cv-form{flex:0 0 auto !important} /* Partnership 카드 = Our Story 「우리가 지키는 약속」 패널과 같은 질감 (키라이트 + 림 라이트 + 바닥 반사광). 3번(is-key)은 늘 켜짐, 1·2번은 마우스를 올리면 켜짐 */ #app .pm3-card{overflow:hidden;isolation:isolate; background:radial-gradient(90% 70% at 0% 0%,rgba(255,110,90,0),rgba(253,69,51,0) 70%),linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.7)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06) !important; transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1) !important} #app .pm3-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;opacity:0;transition:opacity .7s ease; background:linear-gradient(135deg,rgba(255,140,120,.7),rgba(253,69,51,.12) 35%,rgba(255,255,255,.05) 70%,rgba(253,69,51,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} #app .pm3-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .7s ease; background:radial-gradient(90% 70% at 0% 0%,rgba(255,110,90,.26),rgba(253,69,51,.07) 45%,rgba(253,69,51,0) 70%),radial-gradient(45% 40% at 50% 100%,rgba(253,69,51,.32),rgba(253,69,51,0) 70%)} #app .pm3-card > *{position:relative;z-index:1} #app .pm3-card.is-key::before,#app .pm3-card.is-key::after,#app .pm3-card:hover::before,#app .pm3-card:hover::after{opacity:1} #app .pm3-card.is-key,#app .pm3-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),0 40px 80px -40px rgba(253,69,51,.55) !important} #app .pm3-card.is-key .pm3-no,#app .pm3-card:hover .pm3-no{text-shadow:0 0 18px rgba(253,69,51,.45)} #app .pm3-for{box-shadow:none !important;padding-top:0 !important} #app .pm3-del li{padding:11px 16px !important;font:700 clamp(13px,1vw,15px)/1 var(--kr) !important;letter-spacing:-.02em;color:rgba(255,255,255,.78) !important;background:rgba(255,255,255,.07) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .35s,color .35s} #app .pm3-card.is-key .pm3-del li:first-child{background:#fd4533 !important;color:#fff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -10px rgba(253,69,51,.9)} #app .pm3-del li:hover{background:rgba(255,255,255,.12) !important;color:#fff !important} /* intro 지표: 작은 단위 · 설명 글을 화이트로 깔끔하게, Top 자간 좁게 */ #app #heroIntro .hero-proof b small,#app #heroIntro .hero-proof b small.hp-pre{color:#fff !important;text-shadow:none !important} #app #heroIntro .hero-proof b small.hp-pre{letter-spacing:-.05em !important;font-weight:500 !important} #app #heroIntro .hero-proof > div > span{color:#fff !important;opacity:.92} /* Tech Stack: 상자 없이 로고 + 이름을 모노톤 회색으로, 마우스를 올리면 브랜드 색으로 켜짐 (공간을 적게) */ #app #about .ts-track{gap:clamp(36px,3.6vw,56px) !important;padding:10px 0} #app #about .ts-track span.ts-i{display:inline-flex;align-items:center;gap:10px;padding:0 !important;background:none !important;box-shadow:none !important;border-radius:0 !important; font:700 clamp(17px,1.5vw,22px)/1 var(--en) !important;letter-spacing:-.03em;color:rgba(255,255,255,.38) !important;white-space:nowrap;cursor:default;transition:color .4s ease,filter .4s ease} #app #about .ts-i i{flex:0 0 auto;width:1.15em;height:1.15em;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;transition:background-color .4s ease,filter .4s ease} #app #about .ts-track span.ts-i:hover{color:#fff !important} #app #about .ts-i:hover i{background:var(--c);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 45%,transparent))} #app #about .ts-i:not(:has(i)):hover{color:var(--c) !important} #app #about .ts-lab{margin:14px 0 6px !important} /* 타이포 위계 정리: 작은 라벨은 또렷하게, 핵심 메시지는 크게 */ /* 섹션 라벨(01 Problem 등) */ #app .section-index{font-size:15px !important;color:#fff !important;letter-spacing:.01em} /* Problem: 결론 문장과 근거 숫자를 크게 */ #app .story-foot{font-size:clamp(20px,1.6vw,24px) !important;font-weight:600 !important;color:#fff !important;line-height:1.55 !important} #app .story-stats > div > b{font-size:clamp(40px,3.8vw,58px) !important;letter-spacing:-.04em;line-height:1 !important} #app .story-stats > div{font-size:15px !important;color:rgba(255,255,255,.82) !important} /* Services 위 한 줄, Process 설명, Our Story 머리말, 마지막 CTA 설명 */ #app .svx-kicker{font-size:clamp(19px,1.5vw,23px) !important;font-weight:700 !important;color:#fff !important} #app .ps-sub{font-size:clamp(18px,1.35vw,21px) !important;color:rgba(255,255,255,.86) !important;line-height:1.6 !important} #app #about > .wrap > .tag,#app #about .tag.rv{font-size:clamp(15px,1.2vw,18px) !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.01em} #app #blocks h3 + p,#app #blocks h3 ~ p{font-size:clamp(17px,1.3vw,20px) !important;color:rgba(255,255,255,.86) !important;line-height:1.6 !important} /* HL 서브 슬로건 설명은 조금 더 밝게 */ #app .hl .kc p{color:rgba(255,255,255,.84) !important} /* Partnership 카드 안 작은 라벨 */ #app .pm3-card small{font-size:12.5px !important;color:rgba(255,255,255,.72) !important} #app #about .ts-k span{margin-right:0 !important} /* FAQ 탭 (Our Story 알약 버튼과 같은 결) */ #app .fqt-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(22px,2.2vw,32px)} #app .fqt-tab{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;font:700 clamp(14px,1.1vw,16px)/1 var(--kr);letter-spacing:-.02em;color:rgba(255,255,255,.78);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .35s,color .35s,box-shadow .35s} #app .fqt-tab small{font:700 11px/1 var(--en);color:rgba(255,255,255,.45);transition:color .35s} #app .fqt-tab:hover{background:rgba(255,255,255,.12);color:#fff} #app .fqt-tab.on{background:#fd4533;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -10px rgba(253,69,51,.9)} #app .fqt-tab.on small{color:rgba(255,255,255,.8)} #app .fqt-tab:focus-visible{outline:2px solid #fff;outline-offset:3px} #app .fqt-panel.on{animation:fqtIn .55s cubic-bezier(.22,1,.36,1)} #app .fqt-panel .rv{opacity:1 !important;transform:none !important} @keyframes fqtIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#app .fqt-panel.on{animation:none}} /* Tech Stack: 실제 로고 파일(흰색) */ #app #about .ts-track{align-items:center;gap:clamp(44px,4.4vw,72px) !important} #app #about .ts-logo{display:block;flex:0 0 auto;width:auto;height:calc(var(--h,1) * clamp(24px,2.1vw,32px));opacity:.5;transition:opacity .4s ease,filter .4s ease} #app #about .ts-logo:hover{opacity:1;filter:drop-shadow(0 0 12px rgba(255,255,255,.35))} @media (max-width:820px){#app #about .ts-logo{height:calc(var(--h,1) * 22px)}} /* 상담 팝업 = 대화형 진단 (어두운 판) */ #modal .modal-box .muted{display:none} #modal .modal-box h2{margin-bottom:18px} #modal .cv{min-height:380px} #modal .cv-bar{background:rgba(255,255,255,.1)} #modal .cv-count b{color:#fff} #modal .cv-back{color:rgba(255,255,255,.6)} #modal .cv-q{color:#fff;font-size:clamp(20px,1.7vw,25px)} #modal .cv-pill{background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} #modal .cv-pill:hover{background:rgba(255,255,255,.14);color:#fff} #modal .cv-pill.on{background:#fd4533;color:#fff} #modal .cv-form label span{color:rgba(255,255,255,.75)} #modal .cv-form input{width:100%;box-sizing:border-box;padding:14px 16px;border:0;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font:500 15px/1.3 var(--kr);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);outline:none} #modal .cv-form input:focus{box-shadow:inset 0 0 0 1px rgba(253,69,51,.7)} #modal .cv-form input.err{box-shadow:inset 0 0 0 1px #fd4533} #modal .cv-form .fx2{display:grid;grid-template-columns:1fr 1fr;gap:12px} #modal .cv-form .ct-send{display:block;width:100%;margin-top:6px;padding:17px 20px;border:0;border-radius:999px;background:#fd4533;color:#fff;font:700 16px/1 var(--kr);cursor:pointer} #modal .cv-form .ct-fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.5)} #modal .cv-form .f-err{color:#ff8a7a;font-size:13px;min-height:1em} #modal .cv-sub{color:rgba(255,255,255,.7)} #modal .cv-form .hp{position:absolute;left:-9999px} @media (max-width:600px){#modal .cv-form .fx2{grid-template-columns:1fr}} /* Services 카드 인터랙션 v2: 폭 변화(레이아웃 재계산) 제거, 움직임은 transform만 · 스프링(JS)으로 부드럽게, 마우스를 따라오는 빛 */ #app #services .svx-list li,#app #services .svx-list:hover li{flex-grow:1 !important;transition:none !important} #app #services .svx-list .svx-row{transform:var(--svx-t,none) !important;will-change:transform;backface-visibility:hidden; transition:box-shadow .6s cubic-bezier(.22,1,.36,1),background-color .6s ease,background .6s ease !important} #app #services .svx-list .svx-row:not(.is-one) .svx-fill{background:radial-gradient(70% 60% at var(--mx,50%) var(--my,115%),rgba(253,69,51,.42),rgba(253,69,51,.12) 45%,rgba(253,69,51,0) 75%) !important;transition:opacity .6s cubic-bezier(.22,1,.36,1) !important} #app #services .sv-ba>.sv-pain,#app #services .sv-ba>.sv-sol{transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),filter .38s ease !important} #app #services .svx-row.is-hot .sv-pain,#app #services .svx-row:hover .sv-pain{filter:blur(4px) !important;transform:translateY(-14px) !important} #app #services .sv-ba .sv-sol{filter:blur(4px);transform:translateY(16px) !important} #app #services .svx-row.is-hot .sv-sol,#app #services .svx-row:hover .sv-sol,#app #services .svx.is-after .sv-sol{filter:none !important;transform:none !important;transition-delay:.06s !important} @media (prefers-reduced-motion:reduce){#app #services .svx-list .svx-row{transform:none !important}} /* 첫 화면 카피 위계 정리: 위 한 줄은 가볍게(라벨), 가운데 슬로건이 주인공, 아래 한 줄은 읽히는 본문 + 핵심 구절만 강조 */ #app .wall-hero .wall-eyebrow{font-size:clamp(14px,1.05vw,16px) !important;font-weight:500 !important;color:rgba(255,255,255,.6) !important;letter-spacing:-.01em !important} #app .wall-hero .wall-eyebrow .we-b{font-weight:700;color:#fff} #app .wall-hero .wall-copy .p .k{margin-top:clamp(26px,2.4vw,38px) !important;font-size:clamp(18px,1.5vw,22px) !important;font-weight:400 !important;color:rgba(255,255,255,.74) !important;line-height:1.6 !important;letter-spacing:-.02em !important} #app .wall-hero .wall-copy .p .k b{font-weight:700;color:#fff} @media (max-width:820px){ #app .wall-hero .wall-eyebrow{font-size:12.5px !important} #app .wall-hero .wall-eyebrow .we-b{display:block;margin-top:4px} #app .wall-hero .wall-copy .p .k{font-size:16px !important} #app .wall-hero .wall-eyebrow{top:calc(34% - 158px) !important} } /* 인피니티 트랙 v2 — Problem처럼 한 화면을 꽉 채우는 고정 장면, 끝에 AX ONE이 웅장하게 */ #app .pl{position:relative;height:420vh;margin-top:clamp(56px,6vw,96px);--t:0;--m:0;--o:0;--in:0} #app .pl-stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;display:grid;place-items:center;--t:0;--m:0;--o:0;--in:0} #app .pl-glow{position:absolute;left:50%;top:56%;width:min(140vw,1700px);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.55 + var(--o) * .45));border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(253,69,51,calc(.06 + var(--t) * .08 + var(--o) * .18)),rgba(253,69,51,calc(var(--o) * .05)) 55%,rgba(253,69,51,0) 75%)} /* 제목: Problem과 같은 크기 · 결 */ #app .pl-head{position:absolute;left:0;right:0;top:clamp(84px,13vh,150px);text-align:center;padding:0 var(--pad,24px);opacity:calc(1 - var(--o));transform:translateY(calc(var(--o) * -40px))} #app .pl-k{margin:0;font:700 13px/1 var(--en);letter-spacing:.2em;text-transform:uppercase;color:#fd4533} #app .pl-h{margin:clamp(16px,2vh,24px) 0 0 !important;font:750 clamp(36px,5vw,80px)/1.32 var(--kr) !important;letter-spacing:-.06em !important;color:#fff} #app .pl-mk{background:#fff;color:#111;padding:0 .12em;border-radius:.06em;box-decoration-break:clone;-webkit-box-decoration-break:clone} /* 트랙: 화면 폭 가득 */ #app .pl-track{position:absolute;left:clamp(40px,8vw,140px);right:clamp(40px,8vw,140px);top:58%;height:0;opacity:calc(1 - var(--o) * 1.2)} #app .pl-line,#app .pl-fill{position:absolute;left:0;top:-1.5px;height:3px;border-radius:3px} #app .pl-line{right:0;background:rgba(255,255,255,.1);transform-origin:50% 50%;transform:scaleX(calc(1 - var(--m)))} #app .pl-fill{width:calc(var(--t) * 100%);background:linear-gradient(90deg,rgba(253,69,51,.25),#ff5a44);box-shadow:0 0 22px rgba(253,69,51,.65);opacity:calc(1 - var(--m))} #app .pl-ball{position:absolute;top:0;left:calc(var(--t) * 100%);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;opacity:calc(1 - var(--m)); background:radial-gradient(circle,#fff 0 22%,#ff8f80 40%,#fd4533 62%,rgba(253,69,51,0) 72%);box-shadow:0 0 30px 10px rgba(253,69,51,.55),0 0 90px 24px rgba(253,69,51,.25)} #app .pl-node{position:absolute;top:0;left:calc((var(--x) + (.5 - var(--x)) * var(--m)) * 100%);transform:translate(-50%,calc(-1 * clamp(52px,5.4vw,84px)));display:flex;flex-direction:column;align-items:center;width:clamp(180px,22vw,320px);text-align:center} #app .pl-dot{position:relative;display:grid;place-items:center;width:clamp(104px,10.8vw,168px);aspect-ratio:1;border-radius:50%;background:rgba(18,18,22,.92);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);transition:box-shadow .6s,background-color .6s} #app .pl-dot::after{content:"";position:absolute;inset:-14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(253,69,51,.5);opacity:0;transform:scale(.85);transition:opacity .6s,transform .9s cubic-bezier(.22,1,.36,1)} #app .pl-dot b{font:800 clamp(24px,2.3vw,36px)/1 var(--en);color:rgba(255,255,255,.4);transition:color .4s} #app .pl-name{margin-top:clamp(18px,2vw,28px);font:800 clamp(22px,2.4vw,40px)/1 var(--en);letter-spacing:-.04em;color:rgba(255,255,255,.35);transition:color .5s;opacity:calc(1 - var(--m))} #app .pl-pop{margin-top:clamp(10px,1.2vw,16px);font:700 clamp(17px,1.6vw,24px)/1.35 var(--kr);font-style:normal;letter-spacing:-.03em;color:#fff;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .45s,transform .7s cubic-bezier(.34,1.56,.64,1)} #app .pl-node.on .pl-dot{background:#fd4533;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 60px rgba(253,69,51,.65),0 30px 60px -20px rgba(253,69,51,.6)} #app .pl-node.on .pl-dot::after{opacity:1;transform:none} #app .pl-node.on .pl-dot b{color:#fff} #app .pl-node.on .pl-name{color:#fff} #app .pl-node.on .pl-pop{opacity:calc(1 - var(--m) * 1.6);transform:none} /* AX ONE: 세 노드가 모인 자리에서 거대하게 */ #app .pl-one{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad,24px);opacity:var(--o);pointer-events:none} #app .pl.done .pl-one{pointer-events:auto} #app .pl-orbit{position:absolute;left:50%;top:50%;width:min(118vh,96vw);height:auto;transform:translate(-50%,-50%) scale(calc(.6 + var(--o) * .4)) rotate(calc(var(--o) * 40deg));overflow:visible} #app .pl-orbit circle{fill:none;stroke-width:1} #app .pl-orbit .o1{stroke:rgba(255,255,255,.07)} #app .pl-orbit .o2{stroke:rgba(253,69,51,.28);stroke-dasharray:2 10} #app .pl-orbit .o3{stroke:rgba(255,255,255,.1)} #app .pl-orbit .sat circle{fill:#fd4533;stroke:none;filter:drop-shadow(0 0 8px rgba(253,69,51,.9))} #app .pl-orbit .sat{transform-origin:500px 500px;animation:plOrb 22s linear infinite} #app .pl-orbit .s2{animation-duration:30s;animation-direction:reverse} #app .pl-orbit .s3{animation-duration:16s} @keyframes plOrb{to{transform:rotate(360deg)}} #app .pl-one-k{margin:0;font:700 clamp(13px,1.1vw,16px)/1 var(--en);letter-spacing:.22em;color:rgba(255,255,255,.7);transform:translateY(calc((1 - var(--o)) * 20px))} #app .pl-one-k i{font-style:normal;color:#fd4533;margin:0 .5em} #app .pl-one-w{margin:clamp(10px,2vh,22px) 0 0;font:800 clamp(96px,17vw,280px)/.86 var(--en);letter-spacing:-.065em;color:#fff; background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 20px 60px rgba(253,69,51,.35));transform:scale(calc(.82 + var(--o) * .18));letter-spacing:calc(-.065em + (1 - var(--o)) * .12em)} #app .pl-one-s{margin:clamp(20px,3vh,34px) 0 0;font:400 clamp(17px,1.45vw,22px)/1.6 var(--kr);letter-spacing:-.02em;color:rgba(255,255,255,.74);transform:translateY(calc((1 - var(--o)) * 24px))} #app .pl-one-s b{color:#fff;font-weight:700} #app .pl-one-cta{margin-top:clamp(22px,3.4vh,36px);display:inline-flex;align-items:center;gap:10px;padding:17px 28px;border-radius:999px;background:#fd4533;color:#fff;font:700 16px/1 var(--kr);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 40px -14px rgba(253,69,51,.9);transform:translateY(calc((1 - var(--o)) * 30px));transition:box-shadow .4s} #app .pl-one-cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 50px -12px rgba(253,69,51,1)} @media (max-width:820px){ #app .pl{height:380vh} #app .pl-head{top:clamp(80px,12vh,120px)} #app .pl-h{font-size:clamp(28px,7.6vw,40px) !important} #app .pl-track{left:56px;right:56px;top:60%} #app .pl-node{width:120px;transform:translate(-50%,-38px)} #app .pl-dot{width:76px} #app .pl-dot::after{inset:-8px} #app .pl-name{font-size:15px;margin-top:14px} #app .pl-pop{font-size:13px} #app .pl-one-w{font-size:clamp(76px,24vw,120px)} #app .pl-one-s{font-size:15px} #app .pl-one-s br{display:none} } @media (prefers-reduced-motion:reduce){#app .pl-orbit .sat{animation:none}} /* 전환 정리: 제목은 모이는 동안 사라지고, 이름 · 문구는 겹치기 전에 먼저 사라짐 */ #app .pl-head{opacity:calc(1 - var(--m) * 1.4) !important;transform:translateY(calc(var(--m) * -36px)) !important} #app .pl-name{opacity:calc(1 - var(--m) * 3) !important} #app .pl-node.on .pl-pop{opacity:calc(1 - var(--m) * 3) !important} #app .pl-one-w{white-space:nowrap} #app .pl-one-cta{white-space:nowrap} @media (max-width:820px){ #app .pl-one-k{font-size:11px;letter-spacing:.14em} #app .pl-one-w{font-size:clamp(64px,19vw,110px) !important} #app .pl-one-cta{font-size:15px;padding:15px 22px} } /* Contact · 대화형 진단 v2 (채팅) — 흰 카드(하단)와 어두운 팝업 공용, 색은 변수로 */ .cvx{--ink:#111;--sub:#6b6b72;--line:rgba(0,0,0,.08);--bot:#f2f2f4;--pill:#fff;--pillb:rgba(0,0,0,.12);--field:#f4f4f6;position:relative;display:flex;flex-direction:column;--prog:0} #modal .cvx{--ink:#fff;--sub:rgba(255,255,255,.6);--line:rgba(255,255,255,.1);--bot:rgba(255,255,255,.07);--pill:rgba(255,255,255,.04);--pillb:rgba(255,255,255,.16);--field:rgba(255,255,255,.07)} .cvx-head{display:flex;align-items:center;gap:12px} .cvx-av{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#111;box-shadow:0 0 0 3px rgba(253,69,51,.18)} .cvx-av img{width:26px;height:auto} #modal .cvx-av{background:#fd4533;box-shadow:0 0 0 3px rgba(253,69,51,.25)} .cvx-who{display:flex;flex-direction:column;gap:4px} .cvx-who b{font:800 16px/1.1 var(--kr);letter-spacing:-.03em;color:var(--ink)} .cvx-who small{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--kr);color:var(--sub)} .cvx-who small i{width:7px;height:7px;border-radius:50%;background:#2fd06b;box-shadow:0 0 0 3px rgba(47,208,107,.18)} .cvx-count{margin-left:auto;font:700 12px/1 var(--en);letter-spacing:.06em;color:var(--sub)} .cvx-count b{color:var(--ink)} .cvx-count::after{content:' / 3'} .cvx.is-done .cvx-count{visibility:hidden} .cvx-bar{height:3px;margin:16px 0 4px;border-radius:3px;background:var(--line);overflow:hidden} .cvx-bar i{display:block;height:100%;width:calc(max(var(--prog),.06) * 100%);background:#fd4533;border-radius:3px;transition:width .8s cubic-bezier(.22,1,.36,1)} .cvx-thread{display:flex;flex-direction:column;gap:12px;padding-top:18px} /* 말풍선 */ .cvx-bot,.cvx-me{max-width:88%;animation:cvxIn .5s cubic-bezier(.22,1,.36,1) both} .cvx-bot p,.cvx-me p{margin:0;padding:14px 18px;font:500 clamp(15px,1.15vw,17px)/1.55 var(--kr);letter-spacing:-.02em} .cvx-bot p{background:var(--bot);color:var(--ink);border-radius:4px 20px 20px 20px} .cvx-bot b{font-weight:700} .cvx-me{align-self:flex-end;display:flex;align-items:center;gap:8px} .cvx-me p{background:#fd4533;color:#fff;font-weight:700;border-radius:20px 4px 20px 20px} .cvx-edit{all:unset;cursor:pointer;font:600 12px/1 var(--kr);color:var(--sub);padding:6px 4px;opacity:0;transition:opacity .3s} .cvx-me:hover .cvx-edit,.cvx-edit:focus-visible{opacity:1} .cvx-edit:hover{color:#fd4533} @keyframes cvxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 단계: 지난 단계 = 질문 + 내 답, 지금 단계 = 타이핑 → 질문 → 선택지, 다음 단계 = 숨김 */ .cvx-step{display:flex;flex-direction:column;gap:12px} .cvx-step.is-next{display:none} .cvx-step .cvx-me{display:none} .cvx-step.is-past .cvx-me{display:flex} .cvx-step.is-past .cvx-pills,.cvx-step.is-past .cvx-form{display:none} .cvx-step.is-on:not(.typed) .cvx-bot p{position:relative;color:transparent;width:74px;height:22px;overflow:hidden;padding:14px 18px;white-space:nowrap} .cvx-step.is-on:not(.typed) .cvx-bot p *{visibility:hidden} .cvx-step.is-on:not(.typed) .cvx-bot p::after{content:"";position:absolute;left:18px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sub);box-shadow:12px 0 0 var(--sub),24px 0 0 var(--sub);animation:cvxDot 1s infinite} @keyframes cvxDot{50%{opacity:.35}} .cvx-step.is-on:not(.typed) .cvx-pills,.cvx-step.is-on:not(.typed) .cvx-form{opacity:0;transform:translateY(8px);pointer-events:none} .cvx-pills,.cvx-form{transition:opacity .5s ease .1s,transform .6s cubic-bezier(.22,1,.36,1) .1s} .cvx-pills{display:flex;flex-wrap:wrap;gap:8px;padding-left:2px} .cvx-pill{all:unset;cursor:pointer;padding:13px 18px;border-radius:999px;background:var(--pill);box-shadow:inset 0 0 0 1px var(--pillb);color:var(--ink);font:600 15px/1.2 var(--kr);letter-spacing:-.02em;transition:background-color .3s,color .3s,box-shadow .3s,transform .35s cubic-bezier(.22,1,.36,1)} .cvx-pill:hover{box-shadow:inset 0 0 0 1.5px #fd4533;color:#fd4533;transform:translateY(-2px)} #modal .cvx-pill:hover{color:#fff} .cvx-pill.on{background:#fd4533;color:#fff;box-shadow:none} .cvx-pill:focus-visible{outline:2px solid #fd4533;outline-offset:2px} /* 연락처 */ .cvx-form{display:flex;flex-direction:column;gap:10px;margin-top:2px} .cvx-form label{display:flex;flex-direction:column;gap:6px} .cvx-form label span{font:600 12.5px/1 var(--kr);color:var(--sub)} .cvx-form label small{font-weight:500} .cvx-f2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cvx-form input{width:100%;box-sizing:border-box;padding:14px 16px;border:0;border-radius:12px;background:var(--field);color:var(--ink);font:500 15px/1.3 var(--kr);outline:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .25s} .cvx-form input::placeholder{color:var(--sub);opacity:.7} .cvx-form input:focus{box-shadow:inset 0 0 0 1.5px #fd4533} .cvx-form input.err{box-shadow:inset 0 0 0 1.5px #fd4533} .cvx-form .hp{position:absolute;left:-9999px;width:1px;height:1px} .cvx-form .f-err{margin:0;min-height:1em;font-size:13px;color:#e5402f} .cvx-send{all:unset;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:10px;padding:17px 20px;border-radius:999px;background:#fd4533;color:#fff;font:700 16px/1 var(--kr);box-shadow:0 14px 30px -14px rgba(253,69,51,.9);transition:transform .3s,box-shadow .3s} .cvx-send:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(253,69,51,1)} .cvx-fine{margin:2px 0 0;text-align:center;font-size:12px;color:var(--sub)} /* 완료 */ .cvx-done{position:relative} .cvx-confetti{position:absolute;left:-30px;right:-30px;bottom:-30px;width:calc(100% + 60px);height:420px;pointer-events:none} .cvx-ok{display:flex;align-items:center;gap:12px;max-width:100%} .cvx-ok p{background:transparent !important;padding:0 !important;font-size:16px} .cvx-check{flex:0 0 auto;width:52px;height:52px} .cvx-check circle{fill:none;stroke:#fd4533;stroke-width:3;stroke-dasharray:183;stroke-dashoffset:183;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1) .1s} .cvx-check path{fill:none;stroke:#fd4533;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) .7s} .cvx-done.is-on .cvx-check circle,.cvx-done.is-on .cvx-check path{stroke-dashoffset:0} .cvx-done.is-on:not(.typed) .cvx-ok{opacity:1} .cvx-done .cvx-ok p{color:var(--ink)} /* 하단 흰 카드: 내용 높이에 맞추고 위쪽 제목과 간격 */ #app .ct-card .cvx{margin-top:4px} #app .ct-card h3{margin-bottom:18px !important} @media (max-width:600px){.cvx-f2{grid-template-columns:1fr}.cvx-bot,.cvx-me{max-width:96%}.cvx-pill{font-size:14px;padding:12px 16px}} @media (prefers-reduced-motion:reduce){.cvx-bot,.cvx-me{animation:none}.cvx-step.is-on .cvx-pills,.cvx-step.is-on .cvx-form{opacity:1 !important;transform:none !important}} .cvx-av{background:#fd4533 !important;color:#fff;font:800 14px/1 var(--en);letter-spacing:-.02em;box-shadow:0 0 0 3px rgba(253,69,51,.18),0 8px 18px -8px rgba(253,69,51,.8) !important} /* intro: 제목은 다른 섹션과 같은 줄 단위 마스크 리빌, 설명은 아래에서 */ #app #heroIntro .ih-t{margin:0;font:inherit;letter-spacing:inherit;color:inherit} #app #heroIntro .ih-t .mask{display:block;overflow:hidden;padding-bottom:.06em} #app #heroIntro .ih-s{display:block;margin-top:clamp(18px,1.8vw,26px)} /* 숫자: 슬롯처럼 굴러서 멈춤(자릿수마다 차례로) → 단위 · 설명이 뒤따라 등장, 마우스를 올리면 다시 굴러감 */ #app .hero-proof .odo{display:inline-flex;line-height:1;height:1em;overflow:hidden;vertical-align:baseline} #app .hero-proof .odo-c{display:block;height:1em;overflow:hidden} #app .hero-proof .odo-s{display:flex;flex-direction:column;transform:translateY(0);will-change:transform} #app .hero-proof .odo-s i{display:block;height:1em;line-height:1;font-style:normal;text-align:center} #app .hero-proof.go .odo-s{transform:translateY(calc(var(--n) * -1em));transition:transform calc(1.6s + var(--j) * .25s) cubic-bezier(.16,1,.3,1) calc(var(--i) * .14s + var(--j) * .08s)} #app .hero-proof > div > b small{opacity:0;transform:translateY(.4em) scale(.8);transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * .14s + 1.2s)} #app .hero-proof > div > span{opacity:0 !important;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * .14s + .5s)} #app .hero-proof.go > div > b small{opacity:1;transform:none} #app .hero-proof.go > div > span{opacity:.92 !important;transform:none} #app .hero-proof > div{cursor:default} #app .hero-proof > div > b{transition:text-shadow .6s ease} #app .hero-proof > div:hover > b{text-shadow:0 0 40px rgba(253,69,51,.35)} @media (prefers-reduced-motion:reduce){#app .hero-proof .odo-s{transform:translateY(calc(var(--n) * -1em)) !important;transition:none !important}#app .hero-proof > div > b small,#app .hero-proof > div > span{opacity:1 !important;transform:none !important}} #app #heroIntro .ih-t{font:700 clamp(30px,3.4vw,54px)/1.22 var(--kr) !important;letter-spacing:-.05em !important;color:#fff !important} #app #heroIntro .ih-t .mask{padding-bottom:0;line-height:1.22} #app #heroIntro .ih-t .mask>span{display:block} #app #heroIntro .hero-proof b>span.odo{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;-webkit-text-fill-color:#fff !important;color:#fff !important;line-height:1 !important;padding:0 !important;display:inline-flex !important;height:1em} #app #heroIntro .hero-proof .odo-c,#app #heroIntro .hero-proof .odo-s,#app #heroIntro .hero-proof .odo-s i{-webkit-text-fill-color:#fff;color:#fff;background:none} #app #heroIntro .ih-t *{font-size:inherit !important;line-height:inherit !important;letter-spacing:inherit !important}#app #heroIntro .ih-t .mask>span{color:#fff !important}#app #heroIntro .ih-t em{color:#fd4533 !important} #app #heroIntro .intro-heading .ih-t span,#app #heroIntro .intro-heading .ih-t em{font:inherit !important;letter-spacing:inherit !important;line-height:inherit !important} #app #heroIntro .intro-heading .ih-t .mask{margin:0 !important;padding:0 0 .05em !important}#app #heroIntro .intro-heading .ih-t .mask>span{margin:0 !important;padding:0 !important;display:block !important}#app #heroIntro .intro-heading .ih-s{margin-top:clamp(20px,2vw,28px) !important} /* ===== 전체 점검 (배경 · 간격 · 제목 등장 통일) ===== */ /* 인피니티 트랙: 빛과 궤도가 고정 화면 가장자리에서 잘리지 않게 — 화면 안에서 완전히 사라지는 크기로 */ #app .pl-glow{width:min(100svh,96vw) !important;transform:translate(-50%,-50%) scale(calc(.75 + var(--o) * .25)) !important; background:radial-gradient(closest-side,rgba(253,69,51,calc(.07 + var(--t) * .08 + var(--o) * .16)),rgba(253,69,51,calc(var(--o) * .04)) 60%,rgba(253,69,51,0) 100%) !important} #app .pl-orbit{width:min(86svh,92vw) !important} /* 섹션 사이 간격을 같은 리듬으로 (위아래 각각 같은 값) */ #app section.sec{padding-top:clamp(96px,10vw,144px) !important;padding-bottom:clamp(96px,10vw,144px) !important} #app section.sec.contact{padding-bottom:clamp(96px,10vw,140px) !important} /* 제목 등장 통일: HL 제목과 같은 '아래에서 가림막을 밀고 올라오는' 방식 */ #app .tl-rv{clip-path:inset(0 -6% 100% -6%);transform:translateY(.38em) rotate(1.2deg);transform-origin:0 100%;opacity:1 !important; transition:clip-path 1.15s cubic-bezier(.22,1,.36,1),transform 1.25s cubic-bezier(.22,1,.36,1) !important} #app .tl-rv.tl-in{clip-path:inset(-20% -6% -30% -6%);transform:none} @media (prefers-reduced-motion:reduce){#app .tl-rv{clip-path:none;transform:none;transition:none !important}} #app .ct-grid{align-items:start !important}#app .ct-card{align-self:start} /* 인피니티 트랙 v3 — 촌스러움 덜기: 빨간 덩어리 · 그라데이션 글자 · 넓은 빛 대신 헤어라인 · 여백 · 한 점의 키컬러 */ #app .pl-glow{background:radial-gradient(closest-side,rgba(253,69,51,calc(.03 + var(--o) * .07)),rgba(253,69,51,0) 100%) !important} #app .pl-k{font:600 12px/1 var(--en) !important;letter-spacing:.32em !important;color:rgba(255,255,255,.5) !important} #app .pl-h em{font-style:normal;color:#fd4533} /* 선: 1px 헤어라인, 채워지는 선도 얇게 · 빛은 혜성 꼬리처럼 짧게 */ #app .pl-line{height:1px !important;top:0 !important;background:rgba(255,255,255,.12) !important} #app .pl-fill{height:1px !important;top:0 !important;background:linear-gradient(90deg,rgba(253,69,51,0),#fd4533) !important;box-shadow:none !important} #app .pl-ball{width:7px !important;height:7px !important;margin:-3.5px 0 0 -3.5px !important;background:#fff !important; box-shadow:0 0 0 4px rgba(253,69,51,.18),0 0 18px 4px rgba(253,69,51,.55),-60px 0 40px -10px rgba(253,69,51,.25) !important} /* 노드: 채운 원 대신 얇은 링 + 작은 숫자, 켜지면 링만 키컬러로 */ #app .pl-node{transform:translate(-50%,-50%) !important} #app .pl-dot{width:clamp(76px,7vw,108px) !important;background:#121215 !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important;transition:box-shadow .7s ease,transform .9s cubic-bezier(.22,1,.36,1) !important} #app .pl-dot::after{inset:-10px !important;box-shadow:inset 0 0 0 1px rgba(253,69,51,.35) !important} #app .pl-dot b{font:500 clamp(13px,1vw,15px)/1 var(--en) !important;letter-spacing:.12em !important;color:rgba(255,255,255,.45) !important} #app .pl-node.on .pl-dot{background:#121215 !important;box-shadow:inset 0 0 0 1px #fd4533,0 0 40px -6px rgba(253,69,51,.45) !important;transform:scale(1.04)} #app .pl-node.on .pl-dot b{color:#fff !important} #app .pl-name{position:absolute;top:calc(100% + clamp(22px,2.4vw,34px));font:700 clamp(22px,2.2vw,34px)/1 var(--en) !important;letter-spacing:-.04em !important;color:rgba(255,255,255,.3) !important;white-space:nowrap} #app .pl-node.on .pl-name{color:#fff !important} #app .pl-pop{position:absolute;top:calc(100% + clamp(66px,6.4vw,90px));white-space:nowrap;font:500 clamp(15px,1.25vw,18px)/1.4 var(--kr) !important;color:rgba(255,255,255,.72) !important;transform:translateY(10px) !important;transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1) !important} #app .pl-node.on .pl-pop{transform:none !important} /* AX ONE: 그라데이션 · 그림자 없이 순백의 단단한 글자, 헤어라인 궤도에 점 하나 */ #app .pl-one-k{font:500 clamp(12px,.95vw,14px)/1 var(--en) !important;letter-spacing:.34em !important;color:rgba(255,255,255,.55) !important} #app .pl-one-k i{color:#fd4533 !important;margin:0 .7em !important} #app .pl-one-w{background:none !important;-webkit-text-fill-color:#fff !important;filter:none !important;font-weight:700 !important;letter-spacing:calc(-.06em + (1 - var(--o)) * .25em) !important} #app .pl-orbit .o1,#app .pl-orbit .o2,#app .pl-orbit .o3{stroke:rgba(255,255,255,.07) !important;stroke-dasharray:none !important} #app .pl-orbit .o2{stroke:rgba(255,255,255,.1) !important} #app .pl-orbit .o-tick{stroke:rgba(255,255,255,.25);stroke-width:1;fill:none} #app .pl-orbit .sat{animation-duration:26s !important} #app .pl-orbit .sat circle{fill:#fd4533;filter:drop-shadow(0 0 6px rgba(253,69,51,.8))} #app .pl-one-s{color:rgba(255,255,255,.62) !important} #app .pl-one-cta{padding:15px 26px !important;font-size:15px !important;box-shadow:0 14px 30px -16px rgba(253,69,51,.8) !important} @media (max-width:820px){#app .pl-dot{width:60px !important}#app .pl-name{font-size:15px !important;top:calc(100% + 16px)}#app .pl-pop{top:calc(100% + 44px);font-size:12.5px !important;white-space:normal;width:110px;text-align:center}} /* 제목은 빨간 덩어리 대신 톤 대비: 앞은 낮게, 핵심만 흰색 + 한 단어만 키컬러 */ #app .pl-h{color:rgba(255,255,255,.42) !important} #app .pl-h em{color:#fff !important} #app .pl-h em::first-letter{color:inherit} @media (max-width:820px){#app .pl-one-k{letter-spacing:.16em !important;white-space:nowrap;font-size:10.5px !important}#app .pl-one-k i{margin:0 .4em !important}} /* 검토 의견 반영 */ #app .wall-hero .wall-eyebrow{color:rgba(255,255,255,.78) !important} #app .ax-def{margin:0 0 clamp(18px,2vw,28px);font:500 clamp(13px,1vw,15px)/1.5 var(--kr);letter-spacing:-.01em;color:rgba(255,255,255,.82)} #app .ax-def b{font:700 1em/1 var(--en);color:#fd4533;letter-spacing:.02em} #app #heroIntro .hp-note{margin:clamp(22px,2.4vw,34px) 0 0;font:400 12.5px/1.5 var(--kr);color:rgba(255,255,255,.5)} .cvx-agree{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:10px !important;margin-top:2px;cursor:pointer} .cvx-agree input{flex:0 0 auto;width:18px !important;height:18px;margin:2px 0 0;padding:0 !important;accent-color:#fd4533;box-shadow:none !important} .cvx-agree>span{display:flex;flex-direction:column;gap:4px;font:600 13px/1.45 var(--kr) !important;color:var(--ink) !important} .cvx-agree a{color:#fd4533;text-decoration:underline;text-underline-offset:2px} .cvx-agree small{font:400 11.5px/1.5 var(--kr);color:var(--sub)} #app .ct-priv{margin:14px 0 0;font-size:13px} #app .ct-priv a,.ft-priv{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:3px} .ft-priv{margin-left:14px} #app .privacy .wrap{max-width:860px} #app .privacy .pv-h{margin:18px 0 0;font:800 clamp(34px,4vw,56px)/1.2 var(--kr);letter-spacing:-.05em;color:#fff} #app .privacy .pv-lead{margin:22px 0 0;font:400 16px/1.75 var(--kr);color:rgba(255,255,255,.78)} #app .privacy .pv-list{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-direction:column;gap:30px;counter-reset:pv} #app .privacy .pv-list li{counter-increment:pv;padding-top:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} #app .privacy .pv-list h2{margin:0;font:700 19px/1.4 var(--kr);color:#fff} #app .privacy .pv-list h2::before{content:counter(pv,decimal-leading-zero);margin-right:12px;font:700 13px/1 var(--en);color:#fd4533} #app .privacy .pv-list p{margin:10px 0 0;font:400 15.5px/1.75 var(--kr);color:rgba(255,255,255,.76)} #app .privacy a{color:#fff} #app .privacy .pv-back{display:inline-block;margin-top:48px;color:#fd4533;text-decoration:none;font-weight:700} /* 상황별 선택 (히어로 아래, 카드 6장 펼침) */ #app .pk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin:18px 0 clamp(32px,3.6vw,52px)} #app .pk-h{margin:0;font:750 clamp(32px,3.6vw,56px)/1.2 var(--kr);letter-spacing:-.05em;color:#fff} #app .pk-s{margin:0;max-width:30em;font:400 clamp(15px,1.15vw,17px)/1.65 var(--kr);color:rgba(255,255,255,.72)} #app .pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)} #app .pk-card{position:relative;display:flex;flex-direction:column;gap:18px;min-height:230px;padding:clamp(24px,2.2vw,32px);border-radius:18px;text-decoration:none;color:#fff; background:linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s} #app .pk-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(253,69,51,.45),0 30px 60px -36px rgba(253,69,51,.5)} #app .pk-ico svg{width:30px;height:30px;color:#fd4533} #app .pk-q{margin:0;flex:1;font:700 clamp(17px,1.35vw,20px)/1.5 var(--kr);letter-spacing:-.03em} #app .pk-a{margin:0;display:flex;align-items:center;gap:10px;padding-top:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} #app .pk-a small{font:500 12px/1 var(--kr);color:rgba(255,255,255,.55)} #app .pk-a b{font:800 16px/1 var(--en);letter-spacing:-.02em;color:#fd4533} #app .pk-a span{margin-left:auto;transition:transform .4s} #app .pk-card:hover .pk-a span{transform:translateX(4px)} @media (max-width:980px){#app .pk-grid{grid-template-columns:1fr 1fr}} @media (max-width:600px){#app .pk-grid{grid-template-columns:1fr}#app .pk-card{min-height:0}} /* AX ONE 페이지 */ #app .one-hero{padding-top:clamp(150px,16vw,220px) !important;text-align:center} #app .one-hero .section-index{justify-content:center} #app .one-k{margin:0;font:500 clamp(12px,.95vw,14px)/1 var(--en);letter-spacing:.34em;color:rgba(255,255,255,.55)} #app .one-k i{font-style:normal;color:#fd4533;margin:0 .7em} #app .one-w{margin:16px 0 0;font:700 clamp(96px,16vw,260px)/.86 var(--en);letter-spacing:-.06em;color:#fff} #app .one-s{margin:clamp(22px,3vh,34px) auto 0;max-width:40em;font:400 clamp(17px,1.4vw,21px)/1.65 var(--kr);color:rgba(255,255,255,.72)} #app .one-s b{color:#fff} #app .one-cta{margin-top:30px} #app .oc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)} #app .oc-card{display:flex;flex-direction:column;padding:clamp(26px,2.4vw,34px);border-radius:18px;background:linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06)} #app .oc-n{margin:0;font:700 12px/1 var(--en);letter-spacing:.16em;color:#fd4533} #app .oc-q{margin:16px 0 0 !important;font:750 clamp(19px,1.6vw,24px)/1.45 var(--kr) !important;letter-spacing:-.04em !important;color:#fff} #app .oc-card ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} #app .oc-card li{display:flex;flex-direction:column;gap:4px} #app .oc-card li b{font:800 12.5px/1 var(--en);letter-spacing:.02em;color:rgba(255,255,255,.55)} #app .oc-card li span{font:400 15px/1.6 var(--kr);color:rgba(255,255,255,.82)} #app .oc-res{margin:auto 0 0;padding-top:22px;font:700 16px/1.5 var(--kr);color:#fff} #app .oc-res small{display:block;margin-bottom:6px;font:600 11.5px/1 var(--kr);color:#fd4533} #app .oc-card li span,#app .oc-res{text-wrap:pretty} @media (max-width:980px){#app .oc-grid{grid-template-columns:1fr}} /* main page #cases (same cards, Example 01–03): it continues the leaflet above, so less top padding; plus the small AX ONE link under the cards (left, clear of the floating buttons at the right edge) */ #app #cases{padding-top:clamp(36px,4.2vw,60px) !important} /* questions and the lead split into even lines instead of leaving one word alone (the cards are shared with /one) */ #app .oc-q,#app #cases .pk-s{text-wrap:balance} #app .oc-more{margin:clamp(22px,2.2vw,32px) 0 0;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 18px;font:400 clamp(14.5px,1.05vw,15.5px)/1.6 var(--kr);color:rgba(255,255,255,.62)} #app .oc-more a{display:inline-flex;align-items:center;gap:8px;padding:10px 0;font-weight:600;color:#fff;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:color .3s} #app .oc-more a span{transition:transform .3s} #app .oc-more a:hover,#app .oc-more a:focus-visible{color:#fd4533} #app .oc-more a:hover span,#app .oc-more a:focus-visible span{transform:translateX(4px)} #app .oc-more a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px} @media (prefers-reduced-motion:reduce){#app .oc-more a,#app .oc-more a span{transition:none}#app .oc-more a:hover span,#app .oc-more a:focus-visible span{transform:none}} /* 문의 영역 하단 회사 정보: 오른쪽 칸이 아니라 카드 아래에서 화면 끝까지 길게 */ #app .ct-co.ct-co-full{max-width:none !important;margin-top:clamp(64px,7vw,110px) !important;padding-top:clamp(36px,3.4vw,52px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1); display:grid;grid-template-columns:minmax(220px,auto) 1fr;column-gap:clamp(40px,6vw,110px);row-gap:28px;align-items:start} #app .ct-co-full .ct-logo{grid-column:1;grid-row:1 / span 2;margin:4px 0 0 !important} #app .ct-co-full dl{grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px) !important;row-gap:14px !important;position:relative;z-index:1} #app .ct-co-full dl>div{grid-template-columns:1fr !important;gap:4px !important} #app .ct-co-full .ct-priv,#app .ct-co-full .ct-nav,#app .ct-co-full .ct-copy{grid-column:2;margin:0 !important;position:relative;z-index:1} #app .ct-co-full .ct-brick{position:absolute;right:0;bottom:0;width:clamp(200px,20vw,300px);opacity:.9;pointer-events:none} @media (max-width:980px){#app .ct-co.ct-co-full{grid-template-columns:1fr}#app .ct-co-full .ct-logo,#app .ct-co-full dl,#app .ct-co-full .ct-priv,#app .ct-co-full .ct-nav,#app .ct-co-full .ct-copy{grid-column:1;grid-row:auto}#app .ct-co-full dl{grid-template-columns:1fr 1fr}#app .ct-co-full .ct-brick{display:none}} @media (min-width:981px){ #app .ct-co.ct-co-full{grid-template-columns:minmax(200px,auto) 1fr clamp(200px,19vw,280px)} #app .ct-co-full .ct-brick{position:relative !important;right:auto;bottom:auto;inset:auto !important;grid-column:3;grid-row:1 / span 4;align-self:center;width:100% !important;height:auto;aspect-ratio:1.25;transform:none !important} #app .ct-co-full .ct-brick canvas{width:100% !important;height:100% !important} } /* 상담 팝업 스크롤 정리: 팝업 전체가 아니라 대화 영역만 스크롤, 제목 · 진행 바는 고정, 얇은 스크롤바 */ #modal .modal-box{display:flex !important;flex-direction:column;max-height:min(880px,calc(100svh - 40px)) !important;overflow:hidden !important} #modal .modal-box>.tag,#modal .modal-box>h2,#modal .modal-box>.modal-x{flex:0 0 auto} #modal .form-slot{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} #modal .cvx{flex:1 1 auto;min-height:0} #modal .cvx-head,#modal .cvx-bar{flex:0 0 auto} #modal .cvx-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth; margin-right:-14px;padding:18px 14px 6px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent} #modal .cvx-thread::-webkit-scrollbar{width:6px} #modal .cvx-thread::-webkit-scrollbar-track{background:transparent} #modal .cvx-thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px} #modal .cvx-thread::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)} @media (max-width:600px){#modal .modal-box{max-height:calc(100svh - 24px) !important}#modal .modal-box h2{font-size:20px !important}} /* 상황별 선택 v2 — 차례로 떠오르는 등장, 커서를 따라오는 빛 · 스프링 기울기, 하나에 올리면 나머지는 한발 물러남 */ #app .pk-grid{perspective:1400px} #app .pk-card{overflow:hidden;isolation:isolate;min-height:250px !important;transform:var(--pk-t,none) translateY(var(--pk-y,0px)); opacity:0;--pk-y:40px;transition:opacity .9s ease calc(var(--i) * .08s),--pk-y 1s cubic-bezier(.22,1,.36,1) calc(var(--i) * .08s),box-shadow .6s,filter .5s ease !important;will-change:transform} @property --pk-y{syntax:'';inherits:false;initial-value:0px} #app .pk-grid.in .pk-card{opacity:1;--pk-y:0px} #app .pk-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(253,69,51,.16),rgba(253,69,51,0) 60%)} #app .pk-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,140,120,.9),rgba(253,69,51,.15) 45%,rgba(255,255,255,.04) 70%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} #app .pk-card:hover::before,#app .pk-card:hover::after,#app .pk-card:focus-visible::after{opacity:1} #app .pk-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 34px 70px -40px rgba(253,69,51,.55) !important} #app .pk-grid:hover .pk-card:not(:hover){filter:brightness(.62) saturate(.8)} #app .pk-wm{position:absolute;right:-.06em;bottom:-.2em;z-index:-1;font:800 clamp(80px,8vw,128px)/1 var(--en);letter-spacing:-.06em;color:rgba(255,255,255,.035);pointer-events:none; transform:translateY(12%);transition:transform .9s cubic-bezier(.22,1,.36,1),color .6s ease} #app .pk-card:hover .pk-wm{transform:none;color:rgba(253,69,51,.09)} #app .pk-top{display:flex;align-items:center;justify-content:space-between} #app .pk-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(253,69,51,.08);box-shadow:inset 0 0 0 1px rgba(253,69,51,.22);transition:background-color .5s,transform .7s cubic-bezier(.34,1.56,.64,1)} #app .pk-ico svg{width:22px !important;height:22px !important} #app .pk-card:hover .pk-ico{background:#fd4533;transform:rotate(-8deg) scale(1.06)} #app .pk-card:hover .pk-ico svg{color:#fff} #app .pk-no{font:600 12px/1 var(--en);letter-spacing:.12em;color:rgba(255,255,255,.55)} #app .pk-no i{font-style:normal;color:rgba(255,255,255,.25)} #app .pk-q{font-size:clamp(18px,1.45vw,22px) !important;line-height:1.48 !important;transition:transform .6s cubic-bezier(.22,1,.36,1)} #app .pk-card:hover .pk-q{transform:translateY(-3px)} #app .pk-a b{transition:letter-spacing .5s ease} #app .pk-go{display:grid;place-items:center;width:34px;height:34px;margin-left:auto;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background-color .4s,box-shadow .4s,transform .5s cubic-bezier(.22,1,.36,1) !important} #app .pk-card:hover .pk-go{background:#fd4533;box-shadow:none;transform:translateX(2px) rotate(-45deg)} #app .pk-card.is-one{background:radial-gradient(90% 70% at 0% 0%,rgba(255,110,90,.16),rgba(253,69,51,0) 65%),linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.7)) !important;box-shadow:inset 0 1px 0 rgba(255,140,120,.25),inset 0 0 0 1px rgba(253,69,51,.2) !important} @media (hover:none){#app .pk-grid:hover .pk-card:not(:hover){filter:none}} @media (prefers-reduced-motion:reduce){#app .pk-card{opacity:1;--pk-y:0px;transition:none !important}} #app .story-stats > div > b small,#app .story-stats b small{color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:none !important} /* AX ONE 시너지 모먼트: 세 링이 한 점으로 모이는 순간 → 충격파(세 겹 링) + 은은한 섬광, 궤도 세 겹이 차례로 그려지고, AX ONE은 윤곽선에서 순백으로 채워짐 */ #app .pl{height:470vh !important} #app .pl-stage{--f:0;--r1:0;--r2:0;--r3:0} #app .pl-wave,#app .pl-flash{position:absolute;left:50%;top:58%;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%) scale(.05);opacity:0} #app .pl-wave{width:min(78svh,80vw);aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 24px rgba(253,69,51,.25)} #app .pl-flash{width:min(70svh,70vw);aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,236,230,.55),rgba(253,69,51,.18) 40%,rgba(253,69,51,0) 100%)} #app .pl.burst .pl-wave{animation:plWave 1.9s cubic-bezier(.16,1,.3,1) forwards} #app .pl.burst .pl-wave.w2{animation-delay:.16s} #app .pl.burst .pl-wave.w3{animation-delay:.32s} #app .pl.burst .pl-flash{animation:plFlash 1.4s cubic-bezier(.22,1,.36,1) forwards} @keyframes plWave{0%{opacity:0;transform:translate(-50%,-50%) scale(.05)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}} @keyframes plFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}22%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}} /* 모이는 순간 세 링이 한 점으로 수축 */ #app .pl-node .pl-dot{transform:scale(calc(1 - var(--m) * .55)) !important} #app .pl-node.on .pl-dot{transform:scale(calc(1.04 - var(--m) * .59)) !important} /* 궤도: 세 겹이 차례로 그려지며 천천히 회전 */ #app .pl-orbit .o-rot{transform-origin:500px 500px;animation:plOrb 120s linear infinite} #app .pl-orbit .o1,#app .pl-orbit .o2,#app .pl-orbit .o3{stroke-dasharray:1 !important;stroke-width:1} #app .pl-orbit .o1{stroke-dashoffset:calc(1 - var(--r1));stroke:rgba(255,255,255,.12) !important} #app .pl-orbit .o2{stroke-dashoffset:calc(1 - var(--r2));stroke:rgba(253,69,51,.32) !important} #app .pl-orbit .o3{stroke-dashoffset:calc(1 - var(--r3));stroke:rgba(255,255,255,.1) !important} #app .pl-orbit .sat{opacity:var(--f)} #app .pl-orbit .s1{animation-duration:24s !important} #app .pl-orbit .s2{animation-duration:34s !important;animation-direction:reverse} #app .pl-orbit .s3{animation-duration:18s !important} #app .pl-orbit .s2 circle,#app .pl-orbit .s3 circle{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.7))} /* AX ONE: 윤곽선 → 순백 채움(왼쪽에서 오른쪽으로) */ #app .pl-one-w{position:relative;-webkit-text-fill-color:transparent !important;color:transparent !important;-webkit-text-stroke:1px rgba(255,255,255,calc(.55 * (1 - var(--f) * .7)))} #app .pl-one-w::after{content:attr(data-t);position:absolute;inset:0;-webkit-text-stroke:0;-webkit-text-fill-color:#fff;color:#fff;clip-path:inset(-10% calc((1 - var(--f)) * 100%) -10% 0); text-shadow:0 0 calc(var(--f) * 40px) rgba(253,69,51,calc(.25 * var(--f)))} #app .pl-one-k i{transition:color .4s} @media (prefers-reduced-motion:reduce){#app .pl-wave,#app .pl-flash{display:none}#app .pl-one-w::after{clip-path:none}} /* Problem 하단 정리: 결론 한 줄(굵게) + 보조 한 줄, 숫자 세 칸은 같은 폭 · 같은 기준선 · 얇은 세로선으로 구획, 출처는 맨 아래 작게 */ #app .story-stage .story-foot{display:flex !important;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(28px,3vw,40px) !important;text-align:center} #app .story-stage .story-foot b{font:700 clamp(19px,1.55vw,23px)/1.5 var(--kr);letter-spacing:-.03em;color:#fff} #app .story-stage .story-foot span{font:400 clamp(15px,1.15vw,17px)/1.5 var(--kr);color:rgba(255,255,255,.62)} #app .story-stats{position:static !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 !important;width:min(100%,960px);margin:clamp(40px,4.4vw,64px) auto 0 !important;padding:0 !important;top:auto !important;bottom:auto !important} #app .story-stats>div{display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px !important;min-width:0 !important;padding:6px clamp(16px,2vw,32px) !important;text-align:center} #app .story-stats>div+div{box-shadow:inset 1px 0 0 rgba(255,255,255,.1)} #app .story-stats>div>b{font:800 clamp(44px,4.2vw,64px)/1 var(--en) !important;letter-spacing:-.045em !important;color:#fff} #app .story-stats>div>b small{font-size:.48em !important;font-weight:700;margin-left:.06em} #app .story-stats>div>span{max-width:15em;font:400 clamp(13.5px,1vw,15px)/1.55 var(--kr) !important;color:rgba(255,255,255,.72) !important;text-wrap:balance} #app .story-stats>div>span em{display:block;margin-top:2px;font-style:normal;font-size:.88em;color:rgba(255,255,255,.45)} #app .story-stats>p{grid-column:1 / -1;margin:clamp(28px,3vw,40px) 0 0 !important;text-align:center;font:400 12px/1.5 var(--kr) !important;color:rgba(255,255,255,.42) !important} @media (max-width:640px){#app .story-stats>div{padding:4px 8px !important}#app .story-stats>div>b{font-size:34px !important}#app .story-stats>div>span{font-size:12px !important}} @media (min-width:821px){ #app .story-stage .story-foot{margin-top:0 !important;left:0;right:0} #app .story-stats{position:absolute !important;left:0;right:0;top:calc(50% - 6vh + clamp(48px,6vw,92px) * 1.5 + 18px + 63px + clamp(36px,4vh,52px)) !important;margin:0 auto !important;z-index:2} } /* Problem 영문 라벨: Infinity Track 라벨과 같은 결 — 헤드라인 바로 위, 가운데 */ #app .story-message .sm-k{position:absolute;left:0;right:0;top:calc(50% - clamp(170px,15vw,230px));margin:0;font:600 12px/1 var(--en);letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;pointer-events:none} /* 히어로 카피 고정: 두 장면의 제목 · 서브카피가 같은 자리에서 바뀌도록 — 제목은 같은 크기 · 같은 높이(2줄 기준), 서브카피도 같은 높이(2줄 기준) */ #app .wall-hero .wall-copy .p{top:34% !important;left:0;right:0;text-align:center} #app .wall-hero .wall-copy .p h1,#app .wall-hero .wall-copy .p h2{font-size:var(--t0) !important;line-height:1.28 !important;margin:0 !important;min-height:2.56em;display:block;text-align:center} #app .wall-hero .wall-copy .p h2 .key-mark,#app .wall-hero .wall-copy .p h2{white-space:normal} #app .wall-hero .wall-copy .p .k{min-height:3.3em;margin:clamp(22px,2.6vw,36px) auto 0 !important;max-width:none !important;text-align:center;white-space:normal} #app .wall-hero .wall-copy .p .k b{font-weight:700;color:#fff} #app .wall-hero .wall-copy .p[data-wp="0"] .k{white-space:nowrap} #app .wall-hero .wall-copy .p[data-wp="0"] .k .br-d{display:none} #app .wall-hero .wall-copy .p[data-wp="1"] .k{font-weight:700 !important;color:#fff !important} @media (max-width:820px){#app .wall-hero .wall-copy .p[data-wp="0"] .k{white-space:normal}#app .wall-hero .wall-copy .p .k{min-height:4.4em}} /* 상황별 선택 v3 — 카드 · 아이콘 대신 에디토리얼 목록: 번호 · 문장 · 맞는 서비스, 헤어라인 구획, 고른 줄만 또렷하게 */ #app .pk-list{list-style:none;margin:0;padding:0;counter-reset:pk;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} #app .pk-list>li{opacity:0;transform:translateY(26px);transition:opacity .9s ease calc(var(--i) * .07s),transform 1s cubic-bezier(.22,1,.36,1) calc(var(--i) * .07s)} #app .pk-list.in>li{opacity:1;transform:none} #app .pk-row{position:relative;display:grid;grid-template-columns:clamp(56px,6vw,96px) minmax(0,1fr) minmax(170px,auto) 44px;align-items:center;column-gap:clamp(16px,2.4vw,40px); padding:clamp(24px,2.6vw,36px) 0;text-decoration:none;color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);transition:opacity .5s ease} #app .pk-n{font:500 clamp(13px,1vw,15px)/1 var(--en);letter-spacing:.14em;color:rgba(255,255,255,.35);transition:color .5s ease} #app .pk-t{font:600 clamp(19px,1.75vw,27px)/1.42 var(--kr);letter-spacing:-.035em;color:rgba(255,255,255,.82);transition:color .5s ease,transform .7s cubic-bezier(.22,1,.36,1)} #app .pk-s{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right} #app .pk-s small{font:500 11.5px/1 var(--kr);color:rgba(255,255,255,.4)} #app .pk-s b{font:700 clamp(15px,1.15vw,18px)/1 var(--en);letter-spacing:.02em;color:rgba(255,255,255,.7);transition:color .5s ease} #app .pk-row.is-one .pk-s b::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-radius:50%;background:#fd4533;vertical-align:middle} #app .pk-go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden;transition:background-color .5s,box-shadow .5s} #app .pk-go i{font-style:normal;font:500 16px/1 var(--en);color:#fff;transition:transform .6s cubic-bezier(.22,1,.36,1)} #app .pk-line{position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fd4533;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.22,1,.36,1)} /* 호버: 고른 줄만 밝아지고 문장이 살짝 밀리며 아래 키컬러 선이 그어짐, 나머지는 한발 물러남 */ #app .pk-list:hover .pk-row:not(:hover){opacity:.38} #app .pk-row:hover .pk-n{color:#fd4533} #app .pk-row:hover .pk-t{color:#fff;transform:translateX(10px)} #app .pk-row:hover .pk-s b{color:#fd4533} #app .pk-row:hover .pk-go{background:#fd4533;box-shadow:none} #app .pk-row:hover .pk-go i{transform:translateX(0) rotate(-45deg)} #app .pk-row:hover .pk-line,#app .pk-row:focus-visible .pk-line{transform:scaleX(1)} #app .pk-row:focus-visible{outline:none} @media (max-width:820px){ #app .pk-row{grid-template-columns:40px minmax(0,1fr) 36px;row-gap:12px;padding:22px 0} #app .pk-t{grid-column:2;font-size:17px} #app .pk-s{grid-column:2;grid-row:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;text-align:left} #app .pk-go{grid-column:3;grid-row:1 / span 2;width:36px;height:36px} #app .pk-n{align-self:start;padding-top:6px} } @media (hover:none){#app .pk-list:hover .pk-row:not(:hover){opacity:1}} @media (prefers-reduced-motion:reduce){#app .pk-list>li{opacity:1;transform:none;transition:none}} /* 하단 회사 정보 압축: 4열 · 2줄, 개인정보처리방침과 저작권은 한 줄로, 아래 여백 축소 */ #app section.sec.contact{padding-bottom:clamp(40px,4vw,64px) !important} #app .ct-co.ct-co-full{margin-top:clamp(56px,5.6vw,88px) !important;padding-top:clamp(28px,2.6vw,40px) !important;grid-template-columns:minmax(180px,auto) 1fr !important;row-gap:22px !important;align-items:start} #app .ct-co-full .ct-brick{display:none !important} #app .ct-co-full .ct-logo{grid-row:1 !important} #app .ct-co-full dl{grid-template-columns:repeat(4,minmax(0,1fr)) !important;column-gap:clamp(20px,2.4vw,40px) !important;row-gap:16px !important} #app .ct-co-full dl>div{gap:3px !important} #app .ct-co-full dt{font-size:12px !important} #app .ct-co-full dd{font-size:13.5px !important;line-height:1.45 !important} #app .ct-co-full .ct-priv{grid-row:2;align-self:center;font-size:12.5px !important} #app .ct-co-full .ct-copy{grid-row:2;justify-self:end;align-self:center;margin:0 !important;font-size:12px !important} @media (max-width:980px){#app .ct-co-full dl{grid-template-columns:1fr 1fr !important}#app .ct-co-full .ct-priv,#app .ct-co-full .ct-copy{grid-row:auto;justify-self:start}} /* 히어로 두 장면: 제목은 둘 다 한 줄 · 같은 자리, 서브카피는 둘 다 두 줄 · 같은 자리, 강조 구절만 굵게 */ #app .wall-hero .wall-copy .p h1,#app .wall-hero .wall-copy .p h2{min-height:1.28em !important;white-space:nowrap} #app .wall-hero .wall-copy .p .k{min-height:3.3em} #app .wall-hero .wall-copy .p[data-wp="0"] .k{white-space:normal !important} #app .wall-hero .wall-copy .p[data-wp="1"] .k{font-weight:400 !important;color:inherit !important} #app .wall-hero .wall-copy .p[data-wp="1"] .k b{font-weight:700;color:#fff} @media (max-width:820px){#app .wall-hero .wall-copy .p h1,#app .wall-hero .wall-copy .p h2{white-space:normal}} /* Process 카드: 덜 와이드하게 — 폭은 줄이고 세로는 조금 높게, 설명은 아래에 */ @media (min-width:1101px){ #app .ps-field .ps-card{width:min(440px,31vw) !important;max-width:none !important;min-height:clamp(250px,18vw,290px) !important;padding:34px 34px 38px !important;display:flex !important;flex-direction:column} #app .ps-field .ps-card .ps-desc{margin-top:auto !important;padding-top:18px} } /* About · 오시는 길 */ #app .loc{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:clamp(20px,2.4vw,36px);align-items:stretch} #app .loc-map{position:relative;min-height:clamp(320px,30vw,440px);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} #app .loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.88) brightness(.95)} #app .loc-info{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px);border-radius:18px;background:linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06)} #app .loc-co{margin:0 0 22px;font:700 18px/1.3 var(--kr);color:#fff} #app .loc-info dl{margin:0;display:flex;flex-direction:column;gap:16px} #app .loc-info dl>div{display:flex;flex-direction:column;gap:5px} #app .loc-info dt{font:500 12px/1 var(--kr);color:rgba(255,255,255,.45)} #app .loc-info dd{margin:0;font:500 15.5px/1.55 var(--kr);color:rgba(255,255,255,.9)} #app .loc-info dd a{color:inherit;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.25)} #app .loc-links{margin-top:auto;padding-top:26px;display:flex;flex-wrap:wrap;gap:8px} #app .loc-links a{padding:11px 15px;border-radius:999px;font:600 13px/1 var(--kr);color:#fff;text-decoration:none;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .3s} #app .loc-links a:hover{background:#fd4533} @media (max-width:900px){#app .loc{grid-template-columns:1fr}#app .loc-map{min-height:300px}} /* 약관 · 개인정보처리방침 페이지 */ #app .legal{padding-top:clamp(130px,13vw,180px) !important} #app .legal .wrap{max-width:880px} #app .legal .pv-h{margin:18px 0 0;font:800 clamp(34px,4vw,54px)/1.2 var(--kr);letter-spacing:-.05em;color:#fff} #app .legal .lg-meta{margin:14px 0 0;font:500 13px/1.5 var(--kr);color:rgba(255,255,255,.5)} #app .lg-body{margin-top:clamp(36px,4vw,56px)} #app .lg-body>p:first-child{font:400 16px/1.8 var(--kr);color:rgba(255,255,255,.8)} #app .lg-body h2{margin:44px 0 0;padding-top:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);font:700 19px/1.4 var(--kr);letter-spacing:-.02em;color:#fff} #app .lg-body p{margin:12px 0 0;font:400 15px/1.8 var(--kr);color:rgba(255,255,255,.76)} #app .lg-body ol,#app .lg-body ul{margin:10px 0 0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;font:400 15px/1.75 var(--kr);color:rgba(255,255,255,.76)} #app .lg-body ul{list-style:disc} #app .lg-body a{color:#fff;text-decoration:underline;text-underline-offset:3px} #app .lg-tw{margin:14px 0 4px;overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} #app .lg-tw table{width:100%;border-collapse:collapse;font:400 14px/1.65 var(--kr);color:rgba(255,255,255,.8)} #app .lg-tw th{padding:12px 16px;text-align:left;font-weight:700;color:#fff;background:rgba(255,255,255,.05);white-space:nowrap} #app .lg-tw td{padding:12px 16px;vertical-align:top;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} #app .lg-tw td:first-child{white-space:nowrap;color:rgba(255,255,255,.6)} #app .lg-nav{display:flex;justify-content:space-between;margin:56px 0 0;padding-top:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} #app .lg-nav a{color:#fd4533;font-weight:700;text-decoration:none} /* 하단 링크: 이용약관 · 개인정보처리방침(굵게) */ #app .ct-priv{display:flex;gap:18px} #app .ct-priv b,.ft-priv b{font-weight:700;color:#fff} .ft-priv+.ft-priv{margin-left:12px} /* 진단 폼 동의 두 개 */ .cvx-agrees{display:flex;flex-direction:column;gap:10px} .cvx-agree small{font-size:11px !important;line-height:1.55 !important} /* Your Start v4 — 목록 대신 하나의 문장 장면: 「지금 우리 회사는, ○○ 때」 → 맞는 서비스가 크게. 아래 여섯 칸이 저절로 넘어가며 진행 바가 차오름 */ #app .ys{position:relative} #app .ys-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);gap:clamp(32px,5vw,96px);align-items:end;min-height:clamp(260px,24vw,340px);padding:clamp(40px,4vw,60px) 0 clamp(36px,3.6vw,52px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.1)} #app .ys-lead{grid-column:1;margin:0 0 18px;font:500 clamp(15px,1.15vw,17px)/1 var(--kr);color:rgba(255,255,255,.5);align-self:start} #app .ys-stage{grid-template-rows:auto 1fr} #app .ys-q{grid-column:1;grid-row:2;display:grid;align-self:end} #app .ys-qi{grid-area:1/1;margin:0;font:700 clamp(28px,2.9vw,46px)/1.32 var(--kr);letter-spacing:-.05em;color:#fff;opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .55s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .55s ease;pointer-events:none} #app .ys-qi .ys-tail{color:rgba(255,255,255,.4)} #app .ys-qi.on{opacity:1;transform:none;filter:none;transition-delay:.12s;pointer-events:auto} #app .ys-ans{grid-column:2;grid-row:1 / span 2;align-self:end;display:flex;flex-direction:column;gap:14px} #app .ys-k{margin:0;font:600 12px/1 var(--en);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45)} #app .ys-k span{color:#fd4533;margin-right:6px} #app .ys-svc{display:grid} #app .ys-si{grid-area:1/1;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#fff;opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1);pointer-events:none} #app .ys-si.on{opacity:1;transform:none;transition-delay:.28s;pointer-events:auto} #app .ys-si b{font:800 clamp(44px,5vw,84px)/.92 var(--en);letter-spacing:-.055em;color:#fff} #app .ys-si.is-one b{color:#fd4533} #app .ys-si>span{font:500 clamp(14px,1.1vw,16px)/1.4 var(--kr);color:rgba(255,255,255,.62)} #app .ys-si i{margin-top:8px;font-style:normal;display:inline-flex;align-items:center;gap:10px;width:max-content;padding:12px 18px;border-radius:999px;font:700 13.5px/1 var(--kr);color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .35s} #app .ys-si i em{font-style:normal;transition:transform .4s} #app .ys-si:hover i{background:#fd4533} #app .ys-si:hover i em{transform:translateX(4px)} /* 아래 여섯 칸: 번호 + 짧은 이름 + 진행 바 (자동으로 넘어감) */ #app .ys-tabs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)} #app .ys-tab{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;padding:18px 2px 14px} #app .ys-n{font:600 11.5px/1 var(--en);letter-spacing:.14em;color:rgba(255,255,255,.35);transition:color .4s} #app .ys-t{font:600 clamp(13px,.95vw,15px)/1.35 var(--kr);color:rgba(255,255,255,.5);transition:color .4s} #app .ys-bar{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.1);overflow:hidden} #app .ys-bar::after{content:"";position:absolute;inset:0;background:#fd4533;transform:scaleX(0);transform-origin:0 50%} #app .ys-tab:hover .ys-t{color:rgba(255,255,255,.85)} #app .ys-tab.on .ys-n{color:#fd4533} #app .ys-tab.on .ys-t{color:#fff} #app .ys-tab.on .ys-bar::after{animation:ysFill var(--ys-dur,5s) linear forwards} #app .ys.paused .ys-tab.on .ys-bar::after{animation-play-state:paused} #app .ys-tab:focus-visible{outline:2px solid #fd4533;outline-offset:4px;border-radius:4px} @keyframes ysFill{to{transform:scaleX(1)}} @media (max-width:900px){ #app .ys-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;gap:22px} #app .ys-ans{grid-column:1;grid-row:3} #app .ys-qi{font-size:26px} #app .ys-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){#app .ys-qi,#app .ys-si{transition:none;filter:none}#app .ys-tab.on .ys-bar::after{animation:none;transform:scaleX(1)}} #app .ys-stage{grid-template-rows:1fr auto !important} #app .ys-lead{align-self:end !important;margin:0 0 14px !important} #app .ys-q{align-self:start !important} @media (max-width:900px){#app .ys-stage{grid-template-rows:auto auto auto !important}} #app .ys-stage{grid-template-rows:auto !important} #app .ys-q{grid-row:1 !important;align-self:end !important} #app .ys-ans{grid-row:1 !important} #app .ys-qi{align-self:end} #app .ys-qi .ys-l{display:block;margin:0 0 16px;font:500 clamp(15px,1.15vw,17px)/1 var(--kr);letter-spacing:-.01em;color:rgba(255,255,255,.5)} @media (max-width:900px){#app .ys-ans{grid-row:2 !important}} #app .ys-stage{min-height:clamp(220px,19vw,280px) !important} /* 하단 회사 정보 v3: 정보는 왼쪽에 2열로 단정하게, 오른쪽에 3D 벽돌 다시 */ #app .ct-co.ct-co-full{position:relative;display:grid !important;grid-template-columns:minmax(150px,auto) minmax(0,520px) !important;column-gap:clamp(32px,4vw,64px) !important;row-gap:18px !important;min-height:clamp(320px,28vw,400px);align-content:center} #app .ct-co-full .ct-logo{grid-column:1;grid-row:1 / span 3 !important;align-self:start;margin:4px 0 0 !important} #app .ct-co-full dl{grid-column:2 !important;grid-row:1 !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;column-gap:clamp(24px,3vw,44px) !important;row-gap:14px !important} #app .ct-co-full .ct-priv{grid-column:2 !important;grid-row:2 !important} #app .ct-co-full .ct-copy{grid-column:2 !important;grid-row:3 !important;justify-self:start !important} #app .ct-co-full .ct-brick{display:block !important;position:absolute !important;inset:auto !important;right:0 !important;top:50% !important;transform:translateY(-50%) !important;width:min(30vw,400px) !important;aspect-ratio:1/1.05;grid-column:auto !important;grid-row:auto !important;pointer-events:none;z-index:0} #app .ct-co-full .ct-brick canvas{width:100% !important;height:100% !important;display:block} #app .ct-co-full>*:not(.ct-brick){position:relative;z-index:1} @media (max-width:980px){ #app .ct-co.ct-co-full{grid-template-columns:1fr !important;min-height:0} #app .ct-co-full .ct-logo,#app .ct-co-full dl,#app .ct-co-full .ct-priv,#app .ct-co-full .ct-copy{grid-column:1 !important;grid-row:auto !important} #app .ct-co-full .ct-brick{position:relative !important;top:auto !important;transform:none !important;width:min(70vw,300px) !important;margin:8px auto 0;grid-row:auto !important;order:9} } @media (min-width:981px){#app .ct-co.ct-co-full{grid-template-columns:max-content minmax(0,520px) !important;justify-content:start !important}} /* 히어로 카피 정렬 최종: 위 한 줄 · 제목 · 서브카피를 하나의 기준점(34%)에서 차례로 — 화면 높이가 달라도 겹치지 않음 */ #app .wall-hero .wall-eyebrow{top:calc(34% - 54px) !important;transform:none !important} #app .wall-hero .wall-copy .p{top:34% !important;transform:none} #app .wall-hero .wall-copy .p h1,#app .wall-hero .wall-copy .p h2{margin:0 !important;padding:0 !important;line-height:1.2 !important;min-height:1.2em !important} #app .wall-hero .wall-copy .p .k{margin-top:clamp(20px,2.2vw,30px) !important;min-height:3.3em !important;white-space:normal !important} @media (max-width:820px){ #app .wall-hero .wall-eyebrow{top:calc(34% - 70px) !important} } /* 두 장면 모두 위쪽 기준(34%)에 맞춤 — 스크립트의 가운데 정렬(-50%) 대신. 안 보이는 장면은 30px 아래에서 대기 */ #app .wall-hero .wall-copy .p.on{transform:none !important} #app .wall-hero .wall-copy .p:not(.on){transform:translateY(30px) !important} /* 위 한 줄(DX를 넘어선…)을 각 장면 안으로 — 제목과 늘 같은 간격, 어떤 화면에서도 맞닿지 않음 */ #app .wall-hero .wall-eyebrow{display:none !important} #app .wall-hero .wall-copy .p .wall-eb{display:block;margin:0 0 clamp(22px,2.4vw,34px);text-align:center;font:500 clamp(14px,1.05vw,16px)/1.5 var(--kr);letter-spacing:-.01em;color:rgba(255,255,255,.78)} #app .wall-hero .wall-copy .p .wall-eb .we-b{font-weight:700;color:#fff} @media (max-width:820px){#app .wall-hero .wall-copy .p .wall-eb{font-size:12.5px;margin-bottom:18px;padding:0 20px}#app .wall-hero .wall-copy .p .wall-eb .we-b{display:block;margin-top:2px}} #app .wall-hero .wall-copy .p{top:calc(34% - clamp(46px,4.6vw,60px)) !important} @media (max-width:820px){#app .wall-hero .wall-copy .p{top:calc(34% - 78px) !important}} /* Your Start: 상황 문장은 두 줄로 끊어 폭을 줄이고, 맞는 서비스 옆에 서비스 섹션의 점 아이콘 */ #app .ys-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important} #app .ys-qi{font-size:clamp(26px,2.5vw,40px) !important;line-height:1.38 !important} #app .ys-qi br{display:block} #app .ys-si{flex-direction:row !important;align-items:center;gap:clamp(18px,2.2vw,32px) !important} #app .ys-ico{flex:0 0 auto;width:clamp(110px,10vw,150px) !important;height:clamp(96px,8.6vw,128px) !important;margin:0 !important} #app .ys-sw{display:flex;flex-direction:column;gap:10px;min-width:0} #app .ys-sw>span{font:500 clamp(14px,1.1vw,16px)/1.4 var(--kr);color:rgba(255,255,255,.62)} #app .ys-si b{font-size:clamp(40px,4.2vw,72px) !important} #app .ys-si.ys-one b{color:#fd4533} #app .ys-si.is-one b{color:inherit} @media (max-width:900px){#app .ys-qi br{display:none}#app .ys-ico{width:96px !important;height:84px !important}} @media (max-width:900px){#app .ys-stage{grid-template-columns:1fr !important}#app .ys-qi{font-size:24px !important}#app .ys-qi br{display:block !important}#app .ys-si b{font-size:44px !important}} /* 푸터 정보 세 영역: [회사 정보 1열][회사 정보 2열][약관 링크 · 저작권] — 세로 길이 줄임 */ @media (min-width:981px){ #app .ct-co.ct-co-full{grid-template-columns:max-content minmax(0,460px) max-content !important;column-gap:clamp(32px,3.6vw,56px) !important;min-height:clamp(260px,22vw,320px) !important} #app .ct-co-full .ct-logo{grid-column:1 !important;grid-row:1 / span 2 !important} #app .ct-co-full dl{grid-column:2 !important;grid-row:1 / span 2 !important} #app .ct-co-full .ct-priv{grid-column:3 !important;grid-row:1 !important;display:flex !important;flex-direction:column;gap:12px !important;align-self:start !important;margin:2px 0 0 !important} #app .ct-co-full .ct-copy{grid-column:3 !important;grid-row:2 !important;align-self:end !important;justify-self:start !important;max-width:15em;line-height:1.5 !important} #app .ct-co-full .ct-brick{width:min(24vw,330px) !important} } /* Process 카드: 정사각 · 안쪽 여백 넉넉하게 */ @media (min-width:1101px){ #app .ps-field .ps-card{width:min(360px,26vw) !important;aspect-ratio:1 / 1;min-height:0 !important;padding:clamp(34px,3vw,46px) !important;box-sizing:border-box} #app .ps-field .ps-card h3{margin-top:14px !important} #app .ps-field .ps-card .ps-desc{margin-top:auto !important;padding-top:0 !important} } /* 인트로 숫자 호버: 숫자 상자 안에 갇힌 그림자 대신, 숫자 뒤로 번지는 은은한 빛 + 숫자는 살짝 떠오름 */ #app #heroIntro .hero-proof>div>b{text-shadow:none !important} #app #heroIntro .hero-proof>div:hover>b{text-shadow:none !important} #app #heroIntro .hero-proof>div{position:relative;isolation:isolate} #app #heroIntro .hero-proof>div::before{content:"";position:absolute;left:-12%;top:-30%;width:clamp(200px,18vw,280px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none; background:radial-gradient(closest-side,rgba(253,69,51,.22),rgba(253,69,51,.08) 45%,rgba(253,69,51,0) 100%);opacity:0;transform:scale(.7);transition:opacity .7s ease,transform 1s cubic-bezier(.22,1,.36,1)} #app #heroIntro .hero-proof>div:hover::before{opacity:1;transform:none} #app #heroIntro .hero-proof>div>b{transition:transform .8s cubic-bezier(.22,1,.36,1)} #app #heroIntro .hero-proof>div:hover>b{transform:translateY(-4px)} #app #heroIntro .hero-proof>div>b small{transition:color .5s ease} #app #heroIntro .hero-proof>div:hover>b small{color:#fd4533 !important} /* Your Start: 텍스트는 왼쪽 정렬 · 간결하게, 아이콘은 텍스트 오른쪽 */ #app .ys-si{justify-content:space-between !important} #app .ys-sw{order:1;align-items:flex-start;text-align:left;gap:8px !important} #app .ys-ico{order:2} #app .ys-si i{margin-top:6px !important;padding:0 !important;background:none !important;box-shadow:none !important;color:rgba(255,255,255,.7) !important;font:600 13.5px/1 var(--kr) !important;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:5px !important;border-radius:0 !important} #app .ys-si:hover i{color:#fff !important;border-bottom-color:#fd4533} #app .ys-k{text-align:left} #app .ys-si{justify-content:flex-start !important;gap:clamp(22px,2.6vw,40px) !important} #app #heroIntro .hero-proof>div::before{left:-8%;top:-24%;background:radial-gradient(closest-side,rgba(253,69,51,.3),rgba(253,69,51,.1) 50%,rgba(253,69,51,0) 100%)} #app #heroIntro .hero-proof>div::before{display:block !important} #app #heroIntro .hero-proof>div::before{left:calc(clamp(40px,4vw,70px) - clamp(130px,11vw,160px)) !important;top:calc(clamp(30px,3vw,50px) - clamp(130px,11vw,160px)) !important;width:clamp(260px,22vw,320px) !important} /* About · 오시는 길: 벽돌 3D 톤의 추상 「BRIXON 오피스」 — CSS 3D 건물, 3층(302호)만 따뜻하게 켜짐, 천천히 숨 쉬듯 회전 */ #app .loc-bld{position:relative;height:clamp(200px,17vw,250px);margin:-6px 0 18px;display:grid;place-items:center;overflow:visible} #app .lb-scene{position:relative;width:150px;height:190px;perspective:900px;perspective-origin:50% 20%} #app .lb-b{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(-36deg);animation:lbSway 9s ease-in-out infinite alternate;transition:transform 1.2s cubic-bezier(.22,1,.36,1)} #app .loc-info:hover .lb-b{animation-play-state:paused;transform:rotateX(-20deg) rotateY(-24deg)} @keyframes lbSway{from{transform:rotateX(-16deg) rotateY(-40deg)}to{transform:rotateX(-14deg) rotateY(-28deg)}} #app .lb-f{position:absolute;display:grid;box-sizing:border-box;backface-visibility:hidden; background:linear-gradient(180deg,rgba(14,14,17,.42),rgba(8,8,10,.78)),url(/brick-texture.jpg) center/170px auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.12)} #app .lb-front{width:150px;height:190px;left:0;top:0;transform:translateZ(55px);grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:14px 12px;padding:22px 16px 0} #app .lb-side{width:110px;height:190px;left:20px;top:0;transform:rotateY(90deg) translateZ(75px);grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:14px 12px;padding:22px 16px 0;filter:brightness(.62)} #app .lb-top{width:150px;height:110px;left:0;top:40px;transform:rotateX(90deg) translateZ(95px);background:linear-gradient(180deg,rgba(30,30,34,.6),rgba(12,12,14,.85)),url(/brick-texture.jpg) center/140px auto;filter:brightness(1.15)} /* 층 사이 이음매: 아주 얇은 붉은 빛 */ #app .lb-front::after,#app .lb-side::after{content:"";position:absolute;left:0;right:0;top:calc(22px + (190px - 22px) / 3 - 7px);height:1px;background:linear-gradient(90deg,rgba(253,69,51,0),rgba(253,69,51,.55),rgba(253,69,51,0));box-shadow:0 0 8px rgba(253,69,51,.5)} #app .lb-w{display:block;border-radius:1px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} #app .lb-w.on{background:linear-gradient(180deg,rgba(255,196,170,.95),rgba(253,110,80,.85));box-shadow:0 0 14px rgba(253,69,51,.55),0 0 2px rgba(255,220,200,.9) inset;animation:lbOn 4.5s ease-in-out infinite alternate} #app .lb-w.door{background:rgba(0,0,0,.75);margin-top:auto;height:70%;box-shadow:inset 0 0 0 1px rgba(253,69,51,.25)} @keyframes lbOn{from{opacity:.82}to{opacity:1}} #app .lb-shadow{position:absolute;left:-40px;right:-60px;bottom:-26px;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(253,69,51,.16),rgba(0,0,0,.55) 40%,rgba(0,0,0,0));filter:blur(4px);transform:rotateX(70deg);pointer-events:none} /* 3층 위치 핀 */ #app .lb-pin{position:absolute;right:clamp(4px,8%,40px);top:8%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-left:14px} #app .lb-pin i{position:absolute;left:0;top:4px;width:7px;height:7px;border-radius:50%;background:#fd4533;box-shadow:0 0 0 4px rgba(253,69,51,.18),0 0 14px rgba(253,69,51,.8);animation:lbPing 2.4s ease-out infinite} #app .lb-pin b{font:800 13px/1 var(--en);letter-spacing:.14em;color:#fff} #app .lb-pin small{font:600 11px/1 var(--en);letter-spacing:.12em;color:rgba(255,255,255,.55)} @keyframes lbPing{0%{box-shadow:0 0 0 0 rgba(253,69,51,.45),0 0 14px rgba(253,69,51,.8)}100%{box-shadow:0 0 0 12px rgba(253,69,51,0),0 0 14px rgba(253,69,51,.8)}} @media (prefers-reduced-motion:reduce){#app .lb-b,#app .lb-w.on,#app .lb-pin i{animation:none}} #app .lb-pin{right:auto !important;left:calc(50% + 92px) !important;top:6% !important}@media (max-width:420px){#app .lb-pin{left:calc(50% + 84px) !important}#app .lb-pin b{font-size:11.5px}} /* Your Start 아래 선: 장면 아래 헤어라인과 탭 진행 바가 겹쳐 두 줄 · 끊김으로 보이던 것 정리 — 이어진 한 줄만 */ #app .ys-stage{box-shadow:inset 0 1px 0 rgba(255,255,255,.1) !important} #app .ys-tabs{gap:0 !important} #app .ys-tab{padding:18px 16px 14px 0 !important} #app .ys-bar{height:1px !important;background:rgba(255,255,255,.12) !important;overflow:visible !important} #app .ys-bar::after{top:-.5px !important;height:2px !important;bottom:auto !important} #app .ys-stage{padding-bottom:clamp(56px,5.6vw,88px) !important}#app .ys-tab{padding-top:22px !important} /* 인트로 숫자: 단위(%, +, ea, h)와 Top을 숫자 윗선(글자 꼭대기)에 맞춤 — 위로 떠 보이지 않게. Top · %는 1에 더 가깝게 */ #app #heroIntro .hero-proof>div>b{align-items:flex-start !important;--big:clamp(60px,6.8vw,116px)} #app #heroIntro .hero-proof>div>b small{line-height:1 !important;margin-top:calc(var(--big) * .1) !important;transform:none !important} #app #heroIntro .hero-proof>div>b small.hp-pre{margin-top:calc(var(--big) * .1) !important;margin-right:-.02em !important} #app #heroIntro .hero-proof>div:first-child>b small:not(.hp-pre){margin-left:-.1em !important} #app #heroIntro .hero-proof>div:first-child>b .odo{margin-left:-.06em} #app #heroIntro .hero-proof>div:first-child>b small:not(.hp-pre){margin-left:-.22em !important}#app #heroIntro .hero-proof>div:first-child>b small.hp-pre{margin-right:-.12em !important} /* 탭 선: 칸마다 따로 그리지 않고 한 줄로(레티나 · Safari 이음매 방지), 칸에는 진행 막대만 */ #app .ys-tabs{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} #app .ys-bar{background:transparent !important;height:2px !important;top:-.5px !important} #app .ys-bar::after{top:0 !important;height:2px !important} /* v244 오시는 길 건물: three.js 건축 모형 */ #app .loc-bld{height:clamp(250px,22vw,320px)} #app .loc-bld .lb-cv{position:absolute;inset:0;width:100%;height:100%;display:block} #app .loc-bld.has-gl .lb-scene{display:none} #app .loc-bld.has-gl .lb-pin{left:var(--px,70%) !important;top:var(--py,30%) !important;right:auto !important;transform:translate(-3px,-7px);transition:opacity .6s;padding-left:22px} #app .loc-bld.has-gl .lb-pin::before{content:"";position:absolute;left:3px;top:7px;width:16px;height:1px;background:linear-gradient(90deg,rgba(253,69,51,.7),rgba(255,255,255,.25))} #app .loc-bld.has-gl .lb-pin b,#app .loc-bld.has-gl .lb-pin small{margin-left:4px} /* v245 About: 원칙 · 조직 · AX WORKS · R&D */ #app #principles .apx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14)} #app #principles .apx-c{position:relative;padding:clamp(28px,2.6vw,40px) clamp(20px,2vw,32px) clamp(36px,3vw,48px);border-right:1px solid rgba(255,255,255,.08);transition:background .5s} #app #principles .apx-c:last-child{border-right:0} #app #principles .apx-c::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:#fd4533;transition:width .7s cubic-bezier(.2,.8,.2,1)} #app #principles .apx-c:hover::before{width:100%} #app #principles .apx-c:hover{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))} #app #principles .apx-n{display:block;font:300 clamp(44px,4.4vw,68px)/1 var(--en);letter-spacing:-.04em;color:rgba(255,255,255,.22);transition:color .5s} #app #principles .apx-c:hover .apx-n{color:#fd4533} #app #principles .apx-e{margin:30px 0 10px;font:600 12px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)} #app #principles h3{margin:0 0 14px;font:700 clamp(21px,1.7vw,26px)/1.3 var(--kr);letter-spacing:-.03em;color:#fff} #app #principles .apx-t{margin:0;font:400 15px/1.7 var(--kr);color:rgba(255,255,255,.66);word-break:keep-all} #app #org .org{position:relative} #app #org .org-top,#app #org .org-u{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012));backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);padding:clamp(24px,2.4vw,34px)} #app #org .org-top{max-width:520px;margin:0 auto;text-align:center;border-color:rgba(253,69,51,.38);box-shadow:0 0 60px -20px rgba(253,69,51,.35)} #app #org .org-top ul{justify-content:center} #app #org .org-k{margin:0 0 10px;font:700 12px/1 var(--en);letter-spacing:.16em;color:#fd4533} #app #org h3{margin:0 0 16px;font:700 clamp(22px,1.9vw,28px)/1.25 var(--kr);letter-spacing:-.03em;color:#fff} #app #org ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} #app #org li{font:500 13.5px/1 var(--kr);color:rgba(255,255,255,.72);padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px} #app #org .org-u ul{flex-direction:column;align-items:flex-start;gap:0} #app #org .org-u li{border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;padding:13px 0;width:100%;font-size:15px} #app #org .org-lines{display:block;width:100%;height:clamp(54px,6vw,90px)} #app #org .org-lines path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .2s} #app #org .org.in .org-lines path,#app #org .org.on .org-lines path,#app #org .org.is-in .org-lines path{stroke-dashoffset:0} #app #org .org-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)} #app #org .org-u{transition:border-color .5s,transform .5s} #app #org .org-u:hover{border-color:rgba(255,255,255,.3);transform:translateY(-4px)} #app #axworks .axw{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:clamp(14px,1.6vw,24px)} #app #axworks .axw-main{grid-row:span 2;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:clamp(30px,3.2vw,52px);background:radial-gradient(70% 60% at 85% 100%,rgba(253,69,51,.14),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(320px,30vw,420px)} #app #axworks .axw-k{margin:0 0 14px;font:700 12px/1 var(--en);letter-spacing:.16em;color:#fd4533;text-transform:uppercase} #app #axworks h3{margin:0;font:700 clamp(26px,2.5vw,38px)/1.3 var(--kr);letter-spacing:-.04em;color:#fff} #app #axworks .axw-t{margin:18px 0 0;max-width:440px;font:400 16px/1.7 var(--kr);color:rgba(255,255,255,.68);word-break:keep-all} #app #axworks .axw-roles{display:flex;flex-wrap:wrap;align-content:center;gap:10px;padding:clamp(24px,2.4vw,34px);border:1px solid rgba(255,255,255,.1);border-radius:22px} #app #axworks .axw-roles span{font:600 15px/1 var(--kr);color:#fff;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:border-color .4s,background .4s,color .4s} #app #axworks .axw-roles span:hover{border-color:rgba(253,69,51,.6);background:rgba(253,69,51,.1)} #app #axworks .axw-roles span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fd4533;margin-right:9px;vertical-align:2px;opacity:.85;animation:axwPulse 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)} @keyframes axwPulse{0%,100%{opacity:.25}50%{opacity:.95}} #app #axworks .axw-sub{padding:clamp(24px,2.4vw,34px);border:1px solid rgba(255,255,255,.1);border-radius:22px;display:flex;flex-direction:column;justify-content:center} #app #axworks .axw-sub h3{font-size:clamp(20px,1.7vw,25px)} #app #rnd .rnd{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)} #app #rnd .rnd-i{position:relative;padding:clamp(26px,2.4vw,36px) clamp(18px,2vw,30px) clamp(26px,2.4vw,36px) 0;border-bottom:1px solid rgba(255,255,255,.08)} #app #rnd .rnd-i+.rnd-i:not(:nth-child(3n+1)){padding-left:clamp(18px,2vw,30px);border-left:1px solid rgba(255,255,255,.08)} #app #rnd .rnd-k{margin:0 0 18px;font:600 12px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)} #app #rnd h3{margin:0 0 6px;font:700 clamp(19px,1.6vw,23px)/1.35 var(--kr);letter-spacing:-.03em;color:#fff} #app #rnd .rnd-t{margin:0;font:400 15px/1.6 var(--kr);color:rgba(255,255,255,.6)} #app #rnd .rnd-d{position:absolute;right:clamp(18px,2vw,30px);top:clamp(26px,2.4vw,36px);font:500 13px/1 var(--en);letter-spacing:.06em;color:rgba(255,255,255,.4)} #app #rnd .rnd-i:hover h3{color:#fd4533} #app #rnd h3{transition:color .4s} @media (max-width:1100px){#app #principles .apx{grid-template-columns:repeat(2,1fr)}#app #principles .apx-c:nth-child(2){border-right:0}#app #principles .apx-c:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}} @media (max-width:820px){ #app #org .org-lines{display:none}#app #org .org-row{grid-template-columns:1fr;margin-top:14px} #app #axworks .axw{grid-template-columns:1fr}#app #axworks .axw-main{grid-row:auto;min-height:280px} #app #rnd .rnd{grid-template-columns:1fr 1fr}#app #rnd .rnd-i,#app #rnd .rnd-i+.rnd-i:not(:nth-child(3n+1)){padding-left:0;border-left:0;padding-right:12px} #app #rnd .rnd-i:nth-child(2n){padding-left:16px !important;border-left:1px solid rgba(255,255,255,.08) !important} #app #rnd .rnd-d{position:static;display:block;margin-top:12px} } @media (max-width:560px){#app #principles .apx{grid-template-columns:1fr}#app #principles .apx-c{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding-left:0;padding-right:0}#app #principles .apx-e{margin-top:20px}} @media (min-width:821px){#app #about .ow{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr)}} #app #about .ow-node.is-now{text-align:center} #app #about .ow-node.is-now .ow-t{color:rgba(255,255,255,.72)} /* 약관 링크 · 전화 · 이메일 밑줄 없애기 */ #app .ct-priv a,#app .ft-priv,#app a[href^="tel:"],#app a[href^="mailto:"]{text-decoration:none !important;border-bottom:0 !important;box-shadow:none !important;background-image:none !important} #app .ct-priv a:hover,#app .ft-priv:hover,#app a[href^="tel:"]:hover,#app a[href^="mailto:"]:hover{color:#fd4533 !important} /* Process v4 — 정사각 카드는 그대로, 위치만 불규칙하게 · 유리 너머로 돌 텍스처가 비침 · 주황빛 없음 */ @media (min-width:1101px){ #app #process .ps-journey .ps-card:nth-child(1){grid-column:2/6 !important;margin-top:0 !important;margin-left:-20px !important} #app #process .ps-journey .ps-card:nth-child(2){grid-column:7/11 !important;margin-top:96px !important;margin-left:44px !important} #app #process .ps-journey .ps-card:nth-child(3){grid-column:1/5 !important;margin-top:-30px !important;margin-left:110px !important} #app #process .ps-journey .ps-card:nth-child(4){grid-column:7/11 !important;margin-top:150px !important;margin-left:-36px !important} } #app #process .ps-journey .ps-card:nth-child(n),#app #process .ps-journey .ps-card:nth-child(n):hover{ background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 60%) !important; -webkit-backdrop-filter:blur(7px) saturate(1.15) brightness(1.08) !important;backdrop-filter:blur(7px) saturate(1.15) brightness(1.08) !important; border:1px solid rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -40px rgba(0,0,0,.8) !important} #app #process .ps-journey .ps-card:nth-child(n):hover{border-color:rgba(255,255,255,.3) !important} #app #process .ps-journey .ps-card::before,#app #process .ps-journey .ps-card::after{background:none !important;box-shadow:none !important} #app #process .ps-journey .ps-desc{color:rgba(255,255,255,.82) !important;text-shadow:0 1px 10px rgba(0,0,0,.55)} /* 돌이 카드 네 장 뒤에 모두 걸치게 */ @media (min-width:1101px){ #app #process .ps-journey .ps-rk.rk-c{left:38% !important;top:46% !important;width:54% !important;height:58% !important;opacity:.9 !important} #app #process .ps-journey .ps-rk.rk-a{top:4% !important} } #app #process .ps-journey .ps-rk img{filter:grayscale(1) brightness(.8) contrast(1.12) !important} /* Process 구간에서는 화면 전체 주황 앰비언트 빛을 끔 */ .ambient-light .l2{transition:opacity 1.2s ease} body.no-ember .ambient-light .l2{opacity:0} /* About · Life at BRIXON (복지) */ #app #life .lf-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,72px);align-items:end;margin:18px 0 clamp(48px,5vw,80px)} #app #life .lf-h{margin:0;font:750 clamp(32px,3.6vw,56px)/1.22 var(--kr);letter-spacing:-.05em;color:#fff} #app #life .lf-lead{margin:0;font:400 clamp(16px,1.2vw,18px)/1.75 var(--kr);color:rgba(255,255,255,.7);word-break:keep-all} #app #life .lf-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)} #app #life .lf-w{padding:clamp(28px,2.6vw,40px) clamp(20px,2.2vw,36px) clamp(32px,3vw,44px) 0} #app #life .lf-w+.lf-w{padding-left:clamp(20px,2.2vw,36px);border-left:1px solid rgba(255,255,255,.08)} #app #life .lf-n{display:block;margin-bottom:22px;font:600 13px/1 var(--en);letter-spacing:.12em;color:#fd4533} #app #life .lf-w h3{margin:0 0 14px;font:700 clamp(21px,1.7vw,26px)/1.3 var(--kr);letter-spacing:-.03em;color:#fff} #app #life .lf-w p{margin:0;font:400 15.5px/1.75 var(--kr);color:rgba(255,255,255,.68);word-break:keep-all} #app #life .lf-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(56px,6vw,96px) 0 clamp(36px,4vw,56px);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)} #app #life .lf-stats>div{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(28px,3vw,44px) 12px} #app #life .lf-stats>div+div{border-left:1px solid rgba(255,255,255,.08)} #app #life .lf-stats b{font:300 clamp(54px,6vw,92px)/1 var(--en);letter-spacing:-.05em;color:#fff;transition:color .5s} #app #life .lf-stats b small{margin-left:.1em;font:500 .26em/1 var(--en);letter-spacing:.02em;color:#fff;vertical-align:top;position:relative;top:.35em} #app #life .lf-stats>div:hover b{color:#fd4533} #app #life .lf-stats span{font:500 15px/1 var(--kr);color:rgba(255,255,255,.62)} #app #life .lf-ben{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)} #app #life .lf-g{border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:clamp(24px,2.4vw,34px);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .5s,transform .5s} #app #life .lf-g:hover{border-color:rgba(255,255,255,.26);transform:translateY(-4px)} #app #life .lf-gk{margin:0 0 10px;font:700 12px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;color:#fd4533} #app #life .lf-g h3{margin:0 0 14px;font:700 clamp(21px,1.7vw,25px)/1.3 var(--kr);letter-spacing:-.03em;color:#fff} #app #life .lf-g ul{list-style:none;margin:0;padding:0} #app #life .lf-g li{padding:13px 0;border-top:1px solid rgba(255,255,255,.08);font:400 15.5px/1.4 var(--kr);color:rgba(255,255,255,.78)} @media (max-width:900px){ #app #life .lf-head{grid-template-columns:1fr} #app #life .lf-why{grid-template-columns:1fr}#app #life .lf-w,#app #life .lf-w+.lf-w{padding:26px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.08)} #app #life .lf-ben{grid-template-columns:1fr} } @media (max-width:560px){#app #life .lf-stats>div{padding:22px 4px}#app #life .lf-stats span{font-size:12.5px;text-align:center;line-height:1.4}} /* Process: Step 3 가운데 쪽으로, Step 2 뒤에도 돌이 비치게 */ @media (min-width:1101px){ #app #process .ps-journey .ps-card:nth-child(3){grid-column:3/7 !important;margin-left:10px !important} #app #process .ps-journey .ps-card:nth-child(4){grid-column:8/12 !important;margin-left:-20px !important} #app #process .ps-journey .ps-rk.rk-b{left:42% !important;top:-2% !important;width:56% !important;height:62% !important;right:auto !important} #app #process .ps-journey .rk-b img{right:auto !important;left:0 !important;top:-6% !important;width:100% !important;height:112% !important;object-fit:cover !important;opacity:1 !important} #app #process .ps-journey .rk-b{-webkit-mask-image:radial-gradient(closest-side at 50% 50%,var(--ease-fade)) !important;mask-image:radial-gradient(closest-side at 50% 50%,var(--ease-fade)) !important} } @media (min-width:1101px){ #app #process .ps-journey .rk-b img{object-position:22% 45% !important;filter:grayscale(1) brightness(1.05) contrast(1.12) !important} #app #process .ps-journey .rk-c img{left:0 !important;top:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:30% 40% !important;filter:grayscale(1) brightness(.95) contrast(1.1) !important} }