@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/

@import url("style.css");
/*@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);*/

/*-------------------------------------------- 
	container
---------------------------------------------*/
#container {
	overflow: hidden;
	width: 100%;
	/*padding: 15px 0 0 0;*/
	/*border: 1px solid #F00;*/
}

/*-------------------------------------------- 
	content1
---------------------------------------------*/
#content1 {
	width: 100%;
}



/*-------------------------------------------- 
	content2
---------------------------------------------*/
#content2 {
	overflow: hidden;
	float: left;
	width: 100%;
	background-color: #FFF;
	/*border:1px solid #0F0; */
}



#side1 {
	float: left;
	width: 30%;
	min-height: 500px;
	background: #F2F2F2;
	/*
	background: #D9ECF0;
	background: -webkit-linear-gradient(left, #7EA3BD , #A4C0D5);
	background: -o-linear-gradient(right, #7EA3BD, #A4C0D5);
	background: -moz-linear-gradient(right, #7EA3BD, #A4C0D5);
	background: linear-gradient(to right, #7EA3BD , #A4C0D5);
	*/
}


.tree_gray_green_v {
	width: 200px;
	float: right;
	margin: 16px 30px 0 0;
}
.tree_gray_green_v h3 {
	display:block;
	margin: 43px 0 10px 0;
	/*padding: 0 0 14px 0;*/
	padding: 11px;
	color: #FFF;
	font-size: 130%;
	text-align: center;
	/*text-indent: 22px;*/
	/*background:url(../../../../../cufiles/images/web/layout/home_title_icon.png) 0px 9px no-repeat;*/
	/*border: 1px solid #FFF;*/
	background: -webkit-linear-gradient( #A7A7A7, #828282 ); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient( #A7A7A7, #828282 ); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient( #A7A7A7, #828282 ); /* For Firefox 3.6 to 15 */
	background: linear-gradient( #A7A7A7, #828282 ); /* Standard syntax */
}
.tree_gray_green_v ul {
	width: 200px;
	margin: 0;
	list-style: none;
}
.tree_gray_green_v .mw-nav > li {
	width: 100%;
	margin: 4px 0;
	text-indent: 16px;
	line-height: 40px;
	background: #FFF;
	/*background: #FFF url(../../../../../cufiles/images/web/arrow_143.gif) 10px 18px no-repeat;*/
	border: 1px solid #CCC;
	border-left: 6px solid #A4D8DF;
}
.tree_gray_green_v .mw-nav li a {
 	color:#828282;
 	font-size: 110%;
	border: none;
	background: none;
	/*border:1px solid #F00;*/
}
.tree_gray_green_v .mw-nav li:hover > a {
 	color: #FFF;
 	font-weight: bold;
	background: #A4D8DF;
	/*background: -webkit-linear-gradient(left, #A7A7A7 , #828282);
	background: -o-linear-gradient(right, #A7A7A7, #828282);
	background: -moz-linear-gradient(right, #A7A7A7, #828282);
	background: linear-gradient(to right, #A7A7A7 , #828282);*/
}
.tree_gray_green_v li.action a{
	color: #FFF;
	font-weight:bold;
	background: #A4D8DF;
}
/*submenu*/
.tree_gray_green_v .mw-nav > li > ul.arrow-pad {
	margin-top:-3px;
}

.tree_gray_green_v .mw-nav > li > ul.arrow-pad > li {
	min-width: 120px;
	height:30px;
	margin:0;
	padding:0 0 0 10px;
	background:url(../../../../../cufiles/images/web/arrow_136.gif) 26px 11px no-repeat;
}
.tree_gray_green_v .mw-nav > li > ul.arrow-pad > li > a {
	margin:0;
	padding:0 0 8px 12px;
	line-height:30px;
	font-size:13px;
	text-align: left;
	/*border:1px solid #F00;*/
}
/*hide 3th submenu*/
.tree_gray_green_v .mw-nav > li > ul.arrow-pad > li > ul.arrow-pad {
	display: none;
}



#side2 {
	float: left;
	margin: 0;
	padding: 0;
	width: 70%;
	min-height: 480px;
}


#block1{
	margin: 0 0 0 50px;
	width: 860px;
}


