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

/*
========================
Global
========================
*/
*			{ box-sizing:border-box; }
html, body	{}
body.no-scroll	{ overflow:hidden; width:100%; height:100%; }
body.no-header #header-wrapper { display:none; }
#container	{ overflow-x: hidden;}
.wrapper 	{}
.inner		{ position:relative; width:95%; margin:auto;  }
.inner-mid  { position:relative; width:90%; margin:auto;  }
.inner-small{ width:90%; max-width:860px; margin:auto; } 

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

input[type="submit"] 	{ -webkit-appearance:none; }

.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 ol				{ list-style:decimal;padding-left:15px;}
.fr-view ol	li			{ text-align:left; }
.fr-view img			{ cursor:default !important; }
.fr-view a > img		{ cursor:pointer !important; }

.lg-backdrop	{ z-index:10040; }
.lg-outer		{ z-index:10050; }

.sb-loadmore	{ margin:10px 0 40px 0 !important; }

.mobile-element { display:none; }

/* no circle */
.flickity-button {
  background: transparent !important;
}
/* big previous & next buttons */
.flickity-prev-next-button {
  width: 100px;
  height: 100px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
  opacity:.4;
  transition:opacity .3s;
}
.flickity-button-icon:hover {
  fill: white;
  opacity:1;
}
/* hide disabled button */
.flickity-button:disabled {
  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; }

/*
========================
Header
========================
*/
#header-wrapper			{ position:fixed; left:0; top:0; width:100%; height:110px; padding-top:32px; background:#fff; z-index:1000;
							transition:top .5s ease-in-out; }
#header-wrapper.headroom--unpinned	{ top:-110px; }
#header-wrapper.headroom--pinned	{}

#header-inner #logo		{ width:40px; float:left; }
#header-inner h1		{ height:40px; width:103px; float:left; margin-left:4px; }
#header-inner h1 a		{ display:block; width:100%; height:100%; text-indent:-400px; overflow:hidden; 
							background:url(../image/title.svg) 0 0 no-repeat; background-size:100% 100%;}
#header-inner nav		{ height:40px; }
#header-inner nav ul	{ position:absolute; right:200px; top:50%; transform:translateY(-50%); }
#header-inner nav li	{ display:inline-block; margin-left:60px; }
#header-inner nav li a	{ color:#777; font-size:1.15em; transition:color .2s; letter-spacing:.1em; }
#header-inner nav li.active a	{ color:#43a8af; }	
			
#header-inner #links					{ position:absolute; right:0; top:50%; transform:translateY(-50%); }	
#header-inner #links .social-links		{ display:inline-block; }
#header-inner #links .social-links a	{ margin-left:18px; }
#header-inner #links .lang				{ display:inline-block; border-right:1px solid #ddd; padding-right:18px; }		
#header-inner #links .lang a			{ font-size:.92em; }				


/*
========================
Main
========================
*/
#main-wrapper			{ padding-top:110px; }
#main-inner				{}

