@charset "utf-8";
/*
========================
Variables
========================
*/
:root {
	--theme-bg-color: #F5F7F6;
	--theme-border-color: #d3dada;
	--theme-highlight-color: #C79F62;
	--content-bg-color: #404241;
	--main-title-text-color: #333333;
	--main-content-text-color: #4D4D4D;
	--header-height: 78px;
	--header-text-color: #999999;
	--header-title-fontsize: 18px;
	--header-button-fontsize: 1.15em;
	--header-button-padding: 35px;
	--header-language-fontsize: 1.1em;
	--aside-nav-width: 84px;
	--aside-nav-fontsize: 16px;
	--aside-nav-top-item: #666666;
	--aside-nav-sub-item: #999999;
	--aside-nav-social-fontsize: 20px;
	--nav-title-fontsize: 2em;
	--nav-set-padding: 60px 50px 60px;
	--nav-top-item-fontsize: 1.3em;
	--nav-top-item-gap: 25px;
	--nav-sub-item-fontsize: 1.2em;
	--nav-sub-item-gap: 20px;
	--nav-contact-fontsize: 1.05em;
	--footer-bg-color: #252826;
	--footer-border-color: #4D4D4D;
	--footer-padding: 60px;
	--footer-logo-size: 300px;
	--footer-title-fontsize: 1.4em;
	--footer-content-fontsize: 1.05em;
	--breadcrumbs-fontsize: 1.6em;
	--breadcrumbs-gap: 0 18px 0 14px;
	--section-padding: 80px;
	--scrollbar-size: 6px;
	--scrollbar-track: #eee;
	--scrollbar-thumb: #ccc;
	--scrollbar-hover: #999;
	--swiper-button-size: 78px;
	--swiper-arrow-size: 40px;
	--button-bg-color: #C79F62;
	--button-hover-color: #b28a4f;
	--thumb-info-title-fontsize: 1.33em;
	--pagination-arrow-fontsize: 2.4em;
	--form-row-gap: 25px;
	--form-input-height: 48px;
	--form-input-text-size: 1.05em;
	--form-input-border-radius: 2px;
	--form-select-height: 48px;
	--block-header-title-fontsize: 1.7em;
	--block-header-category-fontsize: 1.15em;
	--block-header-category-gap: 60px;
	--block-slogan-height: 45vh;
	--block-slogan-min-height: 320px;
	--block-hero-title-fontsize: 2.5em;
	--block-hero-content-fontsize: 1.1em;
	--block-hero-link-fontsize: 1.2em;
	--block-carousel-item-width: 25%;
	--block-carousel-item-padding: 40px;
	--block-columns-title-fontsize: 1.33em;
	--block-title-columns-header-fontsize: 1.7em;
	--block-title-columns-title-fontsize: 1.33em;
	--block-title-columns-min-height: 300px;
	--block-grids-item-padding: 40px;
	--block-article-back-fontsize: 1.15em;
	--block-article-nav-padding: 40px;
	--block-article-nav-title-fontsize: 1.33em;
	--block-label-grids-title-fontsize: 2.5em;
	--block-slider-info-padding: 15%;
	--block-slider-info-title-fontsize: 2.25em;
	--block-slider-info-list-fontsize: 1.05em;
	--block-expandable-header-padding: 25px 10px;
	--block-expandable-title-fontsize: 1.4em;
	--block-expandable-arrow-fontsize: 1.2em;
	--block-expandable-content-fontsize: 1.05em;
	--product-detail-title-fontsize: 1.8em;
	--product-detail-paragraph-gap: 60px;
	--contact-form-title-fontsize: 1.7em;
	--contact-aside-title-fontsize: 1.33em;
	--contact-map-marker-size: 40px;
}

/*
========================
Elements
========================
*/
*						{ box-sizing:border-box; }
html, body				{}

a						{ color:inherit; text-decoration:none; transition: all .2s; }
strong					{ font-weight:500; }
em						{ font-style:italic; }