.list_breadcrumb_blue01 {
	overflow: hidden;
	margin: 30px 0 0 0;
	/*background:url(../../../../../cufiles/images/web/layout/inside_r8_c5.jpg) 0 0 no-repeat;*/
}
.list_breadcrumb_blue01 ul {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
}
.list_breadcrumb_blue01 li {
	display: inline-block;
	font-size: 85%;
	/*border:1px solid #0F0; */
}
.list_breadcrumb_blue01 li a {
	/*color: #999;*/
}

.label_menu_title{
	margin: 10px 0;
	padding: 0 0 0 20px;
	border: 1px solid #CCC;
	border-left: 10px solid #A4D8DF;
}



#block2{
	margin: 0 0 0 50px;
	width: 860px;
}

.canvas_post, .canvas_post td {
	margin: 0 20px;
	font-size: 14px;
	color: #666;
	line-height: 20px;
	/*line-height: 18px;*/
	/*border:1px solid #F00;  */
}

.canvas_post h1 {
	/*font-weight: normal;*/
	font-size: 30px;
	line-height: 36px;
	/*color: #8E443F;*/
	border-bottom:2px solid #C4E0EC;
}
.canvas_post h2 {
	/*margin: 10px 0 0 0;*/
	/*font-weight: normal;*/
	font-size: 24px;
	line-height: 28px;
	color: #000;
}
.canvas_post h3 {
	color: #000;
	/*text-align: left;*/
}
.canvas_post h4 {
	margin: 10px 0 0 0;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	/*color: #373737;*/
	text-align: left;
}
.canvas_post p {
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	text-align: left;
}
.canvas_post a {
	/*color: #804000;*/
	text-decoration: none;
}
.canvas_post a:hover {
	text-decoration: underline;
}
/*.canvas_post img {
	margin: 10px 20px 20px 0;
}*/





.list_vert {
	overflow: hidden;
	/*margin: 0 0 0 50px;*/
	width: 860px;
}



.list_gray_light {
	width: 97%;
	margin: 30px 0 30px 10px;
	font-family: Helvetica, Arial, "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
	/*font-family: Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;*/
}
.list_gray_light ul {
	padding: 0;
	margin: 0;
	/*display: block;*/
}
.list_gray_light li {
	overflow: hidden;
	margin: 10px 0 0 0;
	padding: 10px 0;
	list-style:none;
	border-bottom: 1px #EEE solid;
}
.list_gray_light li .post_image {
	float: left;
	width: 140px;
	height: 90px;
	padding: 0;
	margin: 0 20px 0 0;
	border: 1px solid #CCC;
}
.list_gray_light li .post_time {
	font-weight: bold;
	font-size: 90%;
	color: #8D6710;
	/*border:1px solid #F00;*/
}
.list_gray_light li .post_title a {
	padding: 0;
	font-weight: bold;
	line-height: 30px;
	/*border:1px solid #F00;*/
}
.list_gray_light li .post_info {
	font-size: 90%;
	line-height:20px;
	color: #666;
}