.banner					{ height:400px; background:#f1f1f1; }
.banner .item			{ width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; position:relative; }

section					{ background:#f1f1f1; padding:30px 0; }
section.light			{ background:#fff; }
section.first			{ padding-top:70px; }
section.last			{ padding-bottom:70px; }
section h2				{ font-size:1.25em; line-height:1.5em; letter-spacing:.02em; margin-bottom:1em; width:150px; float:left; }
section .content		{ margin-left:150px; }
section .desc			{ color:#666; line-height:1.6em; }
section .desc table		{ border:none; border-top:1px solid #ccc; width:100%; }
section .desc td		{ border:none; border-bottom:1px solid #ccc; line-height:1.33em; vertical-align:middle; }
.section-images			{ margin-top:40px; }
.section-images img		{ width:100%; margin-bottom:10px; }

/*
========================
Footer
========================
*/
#footer-wrapper					{ border-top:1px solid #e5e5e5; height:50px; text-align:right; padding-top:16px; }
#footer-wrapper.hide			{ display:none; }
#footer-inner #copyright		{ display:inline-block; color:#666;  }
#footer-inner #site-credit		{ display:inline-block; border-left:1px solid #ddd; padding-left:15px; margin-left:15px; font-size:.9em; color:#999; }


/*
========================
Cover
========================
*/
#cover 		{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:999999; background: #e2eef0;
				background: linear-gradient(135deg, #e2f0f8 40%,#f8e4e6 60%); }
#cover img	{ position:absolute; left:50%; top:50%; transform:translate(-50%,-75%); display:none; }
#cover p	{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); width:80%; opacity:.52; 
				font-size:1.1em; font-weight:bold; letter-spacing:.1em; text-align:center; line-height:1.8em; display:none; }

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

/** index.php **/
#hero					{ position:fixed; left:0; top:0; bottom:0; width:78%; }
#hero-slider			{ width:100%; height:100%; }
#hero-slider .item		{ width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; position:relative; }
#hero-slider .item a	{ position:absolute; left:40px; bottom:30px; color:#fff; opacity:.8; font-size:1.4em; }
#hero-dots				{ position:absolute; right:40px; bottom:34px; z-index:999; }
#hero-dots .dot			{ display:inline-block; width:7px; height:7px; margin-left:12px; background:#fff; border-radius:50%; cursor:pointer; }
#hero-dots .dot.active	{ background:#43a8af; }


#headline-news			{ margin-left:77%; padding:0 1.7% 60px 3%; }
#headline-news ul		{ margin-bottom:60px; }
#headline-news li		{ margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #ddd; }
#headline-news li:last-child { border-bottom:none; }
#headline-news .thumb	{ margin-bottom:10px; overflow:hidden; position:relative; }
#headline-news img		{ width:100%; transition:transform .5s; }
#headline-news .date	{ font-size:.96em; color:#888; letter-spacing:.05em; margin-bottom:10px; }
#headline-news .title	{ font-size:1.33em; line-height:1.33em; font-weight:bold; color:#333; }
#headline-news .desc	{ color:#666; font-size:.95em; line-height:1.5em; margin-top:10px; }
#headline-news .more	{ font-size:1.15em; opacity:.6; padding-right:50px; background:url(../image/long-arrow-right.svg) no-repeat right 50%; }
#headline-news .external-link { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; 
							background:url(../image/link.svg) no-repeat 50% 50%; background-size:100%; opacity:0; transition:all .5s;
							cursor:pointer; }
#headline-news .thumb:hover .external-link { opacity:.8; }
#headline-news .thumb:hover img	{ transform:scale(1.2,1.2); }


/** works.php **/
#works					{ position:relative; }
.filter-set				{ position:relative; z-index:99;  }
.filter-labels			{ width:100%; height:50px; padding:16px 5% 0 5%; border-top:1px solid #e5e5e5; background:#fff; }
.filter-labels .label	{ display:inline-block; margin-right:60px; font-size:1.08em; cursor:pointer; color:#888; transition:color .25s;
							white-space:nowrap; }
.filter-labels .label:hover		{ color:#000; }
.filter-labels .label.active	{ color:#43a8af; }
.filter-labels .label[data-target]:after  	{ /*content:"+"; margin-left:4px;*/ }
.filter-options			{ position:absolute; left:0; top:50px; right:0; z-index:99; height:0; opacity:0; transition:all .3s; overflow:hidden; }
.filter-options.show	{ height:50px; opacity:1; }
.filter-options ul		{ height:50px; padding:10px 0 0 0; border-top:1px solid #e5e5e5; 
							background:#fff; display:none; }	
.filter-options ul.show	{ display:block; }												
.filter-options li		{ display:inline-block; margin-right:60px; margin-left:-12px; cursor:pointer; padding:6px 6px 6px 12px; border-radius:15px; }
.filter-options li.active	{ background:#43a8af; color:#fff; }
.filter-options li.active a:after { content:'x'; color:#fff; font-family:Arial, sans-serif; margin-left:6px; display:inline-block; width:14px; height:14px; line-height:14px; text-align:center; border-radius:50%; font-size:12px; }

#works-list				{ width:95%; margin:auto; background:#fff; overflow:hidden; zoom:1; }
#works-list .grid-item	{ width:24.85%; margin-bottom:0; position:relative; }
#works-list .grid-sizer	{ width:24.85%; }
#works-list .gutter-sizer	{ width:.2%; }
#works-list	.thumb		{ overflow:hidden; background:#f2f2f2; height:0; padding-top:66.71875%; position:relative; cursor:pointer; }
#works-list	img			{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; opacity:0; transition:all .5s; }
#works-list	img.loaded	{ opacity:1; }
/*
#works-list	.info		{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; background:rgba(0,0,0,.4); 
							opacity:0; transition:opacity .5s; }
#works-list	.info:hover	{ opacity:1; }
#works-list	.info span	{ position:absolute; left:6.5%; bottom:8%; color:#fff; line-height:1.25em; font-size:1.05em; }
.is-touch #works-list .info { opacity:1; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.65) 100%); }
*/
#works-list .grid-item:hover img	{ transform:scale(1.2, 1.2); }
#works-list	.info		{ min-height: 3.8em;  padding:8px 2%; line-height:1.25em; font-size:1.05em; display:block; text-align:center; }

#detail					{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:9999; background:#f2f2f2; }
#detail	.info			{ width:20%; float:left; padding:50px 2%;  }
#detail	.info .back		{ margin-bottom:50px; color:#000; padding-left:28px; background:url(../image/arrow-back.svg) no-repeat 0 50%; opacity:.6;
							transition:opacity .2s; cursor:pointer; display:inline-block; }
#detail	.info .back:hover	{ opacity:1; }							
#detail	.info h1		{ font-size:1.33em; line-height:1.33em; margin-bottom:1.33em; }
#detail	.info dl		{ overflow:hidden; zoom:1; padding:1px 0; }
#detail	.info dt		{ float:left; margin-right:5px; margin-bottom:10px; clear:left; }
#detail	.info dt:after	{ content:"/"; margin-left:5px; line-height:1.2em; }
#detail	.info dd		{ float:left; margin-bottom:10px; color:#666; line-height:1.2em; }
#detail	.info dt.multi-row	{ margin-bottom:2px;}
#detail	.info dd.multi-row  { display:block; clear:left; }
#detail	.info dt.gap,
#detail	.info dd.gap	{ margin-top:15px; }
#detail	.info .desc		{ line-height:1.4em; color:#666; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:18px 0; margin:15px 0; }
#detail	.info .share	{ position:absolute; left:2%; bottom:40px; }
#detail	.info .share .jssocials-share-link { border:none; font-size:11px; margin-right:20px; padding:0; }

#detail	.info.scroll	{ max-height:100vh; overflow:auto; }
#detail	.info.scroll .share { position:static; margin-top:40px; }

#detail .images			{ margin-left:20%; height:100%; position:relative; background:#aaa; }
#detail .carousel		{ height:100%; }
#detail .carousel:after { content: 'flickity'; display: none; }
#detail .carousel-cell	{ height:100%; background:#111; position:relative; }
#detail .carousel-cell img	{ height:100%; display:block; opacity:.3; transition:opacity 1s; transition-delay:.5s; }
#detail .carousel-cell.is-selected img	{ opacity:1; }
#detail .carousel-cell .play-video	{ position:absolute; left:50%; top:50%; width:60px; height:60px; transform:translate(-50%, -50%); 
									background:url(../image/play.svg) no-repeat 50% 50%; background-size:100% 100%; border-radius:50%; }
#detail .carousel-cell .image-desc { position: absolute; left: 0; bottom:0; font-size: 12px; background: rgba(255,255,255,.7); color: #222; padding:2px 5px 3px 5px; opacity:.3; transition:opacity 1s; transition-delay:.5s;}									
#detail .carousel-cell.is-selected .image-desc	{ opacity:1; }
#detail .nav			{ position:absolute; top:0; right:0; height:60px; }
#detail .nav .prev,
#detail .nav .next		{ float:left; width:60px; height:100%; text-align:center; cursor:pointer; line-height:60px; color:#fff; font-size:24px;
							transition:color .2s; }
#detail .nav .prev:hover,
#detail .nav .next:hover	{ color:#aaa; }
#detail .nav .pager		{ float:left; color:#fff; height:100%; line-height:60px; width:90px; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }
#detail .nav .current	{ margin-right:7px; font-weight:bold; }
#detail .nav .total		{ margin-left:7px; font-weight:bold; }


/** news.php **/
#news					{ background:#f7f7f7; padding-bottom:30px; }
#news .filter-set		{ border-bottom:1px solid #ddd;   }
#news-header			{ margin:60px auto 50px auto; position:relative; }
#news-header h2			{ font-size:1.4em; }
#news-header form		{ position:absolute; right:0; top:0; margin-top:-10px; }
#news-header [type="text"]	{ border:1px solid #ddd; border-radius:25px; background:#fff; padding:.4em 1em .5em 1em; width:240px; outline:none; font-family:inherit; font-size:1.1em; }
#news-header .search-button	{ position:absolute; right:15px; top:50%; transform:translateY(-50%); cursor:pointer; }

#news-list-wrapper		{ overflow:hidden; zoom:1; }
#news-list				{ overflow:hidden; zoom:1; margin-right:326px; position:relative; }
#news-list.wide			{ margin-right:0 !important; }

#news-list .grid-item,
#news-list .grid-sizer		{ width:30%; }
#news-list .gutter-sizer 	{ width:5%; }
#news-list .grid-item		{ margin-bottom:2.5%; }
#news-list .thumb			{ width:100%; height:0; overflow:hidden; position:relative; background:#f2f2f2; }
#news-list img				{ position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; transition:all .5s; }
#news-list img.loaded		{ opacity:1; }
#news-list .info			{ border:1px solid #e5e5e5; background:#fff; padding:25px 20px; overflow:hidden; }
#news-list .title			{ font-size:1.15em; line-height:1.33em; margin-bottom:10px; }
#news-list .title a:hover	{ color:#43a8af; }
#news-list .desc			{ line-height:1.5em; color:#666; font-size:.95em; }
#news-list .date			{ font-size:.96em; color:#666; letter-spacing:.05em; margin-bottom:10px; }
#news-list .has-thumb .info { border-top:none; }
#news-list .external-link 	{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px;  
								cursor:pointer; background:url(../image/link.svg) no-repeat 50% 50%; background-size:100%; opacity:0; transition:all .5s;
							}
#news-list .thumb:hover .external-link 	{ opacity:.8; }
#news-list .thumb:hover img				{ transform:scale(1.2,1.2); }
#news-list .continue	{ margin-top:20px; color:#999; }
#news-list .continue a:hover { border-bottom:1px solid #43a8af; color:#43a8af; }
#social-feeds			{ width:260px; float:right; margin-top:-10px; margin-bottom:30px; }
.sb-cicon { transform: scale(.6, .6);}

/** award.php **/
#award					{ background:#f7f7f7; padding-bottom:30px; padding-top: 1px; }
#award .filter-set		{ border-bottom:1px solid #ddd;   }
#award-header			{ margin:60px auto 50px auto; position:relative; }
#award-header h2			{ font-size:1.4em; }
#award-header form		{ position:absolute; right:0; top:0; margin-top:-10px; }
#award-header [type="text"]	{ border:1px solid #ddd; border-radius:25px; background:#fff; padding:.4em 1em .5em 1em; width:240px; outline:none; font-family:inherit; font-size:1.1em; }
#award-header .search-button	{ position:absolute; right:15px; top:50%; transform:translateY(-50%); cursor:pointer; }

#award-list-wrapper		{ overflow:hidden; zoom:1; }
#award-list				{ overflow:hidden; zoom:1; position:relative; }
#award-list.wide			{ margin-right:0 !important; }

#award-list .grid-item,
#award-list .grid-sizer		{ width:30%; }
#award-list .gutter-sizer 	{ width:5%; }
#award-list .grid-item		{ margin-bottom:2.5%; background-color: #fff; border:1px solid #e5e5e5; }
#award-list .thumb			{ width:100%; height:0; overflow:hidden; position:relative; background:#f2f2f2; }
#award-list .thumb img				{ position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; transition:all .5s; }
#award-list .thumb img.loaded		{ opacity:1; }
#award-list .icon 					{ position: absolute; right: 2%; bottom:5%; top: 10%; width: 30%; }
#award-list .icon img 				{ position: absolute; top: auto; left: 0; right: 0; bottom:0; max-width: 100%; max-height: 100%; margin: auto; width: auto; height: auto; }
#award-list .info					{ background:#fff; padding:20px 20px; height: 125px; overflow:hidden; }
#award-list .award-title			{ font-size:1.28em; font-weight: 600; line-height:1.2em; margin-bottom:8px; }
#award-list .award-title a:hover	{ color:#43a8af; }
#award-list .award-category			{ font-size:1em; color:#666; margin-bottom:8px; }
#award-list .award-year-grade		{ font-size:1.1em; color:#666; margin-bottom:8px; font-weight: 600; }
#award-list .award-year-grade span  { margin-right: 6px; }
#award-list .award-project			{ display: flex; flex-direction: column; position: absolute; left: 0; bottom:0; right: 0; padding: 20px; min-height: 33%;color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 80%);}
#award-list .award-project span 	{ margin-top: auto; font-size: 1.2em; font-weight: 600; }
#award-list .has-thumb .info 		{ border-top:none; }
#award-list .has-icon .info 		{ width: 65%; padding-right: 2%;}
#award-list .has-icon .award-project span 	{ display: inline-block; width: 65%;}
#award-list .thumb:hover img		{ transform:scale(1.2,1.2); }

/** post.php **/
#post					{ /*position:fixed; left:0; top:0; right:0; bottom:0; z-index:9999; overflow:auto;*/ background:#f0f0f0; }
#post article			{ padding:70px 0;  position:relative; }
#post .back				{ margin-bottom:40px; color:#000; padding-left:28px; background:url(../image/arrow-back.svg) no-repeat 0 50%; opacity:.6;
							transition:opacity .2s; cursor:pointer; display:inline-block; }
#post .back:hover		{ opacity:1; }
#post header			{ margin-bottom:20px; border-bottom:1px solid #ccc; }							
#post h1				{ font-size:1.25em; line-height:1.28em; margin-bottom:.6em; }
#post .date				{ margin-bottom:20px; color:#666; }
#post .share			{ position:absolute; right:0; top:70px; }
#post .share .jssocials-share-link { border-radius:50%; font-size:10px; }
#post .images			{ position:relative; margin-bottom:30px; min-height:60px; }
#post .carousel			{ width:100%; background:rgba(0,0,0,.2); } 
#post .carousel-cell	{ width:100%; text-align:center; position:relative; }
#post .carousel-cell img			{ width:100%; display:block; }
#post .carousel-cell img.portrait	{ width:50%; margin:auto; }
#post .carousel-cell .play-video	{ position:absolute; left:50%; top:50%; width:60px; height:60px; transform:translate(-50%, -50%); 
									background:url(../image/play.svg) no-repeat 50% 50%; background-size:100% 100%; border-radius:50%; }
#post .flickity-viewport { transition: height 0.2s; }

#detail .nav			{ position:absolute; top:0; right:0; height:60px; }
#post .nav .prev,
#post .nav .next		{ position:absolute; top:50%; height:60px; width:60px; text-align:center; cursor:pointer; line-height:60px; color:#fff; 
							background:none; font-size:32px; transform:translateY(-50%); transition:opacity .2s; z-index:999; opacity:.5; }
#post .nav .prev:hover,
#post .nav .next:hover	{ opacity:1; }							
#post .nav .prev		{ left:0; }							
#post .nav .next		{ right:0; }							
#post .desc				{ line-height:1.5em; color:#666; }
#post .share .jssocials-share-link { border:none; font-size:11px; margin-left:20px; padding:0; }

#post .download			{ margin-top:40px; margin-bottom:10px; }
#post .download .label	{ font-size:1.2em; margin-bottom:1.5em; }
#post .download li		{ margin-bottom:8px; color:#666; }
#post .download li i	{ margin-right:6px; }
#post .keywords			{ border-top:1px solid #ccc; padding-top:15px; margin-top:30px; }
#post .keywords li		{ border-radius:5px; background:#ccc; color:#333; border:none; display:inline-block; margin-right:.4em; 
							font-size:.98em; padding:.7em .8em .8em .8em; transition:all .2s; }
#post .keywords li:hover{ background:#666; color:#fff; }


#post .related					{ background:#fff; }
#post .related h2				{ text-align:center; font-size:1.4em; padding-top:60px; margin-bottom:50px; }
#post .related ul				{ padding:0 0 50px 0; overflow:hidden; zoom:1; max-width:1150px; }
#post .related li				{ float:left; width:21.25%; margin-right:5%; }
#post .related li:nth-child(4n) { margin-right:0; }
#post .related .thumb			{ width:100%; margin-bottom:15px; overflow:hidden; position:relative; }
#post .related img				{ width:100%; display:block; transition:transform .5s; }
#post .related .date			{ font-size:.96em; color:#666; letter-spacing:.05em; margin-bottom:8px;}
#post .related .title			{ font-size:1.12em; line-height:1.33em;  }
#post .related .desc			{ margin-top:15px; color:#666; line-height:1.5em; }
#post .related .external-link 	{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; cursor:pointer;  
									background:url(../image/link.svg) no-repeat 50% 50%; background-size:100%; opacity:0; transition:all .5s; }
#post .related .thumb:hover .external-link 	{ opacity:.8; }
#post .related .thumb:hover img				{ transform:scale(1.2,1.2); }


/** about.php **/
#people-list-wrapper h2			{ text-align:center; font-size:1.5em; padding:70px 0; letter-spacing:.02em; }
#people-list					{ padding:0 0 40px 0; overflow:hidden; zoom:1; }
#people-list li					{ float:left; width:22%; margin-right:4%; margin-bottom:30px; }
#people-list li:nth-child(4n) 	{ margin-right:0; }
#people-list .thumb				{ width:100%; margin-bottom:10px; }
#people-list img				{ width:100%; display:block; }
#people-list .name				{ font-size:1.15em; line-height:1.2em; display:inline-block; }
#people-list .position			{ color:#666; display:inline-block; margin-left:8px; }
#people-list .position:before	{ content:"/"; margin-right:8px; }
#people-list .desc				{ line-height:1.5em; color:#666; }


/** careers.php **/
#job-list						{ border-bottom:1px solid #ddd; margin-bottom:40px;}
#job-list .title				{ border-top:1px solid #ddd; padding:.8em .4em; font-size:1.15em; cursor:pointer; position:relative; }
#job-list .title i				{ position:absolute; right:.5em; top:50%; font-size:1.1em; transform:translateY(-50%); 
									transform-origin:50% 50%; transition:all .4s; color:#aaa; }
#job-list .title:hover i		{ color:#333; }
#job-list .description			{ border-top:1px solid #ddd; padding:40px 1em 10px 1em; display:none; }
#job-list h3					{ font-weight:bold; margin-bottom:1em; font-size:1.05em; }
#job-list .desc					{ margin-bottom:40px; }
#job-list li.open .description	{ display:block; }
#job-list li.open .title i		{ transform:translateY(-50%) rotate(45deg); }


/** contact.php **/
#contact						{ background:#f2f2f2; overflow:hidden; zoom:1; }
#contact-info					{ width:48%; float:left; padding:70px 0;  }
#contact-info h2				{ font-size:1.33em; margin-bottom:3em; }
#contact-info address			{ color:#666; margin-bottom:1.2em; font-size:1.1em;  }
#contact-info address a			{ line-height:1.2em; display:inline-block; vertical-align:middle; }
#contact-info p					{ color:#666; margin-bottom:1.2em; font-size:1.1em; }
#contact-info i					{ color:#000; margin-right:15px; display:inline-block; vertical-align:middle; }
#contact-form					{ margin-left:52%; padding:70px 0;  }
#contact-form p					{ margin-bottom:12px; }
#contact-form p.result			{ line-height:1.5em; }
#contact-form input,
#contact-form textarea			{ border:1px solid #ccc; background:#fff; border-radius:4px; width:100%; padding:.8em; outline:none; 
									font-size:1.05em; font-family:inherit; }
#contact-form textarea			{ height:180px; }
#contact-form [type="submit"]	{ background:#000; color:#fff; transition:all .3s; cursor:pointer; padding:.6em 0; }
#contact-form [type="submit"]:hover	{ background:#333; }
#contact-form .error			{ display:block; margin-top:5px; padding-right:3px; color:#c00; text-align:right; }

#map							{ height:400px; background:url(../image/map2.png) no-repeat 50% 50%; background-size:cover; position:relative; }
#map img						{ display:block; width:54px; position:absolute; left:50%; top:50%; transform:translate(-50%, -100%); }


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

/* for 1600px or less */ 
@media screen and (max-width: 1600px) {
#news-list						{ margin-right:312px; }
#social-feeds					{ width:260px; }
#award-list .info				{ padding:15px 15px; }
#award-list .award-project		{ padding:20px 15px; }
#award-list .award-title		{ font-size:1.2em; }
}

/* for 1440px or less */ 
@media screen and (max-width: 1440px) {
#works-list .grid-item	{ width:33.2%; }
#works-list .grid-sizer	{ width:33.2%; }
#works-list .gutter-sizer	{ width:.2%; }

#people-list-wrapper h2			{ padding:60px 0; }

#award-list .info				{ height: 120px; }
}


/* for 1280px or less */ 
@media screen and (max-width: 1280px) {
#news-list		{ margin-right:298px; }
#social-feeds	{ width:260px; }
#news-list .grid-item,
#news-list .grid-sizer		{ width:47.5%; }
#news-list .gutter-sizer 	{ width:5%; }
#news-list .grid-item		{ margin-bottom:2.5%; }

#award-list .grid-item		{ margin-bottom:2.5%; }
#award-list .award-title	{ font-size:1.1em; }

#people-list li					{ width:30.66666666666667%; margin-right:4%; }
#people-list li:nth-child(4n) 	{ margin-right:4%; }
#people-list li:nth-child(3n) 	{ margin-right:0; }

}


/* for 1024px or less */ 
@media screen and (max-width: 1024px) {
	
.mobile-element { display:block; }
body.no-scroll	{ overflow:auto; width:auto; height:auto; }
body.no-scroll #main-wrapper { padding-top:0; }

.inner			{ width:92%; }

#header-wrapper			{ height:60px; padding-top:12px; }
#header-wrapper.headroom--unpinned	{ top:-60px; }
#header-inner #logo		{ height:36px; }
#header-inner h1		{ height:36px; width:93px; }

#header-inner nav		{ position:fixed; right:-280px; top:0; transform:none; width:270px; height:100%; background:#fff; transition:right .3s;
							z-index:1001; box-shadow:0 0 2px rgba(0,0,0,.2); }
#header-inner nav ul	{ right:0; top:46%; left:0; transform:translateY(-50%); text-align:center; }
#header-inner nav li	{ display:block; margin:1.6em 0; }
#header-inner nav li a	{ font-size:1.2em; color:#222; }
#header-wrapper .mask	{ position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.1); opacity:0; visibility:hidden;
							transition:opacity .2s; }
