/* ==================================================
   ASK NOW MAIN CSS - CLEANED FULL REPLACEMENT
   - 중복 override 정리
   - PC 메인 CSS 기준
   - 모바일/태블릿은 ns-main-responsive.css에서 별도 관리
================================================== */

/* ==============================
   00. Cafe24 Layout Reset
============================== */
#wrap,
#container,
#contents,
#container #contents {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

#container #contents > .section {
    max-width: 100% !important;
}

#container #contents .xans-layout-mobileaction,
#header,
.main_top_banner,
#topBanner,
[class*="top_banner"],
[class*="topBanner"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    background: #f3f0ff;
}

/* ==============================
   01. Common / Theme
============================== */
.ns-page {
    --theme: #4320cf;
    --theme-dark: #30149f;
    --theme-soft: rgba(67, 32, 207, .08);
    --theme-line: rgba(67, 32, 207, .18);
    --card-blue: #745cf1;
    --box-blue: #4320cf;
    --text: #111829;
    --muted: #555;

    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top center, #fff 0%, #f8f7ff 34%, #f0efff 100%);
}

.ns-page *,
.ns-page *::before,
.ns-page *::after {
    box-sizing: border-box;
}

.ns-page a {
    color: inherit;
    text-decoration: none;
}

.ns-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ns-section {
    position: relative;
    width: 100%;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

.ns-section:not(.ns-hero) {
    display: flex;
    align-items: center;
}

.ns-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ==============================
   02. Section Background
============================== */
.ns-intro,
.ns-service,
.ns-process {
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0%, rgba(250,250,255,.96) 35%, rgba(240,242,255,.90) 64%, rgba(207,211,255,.82) 100%),
        linear-gradient(90deg, #d7dcff 0%, #fafbff 28%, #ffffff 50%, #f6f6ff 72%, #d4d7ff 100%);
}

.ns-contact {
    background: linear-gradient(135deg, var(--theme) 0%, #755cff 100%);
}

/* ==============================
   03. Header
============================== */
.ns-header {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 1600px;
    height: 82px;
    margin: 0 auto;
    padding: 0 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #111;
}

.ns-logo,
.ns-logo a {
    font-family: "Roboto", sans-serif !important;
    font-size: 24px;
    font-weight: 900 !important;
    line-height: 1;
    letter-spacing: -0.04em !important;
    color: #111;
}

.ns-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 72px;
}

.ns-nav a {
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.ns-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 헤더는 회원가입만 노출 */
.ns-header-btn {
    display: none !important;
}

.ns-join-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    height: 42px !important;
    padding: 0 22px !important;
    border-radius: 5px !important;
    border: 1px solid var(--theme) !important;
    background: var(--theme) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .25s ease, background .25s ease, border-color .25s ease !important;
}

.ns-join-btn:hover {
    transform: translateY(-3px) !important;
    background: var(--theme-dark) !important;
    border-color: var(--theme-dark) !important;
    color: #fff !important;
}

.ns-join-btn::after,
.ns-btns a::after,
.ns-wide-btn::after,
.ns-contact-btn::after,
.asknow-intro-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}

.ns-join-btn:hover::after,
.ns-btns a:hover::after,
.ns-wide-btn:hover::after,
.ns-contact-btn:hover::after,
.asknow-intro-btn:hover::after {
    left: 130%;
}

/* ==============================
   04. Hero
============================== */
.ns-hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 900px !important;
    padding-bottom: 0;
}

.ns-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 43%, rgba(255,255,255,.98) 0%, rgba(248,249,255,.96) 32%, rgba(235,239,255,.88) 58%, rgba(200,211,255,.82) 100%),
        linear-gradient(90deg, #c9d4ff 0%, #f5f7ff 31%, #ffffff 50%, #f1f3ff 70%, #c7d2ff 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.ns-hero-content {
    position: absolute !important;
    z-index: 10;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(760px, 90%) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    color: #111;
}

.ns-kicker {
    margin: 0 0 18px;
    color: #111;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.ns-hero h1 {
    margin: 0 0 28px;
    color: #111;
    font-family: "Roboto", sans-serif !important;
    font-size: clamp(64px, 6.2vw, 88px);
    line-height: .95;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: -0.015em;
    font-variation-settings: "wdth" 100 !important;
}

.ns-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 300px;
    height: 34px;
    padding: 0 28px;
    margin: 0 0 44px;
    border: 1px solid rgba(98, 43, 255, .55);
    border-radius: 999px;
    background: rgba(255,255,255,.36);
    color: var(--theme);
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.ns-desc {
    max-width: 680px;
    margin: 0 auto;
    color: #22242b;
    font-size: 15px;
    line-height: 2.05;
    font-weight: 400;
    word-break: keep-all;
}

.ns-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 56px;
}

.ns-btns a,
.ns-wide-btn,
.ns-contact-btn,
.asknow-intro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 46px;
    padding: 0 22px;
    border-radius: 5px;
    background: var(--theme);
    color: #fff !important;
    border: 1px solid var(--theme);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}

.ns-btns a:nth-child(2) {
    background: rgba(126, 91, 244, .72);
    border-color: rgba(126, 91, 244, .72);
}

