/* ---------- 글꼴 (우리 서버에 두고 씁니다 - 외부 접속 없음) ----------
   .sub 파일은 이 사이트에서 쓰는 글자(한글 2,350자 + 본문 글자 + 기호)만 남긴 것입니다.
   원본(.woff2)의 약 1/4 크기입니다. 목록에 없는 글자는 시스템 글꼴로 대신 나옵니다.
   글꼴을 다시 만들 때는 _src/make_assets.py 를 실행합니다. */
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Pretendard-Regular.sub.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/Pretendard-Medium.sub.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/Pretendard-Bold.sub.woff2") format("woff2"); }

:root{
  /* ------------------------------------------------------------------
     색은 모두 회사 로고에서 나왔습니다.
     로고에 실제로 쓰인 색은 세 가지입니다.
        회색   #808285   (bitnet 글자)
        진초록 #70845c   (심볼의 짙은 날개)
        연두   #8dc63f   (i 위의 점, 심볼의 밝은 날개)
     아래 값들은 이 세 가지를 밝게/어둡게 한 것뿐, 새로 지어낸 색이 아닙니다.
     명암은 글자가 읽히도록 계산해서 정했습니다(흰 글자 기준 4.5:1 이상).
     ------------------------------------------------------------------ */

  /* 로고 원본 3색 (그대로) */
  --logo-gray:   #808285;
  --logo-olive:  #70845c;
  --logo-green:  #8dc63f;

  /* 어두운 바탕 - 진초록에서 파생. 변수 이름은 --navy 로 남아 있지만
     실제 색은 짙은 초록입니다(이름을 바꾸면 쓰는 곳을 전부 고쳐야 해서 그대로 둠) */
  --navy:        #2b3823;   /* 헤더 글자 · 어두운 바탕 기준 */
  --navy-2:      #3e5232;   /* 그보다 밝은 톤 */

  /* 포인트 - 연두에서 파생 */
  --blue:        #527a19;   /* 버튼 · 링크. 흰 글자가 읽히도록 로고 연두보다 진하게. 연회색 바탕 위 글자도 4.5:1 이상 (2026-10-01 조정, 전: #57811b) */
  --blue-light:  #f0f6e6;   /* 아주 연한 초록 배경 */
  --cyan:        #8dc63f;   /* 로고 연두 원본 - 강조용 */

  /* 글자 - 회색에서 파생 */
  --ink:         #2f3230;
  --ink-2:       #5b5f5b;
  --ink-3:       #6b6f6a;   /* 보조 글씨. 흰·연회색 바탕 위 4.7:1 이상 (2026-10-01 조정, 전: #8b8e89 3.3:1) */

  /* 면 */
  --bg:          #ffffff;
  --bg-soft:     #f5f7f2;
  --line:        #e4e8dd;

  --radius:      12px;
  --radius-lg:   18px;
  --shadow:      0 1px 2px rgba(30,40,24,.06), 0 8px 24px rgba(30,40,24,.06);
  --shadow-lg:   0 2px 4px rgba(30,40,24,.06), 0 18px 48px rgba(30,40,24,.12);

  --container:   1160px;
  --header-h:    72px;

  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR",
          system-ui, sans-serif;
}

/* ---------- 기본 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.7; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; word-break:keep-all;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.35; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- 헤더 ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{ display:flex; align-items:center; }
.logo img{ height:42px; width:auto; display:block; }
.footer .logo img{ height:50px; }
@media (max-width:640px){ .logo img{ height:36px; } }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  padding:9px 15px; border-radius:8px; font-size:15.5px; font-weight:600; color:var(--ink-2);
  white-space:nowrap; /* 공백이 든 메뉴만 두 줄로 꺾여 제각각 보이던 것을 막습니다 */
  transition:color .15s, background .15s;
}
.nav a:hover{ color:var(--blue); background:var(--blue-light); }
.nav a.is-active{ color:var(--navy); background:var(--bg-soft); }

.header__cta{ display:none; align-items:center; gap:14px; }   /* 넓은 화면에는 메뉴 버튼이 필요 없습니다 */

.navtoggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
  border-radius:10px; cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.navtoggle span{ display:block; width:18px; height:2px; background:var(--navy); position:relative; transition:.2s; }
