@charset "utf-8";
 


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

/* Elements */
.inner-shift                         		{ width:92%; padding:40px 4%; }

.banner .inner          			 		{ height:480px; }
.banner-short .inner				 		{ height:360px; }
.banner-auto-height .inner			 		{ height:auto; }

.button								 		{ font-size:1.12em; } 

.column-2 .col-item     			 		{ width: 46%; margin:20px 0; margin-right:8%; }
.column-2 .col-item:nth-child(2n)	 		{ margin-right:0; }
.column-3 .col-item     			 		{ width:30%; margin:25px 0; margin-right:5%; }
.column-3 .col-item:nth-child(3n)	 		{ margin-right:0; }

.carousel-list .carousel-cell        		{ width:28%; }
.carousel-list .content				 		{ padding:25px 30px; }
.carousel-list .icon-small			 		{ margin-bottom:25px; }

.aside-image-section .inner-shift			{ padding:0; }
.aside-image-section .image					{ min-height:520px; }		 
.aside-image-section .text					{ padding:35px 30px 45px 30px; }
														
/* Footer */
#footer-inner						 		{ padding:40px 0; }
#footer-copyright .inner					{ padding:12px 0; }

/* index.php */
.fullpage .slogan					 		{ font-size:1.4em; }
.fullpage:first-child h2			 		{ font-size:2.4em; margin-bottom:.3em; }
.fullpage:first-child .text					{ margin-top:15px; }
												
#quality							 		{ margin-top:50px; padding-top:50px; }
#selected-project-section					{ padding:40px 0 80px 0; }
#bottom-contact-section .button		 		{ font-size:1.25em; }

/* engineering-management.php */
#safe-health-section				 		{ background-size:50% 50%; background-position:right 0 top 50%; }
#safe-health-items 					 		{ padding-bottom:60px; }
#contact-button-section .button				{ font-size:1.25em; }

/* bim.php */
#bim-case .inner-shift						{ padding:15px 0 0 0; }

/* projects.php */
#filter-section						 		{ padding:160px 0 40px 0; }
#project-filter-tabs .tab			 		{ height:48px; line-height:48px; padding:0 20px; }
#project-search-form				 		{ height:36px; margin:0 10px; }
#project-search-form input			 		{ height:36px; }

#projects-section					 		{ padding:50px 0 30px 0; }
#projects.no-filter #projects-section 		{ padding-top:160px; }

/* about.php */
.chairperson-section .inner-shift.offset 	{ padding:0; }
.chairperson-item					 		{ padding-bottom:20px; }
.chairperson-item .profile					{ width:300px; }
.chairperson-item .profile .thumb		 	{ width:300px; }

.team-item .info					 		{ padding:15px; height:90px; }
.team-item .title, .pop-window .title		{ font-size:1.25em; }

.pop-window .content 	 			 		{ padding:40px 40px 40px 7%; }

#history-items								{ padding-bottom:30px; }

/* join-us.php */
#recruit-section					 		{ padding:40px 0 60px 0; }
#recruit-content .fr-view			 		{ padding:40px 4%; }

/* contact.php */
#contact-section						 	{ padding:160px 0 0 0; }
#contact-info .data							{ margin-bottom:20px; }

}

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

/* Elements */
h1											{ font-size:1.7em; }
h2											{ font-size:1.5em; }
h3											{ font-size:1.33em; }

.banner .fr-view							{ font-size:1.1em; line-height:1.7em;  }

.aside-image-section .text h3				{ font-size:1.33em; }


/* Header */
#header-wrapper						  		{ padding-top:30px; }
#header-inner h1							{ width:130px; height:80px; }
#header-inner nav li a    			  		{ min-width:140px; }
#header-inner nav li:last-child a			{ min-width:80px; }

/* index.php */
.fullpage h2								{ font-size:1.7em; }
.fullpage:first-child .text          		{ margin-top:40px; }
.fullpage:first-child h2					{ font-size:2.1em; }