.ns-btns a:hover,
.ns-wide-btn:hover,
.ns-contact-btn:hover,
.asknow-intro-btn:hover {
    transform: translateY(-3px);
    background: var(--theme-dark);
    border-color: var(--theme-dark);
    color: #fff !important;
}

.ns-hero .ns-stat-bar {
    display: none;
}

/* ==============================
   05. Label / Square Motion
============================== */
.ns-badge::before,
.ns-label::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--theme);
    animation: nsSquareSpin 4s linear infinite;
}

.ns-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 30px;
    padding: 0 22px;
    margin-bottom: 26px;
    border-radius: 999px;
    border: 1px solid rgba(67,32,207,.35);
    background: rgba(67,32,207,.06);
    color: var(--theme);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

@keyframes nsSquareSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==============================
   06. Particle Flow
============================== */
.ns-speed {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.ns-speed span {
    position: absolute;
    left: -40px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--theme);
    box-shadow: 0 0 14px rgba(67, 32, 207, .72);
    opacity: 0;
    animation: nsParticleFlow 7s linear infinite;
}

.ns-speed span::before {
    content: "";
    position: absolute;
    right: 0;
    top: 1.5px;
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, rgba(67,32,207,.45), transparent);
    transform: translateX(-70px);
}

.ns-speed span:nth-child(1) { top: 18%; animation-delay: 0s; }
.ns-speed span:nth-child(2) { top: 24%; animation-delay: 1.2s; }
.ns-speed span:nth-child(3) { top: 31%; animation-delay: 2.4s; }
.ns-speed span:nth-child(4) { top: 38%; animation-delay: .6s; }
.ns-speed span:nth-child(5) { top: 45%; animation-delay: 1.8s; }
.ns-speed span:nth-child(6) { top: 52%; animation-delay: 3s; }
.ns-speed span:nth-child(7) { top: 59%; animation-delay: .3s; }
.ns-speed span:nth-child(8) { top: 66%; animation-delay: 1.5s; }
.ns-speed span:nth-child(9) { top: 73%; animation-delay: 2.7s; }
.ns-speed span:nth-child(10) { top: 80%; animation-delay: .9s; }
.ns-speed span:nth-child(n+11) { display: none; }

@keyframes nsParticleFlow {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
    12% { opacity: .7; }
    82% { opacity: .7; }
    100% { opacity: 0; transform: translate3d(calc(100vw + 120px), -24px, 0) scale(1); }
}

/* ==============================
   07. Hero / Reveal Motion
============================== */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .75s ease, transform .75s ease;
}

.reveal.is-visible,
.ns-loaded .ns-hero-content.reveal {
    opacity: 1;
    transform: translateY(0);
}

.ns-hero .ns-kicker,
.ns-hero h1,
.ns-hero .ns-badge,
.ns-hero .ns-desc,
.ns-hero .ns-btns {
    opacity: 1 !important;
    transform: translateY(0);
    animation-fill-mode: both !important;
    text-align: center !important;
}

.ns-loaded .ns-hero .ns-kicker { animation: heroTextUpOnly .65s ease .05s both !important; }
.ns-loaded .ns-hero h1 { animation: heroTextUpOnly .7s ease .15s both !important; }
.ns-loaded .ns-hero .ns-badge { animation: heroTextUpOnly .7s ease .25s both !important; }
.ns-loaded .ns-hero .ns-desc { animation: heroTextUpOnly .75s ease .35s both !important; }
.ns-loaded .ns-hero .ns-btns { animation: heroTextUpOnly .75s ease .45s both !important; }

@keyframes heroTextUpOnly {
    from { transform: translateY(22px); }
    to { transform: translateY(0); }
}

/* ==============================
   08. Section Typography
============================== */
.ns-section-title {
    text-align: center;
    margin-bottom: 44px;
}

.ns-section:not(.ns-hero) > .ns-inner > .ns-section-title h2,
.ns-section:not(.ns-hero) .ns-inner > .reveal > h2,
.asknow-diff-head h2,
.asknow-diff-body > .ns-section-title h3,
.ns-contact > .ns-inner > h2 {
    color: #111829;
    font-size: 42px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    word-break: keep-all !important;
    margin-top: 0px !important;
}

.ns-section:not(.ns-hero) > .ns-inner > .ns-section-title > p,
.ns-intro .ns-two-col > p,
.asknow-diff-head > p,
.asknow-diff-body > .ns-section-title > p,
.ns-contact > .ns-inner > p {
    color: #666;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    word-break: keep-all !important;
}

/* ==============================
   09. Intro CTA Section
============================== */
.ns-intro {
    position: relative !important;
    overflow: hidden !important;
}

.ns-two-col {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: center;
}

.ns-intro p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
    word-break: keep-all;
}

.asknow-intro-center {
    width: min(920px, 100%) !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.asknow-intro-center .ns-label {
    margin-bottom: 32px !important;
}

.asknow-intro-center h2 {
    margin: 0 !important;
    color: #111829 !important;
    font-size: 42px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
    word-break: keep-all !important;
}

.asknow-intro-point {
    display: block !important;
    margin-top: 20px !important;
    color: var(--theme) !important;
    font-size: 42px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
}

.asknow-intro-center p {
    max-width: 760px !important;
    margin: 34px auto 0 !important;
    color: #111829 !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    font-weight: 400 !important;
}

.asknow-intro-btn {
    min-width: 280px !important;
    margin-top: 72px !important;
}

.asknow-intro-motion .intro-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .72s ease, transform .72s ease;
    will-change: opacity, transform;
}

