/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative;}
body:before {	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 256px; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
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-Box2 { max-width:1400px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 18px; line-height:30px; color: #333; letter-spacing: 0.1rem; font-weight: 400; padding-top: 0px;}
#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%;}

.banner { 
	background-image: linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 100%), url("../images/banner-bg.jpg");
	background-position: center center, center center;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, cover;
	position: relative; height: 100vh; margin-bottom: 95px;}
.banner-left { position: absolute; top: 232px; left: 0; padding: 20px 0 0 96px; }
.banner-left:after {content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 250px; background: #615d65; }
.banner-left h1 { font-size: calc(10px + 2vw); font-weight: 500; letter-spacing: 0.1rem; margin: 0; padding: 0; line-height: 100%; color: #222;}
.banner-left h1 b { display: block; font-weight: 700; line-height: 85%; padding-bottom: 18px; font-size:calc(50px + 3.5vw);}
.banner-bottom { position: absolute; bottom: -28px; left: 0; width: 85%; height: 150px; background: #615d65; clip-path: polygon(0% 0, 60px 0%, 60px 90px, 100% 90px, 100% 100%, 0 100%); }
.banner-right { position: absolute; bottom: 25%; right: 0; width: 51%; height: 180px; background: #615d65; opacity: 0.8; }

.banner-box { position: absolute; z-index: 4; right: 4%; top:20%; width: 52%;}
.banner-box:after { position: absolute; content: ""; width: 100%; height: 100%; top:-10%; left: -7%; border: 10px solid rgba(97,93,101,.7); }

.mouse {
	width: 50px;
	height: 90px;
	border: 3px solid #333;
	border-radius: 60px;
	position:absolute; bottom: 0; left: calc(50% - 25px); z-index: 10; cursor: pointer; display: block; transform: scale(0.6); background: #fff;}
.mouse:before {
		content: '';
		width: 20px;
		height: 15px; background: #222;clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		/*background-color: #333;
		border-radius: 50%;*/
		opacity: 1;
		animation: wheel 1.2s infinite;
		-webkit-animation: wheel 1.2s infinite;
	}
@keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}



.loop { position: relative; z-index: 5;}
.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: 35px; height: 35px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff;}
.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: -55px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #bebebe !important; width: 30px !important; height: 8px !important; border-radius: 4px;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #615d65 !important; }

.main-info { padding: 0 5% 60px 5%; text-align: center; color: #333; font-size: 24px; line-height: 160%;}
.main-info > span { display: block; line-height: 75%; opacity: 0.2; font-size:calc(40px + 3vw); font-weight: 100; text-transform: uppercase; letter-spacing: 0;}
.main-info > div { position: relative; z-index: 2;}


.accordion { width: 100%; height: 500px; overflow: hidden; margin: 0px 0 20px 0;}
.accordion ul { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin: 0; padding: 0;}
.accordion ul li { padding: 0 0px 0 0; display: table-cell; vertical-align: bottom; position: relative; width: calc(50% - 10px); height: 100%; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease;}
.accordion ul li > div { display: block; overflow: hidden; width: 100%;height: 100%;}
.accordion ul li > div a { display: block; height: 100%; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease;}
/*.accordion ul li div a * { opacity: 1; text-align: center; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 400ms ease; transition: all 400ms ease;}*/
/*.accordion ul li div a h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 42%;}
.accordion ul li div a p { top: 42%; font-size: 13.5px;}*/
.accordion ul li > div {background-size: cover; background-position: top center; }
.accordion ul li:nth-child(1) > div { background-image:url("../images/idx-search-pto-1.jpg"); background-size: cover; }
.accordion ul li:nth-child(2) > div { background-image:url("../images/idx-search-pto-2.jpg"); background-size: cover; }
.accordion ul:hover li { width: calc(40% - 20px); }
.accordion ul:hover li:hover { width: 60%; }
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0); }
/*.accordion ul:hover li:hover a * { opacity: 1; -webkit-transform: translateX(0);transform: translateX(0);}*/

.idx-search-box { background: rgba(255,255,255,.7); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); position: absolute; top:30%; left: 0;z-index: 3; padding: 40px 70px; width: auto !important;}
.idx-search-box > div:nth-of-type(1) { font-size: 30px; font-weight: 300; color: #333; line-height: 100%;}
.idx-search-box > div:nth-of-type(1) b { font-size: 50px; font-weight: 500;line-height: 100%; }
.idx-search-box > div:nth-of-type(2) { font-size: 18px; font-weight: 300;line-height: 100%; padding: 12px 0 15px 0; color: #777; text-transform: uppercase;}
.idx-search-box > div:nth-of-type(3) { display: block; width: 120px; line-height: 45px; text-align: center; border: 2px solid #615d65; color: #615d65 !important; font-weight: 500; font-size: 16px;transition: all 0.4s ease-out 0s;}
.idx-search-box > div:nth-of-type(3):hover { color: #fff !important; background: #615d65;}

@media only screen and (max-width: 1199px) {
	#content {  }
	#content p{ }
	p, td, li, label { }
	
	.banner { height: auto; margin-bottom: 80px;}
	.banner-left { top: 15%; padding: 20px 0 0 50px;  z-index: 6;}
	.banner-left:after { width: 30px; height: 200px;}
	.banner-bottom { height: 60px; bottom: -14px;  clip-path: polygon(0% 0, 30px 0%, 30px 30px, 100% 30px, 100% 100%, 0 100%); }
	.banner-left h1 { font-size: calc(10px + 1vw); }
	.banner-left h1 b { font-size:calc(50px + 1.5vw);}
	.banner-box { position: relative; right: auto; top:auto; width: 100%;}
	.banner-box:after { display: none;}
	
	.mouse { display: none;}
	
	.accordion { height: auto; margin-bottom: 0; }
	 .accordion ul { flex-direction: column;}
	 .accordion ul li { padding: 0; height: auto; margin-bottom: 20px;}
	 .accordion ul li > div { height: 350px;transition: all 400ms ease;}
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {position: relative;display: table;table-layout: fixed;width: 100%;-webkit-transition: none;transition: none;}
	
	.idx-search-box { padding: 30px 30px; }
	.idx-search-box > div:nth-of-type(1) { font-size: 20px; }
	.idx-search-box > div:nth-of-type(1) b { font-size: 30px; }
	.idx-search-box > div:nth-of-type(2) { font-size: 15px;}
	.idx-search-box > div:nth-of-type(3) { width: 100px; line-height: 40px; }
}



@media only screen and (max-width: 980px) {
	.main-info { font-size: 18px; line-height: 150%; }
	.main-info > span { font-size:calc(30px + 3vw); }
	
}
@media only screen and (max-width: 768px) {
	
}
@media only screen and (max-width: 640px) {
	.banner { margin-bottom: 70px;}
	.main-info > span { line-height: 90%;}
	
	
}
@media only screen and (max-width: 570px) {
	.banner { }
	.banner-left { top: auto; bottom: 10%; padding-left: 30px; padding-top: 10px;}
	.banner-left:after { height: 80px; width: 15px;}
	.banner-left h1 { color: #fff;font-size: calc(7px + 1vw); }
	.banner-left h1 b { font-size:calc(20px + 1vw); padding-bottom: 8px;}
	.banner-bottom { display: none;}
}

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

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