@charset "utf-8";
@import url(reset.css);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');

/*
========================
Global
========================
*/
html, body		{ /*background:#f2efe2;*/ background:#EDECEB; }
*				{ transition-timing-function:ease-in-out; }

a				{ color:#666; text-decoration:none; }
strong			{ font-weight:bold; }
em				{ font-style:italic; }

.mobile-element	{ display:none; }

/*
========================
Font
========================
*/
html, body 		{ font-family:"Heiti TC", "微軟正黑體", "Microsoft JhengHei", "新細明體", "Microsoft YaHei", "Helvetica Neue", Helvetica, "Segoe UI", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif; font-size:14px; -webkit-text-size-adjust:none; color:#898989; }

/*
========================
Header
========================
*/
#header			{ position:fixed; left:0; bottom:60%; width:250px; z-index:101; }
#header h1		{ width:138px; height:71px; margin:auto; }
#header h1 a	{ display:block; width:100%; height:100%; margin-left:10%; overflow:hidden; text-indent:-300px; 
				  background-repeat:no-repeat; background-position:0 0;
				  background-image:url(../image/logo.png);
				  background-image:url(../image/logo.svg), none;
				}

/*
========================
Nav
========================
*/
#nav				{ position:fixed; left:0; top:0; bottom:0; width:250px; background:#fff; box-shadow:2px 0 2px rgba(0,0,0,.1); z-index:100; }
#nav p				{ position:absolute; left:0; top:3%; right:0; text-align:center; color:#d1ccbd; 
						  font-family:'Open Sans', sans-serif; font-size:11px; letter-spacing:.12em; }
#nav p a			{ color:inherit; }
#nav ul				{ position:absolute; left:0; top:46%; right:0; }
#nav ul li			{ text-align:center; color:#595757; font-size:1.12em; margin-bottom:10%; }
#nav ul li a		{ color:inherit; display: inline-block; }
#nav ul li a:first-letter	{ letter-spacing:.2em; }
#nav ul li a::after 		{ content:''; display:block; width:0; height:2px; background:#595757; transition:width .3s; margin-top:3px; }
#nav ul li a.hover::after  	{ width: 100%; }
#nav ul li.active a::after  { width: 100%; }
#nav .links			{ position:absolute; left:0; right:0; bottom:3%; text-align:center; }
#nav .links a		{ font-size:12px; color:#d1ccbd; }
#nav .links span	{ color:#d1ccbd; padding:0 8px 0 12px; display:inline-block; font-size:10px; }

/*
========================
Main
========================
*/
#main				{ margin-left:250px; position:relative; }


/*
========================
Footer
========================
*/
#footer				{}
#loading 			{ position:fixed; left:0; top:50%; right:0; margin-top:-36px; display:none; }
#loading .holder	{ margin-left:250px; height:72px; background:url(../image/loading.svg) no-repeat 50% 50%; }						

/*
========================
Page
========================
*/

/* Home */
#cover							{ width:100%; height:100%; position:relative; color:#d1ccbd; }
#cover .fullpage				{ width:100%; height:100%; }
#cover .fullpage .section		{ width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; image-rendering: -webkit-optimize-contrast; }
#cover .fullpage .mask			{ width:100%; height:100%; /*background:rgba(0,0,0,.16);*/ display:block; }
#cover .fullpage .slogan		{ position:absolute; left:0; top:50%; right:0; text-align:center; color:#e5dcb5; margin-top:-.5em; 
									transform:translateY(50px); opacity:0; transition:all 1.5s; transition-delay:.5s; 
									font-size:1.2em; letter-spacing:.4em;}
#cover .fullpage .cycle-slide-active .slogan 	{ transform:translateY(0); opacity:1; }

#cover .indicator				{ position:absolute; right:1.5%; top:3%; text-align:right; z-index:200; }
#cover .indicator span			{ display:inline-block; }
#cover .indicator .title		{ float:left; }
#cover .indicator .up,
#cover .indicator .down			{ text-align:center; font-family:"Times New Roman", Times, serif; font-weight:bold; }
#cover .indicator .sep			{ padding:0 6px; }
#cover .title					{ position:absolute; left:1.5%; top:3%; z-index:200; }


