/* =======================================================================
   全站共用樣式（原本以行內 <style> 分散在各頁 <head>／頁尾模組中，
   逐頁比對後確認為逐字相同的全站共用區塊，集中於此方便維護）。
   來源：Joomla 樣板色彩預設（多數色彩值原站未設定，保留原樣不補值）
   ======================================================================= */

/* 全站預設字型（body 這條會決定頁尾 Copyright 等大部分文字的實際字型，
   之前一次遷移中誤判整段都是空規則而漏收，導致頁尾字型退回框架 CSS 的
   Arial 預設值，跟原站不一致——這是真的會影響畫面的規則，不是空的） */
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;
}

/* 頁首 logo 字型 */
#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;
}

/* 主選單（#as-menu，mod_as_menu 模組隨頁輸出的樣式） */
#as-menu #menu_1,
#as-menu ul#menu_1.as-menu ul {
	background-color: #;
	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;
	color: #;
}

#as-menu ul#menu_1.as-menu > li.active > a,
#as-menu ul#menu_1.as-menu > li.asHover > a,
#as-menu ul#menu_1.as-menu > li.current > a,
#as-menu ul#menu_1.as-menu > li.active > span,
#as-menu ul#menu_1.as-menu > li.asHover > span,
#as-menu ul#menu_1.as-menu > li.current > span,
#as-menu ul#menu_1.as-menu > li > a:hover,
#as-menu ul#menu_1.as-menu > li > span:hover,
#as-menu ul#menu_1.as-menu ul li a:hover,
#as-menu ul#menu_1.as-menu ul li span:hover,
#as-menu ul#menu_1.as-menu ul li.active > a,
#as-menu ul#menu_1.as-menu ul li.asHover > a,
#as-menu ul#menu_1.as-menu ul li.active > span,
#as-menu ul#menu_1.as-menu ul li.asHover > span {
	color: #;
}

#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;
	color: #;
}

#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;
}

/* Banner 輪播（camera slideshow，slider-row 隨頁輸出的樣式） */
.slide_title {
	color: #;
}

.slide_title a {
	color: #;
}

.slide_title a:hover {
	color: #;
}

.slide_title .item_title_part0 {
	color: #;
}

.slide_title .item_title_part1 {
	color: #;
}

.camera_caption p {
	color: #;
	font-size: 14px;
}

.camera_caption a.readmore {
	background-color: #;
	color: #;
}

.camera_caption a.readmore:hover {
	background-color: #;
}

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

.camera_wrap .camera_pag .camera_pag_ul li {
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* 原站這兩條 background-color 在 Joomla 後台從未設定過值（逐字核對過原始碼
   確認是空的 `#;`，不是搬移時漏收），導致左下角的分頁圓點原本完全透明、
   肉眼看不到。使用者確認要修，改用站內既有的橘色強調色（#E08034，跟主選單
   hover/當前項目同一個顏色），預設點用半透明白，跟深色/淺色 Banner 圖都
   還能看得出來。 */

/* Banner 輪播套件（camera.min.js）預設 loader:"none" 就應該不顯示這條
   loading bar，但套件本身用 jQuery .css() 直接把 .camera_bar_cont 動態設成
   深灰底、蓋在 Banner 底部（跟 loader 設定無關的套件行為，非本站設定造成），
   使用者確認要修，直接強制隱藏（!important 蓋過套件的行內樣式）。 */
.camera_wrap .camera_bar,
.camera_wrap .camera_bar_cont {
	display: none !important;
}

/* 頁尾網站導覽（footer-row 內的 5 欄選單） */
.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;
	}
}

