/***********************************************************************************
 *	+ 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; font-size: 12px;
	color: 666; background-color: #fff;
	line-height: 25px; outline: none;
}
 	:root { 
        --hcolor: #02773a;
	}
 	#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;
	}
	.clearboth { clear: both; height: 1px; }
	.spanopacity { display: none; opacity: 0; width: 50px; height: 50px; position: absolute; right: 0; top:0; z-index: 99999;  }

	.boxed .header-sticky {
		max-width: 1200px;
	}

	#pchide { display: none; }
	#pcshow { display: block; }
	.pchide { display: none; }
	.pcshow { display: block; }
	
	@media (min-width: 1400px) {
			
		.boxed #main-container,
		.boxed .header-sticky {
			max-width: 1350px;
		}
		
	}
 	.mt20 { padding-top: 20px; }
 	.mb30 { padding-bottom: 30px; }
 	.empty { margin-left: 20px; }
 	.mr60 { margin-right: 50px; }
/***********************************************************************************
 *	+ HEADER
 ***********************************************************************************/
	#header {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9000; background-color: #fff;
		-webkit-transition: all 0.3s;
				transition: all 0.3s;
	}
	
	#header [class^="col-"] {
		position: static;
	}
	
	#header .container { position: relative; }
	.navContent { position: absolute; top: 68px; right: 0; width: 320px; min-height: 80px; background-color: #fff;
	box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1; }
	.navpad { padding: 10px; }
	#navSearch { padding: 10px;  display: none;   }
	#navSearch input,
	#navUsers input,
	#navUsers button { width: 100%; margin-bottom: 10px; -webkit-appearance:none; }
	#navSearch span { position: absolute; right: 20px; top: 15px; font-size: 20px; cursor: pointer; }

	.MenuSearch { display: none;   }
	
	#navUsers { padding: 10px;   display: none; }
	#navUsers button { background-color: #333; border: none; color: #fff;   }
	#navUsers button:hover { background-color: var(--hcolor); }

	#navQrcode { padding: 10px;  display: none;  }
	#navQrcode li { text-align: center; width: 33%; display: flex; flex-direction: column; justify-content: space-between;  }
	#navQrcode li:first-child,
	#navQrcode li:nth-child(2) { margin-right: 20px; }
	#navQrcode li img { width: 100%; }

	.homeabout p { font-size: 12px; font-weight: 400; line-height: 28px; }

	@media (min-width: 768px) and (max-width: 991px) {
		
		#header { position: relative; }
		.homeabout p { font-size: 12px; font-weight: 300; line-height: 30px; }
		
	}

	.gray{
		  /*grayscale(val):val值越大灰度就越深*/
		  -webkit-filter: grayscale(100%);
		  -moz-filter: grayscale(100%);
		  -ms-filter: grayscale(100%);
		  -o-filter: grayscale(100%);
		  filter: grayscale(100%);
		  filter: gray;
	}

	
	@media (max-width: 767px) {
	
		#header { position: relative; }
		.navContent { position: absolute; top: 470px; right: 0; width: 100%; }
		#navSearch input,
		#navUsers input,
		#navUsers button { width: 100%; border-radius: 0; margin-bottom: 10px; height: 45px; line-height: 45px; -webkit-appearance:none; }
		#navSearch span { right: 20px; top: 20px; font-size: 22px;  }
		.homeabout p { font-size: 12px; font-weight: 300; line-height: 30px;  }
		
		.homeabout p:nth-child(3),
		.homeabout p:nth-child(4),
		.homeabout p:nth-child(5),
		.homeabout p:nth-child(6),
		.homeabout p:nth-child(7) { display: none; }
		.video { display: none; }
		.MenuSearch { position: absolute; left: 0; top:86px; width: 100%; background-color: rgba(0,0,0,.5); display: none;   }
		.menuInput { display: flex; position: relative; padding:8px 15px; }
		.MenuSearch input { width: 80%; background-color: rgba(0,0,0,.4); padding:5px 10px; height: 36px; font-size: .8rem; line-height: 36px; border: none; border-radius: 1px; }
		.MenuSearch span { position: absolute; right: 24%; top: 14px; font-size: 20px; color: #fff; cursor: pointer; }
		.MenuSearch a {  position: absolute; left: 81%; top: 8px; width: 16%; display: flex; justify-content: center; align-items: center; height: 36px; background-color: rgba(0,0,0,.4); color: #fff; border-radius: 1px; }
		.MenuSearch a img { max-height: 18px; margin-top: 2px; margin-right: 5px; }
		.mr60 { margin-right: 0; }

		#pchide { display: block; }
		#pcshow { display: none; }
		.pchide { display: block; }
		.pcshow { display: none; }
	}
	
/***********************************************************************************
 *	- LOGO
 ***********************************************************************************/

	#logo {
		max-width: 100%;
		margin-top: 0;
		padding: 15px 0;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	
	#logo img {
		display: inline-block; height: 45px;
	}
	
	@media (min-width: 768px) and (max-width: 991px) {
		
		#logo { margin-top: 0; }
		.spanopacity {  display: block; }
		
	}
	
	@media (max-width: 767px) {
		
		#logo { 
			margin-top: 0;
			padding: 20px 0; 
		}
		.spanopacity {  display: block; }
		#pro-mh { display: flex; flex-direction: column-reverse; }
		#pro-mhbanner { margin: 0 -15px; }
		.mt20 { padding-top:15px; }
	}

/***********************************************************************************
 *	- MENU
 ***********************************************************************************/
 	
 	.menu,
	.menu ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.menu .micon { font-size: 13px; }
	.menu {
		margin-top: 5px; margin-right: -15px;
		float: right;
	}
	.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;
	}
	
	.menu li a {
		display: block;
		color: #1f1f1f;
		font-size: 14px;
		font-weight: 400;
		text-decoration: none;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	
	.menu li a:hover,
	.menu li.active > a { color: #02773a; }
	
	.menu > li > a {
		position: relative;
		margin: 0 12px;
		padding: 20px 0;
		text-transform: uppercase;
	}
	.menu > li:first-child > a { margin-left: 0;}
	.menu > li:last-child > a { margin-right: 0; }
	.menu li.dropdown ul {
		position: absolute;
		top: 80%;
		display: none;
		z-index: 2000;
		width: 160px; padding: 10px 0;
		border: 1px solid #fff;
		background-color: #fff;
		box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
	}
	
	.menu li.dropdown ul ul {
		top: -1px;
		left: 100%;
	}
	
	.menu li.dropdown:hover > ul { display: block; }
	
	.menu li.dropdown ul li a {
		border-bottom: 1px solid #fff;
		padding: 5px 10px 5px 20px;
	}
	
	.menu li.megamenu .megamenu-container {
		position: absolute;
		top: 90%;
		left: 0;
		display: none;
		z-index: 2000;
		width: 100%;
		border: 1px solid #fff;
		background-color: #fff;
		box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
	}
	
	.megamenu-container .section {
		float: left;
		width: 25%;
		padding: 20px 20px 40px;
	}
	.megamenu-container .section h5 a {
		 color: #02773a; font-size: 16px;
	}
	
	.megamenu-container.col-2 .section { 
		width: 50%; 
	}
	
	.megamenu-container.col-3 .section { 
		width: 33.33333333%; 
	}
	
	.megamenu-container.col-4 .section { 
		width: 25%; 
	}
	
	.megamenu-container.col-5 .section { 
		width: 20%; 
	}
	
	.megamenu-container .section > ul { margin:0 -20px -20px; }
	
	.megamenu-container .section > ul li a {
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
		padding: 3px 20px;
	}
	
	.megamenu-container .section > ul li:last-child a { border-bottom: none; }
	
	.menu li.megamenu:hover > .megamenu-container { display: block; }
	
	.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; }
	
	@media (min-width: 768px) and (max-width: 991px) {
	
		.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: var(--hcolor); 
		color: #fff;
		line-height: 24px;
		margin-top: 25px;
		padding:5px 8px 1px; min-width: 75px;
		text-decoration: none; position: relative;
	}
	#mobile-menu-button i { font-size: 24px; }
	#mobile-menu-button span { position: absolute; right: 10px; top: 4px; font-size: 14px;  }
	
	#mobile-menu,
	#mobile-menu ul {
		list-style: none;
		display: none;
		margin:0;
	}
	
	#mobile-menu { 
		background-color: rgba(0,0,0,.8); width: 100%;
		border-bottom: 1px solid #fff; position: absolute; z-index: 9999; top: 138px;
	}
	
	#mobile-menu li a {
		display: block;
		border-top: 1px solid rgba(0,0,0,.05);
		color: #fff;
		padding: 8px 20px;
		text-decoration: none;
	}
	
	#mobile-menu > li > a {
		font-weight: 700;
		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 #fff; 
		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 #fff;
	}
	
	#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: #fff;
	}
	
	#mobile-menu li.dropdown > a.open:after,
	#mobile-menu li.megamenu > a.open:after {
		border-top-color: transparent;
		border-bottom-color: #fff;
	}
	
	@media (min-width: 768px) and (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.search a {
			display: block;
			border-top: 1px solid rgba(0,0,0,.05);
			color: #fff;
			padding: 8px 20px;
			text-decoration: none;
		}
		#mobile-menu li a {
			 font-size: 14px; font-weight: 400;
		}
		
	}
	
