/***********************************************************************************
 *	+ PAGE WRAPPER
 ***********************************************************************************/
@font-face {
    font-family:MontReg;
    src: url('../fonts/Montserrat-Regular.ttf');
}
@font-face {
    font-family:MontLight;
    src: url('../fonts/Montserrat-Light.otf');
}
html,body { font-family:MontLight; 
	color: 666; background-color: #fff;
	line-height: 25px; outline: none; font: 14px  MontLight;
}
 	:root { 
        --hcolor: #f97422;
	}
	a  {color: #666; }

	.pc { display: block; }
	.mobile { display: none; }
	
	a:hover,
	a:focus { 
		outline: 0;
		text-decoration: none;
		color: #f97422;
	}

 	#main-container {
		position: relative;
		overflow: hidden;
		background-color: #fff; 
	}
	
	.boxed {
		background: url(../images/bg-pattern-1.png) repeat top left;
	}
	
	.boxed #main-container {
		margin: 0 auto;
		position: relative;
		max-width: 1200px;
		-webkit-box-shadow: 0px 0px 5px #000;
				box-shadow: 0px 0px 5px #000;
	}
	
	.spanopacity { opacity: 0; width: 50px; height: 50px; position: absolute; right: 0; top:0; z-index: 99999; display: none;  }

	.boxed .header-sticky {
		max-width: 1200px;
	}
	
	@media (min-width: 1400px) {
			
		.boxed #main-container,
		.boxed .header-sticky {
			max-width: 1200px;
		}
		
	}
/***********************************************************************************
 *	+ HEADER
 ***********************************************************************************/
 	.headercenter {  width:100%; position:relative; }
 	
	#header {
		position: relative; 
		width: 100%;
		display: flex; justify-content: center; align-items: center; 
		z-index: 9000; 
		-webkit-transition: all 0.3s;
				transition: all 0.3s;
	}
	
	#header [class^="col-"] {
		position: static;
	}
	.logobbr { position:absolute; left: calc(50% - 60px); z-index: 999; background: #fff; top:18px; padding: 10px; border-radius: 50%; 
        box-shadow: 0 3px 5px -5px #333;
		 
	}
 
	
	.logobbr img { width:80px; margin:10px;  }
	.topLanguage { position: absolute; left: 0; top: 30px; 
		margin: 0 0 0 20px; 
	}
	.topTel { 
		margin: 0 20px 0 0; font-weight: bold; position: absolute; right: 0; top: 30px;
	}
	.topTel i { margin-top: 1px; margin-right: 5px; }
	.topLanguage a,
	.topTel a { font-size: 14px; }
	.topLanguage a:last-child {  }

	@media (max-width: 991px) {
		#header { position: relative; }
		.spanopacity { display: block; }
		.topTel { 
			display: none;
		}
		.logobbr { position:absolute; left: calc( 50% - 50px); z-index: 999; background: none; top:0; padding: 5px; border-radius: 50%; }
		.logobbr img { max-height:80px; max-width:80px; margin:5px; }
	}
	
	@media (max-width: 767px) {
		#header { position: relative; } 
		.topLanguage { 
			margin: 0 0 0 15px;
		}
		.topLanguage a,
		.topTel a { font-size: 12px; }
		.topLanguage a:last-child { margin-left: 5px; }
		
		.spanopacity { display: block; }

		.pc { display: none; }
		.mobile { display: block; }
	}
	
/***********************************************************************************
 *	- LOGO
 ***********************************************************************************/

	#logo {
		max-width: 100%;
/*		margin:10px 0;*/
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	
	#logo img {
		display: inline-block; height: 45px;
	}

	.mbnavpad { padding:20px; }
	.mbnavpad2 { padding:0 20px 20px; }
	#devlogoClose { display:none; width:100%; background:#fff; z-index: 10000000; position: absolute; left:0;top:0; }
	#closeMenuBtn { border:#333 solid 2px; padding:4px 5px; color:#333; border-radius:50%; }
	#closeMenuBtn i { font-size:24px; }
/*	@media (min-width: 768px) and (max-width: 991px) {*/
	@media (max-width: 991px) {
		
		#logo { margin-top: 0; margin-left: 0; }
		#logo img,
		.mblogo img {
		 height: 60px;
		}
	}
	
	@media (max-width: 767px) {
		
		#logo { 
			margin-top: 0; margin-left: 0;
			padding:0; 
		}
		#logo img {
		 height: 60px;
		}
		#header {
			position: absolute; 
			width: 100%; left: 0; top: 0;
		}
		.topTel { display: none; }
		
	}