/* Works */
#work-list				{ overflow:hidden; zoom1:1; padding:.5%; }
#work-list li			{ float:left; width:24%; margin:.5%; position:relative; cursor:pointer; }
#work-list img			{ width:100%; display:block; }
#work-list .mask		{ position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(255,255,255,.8); opacity:0; transition:all .5s; }
#work-list .category,
#work-list .title,
#work-list .sep			{ position:absolute; left:18%; right:18%; text-align:center; letter-spacing:.5em; color:#968669; transition:all .5s;}
#work-list .category	{ top:53%; font-size:1.1em; opacity:0; transform:translateY(20px); }
#work-list .title		{ bottom:53%; font-size:1.2em; font-weight:bold; opacity:0; transform:translateY(-20px);}
#work-list .sep			{ top:50%; }
#work-list .sep	.bar	{ display:block; height:1px; background:#bab3a2; width:0; transition:all .5s;}
#work-list li:hover .mask	{ opacity:1; }	
#work-list li:hover .category,
#work-list li:hover .title		{ opacity:1; transform:translateY(0); }
#work-list li:hover .sep .bar	{ width:100%; }

/* Detail */
#detail					{ width:100%; height:100%; position:relative; color:#968669;  }
#detail	#slide-set		{ transition:opacity .3s; }
#detail	#slide-set.hide	{ opacity:0; visibility:hidden; }
#detail	#slide-set.hide .slide	{ visibility:hidden !important; /*Fix IE9*/ }
#detail #image-slider			{ position:absolute; top:12%; left:12%; bottom:12%; right:12%; overflow:hidden; }
#detail #image-slider ul		{ width:100%; height:100%; }
#detail #image-slider li		{ height:100%; width:100%; text-align:center; }
#detail #image-slider img		{ height:100%; }
#detail #image-slider .slide-button	{ position:absolute; z-index:999; top:0; bottom:0; width:50%; display:block; background-color: rgba(0, 0, 0, 0); }
#detail #image-slider .prev		{ left:0; /*cursor:url(../image/arrow-left.png), pointer;*/ cursor:none; }
#detail #image-slider .next		{ right:0; /*cursor:url(../image/arrow-right.png), pointer;*/ cursor:none; }
#detail h2				{ position:absolute; left:50%; top:6.5%; width:200px; margin-left:-100px; text-align:center; 
							font-size:1.1em; letter-spacing:.15em; transition:opacity .3s; }
#detail h2.hide			{ opacity:0; visibility:hidden; }
#detail .pager			{ position:absolute; right:12%; bottom:6.5%; text-align:center; font-size:.96em; }
#detail .pager .current,
#detail .pager .total	{ font-family:"Times New Roman", Times, serif; font-weight:bold; }
#detail .pager .sep		{ padding:0 8px; }
#detail .info-button	{ position:absolute; left:50%; bottom:6.5%; color:inherit; font-size:.96em; width:40px; margin-left:-20px;  }
#detail .share-button	{ position:absolute; left:12%; bottom:6.5%; color:inherit; font-size:.96em; }
#detail .back-button	{ position:absolute; left:1.5%; top:3%; color:inherit; font-size:.96em; }

#detail #info-set		{ visibility:hidden; opacity:0; transition:opacity .5s; }
#detail #info-set.show	{ visibility:visible; opacity:1; }
#detail #info			{ position:absolute; left:50%; top:30%; width:420px; margin-left:-210px; }
#detail #info .title	{ font-size:1.2em; letter-spacing:.15em; margin-bottom:10%; text-align:center; }
#detail #info .desc		{ text-align:justify; line-height:1.4em;  }
#detail .close-button	{ position:absolute; left:50%; bottom:6.5%; width:60px; margin-left:-30px; text-align:center; font-size:.96em; }

