@charset "utf-8";

/* CSS RESET */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

html {
	overflow: auto;
}
/* remove ie7 scrollbar without overflow */
img {
	border: none;
	vertical-align: middle;
}

a:hover {
	color: #636bda;
	text-decoration: underline;
}

div, dl, li, dt, dd, p, span, blockquote, pre, form, fieldset, input, textarea {
	margin: 0;
	padding: 0;
}

ul, ol {
	margin: 0;
	padding-left: 20px;
}

hr {
	margin: 5px 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

/* CLEARFIX */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}


/* Layout
---------------------------------------- */
#wrapper-home {
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#header {
	width: 900px;
	margin: 0px auto;
	padding: 15px 30px 10px 30px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #dddddd;
	border-left-color: #dddddd;
}

	#header #inner {
		width: 510px;
		float: right;
		position: relative;
	}

	#header #addon {
		float: left;
		margin: 8px 0;
	}

	#header #link {
		margin-left: 15px;
	}

		#header #link a {
			font-size: 12px;
			color: #999999;
			text-decoration: none;
		}

			#header #link a:hover {
				color: #2e3289;
				text-decoration: none;
			}

	#header #share {
		position: absolute;
		top: 12px;
		right: 0;
		float: right;
	}


/* memu
---------------------------------------- */
#menu {
	position: relative;
	height: 23px;
	float: right;
	margin-bottom: 0px;
}

	#menu ul {
		margin: 0px;
		padding: 0px;
	}

	#menu li {
		float: left;
		list-style-type: none;
		margin-left: 20px;
	}

		#menu li a {
			height: 23px;
			width: 68px;
			display: block;
			line-height: 9999px;
			overflow: hidden;
		}

		#menu li.link1 a {
			width: 68px;
			background-image: url(../../images/ESG/com-menu-7-off.gif);
		}

			#menu li.link1 a:hover {
				background-image: url(../../images/ESG/com-menu-7-on.gif);
			}

		#menu li.link2 a {
			background-image: url(../../images/ESG/com-menu-2-off.gif);
		}

			#menu li.link2 a:hover {
				background-image: url(../../images/ESG/com-menu-2-on.gif);
			}

		#menu li.link3 a {
			background-image: url(../../images/ESG/com-menu-3-off.gif);
		}

			#menu li.link3 a:hover {
				background-image: url(../../images/ESG/com-menu-3-on.gif);
			}

		#menu li.link4 a {
			background-image: url(../../images/ESG/com-menu-4-off.gif);
		}

			#menu li.link4 a:hover {
				background-image: url(../../images/ESG/com-menu-4-on.gif);
			}

		#menu li.link5 a {
			background-image: url(../../images/ESG/com-menu-5-off.gif);
		}

			#menu li.link5 a:hover {
				background-image: url(../../images/ESG/com-menu-5-on.gif);
			}

		#menu li.link6 a {
			background-image: url(../../images/ESG/com-menu-6-off.gif);
		}

			#menu li.link6 a:hover {
				background-image: url(../../images/ESG/com-menu-6-on.gif);
			}


/* main
---------------------------------------- */
#main-bg {
	width: 100%;
	background-color: #2e3289;
}

#main {
	width: 960px;
	height: 130px;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	background-image: url(../../images/ESG/com-main_1.jpg);
	background-repeat: no-repeat;
}


/* com-content
---------------------------------------- */
#com-content {
	position: relative;
	width: 900px; /*預設900*/
	margin: 0px auto;
	padding: 40px 30px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #dddddd;
	border-left-color: #dddddd;
}

	#com-content #secondary {
		position: relative;
		float: left;
		margin: 0 30px 0 0;
		width: 190px;
	}

#com-content-title {
	float: right;
	width: 680px;
	margin-bottom: 25px;
}

#com-content-title2 {
	float: left;
	width: 680px;
}

#com-content-title .location {
	text-align: right;
	font-size: 12px;
	color: #666666;
}

	#com-content-title .location a,
	#com-content-title .location a:link,
	#com-content-title .location a:visited,
	#com-content-title .location a:active {
		text-decoration: none;
	}

		#com-content-title .location a:hover {
			color: #636bda;
			text-decoration: none;
		}

#com-content #primary {
	position: relative;
	float: right;
	width: 680px;
}

#com-content2 #primary2 {
	position: relative;
	float: left;
	width: 680px;
}




/* ==========================================================
   共用頁面標題 / 麵包屑
   所有 ESG 內頁共用
   ========================================================== */

/* 左側頁面標題自動撐滿剩餘空間 */
#com-content-title .page-title-name {
	width: auto;
}