.asknow-intro-motion.is-visible .intro-fade {
    opacity: 1;
    transform: translateY(0);
}

.asknow-intro-motion.is-visible .intro-fade-1 { transition-delay: .05s; }
.asknow-intro-motion.is-visible .intro-fade-2 { transition-delay: .17s; }
.asknow-intro-motion.is-visible .intro-fade-3 { transition-delay: .29s; }
.asknow-intro-motion.is-visible .intro-fade-4 { transition-delay: .43s; }
.asknow-intro-motion.is-visible .intro-fade-5 { transition-delay: .58s; }

/* ==============================
   10. Difference Section - PC Fixed Layout
   - new HTML: copy / content separated
============================== */
.asknow-diff-section {
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 165px !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0%, rgba(250,250,255,.96) 35%, rgba(240,242,255,.90) 64%, rgba(207,211,255,.82) 100%),
        linear-gradient(90deg, #d7dcff 0%, #fafbff 28%, #ffffff 50%, #f6f6ff 72%, #d4d7ff 100%) !important;
}

.asknow-diff-main {
    grid-row: 1 / 2 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 100px 0 34px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content:center !important;
    padding-top:60px !important;
    gap: 30px !important;
    overflow: hidden !important;
    transform: none !important;
}

.asknow-diff-head {
    width: min(1180px, calc(100% - 80px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

.asknow-diff-head .ns-label {
    margin-bottom: 14px !important;
}

.asknow-diff-head h2 {
    margin: 0 0 10px !important;
    font-size: 42px !important;
    line-height: 1.2 !important;
}

.asknow-diff-head > p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.asknow-diff-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 22px 0 0 !important;
}

.asknow-diff-tabs button {
    height: 38px !important;
    padding: 0 24px !important;
    border: 1px solid rgba(67,32,207,.24) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.62) !important;
    color: var(--theme) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
}

.asknow-diff-tabs button:hover {
    transform: translateY(-2px) !important;
}

.asknow-diff-tabs button.is-active {
    background: var(--theme) !important;
    border-color: var(--theme) !important;
    color: #fff !important;
}

.asknow-diff-scenes {
    width: 100% !important;
    height: 430px !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

.asknow-diff-scene {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(18px) !important;
    transition: opacity .45s ease, transform .45s ease, visibility .45s ease !important;
    overflow: visible !important;
}

.asknow-diff-scene.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.asknow-diff-body {
    width: min(1120px, calc(100% - 80px)) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
}

.asknow-diff-copy {
    width: 100% !important;
    height: 122px !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
}

.ns-page .asknow-diff-section .asknow-diff-copy h3 {
    margin: 0 0 14px !important;
    color: #111829 !important;
    font-size: 32px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important;
    word-break: keep-all !important;
}

.asknow-diff-copy p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    word-break: keep-all !important;
}

.asknow-diff-content {
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
}

.asknow-flow,
.asknow-speed-flow,
.asknow-compare,
.asknow-media-grid {
    margin: 0 auto !important;
}

/* ==============================
   11. Difference Content Components
============================== */
.asknow-flow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 34px !important;
    transform: none !important;
}

.asknow-flow i {
    display: block;
    width: 94px;
    height: 1px;
    background: var(--theme);
    opacity: .62;
}

.asknow-data-card,
.asknow-media-grid article,
.asknow-service-grid article,
.asknow-compare,
.asknow-clock {
    border: 1px solid rgba(67, 32, 207, .18);
    border-radius: 10px;
    background: rgba(255,255,255,.48);
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.asknow-data-card {
    width: 244px;
    min-height: 205px !important;
    padding: 34px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.asknow-data-card:hover,
.asknow-media-grid article:hover,
.asknow-service-grid article:hover {
    transform: translateY(-5px);
    border-color: var(--theme);
    background: rgba(255,255,255,.9);
}

.asknow-data-card span {
    display: inline-block;
    color: var(--theme);
    font-size: 32px;
    font-weight: 800;
}

.asknow-data-card strong {
    margin-top: 20px;
    display: block;
    color: #111829;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.06em;
}

.asknow-data-card.is-main strong {
    color: var(--theme);
}

.asknow-data-card p {
    margin-top: 16px;
    color: #555;
    font-size: 15px;
    line-height: 1.55;
}

.skt-logo {
    max-width: 50%;
    margin: 0 auto;
}

.asknow-target-list {
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asknow-target-list li {
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-bottom: 8px;
    padding: 0 22px;
    border: 1px solid rgba(67,32,207,.20);
    border-radius: 8px;
    background: rgba(255,255,255,.46);
    color: var(--theme);
    font-size: 16px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.asknow-target-list li:hover {
    transform: translateX(6px);
    border-color: var(--theme);
    background: rgba(255,255,255,.82);
}

.asknow-target-list em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--theme);
    font-style: normal;
    font-size: 15px;
    line-height: 1;
}

.asknow-speed-box,
.asknow-clock,
.asknow-speed-copy {
    display: none !important;
}

.asknow-speed-flow {
    position: relative;
    width: min(900px, 100%) !important;
    display: grid !important;
    grid-template-columns: 220px 1fr 220px !important;
    align-items: stretch !important;
    gap: 34px !important;
    transform: none !important;
}

.asknow-speed-flow::before {
    content: "";
    position: absolute;
    left: 220px;
    right: 220px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(67,32,207,.45), transparent);
    z-index: 0;
}

.asknow-speed-card,
.asknow-speed-center {
    position: relative;
    z-index: 2;
    min-height: 220px !important;
    padding: 28px 24px;
    border-radius: 18px;
    text-align: center;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.asknow-speed-card {
    border: 1px solid rgba(67,32,207,.18);
    background: rgba(255,255,255,.38);
    backdrop-filter: blur(8px);
}

.asknow-speed-card:hover {
    transform: translateY(-5px);
    border-color: rgba(67,32,207,.45);
    background: rgba(255,255,255,.72);
}

.asknow-speed-card b,
.asknow-media-grid b,
.asknow-service-grid b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--theme);
    color: #fff;
    border: 0;
    font-size: 24px;
    font-weight: 800;
    transition: transform .3s ease;
}