/* =======================================================================
   以下為 CSP 前置重構：各頁內文原本各自的行內 <style> 集中於此。
   逐頁比對後發現「公司簡介／營運目標」與「AVX／EVERLIGHT／KYOCERA／增值服務」
   這兩組頁面，各自共用同一套 class 名稱，但少數幾條規則的值不同（不是逐字
   相同），所以用頁面專屬 class（加在該頁內文最外層的 <div> 上，見對應
   content/*.html）當作前綴區隔，其餘逐字相同的規則才寫成不分頁面的共用規則。
   「發展沿革」也重複使用了 .column-title/.column-content 這兩個名字，但代表
   完全不同的版面（時間軸列，不是文字欄位），必須整段獨立用 .page-history
   前綴，不能跟公司簡介/營運目標那組共用規則混在一起，否則會互相污染。
   ======================================================================= */

/* -- 公司簡介／營運目標（column-wrapper 系列，僅 .column-content 的 float 方向不同） -- */
/* 注意：page-company/page-mission 是加在 column-wrapper 同一個 <div> 上（見
   content/company.html、content/mission.html），所以這條要用複合選擇器
   （中間不能有空格），下面其餘規則才是真正的子層級，用空格的後代選擇器 */
.page-company.column-wrapper,
.page-mission.column-wrapper {
	max-width: 800px;
	font-family: 'Roboto', 'Noto Sans TC', 'Noto Sans SC', sans-serif;
	font-size: 16px;
}