/* 右側麵包屑只佔實際需要寬度，讓左側藍色底線延伸 */
#com-content-title .page-title-location {
	width: 1%;
	padding-left: 20px;
	white-space: nowrap;
}

/* 麵包屑小房子圖示垂直置中 */
#com-content-title .location-icon {
	vertical-align: middle;
}

/* secondary 
---------------------------------------- */
#secondary {
	width: 100%;
}

	#secondary #smenuUnit {
		margin-bottom: 8px;
	}

	#secondary #smenu {
		position: relative;
		float: left;
		width: 190px;
		margin-bottom: 35px;
	}

		#secondary #smenu ul {
			margin: 0px;
			padding: 0px;
		}

			#secondary #smenu ul li {
				float: left;
				width: 100%;
				list-style-type: none;
				padding: 3px 2px;
				border-bottom: 1px solid #dddddd;
			}

				#secondary #smenu ul li a {
					display: block;
					font-size: 15px;
					line-height: 20px;
					padding: 5px 0px;
					color: #000000;
					background-color: #FFFFFF;
					background-image: url(../../images/ESG/com-smenu-off.gif);
					background-repeat: no-repeat;
					padding-left: 30px;
				}

					#secondary #smenu ul li a:hover {
						color: #FFF;
						font-weight: bold;
						width: 158px;
						padding-left: 30px;
						background-color: #2e3289;
						background-image: url(../../images/ESG/com-smenu-on.gif);
						background-repeat: no-repeat;
						-moz-border-radius: 3px; /* Firefox */
						-webkit-border-radius: 3px; /* Safari, Chrome */
						-khtml-border-radius: 3px; /* Konqueror */
						border-radius: 3px; /* Opera 10.50 and later (CSS3 standard) */
						behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
					}

					#secondary #smenu ul li a:active {
						color: #FFF;
						font-weight: bold;
						width: 158px;
						background-color: #2e3289;
						background-image: url(../../images/ESG/com-smenu-on.gif);
						background-repeat: no-repeat;
						-moz-border-radius: 3px; /* Firefox */
						-webkit-border-radius: 3px; /* Safari, Chrome */
						-khtml-border-radius: 3px; /* Konqueror */
						border-radius: 3px; /* Opera 10.50 and later (CSS3 standard) */
						behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
					}

		#secondary #smenu a.unit-now {
			color: #FFF;
			font-weight: bold;
			width: 158px;
			background-color: #2e3289;
			background-image: url(../../images/ESG/com-smenu-on.gif);
			background-repeat: no-repeat;
			-moz-border-radius: 3px; /* Firefox */
			-webkit-border-radius: 3px; /* Safari, Chrome */
			-khtml-border-radius: 3px; /* Konqueror */
			border-radius: 3px; /* Opera 10.50 and later (CSS3 standard) */
			behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
		}

		#secondary #smenu #smenu-s {
			margin: 5px 0px;
		}

			#secondary #smenu #smenu-s ul {
				margin: 0px;
				padding: 0px;
			}

				#secondary #smenu #smenu-s ul li {
					list-style-type: none;
					margin-top: 5px;
					border-bottom: 0px;
					margin-bottom: 5px;
				}

					#secondary #smenu #smenu-s ul li a {
						font-size: 12px;
						color: #858585;
						text-decoration: none;
						margin: 0px;
						padding: 0px 0px 0px 40px;
						background-image: url(../../images/ESG/menu-icon-1.gif);
						background-repeat: no-repeat;
						background-position: 30px 6px;
						border-style: none;
					}

						#secondary #smenu #smenu-s ul li a:active {
							color: #0099CC;
							background-image: url(../../images/ESG/menu-icon-1-over.gif);
							background-repeat: no-repeat;
							background-color: #fff;
							background-position: 30px 6px;
						}

						#secondary #smenu #smenu-s ul li a:hover {
							color: #0099CC;
							background-image: url(../../images/ESG/menu-icon-1-over.gif);
							background-repeat: no-repeat;
							background-color: #fff;
							background-position: 30px 6px;
						}


/* icon
---------------------------------------- */
.back a {
	display: block;
	width: 54px;
	height: 19px;
	background-image: url(../../images/ESG/com-back-off.gif);
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: -9999px;
	margin: 0px auto;
}

	.back a:hover {
		background-image: url(../../images/ESG/com-back-on.gif);
	}

.dotline-1 {
	border-bottom: 1px solid #2e3289;
}

.dotline-2 {
	border-bottom: 1px solid #dddddd;
}

.dotline-3 {
	background-image: url(../../images/ESG/com-dotline-1.gif);
	background-repeat: repeat-x;
}

.dotline-4 {
	border-bottom: 2px solid #adcfef;
}

