﻿body{
	margin:0;
	padding:0;
	font-size:15px;
	font-family: arial, Microsoft JhengHei,sans-serif;
	color: #333;
	line-height: 26px;
}

*{transition: left .20s linear;}
*:hover{transition: all .20s linear;}

a{ text-decoration:none; outline: none; color: #b1000a;}
a:hover{ opacity: 0.9; }

img{max-width: 100%;}
input, select, textarea{outline: none;}

/*=[hover effect]==============================*/
/*
*:hover, *:focus , * {
	transition: all .20s linear
}
*/
#pageWrapper{
	position:relative;
	margin: 0 auto;
	box-sizing: border-box;
}
.wrapper{
	position: relative;
	max-width: 1000px;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 auto;
}

/*=[header]=========*/
header{
	position: relative;
	background: #b1000a;
	padding: 10px 0 20px;
}
header .nav_wrapper{
	max-width: 1000px;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 auto;
	text-align: center;
}
header .nav_wrapper .wrapper{
	overflow: visible;

}
header #logo{
	vertical-align: bottom;

}


header nav{
	margin: 20px 0 0;
}
header nav ul{
	margin: 0;
	padding: 0;
}
header nav ul li{
	position: relative;
	display: inline-block;
	text-align: center;
}
header nav ul li:last-child a{
	border-right: 1px #FFF solid;
}
header nav ul li a{
	line-height: 16px;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	padding: 0 20px;
	border-left: 1px #FFF solid;
}
header nav ul li a:hover{
	 opacity: 0.9;
}

header nav ul li:hover > ul{display: block;}


header nav ul ul{
	position: absolute;
	top: 53px;
	left: 0px;
	width: 170px;
	padding: 0;
	margin: auto;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	z-index: 10;
}
header nav ul ul li{
	display: block;
	border: none;
	padding: 10px;
	text-align: left;
}
header nav ul ul li a{
	color: #FFF;
	padding: 0;
	border: none;
	font-size: 16px;
	vertical-align: middle;
}
header nav ul ul li a:hover{
	color: #faa12f;
}

header #nav_icon{
	float:right;
	color: #FFF;
	display:none;
	margin: 10px 10px 0 0;
}
header .btn_navCloss{
	display: none;
}


header.fixed{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 30;
}
header.fixed .fixed_title{
	display: inline-block;
	font-weight: bold;
	font-size: 18px;
	vertical-align: middle;
	line-height: 28px;
	border-left: 1px #555 solid;
	padding-left: 10px;
	margin-left: 5px;
}
header.fixed #logo{
	font-size: 24px;
	vertical-align: bottom;
	line-height: 28px;
}



/*=[section]=========*/
#index .section_title{
	font-size: 24px;
	font-weight: bolder;
	padding-bottom: 10px;
	border-bottom: 2px #333 solid;
	margin-bottom: 20px;
}
#index .section_title:before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #333;
	margin-right: 5px;
}
#index .section_title span{
	font-size: 16px;
	color: #333;
	display: inline-block;
	margin-left: 20px;
}
#index .btn_more{
	font-size: 14px;
	font-weight: normal;
	display: inline-block;
	padding: 0 20px;
	border: 1px #b1000a solid;
}


/*banner*/
#index .banner{

}
#slideshow_owl{
	position: relative;
	background: #000;
}
#slideshow_owl .item{
	background: center center no-repeat;
	background-size: cover;
}
#slideshow_owl .owl-item .pic{
	opacity: 0.3;
	transition: opacity 1s ease-in;
}
#slideshow_owl .owl-item.animate .pic { opacity: 1; }
#slideshow_owl .owl-nav {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	margin: auto;
	z-index: 20;
}
#slideshow_owl .owl-nav .owl-prev{
	position: absolute;
	top: 0;
	left: 30px;
	width: 30px;
	height: 50px;

	background: url(../images/btn_owl_prev.png) center center no-repeat;
}
#slideshow_owl .owl-nav .owl-next{
	position: absolute;
	top: 0;
	right: 30px;
	width: 30px;
	height: 50px;

	background: url(../images/btn_owl_next.png) center center no-repeat;
}