/*pagination*/
.list_gray_light .list_pagination div{
	float: left;
	/*margin: 20px 10px 0 0;*/
}
.list_gray_light .list_pagination .page_left_arrow{
	width: 11px;
	height: 14px;
	margin: 20px 10px 0 0;
	background: url(../../../../../cufiles/images/web/layout/frontpage.jpg) no-repeat;
}
/*.list_gray_light .list_pagination .page_left_arrow:hover{
	background: url(../../../../../cufiles/images/web/layout/frontpage_over.jpg) no-repeat;
}*/
.list_gray_light .list_pagination .page_nums{
	margin: 17px 0 0 0;
	font-size: 15px;
	font-weight: bold;
	color: #acacac;
	cursor: pointer;
}
.list_gray_light .list_pagination .page_num{
	margin: 0 10px 0 0;
	/*border: 1px solid #F90;*/
}
.list_gray_light .list_pagination .page_num:hover{
	color: #005d9c;
}
.list_gray_light .list_pagination .page_num.active{
	color: #005d9c;
	/*border: 1px solid #F90;*/
}
.list_gray_light .list_pagination .page_right_arrow{
	width: 11px;
	height: 14px;
	margin: 20px 10px 0 0;
	/*cursor: pointer;*/
	background: url(../../../../../cufiles/images/web/layout/nextpage.jpg) no-repeat;
}
/*.list_gray_light .list_pagination .page_right_arrow:hover{
	background: url(../../../../../cufiles/images/web/layout/nextpage_over.jpg) no-repeat;
}*/








.list_tilelist{
	width: 100%;
	/*padding: 30px 0 0 0;*/
	/*border:1px Solid #F00; */
}

/*.list_tilelist .post_image {
	background-color : #EEE;
	width: 200px;
	height: 200px;
	text-align: center;w


	display: table-cell;
	vertical-align: middle;
	position: static;
	border:1px solid #CCC;
}*/
.list_tilelist .post_title {
	font-size:15px;
	font-weight:bolder;
	color:#8E443F;
	padding:5px 0 0 5px;
}
.list_tilelist .post_time {
	font-size:13px;
	font-weight:bolder;
	line-height: 16px;
	color:#000;
	padding:3px 0 0 5px;
}
.list_tilelist .post_content {
	font-size:12px;
	line-height: 15px;
	color:#666;
	padding:0 0 0 5px;
}
.list_tilelist .post_info {
	font-size:12px;
	line-height: 15px;
	color:#666;
	padding:0 0 0 5px;
}
.list_tilelist .portfolio_show_detail{
	max-width: 200px;
	max-height: 200px;
}
.list_tilelist .swControls{
	margin:-930px 0 0 0;
	width: 667px;
	text-align: right;
	/*border:1px solid #F00;*/
}



.tabs_lightgray {
	width:727px;
	margin: 20px;
	/*border:1px solid #00F;*/
}
/* tab pane styling */
.tabs_lightgray .panes {
	display:block;
	width:705px;
	padding:30px 10px;
	font-size:14px;
	background-color:#DBDBDD;
	/*background-color:#FFF;*/
	border: 1px solid #CCC;
	border-top:0;
}
/* tab pane 的內容 styling */
.tabs_lightgray .panes .content {
	font-size:13px;
	color:#999;
	line-height:20px;
	margin:10px 0;
}



.list_blue001 {
	width:727px;
	margin: 20px;
}
.list_blue001 li {
	
}



.group_header_box {
	font-size:15px;
	height:35px;
	margin: 0;
	padding: 7px 7px 2px 0;
	background: #D0D1D4;
	text-align: right;
}
.group_header_box .group_select {
	display: inline-block;
	height:30px;
}
.group_header_box .group_select1 {
	display: inline-block;
	height:30px;
}
.group_header_box .group_select2 {
	display: inline-block;
	height:30px;
}





/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
@media screen and (max-width: 1280px) {
	#side1 {
		width: 18%;
	}
	#side2 {
		width: 82%;
	}
	#block1, #block2{
		margin: 0 0 0 10px;
		width: 90%;
		/*min-width: 646px;*/
	}

	.tree_gray_green_v {
		width: 170px;
		float: right;
		margin: 16px 10px 0 0;
	}
	.tree_gray_green_v ul {
		width: 170px;
	}

	.list_vert {
		width: 100%;
	}

	.list_vert li .list_tilelist ul li {
		/*width:222px;*/
		width: 29%;
		height:254px;
		margin:11px;
		/*margin-right:18px;*/
		padding:10px 0;
		border:1px solid #CCC;
	}
}