:root {
  --bg: #080c14;
  --bg2: #0d1320;
  --bg3: #111827;
  --surface: #161d2e;
  --surface2: #1c2540;
  --accent: #2563eb;
  --accent2: #3b82f6;
  --accent-glow: rgba(37,99,235,0.35);
  --cyan: #009bb3;
  --green: #10b981;
--amber: #f59e0b;
  --text: #f1f5f9;
  --text2: #475569;
  --text3: #64748b;
  --border: rgba(148,163,184,0.1);
  --border2: rgba(37,99,235,0.25);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Pretendard', 'DM Sans', sans-serif;
  background: #f1f5f9;;
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

em {font-style:normal;}

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  height:68px;
  background: #fff;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all .3s;
}
.nav-logo {
 height:40px;
}
.nav-logo span { color:var(--accent2); }
.nav-links { display:flex; gap:36px; align-items:center; }
  .nav-links a {
  position:relative;
  color:#475569; font-size:15px; font-weight:500;
  text-decoration:none; transition:color .25s, transform .25s;
  letter-spacing:-.2px;
}
.nav-links a:not(.nav-cta)::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px;
  background: var(--accent2);
  border-radius:2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:not(.nav-cta):hover {
  color:#1d3f70;
  transform: translateY(-2px);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links a.active { color:var(--accent2); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  background: var(--accent);
  color:#fff !important;
  padding: 9px 22px;
  border-radius:8px;
  font-weight:600 !important;
  font-size:14px !important;
  transition: background .2s, transform .15s !important;
}
.nav-cta:hover { background: var(--accent2) !important; transform:translateY(-1px); }
.nav-hamburger { display:none; cursor:pointer; flex-direction:column; gap:5px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--text2); border-radius:2px; }

/* ── PAGE HERO BAND ── */
.page-hero {
  padding-top:68px;
  background:linear-gradient(135deg, #060a12 0%, #0d1628 60%, #0a1830 100%);
  position:relative; overflow:hidden;
height:420px;
}
.page-hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}
.page-hero-glow {
  position:absolute; width:600px; height:600px;
  background:radial-gradient(circle, rgba(37,99,235,.18) 0%, transparent 70%);
  left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.page-hero-photo {
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
}
.page-hero-photo::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(8,12,20,0.75) 0%, rgba(8,12,20,0.5) 100%);
}
.page-hero-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center 15%;
  opacity:0.75;
}
.page-hero-inner {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto;
  padding:64px 48px 56px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
}

