@charset "utf-8";

/**
 * 易借網路平台 前台樣式
 * - 原生 CSS 撰寫，色系以信任感的藍為主、金色為輔
 */

/* ---------- 變數設定 ---------- */
:root {
    --main_color: #1a5fb4;
    --main_dark_color: #123c73;
    --main_light_color: #e8f0fb;
    --accent_color: #e0a13c;
    --text_color: #2b3038;
    --sub_text_color: #6b7480;
    --line_color: #e3e7ed;
    --bg_color: #f6f8fb;
    --white_color: #fff;
    --radius: 10px;
    --shadow: 0 4px 18px rgba(24, 45, 80, .08);
    --shadow_hover: 0 10px 28px rgba(24, 45, 80, .16);
    --header_height: 76px;
    --max_width: 1200px;
}

/* ---------- 基本設定 ---------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white_color);
    color: var(--text_color);
    font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "蘋果儷中黑", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .5px;
    word-break: break-word;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

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

p {
    margin: 0 0 1em;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.4;
}

/* ---------- 動畫 ---------- */

/* 捲動進場：預設隱藏並下移，加上 .is_revealed 後淡入
 * 一律以 .js_ready 為前提，JS 沒載入或出錯時內容照常顯示，不會整片空白 */
.js_ready .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.js_ready .reveal.is_revealed {
    opacity: 1;
    transform: none;
}

/* 由左側進場，用於左右對稱的區塊 */
.js_ready .reveal_left {
    transform: translateX(-34px);
}

.js_ready .reveal_right {
    transform: translateX(34px);
}

/* 縮放進場，用於圖片 */
.js_ready .reveal_zoom {
    transform: scale(.94);
}

/* 使用者偏好減少動態效果時一律不做動畫 */
@media (prefers-reduced-motion: reduce) {

    .js_ready .reveal,
    .js_ready .reveal.is_revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }

    * {
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* 淡入上移，用於banner文字 */
@keyframes fade_up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 緩慢浮動，用於裝飾元素 */
@keyframes float_slow {

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

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

/* 光暈脈動 */
@keyframes pulse_ring {
    0% {
        transform: scale(.9);
        opacity: .7;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ---------- 共用區塊 ---------- */
.inner {
    width: 100%;
    max-width: var(--max_width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.section_bg {
    background: var(--bg_color);
}

/* ---------- 裝飾 ---------- */

/* 點陣裝飾方塊 */
.deco_dots {
    position: absolute;
    z-index: 0;
    width: 160px;
    height: 160px;
    background: url("../img/dot_block.svg") repeat;
    background-size: 20px 20px;
    opacity: .12;
    pointer-events: none;
}

.deco_dots_tl {
    top: 40px;
    left: -30px;
}

.deco_dots_br {
    right: -30px;
    bottom: 40px;
}

/* 柔光圓球 */
.deco_blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(6px);
    pointer-events: none;
    animation: float_slow 9s ease-in-out infinite;
}

.deco_blob_main {
    background: radial-gradient(circle at 30% 30%, rgba(26, 95, 180, .16), rgba(26, 95, 180, 0) 70%);
}

.deco_blob_accent {
    background: radial-gradient(circle at 30% 30%, rgba(224, 161, 60, .18), rgba(224, 161, 60, 0) 70%);
    animation-delay: -3s;
}

/* 區塊內容要疊在裝飾之上 */
.section > .inner {
    position: relative;
    z-index: 1;
}

.section_head {
    margin-bottom: 44px;
    text-align: center;
}

.section_en {
    display: block;
    margin-bottom: 6px;
    color: var(--accent_color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.section_title {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    font-size: 30px;
    font-weight: 700;
    color: var(--main_dark_color);
}

.section_title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 46px;
    height: 3px;
    background: var(--accent_color);
    transform: translateX(-50%);
}

.section_desc {
    margin-top: 14px;
    color: var(--sub_text_color);
}

/* 按鈕 */
.btn {
    position: relative;
    display: inline-block;
    padding: 12px 30px;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}

/* 按鈕滑過的光澤掃過效果 */
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}

.btn:hover::before {
    left: 130%;
}

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

.btn:active {
    transform: translateY(0);
}

.btn_main {
    background: var(--main_color);
    color: var(--white_color);
}

.btn_main:hover {
    background: var(--main_dark_color);
    color: var(--white_color);
    box-shadow: var(--shadow_hover);
}

.btn_accent {
    background: var(--accent_color);
    color: var(--white_color);
}

.btn_accent:hover {
    background: #c9862a;
    color: var(--white_color);
    box-shadow: var(--shadow_hover);
}

.btn_line {
    border: 2px solid var(--main_color);
    background: transparent;
    color: var(--main_color);
}

.btn_line:hover {
    background: var(--main_color);
    color: var(--white_color);
}

/* ---------- 頁首 ---------- */
.site_header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white_color);
    box-shadow: 0 1px 0 var(--line_color);
    transition: box-shadow .2s;
}

.site_header.is_scrolled {
    box-shadow: 0 2px 14px rgba(24, 45, 80, .12);
}

.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max_width);
    height: var(--header_height);
    margin: 0 auto;
    padding: 0 20px;
}

.site_logo {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.site_logo_mark {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.site_logo:hover .site_logo_mark {
    transform: rotate(-6deg) scale(1.06);
}

.site_logo_text {
    font-size: 20px;
    color: var(--main_dark_color);
}

.site_nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav_link {
    position: relative;
    padding: 8px 16px;
    font-weight: 700;
    color: var(--text_color);
    white-space: nowrap;
}

.nav_link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    background: var(--accent_color);
    transform: scaleX(0);
    transition: transform .2s;
}

.nav_link:hover,
.nav_link.is_active {
    color: var(--main_color);
}

.nav_link:hover::after,
.nav_link.is_active::after {
    transform: scaleX(1);
}

.nav_phone {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 7px;
    margin-left: 12px;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--main_color);
    color: var(--white_color);
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s, transform .2s;
}

/* 電話圖示的脈動光暈，提示可直接撥打 */
.nav_phone i {
    position: relative;
}

.nav_phone i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid var(--accent_color);
    border-radius: 50%;
    animation: pulse_ring 2.4s ease-out infinite;
}

