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

/*
========================
Global
========================
*/
html, body	{}
#container	{}
.wrapper 	{}
.inner		{ width:900px; margin:auto; position:relative; }
.css-image	{ overflow:hidden; text-indent:-300px; }
.mobile-element { display:none; }

a			{ text-decoration:none; color:#808080; }
strong		{ font-weight:bold; }

.bx-prev,
.bx-next			{ display:inline-block; width:18px; height:18px; text-indent:-100px; overflow:hidden;  }
.bx-prev			{ background:url(images/icon-prev-small.png) no-repeat 50% 0; }
.bx-next			{ background:url(images/icon-next-small.png) no-repeat 50% 0; }

.tos-wrapper		{ background:#fff !important; }
.tos-slide			{ padding-top:0 !important; padding-bottom:0 !important; }
.tos-prev,
.tos-next			{ width:25px !important; height:48px !important; margin-top:-24px !important; }
.tos-prev			{ background:url(images/icon-prev.png) no-repeat !important; left:40px !important; }
.tos-next			{ background:url(images/icon-next.png) no-repeat !important; right:40px !important; }
.tos-prev span,
.tos-next span		{ display:none !important; }
.tos-close			{ width:25px !important; height:25px !important; background:url(images/icon-close.png) no-repeat 50% 50% !important; }
.tos-close *		{ display:none !important;}
.tos-slider img		{ height:75%; }

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

/*
========================
Header
========================
*/
#header-wrapper			{ }
#header-inner			{ padding:60px 0 20px 0; border-bottom:1px solid #ccc; }
#header-inner h1		{ width:147px; height:47px; }
#header-inner a			{ display:block; width:100%; height:100%; background:url(images/title.jpg); }
#header-inner img		{ width:100%; }
#header-inner span		{ display:none; }

/*
========================
Nav
========================
*/
#nav-wrapper			{}
#nav-inner				{}
#nav-inner ul			{ position:absolute; right:0; top:-33px; }
#nav-inner li			{ display:inline; margin-left:50px; }
#nav-inner li a			{ font-size:14px; }
#nav-inner li a.active	{ color:#f09812; }

/*
========================
Main
========================
*/
#main-wrapper			{}
#main-inner				{ padding:30px 0; min-height:450px; overflow:hidden; zoom:1; }
#main-inner	 #content	{ width:72%; }
#main-inner	 .summary 	{ font-size:15px; line-height:1.8em;  }
#main-inner	 h2			{ color:#333; font-size:16px; font-weight:bold; margin-bottom:20px; }
#main-inner	 .desc		{ line-height:1.8em; }

/*
========================
Footer
========================
*/
#footer-wrapper					{}
#footer-inner					{ padding:20px 0; border-top:1px solid #ccc; overflow:hidden; zoom:1; }
#footer-inner .social-links		{ margin-bottom:50px; }
#footer-inner .social-links a	{ margin-left:3px; }
#footer-inner .social-links img	{ opacity:.85; }
#footer-inner #related-links	{ float:right; margin-right:10px; padding-right:20px; border-right:1px solid #ccc;  }
#footer-inner #related-links a	{ margin-left:15px; font-size:13px; color:#666; vertical-align:text-top; }
#footer-inner #lang				{ float:right; margin-top:1px; }
#footer-inner #lang	a			{ margin-left:10px; color:#aaa; }
#footer-inner #rights			{ clear:both; }
#footer-inner #rights p			{ margin-bottom:5px; font-size:11px; color:#888; }
#footer-inner #rights .designer	{ color:#ccc; }
#footer-inner #rights .designer a { color:inherit; }

/*
========================
Page
========================
*/
#index #header-wrapper,
#index #nav-wrapper,
#index #footer-wrapper			{ display:none; }
#index #main-inner				{ position:absolute; top:50%; left:50%; margin-left:-450px; margin-top:-100px; padding:0; }
#index #intro-title				{ position:absolute; left:0; top:40px; width:147px; }
#index #intro-title img			{ width:100%; }
#index #intro-island			{ position:absolute; right:0; top:0; }

#works .category				{ margin-bottom:20px; }
#works .category a				{ margin-right:45px; font-size:13px; }
#works .category a.active		{}

#works #work-list				{ overflow:hidden; zoom:1; }
#works #work-list li			{ float:left; width:24.25%; margin-right:1%; margin-bottom:1%; position:relative; }
#works #work-list li.num-4 		{ margin-right:0; }
#works #work-list img			{ width:100%; }
#works #work-list .mask			{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000; background:rgba(0,0,0,.6); opacity:0; }
#works #work-list .title		{ position:absolute; left:0; top:50%; width:100%; line-height:1.4em; 
									text-align:center; color:#fff; font-size:14px; margin-top:-10px; }

#detail #main-inner		{ padding-bottom:10px; min-height:0; }
#detail #content		{ float:left; width:210px; position:relative; }
#detail #content h2		{ margin-bottom:30px; }
#detail #content .info	{}
#detail #content .info p{ margin-bottom:10px; }
#detail #content .desc	{ margin-top:30px; }
#detail #image-wrapper	{ margin-left:230px; }
#detail #image-list		{ height:450px; overflow:hidden; }
#detail #image-list li	{ width:100%; height:100%; position:relative; text-align:center; overflow:hidden; cursor:pointer; }
#detail #image-list .landscape	{ width:100%; height:100%; }
#detail #image-list .portrait	{ width:50%; height:100%; }
#detail #image-list .dul		{ position:absolute; width:49.4%; height:100%; overflow:hidden; }
#detail #image-list .dul-lt		{ left:0; top:0; }
#detail #image-list .dul-rt		{ right:0; top:0; }
#detail #image-list a	{ display:none; }
#detail #image-list img	{ background:#ccc; height:100%; }
#detail #image-nav		{ color:#999; width:100%; overflow:hidden; zoom:1; margin-top:10px; }
#detail #image-nav #control-wrapper		{  margin-left:250px; margin-top:2px;}
#detail #image-nav #control		{ width:100px; margin:auto; text-align:center; }
#detail #image-nav #control *	{ display:inline-block; }
#detail #image-nav #pager		{ height:18px; }
#detail #image-nav #next-image	{ float:right; }
#detail #image-nav #prev-image	{ float:left; }
#detail #image-nav #enlarge		{ float:right; margin-left:0; cursor:pointer; }
#detail #image-nav #back		{ float:left; }
#detail #enlarge-image		{ display:none; }

#about #content			{ float:left; width:55%; }
#about aside 			{ margin-left:60%; }
#about aside img 		{ width:100%; background:#ccc; margin-bottom:5px; }
#about #team			{ margin-top:50px; margin-bottom:30px; font-size:14px; }							
#about #team strong		{ color:#333; font-size:16px; font-weight:bold; margin-bottom:20px; }	

#service h2				{ margin-top:60px; }
#service ol				{ margin:30px 0 40px 0; padding-left:30px; font-size:14px; }
#service ol li			{ margin-bottom:20px; list-style:decimal-leading-zero; line-height:1.5em;  }

#contact						{}
#contact .contact-info			{ margin-bottom:60px; }
#contact .contact-info h2		{ margin-bottom:30px; }
#contact .contact-info address	{ font-size:14px; margin-bottom:10px; }
#contact .contact-info p		{ font-size:14px; margin-bottom:10px; }

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

	
.inner	{ width:93.75%; }

#index #main-inner		{ position:static; margin:0; width:auto; overflow:visible; }
#index #intro-title				{ left:40px; top:40px; }
#index #intro-island			{ right:30px; top:50%; margin-top:-100px; }


}

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

#header-inner			{ padding:40px 0 20px 0; }
#nav-inner li			{ margin-left:40px; }	
#main-inner	 #content	{ width:auto; }
#footer-inner .social-links		{ margin-bottom:30px; }

#works #work-list li			{ width:32.66666666666667%; margin-right:1%; margin-bottom:1%; }
#works #work-list li.num-4 		{ margin-right:1%; }
#works #work-list li.num-3 		{ margin-right:0; }

#detail #content				{ float:none; width:auto; height:auto; }
#detail #image-wrapper			{ margin-left:0; }
#detail #image-list				{ height:380px; }
#detail #image-list li			{ height:380px;  }
#detail #image-nav #control-wrapper		{  margin-left:0; }

#about #content			{ float:none; width:auto; }
#about aside 			{ margin-left:0; }
}

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

