@charset "utf-8";
@import url(reset.css);

/*
========================
Elements
========================
*/
*						{ box-sizing:border-box; }
html,body				{}
body					{}
#container				{}
.wrapper 				{}
.inner					{ width: 92%; max-width: 1280px; margin: auto; position:relative; }
.inner-small			{ width: 92%; max-width: 1200px; margin: auto; position:relative; }
.inner-shift            { width: 103.5%; max-width: 1440px; padding:50px 4%; margin: auto; position:relative; }
.inner-shift.offset		{ padding:0; }

a						{ color:inherit; text-decoration:none; transition:all .2s; }
strong					{ font-weight:500; }
em						{ font-style:italic; }
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; }

h1                      { font-size: 2em; font-weight:700; letter-spacing:.02em; }
h2                      { font-size: 1.8em; font-weight:700; letter-spacing:.04em; margin-bottom:.8em; }
h3						{ font-size: 1.3em; font-weight:700; margin-bottom:.8em; }
h4						{ font-size: 1.15em; font-weight:400; }

form .set             	{ width: 49%; }
form .row               { margin-bottom: 15px;}
form input,
form select,
form textarea       	{ width: 100%; padding:.75em 1em; border: none; background:#efefef; outline:none; border-radius:2px; font-size:1.1em; 
							font-family:inherit; height:48px; border:1px solid #ddd; }
form textarea			{ height:174px; }
form button				{ font-family:inherit;  }
form .submit-wrapper    { width: 100%; margin-top:12px; }
form .error				{ display:block; margin-top:5px; color:#c00; text-align:right; }
form .result			{ text-align:right; width:50%; color:#666; line-height:1.25em; }

.fr-view				{ font-size:1.05em; line-height:1.7em; }
.fr-view ul				{ list-style:none; padding-left:1.4em; }
.fr-view ul li 			{ list-style:disc; line-height:1.7em; }
.fr-view ol				{ list-style:decimal;padding-left:15px;}
.fr-view ol li 			{ list-style:decimal; line-height:1.7em; }
.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 hr				{ border:none; border-top:1px solid #cacaca; }
.fr-view strong			{ font-weight:500 !important; }

.center					{ text-align:center; }

/* flex */
.flex                   { display: flex; }
.flex-justify			{ display: flex; justify-content: space-between; }
.flex-wrap				{ display: flex; flex-wrap: wrap; }
.flex-center            { display: flex; align-items: center; }
.flex-reverse           { display: flex; flex-direction: row-reverse;}

/* background */
.bg-white               { background-color: #fff; color:#2b382e; }
.bg-grey                { background-color: #f2efe9;}
.bg-darkgrey            { background-color: #e0d9cf;}
.bg-transparent-grey    { background: linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%), linear-gradient(180deg, rgba(129,204,170,0) 200px, rgba(242,239,233,1) 200px); }
.bg-darkgrey-grey      	{ background: linear-gradient(180deg, rgba(224,217,207,1) 62%, rgba(242,239,233,1) 62%);}
.bg-grey-white      	{ background: linear-gradient(180deg, rgba(242,239,233,1) 62%, rgba(255,255,255,1) 62%);}

/* decoration */
.long-dash  			{ display:inline-block; height:1px; width:2em;  background: #999; margin-bottom: 0.33em;  }

.border-wide			{ border-top:6px solid #a46753; }

/* fade-in animation */
.animation              					{ transform: translateY(150px); opacity: 0; transition: all 1s}
.animation.inview      				 		{ transform: translateY(0); opacity:1;}
.animation-hr             					{ transform: translateX(100px); opacity: .9; transition: all 1s}
.animation-hr.inview      				 	{ transform: translateX(0); opacity:1; }
.animation-fadein             				{ opacity: 0; transition: all 1s}
.animation-fadein.inview      				{ opacity:1; }

/* banner */
.banner .inner          					{ height:600px; color:#2b382e; }
.banner h2									{ margin-bottom:30px; } 
.banner .text 								{ position:absolute; left:0; top:50%; transform:translateY(-50%); max-width:600px; }
.banner .text.offset 						{ margin-top:40px; }
.banner .text.has-subtitle h2				{ margin-bottom:10px; }
.banner .text.has-subtitle h2				{ margin-bottom:15px; }
.banner .text.has-subtitle .subtitle		{ margin-bottom:30px; font-size:1.2em; }
.banner .fr-view							{ line-height:1.9em; font-size:1.15em; }

.banner-auto-height .inner					{ height:auto; padding:80px 0;  }
.banner-auto-height .text 					{ position:static; transform:none; }

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


/* column */
.column-2               					{ display: flex; flex-wrap: wrap; }
.column-2 .col-item     					{ width: 43%; margin:20px 0; margin-right:14%; }
.column-2 .col-item:nth-child(2n)			{ margin-right:0; }

.column-3               					{ display: flex; flex-wrap: wrap; }
.column-3 .col-item     					{ width:29%; margin:30px 0; margin-right:6.5%; }
.column-3 .col-item:nth-child(3n)			{ margin-right:0; }

.column-4               					{ display: flex; flex-wrap: wrap; }
.column-4 .col-item     					{ width:21.25%; margin:30px 0; margin-right:5%; }
.column-4 .col-item:nth-child(4n)			{ margin-right:0; }

/* check-list */
.check-list li					 			{ margin-top:30px; }
.check-list li:last-child					{ margin-bottom:0; }
.check-list .check-icon						{ width:40px; height:40px; margin-right:15px; }
.check-list svg								{ width:40px; height:40px; }
.check-list .check-text						{ flex-grow:1; }
.check-list .title							{ font-size:1.2em; font-weight:700; line-height:1.2em; margin-bottom:0; }
.check-list .fr-view						{ line-height:1.33em; margin-top:10px; margin-bottom:0; }

/* carousel-list */
.carousel-list .flickity-viewport    		{ overflow: visible; }
.carousel-list .carousel-cell        		{ width:28%; margin-right:4%; box-shadow:0 0 30px rgba(0,0,0,.1); border-radius:2px; overflow:hidden; } 
.carousel-list .holder				 		{ padding-top:125%; position:relative; }
.carousel-list .content				 		{ position:absolute; left:0; top:0; right:0; bottom:0; padding:35px; border-top:5px solid #81ccaa; }
.carousel-list .icon-small			 		{ margin-bottom:40px; }
.carousel-list .title				 		{ font-size:1.33em; margin-bottom:1em; }
.carousel-list .year						{ font-family:"Times New Roman", Times, serif; font-weight:500; font-size:2.5em; color:#81ccaa; }
.carousel-list .fr-view						{ font-size:1.05em; line-height:1.6em; }

.carousel-list .flickity-prev-next-button			{ width:60px; height:60px; }
.carousel-list .flickity-prev-next-button.previous 	{ left:calc(50% - 50vw); margin-left:60px; }
.carousel-list .flickity-prev-next-button.next 		{ right:calc(50% - 50vw); margin-right:60px; }


/* carousel-box */
.carousel-box .carousel-cell        		{ width: 100%;} 
.carousel-box .flickity-page-dots			{ bottom:40px; left: 40px; text-align:left;}

/* flickity button & page dots */
.flickity-prev-next-button							{ background:rgba(40, 53, 44, .7); transition:all .2s; }
.flickity-prev-next-button:hover					{ background:rgba(40, 53, 44, .9); }	
.flickity-prev-next-button:after					{ font-family: 'Font Awesome 5 Pro'; font-size:1.2em; color:#ddd; 
														position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); transition:all .2s; }													
.flickity-prev-next-button:hover:after 				{ color:#fff; }
.flickity-prev-next-button.previous:after 			{ content:'\f177'; }
.flickity-prev-next-button.next:after 				{ content:'\f178';  }
.flickity-prev-next-button[disabled] 				{ opacity:0; }
.flickity-button-icon                     			{ display: none; }

.flickity-page-dots                       			{ bottom:-30px; text-align:right; }
.flickity-page-dots .dot                  			{ width:7px; height:7px; margin:0 0 0 12px; }
.flickity-page-dots .dot.is-selected      			{ background: #a46753;}

/* project-item */
.project-item										{ border-radius:2px; overflow:hidden; }
.project-item .thumb								{ overflow:hidden; background:#9b6a57; position:relative; }
/* scoped to the linked photo so the award overlay is left alone */
.project-item .thumb > a img						{ width:100%; transition:opacity .8s, transform .5s; display:block; opacity:.85; }
.project-item .thumb:hover > a img					{ transform:scale(1.1, 1.1); }
.project-item .thumb > a img.cover-1				{ position:absolute; left:0; top:0; width:100%; height:100%; }
.project-item .thumb:hover > a img.cover-1			{ opacity:0; }
/* award trophies sit over the bottom right of the photo, they are transparent pngs.
   Sized from the photo height so they keep their weight on any card width. */
.project-item .awards								{ position:absolute; right:3%; bottom:4%; z-index:2; display:flex;
														align-items:flex-end; height:40%; min-height:70px;
														pointer-events:none; }
.project-item .awards img							{ width:auto; height:100%; margin-left:6%; opacity:1;
														filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.project-item .awards img:first-child				{ margin-left:0; }

.project-item .info									{ padding:18px; height:120px; position:relative; }
.project-item .info-height							{ padding:18px 22px; height:240px; position:relative; }
.project-item .title								{ font-size:1.33em; font-weight:700; line-height:1.25em; }
.project-item .types								{ color:#888; position:absolute; bottom:22px; }

/* project-list */
.project-list.column-2 .project-item 			   { width:47.5%; margin-right:5%; margin-bottom:5%; }
.project-list.column-2 .project-item:nth-child(2n) { margin-right:0; }
.project-list.column-2 .project-item .info 	       { height:100px; }

.project-list.column-3 .project-item 			   { width:30%; margin-right:5%; margin-bottom:5%; }
.project-list.column-3 .project-item:nth-child(3n) { margin-right:0; }
.project-list.column-3 .project-item .info 		   { height:110px; }

/* button */
.button                 						   { padding:.9em 1.3em 1em 1.5em; font-size:1.2em; letter-spacing:.02em; border:none; border-radius:3px;
													 color:#fff ; background:#a46753; transition:all .2s; display:inline-block; }
.button:hover									   { background:#bd8471; color:#fff; }
.button.arrow									   { padding-right:1.5em; }
.button.arrow:after								   { content:'\f178'; font-family: 'Font Awesome 5 Pro'; margin-left:.7em; }
.button[disabled]								   { background:#ccc; color:#999; }

.play-button									   { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:72px; height:72px;
													 background:#fff; border-radius:50%; opacity:.8; transition:all .2s;	box-shadow:0 0 40px rgba(0,0,0,.15); }
.play-button::after								   { content:''; position:absolute; left:50%; top:50%; transform:translate(-5px, -50%);
												     border-left:16px solid #000; border-right:16px solid transparent; border-top:10px solid transparent; border-bottom:10px solid transparent; }
.play-button:hover								   { opacity:1; }

/* text-list */
.fr-view.text-list ul				 			   { margin:0; padding:0; list-style:none; }
.fr-view.text-list ul li			 			   { border-top:1px solid #cacaca; margin:0; padding:.7em .2em; list-style:none;  }

/* aside-image */
.aside-image-section .offset-content			   { display:flex; flex-direction:row-reverse; }
.aside-image-section .image						   { flex-grow:1; min-height:600px; background-position:50% 50%;
														background-repeat:no-repeat; background-size:cover; position:relative; }
.aside-image-section .image .secondary			   { position:absolute; left:0; top:0; width:100%; height:100%; background-position:50% 50%;
														background-repeat:no-repeat; background-size:cover; opacity:0; transition:opacity 1s; }														
.aside-image-section .image .secondary:hover	   { opacity:1; }
.aside-image-section .text						   { min-width:360px; max-width:480px; padding:50px 50px 60px 50px; 
														display:flex; flex-direction:column; }
.aside-image-section .text .desc				   { flex-grow:1; margin-bottom:10px; line-height:1.5em; }
.aside-image-section .text .item				   { flex-grow:1; }
.aside-image-section .text h3					   { font-size:1.5em; }


/*
========================
Font
========================
*/

html, body 				{ font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, "Arial", sans-serif; font-size:14px; color:#2b382e;  }


/*
========================
Header
========================
*/

#header-wrapper								{ position:fixed; left:0; top:0; z-index:999; width:100%; padding-top:40px; pointer-events:none; }
/* the right inset is wider than the left: the logo is a solid block while the
   last link is bare text, so they only look balanced when the text sits further in */
#header-inner								{ pointer-events:auto; background:#fff; height:100px; padding:0 72px 0 40px;
												border-radius:16px; box-shadow:0 4px 20px rgba(43,56,46,.10); }

#head										{ flex-shrink:0; }
#header-inner h1							{ width:88px; height:54px; transition:all .4s; }
#header-inner h1 a							{ display:block; width:100%; height:100%; background:url(../image/logo-title-2024.svg) no-repeat 50% 50%;
												background-size:contain; text-indent:-999px; overflow:hidden; }

/* nav and ul dissolve into #header-inner's own space-between row, so the logo
   and every link are siblings and all the gaps - logo to first link included -
   come out identical while the links fill the whole bar */
#header-inner nav							{ display:contents; }
#header-inner nav ul						{ display:contents; }
#header-inner nav li						{ position:relative; flex-shrink:0; }
#header-inner nav li a						{ display:block; padding:6px 0; font-size:1.05em; letter-spacing:.06em; color:#3e3a39;
												white-space:nowrap; }
#header-inner nav li a:after				{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#00563a;
												transition:width .25s; }
#header-inner nav li:hover a,
#header-inner nav li.active a				{ color:#00563a; }
#header-inner nav li:hover a:after,
#header-inner nav li.active a:after			{ width:100%; }
#header-inner nav li.contact				{ display:none; }

#nav-mask									{ display:none; }
.menu-close									{ display:none; }
.menu-button								{ display:none; }


/*
========================
Footer
========================
*/

#footer-wrapper								{ background:#3e3a39; color:#b2b2b2; position:relative; z-index:1; }
#footer-inner								{ padding:70px 0 50px 0; position:relative; }

#footer-brand								{ margin-bottom:46px; }
#footer-brand .footer-logo					{ display:block; width:110px; height:68px; background:url(../image/logo-title-2024.svg) no-repeat 0 50%;
												background-size:contain; text-indent:-999px; overflow:hidden; }

#footer-columns								{ align-items:flex-start; }
.footer-col									{ width:22%; padding-right:20px; }
.footer-col .col-title						{ color:#fff; font-size:1.15em; font-weight:700; letter-spacing:.04em; margin-bottom:26px; }
.footer-col li								{ margin-bottom:20px; font-size:1.02em; line-height:1.5em; }
.footer-col li:last-child					{ margin-bottom:0; }
.footer-col a:hover							{ color:#fff; }
.footer-col .label							{ display:inline-block; width:44px; }
.footer-col address							{ line-height:1.5em; }

.col-contact								{ width:27%; }
.col-slogan									{ width:29%; padding-right:0; }
.col-slogan .col-title						{ display:flex; align-items:center; margin-bottom:24px; }
.col-slogan .rule							{ display:block; flex-grow:1; height:1px; background:#7a7472; margin-left:18px; max-width:90px; }
.col-slogan .notes							{ color:#e5e2e0; font-size:1.35em; line-height:1.7em; letter-spacing:.02em; }

#footer-inner .social-links					{ margin-top:56px; }
#footer-inner .social-links a				{ margin-right:10px; display:inline-block; width:38px; height:38px; border:2px solid #b2b2b2;
												border-radius:50%; position:relative; transition:border-color .2s, opacity .2s; opacity:.85; }
#footer-inner .social-links a:hover			{ border-color:#fff; opacity:1; }
#footer-inner .social-links img				{ width:24px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

#footer-bottom								{ background:#332f2e; color:#8c8785; font-size:.92em; letter-spacing:.03em; }
#footer-bottom .inner						{ padding:20px 0; }
#footer-bottom .copyright .sep				{ margin:0 8px; }
#footer-bottom .credit a:hover				{ color:#fff; }

#go-top										{ position:fixed; right:36px; bottom:36px; z-index:998; width:46px; height:46px; border-radius:8px;
												background:#a46753; color:#fff; cursor:pointer; text-align:center; line-height:46px; font-size:1.1em;
												opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s; }
#go-top.show								{ opacity:1; visibility:visible; transform:translateY(0); }
#go-top:hover								{ background:#8d5544; }


/*
========================
Main
========================
*/

/* overflow-x:hidden forces overflow-y to compute as auto, which gave the page a second
   scrollbar whenever an .animation block was still offset 150px below the fold.
   clip does not do that, hidden stays as the fallback for older browsers. */
#main-wrapper								{ width:100%; overflow-x:hidden; overflow-x:clip; }
#main-inner									{}


/*
========================
index.php
========================
*/

/* slogan */
.fullpage                         			{ height: 100vh; position: relative; }
.fullpage:not(:first-child)					{ height: 40vh; }
.fullpage .inner                 			{ width:80%; height:100%; }
.fullpage .text                   			{ position: absolute; top:50%; transform:translateY(-50%); }
.fullpage .slogan                 			{ margin-bottom: 20px; font-size: 1.6em;}
.fullpage h2					  			{ font-size: 2em; margin-bottom:.8em; line-height:1.2em; }
.fullpage .fr-view				  			{ font-size: 1.2em; line-height:1.8em; max-width:340px; margin-bottom:30px; }
.fullpage .animation:after             		{ content:''; display: block; width: 1px; height: 80px; background: #999; margin-left:2px;}

.fullpage:first-child h2          			{ font-size:2.7em; margin-bottom:.5em; }
.fullpage:first-child .animation:after		{ display:none; }

/* keeps the last slogan clear of the section that follows */
#features-section													{ padding-bottom:10vh; }

/* slogan 2~4 : fades in, then keeps drifting upwards on its own. Classes toggled in script.js */
#features-section .fullpage:not(:first-child) .animation			{ opacity:0; transform:translateY(20px);
																		transition:opacity .9s ease, transform 2.2s cubic-bezier(.17,.84,.44,1);
																		will-change:opacity, transform; }
#features-section .fullpage:not(:first-child) .animation.slogan-in	{ opacity:1; transform:translateY(0); }
#features-section .fullpage:not(:first-child) .animation.slogan-out		{ opacity:0; transform:translateY(-20px); }

.fullpage:nth-child(even)					{ }
.fullpage:nth-child(even) .text				{ right:0; }

.fullpage .scroll-down						{ position:fixed; left:50%; bottom:6%; transform:translate(-50%, 0); opacity:1; visibility:visible;
												font-family:"Times New Roman", Times, serif; font-style:italic; text-align:center;  color:#444;
												transition:all 1s, visibility 0s 0s; background:url(../image/arrow-down-light.svg) no-repeat 50% bottom;
												padding-bottom:54px; }

.headroom--not-top .fullpage .scroll-down	{ opacity:0; visibility:hidden; transform:translate(-50%, -20px); transition:all 1s, visibility 0s 1s; } 

/* services, awards, quality */
#quality-section h2							{ margin-bottom:1em; }


#services-section						    { padding-top:3%; padding-bottom:0; }
#services h2								{ margin-bottom:1em; }
#services h2 .long-dash						{ width:3em; }
#services .fr-view							{ font-size:1.2em; line-height:1.7em; margin-bottom:40px; }

#news-section						    	{ padding:30px 0 50px 0; }
#news-section .inner-shift					{ padding-left:0; padding-right:0; }

#news-section .news-head					{ margin-bottom:24px; }
#news-section .news-head h2					{ margin-bottom:0; }
#news-section .news-more					{ color:#a46753; font-size:1.05em; letter-spacing:.04em; white-space:nowrap; }
#news-section .news-more i					{ margin-left:.6em; }
#news-section .news-more:hover				{ opacity:.7; }

#news-panel									{ align-items:stretch; }

/* left : the list drives the rotation.
   .news-scroll is taken out of the flow, so the list contributes no height of its
   own and the panel is sized by the figure alone; the list then stretches to
   exactly the image height and scrolls inside it, at every breakpoint. */
#news-panel .news-list						{ position:relative; width:38%; flex-shrink:0; background:#fff;
												border-top:5px solid #a46753; }
#news-panel .news-scroll					{ position:absolute; left:0; top:0; right:0; bottom:0; overflow-y:auto;
												scrollbar-width:thin; scrollbar-color:#a46753 #f3ece8; }
#news-panel .news-scroll::-webkit-scrollbar			{ width:4px; }
#news-panel .news-scroll::-webkit-scrollbar-track	{ background:#f3ece8; }
#news-panel .news-scroll::-webkit-scrollbar-thumb	{ background:#a46753; }
#news-panel .news-item						{ display:block; position:relative; padding:26px 46px 26px 30px; color:#a46753;
													transition:background .2s;
												border-bottom:1px solid #a46753; }
/* a lone item has nothing to count down to, so it keeps the rule but loses the bar */
#news-panel .news-item:only-child .progress	{ display:none; }
#news-panel .news-item .num					{ display:inline-block; width:36px; vertical-align:top; color:#a46753;
												font-family:"Times New Roman", Times, serif; font-size:1.1em; }
#news-panel .news-item .title				{ display:inline-block; width:calc(100% - 40px); font-size:1.05em; font-weight:700;
												line-height:1.6em; letter-spacing:.02em; color:#a46753; transition:color .2s; }
#news-panel .news-item > i					{ position:absolute; right:22px; top:50%; margin-top:-.5em; color:#a46753;
												opacity:0; transition:opacity .2s; }
#news-panel .news-item:hover				{ background:#f7f1ee; }
#news-panel .news-item.active > i			{ opacity:1; }

/* the 8s bar sits on the item's bottom edge */
#news-panel .news-item .progress			{ position:absolute; left:0; right:0; bottom:-1px; height:3px; overflow:hidden; }
#news-panel .news-item .bar					{ display:block; width:0; height:100%; background:#a46753; }
#news-panel .news-item.active .bar			{ width:100%; transition:width linear; }
#news-panel .news-item.paused .bar			{ transition:none; }

/* right : one image per item, cross faded. Always 3:2 whatever the source images are */
#news-panel .news-figure					{ position:relative; flex-grow:1; align-self:flex-start; aspect-ratio:3 / 2;
												background:#e6e1d9; overflow:hidden; }
#news-panel .news-image						{ position:absolute; left:0; top:0; right:0; bottom:0; background-position:50% 50%;
												background-size:cover; background-repeat:no-repeat; opacity:0; visibility:hidden;
												transition:opacity .6s, visibility 0s .6s; }
#news-panel .news-image.active				{ opacity:1; visibility:visible; transition:opacity .6s, visibility 0s 0s; }
#news-panel .news-image .play-button		{ pointer-events:none; }

/* The section below used to sit straight under the scene, so its top left corner is
   transparent. The news section now covers that spot, so fill it in instead. */
#quality-section							{ background:linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%), #f2efe9; }


/*
========================
news.php
========================
*/

#news-list-section							{ padding:160px 0 5%; }
#news-list-section h2						{ margin-bottom:30px; }

#news-list .col-item						{ margin-top:0; margin-bottom:40px; } /* keeps .column-3 nth-child margins */
.news-card									{ display:block; height:100%;
												box-shadow:0 0 20px rgba(43,56,46,.06); transition:box-shadow .2s; }
.news-card:hover							{ box-shadow:0 0 26px rgba(43,56,46,.14); }
.news-card .thumb							{ padding-top:66%; position:relative; overflow:hidden; background:#e6e1d9; }
.news-card .thumb img						{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
												min-width:100%; min-height:100%; object-fit:cover; transition:transform .4s; }
.news-card:hover .thumb img					{ transform:translate(-50%, -50%) scale(1.05); }
.news-card .info							{ padding:24px 26px 34px 26px; min-height:158px; border-top:5px solid #a46753; }
.news-card .date							{ font-family:"Times New Roman", Times, serif; color:#a46753; font-size:1.05em;
												letter-spacing:.06em; margin-bottom:.6em; }
.news-card .title							{ font-size:1.1em; font-weight:700; line-height:1.6em; transition:color .2s; }
.news-card:hover .title						{ color:#a46753; }

.news-empty									{ padding:40px 0 60px 0; color:#666; }

.pagination									{ margin-top:20px; text-align:center; }
.pagination a,
.pagination span							{ display:inline-block; min-width:36px; padding:8px 6px; margin:0 3px; border-radius:2px;
												color:#2b382e; font-size:1.05em; }
.pagination a:hover							{ background:#e6e1d9; }
.pagination .current						{ background:#a46753; color:#fff; }


/*
========================
news-detail.php
========================
*/

#news-slideshow-section						{ padding:200px 0 0 0; }

/* a narrower column than .inner-small so the article reads comfortably */
#news-slideshow-section .inner-small,
#news-content-section .inner-small			{ max-width:960px; }

#news-slideshow .carousel-cell				{ width:100%; }
#news-slideshow .thumb						{ display:block; position:relative; padding-top:56%; overflow:hidden; background:#e6e1d9;
												cursor:pointer; }
#news-slideshow .thumb img					{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
												min-width:100%; min-height:100%; object-fit:cover; }

#news-content-section						{ padding:50px 0 6% 0; }
#news-content-section.no-slideshow			{ padding-top:180px; }
#news-content-section .news-date			{ font-family:"Times New Roman", Times, serif; color:#a46753; font-size:1.15em;
												letter-spacing:.06em; margin-bottom:.5em; }
#news-content-section h2					{ line-height:1.4em; margin-bottom:.9em; }
#news-content-section .fr-view				{ font-size:1.1em; line-height:2em; margin-bottom:50px; }


/* selected project */
#selected-project-section					{ padding:60px 0 100px 0; }
#selected-project-section h2				{ margin-bottom:30px; }

/* contact section */
#bottom-contact-section h2					{ margin-bottom:15px; }
#bottom-contact-section .button 			{ position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.33em;
												padding:.8em 1.3em .9em 1.5em; }
/*
========================
engineering-management.php
========================
*/

/* safe health */
#safe-health-section 						{ background-image:url(../scenes/assets/scene1-1.svg); background-repeat:no-repeat; 
												background-position:right 12% top 50%; }
#safe-health-items							{ padding-bottom:80px; }

/* bottom contact */
#contact-button-section						{ height:320px; position:relative; }
#contact-button-section .button				{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:1.33em;
												padding:.8em 1.5em .9em 2em; }

/* join-us.php carries the recruitment call to action here instead of a single button */
#join-us #contact-button-section			{ height:auto; min-height:320px; display:flex; align-items:center; }
#join-us #recruit-cta						{ width:92%; max-width:700px; margin:auto; padding:50px 0; text-align:center; }
#join-us #recruit-cta h2					{ margin-bottom:.7em; color:#2b382e; }
#join-us #recruit-cta .summary				{ margin-bottom:34px; font-size:1.15em; line-height:2em; letter-spacing:.02em; color:#2b382e; }
#join-us #recruit-cta .button				{ position:static; transform:none; margin:0 8px 12px 8px; font-size:1.2em; }

/*
========================
bim.php
========================
*/

/* bim feature */
#bim-features                           	{ padding:40px 0 60px 0;}
#bim-features h2							{ font-size:1.6em; margin-bottom:1em; }
#bim-features .has-subtitle h2				{ margin-bottom:12px; }
#bim-features .has-subtitle .subtitle		{ margin-bottom:1.5em; font-size:1.2em; color:#333; }
#bim-features .fr-view						{ font-size:1.1em; line-height:1.8em; }

/* all around */
#all-around									{ margin-top:30px; padding-top:60px; border-top:1px solid #cacaca; }
#all-around	img								{ width:100%; }
#all-around .column-2 .col-item				{ margin-top:0; position:relative; }
#all-around .text							{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
#all-around .fr-view						{ font-size:1.2em; }

#bim-graph									{ position:relative; margin:auto; }
#bim-graph .path							{}
#bim-graph .label							{ position:absolute; left:0; top:0; right:0; bottom:0;  }
#bim-graph svg								{ width:90%; height:100%; max-width:600px; max-height:480px; margin:auto; display:block; }
#bim-graph .label svg						{ transition:opacity 1s; }

/* bim case */
#bim-case									{ padding-bottom:30px; }
#bim-case .inner-shift						{ padding:30px 0 0 0; }
#bim-case h2								{ margin-bottom:1.1em; }

/*
========================
engineering-management.php
========================
*/

#manage-items .offset-content .image 		{ cursor: pointer;}


/*
========================
projects.php
========================
*/

/* project filter */
#filter-section								{ padding:200px 0 60px 0; }


#project-filter-top							{ border-radius:2px; overflow:hidden; }
#project-filter-tabs						{ flex-grow:1; }
#project-filter-tabs .tab					{ height:60px; line-height:60px; padding:0 25px; background:#fff; color:#a46753; white-space:nowrap; 
												border-right:1px solid #c1a39a; font-size:1.1em; letter-spacing:.04em; transition:all .2s; 
												cursor:pointer; }											
#project-filter-tabs .tab:hover				{ }
#project-filter-tabs .tab.active			{ background:#a46753; color:#fff; }
#project-filter-button						{ margin-left:30px; color:#666; font-size:1.05em; }
#project-filter-search						{ display:none; }
#project-search-form						{ height:40px; margin:10px; position:relative; }
#project-search-form input					{ height:40px; padding:.5em .9em; border:none; background:#efefef; }
#project-search-form button					{ border:none; background:none; position:absolute; right:6px; top:50%; transform:translateY(-50%); }

#project-filter-bottom						{ border-top:1px solid #c1a39a; position:absolute; width:100%; z-index:9999; 
												padding:40px 30px; border-radius:0 0 4px 4px; display:none; color:#a46753; }
#project-filter-bottom .set					{ width:25%; border-left:1px solid #c1a39a; padding:4px 0 4px 20px; }
#project-filter-bottom .set:first-child		{ border:none; padding-left:0; }
#project-filter-bottom .label				{ font-weight:700; font-size:1.2em; margin-bottom:1em; }
#project-filter-bottom [type="checkbox"]	{ border:1px solid #a46753; }
#project-filter-bottom li					{ margin:10px 0 0 0; }
#project-filter-bottom .close				{ display:none; }

#project-filter.open #project-filter-top	{ border-radius:4px 4px 0 0; } 
#project-filter.open #project-filter-bottom	{ display:flex; }

/* project list */
#projects-section							{ padding:50px 0 40px 0; }
#projects.no-filter #projects-section 		{ padding-top:200px; }
#projects-section h2						{ margin-bottom:1em; }

#projects-section .no-item-found			{ padding:200px 0 240px 0; font-size:1.4em; text-align:center; color:#999; }


/*
========================
detail.php
========================
*/ 

/* image slideshow */
#slideshow-section                 				{ padding:200px 0 0 0; }

#slideshow-carousel								{ width:100%; }
#slideshow-carousel .carousel-cell         		{ width:100%; margin: 0; }
#slideshow-carousel .carousel-cell .thumb  		{ padding-top:50%; position:relative; overflow:hidden; }
#slideshow-carousel .carousel-cell .thumb img	{ display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); height:100%; }
#slideshow-carousel .flickity-prev-next-button.previous 		{ left:30px; }
#slideshow-carousel .flickity-prev-next-button.next 			{ right:30px; }

/* project introduction */
#intro-section                            		{ padding:80px 0;}
#detail-content h2								{ margin-bottom:1em; }
#detail-content .fr-view						{ font-size:1.05em; line-height:1.7em; }
#detail-info                   					{ width:400px; flex-shrink:0; margin-left:10% }
#intro-section dl                         		{ border-top: 1px solid #cacaca; }
#intro-section dt                         		{ width:25%; border-bottom: 1px solid #cacaca; padding:12px 4px; line-height:1.25em; }
#intro-section dd                         		{ width:75%; border-bottom: 1px solid #cacaca; padding:12px 4px; line-height:1.25em; color: #777;}


/*
========================
about.php
========================
*/

/* mission */
#mission-section .aside-image .fr-view		{ font-size:1.1em; }

/* organization */
#organization-section						{ padding:3% 0; }

#organization-graph							{ position:relative; margin:auto; }
#organization-graph .path					{}
#organization-graph .label					{ position:absolute; left:0; top:0; right:0; bottom:0;  }
#organization-graph svg						{ width:90%; height:100%; max-width:1260px; max-height:640px; margin:auto; display:block; }
#organization-graph .label svg				{ transition:opacity 1s; }

/* chairperson */
.chairperson-section						{ padding:50px 0 0 0; }
.chairperson-item							{ padding-bottom:60px; }
.chairperson-item .profile 					{ width:360px; }
.chairperson-item .profile .thumb			{ width:360px; padding-top:100%; background:#ddd; position:relative; margin-bottom:30px; }
.chairperson-item .profile img				{ position:absolute; left:0; top:0; width:100%; }
.chairperson-item .profile .subtitle		{ margin-left:30px; margin-bottom:10px; color:#666; }
.chairperson-item .profile .title			{ margin-left:30px; margin-bottom:10px; font-size:1.33em; }
.chairperson-item .fr-view					{ padding:60px 6%; font-size:1.05em; line-height:1.6em; flex-grow:1; }

/* team list */
#team-section							    { padding:60px 0 30px 0; } 
#team-section h2							{ margin-bottom:0; }
.team-item .thumb						    { width:100%; padding-top:100%; background:#ddd; position:relative; overflow: hidden;}
.team-item.has-content						{ cursor: pointer; }
.team-item img							    { position:absolute; left:0; top:0; width:100%;  transition: all .3s;  }
.team-item .info						    { padding:18px; height:100px; }
.team-item .subtitle, .pop-window .subtitle { color:#666; margin-bottom:15px; }
.team-item .title, .pop-window .title	    { font-size:1.33em;  }

.pop-wrapper			 					{ position: fixed; top: 0; left: 0; width: 100%; height: 100%;  background: rgba(0, 0, 0, 0.75); 
												z-index: 101;  opacity: 0; visibility: hidden; transition:opacity .2s, visibility 0s linear .2s;}
.pop-window 			 					{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 102; width: 92%; 
												max-width:920px; /*height:92vh;*/ max-height:85vh; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); 
												border-radius: 2px; background: #fff; overflow: auto;}
.popup-close			 					{ position: absolute; right:30px;  top:20px; z-index: 102; color: #999; font-size:1.4em; 
												font-family: 'Font Awesome 5 Light'; cursor:pointer; transition:all .2s; }
.popup-close:hover       					{ color: #eee;}
.pop-window .thumb       					{ width:240px; }
.pop-window .thumb img	 					{ width:100%;}
.pop-window .subtitle,
.pop-window .title 		 					{ margin-left: 20px; margin-bottom:15px;}
.pop-window .subtitle    					{ margin-top: 20px;}
.pop-window .content 	 					{ height:100%; padding: 50px 50px 50px 7%; overflow-y: auto; }

.show-popup .pop-wrapper 					{ opacity:1; visibility: visible; transition: opacity .2s, visibility 0s;}
body.haspopup 			 					{ overflow-y: hidden; }


/* history */
#history-items								{ padding-top:30px; padding-bottom:80px; }
#history-items h2							{ margin-bottom:30px; }

#history-list								{ padding:30px 0 40px 0; }
#history-list .inner-shift					{ padding-left:0; padding-right:0; }
#history-list h2							{ margin-bottom:24px; }

#history-list .carousel						{ position:relative; }
#history-list .cell							{ width:23%; margin-right:2.6%; padding:36px 32px 44px 32px; border-top:5px solid #a46753;
												border-radius:2px; box-shadow:0 0 20px rgba(43,56,46,.06); min-height:370px; }
#history-list .year							{ font-family:"Times New Roman", Times, serif; font-weight:bold; font-size:2.2em; color:#a46753;
												padding-bottom:.55em; margin-bottom:.75em; border-bottom:1px solid #a46753; }
#history-list .fr-view.text-list li			{ font-size:1.05em; line-height:1.8em; border-top:none; padding:.45em .2em; }

#history-list .flickity-prev-next-button			{ width:48px; height:48px; }
#history-list .flickity-prev-next-button.previous	{ left:-12px; }
#history-list .flickity-prev-next-button.next		{ right:-12px; }

/* partners */
#partners-section					 		{ padding:0 0 4% 0; }
#partners-section h2				 		{ margin-bottom:20px; }
#partners-section ul li h3           		{ font-size:1.33em; margin-bottom:.8em; }





/*
========================
join-us.php
========================
*/

/* policy */
#joinus-section .aside-image .fr-view 		{ font-size:1.1em; }
#welfare-section,
#policy-section								{ padding-top:3%; padding-bottom:70px; }

/* recruit */
#recruit-section                     		{ padding:60px 0 80px 0;}
#recruit-section h2					 		{ margin-bottom:30px; }
#recruit-list						 		{ margin-right:5%; }
#recruit-list .selector       		 		{ padding:18px 14px; margin-bottom: 5px;  background:#a46753; color:#fff; font-size:1.05em;
												cursor:pointer;  display:none;}
#recruit-list .selector::after       		{ content:''; position: absolute;top:22px; right: 20px;
												border-top:5px solid #fff; border-right:5px solid transparent; 
												border-bottom:5px solid transparent; border-left: 5px solid transparent; }
#recruit-list ul                  	 		{ width:270px; }
#recruit-list li               		 		{ border-bottom: 1px solid #ddd; padding:18px 14px; color:#a46753; font-size:1.05em; 
												transition:all .2s; cursor:pointer; }
#recruit-list li:last-child    		 		{ border-bottom: none;}
#recruit-list li:hover			     		{ color:#a46753; }		
#recruit-list li.active				 		{ background:#a46753; color:#fff; }

#recruit-content					 		{ flex-grow:1; }
#recruit-content .fr-view			 		{ display:none; padding:50px 4% 60px 4%; }
#recruit-content .fr-view.show		 		{ display:block; }

 
/*
========================
contact.php
========================
*/

#contact-section							{ padding-top:200px; }

/* contact info & map */
#contact-info								{ display:flex; flex-direction:column; }
#contact-info .fr-view						{ flex-grow:1; margin-bottom:30px; }
#contact-info .label						{ font-weight:700; font-size:1.1em; margin-bottom:.6em; }
#contact-info .data							{ color:#666; font-size:1.05em; line-height:1.4em; margin-bottom:30px; } 
#contact-info .data:last-child				{ margin-bottom:0; }

#contact-map								{ position:absolute; left:0; top:0; right:0; bottom:0; }  

/* contact form */
#feedback-section                   		{ padding:3% 0 80px 0;}
#feedback-section h2						{ margin-bottom:30px; }
#feedback-section form [type="submit"] 		{ padding:.75em 1.2em .75em 1.4em; }