.cursor-prev,
.cursor-next						{ position:absolute; top:0; left:0; opacity:0; visibility:hidden; transition:opacity .5s; }
.cursor-prev.show,
.cursor-next.show					{ opacity:1; visibility:visible; }
.icon-lt, .icon-rt					{ width:35px; height:20px; margin-left:0; top:50%; box-shadow:inset 0 0 0 1px #c0b6a5; border-radius: 25px;}
.icon-lt:before, 
.icon-rt:before						{ position:absolute; content:''; width:8px; height:8px; background:#c0b6a5; top:6px; border-radius:4px;}
.icon-lt:before						{ right:4px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-iteration-count: infinite;
									animation-iteration-count: infinite; -webkit-animation-name:scrollLeft; animation-name:scrollLeft; }
.icon-rt:before						{ left:4px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-iteration-count: infinite;
									animation-iteration-count: infinite; -webkit-animation-name:scrollRight ; animation-name: scrollRight; }

@-webkit-keyframes scrollLeft {
  0% { opacity: 1;  }
  100% { opacity: 0; -webkit-transform: translateX(-21px); transform: translateX(-21px);  }
}

@keyframes scrollLeft {
  0% { opacity: 1;  }
  100% { opacity: 0; -webkit-transform: translateX(-21px); transform: translateX(-21px); }
}

@-webkit-keyframes scrollRight {
  0% { opacity: 1;  }
  100% { opacity: 0; -webkit-transform: translateX(21px); transform: translateX(21px);  }
}

@keyframes scrollRight {
  0% { opacity: 1;  }
  100% { opacity: 0; -webkit-transform: translateX(21px); transform: translateX(21px); }
}


/* About, Service, Contact */
#aside					{ position:fixed; right:30px; top:30px; bottom:30px; }
.aside-image			{ height:100%; }
.aside-image .slide		{ width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }

#content				{ width:58%; }
#content-inner			{ padding:20% 0; width:72%; margin:auto; }
.paragraph				{ margin-bottom:15%; position:relative; overflow:hidden; zoom:1; }
.paragraph h2			{ font-size:1.15em; padding-bottom:2.5%; margin-bottom:4%; border-bottom:1px solid #c7c7c7; color:#4d4d4d; 
							letter-spacing:.1em; }
.paragraph .subtitle	{ position:absolute; right:0; top:0; color:#4d4d4d; }
.paragraph .desc		{ line-height:1.6em; }
.paragraph.has-image .desc	{ margin-left:45%; }
.paragraph img			{ float:left; width:40%; margin-top:5px; }
.paragraph.multi-image img { float:none; width:auto; height:96px; margin-right:8px; margin-bottom:12px; }

/* Contact */
#contact #content-inner		{ padding:20% 0; margin:auto; max-width:400px; }
#contact .company			{ margin-bottom:30px; }
#contact .company p			{ margin-bottom:10px; }
#contact .company p.zh		{ font-size:1.18em; letter-spacing:.1em; font-weight:bold; color:#333; }
#contact .company p.en		{ font-size:.92em; }
#contact .contact-info		{ margin-bottom:12%; }
#contact .contact-info p,
#contact .contact-info address	{ margin-bottom:10px; }
#contact .contact-info p .label	{ display:inline-block; width:20px; }
#contact #map				{ margin-bottom:60px; }
#contact #map img			{ width:100%; }
#contact form 				{ /*padding-top:2%;*/ }
#contact form p				{ margin-bottom:10px; }
#contact form input[type="text"],
#contact form input[type="email"],
#contact form textarea		{ background:#e2dfd3; border:none; width:96%; padding:2% 2%; font-family:inherit; }
#contact form textarea		{ height:120px; }
#contact form .smt			{ margin:2% 0; overflow:hidden; zoom:1; }
#contact form input[type="submit"]	{ background:#222; color:#fff; border:none; font-family:inherit; padding:1.8% 9%; vertical-align:middle; float:left; }
#contact form .loading		{ width:21px; margin-left:15px; margin-top:8px; float:left; display:none; }
#contact form .error		{ display:block; padding:5px 0; }

/* News */
.masonry-grid .grid-item		{ margin-bottom:3%; overflow:hidden; }
.masonry-grid .grid-item,
.grid-sizer						{ width:23.5%; }
.gutter-sizer					{ width:2%; }
#news-list						{ width:90%; margin:5% auto; }
#news-list .grid-item img		{ width:100%; margin-bottom:8px; opacity:1; transition:opacity .8s; cursor:pointer; }
#news-list .grid-item img:hover	{ opacity:.7; }
#news-list .grid-item .date		{ font-size:.95em; margin-bottom:5px; color:#999585; }
#news-list .grid-item .title	{ cursor:pointer; color:#333; }
#news-list .text-item			{ background:#d8d3bc; }
#news-list .text-item .box		{ padding:6%; padding-bottom:8%; }
#news-list .text-item .title	{ margin-bottom:1.4em; line-height:1.5em; font-size:1.15em; }
#news-list .text-item .desc		{ line-height:1.5em; color:#666; }

#post 							{ width:100%; max-width:680px; margin:6% auto; }
#post article .date				{ font-size:.95em; margin-bottom:5px; color:#c4ba9b; }
#post article h1				{ line-height:1.5em; font-size:1.2em; margin-bottom:25px; }
#post article .desc				{ line-height:1.5em; margin-bottom:40px; }
#post article img				{ width:100%; margin-bottom:5px; }
#post.popup						{ max-width:600px; margin:7% auto; box-shadow:0 0 5px rgba(0,0,0,.15); }
#post.popup article				{ padding:6% 5%; padding-bottom:4%; background:#fff;  }
.mfp-bg							{ background:rgba(255,255,255,.9); }

/*
========================
Responsive Layout
========================
*/

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

.masonry-grid .grid-item,
.grid-sizer						{ width:32%; }
.gutter-sizer					{ width:2%; }

}

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

#header				{ width:230px; }
#nav				{ width:230px; }
#main				{ margin-left:230px; }
#loading .holder	{ margin-left:230px; }


#work-list li		{ width:32.33333333333333%; margin:.5%; }
}


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

#header				{ width:210px; }
#nav				{ width:210px; }
#main				{ margin-left:210px; }
#loading .holder	{ margin-left:210px; }	

#header h1		{ width:124px; height:64px; }
#header h1 a	{ background-size:124px 64px; }

#contact #content-inner		{ padding:6% 0; }
#contact .contact-info		{ margin-bottom:15%; }
#contact form .smt					{ text-align:center; position:relative; }
#contact form input[type="submit"]	{ float:none; }
#contact form .loading				{ float:none; margin:0; position:absolute; right:0; top:5px; }

.masonry-grid .grid-item,
.grid-sizer						{ width:49%; }
.gutter-sizer					{ width:2%; }
}

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