/* detail.php */
#slideshow-section							{ padding:160px 0 0 0; }
 
/* join-us.php */
#recruit-section h2							{ margin-bottom:20px; }	
}


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

/* Elements */
.column-4 .col-item     					{ width:30%; margin-right:5%; }
.column-4 .col-item:nth-child(4n)			{ margin-right:5%; }
.column-4 .col-item:nth-child(3n)			{ margin-right:0; }

.check-list li								{ margin-top:20px; }
.check-list .check-icon						{ width:30px; height:30px;}
.check-list svg								{ width:30px; height:30px; }
.check-list .title							{ font-size:1.1em; }

.aside-image-section .image					{ min-height:480px; }	

/* Header */
#header-inner						 		{ height:60px; }
#header-inner nav                			{ position: fixed; right: 0;top:0; bottom:0; width: 100%; max-width:480px; z-index:999; 
												padding:60px 0 40px 0; background:#fff; transform: translateX(100%);transition: all .4s; 
												overflow-y:auto; }
#header-inner nav ul            			{ display: block; border-top: 1px solid #eee;}
#header-inner nav li.contact     			{ display: block;}
#header-inner nav li             			{ border-left:none; border-bottom: 1px solid #eee; width:100%;}
#header-inner nav li a           			{ width:100%; padding:22px 0;  }
#header-inner nav li:before					{ width:4px; }

.menu-button								{ display:block; cursor:pointer; }
.menu-button .bar                			{ width: 25px; height: 2px; background:#2b382e; margin: 5px auto; }

.menu-close                      			{ display: block; position: absolute; right:20px; top:20px;  font-size:1.4em; cursor: pointer; color:#aaa; }


.show-nav #header-inner nav      			{ transform: translateX(0); }

/* projects.php */
#filter-section								{ padding:140px 0 40px 0; }
#projects.no-filter #projects-section 		{ padding-top:140px; }

/* contact.php */	
#contact-section						 	{ padding:140px 0 0 0; }

}


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

/* Elements */
.banner .inner          			 		{ height:450px; }
.banner-short .inner				 		{ height:360px; }
.banner-auto-height .inner			 		{ height:auto; }
.banner h2									{ margin-bottom:20px; }
.banner .text								{ max-width:540px; }
.banner .fr-view							{ }
.banner .fr-view br							{ display:none; }

.column-2 .col-item     			 		{ width: 46%; margin:15px 0; margin-right:8%; }
.column-2 .col-item:nth-child(2n)	 		{ margin-right:0; }
.column-3 .col-item     			 		{ width:30%; margin:20px 0; margin-right:5%; }
.column-3 .col-item:nth-child(3n)	 		{ margin-right:0; }

.carousel-list .carousel-cell        				{ width:36%; }
.carousel-list .holder								{ padding-top:140%; }
.carousel-list .flickity-prev-next-button.previous 	{ margin-left:30px; }
.carousel-list .flickity-prev-next-button.next 		{ margin-right:30px; }

.project-item .title						{ font-size:1.2em; }
.project-item .info							{ padding:15px; height:100px; }

/* Header */
#header-inner h1							{ width:113px; height:70px; }

/* Footer */
#footer-nav									{ width:25%; }

/* index.php */
#services .fr-view							{ font-size:1.1em;  }
 
/* projects.php */
#filter-section								{ padding:120px 0 40px 0; }
#projects.no-filter #projects-section 		{ padding-top:130px; }

/* detail.php */
#slideshow-section							{ padding:120px 0 60px 0; }
#intro-section								{ padding:10px 0 50px 0; }
#detail-info								{ width:360px; }

/* join-us.php */
#recruit-list ul							{ width:250px; }
 
/* contact.php */
#contact-section							{ padding:120px 0 0 0; }
#feedback-section                   		{ padding:3% 0 50px 0;}
}


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

