/***********************************************************************************
 *	+ 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: #2262af;
	}
 	#main-container {
		position: relative;
		overflow: hidden;
		background-color: #fff; 
	}
	
	.boxed {
		background: url(../images/bg-pattern-1.png) repeat top left;
	}
	
	.boxed #main-container {
		margin: 0 auto;
		position: relative;
		max-width: 1200px;
		-webkit-box-shadow: 0px 0px 5px #000;
				box-shadow: 0px 0px 5px #000;
	}
	
	.spanopacity { opacity: 0; width: 50px; height: 50px; position: absolute; right: 0; top:0; z-index: 99999;  }

	.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; }
 	.pagetext p { display: flex; align-items: center; font-size: 14px; }
 	.pagetext p em { font-size: 24px; margin-right: 10px; }
/***********************************************************************************
 *	+ 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: 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; }
	#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; }
	
	#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: 50%; display: flex; flex-direction: column; justify-content: space-between;  }
	#navQrcode li:first-child { margin-right: 30px; }
	#navQrcode li img { width: 100%; }

	.homeabout p { font-size: 14px; font-weight: 300; line-height: 36px; display: flex; justify-content: space-between; }
	.homeabout p a { display: inline-block; font-size: 14px; }
 
	@media (min-width: 768px) and (max-width: 991px) {
		#header { position: relative; }
		.homeabout p { font-size: 12px; font-weight: 300; line-height: 30px; }
	}
	@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; }
	}
	
/***********************************************************************************
 *	- 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; }
		
	}
	
	@media (max-width: 767px) {
		
		#logo { 
			margin-top: 0;
			padding: 20px 0; 
		}
		
	}

/***********************************************************************************
 *	- 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: var(--hcolor); }
	.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: 200px; 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; font-size: 12px;
	}
	
	.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: rgba(0,0,0,.5); 
		color: #fff;
		line-height: 24px;
		margin-top: 25px;
		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(0,0,0,.8); 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: #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;
		}
		
	}
	
/***********************************************************************************
 *	- SEARCH
 ***********************************************************************************/		
	.menu li.search { display: flex; justify-content: flex-start; align-items: center; }
	
	.menu li.search a {
		margin:0 6px;
	}
	.menu li.search a i { 
		font-size: 18px;
		font-weight: 700;
	}
	.menu li a.cart {
		margin:0 6px 0; position: relative;
	}
	.menu li a.cart span { font-size: 10px; position: absolute; right: -8px; top:12px; background-color: #f00; color: #fff; border-radius: 50%; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center; }
	.menu li.search a.wxqrcode {
		margin:1px 6px 0;
	}
	.menu li.search a.wxqrcode i { 
		font-size: 14px;
		font-weight: 700;
	}

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

	@media (min-width: 768px) and (max-width: 991px) {

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

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

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

	#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(../../img/banner.jpg); }
 	.indexbg2 { background-image: url(../../img/banner2.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: 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 { max-height: 150px; }
      /*包裹自定义分页器的div的位置等CSS样式*/
	.pagination { position: absolute; right:30px; display: flex; justify-content: center; align-items: center;
	flex-direction: column; top: 45%; z-index: 9990; width:120px; }
	.pagination 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; }
	.pagination a i { font-size: 28px; color: #fff; }
	.pagination 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: top center;
		height:770px; 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; }
	a.backbtn { padding: 5px 18px; margin-right: 15px; cursor: pointer; border-radius: 3px; border: #eee solid 1px; margin-bottom: 20px; }
	a.backbtn:hover { color: var(--hcolor); border: var(--hcolor) solid 1px; }
	@media (min-width: 768px) and (max-width: 991px) {

		#page-header {   }
		#page-header .bfont { max-height: 80px; }
		
	}
	
	@media (max-width: 767px) {
		
		#page-header { height: 300px;  }
		#page-header .bfont { max-height: 60px; }
		.pagination {  right:0; top: 38%; z-index: 9990; width:60px; }
		.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
 ***********************************************************************************/
 	.photolist { width: 23%; margin-bottom:10px; margin-right: 2%;
	  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;
	}
/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/
 
	.about-me {
		padding: 40px; color: #2c3e50; text-align: center; background: url(../../img/bg.png) no-repeat center top;
	}
	.homeabout {  margin: 0 15%;  }
	.homeabout a:hover { color: var(--hcolor); }
	.about-me h3 {
		 font-weight: 300; font-size: 30px;  color: #2c3e50;
	}
	.about-me h4 {  margin-bottom: 1.5rem; color: #2c3e50; }
	.about-me p { margin-bottom: 10px; line-height: 21px; font-size: 12px;  }
	.about-me p.tc { text-align: left; }
	.coprval h3 { font-size: 18px; margin-top: 5px; }
	.coprval li i { font-size: 48px; -webkit-transition: all .3s;
				transition: all .3s; }
	.coprval li:hover i { font-size: 60px;-webkit-transform: scale(1.1);
	    transform: scale(1.1); color: var(--hcolor); }
	 
	.flexbetween { display: flex; justify-content: space-between; }
 	.atop { margin: 0 10%; }
    .mt50 { margin-top: 50px; }
    .mt30 { margin-top: 30px; }
 
  
/***********************************************************************************
 *	- SERVICES
 ***********************************************************************************/
 
 	.procate {
		padding: 40px 0 20px; color: #2c3e50; text-align: center; 
	}
	.procate h3 {
		 font-weight: 300; font-size: 30px;  color: #2c3e50;
	}
	.procate h4 {  color: #2c3e50; }

	.category { margin:20px 0; min-height: 200px; }
	.category h3 { font-weight:400; padding: 10px 10px 0; margin: 0; font-size: 16px;  }
 
 	.category p { padding: 10px; margin-bottom: 0; }
 	.category a.more { margin: 0; padding:0 10px 10px; display: flex; }
 	.category a.more i { margin-top: 1px; margin-right: 4px; font-size: 14px; }
 	.clist { background: #fff; margin-bottom: 40px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); }
 	.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 .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;
	}


  .blog_area {
  padding: 40px 0;
}
.phone-layout-s { padding-bottom: 20px; }
.single-travel-blog {
  position: relative;
  -webkit-box-shadow: 0 0 20px 0 rgba(47, 47, 47, 0.05);
  box-shadow: 0 0 20px 0 rgba(47, 47, 47, 0.05);
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
}
.single-travel-blog:hover {
  -webkit-box-shadow: 0 0 60px 0 rgba(47, 47, 47, 0.1);
  box-shadow: 0 0 60px 0 rgba(47, 47, 47, 0.1);
}
.single-travel-blog:hover .blog-image img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.single-travel-blog:hover .blog-content .blog-post-content h4 a {
  color: var(--hcolor); 
}
.single-travel-blog:hover .blog-content .blog-post-content a {
  color: var(--hcolor); 
}
.single-travel-blog .blog-image {
  overflow: hidden;
  position: relative;
  border-radius: 3px;
}
.single-travel-blog .blog-image a {
  display: block;
}
.single-travel-blog .blog-image a img {
  width: 100%;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.single-travel-blog .blog-content {
  padding: 20px;
}
.single-travel-blog .blog-content .blog-meta {
  color: #727272;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  padding-bottom: 0;
}
.single-travel-blog .blog-content .blog-meta .post-date {
  float: left;
  margin-right: 5px;
}
.single-travel-blog .blog-content .blog-meta .post-date span {
  color: #727272;
}
.single-travel-blog .blog-content .blog-meta .post-social {
  text-align: right;
}
.single-travel-blog .blog-content .blog-meta .post-social li {
  display: inline-block;
  margin: 0 10px;
}
.single-travel-blog .blog-content .blog-meta .post-social li a {
  display: block;
  color: #727272;
  font-size: 14px;
  font-weight: 400;
}
.single-travel-blog .blog-content .blog-meta .post-social li a i {
  margin-right: 5px;
}
.single-travel-blog .blog-content .blog-meta .post-social li a i.active {
  color: #f15b5c;
}
.single-travel-blog .blog-content .blog-post-content h4 a {
  color: #2f2f2f;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 28px;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
}
.single-travel-blog .blog-content .blog-post-content p {
  color: #727272;
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
}
 
.single-travel-blog .blog-content .blog-post-content a {
  color: #2f2f2f; cursor: pointer;
  font-size: 12px; display: flex;
  font-weight: 500;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
}
.single-travel-blog .blog-content .blog-post-content a i {
  margin-left: 5px; font-size: 12px;
}

/***********************************************************************************
 *	- clients
 ***********************************************************************************/

    .swiper-pos { position: relative; }
    .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: 30px; color: #999; }
    .swiper-pos .swiper-next:hover i,
    .swiper-pos .swiper-prev:hover i { color: var(--hcolor); }
    .swiper-pos .swiper-prev { left: -50px; }
    .swiper-pos .swiper-next { right: -50px; }

     

/***********************************************************************************
 *	+ FOOTER
 ***********************************************************************************/
 
 	#footer {
		padding: 40px 0;
		background-color: #2c3e50;
		color: #e2e2e2;
		font-size: 13px;
	}
	#footer a { color: #eee; }
	#footer a:hover { color: #fff; }
	#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;  padding: 20px 0; }
	.fnav a { font-size: 14px; margin-right: 30px;  }
 
	.flinks {  border-top: #4a5867 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;
		}
		#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; }

		.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;  }
		.clist { margin: 0; padding: 5px; }
		.category h3 { font-weight:400; padding: 10px 0 5px; text-align: center; margin: 0; font-size: 16px;  }
	 	.category h6,  
	 	.category p, 
	 	.category a.more {display: none; }
 
	 	.swiper-pos { position: relative; padding: 0 20px; }
	 	.swiper-pos .swiper-prev { left: 10px; }
    	.swiper-pos .swiper-next { right: 10px; }
 
}
/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/

 	#class-header { 
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		height:500px; 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 {
		color: #fff; font-weight: 700; font-family: MontReg;
		text-transform: uppercase;
	}
	#class-header h2{ width: 100%;
		color: #fff; font-size: 56px; 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;
	}


	 
/***********************************************************************************
 *	- class about
 ***********************************************************************************/
 	.clists { margin:0 15px 25px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
	.flex-center { display: flex; justify-content: center; align-items: center; }
	/* BLOG POST COMMENT FORM */
	.class-about { padding: 50px 0;   }
	.class-about p { margin-bottom: 10px; }
	.class-about h3 { margin: 20px 0; font-weight: 300; font-size: 32px; }
	.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; }
	ul.about-ts li span { background-color: #666; 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;
	}
	.about2 { margin:50px 0; padding-bottom: 40px; background-color: #f8f8f8; }
	.class-qywh { padding:0;   }
 
@media (max-width: 767px) {
	#class-header { 
	 	background-position: center center;
		height:300px;
	}
	#class-header h1 {
		font-size: 36px; margin-bottom: 0;
	}
	#class-header h2 {
		margin: 0 22%; font-size: 30px;
	}
	.about2 { margin: 30px 0 0; }
	.class-about { padding:0; }
	.class-about h3 { margin: 20px 0 10px;font-size: 28px; }
 
	.clients { margin: 0; }
	.flex-dis {  display: flex;
		flex-direction: column-reverse;
	}
 

	.imgov { overflow: hidden; }
}

@media (max-width: 415px) {
	
	 
}

	.history { margin:0; }
	.pagestyle { 
		display: flex; justify-content: center; align-items: center; margin-bottom: 50px;
	}
	.pagestyle li { width: 28px; height: 28px; margin: 2px; line-height: 26px; border: #eee solid 1px; text-align: center; }
	.pagestyle li.active,
	.pagestyle li:hover { background-color: var(--hcolor); color: #fff; cursor: pointer; border: var(--hcolor) solid 1px; }
/***********************************************************************************
 *	- college
 ***********************************************************************************/ 
 	.page-postion { margin-top:20px; padding-bottom: 10px; text-align: left; border-bottom: #eee solid 1px; }
 	.page-postion i { font-size: 10px; }
 	.page-postion a:hover { color: var(--hcolor); }
 	.pageNav { 
		display: flex; justify-content: center; align-items: center; margin:0 0 30px; height:40px;
	}
	.pageNav li { width: 20%; text-align: center; height:40px; line-height: 40px; background-color: #eceaea; }
	.pageNav li:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
	.pageNav li:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
	.pageNav li a { color: #000; cursor: pointer; }
	.pageNav li.active a,
	.pageNav li:hover a { color: #fff; }
	.pageNav li.active,
	.pageNav li:hover { background-color: var(--hcolor);color: #fff; cursor: pointer; }

	

 
/***********************************************************************************
 *	- shownews
 ***********************************************************************************/ 
 	.shownewspage h3 { font-weight: 400; text-align: center; font-size: 18px; }
 	.newscontent { padding-bottom: 50px; margin-left: 20px; }
 	.news-icon { display: flex; color: #999; margin: 5px 0 10px; justify-content: center; align-items: center; }
 	.news-icon span { display: flex; font-size: 12px; margin-right: 20px; font-weight: 200; color: #999; }
    .news-icon span i { margin-right: 5px; }
 
	.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 a:hover { color: var(--hcolor);  }
	.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: 75%; margin-right: 5%; }
	.cline { width: 20%; border-left: #ccc solid 1px; text-align: right; }

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

	 
@media (max-width: 767px) {
	.inquire { padding: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 { 
		 margin:0;  padding-bottom: 0; justify-content: space-around; align-items: stretch;
	}
	.pageNav li { width: 100%; height: 45px; padding: 0; line-height: 45px; font-size: 14px; }
	 
	 
	.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,
	 
	 
 	.p50 { padding:25px; }
	.subcompany { 
		margin: -15px;
	}

 
	.cline { width: 100%; border-left: none; text-align: center; }
 
	 
	.inform .input { height: 45px; line-height: 45px; font-size: 14px; }
	.inform button {  height: 45px; line-height: 45px; font-size: 14px; }
 
 	.page-postion { margin:10px; }
	 
}

@media (max-width: 414px) {
	  
}
@media (max-width: 320px) {
	  
}