@charset "UTF-8";
/* ==========================================================================
   全聯當舖 — 前台樣式
   設計稿基準：1920 × N，內容容器 1608px（左右各 156px）
   1. Design tokens
   2. Base
   3. Layout / container
   4. Buttons
   5. Header / nav / dropdown / mobile menu
   6. Hero banner
   7. Section head（英文標＋中文標＋敘述）
   8. 服務卡片（借款專案卡）
   9. 首頁 About
  10. 流程（四圓）
  11. 最新消息
  12. CTA（faq_bg）
  13. Footer
  14. 浮動元件（back to top / 手機底部列）
  15. 內頁：公司簡介 / 借款專案 / 借款流程 / 最新消息 / 常見問答
  16. RWD
   ========================================================================== */

/* ---------- 0. 設計單位（等比縮放的核心） ----------
   設計稿基準寬 1920。--u 代表「設計稿上的 1px」，版心、字級、間距、圓角、
   穿越偏移全部以 --u 表示，整張版面就能隨視窗等比伸縮，比例永遠等於設計稿。

   ・≤1279（平板／手機）：回到 1px，交給下方 RWD 區塊用手機專用數值接手
   ・1280–1919（筆電）：隨視窗等比，1920 分之 1 → 0.0520833vw（1920 時剛好等於 1px）
   ・≥1920：鎖定 1px，版面維持設計稿原尺寸置中，兩側留白加寬

   下限取 1280：再往下等比縮的話內文會小於 13px，可讀性換不回比例的正確；
   1280 以下直接切平板版型（漢堡選單、固定字級）。

   上限鎖在 1920 而不是跟著素材組放大到 2560：圖示、人像、內頁大圖都只有 1x
   （設計稿原尺寸）一種，一旦放大就是點陣圖被拉伸，整頁會有「畫質變差」的糊感。
   背景照（banner / faq_bg / 02pro_bg）雖然有 2560 素材可以撐，但單獨把背景放大、
   前景元件維持原尺寸反而更不協調，所以整組一起鎖定。

   刻意不用 clamp() 一行寫完：≤1279 需要的是「跳回 1px 換平板版型」，
   而不是「停在 0.667px 繼續縮」，兩者在平板上的視覺差很大。 */
:root {
    --u: 1px;
}

@media (min-width: 1280px) and (max-width: 1919.98px) {
    :root {
        --u: 0.0520833vw;
    }
}

