@charset "utf-8";

/*
-----------------------------
For 1600px or less
-----------------------------
*/
@media screen and (max-width: 1600px) {

	:root {
		--header-height: 64px;
		--header-title-fontsize: 17px;
		--header-button-fontsize: 1.05em;
		--header-button-padding: 30px;
		--header-language-fontsize: 1em;
		--aside-nav-width: 72px;
		--aside-nav-fontsize: 14px;
		--aside-nav-social-fontsize: 18px;
		--nav-set-padding: 50px 40px 50px;
		--nav-title-fontsize: 1.6em;
		--nav-top-item-fontsize: 1.2em;
		--nav-top-item-gap: 25px;
		--nav-sub-item-fontsize: 1.1em;
		--footer-padding: 50px;
		--footer-logo-size: 270px;
		--footer-title-fontsize: 1.3em;
		--footer-content-fontsize: 1.02em;
		--section-padding: 60px;
		--swiper-button-size: 64px;
		--swiper-arrow-size: 36px;
		--thumb-info-title-fontsize: 1.3em;
		--pagination-arrow-fontsize: 2.1em;
		--block-header-title-fontsize: 1.5em;
		--block-header-category-fontsize: 1.12em;
		--block-header-category-gap: 50px;
		--block-hero-title-fontsize: 2.2em;
		--block-hero-content-fontsize: 1.05em;
		--block-hero-link-fontsize: 1.1em;
		--block-carousel-item-width: 25%;
		--block-carousel-item-padding: 30px;
		--block-columns-title-fontsize: 1.3em;
		--block-title-columns-header-fontsize: 1.6em;
		--block-title-columns-title-fontsize: 1.3em;
		--block-title-columns-min-height: 250px;
		--block-grids-item-padding: 30px;
		--block-article-back-fontsize: 1.05em;
		--block-article-nav-padding: 30px;
		--block-article-nav-title-fontsize: 1.3em;
		--block-label-grids-title-fontsize: 2.1em;
		--block-slider-info-padding: 10%;
		--block-slider-info-title-fontsize: 2.1em;
		--block-expandable-header-padding: 22px 10px;
		--block-expandable-title-fontsize: 1.3em;
		--block-expandable-arrow-fontsize: 1.1em;
		--block-expandable-content-fontsize: 1.02em;
		--product-detail-title-fontsize: 1.6em;
		--product-detail-paragraph-gap: 50px;
		--contact-form-title-fontsize: 1.5em;
		--contact-aside-title-fontsize: 1.3em;
		--contact-map-marker-size: 30px;
	}


}

/*
-----------------------------
For 1440px or less
-----------------------------
*/
@media screen and (max-width: 1440px) {

	:root {
		--header-height: 60px;
		--header-button-padding: 25px;
		--header-language-fontsize: .9em;
		--aside-nav-width: 68px;
		--aside-nav-fontsize: 13px;
		--aside-nav-social-fontsize: 16px;
		--nav-top-item-fontsize: 1.1em;
		--nav-top-item-gap: 20px;
		--nav-sub-item-fontsize: 1.02em;
		--footer-logo-size: 240px;
		--breadcrumbs-fontsize: 1.4em;
		--breadcrumbs-gap: 0 14px 0 10px;
		--section-padding: 50px;
		--swiper-button-size: 60px;
		--swiper-arrow-size: 30px;
		--pagination-arrow-fontsize: 2em;
		--block-hero-title-fontsize: 2em;
		--block-header-title-fontsize: 1.33em;
		--block-header-category-fontsize: 1.05em;
		--block-carousel-item-padding: 25px;
		--block-carousel-item-width: 33.33%;
		--block-grids-item-padding: 25px;
		--block-label-grids-title-fontsize: 2.1em;
		--block-article-back-fontsize: 1em;
		--block-article-nav-padding: 30px 25px;
		--block-expandable-header-padding: 20px 8px;
		--block-expandable-title-fontsize: 1.2em;
		--block-expandable-arrow-fontsize: 1.02em;
		--block-expandable-content-fontsize: 1.02em;
		--product-detail-title-fontsize: 1.5em;
		--product-detail-paragraph-gap: 40px;
	}

	h1  { font-size: 1.8em;}

	.fr-view .fr-spec-table th, 
	.fr-view .fr-spec-table td  { padding: 1em 8px; font-size: 1.02em;}

	.button		{ font-size:1em; }
	.button-md	{ font-size:1.02em; }									
	.button-lg	{ font-size:1.2em; }	

	.link 		{ font-size: 1em; }

}

