.sub_banner{ width:100%; height:800px; color:#fff;}
.sub_banner h2{ font-size:40px; line-height:60px; margin-bottom:20px;}
.sub_banner p{ width:75%; font-size:18px; line-height:34px;}
.sub_banner .mainbox{ height:100%; display:flex; align-items:flex-end; }
.sub_banner .txt{ padding-bottom:150px;}

.sub_tab{ width:100%; background:#F7F8FA; text-align:center;}
.sub_tab a{ color:#181B20; margin:0 50px; line-height:80px;font-size:18px; display:inline-block; padding:10px 0; position:relative;}
.sub_tab a.active{ font-weight:bold;}
.sub_tab a.active:after{ content:""; background:#181B20; width:80px; height:3px; position:absolute; left:50%; bottom:0; margin-left:-40px;}
.sub_tab.white{ background:rgba(4,19,107,0.5);}
.sub_tab.white a{ color:#fff;}
.sub_tab.white a.active:after{ background:#fff;}


.introduce{ margin-top:50px; position:relative;}
.introduce .con{ width:100%; background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(237,243,250,1) 100%); box-sizing:border-box; padding:60px 60px 100px 60px; font-size:18px; line-height:34px; color:#6C7483; }
.introduce .con:after{ content:""; width:80px; height:80px; background:#1555CF; display:block; position:absolute; left:-10px; top:-10px; z-index:-1;} 

.product1{ width:100%; background:linear-gradient(360deg,rgba(247,249,252,1) 0%,rgba(252,253,255,1) 100%); position:relative; margin-top:60px;}
.product1 .pic{ width:45%; float:right;}
.product1 img{ width:100%;}
.product1 .txt{ width:41.6%; float:left;}
.product1 .txt h2{ font-size:40px; line-height:42px; margin:160px 0 60px 0; position:relative;}
.product1 .txt h2:before{ content:""; background:url(../images/circle@2x.png) no-repeat; width:80px; height:80px; background-size:contain; position:absolute; left:-40px; top:-40px;}
.product1 .txt p{ color:#6C7483; font-size:16px; line-height:32px;}
.product1 .txt a{ font-size:18px; color:#2863D3; width:160px; height:56px; line-height:56px; text-align:center; display:block; border:1px solid #2863D3; margin-top:25px;}
.product1 .txt a i{ background:url(../images/jiantou.png) no-repeat; width:40px; height:40px; background-size:contain; display:inline-block; vertical-align:-14px;}

.product1.fan .pic{ float:left;}
.product1.fan .txt{ float:right;}

.field{ width:100%; background:linear-gradient(360deg,rgba(247,249,252,1) 0%,rgba(252,253,255,1) 100%); margin-top:60px; overflow:hidden; padding:60px 0;}
.field h2{ font-size:40px; line-height:42px; position:relative;}
.field h2:after{ content:""; background:#2863D3; width:40px; height:3px; display:block; margin-top:30px;}
.field dl{ width:32%; float:left; margin:60px 2% 0 0;}
.field dl:nth-child(3){ margin:60px 0 0 0;}
.field dt img{ width:100%;}
.field dl h3{ font-size:28px; line-height:40px; color:#20242A; margin:30px 0 10px 0;}
.field dl p{ width:85%; font-size:16px; min-height:70px; line-height:32px; color:#6C7483;}
.field dl a{ font-size:18px; color:#2863D3; width:160px; height:56px; line-height:56px; text-align:center; display:block; border:1px solid #2863D3; margin-top:25px;}
.field dl a i{ background:url(../images/jiantou.png) no-repeat; width:40px; height:40px; background-size:contain; display:inline-block; vertical-align:-14px;}

.advantage{ padding:60px 0;}
.advantage h2{ font-size:40px; line-height:42px; position:relative;}
.advantage h2:after{ content:""; background:#2863D3; width:40px; height:3px; display:block; margin-top:30px;}
.advantage h3{ font-size:16px; margin-top:20px;}
.advantage{ position:relative;}
.advantage .con dl{position: relative; z-index: 4; width:32%; height:420px; margin:20px 2% 0 0;  background:#fff; float:left; box-shadow:0px 10px 60px 0px rgba(3,35,97,0.05); box-sizing:border-box; padding:50px 40px;}
.advantage .con dl:nth-child(3n){ margin:20px 0 0 0;}
.advantage .con dl h3{ font-size:26px; margin:50px 0 20px 0; line-height:30px; color:#181B20;}
.advantage.style .con dl h3{ font-size:18px; font-weight: 500; color:#20242A; text-align:center;}
.advantage .con dl dd{ color:#6C7483; font-size:16px; position: relative;}
.advantage .con dl dd i {position: absolute; top: 0; left: -40px; width: 4px; height: 30px; background: #2863D3; display: inline-block;}
.advantage .con dl>img{width: 100%; position: absolute; top: 0; left: 0; z-index: -1;} 
.advantage .con dl dt img{ width:70px;}
.advantage:after{ content:""; width:700px; height:420px; background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(237,243,250,1) 100%); display:block; position:absolute; right:0; top:100px; z-index:-1;}
.advantage .con dl:nth-child(3n){ margin:20px 0 0 0;}

.advantage.style:after{display: none;}
.advantage.style .con {width: 100%;}
.advantage.style .con dl{width: calc(25% - 20px); margin:20px 20px 0 0; padding: 30px; height: 230px; background: none; box-shadow: none;}
.advantage.style .con dl dt {text-align: center;}
.advantage.style .con dl dt img {background: #EDF2FF; padding: 35px; border-radius: 30px;}
.advantage.style .con dl dd { }
.advantage.style .con dl dd h3{ text-align:center;}
 

.technology{ width:100%; background:linear-gradient(360deg,rgba(247,249,252,1) 0%,rgba(252,253,255,1) 100%);  overflow:hidden; padding:60px 0;}
.technology h2{ font-size:40px; line-height:42px; position:relative;}
.technology h2:after{ content:""; background:#2863D3; width:40px; height:3px; display:block; margin-top:30px;}
.technology dl{ width:32%; float:left; margin:60px 2% 0 0;}
.technology dl:nth-child(3){ margin:60px 0 0 0;}
.technology dt img{ width:100%;}
.technology dl h3{ font-size:26px; color:#20242A; margin:30px 0 10px 0;}
.technology dl p{ width:85%; font-size:16px; min-height:70px; line-height:32px; color:#6C7483;}
.technology dl a{ font-size:18px; color:#2863D3; width:160px; height:56px; line-height:56px; text-align:center; display:block; border:1px solid #2863D3; margin-top:25px;}
.technology dl a i{ background:url(../images/jiantou.png) no-repeat; width:40px; height:40px; background-size:contain; display:inline-block; vertical-align:-14px;}

.product2{ width:1200px; margin:0 auto; padding:60px 0;}
/*.product2 h2{ font-size:16px; color:#6C7483; margin-bottom:20px;}
*/
.product2 h2{ font-size:30px; line-height:32px; position:relative;}
.product2 h2:after{ content:""; background:#2863D3; width:40px; height:3px; display:block; margin-top:30px;}
.product2 h3{ font-size:16px; margin-top:20px;}
.product2 .con h3{ font-size: 28px; margin-top:0px;}

 .product2 .con{ width:100%; text-align:left; vertical-align:top;}
.product2 .con dl{ width:49%; height:370px; overflow:hidden; background:#fff; box-shadow:0px 0px 40px 0px rgba(3,35,97,0.08); margin:20px 2% 0 0; float:left; box-sizing:border-box; padding:50px; } 
.product2 .con dl:nth-child(2n){ margin:20px 0 0 0;}
.product2 .con dl dt{ position:relative; font-size:80px; line-height:100px; height:100px; color:#2863D3; font-family:Helvetica; font-weight:300;}
.product2 .con dl dt:after{ content:"";  background:url(../images/ta@2x.png) no-repeat; width:84px; height:84px; display:block; position:absolute; right:0; top:0; background-size:contain;}
.product2 .con dl dt span{ font-size:40px;}
.product2 .con dl dt i{ background:url(../images/jian_up@2x.png) no-repeat; width:40px; height:40px; background-size:contain; display:inline-block; vertical-align:-2px;}
.product2 .con dl dd{ width:100%}
.product2 .con dl dd h3{ font-size:28px; line-height:30px;font-weight: bold;}
.product2 .con dl dd p{ font-size:16px; line-height:32px; color:#6C7483; margin-top:10px;}

.technology .list{ width:49%; float:left; height:340px; color:#fff;  margin:60px 2% 0 0; position:relative;}
.technology .list a{ width:100%; display:block; color:#fff; box-sizing:border-box;padding:60px; }
.technology .list:nth-child(2n){ margin:60px 0 0 0;}
.technology .list a h4{ font-size:30px; line-height:32px;}
.technology .list a p{ font-size:20px; line-height:28px; margin-top:15px;}
.technology .list a i{ background:url(../images/play@2x.png) no-repeat; background-size:contain; width:70px; height:70px; display:block; position:absolute; left:60px; bottom:50px;}


.case_tab{ width:100%; height:484px;  text-align:center;}
.case_tab .mainbox{ display:flex; height:384px; align-items:center; justify-content:center;}
.case_tab .mainbox a i{ width:64px; height:73px; display:block; margin:0 auto; }
.case_tab .mainbox a img{ width:100%;}
.case_tab .mainbox a{ color:#fff; font-size:18px; display:block; height:130px; margin:100px 70px 0 70px;}
.case_tab .mainbox a span{ display:block; margin-top:10px; white-space:nowrap;}
.case_tab .mainbox a.active:after{ content:""; display:block; margin:0 auto; width:70px; height:3px; background:#2863D3; margin-top:20px;}
.case_tab .mainbox a:hover:after{ content:""; display:block; margin:0 auto; width:70px; height:3px; background:#2863D3; margin-top:20px;}

.explain{ width:100%; padding-bottom:130px;  overflow:hidden;}
.explain.wap{ display:none;}
.explain .con{ background:rgba(53,122,255,0.45); width:1170px; margin:0 auto; color:#fff; box-sizing:border-box; padding:60px 60px 180px 60px; margin-top:100px; font-size:18px; line-height:34px; position:relative;}
.explain .con:after{ content:""; width:100%; display:block; height:60px; background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%); position:absolute; left:0; bottom:0px;}

.play_list{ height:690px; color:#fff; box-sizing:border-box; padding:60px 120px; position:relative; margin-top:60px;}
.play_list a{ color:#fff; display:block;}
.play_list a h4{ font-size:30px; line-height:32px;}
.play_list a p{ font-size:20px; line-height:22px; margin-top:15px;}
.play_list a i{ background:url(../images/play@2x.png) no-repeat; background-size:contain; width:70px; height:70px; display:block; position:absolute; left:120px; bottom:70px;}

.video_pop{background:#fff;width:800px;height:450px; overflow:hidden; z-index:10002;position: fixed;top:50%;left:50%;margin:-225px 0 0 -400px; transform:scale(0); opacity:0; transition:all 0.4s; border-radius:2px; box-shadow:0 3px 10 0 rgba(0,0,0,0.1);}
.video_pop.niu{ transform:scale(1); opacity:1;}
#videostr{width:800px;height:450px;}

@media screen and (max-width:1920px){
.sub_banner{ height:700px;}	
.sub_banner h2{ font-size:30px; line-height:50px;}
.sub_banner p{ font-size:16px; line-height:32px;}
.sub_banner .txt{ padding-bottom:100px;}
.sub_tab a{  margin:0 30px; font-size:22px;}


.product1 .txt{ width:41.6%; float:left;}
.product1 .txt h2{ font-size:30px; line-height:32px; margin:100px 0 20px 0; }
.product1 .txt h2:before{ width:60px; height:60px; position:absolute; left:-30px; top:-30px;}
.product1 .txt a{ font-size:16px;  width:120px; height:46px; line-height:46px;margin-top:20px;}
.product1 .txt a i{ width:30px; height:30px; vertical-align:-10px;}

.field h2,.advantage h2{ font-size:30px; line-height:32px;}
.field dl h3{ font-size:20px; line-height:30px;}
.field dl a{ font-size:16px;  width:120px; height:46px; line-height:46px;margin-top:20px;}
.field dl a i{ width:30px; height:30px; vertical-align:-10px;}
.field dl p{ min-height:100px;}
.advantage .con dl h3{ font-size:20px; margin:30px 0 10px 0;}
.technology .list a h4{ font-size:22px; line-height:24px;}
.technology .list a p{ font-size:16px; line-height:22px; margin-top:10px;}
.technology .list a i{  width:50px; height:50px; margin-top:80px;}
.technology h2{ font-size:30px; line-height:32px;}
.technology dl h3{ font-size:20px; line-height:28px; margin:20px 0 10px 0;}
}
 
@media screen and (max-width:1720px){
.sub_banner{ height:600px;}	
}

 
@media screen and (max-width:1230px){
.sub_banner{ height:500px;}	
.sub_banner h2{ font-size:26px; line-height:40px;}
.sub_banner .txt{ padding-bottom:80px;}
.sub_tab a{  margin:0 20px; }
.product1 .pic{ width:50%;}
.product1 .txt{ width:45%; }
.product1 .txt h2{ font-size:26px; line-height:28px; margin:70px 0 20px 0; }
.technology .list{ height:280px;}
.technology .list a{ padding:40px;}
.technology .list a p{ font-size:14px; line-height:20px;}
.technology .list a i{ margin-top:60px; left:40px; bottom:40px; width:30px; height:30px;}


.case_tab .mainbox a i{ width:50px; height:60px; }
.case_tab .mainbox a{ font-size:16px; margin:100px 5% 0 5%;}
.case_tab .mainbox a.active:after{ width:60px; height:2px; margin-top:15px;}
.case_tab .mainbox a:hover:after{ width:60px; height:2px; margin-top:15px;}
.explain{ padding-bottom:130px;}
.explain .con{ width:90%;  padding:30px 30px 120px 30px; margin-top:50px; font-size:16px; line-height:32px;}
.explain .con:after{ height:50px;}

.play_list{ height:500px; padding:30px 40px; margin-top:50px;}
.play_list a h4{ font-size:22px; line-height:24px;}
.play_list a p{ font-size:16px; margin-top:10px;}
.play_list a i{  width:50px; height:50px; left:40px; bottom:30px;}
}
@media screen and (max-width:1130px){
.product2{ width:90%;}
.product2 .con dl{ height:340px;} 
.product2 .con dl dt{ font-size:60px; height:65px; line-height:62px;}
.product2 .con dl dt:after{  width:60px; height:60px;  }
.product2 .con dl dt span{ font-size:20px;}
.product2 .con dl dt i{  width:20px; height:20px; vertical-align:-2px;}
.product2 .con dl dd h3{  font-size:20px; line-height:22px;}
.product2 .con dl dd p{ font-size:14px; }

}
@media screen and (max-width:960px){
.sub_banner{ height:auto; padding:100px 0 0 0;}	
.sub_banner h2{ margin-bottom:10px;}
.sub_banner .txt{ padding-bottom:50px;}
.sub_banner p{ width:100%;}
.product1{ overflow:hidden;} 
.product1 .pic{ width:100%; float:none;}
.product1 .txt{ width:100%; float:none; padding-bottom:50px;}
.product1 .txt h2:before{ width:50px; height:50px; left:-20px; top:-20px;}
.product1.fan .pic{ float:none;}
.product1.fan .txt{ float:none;}
.technology .list{ height:220px;  }
.technology .list a{ padding:30px;}
.technology .list a i{ margin-top:30px; left:30px; bottom:30px;}


.product2 .con dl dt{ font-size:40px; line-height:42px; height:45px; }
.product2 .con dl dt:after{ width:40px; height:40px;}
.product2 .con dl dt span{ font-size:15px;}
.product2 .con dl dt i{  width:15px; height:15px; vertical-align:-2px;}
.product2 .con dl dd h3{ font-size:18px; line-height:20px;}

.play_list{ height:400px;}
.advantage.style .con dl h3{ font-size:14px; line-height:20px;}  
.advantage.style .con dl{ padding:10px; text-align:center;}
.case_tab{ height:auto;}
.case_tab .mainbox{ height:284px;}

.explain.pc{ display:none;}
.explain.wap{ display:block;}

}

@media screen and (max-width:830px){
.video_pop{ width:80%; height:300px; margin: -150px 0 0 -40%; }
#videostr{ width:100%; height:300px;}	
}

@media screen and (max-width:768px){
.sub_tab{ overflow:hidden;}
.sub_tab a{ width:33.33333%; display:block; box-sizing:border-box; padding:15px 5px; float:left; text-align:center;  margin:0; font-size:16px; line-height:20px; }
.sub_tab a.active:after{ width:60px; height:2px;  margin-left:-30px;}

.introduce .con{ box-sizing:border-box; padding:40px 40px 60px 40px; font-size:16px; line-height:32px; }
.introduce .con:after{ content:""; width:50px; height:50px; left:-6px; top:-6px;}
.field dl{ width:100%; float:none; margin:30px 0% 0 0;}
.field dl:nth-child(3){ margin:30px 0 0 0;}
.field dl p{ min-height:inherit;}

.advantage .con dl{ width:48%;  margin:20px 4% 0 0;  }
.advantage.style .con {width: calc(100% + 10px);}
.advantage.style .con dl{ width:calc(50% - 20px); margin:20px 16px 0 0;}
.advantage.style .con dl dt img {background: #EDF2FF; padding: 30px; border-radius: 30px; width: 60px;}
.advantage.style .con dl:nth-child(2n){ margin:20px 0 0 0;}
.advantage .con dl:nth-child(2n){ margin:20px 0 0 0;}
.advantage .con dl:nth-child(3n){ margin:20px 4% 0 0;}
.advantage .con dl:nth-child(6n){ margin:20px 0 0 0;}
.advantage.style .con dl:nth-child(3n){ margin:20px 16px 0 0;}
.advantage.style .con dl{height: 200px;}

.advantage:after{ content:""; width:300px; height:220px;}
.technology .list{ height:180px; }
.product2 .con dl{ height:380px; padding:30px;}
.technology dl{ width:100%; float:none; margin:30px 0 0 0;}
.technology dl:nth-child(3){ margin:30px 0 0 0;}

.product2 .con dl{ width:100%; height:auto; float:none; margin:20px 0% 0 0; } 
.product2 .con dl:nth-child(2n){ margin:20px 0 0 0;}
.play_list{ height:350px;}
}

@media screen and (max-width:570px){
.sub_tab{ text-align:left;}
.advantage .con dl{ width:100%; height:auto; padding-bottom:50px;  margin:20px 0% 0 0; float:none; }
.advantage.style .con dl{float: left;}
.advantage .con dl:nth-child(2n){ margin:20px 0 0 0;}
.advantage .con dl:nth-child(3n){ margin:20px 0% 0 0;}
.advantage .con dl:nth-child(6n){ margin:20px 0 0 0;}
.product2 .mainbox dl{ width:50%; text-align:center; margin:0 0 30px 0; } 
.technology .list{ height:220px;  width:100%; margin:20px 0 0 0; float:none; box-sizing: border-box}
.technology .list:nth-child(2n){ margin:20px 0 0 0;} 

.case_tab .mainbox a i{ width:40px; height:45px; }
.case_tab .mainbox a{ font-size:14px; margin:100px 5% 0 5%;}
.case_tab .mainbox a.active:after{ width:40px; height:2px; margin-top:10px;}
.case_tab .mainbox a:hover:after{ width:40px; height:2px; margin-top:10px;}
.play_list{ height:300px;}
.advantage:after{ display:none;}
.field dl p{ width:100%;}
}

@media screen and (max-width:450px){
.play_list{ height:250px;} 
}

@media screen and (max-width:430px){
.technology .list a {padding:30px 30px 30px 30px;}
}

@media screen and (max-width:400px){
.technology .list{ height:190px; }
 
.advantage.style .con dl dt img {padding: 20px; width: 50px;}
}

@media screen and (max-width:320px){
.advantage.style .con dl {padding: 10px 2px;}
.advantage.style .con dl dt img {padding: 28px;}
}0px 30px 30px 30px;}
}

@media screen and (max-width:400px){
.technology .list{ height:190px; }
 
.advantage.style .con dl dt img {padding: 20px; width: 50px;}
}

@media screen and (max-width:320px){
.advantage.style .con dl {padding: 10px 2px;}
.advantage.style .con dl dt img {padding: 28px;}
}