/* ---------- 1. Design tokens ---------- */
:root {
    /* 品牌色 */
    --red: #f5313b;
    --red-deep: #f5323b;
    --red-soft: #f27e7e;
    --red-45: #f54545;
    --red-card-title: #e13e45;
    --grad-red: linear-gradient(90deg, #f5313a 0%, #f27e7e 100%);
    --grad-btn: linear-gradient(90deg, #f5313a 0%, #f27e7e 100%);
    --grad-line-btn: linear-gradient(90deg, #f54444 0%, #f28080 100%);
    --grad-menu-border: linear-gradient(90deg, #fb7474 0%, #ffc3c6 100%);
    --grad-dropdown: linear-gradient(180deg, #fb6969 0%, #f54545 100%);
    --grad-card-border: linear-gradient(90deg, #f5313b 0%, #ff9696 100%);

    /* 文字色 */
    --navy: #2e3154;
    --text: #5c5c5c;

    /* 底色 */
    --card-shade: #fcf3f3;
    --card-shade-02: #f8d0d0;
    --gray-block: #efefef;
    --faq-item-bg: #f4f4f4;
    --news-border: #d7d7d7;
    --footer-bg: #3c3c3c;
    --footer-bottom-bg: #515151;
    --footer-text: #efefef;
    --footer-muted: #8b8b8b;
    --green-line: #5ca824;
    --green-text: #26a30e;

    /* CTA 底圖（faq_bg）頂端那一列的橫向色帶：左側冷灰、右側暖米，約 37–47% 過渡。
       平板以下底圖只鋪在區塊下方當橫幅，上方留白用這道漸層接色才不會出現接縫。
       768 / 1024 / 1440 三張素材的頂列色與過渡位置一致，可以共用同一組值。 */
    --faq-bg-top: linear-gradient(90deg, #e4e6e9 0 38%, #f8f6f1 47% 100%);

    /* 版面 */
    --container-max: calc(1608 * var(--u));
    --gutter: 20px;

    /* 字級（以 1920 設計稿量測值為基準） */
    --fs-en-title: calc(54 * var(--u));
    --fs-sec-tw: calc(26 * var(--u));
    --fs-body: calc(20 * var(--u));
    --fs-h2: calc(32 * var(--u));
    --lh-body: 1.75;

    /* 層級 */
    --z-header: 60;
    --z-drawer: 90;
    --z-backdrop: 85;
    --z-float: 50;
}

/* ---------- 2. Base ---------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: "Noto Sans TC", "Inter", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: -0.032em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease, opacity .25s ease;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.45;
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.en-font,
.sec-head__en,
.news-item__date,
.process-step__no,
.flow-card__no,
.faq-item__no,
.news-detail__date,
.process-head__right h3 em,
.loan-process__title em,
.flow-head h2 em,
.faq-cta__lineid {
    font-family: "Poppins", "Inter", sans-serif;
    letter-spacing: normal;
}

/* ---------- 3. Layout ---------- */
.ql-container {
    width: min(100% - (var(--gutter) * 2), var(--container-max));
    margin-inline: auto;
}

/* 從容器左緣往右側滿版出血的面板用 */
.ql-bleed-right {
    padding-left: max(var(--gutter), calc((100% - var(--container-max)) / 2));
}

.ql-section {
    position: relative;
}

/* 進場動畫 */
.reveal {
    opacity: 0;
    transform: translateY(calc(28 * var(--u)));
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 4. Buttons ---------- */
.btn-arrow::after {
    content: "";
    display: inline-block;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    margin-left: calc(14 * var(--u));
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .25s ease;
}

.btn-arrow:hover::after {
    transform: rotate(45deg) translate(2px, -3px);
}

.ql-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    border: 0;
    border-radius: 999px;
    font-size: calc(20 * var(--u));
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-align: center;
}

/* 深藍膠囊鈕 */
.ql-btn--navy {
    min-height: calc(44 * var(--u));
    padding: 0 calc(24 * var(--u));
    background: var(--navy);
    color: #fff;
}

.ql-btn--navy:hover {
    background: #3d4170;
    color: #fff;
}

/* 紅色漸層膠囊鈕（卡片內「了解更多」） */
.ql-btn--red {
    min-height: calc(40 * var(--u));
    padding: 0 calc(31 * var(--u));
    background: var(--grad-btn);
    color: #fff;
    font-size: calc(19 * var(--u));
    font-weight: 500;
}

.ql-btn--red:hover {
    filter: brightness(1.06);
    color: #fff;
}

/* 實心紅鈕（最新消息「觀看更多」） */
.ql-btn--solid-red {
    min-height: calc(44 * var(--u));
    padding: 0 calc(26 * var(--u));
    background: var(--red);
    color: #fff;
}

.ql-btn--solid-red:hover {
    background: #e2222c;
    color: #fff;
}

/* LINE 綠鈕 */
.ql-btn--line {
    min-height: calc(46 * var(--u));
    padding: 0 calc(26 * var(--u)) 0 calc(18 * var(--u));
    background: var(--green-line);
    color: #fff;
}

.ql-btn--line img {
    width: calc(32 * var(--u));
}

.ql-btn--line:hover {
    background: #4e9418;
    color: #fff;
}

/* ---------- 5. Header ---------- */
/* 固定在視窗頂端。主視覺區維持透明（設計稿的樣子），捲動後才補白底＋陰影，
   並收窄上下留白，避免固定列一直吃掉可視高度。 */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    padding-top: calc(42 * var(--u));
    transition: padding .28s ease, background-color .28s ease, box-shadow .28s ease;
}

body.is-scrolled .site-header {
    padding-block: calc(14 * var(--u));
    background: #fff;
    box-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(46, 49, 84, .1);
}

.site-header__inner {
    display: flex;
    align-items: center;
}

.site-logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.site-logo img {
    width: calc(312 * var(--u));
    max-width: 100%;
}

/* 導覽膠囊：與右側 LINE 鈕同組靠右，之間固定 22u */
.main-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: calc(63 * var(--u));
    padding: 0 calc(72 * var(--u));
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--grad-menu-border) border-box;
}

.main-nav__list {
    display: flex;
    align-items: center;
    gap: calc(48 * var(--u));
}

.main-nav__item {
    position: relative;
}

.main-nav__link {
    display: block;
    color: var(--navy);
    font-size: calc(20 * var(--u));
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.main-nav__item.is-active > .main-nav__link,
.main-nav__item:hover > .main-nav__link,
.main-nav__item:focus-within > .main-nav__link {
    color: var(--red);
}

.main-nav__item.is-active > .main-nav__link::before,
.main-nav__item:hover > .main-nav__link::before,
.main-nav__item:focus-within > .main-nav__link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-17 * var(--u));
    width: calc(11 * var(--u));
    height: calc(11 * var(--u));
    border-radius: 50%;
    background: var(--grad-red);
    transform: translateY(-50%);
}

/* 下拉選單 */
.main-nav__drop {
    position: absolute;
    top: calc(100% + calc(22 * var(--u)));
    left: 50%;
    width: calc(210 * var(--u));
    padding: calc(9 * var(--u)) 0 calc(6 * var(--u));
    border-radius: calc(8 * var(--u));
    background: var(--grad-dropdown);
    transform: translateX(-50%) translateY(calc(6 * var(--u)));
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    overflow: hidden;
}

.main-nav__item:hover .main-nav__drop,
.main-nav__item:focus-within .main-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 補上 hover 空隙，避免滑鼠移動時選單關閉 */
.main-nav__item.has-drop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: calc(210 * var(--u));
    height: calc(26 * var(--u));
    transform: translateX(-50%);
}

.main-nav__drop a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(40.5 * var(--u));
    color: #fff;
    font-size: calc(18 * var(--u));
    font-weight: 500;
    text-align: center;
}

.main-nav__drop a:hover,
.main-nav__drop a.is-active {
    background: #fff;
    color: var(--red-45);
}

/* 加 LINE 按鈕 */
.header-line-btn {
    margin-left: calc(22 * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    flex: 0 0 auto;
    height: calc(62 * var(--u));
    padding: 0 calc(32 * var(--u)) 0 calc(28 * var(--u));
    border-radius: 999px;
    background: var(--grad-line-btn);
    color: #fff;
    font-size: calc(20 * var(--u));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.header-line-btn img {
    width: calc(40 * var(--u));
}

.header-line-btn > span {
    letter-spacing: .03em;
}

.header-line-btn:hover {
    filter: brightness(1.06);
    color: #fff;
}

/* 手機漢堡：桌機隱藏，行動版時要靠齊容器右緣（此時 .main-nav 已 display:none，
   auto margin 需改掛在按鈕上，否則按鈕會緊貼 logo） */
.nav-toggle {
    display: none;
    margin-left: auto;
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
    padding: 0;
    border: 0;
    border-radius: calc(10 * var(--u));
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: calc(28 * var(--u));
    height: 3px;
    margin: calc(5 * var(--u)) auto;
    border-radius: 2px;
    background: var(--red-45);
    transition: transform .25s ease, opacity .2s ease;
}

/* 手機 off-canvas 選單 */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: rgba(221, 221, 221, .8);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

body.menu-open .drawer-backdrop {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-drawer);
    width: 55%;
    min-width: calc(264 * var(--u));
    max-width: calc(340 * var(--u));
    /* 設計稿的抽屜是「停在底部固定列上方」，不是延伸到螢幕底再被蓋住。
       扣掉固定列高度（79px），最後一項才不會被壓住點不到。 */
    height: calc(100vh - 79px);
    height: calc(100dvh - 79px);
    padding: 0 0 calc(24 * var(--u));
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .28s ease;
}

body.menu-open .drawer {
    transform: translateX(0);
}

body.menu-open {
    overflow: hidden;
}

.drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(70 * var(--u));
    height: calc(75 * var(--u));
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--red-45);
    font-size: calc(32 * var(--u));
    line-height: 1;
    cursor: pointer;
}

.drawer__list {
    padding: calc(38 * var(--u)) calc(24 * var(--u)) 0;
}

.drawer__list li + li {
    border-top: 1px solid #f8dcdc;
}

.drawer__list a {
    display: block;
    padding: calc(15 * var(--u)) calc(8 * var(--u));
    color: #524a3d;
    font-size: calc(19 * var(--u));
    font-weight: 500;
    text-align: center;
}

.drawer__list a.is-active,
.drawer__list a:hover {
    color: var(--red-45);
}

/* ---------- 6. Hero banner ---------- */
.hero {
    position: relative;
    z-index: 1;
    line-height: 0;
}

/* flex 項目的自動最小尺寸會被圖片的內在寬度撐開，需明確 min-width:0 */
.hero .swiper,
.hero .swiper-wrapper {
    width: 100%;
    min-width: 0;
}

.hero .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.hero picture {
    display: block;
    width: 100%;
}

.hero .swiper-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.hero .swiper-pagination {
    bottom: calc(18 * var(--u));
}

.hero .swiper-pagination-bullet {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    background: #c9c9c9;
    opacity: 1;
}

.hero .swiper-pagination-bullet-active {
    width: calc(26 * var(--u));
    border-radius: calc(6 * var(--u));
    background: var(--red);
}

/* ---------- 7. Section head ---------- */
.sec-head {
    text-align: center;
}

.sec-head__en {
    display: block;
    margin: 0;
    font-family: "Poppins", "Inter", sans-serif;
    font-size: var(--fs-en-title);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    font-feature-settings: normal;
    background: var(--grad-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sec-head__tw {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(11 * var(--u));
    margin-top: calc(7 * var(--u));
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
    line-height: 1.35;
}

.sec-head__tw::before {
    content: "";
    flex: 0 0 auto;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    border-radius: 50%;
    background: var(--grad-red);
}

.sec-head__desc {
    margin-top: calc(20 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.6;
}

/* ---------- 8. 借款專案卡片 ---------- */
.loan-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(40 * var(--u)) calc(62 * var(--u));
    max-width: calc(1118 * var(--u));
    margin-inline: auto;
}

.loan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(405 * var(--u));
    padding: calc(21 * var(--u)) calc(28 * var(--u)) calc(43 * var(--u));
    border: 1px solid transparent;
    border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) 0;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--grad-card-border) border-box;
    box-shadow: calc(-7 * var(--u)) calc(8 * var(--u)) 0 var(--card-shade);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.loan-card:hover {
    transform: translate(-2px, -3px);
    box-shadow: calc(-9 * var(--u)) calc(12 * var(--u)) 0 var(--card-shade);
}