#header				{ width:190px; }
#nav				{ width:190px; }
#main				{ margin-left:190px; }
#loading .holder	{ margin-left:190px; }	


}

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

.mobile-element	{ display:block; }

#header			{ position:fixed; left:0; bottom:auto; top:0; width:100%; height:86px; background:#fff; 
					box-shadow:0 2px 2px rgba(0,0,0,.1); transition:top .5s; }
#header.minimal	{ top:-90px; }
#header h1		{ width:117px; height:60px; margin-top:10px; }
#header h1 a	{ background-size:117px 60px; }

#nav			{ width:190px;  z-index:103; left:-200px; transition:left .5s; }
#nav.show		{ left:0; }
#nav ul			{ top:36%; }

#main			{ margin-left:0; }
#main .page-wrapper	{ padding-top:86px; }

#footer			{ background:#fff; padding:25px 0; text-align:center; overflow:hidden; zoom:1; color:#999; }
#footer address	{ width:50%; float:left; }	
#footer p		{ margin-left:50%; font-family:"Times New Roman", Times, serif; }
#loading .holder{ margin-left:0; }			

#menu-button		{ position:absolute; left:0; top:50%; margin-top:-25px; width:48px; height:48px; cursor:pointer; }
#menu-button .bar	{ position:absolute; left:50%; top:50%; width:20px; margin-left:-10px; height:3px; background:#808080; }
#menu-button #bar-1	{ margin-top:-1px; }
#menu-button #bar-2	{ margin-top:-7px; }
#menu-button #bar-3	{ margin-top:5px; }
#nav-mask			{ position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.5); display:none; z-index:102; }
#nav-mask.show		{ display:block; }


/* Cover */
#cover							{ /*height:auto !important;*/ }
#cover .indicator				{ display:none; }
#cover .title					{ display:none !important; }
#cover .scroll-down				{ position:fixed; transition-delay:.2s; }
#cover .fullpage .slogan		{ letter-spacing:.4em; }

