header {
   position: fixed;
   width: calc(100vw - 32px);
   height: 67px;
   margin: 0px 16px 5px;
   padding-top: 16px;
   display: flex;
   justify-content: center;
   background: var(--kl-body-bg-color);
   z-index: 10;
}
header > .container {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
header > .container a.logo {
   display: block;
   width: 67px;
   height: 67px;
   background-image: url(/images/logo.png);
   background-size: contain;
}
header > .container > .current-song {
   flex: 1;
   margin: 0px 16px;
}
header > .container > ul.menu {
   display: none;
   height: 43px;
   margin: 32px 0px 0px;
   font-size: 24px;
   font-weight: 700;
   line-height: 31px;
   column-gap: 56px;
}
header > .container > ul.menu > li.menu-item > a {
   color: var(--kl-color-3);
}
header > .container > ul.menu > li.menu-item.active,
header > .container > ul.menu > li.menu-item:hover {
   border-bottom: 2px solid var(--kl-color-3);
}

@media screen and (min-width: 744px) {
   header {
      width: 100vw;
      height: 107px;
      margin: 0px 0px 57px;
      padding-top: 0px;
      background: var(--kl-bg-color);
   }
   header > .container {
      align-items: unset;
   }
   header > .container > a.logo {
      width: 156px;
      height: 156px;
      margin-left: 18px;
   }
   header > .container > .current-song {
      display: none;
   }
   header > .container > ul.menu {
      display: flex;
      margin-right: 36px;
   }
}

@media screen and (min-width: 1440px) {
   header > .container {
      width: 1440px;
   }
   header > .container > a.logo {
      margin-left: 124px;
   }
   header > .container > ul.menu {
      margin-right: 240px;
   }
}