.loan-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(74 * var(--u));
}

.loan-card__icon img {
    max-height: calc(74 * var(--u));
    width: auto;
}

.loan-card__title {
    margin-top: calc(14 * var(--u));
    color: var(--red-card-title);
    font-size: calc(26 * var(--u));
    font-weight: 700;
    line-height: 1.3;
}

.loan-card__desc {
    margin-top: calc(13 * var(--u));
    max-width: calc(220 * var(--u));
    margin-inline: auto;
    color: var(--text);
    font-size: calc(20 * var(--u));
    line-height: 1.5;
    text-align: left;
}

.loan-card .ql-btn {
    margin-top: calc(27 * var(--u));
}

/* ---------- 9. 首頁 About ---------- */
.home-about {
    position: relative;
    padding-block: calc(106 * var(--u)) 0;
}

.home-about__scene {
    position: relative;
}

/* margin-right / padding-left 的百分比皆以「包含塊＝滿版場景」為基準，
   因此可同時做到：右緣切齊容器右緣、文字左緣切齊容器左緣。 */
.home-about__box {
    position: relative;
    min-height: calc(612 * var(--u));
    margin-right: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    padding: calc(122 * var(--u)) 0 calc(60 * var(--u)) max(var(--gutter), calc((100% - var(--container-max)) / 2));
    border-radius: 0 calc(30 * var(--u)) calc(30 * var(--u)) 0;
    background: var(--gray-block);
}

.home-about__text {
    max-width: calc(862 * var(--u));
}

.home-about__title {
    font-size: var(--fs-h2);
    line-height: 1.4;
}

.home-about__body {
    margin-top: calc(25 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
}

.home-about__body p + p {
    margin-top: calc(28 * var(--u));
}

.home-about__btns {
    display: flex;
    flex-wrap: wrap;
    gap: calc(24 * var(--u));
    margin-top: calc(32 * var(--u));
}

.home-about__btns .ql-btn {
    min-height: calc(44 * var(--u));
}

.home-about__btns img {
    width: calc(24 * var(--u));
}

/* 人像（含紅色 e 筆刷）永遠出血到視窗右緣——這一區在設計上是滿版構圖：
   灰塊向左出血到 x=0、人像向右出血到視窗右緣，高解析度也維持貼邊。 */
.home-about__pic {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(calc(850 * var(--u)), 44.5vw);
    pointer-events: none;
}

.home-about__pic img {
    display: block;
    width: 100%;
}

/* ---------- 10. 流程（四圓） ---------- */
.home-process {
    position: relative;
    padding-block: calc(81 * var(--u)) calc(61 * var(--u));
    background: url("../images/00-hp/pro_bg_point.png") top center repeat;
}

.process-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(35 * var(--u));
}

.process-head__left {
    text-align: left;
}

.process-head__left .sec-head__tw {
    justify-content: flex-start;
}

.process-head__divider {
    width: 1px;
    align-self: stretch;
    background: #f27d7d;
}

.process-head__right h3 {
    font-size: var(--fs-h2);
    line-height: 1.35;
}

.process-head__right h3 em {
    font-style: normal;
    color: var(--red-deep);
    font-family: "Poppins", sans-serif;
}

.process-head__right p {
    margin-top: calc(14 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(33 * var(--u));
    max-width: calc(1526 * var(--u));
    margin: calc(77 * var(--u)) auto 0;
}

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 8% 12%;
    border: 1px solid var(--red-deep);
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.process-step__no {
    position: absolute;
    top: 2.6%;
    left: 5.95%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20.6%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--red-deep);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: calc(30 * var(--u));
    font-weight: 700;
    line-height: 1;
}

.process-step__icon {
    height: calc(74 * var(--u));
    display: flex;
    align-items: flex-end;
}

.process-step__icon img {
    max-height: calc(74 * var(--u));
    width: auto;
}

.process-step__title {
    margin-top: calc(25 * var(--u));
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
    line-height: 1.3;
}

.process-step__desc {
    margin-top: calc(17 * var(--u));
    max-width: calc(230 * var(--u));
    margin-inline: auto;
    color: var(--text);
    font-size: calc(20 * var(--u));
    line-height: 1.8;
}

.home-process__more {
    margin-top: calc(42 * var(--u));
    text-align: center;
}

/* ---------- 11. 最新消息 ---------- */
.home-news {
    position: relative;
    z-index: 2;
}

/* 面板左緣切齊容器左緣、右側滿版出血；內容再置中於全站容器範圍內 */
.home-news__panel {
    margin-left: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    padding: calc(58 * var(--u)) max(var(--gutter), calc((100% - var(--container-max)) / 2)) calc(59 * var(--u)) 0;
    background: url("../images/00-hp/news_bg1920.png") center / 100% 100% no-repeat;
}

.home-news__inner {
    width: 100%;
    margin-inline: auto;
}

/* 設計稿：標題與按鈕置中於容器，卡片群靠齊容器右緣（寬 1517u） */
.home-news .news-list {
    width: min(100%, calc(1517 * var(--u)));
    margin-left: auto;
}

.home-news .sec-head {
    margin-bottom: calc(43 * var(--u));
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: calc(29 * var(--u));
}

.news-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: calc(282 * var(--u));
    padding: calc(20 * var(--u)) calc(45 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
    border: 1px solid var(--news-border);
    border-radius: calc(20 * var(--u));
    background: #fff;
    box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(231, 231, 231, .75);
}

.news-item__pic {
    flex: 0 0 calc(416 * var(--u));
    max-width: calc(416 * var(--u));
    height: calc(240 * var(--u));
    overflow: hidden;
    border-radius: calc(18 * var(--u));
}

.news-item__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.news-item:hover .news-item__pic img {
    transform: scale(1.05);
}

.news-item__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    min-height: calc(240 * var(--u));
    padding-left: calc(33 * var(--u));
}

.news-item__date {
    align-self: flex-end;
    color: var(--navy);
    font-family: "Poppins", sans-serif;
    font-size: calc(17 * var(--u));
    line-height: 1.4;
    letter-spacing: .02em;
}

.news-item__title {
    margin-top: calc(20 * var(--u));
    color: var(--navy);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    line-height: 1.45;
}

.news-item:hover .news-item__title {
    color: var(--red);
}

.news-item__excerpt {
    margin-top: calc(12 * var(--u));
    color: var(--text);
    font-size: calc(20 * var(--u));
    line-height: 1.8;
}

.news-item__excerpt span {
    color: var(--navy);
}

.news-item__more {
    margin-top: auto;
    align-self: flex-end;
}

.home-news__more {
    margin-top: calc(41 * var(--u));
    text-align: center;
}

/* ---------- 12. CTA（faq_bg） ---------- */
.home-cta {
    position: relative;
    z-index: 1;
    margin-top: calc(-297 * var(--u));
    padding-block: calc(381 * var(--u)) calc(114 * var(--u));
    background: url("../images/00-hp/faq_bg1920.png") center bottom / cover no-repeat;
}

.home-cta__inner {
    max-width: calc(783 * var(--u));
    margin-left: auto;
    margin-right: 0;
}