.page-company .column-title,
.page-mission .column-title {
	font-weight: bold;
	color: white;
	padding: 5px 20px;
	background: linear-gradient(to bottom, #7093BA 0%, #6382A5 100%);
	border-bottom: 2px solid #6382A5;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.page-company .column-content-logo,
.page-mission .column-content-logo {
	float: right;
	padding: 20px 30px 0 0;
	width: 100px;
}

.page-company .column-content-logo img,
.page-mission .column-content-logo img {
	border: 0;
}

.page-company .column-content,
.page-mission .column-content {
	max-width: calc(100% - 170px);
	font-weight: 300;
	line-height: 2;
	color: #666666;
	padding: 20px 20px 0;
}

/* 唯一的差異：公司簡介靠右、營運目標靠左 */
.page-company .column-content {
	float: right;
}

.page-mission .column-content {
	float: left;
}

.page-company .column-content-image,
.page-mission .column-content-image {
	clear: both;
}

.page-company .column-content-image span,
.page-mission .column-content-image span {
	padding: 0 25px;
}

.page-company .column-content-image span img,
.page-mission .column-content-image span img {
	border: 0;
}

@media screen and (max-width: 500px) {

	.page-company .column-content,
	.page-mission .column-content {
		max-width: 100%;
	}

	.page-company .column-content-logo,
	.page-mission .column-content-logo {
		float: left;
		padding: 10px 30px 0px;
	}

	.page-company .column-content-image span,
	.page-mission .column-content-image span {
		float: none;
	}

	.page-company .column-content-image span img,
	.page-mission .column-content-image span img {
		display: block;
		margin: 0 auto;
		max-width: 180px;
	}
}

/* -- 發展沿革（column-title/column-content 重複用名但意義完全不同，獨立一組） -- */
.page-history .column-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 16px;
	font-weight: bold;
	background: linear-gradient(to bottom, #7093BA 0%, #6382A5 100%);
	border-bottom: 2px solid #6382A5;
	padding: 5px 0;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.page-history .column-title-year {
	display: inline;
	font-weight: bold;
	color: white;
	padding: 0 30px;
}

.page-history .column-title-description {
	display: inline;
	padding-left: 25px;
	font-weight: bold;
	color: white;
}

.page-history .column-content {
	border-bottom: 1px solid #e1e1e1;
	overflow: auto;
	clear: both;
}

.page-history .column-content:nth-child(even) {
	background: #f3f3f3;
}

.page-history .column-content-year {
	float: left;
	width: 80px;
	padding: 25px 0px 0 20px;
	font-size: 18px;
}

.page-history .column-content-description {
	float: left;
	max-width: 600px;
	color: #666666;
	font-size: 15px;
	padding-top: 12px;
}

.page-history .column-content-description ul li {
	padding: 10px 0;
	list-style-image: url("/images/icon/sq02.gif");
}

.page-history .column-content-description ul li+li {
	border-top: 1px dotted #666666;
}

.page-history .pages {
	text-align: center;
	color: #666666;
}

/* -- AVX／EVERLIGHT／KYOCERA／增值服務（品牌介紹頁共用結構） -- */
.about-title,
.advantage-title {
	font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	padding: 4px 20px;
	background: linear-gradient(to bottom, #7093BA 0%, #6382A5 100%);
	border-bottom: 2px solid #6382A5;
	border-radius: 2px;
}

.contact-image-rwd {
	display: none;
}

.contact-web,
.contact-phone {
	float: left;
	width: 30%;
	padding: 10px;
}

.contact-image {
	float: left;
	padding: 20px 50px 0;
}

.contact-image img,
.contact-image-rwd img {
	border: 0px;
}

.content-title {
	clear: both;
	padding: 10px;
}

.content-title span {
	text-decoration: underline;
}

.content-intro,
.advange-content {
	padding: 10px;
}

/* 預設值取 EVERLIGHT／KYOCERA 兩頁一致的版本，AVX 是唯一的例外，見下方 .page-avx */
.catalog-1,
.catalog-2 {
	float: left;
	width: 30%;
	padding-left: 10px;
}

.catalog-1 ul li,
.catalog-2 ul li {
	list-style-image: url("/images/icon/sq02.gif");
}

.catalog-image {
	float: left;
	padding-left: 70px;
}

.catalog-image img {
	border: 0px;
}

.wrapper-advantage {
	clear: both;
}

/* AVX 的 catalog-1/2、catalog-image 跟 EVERLIGHT/KYOCERA 值不同，原始資料就是如此 */
.page-avx .catalog-1,
.page-avx .catalog-2 {
	padding-left: 0;
}

.page-avx .catalog-image {
	padding: 0px 50px;
}

@media screen and (max-width: 1200px) {

	.contact-image,
	.catalog-image {
		padding: 20px;
	}
}

@media screen and (max-width: 500px) {
	.contact-image-rwd {
		display: block;
		padding: 20px 10px 0;
	}

	.contact-image {
		display: none;
	}

	.contact-web,
	.contact-phone,
	.catalog-1,
	.catalog-2 {
		float: none;
		width: auto;
		padding: 10px 20px;
	}

	.content-title {
		padding: 10px 20px 10px;
	}

	.content-intro,
	.catalog-1,
	.catalog-2 {
		padding: 0 20px;
	}

	.catalog-image {
		padding-left: 50px;
	}

	.advange-content {
		padding: 10px 20px 0;
	}
}

/* -- 各地辦事處（offices.html，僅此頁使用，無跨頁碰撞） -- */
.page-container {
	max-width: 900px;
	margin: 0 auto;
}

.container-worldmap {
	position: relative;
}

.container-worldmap-image {
	text-align: center;
}

.container-worldmap img {
	border: 0px;
	background-image: none;
	margin: 0px;
	padding: 0px;
	max-width: 100%;
}

.container-worldmap-image img {
	border: 0px;
	width: 100%;
	max-width: 750px;
}

#container-worldmap-tw {
	position: absolute;
	top: 39%;
	left: 73.2%;
}

#container-worldmap-sz-hk {
	position: absolute;
	top: 39.1%;
	left: 71.5%;
}

#container-worldmap-su {
	position: absolute;
	top: 34%;
	left: 73.2%;
}

#container-worldmap-wh {
	position: absolute;
	top: 34.1%;
	left: 71.5%;
}

#container-worldmap-hcmc {
	position: absolute;
	top: 46.2%;
	left: 70.2%;
}

#container-worldmap-hanoi {
	position: absolute;
	top: 40.5%;
	left: 69.5%;
}