.asknow-speed-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--theme);
    font-size: 14px;
    font-weight: 700;
}

.asknow-speed-card strong {
    display: block;
    color: #111829;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.asknow-speed-card p {
    margin-top: 14px;
    color: #626773;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
}

.asknow-speed-center {
    z-index: 3;
    padding: 30px 24px;
    background: linear-gradient(135deg, rgba(67,32,207,.95), rgba(116,92,241,.88));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.asknow-speed-center em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}

.asknow-speed-center strong {
    display: block;
    color: #fff;
    font-size: 30px;
    line-height: 1.32;
    font-weight: 800;
    letter-spacing: -0.04em;
    word-break: keep-all;
}

.asknow-compare {
    width: min(920px, 100%) !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: rgba(255,255,255,.48) !important;
    border-color: rgba(67,32,207,.22) !important;
    transform: none !important;
}

.asknow-compare div {
    min-height: 54px;
    padding: 17px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(0,0,0,.25);
    background: rgba(255,255,255,.42) !important;
    text-align: center;
    color: #2d2d2d;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    word-break: keep-all;
}

.asknow-compare div:nth-child(2n) {
    border-right: 0;
    color: var(--theme);
}

.asknow-compare div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.asknow-compare .head {
    color: #fff !important;
    font-weight: 700;
}

.asknow-compare .head.gray {
    background: rgba(17,17,17,.46) !important;
}

.asknow-compare .head.theme {
    background: var(--theme) !important;
}

.asknow-compare div:nth-child(2n):not(.head) {
    background: rgba(67,32,207,.055) !important;
    color: var(--theme) !important;
}

.asknow-media-grid {
    width: min(1040px, 100%) !important;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px !important;
    transform: none !important;
}

