/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: "Noto Sans TC", sans-serif; overflow-x: hidden; position: relative;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1400px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: clamp(16px, 1.3vw, 18px); line-height:1.6; color: #333; letter-spacing: 0; font-weight: 400; padding-top: 150px;}
.width-1200 { max-width: 1200px;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-20 { font-size: clamp(16px, 1.5vw, 20px);}
.font-size-22 { font-size: clamp(18px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-25 { font-size: clamp(20px, 2.0vw, 25px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3;}
.font-size-32 { font-size: clamp(22px, 2.7vw, 32px); line-height: 1.3;}
.font-size-36 { font-size: clamp(24px, 3.1vw, 36px); line-height: 1.3;}
.font-size-38 { font-size: clamp(24px, 3.3vw, 38px); line-height: 1.3;}
.font-size-40 { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-50 { font-size: clamp(24px, 3.5vw, 50px); line-height: 1.3;}
.font-size-52 { font-size: clamp(24px, 3.5vw, 52px); line-height: 1.3;}

.demo-section { padding-left: 5%; padding-right: 5%;}

.align-center { text-align: center !important;}
.align-left { text-align: left !important;}

.color-blue { color: #0157ac;}
.color-white { color: #fff;}

.weight-900 { font-weight: 900;}
.weight-700 { font-weight: 700;}
.weight-500 { font-weight: 500;}
.weight-300 { font-weight: 300;}

.banner { position: relative; margin-bottom: calc(5px + 1%);}
.banner-pc { }
.banner-mobile { display: none !important;}


.title01 { position: relative; padding-bottom: calc(15px + 1%); margin-bottom: calc(20px + 1%);}
.title01 > h1, .title01 > div { font-family: "Noto Sans TC", sans-serif; line-height: 1.4; padding: 0; margin: 0; letter-spacing: 0.1rem;}
.title01:after { position: absolute; content: ""; width: 80px; height: 2px; background: #d3001d; bottom: 0; left: 0%; }

.btn-more { transition: all 0.4s ease-out 0s;  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-size: 16px;}
.btn-more > div { margin-right: 10px;}
.btn-more > img { width: 10px;}

.btn-more2 { width: 150px; margin: 0 auto; height: 38px; background: #0157ac; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.btn-more2:hover { background: #d3001d;}
.btn-more2 > div { color: #fff; font-size: 16px; padding-right: 5px;}
.btn-more2 > img { width: 13px; filter: brightness(100);}

.banner-pto { height: 250px}
.banner-pto img { object-fit: cover; width: 100%; height: 100%;}
.banner-title { position: absolute; top:50%; transform: translateY(-50%); width: 100%; left: 0; padding: 0 5%; text-align:center; color: #fff; font-weight: 700; text-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.8); letter-spacing: 0.1rem; line-height: 1.3;}

#path { padding: 0 0 calc(5px + 1%) 0; }
#path ul { margin: 0; padding: 0; text-align: left; line-height: 1.3;}
#path li { display: inline-block; vertical-align: top; font-size: 14px; line-height: 1.2; letter-spacing: 0rem; position: relative; font-weight: 400;}
#path li:after { content:">"; display: inline-block; padding: 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333; }
#path li a:hover { color: #0157ac;}
#path li:last-child a { color: #0157ac;}

/*about*/
.content-layout { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.content-layout > div:nth-of-type(1) { width: 300px; position: sticky; top:110px;}
.content-layout > div:nth-of-type(2) { width: calc(100% - 300px); padding-left: 5%;}

.aside-title { border-radius: 15px 0; background: linear-gradient(90deg, #1b71aa 0%, #4498cc 100%); text-align: center; padding: 11px 10px; line-height: 1.2; color: #fff; font-weight: 700; margin-bottom: 15px;}

.line-type-1 { border-top: 1px solid #dddddd; margin-top: 10px; padding-bottom: 35px;}

.data-type-1 { padding: 0 0 calc(20px + 2%) 0; margin: 0; line-height: 1.6; font-weight: 400;}

.history-section { position: relative; margin-bottom: calc(20px + 5%); padding-top: 15px; display: flex; flex-direction: column; flex-wrap: nowrap;}
.history-section:after { position: absolute; content: ""; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: #0157ac;}
.history-section > div { width: 50%; position: relative; padding: 0 30px 20px 30px;font-weight: 500;}
.history-section > div:nth-child(odd) { margin: 0 0 0 auto; text-align: left; }
.history-section > div:nth-child(even) { margin: 0 auto 0 0; text-align: right; }
.history-year { font-size: 16px; color: #0157ac; font-weight: 400; line-height: 1; padding-bottom: 2px; position: relative;}
.history-year:before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 100%; background: #0157ac; box-shadow: 0px 0px 0px 9px rgba(0,100,182,0.2);top:15px; left: -36px;}
.history-year-2:before { box-shadow: 0px 0px 0px 0px rgba(0,100,182,0.2); top:0;}
.history-section > div:nth-child(even) .history-year:before { right: -36px; left: auto;}
.history-year b { font-size: clamp(24px, 3.1vw, 36px); font-weight: 700;}
.history-data { padding-bottom: 10px;}

/*philosophy*/
.philosophy-title { margin-bottom: calc(15px + 1%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.philosophy-title > div:nth-of-type(1) { width: 165px; height: 60px; background: #0072bb; clip-path: polygon(0% 0, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0 100%); padding:3px 20px 6px 20px; text-align:left; color: #fff; font-weight: 700;font-size: clamp(20px, 2.0vw, 26px); line-height: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.philosophy-title > div:nth-of-type(1) i { font-weight: 700;font-size: clamp(24px, 3.5vw, 46px); display: inline-block; margin-left: 3px; }
.philosophy-title > div:nth-of-type(2) { width: calc(100% - 165px); padding-left: 30px; font-size: clamp(20px, 2.0vw, 25px); font-weight: 700; line-height: 1.4; color: #0157ac;}
.philosophy-data { padding-bottom: calc(20px + 3.5%);}

.philosophy-section-2 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 5%);}
.philosophy-section-2 > div:nth-of-type(1) { width: 31%;}
.philosophy-section-2 > div:nth-of-type(2) { width: 69%; padding-left: 7%;}
.philosophy-section-2 > div:nth-of-type(2) > div { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid #dddddd; padding-bottom: calc(25px + 1%); margin-bottom: calc(25px + 1%);}
.philosophy-section-2 > div:nth-of-type(2) > div  > div:nth-of-type(1) { width: 100px; text-align: center;}
.philosophy-section-2 > div:nth-of-type(2) > div  > div:nth-of-type(2) { width: calc(100% - 100px); padding-top: 0px; padding-left: 2%;}

.title02 { padding-bottom: calc(15px + 1%); line-height: 1.3;}

/*quality*/
.width-50-layout { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.width-50-layout > div { width: 48%; margin-bottom: 30px;}

.quality-section { padding-bottom: calc(20px + 5%);}
.quality-section > div { border-left: 4px solid #0157ac; padding-left: 25px;}
.quality-title { line-height: 1.3; padding-bottom: 8px; font-weight: 700; color: #0157ac;}

/*windscape*/
.windscape-title { align-items: center;}
.windscape-title > div:nth-of-type(1) { width: 102px; padding-left: 6px;}
.windscape-title > div:nth-of-type(2) { width: calc(100% - 102px); padding-left: 15px;}

/*laws*/
.laws-spec { border-spacing: 1px; border-collapse: inherit; width: 100%; background: #333333;}
.laws-spec th, .laws-spec td { padding: 10px; line-height: 1.6;}
.laws-spec th { color: #fff; text-align: left; background: #7f7f7f;}
.laws-spec td { color: #333; background: #fff; font-weight: 400;}

/*policy*/
.policy-section { padding-bottom: calc(20px + 4%);}
.policy-content { margin-bottom: calc(20px + 2%); background: linear-gradient(0deg, rgba(148,226,245,.24) 0%, #FFFFFF 100%); padding: calc(20px + 2%) calc(20px + 7%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;}
.policy-content > div:nth-of-type(1) { width: 220px;}
.policy-content > div:nth-of-type(2) { width: calc(100% - 220px); text-align: center;}
.policy-title { font-weight: 700; line-height: 1.2;}
.policy-title span { display: block; border-bottom: 2px solid #333; padding-bottom: 4px; margin-bottom: 4px;}

/*products*/
.products-section { padding-bottom: calc(20px + 4%);}
.products-list { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid #dddddd; padding-bottom: 20px; margin-bottom: 20px;}
.products-list:hover { border-bottom: 1px solid #0157ac;}
.products-list:hover > div:nth-of-type(1) img { transform: scale(0.95);}
.products-list > div:nth-of-type(1) { width: 26%;}
.products-list > div:nth-of-type(1) img { transition: all 0.4s ease-out 0s; }
.products-list > div:nth-of-type(2) { width: 74%; padding: 15px 0 0 5%;}

.products-list-title { padding-bottom: calc(5px + 1%); font-weight: 700;}

/*products-detail*/
.products-detail-title { padding-bottom: 12px; line-height: 1.3; font-weight: 700; color: #0157ac;}

.products-detail-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 3.5%);}
.products-detail-list > div:nth-of-type(1) { width: calc(100% - 250px); padding-right: 22px;}
.products-detail-list > div:nth-of-type(2) { width: 250px;}
.products-detail-list > div:nth-of-type(2) img { border: 1px solid #dddddd;}

.products-detail-spec { width: 100%; border-spacing: 0; border-collapse: inherit;}
.products-detail-spec th, .products-detail-spec td { text-align:left; font-size: clamp(16px, 1.3vw, 18px); padding: 10px 15px; font-weight: 400;}
.products-detail-spec th { background: #f0f3f5;border-top: 1px solid #0157ac; font-weight: 500;}
.products-detail-spec td { border-top: 1px solid #dddddd;}
.products-detail-spec td a { color: #0157ac; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.products-detail-spec td a img { width: 13px; height: 13px; display: inline-block; margin-left: 10px;}

#page { padding:0 0 calc(15px + 1%) 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;}
#page a { font-size: 16px; color: #333; font-weight: 400; width: 40px; height: 40px; line-height: 38px; text-align: center; display: inline-block; margin: 0 2px 4px 2px;}
#page a:hover, #page a.current { background: #f0f0f0; color: #333;}
.page-prev, .page-next { background: #f0f0f0; border: 1px solid #dddddd; position: relative;}
.page-prev:before, .page-next:before { content: ""; position: absolute; top:35%; left: 40%; transform: translate(-50%, -50%); width: 10px !important; height: 10px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #333; border-right: 1px solid #333; }
.page-prev:hover, .page-next:hover { background: #333 !important;}
.page-prev:hover:before, .page-next:hover:before { border-color: #fff;}
.page-prev:before { transform: rotate(-135deg); margin-left: 2px;}
.page-next:before { transform: rotate(45deg); margin-left: -3px;}

.btn-back { border: 1px solid #dddddd; background: #f0f0f0; text-align: center; width: 150px; line-height: 40px; margin: 0 auto calc(20px + 4%) auto; font-weight:500;font-size: clamp(16px, 1.3vw, 18px); display: block;}
.btn-back:hover { transform: scale(0.9);}

/*esg*/
.esg-bg { background: url("../images/esg-bg.png") repeat-y top center;}

.esg-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 4%);}
.esg-section-1 > div:nth-of-type(1) { width: 67%; padding-right: 7%;}
.esg-section-1 > div:nth-of-type(2) { width: 33%;}
.esg-section-1 > div:nth-of-type(2) > div { padding-bottom: 10px;}
.esg-section-1-btn { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 370px; align-items: center; justify-content: center; width: auto;background:#0064b6; color: #fff !important; font-weight: 700; font-size: 16px; padding: 10px 10px ;line-height: 1.2; margin-bottom: calc(20px + 4%); margin-top: 10px;}
.esg-section-1-btn img { width: 10px; margin-left: 10px; filter: brightness(100);}
.esg-section-1-btn:hover { transform: scale(0.95);}

.esg-title { margin-bottom: 25px;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.esg-title > div:nth-of-type(1) { width: 36px;}
.esg-title > div:nth-of-type(2) { width: calc(100% - 36px); padding-left: 12px;}
.esg-title > div:nth-of-type(2) > div { color: #0157ac; border-bottom: 1px dotted #0157ac; line-height: 1.4; font-weight: 700; display: inline-block; padding-bottom: 7px;}


.esg-section-2 { padding-bottom: calc(20px + 4%);}

.mpct-spec { width: 100%; max-width: 770px;}
.mpct-spec th, .mpct-spec td {  padding: 10px; text-align:left; vertical-align: middle; line-height: 1.3;}
.mpct-spec th { border-bottom: 2px solid #0157ac; color: #0157ac; font-size: 18px; font-weight: 700; white-space: nowrap;}
.mpct-spec td { font-size: 16px; font-weight: 400; }
.mpct-spec tr { border-bottom: 1px solid #0157ac;}
.mpct-spec-title { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-weight: 700; font-size: 18px;}
.mpct-spec-title > img { width: 25px; display: inline-block; margin-right: 10px;}
.mpct-spec-title > div { }
.mpct-spec-data { background: #f0f3f5; color: #333; border-bottom: 1px solid #fff;}
.border-blue { border-color: #0157ac;}


@media only screen and (max-width: 1920px) {
	
	
}
@media only screen and (max-width: 1365px) {
	#content { padding-top: 80px;}
	
	.content-layout > div:nth-of-type(1) { width: 100%; position: relative; top: auto; padding-bottom: 20px;}
	.content-layout > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0%;}
	.aside-title { display: none;}
}
@media only screen and (max-width: 1279px) {
	.banner-pto { height: 200px}
}

@media only screen and (max-width: 980px) {
	.banner-pc { display: none !important;}
	.banner-mobile { display: block !important;}
	
	.philosophy-section-2 > div:nth-of-type(1) { width: 100%;}
	.philosophy-section-2 > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	
	.policy-content { padding: 0 0 calc(20px + 2%) 0; }
	.policy-content > div:nth-of-type(1) { width: 100%; padding-bottom: 20px;}
	.policy-content > div:nth-of-type(2) { width: calc(100% - 0px); padding-right: 20px; }
	
	.products-list > div:nth-of-type(1) { width: 100%; text-align: center;}
	.products-list > div:nth-of-type(2) { width: 100%; padding: 15px 0 0 0;}
	
	.products-detail-list > div:nth-of-type(1) { order: 2; width: calc(100% - 0px); padding-right: 0px;}
	.products-detail-list > div:nth-of-type(2) { order: 1; width: 100%; margin-bottom: 20px; text-align: center;}
	.products-detail-title { text-align: center;}
	
	
	.esg-section-1 > div:nth-of-type(1) { width: 100%; padding-right: 0%;}
	.esg-section-1 > div:nth-of-type(2) { width: 100%;}
}
@media only screen and (max-width: 768px) {
	.history-section:after { left: 15px; transform: translateX(0%);}
	.history-section > div { width: 100%; padding: 0 0px 20px 45px}
	.history-section > div:nth-child(even) { text-align: left; }
	.history-section > div:nth-child(even) .history-year:before { right: auto; left: -36px;}
	
	.width-50-layout > div { width: 100%; }
}
@media only screen and (max-width: 640px) {
	.philosophy-title > div:nth-of-type(1) { padding:5px 10px 6px 10px; height: 40px; width: 105px; clip-path: polygon(0% 0, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0 100%); margin-bottom: 10px;}
	.philosophy-title > div:nth-of-type(2) { width: 100%; padding-left: 0;}
	
	.windscape-title > div:nth-of-type(1) { width: 60px; padding-left: 6px; margin-bottom: 0;}
	.windscape-title > div:nth-of-type(2) { width: calc(100% - 60px); padding-left: 6px;}
}
@media only screen and (max-width: 570px) {
	#content { padding-top: 120px;}
	
	.philosophy-section-2 > div:nth-of-type(2) > div  > div:nth-of-type(1) { width: 70px; text-align: center; padding: 0 10px 0 0;}
	.philosophy-section-2 > div:nth-of-type(2) > div  > div:nth-of-type(2) { width: calc(100% - 70px); }
	
	.products-detail-spec th, .products-detail-spec td { display: list-item; list-style-type: none;}
}

@media only screen and (max-width: 470px) {
	
}

@media only screen and (max-width: 414px) {
	
	
}

@media only screen and (max-width: 320px) {
	
	
}