/* site.css — 前台樣式(對齊 enrichtech.com.tw 原網站視覺)
 *
 * 色系:
 *   --color-primary    #1863AB  品牌深藍
 *   --color-primary-2  #4193E4  亮藍
 *   --color-text       #6e7889  內文灰
 *   --color-heading    #333     標題深灰
 *   --color-link-hover #23527c
 *   --color-accent     #00dbaa  輔助青綠
 *   --color-footer-bg  #0c0c0c
 *
 * 字型:Microsoft JhengHei(中)+ Roboto(英)
 * 內文:16px / 1.75
 *
 * 對齊原網站 layout:
 *   - header: 白底 sticky
 *   - banner: 大圖 background + 白字 + 2 CTA
 *   - 工程實績: 3 col grid + hover-zoom
 *   - 專業技術: 4 col + 圖示
 *   - 最新消息: list
 *   - footer: 3-4 widget grid 黑底白字
 *   - copyright: 黑底白字
 */

:root {
	--color-primary:    #1863AB;
	--color-primary-2:  #4193E4;
	--color-text:       #6e7889;
	--color-heading:    #333;
	--color-link:       #1e7dd8;
	--color-link-hover: #23527c;
	/* --color-accent / --color-border / --color-bg-light 砍掉 — 自加且 0 用 / 用過的地方已清理 */
	--color-footer-bg:  #0c0c0c;
	--container-max:    1140px;  /* port from bootstrap.min.css @media (min-width:1200px) .container { max-width: 1140px }(雖 plugin/bootstrap 3 設 width: 1170,但 max-width: 1140 會 clamp 下來。Home gallery 顯示 1170 是 .row 的 -15 margin 拉開後的視覺寬度,不是 container 本身) */
	--header-h:         80px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: "Microsoft JhengHei";  /* port from style.css L40 — 跟原站一致,不加 fallback chain */
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.75;
	font-weight: 400;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus { color: var(--color-link-hover); text-decoration: none; }

/* img base — port from style.css L120(略去 border-radius 全域 6px,避免 logo/banner 受影響) */
img { max-width: 100%; height: auto; vertical-align: top; outline: 0; border: 0; }

/* 標題 — port from style.css L49-75
 *   h1,h2,...h6 line-height 1.25 / weight 600 / family JhengHei
 *   h1 = 2.25em (36px) / color #1863AB
 *   h2 = 1.875em (30px) / color #1863AB
 *   h3,h4 = 1.45em (23.2px) / weight 600 / color #353a42
 *   h4 = 1.25em (20px) / color #353a42
 *   h5 = 1.125em (18px) / weight 700 / color #353a42
 *   h6 = 0.875em (14px) / color #353a42 / weight 700
 *   margin: 0 0 18px(統一)— last-child 為 0
 */
h1, h2, h3, h4, h5, h6 {
	font-family: "Microsoft JhengHei";   /* port from style.css L50 — 不加 fallback */
	line-height: 1.25;
	font-weight: 600;
	margin: 0 0 18px;
}
h1 { font-size: 2.25em;  color: #1863AB; }
h2 { font-size: 1.875em; color: #1863AB; }
h3 { font-size: 1.45em;  color: #353a42; font-weight: 600; }
h4 { font-size: 1.25em;  color: #353a42; }
h5 { font-size: 1.125em; color: #353a42; font-weight: 700; }
h6 { font-size: .875em;  color: #353a42; font-weight: 700; }
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child,
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

p { margin: 0 0 18px; }

/* ul/ol reset — port from vendor.bundle.css(bootstrap 3:margin-top: 0; margin-bottom: 10px) */
ul, ol { margin-top: 0; margin-bottom: 10px; }

.ucap { text-transform: uppercase; letter-spacing: 1px; }

/* 容器 — .container-wide port from style.css L2546-2549(後面 .header .container-wide 有更高優先級規則) */
.container        { max-width: var(--container-max); margin: 0 auto; padding: 0 15px; }

/* >=1200vw 砍 container padding — port from responsive.css L1-7 */
@media only screen and (min-width: 1200px) {
	.container        { padding: 0; }
	.container-fluid  { padding: 0; }
}

/* .section-pad-lg / .section-title / .section-more 都是我自寫 + 0 個 view 用 → 砍
 * .bg-light ref L474 = #f8f8f8(我之前 --color-bg-light: #f8f9fa 數值錯) */
.bg-light { background: #f8f8f8; }

/* ============================================================
 * Buttons
 * ============================================================ */
/* .btn — port from style.css L290-310 */
.btn {
	display: inline-block;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	padding: 12px 24px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	border: 2px solid #1863AB;
	background-color: #1863AB;
	box-sizing: border-box;
	transition: all .4s;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
}
.btn:hover,
.btn:focus {
	background-color: #2196f3;
	border-color: #2196f3;
	color: #fff;
	text-decoration: none;
}
.btn-light {
	background: #ffffff;
	color: var(--color-primary);
}
.btn-light:hover { background: var(--color-primary); color: #ffffff; }
.btn-outline {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}
.btn-outline:hover { background: #ffffff; color: var(--color-primary); border-color: #ffffff; }

/* ============================================================
 * Header
 * ============================================================ */
/* Header — port from enrichtech.com.tw/assets/css/style.css L2546-2689 */
.container-wide { margin: 0 auto; max-width: 90%; }

.header {
	z-index: 10001;
	position: sticky;
	top: 0;
	background-color: #fff;
	border-bottom: 1px solid #f3f3f3;
}
.header .container-wide {
	position: relative;
	z-index: 9999;
	background-color: #fff;
}

.site-nav { display: flex; align-items: center; }
.site-nav li { list-style: none; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 32px; width: auto; display: block; }

.site-menu {
	position: relative;
	display: flex;
	padding-left: 0;
	margin-left: auto;
	margin-bottom: 0;
}
.header-col a {
	position: relative;
	color: #333;
	font-family: 'Roboto', 'Microsoft JhengHei', sans-serif;
	text-decoration: none;
}
.header-col .item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	padding-left: 15px;
	padding-right: 15px;
}
.header-col .item > a:hover { color: #4193E4; text-decoration: none; }

.dropdown__item { position: relative; }
.site-menu__submenu {
	display: none;
	position: absolute;
	left: 0; top: 100%;
	padding-left: 0;
	margin: 0;
	list-style: none;
	min-width: 240px;
	z-index: 200;
}
.dropdown__item:hover > .site-menu__submenu,
.dropdown__item:focus-within > .site-menu__submenu,
.dropdown__item.is-open > .site-menu__submenu {
	display: flex; flex-direction: column;
}
.site-menu__submenu a {
	display: block;
	color: #fff;
	background-color: #1863AB;
	padding: 7px 15px;
	width: 240px;
}
.site-menu__submenu a:hover { background-color: #064E94; color: #fff; }

.nav-btns {
	display: flex;
	align-items: center;
	padding-left: 15px;
	margin-bottom: 0;
}
.nav-btns .item-member { flex-shrink: 0; }
.nav-btns .item-member a {
	color: #fff;
	background-color: #a1a1a1;
	padding: 2px 10px;
	border-radius: 5px;
	letter-spacing: 0;
	font-size: 15px;
	height: 23px;
	display: inline-flex; align-items: center;
}
.nav-btns .item-member a:hover { color: #fff; background-color: #337ab7; }
/* .nav-btns .item-lang a.dropdown__button 不另外寫 — 吃 base `.header-col .item > a`
 * (height 80 / padding 0 15 / display flex)+ `.header-col a` color #333 + hover #4193E4
 * 我之前自加 padding: 0 12 比 base 窄 3px 兩側,讓 nav-btns 整體窄 6px,site-menu margin-left:auto 多吃了 6px */
.nav-btns .item-lang .site-menu__submenu { left: unset; right: 0; }
.nav-btns .item-lang .site-menu__submenu a { width: 150px; }
.nav-btns .item-lang .site-menu__submenu a.is-active { background-color: #064E94; }

/* ============================================================
 * Banner / Hero — port from style.css L827-865 + L509-516
 * ============================================================ */
.banner-slider {
	height: 850px;
	overflow: hidden;
	position: relative;
}
.banner-slider .carousel-inner {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
}
.banner-slider .carousel-inner .item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
	z-index: 1;
}
.banner-slider .carousel-inner .item.active {
	opacity: 1;
	z-index: 2;
}
.banner-slider .fill {
	width: 100%; height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.banner-slider .banner-content {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
.banner-slider .banner-text {
	width: 100%;
	max-width: 600px;
	position: relative;
	font-size: 18px;
	padding: 0;
}

/* banner-text 共用(port L827-849) */
.banner-text { color: #6e7889; }
.banner-text.al-left { text-align: left; }
.banner-text.pos-left { float: left; }

/* bootstrap-3 .row clearfix port — 沒這個 float child 會把 .row 高度塌掉 */
.banner-slider .row { margin-left: -15px; margin-right: -15px; }
.banner-slider .row::before,
.banner-slider .row::after { content: " "; display: table; }
.banner-slider .row::after { clear: both; }
.banner-text.light {
	color: #fff;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.banner-text h1,
.banner-text h2 {
	color: inherit;
	font-size: 2.25em;   /* base 18px × 2.25 = 40.5px */
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 18px;
}
/* .banner-text p 無 ref override → 吃 body { line-height: 1.75 } + base p { margin: 0 0 18px } */
/* banner-cta 排版 port L843-845:第一個 btn 之外靠 margin-left:15px 拉開 */
.banner-cta { display: block; }
.banner-text .banner-cta:not(:first-child) { margin-top: 25px; }
.banner-text .btn { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: inline-block; }
.banner-text .btn + .btn { margin-left: 15px; }
@media (max-width: 480px) {
	.banner-text .btn + .btn { margin-left: 0; margin-top: 10px; display: block; }
}

/* btn variants port from style.css L325-329 */
.btn.btn-light:not(.btn-outline) { color: #1863AB; border-color: #fff; background-color: #fff; }
.btn.btn-light:not(.btn-outline):hover,
.btn.btn-light:not(.btn-outline):focus { color: #fff; background: #1863AB; border-color: #1863AB; }
.btn.btn-outline { color: #1863AB; background-color: transparent; border: 2px solid #1863AB; }
.btn.btn-outline.btn-light { color: #fff; border-color: #fff; background-color: transparent; }
.btn.btn-outline.btn-light:hover,
.btn.btn-outline.btn-light:focus { background: #1863AB; border-color: #1863AB; color: #fff; }

/* Carousel control(arrow) — port style.css L509-516 */
.carousel-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1s ease-out;
	z-index: 10;
	color: #fff;
	text-decoration: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.carousel-control.left  { left: 10%; }
.carousel-control.right { right: 10%; }
.banner-slider:hover > .carousel-control { opacity: 1; visibility: visible; }
.carousel-control:hover { color: #fff; text-decoration: none; }
/* Carousel chevron — port from style.css L509-516(已載入 FontAwesome 4.7) */
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
	width: 60px; height: 60px;
	padding-top: 10px;
	border-radius: 50px;
	font-family: 'FontAwesome';
	text-shadow: none;
	font-size: 48px;
	line-height: 1;
}
.carousel-control .glyphicon-chevron-left::before  { content: '\f104'; }
.carousel-control .glyphicon-chevron-right::before { content: '\f105'; }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1280px) {
	.banner-slider { height: 70vh; min-height: 540px; max-height: 850px; }
}
@media (max-width: 768px) {
	.banner-slider { height: 520px; min-height: 0; }
	.banner-slider .banner-text { font-size: 15px; }
	.carousel-control { width: 40px; height: 40px; }
	.carousel-control.left  { left: 2%; }
	.carousel-control.right { right: 2%; }
}

/* ============================================================
 * Project gallery(直接 port 原網站 .gallery / .photo / .photo-item-caption)
 * src: enrichtech.com.tw/assets/css/style.css L1428-1513 + L2160 + L187
 * ============================================================ */
.section-pad { padding-top: 50px; padding-bottom: 50px; }
.section-products { background: #ffffff; }
/* .section-products .container 不再 override — 吃 base .container + responsive.css @>=1200 padding: 0 */
.content.row { display: block; }
.content.row::before, .content.row::after { content: ""; display: table; clear: both; }
.clear { clear: both; height: 0; }
.text-center { text-align: center; }

/* alignment utilities — port from style.css L138-147 */
.al-center, .center { text-align: center; font-family: "Microsoft JhengHei"; }
.al-right  { text-align: right; }
.al-left   { text-align: left; }
.wide-sm { max-width: 770px; margin: 0 auto; }
.content-box { margin-bottom: 30px; }
/* .content-box h1 / .rich-text 都吃 base 規則,無 ref override */

.gallery { display: block; margin-bottom: 40px; }
.gallery::before, .gallery::after { content: ""; display: table; clear: both; }
.gallery.gallery-folio:not(.mgfix) { margin-top: -30px; }
.gallery.gallery-folio .photos-list li { padding-top: 30px; }
.gallery .photos-list { list-style: none; margin: 0 -15px; padding: 0; }
.gallery .photos-list li { padding: 30px 15px 0; position: relative; }
.gallery .photos-list.col-x3 li { float: left; width: 33.333333%; }

.gallery .photo {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	display: block;
	background: #e9ecef;
	color: inherit;        /* photo 是 <a>,壓掉預設藍字 */
	text-decoration: none;
	cursor: pointer;
}
.gallery .photo img {
	width: 100%; height: auto; display: block;
	transition: transform 1s;
	border-radius: inherit;
}
.gallery .photo::after {
	content: "";
	position: absolute; inset: 0;
	background: #000; opacity: 0;
	z-index: 0; border-radius: inherit;
	transition: opacity .5s;
}
.gallery .photo:hover .photo-item-link { opacity: 1; }
.gallery.hover-zoom .photo:hover img { transform: scale(1.15); }
.gallery.hover-zoom .photo:hover .photo-item-caption { opacity: 0; }

/* hover 黑覆蓋 + 「查看更多」按鈕 */
.photo-item-link {
	opacity: 0;
	transition: .4s;
	position: absolute; inset: 0;
	z-index: 1;
}
.photo-item-link::after {
	content: "";
	position: absolute; inset: 0;
	background: #000; opacity: .7;
	z-index: 1; border-radius: inherit;
	transition: all .3s;
}
.photo-item-link .photo-link {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	z-index: 3;
}
.photo-item-link .photo-link .links { text-align: center; }
/* hover btn — base size 取原站 .gallery .photo-link a.btn (style.css L1454) 18px
 * 為何不用 L1510 的 11px:user 反應 11px 太小不易看 */
.photo-item-link .btn {
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 6px;
	margin: 0;
	letter-spacing: 1px;
}
/* hover 反藍 — port from style.css L1468 + L1511 */
.gallery .photo:hover .photo-item-link .btn,
.photo-item-link .btn:hover {
	border-color: #1863AB;
	background: #1863AB;
	color: #fff;
}

/* caption(左上 tag + 左下 title)*/
.photo-item-caption {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	color: #fff;
	padding: 20px;
	transition: opacity .3s;
	border-radius: inherit;
	z-index: 2;
}
.photo-item-caption::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 80px;
	z-index: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
	border-radius: inherit;
}
.photo-item-caption .item-cat,
.photo-item-caption .item-title {
	position: absolute;
	left: 20px;
	z-index: 3;
	margin: 0;
	color: inherit;
	font-weight: 400;
}
.photo-item-caption .item-cat {
	top: 20px;
	font-size: 11px;
	letter-spacing: .04em;
	background: rgba(0,0,0,.3);
	padding: 3px 7px;
	opacity: .9;
}
.photo-item-caption .item-title {
	bottom: 20px;
	font-size: 17px;
}

@media (max-width: 991px) {
	.gallery .photos-list.col-x3 li { width: 50%; }
}
@media (max-width: 576px) {
	.gallery .photos-list.col-x3 li { width: 100%; float: none; }
}

/* ============================================================
 * Techniques(專業技術 4 卡)— port from enrichtech.com.tw style.css L220 / L357-365 / L474 / L476 / L497 / L2158
 * ============================================================ */
section.techniques { display: block; }
.bg-light { background: #f8f8f8; }
.bg-white { background: #fff; }
.bdr-top { border-top: 1px solid rgba(0,0,0,.04); }
/* .section-logos .container 同上 — 不 override,讓 base + responsive 0 padding 生效 */

.round { border-radius: 6px; }

.gaps { clear: both; height: 20px; display: block; margin: 0; }
.gaps.size-2x { height: 40px; }

/* Tech section — strict port:
 *   .item.bg-white .round  → 只有 background:#fff + border-radius:6px(L474+L220)
 *   .skill-1               → 只有 padding-bottom: 20px (L2158)
 *   img(base 全站)        → max-width:100%; height:auto; vertical-align:top; border-radius:6px (L120)
 *   h5                     → 1.125em=18px / weight 700 / color #353a42 (L67) + margin:0 0 18px (L74)
 *   .center                → text-align:center (L138)
 * 不加任何原站沒有的 padding / min-height / box-shadow。
 */
.techniques .content.row { display: block; }
.techniques .content.row > .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.techniques .col-md-3 { width: 25%; padding: 0 15px; box-sizing: border-box; }
/* .techniques .center 不再寫 — 吃 global .center 即可 */
.techniques .skill-1 { padding-bottom: 20px; }

/* .techniques h1 已吃 base h1 規則,只需 text-align center(.wide-sm.text-center 提供) */

@media (max-width: 991px) {
	.techniques .col-md-3 { width: 50%; }
	.res-s-bttm { margin-bottom: 30px; }
}
@media (max-width: 576px) {
	.techniques .col-md-3 { width: 100%; }
}

/* (砍掉自寫的 .home-news-list / .home-section.home-news / .news-kind / .news-title 整段
 * 沒任何 view 在用,是早期未實作 news 區塊留下的死碼) */

/* ============================================================
 * Footer — port from enrichtech.com.tw/assets/css/style.css L1189-1212
 * ============================================================ */
/* port from style.css L2866-2875 — 只 padding-left 120px,padding-right 維持 15px */
.footer { padding-left: 15px; padding-right: 15px; }
@media (min-width: 992px) { .footer { padding-left: 120px; } }

.footer-widget {
	background: #232323;
	color: #fff;
	font-size: 14px;
	line-height: 1.75;
}
.footer-widget a { color: inherit; text-decoration: none; }
.footer-widget a:hover, .footer-widget a:focus { color: #1e7dd8; }
.footer-widget .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.footer-widget .widget-row { width: 100%; }
.footer-widget .footer-col { padding: 0 15px; box-sizing: border-box; }
.footer-widget .wgs-footer { margin-bottom: 40px; }
.footer-widget .wgs-footer:last-child { margin-bottom: 0; }
.footer-widget .wgs-title {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: #1e7dd8;
}
.footer-widget .wgs-title.message1 { padding-top: 30px; }
.footer-widget .wgs-content ul { list-style: none; margin: 0; padding-left: 0; }
.footer-widget .wgs-content ul li { padding-bottom: 8px; }
.footer-widget .wgs-content ul li:last-child { padding-bottom: 0; }
.footer-widget .wgs-content p { margin: 0 0 8px; }
/* port from style.css L1203-1205(FA \f105 chevron-right) */
.footer-widget .wgs-menu .menu li { padding-left: 12px; position: relative; }
.footer-widget .wgs-menu .menu li a:before {
	font-family: 'FontAwesome';
	content: "\f105";
	position: absolute;
	left: 0; margin-top: 3px;
	line-height: 16px; font-size: 16px;
	color: #1e7dd8;
	display: inline-block;
	transition: left .3s;
}
.footer-widget .wgs-menu .menu li:hover a:before { left: 3px; }

/* bootstrap-3 like grid for footer-col(原網站直接用 bootstrap) */
.footer-col.col-md-4 { width: 33.333333%; }
.footer-col.col-md-3 { width: 25%; }
.footer-col.col-md-2 { width: 16.666666%; }
@media (max-width: 991px) {
	.footer-col.col-md-4, .footer-col.col-md-3, .footer-col.col-md-2 { width: 50%; margin-bottom: 30px; }
}
@media (max-width: 576px) {
	.footer-col.col-md-4, .footer-col.col-md-3, .footer-col.col-md-2 { width: 100%; }
}

/* port from style.css L1207-1212 */
.copyright { background: #0c0c0c; color: #fff; font-size: 13px; line-height: 1.4; }
.copyright:not([class*="section-pad"]) { padding: 25px 0; }
.copyright a { color: inherit; text-decoration: none; }
.copyright a:hover, .copyright a:focus { color: #1e7dd8; }
.copyright p { margin: 0; }

/* ============================================================
 * Rich text(撈自 D6 page_content CK 內容)
 * ============================================================ */
.rich-text p { margin: 0 0 1em; }
.rich-text img { margin: 1em auto; }
.rich-text h2, .rich-text h3 { margin: 1.4em 0 .6em; }
.rich-text ul, .rich-text ol { padding-left: 24px; margin: 0 0 1em; }
.rich-text a { color: var(--color-primary); text-decoration: underline; }

/* ============================================================
 * Dropdown chevron — port from style.css L2813-2825
 * ============================================================ */
.dropdown__button::after {
	color: currentColor;
	content: "\f107";
	display: inline-block;
	opacity: .5;
	width: 9px;
	text-align: center;
	margin-left: 2px;
	font-size: 12px;
	line-height: .9;
	font-family: "FontAwesome";
	transition: transform .4s;
}
.dropdown__content { display: none; }
.dropdown__item:hover .dropdown__content { display: flex; flex-wrap: wrap; }
/* lang dropdown / item-lang .dropdown__button 不顯示 ::after 尾箭頭(只有 globe icon) */
.nav-btns .item-lang .dropdown__button::after { content: none; }

/* ============================================================
 * item-toggle(mobile hamburger)— port from style.css L2677-2689
 * ============================================================ */
.nav-btns .item-toggle {
	display: none;
	margin-left: 20px;
}
.nav-btns .item-toggle a {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 44px; height: 34px;
	border-radius: 4px;
	background-color: #1863ab;
	padding-left: 12px; padding-right: 12px;
}

/* ============================================================
 * Mobile menu(slide-out)— port from style.css L2691-2726
 * ============================================================ */
.mobile-menu {
	visibility: hidden;
	padding-left: 0;
	margin-bottom: 0;
	background-color: #1863ab;
	position: absolute;
	width: 100%;
	z-index: 999;
	transform: translateY(-308px);
	transition: .3s;
	list-style: none;
}
.mobile-menu ul { padding-left: 0; }
.mobile-menu li { list-style: none; }
.mobile-menu .item a {
	display: flex;
	align-items: center;
	height: 44px;
	color: #fff;
	padding-left: 15px; padding-right: 15px;
	text-decoration: none;
}
.mobile-menu .collapse__item.open { background-color: #064E94; }
.mobile-menu .item a:hover { background: rgba(0,0,0,.05); }

/* ============================================================
 * Collapse(mobile-menu 內折疊)— port from style.css L2839-2864
 * ============================================================ */
.collapse__content { display: none; }
.collapse__button.active ~ .collapse__content,
.collapse__item.open > .collapse__content { display: block; }
.collapse__button::after {
	color: currentColor;
	content: "\f107";
	display: inline-block;
	opacity: .5;
	width: 9px;
	text-align: center;
	margin-left: 10px;
	font-size: 12px;
	line-height: .9;
	font-family: "FontAwesome";
	transition: transform .4s;
	transform: rotate(-90deg);
}
.collapse__item.open > .collapse__button::after,
.collapse__button.active::after { transform: rotate(0); }

/* ============================================================
 * Header RWD — port from style.css L2729-2790
 * ============================================================ */
@media (min-width: 1501px) {
	.nav-btns .item-lang { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1500px) {
	.site-logo img { height: 28px; }
}
@media (max-width: 1280px) {
	.header .container-wide {
		max-width: 100%;
		padding-left: 5%; padding-right: 5%;
		background-color: #fff;
	}
	.site-menu { display: none; }
	.mobile-menu.active { visibility: visible; transform: translateY(0); }
	.nav-btns { margin-left: auto; }
	.nav-btns .item-toggle { display: block; }
}
@media (max-width: 576px) {
	.nav-btns { padding-left: 0; }
	.nav-btns .item-toggle { margin-left: 0; }
	.nav-btns .item-member a { font-size: 12px; }
	.site-logo img { height: 20px; }
	.header-col .item > a { padding-left: 8px; padding-right: 8px; }
}

/* ============================================================
 * animate.css subset — 只 port banner 用的 fadeInRight + 共用 .animated 基底
 * (來源:animate.css 4.x 的 fadeInRight 規則,等同原網站 banner-text .animated 用法)
 * ============================================================ */
.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}
.banner-text .animated {
	animation-delay: 350ms;   /* port from style.css L842 */
}
@keyframes fadeInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInRight { animation-name: fadeInRight; }

/* ============================================================
 * D6 page(intro/* 等靜態頁)用到的 selectors — port from style.css 各行 + responsive.css
 * ============================================================ */
/* L2245-2253 */
.text-indent { text-indent: 33px; }
@media (max-width: 576px) {
	.text-indent { text-indent: 29px; }
}

/* L2241-2243 */
.heading-1 { font-size: 42px; }

/* spacing utilities — port L397-407 + L373-377 */
.mt-x1 { margin-top: 10px; }
.mt-x2 { margin-top: 20px; }
.mt-x3 { margin-top: 30px; }
.mt-x4 { margin-top: 40px; }
.mt-x5 { margin-top: 50px; }
.mb-x1 { margin-bottom: 10px; }
.mb-x2 { margin-bottom: 20px; }
.mb-x3 { margin-bottom: 30px; }
.mb-x4 { margin-bottom: 40px; }
.mb-x5 { margin-bottom: 50px; }
.pd-x1 { padding: 10px; }
.pd-x2 { padding: 20px; }
.pd-x3 { padding: 30px; }
.pd-x4 { padding: 40px; }
.pd-x5 { padding: 50px; }

/* flex / display / spacing utilities — port L431-459 */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-n15 { margin-left: -15px; margin-right: -15px; }
.h-100 { height: 100%; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }

/* L362 */
.gaps.size-3x { height: 60px; }

/* L2265 — .section base bottom padding(.section-pad 共存時被這條蓋掉成 60) */
.section { padding-bottom: 60px; }

/* L2269-2289 section-heading(左豎條 + 32px / 576 縮 24) */
.section-heading {
	position: relative;
	padding-left: 15px;
	font-size: 32px;
}
.section-heading::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 0;
	width: 7px;
	height: 90%;
	background-color: #707070;
}
@media (max-width: 576px) {
	.section-heading { font-size: 24px; }
}

/* L2292-2326 各頁限定圖片寬 */
.intro-philosophy-img    { width: 800px; margin-top: 60px; margin-bottom: 60px; }
.talent-cultivation-img  { width: 900px; }
.services-img            { width: 800px; }
.quality-and-reliability-img { width: 1200px; }

/* L2467-2510 + 2512+ RWD c-table(專業團隊頁的人員資料表) */
.c-table-tr { display: flex; border-bottom: 2px solid #1863ab; }
.c-table-tr.highlight { background-color: #cbe2eb; border-bottom: none; }
.c-table-th { background-color: #1863ab; border-bottom: none; }
.c-table-th .c-table-td {
	color: #fff;
	border-right: 2px solid #fff;
	font-size: 24px;
	text-align: center;
	padding: 10px 30px;
}
.c-table-td { padding: 20px 15px; color: #1863ab; font-size: 20px; font-weight: 700; }
.c-table-name  { width: 15%; text-align: center; }
.c-table-title { width: 20%; text-align: center; }
.c-table-desc  { width: 65%; }
@media (max-width: 991px) {
	.c-table-tr { border-bottom: 1px solid #1863ab; }
	.c-table-td { padding: 10px; font-size: 18px; font-weight: 400; }
}

/* responsive.css L434-439 — about-company-area(專業團隊 / 人才培育 頁外層)*/
.about-company-area .text-holder { margin-top: 25px; }
.about-company-area .bottom .single-item { margin-bottom: 25px; }

/* bootstrap-3 col-lg-* / col-lg-offset-* — port for talent-cultivation / EHS 用到 */
.col-lg-6, .col-lg-10, .col-lg-offset-1 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
@media (min-width: 1200px) {
	.col-lg-6         { float: left; width: 50%; }
	.col-lg-10        { float: left; width: 83.333333%; }
	.col-lg-offset-1  { margin-left: 8.333333%; }
}

/* icon-card-wrapper(EHS / 環安政策頁)— port from style.css L2373-2401 */
.icon-card-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.icon-card-wrapper .icon-card { display: flex; }
.icon-card-title {
	font-size: 28px;
	color: #1863AB;
	margin-bottom: 5px;
}
.icon-card-wrapper img {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	margin-right: 20px;
}
@media (min-width: 769px) {
	.icon-card-wrapper.col-half .icon-card {
		width: 50%;
		padding-right: 40px;
	}
}

/* staff benefit / job openings 用到的規則 — port from style.css L2405-2462 + L620-623 */
.box-title { font-size: 24px; color: #267ed8; }
.col-md-quarter { width: 100%; }
@media (min-width: 769px) {
	.col-md-quarter { flex: 0 0 25%; width: 25%; padding-right: 15px; padding-left: 15px; }
}
.careers-intro { font-size: 18px; }
.careers-intro a {
	display: inline-block;
	text-align: center;
	margin-bottom: 20px;
}
.career-banner { position: relative; }
.career-banner .btn {
	position: absolute;
	bottom: -8%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}
.career-banner img { width: 100%; }
@media (min-width: 576px) {
	.careers-intro { font-size: 28px; text-align: center; }
	.career-banner .btn { bottom: 6%; font-size: 24px; }
}

/* icon-box base + size-md — port L620-623 */
.icon-box {
	width: 48px; height: 48px;
	display: inline-block;
	vertical-align: middle;
	color: #1863AB;
	transition: all .4s;
	text-align: center;
	font-size: 1.25em;
	line-height: 46px;
	margin: 2px 0;
	border: 1px solid transparent;
	position: relative;
}
.icon-box.size-md { width: 80px; height: 80px; font-size: 1.75em; line-height: 58px; }
/* icon-box 後接標題的間距 — port L639 + L2088-2091 + L1891 RWD */
.icon-box + h3, .icon-box + h4, .icon-box + h5 {
	margin-top: 20px;
	font-family: "Microsoft JhengHei";
}
@media (max-width: 767px) {
	.icon-box + h3, .icon-box + h4, .icon-box + h5 { margin-top: 15px; }
}

/* img-fluid — port from bootstrap.min.css */
.img-fluid { display: block; max-width: 100%; height: auto; }

/* ============================================================
 * Form base — port from ref plugin-bs.css(bs3 .form-control)
 * + ref style.css L346 box-shadow override + L348 .error
 * ============================================================ */
.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
textarea.form-control { height: auto; }
.form-control:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.form-control.error { border-color: #FF4346 !important; }
.form-group { margin-bottom: 15px; }

/* contact form fields — port from css2-style.css L1014-1015
 * ref 該規則寫成 .form-message .form-control 套用;contact 頁實際視覺(user 截圖
 * 「原本長這樣」)沿用同一風格(h:50 / radius:6 / border #e1e1e1 / bg #f8f8f8) */
.contact-form .form-control { height: 50px; border-radius: 6px; border: 1px solid #e1e1e1; background-color: #f8f8f8; }
.contact-form .form-control.txtarea,
.contact-form textarea.form-control { height: 150px; }

/* form-m-bttm responsive bottom margin */
@media (max-width: 991px) {
	.form-m-bttm { margin-bottom: 15px; }
}

/* alert — port from vendor.bundle.css(bootstrap 3) */
.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-danger  { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.mt-lg { margin-top: 30px; }
.mt-sm { margin-top: 10px; }
.font-size-xs { font-size: 12px; }
.display-block { display: block; }

/* contact 頁 layout 簡單分欄 — col-md-6 / col-md-7 / col-md-5 + .pl-lg-5
 * port from ref plugin-bs.css bs3 grid */
.col-md-5, .col-md-6, .col-md-7 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
@media (min-width: 992px) {
	.col-md-5 { float: left; width: 41.666667%; }
	.col-md-6 { float: left; width: 50%; }
	.col-md-7 { float: left; width: 58.333333%; }
	.pl-lg-5  { padding-left: 50px; }
}
@media (max-width: 991px) {
	.res-m-bttm { margin-bottom: 30px; }
}

/* affiliated-enterprises 頁用到 — port from style.css L151 + L499 + L613-618 + L2041 + L2261-2263 + L2330-2368 */
.list-style-none { list-style: none; }                           /* L151 */
.bdr-none { border-color: transparent; }                          /* L499 */
.no-pd, .pd-no { padding: 0 !important; }                         /* L2041 */
.card-body { padding: 50px 60px; }                                /* L2261-2263 */

/* .contact-list 基底 — L613-618 */
.contact-list { margin-top: 30px; }
.contact-list:first-child { margin-top: 0; }
.contact-list li { margin-bottom: 20px; padding-bottom: 0; }
.contact-list li:last-child { margin-bottom: 0; }
.contact-list li .fa { color: #1863AB; font-size: 24px; display: block; width: 30px; float: left; }
.contact-list li span { margin-left: 40px; display: block; line-height: 1.4; }

/* company-card — L2330-2368 + 內 .contact-list override */
.company-card .company-title { font-size: 28px; font-weight: 400; color: #1863ab; }
.company-card .contact-list { margin-top: 10px; }
.company-card .contact-list li { display: flex; align-items: center; margin-bottom: 5px; }
.company-card .contact-list .item a { color: #6e7889; }
.company-card .contact-list .item a:hover { color: #337ab7; }
.company-card .company-address a { color: #6e7889; }
.company-card .contact-list i {
	font-size: 18px;
	width: 20px;
	text-align: center;
	margin-right: 10px;
}

/* ============================================================
 * Project detail — port from style.css 各 selector(L2188-2229 / L2794-2805 / L407 / L369-371)
 *                   + bootstrap-3 col helper(只 port 本頁用到的)
 * ============================================================ */
/* page-banner — L2794-2805 */
.banner.page-banner {
	width: 100%;
	height: 320px;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (max-width: 576px) {
	.banner.page-banner { height: 180px; }
}

/* image-box (aspect ratio 容器)— L2188-2229 */
.image-box { position: relative; display: flex !important; }
.image-box-outer {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
	margin: 0;
	line-height: 0;
}
.image-box-outer.vertical    { padding-bottom: 120%; }
.image-box-outer.ratio-3-2   { padding-bottom: 66.66%; }
.image-box-outer.ratio-16-9  { padding-bottom: 56.25%; }
.image-box-inner {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: #f1f1f1;
}
.image-box-inner img {
	width: 100%;
	height: 100% !important;
	object-position: 50% 50%;
	object-fit: cover;
	border-radius: 0;
}
/* L2165-2168 slick slide cursor(ref 只此一條,不另加 opacity / padding 等自寫) */
.p-slider-for .slick-slide,
.p-slider-nav .slick-slide { cursor: pointer; }

/* ref 雖然 markup 有 class="object-fit-contain" 但 CSS 全 grep 0 match — 不該加自製規則,
 * 讓 img 吃 base .image-box-inner img { object-fit: cover } 跟原站一致(grey bg 完全被圖蓋住) */

/* bootstrap-3 cols(只 port project_detail 用到的) */
.row { margin-left: -15px; margin-right: -15px; }
.row::before, .row::after { content: ""; display: table; }
.row::after { clear: both; }
.col-xs-2, .col-xs-10, .col-md-2, .col-md-10, .col-md-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
.col-xs-10 { float: left; width: 83.333333%; }
.col-xs-2  { float: left; width: 16.666667%; }
@media (min-width: 992px) {
	.col-md-2  { float: left; width: 16.666667%; }
	.col-md-10 { float: left; width: 83.333333%; }
	.col-md-12 { float: left; width: 100%; }
}

/* utility port — L407 / L369-371(必須放 col 規則「後」否則 .pl-0 被 .col-xs-2 蓋過去) */
.mb-x5 { margin-bottom: 50px; }
.mb-2  { margin-bottom: .5rem; }
.pl-0  { padding-left: 0; }

/* col-sm-6(news list 用)— port from bootstrap 3 慣例 */
.col-sm-6 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.col-sm-6 { float: left; width: 50%; }
}

/* ============================================================
 * News list (.blog-posts) — port from style.css L1215-1248
 * ============================================================ */
.blog-posts { list-style: none; padding: 0; margin: 0; }  /* L1240 */
.post-col2 .post-loop:nth-child(2n+1) { clear: left; }   /* L1238 */

.post .post-meta { width: 100%; }                                                                /* L1215 */
.post .post-meta .pub-date { color: #999; font-size: 12px; text-transform: uppercase; }          /* L1216 */
.post .post-meta:not(:first-child) { margin-bottom: 15px; }                                      /* L1217 */
.post .post-meta li .fa { color: #1863AB; margin-right: 10px; font-size: 16px; }                 /* L1222 */

.post .post-thumbs { position: relative; margin-bottom: 15px; }                                  /* L1224 */
.post .post-thumbs:last-child { margin-bottom: 0; }                                              /* L1225 */
.post .post-thumbs img { border-radius: 6px; opacity: 1; transition: opacity .4s; }              /* L1226 */
.post .post-thumbs a { display: block; }                                                         /* L1227 */
.post .post-thumbs a:hover img { opacity: 0.7; }                                                 /* L1228 */

.post .post-entry h2,
.post .post-entry h1 { font-size: 1.125em; line-height: 24px; }                                  /* L1230 */
.post .post-entry h2 a,
.post .post-entry h1 a { color: #1863AB; }                                                       /* L1231 */
.post .post-entry h2 a:hover,
.post .post-entry h1 a:hover { color: #fabc06; }                                                 /* L1232 */
.post .post-entry a.btn {                                                                        /* L1233 */
	color: #fac51c;
	background: none;
	border: 0 none;
	padding: 0;
	margin-top: -20px;
	text-transform: inherit;
	letter-spacing: inherit;
	font-size: .875em;
}
.post .post-entry a.btn:hover { color: #1863AB; }                                                /* L1234 */
.post.post-loop { margin-top: 60px; }                                                            /* L1235 */
.post.post-single .post-entry h2,
.post.post-single .post-entry h1 { font-size: 1.875em; }                                         /* L1236 */

/* RWD — port L1628(<=991 post-loop margin-top 改 30) */
@media (max-width: 991px) {
	.post.post-loop { margin-top: 30px; }
}

/* btn-alt — port L311-316 */
.btn.btn-alt {
	border-color: #FF9933;
	background-color: #FF9933;
	font-family: "Microsoft JhengHei";
}
.btn.btn-alt:hover,
.btn.btn-alt:focus { background: #1863AB; border-color: #1863AB; }

/* ============================================================
 * Pagination — port from vendor.bundle.css(bootstrap 3 base)+ style.css L1250-1255
 * ============================================================ */
/* bootstrap base */
.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}
.pagination > li { display: inline; }
.pagination > li > a,
.pagination > li > span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #337ab7;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > a:focus { z-index: 2; background-color: #eee; border-color: #ddd; }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus { z-index: 3; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; }
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; pointer-events: none; }

/* ref override — port style.css L1250-1255 */
.pagination { margin: 30px 0 30px 30px; vertical-align: middle; text-align: center; }  /* L1250 */
.pagination_bottom { text-align: center; padding: 30px; }                              /* L1252 */
.pagination:first-child { margin-top: 0; }                                             /* L1253 */
.pagination li a { color: #888; transition: .4s; border-color: #eee; }                 /* L1254 */
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover,
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus { background-color: #eee; border-color: #eee; color: #1863AB; }  /* L1255 */

/* ============================================================
 * Call-action(CTA bar)— port from style.css L482 + L929-951 + L983-986 + L1597 + L1735 + L1876-1878
 * ============================================================ */
.bg-primary { background: #1863AB; }  /* port L482 */

.call-action {
	color: #fff;
	background-color: #1863AB;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.call-action .cta-block {
	padding: 45px 0;
	width: 100%; height: 100%;
	overflow: hidden;
	display: table;
}
.call-action .cta-block > .cta-sameline { padding: 0; }
.call-action h1, .call-action h2, .call-action h3, .call-action h4 {
	font-weight: 400;
	color: inherit;
	line-height: 1.5;
	margin: 15px 0;
}
.call-action p { margin: 15px 0; }
.call-action h1, .call-action h2 { text-transform: uppercase; }
.call-action a:not(.btn) { color: inherit; text-decoration: underline; }
.call-action a:not(.btn):hover { text-decoration: none; }
.call-action .btn {
	min-width: 160px;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 20px;
}
.call-action .btn:first-child { margin-top: 0; }
.call-action .btn.btn-outline:hover { background-color: #fff; }

/* same-line layout(標題 + 右側按鈕)— port L983-986 */
.call-action .cta-sameline {
	position: relative;
	padding-right: 260px;
}
.call-action .cta-sameline h1,
.call-action .cta-sameline h2,
.call-action .cta-sameline h3,
.call-action .cta-sameline h4,
.call-action .cta-sameline p { margin: 1px 0 3px; }
.call-action .cta-sameline .btn {
	top: 50%; right: 0;
	margin-top: 0;
	position: absolute;
	transform: translate(0, -50%);
}

.call-action.bg-primary { background-color: #1863AB; }  /* port L950 */
/* L951:.call-action.bg-primary .btn:not(.btn-light) 預設黃底 */
.call-action.bg-primary .btn:not(.btn-light) {
	color: #fff;
	background-color: #fabc06;
	border-color: #fabc06;
}
/* L959:.btn.btn-outline 在 bg-primary 內 override 成白邊框透明底白字(source order 比 L951 後贏 — 同 4 class 特異度) */
.call-action.bg-primary .btn.btn-outline {
	border-color: #fff;
	color: #fff;
	background-color: transparent;
}

/* RWD — port L1597 / L1735 / L1876-1878 */
@media (max-width: 1199px) {
	.call-action .cta-sameline h3,
	.call-action .cta-sameline h4 { font-size: 1.25em; }
}
@media (max-width: 991px) {
	.call-action .cta-sameline { padding-right: 180px; }
}
@media (max-width: 767px) {
	.call-action .cta-sameline { padding-right: 0; text-align: center; }
	.call-action .cta-sameline h2:first-child,
	.call-action .cta-sameline h3:first-child { margin-top: -10px; }
	.call-action .cta-sameline .btn {
		transition: none;
		position: static;
		margin-top: 20px;
		transform: translate(0, 0);
	}
}

/* products-details bottom margin + .single-product 額外 padding(讓 detail 跟 list 視覺有差) */
.products-details { margin-bottom: 0; }
.single-product .products-details h1 { margin-bottom: 30px; }