.asknow-media-grid article {
    min-height: 178px !important;
    padding: 22px 16px !important;
    text-align: center;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.asknow-media-grid b {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 14px !important;
    font-size: 20px !important;
}

.asknow-media-grid article:hover b,
.asknow-service-grid article:hover b {
    transform: scale(1.08) rotate(3deg);
}

.asknow-media-grid strong {
    display: block;
    margin-bottom: 12px;
    color: #111829;
    font-size: 22px !important;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.asknow-media-grid p {
    color: #5f6572;
    font-size: 13px !important;
    line-height: 1.5 !important;
    word-break: keep-all;
}

/* ==============================
   12. Difference Bottom Strip
============================== */
.asknow-diff-strips {
    grid-row: 2 / 3 !important;
    position: relative !important;
    width: 100% !important;
    height: 165px !important;
    min-height: 165px !important;
    overflow: hidden !important;
    z-index: 20 !important;
}

.asknow-scene-strip,
.asknow-bottom-strip {
    position: absolute !important;
    inset: 0 !important;
    height: 165px !important;
    min-height: 165px !important;
    padding: 0 40px !important;
    background: linear-gradient(135deg, var(--theme) 0%, #3521b7 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #fff !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease !important;
    pointer-events: none !important;
}

.asknow-scene-strip.is-active,
.asknow-bottom-strip.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.asknow-scene-strip > div,
.asknow-bottom-strip > div {
    width: min(360px, 32%) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.asknow-scene-strip > div + div::before,
.asknow-bottom-strip > div + div::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 1px !important;
    height: 76px !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,.3) !important;
}

.asknow-scene-strip strong,
.asknow-bottom-strip strong {
    display: block !important;
    color: #fff !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

.asknow-scene-strip p,
.asknow-bottom-strip p {
    margin-top: 10px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
}

/* ==============================
   13. Service Section
   - 가로폭 확장
   - 5개 카드 가로배열 유지
   - 카드 높이 기존에 가깝게 압축
============================== */
.ns-service {
    height: auto !important;
    min-height: 100vh !important;
    padding: 96px 0 96px !important;
}

.ns-service .ns-inner {
    max-width: 1720px !important;
}

.asknow-service-grid {
    width: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.asknow-service-grid article {
    min-width: 0 !important;
    min-height: 430px !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(67, 32, 207, .18) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .54) !important;
    backdrop-filter: blur(8px) !important;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.asknow-service-grid article:hover {
    transform: translateY(-6px);
    border-color: rgba(67, 32, 207, .34) !important;
    background: rgba(255, 255, 255, .72) !important;
}

.asknow-service-grid b {
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: var(--theme) !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.asknow-service-grid span {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--theme) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    word-break: keep-all !important;
}

.asknow-service-grid h3 {
    margin: 0 0 14px !important;
    color: #111829 !important;
    font-size: 23px !important;
    line-height: 1.24 !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
    word-break: keep-all !important;
}

.asknow-service-grid p {
    min-height: 110px !important;
    margin: 0 0 16px !important;
    color: #4f5560 !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    word-break: keep-all !important;
}

.asknow-service-grid ul {
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(67, 32, 207, .14) !important;
    list-style: none !important;
}

.asknow-service-grid li {
    position: relative !important;
    padding-left: 12px !important;
    margin-bottom: 6px !important;
    color: #4f5560 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
}

.asknow-service-grid li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--theme);
}

.asknow-service-grid li:last-child {
    margin-bottom: 0 !important;
}

.asknow-service-grid em {
    display: block !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    color: #3f4350 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-style: normal !important;
    font-weight: 600 !important;
    word-break: keep-all !important;
}
/* ==============================
   14. Process Section
   - 새 가로형 프로세스 구조
============================== */
.ns-process:not(.asknow-panel) {
    height: auto !important;
    min-height: 100vh !important;
    padding: 120px 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0%, rgba(250,250,255,.96) 35%, rgba(240,242,255,.90) 64%, rgba(207,211,255,.82) 100%),
        linear-gradient(90deg, #d7dcff 0%, #fafbff 28%, #ffffff 50%, #f6f6ff 72%, #d4d7ff 100%) !important;
}

.ns-process .ns-inner{
    max-width:1120px !important;
}

.asknow-process-table{
    width:min(1040px,100%) !important;
    margin:0 auto !important;
    display:grid !important;
    gap:14px !important;
}

.asknow-process-row{
    min-height:82px !important;
    padding:0 36px !important;
    display:grid !important;
    grid-template-columns:52px 190px 1fr !important;
    align-items:center !important;
    column-gap:30px !important;
    border:1px solid rgba(67,32,207,.18) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.48) !important;
    backdrop-filter:blur(8px) !important;
    transition:transform .28s ease, border-color .28s ease, background .28s ease !important;
}

.asknow-process-row:hover{
    transform:translateY(-5px) !important;
    border-color:var(--theme) !important;
    background:rgba(255,255,255,.9) !important;
}

.asknow-process-row > span{
    width:52px !important;
    height:52px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:10px !important;
    background:var(--theme) !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:800 !important;
}

.asknow-process-row > strong{
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border:0 !important;
    background:none !important;
    color:#111829 !important;
    font-size:20px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    letter-spacing:-0.04em !important;
    text-align:left !important;
}

.asknow-process-row > p{
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    border:0 !important;
    background:none !important;
    color:#555 !important;
    font-size:15px !important;
    line-height:1.65 !important;
    font-weight:400 !important;
    text-align:left !important;
    white-space:nowrap !important;
}

.asknow-process-row:hover > strong{
    color:var(--theme) !important;
}

.asknow-process-cta{
    width:100% !important;
    margin:40px auto 0 !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
}

.asknow-process-cta > div{
    display:contents !important;
}

.asknow-process-cta a,
.asknow-process-cta a.wide{
    width:220px !important;
    max-width:none !important;
    min-width:220px !important;
    height:52px !important;
    margin:0 !important;
    padding:0 22px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    overflow:hidden !important;
    border-radius:5px !important;
    border:1px solid var(--theme) !important;
    background:var(--theme) !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1 !important;
    transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease !important;
}

.asknow-process-cta a::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:-120% !important;
    width:80% !important;
    height:100% !important;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent) !important;
    transform:skewX(-18deg) !important;
    transition:left .55s ease !important;
}

.asknow-process-cta a:hover{
    transform:translateY(-3px) !important;
    background:var(--theme-dark) !important;
    border-color:var(--theme-dark) !important;
    color:#fff !important;
}

.asknow-process-cta a:hover::after{
    left:130% !important;
}

/* ==============================
   15. Contact Section
============================== */
.ns-contact {
    color: #fff;
    text-align: center;
}

.ns-contact .ns-label {
    color: #fff;
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.08);
}

.ns-contact .ns-label::before {
    background: #fff;
}

.ns-contact h2 {
    margin: 0 !important;
}

/* CONTACT Ask Now Title Override */

body #nsPage.asknow-page .ns-contact h2.con-title,
body .ns-page .ns-contact h2.con-title,
section#contact.ns-contact h2.con-title{
    font-size:88px !important;
    font-weight:900 !important;
    line-height:0.95 !important;
    letter-spacing:-0.06em !important;
    margin:0 !important;
    color:#111829 !important;
    font-family:"Roboto","Inter","Noto Sans KR",sans-serif !important;
}

