@charset "utf-8";

/*
========================
Variable
========================
*/
:root {
	--theme-bg-color:   #ffffff;
	--light-bg-color:   #e2e2e2;
	--midtone-bg-color:   #dddddd;
	--theme-text-color:   #353d62;
	--theme-border-color:   #000000;
	--dark-text-color: #333333;
	--light-text-color: #666666;
	--soft-text-color: #808080;
	--softer-text-color: #a19e98;
	--dark-border-color: #aaaaaa;
	--light-border-color: #bbbbbb;
	--soft-border-color: #cccccc;
	--theme-button-color: #353d62;
	--dark-button-color: #3d3c3c;
	--thumb-mask: #4162a50f;
	--scrollbar-track: #edebe7;
	--scrollbar-thumb: #636b87;
	--form-row-gap: 10px;
	--form-input-height: 42px;
	--form-input-text-size: 1.05em;
	--form-input-border-radius: 2px;
	--form-select-height: 48px;
	--header-height: 180px;
	--header-padding: 23px;
	--header-logo-width: 56px;
	--header-height-minimal: 90px;
	--header-padding-minimal: 22px;
	--header-transition: .4s;
	--footer-height: 72px;
	--project-filter-height: 44px;
	--project-filter-transition: .4s;
}

/*
========================
Elements
========================
*/
*						{ box-sizing:border-box; }
html, body				{ color: var(--light-text-color);}

