@keyframes round1 {
    0% {
      opacity: 1;
      transform: scale(0);
    }
    100% {
      opacity: 0;
      transform: scale(3.5);
    }
  }
  @keyframes round2 {
    0% {
      opacity: 1;
      transform: scale(0);
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  }
  
  .networks{
      width: 100%;
      position: relative;
  }
  .networks img{
      width: 100%;
  }
  .networks_list{
      position: absolute;
  }
  .networks_list .c-box1 div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(114, 47, 139, 0.5);
      animation: round1 3s linear infinite;
  }
  .networks_list .c-box1 .dot{
      width: 15px;
      height: 15px;
      background:#722f8b;
      border-radius: 100%;
  }
  .networks_list.w1{
      top: 30%;
      left: 35%;
  }
  .networks_list.w2{
      top: 40%;
      left: 32%;
  }
  .networks_list.w3{
      top: 42.5%;
      left: 37%;
  }
  .networks_list.w4{
      top: 38.1%;
      left: 40.2%;
  }
  .networks_list.w5{
      top: 46.9%;
      left: 39%;
  }
  .networks_list.w6{
      top: 52%;
      left: 37.4%;
  }
  .networks_list.w7{
      top: 54.6%;
      left: 37%;
  }
  .networks_list.w8{
      top: 69.2%;
      left: 33.9%;
  }
  .networks_name{
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(-110%,-50%);
      white-space: nowrap;
      font-weight: bold;
      color: var(--mColor);
  }
.w3 .networks_name{
    transform: translate(-80%, -110%);
}
.w4 .networks_name{
    transform: translate(60%, -50%);
}
.w5 .networks_name{
    transform: translate(60%, -50%);
}
.w6 .networks_name{
    transform: translate(-110%, -70%);
}
.w7 .networks_name{
    transform: translate(60%, -50%);
}
.w8 .networks_name{
    transform: translate(60%, -50%);
}