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

/*
========================
Global
========================
*/
*			{ -webkit-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; }
html, body	{ overflow-x:hidden; }
html		{ height:100%; }
body		{ min-height:100%;  background-color:#fff; -webkit-transition:background-color 1s; transition:background-color 1s; }
body.bg		{ /*background:#a9a9a9;*/ background-color:rgb(80, 96, 104); }

#container	{}
.wrapper 	{}
.inner		{}

a			{ color:#999; 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; }


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

/* Cover */
#cover					{ position:fixed; left:0; top:0; right:0; bottom:0; display:none; z-index:10; }
#cover p				{ display:none; }
#cover .img				{ position:absolute; left:50%; top:50%; width:370px; height:41px; margin-left:-185px; margin-top:-20px; 
							opacity:0; 
							-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:opacity 2s; transition:opacity 2s; }
#cover .img.show		{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#cover .img.dark		{ background:url(../image/title.svg?update=20260816) no-repeat 50% 50%; }
#cover .img.light		{ background:url(../image/title-light.svg?update=20260816) no-repeat 50% 50%; }

/* Background */
#bg						{ position:fixed; left:0; top:0; right:0; bottom:0; }
#bg-progress			{ position:fixed; left:0; top:0; height:2px; width:0; background:rgba(0,0,0,.4); }
.dcSlider-button		{ position:absolute; top:0; bottom:0; width:40%; cursor:none; text-indent:-100px; overflow:hidden; z-index:999; 
							opacity:.5; 
							-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-transition:opacity .3s; transition:opacity .3s; display:none; }
.dcSlider-button:hover	{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }							
.dcSlider-prev			{ left:0; }
.dcSlider-next			{ right:0; }				
.dcSlider-button .bg-arrow			{ position:absolute; width:66px; height:74px; margin-left:-33px; margin-top:-37px; display:none; opacity:.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
.dcSlider-button .bg-arrow .line	{ position:absolute; top:50%; left:0; width:76px; height:1px; background-color:rgb(255,255,255); 
										-webkit-transform-origin:left center; 
										        transform-origin:left center; }
.dcSlider-button .bg-arrow .up		{ -webkit-transform:rotate(-30deg); transform:rotate(-30deg); }
.dcSlider-button .bg-arrow .down	{ -webkit-transform:rotate(30deg); transform:rotate(30deg); }
.dcSlider-button .bg-arrow.next		{ -webkit-transform:scale(-1,1); transform:scale(-1,1); }		
#bg-close				{ position:absolute; top:0; bottom:0; left:40%; width:20%; cursor:none; overflow:hidden; z-index:999; 
							opacity:.5; 
							-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-transition:opacity .3s; transition:opacity .3s; display:none; }
#bg-close.full			{ left:0; width:100%; }
#bg-close .button		{ position:absolute; width:84px; height:84px; margin-left:-42px; margin-top:-42px; display:none; opacity:.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
#bg-close .line			{ position:absolute; top:50%; left:50%; margin-left:-24px; width:48px; height:1px; background-color:rgb(255,255,255); } 
#bg-close .up			{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
#bg-close .down			{ -webkit-transform:rotate(45deg); transform:rotate(45deg); }

#clock					{ position:absolute; left:50%; top:50%; z-index:9; color:rgba(255,255,255,.3); font-family: 'Work Sans', sans-serif; display:none;
							text-align:center; width:360px; margin-left:-180px; margin-top:-40px; font-size:36px;font-weight:100;  }
#clock span				{ display:inline-block; margin:0 5px; text-align:center; }
#clock span.sec			{ width:50px;}
#clock span.hr,
#clock span.min			{ width:100px; font-size:90px; }

#clock-msg				{ position:absolute; left:0; right:0; top:50%; z-index:9; text-align:center; font-family: 'Work Sans', sans-serif; 
							font-size:60px;font-weight:100; margin-top:-45px; color:rgba(255,255,255,.3); display:none; }

