*{ margin:0px; padding:0px;}
body 
{
    line-height:1.5;
    font-family:微软雅黑;
    font-size: 14px; 
    padding:10px;
}
a{ text-decoration:none;}
ul,li{ list-style:none; }

  
.nav {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 40px;
}
.nav .swiper-container {
  overflow: visible;
}
.nav .swiper-slide {
  width: 25%;
}
.nav li {
  position: relative;
}
.nav li.active > a {
  background: #7735fc;
  color: #fff;
}
.nav li:hover > ul {
  display: block;
}
.nav li > a {
  display: block;
  text-align: center;
  padding: 6px;
  color: #505152;
}
.nav li > a:hover {
  background: #7735fc;
  color: #fff;
  text-decoration: none;
}

@media (min-width: 375px) {
  .nav .swiper-slide {
    width: 22%;
  }
  .nav .swiper-slide:first-child {
    width: 13%;
  }
}
@media (min-width: 414px) {
  .nav .swiper-slide {
    width: 18%;
  }
  .nav .swiper-slide:first-child {
    width: 12%;
  }
}
@media (min-width: 640px) {
  .nav {
    margin-top: 36px;
  }
  .nav .swiper-slide,
  .nav .swiper-slide:first-child {
    width: 16.667%;
  }
  .nav li a {
    font-size: 19px;
  }
}
@media (min-width: 1024px) { 
  .nav .swiper-container {
    width: 925px;
  } 
  .nav .swiper-slide,
  .nav .swiper-slide:first-child {
    width: auto;
  }
  .nav li a {
    padding: 6px 20px;
    font-size: 14px;
  }
}