@charset "UTF-8";

/**
 * CS1140101E 鍵盤焦點可見樣式（全站共用，請於主要 CSS 之後載入）
 */
:root {
	--a11y-focus-ring: #ffbf47;
	--a11y-focus-shadow: #005a9c;
}

/* 連結、按鈕、表單控制項 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* 導盲磚：維持內嵌框線，避免被外層 overflow 裁切 */
a.accesskey-guide:focus-visible,
a.accesskey-guide-top:focus-visible,
.header-misc-nav li a.accesskey-guide-top:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 0.125rem var(--a11y-focus-shadow) !important;
}

a.skip-link:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: none !important;
}

/* 首頁 KV／典藏輪播 bxSlider
 * 外層 overflow:hidden 會裁切外框 outline，改用內嵌底色＋內框表現焦點 */
.index-kv .bx-viewport .index-kv-slider > a,
.index-kv-slider > a {
	position: relative;
}
.index-kv .bx-viewport .index-kv-slider > a:focus,
.index-kv .bx-viewport .index-kv-slider > a:focus-visible,
.index-kv-slider > a:focus,
.index-kv-slider > a:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	/* 內嵌雙層框＋半透明底色，不受 overflow 裁切 */
	box-shadow: inset 0 0 0 0.375rem var(--a11y-focus-ring), inset 0 0 0 0.625rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.4) !important;
	z-index: 2;
}
.index-kv .bx-viewport .index-kv-slider > a:focus::after,
.index-kv .bx-viewport .index-kv-slider > a:focus-visible::after,
.index-kv-slider > a:focus::after,
.index-kv-slider > a:focus-visible::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 90, 156, 0.22);
	pointer-events: none;
	z-index: 1;
}
.index-kv .bx-viewport .index-kv-slider > a:focus img,
.index-kv .bx-viewport .index-kv-slider > a:focus-visible img,
.index-kv-slider > a:focus img,
.index-kv-slider > a:focus-visible img {
	opacity: 0.88;
}

/* 左右箭頭：底色變換＋外框（覆寫 outline:0） */
.bx-wrapper .bx-controls-direction a:focus,
.bx-wrapper .bx-controls-direction a:focus-visible,
.index-kv .bx-wrapper .bx-controls-direction a:focus,
.index-kv .bx-wrapper .bx-controls-direction a:focus-visible,
.index-collection-slider-list .bx-wrapper .bx-controls-direction a:focus,
.index-collection-slider-list .bx-wrapper .bx-controls-direction a:focus-visible {
	outline: 0.25rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.1875rem !important;
	background-color: #ffbf47 !important;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.375rem var(--a11y-focus-shadow) !important;
}

/* 分頁圓點：放大＋底色變換，焦點較易察覺 */
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:focus-visible,
.index-kv .bx-wrapper .bx-pager.bx-default-pager a:focus,
.index-kv .bx-wrapper .bx-pager.bx-default-pager a:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-shadow) !important;
	outline-offset: 0.1875rem !important;
	background: #ffbf47 !important;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
	transform: scale(1.45);
}

/* 暫停／播放鈕 */
.index-kv-autoplay-btn:focus,
.index-kv-autoplay-btn:focus-visible,
.index-collection-autoplay-btn:focus,
.index-collection-autoplay-btn:focus-visible,
.museum-slick-autoplay-btn:focus-visible {
	outline: 0.25rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.1875rem !important;
	background-color: #ffbf47 !important;
	border-color: var(--a11y-focus-shadow) !important;
	color: #003366 !important;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.375rem var(--a11y-focus-shadow) !important;
}

/* 典藏精選輪播圖連結（同頁） */
.index-collection .bx-viewport a:focus,
.index-collection .bx-viewport a:focus-visible,
.index-collection-slider a:focus,
.index-collection-slider a:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 0.25rem var(--a11y-focus-ring), inset 0 0 0 0.4375rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.4) !important;
}

/*
 * 縮圖焦點：只要一種橘色框
 * 畫在 img 上（負 offset 內縮），避免雙色、也被 img 蓋住、或被 slick-list 裁成缺邊
 */
