@charset "utf-8";

/* =========================================
   1. 全局變數定義 (ROOT)
   ========================================= */
:root {
 --primary-color: #0984e3;
 --secondary-color: #6c5ce7;
 --text-color: #2d3436;
 --text-muted: #636e72;
 --text-light: #f5f6fa;
 --text-light-muted: #dfe6e9;
 --bg-color: #f8f9fa;
 --header-bg: #ffffff;
 --white: #ffffff;
 --dark-bg: #1a1a1a;
 --badge-bg: #ff7675;
 --card-bg: #ffffff;
--price-color: #e17055;
--price-muted: #b2bec3;
--container-width: 75rem;
--container-padding-x: 20px;
--header-height-estimate: 100px;
--section-padding-y: 80px;
--gap-xl: 64px;
--nav-gap-sm: 12px;
--nav-gap-lg: 30px;
--header-padding-y: 15px;
--font-family: 'Helvetica Neue', Arial, "Microsoft JhengHei", sans-serif;
--font-base: 1rem;
--font-logo: 1.75rem;
--font-h1: 2.5rem;
--font-h2: 2.25rem;
--font-h2-mb: 1.75rem;
--font-h3: 1.35rem;
--font-main-nav: 1.0625rem;
--font-top-nav: 0.8125rem;
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-tag: 4px;
--btn-padding: 12px 32px;
--transition-speed: 0.1s;
--focus-ring-color: var(--primary-color);
--tag-padding: 4px 12px;
--tag-font-size: 0.8125rem;
--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
--card-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.12);
--swiper-arrow-color: #ffffff;
}

/* =========================================
   2. 基礎重置與框架 (Reset & Base)
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: var(--transition-speed); }
:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 0; z-index: 9999; }
.wrapper { display:block; width:100%; height:auto; overflow:hidden; position:relative; font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; font-size: var(--font-base); padding-top: var(--header-height-estimate); -webkit-font-smoothing: antialiased; }
.wrapper .access-key-jump-c { position:absolute; top:0; left:0; z-index:1001; opacity:0; }
.wrapper .access-key-jump-c:focus { opacity:1; }



/* =========================================
   3. 輪播與麵包屑 (Swiper & Breadcrumb)
   ========================================= */
