body{
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, "·L³n¥¿¶ÂÅé", "Microsoft JhengHei", sans-serif;
	font-size:12px;
	color:#31353d;
	background-color:#FFF;
}
a{
	text-decoration:none;
	outline:none;
	color:#333;
}
img{vertical-align:bottom;}

#pageWrapper{width:100%; margin:0 auto; padding:40px 0;}
#topBar{
	width:924px;
	height:80px;
	margin: 0 auto;
	color:#C00;
}
#logo{
	float: right;
	width:20%;
}
#logo div{
	text-align:right;
	height: 80px;  
    vertical-align: bottom;
    display: table-cell;
}
#logo2{
	float:left;
	display:none;
}
/*--------------------navi--------------------*/
#navi {
	width:80%;
	height: 80px;
	padding:0;
	float: left;
}
#navi #naviline{
	float:left;
	width:20%;
}
#navi #naviline div{
	border-bottom: 1px #31353d solid;
	border-left: 1px #31353d solid;
	height:3px;
}
#navi #naviline div.last{
	border-right: 1px #31353d solid;
}
#navi ul {
	margin: 0;
	padding: 0;
	width:100%;
	text-align:center;
}
#navi li {
	margin: 0;
	width:20%;
	padding: 55px 0 5px;
	text-align:center;
	vertical-align:bottom;
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}
#navi a {color: #31353d;}

/*--------------------navi2--------------------*/
#navi2_icon{
	float:right;
	padding:40px 20px 0 0;
	display:none;
}
#navi2 {
	position:fixed;
	width:100%;
	height:100%;
	/*background:url(images/black70_bg.png);*/
	background-color:#FFF;
	top:0;
	z-index:9;
	display:none;
}	
#navi2 ul {
	width: 100%;
	margin:0;
	padding:10px 0 0 20px;
	font-size:14px;
	padding:0;
}
#navi2 li {
	margin: 0;
	padding:15px 0 15px 15px;
	list-style:none;
	border-bottom:1px #000 solid;
}
#navi2 li:hover {
	background-color:#EEE;
}
#navi2 a {
	text-align: left;
	color:#333;
}
#navi2 #closeBtn {
	text-align: right;
	margin:10px;
	font-size:30px;
	cursor:pointer;
}
/*--------------------footer--------------------*/
#footer{
}
#footer .wrapper{
	width:924px;
	margin:0 auto;
	color:#FFF;
}
#footer .wrapper #footerline{
	border-top: 1px #ACACAC solid;
	border-left: 1px #ACACAC solid;
	border-right: 1px #ACACAC solid;
	height:3px;
}
#footer .wrapper #copy{
	color:#31353d;
	text-align:center;
	padding:10px 0 0;
	font-size:10px;
}
/*--------------------scrollup--------------------*/
#scrollup {
	position: fixed;
    background: url("images/totop_40.png") no-repeat scroll 0 0 transparent;
	right: 10px;
    bottom: 10px;
	width: 40px;
    height: 40px;
	z-index:20;
	display: none;
}

/*-----pagination-----*/
.pagi{
	border:1px #31353D solid;
	padding:2px 5px;
}
.pagi a{
	color:#31353D;
}
.pagi.active{
	color:#1C1D21;
}

/*--------------------commons--------------------*/
.fLeft{float:left;}
.fRight{float:right;}
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}
.clear{clear:both;}

.dashline{
	border-bottom:1px #CCC dotted;
	padding-bottom:5px;
	margin-bottom:5px;
}
.pTop40{padding-top:40px;}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
	position:relative;
	overflow:hidden;
}
.fullwidth .col {
	float: none;
	margin-left: 0;
}
/* grid2 col */
.grid2 .col {
	width: 48.4%;
}
/* grid3 col */
.grid3 .col {
	width: 31.2%;
}
/* grid4 col */
.grid4 .col {
	width: 22.6%;
}
/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 3-column */
@media screen and (max-width: 924px) {
	/* grid4 */
	.grid4 .col {
		width: 31.2%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to 2-column */
@media screen and (max-width: 800px) {
	/* grid4 */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* grid3 */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to fullwidth */
@media screen and (max-width: 600px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

@media screen and (max-width: 924px) {
	#topBar{width:100%}
	#footer .wrapper{width:100%}
}

@media screen and (max-width: 800px) {
	#logo img{width:100%}
}

@media screen and (max-width: 500px) {
	#pageWrapper{padding:0 0 10px;}
	#navi, #logo {display:none;}
	#navi2_icon, #logo2{display:block;}
	#footer .content #sitemap{width:96%; margin:0 auto;}
}