#slideshow_owl .owl-dots{
	position: absolute;
	width: 100%;
	bottom: 30px;
	z-index: 20;
	text-align: center;
	box-sizing: border-box;
}
#slideshow_owl .owl-dot{
	display: inline-block;
}
#slideshow_owl .owl-dot span{
	background: #FFF;
	display: inline-block;
	width: 40px;
	height: 2px;
	margin: 0 5px;
	/*border: 1px #999 solid;*/
	/*box-shadow: 2px 2px 10px #777;*/
}
#slideshow_owl .owl-dot.active span{
	background: #999;
}

/*news*/
#index .news{
	background: #ededed;
	padding: 40px 0;
}
#index .news .item{
	padding: 15px 10px;
	border-bottom: 1px #999 solid;
}
#index .news .item a{
	font-weight: bolder;
	display: inline-block;
	margin-left: 20px;
}

/*product*/
#index .product{
	padding: 40px 0;
}
#index .product .items{
	width: 100%;
	overflow: hidden;
}
#index .product .item{
	position: relative;
	float: left;
	width: 49.5%;
	margin-right: 1%;
	margin-bottom: 1%;
	box-sizing: border-box;
}
#index .product .item:nth-of-type(2n) {
	margin-right: 0;
}
#index .product .item img{
	display: block;
}
#index .product .item2{
	position: relative;
	float: left;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 20px;
	box-sizing: border-box;
}
#index .product .item2:nth-of-type(3n) {
	margin-right: 0;
}
#index .product .item2 .item_title{
	font-size: 18px;
	font-weight: bold;
}


/*page*/
.page_banner{
	background: right top no-repeat;
	background-size: cover;
	height: 250px;
	padding: 90px 0;
	box-sizing: border-box;
	font-size: 26px;
	color: #FFF;
}
.page_title{
	font-size: 30px;
	font-weight: bolder;
	padding-bottom: 20px;
	color: #FFF;
}
.page_title:before{
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	background: #FFF;
	margin-right: 10px;
}
.page_banner2{
	background: right bottom no-repeat;
	background-size: cover;
	padding: 80px 0;
	box-sizing: border-box;
}
.page_title2{
	text-align: center;
	font-weight: bolder;
	font-size: 40px;
	color: #b1000a;
	line-height: 40px
}
.page .col1{
	float: left;
	width: 20%;
}
.page .col1 .side_title{
	font-size: 20px;
	font-weight: bolder;
	color: #b1000a;
	padding-bottom: 10px;
	border-bottom: 1px #ccc solid;
}
.page .col1 .subnav{
	margin: 0 0 30px;
	padding: 0;
}
.page .col1 .subnav li{
	display: block;
}
.page .col1 .subnav li a{
	display: block;
	padding: 8px 0 8px 5px;
	border-bottom: 1px #ccc solid;
	color: #333;
	font-size: 14px;
}
.page .col1 .subnav li a:hover{
	color: #b1000a;
	background: #EEE;
}
.page .col1 .subnav li a.current{
	color: #b1000a;
	background: #EEE;
}
.page .col2{
	float: right;
	width: 76%;
}
.page .section_title{
	text-align: center;
	font-size: 30px;
	font-weight: bolder;
	padding: 20px 0 30px;
}
.page .section_subtitle{
	text-align: center;
	font-size: 20px;
	font-weight: bolder;
	padding: 5px 0;
	margin-bottom: 20px;
	background: #000;
	color: #FFF;
}


#news .item{
	width: 100%;
	overflow: hidden;
	padding-bottom: 30px;
	border-bottom: 1px #CCC dotted;
	margin-bottom: 30px;
}
#news .item .news_pic{
	float: left;
	width: 160px;
}
#news .item .news_info{
	margin-left: 180px;
}
#news .news_title{
	font-size: 20px;
	font-weight: bold;
	padding: 0 0 10px;
}