.photo-list.collection-slick-wrap button.slick-slider-thumb:focus,
.photo-list.collection-slick-wrap button.slick-slider-thumb:focus-visible,
.photo-list.collection-slick-wrap button.slick-slider-thumb[tabindex]:focus-visible,
.photo-list.highlight-slick-wrap .slick-slider-thumb:focus,
.photo-list.highlight-slick-wrap .slick-slider-thumb:focus-visible,
.photo-list.highlight-slick-wrap .slick-slider-thumb[tabindex]:focus-visible,
.photo-list.masi-slick-wrap .masi-slider-thumb:focus,
.photo-list.masi-slick-wrap .masi-slider-thumb:focus-visible,
.photo-list.masi-slick-wrap .masi-slider-thumb[tabindex]:focus-visible,
.photo-list.maso-slick-wrap .slick-slider-thumb:focus,
.photo-list.maso-slick-wrap .slick-slider-thumb:focus-visible,
.photo-list.maso-slick-wrap .slick-slider-thumb[tabindex]:focus-visible,
.page-slider-wrap .page-slider-thumb:focus,
.page-slider-wrap .page-slider-thumb:focus-visible,
.page-slider-wrap .page-slider-thumb[tabindex]:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}
.photo-list.collection-slick-wrap button.slick-slider-thumb:focus > img,
.photo-list.collection-slick-wrap button.slick-slider-thumb:focus-visible > img,
.photo-list.highlight-slick-wrap .slick-slider-thumb:focus > img,
.photo-list.highlight-slick-wrap .slick-slider-thumb:focus-visible > img,
.photo-list.masi-slick-wrap .masi-slider-thumb:focus > img,
.photo-list.masi-slick-wrap .masi-slider-thumb:focus-visible > img,
.photo-list.maso-slick-wrap .slick-slider-thumb:focus > img,
.photo-list.maso-slick-wrap .slick-slider-thumb:focus-visible > img,
.page-slider-wrap .page-slider-thumb:focus > img,
.page-slider-wrap .page-slider-thumb:focus-visible > img {
	outline: 0.25rem solid var(--a11y-focus-ring) !important;
	outline-offset: -0.25rem !important;
	box-shadow: none !important;
}

/* Slick 會把 .slick-slide 設成可聚焦；外框被裁切時看起來像「空 Tab」，直接關掉 slide 焦點樣式 */
.photo-list .slick-slide:focus,
.photo-list .slick-slide:focus-visible,
.photo-list .slick-slide[tabindex]:focus-visible,
.page-slider-wrap .slick-slide:focus,
.page-slider-wrap .slick-slide:focus-visible,
.page-slider-wrap .slick-slide[tabindex]:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

/*
 * 主圖連結焦點：inset box-shadow 會被 img 蓋住（單張時尤其像「沒框」）
 * 改用 ::after 畫在圖上方的外框，圖本身不內縮
 */
.photo-list.highlight-slick-wrap .highlight-slider-for .slick-slide a,
.photo-list.masi-slick-wrap .masi-slider-for .slick-slide a,
.photo-list.maso-slick-wrap .maso-slider-for .slick-slide a,
.photo-list.collection-slick-wrap .collection-slider-for .slick-slide a,
.page-slider-wrap .page-slider-for .slick-slide a {
	position: relative;
}
.photo-list.highlight-slick-wrap .highlight-slider-for .slick-slide a:focus,
.photo-list.highlight-slick-wrap .highlight-slider-for .slick-slide a:focus-visible,
.photo-list.masi-slick-wrap .masi-slider-for .slick-slide a:focus,
.photo-list.masi-slick-wrap .masi-slider-for .slick-slide a:focus-visible,
.photo-list.maso-slick-wrap .maso-slider-for .slick-slide a:focus,
.photo-list.maso-slick-wrap .maso-slider-for .slick-slide a:focus-visible,
.photo-list.collection-slick-wrap .collection-slider-for .slick-slide a:focus,
.photo-list.collection-slick-wrap .collection-slider-for .slick-slide a:focus-visible,
.page-slider-wrap .page-slider-for .slick-slide a:focus,
.page-slider-wrap .page-slider-for .slick-slide a:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
}
.photo-list.highlight-slick-wrap .highlight-slider-for .slick-slide a:focus::after,
.photo-list.highlight-slick-wrap .highlight-slider-for .slick-slide a:focus-visible::after,
.photo-list.masi-slick-wrap .masi-slider-for .slick-slide a:focus::after,
.photo-list.masi-slick-wrap .masi-slider-for .slick-slide a:focus-visible::after,
.photo-list.maso-slick-wrap .maso-slider-for .slick-slide a:focus::after,
.photo-list.maso-slick-wrap .maso-slider-for .slick-slide a:focus-visible::after,
.photo-list.collection-slick-wrap .collection-slider-for .slick-slide a:focus::after,
.photo-list.collection-slick-wrap .collection-slider-for .slick-slide a:focus-visible::after,
.page-slider-wrap .page-slider-for .slick-slide a:focus::after,
.page-slider-wrap .page-slider-for .slick-slide a:focus-visible::after {
	content: "";
	position: absolute;
	left: 0.1875rem;
	top: 0.1875rem;
	right: 0.1875rem;
	bottom: 0.1875rem;
	border: 0.25rem solid var(--a11y-focus-ring);
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow);
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
}

