@charset "utf-8";
body { font-family: "Roboto", \5FAE\8EDF\6B63\9ED1\9AD4, sans-serif; }
img { max-width: 100%; vertical-align: middle; }
a { text-decoration: none; color: inherit; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*For IE 6&7 only*/ }

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* web */
#container { overflow: hidden; }
.wrapper { width: 1200px; margin: auto; }
@media (max-width:1200px) {
	.wrapper { width: 100%; }
}

/* header */
#header .top { background: #fafafa;}
#header .top .homelink, #header .top .comlink, #header .top .language{display: inline-block;}
#header .top .homelink{float: left;}
#header .top .comlink {float: left;}
#header .top .language{float: right;}


#header .top i{font-size: 30px; vertical-align: middle;}
#header .top .homelink a, #header .top .comlink dt a, #header .top .language dt a { line-height: 40px; color: #9e9e9e; font-size: 18px; display: inline-block; padding: 5px 10px;}
#header .top .comlink dt a:hover, 
#header .top .comlink dt a:focus, 
#header .top .language dt a:hover,
#header .top .language dt a:focus,
#header .top .homelink a:hover,
#header .top .homelink a:focus{background: #c40202;  color: #FFF;}

#header .top .comlink dt a:after{ content: "\f107"; font-family: "FontAwesome"; font-style: nrmal; font-weight: normal; text-decoration: inherit; margin-left: 10px;}



