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

/*
========================
Global
========================
*/
html, body	{}
#container	{}
.wrapper 	{}
.inner		{}

a			{ text-decoration:none; color:#666; }
strong		{ font-weight:bold; }
em			{ font-style:italic; }
table		{ width:100% !important; border-top:1px solid #ddd; }
table tr	{}
table th	{ text-align:left; font-weight:bold; }
table th,
table td	{ border-bottom:1px solid #ddd; vertical-align:top; padding:10px 0; line-height:1.8em; }

.mobile-element { display:none; }

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

/*
========================
Header
========================
*/
#header-wrapper			{ position:fixed; left:0; top:-70px; right:3px; height:70px; z-index:30; 
							-webkit-transition:top .5s; 
							        transition:top .5s; }
#header-wrapper.show	{ top:0; }
#header-inner			{ padding:25px 40px 0 40px; }
#header-inner h1		{ display:none; }
#header-inner img		{ float:right; }
#header-inner nav		{ }
#header-inner nav a		{ margin-right:3em; font-size:1.14em; position:relative; }
#header-inner nav a span	{ position:absolute; left:50%; top:1.8em; width:6px; height:6px; margin-left:-3px; 
								background:url(image/icon-dot.png); opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity .6s; transition:opacity .6s; }
#header-inner nav a.active span	{ opacity:1; filter:alpha(opacity=100); }


/*
========================
Main
========================
*/
#main-wrapper			{}
#main-inner				{}

/*
========================
Footer
========================
*/
#footer-wrapper			{ position:relative; padding-bottom:20px; margin:0 40px; display:none; }
#footer-wrapper.show	{ display:block; }
#footer-inner			{ overflow:hidden; zoom:1; }
#footer-nav				{ float:left; }
#footer-nav	ul			{}
#footer-nav	li			{ display:inline; margin-right:3em; }
#footer-nav	a.active	{ color:#dbb967; }
#langbar				{ float:right; font-size:.9em; }
#langbar span			{ margin:0 .5em; }
#social-links			{ float:right; margin-right:2em; }
#social-links a			{ margin:0 .5em; }


/*
========================
Page
========================
*/
/** Home **/
#cover					{ position:fixed; left:0; top:0; width:100%; height:100%; }
#cover .inner			{ position:absolute; left:40px; top:40px; right:40px; bottom:40px; }							
#cover .summary			{ position:absolute; left:5%; top:50%; margin-top:-60px; z-index:10; }
#cover .summary a		{ display:inline-block; color:#fff; font-size:1.5em; border-radius:50px; padding:.54em 2em .54em 1em; transition:all .2s;
							 background:url(image/icon-scroll.png) no-repeat right 3px top 50% #000; text-transform:uppercase; margin-right:4px; }
#cover .summary a:hover	{ background-color:#d7b565; }							 
#cover .summary #visual-button	{ text-transform:none; padding:.54em 1em .54em 1em; background:#000; }
#cover .summary #visual-button:hover	{ background-color:#d7b565; }							 							 
#cover .summary p.slogan-1	{ width:271px; height:100px; background:url(../image/slogan1-zh.png) no-repeat; text-indent:-600px; overflow:hidden; margin-bottom:2.5em; }
#cover .summary p.slogan-2	{ width:114px; height:26px; background:url(../image/slogan2.png) no-repeat; text-indent:-300px; overflow:hidden;
								position:absolute; left:290px; top:66px; }

body.zh #cover .summary p.slogan-1	{ background:url(../image/slogan1-en.png) no-repeat; }

/** Store **/
#work-list				{ overflow:hidden; }
.grid					{ margin-left:40px; margin-right:40px; }
.grid .stamp			{ position:absolute; top:0; height:100%; left:39.225%; right:39.225%; }
.grid-sizer,
.grid-item 				{ width:8.475%;  }
.grid-item				{ margin-bottom:2.2%; position:relative; cursor:pointer; -webkit-transition:margin-left .5s; transition:margin-left .5s; }
.grid-item.landscape	{ width:21.55%; }
.gutter-sizer 			{ width:4.6%; }
.grid-item.offset-rt	{ margin-left:60px;}
.grid-item.offset-lt	{ margin-left:-60px; }
.grid-item.hidden		{ display:none; }
.grid-item img			{ width:100%; opacity:.9; filter:alpha(opacity=90); }
.grid-item .title		{ position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(255,255,255,.85); 
							opacity:0; 
							filter:alpha(opacity=0); -webkit-transition:opacity .5s; transition:opacity .5s; }
