/* =======================================================================
   pages.css — 站台專屬共用樣式
   來源與分區說明：
   (1) 原站每頁 head 內嵌的 3 段 <style>（21 頁逐位元組相同，已用雜湊比對確認），
       只收錄「大括號內容非空」的規則；原樣板留下的空規則（color: #; 這種沒填值的
       殘留）一律不收。收錄前已用程式機械化列出每段的非空規則清單逐條核對。
   (2) 首頁 Banner 輪播模組的內嵌 <style>（只有兩個首頁有）。
   (3) 頁尾導覽模組的內嵌 <style>（21 頁共用）。
   (4) 行內 style="..." 屬性抽出來的工具 class（CSP 前置重構）。
   各頁內文自己的 <style> 不放這裡，各自輸出成 /assets/css/pages/<pageKey>.css。
   ======================================================================= */

/* -----------------------------------------------------------------------
   (1) 樣板預設：字型與 logo 區
   ----------------------------------------------------------------------- */
body
{
	font-family: Tahoma, Geneva, sans-serif, Arial;
	font-size: 12px;
}

input,
button,
select,
textarea
{
	font-family: Tahoma, Geneva, sans-serif, Arial;
}

h1,
h2,
h3,
h4,
h5,
.item_header .item_title
{
	font-family: Tahoma, Geneva, sans-serif, Arial;
}

#header-row .moduletable.call-now div
{
	font-family: Tahoma, Geneva, sans-serif, Arial;
}

#header-row .logo
{
	float: left;
	line-height: 60px;
	min-width: 240px;
}

#header-row .logo,
#header-row .logo a,
#header-row .logo a:hover
{
	font-family: 'Open Sans', Arial, serif !important;
	font-style: normal;
	font-weight: normal;
}

#header-row .logo span.slogan
{
	left: 5px;
	top: 0px;
	font-family: 'Open Sans', Arial, serif !important;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}

/* 頁首 logo 圖片垂直置中。原站沒有任何規則讓這個模組垂直置中——它是一個
   高度只有圖片自身高度（約 77px）的區塊，跟旁邊 float 的主選單模組（撐開
   #header-row 到 122px 高，且這個高度會隨斷點/選單內容不同而變）並列，
   圖片因此貼著最上緣、下面留一大段空白（原站正式站實測也是這樣，不是遷移
   造成的落差，是主動改善）。
   ⚠️ 這裡刻意不用 position:absolute + 固定 left 像素值：bootstrap.css 內建
   了好幾組響應式斷點（768-979px、≥1200px 等），每個斷點都各自重新定義
   .container 寬度與 [class*="span"] 的寬度/margin（例如 768-979px 範圍
   .container 從 940px 變成 756px、gutter 從 20px 變成 12px），這些斷點都是
   bootstrap.css 自己內建的，不是額外的響應式覆蓋層，代表 #logo 這個 span2
   欄位在 .container 裡的實際寬度與位置本來就會隨斷點變動。如果用某個斷點
   量出來的固定 left 像素去定位，其他斷點會直接跑位（實測 1280px 寬跟
   1000px 寬兩種視窗下，#logo 右邊緣相對位置就不一樣）。
   改用 <header> 本身 flex 化：`order` 屬性只調整視覺呈現順序（不改變
   HTML/DOM 順序，不影響其他依賴文件順序的邏輯），`margin-left: auto` 讓
   主選單模組在 flex 列裡吃掉所有剩餘空間、貼齊最右邊（等效原本
   float:right 的視覺效果），`align-items: center` 讓所有子項（包含高度
   遠矮於選單的 logo 圖片）自動相對「最高的那個子項」垂直置中——不管
   #header-row 在哪個斷點被撐到多高，或 .container/span2 寬度怎麼隨斷點
   變化，都不需要任何寫死的像素值，flex 每次都會重新計算。 */
header
{
	display: flex;
	align-items: center;
}

#logo
{
	order: 1;
}

#header-row .logo-image
{
	order: 2;
}

#header-row .moduletable.navigation
{
	order: 3;
	margin-left: auto;
	/* flex 化後 float 不再產生效果（flex item 一律忽略 float），保留這行
	   只是讓語意清楚：原本靠 float:right 達成的「貼右邊」效果現在改由
	   margin-left:auto 負責。 */
	float: none;
}

/* -----------------------------------------------------------------------
   (1) 主選單模組（mod_as_menu）
   ----------------------------------------------------------------------- */
#as-menu #menu_1,
#as-menu ul#menu_1.as-menu ul
{
	border-radius: 5px;
}

#as-menu ul#menu_1.as-menu > li > a,
#as-menu ul#menu_1.as-menu > li > span
{
	font-size: 20px;
	line-height: 22px;
	font-family: 'Noto Sans TC', sans-serif;
}

#as-menu ul#menu_1.as-menu ul
{
	width: 191px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
}

#as-menu ul#menu_1.as-menu ul li a,
#as-menu ul#menu_1.as-menu ul li span
{
	font-size: 18px;
	line-height: 20px;
	font-family: 'Noto Sans TC', sans-serif;
}