.swiper { width: 100%; aspect-ratio: 32 / 9; margin: 0; overflow: hidden; background: #eee; }
.swiper-slide { background: #000; display: block; position: relative; height: 100%; width: 100%; }
.swiper-slide img, .swiper-slide video, .swiper-slide picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.swiper-slide video { position: absolute; top: 0; left: 0; z-index: 1; }
.video-pc { display: block; } 
.video-mb { display: none; }
.breadcrumb { display:flex; gap:5px; justify-content:center; color:var(--text-muted); margin-bottom:14px; font-size:0.9em; }
.breadcrumb li:not(:last-child) a:after { content:'/'; padding:0 5px; }
.breadcrumb li a:hover, .breadcrumb li a:active { color:var(--primary-color); }
.swiper-button-next, .swiper-button-prev { color: var(--swiper-arrow-color) !important; text-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 10; }
.swiper-button-next { right: 24px !important; } 
.swiper-button-prev { left: 24px !important; }

/* =========================================
   4. 分類標籤切換 (Tabs)
   ========================================= */
.page-categories { display: flex; justify-content: center; gap: 32px; margin-bottom: 48px; border-bottom: 1px solid #eee; padding-bottom: 1px; }
.service-tabs { display: flex; justify-content: center; gap: 32px; margin-bottom: 48px; border-bottom: 1px solid #eee; position: relative; }
.tab-btn { background: none; border: none; font-size: 1.125rem; font-weight: 500; color: var(--text-muted); padding: 16px 8px; cursor: pointer; position: relative; transition: all 0.3s; white-space: nowrap; }
.tab-btn:hover, .tab-btn.active { color: var(--primary-color); }
.tab-btn.active { font-weight: 700; }
.tab-btn::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background-color: var(--primary-color); transition: width 0.3s ease; }
.tab-btn.active::after { width: 100%; }
.tab-btn:focus-visible { outline: none; }
.tab-btn:focus-visible::before { content: ""; position: absolute; top: 4px; left: -8px; right: -8px; bottom: 4px; border-radius: var(--radius-sm); border: 2px solid var(--focus-ring-color); }

/* =========================================
   5. 通用排版工具 (Utilities)
   ========================================= */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding-x); }
.container .NoData { color:red; text-align:center; }
.text-center { text-align: center; }
main { position:relative; }
main > section { padding: var(--section-padding-y) 0; position: relative; width: 100%; scroll-margin-top: 80px; }
main > .access-key-c { position:absolute; top:0; left:0; opacity:0; }
main > .access-key-c:focus { opacity:1; }
.section-title { font-size: var(--font-h2); font-weight: 800; color: var(--text-color); margin-bottom:10px; line-height: 1.3; letter-spacing: 0.8px; }
.section-desc { font-size: 1.0625rem; color: var(--text-muted); line-height: 1.8; margin: 0 auto 48px auto; max-width: 50rem; }
section[class*="dark-bg"] .section-title, section[class*="dark-bg"] .section-desc { color: var(--text-light); }

/* =========================================
   6. 按鈕與表單元件 (Buttons & Forms)
   ========================================= */
.btn-login { background: #dfe6e9; padding: 2px 12px; border-radius: 4px; }
.btn-more { display: inline-block; padding: var(--btn-padding); border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: var(--radius-sm); font-weight: 600; background: transparent; transition: 0.3s; }
.btn-more:hover { background-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 12px rgba(9, 132, 227, 0.3); }
.btn-more.go-back { display:block; margin:0 auto; width:114px;}
.btn-submit { display: block; width: 100%; padding: 16px; background-color: var(--primary-color); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: 0.3s; margin-top: 16px; }
.btn-submit:hover { background-color: #0973c5; box-shadow: 0 5px 15px rgba(9, 132, 227, 0.3); transform: translateY(-2px); }
.form-group { position: relative; margin-bottom: 24px; }
.form-group input, .form-group textarea { width: 100%; padding: 16px 16px 8px 16px; border: 1px solid #ddd; border-radius: var(--radius-sm); font-size: 1rem; color: var(--text-color); background-color: transparent; transition: all 0.3s ease; font-family: inherit; appearance: none; }
.form-group label { position: absolute; top: 12.8px; left: 16px; font-size: 1rem; color: var(--text-muted); pointer-events: none; transition: all 0.3s ease; background-color: transparent; }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.1); outline: none; }
.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label, .form-group textarea:focus + label, .form-group textarea:not(:placeholder-shown) + label { top: -9.6px; left: 12.8px; font-size: 0.8rem; color: var(--primary-color); background-color: var(--bg-color); padding: 0 6.4px; font-weight: 600; }
.form-group input::placeholder, .form-group textarea::placeholder { color: transparent; }

/* =========================================
   7. 導覽列模組 (Header Global)
   ========================================= */
.header { background-color: var(--header-bg); box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 10px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.3s ease; }
.header .container { display: flex; justify-content: space-between; align-items: center; }
.header .container .logo, .header .container .logo a { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; }
.header .container .logo a { border:3px solid rgba(0,0,0,0); }
.header .container .logo a:focus { border: 3px solid var(--focus-ring-color); border-radius: var(--radius-sm); }
.header .container .logo a img { display:block; max-width:100%; height:auto; max-height:74px; float:left; }
.header .container .logo h1 { display:none; }
.header .container .nav-group { display: flex; flex-direction: column; align-items: flex-end; gap:0; position:relative; }
.header .container .nav-group .access-key-u { position:absolute; top:0; left:0; opacity:0; }
.header .container .nav-group .access-key-u:focus { opacity:1; outline: 3px solid var(--focus-ring-color); outline-offset: 0; }
.header .container .nav-group .top-nav ul { display: flex; gap:0 10px; }
.header .container .nav-group .top-nav ul li > a { font-size: var(--font-top-nav); color: var(--text-muted); padding:0 10px; height:30px; display:flex; align-items:center; width:100%; }
.header .container .nav-group .top-nav ul li > a:hover { color: var(--primary-color); }
.header .container .nav-group .top-nav ul li #google_translate_element { width:95px; height:30px; overflow:hidden; }
.header .container .nav-group .top-nav ul li #google_translate_element select { width:100%; font-size: var(--font-top-nav); color: var(--text-muted); border:3px solid rgba(0,0,0,0); margin:0; height:30px; transition: var(--transition-speed);}
.header .container .nav-group .top-nav ul li #google_translate_element select:focus { display:block; width:100%; border:3px solid var(--focus-ring-color); outline:none; }
.header .container .main-nav { position:relative; padding-left:16px; }
.header .container .main-nav > ul { display: flex; gap: var(--nav-gap-lg); }
.header .container .main-nav > ul > li { position:relative; }
.header .container .main-nav > ul > li > a { font-size: var(--font-main-nav); font-weight: 600; }
.header .container .main-nav > ul > li > a:hover { color: var(--primary-color); }
.header .container .main-nav > ul > li > .nav-submenu { position:absolute; top:100%; left:0; overflow: hidden; transition: max-height 0.5s ease-out; background:var(--primary-color); display:none; }
.header .container .main-nav > ul > li > .nav-submenu a { display:block; width:100%; padding:5px 10px; color:white; white-space:nowrap; }
.header .container .main-nav > ul > li > .nav-submenu a:hover, .header .container .main-nav > ul > li > .nav-submenu a:active, .header .container .main-nav > ul > li > .nav-submenu a:focus { background:var(--text-color); }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1002; }
.hamburger span { display: block; width: 25.6px; height: 2px; background-color: var(--text-color); margin: 5px 0; transition: 0.3s; border-radius: 2px; }
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(2px); }