.nav_phone:hover {
    background: var(--main_dark_color);
    color: var(--white_color);
    transform: translateY(-2px);
}

.nav_toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nav_toggle span {
    display: block;
    height: 2px;
    background: var(--main_dark_color);
    transition: transform .2s, opacity .2s;
}

.nav_toggle.is_open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav_toggle.is_open span:nth-child(2) {
    opacity: 0;
}

.nav_toggle.is_open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 首頁大banner ---------- */
/* 外層負責疊放波浪，內層 .main_slider 才是 slick 容器 */
.main_slider_wrap {
    position: relative;
    background: var(--main_dark_color);
}

.main_slider {
    position: relative;
}

.main_slider_item {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 520px;
    background-size: cover;
    background-position: center;
}

/* 沒有圖片時以漸層底色呈現 */
.main_slider_item.no_img {
    background: linear-gradient(120deg, var(--main_dark_color) 0%, var(--main_color) 60%, #2a7fd4 100%);
}

/* 左側壓深確保標題可讀，右側全透明讓插畫維持原本的對比 */
.main_slider_item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 60, 115, .8) 0%, rgba(18, 60, 115, .35) 42%, rgba(18, 60, 115, 0) 62%);
}

.main_slider_item.no_img::before {
    background: none;
}

.main_slider_text {
    position: relative;
    width: 100%;
    max-width: var(--max_width);
    margin: 0 auto;
    padding: 40px 20px;
    color: var(--white_color);
}

.main_slider_main_word {
    max-width: 640px;
    margin-bottom: 18px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.main_slider_secondary_word {
    max-width: 560px;
    margin-bottom: 30px;
    font-size: 19px;
    opacity: .95;
}

/* banner文字錯落進場：目前這張才播放 */
.main_slider .slick-active .main_slider_main_word,
.main_slider .slick-active .main_slider_secondary_word,
.main_slider .slick-active .main_slider_btn {
    animation: fade_up .9s cubic-bezier(.22, .61, .36, 1) both;
}

.main_slider .slick-active .main_slider_secondary_word {
    animation-delay: .18s;
}

.main_slider .slick-active .main_slider_btn {
    animation-delay: .34s;
}

/* 非目前這張先隱藏，切換時才淡入，避免看到殘影 */
.main_slider .main_slider_main_word,
.main_slider .main_slider_secondary_word,
.main_slider .main_slider_btn {
    opacity: 0;
}

/* banner底部波浪，與下方白色區塊接合 */
.main_slider_wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: 90px;
    background: url("../img/wave_divider.svg") no-repeat center bottom;
    background-size: 100% 100%;
    pointer-events: none;
}