#header-wrapper.nav-show nav	{ right:0; }
#header-wrapper.nav-show .mask  { visibility:visible; opacity:1; }

#header-inner #links	{ right:0; left:0; top:auto; bottom:6%; transform:none; text-align:center; }	
#header-inner .close	{ position:absolute; right:20px; top:17px; font-size:2.2em; color:#666; cursor:pointer; }

#menu-button			{ font-size:1.8em; color:#439ca3; cursor:pointer; float:right; margin:3px 2px 0 0; }

#main-wrapper 			{ padding-top:60px; }
.banner					{ height:360px; }
section					{ padding:20px 0; }
section h2				{ width:auto; float:none; font-size:1.25em; margin-bottom:1em; }
section .content		{ margin-left:0; }


#hero					{ width:100%; }
#headline-news			{ display:none; }	


.filter-labels			{ height:42px; padding:7px 0 0 0; }
.filter-labels:after 	{ content: 'flickity'; display: none; }
.filter-labels .label	{ margin:0; padding:6px 4%; }
.filter-options			{ top:42px; right:0; transition:all .15s; }
.filter-options.show	{ height:auto; opacity:1; }
.filter-options ul		{ height:auto; padding:8px 0 !important; }								
.filter-options li		{ display:inline-block; margin:3px 6px; text-align:center; }

