@charset "utf-8";
	
	html,body{
		height: 100%;
	}
	body{
		overflow:hidden;
	}
	#main_left {
		float: left;
		height: 100%;
		width: 160px;
		min-height:200px;
		position: fixed;
		left: 0px;
		top: 0px;
		z-index: 9999;
	}
	#main_left_box {
		position: relative;
		margin-top: 0px;
		height: 100%;
		width: 100%;
		min-height:500px;
		background-color: #FFF;
	}
	.right_layout{
		position: relative;
		height: 100%;
		width: 100%;
		padding-top: 0px;
		padding-right: 160px;
		margin-top:0px;
		margin-left:160px;
	}
	#right_layoutin{
		position: relative;
		height: 100%;
		width: 100%;
		margin:0px;
		overflow-x:hidden;
		background-color: #FFF;
		-webkit-overflow-scrolling: touch;
	}
	.container{
		width: 100%;
		height: 100%;
	}

	#header {
		height:160px;
		margin-left: -15px;
	}
	#header_m {
		margin-top:0px;
		height:60px;
	}
	a#slider-icon{
		background-image: url(images/button_menu.png);
		background-repeat: no-repeat;
		height: 36px;
		width: 36px;
		margin-top: 60px;
		margin-right: auto;
		margin-left: auto;
		position: relative;
		display: block;
		text-decoration: none;
		cursor: pointer; 
		cursor: hand;
	}	

	a#slider-icon.slideopen {
		-moz-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

	.logo-left{
		text-align: center;
	}
	.logo-left p{
		margin-top: 60px;
	}
	ul.worklist{
		position: relative;
		list-style:none;
		padding: 0;
		margin: 0;
	}
	ul.worklist li{
		position: relative;
		padding: 0;
		margin: 0;
	}
	ul.worklist li a{text-decoration: none;}
	ul.worklist li img{
	  display: block;
	  width: 100%;
	  height: auto;
	}
	.pj-over{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #000;
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size: 14px;
		line-height: 22px;
		color: #FFF;
		letter-spacing: 3px;
		text-align: center;
		padding-top: 40%;
		filter:alpha(opacity=0);
		-moz-opacity:0;
		opacity: 0;
		text-decoration: none;
	}
	.pj-small{
		font-size: 10px;
		line-height: 15px;
		letter-spacing: 0px;
		color: #666;
	}
	/*
	ul.worklist li:hover .pj-over{
		display: block;
		text-decoration: none;
	}
	*/
	.pj-kind{
		position: absolute;
		right:0px;
		top:0px;
	}

	#menu_box{
		position: fixed;
		width: auto;
		top:0px;
		left:0px;
		margin-left: 160px;
		min-height: 300px;
		display: none;
		background-color: #FFF;
	}
	.menufloat{
		position: relative;
		float: left !important;
	}
	#mask_box{
		position: fixed;
		width: 100%;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		right:auto;
		top:0;
		background-color: #FFF;
		filter:alpha(opacity=90);
		-moz-opacity:0.9;
		opacity: 0.9;
		z-index: 999;
		display: none;
		overflow: auto;
	}
	#btn-search {
		background-color: #FFF;
		text-align: center;
		height: 30px;
		width: auto;
		padding: 5px;
		border-top-style: none;
		border-right-style: none;
		border-bottom-style: none;
		border-left-style: none;
	}
	#search-box{
		position: absolute;
		width: 70%;
		height: auto;
		top:160px;
		left:220px;
		font-family: "微軟正黑體", "Microsoft JhengHei", Verdana,Arial, sans-serif;
		line-height: 14px;
		color: #666;
		font-size: 12px;
		text-decoration: none;
		overflow:auto;
	}
	#search-box p{
		margin-left: 0px;
	}
	input#search-q{
		position: relative;
		width: 100%;
		height: auto;
		font-family: "微軟正黑體", "Microsoft JhengHei", Verdana,Arial, sans-serif;
		line-height: 120px;
		color: #1a1a1a;
		font-size: 120px;
		text-decoration: none;
		border-top-style: none;
		border-right-style: none;
		border-bottom-style: none;
		border-left-style: none;
		background-color: Transparent;
	}
	.search-list{}
	.search-list a{
		display: block;
		width: auto;
		height: auto;
		font-family: "微軟正黑體", "Microsoft JhengHei", Verdana,Arial, sans-serif;
		line-height: 28px;
		color: #1a1a1a;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
	}
	.main-top-box{
		position: fixed;
		width: 100%;
		height:60px;
		text-align: center;
		top:0;
		left:0;
		background-color: #FFF;
		z-index: 9999;
	}
	.footer-copy{
		position: absolute;
		font-size: 12px;
		line-height: 16px;
		left: 18px;
		bottom: 80px;
	}
	#lastPostsLoader{
		width:100%;
		height:auto;
		text-align: center;
	}

	/*開合選單*/
	.menu_box_top{
		position: relative;
		height: 160px;
		width: 100%;
		margin:0px;
		padding-right: 20px;
		overflow-x:hidden;
		overflow-y:auto;

	}
	ul.mainmenu-link{
	position: relative;
	width: 100%;
	height: auto;
	list-style:none;
	margin-top: 50px;
	margin-left: 20px;
	margin-right: 10px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	overflow: hidden;
	}
	ul.mainmenu-link li{
		position: relative;
		float: left;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		line-height: 26px;
	}
	ul.mainmenu-link li a{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		line-height: 26px;
		color: #1a1a1a;
		font-size: 15px;
		word-wrap:break-word;
		text-decoration: none;
	}
	ul.mainmenu-link li a:hover{
		color: #1a1a1a;
		text-decoration: underline;
	}
	
	.childmenu-link-out{
	position: fixed;
	margin-top:26px;
	left:180px;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
	display: none;
	z-index: 9999;
	}
	
	ol.childmenu-link{
	list-style:none;
	position: absolute;
	top:-8px;
	left:0px;
	width: 100%;
	height: auto;
	background-color: #FFF;
	z-index: 9999;
	margin: 0px;
	padding: 0px;
	}
	
	ol.childmenu-link li{
		position: relative;
		width: auto;
		height: auto;
		margin: 0;
		padding-right: 3px;
		line-height: 26px;
		float: left;
	}
	ol.childmenu-link li a{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		line-height: 26px;
		color: #999;
		font-size: 15px;
		word-wrap:break-word;
		text-decoration: none;
		font-weight: normal;
	}
	ol.childmenu-link li a:hover{
		text-decoration: underline;
	}
	/*xs size*/
	ul.mainmenu-xs-link{
		position: relative;
		width: 100%;
		height: auto;
		list-style:none;
		margin-top: 50px;
		margin-left: 0px;
		margin-right: 10px;
		padding-top: 0px;
		padding-left: 0px;
		padding-left: 20px;
		padding-right: 20px;
	}
	ul.mainmenu-xs-link li{
		position: relative;
		width: auto;
		height: auto;
		margin: 0;
		line-height: 28px;
	}
	ul.mainmenu-xs-link li a{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		line-height: 28px;
		color: #1a1a1a;
		font-size: 15px;
		word-wrap:break-word;
		text-decoration: none;
	}
	ul.mainmenu-xs-link li a:hover{
		color: #999;
		text-decoration: underline;
	}
	
	ol.childmenu-xs-link{
		list-style:none;
		position: relative;
		margin-top:28px;
		width: auto;
		height: auto;
		margin: 0px;
		padding: 0px;
		padding-left: 10px;
		background-color: #FFF;
		z-index: 9999;
	}
	ol.childmenu-xs-link li{
		position: relative;
		width: auto;
		height: auto;
		margin: 0;
		padding-right: 3px;
		line-height: 28px;
	}
	ol.childmenu-xs-link li a{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		line-height: 28px;
		color: #666666;
		font-size: 15px;
		word-wrap:break-word;
		text-decoration: none;
		font-weight: normal;
	}
	ol.childmenu-xs-link li a:hover{
		text-decoration: underline;
	}


	.mainmenu-content{
		position: relative;
		width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: 20px;
		margin-right: 10px;
		padding-left: 0px;
		padding-right: 30px;
	}

	/*list.php project list square*/
	.pj-mainkind{
		position: absolute;
		width: 100%;
		height:100%;
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size: 14px;
		line-height: 15px;
		color: #FFF;
		letter-spacing: 3px;
		text-align: center;
		padding-top: 45%;
		text-decoration: none;
	}
	.pj-QuareBgcolor1{
		background-color: #1a1a1a;
	}
	.pj-QuareBgcolor2{
		background-color: #000;
	}
	.pj-QuareBgcolor3{
		background-color: #FFF;
		color: #1a1a1a;
	}
	/*Flat list*/
	.flatlist{
		position: relative;
		width: 100%;
		height: auto;
		padding: 0px;
		margin: 0px;
		margin-top: -4px;
	}
	.flatlist ul,.flatlist ul.row{
		position: relative;
		list-style:none;
		padding: 0px;
		margin: 0px;
		height:154px;
		margin-top: 4px;
		margin-bottom: 4px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCC;
		margin-left: -15px;
		margin-right: -15px;
	}
	.flatlist ul.row li{
		position: relative;
		padding: 0px;
		margin: 0px;
		height: 150px;
	}
	.flatlist ul.row li a{
		text-decoration: none;
	}

	.flatlist ul.row li .pj-flatimg{
	  width: 100%;
	  height: 150px;
	  overflow:hidden;
	}
	.flatlist ul.row li .pj-flatimg img{
	  width: 100%;
	  height: auto;
	  margin-top: -30%;
	}

	.pj-flatlist-over{
		position: absolute;
		width: 100%;
		height: 150px;
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size: 14px;
		line-height: 22px;
		color: #FFF;
		letter-spacing: 3px;
		text-align: center;
		padding-top: 40px;
		text-decoration: none;
		background-color: #1a1a1a;
		display: none;

	}

	.pj-flatlist-title{
		width: 100%;
		height: 150px;
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size: 14px;
		line-height: 15px;
		color: #1a1a1a;
		letter-spacing: 3px;
		text-align: left;
		padding-top: 40px;
		padding-left: 50px;
		text-decoration: none;
		/*text-shadow: 2px 2px 0px #D3D3D3;*/
	}
	.flatlist ul.row li:hover .pj-flatlist-title{
		color: #666666;
	}
	.pj-flatlist-small{
		font-size: 10px;
		line-height: 15px;
		letter-spacing: 0px;
		color: #666;
	}

	.pj-flatkind{
		position: relative;
		width: 100%;
		height:150px;
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		font-size: 14px;
		line-height: 15px;
		color: #FFF;
		letter-spacing: 3px;
		text-align: center;
		padding-top: 70px;
		text-decoration: none;
		padding-bottom: 4px;
	}

