:root {
    --maincolor: #1e3d73;
    --subcolor: #193563;
    --bgcolor: #f7f7f7;
    --bgcolor2: #eef2f8;

    --text-color1: #262626;
    --text-color2: #757575;

    --main-gradient: linear-gradient(135deg, var(--maincolor) 0%, var(--subcolor) 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
}

html,
body {
    width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    padding-top: 70px;
    position: relative;
}

.hide-pc {
    display: none !important;
}

.hide-mobile {
    display: block !important;
}

.title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 50px;
    color: var(--text-color2);
}

/* 스크롤 애니메이션 */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
    visibility: hidden;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 딜레이 클래스 */
.delay-200 {
    transition-delay: 0.2s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-800 {
    transition-delay: 0.8s;
}

/* ================================== */

/* 헤더 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.header-container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo a {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    color: var(--text-color1);
}

.header-logo img {
    height: 28px;
    width: auto;
}

.nav-menu {
    position: relative;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

.nav-menu .close-btn {
    display: none;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-list a {
    text-decoration: none;
    color: var(--text-color1);
    font-size: 18px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.nav-list a:hover {
    color: var(--maincolor);
}

.mobile-buttons {
    display: none;
    gap: 1rem;
}

.mobile-left-btn,
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color1);
    padding: 0.5rem;
}

/* ================ 히어로 배너 (미니멀 · 화이트) ================ */
.hero-banner {
    background: #ffffff;
    padding: 92px 0 84px;
    margin-bottom: 0;
    text-align: center;
}

.hero-banner .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 상단 라벨 */
.hero-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #193563;
    letter-spacing: 0.2px;
    padding: 7px 16px;
    border: 1px solid #d3ddec;
    background: #f4f7fb;
    border-radius: 50px;
    margin-bottom: 28px;
}

/* 메인 타이틀 */
.hero-title {
    font-size: 46px;
    font-weight: 800;
    color: #191919;
    line-height: 1.3;
    letter-spacing: -1.6px;
    margin: 0 0 20px;
}

.hero-title .accent {
    color: #193563;
}

/* 1줄: 갈색 그라데이션 텍스트 (#3f61a0 → 찐한 브라운) */
.hero-title .grad-brown {
    background: linear-gradient(95deg, #3f61a0 0%, #1c3a6a 52%, #0f2340 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 2줄: 검정색 */
.hero-title .line-black {
    color: #111111;
}

/* 설명 */
.hero-desc {
    font-size: 18px;
    font-weight: 500;
    color: #3f61a0;
    line-height: 1.65;
    letter-spacing: -0.3px;
    margin: 0 0 12px;
}

/* 신뢰 포인트 라인 */
.hero-points {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 42px;
}

.hero-points span:not(.dot) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: #333333;
}

.hero-points i {
    font-size: 12px;
    color: #193563;
}

.hero-points .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d9d9d9;
}

/* 하단 보조 문구 */
.hero-subnote {
    margin-top: 16px;
    font-size: 13px;
    color: #b3b3b3;
    letter-spacing: -0.2px;
}

/* 하단 모델 이미지 */
.hero-model-wrap {
    margin-top: -10px;
}

.hero-model-img {
    display: block;
    width: 100%;
    max-width: 430px;
    height: auto;
    margin: 0 auto;
}

/* 혁신금융서비스 지정 인증 배지 */
.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 9px 18px 9px 13px;
    background: #f1f1f2;
    border: 1px solid #e3e3e5;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.cert-badge-emblem {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

/* 3칸 정보 스트립 (외곽선 없이 구분선만) */
.hero-stats {
    display: flex;
    align-items: stretch;
    max-width: 560px;
    margin: -8px auto 0;
}

.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 10px;
    position: relative;
}

/* 칸 사이 구분선: 위=아이콘 상단 ~ 아래=텍스트 하단 */
.hero-stat + .hero-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 1.5px;
    background: #e2e2e2;
    border-radius: 1px;
}

.hero-stat i {
    height: 68px;
    line-height: 68px;
    font-size: 40px;
    color: var(--maincolor);
    margin-bottom: 6px;
}

.hero-stat .hs-img {
    height: 68px;
    width: auto;
    object-fit: contain;
    margin-bottom: 6px;
}

.hero-stat .hs-label {
    font-size: 18px;
    font-weight: 500;
    color: #9a9a9a;
    letter-spacing: -0.2px;
}

.hero-stat .hs-value {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.3px;
}

.hero-stat .hs-value.accent {
    color: #111111;
}

.hero-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.hero-partners img {
    max-height: 36px;
    width: auto;
    opacity: 0.85;
}

/* ================ 메인 ================ */
main {
    margin: 0 auto;
}

.main-top {
    background: var(--bgcolor2);
    padding-bottom: 30px;
    position: relative;
    overflow: visible;
    background-size: cover;
    background-attachment: fixed;
}

.main-top .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.main-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-content: space-around;
    padding: 50px 50px 0px;
    height: 520px;
}

.main-top .main-top-txt {}

.main-top .main-top-txt .main-title {
    font-family: "SBAggro", sans-serif;
    font-size: 58px;
    font-weight: 700;
    color: var(--maincolor);
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.main-top .main-top-txt .highlight {
    font-weight: 500;
    text-shadow: none;
    color: #fff;
    line-height: 0.7;

    position: relative;
    display: inline-block;
    z-index: 1;

    cursor: pointer;
    pointer-events: auto;
}

.main-top .main-top-txt .highlight.bg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 53, 99, 0.8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.main-top:hover .main-top-txt .highlight.bg::before {
    transform: scaleX(1);
}

.main-top .main-top-txt .main-subtitle {
    font-size: 24px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    margin-bottom: 0;
}

.main-top .main-top-img {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.main-top .main-top-img img {
    width: 380px;
    height: auto;
    object-fit: contain;
}

/* 통계 카드 */
.main-top-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    background-color: rgba(255, 255, 255);
    border-radius: 20px;
    padding: 30px 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: -90px;
    z-index: 1;
}

.main-top-stats .stat-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.main-top-stats .stat-item:not(:last-of-type)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background-color: #e0e0e0;
}

.main-top-stats .stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.main-top-stats .stat-number:hover {
    color: var(--maincolor);
}

.main-top-stats .stat-unit {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color2);
}

.main-top-stats .stat-label {
    display: block;
    font-size: 14px;
    color: var(--text-color2);
    font-weight: 500;
}

.main-top-stats .stat-note {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 11px;
    color: var(--text-color2);
    font-weight: 400;
}


/* 메인 introduce 섹션 */
.main-introduce {
    scroll-margin-top: 70px;
    padding-top: 110px;
    padding-bottom: 80px;
    background-color: #fff;
}

/* ================ 비교 섹션 ================ */
.compare-section {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.compare-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.compare-title {
    text-align: center;
    margin-bottom: 50px;
}

.compare-title .title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 12px;
    line-height: 1.3;
}

