@charset "UTF-8";
/* ============================================================
   연금저축 소개 페이지
   ------------------------------------------------------------
   시안 : MO 1080px / PC 1920px (콘텐츠 1200px)
   MO 시안은 2배수라 PC 치수는 정확히 MO 의 1/2 입니다.
   그래서 --u(시안 1px) 하나만 바꿔서 두 화면을 같은 CSS 로 씁니다.
     MO : --u = 100vw / 1080
     PC : --u = .5px  (+ 콘텐츠 폭 1200px 고정)
   KV 와 이벤트 배너만 이미지이고 나머지 텍스트는 전부 퍼블입니다.
   구조는 /isa 와 같고 액센트 색과 03~05 섹션 구성만 다릅니다.
   ============================================================ */

/* 시안 폰트 : Paperlogy(제목) / Pretendard(본문) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

.section-wrap {
    --u: calc(100vw / 1080);          /* 시안 1px */
    --purple: #ff4f6a;                /* 배지 · 강조 */
    --deep:   #ef546c;                /* 카드 · 강조 배경 */
    --light:  #fb6f85;                /* 조건 알약 */
    --teal:   #0887af;                /* 본문 강조 */
    --rate:   #0ba3be;                /* 세율 숫자 */
    --cta:    #0a87af;                /* 버튼 */
    --body:   #363636;
    --sub:    #5c5c5c;
    --line:   #dadada;
    background-color: #fff;
}
.section-wrap .inner-wrap { padding: 0; }

/* 줄바꿈은 모바일과 PC 시안이 다르다. 각자 자기 화면에서만 끊는다.
   숨겨도 단어가 붙지 않도록 마크업에서 br 앞에 공백을 둔다. */
.br-pc { display: none; }

/* 모바일 KV 안에 유진투자증권 로고가 들어 있어 공통 헤더(로고만 있는 흰 바)를 감춘다.
   PC 시안 KV 에는 로고가 없어 PC 에서는 그대로 둔다. (credit 과 같은 처리) */
.header-wrap { display: none; }
.section-wrap { padding-top: 0; }

.sec-kv, .sec-01, .sec-02, .sec-03, .sec-04, .sec-05, .sec-event, .sec-noti {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    color: #000; letter-spacing: 0;
}
/* 시안 폭 : 머리말·패널(카드) = 1004, 패널 안쪽 행·일반 콘텐츠 = 924.
   .inner 를 1004 로 두고, 924 짜리 블록만 따로 좁힌다. */
.section-wrap .section .inner { width: calc(var(--u) * 1004); margin: 0 auto; }
.sec-01 .spec,
.sec-03 .limit2,
.sec-03 .split,
.sec-05 .circle,
.sec-05 .btn-calc,
.sec-05 .notes,
.sec-event .banners,
.sec-noti .addr,
.sec-noti .noti-list {
    width: calc(var(--u) * 924); margin-left: auto; margin-right: auto;
}

/* ---------- KV ---------- */
.sec-kv { font-size: 0; line-height: 0; }
.sec-kv img { display: block; width: 100%; height: auto; }

/* ---------- 섹션 공통 머리말 ---------- */
.sec-head { text-align: center; }
.sec-head .badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: calc(var(--u) * 100); padding: calc(var(--u) * 10);
    border-radius: calc(var(--u) * 20); background-color: var(--purple);
    font-family: 'Paperlogy', sans-serif; font-weight: 800;
    font-size: calc(var(--u) * 32); line-height: 1.3; letter-spacing: calc(var(--u) * -.8);
    color: #fff;
}
.sec-head .badge.wide { min-width: calc(var(--u) * 131); }
.sec-head h2 {
    margin-top: calc(var(--u) * 10);
    font-family: 'Paperlogy', sans-serif; font-weight: 700;
    font-size: calc(var(--u) * 80); line-height: 1.5; color: #000;
}
.sec-head .lead {
    margin-top: calc(var(--u) * 24);
    font-family: 'Paperlogy', sans-serif; font-weight: 400;
    font-size: calc(var(--u) * 46); line-height: 1.3; letter-spacing: calc(var(--u) * -1.15);
}
.sec-head .lead b { font-weight: 600; }

/* 공통 각주 */
.notes { margin-top: calc(var(--u) * 40); }
.notes li {
    position: relative; padding-left: calc(var(--u) * 28);
    font-size: calc(var(--u) * 34); line-height: 1.65; color: #464646; word-break: keep-all;
}
.notes li:before {
    content: ''; position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 24);
    width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background-color: #464646;
}