@media (max-width:767px){
    body #nsPage.asknow-page .ns-contact h2.con-title,
    body .ns-page .ns-contact h2.con-title,
    section#contact .ns-contact h2.con-title{
        font-size:54px !important;
        line-height:1.02 !important;
        margin:0 0 14px !important;
    }
}

.ns-contact p {
    max-width: 760px;
    margin: 28px auto 0;
    color: rgba(255,255,255,.82) !important;
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
}

.ns-contact-btns {
    margin-top: 44px;
}

.ns-contact .ns-contact-btn {
    min-width: 160px !important;
    height: 46px !important;
    background: var(--theme) !important;
    color: #fff !important;
    border-color: var(--theme) !important;
}


/* ==========================
   Ask Now Quick Help Panel
========================== */

.asknow-help {
    position: fixed !important;
    right: 38px !important;
    bottom: 38px !important;
    z-index: 9999 !important;
}

/* Floating Button */
.asknow-help-toggle {
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #4320cf !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    transition: transform .25s ease, background .25s ease !important;
}

.asknow-help-toggle:hover {
    transform: translateY(-3px) !important;
    background: #30149f !important;
}

.asknow-help-toggle svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

/* Panel */
.asknow-help-panel {
    position: absolute !important;
    right: 0 !important;
    bottom: 76px !important;

    width: 300px !important;
    overflow: hidden !important;

    border-radius: 22px !important;
    background: #fff !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(14px) scale(.98) !important;
    transform-origin: right bottom !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
}

.asknow-help.active .asknow-help-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.asknow-help-panel,
.asknow-help-panel * {
    box-sizing: border-box !important;
}