.dotline-5 {
	background-image: url(../../images/ESG/com-dotline-1.gif);
	background-repeat: repeat-x;
	background-position: center;
}

.point li {
	background-image: url(../../images/ESG/com-icon-1.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding-left: 10px;
	list-style-type: none;
}

.tab-text {
	margin: 8px 0;
}





/* ==========================================================
   ESG 共用附件檔案區
   News / Download 等含附件頁面共用。
   外層容器請加上 class="esg-attachment"
   ========================================================== */

.esg-attachment {
	width: 100%;
	margin-top: 18px;
}

	.esg-attachment table {
		width: 100% !important;
		max-width: 100% !important;
		border: 1px solid #d7dce6;
		border-collapse: separate !important;
		border-spacing: 0 !important;
		background: #ffffff;
	}

		.esg-attachment table tr:first-child td,
		.esg-attachment table tr:first-child th {
			padding: 8px !important;
			border-right: 1px solid #ffffff;
			border-bottom: 1px solid #c8d6e5;
			background-color: #e9f2f9;
			background-image: linear-gradient(to bottom, #f8fbfd 0%, #edf5fa 45%, #ddeaf4 100%);
			color: #333333 !important;
			font-size: 13px;
			font-weight: bold;
			line-height: 1.5;
			text-align: center !important;
			vertical-align: middle;
		}

			.esg-attachment table tr:first-child td:last-child,
			.esg-attachment table tr:first-child th:last-child {
				border-right: 0;
			}

		.esg-attachment table tr:not(:first-child) td {
			padding: 9px 8px !important;
			border-right: 1px solid #eeeeee;
			border-bottom: 1px solid #eeeeee;
			background: #ffffff;
			color: #555555;
			font-size: 13px;
			line-height: 1.55;
			text-align: center !important;
			vertical-align: middle !important;
		}

			.esg-attachment table tr:not(:first-child) td:last-child {
				border-right: 0;
			}

		.esg-attachment table tr:last-child td {
			border-bottom: 0;
		}

		.esg-attachment table tr:not(:first-child):hover td {
			background-color: #f8fbfe;
		}

		.esg-attachment table td:first-child {
			padding-left: 16px !important;
			text-align: left !important;
		}

			.esg-attachment table td:first-child a,
			.esg-attachment table td:first-child a:link,
			.esg-attachment table td:first-child a:visited {
				color: #2e3289 !important;
				text-decoration: none !important;
			}

				.esg-attachment table td:first-child a:hover,
				.esg-attachment table td:first-child a:focus {
					color: #636bda !important;
					text-decoration: none !important;
				}

		.esg-attachment table td:last-child a {
			display: inline-flex;
			width: 30px;
			height: 30px;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			text-decoration: none !important;
			transition: background-color 0.2s ease, transform 0.2s ease;
		}

			.esg-attachment table td:last-child a:hover,
			.esg-attachment table td:last-child a:focus {
				background-color: #eef1ff;
				transform: translateY(-1px);
				outline: 0;
			}

		.esg-attachment table td:last-child img {
			max-width: 18px !important;
			height: auto !important;
		}

/* footer
---------------------------------------- */
#footer {
	width: 100%;
	margin: 0 auto;
	position: relative;
	background-color: #dddddd;
	clear: both;
}

	#footer a {
		text-decoration: none;
	}

	#footer #footerInner {
		width: 960px;
		margin: 0 auto;
		padding: 20px 0 20px 0;
		position: relative;
	}

		#footer #footerInner #footerA {
			float: left;
			margin-right: 20px;
		}

		#footer #footerInner #footerB {
			float: left;
		}

			#footer #footerInner #footerB .copyright {
				font-size: 12px;
				line-height: 20px;
				color: #888888;
				width: 800px;
			}

		#footer #footerInner #footerC {
			float: right;
			margin-right: 30px;
		}

			#footer #footerInner #footerC .footerTop {
				text-align: right;
			}

/* background color
---------------------------------------- */
.bg-color-Orange {
	background-color: #fde9d9;
}

.table-title-ch0 {
	background-color: #4c94b5;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.table-body-ch0 {
	background-color: #ebf6f5;
}

.table-title-ch2 {
	background-color: #72af43;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.table-body-ch2 {
	background-color: #f2f8e9;
}

.table-title-ch3 {
	background-color: #7f90c8;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.table-body-ch3 {
	background-color: #eef4fb;
}

.bgcolor-ch4-title {
	background-color: #f39800;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.bgcolor-ch5-title {
	background-color: #32b6a0;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.bgcolor-ch5-body {
	background-color: #e0f1f4;
}

.bgcolor-ch6-title {
	background-color: #18943b;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.bgcolor-ch6-body {
	background-color: #e7f3ec;
}