/* ---------- 01 ---------- */
.sec-01 { padding: calc(var(--u) * 120) 0; background-color: #fff; }
.sec-01 .illust { margin: calc(var(--u) * 50) auto 0; width: calc(var(--u) * 800); }
.sec-01 .illust img { display: block; width: 100%; height: auto; }
.sec-01 .spec { margin-top: calc(var(--u) * 50); }
.sec-01 .row {
    display: flex; gap: calc(var(--u) * 32); align-items: center;
    padding: calc(var(--u) * 24) 0; border-bottom: calc(var(--u) * 2) solid var(--line);
}
.sec-01 .row:last-child { border-bottom: 0 none; }
.sec-01 .pill {
    display: flex; align-items: center; justify-content: center;
    width: calc(var(--u) * 260); padding: calc(var(--u) * 8) 0;
    border-radius: calc(var(--u) * 20); background-color: #eaeaea;
    font-family: 'Paperlogy', sans-serif; font-weight: 600;
    font-size: calc(var(--u) * 40); line-height: 1.65; color: #000;
}
.sec-01 .row dd {
    flex: 1 1 auto;
    font-weight: 500; font-size: calc(var(--u) * 40); line-height: 1.4;
    letter-spacing: calc(var(--u) * -2.4); color: var(--body); word-break: keep-all;
}

/* ---------- 02 ---------- */
.sec-02 { padding: calc(var(--u) * 120) 0; background-color: #f5f5f5; }
.sec-02 .merit {
    margin-top: calc(var(--u) * 46); padding: calc(var(--u) * 60) calc(var(--u) * 40);
    border-radius: calc(var(--u) * 60); background-color: #fff;
}
.sec-02 .merit li {
    display: flex; gap: calc(var(--u) * 40); align-items: center;
    padding: calc(var(--u) * 16) 0; border-bottom: calc(var(--u) * 2) solid var(--line);
}
.sec-02 .merit li:last-child { border-bottom: 0 none; }
.sec-02 .ico { flex: 0 0 auto; width: calc(var(--u) * 279); text-align: center; }
.sec-02 .ico img { display: inline-block; width: calc(var(--u) * 240); height: auto; }
.sec-02 .txt .t {
    font-family: 'Paperlogy', sans-serif; font-weight: 600;
    font-size: calc(var(--u) * 48); line-height: 1.65; color: #000; word-break: keep-all;
}
.sec-02 .txt .t b  { font-family: 'Paperlogy', sans-serif; font-weight: 700; color: var(--teal); }
.sec-02 .txt .t em { font-style: normal; color: var(--teal); }
.sec-02 .txt .d {
    font-weight: 500; font-size: calc(var(--u) * 36); line-height: 1.65; color: var(--body);
}

/* ---------- 03 납입한도·공제한도 ---------- */
.sec-03 { padding: calc(var(--u) * 120) 0; background-color: #fff; }
.sec-03 .limit2 { display: flex; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 52); }
.sec-03 .limit2 .card {
    flex: 1 1 0; padding: calc(var(--u) * 60) calc(var(--u) * 40);
    border-radius: calc(var(--u) * 30); background-color: #f3f3f3; text-align: center;
}
.sec-03 .limit2 .card.on { background-color: var(--deep); color: #fff; }
.sec-03 .limit2 .ct { font-family: 'Paperlogy', sans-serif; font-weight: 700; font-size: calc(var(--u) * 44); }
.sec-03 .limit2 .cv {
    margin-top: calc(var(--u) * 24); font-weight: 700;
    font-size: calc(var(--u) * 60); letter-spacing: calc(var(--u) * -2.4); color: var(--deep);
}
.sec-03 .limit2 .card.on .cv { color: #fff; }

.sec-03 .split { margin-top: calc(var(--u) * 80); text-align: center; }
.sec-03 .split .st {
    font-family: 'Paperlogy', sans-serif; font-weight: 500;
    font-size: calc(var(--u) * 50); color: #131313;
}
.sec-03 .bar2 {
    position: relative; display: flex; margin-top: calc(var(--u) * 44);
    height: calc(var(--u) * 100); border-radius: calc(var(--u) * 10);
    background-color: #f5f5f5; overflow: hidden;
}
.sec-03 .bar2 .seg {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: calc(var(--u) * 40);
    letter-spacing: calc(var(--u) * -1.6); color: #585858;
}
.sec-03 .bar2 .seg.a {
    /* 600만원 / 1,800만원 = 1/3. 고정폭이면 PC 에서 비율이 깨져 % 로 둔다. */
    flex: 0 0 33.333%; border-radius: calc(var(--u) * 10);
    background-color: var(--deep); color: #fff;
}
.sec-03 .bar2 .seg.b { flex: 1 1 auto; }
.sec-03 .bar-label { display: flex; margin-top: calc(var(--u) * 16); }
.sec-03 .bar-label span {
    font-weight: 600; font-size: calc(var(--u) * 36); line-height: 1.65;
    letter-spacing: calc(var(--u) * -2.16); color: #060606; text-align: center;
}
.sec-03 .bar-label .a { flex: 0 0 33.333%; }
/* 시안(6:106) : 600 블록 뒤로 197 띄우고 '추가 납입' 라벨 */
.sec-03 .bar-label .b { flex: 0 0 auto; margin-left: calc(var(--u) * 197); }
.sec-03 .split .sd {
    margin-top: calc(var(--u) * 34); font-size: calc(var(--u) * 34); line-height: 1.4;
    letter-spacing: calc(var(--u) * -1.36); color: var(--deep); word-break: keep-all;
}
.sec-03 .refund {
    display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 20);
    margin-top: calc(var(--u) * 52); padding: calc(var(--u) * 20) calc(var(--u) * 60);
    border: calc(var(--u) * 2) solid #eaeaea; border-radius: calc(var(--u) * 60);
}
.sec-03 .refund .rt {
    font-family: 'Paperlogy', sans-serif; font-weight: 700;
    font-size: calc(var(--u) * 54); letter-spacing: calc(var(--u) * -2.16); word-break: keep-all;
}
.sec-03 .refund .rd {
    margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 34); line-height: 1.4;
    letter-spacing: calc(var(--u) * -1.36); color: #464646; word-break: keep-all;
}
.sec-03 .refund .ri { flex: 0 0 auto; width: calc(var(--u) * 281); }
.sec-03 .refund .ri img { display: block; width: 100%; height: auto; }

/* ---------- 04 55세 이후 ---------- */
.sec-04 { padding: calc(var(--u) * 120) 0; background-color: #f5f5f5; }
.sec-04 .panel {
    margin-top: calc(var(--u) * 46); padding: calc(var(--u) * 80) calc(var(--u) * 40);
    border-radius: calc(var(--u) * 60); background-color: #fff; text-align: center;
}
.sec-04 .panel .pt {
    font-family: 'Paperlogy', sans-serif; font-weight: 600; font-size: calc(var(--u) * 50);
}
.sec-04 .cond {
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 20);
    margin-top: calc(var(--u) * 32);
}
.sec-04 .cond .pill {
    flex: 0 0 auto; padding: calc(var(--u) * 40) calc(var(--u) * 60);
    border-radius: calc(var(--u) * 100); background-color: var(--light);
    font-family: 'Paperlogy', sans-serif; font-weight: 700;
    font-size: calc(var(--u) * 44); color: #fff; white-space: nowrap;
}
.sec-04 .cond .plus { flex: 0 0 auto; width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.sec-04 .panel .pt2 {
    margin-top: calc(var(--u) * 80);
    font-family: 'Paperlogy', sans-serif; font-weight: 500; font-size: calc(var(--u) * 50);
}
.sec-04 .rates { margin-top: calc(var(--u) * 30); }
.sec-04 .rates li {
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 435);
    padding: calc(var(--u) * 26) calc(var(--u) * 20);
    border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 20);
}
.sec-04 .rates li + li { margin-top: calc(var(--u) * 20); }
.sec-04 .rates .age {
    font-weight: 600; font-size: calc(var(--u) * 48); line-height: 1.65;
    letter-spacing: calc(var(--u) * -2.88);
}
.sec-04 .rates .pct {
    font-weight: 600; font-size: calc(var(--u) * 80); line-height: 1.65;
    letter-spacing: calc(var(--u) * -4.8); color: var(--rate);
}

/* ---------- 05 예상 월 수령액 ---------- */
.sec-05 { padding: calc(var(--u) * 120) 0; background-color: #fff; }
.sec-05 .circle { margin: calc(var(--u) * 40) auto 0; width: calc(var(--u) * 500) !important; }
.sec-05 .circle img { display: block; width: 100%; height: auto; }
.sec-05 .btn-calc {
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 16);
    margin-top: calc(var(--u) * 58); padding: calc(var(--u) * 40) 0;
    border-radius: calc(var(--u) * 12); background-color: var(--cta); cursor: pointer;
    font-family: 'Paperlogy', sans-serif; font-weight: 500;
    font-size: calc(var(--u) * 60); line-height: 1.4; letter-spacing: calc(var(--u) * -1.5); color: #fff;
}
.sec-05 .btn-calc .arw {
    width: calc(var(--u) * 32); height: calc(var(--u) * 32);
    border-top: calc(var(--u) * 6) solid #fff; border-right: calc(var(--u) * 6) solid #fff;
    transform: rotate(45deg);
}

/* ---------- EVENT ---------- */
.sec-event { padding: calc(var(--u) * 120) 0; background-color: #e1e1e1; }
.sec-event .banners { margin-top: calc(var(--u) * 100); }
.sec-event .banner { display: block; font-size: 0; line-height: 0; }
.sec-event .banner + .banner { margin-top: calc(var(--u) * 20); }
.sec-event a.banner { cursor: pointer; }
.sec-event .banner img { display: block; width: 100%; height: auto; }

/* ---------- 유의사항 ---------- */
.sec-noti { padding: calc(var(--u) * 80) 0; background-color: #fff; }
.sec-noti .addr {
    font-weight: 500; font-size: calc(var(--u) * 28); line-height: 1.6;
    text-align: center; color: #000; word-break: keep-all;
}
.sec-noti .noti-ttl {
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
    margin-top: calc(var(--u) * 60);
    font-weight: 600; font-size: calc(var(--u) * 34); line-height: 1.65; color: #212121;
}
.sec-noti .noti-ttl img { width: calc(var(--u) * 60); height: calc(var(--u) * 60); }
.sec-noti .noti-list { margin-top: calc(var(--u) * 20); }
.sec-noti .noti-list li {
    position: relative; margin-bottom: calc(var(--u) * 16); padding-left: calc(var(--u) * 26);
    font-weight: 500; font-size: calc(var(--u) * 28); line-height: 1.6;
    color: #696969; word-break: keep-all;
}
.sec-noti .noti-list li:last-child { margin-bottom: 0; }
.sec-noti .noti-list li:before {
    content: ''; position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 18);
    width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background-color: #696969;
}

/* ============================================================
   PC — 시안 1920px, 콘텐츠 1200px.
   MO 시안이 2배수라 --u 만 .5px 로 바꾸면 치수가 그대로 맞는다.
   달라지는 건 '세로로 쌓던 것을 가로로 펴는' 레이아웃뿐.
   ============================================================ */
@media all and (min-width: 1024px) {
    .header-wrap { display: block; }
    .section-wrap { --u: .5px; padding-top: 4.8rem; }
    .section-wrap .section .inner { width: 1000px; }
    .sec-01 .spec, .sec-03 .limit2, .sec-03 .split,
    .sec-05 .btn-calc, .sec-05 .notes,
    .sec-noti .addr, .sec-noti .noti-list { width: 920px; }

    /* 01 : 정보 왼쪽 · 일러스트 오른쪽 */
    .sec-01 .sec-body { display: flex; flex-direction: row-reverse; align-items: center; gap: 48px; }
    /* 시안 6:819 : 일러스트는 폭이 아니라 '높이' 가 355px 로 잡혀 있다.
       영역 폭에 맞춰 늘리면 시안보다 커지므로 높이를 고정한다. */
    .sec-01 .illust { flex: 0 0 auto; width: auto; margin: 0; }
    .sec-01 .illust img { width: auto; height: 355px; }
    .sec-01 .spec { flex: 1 1 auto; margin: 0; }

    /* 03 : 환급 카드 가로 배치 유지 / 04 : 세율표 간격 */
    .sec-03 .refund { padding: 20px 60px; }


    /* 버튼은 모바일(전체폭·각진 모서리)과 달리 580x110 알약형 (시안 6:935).
       위 48 / 아래 28 간격, 주의문구는 가운데 정렬 20px */
    .sec-05 .btn-calc {
        width: 580px; height: 110px; margin: 40px auto 0; padding: 0;
        border-radius: 100px; gap: 12px;
        font-size: 40px; letter-spacing: -1px;
    }
    .sec-05 .btn-calc .arw {
        width: 20px; height: 20px;
        border-top-width: 4px; border-right-width: 4px;
    }
    .sec-05 .notes { margin-top: 23px; text-align: center; }
    .sec-05 .notes li {
        display: inline-block; text-align: left;
        font-size: 20px; padding-left: 14px;
    }
    .sec-05 .notes li:before { left: 2px; top: 13px; width: 4px; height: 4px; }

    /* 시안 6:930 : 원형 500 / 콘텐츠 1200 = 41.7%.
       여기는 콘텐츠가 1000 이므로 같은 비율인 417px 로 맞춘다. */
    .sec-05 .circle { width: 417px !important; margin: 40px auto 0; }

    /* 이벤트 배너 : 모바일은 세로 1열, PC 는 2x2 바둑판 (시안 6:981).
       시안은 왼쪽 열에 1·2번, 오른쪽 열에 3·4번이 들어가는 '열 우선' 배치라
       grid-auto-flow: column 으로 채운다. */
    .sec-event .banners {
        display: grid; width: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        gap: 17px;
    }
    .sec-event .banner + .banner { margin-top: 0; }

    /* 시안(6:911) : 세율 3줄은 패널 1200 안에서 좌우 138 씩 띄워 924 로 들어간다.
       패널 폭이 1000 이므로 같은 비율(77%)이 되게 좌우 여백을 115 로 준다.
       모바일은 시안대로 40u 여백이라 건드리지 않는다. */
    .sec-04 .panel { padding: 40px 115px; }

    /* ---- PC 는 모바일의 1/2 이 아니다. 시안(콘텐츠 1200)을 1000 으로 환산한 값. ---- */
    .sec-01, .sec-02, .sec-03, .sec-04, .sec-05, .sec-event {
        padding-top: 100px; padding-bottom: 100px;
    }
    .sec-head .badge {
        min-width: 73px; height: 40px; padding: 0;
        border-radius: 10px; font-size: 20px; letter-spacing: -.5px;
    }
    .sec-head .badge.wide { min-width: 116px; }
    .sec-head h2   { margin-top: 7px;  font-size: 57px; line-height: 1.2; }
    .sec-head .lead { margin-top: 20px; font-size: 27px; line-height: 1.4; letter-spacing: -.67px; }

    /* 줄바꿈 전환 : 모바일용은 감추고 PC 용을 살린다 */
    .br-mo { display: none; }
    .br-pc { display: inline; }

    /* 02 : 3단 카드 */
    .sec-02 .merit { display: flex; gap: 20px; padding: 0; border-radius: 0; background: none; }
    .sec-02 .merit li {
        /* 시안 카드 382 의 세로 여백을 320 비율로 환산 : 위 40→34 / 아래 57→48 */
        flex: 1 1 0; display: block; padding: 34px 30px 48px; border-bottom: 0 none;
        border-radius: 20px; background-color: #fff; text-align: center;
    }
    /* 시안 ICON 영역은 카드 382 안에서 279x260 (= 폭의 73%).
       카드가 320 이므로 같은 비율인 234x218 박스를 만들고 그 안에 꽉 맞춘다.
       박스를 고정해야 PNG 별 여백 차이로 제목 높이가 어긋나지 않는다. */
    .sec-02 .ico {
        /* 시안 ICON 프레임은 279 지만 그 안의 그림은 220 만 차지한다(프레임의 79%).
           우리 PNG 는 여백이 거의 없어 프레임을 꽉 채우면 시안보다 커진다.
           그래서 '보이는 그림' 이 시안 비율(카드의 57.6%)이 되도록 184 로 맞춘다. */
        width: 184px; height: 218px; margin: 0 auto;   /* 고정 폭이라 auto 로 가운데 */
        display: flex; align-items: center; justify-content: center;
    }
    .sec-02 .ico img { width: 100%; height: 100%; object-fit: contain; }
    /* 아이콘 → 제목 16→13, 제목 → 설명 10→8 (시안 간격을 320 비율로) */
    .sec-02 .txt { margin-top: 13px; }
    .sec-02 .txt .d { margin-top: 8px; }

    /* 시안은 모든 섹션에서 머리말 ↔ 첫 콘텐츠 간격이 48(=40px) 이다 */
    .sec-01 .sec-body, .sec-02 .merit, .sec-03 .limit2,
    .sec-04 .panel, .sec-05 .circle, .sec-event .banners { margin-top: 40px; }

    .sec-noti { padding-top: 67px; padding-bottom: 67px; }
}