…
inline 元素包 block 時自己的框會被切成破碎片段，outline／box-shadow
幾乎畫不出東西 —— 模組作者當初就是因此把框畫在子元素上。通則掛在
身上對這種結構無效，只能跟著改掛子元素，順便把模組原本的橘色點虛線
（2px dotted #d26800，對白底僅 3.67:1、對彩色縮圖更低）換成雙色環。 */
.abimgs a:focus > .imgResponsiveShow,
.abimgs a:focus > .imgResponsiveShow_item,
.month-simple a:focus .day {
outline: 2px solid #000000 !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）
輪播的投影片本身是一個被圖片填滿的連結：
![]()
CGA001 圖文輪播
BGA001 大橫幅
在它身上畫環兩條路都不通：
外側環 → 被祖先容器的 overflow:hidden 裁掉，只剩一條邊
內側環 → inset box-shadow 畫在背景層、在內容之下，被填滿的 ![]()
蓋住
（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 #000000 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 3px #ffffff !important;
}
/* 頁籤列一律用內側環：頁籤列都會把 overflow 關起來（橫向捲動用），外側環
四邊會被裁掉。
GA006 .tab-scroll-container SCSS !important +
- inline style 雙重
設 overflow-x/y:hidden，且 display:flex
緊貼頁籤高度
GA002 .nav-tabs
- 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 #000000 !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;
}
.gd-offset-lg1 {
margin: 0;
}
.gd-lg10 {
width: 100%;
}
.marquee-container {
box-shadow: none;
border-radius: 0 0 20px 20px;
}
.carousel.slide {
border-radius: 0 0 40px 40px;
}
.viewbox-border {
box-shadow: none !important;
border: 2px solid #DCDCDC;
}
.list-complete-item {
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.list-complete-item {
padding: 0;
}
}
.ct-table th:first-child {
border-radius: 16px 0 0 0;
}
.ct-table th:last-child {
border-radius: 0 16px 0 0;
}
.ct-table tr:last-child td:first-child {
border-bottom-left-radius: 16px;
}
.ct-table tr:last-child td:last-child {
border-bottom-right-radius: 16px;
}
.radius-xs {
border-radius: 8px;
}
.ct-btn {
border-radius: 8px;
}
.imgblock {
background-color: #FFFAED !important;
border-radius: 20px 20px 0 0;
}
.imgblock img {
border-radius: 20px;
}
.nav-tabs ul {
margin-top: 12px;
}
.nss-embed {
border-radius: 24px;
overflow: hidden;
}
.ct-alerts {
border-radius: 24px;
overflow: hidden;
}
.ct-alerts .a-block1 {
background-color: #D34300 !important;
color: #fff !important;
}
.ct-alerts .alert-time {
color: #fff !important;
}
@media screen and (max-width: 768px) {
.marquee-container {
position: static !important;
top: inherit;
}
}
.icon {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.icon * {
box-sizing: border-box;
}
.icon-item {
width: calc(100% / 6);
padding: 0 12px;
}
.icon-item a {
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F6F8FF;
transition: 0.3s;
gap: 4px;
text-decoration: none;
}
.icon-item a svg {
width: 40px;
height: 40px;
}
.icon-item a svg path {
transition: 0.3s;
}
.icon-item a span {
font-size: 1em;
color: #000;
transition: 0.3s;
}
.icon-item a:hover {
background-color: #F7C242;
}
.icon-item a:hover svg path {
fill: #fff;
}
.icon-item a:hover span {
color: #000;
}
@media screen and (max-width: 1199px) {
.icon-item {
width: 33.3333%;
}
.icon-item a {
margin: 0 auto 24px;
}
}
@media screen and (max-width: 767px) {
.icon-item {
width: 50%;
}
}
#main_top .list-complete-item:first-child {
padding: 0;
}
#main_top .list-complete-item:first-child .module {
margin: 0;
}
#main_top .list-complete-item:first-child .module-title-bg {
display: none;
}
#main_top .list-complete-item:first-child .module-content {
padding: 0;
}
.ftrs-search-text {
background-color: #eff3f9;
height: 48px;
border-radius: 100px;
margin-right: 12px !important;
display: flex;
align-items: center;
padding: 0 12px;
width: calc(100% - 64px - 12px) !important;
}
.ftrs-search-text .svg-inline {
margin: 0 !important;
}
.ct-circle-icon svg {
fill: #FC9F4D;
}
.ftrs-search-text .search-inline .bar {
display: none;
}
.cmgch-google .ct-row:first-child {
align-items: center;
}
.cmgch-google .btn-all {
border-radius: 100px;
background-color: #F7C242;
color: #113285;
width: 64px;
height: 48px;
border: 0;
}
.ct-table td {
color: #333 !important;
}
.ct-table td * {
color: #333 !important;
}
.ct5e02bfbdc7e4096ac7f18002 .table-download-link-text {
color: #000 !important;
}
.dropdown-item-m.selected {
background-color: #F7C242 !important;
}
.dropdown-item-m {
color: #333 !important;
}
.dropdown-item-m a {
color: #333 !important;
}
.svg-inline svg {
margin: 0 !important;
}
.imgResponsiveShow {
border-radius: 20px;
}
.imgResponsiveShow:before {
right: 35px !important;
left: 35px !important;
}
.imgResponsiveShow:after {
right: 30px !important;
left: 24px !important;
}
.ct-calendar:not(.calendar-search-list) {
padding: 24px;
background-color: #F6F8FF !important;
border-radius: 24px;
}
.ct-calendar.calendar-search-list .ct-calendar {
padding: 0;
}
.ct-calendar .btn-group .btnleft {
border-radius: 12px 0 0 12px !important;
}
.ct-calendar .btn-group .btnright {
border-radius: 0 12px 12px 0 !important;
}
.nav-Vertical {
margin-top: -12px;
}
.nav-Vertical>ul>li>.sub-menu-item {
padding: 16px;
border: 1px solid #d9dee8;
border-radius: 100px;
margin-top: 12px;
}
.nav-Vertical>ul>li>.drop-down>.sub-menu-item {
padding: 16px;
border: 1px solid #d9dee8;
border-radius: 100px;
margin-bottom: 12px;
}
.nav-Vertical ul li .sub-menu-item:hover {
border-color: #113285;
}
.nav-Vertical ul li ul li .sub-menu-item {
display: block;
position: relative;
border: 0 !important;
padding: 0 16px !important;
background-color: transparent !important;
}
.nav-Vertical ul li .drop-down ul li .sub-menu-item {
padding: 8px 16px !important;
}
.nav-Vertical ul li .drop-down ul li:first-child {
padding-top: 8px;
}
.nav-Vertical ul li .drop-down ul li:last-child {
padding-bottom: 8px;
}
.nav-Vertical ul li .drop-down ul li .sub-menu-item::after {
position: absolute;
content: "";
width: 0;
height: 1px;
background-color: #D34300;
left: 16px;
bottom: 0;
transition: 0.3s;
}
.nav-Vertical ul li .drop-down ul li .sub-menu-item:hover {
color: #D34300 !important;
}
.nav-Vertical ul li ul li .sub-menu-item:hover a {
color: #D34300 !important;
}
.nav-Vertical ul li .drop-down ul li .sub-menu-item:hover::after {
width: calc(100% - 32px);
}
.nav-Vertical ul li ul {
position: static !important;
width: 100% !important;
/* padding: 4px 16px; */
border-radius: 16px;
background-color: #F6F8FF;
/* border: 1px solid #d9dee8; */
/* margin-bottom: 16px; */
}
.nav-Vertical .drop-down>ul {
margin-top: 4px;
}
.nav-Vertical>ul>.bga003-drop-down>.bga003-drop-down-left {
margin-top: 4px;
}
.nav-Vertical ul li ul li .sub-menu-item a {
float: inherit;
padding: 12px 0;
/* display: block; */
}
.bga003-drop-down:first-child {
padding-top: 8px;
}
.bga003-drop-down:last-child {
padding-bottom: 8px;
}
.bga003-drop-down .menu-arrow {
transform: rotate(90deg);
display: flex;
align-items: center;
justify-content: center;
}
.ct-resource .date-block .day {
border-radius: 12px;
}
.ct-focusslider .focus-content .imgblock {
border-radius: 20px;
}
.lunchData .ct-row {
border-radius: 20px;
overflow: hidden;
}
.mask {
border-radius: 20px;
}
.imgResponsiveShow {
border-radius: 16px !important;
}
.svg-inline {
margin-top: 4px !important;
}
.navrwd-svg {
padding: 0;
}