/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: '微軟正黑體', sans-serif; overflow-x: hidden; }
img {	border:0; }

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

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

* { /*margin:0; padding:0; list-style:none;*/
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

h1, h2, h3, h4, h5, h6 {font-family: '微軟正黑體', sans-serif; letter-spacing: 0.05rem;}

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

#content { font-size: 17px; line-height:26px; color: #333; padding-top: 100px; letter-spacing: 0.05rem;}
#content p{ /*padding-bottom: 30px;*/}

.banner { position: relative;}
.banner-rwd { display: none;}
.banner-iso { position: absolute; z-index: 3; top:20px; right: 20px;}
.banner-iso img { max-width: 130px;}

.loop .owl-dots { }
.loop .owl-item {position: relative; }
.loop .owl-item > div {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;}
.loop .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 40px); background:none !important;}
.loop .owl-prev { left:0px; }
.loop .owl-next { right:0px;}
.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.3;transition: all 0.4s ease-out 0s;width: 107px; height: 107px; background-size: contain; display: block;}
.loop .owl-prev:before { background-image:url(../images/left-arrow.png); content: ""; }
.loop .owl-next:before { background-image:url(../images/right-arrow.png); content: ""; }
.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: 20px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 30px !important; height: 5px !important; border-radius: 3px;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #eb5c22 !important; }

