@charset "utf-8";
/* ==========================================================================
   臺東場 首頁圖片彈跳視窗（Colorbox）外觀　#3313
   --------------------------------------------------------------------------
   ● 載入順序：必須排在 colorbox.css 之後。兩邊同為 ID 選擇器（特異度相同），
     後載入者才會勝出。見 tpl_ttdares/index.html。

   ● 為什麼需要這一份：
     共用的 web/css/colorbox.css 是多站 symlink 共用的檔案（不可改），
     它的外觀完全依賴 css/images/colorbox/{overlay,border,controls,loading}.png
     這組 sprite —— 但專案裡從來沒有這些檔案（實測全部 404，主站亦然），
     於是：
       ・遮罩不會變暗（overlay.png 缺）→ 彈跳視窗與底下頁面內容糊在一起
       ・關閉鈕整顆隱形（controls.png 缺 + text-indent:-9999px）→ 滑鼠使用者
         找不到地方關閉，只能點遮罩或按 Esc
       ・沒有外框、陰影、載入動畫
     本檔改用純 CSS 重繪，不依賴任何圖檔，順帶補上鍵盤焦點的可見樣式。

   ● 影響範圍：只有 tpl_ttdares/index.html 載入本檔，其餘頁面與其他改良場
     完全不受影響。
   ========================================================================== */

/* --------------------------------------------------------------------------
   遮罩：改用純色半透明，讓視線集中在圖片上
   -------------------------------------------------------------------------- */
#cboxOverlay {
	background: #0a1e23;
	background-image: none;
	opacity: .78;
	filter: none;
}

/* --------------------------------------------------------------------------
   對話框本體
   預設主題用 3×3 九宮格拼出外框，每一格都是背景圖；圖不存在等於九格全是
   透明佔位（左右各吃掉 21px）。這裡把它們收成 0，改由 #cboxContent 直接
   擔任對話框本體，圓角與陰影都畫在它身上。
   -------------------------------------------------------------------------- */
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight,
#cboxMiddleLeft, #cboxMiddleRight {
	width: 0;
	height: 0;
	background: none;
}

#colorbox {
	outline: 0;
}

#cboxContent {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
	overflow: hidden;
}

/* 預設主題在內容下方留 28px 給那排（依賴圖片的）控制鈕，本檔把關閉鈕移到
   右上角，這段留白就不需要了 */
#cboxLoadedContent {
	margin-bottom: 0;
}

/* 單張圖片預覽用不到相簿控制鈕與標題列，一併收掉（它們同樣依賴缺失的圖） */
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxCurrent,
#cboxTitle {
	display: none;
}

/* --------------------------------------------------------------------------
   關閉鈕：右上角圓鈕。原本是 25×25 的隱形區塊在右下角。
   尺寸取 40px（行動版 44px）以符合觸控目標大小建議。
   -------------------------------------------------------------------------- */
#cboxClose {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: auto;
	left: auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #00786D;
	background-image: none;
	/* 按鈕原本的文字內容是英文 "close"，用 font-size:0 隱藏視覺、
	   保留它作為可及名稱的後備；實際名稱由 banner.js 補上中文 aria-label。
	   不用 text-indent:-9999px，那會讓 ::before 的叉號也被推出畫面。 */
	font-size: 0;
	text-indent: 0;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	/* 白色描邊：關閉鈕會壓在圖片右上角，圖片若是深色或滿版時才不會糊在一起 */
	box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .25);
	transition: background-color .2s, transform .2s;
}

#cboxClose::before {
	content: "\00d7";	/* × */
	display: block;
	font-size: 30px;
	line-height: 40px;
	color: #fff;
	font-weight: 400;
}

#cboxClose:hover,
#cboxClose:focus {
	background: #005c54;
	background-position: 0 0;	/* 蓋掉預設主題的 sprite 位移 */
	transform: scale(1.06);
}

#cboxClose:focus {
	outline: 3px solid #fff;
	outline-offset: -1px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(0, 120, 109, .65);
}

/* --------------------------------------------------------------------------
   內容排版（HTML 由 web_division/js/banner.js 產生）
   -------------------------------------------------------------------------- */
.cb-figure {
	padding: 28px 30px 24px;
	text-align: center;
}

.cb-figure .cb-img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 62vh;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.cb-figure .cb-caption {
	margin: 20px auto 0;
	max-width: 92%;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 700;
	color: #12343b;
	/* 標題與圖片之間拉一條細分隔線，長內容不會黏在一起 */
	padding-top: 16px;
	border-top: 1px solid #e3ebec;
}

.cb-figure .cb-caption a {
	color: #00786D;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-figure .cb-caption a:hover {
	color: #005c54;
}

.cb-figure .cb-caption a:focus {
	outline: 3px solid #197ac3;
	outline-offset: 2px;
	color: #005c54;
}

/* --------------------------------------------------------------------------
   載入中：預設的 loading.gif 也不存在，改用純 CSS 轉圈
   -------------------------------------------------------------------------- */
#cboxLoadingOverlay {
	background: #fff;
	background-image: none;
}

#cboxLoadingGraphic {
	background-image: none;
}

#cboxLoadingGraphic::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid #cfe0de;
	border-top-color: #00786D;
	border-radius: 50%;
	animation: cbSpin .8s linear infinite;
}

@keyframes cbSpin {
	to { transform: rotate(360deg); }
}

/* 開啟時的淡入（只作用在對話框，遮罩維持固定透明度） */
#colorbox {
	animation: cbFadeIn .18s ease-out;
}

@keyframes cbFadeIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* 使用者若在系統設定要求減少動態效果，一律關閉動畫（WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
	#colorbox { animation: none; }
	#cboxClose { transition: none; }
	#cboxClose:hover, #cboxClose:focus { transform: none; }
	#cboxLoadingGraphic::after { animation: none; }
}

/* --------------------------------------------------------------------------
   小螢幕
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.cb-figure {
		padding: 24px 16px 20px;
	}
	.cb-figure .cb-img {
		max-height: 52vh;
	}
	.cb-figure .cb-caption {
		margin-top: 16px;
		padding-top: 12px;
		font-size: 1.05rem;
	}
	#cboxClose {
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		line-height: 44px;
	}
	#cboxClose::before {
		line-height: 44px;
	}
}