@charset "utf-8";
/**************************************************
= theme-N002
  color white green     : #f7fcf5;
  color light green     : #bbd8b3;
  color green           : #7fc6a4;
  color dark green      : #516e45;
  color extra dark green: #425938;
  color yellow          : #f6e7cb;
  color light yellow    : #fff8ed;
  color red             : #dd9787;
********************/

/**************************************************
= header 上方登入選單
********************/
/*theme-bg 背景色*/
.theme-bg{
	background: #f6e7cb;
	background-image: url(../img/bg.jpg); 
	background-position: left top; 
	background-repeat: repeat-y;
}

/**************************************************
= module 模組區塊
********************/
div#main_left , div#main_center,div#main_bottom{ border: none; }
.module, :not(.module-content).module-padding.module-bg { border-radius: 5px;  background: #ffffff; box-shadow: 0px 0px 10px rgba(221,151,135,0.5); padding: 10px 20px;}


/**************************************************
= header 上方登入選單
********************/
.login .top-space header{ margin-top: 45px;}
header{ border-radius: 20px; padding: 3px 10px; right: 5px; top:5px;}
header, header a, header button{ background:#516e45;}
header .dropdown-content a { background:#516e45;}
header>a,header>div{color:#ffffff;}
header .fontsize button {color: #516e45; background-color:#ffffff; border:none; }
header .fontsize button:hover {background-color: #f6e7cb; }
header .dropdown svg { fill: #ffffff;}
header a:hover, header>div:hover{ color:#f6e7cb; }
header .dropdown-content a:hover{ background-color: #f6e7cb; color: #516e45;}

@media screen and (max-width: 767px) {
header, header a, header button{ margin: 0; background: #bbd8b3; border-radius: 0px; top: 0px;}
header>a,header>div{ color:#425938; }
header a:hover, header>div:hover { background-color: #f6e7cb; color: #516e45;}
header .dropdown svg{ fill:#425938; }
header .dropdown-content a{ background-color: #516e45; color: #f6e7cb;}
header .dropdown-content a:hover { background-color: #f6e7cb; color: #516e45;}
.theme-bg { background-position: -550px 30px;}
.login .top-space header {  margin-top: 0px;}
}

@media screen and (max-width:520px){
.theme-bg { background-position: -880px 0px;}
}

/**************************************************
= theme 上方主圖
********************/
.theme{height:250px; background: url(../img/headerbg.png); background-repeat: no-repeat; background-position: top right;}
@media screen and (max-width: 768px) {
.theme{background: url(../img/headerbg-767.png); height: 250px;}
}
@media screen and (max-width: 620px) {
.theme{background: url(../img/headerbg-620.png); height: 280px; background-position: top center;}
}

h1 strong { position: relative; top: -20px;}
h1 strong.picshow { position: absolute; top: -160px;}

/**************************************************
= logo 上方Logo
********************/
.logo{ padding-top: 80px;}
/**************************************************
= navbar 橫式選單模組
********************/
.navbar { background-color:#ffffff; border-top: 1px solid #516e45; border-bottom: 1px solid #516e45;}
.navbar ul{ max-width: 1500px;}
.navbar li>a{ color: #516e45;}
.navbar li:hover a {color:#516e45;}
.navrwd-svg, .navbar li:hover .navbar-svg { fill: #516e45;}
.navbar li:hover ul a,.navbar ul li a:focus + .navrwd + .menuhidden{ background-color:#ffffff; color:#516e45;}
.navbar li:hover ul a:hover { background-color:#516e45; color: #ffffff;}
.navbar li .menuhidden{ border: 1px solid #516e45; border-bottom: none;}
.navbar li .menuhidden.navbar-menu a { background-color:#ffffff; color: #516e45;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#516e45; color: #ffffff;}
.navbar li ul li { border-bottom:1px solid #516e45; min-width:max-content;}

@media screen and (max-width: 767px) {
.navbar ul li, .navbar li a { color: #516e45; background: #ffffff;}
.navbar ul li:hover, .navbar li a:hover{ background: #516e45;}
.navbar li:hover a{ color: #ffffff; background: #516e45;}
.navbar ul li{ border-top: 1px solid #516e45;}
.navbar .show-menu{ color: #516e45; background: #ffffff;}
.navbar .show-menu .ct-hamburger svg { fill:#516e45;}
.navbar li:hover ul a { background:#f7fcf5;}	
.navbar li:hover ul a:hover { background-color:#ffffff; color:#1d82de;}
.navbar li .menuhidden.navbar-menu a {background:#f7fcf5;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#ffffff; color:#1d82de;}
.navrwd-svg{ background: #ffffff; border: 1px solid #516e45;}
.navrwd-svg svg{ fill: #516e45;}
.navbar li ul li { border: 0;}
}

@media screen and (min-width: 992px){
.navbar>ul>li {
    padding: 0 15px;
}
}


/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb-item + .breadcrumb-item::before {border-left: 8px solid #dd9787;}
.breadcrumb-item.active {color:#516e45;}
.breadcrumb a{color:#666666;}
.breadcrumb a:hover{color:#516e45;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg{ background-color: inherit; color: #ffffff; background-image: url(../img/footer.png); background-repeat: no-repeat; min-height: 700px;}
/* .footerbg a {color: rgba(255,255,255,0.6);} */
.connect{ margin-top: 120px; background-color: rgba(66,89,56,0.8); border-radius: 20px; padding: 10px 20px;}
.connect-links,.connect .text.connect-explorer{ color: #ffffff;}
.connect-links:hover{text-decoration: none; color: #ffffff;}
.copyright{ color: #425938;}
@media screen and (max-width: 767px) {
.footerbg{ background-image: url(../img/footer-767.png); background-size: contain; min-height:600px; }
}
@media screen and (max-width: 520px) {
.footerbg{ padding-top: 100px;}
}
/**************************************************
= module title 模組標題
********************/
.module-title { color:#516e45; background: none;}
.module-title-bg::before { margin-top: 0px; margin-left: -40px;}

/**************************************************
= color
********************/

/* tab頁簽 ********************/
.nav-tabs {border-bottom: none; margin-bottom: 8px;}
.nav-tabs .nav-item,.nav-pills .nav-item{ margin-right: 2px;}
.nav-tabs .nav-item a,
.nav-pills .nav-item a{ color: #425938; background: #bbd8b3; border: none; border-radius: 20px;}
.nav-pills .nav-item a{ border-bottom: 1px solid #ffffff;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover { color: #425938;  background-color:#f6e7cb; border: none;}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {color: #ffffff; background: #516e45; border: none;}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover { color: #425938; background-color: #f6e7cb; border: none;}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {color: #ffffff; background-color: #516e45; border-top: none;}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {color: #868e96;}
.ct-dropdown-menu { background-color: #fff;  border: 1px solid #516e45; border-radius: 0px; margin-left: 15px;}
.ct-dropdown-item { color: #3a92e9;}
.nav-tabs .nav-item .ct-dropdown-item, .nav-tabs .nav-item .ct-dropdown-item{ border: 0; background: #ffffff; border-top: 1px solid  #516e45; color: #516e45; border-radius: 0px;}
.nav-tabs .nav-item .ct-dropdown-item:focus,
.nav-tabs .nav-item .ct-dropdown-item:hover {background-color: #f6e7cb;}


/* table表格 ********************/
.ct-table th,.ct-table td {border-top-color:#ccc;}
.ct-table tbody + tbody {border-top-color:#ccc;}
.table-striped tbody tr:nth-of-type(odd) { background-color:#f3f3f4;}
.ct-table .thead-light th { color: #516e45; border-bottom: 2px solid #bbd8b3; border-color: #bbd8b3; background: #f7fcf5;}
.ct-table .thead-dark th { color: #fff8ed; background-color: #516e45; border-color: #516e45;}
.table-bordered {border-color: #e9ecef;}
.table-bordered th,.table-bordered td {border-color:#ccc;}
.table-hover tbody tr:hover { background-color:#fff8ed;}

@media only screen and (max-width: 575px){
.table-responsive .ct-table  td:before,
.table-responsive .ct-table th:before{color:#1b8bc2;}
}

/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul li .sub-menu-item{ background: #bbd8b3; color: #425938; border-bottom-color: #b3b3b3;}
.nav-Vertical ul li .sub-menu-item:hover { background: #516e45; color: #ffffff;}
.nav-Vertical ul li .sub-menu-item a{color:#425938;}
.nav-Vertical ul li .sub-menu-item a:hover,
.nav-Vertical ul li .sub-menu-item a:active,
.nav-Vertical ul li .sub-menu-item .active,
.nav-Vertical ul li .sub-menu-item:hover a{color:#ffffff;}
.nav-Vertical ul li .menu-arrow svg{ fill:#425938;}
.nav-Vertical ul li:hover .menu-arrow svg{ fill: #ffffff;}
.nav-Vertical ul li ul li .sub-menu-item:hover a{color:#516e45;}
.nav-Vertical ul li ul li .sub-menu-item{ background: #f7fcf5; color:#516e45;}
.nav-Vertical ul li ul li ul li .sub-menu-item{ background:#eefefd;}
.nav-Vertical ul li ul li .sub-menu-item:hover,
.nav-Vertical ul li ul li ul li .sub-menu-item:hover {  background: #ffffff; color: #516e45; border-left-color: #516e45;}
.vertical-hamburger { background: #ffffff; border: 1px solid #516e45;}
.vertical-hamburger svg { fill:#516e45;}

/* sitemap 導覽頁 ********************/
.ct-sitemap{ border: none; border-radius: 5px;  background: #ffffff; box-shadow: 0px 0px 10px rgba(221,151,135,0.5);}
.sitemap-title { background: #516e45; color: #ffffff;}
.sitemap-block { background: #f7fcf5;}
.sitemap-item a { color:#425938;; border-left-color: #425938; background: #bbd8b3;}
.sitemap-item a:hover,
.sitemap-item a:focus{background:#ffffff;}
.sitemap-icon svg {fill: #ffffff;}
.sitemap-top {color: #425938;}

/*span-color-ga003*/
.span-color-ga003,a.span-color-ga003{color: #0d84be;}
a.span-color-ga003:hover,a.span-color-ga003:focus {color:#3797ed;}

/*span-color-ga007*/
.span-color-ga007,a.span-color-ga007{color: #0d84be;}
a.span-color-ga007:hover,a.span-color-ga007:focus {color:#3797ed;}

/* input bar ********************************/
.form-group-m input { caret-color: #516e45;}
.form-group-m .bar::before{ background: #516e45;}


/*線上報修button-ga009********************/
.repair-basicset .btn-primary { background: #516e45; border-color: #516e45;  fill: #ffffff;}
.repair-basicset .btn-primary:hover,.repair-basicset .btn-primary:focus,.repair-basicset .btn-primary:active,.repair-basicset .btn-primary.active,.repair-basicset .open .ct-dropdown-toggle.btn-primary,.repair-basicset .btn-primary:active:focus,.repair-basicset .btn-primary:active:hover,.repair-basicset .btn-primary.active:hover,.repair-basicset .btn-primary.active:focus{background:#425938;}
.repair-basicset .btn-primary.active.focus,.repair-basicset .btn-primary.active:focus,.repair-basicset .btn-primary.active:hover,.repair-basicset .btn-primary:active.focus,.repair-basicset .btn-primary:active:focus,.repair-basicset .btn-primary:active:hover,.repair-basicset .open>.ct-dropdown-toggle.btn-primary.focus,.repair-basicset .open>.ct-dropdown-toggle.btn-primary:focus,.repair-basicset .open>.ct-dropdown-toggle.btn-primary:hover{ background:#425938;}


/* GA017 全文檢索*******************/
.cmgch-google .btn-all{ color: #ffffff; background: #516e45; border-color: #516e45;  fill: #ffffff;}
.cmgch-google .btn-all:hover,.cmgch-google .btn-all:focus,.cmgch-google .btn-all:active,.cmgch-google .btn-all.active,.cmgch-google .btn-all:active:focus,.cmgch-google .btn-all:active:hover,.cmgch-google .btn-all.active:hover,.cmgch-google .btn-all.active:focus { color: #ffffff; background-color:#425938;  border-color:#425938; fill: #ffffff;}
.cmgch-google .btn-advanced{ color: #ffffff; background-color: #757575; border-color: #757575; fill: #ffffff;}
.cmgch-google .btn-advanced:hover,.cmgch-google .btn-advanced:focus,.cmgch-google .btn-advanced:active,.cmgch-google .btn-advanced.active,.cmgch-google .btn-advanced:active:focus,.cmgch-google .btn-advanced:active:hover,.cmgch-google .btn-advanced.active:hover,.cmgch-google .btn-advanced.active:focus { color: #ffffff; background-color: #626262;  border-color: #626262; fill: #ffffff;}


/* CGA001 圖文公告換色 ********************/
.ct-focusslider .focus-content .textblock{ background: #f3f3f3; border-bottom: 4px solid #bbd8b3; color: #545454;}
.ct-focusslider .focus-content .textblock .title{ color:#516e45;}
.ct-focusslider .focus-content .imgblock{ background: #f6e7cb!important;}

/*CGA001 圖文公告箭頭顏色*/
.ct-focusslider .focus-controls .focus-arrow{ fill:#7fc6a4; }
.ct-focusslider .focus-controls .focus-arrow:hover { fill: #516e45;}
.ct-focusslider .focus-controls .focus-arrow.focus-end{ fill: rgba(175, 175, 175, 1);}

/*GA004 相簿名稱標題顏色*/
#ga004albumdetail{ color: #516e45;}
#ga004albumdetail::before{ color: #7fc6a4!important;}

/*freeze btn overflow *******************/
#noticeview_to_print .ct-btn {white-space: normal;}

/*權限scrollbar *******************/
.select-menu-container.select-visible .select-menu {overflow-y: scroll; height: 150px;}

/**************************************************
= 焦點指示器 focus indicator（WCAG 1.4.11 非文字對比 / GN2141100E）

   問題來源有三層，都不合格：
     basic.css :focus{outline:2px dotted #d26800}     對粉紅#ed96af 1.68:1
     basic.css #menu a:focus{outline:2px solid #007aff} 對粉紅#ed96af 1.83:1
     各模組自帶 .ct<uniq> …:focus{outline:2px dotted #d26800}（本站 21 處）

   一律改 solid（點虛線的視覺厚度會被判定未達 2px），並改用「雙色環」：
   內圈白 3px（box-shadow）＋ 外圈深紅 2px（outline），兩色互比 11.25:1。

   ※ 為什麼要雙色而不是單色：
     單色永遠有死角 —— #74122d 壓在輪播照片的深藍海水上只有 1.29:1。
     雙色環掃過整條亮度軸，最壞情況（背景 L=0.263）較好的那條帶仍有
     3.35:1，等於任何底色（含使用者上傳的照片）都保證過 3:1。
     深藍海水 白8.72／珊瑚礁土黃 深紅3.58／中灰 白3.95／粉紅選單 深紅5.13。
     附帶效果：深色按鈕面（#b3556f 4.72、#797979 4.35、#54812c 4.61）
     不再需要個別開白框例外，故原本那組例外規則已移除。

   ※ 為什麼用 box-shadow 而不是 border：
     border 佔版面，focus 時會把元素撐大、整排位移；box-shadow 的 spread
     完全不參與排版，也不會吃掉元件原本的 border 設計。

   ※ 為什麼要 !important：
     模組 CSS 不是 <link>，是 siteserver.js 在 runtime 注入的 <style>，
     位置永遠在版型 <link> 之後；且模組規則帶 .ct<uniq> 前綴，權重 (0,3,1)
     遠高於版型的 a:focus (0,1,1)。順序與權重雙輸，唯一能蓋過的只有
     !important。這等於版型接管全站焦點樣式，模組的自訂焦點外觀會失效
     （本站有 2 處模組是用 box-shadow 當焦點框的，會被本規則取代）。

   ※ outline-offset 為正值 = 環畫在元素外側。若發現被 overflow:hidden 的
     容器裁掉，把 offset 改負值、box-shadow 改 inset 即可（見檔末註解）。
********************/

/* 通則：:focus 本身即匹配任何 focus 中的元素（a/button/input/select/
   textarea/[tabindex]…），不需列舉各模組 DOM。
   由元素邊緣往外：白 0～3px（box-shadow spread 3px）→ 深紅 3～5px
   （outline-offset:3px），總寬 5px。
   ※ 兩條帶必須連續：spread 與 outline-offset 要相等。試過 offset 4px 而
     spread 只有 2px，中間會露出底色，視覺上變成兩個各自獨立的框；補到
     spread 4px 雖然連續了，但 6px 的環在選單列上太寬。 */
:focus {
	outline: 2px solid #74122d !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
}

/* 這 3 條模組規則自己就帶 !important，!important 之間比權重、同權重再比
   順序，而模組注入在後 —— 故需嚴格高於其 (0,3,1)，前綴 html 補一個型別
   選擇器成為 (0,3,2)。 */
html .ct5abf2dafaa93092cee58cec0 .form-group-m input:focus,
html .ct5c0e1defb295a734beb37b2f .form-group-m input:focus,
html .ct5e03008ec7e4096ac7f18008 a.dishName:focus {
	outline: 2px solid #74122d !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
}

/* 焦點環改掛在子元素上的少數情況。
   有些模組的 <a> 沒有設 display（＝預設 inline）卻包著 block 內容，例如
   GA004 相簿：<a role="button" tabindex="0"><div class=imgResponsiveShow>…
   inline 元素包 block 時自己的框會被切成破碎片段，outline／box-shadow
   幾乎畫不出東西 —— 模組作者當初就是因此把框畫在子元素上。通則掛在 <a>
   身上對這種結構無效，只能跟著改掛子元素，順便把模組原本的橘色點虛線
   （2px dotted #d26800，對白底僅 3.67:1、對彩色縮圖更低）換成雙色環。 */
.abimgs a:focus > .imgResponsiveShow,
.abimgs a:focus > .imgResponsiveShow_item,
.month-simple a:focus .day {
	outline: 2px solid #74122d !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
}

/* 焦點環不可被模組的 transition:all 帶著動 —— box-shadow 與 outline-* 都是
   可動畫屬性。模組在 .ct-focusslider .imgblock img (all .5s)、.focus-arrow
   (all .3s)、.imgResponsiveShow_item (all .15s)，版型自己在 header>a
   (all 200ms) 都用了 transition:all，結果焦點環會淡入，失焦後還淡出留下
   白色殘影。
   ※ 必須在「非聚焦」狀態也生效：殘影發生在焦點已經移走之後，那時 :focus
     規則早就不套用了，是元素回到自己的 transition:all 把環淡出的。
   ※ CSS 沒有「all 扣掉某幾個」的寫法，只能用白名單取代 all。清單是掃過
     全站 102 個 transition:all 選擇器的 hover/focus 態實際改動屬性後列全的
     （border-radius 42、width 26、left 26、padding-right 12… 都要保留，
     否則搜尋框展開、滑動那類效果會變成瞬間跳），實際只排除 box-shadow
     與 outline-*。清單列太長無害，不可動畫的值會被瀏覽器忽略。
   ※ 代價：全站有 5 處模組是刻意用 transition:all 去動 box-shadow 的，
     那 5 處的陰影動畫會變成瞬間切換。 */
a, button, input, select, textarea, summary,
[tabindex], [role="button"], [role="link"] {
	transition-property:
		transform, opacity, filter, visibility,
		color, background, background-color, background-image,
		background-position, background-size,
		fill, stroke,
		border-color, border-width, border-radius,
		width, height, min-width, min-height, max-width, max-height,
		top, right, bottom, left,
		margin, margin-top, margin-right, margin-bottom, margin-left,
		padding, padding-top, padding-right, padding-bottom, padding-left,
		font-size, font-weight, letter-spacing, line-height, text-shadow,
		flex-basis, gap, z-index !important;
}

/**************************************************
= 輪播：環改畫在容器上（:focus-within）

   輪播的投影片本身是一個被圖片填滿的連結：
     <a class="imgblock"><img …></a>            CGA001 圖文輪播
     <button class="carousel-item">…</button>   BGA001 大橫幅
   在它身上畫環兩條路都不通：
     外側環 → 被祖先容器的 overflow:hidden 裁掉，只剩一條邊
     內側環 → inset box-shadow 畫在背景層、在內容之下，被填滿的 <img> 蓋住
              （outline 不受影響，所以只看得到深紅那圈、白色不見）
   換 px 數沒有用，這是繪製層級問題不是尺寸問題。

   解法：環改畫在輪播容器自己身上。元素**自己的** overflow:hidden 只裁子孫、
   不裁自己的 outline，所以容器上的外側雙色環可以完整顯示，與全站一致。
   也不能改用 overflow:visible —— .focus-content 的 overflow:hidden 正是用來
   藏住畫面外的投影片，放開會整排噴出來。

   代價：框住的是整個輪播而不是單一張投影片（對「整張圖就是一個連結」的
   輪播而言視覺上等價），且 Tab 到左右箭頭時也會框整個輪播。要把箭頭分開
   需要 :has()（Chrome 105+）。

   ※ 只用在 BGA001 大橫幅。CGA001 圖文公告不要走這條 —— 它的
     .focus-content 是四張卡整排的框，套上去會變成「框住四張卡」，看不出
     焦點在哪一張。那裡外側環本來就可行：.imgblock 自己的 overflow:hidden
     不裁自己的 outline，.item 又沒有設 overflow，所以交給全站通則即可，
     只有最左／最右那張的外側邊會被 .focus-content 的邊界裁到。
********************/
.carousel:focus-within {
	outline: 2px solid #74122d !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
}

/* 頁籤列一律用內側環：頁籤列都會把 overflow 關起來（橫向捲動用），外側環
   四邊會被裁掉。
     GA006 .tab-scroll-container  SCSS !important + <ul> inline style 雙重
                                  設 overflow-x/y:hidden，且 display:flex
                                  緊貼頁籤高度
     GA002 .nav-tabs             <ul> inline style overflow:hidden，只留
                                  paddingTop:2px，環的上緣會露出一小條、
                                  其餘三邊被裁 —— 比全裁掉更難看
   不能改用容器 :focus-within（會變成框住整排頁籤，看不出焦點在哪一個），
   只能把環畫在頁籤內側。.nav-link 內距 0.5rem（8px），4px 的環不壓到文字。
   直接掛在共用的 .nav-tabs 上，兩個模組與其他頁籤一併涵蓋，也讓全站頁籤
   的焦點樣式一致，不必逐個模組補。 */
.nav-tabs :focus,
.tab-scroll-container :focus {
	outline: 2px solid #74122d !important;
	outline-offset: -2px !important;
	box-shadow: inset 0 0 0 4px #ffffff !important;
}

/* 大橫幅的投影片本身不再自己畫環：畫了也是被裁掉或被圖片蓋住，留著只會在
   容器環之外多一條殘缺的邊。 */
.carousel-item:focus,
.bgabannerpicimg:focus,
.bgabannerpicimgPhone:focus {
	outline: none !important;
	box-shadow: none !important;
}