.home-cta h2 {
    font-size: var(--fs-h2);
    line-height: 1.4;
}

.home-cta__body {
    margin-top: calc(20 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
}

.home-cta__body p + p {
    margin-top: calc(34 * var(--u));
}

.home-cta__btns {
    display: flex;
    flex-wrap: wrap;
    gap: calc(24 * var(--u));
    margin-top: calc(35 * var(--u));
}

/* ---------- 13. Footer ---------- */
.site-footer {
    border-top: calc(8 * var(--u)) solid var(--red-deep);
    background: var(--footer-bg);
    color: var(--footer-text);
    font-size: calc(19 * var(--u));
    line-height: 1.4;
}

.site-footer__top {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: calc(12 * var(--u)) calc(20 * var(--u));
    padding-top: calc(54 * var(--u));
}

.site-footer__logo img {
    width: calc(312 * var(--u));
}

.site-footer__slogan {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    padding-bottom: calc(6 * var(--u));
    color: var(--footer-text);
    font-size: calc(19 * var(--u));
    font-weight: 500;
}

.site-footer__slogan::before {
    content: "\300B";
    color: var(--red-deep);
    font-weight: 700;
}

.site-footer__social {
    display: flex;
    gap: calc(21 * var(--u));
    margin-left: auto;
    padding-bottom: calc(32 * var(--u));
}

.site-footer__social img {
    width: calc(40 * var(--u));
}

.site-footer__social a:hover {
    opacity: .7;
}

.site-footer__divider {
    height: 1px;
    margin-top: calc(23 * var(--u));
    background: rgba(239, 239, 239, .35);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: calc(151 * var(--u)) calc(524 * var(--u)) calc(313 * var(--u)) minmax(0, 1fr);
    gap: 0;
    padding: calc(35 * var(--u)) 0 calc(30 * var(--u));
}

.footer-qr img {
    width: calc(130 * var(--u));
}

.footer-visits {
    white-space: nowrap;
    margin-top: calc(28 * var(--u));
    color: var(--footer-text);
    font-size: calc(19 * var(--u));
}

.footer-info {
    padding-top: calc(13 * var(--u));
}

.footer-info li {
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    margin-bottom: calc(14 * var(--u));
}

.footer-info img {
    width: calc(24 * var(--u));
    margin-top: calc(4 * var(--u));
}

.footer-links__title,
.footer-notes__title {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-bottom: calc(14 * var(--u));
    color: var(--footer-text);
    font-weight: 400;
}

.footer-links__title::before,
.footer-notes__title::before {
    content: "";
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    background: var(--red-deep);
    transform: rotate(45deg);
}

.footer-links,
.footer-notes {
    padding-top: calc(13 * var(--u));
}

.footer-links li {
    margin-bottom: calc(14 * var(--u));
}

.footer-links a:hover {
    color: var(--red-soft);
}

.footer-notes ol {
    counter-reset: fn;
}

.footer-notes__title {
    margin-bottom: 1px;
}

.footer-notes li {
    margin-bottom: calc(4 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.33;
}

.footer-notes__example {
    margin-top: calc(12 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.33;
}

.site-footer__bottom {
    background: var(--footer-bottom-bg);
    color: var(--footer-muted);
    font-size: calc(17 * var(--u));
}

.site-footer__bottom .ql-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(8 * var(--u));
    min-height: calc(64 * var(--u));
    /* 手機版文字會斷成 2–3 行、把 min-height 撐開，沒有上下留白就會貼到色塊邊緣。
       桌機版有 min-height 撐著，加了也不會變高。 */
    padding-block: calc(14 * var(--u));
    text-align: center;
}

.site-footer__bottom img {
    width: calc(24 * var(--u));
}

/* ---------- 14. 浮動元件 ---------- */
.back-to-top {
    position: fixed;
    right: calc(42 * var(--u));
    bottom: calc(48 * var(--u));
    z-index: var(--z-float);
    width: calc(60 * var(--u));
    height: calc(60 * var(--u));
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}

.back-to-top.is-show {
    opacity: 1;
    visibility: visible;
}

.back-to-top img {
    display: block;
    width: calc(60 * var(--u));
}

/* 用 grid 等分三格：flex 的 `flex:1 1 0` 在寬度不能被 3 整除時，
   剩餘的次像素會全部塞給其中一格，三塊底色寬度會差 1px。 */
.mobile-bar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 95;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--u));
    min-height: calc(79 * var(--u));
    color: #fff;
    font-size: calc(17 * var(--u));
    font-weight: 500;
}

.mobile-bar img {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
}