/* slick 樣式調整 */
/* slick-theme 預設會載入 ajax-loader.gif，本專案未使用，改以底色取代避免 404 */
.slick-loading .slick-list {
    background: var(--white_color);
}

/* 指示點要在波浪之上，否則會被蓋住 */
.main_slider .slick-dots {
    z-index: 3;
    bottom: 100px;
}

.main_slider .slick-dots li button:before {
    color: var(--white_color);
    font-size: 11px;
    opacity: .5;
}

.main_slider .slick-dots li.slick-active button:before {
    color: var(--accent_color);
    opacity: 1;
}

/* ---------- 首頁平台短介 ---------- */
.index_about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.index_about_img img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* 沒有圖片時的替代區塊 */
.index_about_img_none {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--main_light_color), #d7e5f8);
    color: var(--main_color);
    font-size: 76px;
}

.index_about_text .section_title {
    display: block;
    text-align: left;
}

.index_about_text .section_title::after {
    left: 0;
    transform: none;
}

.index_about_content {
    margin: 24px 0 30px;
    color: var(--sub_text_color);
}

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

/* ---------- 申貸方式分享 ICON 列表 ---------- */
.icon_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.icon_card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 28px;
    border: 1px solid var(--line_color);
    border-radius: var(--radius);
    background: var(--white_color);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

/* 滑過時左上角浮現品牌色暈染 */
.icon_card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--main_light_color);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .35s, transform .35s;
}

.icon_card:hover::before {
    opacity: 1;
    transform: scale(1);
}

.icon_card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: var(--shadow_hover);
}

.icon_card > * {
    position: relative;
    z-index: 1;
}

.icon_card_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--main_light_color);
    color: var(--main_color);
    font-size: 27px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.icon_card:hover .icon_card_icon {
    transform: scale(1.1) rotate(-6deg);
}

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

.icon_card_more i {
    transition: transform .2s;
}

.icon_card:hover .icon_card_more i {
    transform: translateX(5px);
}

.icon_card_title {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--main_dark_color);
}

.icon_card_intro {
    flex: 1;
    margin-bottom: 16px;
    color: var(--sub_text_color);
    font-size: 15px;
}

.icon_card_more {
    color: var(--main_color);
    font-weight: 700;
    font-size: 15px;
}

.icon_card:hover .icon_card_more {
    color: var(--accent_color);
}

/* ---------- 文章 / 案例卡片列表 ---------- */
.card_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.card_item {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--white_color);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

.card_item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow_hover);
}

.card_img {
    position: relative;
    padding-top: 62%;
    background: var(--main_light_color);
    overflow: hidden;
}

.card_img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.card_item:hover .card_img img {
    transform: scale(1.06);
}

/* 沒有圖片時的替代圖示 */
.card_img_none {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main_color);
    font-size: 46px;
    opacity: .35;
}

.card_body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
}

.card_tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--main_light_color);
    color: var(--main_color);
    font-size: 13px;
    font-weight: 700;
}

.card_title {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--main_dark_color);
}

.card_intro {
    flex: 1;
    margin-bottom: 16px;
    color: var(--sub_text_color);
    font-size: 15px;
}

.card_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--line_color);
    color: var(--sub_text_color);
    font-size: 14px;
}

.card_meta_more {
    color: var(--main_color);
    font-weight: 700;
}

/* 案例卡片的核貸資訊 */
.case_data {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.case_data_item {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg_color);
    text-align: center;
}

.case_data_label {
    display: block;
    color: var(--sub_text_color);
    font-size: 12px;
}

.case_data_value {
    display: block;
    color: var(--main_color);
    font-size: 17px;
    font-weight: 700;
}

