.header-sub {
  background-color: var(--color-surface-surface-subtle-neutral);
  border-bottom: 1px solid var(--color-border-width-border-width-default);
}
.header-sub ul {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.header-sub li {
  white-space: nowrap;
}
.header-sub .nav-link {
  color: var(--color-foreground-foreground-inactive);
  padding: var(--space-md) 0;
  position: relative;
}
.header-sub li:last-child .nav-link {
  padding-right: var(--space-xl);
}
.header-sub .active a.nav-link {
  color: var(--color-foreground-foreground-active);
  font-weight: var(--font-weight-bold);
}
.header-sub .active a:before {
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-border-width-border-width-active);
}
.fixed-header.header-sub .active a:before {
  bottom: 0.5px;
}
.header-sub .block__content {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (min-width: 1281px) {
  .header-sub ul {
    max-width: 1280px;
  }
}
@media only screen and (max-width: 1280px) {
  .header-sub ul {
    padding: 0 var(--space-5xl);
  }
}

@media only screen and (max-width: 960px) {
  .header-sub ul {
    padding: 0 var(--space-2xl);
  }
}

@media only screen and (max-width: 767px) {
  .header-sub ul {
    padding: 0 var(--space-xl);
  }
}

@media only screen and (max-width: 640px) {
  .header-sub ul {
    padding: 0 var(--space-lg);
  }
}