colexiu-project/src/components/col-header/index.css

.topNav {
  /* @apply bg-black/[.2] */
  background: rgba(0, 0, 0, 0.6);
}

.mr160 {
  margin-right: 140px;
}

.wall {
  height: 60px;
}

.logoWrap {
  margin-left: 44px;
  margin-right: 80px;
  width: 304px;
  height: 47px;
  cursor: pointer;
  overflow: hidden;
}

.top.headerSection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 1200;
  height: 62px;
  line-height: 62px;
  background-color: rgba(0, 0, 0, 0.4) !important;
  animation:none;
  border-bottom: none;

  /* animation-name: navAnimat;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards; */

}

.isdark.headerSection {
  background-color: #252627!important;
  animation:none;
  /* isdark */
}
.isdark .normalItem {
  color: #fff;

}
.headerSection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 1200;
  height: 62px;
  line-height: 62px;
  animation-name: navAnimat;
  animation-duration: .4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background-color: #fff;
  border-bottom: 1px solid #EAEAEA;

}

.top .normalItem {
  color: #fff;

}

@keyframes navAnimat {
  0% {
    opacity: 0;

  }
  25% {
    opacity: .25;

  }
  50% {
    opacity: .5;

  }
  100% {
    opacity: 1;
    /* opacity: 1; */

  }
}

.top {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.top.header-container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.normalItem {
  color: #333;
}

.activeItem {
  color: var(--theme-color) !important;
  font-weight: 600;
}

.activeItem::after {
  position: absolute;
  content: "";
  left: 51%;
  width: 102%;
  height: 3px;
  margin-left: -51%;
  background-color: var(--theme-color);
  z-index: 100;
  /* transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease; */
  animation-name: showLine;
  animation-duration: .15s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  border-radius: 2px;
  bottom: 14px;
}

@keyframes showLine {
  0% {
    width: 0%;

  }

  25% {
    width: 25%;
    /* transform: scale(.25); */

  }

  50% {
    width: 50%;
    /* transform: scale(.5); */

  }

  100% {
    width: 102%;
    /* transform: scale(1); */
  }
}

/* .activeItem::after {
  transform: scaleX(1) !important;
} */

/* .activeItem:active::after {
  transform: scaleX(1) !important;
} */

.itemCenter {
  position: relative;
  margin-right: 40px;
  line-height: 62px;
  height: 62px;
  font-size: 20px;
  font-weight: 600;
  display: inline-block;

}

.navWrap {
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 1200;
}



.rightWrap {
  margin-right: 44px;
}

.rightWrap .logoBtn {
  width: 107px;
  height: 40px;
  background: #2DC7AA;
  border-radius: 20px;
  font-size: 16px;
}


.wall {
  height: 60px;
}