a						{ color:inherit; text-decoration:none; transition: all .2s; }
strong					{ font-weight:bold; }
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 				{ color: var(--dark-text-color); font-weight:500; line-height: 1.33em;}
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: 15px; font-size: 1.5em; font-weight: 500; letter-spacing: .05em;}
article	.contents				{ margin: 15px 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%; }
form .label						{ margin-bottom:10px; }
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:.5em .3em; font-size: var(--form-input-text-size); background:#fff; border: none; border-bottom:1px solid #d2d2d2; border-radius:0; font-family:inherit; outline:none; -webkit-appearance: none; -moz-appearance: none; }
form textarea					{ height:130px; }
form select						{ padding:5px; }
form button						{ font-family:inherit; outline:none; }
form button:disabled			{ opacity: .5; pointer-events: none;}
form .error						{ display:block; text-align:right; margin-top:5px; color:#d54449; font-size:12px; line-height:1.25em; }
form .result					{ margin-top:20px; color:#666; }
form .loading-icon 				{ margin-left: 20px; color: #888; display: none; }
form.loading .loading-icon		{ display:unset;}
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: 8px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track 						{ background: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb 						{ background: var(--scrollbar-thumb); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover 				{ background: var(--scrollbar-thumb); }

/** 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.5em;}
.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 blockquote		{ border-left:4px solid #aaa; background:#f5f5f5; color:#555; padding:1.1em; }

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

/** Fancybox **/
.f-button 								{ border-radius: 0; width: 46px; height: 46px;}
.is-horizontal.is-ltr .f-button.is-arrow.is-next { right:10px;}
.is-horizontal.is-ltr .f-button.is-arrow.is-prev { left:10px;}

/** Swiper **/
.swiper-slide 									{ width: 100%;}
.swiper-button-next,
.swiper-button-prev 							{ outline: none; margin: 0 !important; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background-color: rgba(0,0,0,.5); transform: translateY(-50%); }
.swiper-button-next:after, 
.swiper-button-prev:after 						{ font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 21px; color: #fff;}
.swiper-button-next:after 						{ content: '\0f178'; }
.swiper-button-prev:after 						{ content: '\0f177'; }
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled		{ pointer-events: unset;}
.swiper-pagination-bullet-active				{ background-color: #222;}
.swiper.swiper-disabled							{ height: auto; }
.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-right  				  	 		{ display:flex; justify-content: flex-end; }
.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-middle  				  	 		{ display:flex; justify-content: center; }
.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:49%; margin-top:2%; margin-right: 2%; }
.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:28.66666666666667%; margin-right:7%; margin-top:60px; }
.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:21.25%; margin-right:5%; margin-top:50px; }
.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-bottom: 12px; margin-right: 60px; font-size: 1.1em;}
.menu-horizontal li.active				{ text-decoration: underline; color: var(--theme-text-color);}
.menu-horizontal li:last-child			{ margin-right: 0;}

/** 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:60%; }
.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 info **/
.thumb-info								{ padding: 15px 0;}
.thumb-info	.subtitle					{ margin-bottom: 8px; }
.thumb-info	.title						{ font-size: 1.2em; line-height: 1.2em;}
.thumb-info	.summary					{ margin-top: 10px; color: #888;}

/** 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:.55em 1em .7em 1em; min-width: 140px; transition:background .2s; white-space:nowrap;
											background:#222; color:#fff; border:none; border-radius:2px; text-align: center; text-decoration: none !important; }
.button									{ font-size:1em; }
.button-md				  	  			{ font-size:1.1em; padding:1em; }									
.button-lg				  	  			{ font-size:1.4em; padding:1em; }									
.button i			   		  			{ margin-left:.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%;}

/** Link **/
.link									{ font-size:1.05em; }
.link i									{ margin-left:.8em; }
.link-wrapper				  			{ display:block; }

/** 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-grow:1; }
.breadcrumbs	.item					{ margin-right:18px; white-space:nowrap; }
.breadcrumbs	.item:after				{ /*font-family: "Font Awesome 5 Pro"; font-weight: 900;*/ content: "/"; margin-left:20px; font-size:12px; }
.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: 17px; visibility: hidden; opacity: 0; transition: opacity 0s, visibility 0s; }
.dropdown .menu ul						{ background: #fff; padding:5px 10px; }
.dropdown .menu li						{ margin-bottom: 18px; white-space:nowrap; }
.dropdown:not(.dropdown-click):hover .menu,
.dropdown-click.opened .menu 			{ visibility: visible; opacity: 1; transition: opacity .5s, visibility 0s; }
.minimal-header .dropdown-click.opened .menu { transition: opacity .5s .1s, visibility 0s .1s; }

/** Pagination **/
.pagination 							{ margin-top:40px; display:flex; }
.pagination a,
.pagination span 						{ padding:4px 9px; display:inline-block; line-height:normal; color:#999; }
.pagination a:hover 					{ color:#000;}
.pagination .active	span				{ color:#000; }
.pagination .prev						{ font-size:1.2em; transform:translateY(-3px); }
.pagination .next						{ font-size:1.2em; transform:translateY(-3px); }
.pagination .pager						{ display: none;}

/** Sharer **/
.social-share 							{ padding: 15px 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; }

/** List table **/
.list-table 							{ display: table; width: 100%; border-top: 1px solid var(--light-border-color);}
.list-table > li 						{ display: table-row; }
.list-table > li > div 					{ display: table-cell; line-height: 1.2em; padding: 1.33em 5px 1.33em 0; border-bottom: 1px solid var(--light-border-color);}

/** Misc. **/
.right									{ text-align:right; }
.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;}


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

/*
========================
Structure
========================
*/
#container								{ padding-top: var(--header-height); transition: all .2s; }
.wrapper 								{}
.inner									{ width:88%; margin:0 auto; position:relative; }
.inner-lg 								{ max-width:1280px;  }
.inner-bg 								{ max-width:1150px;  }
.inner-md 								{ max-width:960px;  }
.inner-sm 								{ max-width:800px;  }

/*
========================
Header
========================
*/
#header-nav-wrapper 					{ position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; height: var(--header-height); padding: var(--header-padding) 0; background-color: #fff; transition: all var(--header-transition); }
#header-nav-wrapper header				{ height: calc(var(--header-height) - var(--header-padding) * 2); transition: all var(--header-transition); }
#header-nav-wrapper header img 			{ display: block; width: var(--header-logo-width); opacity: 1; transition: all var(--header-transition); }
#header-nav-wrapper header h1 			{ transition: all var(--header-transition); transform-origin: left top;}
#header-nav-wrapper header h1 a 		{ display: block;}
#header-nav-wrapper header h1 .zh 		{ font-size:19px; letter-spacing: .18em; line-height: normal; white-space: nowrap; }
#header-nav-wrapper header h1 .en 		{ font-size: 11px; letter-spacing: .175em; line-height: normal; white-space: nowrap; margin-top: 3px; }
#header-nav-wrapper nav 				{ margin-top: 12px;}

.minimal-header #container 						{ padding-top: var(--header-height-minimal);}
.minimal-header #header-nav-wrapper				{ height: var(--header-height-minimal); padding: var(--header-padding-minimal) 0; border-bottom: 1px solid var(--light-border-color);  }
.minimal-header #header-nav-wrapper header		{ height: 48px;}
.minimal-header #header-nav-wrapper header img	{ width: 0; opacity: 0; transition: none; }
.minimal-header #header-nav-wrapper header h1 	{ transform:translateY(-5px);}

.expand-header #container 						{ padding-top: var(--header-height); }
.expand-header #header-nav-wrapper 				{ height: var(--header-height); padding: var(--header-padding) 0; }
.expand-header #header-nav-wrapper header		{ height: calc(var(--header-height) - var(--header-padding) * 2); }
.expand-header #header-nav-wrapper header img 	{ width: var(--header-logo-width); opacity: 1; transition: all var(--header-transition); }
.expand-header #header-nav-wrapper header h1 	{ transform:translateY(0);}

.headroom--unpinned #header-nav-wrapper 		{ transform: translateY(-100%);}
.headroom--unpinned #project-filters-wrapper	{ padding-top: 0;}

/*
========================
Nav
========================
*/
#header-nav-wrapper nav,
#header-nav-wrapper nav > ul 			{ gap: 80px}
#header-nav-wrapper nav .label			{ font-size: 1.07em; letter-spacing: .15em; color: var(--dark-text-color); transition: all .2s; }
#header-nav-wrapper nav .label:hover 	{ color: var(--theme-text-color);}
#header-nav-wrapper nav .label i 		{ font-size: 9px; margin-left: 5px;}
#header-nav-wrapper nav .menu a 		{ color: var(--soft-text-color); font-size: .98em; }
#header-nav-wrapper nav .menu a:hover 	{ color: var(--theme-text-color);}

#header-nav-wrapper #language-toolbar .label 		{ display: none;}
#header-nav-wrapper #language-toolbar li.active		{ display: none;}
#header-nav-wrapper #language-toolbar li 			{ font-size: 12px; color: var(--dark-text-color);}

#header-nav-wrapper .social-links-toolbar .label 	{ display: none;}
#header-nav-wrapper .social-links-toolbar ul 		{ gap: 20px;}
#header-nav-wrapper .social-links-toolbar li 		{ font-size: 13px; color: var(--soft-text-color);}

#menu-button 							{ display: none;}
#menu-close								{ display: none;}

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

/*
========================
Footer
========================
*/
#footer-wrapper 						{ height: var(--footer-height);}
#footer-inner							{ padding: 28px 0; }
#footer-inner p,
#footer-inner address 					{ letter-spacing: .1em; color: var(--dark-text-color);}
#footer-inner br 						{ display: none;}
#footer-inner .copyright 				{ font-size: 11px; color: var(--soft-text-color); }
#footer-copyright						{ padding-right: 15px; letter-spacing: .08em; }
#footer-credit							{ padding-left: 15px; position: relative; }
#footer-credit::before					{ content: ''; position: absolute; left: 0; top: 0; bottom:0; border-left: 1px solid #999; }

#footer-inner .toolbar					{ margin: 15px 0; font-size: .95em;}
#footer-inner .toolbar .label			{ font-weight: 500; }
#footer-inner .toolbar li				{ margin-left: 15px;}
#footer-inner .toolbar li.active a		{ text-decoration: underline;}

/*
========================
Homepage
========================
*/
#index #main-wrapper 					{ padding: 0;}
#index #main-inner						{ width: 100%;}

#cover-sliders,
#cover-sliders .swiper-slide			{ height: calc(100vh - var(--header-height)); min-height: 660px;}
#cover-sliders .swiper-slide			{ overflow: hidden; position: relative;}
#cover-sliders .swiper-slide img 		{ display: block; object-fit: cover; width: 100%; height: 100%; }
#cover-sliders .swiper-slide .text 		{ position: absolute; left: 0; bottom:0; width: 100%; padding: 140px 0 60px 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);}
#cover-sliders .swiper-slide .text p 	{ font-size: 1.5em; font-weight: 500; line-height: 1.2em; letter-spacing: .1em; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .9);}
#cover-sliders .swiper-pagination		{ left: auto; right: 7%; bottom:60px; width: auto; }
#cover-sliders .swiper-pagination-bullet 		{ background-color: #fff; opacity: 1; width: 8px; height: 8px; margin: 0 5px ;}
#cover-sliders .swiper-pagination-bullet-active { background-color: var(--theme-button-color);}

#project-filters-wrapper 				{ z-index: 99; position: fixed; left: 0; top: 0; width: 100vw; padding-top: var(--header-height-minimal); background-color: #fff; transition: padding var(--header-transition); }
#project-filters 						{ max-height: var(--project-filter-height); overflow: hidden; transition: max-height var(--project-filter-transition);}
.project-filters-opened #project-filters { max-height: 320px; }
.project-filter-set 					{ width: 25%; max-width: 240px; }
.project-filter-set .label 				{ height: var(--project-filter-height); }
.project-filter-set .label-button 		{ margin: auto 0; font-size: 1.05em; letter-spacing: .1em; color: var(--dark-text-color); }
.project-filter-set .label-button span  { cursor: pointer;}
.project-filter-set .label-button i 	{ font-size: 9px; margin-left: 5px;}
.project-filter-set ul 					{ margin: 7px 0 40px 0; min-height: 80px; }
.project-filter-set ul li 				{ margin-bottom: 15px; font-size: .98em; letter-spacing: .05em; }
.project-filter-set ul li:last-child	{ margin-bottom: 0;}
.project-filter-set ul a 				{ color: var(--light-text-color); padding: 0 .7em; border-radius: 15px; margin-left: -.6em;}
.project-filter-set ul a:hover			{ color: var(--theme-text-color);}
.project-filter-set ul a.active 		{ color: #fff; box-shadow: 0 0 0 2px #aaa; background-color: #aaa;}
.project-filter-set ul a.active:hover 	{ background-color: var(--theme-button-color); box-shadow: 0 0 0 2px var(--theme-button-color);}
.project-filter-set ul a i 				{ font-size: 10px; margin-left: 5px; transform: translateY(-2px);}
#filter-close 							{ display: none;}

#project-list 							{ gap:6px; }
#project-list li 						{ flex: 0 0 calc((100% - 12px) / 3); background-color: #f7f7f7; position: relative; }
#project-list li:hover img 				{ transform: scale(1.1, 1.1);}
#project-list .image 					{ aspect-ratio: 3/2; overflow: hidden;}
#project-list .image img 				{ object-fit: cover; width: 100%; height: 100%; transition: .8s;}
#project-list .info 					{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 30px 40px; color: #fff; background-color: #353d62aa; opacity: 0; transition: all .4s;}
#project-list .info:hover 				{ opacity: 1;}
#project-list .title 					{ margin-top: auto; margin-bottom: 8px; font-size: 1.15em; letter-spacing: .05em; }
#project-list .subtitle	span:nth-child(2)::before { content: ' / '; margin: 0 8px; font-size: 12px; letter-spacing: .05em; }

#project-banner							{ height: 70vh; min-height: 520px; position: relative; }
#project-banner img 					{ display: block; object-fit: cover; width: 100%; height: 100%;}
#project-banner header 					{ position: absolute; left: 0; bottom:0; width: 100%; padding: 60px 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }
#project-banner header h1 				{ color: #fff; font-size: 1.5em; font-weight: 400; letter-spacing: .05em; }

#project-info 							{ padding: 60px 0; font-size: 1.05em;}
#project-info .label 					{ font-weight: 500; margin-bottom: 10px; color: var(--dark-text-color);}
#project-info .label span::before,
#project-info .value span::before		{ content: ' / '; margin: 0 5px; } 
#project-info .label span:first-child:before,
#project-info .value span:first-child::before	{ display: none;}

#project-contents 						{ margin-top: 50px;}
#project-contents .fr-view 				{ max-width: 860px;}
#project-detail .social-share 			{ padding-top: 30px; padding-bottom: 0;}

#project-images  						{ gap: 1.5%; margin: 0 auto 60px auto;}
#project-images .thumb 					{ width: 49.25%; margin-bottom: 1.5%;}
#project-images .thumb-2 				{ width: 100%;}

#chronology h2 							{ margin-bottom: 30px; font-size: 1.7em; font-weight: 400; letter-spacing: .08em; }
#chronology-list 						{ font-size: 1.04em;}
#chronology-list a:hover 				{ color: var(--theme-text-color);} 

#about-section section 								{ margin-bottom: 60px;}
#about-section section.flex-vertical .section-text 	{ max-width: 860px; margin: 40px auto 0 auto;}
#about-section section.flex-justify .section-image	{ width: 60%;}
#about-section section.flex-justify .section-text	{ width: 33%;}
#about-section section h2 							{ margin-bottom: 15px; font-size: 1.33em; letter-spacing: .08em;}

#awards-section h2 									{ margin-bottom: 30px; font-size: 1.7em; font-weight: 400; letter-spacing: .08em;}
#awards-list 										{ margin-top: 40px;}
#awards-list .awards-list-item 						{ margin-top: 30px; position: relative;}
#awards-list .awards-list-item:hover .thumb img 	{ transform:scale(1.1, 1.1); }
#awards-list .awards-list-item .thumb img 			{ width: 100%; height: 100%; display: block; object-fit: cover; transition: all .6s;}
#awards-list .awards-list-item .icon 				{ position: absolute; right: 30px; top: 30px; width: 128px;}
#awards-list .awards-list-item .info  				{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 15px 20px; color: #fff; background-color: #353d62aa;}
#awards-list .awards-list-item .info .title 		{ font-size: 1.15em; margin-bottom: 7px;}
#awards-list .awards-list-item .info .summary 		{ font-size: 1em;}

#team-section h2 									{ margin-bottom: 30px; font-size: 1.7em; font-weight: 400; letter-spacing: .08em;}
#team-section h3 									{ margin-bottom: 25px; font-size: 1.5em; font-weight: 400; letter-spacing: .08em;}
#team-section .thumb 								{ background-color: var(--light-bg-color); margin-bottom: 20px;}
#team-section .position 							{ margin-top: 10px; color: var(--dark-text-color);}
#team-section .name 								{ margin-top: 10px; color: var(--dark-text-color); font-size: 1.18em; font-weight: 500; line-height: 1.2em; }
#team-section .fr-view 								{ margin-top: 15px;}
#team-section .dept 								{ margin-top: 60px;} 

#news-list 											{ margin-top: 60px;}
#news-list .news-list-item 							{ margin-top: 40px;}
#news-list .news-list-item .thumb 					{ width: 240px; height: 200px; text-align: left; overflow: visible;}
#news-list .news-list-item .thumb img 				{ width: 100%; height: 100%; display: block; object-fit: contain;}
#news-list .news-list-item .info  					{ flex-grow: 1; margin-right: 10%;}
#news-list .news-list-item .info .subtitle 			{ margin-bottom: 30px; font-size: 1.1em;}
#news-list .news-list-item .info .title 			{ margin-bottom: 10px; font-size: 1.5em; font-weight: 500; letter-spacing: .08em; color: var(--dark-text-color);}
#news-list .news-list-item .info .title:hover 		{ color: var(--theme-text-color);}
#news-list .news-list-item .info .summary 			{ font-size: 1.04em;}

#news-article .swiper 								{ margin-bottom: 30px;}
#news-article .swiper .thumb 						{ background-color: #eee;}

#contact-section .section-image 					{ width: 46%;}
#contact-section .section-form 						{ width: 40%;}
#contact-section .section-form legend 				{ margin-bottom: 20px; font-size: 1.5em; font-weight: 500; letter-spacing: .08em; color: var(--dark-text-color);}
#contact-section .section-form .fr-view 			{ margin-bottom: 30px;}
#contact-section .section-form .buttons 			{ margin-top: 30px;}
#contact-section #contact-info 						{ margin-bottom: 12px;}
#contact-section #contact-info .col-item 			{ width: 48%;}
#contact-section #contact-info address,
#contact-section #contact-info p 					{ padding-bottom: 5px; margin-bottom: 10px; line-height: 1.4em; color: var(--dark-text-color); }
#contact-section #contact-info .result 				{ line-height: 1.4em;}