.compare-title .subtitle {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.6;
    margin-bottom: 0;
}

.compare-wrap {
    background: var(--main-gradient);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 12px 30px rgba(25, 53, 99, 0.18);
}

.compare-headers {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    padding: 10px 0 20px;
}

.compare-h-mf,
.compare-h-other {
    padding: 0 25px;
}

.compare-table {
    position: relative;
}

.compare-row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    align-items: stretch;
}

.compare-row > div {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-row .cat {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.compare-row .cat i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.compare-row .positive,
.compare-row .negative {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    line-height: 1.4;
}

.compare-row .positive {
    color: var(--text-color1);
    border-right: 1px solid #f0f0f0;
}

.compare-row .negative {
    color: var(--text-color2);
}

.compare-row .positive i {
    color: #22c55e;
    font-size: 18px;
    flex-shrink: 0;
}

.compare-row .negative i {
    color: #ef4444;
    font-size: 18px;
    flex-shrink: 0;
}

.compare-row:first-child .positive {
    border-radius: 16px 0 0 0;
}

.compare-row:first-child .negative {
    border-radius: 0 16px 0 0;
}

.compare-row:last-child .positive {
    border-radius: 0 0 0 16px;
    border-bottom: none;
}

.compare-row:last-child .negative {
    border-radius: 0 0 16px 0;
    border-bottom: none;
}

.main-introduce .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 60px;
}

.main-introduce-title {
    flex: 1;
    padding-top: 40px;
}

.main-introduce-title .title {
    color: var(--text-color1);
    text-align: left;
}

.main-introduce-title .title .highlight {
    color: var(--maincolor);
    font-weight: 700;
}

.main-introduce-title .subtitle {
    text-align: left;
    margin-bottom: 20px;
}

.main-introduce-title .bottom-btn {
    margin-top: 20px;
    text-align: center;
    width: 180px;
    height: 35px;
    line-height: 35px;
    border-radius: 150px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background-color: var(--maincolor);
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.main-introduce-title .bottom-btn:hover {
    background-color: #1b3968;
}

.main-introduce-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.card-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.card-wrapper:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.card-wrapper:nth-child(even) {
    justify-content: flex-end;
}

.main-introduce .card {
    width: 85%;
    background: var(--bgcolor);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-introduce .card-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.main-introduce .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main-introduce .card-content {
    flex: 1;
}

.main-introduce .card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color1);
}

.main-introduce .card p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color2);
    font-weight: 500;
    margin: 0;
    margin-bottom: 2px;
}

/* 메인 live 섹션 */
.main-live {
    padding: 80px 0;
    background-color: var(--bgcolor2);
    overflow: hidden;
    position: relative;
}

.main-live .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 60px;
}

.main-live-title {
    flex: 1;
    padding-top: 40px;

}

.main-live-title .title {
    text-align: end;
    margin-bottom: 10px;
}

.main-live-title .title .highlight {
    color: var(--maincolor);
}

.main-live-title .subtitle {
    text-align: end;
    margin-bottom: 10px;
}

.main-live-title p.small {
    text-align: end;
    font-size: 14px;
    color: var(--text-color2);
}

.main-live-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* 실시간 테이블 (live 내부) */
.main-live-live {
    flex: 1;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.live-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--maincolor);
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid #eee;
}

.live-update,
.live-time {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.live-time {
    margin: 0 5px;
    font-weight: 700;
}

.live-update i {
    margin-right: 5px;
    color: #fff;
}

.live-table-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--bg-blue);
    border-bottom: 1px solid rgba(49, 36, 233, 0.1);
}

.live-table-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--maincolor);
    text-align: center;
}

.live-table-header .col-name {
    flex: 1;
}

.live-table-header .col-product {
    flex: 2;
}

.live-table-header .col-amount {
    flex: 2;
}

.live-table-header .col-status {
    flex: 1;
}

.live-scroll-container {
    max-height: 400px;
    overflow: hidden;
    position: relative;
}

.live-scroll-content {
    position: relative;
    display: flex;
    flex-direction: column;
}

.live-row {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(49, 36, 233, 0.05);
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.live-row:hover {
    background-color: var(--bg-blue);
}

.live-row .col-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-row .col-name .name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color1);
}

.live-row .col-product {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.live-row .col-product i {
    font-size: 18px;
    color: #1e3d73;
    width: 24px;
    text-align: center;
}

.live-row .col-product .product-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color1);
}

.live-row .col-amount {
    flex: 2;
    font-size: 16px;
    font-weight: 700;
    color: var(--maincolor);
    text-align: center;
}

.live-row .col-status {
    flex: 1;
    text-align: center;
}

.live-row .status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #1e3d73;
    color: #ffffff;
}

/* 메인 review 섹션 */
.main-review {
    padding: 80px 0;
    background: var(--main-gradient);
    overflow: hidden;
}

.main-review .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-review .container .title {
    color: rgb(255, 255, 255, 0.8);
    margin-bottom: 50px;
}

.main-review .container .highlight {
    color: #fff
}

/* Swiper 슬라이더 스타일 */
.review-swiper {
    position: relative;
    padding: 20px 0;
    overflow: visible !important;
}

.review-swiper .swiper-slide {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.review-swiper .swiper-slide-active,
.review-swiper .swiper-slide-active~.swiper-slide,
.review-swiper .swiper-slide-active~.swiper-slide~.swiper-slide,
.review-swiper .swiper-slide-active~.swiper-slide~.swiper-slide~.swiper-slide {
    opacity: 1;
}

.review-swiper .swiper-slide-active~.swiper-slide~.swiper-slide~.swiper-slide~.swiper-slide {
    opacity: 0.5;
}

.review-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    height: 350px;
    display: flex;
    flex-direction: column;
}

.review-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bgcolor);
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info .name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 5px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rating i {
    color: #5b7aad;
    font-size: 12px;
}

.rating span {
    color: var(--text-color2);
    font-size: 12px;
    margin-left: 5px;
}

.review-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color1);
    margin-bottom: 15px;
    display: -webkit-box;
    flex: 1;
}

.review-date {
    font-size: 13px;
    color: var(--text-color2);
    margin-top: auto;
}

/* 네비게이션 버튼 스타일 */
.swiper-button-next,
.swiper-button-prev {
    color: var(--maincolor) !important;
    background: #fff;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #fff;
    color: var(--maincolor);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 14px !important;
    font-weight: 700;
}

.swiper-button-next {
    right: -15px !important;
}

.swiper-button-prev {
    left: -15px !important;
}

/* 메인 lic 섹션 */
.main-lic {
    padding: 80px 0;
    background-color: #fff;
}

