/* CSS Document */

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

#content { font-size: 17px; line-height:180%; color: #111; letter-spacing: 1px; font-weight: 300; padding-top: 100px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 17px;line-height:180%;  font-weight: 300;}
p, td, li, label { font-size: 17px;line-height:180%;  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%;}

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

.width-1470 { max-width:1470px; }

header { background: #666 !important;}

#path { padding: 8px 0}
#path ul { margin: 0; padding: 0 0;line-height: 1.3;}
#path li { display: inline-block; vertical-align: top; font-size: 14px; font-weight: 300;}
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #111; }
#path li a:hover { opacity: 0.6;}
#path li:last-child a { color: #111;}

.font-size-24 {font-size:clamp(20px, 1.9vw, 24px) !important; line-height: 1.3;}
.font-size-36 {font-size:clamp(28px, 3.1vw, 36px) !important; line-height: 1.3;}
.font-size-50 {font-size: clamp(30px, 4vw, 50px) !important;line-height: 1.3;}

/*about*/
.idx-about-section-bg { background: #e1e1e1; padding: calc(20px + 4%) 54px; position:relative;}
.idx-about-section-bg:before { background: #e8e8e8; position:absolute; content:""; top: 0; height: 66%; width: calc(100% - 108px);}

.idx-about-section { position:relative; z-index: 3;}
.idx-about-section-1 { padding-bottom: calc(20px + 4%); }
.idx-about-section-1 .content-Box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idx-about-section-1 .content-Box > div:nth-of-type(1) { width: 33%; padding-right: 5%;}
.idx-about-section-1 .content-Box > div:nth-of-type(2) { width: 67%;}

.title-1 {font-family: 'Jost', sans-serif;color: rgb(51, 51, 51);font-size: clamp(30px, 4vw, 50px);line-height: 100%;font-weight: 600;display: flex;align-items: flex-start;flex-direction: column; padding-bottom: 10px;}
.title-1 span {color: rgb(183, 149, 58); font-size: clamp(24px, 2.5vw, 30px); display: block;}

.title-2 { font-weight: 300; font-size: 20px; padding: 0; margin: 0; }

.idx-about-section-2 { position: relative; max-width: 1600px; margin: 0 auto calc(20px + 4%) auto;}
.idx-about-section-2 img { object-fit: cover; width: 100%; height: 100%;}
.idx-about-section-2-content { position: absolute; bottom: 12%; right: 8%; color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.idx-about-section-2-content > span { display: block; font-size: 20px; padding-bottom: 15px;}
.idx-about-section-2-content > div { font-family: 'Jost', sans-serif; font-size:clamp(28px, 3.1vw, 36px); font-weight: 400;}
.idx-about-section-2-content > div > span { display: block; font-size:clamp(18px, 1.9vw, 24px); font-weight: 300; padding-top: 15px; line-height: 1.3;}

/*blog*/
.blog-section { padding: calc(20px + 3%) 0  calc(20px + 4%) 0; display: flex ;flex-direction: row; flex-wrap: wrap;}
.blog-section > div:nth-of-type(1) { width: 220px;}
.blog-section > div:nth-of-type(2) { width: calc(100% - 220px); padding-left: 5%;}
.blog-section .title-2 { margin-bottom: 12px; font-weight: 500;}

.blog-title { padding: 0 0 15px 0; margin: 0; font-weight: 700;}
.blog-search-bar { color: #999; border: 1px solid #ccc; font-size: 14px; background: #fff; padding:5px 10px; display: flex ;flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 20px; border-radius: 23px;}
.blog-search-bar input { width: calc(100% - 30px); border-width: 0; background: none; letter-spacing: 1px;}
.blog-search-bar a { width: 30px; text-align: center; font-size: 20px;}

.tags-list { display: flex ;flex-direction: row; flex-wrap: wrap; padding-bottom: 20px;}
.tags-list > a { line-height: 36px; border-radius: 18px; padding: 0 10px; margin: 0 5px 5px 0; border: 1px solid #111;}
.tags-list > a:hover, .tags-list > a.currnet { background: rgb(183, 149, 58); color: #fff; border-color: rgb(183, 149, 58);}

.tags-submenu { padding-bottom: 20px; }
.tags-submenu > a { display: block; border-bottom: 1px solid #111; padding: 0 0 4px 0; margin-bottom: 4px;;}
.tags-submenu > a:hover { color: rgb(183, 149, 58);}

.blog-list-content { padding-bottom: 20px; display: flex ;flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.blog-list-content > div:nth-of-type(1) { width: 33%;}
.blog-list-content > div:nth-of-type(1) img { transition: all 0.8s ease-out 0s; }
.blog-list-content > div:nth-of-type(1):hover img { transform: scale(0.95);}
.blog-list-content > div:nth-of-type(2) { width: 67%; padding-left: 5%;}
.blog-list-title { color: #555; display: block; padding-bottom: 10px; font-weight: 500;white-space:nowrap; text-overflow : ellipsis; overflow:hidden; }
.blog-list-data { color: #aaa; padding-bottom: 15px; font-size: 15px; line-height: 1.5;}
.blog-list-date { text-align: right; color: #999; font-size: 14px;}

#page { text-align: center; padding: calc(20px + 1%) 0 calc(10px + 1%) 0;font-family: 'Jost','Noto Sans TC', sans-serif}
#page a { font-size: 16px; color: #555; width: 30px; height: 28px; line-height: 25px; text-align: center; border: 1px solid #555; display: inline-block;}
#page a:hover{ background: #555; color: #fff;}
#page a.current { border-width: 0;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #333; border-right: 1px solid #333; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

/*blog-detail*/
.blog-detail-section { padding-bottom: 25px;}
.blog-detail-title { font-weight: 700; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px; color: #555; }
.btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;padding-bottom: calc(20px + 4%);}
.btn-box > a { width: calc(33.3% - 3px); font-size: 15px; color: #fff !important; text-align: center; padding: 7px 15px;}
.btn-box > a:hover { transform: scale(0.96);}
.btn-box-prev, .btn-box-next { background: #777;}
.btn-box-back { background: #333;}


.btn01 { font-family: 'Jost', sans-serif;font-size: 16px;background-color: rgb(183, 149, 58);color: #ffffff !important;display: flex;align-items: center;justify-content: center;width: 187px;height: 44px;}
.btn01:hover { transform: scale(0.95);}

.idx-service-section { padding: calc(20px + 4%) 0;}
.idx-service-title { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding-bottom: calc(20px + 2%);}
.idx-service-title > h1 { padding-bottom: 10px;}

.service-list { display: flex; flex-direction: row; flex-wrap: wrap;  }
.service-list > div { width: 33.33%; border-top: 1px solid rgb(51, 51, 51); border-right: 1px solid rgb(51, 51, 51); padding: calc(20px + 2.5%) calc(20px + 1%) calc(70px + 2.5%) calc(20px + 1%); position: relative;}
.service-list > div:nth-of-type(3n + 3) { border-right: 0px solid rgb(51, 51, 51);}
.service-list-title { padding-bottom: 10px; font-size: 20px; font-weight: 700;}
.service-list-title > span { display: block; color: rgb(178, 146, 55); font-weight: 600;}

.service-btn { position: absolute; bottom: 30px; left:calc(20px + 1%) }

/*process*/
.process-section { padding: calc(20px + 4%) 0 0 0;}
.process-title-box { padding-bottom: calc(20px + 3%); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.process-title-box > div:nth-of-type(1) { line-height: 1.3; font-style: italic; font-size: clamp(35px, 6vw, 80px); color: rgb(135, 135, 135); font-family: 'Jost', sans-serif; font-weight: 600;}
.process-title-box > div:nth-of-type(2) { line-height: 1.3; background: rgb(135, 135, 135); color: #fff; padding: 7px 25px;}
.process-title-box-2 > div:nth-of-type(1) { color: rgb(180, 146, 55);}
.process-title-box-2 > div:nth-of-type(2) { background: rgb(180, 146, 55);}

.process-list { margin-bottom: calc(20px + 5%); position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; max-width: 530px; margin-left: auto; margin-right:auto;}
.process-list:after { position: absolute; content: ""; z-index: -1; background: rgb(136, 136, 136);  top: 10px; left: 54px; width: 2px; height: 90%;}
.process-list-2:after { background: rgb(180, 146, 55);}
.process-list > div { margin-bottom: calc(20px + 5%);}
.process-list > div:nth-child(odd) { width: 111px;}
.process-list > div:nth-child(even) { width: calc(100% - 111px); padding-left: 55px;}
.process-list > div:nth-child(even) i { font-family: 'Jost', sans-serif;font-style: normal;font-size: 18px;color: rgb(178, 146, 55);font-weight: 500;}
.process-list > div:nth-child(even) h6 { font-size: 20px; font-weight: 500; padding: 0; margin: 0;}
.process-list > div:nth-child(even) p { margin-bottom: 0 !important;}

/*gallery*/
.gallery-title { padding-bottom: calc(10px + 1%);}
.gallery-list { display: flex;flex-direction: row; flex-wrap: wrap;}
.gallery-list > a { display: block; width: 33.33%; padding: 0 calc(10px + 0.5%) calc(20px + 2%) calc(10px + 0.5%);}
.gallery-list > a:hover .gallery-list-pto:after { opacity: 1;}
.gallery-list > a:hover .gallery-list-name { color: #666;}
.gallery-list-pto { position: relative; margin-bottom: 12px; padding-bottom: 67%;}
.gallery-list-pto:after { position: absolute; content: ""; z-index: 4; background: rgba(0,0,0,.3); width: 100%; height: 100%; top:0; left: 0; opacity: 0; transition: all 0.4s ease-out 0s;}
.gallery-list-name { text-align: center; color: #333;}

/*gallery-list*/
.aside-menu { padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.aside-menu > a { border-radius: 22px; padding: 5px 20px; border: 1px solid #555; margin: 0 5px 10px 5px; }
.aside-menu > a:hover, .aside-menu > a.current { color: #fff; background: #555;}

.gallery-list-2 { background: #fff; padding:25px 10px;}

.service-center-section { padding-bottom: 10px; margin: 0 auto;}
.service-center-title { font-size: clamp(24px, 2.4vw, 48px); font-weight: 500; padding-bottom: calc(20px + 2%); text-align: center;}
.service-center-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  }
.service-center-btn-box > a { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; border-radius: 22px; background: #555; padding: 6px 25px; color: #fff !important; margin-left: 1vw;; margin-right: 1vw;}
.service-center-btn-box > a:hover { background: rgb(183, 149, 58) !important;}
.service-center-btn-box > a > img { height: 22px; display: inline-block; margin-right: 15px;}
.service-center-btn-box > a > div, .service-center-btn-box > a > span { font-size: clamp(15px, 1.5vw, 19px);}

/*contact*/
.contact-section { display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-section > div:nth-of-type(1) { width: 275px;}
.contact-section > div:nth-of-type(2) { width: calc(100% - 275px); padding-left: 10%;}

.color-444{ color: #444;}

.contact-info { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 20px; padding-top: 20px;}
.contact-info > div:nth-child(odd) { width: 40px; font-size: 14px; font-weight: 100; letter-spacing: -1px;}
.contact-info > div:nth-child(even) { width: calc(100% - 40px); font-size: 15px; font-weight: 100; font-weight: 300;}

.contact-map iframe { width: 100%; height: 350px; border-width: 0;}

.color-red { color: #ff4c4c;}

.contact-form { padding-top: 20px;}

.contact-layout-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-1 > div { width: calc(50% - 15px);}

.contact-form-list {  margin-bottom: 25px;display: flex; flex-direction: column; flex-wrap: nowrap; padding: 5px 0px; }
.contact-form-list > div:nth-of-type(1) { width: 100%; padding: 3px 0px;  position: relative;font-size: 16px; line-height: 170%; }
.contact-form-list > div:nth-of-type(1):after { position: absolute; content: ":"; top: 0; right: 0; display: none;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
.contact-form-list2 {  margin-bottom: 10px;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 5px 0px; }
.contact-form-list2 > div:nth-of-type(1) { width: 90px; padding: 3px 0px;  position: relative; line-height: 170%; }
.contact-form-list2 > div:nth-of-type(1):after { position: absolute; content: ":"; top: 0; right: 0; display: none;}
.contact-form-list2 > div:nth-of-type(2) { width: calc(100% - 70px); padding-left: 10px;}

.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: 16px; border-width:0 0 1px 0; border-style: solid; border-color: #aaa; margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 40px; border-radius: 0px; }
.contact-form textarea { height:41px; padding:15px; resize:none; line-height: 140%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; max-width: 160px; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 5px) 7px; background-size: 30px 29px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: 16px; border-width:0 0 1px 0; border-style: solid; border-color: #aaa; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0px 15px;  line-height: 40px; border-radius: 0px; font-weight: 300; letter-spacing: 0.05rem;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.input-width-100 { width: 100px !important;}

.contact-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; padding: calc(10px + 2%) 0;}
.contact-btn { width: 150px; padding: 7px; text-align: center; border: 1px solid #ccc; transition: all 0.4s ease-out 0s; background: transparent; margin-bottom: 10px; margin-left: 20px; font-size: 15px; font-weight: 300;}
.contact-btn:hover { letter-spacing: 3px;}
.contact-btn.btn-send { background: #555; color: #eee;}


@media only screen and (max-width: 1600px) {
	.idx-about-section-bg { padding: calc(20px + 4%) 0; }
	.idx-about-section-bg:before { width: calc(100% - 0px);}
	
	.idx-about-section-1, .idx-about-section-2 { padding-left: 5%; padding-right: 5%;}
	
}
@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px; font-size: 16px;}
	#content p{ font-size: 16px;}
	p, td, li, label { font-size: 16px;}
	
	
}

@media only screen and (max-width: 980px) {
	.blog-section > div:nth-of-type(1) { width: 100%; order: 2;}
	.blog-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0; order: 1;}
	.blog-list-content { align-items: flex-start;}
	
	
	.service-list > div { width: 50%; }
	.service-list > div:nth-of-type(3n + 3) { border-right: 1px solid rgb(51, 51, 51);}
	.service-list > div:nth-child(even) { border-right: 0px solid rgb(51, 51, 51);}
	
	.service-center-btn-box { flex-direction: column; justify-content: center; align-items: center; }
	.service-center-btn-box > a { margin-bottom: 6px; min-width: 200px; justify-content: center; }

	.contact-section > div:nth-of-type(1) { width: 100%; padding-bottom: 30px;}
	.contact-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0%;}
}
@media only screen and (max-width: 768px) {
	#path li { font-size: 13px;}

	.idx-about-section-1 .content-Box > div:nth-of-type(1) { width: 100%; padding-right: 0%; padding-bottom: calc(20px + 2%); text-align: center;}
	.title-1 { align-items: center;}
	.idx-about-section-1 .content-Box > div:nth-of-type(2) { width: 100%;}
	.idx-about-section-2 { height: 400px;}
	.idx-about-section-2-content { right:auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; padding: 8% 5%; text-align: center;}
	
	.gallery-list > a { width: 50%; padding: 0 10px calc(20px + 2%) 10px;}
	
	.contact-layout-1 > div { width: calc(100% - 0px);}
}
@media only screen and (max-width: 640px) {
	
	
}
@media only screen and (max-width: 570px) {
	.idx-about-section-2-content { background: rgba(80,80,80,.5);}
	
	.blog-list-content > div:nth-of-type(1) { width: 100%; margin-bottom: 15px;}
	.blog-list-content > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	
	.service-list > div { width: 100%; border-width: 1px 1px 0px 1px; border-style: solid; border-color: rgb(51, 51, 51); padding: calc(20px + 2.5%) calc(20px + 1%);}
	.service-list > div:nth-child(even) { border-right: 1px solid rgb(51, 51, 51);}
	.service-list > div:last-child { border-bottom: 1px solid rgb(51, 51, 51);}
	.service-btn { position: relative; bottom: auto; left:auto; margin-top: 15px;}
	
	
	.process-list { align-items: flex-start;}
	.process-list:after { left: 30px; width: 2px; height: 90%;}
	.process-list > div:nth-child(odd) { width: 60px;}
	.process-list > div:nth-child(even) { width: calc(100% - 60px); padding-left: 25px;}
}

@media only screen and (max-width: 414px) {
	.gallery-list > a { width: 100%; padding: 0 0px calc(20px + 2%) 0px;}
	

}

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

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

}