/* Detail */
#detail							{ height:auto !important; position:relative; }
#detail	#slide-set.hide			{ opacity:1; visibility:visible; }
#detail #image-slider			{ position:static; }
#detail #image-slider ul		{ height:auto; }
#detail #image-slider li		{ height:auto; position:static !important; opacity:1 !important; visibility:visible !important; margin-bottom:1px; }
#detail #image-slider img		{ height:auto; width:100%; display:block; }
#detail #image-slider .slide-button	{ display:none; }
#detail h2				{ position:static; width:88%; margin:auto; margin-bottom:5%; padding-top:8%; font-size:1.2em; letter-spacing:.15em; }
#detail .pager			{ display:none; }
#detail .info-button	{ display:none; }
#detail .share-button	{ left:auto; bottom:auto; right:3%; top:105px; }
#detail .back-button	{ left:3%; bottom:auto; top:105px; }

#detail #info-set		{ visibility:visible; opacity:1; }
#detail #info			{ position:static; width:88%; margin:auto; margin-bottom:8%; }
#detail #info .title	{ display:none; }
#detail #info .desc		{ text-align:left; }
#detail .close-button	{ display:none; }

.cycle-sentinel			{ display:none !important; }


/* About, Service, Contact */
#aside					{ position:static; margin:3%; margin-top:6%; width:94% !important; }
.aside-image			{ width:100%; height:auto; }
.aside-image .slide		{ width:100%; height:0; padding-bottom:100%;  }

#content				{ width:auto; }
#content-inner			{ padding:6% 0; width:72%; }


/* Contact */
#contact #content-inner	{ padding:6% 0; }

/* News */
.masonry-grid .grid-item		{ margin-bottom:4%; }
}


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

#header			{ height:72px; }
#header h1		{ width:93px; height:48px; margin-top:12px; }
#header h1 a	{ background-size:93px 48px; }

#main .page-wrapper	{ padding-top:72px; }

#loading .holder	{ background-size:48px 48px; }	

/* Works */
#work-list li		{ width:49%; margin:.5%; }

/* Detail */
#detail h2				{ padding-top:10%; }
#detail .share-button,
#detail .back-button	{ top:90px; }


/* About, Service, Contact */
#content-inner			{ padding:6% 0; width:86%; }


/* Contact */
}



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

#post.popup						{ margin:0 auto; box-shadow:none; }
#post.popup	article				{ padding-top:40px; }	
}


/* for 480px or less */ 
@media screen and (max-width: 480px) {
	
#footer			{ padding:15px 0; }
#footer address	{ width:auto; float:none; margin-bottom:8px; }	
#footer p		{  margin-left:0; }	

#cover-footer			{ padding:15px 0; }
#cover-footer address	{ width:auto; float:none; margin-bottom:8px; }	
#cover-footer p		{  margin-left:0; }	
	
.paragraph.has-image .desc	{ margin-left:0; }
.paragraph img				{ float:none; width:auto; max-width:100%; margin-bottom:20px; }	
.paragraph.multi-image img { height:72px; margin-right:6px; margin-bottom:8px; }

#work-list .category,
#work-list .title,
#work-list .sep			{ letter-spacing:.1em; }
#work-list .category	{ font-size:1em; }
#work-list .title		{ font-size:1.1em; }	

#detail h2				{ padding-top:15%; }
#detail .share-button,
#detail .back-button	{ top:85px; }

/* News */
.masonry-grid .grid-item		{ margin-bottom:4%; }
#news-list						{ width:94%; }
#news-list .grid-item img		{ margin-bottom:2px; }
}


@media screen and (orientation:landscape) and (max-device-width: 768px) {
#header			{ position:fixed; left:0; bottom:0; top:0; width:50px; height:auto; }
#header.minimal	{ top:0; }
#header h1		{ width:40px; height:21px; position:absolute; top:50%; left:50%; margin-left:-20px; margin-top:-20px; }
#header h1 a	{ background-size:40px 21px; }
#menu-button	{ position:absolute; left:50%; top:5px; margin-top:0; margin-left:-20px; width:40px; height:40px; }
#nav ul			{ top:24%; }

#footer			{ padding:18px 0; }


#main				{ margin-left:50px; }
#main .page-wrapper	{ padding-top:0; }
#aside				{ margin-top:3%; }


#detail .share-button	{ left:auto; bottom:auto; right:3%; top:15px; }
#detail .back-button	{ left:3%; bottom:auto; top:15px; }

#content-inner			{ padding:3% 0; cur }
}