/**
 * 	main.css
 *  Process header and footer style.
 *
 *  black: #231F20
 *  gray:  #C6C8CA
 *
 */
body{
	text-align: left;
	font-family:"EB Garamond","wcl-06",sans-serif;
	touch-action: manipulation!important;
}
h1{ font-size: 26px; padding: 5px 0; }
h2{ font-size: 19px; }
h3{ font-size: 12px; }
h4{ font-size: 10px; }
p{ font-size: 13pt;}
strong{ font-weight: bold; }
.news-content div,
.news-content div span{
	font-family:"EB Garamond","wcl-06",sans-serif !important;
	font-size: 13pt!important;
}

/*@media (orientation: portrait) {
  body {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}*/
/**
 * 	base style setting
 */
#container-outer{
	width: 980px;
	padding: 0 4px;
	margin: 0 auto;
	border-right: 1px solid #666;
	border-left: 1px solid #666;
}
#container{
	/*padding: 5px;*/
	width: 974px;
	border-right: 1px solid #666;
	border-left: 1px solid #666;
	padding: 5px 0 0 0;
	margin: 0 auto;
}
#container.has-top-slider{
	padding: 0;
}
#slide-top{
	/*display: none;*/
	/*width: 624px; */
	width: 974px;
	/*height: 241px; */
	/*height: 376px; */
	height: auto;
	margin-bottom: 5px;
	/*background-color: blue;*/
	/*overflow: hidden;*/
}
#footer{
	clear: both;
}
.first-show{
	display: none;
}
.image-show{
	display: none;
}
#header{
	float: none;
	height: 80px;
	/*background: #ff0000;*/
	padding: 0 0 0 21px;
	border-top: 1px solid #231F20;
	border-bottom: 1px solid #231F20;
	margin: 0 0 5px 0;
	background: #fff;
	width: 953px;
}
.fixed #header,
#container:not(.has-top-slider) #header{
	position: fixed;
	top: 5px;
	z-index: 100;
}
.fixed #content{
	padding: 100px 0 0 0;
}
#content{
	/*margin: 16px 0 0; */
	padding: 0;
	min-height: 768px;
	min-height: 100vh;
}
.container-works #content,
#project-container #content{
	padding: 88px 0 0 0;
}

.home-content, .about-content, .contact-content{
	padding: 25px 21px 0 21px;
}
/**
 *  header style
 *
 */
#title-img{
	width: 224px;
}
.menu-en {
	display: none;
	position: absolute;
	width: 76px;
	height: 30px;
	right: 86px;
	/*background: url(../img/menu_bg_left_en.png) no-repeat;*/
	/*background-size: 76px auto;*/
	color: transparent;
}
@media only screen and (min-width: 1537px) {
	.menu-en {
		background: url(../img/menu_bg_left_n.svg) no-repeat;
		background-size: 76px auto;
	}
	#menu-home-en {
		background-position: 0px 0px;
	}
	#menu-work-en {
		background-position:  0px -74px;
	}
	#menu-media-en {
		background-position: 0px -146px;
	}
	#menu-about-en {
		background-position: 0px -218px;
	}
	#menu-contact-en {
		background-position: 0px -288px;
	}
}
@media only screen and (max-width: 1536px) {
	.menu-en {
		background: url(../img/menu_bg_left_en.png) no-repeat;
		background-size: 76px auto;
	}
	#menu-home-en {
		background-position: 0px 8px;
	}
	#menu-work-en {
		background-position:  0px -66px;
	}
	#menu-media-en {
		background-position: 0px -138px;
	}
	#menu-about-en {
		background-position: 0px -210px;
	}
	#menu-contact-en {
		background-position: 0px -280px;
	}
}

#logo{
	float: left;
	width: 374px;
	padding: 11px 0;
}

#main-menu,
#work-menu{
	width: 489px;
	float: right;
	/*font-size: 22px;*/
	/*float: right;*/
	text-align: right;
	/*display: block;
	position: relative;
	font-family:"Arial","黑體-繁","黑體","Heiti TC","微軟正黑體", "Microsoft JhengHei","MS Sans Serif",sans-serif;*/
}
#work-menu{
	width: 579px;
}
#main-menu ul{
	list-style: none;
	text-align: center;
}
#main-menu li{
	/*line-height: 52px;*/
	position: relative;
	display: inline-block;
	width: 55px;
	height: 54px;
	text-align: center;
	padding: 22px 14px 0 16px;
	margin: 2px 0;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}
