* {
  box-sizing: border-box;
}

body {

}

.nav {
  /*display: inline-flex;*/
  /*position: relative;*/
  /*overflow: hidden;*/
  /*max-width: 100%;*/
  /*background-color: #fff;*/
  /*padding: 0 20px;*/
  /*border-radius: 40px;*/
  /*box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);*/
}

.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: .3s;
  margin: 0 6px;
  z-index: 1;
  font-weight: 500;
  position: relative;
  border-bottom: 3px solid #fff;
}

.nav-item-active{
  color: #00BAEF !important;

  /*修改活动窗口边框样式*/
  border-bottom: 3px solid #00BAEF !important;
}

.nav-item-temporary-active {
  color: #00BAEF !important;

  /*修改临时活动边框样式*/
  border-bottom: 3px solid #00BAEF !important;
}

/*.nav-item:before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  bottom: -6px;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 5px;*/
/*  background-color: #00baef;*/
/*  border-radius: 8px 8px 0 0;*/
/*  opacity: 0;*/
/*  transition: .3s;*/
/*}*/


/*.nav-item:not(.is-active):hover:before {*/
/*  opacity: 1;*/
/*  bottom: 0;*/
/*}*/

/*.nav-item:not(.is-active):hover {*/
/*  color: #00baef;*/
/*}*/

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: .4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
  .nav {
    overflow: auto;
  }
}