#container-worldmap-bangalore {
	position: absolute;
	top: 45%;
	left: 63.5%;
}

#container-worldmap-jkt {
	position: absolute;
	top: 59%;
	left: 70.2%;
}

#container-worldmap-ndelhi {
	position: absolute;
	top: 34%;
	left: 63.5%;
}

#container-worldmap-bangkok {
	position: absolute;
	top: 45%;
	left: 68.9%;
}

#container-worldmap-istanbul {
	position: absolute;
	top: 27%;
	left: 52.5%;
}

#container-worldmap-stpetersburg {
	position: absolute;
	top: 16%;
	left: 52.5%;
}

.office {
	display: flex;
	height: 200px;
	padding: 0 20px;
}

.container-area {
	display: flex;
}

.office-left,
.office-right {
	width: 50%;
}

.office-left {
	border-right: #E0E0E0 dotted 1px;
}

.office-image {
	padding: 0 20px;
	text-align: center;
}

.office-image>div>img {
	max-width: initial;
	margin: 0;
}

.office-info div:nth-child(1) {
	color: #006198;
	font-weight: bold;
	padding: 0 0 10px;
}

.container-underline {
	text-align: center;
}

.container-underline img {
	border: 0px;
}

@media screen and (max-width: 979px) {
	#container-worldmap-tw {
		position: absolute;
		top: 39%;
		left: calc(50% + 210px);
	}

	#container-worldmap-sz-hk {
		position: absolute;
		top: 39%;
		left: calc(50% + 194px);
	}

	#container-worldmap-su {
		position: absolute;
		top: 34%;
		left: calc(50% + 210px);
	}

	#container-worldmap-wh {
		position: absolute;
		top: 34%;
		left: calc(50% + 194px);
	}

	#container-worldmap-hcmc {
		position: absolute;
		top: 47%;
		left: calc(50% + 182px);
	}

	#container-worldmap-hanoi {
		position: absolute;
		top: 40.5%;
		left: calc(50% + 178px);
	}

	#container-worldmap-jkt {
		position: absolute;
		top: 59%;
		left: calc(50% + 180px);
	}

	#container-worldmap-ndelhi {
		position: absolute;
		top: 34%;
		left: calc(50% + 122px);
	}

	#container-worldmap-bangalore {
		position: absolute;
		top: 45%;
		left: calc(50% + 122px);
	}

	#container-worldmap-bangkok {
		position: absolute;
		top: 45%;
		left: calc(50% + 170px);
	}

	#container-worldmap-istanbul {
		position: absolute;
		top: 27%;
		left: calc(50% + 22px);
	}

	#container-worldmap-stpetersburg {
		position: absolute;
		top: 16%;
		left: calc(50% + 22px);
	}
}

@media screen and (max-width: 765px) {
	#container-worldmap-tw {
		position: absolute;
		top: 39%;
		left: 78%;
	}

	#container-worldmap-sz-hk {
		position: absolute;
		top: 39%;
		left: 75.8%;
	}

	#container-worldmap-su {
		position: absolute;
		top: 33%;
		left: 78%;
	}

	#container-worldmap-wh {
		position: absolute;
		top: 33%;
		left: 75.8%;
	}

	#container-worldmap-hcmc {
		position: absolute;
		top: 46.5%;
		left: 74%;
	}

	#container-worldmap-hanoi {
		position: absolute;
		top: 40.5%;
		left: 73.5%;
	}

	#container-worldmap-jkt {
		position: absolute;
		top: 58%;
		left: 74%;
	}

	#container-worldmap-ndelhi {
		position: absolute;
		top: 33%;
		left: 66%;
	}

	#container-worldmap-bangkok {
		position: absolute;
		top: 44%;
		left: 72.5%;
	}

	#container-worldmap-istanbul {
		position: absolute;
		top: 26%;
		left: 52.5%;
	}

	#container-worldmap-stpetersburg {
		position: absolute;
		top: 16%;
		left: 52.5%;
	}
}

