/* Add here all your css styles (customizations) */



body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 100%;
 
}
body,html{
  overflow-x: hidden;
  /*overflow-y: auto;*/
}
.menu-container .navbar-brand .default-logo,
.menu-container .navbar-brand .shrink-logo{
  width: 100px;
  /*height: 45px;*/
}
#arrow{
    width: 34px;
    height: 47px;
    background-size: cover;
}
.span-title{
  color: #232323;
}
.bg-color-light1{
  background: #ffffff !important;
}
.business{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 15;
	padding:0px 0px 0px 0px;
	/* background: url(../images/business.png); */
	background-size:100% 100%;
}
.business .business_txt {
	width: 100%;
	font-size: 20px;
	text-align: left;
	margin: 0 auto;
	color: rgba(77,77,77,1);
	text-indent: 35px;
}
.aboutYdl{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 15;
	/* padding: 50px 0px 20px 0px; */
	background: url(../images/aboutYdl.png);
	background-size: 100% 100%;
}
.aboutYdl .aboutYdl_txt {
	width: 100%;
	font-size: 20px;
	text-align: left;
	margin: 0 auto;
	color: rgba(77,77,77,1);
	text-indent: 35px;
}
.uimg{
	width: 100%;
	height: 190px;
	position: relative;
}
@media (max-width: 350px) {
  .swiper-container{
    width: 100%;
    height: 240px;
  }
  #liveimg{
    width: 100%;
    height: 120px;
    background: url(../images/img222.png);
    background-size:100% 100%;
    /*background-attachment: scroll;
    background-position: center 0;
    background-repeat: no-repeat;*/
  }
  /*#liveimg:before {
    content: ' ';
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/img22.png) center 0 no-repeat;
    background-size: cover;
  }*/
  #h1{
    margin-bottom: 35px;
  }
  .jpng_group{
	position: relative;
	width: 100%;
	height: 100%;
	margin-bottom: 20px;
  }
  .jpng{
	position: relative;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
  }
  .bglogos{
	width: 100%;
	height: 100%;
    background-size: 100% 100%;
    margin-top: 115px;
  }
  .poz{
    z-index: 15;
    position: relative;
    margin-top: 0;
    background: #fff;
  }
  .portfolio-box{
    width: 270px;
  }
  .h1-title{
    font-size: 24px; 
    color: #262626;
  }
  .h4-desc{
    font-size: 16px; 
    color: #bfbfbf;
    margin-top: 20px;
	padding: 0 10px;
  }
	.business  .business_txt,.aboutYdl .aboutYdl_txt{
	  font-size: 16px;
	  width: 100%;
  }
	.business{
		padding: 0;
    }
  .uimg{
    width: 120px;
    height: 100px;
  }
  .match{
    width: 300px;
  }
