/***********************************************************************************
 *	+ 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: 16px;
	color: 666; background-color: #fff;
	line-height: 28px; outline: none;
}
 	:root { 
        --hcolor: #d9b310;
	}
 	#main-container {
		position: relative;
		overflow: hidden;
		background-color: #fff;
	}
	.headerMargin { padding: 10px 50px 0 30px; /*border-bottom: rgba(255,255,255,.2) solid 1px;*/ }
	.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; color: #000;  }
	.boxed .header-sticky {
		max-width: 1200px;
	}
	
	@media (min-width: 1400px) {
			
		.boxed #main-container,
		.boxed .header-sticky {
			max-width: 1350px;
		}
		
	}
 	.mt20 { padding-top: 20px; }
 	.mb30 { padding-bottom: 30px; }
 	.ml20y { margin-left: 20px; }
 	.ml15 { margin-left: 0; }
 	.mr15 { margin-right: 0; }
 	.mlno { margin-left: 0; }
 	#LanguageTel { position: absolute; right: 0; top: 20px; color: #fff; z-index: 99999; display: flex; }
 	/*#LanguageTel select { background: none;
 	display: block;
    width: 100%;
    height: 30px;
    padding: 2px 6px 6px;
    font-size: 14px;
    line-height: 1.1;
    color: #fff;
    background-color: none;
    background-image: none;
    border: 1px solid #fff;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     }*/
    .select {
    	position: relative;
		display: block;
	    width: 120px;
	    height: 30px;
	    padding: 0 6px 6px;
	    font-size: 14px;
	    line-height: 1;
	    color: #fff;
	    background-color: none;
	    background-image: none;
	    border: 1px solid #fff;
	    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
 
	.select:hover {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}
 
	.select:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 5px solid transparent;
		border-top-color: #fff;
		top: 12px;
		right: 10px;
		cursor: pointer;
		z-index: -2;
	}
	#LanguageTel .select p:first-child a { color: #fff; }
	#LanguageTel .select p  { position: absolute; left: 5px; top: 0px; line-height:28px; color: #fff; }
	#LanguageTel .select p:last-child  { position: absolute; left:-1px; padding-left: 8px; top: 29px; width: 121px; background: #fff; line-height:33px; }
	#LanguageTel .select .hide  { display: none; }
 	#LanguageTel > p { margin-right: 20px; line-height:33px; }
 	#LanguageTel > p span { font-family:MontReg;  }
 	.ml { margin-left: 0; }
/***********************************************************************************
 *	+ HEADER
 ***********************************************************************************/
 	.mbscroll { position: fixed; width: 100%; display: table-row; background: rgba(0,0,0,.5);  }
	#header {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9000; background-color: none;
		-webkit-transition: all 0.3s;
				transition: all 0.3s;
	}
	#header [class^="col-"] {
		position: static;
	}
	#header .container { position: relative; }
	.navContent { position: absolute; top: 60px; 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; }
	.homeabout p { font-size: 18px; font-weight: 300; line-height: 36px; }
	.homeabout a span { display: inline-block; color: var(--hcolor); border-bottom: var(--hcolor) solid 1px; }
	.homeabout a:hover span { font-weight: 400; }
	
	@media (min-width: 768px) and (max-width: 991px) {
		#header { position: relative; }
		.homeabout p { font-size: 14px; font-weight: 300; line-height: 30px; }
		#LanguageTel { display: none; }
	}
	
	@media (max-width: 767px) {
		#header { position: relative;}
		#LanguageTel { display: none; }
		.headerMargin { padding: 0 15px; border-bottom: none; }
		.homeabout p { font-size: 12px; font-weight: 300; line-height: 30px; }
		.ml15 { margin-left: 15px; }
 		.mr15 { margin-right: 15px; }
	}
	
/***********************************************************************************
 *	- 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; width: 200px;
	}
	
	@media (min-width: 768px) and (max-width: 991px) {
		
		#logo img {
			display: inline-block; width: 200px;
		} 
		 
		 
	}
	
	@media (max-width: 767px) {
		
		 #logo img {
			display: inline-block; width: 120px;
		}
	}

/***********************************************************************************
 *	- MENU
 ***********************************************************************************/
 	#navbg { display: none; background: rgba(255,255,255,.99); height: 330px; z-index: 88; width:30%; position: absolute; right: 0; top: 80px; box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2); }
 	.menu,
	.menu ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.menu .micon { font-size: 22px; }
	.menu {
		margin-top: 40px; margin-right: -15px;
		float: right; display: none;
	}
	.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:last-child { display: none; }
	.menu li a {
		display: block;
		color: #fff;
		font-size: 18px; z-index: 9999;
		font-weight: 400;
		text-decoration: none;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	.disbock { display: block; }
	.menu li a:hover,
	.menu li.active > a { color: #fff; font-weight: bold; }
	
	.menu > li > a {
		position: relative;
		margin: 0 15px;
		padding:5px 0 10px 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: 99.9%;
		display: none;
		z-index: 2000; height: 320px;
		width:600px; padding: 20px 300px 40px 80px; margin-left: -80px;
		border: 1px solid #fff;
		background-color: #fff;
		box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
		-webkit-transition: all 1s linear;
				transition: all 1s linear;

	}
	.menu > li.dropdown:nth-child(3) ul {
		margin-left: -222px;  padding: 20px 0 40px 222px;
	}
	.menu > li.dropdown:nth-child(4) ul {
		margin-left: -346px; padding: 20px 0 40px 347px;
	}
	.menu > li.dropdown:nth-child(5) ul {
		margin-left: -434px;  padding: 20px 0 40px 436px;
	}
	.menu li.dropdown:nth-child(3) ul ul,
	.menu li.dropdown ul ul {
		top: -10px; width:220px; padding: 20px 0 40px; margin-left:10px; margin-top:-10px;
		left: 100%; box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0); height: auto; 
	}
	
	.menu li.dropdown:hover > ul { display: block;  -webkit-transition: all 1s linear;
				transition: all 1s linear; }
	
	.menu li.dropdown ul li a {
		/*border-bottom: 1px solid #fff;*/
		padding: 5px 10px 5px 13px;
		color: #000; font-size: 16px;
	}
	
	.menu li.megamenu .megamenu-container {
		position: absolute;
		top: 90%;
		left: 0;
		display: none;
		z-index: 2000;
		width: 500px;
		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; }

	#devmob { margin-top: 10px; }

	@media (min-width: 1440px) and (max-width: 1600px) {
		 
	}
	@media (min-width: 1280px) and (max-width: 1440px) {
		 
	}
	@media (min-width: 1024px) and (max-width: 1280px) {
		 
	}
	
	@media (min-width: 768px) and (max-width: 991px) {
		.menu { display: none; }
		.piconright4 { display: none; }
		
	}
	
	@media (max-width: 767px) {
	
		.menu { display: none; }
		#devmob { 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: 15px;
		padding:5px 5px 1px;
		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: rgba(255,255,255,.99); width: 100%;
		border-bottom: 1px solid #fff; position: absolute; z-index: 9999;
	}
	
	#mobile-menu li a {
		display: block;
		border-top: 1px solid rgba(0,0,0,.05);
		color: #000;
		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: #000;
	}
	
	#mobile-menu li.dropdown > a.open:after,
	#mobile-menu li.megamenu > a.open:after {
		border-top-color: transparent;
		border-bottom-color: #000;
	}
	
	@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 a {
			 font-size: 14px;
		}
		
	}
	
