@charset "utf-8";

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

	:root {
		--footer-height: 64px;
	}

	/** Header **/
	#header-nav-wrapper nav,
	#header-nav-wrapper nav > ul 			{ gap: 60px}

	/** Footer **/
	#footer-inner							{ padding: 24px 0; }
	#footer-inner p,
	#footer-inner address 					{ font-size: .94em; }

	/** Homepage **/
	#cover-sliders .swiper-slide .text 		{ padding: 45px 0; }
	#cover-sliders .swiper-pagination 		{ bottom: 45px; }

	/** Project **/
	#project-banner							{ height: 60vh; min-height: 420px; }
	#project-banner header					{ padding: 40px 0;}
	#project-banner header h1 				{ font-size: 1.4em;}


}


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

	:root {
		--header-height: 180px;
		--header-height-minimal: 72px;
		--header-padding-minimal: 20px;
		--header-logo-width: 47px;
		--project-filter-height: 44px;
	}

	.list-table > li > div 					{ padding: 1.22em 5px 1.22em 0;}

	/** Header **/
	#header-nav-wrapper header img 			{ width: 47px; }
	#header-nav-wrapper nav,
	#header-nav-wrapper nav > ul 			{ gap: 54px}
	#header-nav-wrapper header h1 .zh 		{ font-size:17px; }
	#header-nav-wrapper header h1 .en 		{ font-size: 10px; letter-spacing: .315em; margin-top: 1px; }
	#header-nav-wrapper nav .label			{ font-size: 1.02em; }
	.minimal-header #header-nav-wrapper header { transform: translateY(-8px);}
	
	/** Main **/
	.main-padding							{ padding: 50px 0;}

	/** Footer **/
	#footer-copyright						{ padding-right: 10px; }
	#footer-credit							{ padding-left: 10px; }

	/** Homepage **/
	#cover-sliders .swiper-slide .text 		{ padding: 40px 0; }
	#cover-sliders .swiper-pagination 		{ bottom: 40px; }

	/** Projects **/
	.project-filter-set .label-button		{ font-size: 1.02em; letter-spacing: .06em;}

	/** Project **/
	#project-banner header					{ padding: 30px 0;}
	#project-banner header h1 				{ font-size: 1.25em;}
	#project-info 							{ padding: 40px 0;}
	#project-contents						{ margin-top: 40px;}

	/** Chronology **/
	#chronology h2							{ font-size: 1.4em; margin-bottom: 20px;}

	/** Awards **/
	#awards-section h2 						{ font-size: 1.33em; margin-bottom: 20px; }

	/** About **/
	#about-section section 					{ margin-bottom: 40px; display: block;}
	#about-section section .section-image	{ width: 100% !important; aspect-ratio: 3/2;}
	#about-section section .section-image img { display: block; object-fit: cover; width: 100%; height: 100%;}
	#about-section section .section-text	{ width: 100% !important; margin-top: 25px !important;}
	#about-section section h2				{ font-size: 1.25em; margin-bottom: 10px; }
	#award-section 							{ margin-top: 30px; }
	#award-section h2 						{ font-size: 1.25em; margin-bottom: 15px; }
	#award-section .list-table 				{ font-size: 1em;}

	/** Team **/
	#team-section h2					{ font-size: 1.33em; margin-bottom: 20px; }
	#team-section h3 					{ margin-bottom: 20px; font-size: 1.3em; }
	#team-section .thumb 				{ margin-bottom: 15px;}
	#team-section .position 			{ margin-top: 8px;}
	#team-section .name 				{ margin-top: 8px; font-size: 1.1em;}
	#team-section .fr-view 				{ margin-top: 10px;}
	#team-section .dept 				{ margin-top: 40px;} 

}


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

	:root {
		--header-height: 120px;
		--header-padding: 12px;
		--header-height-minimal: 54px;
		--header-padding-minimal: 3px;
		--footer-height: 48px;
		--project-filter-height: 38px;
	}

	article h1 								{ margin-bottom: 10px; font-size: 1.33em; }
	article	.contents 						{ margin: 10px 0;}

	.social-share 							{ padding: 8px 0;}

	.f-button 								{ width: 38px; height: 38px;}
	.f-button svg 							{ width: 18px; height: 18px;}
	.f-carousel__counter 					{ font-size: 14px; margin-top: -8px;} 

	.list-table > li > div 					{ padding: 1.16em 5px 1.16em 0;}

	.menu-horizontal						{ margin-bottom: 20px; }
	.menu-horizontal li 					{ font-size: 1em; margin-right: 40px;}

	/** Swiper **/
	.swiper-button-next,
	.swiper-button-prev 					{ width: 36px; height: 36px; line-height: 36px; }
	.swiper-button-next:after, 
	.swiper-button-prev:after 				{ font-size: 16px;}

	/** Pagination **/
	.pagination .page-item 					{ display: none;}
	.pagination .pager						{ display: flex; align-items: center; margin: 0 20px; color: #999; }
	.pagination .pager .seperator 			{ margin: 0 10px; width: auto; height: auto;}

	/** Header **/
	#header-nav-wrapper > .inner 			{ align-items: center;}
	#header-nav-wrapper header 				{ width: 100%; }
	#header-nav-wrapper header img 			{ width: 32px !important; visibility: visible !important; opacity: 1 !important; margin-right: 25px; }
	#header-nav-wrapper header h1 .zh 		{ font-size: 15px; }
	#header-nav-wrapper header h1 .en 		{ font-size: 9px; margin-top: 0; letter-spacing: .3em; }
	#menu-button 							{ position: absolute; right: 0; top: 6px; display: block; cursor: pointer; font-size: 1.2em; margin-left: auto;}
	#menu-close 							{ display: block; cursor: pointer; font-size: 1.2em; position:absolute; right:20px; top:20px;}
	
	.minimal-header #header-nav-wrapper header 			{ transform: translateY(0); flex-direction: row; align-items: center; }
	.minimal-header #header-nav-wrapper header h1 		{ transform: translateY(0);}
	.minimal-header #menu-button						{ position: static;}
	
	#header-nav-wrapper nav 							{ margin-top: 0; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #fff; display: block; overflow-y: auto;  }
	#header-nav-wrapper nav > ul 						{ display: block; margin: 80px 20px 40px 20px; border-top: 1px solid var(--light-border-color); }
	#header-nav-wrapper nav > ul > li 					{ border-bottom: 1px solid var(--light-border-color);}
	#header-nav-wrapper nav > ul > li > .label 			{ display: flex; padding: 1.2em 2px; font-size: 1.08em; letter-spacing: .08em; justify-content: space-between;}
	#header-nav-wrapper nav .menu a						{ font-size: 1em;}
	#header-nav-wrapper .dropdown .menu					{ position: static; display: none; padding-top: 0; transition: opacity .5s, visibility 0s !important;}
	#header-nav-wrapper .dropdown-click.opened .menu 	{ display: block;}
	#header-nav-wrapper .dropdown .menu li				{ margin-bottom: 20px;}

	#header-nav-wrapper #language-toolbar 				{ position: fixed; right: 60px; top: 23px;}
	#header-nav-wrapper #language-toolbar li 			{ color: var(--light-text-color);}
	#header-nav-wrapper .social-links-toolbar			{ position: fixed; left: 20px; top: 23px;}

	#header-nav-wrapper nav								{ transform: translateX(100%); transition: transform .4s; }
	.show-nav #header-nav-wrapper nav					{ transform: translateX(0);}

	/** Main **/
	#main-wrapper 							{ min-height: calc(100vh - var(--header-height) - var(--footer-height)); }
	.main-padding							{ padding: 30px 0;}

	/** Footer **/
	#footer-inner 							{ padding: 18px 0;}
	#footer-wrapper address,
	#footer-wrapper p:not(.copyright)		{ display: none; }
	#footer-wrapper .copyright 				{ width: 100%; justify-content: space-between;}
	#footer-credit::before 					{ display: none; }

	#index #footer-inner 					{ min-height: var(--header-height); /* Fix headroom space for mobile in homepage */ }

	/** Homepage **/
	#cover-sliders,
	#cover-sliders .swiper-slide			{ height: calc(100vh - var(--header-height)); min-height: 0;}
	#cover-sliders .swiper-slide .text 		{ padding: 30px 0; }
	#cover-sliders .swiper-slide .text p 	{ font-size: 1.1em; }
	#cover-sliders .swiper-pagination		{ display: none; }

	/** Projects **/
	#project-filters 						{ overflow: visible; }
	#project-filters > .inner 				{ justify-content: space-between; width: 84%;}
	.project-filter-set 					{ width: auto; }
	.project-filter-set .label-button 		{ font-size: .92em; letter-spacing: normal; display: block;}
	.project-filter-set ul 					{ display: none; min-height: 0; }
	.project-filter-set ul a.active			{ box-shadow: 0 0 0 1px #aaa;}
	.project-filter-set ul li 				{ font-size: .98em;}
	#project-list .info 					{ top: auto; bottom:0; height: auto; padding: 15px 20px; background: linear-gradient(to bottom, #353d6200 0%, #353d62aa 100%); opacity: 1; }
	#project-list .title					{ font-size: 1em; margin-bottom: 5px;}
	#project-list .subtitle					{ font-size: .9em; display: none;}
	#project-list .subtitle span:nth-child(2)::before { margin: 0 4px;}

	.project-filters-opened 												{ overflow: hidden;}
	.project-filters-opened #project-filters-wrapper 						{ z-index: 1020;}		
	.project-filters-opened #project-filters  								{ overflow-y: auto; max-height: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #fff; }
	.project-filters-opened #project-filters > .inner 						{ display: block; padding: 60px 0;}
	.project-filters-opened #project-filters .project-filter-set 			{ margin-bottom: 45px;}
	.project-filters-opened #project-filters .project-filter-set:last-child { margin-bottom: 0;}
	.project-filters-opened #project-filters .project-filter-set .label 	{ display: block; height: auto; margin-bottom: 10px;}
	.project-filters-opened #project-filters .label-button   				{ margin: 15px 0; font-size: 1.2em; }
	.project-filters-opened #project-filters ul 							{ display: block; margin: 0;}
	.project-filters-opened #filter-close 									{ display: block; position: fixed; right: 20px; top: 20px; cursor: pointer; font-size: 1.2em;  }

	/** Project **/
	#project-banner							{ min-height: 380px; }
	#project-banner header					{ padding: 25px 0;}
	#project-banner header h1 				{ font-size: 1.15em;}	
	#project-info 							{ font-size: 1em; padding: 40px 0 15px 0;}
	#project-info .label 					{ margin-bottom: 5px;}
	#project-contents 						{ margin-top: 30px;}
	#project-detail .social-share 			{ padding-top: 15px; font-size: .9em;}

	/** Chronology **/
	#chronology-list 						{ font-size: 1em;}
	#chronology-list .type					{ display: none;}

	/** News **/
	#news-list									{ margin-top: 40px;}
	#news-list .news-list-item 					{ margin-top: 15px;}
	#news-list .news-list-item .info 			{ margin-right: 5%;}
	#news-list .news-list-item .info .subtitle 	{ margin-bottom: 15px; font-size: 1em;}
	#news-list .news-list-item .info .title 	{ font-size: 1.33em;}
	#news-list .news-list-item .info .summary 	{ font-size: 1em;}
	#news-list .news-list-item .thumb 			{ height: 180px;}

	/** Post **/
	#news-article .swiper 						{ margin-bottom: 20px;}

	/** Contact **/
	#contact-section .section-image 			{ width: 48%; }
	#contact-section .section-form 				{ width: 48%; }
	#contact-section .section-form legend 		{ font-size: 1.33em; margin-bottom: 15px; }

}


/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {
	
	/** Column layout **/
	.column-3 .col-item 					    { width:47%; margin-right:6%; margin-top:50px; }
	.column-3 .col-item:nth-child(3n) 			{ margin-right:6%; }
	.column-3 .col-item:nth-child(-n+3) 		{ margin-top:50px; }
	.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:30%; margin-right:5%; margin-top:40px; }
	.column-4 .col-item:nth-child(4n)   	 	{ margin-right:5%; }
	.column-4 .col-item:nth-child(-n+4) 	    { margin-top:30px; }
	.column-4 .col-item:nth-child(3n)   	    { margin-right:0; }
	.column-4 .col-item:nth-child(-n+3) 	    { margin-top:0; }

	/** Projects **/
	#project-list 								{ gap:4px; }
	#project-list li 							{ flex: 0 0 calc((100% - 4px) / 2); }
	
}


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

	.list-table > li > div 				{ padding: 1em 5px 1em 0;}

	/** Swiper **/
	.swiper-button-next,
	.swiper-button-prev 				{ width: 32px; height: 32px; line-height: 32px; }
	.swiper-button-next:after, 
	.swiper-button-prev:after 			{ font-size: 14px;}
	
	/** Chronology **/
	#chronology h2						{ font-size: 1.25em; margin-bottom: 15px; }
	#chronology-list .location			{ display: none;}
	
	/** Awards **/
	#awards-section h2									{ font-size: 1.25em; margin-bottom: 15px; }
	#awards-list 										{ margin-top: 30px;}
	#awards-list .awards-list-item 						{ margin-top: 15px; }
	#awards-list .awards-list-item .icon 				{ right: 20px; top: 20px; width: 90px;}
	#awards-list .awards-list-item .info  				{ padding: 12px 15px; }
	#awards-list .awards-list-item .info .title 		{ font-size: 1.1em; margin-bottom: 5px;}
	#awards-list .awards-list-item .info .summary 		{ font-size: .95em;}

	/** Team **/
	#team-section h2					{ font-size: 1.25em; margin-bottom: 15px; }
	#team-section h3 					{ font-size: 1.2em; margin-bottom: 15px; }
	#team-section .name 				{ font-size: 1.02em;}
	#team-section .dept 				{ margin-top: 30px; }

	
	/** Contact **/
	#contact-section 							{ display: block;}
	#contact-section .section-image 			{ width: 100%; aspect-ratio: 3/2;}
	#contact-section .section-image img 		{ display: block; object-fit: cover; width: 100%; height: 100%;}
	#contact-section .section-form 				{ width: 100%; margin-top: 30px;}
	#contact-section .section-form legend 		{ font-size: 1.25em; }
	#contact-section .section-form .fr-view 	{ margin-bottom: 20px;}
	#contact-section .section-form .buttons 	{ margin-top: 20px;}

}