#product .product_category{
	color: #b1000a;
	margin-bottom: 20px;
	font-size: 20px;
}
#product .category-m{
	display: inline-block;
	width: 48%;
	margin: 4% 2% 4% 0;
}
#product .category-m2{
	display: inline-block;
	width: 48%;
	margin: 4% 0 4% 2%;
}
#product .item{
	display: block;
	position: relative;
	float: left;
	width: 49%;
	margin-right: 2%;
	margin-bottom: 20px;
	border: 1px #999 solid;
	box-sizing: border-box;
}
#product .item:nth-of-type(2n) {
	margin-right: 0;
}
#product .item .item_title{
	display: block;
	padding: 10px;
	color: #FFF;
	background: #333;
	text-align: center;
}
#product .item img{
	display: block;
}
#product .mainppic{
	width:400px;
	float: left;
}
#product .mainppic img{
	border: 1px #EEE solid;
}
#product .product_info{
	margin-left: 420px;
}
#product .product_title{
	font-size: 20px;
	font-weight: bold;
	padding: 0 0 10px;
}



#faq{

}
#faq .item_faq{
	padding: 20px 0;
	border-bottom: 1px #999 dashed;
}
#faq .item_faq .faq_title{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}


.contact_info{
	font-size: 16px;
	line-height: 28px;
}

/*footer_nav*/
.footer_nav{
	padding: 40px 0 40px;
	text-align: center;
}
.footer_nav a{
	display: inline-block;
	padding: 0 20px;
	color: #333;
	font-size: 18px;
	font-weight: bolder;
}


/*=[pagination]=========*/
#pages{

}
#pages a{
	display: inline-block;
	border-radius: 5px;
	color: #000 !important;
	width: 40px;
	height: 40px;
	padding:10px;
	box-sizing: border-box;
	text-align: center;
	background: #FFF;
}
#pages a.current{
	color: #FFF!important;
	background: #f6a123; 
}
#pages a.prev, #pages a.next{
	width: 80px;
	color: #d5d5d5; 
}

/*=[breadcrumb]=========*/
.breadcrumb{
	text-align: right;
	padding: 20px 0;
}
.breadcrumb a{
	color: #333;
	display: inline-block;
	padding: 0 5px;
}

/*=[footer]=========*/
footer{
	padding-top: 40px;
	padding-bottom: 20px;
	margin-top: 60px;
	clear: both;
	background: #3F3939 url(../images/bg_footer.jpg) repeat-x center top;
	background-size: cover;
	text-align: center;
}
/*address*/
footer address {
	line-height:20px;
	font-size:14px;
	color:#FFF;
}
footer .icons{
	margin-top: 20px;
}
footer .icons a{
	display: inline-block;
	padding: 5px;
	color:#FFF;
	font-size: 26px;
}
footer address a{
	color:#FFF;
}
footer address span{
	display: inline-block;
	padding: 0 10px;
	font-size: 16px;
}
/* copyright */
footer .copyright {
	clear:both;
	text-align:center;
	margin-top: 10px;
}
footer .copyright small {
	color:#AAA;
	font-size: 12px;
}

#scrollup{
	position: fixed;
	right: 20px;
    bottom: 20px;
	z-index:20;
	display: none;
	width:38px;
	height:38px;
	background: url(../images/totop.jpg) center center no-repeat;
	cursor:pointer;
}


/*=[common]=========*/
input, textarea, select{
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	margin-bottom: 15px;
	box-sizing: border-box;
	resize: none;
}
input[type=radio],input[type=checkbox]{
	width: initial;
}
button{
	box-sizing: border-box;
	min-width: 160px;
	padding: 15px;
	margin: 15px 0;
	box-sizing: border-box;
	border-radius: 10px;
	border: none;
	background: #666;
	color: #FFF;
	font-size: 18px;
	font-weight: bolder;
	cursor: pointer;
}
button:hover{
	background: #b1000a;
}