#main-menu li.active,
#work-menu li.active{
	border-right: 1px solid #231F20;
	border-left: 1px solid #231F20;
}
#main-menu li.active a{
	height: 60px;
}
#main-menu a{
	background: url(../img/header-main-menu.svg) no-repeat;
	display: block;
	width: 100%;
	height: 30px;
	text-decoration: none;
	color: #000;
	text-align: center;
}
#main-menu a:hover{
	height: 60px;
}
#main-menu a span{
	display: none;
}
#main-menu #menu-home a{
	background-position: 0 0;
}
#main-menu #menu-work a{
	background-position: -90px 0;
}
#main-menu #menu-media a{
	background-position: -180px 0;
}
#main-menu #menu-about a{
	background-position: -272px 0;
}
#main-menu #menu-contact a{
	background-position: -360px 0;
}


#ctkpro{
	text-align: right;
	padding: 0 0 10px 0;
}
#ctkpro a{
	font-size: 12pt;
	color: gray;
	text-decoration: none;
}
/**
 *
 */
#fssList li.fssActive img{
	/*width: 100%;*/
}

/**
 * 	sidebar style
 */
.sidebar{
	width: 232px;
	float: left;
	border-right: 1px solid #231F20;
	min-height: 100vh;
}
body.not-scrollable{
	overflow: hidden;
}
body.has-sidebar #header{
	margin: 0;
	overflow: hidden;
}
body.has-sidebar #content{
	width: 674px;
	float: left;
	padding: 0 21px;
	position: relative;
	border-left: 1px solid #000;
    margin: 0 0 0 -1px;
}
body.has-sidebar #content > ul{
	padding: 20px 0 26px 0;
}
body.has-sidebar #ctkpro{
	position: absolute;
	bottom: 10px;
	right: 0;
}

/**
 * 	news style
 */
.container-news{
	clear: both;
	overflow: hidden;
	padding-top: 82px;
}
.container-news .project > li{
	cursor: pointer;
}
.news-title{
	font-size: 14pt;
	/*width: 741px;*/
	padding: 0 0 10px 0;
	color: #1b1b1b;
	font-weight: bold;
}
.news-subtitle{
	font-size: 12pt;
	color: #1b1b1b;
	/*width: 741px;*/
	/*padding: 0 0 10px 0;*/
}
.news-content{
	font-size: 13pt;
	color: #1b1b1b;
	text-align: justify;
	/*width: 741px;*/
	margin: 22px 0 0 0;
	line-height: 24px;
}
.news-content a{
	color: #1b1b1b;
	text-decoration: none;
	font-size: 13pt;
}
.container-news .news-content a{
	color: blue;
	text-decoration: underline;
}
.home-content .news-content a{
	font-size: 15px;
}
.news-content-border{
	/*width: 741px;*/
	height: 1px;
	margin:30px 0 30px 0;
	/*padding: 10px 0;*/
	border-bottom: 1px dashed #5f5f5f;
}

/**
 * 	media style
 */
.media-content{
	display: none;
}

/**
 * 	about style
 */
.about-content{
	display: none;
}

/**
 * 	contact style
 */
.contact-content{
	display: none;
	clear: both;
}
.contact-image {
	/*float: left;*/
	margin: 0 0 16px 0;
	padding: 0 22px 0 6px;
}
.contact-image img {
	/*height: 222px;*/
	max-width: 646px;
}
.contact-style{
	list-style: none;
  padding: 0 0 32px 0;
}
.contact-style li{
	margin: 0 0 10px 0;
	font-size: 13pt;
}
.contact-style a{
	text-decoration: none;
	color: #000;
}
.contact-style li.contact-title{
	font-size: 14pt;
	font-weight: bold;
}

/**
 * 	header of work page
 */