.grid-item .title span	{ position:absolute; left:0; top:50%; right:0; color:#333; margin-top:-1em; text-align:center; line-height:1.4em; }
.grid-item .title strong{}
.grid-item .inner 		{ -webkit-transition:-webkit-transform .5s; transition:transform .5s;}
.grid-item:hover .title	{ opacity:1; filter:alpha(opacity=100); }
.grid-item:hover .inner		{ -webkit-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1); }

#work-viewer			{ position:fixed; left:50%; top:50%; margin-left:-152px; margin-top:-260px; background:#none; -webkit-transition:left .8s; transition:left .8s; cursor:pointer; z-index:20; }
#work-viewer.offset		{ left:30%; cursor:default; }
#work-viewer.disabled	{ cursor:default; }
#video-loading			{ position:absolute; left:50%; top:50%; margin-left:-32px; margin-top:-32px; }
#video-holder			{ width:100%; height:100%; position:absolute; left:50%; top:50%; overflow:hidden; }
#video-holder video		{ width:100%; height:100%; }
#video-holder img		{ width:100%; height:100%; }
#frame-background		{ background:#fff; }
#viewer-frame			{ box-shadow:2px 4px 5px rgba(0,0,0,.4); }
#frame-background,
#viewer-frame			{ position:absolute; left:50%; top:50%; -webkit-transition:-webkit-transform 1s; transition:transform 1s; }
#work-viewer.landscape #viewer-frame	{ box-shadow:4px -2px 5px rgba(0,0,0,.4); }
#work-viewer.landscape #viewer-frame,
#work-viewer.landscape #frame-background { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);  }

#work-info				{ position:absolute; left:10px; bottom:-58px; display:none; visibility:hidden; cursor:pointer; }
#work-info.show			{ visibility:visible; }
#work-info p			{ margin-bottom:8px; }
#work-info p.title		{ font-weight:bold; background:url(image/icon-detail.png) no-repeat right 0; padding:1px 0; padding-right:25px; }
#work-info p.artist		{ font-size:.9em; }
#work-viewer.offset #work-info p.title	{ background:none; }
#work-viewer.offset #work-info	{ cursor:default; }
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

#video-loading {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#filter					{ position:absolute; left:40px; top:100px; -webkit-transition:top .5s; transition:top .5s; z-index:40; }
#filter.fixed			{ /*top:50px !important;*/ }
.filter-set				{ float:left; width:210px; margin-right:3px; position:relative; }
.filter-set .label		{ background:url(image/icon-dropdown.png) no-repeat right 50% #000; color:#fff; padding:6px 10px; 
							height:12px; font-size:.9em; cursor:pointer; }