.clear{clear: both;}
.center{text-align: center;}
.right{text-align: right;}
.fleft{float: left;}
.fright{float: right;}
.mobile{display: none !important;}
.mobile_800{display: none !important;}
.color1{
	color: #b1000a; !important;
}
.icon_arrow{
	color: #f6a123 !important;
}

.w100{width: 100px;}
.w200{width: 200px;}
.w300{width: 300px;}
.w400{width: 400px;}

.btn_back{
	display: block;
	width: 180px;
	text-align: center;
	padding: 10px;
	font-size: 18px;
	color: #FFF;
	background: #b1000a;
	border-radius: 5px;
	margin: 50px auto;
}
.btn_back:hover{
	color: #FFF;
}


.line{
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px #DDD solid;
}

.rwd-table {
	width: 100%;

	border-collapse: collapse;
	margin: 20px 0;
	line-height: 26px;

}
.rwd-table th{
	color: #67542c;
	border-bottom: 2px #67542c solid;
	padding: 10px;
	font-weight: bold;
}
.rwd-table td{
	border-bottom: 1px #999 solid;
	text-align: center;
	padding: 20px 0;
	vertical-align: top;
}
/*.rwd-table td:first-child{text-align: left;}*/
.rwd-table td:before {display: none;}

.rwd-table a:hover{
	color: #0d30a6;
}

.video-container {
	position: relative;
	width: 800px;
	padding-bottom: 40%;
	height: 0;
	overflow: hidden;
	margin: 10px auto;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 800px) {
	.wrapper{
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	header .wrapper{
		padding: 10px;
	}
	header #nav_icon{
		display:block;
	}
	header nav{
		position: fixed;
		float: none;
		width: 240px;
		box-sizing: border-box;
		margin: 0;
		padding: 10px;
		left: -240px;
		top: 0;
		background: #333;
		z-index: 100;
	}
	header nav.open{
		left: 0;
	}
	header nav ul li{
		display: block;
		padding: 15px 0;
		border: none;
		border-bottom: 1px #999 solid;
	}
	header nav ul li:last-child{
		border-right: none;
	}
	header nav ul li a{
		padding: 0 10px;
		border-right: none;
		color: #FFF;
	}
	header nav ul ul{
		position: relative;
		top: 0;
		left: 0;
		box-shadow: none;
		display: block;
		width: 100%;
		margin-top: 10px;
	}
	.btn_navCloss{
		float: right;
		color: #FFF;
		font-size: 20px;
		display: block;
	}
	
	header{
		padding: 0;
	}
	header #logo{
		width: 200px;
	}

	.page .col1, .page .col2{
		float: none;
		width: 100%;
	}
	#news .item .news_pic{
		float: none;
		width: 100%;
	}
	#news .item .news_info{
		margin-left: 0;
	}
	#product .item{
		float: none;
		width: 100%;
		margin-right: 0;
	}

	#product .mainppic{
		width: 100%;
		float: none;
	}
	#product .product_info{
		margin-left: 0;
	}

	.video-container {
		width: 100%;
		padding-bottom: 56%;
	}

	footer address span{
		display: block;
		padding: 5px 0;
	}
}

@media screen and (max-width: 640px) {
	.desktop{ display: none !important;}
	.mobile{ display: block !important;}

	.rwd-table th {display: none;}
	.rwd-table td {display: block;}
	.rwd-table th, .rwd-table td {text-align: left; padding: 10px;}
	.rwd-table td:first-child {padding-top: 20px; font-size: 18px; font-weight: bold;}
	.rwd-table td:last-child {padding-bottom: 20px;}
	.rwd-table td:before {
		content: attr(data-th) ":";
		font-weight: bold;
		width: 80px;
		display: inline-block;
		color: #67542c;
	}
	.rwd-table td:first-child:before {
		content: "";
		width: 0;
	}
	.rwd-table td.empty{
		display: none;
	}
}
