body{
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.bg-video{
  width:100vw;
  height:auto;
}
.banner-f{
  width:100%;
  height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  z-index: 1;
  position:absolute;
  top:0;
  left:0;
  scroll-behavior: smooth;
}
.banner-f-1{
  width:100%;
  height:8.68rem;
}
.banner-f-1.inner{
  width:100%;
  height:100%;
  padding-top:.88rem;
  margin:auto;
  background-size:100% 100%;
}
.h-wrap{
  width:100%;
  padding: 0 20%;
  height:auto;
  margin:auto;
  justify-content: space-between;
  position:fixed;
  z-index: 2;
  top:0;
  left:0;
  transition:background .6s;
  background: rgb(0,14,34);
}
.h-wrap.scrolled{
  background-color:white;

}
.h-wrap .logo-ico{
  width:1.78rem;
  display:none;
}
.h-wrap .logo-ico.white{
  display:block;
}
.h-wrap.scrolled .logo-ico.white{
  display:none;
}
.h-wrap.scrolled .logo-ico{
  display:block;
}
.h-wrap nav{
  color:white;
}
.h-wrap.scrolled nav{
  color:black;
}
.h-wrap nav .item-nav{
  width:1.18rem;
  height:.75rem;
  font-size:.16rem;
  font-weight:bold;
  cursor: pointer;
  user-select: none;
}
.h-wrap nav .item-nav.selected{
  background-color:#077BEA;
  color:white;
}
.h-wrap .login-wrap{
  width:1.3rem;
  height:.4rem;
  color:white;
  border:2px solid #0076E2;
  border-radius:.2rem;
  user-select: none;
  cursor:pointer;
  text-decoration: none;
}
.h-wrap.scrolled .login-wrap{
  color:black;
}
.h-wrap.scrolled .login-wrap.login{
  color:white;
}
.h-wrap .login-wrap.login{
  width:1.2rem;
  border:none;
  margin-left:.28rem;
  background-image:linear-gradient(to right,#047CEA,#15A9E5,#27DDDE)
}
.h-wrap .nav-seconda{
  width:6.23rem;
  justify-content:space-between;
}
.out-sea-wrapper{
  width:54%;
  margin:1.22rem auto 0 auto;
  font-size:.24rem;
  color:white;
}
.out-sea-wrapper .w-bg-icon{
  width:2.88rem;
  margin-bottom:.2rem;
}
.arrow-i-img{
  width: 100px;
  position: relative;
  top: .12rem;
}
.out-sea-wrapper > div{
  margin-bottom:.2rem;
  padding-left:.06rem;
}
.f-btn-w{
  width:2.7rem;
  height:.34rem;
  background-color:#077BEA;
  border-radius:.2rem;
  font-size:.16rem;
}
.f-btn-w > div{
  width:50%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height:1;
}
.f-btn-w > div:first-child:after{
  content:' ';
  display:block;
  background-color:white;
  width:.02rem;
  height:43%;
  position:absolute;
  right:0;
  top:.1rem;
}

.banner-f-1 .mouse-i-bg{
  position: fixed;
  width: 1.07rem;
  top:6.83rem;
  left: 50%;
  transform: translateX(-50%);
}

.banner-f-2{
  background-image:linear-gradient(#fff 0%,#fff 12%,#D4EEFB 60%);
  padding-top:.6rem;
  height:auto;
}
.p-icon-t{
  width:2.38rem;
  margin:auto;
  display:block;
}
.sjb-des{
  color: #333333;
  text-align: left;
  width:9.57rem;
  margin: .26rem auto .48rem auto;
  line-height: .33rem;
  font-size: .2rem;
}
.brand-i-wrap{
  width:60%;
  margin:0 auto;
  flex-wrap:wrap;
  padding-left:.32rem;
  padding-bottom:1px;
}
.brand-i-wrap::-webkit-scrollbar{
  width:0;
  height:0;
}
.brrand-item{
  width:17%;
  height:.84rem;
  flex-shrink: 0;
  background-color:white;
  border-radius:.12rem;
  margin:0 .24rem .24rem 0;
}
.brand-ico{
  width:.35rem;
  height:.35rem;
  margin-right:.08rem;
  overflow:hidden;
}
.brand-ico .i-s-bg{
  width:100%;
  height:100%;
}
.banner-f-3{
  width:100%;
  height:auto;
  background-color:white;
  padding-top:.43rem;
  background-image:linear-gradient(140deg,#CFECFC,#CFECFC66,#CFECFC);
}
.banner-f-3 .ts-i-wrap{
  justify-content:center;
  padding:.38rem 0 .58rem 0;
}
.banner-f-3 .ts-i-wrap .ts-i-2{
  margin:0 .58rem;
}
.ts-i-wrap img{
  width:2.15rem;
  height:1.54rem;
  display:block;
}
.banner-f-4{
  width:100%;
  height:auto;
  padding-top:.43rem;
  padding-bottom:1.3rem;
  background-image:linear-gradient(#fff 0%,#fff 12%,#D4EEFB 60%);
}
.banner-f-4 .ys-wrapper{
  width:67%;
  padding-top:.4rem;
  margin:auto;
  justify-content:center;
}
.banner-f-4 .ys-wrapper .youshi-item{
  width:2.15rem;
  height:3rem;
  border:1px solid #3F9BED;
  border-radius:.2rem;
}
.banner-f-4 .ys-wrapper .youshi-item .ys-item-title{
  text-align: center;
  padding:.2rem 0 .1rem 0;
  font-weight:bold;
  position:relative;
}
.ys-item-title:after{
  content:' ';
  width:1.8rem;
  height:.02rem;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  background-image:linear-gradient(to right,#B1D8F800,#B1D8F8 50%,#B1D8F800)
}
.youshi-item{
  margin-right:.25rem;
}
.youshi-item:last-child{
  margin-right:0;
}
.youshi-item .item-desc{
  font-size:.12rem;
  width: 80%;
  margin: auto;
}
.ys-item-i-wrap{
  width:100%;
  height:1.66rem;
  display:flex;
  justify-content: center;
  align-items: center;
}
.ys-item-i-wrap img{
  width:1rem;
  height:.77rem;
  display:block;
}

footer{
  width:100%;
  background:#000E21;
  color:#CCCFD3;
  font-size:.14rem;
}
footer .content{
  max-width:1600px;
  margin:auto;
  justify-content: center;
  padding-bottom:.32rem;
}
footer .declare{
  text-align:center;
  line-height:.28rem;
  padding:.27rem 0;
}
footer .declare:before{
  content:' ';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:56%;
  height:.01rem;
  background-color:#858C95;
}
footer .content .logo-ico{
  width:1.34rem;
}
footer .content .tel{
  font-size:.26rem;
  color:white;
}
.bottom-f-item{
  margin-bottom:.16rem;
}
.bottom-f-item a{
  text-decoration: none;
  color:#999FA6;
}
footer .logo-wraper{
  padding-top:.3rem;
  margin-right:1.1rem;
  font-weight: bold;
}

footer .content .hot-pro-title{
  color:white;
  font-size:.2rem;
  padding:.4rem 0 .24rem 0;
}

.f-item-wrap{
  margin-right:.94rem;
}

footer .content .pro-t-item{
  margin-bottom:.1rem;
  color:#999FA6;
}
.gray-theme{
  color:#999FA6;
}
.wechat{
  width:1.1rem;

  height:1.04rem;
  background-color:#999FA6;
}
.wechat-wrap{
  margin-right:0;
  padding-top:.28rem;
  font-size:.16rem;
  text-align: center;
}
.wechat-wrap .w-w-title{
  margin:10px 0;
}

.customer-fixed{
  position: fixed;
  right:16px;
  bottom:20%;
  color: #000;
  font-size: 16px;
  border-radius: 10px;
  overflow: hidden;
  background-color: white;
  z-index: 10;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.customer-fixed .cus-icon{
  height:23px;
  margin-right: 10px;
}
.customer-fixed > div{
  height: 38px;
  padding: 0 16px;
  cursor:pointer;
}
.customer-fixed > div:hover{
  background-color:#dbdbdb;
}
.customer-fixed a.flex-v-center{
  text-decoration:none;
  color:#000;
}