.navflex { display:flex; flex-wrap:wrap; }
.hide {
	display: none;
}
#navProducts { width:100%; }
#navProducts .bignav { width:22%; background:#efefef; padding:2rem 0;  }
#navProducts .bignav .bigname { padding:10px 0 10px 25px; }
#navProducts .bignav .bigname.active { background:#fff; font-weight:bold; color:#bf3031; }
#navProducts .bignav .bigname a { padding:0; color: #000; font-size:16px; }
#navProducts .bignav .bigname.active a { color:#bf3031; font-weight:bold; }
/*#navProducts .smallnav .bigtitle { font-weight:bold; color:#bf3031; padding-left:25px; }*/

#navProducts .smallnav { width:78%; padding-top: 4rem; }
#navProducts .smallnav .smallname { width:14%; padding:0; text-align:left;  margin-left:2%; }
#navProducts .smallnav .smallname:nth-child(6n+1) { margin-left:4%; }
#navProducts .smallnav .smallname a {  padding:5px 0 0; font-size:.875rem;  }
#navProducts .smallnav .smallname a:hover { color:#bf3031;   }
 
.navService .smallnav { padding-top: 4rem; padding-bottom:40px; }
.navService .smallnav .smallname { width:14.5%; padding:0; text-align:left;  margin-left:2%; }
.navService .smallnav .smallname:nth-child(6n+1) { margin-left:3%; }
.navService .smallnav .smallname a {  padding:5px 0 0; font-size:.875rem;  }
.navService .smallnav .smallname a:hover { color:#bf3031;   }

/***********************************************************************************
 *	- MENU
 ***********************************************************************************/
 	 
 	.menu,
	.menu ul {
		padding: 0;  
		margin: 0 auto; width: 1200px;
		list-style: none; display: flex; justify-content: space-between; align-items: center;
	}
	.menu .micon { font-size: 13px; }
	.menu {
		margin-top: 1px;
	}
	.menu li.dropdown ul li a.flex-between { display: flex; justify-content: space-between; align-items: center; }
	.menu li.dropdown ul li i { font-size: 12px; }
	.menu > li { 
		float: left; 
		line-height: 60px; 
/*		background: #000;*/
	}
	
	.menu li a {
		display: inline-block;
		color: #1f1f1f;
		font-size: 16px;
		font-weight: 400;
		text-decoration: none;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	
	.menu li a:hover,
	.menu li.active > a { color: #f97422; }
	
	.menu > li > a {
		position: relative;
		margin: 0 10px;
		padding: 10px 0;
		text-transform: uppercase;
	}
	.menu > li:first-child > a { margin-left: 0;}
	.menu > li:last-child > a { margin-right: 0; }
 
 	 
	.menu > li:nth-child(5) > a {
 		marign:0 4rem; opacity: 0; background: #000;
	}
	.menu li.dropdown ul {
		position: absolute;
		top: 100%; left: -8px;
		display: none;
		z-index: 888;
		line-height:26px; 
		width: 160px;
/*		border: 1px solid #fff;*/
		background-color: #fff;
		box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
	}
	.menu li:nth-child(8) ul  {
		width: 250px;  
	}
	.menu li:nth-child(3) > ul  {
		width: 80rem; left: -18rem;
	}
	.menu li:nth-child(4) > ul  {
		width: 80rem; left: -28rem;
	}
	.menu li:nth-child(6) > ul  {
		width: 80rem; left: -45.5rem;
	}
	.menu li:nth-child(3) ul li,
	.menu li:nth-child(7) ul li  {
		width: 230px; overflow: hidden; float: left;
		 
	}
	#haohuathree { width:200px; }
	.menu li.dropdown ul ul {
		top: -1px;
		left: 100%;
		line-height:22px; 
	}
	.menu li.dropdown:hover > ul { display: block; }
	
	.menu li.dropdown ul li a {
/*		border-bottom: 1px solid #fff;*/
		padding: 5px 10px 5px 15px;
		font-size: 12px;
		color: #333;
	}
	
 
	
	.sf-arrows .sf-with-ul:after {
		position: absolute;
		top: 50%;
		right: -20px;
		width: 0;
		height: 0;
		margin-top: 28px;
		content: "";
		border: 5px solid transparent;
		border-top-color: #000;
		display: none;
	}
		
	.sf-arrows > li:hover > .sf-with-ul:after { border-top-color: #999; }
	.sf-arrows ul .sf-with-ul:after {
		display: block;
		margin-top: -5px;
		margin-right: 35px;
		border-color: transparent;
		border-left-color: #000;
	}
	.sf-arrows ul li:hover > .sf-with-ul:after { border-left-color: #999; }

	.menu li.dropdown ul#devprolist { width:480px;  }
	
	@media (min-width: 1280px) and (max-width: 1440px) {
	 	.menu,
		.menu ul {
			 width: 1000px;
		}
		.logobbr { left:calc( 50% - 40px); }
		.logobbr img { width:60px; margin:10px;  }
		.menu > li > a {
			position: relative;
			margin: 0 10px;
			padding: 10px 0; font-size: 14px;
			text-transform: uppercase;
		}
		.menu > li:first-child > a { margin-left: 0;}
		.menu > li:last-child > a { margin-right: 0; }
		.menu > li:nth-child(5) > a {
			margin:0 3rem;
		}
		.menu li:nth-child(3) > ul  {
			width: 69rem; left: -14.5rem;
		}
		.menu li:nth-child(4) > ul  {
			width: 69rem; left: -22.5rem;
		}
		.menu li:nth-child(6) > ul  {
			width: 69rem; left: -40.5rem;
		}
		#navProducts .bignav .bigname { padding:10px 0 10px 20px;  }
		#navProducts .bignav .bigname a {  font-size:14px; }
		#navProducts .smallnav {  padding-top: 3rem; }
		.navService .smallnav { padding-top: 3rem;  }

	}
	@media (min-width: 1024px) and (max-width: 1280px) {
	 	.menu,
		.menu ul {
			 width: 900px;
		}
		.logobbr { left:calc( 50% - 34px); }
		.logobbr img { width:50px; margin:10px;  }
		.menu > li > a {
			position: relative;
			margin: 0 5px;
			padding: 10px 0; font-size: 13px;
			text-transform: uppercase;
		}
		.menu > li:first-child > a { margin-left: 0;}
		.menu > li:last-child > a { margin-right: 0; }
		.menu > li:nth-child(5) > a {
			margin:0 1.5rem;
		}
		.menu li:nth-child(3) > ul  {
			width: 63rem; left: -14rem;
		}
		.menu li:nth-child(4) > ul  {
			width: 63rem; left: -21rem;
		}
		.menu li:nth-child(6) > ul  {
			width: 63rem; left: -36rem;
		}
		.topLanguage {  top: 10px; 
			margin: 0 0 0 12px; 
		}
		.topTel { 
			margin: 0 12px 0 0; top: 10px;
		}
		#navProducts .bignav .bigname { padding:10px 0 10px 15px;  }
		#navProducts .bignav .bigname a {  font-size:13px; }
		#navProducts .bignav .bigname.active a { color:#bf3031; font-weight:bold; }

		#navProducts .smallnav {  padding-top: 2rem; }
		.navService .smallnav { padding-top: 2rem;  }
	}
	@media (min-width: 768px) and (max-width: 1024px) {
		.menu { display: none; }
		.piconright4 { display: none; }
	}
	
	@media (max-width: 767px) {
	
		.menu { display: none; }
		 
		.piconright4 { display: none; }
		
	}


	

	
/***********************************************************************************
 *	- MOBILE MENU
 ***********************************************************************************/	
	
	#mobile-menu-button {
		float: right;
		display: none;
		background-color: rgba(0,0,0,.5); 
		color: #fff;
		line-height: 24px;
		margin-top: 25px;
		padding:5px 5px 5px;
		text-decoration: none;
	}
	#mobile-menu-button i { font-size: 24px; }
	
	#mobile-menu,
	#mobile-menu ul {
		list-style: none;
		display: none;
		margin: 0;
	}
	
	#mobile-menu { 
		background-color: #fff; width: 100%;
		border-bottom: 1px solid #fff; position: absolute; left: 0; z-index: 9999; top: 130px; overflow: auto;
	}
	
	#mobile-menu li a {
		display: block;
		border-top: 1px solid rgba(0,0,0,.05);
		color: #333;
		padding: 12px 20px;
		text-decoration: none;
	}
	
	#mobile-menu > li > a {
		font-weight: 400;
		text-transform: uppercase;
	}
	
	#mobile-menu ul a {
		padding-left: 40px;
	}
	
	#mobile-menu ul ul a {
		padding-left: 60px;
	}
	
	#mobile-menu .megamenu-container {
	 	border-top: 1px solid #eee; 
		display: none;
		margin-left: 0;
	}
	
	#mobile-menu .megamenu-container .section {
		float: none;
		width: 100%;
		margin-bottom: -1px;
		padding: 0 20px 20px;
	}
	
	#mobile-menu .megamenu-container .section ul {
		display: block;
		margin: 0 -25px -20px;
		border-bottom: 1px solid #eee;
	}
	
	#mobile-menu .megamenu-container .section ul a {
	 	border-top: none; 
		padding-left: 40px;
	}
	
	#mobile-menu li.dropdown > a,
	#mobile-menu li.megamenu > a { 
		position: relative;
	}
	
	#mobile-menu li.dropdown > a:after,
	#mobile-menu li.megamenu > a:after {
		position: absolute;
		top: 50%;
		right: 20px;
		width: 0;
		height: 0;
		margin-top: -2px;
		content: "";
		border: 5px solid transparent;
		border-top-color: #666;
	}
	
	#mobile-menu li.dropdown > a.open:after,
	#mobile-menu li.megamenu > a.open:after {
		border-top-color: transparent;
		border-bottom-color: #eee;
	}
	