/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {
	
	/** Column layout **/
	.column-2 .col-item  				    { width:100%; margin-right:0; margin-top:2%; }
	.column-2 .col-item:nth-child(-n+2) 	{ margin-top:2%; }
	.column-2 .col-item:nth-child(1) 		{ margin-top:0; }

	.column-4 .col-item				     	{ width:47.5%; margin-right:5%; margin-top:25px; }
	.column-4 .col-item:nth-child(4n)	 	{ margin-right:5%; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:25px; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:5%; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:25px; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:0; }

	.menu-horizontal li 					{ margin-right: 22px;}
	
	/** Header **/
	#header-nav-wrapper header img 			{ margin-right: 16px;}

	/** Footer **/
	#footer-inner .social_link_messenger	{ right:12px; bottom:12px; width:40px; height:40px; line-height:40px; }
	
	/** Projects **/
	.project-filter-set .label-button i 	{ display: none; }

	/** Project **/
	#project-images  						{ gap: 4px; margin: 0 auto;}
	#project-images .thumb 					{ width: 100%; margin-bottom: 0;}
	#project-images .thumb-2 				{ width: 100%;}

	/** Awards **/
	#awards-list 										{ margin-top: 20px;}
	#awards-list .awards-list-item .thumb-banner 		{ padding-top: 68%;}
	#awards-list .awards-list-item .icon 				{ right: 15px; top: 15px; width: 70px;}
	#awards-list .awards-list-item .info  				{ padding: 12px 12px; }
	#awards-list .awards-list-item .info .title 		{ font-size: 1.02em; margin-bottom: 3px;}
	#awards-list .awards-list-item .info .summary 		{ font-size: .92em;}

	/** News **/
	#news-list								{ margin-top: 30px;}
	#news-list .news-list-item .info .subtitle { margin-bottom: 10px;}
	#news-list .news-list-item .info .title { font-size: 1.2em; letter-spacing: normal; margin-bottom: 8px;}
	#news-list .news-list-item .thumb 		{ height: 150px;}
	
}

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

	/** Column layout **/
	/*
	.column-4 .col-item 				 	{ width:100%; margin-right:0; margin-top:50px; }
	.column-4 .col-item:nth-child(4n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:50px; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:50px; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:50px; }
	.column-4 .col-item:nth-child(1) 		{ margin-top:0; }
	*/
	
	.column-3 .col-item 				 	{ width:100%; margin-right:0; margin-top:30px; }
	.column-3 .col-item:nth-child(3n) 	 	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+3)  	{ margin-top:30px; }
	.column-3 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+2)  	{ margin-top:30px; }
	.column-3 .col-item:nth-child(1) 		{ margin-top:0; }

	/** Nav **/
	#header-nav-wrapper nav > ul > li > .label	{ font-size: 1.05em; padding: 1.1em 2px; }
	#header-nav-wrapper #language-toolbar li 	{ font-size: 11px;}

	/** Main **/
	.main-padding							{ padding: 25px 0;}

	
	/** Projects **/
	#project-list 							{ gap: 3px; }
	#project-list li 						{ flex: 0 0 100%; }

	/** Awards **/
	#awards-list .awards-list-item .thumb-banner 	{ padding-top: 76%;}
	#awards-list .awards-list-item .icon 			{ right: 12px; top: 12px; width: 60px;}
	#awards-list .awards-list-item .info .title 	{ font-size: 1em; margin-bottom: 3px;}
	#awards-list .awards-list-item .info .summary 	{ font-size: .9em;}

	/** Contact **/
	#contact-section #contact-info 				{ display: block;}
	#contact-section #contact-info .col-item 	{ width: 100%;}
	#contact-section #contact-info p,
	#contact-section #contact-info address 		{ margin-bottom: 8px; padding-bottom: 0;}
	#contact-section #contact-info p br,
	#contact-section #contact-info address br 	{ display: none;}
	#contact-section #contact-info p span 		{ margin-right: 10px;}
	#contact-section .section-form input,
	#contact-section .section-form textarea 	{ font-size: 1em; }
	#contact-section .section-form [type="submit"] { width: 100%;}
	
}

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

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

}