.dropdown, .dropdown dd, .dropdown dt, .dropdown ul, .dropdown2, .dropdown2 dd, .dropdown2 dt, .dropdown2 ul{ margin:0px; padding:0px; }
.dropdown dd, .dropdown2 dd{ position:relative;}
.dropdown dt a, .dropdown2 dt a{ display:block; padding-right:20px;}
.dropdown dt a:hover, .dropdown dt a:focus, .dropdown2 dt a:hover, .dropdown2 dt a:focus{ background: #c40202;  color: #FFF;}
.dropdown dt a span, .dropdown2 dt a span{ cursor:pointer; }

.dropdown dd ul, .dropdown2 dd ul{display:none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); list-style:none; position:absolute; z-index: 999; left:0px; top:0px; min-width: 160px;}
.dropdown2 dd ul{left:auto; right: 0;}
.dropdown span.value, .dropdown2 span.value{ display:none;}
.dropdown dd ul li a, .dropdown2 dd ul li a{  padding: 10px 15px; display:block; color: #333;}
.dropdown dd ul li a:hover, .dropdown2 dd ul li a:hover { background: #c40202;  color: #FFF; }

.header .logo { float: left; margin: 10px; width: 30%;}
.header .logo img { padding: 0 10px;}
@media (max-width:980px) {
    .header .logo { float: none; width: auto; text-align: center;}
    .header .logo img { width: 20%; }
	.header .logo img:first-child { width: 10%; }
}
@media (max-width:800px) {
	#header .top { background: #fafafa; }
	.header .logo { float: none; text-align: center; margin-left: auto; margin-right: auto; }
    .header .logo img { width: auto; }
	.header .logo img:first-child { width: auto; }
}
@media (max-width:480px) {
	.header .logo {float: none; text-align: center; }
    .header .logo img { width: 40%; }
	.header .logo img:first-child { width: 20%; }
}
@media (max-width:375px) {
    .header .logo img { width: 50%; }
}


/* toggle btn */
.toggle-btn { display: none; }
@media (max-width:800px) {
	.toggle-btn { display: block; float: left; color: #9e9e9e; font-size: 18px; text-align: left; line-height: 50px; padding-right: 1em; padding-left: 1em; cursor: pointer;}
	.toggle-btn:before { content: "\f0c9"; font-family: "FontAwesome"; font-style: normal; font-weight: normal; text-decoration: inherit; margin-right: 10px; }
}
@media (max-width:375px) {
	.toggle-btn { padding-right: 0;}
}

/* main-menu */
.main-menu { float: right;  width: 65%; text-align: right;}
.main-menu ul { padding: 0; margin-top: 3em; margin-bottom: 0; list-style-type: none; }
.main-menu ul li { display: inline-block; }
.main-menu ul li:not(:last-child):after { content: "/"; }
.main-menu ul li a { display: inline-block; padding: 10px 1em; font-family: 'Roboto Condensed'; font-size: 18px;}
.main-menu ul li a:hover, .main-menu ul li.active a { color: #d7000f; }
@media (max-width:1199px) {
	.main-menu ul li a { padding: 10px; }
}
@media (max-width:1085px) {
	.main-menu ul li a { padding: 10px 0.5em; }
}
@media (max-width:980px) {
	.main-menu { float: none;  width: auto; text-align: center;}
    .main-menu ul {margin-top: 0;}
}
@media (max-width:800px) {
	.main-menu { display: none; }
}

/* banner */
.banner { border-bottom: #dcdcdc 1px solid; overflow: hidden; }
@media (max-width:1200px) {
	.banner { width: 120%; margin-left: -150px; }
}
@media (max-width:800px) {
	.banner { width: 130%; margin-left: -120px; }
}
@media (max-width:480px) {
	.banner { margin-left: -90px; }
}
@media (max-width:375px) {
	.banner { margin-left: -70px; }
}

/* bread crumbs */
.breadcrumbs { color: #6b6b6b; font-size: 12px; text-transform: uppercase;   margin: 3em 0;}
.breadcrumbs ul { list-style-type: none; padding-left: 0; }
.breadcrumbs ul li { display: inline-block; }
.breadcrumbs ul li+li:before { content: ">"; display: inline-block; vertical-align: middle; margin: 0 5px; color: #6b6b6b; }
.breadcrumbs ul li a:hover { text-decoration: underline; }
.breadcrumbs ul li:last-child { color: #e40000;}
@media (max-width:640px) {
	.breadcrumbs { margin: 0; }
}

/* content */
@media (max-width:1200px) {
	#content .wrapper { padding: 0 15px; }
}
#content {min-height: 800px;}
@media (max-width:800px) {
	#content {min-height: 500px;}
}
.page-header h1{margin: 0 0 0.5em; color: #c40202;}
/* navigateion */
.side-menu { width: 270px; float: left; }
.side-menu .title { font-size: 24px; font-weight: bold; margin-bottom: 0.5em; text-transform: uppercase; }
.side-menu .title span{ color: #e40000; }
.side-nav, .side-nav ul { list-style-type: none; padding-left: 0; margin: 0; }
.side-nav > li > a { padding: 20px; border: #bfbfbf 1px solid; display: block; margin-top: -1px; }
.side-nav > li > a:before { content:""; background: url(../images/nav-arrow.png) 0px 0px; background-repeat: no-repeat; width: 15px; height: 15px; 
display: inline-block; vertical-align: middle; padding: 10px; padding-right: 20px;}
.side-nav > li > a:hover, .side-nav > li.active > a { color: #e40000; }
.side-nav ul { border: #bfbfbf 1px solid; border-top: none; padding-bottom: 1em; }
.side-nav ul li a { padding: 10px 10px 10px 35px; display: block; }
.side-nav ul li a:before { content: "\f105"; font-family: "FontAwesome"; font-style: normal; font-weight: normal; text-decoration: inherit; margin-right: 5px; }
.side-nav ul li a:hover, .side-nav ul li.active a { background: #e40000; color: #fff; }
@media (max-width:800px) {
	.side-menu { display: none; }
}
/* main */
.main { width: calc(100% - 270px); float: right; padding: 0 0 3em 30px; }
@media (max-width:800px) {
	.main { width: 100%; float: none; padding: 0 0 1em; }
}

.main p{line-height: 1.5em;}
/* pro list */
.pro-list ul { list-style-type: none; margin: 0; padding: 0; }
.pro-list ul li { float: left; width: 31.3333%; margin: 0 1% 3em; border: #a1a1a1 1px solid; }
.pro-list ul li .caption { color: #6d6d6d; text-align: center; padding: 10px 0; display: block; background: #ccc; }
@media (max-width:480px) {
	.pro-list ul li { width: 48%; margin-bottom: 1em; }
}
@media (max-width:320px) {
	.pro-list ul li { width: 98%; }
}

.figure { display: inline-block; font-size: 16px; max-width: 290px; /*min-width: 250px;*/ position: relative; text-align: center; width: 100%; background-color: #000; margin: 0; }
.figure *, .figure *:before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }
.figure img { max-width: 100%; vertical-align: top; }
.figure figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.figure h3 { font-size: 20px; font-weight: 300; line-height: 26px; margin: -1px 0 0; padding: 12px 0 12px; background: #fff; }
.figure i { font-size: 40px; position: absolute; top: 42%; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); opacity: 0; color: #fff; border: #fff 1px solid; border-radius: 50px; padding: 20px; }
.figure a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.figure:hover img, .figure.hover img { opacity: 0.5; }
.figure:hover i, .figure.hover i { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; }
@media (max-width:800px) {
	.figure *, .figure *:before { transition: none; }
}

/* product */
.pro-large  { border: #e5e5e5 1px solid; margin-bottom: 1em; }
.thumbs ul { list-style-type: none; text-align: right; }
.thumbs ul li { display: inline-block; border: #dcdcdc 1px solid; cursor: pointer; max-width: 100px; }
.pro-name { font-size: 24px; font-weight: normal; float: left; }
@media (max-width:480px) {
	.thumbs ul { text-align: left; padding: 0; margin: 0; }
	.thumbs ul li { max-width: 32%; }
	.pro-name { float: none; }
}

/* recommended */
.recommended { background: url(../images/recommended_bg.jpg) no-repeat top center; padding: 2em 0; text-align: center; position: relative; z-index: 1; }
.recommended .title { color: #fff; font-size: 24px; padding: 5px 30px; border: #fff 1px solid; display: inline-block; margin-bottom: 1em; text-transform: uppercase; }
.recommended ul { list-style-type: none; text-align: center; padding: 0; margin: 0; }
.recommended ul li { float: left; width: 16.6667%; }
.recommended ul li img { border: #959595 1px solid; }
@media (max-width:1023px) {
	.recommended { padding: 1em 15px; }
	.recommended .title { font-size: 16px; }
	.recommended ul li { display: none; width: 19%; margin: 0 0.5%; }
	.recommended ul li:nth-child(1), .recommended ul li:nth-child(2), .recommended ul li:nth-child(3), .recommended ul li:nth-child(4), .recommended ul li:nth-child(5) { display: block; }
}
@media (max-width:800px) {
	.recommended ul li {width: 24%; margin: 0 0.5%; }
	.recommended ul li:nth-child(5) { display: none; }
}
@media (max-width:480px) {
	.recommended ul li { width: 32%; margin: 0 0.6%; }
	.recommended ul li:nth-child(4) { display: none; }
}


/*team*/
.team-list{border:1px solid #DDD; padding: 20px; margin-bottom: 30px;}
.team-tit{ background: #e80f00; color: #FFF; display: inline-block; padding: 10px 15px; border-radius: 20px; width: 150px; text-align: center;}
.team-txt h4{ background: #666666; color: #FFF; display: inline-block; padding: 10px 15px;}
.team-txt li{ padding-bottom: 0.5em; line-height: 1.5em;}

/*news*/
.table-container{width: 100%;	overflow-y: auto;	_overflow: auto;	margin: 0 0 1em;}
.table-container::-webkit-scrollbar{	-webkit-appearance: none;	width: 14px;	height: 14px;}
.table-container::-webkit-scrollbar-thumb{	border-radius: 8px;	border: 3px solid #fff;	background-color: rgba(0, 0, 0, .3);}
table {background-color: transparent; border-spacing: 0;border-collapse: collapse;}
.table { width: 100%; max-width: 100%; margin-bottom: 20px;}
.table > thead > tr > th, .table > tbody > tr > td{padding: 8px; line-height: 1.42857143; vertical-align: top;  border-top: 1px solid #ddd;}
.table > thead > tr > th{background: #e70012; color: #FFF; text-align: left;}
.table>tbody>tr:nth-of-type(odd) {background-color: #f9f9f9;}
.table > tbody > tr > td:last-child{white-space:nowrap;}

.news a:hover{text-decoration: underline;}
.news .date{text-align: right; color: #666;}
.news h3{color: #FF6600;}
h5{background-color: #666; color: #FFF; padding: 10px 15px; font-size: 16px; display: inline-block; margin: 0;}
.news .btn{ background: #BF0003; border: 0; color: #FFFFFF; padding: 10px 15px; border-radius: 5px;cursor: pointer }
.news .btn-danger{background: #C7383B; }
.news .btn-danger:hover{background: #864445; text-decoration: none;}



/*contact us*/
fieldset{ border: 0;}
.alert-info{  border-bottom: 1px solid #D9D9D9; padding-bottom: 20px; margin-bottom: 20px;}
.form-group{ margin-top: 10px; margin-bottom: 10px;}
span.red{color: #C90003}
label.control-label{ display: inline-block; text-align: right; width: 15%; vertical-align: top;}
.controls{ display: inline-block; width: 84%;}
input.form-control, textarea.form-control{ width: 100%; border-radius: 4px; border: 1px solid #DFDFDF; padding: 5px 10px;}
input.btn{ background: #BF0003; border: 0; color: #FFFFFF; padding: 10px 15px; border-radius: 5px;cursor: pointer }
input.btn-danger{background: #C7383B; }
input.btn-danger:hover{background: #BB9495;}
input.btn-primary:hover{ background: #864445;}
.text-right{text-align: right;}
.text-center{text-align: center;}
@media (max-width:991px) {
	label.control-label{ display: block; text-align: left; width: auto; padding-bottom: 0.5em;}
    .controls{ display: block; width: 100%;}
}




/* footer */
#footer { border-top: #d8d8d8 1px solid; position: relative; z-index: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f3f3+0,ffffff+100 */
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f3f3f3 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }
#footer .wrapper { padding: 2em 0 0; }
.footer-logo { width: 30%; float: left; text-align: center; }
.footer-logo img { vertical-align: middle; margin-bottom: 10px; }
.footer-menu { width: 20%; float: left; margin-left: 8%; font-size: 14px; }
.footer-menu .title, .footer-contact .title { font-size: 20px; color: #4c4c4c; padding-bottom: 2px; position: relative;}
.footer-menu .title:before, .footer-contact .title:before { content: ""; width: 20px; height: 20px; background: url(../images/footer-arrow.png) left center no-repeat; display: inline-block; position: absolute; left: -30px; }
.footer-menu ul, .footer-contact ul{ padding: 0; list-style-type: none; }
.footer-menu ul li, .footer-contact ul li { line-height: 1.5em; padding-bottom: 0.5em; font-size: 16px;}

.footer-menu ul li a:hover, .footer-menu ul li.active a, .footer-contact ul li a:hover { color: #d7000f; }
.footer-contact { width: 25%; float: left;}

.footer-cont-area1, .footer-cont-area2 { line-height: 1.5em; padding-left: 30px; padding-top: 10px; margin-top: 14px; }
.footer-cont-area1 { background: url(../images/footer-add.png) no-repeat top left; }
.footer-cont-area1 strong, .footer-cont-area2 strong { font-size: 14px; color: #e40000; }
.footer-cont-area2 { background: url(../images/footer-cont.png) no-repeat top left; }
.footer-cont-area1 strong { display: block; }
.footer-cont-area2 strong { display: inline-block; width: 44px; }
.footer-cont-area2 strong:last-child { letter-spacing: 3px; }
.footer-qr { width: 12.5%; float: right; }
.copyright { background: #e70012; color: #fff; text-align: center; line-height: 42px; font-size: 12px; }
.copyright a:hover{text-decoration: underline;}
@media (max-width:1200px) {
	#footer .wrapper { padding: 2em 15px 0; }
}
@media (max-width:800px) {
	#footer .wrapper { padding-top: 1em; }
	.footer-menu { width: 30%; }
	.footer-contact { width: 30%; }
	.footer-qr { float: none; width: 20%; clear: both; position: relative; top: -2.5em; }
}
@media (max-width:640px) {
	#footer .wrapper { padding-top: 1em; }
    .footer-logo, .footer-menu, .footer-contact, .footer-qr{ float: none; width: auto; }
	.footer-menu ul li { display: inline-block;}
    .footer-menu ul li:after {content: "|"; padding: 10px; display: inline-block;}
    .footer-menu ul li:last-child:after {content: "";}
    .footer-contact { margin-left: 8%; }
	.footer-qr {top: 0; margin: 10px 0; text-align: center;}
}
@media (max-width:480px) {
	.footer-menu { display: none; }
    .footer-contact{text-align: center;}
    .footer-contact .title:before{display: none;}
	.copyright { line-height: 1.5em; padding: 1em 15px; }
}

/* slide menu */
.slide-menu { background: rgba(0,0,0,.85); padding-bottom: 3em; }
.slide-menu > .title { font-size: 24px; font-weight: bold; margin-top: 0.5em; border-bottom: #f00 1px solid; padding-bottom: 0.5em; padding-left: 0.5em; background: #000; }
.slide-menu > .title:first-letter { color: #e40000; }
.slide-menu .main-nav { margin: 0; padding: 0; list-style-type: none; }
.slide-menu .main-nav li { line-height: 24px; border-bottom: #fff 1px solid; }
.slide-menu .main-nav li a { display: block; padding: 20px; }
.slide-menu .main-nav li a:hover, .slide-menu .main-nav li a:focus, .slide-menu .main-nav li.active a { color: #f00; font-weight: bold;}
.slide-menu .main-nav li:nth-child(1) { -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */ animation-delay: 0s; }
.slide-menu .main-nav li:nth-child(2) { -webkit-animation-delay: 0.1s; /* Safari 4.0 - 8.0 */ animation-delay: 0.1s; }
.slide-menu .main-nav li:nth-child(3) { -webkit-animation-delay: 0.2s; /* Safari 4.0 - 8.0 */ animation-delay: 0.2s; }
.slide-menu .main-nav li:nth-child(4) { -webkit-animation-delay: 0.3s; /* Safari 4.0 - 8.0 */ animation-delay: 0.3s; }
.slide-menu .main-nav li:nth-child(5) { -webkit-animation-delay: 0.4s; /* Safari 4.0 - 8.0 */ animation-delay: 0.4s; }
.slide-menu .main-nav li:nth-child(6) { -webkit-animation-delay: 0.5s; /* Safari 4.0 - 8.0 */ animation-delay: 0.5s; }

.slide-menu .side-menu { display: block; width: 100%; }
.slide-menu .side-menu .title { padding: 0.5em; margin-bottom: 0; border-bottom: #f00 1px solid; text-transform: inherit; background: #000; }
.slide-menu .side-nav > li > a { border-left: none; border-right: none; }
.slide-menu .side-nav > li:first-child > a { border-top: none; }
.slide-menu .side-nav > li > a:hover, .slide-menu .side-nav > li.active > a { font-weight: bold; }

.news-n{display: none;}
.main-menu ul li:last-child{display: none;}