/* I Can Fire - Main Styles */
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
/* 全站色彩變數：統一品牌紅與淺色背景面層，方便後續維護與調整 */
:root {
/* 品牌紅階層：主紅、次紅、深紅 */
--brand-red-1: #14644b; /* 主色：亮紅，用於高亮與CTA */
--brand-red-2: #198261; /* 次色：偏深紅，用於漸變過渡 */
--brand-red-3: #1cc48f; /* 深紅：用於深色背景層 */
/* 背景面層：淺色閱讀區域與中性色 */
--surface-1: #ffffff; /* 純白 */
--surface-2: #f0f5ff; /* 淺粉白（品牌紅的低飽和延伸） */
--surface-3: #f9fafb; /* 中性極淺灰，用於分隔小模塊 */
--line-green: #06C755; /* LINE 官方綠：用於LINE按鈕與視覺重點 */
}
/* 主題切換：亮紅 vs 深紅 —— 透過在 body 上加類名快速調整品牌紅的明度與層次
使用方式：在 index.html 的 上加上 theme-red-bright 或 theme-red-deep
- theme-red-bright：更亮、更飽和的紅色，偏強烈的品牌視覺
- theme-red-deep：更深、更穩重的紅色，偏沉穩的品牌視覺 */
.theme-red-bright {
--brand-red-1: #14644b; /* 亮紅（提升亮度與飽和度） */
--brand-red-2: #198261; /* 次紅（原主紅作為過渡色） */
--brand-red-3: #198261; /* 深紅（略提升亮度，整體偏更亮） */
}
.theme-red-deep {
--brand-red-1: #198261; /* 主紅下調亮度，整體更深 */
--brand-red-2: #1cc48f; /* 次紅更深，以匹配深色主題 */
--brand-red-3: #14644b; /* 最深紅，用於次級深色背景 */
}
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background-color: var(--surface-1); /* 全站默認背景：純白 */
}
/* 為固定底部 CTA 預留空間，避免遮擋頁面內容 */
.has-fixed-cta {
/* 根據按鈕高度與陰影大致預留 96px 空間 */
padding-bottom: 36px;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #1f2937;
}
h1 {
font-size: 2.8rem;
background: linear-gradient(135deg, #14644b, #304d82);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
h2 {
font-size: 2.2rem;
color: #14644b;
position: relative;
padding-bottom: 0.5rem;
}
h3 {
font-size: 1.6rem;
color: #14644b;
}
p {
margin-bottom: 1rem;
line-height: 1.6;
}
/* Utility Classes */
.text-center {
text-align: center;
}
.text-white {
color: #ffffff; /* 恢復語義：text-white 應為白色文字，用於深色/品牌紅背景區塊 */
}
/* 方案 B：在淺色背景區塊（bg-surface）中，統一文字顏色為黑色，提升對比度與可讀性 */
.bg-surface { color: #000; }
/* 若區塊內元素誤用了 text-white，這裡在淺色背景中覆蓋為黑色，避免白字在淺底上不清晰 */
.bg-surface .text-white { color: #000; }
.mb-4 {
margin-bottom: 2rem;
}
.mb-5 {
margin-bottom: 3rem;
}
.mt-5 {
margin-top: 3rem;
}
.bg-primary {
background: linear-gradient(135deg, var(--brand-red-1), var(--brand-red-2)); /* 主要紅色漸變：用於重點區塊 */
}
.bg-secondary {
background: linear-gradient(135deg, var(--brand-red-3), var(--brand-red-2)); /* 次級紅色漸變：用於Hero/服務入口 */
}
.bg-dark {
background: linear-gradient(135deg, #450a0a, #1c0000);
}
.bg-light {
background-color: var(--surface-2); /* 統一淺色背景面層 */
}
/* 新增：淺色背景面層工具類，供內容閱讀區使用 */
.bg-surface {
background: linear-gradient(135deg, var(--surface-1), var(--surface-2));
}
/* Buttons */
.btn {
display: inline-block;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
min-height: 48px;
text-align: center;
line-height: 1.2;
box-shadow: 0 4px 15px #14644b;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, #14644b, #198261);
color: #fff;
border: 2px solid transparent;
}
.btn-primary:hover {
background: linear-gradient(135deg, #14644b, #198261);
transform: translateY(-3px);
box-shadow: 0 8px 25px #14644b;
}
.btn-primary:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px #14644b;
}
.btn-large {
padding: 18px 36px;
font-size: 18px;
border-radius: 15px;
box-shadow: 0 6px 20px #14644b;
}
/* 固定在視窗底部的 CTA 按鈕樣式 */
.cta-fixed-bottom {
/* 固定定位：無論如何滾動都保持在視窗底端 */
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* 兼容 iOS 安全區域 */
z-index: 2000; /* 保證顯示在最前層 */
width: min(92vw, 480px); /* 響應式寬度：最多 480px，否則為視窗 92% */
display: flex;
justify-content: center;
}
/* 桌面端可略微縮窄寬度，使視覺更居中 */
@media (min-width: 1024px) {
.cta-fixed-bottom {
width: 420px;
}
}
/* Header */
.header {
background: linear-gradient(135deg, #fff, #f0f5ff);
box-shadow: 0 4px 20px #d1ffe3;
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
border-bottom: 1px solid #d1ffe3;
}
.navbar {
padding: 1rem 0;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 10px;
}
.logo {
height: 40px;
width: auto;
}
.brand-text {
font-size: 1.5rem;
font-weight: 700;
color: #14644b;
text-shadow: 0 2px 4px rgb(240, 245, 255);
}
.navbar-menu {
display: flex;
align-items: center;
/* gap: 2rem; */
}
.nav-links {
display: flex;
align-items: center;
list-style: none;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: #374151;
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
padding: 8px 16px;
border-radius: 8px;
position: relative;
}
.nav-links a:hover {
color: #14644b;
background-color: #d1ffe3;
transform: translateY(-1px);
}
/* 移除未使用的 .btn-center 工具類（已統一由 .cta-row/.pager-row 控制居中） */
.mobile-menu-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background-color: #333;
margin: 3px 0;
transition: 0.3s;
}
/* Hero Section */
.hero {
padding: 2.5rem 0; /* 將頂部與底部內距減半，縮小整體高度 */
min-height: 300px; /* 將最小高度由600px降為300px，視覺高度約減半 */
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
position: relative;
z-index: 2;
}
.hero-text h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #fff !important;
background: none !important;
-webkit-text-fill-color: #fff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-subtitle {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-image {
text-align: center;
}
.hero-img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
/* Stats Section */
.stats-section {
padding: 4rem 0;
background: linear-gradient(135deg, var(--surface-2), var(--surface-1)); /* 統一淺色面層，提升一致性 */
position: relative;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 2;
}
.stat-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 2rem;
background: linear-gradient(135deg, #fff, #f0f5ff);
border-radius: 16px;
box-shadow: 0 8px 25px #d1ffe3;
border: 1px solid #d1ffe3;
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(220, 38, 38, 0.15);
}
.stat-icon {
width: 70px;
height: 70px;
flex-shrink: 0;
filter: drop-shadow(0 4px 8px rgb(240, 245, 255));
}
.stat-number {
font-size: 1.8rem;
font-weight: 700;
color: #14644b;
text-shadow: 0 2px 4px #d1ffe3;
}
.stat-label {
font-size: 0.95rem;
color: #6b7280;
font-weight: 500;
}
/* Content Sections */
.microloan-info,
.benefits-section,
.how-to-apply {
padding: 5rem 0;
}
.microloan-info,
.benefits-section,
.how-to-apply {
background: linear-gradient(135deg, var(--surface-1), var(--surface-2)); /* 統一內容區背景，減少視覺噪音 */
}
.content-wrapper {
max-width: 900px;
margin: 0 auto;
text-align: left;
background: rgba(255, 255, 255, 0.8);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 10px 30px #d1ffe3;
border: 1px solid #d1ffe3;
}
.content-wrapper p {
font-size: 1.1rem;
margin-bottom: 1.8rem;
line-height: 1.7;
color: #374151;
}
/* Funding Options */
.funding-options {
padding: 4rem 0;
}
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.option-card {
background-color: rgba(255,255,255,0.1);
padding: 2rem;
border-radius: 10px;
text-align: center;
backdrop-filter: blur(10px);
}
.option-icon {
width: 80px;
height: 80px;
margin-bottom: 1rem;
}
.option-card h3 {
color: #fff;
margin-bottom: 1rem;
}
.option-card p {
color: rgba(255,255,255,0.9);
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
text-align: left;
}
.feature-list li {
color: rgba(255,255,255,0.9);
padding: 0.5rem 0;
position: relative;
padding-left: 1.5rem;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #28a745;
font-weight: bold;
}
/* Benefits Grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.benefit-item {
text-align: center;
padding: 2rem;
}
.benefit-icon {
width: 80px;
height: 80px;
margin-bottom: 1rem;
}
.benefit-item h3 {
margin-bottom: 1rem;
color: #333;
}
.benefit-item p {
color: #666;
}
/* Requirements Section */
.requirements-section {
padding: 5rem 0;
background: linear-gradient(135deg, #e3ecff, #f0f5ff);
}
.requirements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.requirement-item {
text-align: center;
padding: 2.5rem;
background: linear-gradient(135deg, #fff, #f0f5ff);
border-radius: 16px;
box-shadow: 0 8px 25px #d1ffe3;
border: 2px solid #d1ffe3;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.requirement-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(220, 38, 38, 0.15);
border-color: rgb(240, 245, 255);
}
.requirement-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #14644b, #304d82);
}
.requirement-number {
font-size: 2.2rem;
font-weight: 700;
color: #14644b;
margin-bottom: 0.8rem;
text-shadow: 0 2px 4px #d1ffe3;
}
.requirement-label {
color: #6b7280;
font-size: 1rem;
font-weight: 500;
}
/* Steps Grid */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.step-item {
text-align: center;
padding: 2rem;
}
.step-number {
display: inline-block;
width: 70px;
height: 70px;
background: linear-gradient(135deg, #14644b, #304d82);
color: #fff;
border-radius: 50%;
line-height: 70px;
font-weight: 700;
margin-bottom: 1.5rem;
box-shadow: 0 6px 20px rgb(21, 49, 100);
transition: all 0.3s ease;
}
.step-number:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgb(21, 49, 100);
}
.step-item h3 {
margin-bottom: 1rem;
color: #333;
}
.step-item p {
color: #666;
}
/* 向下動態箭頭樣式（替換原步驟區塊） */
.scroll-down {
/* 置中顯示箭頭，並與上下內容保留間距 */
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 0 3rem;
}
.down-arrow {
width: 56px; /* 響應式大小：在移動端也不會太大 */
height: 56px;
animation: arrowBounce 1.4s ease-in-out infinite; /* 動態：上下輕微跳動 */
filter: drop-shadow(0 4px 10px rgba(220,38,38,0.25)); /* 視覺強調 */
}
@keyframes arrowBounce {
0% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(10px); opacity: 1; }
100% { transform: translateY(0); opacity: 0.7; }
}
/* Footer */
.footer {
padding: 3rem 0 1rem;
color: #fff;
}
.footer-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
margin-bottom: 2rem;
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
height: 40px;
margin-bottom: 1rem;
filter: brightness(0) invert(1);
}
.footer-brand p {
color: rgba(255,255,255,0.8);
}
.footer-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
}
.footer-column h4 {
margin-bottom: 1rem;
color: #fff;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 0.5rem;
}
.footer-column ul li a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-legal {
display: flex;
gap: 1rem;
}
.footer-legal a {
color: rgba(255,255,255,0.8);
text-decoration: none;
font-size: 0.9rem;
}
.footer-legal a:hover {
color: #fff;
}
/* =====================
詳情頁尾部行為區：CTA 與分頁按鈕居中
===================== */
.cta-row,
.pager-row {
/* 將包含的按鈕水平置中，適用於單顆或多顆按鈕的並排情境 */
text-align: center;
margin: 16px 0; /* 上下留白，避免貼近其他內容 */
}
.pager-row .btn,
.cta-row .btn {
/* 保持按鈕為行內塊，便於 text-align 居中並保留按鈕本身寬度 */
display: inline-block;
margin: 4px 8px; /* 按鈕之間留白，居中時更美觀 */
}
/* 手機端分行優化：讓詳情頁的分頁與 CTA 按鈕在窄屏自動換行且置中 */
@media (max-width: 480px) {
/* 分頁按鈕：在窄屏時以單列堆疊，並保持置中 */
.pager-row .btn {
display: block; /* 改為區塊元素以獲得獨佔一行的堆疊效果 */
width: max-content; /* 使用內容寬度，避免撐滿整行造成視覺不自然 */
margin: 6px auto; /* 水平置中並增加上下間距，便於點擊 */
}
/* CTA 按鈕：如有多顆 CTA，窄屏時同樣堆疊置中；單顆 CTA 不受影響 */
.cta-row .btn {
display: block; /* 單列堆疊顯示 */
width: max-content; /* 內容寬度，避免全寬按鈕破壞版面節奏 */
margin: 6px auto; /* 水平置中並增加上下間距 */
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-text,
.stat-item,
.benefit-item,
.step-item {
animation: fadeInUp 0.6s ease-out;
}
/* Responsive Design - Mobile First */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.navbar-menu {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text h1 {
font-size: 2.5rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item {
flex-direction: column;
text-align: center;
}
.options-grid,
.benefits-grid,
.requirements-grid,
.steps-grid {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 480px) {
.hero {
padding: 2rem 0;
}
.hero-text h1 {
font-size: 2rem;
}
.btn {
width: 100%;
max-width: 300px;
}
.stat-item,
.benefit-item,
.step-item,
.requirement-item {
padding: 1rem;
}
}
/* 我們的服務：圖片入口滑動區 */
.services-carousel {
position: relative; /* 為絕對定位的左右控制提供上下文 */
background-color: #f6f9ff;
padding-bottom: 32px;
}
/* 我們的服務區塊標題與引導文字：設置為黑色，提升在淺色背景上的對比度與可讀性 */
.services-carousel .section-kicker {
/* 區塊引導文字：加粗、略增字距，黑色以提升在淺色背景上的對比度 */
color: #000;
margin-bottom: 8px; /* 增加與標題的間距，分隔更清晰 */
font-weight: 600;
font-size: 16px;
letter-spacing: 0.2px;
/* padding-top: 16px; */
}
.services-carousel h2 {
/* 區塊主標題：加粗、微調字距與行高，提高醒目程度 */
margin-bottom: 20px;
color: #000;
font-weight: 800;
letter-spacing: 0.3px;
line-height: 1.25;
font-size: clamp(22px, 4.8vw, 28px); /* 響應式標題字體：手機不過大、桌面端上限 28px，更醒目 */
position: relative; /* 為偽元素定位提供上下文 */
}
.services-carousel h2::after {
/* 主標題下方裝飾線：使用品牌紅漸層，置中顯示以形成視覺分隔 */
content: '';
display: block;
width: 80px; /* 裝飾線寬度（加寬至 80px，更醒目） */
height: 3px; /* 裝飾線厚度 */
border-radius: 2px; /* 圓角，讓視覺更柔和 */
background: linear-gradient(to right, var(--brand-red-3), var(--brand-red-1)); /* 顏色加深：左側使用更深的品牌紅 */
margin: 10px auto 0; /* 置中顯示，與標題保持間距 */
}
.services-track {
/* 橫向滾動 + 滾動捕捉 */
background-color: #f6f9ff;
display: grid;
grid-auto-flow: column;
gap: 16px;
grid-auto-columns: minmax(260px, 33.33%); /* 桌面端：每屏約 3 張 */
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 8px 2px 12px;
margin-top: 8px; /* 標題區與卡片滑動軌道之間增加間距，分隔更清晰 */
scroll-behavior: smooth; /* 原生平滑滾動，增強瀏覽器支持 */
}
/* 我們的服務區塊容器：在區塊頂部加入淡灰分隔線，以區隔上一個模塊 */
.services-carousel .container {
border-top: 1px solid var(--surface-3); /* 使用站點淺灰變數，與整體風格一致 */
padding-top: 12px; /* 分隔線與內容之間留白，避免擁擠 */
background-color: #f6f9ff;
}
.service-card {
/* 大圖卡片：背景圖 + 漸層遮罩 + 角標序號 */
position: relative;
height: 300px;
border-radius: 8px;
overflow: hidden;
scroll-snap-align: start;
text-decoration: none;
color: #fff;
background: #111; /* 改為純色背景，圖片改由 ![]()
標籤展示，提升可維護性與可訪問性 */
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
/* 卡片圖片：覆蓋整張卡片，保持比例自適應，讓遮罩與文字在其上方分層顯示 */
.service-card .card-img {
position: absolute; /* 絕對定位以覆蓋整個卡片 */
inset: 0; /* 快速設置 top/right/bottom/left 為 0 */
width: 100%;
height: 100%;
object-fit: cover; /* 保持圖片充滿且不變形 */
z-index: 0; /* 置於最底層，遮罩與文字在其上 */
}
.service-card::after {
/* 底部漸層遮罩，提升文字可讀性 */
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 33%;
background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.10)); /* 略微減弱遮罩，提升整體亮度 */
z-index: 1; /* 設置層級：遮罩在文字之下，避免文字被壓在遮罩下方 */
}
.card-number {
position: absolute;
top: 12px; left: 12px;
font-weight: 700;
font-size: 22px;
text-shadow: 0 2px 10px rgba(0,0,0,0.55); /* 加強陰影，提升在圖片上的對比度 */
z-index: 2; /* 保證角標在遮罩之上 */
}
.card-overlay {
position: absolute;
left: 16px; right: 16px; bottom: 0px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 2; /* 保證文字在遮罩之上，符合“字體在背景圖片上方”的要求 */
}
.card-title { font-size: 22px; font-weight: 700; text-shadow: 0 3px 14px rgba(0,0,0,0.6); /* 加強文字陰影，提升亮度與可讀性 */ }
.card-readmore { font-size: 14px; opacity: 0.98; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.service-card:hover { transform: translateY(-2px); transition: transform .2s ease; }
/* ------ Track 平移點按動效（提供視覺反饋） ------ */
.services-track.is-bump-left { animation: trackBumpLeft 180ms ease; }
.services-track.is-bump-right { animation: trackBumpRight 180ms ease; }
@keyframes trackBumpLeft {
0% { transform: translateX(0); }
50% { transform: translateX(-8px); }
100% { transform: translateX(0); }
}
@keyframes trackBumpRight {
0% { transform: translateX(0); }
50% { transform: translateX(8px); }
100% { transform: translateX(0); }
}
.services-nav {
/* 左右控制按鈕：浮在 track 上層 */
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
appearance: none;
border: none;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.35);
color: #fff;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.services-nav.prev { left: 10px; }
.services-nav.next { right: 10px; }
.services-nav:hover { background: rgba(0,0,0,0.5); }
.services-nav:disabled { opacity: 0.5; cursor: not-allowed; }
/* 隱藏滾動條（保留功能） */
.services-track::-webkit-scrollbar { height: 0; }
.services-track { scrollbar-width: none; }
/* 響應式：手機端一屏一張，平板一屏兩張 */
@media (max-width: 1024px) {
.service-card { height: 260px; }
.services-track { grid-auto-columns: minmax(240px, 50%); background-color: #f2f7ff; }
}
@media (max-width: 768px) {
.service-card { height: 220px; }
.services-track { grid-auto-columns: minmax(220px, 85%); background-color: #f2f7ff; }
}
/* =====================
跑馬燈（Marquee）模塊
===================== */
.marquee-section { padding-top: 24px; padding-bottom: 16px; }
.marquee-section { background: linear-gradient(135deg, var(--surface-1), var(--surface-2)); } /* 跑馬燈區使用統一淺色背景 */
.marquee-section .subtitle { color: #666; margin-bottom: 12px; }
/* 外層容器：固定顯示區域並隱藏溢出 */
.marquee-wrap {
position: relative;
overflow: hidden; /* 隱藏超出範圍的內容 */
width: 100%;
background: var(--surface-3); /* 使用變數：中性極淺灰提升可讀性 */
border-radius: 8px;
}
/* 內層容器：單行排列並做整體位移動畫 */
.marquee-track {
display: inline-block; /* 使容器寬度隨內容伸展，避免 flex 限制寬度 */
white-space: nowrap; /* 單行排列，避免換行 */
will-change: transform; /* 告知瀏覽器優化 transform 動畫 */
background-color: #14644b;
animation: marqueeSlideX var(--marquee-duration, 30s) linear infinite; /* 從右到左的持續位移 */
}
/* 單條內容項目：水平排列，增加間距 */
.marquee-item {
display: inline-block;
margin-right: 24px; /* 項目間距，避免擁擠 */
color: #93ebc9; /* 深色文字 */
}
.marquee-item .time { color: #d7fdf0; font-weight: 600; } /* 時間高亮 */
.marquee-item .currency { color: #059669; font-weight: 600; } /* 金額高亮 */
/* 懸停暫停：提升可讀性與可控性 */
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
/* 無障礙：尊重用戶的減少動效偏好 */
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; transform: translateX(0); }
}
/* 核心動畫：從 100%（完全在右側）到 -100%（完全在左側） */
@keyframes marqueeSlideX {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* ------ 垂直跑馬燈變體（上下滾動） ------ */
.marquee-vertical {
height: var(--marquee-height, 44px); /* 顯示窗口高度：一行 */
}
.marquee-vertical .marquee-track {
display: block; /* 垂直堆疊項目 */
white-space: normal; /* 允許換行，由項目自身控制是否單行 */
will-change: transform; /* 優化 transform 動畫，提高流暢度 */
/* 無縫循環：內容已在 HTML 中重複一份，故採用 0 -> -50% 或 -50% -> 0 的位移，避免中途空白 */
animation: marqueeScrollYDown var(--marquee-duration, 30s) linear infinite; /* 默認向下滾動（無縫） */
}
.marquee-vertical .marquee-item {
display: block; /* 每條佔一行 */
margin: 0; /* 去除水平間距 */
height: var(--marquee-height, 44px); /* 固定一行高度 */
line-height: var(--marquee-height, 44px); /* 垂直置中顯示 */
white-space: nowrap; /* 單行顯示 */
overflow: hidden; /* 超出隱藏 */
text-overflow: ellipsis; /* 超出以省略號表示 */
text-align: center; /* 文本水平居中顯示 */
}
/* 支持向下滾動方向（可選） */
.marquee-vertical[data-direction="up"] .marquee-track {
animation-name: marqueeScrollYUp; /* 方向切換：由下往上（無縫） */
}
/* 垂直方向動畫：上/下 */
/* 無縫滾動：利用重複內容，位移 50% 的高度即可循環，避免空白區間 */
@keyframes marqueeScrollYUp {
0% { transform: translateY(0); } /* 立即顯示內容，避免開頭空白 */
100% { transform: translateY(-50%); } /* 向上移動半個內容高度，循環到副本 */
}
@keyframes marqueeScrollYDown {
0% { transform: translateY(-50%); } /* 起始定位在副本的中點，避免中途空白 */
100% { transform: translateY(0); } /* 向下移動回到原內容 */
}
/* =====================
服務區：卡片文字與導航箭頭使用白色；區塊標題與引導文字保持黑色（淺底更清晰）
===================== */
/* 移除整區白字，讓區塊文字從父級（如 .bg-surface）繼承黑色 */
.services-carousel { color: inherit; }
/* 僅卡片上的文字（覆蓋在圖片上）與左右導航箭頭設為白色，提升對比度 */
.services-carousel .card-title,
.services-carousel .card-readmore,
.services-carousel .card-number,
.services-carousel .services-nav { color: #ffffff; }
.line-contact {
/* LINE 聯繫模塊：保持內容區的淺色漸變背景 */
/* padding: 16px 0; */
padding-bottom: 10px;
background: linear-gradient(135deg, var(--surface-1), var(--surface-2));
}
.line-contact-grid {
/* 兩欄布局：左側QR占位，右側文案與按鈕 */
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: center; /* 垂直方向居中 */
justify-items: center; /* 水平方向居中每個格子中的內容（含QR與文案） */
}
.qr-box {
/* QR 占位：若日後提供圖片，將此改為 ![]()
即可 */
width: 260px; height: 260px;
border: 6px solid #abc0fd;
border-radius: 8px;
background:
/* 模擬QR視覺的棋盤格占位：僅作示意，避免外部資源依賴 */
repeating-linear-gradient(45deg, #e5e7eb 0 12px, #ffffff 12px 24px);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.qr-box .qr-text { font-size: 14px; color: #4b5563; }
.line-kicker { font-size: 18px; color: #111827; margin-bottom: 8px; }
.line-title { font-size: 24px; color: #14644b; margin-bottom: 12px; }
.line-id { font-weight: 700; letter-spacing: 0.5px; }
.btn-line {
/* LINE 主題按鈕：綠底白字，強烈行動召喚 */
margin: 8px 0;
display: inline-block; padding: 12px 48px; border-radius: 8px;
background: var(--line-green); color: #fff; text-decoration: none;
box-shadow: 0 6px 16px rgba(6, 199, 85, 0.25);
}
.btn-line:hover { filter: brightness(1.05); }
@media (max-width: 768px) {
.line-contact-grid { grid-template-columns: 1fr; }
.qr-box { width: 140px; height: 140px; } /* 移動端QR保持居中 */
.line-title { text-align: center; } /* 移動端標題也居中，與桌面一致 */
}
.line-contact-content { text-align: center; } /* 將文案與按鈕置中，保證 L103 錨點按鈕居中 */
.line-kicker, .line-title { text-align: center; color: #14644b; font-weight: 600; }
/* 針對 resources.html：將「LINE 加入方式」整段內容置中顯示 */
.content-section[aria-label="LINE 加入方式"] { text-align: center; }
.content-section[aria-label="LINE 加入方式"] .line-contact-grid {
margin: 0 auto; /* 整個兩欄網格容器居中 */
justify-content: center; /* 使兩欄在容器內水平居中 */
}
/* =====================
評論跑馬燈（Reviews Marquee）
===================== */
.content-section[aria-label="快速聯絡"] {
/* 僅針對 resources.html 的「快速聯絡」區塊：將整個區域內容置中 */
text-align: center; /* 文本置中，讓標題與段落在視覺上居中 */
}
.content-section[aria-label="快速聯絡"] .cards-grid {
/* 卡片容器：固定為 3 欄並居中排列（桌面端） */
display: grid; /* 使用 CSS Grid 進行布局 */
grid-template-columns: repeat(3, minmax(260px, 1fr)); /* 固定 3 欄 */
gap: 24px; /* 卡片間距 */
justify-items: center; /* 每個網格單元內的卡片置中 */
max-width: 1100px; /* 控制整體寬度，避免過度拉伸 */
margin: 0 auto; /* 讓整個網格容器在父級中居中 */
}
.content-section[aria-label="快速聯絡"] .info-card {
/* 單張卡片：將文本內容置中顯示 */
text-align: center;
}
/* 響應式：窄屏改為單欄堆疊，避免擁擠（不影響桌面端固定三欄需求） */
@media (max-width: 768px) {
.content-section[aria-label="快速聯絡"] .cards-grid {
grid-template-columns: 1fr; /* 手機端單欄顯示 */
}
}
/* 針對 resources.html：將「常見問題」整段內容置中顯示，並限制每條寬度以提升可讀性 */
.content-section[aria-label="常見問題"] {
text-align: center; /* 段落標題與整體內容居中 */
}
.content-section[aria-label="常見問題"] details {
width: min(720px, 92%); /* 限制明細寬度，避免過長行影響閱讀 */
margin: 0 auto; /* 單條內容居中顯示 */
text-align: left; /* 單條內容內文字左對齊，提高中文段落可讀性 */
}
.content-section[aria-label="快速聯絡"] .info-card {
/* 單張卡片：將文本內容置中顯示 */
text-align: center;
}
.reviews-marquee {
padding: 24px 0; /* 區塊上下留白 */
background: linear-gradient(135deg, var(--surface-1), var(--surface-2)); /* 與內容區一致的淺色漸層 */
}
.reviews-marquee .container { overflow: hidden; }
.reviews-window { overflow: hidden; }
.reviews-inner {
/* 內部橫向平移容器，包含兩份內容以無縫循環 */
display: flex;
gap: 12px;
width: max-content; /* 內容自適應寬度 */
animation: reviewsMarquee 145s linear infinite; /* 自動橫向平移 */
}
@keyframes reviewsMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* 因為內含兩份相同內容，位移半寬即可循環 */
}
.reviews-track { display: inline-flex; gap: 12px; }
/* 單張評論卡樣式 */
.review-card {
min-width: 240px; /* 卡片基礎寬度，便於橫向排布 */
background: #c1ecd7; /* 柔和暖色背景，接近圖示效果 */
border-radius: 12px; /* 圓角卡片 */
padding: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 輕陰影，提升層次 */
color: #111; /* 黑字提升可讀性 */
}
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-avatar {
width: 40px; height: 40px; border-radius: 50%;
/* background: #111; color: #fff; */
display: flex; align-items: center; justify-content: center;
font-size: 20px; line-height: 1; user-select: none;
}
.review-meta { display: flex; flex-direction: column; }
.review-nickname { font-weight: 700; font-size: 14px; }
.review-time { font-size: 12px; color: #6b7280; }
.review-stars { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.review-stars .stars { color: #f59e0b; font-size: 16px; letter-spacing: 1px; } /* 橙色星星 */
.review-stars .rating { color: #333; font-size: 12px; }
.review-text { font-size: 13px; line-height: 1.5; color: #111; }
/* 手機端：卡片稍窄，提升可視數量；動畫速度略微加快可選（保留當前設置） */
@media (max-width: 640px) {
.review-card { min-width: 220px; }
}
/* 右側懸浮窗（LINE）：固定在視窗右側，點擊跳轉 LINE 連結 */
.floating-line { /* 容器本身固定在右側中部 */
position: fixed; /* 始終懸浮 */
right: 0; /* 緊貼右側 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%);
z-index: 9999; /* 保證浮層在最上方 */
}
.floating-line-link { /* 可點擊的區域（按鈕樣式） */
display: inline-flex; /* 橫向排版圖示與文字 */
align-items: center;
gap: 8px; /* 圖示與文字間距 */
padding: 10px 12px;
background-color: #00c300; /* LINE 綠 */
color: #ffffff; /* 白色字體 */
text-decoration: none; /* 移除下劃線 */
border-top-left-radius: 10px; /* 左側圓角，使貼右側更好看 */
border-bottom-left-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.15); /* 輕微陰影增加層次 */
border-right: 1px solid rgba(0,0,0,0.05); /* 緊貼右側的邊界微差 */
}
.floating-line-icon { /* 使用 currentColor，保持與文字一致顏色 */
color: #ffffff; /* 圖示填充色（白色） */
flex-shrink: 0; /* 防止縮放 */
}
.floating-line-text { /* 文字標籤 */
font-weight: 700; /* 加粗，提升辨識度 */
letter-spacing: 0.5px; /* 細微字距，避免擠在一起 */
}
/* 行為與可用性：滑過高亮 */
.floating-line-link:hover {
filter: brightness(1.05); /* 微亮提升 */
}
/* 手機端優化：縮小尺寸，避免遮擋內容 */
@media (max-width: 480px) {
.floating-line-link {
padding: 8px 10px; /* 減小整體尺寸 */
gap: 6px;
}
.floating-line-icon {
width: 18px;
height: 18px;
}
}
/* --- 文字排版優化：長文副標題提高可讀性 --- */
.hero-subtitle {
line-height: 1.7; /* 增加行距，中文段落更易閱讀 */
max-width: 720px; /* 限制寬度，避免過長行造成閱讀負擔 */
}
/* --- 右側浮動 LINE 按鈕：全站統一樣式（按鈕/膠囊形狀，固定於右下角） --- */
.floating-line-btn,
.floating-line-window { /* 兼容舊類名，詳情頁暫時仍使用 .floating-line-window */
position: fixed; /* 固定於視窗右下角 */
right: 16px;
bottom: 24px;
z-index: 2000; /* 保證浮在內容之上 */
background-color: var(--line-green); /* LINE 綠色 */
color: #fff;
text-decoration: none;
font-weight: 600; /* 字重微調，更符合品牌氣質 */
letter-spacing: 0.2px; /* 降低字母間距，中文/英文混排更自然 */
padding: 10px 14px; /* 稍微緊湊以容納圖標 */
border-radius: 9999px; /* 膠囊形狀 */
box-shadow: 0 10px 25px rgba(6, 199, 85, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: inline-flex; /* 允許圖標與文字並排顯示 */
align-items: center; /* 垂直置中圖標與文字 */
gap: 8px; /* 圖標與文字的間距 */
}
.floating-line-btn:hover,
.floating-line-window:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(6, 199, 85, 0.45);
}
/* 浮動 LINE 按鈕中的圖標樣式（內嵌 SVG） */
.floating-line-btn .line-icon,
.floating-line-window .line-icon {
display: inline-flex;
width: 18px; /* 小圖標尺寸 */
height: 18px;
}
.floating-line-btn .line-icon svg,
.floating-line-window .line-icon svg {
width: 100%;
height: 100%;
display: block;
}
.floating-line-btn .line-icon svg path,
.floating-line-window .line-icon svg path {
fill: #fff; /* 圖標填充使用白色，與綠色背景對比佳 */
}
/* 05.html 指定區塊（L66-85）：將「注意事項」與「常見問題」居中顯示，但內容保留易讀性 */
body.page-05 .content-section[aria-label="注意事項"],
body.page-05 .content-section[aria-label="常見問題"] {
text-align: center; /* 區塊整體居中（包含標題） */
margin-left: auto; /* 區塊在寬屏時更靠中 */
margin-right: auto;
}
/* 注意事項：列表容器居中，內文左對齊，避免條列閱讀性下降 */
body.page-05 .content-section[aria-label="注意事項"] .bullet-list {
width: min(720px, 92%); /* 控制寬度，避免過寬影響視線聚焦 */
margin: 0 auto; /* 使列表容器水平居中 */
text-align: left; /* 列表項仍以左對齊呈現，提升可讀性 */
}
/* 常見問題：每個 details 容器居中，文字左對齊保持閱讀舒適 */
body.page-05 .content-section[aria-label="常見問題"] details {
width: min(720px, 92%);
margin: 10px auto; /* 每項 FAQ 之間適度留白並居中 */
text-align: left; /* FAQ 內容左對齊，標題仍在區塊居中環境下顯示 */
}
/* 05.html 指定區塊（L55-65）：將「申請流程（代匯流程）」居中顯示，並保留條列清晰度 */
body.page-05 .content-section[aria-label="申請流程"] {
text-align: center; /* 區塊標題與容器居中 */
margin-left: auto;
margin-right: auto;
}
body.page-05 .content-section[aria-label="申請流程"] .ordered-steps {
width: min(720px, 92%); /* 控制內容寬度，避免在大螢幕過寬影響視線聚焦 */
margin: 0 auto; /* 有序列表容器居中 */
text-align: left; /* 條列內容左對齊，更利於快速掃描 */
/* 保留瀏覽器預設縮排即可；如需更緊湊可微調 padding-left */
}
/* 02/03/04.html：保持詳情頁風格一致，居中標題，內容左對齊並限制寬度 */
/* 申請流程（代匯流程）區塊居中 + 內容寬度與左對齊 */
body.page-02 .content-section[aria-label="申請流程"],
body.page-03 .content-section[aria-label="申請流程"],
body.page-04 .content-section[aria-label="申請流程"] {
text-align: center; /* 區塊標題居中 */
margin-left: auto;
margin-right: auto;
}
body.page-02 .content-section[aria-label="申請流程"] .ordered-steps,
body.page-03 .content-section[aria-label="申請流程"] .ordered-steps,
body.page-04 .content-section[aria-label="申請流程"] .ordered-steps {
width: min(720px, 92%); /* 控制內容寬度，避免大螢幕過寬 */
margin: 0 auto; /* 列表容器置中 */
text-align: left; /* 條列內容左對齊，提升可讀性 */
}
/* 注意事項區塊居中 + 列表寬度限制與左對齊 */
body.page-02 .content-section[aria-label="注意事項"],
body.page-03 .content-section[aria-label="注意事項"],
body.page-04 .content-section[aria-label="注意事項"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-02 .content-section[aria-label="注意事項"] .bullet-list,
body.page-03 .content-section[aria-label="注意事項"] .bullet-list,
body.page-04 .content-section[aria-label="注意事項"] .bullet-list {
width: min(720px, 92%);
margin: 0 auto;
text-align: left; /* 條列維持左對齊，便於掃讀 */
}
/* 常見問題（FAQ）區塊居中 + 單項 details 左對齊並限制寬度 */
body.page-02 .content-section[aria-label="常見問題"],
body.page-03 .content-section[aria-label="常見問題"],
body.page-04 .content-section[aria-label="常見問題"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-02 .content-section[aria-label="常見問題"] details,
body.page-03 .content-section[aria-label="常見問題"] details,
body.page-04 .content-section[aria-label="常見問題"] details {
width: min(720px, 92%);
margin: 10px auto;
text-align: left; /* 內容左對齊，閱讀更自然 */
}
/* 01.html：詳情頁一致化樣式（標題居中、內容左對齊、寬度限制） */
/* 申請流程（代匯流程）區塊居中 + 內容寬度與左對齊 */
body.page-01 .content-section[aria-label="申請流程"] {
text-align: center; /* 區塊標題與容器居中 */
margin-left: auto;
margin-right: auto;
}
body.page-01 .content-section[aria-label="申請流程"] .ordered-steps {
width: min(720px, 92%); /* 控制內容寬度，避免在大螢幕過寬影響視線聚焦 */
margin: 0 auto; /* 有序列表容器居中 */
text-align: left; /* 條列內容左對齊，更利於快速掃描 */
}
/* 注意事項區塊居中 + 列表寬度限制與左對齊 */
body.page-01 .content-section[aria-label="注意事項"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-01 .content-section[aria-label="注意事項"] .bullet-list {
width: min(720px, 92%);
margin: 0 auto; /* 列表容器居中 */
text-align: left; /* 列表項左對齊，提升可讀性 */
}
/* 常見問題（FAQ）區塊居中 + 單項 details 左對齊並限制寬度 */
body.page-01 .content-section[aria-label="常見問題"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-01 .content-section[aria-label="常見問題"] details {
width: min(720px, 92%);
margin: 10px auto; /* 每項 FAQ 之間適度留白並居中 */
text-align: left; /* FAQ 內容左對齊，閱讀更自然 */
}
/* about.html：區段內容居中顯示（標題居中、內文左對齊、寬度限制），保持與詳情頁一致的可讀性規則 */
/* 公司簡介：標題居中，段落內容居中容器但文字左對齊 */
body.page-about .content-section[aria-label="公司簡介"] {
text-align: center; /* 區塊標題與容器居中 */
margin-left: auto;
margin-right: auto;
}
body.page-about .content-section[aria-label="公司簡介"] p {
width: min(720px, 92%); /* 控制段落最大寬度，避免過寬影響可讀性 */
margin: 0 auto; /* 段落容器水平居中 */
text-align: left; /* 段落文字左對齊，提升閱讀舒適度 */
}
/* 品牌價值：標題居中，列表容器居中且維持左對齊 */
body.page-about .content-section[aria-label="品牌價值"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-about .content-section[aria-label="品牌價值"] .bullet-list {
width: min(720px, 92%);
margin: 0 auto; /* 列表容器水平居中 */
text-align: left; /* 條列項左對齊，便於掃讀 */
}
/* 服務範圍：標題居中，列表容器居中且維持左對齊 */
body.page-about .content-section[aria-label="服務範圍"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-about .content-section[aria-label="服務範圍"] .bullet-list {
width: min(720px, 92%);
margin: 0 auto;
text-align: left;
}
/* 合規與風控：標題居中，段落內容居中容器但文字左對齊 */
body.page-about .content-section[aria-label="合規與風控"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-about .content-section[aria-label="合規與風控"] p {
width: min(720px, 92%);
margin: 0 auto;
text-align: left;
}
/* 用戶信任：標題居中，段落內容居中容器但文字左對齊 */
body.page-about .content-section[aria-label="用戶信任"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-about .content-section[aria-label="用戶信任"] p {
width: min(720px, 92%);
margin: 0 auto;
text-align: left;
}
/* 常見問題：標題居中，單項 FAQ 居中容器但文字左對齊 */
body.page-about .content-section[aria-label="常見問題"] {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-about .content-section[aria-label="常見問題"] details {
width: min(720px, 92%);
margin: 10px auto; /* 每項 FAQ 之間適度留白並居中 */
text-align: left; /* 內容左對齊，保留閱讀舒適度 */
}
/* 懸浮 LINE 控件：客服頭像佔位樣式（僅影響 index 頁該控件，不改動既有容器排版） */
.floating-line-avatar {
display: flex; /* 讓佔位圖在容器內水平居中 */
justify-content: center; /* 水平居中對齊 */
margin-bottom: 8px; /* 與下方按鈕之間留白 */
}
.floating-line-avatar .avatar-img {
width: 55px; /* 头像尺寸，適中不遮擋 */
height: 55px;
border-radius: 50%; /* 圓形裁切 */
object-fit: cover; /* 保持圖片比例，避免拉伸變形 */
box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* 輕微陰影提升層次 */
border: 2px solid #fff; /* 白色邊框，與頁面背景能區分 */
}
@media (max-width: 480px) {
.floating-line-avatar .avatar-img {
width: 55px; /* 行動端略微縮小，避免遮擋 */
height: 55px;
}
}
.card-readmore{display: none;}
.service-card:hover .card-readmore{
display: block;
}
.service-card:hover .card-title{
display: none;
}
a{
text-decoration: none;
}
.line_logo_area{
display: flex;
flex-direction: column;
overflow: hidden;
}
.line_logo_area div{
width:100%;
color:#fff;
font-size:18px;
height:35px;
line-height: 35px;
overflow: hidden;
text-align: center;
}
.line_logo_area div.line_logo{
display: flex;
flex-direction: row;
flex-wrap:nowrap;
overflow: hidden;
align-items: center;
}
.line_logo_area div.line_logo img{
width:30px;
height:30px;
margin-right:5px;
}
.comment_list_area{
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
max-width: 1000px;
margin:0 auto;
padding:5px;
}
.comment_list_area li{
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
margin-bottom: 25px;
}
.comment_list_area li .user_info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height:60px;
overflow: hidden;
align-items: center;
}
.comment_list_area li .user_info .avatar{
width:60px;
height:60px;
overflow: hidden;
border-radius: 30px;
background: #fff;
margin-right: 10px;
}
.comment_list_area li .user_info .avatar img{
width:100%;
height:100%;
}
.comment_list_area li .user_info .user{
display: flex;
flex-direction: column;
}
.comment_list_area li .user_info .user b{
width:100%;
text-align: left;
height:40px;
line-height: 40px;
}
.comment_list_area li .user_info .user span{
font-size: 14px;
}
.comment_list_area li .score{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width:100%;
height:50px;
line-height: 50px;
overflow: hidden;
text-align: left;
}
.comment_list_area li .score b{
color: #f59e0b;
font-size: 16px;
letter-spacing: 1px;
}
.comment_list_area li .contens{
width:100%;
line-height: 25px;
overflow: hidden;
text-align: left;
}
.skip-link{
display: none !important;
}