@charset "UTF-8";
.header-container {
  margin-block-start: 0;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background: #000;
  transition: all 0.8s ease-out;
}
.header-container .content-box {
  display: flex;
  width: 1192px;
  max-width: 1192px;
  padding: 24px 0;
  align-items: center;
  gap: 24px;
}
.header-container .content-box .log-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-container .content-box .log-box .log-right {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.24);
}
.header-container .content-box .tabs-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  flex: 1 0 0;
}
.header-container .content-box .tabs-box .tabs-item {
  width: 88px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  transition: border 0.8s ease-out;
}
.header-container .content-box .tabs-box .tabs-item:hover {
  border: 1px solid #f1f1f1;
}
.header-container .content-box .tabs-box .tabs-item .text {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
}
.header-container .content-box .tabs-box .active-tabs {
  background: rgba(255, 255, 255, 0.08);
  border: none !important;
}
.header-container .content-box .mobile-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-container.scroll-active {
  transform: translateY(-130px);
  opacity: 0;
}

.mobile-tabs {
  width: 100vw;
  background: #000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out; /* 设置过渡效果 */
}
.mobile-tabs .mobile-content-box {
  width: 100%;
  padding: 24px;
  display: flex;
  gap: 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.mobile-tabs .mobile-content-box .mobile-tabs-item {
  color: #fff;
  font-size: 12px;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.12px;
}

.mobile-tabs.show {
  max-height: 120px;
}

/* 适配宽度为 768px 或更小的屏幕 */
@media (max-width: 768px) {
  .header-container {
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .header-container .content-box {
    width: 100%;
    max-width: 100%;
    padding: 24px 24px 16px;
    justify-content: space-between;
  }
  .header-container .content-box .log-box .mobile-log {
    display: flex;
  }
  .header-container .content-box .log-box .pc-log {
    display: none;
  }
  .header-container .content-box .log-box .log-right {
    display: none;
  }
  .header-container .content-box .tabs-box {
    display: none;
  }
  .header-container .content-box .mobile-header-right {
    display: flex;
  }
  .mobile-tabs {
    display: flex;
  }
}
@media (min-width: 768px) {
  .header-container .content-box .log-box .mobile-log {
    display: none;
  }
  .header-container .content-box .log-box .pc-log {
    display: flex;
  }
  .header-container .content-box .log-box .log-right {
    display: block;
  }
  .header-container .content-box .tabs-box {
    display: flex;
  }
  .header-container .content-box .mobile-header-right {
    display: none;
  }
  .mobile-tabs {
    display: none;
  }
}

/*# sourceMappingURL=index.css.map */