.bgcolor-ch7-title {
	background-color: #90b821;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.bgcolor-ch7-body {
	background-color: #f2f8ed;
}

.bgcolor-ch8-title {
	background-color: #ee8593;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

/* Font
---------------------------------------- */
.font-black-12 {
	font-size: 12px;
	color: #222222;
	line-height: 18px;
}

.font-black-13 {
	font-size: 13px;
	color: #222222;
	line-height: 22px;
}

.font-black-15 {
	font-size: 15px;
	color: #222222;
	line-height: 24px;
}

.font-black-18 {
	font-size: 18px;
	color: #222222;
	line-height: 28px;
	font-weight: bold;
}

.font-lgray-12 {
	font-size: 12px;
	color: #cccccc;
}

.font-gray-12 {
	font-size: 13px;
	color: #666666;
	line-height: 22px;
}

.font-gray-13 {
	font-size: 13px;
	color: #666666;
	line-height: 22px;
}

.font-gray-15 {
	font-size: 15px;
	color: #666666;
	line-height: 24px;
}

.font-bgray-15 {
	font-size: 15px;
	color: #666666;
	line-height: 24px;
	font-weight: bold;
	background-color: yellow;
}

.font-blue-12 {
	font-size: 12px;
	color: #636bda;
}

.font-blue-13 {
	font-size: 13px;
	color: #636bda;
}

.font-blue-15 {
	font-size: 15px;
	color: #636bda;
}

.font-dblue-12 {
	font-size: 12px;
	color: #2e3289;
	line-height: 20px;
}

.font-dblue-13 {
	font-size: 13px;
	line-height: 18px;
	color: #2e3289;
}

.font-dblue-15 {
	font-size: 15px;
	line-height: 24px;
	color: #2e3289;
	font-weight: bold;
}

.font-red-15 {
	font-size: 16px;
	line-height: 24px;
	color: #e63200;
	font-weight: bold;
}

.font-orange-12 {
	font-size: 12px;
	color: #f39800;
}

.font-orange-13 {
	font-size: 13px;
	color: #f39800;
	line-height: 22px;
}

.font-orange-15 {
	font-size: 15px;
	color: #f39800;
}

.font-white-15 {
	font-size: 15px;
	line-height: 20px;
	color: #fff;
}

.font-white-18 {
	font-size: 18px;
	color: #fff;
	line-height: 28px;
	font-weight: bold;
}

.font-blue-18 {
	font-size: 20px;
	font-weight: bold;
	color: #2e3289;
	font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
	line-height: 24px;
}

.font-white-12 {
	font-size: 12px;
	color: #fff;
	line-height: 28px;
	font-weight: bold;
}

.font-ch0-15 {
	font-size: 15px;
	line-height: 20px;
	color: #4c94b5;
}

.font-dch0-15 {
	font-size: 15px;
	line-height: 24px;
	color: #4c94b5;
	font-weight: bold;
}

.font-ch2-15 {
	font-size: 15px;
	line-height: 20px;
	color: #72af43;
}

.font-dch2-15 {
	font-size: 15px;
	line-height: 24px;
	color: #72af43;
	font-weight: bold;
}

.font-dch2-19 {
	font-size: 19px;
	line-height: 24px;
	color: #72af43;
	font-weight: bold;
}

.font-ch3-15 {
	font-size: 15px;
	line-height: 20px;
	color: #7f90c8;
}

.font-dch3-15 {
	font-size: 15px;
	line-height: 24px;
	color: #7f90c8;
	font-weight: bold;
}

.font-dch3-19 {
	font-size: 19px;
	line-height: 24px;
	color: #7f90c8;
	font-weight: bold;
}

.font-ch0-15 {
	font-size: 15px;
	line-height: 20px;
	color: #4c94b5;
}

.font-dch0-15 {
	font-size: 15px;
	line-height: 24px;
	color: #4c94b5;
	font-weight: bold;
}

.font-ch6-15 {
	font-size: 15px;
	line-height: 20px;
	color: #18943b;
}

.font-dch6-15 {
	font-size: 15px;
	line-height: 24px;
	color: #18943b;
	font-weight: bold;
}

.font-ch6-15-1 {
	font-size: 15px;
	line-height: 20px;
	color: #90b821;
}

.font-dch6-15-1 {
	font-size: 15px;
	line-height: 24px;
	color: #90b821;
	font-weight: bold;
}

.font-ch8-15 {
	font-size: 15px;
	line-height: 20px;
	color: #ee8593;
}

.font-dch8-15 {
	font-size: 15px;
	line-height: 24px;
	color: #ee8593;
	font-weight: bold;
}