html, body {
	margin: 0 ;
	height: auto;
	overflow-x: hidden;
	font-family: "Open Sans", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
	}

img{ border:0}

/*category-menu begin*/
.bg-top-line{
	position:fixed;
	top:0;
	display:block;
	width:100%;
	height:8px;
	}
.category-area{
	display:table;
	width:100%;
	}
.category-close{
    position:fixed;
    right:12px;
    top:15px;
    margin: 0;
    padding: 0;
	width:30px;
	height:30px;
	color:#777777;
	font-size:36px;
	line-height:30px;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;		
    z-index:9999;
	}	
.category-close:hover{ color: #000000; }	

.category-language{
	position:relative;
	color:#cccccc;
	font-size:13px;
	margin:20px 0 20px 15px;
	}
.category-language a:link,
.category-language a{
	color:#000000;
	text-decoration:none;
	font-weight:bold;
	font-size:14px;
	margin:0 5px;
	}
.category-language a:hover{
	color:#C70026;
	}
.close-menu-icon{
	margin:0;
	padding:0;
	position:fixed;
	right:20px;
	top:20px;
	z-index:9999;
	cursor:pointer;
	}	
.category-left{
	display:table-cell;
    width:180px;
	vertical-align:top;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	}
  @media screen and (max-width: 480px) {
	.category-left{
		width:130px;
		}
}
.fixed-setion{
	width:inherit;
	height:100%;
	position:fixed;
	top:0;
	background-color:#333333;
	}		
.category-guide{
	display:block;
	padding:0;
	margin:0;
	list-style-type:none;
	}
.more-guide{ display: none; }
ul.category-guide{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	list-style-type:none;
	}
ul.category-guide li{
	display:block;
	width:100%;
	margin:0;
	border-bottom:1px solid #656565;
	}	
ul.category-guide li a:link,	
ul.category-guide li a,		
ul.category-guide li a:active{	
	display:block;
	width:100%;
	padding: 12px 10px 12px 20px;
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	}
ul.category-guide li a:hover{
	color:#cccccc;
	}
ul.category-guide li:last-child{
	border-bottom:0;
	}
.more-guide ul{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	list-style-type:none;
	}
.more-guide ul li{
	display:block;
	width:100%;
	margin:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-bottom:1px solid #e8e8e8;
    border-bottom: 1px solid #3e3e3e;
    background-color: #585858;
	}
.more-guide ul li:last-child{
	border-bottom:0;
	}	
.more-guide ul li a:link,
.more-guide ul li a,		
.more-guide ul li a:active{	
	display:block;
	width:100%;
	padding:10px 0 10px 35px;
	color:#ffa217;
	text-decoration:none;
	font-weight:bold;
	font-size:14px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;	
	}	
.more-guide ul li a:hover{
	color:#ffc56f;
	}
.view-more{
	position:relative;
	}
.view-more-icon{
	cursor:pointer;
	}	
.view-more-icon:after{
	color: #a2a2a2;
	position:absolute;
	right:16px;
	top:12px;
	display: inline-block;
	content: "\f078";
	font-family: 'FontAwesome';
	font-size:18px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
.is-active .view-more-icon:after{
	top:14px;	
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);	
	}
.category-right{
	display:table-cell;
	padding:0 50px 0 30px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	}
.category-right ul{
	display: block;
	margin:0 auto 20px auto;
	padding:0;
	list-style-type:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	}	
.category-right ul li{
    display: inline-block;
	width:18%;
	max-width:260px;
	padding:0 50px;
	margin:10px 0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	vertical-align:top;
	}
.mobile-item-name{
	display:block;
	font-size:14px;
	font-weight:normal;
	margin:10px 0 0 0;
	height:3.88em;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	overflow: hidden;
	line-height: 1.35;
	word-break: normal;
	text-overflow: ellipsis;
	text-align:center;
	}	
.category-right h3{
	display:block;
	font-size:21px;
	color:#222222;
	margin:13px 0 25px 0;
	padding:15px 0 15px 5px;
	font-weight:500;
	letter-spacing:2px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;	
	border-bottom:1px solid #cccccc;
	}				
.category-right ul li a,	
.category-right ul li a:link,
.category-right ul li a:active{
	display:block;
	color:#222222;
	text-decoration:none;
	}	
.category-right ul li a:hover{
	color:#C70026;
	}		
.category-right ul li img{
	display:block;
	width:100%;	
	}	
  @media screen and (max-width: 1366px) {
	.category-right ul li{ 
	  width:25%;
	  padding:0 30px; 
	  }
}	
  @media screen and (max-width: 1024px) {
	.category-right ul li{ width:33%; }
}	
  @media screen and (max-width:768px) {
	.category-right ul li{ 
		padding:0 10px; 
		}

}
  @media screen and (max-width: 640px) {
	.category-right ul li{ 
		width:48%;
		padding:0 5%; 
		}
	.mobile-item-name { 
		font-size: 13px; letter-spacing:1px; 
		}
}	
  @media screen and (max-width: 480px) {
	.category-right {
		padding: 0 10px;
		}
	.category-right ul li{ padding:0 5px; }
	.category-right h3{	font-size:18px;	}	
}