/*
-----------------------------
For 1280px or less
-----------------------------
*/
@media screen and (max-width: 1280px) {

	.block-columns .col-item .block-column-image { display: none;}
	.block-columns-4 .col-item 					{ width: 33.33%;}
	.block-columns-4 .col-item:nth-child(4n) 	{ border-right: 1px solid var(--theme-border-color);}
	.block-columns-4 .col-item:nth-child(3n) 	{ border-right: none;}

	.block-thumb-article-image	{ width: 160px; margin-right: 4%;}

}

/*
-----------------------------
For 1025px or more
-----------------------------
*/
@media screen and (min-width: 1025px) {

	.block-hero-texts .swiper,
	.block-hero-texts .swiper-wrapper,
	.block-hero-texts .swiper-slide			{ height: 100% !important;}
	
}

/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) {

	:root {
		--header-height: 48px;
		--header-title-fontsize: 16px;
		--aside-nav-width: 48px;
		--nav-set-padding: 40px 9%;
		--nav-title-fontsize: 1.5em;
		--nav-top-item-fontsize: 1.12em;
		--nav-sub-item-fontsize: 1.02em;
		--nav-contact-fontsize: 1.02em;
		--footer-padding: 40px;
		--footer-title-fontsize: 1.2em;
		--breadcrumbs-fontsize: 1.1em;
		--breadcrumbs-gap: 0 12px 0 10px;
		--section-padding: 40px;
		--swiper-button-size: 48px;
		--swiper-arrow-size: 24px;
		--thumb-info-title-fontsize: 1.2em;
		--block-header-title-fontsize: 1.2em;
		--block-header-category-fontsize: 1.02em;
		--block-slogan-min-height: 270px;
		--block-hero-title-fontsize: 1.7em;
		--block-hero-content-fontsize: 1.02em;
		--block-hero-link-fontsize: 1.02em;
		--block-columns-title-fontsize: 1.2em;
		--block-title-columns-min-height: 200px;
		--block-title-columns-header-fontsize: 1.4em;
		--block-title-columns-title-fontsize: 1.2em;
		--block-article-nav-title-fontsize: 1.2em;
		--block-label-grids-title-fontsize: 1.8em;
		--block-slider-info-padding: 6%;
		--block-slider-info-title-fontsize: 1.8em;
		--block-slider-info-list-fontsize: 1.01em;
		--block-expandable-header-padding: 18px 8px;
		--block-expandable-title-fontsize: 1.15em;
		--product-detail-paragraph-gap: 30px;
		--contact-aside-title-fontsize: 1.2em;
	}


	.mobile-hidden 	{ display: none;}
	.mobile-element { display: block;}
 
	#container 		{ margin-left: 0;}

	#header-wrapper 			{ left: 0; border-top: 1px solid var(--theme-border-color);}
	#header-inner h1 a 			{ display: flex; align-items: center;}
	#header-inner h1 a::before 	{ content: ''; width: 28px; height: 28px; margin-right: 10px; background:url(../image/logo.svg) no-repeat 50% 50%; background-size: contain; }
	#header-language-toolbar	{ right: var(--header-height); border-right: 1px solid var(--theme-border-color);}
	#header-buttons 			{ margin-left: auto;}
	#header-buttons i 			{ font-size: 1.05em;}
	
	body.zh #header-inner h1	{ font-weight: 400; letter-spacing: .2em;}

	#aside-nav 					{ display: none;}

	#nav-wrapper 							{ left: 0; max-width: none; border-top: 1px solid var(--theme-border-color);}
	#nav-header								{ width: 100%; height: var(--header-height);}
	#nav-header .buttons 					{ width: 100%; height: 100%;}
	#nav-header .social-links-toolbar a 	{ display: block; width: var(--header-height); height: var(--header-height); border-right: 1px solid var(--theme-border-color); text-align: center; line-height: var(--header-height); color: #ccc; font-size: 16px; }

	#nav-wrapper::after 			{ top: var(--header-height);}
	#nav-inner 						{ height: calc(100vh - var(--header-height));}
	#nav-inner .nav-set-title 		{ font-weight: 400;}
	#nav-inner .nav-set .sub-list	{ margin: 25px 0 25px 20px;}
	#nav-set-about 					{ min-height: 0; padding-bottom: 40px;}
	#nav-set-products 				{ padding-bottom: 150px !important;}

	#menu-button 					{ display: block; flex-shrink: 0; width: var(--header-height); height: var(--header-height); line-height: var(--header-height); border-left: 1px solid var(--theme-border-color); text-align: center; color: var(--header-text-color);}
	#menu-close 					{ width: var(--header-height); height: 100%; line-height: var(--header-height); text-align: center; border-left: 1px solid var(--theme-border-color); font-size: 18px; color: var(--header-text-color); }

	body.show-nav 					{ overflow: hidden;}

	.block-header.has-category								{ flex-direction: column; align-items: flex-start; height: auto; padding: 0;}
	.block-header.has-category h2,
	.block-header.has-category .block-header-categories 	{ height: var(--header-height); width: 100%; padding: 0 4%; }
	.block-header.has-category h2 							{ line-height: var(--header-height); }
	.block-header.has-title .block-header-categories 		{ border-top: 1px solid var(--theme-border-color); }

	.block-hero 					{ flex-direction: column-reverse;}
	.block-hero-texts, 
	.block-hero-images				{ width: 100%;}
	.block-hero-text-content 		{ padding: 30px 0 50px 0; margin: auto 6%;}
	.block-hero-images .thumb-rect  { padding-top: 66.67%;}
	.block-hero .swiper-buttons 	{ bottom: auto; top: 0; transform: translateY(-100%);}

	.block-title-columns			{ flex-direction: column; padding: var(--section-padding) 4%;}
	.block-title-columns h2 		{ margin-bottom: 1.2em;} 
	.block-title-columns h3 		{ margin-bottom: .5em;}

	.block-label-grids .text .link  { font-size: .9em;}

	.block-slider-info 				{ flex-direction: column;}
	.block-slider-info-images,
	.block-slider-info-text 		{ width: 100%;}
	.block-slider-info-images .thumb-rect { padding-top: 66.67%;}
	

	#product-detail 				{ flex-direction: column;}
	#product-spec 					{ border-bottom: 1px solid var(--theme-border-color);}
	#product-spec,
	#product-aside 					{ width: 100%;}

	#section-contact-form 			{ flex-direction: column;}
	#section-contact-form .feedback-form { width: 100%; border-bottom: 1px solid var(--theme-border-color);}
	#section-contact-form #aside-contact { width: 100%; flex-direction: row;}
	#aside-contact-info 			{ border-right: 1px solid var(--theme-border-color);}
	#aside-contact-info,
	#aside-contact-map 				{ width: 50%; flex-grow: 0; flex-shrink: 0;}
}


