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

/*
========================
Global
========================
*/
html, body	{}
#container	{}
.wrapper 	{}
.inner		{ margin:auto; width:96%;}

*			{ -webkit-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; }
a			{ text-decoration:none; }
strong		{ font-weight:bold; }
em			{ font-style:italic; }
table		{ width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table th,
table td	{ padding:8px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
caption		{ text-align:left; margin-bottom:10px; font-size:1.2em; }

.fr-view		{ line-height:1.5em;}
.fr-view ul		{ list-style:circle;padding-left:15px;}
.fr-view ol		{ list-style:decimal;padding-left:15px;}
.fr-view img	{ cursor:default !important; }
.fr-view a > img{ cursor:pointer !important; }

.sharer 		{ display: flex; align-items: center; margin-top: 20px;}
.sharer span 	{ margin-right: 15px;}
.jssocials-share-link { border: none !important; }
.jssocials-share-link i { font-size: 16px;}

.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:#666; }

/*
========================
Header
========================
*/
#header-wrapper			{ position:fixed; left:0; top:0; width:100%; height:80px; background:#191919; z-index:100; }
#header-inner			{ position:relative; margin-top:28px; }
#header-inner p			{ display:none; }
#header-inner h1		{ width:231px; height:28px; }
#header-inner h1 a		{ display:block; width:100%; height:100%; overflow:hidden; text-indent:-400px; background-repeat:no-repeat;
							background-image:url(../image/title_zh.png); background-image:url(../image/title_zh.svg), none; }
#header-inner nav		{ position:absolute; right:0; top:0; margin-right:20px; margin-top:6px; }
#header-inner nav li	{ float:left; display:inline; margin-left:60px; height:16px; position:relative; }
#header-inner nav li a	{ color:#eee; font-size:1.1em; letter-spacing:.2em; }
#header-inner nav li.active a { color:#fff; }

#header-wrapper			{ -webkit-transition:height .4s, top .4s; transition:height .4s, top .4s; }
#header-inner			{ -webkit-transition:margin-top .4s; transition:margin-top .4s; }
#header-wrapper.minimal { height:48px; }
#header-wrapper.minimal #header-inner { margin-top:9px;  }


.en #header-inner h1 a		{ background-image:url(../image/title_en.png) no-repeat; background-image:url(../image/title_en.svg), none; }
.ja #header-inner h1 a		{ background-image:url(../image/title_ja.png) no-repeat; background-image:url(../image/title_ja.svg), none; }
.en #header-inner nav li a	{ letter-spacing:normal; }

/*
========================
Main
========================
*/
#main-wrapper			{ padding-top:80px; }
#main-inner				{ padding-top:4%; padding-bottom:5%; overflow:hidden; zoom:1; }

/*
========================
Footer
========================
*/
#footer-wrapper					{ background:#1a1a1a; }
#footer-inner					{ max-width:1200px; padding:40px 0 20px 0; overflow:hidden; zoom:1; position:relative; }
#footer-inner img				{ float:right; }
#footer-inner nav				{ float:left; margin-bottom:50px; width:60%; max-width:520px; overflow:hidden; zoom:1; }
#footer-inner nav ul			{ float:left; width:50%; }
#footer-inner nav li			{ margin-bottom:15px; }
#footer-inner nav li a			{ color:#aaa; font-size:1.05em; -webkit-transition:color .2s; transition:color .2s; }
#footer-inner nav li a:hover	{ color:#ccc; }
#footer-title					{ color:#aaa; clear:both; border-top:1px solid #333; margin-top:15px; padding-top:10px; 
									margin-bottom:5px; letter-spacing:.03em; font-size:1.04em; }
#copyright						{ clear:both; font-size:10px; }
#copyright p					{ color:#666; margin-bottom:4px; }
#copyright #designer			{ color:#444; }
#copyright #designer a			{ color:inherit; }
#copyright #designer a:hover	{ color:#666; }

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