/***********************************************************************************
 *	- SEARCH
 ***********************************************************************************/		
	.menu li.search { display: flex; justify-content: flex-start; align-items: center; }
	
	.menu li.search a {
		margin:-14px 6px 0;
	}
	 
	
	.menu li.search a i { 
		font-size: 18px;
		font-weight: 700;
	}
	.menu li a.cart {
		margin:-22px 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,
	.menu li.search a.webSearch {
		margin:-1px 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px;
	}
	.menu li.search a.wxqrcode i { 
		font-size: 14px;
		font-weight: 700; margin-bottom: 0;
	}
	.menu li.search a.wxqrcode span,
	.menu li.search a.language span,
	.menu li.search a.webSearch span { margin-top: -5px; }

	.menu li.search a.language {
		margin:0 0 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px;
	}
	.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;*/
		 display: none; }
		 #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: 68px;
		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;
	}

	#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) {
		
		#header-sticky { visibility: hidden; }
		
	}
	
	@media (max-width: 767px) {
		
		#header-sticky { visibility: hidden; }
		
	}

/***********************************************************************************
 *	+ PAGE CONTENT
 ***********************************************************************************/
	
	#page-content {}

/***********************************************************************************
 *	- PAGE HEADER
 ***********************************************************************************/
 	.indexbg1 { background-image: url(../../images/b2.jpg); }
 	.indexbg2 { background-image: url(../../images/b1.jpg); }
 	.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-container .swiper-slide {
      text-align: center;
      background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;
      background-repeat: no-repeat;
	  background-position: center 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .bfont { max-height: 150px; }
      /*包裹自定义分页器的div的位置等CSS样式*/
	.paginationindex { position: absolute; right:30px; display: flex; justify-content: center; align-items: center;
	flex-direction: column; top: 45%; z-index: 9990; width:120px; }
	.paginationindex a { margin: 5px; color: #fff; width:45px; border:rgba(255,255,255,.6) solid 1px; border-radius: 50%;  height: 45px; display: flex; justify-content: center; align-items: center; text-decoration: none; }
	.paginationindex a i { font-size: 28px; color: #fff; }
	.paginationindex a:hover {border:rgba(255,255,255,1) solid 1px; font-weight: bold; }

	.paginationdisc { position: absolute; display: flex; left:48%; bottom:25px;  z-index: 9990; }
	.paginationdisc span { margin-left: 8px; display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #ccc; }
	.paginationdisc span:first-child { background-color: #fff; }
	#page-header { 
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		height:600px; display: flex; justify-content: flex-start; align-items: flex-start;
	}
	
	#page-header h2 {
		color: #fff;
		text-transform: uppercase;
	}
	
	#page-header .breadcrumb {
		background-color: transparent;
		border-radius: 0;
		list-style: outside none none;
		margin-bottom: 0;
		padding: 0;
	}
	
	#page-header .breadcrumb li { display: inline-block; }
	
	#page-header .breadcrumb li 	{
		font-family: 'Montserrat', sans-serif;
		font-size: 14px;
		font-weight: 400;
		text-transform: uppercase;
		text-decoration: none;
	}
	
	#page-header .breadcrumb li a	{
		text-decoration: none;
		color: #1e1a19;
	}
	
	.breadcrumb > li + li:before {
		color: #1e1a19;
		content: "/ ";
		padding: 0 10px;
	}
	
	.breadcrumb > .active { color: #1e1a19; }
	
	@media (min-width: 768px) and (max-width: 991px) {

		#page-header {   }
		#page-header .bfont { max-height: 80px; }
		
	}
	
	@media (max-width: 767px) {
		
		#page-header { height: 250px;  }
		#page-header .bfont { max-height: 60px; }
		.paginationindex {  right:0; top: 38%; z-index: 9990; width:60px; }
		.paginationindex a { width:32px; height: 32px; }
		#scroll-up {
			bottom: 40px;
			right: 10px;
			height: 35px;
			width: 35px;
			font-size: 15px;
			line-height: 35px;
		}
		.header-pagenav {
			position: fixed;
			top: 0;
			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);
		}
		.swiper-container .swiper-slide {
		     background-position: center top;
		}
	}

	@media (max-width: 375px) {
		#page-header { height: 220px;  }
	}

	@media (max-width: 320px) {
		#page-header { height: 190px;  }
	}
 	 

/***********************************************************************************
 *	+ PAGES
 ***********************************************************************************/

/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/
 
	.about-me {
		margin:50px 0; padding: 0;
		text-align: left;
	}
	.aboutpb { padding-bottom: 25px; }
	.about-me h3 {
		 font-weight: 300; font-size: 36px; margin-top:20px; margin-bottom: 1.5rem;
	}
	.about-me p { margin-bottom: 10px; }
	.about-me a.more { border:#ccc solid 1px;padding: 5px 25px; color: #666; font-size: 12px;   }
 	.about-me a.more:hover { border:var(--hcolor) solid 1px; color: var(--hcolor);  }
 
  
/***********************************************************************************
 *	- SERVICES
 ***********************************************************************************/
 
	.category { margin:50px 0; display: flex; }
	.category h3 { font-weight:400; display: flex; align-items: center; padding: 10px 10px 5px; margin: 0; font-size: 22px;  }
	.category h3 img { max-width: 50px; display: none; }
 	.category h6 { font-family: MontLight; padding: 0 10px; margin:-10px 0 0; }
 	.category p { padding: 10px; margin-bottom: 0; }
 	.category p > a { padding:5px 10px; border:#eee solid 1px; margin-right: 5px;  }
 	.category p > a:hover { border:var(--hcolor) solid 1px; }
 	.category p > a:last-child { margin-right: 0; }
 	.category a.more { margin: 0; padding: 0 5px; display: flex; }
 	.category a.more i { margin-top: 1px; }
 	.clist:hover h3,
 	.clist:hover h6,
 	.clist:hover a { color: var(--hcolor); }
 	.clist:hover .cateimg img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}
	.clist { width: 24%; margin-right: 1%; }
	.clist:last-child { margin-right: 0; }
	.clist .cateimg {
	  overflow: hidden;
	  position: relative;
	}
	.clist .cateimg a {
	  display: block;
	}
	.clist .cateimg a img {
	  width: 100%; border:0;
	  -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;
	}



/***********************************************************************************
 *	- caselist
 ***********************************************************************************/
 	.clists { margin:50px 0; height: 530px; display: flex; justify-content: flex-start; flex-wrap: wrap; overflow: hidden; }
	.caselist:hover a i { font-size: 42px; }
	.caselist:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}
	.caselist { width: 23%; margin-bottom: 30px; margin-right: 30px;
	  overflow: hidden;
	  position: relative;
	}
	.caselist:nth-child(4n) { margin-right: 0; }
	.caselist .casetitle { width: 100%; height: 100%; margin-top: 20px;
	   display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
	   -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;
	}
	.caselist .casetitle > div {  }
	.caselist .casetitle * { color: #333; }
	.caselist a i { font-size: 36px; margin-bottom: 5px; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; margin-right: 10px; }
	.caselist a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; }
	.caselist a div h3 { margin-bottom: 0; text-align: left; font-size: 18px; }
	.caselist a div h6 { font-family: MontLight; margin-top: 0; text-align: left; font-weight: 200; }

	.caseSolution { display: flex; flex-direction: column; }
 
	.caselist2 { width: 12.5%; margin-bottom:20px;
	  overflow: hidden;
	  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
	}
	.caselist2 .ctitle { font-size: 14px; z-index: 9; }
	 
	.caselist2:nth-child(6n) { margin-right: 0; }
	.caselist2 a img { width: 100%; height: 100%;  -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;  }
	.caselist2:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1); z-index: 1;
	}

	.photolist { width: 24%; margin-bottom:10px; margin-right: 1%;
	  overflow: hidden;
	  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
	}
	.photolist:nth-child(4n) { margin-right: 0; }
	.photolist img { width: 100%; height: 100%;  -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;  }
	.photolist:hover  img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1); z-index: 1;
	}


	.caselist3 { width: 12%; margin-right: 0.5%;   margin-bottom: 20px; 
	  overflow: hidden;
	  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
	}
	.caselist3 .ctitle { font-size: 12px; z-index: 9; }
	 
	.caselist3:nth-child(8n) { margin-right: 0; }
	.caselist3 a { overflow: hidden; }
	.caselist3 a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; border:#dedede solid 1px;  }
	.caselist3:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1); z-index: 1;
	}
 