/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {

	:root {
		--section-padding: 30px;
		--block-slogan-height: 40vh;
		--block-carousel-item-padding: 20px 20px 30px 20px;
		--block-grids-item-padding: 20px 20px 30px 20px;
	}
	
	h1  { font-size: 1.7em;}
	
	article .contents { margin: 15px 0;}

	#footer-inner img 							{ display: none;}
	#footer-inner #footer-sets 					{ margin-left: 0;}
	#footer-inner .footer-set:first-child		{ padding-left: 0; border-left: none;}

	/** Column layout **/
	.column-3 .col-item 					    { width:49%; margin-right:2%; margin-top:2%; }
	.column-3 .col-item:nth-child(3n) 			{ margin-right:2%; }
	.column-3 .col-item:nth-child(-n+3) 		{ margin-top:2%; }
	.column-3 .col-item:nth-child(2n)	   	 	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+2)	   	 	{ margin-top:0; }

	.column-4 .col-item                 	 	{ width:32%; margin-right:2%; margin-top:2%; }
	.column-4 .col-item:nth-child(4n)   	 	{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+4) 	    { margin-top:2%; }
	.column-4 .col-item:nth-child(3n)   	    { margin-right:0; }
	.column-4 .col-item:nth-child(-n+3) 	    { margin-top:0; }
	
	.block-columns-3 .col-item 					{ width: 50%;}
	.block-columns-3 .col-item:nth-child(3n) 	{ border-right: 1px solid var(--theme-border-color);}
	.block-columns-3 .col-item:nth-child(2n) 	{ border-right: none;}

	.block-article-nav-image					{ display: none;}


}