/*	@media (min-width: 768px) and (max-width: 991px) {*/
	@media (max-width: 991px) {
		 

		#mobile-menu-button {
			position: absolute;
			display: block;
			top: 0;
			right: 20px;
		}
		
	}
	
	@media (max-width: 767px) {
	
		#mobile-menu-button {
			position: absolute;
			top: 0;
			right: 20px;
			display: block;
		}
		#mobile-menu li a {
			 font-size: 14px;
		}
		
	}
	
/***********************************************************************************
 *	- SEARCH
 ***********************************************************************************/		
	/*.menu li.search { display: flex; justify-content: flex-start; align-items: center; }
	
	.menu li.search a {
		margin:0 6px;
	}
	 
	
	.menu li.search a i { 
		font-size: 18px;
		font-weight: 700;
	}
	.menu li a.cart {
		margin:0 6px 0; position: relative;
	}
	.menu li a.cart span { font-size: 10px; position: absolute; right: -8px; top:12px; background-color: #f00; color: #fff; border-radius: 50%; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center; }
	.menu li.search a.wxqrcode {
		margin:1px 6px 0;
	}
	.menu li.search a.wxqrcode i { 
		font-size: 14px;
		font-weight: 700;
	}

	.menu li.search a.language {
		margin:1px 0 0 8px;
	}
	.menu li.search a img { 
		 width: 22px;margin: 0;
	}*/

	@media (min-width: 768px) and (max-width: 991px) {
		
		 
		
	}
	
	@media (max-width: 767px) {
	
		 #mobile-menu li.search { display: flex; justify-content: space-between; align-items: center; }
		 #mobile-menu li.search a { display: inline-block; border-top: none; }
		 #mobile-menu li.search a img { 
			 width: 22px;
		}
		 #mobile-menu li a.cart {
			 position: relative;
		}
		#mobile-menu li a.cart span { font-size: 10px; position: absolute; right:0; top:0; background-color: #f00; color: #fff; border-radius: 50%; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center; }
		#mobile-menu li.search a i { 
			font-size: 22px;
			font-weight: 700;
		}
		#mobile-menu li.search a img { 
			 width: 24px; 
		}
		
	}

 