/* ---------- 首頁須知 ---------- */
.notice_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.notice_item {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-left: 4px solid var(--accent_color);
    border-radius: 8px;
    background: var(--white_color);
    box-shadow: var(--shadow);
}

.notice_icon {
    flex: none;
    color: var(--accent_color);
    font-size: 22px;
    line-height: 1.6;
}

.notice_title {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--main_dark_color);
}

.notice_content {
    margin: 0;
    color: var(--sub_text_color);
    font-size: 15px;
}

/* ---------- 首頁諮詢導引 ---------- */
.index_cta {
    position: relative;
    padding: 76px 0;
    background: linear-gradient(120deg, var(--main_dark_color), var(--main_color));
    color: var(--white_color);
    text-align: center;
    overflow: hidden;
}

/* 底紋點陣 */
.index_cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/dot_block.svg") repeat;
    background-size: 22px 22px;
    opacity: .10;
}

/* 右側柔光 */
.index_cta::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 161, 60, .3), transparent 65%);
    animation: float_slow 10s ease-in-out infinite;
}

.index_cta .inner {
    position: relative;
    z-index: 1;
}

.index_cta_title {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 700;
}

.index_cta_desc {
    margin-bottom: 28px;
    opacity: .9;
}

.index_cta_btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.index_cta .btn_line {
    border-color: var(--white_color);
    color: var(--white_color);
}

.index_cta .btn_line:hover {
    background: var(--white_color);
    color: var(--main_dark_color);
}

/* ---------- 內頁頁首 ---------- */
.page_banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 260px;
    background: linear-gradient(120deg, var(--main_dark_color), var(--main_color));
    background-size: cover;
    background-position: center;
    color: var(--white_color);
    text-align: center;
    overflow: hidden;
}

/* 有頁首圖時壓一層深色，確保標題可讀 */
.page_banner.has_img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 60, 115, .82), rgba(18, 60, 115, .5));
}

.page_banner_text {
    position: relative;
    z-index: 1;
    width: 100%;
    animation: fade_up .8s cubic-bezier(.22, .61, .36, 1) both;
}

.page_banner_en {
    animation: fade_up .8s cubic-bezier(.22, .61, .36, 1) both;
}

.page_banner_title {
    animation: fade_up .8s cubic-bezier(.22, .61, .36, 1) .12s both;
}

/* 頁首底部波浪 */
.page_banner_wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: 56px;
    background: url("../img/wave_divider.svg") no-repeat center bottom;
    background-size: 100% 100%;
    pointer-events: none;
}

.page_banner_en {
    display: block;
    margin-bottom: 4px;
    color: var(--accent_color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.page_banner_title {
    font-size: 34px;
    font-weight: 700;
}

/* 麵包屑 */
.breadcrumb {
    padding: 16px 0;
    border-bottom: 1px solid var(--line_color);
    color: var(--sub_text_color);
    font-size: 14px;
}

.breadcrumb a:hover {
    color: var(--main_color);
}

.breadcrumb i {
    margin: 0 8px;
    font-size: 12px;
}

/* ---------- 文章內容頁 ---------- */
.content_wrap {
    max-width: 880px;
    margin: 0 auto;
}

.content_head {
    padding-bottom: 22px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line_color);
}

.content_title {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 700;
    color: var(--main_dark_color);
}

.content_meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--sub_text_color);
    font-size: 14px;
}

.content_img {
    margin-bottom: 30px;
    border-radius: var(--radius);
    overflow: hidden;
}

.content_img img {
    width: 100%;
}

/* 編輯器輸出的內容樣式 */
.editor_content {
    color: var(--text_color);
}

.editor_content img {
    height: auto;
    border-radius: 8px;
}

.editor_content h2 {
    margin: 34px 0 14px;
    font-size: 25px;
    color: var(--main_dark_color);
}

.editor_content h3 {
    position: relative;
    margin: 30px 0 14px;
    padding-left: 14px;
    font-size: 21px;
    color: var(--main_dark_color);
}

.editor_content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    bottom: .3em;
    width: 4px;
    border-radius: 2px;
    background: var(--accent_color);
}

.editor_content ul,
.editor_content ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
    list-style: disc;
}

.editor_content ol {
    list-style: decimal;
}

.editor_content li {
    margin-bottom: .4em;
}