#as-menu ul#menu_1.as-menu li li:hover ul,
#as-menu ul#menu_1.as-menu li li.asHover ul,
#as-menu ul#menu_1.as-menu li li li:hover ul,
#as-menu ul#menu_1 .as-menu li li li.asHover ul
{
	left: 191px;
}

/* -----------------------------------------------------------------------
   (2) 首頁 Banner 輪播模組（mod_as_artslider / camera）
   ----------------------------------------------------------------------- */
.camera_caption p
{
	font-size: 14px;
}

.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent,
.camera_wrap .camera_pag .camera_pag_ul li:hover
{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.camera_wrap .camera_pag .camera_pag_ul li
{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* -----------------------------------------------------------------------
   (2b) camera 輪播套件的 CSP 覆蓋規則
   `camera.min.js` 用字串拼接動態插入帶 style="..." 的 HTML
   （`.append('<div class="cameraappended" style="..." />')` 這種寫法），
   嚴格 CSP 的 style-src 會把那個屬性整個剝掉——這種寫法藏在 minified 的
   第三方 JS 裡，看 HTML 模板完全找不到，是 csp-vendor-scan 掃出來的。
   下面把套件原本寫在屬性裡的宣告逐字搬成等效的外部規則。
   ⚠️ 三處命中全部補上，不因為「目前設定應該不會走到」而略過：
      `fx: 'random'` 會隨機挑轉場效果，aesc 專案就是憑印象跳過其中一筆，
      直到使用者在正式站看到馬賽克畫面才發現。
   套件之後用 jQuery `.css()`（CSSOM 賦值）動態改尺寸/顯示狀態不受 CSP 限制，
   會以行內樣式蓋過這幾條規則，動畫仍正常。
   ----------------------------------------------------------------------- */
.cameraappended
{
	display: none;
	overflow: hidden;
	position: absolute;
	z-index: 1000;
}

.camera_bar
{
	display: none;
}

.camera_wrap .camera_pag .camera_pag_ul li[class^="pag_nav_"]
{
	position: relative;
	z-index: 1002;
}

/* -----------------------------------------------------------------------
   (3) 頁尾導覽模組
   ----------------------------------------------------------------------- */
.page-wrapper
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.content-menu
{
	padding: 0 40px;
}

@media screen and (max-width: 500px)
{
	.page-wrapper
	{
		justify-content: flex-start;
	}

	.content-menu
	{
		padding: 0 20px 30px;
	}
}

/* -----------------------------------------------------------------------
   (4) 行內 style="..." 抽出來的工具 class（CSP 前置重構）
   ----------------------------------------------------------------------- */

/* /公司組織：組織圖原本用 style="border: 0px none;" 蓋掉樣板的圖片外框。
   ⚠️ 必須寫成 `.item_fulltext img.img-noborder`：style.default.css 有
   `.item_fulltext img { border: 1px solid #d4d4d4; padding: 5px; }`（優先權 0,1,1），
   單純的 `.img-noborder`（0,1,0）會反過來被它蓋掉，圖片就會多出 1px 灰邊。
   原站只取消 border、沒有取消 padding 與背景，這裡照樣只寫 border。 */
.item_fulltext img.img-noborder
{
	border: 0px none;
}

/* /聯絡我們：Google 地圖 iframe 原本是 style='border: 0px solid #000000' */
.item_fulltext iframe.embedGoogleMap
{
	border: 0px solid #000000;
}

/* /招募精英：頁尾的紅字防詐聲明，原本是行內 style */
.jobs-notice
{
	color: red;
	font-weight: bold;
	font-size: 18px;
}

/* 各品牌頁的小標題底線，原本是 <span style="text-decoration: underline;"> */
.item_fulltext .text-underline
{
	text-decoration: underline;
}

/* 首頁側欄「造訪日電貿集團」區塊（原本整組都是行內 style） */
.ndb-block
{
	text-align: center;
	margin: 0 auto 20px auto;
	width: 140px;
	border-bottom: 3px solid #c65752;
}

.ndb-block p
{
	padding: 5px 0;
	/* 原站行內樣式就是不加引號、也沒有 fallback 的 `font-family: Noto Sans TC;`，
	   這裡逐字照抄，讓 getComputedStyle 的結果跟正式站完全一致。 */
	font-family: Noto Sans TC;
	font-size: 18px;
}

.ndb-logos
{
	text-align: center;
	padding-left: 50px;
}

.ndb-logo
{
	float: left;
	margin: 10px;
}

/* 首頁品牌跑馬燈：原本每張圖都是 style="margin-right:150px"。
   ⚠️ 必須疊上 `#mod_as_scroller` 前綴：scroller.styles.css 有
   `#mod_as_scroller img { margin: 0px; }`（ID 選擇器，優先權 1,0,1），
   單純的 class 規則會被它整條蓋掉、margin-right 完全不生效
   （lipers 專案實測踩過同一個坑）。 */
#mod_as_scroller .scroller-item
{
	margin-right: 150px;
}