/* Navigator */
#nav-header,
#nav-body				{ height:290px; position:fixed; bottom:9%; font-size:13px; }
#nav-header				{ left:-40px; -webkit-transition:left .8s; transition:left .8s; z-index:101; }
#nav-body				{ left:-960px; -webkit-transition:left .6s; transition:left .6s; z-index:100; }
#nav-header.show,
#nav-body.show			{ left:0; }

#nav-header				{ width:40px; background:#000; }
#nav-header h1			{ width:100%; height:250px; }
#nav-header h1 a		{ display:block; width:100%; height:100%; text-indent:-400px; overflow:hidden; 
							background:url(../image/menu-title.svg?update=20260816) no-repeat 50% 20px; }
/*#nav-header h1 a.back	{background:url(../image/list-button.svg) no-repeat 50% 20px; }*/
#nav-header	#lang-menu	 { position:absolute; left:0; right:0; bottom:18px; font-size:12px; text-align:center; }
#nav-header	#lang-menu a { color:#999; display:block; }

#nav .panel				{ width:205px; height:100%; position:absolute; top:0; background:rgba(0,0,0,.78); color:#a6a6a6; 
							box-sizing:border-box; border-left:1px solid #393939; visibility:hidden; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:background-color .3s; transition:background-color .3s; }
#nav .panel.show		{ visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#nav .panel.medium		{ width:280px; }
#nav .panel.large		{ width:440px; }
#nav .panel[data-level="1"]		{ left:40px; }
#nav .panel[data-level="2"]		{ left:245px; }
#nav .panel[data-level="3"]		{ left:450px; }
#nav .panel-inner		{ position:absolute; left:0; right:3px; top:24px; bottom:22px; padding:0 11px; overflow:auto; }
#nav .panel.medium .panel-inner,
#nav .panel.large .panel-inner		{ padding:0 24px; }
#nav .panel-list		{ border-top:1px solid #393939; }
#nav .panel-list li		{ border-bottom:1px solid #393939; overflow:hidden; zoom:1; }
#nav .panel-list li	a,
#nav .panel-list li	.handle		{ display:block; padding:8px 3px; color:#a5a5a5; line-height:1.4em; }
#nav .panel-list li	a:hover		{ color:#ddd; }
#nav .panel-list li	a.active	{ color:#ddd; background:url(../image/active.svg) no-repeat right 50%; }
#nav .panel-list li	.year		{ width:60px; float:left; display:block; }
#nav .panel-list li	.title		{ margin-left:60px; display:block; }
#nav .panel h2			{ font-size:1.18em; margin-bottom:1.2em; }
#nav .panel .desc		{ line-height:1.65em; }
#nav .panel-aside		{ position:absolute; right:-38px; width:38px; height:100%; background:rgba(0,0,0,.78);
							box-sizing:border-box; border-left:1px solid #333; -webkit-transition:background-color .3s; transition:background-color .3s; }
#nav .panel-aside .button	{ padding:18px 12px; cursor:pointer; opacity:.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-transition:opacity .3s; transition:opacity .3s; }
#nav .panel-aside .button:hover	{ opacity:.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }


/*
#nav #nav-body:hover .panel,
#nav #nav-body:hover .panel-aside	{ background:rgba(0,0,0,1); }
*/

#panel-contact address	{ margin-bottom:20px; line-height:1.2em; }
#panel-contact .panel-inner { overflow: hidden;}
#panel-contact p		{ margin-bottom:8px; }
#panel-contact a:hover	{ color:#bbb; }
#panel-contact .notes	{ position:absolute; left:24px; bottom:-5px; }
#panel-contact .notes img	{ margin-bottom:10px; }
#panel-contact .notes p	{ font-size:12px; color:#555; -webkit-transform:scale(.82,.82); transform:scale(.82,.82); -webkit-transform-origin:left bottom; transform-origin:left bottom; }
#panel-contact .notes p	a	{ color:inherit; }