#works-list	.info span	{ font-size:.98em; opacity:.8; }

#detail					{ /*position:static;*/  overflow-y: scroll; -webkit-overflow-scrolling: touch; }
#detail	.info			{ width:100%; float:none; padding:20px 20px 40px 20px; max-height:none; }
#detail	.info .back		{ margin-bottom:50px; }							
#detail	.info h1,
#detail	.info .desc,
#detail	.info .share	{ }
#detail	.info .share	{ position:static; margin-top:30px; }
#detail	.info.scroll	{ max-height:none; }

#detail .images			{ margin-left:0; width:100%; height:auto; }
#detail .carousel		{ width:100%; height:auto; }
#detail .carousel:after { content: ''; }
#detail .carousel-cell	{ width:100%; height:auto; margin-bottom:2px; }
#detail .carousel-cell:last-child { margin-bottom:0; }
#detail .carousel-cell img	{ width:100%; height:auto; opacity:1; }
#detail .carousel-cell .image-desc { opacity: 1;}
#detail .nav			{ display:none; }


#news-header			{ margin:40px auto 20px auto; }

#news-list				{ width:100%; float:none; }
#news-list.wide			{ width:100%; }

#news-list .grid-item,
#news-list .grid-sizer		{ width:32%; }
#news-list .gutter-sizer 	{ width:2%; }
#news-list .grid-item		{ margin-bottom:2%; }