/* Elements */
h1											{ font-size:1.6em; }
h2											{ font-size:1.4em; }

form input,
form select,
form textarea       						{ padding:.5em .7em; font-size:1.05em; height:40px; }
form textarea								{ height:150px; }

.inner-shift                         		{ padding:30px 4%; }
.inner-shift .offset-content				{ width:100% !important; }
.aside-image-section .inner-shift			{ padding:0; }

.aside-image-section .offset-content		{ display:block; }
.aside-image-section .image				    { width:100%; min-height:0; padding-top:64%; }
.aside-image-section .text					{ width:100%; min-width:0; max-width:none; }
.aside-image-section .text .item			{ margin-bottom:6%; }
.aside-image-section .text .item:last-child	{ margin-bottom:0; }

.bg-transparent-grey    					{ background:linear-gradient(180deg, rgba(129,204,170,0) 200px, rgba(242,239,233,1) 200px); }

.banner .inner          			 		{ height:400px; }
.banner-short .inner				 		{ height:360px; }
.banner-auto-height .inner			 		{ height:auto; }

.column-2 .col-item     			 		{ width: 47.5%; margin:2.2% 0; margin-right:5%; }
.column-2 .col-item:nth-child(2n)	 		{ margin-right:0; }
.column-3 .col-item     			 		{ width: 47.5%; margin:2.2% 0; margin-right:5%; }
.column-3 .col-item:nth-child(3n)	 		{ margin-right:5%; }
.column-3 .col-item:nth-child(2n)	 		{ margin-right:0; }

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

.carousel-list .carousel-cell        		{ width:45%; }

.carousel-list .flickity-prev-next-button			{ width:48px; height:48px; }
.carousel-list .flickity-prev-next-button.previous 	{ margin-left:48px; }
.carousel-list .flickity-prev-next-button.next 		{ margin-right:48px; }

.carousel-box .flickity-page-dots			{ bottom:-30px; left: 0; right: 0; text-align:center;}

.project-list.column-3 .project-item		 		{ width:47.5%; margin-right:5%; }
.project-list.column-3 .project-item:nth-child(3n) 	{ margin-right:5%; }
.project-list.column-3 .project-item:nth-child(2n) 	{ margin-right:0; }

.project-list.column-3 .project-item .info	 		{ height:90px; padding:12px; }

.icon-list .title									{ font-size:1.2em; }

.check-list .title									{ font-size:1.1em; }

/* Footer */
#footer-inner										{ flex-wrap:wrap; }
#footer-nav,
#footer-contact										{ width:50%; padding-left:20px; }
#footer-contact .social-links						{ position:static; margin-top:20px; }
#footer-brand										{ width:100%; text-align:left; padding:0; margin-top:40px; }
#footer-brand .title								{ font-size:1.33em; }
#footer-brand .footer-notes							{ font-size:1.1em; }
#footer-brand .copyright,
#footer-brand .credit								{ margin-left:0; margin-right:15px; }

/* index.php */
.fullpage .slogan									{ font-size:1.3em; }
.fullpage h2										{ font-size:1.5em; }
.fullpage .fr-view									{ font-size:1.1em; }
.fullpage:first-child h2							{ font-size:1.9em; }

#news-section										{ padding-bottom: 15px;}
#news-section .text									{ width: 100%;}

#selected-project-section							{ padding:40px 0 60px 0; } 

#bottom-contact-section .text-button-wrapper		{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
#bottom-contact-section .text,
#bottom-contact-section .button						{ position:static; transform:none; }
#bottom-contact-section .text						{ margin-bottom:50px; }

/* engineering-management.php */
#safe-health-section								{ background-image:none; }
#contact-button-section								{ height:250px; }

/* bim.php */
#bim-features h2									{ font-size:1.4em; }
#bim-features .has-subtitle .subtitle				{ font-size:1.1em; } 