/***********************************************************************************
 *	- solution
 ***********************************************************************************/
 	.solution,
 	.custom { margin:50px 0; padding: 40px 0; background-color: #f8f8f8; }
 	.social .title,
 	.solution .title,
 	.custom .title{ text-align: center; display: flex; align-items: center; justify-content: center; line-height: 30px; font-size: 32px; color: #000; }
 	.solution .title span { font-size: 14px; }

 	.phide { display: none; }

 	.solution-list { padding: 50px 0 0; text-align: center; }
 	.solution-list h3 { font-weight:400; padding: 0; margin: 0; font-size: 22px;  }
 	.solution-list h6 { font-family: MontLight; }
 	.solution-list p { padding: 10px 15px; text-align: left; }
 	.solution-list:hover h3,
 	.solution-list:hover h6,
 	.solution-list:hover i { color: var(--hcolor); }
 	.solution-list:hover p { color: #666; }
	.solution-list i {
		display: inline-block;
		margin-bottom: 30px;
		font-size: 48px;
		color: #bbb;
		-webkit-transition: all .3s;
				transition: all .3s;
	}
	.solution-list:hover i {
		-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
				transform: scale(1.1);
	}

	.gb-more { text-align: center; display: flex; justify-content: center; align-items: center; }
	.gb-more a { border:#ccc solid 1px; display: flex; justify-content: center; align-items: center; padding: 2px 25px; color: #666; font-size: 12px; cursor: pointer; }
	.gb-more a:hover { border:var(--hcolor) solid 1px; color: var(--hcolor); background-color: var(--hcolor); color: #fff;  }
/***********************************************************************************
 *	- custom
 ***********************************************************************************/
 	#cbtn1,#cbtn3,#cbtn5,#cbtn7 { opacity: 1; }
 	#cbtn2,#cbtn4,#cbtn6,#cbtn8 { opacity: 0; }
 	.boderline,
 	.boderline2 { margin: -110px -10px 0;  }

 	ul.custom-list { padding: 50px 0 20px; display: flex; flex-wrap: wrap; height: 305px; overflow: hidden; }
 	ul.custom-list li { list-style: none; margin: 5px; opacity: 1; }
 	ul.custom-list li:hover {  opacity: 1; }
 	ul.custom-list li img,
 	ul.company-list li img { max-width: 120px; }
 	/*ul.company-list li img {  
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; }
  	ul.company-list li img:hover {
  		  -webkit-filter: grayscale(1%);
		  -moz-filter: grayscale(1%);
		  -ms-filter: grayscale(1%);
		  -o-filter: grayscale(1%);
		  filter: grayscale(1%);
		  filter: ;
  	}*/

 	ul.company-list { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; height: 305px; overflow: hidden; }
 	ul.company-list li { list-style: none; margin: 5px; opacity: 1; }
 	ul.company-list li:hover {  opacity: 1; }

/***********************************************************************************
 *	- news
 ***********************************************************************************/
 	.news { margin-top:-25px; margin-bottom: 50px; }
	.newstitle span { font-size: 30px; color: #000; margin-left: -15px; }
	.newstitle2 span { font-size: 30px; color: #000; margin-left: 0; }
	.newstitle3 { display: flex; justify-content: space-between; margin-bottom: 5px; }
	.newstitle3 span { font-size: 20px; color: #000; margin-left: 0; }
	.newstitle3 a { border:#eee solid 1px; display: flex; padding:0 10px; }
	.newstitle3 a:hover { border:var(--hcolor) solid 1px; color: var(--hcolor); }
	.newslist { margin: 20px 10px 0 -15px;  }
	.newslist2 { margin: 20px 10px 0 0; }
	.nlist2 { display: flex; flex-direction: row; }
	.nlist2 .thumb  { 
		max-width: 235px; margin-right: 20px;
	}
	.news dl dt {  display: flex; justify-content: space-between; }
	.news dl dt a {font-weight: 400; font-size: 14px; color: #000; }
	.news dl dt span { font-size: 12px; font-weight: 200; color: #999; }
	.news dl dd { padding:5px 0 20px; color: #999; border-bottom: #eee solid 1px; margin-bottom: 10px;
	-webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; }
	.news dl:hover dd { border-bottom:var(--hcolor) solid 1px; color: #333; }
	.news dl:hover dt a,
	.news dl:hover dt span,
	.news dl:hover dd a { color: var(--hcolor); }

/***********************************************************************************
 *	- clients
 ***********************************************************************************/
 	.clients,
 	.companydev { margin:50px 0;}
 	.home-case { margin:50px 0; }
 	.homecate { margin:50px 0 0; }

 	.clients .title,
 	.homecate .title,
 	.companydev .title,
 	.home-case .title { text-align: center; line-height: 30px; font-size: 32px; color: #000; }
 	.clients .title span {  color: var(--hcolor); font-size: 40px; font-weight: bold; font-family: MontReg; }

 	.swiper-clients {
      width: 100%; overflow: hidden; margin-top: 30px;
      height: 100%; 
    }
    .swiper-solution {
      width: 100%; overflow: hidden;  margin-top: 30px;
      height: 100%; 
    }

    .swiper-wenhua {
      width: 100%; overflow: hidden; 
      height: 100%; 
    }
    .swiper-wenhua .swiper-slide img {
	       width: 100%;
	    }
	.swiper-wenhua .swiper-slide {
      text-align: center; height: 470px; 
       
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-transition: all .3s;
	  transition: all .3s;
    }

    .swiper-about {
      width: 100%; overflow: hidden; 
      height: 100%; 
    }
    .swiper-about .swiper-slide img {
	       width: 100%;
	    }
    .swiper-pos,
    #p_solution  { position: relative; }
    .swiper-pos .swiper-next,
    .swiper-pos .swiper-prev,
    .swiper-solution .swiper-next,
    .swiper-solution .swiper-prev {
    	position: absolute; top: 48%; outline: none;
    }
    .swiper-about .swiper-next,
    .swiper-about .swiper-prev {
    	position: absolute; top: 40%; outline: none;
    }
    .swiper-pos .swiper-next i,
    .swiper-pos .swiper-prev i,
    .swiper-solution .swiper-next i,
    .swiper-solution .swiper-prev i,
    .swiper-about .swiper-next i,
    .swiper-about .swiper-prev i { font-size: 30px; color: #999; }
    .swiper-pos .swiper-next:hover i,
    .swiper-pos .swiper-prev:hover i,
    .swiper-solution .swiper-next:hover i,
    .swiper-solution .swiper-prev:hover i,
    .swiper-about .swiper-next:hover i,
    .swiper-about .swiper-prev:hover i { color: var(--hcolor); }
    .swiper-pos .swiper-prev,
    .swiper-solution .swiper-prev  { left: -50px; }
    .swiper-about .swiper-prev  { left: -20px; }
    .swiper-pos .swiper-next,
    .swiper-solution .swiper-next { right: -50px; }
    .swiper-about .swiper-next { right: -20px; }

    .swiper-about .swiper-slide {
      text-align: center; height: 250px; position: relative;
      flex-direction: column;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-transition: all .3s;
	  transition: all .3s;
    }
    .swiper-clients .swiper-slide {
      text-align: center; height: 260px;
      flex-direction: column; border: #dedede solid 1px; 
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-transition: all .3s;
	  transition: all .3s;
    }
    .swiper-clients .avatar { padding: 30px 0 10px; }	
    .swiper-clients .avatar img { border-radius: 50%; max-width: 88px; max-height: 88px; 
    	-webkit-transition: all .3s;
				transition: all .3s;
		-webkit-transition: all ease-in-out 0.3s;
	  	transition: all ease-in-out 0.3s;
		 }
 	.swiper-clients h3 { font-size: 18px; font-weight: 400; margin-bottom: 0; }
 	.swiper-clients h6 { color: #999; font-size: 12px; margin-bottom: 10px; }
 	.swiper-clients p { padding: 0 15px; }
 	.swiper-clients .swiper-slide:hover { 
 		border: var(--hcolor) solid 1px;
 	}
 	.swiper-clients .swiper-slide:hover h3 { color: var(--hcolor); }
 	.swiper-clients .swiper-slide:hover .avatar img {
 		-webkit-transform: scale(1.1);
	    transform: scale(1.1);
 	}

/***********************************************************************************
 *	+ FOOTER
 ***********************************************************************************/
 
 	#footer {
		padding: 40px 0;
		background-color: #1c2220;
		color: #e2e2e2;
		font-size: 13px;
	}
	#footer a { color: #fff; }
	#footer a:hover { color: var(--hcolor); }
	#footer .qrcode,
	#footer .qrcode p { display: flex; justify-content: flex-end; }
	#footer .qrcode p { flex-direction: column; text-align: center; }
	#footer .qrcode p {  margin-left: 10px; }
	#footer .qrcode img {max-height: 80px;}
	#footer .flogo { display: flex; align-items: center; }
	.pflogo { margin-left: -15px; }
	#footer  a { color: #ccc; }	
	.fnav { display: flex; justify-content: space-between; padding: 20px 0; }
	.fnav h3 { font-size: 18px; font-weight: 500; }
	.fnav .navlist { width: 14%; text-align: left; }
	.fnav .navlist li { list-style: none;  }
	.flinks { padding: 20px; border-top: #444c49 solid 1px; }
	.flinks a { margin-right: 10px; }
	#footer .copyright { font-size: 12px; margin-top: 15px; }
 
 
@media (max-width: 767px) {
		#footer {
			padding: 30px 0;
			font-size: 12px;
		}
		.swiper-about .swiper-next { right: 20px; z-index: 9999; display: none; }
		.swiper-about .swiper-prev { left: 20px; z-index: 9999; display: none; }
		.swiper-about .swiper-slide img {
	       width: 100%;
	    }
	    .aboutpb { padding-bottom: 0; }
	    .homecate { margin:0 0 20px; }
	    .homecate .title { font-size: 24px; }
		#footer .flogo { flex-direction: column-reverse; }
		#footer .qrcode img { max-height: 100px; margin-left: 10px; margin-bottom: 10px; }
		.pflogo { margin-left: 0; text-align: center; }
		.pflogo img { max-height: 50px; margin-top: 10px;  margin-bottom: 20px;}
		.fnav {flex-wrap: wrap; display: none; }
		.fnav h3 { font-size: 14px; font-weight: 500; }
		.fnav .navlist { width: 25%; text-align: center; }

		.about-me {
			margin:30px 0;
		}
		.about-me h3 {
			 font-size: 28px; margin-top:0; margin-bottom: 1.5rem;
		}
		.about-me-thumbnail img { width: 100%; }
		.about-me .video { margin-top: 20px; }
		.category { margin:0 10px; display: flex; flex-wrap: wrap;  }
		.clist { width: 48%; margin-right: 2%; }
		.clist:last-child { margin-right: 0; }
		.category h3 { font-weight:400; display: flex; justify-content: center; align-items: center; padding: 10px 0 10px; color: var(--hcolor); text-align: center; margin: 0; font-size: 16px;  }
		.category h3 img { max-width: 40px; display: block; }
	 	.category h6,  
	 	.category p, 
	 	.category a.more {display: none; }

		.solution,
 		.custom { margin:20px 0; padding: 20px 0; }
 		.solution .title,
 		.custom .title{ margin-bottom: 20px; font-size: 24px; }
 		#p_solution { display: flex; flex-wrap: wrap; }
 		.solution-list { padding: 20px 0 0; width: 50%; }
 		.solution-list p { padding: 5px 15px; line-height: 20px; }
 		.solution-list h3 { font-size: 18px;  }
 		.solution-list h6 { font-size: 12px; }
 		.solution-list i {
			margin-bottom: 20px;
			font-size: 36px;
		}
		.clients .title {  font-size: 24px; }
		.clients .title,
		.companydev { margin:30px 0 10px; }
	 	.companydev .title,
	 	.home-case .title { margin: 0 0 20px; font-size: 24px;  }
	 	.clients .title span {  font-size: 30px;  }
	 	.swiper-pos { position: relative; padding: 0 20px; }
	 	.swiper-pos .swiper-prev { left: 10px; }
    	.swiper-pos .swiper-next { right: 10px; }


    	.swiper-solution {
	      width: 96%; overflow: hidden;  margin-top: 30px;
	      margin-left: 2%;
	    }
    	 

    	ul.custom-list { padding:0; display: flex; flex-wrap: wrap; height: 280px;  }
 		ul.custom-list li { list-style: none; width: 30%; margin: 5px 0 5px 8px; }
 		ul.custom-list li a img { max-width: 100%; }

 		ul.company-list { padding:0; height: 280px;  }
 		ul.company-list li { width: 30%; margin: 5px 0 5px 8px; }
 		ul.company-list li img { max-width: 90px; }

 		.home-case { margin:20px 0 30px; }
 		.clists { margin:0 10px 20px; height: 660px;  }
		.caselist:hover a i { font-size: 32px; }
		.caselist .casetitle {  margin: 5px 0 10px; }
		.caselist { width: 49%; margin-bottom: 0; margin-right: 2%; }
		.caselist:nth-child(2n) { margin-right: 0; }
		.caselist a i { font-size: 26px; margin-bottom: 0;}
		.caselist a div h3 { margin-bottom: 0; font-size: 14px;  }
		.caselist a div h6 { font-size: 12px; margin-top: -5px; }

		.swiper-solution .swiper-prev  { top: 38%; left: 8px; z-index: 9999; color: #fff; }
        .swiper-solution .swiper-next { top: 38%; right: 8px; z-index: 9999; }
     	.swiper-solution .swiper-prev i,
     	.swiper-solution .swiper-next i { background-color: rgba(0,0,0,.5); padding: 5px; font-size: 26px; color: #fff; }

		.caselist2 { width: 50%; margin-bottom: 0; margin-right: 0; }
		.photolist { width: 50%; margin-bottom: 0; margin-right: 0; }
		.caselist3 { width: 32%; margin-bottom:10px; margin-right: 1%; }
		.caselist3:nth-child(3n) { margin-right: 0; }

		.news { margin-top:0; margin-bottom: 30px; }
		.newstitle span { font-size: 22px; margin-left:0; }
		.newstitle2 span { font-size: 22px; margin-left: 0; }
		.newslist { margin: 20px 10px 0 0; }
		.newslist2 { margin: 20px 10px 0 0; }
		.gb-more a {  padding: 0 20px; }

		.boderline,
 		.boderline2 { margin: -70px -10px 0; }
 		.boderline4 { margin: -70px -10px 0; }
 		.boderline img,
 		.boderline2 img{ width: 100%; height: 60px; }
		 
}
/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/

 	#class-header { 
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		height:350px; display: flex; justify-content: flex-start; align-items: flex-start;
	}
	.header1 { 
		background-image: url(../../images/aboutbg.jpg);
	}
	.header2 { 
		background-image: url(../../images/solution/solutionbg.jpg);
	}

	
	#class-header h1 { margin-top: 80px;
		color: #fff; font-weight: 700; font-family: MontReg;
		text-transform: uppercase; margin-bottom: 0;
	}
	#class-header h2{ width: 100%;
		color: #fff; font-size: 48px; font-family: MontReg;
		text-transform: uppercase; 
	}
	#class-header h6 {
		color: #fff;
		font-weight: 300; margin: 20px 26%;
	}
	.classbg { 
		background-color: rgba(0,0,0,.3); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
		flex-direction: column;
	}
	.aboutbgnew { 
		background: url(../../images/aboutgray.png) no-repeat center 130px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
		flex-direction: column;
	}


	 
/***********************************************************************************
 *	- class about
 ***********************************************************************************/
 
	.flex-center { display: flex; justify-content: center; align-items: center; }
	/* BLOG POST COMMENT FORM */
	.class-about { padding: 5px 0;   }
	.class-about p { margin-bottom: 10px; }
	.class-about h3 { margin: 20px 0; font-weight: 300; font-size: 28px; }
	.class-about h3.hcolor { color: var(--hcolor); font-weight: 600; }
	ul.about-ts { 
		margin-top: 20px; width: 100%;
		display: flex; justify-content: space-around;
	}
	ul.about-ts li {  flex-direction: column; justify-content: center; align-items: center; }
	ul.about-ts li:first-child i { font-size: 40px; margin-top: 5px;  }
	ul.about-ts li:first-child span { margin-top: -5px;  }
	ul.about-ts li i { font-size: 36px; margin-bottom: 20px; -webkit-transition: all .3s;
				transition: all .3s; color: var(--hcolor); }
	ul.about-ts li span { background-color: var(--hcolor); padding: 0 10px; border-radius: 15px; color: #fff; }
	ul.about-ts li:hover span { 
		background-color: var(--hcolor);
	}
	ul.about-ts li:hover i { 
		color: var(--hcolor); font-size: 40px;
	}
	ul.about-ts li:first-child:hover i { 
		color: var(--hcolor); font-size: 44px;
	}

	ul.product-solution { display: flex; margin-top: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
	ul.product-solution li { margin-top: 15px;  width: 10%; text-align: center; display: flex; flex-direction: row; justify-content: space-between; align-items: center;  }
	ul.product-solution li i { font-size: 36px; }
 

	ul.about-location { display: flex; align-items: flex-end; }
	ul.about-location li { position: relative; overflow: hidden;  }
	ul.about-location p { position: absolute; left: 0; bottom: 0; padding: 5px; background-color: rgba(0,0,0,.5);
	color: #fff; display: flex; width: 100%; margin: 0; }
	ul.about-location li p i {margin-top: 1px; margin-right: 3px;}
	ul.about-location li img{
		-webkit-transition: all .3s;
				transition: all .3s;
	}
	ul.about-location li:hover img {
		-webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	 
	.about2 { margin:50px 0; padding-bottom: 40px; background-color: #f8f8f8; }
	.service-internet { margin-top: 150px; font-size: 18px; line-height: 36px; color: #000; }
	.service-internet span { font-weight: 700; font-size: 25px; color: var(--hcolor); margin: 5px; }



	.class-qywh { padding:0;   }
	.comtabs { padding:60px 100px 0 60px; }
	.comtabs p { margin-right: 50px; font-size: 14px; }
	ul.com-nav { display: flex; }
	ul.com-nav li { padding: 10px 30px; cursor: pointer; background-color: #fff; color: #000; font-size: 18px; }
	ul.com-nav li.active,
	ul.com-nav li:hover { color: #fff; background-color:var(--hcolor); }

	#p_honor { padding-top: 30px; height: 510px; overflow: hidden; }
	#p_honor > div { display: flex; justify-content: center; align-items: center;  }
	#p_honor > div a p { text-align: center; margin: 0; }
	#p_honor p.child { height: 32px; line-height: 16px; align-items: center; justify-content: center; }
	#p_honor a img { margin-bottom: 25px; -webkit-transition: all .3s;
				transition: all .3s;  }
	#p_honor a:hover img { -webkit-transform: scale(1.1);
	    transform: scale(1.1); }
	.boderline3 { position: relative; }
	.boderline3 img { margin-top: -180px; }

	.boderline4 { margin: -150px -10px 0; position: relative; z-index: 999;  }

	.zrlist { display: flex; margin-top: 25px; justify-content: space-between; flex-direction: row; }
	.zrlist .pics { width: 35%; }
	.zrlist .social2 { width: 55%; }
	.social2 h3,
	.social2 h6 { margin: 10px 20px ; }
	.social2 h3 { font-weight: 400; }
	.social2 h6 { background-color: var(--hcolor); height: 4px; width: 20px; border-radius: 2px;  }
	.social2 p { line-height: 20px; margin:10px 20px;	}

	.social { margin-top:50px 0; padding: 40px 0; background-color: #f8f8f8; }
	#social { padding: 40px 0; display: flex; justify-content: space-between; align-items: flex-start; }
	#social .socialist { width:25%; display: flex; flex-direction: column; align-items: flex-start; }
	#social .socialist a.jishu { min-height: 190px; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; }
	#social .socialist a.jishu img { margin-bottom: 20px; }
	#social h3,
	#social h6 { margin: 10px 20px ; }
	 
	#social h3 { font-weight: 400; }
	#social h6 { background-color: var(--hcolor); height: 4px; width: 20px; border-radius: 2px;  }
	#social p { line-height: 20px; margin:10px 20px;	}

	#social .socialist:hover h3 {  color: var(--hcolor); }
	#social .socialist img{
		-webkit-transition: all .3s;
				transition: all .3s;
	}
	#social .socialist:hover img {
		-webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}

	.activity-year {  display: flex; justify-content: space-between; align-items: stretch; margin:10px -15px 20px; height:40px; }
	.activity-year li { text-align: center; width: 25%; height:40px; line-height: 40px; background-color: #333; }
	.activity-year li a { color: #fff; cursor: pointer; }
	.activity-year li.active,
	.activity-year li:hover { background-color: var(--hcolor);color: #fff; cursor: pointer; }
	.hdyear { position: relative; }
	.hdyear .yearlist { width: 26%; display: none; background-color: #333; position: absolute; right:-15px; top: 40px; }
	.hdyear .yearlist li { width: 100%;  color: #fff; padding: 5px 0; text-align: center; display: inline-block; }
	.hdyear .yearlist li:hover { background-color: var(--hcolor);color: #fff; }
	.hdyear .yearlist li a {color: #fff;}

@media (max-width: 767px) {
	#class-header { 
	 	background-position: center center;
		height:200px;
	}
	#class-header h1 {
		margin-top: 0;
		font-size: 32px; margin-bottom: 0;
	}
	#class-header h2 {
		margin: -20px 22% 0; font-size: 26px;
	}
	.about2 { margin: 30px 0 0; }
	.class-about { padding:0; }
	.class-about h3 { margin: 20px 0 10px;font-size: 28px; }
	ul.about-ts { 
		margin-top: 30px; width: 100%;
		display: flex; justify-content: space-between;
	}
	ul.about-ts li { margin-right: 0; }

	ul.about-location li:nth-child(2) { 
		margin-left: 10px;
		margin-right: 10px;
	}
	ul.about-location li p { font-size: 10px;  }
	.clients { margin: 0; }
	.flex-dis {  display: flex;
		flex-direction: column-reverse;
	}
 	.service-internet { margin:20px; font-size: 14px; line-height: 30px;  }
 	.service-internet span { font-size: 22px;  }
 	.comtabs { padding:20px;}
	.comtabs p { margin:5px 20px 0;font-size: 12px; }
	.comtabs h4 { padding: 0 10px; font-size: 14px; }
	ul.com-nav { display: flex; margin:0 10px; }
	ul.com-nav li { width: 33%; padding:5px 0; text-align: center; font-size: 14px; }
 	#p_honor { padding-top: 20px; height: 510px; overflow: hidden; display: flex; flex-wrap: wrap; }
	#p_honor > div { display: flex; justify-content: center; align-items: center; width: 50%;  }
	#p_honor > div > p { margin: 0; padding: 0; }
	#p_honor a img { margin-bottom: 10px; }
	.boderline3 img { margin-top: -100px; }

	.social { margin-top:0; padding: 20px 0 0; background-color: #f8f8f8; }
	#social { padding: 20px 0 0; flex-wrap: wrap; }
	#social .socialist { width:100%;  flex-direction: row; }
	#social .socialist a { width: 50%; }
	#social .socialist a.jishu { min-height: 170px; }
	#social .socialist a.jishu img { margin-bottom: 0; }
	#social h3,
	#social h6 { margin: 5px 15px; }
	#social h3 {  font-size: 16px; margin-top: 40px; }
	#social p { line-height: 20px; margin:10px 15px;}

	.imgov { overflow: hidden; }
	.zrlist {  margin-top: 20px;  }
	.zrlist .pics { width: 25%; padding-top: 10px; }
	.zrlist .social2 { width: 70%; }
	.social2 h3,
	.social2 h6 { margin:0 10px 10px 20px; }
	.social2 h3 { font-weight: 400; font-size: 16px; }
	.swiper-pos {  padding: 0 10px; }
}

@media (max-width: 415px) {
	#mh { display: none; }
	.clists { margin:15px 10px 25px;  }
	.boderline4 { margin: -60px -10px 0;   }
	.solution .title,
 	.custom .title{  font-size:24px; padding: 0 20px; }
}

@media (max-width: 320px) {
	.solution .title {  font-size:20px; padding: 0 20px;  }
}

	.history { margin:0; }
	.pagestyle ul { 
		display: flex; justify-content: center; align-items: center; margin-bottom: 50px;
	}
	.pagestyle ul li { width: 28px; height: 28px; margin: 2px; line-height: 26px; border: #eee solid 1px; text-align: center; }
	.pagestyle ul li.active,
	.pagestyle ul li:hover { background-color: var(--hcolor); color: #fff; cursor: pointer; border: var(--hcolor) solid 1px; }
	.pagestyle ul li a { color: #000; }
	.pagestyle ul li.active a,
	.pagestyle ul li:hover a { color: #fff; }
/***********************************************************************************
 *	- college
 ***********************************************************************************/ 
 	.page-postion { margin-top:20px; }
 	.page-postion i { font-size: 10px; }
 	.pro-postion { margin-top:5px; }
 	.pageNav { 
		display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:20px 0 40px; border-bottom: #dedede solid 1px; height:auto; min-height: 40px;
	}
	.pageNav li { text-align: center; height:40px; line-height: 40px; padding: 0 40px; background-color: #333; }
	.pageNav li.news { margin: 0; }
	.pageNav li a { color: #fff; cursor: pointer; }
	.pageNav li.active,
	.pageNav li:hover { background-color: var(--hcolor);color: #fff; cursor: pointer; }

	

	.college-list { padding-bottom: 40px; min-height: 400px; }
	.cglist  { 
		display: flex; padding:20px 25px; flex-direction: row; align-items: stretch; margin-bottom: 20px; box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.1);
	}
	.cglist:hover  {
		box-shadow: 0 5px 40px 0 rgba(38, 119, 74, 0.3);
	}
	.cglist .download  { 
		margin-left: 20px; display: flex; align-items: center; 
	}
	.cglist .download span { font-size: 28px; }
	.cglist .thumb  { 
		max-width: 260px; margin-right: 25px;
	}
	.cglist ._thumb  { 
		width: 120px; margin-right: 25px;
	}
	.cglist .thumb img,
	.cglist ._thumb img{
		-webkit-transition: all .3s;
				transition: all .3s;
		width: 100%;
	}
	.cglist:hover .thumb img,
	.cglist:hover ._thumb img {
		-webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	.cglist .cgContent { line-height: 21px; }
	.cglist .cgContent h5 { display: flex; justify-content: space-between; }
	.cglist .cgContent h5 span { font-size: 12px; color: #999; }
	.cglist .cgContent p { margin: 5px 0 10px ; }
	.cglist .cgContent ul { display: flex; margin: 0; padding: 0;   }
	.cglist .cgContent li { display: flex;   }
	.cglist .cgContent li { margin-right: 15px;  }
	.cglist .cgContent li:nth-child(2) i { font-size: 14px;  }
	.cglist .cgContent li i { margin-right: 5px; }

	.cglist:hover .cgContent h5 a,
	.cglist:hover .cgContent p,
	.cglist:hover .download span { color: var(--hcolor); }


	ul.college-rlist li { border-bottom: #eee solid 1px; padding: 2px 0; }
	ul.college-rlist li a { margin: 0; padding: 0; }
	ul.college-rlist li .icons { display: flex; padding: 0; margin-top: -5px; }
	ul.college-rlist li .icons span { display: flex; font-size: 10px; margin-right: 20px; font-weight: 200; color: #999; }
	ul.college-rlist li:hover { border-bottom: var(--hcolor) solid 1px; }
	ul.college-rlist li:hover a,
	ul.college-rlist li:hover .icons span { color: var(--hcolor);  }

	ul.college-btmlist { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 50px; }
	ul.college-btmlist li { display: flex; justify-content: space-between; border-bottom: #eee solid 1px; padding: 5px 0; width: 48%; }
	ul.college-btmlist li:hover { border-bottom: var(--hcolor) solid 1px; }
	ul.college-btmlist li:hover a { color: var(--hcolor);  }
	
/***********************************************************************************
 *	- shownews
 ***********************************************************************************/ 
 	.shownewspage h3 { font-weight: 400; }
 	.newscontent { padding-bottom: 50px; }
 	.news-icon { display: flex; color: #999; margin: 5px 0 10px; }
 	.news-icon span i { margin-right: 5px; }
 	.news-icon span { display: flex; font-size: 10px; margin-right: 25px; font-weight: 200; color: #999; }


 	.showsolution1 { display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; }
 	.solution-text { padding-bottom: 20px; padding-left:70px;  }
 	.showsolution1 h3 { position: relative; padding-left: 70px; font-weight: 400; min-width: 260px; }
 	.showsolution1 h3:before {
		content:"";
		color: #333; background-color: #333;
		position: absolute; top: 14px; left: 15px; width: 45px; height: 4px; border-radius: 2px; 
		 
	}

	.solution-prolist { display: flex; flex-direction: column; margin: 25px 0 10px; }
	.solution-prolist .thumb {width: 100%;  }
	.solution-prolist .thumb img { width: 100%; }
	.solution-prolist .protext { padding: 15px 0; font-size: 14px; }
	.solution-prolist .protext h3 { margin-bottom: 15px; }
	.solution-prolist .protext p { margin-bottom: 15px; line-height: 21px; }
	.solution-prolist .protext .lines { width: 40px; height: 4px; border-radius: 2px; background-color: #333; }
	.solution-prolist .protext .desctitle { font-size: 14px; color: #333; }
	.solution-prolist .protext .link { display: flex; margin-top:20px; }
	.solution-prolist .protext .link a { display: flex;  }
	.solution-prolist .protext .link a { display: flex; color: #555; padding: 3px 15px; border: #666 solid 1px;  }
	.solution-prolist .protext .link a { margin-right: 15px;  }
	.solution-prolist .protext .link a:hover { background-color: var(--hcolor); border: var(--hcolor) solid 1px; color: #fff;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); }

	.solution-prolist:hover { box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1); }

	.contact-map { height: 300px; }
	.contactjob { margin-bottom: 30px; flex-wrap: wrap; margin-top: 10px; display: flex; justify-content: space-between; }
	.contactjob2 { display: flex; align-items: center; justify-content: flex-start; }
	.p50 { padding: 50px; }
	.pd10 { padding-bottom: 10px; }
	.contactsh { 
		 color: #000;
	}
	.contactsh h4 { font-family:"Microsoft YaHei";font-family:"微软雅黑"; margin-bottom: 5px;  }
	.contactsh h5,
	.contactjob h5 { font-family:"Microsoft YaHei";font-family:"微软雅黑";  }
	.contactsh ul { 
		margin-top: 10px;
	}
	.contactsh li,
	.contactsh p { 
		margin-bottom: 5px; display: flex;
	}
	.contactsh li i,
	.contactsh p i { 
		margin-top: 1px; margin-right: 8px;
	}
	.contactsh p { 
		margin-bottom: 20px; color: #666;
	}
	.contactjob p { 
		margin-bottom: 5px; color: #666;
	}
	.lxewm { display: flex;
	}
	.lxewm img { max-height: 100px; }

	.feedback { width: 100%; margin-right: 0; }
	 
	.cline { width: 20%; border-left: #ccc solid 1px; text-align: right; }
	.feedback-form ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; }
	.feedback-form ul li { width: 50%; margin-bottom: 15px; }
	.feedback-form ul li:last-child { width: 100%; }
	.feedback-form h4 { font-size: 18px;}
	.feedback-form h4 span { font-size: 16px; }
	.feedback-form .input { border:#dedede solid 1px; -webkit-appearance:none; padding: 7px; height: 36px; width: 90%; border-radius: 2px; }
	.feedback-form .textarea { width: 95%; border-radius: 2px; -webkit-appearance:none; }
	.feedback-form  .feed-submit { margin:0 0 15px; display: flex; align-content: center; }
	.feedback-form  .feed-submit .submit-btn { background: #333; border-radius: 2px; border: none; padding: 3px 20px; font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; }
	.feedback-form  .feed-submit .submit-btn:hover { background: var(--hcolor); }
	.feed-submit .feed-msg { margin:5px 0 0 20px; display: none; font-size: 14px; color: #ff0000; }
	.feed-submit .feed-msg.green { color: #4ca913 }
	.feed-submit .submit-btn span,.feed-submit .feed-msg span { font-size: 16px; }
	 
	.feedflex { display: flex; }
	.inquire { padding: 20px; }
	.inform { justify-content: center; align-items: center;
	}
	.inform .input { width: 230px; border-radius: 2px; -webkit-appearance:none;
	}
	.inform button { 
		background-color: #333; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #fff; border: 0; margin-left: 10px; height: 36px; padding: 0 25px;
	}
	.inform button:hover {
		background-color: var(--hcolor);
	}




 	#lightbox_mask {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .7);
    }
    #lightbox_popup {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    #lightbox_popup .pic-view {
      position: absolute;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
      text-align: center;
    }
    #lightbox_popup .pic-view .pic {
      max-width: 100%;
      max-height: 100%;
      border: 2px solid #fff;
      
    }
    #lightbox_popup .btn-view {}
    #lightbox_popup .btn-view .cbtn {
      position: absolute;
      width: 40px; display: flex; justify-content: center; align-items: center;
      height: 40px;
      text-align: center; font-size: 24px; cursor: pointer;
      text-decoration: none;
      background-color: #000;
      opacity: .4;
      color: #fff;
      transition: all .3s;
    }
    #lightbox_popup .btn-view .cbtn:hover {
      opacity: 1;
      transform: scale(1.2);
    }
    #lightbox_popup .btn-view .btn-prev {
      left: 20px;
      top: 48%;
    }
    #lightbox_popup .btn-view .btn-next {
      right: 20px;
      top: 48%;
    }
    #lightbox_popup .btn-view .btn-close {
      right: 10px;
      top: 10px; z-index: 9999;
    }
    #lightbox_popup .caption-view {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 38px;
      background-color: rgba(0, 0, 0, .7);
      text-align: center;
    }
    #lightbox_popup .caption-view p {
      line-height: 38px;
      color: #fff;
    }

    .lightbox-pic {
      width: 100%;
    }
 

    dl.jobs dt { font-size: 16px; padding: 10px 0; }
    .picitem,
    .picitem2 { display: flex; flex-wrap: wrap; justify-content: space-between;  }
    .picitem  p { display: table-cell; width: 32%; }
    .picitem2  p { display: table-cell; width: 49%; }
     
	 
@media (max-width: 767px) {

	
	.inquire { padding:10px; }
	.shownewspage h3 { font-size: 16px; margin-top: 10px; }
	.inform { justify-content: center; align-items: center;
	}
	.inform .input { width: 100%; border-radius: 2px;
	}
	.inform button { 
		width: 100%; margin-top: 15px; margin-left: 0;
	}
	.pageNav { height: auto;
		 margin:0;  padding-bottom: 0; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;
	}
	#solutionArea { margin: 0 15px; }
	.pageNav li { width:100%; height: 45px; padding: 0; line-height: 45px; font-size: 12px; }
	.pageNav li.solu { width: 25%;  }
	.pageNav li.cnews { width:50%; }
	.pageNav li.case { width:33.3%; }
	.showsolution1 { display: flex; flex-direction: column; padding:15px; }
	.showsolution1 h3 { padding-left: 30px; font-weight: 400; font-size: 20px;}
 	.showsolution1 h3:before { width: 20px; margin-left: -13px; }
 	.solution-text { padding-bottom: 0; padding-left:0; }

 	.solution-prolist { flex-direction: column; width: 50%;  margin: 15px 0; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); }
	.solution-prolist .protext { padding-top: 15px;  }
	.solution-prolist .protext h3 { margin-bottom: 10px; font-size: 20px; }
	.solution-prolist .protext p { margin-bottom: 10px; line-height: 20px; font-size: 12px; }
	.solution-prolist .protext .desctitle { font-size: 14px; color: #333; }
	.solution-prolist .protext .link { margin-top:20px; padding-bottom: 10px; }
	 
	.cglist  { 
		 padding:15px; margin-bottom: 15px; background-color: #f4f4f4;
	}
	.cglist .download  { 
		margin-left: 20px; display: flex; align-items: center; 
	}
	.cglist .download span { font-size: 28px; }
	.cglist .thumb  { 
		max-width: 260px; flex: 2; margin-right: 15px; overflow: hidden; display: none;
	}
	 
	.cglist .cgContent { line-height: 21px; flex: 3; }
	.cglist .cgContent h5 {flex-wrap: wrap; }

	.newstitle3,
	ul.college-rlist,
	ul.college-btmlist { margin-left:-15px; margin-right:-15px; }
	ul.college-btmlist li { width: 100%; }
	ul.college-rlist li { padding: 8px 0; }
	ul.college-rlist li a { font-size: 14px; }
	 
 	.p50 { padding:25px; }
	.subcompany { 
		margin: -15px;
	}

	.feedflex { padding: 15px; flex-direction: column; }
 

	.feedback { width: 100%; margin-right: 0; }
	.cline { width: 100%; border-left: none; text-align: center; }
 
	.feedback-form ul li { width: 100%; margin-bottom: 15px; }
 
	.feedback-form .input { width: 100%; height: 45px; line-height: 45px; font-size: 14px;  }
	.feedback-form .textarea { width: 100%;  height: 70px; font-size: 14px;  }
 
	.feedback-form  .feed-submit .submit-btn { width: 100%; height: 45px; font-size: 14px;}
	.inform .input { height: 45px; line-height: 45px; font-size: 14px; }
	.inform button {  height: 45px; line-height: 45px; font-size: 14px; }
 
 	.page-postion { margin:10px; }

 	.swiper-clients .swiper-slide { height: 245px;}
    .swiper-clients .avatar { padding: 15px 0 10px; }	
    .swiper-clients .avatar img {  max-width: 80px; max-height: 80px;  }
 	.swiper-clients h3 { font-size: 16px; font-weight: 400; margin-bottom: 0; }
 	.swiper-clients p { line-height:20px; padding: 0 8px;  }
	 
}

@media (max-width: 414px) {
	.sec-mainNav { display: flex; justify-content: space-between; }
	.sec-mainNav>li { width: 25%; }
	 .solution-prolist .protext .link a { padding: 3px 10px; }
	 .swiper-clients h3 { font-size: 14px; line-height: 20px;  }
	 .swiper-clients .swiper-slide { height: 245px;}
}
@media (max-width: 320px) {
	 .solution-prolist .protext .link a { padding: 3px 5px; margin-right: 10px; }
}

.pdt80 { padding-top: 86px; }
.products-container {
      width: 100%;
      height: 400px; overflow: hidden;
      
}

/**左侧菜单**/
.sec-mainL {
	box-shadow: 2px 0 4px #D5D5D5;
	background-color: #474747;
	position: relative;
	z-index: 5;
}

.mainL-hd-box { border-bottom: #666 solid 1px; }

.mainL-hd {
	height: 42px;
	line-height: 42px;
	font-size: 16px; padding-left: 20px;
	color: #fff;
}
/**菜单列表**/
.sec-mainNav>li {
	padding:25px 15px;
	position: relative;
	cursor: pointer;
	z-index: 4;
	border-bottom: #666 solid 1px;
}
.sec-mainNav>li:last-child {
	border-bottom: #fff solid 1px;
}

.sec-mainNav>li h3 {
	font-size: 16px; color: #fff; font-weight: 300; margin: 0; line-height: 25px;
}
.sec-mainNav>li h3 a { color: #fff; }

.sec-mainNav>li.hover {
	background-color: var(--hcolor);
}

.sec-mainNav>li.hover h3,
.sec-mainNav>li.hover .menu-tab a {
	color: #fff;
}

.sec-mainNav li .menu-tab {
	 margin: 0; padding: 0;
}
.sec-mainNav li .menu-tab a {
	float: left; 
	margin-right: 6px;
	color: #ccc;
}
.sec-mainNav li .tab-list {
	display: flex; flex-direction: row; align-items: center;
}
.sec-mainNav li .tab-list span { display: inline-block;
	color: #fff; margin-right: 10px;
}
.sec-mainNav li .tab-list span img { max-width: 40px; }
/**二级菜单**/

.menu-panel {
	position: absolute;
	width: 800px;
	padding: 10px 20px;
	/*display:;*/
	top: 0;
	left: 100%;
	z-index: 5;
	background: #fff;
	border-left: var(--hcolor) solid 3px;
	display: none;
}

.menu-panel h4 {
	font-size: 12px; line-height: 25px;
	color: #000; margin-right: 15px; width: 10%;
}
.menu-panel-hd {
	display: flex; flex-direction:row;
}
.sub-group { border-bottom: 1px dotted #E2E2E2; width: 90%; padding-bottom: 10px; margin-bottom: 10px; }
.sub-group a {
	color: #555; line-height: 21px;
}
.sub-group span { margin-left: 7px; margin-right: 5px; }
.menu-panel h4 a:hover,
.sub-group a:hover {
	color: var(--hcolor);
	 
}
.menu-panel-bd .apptitle { color: #000; }

.mrfu15 { margin-right: -15px; }
.mlfu15 { margin-left: -15px; }
ul.ul-appli,
ul.ul-appli li {
	display: flex; flex-wrap: wrap;
}
ul.ul-appli li a { 
	display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0; margin: 10px 25px 10px 0;
}
ul.ul-appli li a i { font-size: 36px; margin-bottom: 15px; }

.ourbrand { background-color: #f7f7f7; margin-bottom: 15px;}
.our-category { margin-bottom: 35px;}
.brandname { background-color: #474747; padding: 3px; height: 122px; }
.brandname h4 { padding: 10px; color: #fff; margin-bottom: 30px; }
.brandname a { border-radius: 2px; width: 100%; background-color: #f7f7f7; display: inline-block; display: flex; justify-content: center; align-items: center; padding: 5px 0; }
ul.brand-list { display: flex; justify-content: space-between; align-items: center; padding-right: 15px; height: 100%;}
ul.brand-list li { padding-top: 18px; }
ul.brand-list li img { width: 88px; height: 88px; }

.categoryname { display: flex; justify-content: space-between; padding-bottom: 10px; }
.categoryname h4 { font-size: 22px; color: var(--hcolor); }
.categoryname a { padding:0 15px; background-color: #474747; color: #fff; display: flex; align-items: center; }

.bcate img { max-height: 131px; }
.mt10 { margin-top: 10px; }
.mlfu30 { margin-left: 0; }
ul.cate-list { display: flex; justify-content: flex-start; align-items: center; height: 100%; flex-wrap: wrap; }
ul.cate-list li { width: 11.5%; margin-right: 1%; text-align: center; line-height: 30px; }
ul.cate-list li:last-child { margin-right: 0; }
ul.cate-list li img { width: 100%; border:#ccc solid 1px; }

dl.category-list { border:#ddd solid 1px; margin-top: 10px; padding: 20px; display: flex; flex-direction: row; }
dl.category-list dt { min-width:50px; }
dl.category-list dt.more { display: flex; align-items: center; justify-content: flex-end; }
dl.category-list dd a { display: inline-block; padding-bottom: 5px; margin-right: 25px; }
.pch { display: none; }
.proslist { margin-bottom: 20px; position: relative; }
.proslist a { display: inline-block; }
.proslist a.title { padding:0; height: 50px; line-height: 22px; text-align: center; width: 100%; display: block; color: #333; }
 .showinfo { padding: 30px 0 0 50px; }
 .showinfo .link { display: flex; margin-top:20px; }
 .showinfo .link a { display: flex; color: #555; padding: 3px 15px; border: #666 solid 1px;margin-right: 15px;  }
 .showinfo .link a:hover { background-color: var(--hcolor); border: var(--hcolor) solid 1px; color: #fff;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); }

.detail h2 { margin-left:90px; font-size: 22px; line-height: 20px; font-weight: 400; position: relative;}
.detail .entitle { margin-left:90px; font-size: 18px; color: #999; font-weight: 200; font-family:Courier New; margin-top: 15px; }
.detail-text { padding: 10px 0; text-align: center; margin-left: 90px; }
.detail-text img { max-width: 100%; }
.detail h2 span { position: absolute; left: -90px; top:0;
  	width: 75px; height: 5px; border-radius: 3px; background-color: #000; display: inline-block;
}
.detail p { margin:5px 0; }

.kc-goods-other ul{
    display: flex;
    flex-wrap: wrap;
}
.kc-goods-other ul li{
    margin-right: 2%;
    width: 23%;
    box-sizing: border-box;
}
.kc-goods-other ul li img{
    width: 100%;
    height: 100%;
}

.kc-goods-Instructions ul{
    display: flex;
    flex-wrap: wrap;
}
.kc-goods-Instructions ul li{
    border: 2px solid #eee;
    margin-right: 1%;
    margin-bottom: 30px;
    width: 24%;
    box-sizing: border-box;
}
.kc-goods-Instructions ul li:hover{
    border: 2px solid var(--hcolor);
}
.kc-goods-Instructions ul li i{
    margin-left: 5px; font-size: 14px;
}
.kc-goods-Instructions ul li img:hover{
    opacity: .8;
}
.kc-goods-Instructions ul li img{
    width: 100%;
    height: 300px;
}
.kc-goods-Instructions ul li div{
    line-height: 40px;
    text-align: center;
    width: 100%;
    background: var(--hcolor);
    color: #fff;
    border: 0;
}

.kc-goods-video ul{
    display: flex;
    flex-wrap: wrap;
}
.kc-goods-video ul li{
    border: 2px solid #eee;
    margin-right: 1%;
    width: 32%;
    box-sizing: border-box;
}
.kc-goods-video ul li:hover{
    border: 2px solid var(--hcolor);
}
.kc-goods-video ul li i{
    margin-left: 5px; font-size: 14px;
}
/*-------------------------- page guest style ---------------*/

.feedback { padding: 30px 0; width: 100%;  }
.feedback .form-list {margin-left: 90px; display: flex; flex-direction: row; justify-content: space-between; align-content: center; }
.feedback .feedback-form { width: 60%; text-align: left; }
.feedback .feedback-form h3 { font-size: 20px; font-weight: 300; color: var(--hcolor); }
.feedback .feedback-form h3 span { font-size: 16px; }
.feedback .feedback-form input[type='text'] { width: 45%; margin-right: 10px; border:#dedede solid 1px; padding: 5px; height: 30px; margin-top: 15px; float: left; }
.feedback .feedback-form  .feed-submit { margin: 15px 0; float: left; display: flex; align-content: center; }
.feedback .feedback-form  .feed-submit .submit-btn { background: var(--hcolor); border: none; padding: 5px 15px; font-size: 14px; color: #fff; }
.feed-submit .feed-msg { margin:5px 0 0 20px; display: none; font-size: 12px; color: #ff0000; }
.feed-submit .feed-msg.green { color: #4ca913 }
.feed-submit .submit-btn span,.feed-submit .feed-msg span { font-size: 16px; }

.feedback .feedback-form textarea { width: 92%; border: #dedede solid 1px; height: 80px; line-height: 21px; 
	padding: 5px; margin-top: 15px; float: left;  }

.feedback .form-list .feed-contact { width: 40%; display: flex; justify-content: space-between; align-items: flex-start; margin-top:32px; }
.feedback .form-list .feed-contact div { text-align: center; margin-right: 10px;   }
.feedback .form-list .feed-contact div img { width: 100%; }


.wraper { width:100%; text-align: center; z-index: 33;  }
.home-clients { padding:10px 0 20px; }
.home-clients ul.clients-area { display: flex; margin-top: 15px; padding-bottom: 5px; flex-wrap: nowrap; }
.home-clients ul.clients-area li { width: 14%; list-style: none; font-size: 16px; color: #000; text-align: left; }
.home-clients ul.area-list { width: 100%; height: 210px; overflow: hidden;  }
.home-clients ul.area-list li { list-style: none; width: 12%; margin-right:2%;  line-height: 23px; text-align: left; display: flex; flex-direction: column; float: left;  }
.home-clients ul.area-list li:last-child { width: 14%; margin-right: 0; }
.home-clients ul.area-list li a { font-size: 10px; overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
    white-space:nowrap;  }
.home-clients .clients-more { display: flex; margin: 5px 0; justify-content: center; align-content: center; }
.home-clients .clients-more a { font-size: 14px; display: flex;  color: #333; padding: 5px 12px; border-radius: 2px;}
.home-clients .clients-more a span { font-size: 26px;  }

.jobfazhan { display: flex;  justify-content: center; align-items: center; flex-direction: column; padding: 15px 0 25px; }
.jobfazhan p.icon { padding: 30px; background-color: #e7e7e8; border-radius: 50%; }
.jobfazhan p.icon i { font-size: 36px; color: var(--hcolor); }
.jobfazhan h4 { font-weight: 400; font-family:"Microsoft YaHei";font-family:"微软雅黑"; }
.jobszp { display: flex; justify-content: space-between; align-items: center; border-bottom: #eee solid 1px; padding: 7px 5px; }
.jobszp h5 { width: 60%; }

#catabs { display: flex;  justify-content: space-between; align-items: center; padding: 20px 0 10px; margin-left: -10px; }

@media screen and (max-width: 1024px) { 
        .home-clients .area-list { width: 100%; height: 100%;   }
        .home-clients .area-list li { width: 14.26%; margin-right: 0;  line-height: 23px;    }
        .home-clients .area-list li a { font-size: 12px; }
        .home-clients .clients-more { display: none; }
        #catabs { padding: 15px 10px;  }
}

#procate-mobile { display: none; }
/*--------------------------------------------------------------*/
@media (max-width: 767px) {
	/**左侧菜单**/
	#procate-mobile { display: block; }
	#mobilefrom { margin-left:25px; }
	.jobszp h5 {  font-size: 14px; }
	.jobszp { width: 100%; }
	ul.mobile-pmenu { margin: 0 -15px 15px; padding: 15px; background-color: rgba(246,246,246,1); display: flex; justify-content: space-between; align-items: center; }
	ul.mobile-pmenu li a { display: flex; flex-direction: column; text-align: center; }
	ul.mobile-pmenu li img { max-height: 50px; }
	.feedback .form-list {margin-left: 40px; flex-direction: column;   }
	.feedback .feedback-form { width: 100%;  }
	.feedback .form-list .feed-contact { width: 90%;  margin-top:20px; }
	.feedback .form-list .feed-contact div { width: 40%; }
	.kc-goods-other ul{
	    justify-content: space-between;
	}
	.kc-goods-other ul li{ 
		margin-right: 0;
    	width: 48%;
	}
	.kc-goods-Instructions ul{
	    justify-content: space-between;
	}
	.kc-goods-Instructions ul li{
	    margin-right: 0;
	    margin-bottom: 20px;
	    width: 48%;
	}
	.kc-goods-Instructions ul li img{
	    height: 200px;
	}
	.kc-goods-video ul{
	    justify-content: space-between;
	}
	.kc-goods-video ul li{
	    margin-right: 0;
	    width: 48%;
	}
	.showinfo { padding: 30px 10px 0 10px; }
	.showinfo .link a {  padding: 5px 20px;  }
	.detail h2 { margin-left:15px; }
	.detail .entitle { margin-left:15px; }
	.detail h2 span { position: absolute; left: -35px; top:0;
	  	width: 30px; height: 4px; border-radius: 2px; display: none;
	}
	.detail-text { padding: 10px 15px 10px 0; text-align: center; margin-left: 15px; }
	.bcate { display: none; }
	.pch { display: block; }
	.mpdlist { display: flex; flex-wrap: wrap; }
	.mplist { width: 50%;}
	.proslist a { font-size: 10px; }
	ul.cate-list { flex-wrap: wrap;  }
	ul.cate-list li { width:24%; margin-right: 1%; text-align: center; line-height: 30px; }
	ul.cate-list li:last-child { margin-right: 0; }
	ul.cate-list li img { width: 100%; max-height: 100px; border:#ccc solid 1px; }
	.pdt80 { padding-top: 0; }
	.areapro { display: flex; flex-wrap: wrap; }
	.sec-mainL { display: none;
		box-shadow: none;
		background-color: rgba(18,107,55,.5);
		position: relative;
		z-index: 5; margin-left: -15px; margin-right: -15px;
	}
	.mainL-hd-box { border-bottom: #dedede solid 1px; }
	.mainL-hd {
		height: 36px;
		line-height: 36px;
		font-size: 14px; padding-left: 15px;
		color: #000;
	}
	/**菜单列表**/
	.sec-mainNav>li {
		padding:25px 0;
		position: relative;
		border-bottom: none;
	}
	.sec-mainNav>li:last-child {
		border-bottom:none;
	}

	.sec-mainNav>li h3 {
		font-size: 14px; text-align: center; color: #fff; font-weight: 300; margin: 0; line-height: 25px;
	}
	.sec-mainNav>li h3 a { color: #fff; }
	.sec-mainNav li .menu-tab { z-index: 5;
		 margin: 0; padding: 0; display: none; flex-direction: column; justify-content: center; align-items: center;
	}
	.sec-mainNav li .menu-tab a {
		float: none; 
		margin-right: 0;
	}
	.sec-mainNav li .tab-list {
		display: flex; flex-direction: column; align-items: center;
	}
	.sec-mainNav li .tab-list span { margin-right: 0;
	}
	.sec-mainNav li .tab-list span img { max-width: 40px; }
	.menu-panel {
		position: absolute;
		width: 100vw;
		padding: 10px;
		/*display:;*/
		top:0;
		z-index: 999999;
		background: #FFF;
		border-top: var(--hcolor) solid 2px;
		border-left: none;
		display: none;
	}
	.mp1 { margin-top: 240px; left: 0; }
	.mp2 { margin-top: 336px; left: -25vw; }
	.mp3 { margin-top: 216px; left: -50vw;}
	.mp4 { margin-top: 184px; left: -75vw;}

	.menu-panel h4 {
		width: 18%;
	}
	.mrfu15 { margin-right:0; }
	.mlfu15 { margin-left:0; }
	.brandname { height: 100px; }
	.brandname h4 { margin-bottom: 0; }
	ul.brand-list { flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }
	ul.brand-list li { padding-top: 18px; }
	ul.brand-list li img { width: 88px; height: 88px; }

    .home-clients { display: none; }
    .home-clients .area-list { width: 100%; height: 100%;   }
    .home-clients .area-list li { width: 14.26%; margin-right: 0;  line-height: 23px;   }
    .home-clients ul.clients-area { display: flex; margin-top: 15px; padding-bottom: 5px; flex-wrap: nowrap; }
    .home-clients ul.clients-area li {  font-size: 12px; color: #000; text-align: left; }
}
@media (max-width: 480px) {
	.home-clients ul.clients-list li { width: 20%; margin: 5px 0 0 0;}
    .home-clients .area-list { width: 100%; height: 100%;   }
    .home-clients .area-list li { width: 14.26%; margin-right: 0;  line-height: 23px;   }
    .home-clients ul.clients-area { display: flex; margin-top: 15px; padding-bottom: 5px; flex-wrap: nowrap; }
    .home-clients ul.clients-area li {  font-size: 12px; color: #000; text-align: left; }
}