@charset "utf-8";

/* CSS Document */

/************************************************************/

body, html{

	font-size:13px;

	font-family: Arial, "微軟正黑體";

}

#breadcrumbs_box {

	width: 100%;

	height: 35px;

	background: rgba(0,0,0,0.8);

	bottom: 0px;

}

#breadcrumbs {

	color: #999999;

	font-size: 12px;

	line-height:20px;

	height: 20px;

	font-weight: normal;

	word-spacing:5px;

	padding:0 5px;

	position:absolute;

	right:10px;

	top:7px;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#breadcrumbs a, #breadcrumbs a:visited {

	color: #999999;

	text-decoration: none;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#breadcrumbs a:hover {

	color: #999999;

	text-decoration: none;

}

/**************************************************************/

#leftside_btn{

	position:absolute;

	top:-10px;

	display:none;

	padding:7px 10px;

	left:0px;

	z-index:999;

	color:#999;

	border:#999 1px solid;

	cursor:pointer;

	left:10px;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#leftside_btn:hover{

	color: #F00;

	border:#F00 1px solid;

}

body.active{

	overflow:hidden;

}

/**************************************************************/

#main_box {

	padding:70px 10px 0px 10px;

}

#main{

	max-width:1300px;

	min-height:400px;

	margin:0 auto;

	padding:30px 0px 70px 0px;

	position:relative;

}

/**************************************************************/

#leftside{

	width:20%;

	float: left;

	position:relative;

}

#leftside #title{

	padding-left:10px;

	position:relative;

	display: none;

}

#leftside #title i{

	position:absolute;

	right:20px;

	top:20px;

	font-size:20px;

	cursor:pointer;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#leftside #title i:hover{

	color: #F00;

}

#leftside #title img{

	max-width:150px;

}

#leftside #title span{

	font-family: Calibri, "微軟正黑體";

	font-size:30px;

	font-weight:bold;

	display:block;

	padding:10px 0 20px 0;

}

#rightside{

	width:75%;

	float: right;

	overflow:hidden;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

/**************************************************************/

.top_title{

	max-width: 1300px;

	margin: 0 auto;

	font-size:32px;

	color:#6C1F76;

	line-height:1;

	padding-bottom:20px;

	font-weight: bold;

	margin-bottom:20px;

	font-family: 'Open Sans', sans-serif;

	border-bottom:#CCBACF 3px double;

	padding-left:10px;

	position: relative;

}

.top_title:before{

	content: url(../images/products_title.png);

	display:inline-block;

	margin-right:5px;

}

/**************************************************************/
#conbody{
	min-height:400px;
}
#con_title{

	font-size:15px;

	color:#525252;

	line-height:1;

	margin-bottom:30px;
	font-weight: bold;

}

#con_title a, #con_title a:visited{
	color:#525252;
	text-decoration:none;
}
#con_title a:hover{
	color:#525252;
}
#con_title:before{

	content:url(../images/title_icon.png);

	display:inline-block;

	vertical-align:middle;

	margin-right:10px;

}

/**************************************************************/

#conbody{

	color:#666666;

	line-height: 1.4;

	font-size: 13px;

	margin: 0 auto;
	min-height:

}

/**************************************************************/

@media (max-width: 1320px) {

#main{

	padding-left:10px;

	padding-right:10px;

}

}

@media (max-width: 1000px) {

}

@media (max-width: 650px) {

#leftside #title{

	padding-top:15px;

	padding-left:10px;

	position:relative;

	display: block;

	color:#FFF;

	background:rgba(0,0,0,0.8)

}

#main{

	padding-top:50px;

}

#leftside_btn{

	display: block;

}

#leftside{

	background:#FFF;

	float:none;

	position:fixed;

	top:0px;

	right:100%;

	height:100%;

	overflow:hidden;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

body.active #leftside{

	width:100%;

	right:0px;

	top:0px;

	padding:0 0px;

	z-index:9999;

	overflow: auto;

}

#leftside_btn{

	display: block;

}

#rightside{

	width:100%;

	float: none;

	position:relative;

}

#breadcrumbs {

	position:absolute;

	right: auto;

	right:0px;

	top:-25px;

}

}

@media (max-width: 500px) {

.top_title{

	margin-bottom:20px;

}

}