@charset "utf-8";

/**************************************************
= header 上方登入選單
********************/
/*theme-bg 背景色*/
.theme-bg{ background:#ffffff;background-image: url(../img/bg2.jpg); background-repeat: no-repeat;
    background-size:cover; position: relative;  }

/*模組背景色*/
div#main_top,.breadcrumb,div#left,div#middle,div#main_right,div#main_bottom{ background: none;}
.center-module-bg{background: none;}

div#main_top .module,div#left .module,div#middle .module,div#main_right .module,div#main_bottom .module,.module{ background:#ffffff}
:not(.module-content).module-padding.module-bg { background:#ffffff; }

/**************************************************
= header 上方登入選單
********************/
.login .navopen {overflow-x: hidden;}
.login .top-space header{ margin-top: 45px;}
header{ background: unset ;border: 0; border-radius: 0; top: 10px; right: 7.5%; z-index: 2;}
header>a,header>div{color:#152040;}
header .fontsize button {
    color: #ffffff;
    background-color: #676a6c;
    border: 1px solid #676a6c;
    border-radius: 2px;
    box-shadow: none;
    padding: 0;
}
header .fontsize button:hover {background-color: #676a6c; color: #ffffff; }
header .dropdown svg { fill: #185b94;}
header .dropdown svg { fill: #152040;}
header a:hover,
header>div:hover{ color:#c74756; }
header .dropdown:hover svg{ fill: #1f0e05;}
header .dropdown-content a:hover{ color: #ffffff; background-color: #c74756; }
.logo,.logo a { font-size: 2rem;  color: #ffffff;}
.focusable{ opacity: 0;}
.focusable:focus{ opacity: 1;}

@media screen and (max-width: 767px) {
.login .top-space header{ margin-top: 0px;}
header {border: none;}
header, header a, header button, header .dropdown-content a { border-radius: 0px; top:0px; left:0px;}
header>a,header>div{ color:#1f0e05; }
header a:hover, header>div:hover { color: #1f0e05;}
header .dropdown svg{ fill:#1f0e05; }
header .dropdown-content a:hover { color: #bc8ce4; background-color: rgb(246, 235, 255);}
.theme-bg { background-position: -550px 30px;}
}

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

/**************************************************
= theme 上方主圖
********************/
h1 strong { position: relative;}
h1 strong.picshow { position: absolute; top: -600px;}

.logo h1 {margin: 0 auto;}

@media screen and (min-width:520px) and (max-width: 767px) {
.theme {height: 185px;}
}



/**************************************************
= navbar 橫式選單模組
********************/
.navbar { background-color:#75c7d2;}
.navbar ul{font-weight:bold; max-width: 1600px; justify-content: center; }
.navbar li a{ color:#294d7e; height: auto; line-height: 25px; letter-spacing: 1px;}
.navbar li:hover a {color:#ffffff;}
.navrwd-svg svg { fill: #676a6c;}
.navbar li:hover ul a,.navbar ul li a:focus + .navrwd + .menuhidden{ background-color:#FFF091; color:#294d7e; line-height: 30px;}
.navbar li:hover ul a:hover { background-color:#ffffff; color:#294d7e;}
.navbar li .menuhidden.navbar-menu a { background-color:#75c7d2; color:#294d7e;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#FFF091; color:#294d7e;}
.navbar li ul li a{ border-bottom:1px solid #75c7d2; min-width:max-content;}

@media screen and (max-width: 767px) {
.navbar li {width: 100%; background: #75c7d2;}
.navbar li a {color: #294d7e;}
.navbar ul li{border-bottom: 1px solid #75c7d2;}
.navbar li:hover a{color: #fff;}
.navbar li:hover ul a {background-color:#FFF091; color:#294d7e;}
.navbar li .menuhidden.navbar-menu a{ background-color:#FFF091; color:#294d7e;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#FFF091; color:#294d7e;}
.navbar .show-menu{ color: #3b597f;background:#75cdd9}
.navbar .show-menu .ct-hamburger svg { fill:#fff;}
.navrwd-svg{ background: rgba(255,255,255,0.8); border: none;}
.navrwd-svg svg{ fill: #2b477c;}
.navbar li ul li { border: 0;}
}

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

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

@media screen and (min-width: 768px) and (max-width: 991px){
.navbar>ul>li {padding: 0 20px;}
}

/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb-item + .breadcrumb-item::before {border-left: 8px solid #f17180;}
.breadcrumb-item.active {color:#4c4c4c;}
.breadcrumb a{color:#717171;}
.breadcrumb a:hover{color:#f17180;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg{ background-color: #75cdd9; color: #29506e; background-image: url(../img/footer.png); background-repeat: no-repeat;min-height: 280px; padding-top: 0px; margin-top: 20px;background-size:cover;}
.footerbg a {color:#29506e;}
.connect-links,.connect .text.connect-explorer{ color: #29506e;}
.connect-links:hover{text-decoration: none;color: #29506e;}
.copyright { color: #29506e; background-color: #9ed8df;}

/**************************************************
= module title 模組標題
********************/
.module-title { color: #525356;}

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

/* tab頁簽 ********************/
.nav-tabs {border-bottom-color:#ffffff;}
.nav-tabs .nav-item,.nav-pills .nav-item{margin-right: 2px;}
.nav-tabs .nav-item>a,
.nav-pills .nav-item a{ color: #707070; background: #ffffff; border: 1px solid #cccccc ;border-radius: 3px;}
.nav-pills .nav-item a{ border-bottom: 1px solid #f4ffd4;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {  color: #656565; background: #f5f7f9; border-color: #75cdd9 #75cdd9 #75cdd9;}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {color: #656565; background: #75cdd9; border-color: #75cdd9 #75cdd9 #75cdd9;}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover { color: #ffffff; background-color: #ed96af;}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {color: #fff;background-color:#316fa0;}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {color: #868e96;}
.ct-dropdown-menu { background-color: #fff;  border: 1px solid #316fa0;}
.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 #ededed; color: #9a654a;}
.nav-tabs .nav-item .ct-dropdown-item:focus,
.nav-tabs .nav-item .ct-dropdown-item:hover { color: #ed96af; background-color: #fdf1f4;}



/* 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:#fff;}
.ct-table .thead-light th { color:#fff; background-color: #75C7D2; border-color: #75C7D2; border-bottom: 1px solid #FFFFFF;}
.ct-table .thead-dark th { color: #656769; background-color: #75C7D2; border-color: #75C7D2;}
.table-bordered {border-color: #e9ecef;}
.table-bordered th,.table-bordered td {border-color:#ccc;}
.table-hover tbody tr:hover { background-color:#FFF091;}



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

/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul li .sub-menu-item{ background: #f9f9f9; color: #3072a7; border-bottom-color: #bac0c3;}
.nav-Vertical ul li .sub-menu-item:hover { background:#687384; color: #656769;}


.nav-Vertical ul li .sub-menu-item a{color:#656769;}
.nav-Vertical ul li .sub-menu-item a:hover,
.nav-Vertical ul li .sub-menu-item a:focus,
.nav-Vertical ul li .sub-menu-item a:active,
.nav-Vertical ul li .sub-menu-item .active{color:#545454;}
.nav-Vertical ul li .sub-menu-item:hover a{color:#ffffff;}

.nav-Vertical ul li .menu-arrow svg{ fill:#2b477c;}
.nav-Vertical ul li .menu-arrow:hover svg{ fill: #ffffff;}
.nav-Vertical ul li ul li .sub-menu-item:hover a{color:#656769;}
.nav-Vertical ul li ul li .sub-menu-item{ background:#fdfeff;border-bottom-color: #dcd7bc;}
.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: #09699e; border-left-color: #ffd32e;}
.vertical-hamburger { background:#2b477c;}
.vertical-hamburger svg { fill:#ffffff;}

.ct-sitemap{background:#ffffff;}
.sitemap-title { background: #dc3144; color: #ffffff;}
.sitemap-block { background: #ffffff;}
.sitemap-item a { color: #505050; border-left-color: #f6ab35; background: #f5f5f5;}
.sitemap-item a:hover,
.sitemap-item a:focus{background: #fdfaf0; color: #3c2117; border-left-color: #f2c685;}
.sitemap-icon svg {fill: #ffffff;}


/**************************************************
= schoolbtn 分眾導覽 ********************/
.schoolbtn-block{ margin-top: 50px; text-align: right; margin-right: -180px;}
.schoolbtn{ height: 35px; line-height: 35px; padding: 2px 1px 0px 19px; position: relative; color: #fff; border-radius: 20px; margin: 8px; font-weight: 500; font-weight: bold; letter-spacing: 0.1rem;}

.school-svg { width: 20px; height: 20px; fill: #ffffff; display: inline-block; vertical-align: sub; cursor: pointer; position:revert; bottom: 0; }



@media (max-width:767px){
	.gd-sm6 {
		margin-left: 0%!important;}
.schoolbtn-block{ margin-top: 0px; text-align: center; padding-right: 220px;}
	
	.school-svg { width: 35px; height: 35px; }
}

/**************************************************
= hotkey 連結 ********************/
.hotkey { overflow: hidden; padding: 0 20px; margin-bottom: 5px}

/*.hk-icon {position: relative; margin: 10% auto; cursor: pointer; top: -2px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; text-align: center; padding: 10px 25px; background: linear-gradient(18deg, #2b477c, #102c61); border-radius: 50%; height: 140px; width: 140px;}

.hk-icon2, .hk-icon4 {background: linear-gradient(18deg, #e87c89, #f56172)}

.hk-icon:hover {top: 5px; box-shadow: 3px 3px 5px #ddd}


.hk-icon1:hover, .hk-icon3:hover {background: linear-gradient(18deg, #213c6f, #11264e); border: 2px solid #1a2f56;}
.hk-icon2:hover, .hk-icon4:hover {background: linear-gradient(18deg, #df5d6c, #df5d6c); border: 2px solid #d22f42;}
.hk-icon img {padding: 12px; filter: drop-shadow(0px 1px 3px rgba(255,255, 255, 0.5));}
*/

.hk-icon {position: relative; margin: 10% auto; cursor: pointer; top: -2px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; text-align: center; padding: 10px 25px; background: linear-gradient( #75cdd9, #75cdd9) ; border-radius: 50%; height: 140px; width: 140px;}

.hk-icon2,.hk-icon3, .hk-icon4 {background: linear-gradient(#75cdd9, #75cdd9)}

.hk-icon:hover {top: 5px; box-shadow: 3px 3px 5px #ddd}

.hk-icon1:hover, .hk-icon3:hover {background: linear-gradient( #75cdd9, #69c1cd); border: 2px solid #75cdd9;}
.hk-icon2:hover, .hk-icon4:hover {background: linear-gradient( #75cdd9, #69c1cd); border: 2px solid #75cdd9;}
.hk-icon img {padding: 5px; }



.hk-icon span { position: relative; bottom: 10px; color: #fff; font-size: 1.15rem; }




@media screen and (max-width: 980px){
.hk-icon {height: 130px; width: 130px;}
}

@media screen and (max-width: 980px){
.hk-icon {height: 110px; width: 110px;}
}

@media screen and (max-width: 768px){
.hotkey>div {width: 50%; float: left;}
.hk-icon {height: 130px; width: 130px;}
}

@media screen and (max-width: 520px){
.hotkey>div {width: 50%; float: left;}
.hk-icon {height: 130px; width: 130px;}
}

@media screen and (max-width: 414px){
.hk-icon img {padding: 10px;}
}




/**************************************************
= left-icon 右圖片按鈕 ********************/
.left-icon { overflow: hidden; padding: 10px;}
.l-icon {position: relative; margin: 0 auto; cursor: pointer;  transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; text-align: center; padding: 0px 25px 10px;}
.l-icon:hover{box-shadow: 0px 3px 5px #ddd}
.l-icon:hover img { background-size: contain;}
.l-icon:hover .left-icon1 {background-image: url(../img/social-media-hover1.png)}
.l-icon:hover .left-icon2 {background-image: url(../img/social-media-hover2.png)}
.l-icon:hover .left-icon3 {background-image: url(../img/social-media-hover3.png)}
.l-icon:hover .left-icon4 {background-image: url(../img/social-media-hover4.png)}
.l-icon:hover .left-icon5 {background-image: url(../img/social-media-hover5.png)}
.l-icon:hover .left-icon6 {background-image: url(../img/social-media-hover6.png)}
.l-icon span { display: block; position: relative; bottom: 10px; color: #272727; font-size: 1.05rem; font-weight: 600; line-height: 25px}


@media screen and (max-width: 1440px){
.left-icon { padding: 10px 0;}
.l-icon {padding: 12px;}
.l-icon span { font-size: 1rem;}
}

@media screen and (max-width: 767px){
.left-icon>div {width: 50%; float: left;}
.l-icon span { font-size: 1.05rem;}
}

/**************************************************
= QRcode 圖片按鈕 ********************/
.qrcode {margin: 10px 0}
.qrcode a:hover {filter: drop-shadow(2px 2px 5px #fff6f6)}
.qrcode a:hover span { font-weight: bold; color: #ea4558}
.qrcode a:hover img { border: 3px dotted #f17180; }
.qrcode a {padding: 10px 40px;}
.qrcode a span {color: #414141}

@media screen and (max-width: 1440px){
.qrcode a {padding: 10px 20px;}
}

@media screen and (max-width: 768px){
.qrcode a {padding: 5px;}
}

@media screen and (max-width: 767px){
.qrcode a {padding: 50px;}
}

@media screen and (max-width: 520px){
.qrcode a {padding: 15px 35px;}
}

@media screen and (max-width: 414px){
.qrcode>a {width: 50%; float: left; padding: 20px}
}






/**************************************************
= hotlink 連結 ********************/
.center-btn {height: 52px; margin: 8px; padding: 10px; font-size: 1.2rem; background-position: bottom; overflow: hidden; position: relative;}
.center-btn a {color: #fff; font-weight: 600; z-index: 20; text-shadow: 0 0 5px #272727;}
/*.link03 a {color: #354208}*/
.link01 .center-btn {background-image: url(../img/hotlink-1.jpg); border: 2px solid #7e96d2;}
.link02 .center-btn {background-image: url(../img/hotlink-2.jpg); border: 2px solid #f0a257;}
.link03 .center-btn {background-image: url(../img/hotlink-3.jpg); border: 2px solid #bae096;}
.link04 .center-btn {background-image: url(../img/hotlink-4.jpg); border: 2px solid #64c8e1;}
.link05 .center-btn {background-image: url(../img/hotlink-5.jpg); border: 2px solid #ef5763;}
.link06 .center-btn {background-image: url(../img/hotlink-6.jpg); border: 2px solid #e095ce;}

.center-btn::before { background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); content: ""; height: 100%; width: 50%; left: -75%; position: absolute; top: 0px; transform: skewX(-35deg); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); z-index: 21; display: block;}
.center-btn:hover::before { animation: shine .75s; -webkit-animation: shine .75s;}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}


@media screen and (max-width: 767px){
.hotlink>div {width: 50%; float: left;}
}

/**************************************************
= photobutton 連結 ********************/
.photobutton {padding: 10px 16px 25px; margin: 10px 0}
.photobutton>div {padding: 8px; position: relative; overflow: hidden;}
.photobutton>div a {float: left; overflow: hidden;}
.photobutton>div img { transform: scale(1); transition: .3s ease-in-out;}
.photobutton>div:hover img {transform: scale(1.08); overflow: hidden}


@media screen and (max-width: 767px){
.photobutton>div {width: 50%; float: left; }
}

@media screen and (max-width: 520px){
.photobutton>div {width: 100%; }
}

/*span-color-ga003*/
.span-color-ga003,a.span-color-ga003{color: #314569;}
a.span-color-ga003:hover,a.span-color-ga003:focus {color:#10ad7d;}

/*span-color-ga007*/
.span-color-ga007,a.span-color-ga007{color: #314569;}
a.span-color-ga007:hover,a.span-color-ga007:focus {color:#10ad7d;}

/*線上報修button-ga009********************/
.repair-basicset .btn-primary { color: #ffffff;  background-color:#2b477c;  border-color:#2b477c;  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:#f17180;}
.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:#f17180;}

/* CGA001 圖文公告換色 ********************/
.ct-focusslider .focus-content .textblock{ background:#fafbfe; color: #545454; border-bottom: 4px solid #2b477c;}
.ct-focusslider .focus-content .textblock.notice-color{background:#f8f8f8; color: #305d80;  border-bottom: 4px solid #2b477c;}
/*CGA001 圖文公告箭頭顏色*/
.ct-focusslider .focus-controls .focus-arrow{ fill:#2b477c; }
.ct-focusslider .focus-controls .focus-arrow:hover { fill: #ebb700;}
.ct-focusslider .focus-controls .focus-arrow.focus-end{ fill: rgba(175, 175, 175, 1);}
/*CGA004、CGA008、CGA009電子報系列*/
.ct-epaper .btn-primary{color: #ffffff; background-color:#4b77a7; border-color:#4b77a7; fill: #ffffff;}
.ct-epaper .btn-primary:hover{color: #ffffff; background-color:#0d62c0;  border-color:#0d62c0; fill: #ffffff;}
.ct-epaper .yearnav ul li{ background: #f4ffd4; color: #314569; border-bottom: 1px solid #2b477c;}
.ct-epaper .yearnav ul li:hover { background: #314569; color: #ffffff;}

/* GA017 全文檢索*******************/
.cmgch-google .btn-all{ color: #ffffff; background-color:#2b477c; border-color:#2b477c; 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:#f17180;  border-color:#f17180; fill: #ffffff;}
.cmgch-google .btn-advanced{ color: #ffffff; background-color: #797979; border-color: #797979; 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: #676767;  border-color: #676767; fill: #ffffff;}
.cmgch-google .form-group-m input { caret-color:#2b477c;} 
.cmgch-google .form-group-m .bar::before {background:#2b477c;}

/*ALT+C 導盲磚 *******************/
.text-secondary {color: #656769;}

/*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 2.4.7 焦點可見 / 1.4.11 非文字對比）

   作法沿用 N003 鳥語花香（14b1d71）與天母 tmjh（d6e2db1、4c41ccb），
   色值依本版型重新推導。

   問題：basic.css 與各模組都用 outline:2px dotted #d26800。
     對主色淺藍 #75cdd9 只有 2.01:1，疊在上傳的照片上更無法預期；
     點虛線的視覺厚度也常被判定未達 2px。

   改「雙色環」：內圈白 3px（box-shadow）＋ 外圈 2px（outline），互比 10.94:1。
     外圈取 #213d65 —— 選單文字 #294d7e 沿同色相壓深（L=0.046），
     與版型的深藍文字、按鈕同一色系。
     全亮度軸最壞 3.31:1，任何底色（含上傳照片）都過 3:1。
     ※ 版型既有的 #2b477c、#294d7e 直接當外圈，最壞只有 3.02、2.92，太亮。
     ※ 主色淺藍壓深的 #144349 同樣過，但在白底內容區偏綠、跟深藍文字不搭。

   ※ !important：模組 CSS 是 runtime 注入的 <style>，位置在版型 <link> 之後，
     且帶 .ct<uniq> 前綴權重 (0,3,1)，順序與權重雙輸，只能靠 !important 蓋過。
   ※ box-shadow 的 spread 必須等於 outline-offset，否則兩條帶中間露出底色，
     變成兩個分開的框。
   ※ isolation:isolate：box-shadow 跟背景同一個繪製步驟，後面兄弟的不透明背景
     會蓋掉白圈（選單項目上下緊貼）；建立堆疊脈絡即可畫在兄弟之上。
     不用 position:relative —— 它會變成絕對定位子孫的容器，聚焦瞬間破版。
********************/
:focus {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
}

/* 焦點環不可被 transition:all 帶著動：box-shadow 與 outline-* 都可動畫，
   環會淡入、失焦後留下白色殘影。CSS 沒有「all 扣掉幾個」的寫法，只能白名單。
   必須在非聚焦狀態也生效（殘影發生在焦點移走之後）。
   代價：刻意用 transition 動 box-shadow 的地方會變成瞬間切換。 */
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;
}

/**************************************************
= 焦點環例外：容器 overflow 或元素結構讓通則的外環顯示不出來
********************/

/* 圖示連結等模組的搜尋框：模組自己的焦點規則帶 !important，權重 (0,3,1)。
   !important 之間比權重、同權重比順序（模組在後），所以要嚴格高於它。
   不寫死模組 id（.ct<uniq>）：同一個模組在正式站與測試站的 id 不同
   （圖示連結正式站 5c247702…、NSS9 是 5c0e1def…），改用屬性選擇器補權重到 (0,3,2)。 */
html [class*="ct"] .form-group-m input:focus {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
}

/* 右上 fb／youtube／line：看得見的方塊是 svg 本身（44x43），撐出 20x20 的
   .school-svg；<a>、.schoolbtn、.school-svg 三層都沒包住它，框只框到一角。
   框直接畫在 svg 上，不動任何容器尺寸，版面不位移。 */
.schoolbtn-block a:focus {
	outline: none !important;
	box-shadow: none !important;
}
.schoolbtn-block a:focus .school-svg svg {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
}

/* logo 連結：<a> 是 flex，除了 450x100 的 logo 圖，還有一個白字的站名 <strong>
   被擠成 211px 寬、換行成 314px 高，<a> 被撐成 661x314，框會往下穿過導覽列。
   有 logo 圖時框改畫在圖上；沒有圖的站（只有文字）維持畫在 <a> 上。
   ※ 不支援 :has() 的舊瀏覽器兩個框都會出現，但不會沒有框。 */
.logo a:has(img):focus {
	outline: none !important;
	box-shadow: none !important;
}
.logo a:focus img {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
	z-index: 1 !important; /* 看不見的白字站名排在圖後面，會壓掉框的右上角；圖是 flex 項目，z-index 直接生效 */
}

/* 編輯器 GA006 的分頁面板（role=tabpanel、可聚焦）：面板裡唯一的子元素是浮動的，
   面板高度塌成 0，框變成一條橫在內容上方的扁線。flow-root 讓面板包住浮動內容，
   框就會框住整個面板。 */
.htmldisplay > [role="tabpanel"] {
	display: flow-root;
}

/* 漢堡：滿版的一整條，外環左右會被視窗裁掉，改內環。 */
.navbar .show-menu:focus {
	outline-offset: -2px !important;
	box-shadow: inset 0 0 0 4px #ffffff !important;
}

/* 子選單展開鈕：手機寬度 .navrwd-svg 是 absolute，button 本身 0x0，
   環畫在零面積上看不到，改畫在箭頭方塊上。 */
button.navrwd:focus {
	outline: none !important;
	box-shadow: none !important;
}
button.navrwd:focus .navrwd-svg {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
}

/* 大橫幅輪播 BGA001：投影片被圖片填滿，.carousel 與 .carousel-inner 都是
   overflow:hidden —— 外環被裁、內環的白圈被圖片蓋住。
   改畫在輪播容器自己身上：元素自己的 overflow:hidden 不裁自己的 outline。
   ※ 容器環只在「投影片本身」聚焦時出現。暫停鈕、指示點、左右箭頭已經有自己的環，
     若容器也框起來，畫面上會同時出現兩個框。用 :has() 分開；
     不支援 :has() 的舊瀏覽器退回 :focus-within（控制項會有兩個框，但不會沒有框）。
   ※ 放大 200% 時輪播是滿版，左右各 5px 會超出畫面被裁掉，上下兩條完整。 */
.carousel:focus-within {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
}
@supports selector(:has(*)) {
	.carousel:focus-within {
		outline: none !important;
		box-shadow: none !important;
	}
	.carousel:has(.carousel-item:focus, .carousel-inner:focus, a.slide-link:focus) {
		outline: 2px solid #213d65 !important;
		outline-offset: 3px !important;
		box-shadow: 0 0 0 3px #ffffff !important;
		isolation: isolate !important;
	}
}
/* 左右箭頭貼在 .carousel 邊緣，外環會被裁，改內環（大熱區、圖示只在中間）。 */
.carousel-control-prev:focus,
.carousel-control-next:focus {
	outline-offset: -2px !important;
	box-shadow: inset 0 0 0 4px #ffffff !important;
}
/* 投影片本身不畫環（畫了也被裁或被圖蓋，只會在容器環外多一條殘缺的邊）；
   模組另外用 ::after 疊的橘色內框也一併關掉。 */
.carousel-item:focus,
.carousel-item a.slide-link:focus,
.bgabannerpicimg:focus,
.bgabannerpicimgPhone:focus {
	outline: none !important;
	box-shadow: none !important;
}
.carousel-inner:focus::after {
	outline: none !important;
}

/* 相簿 GA004：<a> 沒設 display（inline）卻包 block 內容，框會畫成破碎片段。
   改掛到子元素上（模組原本也是這樣做）。 */
.abimgs a:focus {
	outline: none !important;
	box-shadow: none !important;
}
.abimgs a:focus > .imgResponsiveShow,
.abimgs a:focus > .imgResponsiveShow_item {
	outline: 2px solid #213d65 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
	isolation: isolate !important;
}

/* 頁籤列：GA002 .nav-tabs、GA006 .tab-scroll-container 都把 overflow 關起來
   （橫向捲動用），外環四邊被裁。改內環（沿用 N003 ee451be），不改版面高度。
   .nav-link 內距 0.5rem（8px），4px 的內環不壓到文字。 */
.nav-tabs :focus,
.tab-scroll-container :focus {
	outline-offset: -2px !important;
	box-shadow: inset 0 0 0 4px #ffffff !important;
}

/* 放大 200%（手機斷點）時，這幾個元素貼齊畫面邊緣，外環會超出畫面被裁：
     頁首的 :::／登入／網站導覽／首頁   貼齊頂端
     圖文公告 CGA001 的上一篇／下一篇   貼齊左右兩側
   改內環。連結內距 5px、內環只佔 4px，不壓到文字。 */
@media screen and (max-width: 767px) {
	header > a:focus,
	.ct-focusslider .focus-arrow:focus {
		outline-offset: -2px !important;
		box-shadow: inset 0 0 0 4px #ffffff !important;
	}
	/* logo 圖貼齊左緣。圖片會蓋住 inset 陰影（白圈看不到），只留內側的深藍框，
	   logo 底是淺色，深藍框對比足夠。 */
	.logo a:focus img {
		outline-offset: -2px !important;
		box-shadow: none !important;
	}
}