/* slick 輪播箭頭／圓點 */
.slick-prev:focus-visible,
.slick-next:focus-visible,
.slick-dots li button:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* 文章上稿 SliderKit（page_templates_7）：主圖／縮圖／箭頭焦點 */
.sliderkit.photosgallery-captions .sliderkit-panel > a,
.MultipleImageContainer .sliderkit-panel > a {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.sliderkit.photosgallery-captions .sliderkit-panel > a:focus,
.sliderkit.photosgallery-captions .sliderkit-panel > a:focus-visible,
.MultipleImageContainer .sliderkit-panel > a:focus,
.MultipleImageContainer .sliderkit-panel > a:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.sliderkit.photosgallery-captions .sliderkit-panel > a:focus::after,
.sliderkit.photosgallery-captions .sliderkit-panel > a:focus-visible::after,
.MultipleImageContainer .sliderkit-panel > a:focus::after,
.MultipleImageContainer .sliderkit-panel > a:focus-visible::after {
	content: "";
	position: absolute;
	left: 0.1875rem;
	top: 0.1875rem;
	right: 0.1875rem;
	bottom: 0.1875rem;
	border: 0.25rem solid var(--a11y-focus-ring);
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow);
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
}
.sliderkit-nav-clip a:focus,
.sliderkit-nav-clip a:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.sliderkit-nav-clip a:focus > img,
.sliderkit-nav-clip a:focus-visible > img {
	outline: 0.25rem solid var(--a11y-focus-ring) !important;
	outline-offset: -0.25rem !important;
}
.sliderkit-btn a:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* owl carousel */
.owl-carousel button:focus-visible,
.owl-carousel .owl-dot:focus-visible,
.owl-carousel .owl-dot button:focus-visible,
.owl-prev:focus-visible,
.owl-next:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* fotorama 圖集 */
.fotorama__arr:focus-visible,
.fotorama__fullscreen-icon:focus-visible,
.fotorama__thumb:focus-visible,
.fotorama__dot:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
}

/* 首頁快速連結、主選單 */
.fast-link a:focus-visible,
.main-nav a:focus-visible,
.header-misc-nav a:focus-visible,
.side-nav a:focus-visible,
.rwd-nav a:focus-visible,
.rwd-nav-btn:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* 圖片 LOGO 連結：僅外框 outline，避免 box-shadow 藍環在圖面產生橫線 */
h1.header-logo > a:focus-visible,
.header-misc-nav a:has(> img):focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: none !important;
}

h1.header-logo > a:focus-visible img,
.header-misc-nav a:focus-visible img {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Google 站內搜尋 */
#topcr .gsc-search-button-v2:focus-visible,
#rwd-topcr .gsc-search-button-v2:focus-visible,
#search_result .gsc-search-button-v2:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
}

/* 兒童專區 LOGO：用內嵌框（四邊都在連結內），避免上／左被 header-misc、overflow-x 裁掉 */
header h1.header-logo > a:focus,
header h1.header-logo > a:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	/* 內嵌雙層黃／藍框＋底色，不依賴會被裁切的 outline */
	box-shadow: inset 0 0 0 0.25rem var(--a11y-focus-ring), inset 0 0 0 0.5rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.45) !important;
	z-index: 30;
}
header h1.header-logo > a:focus img,
header h1.header-logo > a:focus-visible img {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	opacity: 0.92;
}

/* 兒童專區：到處逛逛（鴿子圖熱點） */
a.dove:focus,
a.dove:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: inset 0 0 0 0.375rem var(--a11y-focus-ring), inset 0 0 0 0.625rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.25) !important;
	z-index: 5;
}

/* 不支援 :focus-visible 的舊版瀏覽器 */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	[tabindex]:focus {
		outline: 0.1875rem solid var(--a11y-focus-ring) !important;
		outline-offset: 0.125rem;
	}

	h1.header-logo > a:focus,
	.header-misc-nav a:focus {
		box-shadow: none !important;
	}

	/* 首頁輪播：舊瀏覽器同樣用內嵌底色／內框 */
	.index-kv .bx-viewport .index-kv-slider > a:focus,
	.index-kv-slider > a:focus {
		outline: none !important;
		box-shadow: inset 0 0 0 0.375rem var(--a11y-focus-ring), inset 0 0 0 0.625rem var(--a11y-focus-shadow) !important;
		background-color: rgba(255, 191, 71, 0.4) !important;
	}
	.index-kv .bx-wrapper .bx-controls-direction a:focus,
	.index-kv .bx-wrapper .bx-pager.bx-default-pager a:focus,
	.index-kv-autoplay-btn:focus {
		outline: 0.25rem solid var(--a11y-focus-ring) !important;
		background-color: #ffbf47 !important;
		box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.375rem var(--a11y-focus-shadow) !important;
	}
}