/* =========================================================
   사업 영역 (about-business) — main.css + about.css 위에 얹는 페이지 전용 스타일
   ========================================================= */

/* 히어로 칩 */
.hchips{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px }
.hchips li{ padding:8px 16px; border-radius:999px; font-size:16px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }

/* ---------- 비전: 스크롤로 채워지는 문장 ---------- */
.vision{ background:#fff }
.vision__text{ margin-top:28px; max-width:1320px; font-size:clamp(32px,4.1vw,64px); font-weight:700; line-height:1.38; letter-spacing:-.045em; color:var(--text-strong); text-wrap:pretty }
.vision__text em{ color:var(--point) }
.vision__text strong{ background:linear-gradient(90deg,var(--point),#7A4BEA 60%,#2BA9E8); -webkit-background-clip:text; background-clip:text; color:transparent }
.vision__text .w{ display:inline }
.vision__kpi{ margin-top:120px }
.vision__kpi .kpi__item{ background:var(--bg-light); box-shadow:none }
@media (max-width:767px){ .vision__text{ font-size:28px; line-height:1.45 } .vision__kpi{ margin-top:64px } }

/* ---------- 두 개의 축: 벤 다이어그램 ---------- */
.core{ background:var(--bg-dark); color:rgba(255,255,255,.72); overflow:hidden;
  --d:min(360px, calc((100svh - 400px) * .78)) }
.core .sec-title{ color:#fff } .core .sec-title em{ color:var(--point-on-dark) } .core .sec-lead{ color:rgba(255,255,255,.62) }
.core::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 70%, rgba(67,48,230,.22), transparent 70%) }
.venn{ position:relative; margin-top:56px; height:calc(var(--d) * 1.45); min-height:440px }
.venn__stage{ position:absolute; left:50%; top:50%; width:calc(var(--d) * 1.72); height:var(--d); translate:-50% -50% }
.venn__c{ position:absolute; top:0; width:var(--d); height:var(--d); border-radius:50%; display:flex; flex-direction:column; justify-content:center; gap:10px;
  mix-blend-mode:screen; color:#fff }
.venn__c b{ font-size:clamp(20px,1.7vw,26px); font-weight:700; line-height:1.35; letter-spacing:-.035em }
.venn__c small{ font-size:16px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.7) }
.venn__c--a{ left:0; padding-left:calc(var(--d) * .2); background:radial-gradient(circle at 35% 35%, #5A6BFF, #3A2BD9 55%, #22188F) ;
  box-shadow:0 0 120px -20px rgba(67,48,230,.8) }
.venn__c--b{ right:0; align-items:flex-end; text-align:right; padding-right:calc(var(--d) * .2); background:radial-gradient(circle at 65% 35%, #B57CFF, #8238E0 55%, #4E1A9E);
  box-shadow:0 0 120px -20px rgba(130,56,224,.8) }
.venn__x{ position:absolute; left:50%; top:50%; width:calc(var(--d) * .26); aspect-ratio:1; translate:-50% -50%; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--deep); font-size:20px; font-weight:800; letter-spacing:.04em; box-shadow:0 0 0 10px rgba(255,255,255,.12), 0 0 60px 10px rgba(167,158,255,.7) }
.venn__x::after{ content:""; position:absolute; inset:-22px; border-radius:50%; border:1px solid rgba(255,255,255,.35); animation:vx 3.2s var(--ease) infinite }
@keyframes vx{ 0%{ scale:.7; opacity:.9 } 100%{ scale:1.5; opacity:0 } }
.venn__cx{ position:absolute; left:50%; bottom:0; translate:-50% 0; padding:10px 20px; border-radius:999px; font-size:17px; font-weight:700; color:#fff; white-space:nowrap;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2) }
.venn__lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.vl{ fill:none; stroke:rgba(167,158,255,.55); stroke-width:1.5; stroke-dasharray:4 6; vector-effect:non-scaling-stroke }
.venn__cards{ position:absolute; inset:0; pointer-events:none }
.vn{ position:absolute; width:min(300px, 24%); padding:24px 26px; border-radius:var(--r-lg); pointer-events:auto;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--line-dark); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.vn--1{ left:0; top:4% } .vn--2{ left:0; bottom:4% } .vn--3{ right:0; top:4% } .vn--4{ right:0; bottom:4% }
.vn__k{ display:inline-flex; padding:3px 10px; border-radius:999px; font-size:16px; font-weight:700 }
.vn__k--a{ color:#AFC0FF; background:rgba(90,107,255,.18) }
.vn__k--b{ color:#D9B8FF; background:rgba(181,124,255,.16) }
.vn b{ display:block; margin-top:12px; font-size:20px; font-weight:700; letter-spacing:-.03em; color:#fff }
.vn p{ margin-top:8px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.62) }

@media (min-width:1025px){
  .core{ padding:0 }
  .core__pin{ min-height:100svh; padding:calc(var(--header) + 64px + 32px) 0 40px; display:flex; flex-direction:column; justify-content:center }
  .core .venn{ margin-top:40px }
}
@media (max-width:1024px){
  .core{ --d:min(250px, 40vw) }
  .venn{ height:auto; min-height:0; margin-top:48px; display:flex; flex-direction:column; align-items:center }
  .venn__stage{ position:relative; left:auto; top:auto; translate:none }
  .venn__lines{ display:none }
  .venn__cx{ position:static; translate:none; margin-top:28px }
  .venn__c b{ font-size:18px } .venn__c small{ display:none }
  .venn__c--a{ padding-left:calc(var(--d) * .14) } .venn__c--b{ padding-right:calc(var(--d) * .14) }
  .venn__cards{ position:static; margin-top:40px; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap) }
  .vn{ position:static; width:auto }
}
@media (max-width:767px){
  .core{ --d:min(190px, 48vw) }
  .venn__c b{ font-size:16px; line-height:1.4 }
  .venn__x{ font-size:16px }
  .venn__cards{ grid-template-columns:1fr }
  .vn{ padding:20px 22px }
}

/* ---------- 4대 사업: 고정 화면 + 스크롤 설명 ---------- */
.areas{ background:var(--bg-light) }
.areas{ --top:calc(var(--header) + 64px); --avail:calc(100svh - var(--header) - 64px); --stH:min(640px, calc(var(--avail) - 96px)) }
.areas__body{ margin-top:72px; align-items:start }
/* 헤더+섹션 탭 아래 남은 화면의 정중앙에 고정 */
.stage{ grid-column:1 / 7; position:sticky; top:calc(var(--top) + (var(--avail) - var(--stH)) / 2); height:var(--stH); min-height:420px }
.stage__frame{ position:relative; height:100%; display:flex; flex-direction:column; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg,#1A1540,#0E0C1C 55%); box-shadow:0 60px 100px -50px rgba(47,31,196,.55), inset 0 0 0 1px rgba(255,255,255,.06) }
.stage__frame::before{ content:""; position:absolute; z-index:-1; width:70%; aspect-ratio:1; right:-20%; top:-25%; border-radius:50%;
  background:radial-gradient(circle, rgba(127,216,255,.22), transparent 65%); transition:translate 1.2s var(--ease) }
.stage[data-at="1"] .stage__frame::before{ translate:-60% 30% }
.stage[data-at="2"] .stage__frame::before{ translate:-20% 70% }
.stage[data-at="3"] .stage__frame::before{ translate:-80% 10% }
.stage__bar{ display:flex; align-items:center; gap:8px; height:56px; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.07) }
.stage__bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18) }
.stage__label{ margin-left:auto; font-size:16px; font-weight:600; color:rgba(255,255,255,.45); letter-spacing:.04em }
.stage__screens{ position:relative; flex:1 }
.stage__screens .vis{ position:absolute; inset:0; opacity:0; translate:0 18px; transition:opacity .7s var(--ease), translate .9s var(--ease); pointer-events:none }
.stage__screens .vis.is-on{ opacity:1; translate:0 0 }
.stage__prog{ display:flex; align-items:center; gap:14px; height:64px; padding:0 28px; font-size:16px; font-weight:700; color:rgba(255,255,255,.45); font-variant-numeric:tabular-nums }
.stage__no{ color:#fff }
.stage__track{ flex:1; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden }
.stage__track i{ display:block; height:100%; background:linear-gradient(90deg,var(--point-on-dark),var(--cyan)); transform-origin:left; scale:.25 1; transition:scale .8s var(--ease) }

.bizlist{ grid-column:8 / 13 }
.biz{ min-height:var(--avail); padding:48px 0; display:flex; flex-direction:column; justify-content:center; border-top:1px solid var(--line-strong) }
.biz:first-child{ border-top:0 }
.biz:first-child,.biz:last-child{ min-height:var(--stH); padding-top:0; padding-bottom:0 }
.biz__vis{ display:none }
.biz__no{ font-size:16px; font-weight:700; letter-spacing:.08em; color:var(--text-sub); transition:color .5s var(--ease) }
.biz__k{ margin-top:28px; font-size:16px; font-weight:700 }
.biz__k--a{ color:#3B4FD8 } .biz__k--b{ color:#7B35D6 }
.biz__title{ margin-top:10px; font-size:44px; font-weight:700; line-height:1.25; letter-spacing:-.045em; color:var(--text-strong) }
.biz__desc{ margin-top:20px; font-size:18px; line-height:1.75; color:var(--text-body) }
.biz__pts{ margin-top:28px; display:flex; flex-direction:column; gap:12px }
.biz__pts li{ position:relative; padding-left:30px; font-size:17px; font-weight:500; color:var(--text-strong) }
.biz__pts li::before{ content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%; background:var(--point-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234330E6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat }
.biz__prods{ margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.biz__prods span{ width:100%; margin-bottom:4px; font-size:16px; font-weight:600; color:var(--text-sub) }
.biz__prods a{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; font-size:16px; font-weight:600; color:var(--text-strong);
  background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:color .3s var(--ease), box-shadow .3s var(--ease) }
.biz__prods a:hover{ color:var(--point); box-shadow:inset 0 0 0 1px var(--point) }
.biz.is-on .biz__no{ color:var(--point) }

@media (max-width:1280px){ .biz__title{ font-size:38px } }
@media (max-width:1024px){
  .stage{ display:none }
  .bizlist{ grid-column:1 / -1 }
  .biz,.biz:first-child,.biz:last-child{ min-height:0; padding:56px 0; justify-content:flex-start }
  .biz:first-child{ padding-top:0 }
  .biz__vis{ display:block; position:relative; margin-bottom:36px; aspect-ratio:16 / 11; border-radius:var(--r-xl); overflow:hidden;
    background:linear-gradient(160deg,#1A1540,#0E0C1C 55%); box-shadow:0 40px 80px -50px rgba(47,31,196,.55) }
  .biz__vis .vis{ position:absolute; inset:0 }
}
@media (max-width:767px){
  .areas__body{ margin-top:40px }
  .biz,.biz:first-child,.biz:last-child{ padding:44px 0 }
  .biz:first-child{ padding-top:0 }
  .biz__vis{ aspect-ratio:auto; height:400px; border-radius:var(--r-lg); margin-bottom:28px }
  .biz__title{ font-size:30px }
  .biz__desc{ font-size:16px }
  .biz__pts li{ font-size:16px }
}

/* ---------- 데모 화면 공통 ---------- */
.vis{ display:flex; flex-direction:column; justify-content:center; gap:18px; padding:clamp(24px,4vw,48px); color:#fff; font-size:16px }
.vis [data-a]{ opacity:0; translate:0 14px }
.vis.is-play [data-a]{ animation:vin .8s var(--ease) forwards; animation-delay:calc(var(--d, 0) * 1s) }
@keyframes vin{ to{ opacity:1; translate:0 0 } }
.glass{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); border-radius:16px }

/* 01 검색 */
.vs__bar{ display:flex; align-items:center; gap:12px; height:64px; padding:0 22px; border-radius:999px; background:#fff; color:var(--text-strong); font-size:18px; font-weight:600;
  box-shadow:0 20px 50px -20px rgba(127,216,255,.5) }
.vs__ic{ width:22px; height:22px; flex:none; background:var(--point);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat }
.vs__q{ white-space:nowrap; overflow:hidden; text-overflow:clip }
.vs__caret{ width:2px; height:22px; background:var(--point); animation:blink 1s steps(1) infinite }
@keyframes blink{ 50%{ opacity:0 } }
.vs__chips{ display:flex; flex-wrap:wrap; gap:8px }
.vs__chips span{ padding:6px 14px; border-radius:999px; font-weight:600; color:#BFF0FF; background:rgba(63,200,255,.12); box-shadow:inset 0 0 0 1px rgba(63,200,255,.3) }
.vs__res{ display:flex; flex-direction:column; gap:10px }
.vs__res li{ position:relative; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.vs__res li:first-child{ background:rgba(67,48,230,.22); box-shadow:inset 0 0 0 1px rgba(167,158,255,.5) }
.vs__res b{ display:block; font-size:17px; font-weight:700 }
.vs__res p{ margin-top:4px; color:rgba(255,255,255,.6) }
.vs__res em{ position:absolute; right:16px; top:16px; padding:2px 10px; border-radius:999px; font-style:normal; font-weight:700; color:#fff; background:var(--point) }

/* 02 상담 */
.vis--chat{ gap:14px }
.vc{ max-width:82%; padding:14px 18px; border-radius:20px; line-height:1.6 }
.vc--u{ align-self:flex-end; border-bottom-right-radius:6px; background:rgba(255,255,255,.1) }
.vc--b{ align-self:flex-start; border-bottom-left-radius:6px; background:linear-gradient(135deg,var(--point),#6B3FE6); box-shadow:0 20px 40px -20px rgba(67,48,230,.8) }
.vc--b i{ display:inline-grid; place-items:center; margin-right:8px; padding:0 8px; height:24px; border-radius:6px; font-style:normal; font-weight:800; color:var(--point); background:#fff; vertical-align:1px }
.vc__sum{ margin-top:6px; padding:18px 20px; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(167,158,255,.35) }
.vc__sum b{ display:block; font-weight:700; color:var(--point-on-dark) }
.vc__sum > span{ display:block; margin-top:4px; font-size:17px; font-weight:600 }
.vc__tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px }
.vc__tags em{ padding:4px 12px; border-radius:999px; font-style:normal; font-weight:600; color:rgba(255,255,255,.8); background:rgba(255,255,255,.08) }
.vc__dots{ display:inline-flex; gap:4px }

/* 03 옴니채널 */
.vis--omni{ display:block; padding:0 }
.vo__lines{ position:absolute; inset:12% 8%; width:84%; height:76% }
.vo__lines path{ fill:none; stroke:rgba(167,158,255,.5); stroke-width:2; stroke-dasharray:6 10; vector-effect:non-scaling-stroke }
.vis--omni.is-play .vo__lines path{ animation:flow 1.6s linear infinite }
@keyframes flow{ to{ stroke-dashoffset:-32 } }
.vo__hub{ position:absolute; left:50%; top:50%; width:clamp(130px,28%,170px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #8A7BFF, var(--point) 55%, #22188F); box-shadow:0 0 0 14px rgba(67,48,230,.18), 0 0 80px rgba(67,48,230,.7) }
.vo__hub b{ font-size:44px; font-weight:800; line-height:1; letter-spacing:-.04em }
.vo__hub span{ margin-top:6px; font-weight:600; color:rgba(255,255,255,.85) }
.vo__hub::after{ content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(167,158,255,.6); animation:vx 2.8s var(--ease) infinite }
.vo__n{ position:absolute; translate:-50% -50%; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; font-weight:700; white-space:nowrap;
  background:rgba(20,17,46,.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px -20px rgba(0,0,0,.6) }
.vo__n--1{ left:22%; top:21% } .vo__n--2{ left:78%; top:21% } .vo__n--3{ left:22%; top:79% } .vo__n--4{ left:78%; top:79% }
.vo__ic{ width:20px; height:20px; background:var(--cyan); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat }
.vo__ic--tel{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") }
.vo__ic--sms{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") }
.vo__ic--talk{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7L5.8 21l3.9-2.6c.7.1 1.5.2 2.3.2 5.5 0 10-3.6 10-8S17.5 3 12 3z'/%3E%3C/svg%3E") }
.vo__ic--mail{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E") }

/* 04 클라우드 */
.vk__tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.vk__tiles span{ display:flex; align-items:center; gap:10px; height:64px; padding:0 18px; border-radius:16px; font-weight:700;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.vk__tiles span::before{ content:""; width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--point-on-dark),var(--cyan)) }
.vk__api{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; height:56px; border-radius:16px; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(90deg,var(--point),#7A4BEA,#2BA9E8); box-shadow:0 20px 50px -20px rgba(67,48,230,.9); overflow:hidden }
.vk__api::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); translate:-100% 0 }
.vis--cloud.is-play .vk__api::after{ animation:shine 2.6s 1.2s var(--ease) infinite }
@keyframes shine{ to{ translate:100% 0 } }
.vk__api i{ width:20px; height:20px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.3A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.3A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E") center/contain no-repeat }
.vk__cmp{ padding:20px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); display:flex; flex-direction:column; gap:12px }
.vk__cmp p{ display:grid; grid-template-columns:120px 1fr; align-items:center; gap:12px; font-weight:600; color:rgba(255,255,255,.8) }
.vk__bar{ height:12px; border-radius:6px; transform-origin:left; scale:0 1 }
.vk__bar--a{ background:rgba(255,255,255,.22) }
.vk__bar--b{ width:38%; background:linear-gradient(90deg,var(--point-on-dark),var(--cyan)) }
.vis--cloud.is-play .vk__bar{ animation:grow 1.2s var(--ease) forwards } .vis--cloud.is-play .vk__bar--b{ animation-delay:1.5s } .vis--cloud.is-play .vk__bar--a{ animation-delay:1.2s }
@keyframes grow{ to{ scale:1 1 } }
.vk__cmp small{ font-size:16px; color:rgba(255,255,255,.4) }
@media (max-width:767px){
  .vis{ gap:12px; padding:22px }
  .vs__bar{ height:54px; font-size:16px; padding:0 18px }
  .vs__res li{ padding:12px 16px } .vs__res li:nth-child(3){ display:none } .vs__res em{ position:static; display:inline-block; margin-top:8px }
  .vc{ max-width:92%; padding:12px 14px }
  .vo__n{ padding:9px 13px; gap:7px } .vo__ic{ width:16px; height:16px }
  .vo__n--1,.vo__n--3{ left:24% } .vo__n--2,.vo__n--4{ left:76% }
  .vo__hub b{ font-size:34px }
  .vk__tiles span{ height:52px; padding:0 14px }
  .vk__cmp p{ grid-template-columns:1fr; gap:6px }
}

/* ---------- 적용 산업: 펼쳐지는 패널 ---------- */
.inds{ background:#fff }
.acc{ margin-top:64px; display:flex; gap:var(--gap); height:600px }
.acc__it{ position:relative; flex:1 1 0; min-width:0; border-radius:var(--r-xl); overflow:hidden; transition:flex-grow .8s var(--ease) }
.acc__it.is-on{ flex-grow:3.4 }
.acc__it a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:36px; color:#fff; isolation:isolate }
.acc__it img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; scale:1.08; transition:scale 1.2s var(--ease) }
.acc__it.is-on img{ scale:1 }
.acc__it a::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,12,28,.15) 30%, rgba(14,12,28,.85)); transition:background-color .6s var(--ease) }
.acc__it:not(.is-on) a::before{ background-color:rgba(14,12,28,.35) }
.acc__no{ position:absolute; top:32px; left:36px; font-size:16px; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.75) }
.acc__tx h3{ font-size:36px; font-weight:700; letter-spacing:-.04em }
.acc__tx p,.acc__tx .link-arrow{ max-width:440px; opacity:0; translate:0 12px; transition:opacity .5s var(--ease), translate .6s var(--ease) }
.acc__tx p{ margin-top:12px; font-size:18px; line-height:1.65; color:rgba(255,255,255,.85) }
.acc__tx .link-arrow{ margin-top:12px; color:#fff }
.acc__it.is-on .acc__tx p,.acc__it.is-on .acc__tx .link-arrow{ opacity:1; translate:0 0; transition-delay:.25s }
.acc__it:not(.is-on) .acc__tx p{ white-space:nowrap }
@media (max-width:1024px){
  .acc{ height:auto; flex-direction:column }
  .acc__it,.acc__it.is-on{ flex:none; height:380px }
  .acc__tx p,.acc__tx .link-arrow{ opacity:1; translate:none }
  .acc__it:not(.is-on) .acc__tx p{ white-space:normal }
  .acc__it:not(.is-on) a::before{ background-color:transparent }
  .acc__it img{ scale:1 }
}
@media (max-width:767px){
  .acc{ margin-top:36px }
  .acc__it,.acc__it.is-on{ height:340px; border-radius:var(--r-lg) }
  .acc__it a{ padding:24px } .acc__no{ top:22px; left:24px }
  .acc__tx h3{ font-size:28px } .acc__tx p{ font-size:16px }
}

.page-business .cta{ background:#fff }

@media (prefers-reduced-motion:reduce){
  .vis [data-a]{ opacity:1; translate:none }
  .vk__bar{ scale:1 1 }
  .venn__x::after,.vo__hub::after{ animation:none }
}

/* 옴니채널 노드·허브는 가운데 정렬(translate)을 유지한 채 커지며 등장 */
.vis .vo__n[data-a],.vis .vo__hub[data-a]{ translate:-50% -50%; scale:.85 }
.vis.is-play .vo__n[data-a],.vis.is-play .vo__hub[data-a]{ animation-name:vpop }
@keyframes vpop{ to{ opacity:1; scale:1 } }
@media (prefers-reduced-motion:reduce){ .vis .vo__n[data-a],.vis .vo__hub[data-a]{ scale:1 } }

/* 산업 패널 사진 초점 */
.acc__it:nth-child(1) img{ object-position:30% 40% }
.acc__it:nth-child(3) img{ object-position:78% 50% }

/* 모바일: 카드 시각물이 잘리지 않도록 내용 높이를 따르게 하고, 번호·카테고리·제목·본문 간격을 촘촘하게 */
@media (max-width:1024px){
  .biz__vis{ aspect-ratio:auto; min-height:440px }
  .biz__vis .vis{ position:relative; inset:auto; min-height:440px }
  .biz__vis .vis--omni{ position:absolute; inset:0; min-height:0 }
}
@media (max-width:767px){
  .biz__vis{ height:auto; min-height:360px; margin-bottom:20px }
  .biz__vis .vis{ min-height:360px }
  .biz__k{ margin-top:12px }
  .biz__title{ margin-top:6px; line-height:1.3 }
  .biz__desc{ margin-top:12px; line-height:1.7 }
  .biz__pts{ margin-top:18px; gap:10px }
  .biz__prods{ margin-top:22px }
}