/* index.php */
#index #header-wrapper			{ background:none; }
#index #bg						{ position:fixed; left:0; top:0; width:100%; height:100%; background:#191919; }
#index #summary					{ position:fixed; left:10%; top:22%; width:80%; max-width:400px; z-index:99; }
#index #summary p				{ color:#bbb; font-size:1.27em; line-height:1.8em; margin-bottom:12%; text-align:justify; }
#index #browse-button			{ font-size:1.16em; letter-spacing:.1em; display:inline; color:#fff;
									text-transform:uppercase; padding:11px 16px 11px 18px; border:1px solid #ccc; border-radius:3px;
									-webkit-transition:border .3s, color .3s; transition:border .3s, color .3s; }
#index #browse-button span		{ font-size:1.2em; margin-left:10px; }
#index #browse-button:hover		{ border:1px solid #666; color:#666; }
#index #footer-wrapper			{ display:none; }

#index #home-lang-menu			{ position:fixed; left:2.25%; bottom:30px; z-index:100; font-size:12px; }
#index #home-lang-menu a		{ color:#bbb; letter-spacing:.07em; }
#index #home-lang-menu span		{ margin:0 10px; color:#666; }

/* gallery.php */
#gallery #aside					{ width:240px; float:left; padding-bottom:120px; }
#gallery .grid					{ margin-left:280px; }
#gallery .gutter-sizer			{ width:2%; }
#gallery .grid-sizer			{ width:23.5% }
#gallery .grid-item				{ width:23.5%; margin-bottom:.7%; opacity:0; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-transition:opacity 2s, -webkit-transform 1s; transition:opacity 2s, -webkit-transform 1s; transition:opacity 2s, transform 1s; transition:opacity 2s, transform 1s, -webkit-transform 1s; }
#gallery .grid-item.inview		{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }

.grid-item .thumb				{ height:0; position:relative; background:#e6e6e6; overflow:hidden; }
.grid-item .thumb img			{ position:absolute; width:100%; -webkit-transition:-webkit-transform .8s; transition:-webkit-transform .8s; transition:transform .8s; transition:transform .8s, -webkit-transform .8s; }
.grid-item .thumb .mask			{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4); opacity:0; 
									-webkit-transition:opacity .2s; 
									transition:opacity .2s; }
.grid-item .thumb:hover img		{ -webkit-transform:scale(1.05,1.05); transform:scale(1.05,1.05); }
.grid-item .thumb:hover .mask	{ opacity:1; }
.grid-item .title				{ padding:5px 0; }
.grid-item .title a				{ color:#333; font-size:1.1em; }

.grid .empty				{ font-size:1.2em; color:#999; }

#search						{ position:relative; margin-bottom:15%; }
#search	input				{ box-sizing:border-box; }
#search [name="q"]			{ background:#f7f7f7; color:#666; border:1px solid #ccc; padding:6px 5%; border-radius:20px; width:100%; }
#search [type="submit"]		{ background:none; border:none; position:absolute; right:3%; top:6px; }
#search [type="submit"] img	{ width:15px; height:15px; }
#search #remove-keywords	{ background:none; border:none; position:absolute; right:3%; top:6px; }
#search #remove-keywords img{ }

#filter-button				{ display:none; }
#filter						{}
#filter	.set				{ border-top:1px solid #ccc; padding:6% 0 1% 0; margin:6% 0; }
#filter	.label				{ font-size:1.2em; color:#333; margin-bottom:6%; }
#filter li a				{ display:block; margin-bottom:5px; padding:4px 4%; border-radius:20px; color:#808080; }
#filter li a.active			{ color:#333; padding:5px 4%; background:url(../image/remove.png) no-repeat right 10px top 50% #e0e0e0; background:url(../image/remove.png) no-repeat right 10px top 50% #e0e0e0; 
								background-image:url(../image/remove.svg), none; 
								background-image:url(../image/remove.svg), none; }
#filter .all				{ color:#808080; font-size:1.1em; }

/* object.php */
#object #back-result		{ margin-bottom:20px; }
#object #back-result a		{ color:#888; padding-left:16px; background:url(../image/back.png) no-repeat left 50%; 
								background-image:url(../image/back.svg), none; }