/* Info box */
#info					{ position:fixed; left:55px; top:35px; visibility:visible; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:opacity .4s; transition:opacity .4s; -webkit-transition-delay:.8s; transition-delay:.8s; z-index:10;  }
#info.show				{ visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#info-button			{ position:fixed; left:0; width:40px; height:40px; text-indent:-200px; overflow:hidden; cursor:pointer;  
							background:url(../image/info-button.svg) no-repeat 50% 50% #000; background-size:6px 14px;
							border-top:1px solid #333; box-sizing:border-box;
							visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition:opacity .5s; transition:opacity .5s; }
#info-button.show		{ /*visibility:visible; opacity:1;*/ }
#info-pager				{ position:fixed; right:20px; top:20px; text-align:right; font-size:1.25em; font-weight:300; 
							visibility:visible; color:rgba(255,255,255,.7); font-family: 'Work Sans', sans-serif; }
#info-pager span		{ display:inline-block; padding:0 5px; }
#info-pager .pager		{ padding-top:12px; }
#info-pager .prev,
#info-pager .next		{ width:36px; height:36px; position:absolute; cursor:pointer;  }
#info-pager .prev		{ left:0; }
#info-pager .next		{ right:0; }
#info-pager .prev img,
#info-pager .next img	{ margin-top:12px; }
#info-box				{ width:400px; color:#a6a6a6; background:#000; position:relative; visibility:hidden; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
							-webkit-transition:opacity .5s; 
							transition:opacity .5s; height:0; overflow:hidden; }
#info-box.show			{ visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; height:auto; }
#info-inner				{ padding:24px 24px 80px 24px; }
#info-inner h2			{ color:#fff; font-size:1.18em; margin-bottom:1.5em; }
#info-inner h2 .sub		{ display:block; margin-top:10px; font-size:13px; color:#ccc;}
#info-inner h3			{ color:#fff; margin:20px 0 8px 0; }
#info-inner dl			{ font-size:13px; margin-bottom:20px; }
#info-inner dt 			{ float: left; clear: left; width: 90px; font-weight: bold; color:#ddd; }
#info-inner dd 			{ margin: 0 0 0 100px;  padding: 0 0 .5em 0; }
#info-inner .desc		{ line-height:1.5em; font-size:13px; max-height:400px; overflow:auto; }
#info-inner .share		{ position:absolute; left:24px; bottom:24px; }
#info-inner .share a	{ margin-right:14px; }
#info-inner .share img	{ height:13px; opacity:.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; -webkit-transition:opacity .3s; transition:opacity .3s; }
#info-inner .share img:hover	{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#info-close				{ position:absolute; right:0; top:0; width:45px; height:45px; text-indent:-200px; overflow:hidden;
							background:url(../image/close-button.svg) no-repeat 50% 50% #000; background-size:14px 3px; cursor:pointer; }
#info-nav				{ color:#fff; position:absolute; right:24px; bottom:24px; font-family:Arial, Helvetica, sans-serif; font-size:12px;  }
#info-nav span			{ display:inline-block; vertical-align:text-top; }
#info-nav img			{ height:11px; }
#info-nav .pager		{ margin:0 12px; text-align:center; }
#info-nav .prev,
#info-nav .next			{ cursor:pointer; }
#infobox-scroller		{ visibility:hidden !important; }


#back-button			{ position:absolute; left:0; top:0; width:45px; height:45px; text-indent:-200px; overflow:hidden; cursor:pointer;  
							background:url(../image/back-button.svg) no-repeat 50% 50% #000; background-size:18px 15px; visibility:visible; }

/* Thumb list */							
#thumb-panel			{ position:fixed; top:0; right:0; left:0; background:#fff; visibility:hidden; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height:0; -webkit-transition:opacity .5s; transition:opacity .5s;
							 z-index:99; overflow:auto; }	
