/*
===================
CSR
===================
*/
body, td, th, table, caption, tbody, tfoot, thead, tr, th, td, img, ul, li, ol, dl, dt, dd, span, h1, h2, h3, h4, h5, h6, p, fieldset, form, label, legend, input, textarea, select, button, form {
    font-family: open_sansregular, Arial, "微軟正黑體", "新細明體", "メイリオ", Meiryo, MS Gothic, sans-serif;
    color: #333333;
}

body{
	width: 100%;
	margin: 0 auto;
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.main.csr h1{ font-size: 2em; line-height: 2em;}/*32*/
.main.csr h2{ font-size: 1.7em; line-height: 2em;}/*28*/
.main.csr h3{ font-size: 1.5em; line-height: 2em;}/*24*/
.main.csr h4{ font-size: 1.25em; line-height: 1.8em;}/*20*/
.main.csr h5{ font-size: 1.125em; font-weight: normal; line-height: 1.5em;}/*18*/
.main.csr h6{ font-size: 0.85em; font-weight: normal; line-height: 1.5em;}/*12.8*/
.main.csr p{ font-size: 1em; font-weight: normal; line-height: 1.5em;}/*16*/

.main.csr{
	margin: 0px auto;
	padding-bottom: 40px;
	min-height: calc(100vh - 600px); 
	margin: 40px auto 0 auto;
}

.main.csr a{
	color: #333333;
	cursor: pointer;
	text-decoration: none;
}

.main.csr a:hover{
	color: #e71e0f;
}

.main.csr .photo_wrap_70{
	margin: 20px 15%;
}


.main.csr img{
	width: 100%;
	border: none;
	display: block;
}

.main.csr ul{
	line-height: 1.5em;
}

.main.csr .heading{
	
}

.main.csr .mb-40{
	margin-bottom: 40px;
}

/* clearfix */
.clearfix:after {
	content: ""; 
	display: block; 
	clear: both; 
}
.clearfix{
	zoom:1;
}

/*.table_primary
--------------*/
.table_wrap{
	overflow-x: auto;
}
.table_primary{
	border-collapse:separate;
	line-height: 1.3em;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}
.table_primary th{
	background-color: #e71e0f;
	color: #ffffff;
	padding: 8px 0;
	text-align: center;
	vertical-align: middle;
}
.table_primary thead th{
 	border-right: 1px solid #eb4b3f;
 	padding: 10px;
}
.table_primary td{
	border-bottom: 1px solid #f0f0f0;
	padding: 8px 0;
	vertical-align: middle;
}
.table_primary td:first-child{border-bottom: 1px solid #f5f5f5; background-color: #f0f0f0; text-align: center;}

.table_primary.table_full{
	width: 100%;
}
.table_primary.table_middle{
	width: 50%;
}
/*End*/

/*download
--------------*/
.wrap_download{
	margin: 20px 0;
}
.wrap_download .dFlex{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	cursor: pointer;
}
.wrap_download .icon_download{
	width: 40px;
	margin-right: 8px;
}

.wrap_download div:nth-child(2){
	flex: 1;
}
.wrap_download a{
	display: inline-block;
}
.wrap_download a:hover{
	color: #e71e0f;
	text-decoration: underline;
}
/*End*/

/*Tab
--------------*/
ul.tabBlock{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: ;
		justify-content: flex-start;
	cursor: pointer;
}

ul.tabBlock li{
	list-style: none;
	position: relative;
}

ul.tabBlock li img{
	width: 100%;
}

.indexCSR_wrap ul.tabBlock li:hover img{
	transform:scale(1.1,1.1);
	position: relative;
	z-index: 99;
}

.tab_panel{
	display: none;
}

.tab_panel.activeTab{
	display: block;
}
/*End*/

/*Card 報告書下載
--------------*/
.card_container{
	width: 100%;
}

.card_container.width_70{
	padding: 0 15%;
}

.card_group{
	border-radius: 4px;
	border: 1px solid #f0f0f0;
	width: 29%;
	margin: 2%;
	float: left;

}

.card_group::after{
	content: ""; 
	display: block; 
	clear: both; 
}

.card_group:hover{
	border-color: #333333;
}

.card_photo{
	position: relative;
	width: 100%;
	padding-bottom: 0;
}

.card_photo img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.card_content{
	padding: 0px 16px;
	text-align: center;
}

.card_heading{
	color: #333333;
	font-weight: bold;
	font-size: 1.25em;
	padding: 16px 0;
}

.card_text{
	color: #878787;
	font-size: 0.85em;
	padding-bottom: 16px;
}

.card_group:hover .card_heading{
	color: #e71e0f;
}

.card_group:hover .card_text{
	color: #e71e0f;
}

/*End*/

@media screen and (max-width: 940px){ 
	.main.csr .photo_wrap_70{
		margin: 20px 0;
		width: 100%;
	}

	/*Card 報告書下載
	--------------*/
	.card_container.width_70{
		padding: 0;
	}

	.card_group{
		width: 46%;
		max-height: ;
		margin: 2%;
	}

}

@media screen and (max-width: 640px){ 
	.main.csr h1{ font-size: 1.7em; line-height: 2em;}
	.main.csr h2{ font-size: 1.445em; line-height: 2em;}
	.main.csr h3{ font-size: 1.275em; line-height: 2em;}
	.main.csr h4{ font-size: 1.0625em; line-height: 1.8em;}
	.main.csr h5{ font-size: 0.9525em; font-weight: normal; line-height: 1.5em;}
	.main.csr h6{ font-size: 0.7225em; font-weight: normal; line-height: 1.5em;}
	.main.csr p{ font-size: 0.85em; font-weight: normal; line-height: 1.5em;}

	/*Card 報告書下載
	--------------*/
	.card_group{
		width: 96%;
		margin: 2%;
	}
}

/*
===============================
index 首頁
===============================
*/
.indexCSR_wrap ul.paragraph{
	padding-left: 2.25em;
}

/*Feature
--------------*/
.indexCSR_wrap .feature_wrap,
.indexCSR_wrap .feature_wrap_70{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	width: 100%;
	margin-bottom: 16px;
	position: relative;
}

/*下底線
.indexCSR_wrap .feature_wrap::after, 
.indexCSR_wrap .feature_wrap_70::after{
	content: "";
	background-color: #878787;
	position: absolute;
	bottom: 0;
	left: 0%;
	right: 0%;
	height: 1px;
	width: 100%;
}*/

.indexCSR_wrap .feature_wrap .feature_item{
	flex: 1 1 20%;
	padding: 12px;
	text-align: center;
}

.indexCSR_wrap .feature_wrap_70 .feature_item{
	flex: 0 1 35%;
	padding: 12px;
	text-align: center;
}

.indexCSR_wrap .feature_item .photo_wrap{
	position: relative;
}

/*feature_item 標題*/
.indexCSR_wrap .feature_item p.heading{
	display: block;
	font-weight: bold;
	margin: 12px 0;
}
/*feature_item 政策與組織 永續績效*/
/*
.indexCSR_wrap .feature_item.policy_organization .text_wrap,
.indexCSR_wrap .feature_item.sustainability_performance .text_wrap{
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 12px;
	width: 100%;

}

.indexCSR_wrap .feature_item.policy_organization .text_wrap h5,
.indexCSR_wrap .feature_item.sustainability_performance .text_wrap h5{
	color: #fff;
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 0.05em;

	-moz-text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
	-webkit-text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
	text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

.indexCSR_wrap .feature_item.policy_organization .text_wrap h6,
.indexCSR_wrap .feature_item.sustainability_performance .text_wrap h6{
	color: #fff;
	letter-spacing: 0.05em;

	-moz-text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
	-webkit-text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
	text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}*/

.indexCSR_wrap .feature_item img{
	object-fit: cover;
	height: 100%;
	width: 100%;	 
}

.indexCSR_wrap .feature_item a{
	display: block;
	width: 100%;
}

.indexCSR_wrap .feature_item:hover .photo_wrap{
	-moz-box-shadow: 0px 0px 8px rgba(135,135,135,0.8);
	-webkit-box-shadow: 0px 0px 8px rgba(135,135,135,0.8);
	box-shadow: 0px 0px 8px rgba(135,135,135,0.8);
}

.indexCSR_wrap .feature_item:hover h4.heading{
	color: #e71e0f;
}

/*Tab custom 1 - indexCSR_wrap*/
.indexCSR_wrap ul.tabBlock{
	width: 100%;
	margin-bottom: 20px;
	margin-top: 40px;
}

.indexCSR_wrap ul.tabBlock li{
	flex: 1;
}

.indexCSR_wrap .tab_panel .content{
	background-color: #ffffff;
	border: 2px solid #333333;
	border-radius: 4px;
	padding: 24px 24px;
	margin-bottom: 40PX;
	min-height: 500px;
}

.indexCSR_wrap .tab_panel .content h4{
	color: #e71e0f;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 8px;
	
}

.indexCSR_wrap .tab_panel .content h4::after{
	content: "";
	background-color: #333333;
	position: absolute;
		left: 0;
		bottom: 0;
	height: 1px;
	width: 100%;
}

.indexCSR_wrap .tab_panel .content h5 i{
	padding-right: 10px;
}

.indexCSR_wrap .tab_panel .content h5::after{
	background-color: rgba(255, 255, 255, 0.6);
	content: "";
	display: block;
	margin: 5px 0 10px 0;
	height: 1px;
	width: 100%;
}

.indexCSR_wrap .tabBlock li.activeTab::before{
	display: block;
	content: "";
	position: absolute;
		left: 50%;
		bottom: -22px;
		transform: translateX(-50%);
	z-index: 3;
	border-style: solid;
	border-width: 0 7.5px 12.5px 7.5px;
	border-color: transparent transparent #ffffff transparent;
}

.indexCSR_wrap .tabBlock li.activeTab::after{
	display: block;
	content: "";
	position: absolute;
		left: 50%;
		bottom: -22px;
		transform: translateX(-50%);
	z-index: 1;
	border-style: solid;
	border-width: 0 10px 15px 10px;
	border-color: transparent transparent #333333 transparent;
}

/*index table*/
.indexCSR_wrap thead th:first-child{
	min-width: 100px;
}

.indexCSR_wrap tbody td{
	padding: 20px 10px;
	border-right: 1px solid #f0f0f0;
}

.indexCSR_wrap ul.table_list{
	padding-left: 1.5em;
}
/*
===============================
csr_2.html 綠色永續
===============================
*/
.green_wrap .feature_wrap{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: center;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 48px;
}

.green_wrap .feature_item{
	flex: 0 1 auto;
	padding: 12px 48px;
	text-align: center;
}

.green_wrap .feature_item h4.heading{
	color: #878787;
	display: block;
	margin: 8px 0;
}

.green_wrap .feature_item:hover h4.heading{
	color: #e71e0f;
}

.green_wrap .feature_item h6{
	color: #878787;
}

.green_wrap .feature_item:hover h6{
	color: #e71e0f;
}
.green_wrap .feature_item .photo_wrap{
	position: relative;
	width: 100%;
}

.green_wrap .feature_item img{
	object-fit: cover;

	height: 100%;
	width: 100%;  
}

.green.photo_wrap{
	width: 70%;
	margin: 0 auto;
	padding: 20px 0;
}

/*Green Goal*/
.goal_wrap{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: flex-start;
	width: 100%;
	
	margin: 20px 0;
}

.goal_wrap .photo_wrap{
	width: 30%;
	height: auto;	
}

.goal_wrap .photo_wrap img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}

ul.list_goal{
	flex: 1;
	background-color: #e71e0f;
	
	font-weight: bold;
	padding: 24px;

	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

ul.list_goal.bg2{
	background-color: #333333;
}

ul.list_goal.bg2 li{
	color: #ffffff;
}

ul.list_goal li{
	list-style: none;
	line-height: 2em;
	color: #ffffff;
	font-size: 0.85em;
}

/*
===============================
csr_4.html 公司治理 Governance
===============================
*/

/*Tab custom 2*/
.governance_wrap ul.tabBlock{
	width: 100%;
	margin-top: 40px;	
}

.governance_wrap ul.tabBlock li{
	flex: 0 1 auto;

	border-radius:0;
	font-weight: bold;
	padding: 10px 12px;
}
/*
.governance_wrap ul.tabBlock li:nth-last-child(n+2)::after{
	content: "";
	background-color: #bfbfbf;
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	height: 14px;
	width: 1px;
}*/

.governance_wrap ul.tabBlock li:hover{
	background-color: #e71e0f;
	color: #ffffff;
}

.governance_wrap ul.tabBlock li.activeTab{
	background-color: #e71e0f;
	color: #ffffff;
}

.governance_wrap .tab_control{
	text-align: center;
}

.governance_wrap .content{
	border-top: 2px solid #e71e0f;
	padding: 24px 0;
	min-height: 200px;
}

.governance_wrap ol{
	padding-left: 2.25em;
}

.governance_wrap ol li{
	list-style-type: cjk-ideographic;
	line-height: 1.5em;
}

/*governance-1 Rate 性別年齡比例*/
.rate_wrap{
	width: 45%;
}

.rate_wrap img{	
	display: block;
	vertical-align: middle;
	padding-top: 20px;
}

.rate_note{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 40px;
	padding-left: 40px;
	text-align: center;
}

.rate_note div:nth-child(1){
	display: inline-block;
	padding-left: 24px;
	padding-right: 40px;
	position: relative;
	
}

.rate_note div:nth-child(1)::before{
	background-color: #e71e0f;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 1em;
	width: 1em;
}

.rate_note div:nth-child(2){
	display: inline-block;
	padding-left: 24px;
	position: relative;
	
}

.rate_note div:nth-child(2)::before{
	background-color: #f0f0f0;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 1em;
	width: 1em;
}

/*governance-3 董事會重要決議*/
.governance_wrap_3{
	display: flex;
		display: -webkit-flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
	cursor: pointer;
}

.resolutions_group{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
	cursor: pointer;
	margin: 20px 0;
	position: relative;
	height: 48px;
	width: 100%;
}

.governance_wrap_3 .dFlex{
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
}

.governance_wrap_3 .year{
	background-color: #f0f0f0;
	border-radius: 999em 0 0 999em;
	color: #e71e0f;
	font-weight: bold;
	padding: 16px 16px 16px 30px;
}

.resolutions_group:hover .year{
	background-color: #e71e0f;
	color: #ffffff;
}

.governance_wrap_3 .wrap_download{
	flex: 1;

	border-radius:0  4px 4px 0;
	border: 2px solid #f0f0f0;
	margin: 0;
	position: relative;
}

.governance_wrap_3 .icon_download{
	vertical-align: middle;
	
	width: 30px;
	height: auto;
}
.governance_wrap_3 .wrap_download a{
	display: block;
	height: 100%;
	width: 100%;
}

.resolutions_group:hover .wrap_download,.resolutions_group:hover div{
	border-color: #e71e0f;
	color: #e71e0f;
}

/*Governance Table*/
.governance_wrap .table_primary tr:first-child th:nth-child(1){width: 10%;}
.governance_wrap .table_primary tr:first-child th:nth-child(2){width: 15%;}
.governance_wrap .table_primary tr:first-child th:nth-child(3){width: 5%;}
.governance_wrap .table_primary tr:first-child th:nth-child(4){width: 28%; border-bottom: 1px solid #eb4b3f;}
.governance_wrap .table_primary tr:first-child th:nth-child(5){width: 10%; border-bottom: 1px solid #eb4b3f;}
.governance_wrap .table_primary tr:first-child th:nth-child(6){width: 10%;}
.governance_wrap .table_primary tr:first-child th:nth-child(7){width: 10%;}
.governance_wrap .table_primary tr:first-child th:nth-child(8){width: 12%; border-bottom: 1px solid #eb4b3f;}

.governance_wrap .table_primary td{
	text-align: center;	
}

.governance_wrap .table_primary td:nth-child(2){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(3){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(4){}
.governance_wrap .table_primary td:nth-child(5){}
.governance_wrap .table_primary td:nth-child(6){}
.governance_wrap .table_primary td:nth-child(7){}
.governance_wrap .table_primary td:nth-child(8){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(9){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(10){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(11){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(12){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(13){border-right: 1px solid #f0f0f0;}
.governance_wrap .table_primary td:nth-child(14){border-right: 1px solid #f0f0f0;}

.governance_wrap .table_primary.table_middle tr:first-child th:nth-child(1){width: 40%;}
.governance_wrap .table_primary.table_middle tr:first-child th:nth-child(2){width: 30%;}
.governance_wrap .table_primary.table_middle tr:first-child th:nth-child(3){width: 30%;}

/*org group 公司治理
--------------*/
.org_container{
	display: flex;
		display: -webkit-flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	width: 100%;
}

.org_group{
	display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
	margin: 10px 0;
	width: 100%;
}

.org_group:hover {
	transform:scale(1.2,1.2);
}

.org_group:hover .org_name{
	color: #e71e0f;
}

.org_person{
	min-width: 195px;
	padding: 20px;

	display: flex;
		display: -webkit-flex;
		flex-direction: column;
		align-items: center;
}

.org_content{
	flex: 1;
	padding: 20px;
}

.org_content .heading{
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 10px;
	padding-left: 13px;
	position: relative;
}

.org_content .heading::before{
	content: "";
	background-color: #e71e0f;
	position: absolute;
		top: 50%;
		left: 0px;
		transform: translateY(-50%);
	width: 5px;
	height: 100%;

}

.org_text{
	background-color: #f0f0f0;
	padding: 12px;
}

.org_photo{
	width: 80px;
	object-fit: cover;
}

.org_photo img{
	border-radius: 999em;
	width: 80px;
	height: 80px;
}

/*
===============================
csr_8.html 報告書下載
===============================
*/
.map_report_wrap{
	width: 100%;
	
}

.map_report_wrap figure{
	width: 70%;
	margin: 0 auto;
}

.map_report_wrap figure img{
	display: inline-block;
}

.map_report_wrap h3{
	text-align: left;
}

.mmap_report_wrap h6{
	color: #878787;
	text-align: left;
}




/*Icon
--------------*/
.icon_earth::before{
	content: "\f06c";
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	margin-right: 10px;
}

/*Color
--------------*/
.color_primary{
	color: #e71e0f;
}

.color_secondary{
	color: #878787;
}

.color_peace{
	color: #556b2f;
}

/*分隔線
--------------*/
.hr_100{
	background-color: #B7B7B7;
	content: "";
	margin: 20px 0 40px 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	height: 1px;
	width: 100%;
}

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

	/*index 首頁 Feature*/
	.indexCSR_wrap .feature_item,
	.indexCSR_wrap .feature_wrap_70 .feature_item{
		flex: 1 1 50%;
	}

	.feature_wrap{
		flex-wrap: wrap;
	}
	.feature_item{	
		flex: 0 1 50%;
	}

	/*index table*/
	.indexCSR_wrap thead th:first-child{
		min-width: 0px;
	}

	/*csr_2.html 綠色永續*/
	.green_wrap .feature_item{
		padding: 12px 12px;
	}

	.goal_wrap .photo_wrap {
		width: 100%;
		height: 100%;
		padding-bottom: 40%;
		position: relative;
	}

	.goal_wrap .photo_wrap img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		top: 0;
	}

	/*Green Goal*/
	.goal_wrap{
		flex-direction: column;
		height: auto;
	}

	/*csr_4.html 公司治理 Rate*/
	.rate_wrap{
		width: 100%;
	}

	/*csr_8.html 報告書下載*/
	.main.csr .map_report img{
		width: 100%;
	}

	/*Tab*/
	.indexCSR_wrap .tab_panel .content{
		min-height: 500px;
	}
}

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

	/*index 首頁 Feature*/
	.indexCSR_wrap .feature_wrap{
		flex-direction: column;
	}
	.indexCSR_wrap .feature_item,
	.indexCSR_wrap .feature_wrap_70 .feature_item{
		flex: 1 1 100%;
	}
	.feature_wrap{
		flex-direction: column;
	}
	.feature_item{	
		width: 100%;
	}
	.indexCSR_wrap .feature_item h4.heading{
		margin: 4px 0 8px 0;
	}
	
	/*csr_2.html 綠色永續*/
	.green_wrap .feature_wrap{
		width: 100%;
		flex-direction: column;
	}
	/*Tab*/
	.indexCSR_wrap .tab_panel .content{
		min-height: 555px;
	}
	
	/*Table*/
	.table_primary.table_full{
		width: 100%;
	}

	.table_primary.table_middle{
		width: 100%;
	}

	/*org*/
	.org_group {
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

/*
.org_content .heading::before{
	content: "\f15c";
	color: #f0f0f0;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	margin-right: 10px;
}*/
}