.main-lic .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-lic .title {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.main-lic .title .highlight {
    color: #1e3d73;
    font-weight: 800;
}

.lic-wrapper {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lic-card {
    width: calc(50% - 5px);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.lic-card:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.lic-card img {
    width: 100%;
}

/* 메인 links 섹션 */
.main-links {
    padding: 15px 0;
    background-color: #fff;
}

.main-links .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.partners-logo-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    scrollbar-width: none;
    /* Firefox */
}

.partners-logo-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.partner-logo {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

.partner-logo img {
    max-width: 100%;
    max-height: 40px;
}

/* ================ 서브 페이지 공통 ================ */

.top-banner {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: var(--main-gradient);
    background-color: var(--maincolor);
}

.top-banner p {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

/* ================ about ================ */

/* About intro 섹션 */
.about-intro {
    padding: 100px 0;
    background-color: var(--bgcolor);
}

.about-intro .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 50px;
    text-align: center;
}

.about-intro .container>img {
    max-width: 100%;
    height: auto;
}

/* ================ hero cta button ================ */
.hero-cta-btn {
    display: inline-block;
    margin: 18px auto 0;
    padding: 16px 40px;
    background: var(--maincolor);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(30, 61, 115, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}
.hero-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(30, 61, 115, 0.55);
}

/* 인물 아래 큰 CTA 버튼 */
.hero-cta-btn.big {
    display: block;
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 480px;
    margin: 40px auto 0;
    padding: 24px 0;
    background: #3f61a0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    border-radius: 18px;
    letter-spacing: -0.3px;
    box-shadow: none;
}

.hero-cta-btn.big:hover {
    transform: translateY(-4px);
    box-shadow: none;
}

/* 스크롤을 내려 원래 위치를 지나면 같은 버튼이 화면 하단에 고정됨 */
.hero-cta-btn.big.docked {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: calc(100% - 40px);
    max-width: 480px;
    z-index: 900;
    box-shadow: none;
}

.hero-cta-btn.big.docked:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: none;
}

@media (max-width: 768px) {
    .hero-cta-btn {
        font-size: 16px;
        padding: 14px 32px;
    }
    .hero-cta-btn.big {
        max-width: 340px;
        padding: 18px 0;
        font-size: 19px;
        border-radius: 14px;
    }
    .hero-cta-btn.big.docked {
        max-width: none;
        width: calc(100% - 24px);
        bottom: 28px;
        border-radius: 14px;
    }
}

/* ================ featured-reviews ================ */
.featured-reviews{padding:80px 0;background:#282c30}.featured-reviews .container{max-width:1200px;margin:0 auto;padding:0 20px}.featured-reviews-title{text-align:center;font-size:34px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.5px;margin-bottom:14px}.featured-reviews-title .highlight{color:#fff}.featured-reviews-sub{text-align:center;font-size:18px;font-weight:500;color:rgba(255,255,255,0.8);line-height:1.25;letter-spacing:-0.5px;margin:0 0 50px}.featured-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.fr-card{border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s}.fr-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,.1)}.fr-avatar{width:100%;border-radius:20px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.1)}.fr-avatar img{width:100%;height:auto;display:block}@media(max-width:768px){.featured-reviews{padding:50px 0}.featured-reviews-title{font-size:26px;margin-bottom:10px}.featured-reviews-sub{font-size:15px;margin-bottom:30px}.featured-reviews-grid{grid-template-columns:1fr;gap:23px;padding:0 4px}}

.about-intro .container>a>img {
    max-width: 100%;
    height: auto;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.about-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.about-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.about-card-inner {
    padding: 40px;
    text-align: center;
}

.about-img {
    text-align: center;
    margin-bottom: 30px;
}

.about-img img {
    max-height: 170px;
    width: auto;
}

.about-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 20px;
    line-height: 1.4;
}

.about-content .highlight {
    color: var(--maincolor);
    position: relative;
    display: inline-block;
    padding: 0 4px;
    animation: highlightShine 3s ease-in-out infinite;
    padding: 0 2px;
}

.about-content .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 61, 115, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.about-card:hover .highlight::before {
    transform: scaleX(1);
}

@keyframes highlightShine {

    0%,
    100% {
        color: #8aa2c8;
    }

    50% {
        color: #1e3d73;
    }
}

.about-content p {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 15px;
}

.about-content p:last-child {
    margin-bottom: 0;
}

/* About Links 섹션 */
.about-links {
    padding: 80px 0;
    background: var(--main-gradient);
}

.about-links .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-links-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.about-links-text {
    text-align: left;
}

.about-links-content h3 {
    font-size: 23px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 12px;
}

.about-links-content p {
    font-size: 16px;
    color: var(--text-color1);
    margin-bottom: 0;
    font-weight: 500;
}

.about-links-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    color: var(--text-color1);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.about-links-button:hover {
    background-color: var(--maincolor);
    color: #ffffff;
    transform: translateY(-2px);
}

.about-links-button i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.about-links-button:hover i {
    transform: translateX(5px);
}

/* ================ product ================ */

.product {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.product .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-table {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.product-item {
    flex: 1;
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.product-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.product-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color1);
    order: 2;
}

.product-header img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    order: 1;
}

.product-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
}

.product-content li:last-child {
    border-bottom: none;
}

.product-content li.description {
    display: block;
    padding: 20px 0 0 0;
    border-bottom: none;
}

.product-content li.description p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color1);
    word-break: keep-all;
    text-align: center;
}

.product-content .label {
    color: var(--text-color2);
    font-size: 15px;
    font-weight: 500;
}

.product-content .value {
    color: var(--text-color1);
    font-size: 15px;
    font-weight: 600;
}


/* Product Money 섹션 */
.product-money {
    /* padding: 80px 0; */
    padding-bottom: 80px;
    background-color: var(--bgcolor);
}

.product-money .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-money-text {
    flex: 1;
    padding: 40px;
}

.product-money-text h2 {
    font-size: 18px;
    color: var(--text-color2);
    margin-bottom: 5px;
}

.product-money-text h3,
.product-card-text h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--maincolor);
    margin-bottom: 20px;
}

.product-money-text p,
.product-card-text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color1);
    margin-bottom: 15px;
    font-weight: 500;
}

.product-money-text .small,
.product-card-text .small {
    font-size: 13px;
    color: var(--text-color2);
}

.product-money-text p:last-child,
.product-card-text p:last-child {
    margin-bottom: 0;
}

.product-money-text strong,
.product-card-text strong {
    color: var(--maincolor);
    font-weight: 700;
}

.product-money-image,
.product-card-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.product-money-image img,
.product-card-image img {
    max-width: 50%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.product-money-hero:hover .product-money-image img,
.product-card-hero:hover .product-card-image img,
.product-card-hero:hover .product-money-image img {
    transform: translateY(-10px);
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    margin-bottom: 60px;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: var(--maincolor);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px dashed var(--maincolor);
    background: none;
}

.timeline-item {
    margin-bottom: 30px;
    position: relative;
    width: calc(50% - 30px);
    transition: transform 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-5px);
}

