@charset "utf-8";
@import url(reset.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500&display=swap&subset=chinese-traditional');

/*
========================
Global
========================
*/
*						{ box-sizing:border-box; }
body					{ overflow:hidden; }
body.is-touch 			{ overflow:auto; }
html.cover-on, 
body.cover-on			{ position: fixed; overflow:hidden; height:100%; width:100%; }
#container				{}
.wrapper 				{}
.inner					{ position:relative; margin:0 60px 0 90px; }

a						{ text-decoration:none; color:inherit; }
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:none; padding-left:.8em; padding-left:.8em; list-style:none; text-align:left; }
.fr-view ul li:before 	{ content: "- "; margin-left: -.8em; }
.fr-view ul li			{ margin-bottom:1em; line-height:1.25em; }
.fr-view ol				{ list-style:decimal;padding-left:15px;}
.fr-view ol	li			{ text-align:left; margin-bottom:1em; line-height:1.25em;  }
.fr-view img			{ cursor:default !important; }
.fr-view a > img		{ cursor:pointer !important; }

.mobile-element 		{ display:none; }
img						{  -webkit-user-select:none; -webkit-touch-callout:none; pointer-events: none; } 

/*
========================
Font
========================
*/
html, body 				{ font-family:'Noto Sans TC', "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; }

.detail-holder h2,
.people-list .name,
.people-detail-body .title		{ font-family:"華康中黑體", 'DFHeiMedium-B5', 'Noto Sans TC', "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "新細明體", "Microsoft YaHei", "Helvetica Neue", Helvetica, "Segoe UI", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif; font-weight:bold; }

/*
========================
Header
========================
*/
#header-wrapper						{ position:fixed; left:0; top:0; right:0; height:80px; background:#fff; z-index:100; transition:top .5s; 
										transition-delay:.2s; }
#header-inner						{ height:100%; }
#header-wrapper h1					{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
#header-wrapper h1 a 				{ display: flex; align-items: center;  font-size: 1.6em; letter-spacing: .06em; white-space: nowrap; }
/*
#header-wrapper h1 a 				{ display:block; width:100%; height:100%; text-indent:-500px; overflow:hidden; 
										background:url(../image/title-zh.svg) no-repeat; background-size:100%; }
*/										
#header-wrapper h1 img 				{ height: 30px; margin-right: 10px;}
#header-wrapper nav					{ position:absolute; right:90px; top:50%; transform:translateY(-50%); }
#header-wrapper nav	ul				{}
#header-wrapper nav	li				{ display:inline-block; margin-left:72px; padding-bottom:3px; }
#header-wrapper nav	li.active 		{ border-bottom:1px solid #999; }
#header-wrapper nav	a				{ font-size:1.2em; letter-spacing:.05em; color:#444; }
#header-wrapper #header-lang		{ position:absolute; right:0; top:50%; transform:translateY(-50%); margin-top:-2px;  }
#header-wrapper #header-lang a 		{ color:#999; font-size:12px; }

#header-wrapper.headroom--top 		{ top:0; }
#header-wrapper.headroom--not-top	{ top:-80px; }

/*
========================
Footer
========================
*/
#footer-wrapper						{ background:#fff; transition:opacity .5s;  }
#footer-wrapper.disabled 			{ opacity:.1; }		
#footer-inner						{ padding:20px 0 40px 0; border-top:1px solid #ccc; overflow:hidden; zoom:1; }
#footer-inner .lt					{ width:400px; float:left;}
#footer-inner .rt					{ float:right; text-align:right; }
#footer-inner p,
#footer-inner address 				{ line-height:1.8em; margin-bottom:0; font-size:.96em; letter-spacing:.03em; color:#444; }
#footer-inner .credit				{ color:#999; font-size:12px; }


#dialog  							{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:99999; display:none; }
#dialog-mask						{ width:100%; height:100%; background:rgba(0,0,0,.4); }
#dialog-box							{ position:absolute; left:50%; top:50%; width:90%; max-width:420px; transform:translate(-50%,-50%);
										background:#fff; box-shadow:2px 2px 10px rgba(0,0,0,.2); border-radius:2px; }
#dialog-header						{ padding:15px 20px; border-bottom:1px solid #ccc; }
#dialog-body						{ padding:30px 25px 15px 25px; }
#dialog-close						{ font-family:Arial, Helvetica, sans-serif; position:absolute; right:15px; top:12px; font-size:1.5em; 
										cursor:pointer; color:#999; transition:color .2s; }
#dialog-close:hover					{ color:#000; }
#dialog form						{ position:relative; }
#dialog form p						{ margin-bottom:15px; }
#dialog form p:nth-child(2)			{ margin-bottom:20px; }
#dialog form input					{ font-family:inherit; }
#dialog form input[type="text"],
#dialog form input[type="password"] { width:100%; padding:.7em .6em; border-radius:2px; font-size:1.02em; border:1px solid #aaa; background:#f7f7f7; }
#dialog form input[type="submit"] 	{ padding:.4em 1.5em; border-radius:2px; font-size:1.05em; border:1px solid #000; background:#000; color:#fff; }
#dialog form .msg					{ color:#c00; position:absolute; right:3px; bottom:5px; font-size:.96em; }

/*
========================
Theme
========================
*/
.dark								{ background:#222; color:#ccc; }
.dark #header-wrapper 				{ background:#222; }
.dark #header-wrapper h1 a 			{ color: #fff; /* background:url(../image/title-zh-white.svg) no-repeat;*/ }
.dark #footer-inner					{ border:none; }

/*
========================
Main
========================
*/
.main-content						{ min-height:800px; padding-top:130px; position:relative; }

.flickity-prev-next-button 			{ transition:opacity .5s; background-color:rgba(0,0,0,.5); border-radius:0; width:50px; height:100%; }
.flickity-prev-next-button svg 		{ display:none; }
.flickity-prev-next-button:disabled { opacity:0; }
.flickity-prev-next-button.previous { left:10px; background:url(../image/arrow-left-round.svg) no-repeat 50% 50%; background-size:48px 48px;   }
.flickity-prev-next-button.next 	{ right:10px; background:url(../image/arrow-right-round.svg) no-repeat 50% 50%; background-size:48px 48px;  }

.jssocials-share-link 				{ border-radius: 50%; border:none !important; font-size:12px; } 

.carousel-category					{ padding-top:30px; transition:opacity .5s; font-size:1.15em; margin-left:90px; margin-right:60px; 
										position:relative; }
.carousel-category p				{ color:#777; position:absolute; left:0; }
.carousel-category ul				{ }
.carousel-category li				{ display:inline-block; width:19.2%; text-align:right; color:#888; }
.carousel-category li a				{ padding-right:15px; }
.carousel-category li.active a		{ background:url(../image/arrow-down-small.svg) no-repeat right 50%; color:#222; }
.carousel-category.disabled			{ opacity:.1; }

.carousel-list						{ margin:28px 0 40px 0;  }
.carousel-list .row					{ width:100%; height:auto; position:relative; margin:24px 0; transition:opacity .5s; }
.carousel-list .gap					{ padding-top:1px; }	
.carousel-list .label				{ position:absolute; left:0; top:0; bottom:0; width:90px; padding-left:38px; 
										font-size:1.08em; letter-spacing:.33em; color:#888; }		
.carousel-list .label span  		{ border-top:1px solid #999; padding-top:20px; display:block; width:1em; writing-mode: tb-rl; }								
.carousel-list .carousel			{ margin-left:90px; height:220px; }
.carousel-list .cell				{ height:100%; margin-right:3px; position:relative; transition:opacity .5s; opacity:1; }
.carousel-list .thumb				{ height:100%; position:relative; }
.carousel-list .thumb img			{ height:100%;}
.carousel-list .info				{ display:block; position:absolute; left:0; top:0; right:0; bottom:0; padding:22px 26px; 
										background:#899696; color:#fff; font-size:1.2em; letter-spacing:.02em; line-height:1.4em; opacity:0; 
										transition:opacity .4s; }
.carousel-list .info:hover  		{ opacity:1; }
.is-touch .carousel-list .info		{ display:none; }
.carousel-list .more				{ position:absolute; right:0; bottom:0; width:40px; height:40px; padding-top:8px; 
										background:rgba(255,255,255,.75); text-align:center; }	
.carousel-list .more i				{ color:#899696; font-size:18px; margin:0 0 0 1px; }					
.carousel-list .cell.active .info	{ opacity:1; }
.carousel-list .cell.fade 		  	{ opacity:.4; }					

.carousel-list.sortby-scale .label		{ /*letter-spacing:normal;*/ }
.carousel-list.sortby-scale .label sup 	{ font-size:.25em; }
.carousel-list.sortby-year .label		{ letter-spacing:normal; }
.en .carousel-list .label				{ letter-spacing:normal; }						

.carousel-list.news-list .row 		{ height:300px; margin-bottom:10px; }
.carousel-list.news-list .carousel	{ height:300px; }
.carousel-list.news-list .thumb 	{ height:220px; margin-bottom:12px; }
.carousel-list.news-list .text		{ position:absolute; left:0; right:0; overflow:hidden; /*height:150px;*/ }
.carousel-list.news-list .date		{ text-transform:uppercase; font-size:.95em; color:#777; margin-bottom:5px; }
.carousel-list.news-list .title 	{ line-height:1.25em; color:#000; font-size:1.1em; }
.carousel-list.news-list .row .flickity-prev-next-button { top:115px; height:220px; }

.detail-holder						{ width:100%; height:0; padding:0; position:relative; opacity:0; overflow:hidden; background:#fff; }
.detail-holder .data				{ width:450px; height:100%; padding:0 30px 0 90px; position:relative; display:none; }
.detail-holder .date				{ text-transform:uppercase; height:auto !important; margin-bottom:10px; font-size:.95em; color:#666; }
.detail-holder h2					{ font-size:1.33em; margin-bottom:25px; line-height:1.33em; padding-top:20px; border-top:1px solid #ccc; }
.detail-holder dl					{ overflow:hidden; zoom:1; margin-bottom:20px; font-size:1.06em;  }
.detail-holder dt					{ width:90px; float:left; clear:left; margin-bottom:.75em; line-height:1.33em; }
.detail-holder dd					{ margin-left:90px; margin-bottom:.75em; line-height:1.33em; color:#777; }
.en .detail-holder dt				{ width:120px; }
.en .detail-holder dd				{ margin-left:120px; }
.detail-holder .desc				{ line-height:1.5em; font-size:1.05em; color:#555; overflow:hidden; }
.detail-holder .sharer				{ position:absolute; left:90px; bottom:0; right:30px; border-top:1px solid #ccc; }
.detail-holder .sharer i			{ color:#999; font-size:17px; }
.detail-holder .sharer i:hover		{ color:#333; }
.detail-holder .jssocials-share		{ margin:3px 5px 0 0; }
.detail-holder .close 				{ position:absolute; right:30px; bottom:12px; z-index:10; color:#999; transition:color .5s ease-in-out; }	
.detail-holder .close:hover 		{ color:#333; }
.detail-holder .download			{ position:absolute; left:90px; right:30px; bottom:50px; }
.detail-holder .download li 		{ font-size:.96em; margin-bottom:10px; }
.detail-holder .download li a 		{ color:#666; transition:color .2s; padding-left:7px; }
.detail-holder .download li a:hover { color:#000; }
.detail-holder .download li i		{ margin-right:8px; color:#000; }
.detail-holder .image-carousel 		{ position:absolute; left:450px; top:40px; right:0; bottom:40px; }
.detail-holder .image-carousel:after { content: 'flickity'; display: none; /* hide :after */ }
.detail-holder .image-carousel .cell{ height:100%; margin-right:3px; }
.detail-holder .image-carousel .cell img		{ display:block; height:100%; }
.detail-holder .image-carousel .cell .play 		{ position:absolute; left:0; top:0; right:0; bottom:0; display:block; background-size:64px 64px; 
													background-image:url(../image/play.svg); background-repeat:no-repeat; background-position:50% 50%;
													background-color:rgba(0,0,0,.25); transition:background-color .4s; cursor:pointer; }
.not-touch .detail-holder .image-carousel .cell .play:hover { background-color:rgba(0,0,0,.05);  }
															
.tabs						{ padding-top:30px; padding-bottom:20px; transition:opacity .5s; font-size:1.15em; margin-left:90px; margin-right:60px; position:relative; }
.tabs .tab					{ display:inline-block; width:50%; max-width:200px; color:#888; }
.tabs .tab a				{ padding-right:15px; }
.tabs .tab.active a			{ background:url(../image/arrow-down-small.svg) no-repeat right 50%; color:#222; }


.section							{ overflow:hidden; zoom:1; margin-bottom:60px; padding:1px 0; }
.section.last						{ margin-bottom:50px; }
.section .label						{ width:90px; height:auto; padding-left:38px; font-size:1.08em; letter-spacing:.33em; float:left; color:#888; }
.section .label span  				{ border-top:1px solid #999; padding-top:20px; display:block; width:1em; writing-mode: tb-rl; }
.en .section .label					{ letter-spacing:normal; }	
.section .data						{ margin-left:90px; margin-right:60px; overflow:hidden; zoom:1; }
.section .section-text				{ width:42.5%; max-width:800px; float:left; font-size:1.24em; line-height:2.2em; color:#444; text-align:justify; }
.section .section-text table		{ border:none; border-top:1px solid #eee; }
.section .section-text td			{ border:none; border-bottom:1px solid #eee; font-size:.9em; line-height:1.6em; padding:10px 10px 10px 0; }
.section .section-image				{ margin-left:48.5%; width:51.5%; }
.section .section-image img 		{ display:block; width:100%; }

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

/** Home **/
#cover								{ width:100%; position:relative; }
#cover-bg							{ width:100%; height:100%; background:#ccc; }
#cover-bg .dcSlider_holder			{ background-attachment:fixed; }
#cover-shadow						{ position:absolute; left:0; right:0; bottom:0; height:14%; 
										background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); z-index:9; }
#cover-body							{ position:absolute; top:80px; left:0; right:0; bottom:0; z-index:10; }
#cover-body .inner					{ height:100%; }
#cover-body p						{ position:absolute; left:0; bottom:65px; width:409px; height:66px; text-indent:-1000px; overflow:hidden;
										background:url(../image/logo-title.svg) no-repeat; background-size:100%; }
#cover-body .logo 					{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; max-width:360px; }
#cover-body .scroll-down 			{ position:absolute; right:5%; bottom:60px; width:24px; height:34px; transition:opacity .2s; 
										background:url(../image/arrow-down-big.svg) no-repeat 50% 50%; background-size:100%; }
#cover-body .scroll-down:hover 		{ opacity:.5; }								


/** Firm **/
#firm								{ padding-top:130px; }
#firm .tabs + .section				{ margin-top:15px; }


/** People **/
#people								{ padding-top:170px; }
#people .section					{ margin-bottom:0; }
#people .section .label	span		{ border:none; }
#people .section .data				{ margin-left:90px; }
.people-list						{ overflow:hidden; zoom:1; }
.people-list > li					{ width:21.25%; margin-right:5%; margin-bottom:5%; float:left; position:relative; }
.people-list > li:nth-child(4n) 	{ margin-right:0; }
.people-list > li.clickable			{ cursor:pointer; }
.people-list > li.clickable .mask 	{ position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.25); opacity:0; 
										transition:opacity .5s ease-in-out; }
.people-list > li.clickable:hover .mask { opacity:1; }
.people-list .thumb					{ position:relative; background:#828e8d; margin-bottom:12px; }
.people-list .thumb img				{ width:100%; display:block; }
.people-list .name					{ margin-bottom:9px; font-size:1.3em; color:#333; }
.people-list .position				{ color:#888; font-size:1.1em; }

/*
.people-list.full-width > li		{ width:100%; float:none; overflow:hidden; zoom:1; }
.people-list.full-width > li .thumb	{ width:47.5%; padding-top:35%; overflow:hidden; float:left; margin-right:5%; }
.people-list.full-width > li .thumb	img { position:absolute; left:0; top:0; }
.people-list.full-width .name		{ font-size:1.6em; margin-bottom:15px; }
.people-list.full-width .position	{ font-size:1.2em; margin-bottom:40px; }
.people-list.full-width .brief		{ color:#666; font-size:1.2em; line-height:2em; }
.people-list.full-width > li.clickable:hover .mask { opacity:0; }
.people-list.full-width > li.clickable .thumb:hover .mask { opacity:1; }
*/

.people-detail						{ position:fixed; left:0; right:0; top:0; bottom:0; z-index:99999; display:none; }
.people-detail-mask					{ width:100%; height:100%; background:rgba(0,0,0,.4); }
.people-detail-body					{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; 
										max-width:600px; max-height:100%; overflow:auto; background:#fff; cursor:auto; border-radius:3px; }
.people-detail-body .title			{ font-size:1.5em; border-bottom:1px solid #ccc; padding:18px 30px; line-height:1.25; }
.people-detail-body .title span		{ color:#999; margin-left:8px; font-size:.8em; font-weight:normal; }
.people-detail-body .content		{ padding:30px 30px 20px 30px; }
.people-detail-body h3				{ font-size:1.2em; margin-bottom:1em; }
.people-detail-body .desc			{ margin-bottom:40px; line-height:1.5em; font-size:1.1em; color:#777; }
.people-detail-body .desc li		{ margin-bottom:.5em; }
.people-detail-close				{ position:absolute; right:15px; top:17px; font-size:2em; cursor:pointer; color:#888; }

/** News **/
#news .carousel-category			{ display:none; }
#news .carousel-category ul			{ margin-left:90px; }
#news .carousel-category li			{ max-width:200px; }

/** Progress **/
#progress							{ padding-top:170px; }
#cctv-section						{ position:relative; }
#cctv-section .data					{ margin-left:90px; margin-right:60px; }
#cctv-section h2					{ margin-left:90px; margin-bottom:30px; font-size:1.2em; line-height:1.5em; }
#cctv-section .info					{ width:270px; float:right; }
#cctv-section .info .desc			{ line-height:1.6em; color:#888; font-size:.96em; }
#cctv-section .logout				{ position:absolute; right:60px; top:0; color:#666; font-size:.98em; transition:color .2s; }
#cctv-section .logout:hover 		{ color:#999; } 

#camera-list 						{ overflow:hidden; zoom:1; margin-right:320px; }
#camera-list li 					{ width:31.33333333333333%; margin-right:3%; float:left; }
#camera-list li:nth-child(3n) 		{ margin-right:0; }
#camera-list .thumb 				{ padding-top:68%; overflow:hidden; position:relative; margin-bottom:12px; }
#camera-list .thumb img 			{ position:absolute; top:0; left:0; width:100%; cursor:pointer; }
#camera-list .thumb.empty 			{ background:url(../image/no_camera.svg) no-repeat 50% 50% #444; background-size:72px 72px; }
#camera-list .thumb .play		 	{ position:absolute; left:0; top:0; right:0; bottom:0; display:block; cursor:pointer; 
										background-size:60px 60px; background-image:url(../image/play.svg); background-repeat:no-repeat; 
										background-position:50% 50%; background-color:rgba(0,0,0,.25); transition:background-color .4s; }
#camera-list .thumb .play:hover 	{ background-color:rgba(0,0,0,.05);  }
#camera-list .title 				{ height:60px; color:#888; font-size:.98em; }

#camera-zoom 						{ position:fixed; left:0; top:0; width:0; height:0; opacity:0; overflow:hidden; transition:opacity .5s; 
										z-index:99999; }
#camera-zoom.show 					{ width:100%; height:100%; opacity:1; }
#camera-zoom .mask 					{ width:100%; height:100%; background:rgba(0,0,0,.9); }
#camera-zoom .close 				{ position:absolute; right:10px; top:10px; font-family:Arial, Helvetica, sans-serif; font-size:30px; 
										color:#666; cursor:pointer; }
#camera-zoom .close:hover 			{ color:#ccc; }
#camera-zoom .zoom-img 				{ position:absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: 100%; height: auto; 
										max-height: 100%; margin: auto;}

/*
========================
Responsive
========================
*/
/* for 1600px or less */ 
@media screen and (max-width: 1600px) {
	
.inner										{ margin:0 60px 0 72px; } 

#header-wrapper nav	li						{ margin-left:50px; }

.carousel-category							{ margin-left:72px; }	
.carousel-list .label						{ width:72px; padding-left:28px; }				
.carousel-list .carousel					{ margin-left:72px; }

.detail-holder .data						{ width:400px; padding-left:72px; }
.detail-holder .data h2						{ }
.detail-holder .sharer						{ left:72px; }
.detail-holder .download					{ left:72px; }
.detail-holder .image-carousel 				{ left:400px; }


.section .label								{ width:72px; padding-left:28px; }
.section .data								{ margin-left:90px; }	
.section .section-text						{ font-size:1.16em; }

#people .section .data						{ margin-left:72px; }

#cctv-section .data							{ margin-left:72px; }
#cctv-section h2							{ margin-left:72px; margin-bottom:30px; }

}


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

#header-wrapper h1 a 						{ font-size: 1.5em; letter-spacing: .05em; }
#header-wrapper h1 img 						{ height: 27px; margin-right: 8px;}	
#footer-inner .lt							{ width:30%; }

#cover-body p								{ bottom:55px; width:372px; height:60px; }
#cover-body .logo 							{ max-width:320px; }
#cover-body .scroll-down 					{ bottom:50px; }
				
.people-list > li							{ margin-bottom:6%; }				
.people-list > li,
.people-list > li:nth-child(4n) 			{ width:31.33333333333333%; margin-right:3%; }
.people-list > li:nth-child(3n)				{ margin-right:0; }

/*
.people-list.full-width > li .thumb			{ width:31.33333333333333%; padding-top:0; margin-right:3%; }
.people-list.full-width > li .thumb	img 	{ position:static; }
.people-list.full-width .name				{ font-size:1.5em; margin-bottom:12px; }
.people-list.full-width .position			{ font-size:1.2em; margin-bottom:40px; }
.people-list.full-width .brief				{ font-size:1.1em; line-height:1.8em; }
*/

#camera-list li,
#camera-list li:nth-child(3n) 				{ width:48.5%; margin-right:3%; }
#camera-list li:nth-child(2n) 				{ margin-right:0; }

}


/* for 1024px or less */ 
@media screen and (max-width: 1024px) {
	
.mobile-element							{ display:block; }
.inner									{ margin:auto 4%; }
body.detail-on							{ /*position: fixed;*/ overflow:hidden; height:100%; width:100%; }

/** Header **/
#header-wrapper							{ position:absolute; height:72px; border-bottom:1px solid #ddd; }
#header-inner							{ margin:0; }
#header-wrapper h1						{ left:50%; transform:translate(-50%, -50%); }
#header-wrapper nav						{ position:absolute; left:0; right:0; top:72px; transform:none; background:#fff; text-align:center; 
											display:none; }
#header-wrapper nav	li					{ display:block; border-bottom:1px solid #ddd; color:#666; margin:0; padding:0; }
#header-wrapper nav	li.active 			{ border-bottom:1px solid #ddd; color:#000; }
#header-wrapper nav a					{ display:block; padding:1em 0; border:none; }
#header-wrapper #header-lang 			{ right:3%; }

#header-wrapper.headroom--pinned 		{ top:0; }
#header-wrapper.headroom--unpinned		{ top:0; }

#menu-button							{ width:36px; height:36px; position:absolute; left:3%; top:50%; transform:translateY(-50%); cursor:pointer; }
#menu-button .bar						{ width:50%; height:2px; background:#666; position:absolute; left:50%; top:50%; 
											transform:translate(-50%, -50%); }
#menu-bar-1								{ margin-top:-6px;}
#menu-bar-3								{ margin-top:6px;}

.show-nav #header-wrapper nav 			{ display:block; }

/** Footer **/
#footer-wrapper							{ border-top:1px solid #ddd; }
#footer-inner							{ padding-bottom:30px; border:none; font-size:12px; }
#footer-inner .lt						{ width:50%; }
#footer-inner .rt						{ display:none; }


/** Theme **/
.dark #header-wrapper 					{ border-bottom:1px solid #444; }
.dark #header-wrapper h1 a 				{ background:url(../image/title-zh-white.svg) no-repeat; }
.dark #footer-wrapper					{ border-top:1px solid #444; }
.dark .section							{ border-bottom:1px solid #444; }
.dark .section.last						{ border-bottom:none; }

/** Main **/
.main-content							{ padding-top:72px; min-height:0; }
.flickity-prev-next-button				{ width:32px; }
.flickity-prev-next-button.previous 	{ background-size:24px 24px;   }
.flickity-prev-next-button.next 		{ background-size:24px 24px;  }

.carousel-category						{ margin:0; padding:13px 16px; text-align:center; border-bottom:1px solid #ddd; font-size:1em;  }
.carousel-category p					{ display:none; }
.carousel-category ul					{ display:block; }
.carousel-category li					{ text-align:center; }
.carousel-category li a					{ padding-right:12px; }

.carousel-list							{ margin:0; }
.carousel-list .row						{ margin:0; }
.carousel-list .gap:last-child 			{ display:none; }
.carousel-list .label					{ position:static; width:100%; display:block; padding:20px 16px 12px 16px; font-size:1.1em; 
											letter-spacing:normal; }
.carousel-list .label span				{ border:none; padding:0; width:auto; writing-mode:lr-tb; }	
.carousel-list .carousel				{ margin-left:0; height:240px; }
.carousel-list .cell					{ margin-right:2px; }
.carousel-list .info					{ padding:15px 15px; font-size:1.1em; position:relative; }	
.carousel-list.news-list .row 			{ height:360px; margin-bottom:0; }
.carousel-list.news-list .carousel		{ height:315px; }
.carousel-list.news-list .text			{ left:15px; right:15px; }


.detail-holder					{ position:fixed; left:0; top:0; right:0; bottom:0; height:auto !important; padding:0 !important; 
									overflow:auto; z-index:1000; -webkit-overflow-scrolling: touch; }
.detail-holder .data			{ position:static; width:90%; max-width:760px; margin:auto; height:auto; padding:30px 0; }
.detail-holder .date			{ margin-left:0 !important; }
.detail-holder h2				{ margin-bottom:15px; padding:30px 0 0 0; border:none; }
.detail-holder dl				{ margin-bottom:10px; padding-top:10px; }
.detail-holder .desc			{ height:auto !important; width:80%; }
.detail-holder .sharer			{ position:static; border-top:none; padding-top:15px; }
.detail-holder .download		{ position:static; text-align:left; padding-top:15px; }
.detail-holder .image-carousel  { position:static; width:100%; height:auto; margin-bottom:0; background:none; }
.detail-holder .image-carousel:after { content: ''; }
.detail-holder .image-carousel .cell { margin:0 0 2px 0; width:100% !important; height:auto !important; }
.detail-holder .image-carousel .cell:last-child	{ margin-bottom:0; }
.detail-holder .image-carousel img	{ display:block; width:100%; }
.detail-holder .close 			{ position:fixed; top:6px; right:6px; bottom:auto; display:block; width:36px; height:36px; background:#fff; color:#888; text-align:center; line-height:36px; font-size:18px; }	
.detail-holder .close span		{ display:none; }	

.tabs						{ padding:13px 0; margin:0; text-align:center; }

.section					{ margin-bottom:0; padding:15px 0; border-top:1px solid #ddd; }
.section:first-child		{ border-top:0; }
.section.last				{ margin-bottom:0; }
.section .label				{ position:static; width:90%; max-width:860px; margin:auto; display:block; padding:20px 0 5px 0; 
								font-size:1.2em; letter-spacing:normal; float:none; }
.section .label span  		{ border:none; padding:0; width:auto; writing-mode:lr-tb; }
.section .data				{ margin:0 auto; padding:20px 0; width:90%; max-width:860px; }
.section .section-text		{ width:100%; max-width:none; float:none; margin-bottom:30px; color:#666; }
.section .section-image		{ margin-left:0; width:100%; }


/** Home **/
#cover-bg .dcSlider_holder	{ background-attachment:scroll; }
#cover-body p				{ bottom:50px; left:30px; width:287px; height:48px; }
#cover-body .logo 			{ max-width:280px; }
#cover-body .scroll-down 	{ bottom:50px; }

/** Firm **/
#firm						{ padding-top:70px; }
#firm .tabs + .section		{ margin-top:0; }

/** Honor **/
#honor .carousel-list		{ border-top:1px solid #ddd;  }

/** News **/
#news .carousel-category ul	{ margin-left:0; }
#news .carousel-category li	{ max-width:none; width:50%; }

/** People **/
#people						{ padding-top:90px; }
#people .section .label		{ display:none; }
#people .section .data		{ margin:auto; padding:15px 0 0 0; }
.people-detail-body .title	{ font-size:1.18em; }

/** Progress **/
#progress					{ padding-top:90px; }
#cctv-section				{ padding:0; }
#cctv-section h2			{ margin:0 auto 10px auto; width:90%; max-width:860px; font-size:1.1em; }
#cctv-section .data			{ margin:auto; }
#cctv-section .info			{ width:100%; float:none; margin-bottom:40px;  }
#cctv-section .logout		{ right:5%; }
#camera-list 				{ margin-right:0; }

}

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

.people-list.full-width > li .thumb			{ width:100%; padding-top:68%; margin-right:0; margin-bottom:20px; }
.people-list.full-width > li .thumb	img 	{ position:absolute; left:0 ;top:0; }
.people-list.full-width .name				{ font-size:1.5em; margin-bottom:10px; }
.people-list.full-width .position			{ font-size:1.1em; margin-bottom:20px; }
.people-list.full-width .brief				{ font-size:1em; line-height:1.8em; }
	
}
*/

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

#header-wrapper h1 a 					{ font-size: 1.4em; letter-spacing: .05em; }
#header-wrapper h1 img 					{ height: 21px; margin-right: 6px;}	
#header-wrapper							{ height:60px; }
#header-wrapper nav						{ top:60px; }


/** Main **/
.main-content							{ padding-top:60px; }
.detail-holder .close 					{ font-size:13px; }
.section .section-text					{ font-size:1.05em; line-height:1.8em; }

/** Home **/
#cover-body p							{ bottom:auto; top:40%; left:50%; transform:translateX(-50%); width:315px; height:50px; }
#cover-body .logo 						{ top: 45%;}
#cover-body .scroll-down 				{ right:auto; bottom:20px; left:50%; transform:translateX(-50%); }
#cover-body .scroll-down:hover 			{ opacity:.5; }	


/** Firm **/
#firm									{ padding-top:56px; }

/** People **/
#people									{ padding-top:60px; }
.people-list > li						{ margin-bottom:8%; }
.people-list > li,
.people-list > li:nth-child(4n),
.people-list > li:nth-child(3n) 		{ width:48.5%; margin-right:3%; }
.people-list > li:nth-child(2n)			{ margin-right:0; }
.people-list .name						{ font-size:1em; margin-bottom:4px; }
.people-list .position					{ font-size:.94em; }


/** Progress **/
#camera-list li							{ width:100% !important; margin-right:0 !important; margin-bottom:30px !important; }
#camera-list li .thumb					{ margin-bottom:8px; }
#camera-list li .title					{ height:auto; }

}

/* for 480px or less */ 
@media screen and (max-width: 480px) {
	
#header-wrapper h1 a 					{ font-size: 1.25em; letter-spacing: .03em; }
#header-wrapper h1 img 					{ height: 18px; margin-right: 4px;}	

#menu-button							{ left:5px; }


#cover-body p							{ width:280px; height:45px; }

.people-detail-body .title span 		{ display:block; margin-left:0; padding-top:3px; }
}


/* for 320px or less */ 
@media screen and (max-width: 320px) {
	
/** Footer **/
#footer-inner .lt						{ float:none; width:100%; margin-bottom:20px; }
}