/*  .footercon1,.footercon2{
    width: 310px;
    height: 230px;
	background-color: #FFFFFF;

  } */
  h1.title-v3-md, h2.title-v3-md{
    font-size: 16px;
  }
  img.person-img{
    width: 110px;
    height: 110px;
  }
  .copyrighth1,.copyrighth4{
    font-size: 16px; 
  }
  .cooperation-img{
    width: 100px;
    height: 50px;
    background-size:cover;
  }
  #h4>a>img{
	width: 130px;
	height: 40px;
	background-size: 100% 100%;
  }
  .interactive-slider-v2.img-v4{
	width: 100%;
	height: 100%;
	padding: 0 !important;
	position: relative;
	left: 0;
	top: 0;
	right: 0;
	z-index: 10;
  }
	#arrow {
		position: relative;
		left: 0 !important;
	}
	.index,.kball,.us{
		position: relative;
		width: 100%;
		/*height: 95px;*/
		display: block;
		padding-top: 95px;
		margin-top: -95px;
	}
}
@media (min-width: 350px) and (max-width: 768px) {
  .swiper-container{
    width: 100%;
    height: 320px;
  }
	.col-sm-6 {
		width: 48%;
	}
  .posd{
	  width: 100%;
	  height: 40px;
  }
  #liveimg{
    width: 100%;
    height: 155px;
    background: url(../images/img222.png);
    background-size:100% 100%;
    /*background-attachment: scroll;
    background-position: center 0;
    background-repeat: no-repeat;*/
  }
  /*#liveimg:before {
    content: ' ';
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/img22.png) center 0 no-repeat;
    background-size: cover;
  }*/
  .bglogos{
	  width: 100%;
	  height: 200px;
	  background-size: 100% 100%;
	  margin-top: 80px;
  }
  .poz{
    z-index: 15;
    position: relative;
    /*margin-top: 95px;*/
    background: #fff;
  }
  .jpng_group{
	  position: relative;
	  width: 100%;
	  height: 100%;
	  margin-bottom: 20px;
  }
  .jpng{
	  position: relative;
	  width: 320px;
	  /*height: 320px;*/
	  background-size: 100% 100%;
  }
	#arrow {
		position: relative;
		left: 0 !important;
	}
  #h1{
    margin-bottom: 35px;
  }
  .portfolio-box{
    width: 310px;
  }
  .h1-title{
    font-size: 24px; 
    color: #262626;
  }
  .h4-desc{
    font-size: 16px; 
    color: #bfbfbf;
	padding: 0 10px;
    margin-top: 20px;
  }
	.business .business_txt,.aboutYdl .aboutYdl_txt{
		font-size: 16px;
		width: 100%;
	}
  .uimg{
    width: 115px;
    height: 100px;
  }
  .match{
    width: 300px;
  }
 /* .footercon1,.footercon2{
    width: 390px;
    height: 250px;
  } */
  h1.title-v3-md, h2.title-v3-md{
    font-size: 16px;
  }
  img.person-img{
    width: 110px;
    height: 110px;
  }
  .copyrighth1,.copyrighth4{
    font-size: 16px; 
  }
  .cooperation-img{
    width: 122.5px;
    height: 56px;
    background-size:cover;
  }
  #h4>a>img{
	width: 130px;
	height: 35px;
	background-size: 100% 100%;
  }
  .interactive-slider-v2.img-v4{
	width: 100%;
	height: 100%;
	padding: 0 !important;
	position: relative;
	left: 0;
	top: 0;
	right: 0;
	z-index: 10;
  }
	.index,.kball,.us{
		position: relative;
		width: 100%;
		/*height: 95px;*/
		display: block;
		padding-top: 95px;
		margin-top: -95px;
	}
}
@media (min-width: 769px) and (max-width: 980px) {
	.col-sm-6 {
         width: 48%;
     }
  .swiper-container{
    width:100%;
    height: 488px;
  }
  #liveimg{
    width: 100%;
    height: 396px;
    background: url(../images/img22.png);
    background-size:100% 100%;
    /*background-attachment: scroll;
    background-position: center 0;
    background-repeat: no-repeat;*/
  }
  .bglogos{
	/*width: 100%;*/
    height: 290px;
    background-size: 100% 100%;
    margin-top: 140px;
  }
	.jpng_group{
		position: relative;
		width: 100%;
		height: 100%;
		margin-bottom: 20px;
	}
	.jpng{
		position: relative;
		width: 370px;
		/*height: 370px;*/
		background-size: 100% 100%;
		float: right;
		margin-top: -20%;
		right: 0;
	}
	#h4{
		width: 290px;
		margin: 0 auto !important;
	}
  .poz{
    z-index: 15;
    position: relative;
    /*margin-top:-150%;*/
    /*padding-top: 150%;*/
	margin-top: 0px;
    background: #fff;
  }
  .index,.kball,.us{
	  position: relative;
	  width: 100%;
	  /*height: 95px;*/
	  display: block;
	  padding-top: 95px;
	  margin-top: -95px;
  }
  #h1{
    margin-bottom: 50px;
  }
  .portfolio-box{
    width: 560px;
  }
  .h1-title{
    font-size: 36px; 
    color: #262626;
  }
  .h4-desc{
    font-size: 24px; 
    color: #bfbfbf;
    margin-top: 20px;
	padding: 0 10px;
  }
  .uimg{
    width: 230px;
    height: 190px;
  }
  .match{
    width: auto; 
  }
  .perw div{
    width: 22% !important;
  }
 /* .footercon1,.footercon2{
    width: 410px;
    height: 250px;
  } */
  .copyrighth1,.copyrighth4{
    font-size: 24px; 
  }
  .cooperation-img{
    width: 122.5px;
    height: 56px;
    background-size:cover;
  }
  #h4>a>img{
	width: 130px;
	height: 40px;
	background-size: 100% 100%;
  }
  .interactive-slider-v2.img-v4{
	width: 100%;
	height: 100%;
	padding: 0 !important;
	position: relative;
	left: 0;
	top: 0;
	right: 0;
	z-index: 10;
  }
  
}
@media (min-width: 991px) and (max-width: 1024px){
	.col-md-3 {
		width: 23%;
	}
  .swiper-container{
    width: 840px;
    height: 488px;
  }
  #liveimg{
    width: 100%;
    height: 396px;
    background: url(../images/img22.png);
    background-size:100% 100%;
    /*position: relative;
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;*/
  }
  .bglogos{
	width: 100%;
    height: 360px;
    background-size: cover;
    margin-top: 115px;
  }
  .jpng_group{
	position: relative;
	width: 100%;
	height: 100%;
	margin-bottom: 20px;
  }
  .jpng{
	  position: relative;
	  width: 370px;
	  /*height: 370px;*/
	  background-size: 100% 100%;
	  float: right;
	  margin-top: -20%;
	  right: -4% !important;
  }
  #h4{
	  width: 490px;
	  margin: 0 auto !important;
  }
  #arrow{
	left: 13%;
	position: relative;
  }
  .poz{
    z-index: 15;
    position: relative;
    /*margin-top: 100%;*/
    background: #fff;
  }
  #h1{
    margin-bottom: 50px;
  }
  .portfolio-box{
    width: 560px;
  }
  .h1-title{
    font-size: 36px; 
    color: #262626;
  }
  .h4-desc{
    font-size: 20px;
    color: #bfbfbf;
    margin-top: 20px;
	padding: 0 10px;
  }
  .business  .business_txt{
	font-size: 20px;
	width: 100%;
  }
  .uimg{
    width: 230px;
    height: 190px;
  }
  .match{
    width: auto; 
  }
  .perw div{
    width: 20% !important;
  }
  .footercon1,.footercon2{
    width: 410px;
    height: 250px;
	background-color: #DD4B39;
	z-index: 999;
	display: flex;
  }
  .copyrighth1,.copyrighth4{
    font-size: 18px;
  }
  .cooperation-img{
    width: 122.5px;
    height: 56px;
    background-size:cover;
  }
  .interactive-slider-v2.img-v4{
	width: 100%;
	height: 100%;
	padding: 0 !important;
	/*position: fixed;*/
	left: 0;
	top: 0;
	right: 0;
	z-index: 10;
  }
	.perw div{
		width: 22% !important;
	}
}
@media(min-width: 1025px){
	.col-md-3 {
		width: 23%;
	}
	.bglogos{
		/*width: 100%;*/
		height: 360px;
		background-size: cover;
		margin-top: 115px;
	}
	.jpng_group{
		position: relative;
		width: 100%;
		height: 100%;
		margin-bottom: 20px;
	}
	.jpng{
		position: relative;
		width: 370px;
		/*height: 370px;*/
		background-size: 100% 100%;
		float: right;
		margin-top: -20%;
		right: -5%;
	}
	#h4{
		width: 520px;
		margin: 0 auto !important;
	}
	#arrow{
		left: 13% !important;
		position: relative;
	}
	.interactive-slider-v2.img-v4 {
		width: 100%;
		height: 100%;
		padding: 0 !important;
		/*position: fixed;*/
		left: 0;
		top: 0px;
		right: 0;
		z-index: 10;
	}
	.poz {
		z-index: 15;
		position: relative;
		/*margin-top: 100%;*/
		background: #fff;
	}
	#liveimg {
		width: 100%;
		height: 396px;
		background: url(../images/img222.png);
		background-size: 100% 100%;
	}
	.perw div{
		width: 22% !important;
	}
}
.match{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
}
.match div{
  display: inline-block;
  text-align: center;
}
.swiper-slide img{
  width: 100%;
  height: 100%;
  background-size:cover;
}
.imgrecom{
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  display: block;
  background-size: 100% 100%;
}
.aboutUs{
	position: relative;
	z-index: 15;
}
.footercon{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  margin: 20px auto;
}
.lh5{
  line-height: 50px;
}
.copyright{
  height: auto;
  background: #192f60;
  z-index: 15;
  position: relative;
}
.copyrighth1{
  line-height: 40px;
  text-align: center;
  margin-top: 50px;
}
.copyrighth4{
	  line-height:30px;
	  text-align: center;
	  color: #fff;
	  margin: 0;
	  font-size: 0.8125rem;
}
.img-v4{
  padding: 200px 0 25px 0;
} 
.perw{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.portfolio-box{
  margin: 30px auto 0;
  /*display: flex;*/
  justify-content: center;
  flex-wrap: wrap;
}
.portfolio-box div{
  display:inline;
  text-align: center;
}
.closeimg{
  width: 20px;
  height: 20px;
  float:right;
  display: none;
  margin:44px 24px 110px 0;
  cursor: pointer;
}
.closepo{
  height: 200px;
  display: none;
}
@media (min-width: 980px) and (max-width: 1200px){
	.jpng {
		position: relative;
		width: 370px;
		/*height: 370px;*/
		background-size: 100% 100%;
		float: none;
		margin-top: 0%;
		right: 0% !important;
	}
	#arrow {
		left: 0% !important;
		position: relative;
	}
	.perw div{
		width: 22% !important;
	}
}
@media (max-width: 991px)and (min-width: 769px){
  #nav_ul>li>a{
    font-size: 14px;
    /*color: #000;*/
    /*float: right;*/
    /*display: inline-block;*/
  }
  /*.menu-container{
    margin-top: 80px;
  }
  .header-v6 .navbar-collapse.collapse{
    display: block !important;
    margin-top: -80px;
    height: 620px;
  }*/
	#h4{
		margin: 0 auto;
		position: relative;
		width: 290px;
	}
	.jpng_group{
		position: relative;
		width: 100%;
		height: 100%;
		margin-bottom: 20px;
	}
	.jpng{
		width: 320px;
		/*height: 320px;*/
		background-size: 100% 100%;
		float: none;
		margin-top: 0%;
		right:0%;
	}
	#arrow{
		position: relative;
		left: 14%;
	}
	.perw div{
		width: 22% !important;
	}
}
#nav_ul li{
  /*padding: 0 25px;*/
  /*overflow: hidden;*/
}
.navbar-toggle{
  padding: 16px 10px 0 !important;
}
#mmodal{
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  background: rgba(0,0,0,0.2);
  z-index: 18;
}
#ios,#android{
  cursor: pointer;
}
#codemodal{
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  z-index: 20;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}
.modal-contain{
  width: 170px;
  height: 140px;
  margin: 250px auto 0;
  display: flex;
  justify-content: center;
}
.ios-code,.android-code{
  margin-left: 20px;
}
.modal-contain .ios-code,.modal-contain .android-code{
  width: 200px;
  height: 200px;
  background-size: 100% 100%;
  display: none;
}
.close-code{
  float: right;
  margin-top: 3px;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  display: block;
  cursor: pointer;
}
#service,#solution,#us{
	z-index: 15;
	position: relative; 
}
#news{
	z-index: 15;
	position: relative;
	background: #fff;
	width: 100%;
}
.p2{
	padding: 20px 15px;

}
.poz h1{
	margin-top: 30px;
}
.jpng_group{
	/*display: none;*/
}
#arrow{
	position: relative;
	left: 0;
}
.dis{
	display: none;
}