/** Table **/
table					{ width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table th,
table td				{ padding:8px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
caption					{ text-align:left; margin-bottom:10px; font-size:1.2em; }

/** Image **/
img						{ max-width:100%; }

/** Header **/
h1, h2, h3,
h4, h5, h6 				{ font-weight:500; color: var(--main-title-text-color); }
h1 						{ font-size: 2em; }
h2 						{ font-size: 1.5em; }
h3 						{ font-size: 1.17em; }
h4 						{ font-size: 1.12em; }
h5 						{ font-size: .83em; }
h6 						{ font-size: .75em; }

/** Article **/
article h1						{ margin-bottom: .7em;}
article .subtitle 				{ margin-bottom: 20px; font-size: 1.1em; color: var(--main-content-text-color); }
article	.contents				{ margin: 20px 0; }

/** Form **/
form							{ }
form fieldset					{ }
form legend						{ font-size:1.33em; margin-bottom:1.5em;  }
form .row						{ margin-bottom:var(--form-row-gap); position:relative; }
form .col						{ width:48.5%; position:relative; }
form .label						{ margin-bottom:15px; }
form input[type="text"],
form input[type="date"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form textarea,
form select						{ width:100%; height: var(--form-input-height); padding:1em .7em; font-size: var(--form-input-text-size); background:#fff; border:1px solid #d2d2d2; border-radius:var(--form-input-border-radius); font-family:inherit; outline:none; -webkit-appearance: none; -moz-appearance: none; }
form textarea					{ height:180px; }
form select						{ padding:5px; }
form button						{ font-family:inherit; outline:none; }
form button:disabled			{ opacity: .5; pointer-events: none;}
form .error						{ position: absolute; right: 0; top: -2px; padding: .3em .75em .4em .75em; border-radius: 3px; background-color: var(--theme-highlight-color); color:#fff; font-size:.96em; line-height:1.25em; }
form .error::after 				{ content: ''; position: absolute; left: 50%; bottom:0; border-top: 5px solid var(--theme-highlight-color); border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; transform: translate(-50%, 100%);  }
form .result					{ margin-top:30px; font-size: 1.08em; line-height: 1.4em; color:var(--theme-highlight-color); }
button.text-button 				{ border: none; background: none; color: #666; display: inline-block; cursor: pointer;}
button.text-button:hover 		{ color: #000;}

/** Custom scrollbar **/
.custom-scrollbar::-webkit-scrollbar 							{ width: var(--scrollbar-size); height: var(--scrollbar-size); }
.custom-scrollbar::-webkit-scrollbar-track 						{ background-color: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb 						{ background-color: var(--scrollbar-thumb); min-height: 80px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover 				{ background-color: var(--scrollbar-hover); }

/** Select2 **/
.select2-container 																		{ width: 100% !important; }
.select2-container--default .select2-selection--single 									{ height: var(--form-select-height); border: 1px solid #d2d2d2; }
.select2-container--default .select2-selection--single .select2-selection__rendered 	{ line-height: var(--form-select-height); padding-left: 12px; color: var(--main-content-text-color); }
.select2-container--default .select2-selection--single .select2-selection__arrow 		{ height: var(--form-select-height); width: var(--form-select-height); }

/** fr-view **/
.fr-view				{ line-height:1.6em; color: var(--main-content-text-color);}
.fr-view h1 			{ font-size: 1.4em; }
.fr-view h2 			{ font-size: 1.3em; }
.fr-view h3 			{ font-size: 1.2em; }
.fr-view h4 			{ font-size: 1.1em; }
.fr-view ul				{ list-style:inherit; padding-left:.8em; }
.fr-view ul li 			{ list-style:inherit; }
.fr-view ol				{ list-style:inherit; padding-left:15px;}
.fr-view ol li 			{ list-style:inherit; }
.fr-view img			{ cursor:default !important; }
.fr-view a > img		{ cursor:pointer !important; }
.fr-view a 				{ text-decoration:underline; }
.fr-view sup 			{ line-height:0; }
.fr-view strong 		{ font-weight:500; }
.fr-view blockquote		{ border-left:4px solid #aaa; background:#f5f5f5; color:#555; padding:1.1em; }
.fr-view .fr-spec-table 				{ border: none; border-top: 1px solid #ddd;}
.fr-view .fr-spec-table th,
.fr-view .fr-spec-table td 				{ border: none; border-bottom: 1px solid #ddd; padding: 1.2em 8px; font-size: 1.1em;}
.fr-view .fr-spec-table th,
.fr-view .fr-spec-table td:first-child 	{ font-weight: bold;}

/** LightGallery **/
.lg-backdrop							{ background-color: #000;}

/** Swiper **/
.swiper-slide 									{ width: 100%;}
.swiper-buttons 								{ display: flex; position: relative;}
.swiper-buttons::after							{ z-index: 10; content: ''; position: absolute; left: 50%; top: 0; bottom:0; border-left: 1px solid var(--theme-border-color);}
.swiper-button-next,
.swiper-button-prev 							{ position: static; outline: none; margin: 0 !important; width: var(--swiper-button-size); height: var(--swiper-button-size); line-height: var(--swiper-button-size); border-radius: 0; background-color:var(--button-bg-color); transform:none; transition: all .2s; } 
.swiper-button-next:after, 
.swiper-button-prev:after 						{ font: var(--fa-font-thin); font-size: var(--swiper-arrow-size); color: #f2f2f2;}
.swiper-button-next:after 						{ content: '\f105'; }
.swiper-button-prev:after 						{ content: '\f104'; }
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled		{ pointer-events: unset;}
.swiper-pagination-bullet-active				{ background-color: #222;}
.swiper-button-next:hover,
.swiper-button-prev:hover 						{ background-color: var(--button-hover-color); }
.swiper-button-next:hover:after, 
.swiper-button-prev:hover:after					{ color: #fff;}
.swiper.swiper-disabled							{ height: auto; margin: 0 !important;}
.swiper.swiper-disabled .swiper-wrapper			{ display: block; height: auto !important; }
.swiper.swiper-disabled .swiper-slide			{ display: block; padding: 0 !important; margin-bottom: 5px;} 
.swiper.swiper-disabled .swiper-pagination,
.swiper.swiper-disabled .swiper-button-next,
.swiper.swiper-disabled .swiper-button-prev		{ display: none;}

/** Flex layout **/
.flex         				      		{ display:flex; }
.flex-center  				  	 		{ display:flex; align-items:center; }
.flex-stretch 				  	 		{ display:flex; align-items:stretch; }
.flex-top 				  	 			{ display:flex; align-items:flex-start; }
.flex-justify 				  	 		{ display:flex; justify-content:space-between; }
.flex-evenly  				  	 		{ display:flex; justify-content:space-evenly; }
.flex-reverse 				 	  		{ display:flex; flex-direction:row-reverse; }
.flex-vertical 				 	  		{ display:flex; flex-direction:column; }
.flex-wrap 				 	  			{ display:flex; flex-wrap:wrap; }

/** Column layout **/
.column-2 							    { display:flex; flex-wrap:wrap; }
.column-2 .col-item 				    { width:45%; margin-top:5%; margin-right: 10%; }
.column-2 .col-item:nth-child(2n)	    { margin-right:0; }
.column-2 .col-item:nth-child(-n+2)    	{ margin-top:0; }

.column-3 								{ display:flex; flex-wrap:wrap; }
.column-3 .col-item 					{ width:32%; margin-right:2%; margin-top:2%; }
.column-3 .col-item:nth-child(3n)       { margin-right:0; }
.column-3 .col-item:nth-child(-n+3)     { margin-top:0; }

.column-4 								{ display:flex; flex-wrap:wrap; }
.column-4 .col-item			 			{ width:23.5%; margin-right:2%; margin-top:2%; }
.column-4 .col-item:nth-child(4n) 		{ margin-right:0; }
.column-4 .col-item:nth-child(-n+4) 	{ margin-top:0; }

/** Menu horizontal **/
.menu-horizontal						{ margin-bottom: 30px; }
.menu-horizontal li						{ display: inline-block; margin-right: 30px;}
.menu-horizontal li.active				{ text-decoration: underline; }

/** Image list **/
.image-list li							{ margin-top:15px; }
.image-list li:first-child				{ margin-top:0; }

/** Thumb **/
.thumb,
.thumb-sq,
.thumb-rect,
.thumb-banner,
.thumb-vl								{ width: 100%; overflow:hidden; position:relative; display: block; }
.thumb-sq picture,
.thumb-rect picture,
.thumb-banner picture,
.thumb-vl picture 						{ position:absolute; left:0; top:0; width:100%; height:100%; }
.thumb img,
.thumb-sq img,
.thumb-rect img,
.thumb-banner img,
.thumb-vl img							{ width:100%; transition:all .6s; }
.thumb.zoom:hover img,
.thumb-sq.zoom:hover img,
.thumb-rect.zoom:hover img,
.thumb-banner.zoom:hover img,
.thumb-vl.zoom:hover img				{ transform:scale(1.1, 1.1); }
.thumb-sq								{ padding-top:100%; }
.thumb-rect								{ padding-top:67%; }
.thumb-banner							{ padding-top:46.875%; }
.thumb-vl								{ padding-top:140%; }
.thumb-sq img,
.thumb-rect img,
.thumb-banner img,
.thumb-vl img							{ position:absolute; left:0; top:0; right:0; bottom:0; 
											width:auto; height:auto; max-width:100%; max-height:100%; margin:auto;}
.thumb.fill img 						{ object-fit:cover; width:100%; height:100%; max-width:none; max-height:none; }											

/** Thumb info **/
.thumb-info								{ padding: 20px 0 0 0;}
.thumb-info	.subtitle					{ margin-bottom: 15px; color: var(--main-content-text-color); }
.thumb-info	.title						{ font-size: var(--thumb-info-title-fontsize); line-height: 1.2em;}
.thumb-info	.summary					{ margin-top: 10px; color: var(--main-content-text-color);}
.thumb-info .button 					{ margin-top: 20px;}
.thumb-info .link 						{ margin-top: 15px; display: inline-block; }

/** Zoom button **/											
.zoom-button							{ position: absolute; right: 15px; top: 15px; opacity: 0; transition: opacity .4s; cursor: pointer; }
.is-selected .zoom-button				{ opacity: 1; transition: opacity .4s .6s; }

/** Play button **/
.play-button							{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block;
											width:60px; height:60px; background:#fff; border-radius:50%; opacity:.85;
											transition:opacity .4s; cursor: pointer; z-index: 1; }
.play-button:after						{ content:''; position:absolute; left:50%; top:50%; transform:translate(-20%, -50%);
											border-left:12px solid #000; border-right:12px solid transparent;
											border-top:7px solid transparent; border-bottom:7px solid transparent;  }											
.play-button:hover						{ opacity:1; }

/** Button **/
.button,
.button-md,
.button-lg							  	{ display:inline-block; padding:.8em 1.2em 1em 1.2em; transition:background .2s; white-space:nowrap;
											background-color: var(--button-bg-color); color:#fff; border:none; border-radius:2px; text-align: center; text-decoration: none !important; }
.button									{ font-size:1.02em; }
.button-md				  	  			{ font-size:1.1em; }									
.button-lg				  	  			{ font-size:1.4em; }									
.button i			   		  			{ margin-left:.8em; font-size: .8em; }
.button-wrapper							{ display:block; }
.button.disabled,
.button-md.disabled,
.button-lg.disabled						{ pointer-events: none; background:#ccc; color:#888;}																						
.button.full,
.button-md.full,
.button-lg.full							{ width: 100%;}
.button:hover,
.button-md:hover,
.button-lg:hover 						{ background-color: var(--button-hover-color);}

/** Link **/
.link									{ font-size:1.05em; color: var(--theme-highlight-color);}
.link i									{ margin-left:.8em; font-size: 1.1em; transition: margin .1s; transform: translateY(.1em); }
.link-wrapper				  			{ display:block; }
.link:hover i 							{ margin-left: 1.2em;}


/** Tag **/
.tag-list								{ padding: 8px 0;}
.tag-list .tag							{ display:inline-block; margin:0 2px 5px 0; }
.tag-list .tag a						{ display:inline-block; padding:.36em 1em; background:#aaa; color:#fff; border-radius:15px; font-size:.96em; white-space:nowrap; transition:all .2s; }
.tag-list .tag a:hover,
.tag-list .tag a.active					{ background:#222; color:#fff; }
.tag-list .tag a i						{ margin-left:6px; font-size:12px; }

/** Breadcrumbs **/
.breadcrumbs							{ padding: 15px 0; display:flex; flex-wrap: wrap; flex-grow:1; }
.breadcrumbs	.item					{ font-size: var(--breadcrumbs-fontsize); font-weight: 400; white-space:nowrap; }
.breadcrumbs	.item:after				{ content: "/"; margin:var(--breadcrumbs-gap); font-size:.7em; font-weight: 200; color: var(--header-text-color); display: inline-block; transform: translateY(-20%); }
.breadcrumbs	.item:last-child		{ margin-right:0; }
.breadcrumbs	.item:last-child:after  { display:none; }

/** Dropodown menu **/
.dropdown								{ position:relative; }
.dropdown .label						{ cursor:pointer; }
.dropdown .menu							{ z-index: 99; position:absolute; left:-10px; padding-top: 10px; display:none; }
.dropdown .menu ul						{ background: #fff; padding:5px 10px; }
.dropdown .menu li						{ margin:10px 0; white-space:nowrap; }
.dropdown:hover .menu 					{ display:block; }

/** Pagination **/
.pagination 							{ width: 100%; display:flex; height: var(--header-height); background-color: #fff; }
.pagination li 							{ height: 100%; }
.pagination li span,
.pagination li a 						{ display: block; width: 100%; height: 100%; line-height: var(--header-height); text-align: center;}
.pagination .prev,
.pagination .next 						{ width: 50%; font-size: var(--pagination-arrow-fontsize); color: var(--header-text-color);}
.pagination .prev:not(.disabled):hover,
.pagination .next:not(.disabled):hover 	{ background-color: var(--button-hover-color); color: #fff;}
.pagination .prev 						{ border-right: 1px solid var(--theme-border-color);}
.pagination .page-item 					{ display: none;}
.pagination .pager 						{ display: none;}

/** Sharer **/
.social-share 							{ margin: 10px 0 0 0; padding:0;}
.social-share .sharer-label 			{ margin-right: 15px;}
.social-share .sharer-icons				{ }
.social-share .jssocials-share-link 	{ border-radius: 50%; border: none !important; font-size:.8em; }
.social-share .jssocials-share-link:hover { color: #000; }

/** Toast message **/
.toast-message							{ position: fixed; left: 50%; top: 30px; max-width: 480px; transform: translateX(-50%); padding: .5em 1.2em; background: #222; color: #fff; border-radius: 15px; }

/** Confirm **/
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content { overflow: visible; color: #666; line-height: 1.2em; }

/** Misc. **/
.center									{ text-align:center; }
.clear									{ clear:both; }

/** 404 **/
.http-error								{ padding:100px 4%; text-align: center; position:fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);}
.http-error .code						{ font-size: 4em ; margin-bottom: .4em; color: #999;}
.http-error	.message					{ font-size: 1.2em; font-weight: 500; color: #999; margin-bottom: 4em;}

/** Border **/
.border-tp 								{ border-top: 1px solid var(--theme-border-color);}
.border-bm 								{ border-bottom: 1px solid var(--theme-border-color);}
.border-lt 								{ border-left: 1px solid var(--theme-border-color);}
.border-rt 								{ border-right: 1px solid var(--theme-border-color);}

/** Mobile **/
.mobile-element 						{ display: none;}


/*
========================
Font
========================
*/
html, body 								{ font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, "Arial";  font-size:14px; }
body.zh .zh-sparse 						{ letter-spacing: .05em; }


/*
========================
Structure
========================
*/
#container								{ margin-left: var(--aside-nav-width); padding-top: var(--header-height);}
.wrapper 								{}
.inner,
.inner-md,
.inner-lg								{ width:92%; margin:auto; position:relative; }
.inner-md 								{ max-width: 960px;}
.inner-lg 								{ max-width: 1280px;}

/*
========================
Header
========================
*/
#header-wrapper							{ z-index: 1000; position: fixed; left: var(--aside-nav-width); top: 0; right: 0; height: var(--header-height); will-change: transform; transition: transform 200ms linear; background-color: #fff; }
#header-wrapper.headroom--pinned 		{ transform: translateY(0%); }
#header-wrapper.headroom--unpinned 		{ transform: translateY(-100%);}
#header-inner							{ height: 100%; margin-left: 4%; }
#header-inner h1						{ font-size: var(--header-title-fontsize); }
#header-buttons 						{ z-index: 2; height: 100%; position: relative; background: #fff; }
#header-buttons a 						{ height: 100%; font-size:var(--header-button-fontsize); letter-spacing: .04em; line-height: var(--header-height); padding: 0 var(--header-button-padding); color: var(--header-text-color); border-left:1px solid var(--theme-border-color)}
#header-buttons a:hover 				{ color: var(--theme-highlight-color);}
#header-buttons i 						{ font-size: 1.2em;}
#header-buttons #header-lauguage-button { width: var(--header-height); padding: 0; text-align: center; }
#header-language-toolbar				{ z-index: 1; position: absolute; right: 0; top: var(--header-height); width: var(--header-height); background-color: #fff; display: none; }
#header-language-toolbar ul 			{ width: 100%; border-left: 1px solid var(--theme-border-color);}
#header-language-toolbar li 			{ width: 100%; border-bottom: 1px solid var(--theme-border-color); }
#header-language-toolbar a 				{ display: block; width: 100%; height: 100%; height: var(--header-height); line-height: var(--header-height); text-align: center; text-transform: uppercase; font-size: var(--header-language-fontsize); color: var(--header-text-color);  }
#header-language-toolbar a:hover		{ color: var(--theme-highlight-color);}
#header-language-toolbar li.active a 	{ color: #fff; background-color: var(--theme-highlight-color);}

body.zh #header-inner h1							{ letter-spacing: .3em;}


/*
========================
Nav
========================
*/
#aside-nav 														{ z-index: 2001; position:fixed; left: 0; top: 0; width: var(--aside-nav-width); height: 100vh; padding-top: 20px; background-color: #fff; }
#aside-nav #aside-menu-logo 									{ width: 53%; }
#aside-nav #aside-menu-bars 									{ width: var(--aside-nav-fontsize); height: var(--aside-nav-fontsize); position: relative; margin-bottom: 12px; }
#aside-nav #aside-menu-bars::before,
#aside-nav #aside-menu-bars::after 								{ content: ''; width: 100%; height: 1px; background-color: var(--main-content-text-color); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .4s 0s, margin .4s .4s;}
#aside-nav #aside-menu-bars::before								{ margin-top: -4px;}
#aside-nav #aside-menu-bars::after								{ margin-top: 4px;}
#aside-nav #aside-menu-text 									{ font-size: var(--aside-nav-fontsize); letter-spacing: .3em; writing-mode: vertical-rl; color:var(--main-content-text-color); transition: all .2s; }
#aside-nav #aside-menu-button 									{ cursor: pointer;}
#aside-nav #aside-menu-button:hover #aside-menu-text			{ color:var(--theme-highlight-color);}
#aside-nav #aside-menu-button:hover #aside-menu-bars::before,
#aside-nav #aside-menu-button:hover #aside-menu-bars::after		{ background-color: var(--theme-highlight-color);}
#aside-nav .social-links-toolbar ul								{ flex-direction:column;}
#aside-nav .social-links-toolbar a 								{ display: block; width: var(--aside-nav-width); height: var(--aside-nav-width); border-top: 1px solid var(--theme-border-color); text-align: center; line-height: var(--aside-nav-width); color: #ccc; font-size: var(--aside-nav-social-fontsize); }
#aside-nav .social-links-toolbar a:hover						{ background-color: var(--theme-highlight-color); color: #fff; }


#nav-wrapper							{ z-index: 2000; position:fixed; left: var(--aside-nav-width); top: 0; width: 100vw; height: 100vh; max-width: 900px; background-color: #fff; transform: translateX(-100%); transition: transform .4s; }
#nav-wrapper::after						{ content: ''; position: absolute; left: 50%; top: 0; bottom:0; border-left: 1px solid var(--theme-border-color);}
#nav-inner								{ height: 100%; overflow-y: auto; position: relative;}
#nav-inner .nav-set 					{ padding: var(--nav-set-padding);}
#nav-inner .nav-set-title 				{ font-size: var(--nav-title-fontsize); font-weight: 300; color: var(--theme-highlight-color); margin-bottom: 1.25em;}
#nav-sets-lt 							{ width: 50%;}
#nav-sets-rt 							{ width: 50%;}
#nav-set-about 							{ min-height: 50vh;}
#nav-set-contact p,
#nav-set-contact address				{ display: flex; margin-bottom: 15px; font-size:var(--nav-contact-fontsize); line-height: 1.25em; color: var(--main-content-text-color); display: flex; align-items: center;}
#nav-set-contact address a 				{ display: flex; }
#nav-set-contact i 						{ width: 25px; margin-top: .1em;}
.nav-set .top-item 						{ margin-bottom: var(--nav-top-item-gap);}
.nav-set .top-item:last-child			{ margin-bottom: 0;}
.nav-set .top-item > a 					{ font-size:  var(--nav-top-item-fontsize); color: var(--aside-nav-top-item); }
.nav-set .sub-list 						{ margin: 30px 0 30px 20px;}
.nav-set .sub-item 						{ margin-bottom: var(--nav-sub-item-gap);}
.nav-set .sub-item:last-child			{ margin-bottom: 0;}
.nav-set .sub-item > a 					{ font-size:  var(--nav-sub-item-fontsize); color: var(--aside-nav-sub-item); }
.nav-set .top-item > a:hover,
.nav-set .sub-item > a:hover 			{ color: var(--theme-highlight-color); }

.show-nav #nav-wrapper 								{ transform: translateX(0);}
.show-nav #aside-nav #aside-menu-bars::before,
.show-nav #aside-nav #aside-menu-bars::after 		{ margin-top: 0; transition: margin .4s 0s, transform .4s .4s; }
.show-nav #aside-nav #aside-menu-bars::before		{ transform: translate(-50%, -50%) rotate(-45deg); }
.show-nav #aside-nav #aside-menu-bars::after		{ transform: translate(-50%, -50%) rotate(45deg); }


/*
========================
Main
========================
*/
#main-wrapper							{}
#main-inner								{}

.theme-bg 								{ background-color: var(--theme-bg-color);}
.content-bg 							{ background-color: var(--content-bg-color);}

.block-header 							{ height: var(--header-height); padding-left: 4%; position: relative; }
.block-header::after					{ z-index: 100; content: ''; position:absolute; left: 0; bottom:0; width: 100%; border-bottom: 1px solid var(--theme-border-color);}
.block-header h2 						{ font-size: var(--block-header-title-fontsize); font-weight: 400; }
.block-header-categories 			 	{ margin-right: 4%;}
.block-header-categories .swiper-slide 				{ width: auto !important; height: var(--header-height); line-height: var(--header-height); white-space: nowrap; margin-right: var(--block-header-category-gap); font-size: var(--block-header-category-fontsize); }
.block-header-categories .swiper-slide:last-child	{ margin-right: 0;}
.block-header-categories .swiper-slide a 			{ color: var(--header-text-color); }
.block-header-categories .swiper-slide:hover a,
.block-header-categories .swiper-slide.active a 	{ color: var(--theme-highlight-color);}

.block-hero 							{ position: relative; }
.block-hero-text-holder 				{ height: 100%; position: relative; }
.block-hero-text-content 				{ margin: auto 12%; padding: 30px 0;}
.block-hero-text-content img 			{ margin-bottom: 20px;}
.block-hero-title 						{ font-size: var(--block-hero-title-fontsize); font-weight: 300; line-height: 1.2em; color: var(--main-title-text-color);}
.block-hero-desc 						{ font-size: var(--block-hero-content-fontsize); color: var(--main-content-text-color); margin-top: 15px; }
.block-hero-link 						{ margin-top: 20px; display: inline-block; font-size: var(--block-hero-link-fontsize);}
.block-hero-texts,
.block-hero-images 						{ width: 50%; flex-grow: 0; flex-shrink: 0; position: relative; }
.block-hero-images .swiper 				{ margin: auto 0;}
.block-hero-images .thumb-rect 			{ padding-top: 76%;}
.block-hero-images .swiper-slide img 			{ transform: scale(1.15, 1.15); transition: transform 8s .8s;}
.block-hero-images .swiper-slide-active img 	{ transform: scale(1, 1);}
.block-hero .swiper-buttons 					{ position: absolute; right: 0; bottom: 0; z-index: 99; }

.block-carousel .swiper-slide 				{ width: var(--block-carousel-item-width); background-color: #fff; padding: var(--block-carousel-item-padding); border-right: 1px solid var(--theme-border-color);}
.block-carousel .swiper-slide:last-child	{ /*border-right: none;*/ }
.block-carousel .summary 					{ height: 4.7em; overflow: hidden; }

.block-slogan .swiper 						{ height: var(--block-slogan-height); min-height: var(--block-slogan-min-height); }
.block-slogan .swiper-slide 				{ height: 100%; padding: 0 6%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.block-slogan-text 							{ margin: auto 0; }

/** .block-columns also shared with .block-grids **/
.block-columns .col-item 					{ flex-grow: 0; flex-shrink: 0; border-right:1px solid var(--theme-border-color); border-bottom:1px solid var(--theme-border-color);}
.block-columns-1 .col-item,
.block-columns-1 .col-item 					{ width: 100%; border-right: none;}
.block-columns-2 .col-item 					{ width: 50%;}
.block-columns-2 .col-item:nth-child(2n) 	{ border-right: none;}
.block-columns-3 .col-item 					{ width: 33.33%;}
.block-columns-3 .col-item:nth-child(3n) 	{ border-right: none;}
.block-columns-4 .col-item 					{ width: 25%;}
.block-columns-4 .col-item:nth-child(4n) 	{ border-right: none;}

.block-columns .col-item 						{ padding: var(--section-padding) 4%; }
.block-columns .col-item .block-column-image 	{ width: 30%; margin-right: 8%;}
.block-columns .col-item h3 					{ margin-bottom: .6em; font-size: var(--block-columns-title-fontsize);}
.block-columns .col-item .link 					{ display: inline-block; margin-top: 20px;}
.block-columns .col-item .fr-view 				{ max-width: 600px;}

.block-grids .col-item						{ padding: var(--block-grids-item-padding)  !important; background-color: #fff; }

.block-title-columns 						{ padding: var(--section-padding) 4%; min-height: var(--block-title-columns-min-height);}
.block-title-columns h2 					{ width: 33.33%; max-width: 260px; margin-right: 5%; font-size: var(--block-title-columns-header-fontsize); font-weight: 400;}
.block-title-columns h3 					{ margin-bottom: .7em; font-size: var(--block-title-columns-title-fontsize);}

.block-thumb-article 						{ padding: var(--section-padding) 0;}
.block-thumb-article h1 					{ font-weight: 400; margin-bottom: .8em;}
.block-thumb-article-image 					{ width:180px; margin-right: 8%; flex-grow: 0; flex-shrink: 0;}
.block-thumb-article-image img 				{ mix-blend-mode: multiply;}
.block-thumb-article-text 					{ max-width: 860px;}
.block-thumb-article-text .fr-view 			{ font-size: 1.05em;}
.block-thumb-article-text .fr-view img 		{ mix-blend-mode: multiply;}

.block-pagination 							{ width: 100%; transform: translateY(-1px);}

.block-article article						{ padding: var(--section-padding) 0;}
.block-article h1 							{ font-weight: 400;}
.block-article .swiper 						{ position: relative; margin-bottom: 30px;}
.block-article .swiper-buttons 				{ position: absolute; right: 0; bottom:1px; }
.block-article-toolbar 						{ height: var(--header-height);}
.block-article-back 						{ display: block; width: var(--header-height); height: 100%; line-height: var(--header-height); text-align: center; font-size: var(--block-article-back-fontsize); white-space: nowrap; color: var(--main-content-text-color);}
.block-article-back i 						{ margin-right: .5em;}
.block-article-back:hover 					{ color: var(--theme-highlight-color);}

.block-article-nav 							{ position: relative;}
.block-article-nav::after					{ content: ''; position: absolute; left: 50%; top: 0; bottom:0; border-left: 1px solid var(--theme-border-color);}
.block-article-prev,
.block-article-next 						{ width: 50%; padding: var(--block-article-nav-padding); flex-grow: 0; flex-shrink: 0;}
.block-article-nav-image 					{ width: 38%; margin-right: 6%; flex-grow: 0; flex-shrink: 0;}
.block-article-nav-text h3					{ margin-bottom: .8em; font-size: var(--block-article-nav-title-fontsize);}
.block-article-nav-text .subtitle			{ margin-bottom: 20px; color: var(--main-content-text-color);}

.block-expandable 							{ padding: var(--section-padding) 0; margin:10px 0;}
.block-expandable-header 					{ padding: var(--block-expandable-header-padding); cursor: pointer; }
.block-expandable-header h3 				{ font-size: var(--block-expandable-title-fontsize); font-weight: 400; line-height: 1.2em; transition: all .2s; }
.block-expandable-header i 					{ font-size: var(--block-expandable-arrow-fontsize); color: var(--header-text-color); margin-left: 10px; transition: all .4s .4s;}
.block-expandable-content  					{ padding: 10px 2.7% 30px 2.7%; display: none; }
.block-expandable-content .fr-view 			{ max-width: 800px; font-size: var(--block-expandable-content-fontsize);}
.block-expandable-item.active h3, 
.block-expandable-header:hover h3 			{ color: var(--theme-highlight-color);}
.block-expandable-item.active .block-expandable-header i { transform: rotate(45deg);}

.block-label-grids 							{ background: url(../image/empty-grid.svg) repeat left top var(--content-bg-color); background-size: 25%;}
.block-label-grids .col-item 				{ padding: 0 !important; background-color: #fff; transition: all .2s;}
.block-label-grids .holder 					{ display: block; width: 100%; padding: 0; padding-top: 100%; position: relative;}
.block-label-grids .text 					{ position: absolute; left: 50%; top: 50%; width: 88%; transform: translate(-50%, -50%); text-align: center;}
.block-label-grids .text h3 				{ font-size: var(--block-label-grids-title-fontsize); font-weight: 300; margin-bottom: 0; }
.block-label-grids .text .link 				{ padding: .5em 1em; color: #888; border: 1px solid #aaa; border-radius: 30px;}
.block-label-grids .text .link i 			{ font-size: .9em; transform: none;}
.block-label-grids .col-item:hover 			{ background-color:var(--theme-highlight-color); }
.block-label-grids .col-item:hover h3 		{ color: #fff;}
.block-label-grids .col-item:hover .link 	{ color: #fff; border: 1px solid #fff;}

.block-slider-info-images 					{ width: 60%; }
.block-slider-info-images .swiper-buttons 	{ position: absolute; right: 0; bottom:0; }
.block-slider-info-text 					{ width: 40%; }
.block-slider-info-text .text				{ margin: auto var(--block-slider-info-padding); padding: 30px 0;}
.block-slider-info-text .button-wrapper		{ margin-top: 30px;}
.block-slider-info-text h2 					{ font-size: var(--block-slider-info-title-fontsize); font-weight: 400; margin-bottom: .8em;}
.block-slider-info-text ul 					{ padding-left: 0; margin: 0; }
.block-slider-info-text ul li 				{ list-style: none; font-size: var(--block-slider-info-list-fontsize); margin-bottom: .8em; font-weight: 500; display: flex; align-items:flex-start;}
.block-slider-info-text ul li::before		{ content: '\f058'; font: var(--fa-font-light); font-size: 1.4em; margin-right: 10px; margin-top: .1em; }

/*
========================
Footer
========================
*/
#footer-wrapper							{ background-color: var(--footer-bg-color); color: #e8e8e8; }
#footer-inner							{ padding: var(--footer-padding) 0; }
#footer-inner .footer-nav				{ }
#footer-inner .footer-nav li			{ margin: 5px 40px 5px 0;}
#footer-inner img 						{ width: 100%; max-width: var(--footer-logo-size); }
#footer-inner #footer-sets				{ margin-left: 8%; flex-grow: 1;}
#footer-inner .footer-set 				{ min-width: 25%; padding-left: 5%; padding-right: 20px; border-left: 1px solid var(--footer-border-color); }
#footer-inner .footer-title 			{ font-size: var(--footer-title-fontsize); font-weight: 500; color: var(--theme-highlight-color); margin-bottom: 1.4em;}
#footer-inner .footer-set p,
#footer-inner .footer-set address,
#footer-inner .footer-set li			{ font-size: var(--footer-content-fontsize); line-height: 1.2em; margin-bottom: 1.3em; }
#footer-inner .footer-set a 			{ }
#footer-inner .footer-set a:hover 		{ color: #fff;}
#footer-inner .footer-set p:last-child,
#footer-inner .footer-set address:last-child,
#footer-inner .footer-set li:last-child { margin-bottom: 0;}
#footer-bottom 							{ height: var(--aside-nav-width); color: #808080; border-top: 1px solid var(--footer-border-color);}
#footer-bottom .inner 					{ height: 100%;}
#footer-bottom a:hover 					{ color: #fff;}
#footer-copyright,
#footer-credit							{ font-size: 12px; }

/*
========================
Pages
========================
*/

/** Firm **/
#section-firm-features .col-item 					{ background-color: #fff;}

/** Product **/
#product-detail h2 									{ font-size: var(--product-detail-title-fontsize); font-weight: 400; margin-bottom: 1.1em;}
#product-spec,
#product-aside 										{ flex-grow: 0; flex-shrink: 0; background-color: #fff; }
#product-spec 										{ width: 70%; padding: var(--section-padding) 6%; }
#product-spec .fr-view + h2 						{ margin-top: var(--product-detail-paragraph-gap); }
#product-aside 										{ width: 30%; padding: var(--section-padding) 4%; }
#product-aside .links 								{ margin-top: 30px;}
#product-aside .links p 							{ margin: 1.4em 0; font-size: 1.1em;}


/** Contact us **/
#section-contact-form .feedback-form				{ width: 70%; flex-grow: 0; flex-shrink: 0; background-color: #fff; padding: var(--section-padding) 6%;}
#section-contact-form .feedback-form legend 		{ text-align: left; font-size: var(--contact-form-title-fontsize);}
#section-contact-form .feedback-form [type="submit"] { padding-left: 1.5em; padding-right: 1.5em; }
#section-contact-form .feedback-form [type="submit"] i { font-size: 1.05em;}
#section-contact-form .feedback-form .buttons 		{ margin-right: 30px;}
#section-contact-form .feedback-form .result 		{ margin: 20px 0; flex-grow: 1;}
#section-contact-form #aside-contact				{ width: 30%; flex-grow: 1; flex-shrink: 0; background-color: #fff;}
#section-contact-form #aside-contact-info			{ padding: var(--section-padding); }
#section-contact-form #aside-contact-info h3 		{ font-size: var(--contact-aside-title-fontsize); margin-bottom: 1.4em; }
#section-contact-form #aside-contact-info address,
#section-contact-form #aside-contact-info p 		{ display: flex; font-size: 1.05em; line-height: 1.25em; margin-bottom: 15px; color: var(--main-content-text-color);}
#section-contact-form #aside-contact-info address a { display: flex;}
#section-contact-form #aside-contact-info i 		{ width: 20px; margin-right: 10px; margin-top: 2px;}
#section-contact-form #aside-contact-map 			{ position: relative;}
#section-contact-form #aside-contact-map svg		{ width: var(--contact-map-marker-size); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--theme-highlight-color); fill: var(--theme-highlight-color);}