@media screen and (max-width: 500px) {

	#container-worldmap-tw,
	#container-worldmap-sz-hk,
	#container-worldmap-su,
	#container-worldmap-wh,
	#container-worldmap-hcmc,
	#container-worldmap-hanoi,
	#container-worldmap-jkt,
	#container-worldmap-ndelhi,
	#container-worldmap-bangalore,
	#container-worldmap-bangkok,
	#container-worldmap-istanbul,
	#container-worldmap-stpetersburg {
		display: none;
	}

	.container-area {
		display: block;
	}

	.office-left,
	.office-right {
		width: 100%;
	}

	.office {
		padding: 0;
	}
}

/* -- 代理產品總表（products.html，僅此頁使用，無跨頁碰撞） -- */
.wrapper-title {
	font-family: 'Roboto', 'Noto Sans TC', 'Noto Sans SC', sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	padding: 4px 0 4px 20px;
	background: linear-gradient(to bottom, #7093BA 0%, #6382A5 100%);
	border-bottom: 2px solid #6382A5;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.contain-brand {
	display: flex;
	float: left;
	padding-top: 10px;
}

.brand-image {
	width: 180px;
}

.brand-info {
	width: 220px;
	padding-left: 20px;
}

@media screen and (max-width: 1200px) {
	.brand-image {
		width: 110px;
	}
}

@media screen and (max-width: 500px) {
	.brand-image {
		width: 120px;
	}
}

/* -- 招募菁英（careers.html，.page-wrapper 跟頁尾網站導覽那條逐字相同，
      共用上面已有的規則即可，不重複定義；其餘 class 僅此頁使用） -- */
.page-frame {
	float: left;
	font-size: 13px;
	width: 160px;
	border: 0;
}

.page-type {
	margin-bottom: 16px;
	width: 120px;
	border-bottom: 3px solid #c65752;
	padding: 5px 0;
	font-family: Noto Sans TC;
	font-size: 18px;
}

.page-images {
	max-width: 130px;
	position: center;
	border: 0;
}

.page-images>img {
	width: 400px;
	position: center;
	border: 0;
}

.contact-frame {
	float: left;
	font-size: 13px;
	width: 400px;
}

.contact-type {
	margin-bottom: 12px;
	width: 350px;
	border-bottom: 3px solid #f1025e;
	padding: 5px 0;
	font-family: Noto Sans TC;
	font-size: 18px;
}

.contact-info {
	max-width: 280px;
	position: center;
	border: 0;
	font-size: 14px;
	font-weight: 600;
}

.contact-images {
	width: 400px;
	position: center;
	border: 0;
}

.contact-images>img {
	width: 400px;
	position: center;
	border: 0;
}

.title-frame {
	float: left;
	font-size: 13px;
	width: 800px;
}

.title-info {
	max-width: 800px;
	position: center;
	border: 0;
	font-size: 18px;
	font-weight: 600;
}

.recruit-notice {
	color: red;
	font-weight: bold;
	font-size: 18px;
}

/* -- 首頁（index.njk）：跑馬燈 logo 間距 + 「造訪日電貿集團」區塊 -- */
/* 原本是行內 style="margin-right:150px"，優先權天生最高；改成 class 後若只
   寫 .as-scroller-logo，會被 scroller.styles.css 的 #mod_as_scroller img
   （ID 選擇器）蓋掉變成 0，必須疊加 #mod_as_scroller 前綴拉高優先權 */
#mod_as_scroller .as-scroller-logo {
	margin-right: 150px;
}

.ndb-visit-title {
	text-align: center;
	margin: 0 auto 20px auto;
	width: 140px;
	border-bottom: 3px solid #c65752;
}

.ndb-visit-text {
	padding: 5px 0;
	font-family: Noto Sans TC;
	font-size: 18px;
}

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

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