:root {
--navy: #0a0f1e;
--navy-mid: #141b2d;
--navy-light: #1e2a3f;
--gold: #b8924a;
--gold-light: #d4b978;
--gold-muted: rgba(184,146,74,0.12);
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-muted: #777;
--text-light: #999;
--bg-page: #f8f7f5;
--bg-warm: #f5f3ef;
--bg-card: #ffffff;
--border-light: #e8e5e0;
--border-subtle: #f0ede8;
--header-h: 72px;
--max-width: 1080px;
--font-serif: "Noto Serif KR", "Batang", serif;
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--success: #15803d;
--warning: #b45309;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
margin: 0;
padding: var(--header-h) 0 0;
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg-page);
line-height: 1.6;
}
img { max-width: 100%; height: auto; }
video, iframe { max-width: 100%; }
.ksl-a11y-hidden,
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} body.ksl-page-index { padding-top: 0; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul, li { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; border: none; font-family: inherit; } .site-header {
background: rgba(255,255,255,0.97);
height: var(--header-h);
border-bottom: 1px solid var(--border-subtle);
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
backdrop-filter: blur(8px);
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
height: 100%;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 34px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-main {
font-family: var(--font-serif);
font-size: 17px; font-weight: 700;
color: var(--navy); letter-spacing: -0.01em;
}
.logo-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
.gnb { display: flex; align-items: center; gap: 32px; height: 100%; }
.nav-list { display: flex; gap: 28px; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
font-size: 14px; font-weight: 600;
color: var(--text-secondary); padding: 0 2px;
position: relative;
background: transparent;
border: 0;
appearance: none;
}
.nav-link::after {
content: '';
position: absolute; bottom: -1px; left: 0;
width: 0; height: 2px;
background: var(--gold);
transition: width var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--navy); font-weight: 700; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.sub-menu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(10px);
background: #fff; min-width: 150px;
border: 1px solid var(--border-light);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
border-radius: var(--radius-md);
overflow: hidden;
opacity: 0; visibility: hidden;
transition: all 0.2s ease; padding: 8px 0;
}
.nav-item:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { display: block; padding: 10px 18px; font-size: 14px; color: var(--text-secondary); }
.sub-menu a:hover { background: var(--bg-warm); color: var(--navy); font-weight: 700; }
.nav-cta {
padding: 10px 22px;
background: var(--navy); color: #fff;
font-size: 13px; font-weight: 700;
border-radius: var(--radius-md);
transition: var(--transition);
}
.nav-cta:hover { background: var(--navy-mid); }
.menu-toggle { display: none; width: 26px; height: 20px; position: relative; z-index: 1100; }
.menu-toggle span {
display: block; width: 100%; height: 2px;
background: var(--navy); position: absolute; left: 0;
transition: 0.3s; border-radius: var(--radius-sm);
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }
.menu-toggle.active span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-45deg); }
@media (max-width: 992px) {
.gnb {
position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
background: #fff; flex-direction: column; padding-top: 80px;
transition: 0.3s ease-in-out; z-index: 10000;
box-shadow: -5px 0 20px rgba(0,0,0,0.05);
align-items: flex-start; gap: 0;
}
.gnb.open { right: 0; }
.nav-list { flex-direction: column; width: 100%; height: auto; gap: 0; overflow-y: auto; }
.nav-item { width: 100%; height: auto; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--border-subtle); }
.nav-link { display: block; width: 100%; padding: 16px 24px; font-size: 16px; color: var(--navy); font-weight: 700; }
.nav-link::after { display: none; }
.sub-menu {
position: static; width: 100%; box-shadow: none; border: none;
background: var(--bg-warm); transform: none;
opacity: 1; visibility: visible; padding: 0; display: none;
}
.nav-item.active .sub-menu {
display: block; padding: 8px 0 12px;
border-top: 1px solid var(--border-light);
}
.sub-menu a { padding: 12px 32px; font-size: 14px; border-top: 1px solid var(--border-light); font-weight: 700; color: var(--navy); }
.sub-menu a:first-child { border-top: none; }
.nav-cta { margin: 30px auto; width: 90%; text-align: center; padding: 14px; font-size: 16px; border-radius: var(--radius-md); }
.menu-toggle { display: block; z-index: 10001; }
}
@media (max-width: 640px) {
body { font-size: 16px; line-height: 1.8; letter-spacing: -0.01em; }
p, li { line-height: 1.85; }
} :root {
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 20px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--success: #15803d;
--warning: #b45309;
}
*, *::before, *::after { box-sizing: border-box; }
body {
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.inner,
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.skip-link {
position: absolute;
top: -48px;
left: 16px;
z-index: 20000;
padding: 10px 14px;
background: #fff;
color: var(--navy);
border-radius: 10px;
border: 1px solid var(--border-light);
box-shadow: 0 16px 40px rgba(10, 15, 30, 0.18);
transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; } .site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--header-h);
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 2px 12px rgba(10,15,30,0.06);
}
.header-inner {
max-width: var(--max-width); margin: 0 auto; height: 100%;
padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 34px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-main {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
color: var(--navy); letter-spacing: -0.02em;
}
.logo-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.gnb { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav-list { display: flex; gap: 4px; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
display: inline-flex; align-items: center;
height: 38px; padding: 0 12px;
font-size: 14px; font-weight: 700;
color: var(--text-secondary); border-radius: 6px;
background: transparent;
border: 0;
appearance: none;
}
.nav-link:hover, .nav-link.active { background: var(--gold-muted); color: var(--navy); }
.sub-menu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--bg-card); min-width: 160px;
border: 1px solid var(--border-light);
box-shadow: 0 12px 32px rgba(10,15,30,0.12);
opacity: 0; visibility: hidden; transition: all 0.2s ease; padding: 6px;
}
.nav-item:hover .sub-menu,
.nav-item.has-sub.active .sub-menu,
.nav-item.menu-item-has-children.active .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { display: block; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; word-break: keep-all; }
.sub-menu a:hover { background: var(--bg-warm); color: var(--navy); } .sub-menu a.sub-link-ext {
margin: 6px 8px 2px; padding: 9px 12px; border-radius: var(--radius-sm, 6px);
background: var(--navy); color: #fff; text-align: center;
display: flex; align-items: center; justify-content: center; gap: 6px;
flex-wrap: nowrap; white-space: nowrap; word-break: keep-all;
}
.sub-menu a.sub-link-ext:hover { background: var(--navy-mid, #1d2b50); color: #fff; }
.sub-menu a.sub-link-ext i { font-size: 11px; }
.nav-caret {
display: inline-block;
margin-left: 6px;
font-size: 9px;
opacity: 0.7;
transition: transform 0.2s ease;
}
.nav-item.has-sub.active .nav-caret,
.nav-item.menu-item-has-children.active .nav-caret { transform: rotate(180deg); }
.nav-cta { height: 40px; padding: 0 18px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.nav-cta:hover { background: var(--navy-mid); }
.menu-toggle {
display: none; width: 24px; height: 18px;
position: relative; z-index: 1100; background: none; padding: 0;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); position: absolute; left: 0; transition: 0.3s; }
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }
.menu-toggle.active span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-45deg); } .site-header.site-header--hero {
height: auto;
background: rgba(10,15,30,0.42);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.10);
box-shadow: none;
}
.site-header.site-header--hero .header-inner { height: 72px; }
.site-header.site-header--hero .logo-main { color: rgba(255,255,255,0.95); }
.site-header.site-header--hero .logo-sub { color: rgba(255,255,255,0.68); }
.site-header.site-header--hero .nav-link { color: rgba(255,255,255,0.84); }
.site-header.site-header--hero .nav-link:hover,
.site-header.site-header--hero .nav-link.active { background: rgba(184,146,74,0.18); color: #fff; }
.site-header.site-header--hero .nav-cta { background: var(--gold); color: var(--navy); }
.site-header.site-header--hero .nav-cta:hover { background: var(--gold-light); }
.site-header.site-header--hero .menu-toggle span { background: rgba(255,255,255,0.9); } .site-header.site-header--compact {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--header-h);
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 2px 12px rgba(10,15,30,0.06);
}
.site-header.site-header--compact .header-inner {
max-width: var(--max-width); margin: 0 auto; height: 100%;
padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.site-header.site-header--compact .logo-area { display: flex; align-items: center; gap: 10px; }
.site-header.site-header--compact .logo-img { height: 34px; width: auto; }
.site-header.site-header--compact .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.site-header.site-header--compact .logo-main {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
color: var(--navy); letter-spacing: -0.02em;
}
.site-header.site-header--compact .logo-sub {
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.12em; text-transform: uppercase;
}
.site-header.site-header--compact .gnb { display: flex; align-items: center; gap: 24px; height: 100%; }
.site-header.site-header--compact .nav-list { display: flex; gap: 4px; height: 100%; }
.site-header.site-header--compact .nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.site-header.site-header--compact .nav-link {
display: inline-flex; align-items: center;
height: 38px; padding: 0 12px;
font-size: 14px; font-weight: 700;
color: var(--text-secondary); border-radius: 6px;
}
.site-header.site-header--compact .nav-link::after { display: none; }
.site-header.site-header--compact .nav-link:hover,
.site-header.site-header--compact .nav-link.active { background: var(--gold-muted); color: var(--navy); }
.site-header.site-header--compact .sub-menu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--bg-card); min-width: 160px;
border: 1px solid var(--border-light);
box-shadow: 0 12px 32px rgba(10,15,30,0.12);
opacity: 0; visibility: hidden; transition: all 0.2s ease; padding: 6px;
}
.site-header.site-header--compact .nav-item:hover .sub-menu,
.site-header.site-header--compact .nav-item.has-sub.active .sub-menu,
.site-header.site-header--compact .nav-item.menu-item-has-children.active .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-header.site-header--compact .sub-menu a { display: block; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.site-header.site-header--compact .sub-menu a:hover { background: var(--bg-warm); color: var(--navy); }
.site-header.site-header--compact .nav-cta { height: 40px; padding: 0 18px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.site-header.site-header--compact .nav-cta:hover { background: var(--navy-mid); }
.site-header.site-header--compact .menu-toggle span { background: var(--navy); }
.header-topline {
background: rgba(10,15,30,0.58);
border-bottom: 1px solid rgba(184,146,74,0.22);
color: rgba(255,255,255,0.75);
font-size: 12px;
letter-spacing: 0.02em;
}
.header-topline-inner {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.topline-copy { font-weight: 600; }
.topline-links {
display: flex;
align-items: center;
gap: 16px;
white-space: nowrap;
font-weight: 700;
}
.topline-links a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.82); }
.topline-links a:hover { color: var(--gold-light); } body.ksl-page-index { padding-top: 0; } .fade-section { opacity: 1; transform: none; }
body.js-enhanced.ksl-reveal-ready .fade-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
body.js-enhanced.ksl-reveal-ready .fade-section.visible { opacity: 1; transform: none; } .corp-lead-section {
background: linear-gradient(135deg, #0a0f1e 0%, #141b2d 100%);
position: relative;
overflow: hidden;
padding: 72px 0;
color: #fff;
}
.corp-lead-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 820px 520px at 15% 15%, rgba(184,146,74,0.18), transparent 70%),
radial-gradient(ellipse 640px 540px at 90% 90%, rgba(184,146,74,0.10), transparent 70%);
pointer-events: none;
}
.corp-lead-section .container { position: relative; z-index: 1; }
.corp-lead-card {
max-width: 900px;
margin: 0 auto;
padding: 44px 48px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(184,146,74,0.30);
border-radius: var(--radius-lg);
text-align: center;
backdrop-filter: blur(8px);
}
.corp-lead-tag {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: rgba(184,146,74,0.16);
border: 1px solid rgba(184,146,74,0.45);
color: var(--gold-light);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
margin-bottom: 18px;
}
.corp-lead-title {
font-family: var(--font-serif);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 16px;
}
.corp-lead-accent { color: var(--gold-light); }
.corp-lead-desc {
font-size: 15px;
color: rgba(255,255,255,0.72);
line-height: 1.8;
margin: 0 0 24px;
word-break: keep-all;
}
.corp-lead-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 22px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.corp-lead-points li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: rgba(255,255,255,0.85);
font-weight: 600;
}
.corp-lead-points i { color: var(--gold-light); font-size: 12px; }
.corp-lead-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.corp-lead-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
font-size: 14px;
font-weight: 800;
border-radius: var(--radius-md);
transition: var(--transition);
text-decoration: none;
border: 1px solid transparent;
}
.corp-lead-btn--primary {
background: var(--gold);
color: var(--navy);
box-shadow: 0 10px 28px rgba(184,146,74,0.30);
}
.corp-lead-btn--primary:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(184,146,74,0.40);
}
.corp-lead-btn--ghost {
background: transparent;
color: rgba(255,255,255,0.92);
border-color: rgba(255,255,255,0.28);
}
.corp-lead-btn--ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(184,146,74,0.55);
} .corp-lead-btn--gold {
background: rgba(184,146,74,0.12);
color: var(--gold-light);
border-color: rgba(184,146,74,0.55);
}
.corp-lead-btn--gold:hover {
background: rgba(184,146,74,0.22);
border-color: var(--gold);
transform: translateY(-2px);
}
.corp-lead-btn-ext { font-size: 11px; opacity: 0.85; } .corp-lead-empathy {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 0 0 24px;
padding: 0;
list-style: none;
text-align: left;
}
.corp-lead-empathy li {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(184,146,74,0.22);
border-radius: var(--radius-md);
}
.corp-lead-empathy-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(184,146,74,0.16);
color: var(--gold-light);
font-size: 15px;
margin-bottom: 2px;
}
.corp-lead-empathy strong {
font-size: 14.5px;
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
}
.corp-lead-empathy span:not(.corp-lead-empathy-ico) {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.66);
word-break: keep-all;
}
.corp-lead-bridge {
font-size: 14px;
color: rgba(255,255,255,0.82);
margin: 0 0 22px;
word-break: keep-all;
}
.corp-lead-bridge strong { color: var(--gold-light); font-weight: 800; }
.corp-lead-ghostlink {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 18px;
font-size: 13.5px;
font-weight: 700;
color: rgba(255,255,255,0.78);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.28);
padding-bottom: 2px;
transition: var(--transition);
}
.corp-lead-ghostlink:hover { color: var(--gold-light); border-color: var(--gold-light); }  .corp-banner { padding: 16px 0; }
.corp-banner-strip {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
border: 1px solid var(--border-light);
border-left: 4px solid var(--gold);
border-radius: var(--radius-md);
background: var(--bg-warm);
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition);
}
.corp-banner-strip:hover {
border-color: var(--gold);
background: #fff;
box-shadow: 0 8px 22px rgba(10,15,30,0.07);
}
.corp-banner-ico {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 9px;
background: rgba(184,146,74,0.14);
color: var(--gold);
font-size: 16px;
}
.corp-banner-msg {
flex: 1 1 auto;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
word-break: keep-all;
}
.corp-banner-msg strong { color: var(--navy); font-weight: 800; }
.corp-banner-msg b { color: var(--navy); font-weight: 700; }
.corp-banner-go {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 9px 16px;
border-radius: 999px;
background: var(--navy);
color: #fff;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
transition: var(--transition);
}
.corp-banner-strip:hover .corp-banner-go { background: var(--gold); color: var(--navy); }
.corp-banner-go i { font-size: 11px; }
@media (max-width: 768px) {
.corp-banner-strip { flex-wrap: wrap; }
.corp-banner-ico { order: 1; }
.corp-banner-go { order: 1; margin-left: auto; }
.corp-banner-msg { order: 2; flex: 1 1 100%; }
} .pasan-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 26px 0 18px;
}
.pasan-hero-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
font-size: 14px;
font-weight: 800;
border-radius: var(--radius-md);
text-decoration: none;
transition: var(--transition);
border: 1px solid transparent;
}
.pasan-hero-btn--primary {
background: var(--gold);
color: var(--navy);
box-shadow: 0 10px 28px rgba(184,146,74,0.35);
}
.pasan-hero-btn--primary:hover {
background: var(--gold-light);
transform: translateY(-2px);
}
.pasan-hero-btn--ghost {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.95);
border-color: rgba(255,255,255,0.30);
backdrop-filter: blur(6px);
}
.pasan-hero-btn--ghost:hover {
background: rgba(255,255,255,0.16);
border-color: rgba(184,146,74,0.55);
}
.pasan-hero-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.pasan-hero-trust li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(184,146,74,0.10);
border: 1px solid rgba(184,146,74,0.30);
color: rgba(255,255,255,0.88);
font-size: 12px;
font-weight: 700;
border-radius: 999px;
}
.pasan-hero-trust i { color: var(--gold-light); font-size: 11px; }
.pasan-hero-accent { color: var(--gold-light); } .corp-site-banner {
background: linear-gradient(90deg, rgba(184,146,74,0.16) 0%, rgba(184,146,74,0.08) 100%);
border-top: 1px solid rgba(184,146,74,0.35);
border-bottom: 1px solid rgba(184,146,74,0.20);
padding: 14px 0;
}
.corp-site-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.corp-site-banner-text {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-size: 14px;
font-weight: 600;
}
.corp-site-banner-text i { color: var(--gold); font-size: 16px; }
.corp-site-banner-text strong { color: var(--navy); font-weight: 800; }
.corp-site-banner-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
background: var(--navy);
color: #fff;
font-size: 13px;
font-weight: 800;
border-radius: var(--radius-md);
transition: var(--transition);
text-decoration: none;
}
.corp-site-banner-btn:hover {
background: var(--gold);
color: var(--navy);
transform: translateY(-1px);
} .about-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 24px;
}
.about-hero-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
font-size: 14px;
font-weight: 800;
border-radius: var(--radius-md);
text-decoration: none;
transition: var(--transition);
border: 1px solid transparent;
}
.about-hero-btn--primary {
background: var(--gold);
color: var(--navy);
box-shadow: 0 10px 28px rgba(184,146,74,0.30);
}
.about-hero-btn--primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.about-hero-btn--ghost {
background: transparent;
color: var(--navy);
border-color: var(--border-light);
}
.about-hero-btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .cta-box-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 4px;
}
.cta-btn--ghost {
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.30) !important;
}
.cta-btn--ghost:hover { background: rgba(255,255,255,0.16) !important; } .consult-accent { color: var(--gold) !important; } .receipt-meta { font-size: 12px; opacity: 0.85; display: inline-block; margin-top: 4px; }
.contact-receipt-note .receipt-meta a { color: var(--gold-text, #806731); text-decoration: underline; }  .footer-blog-link,
.footer-corp-link {
background: rgba(184,146,74,0.10) !important;
color: var(--gold-light) !important;
border: 1px solid rgba(184,146,74,0.25);
}
.footer-blog-link i,
.footer-corp-link i { font-size: 12px; }
.footer-blog-link:hover,
.footer-corp-link:hover {
background: rgba(184,146,74,0.18) !important;
border-color: rgba(184,146,74,0.55);
} @media (max-width: 900px) {
.corp-lead-card { padding: 32px 24px; }
.corp-lead-empathy { grid-template-columns: 1fr; gap: 10px; }
.corp-lead-empathy li { flex-direction: row; align-items: center; flex-wrap: wrap; }
.corp-lead-empathy-ico { margin-bottom: 0; }
.corp-lead-empathy strong { flex: 1 1 auto; }
.corp-lead-empathy span:not(.corp-lead-empathy-ico) { flex-basis: 100%; }
.corp-site-banner-inner { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
.corp-site-banner-text { justify-content: center; }
.corp-site-banner-btn { justify-content: center; }
}
@media (max-width: 640px) {
.corp-lead-section { padding: 56px 0; }
.corp-lead-card { padding: 28px 20px; }
.corp-lead-actions { flex-direction: column; }
.corp-lead-btn { width: 100%; justify-content: center; }
.pasan-hero-actions { flex-direction: column; align-items: stretch; }
.pasan-hero-btn { justify-content: center; }
.about-hero-actions { flex-direction: column; }
.about-hero-btn { justify-content: center; }
.cta-box-actions { flex-direction: column; }
} .site-footer {
background: #050a14;
color: #e5e7eb;
padding: 56px 24px 34px;
border-top: 1px solid rgba(255,255,255,0.05);
font-family: var(--font-sans);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 28px;
align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo-img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.footer-logo-text { display: flex; flex-direction: column; gap: 2px; }
.footer-logo-main {
font-family: var(--font-serif);
font-size: 17px; font-weight: 700;
color: #f0ede8; letter-spacing: -0.02em;
}
.footer-logo-sub { font-size: 11px; color: #9ca3af; letter-spacing: 0.06em; }
.footer-desc { font-size: 13px; line-height: 1.75; color: #9ca3af; }
.footer-contact { font-size: 13px; line-height: 1.85; color: #d1d5db; }
.footer-contact .label { color: var(--gold); font-weight: 700; margin-right: 6px; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: #f8f8f6; }
.footer-links { display: grid; gap: 7px; font-size: 13px; }
.footer-links a { color: #d1d5db; opacity: 0.85; }
.footer-links a:hover { color: var(--gold-light); opacity: 1; }
.footer-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.footer-quick a {
display: flex; align-items: center; gap: 7px;
padding: 8px 10px; background: rgba(255,255,255,0.04);
color: #d1d5db; font-size: 12px; font-weight: 700;
}
.footer-quick a:hover { background: rgba(184,146,74,0.1); color: var(--gold-light); }
.footer-line { max-width: var(--max-width); margin: 26px auto 16px; height: 1px; background: rgba(255,255,255,0.07); }
.footer-notice { max-width: var(--max-width); margin: 0 auto; font-size: 12px; line-height: 1.8; color: #6b7280; }
.footer-bottom {
max-width: var(--max-width); margin: 14px auto 0;
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: space-between; align-items: center;
font-size: 12px; color: #6b7280;
} :root {
--desktop-consult-bar-h: 112px;
}
.desktop-consult-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9997;
display: none;
background: rgba(10,15,30,0.96);
border-top: 1px solid rgba(184,146,74,0.38);
box-shadow: 0 -12px 42px rgba(0,0,0,0.28);
backdrop-filter: blur(10px);
}
.desktop-consult-inner {
max-width: 1280px;
margin: 0 auto;
padding: 12px 18px;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.desktop-consult-copy { flex: 0 0 auto; min-width: 220px; }
.desktop-consult-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(184,146,74,0.55);
background: rgba(184,146,74,0.12);
color: rgba(212,185,120,0.98);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.desktop-consult-title {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 800;
color: #fff;
line-height: 1.25;
}
.desktop-consult-sub {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.68);
letter-spacing: -0.01em;
}
.desktop-consult-form { flex: 1 1 520px; min-width: 320px; }
.desktop-consult-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.desktop-consult-fields {
display: flex;
gap: 10px;
align-items: center;
}
.desktop-consult-field { flex: 0 0 auto; }
.desktop-consult-field--message { flex: 1 1 auto; min-width: 220px; }
.desktop-consult-input {
height: 42px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.92);
outline: none;
transition: var(--transition);
font-size: 14px;
}
.desktop-consult-input::placeholder { color: rgba(255,255,255,0.5); }
.desktop-consult-input:focus {
border-color: rgba(184,146,74,0.7);
box-shadow: 0 0 0 3px rgba(184,146,74,0.14);
}
.desktop-consult-select {
appearance: none;
-webkit-appearance: none;
padding-right: 30px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23d4b978'><path d='M2 4l4 4 4-4'/></svg>");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 10px 10px;
cursor: pointer;
min-width: 130px;
}
#desktopConsultRegion { min-width: 92px; max-width: 112px; }
.form-label-note { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.desktop-consult-select option { background: var(--navy); color: #fff; }
.desktop-consult-textarea {
height: 42px;
padding: 10px 12px;
resize: none;
line-height: 1.4;
overflow: hidden;
}
.desktop-consult-submit {
height: 42px;
padding: 0 16px;
border-radius: 10px;
background: var(--gold);
color: var(--navy);
font-weight: 900;
font-size: 14px;
border: 1px solid rgba(184,146,74,0.9);
transition: var(--transition);
white-space: nowrap;
}
.desktop-consult-submit:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.desktop-consult-submit:disabled { opacity: 0.7; transform: none; cursor: not-allowed; }
.desktop-consult-meta {
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.desktop-consult-privacy {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255,255,255,0.72);
font-weight: 600;
}
.desktop-consult-privacy input { width: 14px; height: 14px; accent-color: var(--gold); }
.desktop-consult-privacy-link {
font-size: 12px;
color: rgba(184,146,74,0.95);
font-weight: 800;
}
.desktop-consult-privacy-link:hover { color: var(--gold-light); }
.desktop-consult-status {
font-size: 12px;
color: rgba(255,255,255,0.72);
font-weight: 600;
}
.desktop-consult-status[data-tone="success"] { color: rgba(212,185,120,0.98); }
.desktop-consult-status[data-tone="error"] { color: rgba(248,113,113,0.92); }
@media (min-width: 993px) {
body { padding-bottom: calc(var(--desktop-consult-bar-h, 112px) + env(safe-area-inset-bottom, 0px)); }
.desktop-consult-bar { display: block; }
.desktop-consult-bar { animation: desktopConsultIn 320ms ease-out both; }
}
@keyframes desktopConsultIn {
from { transform: translateY(14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.desktop-consult-bar { animation: none !important; }
}
@media (max-width: 1200px) {
.desktop-consult-sub { display: none; }
}
@media (max-width: 1120px) {
.desktop-consult-copy { min-width: 0; flex: 0 0 auto; }
.desktop-consult-title { font-size: 14px; }
.desktop-consult-kicker { font-size: 10px; padding: 3px 8px; }
.desktop-consult-select { min-width: 110px; }
}
@media (max-width: 1024px) {
.desktop-consult-fields { flex-wrap: wrap; }
.desktop-consult-field--message { min-width: 100%; flex: 1 1 100%; }
.desktop-consult-submit { flex: 0 0 auto; }
} @media (min-width: 993px) {
.desktop-right-cta {
top: auto;
bottom: calc(var(--desktop-consult-bar-h, 112px) + 24px);
transform: none;
}
.desktop-right-cta-stack { gap: 6px; }
.desktop-right-cta-btn { min-width: 152px; padding: 9px 12px; }
.desktop-right-cta-text .main { font-size: 12px; }
.desktop-right-cta-text .sub { font-size: 10px; }
} .desktop-right-cta {
position: fixed; right: 18px; top: 50%;
transform: translateY(-50%); z-index: 9998; display: none;
}
.desktop-right-cta-stack { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.desktop-right-cta-btn {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(10,15,30,0.93);
color: #f0ede8;
text-decoration: none;
box-shadow: 0 8px 28px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-md);
transition: var(--transition);
min-width: 164px;
backdrop-filter: blur(10px);
}
.desktop-right-cta-btn.primary { background: var(--gold); color: var(--navy); border-color: transparent; }
.desktop-right-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.35); }
.desktop-right-cta-btn i { font-size: 17px; width: 20px; text-align: center; }
.desktop-right-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.desktop-right-cta-text .main { font-weight: 800; font-size: 13px; line-height: 1.1; white-space: nowrap; }
.desktop-right-cta-text .sub { font-weight: 600; font-size: 11px; opacity: 0.75; white-space: nowrap; }
.desktop-right-cta-text .sub.mono { font-feature-settings: "tnum"; letter-spacing: 0.02em; }
.desktop-right-cta-details { position: relative; }
.desktop-right-cta-details > summary { list-style: none; }
.desktop-right-cta-details > summary::-webkit-details-marker { display: none; }
.desktop-right-cta-arrow { margin-left: auto; font-size: 12px; opacity: 0.7; transition: transform 0.2s ease; }
.desktop-right-cta-details[open] .desktop-right-cta-arrow { transform: rotate(180deg); }
.desktop-right-cta-dropdown {
position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
width: 220px; background: var(--bg-card);
border: 1px solid var(--border-light);
box-shadow: 0 16px 48px rgba(10,15,30,0.2);
border-radius: var(--radius-lg);
overflow: hidden; padding: 6px;
}
.desktop-right-cta-dropdown a {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; font-weight: 700; font-size: 13px; color: var(--navy);
}
.desktop-right-cta-dropdown a:hover { background: var(--bg-warm); }
.desktop-right-cta-chip {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--navy); color: var(--gold-light);
font-size: 11px; font-weight: 800; flex-shrink: 0;
border-radius: var(--radius-sm);
} .desktop-right-cta.desktop-right-cta--light { right: 20px; }
.desktop-right-cta--light .desktop-right-cta-btn {
padding: 14px 16px;
background: rgba(10,15,30,0.92);
color: #e8e8e8;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
min-width: 180px;
backdrop-filter: blur(12px);
}
.desktop-right-cta--light .desktop-right-cta-btn.primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.desktop-right-cta--light .desktop-right-cta-btn:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.desktop-right-cta--light .desktop-right-cta-btn i { font-size: 16px; opacity: 0.9; }
.desktop-right-cta--light .desktop-right-cta-text .main { font-weight: 700; line-height: 1.2; }
.desktop-right-cta--light .desktop-right-cta-text .sub { font-weight: 500; opacity: 0.6; }
.desktop-right-cta--light .desktop-right-cta-arrow { opacity: 0.6; }
.desktop-right-cta--light .desktop-right-cta-details[open] > summary.desktop-right-cta-btn { border-color: rgba(184,146,74,0.4); }
.desktop-right-cta--light .desktop-right-cta-dropdown {
right: calc(100% + 12px);
background: #fff;
box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
.desktop-right-cta--light .desktop-right-cta-dropdown a {
padding: 12px 14px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
transition: var(--transition);
}
.desktop-right-cta--light .desktop-right-cta-chip { color: var(--gold); font-weight: 700; }
.desktop-right-cta.desktop-right-cta--dark { right: 20px; }
.desktop-right-cta--dark .desktop-right-cta-btn {
padding: 12px 16px;
background: rgba(10,15,30,0.94);
color: #f8fafc;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
min-width: 168px;
border-radius: var(--radius-md);
backdrop-filter: none;
}
.desktop-right-cta--dark .desktop-right-cta-btn.primary { background: var(--gold); color: #fff; border-color: transparent; }
.desktop-right-cta--dark .desktop-right-cta-btn:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.desktop-right-cta--dark .desktop-right-cta-btn i { font-size: 16px; opacity: 1; }
.desktop-right-cta--dark .desktop-right-cta-dropdown {
right: calc(100% + 12px);
background: #fff;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
padding: 8px;
}
.desktop-right-cta--dark .desktop-right-cta-dropdown a { padding: 10px 12px; }
.desktop-right-cta--dark .desktop-right-cta-chip { color: var(--gold); font-weight: 900; } body.has-fixed-cta { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
body.ksl-page-index.has-fixed-cta { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
body.has-fixed-cta.ksl-cta-light { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
body.has-fixed-cta.ksl-cta-dark { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.fixed-cta-bar {
position: fixed; left: 0; bottom: 0; width: 100%;
background: var(--navy);
border-top: 1px solid rgba(184,146,74,0.3);
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
z-index: 9999;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fixed-cta-bar.fixed-cta-bar--light { box-shadow: 0 -8px 32px rgba(0,0,0,0.3); }
.fixed-cta-bar.fixed-cta-bar--dark {
border-top: 1px solid rgba(184,146,74,0.35);
box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
}
.fixed-cta-inner { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; align-items: stretch; flex-wrap: nowrap; }
.fixed-cta-inner > * { flex: 1 1 0; min-width: 0; }
.cta-dropdown-wrap, .cta-faq-wrap { position: relative; display: flex; }
.cta-dropdown-btn, #ctaFaq { width: 100%; height: 100%; }
.fixed-cta-bar--compact .cta-btn {
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 3px;
padding: 12px 0; min-height: 58px;
border: none; border-right: 1px solid rgba(255,255,255,0.07);
background: var(--navy); color: rgba(255,255,255,0.88);
font-size: 11px; font-weight: 700;
white-space: nowrap; cursor: pointer; touch-action: manipulation;
transition: background 0.15s;
}
.fixed-cta-bar--compact .cta-btn.primary { background: var(--gold); color: var(--navy); }
.fixed-cta-bar--compact .cta-btn.primary:hover { background: var(--gold-light); }
.fixed-cta-bar--compact .cta-btn:hover { background: var(--navy-mid); }
body.ksl-page-index .fixed-cta-bar--compact .cta-btn { padding: 13px 0; font-size: 12px; }
.fixed-cta-bar--compact .cta-icon {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
background: rgba(255,255,255,0.1); color: var(--gold-light);
}
.fixed-cta-bar--compact .cta-btn.primary .cta-icon { background: rgba(10,15,30,0.18); color: var(--navy); }
.fixed-cta-bar--compact .cta-label-main { font-size: 11px; font-weight: 700; } .fixed-cta-bar--compact .cta-btn--naver { position: relative; overflow: hidden; background: #03c75a; color: #fff; }
.fixed-cta-bar--compact .cta-btn--naver:hover { background: #02b350; }
.fixed-cta-bar--compact .cta-btn--naver .cta-icon { background: rgba(255,255,255,0.22); color: #fff; }
.fixed-cta-bar--compact .cta-btn--naver .cta-label-main { color: #fff; }
.fixed-cta-bar--compact .cta-btn--naver::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -160%; width: 55%;
background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
transform: skewX(-20deg); pointer-events: none;
animation: ctaBarShimmer 3.8s ease-in-out infinite;
}
@keyframes ctaBarShimmer { 0% { left: -160%; } 60%, 100% { left: 170%; } }
@media (prefers-reduced-motion: reduce) {
.fixed-cta-bar--compact .cta-btn--naver::after { animation: none; }
}
.fixed-cta-bar--compact .arrow { font-size: 9px; opacity: 0.7; }
.fixed-cta-bar--compact .cta-dropdown,
.fixed-cta-bar--compact #ctaFaqBox {
display: none;
position: absolute; bottom: calc(58px + env(safe-area-inset-bottom, 0px));
left: 0; width: 100%;
background: var(--bg-card); border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: 0 -8px 24px rgba(10,15,30,0.18); z-index: 2;
}
.fixed-cta-bar--compact .cta-dropdown.open,
.fixed-cta-bar--compact #ctaFaqBox.open { display: block; }
.fixed-cta-bar--compact .cta-dropdown a,
.fixed-cta-bar--compact #ctaFaqBox a {
padding: 11px 14px; display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700; color: var(--navy);
border-bottom: 1px solid var(--border-subtle);
}
.fixed-cta-bar--compact .cta-dropdown a:last-child,
.fixed-cta-bar--compact #ctaFaqBox a:last-child { border-bottom: none; }
.fixed-cta-bar--compact .sub-icon {
width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
background: var(--navy); color: var(--gold-light); font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.fixed-cta-bar--light .cta-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
border-radius: 0; padding: 14px 0; min-height: 56px;
border: none; background: var(--navy); color: #e0e0e0;
text-decoration: none; font-size: 12px; font-weight: 600;
white-space: nowrap; cursor: pointer; touch-action: manipulation;
transition: background 0.16s ease;
border-right: 1px solid rgba(255,255,255,0.06);
}
.fixed-cta-bar--light .cta-btn:last-child { border-right: none; }
.fixed-cta-bar--light .cta-btn.primary { background: var(--gold); color: var(--navy); font-weight: 700; }
.fixed-cta-bar--light .cta-icon {
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
background: rgba(255,255,255,0.1); color: var(--gold);
}
.fixed-cta-bar--light .cta-btn.primary .cta-icon { background: rgba(10,15,30,0.15); color: var(--navy); }
.fixed-cta-bar--light .cta-label-sub { font-size: 10px; opacity: 0.7; }
.fixed-cta-bar--light .cta-dropdown {
display: none; position: absolute;
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
left: 0; width: 100%;
background: #fff; border: none;
border-radius: var(--radius-lg);
box-shadow: 0 -12px 40px rgba(0,0,0,0.2); z-index: 2;
}
.fixed-cta-bar--light .cta-dropdown.open { display: block; }
.fixed-cta-bar--light .cta-dropdown a {
padding: 14px 16px; display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--text-primary); font-weight: 600;
text-decoration: none; border-bottom: 1px solid var(--border-subtle);
}
.fixed-cta-bar--light .cta-dropdown a:last-child { border-bottom: none; }
.fixed-cta-bar--light .cta-dropdown a:hover { background: var(--bg-warm); }
.fixed-cta-bar--light .sub-icon {
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--navy); color: var(--gold); font-size: 10px; font-weight: 700;
}
.fixed-cta-bar--light #ctaFaqBox {
display: none; position: absolute;
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
left: 0; width: 100%;
background: #fff; border: none;
border-radius: var(--radius-lg);
box-shadow: 0 -12px 40px rgba(0,0,0,0.2); z-index: 2;
}
.fixed-cta-bar--light #ctaFaqBox.open { display: block; }
.fixed-cta-bar--light #ctaFaqBox a {
padding: 14px 16px; display: flex;
font-size: 14px; color: var(--text-primary); font-weight: 600;
text-decoration: none; border-bottom: 1px solid var(--border-subtle);
}
.fixed-cta-bar--light #ctaFaqBox a:last-child { border-bottom: none; }
.fixed-cta-bar--light #ctaFaqBox a:hover { background: var(--bg-warm); }
.fixed-cta-bar--dark .cta-btn {
display: flex; align-items: center; justify-content: center;
gap: 6px; border-radius: 0; padding: 14px 0; min-height: 60px;
border: none; border-right: 1px solid rgba(255,255,255,0.06);
background: var(--navy); color: rgba(255,255,255,0.85);
text-decoration: none; font-size: 13px; font-weight: 700;
white-space: nowrap; cursor: pointer; touch-action: manipulation;
transition: background 0.16s ease;
}
.fixed-cta-bar--dark .cta-btn:last-child { border-right: none; }
.fixed-cta-bar--dark .cta-btn.primary { background: var(--gold); color: #fff; border-right-color: rgba(255,255,255,0.1); }
.fixed-cta-bar--dark .cta-btn.primary:hover { background: var(--gold-light); }
.fixed-cta-bar--dark .cta-icon {
width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
font-size: 12px; background: rgba(255,255,255,0.12); color: #fff;
}
.fixed-cta-bar--dark .cta-btn.primary .cta-icon { background: rgba(0,0,0,0.15); }
.fixed-cta-bar--dark .cta-label-sub { font-size: 11px; opacity: 0.7; }
.fixed-cta-bar--dark .cta-dropdown,
.fixed-cta-bar--dark #ctaFaqBox {
display: none; position: absolute;
bottom: calc(60px + env(safe-area-inset-bottom, 0px));
left: 0; width: 100%;
border-radius: var(--radius-lg);
background: #fff; box-shadow: 0 -12px 32px rgba(0,0,0,0.2); z-index: 2;
}
.fixed-cta-inner > :first-child .cta-btn { border-top-left-radius: var(--radius-lg); }
.fixed-cta-inner > :last-child .cta-btn { border-top-right-radius: var(--radius-lg); }
.fixed-cta-bar--dark .cta-dropdown.open,
.fixed-cta-bar--dark #ctaFaqBox.open { display: block; }
.fixed-cta-bar--dark .cta-dropdown a {
padding: 12px 16px; display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--navy); text-decoration: none;
border-bottom: 1px solid var(--border-subtle); font-weight: 600;
}
.fixed-cta-bar--dark .cta-dropdown a:last-child { border-bottom: none; }
.fixed-cta-bar--dark #ctaFaqBox a {
padding: 12px 16px; display: flex; font-size: 13px;
color: var(--navy); text-decoration: none;
border-bottom: 1px solid var(--border-subtle); font-weight: 600;
}
.fixed-cta-bar--dark #ctaFaqBox a:last-child { border-bottom: none; }
.fixed-cta-bar--dark .sub-icon {
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
background: var(--navy); color: var(--gold); font-size: 11px; font-weight: 900;
} @media (min-width: 993px) {
.desktop-right-cta { display: block; }
.fixed-cta-bar { display: none; }
body.has-fixed-cta { padding-bottom: 0 !important; }
}
@media (max-width: 992px) {
.gnb {
position: fixed; top: var(--header-h); right: -100%;
width: min(100%, 360px); height: calc(100vh - var(--header-h));
background: var(--bg-card); flex-direction: column;
padding: 20px 0 40px; overflow-y: auto;
color: var(--navy);
border-left: 1px solid var(--border-light);
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
box-shadow: -4px 0 20px rgba(0,0,0,0.08);
transition: right 0.3s ease; z-index: 1000; align-items: flex-start; gap: 0;
}
.gnb.open { right: 0; }
.nav-list { flex-direction: column; width: 100%; height: auto; gap: 0; }
.nav-item { width: 100%; height: auto; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--border-subtle); padding: 4px 0; }
.nav-link { width: calc(100% - 24px); height: auto; padding: 15px 18px; margin: 0 12px; font-size: 16px; border-radius: var(--radius-md); } .site-header .gnb .nav-link {
color: var(--navy);
font-weight: 800;
letter-spacing: -0.01em;
}
.site-header .gnb .nav-link:hover,
.site-header .gnb .nav-link.active {
background: rgba(184,146,74,0.14);
color: var(--navy);
}
.site-header .gnb .nav-item.active > .nav-link,
.site-header .gnb .menu-item-has-children.active > a {
background: rgba(184,146,74,0.14);
color: var(--navy);
}
.sub-menu {
position: static; width: calc(100% - 24px);
margin: 0 12px 8px;
box-shadow: none;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-warm);
opacity: 1; visibility: visible; transform: none;
padding: 6px; display: none;
}
.nav-item.active .sub-menu,
.menu-item-has-children.active .sub-menu { display: block; }
.sub-menu a { padding: 11px 20px; margin: 2px 6px; border-radius: var(--radius-sm); font-size: 14px; color: var(--navy); font-weight: 700; }
.sub-menu a:hover { background: rgba(184,146,74,0.12); color: var(--navy); }
.nav-cta { margin: 24px auto; width: calc(100% - 48px); text-align: center; height: 46px; justify-content: center; display: flex; }
.menu-toggle { display: flex; align-items: center; }
.site-header .gnb .nav-link:focus-visible,
.site-header .gnb .sub-menu a:focus-visible,
.site-header .gnb .nav-cta:focus-visible {
outline: 3px solid rgba(184,146,74,0.55);
outline-offset: -3px;
}
}
@media (max-width: 900px) {
.footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 768px) {
html body { font-size: 16px; }
body.has-fixed-cta.ksl-cta-light { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
body.has-fixed-cta.ksl-cta-dark { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.fixed-cta-bar--light .cta-btn { padding: 10px 0; min-height: 52px; font-size: 11px; }
.fixed-cta-bar--light .cta-label-sub { display: none; }
.fixed-cta-bar--light .cta-dropdown,
.fixed-cta-bar--light #ctaFaqBox { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
.fixed-cta-bar--dark .cta-btn { padding: 12px 0; min-height: 56px; font-size: 12px; }
.fixed-cta-bar--dark .cta-label-sub { display: none; }
.fixed-cta-bar--dark .cta-dropdown,
.fixed-cta-bar--dark #ctaFaqBox { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
.site-footer { padding: 40px 16px 28px; }
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
.footer-quick { grid-template-columns: 1fr 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
body .container,
body .inner,
body .header-inner { padding-left: 16px; padding-right: 16px; }
body .footer-desc,
body .footer-contact,
body .footer-links { font-size: 14px; }
body .footer-quick a { font-size: 13px; }
body .footer-notice,
body .footer-bottom { font-size: 13px; }
} .footer-growth-bridge {
padding: 56px 20px;
background:
linear-gradient(135deg, rgba(10, 15, 30, .96), rgba(30, 42, 63, .94)),
#0a0f1e;
color: #fff;
}
.footer-growth-inner {
max-width: var(--max-width, 1080px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: center;
}
.footer-growth-kicker {
display: inline-flex;
margin-bottom: 10px;
color: var(--gold-light, #d4b978);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
}
.footer-growth-copy h2 {
margin: 0 0 12px;
color: #fff;
font-family: var(--font-serif, "Noto Serif KR", serif);
font-size: clamp(24px, 3vw, 34px);
line-height: 1.35;
word-break: keep-all;
}
.footer-growth-copy p {
max-width: 620px;
margin: 0;
color: rgba(255, 255, 255, .68);
font-size: 15px;
line-height: 1.75;
word-break: keep-all;
}
.footer-growth-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
min-width: 230px;
}
.footer-growth-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 48px;
padding: 0 18px;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, .22);
color: #fff;
font-size: 14px;
font-weight: 800;
text-decoration: none;
}
.footer-growth-btn--primary {
background: var(--gold, #b8924a);
border-color: var(--gold, #b8924a);
color: var(--navy, #0a0f1e);
}
.footer-growth-btn--ghost {
color: var(--gold-light, #d4b978);
}
.footer-growth-btn:hover {
transform: translateY(-1px);
border-color: var(--gold-light, #d4b978);
}
@media (max-width: 768px) {
.footer-growth-bridge { padding: 42px 16px; }
.footer-growth-inner {
grid-template-columns: 1fr;
gap: 22px;
}
.footer-growth-actions {
min-width: 0;
width: 100%;
}
.footer-growth-btn {
width: 100%;
min-height: 52px;
}
}   :root {
--navy: #0a0f1e;
--navy-mid: #141b2d;
--navy-light: #1e2a3f;
--gold: #b8924a;
--gold-light: #d4b978;
--gold-muted: rgba(184, 146, 74, 0.12);
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-muted: #777;
--text-light: #999;
--bg-page: #f8f7f5;
--bg-warm: #f5f3ef;
--bg-card: #ffffff;
--border-light: #e8e5e0;
--border-subtle: #f0ede8;
--header-h: 72px;
--max-width: 1080px;
--font-serif: "Noto Serif KR", "Batang", serif;
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
--shadow-float: 0 20px 50px -12px rgba(10, 15, 30, 0.18);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} body.ksl-page-index {
--header-h: 108px;
--bg-page: #f6f4ef;
--bg-warm: #f1ede4;
} *, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--text-primary);
background-color: var(--bg-page);
line-height: 1.7;
font-size: 16px;
padding-top: var(--header-h);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} body.ksl-page-index { padding-top: 0; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul, li { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; border: none; font-family: inherit; background: none; }
img { max-width: 100%; display: block; }
strong { font-weight: 800; }
.container,
.inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.skip-link {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
background: var(--navy);
color: #fff;
padding: 12px 24px;
z-index: 10000;
font-size: 14px;
font-weight: 600;
}
.skip-link:focus { top: 8px; } .section-py { padding: 100px 0; }
body.ksl-page-index .section-py { padding: 96px 0; }
.section-header {
text-align: left;
margin-bottom: 52px;
}
body:not(.ksl-page-index) .section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.section-kicker {
color: var(--gold);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 12px;
} body.ksl-page-index .section-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
position: relative;
}
body.ksl-page-index .section-kicker::before {
content: '';
width: 34px;
height: 1px;
background: linear-gradient(to right, rgba(184, 146, 74, 0), rgba(184, 146, 74, 0.75));
}
body.ksl-page-index .section-kicker::after {
content: '';
width: 34px;
height: 1px;
background: linear-gradient(to left, rgba(184, 146, 74, 0), rgba(184, 146, 74, 0.45));
}
.section-title,
.section-heading {
font-family: var(--font-serif);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--navy);
margin: 0 0 16px;
word-break: keep-all;
}
.section-desc {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.85;
word-break: keep-all;
margin: 0;
}
body:not(.ksl-page-index) .section-desc {
font-size: 15px;
color: var(--text-muted);
line-height: 1.75;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 28px;
font-size: 15px;
font-weight: 700;
font-family: var(--font-sans);
cursor: pointer;
transition: var(--transition);
letter-spacing: -0.01em;
text-decoration: none;
border: 1px solid transparent;
}
.btn-primary {
background: var(--gold);
color: var(--navy);
}
.btn-primary:hover {
background: var(--gold-light);
transform: translateY(-1px);
} .btn-outline,
.btn-ghost {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.9);
}
.btn-outline:hover,
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
body.ksl-page-index .btn-group { justify-content: center; } .site-header {
background: #fff;
height: var(--header-h);
border-bottom: 1px solid var(--border-light);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
height: 100%;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-area {
display: flex;
align-items: center;
gap: 12px;
}
.logo-img { height: 36px; width: auto; }
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-main {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
}
.logo-sub {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.06em;
font-weight: 500;
}
.gnb {
display: flex;
align-items: center;
gap: 28px;
height: 100%;
}
.nav-list {
display: flex;
gap: 6px;
height: 100%;
}
.nav-item {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.nav-link {
font-size: 15px;
font-weight: 600;
color: var(--text-secondary);
padding: 0 10px;
position: relative;
letter-spacing: -0.01em;
background: transparent;
border: 0;
appearance: none;
display: inline-flex;
align-items: center;
height: 100%;
cursor: pointer;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav-link:hover { color: var(--navy); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link.active {
color: var(--navy);
font-weight: 700;
}
.sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: #fff;
min-width: 180px;
border-radius: 8px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-light);
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
padding: 6px 0;
}
.nav-item:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.sub-menu a {
display: block;
padding: 10px 20px;
font-size: 14px;
color: var(--text-secondary);
font-weight: 500;
}
.sub-menu a:hover {
background: var(--bg-warm);
color: var(--navy);
font-weight: 600;
}
.nav-cta {
padding: 10px 24px;
background: var(--navy);
color: #fff;
font-size: 13px;
font-weight: 700;
border-radius: 6px;
letter-spacing: 0.02em;
transition: var(--transition);
display: inline-flex;
align-items: center;
height: 40px;
}
.nav-cta:hover { background: var(--navy-light); }
.menu-toggle {
display: none;
width: 24px;
height: 18px;
position: relative;
z-index: 1100;
background: none;
padding: 0;
}
.menu-toggle span {
display: block;
width: 100%;
height: 1.5px;
background: var(--navy);
position: absolute;
left: 0;
transition: 0.3s;
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }
.menu-toggle.active span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) {
bottom: auto;
top: 50%;
transform: rotate(-45deg);
} .site-header.site-header--hero {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: auto;
background: rgba(10, 15, 30, 0.42);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: none;
}
.site-header--hero .header-inner { height: 72px; }
.site-header--hero .logo-main { color: rgba(255, 255, 255, 0.95); font-size: 18px; }
.site-header--hero .logo-sub {
color: rgba(255, 255, 255, 0.68);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-header--hero .logo-img { height: 34px; }
.site-header--hero .gnb { gap: 24px; }
.site-header--hero .nav-list { gap: 4px; }
.site-header--hero .nav-link {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 12px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.84);
border-radius: 6px;
}
.site-header--hero .nav-link::after { display: none; }
.site-header--hero .nav-link:hover,
.site-header--hero .nav-link.active {
background: rgba(184, 146, 74, 0.18);
color: #fff;
}
.site-header--hero .nav-cta {
background: var(--gold);
color: var(--navy);
border-radius: 0;
font-size: 13px;
height: 40px;
padding: 0 18px;
letter-spacing: 0.01em;
}
.site-header--hero .nav-cta:hover { background: var(--gold-light); }
.site-header--hero .menu-toggle span { background: rgba(255, 255, 255, 0.95); height: 2px; }
.header-topline {
background: rgba(10, 15, 30, 0.58);
border-bottom: 1px solid rgba(184, 146, 74, 0.22);
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
letter-spacing: 0.02em;
}
.header-topline-inner {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.topline-copy { font-weight: 600; }
.topline-links {
display: flex;
align-items: center;
gap: 16px;
white-space: nowrap;
font-weight: 700;
}
.topline-links a {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.82);
}
.topline-links a:hover { color: var(--gold-light); } .site-header.site-header--compact {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(10, 15, 30, 0.06);
} .fade-section {
opacity: 1;
transform: none;
}
body.js-enhanced.ksl-reveal-ready .fade-section {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
body.js-enhanced.ksl-reveal-ready .fade-section.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.fade-section { opacity: 1; transform: none; transition: none; }
} .site-footer {
background: #050a14;
color: #e5e7eb;
padding: 56px 24px 34px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
font-family: var(--font-sans);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 28px;
align-items: start;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
}
.footer-logo-img {
width: 40px;
height: 40px;
object-fit: contain;
flex-shrink: 0;
}
.footer-logo-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-logo-main {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
color: #f0ede8;
letter-spacing: -0.02em;
}
.footer-logo-sub {
font-size: 11px;
color: #9ca3af;
letter-spacing: 0.06em;
}
.footer-desc {
font-size: 13px;
line-height: 1.75;
color: #9ca3af;
margin: 0;
}
.footer-contact {
font-size: 13px;
line-height: 1.85;
color: #d1d5db;
}
.footer-contact .label {
color: var(--gold);
font-weight: 700;
margin-right: 6px;
}
.footer-contact a {
color: inherit;
}
.footer-contact a:hover { color: var(--gold-light); }
.footer-col h4 {
font-size: 14px;
font-weight: 700;
margin: 0 0 12px;
color: #f8f8f6;
font-family: var(--font-sans);
}
.footer-links {
display: grid;
gap: 7px;
font-size: 13px;
}
.footer-links a {
color: #d1d5db;
opacity: 0.85;
}
.footer-links a:hover {
color: var(--gold-light);
opacity: 1;
}
.footer-quick {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 7px;
}
.footer-quick a {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
color: #d1d5db;
font-size: 12px;
font-weight: 700;
}
.footer-quick a:hover {
background: rgba(184, 146, 74, 0.1);
color: var(--gold-light);
}
.footer-line {
max-width: var(--max-width);
margin: 26px auto 16px;
height: 1px;
background: rgba(255, 255, 255, 0.07);
}
.footer-notice {
max-width: var(--max-width);
margin: 0 auto;
font-size: 12px;
line-height: 1.8;
color: #6b7280;
}
.footer-bottom {
max-width: var(--max-width);
margin: 14px auto 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #6b7280;
}
.footer-bottom a:hover { color: var(--gold-light); } body.ksl-page-index .hero {
background-color: var(--navy);
background-image:
linear-gradient(to right, transparent 0%, var(--gold) 50%, transparent 100%),
linear-gradient(90deg,
rgba(10, 15, 30, 0.82) 0%,
rgba(10, 15, 30, 0.55) 55%,
rgba(10, 15, 30, 0.82) 100%),
url(//xn--4k0bz8yc2cipax5ws4w.com/wp-content/themes/0427/assets/img/law-900.webp);
background-size: 100% 2px, cover, cover;
background-position: left bottom, center, center;
background-repeat: no-repeat, no-repeat, no-repeat;
color: white;
position: relative;
padding: calc(var(--header-h) + clamp(64px, 9vw, 120px)) 0 110px;
overflow: hidden;
}
body.ksl-page-index .hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 42px;
align-items: center;
position: relative;
z-index: 2;
}
body.ksl-page-index .hero-content {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
body.ksl-page-index .hero-kicker {
display: block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
font-weight: 700;
margin-bottom: 18px;
}
body.ksl-page-index .hero-content h1 {
font-family: var(--font-serif);
font-size: clamp(36px, 4.8vw, 58px);
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.02em;
margin: 0 0 20px;
color: #fff;
}
body.ksl-page-index .hero-content h1 .highlight { color: var(--gold-light); }
body.ksl-page-index .hero-content p {
font-size: 17px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.85;
margin: 0 0 32px;
word-break: keep-all;
}
body.ksl-page-index .hero-trust-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 0 32px;
}
body.ksl-page-index .hero-trust-list li {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1px solid rgba(184, 146, 74, 0.3);
background: rgba(184, 146, 74, 0.06);
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
font-weight: 700;
}
body.ksl-page-index .hero-trust-list i {
color: var(--gold-light);
font-size: 11px;
} body.ksl-page-index .stats-bar {
background: var(--navy-mid);
border-bottom: 1px solid rgba(184, 146, 74, 0.18);
}
body.ksl-page-index .stats-bar-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
body.ksl-page-index .stat-item {
padding: 30px 16px;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
body.ksl-page-index .stat-item:last-child { border-right: none; }
body.ksl-page-index .stat-num {
font-family: var(--font-serif);
font-size: clamp(24px, 2.8vw, 36px);
font-weight: 700;
color: var(--gold-light);
line-height: 1;
}
body.ksl-page-index .stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.62);
line-height: 1.45;
word-break: keep-all;
} body.ksl-page-index .situation {
background: var(--bg-warm);
background-image:
radial-gradient(ellipse 720px 520px at 80% 10%, rgba(184, 146, 74, 0.10), transparent 70%),
radial-gradient(ellipse 560px 420px at 10% 80%, rgba(10, 15, 30, 0.04), transparent 70%);
border-top: 1px solid var(--border-subtle);
}
body.ksl-page-index .situation-wrapper {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 72px;
align-items: center;
}
body.ksl-page-index .situation-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 32px;
padding: 12px 20px;
background: var(--navy);
color: #fff;
font-weight: 700;
font-size: 14px;
transition: var(--transition);
}
body.ksl-page-index .situation-link::after { content: '→'; }
body.ksl-page-index .situation-link:hover { background: var(--navy-light); }
body.ksl-page-index .check-list {
display: flex;
flex-direction: column;
gap: 14px;
}
body.ksl-page-index .check-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
padding: 22px 26px;
display: flex;
gap: 18px;
align-items: flex-start;
transition: var(--transition);
}
body.ksl-page-index .check-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(10, 15, 30, 0.10);
}
body.ksl-page-index .check-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
body.ksl-page-index .check-content h3,
body.ksl-page-index .check-content h4 {
margin: 0 0 5px;
font-size: 16px;
font-weight: 700;
color: var(--navy);
}
body.ksl-page-index .check-content p {
margin: 0;
font-size: 14px;
color: var(--text-muted);
line-height: 1.65;
} body.ksl-page-index .solutions {
background: var(--bg-page);
background-image:
radial-gradient(ellipse 760px 520px at 14% 18%, rgba(184, 146, 74, 0.07), transparent 68%);
border-top: 1px solid var(--border-subtle);
}
body.ksl-page-index .solution-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
body.ksl-page-index .sol-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
padding: 36px 28px;
display: flex;
flex-direction: column;
transition: var(--transition);
}
body.ksl-page-index .sol-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(10, 15, 30, 0.10);
}
body.ksl-page-index .sol-icon {
width: 52px;
height: 52px;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 22px;
}
body.ksl-page-index .sol-title {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 700;
color: var(--navy);
margin: 0 0 14px;
}
body.ksl-page-index .sol-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.75;
margin: 0 0 22px;
flex-grow: 1;
}
body.ksl-page-index .sol-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.02em;
padding: 8px 0;
border-bottom: 1px solid rgba(184, 146, 74, 0.3);
transition: var(--transition);
}
body.ksl-page-index .sol-link::after { content: '→'; font-size: 14px; }
body.ksl-page-index .sol-link:hover {
color: var(--navy);
border-bottom-color: var(--navy);
} body.ksl-page-index .cases-section {
background: var(--bg-warm);
background-image:
radial-gradient(ellipse 820px 560px at 80% 20%, rgba(184, 146, 74, 0.09), transparent 70%);
border-top: 1px solid var(--border-subtle);
}
body.ksl-page-index .cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
body.ksl-page-index .case-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
overflow: hidden;
transition: var(--transition);
}
body.ksl-page-index .case-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(10, 15, 30, 0.10);
}
body.ksl-page-index .case-img-wrap {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}
body.ksl-page-index .case-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
body.ksl-page-index .case-card:hover .case-img-wrap img { transform: scale(1.04); }
body.ksl-page-index .case-badge {
position: absolute;
top: 14px;
left: 14px;
background: rgba(10, 15, 30, 0.88);
color: var(--gold-light);
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
border: 1px solid rgba(184, 146, 74, 0.3);
}
body.ksl-page-index .case-content { padding: 24px; }
body.ksl-page-index .case-head {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
line-height: 1.45;
color: var(--navy);
margin: 0 0 8px;
}
body.ksl-page-index .case-meta {
display: block;
font-size: 12px;
color: var(--text-light);
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
}
body.ksl-page-index .case-result {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
}
body.ksl-page-index .case-result strong {
color: var(--gold);
background: var(--gold-muted);
padding: 1px 4px;
} body.ksl-page-index .reviews-section {
background: var(--bg-page);
background-image:
radial-gradient(ellipse 740px 520px at 18% 12%, rgba(184, 146, 74, 0.06), transparent 70%);
border-top: 1px solid var(--border-subtle);
}
body.ksl-page-index .review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
body.ksl-page-index .review-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
padding: 28px;
transition: var(--transition);
}
body.ksl-page-index .review-card:hover {
border-color: rgba(184, 146, 74, 0.55);
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(10, 15, 30, 0.10);
}
body.ksl-page-index .stars {
color: var(--gold);
margin-bottom: 14px;
font-size: 12px;
letter-spacing: 2px;
}
body.ksl-page-index .review-text {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.75;
margin: 0 0 16px;
position: relative;
padding-top: 16px;
}
body.ksl-page-index .review-text::before {
content: '"';
position: absolute;
top: -6px;
left: -2px;
font-family: var(--font-serif);
font-size: 32px;
line-height: 1;
color: rgba(184, 146, 74, 0.35);
}
body.ksl-page-index .review-author {
font-size: 13px;
font-weight: 700;
color: var(--navy);
} body.ksl-page-index .profile-section {
background: var(--bg-card);
border-top: 1px solid var(--border-subtle);
}
body.ksl-page-index .profile-editorial {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
body.ksl-page-index .profile-editorial .section-kicker { margin-bottom: 20px; }
body.ksl-page-index .profile-quote {
font-family: var(--font-serif);
font-size: clamp(26px, 3.2vw, 40px);
font-weight: 700;
color: var(--navy);
line-height: 1.42;
margin: 0 0 44px;
letter-spacing: -0.02em;
position: relative;
}
body.ksl-page-index .profile-quote::before {
content: '\201C';
position: absolute;
top: -0.15em;
left: -0.22em;
font-size: 3.6em;
color: rgba(184, 146, 74, 0.13);
font-family: var(--font-serif);
line-height: 1;
pointer-events: none;
}
body.ksl-page-index .profile-quote .gold { color: var(--gold); }
body.ksl-page-index .profile-body-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
text-align: left;
border-top: 1px solid var(--border-subtle);
padding-top: 32px;
margin-bottom: 36px;
}
body.ksl-page-index .profile-sig {
display: inline-flex;
align-items: center;
gap: 16px;
border-top: 1px solid var(--border-subtle);
padding-top: 28px;
text-align: left;
}
body.ksl-page-index .profile-sig-img {
width: 52px;
height: 52px;
object-fit: cover;
object-position: top center;
border: 1px solid var(--border-light);
flex-shrink: 0;
}
body.ksl-page-index .profile-sig-title {
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 3px;
text-transform: uppercase;
}
body.ksl-page-index .profile-sig-name {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
color: var(--navy);
} body.ksl-page-index .process-section {
background: var(--navy);
color: white;
position: relative;
overflow: hidden;
}
body.ksl-page-index .process-section::before {
content: '';
position: absolute;
inset: -20%;
background:
radial-gradient(ellipse 900px 680px at 70% 10%, rgba(184, 146, 74, 0.10), transparent 70%),
radial-gradient(ellipse 780px 720px at 10% 90%, rgba(184, 146, 74, 0.05), transparent 70%);
opacity: 0.9;
pointer-events: none;
z-index: 0;
}
body.ksl-page-index .process-section .container { position: relative; z-index: 1; }
body.ksl-page-index .process-section .section-title { color: #fff; }
body.ksl-page-index .process-section .section-desc { color: rgba(255, 255, 255, 0.6); }
body.ksl-page-index .process-section .section-kicker { color: var(--gold-light); }
body.ksl-page-index .process-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 0;
}
body.ksl-page-index .p-step {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
padding: 20px 16px;
display: flex;
align-items: flex-start;
gap: 14px;
transition: var(--transition);
}
body.ksl-page-index .p-step:hover {
border-color: rgba(184, 146, 74, 0.45);
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
body.ksl-page-index .p-num {
flex-shrink: 0;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(184, 146, 74, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--gold-light);
font-size: 16px;
transition: var(--transition);
}
body.ksl-page-index .p-step:hover .p-num {
background: var(--gold);
color: var(--navy);
border-color: var(--gold);
}
body.ksl-page-index .p-copy {
display: flex;
flex-direction: column;
gap: 6px;
}
body.ksl-page-index .p-title {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 1.4;
}
body.ksl-page-index .p-text {
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.6;
word-break: keep-all;
} body.ksl-page-index .consult-card {
background: var(--navy);
padding: 80px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
body.ksl-page-index .consult-card::before {
content: '';
position: absolute;
inset: -20%;
background:
radial-gradient(ellipse 820px 560px at 60% 12%, rgba(184, 146, 74, 0.20), transparent 70%),
radial-gradient(ellipse 720px 620px at 20% 86%, rgba(184, 146, 74, 0.10), transparent 70%);
pointer-events: none;
z-index: 0;
}
body.ksl-page-index .consult-card > * { position: relative; z-index: 1; }
body.ksl-page-index .consult-kicker {
display: block;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 16px;
}
body.ksl-page-index .consult-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: #fff;
line-height: 1.35;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
body.ksl-page-index .consult-desc {
font-size: 16px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.8;
margin: 0 0 32px;
word-break: keep-all;
}
body.ksl-page-index .consult-form-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 32px;
align-items: start;
text-align: left;
}
body.ksl-page-index .consult-copy { text-align: left; }
body.ksl-page-index .consult-phone-row {
display: grid;
gap: 12px;
margin-top: 24px;
}
body.ksl-page-index .consult-phone-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.92);
font-weight: 800;
width: fit-content;
}
body.ksl-page-index .consult-phone-link:hover { color: #fff; }
body.ksl-page-index .consult-form-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
padding: 26px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
body.ksl-page-index .consult-form {
display: grid;
gap: 14px;
position: relative;
}
body.ksl-page-index .hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
body.ksl-page-index .consult-form .form-grid-two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
body.ksl-page-index .consult-form .form-group {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
body.ksl-page-index .consult-form .form-label {
font-size: 13px;
font-weight: 800;
color: rgba(255, 255, 255, 0.88);
}
body.ksl-page-index .consult-form .form-input,
body.ksl-page-index .consult-form .form-select,
body.ksl-page-index .consult-form .form-textarea {
padding: 12px 13px;
border: 1px solid rgba(255, 255, 255, 0.18);
font-size: 15px;
font-family: var(--font-sans);
transition: var(--transition);
width: 100%;
line-height: 1.55;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
}
body.ksl-page-index .consult-form .form-input::placeholder,
body.ksl-page-index .consult-form .form-textarea::placeholder {
color: rgba(255, 255, 255, 0.45);
}
body.ksl-page-index .consult-form .form-input:focus,
body.ksl-page-index .consult-form .form-select:focus,
body.ksl-page-index .consult-form .form-textarea:focus {
border-color: var(--gold);
outline: none;
box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.20);
}
body.ksl-page-index .consult-form .form-textarea {
resize: vertical;
min-height: 130px;
}
body.ksl-page-index .consult-form .privacy-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
}
body.ksl-page-index .consult-form .privacy-check input { accent-color: var(--gold); }
body.ksl-page-index .consult-form .consult-submit {
width: 100%;
border: none;
cursor: pointer;
background: var(--gold);
color: var(--navy);
height: 52px;
font-size: 15px;
font-weight: 700;
font-family: var(--font-sans);
transition: var(--transition);
}
body.ksl-page-index .consult-form .consult-submit:hover {
background: var(--gold-light);
transform: translateY(-1px);
}
body.ksl-page-index .consult-form .consult-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
body.ksl-page-index .consult-form-hint {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
text-align: center;
}
body.ksl-page-index .contact-receipt-note {
background: rgba(184, 146, 74, 0.12);
border: 1px solid rgba(184, 146, 74, 0.22);
padding: 12px 14px;
font-size: 13px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.6;
}
body.ksl-page-index .contact-receipt-note a {
color: var(--gold-text, #806731); text-decoration: underline;
} .desktop-right-cta {
position: fixed;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 9998;
display: none;
}
.desktop-right-cta-stack {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.desktop-right-cta-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(10, 15, 30, 0.93);
color: #f0ede8;
text-decoration: none;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: var(--transition);
min-width: 164px;
backdrop-filter: blur(10px);
}
.desktop-right-cta-btn.primary {
background: var(--gold);
color: var(--navy);
border-color: transparent;
}
.desktop-right-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.desktop-right-cta-btn i {
font-size: 17px;
width: 20px;
text-align: center;
}
.desktop-right-cta-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.desktop-right-cta-text .main {
font-weight: 800;
font-size: 13px;
line-height: 1.1;
white-space: nowrap;
}
.desktop-right-cta-text .sub {
font-weight: 600;
font-size: 11px;
opacity: 0.75;
white-space: nowrap;
}
.desktop-right-cta-text .sub.mono {
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.desktop-right-cta-details { position: relative; }
.desktop-right-cta-details > summary { list-style: none; }
.desktop-right-cta-details > summary::-webkit-details-marker { display: none; }
.desktop-right-cta-arrow {
margin-left: auto;
font-size: 12px;
opacity: 0.7;
transition: transform 0.2s ease;
}
.desktop-right-cta-details[open] .desktop-right-cta-arrow { transform: rotate(180deg); }
.desktop-right-cta-dropdown {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
width: 220px;
background: var(--bg-card);
border: 1px solid var(--border-light);
box-shadow: 0 16px 48px rgba(10, 15, 30, 0.2);
overflow: hidden;
padding: 6px;
}
.desktop-right-cta-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
font-weight: 700;
font-size: 13px;
color: var(--navy);
}
.desktop-right-cta-dropdown a:hover { background: var(--bg-warm); }
.desktop-right-cta-chip {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--navy);
color: var(--gold-light);
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
} body.has-fixed-cta {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
.fixed-cta-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: var(--navy);
border-top: 1px solid rgba(184, 146, 74, 0.3);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
z-index: 9999;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fixed-cta-inner {
width: 100%;
display: flex;
align-items: stretch;
flex-wrap: nowrap;
}
.fixed-cta-inner > * {
flex: 1 1 0;
min-width: 0;
}
.cta-dropdown-wrap,
.cta-faq-wrap {
position: relative;
display: flex;
}
.cta-dropdown-btn,
#ctaFaq {
width: 100%;
height: 100%;
}
.cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 13px 0;
min-height: 58px;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.07);
background: var(--navy);
color: rgba(255, 255, 255, 0.88);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
transition: background 0.15s;
flex-direction: column;
gap: 3px;
text-decoration: none;
}
.cta-btn:last-child { border-right: none; }
.cta-btn.primary {
background: var(--gold);
color: var(--navy);
}
.cta-btn.primary:hover { background: var(--gold-light); }
.cta-btn:hover { background: var(--navy-mid); }
.cta-icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
background: rgba(255, 255, 255, 0.1);
color: var(--gold-light);
}
.cta-btn.primary .cta-icon {
background: rgba(10, 15, 30, 0.18);
color: var(--navy);
}
.cta-label-main {
font-size: 11px;
font-weight: 700;
}
.cta-label-sub {
font-size: 10px;
opacity: 0.7;
}
.arrow {
font-size: 9px;
opacity: 0.7;
}
.cta-dropdown {
display: none;
position: absolute;
bottom: calc(58px + env(safe-area-inset-bottom, 0px));
left: 0;
width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-light);
box-shadow: 0 -8px 24px rgba(10, 15, 30, 0.18);
z-index: 2;
}
.cta-dropdown.open { display: block; }
.cta-dropdown a {
padding: 11px 14px;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--navy);
border-bottom: 1px solid var(--border-subtle);
}
.cta-dropdown a:last-child { border-bottom: none; }
.sub-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: var(--navy);
color: var(--gold-light);
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
#ctaFaqBox {
display: none;
position: absolute;
bottom: calc(58px + env(safe-area-inset-bottom, 0px));
left: 0;
width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-light);
box-shadow: 0 -8px 24px rgba(10, 15, 30, 0.18);
z-index: 2;
}
#ctaFaqBox.open { display: block; }
#ctaFaqBox a {
padding: 11px 14px;
display: flex;
font-size: 13px;
font-weight: 700;
color: var(--navy);
border-bottom: 1px solid var(--border-subtle);
}
#ctaFaqBox a:last-child { border-bottom: none; }  @media (min-width: 993px) {
.desktop-right-cta { display: block; }
.fixed-cta-bar { display: none; }
body.has-fixed-cta { padding-bottom: 0 !important; }
}
@media (max-width: 992px) {
:root { --header-h: 72px; }
body.ksl-page-index { --header-h: 72px; }
body.ksl-page-index .header-topline { display: none; }
.gnb {
position: fixed;
top: 72px;
right: -100%;
width: min(100%, 360px);
height: calc(100vh - 72px);
background: var(--bg-card);
flex-direction: column;
padding: 20px 0 40px;
overflow-y: auto;
border-left: 1px solid var(--border-light);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
transition: right 0.3s ease;
z-index: 1000;
align-items: flex-start;
gap: 0;
}
.gnb.open { right: 0; }
.nav-list {
flex-direction: column;
width: 100%;
height: auto;
gap: 0;
}
.nav-item {
width: 100%;
height: auto;
flex-direction: column;
align-items: flex-start;
border-bottom: 1px solid var(--border-subtle);
}
.nav-link {
width: 100%;
height: auto;
padding: 15px 24px;
font-size: 15px;
color: var(--navy);
font-weight: 700;
border-radius: 0;
}
.nav-link::after { display: none; }
.sub-menu {
position: static;
width: 100%;
box-shadow: none;
border: none;
border-top: 1px solid var(--border-subtle);
background: var(--bg-warm);
opacity: 1;
visibility: visible;
transform: none;
padding: 6px;
display: none;
}
.nav-item.active .sub-menu { display: block; }
.sub-menu a { padding: 11px 32px; font-size: 13px; }
.nav-cta {
margin: 24px auto;
width: calc(100% - 48px);
text-align: center;
height: 46px;
justify-content: center;
}
.menu-toggle {
display: flex;
align-items: center;
}
body { overflow-x: hidden; }
body.ksl-page-index .hero-grid { grid-template-columns: 1fr; gap: 40px; }
body.ksl-page-index .hero { text-align: center; }
body.ksl-page-index .btn-group { justify-content: center; }
body.ksl-page-index .hero-trust-list { justify-content: center; }
body.ksl-page-index .situation-wrapper { grid-template-columns: 1fr; gap: 48px; }
body.ksl-page-index .solution-grid { grid-template-columns: 1fr; }
body.ksl-page-index .process-steps { grid-template-columns: repeat(3, 1fr); }
body.ksl-page-index .cases-grid { grid-template-columns: 1fr; }
body.ksl-page-index .review-grid { grid-template-columns: 1fr; }
body.ksl-page-index .consult-form-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 992px) {
body.menu-open {
overflow: hidden;
}
body.menu-open .site-header {
z-index: 10020;
}
body.menu-open .fixed-cta-bar {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.site-header .menu-toggle {
width: 44px;
height: 44px;
margin-right: -10px;
display: inline-flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
z-index: 10002;
}
.site-header .menu-toggle span {
left: 10px;
width: 24px;
transform-origin: center;
}
.site-header .menu-toggle span:nth-child(1) {
top: 14px;
}
.site-header .menu-toggle span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.site-header .menu-toggle span:nth-child(3) {
bottom: 14px;
}
.site-header .menu-toggle.active span:nth-child(1),
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.site-header .menu-toggle.active span:nth-child(2),
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.site-header .menu-toggle.active span:nth-child(3),
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
bottom: auto;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.site-header .gnb {
pointer-events: none;
visibility: hidden;
height: calc(100vh - var(--header-h, 72px));
height: calc(100dvh - var(--header-h, 72px));
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transition: right 0.3s ease, visibility 0s linear 0.3s;
}
.site-header .gnb.open {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.site-header .gnb .nav-list {
flex: 0 0 auto;
overflow: visible;
}
.site-header .gnb .sub-menu li {
display: block;
width: 100%;
}
.site-header .gnb .nav-link,
.site-header .gnb .sub-menu a,
.site-header .gnb .nav-cta {
min-height: 48px;
}
}
@media (max-width: 640px) {
.site-header .gnb {
width: 100%;
border-left: 0;
border-radius: 0;
}
}
@media (max-width: 900px) {
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
html body { font-size: 15px; }
.section-py { padding: 72px 0; }
body.ksl-page-index .section-py { padding: 64px 0; }
}
@media (max-width: 640px) {
body { font-size: 15px; }
body.ksl-page-index .section-py { padding: 64px 0; }
body.ksl-page-index .btn { width: 100%; }
body.ksl-page-index .btn-group { flex-direction: column; }
body.ksl-page-index .process-steps { grid-template-columns: 1fr; }
body.ksl-page-index .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
body.ksl-page-index .stat-item:nth-child(2) { border-right: none; }
body.ksl-page-index .stat-item:nth-child(3) {
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
body.ksl-page-index .stat-item:nth-child(4) {
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
body.ksl-page-index .profile-body-cols { grid-template-columns: 1fr; gap: 16px; }
.footer-inner { grid-template-columns: 1fr; }
.footer-quick { grid-template-columns: 1fr 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.site-footer { padding: 40px 16px 28px; }
}
@media (max-width: 1180px) {
body.ksl-page-index .process-steps { grid-template-columns: repeat(3, 1fr); }
}   html { -webkit-text-size-adjust: 100%; }
body {
font-size: 16px;
line-height: 1.75;
letter-spacing: -0.01em;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media (min-width: 641px) and (max-width: 992px) {
body { font-size: 17px; line-height: 1.78; }
}
@media (max-width: 640px) {
body { font-size: 16px; line-height: 1.78; }
html, body { word-break: keep-all; overflow-wrap: break-word; }
} h1, h2, h3, h4 { word-break: keep-all; letter-spacing: -0.025em; } .hero h1,
.hero-content h1,
.pasan-hero-title,
.about-hero .hero-title,
.contact-hero-title {
font-weight: 800 !important;
line-height: 1.25 !important;
word-break: keep-all;
} .section-title,
.section-heading,
.pasan-card-title,
.consult-title,
.form-title,
.about-certs-header .section-heading,
.corp-lead-title,
.credentials-section .section-title {
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: -0.025em !important;
word-break: keep-all;
} .sol-title, .case-head, .check-content h3, .check-content h4,
.cred-text h3, .diff-title, .step-title, .p-title {
font-weight: 800 !important;
letter-spacing: -0.02em;
line-height: 1.4 !important;
} p { line-height: 1.85; word-break: keep-all; overflow-wrap: break-word; }
.section-desc,
.pasan-card-desc,
.hero-desc,
.pasan-hero-desc,
.contact-hero-desc,
.profile-quote + .profile-body-cols p,
.consult-desc,
.corp-lead-desc {
max-width: 64ch;
line-height: 1.85 !important;
} .section-header .section-desc,
.about-certs-header .section-desc,
.credentials-header .section-desc {
margin-left: auto;
margin-right: auto;
} strong, b { font-weight: 800; }
.hero-content h1 strong, .hero h1 strong { font-weight: 800; }
.highlight { font-weight: 800; } .section-desc strong,
.consult-desc strong,
.pasan-hero-desc strong,
.hero-content p strong {
color: var(--navy);
font-weight: 800;
background: linear-gradient(180deg, transparent 60%, rgba(184,146,74,0.22) 60%);
padding: 0 2px;
}
.consult-card .consult-desc strong,
.hero p strong {
color: var(--gold-light);
background: none;
padding: 0;
} @media (max-width: 992px) {
.section-py { padding: 76px 0; }
}
@media (max-width: 640px) {
.section-py { padding: 56px 0; }
.hero { padding-top: calc(var(--header-h, 72px) + 56px); padding-bottom: 72px; }
} .section-header { margin-bottom: 48px; }
@media (max-width: 640px) {
.section-header { margin-bottom: 36px; }
.credentials-header { margin-bottom: 36px !important; }
} @media (max-width: 640px) {
.container, .inner, body .container, body .inner { padding-left: 20px; padding-right: 20px; }
} .btn, .consult-btn, .cta-btn, .submit-btn,
.pasan-hero-btn, .about-hero-btn, .corp-lead-btn,
.corp-site-banner-btn,
.btn-big, .nav-cta, .situation-link, .sol-link {
min-height: 48px;
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
}
.btn { height: auto; padding: 14px 28px; }
.consult-btn { padding: 16px 32px; } @media (max-width: 640px) {
.btn-group,
.cta-box-actions,
.pasan-hero-actions,
.about-hero-actions,
.corp-lead-actions,
.btn-action-group {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.btn-group .btn,
.cta-box-actions .cta-btn,
.pasan-hero-actions .pasan-hero-btn,
.about-hero-actions .about-hero-btn,
.corp-lead-actions .corp-lead-btn,
.btn-action-group .btn-big {
width: 100%;
min-height: 52px;
justify-content: center;
font-size: 16px;
}
} @media (max-width: 640px) {
.hero-content h1,
.hero h1 {
font-size: clamp(30px, 8vw, 38px) !important;
line-height: 1.22 !important;
margin-bottom: 18px;
}
.hero-content p,
.hero p,
.hero-desc,
.pasan-hero-desc {
font-size: 16px !important;
line-height: 1.78 !important;
margin-bottom: 28px;
}
.pasan-hero-title {
font-size: clamp(26px, 7vw, 32px) !important;
line-height: 1.28 !important;
}
.hero-kicker, .pasan-hero-kicker {
font-size: 11px !important;
letter-spacing: 0.16em !important;
}
} @media (max-width: 640px) {
.section-title,
.section-heading,
.consult-title,
.corp-lead-title,
.form-title {
font-size: 24px !important;
line-height: 1.35 !important;
}
.pasan-card-title {
font-size: 22px !important;
line-height: 1.4 !important;
}
.quote-text, .profile-quote {
font-size: 24px !important;
line-height: 1.45 !important;
}
} @media (max-width: 640px) {
.check-card, .sol-card, .case-card, .review-card,
.cred-card, .diff-card, .info-item, .service-item,
.pasan-section-card, .corp-lead-card, .acc-panel-inner {
padding: 22px 20px !important;
}
.cred-card { gap: 14px !important; }
.cred-text h3 { font-size: 16.5px !important; }
.cred-text p { font-size: 14px !important; line-height: 1.75 !important; }
} .rehab-list li,
.acc-panel ul li,
.corp-lead-points li,
.pasan-hero-trust li,
.hero-trust-list li {
word-break: keep-all;
}
.rehab-list li,
.acc-panel ul li {
padding-left: 4px;
margin-bottom: 10px;
line-height: 1.78;
}
@media (max-width: 640px) {
.rehab-list li, .acc-panel ul li { font-size: 15px; line-height: 1.78; }
} @media (max-width: 640px) {
.hero-trust-list, .pasan-hero-trust {
gap: 6px;
margin-bottom: 22px;
}
.hero-trust-list li, .pasan-hero-trust li {
font-size: 12px !important;
padding: 6px 11px;
}
} .form-input, .form-select, .form-textarea,
.consult-form .form-input, .consult-form .form-select, .consult-form .form-textarea {
min-height: 48px;
font-size: 15px;
line-height: 1.5;
}
.form-label, .consult-form .form-label {
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
}
.form-textarea, .consult-form .form-textarea { min-height: 130px; }
@media (max-width: 640px) {
.form-input, .form-select, .form-textarea,
.consult-form .form-input, .consult-form .form-select, .consult-form .form-textarea {
font-size: 16px;
min-height: 52px;
padding: 14px 14px;
}
.form-label, .consult-form .form-label { font-size: 14px; }
.privacy-check, .consult-form .privacy-check { font-size: 14px; line-height: 1.7; gap: 10px; }
.privacy-check input, .consult-form .privacy-check input { width: 18px; height: 18px; flex-shrink: 0; }
} @media (max-width: 640px) {
.stat-item { padding: 22px 12px !important; gap: 6px !important; }
.stat-num { font-size: 22px !important; }
.stat-label { font-size: 12px !important; line-height: 1.5 !important; }
} @media (max-width: 640px) {
.solution-grid,
.cases-grid,
.review-grid,
.diff-grid,
.service-list,
.overview-grid,
.credentials-grid,
.corp-lead-points {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.credentials-images.credentials-images--single {
max-width: 280px !important;
}
} @media (max-width: 640px) {
.pasan-nav { gap: 4px; padding: 8px 16px; flex-wrap: wrap; }
.pasan-nav-link { font-size: 13px; padding: 8px 10px; }
} @media (max-width: 640px) {
.footer-inner { gap: 28px; }
.footer-desc, .footer-contact, .footer-links { font-size: 14px; line-height: 1.85; }
.footer-quick a { font-size: 13px; padding: 10px 12px; min-height: 44px; }
.footer-col h4 { font-size: 15px; margin-bottom: 14px; }
} .section-desc, .pasan-card-desc, .hero-desc { color: #3a3a3a; }
.text-muted, .case-meta, .review-text { color: #555; }
.consult-card .consult-desc,
.credentials-section .section-desc,
.process-section .section-desc {
color: rgba(255,255,255,0.78);
} @media (max-width: 640px) {
.consult-card { padding-left: 24px !important; padding-right: 24px !important; }
.consult-form-card { padding: 22px !important; }
} @media (max-width: 640px) {
.about-hero .stats-bar { grid-template-columns: 1fr 1fr; gap: 0; }
.about-hero .stat-item { border-bottom: 1px solid var(--border-subtle); padding: 18px 12px !important; }
} @media (max-width: 640px) {
.cert-frame, .about-cert-frame { padding: 12px 12px 14px !important; }
.cert-cap-title, .about-cert-title { font-size: 14px !important; }
.cert-cap-eyebrow, .about-cert-eyebrow { font-size: 10.5px !important; }
} @media (max-width: 640px) {
.fixed-cta-bar--compact .cta-label-main,
.fixed-cta-bar--light .cta-label-main,
.fixed-cta-bar--dark .cta-label-main { font-size: 11.5px !important; font-weight: 800; }
.fixed-cta-bar .cta-btn { min-height: 60px !important; padding: 10px 0 !important; }
} @media (max-width: 640px) {
.acc-btn { padding: 16px 18px !important; font-size: 15px !important; }
.acc-btn-label { gap: 10px; }
.acc-badge { font-size: 10.5px !important; padding: 3px 9px !important; }
} a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.consult-btn:focus-visible,
.cta-btn:focus-visible {
outline: 3px solid rgba(184,146,74,0.55);
outline-offset: 2px;
border-radius: 4px;
} :root {
--layout-gutter: clamp(20px, 3vw, 28px);
--text-secondary: #3d4652;
--text-muted: #5b6470;
--text-light: #68717c;
--border-light: #ddd8d0;
--border-subtle: #e9e4dd;
}
.container,
.inner,
.header-inner {
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
}
.site-footer {
padding-left: 0;
padding-right: 0;
}
.footer-inner,
.footer-notice,
.footer-bottom {
width: 100%;
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
}
.footer-line {
width: calc(100% - (2 * var(--layout-gutter)));
max-width: calc(var(--max-width) - (2 * var(--layout-gutter)));
}
.about-hero .hero-title,
.pasan-hero-title,
.contact-hero-title,
.faq-hero-title,
.cases-title,
.loc-title,
.hero-area .hero-title {
font-weight: 800 !important;
line-height: 1.27 !important;
letter-spacing: -0.03em;
text-wrap: balance;
word-break: keep-all;
}
.about-hero .hero-desc,
.pasan-hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.loc-desc,
.hero-area .hero-desc {
max-width: 62ch;
margin-left: auto;
margin-right: auto;
line-height: 1.85 !important;
text-wrap: pretty;
word-break: keep-all;
}
.cases-head-title,
.faq-group-title,
.sec-title,
.q-title-lg,
.info-title,
.board-title {
color: var(--navy);
font-weight: 800;
line-height: 1.42;
letter-spacing: -0.02em;
text-wrap: balance;
word-break: keep-all;
}
.form-desc,
.cases-head-sub,
.faq-group-desc,
.case-text,
.overview-text,
.step-desc,
.review-text,
.board-note {
color: var(--text-secondary) !important;
line-height: 1.8;
}
body.ksl-page-index .credentials-section .section-header,
body.ksl-page-index .solutions .section-header,
body.ksl-page-index .process-section .section-header,
body.ksl-page-index .cases-section .section-header,
body.ksl-page-index .reviews-section .section-header {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
body.ksl-page-index .credentials-section .section-desc,
body.ksl-page-index .solutions .section-desc,
body.ksl-page-index .process-section .section-desc,
body.ksl-page-index .cases-section .section-desc,
body.ksl-page-index .reviews-section .section-desc {
margin-left: auto;
margin-right: auto;
}
.pasan-hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.about-hero .hero-desc,
.hero-area .hero-desc,
.credentials-section .section-desc,
.process-section .section-desc,
.consult-card .consult-desc,
.corp-lead-desc {
color: rgba(255,255,255,0.84) !important;
}
.btn,
.consult-btn,
.submit-btn,
.pasan-hero-btn,
.about-hero-btn,
.corp-lead-btn,
.corp-site-banner-btn,
.btn-big,
.btn-action {
border-radius: var(--radius-md, 10px);
align-items: center;
justify-content: center;
line-height: 1.35;
text-align: center;
}
.btn-primary,
.consult-btn,
.pasan-hero-btn--primary,
.about-hero-btn--primary,
.corp-lead-btn--primary,
.desktop-right-cta--dark .desktop-right-cta-btn.primary {
color: var(--navy) !important;
}
.case-result strong,
.faq-highlight {
color: var(--navy);
font-weight: 800;
background: linear-gradient(180deg, transparent 58%, rgba(184,146,74,0.2) 58%);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.highlight-box {
border-left: 3px solid var(--gold);
line-height: 1.8;
}
.footer-desc { color: #b6becb; }
.footer-contact,
.footer-links a { color: #d9dee6; }
.footer-notice,
.footer-bottom { color: #a5adba; } .page-main,
.ksl-page,
body.error404 #main {
padding: clamp(64px, 7vw, 88px) 0 clamp(76px, 8vw, 104px);
}
.page-main .container,
.ksl-page .container,
body.error404 #main > .container {
max-width: 900px;
}
.page-head,
.ksl-page > .container > .ksl-page-head {
max-width: 720px;
margin: 0 auto clamp(34px, 4vw, 48px);
text-align: center;
}
.page-title,
.ksl-page-title {
margin: 0 0 14px;
color: var(--navy);
font-family: var(--font-serif);
font-size: clamp(30px, 4vw, 42px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.3;
text-wrap: balance;
word-break: keep-all;
}
.page-excerpt,
.ksl-page-excerpt {
max-width: 62ch;
margin: 0 auto;
color: var(--text-secondary);
font-size: 16px;
line-height: 1.85;
word-break: keep-all;
}
.wp-content {
color: var(--text-secondary);
font-size: 16px;
line-height: 1.85;
}
.wp-content :where(h2, h3, h4) {
margin: 1.8em 0 0.65em;
color: var(--navy);
font-family: var(--font-serif);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.42;
}
.wp-content :where(ul, ol) {
margin: 1.1em 0;
padding-left: 1.35em;
}
.wp-content ul > li { list-style: disc; }
.wp-content ol > li { list-style: decimal; }
.wp-content li {
margin-bottom: 0.45em;
line-height: 1.75;
}
.wp-content a {
color: var(--navy);
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(184,146,74,0.5);
text-underline-offset: 0.2em;
}
.ksl-post {
margin-bottom: 24px;
padding: clamp(24px, 4vw, 34px);
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 14px);
}
.ksl-post .ksl-page-head {
margin-bottom: 16px;
text-align: left;
}
.ksl-post .ksl-page-title {
font-size: clamp(22px, 3vw, 27px);
}
.ksl-post .ksl-page-excerpt {
margin-left: 0;
}
.ksl-404-actions {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.ksl-404-actions .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 13px 25px;
background: var(--navy);
border: 1px solid var(--navy);
border-radius: var(--radius-md, 10px);
color: #fff;
font-weight: 800;
text-decoration: none;
}
.ksl-404-actions .wp-block-button__link.is-style-outline {
background: var(--bg-card);
border-color: var(--border-light);
color: var(--navy);
}
@media (max-width: 992px) {
body.ksl-page-index .section-header {
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
body.ksl-page-index .section-header .section-desc {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 640px) {
:root { --layout-gutter: 20px; }
.hero-content h1 br,
.about-hero .hero-title br,
.pasan-hero-title br,
.contact-hero-title br,
.faq-hero-title br,
.cases-title br,
.loc-title br,
.section-title br,
.section-heading br,
.corp-lead-title br,
.consult-title br,
.hero-desc br,
.pasan-hero-desc br,
.contact-hero-desc br,
.faq-hero-desc br,
.cases-desc br,
.corp-lead-desc br,
.consult-desc br {
display: none;
}
.about-hero .hero-title,
.contact-hero-title,
.faq-hero-title,
.cases-title,
.loc-title,
.hero-area .hero-title {
font-size: clamp(26px, 7.3vw, 31px) !important;
line-height: 1.34 !important;
}
.about-hero .hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.loc-desc,
.hero-area .hero-desc {
font-size: 15.5px !important;
line-height: 1.8 !important;
}
.pasan-nav {
flex-wrap: nowrap !important;
justify-content: flex-start;
gap: 4px;
padding: 8px var(--layout-gutter);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.pasan-nav::-webkit-scrollbar { display: none; }
.pasan-nav-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-height: 44px;
white-space: nowrap;
scroll-snap-align: start;
}
.consult-card .consult-btn,
.submit-btn,
.sec-actions .btn-action {
width: 100%;
min-height: 52px;
justify-content: center;
}
.sec-actions {
flex-direction: column;
align-items: stretch;
}
.corp-lead-points li {
width: 100%;
justify-content: flex-start;
}
.site-footer {
padding-top: 44px;
padding-bottom: 26px;
}
.footer-bottom {
align-items: flex-start;
gap: 8px;
}
.fixed-cta-bar .cta-btn {
gap: 4px;
padding-left: 4px !important;
padding-right: 4px !important;
}
.fixed-cta-bar .cta-label-main {
font-size: clamp(10px, 3vw, 11.5px) !important;
line-height: 1.3;
white-space: normal;
word-break: keep-all;
}
.fixed-cta-bar .cta-label-sub {
display: none;
}
.page-main,
.ksl-page,
body.error404 #main {
padding-top: 52px;
padding-bottom: 68px;
}
.page-title,
.ksl-page-title {
font-size: clamp(27px, 8vw, 32px);
line-height: 1.38;
}
.page-excerpt,
.ksl-page-excerpt,
.wp-content {
font-size: 15.5px;
}
.ksl-post {
padding: 22px 20px;
}
.ksl-404-actions {
flex-direction: column;
align-items: stretch;
}
}  .mobile-menu-conversion {
display: none;
}
@media (max-width: 992px) {
body.menu-open {
overflow: hidden !important;
overscroll-behavior: none;
}
body.menu-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 10010;
background: rgba(5, 10, 22, 0.56);
backdrop-filter: blur(2px);
}
body.menu-open .site-header {
overflow: visible !important;
z-index: 10020 !important;
}
.site-header .header-inner {
overflow: visible !important;
}
.site-header .menu-toggle {
position: relative !important;
flex: 0 0 44px !important;
z-index: 10022 !important;
}
.site-header .gnb,
.site-header.site-header--hero .gnb,
.site-header.site-header--compact .gnb {
position: fixed !important;
top: var(--ksl-mobile-menu-top, var(--header-h, 72px)) !important;
right: -100% !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
width: min(100%, 380px) !important;
max-width: 100vw !important;
height: var(--ksl-mobile-menu-height, calc(100dvh - var(--header-h, 72px))) !important;
min-height: 0 !important;
max-height: var(--ksl-mobile-menu-height, calc(100dvh - var(--header-h, 72px))) !important;
margin: 0 !important;
padding: 12px 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
touch-action: pan-y !important;
-webkit-overflow-scrolling: touch;
color: var(--navy) !important;
background: #fff !important;
border: 0 !important;
border-left: 1px solid var(--border-light) !important;
border-radius: 0 !important;
box-shadow: -16px 20px 48px rgba(7, 16, 31, 0.2) !important;
transform: none !important;
opacity: 1 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 10021 !important;
transition: right 0.28s ease, visibility 0s linear 0.28s !important;
}
.site-header .gnb.open,
.site-header.site-header--hero .gnb.open,
.site-header.site-header--compact .gnb.open {
right: 0 !important;
visibility: visible !important;
pointer-events: auto !important;
transition-delay: 0s !important;
}
.site-header .gnb .nav-list,
.site-header.site-header--hero .gnb .nav-list,
.site-header.site-header--compact .gnb .nav-list {
display: block !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 14px !important;
overflow: visible !important;
order: 0;
}
.site-header .gnb .nav-item,
.site-header.site-header--hero .gnb .nav-item,
.site-header.site-header--compact .gnb .nav-item {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 3px 0 !important;
overflow: visible !important;
border: 0 !important;
border-bottom: 1px solid var(--border-subtle) !important;
}
.site-header .gnb .nav-link,
.site-header.site-header--hero .gnb .nav-link,
.site-header.site-header--compact .gnb .nav-link {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
height: auto !important;
min-height: 50px !important;
margin: 0 !important;
padding: 13px 14px !important;
color: var(--navy) !important;
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
text-align: left !important;
white-space: normal !important;
}
.site-header .gnb .nav-link::after {
display: none !important;
}
.site-header .gnb .nav-link:hover,
.site-header .gnb .nav-link:focus-visible,
.site-header .gnb .nav-item.active > .nav-link,
.site-header .gnb .menu-item-has-children.active > .nav-link {
color: var(--navy) !important;
background: rgba(184, 146, 74, 0.14) !important;
}
.site-header .gnb .nav-caret {
flex: 0 0 auto;
margin-left: 12px !important;
color: var(--gold) !important;
font-size: 12px !important;
line-height: 1 !important;
transition: transform 0.2s ease;
}
.site-header .gnb .nav-item.active > .nav-link .nav-caret,
.site-header .gnb .menu-item-has-children.active > .nav-link .nav-caret {
transform: rotate(180deg) !important;
}
.site-header .gnb .sub-menu,
.site-header.site-header--hero .gnb .sub-menu,
.site-header.site-header--compact .gnb .sub-menu {
position: static !important;
display: none !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 2px 0 6px !important;
padding: 6px !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: var(--bg-warm) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.site-header .gnb .nav-item.active > .sub-menu,
.site-header .gnb .menu-item-has-children.active > .sub-menu {
display: block !important;
}
.site-header .gnb .sub-menu li {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.site-header .gnb .sub-menu a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 46px !important;
margin: 0 !important;
padding: 11px 16px !important;
color: var(--navy) !important;
border: 0 !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
}
.site-header .gnb .sub-menu a:hover,
.site-header .gnb .sub-menu a:focus-visible {
background: rgba(184, 146, 74, 0.14) !important;
}
.site-header .gnb .sub-menu a.sub-link-ext {
justify-content: space-between !important;
min-height: 48px !important;
margin: 5px 0 !important;
padding: 12px 14px !important;
color: #fff !important;
background: #172642 !important;
border: 1px solid rgba(197, 157, 77, 0.7) !important;
}
.site-header .gnb .sub-menu a.sub-link-ext:hover,
.site-header .gnb .sub-menu a.sub-link-ext:focus-visible {
color: #fff !important;
background: #22375e !important;
border-color: #d3ab5d !important;
}
.site-header .gnb .sub-menu a.sub-link-ext i {
color: #e2bb6e !important;
}
.site-header .gnb .sub-link-ext .visually-hidden,
.mobile-menu-corporate .visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.mobile-menu-conversion {
display: block !important;
order: -1;
width: calc(100% - 28px);
margin: 2px 14px 14px;
padding: 16px 16px 18px;
background: linear-gradient(170deg, #fbf8f1 0%, #f2ecdd 100%);
border: 1px solid #e3d8c1;
border-radius: 14px;
box-shadow: 0 12px 28px rgba(10, 19, 38, 0.09);
}
.mobile-menu-conversion-head {
margin-bottom: 14px;
text-align: center;
}
.mmc-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 9px;
padding: 4px 12px;
color: #9a7322;
background: rgba(184, 146, 74, 0.14);
border: 1px solid rgba(184, 146, 74, 0.28);
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.01em;
}
.mmc-eyebrow i {
font-size: 10px;
animation: mmcBolt 2.2s ease-in-out infinite;
}
@keyframes mmcBolt {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.2); }
}
.mobile-menu-conversion-head strong {
display: block;
color: var(--navy);
font-size: 18px;
font-weight: 850;
line-height: 1.3;
}
.mmc-sub {
display: block;
margin-top: 5px;
color: #5d6470;
font-size: 12px;
line-height: 1.5;
}
.mmc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.mmc-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 9px;
min-height: 94px;
padding: 13px;
border: 1px solid rgba(10, 19, 38, 0.06);
border-radius: 12px;
background: #fff;
color: var(--navy) !important;
box-shadow: 0 4px 12px rgba(10, 19, 38, 0.06);
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.mmc-card:hover,
.mmc-card:focus-visible {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(10, 19, 38, 0.16);
}
.mmc-card:active { transform: scale(0.97); }
.mmc-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
font-size: 16px;
}
.mmc-tx { display: block; min-width: 0; }
.mmc-tx strong {
display: block;
font-size: 14.5px;
font-weight: 850;
line-height: 1.25;
white-space: nowrap;
}
.mmc-tx small {
display: block;
margin-top: 2px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.35;
opacity: 0.72;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .mmc-card--naver {
background: linear-gradient(150deg, #03c75a 0%, #02a850 100%);
border-color: #02a449;
color: #fff !important;
}
.mmc-card--naver .mmc-ic { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mmc-card--naver small { opacity: 0.92; }
.mmc-card--naver::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -160%;
width: 55%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
animation: mmcShimmer 3.6s ease-in-out infinite;
}
@keyframes mmcShimmer {
0% { left: -160%; }
60%, 100% { left: 170%; }
} .mmc-card--phone .mmc-ic { background: rgba(184, 146, 74, 0.14); color: #b5893a; } .mmc-card--check {
background: linear-gradient(150deg, #16233f 0%, #0b1730 100%);
border-color: #1d3155;
color: #fff !important;
}
.mmc-card--check .mmc-ic { background: rgba(212, 185, 120, 0.18); color: #e0c07a; }
.mmc-card--check small { opacity: 0.78; } .mmc-card--consult {
background: linear-gradient(150deg, #d4aa59 0%, #c0913c 100%);
border-color: #b88d3d;
color: #1a1207 !important;
}
.mmc-card--consult .mmc-ic { background: rgba(255, 255, 255, 0.3); color: #6b4d12; }
.mmc-card--consult small { opacity: 0.78; } .mmc-card--corp {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 12px;
min-height: 0;
background: linear-gradient(150deg, #1f2d4d 0%, #122140 100%);
border-color: #243a63;
color: #fff !important;
}
.mmc-card--corp .mmc-ic { flex: 0 0 auto; background: rgba(212, 185, 120, 0.18); color: #e0c07a; }
.mmc-card--corp .mmc-tx { flex: 1 1 auto; min-width: 0; }
.mmc-card--corp .mmc-tx small { white-space: normal; opacity: 0.82; }
.mmc-corp-ext { flex: 0 0 auto; margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
@media (prefers-reduced-motion: reduce) {
.mmc-eyebrow i,
.mmc-card--naver::after { animation: none !important; }
.mmc-card { transition: none !important; }
}
.site-header .gnb .nav-cta,
.site-header.site-header--hero .gnb .nav-cta,
.site-header.site-header--compact .gnb .nav-cta {
display: none !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: calc(100% - 28px) !important;
min-height: 50px !important;
height: auto !important;
margin: 18px 14px 0 !important;
padding: 13px 18px !important;
color: #fff !important;
background: var(--navy) !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 800 !important;
}
}
@media (max-width: 640px) {
.site-header .gnb,
.site-header.site-header--hero .gnb,
.site-header.site-header--compact .gnb {
width: 100% !important;
border-left: 0 !important;
}
}
@media (max-width: 370px) {
.mobile-menu-conversion-actions {
grid-template-columns: minmax(0, 1fr);
}
.mobile-menu-action {
min-height: 56px;
}
.mobile-menu-phone {
grid-template-columns: auto 1fr;
}
.mobile-menu-phone strong {
grid-column: 2;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header .gnb {
transition: none !important;
}
}  :root {
--text-primary: #171b23;
--text-secondary: #414853;
--text-muted: #68707d;
--bg-page: #faf9f7;
--bg-warm: #f4f1eb;
--border-light: #e2ded7;
--border-subtle: #ece8e1;
--shadow-sm: 0 1px 2px rgba(10, 15, 30, 0.035);
--shadow-md: 0 6px 18px rgba(10, 15, 30, 0.055);
--shadow-lg: 0 14px 34px rgba(10, 15, 30, 0.08);
--radius-sm: 5px;
--radius-md: 8px;
--radius-lg: 12px;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}
body {
color: var(--text-primary);
font-size: 16px;
line-height: 1.7;
letter-spacing: -0.012em;
}
main,
section,
article,
header,
footer,
form,
fieldset,
.container,
.inner,
.hero-content,
.section-header,
.pasan-main,
.sc-container,
.contact-main {
min-width: 0;
max-width: 100%;
}
img,
svg,
video,
iframe,
table {
max-width: 100%;
}
p,
li,
.section-desc,
.hero-desc,
.pasan-hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.loc-desc {
line-height: 1.75;
}
h1,
h2,
h3,
h4,
.hero-title,
.pasan-hero-title,
.contact-hero-title,
.faq-hero-title,
.cases-title,
.loc-title,
.section-title,
.section-heading {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
text-wrap: balance;
}
.section-title,
.section-heading {
font-weight: 750 !important;
line-height: 1.32 !important;
}
.section-desc {
color: var(--text-secondary);
}
.section-py {
padding-top: clamp(72px, 7vw, 88px);
padding-bottom: clamp(72px, 7vw, 88px);
}
body.ksl-page-index .section-py {
padding-top: clamp(70px, 7vw, 86px);
padding-bottom: clamp(70px, 7vw, 86px);
}
.section-header,
body:not(.ksl-page-index) .section-header {
margin-bottom: clamp(36px, 4vw, 46px);
}
.section-kicker {
margin-bottom: 10px;
letter-spacing: 0.13em;
} :where(
.btn,
.consult-btn,
.submit-btn,
.pasan-hero-btn,
.about-hero-btn,
.corp-lead-btn,
.corp-site-banner-btn,
.btn-big,
.btn-action,
.quick-check-submit,
.quick-check-consult,
.wizard-btn,
.detail-block-link
) {
min-height: 48px;
padding: 12px 22px;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 750;
line-height: 1.35;
touch-action: manipulation;
}
:where(
.btn,
.consult-btn,
.submit-btn,
.pasan-hero-btn,
.about-hero-btn,
.corp-lead-btn,
.quick-check-submit,
.wizard-btn
):hover {
transform: translateY(-1px);
}
:where(
.form-input,
.form-select,
.form-textarea,
.desktop-consult-input,
.lock-input,
.board-search-input
) {
border-color: #d9d5ce;
border-radius: var(--radius-md);
}
:where(.form-input, .form-select, .lock-input, .board-search-input) {
min-height: 50px;
}
:where(.form-input, .form-select, .form-textarea):focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.12);
} :where(
.service-field-card,
.check-card,
.sol-card,
.case-card,
.review-card,
.cred-card,
.diff-card,
.service-item,
.benefit-card,
.legal-card,
.docs-cell,
.faq-item,
.select-card,
.main-card,
.form-card,
.board-card,
.info-card,
.pasan-section-card,
.quick-check-shell,
.quick-check-card,
.ksl-post
) {
border-color: var(--border-light);
border-radius: var(--radius-md);
box-shadow: none;
}
.legal-main {
background: var(--bg-page);
}
.legal-hero .inner,
.legal-wrap {
max-width: 960px;
}
.legal-wrap {
gap: 0;
}
.legal-card {
padding: 28px 0;
background: transparent;
border: 0;
border-top: 1px solid var(--border-light);
border-radius: 0;
box-shadow: none;
}
.legal-card:last-child {
border-bottom: 1px solid var(--border-light);
}
.legal-card h2 {
margin-bottom: 10px;
line-height: 1.4;
} .legal-card p,
.legal-card li {
margin: 0;
color: var(--text-secondary);
line-height: 1.9;
font-size: 15px;
}
.legal-card ul {
margin: 0;
padding-left: 18px;
}
.legal-card li {
max-width: 760px;
}
.legal-card li + li {
margin-top: 6px;
}
.legal-date {
margin: 12px 0 0;
font-size: 14px;
font-weight: 700;
color: var(--navy-mid);
}
.legal-section {
padding: 8px 0 80px;
}
.legal-note {
margin-top: 10px !important;
color: var(--text-muted) !important;
font-size: 14px !important;
}
@media (max-width: 768px) {
.legal-desc,
.legal-card p,
.legal-card li {
font-size: 14px;
}
}
:where(
.service-field-card,
.check-card,
.sol-card,
.case-card,
.review-card,
.diff-card,
.benefit-card,
.docs-cell,
.select-card
):hover {
transform: none;
box-shadow: none;
}
.site-header {
border-bottom-color: rgba(10, 15, 30, 0.09);
box-shadow: 0 2px 10px rgba(10, 15, 30, 0.045);
}
.nav-link {
min-height: 42px;
}
.nav-cta {
min-height: 42px;
padding-inline: 18px;
border-radius: var(--radius-md);
}
.sub-menu {
border-radius: var(--radius-md);
box-shadow: 0 12px 30px rgba(10, 15, 30, 0.1);
} .hero-content,
.pasan-hero .inner,
.about-hero .inner,
.contact-hero .inner,
.cases-hero .inner,
.faq-hero .inner,
.loc-hero .inner,
.hero-area {
width: 100%;
}
.hero-content h1 {
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
.hero-lead,
.hero-desc,
.pasan-hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.loc-desc {
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.pasan-hero-stats,
.pasan-hero-actions,
.pasan-hero-trust {
width: 100%;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.pasan-hero-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pasan-hero-stats li,
.pasan-hero-stat-num,
.pasan-hero-stat-key {
min-width: 0;
} .authority-cert img {
box-shadow: 0 8px 22px rgba(10, 15, 30, 0.08);
}
.service-field-card {
min-height: 0;
padding: 26px 24px 24px;
}
.service-field-card:hover {
border-color: rgba(184, 146, 74, 0.55);
}
.problem-grid,
.quick-check-shell,
.consult-grid {
column-gap: clamp(32px, 5vw, 56px);
}
.quick-check-shell {
overflow: hidden;
}
.quick-check-card {
background: rgba(255, 255, 255, 0.82);
}
.quick-check-question {
border-color: var(--border-light);
}
.quick-check-options span {
border-radius: 6px;
} .pasan-section-card {
margin-bottom: clamp(28px, 4vw, 42px);
padding: clamp(34px, 5vw, 56px);
}
.pasan-card-header {
margin-bottom: clamp(28px, 4vw, 38px);
}
.detail-block {
padding-top: clamp(26px, 4vw, 38px);
padding-bottom: clamp(26px, 4vw, 38px);
}
.overview-grid,
.benefit-grid,
.formula-box,
.process-phases,
.docs-grid {
min-width: 0;
}
.benefit-card,
.docs-cell {
padding: 22px 20px;
}
.highlight-box,
.formula-note,
.q-desc-box,
.privacy-wrap {
border-radius: var(--radius-md);
} .sc-container {
width: min(100%, 808px);
}
.main-card {
width: 100%;
padding: clamp(26px, 5vw, 40px);
}
.mode-tabs,
.select-grid,
.select-card,
.select-content,
.q-section,
.q-item,
.form-row,
.btn-action-group {
min-width: 0;
max-width: 100%;
}
.mode-btn {
min-width: 0;
min-height: 48px;
}
.select-card {
width: 100%;
}
.select-content {
gap: 12px;
}
.select-text {
min-width: 0;
overflow-wrap: break-word;
} .form-card,
.board-card,
.info-card {
padding: clamp(24px, 4vw, 34px);
}
.contact-wrap {
gap: 28px;
}
.form-header {
margin-bottom: 26px;
}
.contact-form {
gap: 17px;
}
.faq-question {
min-height: 56px;
}
.faq-answer-inner {
color: var(--text-secondary);
}
.loc-section {
padding-top: clamp(34px, 5vw, 52px);
padding-bottom: clamp(34px, 5vw, 52px);
} .desktop-right-cta-btn {
box-shadow: 0 7px 22px rgba(10, 15, 30, 0.18);
border-radius: var(--radius-md);
}
.fixed-cta-bar {
border-radius: 0;
box-shadow: 0 -5px 18px rgba(10, 15, 30, 0.2);
}
.fixed-cta-inner > :first-child .cta-btn,
.fixed-cta-inner > :last-child .cta-btn {
border-radius: 0;
}
@media (min-width: 1201px) {
:root {
--desktop-consult-bar-h: 88px;
}
.desktop-consult-bar {
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
}
.desktop-consult-inner {
padding-top: 9px;
padding-bottom: 8px;
flex-wrap: nowrap;
}
.desktop-consult-copy {
min-width: 205px;
}
.desktop-consult-sub {
display: none;
}
.desktop-consult-input,
.desktop-consult-textarea,
.desktop-consult-submit {
height: 40px;
border-radius: 7px;
}
.desktop-consult-meta {
margin-top: 5px;
}
}
@media (max-width: 992px) {
.section-py,
body.ksl-page-index .section-py {
padding-top: 66px;
padding-bottom: 66px;
}
.section-header,
body:not(.ksl-page-index) .section-header {
margin-bottom: 34px;
}
.pasan-section-card {
padding: 34px 26px;
}
}
@media (max-width: 640px) {
:root {
--layout-gutter: 18px;
}
body {
font-size: 15.5px;
line-height: 1.68;
}
.container,
.inner,
body .container,
body .inner,
.header-inner,
body .header-inner {
width: 100%;
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
}
.hero-content,
.pasan-hero .inner,
.about-hero .inner,
.contact-hero .inner,
.cases-hero .inner,
.faq-hero .inner,
.loc-hero .inner {
width: calc(100vw - (2 * var(--layout-gutter))) !important;
max-width: calc(100vw - (2 * var(--layout-gutter))) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.hero-area {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--layout-gutter) !important;
padding-right: var(--layout-gutter) !important;
}
p,
li,
.section-desc,
.hero-desc,
.pasan-hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.loc-desc {
line-height: 1.72 !important;
}
.section-py,
body.ksl-page-index .section-py {
padding-top: 52px;
padding-bottom: 52px;
}
.section-header,
body:not(.ksl-page-index) .section-header {
margin-bottom: 28px;
}
.section-title,
.section-heading,
.consult-title,
.corp-lead-title,
.form-title {
font-size: clamp(23px, 6.6vw, 27px) !important;
line-height: 1.36 !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
text-wrap: wrap !important;
}
.hero-content h1,
.hero h1 {
width: 100%;
font-size: clamp(27px, 7.8vw, 31px) !important;
line-height: 1.3 !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
text-wrap: wrap !important;
}
.pasan-hero-title,
.about-hero .hero-title,
.contact-hero-title,
.faq-hero-title,
.cases-title,
.loc-title,
.hero-area .hero-title {
width: 100%;
font-size: clamp(26px, 7.5vw, 30px) !important;
line-height: 1.38 !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
text-wrap: wrap !important;
}
.hero-content h1 br,
.hero-lead br,
.pasan-hero-title br,
.pasan-hero-desc br,
.about-hero .hero-title br,
.about-hero .hero-desc br,
.contact-hero-title br,
.contact-hero-desc br,
.faq-hero-title br,
.faq-hero-desc br,
.cases-title br,
.cases-desc br,
.loc-title br,
.loc-desc br,
.hero-area .hero-title br,
.hero-area .hero-desc br {
display: none;
}
body.ksl-page-index .hero {
min-height: 0;
padding-top: calc(var(--header-h, 72px) + 44px);
padding-bottom: 58px;
}
.pasan-hero,
.about-hero,
.contact-hero,
.cases-hero,
.faq-hero,
.loc-hero,
.hero-area {
min-height: 0;
padding-top: 62px;
padding-bottom: 68px;
}
.hero-lead,
.hero-desc,
.pasan-hero-desc,
.contact-hero-desc,
.faq-hero-desc,
.cases-desc,
.loc-desc {
font-size: 15px !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
text-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
}
.hero-content p strong,
.hero-content p span,
.pasan-hero-desc strong,
.contact-hero-desc strong {
word-break: normal !important;
overflow-wrap: anywhere !important;
}
.hero-trust-list {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
overflow: visible;
}
.hero-trust-list li {
flex: 1 1 calc(50% - 8px);
min-width: 0;
max-width: 190px;
white-space: normal;
text-align: center;
}
.hero-actions,
.pasan-hero-actions,
.about-hero-actions,
.corp-lead-actions,
.quick-check-actions,
.btn-action-group {
width: 100%;
gap: 9px;
}
:where(
.hero-actions,
.pasan-hero-actions,
.about-hero-actions,
.corp-lead-actions,
.quick-check-actions,
.btn-action-group
) > :where(a, button) {
width: 100%;
min-height: 50px;
justify-content: center;
}
.pasan-hero-stats {
width: calc(100vw - (2 * var(--layout-gutter)));
max-width: calc(100vw - (2 * var(--layout-gutter)));
margin-top: 24px;
margin-bottom: 22px;
}
.pasan-hero-stats li {
padding: 15px 5px;
}
.pasan-hero-stat-num {
font-size: clamp(17px, 5vw, 21px);
}
.pasan-hero-stat-key {
font-size: 10.5px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.pasan-hero-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
overflow: visible;
width: calc(100vw - (2 * var(--layout-gutter)));
max-width: calc(100vw - (2 * var(--layout-gutter)));
}
.pasan-hero-trust li {
flex: 0 1 auto;
white-space: normal;
text-align: center;
}
.pasan-nav {
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
}
.pasan-section-card {
width: 100%;
margin-bottom: 22px;
padding: 26px 18px !important;
border-radius: 6px;
}
.pasan-card-header {
margin-bottom: 26px;
}
.pasan-card-title {
font-size: 22px !important;
}
.detail-block {
padding-top: 24px;
padding-bottom: 24px;
}
.detail-block-head {
align-items: flex-start;
gap: 10px;
}
.formula-box,
.benefit-grid,
.process-phases,
.docs-grid,
.overview-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.formula-op {
min-height: 24px;
}
.benefit-card,
.docs-cell {
padding: 20px 18px !important;
}
.service-field-card,
.check-card,
.sol-card,
.case-card,
.review-card,
.diff-card,
.service-item,
.benefit-card,
.docs-cell,
.ksl-post {
padding: 20px 18px !important;
}
.legal-card {
padding: 22px 0 !important;
}
.quick-check-shell {
width: 100%;
margin-left: 0;
padding: 24px 16px;
border-radius: 6px;
}
.quick-check-card {
padding: 20px 14px;
}
.quick-check-question {
padding: 18px 0;
}
.authority {
padding-top: 50px;
padding-bottom: 50px;
}
.authority-grid {
gap: 30px;
}
.authority-cert img {
height: 190px;
box-shadow: 0 5px 14px rgba(10, 15, 30, 0.07);
}
.main-card {
width: calc(100vw - (2 * var(--layout-gutter)));
max-width: calc(100vw - (2 * var(--layout-gutter)));
margin-left: auto;
margin-right: auto;
margin-top: 24px;
padding: 22px 16px;
border-radius: 6px;
}
.sc-container {
width: 100vw;
max-width: 100vw;
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
padding-bottom: 68px;
}
.mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 28px;
}
.mode-btn {
padding: 12px 6px;
gap: 6px;
font-size: 13px;
line-height: 1.4;
white-space: normal;
}
.q-section {
padding-top: 4px;
}
.q-item {
margin-bottom: 26px;
}
.select-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.select-content {
min-height: 52px;
padding: 13px 14px;
}
.select-text {
font-size: 14px;
line-height: 1.58;
}
.form-card,
.board-card,
.info-card {
width: 100%;
max-width: 100%;
padding: 21px 16px !important;
border-radius: 6px;
}
.contact-main .inner {
width: 100vw;
max-width: 100vw;
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
}
.contact-wrap {
margin-top: 20px;
gap: 18px;
}
.form-trust-bar {
border-radius: 6px;
}
.faq-question {
min-height: 54px;
padding: 15px 4px;
}
.faq-answer-inner {
padding-bottom: 18px;
}
.site-footer {
padding-top: 38px;
}
body.has-fixed-cta,
body.ksl-page-index.has-fixed-cta,
body.has-fixed-cta.ksl-cta-light,
body.has-fixed-cta.ksl-cta-dark {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
.fixed-cta-bar .cta-btn,
.fixed-cta-bar--compact .cta-btn,
.fixed-cta-bar--light .cta-btn,
.fixed-cta-bar--dark .cta-btn {
min-height: 56px !important;
padding: 8px 3px !important;
gap: 3px;
}
.fixed-cta-bar .cta-icon {
width: 20px;
height: 20px;
font-size: 11px;
}
.fixed-cta-bar .cta-label-main {
font-size: clamp(10px, 2.8vw, 11px) !important;
line-height: 1.25;
}
}
@media (max-width: 380px) {
:root {
--layout-gutter: 16px;
}
.hero-content h1,
.hero h1 {
font-size: 27px !important;
}
.pasan-hero-title,
.about-hero .hero-title,
.contact-hero-title,
.faq-hero-title,
.cases-title,
.loc-title,
.hero-area .hero-title {
font-size: 25px !important;
}
.pasan-hero-stats li {
padding-inline: 3px;
}
.pasan-hero-stat-num {
font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
} .ksl-page-index .cases-strip .case-card { background: var(--bg-warm); }
.ksl-page-index .cases-strip .case-card:hover {
transform: none;
box-shadow: none;
border-color: var(--border-light);
}  @media (max-width: 992px) and (min-width: 641px) {
body.ksl-page-index .hero-content h1,
body.ksl-page-index .hero h1 {
font-size: clamp(30px, 5.2vw, 40px);
}
body.ksl-page-index .section-py {
padding-top: 64px;
padding-bottom: 64px;
}
body.ksl-page-index .flow {
grid-template-columns: repeat(3, 1fr);
gap: 28px 16px;
}
body.ksl-page-index .service-field-card {
min-height: 256px;
}
body.ksl-page-index .cases-strip-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
}
} @media (max-width: 640px) { body.ksl-page-index .hero-content h1 br.hero-br-m { display: inline; } body.ksl-page-index .hero-check-copy { font-size: 14px; line-height: 1.6; }
body.ksl-page-index .hero-subnote { font-size: 13.5px; color: rgba(255,255,255,0.74); margin-top: 20px; } .hero-trust-strip { gap: 8px 14px; margin-top: 16px; }
.hero-trust-strip li { font-size: 12.5px; } body.ksl-page-index :where(.hero-actions) > :where(a, button) { min-height: 52px; }
body.ksl-page-index .hero-actions .btn-corporate { min-height: 50px; font-size: 14.5px; opacity: 0.95; } .authority-certs { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
.authority-cert img { height: 260px; }
.authority-cert figcaption { font-size: 12px; } .consult-form .form-input,
.consult-form .form-select,
.consult-form .form-textarea { font-size: 16px !important; } .quick-check-card { padding: 22px 16px; }
.quick-check-note { font-size: 12px; line-height: 1.6; } body.has-fixed-cta,
body.ksl-page-index.has-fixed-cta,
body.has-fixed-cta.ksl-cta-light,
body.has-fixed-cta.ksl-cta-dark {
padding-bottom: calc(56px + 10px + env(safe-area-inset-bottom, 0px));
}
.fixed-cta-bar .cta-label-main { font-size: clamp(11px, 2.9vw, 12px) !important; } .selfcheck-hook-cta { margin-top: 32px; }
.selfcheck-hook-btn { width: 100%; }
.selfcheck-hook-list li { font-size: 15px; } .cases-strip-cta { margin-top: 24px; }
.case-card-body { font-size: 14px; } .faq-section .faq-question { min-height: 56px; padding: 16px 0; }
.faq-section .faq-q-text { font-size: 15.5px; }
.faq-section .faq-icon { margin-left: 10px; }
.faq-section .faq-answer-inner { padding: 4px 2px 22px 2px; font-size: 14.5px; line-height: 1.72; }
.faq-note-cta { font-size: 14px; }
} @media (max-width: 480px) {
body.ksl-page-index .section-py {
padding-top: 46px;
padding-bottom: 46px;
}
.hero-trust-strip { gap: 7px 12px; }
.hero-trust-strip li { font-size: 12px; }
.authority-cert img { height: 224px; }
} @media (max-width: 640px) {
body.ksl-page-index .hero.conversion-hero .conversion-hero-title {
font-size: clamp(25px, 6.8vw, 33px) !important;
line-height: 1.28 !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
body.ksl-page-index .hero.conversion-hero .conversion-hero-title br {
display: block;
}
body.ksl-page-index .hero.conversion-hero .conversion-hero-lead {
font-size: 15px !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
}
@media (max-width: 380px) {
body.ksl-page-index .hero.conversion-hero .conversion-hero-title {
font-size: 24px !important;
}
} .pasan-hero-btn--primary,
.consult-card--final .btn-primary,
.corp-site-banner-btn,
.corp-lead-btn--primary {
position: relative;
overflow: hidden;
isolation: isolate;
}
.pasan-hero-btn--primary::after,
.consult-card--final .btn-primary::after,
.corp-site-banner-btn::after,
.corp-lead-btn--primary::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -160%;
width: 55%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 2;
animation: kslBtnShimmer 4s ease-in-out infinite;
}
@keyframes kslBtnShimmer {
0% { left: -160%; }
60%, 100% { left: 170%; }
}
@media (prefers-reduced-motion: reduce) {
.pasan-hero-btn--primary::after,
.consult-card--final .btn-primary::after,
.corp-site-banner-btn::after,
.corp-lead-btn--primary::after { animation: none !important; }
}  .hero h1, .hero-content h1, .pasan-hero-title, .about-hero .hero-title,
.contact-hero-title, .faq-hero-title, .cases-title, .loc-title,
.hero-area .hero-title, .pasan-card-title, .consult-title, .form-title,
.corp-lead-title, .credentials-section .section-title,
.section-title, .section-heading {
font-weight: 700 !important;
}
.section-title, .section-heading {
line-height: 1.3 !important;
}
.btn, .consult-btn, .submit-btn, .pasan-hero-btn, .about-hero-btn,
.corp-lead-btn, .corp-site-banner-btn, .btn-big,
.btn-action, .nav-cta {
font-weight: 700;
}
strong, b, .highlight { font-weight: 700; } .service-field-card, .check-card, .sol-card, .case-card, .review-card,
.cred-card, .diff-card, .service-item, .benefit-card, .docs-cell,
.faq-item, .select-card, .main-card, .form-card, .board-card, .info-card,
.pasan-section-card, .quick-check-card, .ksl-post {
box-shadow: 0 1px 3px rgba(10, 15, 30, 0.05);
}
.quick-check-shell { border-radius: var(--radius-md); } .sub-menu {
box-shadow: 0 8px 22px rgba(10, 15, 30, 0.08);
}
.pasan-hero-btn--primary, .corp-lead-btn--primary,
.corp-site-banner-btn, .consult-card--final .btn-primary {
box-shadow: 0 6px 16px rgba(184, 146, 74, 0.20);
} body.ksl-page-index {
--bg-page: #faf9f7;
--bg-warm: #f1ede5;
} .nav-link, .nav-cta { min-height: 44px; }
.corp-site-banner-btn { min-height: 44px; }
.sub-menu a { min-height: 40px; display: flex; align-items: center; } .site-footer .footer-desc, .site-footer .footer-logo-sub { color: #cdd3dd; }
.site-footer .footer-notice, .site-footer .footer-bottom { color: #c4cad4; }
.site-footer .footer-links a, .site-footer .footer-contact { color: #dfe4ec; } .section-kicker, .hero-kicker, .conversion-hero-kicker,
.consult-kicker {
margin-bottom: 12px;
letter-spacing: 0.15em;
} @media (max-width: 640px) {
.section-py, body.ksl-page-index .section-py {
padding-top: 52px;
padding-bottom: 56px;
}
.section-header, body:not(.ksl-page-index) .section-header {
margin-bottom: 32px;
}
.hero-content h1, .hero h1, .pasan-hero-title,
.about-hero .hero-title, .contact-hero-title {
margin-bottom: 22px;
}
.service-field-card, .check-card, .sol-card, .case-card, .review-card,
.diff-card, .service-item, .benefit-card, .docs-cell, .ksl-post {
padding: 22px 18px !important;
}
.quick-check-card { padding: 24px 18px; }
.hero-actions, .pasan-hero-actions, .about-hero-actions,
.corp-lead-actions, .quick-check-actions,
.btn-action-group {
gap: 12px;
}
.form-input, .form-select, .form-textarea,
.consult-form .form-input, .consult-form .form-select, .consult-form .form-textarea {
font-size: 16px;
padding: 14px 16px;
}
.pasan-nav { gap: 6px; }
.footer-quick a { padding: 12px 14px; min-height: 46px; }
} .service-page .service-core-list {
margin-top: 28px;
}
.service-page .detail-block-link {
margin-top: 22px;
}
.service-faq-list {
display: grid;
gap: 10px;
max-width: 860px;
margin: 0 auto;
}
.service-faq-list details {
overflow: hidden;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--bg-card);
}
.service-faq-list summary {
position: relative;
padding: 18px 52px 18px 20px;
color: var(--navy);
font-size: 16px;
font-weight: 700;
line-height: 1.5;
cursor: pointer;
list-style: none;
}
.service-faq-list summary::-webkit-details-marker { display: none; }
.service-faq-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
color: var(--gold);
font-size: 22px;
font-weight: 500;
}
.service-faq-list details[open] summary::after { content: "−"; }
.service-faq-list details p {
margin: 0;
padding: 0 20px 20px;
color: var(--text-secondary);
font-size: 15px;
line-height: 1.75;
}
@media (max-width: 640px) {
.service-page .pasan-hero-trust { display: none; }
.service-page .pasan-section-card { margin-bottom: 20px; }
.service-page .pasan-card-header { margin-bottom: 24px; }
.service-page .service-core-list { margin-top: 20px; }
.service-page .qualify-item { padding: 13px 14px !important; }
.service-page .process-phases { gap: 18px; }
.service-page .process-phase { padding: 24px 18px 18px !important; }
.service-faq-list summary { padding: 16px 46px 16px 16px; font-size: 15px; }
.service-faq-list summary::after { right: 16px; }
.service-faq-list details p { padding: 0 16px 17px; font-size: 14px; }
.service-page .consult-card--final { padding: 34px 18px !important; }
}   :root {
--text-muted: #5f5f5f; --text-light: #767676; } #main h1, #main h2, #main h3, #main h4,
#main p, #main li, #main dd, #main dt,
.section-title, .section-heading, .pasan-card-title,
.pasan-hero-title, .cases-title, .legal-title, .sec-title,
.section-desc, .pasan-card-desc, .pasan-hero-desc {
word-break: keep-all;
overflow-wrap: break-word;
} .section-kicker,
.pasan-card-kicker,
.pasan-hero-kicker,
.cases-kicker,
.cases-head-kicker,
.consult-kicker,
.profile-eyebrow,
.about-cert-eyebrow,
.legal-kicker,
.sec-kicker,
.hero-kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.5;
color: var(--gold);
text-transform: none; } .section-kicker,
.pasan-card-kicker,
.consult-kicker,
.sec-kicker,
.profile-eyebrow,
.about-cert-eyebrow { margin-bottom: 14px; } .section-heading,
.pasan-card-title,
.sec-title {
font-family: var(--font-serif);
font-size: clamp(25px, 2.6vw, 33px);
font-weight: 700;
line-height: 1.36;
letter-spacing: -0.02em;
color: var(--navy);
} .pasan-card-desc,
.sec-desc,
.legal-desc {
font-size: 16px;
line-height: 1.85;
color: var(--text-secondary);
}
.pasan-card-desc { max-width: 720px; } .pasan-section-card {
background: transparent !important;
background-image: none !important;
border-radius: 0 !important;
box-shadow: none !important;
border-top: 1px solid var(--border-light);
margin-bottom: 0;
padding: 64px 0;
}
.pasan-section-card--alt { background: transparent !important;
background-image:
radial-gradient(ellipse 900px 460px at 50% 0%, rgba(184,146,74,0.06), transparent 70%) !important;
}
.pasan-section-card:first-of-type { border-top: none; }
.pasan-card-header { margin-bottom: 36px; } .pasan-section-card.consult-card--final {
background: var(--navy) !important;
border-top: none;
border-radius: var(--radius-lg) !important;
padding: 56px 40px;
margin-top: 8px;
} .btn,
.pasan-hero-btn,
.conversion-btn,
.cta-btn,
.about-hero-btn,
.corp-lead-btn,
.consult-btn,
.nav-cta,
.compare-link,
.detail-block-link {
border-radius: var(--radius-md);
font-weight: 800;
transition: var(--transition);
-webkit-font-smoothing: antialiased;
} a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 4px;
} @media (max-width: 640px) { .pasan-section-card { padding: 40px 18px !important; }
.pasan-card-header { margin-bottom: 26px; }
.pasan-section-card.consult-card--final { padding: 40px 22px !important; } .section-header { margin-bottom: 36px !important; } .btn-group,
.consult-final-actions,
.about-hero-actions,
.cta-box-actions,
.pasan-hero-actions,
.corp-lead-actions {
flex-direction: column;
align-items: stretch;
}
.btn-group > a,
.consult-final-actions > a,
.about-hero-actions > a,
.cta-box-actions > a,
.pasan-hero-actions > a,
.corp-lead-actions > a {
width: 100%;
justify-content: center;
} .btn,
.pasan-hero-btn,
.conversion-btn,
.cta-btn,
.about-hero-btn,
.corp-lead-btn,
.nav-cta,
.consult-btn {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}  .pasan-hero-btn--primary::after,
.consult-card--final .btn-primary::after,
.corp-site-banner-btn::after,
.corp-lead-btn--primary::after,
.fixed-cta-bar--compact .cta-btn--naver::after,
.mmc-card--naver::after {
animation: none !important;
} @media (max-width: 640px) {
body { font-size: 16px; line-height: 1.72; }
} .service-page {
background: var(--bg-page);
}
.service-page .pasan-section-card,
.service-page .pasan-section-card--alt {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.service-page .pasan-section-card:not(.consult-card--final) {
border-radius: 0 !important;
}
.service-page .pasan-section-card.consult-card--final {
background: var(--navy) !important;
}
.service-page .pasan-card-header {
max-width: 760px;
margin-right: auto;
margin-left: auto;
}
.service-page #sec-overview {
text-align: center;
}
.service-page #sec-overview .highlight-box {
max-width: 760px;
margin: 24px auto 0;
text-align: left;
}
.service-page #sec-overview .detail-block-link {
margin-top: 18px;
}  :root { --bg-warm: #f1ede4; } body {
font-size: clamp(16px, 0.22vw + 15px, 18px);
line-height: 1.78;
letter-spacing: -0.006em;
color: #0f172a;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main p, main li, main dd { line-height: max(1.72, 1.78); }
main p { max-width: min(72ch, 100%); text-wrap: pretty; } .site-header { box-shadow: none; border-bottom: 1px solid var(--border-light); } .nav-cta { border-radius: 12px; }
.section-kicker { letter-spacing: 0.16em; } .site-footer { background: #050b18; }
.fixed-cta-bar { background: #050b18; } .pasan-hero-btn--primary::after,
.consult-card--final .btn-primary::after,
.corp-site-banner-btn::after,
.corp-lead-btn--primary::after {
content: none;
animation: none;
}.contact-main {
font-family: var(--font-sans);
background: var(--bg-page);
color: var(--text-primary);
font-size: 16px;
line-height: 1.7;
padding-bottom: 120px;
word-break: keep-all;
}
.contact-main * { box-sizing: border-box; } .contact-hero {
background: var(--navy);
color: #fff;
padding: 80px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-hero .inner { position: relative; z-index: 1; }
.contact-hero-kicker {
font-size: 12px; font-weight: 600;
color: var(--gold-light);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 20px;
display: block;
}
.contact-hero-title {
font-family: var(--font-serif);
font-size: 38px; font-weight: 700;
margin: 0 0 16px; line-height: 1.3;
letter-spacing: -0.01em;
}
.pasan-hero-line {
width: 40px; height: 2px;
background: var(--gold);
margin: 0 auto 24px;
}
.contact-hero-desc {
font-size: 16px; color: rgba(255,255,255,0.72);
max-width: 640px; margin: 0 auto;
font-weight: 400; line-height: 1.8;
} .contact-wrap {
margin-top: 36px;
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.form-card, .board-card, .info-card, .contact-form, .form-group { min-width: 0; } .board-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
padding: 32px;
}
.board-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.board-title {
font-family: var(--font-serif);
font-size: 20px; font-weight: 700; color: var(--navy);
}
.board-note { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 540px; }
.board-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.board-table thead { border-bottom: 2px solid var(--border-light); }
.board-table th { padding: 12px 10px; text-align: left; font-weight: 700; color: var(--navy); font-size: 13px; }
.board-table td { padding: 14px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; font-size: 14px; line-height: 1.6; }
.board-table th:nth-child(2), .board-table td:nth-child(2) { width: 44%; word-break: break-word; }
.board-row { cursor: pointer; transition: background 0.2s; }
.board-row:hover { background-color: var(--bg-warm); }
.board-badge {
display: inline-block; padding: 3px 10px;
font-size: 11px; font-weight: 700;
color: var(--gold); background: var(--gold-muted);
letter-spacing: 0.04em;
}
.board-status { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; }
.board-status.done { color: var(--success); } .board-status.done .status-dot { background: var(--success); }
.board-status.checking { color: var(--warning); } .board-status.checking .status-dot { background: var(--warning); }
.board-status.new, .board-status.wait { color: var(--navy); } .board-status.new .status-dot, .board-status.wait .status-dot { background: var(--navy); }
.board-title-cell,
.m-title {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
}
.board-title-text,
.m-title span:last-child {
min-width: 0;
overflow-wrap: anywhere;
}
.board-mobile { display: none; flex-direction: column; gap: 10px; }
.mobile-card {
background: var(--bg-card); border: 1px solid var(--border-light);
padding: 16px; cursor: pointer; transition: 0.2s;
}
.mobile-card:hover { border-color: var(--gold); }
.m-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.m-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.m-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.detail-row { display: none; }
.detail-box { padding: 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-warm); }
.qna-content { margin-top: 8px; }
.qna-meta { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.q-box { background: var(--bg-card); padding: 16px; border: 1px solid var(--border-light); margin-bottom: 10px; font-size: 14px; }
.a-box { background: #f0fdf4; padding: 16px; border: 1px solid #dcfce7; color: #166534; font-size: 14px; }
.a-title { font-weight: 800; margin-bottom: 6px; display: block; }
.a-empty { padding: 15px; color: var(--text-muted); background: var(--bg-warm); border: 1px solid var(--border-subtle); border-radius: 12px; font-size: 14px; } .board-search { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.board-search-input { flex: 1; min-width: 200px; padding: 11px 14px; border: 1px solid var(--border-light); border-radius: 8px; font-size: 15px; font-family: var(--font-sans); }
.board-search-input:focus { outline: none; border-color: var(--gold); }
.board-search-btn, .board-search-reset { padding: 11px 18px; border-radius: 8px; cursor: pointer; font-weight: 700; font-family: var(--font-sans); font-size: 14px; }
.board-search-btn { background: var(--navy); color: #fff; border: none; }
.board-search-reset { background: var(--bg-warm); color: var(--text-muted); border: 1px solid var(--border-light); }
.board-author { display: block; font-size: 13px; color: var(--text-primary); }
.board-author-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.board-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); }
.board-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 22px; }
.board-pagination .page-btn {
min-width: 38px; padding: 8px 12px; border: 1px solid var(--border-light);
background: var(--bg-card); color: var(--text-primary); border-radius: 6px;
cursor: pointer; font-size: 14px; font-family: var(--font-sans);
}
.board-pagination .page-btn:hover:not(:disabled):not(.is-active) { border-color: var(--gold); }
.board-pagination .page-btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; cursor: default; }
.board-pagination .page-btn:disabled { opacity: 0.4; cursor: default; }
.board-pagination .page-ellipsis { padding: 0 4px; color: var(--text-muted); } .form-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
padding: 40px;
border-radius: var(--radius-lg);
}
#reserve { scroll-margin-top: calc(var(--header-h) + 18px); }
.form-header { text-align: center; margin-bottom: 32px; }
.form-title {
font-family: var(--font-serif);
font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 10px;
}
.form-desc { font-size: 16px; color: var(--text-muted); }
.form-altcta { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.form-altcta a { color: var(--gold); font-weight: 700; text-decoration: underline; }
.form-trust-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 24px;
row-gap: 6px;
line-height: 1.6;
margin-top: 18px;
padding: 12px 16px;
background: rgba(21,128,61,0.07);
border: 1px solid rgba(21,128,61,0.18);
font-size: 13px;
color: #15803d;
font-weight: 700;
border-radius: var(--radius-md);
}
.form-trust-bar i { margin-right: 4px; }
.submit-sla {
text-align: center;
font-size: 13px;
color: var(--text-muted);
margin: 4px 0 0;
}
.contact-form { display: grid; gap: 20px; max-width: 680px; margin: 0 auto; }
.contact-form[aria-busy="true"] { cursor: wait; }
.contact-form-notice,
.contact-receipt-note {
padding: 14px 16px;
border: 1px solid rgba(21,128,61,0.24);
border-radius: var(--radius-md);
background: rgba(21,128,61,0.08);
color: #166534;
font-size: 14px;
line-height: 1.65;
}
.contact-form-notice--error {
border-color: rgba(185,28,28,0.22);
background: rgba(185,28,28,0.07);
color: #991b1b;
}
.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-size: 14px; font-weight: 700; color: var(--navy); }
.form-input, .form-select, .form-textarea {
padding: 13px 14px;
border: 1px solid var(--border-light);
font-size: 16px; font-family: var(--font-sans);
transition: var(--transition); width: 100%; line-height: 1.55;
background: var(--bg-card);
border-radius: var(--radius-md);
max-width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--gold); outline: none;
box-shadow: 0 0 0 3px var(--gold-muted);
}
.form-textarea { min-height: 150px; resize: vertical; }
.privacy-wrap {
background: var(--bg-warm); border: 1px solid var(--border-light);
padding: 16px; font-size: 13px; color: var(--text-muted); line-height: 1.8;
border-radius: var(--radius-md);
}
.privacy-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.submit-btn {
width: 100%; padding: 16px;
background: var(--navy); color: #fff;
border: none; font-size: 16px; font-weight: 700;
cursor: pointer; transition: var(--transition);
margin-top: 8px; font-family: var(--font-sans);
border-radius: var(--radius-md);
}
.submit-btn:hover { background: var(--navy-mid); }
.submit-btn:disabled { opacity: 0.68; cursor: wait; } .info-card {
background: var(--bg-card); padding: 32px;
border: 1px solid var(--border-light);
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
border-radius: var(--radius-lg);
}
.info-item h4 {
font-family: var(--font-serif);
font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px;
}
.info-item p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.contact-next-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 26px 30px;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--navy);
color: #fff;
}
.contact-next-kicker {
display: block;
margin-bottom: 4px;
color: var(--gold-light);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
}
.contact-next-card strong { display: block; font-size: 18px; }
.contact-next-card p { margin: 5px 0 0; color: rgba(255,255,255,0.7); font-size: 13px; }
.contact-next-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 20px;
border-radius: var(--radius-md);
background: var(--gold);
color: var(--navy);
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 768px) {
.contact-main {
padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.contact-main .inner { padding-left: 16px; padding-right: 16px; }
.contact-main, .contact-wrap, .form-card, .contact-form { width: 100%; max-width: 100%; overflow-x: clip; }
.contact-hero { padding: 52px 0 60px; }
.contact-hero-title { font-size: 28px; }
.contact-hero-desc br { display: none; }
.contact-wrap { margin-top: 24px; gap: 20px; }
.board-table { display: none; }
.board-mobile { display: flex; }
.form-card,
.board-card,
.info-card { padding: 22px 18px; }
.form-header { margin-bottom: 24px; }
.contact-form { gap: 16px; }
.form-grid-two { grid-template-columns: 1fr; gap: 14px; }
.board-head { align-items: flex-start; }
.form-trust-bar { display: grid; justify-content: stretch; text-align: left; gap: 6px; padding: 12px 14px; }
.form-textarea { min-height: 132px; }
.privacy-check { align-items: flex-start; }
.privacy-check input { flex: 0 0 auto; margin-top: 5px; }
.submit-btn { min-height: 52px; padding: 14px 16px; }
.info-card { grid-template-columns: 1fr; }
.info-item { border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; }
.info-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-next-card { align-items: stretch; flex-direction: column; padding: 22px 18px; }
.contact-next-card strong { font-size: 16px; }
.contact-next-call { width: 100%; }
.m-title { font-size: 16px; }
.m-foot { font-size: 14px; }
.lock-msg, .board-note, .submit-sla, .privacy-wrap { font-size: 14px; }
.form-desc { font-size: 16px; }
.form-trust-bar { font-size: 14px; }
.lock-input,
.form-input, .form-select, .form-textarea { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 390px) {
.contact-main .inner { padding-left: 12px; padding-right: 12px; }
.contact-hero { padding: 44px 0 52px; }
.contact-hero-title { font-size: 26px; }
.form-card,
.board-card,
.info-card { padding: 20px 14px; }
}  .contact-hero { padding: 80px 0 80px; }
.contact-hero-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 18px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.contact-hero-trust li {
position: relative;
font-size: 13px;
font-weight: 700;
color: var(--gold-light);
letter-spacing: 0.01em;
}
.contact-hero-trust li:not(:first-child)::before {
content: "·";
position: absolute;
left: -11px;
color: rgba(255,255,255,0.35);
font-weight: 400;
} .contact-wrap { margin-top: 48px; gap: 40px; } .form-card {
background: var(--bg-card);
border: none;
border-top: 1px solid rgba(10,15,30,.08);
border-radius: 0;
box-shadow: none;
padding: 48px 0 8px;
}
.form-title { font-size: 26px; margin-bottom: 12px; }
.form-desc { color: var(--text-secondary); line-height: 1.7; }
.form-header { margin-bottom: 28px; }
.form-altcta { margin-top: 12px; } .form-trust-bar {
background: none;
border: none;
border-radius: 0;
padding: 6px 0 0;
gap: 8px 18px;
font-size: 13px;
color: var(--text-muted);
font-weight: 600;
line-height: 1.6;
}
.form-trust-bar i { color: var(--gold); margin-right: 5px; } .privacy-wrap {
background: transparent;
border: none;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
border-radius: 0;
padding: 18px 0;
font-size: 14px;
color: var(--text-muted);
line-height: 1.8;
}
.privacy-check {
margin-top: 14px;
padding-left: 12px;
border-left: 2px solid var(--gold);
font-weight: 700;
color: var(--text-primary);
} .submit-btn {
background: var(--gold);
color: var(--navy);
min-height: 54px;
font-size: 17px;
font-weight: 800;
}
.submit-btn:hover { background: var(--gold-light); } .board-card {
background: transparent;
border: none;
border-top: 1px solid var(--border-light);
border-radius: 0;
padding: 48px 0 8px;
}
.board-title { font-size: 18px; } .mobile-card { border-radius: var(--radius-md); padding: 18px; } .contact-next-card {
border: 1px solid var(--border-light);
border-top: 2px solid var(--gold);
padding: 28px 32px;
}
@media (max-width: 768px) {
.form-card,
.board-card { padding: 32px 0 0; }
.contact-wrap { gap: 28px; margin-top: 32px; }
.form-trust-bar { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; font-size: 13px; }
.privacy-wrap { font-size: 14px; }
.contact-next-card { padding: 24px 18px; }
.contact-next-call { min-height: 54px; width: 100%; }
}  .board-kicker {
display: block;
font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 6px;
}
@media (max-width: 640px) { .contact-hero { padding: 48px 0 52px; }
.contact-hero-desc { color: rgba(255,255,255,0.82); } .form-header { margin-bottom: 20px; }
.form-altcta { font-size: 14px; color: var(--text-secondary); } .board-search { gap: 8px; }
.board-search-input { flex: 1 1 100%; min-width: 0; min-height: 44px; }
.board-search-btn, .board-search-reset { flex: 1 1 0; min-height: 44px; } .board-mobile { gap: 0; }
.mobile-card {
background: transparent; border: 0;
border-bottom: 1px solid var(--border-light);
border-radius: 0; padding: 14px 2px;
}
.mobile-card:hover { border-color: var(--border-light); }
.board-mobile .mobile-card:last-child { border-bottom: 0; }
.m-head { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.m-head span:last-child { color: var(--text-muted); }
.m-title { font-size: 16px; line-height: 1.45; }
.m-foot { font-size: 13px; margin-top: 8px; }
.board-status { font-size: 13px; }
.board-note, .qna-meta, .submit-sla, .privacy-wrap { font-size: 14px; } .detail-row .detail-box { padding: 14px 2px; background: transparent; }
.qna-meta { margin-bottom: 10px; line-height: 1.7; }
.q-box {
background: transparent; border: 0;
border-left: 2px solid var(--gold);
border-radius: 0; padding: 4px 0 4px 12px;
margin-bottom: 12px; font-size: 15px;
}
.a-box { font-size: 15px; border-radius: var(--radius-md); } .contact-next-card { border-top: 2px solid var(--gold); }
}
@media (max-width: 480px) {
.contact-hero { padding: 44px 0 48px; }
.contact-hero-title { font-size: 25px; } .form-trust-bar { display: none; }
.privacy-wrap { padding: 16px 0; }
.privacy-check { align-items: flex-start; line-height: 1.6; }
} @media (max-width: 640px) {
.board-note,
.qna-meta,
.privacy-wrap,
.m-head span:last-child { color: var(--text-secondary); }
.board-pagination .page-btn { min-height: 44px; }
}  .contact-hero { padding: 80px 0 100px; }
.contact-hero .inner { max-width: 760px; }
.contact-hero-kicker {
font-size: 12px;
letter-spacing: 0.15em;
margin-bottom: 20px;
}
.contact-hero-title {
font-size: 38px;
line-height: 1.3;
letter-spacing: -0.01em;
margin: 0 0 16px;
}
.pasan-hero-line { margin: 0 auto 24px; }
.contact-hero-desc {
font-size: 16px;
max-width: 640px;
margin: 0 auto;
line-height: 1.8;
} .contact-hero-trust { margin-top: 22px; gap: 8px 18px; } .contact-wrap { margin-top: 48px; gap: 40px; } .form-card { padding: 40px; }
.form-header { text-align: center; margin-bottom: 32px; }
.form-title { font-size: 24px; line-height: 1.3; margin-bottom: 10px; }
.form-desc { font-size: 15px; line-height: 1.7; }
.form-altcta { margin-top: 12px; font-size: 13px; }
.contact-form { max-width: 680px; margin: 0 auto; gap: 20px; }
.form-grid-two { gap: 20px; }
.form-group { gap: 8px; }
.form-label { font-size: 14px; }
.privacy-wrap { padding: 16px; font-size: 13px; line-height: 1.8; }
.privacy-check { margin-top: 10px; font-size: 14px; }
.submit-btn { padding: 16px; font-size: 16px; }
.submit-sla { margin-top: 6px; font-size: 13px; } .board-card { padding: 32px; }
.board-head { margin-bottom: 20px; }
.board-title { font-size: 20px; line-height: 1.3; }
.board-note { font-size: 13px; line-height: 1.7; }
.board-table { font-size: 14px; }
.board-table th { padding: 12px 10px; font-size: 13px; }
.board-table td { padding: 14px 10px; font-size: 14px; line-height: 1.6; } .info-card { padding: 32px; gap: 24px; }
.contact-next-card { padding: 28px 32px; gap: 24px; } @media (max-width: 768px) {
.contact-hero { padding: 60px 0 80px; }
.contact-hero-title { font-size: 28px; }
.contact-wrap { margin-top: 32px; gap: 28px; }
.form-card { padding: 24px; }
.board-card { padding: 24px; }
.info-card { padding: 24px; grid-template-columns: 1fr; gap: 18px; }
.form-grid-two { grid-template-columns: 1fr; gap: 14px; }
.form-header { margin-bottom: 24px; }
.contact-form { gap: 16px; }
.contact-next-card { padding: 24px 18px; }
}
@media (max-width: 480px) {
.contact-hero { padding: 48px 0 60px; }
.contact-hero-title { font-size: 26px; }
.form-card,
.board-card,
.info-card { padding: 20px 16px; }
} .contact-next-call { border-radius: 12px; } .board-lock { color: var(--gold-text, #806731); font-size: 11px; margin-right: 6px; opacity: .9; }
.detail-locked { padding: 18px 20px; }
.locked-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy, #0a0f1e); margin-bottom: 14px; }
.locked-head i { color: var(--gold-text, #806731); }
.locked-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.locked-pw, .locked-receipt, .locked-phone4 {
height: 44px; padding: 0 14px; border: 1px solid var(--border-light, #e8e5e0); border-radius: var(--ksl-control-radius, 10px);
font-size: 14px; background: #fff; color: var(--navy, #0a0f1e);
}
.locked-pw { flex: 1 1 200px; min-width: 160px; }
.locked-open {
height: 44px; padding: 0 24px; border: 0; border-radius: var(--ksl-control-radius, 10px);
background: var(--gold-light, #d4ab4e); color: var(--navy, #0a0f1e); font-size: 14px; font-weight: 800; cursor: pointer;
transition: background .2s ease;
}
.locked-open:hover { background: var(--gold-hover, #e2c86e); }
.locked-open:disabled { opacity: .6; cursor: default; }
.locked-alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.locked-alt-label { font-size: 12px; color: var(--text-muted, #777); white-space: nowrap; }
.locked-receipt { flex: 1 1 180px; min-width: 150px; }
.locked-phone4 { width: 110px; }
.locked-msg { margin: 10px 0 0; font-size: 13px; color: #9a3324; min-height: 1em; }
@media (max-width: 560px) {
.locked-row, .locked-alt { flex-direction: column; align-items: stretch; }
.locked-open { width: 100%; }
.locked-phone4 { width: 100%; }
}:root {
--read-body-size: clamp(16px, 0.22vw + 15px, 18px);
--read-line-height: 1.78;
--read-letter-spacing: -0.006em;
--read-measure: 72ch;
--read-text: #0f172a;
--read-muted: #334155;
--read-heading-size: clamp(1.82rem, 1.2vw + 1.35rem, 2.64rem);
--read-subheading-size: clamp(1.3rem, 0.74vw + 1.05rem, 1.9rem);
--header-h: 78px !important; --header-inline-pad: clamp(20px, 2.2vw, 34px);
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-size: var(--read-body-size);
line-height: var(--read-line-height);
letter-spacing: var(--read-letter-spacing);
color: var(--read-text);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.site-header {
height: var(--header-h) !important;
}
.header-inner {
padding: 0 var(--header-inline-pad) !important;
}
.logo-img {
height: 38px !important;
}
.logo-main {
font-size: 19px !important;
}
.logo-sub {
font-size: 12px !important;
}
@media (max-width: 992px) {
:root {
--header-h: 70px !important;
--header-inline-pad: 16px;
}
.logo-img {
height: 34px !important;
}
.logo-main {
font-size: 18px !important;
}
}
main {
isolation: isolate;
color: var(--read-text);
}
main section {
scroll-margin-top: calc(var(--header-h, 70px) + 18px);
position: relative;
}
main h1,
main h2,
main h3,
main h4 {
line-height: 1.3;
letter-spacing: -0.02em;
color: #0b132a;
overflow-wrap: anywhere;
}
main p,
main li,
main dd {
line-height: max(1.72, var(--read-line-height));
color: var(--read-muted);
overflow-wrap: anywhere;
}
main p {
max-width: var(--read-measure);
text-wrap: pretty;
}
main .hero-title,
main .section-title,
main .sec-title {
font-size: var(--read-heading-size);
line-height: 1.22;
letter-spacing: -0.024em;
}
main .hero-sub,
main .hero-desc,
main .section-sub,
main .sec-sub {
max-width: min(78ch, 100%);
color: var(--read-muted);
font-size: clamp(1rem, 0.28vw + 0.95rem, 1.14rem);
line-height: 1.82;
}
main p + p {
margin-top: 0.9em;
}
main li + li {
margin-top: 0.28em;
}
main input,
main select,
main textarea,
main button {
font: inherit;
}
main input,
main select,
main textarea {
font-size: 16px;
line-height: 1.55;
}
main table {
width: 100%;
border-collapse: collapse;
}
main th,
main td {
vertical-align: middle;
line-height: 1.6;
}
main th {
font-weight: 700;
color: #0b132a;
background: rgba(4, 13, 34, 0.04);
}
main td {
color: #1e293b;
}
main a {
text-underline-offset: 0.16em;
}
@supports (text-wrap: balance) {
main h1,
main h2,
main h3 {
text-wrap: balance;
}
}
.reading-progress {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 3px;
z-index: 20000;
pointer-events: none;
transform-origin: left center;
transform: scaleX(var(--progress, 0));
background: linear-gradient(90deg, rgba(212, 169, 103, 0.92) 0%, rgba(4, 13, 34, 0.96) 100%);
box-shadow: 0 0 14px rgba(212, 169, 103, 0.35);
}
main .faq-item,
main .case-item,
main .loc-card,
main .trans-item,
main .info-block,
main .faq-cta,
main .cases-cta {
border-radius: 14px;
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
main .faq-item:hover,
main .case-item:hover,
main .loc-card:hover,
main .trans-item:hover,
main .faq-cta:hover,
main .cases-cta:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}
.js-motion .reveal-item {
opacity: 0;
transform: translateY(26px) scale(0.985);
filter: blur(5px);
transition:
opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
filter 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal-item.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
:focus-visible {
outline: 3px solid rgba(212, 169, 103, 0.75);
outline-offset: 3px;
border-radius: 10px;
}
.skip-link {
position: fixed;
left: 12px;
top: 12px;
transform: translateY(-160%);
padding: 10px 14px;
border-radius: 12px;
background: rgba(6, 16, 41, 0.95);
color: #ffffff;
font-weight: 800;
text-decoration: none;
z-index: 100000;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(212, 169, 103, 0.35);
transition: transform 0.18s ease;
}
.skip-link:focus {
transform: translateY(0);
}
.motion-ready .nav-cta,
.motion-ready .desktop-right-cta-btn.primary,
.motion-ready .fixed-cta-bar .cta-btn:first-child {
animation: cta-pulse 4.8s ease-in-out infinite;
}
.motion-ready .nav-cta:hover,
.motion-ready .desktop-right-cta-btn.primary:hover,
.motion-ready .fixed-cta-bar .cta-btn:first-child:hover {
animation-play-state: paused;
}
@keyframes cta-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(212, 169, 103, 0.00), 0 8px 20px rgba(4, 13, 34, 0.16);
}
48% {
box-shadow: 0 0 0 10px rgba(212, 169, 103, 0.00), 0 12px 30px rgba(4, 13, 34, 0.30);
}
}
@media (prefers-reduced-motion: reduce) {
.skip-link {
transition: none;
}
.reading-progress {
display: none;
}
.js-motion .reveal-item,
.js-motion .reveal-item.is-visible {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
html:focus-within {
scroll-behavior: auto !important;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 640px) {
main {
line-height: 1.74;
}
main p,
main li,
main dd {
line-height: 1.74;
}
main .hero-title,
main .section-title,
main .sec-title {
font-size: clamp(1.48rem, 4.8vw, 2rem);
}
}
.ksl-footer-policy-links {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ksl-footer-policy-links__btn {
appearance: none;
border: 0;
background: transparent;
color: #cbd5e1;
font: inherit;
font-size: 12px;
font-weight: 700;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.ksl-footer-policy-links__btn:hover {
color: #f1c453;
}
.ksl-policy-modal {
position: fixed;
inset: 0;
z-index: 11000;
}
.ksl-policy-modal__overlay {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.62);
backdrop-filter: blur(3px);
}
.ksl-policy-modal__dialog {
position: relative;
width: min(760px, calc(100% - 28px));
margin: clamp(24px, 8vh, 74px) auto 0;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.34);
background: linear-gradient(180deg, #04112b 0%, #050b18 100%);
box-shadow: 0 36px 72px rgba(2, 6, 23, 0.55);
color: #f8fafc;
outline: none;
}
.ksl-policy-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.ksl-policy-modal__title {
margin: 0;
color: #f8fafc;
font-size: clamp(18px, 1vw + 14px, 24px);
line-height: 1.3;
}
.ksl-policy-modal__close {
appearance: none;
border: 1px solid rgba(148, 163, 184, 0.44);
background: rgba(30, 41, 59, 0.52);
color: #f8fafc;
width: 36px;
height: 36px;
border-radius: 10px;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.ksl-policy-modal__body {
max-height: min(72vh, 640px);
overflow: auto;
padding: 20px;
}
.ksl-policy-list {
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
color: #e2e8f0;
line-height: 1.7;
font-size: 14px;
}
.ksl-policy-lawyer {
margin-top: 14px;
border-radius: 12px;
border: 1px solid rgba(212, 169, 103, 0.36);
background: rgba(15, 23, 42, 0.72);
padding: 13px 14px;
color: #f8fafc;
font-size: 14px;
line-height: 1.7;
}
.ksl-policy-note {
margin: 14px 0 0;
color: #cbd5e1;
font-size: 13px;
line-height: 1.65;
}
body.ksl-policy-open {
overflow: hidden;
}
.ksl-desk-dock {
display: none;
}
@media (min-width: 993px) {
body.has-ksl-desk-dock {
padding-bottom: 102px !important;
}
body.has-fixed-cta.has-ksl-desk-dock {
padding-bottom: 102px !important;
}
.ksl-desk-dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10010;
display: grid;
grid-template-columns: 1.1fr 1fr 1fr 1fr 1.2fr;
align-items: center;
gap: 12px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(212, 169, 103, 0.42);
background: linear-gradient(90deg, rgba(2, 8, 24, 0.97) 0%, rgba(4, 13, 34, 0.96) 100%);
box-shadow: 0 -18px 38px rgba(2, 6, 23, 0.5);
backdrop-filter: blur(12px);
font-family: "Pretendard Variable", "Pretendard", "SUIT", "Noto Sans KR", sans-serif;
}
.ksl-desk-dock__lead {
display: grid;
gap: 4px;
min-width: 0;
}
.ksl-desk-dock__title {
color: #f8fafc;
font-weight: 900;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.ksl-desk-dock__sub {
color: #cbd5e1;
font-size: 12px;
line-height: 1.35;
}
.ksl-desk-dock__field {
display: grid;
gap: 5px;
min-width: 0;
}
.ksl-desk-dock__field > span {
color: #cbd5e1;
font-size: 11px;
font-weight: 700;
}
.ksl-desk-dock__field select,
.ksl-desk-dock__field input {
width: 100%;
min-width: 0;
height: 38px;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.4);
background: rgba(15, 23, 42, 0.86);
color: #f8fafc;
padding: 0 11px;
font-size: 14px;
}
.ksl-desk-dock__field select:focus,
.ksl-desk-dock__field input:focus {
border-color: rgba(212, 169, 103, 0.7);
box-shadow: 0 0 0 2px rgba(212, 169, 103, 0.2);
outline: none;
}
.ksl-desk-dock__actions {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 8px;
align-items: center;
min-width: 0;
}
.ksl-desk-dock__consent {
display: inline-flex;
align-items: center;
gap: 6px;
color: #e2e8f0;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.ksl-desk-dock__policy {
appearance: none;
border: 1px solid rgba(148, 163, 184, 0.44);
background: rgba(15, 23, 42, 0.72);
color: #f8fafc;
border-radius: 10px;
height: 38px;
padding: 0 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.ksl-desk-dock__submit {
appearance: none;
border: 0;
background: linear-gradient(135deg, #d8b04c 0%, #c48b24 100%);
color: #0b1726;
border-radius: 10px;
height: 38px;
padding: 0 14px;
font-size: 13px;
font-weight: 900;
cursor: pointer;
white-space: nowrap;
}
.ksl-desk-dock__submit:disabled {
opacity: 0.72;
cursor: default;
}
.ksl-desk-dock__status {
margin: 0;
grid-column: 1 / -1;
color: #cbd5e1;
font-size: 12px;
line-height: 1.4;
}
.ksl-desk-dock__status[data-tone="error"] {
color: #fecaca;
}
.ksl-desk-dock__status[data-tone="success"] {
color: #bbf7d0;
}
}  @media (max-width: 479px) {
.fixed-cta-inner > .cta-faq-wrap {
display: none !important;
}
.fixed-cta-inner > a:last-of-type {
display: none !important;
}
} @media (max-width: 768px) {
.fixed-cta-inner .cta-label-main {
font-size: 11px !important;
letter-spacing: -0.01em;
line-height: 1.3;
}
.fixed-cta-inner .cta-icon {
width: 18px !important;
height: 18px !important;
font-size: 10px !important;
}
.fixed-cta-inner .cta-btn {
gap: 4px !important;
flex-direction: column !important;
padding: 8px 2px !important;
min-height: 52px !important;
}
} @media (min-width: 993px) and (max-width: 1440px) {
.desktop-right-cta {
right: 10px !important;
}
.desktop-right-cta-btn {
min-width: 148px !important;
padding: 10px 10px !important;
border-radius: 14px !important;
}
.desktop-right-cta-text .main {
font-size: 12px !important;
}
.desktop-right-cta-text .sub {
font-size: 10px !important;
}
.desktop-right-cta-btn i {
font-size: 16px !important;
width: 18px !important;
}
} @media (max-width: 640px) {
.contact-hero-title,
.faq-hero-title,
.loc-title,
.cases-title,
.cases-hero-title,
.about-hero-title,
.rehab-hero-title,
.pasan-hero-title,
.corp-hero-title {
font-size: clamp(24px, 6.5vw, 32px) !important;
line-height: 1.28 !important;
letter-spacing: -0.02em;
word-break: keep-all;
}
.contact-hero-desc,
.faq-hero-desc,
.loc-desc,
.cases-desc,
.cases-hero-desc,
.about-hero-desc,
.rehab-hero-desc,
.pasan-hero-desc,
.corp-hero-desc {
font-size: 15px !important;
line-height: 1.72 !important;
}
} @media (max-width: 768px) {
.faq-answer-inner {
padding: 20px 16px 24px !important;
font-size: 15px !important;
line-height: 1.78 !important;
}
.faq-answer-inner p {
margin-bottom: 14px !important;
}
.faq-q-text {
font-size: 15px !important;
line-height: 1.55 !important;
}
} @media (max-width: 640px) {
.acc-body {
padding: 18px 14px !important;
font-size: 15px !important;
line-height: 1.78 !important;
}
.acc-body li {
padding-left: 0 !important;
line-height: 1.72 !important;
}
} .faq-table-wrap,
.table-wrap {
position: relative;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.faq-table-wrap::after,
.table-wrap::after {
content: '';
position: absolute;
right: 0;
top: 0;
display: block;
width: 32px;
height: 100%;
background: linear-gradient(to left, rgba(248, 250, 252, 0.92), transparent);
pointer-events: none;
}
.faq-table,
.table-wrap table {
font-size: 13px !important;
}
.faq-table th,
.faq-table td {
padding: 10px 10px !important;
}
} @media (max-width: 640px) {
main > section + section {
margin-top: 0;
} .location-wrap,
.contact-wrap {
gap: 20px !important;
} [class*="-hero"] {
padding-bottom: 72px !important;
} .hero {
padding-top: 100px !important;
padding-bottom: 140px !important;
} .hero-content .btn-group {
flex-direction: column !important;
gap: 10px !important;
}
.hero-content .btn {
width: 100% !important;
height: auto !important;
padding: 14px 20px !important;
font-size: 15px !important;
}
} @media (max-width: 640px) {
.footer-contact {
font-size: 13px !important;
line-height: 1.95 !important;
}
.footer-quick a {
padding: 10px 12px !important;
font-size: 13px !important;
border-radius: 10px;
}
.footer-notice {
font-size: 11px !important;
line-height: 1.85 !important;
padding: 0 4px;
}
.footer-bottom {
font-size: 11px !important;
gap: 6px !important;
}
} @media (min-width: 993px) {
main p {
max-width: min(var(--read-measure, 72ch), 100%);
} .inner,
[class*="-wrap"] > .inner {
max-width: min(var(--max-width, 1100px), calc(100% - 40px));
}
} main .info-block p + p,
main .acc-body p + p,
main .faq-answer-inner p + p {
margin-top: 1em;
} @media (max-width: 640px) {
.loc-card,
.board-card,
.form-card,
.info-card {
padding: 22px 16px !important;
border-radius: 14px !important;
}
} @media (max-width: 640px) {
.process-item,
.step-item {
padding: 16px 14px !important;
}
.process-item h4,
.step-item h4 {
font-size: 15px !important;
}
} @media (max-width: 640px) {
.stat-item,
.benefit-item {
padding: 16px 12px !important;
text-align: center;
}
.stat-item h3,
.stat-item .stat-value {
font-size: clamp(20px, 5vw, 28px) !important;
word-break: keep-all;
}
} @media (max-width: 640px) {
.hero-content h1 {
font-size: clamp(26px, 7vw, 36px) !important;
line-height: 1.3 !important;
word-break: keep-all;
}
.hero-content p {
font-size: 15px !important;
line-height: 1.72 !important;
}
.section-title {
font-size: clamp(24px, 6vw, 32px) !important;
line-height: 1.3 !important;
}
.section-desc {
font-size: 15px !important;
line-height: 1.72 !important;
}
.section-header {
margin-bottom: 40px !important;
}
.section-py {
padding: 60px 0 !important;
}
}
@media (max-width: 960px) {
.hero-content h1 {
font-size: clamp(28px, 5.5vw, 42px) !important;
line-height: 1.28 !important;
}
.section-title {
font-size: clamp(26px, 4.5vw, 36px) !important;
}
} @media (max-width: 640px) {
.stats-grid {
padding: 28px 20px !important;
gap: 0 !important;
border-radius: 20px !important;
}
.stat-num {
font-size: clamp(28px, 7vw, 38px) !important;
}
} @media (max-width: 640px) {
.case-content {
padding: 20px !important;
}
.case-head {
font-size: 17px !important;
line-height: 1.4 !important;
}
.review-card {
padding: 22px !important;
}
.cta-section {
margin: 0 12px 40px !important;
padding: 50px 20px !important;
border-radius: 20px !important;
}
} @media (max-width: 640px) {
.sub-nav-inner {
gap: 0 !important;
}
.sub-nav-inner a {
font-size: 13px !important;
padding: 10px 12px !important;
white-space: nowrap;
}
} @media (max-width: 640px) {
.main-card {
margin: -60px 12px 0 !important;
padding: 24px 16px !important;
border-radius: 18px !important;
}
.hero-area {
padding: 60px 16px 100px !important;
}
.hero-title {
font-size: clamp(24px, 6.5vw, 32px) !important;
line-height: 1.3 !important;
}
} @media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
html:focus-within {
scroll-behavior: smooth;
}
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700;900&display=swap"); :root {
--navy: #0a0f1e !important;
--navy-mid: #141b2d !important;
--navy-light: #1e2a3f !important;
--gold: #b8924a !important;
--gold-light: #d4ab4e !important; --gold-hover: #e2c86e !important; --gold-hi: #ecd791 !important; --text-primary: #1a1a1a !important;
--text-secondary: #4a4a4a !important;
--text-muted: #777 !important;
--bg-page: #f8f7f5 !important;
--border-light: #e8e5e0 !important;
--border-subtle: #f0ede8 !important;
--header-h: 78px !important;
--max-width: 1080px !important;
}
body {
padding-top: var(--header-h) !important;
background: var(--bg-page) !important;
color: var(--text-primary) !important;
} .rehab-main,
.pasan-main,
.corp-main,
.cases-main,
.faq-main,
.location-main,
.contact-main,
.selfcheck-main {
background: var(--bg-page) !important;
color: var(--text-primary) !important;
}
.site-header {
background: #fff !important;
height: var(--header-h) !important;
border-bottom: 1px solid var(--border-light) !important;
box-shadow: none !important;
}
.header-inner {
max-width: var(--max-width) !important;
padding: 0 24px !important;
height: 100% !important;
}
.logo-img {
height: 36px !important;
}
.logo-main {
font-family: "Noto Serif KR", "Batang", serif !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--navy) !important;
}
.logo-sub {
font-size: 11px !important;
color: var(--text-muted) !important;
letter-spacing: 0.06em !important;
font-weight: 500 !important;
}
.gnb {
gap: 28px !important;
}
.nav-list {
gap: 6px !important;
}
.nav-link {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--text-secondary) !important;
padding: 0 10px !important;
letter-spacing: -0.01em !important;
}
.nav-link::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 10px !important;
right: 10px !important;
width: auto !important;
height: 2px !important;
background: var(--gold) !important;
transform: scaleX(0) !important;
transition: transform 0.3s ease !important;
}
.nav-link:hover {
color: var(--navy) !important;
font-weight: 600 !important;
}
.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(1) !important;
}
.nav-link.active {
color: var(--navy) !important;
font-weight: 700 !important;
}
.sub-menu {
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
border: 1px solid var(--border-light) !important;
min-width: 160px !important;
padding: 6px 0 !important;
}
.sub-menu a {
padding: 10px 20px !important;
font-size: 14px !important;
color: var(--text-secondary) !important;
font-weight: 500 !important;
}
.sub-menu a:hover {
background: #f5f3ef !important;
color: var(--navy) !important;
font-weight: 600 !important;
}
.nav-cta {
padding: 10px 24px !important;
height: auto !important;
border-radius: 6px !important;
background: var(--navy) !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
box-shadow: none !important;
}
.nav-cta:hover {
background: var(--navy-light) !important;
transform: none !important;
filter: none !important;
} .hero,
.about-hero,
.rehab-hero,
.pasan-hero,
.corp-hero,
.contact-hero,
.faq-hero,
.cases-hero,
.location-hero,
.hero-area {
background: #0a0f1e !important;
color: #fff !important;
position: relative !important;
overflow: hidden !important;
}
.hero::before,
.about-hero::before,
.rehab-hero::before,
.pasan-hero::before,
.corp-hero::before,
.contact-hero::before,
.faq-hero::before,
.cases-hero::before,
.location-hero::before,
.hero-area::before {
content: "" !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background:
repeating-linear-gradient(60deg, transparent 0px, transparent 79px, rgba(184, 146, 74, 0.04) 79px, rgba(184, 146, 74, 0.04) 80px),
repeating-linear-gradient(-60deg, transparent 0px, transparent 79px, rgba(184, 146, 74, 0.04) 79px, rgba(184, 146, 74, 0.04) 80px) !important;
animation: heroMeshDrift 55s linear infinite !important;
z-index: 0 !important;
pointer-events: none !important;
}
.hero::after,
.about-hero::after,
.rehab-hero::after,
.pasan-hero::after,
.corp-hero::after,
.contact-hero::after,
.faq-hero::after,
.cases-hero::after,
.location-hero::after,
.hero-area::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(ellipse 800px 600px at 75% 20%, rgba(184, 146, 74, 0.08), transparent 70%),
radial-gradient(ellipse 600px 800px at 15% 80%, rgba(184, 146, 74, 0.04), transparent 70%) !important;
animation: heroGlowFloat 20s ease-in-out infinite alternate !important;
z-index: 0 !important;
pointer-events: none !important;
}
.hero .inner,
.about-hero .inner,
.rehab-hero .inner,
.pasan-hero .inner,
.corp-hero .inner,
.contact-hero .inner,
.faq-hero .inner,
.cases-hero .inner,
.location-hero .inner,
.hero-area .inner,
.hero-grid,
.hero-content {
position: relative !important;
z-index: 1 !important;
}
@keyframes heroMeshDrift {
from { transform: translate(0, 0); }
to { transform: translate(80px, 46px); }
}
@keyframes heroGlowFloat {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-40px, 20px) scale(1.08); }
}
.hero-title,
.hero-content h1,
.about-hero h1,
.rehab-hero-title,
.pasan-hero-title,
.corp-hero-title,
.faq-hero-title,
.contact-hero-title,
.cases-hero h1,
.location-hero h1 {
color: #fff !important;
letter-spacing: -0.02em !important;
}
.hero-desc,
.hero-content p,
.about-hero p,
.rehab-hero-desc,
.pasan-hero-desc,
.corp-hero-desc,
.faq-hero-desc,
.contact-hero-desc,
.cases-hero p,
.location-hero p {
color: #e2e8f0 !important;
}
.hero-badge,
.rehab-hero-kicker,
.pasan-hero-kicker,
.corp-hero-kicker,
.faq-hero-kicker,
.contact-hero-kicker,
.section-badge {
color: var(--gold-light) !important;
} .check-card,
.sol-card,
.case-card,
.review-card,
.faq-item,
.info-card,
.loc-card {
border-radius: 16px !important;
border: 1px solid #e8e5e0 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}
.site-footer {
background: #050b18 !important;
}
.fixed-cta-bar {
background: #050b18 !important;
} .fixed-cta-bar .cta-btn {
background: #0f172a !important;
} main .cta-box .cta-btn {
background: var(--gold-light) !important;
border-color: var(--gold-light) !important;
color: var(--navy) !important;
box-shadow: 0 12px 28px rgba(212, 171, 78, .22) !important;
}
main .cta-box .cta-btn:hover {
background: var(--gold-hover) !important;
border-color: var(--gold-hover) !important;
}
@media (max-width: 992px) {
:root {
--header-h: 70px !important;
}
.header-inner {
padding: 0 18px !important;
}
.gnb {
position: fixed !important;
top: 0 !important;
right: -100% !important;
width: 100% !important;
height: 100vh !important;
background: #fff !important;
flex-direction: column !important;
padding-top: 80px !important;
align-items: flex-start !important;
gap: 0 !important;
overflow-y: auto !important;
}
.gnb.open {
right: 0 !important;
}
.nav-list {
flex-direction: column !important;
width: 100% !important;
gap: 0 !important;
}
.nav-item {
width: 100% !important;
height: auto !important;
flex-direction: column !important;
align-items: flex-start !important;
border-bottom: 1px solid var(--border-subtle) !important;
}
.nav-link {
display: block !important;
width: 100% !important;
padding: 18px 28px !important;
font-size: 16px !important;
color: var(--navy) !important;
font-weight: 700 !important;
border-radius: 0 !important;
background: transparent !important;
}
.nav-link::after {
display: none !important;
}
.sub-menu {
position: static !important;
transform: none !important;
width: 100% !important;
box-shadow: none !important;
border: none !important;
background: #f5f3ef !important;
padding: 0 !important;
display: none !important;
border-radius: 0 !important;
opacity: 1 !important;
visibility: visible !important;
}
.nav-item.active .sub-menu {
display: block !important;
padding: 4px 0 8px !important;
}
.sub-menu a {
padding: 14px 40px !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.nav-cta {
margin: 24px 28px !important;
width: calc(100% - 56px) !important;
text-align: center !important;
padding: 16px !important;
font-size: 15px !important;
border-radius: 8px !important;
}
} :root {
--ksl-max: var(--max-width, 1080px);
--ksl-pad-x: clamp(16px, 2.2vw, 28px);
--ksl-section-y: clamp(56px, 6.6vw, 104px);
--ksl-section-header-gap: clamp(18px, 2.8vw, 48px);
--ksl-grid-gap: clamp(14px, 1.9vw, 22px);
--ksl-card-radius: 18px;
--ksl-card-radius-sm: 14px;
--ksl-control-radius: 10px; --ksl-shadow: 0 18px 46px rgba(10, 15, 30, 0.08);
--ksl-shadow-hover: 0 26px 72px rgba(10, 15, 30, 0.12);
--ksl-border: rgba(15, 23, 42, 0.10);
--ksl-border-subtle: rgba(15, 23, 42, 0.07);
--ksl-text: var(--text-primary, #0f172a);
--ksl-muted: var(--text-secondary, #334155);
--ksl-muted-2: var(--text-muted, #64748b);
--ksl-surface: var(--bg-card, #ffffff);
--ksl-surface-warm: var(--bg-warm, #f1ede4);
--ksl-page: var(--bg-page, #f8f7f5);
}
html {
scroll-padding-top: calc(var(--header-h, 72px) + 18px);
}
body {
background: var(--ksl-page);
color: var(--ksl-text);
} .container,
.inner,
.header-inner,
.stats-bar-inner,
.footer-inner,
.fixed-cta-inner {
padding-left: var(--ksl-pad-x) !important;
padding-right: var(--ksl-pad-x) !important;
}
.container,
.inner {
max-width: var(--ksl-max) !important;
margin-left: auto !important;
margin-right: auto !important;
} main p,
main .section-desc,
main .hero-desc,
main .hero-content p {
max-width: min(74ch, 100%);
}
main .hero-content p,
main .hero-desc {
margin-left: auto;
margin-right: auto;
} main .section-py {
padding-top: var(--ksl-section-y) !important;
padding-bottom: var(--ksl-section-y) !important;
}
main .section-header {
margin-bottom: var(--ksl-section-header-gap) !important;
max-width: min(78ch, 100%);
}
main .section-title {
max-width: 26ch;
}
main .section-desc {
color: var(--ksl-muted);
font-size: clamp(0.98rem, 0.22vw + 0.95rem, 1.08rem);
line-height: 1.85;
text-wrap: pretty;
}
main .section-kicker {
letter-spacing: 0.16em;
} main .solution-grid,
main .cases-grid,
main .review-grid,
main .faq-grid,
main .loc-grid,
main .profile-body-cols {
gap: var(--ksl-grid-gap) !important;
} main .solution-grid,
main .cases-grid,
main .review-grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
main .solution-grid > *,
main .cases-grid > *,
main .review-grid > * {
grid-column: span 4;
}
@media (max-width: 980px) {
main .solution-grid > *,
main .cases-grid > *,
main .review-grid > * {
grid-column: span 6;
}
}
@media (max-width: 640px) {
main .solution-grid > *,
main .cases-grid > *,
main .review-grid > * {
grid-column: 1 / -1;
}
} main .situation-wrapper {
gap: clamp(28px, 5.4vw, 64px) !important;
} main .check-card,
main .sol-card,
main .case-card,
main .review-card,
main .faq-item,
main .loc-card,
main .trans-item,
main .info-card,
main .info-block,
main .profile-card {
border-radius: var(--ksl-card-radius) !important;
border-color: var(--ksl-border) !important;
box-shadow: 0 10px 26px rgba(10, 15, 30, 0.06) !important;
}
main .check-card:hover,
main .sol-card:hover,
main .case-card:hover,
main .review-card:hover,
main .faq-item:hover,
main .loc-card:hover,
main .trans-item:hover,
main .info-card:hover,
main .faq-cta:hover,
main .cases-cta:hover {
box-shadow: var(--ksl-shadow-hover) !important;
}
main .check-icon,
main .sol-icon {
border-radius: var(--ksl-control-radius) !important;
}
main .case-img-wrap {
height: auto !important;
aspect-ratio: 16 / 10;
}
main .case-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
main .case-badge {
border-radius: 999px;
padding: 5px 10px;
backdrop-filter: blur(10px);
} main .sol-card,
main .case-card {
display: flex;
flex-direction: column;
}
main .sol-link {
margin-top: auto;
} .btn,
.nav-cta,
.situation-link,
.cta-btn,
.desktop-right-cta-btn,
.contact-cta-btn,
.cases-cta,
.faq-cta {
border-radius: var(--ksl-control-radius) !important;
}
.btn,
.nav-cta,
.situation-link {
box-shadow: 0 10px 24px rgba(10, 15, 30, 0.08);
}
.btn:active,
.nav-cta:active,
.situation-link:active {
transform: translateY(0) !important;
} .btn-outline {
border-color: rgba(255, 255, 255, 0.26) !important;
background: rgba(255, 255, 255, 0.06) !important;
} .btn {
gap: 10px;
padding-left: clamp(18px, 2.2vw, 30px) !important;
padding-right: clamp(18px, 2.2vw, 30px) !important;
border-radius: var(--ksl-control-radius) !important; }
.btn-group {
gap: clamp(10px, 1.4vw, 14px) !important;
} .desktop-right-cta {
right: clamp(14px, 1.8vw, 22px) !important;
}
.desktop-right-cta-btn {
border-radius: 14px !important;
}
.desktop-right-cta-dropdown {
border-radius: 14px !important;
}
.fixed-cta-inner {
max-width: var(--ksl-max);
margin-left: auto;
margin-right: auto;
gap: clamp(10px, 2vw, 14px) !important;
}
.fixed-cta-bar {
padding-bottom: 8px;
}
@supports (padding: env(safe-area-inset-bottom)) {
.fixed-cta-bar {
padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}
} .stats-bar-inner {
max-width: var(--ksl-max) !important;
margin-left: auto !important;
margin-right: auto !important;
} footer .footer-inner {
max-width: var(--ksl-max) !important;
margin-left: auto !important;
margin-right: auto !important;
gap: var(--ksl-grid-gap) !important;
}
footer .footer-links a,
footer .footer-quick a {
border-radius: 10px;
} .sub-menu,
.desktop-right-cta-dropdown,
.cta-dropdown,
#ctaFaqBox {
border-radius: 12px !important;
overflow: hidden;
}
.desktop-right-cta-dropdown a,
.cta-dropdown a,
#ctaFaqBox a,
footer .footer-links a,
footer .footer-quick a {
border-radius: 10px !important;
}
main .main-card,
main .board-card,
main .form-card,
main .faq-section,
main .q-section,
main .info-section,
main .consult-card,
main .faq-table-wrap {
border-radius: 16px !important;
}
main .faq-item,
main .acc-item,
main .case-item,
main .contact-receipt-note,
main .faq-note {
border-radius: 14px !important;
}
main .faq-question,
main .faq-answer,
main .faq-answer-inner,
main .consult-btn,
.nav-cta,
.desktop-right-cta-btn,
.cta-btn {
border-radius: 12px !important;
}
main .faq-icon,
.menu-toggle span {
border-radius: 8px !important;
}
.fixed-cta-inner {
border-radius: 18px !important;
} @media (max-width: 992px) {
:root {
--ksl-section-y: clamp(46px, 8.4vw, 74px);
}
main .section-header {
margin-bottom: clamp(16px, 4.2vw, 28px) !important;
}
main .hero-content h1,
main .hero-title {
letter-spacing: -0.03em;
}
main .hero-trust-list li {
border-radius: 999px;
}
.nav-cta {
border-radius: 14px !important;
}
}
@media (prefers-reduced-motion: reduce) {
main .check-card,
main .sol-card,
main .case-card,
main .review-card {
transition: none !important;
}
}   :root {
--radius-sm: 8px !important;
--radius-md: 12px !important;
--radius-lg: 16px !important;
} @media (min-width: 641px) {
.pasan-hero,
.rehab-hero,
.corp-hero,
.contact-hero,
.cases-hero,
.faq-hero,
.location-hero {
padding-top: clamp(88px, 10vw, 128px) !important;
padding-bottom: clamp(72px, 8vw, 104px) !important;
text-align: center !important;
}
} @media (min-width: 641px) {
.pasan-hero-title, .about-hero .hero-title,
.contact-hero-title,
.cases-title,
.faq-hero-title,
.loc-title {
font-size: clamp(30px, 4.2vw, 44px) !important;
line-height: 1.28 !important;
letter-spacing: -0.02em !important;
font-weight: 700 !important;
margin: 0 0 18px !important;
text-wrap: balance;
}
} .pasan-hero-kicker,
.about-hero .hero-badge,
.contact-hero-kicker,
.cases-kicker,
.faq-hero-kicker,
.loc-kicker {
display: inline-block !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
margin: 0 0 20px !important;
color: var(--gold-light) !important;
} .pasan-hero-line,
.about-hero .hero-line,
.loc-hero-line {
width: 48px !important;
height: 1px !important;
background: var(--gold) !important;
margin: 28px auto !important;
} .consult-kicker {
display: block;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
line-height: 1.5 !important;
color: var(--gold-light) !important;
text-transform: none !important;
margin-bottom: 16px !important;
} main .check-card,
main .sol-card,
main .case-card,
main .review-card,
main .info-block,
main .trans-item {
border-radius: 16px !important;
border: 1px solid var(--border-light) !important;
box-shadow: none !important;
}
main .check-card,
main .sol-card,
main .case-card,
main .review-card {
background: #fff !important;
}
main .check-card:hover,
main .sol-card:hover,
main .case-card:hover,
main .review-card:hover,
main .trans-item:hover {
box-shadow: 0 10px 26px rgba(10, 15, 30, 0.07) !important;
} main .faq-item,
main .acc-item {
border-radius: 0 !important;
box-shadow: none !important;
}
main .faq-item:hover,
main .acc-item:hover {
box-shadow: none !important;
} body.ksl-page-index {
--bg-page: #f6f4ef !important;
--bg-warm: #f1ede4 !important;
background: var(--bg-page) !important;
} .btn, .nav-cta, .situation-link, .cta-btn, .desktop-right-cta-btn,
.consult-btn, .submit-btn, .consult-submit, .contact-next-call,
.pasan-hero-btn, .about-hero-btn, .corp-lead-btn,
.corp-site-banner-btn, .btn-big, .btn-action, .wizard-btn,
.btn-submit-main, .conversion-btn, .board-search-btn {
font-weight: 700 !important;
} .btn:disabled, .submit-btn:disabled, .consult-submit:disabled,
.wizard-btn:disabled, .btn-submit-main:disabled, .contact-next-call:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
} .case-badge, .cm-badge, .board-badge, .acc-badge {
display: inline-flex !important;
align-items: center;
padding: 4px 11px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
border-radius: 999px !important;
line-height: 1;
}   :root {
--text-muted: #5f5f5f !important; --text-light: #6b6b6b !important; --gold-text:  #806731; } body.ksl-page-index .case-result strong { color: var(--gold-text); } .form-altcta a,
.faq-q-label,
.cm-label,
.quick-check-question legend span,
.quick-check-result-kicker { color: var(--gold-text); }
.lead-hub-related a:hover { color: var(--gold-text); border-color: var(--gold-text); } .section-kicker,
.pasan-card-kicker,
.cases-kicker, .cases-head-kicker,
.sec-kicker,
.faq-group-kicker,
.q-step,
.mode-btn.active .mode-btn-sub,
.step-sub,
.acc-badge { color: var(--gold-text) !important; } main :is(.btn-primary, .btn-submit-main, .wizard-btn, .btn-gold, .consult-btn, .consult-submit) {
background: var(--gold-light) !important;
border-color: var(--gold-light) !important;
color: var(--navy) !important;
box-shadow: 0 12px 28px rgba(212, 171, 78, .22) !important;
}
main :is(.btn-primary, .btn-submit-main, .wizard-btn, .btn-gold, .consult-btn, .consult-submit):hover {
background: var(--gold-hover) !important;
border-color: var(--gold-hover) !important;
} @media (max-width: 640px) {
.sc-container      { width: 100%; max-width: 100%; }
.contact-main .inner { width: 100%; max-width: 100%; }
} @media (max-width: 640px) { .section-desc,
.hero-content p,
.hero-desc, .pasan-hero-desc, .rehab-hero-desc, .corp-hero-desc,
.contact-hero-desc, .faq-hero-desc, .cases-desc, .cases-hero-desc,
.loc-desc, .about-hero-desc {
font-size: 16px !important;
line-height: 1.8 !important;
} .footer-desc, .footer-links { font-size: 14px !important; line-height: 1.85 !important; }
.footer-contact { font-size: 14px !important; line-height: 1.95 !important; } .q-desc-box, .report-content, .wizard-complete-note { font-size: 15px !important; line-height: 1.8 !important; }
.select-text { font-size: 15px !important; line-height: 1.6 !important; }
.diagram-caption { font-size: 13px !important; line-height: 1.7 !important; } body.ksl-page-index .sol-desc { font-size: 15px !important; line-height: 1.75 !important; }
} @media (max-width: 640px) { .board-pagination { gap: 8px; }
.board-pagination .page-btn {
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
} .privacy-check, .consult-form .privacy-check { min-height: 44px; align-items: center; gap: 10px; }
.privacy-check input, .consult-form .privacy-check input {
width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--gold);
} .footer-links { gap: 4px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; } a[href^="tel:"], a[href*="pf.kakao"], a[href*="naver"],
.page-btn, .board-search-btn, .board-search-reset, .sub-menu a,
.wizard-btn, button:not(.menu-toggle) { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
} @media (max-width: 640px) {
.cases-marquee {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
-webkit-mask-image: none; mask-image: none; }
.cm-track { animation: none; transform: none; }
.cm-card { scroll-snap-align: start; } .home-contact-form { padding: 22px 18px; }
.hc-info-card { padding: 22px 18px; }
.hc-urgent { padding: 20px 18px; }
.consult-card { padding: 52px 20px; }
} :root {
--ksl-polish-text: #2f3137;
--ksl-polish-muted: #555b66;
--ksl-polish-border: rgba(18, 24, 38, 0.11);
--ksl-polish-border-soft: rgba(18, 24, 38, 0.075);
--ksl-polish-shadow: 0 8px 24px rgba(12, 18, 32, 0.055);
--ksl-polish-section-y: clamp(58px, 6.4vw, 92px);
--ksl-polish-gap: clamp(20px, 3vw, 34px);
}
main {
color: var(--ksl-polish-text);
line-height: 1.72;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main :where(h1, h2, h3, h4, h5, h6, p, li, a, span, small, label, button, input, textarea, select) {
letter-spacing: 0 !important;
}
main :where(p, li, td, th, label, input, textarea, select) {
line-height: 1.72;
}
main :where(.section-desc, .hero-desc, .hero-content p, .pasan-card-desc, .contact-hero-desc,
.faq-hero-desc, .cases-desc, .loc-desc, .form-desc, .board-note, .review-text) { color: var(--ksl-polish-muted) !important;
font-weight: 400 !important;
}
main :where(h1, h2, h3, .section-title, .section-heading, .hero-title, .pasan-hero-title,
.contact-hero-title, .cases-title, .faq-hero-title, .loc-title, .form-title, .board-title) {
font-weight: 700 !important;
line-height: 1.3 !important;
}
main :where(.section-py, .cases-section, .loc-section, .faq-section) {
padding-top: var(--ksl-polish-section-y) !important;
padding-bottom: var(--ksl-polish-section-y) !important;
}
main :where(.section-header, .cases-head, .sec-header, .form-header, .board-head, .pasan-card-header) {
margin-bottom: var(--ksl-polish-gap) !important;
}
main :where(.section-kicker, .hero-badge, .pasan-hero-kicker, .contact-hero-kicker,
.cases-kicker, .faq-hero-kicker, .loc-kicker, .board-kicker, .form-trust-bar span) {
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
} main :where(.hero, .about-hero, .rehab-hero, .pasan-hero, .corp-hero, .contact-hero,
.faq-hero, .cases-hero, .location-hero, .hero-area)::before,
main :where(.hero, .about-hero, .rehab-hero, .pasan-hero, .corp-hero, .contact-hero,
.faq-hero, .cases-hero, .location-hero, .hero-area)::after {
animation: none !important;
opacity: 0.62 !important;
} main :where(.pasan-section-card:not(.consult-card):not(.consult-card--final),
.service-field-card, .diff-card, .service-item, .info-block, .trans-item,
.photo-item, .case-item, .faq-item, .acc-item) {
box-shadow: none !important;
border-color: var(--ksl-polish-border-soft) !important;
}
main :where(.pasan-section-card:not(.consult-card):not(.consult-card--final)) {
background: transparent !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
main :where(.form-card, .board-card, .cc-card, .sc-card, .main-card, .consult-card,
.home-contact-form, .hc-info-card) {
border: 1px solid var(--ksl-polish-border) !important;
box-shadow: var(--ksl-polish-shadow) !important;
}
main :where(.form-card, .board-card, .cc-card, .sc-card, .main-card,
.home-contact-form, .hc-info-card) {
border-radius: 14px !important;
}
main :where(.check-card, .sol-card, .case-card, .review-card, .diff-card,
.service-item, .info-block, .trans-item, .photo-item, .faq-item, .acc-item):hover {
transform: translateY(-1px) !important;
box-shadow: 0 8px 20px rgba(12, 18, 32, 0.045) !important;
}
main :where(.faq-item, .acc-item):hover {
transform: none !important;
box-shadow: none !important;
}
main :where(.btn, .submit-btn, .consult-submit, .consult-btn, .btn-big, .btn-action,
.wizard-btn, .board-search-btn, .board-search-reset, .cases-hero-btn, .contact-next-call,
.cc-btn, .pasan-hero-btn, .about-hero-btn, .corp-lead-btn,
.conversion-btn, .desktop-right-cta-btn) {
min-height: 48px !important;
padding-inline: clamp(18px, 2.4vw, 28px) !important;
border-radius: 8px !important;
line-height: 1.25 !important;
align-items: center;
justify-content: center;
gap: 8px;
}
main :where(.btn, .submit-btn, .consult-submit, .consult-btn, .btn-big, .btn-action,
.wizard-btn, .board-search-btn, .board-search-reset, .cases-hero-btn, .contact-next-call,
.cc-btn, .pasan-hero-btn, .about-hero-btn, .corp-lead-btn,
.conversion-btn, .desktop-right-cta-btn):hover {
transform: translateY(-1px) !important;
}
main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.form-input, .form-select, .form-textarea, .desktop-consult-input,
.desktop-consult-select, .desktop-consult-textarea, .board-search-input) {
min-height: 50px;
border-color: var(--ksl-polish-border) !important;
box-shadow: none !important;
line-height: 1.55 !important;
}
main :where(textarea, .form-textarea, .desktop-consult-textarea) {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
main :where(input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus, .board-search-input:focus) {
outline: 2px solid rgba(184, 146, 74, 0.25) !important;
outline-offset: 2px;
border-color: rgba(184, 146, 74, 0.75) !important;
}
main :where(.form-grid-two, .consult-form-grid, .board-search, .cc-cta__btns,
.cases-hero-actions, .consult-final-actions, .btn-group) {
gap: clamp(10px, 1.8vw, 16px) !important;
}
main :where(.privacy-wrap, .contact-receipt-note, .faq-note, .q-desc-box,
.wizard-complete-note, .report-content) {
line-height: 1.76 !important;
}
main :where(.board-table th, .board-table td) {
padding-top: 16px !important;
padding-bottom: 16px !important;
vertical-align: middle;
}
@media (max-width: 768px) {
:root {
--ksl-polish-section-y: clamp(42px, 10vw, 64px);
--ksl-polish-gap: 20px;
}
main :where(.hero, .about-hero, .rehab-hero, .pasan-hero, .corp-hero,
.contact-hero, .faq-hero, .cases-hero, .location-hero, .hero-area) {
padding-top: clamp(54px, 13vw, 76px) !important;
padding-bottom: clamp(52px, 12vw, 72px) !important;
}
body.ksl-page-index main .hero {
padding-top: clamp(58px, 14vw, 82px) !important;
}
main :where(.inner, .container, .sc-container) {
padding-left: 18px !important;
padding-right: 18px !important;
}
main :where(h1, .hero-title, .pasan-hero-title, .contact-hero-title,
.cases-title, .faq-hero-title, .loc-title) {
font-size: clamp(28px, 7.4vw, 36px) !important;
line-height: 1.28 !important;
}
main :where(h2, .section-title, .section-heading, .pasan-card-title,
.form-title, .board-title, .cases-head-title) {
font-size: clamp(22px, 5.9vw, 28px) !important;
line-height: 1.34 !important;
}
main :where(.section-desc, .hero-desc, .hero-content p, .pasan-card-desc,
.contact-hero-desc, .faq-hero-desc, .cases-desc, .loc-desc, .form-desc,
.board-note) {
font-size: 15.5px !important;
line-height: 1.78 !important;
}
main :where(.form-card, .board-card, .cc-card, .sc-card, .main-card,
.home-contact-form, .hc-info-card, .consult-card) {
padding: 22px 18px !important;
border-radius: 12px !important;
}
main :where(.pasan-section-card:not(.consult-card):not(.consult-card--final)) {
padding-top: 34px !important;
padding-bottom: 34px !important;
}
main :where(.btn, .submit-btn, .consult-submit, .consult-btn, .btn-big,
.btn-action, .wizard-btn, .board-search-btn, .board-search-reset,
.cases-hero-btn, .contact-next-call, .cc-btn, .pasan-hero-btn,
.about-hero-btn, .corp-lead-btn, .conversion-btn) {
min-height: 50px !important;
width: auto;
}
main :where(.cases-hero-actions, .cc-cta__btns, .consult-final-actions,
.contact-next-card, .form-grid-two, .board-search) {
flex-direction: column !important;
}
main :where(.cases-hero-actions > *, .cc-cta__btns > *, .consult-final-actions > *,
.board-search > button, .board-search > input, .contact-next-card > a) {
width: 100% !important;
}
main :where(.pasan-nav, .board-pagination) {
padding-left: 18px;
padding-right: 18px;
}
main :where(.pasan-nav-link, .page-btn) {
min-height: 44px;
display: inline-flex;
align-items: center;
}
main :where(.stats-bar, .form-trust-bar, .contact-hero-trust, .hero-trust-list) {
gap: 8px !important;
}
main :where(.board-table th, .board-table td) {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
}
@media (max-width: 420px) {
main :where(.inner, .container, .sc-container) {
padding-left: 16px !important;
padding-right: 16px !important;
}
main :where(.form-card, .board-card, .cc-card, .sc-card, .main-card,
.home-contact-form, .hc-info-card, .consult-card) {
padding-left: 16px !important;
padding-right: 16px !important;
}
main :where(.btn, .submit-btn, .consult-submit, .consult-btn, .btn-big,
.btn-action, .wizard-btn, .board-search-btn, .board-search-reset,
.cases-hero-btn, .contact-next-call, .cc-btn, .pasan-hero-btn,
.about-hero-btn, .corp-lead-btn, .conversion-btn) {
padding-left: 16px !important;
padding-right: 16px !important;
font-size: 14.5px !important;
}
} :root {
--hdr-rule: rgba(184, 146, 74, 0.22);
--hdr-hero-bg: rgba(10, 15, 30, 0.34);
--hdr-hero-solid: rgba(10, 15, 30, 0.96);
} .site-header {
background: #fff !important;
height: var(--header-h) !important;
border-bottom: 1px solid var(--border-light) !important;
box-shadow: none !important;
transition: background 0.4s ease, border-color 0.3s ease !important;
} .site-header::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -1px !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(184, 146, 74, 0.85) 18%, rgba(184, 146, 74, 0.85) 82%, transparent) !important;
pointer-events: none !important;
}
.header-inner {
max-width: 1080px !important;
height: 100% !important;
padding: 0 var(--header-inline-pad) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
} .logo-area { display: flex !important; align-items: center !important; gap: 14px !important; }
.logo-img {
height: 34px !important;
padding-right: 14px !important;
border-right: 1px solid var(--border-light) !important;
}
.logo-text { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.logo-main {
position: relative !important;
font-family: var(--font-serif, "Noto Serif KR", "Batang", serif) !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.01em !important;
color: var(--navy) !important;
padding-bottom: 5px !important;
}
.logo-main::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 24px !important;
height: 1px !important;
background: var(--gold) !important;
}
.logo-sub {
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--gold-text, #806731) !important;
line-height: 1 !important;
} .gnb { display: flex !important; align-items: center !important; gap: 30px !important; height: 100% !important; }
.nav-list { display: flex !important; align-items: center !important; gap: 4px !important; }
.nav-link {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
height: var(--header-h) !important;
padding: 0 12px !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
color: var(--text-secondary) !important;
background: transparent !important;
border-radius: 0 !important;
}
.nav-link::after {
content: "" !important;
position: absolute !important;
left: 12px !important;
right: 12px !important;
bottom: 24px !important;
top: auto !important;
height: 1px !important;
width: auto !important;
background: var(--gold) !important;
transform: scaleX(0) !important;
transform-origin: center !important;
transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.nav-link:hover { color: var(--navy) !important; font-weight: 600 !important; background: transparent !important; }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1) !important; }
.nav-link.active { color: var(--navy) !important; font-weight: 700 !important; background: transparent !important; }
.nav-caret { color: var(--gold-text, #806731) !important; transition: transform 0.3s ease !important; }
.nav-item.active .nav-caret,
.has-sub.active .nav-caret { transform: rotate(180deg) !important; } .sub-menu {
background: #fff !important;
border: 1px solid var(--border-light) !important;
border-top: 2px solid var(--gold) !important;
border-radius: 4px !important;
box-shadow: 0 14px 36px rgba(10, 15, 30, 0.10) !important;
min-width: 184px !important;
padding: 6px 0 !important;
}
.sub-menu a {
padding: 11px 22px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--text-secondary) !important;
}
.sub-menu a:hover { background: var(--bg-warm) !important; color: var(--navy) !important; font-weight: 600 !important; } .nav-cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: auto !important;
padding: 11px 26px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--gold-text, #806731) !important;
background: transparent !important;
border: 1px solid var(--gold) !important;
border-radius: 4px !important;
box-shadow: none !important;
transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease !important;
}
.nav-cta:hover {
background: var(--gold) !important;
color: var(--navy) !important;
border-color: var(--gold) !important;
transform: none !important;
filter: none !important;
} body.ksl-page-index .site-header.site-header--hero {
background: var(--hdr-hero-bg) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border-bottom: 1px solid var(--hdr-rule) !important;
box-shadow: none !important; height: auto !important;
}
body.ksl-page-index .site-header--hero::after {
background: linear-gradient(90deg, transparent, rgba(184, 146, 74, 0.55) 18%, rgba(184, 146, 74, 0.55) 82%, transparent) !important;
}
body.ksl-page-index .site-header--hero .logo-img { border-right-color: rgba(255, 255, 255, 0.22) !important; }
body.ksl-page-index .site-header--hero .logo-main { color: rgba(255, 255, 255, 0.96) !important; }
body.ksl-page-index .site-header--hero .logo-main::after { background: var(--gold-light) !important; }
body.ksl-page-index .site-header--hero .logo-sub { color: rgba(255, 255, 255, 0.66) !important; }
body.ksl-page-index .site-header--hero .nav-link { color: rgba(255, 255, 255, 0.82) !important; }
body.ksl-page-index .site-header--hero .nav-link::after { background: var(--gold-light) !important; }
body.ksl-page-index .site-header--hero .nav-link:hover,
body.ksl-page-index .site-header--hero .nav-link.active { color: #fff !important; background: transparent !important; }
body.ksl-page-index .site-header--hero .nav-cta {
color: var(--gold-light) !important;
border-color: var(--gold) !important;
background: transparent !important;
}
body.ksl-page-index .site-header--hero .nav-cta:hover { background: var(--gold) !important; color: var(--navy) !important; }
body.ksl-page-index .site-header--hero .menu-toggle span { background: rgba(255, 255, 255, 0.95) !important; } .header-topline {
background: rgba(10, 15, 30, 0.50) !important;
border-bottom: 1px solid rgba(184, 146, 74, 0.26) !important;
color: rgba(255, 255, 255, 0.70) !important;
font-size: 11.5px !important;
letter-spacing: 0.04em !important;
transition: border-color 0.4s ease !important;
}
.header-topline-inner {
height: 34px !important;
max-width: 1080px !important;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.topline-copy { font-weight: 500 !important; }
.topline-links { display: flex !important; align-items: center !important; gap: 18px !important; white-space: nowrap !important; font-weight: 600 !important; }
.topline-links a { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: rgba(255, 255, 255, 0.82) !important; }
.topline-links a:hover { color: var(--gold-light) !important; } .site-header.site-header--compact {
background: rgba(255, 255, 255, 0.97) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid var(--border-light) !important;
box-shadow: none !important;
} .site-header.is-scrolled { box-shadow: 0 1px 0 rgba(10, 15, 30, 0.04) !important; }
.site-header.is-scrolled::after {
background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent) !important;
} body.ksl-page-index .site-header.site-header--hero.is-scrolled {
background: var(--hdr-hero-solid) !important;
border-bottom: 1px solid rgba(184, 146, 74, 0.30) !important;
}
body.ksl-page-index .site-header--hero.is-scrolled .header-topline { border-bottom-color: rgba(184, 146, 74, 0.34) !important; } @media (max-width: 992px) {
:root { --header-inline-pad: 18px !important; }
.logo-img { height: 30px !important; padding-right: 12px !important; }
.logo-main { font-size: 18px !important; }
.logo-sub { font-size: 9.5px !important; letter-spacing: 0.12em !important; } .menu-toggle span { height: 1.5px !important; width: 22px !important; background: var(--navy) !important; }
body.ksl-page-index .site-header--hero .menu-toggle span { background: rgba(255, 255, 255, 0.95) !important; } .site-header .gnb {
background: #fff !important;
border-left: 1px solid var(--border-light) !important;
border-top: 2px solid var(--gold) !important;
box-shadow: -12px 0 40px rgba(10, 15, 30, 0.16) !important;
} .nav-list { flex-direction: column !important; width: 100% !important; gap: 0 !important; }
.nav-item { width: 100% !important; flex-direction: column !important; align-items: flex-start !important; border-bottom: 1px solid var(--border-subtle) !important; padding: 0 !important; }
.nav-link {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 16px 24px !important;
font-size: 15.5px !important;
font-weight: 600 !important;
color: var(--navy) !important;
background: transparent !important;
border-radius: 0 !important;
}
.site-header .gnb .nav-link { font-weight: 600 !important; }
.nav-link::after { display: none !important; }
.sub-menu {
position: static !important;
transform: none !important;
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--bg-warm) !important;
padding: 0 !important;
display: none !important;
}
.nav-item.active .sub-menu { display: block !important; padding: 4px 0 8px !important; }
.sub-menu a { padding: 13px 38px !important; font-size: 14px !important; font-weight: 500 !important; } .site-header .gnb .nav-cta,
.site-header.site-header--hero .gnb .nav-cta,
.site-header.site-header--compact .gnb .nav-cta { display: none !important; } .mobile-menu-conversion {
display: block !important;
order: 0 !important;
width: calc(100% - 28px) !important;
margin: 18px 14px 6px !important;
padding: 16px 16px 18px !important;
background: #fff !important;
border: 1px solid var(--border-light) !important;
border-top: 2px solid var(--gold) !important;
border-radius: 6px !important;
box-shadow: 0 8px 20px rgba(10, 15, 30, 0.05) !important;
} .mobile-menu-conversion-head { margin-bottom: 12px !important; }
.mobile-menu-conversion-head strong,
.mmc-sub { display: none !important; } .mmc-card--check,
.mmc-card--kakao,
.mmc-card--corp { display: none !important; } .mmc-card--consult {
grid-column: 1 / -1 !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-height: 0 !important;
padding: 14px 16px !important;
}
.mmc-card--consult .mmc-tx { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
.mmc-card--consult .mmc-tx small { font-size: 11px !important; }
.mmc-eyebrow {
color: var(--gold-text, #806731) !important;
background: transparent !important;
border: 1px solid rgba(184, 146, 74, 0.40) !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
}
.mmc-eyebrow i { animation: none !important; }
.mobile-menu-conversion-head strong { font-family: var(--font-serif, "Noto Serif KR", serif) !important; color: var(--navy) !important; font-size: 17px !important; font-weight: 700 !important; }
.mmc-sub { color: var(--text-muted) !important; font-size: 12px !important; }
.mmc-grid { gap: 10px !important; }
.mmc-card {
gap: 9px !important;
border: 1px solid var(--border-light) !important;
border-radius: 6px !important;
background: #fff !important;
color: var(--navy) !important;
box-shadow: 0 2px 8px rgba(10, 15, 30, 0.05) !important;
}
.mmc-card:hover, .mmc-card:focus-visible { transform: translateY(-1px) !important; box-shadow: 0 8px 18px rgba(10, 15, 30, 0.10) !important; }
.mmc-card:active { transform: scale(0.98) !important; }
.mmc-ic { background: var(--gold-muted) !important; color: var(--gold-text, #806731) !important; border-radius: 8px !important; }
.mmc-tx strong { font-size: 14px !important; font-weight: 700 !important; }
.mmc-tx small { color: var(--text-muted) !important; opacity: 1 !important; font-size: 10.5px !important; } .mmc-card--naver { background: #fff !important; border-color: var(--border-light) !important; color: var(--navy) !important; }
.mmc-card--naver .mmc-ic { background: var(--gold-muted) !important; color: var(--gold-text, #806731) !important; }
.mmc-card--naver small { color: var(--text-muted) !important; opacity: 1 !important; }
.mmc-card--naver::after { display: none !important; content: none !important; animation: none !important; }
.mmc-card--phone .mmc-ic { background: var(--gold-muted) !important; color: var(--gold-text, #806731) !important; }
.mmc-card--kakao .mmc-ic { background: var(--gold-muted) !important; color: var(--gold-text, #806731) !important; } .mmc-card--check { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.mmc-card--check .mmc-ic { background: rgba(184, 146, 74, 0.22) !important; color: var(--gold-light) !important; }
.mmc-card--check small { color: rgba(255, 255, 255, 0.78) !important; opacity: 1 !important; }
.mmc-card--check strong { color: #fff !important; } .mmc-card--consult { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; }
.mmc-card--consult .mmc-ic { background: #fff !important; color: var(--navy) !important; }
.mmc-card--consult .mmc-tx strong { font-weight: 800 !important; color: var(--navy) !important; }
.mmc-card--consult small { color: rgba(10, 15, 30, 0.72) !important; opacity: 1 !important; } .mmc-card--corp { grid-column: 1 / -1 !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; min-height: 0 !important; background: var(--navy) !important; border: 1px solid rgba(184, 146, 74, 0.30) !important; color: #fff !important; }
.mmc-card--corp .mmc-ic { background: rgba(184, 146, 74, 0.22) !important; color: var(--gold-light) !important; }
.mmc-card--corp .mmc-tx strong { color: #fff !important; }
.mmc-card--corp .mmc-tx small { white-space: normal !important; color: rgba(255, 255, 255, 0.82) !important; opacity: 1 !important; }
.mmc-corp-ext { color: rgba(255, 255, 255, 0.65) !important; }
} @media (max-width: 640px) {
.site-header .gnb { width: 100% !important; border-left: 0 !important; }
} @media (prefers-reduced-motion: reduce) {
.site-header, .nav-link::after, .nav-cta, .header-topline { transition: none !important; }
} .naver-lead { padding: clamp(40px, 5vw, 64px) 0; background: var(--bg-warm); border-top: 1px solid var(--border-subtle); }
.naver-lead-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--ksl-pad-x, clamp(16px, 2.2vw, 28px)); }
.naver-lead-head { text-align: center; max-width: 660px; margin: 0 auto clamp(24px, 3vw, 34px); }
.naver-lead-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text, #806731); margin-bottom: 10px; }
.naver-lead-title { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--navy); margin: 0 0 10px; word-break: keep-all; }
.naver-lead-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin: 0; word-break: keep-all; }
.naver-lead-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.naver-lead-btn { display: inline-flex; align-items: center; gap: 9px; height: 54px; padding: 0 26px; border-radius: var(--ksl-control-radius, 10px); font-size: 15px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--border-light); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.naver-lead-btn small { font-weight: 500; color: var(--text-muted); font-size: 12px; margin-left: 2px; }
.naver-lead-btn i { color: var(--gold-text, #806731); font-size: 15px; }
.naver-lead-btn:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 24px rgba(10, 15, 30, .06); }
.naver-lead-btn--primary { background: var(--gold-light, #d4ab4e); border-color: var(--gold-light, #d4ab4e); color: var(--navy); box-shadow: 0 12px 28px rgba(212, 171, 78, .22); }
.naver-lead-btn--primary i { color: var(--navy); }
.naver-lead-btn--primary:hover { background: var(--gold-hover, #e2c86e); border-color: var(--gold-hover, #e2c86e); }
@media (max-width: 640px) {
.naver-lead-actions { flex-direction: column; }
.naver-lead-btn { width: 100%; justify-content: center; height: 52px; }
} .btn-naver { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(212, 185, 120, 0.5) !important; color: #fff !important; box-shadow: none !important; }
.btn-naver:hover { background: rgba(212, 185, 120, 0.14) !important; border-color: rgba(236, 215, 145, 0.78) !important; color: #fff !important; transform: translateY(-2px); }
.btn-naver i { color: #05c157 !important; }
.hc-opt { color: var(--text-muted); font-size: 12px; font-weight: 500; } .ksl-c-hero {
text-align: center;
word-break: keep-all;
}
.ksl-c-hero__inner {
max-width: var(--max-width, 1080px);
margin-inline: auto;
padding-inline: 24px;
}
.ksl-c-hero__title,
.ksl-c-section-head__title,
.ksl-c-final-cta__title {
overflow-wrap: anywhere;
}
.ksl-c-hero__desc,
.ksl-c-section-head__desc,
.ksl-c-final-cta__desc {
text-wrap: pretty;
}
.ksl-c-page-nav {
z-index: 30;
}
.ksl-c-page-nav__list {
min-width: 0;
}
.ksl-c-page-nav__link {
white-space: nowrap;
}
.ksl-c-final-cta {
text-align: center;
}
.ksl-c-final-cta__actions {
align-items: center;
justify-content: center;
} .conversion-intent-hub {
background: #fff;
border-bottom: 1px solid var(--border-subtle);
}
.conversion-intent-head {
max-width: 720px;
margin: 0 auto 34px;
text-align: center;
}
.conversion-intent-head .section-kicker {
justify-content: center;
} .conversion-intent-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px 40px;
}
.conversion-intent-card {
min-height: 0;
display: flex;
flex-direction: column;
gap: 13px;
padding: 26px 0 4px;
background: transparent;
border: 0;
border-top: 2px solid rgba(184, 146, 74, 0.55);
border-radius: 0;
color: var(--navy);
box-shadow: none;
transition: border-top-color 0.2s ease;
}
.conversion-intent-card:hover,
.conversion-intent-card:focus-visible {
transform: none;
border-top-color: var(--gold, #b8924a);
box-shadow: none;
}
.conversion-intent-icon {
width: 40px;
height: 40px;
display: inline-grid;
place-items: center;
border-radius: 10px;
background: var(--gold-muted);
color: var(--gold-text, #806731);
font-size: 16px;
}
.conversion-intent-label {
display: inline-flex;
width: fit-content;
padding: 0;
border: 0;
border-radius: 0;
color: var(--gold-text, #806731);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.03em;
}
.conversion-intent-card strong {
display: block;
min-height: 0;
color: var(--navy);
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.36;
}
.conversion-intent-card span:not(.conversion-intent-icon):not(.conversion-intent-label) {
color: var(--text-secondary);
font-size: 14.5px;
line-height: 1.72;
}
.conversion-intent-card em {
margin-top: auto;
padding-top: 4px;
color: var(--gold-text, #806731);
font-style: normal;
font-size: 14px;
font-weight: 800;
}
.conversion-intent-card em i {
margin-left: 5px;
color: var(--gold-text, #806731);
transition: transform 0.2s ease;
}
.conversion-intent-card:hover em i { transform: translateX(4px); }
.conversion-intent-footer {
margin-top: 18px;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: var(--bg-warm);
border: 1px solid var(--border-light);
border-radius: 8px;
}
.conversion-intent-footer strong {
display: block;
margin-bottom: 2px;
color: var(--navy);
font-size: 16px;
}
.conversion-intent-footer span {
color: var(--text-secondary);
font-size: 14px;
}
.conversion-intent-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.conversion-intent-actions a {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
border-radius: 8px;
border: 1px solid var(--border-light);
background: #fff;
color: var(--navy);
font-size: 14px;
font-weight: 800;
}
.conversion-intent-actions a:first-child {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
}
.intent-next {
margin: 0 0 26px;
padding: 24px;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 22px;
align-items: center;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 8px;
}
.intent-next-copy > span {
display: inline-block;
margin-bottom: 8px;
color: var(--gold-text, #806731);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.intent-next-copy h2 {
margin: 0 0 10px;
color: var(--navy);
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.38;
}
.intent-next-copy p {
margin: 0;
color: var(--text-secondary);
font-size: 14.5px;
line-height: 1.75;
}
.intent-next-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.intent-next-card {
min-height: 116px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 4px 10px;
align-content: center;
padding: 14px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: #fbfaf7;
}
.intent-next-card:hover,
.intent-next-card:focus-visible {
border-color: rgba(184, 146, 74, 0.62);
background: #fff;
transform: translateY(-1px);
}
.intent-next-card i {
grid-row: 1 / span 2;
width: 36px;
height: 36px;
display: inline-grid;
place-items: center;
border-radius: 8px;
background: var(--gold-muted);
color: var(--gold-text, #806731);
}
.intent-next-card strong {
color: var(--navy);
font-size: 14.5px;
line-height: 1.35;
}
.intent-next-card span {
color: var(--text-muted);
font-size: 12.5px;
line-height: 1.45;
}
@media (max-width: 980px) {
.conversion-intent-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.intent-next {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.conversion-intent-hub {
padding-top: 58px !important;
padding-bottom: 58px !important;
}
.conversion-intent-grid,
.intent-next-grid {
grid-template-columns: 1fr;
}
.conversion-intent-card {
min-height: 0;
padding: 22px 0 4px;
}
.conversion-intent-card strong {
min-height: 0;
font-size: 18px;
}
.conversion-intent-footer {
align-items: stretch;
flex-direction: column;
}
.conversion-intent-actions,
.ksl-c-final-cta__actions {
flex-direction: column;
justify-content: stretch;
}
.conversion-intent-actions a {
width: 100%;
}
.intent-next-copy h2 {
font-size: 21px;
}
.intent-next {
padding: 20px;
}
.intent-next-card {
min-height: 0;
}
} @media (max-width: 768px) {
:root {
--header-h: 58px !important;
}
.site-header,
.site-header.site-header--hero,
.site-header.site-header--compact {
top: env(safe-area-inset-top, 0px) !important;
height: var(--header-h, 58px) !important;
transform: translateY(0) !important;
transition: transform 0.22s ease, background 0.28s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}
body.admin-bar .site-header,
body.admin-bar .site-header.site-header--hero,
body.admin-bar .site-header.site-header--compact {
top: calc(46px + env(safe-area-inset-top, 0px)) !important;
}
body.is-scrolling-down:not(.menu-open) .site-header {
transform: translateY(calc(-1 * (var(--header-h, 58px) + env(safe-area-inset-top, 0px)))) !important;
}
body.menu-open .site-header {
transform: translateY(0) !important;
}
.header-inner {
min-height: var(--header-h, 58px) !important;
padding-inline: 14px !important;
}
.logo-area {
min-width: 0 !important;
gap: 10px !important;
}
.logo-img {
height: 28px !important;
padding-right: 10px !important;
}
.logo-main {
font-size: 16px !important;
line-height: 1.1 !important;
padding-bottom: 0 !important;
max-width: calc(100vw - 112px) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.logo-main::after,
.logo-sub {
display: none !important;
}
.site-header .menu-toggle {
width: 42px !important;
height: 42px !important;
margin-right: -8px !important;
}
.site-header .gnb,
.site-header.site-header--hero .gnb,
.site-header.site-header--compact .gnb {
top: var(--ksl-mobile-menu-top, var(--header-h, 58px)) !important;
height: var(--ksl-mobile-menu-height, calc(100dvh - var(--header-h, 58px))) !important;
max-height: var(--ksl-mobile-menu-height, calc(100dvh - var(--header-h, 58px))) !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.is-scrolling-down:not(.menu-open) .site-header {
transform: translateY(0) !important;
}
} body.ksl-page-index .section-title,
body.ksl-page-index .quick-check-intro h2,
body.ksl-page-index .conversion-intent-head h2,
body.ksl-page-index .hero--pro .hero-lead {
word-break: keep-all !important;
overflow-wrap: break-word !important;
} @media (max-width: 992px) {
:root {
--ksl-fixed-cta-height: 54px;
}
body.has-fixed-cta,
body.ksl-page-index.has-fixed-cta,
body.has-fixed-cta.ksl-cta-light,
body.has-fixed-cta.ksl-cta-dark,
body.has-fixed-cta.has-ksl-desk-dock {
padding-bottom: calc(var(--ksl-fixed-cta-height) + 12px + env(safe-area-inset-bottom, 0px)) !important;
}
body.menu-open .fixed-cta-bar {
transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
pointer-events: none;
}
.fixed-cta-bar,
.fixed-cta-bar.fixed-cta-bar--compact,
.fixed-cta-bar.fixed-cta-bar--light,
.fixed-cta-bar.fixed-cta-bar--dark {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
background: rgba(5, 11, 24, 0.96) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 -8px 22px rgba(5, 11, 24, 0.24) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.fixed-cta-bar .fixed-cta-inner,
.fixed-cta-bar--compact .fixed-cta-inner {
width: 100% !important;
max-width: 640px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.fixed-cta-bar .cta-btn,
.fixed-cta-bar--compact .cta-btn,
.fixed-cta-bar--light .cta-btn,
.fixed-cta-bar--dark .cta-btn {
min-height: var(--ksl-fixed-cta-height) !important;
height: var(--ksl-fixed-cta-height) !important;
padding: 5px 2px !important;
border-radius: 8px !important;
border-right: 0 !important;
gap: 3px !important;
font-size: 11px !important;
}
.fixed-cta-bar .cta-icon {
width: 22px !important;
height: 22px !important;
margin-bottom: 1px !important;
font-size: 11px !important;
flex: 0 0 22px !important;
}
.fixed-cta-bar .cta-label-main {
max-width: 100% !important;
font-size: clamp(10px, 2.7vw, 11.5px) !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.fixed-cta-bar .cta-label-sub {
display: none !important;
}
}
@media (max-width: 360px) {
:root {
--ksl-fixed-cta-height: 50px;
}
.fixed-cta-bar,
.fixed-cta-bar.fixed-cta-bar--compact {
padding-left: 8px !important;
padding-right: 8px !important;
}
.fixed-cta-bar .fixed-cta-inner,
.fixed-cta-bar--compact .fixed-cta-inner {
gap: 4px !important;
}
.fixed-cta-bar .cta-icon {
width: 20px !important;
height: 20px !important;
font-size: 10px !important;
flex-basis: 20px !important;
}
.fixed-cta-bar .cta-label-main {
font-size: 10px !important;
}
}