.mobile-element 		{ display:block; }
.nav-open #nav-wrapper	{ left:0; }
#container				{ width:100%; }
#container.nav-open		{ margin-left:200px; }

html, body				{ width:100%; overflow-x:hidden; }	
#header-inner			{ padding:30px 0 20px 0; }
#header-inner h1		{ margin:auto; }
#header-inner #menu		{ position:absolute; left:10px; top:20px; cursor:pointer; }

#nav-wrapper			{ position:fixed; left:-200px; top:0; width:200px; height:100%; background:#f4f4f4; z-index:999; }
#nav-inner				{ position:absolute; left:0; top:0; width:100%; height:100%; padding:0; }
#nav-inner ul			{ position:static; margin:20px 10px; }
#nav-inner li			{ display:block; margin-left:0; border-bottom:1px solid #ccc; }
#nav-inner li a			{ padding:15px 3px; display:block; }
#nav-inner li a.active	{ }
#nav-inner .social-links		{ position:absolute; left:10px; bottom:40px; }
#nav-inner .social-links a		{ margin:0; margin-right:4px; }
#nav-inner .designer			{ position:absolute; left:10px; bottom:10px; color:#aaa; }
#nav-inner .designer a			{ color:#999; }

#footer-inner #lang		{ display:none; }
#footer-inner					{ text-align:center; }
#footer-inner .social-links		{ display:none; }
#footer-inner #related-links	{ float:none; margin-right:0; padding-right:0; border-right:none; margin-bottom:20px; }
#footer-inner #related-links a	{ margin:0; padding:0 15px; }
#footer-inner #related-links a:first-child { border-right:1px solid #ccc; }
#footer-inner .designer			{ display:none; }

#main-inner				{ padding:20px 0; }

#index #intro-title				{ width:150px; left:30px; top:30px; }
#index #intro-island			{ width:85%; right:15px; margin-top:-25px; }

#image-wrapper .bx-viewport	{ height:auto !important; }
#image-list				{ width:auto !important; height:auto !important; }
#image-list li			{ width:auto !important; height:auto !important; float:none !important; margin-bottom:3px; }
#image-list li img		{ width:100% !important; height:auto !important; position:static !important; margin:0 !important; }
#detail #image-list .landscape	{ width:100%; height:auto; }
#detail #image-list .portrait	{ width:100%; height:auto; }
#detail #image-list .dul		{ position:static; width:100%; height:auto; }
#detail #image-list .dul-lt		{ margin-bottom:3px; }

#detail #image-nav		{ display:none; }

}