/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Arial','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:1280px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 18px; line-height:1.8; color: #333; letter-spacing: 0.05rem; font-weight: 400; padding-top: 120px; position: relative;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 18px;line-height:1.8;  font-weight: 400;}
p, td, li, label { font-size: 18px;line-height:1.8;  font-weight: 400;}

#content:after { content: ""; position: absolute; z-index: -2; background: #efefef; top: 0; left: 0; width: 100%; height: 570px; clip-path: polygon(0% 0, 100% 0%, 100% calc(100% - 210px), 0 100%);}

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

.main-content-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -3; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;}
.main-content-bg > div { background: #ededed; width: 1px;}

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

.banner { overflow: hidden; clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 calc(100% - 122px)); height: 350px;}
.banner img { object-fit: cover; width: 100%; height: 100%;}
.banner-pc { }
.banner-mobile { display: none;}

#path { position: relative; margin-top: -50px; padding-bottom: calc(20px + 1%);}
#path ul { margin: 0; padding: 0; }
#path li { display: inline-block; vertical-align: top; font-size: 15px; line-height: 1.3; letter-spacing: 0rem; padding-right: 25px; position: relative;}
#path li:after { content:""; position: absolute; width: 10px; height: 2px; background: #666666; top:50%; transform: translateY(-50%); right: 5px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333; }
#path li a:hover { color: #333; opacity: 0.5;}
#path li:last-child a { color: #333;}

/*about*/
.title01 { font-family: 'Noto Serif TC', sans-serif; line-height: 1.4; font-size: clamp(22px, 2.3vw, 32px); font-weight: 700; padding-bottom: calc(20px + 1%); margin: 0;}
.title01 span{ display: block;  color: #062198; padding-bottom: 8px; line-height: 1.5; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700;}

.about-content { position: relative; z-index: 2; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.about-content > div { width: calc(50% - 30px);}

.about-pto {  padding-bottom: calc(20px + 4%); position: relative; margin-top: -60px;}

/*service*/
.idx-pro-section { padding-bottom:calc(25px + 4%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.idx-pro-section > div { width: 31.5%;}
.idx-pro-pto { line-height: 0; margin-bottom: 18px; text-align: center;}
.idx-pro-data { }

.service-content-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-top: 20px; padding-bottom: 2.5%;}
.service-content-1 > div { width: 48.5%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: calc(20px + 2%);}
.service-content-1 > div > div:nth-of-type(1) { width: 35px; height: 35px; border-radius: 100%; background: #22225a;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content:center; font-size: 22px; color: #fff; font-weight: 700; line-height:1;}
.service-content-1 > div > div:nth-of-type(2) { width: 170px; text-align: center; padding: 0 10px;}
.service-content-1 > div > div:nth-of-type(2) img { max-width: 92px; max-height: 98px;}
.service-content-1 > div > div:nth-of-type(3) { width: calc(100% - 35px - 170px); line-height: 1.5;}

.content-en { margin-bottom: 10px;}

.service-slogon-1 { margin-bottom: calc(15px + 3.5%); background: #062198; text-align: center; line-height: 1.4; font-weight: 700; font-size: clamp(20px, 2.1vw, 30px); padding: 20px;clip-path: polygon(28px 0, 100% 0%, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0% 100%, 0% 28px); color: #fff; }

.title02 { color: #062198; font-weight: 700;font-size: clamp(20px, 2.1vw, 30px); padding-bottom: calc(15px + 1%); line-height: 1.4;}

.service-content-2 { list-style: none; margin: 0; padding: 0 0 calc(20px + 4%) 0;}
.service-content-2 li { padding: 0 0 calc(15px + 1%) 38px; margin: 0; position: relative;}
.service-content-2 li:before { content: ""; position: absolute; top: 10px; left: 15px; width: 7px; height: 15px; background: #000; clip-path: polygon(0% 0, 100% 50%, 0 100%); }
.service-content-2-title { font-weight: 700;font-size: clamp(19px, 1.3vw, 22px); line-height: 1.5; }

@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px;}
	#content, #content p, p, td, li, label { font-size: 16px; line-height: 1.6;}

	
}

@media only screen and (max-width: 980px) {
	.banner { clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%); height: 180px;}
	.banner-pc { display: none}
	.banner-mobile { display: block;}
	
	#path { margin-top: 20px; padding-bottom: calc(10px + 1%);}
	#path li { font-size: 13px;}
	
	.about-content > div { width: 100%;}
	.about-content > div:nth-of-type(1) { padding-bottom: 20px;}
	.about-pto {  margin-top: 30px;}
	
	.service-content-1 > div { width: 100%; }
}
@media only screen and (max-width: 768px) {
	.main-content-bg > div:first-child, .main-content-bg > div:last-child { display: none;}
	
	
}
@media only screen and (max-width: 640px) {
	.idx-pro-section > div { width: 100%; padding-bottom: 30px;}
	.idx-pro-pto { margin-bottom: 10px;}
	.idx-pro-data { text-align: center;}
}
@media only screen and (max-width: 570px) {
	.service-content-1 > div { flex-direction: column;}
	.service-content-1 > div > div:nth-of-type(2) { width: 100px; padding-left: 5%; padding-right: 5%; padding-top: 10px; padding-bottom: 20px; }
	.service-content-1 > div > div:nth-of-type(2) img { width: 100%; }
	.service-content-1 > div > div:nth-of-type(3) { width: 100%; text-align: center;}
	
}

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

}

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

}