/* Head */
.asknow-help-head {
    position: relative !important;
    min-height: 118px !important;
    padding: 22px 22px 20px !important;

    background: linear-gradient(135deg, #4320cf 0%, #30149f 100%) !important;
    color: #fff !important;
}

.asknow-help-close {
    position: absolute !important;
    right: 16px !important;
    top: 14px !important;
    z-index: 2 !important;

    width: 30px !important;
    height: 30px !important;

    border: 0 !important;
    background: transparent !important;
    color: #fff !important;

    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.asknow-help-title {
    margin: 0 !important;
    padding-right: 28px !important;

    color: #fff !important;
    font-size: 24px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
}

.asknow-help-title span {
    display: block !important;
    margin-top: 6px !important;

    color: rgba(255,255,255,.86) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

/* Body */
.asknow-help-body {
    padding: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f6f4ff 0%, #fff 62%) !important;
}

.asknow-view {
    display: none !important;
}

.asknow-view.is-active {
    display: block !important;
}

/* Home Buttons */
.asknow-main-list {
    display: grid !important;
    gap: 10px !important;
}

.asknow-main-list button {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    border: 1px solid rgba(67,32,207,.14) !important;
    border-radius: 13px !important;
    background: #fff !important;

    color: #172033 !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}

.asknow-main-list button:hover {
    background: #f6f4ff !important;
    color: #4320cf !important;
    border-color: rgba(67,32,207,.28) !important;
}

.asknow-main-list em {
    margin-right: 8px !important;
    font-style: normal !important;
}

.asknow-main-list b {
    color: #4320cf !important;
}

/* Sub View */
.asknow-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin: 0 0 10px !important;

    border: 0 !important;
    background: transparent !important;
    color: #111829 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.asknow-view h3 {
    margin: 0 0 14px !important;
    color: #111829 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
}

.asknow-section-links {
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.asknow-section-links a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    border: 1px solid rgba(67,32,207,.14) !important;
    border-radius: 12px !important;
    background: #fff !important;

    color: #172033 !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    overflow: hidden !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}

.asknow-section-links a:hover {
    background: #f6f4ff !important;
    color: #4320cf !important;
    border-color: rgba(67,32,207,.28) !important;
}

.asknow-section-links a::after {
    content: "›" !important;
    flex: 0 0 auto !important;
    margin-left: 10px !important;

    color: #4320cf !important;
    font-size: 20px !important;
    line-height: 1 !important;

    transform: none !important;
}

/* Contact View */
.asknow-contact-box {
    display: grid !important;
    gap: 10px !important;
}

.asknow-contact-box a {
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}

.asknow-contact-box .primary {
    background: linear-gradient(135deg, #4320cf 0%, #30149f 100%) !important;
    color: #fff !important;
}

.asknow-contact-box .secondary {
    background: #fff !important;
    border: 1px solid rgba(67,32,207,.18) !important;
    color: #4320cf !important;
}


@media (max-width: 1024px) {
    .asknow-help { display: none !important; }
}

/* ==============================
   FAQ
============================== */
.ns-faq {
    background: #111829 !important;
    color: #fff !important;
}

.ns-faq .ns-inner {
    max-width: 980px !important;
}

.ns-faq .ns-section-title {
    margin-bottom: 36px !important;
}

.ns-faq .ns-label {
    color: #fff !important;
    border-color: rgba(255,255,255,.32) !important;
    background: rgba(255,255,255,.1) !important;
}

.ns-faq .ns-label::before {
    background: #4320cf !important;
}

.ns-faq h2,
.ns-faq .ns-section-title h2 {
    color: #fff !important;
}

.ns-faq .ns-section-title p {
    color: rgba(255,255,255,.72) !important;
}

.ns-faq-list {
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
}

.ns-faq-list button {
    width: 100% !important;
    padding: 24px 28px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    background: transparent !important;
    color: #fff !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

.ns-faq-list div {
    display: block !important;
    max-height: 0 !important;
    padding: 0 28px !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    overflow: hidden !important;
    opacity: 0 !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    transition:
        max-height .36s ease,
        opacity .24s ease,
        padding-top .32s ease,
        padding-bottom .32s ease !important;
}

.ns-faq-list button.is-open + div {
    max-height: 220px !important;
    padding-top: 18px !important;
    padding-bottom: 26px !important;
    opacity: 1 !important;
}

/* ==============================
   Ask Now Difference Scroll Scene
   - 탭 메뉴를 클릭 요소보다 진행 표시처럼 보이게
   - 스크롤 시 한 페이지 안에서 장면이 바뀌는 느낌
============================== */

.asknow-diff-section {
    overscroll-behavior: contain;
}

.asknow-diff-tabs {
    pointer-events: none !important;
}

.asknow-diff-tabs button {
    cursor: default !important;
}

.asknow-diff-scene {
    transform: translateY(34px) scale(.985) !important;
    transition:
        opacity .58s ease,
        transform .58s ease,
        visibility .58s ease !important;
}

.asknow-diff-scene.is-active {
    transform: translateY(0) scale(1) !important;
}

.asknow-scene-strip {
    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease !important;
}

/* 섹션 이동용 탭만 PC에서 숨김 */
.asknow-section-nav {
    display: none !important;
}

@media (max-width: 767px) {
    .asknow-section-nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        margin: 0 0 28px !important;
    }
}


/* Difference 장면 제목 크기만 최종 덮어쓰기 */
.ns-page .asknow-diff-section .asknow-diff-body h3{
    font-size:32px !important;
    line-height:1.18 !important;
}

.asknow-diff-main{
    padding-top:60px !important;
}

.asknow-diff-copy{
    margin-bottom:64px !important;
}


/* ==================================================
   일반 섹션 타이틀 정리
   - Why Ask Now 제외
================================================== */
.ns-page .ns-service .ns-section-title,
.ns-page .ns-process .ns-section-title,
.ns-page .ns-faq .ns-section-title{
    margin-bottom:44px !important;
    text-align:center !important;
}

.ns-page .ns-service .ns-section-title .ns-label,
.ns-page .ns-process .ns-section-title .ns-label,
.ns-page .ns-faq .ns-section-title .ns-label{
    margin-bottom:26px !important;
}

.ns-page .ns-service .ns-section-title h2,
.ns-page .ns-process .ns-section-title h2,
.ns-page .ns-faq .ns-section-title h2{
    margin:0 !important;
    padding:0 !important;
    color:#111829 !important;
    font-size:42px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    letter-spacing:-0.04em !important;
}

.ns-page .ns-faq .ns-section-title h2{
    color:#fff !important;
}

.ns-page .ns-service .ns-section-title p,
.ns-page .ns-process .ns-section-title p,
.ns-page .ns-faq .ns-section-title p{
    margin:18px 0 0 !important;
    padding:0 !important;
    color:#666 !important;
    font-size:16px !important;
    line-height:1.7 !important;
    font-weight:400 !important;
}

.ns-page .ns-faq .ns-section-title p{
    color:rgba(255,255,255,.72) !important;
}

/* ==================================================
   Hero 높이 / 중앙 정렬 복구
================================================== */

.ns-hero{
    height:100vh !important;
    min-height:900px !important;
    padding:0 !important;
    overflow:hidden !important;
}

/* 헤더를 히어로 높이 계산에서 제외 */
.ns-hero .ns-header{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) !important;
}

/* 실제 콘텐츠 중앙 정렬 */
.ns-hero-content{
    top:52% !important;
    transform:translate(-50%, -50%) !important;
}


/* ==================================================
   Difference Media Card 번호 제거 + 여백 재정렬
================================================== */

.asknow-media-grid b{
    display:none !important;
}

.asknow-media-grid article{
    min-height:200px !important;
    padding:28px 18px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

.asknow-media-grid strong{
    margin:0 0 12px !important;
}

.asknow-media-grid p{
    margin:0 !important;
}

/* Why Ask Now 하단 보라띠는 항상 표시 */
.asknow-diff-strips{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}

.asknow-diff-strips.reveal{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}

/* =========================
   Contact Final - Main Style
========================= */
.ns-page .ns-contact{
    min-height:100vh !important;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 42%, rgba(67,32,207,.10) 100%),
        linear-gradient(90deg,#c8d7ff 0%,#f7f6ff 50%,#c8d7ff 100%) !important;
    overflow:hidden !important;
}

.ns-page .ns-contact > .ns-inner{
    width:100% !important;
    max-width:none !important;
    min-height:100vh !important;
    padding:0 40px !important;
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

.ns-page .ns-contact-kicker{
    margin:0 0 22px !important;
    color:#111829 !important;
    font-size:16px !important;
    font-weight:800 !important;
}

.ns-hero h1 {
    margin: 0 0 28px;
    color: #111;
    font-family: "Roboto", sans-serif !important;
    font-size: clamp(64px, 6.2vw, 88px);
    line-height: .95;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: -0.015em;
    font-variation-settings: "wdth" 100 !important;
}

.ns-page .ns-contact-badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    min-width:310px !important;
    height:38px !important;
    margin:22px 0 58px !important;
    border:1px solid rgba(67,32,207,.36) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.5) !important;
    color:var(--theme) !important;
    font-size:14px !important;
    font-weight:800 !important;
}

.ns-page .ns-contact-badge::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:2px;
    background:var(--theme);
    animation:nsSquareSpin 4s linear infinite;
}

.ns-page .ns-contact-desc{
    margin:0 0 58px !important;
    color:#111829 !important;
    font-size:15px !important;
    line-height:1.7 !important;
    font-weight:600 !important;
}

.ns-page .ns-contact-btns{
    width:360px !important;
    margin:0 auto 92px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
}

.ns-page .ns-contact-btns a{
    height:44px !important;
    border-radius:5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:var(--theme) !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    text-decoration:none !important;
    transition:transform .25s ease, background .25s ease;
}

.ns-page .ns-contact-btns a:hover{
    transform:translateY(-3px) !important;
    background:#30149f !important;
}

.ns-page .ns-contact-btns .ns-btn-wide{
    grid-column:1 / -1 !important;
}

.ns-page .ns-contact-logos{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:44px !important;
}

.ns-page .ns-contact-logos img{
    display:block !important;
    max-width:170px !important;
    max-height:48px !important;
    object-fit:contain !important;
}

@media(max-width:767px){
    .ns-page .ns-contact > .ns-inner{
        min-height:100svh !important;
        padding:80px 20px !important;
    }

    .ns-page .ns-contact-kicker{
        font-size:13px !important;
        margin-bottom:18px !important;
    }

    .ns-page .ns-contact h2{
        font-size:58px !important;
    }

    .ns-page .ns-contact-badge{
        min-width:240px !important;
        height:32px !important;
        margin:18px 0 42px !important;
        font-size:12px !important;
    }

    .ns-page .ns-contact-desc{
        margin-bottom:38px !important;
        font-size:13px !important;
    }

    .ns-page .ns-contact-btns{
        width:100% !important;
        max-width:300px !important;
        margin-bottom:58px !important;
    }

    .ns-page .ns-contact-logos{
        gap:20px !important;
    }

    .ns-page .ns-contact-logos img{
        max-height:34px !important;
    }
}

/* Contact 버튼 - 메인 버튼 호버 효과 동일 적용 */
.ns-page .ns-contact-btns a{
    position:relative !important;
    overflow:hidden !important;
}

.ns-page .ns-contact-btns a::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:-120% !important;
    width:80% !important;
    height:100% !important;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.32),
        transparent
    ) !important;
    transform:skewX(-18deg) !important;
    transition:left .55s ease !important;
}