.banner-pto { width: 100%;}
.banner-slogon { position: absolute; z-index: 2; font-weight: bold; font-size: 4vw; color: #fff; letter-spacing: 1px;text-shadow: 0px 0px 8px #000;}

.idx-service-section { background: linear-gradient(0deg, #eeeef0 0%, #f9f9fb 100%); padding: 70px 20px;}
.title01 { line-height: 110%; text-align: center; padding-bottom: 15px; margin-bottom: 20px; font-size: 36px; font-weight: bold; position: relative;border-bottom: 1px solid #dcdcdc;}
.title01:after { content:"";position: absolute;left:calc(50% - 1.5em);bottom:-1px;width: 3em;height: 2px;background: #e03e25;}
.idx-service-section p {font-size: 17px; font-weight: 400; line-height: 26px; padding-bottom: 30px; margin: 0;}

.link-1 { text-align: center; margin-bottom: 35px;  }
.link-1 a { font-size: 15px; color: #fff; display: inline-block; position: relative;background: #e72828;padding: 0.3em 1em;border-radius: 6px;}
.link-1 a:after { content: ""; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: #0d5da8; transition: all 0.4s ease-out 0s;display: none;}
.link-1 a:hover:after { width: 100%;}
.link-1 a i { display: inline-block; font-size:14px;margin-left: -1em;position: absolute;top: 50%;transform: translateY(-50%);opacity: 0;transition: all 0.4s ease-out 0s;}
.link-1 a:hover{padding: 0.3em 2em 0.3em 0.7em;}
.link-1 a:hover i{margin-left: 10px;opacity: 1;}

.idx-service-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 30px;}
.idx-service-content > div:nth-of-type(1) { width: 85%; line-height: 0;border-radius: 10px; overflow: hidden;}
.idx-service-content > div:nth-of-type(1) img {  width: 100%;}
/*.idx-service-content > div:nth-of-type(2) { width: 34%; border-radius: 0 10px 10px 0; background: #194b7a; padding: 30px; color: #fff;}*/
.idx-service-title { text-align: center; padding: 0 0 20px 0; color: #194b7a;}
.idx-service-title2 { text-align: center; font-size: 22px; padding-bottom: 25px;color: #194b7a;}
.idx-service-info {list-style:none; display: flex; flex-direction: row; flex-wrap: wrap;justify-content: center; padding: 0; margin: 0; margin-top: 10px;}
.idx-service-info li {list-style:none; line-height: 26px; font-weight: 400; display: flex; flex-direction: row; flex-wrap: nowrap;padding:0 6px 12px 6px; margin: 0;}
.idx-service-info li > div:nth-of-type(1) { width: 34px; font-size:22px;}
.idx-service-info li > div:nth-of-type(2) { width: calc(100% - 34px); font-size: 22px;}

.idx-about-section { padding: 85px 20px 50px 20px;}
.idx-about-content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idx-about-content > div { margin-bottom: 25px;}
.idx-about-content > div:nth-of-type(1) { width: 252px; text-align: center;}
.idx-about-content > div:nth-of-type(2) { width: calc(100% - 252px); padding-left: 40px;}
.idx-about-title { padding-bottom: 10px; margin-bottom: 10px; font-size: 24px; font-weight: bold; line-height: 130%; position: relative;border-bottom: 1px solid #dcdcdc;}
.idx-about-title h1 { color: #a50e0b; font-size: 24px; font-weight: 600; line-height: 130%; letter-spacing: 0.05rem; padding: 0; margin: 0;}
.idx-about-title h1:after { content:"";position: absolute;left:0;bottom:-1px;width: 3em;height: 2px;background: #e03e25;}
.idx-about-content p {font-size: 17px; font-weight: 400; line-height: 26px; letter-spacing: 0.05rem; padding: 0; padding-bottom: 30px; margin: 0;}


.idx-about-ban { height: 410px; position: relative;}
.parallax__container{clip:rect(0,auto,auto,0);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:-100}
.parallax{background-position:top right !important;background-repeat:no-repeat;background-size:cover !important;position:fixed;top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}

.idx-pro-section { background: url(../images/idx-pro-bg.jpg) no-repeat top center; background-size: cover; padding: 100px 20px;}
.loop2 .owl-dots { }
.loop2 .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop2 .owl-prev { left:10px; }
.loop2 .owl-next { right:10px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;}
.loop2 .owl-prev:before { content:"\f104"; }
.loop2 .owl-next:before { content:"\f105"; }
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom: -50px; width: 100%; text-align: center !important; padding: 0 50px;}
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #868686 !important; width: 12px !important; height: 12px !important;}
.loop2 .owl-dots .owl-dot.active span, .loop2  .owl-dots .owl-dot:hover span { background: #eb5c22 !important; }

.txt01 { text-align: center; font-weight: 400; margin-top: 5px;}


.idx-contact-top { padding: 70px 20px 40px 20px; text-align: center; font-weight: 400;}
.btn01 { display: inline-block; vertical-align: middle; width: auto; line-height: 40px; border-radius: 5px; color: #fff; margin: 0 5px; background: #e72828;padding: 0 15px;}
.map { line-height: 0;}
.map iframe { width: 100%; height: 450px; border-width: 0;}

.loop3 {padding: 0 0px 20px 0;}
.loop3 .owl-dots { }
.loop3 .owl-nav .disabled { opacity: 0 !important;}
.loop3 .owl-item {position: relative; text-align: center; }
.loop3 .owl-item > div {}
.loop3 .owl-nav { position: absolute; top:calc(50% + 0px); width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 40px); background:none !important;}
.loop3 .owl-prev { left:0px; }
.loop3 .owl-next { right:0px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.6;transition: all 0.4s ease-out 0s;width: 70px; height: 70px; background-size: contain; display: block;}
.loop3 .owl-prev:before { background-image:url(../images/left.png); content: ""; }
.loop3 .owl-next:before { background-image:url(../images/right.png); content: ""; }
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: 10px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #ccc !important; width: 12px !important; height: 12px !important; border-radius: 3px;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #eb5c22 !important; }

.idx-vr360-section{width: 100%;max-width: 1550px;margin: 0 auto 60px auto;padding: 0 20px;}
.idx-vr360-section .slick-prev{left: -72px;width: auto;height: auto;z-index: 1;}
.idx-vr360-section .slick-next{right: -72px;width: auto;height: auto;z-index: 1;}
.idx-vr360-section .slick-prev:before{background: url('../images/vr-360-left.png')no-repeat;font-family: none;font-size: 0;width: 55px;height: 55px;display: block;background-size: cover;}
.idx-vr360-section .slick-next:before{background: url('../images/vr-360-right.png')no-repeat;font-family: none;font-size: 0;width: 55px;height: 55px;display: block;background-size: cover;}
.idx-vr360-section .idx-vr360-pic{transition: all 0.4s ease-out 0s;}
.idx-vr360-section .idx-vr360-pic:hover{opacity: 0.7;}

@media only screen and (max-width:  1279px) {
	#content { padding-top: 70px; font-size: 16px; line-height: 24px;}
    .idx-service-section p, .idx-about-content p {font-size: 16px; line-height: 24px;}
    .idx-service-info li {line-height: 24px;}
	
	.banner { }
	.banner-rwd { display: block;}
	.banner-pc { display: none;}
	.banner-slogon { font-size: 6vw;}
}
@media only screen and (max-width: 980px) {
	.idx-service-section { padding: 30px 20px;}
	.title01 { font-size: 24px; padding-bottom: 15px;}
	
	.idx-service-content > div:nth-of-type(1) { width: 100%; border-radius: 10px 10px 0 0;}
	.idx-service-content > div:nth-of-type(2) { width: 100%; border-radius: 0 0 10px 10px; padding: 20px;}
	
	.idx-about-section { padding: 45px 20px 0px 20px;} 
	.idx-about-content > div:nth-of-type(1) { width: 100%;}
	.idx-about-content > div:nth-of-type(2) { width: 100%; padding-left: 0px;}

	.idx-pro-section { padding-top: 60px;}
	
	.idx-contact-top  { padding-top: 50px;}
	
	.loop3 .owl-prev, .loop3 .owl-next { top:calc(50% - 20px);}
	.loop3 .owl-prev { left:-25px; }
	.loop3 .owl-next { right:-25px;}
	.loop3 .owl-prev:before, .loop3 .owl-next:before { width: 40px; height: 40px; }
	.loop3 .owl-dots { display: block;}
}
@media only screen and (max-width: 768px) {
	
	.banner-iso img { max-width: 80px;}
	
	.idx-vr360-section{padding: 0 20px;}
	.idx-vr360-section .slick-prev:before{width: 45px;height: 45px;}
	.idx-vr360-section .slick-next:before{width: 45px;height: 45px;}
	.idx-vr360-section .slick-prev{left: -53px;}
	.idx-vr360-section .slick-next{right: -53px;}
}
@media only screen and (max-width: 640px) {
	
}
@media only screen and (max-width: 570px) {
	.loop3 .owl-prev:before, .loop3 .owl-next:before  { font-size:40px; color: #000;}
	
	.idx-vr360-section{padding: 0 20px;}
	.idx-vr360-section .slick-prev:before{width: 35px;height: 35px;}
	.idx-vr360-section .slick-next:before{width: 35px;height: 35px;}
	.idx-vr360-section .slick-prev{left: 7px;}
	.idx-vr360-section .slick-next{right: 7px;}
}

@media only screen and (max-width: 414px) {
	.idx-service-info li { min-width: 190px;}
	

}

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

}