.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#e3ecff; margin-bottom:20px;
}
.breadcrumb a { color:#e3ecff; text-decoration:none; transition:.2s; }
.breadcrumb a:hover { color:#94a3b8; }
.breadcrumb span { color:#e3ecff; }
.breadcrumb .cur { color:var(--accent2); font-weight:600; }
.page-hero h1 {
  font-size:clamp(32px,4vw,52px); font-weight:900;
  letter-spacing:-2px; line-height:1.1; margin-bottom:16px; text-align:left;
  color:#ffffff;
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 4px 20px rgba(0,0,0,0.9),
    0 8px 40px rgba(0,0,0,0.8);
}
.page-hero h1 em {
  color:#60a5fa; font-style:normal;
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 0 20px rgba(96,165,250,0.5);
}
.page-hero-desc { font-size:16px; color:#fff; line-height:1.8; max-width:500px; }
.hero-right {
  display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap;
}
.hero-stat-pill {
  background:#fff;
  border:1px solid var(--border2);
  border-radius:14px; padding:16px 24px;
  text-align:center; min-width:110px;
}
.hero-stat-num {
  font-size:26px; font-weight:900; letter-spacing:-1px;
  color:#2e2e2e;
}
.hero-stat-num em { font-size:14px; color:var(--accent2); font-style:normal; }
.hero-stat-label { font-size:11px; color:var(--text3); margin-top:4px; font-weight:500; }

/* ── HERO ── */
.hero {
  min-height:100vh;
  /*display:flex; */
align-items:center;
  position:relative;
 padding: 120px 48px 80px;
padding: 0px;
  overflow:hidden;

}

.banner-container {
width: 100vw;
  height:950px;
overflow: hidden;
}

.banner {
  width: calc(100vw * 4);
  height: 100%;
  display: flex;
  transition: transform 0.7s cubic-bezier(.77,0,.18,1);
}

.banner > div {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

.banner > div picture {
  display: block;
  width: 100%;
  height: 100%;
}

.banner > div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes animation1 {
  0%       { transform: translateX(0); }
  20%      { transform: translateX(0); }
  25%      { transform: translateX(-100vw); }
  45%      { transform: translateX(-100vw); }
  50%      { transform: translateX(-200vw); }
  70%      { transform: translateX(-200vw); }
  75%      { transform: translateX(-300vw); }
  95%      { transform: translateX(-300vw); }
  100%     { transform: translateX(0); }
}

.banner.auto-play {
  animation: animation1 20s infinite;
}

.list-button {
  width: 100%;
  height: 10px;
  display: flex;
  justify-content: center;
  margin-top: -30px;
  position: absolute;
  z-index: 2;
}
.list-button-item {
  width: 10px;
  height: 10px;
  border-radius: 5rem;
  background-color: rgba(255,255,255,0.4);
  cursor: pointer;
  display: inline-block;
  margin: 6px;
  transition: background-color 0.3s;
}
.list-button-item.active {
  background-color: white;
  width: 28px;
  border-radius: 5px;
}
.slider-holder01 {
  width: 1900px;
  max-width: 1900px;
  height: 950px;
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  text-align: center;
  overflow: hidden;
}

.hero-glow {
  position:absolute;
  width:700px; height:700px;
  background: radial-gradient(circle, rgba(37,99,235,.25) 0%, transparent 70%);
  right:-150px; top:50%;
  transform: translateY(-50%);
  pointer-events:none;
}

.hero-content { position:absolute;top:150px;left:120px; z-index:2; max-width:680px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius:100px;
  padding: 6px 16px;
  font-size:13px; color:var(--accent2);
  font-weight:600; letter-spacing:.3px;
  margin-bottom:32px;
  animation: fadeUp .6s ease both;
}
.hero-badge::before {
  content:''; width:6px; height:6px;
  background:var(--cyan); border-radius:50%;
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

.hero h1 {
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight:900; line-height:1.18;
  letter-spacing:-2px;
  margin-bottom:24px;
  animation: fadeUp .7s .1s ease both;
}
.hero h1 em { color:var(--accent2); font-style:normal; }
.hero-sub {
  font-size:17px;  line-height:1.8;
  margin-bottom:20px;
  animation: fadeUp .7s .2s ease both;
  max-width:520px;
}
.hero-actions {
  display:flex; gap:16px; flex-wrap:wrap;
  animation: fadeUp .7s .3s ease both;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff!important;
  padding:14px 30px; border-radius:10px;
  font-size:15px; font-weight:700;
  text-decoration:none;
  transition: all .2s;
  border:none; cursor:pointer;
  box-shadow: 0 0 30px var(--accent-glow);
}
.btn-primary:hover { background:var(--accent2); transform:translateY(-2px); box-shadow:0 0 40px var(--accent-glow); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--text)!important;
  padding:14px 30px; border-radius:10px;
  font-size:15px; font-weight:600;
  text-decoration:none;
  border:1px solid #fff;
  transition:all .2s; cursor:pointer;
}
.btn-secondary:hover { border-color:var(--accent2); color:var(--accent2); }

.hero-stats {
  display:flex; gap:48px; margin-top:64px;
  animation: fadeUp .7s .4s ease both;
}
.stat-item { }
.stat-num {
  font-size:36px; font-weight:900; letter-spacing:-1px;
  color:var(--text);
  display:flex; align-items:baseline; gap:4px;
}
.stat-num span { font-size:18px; color:var(--accent2); }
.stat-label { font-size:13px; color:#9cabc1; margin-top:4px; font-weight:500; }

/* ── SECTIONS COMMON ── */
section { padding: 100px 48px; }
.section-tag {
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:2px;
  color:var(--accent2); text-transform:uppercase;
  margin-bottom:16px;
}
.section-title {
  font-size:clamp(28px,3.5vw,44px);
  font-weight:900; letter-spacing:-1.5px;
  line-height:1.15; margin-bottom:16px;
}
.section-desc {
  font-size:16px; color:#6684b1;
  line-height:1.8; max-width:560px;
}
 .section-desc02 {
  font-size:16px; color:#c0d0eb;
  line-height:1.8; max-width:560px;
}
.container { max-width:1200px; margin:0 auto; }

/* ── LAYOUT: CONTENT + SIDEBAR ── */
.page-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 48px 80px;
  display: grid;
 
  gap: 32px;
  align-items: start;

}

/* ── TAB NAV ── */
.tab-nav {
  display:flex; gap:0;
  background:var(--surface);
  border: 1px solid #d7deef;
  border-radius:14px 14px 0 0;
  overflow:hidden; margin-bottom:0;
}
.tab-btn {
  flex:1; padding:16px 6px;
  background:#d7deef;; border:none; cursor:pointer;
  font-family:'Pretendard',sans-serif;
  font-size:12px; font-weight:600;
  color:var(--text3); letter-spacing:-.2px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border-right:1px solid #e4efff;
  transition:all .25s; position:relative;
}
.tab-btn:last-child { border-right:none; }
.tab-btn .t-icon {
  width:52px; height:52px; border-radius:14px;
  background:#b0bbdb;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s; overflow:hidden;
}
.tab-btn .t-icon svg { width:34px; height:34px; transition:all .25s; }
  .tab-btn .t-icon img { width:34px; height:34px; transition:all .25s; }
.tab-btn.active {
  color:var(--text);
  background:#3379eb;
}
.tab-btn.active::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--cyan));
}
.tab-btn.active .t-icon {
  background:#3643e7;
}
.tab-btn:not(.active) .t-icon svg { opacity:.55; filter:saturate(.4); }
.tab-btn:not(.active):hover .t-icon svg { opacity:.85; filter:saturate(.8); }
.tab-btn:not(.active):hover { color:#fff; background:#3379eb; }

/* ── TAB PANEL ── */
.tab-panel {
  display:none;
  background:#d7deef;
  border:1px solid #e4efff;
  border-top:none;
  border-radius:0 0 14px 14px;
  padding:36px;
  animation:fadeUp .35s ease both;
}
.tab-panel.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ── PANEL HEADER ── */
.panel-header { margin-bottom:28px; }
.panel-title {
  font-size:26px; font-weight:900; letter-spacing:-1px;
  margin-bottom:8px; line-height:1.2;color:#0f1e36;
}
.panel-desc { font-size:15px; color:var(--text2); line-height:1.8; }

/* ── SERVICE CARDS GRID ── */
.srv-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  margin:24px 0;
}
.srv-card {
  background:#0d2c72;
  border:1px solid var(--border);
  border-radius:14px; padding:24px;
  position:relative; overflow:hidden;
  transition:all .25s;
}
.srv-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--cyan));
  opacity:0; transition:.25s;
}
.srv-card:hover {
  border-color:var(--border2);
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,.4);
}
.srv-card:hover::before { opacity:1; }
.srv-card-icon {
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:16px;
  box-shadow:0 0 20px var(--accent-glow);
}
.srv-card h3 { font-size:16px; font-weight:800; letter-spacing:-.3px; margin-bottom:10px; }
.srv-card ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.srv-card ul li {
  font-size:13px; color:#d2d7df;
  display:flex; align-items:baseline; gap:8px;
}
.srv-card ul li::before { content:'✓'; color:var(--green); font-weight:700; font-size:11px; flex-shrink:0; }