#award-header			{ margin:40px auto 20px auto; }

#award-list					{ width:100%; float:none; }
#award-list.wide			{ width:100%; }

#award-list .grid-item,
#award-list .grid-sizer		{ width:47.5%; }
#award-list .gutter-sizer 	{ width:5%; }
#award-list .grid-item		{ margin-bottom:2%; }
#award-list .info			{ height: 110px; }

#social-feeds			{ width:100%; float:none; margin-top:0; margin-bottom:33px; padding-bottom:30px; border-bottom:1px solid #ddd; }


#post article			{ padding:50px 0;  position:relative; }
#post .share			{ position:static; margin-bottom:20px; }
#post .share .jssocials-share-link { margin-right:20px; margin-left:0; }
#post .related h2		{ padding-top:50px; margin-bottom:40px; }

#map					{ height:360px; }
#contact-info,
#contact-form			{ padding:60px 0;  }
}

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

section.first			{ padding-top:50px; }
section.last			{ padding-bottom:50px; }

#cover img				{ width:125px; }
#cover p				{ transform:translate(-50%,-50%); }

#works-list					{ width:92%; }
#works-list .grid-item		{ width:49.7%; }
#works-list .grid-sizer		{ width:49.7%; }
#works-list .gutter-sizer	{ width:.6%; }