.mobile-bar__line {
    background: linear-gradient(90deg, #8acd50 0%, #56ae20 100%);
}

.mobile-bar__phone {
    background: linear-gradient(90deg, #f67d60 0%, #e95d25 100%);
}

.mobile-bar__map {
    background: linear-gradient(90deg, #06a7c4 0%, #0084af 100%);
}

/* 半調點裝飾：純背景元素，必須壓在所有內容之下。
   絕對定位元素即使 z-index:0 也會蓋在同層的靜態內容（文字、卡片）上，
   所以要用負值；負 z-index 的子元素會畫在父層背景之上、一般內容之下，
   而這些區塊本身沒有底色，裝飾仍然看得到。 */
.deco {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.deco--l {
    left: 0;
    width: calc(384 * var(--u));
}

.deco--r {
    right: 0;
    width: calc(344 * var(--u));
}

/* ---------- 15. 內頁 ---------- */
/* 15-1 公司簡介 */
.about-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(825 * var(--u));
    gap: calc(83 * var(--u));
    align-items: start;
}

.about-row--reverse {
    grid-template-columns: calc(470 * var(--u)) minmax(0, 1fr);
    gap: calc(86 * var(--u));
}

/* 文字欄比照片略低起始，對齊設計稿 */
.about-row__text {
    padding-top: calc(28 * var(--u));
}

.about-row--reverse .about-row__text {
    padding-top: calc(19 * var(--u));
}

.about-row--reverse .about-text {
    margin-top: calc(35 * var(--u));
}

.about-row__pic img {
    display: block;
    width: 100%;
    border-radius: calc(60 * var(--u));
}

.about-heading {
    color: var(--red-45);
    font-size: var(--fs-h2);
    line-height: 1.4;
}

.about-text {
    margin-top: calc(23 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
}

.about-text p + p {
    margin-top: calc(6 * var(--u));
}

.about-text p.gap {
    margin-top: calc(46 * var(--u));
}

.about-slogan {
    margin: calc(76 * var(--u)) 0 calc(78 * var(--u));
    padding: calc(34 * var(--u)) 0;
    border-top: 1px solid var(--red-45);
    border-bottom: 1px solid var(--red-45);
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(35 * var(--u));
    max-width: calc(1007 * var(--u));
    margin-top: calc(47 * var(--u));
}

.about-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(26 * var(--u));
    min-height: calc(226 * var(--u));
    padding: calc(26 * var(--u)) calc(12 * var(--u));
    border: 1px solid transparent;
    border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--grad-card-border) border-box;
    text-align: center;
}

.about-feature img {
    height: calc(62 * var(--u));
    width: auto;
}

.about-feature span {
    color: var(--red-45);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
}

/* 15-2 借款專案內頁 */
.loan-detail {
    position: relative;
    z-index: 2;
}

.loan-panel {
    display: grid;
    grid-template-columns: calc(420 * var(--u)) minmax(0, 1fr);
    gap: calc(40 * var(--u));
    align-items: start;
    padding: calc(58 * var(--u)) calc(66 * var(--u)) calc(62 * var(--u));
    border: 1px solid var(--red-card-title);
    border-radius: calc(30 * var(--u));
    background: #fff;
    box-shadow: calc(-7 * var(--u)) calc(8 * var(--u)) 0 var(--card-shade-02);
}

.loan-panel__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.loan-panel__main {
    padding-top: calc(19 * var(--u));
}

.loan-panel__icon img {
    max-width: calc(210 * var(--u));
}

.loan-panel__title {
    color: var(--red-deep);
    font-size: var(--fs-sec-tw);
    line-height: 1.45;
}

.loan-panel__lead {
    margin-top: calc(7 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.8;
}

.loan-panel__lead p + p {
    margin-top: calc(4 * var(--u));
}

.loan-bar {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    margin-top: calc(16 * var(--u));
    min-height: calc(46 * var(--u));
    padding: 0 calc(26 * var(--u));
    border-radius: 999px;
    background: linear-gradient(90deg, #f1efec 0%, rgba(241, 239, 236, 0) 100%);
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
    letter-spacing: .04em;
}

.loan-bar img {
    width: calc(26 * var(--u));
}

.loan-features {
    margin-top: calc(16 * var(--u));
}

.loan-features li {
    display: flex;
    align-items: baseline;
    gap: calc(12 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
}

.loan-features + .loan-bar {
    margin-top: calc(20 * var(--u));
}

.loan-features li::before {
    content: "\2713";
    color: var(--red-card-title);
    font-weight: 700;
}

.loan-features b {
    color: var(--navy);
}

.loan-docs {
    margin-top: calc(12 * var(--u));
    counter-reset: doc;
}

.loan-docs li {
    margin-bottom: calc(6 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
    counter-increment: doc;
}

.loan-docs li::before {
    content: counter(doc) ".";
}

/* 借款專案內頁的流程區（帶背景照） */
.loan-process {
    position: relative;
    z-index: 1;
    margin-top: calc(-140 * var(--u));
    padding-block: calc(227 * var(--u)) calc(88 * var(--u));
    background: url("../images/02/02pro_bg1920.png") center / cover no-repeat;
}

.loan-process__head {
    text-align: center;
}

.loan-process__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(26 * var(--u));
    font-size: var(--fs-sec-tw);
}

.loan-process__title em {
    font-style: normal;
    color: var(--red-deep);
    font-family: "Poppins", sans-serif;
}

.loan-process__title::before,
.loan-process__title::after {
    content: "";
    display: block;
    width: calc(200 * var(--u));
    height: calc(8 * var(--u));
    border-radius: calc(4 * var(--u));
}

.loan-process__title::before {
    background: linear-gradient(90deg, rgba(245, 50, 59, 0) 0%, #f5323b 100%);
}

.loan-process__title::after {
    background: linear-gradient(90deg, #f5323b 0%, rgba(245, 50, 59, 0) 100%);
}

.loan-process__sub {
    margin-top: calc(10 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
}

.loan-more {
    padding-block: calc(49 * var(--u)) calc(97 * var(--u));
}

.loan-more__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(11 * var(--u));
    margin-bottom: calc(50 * var(--u));
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
}

.loan-more__title::before {
    content: "";
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    border-radius: 50%;
    background: var(--grad-red);
}

/* 15-3 借款流程頁 */
.flow-head {
    text-align: center;
}

.flow-head h2 {
    font-size: calc(28 * var(--u));
}

.flow-head h2 em {
    font-style: normal;
    color: var(--red-deep);
    font-family: "Poppins", sans-serif;
}

.flow-head p {
    margin-top: calc(6 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
}

.flow-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(82 * var(--u)) calc(56 * var(--u));
    margin-top: calc(66 * var(--u));
}

.flow-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: calc(30 * var(--u));
    padding: calc(71 * var(--u)) calc(48 * var(--u)) calc(30 * var(--u)) calc(124 * var(--u));
    border: 1px solid var(--red-deep);
    border-radius: calc(60 * var(--u));
    background: #fff;
    box-shadow: 0 0 0 calc(7 * var(--u)) #fbf0f1;
}

.flow-card__no {
    position: absolute;
    top: calc(-35 * var(--u));
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(74 * var(--u));
    height: calc(74 * var(--u));
    border-radius: 50%;
    background: var(--red-deep);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: calc(30 * var(--u));
    font-weight: 700;
    transform: translateX(-50%);
}

.flow-card__icon {
    flex: 0 0 auto;
    width: calc(80 * var(--u));
}

.flow-card__title {
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    line-height: 1.35;
}

.flow-card__body {
    min-width: 0;
}

.flow-card__desc {
    margin-top: calc(9 * var(--u));
    max-width: calc(396 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.8;
}

/* 首次借款，這些先了解 */
.flow-notes {
    position: relative;
    margin-top: calc(79 * var(--u));
}

.flow-notes__pic {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46%;
    background: url("../images/03/03pic.png") center / cover no-repeat;
}

/* 面板向左出血至視窗左緣、右緣切齊容器右緣（照片壓在面板左側） */
.flow-notes__panel {
    margin-right: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    padding: calc(46 * var(--u)) 0 calc(60 * var(--u));
    border-radius: 0 calc(60 * var(--u)) calc(60 * var(--u)) 0;
    background: #f4f4f4;
}

.flow-notes__title {
    display: flex;
    align-items: center;
    gap: calc(26 * var(--u));
    color: var(--navy);
    font-size: var(--fs-h2);
}

.flow-notes__title::before,
.flow-notes__title::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: var(--red-deep);
}

.flow-notes__list li {
    margin-top: calc(40 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.5;
}

.flow-notes__list li:first-child {
    margin-top: calc(26 * var(--u));
}

.flow-notes__list li::before {
    content: "";
    display: inline-block;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    margin-right: calc(10 * var(--u));
    border-radius: 50%;
    background: var(--red-deep);
}

.flow-notes__list b {
    color: var(--navy);
}

/* 15-4 常見問答 */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 calc(86 * var(--u));
}

.faq-item {
    margin-bottom: calc(37 * var(--u));
}

.faq-item__q {
    display: flex;
    align-items: center;
    gap: calc(19 * var(--u));
    min-height: calc(65 * var(--u));
    padding: 0 calc(30 * var(--u)) 0 0;
    border-radius: calc(20 * var(--u));
    background: var(--faq-item-bg);
    color: var(--navy);
    font-size: var(--fs-sec-tw);
    font-weight: 700;
    line-height: 1.4;
}

.faq-item__no {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: calc(28 * var(--u));
    font-weight: 700;
}

.faq-item__a {
    margin-top: calc(18 * var(--u));
    padding-left: calc(83 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
}

.faq-item__a p {
    margin-bottom: 3px;
}

/* 15-5 最新消息內頁 */
.news-detail__title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(73 * var(--u));
    padding: calc(10 * var(--u)) calc(60 * var(--u));
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: calc(26 * var(--u));
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.news-detail__date {
    margin-top: calc(12 * var(--u));
    color: var(--navy);
    font-family: "Poppins", sans-serif;
    font-size: calc(20 * var(--u));
    text-align: center;
    letter-spacing: .04em;
}

.news-detail__cover {
    margin-top: calc(24 * var(--u));
    text-align: center;
}

.news-detail__cover img {
    max-width: calc(931 * var(--u));
    width: 100%;
}

.news-detail__content {
    margin-top: calc(40 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.85;
}

.news-detail__content p {
    margin-bottom: calc(12 * var(--u));
}

.news-detail__content img {
    height: auto;
}

.news-detail__back {
    margin-top: calc(106 * var(--u));
    text-align: center;
}

.ql-btn--back::before {
    content: "";
    display: inline-block;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    margin-right: calc(14 * var(--u));
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
}

.news-count {
    margin-bottom: calc(16 * var(--u));
    color: var(--red);
    font-size: calc(19 * var(--u));
    text-align: right;
}

/* 分頁 */
.ql-pagination {
    display: flex;
    justify-content: center;
    gap: calc(10 * var(--u));
    margin-top: calc(50 * var(--u));
}

.ql-pagination .page-link {
    min-width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--news-border);
    border-radius: calc(8 * var(--u));
    color: var(--navy);
    font-size: calc(18 * var(--u));
}

.ql-pagination .active .page-link {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

/* ---------- 16. RWD ---------- */
/* 素材斷點：只覆寫 background-image，保留 size/position/repeat
   照片類（faq_bg / 02pro_bg）取「不小於實際渲染寬度」的那一階，避免被放大糊掉 */
@media (max-width: 1439.98px) {
    .home-cta { background-image: url("../images/00-hp/faq_bg1440.png"), var(--faq-bg-top); }
    .loan-process { background-image: url("../images/02/02pro_bg1440.png"); }
}

@media (max-width: 1023.98px) {
    .home-cta { background-image: url("../images/00-hp/faq_bg1024.png"), var(--faq-bg-top); }
    .loan-process { background-image: url("../images/02/02pro_bg1024.png"); }
}

/* 768 素材是 768x1280 的直式滿版底圖（底部 24.7% 是照片，上方為單色），
   和 1024/1440 的橫幅型素材構圖不同：頂端是均勻的 #e3e6e8，不需要左右漸層，
   直接用 background-color 補上方不足的高度即可接色。 */
@media (max-width: 767.98px) {
    .home-cta {
        background-image: url("../images/00-hp/faq_bg768.png");
        background-color: #e3e6e8;
    }
    .loan-process { background-image: url("../images/02/02pro_bg768.png"); }
}

@media (min-width: 1920px) {
    .home-cta { background-image: url("../images/00-hp/faq_bg2560.png"); }
    .loan-process { background-image: url("../images/02/02pro_bg2560.png"); }
}

/* 最新消息面板：news_bg1920 是「整頁尺寸」版本，左側內含 156px 透明邊，
   拿來當面板底圖會讓漸層往右縮排 8.125%，所以這組斷點刻意跳過 1920 素材，
   1024–1919 一律用 1440（純漸層，拉伸不會有畫質問題） */
@media (max-width: 1919.98px) {
    .home-news__panel { background-image: url("../images/00-hp/news_bg1440.png"); }
}

@media (max-width: 1023.98px) {
    .home-news__panel { background-image: url("../images/00-hp/news_bg1024.png"); }
}

@media (max-width: 767.98px) {
    .home-news__panel { background-image: url("../images/00-hp/news_bg768.png"); }
}

@media (min-width: 1920px) {
    .home-news__panel { background-image: url("../images/00-hp/news_bg2560.png"); }
}

/* 平板以下：字級與間距收斂。
   1280–2559 的桌機／筆電區間已由 --u 等比縮放處理，這裡不能再插手，
   否則會用固定 px 蓋掉等比後的值，比例就跑掉了。 */
@media (max-width: 1279.98px) {
    :root {
        --fs-en-title: 46px;
        --fs-sec-tw: 24px;
        --fs-body: 18px;
        --fs-h2: 28px;
    }

    .loan-card__title { font-size: 24px; }
    .loan-card__desc { font-size: 18px; }
    .news-item__title { font-size: 22px; }
    .news-item__pic { flex-basis: 340px; }
    .news-item__body { padding-left: 40px; }
    .loan-panel { grid-template-columns: 300px minmax(0, 1fr); padding: 46px 48px 50px; }
    .loan-panel__icon img { max-width: 170px; }
    .flow-card { padding: 44px 34px 36px; gap: 26px; }
    .site-footer__cols { grid-template-columns: 151px minmax(0, 524fr) minmax(0, 313fr) minmax(0, 620fr); }
}

@media (max-width: 1279.98px) {
    .site-header { padding-top: 30px; }
    .site-logo img { width: 250px; }
    .main-nav { height: 56px; padding: 0 34px; }
    .main-nav__list { gap: 30px; }
    .main-nav__link { font-size: 18px; }
    .header-line-btn { height: 54px; padding: 0 18px 0 14px; font-size: 18px; }
    .header-line-btn img { width: 32px; }
    .home-about__pic { max-width: 46%; }
}

/* 平板／手機：導覽改抽屜 */
@media (max-width: 1279.98px) {
    :root {
        --fs-en-title: 40px;
        --fs-sec-tw: 22px;
        --fs-body: 17px;
        --fs-h2: 26px;
    }

    .main-nav,
    .header-line-btn { display: none; }

    .nav-toggle { display: block; }

    .mobile-bar { display: grid; }

    body { padding-bottom: 79px; }

    .back-to-top { right: 20px; bottom: 96px; }

    .loan-cards { gap: 34px 34px; max-width: 100%; }
    .loan-card { min-height: 0; padding: 36px 22px 28px; }

    /* 1100–1279 仍維持 4 欄橫向流程（圓約 242–287px，與設計稿的
       圓徑／字級比例相近）；再窄下去圓內文字會被壓爆，交給 ≤1099 改 2 欄 */
    .process-steps { gap: 20px; }
    .process-step { padding: 6% 8%; }
    .process-step__no { font-size: 22px; }
    .process-step__icon { height: 56px; }
    .process-step__icon img { max-height: 56px; }
    .process-step__title { margin-top: 18px; }
    .process-step__desc { font-size: 15px; margin-top: 10px; }

    .home-about__box { padding: 110px 0 48px max(var(--gutter), calc((100% - var(--container-max)) / 2)); min-height: 0; }
    .home-about__pic { max-width: 42%; }

    .about-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .about-row--reverse { grid-template-columns: minmax(0, 1fr); }
    .about-row__text { padding-top: 0; }
    .about-row--reverse .about-row__text { padding-top: 0; }

    .loan-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .loan-panel__icon { justify-content: flex-start; padding-top: 0; padding-right: 0; }
    .loan-panel__icon img { max-width: 130px; }

    .flow-cards { grid-template-columns: minmax(0, 1fr); gap: 60px; }

    .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* CTA 背景照的構圖是「筆電＋咖啡杯在左下、右側留白」，桌機版文字排在右側留白上。
       平板以下文字改滿版後就會壓到主體，而且區塊高度遠大於素材高度（390 時 710 vs 360），
       cover 會把照片放大到 1.6–2 倍再左右裁切——390 時主體整個被裁光、768 時文字壓在杯子上。
       改成「原比例滿版橫幅貼齊區塊底部、文字排在橫幅上方」，主體才會完整露出。
       padding-bottom 的百分比是相對「元素寬度」計算，剛好等於橫幅高度：
       41.7% = faq_bg1440 的高寬比（1024–1279 用這張）。 */
    .home-cta {
        margin-top: -160px;
        padding-block: 220px calc(41.7% + 32px);
        /* 第一層＝底圖橫幅（原比例、貼底），第二層＝接色漸層（鋪滿整塊） */
        background-size: 100% auto, 100% 100%;
        background-position: center bottom, center top;
        background-repeat: no-repeat;
    }
}

/* 圓形步驟：1100 以下 4 欄會讓圓徑掉到 242px 以下，圓內的圖示＋標題＋兩行內文
   排不進去，改 2 欄 */
@media (max-width: 1099.98px) {
    .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 720px; }
}

/* CTA 底部橫幅高度＝素材高寬比，換到哪一張素材就要跟著換（見上方素材斷點） */
@media (max-width: 1023.98px) {
    .home-cta { padding-bottom: calc(42.2% + 32px); }   /* faq_bg1024 432/1024 */
}

@media (max-width: 991.98px) {
    .home-about__scene { padding-bottom: 0; }
    .home-about__box { padding-bottom: 300px; }
    .home-about__pic { max-width: 70%; width: 520px; }
    .home-about__text { max-width: 100%; }

    .loan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }

    .process-head { flex-direction: column; gap: 20px; text-align: center; }
    .process-head__divider { width: 60%; height: 1px; align-self: center; }
    .process-head__left { text-align: center; }
    .process-head__left .sec-head__tw { justify-content: center; }

    .news-item { flex-direction: column; min-height: 0; padding: 16px; }
    .news-item__pic { flex: 0 0 auto; max-width: 100%; }
    .news-item__pic img { height: auto; }
    .news-item__body { padding: 20px 6px 6px; }
    .news-item__date { align-self: flex-start; }
    .news-item__more { align-self: flex-start; margin-top: 20px; }

    .home-cta__inner { max-width: 100%; }

    .flow-notes__pic { position: relative; width: 100%; height: 260px; border-radius: 20px; }
    .flow-notes__panel { margin-inline: 0; border-radius: 20px; padding: 30px 24px 40px; }

    .about-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .loan-process { margin-top: -100px; padding-block: 160px 50px; }
    .loan-process__title::before,
    .loan-process__title::after { width: 60px; }
}

@media (max-width: 767.98px) {
    :root {
        --fs-en-title: 32px;
        --fs-sec-tw: 20px;
        --fs-body: 16px;
        --fs-h2: 22px;
        --gutter: 16px;
    }

    .site-header { padding-top: 16px; }
    .site-logo img { width: 180px; }

    .loan-cards { grid-template-columns: minmax(0, 1fr); max-width: 420px; }

    .process-steps { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 26px; }

    .home-about { padding-top: 50px; }
    .home-about__box { padding: 60px var(--gutter) 240px; border-radius: 0 18px 18px 0; }
    .home-about__pic { width: 78%; max-width: 78%; }

    .home-news__panel { margin-left: 0; padding: 34px var(--gutter) 40px; border-radius: 0; }

    /* 只換底部橫幅高度；上方留白維持 220px（區塊往上疊 160px 進最新消息面板，
       要留足夠空間文字才不會被面板蓋住） */
    /* 44.8% = 照片段高度 ÷ 素材寬度（(1280−936)/768）。
       這裡取「柔邊開始淡入」的 936 列而不是明顯暗部的 1001 列，
       否則按鈕會壓在筆電的模糊邊緣上，看起來像貼到照片。
       後面的常數就是「按鈕底到照片柔邊」的實際間距，要調鬆緊改這個值即可。 */
    .home-cta { padding-bottom: calc(44.8% + 56px); }   /* faq_bg768 768x1280 */
    .news-item__title { font-size: 19px; }

    .site-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .site-footer__top { flex-direction: column; align-items: flex-start; }
    .site-footer__social { margin-left: 0; }
    .site-footer__logo img { width: 220px; }

    .news-detail__title { font-size: 19px; padding: 14px 24px; }
    .faq-item__no { width: 44px; height: 44px; font-size: 20px; }
    .faq-item__q { gap: 14px; padding-right: 18px; }
    .faq-item__a { padding-left: 20px; }

    /* 手機版改直向堆疊，圖示與標題置中；內文維持靠左比較好讀。
       .flow-card__body 要給 width:100%，否則被 align-items:center 縮成內容寬，
       內文會跟著變窄。 */
    .flow-card { flex-direction: column; align-items: center; padding: 46px 22px 28px; gap: 16px; }
    .flow-card__body { width: 100%; }
    .flow-card__title { text-align: center; }
    .flow-card__no { width: 56px; height: 56px; font-size: 24px; top: -28px; }

    .loan-panel { padding: 34px 22px 30px; border-radius: 24px; }
    .loan-bar { padding: 10px 18px; }

    .about-slogan { margin: 44px 0; padding: 22px 0; }

    /* 大圓角（設計稿 60px）是對應 776–825px 寬的元件，直接套到 358px 寬的手機
       版會圓過頭；依元件寬度等比縮到相近的視覺比例 */
    .about-row__pic img { border-radius: 26px; }
    .flow-card { border-radius: 28px; }
}

/* ==========================================================================
   17. 區塊節奏（以 1920 設計稿量測值為基準）
   ========================================================================== */

/* 所有頁面的第一個內容區塊都接在 banner 之後 */
.ql-section {
    padding-top: calc(46 * var(--u));
    overflow: visible;
}

.home-service {
    padding-bottom: 0;
}

.home-service .sec-head,
.page-about .sec-head,
.loan-detail .sec-head,
.page-process .sec-head,
.page-news .sec-head,
.page-news-detail .sec-head,
.page-faq .sec-head {
    position: relative;
    z-index: 1;
}

.home-service .loan-cards {
    margin-top: calc(25 * var(--u));
}

/* 半調點裝飾：位置以 banner 底緣為基準 */
.deco--l {
    top: calc(-46 * var(--u));
}

.deco--r {
    top: calc(475 * var(--u));
}

.loan-more .deco--r,
.page-faq .deco--r {
    top: calc(120 * var(--u));
}

/* 首頁：流程 */
.home-process {
    padding-top: calc(73 * var(--u));
}

/* 內頁共用：sec-head 之後的第一個區塊 */
.page-about .about-row {
    margin-top: calc(37 * var(--u));
}

.loan-detail {
    padding-bottom: 0;
}

.loan-detail .loan-panel {
    margin-top: calc(27 * var(--u));
}

.page-process .flow-head {
    margin-top: calc(24 * var(--u));
}

.page-news .news-count {
    margin-top: calc(9 * var(--u));
    margin-bottom: calc(20 * var(--u));
}

.page-news-detail .news-detail__title {
    margin-top: calc(62 * var(--u));
}

.page-faq .faq-grid {
    margin-top: calc(74 * var(--u));
}

/* 內頁的區塊敘述與中文標之間距較首頁大 */
.page-faq .sec-head__desc,
.page-news .sec-head__desc,
.page-news-detail .sec-head__desc {
    margin-top: calc(38 * var(--u));
}

.page-news {
    padding-bottom: calc(103 * var(--u));
}

.page-news-detail {
    padding-bottom: calc(99 * var(--u));
}

.page-faq {
    padding-bottom: calc(66 * var(--u));
}

.page-about {
    padding-bottom: calc(60 * var(--u));
}

/* 借款專案內頁：panel 內部欄位 */
.loan-panel {
    grid-template-columns: calc(500 * var(--u)) minmax(0, 1fr);
    gap: 0;
    min-height: calc(615 * var(--u));
    padding: calc(17 * var(--u)) calc(66 * var(--u)) calc(28 * var(--u)) 0;
    border-radius: calc(30 * var(--u));
}

.loan-panel__icon {
    justify-content: flex-end;
    padding-right: calc(104 * var(--u));
}

.loan-panel__lead {
    max-width: calc(858 * var(--u));
}

.loan-process .process-steps {
    margin-top: calc(63 * var(--u));
}

.loan-process__more {
    margin-top: calc(34 * var(--u));
    text-align: center;
}

.loan-process__more .ql-btn {
    min-height: calc(50 * var(--u));
    padding: 0 calc(46 * var(--u));
}

.loan-process__more img {
    width: calc(26 * var(--u));
}

.loan-process__title::before,
.loan-process__title::after {
    width: min(calc(450 * var(--u)), 24vw);
    height: calc(15 * var(--u));
    border-radius: 0;
}

/* 借款流程頁：卡片與說明面板 */


.flow-notes__pic {
    width: 44.3%;
    max-width: calc(850 * var(--u));
    border-radius: 0;
}

.flow-notes__panel {
    min-height: calc(562 * var(--u));
    padding-top: calc(114 * var(--u));
    padding-bottom: calc(60 * var(--u));
    padding-right: max(var(--gutter), 5.2%);
    padding-left: min(calc(887 * var(--u)), 50.3%);
    border-radius: 0 calc(60 * var(--u)) calc(60 * var(--u)) 0;
}

.flow-notes__title {
    gap: calc(26 * var(--u));
}

/* 借款流程頁 CTA */
.flow-cta {
    position: relative;
    padding-block: calc(94 * var(--u)) calc(121 * var(--u));
    overflow: hidden;
}

.flow-cta__inner {
    position: relative;
    z-index: 2;
    max-width: calc(1040 * var(--u));
    margin-inline: auto;
    text-align: center;
}

.flow-cta h2 {
    color: var(--red-deep);
    font-size: var(--fs-h2);
}

.flow-cta p {
    margin-top: calc(23 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.75;
}

.flow-cta__btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(24 * var(--u));
    margin-top: calc(38 * var(--u));
}

/* 設計稿上人像右緣切齊 1920、緞帶左緣切齊 0，兩者都是出血到視窗邊，
   高解析度也維持貼邊（同 .home-about__pic） */
.flow-cta__person {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(calc(670 * var(--u)), 35vw);
    pointer-events: none;
}

.flow-cta__rip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: min(calc(456 * var(--u)), 24vw);
    pointer-events: none;
}

/* 常見問答 CTA */
.faq-cta {
    padding-block: calc(75 * var(--u)) 0;
}

.faq-cta__scene {
    position: relative;
}

.faq-cta__panel {
    position: relative;
    min-height: calc(376 * var(--u));
    padding: calc(95 * var(--u)) 0 calc(91 * var(--u)) 43.6%;
    border-radius: calc(26 * var(--u));
    background: linear-gradient(90deg, #f8f7f2 0%, #ffffff 100%);
}

/* 人像原尺寸 744u；上緣穿出面板 83u、下緣超出面板 77u（素材底部有 58u 透明區） */
.faq-cta__person {
    position: absolute;
    left: 0.44%;
    bottom: calc(-77 * var(--u));
    z-index: 2;
    width: min(calc(744 * var(--u)), 46.3%);
    pointer-events: none;
}

/* 緞帶原尺寸 568u，上緣穿出面板 121u，右緣出血切齊「視窗」右緣。
   定位父層是版心（.ql-container），所以要用 50% - 50vw 換算到視窗右緣；
   -9.7% 是 1920 時的等效值（156px ÷ 1608），min 取較負的那個才會真的貼邊 */
.faq-cta__rip {
    position: absolute;
    right: min(-9.7%, calc(50% - 50vw));
    top: calc(-121 * var(--u));
    z-index: 1;
    width: min(calc(568 * var(--u)), 35.3%);
    pointer-events: none;
}

.faq-cta__text {
    position: relative;
    z-index: 3;
}

.faq-cta__text h3 {
    color: var(--red-deep);
    font-size: var(--fs-h2);
}

.faq-cta__text h4 {
    margin-top: calc(12 * var(--u));
    color: var(--navy);
    font-size: calc(26 * var(--u));
    font-weight: 700;
}

.faq-cta__text p {
    margin-top: calc(26 * var(--u));
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.8;
}

.faq-cta__lineid {
    color: var(--green-text);
    font-family: "Poppins", sans-serif;
}

/* 分頁樣式（沿用專案既有 custom-pagination 結構） */
.ql-pagination .pagination {
    display: flex;
    gap: calc(10 * var(--u));
    margin: 0;
    list-style: none;
}

.ql-pagination .blog-pagination {
    width: 100%;
}

/* icon 尺寸依素材原尺寸 */
.loan-card__icon {
    height: calc(120 * var(--u));
}

.loan-card__icon img {
    max-height: calc(120 * var(--u));
}

.process-step__icon {
    height: calc(80 * var(--u));
}

.process-step__icon img {
    max-height: calc(80 * var(--u));
}

.about-feature img {
    height: calc(96 * var(--u));
}

/* RWD 補充 */
@media (max-width: 1279.98px) {
    .loan-panel {
        grid-template-columns: minmax(0, 1fr);
        padding: 34px 26px 40px;
    }

    .loan-panel__icon {
        padding-top: 0;
        padding-right: 0;
        justify-content: center;
    }

    .flow-notes__pic {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .flow-notes__panel {
        min-height: 0;
        margin-inline: 0;
        padding: 34px 24px 40px;
        border-radius: 20px;
    }

    /* 人像比照桌機版穿出面板上緣：省下來的高度換成更大的圖，寬度吃到視窗滿版。
       0.672 = 素材可見內容的高寬比（744x536 的圖，內容只到第 500 列，500/744）
       0.16  = 穿出面板上緣的比例。穿出量必須小於 .faq-cta 的上留白 75px，
               否則會壓到上面的問答列表（460 x 0.16 = 73.6，剛好在範圍內）
       上留白 = 可見高 − 穿出量 + 間距 → (0.672 − 0.16) x 寬 + 28

       --person-w 用 100vw 而不是 100%：這個變數同時被 top 使用，
       而 top 的百分比是相對「高度」而非寬度，用 % 會算出完全不同的值。 */
    .faq-cta__panel {
        --person-w: min(460px, 100vw);
        padding: calc(var(--person-w) * 0.512 + 28px) 24px 40px;
    }

    .faq-cta__person {
        left: 50%;
        top: calc(var(--person-w) * -0.16);
        bottom: auto;
        width: var(--person-w);
        /* 蓋掉全域的 img { max-width: 100% }，人像才能超出面板寬度做滿版 */
        max-width: none;
        transform: translateX(-50%);
    }

    .faq-cta__rip {
        display: none;
    }

    .flow-cta__person,
    .flow-cta__rip {
        display: none;
    }

    .deco { display: none; }
}