.banVideo{ position:relative; width:100%; height:100%; overflow:hidden;}
.banVideo video{ position:absolute; left:50%; top:50%; z-index:0; min-height:100%; min-width:100%;
 transform:translate(-50%,-50%);
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 -o-transform:translate(-50%,-50%);
}
.banLay{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; background:rgba(0,0,0,0);}
#example_video_1{height: 100%; position: relative; width: 100%; overflow:hidden;}
	#example_video_1 source{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:0; min-height:100%; min-width:100%;}
.vjs-big-play-button , .vjs-big-play-button{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; background:rgba(0,0,0,0);}

.imgBg{ background-position:center center; background-repeat:no-repeat; background-size:cover;}
.imgBg img{ display:none;}
.banBg1{ position:absolute; left:0; top:0; width:100%; height:100%;}
.banBg2{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(5); transition:all 0.5s ease 0s; animation:flash 3s infinite;}
.banImg{ position:absolute; left:0; top:0; width:100%; height:100%;}
.swiper-slide-active .banBg2{ transform:scale(1); transition:all 2s ease 0.3s;}

.box1Bg{ position:absolute; left:0; top:0; width:100%; height:100%; background:url(../assets/img/box1Bg.jpg) repeat;animation:animatedBackground 40s linear infinite;}
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position:-100% 0; }
}
.hmTitH2{ font-size:60px; color:#0074bc; display:inline-block; background: -webkit-gradient(linear, left top, right top, color-stop(0, #0074bc), color-stop(0.3, #0074bc), color-stop(0.5, #01d6fb), color-stop(0.7, #0074bc), color-stop(1, #0074bc)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-animation: slidetounlock 3s linear infinite; animation: slidetounlock 3s linear infinite;}
@-webkit-keyframes slidetounlock { 
0% {
background-position: -100px 0;
}
80% {
background-position: 68px 0;
}
100% {
background-position: 100px 0;
}
}
@keyframes slidetounlock {
0% {
background-position: -100px 0;
}
80% {
background-position: 68px 0;
}
100% {
background-position: 100px 0;
}
}
.img2 span{ display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
.img2:after,.img2:before,.img2 span:after,.img2 span:before{ display:block; content:""; position:absolute; border:4px solid #2c6bc7; width:70px; height:70px; animation: whImg2 4s linear infinite;}
.img2:before{ left:0; top:0; border-right:none; border-bottom:none; border-radius:10px 0 0 0;}
.img2:after{ left:0; bottom:0; border-right:none; border-top:none; border-radius:0 0 0 10px;}
.img2 span:before{ right:0; top:0; border-left:none; border-bottom:none; border-radius:0 10px 0 0;}
.img2 span:after{ right:0; bottom:0; border-left:none; border-top:none; border-radius:0 0 10px 0;}
@keyframes whImg2 {
0% { width:0; height:0;}
100% { width:70px; height:70px;}
}
.box2ImgBg{ position:relative; width:90%;}
.box2Ico{ position:absolute; left:0; bottom:0; width:100%; height:100%;}
.box2Ico img{ position:absolute; left:0; bottom:0; width:100%; height:100%;}

.box2Ico1{ animation:flash 4s infinite;}
.box2Ico2{ animation:flash 5s infinite;}
.box2Ico3{ animation:flash 6s infinite;}

/*.box2Img{ position:absolute; left:0; top:0; width:100%; height:100%;}
.box2Img li{ position:absolute; left:0; top:0;}

.box2LiImg1{ animation:pulse 4s infinite;}
.box2LiImg2{ animation:pulse 5s infinite;}
.box2LiImg3{ animation:pulse 6s infinite;}*/


.box2Img{ position:absolute; left:0; top:0; width:100%; height:100%;}
.box2Img li{ width: 33.3%; float: left; height: 100%; position: absolute; top: 0;}
.box2Img li:nth-child(1){left: 13%; z-index: 2;}
.box2Img li:nth-child(2){left: 33%; z-index: 1;}
.box2Img li:nth-child(3){left: 53%; z-index: 2;}
.box2Img li a{ height: 100%; position: relative;}
.box2Img li img{ height: auto; width: 100% !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

.box2Img li.box2LiImg1:hover{ animation:pulse 4s infinite;}
.box2Img li.box2LiImg2:hover{ animation:pulse 5s infinite;}
.box2Img li.box2LiImg3:hover{ animation:pulse 6s infinite;}


.box3Img{ position:absolute; left:0; top:0; width:100%; height:100%;}
.box3Img li{ position:absolute; opacity:0; transform:translateX(100px);}
.box3Img1{ right:100px;}
.box3Img2{ right:0; top:50%; margin-top:-72px;}
.box3Img3{ right:80px; bottom:-15px;}
.box3Line{ width:180px; height:1px; background:#62cdff; position:absolute; right:145px; top:50%;}
.box3Line:before{ display:inline-block; content:""; background:#62cdff; border-radius:50%; width:12px; height:12px; position:absolute; left:-12px; top:50%; margin-top:-6px; animation:flash 2s infinite;}
.box3Img2 .box3Line{ width:300px;}
.box3Img3 .box3Line{ width:220px;}
.box3CirBg{ width:145px; height:145px; border:1px solid #62cdff; border-radius:50%; padding:8px;}
.box3Cir{ width:100%; height:100%; background:#3b4899; border:5px solid #161b60; border-radius:50%; display:flex; justify-content:center; align-items:center; transition:all 0.3s ease 0s;}
.box3Cir a{ display:block; border-radius:50%;}
.box3Cir img{ max-width:70% !important;}
.box3Img li.box3Img1:hover .box3Line{ animation: width1 1s linear 1;}
.box3Img li.box3Img2:hover .box3Line{ animation: width2 1s linear 1;}
.box3Img li.box3Img3:hover .box3Line{ animation: width3 1s linear 1;}
@keyframes width1 {0% { width:0;}100% { width:180px;}}
@keyframes width2 {0% { width:0;}100% { width:300px;}}
@keyframes width3 {0% { width:0;}100% { width:220px;}}

.index_TwoLeftBoxa.animated .box3Img li{ opacity:1; transform:translateX(0); transition:all 1s ease 0.6s;}
.index_TwoLeftBoxa.animated .box3Img .box3Img1{ transition-delay:0.6s;}
.index_TwoLeftBoxa.animated .box3Img .box3Img2{ transition-delay:1.2s;}
.index_TwoLeftBoxa.animated .box3Img .box3Img3{ transition-delay:2s;}
.box3Img li:hover .box3Cir{ background:#2b3074;}
.box3Img li:hover .box3Cir img{ animation:pulse 1s linear infinite;}


@media (max-width:1600px){
	.hmTitH2{ font-size:44px;}
	.index_Tpp1{ font-size:18px; margin-top:20px;}
	.index_Tpp2{ width:200px; height:40px; line-height:38px; font-size:16px; margin-top:20px;}
	.box2ImgBg{ width:80%;}
}
@media (max-width:1440px){
	.index_fourBgimg{ transform:scale(0.75) translateY(-50%); transform-origin:center top;}
}
@media (max-width:1332px){
}
@media (max-width:1300px){
}
@media (max-width:1242px){
	.hmTitH2{ font-size:38px;}
	.index_fourBgimg{ transform:scale(1) translateY(-50%); padding-right:270px;}
	.index_fourImg{ max-width:200px !important;}
	.box3Line{ right:100px;}
	.box3Line:before{ width:8px; height:8px; margin-top:-4px; left:-8px;}
	.box3CirBg{ width:100px; height:100px; padding:5px;}
	.box3Img2{ margin-top:-50px;}
	.box3Line{ width:120px;}
	.box3Img2 .box3Line{ width:210px;}
	.box3Img3 .box3Line{ width:140px;}
	@keyframes width1 {0% { width:0;}100% { width:120px;}}
	@keyframes width2 {0% { width:0;}100% { width:210px;}}
	@keyframes width3 {0% { width:0;}100% { width:140px;}}
}
@media (max-width:1205px){
}
@media (max-width:1200px){
}
@media (max-width:1024px){
}
@media (max-width:997px){
	.banImg{ height:90%; top:auto; bottom:0; background-position:center right 30%;}
	@keyframes whImg2 {
	0% { width:0; height:0;}
	100% { width:40px; height:40px;}
	}
	.index_RightTextBox{ height:100%;}
	.hmTitH2{ font-size:34px;}
	.index_Tpp1{ font-size:16px; margin-top:10px;}
	.index_Tpp2{ margin-top:10px;}
	.index_ThreeLeft{ padding-top:55px;}
	.index_ThRightBox{ padding-top:0;}
	.box2ImgBg{ margin:0 auto;}
	
	.index_TwoLeftBoxa{ position:static; left:0; width:100%;}
	.index_fourBgimg{ position:static; transform:scale(1) translateY(0) translateX(0);}
}
@media (max-width:767px){
	.img2:after,.img2:before,.img2 span:after,.img2 span:before{ border-width:2px;}
	.img2:before{ border-radius:3px 0 0 0;}
	.img2:after{ border-radius:0 0 0 3px;}
	.img2 span:before{ border-radius:0 3px 0 0;}
	.img2 span:after{ border-radius:0 0 3px 0;}
	.banVideo video{display: none;}
	.page0 .banVideo{ background-image: url(../images/indexPhone.jpg); background-position: center; background-size: cover; }
	.fullpageb .hxjsBox#section0 .banVideo{background-image: url(../images/chePhone.jpg); background-position: top center; background-size: cover; }
	.fullpagea .hxjsBox#section0 .banVideo{background-image: url(../images/facePhone.jpg); background-position: top center; background-size: cover; }
}
@media (max-width:620px){
}
@media (max-width:580px){
	.hmTitH2{ font-size:26px;}	
	.index_Tpp1{ font-size:14px; line-height:22px;}
}
@media (max-width:520px){
	.index_fourBgimg{ padding-right:140px;}
	.index_fourImg{ width:120px !important;}
	.box3Img1{ right:40px;}
	.box3Img2{ margin-top:-30px;}
	.box3Img3{ right:30px; bottom:-7px;}
	.box3CirBg{ width:60px; height:60px;}
	.box3Line{ width:70px; right:60px;}
	.box3Img2 .box3Line{ width:120px;}
	.box3Img3 .box3Line{ width:80px;}
	.box3Line:before{ width:4px; height:4px; margin-top:-2px; left:-4px;}
}
@media (max-width:400px){	
	.img2{ width:100px; height:100px; margin-left:-55px; top:0;}
	.img2:after,.img2:before,.img2 span:after,.img2 span:before{ border-width:2px;}
	@keyframes whImg2 {
	0% { width:0; height:0;}
	100% { width:20px; height:20px;}
	}
	.hmTitH2{ font-size:20px;}
	.index_Tpp2{ width:160px; height:34px; line-height:32px; font-size:14px;}
}
@media (max-width:330px){
	.index_Tpp1{ max-height:44px; overflow:hidden; margin-top:5px;}
}
@media (max-height:701px) and  (min-width:1200px){
}
@media (max-height:820px) and  (min-width:1200px){
}
@media (max-height:780px) and  (min-width:1200px){
}
@media (max-height:700px) and  (min-width:1200px){
}
@media (min-height:1024px) and  (max-width:768px){
}
@media (max-height:640px) and  (max-width:768px){
}
@media (max-height:910px) {
}