.timeline-item:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
    padding-right: 40px;
}

.timeline-item:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    padding-left: 40px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid var(--maincolor);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-item:nth-child(odd)::before {
    right: -44px;
}

.timeline-item:nth-child(even)::before {
    left: -44px;
}

.timeline-content {
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.timeline-content .icon {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.timeline-content .icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.timeline-content::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -15px;
    border-color: transparent transparent transparent #fff;
}

.timeline-item:nth-child(even) .timeline-content::before {
    left: -15px;
    border-color: transparent #fff transparent transparent;
}

.timeline-content .step-number {
    display: inline-block;
    background: var(--main-gradient);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.timeline-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 10px;
}

.timeline-content p {
    font-size: 15px;
    color: var(--text-color2);
    line-height: 1.6;
    margin: 0;
}

/* ======================================================
   강조 CTA 배너 (다크 배경 + 노란 강조/버튼)
====================================================== */
.cta-banner {
    background: radial-gradient(125% 125% at 60% 35%, #2c3138 0%, #23282e 50%, #1b1f24 100%);
    padding: 80px 0;
    text-align: center;
}

.cta-banner .container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-banner-title {
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 26px;
}

.cta-banner-title .accent {
    color: #f5c63d;
}

/* 동전 아이콘 (이모지 대신 CSS로 그려 기기와 무관하게 항상 금색 동전 표시) */
.cta-banner-title .coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9em;
    height: 0.9em;
    vertical-align: middle;
    position: relative;
    top: -0.06em;
    margin: 0 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #9fb4d3 0%, #1e3d73 45%, #193563 100%);
    box-shadow: inset 0 0 0 0.055em #142c53, 0 1px 2px rgba(14, 31, 57, 0.35);
}

.cta-banner-title .coin .coin-mark {
    font-size: 0.5em;
    font-weight: 900;
    color: #17325f;
    line-height: 1;
}

/* 숫자 카운트업 */
.cta-banner-title .count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    min-width: 1.6em;
    text-align: right;
}

.cta-banner-sub {
    font-size: 19px;
    font-weight: 500;
    color: #9aa1a9;
    line-height: 1.55;
    margin-bottom: 18px;
}

.cta-banner-sub strong {
    display: inline-block;
    margin-top: 4px;
    color: #f5c63d;
    font-weight: 800;
}

.cta-banner-chevron {
    color: rgba(255, 255, 255, 0.45);
    font-size: 26px;
    margin-bottom: 34px;
    animation: ctaChevronBounce 1.6s ease-in-out infinite;
}

@keyframes ctaChevronBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.cta-banner-btn {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 22px 0;
    background: linear-gradient(180deg, #183461 0%, #112645 55%, #0e1f39 100%);
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 14px;
    letter-spacing: -0.3px;
    box-shadow: none;
    transition: transform 0.2s, background 0.2s;
}

.cta-banner-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #142c53 0%, #0e1f39 55%, #0b192f 100%);
}

/* 한도조회 버튼: 노란 배경 + 검정 굵은 텍스트 (첨부 이미지 스타일) */
.cta-banner-btn.limit-check {
    background: #f5c63d;
    color: #23272e;
    font-weight: 700;
    box-shadow: none;
}

.cta-banner-btn.limit-check:hover {
    background: #efbb28;
}

/* ===== 대출상담사 제안 서비스 섹션 (네이비) ===== */
.advisor-section {
    padding: 80px 0;
    background: #ffffff;
    text-align: center;
}

.advisor-section .container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

.advisor-title {
    font-size: 30px;
    font-weight: 800;
    color: #1f2a3a;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.advisor-title .accent {
    color: #1e3d73;
}

.advisor-cert {
    margin: 0 auto 34px;
}

.advisor-cards {
    position: relative;
    max-width: 400px;
    margin: 0 auto 28px;
    text-align: left;
}