/*
-----------------------------
For 768px or less
-----------------------------
*/
@media screen and (max-width: 768px) {
	
}

/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {

	:root {
		--nav-set-padding: 30px 7%;
		--nav-title-fontsize: 1.4em;
		--nav-top-item-fontsize: 1.08em;
		--nav-top-item-gap: 18px;
		--nav-sub-item-fontsize: 1.01em;
		--nav-sub-item-gap: 15px;
		--footer-padding: 30px;
		--footer-title-fontsize: 1.12em;
		--footer-content-fontsize: 1em;
		--breadcrumbs-fontsize: 1em;
		--breadcrumbs-gap: 0 10px 0 6px;
		--form-row-gap: 20px;
		--form-input-height: 36px;
		--form-select-height: 36px;
		--pagination-arrow-fontsize: 1.6em;
		--block-header-title-fontsize: 1.08em;
		--block-header-category-fontsize: 1em;
		--block-header-category-gap: 30px;
		--block-hero-title-fontsize: 1.6em;
		--block-slogan-min-height: 220px;
		--block-carousel-item-width: 50%;
		--block-columns-title-fontsize: 1.12em;
		--block-title-columns-title-fontsize: 1.12em;
		--block-article-nav-title-fontsize: 1.12em;
		--block-slider-info-title-fontsize: 1.6em;
		--block-expandable-header-padding: 16px 0;
		--block-expandable-title-fontsize: 1.07em;
		--block-expandable-arrow-fontsize: .8em;
		--block-expandable-content-fontsize: 1em;
		--contact-form-title-fontsize: 1.33em;
	}

	h1 { font-size: 1.6em;}

	form .label { margin-bottom: 8px;}

	.button-md { font-size: 1em;}
	
	/** Column layout **/
	.column-2 .col-item  				    { width:100%; margin-right:0; margin-top:2%; }
	.column-2 .col-item:nth-child(-n+2) 	{ margin-top:20px; }
	.column-2 .col-item:nth-child(1) 		{ margin-top:0; }
	
	.column-3 .col-item 				 	{ width:100%; margin-right:0; margin-top:2%; }
	.column-3 .col-item:nth-child(3n) 	 	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+3)  	{ margin-top:20px; }
	.column-3 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+2)  	{ margin-top:20px; }
	.column-3 .col-item:nth-child(1) 		{ margin-top:0; }

	.column-4 .col-item				     	{ width:49%; margin-right:2%; margin-top:2%; }
	.column-4 .col-item:nth-child(4n)	 	{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:20px; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:20px; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:0; }	
	
	/** fr-view **/
	.fr-view h3 									{ font-size: 1.12em;}
	.fr-view .paragraph-column 						{ flex-wrap: wrap;}
	.fr-view .paragraph-column > div  				{ width: 100% !important; margin-bottom: 20px;}
	.fr-view .paragraph-column > div:last-child 	{ margin-bottom: 0;}
	.fr-view .fr-spec-table th, 
	.fr-view .fr-spec-table td						{ font-size: 1em; padding: .7em 10px .7em 0;}


	body.en #header-inner h1				{ font-size: 13px; }

	#nav-wrapper::after 					{ display: none;}
	#nav-inner 								{ flex-direction: column;}
	#nav-inner .nav-set .sub-list			{ margin: 20px 0 20px 15px;}
	#nav-sets-lt,
	#nav-sets-rt 							{ width: 100%;}
	#nav-set-contact 						{ display: none;}

	#footer-inner 							{ padding: 0; margin: 0; width: 100%;}
	#footer-inner #footer-sets 				{ flex-direction: column;}
	#footer-inner .footer-set 				{ width: 100%; border-left: none; padding: 25px 6% !important; border-top:1px solid var(--footer-border-color);}
	#footer-inner .footer-set:first-child	{ border-top: none;}
	#footer-inner .footer-title 			{ margin-bottom: 1em;}
	#footer-inner .footer-set p, 
	#footer-inner .footer-set address, 
	#footer-inner .footer-set li 			{ margin-bottom: .9em;}

	.block-hero-desc 							{ margin-top: 8px;}
	.block-hero-desc br 						{ display: none;}

	.block-columns-2 .col-item					{ width: 100%; border-right: none; }
	.block-columns-3 .col-item 					{ width: 100%; border-right: none;}
	.block-columns-4 .col-item 					{ width: 50%;}
	.block-columns-4 .col-item:nth-child(4n),
	.block-columns-4 .col-item:nth-child(3n) 	{ border-right: 1px solid var(--theme-border-color);}
	.block-columns-4 .col-item:nth-child(2n) 	{ border-right: none; }
	
	.block-thumb-article h1 				{ margin-bottom: .6em;}
	.block-thumb-article-image 				{ width: 20%; margin-right: 5%;}

	.block-article-nav-text h3 				{ margin-bottom: .6em;}

	#product-detail h2						{ margin-bottom: .9em;}
	#product-aside .links					{ margin-top: 20px;}
	#product-aside .links p 				{ font-size: 1em; margin: 1.2em 0;}

	#section-contact-form #aside-contact 	{ flex-direction: column;}
	#aside-contact-info 					{ border-right: none;}
	#aside-contact-info, 
	#aside-contact-map						{ width: 100%;}
	
}