#news-list .grid-item,
#news-list .grid-sizer		{ width:49%; }
#news-list .gutter-sizer 	{ width:2%; }
#news-list .grid-item		{ margin-bottom:2%; }

#award-list .grid-item,
#award-list .grid-sizer		{ width:49%; }
#award-list .gutter-sizer 	{ width:2%; }
#award-list .grid-item		{ margin-bottom:2%; }

#post .related li				{ width:30%; }
#post .related li:nth-child(3n) { margin-right:0; }
#post .related li:nth-child(4n) { display:none; }

#people-list-wrapper h2			{ padding:50px 0; }
#people-list li					{ width:48%; margin-right:4%; }
#people-list li:nth-child(4n) 	{ margin-right:4%; }
#people-list li:nth-child(3n) 	{ margin-right:4%; }
#people-list li:nth-child(2n) 	{ margin-right:0; }

#contact-info h2		{ margin-bottom:1.8em; }
#contact-info			{ width:100%; float:none; padding:50px 0 20px 0;  }
#contact-form			{ margin-left:0; padding:40px 0;  }
}

/* for 600px or less */ 
@media screen and (max-width: 600px) {
	
#header-wrapper					{ padding-top:14px; }
#header-inner #logo				{ width:32px; margin-top:-2px; }
#header-inner h1				{ height:32px; width:98px; margin-left:0; }

.banner							{ height:320px; }
section.first					{ padding-top:40px; }
section.last					{ padding-bottom:40px; }

#hero-slider .item a			{ left:25px; bottom:25px; }
#hero-dots						{ right:25px; bottom:27px; }

#works-list .grid-item		{ width:100%; margin-bottom:2%; }
#works-list .grid-sizer		{ width:100%; }
#works-list .gutter-sizer	{ width:0; }
#works-list	.info			{ min-height: 0;}

#news-header form				{ display:none; }
#news-list .grid-item,
#news-list .grid-sizer			{ width:100%; }
#news-list .gutter-sizer 		{ width:0; }
#news-list .grid-item			{ margin-bottom:4%; }

#award-header form				{ display:none; }
#award-list .grid-item,
#award-list .grid-sizer			{ width:100%; }
#award-list .gutter-sizer 		{ width:0; }
#award-list .grid-item			{ margin-bottom:4%; }
#award-list .info				{ height: auto; }

#post article					{ padding:25px 0 40px 0; }
#post .related h2				{ padding-top:40px; margin-bottom:30px; }
#post .related ul				{ padding:0 0 40px 0; }
#post .related li				{ width:47.5%; }
#post .related li:nth-child(2n) { margin-right:0; }
#post .related li:nth-child(3n) { display:none; }
#post .related .title			{ font-size:1.05em; }

#people-list-wrapper h2			{ padding:40px 0; }
#people-list					{ padding:0 0 20px 0; }
#people-list li					{ width:100%; margin-right:0%; margin-bottom:20px; }
#people-list li:nth-child(4n) 	{ margin-right:0; }
#people-list li:nth-child(3n) 	{ margin-right:0; }
#people-list li:nth-child(2n) 	{ margin-right:0; }

#map							{ height:320px; }
#contact-info					{ padding:40px 0 0 0;  }
}

/* for 480px or less */ 
@media screen and (max-width: 480px) {
	
#cover p				{ letter-spacing:0; }
#hero-slider .item a	{ font-size:1.25em; }
				
#post .related li				{ width:100%; margin-right:0; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #e5e5e5; }
#post .related li:nth-child(2n) { width:100%; margin-right:0; margin-bottom:0; border-bottom:none; }
#post .related li:nth-child(3n) { display:none; }

#award-list .info				{ padding:15px 15px; }
#award-list .award-project		{ padding:15px 15px; }
#award-list .award-project span { font-size: 1.1em;}

}