#object #main-inner			{ padding-top:2%;  }
#object #content			{ float:left; width:74%; }
#object #content #viewer	{ width:100%; height:0; padding-bottom:56%; margin-bottom:3%; position:relative; background:#e6e6e6; }
#object #content iframe		{ position:absolute; left:0; top:0; width:100% !important; height:100% !important; }
#object #info				{ margin-left:76%; padding-bottom:40px; }
#object #info h2			{ font-size:1.25em; line-height:1.25em; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ccc; }
#object #info h3			{ font-size:1.1em; margin-bottom:15px; color:#333; font-weight:bold; }
#object #info .spec 		{ border-bottom:1px solid #ccc; padding-bottom:12px; margin-bottom:20px; }
#object #info .spec table	{ width:100%; border:none; }
#object #info .spec th		{ border:none; width:110px; font-weight: bold; color:#333; line-height:1.4em; padding:0 0 12px 0; text-align:left; }
#object #info .spec td		{ border:none; padding:0; line-height:1.4em; color:#666; padding:0 0 12px 0; }
#object #info .desc			{ line-height:1.8em; font-size:.98em; color:#666; margin-bottom:30px; }
#object #info .detail a		{ color:#999; padding-right:16px; background:url(../image/more.png) no-repeat right 50%; 
								background-image:url(../image/more.svg), none; }

#object #more-relics h3		{ font-size:1.15em; margin-bottom:15px; color:#333; font-weight:bold;}
#object .gutter-sizer		{ width:2%; }
#object .grid-sizer			{ width:32% }
#object .grid-item			{ width:32%; margin-bottom:.7%; }
#object .grid-item .thumb 	{ padding-bottom:100%; }

/* about.php, terms.php */
.page .article				{ max-width:860px; }
.page .article h2			{ font-size:1.4em; margin-bottom:5%; text-transform:uppercase; }
.page .article .paragraph	{ border-top:1px solid #ccc; margin-bottom:7%; padding-top:20px; }
.page .article h3			{ font-size:1.11em; margin-bottom:2em; font-weight:bold; }
.page .article .desc		{ line-height:1.6em; margin-bottom:2%; font-size:1.105em; }
.page .article .desc a		{ color:inherit; }
.page .article img			{ max-width:100%; margin-bottom:10px; }

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

/* for 1600px or less */ 
@media screen and (max-width: 1600px) {
#gallery #aside					{ width:220px; }
#gallery .grid					{ margin-left:250px; }
#gallery .gutter-sizer			{ width:2%; }
#gallery .grid-sizer			{ width:32% }
#gallery .grid-item				{ width:32%; }

}

/* for 1440px or less */ 
@media screen and (max-width: 1440px) {
.inner					{ width:95%;}
#gallery #aside			{ width:200px; }
#gallery .grid			{ margin-left:230px; }
}


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

	
#index #summary				{ left:7%; max-width:350px; }
#index #summary p			{ font-size:1.18em; line-height:1.6em; margin-bottom:12%; }

#object #content			{ width:72%; }
#object #info				{ margin-left:74%; }
}

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

#header-inner nav li	{ margin-left:40px; }

#index #summary 		{ left:6%; max-width:300px; }
#index #summary p		{ font-size:1.05em; line-height:1.5em; }
}

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

/* gallery.php */
#gallery #aside						{ position:fixed !important; left:-260px; top:0 !important; height:100% !important; width:96% !important; 
										max-width:260px; background:#fff; z-index:201; -webkit-transition:left .3s; transition:left .3s; 
										overflow-y:auto; }
#gallery #aside-body				{ padding:60px 7% 30px 7%; }
#gallery #aside-mask				{ display:block; position:fixed; left:-100%; top:0; width:100%; height:100%; z-index:200; 
										background:rgba(0,0,0,.25); opacity:0; -webkit-transition:opacity .3s; transition:opacity .3s; }
#gallery.show-filter #aside			{ left:0; }
#gallery.show-filter #aside-mask	{ left:0; opacity:1; }
#gallery.show-filter 				{ width:100%; height:100%; overflow:hidden; }
#gallery #aside .close-button		{ display:block; position:absolute; right:5%; top:10px; width:16px; height:16px; z-index:202; cursor:pointer;
										background:url(../image/close.png) no-repeat 50% 50%; background-image:url(../image/close.svg), none;  }

