:root{
	--color-black: #1a1a1a;
	--color-white: #e6e6e6;
	--color-grey: #4d4d4d;
	--color-grey-light: #999999;
	--color-primary: #42220b;
	--color-primary-light: #847152;

	--font-serif: 'serif', "Noto Serif TC";
}

body{ background:#FFF; font-family: 'Open Sans',sans-serif , 'Noto Sans TC' , 'Noto Serif TC'; padding:0px; margin:0px; font-size:16px; color:var(--color-grey); }
body a{ color:var(--color-grey); text-decoration:none; }
body a:hover{ color:var(--color-grey); }

.btn-main{ text-transform: uppercase; letter-spacing: 3px; font-weight: 500; background-image: none; border-style: none;  padding: 10px 30px; text-decoration: none; display: inline-block; transition: all 0.5s ease-out; }
.en .btn-main{ font-weight:700; }
.btn-main-transparent{ background:transparent; color:var(--color-primary-light); border:1px solid var(--color-primary-light); }
.btn-main-transparent:hover{ background:var(--color-primary-light); color:var(--color-white); }
.btn-main-primary-light{ background:var(--color-primary-light); color:#FFF; }
.btn-main-primary-light:hover{ background:var(--color-primary); color:#FFF; }
.btn-main-white{ background:#FFF; color:var(--color-black); }
.btn-main-white:hover{ background:var(--color-primary-light); color:#FFF; }
.btn-main-black{ background:transparent; color:var(--color-black); border:1px solid var(--color-black);}
.btn-main-black:hover{ background:var(--color-primary-light); color:#FFF; border-color:var(--color-primary-light);}

header { transition: all 0.5s ease-out; }
header *{ transition: all 0.5s ease-out; }
header .navbar-brand .logo-image{ height:110px; }
header .navbar-toggler:focus{ box-shadow: none; }
header > .container{ justify-content: space-between; }
header .navbar .navbar-collapse{ flex-grow: 0; }
header .navbar #navbarMain{ align-self: flex-end; padding-bottom:10px; }
header .navbar #navbarMain .nav-item{ margin-left:1rem; }
header .navbar #navbarMain .nav-item a.nav-link{ font-size:1.1rem; font-weight:400; text-transform: capitalize; color:var(--color-grey); transition: all 0.5s ease-out; }
header .navbar #navbarMain .nav-item a.nav-link:hover{ color:var(--color-primary-light); }
header .navbar #navbarMain .nav-lang{ --space-size:0.8rem; margin-left:3rem; }
header .navbar #navbarMain .nav-lang .nav-item{ margin-left:0rem; }
header .navbar #navbarMain .nav-lang .nav-item a.nav-link{ display:flex; align-items: center; padding-right:0px; padding-left:var(--space-size); }
header .navbar #navbarMain .nav-lang .nav-item a.nav-link::after{ content:""; width:1px; background-color:var(--color-black); height:18px; display:inline-block; margin-left:var(--space-size); }
header .navbar #navbarMain .nav-lang .nav-item:last-child a.nav-link::after{ content:none; }


#offcanvasNavMain{ width:320px; }
#offcanvasNavMain #offcanvasNavMainLabel .logo-image{ height:90px; }
#offcanvasNavMain .offcanvas-header{ padding-top:0.5rem; padding-bottom:0.5rem; }
#offcanvasNavMain .navbar-nav{ margin-left:0.5rem; }
#offcanvasNavMain .nav-lang{ margin-top:2rem; flex-direction:row; }
#offcanvasNavMain .nav-lang .nav-item{ margin-right:1rem; }
#offcanvasNavMain .nav-lang .nav-item a.nav-link{ width:32px; height:32px; display: flex; justify-content: center; align-items: center; }
#offcanvasNavMain .nav-lang .nav-item a.nav-link.active{ background:var(--color-primary-light); color:#FFF; }


section.home-section{ --spacing-y:100px; --spacing-x:60px; --font-size-text:1.2rem; --font-size-title:1.4rem; --font-size-item-title:calc(var(--font-size-text) - 0.05rem); --font-weight-item-title:300; --item-width:180px; }
section.home-section h5{ text-transform: uppercase; letter-spacing: 2px; font-size: 1.25rem; margin: 0; }
section.home-section h2{ font-size: 4.8rem; font-family:'Playfair Display'; margin: 0; font-weight: 500; }
section.home-section a.btn-contact-us{ margin: 32px auto 0 0; }
section.home-section p.text-content{ margin-top:40px; font-size: var(--font-size-text); font-weight:300; letter-spacing: 2px;}
.en section.home-section{ --font-weight-item-title:300; --item-width:250px; }
.en section.home-section p.text-content{ font-weight:300; letter-spacing: 0px; }

#section-vision{  background-color:#CEDCDF; }
#section-vision .section-layout-wrap{ width: calc(((100% - 1140px) / 2) + 1140px); margin: 0 auto 0 0; }
#section-vision .section-layout{ display:flex; align-items: center; }
#section-vision .section-layout .section-image{ flex:0 0 50%; min-width:50%; background-image: url("../images/bg-vision.png");  background-position:center center; min-height:525px;  }
#section-vision .section-layout .section-content{ flex:0 0 50%; min-width:50%; padding:var(--spacing-x); }


#section-mission .section-content{ padding:var(--spacing-y) var(--spacing-x); text-align: center; }
#section-mission .section-content h2{ color:var(--color-primary-light); }

#section-value .section-layout{ display:flex; flex-wrap: wrap; }
#section-value .section-layout .section-image{ flex:0 0 33.3333%; min-width:33.3333%; height:626px; background-position:center center; background-size: cover; }
#section-value .section-layout .section-image.section-image-1{ background-image: url("../images/bg-value-image-1.jpg"); }
#section-value .section-layout .section-image.section-image-2{ background-image: url("../images/bg-value-image-2.jpg"); }
#section-value .section-layout .section-content{ flex:0 0 33.3333%; min-width:33.3333%; }
#section-value .section-layout .section-content .section-content-layout{ display:flex; flex-direction: column; height:100%; justify-content: center; }
#section-value .section-layout .section-content .section-content-layout .section-content-heading{ flex:0 0 40%; background-color: var(--color-black); color:#FFF; padding-left:var(--spacing-x); display: flex; flex-direction: column; justify-content: center; }
#section-value .section-layout .section-content .section-content-layout .section-content-list{ flex:0 0 60%; display: flex; flex-direction: column; justify-content: center; padding:0px var(--spacing-x);  }
#section-value .section-layout .section-content .section-content-layout .section-content-list ul{ list-style: none; margin:0px; padding:0px; }
#section-value .section-layout .section-content .section-content-layout .section-content-list ul li{ font-size:var(--font-size-title); padding:0.8rem 0px; }
#section-value .section-layout .section-content .section-content-layout .section-content-list ul li::first-letter{ font-weight:700; font-size:1.8rem; color:var(--color-primary);  }

#section-positioning{ background:var(--color-black); color:#FFF; }
#section-positioning .section-content{ padding:var(--spacing-y) var(--spacing-x); text-align: center; }
#section-positioning .section-content .positioning-items{ display:flex; justify-content: space-around; margin:var(--spacing-x) 0px; }
#section-positioning .section-content .positioning-items .positioning-item{ flex: 0 0 var(--item-width); min-width:var(--item-width); display: flex; flex-direction: column; align-items: center; }
#section-positioning .section-content .positioning-items .positioning-item .item-icon{ width:100px; }
#section-positioning .section-content .positioning-items .positioning-item .item-title{ margin-top:1rem; font-size:var(--font-size-item-title); font-weight:var(--font-weight-item-title); }


#section-aboutus{  background:url("../images/bg-aboutus.jpg") no-repeat center center; background-size: cover; min-height:560px; }
#section-aboutus .section-layout{ display:flex; justify-content: flex-end; }
#section-aboutus .section-layout .section-content{ width:420px; padding:var(--spacing-y) 0px; }


#section-services{ background:var(--color-white); color:var(--color-grey); }
#section-services .section-content{ padding:var(--spacing-y) var(--spacing-x); text-align: center; }

#section-services .section-content .service-items{ display:flex; justify-content: space-around; margin:var(--spacing-x) 0px; flex-wrap: wrap;}
#section-services .section-content .service-items .service-item{ flex: 0 0 var(--item-width); min-width:var(--item-width); display: flex; flex-direction: column; align-items: center; }
#section-services .section-content .service-items .service-item .item-icon{ width:100px; }
#section-services .section-content .service-items .service-item .item-title{ margin-top:1rem; font-size:var(--font-size-item-title); font-weight:var(--font-weight-item-title); }



#section-bottom .section-layout .section-image-row{ display:flex; flex-wrap: wrap; }
#section-bottom .section-layout .section-image{ flex:0 0 33.33%; min-width:33.33%; height:340px; background-size: cover; background-position: center center; background-repeat:no-repeat; }
#section-bottom .section-layout .section-image.section-image-1{ background-image:url("../images/bg-bottom-1.jpg"); }
#section-bottom .section-layout .section-image.section-image-2{ background-image:url("../images/bg-bottom-2.jpg"); }
#section-bottom .section-layout .section-image.section-image-3{ background-image:url("../images/bg-bottom-3.jpg"); }
#section-bottom .section-layout .section-image.section-image-4{ background-image:url("../images/bg-bottom-4.jpg"); }
#section-bottom .section-layout .section-image.section-image-5{ background-image:url("../images/bg-bottom-5.jpg"); }
#section-bottom .section-layout .section-image.section-image-6{ background-image:url("../images/bg-bottom-6.jpg"); }


#section-contact{ background-color: var(--color-black); color:#FFF; padding:100px 0px; }
#section-contact a{ color:#FFF; }
#section-contact h2{ font-size:1.5rem; color:var(--color-grey-light); margin-bottom:1rem; }
#section-contact .section-layout{ display:flex; flex-wrap: wrap; justify-content: space-around; }
#section-contact .section-layout .contact-left{ flex:0 0 40%; min-width:40%; }
#section-contact .section-layout .contact-right{ flex:0 0 40%; min-width:40%; }
#section-contact .contact-item{ font-size:1.25rem; font-weight:300; margin-bottom:1rem; display: flex; align-items: center; }
#section-contact .contact-item span.material-icons{ margin-right:0.5rem; }
#section-contact .contact-form .form-item{ margin-bottom:1.5rem; }
#section-contact .contact-form .form-item .form-label{ display:none; }
#section-contact .contact-form .form-item .form-control{ border-radius:0px; padding-top:0.45rem; padding-bottom:0.45rem;}
#section-contact .contact-form .btn-submit{ font-weight:300; font-size:1rem; }


footer{ padding:1rem 0px; background-color: var(--color-grey-light); color:var(--color-black); font-size:0.95rem; }
footer .license_no{ font-size:0.9rem; word-break: keep-all; white-space:nowrap; }
footer .footer-layout{ display:flex; justify-content: space-between; justify-content: center;}
footer .footer-layout .footer-navs{ display:flex; align-items: center; display:none; }
footer .footer-layout .footer-navs a.footer-nav-link{ line-height:12px; border-right:1px solid var(--color-black); padding:0px 1rem; }
footer .footer-layout .footer-navs a.footer-nav-link:last-child{ border:0px; }


@media (max-width: 1199.98px) {
	section.home-section h2{ font-size: 4.0rem; }
	section.home-section p.text-content{ font-size: 1.125rem; }
	section.home-section{ --spacing-y:80px; --spacing-x:50px; --font-size-text:1.2rem; --font-size-title:1.3rem; }

	header .navbar-brand .logo-image{ height:100px; }
	header .navbar #navbarMain .nav-item{ margin-left:0.5rem; }
	header .navbar #navbarMain .nav-item a.nav-link{ font-size:1rem; }
	header .navbar #navbarMain .nav-lang{ margin-left:1.5rem; }

	#section-vision .section-layout-wrap{ width:calc(((100% - 940px) / 2) + 940px); }
	#section-vision .section-layout .section-image{ min-height: 490px; }

	#section-value .section-layout .section-image{ height:540px; }

	#section-services .section-content .service-items{ margin:2rem 0px; margin-bottom:0px; }
	#section-services .section-content .service-items .service-item{ flex:0 0 50%; min-width:50%; margin-bottom:1.5rem; padding:0px var(--spacing-x); }

	#section-bottom .section-layout .section-image{ height: 274px; }

	#section-contact{ padding:80px 0px; }
	#section-contact .contact-item{ font-size:1rem; }
}

@media (max-width: 991.98px) {
	section.home-section h2{ font-size: 3.0rem; }
	section.home-section{ --spacing-y:60px; --spacing-x:30px; }

	#section-vision .section-layout-wrap{ width:calc(((100% - 720px) / 2) + 720px); }
	#section-vision .section-layout .section-image{ min-height: 385px; }

	#section-value .section-layout .section-image{ flex:0 0 50%; min-width:50%; height:254px; }
	#section-value .section-layout .section-content{ flex:0 0 100%; min-width:100%; }
	#section-value .section-layout .section-content .section-content-layout{ height:auto; flex-direction: row; }
	#section-value .section-layout .section-content .section-content-heading{ padding:var(--spacing-x) 0px; }
	#section-value .section-layout .section-content .section-content-layout .section-content-list ul li{ font-size:1.2rem; }

	#section-aboutus{ min-height:460px; }
	#section-aboutus .section-layout .section-content{ width:480px; }

	#section-bottom .section-layout .section-image{ height: 218px; }

	#section-contact{ padding:60px 0px; }
}

@media (max-width: 767.98px) {
	section.home-section{ --font-size-text:1.1rem; --font-size-title:1.2rem; }

	header .navbar-brand{ padding:0px; }
	header .navbar-brand .logo-image{ height:90px; }
	

	#section-vision .section-layout-wrap{ width:100%; }
	#section-vision .section-layout{ flex-direction: column; }
	#section-vision .section-layout .section-image{ min-height: 385px; width:100%; }
	#section-vision .section-layout .section-content{ padding-left: var(--spacing-x); padding-right: var(--spacing-x); width:100%; text-align: center;}

	#section-value .section-layout .section-image{ height:320px; flex:0 0 100%; min-width:100%;  }
	
	#section-positioning .section-content .positioning-items{ flex-direction: column; }
	#section-positioning .section-content .positioning-items .positioning-item{ flex-direction: row; width: 100%; align-items: center; flex:1; padding:0.8rem 0px;  }
	#section-positioning .section-content .positioning-items .positioning-item .item-icon{ flex:0 0 80px; width:80px; margin-right:1.5rem; }
	#section-positioning .section-content .positioning-items .positioning-item .item-title{ flex:1; margin-top:0px; text-align: left; }

	#section-bottom .section-layout .section-image{ flex:0 0 50%; min-width:50%; height: 160px; }

	#section-contact{ padding:30px 0px; }
	#section-contact .section-layout .contact-left{ flex:0 0 100%; min-width:100%; margin-bottom:30px; }
	#section-contact .section-layout .contact-right{ flex:0 0 100%; min-width:100%; }
}

@media (max-width: 575.98px) {
	section.home-section{ --spacing-y:40px; --spacing-x:25px; --font-size-text:1.0rem; --font-size-title:1.1rem; }
	section.home-section h2{ font-size: 2.3rem; margin-bottom:1rem; }
	section.home-section a.btn-contact-us{ margin-top:1.5rem; }

	#section-aboutus{ min-height:360px; }
	#section-aboutus .section-layout .section-content{ width:100%; padding-left:var(--spacing-x); padding-right:var(--spacing-x); }


	#section-services .section-content{ padding-left:0px; padding-right:0px; }

	#section-contact h2{ font-size: 1.3rem; }
}