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

/*
========================
Global
========================
*/
html, body			{ background:#f3f3f3; }
a					{ text-decoration:none; color:#999; }
strong				{ font-weight:bold; }
em					{ font-style:italic; }
video 				{ width: 100% !important; height: auto !important; }

/** Custom scrollbar **/
body::-webkit-scrollbar 				{ width: 8px; height: 8px; }
body::-webkit-scrollbar-track 			{ background: #ddd; }
body::-webkit-scrollbar-thumb 			{ background: #aaa; border-radius: 5px; }
body::-webkit-scrollbar-thumb:hover 	{ background: #888; }

#container			{}

.wrapper 			{}
.inner				{ width:92%; max-width:960px; margin:auto; position:relative; }
.css-image			{ text-indent:-600px; overflow:hidden; }
.mobile-element		{ display:none; }

.videoWrapper 							{ position: relative; padding-bottom: 54.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:10px; }
.videoWrapper iframe 					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/** Flex layout **/
.flex         				      		{ display:flex; }
.flex-center  				  	 		{ display:flex; align-items:center; }
.flex-stretch 				  	 		{ display:flex; align-items:stretch; }
.flex-justify 				  	 		{ display:flex; justify-content:space-between; }
.flex-evenly  				  	 		{ display:flex; justify-content:space-evenly; }
.flex-reverse 				 	  		{ display:flex; flex-direction:row-reverse; }
.flex-wrap 				 	  			{ display:flex; flex-wrap:wrap; }
.flex-top 				 	  			{ display:flex; align-items: flex-start; }

/** Column layout **/
.column-2 							    { display:flex; flex-wrap:wrap; }
.column-2 .col-item 				    { width:46%; margin-top:7%; margin-right: 8%; }
.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:29.33333333333333%; margin-right:6%; margin-top:7%; }
.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:22.75%; margin-right:3%; margin-top:20px; }
.column-4 .col-item:nth-child(4n) 		{ margin-right:0; }
.column-4 .col-item:nth-child(-n+4) 	{ margin-top:0; }


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

html, body 				{ font-family: "Noto Sans TC", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 14px; }


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

#header-wrapper							{ position:fixed; left:0; top:-110px; width:100%; background:#fff; border-bottom: 1px solid #ddd; z-index:9; transition: transform .4s; }
#header-inner							{ margin-left: 4%; width: 96%; height:68px; }
#header-inner h1						{ width:136px; flex-grow: 0; flex-shrink: 0;}
#header-inner h1 a						{ display:block; width:100%; height: 0; padding-top:15.64%; background:url(../images/title-en.svg) no-repeat 50% 50%; background-size: contain; text-indent: -999px; overflow: hidden;}
#header-inner nav 						{ position: relative;}
#header-inner nav li 					{ color: #999; margin: 0 30px; }
#header-inner nav a 					{ height: 68px; line-height: 68px; white-space: nowrap; font-weight: 500; font-size: 15px; letter-spacing: .2em; color:inherit; }
#header-inner .social-link a 			{ flex-grow: 0; flex-shrink: 0; width: 68px; height: 68px; line-height: 68px; text-align: center; border-left: 1px solid #ddd; color: #B3B3B3; transition: all .2s;}
#header-inner .social-link i 			{ font-size: 16px; }
.not-responsive #header-inner .social-link a:hover 		{ color: #666;}

#nav-works.active 						{ color: #FBB03B;}
#nav-blog.active 						{ color: #DD5D36;}
#nav-about.active 						{ color: #3D68CA;}
#nav-contact.active 					{ color: #8CC63F;}
#nav-indicator 							{ position: absolute; left: 0; bottom:0; width: 0; height: 3px; background-color: #B3B3B3; transition: all .4s; }

#menu-button							{ display: none; }

.headroom--pinned #header-wrapper   	{ transform: translateY(0%);}
.headroom--unpinned #header-wrapper		{ transform: translateY(-100%);}


/*
========================
Nav
========================
*/

#nav-wrapper							{ position:fixed; left:0; top:110px; width:100%; background:#fff; z-index:8; overflow:hidden; height:0; }
#nav-inner								{ border-top:1px solid #ccc; padding:20px 0 40px 0; }
#nav-inner ul							{ text-align:center; }
#nav-inner li							{ display:inline; margin:0 30px; }
#nav-inner li a							{ font-size:15px; color:#999; padding-bottom:1px; }
#nav-inner li a.active					{ color:#333; text-decoration:underline; }
#nav-inner .info						{ margin:50px 0 40px 0; text-align:center; }
#nav-inner .info address,
#nav-inner .info p						{ margin-bottom:8px; color:#888; }
#nav-inner .social-link					{ text-align:center; }
#nav-inner .social-link	a 				{ margin:0 3px; }


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

#footer-wrapper							{ color:#808080; display:none; }
#footer-inner							{ width: 92%; margin: 0 auto; padding:30px 0; font-size: 12px; }
#footer-inner #copyright 				{ letter-spacing: .05em;}

#footer-inner .lang						{ background:url(images/bar.png) no-repeat 50% 50%; display:inline; }
#footer-inner .lang	a					{ color:#666; margin-left:30px; }
#footer-inner .lang	a:first-child		{ margin-left:0; margin-right:10px; }

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

#main									{ padding-top:68px; }
#main .inner							{  padding:50px 0; }
#main section h2						{ font-size:18px; margin-bottom:30px; }
#main section .desc						{ line-height:1.8em; }


/*
========================
Pages
========================
*/

/** Home **/

#cover								{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:999; }
#cover #logo 						{ position:absolute; left:50%; top:50%; width:140px; height:169px; margin-left:-70px; margin-top:-104.5px;}
#cover #logo-mask					{ position:absolute; left: 0; top: 0; right: 100%; height: 100%; }
#cover #title-image					{ position:absolute; left:50%; top:50%; width:154px; margin-left:-77px; margin-top:105px; }

#wave								{ position: relative; top: 0; width: 100%; height: 100%; background: rgb(251, 176, 59); overflow: hidden; }
#wave:before,
#wave:after							{ content:''; position: absolute; top: 80%; left: 50%; width: 200%; height: 160%; background: black; transform: translate(-50%, -75%); transition: top 6s linear; }
#wave:before 						{ border-radius: 45%; background: rgba(243, 243, 243, 1); animation: wave 3s linear infinite; }
#wave:after							{ border-radius: 40%; background: rgba(243, 243, 243, 0.5); animation: wave 5s linear infinite; }
#wave.up:before,
#wave.up:after 						{ top: -50%; }

@keyframes wave {
	0%{ transform: translate(-50%, -75%) rotate(0deg); }
	100%{ transform: translate(-50%, -75%) rotate(360deg); }
}


/** Works **/

#project-section							{ padding: 50px 0 0 0; position:relative; display:none;  }
#project-section #knob						{ position:fixed; right:30px; bottom:30px; width:50px; height:50px; background:url(images/icon-volume.png) no-repeat 50% 50%; }

#project-filters 							{ margin-bottom: 40px; justify-content: center; }
#project-filters .filter 					{ margin: 0 5px;}
#project-filters .select2-container 		{ font-size: 13px;}
#project-filters .select2-container--default .select2-selection--single { height: 32px; border-radius: 30px; border: none; box-shadow: 0 0 5px rgba(0,0,0,.1); outline: none;}
#project-filters .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 18px; padding-right: 30px; line-height: 32px; letter-spacing: .05em;}
#project-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; right: 8px;}
#project-filters .select2-dropdown 			{ background-color: white; border: none; border-radius: 10px; overflow: hidden;}
#project-filters .select2-results__option 	{ padding: 8px 18px; white-space: nowrap; letter-spacing: .05em;}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar 				{ width: 5px; height: 5px; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track 			{ background: #fff; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb 			{ background: #ddd; border-radius: 5px; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover 	{ background: #666; }

#project-list							{ margin:auto 10%; position:relative;  }
#project-list .item						{ position:absolute; left:0; top:0; width:160px; margin-left:-80px; }
#project-list .item .house				{ text-align:center; width:160px; height:193px; margin-bottom:15px; position:relative; }
#project-list .item .house .canvas		{ position:absolute; left:0; top:0; right:0; bottom:0; }

/* CSS3 animation
#project-list									{ margin:auto 10%; position:relative;  }
#project-list .item								{ position:absolute; left:0; top:0; width:160px; margin-left:-80px; }
#project-list .item .house						{ text-align:center; width:160px; height:193px; margin-bottom:15px; position:relative; }
#project-list .item .house .canvas				{ position:absolute; left:0; top:0; right:0; bottom:0;  }
#project-list .item .house .canvas svg 			{ position: absolute; left: 0; top: 0; width: 100%;}
#project-list .item .house .svg-house			{ transform-origin: left center; transform: perspective(500px) rotateY(0); transition: transform .6s; pointer-events: none;}
#project-list .item .house .svg-mask 			{ pointer-events: none;}
#project-list .item.is-hover .house .svg-house 	{ transform: perspective(500px) rotateY(45deg); }
#project-list .item.is-opened .house .svg-house { transform: perspective(500px) rotateY(85deg); }
*/

#project-list .item .title				{ display:none; text-align:center; }
#project-list .item .title a			{ font-size:14px; line-height:1.5em; color:#666; }


/** Detail **/

#detail-header 							{ height: 68px; overflow: hidden; }
#detail-header #detail-title			{ flex-grow: 1; font-size: 1.2em; line-height: 1.2em; letter-spacing: .02em; padding: 0 30px; }
#detail-header-back 					{ flex-grow: 0; flex-shrink: 0; width: 68px; height: 68px; line-height: 68px; text-align: center; border-right: 1px solid #ddd; color: #B3B3B3; transition: all .2s;}
.not-responsive #detail-header-back:hover{ color: #666;}
#detail-header-back i 					{ font-size: 24px; }
#detail-header-buttons	a				{ display: block; height: 68px; line-height: 68px; padding: 0 25px; border-left: 1px solid #ddd;}
.not-responsive #detail-header-buttons	a:hover{ color: #666;}
#detail-header-buttons	span 			{ margin-left: 8px; font-size: 14px; }
#detail-sharer 							{ box-sizing: border-box; position: absolute; right: 0; top: 0; padding: 0 15px; background-color: #fff; border-left: 1px solid #ddd; overflow: hidden; transform: translateX(100%); transition: transform .5s;}
#detail-sharer.show 					{ transform: translateX(0); }
#detail-sharer button 					{ height: 68px; width: 48px; flex-shrink: 0; flex-grow: 0; border: none; background: none; cursor: pointer; color: #bbb; transition: all .2s;}
.not-responsive #detail-sharer button:hover{ color: #666; }
#detail-sharer button i  				{ font-size: 16px;}

#detail-section .inner					{ max-width: 1050px; }
#detail-section h1 						{ font-size: 1.6em; margin-bottom: 20px;}
#detail-section .desc					{ margin-bottom: 30px; max-width: 680px; line-height: 1.5em; font-size: 14px; }
#detail-section	.info 					{ margin-top: 30px;}
#detail-section	.info .label			{ font-size:1.1em; font-weight: 500; margin-bottom:12px; color:#444; }
#detail-section	.info .value			{ font-size:1.05em; color:#888; }

#image-section .inner 						  { max-width: 1050px; padding-top: 0;}
#image-section #image-list img 				  { max-width: 100%; background-color: #ced7d5;}
#image-section #image-list img[data-fancybox] { cursor: pointer;  }


#related-nav 							{}
#related-nav .prev,
#related-nav .next 						{ position: fixed; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,.1); color: #fff; transition: all .4s;}
#related-nav .prev 						{ left: 0; border-radius: 0 3px 3px 0;}
#related-nav .next 						{ right: 0; border-radius: 3px 0 0 3px;}
#related-nav .arrow-icon 				{ display: block; width: 60px; height: 60px; line-height: 62px; text-align: center; } 
#related-nav .arrow-icon i 				{ font-size: 24px;}
#related-nav .label						{ padding: 0; max-width: 0; height: 60px; line-height: 60px; white-space: nowrap; overflow: hidden; display: flex; flex-direction: column; transition: max-width .4s, padding .4s; }
.not-responsive #related-nav .prev:hover,
.not-responsive #related-nav .next:hover 				{ background-color: rgba(0,0,0,.7); }
.not-responsive #related-nav .prev:hover .label,
.not-responsive #related-nav .next:hover .label 		{ max-width: 300px; padding: 0 18px; }
.not-responsive #related-nav .prev:hover .label 		{ border-left: 1px solid rgba(255,255,255,.5); }
.not-responsive #related-nav .next:hover .label 		{ border-right: 1px solid rgba(255,255,255,.5); }


/** Blog **/

#blog-section							{}
#blog-section .inner					{ max-width: 800px;}
#blog-section .pagigation				{ margin:50px 0 0 0; display: flex; justify-content: space-between; }
#blog-section .pagigation span 			{ color: #bbb;}
#blog-section .pagigation span,
#blog-section .pagigation a				{ visibility: hidden; font-size: 1.15em; letter-spacing: .02em; transition: all .2s; }
#blog-section .pagigation a:hover 		{ color: #333;}
#blog-section .pagigation .prev 		{ visibility: visible;}
#blog-section .pagigation .next 		{ visibility: visible;}
#blog-section .pagigation .prev i 		{ margin-right: 5px;}
#blog-section .pagigation .next i 		{ margin-left: 5px;}

#blog-filter 							{ margin-bottom: 40px;}
#blog-filter li 						{ margin: 0 12px 16px 0;}
#blog-filter li::after					{ content: '/'; font-weight: 300; margin-left: 12px; color: #bbb;}
#blog-filter li:last-child::after 		{ display: none;}
#blog-filter li a						{ color:#888; font-size: 1.08em; transition: all .2s;}
.not-responsive #blog-filter li a:hover,
#blog-filter li.active a 				{ color: #222;}
#blog-filter-more 						{ display: none;}

.post-item								{ background-color: #fff; padding:25px 20px 30px 20px; margin-bottom: 20px; margin-left: 110px; position:relative; }
.post-item .post-category 				{ color: #808080; margin-bottom: 10px;}
.post-item .post-title					{ margin-bottom:20px; font-size:22px; line-height: 1.2em; color:#333;}
.post-item .post-title a				{ color:inherit; }
.post-item .desc						{ color: #808080; text-align:justify; }
.post-item .desc img					{ width:100% !important; height:auto !important; margin-top: 10px; }	
.post-item .post-cover					{ margin-bottom: 20px;}
.post-item .post-cover img 				{ width:100% !important; max-width: 100%;}
.post-item .post-date					{ position:absolute; left:-110px; top: 0; background-color: #fff; color: #666; width: 90px; height: 90px; padding: 18px 15px 0 15px; box-sizing: border-box; }
.post-item .post-date .month 			{ display: block; margin-bottom: 4px;}
.post-item .post-date .day 				{ display: block; font-size: 40px; font-weight: 200;}
.post-item .read-more					{ margin-top: 30px; }
.post-item .read-more a 				{ font-size: 16px; letter-spacing: .04em; transition: all .2s; }
.not-responsive .post-item .read-more a:hover 			{ color: #333;}
.post-item .read-more i 				{ margin-left: 10px;}


/** About **/

#about-section .inner								{ max-width: 1050px; padding-bottom: 0;}
#about-section .paragraph 							{ margin-bottom: 50px;}
#about-section .paragraph.vertical .col-image   	{ width: 50%;}
#about-section .paragraph.vertical .col-text 		{ width: 40%;}
#about-section .paragraph.horizontal .col-image   	{ width: 60%;}
#about-section .paragraph.horizontal .col-text 		{ width: 30%;}
#about-section .paragraph img          				{ width: 100%;}
#about-section .paragraph h2 						{ font-size: 2em; font-weight: 300; line-height: 1.3em; letter-spacing: .04em; margin-bottom: 20px; }
#about-section .paragraph .desc						{ font-size: 1.1em; color: #666; text-align: justify; }
#team-section .inner 								{ padding-top: 0; padding-bottom: 80px; max-width: 1400px;}
#team-section .inner h2 							{ font-size: 2em; font-weight: 300; text-align: center; margin: 90px 0 60px 0;}
#team-section #team-list img						{ width:100%; margin-bottom:15px; }
#team-section #team-list .name						{ font-size:1.15em; font-weight:500; color:#222; margin-bottom:10px; }
#team-section #team-list .position					{ color: #666; }


/** Contact **/

#contact-section									{ }
#contact-section .inner								{ max-width:920px; }
#contact-box 										{ width: 260px; margin-right: 4%; background-color: #fff; padding: 40px 25px; box-sizing: border-box;}
#contact-box .header								{ border-bottom: 1px solid #ddd; padding-bottom: 30px; margin-bottom: 30px;}
#contact-box .header h2 							{ margin-bottom: 5px; font-size: 1.25em; font-weight: 500; color: #444;}
#contact-box .header p 								{ margin-bottom: 0; font-size: 1.1em; font-weight: 500; color: #444;}
#contact-box p,
#contact-box address								{ margin-bottom:15px; color:#808080; font-size: 1.04em; line-height: 1.3em; }
#contact-box .icon 									{ width: 16px; margin-right: 15px; flex-grow: 0; flex-shrink: 0; text-align: center;}
#contact-section .label								{ display:inline-block; width:120px; color:#000; }

#contact-form 										{ flex-grow: 1; background-color: #fff; padding: 35px 40px; }
#contact-form .header 								{ border-bottom: 1px solid #ddd; padding-bottom: 25px; margin-bottom: 30px;}
#contact-form .header #contact-icon 				{ width: 44px; flex-grow: 0; flex-shrink: 0; margin-right: 20px;}
#contact-form .header p 							{ margin-bottom: 0; font-size: 1.2em; line-height: 1.4em;}
#contact-form .form-row								{ margin-bottom:20px; }
#contact-form label 								{ display: block; margin-bottom: 10px;}
#contact-form input[type="text"],
#contact-form textarea								{ width:95%; padding:2% 2.5%; border:1px solid #ccc; border-radius:5px; font-size:14px; font-family: inherit; outline: none; }
#contact-form textarea								{ height:120px; }
#contact-form .button-wrapper						{ margin-top: 30px; text-align:center; }
#contact-form input[type="submit"]					{ color:#fff; background:#8CC63F; font-size: 1.2em; font-weight: 500; padding:10px 40px 12px 40px; border-radius: 3px; border:none; -webkit-appearance: none; -moz-appearance: none;  }
#contact-form input[type="submit"].disabled 		{ opacity: .5;}
#contact-form .error								{ display:block; margin-top:5px; font-size: 13px; color:#c00; text-align: right; }
#contact-form .msg									{ font-size:14px; color:#333; }