.work-menu-en {
	display: none;
	position: absolute;
	width: 94px;
	height: 30px;
	right: 86px;
	/*background: url(../img/works_menu_left_n.png) no-repeat;*/
	/*background-size: 94px auto;*/
	color: transparent;
	display: none!important;
}
@media only screen and (min-width: 1537px) {
	.work-menu-en {
		background: url(../img/works_menu_left_n.svg) no-repeat;
		background-size: 94px auto;
	}
}
@media only screen and (max-width: 1536px) {
	.work-menu-en {
		background: url(../img/works_menu_left_n.png) no-repeat;
		background-size: 94px auto;
	}
}
#complete-en {
	background-position: 0px 10px;
	bottom: 4px;
}
@media only screen and (min-width : 768px) and (max-width : 1024px)  {
	#complete-en {
		bottom: 2px;
	}
}
#now-en {
	background-position: 0px -63px;
}
#regret-en {
	background-position: 0px -124px;
}
#consulting-en {
	background-position: 0px -190px;
}
#creation-en {
	background-position: 0px -256px;
}


#work-menu ul{
	list-style: none;
	text-align: center;
}
#work-menu li{
	position: relative;
	display: inline-block;
	height: 54px;
	padding: 23px 0 0 0;
	margin: 2px 0;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
#work-menu a{
	background: url(../img/header-works-menu.svg) no-repeat;
	display: block;
	width: 85px;
	height: 30px;
	text-decoration: none;
	color: #000;
}
#work-menu a:hover,
#work-menu li.active a{
	height: 55px;
}
#work-menu a span{
	display: none;
}
#work-menu #all a{
	background-position: 15px 0px;
}
#work-menu #complete a{
	background-position: -88px 0px;
}
#work-menu #now a{
	background-position: -195px 0px;
}
#work-menu #regret a{
	background-position: -300px 0px;
}
#work-menu #consulting a{
	background-position: -402px 0px;
}
#work-menu #creation a{
	background-position: -505px 0px;
}

/**
 * 	all works left menu
 */


#now a > span{ display: none; }
#regret a > span{ display: none; }
#consulting a > span{ display: none; }
#creation a > span{ display: none; }

/**
 * 	pages/{Category} page base style
 */
.project{
	margin: 0;
	padding: 0;
	width: 100%;
	clear: both;
	overflow: hidden;
	/*min-height: 300px;*/
}
.project-show{
	width: 100%;
	padding: 0 0 8px 0;
}
.project-show img{
	max-width: 100%;
	display: block;
}
.project-show a{
	text-decoration: none;
}
.project-show p{
	text-align:center;
	margin: 10px 0;
	font-size: 14px;
	color: #000;
}
.sidebar .project-image{
	width: 180px;
	height: 180px;
}
.project-image{
	width: 100%;
	height: 300px;
	background-repeat: no-repeat;
	/*background-size: contain;*/
	background-size: cover;
	background-color: #eee;
	background-position: center;
}

.project-content{
	position: relative;
}
.project-description{
	background: #C6C8CA;
	color: #221F1F;
	padding: 8px 18px;
	font-size: 14pt;
}
.project-descr.center{
	text-align: center;
}
.project-photographer{
	position: absolute;
	right: 5px;
	top: -35px;
	background: rgba(255,255,255,0.5);
	text-align: right;
	padding: 5px 10px;
}
.project-photographer p{
	text-align: right;
	font-size: 12pt;
}

.full-img img{
	max-width: 100%;
	display: block;
	margin-bottom: 5px;
}

.youtube-video{
	width: 100%;
	height: 480px;
}

/**
 * 	loading container
 */
.loading-container{
	width: 100%;
	height: 100%;
	display: block;
	background: url('../img/loader.gif') no-repeat center #fff;
	position: fixed;
    z-index: 120;
    background-size: 45px;
}

/**
 * 	justfont 閃爍問題
 */
.jf-loading #container-outer { /*載入中不顯示*/
	opacity: 0;
	visibility: hidden;
}
.jf-active #container-outer { /*如果處理成功，直接顯示*/
	opacity: 1;
	visibility: visible;
}
.jf-inactive #container-outer {/*如果處理失敗，直接顯示*/
	opacity: 1;
	visibility: visible;
}
.jf-active > body, .jf-inactive > body { /*處理成功或失敗，都以漸變顯示*/
	-webkit-transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	transition: opacity .5s ease-out;
}