.mapTitle{
	    width: 97px;
		height: 40px;
		font-family: MicrosoftYaHei;
		font-size: 24px;
		font-weight: bold;
		font-stretch: normal;
		line-height: 40px;
		letter-spacing: 0px;
		color: #55514e;
		text-align: center;
}

.mapTitle-p{
		font-family: MicrosoftYaHei;
		font-size: 18px;
		font-weight: bold;
		font-stretch: normal;
		line-height: 40px;
		letter-spacing: 0px;
		color: #55514e;
		line-height: 1.875rem;
}
.flex-r{
	display: flex;
	flex-direction: row;
}
.flex-c{
	display: flex;
	flex-direction: column;
}
#h1{
	margin-top: 130px;
	justify-content: center;
	align-items: center;
}
#h1 .app{
	text-align: right;
	width: 35%;
}
#h1 .bglogos{
	margin-top: 0;
	object-fit: contain;
}
#h1 .banner{
	align-items: center;
	margin-left: 20px !important;
	width: 65%;
	max-width: 700px;
}
#h1 .banner .textimg{
	width: 100%;
	max-width: 500px;
	margin-bottom: 2rem;
}
#h1 .banner #ios{
	margin: 0;
}
#h1 .banner #android{
	margin: 1rem 0 0 0;
}


/*#arrow{*/
	/*position: relative;*/
	/*left: 14%;*/
/*}*/
/*#nav_ul>li>a{
	font-size: 22px;
}*/