.advisor-row {
    position: relative;
    background: #ffffff;
    border: 1px solid #edeff3;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(30, 61, 115, 0.08);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.advisor-row .av {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
    background-color: #e6eaf1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.advisor-row .nm { font-size: 16px; font-weight: 700; color: #2c3542; }
.advisor-row .bk { font-size: 14px; color: #8a92a0; }
.advisor-row .rt { margin-left: auto; font-size: 17px; font-weight: 800; color: #1e3d73; }

.advisor-row.r1 {
    width: 87%;
    margin: 0 auto;
    padding-bottom: 30px;
    opacity: 0.5;
    z-index: 1;
}

.advisor-row.r2 {
    width: 94%;
    margin: -32px auto 0;
    padding-bottom: 30px;
    opacity: 0.8;
    z-index: 2;
}

.advisor-row.r3 {
    width: 100%;
    margin: -32px auto 0;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border: 2px solid #1e3d73;
    box-shadow: 0 16px 34px rgba(30, 61, 115, 0.18);
}

.advisor-row.r3 .ar-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.advisor-row.r3 .ar-line {
    display: flex;
    align-items: center;
    gap: 11px;
}

.advisor-row.r3 .rt.strong { font-size: 18px; }

.advisor-row.r3 .sub { font-size: 13px; color: #8a92a0; }
.advisor-row.r3 .amt { margin-left: auto; font-size: 16px; font-weight: 800; color: #1e3d73; }

.advisor-info {
    display: block;
    max-width: 540px;
    margin: 0 auto;
    background: #f4f6f9;
    border-radius: 14px;
    padding: 22px 20px;
    color: #4a5260;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: background 0.2s;
}

.advisor-info:hover { background: #eaeef3; }

@media screen and (max-width: 768px) {
    .advisor-section { padding: 56px 0; }
    .advisor-title { font-size: 22px; margin-bottom: 14px; }
    .advisor-cert { margin-bottom: 26px; }
    .advisor-cards { max-width: 330px; }
    .advisor-row { padding: 12px 16px; }
    .advisor-row .nm { font-size: 15px; }
    .advisor-row .bk { font-size: 13px; }
    .advisor-row .rt { font-size: 16px; }
    .advisor-info { font-size: 15px; padding: 18px 16px; }
}

/* ======================================================
   체크리스트 섹션 (대상 확인) - 노랑/주황 랜딩 색감
====================================================== */
.checklist-section {
    scroll-margin-top: 70px;
    padding: 90px 0;
    /* 히어로처럼 위는 밝은 흰색/연노랑, 아래로 갈수록 노랑이 은은하게 진해지는 그라데이션 */
    background: linear-gradient(180deg, #ffffff 0%, #eef2f8 35%, #dfe7f1 70%, #9fb4d3 100%);
}

/* ===== 대출 상품 카드 섹션 ===== */
.loancard-section {
    scroll-margin-top: 70px;
    padding: 80px 0;
    background: linear-gradient(180deg, #f4f8fd 0%, #fafcfe 45%, #ffffff 100%);
    text-align: center;
}

.loancard-section .container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.loan-card {
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 18px 44px rgba(30, 61, 115, 0.10);
    max-width: 440px;
    margin: 0 auto;
    padding: 40px 30px 30px;
}

.loan-collab {
    display: block;
    height: 38px;
    width: auto;
    max-width: 92%;
    margin: 0 auto 2px;
}

.loan-card-title {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.32;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
}

.loan-card-sub {
    font-size: 16px;
    font-weight: 500;
    color: #6b7688;
    line-height: 1.5;
    letter-spacing: -0.3px;
    margin-bottom: 26px;
}

.loan-cta-chevron {
    color: #b8bfcb;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 14px;
    animation: ctaChevronBounce 1.6s ease-in-out infinite;
}

.loan-cta-wide {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 40px;
    padding: 19px 0;
    background: #4a68d4;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 14px;
    letter-spacing: -0.3px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s;
}

.loan-cta-wide:hover {
    transform: translateY(-2px);
}

.loan-card-title .accent {
    background: linear-gradient(95deg, #3f61a0 0%, #1c3a6a 52%, #0f2340 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.loan-card-img {
    width: 100%;
    max-width: 640px;
    height: 420px;
    background-color: transparent;
    background-image: url('../img/자금론.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 30px;
}

.loan-card-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto 30px;
}

.loan-card-stats .lc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loan-card-stats .lc-label {
    font-size: 15px;
    color: #8a92a0;
    font-weight: 500;
}

.loan-card-stats .lc-value {
    font-size: 23px;
    font-weight: 800;
    color: #1f2a3a;
    letter-spacing: -0.5px;
}

.loan-card-stats .lc-divider {
    width: 1px;
    align-self: stretch;
    background: #e7eaf0;
    margin: 4px 12px;
}

/* 3단계 신청 안내 */
.loan-steps {
    background: #f4f6f9;
    border-radius: 18px;
    padding: 26px 28px;
    text-align: left;
}

.loan-steps-head {
    font-size: 14px;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 20px;
}

.loan-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 22px;
}

.loan-step:last-child {
    padding-bottom: 0;
}

.loan-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 2px;
    width: 2px;
    background: #dfe4ec;
}

.loan-step .ls-num {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e6ebf3;
    color: #3f4a5c;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loan-step .ls-title {
    font-size: 16px;
    font-weight: 700;
    color: #2c3542;
    margin-top: 3px;
}

.loan-step .ls-desc {
    font-size: 14px;
    color: #8a92a0;
    margin-top: 4px;
}

.loan-step .ls-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background: #1e3d73;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}

.loan-step .ls-btn:hover {
    background: #17325f;
}

/* ===== 왜 한국생활자금센터에서? 섹션 ===== */
.why-section {
    scroll-margin-top: 70px;
    padding: 84px 0;
    background: #f2f4fb;
}

.why-section .container {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-title {
    text-align: center;
    font-size: 27px;
    font-weight: 800;
    color: #1f2a3a;
    line-height: 1.4;
    letter-spacing: -0.6px;
    margin-bottom: 34px;
}

.why-title .accent {
    color: #4a68d4;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}

.why-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 6px 20px rgba(30, 61, 115, 0.05);
}

.why-num {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    color: #b7c0d4;
    letter-spacing: -0.5px;
}

.why-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.why-label {
    font-size: 13px;
    color: #97a0b0;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.why-headline {
    font-size: 17px;
    font-weight: 700;
    color: #1f2a3a;
    letter-spacing: -0.5px;
}

.why-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.why-cta {
    display: block;
    width: 100%;
    padding: 19px 0;
    background: #4a68d4;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 14px;
    letter-spacing: -0.3px;
    transition: transform 0.2s;
}

.why-cta:hover {
    transform: translateY(-2px);
}

/* ===== 실시간 신청 내역 티커 섹션 ===== */
.ticker-section {
    scroll-margin-top: 70px;
    padding: 80px 0;
    background: #ffffff;
}

.ticker-section .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.ticker-title {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #1f2a3a;
    letter-spacing: -0.6px;
    margin-bottom: 26px;
}

.ticker-viewport {
    position: relative;
    height: 470px;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    animation: tickerUp 30s linear infinite;
}

.ticker-viewport:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes tickerUp {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.ticker-card {
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 14px rgba(30, 61, 115, 0.04);
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.tk-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tk-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eef1f6;
    background-size: cover;
    background-position: center 28%;
}

.tk-info {
    flex: 1;
    min-width: 0;
}

.tk-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2a3a;
    letter-spacing: -0.3px;
}

.tk-name span {
    font-size: 13px;
    font-weight: 500;
    color: #8a92a0;
}

.tk-meta {
    font-size: 13px;
    color: #97a0b0;
    margin-top: 2px;
    letter-spacing: -0.3px;
}

.tk-time {
    flex-shrink: 0;
    font-size: 12.5px;
    color: #aab2c0;
}

.tk-stats {
    display: flex;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f2f6;
}

.tk-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.tk-stat + .tk-stat {
    border-left: 1px solid #f0f2f6;
}

.tk-label {
    font-size: 12px;
    color: #97a0b0;
}

.tk-value {
    font-size: 16px;
    font-weight: 800;
    color: #1f2a3a;
    letter-spacing: -0.4px;
}

/* 최상단 하이라이트 (하늘색) */
.ticker-card.active {
    background: linear-gradient(135deg, #e8f3ff 0%, #d5e8ff 100%);
    border-color: #c3ddf8;
    box-shadow: 0 12px 26px rgba(74, 104, 212, 0.16);
}

.ticker-card.active .tk-name,
.ticker-card.active .tk-value {
    color: #1f2a3a;
}

.ticker-card.active .tk-name span,
.ticker-card.active .tk-meta,
.ticker-card.active .tk-time,
.ticker-card.active .tk-label {
    color: #6b7688;
}

.ticker-card.active .tk-stats {
    border-top-color: rgba(74, 104, 212, 0.18);
}

.ticker-card.active .tk-stat + .tk-stat {
    border-left-color: rgba(74, 104, 212, 0.18);
}

@media screen and (max-width: 768px) {
    .ticker-section { padding: 60px 0; }
    .ticker-title { font-size: 22px; }
    .ticker-viewport { height: 430px; }
    .tk-value { font-size: 15px; }
    .tk-avatar { width: 36px; height: 36px; }
}

@media screen and (max-width: 768px) {
    .why-section { padding: 60px 0; }
    .why-title { font-size: 23px; margin-bottom: 28px; }
    .why-row { padding: 17px 18px; gap: 12px; }
    .why-headline { font-size: 15.5px; }
    .why-label { font-size: 12px; }
    .why-icon { width: 48px; height: 48px; }
    .why-cta { font-size: 16px; padding: 17px 0; }
}

@media screen and (max-width: 768px) {
    .loancard-section { padding: 56px 0; }
    .loan-card { padding: 30px 20px 24px; border-radius: 22px; }
    .loan-card-title { font-size: 28px; margin-bottom: 20px; }
    .loan-card-img { max-width: 100%; height: 320px; margin-bottom: 22px; }
    .loan-card-stats .lc-label { font-size: 13px; }
    .loan-card-stats .lc-value { font-size: 19px; }
}

/* ===== 대상자 확인 섹션 (연블루 + 화이트 카드 체크리스트) ===== */
.eligible-section {
    scroll-margin-top: 70px;
    padding: 90px 0;
    text-align: center;
    background: linear-gradient(165deg, #e7f0fd 0%, #d3e2fb 100%);
}

.eligible-section .container {
    max-width: 660px;
    margin: 0 auto;
    padding: 0 20px;
}

.eligible-coin {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 14px;
}

.eligible-title {
    font-size: 34px;
    font-weight: 800;
    color: #1f2a3a;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.eligible-badge {
    display: inline-block;
    background: #4661c9;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    padding: 11px 22px;
    border-radius: 50px;
    margin-bottom: 34px;
    box-shadow: 0 8px 18px rgba(70, 97, 201, 0.28);
}

.eligible-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(45, 70, 140, 0.10);
    padding: 8px 30px;
    max-width: 580px;
    margin: 0 auto 36px;
}

.eligible-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.eligible-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 8px;
    font-size: 18px;
    font-weight: 600;
    color: #2c3542;
    text-align: left;
    border-bottom: 1px solid #eef1f5;
}

.eligible-list li:nth-last-child(-n+2) {
    border-bottom: none;
}

.eligible-list .chk {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4661c9;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.eligible-btn {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 20px 0;
    background: #2f353e;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s, background 0.2s;
}

.eligible-btn:hover {
    background: #262b32;
    transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
    .eligible-section {
        padding: 60px 0;
    }
    .eligible-coin {
        font-size: 38px;
    }
    .eligible-title {
        font-size: 25px;
        margin-bottom: 14px;
    }
    .eligible-badge {
        font-size: 14px;
        padding: 9px 18px;
        margin-bottom: 28px;
    }
    .eligible-card {
        padding: 6px 16px;
        border-radius: 18px;
    }
    .eligible-list li {
        padding: 13px 4px;
        font-size: 15px;
        gap: 9px;
    }
    .eligible-list .chk {
        width: 19px;
        height: 19px;
        font-size: 10px;
    }
    .eligible-btn {
        max-width: 320px;
        padding: 17px 0;
        font-size: 16px;
    }
}

.checklist-section .container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 20px;
}

.checklist-head {
    text-align: center;
    margin-bottom: 36px;
}

.checklist-title {
    font-size: 34px;
    font-weight: 800;
    color: #222222;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
    text-shadow: none;
}

.checklist-title .accent {
    color: #1e3d73;
}

.checklist-sub {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.5;
    margin: 0;
}

.checklist-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checklist-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 8px 20px rgba(150, 90, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.checklist-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(25, 53, 99, 0.18);
}

.checklist-card .cl-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.checklist-card .cl-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color1);
    letter-spacing: -0.3px;
}

/* ======================================================
   타사 vs 한국생활자금센터 비교 섹션 - 노랑/주황 랜딩 색감
====================================================== */
.versus-section {
    padding: 90px 0;
    background-color: #fff;
}

.versus-section .container {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 20px;
}

.versus-head {
    text-align: center;
    margin-bottom: 40px;
}

.versus-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.versus-title .accent {
    background: linear-gradient(180deg, #5b7aad 0%, #193563 50%, #142c53 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.versus-sub {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.5;
    margin: 0;
}

.versus-wrap {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 16px;
    align-items: end;
}

.versus-col-label {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color2);
    margin-bottom: 14px;
}

.versus-col-label.accent {
    color: var(--subcolor);
    font-weight: 800;
    font-size: 27px;
    /* 프렌즈론 라벨을 위로 올려 아래 박스와 간격 확보 */
    margin-bottom: 22px;
}

.versus-card {
    border-radius: 12px;
    overflow: hidden;
}

/* 타사 (약하게) */
.versus-card.other {
    background: #f2f2f2;
}

.versus-card.other .versus-item {
    padding: 20px 18px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #9a9a9a;
    border-bottom: 1px solid #e6e6e6;
    line-height: 1.4;
}

.versus-card.other .versus-item:last-child {
    border-bottom: none;
}

/* 한국생활자금센터 (강조 - 노랑/주황 그라데이션 박스 + 흰색 텍스트) */
.versus-card.mf {
    background: linear-gradient(180deg, #183461 0%, #112645 55%, #0e1f39 100%);
    box-shadow: none;
    transform: translateY(-8px);
}

.versus-card.mf .versus-item {
    padding: 26px 18px;
    text-align: center;
    font-size: 27px;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    line-height: 1.4;
    letter-spacing: -0.3px;
    text-shadow: none;
}

.versus-card.mf .versus-item:last-child {
    border-bottom: none;
}

.versus-note {
    margin-top: 22px;
    text-align: center;
    font-size: 12px;
    color: #b0b0b0;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

.versus-cta-wrap {
    margin-top: 36px;
    text-align: center;
}

.versus-cta-wrap .cta-banner-chevron {
    margin-bottom: 18px;
}

.tip-item {
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
}

.tip-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tip-label {
    background-color: #f1f1f1;
    color: var(--text-color1);
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.tip-content {
    font-size: 15px;
    color: var(--text-color1);
    line-height: 1.5;
    flex: 1;
}

.tip-content .highlight {
    color: var(--maincolor);
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 0 2px;
}

.tip-content .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 61, 115, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.tip-item:hover .highlight::before {
    transform: scaleX(1);
}

/* Product Tips 섹션 */
.product-tips {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.product-tips .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-tips-hero {
    display: flex;
    gap: 40px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 40px;
}

.product-tips-image {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

.product-tips-image img {
    max-width: 70%;
    height: auto;
    transition: transform 0.5s ease;
}

.product-tips-hero:hover .product-tips-image img {
    transform: translateY(-10px);
}

.product-tips-content {
    width: 60%;
    padding: 20px 0;
}

.product-tips-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 10px;
}

.product-tips-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color1);
    margin-bottom: 20px;
    font-weight: 500;
}

.product-tips-content p:last-child {
    margin-bottom: 0;
}

.product-tips-content .highlight {
    position: relative;
    display: inline-block;
    color: var(--maincolor);
    animation: highlightShine 0.5s ease-in-out infinite;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    padding: 0 2px;
    text-decoration: none;
}

.product-tips-content .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(226, 45, 26, 0.2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.product-tips-content .highlight:hover::before {
    transform: scaleX(1);
}

/* ================ request ================ */

.top-banner .sub-title {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    margin-top: 5px;
}


/* Request Howto 섹션 */
.request-howto {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.request-howto .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.request-howto-steps {
    display: flex;
    gap: 20px;
}

.request-step-card {
    flex: 1;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
}

.request-step-number {
    background-color: var(--maincolor);
    color: #fff;
    font-weight: 700;
    padding: 12px 0;
    font-size: 18px;
}

.request-step-image {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    background-color: #fff;
    overflow: hidden;
}

.request-step-image img {
    width: 95%;
}

.request-step-content {
    padding: 10px 20px 20px 20px;
}

.request-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color1);
    line-height: 1.5;
}

.request-step-desc {
    font-size: 14px;
    color: var(--text-color2);
    line-height: 1.6;
    font-weight: 400;
}

/* Request Button 섹션 */
.request-button {
    padding: 80px 0;
    background-color: #fff;
}

.request-button .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.request-button-title {
    text-align: center;
    margin-bottom: 40px;
}

.request-button-title h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 15px;
}

.request-button-title p {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text-color2);
}

.request-button-title.bottom {
    margin-top: 20px;
    margin-bottom: 0;
}

.request-button-title.bottom p {
    line-height: 1.5;
    font-size: 16px;
    color: var(--text-color2);
}

.request-button-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.request-button-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.request-button-link.phone {
    background-color: var(--maincolor);
    color: #fff;
}

.request-button-link.kakao {
    background-color: #fffc00;
    color: #000;
}

.request-button-link:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.request-button-link i {
    font-size: 20px;
}

.form-desc {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}

.form-desc p {
    line-height: 1.5;
    font-size: 16px;
    color: var(--text-color2);
}


/* Request Notice 섹션 */
.request-notice {
    padding: 50px 0;
    background-color: #1e3d73;
}

.request-notice .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.request-notice-content {
    text-align: center;
}

.request-notice-icon {
    margin-bottom: 20px;
}

.request-notice-icon img {
    width: 120px;
    height: auto;
}

.request-notice-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 15px;
}

.request-notice-content p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-color1);
    font-weight: 500;
}

/* Request Kakao 섹션 */
.request-kakao {
    padding: 80px 0;
    background-color: #fff;
}

.request-kakao .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.request-kakao-title {
    text-align: center;
    margin-bottom: 30px;
}

.request-kakao-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 10px;
}

.request-kakao-title p {
    font-size: 18px;
    color: var(--text-color2);
}

.request-kakao-button {
    text-align: center;
    margin-bottom: 30px;
}

.request-kakao-button.id {
    margin-top: 50px;
}

.request-kakao-button span {
    display: inline-block;
    background-color: #16233f;
    color: #fff;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
}

.request-kakao-content {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.request-kakao-banner {
    background: var(--main-gradient);
    border-radius: 15px;
    padding: 15px 20px;
    text-align: center;
    margin: 50px 0;
    box-shadow: 0 4px 15px rgba(30, 61, 115, 0.2);
}

.request-kakao-banner p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.request-kakao-box {
    flex: 1;
    max-width: 350px;
    text-align: center;
}

.request-kakao-image {
    margin-bottom: 10px;
}

.request-kakao-image img {
    width: 100%;
    height: auto;
    display: block;
}

.request-kakao-box p {
    font-size: 16px;
    color: var(--text-color1);
    font-weight: 700;
    background-color: #8aa2c8;
    padding: 15px;
    border-radius: 15px;
}

/* ================ faq ================ */

/* FAQ 섹션 */
.faq-container {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.faq-container .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-title {
    text-align: center;
    margin-bottom: 50px;
}

.faq-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 15px;
}

.faq-title p {
    font-size: 18px;
    color: var(--text-color2);
}

.faq-content {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-question {
    padding: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.5s;
}

.faq-question:hover {
    background-color: rgba(30, 61, 115, 0.05);
}

.question-mark {
    color: var(--maincolor);
    font-size: 20px;
    font-weight: 700;
    margin-right: 15px;
}

.question-text {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color1);
}

.toggle-icon {
    margin-left: 15px;
    color: var(--text-color2);
    transition: transform 0.5s;
}

.faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
    background-color: #f8f9fa;
}

.faq-answer p {
    padding: 25px 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color2);
}

.faq-item.active .toggle-icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 650px;
}

