/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; }
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: 15px; line-height:30px; color: #333; letter-spacing: 0; font-weight: 400; padding-top: 127px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 15px;line-height:30px;  font-weight: 400;}
p, td, li, label { font-size: 15px;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%;}

.banner { }
.banner-mobile { display: none;}
.loop .owl-dots { }
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; top:calc(50% - 40px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop .owl-prev { left:30px; }
.loop .owl-next { right:30px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.5;transition: all 0.4s ease-out 0s;width: 50px; height: 50px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: rgba(255,255,255,1);}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); }
.loop .owl-next:before { content: ""; transform: rotate(45deg);}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 10px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #7e69a0 !important; width: 10px !important; height: 10px !important;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #2193e1 !important; }

.box-pc {
	width: 100%;
	padding-top: 41.55%;
	position: relative;
}
.box-mobile {
	width: 100%;
	padding-top: 63.2%;
	position: relative;
}
.box-in {
	position: absolute !important;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.idx-about-bg { background: url("../../webp/images/idx-about-bg.webp") no-repeat bottom center; background-size: cover; padding: 65px 5% 95px 5%;}

.idx-about-section { position: relative; padding-bottom: 160px;}
.idx-about-pto { position: absolute; top:0;right: 0; width:100%; max-width: 63%;}
.title01 { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding-bottom: 45px;}
.title01 > div:nth-of-type(1), .title01 > div:nth-of-type(3) { line-height: 0;}
.title01 > div:nth-of-type(2) { font-family: 'Playfair Display', serif; font-size: 30px; padding: 0 20px; text-transform: uppercase;}

.idx-about-content { max-width: 47%; margin: 0 auto 0 0; position: relative; z-index: 3;}
.title02 { padding-bottom: 32px; }
.title02 h1 { font-family: 'Playfair Display', serif; font-size: 36px; line-height: 120%; padding: 0; margin: 0;}

.first-font { color: #4a2780; font-size: 30px;}
.btn01 { display: block; border: 1px solid #2193e1; width: 240px; line-height: 55px; text-align: center; padding: 4px;transition: all 0.4s ease-out 0s; }
.btn01:hover { padding:0; }
.btn01 a { display: block; width: 100%; line-height: 45px; text-align: center; background: #2193e1; font-size: 15px; color: #fff !important; }

.idx-about-section-2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.idx-about-section-2 > div { width: 30%; border-radius: 10px; border: 1px solid #b2cddf; background: rgba(255,255,255,.5); text-align: center; padding: 50px 2%;}
.idx-about-icon { width: 115px; height: 115px; border-radius: 100%; border: 1px solid #e2e2e2; margin: 0 auto 25px auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;}
.idx-about-data { line-height: 28px;}
.title03 { font-family: 'Playfair Display', serif; font-size: 24px; margin-bottom: 12px; padding-bottom: 35px; background: url("../images/icon-1.png") no-repeat bottom center;}

.idx-service-bg { background: url("../images/idx-service-bg.jpg") no-repeat bottom center; background-size: cover; }
.idx-service-bg .btn01, .idx-application-bg .btn01 { margin: 35px auto 0 auto;}
.idx-service-section-1 { max-width: 612px; margin: 0 auto 35px auto; text-align: center;}
.idx-service-section-1 .title01 { justify-content: center;}

.loop2 { padding-bottom: 50px;}
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:calc(65% - 0px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 20px); background:#fff !important; width: 40px; height: 40px; margin: 0 !important; border-radius: 100% !important; border: 1px solid #dcdcdc !important; transform-origin: 50% 50%;transition: all 0.4s ease-out 0s;}
.loop2 .owl-prev { left:-50px; }
.loop2 .owl-next { right:-50px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 10px; height: 10px; background-size: contain; display: inline-block; border-width: 2px 2px 0 0; border-style: solid; border-color: #8b8b8b; position: relative; top:-2px;}
.loop2 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 2px; }
.loop2 .owl-next:before { content: ""; transform: rotate(45deg); right: 3px;}
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { opacity: 0.5;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom: 0px; left: 0; width: 100%; text-align: center !important; padding: 0 50px; }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #7e69a0 !important; width: 12px !important; height: 12px !important;}
.loop2 .owl-dots .owl-dot.active span, .loop2  .owl-dots .owl-dot:hover span { background: #2193e1 !important; }

.idx-service-pto-box { padding: 0 10%;}
.idx-service-pto { padding-bottom: 100%; display: block; margin-bottom: 40px;}
/*.idx-service-pto img { max-width: 270px;}*/
.idx-service-list { border-right: 1px solid #dddddd; padding: 5px 4% 15px 4%; }
.idx-service-title { text-align: center; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 22px; padding-bottom: 24px;}
.idx-service-info { color: #666; line-height: 24px;}
.idx-service-link { display: flex; flex-direction: row; flex-wrap: wrap; }
.idx-service-link > a { display: block; width: 50%; padding-right: 15px; color: #7c7b7b; line-height: 120%; padding-bottom: 15px; }
.idx-service-link > a:hover { color: #2193e1; }

.idx-application-bg { background: url("../images/idx-application-bg.jpg") no-repeat bottom center; background-size: cover; }
.idx-application-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.idx-application-list > a { display: block; width: calc(25% - 17px); margin-bottom: 34px;}
.idx-application-pto { margin-bottom: 20px; padding-bottom: 129%;}
.idx-application-title { text-align: center; color: #000000; font-size: 21px; font-weight: 400; line-height: 130%;}

.idx-contact-bg { background: #439bd7; padding: 20px 5%;}
.idx-contact-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.idx-contact-info { font-family: 'Playfair Display', serif; color: #fff; font-size: 22px;}
.idx-contact-btn { display: block; width: 270px; line-height: 60px; text-align: center; background: #fff; color: #3ca0e4 !important; font-size: 18px; font-family: 'Poppins', sans-serif;}

@media only screen and (max-width: 1279px) {
	#content { padding-top: 90px;}
	
	.idx-about-bg { padding: 55px 5% 45px 5%;}
	.idx-about-content { max-width: 100%;}
	.idx-about-pto { position: relative; top:auto;right: auto; width:100%;max-width:inherit; text-align: right;}
	.title01 { padding-bottom: 30px;}
	.title01 > div:nth-of-type(2) { font-size: 25px; }
	.title02 h1 { font-size: 30px; }
	
	.idx-about-section { padding-bottom: 20px;}
}

@media only screen and (max-width: 980px) {
	#content, #content p, p, td, li, label { font-size: 15px; line-height:30px; }

	.banner { display: none}
	.banner-mobile { display: block;}
	
	.idx-about-section-2 > div { width: 100%; margin-bottom: 25px; padding: 40px 4%;}
	
	.loop2 { padding-left: 50px; padding-right: 50px;}
	.loop2 .owl-prev { left:0px; }
	.loop2 .owl-next { right:0px;}
	
	.idx-application-list > a { width: calc(50% - 10px); margin-bottom: 20px;}
	.idx-application-title { font-size: 18px;}
	
	.idx-contact-section { flex-direction: column; justify-content: center; }
	.idx-contact-info{padding-bottom: 20px; text-align: center;}
	.idx-contact-btn  { width: 200px; line-height: 44px; font-size: 16px;}
}
@media only screen and (max-width: 768px) {
	.idx-service-pto-box { padding: 0 5%;}
	.idx-service-link > a {  width: 100%; padding-right: 0px; }
	
}
@media only screen and (max-width: 640px) {
	
}
@media only screen and (max-width: 570px) {
	.idx-service-list { border-width: 0;}
}

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

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

}