/* CSS Document */

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

#content { font-size: 24px; line-height:1.8; color: #333; letter-spacing: 0.1rem; font-weight: 300;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 24px;line-height:1.8;  font-weight: 300;}
p, td, li, label { font-size: 24px;line-height:1.8; font-weight: 300;}

.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-pc, .banner-mobile { line-height: 0;}
.banner-pc img, .banner-mobile  img { width: 100%;}
.banner-pc { }
.banner-mobile { display: none;}

.main-box { padding-top: calc(25px + 5%); padding-right: 5%; padding-left: 18%;
background-image: url(../images/main-bg-top.png), url(../images/main-bg-bottom.png);
background-position: top center, bottom right;
background-repeat: repeat-x, no-repeat;
background-size: auto, 100%;
}

.idx-section-1 { padding-bottom:calc(20px + 5%); }

.idx-section-title { padding-bottom:calc(8px + 1%); display: flex; flex-direction: column; flex-wrap: nowrap;}
.idx-section-title > div:nth-of-type(1) { padding-bottom: 5px; color: #966b24; font-size: 36px; line-height: 1.4; }
.idx-section-title > div:nth-of-type(2) img { width: 248px;}

.idx-section-1-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-section-1-content > div:nth-of-type(1) { width: 27%; }
.idx-section-1-content > div:nth-of-type(1) > span { font-size: 12px; transform-origin: 0 50%; transform: scale(1); font-family: "Open Sans", sans-serif; display: block; padding-top: 5px;}
.idx-section-1-content > div:nth-of-type(2) { width: 73%; padding-left: 5%;}

.idx-section-1-content-top { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 20px;}
.idx-section-1-content-top > div { width: 50%; padding-bottom: 20px;}
.idx-section-1-content-top > div:nth-of-type(2) { font-size: 15px; font-family: "Open Sans", sans-serif; font-weight: 300; letter-spacing: 0.05rem; line-height: 2.88;}
.idx-section-1-content-top > div:nth-of-type(2) > span { display: block; text-align: right;  line-height: 2.5;font-size: 13px; }

.btn01 { width: 135px; height: 35px; margin: 0 0 0 auto; border: 1px solid #333; border-radius: 18px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; cursor: pointer;}
.btn01:hover { background: #333; color: #fff !important;}
.btn01 > span { font-size: 16px; font-family: "Open Sans", sans-serif; letter-spacing: 0;}
.btn01 > span:nth-of-type(2) { display: none;}

.idx-section-1-more { display:none; height: 0;transition: all 0.4s ease-out 0s; }
.idx-section-1-more-open { display:block; height: auto; }

.btn01-more-open > span:nth-of-type(1) { display: none;}
.btn01-more-open > span:nth-of-type(2) { display: block;}

.demo-bottom-section { padding-bottom:calc(20px + 5%); }

.work-section-box { margin-bottom:calc(20px + 4%); position: relative;}

.work-content { position: absolute; z-index: 4; top:50%; transform: translateY(-50%); background: rgba(255,255,255,.8); left: -16%; padding: calc(25px + 2%) calc(25px + 1%); max-width: 520px;}

.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; bottom: 70px; right: 30px; width: 90px; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:rgba(255,255,255,.9) !important; border-radius: 100% !important; width: 35px !important; height: 35px !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: 1;transition: all 0.4s ease-out 0s;width: 12px; height: 12px; background-size: contain; display: inline-block; border-width: 1px 1px 0 0; border-style: solid; border-color: #222; position: relative; top:-7px;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); left: 3px; }
.loop .owl-next:before { content: ""; transform: rotate(45deg); right: 3px;}
.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: 15px; width: 100%; text-align: center !important; padding: 0 0px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #bbb !important; width: 40px !important; height: 6px !important; border-radius: 3px;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #575c4b !important; }

.info-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.info-section > div { width: 48%;}
.info-data { line-height: 2.2; font-size: 18px; }
.info-data ul { padding: 0; margin: 0; list-style: none;}
.info-data li { font-size: 18px;line-height: 2.2; position: relative; padding: 0 0 0 20px;}
.info-data li:before { content: ""; position: absolute; width:4px; height:4px; border-radius: 100%; left: 6px; top:19px; background: #222; display: block;}
.info-title { display: inline-block; font-weight: 700; padding-right: 16px;}
.info-time { font-size: 20px;font-family: "Open Sans", sans-serif; font-weight: 500; }
.info-time-2 { font-size: 18px;font-family: "Open Sans", sans-serif; font-weight: 500; }
.info-social { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 300px; padding-top: 10px;}
.info-social > a { display: inline-block; width: 33px; opacity: 0.5;}
.info-social > a:hover { opacity: 1;}

.info-map { max-width: 300px; width: 100%; height: 165px;}
.info-map iframe { width: 100%; border-width: 0; height: 100%;}

.news-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -3.5%;}
.news-list > div { width: calc(25% - 3.5%); margin-right: 3.5%; margin-bottom: 30px; }
.news-list-pto { display: block; padding-bottom: 100%; margin-bottom: 15px;}
.news-list-tag { text-align: center;  font-size: 15px; color: #909090;}
.news-list-name { font-weight: 500; text-align: center; line-height: 1.3; min-height: 80px; margin-bottom: 8px; font-size: 22px;}
.news-list-date { text-align: center;  font-size: 17px;}

.news-content-section  { display: none}
.news-content  {display: flex; flex-direction: row; flex-wrap: wrap; padding: 30px;}
.news-content > div:nth-of-type(1)  {width: 40%;}
.news-content > div:nth-of-type(2)  {width: 60%; padding-left: 5%; letter-spacing: 0.1rem; font-size: 24px;}
.news-content > div:nth-of-type(2) .news-list-name  { min-height: inherit;}

.news-section-box { }
.news-section { display: flex; flex-direction: row; flex-wrap: nowrap; padding-bottom: 18px;}
.news-section > div { font-size: 18px; color: #929292; width: 126px;}
.news-section > a { font-size: 18px; color: #333; width: calc(100% - 126px); display: block;}
.news-section > a:hover { color: #966b24 !important;}

.aling-left { text-align: left !important;}

.contact-section { padding-bottom:calc(40px + 10%);width: 50%; }
.contact-form { margin: 0 auto calc(25px + 2.5%) 0;}
.contact-form-choice { padding-bottom: 10px;display: flex; flex-direction: row; flex-wrap: wrap; align-items:center }
.contact-form-choice > div { margin-right: 22px; margin-bottom: 10px; }
.contact-form-choice > div:nth-of-type(1) { width: 120px; text-align: justify; text-align-last: justify;}
.contact-form-choice > div:nth-of-type(2) { display: flex; flex-direction: row; flex-wrap: nowrap;}
.contact-form-choice > div:nth-of-type(2) > a { margin-right: 22px; color: #fff !important; border-radius: 5px; background: #966b24; line-height: 1.5; width: 144px; cursor: pointer; letter-spacing: 1.5rem; display: block; padding-left: 40px; padding-bottom: 2px;}
.contact-form-choice > div:nth-of-type(2) > a:hover, .contact-form-choice > div:nth-of-type(2) > a.current { background: #333;}

.contact-form-layout { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px;}
.contact-form-layout input[type="text"], .contact-form-layout input[type="phone"], .contact-form-layout input[type="email"], .contact-form-layout input[type="date"] { height:60px;margin-bottom: 10px; width: 100%; border-radius: 10px; border: 1px solid #808080; padding: 10px 14px; color: #666; font-size: 20px; background: transparent; font-weight: 300;}
.contact-form-layout select{ margin: 0 0 0px 0;  width:100%; max-width: 100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 20px) 25px; background-size: 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent;  border-width:1px; border-style: solid; border-color: #808080; color:#666; font-family: 'Noto Sans TC', sans-serif;  padding:8px 40px 8px 14px;  line-height: 40px; border-radius: 10px;font-size: 20px; font-weight: 300;}
.contact-form-layout option { padding:1px 5px;}
.contact-form-layout select::-ms-expand {
    display: none;
}

.contact-form-65 { width: 66%;}
.contact-form-32 { width: 32%;}
.contact-form-48 { width: 49%;}

.contact-btn { width: 135px; height: 42px; margin: 0 auto 0 0; border: 1px solid #333; border-radius: 18px; cursor: pointer; font-size: 20px; background: transparent; letter-spacing: 0;padding-left: 0px;transition: all 0.4s ease-out 0s; text-align: center;}
.contact-btn:hover { background: #333; color: #fff !important;}

.bottom-section { }
.bottom-section-logo { padding-bottom: calc(15px + 1%);}
.bottom-section-logo img { width: 215px;}
.bottom-section-info { display: flex; flex-direction: row; flex-wrap: wrap; letter-spacing: 0.05rem; line-height: 1.4; padding-bottom: calc(25px + 2%);}
.bottom-section-info > span { padding: 0 18px 8px 0; font-size: 12px;}

@media only screen and (max-width: 1365px) {
	.idx-section-1-content > div:nth-of-type(1) { width: 100%; max-width: 350px; padding-bottom: 25px;}
	.idx-section-1-content > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	
	.info-section > div { width: 100%;}
	.info-social { padding-bottom: 35px;}
	
	.news-list-name  { font-size: 19px;}
	.news-content > div:nth-of-type(2) { font-size: 19px;}
}

@media only screen and (max-width: 1279px) {
	#content { font-size: 19px;line-height:1.6; }
	#content p{ font-size: 19px;line-height:1.6;}
	p, td, li, label { font-size: 19px;line-height:1.6;}
	
	.main-box { padding-left: 5%;}
	.idx-section-1-content-top > div:nth-of-type(2) { line-height: 2;}
	
	.idx-section-title > div:nth-of-type(1) { font-size: 26px;}
	
	.work-content { position: inherit; top:auto; transform: translateY(0%); left: auto; max-width: 100%;}
	
	
	.loop .owl-nav { bottom: 50px; right: 10px; }
	.loop .owl-prev:before, .loop .owl-next:before { top:-2px;}

}



@media only screen and (max-width: 980px) {
	.banner-pc { display: none}
	.banner-mobile { display: block;}
	
	.idx-section-1-content-top > div { width: 100%; }
	.idx-section-1-content-top > div:nth-of-type(2) { line-height: 1.6;}
	
	.btn01 { width: 100px; height: 35px;}
	.btn01 > span { font-size: 14px;}
	

	.news-content > div:nth-of-type(1)  {width: 100%; margin-bottom: 25px;}
	.news-content > div:nth-of-type(2)  {width: 100%; padding-left: 0%;}
	
	.news-list > div { width: calc(50% - 3.5%);  }
	
	
	.contact-section { padding-bottom:calc(40px + 30%);width: 100%; }
	.contact-form-layout input[type="text"], .contact-form-layout input[type="phone"], .contact-form-layout input[type="email"] { font-size: 18px;}
	.contact-btn { font-size: 18px;}
	
}
@media only screen and (max-width: 768px) {
	.contact-form-65 { width: 100%;}
	.contact-form-32 { width: 100%;}
	.contact-form-48 { width: 100%;}
	
	.contact-form-layout { margin-bottom: 0;}
	.contact-btn { margin-top: 10px;}
}
@media only screen and (max-width: 640px) {
	
}
@media only screen and (max-width: 570px) {
	.news-list > div { width: calc(100% - 3.5%);  }
	
	.contact-form-choice > div:nth-of-type(2) > a { margin-right: 15px; width: 110px; padding-left: 32px; letter-spacing: 0.6rem; }
	
	.news-section { flex-direction: column;}
	.news-section > a { width: calc(100% - 0px); }
}

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

}

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

}