/***********************************************************************************
 *	- SEARCH
 ***********************************************************************************/
	@media (min-width: 768px) and (max-width: 991px) {
		
	}
	
	@media (max-width: 767px) {
	
		  
		
	}

 
/***********************************************************************************
 *	- STICKY
 ***********************************************************************************/
 	
 	.header-pagenav {
		position: fixed;
		top: 55px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100%;
		z-index: 2000;
		border-bottom: #fff solid 1px;
		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: rgba(0,0,0,.8);
		border-bottom: 0;
		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(../../nimg/b1.jpg); }
 	.indexbg2 { background-image: url(../../nimg/b2.jpg); }
 	.swiperBg { background: rgba(220,180,10,.75); position: absolute; right: 0; top: 0; height: 100%; width: 40%; display: flex; justify-content: center; align-items: center; }
 	.swiperBg h2 { width: 80%; font-weight: 300; }
 	.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-container .swiper-slide {
      text-align: center; position: relative;
      background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;
      background-repeat: no-repeat;
	  background-position: top center;
      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 { width: 75%; }
      /*包裹自定义分页器的div的位置等CSS样式*/
	.pagination { position: absolute; right:0; display: flex; justify-content: space-between; align-items: center; top: 45%; z-index: 9990; width:100%;  }
	.pagination a { color: #fff; width:40px; background-color:rgba(0,0,0,.5); height: 60px; display: flex; justify-content: center; align-items: center; text-decoration: none; }
	.pagination a i { font-size: 20px; color: #fff; }
	.pagination a:hover {background-color:rgba(0,0,0,1); 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:900px; 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) {
		.swiper-container {
	      width: 100%; margin-top:-68px;
	    }
		#page-header {  height: 300px; }
		#page-header .bfont { margin-top: 30px;  }
		.pagination { top: 20%;   }
		.paginationdisc { position: absolute; display: flex; left:48%; bottom:85px;  z-index: 9990; }
		.indexpad { margin-top: -70px; }
		.clist h3 { font-size: 18px;  }
	}
	
	@media (max-width: 767px) {
		
		#page-header { height: 300px; margin-top:-68px; padding: 0;  }
		#page-header .bfont { margin-top: 30px;  }
		.swiperBg { background: rgba(220,180,10,.4); width: 100%; display: flex; justify-content: center; align-items: center; }
		 
		.pagination {  right:0; top: 42%; z-index: 9990;  }
		.pagination 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);
		}
		
	}
 	 

/***********************************************************************************
 *	+ PAGES
 ***********************************************************************************/
 	.techpad { margin-top: 20px;  }
 	#gcpad {  text-align: center; padding: 0; margin: -15px 0; }

 	.gcTitle {  text-align: center; padding: 30px 0; }
 	.gcTitle h3 { font-weight: 300; font-size: 32px; }
 	.gcTitle p,
 	.gcTitle2 p { font-family: MontReg; font-size: 16px; color: var(--hcolor); padding-bottom: 6px; border-bottom: var(--hcolor) solid 2px; display: inline-block; }

 	.gcTitle2,
 	.gcTitle4 {  text-align: left; display: flex; font-family: MontReg; font-size: 16px; color: var(--hcolor); font-weight: bold; margin-bottom: 0; }
 	.gcTitle2 span { height: 3px; width:50px; background: var(--hcolor); margin-left: 6px; margin-top: 17px; }
 	.gcTitle4 span { height: 2px; width:50px; background: var(--hcolor); margin-left: 6px; margin-top: 11px; }

 	.gcTitle3 {  text-align: left; padding:0 0 30px; }
 	.gcTitle3 h3 { font-weight: 300; font-size: 32px; }
 	.flexbetween { display: flex; justify-content: space-between; }
 	.flexstart { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;  }
/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/
 
	.about-me {
		margin:50px 0 0; padding: 0;
		text-align: left; position: relative;
	}
	ul.about-num { position: absolute; left:10%; top: 400px; width: 80%; background: rgba(0,0,0,.5); display: flex; z-index: 999;  }
	ul.about-num li { width: 24%; padding:30px 1%; text-align: center;  }
	ul.about-num li p { color: var(--hcolor); font-size: 46px; font-weight: bold; font-family: MontReg; }
	ul.about-num li > span { color: #fff; }
	.homeabout {
		 padding: 30px 50px;
	}
	.homeabout h3 { font-size: 32px; font-weight: 300; margin-top: 0; }
	.homeabout > p { margin-top: 15px; width: 86%; font-weight: 300; }
	.yi { font-size: 16px; }
  
/***********************************************************************************
 *	- SERVICES
 ***********************************************************************************/
 
	.category { margin:0 0 50px; }
	.category h3 { font-weight:400; padding: 20px 10px; margin: 0; font-size: 30px;  }
 	.category h6 { font-family: MontLight; padding: 0 10px; margin:-10px 0 0; }
 	.category p { padding: 10px; margin-bottom: 0; }
 	.category a.more { margin: 0; padding: 0 5px; display: flex; }
 	.category a.more i { margin-top: 1px; }
 	.clist:hover > h3 { display: none; }
 	.clist:hover .cateimg img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}
	.clist:hover .cateimg .bg { display: flex; justify-content: center; align-items: center; color: #fff; flex-direction: column; }
	.clist:hover .cateimg .bg a,
	.clist:hover .cateimg .bg h4 { color: #fff; }
	.clist:hover .cateimg .bg a { border:#fff solid 1px; height: 30px; width: 80%; display: flex; justify-content: center; align-items: center; margin-top: 10px; }
	.clist { position: relative; }
	.clist h3 { position: absolute; font-size: 18px; height: 80px; line-height: 40px; left: 15px; bottom: 0; width: calc(100% - 30px); background: rgba(0,0,0,.5); color: #fff; text-align: center; font-weight: bold; }
	.clist .cateimg {
	  overflow: hidden;
	  position: relative;
	}
	.clist .cateimg .bg { position: absolute; left: 0; top: 0;  background: rgba(0,0,0,.5); width: 100%; height: 100%; display: none; }
	.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;
	}
/***********************************************************************************
 *	- techbg
 ***********************************************************************************/
 	.techbg { background: url(../../nimg/techbg.jpg) no-repeat center center; height: 220px;  display: flex; justify-content: space-between; align-items: center; }
 	.techbg h3 { color: #fff; }
 	.techText  { text-align: right; margin-top: 0; color: #fff; font-size: 16px; padding-right: 50px; }
 	a.techMore { padding: 6px 25px; background: var(--hcolor); font-size: 14px; color: #000; display: inline-flex;  }
 	a.techMore:hover { color: #fff; background: rgba(0,0,0,1); }
 	@media (min-width: 1920px) {
 		.techbg { background-size: cover; }
 	}
 	

/***********************************************************************************
 *	- solution
 ***********************************************************************************/
 	.solution { padding-top: 30px; clear: both; }
 	.solution-list { text-align: center;   }
 	.solution-list a { box-shadow: 0 0 10px rgba(0, 0, 0, .2); display: block; overflow: hidden; }
 	.solution-list h3 { font-weight:400; padding:12px; font-size: 20px; display: flex; justify-content: space-between; }
 	 
 	.solution-list:hover h3{ color: var(--hcolor); }
 	.solution-list a p { overflow: hidden; margin-bottom: 0; }
 	.solution-list a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; }
	.solution-list:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}

	.newsMore a {  padding:5px 25px; background:var(--hcolor); border-radius: 18px; height: 35px; color: #fff; font-size: 14px; cursor: pointer; }
	.newsMore a:hover { background: #000; color: var(--hcolor); }
/***********************************************************************************
 *	- custom
 ***********************************************************************************/
 	 .indexpad { margin-left:50px; margin-right: 50px; }

/***********************************************************************************
 *	- news
 ***********************************************************************************/
 	.news { margin-top:30px; margin-bottom: 30px;   }
 
	ul.newslist { margin: 0 0 10px -15px;   display: flex; justify-content: space-between; align-items: flex-start; }
	ul.newslist li { width: 23%; margin-right: 2%; position: relative; background-color: #f5f5f5; padding-bottom: 80px; overflow: hidden; }
	ul.newslist li img { -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; }
	ul.newslist li:hover img { -webkit-transform: scale(1.1);
	  transform: scale(1.1); }
	ul.newslist li:nth-child(4n) { margin-right: 0; }
	ul.newslist li .newsText { position: absolute; top: 190px; left:10px; width: calc(100% - 20px); padding:10px 20px; background: #fff; }
	ul.newslist li:hover .newsText {background: rgba(0,0,0,.8); }
	ul.newslist li .newsText h4 { font-size: 18px; margin: 0; height: 60px; line-height: 22px; padding-bottom: 10px; }
	.newsText .newsdate { color: #999; }
	.newsText .newsdate span { margin: 0 12px; }
	.newsText a { display: flex; }
	ul.newslist li:hover a,
	ul.newslist li:hover .newsdate { color: var(--hcolor); }

	ul#classnewslist { margin-top: 15px; flex-wrap: wrap; justify-content: flex-start; }
	ul#classnewslist li { margin-bottom: 30px; }
	ul#classnewslist li .newsText { top: 120px; left:10px; }

/***********************************************************************************
 *	- clients
 ***********************************************************************************/
 	.clients { padding: 40px 0; margin-top: 30px; background: #f6f6f5; }

 	.swiper-clients {
      width: 100%; overflow: hidden; margin-top: 30px;
      height: 100%; 
    }
    .swiper-pos { position: relative; }
     
    .swiper-service { display: none; }

    .servicePage { position: absolute; right:0; display: flex; justify-content: space-between; align-items: center; top: 45%; z-index: 9990; width:100%;  }
	.servicePage a { color: #fff; width:40px; background-color:rgba(0,0,0,.8); height: 60px; display: flex; justify-content: center; align-items: center; text-decoration: none; }
	.servicePage a i { font-size: 30px; color: #fff; }
	.servicePage a:hover {background-color: rgba(0,0,0,1);  font-weight: bold; }
	.servicePage a:hover i { color: #000; }
    .swiper-pos .swiper-next,
    .swiper-pos .swiper-prev {
    	position: absolute; top: 48%; outline: none;
    }
    .swiper-pos .swiper-next i,
    .swiper-pos .swiper-prev i { font-size: 20px; color: #999; }
    .swiper-pos .swiper-next:hover i,
    .swiper-pos .swiper-prev:hover i { color: var(--hcolor); }
    .swiper-pos .swiper-prev { left:0; }
    .swiper-pos .swiper-next { right:0; }
    .swiper-clients .swiper-slide {
      text-align: center; overflow: hidden;   width: 100%;
      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 .avatar { position: relative; width: 100%; }	
    .swiper-clients .avatar .bg { position: absolute; left: 0; top: 0;  background: rgba(0,0,0,.5); width: 100%; height: 100%; display: none; }

    .swiper-clients .swiper-slide:hover h3 { display: none; }
    .swiper-clients .swiper-slide:hover .avatar .bg { display: flex; justify-content: center; align-items: center; color: #fff; flex-direction: column; }
	.swiper-clients .swiper-slide:hover .avatar .bg a,
	.swiper-clients .swiper-slide:hover .avatar .bg h4 { color: #fff;  }
	.swiper-clients .swiper-slide:hover .avatar .bg h4 { font-size: 20px; margin-bottom: 10px;  }
	.swiper-clients .swiper-slide:hover .avatar .bg p { width: 80%; font-size: 16px; line-height: 30px; display: block; }
	.swiper-clients .swiper-slide:hover .avatar .bg a { border:#fff solid 1px; height: 30px; width: 80%; display: flex; justify-content: center; align-items: center; margin-top: 10px; }
    .swiper-clients .avatar img { max-width: 100%; 
    	-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 { position: absolute; width: 100%; color: #fff; left: 0; bottom: 0; height: 80px; line-height: 80px; font-size: 30px; font-weight: 400; margin-bottom: 0; text-align: center; background: rgba(0,0,0,.5); }
 	 
 	.swiper-clients .swiper-slide:hover { 
 		 
 	}
 	.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
 ***********************************************************************************/
 	.flexcenter { display: flex; justify-content: center; align-items: center; }
 	.flexcolumn { flex-direction: column; }
 	.flex { display: flex; }

 	#footer {
		padding: 40px 0;
		background-color: #222;
		color: #808080;
		font-size: 13px;
	}
	#footer a { color: #fff; }
	#footer a:hover { color: var(--hcolor); }
	#footer .qrcode img {max-height: 120px;}
	#footer .flogo { display: flex; align-items: center; }
	.pflogo { margin-left: -15px; }
	#footer  a { color: #ccc; }	
	.fnav { display: flex; justify-content: space-between;  }
	.fnav h3 { font-size: 20px; font-weight: 500; }
	.fnav .navlist { width: 20%;  text-align: left;  }
	.fnav .navlist li { list-style: none; padding: 0; margin: 0;  }
	.flinks { padding: 20px; border-top: #444c49 solid 1px; }
	.flinks a { margin-right: 10px; }
	#footer .copyright { font-size: 12px; margin-top: 15px; }
 
@media (min-width: 1280px) and (max-width: 1440px) {
		.homeabout { margin-top: -25px; }
		ul.about-num { top: 330px;  }
		.homeabout p { font-size: 14px; font-weight: 300; line-height: 30px; }
 }
@media (min-width: 991px) and (max-width: 1280px)  {

	p { font-size: 14px; }
 	.homeabout {
		 padding:0 20px; margin-top: -15px;
	}
	.homeabout h3 { font-size: 22px; }
	.homeabout > p {
		font-size: 14px; line-height:25px;
	}
	ul.about-num {  left:10%; top: 260px; width: 80%;  }
	ul.about-num li { width: 24%; padding:10px 1%;   }
	ul.about-num li p {  font-size: 32px;  }


	.swiper-clients .swiper-slide:hover .avatar .bg h4 { font-size: 16px; margin-bottom: 5px;  }
	.swiper-clients .swiper-slide:hover .avatar .bg p { width: 80%; font-size: 12px; line-height: 24px; }
	.swiper-clients .swiper-slide:hover .avatar .bg a {  height: 30px; width: 80%;  margin-top: 10px; }
     
 	.swiper-clients h3 {  height: 50px; line-height: 50px; font-size: 22px;  }
  
}
@media (min-width: 768px) and (max-width: 991px) {

	 
	.homeabout h3 { font-size: 18px; }
 	.homeabout {
		 padding:0;
	}
	.homeabout > p {
		font-size: 12px; line-height: 23px; margin-top: 5px;
	}
	ul.about-num {  left:10%; top: 240px; width: 80%;  }
	ul.about-num li { width: 24%; padding:10px 1%;   }
	ul.about-num li p {  font-size: 30px;  }
	.gcTitle2 p {   font-size: 12px; padding-bottom:1px; }
 	.gcTitle2,
 	.gcTitle4 { font-size: 12px; }
 	.gcTitle2 span { height: 2px; margin-top: 10px; }
 	#dgzz { margin-top: 0;  }
 	.news { margin-top:90px;   }
 	ul.newslist li .newsText { top: 50px; width: calc(100% - 20px);  }
 	.clist h3 { font-size: 14px; height:60px; line-height: 21px; font-weight: 400; }
}

#backflex p:nth-child(1),
#backflex p:nth-child(3) {
	margin: 30px 0;
}
#backflex p:nth-child(2) { display: block; }
#backflex p:last-child { display: none; }

@media (max-width: 767px) {

		#backflex { flex-direction: column; }
		#backflex p:nth-child(1),
		#backflex p:nth-child(3) {
			margin: 0;
		}
		#backflex p:nth-child(2) { display: none; }
		#backflex p:last-child {  display: flex; justify-content: center; align-items: center; }

		.indexpad { margin-left:0; margin-right: 0; }
		.swiper-service { display: block; padding-bottom: 30px; background: #f5f5f4; margin-top: -20px; }
		.swiper-clients { display: none; }

		.swiper-service {
        width: 100%;
        height: 100%;
      }

    .swiper-service .swiper-slide .avatar { position: relative; width: 100%; }	
    .swiper-service .swiper-slide .avatar .bg { position: absolute; left: 0; top: 0;  background: rgba(0,0,0,.5); width: 100%; height: 100%; display: none; }

    .swiper-service .swiper-slide:hover h3 { display: none; }
    .swiper-service .swiper-slide:hover .avatar .bg { display: flex; justify-content: center; align-items: center; color: #fff; flex-direction: column; }
	.swiper-service .swiper-slide:hover .avatar .bg a,
	.swiper-service .swiper-slide:hover .avatar .bg h4 { color: #fff;  }
	.swiper-service .swiper-slide:hover .avatar .bg h4 { font-size: 16px; margin-bottom: 5px;  }
	.swiper-service .swiper-slide:hover .avatar .bg p { width: 80%; font-size: 12px; line-height: 22px; display: block; }
	.swiper-service .swiper-slide:hover .avatar .bg a { border:#fff solid 1px; height: 30px; width: 80%;  margin-top: 10px; display: flex; justify-content: center; align-items: center;  }
    .swiper-service .swiper-slide .avatar img { max-width: 100%; }

 	.swiper-service .swiper-slide h3 { position: absolute; width: 100%; color: #fff; left: 0; bottom: 0; height: 50px; line-height: 50px; font-size: 18px; font-weight: 400; margin-bottom: 0; text-align: center; background: rgba(0,0,0,.5); }
 	.swiper-service .swiper-slide:hover h3 { color: var(--hcolor);  }
    .swiper-service  .swiper-slide {
        text-align: center; position: relative; overflow: hidden;
        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;
      }
      .servicePage { display: none; }
     .swiper-service .swiper-slide img {
      
        width: 100%;
        object-fit: cover;
      }


		#footer {
			padding: 30px 0;
			font-size: 12px;
		}
		#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; }
		.fnav {flex-wrap: wrap; }
		.fnav h3 { font-size: 14px; font-weight: 500; }
		.fnav .navlist { width: 33%; text-align: center; }
		.fnav .navlist:nth-child(4),
		#footer .qrcode { width: 100%; text-align: center; }

		#p_solution { display: flex; margin-left: 0; justify-content: space-between; flex-wrap: wrap;  margin-bottom: 15px; }
		.solution-list { width: 50%; margin-bottom: 15px; }
		.solution-list h3 { padding:5px 10px; font-size: 14px;  }
		.solution-list a { margin-left: -15px; }

		.techpad { margin-top: 0;   }
		.techbg {  flex-direction: column; }
		#dgzz span { display: none; }
		#dgzz { display: flex; justify-content: center; flex-direction: column; align-items: center; }
		.techText  { display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 14px; padding-bottom: 40px; padding-right: 0;}
		.techText a {  width: 130px; margin-top: 5px; }
		.flex { display: flex; flex-wrap: wrap; flex-direction: column; }
		.flexwrap { flex-wrap: wrap; }
		.flexcen { display: flex; justify-content: center; align-items: center; flex-direction: column; }
		.flexcen span { display: none; }
		.flexcen p { border-bottom: var(--hcolor) solid 2px; padding-bottom: 3px; margin-bottom: 3px; }

		.news { margin-top:20px; margin-bottom: 20px; }
		.newsMore a {  padding:2px 15px; background:var(--hcolor); border-radius: 14px; height:28px;  }

		.clients { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; margin-top: 0; }
		.about-me {
			margin:0; padding: 0;
			text-align: left; position: relative; display: flex; flex-direction: column-reverse;
		}
		ul.about-num { position: absolute; left:10%; top:345px; width: 80%; background: rgba(0,0,0,.5); display: flex; flex-wrap: wrap; z-index: 999;  }
		ul.about-num li { width: 49%; padding:20px 1%; text-align: center;  }
		ul.about-num li p { color: var(--hcolor); font-size: 32px; font-weight: bold; font-family: MontReg; }
		ul.about-num li > span { color: #fff; }
		.homeabout {
			 padding:0 40px;
		}
		.homeabout h3 { font-size: 28px;}
		.homeabout > p { margin-top: 15px; width: 100%; line-height: 24px; }
 		.mwordpad { padding: 0 20px; }

		.gcTitle {  padding:0; }
	 	.gcTitle h3 {  font-size: 22px; margin-top: -15px; }
	 	.gcTitle p,
	 	.gcTitle2 p {   font-size: 12px; padding-bottom:1px; }
	 	.gcTitle2,
	 	.gcTitle4 { font-size: 12px; }
	 	.gcTitle2 span { height: 2px; margin-top: 14px; }
	 	.gcTitle3 {  text-align: left; padding:0 0 20px; }
	 	.gcTitle3 h3 {  font-size: 22px; }
	 	.mpropad { padding: 0 0 25px; }
	 	.wordtitlept { padding-top: 30px; }
		
		
		.catemb { padding: 0; margin: 0; }

	 
		.swiper-clients .swiper-slide { max-width: 100%; }
		.swiper-pos .swiper-prev { left:15px; }
   		.swiper-pos .swiper-next { right:15px; }

		ul.newslist { margin:0; display: flex; justify-content: space-between; flex-wrap: wrap; }
		ul.newslist li { width:100%;overflow: hidden; background: #f6f6f6; }
		ul.newslist li .newsText { position: absolute; top: 250px; left:15px; width: calc(100% - 45px); padding:10px; background:#fff; }
		ul.newslist li .newsText h4 { font-size: 14px; height: 40px; line-height: 20px; padding-bottom: 10px; }
		ul#homeNlist li:nth-child(3),
		ul#homeNlist li:nth-child(4){
			display: none;
		}
		

		ul#classnewslist { margin-top: 5px; flex-wrap: wrap; }
		ul#classnewslist li { margin-bottom: 20px; width:95%; }
		ul#classnewslist li .newsText { top: 210px; left:10px; padding:15px; width: calc(100% - 20px); }
	 
	 	.category {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: -10px;  }
	 	.category h3 { font-size: 14px;  }
	 	.category p { padding: 10px; margin-bottom: 0; }
	 	.clist { padding:0; width: 49%; margin-bottom: 15px; }
		.clist:hover .cateimg .bg { display: flex; justify-content: center; align-items: center; color: #fff; flex-direction: column; }
		.clist:hover .cateimg .bg a,
		.clist:hover .cateimg .bg h4 { color: #fff; font-size: 14px; }
		.clist:hover .cateimg .bg a {  width: 80%; font-size: 12px; }
		.clist { position: relative; }
		.clist h3 { font-size: 14px; height:60px; line-height: 21px; left: 0; width: 100%; }

	 
		 
		.clist .cateimg .bg {  left: 0; top: 0;  background: rgba(0,0,0,.5); width: 100%; height: 100%; display: none; }
		 
	 	.swiper-clients .swiper-slide:hover .avatar .bg h4 { font-size: 16px; margin-bottom: 5px;  }
		.swiper-clients .swiper-slide:hover .avatar .bg p { width: 80%; font-size: 12px; line-height: 22px; }
		.swiper-clients .swiper-slide:hover .avatar .bg a {  height: 30px; width: 80%;  margin-top: 10px; }
	     
	 	.swiper-clients h3 {  height: 50px; line-height: 50px; font-size: 18px;  }
	 	.servicePage {  top: 45%; z-index: 9990; width:100%;  }
		.servicePage a {  width:40px; height: 60px;  }
		.servicePage a i { font-size: 30px; color: #fff; }
		 
		 
}
/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/
 	.class-position { padding: 10px 0; border-bottom: #eee solid 1px;  }
 	.class-position i { font-size: 12px; }
 	#class-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;
	}

	#class-header h1 {
		color: #fff; font-weight: 700; font-family: MontReg;
		text-transform: uppercase;
	}
	#class-header h2{ width: 100%;
		color: #fff; font-size: 48px; font-family: MontReg;
		text-transform: uppercase; margin-bottom:50px; margin-top: -20px;
	}
	#class-header h6 { color: #fff; font-size: 20px; margin-bottom:50px;   }
	.classbg { 
		width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end;
		flex-direction: column; position: relative;
	}
	.classbg2 { 
		width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end;
		flex-direction: column; position: relative;
	}


	 
/***********************************************************************************
 *	- class about
 ***********************************************************************************/
 	.classtitle { font-size: 32px; font-weight: 300; color: var(--hcolor); text-align: center; padding-bottom: 10px; }
 	.classtitle2 { font-size: 32px; font-weight: 300; color: #fff; text-align: center; padding-bottom:20px; }
 	.classtitle3 { font-size: 32px; font-weight: 300; color: #000; text-align: center; padding-bottom:20px; }
	.flex-center { display: flex; justify-content: center; align-items: center; }
	.class-about { 
		padding: 30px 0;
	}
	.class-about h3 { 
		font-size: 32px; font-weight: 300; text-align: center; padding-bottom: 10px;
	}
	.abpic { width: 48%; }
	.abpic img { margin-top: 8px; }
	#font300 { font-weight: 300; font-size: 30px; }
	.about-tags li { width: 18%; text-align: center; background-color: #f6f6f6; color: #000; padding: 15px 0; font-size: 18px;  }
	.about-tags li:hover { background-color:#333; color: #fff;  }
	.wordtitle { color: #fff; text-align: left; }
	.nlwordbg {  color: #fff; height: 220px; padding-bottom: 30px; }

	.class-about ul.about-info {  display: flex; justify-content: space-between; z-index: 999;  }
	.class-about ul.about-info li { width: 25%; padding:30px 0; text-align: center;  }
	.class-about ul.about-info li i { font-size: 42px; color: #999;  }
	.class-about ul.about-info li p { color: var(--hcolor); font-size: 38px; padding-top: 20px; font-weight: bold; font-family: MontReg; }
	.class-about ul.about-info li > span { color: #666; }

	.class-about ul.about-jobs {  display: flex; justify-content: space-between; padding-top: 15px;  }
	.class-about ul.about-jobs li { width: 30%; padding:30px 0; text-align: center;  }
	.class-about ul.about-jobs li i { font-size: 42px; color: #000; background: #f0efef; padding: 20px; border-radius: 50%; -webkit-transition: all .3s;
				transition: all .3s;
		-webkit-transition: all ease-in-out 0.3s;
	  	transition: all ease-in-out 0.3s;  }
	.class-about ul#jobsi li:first-child i { padding:20px; }
	.class-about ul.about-jobs li:first-child i { padding:16px 20px; }
	.class-about ul.about-jobs li h4 { margin: 35px 0 10px; font-size: 24px; }
	.class-about ul.about-jobs li p { color: #666; font-size: 16px; }
	.class-about ul.about-jobs li > span { color: #666; }
	.class-about ul.about-jobs li:hover i { background: var(--hcolor); font-size: 46px;}
	.jobsinfo { background: url(../../nimg/jobs/picbg.jpg) no-repeat center bottom; height: 380px; color: #fff; }
	a.findjobBtn { font-size: 16px; display: flex; padding: 10px 40px; margin: 20px 0 40px; color: #000; background: var(--hcolor);  }
	a.findjobBtn i { font-size: 22px; margin-right: 3px; }
	a.jobmaiil { font-size: 16px; font-weight: bold; padding: 10px 20px; line-height: 48px; color: #000; background: var(--hcolor);  }
	.jobsdes { 
		font-size: 18px;
	}
	.jobsUpload { color: #000; }
	#ajaxUpload {z-index: 9999; box-shadow: 0 0 10px rgba(0, 0, 0, .1); width: 500px; height: 280px; position: fixed; left: calc(50% - 250px); top: calc(50% - 140px); background: #fff; display: none; }
	#ajaxUpload .closebtn { position: absolute; top: 0; right: 0; z-index: 999; background: var(--hcolor); color: #000; padding: 6px 15px; font-weight: bold; font-size: 12px; cursor: pointer; }
	.wordpdf { font-size: 14px; color: #999; text-align: left; margin: 0; padding: 0; }
	.uploadResumebtn { padding-bottom: 80px; }
	#uploadResume input[type="file"] { font-size: 14px; color: #999; }
	#uploadResume button,
	#supportForm button,
	#supportSubmit,
	#uploadProfile { background: var(--hcolor); width: 140px; margin:20px 0; padding: 3px 25px; display: inline-block; color: #000; border:#000 solid 1px;   }

/*---------订购与支持--------------*/
	.i-noxie { font-style: normal; font-weight: bold; font-family: MontReg; }
	p.nopm { margin: 0; padding: 0; }
	p.orderdes { font-weight: bold; color: #000; font-size: 18px; }
	ul.sup-order { margin-bottom: 20px; }
	ul.sup-order li { width: 50%;  padding-bottom: 20px; }
	ul.sup-order li h3 { color: #fff;  }
	ul.sup-order li i { font-size: 36px; margin-bottom: 20px; -webkit-transition: all .3s;
				transition: all .3s;
		-webkit-transition: all ease-in-out 0.3s;
	  	transition: all ease-in-out 0.3s;  }
	ul.sup-order li li:hover i { font-size: 44px;   }
	ul.sup-order li .telmail { margin: 0; padding: 0; }
	ul.sup-order li .ordertel { font-size: 22px; font-weight: bold; font-family: MontReg; }
	ul.sup-order > li:first-child { background: #333333; color: #fff; }
	ul.sup-order > li:first-child a { color: #fff; }
	ul.sup-order > li:last-child { background: var(--hcolor); color: #000; }
	ul.sup-order > li:last-child a,
	ul.sup-order > li:last-child h3 { color: #000; }

	.graybg { background-color:#f8f7f7; }
	.services { padding: 40px;  }

	.services .service-info { width: 55%; display: flex; justify-content: center;  flex-direction: column; }
	.services .service-info p { font-weight: 300; }
	.services .service-pic { width: 45%; display: flex; justify-content: center;   flex-direction: column; }
	.services .service-info span.line { height: 3px; width: 32px; border-radius: 2px; margin-bottom: 15px; background-color: #000; display:block; }
	.services .service-info a.telBtn { background-color: var(--hcolor); width: 200px; height: 40px; border-radius:20px;
	font-weight: bold; font-family: MontReg; font-size: 22px; color: #000;  }
	.services .service-info a.telBtn i { margin-right: 5px; }
	.services .service-info h3 { 
		font-size: 32px; font-weight: bold;  padding-bottom: 10px; font-family: MontReg;
	}
	.techpic { width: 80%; }

	.topForm { flex-wrap: wrap; }
	.topForm label { width: 48%; margin-bottom: 15px; }
	.topForm label input { width: 100%; }
	#textarea { width: 100%; }
	.topForm textarea { width: 100%; height: 100px; }
	.alicenter { align-items: center; }


/*---------应用领域--------------*/
	.appcate { padding: 40px 0; }
	.services .service-info .appli-info { width: 92%; line-height: 28px; }
	.services .service-info .appli-info2 { margin-left: 10%; width: 90%; line-height: 28px; }

	.wordtitlept { padding-top: 80px; }

/*---------新闻详情--------------*/

	.text-center { text-align: center; }
	.shownews h3 { font-weight: 400; margin-top: 10px;  }
	.shownews .newstime { font-size: 14px; color: #888; }
	.shownews .newstime span { display: inline-block; padding: 0 20px; }
	.shownews .newsText { padding-top: 10px; color: #666; }
	a.backbtn { background: #333; color: #fff; padding: 6px 30px; margin: 30px; cursor: pointer;  }
	a.backbtn:hover { background: var(--hcolor); }

/*---------联系我们--------------*/	

	.contactInfo { display: flex; justify-content: space-between; padding: 20px 0 40px; font-size: 14px; }
	.contactCity dl dt { padding-top: 20px; color: #033887; font-size: 20px; font-weight: 400; margin-bottom: 8px; }
	.contactCity dl dd i { margin-right: 8px; }
	.contactCity dl dd p { margin-bottom: 0; padding-bottom: 8px; }

	.contactForm { width: 58%; }
	.contactForm .cfromlist { margin-top: 20px; position: relative; }
	.contactForm .cfromlist span { width: 80px; margin-top: 5px;}
	.cfromlist span b,
	#alert { color: red; }
	#alert .formSuccess { color: #31a615;  }
	.cfromlist button { margin-left:71px; background: var(--hcolor); color: #000;  border: #000 solid 1px; padding: 3px 40px; }
 	#alert p { margin-left:71px; }
	#alert span{ margin-left:71px; color: red; }
	#salert { color: red;  }
	#salert .formSuccess { color: #31a615;  }
	#salert p {  }
	#salert span{   color: red; }
	.contactForm select {  height: 40px; }
	.contactForm input[type="text"],
	.contactForm textarea { width: 100%;  }
	.contactCity { width: 32%; }

/*---------产品列表--------------*/
	.procategory  { margin:10px 0 30px -15px; }
	.procategory h3 { font-weight: 400; font-size: 28px; }
	ul.prolist { margin:10px 0 20px -15px; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; }
	ul.prolist li { width: 32%; margin-right: 2%; position: relative; overflow: hidden; margin-bottom: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
	ul.prolist li > a { overflow: hidden; display: block; }
	ul.prolist li img { -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; }
	ul.prolist li:hover img { -webkit-transform: scale(1.1);
	  transform: scale(1.1); }
	ul.prolist li:nth-child(3n) { margin-right: 0; }
	ul.prolist li p { margin-top: -10px; padding:0 25px; font-size: 14px; line-height: 24px; }
	ul.prolist li p.des { height:100px; overflow: hidden; }
	ul.prolist li h4 { padding: 10px; text-align: center; }
	ul.prolist li:hover h4 a { color: var(--hcolor); }
	ul.prolist li:hover { box-shadow: 0 0 10px rgba(0, 0, 0, .2); }

/*---------产品详情--------------*/
	#proshow { display: flex; justify-content: space-between; padding: 40px 0;  }
	#proshow .proinfo  { width: 50%;   }
	#proshow .proinfo2  { width: 100%;   }
	#proshow .proinfo h3,
	#proshow .proinfo2 h3 { font-weight: 400; font-size: 30px; margin-bottom: 20px; }
	#proshow .proSwiper { width: 45%; margin-left: 5%; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, .2); }
	.proText,
	.otherPro { margin: 0 -15px 20px; }
	.proText dl dt { border-bottom: #eee solid 1px; margin-bottom: 20px; }
	.proText dl dt a { display: inline-block; color: var(--hcolor); padding: 10px 20px; font-size: 20px; font-weight: 400; border-bottom: var(--hcolor) solid 2px; 
		margin-bottom: -1px; }
 	
 	.otherPro dl dt { border-bottom: var(--hcolor) solid 2px; color: var(--hcolor); margin-bottom: 20px; padding: 10px 20px; font-size: 20px; font-weight: 400; }
 	.otherPro dl dd { padding:15px 0 15px 15px; }



@media (max-width: 767px) {
	#class-header { 
	 	background-position: center center;
		height:300px; margin-top:-68px;
	}
	#class-header h1 {
		font-size: 36px; margin-bottom: 0;
	}
	#class-header h2 {
	 font-size: 30px; margin-bottom:30px;
	}
	.contactInfo { flex-direction: column; } 
	.contactForm,
	.contactCity { width: 85%; margin: 0 25px; }
	.cfromlist button,
 	#alert p,
	#alert span{ margin-left:65px; }

	.services .flexorder { flex-direction: column-reverse; }

	#ajaxUpload { width:88%; height: 280px; left: 6%; top: calc(50% - 140px);  }

 /*---------产品列表--------------*/
 	#classprolist { padding: 0 20px; }
	.procategory  { margin:10px 15px 30px 10px; }
	ul.prolist { margin:10px 0 0 -15px;  }
	ul.prolist li { width:100%; margin-right: 0;  }
	 
 /*---------产品列表 end--------------*/

/*---------产品详情--------------*/
	#proshow { flex-direction: column; padding: 20px;  }
	#proshow .proinfo  { width: 100%;   }
	#proshow .proinfo h3 {  font-size:24px; margin-bottom:12px; }
	#proshow .proSwiper { width: 100%; margin-left:0; margin-top: 10px; }
	.proText,
	.otherPro { margin: 0 0 20px; }
 	.otherPro dl dd { padding:5px 0 15px 15px; }

/*---------产品详情 end--------------*/

	.shownews { padding: 20px 20px 0; }
	.class-position { padding: 10px 15px; }

	.abpic,
	.techpic { width: 100%; }
	.class-about ul.about-info { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; }
	.class-about ul.about-info li { width: 50%; }
	.class-about ul.about-info li i { font-size: 36px;  }
	.class-about ul.about-info li p { font-size: 32px; padding-top: 20px; }
	.about-tags li { width: 19%; font-size: 12px;  }

	.appcate { padding: 30px 0; margin-left: 0; }
	.services { padding: 20px;  }
	.services .service-info .appli-info,
	.services .service-pic { width: 100%;  }
	.services .service-info .appli-info2 { margin-left:0; width:100%;  }

	#class-header h6 {  font-size: 14px; margin-bottom:30px; padding: 0 20px;   }
	.class-about ul.about-jobs { flex-wrap: wrap; justify-content: center;  }
 	.class-about ul.about-jobs li { width: 88%; padding:30px 0; text-align: center;  }
 	.jobsinfo {height: 420px; color: #fff; }
	a.findjobBtn { font-size: 16px; display: flex; padding: 10px 40px; margin: 20px 0 40px; color: #000; background: var(--hcolor);  }
	a.findjobBtn i { font-size: 22px; margin-right: 3px; }
	a.jobmaiil { font-size: 16px; font-weight: bold; padding: 10px 20px; color: #000; background: var(--hcolor);  }
	.jobsdes { 
		font-size: 14px; padding: 0 30px; text-align: center;
	}

	ul.sup-order { flex-direction: column; }
	ul.sup-order li { width: 100%;  }
	ul.sup-order li ul { margin-left: 0; }
	ul.sup-order li .ordertel { font-size: 18px; }
	.orderdesml { margin-left: 20px; }
	.flexcol { flex-direction: column; }
	.services .service-info { width: 100%; }
	.svmb20 { margin-bottom: 20px; }
	.topForm label { width: 100%; }
}

@media (max-width: 415px) {
	.clists { margin:0 0 25px;  }
	 
}

@media (max-width: 320px) {
		.techText  {  font-size: 12px; }
		.techText a {  width: 120px;  }
}

 	.pageNav { 
		display: flex; justify-content: center; align-items: center; margin:20px 0 40px; border-bottom: #dedede solid 1px; height:40px;
	}
	.pageNav li { text-align: center; height:40px; line-height: 40px; padding: 0 40px; background-color: #333; }
	.pageNav li a { color: #fff; cursor: pointer; }
	.pageNav li.active,
	.pageNav li:hover { background-color: var(--hcolor);color: #fff; cursor: pointer; }

	
/* ------------page-------------- */
	.pagestyle ul { 
		display: flex; justify-content: center; align-items: center; margin-bottom: 50px;
	}
	.pagestyle ul li { width: 28px; height: 28px; margin: 2px 5px; border-radius: 1px; 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; }	 
/* ------------end-------------- */
	
	ul#vacancyList { margin-bottom: 60px; }
	ul#vacancyList li { margin-top: 20px;  }
	.mpos { display: none; }
	ul#vacancyList li:first-child .vacancyText { display: block; }
	ul#vacancyList li .vacancytitle { position: relative; border-left:var(--hcolor) solid 4px; background: #f5f5f5; padding: 0 20px; height: 48px; line-height: 48px;  display: flex; justify-content: space-between; }
	ul#vacancyList li .vacancytitle p { width: 20%; font-size: 14px; }
	ul#vacancyList li .vacancytitle p:first-child {width: 24%; font-size: 20px; color: #000; }
	ul#vacancyList li .vacancytitle p:nth-child(2) { width: 34%;  }
	ul#vacancyList li .vacancytitle p:nth-child(3),
	ul#vacancyList li .vacancytitle p:nth-child(4) { width: 20%;  }
	
	ul#vacancyList li .vacancyText { padding: 20px; display: none; }
	ul#vacancyList li .vacancyText strong { color: #000; }
	ul#vacancyList li .vacancytitle span { width: 25px; height: 48px; display: inline-block; display: flex; justify-content: center; align-items: center; position: absolute; right: 0; top: 0; background: var(--hcolor); } 
	ul#vacancyList li .vacancytitle i {  width: 8px; height: 8px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); }
	ul#vacancyList li.active .vacancytitle i { transform: rotate(135deg); }
	ul#vacancyList li.active .vacancyText { display: block;  }

	a.shenqingbtn { background: var(--hcolor); color: #000; display: inline-block; padding: 8px 30px; border-radius:25px; }
	a.shenqingbtn:hover { background: #000; color: var(--hcolor);  }
	
/***********************************************************************************
 *	- shownews
 ***** */


 	#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%;
    }
 
 

	 
@media (max-width: 767px) {
	 
	 
 	.p50 { padding:25px; }
	.mpos { display: block; line-height: 15px; }
 
	ul#vacancyList li .vacancytitle p:first-child {width: 60%; font-size: 16px; color: #000; }
 
	ul#vacancyList li .vacancytitle p:nth-child(2), 
	ul#vacancyList li .vacancytitle p:nth-child(3),
	ul#vacancyList li .vacancytitle p:nth-child(4) { display: none;  }
 
 
	 
}

@media (max-width: 414px) {
	 
}
@media (max-width: 320px) {
	 ul#vacancyList li .vacancytitle p:first-child {width: 60%; font-size: 14px; color: #000; }
}