/* projects.php */
#filter-section										{ padding:130px 0 30px 0; }	
#project-search-form								{ width:220px; }
#project-filter-bottom								{ padding:20px 25px; flex-wrap:wrap; }
#project-filter-bottom .set							{ width:50%; margin:15px 0; }
#project-filter-bottom .set:nth-child(odd)			{ padding-left:0; border:none; }

#projects.no-filter #projects-section 				{ padding-top:130px; }

/* detail.php */
#intro-section										{ padding:0 0 50px 0; }
#intro-section .flex-justify						{ display:block; }
#detail-info										{ width:100%; margin-top:20px; margin-left:0; }

/* about.php */
.chairperson-section								{ padding-top:4%; }
.chairperson-item .profile 							{ width:250px; }
.chairperson-item .profile .thumb					{ width:250px; }
.chairperson-item .fr-view							{ padding:40px 5%; }

#team-section										{ padding:50px 0 30px 0; }
#team-section h2									{ margin-bottom:10px; }

/* joinus.php */
#recruit-wrapper									{ display:block; }
#recruit-list                               		{ width:100%; margin-bottom:3%; }
#recruit-list .selector                     		{ display:block; padding:14px 4%; margin-bottom:0; }
#recruit-list .selector::after						{ top:18px; right:15px; }
#recruit-list ul                            		{ width: 100%; height:0; overflow: hidden; border-bottom:1px solid #ddd; }
#recruit-list ul.show                       		{ height:auto;}
#recruit-content .fr-view							{ padding:30px 4%; }
#recruit-list li									{ padding:16px 4%; color:#a46753; background:#fff; }
#recruit-list li.active				        		{ color:#a46753; background:#fff;  }
#recruit-list li.active:hover	            		{ }

}



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

/* Elements */
h1											{ font-size:1.5em; padding-top:4px; }
h2											{ font-size:1.33em; }
h3											{ font-size:1.2em; }

form .set									{ width:100%; }
form .row									{ margin-bottom:8px; }
form input, 
form select, 
form textarea								{ padding:.2em .7em; height:42px; }
form textarea								{ height:150px; }
form .submit-wrapper						{ text-align:center; display:block; }
form .result								{ text-align:center; width:100%; margin-top:20px; }

.fr-view ul li								{ line-height:1.5em; }
.fr-view.text-list ul li					{ padding:.5em .2em; }

.inner-shift								{ padding:25px 4%; }

.column-2 .col-item     			 		{ width: 100%; margin:12px 0; margin-right:0 !important; }
.column-3 .col-item     			 		{ width: 100%; margin:12px 0; margin-right:0 !important; }
.column-4 .col-item     					{ width: 100%; margin:12px 0; margin-right:0 !important; }

.project-item .info							{ padding:12px; }
.project-item .info-height					{ height:220px; padding:18px 15px; }
.project-item .title						{ font-size:1.1em; }
.project-item .types						{ font-size:1em; }

.banner-short .inner						{ height:320px; }

.check-list li								{ margin-top:12px; }

.aside-image-section .text					{ padding:25px 4% 35px 4%; }

/* Header */
#header-wrapper								{ padding-top:15px; }
#header-inner h1							{ width:97px; height:60px; }

#header-inner						 		{ height:48px; }
#header-inner nav                			{ padding:48px 0 40px 0; }
#header-inner nav li a           			{ padding:18px 0; font-size:1.2em;  }

.menu-button                     			{ top:10px; }
.menu-button .bar							{ width:21px; }
.menu-close                      			{ top:12px; right:4%; font-size:1.5em; }

/* Footer */
#footer-inner								{ padding:20px 0; display:block; }
#footer-nav,
#footer-contact								{ width:100%; padding:0; border:none; border-bottom:1px solid #666; 
												padding-bottom:20px; margin-bottom:25px; }