/***********************************************************************************
 *	- STICKY
 ***********************************************************************************/
 	
 	.header-pagenav {
		position: fixed;
		top: 55px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100%;
		z-index: 2000;
		border-bottom: #fff solid 1px;
		background-color: #fff;
		box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.2);
	}

	#header-sticky [class^="col-"] {
		position: static;
	}
	
	#header-sticky .container {
		position: relative;
	}

	.navtop { position: relative; }
	.logoTop { position: fixed; left: 0; top: 0; margin: 0 auto;
		width: 100%; background-color: #fff;
		z-index: 9999;   }
	#header-sticky {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100%;
		z-index: 8000; 
		background-color: #fff;
		box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.1);
	}
	
	.header-sticky #logo {
		margin-top: 0;
		padding: 15px 0;
		-webkit-transition: all .8s linear;
				transition: all .8s linear;
	}
	
	.header-sticky .menu { 
		margin-top: 5px; 
		-webkit-transition: all .8s linear;
				transition: all .8s linear;
	}
	
	.header-sticky .menu > li > a {
		padding: 20px 0 20px 0;
		-webkit-transition: all .8s linear;
				transition: all .8s linear;
	}
	
/*	@media (min-width: 768px) and (max-width: 991px) {*/
	@media (max-width: 991px) {
		
		#header-sticky { visibility: hidden; }
		.headercenter { height:80px; }
		
	}
	
	@media (max-width: 767px) {
		
		#header-sticky { visibility: hidden; }
		
		
	}


#layBanner .itemImg img { max-width: 100%; width:100%; }

.pagestyle,.pagestyle ul { 
		display: flex; justify-content: center; align-items: center;  
	}
	.pagestyle li { width: 28px; height: 28px; margin: 2px; line-height: 26px; color:#000; border: #eee solid 1px; text-align: center; }
	.pagestyle li.active,
	.pagestyle li:hover { background-color: var(--hcolor); color: #fff; cursor: pointer; border: var(--hcolor) solid 1px; }

	.pagestyle li.active a,
	.pagestyle li:hover a {  color: #fff;  }