.filter-set .option		{ position:absolute; left:0; top:25px; width:100%; padding:20px 0; background:#000; display:none; }
.filter-set .option-body{ max-height:330px; overflow:hidden; }
.filter-set ul			{ }
.filter-set li			{ padding:6px 20px; cursor:pointer; color:#aaa; font-size:.9em; line-height:1.2em; }
.filter-set li:hover	{ color:#ccc; }
.filter-set li.active	{ color:#fff; }

#search-box				{ margin:0 15px; margin-bottom:15px; position:relative; }
#search-text			{ border:none; background:#222; border-radius:0; color:#fff; padding:6px 4%; width:92%; }
#search-button			{ position:absolute; right:2px; top:50%; margin-top:-12px; cursor:pointer; }

/** Artwork **/
#artwork				{ margin:150px 40px 150px 60%; max-width:520px; position:relative; }
#artwork article		{ padding-top:30%; }
#artwork h1				{ font-size:1.5em; margin-bottom:.5em; }
#artwork .artist		{ margin-bottom:2em; color:#999; }
#artwork .artist a		{ color:#dbb967; font-size:1.05em; margin-left:5px; border-bottom:1px solid #dbb967; }
#artwork .desc			{ line-height:1.6em; margin-bottom:4em; text-align:justify; color:#666; }
#artwork h2				{ font-size:1.2em; margin-bottom:1.5em; }
#artwork .close-button	{ position:absolute; right:0; top:0; width:21px; height:21px; 
							background:url(image/icon-close.png) no-repeat 50% 50%; text-indent:-100px; overflow:hidden; }
#related-works			{}
#related-works li		{ display:inline-block; width:24%; margin:0 4.66% 5% 4.66%; }
#related-works img		{ width:100%; border:5px solid #000; margin-bottom:10px; }
#related-works .title	{ font-size:.9em }


/** Artist **/
#artist	#content-body	{ max-width:none; position:relative; }
#artist-list			{ border-top:1px solid #ddd; }
#artist-list li			{ border-bottom:1px solid #ddd; }
#artist-list a			{ display:block; color:#999; padding:.7em 5px; font-size:1.1em; }
#artist-list a:hover	{ color:#333; }
#artist-list li.active a{ background:url(image/icon-active.png) no-repeat right 5px top 50%; color:#333; }
#artist-sort			{ float:right; margin-top:-30px; opacity:.6; cursor:pointer; }
#artist-sort img		{ vertical-align:middle; }
#artist-sort span		{ margin-left:5px; }
#artist-sort .up		{ display:none; }
#artist-sort.reverse .up	{ display:inline; }
#artist-sort.reverse .down 	{ display:none; }

#artist #aside.empty	{ background:url(image/icon-code.png) no-repeat 50% 50% #f7f7f7; }
#artist-detail			{ padding:110px 0; margin:0 auto; width:90%; max-width:800px; }
#artist-detail h2		{ font-size:1.25em; margin-bottom:1.5em; color:#000; }
#artist-detail .desc	{ line-height:1.6em; margin-bottom:2em; text-align:justify; color:#666; }
#artist-detail .more	{ padding-bottom:1.5em; margin-bottom:2em; border-bottom:1px solid #ddd; font-size:1.1em; }
#artist-detail .more a	{ background:url(image/icon-learnmore.png) no-repeat right 50%; padding-right:20px; color:#333; }
#artist-detail .resume	{ display:none; margin-bottom:3em; }
#artist-detail .resume.show		{ display:block; }
#artist-detail #related-works	{ margin-top:60px; }

/* page */
#aside					{ position:fixed; left:50%; top:0; right:0; bottom:0; background:#f7f7f7; overflow:hidden; }
#content				{ width:50%; }
#content-body			{ padding:140px 0; width:90%; max-width:480px; margin:auto; }
#content-body section	{ border-bottom:1px solid #ddd; padding:30px 0 20px 0; }
#content-body section:last-child	{ border-bottom:none; }
#content-body h2		{ color:#dbb967; font-size:1.4em; margin-bottom:1em; line-height:1.2em; }
#content-body .desc		{ line-height:1.6em; color:#666; margin-bottom:30px; }

.slider					{ position:absolute; left:50%; top:50%; width:480px; height:480px;
							 margin-left:-240px; margin-top:-240px; overflow:hidden; }
.slider img				{ width:100%; }

.tile img				{ width:50%; vertical-align:text-bottom; }
.video-wrapper			{ margin-bottom:10px; }
.image-set				{ text-align:center; }
.image-set img			{ max-width:100%; margin-bottom:10px; }
.file-set				{ text-align:center; margin-bottom:10px; }
.file-set a				{ display:inline-block; margin:0 3px 5px 3px; background:#000; color:#fff; padding:.7em 2.2em; border-radius:5px; }

#content-center			{ width:90%; max-width:1130px; margin:140px auto; position:relative; }
#content-center .close-button	{ position:absolute; right:0; top:0; width:21px; height:21px; 
							background:url(image/icon-close.png) no-repeat 50% 50%; text-indent:-100px; overflow:hidden; }

.article-category		{ margin-bottom:30px; text-align:right; }
.article-category a		{ margin-left:3em; color:#999; }
.article-category a.active	{ color:#dbb967; }


.article-list			{ border-top:1px solid #ddd; }
.article-list li		{ border-bottom:1px solid #ddd; padding:30px 0; overflow:hidden; zoom:1; }
.article-list .thumb	{ float:right; width:15%; height:15%; }
.article-list .thumb img{ max-width:100%; max-height:100%; }
.article-list .title	{ width:60%; margin-bottom:2em; }
.article-list .title a	{ font-size:1.2em; line-height:1.2em; color:#dbb967; }
.article-list .desc		{ width:60%; line-height:1.6em; color:#666; margin-bottom:2em; }
.article-list .read-more{ color:#dbb967; }

.article-detail			{ width:100%; max-width:900px; margin:auto; }
.article-detail	h1		{ color:#dbb967; font-size:1.4em; margin-bottom:2em; line-height:1.2em; }
.article-detail	.desc	{ line-height:1.6em; color:#666; margin-bottom:30px; }
.article-detail .updatedate	{ color:#999; margin-top:30px; font-size:.9em; }


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

/* for 1600px or less */
@media screen and (max-width: 1600px) {	
#header-inner nav a		{ margin-right:2.4em; }
#content-body			{ padding:100px 0; }
}

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

#header-inner			{ padding:25px 30px 0 30px; }
#header-inner nav a		{ margin-right:2em; }
#footer-wrapper			{ margin:0 25px; }

#cover .inner			{ left:30px; top:30px; right:30px; bottom:30px; }
#cover .summary				{ right:5%; }
#cover .summary p.slogan-1	{ width:265px; }
#cover .summary p.slogan-2	{ left:75%; }

#filter					{ left:30px; }
#filter.fixed			{ /*top:30px !important;*/ }

.grid					{ margin-left:30px; margin-right:30px; }
.grid .stamp			{ left:34.86666666666667%; right:34.86666666666667%; }
.grid-sizer,
.grid-item 				{ width:12.83333333333333%;  }
.grid-item				{ margin-bottom:2.2%; }
.grid-item.landscape	{ width:30.26666666666666%; }
.gutter-sizer 			{ width:4.6%; }
.grid-item.offset-rt	{ margin-left:60px;}
.grid-item.offset-lt	{ margin-left:-60px; }

#artwork				{ margin:120px 40px 120px 60%; }

#content-body			{ padding:90px 0; }
.slider					{ width:360px; height:360px; margin-left:-180px; margin-top:-180px; }


#content-center			{ margin:120px 30px; width:auto; }
.article-category		{ margin-bottom:10px; }
.article-list li		{ padding:15px 0 20px 0; }
.article-list .title	{ width:75%; margin-bottom:1.2em; }
.article-list .desc		{ width:75%; margin-bottom:1.2em; }
.article-list .thumb	{ width:20%; height:20%; }
}


/* for 1200px or less */
@media screen and (max-width: 1200px) {
						 
#cover .summary .sep	{ display:block; width:100%; margin-bottom:5px; }
#cover .summary a		{ font-size:1.4em; }
#header-inner nav a		{ margin-right:1em; }
.tile img				{ width:100%; }	
}

/* for 980px or less */
@media screen and (max-width: 980px) {
#header-inner nav a		{ margin-right:1em; font-size:1.06em; }
}

/* for 768px or less */
@media screen and (max-width: 768px) {
	
.mobile-hidden		{ display:none !important; }
.mobile-element 	{ display:block; }

#header-inner nav	{ display:none; }
#mobile-menu-button	{ float:left; cursor:pointer; }
#mobile-nav			{ position:fixed; left:-100%; top:0; width:100%; height:100%; background:#f3f3f3; z-index:29; -webkit-transition:left .5s; transition:left .5s; overflow-y:auto; }
#mobile-nav.show	{ left:0; }
#mobile-nav	nav		{ margin:0 5%; text-align:center; }
#mobile-nav nav a	{ color:#777; }
#mobile-nav nav a.active	{ color:#000; }
#mobile-nav	.top-nav	{ margin-top:30%; margin-bottom:4%; border-top:1px solid #ccc; }
#mobile-nav	.top-nav a	{ display:block; padding:.9em 0; border-bottom:1px solid #ccc; font-size:1.15em; }
#mobile-nav	.sub-nav	{ margin-bottom:5%; }
#mobile-nav	.sub-nav a	{ display:block; padding:.5em 0; }
#mobile-nav .social-links	{ text-align:center; margin-bottom:4%; }
#mobile-nav .social-links a	{ margin:0 8px; }
#mobile-nav #mobile-langbar	{ text-align:center; color:#999; margin-bottom:10%; font-size:.98em; }
#mobile-nav #mobile-langbar	a { color:inherit; }
#mobile-nav #mobile-langbar span { margin:0 .72em; }

#main-wrapper			{ min-height:0 !important; }
#footer-wrapper			{ display:none !important; }

#cover .inner			{ left:0; top:0; right:0; bottom:0; }						
#cover .summary			{ left:10%; }
#cover .summary p.slogan-1	{ width:271px; }
#cover .summary p.slogan-2	{ width:114px; left:290px; }

#work-list				{ margin-top:110px !important; }

.grid .stamp			{ display:none; }
.grid-sizer,
.grid-item 				{ width:30.26666666666667%;  }
.grid-item 				{ margin-bottom:4.6%; }
.grid-item.landscape	{ width:65.13333333333333%; }
.gutter-sizer 			{ width:4.6%; }
.grid-item.offset-rt	{ margin-left:0;}
.grid-item.offset-lt	{ margin-left:0; }

#filter					{ position:fixed; left:0; top:0 !important; right:0; bottom:0; overflow-y:auto; padding:20px 0 30px 0; background:#333; }
.filter-set				{ float:none; width:auto; margin:0 5%; padding-top:30px; border-bottom:1px solid #666; }
.filter-set .label		{ background:none; color:#fff; padding:0; height:auto; font-size:1.3em; cursor:default; }
.filter-set .option		{ position:static; left:0; top:25px; width:100%; padding:15px 0 25px 0; background:none; display:block !important; }
.filter-set .option-body{ max-height:none; height:auto; }
.filter-set .option-body li	{ font-size:1.2em; padding:10px 20px; }
.filter-set:first-child	{ padding-top:50px; }

#search-box				{ position:absolute; top:0; left:0; right:0; margin:0;  }
#search-text			{ padding:8px 5%; width:90%; font-size:1.1em; }
#search-button			{ right:2%; }

#mobile-filter-button	{ margin-left:30px; margin-bottom:40px; padding:5px 10px; width:140px; border-radius:5px; background:url(image/icon-dropdown.png) no-repeat right 50% #000; color:#fff; }


#work-viewer			{ position:relative; width:304px !important; height:519px !important; margin:120px auto 50px auto !important; 
							left:auto !important; top:auto !important; }
#video-holder,
#frame-background,
#viewer-frame			{ width:304px !important; height:519px !important; margin-left:-152px !important; margin-top:-260px !important; }
#work-viewer.landscape #video-holder	{ height:304px !important; width:519px !important; margin-top:-152px !important; margin-left:-260px !important;}
#work-info				{ display:none !important; }

#artwork				{ margin:auto; width:90%; max-width:520px; position:static; }
#artwork article		{ padding-top:0; }
#artwork .close-button	{ position:absolute; right:5%; top:120px; }

#artist #artist-sort	{ display:none; }
#artist #artist-list	{ margin-top:20px; margin-bottom:40px; }
#artist-detail			{ padding:90px 0 30px 0; }

#aside					{ position:static; }
#content				{ width:auto; }
#content-body			{ padding:80px 0 40px 0; }

.slider					{ position:static; margin-top:120px; margin-bottom:80px; }
.tile img				{ width:50%; }
}


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

#header-inner			{ padding:20px 5% 0 5%; }

#cover .summary				{ margin-top:-90px; }	
#cover .summary p.slogan-1	{ width:265px; margin-bottom:5px; }
#cover .summary p.slogan-2	{ position:static; margin-bottom:30px; }

.grid					{ margin-left:5%; margin-right:5%; }								
.grid-sizer,
.grid-item 				{ width:47.7%;  }
.grid-item 				{ margin-bottom:4.6%; }
.grid-item.landscape	{ width:47.7%; }
.gutter-sizer 			{ width:4.6%; }	

#mobile-filter-button	{ margin-left:5%; margin-bottom:20px; width:80%; padding:5px 5%; }

#artwork .close-button	{ display:none; }

#content-body			{ padding:60px 0 0 0; }
#content-center			{ margin:120px 5% 60px 5%; }
#content-center .close-button	{ display:none; }

.slider					{ width:320px; height:320px; margin-left:-160px; }
.tile img				{ width:100%; }
.file-set a				{ display:block; margin:0 0 8px 0; padding:.9em 0; text-align:center; }

.article-category		{ text-align:left; }
.article-category a		{ margin-left:0; margin-right:2em; color:#999; }

.article-list li		{ padding:15px 0 20px 0; }
.article-list .title	{ width:100%; }
.article-list .desc		{ width:100%;}
.article-list .thumb	{ display:none; }
}