.main-header-component {
  width: 100%;
  height: 50px;
  background-color: var(--backend-highlight-color);
  background-color: rgba(22, 22, 23, 0.8);
  top: 0;
  left: 0;
  position: fixed;
  z-index: 10000;
  transition: background-color 0.65s;
}
.main-header-component.is-open {
  background-color: black;
}
.main-header-component.is-open .subnav {
  background-color: black;
}
.main-header-component nav {
  width: 100%;
  height: 100%;
}
.main-header-component a {
  color: white !important;
  transition: color 0.25s;
}
.main-header-component .active, .main-header-component a:hover {
  color: #E71D73 !important;
}
.main-header-component .nav-list {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-header-component .nav-list > li {
  padding: 10px;
}
.main-header-component .subnav {
  transition: height 0.65s cubic-bezier(0.83, 0, 0.17, 1), background-color 0.65s;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  position: absolute;
  top: 50px;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  background-color: rgba(22, 22, 23, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-header-component .subnav .inner {
  padding: 40px;
  display: flex;
  max-width: 960px;
  width: 100%;
  flex-direction: column;
  position: absolute;
  top: 0;
}
.main-header-component .subnav li {
  padding: 10px;
}
.main-header-component .subnav-leave-to, .main-header-component .subnav-enter-from {
  height: 0 !important;
}
.main-header-component .subnav-leave-to li, .main-header-component .subnav-enter-from li {
  opacity: 0;
}
.main-header-component .subnav-enter-active li, .main-header-component .innerchange-enter-active li {
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-header-component .subnav-enter-active li:nth-child(1), .main-header-component .innerchange-enter-active li:nth-child(1) {
  transition-delay: 0.33s;
}
.main-header-component .subnav-enter-active li:nth-child(2), .main-header-component .innerchange-enter-active li:nth-child(2) {
  transition-delay: 0.36s;
}
.main-header-component .subnav-enter-active li:nth-child(3), .main-header-component .innerchange-enter-active li:nth-child(3) {
  transition-delay: 0.39s;
}
.main-header-component .subnav-enter-active li:nth-child(4), .main-header-component .innerchange-enter-active li:nth-child(4) {
  transition-delay: 0.42s;
}
.main-header-component .subnav-enter-active li:nth-child(5), .main-header-component .innerchange-enter-active li:nth-child(5) {
  transition-delay: 0.45s;
}
.main-header-component .subnav-enter-active li:nth-child(6), .main-header-component .innerchange-enter-active li:nth-child(6) {
  transition-delay: 0.48s;
}
.main-header-component .subnav-enter-active li:nth-child(7), .main-header-component .innerchange-enter-active li:nth-child(7) {
  transition-delay: 0.51s;
}
.main-header-component .subnav-enter-active li:nth-child(8), .main-header-component .innerchange-enter-active li:nth-child(8) {
  transition-delay: 0.54s;
}
.main-header-component .subnav-enter-active li:nth-child(9), .main-header-component .innerchange-enter-active li:nth-child(9) {
  transition-delay: 0.57s;
}
.main-header-component .subnav-enter-active li:nth-child(10), .main-header-component .innerchange-enter-active li:nth-child(10) {
  transition-delay: 0.6s;
}
.main-header-component .subnav-leave-active li {
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-header-component .innerchange-enter-active, .main-header-component .innerchange-leave-active {
  transition: opacity 0.65s;
}
.main-header-component .innerchange-enter-from li {
  opacity: 0;
}
.main-header-component .innerchange-leave-to {
  opacity: 0;
}