/*Project page*/

	.project-out{
		margin-bottom:30px;
		margin-right: -15px;
		margin-left: -15px;
	}
	.project-out .row{
		margin-right: 1%;
		margin-left: 1%;
		margin-bottom:30px;
	}
	.project-out .row.fullwidth{
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom:50px;
	}
	.row.topnextbtn{
		/*
		position: fixed;
		top:0px;
		width: 100%;
		z-index: 9999;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCC;
		*/
		margin: 0px;
		height: 40px;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #CCC;
		background-color: #FFF;
	}
	.row.topnextbtn a{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		line-height: 40px;
		color: #888;
		font-size: 14px;
		text-decoration: none;
	}
	.row.topnextbtn a:hover{
		color: #000;
	}	
	.project-fullwidth{
		position: relative;
		width: 100%;
		height: auto;
		padding:0px;
	}
	.project-line{
	    height: 50px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCC;
	}

	.project-out .row img{
		position: relative;
		width: 100%;
		height: auto;
	}

	#project-dtmask{
		
		background-color: #000;
		filter:alpha(opacity=50);
		-moz-opacity:0.5;
		opacity: 0.5;
	}

	.project_textbox,.project_textbox p{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		line-height: 28px;
		color: #999;
		font-size: 14px;
		text-decoration: none;
	}

	.project_textbox strong{
		color: #1a1a1a;
	}

	.img-norespon{
		overflow:hidden;
	}
	.img-norespon img{
		width: auto !important;
		max-width: 100%;
		height: auto;
	}
	.method_btn{
		display: none;
	}
	/*youtube responsive*/
	.video-container {
	    position: relative;
	    padding-bottom: 56.25%;
	    padding-top: 30px; height: 0; overflow: hidden;
	}
	 
	.video-container iframe,
	.video-container object,
	.video-container embed {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}

	.project-tools-btn{
		margin-top: 30px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 24px;
		color: #1a1a1a;
	}
	.project-tools-btn a{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 24px;
		color: #1a1a1a;
	}
	.project-sharebar{
		position: absolute;
	    top: 28px;
	    left: 0px;
	    width: 65px;
	    height: 230px;
	    background-color: #000;
	    z-index: 999;
	    padding-top: 15px;
	    display: none;
	}
	.project-sharebar a{
		position: relative;
	    width: 36px;
	    height: 36px;
	    text-decoration: none;
	}
	.project-sharebar a:hover{text-decoration: none;}
	.project-sharebar a img{
	    width: 36px !important;
	    height: 36px !important;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.project-sharebtn{
		display: inline-block;
		margin-left: -5px;
	}	
	#project-opening{
		position: relative;
		width: 100%;
		z-index: 99;
	}
	.project-opening-box{
		position: absolute;
		width: 100%;
		height: auto;
		color: #FFF;
		background-color: #000;
		filter:alpha(opacity=90);
		-moz-opacity:0.9;
		opacity: 0.9;
		padding-top: 15px;
		padding-bottom: 15px;
		top:1px;
		left:0px;
	}
	.project-opening-title{
		font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		margin-top: 80px;
	}
	.project-opening-title2{
			font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
			font-size: 40px;
			line-height: 70px;
			color: #1a1a1a;
	}	
	.project-opening-scroll{
		margin-top: 80px;
	}


	/* About */
	.h1-text{
			font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
			font-size: 40px;
			line-height: 46px;
			color: #1a1a1a;
			letter-spacing: 3px;
			font-weight: lighter;
	}
	.h3-text{
			font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
			font-size: 24px;
			line-height: 26px;
			color: #1a1a1a;
			letter-spacing: 3px;
			font-weight: lighter;
	}

	.about-over{
		background-color: #FFF;
		color: #1a1a1a;
	}


	.dep-summary{
	font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 24px;
	text-decoration: none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	margin: 0px;
	padding-right: 0px;
	padding-left: 0px;
	color: #1a1a1a;
	}
	.dep-summary a{
		text-decoration: none;
	}
	
	.hidden{
	display: none;
}
	.point-icon{
	background-image: url(images/point_icon.png);
	background-repeat: no-repeat;
	background-position: center center;
	width: 20px;
	height: 16px;
	display: inline-block;
	}
	
	.vertical-icon{
	width: 20px;
	height: 28px;
	display: inline-block;
	margin-top: 0px;
	}	
	
	

	@media (max-width: 767px) {
		/*Flat list*/
		.flatlist ul,.flatlist ul.row{
			height:auto;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-width: 0px;
			border-bottom-style: solid;
			border-bottom-color: #CCC;
		}	
		.flatlist ul.row li:hover .pj-flatlist-over{
			width: 100%;
			height:100%;
			display: block;
		}
		.flatlist ul.row li,.flatlist ul.row li .pj-flatimg{
			height:100%;
		}	
		.pj-flatlist-over{
			height:100%;
			padding-top: 40%;
		}
		.flatlist ul.row li .pj-flatimg img{
			width: 100%;
			height:auto;
			margin-top: 0px;
		}
		.pj-flatkind{
			position: absolute;
			width: 100%;
			height:100%;
			padding-top: 40%;
		}

		/*home page*/
		#mask_box{
			top:60px;
		}
		#xsmenu_box{
			position: fixed;
			width: 100%;
			min-width: 100%;
			height:100%;
			min-height:100%;
			text-align: left;
			top:60px;
			left:0;
			background-color: #FFF;
			z-index: 9900;
			overflow-x:hidden;
			overflow-y:auto;
			display: none;
		}
	    #search-box{
		    width: 85%;
		    left:20px;
		    top:30px;
	    }
		#search-box p{
			margin-left: 10px;
		}
		input#search-q{
		line-height: 90px;
		font-size: 90px;
		}
		a#slider-icon{
			position: absolute;
			background-image: url(images/button_menu.png);
			background-repeat: no-repeat;
			height: 36px;
			width: 36px;
			top: 15px;
			left: 20px;
			margin: 0;
			display: block;
			text-decoration: none;
			cursor: pointer; 
			cursor: hand;
			z-index: 999;
		}	
		.logo-left{
			position: relative;
			margin-top:20px;
		}
		.logo-left p{
			display: inline;
		}
		#btn-search {
			position: absolute;
			background-color: #FFF;
			text-align: center;
			height: 30px;
			width: auto;
			top:18px;
			right: 10px;
			border-top-style: none;
			border-right-style: none;
			border-bottom-style: none;
			border-left-style: none;
		}
		.footer-copyxs{
			font-size: 12px;
			height: 25px;
			line-height: 25px;
			z-index: 999;
		}


		.project-margin-xs{
			margin-top: 30px;
		}
		.dep-summary{
			padding-top: 20px;
			padding-bottom: 20px;
			line-height: 24px;
			text-decoration: none;
			border-top-width: 2px;
			border-top-style: solid;
			border-top-color: #000;
			margin: 0px;
			padding-right: 10px;
			padding-left: 10px;
		}

	}