@charset "UTF-8";
/* =====================
  header
===================== */
@layer style {
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 84px;
    padding-inline: 40px;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      min-block-size: calc((100 / 390) * 58 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw) 0;
      background-color: #fff;
      box-shadow: 0 1px calc((100 / 390) * 14 * 1vw) 0 rgba(0, 0, 0, 0.18);
      border-radius: calc((100 / 390) * 8 * 1vw);
      margin-block-start: calc((100 / 390) * 16 * 1vw);
      margin-inline: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== logo ==== */
    .logo {
      inline-size: fit-content;
      pointer-events: auto;
      display: block grid;
      place-content: center;
      margin-block-start: 16px;

      @media (width <= 768px) {
        margin-block-start: 0;
        & img {
          width: calc((100 / 390) * 164 * 1vw);
        }
      }
    }

    .logo-big {
      display: none;
    }

    /* ==== nav ==== */
    .nav {
      inline-size: 640px;
      block-size: 68px;
      gap: 40px;
      padding-inline: 40px;
      border-radius: 8px;
      box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.18);
      background-color: #fff;
      margin-block-start: 16px;
      pointer-events: auto;
      display: block grid;
      align-items: center;
      grid-template-columns: auto max-content;
      column-gap: 40px;

      @media (width <= 768px) {
        display: none;
      }

      & > ul {
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        display: block grid;
        grid-template-columns: repeat(5, max-content);
        gap: 40px;

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            grid-template-rows: repeat(2, max-content);
            align-content: center;
            inline-size: 100%;
            block-size: inherit;
          }
        }
      }
      .unit[data-id='contact'] {
        inline-size: 52px;
        block-size: 44px;
        border-radius: 4px;
        background-image: linear-gradient(105deg, #22327e 34.75%, #5d69a1 55.2%, #0f1b53 81.5%);

        .u-hover {
          position: relative;
          display: block grid;
          justify-items: center;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;
        }

        @media (width <= 768px) {
          display: none;
        }
      }
    }
  }

  .header ul li {
    position: relative;
  }
}