/* =========================================
   8. 編輯器內容還原 (Editor Content)
   ========================================= */
.editor-content { line-height: 1.6; word-break: break-word; }
.editor-content h1 { font-size: 2em; font-weight: bold; margin-bottom: 0.5em; margin-top: 1em; }
.editor-content h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 0.5em; margin-top: 1em; }
.editor-content h3 { font-size: 1.25em; font-weight: bold; margin-bottom: 0.5em; margin-top: 1em; }
.editor-content h4, .editor-content h5, .editor-content h6 { font-weight: bold; margin-bottom: 0.5em; }
.editor-content ul { list-style-type: disc; padding-left: 2em; margin-bottom: 1em; }
.editor-content ol { list-style-type: decimal; padding-left: 2em; margin-bottom: 1em; }
.editor-content p { margin-bottom: 1em; }
.editor-content strong, .editor-content b { font-weight: bold; }
.editor-content em, .editor-content i { font-style: italic; }
.editor-content a { color: #0066cc; text-decoration: underline; }
.editor-content blockquote { border-left: 4px solid #ddd; padding-left: 1em; color: #666; font-style: italic; margin: 1em 0; }
.editor-content img { max-width: 100%; height: auto; display: block; margin: 1em 0; }
.editor-content table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
.editor-content th, .editor-content td { border: 1px solid #ccc; padding: 8px; text-align: left; }
.page-categories-editor-content { text-align:center; margin-top:-33px; margin-bottom:33px; font-size:0.9em; }

/* =========================================
   9. 最新消息區塊 (News)
   ========================================= */
.News { position: relative; background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; color: var(--text-light); }
.News::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1; }
.News .container { position: relative; z-index: 2; }
.news-tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.news-tab-btn { padding: 0.5rem 1.5rem; border: none; background: transparent; font-size: 1rem; color: var(--text-light-muted); cursor: pointer; position: relative; transition: 0.3s; font-weight: 500; }
.news-tab-btn::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--primary-color); transition: all 0.3s ease; transform: translateX(-50%); }
.news-tab-btn:hover, .news-tab-btn.active { color: var(--primary-color); }
.news-tab-btn.active::after { width: 80%; }
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3rem; }
/* 當列表裡【只有 1 個】li 時 */
.news-list:has(> li:last-child:nth-child(1)) {
  /* 改變欄位數量，並將整個網格置中 */
  grid-template-columns: calc((100% - 4rem) / 3);
  justify-content: center;
}

