body {
  background: #F9F9F9;
}

.banner {
  width: 7.5rem;
  height: 5.6rem;
  background-image: url('../images/venun-bj.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.banner-3d {
  background-image: url('../images/venun-3d.png');
  width: 6.62rem;
  height: 4.2rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 1.9rem;
  left: .44rem;
}
.banner-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
  color: white;
}

.banner-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #ffffff;
  top:.56rem;
  left: 50%;
  transform: translateX(-50%);
}
.door {
  /* height: 5rem; */
  width: 6.94rem;
  background: white;
  margin: auto;
  margin-top: .96rem;
  border-radius: .2rem;
  padding: 0rem .32rem .4rem .32rem;
  box-sizing: border-box;
}

.door-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.door-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
}

.door-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #3665D9;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.door-desc {
  font-size: .2rem;
  color: #666666;
  line-height: .24rem;
  text-align: center;


}

.door-detail {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
}

.door-img {
  width: 4rem;
  height: 3.44rem;
  margin-top: .2rem;
}

.door-img img {
  width: 100%;
  height: 100%;
}

.door-detail-desc {
  margin-top: .16rem;

  font-size: .24rem;
  color: #666666;
  line-height: .4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

}
.door-detail-desc-item{
  width: 3rem;
  font-size: .24rem;
  line-height: .36rem;
}

.o {
  /* height: 5.64rem; */
  width: 7.5rem;

  margin-bottom: .28rem;

}

.o-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.o-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
}

.o-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #3665D9;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.o-wrap {
  display: flex;

  justify-content: center;
  margin-top: .2rem;
  flex-direction: column;
}

.o-wrap-item {
  width: 6.94rem;
  height: 2.2rem;
  background: #FFFFFF;
  box-shadow: 0rem .02rem .04rem .02rem rgba(0, 0, 0, 0.16);
  border-radius: .24rem;
  display: flex;
  align-items: center;
  margin-bottom: .32rem;
  box-sizing: border-box;
  padding: 0 .4rem 0 .2rem;
}



.o-wrap-item img {
  width: 3.16rem;
  height: 1.8rem;
  margin-top: .08rem;
  object-fit: cover;
}

.o-wrap-item-name {


font-weight: bold;
font-size: .28rem;
color: #333333;
line-height: 0px;



}

.o-wrap-item-desc {


margin-top: .2rem;
font-size: .24rem;
color: #666666;
line-height: .36rem;


}
.o-wrap-item-right{
  display: flex;
  flex-direction: column;
  margin-left: .3rem;
}
.safe {
  /* height: 7.2rem; */
  width: 7.5rem;
  background: #FBFCFF;


}

.safe-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.safe-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
}

.safe-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #3665D9;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.safe-wrap {
  display: flex;
  flex-wrap: wrap;
  /* gap: .14rem .2rem; */
  margin-top: .4rem;
  justify-content: center;
  margin-bottom: .18rem;
}

.safe-wrap-item {
  width: 3.4rem;
  height: 4.6rem;
  background: #FFFFFF;
  box-shadow: 0rem .04rem .04rem .02rem rgba(213, 218, 230, 0.5);
  border-radius: .2rem .2rem .2rem .2rem;
  margin-right: .2rem;
  margin-bottom: .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 0 .24rem;
}
.safe-wrap-item img{
  width: .96rem;
  height: .96rem;
  margin-top: .4rem;
}
.safe-wrap-item:nth-child(2n) {
  margin-right: 0rem;
  margin-bottom: 0rem;
}

.safe-wrap-item-top {
  display: flex;
  margin-top: .4rem;

  align-items: center;
}



.safe-wrap-item-top span {

font-weight: bold;
font-size: .28rem;
color: #333333;


}

.safe-wrap-item-bottom {



  font-size: .24rem;
  color: #666666;
  line-height: .4rem;
  margin-top: .2rem;

}

.device {
  height: 10.56rem;
  width: 7.5rem;
  background: white;
}

.device-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.device-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
}

.device-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #3665D9;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.device-wrap-top {
  display: flex;
  width: 6.88rem;
  height: 1rem;
  margin-top: .4rem;
}

.device-wrap-top-item {
  width: 1.72rem;
  height: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.device-wrap-top-item img {
  width: .56rem;
  height: .6rem;
}

.device-wrap-top-item-name {


  margin-top: .16rem;
  font-size: .24rem;
  color: #999999;
  line-height: 0rem;

}

.device-wrap-top-item.active .device-wrap-top-item-name {
  color: #333333;
}

.scroll-line {
  width: 6.88rem;
  height: .04rem;
  background: #F1F1F1;
  border-radius: .1rem;
  position: relative;
}

.scroll-line-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.72rem;
  height: .04rem;
  border-radius: .1rem;
  background: #3665D9;
  transition: .5s;
}

.device-wrap-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: .6rem;
}

.device-wrap-bottom-top {
  width: 3.34rem;
  height: 5rem;

}

.device-wrap-bottom-top-box {
  position: relative;
  width: 3.34rem;
  height: 5rem;
}

.smart-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.34rem;
  height: 5rem;
}

.smart-data-1 {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: .88rem;
  top: 1rem;
  /* 起始位置 */
  opacity: 0;
  animation: moveRight 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes moveRight {
  0% {
    left: .88rem;
    top: 1rem;
    /* 起始位置 */
    opacity: 0;
  }

  100% {
    left: -1rem;
    top: .34rem;
    /* 结束位置 */
    opacity: 1;

  }
}

.smart-data-2 {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: .88rem;
  top: 1.7rem;
  /* 起始位置 */
  opacity: 0;
  animation: moveRight2 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes moveRight2 {
  0% {
    left: .88rem;
    top: 1.7rem;
    /* 起始位置 */
    opacity: 0;
  }

  100% {
    left:2.74rem;
    top: 2.8rem;
    /* 结束位置 */
    opacity: 1;

  }
}

.smart-data-3 {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: .88rem;
  top: 1.7rem;
  /* 起始位置 */
  opacity: 0;
  animation: moveRight3 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes moveRight3 {
  0% {
    left: .88rem;
    top: 1.7rem;
    /* 起始位置 */
    opacity: 0;
  }

  100% {
    left: -1rem;
    top: 1.98rem;
    /* 结束位置 */
    opacity: 1;

  }
}

.device-wrap-bottom-bottom {
  display: flex;
  flex-wrap: wrap;
  width: 6.52rem;

  font-size: .24rem;
  align-items: center;
  justify-content: center;
  margin-top: .60rem;

}

.device-wrap-bottom-bottom-text {
  text-align: left;
  animation: op 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  margin-right: .4rem;
}

@keyframes op {
  0% {
    opacity: 0;

  }

  100% {

    opacity: 1;


  }
}