#thumb-panel-inner		{ margin:5% 8%; }
#thumb-panel #list-button	{ position:absolute; left:5%; top:25px; cursor:pointer; opacity:.7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; -webkit-transition:opacity .3s; transition:opacity .3s; display:none !important; }
#thumb-panel #list-button:hover	{ opacity:.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }
.thumb-list				{ height:0; visibility:hidden; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; overflow:hidden; -webkit-transition:opacity .5s; transition:opacity .5s; -webkit-transition-delay:.3s; transition-delay:.3s; }
.thumb-list.show		{ visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; height:auto; }
.thumb-list	ul			{ overflow:hidden; zoom:1; }
.thumb-list li			{ float:left; width:20%; border-right:1px solid #fff; box-sizing:border-box; position:relative; }
.thumb-list li .thumb	{ overflow:hidden; }
.thumb-list img			{ width:100%; -webkit-transition:-webkit-transform 1.2s; transition:-webkit-transform 1.2s; transition:transform 1.2s; transition:transform 1.2s, -webkit-transform 1.2s; }
.thumb-list li:hover img{ -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1); }
.thumb-list .label		{ height:64px; overflow:hidden; }
.thumb-list .title		{ color:#999; margin-top:8px; font-size:13px; }
.thumb-list .position	{ color:#777; margin-top:5px; font-size:12px; }
.thumb-list .year		{ color:#777; margin-top:5px; font-size:12px; }
.thumb-category	li		{ background:#000; }
.thumb-category	li img	{ opacity:.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; }
.thumb-category	li .category-title	{ position:absolute; left:0; right:0; top:50%; text-align:center; font-size:1.4em; margin-top:-10px; }
.thumb-category	li .category-title a		{ color:#aaa; -webkit-transition:color .3s; transition:color .3s; }
.thumb-category	li:hover .category-title a	{ color:#ddd; }	


/* List/Thumb mode */
body.show-work-index #thumb-panel.show		{ visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; height:100%; }
body.show-work-index #nav-body.show			{ left:-960px; }
body.show-work-index.panel-show #bg			{ display:none; }

/*
========================
Responsive Layout
========================
*/
@media screen and (max-height: 800px) {	
#clock					{ top:46%; }
#clock-msg				{  }
}

@media screen and (max-height: 700px) {	
#nav-header,
#nav-body				{ height:250px; bottom:7%; }
#nav-header h1			{ height:210px; }
}


@media screen and (max-width: 1600px) {	
.thumb-list li			{ width:25%; }
}

@media screen and (max-width: 1024px) {	
#info-box				{ width:360px; }
#info-inner				{ padding-bottom:60px; }
.thumb-list li			{ width:33.33333333333333%; }
}

@media screen and (max-width: 960px) {	
#nav .panel				{ width:175px; }
#nav .panel.medium		{ width:250px; }
#nav .panel.large		{ width:375px; }
#nav .panel[data-level="1"]		{ left:40px; }
#nav .panel[data-level="2"]		{ left:215px; }
#nav .panel[data-level="3"]		{ left:390px; }

#info					{ right:15px; top:15px; }

.thumb-list li			{ width:50%; }
}


@media screen and (max-width: 760px) {	

body					{ background:#000 !important; }
.mobile-element			{ display:block; }

#bg.mobile-bg			{ position:relative; width:100%; height:400px; height:50vh; }
#bg.mobile-hide			{ display:none; }
#bg-progress			{ display:none !important; }
.dcSlider-button,
#bg-close				{ display:none !important; }
#clock					{ top:50%; font-size:24px; margin-top:-12px; }
#clock span.sec			{ width:30px;}
#clock span.hr,
#clock span.min			{ width:70px; font-size:60px; }
#clock-msg				{ top:50%; font-size:36px; margin-top:-6px; }

#cover					{ display:none !important; }
#cover.mobile-show		{ display:block !important; }
#cover .img				{ position:absolute; left:9%; top:50%; right:9%; width:auto; height:42px; margin:0; margin-top:-15px; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#cover .img.dark		{ display:none; }
#cover .img.light		{ background:url(../image/mobile-title.svg?update=20260816) no-repeat 0 50%; }

#nav-header				{ height:48px; width:auto; left:0; top:-48px; right:0; bottom:auto; background:#000; -webkit-transition:top .5s; transition:top .5s; }
#nav-header.mobile-show	{ top:0; }
#nav-header.minimal		{ top:-48px; }
#nav-header #mobile-menu-button		
						{ position:absolute; left:15px; top:50%; width:18px; height:12px; margin-top:-6px; text-indent:-100px; overflow:hidden;
							background:url(../image/mobile-menu-button.svg) no-repeat 50% 50%; cursor:pointer; }
							
#nav-header h1			{ width:97px; height:12px; margin:18px auto 0 auto; }
#nav-header h1 a		{ background:url(../image/mobile-menu-title.svg?update=20260816) no-repeat 50% 50% !important; }
#nav-header	#lang-menu	{ position:absolute; left:auto; right:15px; top:50%; bottom:auto; margin-top:-7px; }
#nav-header	#lang-menu a{ color:#aaa; }

#nav-body				{ left:0; height:auto; position:static; -webkit-transition:none; transition:none; }
#nav .panel				{ width:auto !important; height:auto; position:static; border-left:none; visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; display:none; }
#nav .panel-inner		{ position:static; padding:30px 8% !important; }
#nav .panel.mobile-content		{ background:#000 !important; }
#nav .panel.mobile-content.last	{ display:block; }
#nav .panel h2			{ color:#fff; }
#nav .panel.large .panel-inner	{ -ms-touch-action:auto !important; touch-action:auto !important; }

#panel-contact .social-link	{ position:static; display:inline-block; margin-top:15px; margin-left:-3px; }
							
#mobile-nav				{ position:fixed; left:0; right:0; top:48px; background:rgba(0,0,0,.85); display:none; z-index:102; }
#mobile-nav.show		{ display:block; }
#mobile-nav > ul		{ border-bottom:1px solid #333333; }
#mobile-nav li			{ border-top:1px solid #333333; }	
#mobile-nav li a		{ display:block; text-align:center; padding:16px 0; font-size:14px; color:#bbb; }
#mobile-nav .subnav		{ padding:15px 0; border-top:1px solid #333333; display:none; }
#mobile-nav .subnav.show{ display:block; }
#mobile-nav .subnav li	{ border:none; }
#mobile-nav .subnav li a{ padding:8px 0; }	
		
#thumb-panel			{ position:static; width:auto; height:auto !important; max-width:none; display:none; -ms-touch-action:auto !important; touch-action:auto !important; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility:visible; }
#thumb-panel.mobile-show{ display:block; }
#thumb-panel-inner		{ margin:48px 0 0 0; }
.thumb-list li			{ width:50%; margin:0; border:none; }
.thumb-list img			{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }		
.thumb-list p			{ padding:0 8px; }
.thumb-list .label		{ height:45px; }
#thumb-panel #list-button	{ display:none; }
.thumb-category			{ display:none !important; }

#info					{ position:static; visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; display:none; }
#info.mobile-show		{ display:block; }
#info-button			{ display:none; }
#info-pager				{ display:none !important; }
#info-box				{ position:static; width:auto; height:auto; visibility:visible; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; padding-top:48px; }
#info-inner				{ padding:30px 8%; border-top:1px solid #333333; }
#info-inner .desc		{ max-height:none !important; }
#info-inner .share		{ position:static; margin-top:20px; }
#info-close				{ display:none; }
#info-nav				{ display:none !important; }
#info-images			{ background:#fff; }
#info-images img		{ width:100%; display:block; margin-bottom:1px; }	
#info-images img:last-child	{ margin-bottom:0; }
#back-button			{ display:none; }			
}

@media screen and (max-width: 480px) {	

.thumb-list.big .label	{ height:60px; }
.thumb-list.big li		{ width:100%; }
}