/* 當列表裡【只有 2 個】li 時 */
.news-list:has(> li:last-child:nth-child(2)) {
  grid-template-columns: repeat(2, calc((100% - 4rem) / 3));
  justify-content: center;
}
.news-card { display: flex; flex-direction: column; background-color: var(--white); border-radius: var(--radius-md); overflow: hidden; transition: all 0.3s ease; text-decoration: none; color: var(--text-color); height: 100%; border: none; }
.news-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
.news-card.hidden { display: none; }
.news-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.news-card:hover .news-thumb img { transform: scale(1.1); }
.news-date { position: absolute; top: 1rem; right: 1rem; background-color: rgba(255, 255, 255, 0.95); padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); text-align: center; color: var(--text-color); font-family: 'Arial', sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 2; }
.news-date .day { display: block; font-size: 1.25rem; font-weight: 800; color: var(--primary-color); line-height: 1; }
.news-date .month { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.news-content { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; text-align: left; }
.news-tag { display: inline-block; font-size: 0.75rem; color: var(--primary-color); border: 1px solid var(--primary-color); padding: 0.1rem 0.6rem; border-radius: 50px; margin-bottom: 0.75rem; width: fit-content; font-weight: 600; }
.news-title { font-size: 1.125rem; font-weight: 700; color: var(--text-color); margin-bottom: 0.75rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .news-title { color: var(--primary-color); }
.news-excerpt { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.news-more-btn-wrapper { text-align: center; }

/* =========================================
   10. 關於我們與問答 (About & FAQ)
   ========================================= */
.about { background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: var(--text-light); }
.about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1; }
.about .container { position: relative; z-index: 2; }
.about-wrapper { display: flex; align-items: center; gap: var(--gap-xl); }
.about-image { flex: 1; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.5); }
.about-image img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.about-image:hover img { transform: scale(1.05); }
.about-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.faq-list { max-width: 56.25rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; margin-bottom:3rem; }
.faq-item { background-color: var(--white); border-radius: 0.75rem; border: 1px solid rgba(0,0,0,0.05); overflow: hidden; transition: all 0.3s ease; }
.faq-item.hidden { display: none; } 
.faq-question { width: 100%; text-align: left; padding: 1.5rem 2rem; background: none; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 1.125rem; font-weight: 700; color: var(--text-color); transition: background-color 0.3s; }
.faq-question:hover { background-color: rgba(0,0,0,0.02); }
.faq-question .icon { font-size: 1.5rem; font-weight: 300; transition: transform 0.3s ease; color: var(--primary-color); }
.faq-item.active { box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: transparent; }
.faq-item.active .faq-question { color: var(--primary-color); background-color: rgba(9, 132, 227, 0.05); }
.faq-item.active .icon { transform: rotate(45deg); } 
.accordion-item-link { position:relative; }
.accordion-item-link:after { content:''; width:20px; height:20px; position:absolute; top:50%; margin-top:-10px; right:2rem; background:url(../Images/Layout/link.png) center center no-repeat; background-size:contain; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--white); }
.faq-answer .inner { padding: 1.5rem 2rem; color: var(--text-muted); line-height: 1.8; }

/* =========================================
   11. 頁尾模組 (Footer)
   ========================================= */