.faq-answer .highlight {
    position: relative;
    display: inline-block;
    color: var(--maincolor);
    animation: highlightShine 0.5s ease-in-out infinite;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    padding: 0 2px;
    text-decoration: none;
}

.faq-answer .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 61, 115, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.faq-answer .highlight:hover::before {
    transform: scaleX(1);
}

/* 푸터 */
.footer {
    background-color: var(--text-color1);
    color: #fff;
    padding: 40px 0;
    padding-bottom: calc(40px + 47px);
    /* 기본 패딩 + 플로팅 메뉴 높이 */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-info {
    margin-bottom: 30px;
}

.company-logo {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.company-logo img {
    width: 150px;
    height: auto;
}

.contact-info {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.contact-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-notice {
    margin-bottom: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.footer-copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* 플로팅 */
.floating {
    position: fixed;
    right: 20px;
    bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.floating_bubble {
    position: relative;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    white-space: normal;
    letter-spacing: -0.2px;
    width: 80px;
    animation: floatingConsultBubble 1.9s ease-in-out infinite;
}

.floating_bubble strong {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
    color: #1e3d73;
}

.floating_bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid #fff;
}

@keyframes floatingConsultBubble {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.floating_btn {
    width: 50px;
    height: 50px;
    border-radius: 43%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.floating_btn i {
    font-size: 20px;
    line-height: 1;
}

.floating-call {
    background: #1e3d73;
}

.floating-call i {
    color: #fff !important;
}

.floating-call img {
    width: 35px;
}

.floating-kakao {
    background: #8aa2c8;
}

.floating-kakao i {
    color: var(--text-color1) !important;
}

.floating_btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}


@keyframes highlightShine {

    0%,
    100% {
        color: #8aa2c8;
    }

    50% {
        color: #1e3d73;
    }
}

/* ================ 환급 여정 섹션 (랜딩 색감) ================ */
.refund-journey {
    padding: 60px 0 66px;
    background: #f8f9fa;
    text-align: center;
}

.refund-journey .container {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 20px;
}

.rj-badge {
    display: inline-block;
    background: #1e3d73;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.rj-eyebrow {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0 0 2px;
}

.rj-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0 0 15px;
}

.rj-title .accent {
    color: #1e3d73;
}

/* 시각 영역 */
.rj-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

/* 폰 목업 - 테두리(베젤) 있는 폰 프레임 */
.rj-phone {
    position: relative;
    width: 290px;
    max-width: 80%;
    background: #e4eaf3;
    border: 1px solid #e6ecf5;
    border-radius: 42px 42px 0 0;
    padding: 14px 14px 0;
    box-shadow: none;
    z-index: 2;
}

/* 폰 내부 화면 */
.rj-phone-screen {
    position: relative;
    background: linear-gradient(180deg, #bccbe2 0%, #6d8ab8 100%);
    border-radius: 30px 30px 0 0;
    padding: 28px 16px 26px;
    overflow: hidden;
}

.rj-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 8px;
    background: rgba(120, 90, 0, 0.28);
    border-radius: 50px;
}

.rj-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(120, 90, 0, 0.55);
    margin-bottom: 14px;
    padding-top: 6px;
}

.rj-status-icons i {
    margin-left: 4px;
}

.rj-clock {
    font-size: 56px;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(180, 120, 0, 0.25);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* 은행 알림 카드 */
.rj-noti {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.rj-noti-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--main-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rj-noti-body {
    flex: 1 1 auto;
}

.rj-noti-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.rj-noti-bank {
    font-size: 12px;
    color: var(--text-color2);
    font-weight: 500;
}

.rj-noti-time {
    font-size: 11px;
    color: #b5b5b5;
}

.rj-noti-amount {
    font-size: 14px;
    color: var(--text-color1);
    font-weight: 500;
}

.rj-noti-amount strong {
    color: #1e3d73;
    font-size: 17px;
    font-weight: 800;
}

/* 4단계 스텝 - 폰보다 가로로 넓게 */
.rj-steps {
    position: relative;
    margin-top: 0;
    width: 440px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 24px;
    padding: 22px 26px 22px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 14px 34px rgba(25, 53, 99, 0.18);
    z-index: 1;
}

/* 스텝 사이 연결선 */
.rj-steps::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 58px;
    right: 58px;
    height: 2px;
    background: #d3ddec;
    z-index: 0;
}

.rj-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.rj-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--main-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(25, 53, 99, 0.35);
}

.rj-step-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color1);
    line-height: 1.3;
}

.rj-note {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color2);
    margin: 0 0 34px;
}