.navtoggle span::before,.navtoggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--navy); transition:.2s;
}
.navtoggle span::before{ top:-6px; } .navtoggle span::after{ top:6px; }
.navtoggle.is-open span{ background:transparent; }
.navtoggle.is-open span::before{ top:0; transform:rotate(45deg); }
.navtoggle.is-open span::after{ top:0; transform:rotate(-45deg); }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:10px; font-weight:700; font-size:15.5px;
  border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap;
}
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:#46690f; transform:translateY(-1px); box-shadow:0 8px 20px rgba(87,129,27,.28); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); }
.btn--outline{ background:#fff; color:var(--navy); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn--lg{ padding:16px 34px; font-size:17px; }

/* 어두운 초록 바탕(첫 화면 · 문의 유도 띠) 위에서는
   진한 초록 버튼이 배경에 묻힙니다(대비 2.7:1).
   그래서 그 자리만 로고의 밝은 연두를 쓰고 글자를 진하게 합니다(6.1:1). */
.hero .btn--primary,
.cta .btn--primary,
.pagehead .btn--primary{ background:var(--logo-green); color:#1e2818; }
.hero .btn--primary:hover,
.cta .btn--primary:hover,
.pagehead .btn--primary:hover{ background:#9ed24e; box-shadow:0 8px 20px rgba(141,198,63,.3); }

/* ---------- 섹션 공통 ---------- */
.section{ padding:96px 0; }
.section--soft{ background:var(--bg-soft); }
.section__head{ text-align:center; max-width:760px; margin:0 auto 56px; }
.section__head--left{ text-align:left; margin-left:0; }
.eyebrow{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.16em;
  color:var(--blue); text-transform:uppercase; margin-bottom:14px;
}
.section__title{ font-size:38px; margin-bottom:18px; color:var(--navy); }
.section__desc{ font-size:17px; color:var(--ink-2); }

/* ---------- 히어로(메인 첫 화면) ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#1e2818 0%, var(--navy) 45%, var(--navy-2) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 84% 16%, rgba(141,198,63,.16), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(112,132,92,.42), transparent 52%);
}
.hero__grid-bg{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-top:104px; padding-bottom:112px;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  font-size:13.5px; font-weight:600; margin-bottom:26px;
}
.hero__badge i{ width:7px; height:7px; border-radius:50%; background:#8dc63f; box-shadow:0 0 0 4px rgba(61,220,151,.22); }
.hero h1{ font-size:52px; line-height:1.25; margin-bottom:24px; letter-spacing:-.035em; }
.hero h1 em{ font-style:normal; color:#b9d989; }
.hero__lead{ font-size:18.5px; color:rgba(255,255,255,.82); margin-bottom:38px; max-width:520px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__stats{
  display:flex; gap:40px; margin-top:56px; padding-top:32px; border-top:1px solid rgba(255,255,255,.16);
}
.hero__stats b{ display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; }
.hero__stats span{ font-size:14px; color:rgba(255,255,255,.65); }

/* ---------- 서브페이지 상단 배너 ---------- */
.pagehead{
  position:relative; color:#fff; padding:74px 0 66px; overflow:hidden;
  background:linear-gradient(120deg,#1e2818 0%, var(--navy) 60%, var(--navy-2) 100%);
}
.pagehead::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 88% 10%, rgba(141,198,63,.15), transparent 45%);
}
.pagehead__inner{ position:relative; z-index:2; }
.pagehead h1{ font-size:42px; margin-bottom:14px; }
.pagehead p{ font-size:17.5px; color:rgba(255,255,255,.78); max-width:680px; }
.breadcrumb{ font-size:14px; color:rgba(255,255,255,.6); margin-bottom:16px; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- 카드 그리드 ---------- */
.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 30px; transition:.22s;
}
.card:hover{ border-color:#c9d6bd; box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.card__icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-light); color:var(--blue); margin-bottom:20px;
}
.card h3{ font-size:20px; margin-bottom:12px; color:var(--navy); }
.card p{ color:var(--ink-2); font-size:15.5px; }
.card__link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-weight:700; font-size:14.5px; color:var(--blue); transition:gap .15s;
}
.card__link:hover{ gap:10px; }

/* 번호가 붙은 특징 목록 */
.feature{ display:flex; gap:18px; }
.feature__num{
  flex:none; width:40px; height:40px; border-radius:11px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.feature h3,.feature h4{ font-size:17.5px; margin-bottom:8px; color:var(--navy); }
.feature p{ color:var(--ink-2); font-size:15.5px; }

/* ---------- 체크 목록 ---------- */
.checklist li{
  position:relative; padding-left:30px; margin-bottom:12px; color:var(--ink-2); font-size:16px;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:9px; width:18px; height:18px; border-radius:50%;
  background:var(--blue-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357811b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.checklist li b{ color:var(--ink); }

/* ---------- 2단 본문 ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--wide{ grid-template-columns:1.15fr .85fr; }
/* 그림이 오른쪽에 있는 구역: 그림 칸을 조금 더 넓게. 1024px 이하에서는 한 줄로 내려갑니다 */
.split--fig{ grid-template-columns:1fr 1.15fr; gap:48px; }
.split--stretch{ align-items:stretch; }
.split__body h2{ font-size:32px; color:var(--navy); margin-bottom:18px; }
.split__body p{ color:var(--ink-2); font-size:16.5px; margin-bottom:16px; }

.figure{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow);
}
.figure figcaption{ margin-top:16px; font-size:13.5px; color:var(--ink-3); text-align:center; }

/* ---------- 표 ---------- */
.table{ width:100%; border-collapse:collapse; font-size:15.5px; }
.table th,.table td{ padding:16px 20px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th{ width:190px; color:var(--navy); font-weight:700; background:var(--bg-soft); }
.table tr:first-child th, .table tr:first-child td{ border-top:2px solid var(--navy); }
.table--spec th{ width:auto; background:var(--navy); color:#fff; border-bottom:none; }
.table--spec td{ color:var(--ink-2); }
.table-wrap{ overflow-x:auto; }

/* ---------- 연혁 ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); }
.timeline li{ position:relative; padding-bottom:30px; }
.timeline li::before{
  content:""; position:absolute; left:-34px; top:8px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:4px solid var(--blue);
}
.timeline b{ display:block; font-size:19px; color:var(--navy); margin-bottom:4px; }
.timeline p{ color:var(--ink-2); font-size:15.5px; }

/* ---------- FAQ ---------- */
.faq{ border-top:2px solid var(--navy); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; gap:14px; padding:22px 4px; background:none; border:0;
  font:inherit; font-weight:700; font-size:17px; color:var(--navy); text-align:left; cursor:pointer;
}
.faq__q::before{ content:"Q"; flex:none; color:var(--blue); font-weight:800; }
.faq__q::after{
  content:""; flex:none; margin-left:auto; width:11px; height:11px; margin-top:6px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .2s;
}
.faq__item.is-open .faq__q::after{ transform:rotate(-135deg); }
.faq__a{ display:none; padding:0 4px 24px 30px; color:var(--ink-2); font-size:15.5px; }
.faq__item.is-open .faq__a{ display:block; }

/* ---------- 문의 폼 ---------- */
.form{ display:grid; gap:18px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{ display:block; font-size:14.5px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.field label i{ color:#e03131; font-style:normal; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid #8b9582; border-radius:10px;
  font:inherit; font-size:16px; color:var(--ink); background:#fff; transition:.15s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); box-shadow:0 0 0 4px rgba(82,122,25,.18);
}
.form__agree{ display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color:var(--ink-2); }
.form__agree input{ width:17px; height:17px; margin-top:3px; flex:none; }
.form__note{ font-size:13.5px; color:var(--ink-3); }

/* ---------- 연락처 박스 ---------- */
.contactbox{ display:grid; gap:20px; }
.contactbox__item{
  display:flex; gap:16px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
.contactbox__ico{
  flex:none; width:44px; height:44px; border-radius:12px; background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.contactbox__item b{ display:block; font-size:14px; color:var(--ink-3); font-weight:700; margin-bottom:4px; }
.contactbox__item p{ font-size:17px; font-weight:700; color:var(--navy); }
.contactbox__item span{ font-size:14.5px; color:var(--ink-2); font-weight:400; }

/* ---------- CTA 띠 ---------- */
.cta{
  position:relative; overflow:hidden; color:#fff; text-align:center; padding:78px 0;
  background:linear-gradient(120deg,var(--navy) 0%, var(--navy-2) 55%, #4e6a3e 100%);
}
.cta::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 120%, rgba(141,198,63,.20), transparent 52%);
}
.cta__inner{ position:relative; z-index:2; }
.cta h2{ font-size:34px; margin-bottom:14px; }
.cta p{ font-size:17.5px; color:rgba(255,255,255,.8); margin-bottom:32px; }
.cta__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- 푸터 ---------- */
.footer{ background:#1e2818; color:rgba(255,255,255,.62); font-size:14.5px; padding:60px 0 34px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .logo{ margin-bottom:18px; }
.footer h4,.footer__h{ color:#fff; font-size:15.5px; font-weight:700; line-height:1.35; margin-bottom:16px; letter-spacing:-.02em; }
.footer li{ margin-bottom:9px; }
.footer a:hover{ color:#fff; }
.footer__info{ line-height:1.9; }
.footer__info b{ color:rgba(255,255,255,.85); font-weight:600; }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:24px;
  font-size:13.5px; color:rgba(255,255,255,.62); flex-wrap:wrap;
}
.footer__bottom nav{ display:flex; gap:20px; }

/* ---------- 확인 필요 표시 ----------
   사장님이 내용을 채워 넣어야 하는 자리입니다.
   내용을 다 채운 뒤에는 이 표시(.todo 로 감싼 부분)를 지우면 됩니다.
   전체를 한 번에 숨기려면 아래 .todo 규칙에 display:none 을 넣으십시오. */
.todo{
  border:2px dashed #e8a33d; background:#fff8ec; border-radius:var(--radius);
  padding:18px 22px; margin:22px 0; font-size:15px; color:#8a5a10;
}
.todo b{ display:block; color:#a4670a; margin-bottom:6px; font-size:14px; letter-spacing:.02em; }
.todo ul{ list-style:disc; padding-left:20px; }
.todo li{ margin-bottom:4px; }

/* ---------- 등장 애니메이션 ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .hdia__lines path,.hdia__stem,.hero__badge i::after,.dia--flow::after,.dia--flow .dia__step,.netviz__core::before{ animation:none !important; }
  .dia--hub .dia__hub,.dia--hub .dia__hub::before,.dia--hub .dia__hub::after,.dia--hub .dia__card,.dia--hub .dia__ico{ animation:none !important; }
  .dia--vpn .dia__card,.dia--vpn .dia__link,.dia--vpn .dia__tunnel,.dia--vpn .dia__pill,.dia--vpn .dia__pill::after,.card__icon svg *,.card .checklist li{ animation:none !important; }
  .timeline::before,.timeline li,.timeline li::before,.feature,.feature__num,.checklist li,.table--cmp tbody tr,.faq__a,.cta::after,.btn--primary::after,.pagehead h1,.pagehead p,.pagehead .breadcrumb,.pagehead::after,.contactbox__item,.contactbox__ico,.hero h1,.hero__lead,.hero__actions,.hero__stats,.hero__badge,.figure .step-blk{ animation:none !important; }
  .steps::before,.card > .feature__num,.faq__item,.faq__q::before{ animation:none !important; }
  .form > *,.btn--primary:disabled,#form-result,.contactbox + div{ animation:none !important; }
  #fw-vs-ips .card,.card__kicker::after,.dia--flow > div:last-child{ animation:none !important; }
  .dc *,.dc *::before,.dc *::after{ animation:none !important; }
  .dcbg *,.dcbg__scan,.hl::after,.vs-pair .card{ animation:none !important; }
  .phbg,.phbg *,.phbg *::before,.phbg *::after{ animation:none !important; }
  .netviz__tag--pic *{ animation:none !important; }
}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; padding-top:80px; padding-bottom:88px; }
  .hero h1{ font-size:42px; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split--wide,.split--fig{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  /* 머리글에 흐림 효과(backdrop-filter)가 있으면 그 안의 position:fixed 요소는
     화면이 아니라 머리글을 기준으로 놓입니다. 그래서 메뉴 판이 33px 띠로만 열렸습니다.
     좁은 화면에서는 흐림을 끄고 흰 바탕으로 두어 메뉴가 화면 전체 기준으로 열리게 합니다. */
  .header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .header__cta{ display:flex; }
  .navtoggle{ display:flex; }
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    flex-direction:column; align-items:stretch; gap:2px; padding:16px 20px;
    background:#fff; border-top:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain;
    /* 닫힌 메뉴를 화면 오른쪽 바깥에 두면 그만큼 문서가 넓어져
       가로 스크롤바가 생깁니다. 그래서 옆으로 밀지 않고 제자리에서 사라지게 합니다. */
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:15px 12px; font-size:17px; border-radius:10px; }
}
@media (max-width:640px){
  .section{ padding:64px 0; }
  .section__title{ font-size:28px; }
  .section__head{ margin-bottom:38px; }
  .hero h1{ font-size:33px; }
  .hero__lead{ font-size:16.5px; }
  .hero__stats{ gap:24px; flex-wrap:wrap; }
  .hero__stats b{ font-size:24px; }
  .pagehead{ padding:56px 0 50px; }
  .pagehead h1{ font-size:30px; }
  .pagehead p{ font-size:16px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .card{ padding:28px 24px; }
  .split__body h2{ font-size:25px; }
  .cta h2{ font-size:26px; }
  .form__row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:32px; }
  .table th{ width:120px; padding:14px; }
  .table td{ padding:14px; }
}

/* ---------- 설명용 그림 (그림 속 글씨 대신 진짜 글씨라 또렷합니다) ---------- */
.dia{ background:var(--bg-soft); border-radius:12px; padding:16px; }
.dia__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dia__card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
            display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.dia__head{ display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:8px; }
.dia__ico{ width:28px; height:28px; border-radius:50%; background:#f0f6e6; color:var(--blue);
           display:flex; align-items:center; justify-content:center; flex:none; }
.dia__t{ font-size:16.5px; font-weight:700; color:var(--navy); letter-spacing:-.02em; }
.dia__d{ font-size:14.5px; color:var(--ink); line-height:1.65; margin:0; font-weight:500; }
.dia__label{ text-align:center; font-size:13px; letter-spacing:2px; color:var(--ink-2); font-weight:600; }
.dia__pill{ text-align:center; font-weight:700; color:#46690f; font-size:15px;
            background:rgba(87,129,27,.12); border:1.6px solid var(--blue);
            border-radius:999px; padding:9px 14px; }
.dia__link{ width:2px; height:16px; background:var(--blue); margin:7px auto; border-radius:2px; }
.dia__step{ border-radius:10px; padding:9px 14px; display:flex; gap:13px; align-items:flex-start; margin-bottom:7px; }
.dia__step b{ color:#fff; font-size:13.5px; flex:none; }
.dia__step span{ color:#eaf5da; font-size:14px; line-height:1.4; font-weight:500; }
.dia__step small{ display:block; color:#dcedc9; font-size:13px; margin-top:3px; }
@media (max-width:560px){ .dia__grid{ grid-template-columns:1fr; } }

/* 네 칸 가운데 동그라미 (비트넷을 가운데 두고 네 서비스가 둘러싼 모양) */
.dia--hub .dia__grid{ position:relative; gap:44px; }
.dia__hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:148px; height:148px; border-radius:50%; z-index:2;
  background:#fff; border:2px solid var(--blue); box-shadow:0 6px 18px rgba(43,56,35,.10);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center;
}
.dia__hub b{ font-size:19px; color:var(--navy); letter-spacing:-.02em; }
.dia__hub span{ font-size:13px; color:var(--ink-2); line-height:1.4; font-weight:500; }
@media (max-width:560px){ .dia__hub{ display:none; } .dia--hub .dia__grid{ gap:14px; } }

/* ---------- 홈 첫 화면 구성도 (진짜 글씨라 또렷합니다) ---------- */
.hdia{ max-width:460px; margin:0 auto; text-align:center; }
.hdia__net{ font-size:13.5px; font-weight:700; letter-spacing:.35em; padding-left:.35em; color:#c9e3a2; }
.hdia__stem{ width:2px; height:26px; background:#b9d989; opacity:.7; margin:8px auto 0; border-radius:2px; }
.hdia__core{ margin:0 auto; max-width:260px; padding:16px 18px; border-radius:16px;
             background:rgba(255,255,255,.13); border:1.6px solid #b9d989; }
.hdia__core b{ display:block; font-size:19px; color:#fff; letter-spacing:-.01em; }
.hdia__core span{ display:block; margin-top:6px; font-size:14px; color:#dcefc3; }
.hdia__lines{ display:block; width:100%; height:64px; }
.hdia__lines path{ stroke:#b9d989; stroke-width:1.8; stroke-dasharray:6 6; fill:none; opacity:.75; }
.hdia__nodes{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hdia__node{ padding:14px 8px; border-radius:14px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.38); }
.hdia__node b{ display:block; font-size:15.5px; color:#fff; line-height:1.3; }
.hdia__node span{ display:block; margin-top:6px; font-size:13.5px; color:#e1e8da; line-height:1.4; }
@media (max-width:560px){
  .hdia__nodes{ gap:8px; }
  .hdia__node{ padding:12px 5px; }
  .hdia__node b{ font-size:14.5px; }
  .hdia__node span{ font-size:13px; }
}

/* ---------- 방화벽 · IPS 비교, IPS + AI ---------- */
.card__kicker{ display:block; margin-bottom:10px; font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--blue); }
.card__limit{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.card__limit b{ color:var(--navy); margin-right:6px; }
.table--cmp tbody th{ width:150px; font-weight:700; color:var(--navy); background:var(--bg-soft); }
.table--cmp th,.table--cmp td{ text-align:center; vertical-align:middle; }
.table--cmp th + th,.table--cmp th + td,.table--cmp td + td{ border-left:1px solid var(--line); }
.table--cmp th + th{ border-left-color:rgba(255,255,255,.28); }
.ai-safe{ align-items:start; margin-top:56px; }
.ai-safe h2{ font-size:28px; }
.fi-note{ max-width:760px; margin:28px auto 0; text-align:center; color:var(--ink-2); font-size:16px; }
@media (max-width:640px){
  .table--cmp tbody th{ width:84px; }
}

/* 비교표: 입체감 (둥근 모서리, 그림자, 머리글 그라데이션, 줄 강조) */
.table-wrap--cmp{ margin:48px 0 0; padding:4px 0 34px; overflow:visible; }
.table--cmp{
  border-collapse:separate; border-spacing:0; border:1px solid #d9e1cf; border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(43,56,35,.10), 0 10px 24px -6px rgba(43,56,35,.22), 0 28px 48px -18px rgba(43,56,35,.28);
}
.table--cmp thead th{
  background:linear-gradient(180deg,#3b4c30 0%,#2b3823 100%);
  border-top:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.28);
  padding-top:18px; padding-bottom:18px; font-size:16px; letter-spacing:.01em;
}
.table--cmp-hl thead th:nth-child(3){ background:linear-gradient(180deg,#58821c 0%,#46670f 100%); }
.table--cmp tbody tr:first-child td{ border-top:0; }
.table--cmp tbody td{ background:#fff; transition:background .18s; }
.table--cmp tbody th{
  background:linear-gradient(90deg,#f7f9f3 0%,#eaf0e2 100%); box-shadow:inset -1px 0 0 #dde5d2;
  border-top:0; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle;
}
.table--cmp tbody tr:first-child th{ border-top:0; }
.table--cmp tbody tr:last-child th{ border-bottom:0; }
.table--cmp-hl tbody td:nth-child(3){ background:#fbfdf8; }
.table--cmp tbody tr:hover td{ background:#f3f8ea; }
.table--cmp tbody tr:hover th{ background:linear-gradient(90deg,#eef4e6 0%,#e0ead3 100%); }
.table--cmp tbody tr:last-child td{ border-bottom:0; }
@media (max-width:640px){ .table-wrap--cmp{ padding:2px 0 26px; } .table--cmp{ border-radius:14px; } }

/* ---------- 2026-10-08 검토 반영 ---------- */
figure.figure{ margin:0; }
.skip{
  position:absolute; left:12px; top:-64px; z-index:300; background:#fff; color:var(--navy);
  padding:11px 18px; border-radius:10px; font-weight:700; box-shadow:var(--shadow-lg); border:2px solid var(--blue);
}
.skip:focus{ top:12px; }
main:focus{ outline:none; }

/* 키보드로 이동할 때 어디에 있는지 보이게 */
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
.hero :focus-visible,.cta :focus-visible,.pagehead :focus-visible,.footer :focus-visible{ outline-color:var(--logo-green); }

/* 페이지 안 이동(#colocation 등) 시 고정 머리글이 제목을 가리지 않게 */
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* 휴대폰에서 누르기 편하게 (푸터·현재 위치 링크) */
.footer li a{ display:inline-block; padding:6px 0; }
.footer__bottom nav a{ display:inline-block; padding:8px 0; }
.breadcrumb a{ display:inline-block; padding:10px 8px; margin:-10px -8px; }
@media (max-width:640px){ .footer li a{ padding:10px 0; } }

/* 본문 속 링크는 색만 다르지 않게 밑줄 */
.form__agree a,.footer__info a{ text-decoration:underline; text-underline-offset:3px; }

/* 카드에 마우스를 올리면 살짝 떠오르는 효과 (등장 효과 규칙이 가리고 있었음) */
.card.reveal.is-in:hover{ transform:translateY(-3px); }

/* 문의 결과 안내(스크린리더가 읽도록 항상 DOM 에 있고, 비어 있으면 숨김) */
#form-result:empty{ display:none; }
.form__note.is-ok{ color:var(--blue); font-weight:700; }
.form__note.is-err{ color:#c0392b; font-weight:700; }

/* 인쇄(PDF 저장): 등장 효과로 숨은 내용이 빈 칸으로 나오지 않게 */
@media print{
  .header,.navtoggle,.cta,.skip{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero,.pagehead,.footer{ background:#fff !important; }
  .hero *,.pagehead *,.footer *{ color:#000 !important; }
  .faq__a{ display:block; }
  .card,.figure,.table{ break-inside:avoid; box-shadow:none !important; }
}

/* 비교표 아래 장비 설명 한 줄 */
.tbl-note{ max-width:760px; margin:0 auto; text-align:center; color:var(--ink-2); font-size:15px; }
.tbl-note b{ color:var(--navy); }

/* ---------- 움직임 (2026-10-13) — 위치·투명도만 움직여 휴대폰에서도 가볍습니다 ---------- */

/* 1) 첫 화면 구성도: 백본망에서 세 곳으로 흐르는 점선 */
@keyframes hdia-flow{ to{ stroke-dashoffset:-12; } }
.hdia__lines path{ animation:hdia-flow 1.1s linear infinite; }
/* INTERNET -> 백본망 세로선을 타고 내려오는 빛 한 점 */
@keyframes hdia-stem{ from{ background-position:0 -26px; } to{ background-position:0 26px; } }
.hdia__stem{
  background:linear-gradient(180deg, rgba(185,217,137,.55) 0 35%, #ffffff 50%, rgba(185,217,137,.55) 65% 100%);
  background-size:100% 26px; background-repeat:no-repeat; background-color:rgba(185,217,137,.45);
  animation:hdia-stem 1.6s linear infinite; opacity:1;
}

/* 2) 관제 운영 중 배지: 초록 점이 숨 쉬듯 번짐 */
@keyframes badge-pulse{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(2.6); opacity:0; } }
.hero__badge i{ position:relative; box-shadow:0 0 0 3px rgba(141,198,63,.25); }
.hero__badge i::after{
  content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid #8dc63f;
  animation:badge-pulse 2.2s ease-out infinite;
}

/* 3) 보안 4단계 그림: 접속 한 건이 위에서 내려와 단계를 거쳐 사내망에 도착 */
.dia--flow{ position:relative; }
@keyframes dia-drop{
  0%{ top:34px; opacity:0; }  6%{ opacity:1; }
  90%{ top:calc(100% - 46px); opacity:1; }  100%{ top:calc(100% - 46px); opacity:0; }
}
.dia--flow::after{
  content:""; position:absolute; left:50%; top:34px; width:11px; height:11px; margin-left:-5.5px; z-index:2;
  border-radius:50%; background:#8dc63f; box-shadow:0 0 0 4px rgba(141,198,63,.28), 0 0 12px rgba(141,198,63,.7);
  animation:dia-drop 3.6s ease-in-out infinite; pointer-events:none;
}
/* 점이 지나갈 때 그 단계가 살짝 밝아짐 (4단계 균등 간격) */
@keyframes dia-step-lit{ 0%,100%{ box-shadow:0 0 0 0 rgba(141,198,63,0); } 50%{ box-shadow:0 0 0 2px rgba(141,198,63,.65); } }
.dia--flow .dia__step{ animation:dia-step-lit 3.6s ease-in-out infinite; }
.dia--flow .dia__step:nth-of-type(1){ animation-delay:-2.9s; }
.dia--flow .dia__step:nth-of-type(2){ animation-delay:-2.2s; }
.dia--flow .dia__step:nth-of-type(3){ animation-delay:-1.5s; }
.dia--flow .dia__step:nth-of-type(4){ animation-delay:-.8s; }

/* 4) 숫자 올라가기: 숫자 폭이 바뀌어도 줄이 흔들리지 않게 */
.hero__stats b{ font-variant-numeric:tabular-nums; }

/* ---------- 첫 화면: 살아 있는 네트워크 지도 (2026-10-13) ---------- */
.netviz{ position:relative; width:100%; max-width:500px; margin:0 auto; }
.netviz canvas{ display:block; width:100%; height:auto; }
.netviz__net{ position:absolute; left:50%; top:4px; transform:translateX(-50%); font-size:12.5px; font-weight:700;
              letter-spacing:.35em; padding-left:.35em; color:#c9e3a2; opacity:.9; }
.netviz__core{
  position:absolute; transform:translate(-50%,-50%); text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; border-radius:50%;
}
.netviz__core::before{ content:""; position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(43,56,35,.92) 0%, rgba(43,56,35,.75) 60%, rgba(43,56,35,0) 100%); z-index:-1; }
.netviz__core b{ display:block; font-size:17px; color:#fff; letter-spacing:-.01em; line-height:1.2; }
.netviz__core span{ display:block; margin-top:5px; font-size:12.5px; color:#dcefc3; }
.netviz__tag{
  position:absolute; transform:translate(-50%,-4px); text-align:center; white-space:nowrap; pointer-events:none;
  padding:7px 10px; border-radius:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.netviz__tag b{ display:block; font-size:14px; color:#fff; line-height:1.25; }
.netviz__tag span{ display:block; margin-top:3px; font-size:12px; color:#e1e8da; line-height:1.3; }
.netviz__legend{ margin-top:34px; font-size:12.5px; color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; gap:6px; }
.netviz__legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.netviz__legend i.ok{ background:#9ed24e; } .netviz__legend i.bad{ background:#ff6e5a; margin-left:10px; }
@media (max-width:640px){
  .netviz__core b{ font-size:14px; } .netviz__core span{ font-size:11px; }
  .netviz__tag{ padding:5px 7px; } .netviz__tag b{ font-size:12.5px; } .netviz__tag span{ display:none; }
}

/* ---------- 첫 방문 인트로 (2026-10-13) ---------- */
html.intro-on{ overflow:hidden; }
.intro{ position:fixed; inset:0; z-index:1000; color:#fff; overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%, #2f4126 0%, #1e2818 55%, #141b10 100%);
  transition:opacity .8s ease; }
.intro.is-out{ opacity:0; pointer-events:none; }
.intro__skip{ position:absolute; right:22px; top:18px; z-index:5; background:rgba(255,255,255,.08); color:#dcefc3;
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:9px 16px; font:inherit; font-size:13.5px; cursor:pointer; }
.intro__skip:hover{ background:rgba(255,255,255,.16); }
.intro__scene{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity .45s ease; pointer-events:none; }
.intro__scene.is-on{ opacity:1; }

/* 장면 1 */
.intro__s1 canvas{ position:absolute; inset:0; width:100%; height:100%; }
.intro__cap{ position:relative; text-align:center; margin-top:38vh; opacity:0; transform:translateY(10px); transition:opacity .7s ease .9s, transform .7s ease .9s; }
.intro__s1.is-on .intro__cap{ opacity:1; transform:none; }
.intro__cap b{ display:block; font-size:clamp(22px,3.4vw,38px); letter-spacing:-.02em; }
.intro__cap span{ display:block; margin-top:10px; font-size:clamp(14px,1.5vw,17px); color:#c9e3a2; }

/* 장면 2 */
.intro__s2{ flex-direction:row; gap:4vw; padding:0 6vw; }
.intro__panel{ flex:1; max-width:360px; text-align:center; opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.intro__s2.is-on .intro__p1{ opacity:1; transform:none; transition-delay:.1s; }
.intro__s2.is-on .intro__p2{ opacity:1; transform:none; transition-delay:1.0s; }
.intro__s2.is-on .intro__p3{ opacity:1; transform:none; transition-delay:1.9s; }
.intro__fig{ height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.intro__panel p b{ display:block; font-size:clamp(18px,2vw,23px); }
.intro__panel p span{ display:block; margin-top:6px; font-size:14px; color:#c9e3a2; }

/* 서버 랙: 아래부터 한 칸씩 쌓이며 불이 들어옴 */
.rack{ width:96px; display:flex; flex-direction:column-reverse; gap:6px; }
.rack i{ display:block; height:14px; border-radius:4px; background:#3e5232; border:1px solid rgba(255,255,255,.18); position:relative; opacity:0; transform:translateX(-26px); }
.rack i::after{ content:""; position:absolute; right:7px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#8dc63f; box-shadow:0 0 8px #8dc63f; opacity:0; }
@keyframes rack-in{ to{ opacity:1; transform:none; } }
@keyframes led-on{ to{ opacity:1; } }
.intro__s2.is-on .rack i{ animation:rack-in .35s ease forwards; }
.intro__s2.is-on .rack i::after{ animation:led-on .2s ease forwards; }
.intro__s2.is-on .rack i:nth-child(1){ animation-delay:.25s; } .intro__s2.is-on .rack i:nth-child(1)::after{ animation-delay:.6s; }
.intro__s2.is-on .rack i:nth-child(2){ animation-delay:.37s; } .intro__s2.is-on .rack i:nth-child(2)::after{ animation-delay:.72s; }
.intro__s2.is-on .rack i:nth-child(3){ animation-delay:.49s; } .intro__s2.is-on .rack i:nth-child(3)::after{ animation-delay:.84s; }
.intro__s2.is-on .rack i:nth-child(4){ animation-delay:.61s; } .intro__s2.is-on .rack i:nth-child(4)::after{ animation-delay:.96s; }
.intro__s2.is-on .rack i:nth-child(5){ animation-delay:.73s; } .intro__s2.is-on .rack i:nth-child(5)::after{ animation-delay:1.08s; }
.intro__s2.is-on .rack i:nth-child(6){ animation-delay:.85s; } .intro__s2.is-on .rack i:nth-child(6)::after{ animation-delay:1.2s; }

/* 터널: 두 건물 사이에 통로가 뚫리고 빛이 지나감 */
.tunnel{ display:flex; align-items:center; gap:0; width:220px; }
.tunnel .bld{ width:46px; height:64px; border-radius:6px 6px 2px 2px; background:#3e5232; border:1px solid rgba(255,255,255,.22); flex:none;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:100% 12px; }
.tunnel .pipe{ flex:1; height:12px; position:relative; }
.tunnel .pipe::before{ content:""; position:absolute; left:0; right:0; top:50%; height:0; margin-top:-1px; border-top:2px dashed rgba(185,217,137,.9); transform:scaleX(0); transform-origin:left; }
.tunnel .pipe i{ position:absolute; top:50%; left:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#9ed24e; box-shadow:0 0 12px #9ed24e; opacity:0; }
@keyframes pipe-grow{ to{ transform:scaleX(1); } }
@keyframes pipe-run{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
.intro__s2.is-on .tunnel .pipe::before{ animation:pipe-grow .6s ease-out 1.25s forwards; }
.intro__s2.is-on .tunnel .pipe i{ animation:pipe-run .9s ease-in-out 1.85s forwards; }

/* 방패: 고리가 닫히고 빨간 점이 튕겨 나감 */
.shield{ position:relative; width:120px; height:120px; }
.shield .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid #b9d989; opacity:0; transform:scale(1.5); box-shadow:0 0 24px rgba(141,198,63,.35); }
.shield .ring--in{ inset:14px; border-width:1px; opacity:.5; transform:scale(1.5); box-shadow:none; }
@keyframes ring-close{ to{ opacity:1; transform:scale(1); } }
.intro__s2.is-on .shield .ring{ animation:ring-close .6s cubic-bezier(.2,.8,.2,1) 2.15s forwards; }
.intro__s2.is-on .shield .ring--in{ animation:ring-close .6s cubic-bezier(.2,.8,.2,1) 2.3s forwards; }
.shield .hit{ position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:#ff6e5a; box-shadow:0 0 10px #ff6e5a; opacity:0; }
@keyframes hit-1{ 0%{ transform:translate(-110px,-70px); opacity:0; } 15%{ opacity:1; } 55%{ transform:translate(-44px,-28px); } 100%{ transform:translate(-120px,-20px); opacity:0; } }
@keyframes hit-2{ 0%{ transform:translate(120px,-50px); opacity:0; } 15%{ opacity:1; } 55%{ transform:translate(48px,-20px); } 100%{ transform:translate(110px,30px); opacity:0; } }
@keyframes hit-3{ 0%{ transform:translate(-30px,-130px); opacity:0; } 15%{ opacity:1; } 55%{ transform:translate(-12px,-52px); } 100%{ transform:translate(40px,-120px); opacity:0; } }
.intro__s2.is-on .shield .h1{ animation:hit-1 .9s ease-in-out 2.7s forwards; }
.intro__s2.is-on .shield .h2{ animation:hit-2 .9s ease-in-out 2.85s forwards; }
.intro__s2.is-on .shield .h3{ animation:hit-3 .9s ease-in-out 3.0s forwards; }

/* 장면 3 */
.intro__logo{ width:clamp(170px,22vw,240px); height:auto; opacity:0; transform:scale(.86); transition:opacity .6s ease .1s, transform .6s cubic-bezier(.2,.8,.2,1) .1s; }
.intro__tag{ margin-top:26px; text-align:center; font-size:clamp(22px,3.2vw,36px); font-weight:700; letter-spacing:-.03em; line-height:1.3; opacity:0; transform:translateY(12px); transition:opacity .6s ease .6s, transform .6s ease .6s; }
.intro__tag em{ font-style:normal; color:#b9d989; }
.intro__s3.is-on .intro__logo{ opacity:1; transform:none; }
.intro__s3.is-on .intro__tag{ opacity:1; transform:none; }

@media (max-width:760px){
  .intro__s2{ flex-direction:column; justify-content:flex-start; gap:10px; padding:76px 24px 24px; }
  .intro__fig{ height:76px; margin-bottom:6px; }
  .rack{ width:76px; gap:4px; } .rack i{ height:9px; }
  .tunnel{ width:180px; } .tunnel .bld{ width:36px; height:50px; }
  .shield{ width:84px; height:84px; }
  .intro__panel p span{ font-size:13px; }
  .intro__cap{ margin-top:30vh; padding:0 20px; }
}

/* ---------- 회사소개 네 칸 그림: 가운데서 네 서비스가 퍼져 나오는 연출 (2026-10-13) ---------- */
.dia--hub .dia__hub{ overflow:visible; }
/* 가운데 원: 먼저 떠오름 */
@keyframes hub-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.55); } }
.reveal.is-in .dia--hub .dia__hub{ animation:hub-in .7s cubic-bezier(.2,.8,.2,1) .1s backwards; }
/* 원에서 네 칸 쪽으로 퍼지는 파문 (3초마다) */
@keyframes hub-ping{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.3); opacity:0; } }
.dia--hub .dia__hub::before{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--logo-green); opacity:0; pointer-events:none; }
.reveal.is-in .dia--hub .dia__hub::before{ animation:hub-ping 3s ease-out .9s infinite; }
/* 원 둘레를 아주 천천히 도는 점선 궤도 */
@keyframes hub-orbit{ to{ transform:rotate(360deg); } }
.dia--hub .dia__hub::after{ content:""; position:absolute; inset:-14px; border-radius:50%; border:1.5px dashed rgba(82,122,25,.45); pointer-events:none; }
.reveal.is-in .dia--hub .dia__hub::after{ animation:hub-orbit 40s linear infinite; }
/* 네 칸: 각자 모서리 바깥에서 가운데로 모여듦 */
@keyframes card-in-tl{ from{ opacity:0; transform:translate(-28px,-28px); } }
@keyframes card-in-tr{ from{ opacity:0; transform:translate(28px,-28px); } }
@keyframes card-in-bl{ from{ opacity:0; transform:translate(-28px,28px); } }
@keyframes card-in-br{ from{ opacity:0; transform:translate(28px,28px); } }
.dia--hub .dia__card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dia--hub .dia__card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(43,56,35,.12); border-color:#c9d6bd; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(1){ animation:card-in-tl .6s cubic-bezier(.2,.8,.2,1) .55s backwards; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(2){ animation:card-in-tr .6s cubic-bezier(.2,.8,.2,1) .7s backwards; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(3){ animation:card-in-bl .6s cubic-bezier(.2,.8,.2,1) .85s backwards; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(4){ animation:card-in-br .6s cubic-bezier(.2,.8,.2,1) 1s backwards; }
/* 아이콘: 칸이 켜진 직후 톡 튀어나옴 */
@keyframes ico-pop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
.reveal.is-in .dia--hub .dia__card:nth-of-type(1) .dia__ico{ animation:ico-pop .45s cubic-bezier(.2,.8,.2,1) .95s backwards; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(2) .dia__ico{ animation:ico-pop .45s cubic-bezier(.2,.8,.2,1) 1.1s backwards; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(3) .dia__ico{ animation:ico-pop .45s cubic-bezier(.2,.8,.2,1) 1.25s backwards; }
.reveal.is-in .dia--hub .dia__card:nth-of-type(4) .dia__ico{ animation:ico-pop .45s cubic-bezier(.2,.8,.2,1) 1.4s backwards; }
.hub-anim{} /* 표식 */

/* ---------- VPN 그림: 본사·지사가 자리 잡고, 터널이 뚫리고, 빛이 오감 (2026-10-13) ---------- */
@keyframes vpn-card-l{ from{ opacity:0; transform:translateX(-26px); } }
@keyframes vpn-card-r{ from{ opacity:0; transform:translateX(26px); } }
@keyframes vpn-card-up{ from{ opacity:0; transform:translateY(22px); } }
@keyframes vpn-link{ from{ transform:scaleY(0); } }
@keyframes vpn-tunnel{ from{ opacity:0; transform:scaleX(.6); } }
.dia--vpn .dia__link{ transform-origin:top; position:relative; overflow:visible; }
.reveal.is-in .dia--vpn .dia__grid .dia__card:nth-child(1){ animation:vpn-card-l .6s cubic-bezier(.2,.8,.2,1) .1s backwards; }
.reveal.is-in .dia--vpn .dia__grid .dia__card:nth-child(2){ animation:vpn-card-r .6s cubic-bezier(.2,.8,.2,1) .25s backwards; }
.reveal.is-in .dia--vpn .dia__link:nth-of-type(1){ animation:vpn-link .4s ease-out .7s backwards; }
.reveal.is-in .dia--vpn .dia__tunnel{ animation:vpn-tunnel .5s cubic-bezier(.2,.8,.2,1) .95s backwards; }
.reveal.is-in .dia--vpn .dia__link:nth-of-type(2){ animation:vpn-link .4s ease-out 1.35s backwards; }
.reveal.is-in .dia--vpn > div:last-child .dia__card{ animation:vpn-card-up .6s cubic-bezier(.2,.8,.2,1) 1.6s backwards; }
/* 터널 알약: 빛이 왼쪽에서 오른쪽으로 계속 흐름 + 은은한 빛 */
.dia--vpn .dia__pill{ position:relative; overflow:hidden; }
.dia--vpn .dia__pill::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); }
@keyframes pill-sheen{ from{ left:-40%; } to{ left:110%; } }
@keyframes pill-glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(141,198,63,0); } 50%{ box-shadow:0 0 0 6px rgba(141,198,63,.18); } }
.reveal.is-in .dia--vpn .dia__pill{ animation:pill-glow 3s ease-in-out 2.2s infinite; }
.reveal.is-in .dia--vpn .dia__pill::after{ animation:pill-sheen 2.4s ease-in-out 2.2s infinite; }
/* 세로 연결선: 빛 한 점이 위아래로 오감 */
.dia--vpn .dia__link::after{ content:""; position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:#9ed24e; box-shadow:0 0 8px #9ed24e; opacity:0; }
@keyframes link-dot{ 0%{ top:-3px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:calc(100% - 3px); opacity:0; } }
.reveal.is-in .dia--vpn .dia__link::after{ animation:link-dot 1.6s ease-in-out 2.4s infinite; }
.reveal.is-in .dia--vpn .dia__link:nth-of-type(2)::after{ animation-delay:3.2s; }

/* ---------- 카드 아이콘이 선으로 그려짐 + 체크 목록이 차례로 켜짐 (서버 호스팅 등 카드 공통) ---------- */
/* 등장할 때만 선이 그려지고, 끝나면 평소 모양. 스크립트가 없으면 아무 것도 건드리지 않음 */
@keyframes icon-draw{ from{ stroke-dasharray:80; stroke-dashoffset:80; } to{ stroke-dasharray:80; stroke-dashoffset:0; } }
@keyframes icon-pop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.card.reveal.is-in .card__icon{ animation:icon-pop .45s cubic-bezier(.2,.8,.2,1) .05s backwards; }
.card.reveal.is-in .card__icon svg *{ animation:icon-draw .9s ease-out .25s both; }
@keyframes li-in{ from{ opacity:0; transform:translateX(-10px); } }
.reveal.is-in .checklist li{ animation:li-in .45s ease-out backwards; }
.reveal.is-in .checklist li:nth-child(1){ animation-delay:.35s; }
.reveal.is-in .checklist li:nth-child(2){ animation-delay:.5s; }
.reveal.is-in .checklist li:nth-child(3){ animation-delay:.65s; }
.reveal.is-in .checklist li:nth-child(4){ animation-delay:.8s; }
.reveal.is-in .checklist li:nth-child(5){ animation-delay:.95s; }
.reveal.is-in .checklist li:nth-child(n+6){ animation-delay:1.1s; }

/* ---------- 곳곳의 작은 움직임 (2026-10-13) ---------- */
/* 1) 연혁: 세로선이 위에서 자라고 항목이 차례로 */
@keyframes tl-line{ from{ transform:scaleY(0); } }
@keyframes tl-item{ from{ opacity:0; transform:translateX(-14px); } }
@keyframes tl-dot{ 0%{ transform:scale(0); } 70%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.timeline::before{ transform-origin:top; }
.reveal.is-in .timeline::before{ animation:tl-line 1.4s ease-out .1s backwards; }
.reveal.is-in .timeline li{ animation:tl-item .5s ease-out backwards; }
.reveal.is-in .timeline li::before{ animation:tl-dot .4s cubic-bezier(.2,.8,.2,1) backwards; }
.reveal.is-in .timeline li:nth-child(1), .reveal.is-in .timeline li:nth-child(1)::before{ animation-delay:.2s; }
.reveal.is-in .timeline li:nth-child(2), .reveal.is-in .timeline li:nth-child(2)::before{ animation-delay:.45s; }
.reveal.is-in .timeline li:nth-child(3), .reveal.is-in .timeline li:nth-child(3)::before{ animation-delay:.7s; }
.reveal.is-in .timeline li:nth-child(4), .reveal.is-in .timeline li:nth-child(4)::before{ animation-delay:.95s; }
.reveal.is-in .timeline li:nth-child(n+5), .reveal.is-in .timeline li:nth-child(n+5)::before{ animation-delay:1.2s; }

/* 2) 절차 단계: 번호가 톡 튀고 단계가 순서대로 */
@keyframes step-in{ from{ opacity:0; transform:translateY(14px); } }
@keyframes num-pop{ 0%{ transform:scale(.4); box-shadow:0 0 0 0 rgba(141,198,63,.5); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); box-shadow:0 0 0 10px rgba(141,198,63,0); } }
.reveal.is-in .feature{ animation:step-in .5s ease-out backwards; }
.reveal.is-in .feature .feature__num{ animation:num-pop .6s cubic-bezier(.2,.8,.2,1) backwards; }
.reveal.is-in .feature:nth-of-type(1){ animation-delay:.1s; } .reveal.is-in .feature:nth-of-type(1) .feature__num{ animation-delay:.25s; }
.reveal.is-in .feature:nth-of-type(2){ animation-delay:.35s; } .reveal.is-in .feature:nth-of-type(2) .feature__num{ animation-delay:.5s; }
.reveal.is-in .feature:nth-of-type(3){ animation-delay:.6s; } .reveal.is-in .feature:nth-of-type(3) .feature__num{ animation-delay:.75s; }
.reveal.is-in .feature:nth-of-type(4){ animation-delay:.85s; } .reveal.is-in .feature:nth-of-type(4) .feature__num{ animation-delay:1s; }
/* 보안 페이지 오탐 대응 3단계 (.step-blk) */
.reveal.is-in .step-blk{ animation:step-in .5s ease-out backwards; }
.reveal.is-in .step-blk .feature__num{ animation:num-pop .6s cubic-bezier(.2,.8,.2,1) backwards; }
.reveal.is-in .step-blk:nth-child(1){ animation-delay:.1s; } .reveal.is-in .step-blk:nth-child(1) .feature__num{ animation-delay:.25s; }
.reveal.is-in .step-blk:nth-child(2){ animation-delay:.4s; } .reveal.is-in .step-blk:nth-child(2) .feature__num{ animation-delay:.55s; }
.reveal.is-in .step-blk:nth-child(3){ animation-delay:.7s; } .reveal.is-in .step-blk:nth-child(3) .feature__num{ animation-delay:.85s; }

/* 4) 비교표: 행이 위에서부터 차례로 */
@keyframes row-in{ from{ opacity:0; transform:translateY(8px); } }
.reveal.is-in .table--cmp tbody tr{ animation:row-in .45s ease-out backwards; }
.reveal.is-in .table--cmp tbody tr:nth-child(1){ animation-delay:.15s; }
.reveal.is-in .table--cmp tbody tr:nth-child(2){ animation-delay:.25s; }
.reveal.is-in .table--cmp tbody tr:nth-child(3){ animation-delay:.35s; }
.reveal.is-in .table--cmp tbody tr:nth-child(4){ animation-delay:.45s; }
.reveal.is-in .table--cmp tbody tr:nth-child(5){ animation-delay:.55s; }
.reveal.is-in .table--cmp tbody tr:nth-child(6){ animation-delay:.65s; }
.reveal.is-in .table--cmp tbody tr:nth-child(n+7){ animation-delay:.75s; }

/* 5) 자주 묻는 질문: 답이 부드럽게 펼쳐짐 */
@keyframes faq-in{ from{ opacity:0; transform:translateY(-6px); } }
.faq__item.is-open .faq__a{ animation:faq-in .3s ease-out; }
.faq__q::after{ transition:transform .25s ease; }

/* 6) 문의 유도 띠: 빛이 천천히 숨 쉼 */
@keyframes cta-breathe{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.25); opacity:1; } }
.cta::after{ transform-origin:50% 100%; animation:cta-breathe 7s ease-in-out infinite; }

/* 7) 초록 버튼: 마우스를 올리면 빛이 스침 */
.btn--primary{ position:relative; overflow:hidden; }
.btn--primary::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%); transform:skewX(-18deg); }
@keyframes btn-sheen{ from{ left:-60%; } to{ left:130%; } }
.btn--primary:hover::after{ animation:btn-sheen .7s ease-out; }

/* 8) 서브페이지 상단 배너: 제목이 떠오르고 빛이 천천히 흐름 */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }
.pagehead .breadcrumb{ animation:rise .6s ease-out .05s backwards; }
.pagehead h1{ animation:rise .7s ease-out .15s backwards; }
.pagehead p{ animation:rise .7s ease-out .3s backwards; }
@keyframes glow-drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-6%,8%); } }
.pagehead::after{ animation:glow-drift 12s ease-in-out infinite; }

/* 9) 문의 페이지 연락처 칸: 차례로 등장 + 아이콘 톡 */
@keyframes box-in{ from{ opacity:0; transform:translateX(18px); } }
.reveal.is-in .contactbox__item{ animation:box-in .5s ease-out backwards; }
.reveal.is-in .contactbox__item:nth-child(1){ animation-delay:.1s; }
.reveal.is-in .contactbox__item:nth-child(2){ animation-delay:.25s; }
.reveal.is-in .contactbox__item:nth-child(3){ animation-delay:.4s; }
.reveal.is-in .contactbox__item:nth-child(n+4){ animation-delay:.55s; }
.reveal.is-in .contactbox__item .contactbox__ico{ animation:icon-pop .45s cubic-bezier(.2,.8,.2,1) backwards; }
.reveal.is-in .contactbox__item:nth-child(1) .contactbox__ico{ animation-delay:.3s; }
.reveal.is-in .contactbox__item:nth-child(2) .contactbox__ico{ animation-delay:.45s; }
.reveal.is-in .contactbox__item:nth-child(3) .contactbox__ico{ animation-delay:.6s; }

/* 10) 홈 첫 화면 글: 차례로 떠오름 (인트로가 걷히는 동안 밑에서 준비됨) */
.hero__badge{ animation:rise .6s ease-out .1s backwards; }
.hero h1{ animation:rise .7s ease-out .25s backwards; }
.hero__lead{ animation:rise .7s ease-out .4s backwards; }
.hero__actions{ animation:rise .7s ease-out .55s backwards; }
.hero__stats{ animation:rise .7s ease-out .7s backwards; }

/* ---------- 고객지원: 처리 절차 01→04 연결선 + 번호, 자주 묻는 질문 순차 등장 (2026-10-13) ---------- */
.steps{ position:relative; }
.steps::before{ content:""; position:absolute; left:12%; right:12%; top:54px; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 14px); opacity:.55; transform:scaleX(0); transform-origin:left; }
@keyframes steps-line{ to{ transform:scaleX(1); } }
.steps:has(.card.is-in)::before{ animation:steps-line 1.6s ease-out .2s forwards; }
.steps .card{ position:relative; z-index:1; }
.card.reveal.is-in > .feature__num{ animation:num-pop .6s cubic-bezier(.2,.8,.2,1) .25s backwards; }
@media (max-width:1024px){ .steps::before{ display:none; } }

@keyframes faq-item-in{ from{ opacity:0; transform:translateY(10px); } }
@keyframes q-pop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.faq.reveal.is-in .faq__item{ animation:faq-item-in .45s ease-out backwards; }
.faq.reveal.is-in .faq__q::before{ display:inline-block; animation:q-pop .4s cubic-bezier(.2,.8,.2,1) backwards; }
.faq.reveal.is-in .faq__item:nth-child(1){ animation-delay:.1s; }  .faq.reveal.is-in .faq__item:nth-child(1) .faq__q::before{ animation-delay:.3s; }
.faq.reveal.is-in .faq__item:nth-child(2){ animation-delay:.22s; } .faq.reveal.is-in .faq__item:nth-child(2) .faq__q::before{ animation-delay:.42s; }
.faq.reveal.is-in .faq__item:nth-child(3){ animation-delay:.34s; } .faq.reveal.is-in .faq__item:nth-child(3) .faq__q::before{ animation-delay:.54s; }
.faq.reveal.is-in .faq__item:nth-child(4){ animation-delay:.46s; } .faq.reveal.is-in .faq__item:nth-child(4) .faq__q::before{ animation-delay:.66s; }
.faq.reveal.is-in .faq__item:nth-child(5){ animation-delay:.58s; } .faq.reveal.is-in .faq__item:nth-child(5) .faq__q::before{ animation-delay:.78s; }
.faq.reveal.is-in .faq__item:nth-child(n+6){ animation-delay:.7s; } .faq.reveal.is-in .faq__item:nth-child(n+6) .faq__q::before{ animation-delay:.9s; }

/* ---------- 문의 페이지: 양식 칸이 차례로, 보내는 중 숨 쉬기, 결과 안내 (2026-10-13) ---------- */
.reveal.is-in .form > *{ animation:rise .5s ease-out backwards; }
.reveal.is-in .form > *:nth-child(1){ animation-delay:.1s; }
.reveal.is-in .form > *:nth-child(2){ animation-delay:.18s; }
.reveal.is-in .form > *:nth-child(3){ animation-delay:.26s; }
.reveal.is-in .form > *:nth-child(4){ animation-delay:.34s; }
.reveal.is-in .form > *:nth-child(5){ animation-delay:.42s; }
.reveal.is-in .form > *:nth-child(6){ animation-delay:.5s; }
.reveal.is-in .form > *:nth-child(7){ animation-delay:.58s; }
.reveal.is-in .form > *:nth-child(8){ animation-delay:.66s; }
.reveal.is-in .form > *:nth-child(9){ animation-delay:.74s; }
.reveal.is-in .form > *:nth-child(n+10){ animation-delay:.82s; }
/* 입력칸에 들어가면 테두리가 살짝 떠오름 */
.field input,.field select,.field textarea{ transition:border-color .15s, box-shadow .2s, transform .15s; }
.field input:focus,.field select:focus,.field textarea:focus{ transform:translateY(-1px); }
/* 보내는 중: 버튼이 숨 쉬듯 */
@keyframes btn-wait{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.btn--primary:disabled,.reveal.is-in .form .btn--primary:disabled{ animation:btn-wait 1.1s ease-in-out infinite; cursor:progress; }
/* 접수 결과 안내: 부드럽게 나타남 */
#form-result.is-ok,#form-result.is-err{ animation:rise .4s ease-out; }
/* 오른쪽 '이런 내용을 알려주시면' 상자: 연락처 칸 다음에 올라옴 */
.reveal.is-in .contactbox + div{ animation:rise .6s ease-out .65s backwards; }

/* ---------- 보안 페이지: 방화벽·IPS 카드가 마주 보며 등장, 작은 제목 밑줄, 도착 상자 빛남 (2026-10-13) ---------- */
@keyframes vs-left{ from{ opacity:0; transform:translateX(-36px); } }
@keyframes vs-right{ from{ opacity:0; transform:translateX(36px); } }
#fw-vs-ips .grid--2 .card.reveal.is-in:nth-child(1){ animation:vs-left .65s cubic-bezier(.2,.8,.2,1) .05s backwards; }
#fw-vs-ips .grid--2 .card.reveal.is-in:nth-child(2){ animation:vs-right .65s cubic-bezier(.2,.8,.2,1) .2s backwards; }
.card__kicker{ position:relative; display:inline-block; padding-bottom:6px; }
.card__kicker::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--logo-green); border-radius:2px; transform:scaleX(0); transform-origin:left; }
@keyframes kicker-line{ to{ transform:scaleX(1); } }
.card.reveal.is-in .card__kicker::after{ animation:kicker-line .6s ease-out .55s forwards; }
/* 4단계 그림: 점이 도착하는 순간 상자가 한 번 빛남 (점 주기 3.6초와 동기화) */
@keyframes arrive-glow{ 0%,82%{ box-shadow:0 0 0 0 rgba(141,198,63,0); } 90%{ box-shadow:0 0 0 7px rgba(141,198,63,.45), 0 0 18px rgba(141,198,63,.5); } 100%{ box-shadow:0 0 0 0 rgba(141,198,63,0); } }
.dia--flow > div:last-child{ animation:arrive-glow 3.6s ease-in-out infinite; }

/* ---------- 서버 호스팅: 전산실 장면 (2026-10-13) ---------- */
.dc{ padding:22px; }
.dc__scene{ display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:stretch; }
/* 랙 */
.dc__rack{ background:#1e2818; border:1px solid #3e5232; border-radius:14px; padding:14px 14px 14px 14px; display:flex; flex-direction:column; gap:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 10px 30px rgba(0,0,0,.35); position:relative; overflow:hidden; }
.dc__rack::before,.dc__rack::after{ content:""; position:absolute; top:10px; bottom:10px; width:6px; border-radius:3px; background:repeating-linear-gradient(180deg,#3e5232 0 4px,#1e2818 4px 10px); }
.dc__rack::before{ left:4px; } .dc__rack::after{ right:4px; }
.dc__unit{ height:30px; border-radius:6px; background:linear-gradient(180deg,#3a4a30 0%,#2c3a24 100%); border:1px solid rgba(255,255,255,.14);
  position:relative; display:flex; align-items:center; gap:6px; padding:0 12px 0 14px; opacity:0; }
.dc__unit i{ width:6px; height:6px; border-radius:50%; background:#5b6a52; }
.dc__unit b{ margin-left:auto; width:34%; height:6px; border-radius:3px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 3px,transparent 3px 6px); }
.dc__unit em{ position:absolute; right:50%; top:50%; transform:translate(50%,-50%); font-style:normal; font-size:10px; font-weight:800; letter-spacing:.12em; color:#9ed24e; opacity:0; }
.dc__unit--empty{ background:transparent; border:1px dashed rgba(255,255,255,.18); }
@keyframes unit-in{ to{ opacity:1; } }
.reveal.is-in .dc__unit{ animation:unit-in .35s ease-out forwards; }
.reveal.is-in .dc__unit:nth-child(1){ animation-delay:.15s; } .reveal.is-in .dc__unit:nth-child(2){ animation-delay:.25s; }
.reveal.is-in .dc__unit:nth-child(3){ animation-delay:.35s; } .reveal.is-in .dc__unit:nth-child(5){ animation-delay:.45s; }
.reveal.is-in .dc__unit:nth-child(6){ animation-delay:.55s; } .reveal.is-in .dc__unit:nth-child(7){ animation-delay:.65s; }
/* 기존 장비 LED: 켜진 뒤 제각각 깜빡임 */
@keyframes led-pwr{ 0%,100%{ background:#8dc63f; box-shadow:0 0 6px #8dc63f; } 50%{ background:#6f9f2c; box-shadow:0 0 2px #8dc63f; } }
@keyframes led-net{ 0%,40%{ background:#c9e3a2; box-shadow:0 0 6px #c9e3a2; } 50%,60%{ background:#5b6a52; box-shadow:none; } 70%,100%{ background:#c9e3a2; box-shadow:0 0 6px #c9e3a2; } }
.reveal.is-in .dc__unit:not(.dc__unit--new):not(.dc__unit--empty) i:nth-child(1){ animation:led-pwr 2.6s ease-in-out .8s infinite; }
.reveal.is-in .dc__unit:not(.dc__unit--new):not(.dc__unit--empty) i:nth-child(2){ animation:led-net 1.1s steps(1) .9s infinite; }
.reveal.is-in .dc__unit:nth-child(2) i:nth-child(2){ animation-duration:.8s; } .reveal.is-in .dc__unit:nth-child(3) i:nth-child(2){ animation-duration:1.5s; }
.reveal.is-in .dc__unit:nth-child(5) i:nth-child(2){ animation-duration:.95s; } .reveal.is-in .dc__unit:nth-child(6) i:nth-child(2){ animation-duration:1.3s; }
/* 새 장비: 왼쪽에서 밀려 들어옴 -> NEW 표시 -> 전원 LED -> 회선 LED */
@keyframes unit-slide{ 0%{ opacity:0; transform:translateX(-110%); } 60%{ opacity:1; transform:translateX(3%); } 100%{ opacity:1; transform:none; } }
@keyframes tag-in{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes led-on-pwr{ to{ background:#8dc63f; box-shadow:0 0 6px #8dc63f; } }
.reveal.is-in .dc__unit--new{ animation:unit-slide 1s cubic-bezier(.2,.8,.2,1) 1s forwards; }
.reveal.is-in .dc__unit--new em{ animation:tag-in .3s ease-out 1.9s forwards; }
.reveal.is-in .dc__unit--new i:nth-child(1){ animation:led-on-pwr .3s ease-out 2.5s forwards, led-pwr 2.6s ease-in-out 2.8s infinite; }
.reveal.is-in .dc__unit--new i:nth-child(2){ animation:led-net 1.1s steps(1) 3.4s infinite; }
/* 옆 관제판 */
.dc__side{ background:#f5f7f2; border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.dc__gauge{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2); }
.dc__gauge span{ width:72px; font-weight:600; color:var(--navy); }
.dc__gauge em{ font-style:normal; font-weight:700; color:var(--blue); font-size:12px; opacity:0; }
.dc__bar{ height:8px; border-radius:4px; background:#e4e8dd; overflow:hidden; }
.dc__bar i{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,#8dc63f,#527a19); }
.dc__line{ height:8px; border-radius:4px; background:repeating-linear-gradient(90deg,#cfd8c4 0 4px,transparent 4px 8px); position:relative; opacity:.35; }
.dc__line i{ position:absolute; top:50%; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4px; border-radius:50%; background:#8dc63f; box-shadow:0 0 8px #8dc63f; opacity:0; }
.dc__status{ margin-top:4px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--navy); opacity:0; }
.dc__status i{ width:8px; height:8px; border-radius:50%; background:#8dc63f; box-shadow:0 0 0 3px rgba(141,198,63,.25); }
@keyframes bar-fill{ to{ width:88%; } } @keyframes bar-fill-temp{ to{ width:42%; } }
@keyframes line-on{ to{ opacity:1; } } @keyframes fade-on{ to{ opacity:1; } }
@keyframes line-run{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes status-pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(141,198,63,.25); } 50%{ box-shadow:0 0 0 7px rgba(141,198,63,0); } }
.reveal.is-in .dc__gauge:nth-child(1) .dc__bar i{ animation:bar-fill 1s ease-out 2.5s forwards; }
.reveal.is-in .dc__gauge:nth-child(1) em{ animation:fade-on .3s ease-out 3.3s forwards; }
.reveal.is-in .dc__gauge:nth-child(2) .dc__bar i{ animation:bar-fill-temp 1s ease-out 2.8s forwards; }
.reveal.is-in .dc__gauge:nth-child(2) em{ animation:fade-on .3s ease-out 3.6s forwards; }
.reveal.is-in .dc__line{ animation:line-on .4s ease-out 3.4s forwards; }
.reveal.is-in .dc__line--b{ animation-delay:3.7s; }
.reveal.is-in .dc__gauge:nth-child(3) em{ animation:fade-on .3s ease-out 3.6s forwards; }
.reveal.is-in .dc__gauge:nth-child(4) em{ animation:fade-on .3s ease-out 3.9s forwards; }
.reveal.is-in .dc__line i{ animation:line-run 1.8s ease-in-out 3.8s infinite; }
.reveal.is-in .dc__line--b i{ animation-delay:4.7s; }
.reveal.is-in .dc__status{ animation:fade-on .4s ease-out 4.2s forwards; }
.reveal.is-in .dc__status i{ animation:status-pulse 2s ease-out 4.4s infinite; }
@media (max-width:560px){
  .dc{ padding:14px; } .dc__scene{ grid-template-columns:1fr; }
  .dc__unit{ height:26px; } .dc__gauge span{ width:64px; }
}

/* ---------- 서버 호스팅 상단 배너: 서버실 실루엣 (2026-10-13) ---------- */
.pagehead--dc{ overflow:hidden; }
.dcbg{ position:absolute; right:6%; top:50%; transform:translateY(-50%); display:flex; gap:18px; z-index:1; opacity:.55; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); }
.dcbg__rack{ width:96px; padding:8px 8px; border:1px solid rgba(185,217,137,.28); border-radius:8px; display:flex; flex-direction:column; gap:5px; background:rgba(0,0,0,.14); }
.dcbg__rack i{ display:flex; align-items:center; gap:4px; height:16px; padding:0 7px; border-radius:3px; border:1px solid rgba(185,217,137,.22); background:rgba(255,255,255,.04); }
.dcbg__rack b{ width:4px; height:4px; border-radius:50%; background:rgba(185,217,137,.25); }
@keyframes bg-led-a{ 0%,100%{ background:#8dc63f; box-shadow:0 0 5px #8dc63f; } 50%{ background:#4f6d1e; box-shadow:none; } }
@keyframes bg-led-b{ 0%,35%{ background:#c9e3a2; box-shadow:0 0 5px #c9e3a2; } 45%,55%{ background:rgba(185,217,137,.25); box-shadow:none; } 65%,100%{ background:#c9e3a2; box-shadow:0 0 5px #c9e3a2; } }
.dcbg__rack i b:nth-child(1){ animation:bg-led-a 3.2s ease-in-out infinite; }
.dcbg__rack i b:nth-child(2){ animation:bg-led-b 1.3s steps(1) infinite; }
.dcbg__rack i:nth-child(2n) b:nth-child(2){ animation-duration:.9s; animation-delay:.3s; }
.dcbg__rack i:nth-child(3n) b:nth-child(2){ animation-duration:1.7s; animation-delay:.7s; }
.dcbg__rack i:nth-child(4n+1) b:nth-child(1){ animation-delay:1.1s; }
.dcbg__rack:nth-child(2) i b:nth-child(2){ animation-delay:.5s; }
.dcbg__rack:nth-child(3) i b:nth-child(2){ animation-delay:.9s; }
.dcbg__scan{ position:absolute; top:-10%; bottom:-10%; left:-20%; width:18%; pointer-events:none;
  background:linear-gradient(90deg, rgba(141,198,63,0) 0%, rgba(141,198,63,.22) 50%, rgba(141,198,63,0) 100%); }
@keyframes bg-scan{ from{ left:-20%; } to{ left:110%; } }
.dcbg__scan{ animation:bg-scan 6s ease-in-out 1s infinite; }
@media (max-width:1024px){ .dcbg{ right:3%; opacity:.35; } .dcbg__rack:nth-child(3){ display:none; } }
@media (max-width:760px){ .dcbg{ display:none; } }

/* 핵심어 형광펜: 구역이 나타날 때 글자 밑에 초록 띠가 스침 */
.hl{ position:relative; display:inline; }
.hl::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:1px; height:38%; background:rgba(141,198,63,.35); border-radius:3px; z-index:-1; transform:scaleX(0); transform-origin:left; }
@keyframes hl-sweep{ to{ transform:scaleX(1); } }
.reveal.is-in .hl::after{ animation:hl-sweep .5s ease-out .5s forwards; }
.reveal.is-in .hl--2::after{ animation-delay:.9s; }

/* 두 카드 마주 보며 등장 */
.vs-pair .card.reveal.is-in:nth-child(1){ animation:vs-left .65s cubic-bezier(.2,.8,.2,1) .05s backwards; }
.vs-pair .card.reveal.is-in:nth-child(2){ animation:vs-right .65s cubic-bezier(.2,.8,.2,1) .2s backwards; }

/* ---------- VPN · 보안 상단 배너 장식 (2026-10-13) ---------- */
.pagehead--deco{ overflow:hidden; }
.phbg{ position:absolute; right:7%; top:50%; transform:translateY(-50%); z-index:1; opacity:.62; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 100%); }
@media (max-width:1024px){ .phbg{ right:3%; opacity:.4; } }
@media (max-width:760px){ .phbg{ display:none; } }

/* ---------- 회사소개 · 고객지원 상단 배너 장식 (2026-10-13) ---------- */
/* ---------- 회사소개 배너: 본사 건물 — 창문이 아래층부터 켜지고 안테나 신호가 퍼짐 (2026-10-13) ---------- */
.phbg--about{ width:300px; height:220px; }
.phbg--about svg{ display:block; width:100%; height:100%; overflow:visible; }
.phbg--about .ground{ stroke:rgba(185,217,137,.45); stroke-width:1.5; stroke-dasharray:230; stroke-dashoffset:230; animation:e-draw .9s ease-out forwards; }
@keyframes e-draw{ to{ stroke-dashoffset:0; } }
.phbg--about .bld{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.6); stroke-width:1.5; transform-box:fill-box; transform-origin:bottom center; transform:scaleY(0); }
@keyframes bld-up{ to{ transform:scaleY(1); } }
.phbg--about .main{ animation:bld-up .9s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.phbg--about .annex{ animation:bld-up .7s cubic-bezier(.2,.8,.2,1) .6s forwards; }
.phbg--about .roof{ fill:rgba(185,217,137,.6); opacity:0; animation:fade-on .3s ease-out 1.1s forwards; }
.phbg--about .door{ fill:rgba(185,217,137,.35); stroke:rgba(185,217,137,.6); stroke-width:1; opacity:0; animation:fade-on .3s ease-out 1.2s forwards; }
.phbg--about .w{ fill:rgba(185,217,137,.14); stroke:rgba(185,217,137,.25); stroke-width:.8; }
/* 창문: 아래층(f0)부터 한 층씩 켜짐 */
@keyframes w-on{ to{ fill:#c9e3a2; stroke:#c9e3a2; filter:drop-shadow(0 0 3px rgba(201,227,162,.9)); } }
.phbg--about .w{ animation:w-on .35s ease-out forwards; }
.phbg--about .f0{ animation-delay:1.3s; } .phbg--about .f1{ animation-delay:1.5s; } .phbg--about .f2{ animation-delay:1.7s; } .phbg--about .f3{ animation-delay:1.9s; }
.phbg--about .f4{ animation-delay:2.1s; } .phbg--about .f5{ animation-delay:2.3s; } .phbg--about .f6{ animation-delay:2.5s; } .phbg--about .f7{ animation-delay:2.7s; }
/* 켜진 뒤 몇몇 창은 제각각 깜빡임 (야근 중) */
@keyframes w-flicker{ 0%,100%{ fill:#c9e3a2; } 50%{ fill:rgba(185,217,137,.22); } }
.phbg--about .w:nth-of-type(5n+2){ animation:w-on .35s ease-out forwards, w-flicker 4.2s ease-in-out 3.6s infinite; }
.phbg--about .w:nth-of-type(7n+4){ animation:w-on .35s ease-out forwards, w-flicker 5.1s ease-in-out 4.3s infinite; }
.phbg--about .w:nth-of-type(11n+6){ animation:w-on .35s ease-out forwards, w-flicker 3.3s ease-in-out 5s infinite; }
.phbg--about .w.f0:nth-of-type(5n+2),.phbg--about .w.f1:nth-of-type(5n+2){ animation-delay:1.3s,3.6s; }
.phbg--about .w.f2:nth-of-type(5n+2),.phbg--about .w.f3:nth-of-type(5n+2){ animation-delay:1.7s,3.6s; }
.phbg--about .w.f4:nth-of-type(5n+2),.phbg--about .w.f5:nth-of-type(5n+2){ animation-delay:2.1s,3.6s; }
.phbg--about .w.f6:nth-of-type(5n+2),.phbg--about .w.f7:nth-of-type(5n+2){ animation-delay:2.5s,3.6s; }
.phbg--about .w.f0:nth-of-type(7n+4),.phbg--about .w.f1:nth-of-type(7n+4){ animation-delay:1.3s,4.3s; }
.phbg--about .w.f2:nth-of-type(7n+4),.phbg--about .w.f3:nth-of-type(7n+4){ animation-delay:1.7s,4.3s; }
.phbg--about .w.f4:nth-of-type(7n+4),.phbg--about .w.f5:nth-of-type(7n+4){ animation-delay:2.1s,4.3s; }
.phbg--about .w.f6:nth-of-type(7n+4),.phbg--about .w.f7:nth-of-type(7n+4){ animation-delay:2.5s,4.3s; }
.phbg--about .w.f0:nth-of-type(11n+6),.phbg--about .w.f1:nth-of-type(11n+6){ animation-delay:1.3s,5s; }
.phbg--about .w.f2:nth-of-type(11n+6),.phbg--about .w.f3:nth-of-type(11n+6){ animation-delay:1.7s,5s; }
.phbg--about .w.f4:nth-of-type(11n+6),.phbg--about .w.f5:nth-of-type(11n+6){ animation-delay:2.1s,5s; }
.phbg--about .w.f6:nth-of-type(11n+6),.phbg--about .w.f7:nth-of-type(11n+6){ animation-delay:2.5s,5s; }
/* 안테나·신호 */
.phbg--about .mast{ stroke:rgba(185,217,137,.8); stroke-width:2; stroke-dasharray:30; stroke-dashoffset:30; animation:e-draw .4s ease-out 1.2s forwards; }
.phbg--about .beacon{ fill:#9ed24e; filter:drop-shadow(0 0 6px #9ed24e); opacity:0; animation:fade-on .3s ease-out 1.6s forwards, led-pwr 1.4s ease-in-out 1.9s infinite; }
.phbg--about .sig{ fill:none; stroke:rgba(158,210,78,.8); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
@keyframes sig-out{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(6); opacity:0; } }
.phbg--about .s1{ animation:sig-out 3s ease-out 2s infinite; }
.phbg--about .s2{ animation:sig-out 3s ease-out 3s infinite; }
.phbg--about .s3{ animation:sig-out 3s ease-out 4s infinite; }
.phbg--about .sign{ font:800 7px/1 "Pretendard",sans-serif; letter-spacing:.14em; fill:#c9e3a2; opacity:0; animation:fade-on .4s ease-out 2.9s forwards; }

/* ---------- 홈 네트워크 지도: 본사·외근·지사 그림 (2026-10-13) ---------- */
.netviz__tag--pic{ background:none; border:0; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none; transform:translate(-50%,-8px); }
.netviz__tag--pic svg{ display:block; width:72px; height:63px; margin:0 auto 2px; overflow:visible; }
.netviz__tag--pic b{ font-size:13px; color:#eef5e3; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.netviz__tag--pic .bd{ fill:rgba(255,255,255,.10); stroke:#dcefc3; stroke-width:1.4; }
.netviz__tag--pic .roof,.netviz__tag--pic .awn,.netviz__tag--pic .base{ fill:#b9d989; }
.netviz__tag--pic .roofp{ fill:rgba(185,217,137,.35); stroke:#dcefc3; stroke-width:1.4; stroke-linejoin:round; }
.netviz__tag--pic .scr{ fill:rgba(141,198,63,.22); stroke:none; }
.netviz__tag--pic .door{ fill:#b9d989; }
.netviz__tag--pic .gnd{ stroke:rgba(220,239,195,.5); stroke-width:1.2; }
.netviz__tag--pic .win{ fill:#c9e3a2; }
.netviz__tag--pic .mast{ stroke:#dcefc3; stroke-width:1.4; }
.netviz__tag--pic .bcn{ fill:#9ed24e; }
.netviz__tag--pic .wf{ fill:none; stroke:#9ed24e; stroke-width:1.6; stroke-linecap:round; }
.netviz__tag--pic .w0{ fill:#9ed24e; stroke:none; }
.netviz__tag--pic .cur{ stroke:rgba(201,227,162,.8); stroke-width:1.6; stroke-linecap:round; }
/* 살아 있는 느낌: 창 깜빡임, 안테나 불, 와이파이 신호 차례로, 노트북 화면 글줄 */
@keyframes win-tw-fill{ 0%,100%{ fill:#c9e3a2; } 50%{ fill:rgba(201,227,162,.3); } }
.netviz__tag--pic .win:nth-of-type(3n+1){ animation:win-tw-fill 3.4s ease-in-out infinite; }
.netviz__tag--pic .win:nth-of-type(4n+2){ animation:win-tw-fill 4.1s ease-in-out 1.2s infinite; }
.netviz__tag--pic .win:nth-of-type(5n+3){ animation:win-tw-fill 2.9s ease-in-out .6s infinite; }
.netviz__tag--pic .bcn{ animation:led-pwr 1.6s ease-in-out infinite; }
@keyframes wf-step{ 0%,100%{ opacity:.25; } 30%,70%{ opacity:1; } }
.netviz__tag--pic .w0{ animation:wf-step 1.8s ease-in-out infinite; }
.netviz__tag--pic .w1{ animation:wf-step 1.8s ease-in-out .3s infinite; }
.netviz__tag--pic .w2{ animation:wf-step 1.8s ease-in-out .6s infinite; }
@keyframes cur-type{ 0%{ stroke-dashoffset:20; } 60%,100%{ stroke-dashoffset:0; } }
.netviz__tag--pic .cur{ stroke-dasharray:20; stroke-dashoffset:20; animation:cur-type 2.4s ease-out infinite; }
.netviz__tag--pic .c2{ animation-delay:.5s; } .netviz__tag--pic .c3{ animation-delay:1s; }
@media (max-width:640px){
  .netviz__tag--pic svg{ width:50px; height:44px; }
  .netviz__tag--pic b{ font-size:11.5px; }
}

/* ---------- VPN 배너: 암호화 터널 장면 (2026-10-13) ---------- */
.phbg--vpn{ width:380px; height:200px; }
.phbg--vpn svg{ display:block; width:100%; height:100%; overflow:visible; }
.phbg--vpn .gnd{ stroke:rgba(185,217,137,.4); stroke-width:1.5; }
.phbg--vpn .bd{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.6); stroke-width:1.5; }
.phbg--vpn .roofb,.phbg--vpn .base{ fill:rgba(185,217,137,.6); }
.phbg--vpn .scr{ fill:rgba(141,198,63,.25); }
.phbg--vpn .win{ fill:#c9e3a2; opacity:.85; }
@keyframes win-tw{ 0%,100%{ opacity:.85; } 50%{ opacity:.2; } }
.phbg--vpn .win:nth-of-type(4n+1){ animation:win-tw 3.6s ease-in-out infinite; }
.phbg--vpn .win:nth-of-type(7n+3){ animation:win-tw 4.4s ease-in-out 1.3s infinite; }
.phbg--vpn .win:nth-of-type(9n+5){ animation:win-tw 3.1s ease-in-out .7s infinite; }
.phbg--vpn .mast{ stroke:rgba(185,217,137,.8); stroke-width:2; }
.phbg--vpn .bcn{ fill:#9ed24e; filter:drop-shadow(0 0 6px #9ed24e); animation:led-pwr 1.6s ease-in-out infinite; }
.phbg--vpn .sig{ fill:none; stroke:rgba(158,210,78,.8); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.phbg--vpn .s1{ animation:sig-out 3s ease-out infinite; } .phbg--vpn .s2{ animation:sig-out 3s ease-out 1.5s infinite; }
/* 터널: 바깥 관(반투명) + 안쪽 통로 + 흐르는 점선 */
.phbg--vpn .tube{ fill:none; stroke:rgba(141,198,63,.16); stroke-width:24; stroke-linecap:round; }
.phbg--vpn .core{ fill:none; stroke:rgba(30,40,24,.55); stroke-width:14; stroke-linecap:round; }
.phbg--vpn .dash{ fill:none; stroke:rgba(185,217,137,.45); stroke-width:1.2; stroke-dasharray:4 8; }
@keyframes dash-flow12{ to{ stroke-dashoffset:-24; } }
.phbg--vpn .dash{ animation:dash-flow12 1.2s linear infinite; }
.phbg--vpn .tube2{ fill:none; stroke:rgba(141,198,63,.14); stroke-width:12; stroke-linecap:round; }
.phbg--vpn .core2{ fill:none; stroke:rgba(30,40,24,.5); stroke-width:6; stroke-linecap:round; }
/* 데이터 꾸러미: 터널 안을 양방향으로 */
.phbg--vpn .pk{ fill:#9ed24e; filter:drop-shadow(0 0 5px rgba(158,210,78,.9)); offset-rotate:auto; opacity:0; }
@keyframes pk-fwd{ 0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }
@keyframes pk-back{ 0%{ offset-distance:100%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ offset-distance:0%; opacity:0; } }
.phbg--vpn .f1{ animation:pk-fwd 3s linear infinite; }
.phbg--vpn .f2{ animation:pk-fwd 3s linear 1s infinite; }
.phbg--vpn .f3{ animation:pk-fwd 3s linear 2s infinite; }
.phbg--vpn .b1{ fill:#c9e3a2; animation:pk-back 3.4s linear .5s infinite; }
.phbg--vpn .b2{ fill:#c9e3a2; animation:pk-back 3.4s linear 2.2s infinite; }
.phbg--vpn .pk2a{ animation:pk-fwd 2.6s linear .8s infinite; }
/* 엿보기 시도: 다가오다 터널 벽에 튕겨 나감 */
.phbg--vpn .spy{ fill:#ff6e5a; filter:drop-shadow(0 0 6px #ff6e5a); opacity:0; }
@keyframes spy-top{ 0%{ transform:translate(0,-40px); opacity:0; } 15%{ opacity:1; } 55%{ transform:translate(0,46px); opacity:1; } 62%{ transform:translate(-6px,34px) scale(1.3); } 100%{ transform:translate(-30px,-30px) scale(.6); opacity:0; } }
@keyframes spy-bot{ 0%{ transform:translate(0,40px); opacity:0; } 15%{ opacity:1; } 55%{ transform:translate(0,-48px); opacity:1; } 62%{ transform:translate(6px,-36px) scale(1.3); } 100%{ transform:translate(34px,30px) scale(.6); opacity:0; } }
.phbg--vpn .sp1{ animation:spy-top 3.6s ease-in-out infinite; }
.phbg--vpn .sp2{ animation:spy-bot 3.6s ease-in-out 1.2s infinite; }
.phbg--vpn .sp3{ animation:spy-top 3.6s ease-in-out 2.4s infinite; }
/* 자물쇠: 잠기면서 고리가 번쩍 */
.phbg--vpn .lock rect{ fill:#c9e3a2; }
.phbg--vpn .lock path{ fill:none; stroke:#c9e3a2; stroke-width:2.6; stroke-linecap:round; transform-box:fill-box; transform-origin:bottom center; }
.phbg--vpn .lock circle:last-child{ fill:#1e2818; }
.phbg--vpn .lockring{ fill:rgba(30,40,24,.6); stroke:rgba(185,217,137,.9); stroke-width:1.5; transform-box:fill-box; transform-origin:center; }
@keyframes shackle{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-4px); } 60%{ transform:translateY(0); } }
@keyframes ring-flash{ 0%,55%{ box-shadow:none; stroke:rgba(185,217,137,.9); transform:scale(1); } 62%{ stroke:#fff; transform:scale(1.15); } 75%,100%{ stroke:rgba(185,217,137,.9); transform:scale(1); } }
.phbg--vpn .lock path{ animation:shackle 3.6s ease-in-out infinite; }
.phbg--vpn .lockring{ animation:ring-flash 3.6s ease-in-out infinite; }

/* ---------- 보안 배너: 경비실 장면 — 공격은 막히고 정상 접속만 통과 (2026-10-13) ---------- */
.phbg--sec{ width:380px; height:200px; }
.phbg--sec svg{ display:block; width:100%; height:100%; overflow:visible; }
.phbg--sec .gnd{ stroke:rgba(185,217,137,.4); stroke-width:1.5; }
.phbg--sec .cloud{ fill:rgba(0,0,0,.18); stroke:rgba(185,217,137,.55); stroke-width:1.5; stroke-linejoin:round; }
.phbg--sec .cd{ fill:#c9e3a2; }
@keyframes cd-tw{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.phbg--sec .cd{ animation:cd-tw 2.6s ease-in-out infinite; }
.phbg--sec .cd:nth-of-type(2n){ animation-delay:.7s; } .phbg--sec .cd:nth-of-type(3n){ animation-delay:1.4s; animation-duration:3.4s; }
.phbg--sec .lane{ fill:none; stroke:rgba(185,217,137,.28); stroke-width:1; stroke-dasharray:3 6; }
@keyframes dash-flow{ to{ stroke-dashoffset:-18; } }
.phbg--sec .lane{ animation:dash-flow 1.4s linear infinite; }
/* 방화벽 */
.phbg--sec .brk{ fill:rgba(185,217,137,.22); stroke:rgba(185,217,137,.55); stroke-width:.8; }
.phbg--sec .gate{ fill:rgba(141,198,63,.18); stroke:rgba(158,210,78,.9); stroke-width:1.2; }
@keyframes gate-glow{ 0%,100%{ fill:rgba(141,198,63,.18); } 50%{ fill:rgba(141,198,63,.42); } }
.phbg--sec .gate{ animation:gate-glow 2.4s ease-in-out infinite; }
/* 방패(IPS) + 레이더 */
.phbg--sec .shield{ fill:rgba(30,40,24,.35); stroke:rgba(185,217,137,.85); stroke-width:2; transform-box:fill-box; transform-origin:center; }
.phbg--sec .shield2{ fill:none; stroke:rgba(185,217,137,.35); stroke-width:1; }
.phbg--sec .sweep{ fill:rgba(158,210,78,.35); transform-origin:216px 105px; animation:sweep-rot 3.6s linear infinite; }
@keyframes sweep-rot{ to{ transform:rotate(360deg); } }
/* 건물 */
.phbg--sec .bd{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.6); stroke-width:1.5; }
.phbg--sec .roofb,.phbg--sec .door{ fill:rgba(185,217,137,.6); }
.phbg--sec .win{ fill:#c9e3a2; opacity:.85; }
.phbg--sec .win:nth-of-type(5n+2){ animation:win-tw 3.8s ease-in-out infinite; }
.phbg--sec .win:nth-of-type(7n+4){ animation:win-tw 4.6s ease-in-out 1.1s infinite; }
.phbg--sec .mon{ fill:rgba(30,40,24,.6); stroke:rgba(185,217,137,.6); stroke-width:1.2; }
.phbg--sec .lamp{ fill:#9ed24e; filter:drop-shadow(0 0 6px #9ed24e); animation:led-pwr 1.8s ease-in-out infinite; }
/* 공격(빨강): 방패에 닿아 터짐 + 방패 번쩍 */
.phbg--sec .atk{ fill:#ff6e5a; filter:drop-shadow(0 0 7px #ff6e5a); opacity:0; }
@keyframes atk-run{ 0%{ offset-distance:0%; opacity:0; transform:scale(1); } 10%{ opacity:1; } 70%{ offset-distance:100%; opacity:1; transform:scale(1); } 80%{ offset-distance:100%; opacity:0; transform:scale(3); } 100%{ offset-distance:100%; opacity:0; } }
.phbg--sec .atk{ animation:atk-run 3.6s ease-in infinite; }
@keyframes shield-hit{ 0%,68%{ stroke:rgba(185,217,137,.85); transform:scale(1); } 74%{ stroke:#ff9a8a; transform:scale(1.08); } 86%,100%{ stroke:rgba(185,217,137,.85); transform:scale(1); } }
.phbg--sec .shield{ animation:shield-hit 3.6s ease-in-out infinite; }
/* 정상(초록): 문을 통과해 건물까지 */
.phbg--sec .okp{ fill:#9ed24e; filter:drop-shadow(0 0 5px rgba(158,210,78,.9)); offset-rotate:0deg; opacity:0; }
@keyframes ok-run{ 0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }
.phbg--sec .o1{ animation:ok-run 3s linear infinite; }
.phbg--sec .o2{ animation:ok-run 3s linear 1.5s infinite; }
/* 스캔(주황): 벽돌에 막혀 터짐 + 벽돌 달아오름 */
.phbg--sec .scan{ fill:#f0b24a; filter:drop-shadow(0 0 6px #f0b24a); opacity:0; }
@keyframes scan-run{ 0%{ offset-distance:0%; opacity:0; transform:scale(1); } 10%{ opacity:1; } 66%{ offset-distance:100%; opacity:1; transform:scale(1); } 76%{ offset-distance:100%; opacity:0; transform:scale(2.6); } 100%{ offset-distance:100%; opacity:0; } }
.phbg--sec .scan{ animation:scan-run 4.4s ease-in 1.6s infinite; }
@keyframes brk-hot{ 0%,64%{ fill:rgba(185,217,137,.22); } 70%{ fill:rgba(240,178,74,.85); } 90%,100%{ fill:rgba(185,217,137,.22); } }
.phbg--sec .brk.hit{ animation:brk-hot 4.4s ease-in-out 1.6s infinite; }

/* ---------- 고객지원 배너: 관제 데스크 — 문의 → 전화 → 체크리스트 → 답장 (6초 한 바퀴, 2026-10-13) ---------- */
.phbg--support{ width:380px; height:200px; }
.phbg--support svg{ display:block; width:100%; height:100%; overflow:visible; }
.phbg--support .gnd,.phbg--support .desk{ stroke:rgba(185,217,137,.45); stroke-width:1.5; }
.phbg--support .desk{ stroke-width:2.5; stroke-linecap:round; }
.phbg--support .bd{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.6); stroke-width:1.5; }
.phbg--support .scr{ fill:rgba(141,198,63,.2); }
.phbg--support .base,.phbg--support .stand{ fill:rgba(185,217,137,.6); }
/* 벽시계 */
.phbg--support .clk{ fill:rgba(0,0,0,.2); stroke:rgba(185,217,137,.7); stroke-width:1.5; }
.phbg--support .clkc{ fill:#c9e3a2; }
.phbg--support .hh,.phbg--support .mh{ stroke:#c9e3a2; stroke-width:2; stroke-linecap:round; transform-origin:206px 38px; }
.phbg--support .hh{ animation:orbit-rot 72s linear infinite; } .phbg--support .mh{ animation:orbit-rot 6s linear infinite; }
/* 고객 말풍선: ? 는 앞부분, ✓ 는 뒷부분 */
.phbg--support .bub rect{ fill:rgba(0,0,0,.25); stroke:rgba(185,217,137,.75); stroke-width:1.5; }
.phbg--support .bub path{ fill:rgba(0,0,0,.25); stroke:rgba(185,217,137,.75); stroke-width:1.5; stroke-linejoin:round; }
.phbg--support .bub text{ font:800 18px/1 "Pretendard",sans-serif; fill:#c9e3a2; }
.phbg--support .bub{ opacity:0; transform-box:fill-box; transform-origin:bottom center; }
@keyframes bub-q{ 0%{ opacity:0; transform:scale(.8); } 4%{ opacity:1; transform:scale(1); } 20%{ opacity:1; } 25%,100%{ opacity:0; } }
@keyframes bub-ok{ 0%,82%{ opacity:0; transform:scale(.8); } 86%{ opacity:1; transform:scale(1); } 97%{ opacity:1; } 100%{ opacity:0; } }
.phbg--support .bub.q{ animation:bub-q 6s ease-out infinite; }
.phbg--support .bub.ok{ animation:bub-ok 6s ease-out infinite; }
.phbg--support .bub.ok rect{ stroke:#9ed24e; }
.phbg--support .tick{ fill:none !important; stroke:#9ed24e !important; stroke-width:3 !important; stroke-linecap:round; stroke-dasharray:40; stroke-dashoffset:40; }
@keyframes tick-draw{ 0%,86%{ stroke-dashoffset:40; } 92%,100%{ stroke-dashoffset:0; } }
.phbg--support .tick{ animation:tick-draw 6s linear infinite; }
/* 요청·답장 꾸러미 */
.phbg--support .lane{ fill:none; stroke:rgba(185,217,137,.35); stroke-width:1; stroke-dasharray:3 6; animation:dash-flow 1.4s linear infinite; }
.phbg--support .pk{ fill:#9ed24e; filter:drop-shadow(0 0 5px rgba(158,210,78,.9)); offset-rotate:auto; opacity:0; }
@keyframes req-run{ 0%,6%{ offset-distance:0%; opacity:0; } 9%{ opacity:1; } 20%{ offset-distance:100%; opacity:1; } 23%,100%{ offset-distance:100%; opacity:0; } }
@keyframes rep-run{ 0%,70%{ offset-distance:0%; opacity:0; } 73%{ opacity:1; } 83%{ offset-distance:100%; opacity:1; } 86%,100%{ offset-distance:100%; opacity:0; } }
.phbg--support .req{ animation:req-run 6s ease-in-out infinite; }
.phbg--support .rep{ fill:#c9e3a2; animation:rep-run 6s ease-in-out infinite; }
/* 모니터: 문의가 닿으면 켜지고 글줄이 타이핑됨 */
@keyframes mon-on{ 0%,20%{ fill:rgba(141,198,63,.2); } 24%{ fill:rgba(141,198,63,.55); } 30%,70%{ fill:rgba(141,198,63,.32); } 76%,100%{ fill:rgba(141,198,63,.2); } }
.phbg--support .mon{ animation:mon-on 6s ease-out infinite; }
.phbg--support .ml{ stroke:rgba(201,227,162,.85); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:32; stroke-dashoffset:32; }
@keyframes ml-type{ 0%,24%{ stroke-dashoffset:32; } 32%,72%{ stroke-dashoffset:0; } 78%,100%{ stroke-dashoffset:32; } }
.phbg--support .ml{ animation:ml-type 6s linear infinite; }
.phbg--support .m2{ animation-delay:.25s; } .phbg--support .m3{ animation-delay:.5s; }
/* 담당자 */
.phbg--support .head{ fill:rgba(0,0,0,.25); stroke:rgba(185,217,137,.75); stroke-width:1.5; }
.phbg--support .body{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.6); stroke-width:1.5; }
.phbg--support .hs{ fill:none; stroke:#c9e3a2; stroke-width:2.2; stroke-linecap:round; }
.phbg--support .hsr{ fill:#c9e3a2; }
.phbg--support .mic{ fill:none; stroke:#c9e3a2; stroke-width:1.6; stroke-linecap:round; }
.phbg--support .micd{ fill:#9ed24e; animation:led-pwr 1.4s ease-in-out infinite; }
/* 전화: 문의가 닿은 직후 울리며 흔들림 */
.phbg--support .phone rect{ fill:rgba(0,0,0,.25); stroke:rgba(185,217,137,.75); stroke-width:1.5; }
.phbg--support .phone{ transform-box:fill-box; transform-origin:center; }
@keyframes phone-shake{ 0%,22%{ transform:rotate(0); } 24%{ transform:rotate(-8deg); } 26%{ transform:rotate(8deg); } 28%{ transform:rotate(-8deg); } 30%{ transform:rotate(8deg); } 32%{ transform:rotate(-6deg); } 34%{ transform:rotate(6deg); } 36%,100%{ transform:rotate(0); } }
.phbg--support .phone{ animation:phone-shake 6s linear infinite; }
.phbg--support .ring{ fill:none; stroke:#9ed24e; stroke-width:1.8; stroke-linecap:round; opacity:0; }
@keyframes ring-blink{ 0%,22%{ opacity:0; } 25%,34%{ opacity:1; } 37%,100%{ opacity:0; } }
.phbg--support .r1{ animation:ring-blink 6s linear infinite; } .phbg--support .r2{ animation:ring-blink 6s linear .2s infinite; }
/* 처리 카드: 체크가 차례로 그어짐 */
.phbg--support .card{ fill:rgba(0,0,0,.2); stroke:rgba(185,217,137,.6); stroke-width:1.5; }
.phbg--support .cb{ fill:rgba(0,0,0,.2); stroke:rgba(185,217,137,.7); stroke-width:1.2; }
.phbg--support .cl{ stroke:rgba(185,217,137,.5); stroke-width:2; stroke-linecap:round; }
.phbg--support .chk{ fill:none; stroke:#9ed24e; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16; stroke-dashoffset:16; filter:drop-shadow(0 0 3px rgba(158,210,78,.8)); }
@keyframes chk1{ 0%,40%{ stroke-dashoffset:16; } 46%,90%{ stroke-dashoffset:0; } 94%,100%{ stroke-dashoffset:16; } }
@keyframes chk2{ 0%,50%{ stroke-dashoffset:16; } 56%,90%{ stroke-dashoffset:0; } 94%,100%{ stroke-dashoffset:16; } }
@keyframes chk3{ 0%,60%{ stroke-dashoffset:16; } 66%,90%{ stroke-dashoffset:0; } 94%,100%{ stroke-dashoffset:16; } }
.phbg--support .c1{ animation:chk1 6s linear infinite; } .phbg--support .c2{ animation:chk2 6s linear infinite; } .phbg--support .c3{ animation:chk3 6s linear infinite; }

/* ---------- 문의 배너: 접수 창구 — 전화·이메일·양식 → 접수함 → 답장 (7초 한 바퀴, 2026-10-13) ---------- */
.phbg--contact{ width:380px; height:200px; }
.phbg--contact svg{ display:block; width:100%; height:100%; overflow:visible; }
.phbg--contact .gnd{ stroke:rgba(185,217,137,.4); stroke-width:1.5; }
.phbg--contact .ch rect,.phbg--contact .ch path{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.75); stroke-width:1.5; stroke-linejoin:round; }
.phbg--contact .ch .flap{ fill:none; }
.phbg--contact .fl{ stroke:rgba(201,227,162,.8); stroke-width:1.6; stroke-linecap:round; }
.phbg--contact .fb{ fill:#9ed24e; stroke:none; }
/* 창구별 생동감: 전화 흔들림+신호, 봉투 덮개 들썩, 양식 글줄 타이핑 */
.phbg--contact .ph{ transform-box:fill-box; transform-origin:center; }
@keyframes ph-shake{ 0%,3%{ transform:rotate(0); } 5%{ transform:rotate(-8deg); } 7%{ transform:rotate(8deg); } 9%{ transform:rotate(-8deg); } 11%{ transform:rotate(6deg); } 13%,100%{ transform:rotate(0); } }
.phbg--contact .ph{ animation:ph-shake 7s linear infinite; }
.phbg--contact .ring{ fill:none; stroke:#9ed24e; stroke-width:1.8; stroke-linecap:round; opacity:0; }
@keyframes ring-blink7{ 0%,3%{ opacity:0; } 5%,12%{ opacity:1; } 15%,100%{ opacity:0; } }
.phbg--contact .r1{ animation:ring-blink7 7s linear infinite; } .phbg--contact .r2{ animation:ring-blink7 7s linear .15s infinite; }
.phbg--contact .flap{ transform-box:fill-box; transform-origin:top center; }
@keyframes flap-open{ 0%,12%{ transform:scaleY(1); } 15%,22%{ transform:scaleY(-.7) translateY(2px); } 26%,100%{ transform:scaleY(1); } }
.phbg--contact .flap{ animation:flap-open 7s ease-in-out infinite; }
.phbg--contact .fl{ stroke-dasharray:20; stroke-dashoffset:20; }
@keyframes fl-type7{ 0%,22%{ stroke-dashoffset:20; } 28%,80%{ stroke-dashoffset:0; } 86%,100%{ stroke-dashoffset:20; } }
.phbg--contact .fl{ animation:fl-type7 7s linear infinite; }
.phbg--contact .f2{ animation-delay:.2s; } .phbg--contact .f3{ animation-delay:.4s; }
@keyframes fb-press{ 0%,30%{ fill:#9ed24e; } 33%{ fill:#fff; } 36%,100%{ fill:#9ed24e; } }
.phbg--contact .fb{ animation:fb-press 7s linear infinite; }
/* 경로·꾸러미 */
.phbg--contact .lane{ fill:none; stroke:rgba(185,217,137,.32); stroke-width:1; stroke-dasharray:3 6; animation:dash-flow 1.4s linear infinite; }
.phbg--contact .pk{ fill:#9ed24e; filter:drop-shadow(0 0 5px rgba(158,210,78,.9)); offset-rotate:auto; opacity:0; }
@keyframes k1-run{ 0%,6%{ offset-distance:0%; opacity:0; } 9%{ opacity:1; } 20%{ offset-distance:100%; opacity:1; } 22%,100%{ offset-distance:100%; opacity:0; } }
@keyframes k2-run{ 0%,16%{ offset-distance:0%; opacity:0; } 19%{ opacity:1; } 30%{ offset-distance:100%; opacity:1; } 32%,100%{ offset-distance:100%; opacity:0; } }
@keyframes k3-run{ 0%,34%{ offset-distance:0%; opacity:0; } 37%{ opacity:1; } 48%{ offset-distance:100%; opacity:1; } 50%,100%{ offset-distance:100%; opacity:0; } }
.phbg--contact .k1{ animation:k1-run 7s ease-in-out infinite; }
.phbg--contact .k2{ animation:k2-run 7s ease-in-out infinite; }
.phbg--contact .k3{ animation:k3-run 7s ease-in-out infinite; }
/* 접수함: 도착할 때마다 빛남 / 종: 흔들리며 울림 */
.phbg--contact .tray path,.phbg--contact .tray rect{ fill:rgba(0,0,0,.25); stroke:rgba(185,217,137,.8); stroke-width:1.5; stroke-linejoin:round; }
@keyframes tray-glow{ 0%,19%{ filter:none; } 21%{ filter:drop-shadow(0 0 8px rgba(158,210,78,.9)); } 26%,29%{ filter:none; } 31%{ filter:drop-shadow(0 0 8px rgba(158,210,78,.9)); } 36%,47%{ filter:none; } 49%{ filter:drop-shadow(0 0 8px rgba(158,210,78,.9)); } 55%,100%{ filter:none; } }
.phbg--contact .tray{ animation:tray-glow 7s ease-out infinite; }
.phbg--contact .sign{ font:800 8px/1 "Pretendard",sans-serif; letter-spacing:.14em; fill:#c9e3a2; }
.phbg--contact .bell path,.phbg--contact .bell rect{ fill:rgba(185,217,137,.9); }
.phbg--contact .bell{ transform-box:fill-box; transform-origin:top center; }
@keyframes bell-swing{ 0%,19%{ transform:rotate(0); } 21%{ transform:rotate(-14deg); } 23%{ transform:rotate(12deg); } 25%{ transform:rotate(-8deg); } 27%{ transform:rotate(4deg); } 29%{ transform:rotate(0); } 31%{ transform:rotate(-14deg); } 33%{ transform:rotate(12deg); } 35%{ transform:rotate(-6deg); } 37%{ transform:rotate(0); } 49%{ transform:rotate(-14deg); } 51%{ transform:rotate(12deg); } 53%{ transform:rotate(-6deg); } 55%,100%{ transform:rotate(0); } }
.phbg--contact .bell{ animation:bell-swing 7s linear infinite; }
.phbg--contact .bring{ fill:none; stroke:#c9e3a2; stroke-width:1.6; stroke-linecap:round; opacity:0; }
@keyframes bring-blink{ 0%,19%{ opacity:0; } 21%,25%{ opacity:1; } 27%,29%{ opacity:0; } 31%,35%{ opacity:1; } 37%,47%{ opacity:0; } 49%,53%{ opacity:1; } 55%,100%{ opacity:0; } }
.phbg--contact .bring{ animation:bring-blink 7s linear infinite; }
/* 답장 비행기 → 고객 ✓ */
.phbg--contact .rl{ stroke:rgba(185,217,137,.42); }
.phbg--contact .plane{ fill:#c9e3a2; filter:drop-shadow(0 0 6px rgba(158,210,78,.8)); offset-rotate:auto; opacity:0; }
@keyframes plane-fly7{ 0%,56%{ offset-distance:0%; opacity:0; } 59%{ opacity:1; } 72%{ offset-distance:100%; opacity:1; } 75%,100%{ offset-distance:100%; opacity:0; } }
.phbg--contact .plane{ animation:plane-fly7 7s cubic-bezier(.4,.1,.5,1) infinite; }
.phbg--contact .head{ fill:rgba(0,0,0,.25); stroke:rgba(185,217,137,.75); stroke-width:1.5; }
.phbg--contact .body{ fill:rgba(0,0,0,.22); stroke:rgba(185,217,137,.6); stroke-width:1.5; }
.phbg--contact .hand{ fill:rgba(0,0,0,.3); stroke:rgba(185,217,137,.8); stroke-width:1.3; }
.phbg--contact .bub rect,.phbg--contact .bub path{ fill:rgba(0,0,0,.25); stroke:#9ed24e; stroke-width:1.5; stroke-linejoin:round; }
.phbg--contact .bub{ opacity:0; transform-box:fill-box; transform-origin:bottom center; }
@keyframes bub-ok7{ 0%,73%{ opacity:0; transform:scale(.8); } 77%{ opacity:1; transform:scale(1); } 94%{ opacity:1; } 100%{ opacity:0; } }
.phbg--contact .bub{ animation:bub-ok7 7s ease-out infinite; }
.phbg--contact .tick{ fill:none !important; stroke:#9ed24e !important; stroke-width:3 !important; stroke-linecap:round; stroke-dasharray:40; stroke-dashoffset:40; }
@keyframes tick-draw7{ 0%,77%{ stroke-dashoffset:40; } 83%,100%{ stroke-dashoffset:0; } }
.phbg--contact .tick{ animation:tick-draw7 7s linear infinite; }

/* ---------- 화면 밖으로 나간 장식 애니메이션은 잠시 멈춤 (script.js 가 .is-off 를 붙였다 뗌, 2026-10-13) ---------- */
.is-off,.is-off::before,.is-off::after,.is-off *,.is-off *::before,.is-off *::after{ animation-play-state:paused !important; }

/* ---------- 회사소개 네 칸 그림: 색 대비 강화 (2026-10-13) — 판·테두리·아이콘·글씨 모두 한 단계 진하게 ---------- */
.dia--hub,.dia--vpn{ background:#d6e3c0; border:1px solid #b8cc9b; }
.dia--hub .dia__card,.dia--vpn .dia__card{ border:1.5px solid #b9cc9e; box-shadow:0 2px 10px rgba(43,56,35,.10); }
.dia--hub .dia__card:hover,.dia--vpn .dia__card:hover{ border-color:var(--blue); }
.dia--hub .dia__ico,.dia--vpn .dia__ico{ background:var(--blue); color:#fff; width:30px; height:30px; box-shadow:0 2px 6px rgba(82,122,25,.35); }
.dia--hub .dia__t,.dia--vpn .dia__t{ color:#1c2616; font-size:17px; }
.dia--hub .dia__d,.dia--vpn .dia__d{ color:#2a2e2a; }
.dia--hub .dia__hub{ background:#d3e4b4; border:3px solid #3f6210; box-shadow:0 0 0 7px rgba(141,198,63,.35), 0 8px 22px rgba(43,56,35,.2); }
.dia--hub .dia__hub b{ color:#15200f; font-size:21px; }
.dia--hub .dia__hub span{ color:#3f6210; font-weight:700; }
.dia--hub .dia__hub::after{ border-color:rgba(82,122,25,.7); }
/* VPN 그림: 터널 상자·연결선도 진한 판 위에서 보이게 (2026-10-13) */
.dia--vpn .dia__label{ color:#3e5232; }
.dia--vpn .dia__link{ background:#3f6210; }

/* ---------- 서버호스팅 전산실 그림: 회사소개·VPN 그림과 같은 대비 (2026-10-13) — 녹색 판 위에 흰 계기판 ---------- */
.dc__scene{ background:#d6e3c0; border:1px solid #b8cc9b; border-radius:12px; padding:14px; }
.dc__side{ background:#fff; border:1.5px solid #b9cc9e; box-shadow:0 2px 10px rgba(43,56,35,.10); }
.dc__gauge{ color:#2a2e2a; }
.dc__gauge span{ color:#1c2616; }
.dc__line{ background:repeating-linear-gradient(90deg,#8fae66 0 4px,transparent 4px 8px); }
/* 보안 4단계 그림: 같은 대비 (2026-10-13) */
.dia--flow{ background:#d6e3c0; border:1px solid #b8cc9b; }