.ns-page .ns-contact-btns a:hover::after{
    left:130% !important;
}

.ns-page .ns-contact-btns a:hover{
    transform:translateY(-3px) !important;
    background:#30149f !important;
}

/* =====================================
   FINAL OVERRIDE - Contact 버튼 3열 고정
===================================== */

html body.home main#nsPage.ns-page.asknow-page section#contact.ns-contact div.ns-inner div.ns-contact-btns{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:16px !important;
    width:900px !important;
    max-width:900px !important;
    margin:40px auto 0 !important;
    padding:0 !important;
}

html body.home main#nsPage.ns-page.asknow-page section#contact.ns-contact div.ns-inner div.ns-contact-btns > a{
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:56px !important;
    margin:0 !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1 !important;
}

html body.home main#nsPage.ns-page.asknow-page section#contact.ns-contact div.ns-inner div.ns-contact-btns > a.ns-btn-wide{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
}

/* =====================================
   Process 하단 버튼 즉시 노출
===================================== */

#nsPage.asknow-page .asknow-process-cta{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
}


/* =========================
   Main Header Login Link
========================= */

.ns-header-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:42px !important;
    padding:0 18px !important;

    border-radius:5px !important;
    color:#4320cf !important;

    font-size:13px !important;
    font-weight:700 !important;
    line-height:1 !important;
    text-decoration:none !important;

    transition:.25s ease !important;
}

.ns-header-link:hover{
    background:rgba(67,32,207,.08) !important;
}

@media(max-width:767px){
    .ns-header-actions{
        gap:6px !important;
    }

    .ns-header-link{
        height:34px !important;
        padding:0 10px !important;
        font-size:11px !important;
    }
}


/* =========================
   Mobile Hero Report Button
========================= */

.ns-btns .ns-btn-report{
    display:none !important;
}

@media(max-width:1024px){
    .ns-btns .ns-btn-report{
        display:inline-flex !important;
    }
}

@media(max-width:767px){
    .ns-btns{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
        width:min(300px,100%) !important;
        margin:34px auto 0 !important;
    }

    .ns-btns a{
        width:100% !important;
        min-width:0 !important;
        height:48px !important;
        margin:0 !important;
        border-radius:5px !important;
    }

    .ns-btns .ns-btn-report{
        background:#4320cf !important;
        border-color:#4320cf !important;
        color:#fff !important;
    }
}