#gallery .grid						{ margin-left:0; }

#search								{ margin-bottom:25px; /*Fix for andriod*/ z-index:201; }
#filter-button						{ display:block; margin-bottom:4%; color:#999; padding-right:12px; cursor:pointer; display:inline-block;
										background:url(../image/filter-button.png) no-repeat right 50%; 
										background-image:url(../image/filter-button.svg), none;  }

/* object.php */
#object #more-relics				{ display:none; }
#object #content					{ width:100%; float:none; }
#object #content #viewer			{ margin-bottom:5%; }
#object #info						{ margin-left:0; }


.page #main-inner					{ padding-top:6%; }	
}


/* for 767px or less */ 
@media screen and (max-width: 767px) {	
.mobile-element			{ display:block; }
.inner					{ width:92%;}

#header-wrapper			{ height:60px; }
#header-inner			{ margin-top:16px; }
#header-inner h1		{ width:215px; height:26px; }
#header-inner h1 a		{ background-size:215px 26px; }
#header-inner nav		{ display:none; position:fixed; left:0; top:0; right:0; bottom:0; background:#111; margin-right:0; }
#header-inner nav.show	{ display:block; }
#header-inner nav ul	{ border-top:1px solid #555; position:absolute; left:5%; right:5%; top:38%; }
#header-inner nav li	{ display:block; float:none; margin:0; border-bottom:1px solid #555; height:auto; }
#header-inner nav li a	{ display:block; text-align:center; padding:18px 0; }

#header-wrapper.minimal { height:72px; top:-80px; }
#header-wrapper.minimal #header-inner { margin-top:20px;  }

#menu-button			{ position:absolute; right:0; top:6px; width:24px; height:16px;cursor:pointer;  }
#menu-button .bar		{ position:absolute; left:0; width:100%; height:2px; background:#fff; -webkit-transition:all .4s; transition:all .4s; opacity:1; }
#menu-button #bar-1		{ top:0; }
#menu-button #bar-2		{ top:50%; margin-top:-1px; }
#menu-button #bar-3		{ bottom:0; }
#menu-button.close #bar-2 		{ opacity:0; }
#menu-button.close #bar-1 		{ -webkit-transform:rotate(45deg); transform:rotate(45deg); top:50%; }
#menu-button.close #bar-3 		{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); top:50%; }

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

#footer-inner					{ padding:30px 0 10px 0; }
#footer-inner nav				{ width:56%; }
#footer-inner nav li a			{ font-size:1em; }


#index #bg						{ position:relative; width:100%; height:0; padding-bottom:72%; }
#index #bg .dcSlider_container	{ position:absolute !important; left:0; top:0; width:100%; height:100%; }
#index #summary					{ position:static; width:auto; margin:auto; max-width:none; padding:8% 0 12% 0; background:#000; }
#index #summary p				{ width:88%; margin:auto; margin-bottom:7%; line-height:1.6em; font-size:1.16em; }
#index #browse-button			{ display:block; width:140px; margin:auto; text-align:center; }
#index.ja #browse-button		{ width:186px; }
#index #footer-wrapper			{ display:block; }
#home-lang-menu					{ display:none; }

#object #back-result			{ margin-bottom:15px; }
}

/* for 640px or less */ 
@media screen and (max-width: 640px) {
	
#footer-inner img				{ float:none; clear:left; display:block; }
#footer-inner nav				{ float:none; margin-bottom:30px; width:100%; max-width:none; }
#footer-inner nav li			{ margin-bottom:16px; }

#gallery .gutter-sizer			{ width:3%; }
#gallery .grid-sizer			{ width:48.5% }
#gallery .grid-item				{ width:48.5%; }
}

/* for 480px or less */ 
@media screen and (max-width: 480px) {
#index #bg						{ padding-bottom:100%; }
#object #content #viewer		{ padding-bottom:100%; }
}

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