.editor_content a {
    color: var(--main_color);
    text-decoration: underline;
}

.editor_content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.editor_content th,
.editor_content td {
    padding: 10px;
    border: 1px solid var(--line_color);
}

/* 案例的核貸摘要 */
.content_case_data {
    display: flex;
    gap: 14px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.content_case_data .case_data_item {
    min-width: 150px;
    padding: 16px;
}

/* 其他推薦 */
.other_list_wrap {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--line_color);
}

.other_list_title {
    margin-bottom: 22px;
    font-size: 21px;
    font-weight: 700;
    color: var(--main_dark_color);
}

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

.other_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--line_color);
    border-radius: 8px;
    transition: border-color .2s, background .2s;
}

.other_item:hover {
    border-color: var(--main_color);
    background: var(--main_light_color);
    color: var(--main_color);
}

.other_item i {
    flex: none;
    color: var(--main_color);
}

/* ---------- 聯絡我們 ---------- */
.contact_layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: stretch;
}

/* 左側單一圖片 */
.contact_side_img {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.contact_side_img img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

.contact_info {
    padding: 34px 30px;
    border-radius: var(--radius);
    background: linear-gradient(150deg, var(--main_dark_color), var(--main_color));
    color: var(--white_color);
}

.contact_info_title {
    margin-bottom: 8px;
    font-size: 23px;
    font-weight: 700;
}

.contact_info_desc {
    margin-bottom: 26px;
    font-size: 15px;
    opacity: .85;
}

/* 編輯器內容位於深色底上，需覆寫 .editor_content 的深色文字設定 */
.contact_info_content {
    color: #fff;
    font-size: 15px;
}

.contact_info_content h2,
.contact_info_content h3,
.contact_info_content h4 {
    color: #fff;
}

.contact_info_content h3::before {
    background: var(--accent_color);
}

.contact_info_content a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    word-break: break-all;
}

.contact_info_content a:hover {
    color: var(--accent_color);
    border-bottom-color: var(--accent_color);
}

/* 編輯器的清單改為分隔線式排列，維持原本聯絡資訊的閱讀節奏 */
.contact_info_content ul {
    padding-left: 0;
    list-style: none;
}

.contact_info_content ul li {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.contact_info_content ul li:last-child {
    border-bottom: 0;
}

.contact_info_content strong {
    font-weight: 400;
    font-size: 13px;
    opacity: .75;
}

.contact_info_content ol {
    padding-left: 1.4em;
}

.contact_info_content th,
.contact_info_content td {
    border-color: rgba(255, 255, 255, .26);
}

/* 表單 */
.contact_form {
    padding: 34px 30px;
    border: 1px solid var(--line_color);
    border-radius: var(--radius);
    background: var(--white_color);
    box-shadow: var(--shadow);
}

.form_row {
    margin-bottom: 18px;
}

.form_row_group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form_label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
}

.form_label .required {
    color: #d43f3f;
}

.form_input,
.form_select,
.form_textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line_color);
    border-radius: 6px;
    background: var(--white_color);
    color: var(--text_color);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .2s, box-shadow .2s;
}

.form_input:focus,
.form_select:focus,
.form_textarea:focus {
    outline: none;
    border-color: var(--main_color);
    box-shadow: 0 0 0 3px rgba(26, 95, 180, .12);
}

.form_textarea {
    min-height: 130px;
    resize: vertical;
}

.form_remark {
    margin: 0 0 18px;
    color: var(--sub_text_color);
    font-size: 13px;
}

/* 機器人驗證 */
.g_recaptcha_wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

/* reCAPTCHA 方塊固定 304px，窄螢幕以縮放避免撐破版面 */
@media (max-width: 400px) {
    .g_recaptcha_wrapper {
        /* 置中後改由中央縮放，否則會偏向一側 */
        transform: scale(.85);
        transform-origin: center top;
        height: 65px;
    }
}

.form_submit {
    width: 100%;
}

/* ---------- 關於我們 ---------- */
.about_block {
    margin-bottom: 60px;
}

.about_block:last-child {
    margin-bottom: 0;
}

.about_block_img {
    margin-bottom: 26px;
    border-radius: var(--radius);
    overflow: hidden;
}

