/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; background: #000000; }
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:1280px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 18px; line-height:30px; color: #fff; letter-spacing: 0rem; font-weight: 400; padding-top: 80px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 18px;line-height:30px;  font-weight: 400;}
p, td, li, label { font-size: 18px;line-height:30px;  font-weight: 400;}

.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%;}

.idx-section-5 { background: url("../images/idx-section-5-bg.jpg") no-repeat top center; background-size: cover; min-height: 958px; padding: 280px 5% 80px 5%; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end;}
.idx-section-5-pto-left { width: 42%;}
.idx-section-5-pto-right { width: 36%;}
.idx-section-5-slogon { position: absolute; top:24%; left: 0; width: 100%; }
.idx-section-5-slogon-txt { font-size: 60px; font-style: italic; line-height: 110%; text-align: center; color: #fff; font-weight: 900;}

.idx-section-6 { background: url("../images/idx-section-6-bg.jpg") no-repeat top left; background-size: cover; min-height: 722px; padding: 35px 8% 20px 8%; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap;}
.idx-section-6-slogon{width: 100%;max-width: 720px;margin: 0 auto; position: relative; z-index: 10;}
.idx-section-6-title {text-shadow: 0px 0px 8px #000; font-size: 60px; font-style: italic; font-weight: 900; color: #fff; line-height: 110%; padding-bottom: 15px;}
.idx-section-6-data {text-shadow: 0px 0px 8px #000;  padding-bottom: 25px;}
.idx-section-6-pto {position: absolute;right: 0;bottom: 0;width: 45%; z-index: 1;}
.idx-section-6 .btn01{text-align: left;padding-top: 0;}

.idx-section-1 { background: url("../images/idx-section-1-bg.jpg") no-repeat top center; background-size: cover; padding: 280px 5% 80px 5%; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
.idx-section-1-pto-left { width: 46%; text-align: right;}
.idx-section-1-pto-right { width: 46%; text-align: left;}
.idx-section-1-slogon { position: absolute; top:24%; left: 0; width: 100%; }
.idx-section-1-slogon-txt { font-size: 60px; font-style: italic; line-height: 110%; text-align: center; color: #fff; font-weight: 900;}
.idx-section-1-data { width: 100%; max-width: 700px; text-align: center; margin: 10px auto 0 auto;}
.idx-section-1 .btn01 { width: 100%; }
.btn01 { padding-top: 45px; text-align: center;}
.btn01 a { width: 100px; line-height: 100%; height: 40px; padding-top: 9px; border-radius: 10px; background: #136ca9; color: #fff; font-size: 18px; display: inline-block; overflow: hidden; position: relative; text-align: center;}
.btn01 a:hover { transform: scale(0.9);}
.btn01 a:hover:after { left: 100%;}
.btn01 a:after { transition: all 0.2s ease-out 0s; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%;background: linear-gradient(-300deg, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 90%);}

.idx-section-2-top { background: url("../images/idx-section-2-bg.jpg") no-repeat top center; background-size: cover; height: 550px; position:relative;}
.idx-section-2-top-content { position: absolute; top:13%; right: 0; padding-right: 5%; width: 48%;}
.idx-section-2-top-title { font-size: 64px; font-style: italic; font-weight: 900; color: #fff; text-shadow: 0px 0px 12px #000, 0px 0px 40px #333; line-height: 100%; padding-bottom: 30px;}
.idx-section-2-top-pto { text-align: right;}
.idx-section-2-bottom { width: 50%; padding-left: 5%; padding-top:68px; padding-bottom: 30px;}
.idx-section-2-bottom-title { font-size: 44px; font-weight: 900; color: #136ca9; line-height: 110%; font-style: italic; padding-bottom: 12px; margin: 0;}
.idx-section-2-bottom-data { padding-bottom: 20px; color: #fff;}
.idx-section-2-bottom .btn01 { padding-top: 0; text-align: left; color: #fff;}

.idx-section-3 { background: url("../images/idx-section-3-bg.jpg") no-repeat top center; background-size: cover; min-height: 722px; padding: 80px 8% 20px 8%; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end;}
.idx-section-3 .btn01 { padding-top: 0; text-align: left;}
.idx-section-3 > div:nth-of-type(1) { width: 40%;}
.idx-section-3 > div:nth-of-type(2) { width: 60%; padding-left: 25px; padding-bottom: 65px;}
.idx-section-3-title { text-shadow: 0px 0px 8px #000; font-size: 60px; font-style: italic; font-weight: 900; color: #fff; line-height: 110%; padding-bottom: 15px;}
.idx-section-3-data { text-shadow: 0px 0px 8px #000;  padding-bottom: 25px; color: #fff;}

.idx-section-4 { background: url("../images/idx-section-4-bg.jpg") no-repeat center center; background-size: cover; padding: 170px 5% 60px 5%; }
.idx-section-4-title { font-size: 60px; font-style: italic; font-weight: 900; color: #fff; line-height: 110%; padding-bottom: 30px;}
.idx-section-4-content { display: flex; flex-direction: row; flex-wrap: wrap; }
.idx-section-4-content > div:nth-of-type(1) { width: 40%; padding-right: 35px;}
.idx-section-4-content > div:nth-of-type(1) .btn01 { padding-top: 0; text-align: left;}
.idx-section-4-content > div:nth-of-type(1) .btn01 a { background: #222;}
.idx-section-4-content > div:nth-of-type(2) { width: 60%;}
.idx-section-4-data { padding-bottom: 25px; color: #fff;}
.idx-section-4-title-2 { font-size: 30px; font-weight: 500; color: #fff; line-height: 110%; padding-bottom: 12px;}

.idx-pro-section { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-pro-section > a { width: 33.33%; display: block; position: relative;}
.pro-pto { padding-bottom: 100%;}
.pro-pto img { transition: all 2s ease-out 0s; }
.pro-name { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 40%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:center; align-items: center; padding: 20px; color: #fff; font-style: italic; font-weight: 700; font-size: 30px; text-shadow: 0px 0px 10px #000;background: linear-gradient(0deg, rgba(0,0,0,.8) 30%, rgba(0,0,0,0) 100%); transition: all 0.4s ease-out 0s; line-height: 120%; }

.idx-pro-section > a:hover .pro-name { height: 100%;}
.idx-pro-section > a:hover .pro-pto img { transform: scale(1.1);}

.idx-news-section { padding: 60px 5% 80px 5%;}
.idx-news-title { font-size: 44px; color: #fff; text-align: center; font-weight: 900; border-bottom: 1px solid #fff; line-height: 110%; padding-bottom: 30px; font-style: italic;}
.idx-news-content { border-bottom: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px 0;}
.idx-news-date { font-size: 15px; color: #ffffff; width: 90px;}
.idx-news-name { display: block; font-size: 17px; font-weight: 700; color: #ffffff; width: calc(100% - 90px); padding-left: 5%;}
.idx-news-name:hover { color: #167fc7;}

@media only screen and (max-width: 1600px) {
    .idx-section-2-top {height: 420px;}
    .idx-section-6 { background: url("../images/idx-section-6-bg.jpg") no-repeat 14% 100% / cover; min-height: 650px;}
}

@media only screen and (max-width: 1400px) {
    .idx-section-6 { background: url("../images/idx-section-6-bg.jpg") no-repeat 17% 100% / cover; min-height: 570px;}
}

@media only screen and (max-width: 1279px) {
	#content { font-size: 16px; line-height: 26px;padding-top: 60px;}
	#content p{ font-size: 16px;line-height:26px;}
	p, td, li, label { font-size: 16px;line-height:26px;}
	
	.idx-section-5 {min-height: 750px;}
	.idx-section-5-slogon { top:20%; }
	.idx-section-5-slogon-txt { font-size: 50px; }
	
	.idx-section-1 { padding: 200px 5% 80px 5%;}
	.idx-section-1-slogon { top:20%; }
	.idx-section-1-slogon-txt { font-size: 50px; }
	
    .idx-section-2-top {height: 340px;}
	.idx-section-2-top-content {top: 17%; width: 38%;}
    .idx-section-2-top-title { font-size: 4.383vw;}
	.idx-section-2-bottom { width: 60%; padding-top: 50px;}
	.idx-section-2-bottom-title { font-size: 32px;}
	
	.idx-section-3 {min-height: inherit;}
	.idx-section-3-title, .idx-section-4-title { font-size: 46px;}
	
	.idx-section-4 { padding: 90px 5% 60px 5%;}
	
	.pro-name { font-size: 22px;}
	
	.idx-news-title { font-size: 36px;  padding-bottom: 20px;}
}

@media only screen and (max-width: 1200px) {
    .idx-section-6 { background: url("../images/idx-section-6-bg.jpg") no-repeat 5% 100% / cover; min-height: 590px;}
}

@media only screen and (max-width: 980px) {
	.idx-section-5 {min-height: 500px; padding-bottom: 50px;}
    .idx-section-5-slogon { top:14%; }
    .idx-section-5-slogon-txt { font-size: 34px; }
	
	.idx-section-1-slogon { top:14%; }
	.idx-section-1-slogon-txt { font-size: 44px; }
	.btn01 { padding-top: 30px;}
	
	.idx-section-2-top { height: 500px;}
	.idx-section-2-top-title { font-size: 5.612vw;}
	.idx-section-2-top-content { top:10%; width: 50%;}
    .idx-section-2-bottom {width: 100%;}
	.idx-section-2-bottom-title { font-size: 26px;}
	
	.idx-section-3 { padding: 80px 5% 20px 5%;}
	.idx-section-3-title, .idx-section-4-title { font-size: 36px;}
	
	.idx-section-4 { padding: 60px 5% 0 5%;}
	.idx-section-4-title-2{ font-size: 26px;}
	.idx-section-4-content > div:nth-of-type(1) { width: 100%; padding-bottom: 30px;}
	.idx-section-4-content > div:nth-of-type(2) { width: 100%;}
	
	.idx-pro-section > a { width: 50%; }
}
@media only screen and (max-width: 768px) {
	.idx-section-5-pto-left { width: 50%;}
	.idx-section-5-pto-right { width: 42%;}
	
	.idx-section-1-pto-left { width: 50%;}
	.idx-section-1-pto-right { width: 42%;}
	
	.idx-section-2-top-title {font-size: 6.25vw;}
    .idx-section-2-top-content { width: 70%;}
	
	.idx-news-title { font-size: 30px; }
	
	.idx-section-6{background: url(../images/idx-section-6-bg.jpg) no-repeat top right;}
	.idx-section-6-pto {position: absolute;left: 50%;right: auto;bottom: 0%;width: 80%;transform: translateX(-50%);}
}
@media only screen and (max-width: 640px) {
	.btn01 a { width: 90px; height: 34px; padding-top: 8px; font-size: 15px;}
	
	.idx-section-1-slogon-txt { font-size: 34px; }
	
	.idx-section-3 { flex-direction: column; padding-top: 50px;}
	.idx-section-3 > div:nth-of-type(1) { width: 100%; order: 2;}
	.idx-section-3 > div:nth-of-type(2) { width: 100%; padding-left: 0px; padding-bottom: 30px; order:1;}
	
	.pro-name { font-size: 18px;}

	.idx-news-date { width: 100%;}
	.idx-news-name { width: calc(100% - 0px); padding-left: 0%;}
	
	.idx-news-section { padding: 40px 5% 40px 5%;}
}
@media only screen and (max-width: 570px) {
	.idx-section-2-top { height: 400px;}
	.idx-section-2-top-content { width: 80%;}
	.idx-section-2-top-title { font-size: 34px;}
	
}

@media only screen and (max-width: 414px) {
	.idx-section-5-slogon-txt { font-size: 30px; }
    .idx-section-5 {min-height: 350px; padding-bottom: 30px;}
	
	.idx-section-1-slogon-txt { font-size: 30px; }
	.idx-section-1 { padding: 150px 5% 30px 5%;}
	.btn01 { padding-top: 20px;}
	
	.idx-section-2-top { height: 360px;}

	.idx-pro-section > a { width: 100%; }
}

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

}