/* ── FEATURE ROW ── */
.feat-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:24px 0;
}
.feat-item {
  background:#0d2c72; border:1px solid var(--border);
  border-radius:12px; padding:18px 14px; text-align:center;
  transition:.2s;
}
.feat-item:hover { border-color:var(--border2); }
.feat-num {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px; box-shadow:0 0 16px var(--accent-glow);
}
.feat-item strong { display:block; font-size:13px; font-weight:700; margin-bottom:4px; }
.feat-item p { font-size:11px; color:#d2d7df; line-height:1.5; }

/* ── INFO BOX ── */
.info-box {
  background:rgba(37,99,235,.08);
  border:1px solid var(--border2);
  border-radius:12px; padding:20px 24px;
  margin:20px 0; font-size:14px; color:var(--text2); line-height:1.8;
}
.info-box strong { color:var(--accent2); display:block; margin-bottom:6px; font-size:15px; }

/* ── HIGHLIGHT BOX (VAT) ── */
.highlight-box {
  background:linear-gradient(135deg, rgba(37,99,235,.2) 0%, rgba(34,211,238,.1) 100%);
  border:1px solid var(--border2);
  border-radius:14px; padding:28px;
  margin:20px 0;
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.highlight-box h3 { font-size:18px; font-weight:800; margin-bottom:8px; color:#4f5152}
.highlight-box p { font-size:13px; color:var(--text2); line-height:1.8; }
.hl-pct {
  font-size:52px; font-weight:900; letter-spacing:-2px;
  color:var(--cyan); line-height:1; text-align:center;
}
.hl-pct span { display:block; font-size:11px; color:var(--text2); font-weight:400; margin-top:4px; }

/* ── STEP FLOW ── */
.step-flow-wrap { margin:20px 0; }
.step-flow-label { font-size:12px; color:var(--text3); font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
.step-flow {
  display:flex; position:relative;
}
.step-flow::before {
  content:''; position:absolute;
  top:20px; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg, var(--accent), var(--cyan));
  z-index:0;
}
.step-node {
  flex:1; text-align:center; position:relative; z-index:1;
}
.step-circle {
  width:40px; height:40px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
  margin:0 auto 8px;
  transition:.2s;
}
.step-node:hover .step-circle {
  border-color:var(--accent2);
  background:var(--surface2);
  box-shadow:0 0 16px var(--accent-glow);
}
.step-node p { font-size:12px; color:var(--text2); line-height:1.4; }

/* ── TABLE ── */
.data-table {
  width:100%; border-collapse:collapse;
  font-size:13px; margin:14px 0;
}
.data-table th {
  background:#2c4593;
  color:#fff; font-weight:700; font-size:12px;
  padding:10px 12px; text-align:center;
  border-bottom:1px solid var(--border);
}
.data-table td {
background: #f4f8ff;
  border-bottom:1px solid var(--border);
  padding:10px 12px; text-align:center;
  color:var(--text2);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table td b { color:var(--accent2); }

/* ── CHECKLIST ── */
.check-list { list-style:none; margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.check-list li {
  font-size:13px; color:#fff;
  padding:10px 14px 10px 38px; position:relative;
  background:#0d2c72; border:1px solid var(--border);
  border-radius:8px;
}
.check-list li::before {
  content:'!'; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:#d3d3d3; color:#000;
  font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  line-height:18px; text-align:center;
}

/* ── CBM BOX ── */
.cbm-box {
  background:rgba(34,211,238,.06);
  border:1px solid rgba(34,211,238,.2);
  border-radius:12px; padding:20px 24px;
  margin:16px 0; font-size:13px; color:var(--text2); line-height:1.9;
}
.cbm-box strong { color:var(--cyan); display:block; margin-bottom:6px; font-size:14px; }
.cbm-box b { color:#313131; }

/* ── ROUTE BADGE ── */
.route-pill {
  display:inline-flex; align-items:center; gap:10px;
  background:#0a1f5e; border:1px solid var(--border2);
  border-radius:100px; padding:8px 20px;
  font-size:13px; font-weight:700; color:var(--accent2);
  margin:4px 0 20px;
}
.route-pill span { color:#ebf3ff; }

/* ── INLINE FEATURE ROW (speed items) ── */
.feat-inline { display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.feat-inline-item {
  display:flex; align-items:center; gap:16px;
  background:#0d2c72; border:1px solid var(--border);
  border-radius:12px; padding:16px 20px;
  transition:.2s;
}
.feat-inline-item:hover { border-color:var(--border2); }
.feat-inline-item .fi-icon { font-size:22px; flex-shrink:0; }
.feat-inline-item strong { display:block; font-size:14px; font-weight:700; margin-bottom:2px; }
.feat-inline-item span { font-size:12px; color:#efefef; }

/* ── CTA STRIP ── */
.cta-strip {
  background: linear-gradient(135deg, #0a2a6e 0%, #0d3b9e 40%, #1251c5 100%);
  border-radius: 20px;
  padding: 56px 48px 40px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.cta-strip-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 100%;
}
.cta-strip h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900; letter-spacing: -1px; line-height: 1.25;
  color: #fff; margin-bottom: 14px;
}
.cta-strip h2 em { color: #38bdf8; font-style: normal; display: block; }
.cta-strip p {
  font-size: 15px; color: rgba(255,255,255,.7);
  line-height: 1.7; margin-bottom: 32px; font-weight: 400;
}
.cta-strip-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 32px;
}
.cta-strip-btns a {
  padding: 14px 36px; border-radius: 10px;
  font-size: 15px; font-weight: 800;
  text-decoration: none; transition: all .2s;
  white-space: nowrap;
}
.cta-strip-btns .btn-primary {
  background: #0ea5e9; color: #fff;
  box-shadow: 0 0 24px rgba(14,165,233,.5);
}
.cta-strip-btns .btn-primary:hover { background: #38bdf8; transform: translateY(-2px); }
.cta-strip-btns .btn-secondary {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.45);
}
.cta-strip-btns .btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.cta-strip-meta {
  display: flex; gap: 32px; flex-wrap: wrap; justify-content: center;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.cta-strip-meta span strong { color: rgba(255,255,255,.85); font-weight: 700; }

/* ════════════════════════════════════
   SIDEBAR
════════════════════════════════════ */
aside { position:sticky; top:88px; display:flex; flex-direction:column; gap:20px; }


.side-menu li a.cur {
  background:rgba(37,99,235,.15);
  color:var(--accent2); font-weight:700;
  border:1px solid var(--border2);
}

.sm-badge.new { background:rgba(34,211,238,.15); color:var(--cyan); }
.sm-badge.hot { background:rgba(37,99,235,.2); color:var(--accent2); }


.form-row { display:flex; flex-direction:column; gap:10px; }
.form-label { font-size:11px; color:var(--text3); font-weight:600; letter-spacing:.5px; margin-bottom:2px; }
 
.c-icon {
  width:36px; height:36px; border-radius:10px;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}


/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* ── NETWORK ── */
.network-section { background:#f1f5f9; }
.network-header { text-align:center; margin-bottom:64px; }
.network-header .section-desc { margin:0 auto; }

.network-pills {
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
}
.network-pill {
  display:flex;  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 20px;
  transition:all .2s;
  cursor:default;  
width:350px;height:192px;
    justify-content: space-between;
}
.network-pill:hover {
  border-color:var(--border2);
  background:var(--surface2);
  transform:translateY(-2px);
}
.network-pill.us{ background: url(../images/network01.png) no-repeat 0 center;}
.network-pill.nj{ background: url(../images/network02.png) no-repeat 0 center;}
.network-pill.ca{ background: url(../images/network03.png) no-repeat 0 center;}
.network-pill.uk{ background: url(../images/network04.png) no-repeat 0 center;}
.network-pill.de{ background: url(../images/network05.png) no-repeat 0 center;}
.network-pill.fr{ background: url(../images/network06.png) no-repeat 0 center;}
.network-pill.es{ background: url(../images/network07.png) no-repeat 0 center;}
.network-pill.tk{ background: url(../images/network08.png) no-repeat 0 center;}
.network-pill.cn{ background: url(../images/network09.png) no-repeat 0 center;}

.pill-flag { font-size:22px; }
.pill-info {    
   height: 60px;
   background: #000;
  border-radius: 30px;
  width: 60px;
  text-align: center;
  align-items: center;
  padding-top: 5px;
}
.pill-country { font-size:13px;  font-weight:500; }
.pill-center { font-size:14px; font-weight:700; color:var(--text); }

/* ── SERVICES ── */
.services-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  margin-top:64px;
}
.service-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}
.service-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--cyan));
  opacity:0; transition:.3s;
}
.service-card:hover {
  border-color:var(--border2);
  transform:translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.service-card:hover::before { opacity:1; }

/* ── 아이콘 + 타이틀 가로 배치 ── */
.service-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.service-icon {
  width:60px; height:60px;
  background: #c5cde5;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  flex-shrink: 0;
  overflow:hidden;
}
.service-icon svg { width:40px; height:40px; }
.service-title { font-size:20px; font-weight:800; letter-spacing:-.5px; color:#0f1e36; }
.service-desc { font-size:14px; color:var(--text2); line-height:1.75; }
.service-features { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.service-feat {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text2);
}
.service-feat::before { content:'✓'; color:var(--green); font-weight:700; font-size:12px; }

/* ── SPEED SECTION ── */
.speed-section {
  background:#f1f5f9;
  position:relative; overflow:hidden;
}
.speed-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.speed-visual {
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.speed-ring {
  width:320px; height:320px;
  border-radius:50%;
  border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  animation: spinSlow 20s linear infinite;
}
@keyframes spinSlow { to{transform:rotate(360deg)} }
.speed-ring::before {
  content:'';
  position:absolute; inset:-1px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--accent);
  border-right-color:var(--cyan);
  animation: spinSlow 3s linear infinite;
}
.speed-center {
  width:200px; height:200px;
  background:#fff;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation: spinSlow 20s linear infinite reverse;
  border:1px solid var(--border2);
  box-shadow: 0 0 60px var(--accent-glow);
}
.speed-num { font-size:42px; font-weight:900; letter-spacing:-2px; color:var(--accent2); }
.speed-unit { font-size:13px; color:var(--text2); font-weight:500; }
.speed-tag-floating {
  position:absolute;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:8px 14px;
  font-size:12px; font-weight:700;
  white-space:nowrap;
}
.stf1 { top:20px; right:-10px; color:var(--cyan); }
.stf2 { bottom:30px; left:-20px; color:var(--green); }
.stf3 { top:50%; right:-30px; color:var(--accent2); }

/* ── PROCESS ── */
.process-section { background:#0b2958; }
.process-steps {
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative; margin-top:64px;
}
.process-steps::before {
  content:'';
  position:absolute; top:36px; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--cyan));
  z-index:0;
}
.process-step {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; z-index:1; padding:0 12px;
}
.step-num {
  width:72px; height:72px;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition:.3s; overflow:hidden;
}
.step-num svg { width:36px; height:36px; }
.process-step:hover .step-num {
  border-color:var(--accent2);
  background:var(--surface2);
}
.step-label { font-size:18px; font-weight:700; margin-bottom:8px; }
.step-desc { font-size:15px; color:#bbcbe1; line-height:1.6; }

/* ── TESTIMONIALS ── */
.testimonials-section { background:#f1f5f9; }
.testimonials-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:64px;
}
.testi-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px;
  transition:all .3s;
  position:relative;
}
.testi-card:hover {
  border-color:var(--border2);
  transform:translateY(-3px);
}
.testi-quote {
  font-size:48px; line-height:1;
  color:var(--accent);
  font-family:Georgia,serif;
  margin-bottom:16px;
  opacity:1;
}
 .testi-quote > img {
  width:100%;
}
.testi-text {
  font-size:15px; color:var(--text2); line-height:1.8;
  margin-bottom:24px;
  font-style:italic;
}
.testi-author {
  display:flex; align-items:center; gap:14px;
}
.testi-avatar {
  width:44px; height:44px;
  background:linear-gradient(135deg, var(--accent), var(--cyan));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:800;
  color:#fff; flex-shrink:0;
}
.testi-name { font-size:14px; font-weight:700;color:#0f1e36 }
.testi-role { font-size:12px; color:var(--text3); margin-top:2px; }
.testi-stars { color:#f59e0b; font-size:13px; letter-spacing:1px; }

/* ── CTA ── */
.cta-section {
  background:linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  text-align:center;
  position:relative; overflow:hidden;
  padding:120px 48px;
}

.cta-content { position:relative; z-index:2; max-width:640px; margin:0 auto; }
.cta-title { font-size:clamp(32px,4vw,52px); font-weight:900; letter-spacing:-2px; margin-bottom:20px; color:#0f1e36}
.cta-desc { font-size:17px; color:var(--text2); margin-bottom:48px; line-height:1.7; }
.cta-form {
  display:flex; gap:12px; max-width:480px; margin:0 auto;
  flex-wrap:wrap; justify-content:center;
}


/* ── PARTNERS ── */
.partners-section { background:#0b2958; padding:80px 48px; }
.partners-track-wrap { overflow:hidden; margin-top:48px; position:relative; }
.partners-track-wrap::before, .partners-track-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2;
}
.partners-track-wrap::before { left:0; background:linear-gradient(90deg,#0b2958,transparent); }
.partners-track-wrap::after { right:0; background:linear-gradient(-90deg,#0b2958,transparent); }
.partners-track {
  display:flex; gap:0;
  animation:scroll 30s linear infinite;
  width:max-content;
}
@keyframes scroll { to{transform:translateX(-50%)} }
.partner-logo {
  width:125px; height:92px;
  border:1px solid var(--border);
  border-radius:12px;
  margin:0 5px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--text3);
  flex-shrink:0;
  letter-spacing:.5px;
}
.partner-logo img{width:126px;height:92px; border-radius: 15px;}
 .pc{display:block;}
.pad{display:none;}
.mobile{display:none;}
/* ── FOOTER ── */
footer {
  background:#fff;
  border-top:1px solid var(--border);
  padding:64px 48px 40px;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:48px;
}
.footer-brand {}
.footer-logo { font-size:20px; font-weight:800; letter-spacing:-.5px; margin-bottom:16px; }
.footer-logo span { color:var(--accent2); }
.footer-tagline { font-size:14px; color:var(--text3); line-height:1.7; }
.footer-col h4 { font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text2); margin-bottom:20px; }
.footer-col a { display:block; font-size:14px; color:var(--text3); text-decoration:none; margin-bottom:10px; transition:.2s; }
.footer-col a:hover { color:var(--text2); }
.footer-bottom {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:32px; flex-wrap:wrap; gap:16px;
}
.footer-copy { font-size:13px; color:var(--text3); }
.footer-info { font-size:12px; color:var(--text3); line-height:1.8; text-align:right; }

/* ── COMPANY INTRO STYLES ── */
.intro-hero-band {
  background:linear-gradient(135deg, rgba(37,99,235,.18) 0%, rgba(34,211,238,.08) 100%);
  border:1px solid var(--border2);
  border-radius:16px; padding:36px 40px;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  margin-bottom:28px; position:relative; overflow:hidden;
}
.intro-hero-band::before {
  content:''; position:absolute; right:-60px; top:-60px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.15) 0%, transparent 70%);
  pointer-events:none;
}
.intro-hero-band h2 {
  font-size:33px; font-weight:900; letter-spacing:-1.2px; margin-bottom:12px; line-height:1.2;color:#0f1e36;
}
.intro-hero-band h2 em { color:var(--accent2); font-style:normal; }
  .intro-hero-band h3 {
  font-size:25px; font-weight:700; letter-spacing:-1.2px; margin-bottom:12px; line-height:1.2;color:#0f1e36;
}
.intro-hero-band p { font-size:16px; color:#111; line-height:1.9; max-width:920px; }
.intro-hero-band .check-rows { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.intro-hero-band .check-row {
  display:flex; align-items:center; gap:10px;
  font-size:17px;  font-weight:600; color:#0f1e36;
}
.intro-hero-band .check-row::before {
  content:'✔'; color:var(--cyan); font-size:11px; font-weight:800;
}
.intro-kpi-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  margin-bottom:28px;
}
.intro-kpi {
  background:#0d2c72; border:1px solid var(--border);
  border-radius:14px; padding:20px 16px; text-align:center;
  transition:.25s; position:relative; overflow:hidden;
}
.intro-kpi::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--cyan)); opacity:0; transition:.25s;
}
.intro-kpi:hover { border-color:var(--border2); transform:translateY(-3px); }
.intro-kpi:hover::after { opacity:1; }
.intro-kpi-num { font-size:32px; font-weight:900; letter-spacing:-1.5px; color:#fff; }
.intro-kpi-num em { font-size:16px; color:var(--accent2); font-style:normal; }
.intro-kpi-label { font-size:11px; color:#e3ecff; margin-top:6px; font-weight:600; line-height:1.4; }
.intro-about-grid {
  
  margin:0;
}
.intro-about-card {
  background:#0c2152; border:1px solid var(--border);
  border-radius:14px; padding:24px 20px;
  transition:.25s; position:relative; overflow:hidden;margin: 10px 0 0 20px;
}
.intro-about-card:hover { border-color:var(--border2); transform:translateY(-3px); }
.intro-about-card .ia-icon {
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.ia-header {
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.intro-about-card h4 { font-size:15px; font-weight:800; margin-bottom:0; letter-spacing:-.3px;color:#fff }
.intro-about-card p { font-size:14px; color:#222; line-height:1.8;color:#e3ecff }
.intro-why-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin:20px 0;
}
.intro-why-card {
  background:#0c2152; border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; gap:18px; align-items:flex-start;
  transition:.25s;
}
.intro-why-card:hover { border-color:var(--border2); }
.intro-why-num {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; color:#fff;
  box-shadow:0 0 18px var(--accent-glow);
}
.intro-why-card h4 { font-size:15px; font-weight:800; margin-bottom:6px; letter-spacing:-.3px;color:#fff }
.intro-why-card p { font-size:13px; color:#e3ecff; line-height:1.8; }
.intro-network-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:20px 0;
}
.intro-network-card {
  background:#0c2152; border:1px solid var(--border);
  border-radius:12px; padding:18px 20px;
  transition:.25s; display:flex; flex-direction:column; gap:8px;
}
.intro-network-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.nc-header { display:flex; align-items:center; gap:8px; }
.intro-network-card .nc-flag { font-size:22px; flex-shrink:0; }
.intro-network-card .nc-country { font-size:18px; font-weight:800; color:#fff; }
.intro-network-card .nc-city { font-size:16px; color:#ffffff; font-weight:600; }
.intro-network-card .nc-desc { font-size:15px; color:#c7d3f7; line-height:1.7; }
.intro-service-flow {
  display:grid; grid-template-columns:repeat(7,1fr); gap:0;
  margin:20px 0;
  background:#0c2152;
  border:1px solid var(--border2);
  border-radius:20px;
  padding:20px 12px;
}
.intro-flow-item {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  position:relative;
}
.intro-flow-item:not(:last-child)::after {
  content:'→'; position:absolute; right:-12px; top:14px;
  color:var(--accent2); font-size:16px; font-weight:700;
}
.intro-flow-circle {
  width:50px; height:50px; border-radius:50%;
  background:var(--accent);
  border:1px solid rgba(37,99,235,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:.2s;
}
.intro-flow-circle img {
 
  transition:.2s;
}
.intro-flow-item:hover .intro-flow-circle {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  border-color:var(--accent2);
  box-shadow:0 0 16px var(--accent-glow);
}
.intro-flow-item:hover .intro-flow-circle img {
  filter: brightness(0) invert(1);
}
.intro-flow-label { font-size:11px; color:#e3ecff; text-align:center; line-height:1.4; font-weight:600; }
.aboutiporter{display:flex}

.contact{padding-top: 24px;font-family: 'Pretendard';margin-bottom:30px;}

.contact ul li {font-size:19px;display:flex;}
.contact ul li div:first-child{padding:0 30px 20px 0}
.contact ul li div:last-child{padding:30px 0 20px 0}
.contact ul{padding:25px 0 0 30px;}

/* ── 중국 탭 전용 스타일 ── */
.china-hero {
  background: linear-gradient(135deg, rgba(220,38,38,.15) 0%, rgba(185,28,28,.08) 100%);
  border: 1px solid rgba(220,38,38,.25);
  border-radius: 16px; padding: 32px 36px;
  margin:28px 0; position: relative; overflow: hidden;
text-align:center;
}

.china-hero-text h2 { font-size: 30px; font-weight: 900; letter-spacing: -1px; margin-bottom: 8px; color:#2e2e2e;}
.china-hero-text h2 em { color: #7188f8; font-style: normal; }
.china-hero-text p { font-size: 18px; color: #0f1e36; line-height: 1.8; }


.china-diff-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0 50px;
}
.china-diff-card {
  background: #0d2c72; border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 20px;
  display: flex; gap: 16px; align-items: flex-start; transition: .25s;
}
.china-diff-card:hover { border-color: rgba(220,38,38,.3); transform: translateY(-2px); }
 .china-diff-icon {
  width: 66px; height: 66px; border-radius: 12px; flex-shrink: 0;
  border:1px solid #6f81a1;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.china-diff-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.3px;color:#fff }
.china-diff-card p { font-size: 13px; color: #bdd0eb; line-height: 1.75; }

.china-point-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0;
}
.china-point-item {
  display: flex; align-items: center; gap: 5px;
  background: #bdd0eb; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 10px;
  font-size: 13px; font-weight: 600; color: var(--text2);
}
.china-point-item::before { content: "✔"; color: #7188f8; font-size: 11px; font-weight: 800; flex-shrink: 0; }

.china-service-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0;
}
.china-service-card {
 padding:0px; text-align: center; 
  position: relative; overflow: hidden;
}

.china-service-card .cs-icon { font-size: 26px; }
.china-service-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 6px;color:#2e2e2e }
.china-service-card p { font-size: 12px; color: var(--text3); line-height: 1.6; }

.china-cs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0;
}
.china-cs-card {
  background: #0d2c72; border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 20px; text-align: center; transition: .25s;
}
.china-cs-card:hover { border-color: rgba(220,38,38,.3); transform: translateY(-2px); }
.china-cs-card .cc-icon { font-size: 28px; margin-bottom: 12px; }
.china-cs-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 8px; color:#fff}
.china-cs-card p { font-size: 13px; color:#bdd0eb; line-height: 1.75; }


.c-point{margin:50px 0;display: flex; justify-content: space-between;}
.c-point > div:first-child{margin-right:20px;}
.c-point img{width:280px}
.c-point02 img{width:512px}
.cs-icon img{width:100%;}
.highlight{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;}

/*service-form*/
.biz-form-row { display:grid; grid-template-columns:140px 1fr; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
          .biz-form-row:last-of-type { border-bottom:none; }
          .biz-form-label { font-size:13px; font-weight:700; color:#1b2c44; }
          .biz-form-label sup { color:#f87171; margin-right:2px; }
          .biz-input {
            background:#e1e6f7; border:1px solid var(--border);
            border-radius:8px; padding:9px 14px;
            font-size:13px; color:#2e2e2e; font-family:'Pretendard',sans-serif;
            width:100%; box-sizing:border-box; transition:.2s;
          }
          .biz-input:focus { outline:none;   }
          .biz-select {
            background:#e1e6f7; border:1px solid var(--border);
            border-radius:8px; padding:8px 10px;
            font-size:13px; color:#2e2e2e; font-family:'Pretendard',sans-serif;
            transition:.2s;
          }
          .biz-select:focus { outline:none;   }
          .biz-textarea {
            background:#e1e6f7; border:1px solid var(--border);
            border-radius:8px; padding:10px 14px;
            font-size:13px; color:#2e2e2e; font-family:'Pretendard',sans-serif;
            width:100%; box-sizing:border-box; resize:vertical; transition:.2s;
          }
          .biz-textarea:focus { outline:none;  }
          .biz-agree-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:12px; }
          .biz-agree-table th, .biz-agree-table td { padding:8px 5px; border:1px solid var(--border); color:#1d1f22; text-align:center; }
          .biz-agree-table th { background:#d9e2f9; color:var(--text3); font-weight:600; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  nav { padding:0 24px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .page-hero-inner { flex-direction:column; padding:48px 24px 40px;  align-items: flex-start;}
.page-body { padding:32px 24px 64px; grid-template-columns:1fr; }
  .hero-right { width:100%; }
  .hero { padding:60px 0px 0px; }
  .hero-stats { gap:32px; }
aside { position:static; }
  .srv-grid { grid-template-columns:1fr; }
  .feat-row { grid-template-columns:repeat(2,1fr); }

  section { padding:72px 24px; }

.footer-inner { grid-template-columns:1fr 1fr; gap:32px; }
  .intro-hero-band { grid-template-columns:1fr; padding:24px 20px; }
  .intro-hero-band h2 { font-size:24px; }
  .intro-hero-band h3 { font-size:18px; }
  .intro-hero-band p { font-size:14px; }
  .intro-hero-band .check-row { font-size:14px; }
  .intro-service-flow { grid-template-columns:repeat(4,1fr); gap:8px; padding:16px 8px; }
  .intro-flow-item:not(:last-child)::after { display:none; }
  .tab-panel { padding:20px 16px; }
  .panel-title { font-size:20px; }
  .highlight-box { grid-template-columns:1fr; text-align:center; }
  .tab-btn .t-icon { width:40px; height:40px; }
  .tab-btn .t-icon svg { width:26px; height:26px; }
  .intro-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .intro-about-grid { grid-template-columns:1fr; }
  .intro-why-grid { grid-template-columns:1fr; }
  .intro-network-grid { grid-template-columns:repeat(2,1fr); }
  .aboutiporter { display:block; }
  .aboutiporter > div:first-child img { width:100%; max-width:100%; height:auto; }
  .intro-about-card { margin:10px 0; }
  .speed-inner { grid-template-columns:1fr; gap:48px; }
  .speed-visual { order:-1; }
  .speed-ring { width:240px; height:240px; }
  .speed-center { width:150px; height:150px; }
  .speed-num { font-size:32px; }
  .process-steps { grid-template-columns:1fr 1fr; gap:32px; }
.process-step {flex-direction: row;}
.step-label{margin:0 10px}
.step-num{margin-bottom:0}
  .process-steps::before {  left: 13%;    height: 90%;    width: 1px;	}
  .testimonials-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .network-pill { padding:10px 16px; }
.testi-quote > img{width:100%;}
.hero-content {position: absolute;top: 90px;left: 20px;z-index: 2;max-width: 680px;}
.slider-holder01 {width: 100%;height:  110svh;}
.pc{display:none;}
.pad{display:block;}
.mobile{display:none;}
  .step-desc { font-size:13px; }
      .china-hero { flex-direction: column; }
  .china-diff-grid { grid-template-columns: 1fr; }
  .china-service-grid { grid-template-columns: repeat(2, 1fr); }
  .china-cs-grid { grid-template-columns: 1fr; }
  .china-point-list { grid-template-columns: 1fr; }
  .c-point{display: block;}
.c-point > div:first-child{margin-right:0px;}
  .c-point img{width:100%}
.c-point02 img{width:100%}
.cs-icon img{width:100%;}
 .biz-form-row{    display: block!important;}
 .data-table td{    padding: 10px 3px;}
  .highlight{display:block}
.feat-item{margin-top:10px}
}
@media(max-width:600px) {
    main{width:100%;}
.hero{min-height:62vh}
  .hero h1 { letter-spacing:-1px; }
  .hero-stats { flex-wrap:wrap; gap:24px; }
  .stat-num { font-size:28px; }
  .process-steps { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }

  .cta-section { padding:80px 24px; }
.testi-quote > img{width:100%;}
.banner>div img{width:100%;}
/* .hero-content 가 absolute 라 .hero 높이에 잡히지 않아
   살펴보기 버튼과 통계 블록이 overflow:hidden 으로 잘리던 것 수정.
   그리드 한 셀에 겹쳐 놓아 텍스트 높이가 히어로를 늘리고, 이미지가 그만큼 늘어난다. */
.hero{display:grid;}
.hero > .slider-holder01{grid-area:1/1;}
.hero > .hero-content{grid-area:1/1;position:relative;top:0;left:0;max-width:100%;padding:30px 20px 48px;}
.banner-container { height: 100%;}
.indexheight{height: 100%;}
.btn-primary{    padding: 14px 20px;}
.hero-actions{gap:10px;}
.slider-holder01 {width: 100%;height: 100%;}

.pad{display:none;}
.mobile{display:block;}

.page-hero-photo > img {margin-top:60px;}

  nav { padding:0 16px; }
  .tab-btn { font-size:10px; padding:10px 4px; }
  .tab-btn .t-icon { width:36px; height:36px; border-radius:10px; }
  .tab-btn .t-icon svg { width:22px; height:22px; }
  .feat-row { grid-template-columns:1fr 1fr; }
  .cta-strip { padding: 32px 16px 24px; }
  .cta-strip h2 { font-size:18px; }
  .cta-strip-btns { flex-direction: column; align-items: center; }
  .cta-strip-btns a { width: 100%; max-width: 300px; text-align: center; }
  .cta-strip-meta { gap: 16px; flex-direction: column; align-items: center; }
  .footer-inner { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-info { text-align:center; }
  footer { padding:40px 20px 32px; }
  .step-flow::before { display:none; }
  .intro-service-flow { grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 8px; }
  .intro-flow-item:not(:last-child)::after { display:none; }
  .intro-flow-circle { width:40px; height:40px; }
  .intro-flow-label { font-size:10px; }
  .intro-network-grid { grid-template-columns:1fr; }
  .intro-kpi-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .intro-kpi { padding:14px 10px; }
  .intro-kpi-num { font-size:24px; }
  .intro-why-grid { grid-template-columns:1fr; }
  .intro-why-card { padding:16px; gap:12px; }
  .page-body { padding:20px 16px 48px;display: block; }
  .page-hero-inner { padding:32px 16px 28px; }
  .page-hero h1 { font-size:28px; letter-spacing:-1px; }
  .tab-panel { padding:16px 12px; }
  .panel-title { font-size:18px; }
  .panel-desc { font-size:13px; }
  .intro-hero-band { padding:20px 16px; }
  .intro-hero-band h2 { font-size:20px; letter-spacing:-.8px; }
  .intro-hero-band h3 { font-size:16px; }
  .intro-hero-band p { font-size:13px; }
  .intro-hero-band .check-row { font-size:13px; }
  .srv-card { padding:18px; }
  .data-table { font-size:12px; }
  .data-table th, .data-table td { padding:8px 6px; }
  .highlight-box { padding:20px 16px; }
  .hl-pct { font-size:40px; }
.china-service-grid { grid-template-columns: 1fr; }
}

/* Main hero: bright photos with a continuous left-to-right overlay. */
.hero .banner > div img {
filter: brightness(1.18);
}

.hero .banner-container {
position: relative;
}

/* Fixed over the slideshow, with no oval edges around the text. */
.hero .banner-container::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
  90deg,
  rgba(8, 18, 32, 0.53) 0%,
  rgba(8, 18, 32, 0.41) 25%,
  rgba(8, 18, 32, 0.17) 45%,
  rgba(8, 18, 32, 0) 70%
);
}

.hero .hero-content {
color: #fff;
}

.hero h1 em,
.hero .stat-num span {
color: #93c5fd;
}

.hero .hero-sub,
.hero .stat-label {
color: #f1f5f9;
}

.hero .hero-badge {
color: #bfdbfe;
}

/* On narrow screens the text takes up more of the image width. */
@media (max-width: 900px) {
.hero .banner-container::after {
  background: linear-gradient(
    90deg,
    rgba(8, 18, 32, 0.53) 0%,
    rgba(8, 18, 32, 0.38) 40%,
    rgba(8, 18, 32, 0.14) 75%,
    rgba(8, 18, 32, 0) 100%
  );
}
}