.rj-cta {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: #1e3d73;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: 20px 0;
    border-radius: 16px;
    box-shadow: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.rj-cta:hover {
    transform: translateY(-3px);
    background: #1b3968;
}

/* ================ 2단 소개 섹션 (텍스트 + 폰 목업) ================ */
.intro-split {
    padding: 80px 0;
    background: #ffffff;
}

.intro-split-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* 왼쪽 텍스트 */
.intro-split-text {
    flex: 1 1 auto;
    max-width: 460px;
}

.intro-split-eyebrow {
    font-size: 21px;
    font-weight: 800;
    color: #1e3d73;   /* 내 비상금 한도 조회 버튼과 동일한 노란색 */
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}

.intro-split-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    letter-spacing: -1px;
    margin: 0 0 20px;
    white-space: nowrap;
}

.intro-split-desc {
    font-size: 17px;
    font-weight: 500;
    color: #4a4a4a;
    line-height: 1.7;
    letter-spacing: -0.3px;
    margin: 0 0 34px;
}

.intro-split-desc .muted {
    color: #9a9a9a;
}

.intro-split-btn {
    display: inline-block;
    background: #1e3d73;   /* 내 비상금 한도 조회 버튼과 동일한 노란색 */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 34px;
    border-radius: 12px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.intro-split-btn:hover {
    transform: translateY(-3px);
    background: #1e3d73;
}

/* 오른쪽 폰 목업 */
.intro-split-visual {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

/* 폰: 실제 아이폰 이미지를 프레임으로 사용, 그 위에 화면 오버레이 */
.intro-phone {
    position: relative;
    width: 820px;
    max-width: 100%;
    margin-right: -60px;
    /* 컨테이너 쿼리 기준 - 내부 컨텐츠가 폰 크기에 비례하도록 */
    container-type: inline-size;
}

/* 아이폰 프레임 이미지 + 오른쪽 아래로 떨어지는 그림자 */
.intro-phone-frame {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(24px 30px 34px rgba(0, 0, 0, 0.22));
}

/* 화면 오버레이 - 이미지의 흰 화면 영역 좌표(%)에 정확히 맞춤 */
.intro-phone-screen {
    position: absolute;
    top: 13%;
    left: 33%;
    width: 34%;
    height: 70%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border-radius: 14% / 6.5%;
}

/* ===== 설문 결과 화면(모바일) 재현 - 폰 폭(cqw) 기준 비례 스케일 ===== */
.ip-result {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 상태바/홈바 침범 방지용 여백 (세로 여유 확보 위해 압축) */
    padding: 5cqw 3cqw 4cqw;
}

.ip-confetti {
    font-size: 3.4cqw;
    line-height: 1;
    margin-bottom: 1cqw;
    animation: ipBounce 0.6s ease infinite alternate;
}

@keyframes ipBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

.ip-result-badge {
    background: #eef2f8;
    border: 0.25cqw solid var(--maincolor);
    border-radius: 50px;
    padding: 0.7cqw 2cqw;
    font-size: 1.6cqw;
    font-weight: 600;
    color: #17325f;
    margin-bottom: 1.2cqw;
}

.ip-result-amount {
    font-size: 4.6cqw;
    font-weight: 800;
    color: #222;
    line-height: 1.1;
    letter-spacing: -0.6px;
    white-space: nowrap;
    margin-bottom: 1cqw;
}

.ip-result-amount span {
    color: #1e3d73;
}

.ip-result-title {
    display: inline-block;
    font-size: 1.8cqw;
    font-weight: 700;
    color: #17325f;
    background: #eef2f8;
    border-radius: 30px;
    padding: 0.7cqw 1.8cqw;
    margin-bottom: 1.2cqw;
    letter-spacing: -0.4px;
    white-space: nowrap;
}

.ip-result-desc {
    font-size: 1.55cqw;
    color: #888;
    line-height: 1.45;
    margin-bottom: 1.8cqw;
}

.ip-result-desc strong {
    color: #555;
}

.ip-result-kakao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    width: 100%;
    padding: 1.8cqw 0;
    background: #FEE500;
    border-radius: 2cqw;
    font-size: 1.95cqw;
    font-weight: 700;
    color: #222;
    box-shadow: 0 0.5cqw 1.5cqw rgba(254, 229, 0, 0.4);
}

.ip-result-kakao i,
.ip-result-tel i {
    font-size: 1em;
    line-height: 1;
}

.ip-result-divider {
    width: 100%;
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 1.4cqw 0;
}

.ip-result-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    width: 100%;
    padding: 1.6cqw 0;
    background: #f7f7f7;
    border-radius: 2cqw;
    font-size: 1.8cqw;
    font-weight: 600;
    color: #444;
}

.ip-result-notice {
    margin-top: 1.4cqw;
    font-size: 1.25cqw;
    color: #bbb;
    line-height: 1.4;
}