#footer-nav ul								{ display:flex; flex-wrap:wrap; }
#footer-nav li								{ width:50%; margin:10px 0; }
#footer-contact address, 
#footer-contact .phone						{ margin-bottom:15px; }
#footer-brand								{ width:100%; text-align:left; margin-top:0; }
#footer-brand .footer-notes					{ margin:15px 0; font-size:1em; }
#footer-brand .logo							{ position:static; }
#footer-brand .title						{ font-size:1.2em; }


/* Main */
.banner .text.has-subtitle .subtitle		{ font-size:1.1em; }
.banner .fr-view							{ line-height:1.5em; font-size:1em; }

.button										{ font-size:1.12em; padding:.7em 1.25em .8em 1.25em; }
.button.arrow								{ padding-right:1.1em; }
.button.arrow:after							{ font-size:12px; margin-left:1em; }

.play-button								{ width:60px; height:60px; }

.carousel-list .flickity-prev-next-button.previous 	{ width:36px; height:36px; margin-left:10px; }
.carousel-list .flickity-prev-next-button.next 		{ width:36px; height:36px; margin-right:10px; }

.flickity-page-dots								{ bottom:-25px; }
.flickity-page-dots .dot						{ width:6px; height:6px; margin:0 5px; }

.aside-image-section							{ display:block; }
.aside-image-section .image						{ min-height:0; padding-top:60%; }
.aside-image-section .text						{ width:100%; min-width:0; max-width:none; padding:30px 4%; display:block; }
.aside-image-section .text .item				{ margin-bottom:30px; }
.aside-image-section .text .item:last-child		{ margin-bottom:0; }
.aside-image-section .text h3					{ font-size:1.25em; }


/* index.php */
.fullpage .slogan					 		{ font-size:1.2em; }
.fullpage:first-child h2			 		{ font-size:1.7em; margin-bottom:.3em; }
.fullpage .fr-view							{ font-size:1em; line-height:1.6em; margin-bottom:20px; }
.fullpage .scroll-down						{ bottom:3%; }

#services .fr-view							{ margin-bottom:20px; }

#selected-project-section 					{ padding:40px 0; }
#selected-project-section h2				{ margin-bottom:20px; }

#bottom-contact-section .text				{ margin-bottom:30px; }
#bottom-contact-section .button				{ font-size:1.12em; padding:.8em 1.2em .9em 1.5em; }

/* engineering-management.php */ 
#safe-health-items							{ padding-bottom:40px; }
#contact-button-section .button				{ font-size:1.12em; padding:.7em 1em .8em 1.25em; }		

/* bim.php */
#bim-features h2							{ font-size:1.3em; }
#bim-features .fr-view						{ font-size:1em; line-height:1.5em; }
#all-around									{ margin-top:30px; padding-top:30px; }
#all-around .text							{ position:static; transform:none; }
#bim-features								{ padding:4% 0 20px 0; }
#bim-case									{ padding:0 0 30px 0;  }

/* projects.php */
#filter-section								{ padding:90px 0 20px 0; }

#project-filter-tabs .tab					{ height:36px; line-height:36px; padding:0 12px; font-size:1em; }
#project-filter-bottom						{ padding:30px 15px; position:fixed; left:0; top:0; bottom:0; right:0; border:none; overflow-y:auto; }
#project-filter-bottom .set					{ margin:0; padding:15px 0; border:none; width:100%; }
#project-filter-bottom .close				{ display:block; position:absolute; right:12px; top:12px; color:#999; font-size:1.5em; }
#project-filter.open #project-filter-bottom	{ display:block; }

#project-search-form						{ height:28px; margin:0 5px; }
#project-search-form input					{ height:28px; padding:0 .7em; font-size:1em; }

#projects-section							{ padding:30px 0 15px 0; }
#projects.no-filter #projects-section 		{ padding-top:110px; }
#projects-section h2						{ margin-bottom:25px; }