/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {

	:root {
		--header-height: 42px;
		--header-min-height: 48px;
		--aside-nav-width: 42px;
		--swiper-button-size: 42px;
		--swiper-arrow-size: 21px;
		--block-header-category-gap: 25px;
		--block-carousel-item-width: 100%;
	}

	/** Column layout **/
	.column-4 .col-item 				 	{ width:100%; margin-right:0; margin-top:2%; }
	.column-4 .col-item:nth-child(4n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:2%; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:2%; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:2%; }
	.column-4 .col-item:nth-child(1) 		{ margin-top:0; }
	
	#container								{ padding-top: var(--header-min-height);}
	#header-wrapper 						{ height: var(--header-min-height);}
	#header-buttons #header-lauguage-button { width: var(--header-min-height); right: var(--header-min-height); line-height: var(--header-min-height);}
	#header-language-toolbar 				{ right: var(--header-min-height); width: var(--header-min-height); top: var(--header-min-height);}

	#nav-header								{ height: var(--header-min-height);}
	#nav-header .social-links-toolbar a		{ width: var(--header-min-height); height: var(--header-min-height); line-height: var(--header-min-height);}

	#menu-button							{ width: var(--header-min-height); height: var(--header-min-height); line-height: var(--header-min-height);}
	#menu-close 							{ width: var(--header-min-height); line-height: var(--header-min-height);}
	

	.block-columns-4 .col-item 					{ width: 100%; border-right: none !important;}

	.block-slider-info-text h2 					{ margin-bottom: .5em;}
	
	#product-detail h2 							{ font-size: 1.4em; margin-bottom: .6em;}

	#section-contact-form #aside-contact		{ border-left:none;} 
	#section-contact-form .feedback-form,
	#section-contact-form #aside-contact-info	{ padding: var(--section-padding) 5%; }

}

/*
-----------------------------
For 360px or less
-----------------------------
*/

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

}