.about_block_title {
    margin-bottom: 18px;
    font-size: 27px;
    font-weight: 700;
    color: var(--main_dark_color);
}

/* ---------- 分頁 ---------- */
.gs_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}

.gs_pagination a,
.gs_pagination strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line_color);
    border-radius: 6px;
    color: var(--text_color);
    font-weight: 700;
}

.gs_pagination strong {
    border-color: var(--main_color);
    background: var(--main_color);
    color: var(--white_color);
}

.gs_pagination a:hover {
    border-color: var(--main_color);
    color: var(--main_color);
}

.gs_pagination .reverse {
    transform: rotate(180deg);
}

/* ---------- 無資料 ---------- */
.no_data {
    padding: 70px 20px;
    color: var(--sub_text_color);
    text-align: center;
}

.no_data i {
    display: block;
    margin-bottom: 12px;
    font-size: 42px;
    opacity: .4;
}

/* ---------- 頁尾 ---------- */
.site_footer {
    background: #1b2430;
    color: #c2c9d3;
    font-size: 15px;
}

/* 品牌與導覽改為置中直向堆疊 */
.footer_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: var(--max_width);
    margin: 0 auto;
    padding: 56px 20px 40px;
    text-align: center;
}

.site_footer .site_logo {
    justify-content: center;
}

.site_footer .site_logo_text {
    color: var(--white_color);
}

.footer_slogan {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: #98a2b0;
}

/* 網站導覽：置中橫向排列 */
.footer_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 30px;
}

.footer_nav a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #c2c9d3;
}

.footer_nav a:hover {
    color: var(--accent_color);
}

/* 項目間的分隔點 */
.footer_nav a:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: #3a4658;
}

.footer_warning {
    padding: 16px 20px;
    background: #151c26;
    color: #7d879a;
    font-size: 13px;
    text-align: center;
}

.footer_copyright {
    padding: 16px 20px;
    background: #10161e;
    color: #6b7585;
    font-size: 13px;
    text-align: center;
}

/* ---------- 回到頂部 ---------- */
.go_top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--main_color);
    color: var(--white_color);
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}

.go_top.is_show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.go_top:hover {
    background: var(--main_dark_color);
}

/* ---------- 平板 ---------- */
@media (max-width: 1024px) {

    /* 選單項目 + 電話鈕在此寬度已擠不下，改為漢堡下拉 */
    .nav_toggle {
        display: flex;
    }

    .site_nav {
        position: absolute;
        top: var(--header_height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 20px;
        background: var(--white_color);
        box-shadow: 0 12px 20px rgba(24, 45, 80, .12);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s, padding .3s;
    }

    .site_nav.is_open {
        max-height: 460px;
        padding: 10px 20px 20px;
    }

    .nav_link {
        padding: 14px 0;
        border-bottom: 1px solid var(--line_color);
    }

    .nav_link::after {
        display: none;
    }

    .nav_phone {
        justify-content: center;
        margin: 16px 0 0;
    }

    .section {
        padding: 60px 0;
    }

    .icon_list,
    .card_list {
        grid-template-columns: repeat(2, 1fr);
    }

    .index_about {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .contact_layout {
        grid-template-columns: 1fr;
    }

    .main_slider_main_word {
        font-size: 38px;
    }
}

/* ---------- 手機 ---------- */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .section {
        padding: 46px 0;
    }

    .section_title {
        font-size: 24px;
    }

    .main_slider_item {
        min-height: 420px;
    }

    .main_slider_main_word {
        font-size: 29px;
    }

    .main_slider_secondary_word {
        font-size: 16px;
    }

    .icon_list,
    .card_list,
    .notice_list,
    .other_list,
    .form_row_group {
        grid-template-columns: 1fr;
    }

    .content_title {
        font-size: 24px;
    }

    .page_banner {
        min-height: 180px;
    }

    .page_banner_title {
        font-size: 26px;
    }

    .index_cta_title {
        font-size: 24px;
    }

    .footer_inner {
        gap: 22px;
        padding: 44px 20px 34px;
    }

    .footer_nav {
        gap: 12px 24px;
    }

    .contact_info,
    .contact_form {
        padding: 26px 20px;
    }

    .case_data {
        flex-wrap: wrap;
    }
}