/* detail.php */
#slideshow-section							{ padding-top:90px; padding-bottom:50px; }
#slideshow-carousel .flickity-prev-next-button.previous { left:10px; width:36px; height:36px; }
#slideshow-carousel .flickity-prev-next-button.next { right:10px; width:36px; height:36px; }

#intro-section								{ padding-bottom:40px; }
#intro-section dt,
#intro-section dd							{ padding:10px 4px; }
#detail-content .fr-view					{ line-height:1.5em; }

/* about.php */
.chairperson-item							{ display:block; }
.chairperson-item .profile					{ width:100%; overflow:hidden; zoom:1; }
.chairperson-item .profile .thumb			{ padding:0; width:160px; height:160px; float:left; margin-bottom:0; }
.chairperson-item .profile .subtitle		{ padding-top:20px; margin-left:180px; margin-bottom:0; }
.chairperson-item .profile .title			{ padding-top:10px; margin-left:180px; margin-bottom:0; font-size:1.2em; }
.chairperson-item .fr-view					{ clear:left; padding:30px 5%; }

.pop-window									{ display:block; width:100%; height:auto; max-height:none; left:0; top:40px; bottom:0; transform:none;
												overflow-y:auto; }
.popup-close			 					{ right:15px;  top:12px; }
.pop-window	 .profile						{ width:100%; overflow:hidden; zoom:1; }
.pop-window	 .profile .thumb				{ padding:0; width:160px; height:160px; float:left; margin-bottom:0; }
.pop-window	 .profile .subtitle				{ padding-top:20px; margin-left:180px; margin-bottom:0; margin-top:0; }
.pop-window	 .profile .title				{ padding-top:15px; margin-left:180px; margin-bottom:0; font-size:1.2em; }
.pop-window .content 	 					{ height:auto; }
.pop-window	.fr-view						{ clear:left; padding:30px 5%; }

#team-section								{ padding:40px 0 30px 0; }
.team-item .title, .pop-window .title		{ font-size:1.1em; }

#partners-section .inner					{ padding:30px 0; }
#partners-section h2						{ margin-bottom:20px; }
#partners-section ul li h3					{ font-size:1.05em; }
						
#history-list .year							{ font-size:1.8em; margin-bottom:15px; }
#history-list .fr-view.text-list li			{ font-size:1em; }

/* join-us.php */
#policy										{ margin-top:30px; padding-top:30px; }

/* contact.php */
#contact-section							{ padding-top:90px; }

}


/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {
 
/* Elements */
.banner .text .fr-view br					{ display:none; }

.button										{ font-size:1.05em; }

.carousel-list .carousel-cell				{ width:70%; }
.carousel-list .holder						{ padding-top:135%; }
.carousel-list .fr-view						{ font-size:1em; line-height:1.5em; }

.project-list.column-2 .project-item 		{ width:100%; margin-right:0; }
.project-list.column-3 .project-item		{ width:100%; margin-right:0; }
.project-item .title						{ font-size:1.15em; }

.fr-view.text-list ul li			 		{ padding:.6em .2em; line-height:1.25em; }

/* index.php */
.fullpage .fr-view br						{ display:none; }
.fullpage h2								{ font-size:1.5em; }

#services .col-item:nth-child(1)			{ margin-bottom:30px; }
#services .fr-view							{ font-size:1em; }
 
/* projects.php */
#project-filter-top							{ background:#f0f0f0; }
#project-filter-search						{ display:block; position:absolute; right:0; top:0; width:36px; height:36px; line-height:36px; 
												text-align:center; }
#project-search-form						{ position:absolute; right:0; top:0; width:100%; margin:0; height:36px; background:#fff; 
												border-radius:4px; width:0; overflow:hidden; transition:width .2s; }
#project-search-form input					{ height:36px; background:#fff; }
#project-search-form button					{ display:none; }
#project-search-form.show					{ width:100%; }
 
/* about.php */
#team-section .column-3 .col-item			{ margin:2% 0; }

}