.footer { background-color: var(--text-color); padding: 24px 0; color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-links a { color: inherit; margin-left: 24px; transition: 0.3s; text-decoration: none; }
.footer-links a:hover { color: var(--white); }

.font-size-controls { position:fixed; width:32px; height:auto; margin:0;right:4px; bottom:62px; z-index:4; overflow:hidden; border-radius:100px;}
.font-size-controls span { display:inline-flex; justify-content: center; align-items: center; width:32px; height:32px;
    font-size:0.875em;
	margin-bottom:5px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background-color: #f0f0f0;
    border-radius: 100%;
}
.font-size-controls span:hover,
.font-size-controls span:focus {
    background-color: #e0e0e0;
}
.font-size-controls span.active { background:#333; color:white;}

.themeSwitch { position:fixed; width:32px; height:58px; margin:0;right:4px; bottom:4px; z-index:4; overflow:hidden; border-radius:100px;}
.themeSwitch a { display:block; width:100%; height:58px; overflow:hidden; text-indent:100%; white-space:nowrap; position:relative; border-radius:100px; border:1px solid #eee; background:white;}
.themeSwitch a:before { content:''; display:block; width:24px; height:24px; position:absolute; top:3px; left:3px; background:url(/tw/Images/Layout/themeSwitch-sun.png) center center no-repeat, #555; background-size:60%;
border-radius:100%;}
.themeSwitch a:after { content:''; display:block; width:24px; height:24px; position:absolute; top:auto; left:3px; bottom:3px; background:url(/tw/Images/Layout/themeSwitch-moon.png) center center no-repeat, #fff; background-size:80%;
border-radius:100%;}
.themeSwitch {}
.themeSwitch a.dark { background:#555; border:1px solid #555;}
.themeSwitch a.dark:before { background:url(/tw/Images/Layout/themeSwitch-sun_o.png) center center no-repeat, #555; background-size:60%;
border-radius:100%;}
.themeSwitch a.dark:after { background:url(/tw/Images/Layout/themeSwitch-moon_o.png) center center no-repeat, #333; background-size:80%;
border-radius:100%;}

/* =========================================
   12. 響應式設計 (RWD)
   ========================================= */
@media (max-width: 62rem) {
/* --- 1. 響應式變數與基礎標題 --- */
:root { --header-height-estimate: 100px; --section-padding-y: 48px; }
.section-title { font-size: var(--font-h2-mb); }

/* --- 2. 漢堡選單按鈕與動畫 --- */
.hamburger { display: block; }
.hamburger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- 3. 側邊移動端選單主體 (Nav Group) --- */
.header .container .nav-group { position: fixed; top: 0; right: -100%; width: 80%; max-width: 18.75rem; height: 100vh; background-color: var(--white); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 80px 32px 32px 32px; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; overflow-y: auto; }
.header .container .nav-group.is-active { right: 0; }
.menu-overlay.is-active { opacity: 1; visibility: visible; }

/* --- 4. 導覽列表與連結樣式 --- */
.header .container .main-nav, .header .container .top-nav { width: 100%; }
.header .container .main-nav ul, .header .container .top-nav ul { flex-direction: column; gap: 0; width: 100%; }
.header .container .main-nav li { border-bottom: 1px solid #f0f0f0; }
.header .container .main-nav a { display: block; padding: 16px 0; font-size: 1.125rem; color: var(--text-color); }
.header .container .top-nav { margin-top: 16px; padding-top: 16px; margin-left:16px; }
.header .container .top-nav a { display: block; padding: 12px 0; font-size: 1rem; color: var(--text-muted); }
.header .container .nav-group .top-nav ul li > a { padding:0 5px; font-size:var(--font-main-nav); padding:16px 0;height:auto; border-top:1px solid #333;}
.header .container .nav-group .top-nav ul li #google_translate_element { width:100%;}

/* --- 5. 響應式組件微調 (Tabs & Grid) --- */
.service-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; gap: 16px; }
.news-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48rem) {
	.header .container .nav-group .top-nav ul li #google_translate_element { width:100%; }
	.header .container .nav-group .top-nav ul li #google_translate_element select {
            /* 1. 解鎖 Padding：移除系統預設外觀 */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            /* 2. 設定內距與字體 */
            padding: 0 30px 0 10px; /* 右邊留多一點給箭頭 */
            font-size:var(--font-top-nav);              /* 防止 iOS 自動放大畫面 */
            line-height: 1.5;
            width: 100%;
            max-width: 18.75rem;

            /* 3. 自定義邊框與背景 */
            color: #333;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
			color:var(--text-muted);
            outline: none;
            transition: border-color 0.3s;

            /* 4. 加入自定義箭頭圖示 (SVG) */
            background-image: url("/tw/Images/Layout/select-arrow.svg");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 18px;
        }

        /* 焦點狀態 */
        .header .container .nav-group .top-nav ul li #google_translate_element select:focus {
            border-color: #007aff; /* iOS 經典藍 */
        }
	.page-categories { justify-content: flex-start; width:100%; overflow-x:auto; gap:0 15px; position:relative; margin-bottom:0; border:0;}
	.page-categories-wrap { margin-bottom:48px;
    overflow: hidden;
    position: relative;
}
	.page-categories-wrap::after { content: ""; position: absolute; top:0; right: 0; flex-shrink: 0; width: 32px; height: 100%;

    background: linear-gradient(
        to right,
        rgba(248,249,250,0),
        rgba(248,249,250,1)
    );

    pointer-events: none;
}
    .dark .page-categories-wrap::after { background:none;}
	.tab-btn { background:white; padding:16px;border-radius: 15px; border:1px solid #ccc; position:relative;}
	.tab-btn:nth-child(1) { padding-right:30px;}
	.tab-btn:nth-child(1):before {content: "";  position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);

    transform: translateY(-50%) rotate(45deg);

    animation: tabHint 1.5s infinite;}
	@keyframes tabHint {
    0%, 100% {
        transform: translateY(-50%) translateX(0) rotate(45deg);
        opacity: .4;
    }
    50% {
        transform: translateY(-50%) translateX(6px) rotate(45deg);
        opacity: 1;
    }
}
	.tab-btn.active { background:var(--primary-color); color:white;}
	.tab-btn:nth-child(1).active:before {border-top: 2px solid white;
    border-right: 2px solid white;}
	.tab-btn::after { display:none;}
	.news-list,
	.news-list:has(> li:last-child:nth-child(2)){ grid-template-columns: 1fr; gap: 1.5rem; }
	.news-content { padding: 1.25rem; }
	.about-wrapper { flex-direction: column; gap: 2rem; }
	.about-text, .section-desc { /*text-align: center; align-items: center;*/ }
	.footer-inner { display:block;}
	.footer-inner .copyright { width:100%; text-align:center;}
	.footer-inner .footer-links { width:100%; display:flex; gap:0 10px; justify-content:center;}
	.footer-inner .footer-links a { margin:0;}
	
	.editor-content ul { padding-left:0;}
}

/* =========================================
   13. 捲動動畫 (Scroll Animations)
   ========================================= */
.ani-on-scroll { opacity: 0; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; }
.ani-up { transform: translateY(48px); }
.ani-left { transform: translateX(-48px); }
.ani-right { transform: translateX(48px); }
.ani-on-scroll.ani-active { opacity: 1; transform: translate(0, 0); }
section { transition: background-color 0.5s ease; }

.translated-ltr .header { top:40px;}

/* =========================================
   深色模式覆蓋 (Dark Mode Overrides)
   當 .wrapper 同時擁有 .dark 類名時生效
   ========================================= */

.wrapper.dark {
    /* 1. 重新定義全局變數 */
    --bg-color: #121212;           /* 極深灰背景 */
    --header-bg: #1e1e1e;         /* 稍微亮一點的導航欄 */
    --card-bg: #252525;           /* 卡片背景 */
    --text-color: #e4e6eb;        /* 主文字顏色 (接近白) */
    --text-muted: #b0b3b8;        /* 次要文字顏色 */
    --white: #252525;             /* 原本定義為純白的元件轉為深色 */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --card-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.8);
    
    /* 調整主色調以在深色背景下更亮一點 */
    --primary-color: #60a5fa;     
    --secondary-color: #a78bfa;
}

/* --- 基礎背景與文字 --- */
.wrapper.dark {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.font-size-controls.dark span { border: 1px solid rgba(0,0,0,0); background-color:#1e1e1e; color:#eee;
}
.font-size-controls.dark span:hover,
.font-size-controls.dark span:focus {
    background-color: #e0e0e0;
}
.font-size-controls.dark span.active { background:white; color:#333;}

/* --- 導覽列與選單 --- */
.wrapper.dark .header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.wrapper.dark .header .logo a { background:url(/tw/Images/Layout/logo_dark.png) 0 0 no-repeat; background-size:contain;}
.wrapper.dark .header .logo a img { opacity:0;}
.wrapper.dark .hamburger span {
    background-color: var(--text-color);
}

@media (max-width: 62rem) {
    .wrapper.dark .header .container .nav-group {
        background-color: var(--header-bg);
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }
    .wrapper.dark .header .container .main-nav li {
        border-bottom: 1px solid #333;
    }
	.swiper { aspect-ratio: 16 / 9; }
}

/* --- 分類與標籤 (修正硬編碼的 #eee) --- */
.wrapper.dark .page-categories, 
.wrapper.dark .service-tabs {
    border-bottom-color: #333;
}

/* --- 表單元件 (修正硬編碼的 #ddd) --- */
.wrapper.dark .form-group input, 
.wrapper.dark .form-group textarea {
    border-color: #444;
    color: var(--text-color);
    background-color: #1a1a1a;
}

.wrapper.dark .form-group input:focus + label, 
.wrapper.dark .form-group input:not(:placeholder-shown) + label, 
.wrapper.dark .form-group textarea:focus + label, 
.wrapper.dark .form-group textarea:not(:placeholder-shown) + label {
    background-color: var(--bg-color); /* 標籤浮起時的背景色 */
}

/* --- 編輯器內容 (修正硬編碼的 #333) --- */
.wrapper.dark .editor-content {
    color: var(--text-color);
}

.wrapper.dark .editor-content blockquote {
    border-left-color: #444;
    color: var(--text-muted);
}

.wrapper.dark .editor-content th, 
.wrapper.dark .editor-content td {
    border-color: #444;
}

/* --- 最新消息與卡片 --- */
.wrapper.dark .news-card {
    background-color: var(--card-bg);
}

.wrapper.dark .news-title {
    color: var(--text-color);
}

.wrapper.dark .news-date {
    background-color: rgba(30, 30, 30, 0.95);
    color: var(--text-color);
}

/* --- FAQ 問答區 --- */
.wrapper.dark .faq-item {
    background-color: var(--card-bg);
    border-color: #333;
}

.wrapper.dark .faq-question {
    color: var(--text-color);
}

.wrapper.dark .faq-answer {
    background-color: var(--card-bg);
}

/* --- 頁尾調整 --- */
.wrapper.dark .footer {
    background-color: #000000;
}

/* --- 圖片亮度微調 (避免深色模式下白底圖片太刺眼) --- */
.wrapper.dark img:not(.logo img) {
    filter: brightness(.8) contrast(1.1);
}
/* =========================================
   14. 字級大小調整 (Font Size Adjustment)
   針對內容區進行縮放，排除 Header 與 Footer
   ========================================= */

/* --- 大字級 --- */
html.Font-Large {
    /* 放大主要的內容變數 */
    --font-base: 1.15rem;      /* 16px -> ~18.4px */
    --font-h1: 2.85rem;
    --font-h2: 2.5rem;
    --font-h3: 1.55rem;
    --section-desc-size: 1.2rem;
}

/* --- 小字級 --- */
html.Font-Small {
    /* 縮小主要的內容變數 */
    --font-base: 0.9rem;       /* 16px -> 14.4px */
    --font-h1: 2.25rem;
    --font-h2: 2rem;
    --font-h3: 1.2rem;
    --section-desc-size: 0.95rem;
}

/* --- 針對 1.css 內使用固定 rem 的內容組件進行覆蓋 --- */

/* 1. 段落描述 */
html.Font-Large .section-desc { font-size: var(--section-desc-size, 1.2rem); }
html.Font-Small .section-desc { font-size: var(--section-desc-size, 0.95rem); }

html.Font-Large .tab-btn { font-size:calc( 1.125rem * 1.2 ); }
html.Font-Small .tab-btn { font-size:calc( 1.125rem * 0.9 ); }

/* 2. 編輯器內容 (Editor Content) */
html.Font-Large .editor-content p, 
html.Font-Large .editor-content li,
html.Font-Large .editor-content td { font-size: 1.15rem; }
html.Font-Small .editor-content p, 
html.Font-Small .editor-content li,
html.Font-Small .editor-content td { font-size: 0.9rem; }

/* 3. 最新消息 (News) */
html.Font-Large .news-title { font-size: 1.25rem; }
html.Font-Large .news-excerpt { font-size: 1.05rem; }
html.Font-Small .news-title { font-size: 1rem; }
html.Font-Small .news-excerpt { font-size: 0.85rem; }

/* 4. FAQ 問答 */
html.Font-Large .faq-question { font-size: 1.25rem; }
html.Font-Large .faq-answer .inner { font-size: 1.15rem; }
html.Font-Small .faq-question { font-size: 1rem; }
html.Font-Small .faq-answer .inner { font-size: 0.9rem; }

/* 5. 聯絡我們 */
html.Font-Large .form-group label { font-size:calc( 1rem * 1.1 ); }
html.Font-Small .form-group label { font-size:calc( 1rem * 0.9 ); }


/* =========================================
   Mobile Hover Fix (貼在 2.css 最下方)
   功能：在觸控裝置上移除懸停特效
   ========================================= */
@media (hover: none) {

    /* 1. 按鈕類：移除背景變化與上浮 */
    .btn-more:hover { 
        background-color: transparent !important; 
        color: var(--primary-color) !important; 
        box-shadow: none !important; 
    }
    
    .btn-submit:hover { 
        background-color: var(--primary-color) !important; 
        box-shadow: none !important; 
        transform: none !important; 
    }

    /* 2. 最新消息 (News)：移除卡片上浮與圖片放大 */
    .news-card:hover { 
        transform: none !important; 
        box-shadow: none !important; 
    }
    
    .news-card:hover .news-thumb img { 
        transform: none !important; 
    }
    
    .news-card:hover .news-title { 
        color: var(--text-color) !important; 
    }
    
    /* 深色模式修正 */
    .wrapper.dark .news-card:hover .news-title {
        color: var(--text-color) !important;
    }

    /* 3. FAQ 問答：移除滑鼠經過的背景色變更 */
    .faq-question:hover { 
        background-color: transparent !important; 
    }
    
    /* 保持 Active 狀態 (展開時) 仍然要有顏色，所以只還原非 Active 的狀態 */
    .faq-item:not(.active) .faq-question:hover {
        background-color: transparent !important;
        color: var(--text-color) !important;
    }

    /* 4. 導覽列與連結 */
    .header .container .nav-group .top-nav ul li > a:hover {
        color: var(--text-muted) !important;
    }
    .footer-links a:hover {
        color: inherit !important;
    }
}