@charset "UTF-8";

@layer utility {
  /* =====================
    u-hover
  ===================== */
  .u-hover {
    transition: opacity 250ms ease 0s;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* =====================
    u-inner
  ===================== */
  .u-inner {
    inline-size: 1440px;
    margin-inline: auto;
    padding-inline: 80px;

    @media (width <= 768px) {
      inline-size: 100%;
      padding-inline: calc((100 / 390) * 24 * 1vw);
    }
  }

  /* =====================
    u-anchor
  ===================== */
  .u-anchor {
    display: block flex;
    inline-size: fit-content;
    padding: 14px 32px;
    border-radius: 6px;
    background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);

    @media (width <= 768px) {
      padding: calc((100 / 390) * 14.6 * 1vw) calc((100 / 390) * 30 * 1vw);
      border-radius: calc((100 / 390) * 6 * 1vw);
    }

    .btn-txt {
      position: relative;
      font-weight: 500;
      letter-spacing: 0.48px;
      color: #fff;
      display: block flex;
      align-items: center;
      gap: 48px;

      &::before {
        content: '';
        display: block flow;
        inline-size: 13px;
        aspect-ratio: 13 / 8;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-image: var(--arrow);
        background-color: #1b57af;
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
      }
      &::after {
        content: '';
        display: block flow;
        inline-size: 22px;
        aspect-ratio: 1/1;
        border-radius: 50rem;
        background-color: #fff;
      }

      @media (width <= 768px) {
        letter-spacing: calc((100 / 390) * 0.42 * 1vw);
        gap: calc((100 / 390) * 48 * 1vw);

        &::before {
          inline-size: calc((100 / 390) * 11 * 1vw);
          right: calc((100 / 390) * 5 * 1vw);
        }
        &::after {
          inline-size: calc((100 / 390) * 22 * 1vw);
        }
      }
    }
  }
}

/* =====================
  u-h2-title
===================== */
.u-h2-title {
  display: block grid;
  row-gap: 9px;

  @media (width <= 768px) {
    row-gap: calc((100 / 390) * 7 * 1vw);
  }

  & > span[lang='en'] {
    font-family: var(--title);
    font-size: 30px;
    color: #549fd6;

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 28 * 1vw);
    }
  }

  & > h2.title {
    position: relative;
    font-family: var(--yumin);
    font-size: 20px;
    font-weight: 600;
    display: block flex;
    align-items: center;
    gap: 12px;

    &::before {
      content: '';
      display: block flow;
      inline-size: 64px;
      block-size: 1px;
      background-color: #549fd6;
      pointer-events: none;
    }

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 18 * 1vw);
      gap: calc((100 / 390) * 12 * 1vw);

      &::before {
        inline-size: calc((100 / 390) * 56 * 1vw);
      }
    }
  }
}

/* =====================
  u-gradient
===================== */
.u-gradient {
  background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================
    u-table
  ===================== */
.u-table {
  display: block grid;
  grid-template-columns: 264px 1fr;
  max-inline-size: 1200px;
  margin-inline: auto;

  @media (width <= 768px) {
    grid-template-columns: calc((100 / 390) * 104 * 1vw) 1fr;
    max-inline-size: calc((100 / 390) * 342 * 1vw);
  }

  /* ==== tr ==== */
  .tr {
    display: block grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;

    & :where(dt, dd) {
      block-size: 100%;
      padding-inline: 32px;
      padding-block: 23.4px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }
    &:first-child {
      & dt {
        border-radius: 20px 0 0 0;

        @media (width <= 768px) {
          border-radius: calc((100 / 390) * 10 * 1vw) 0 0 0;
        }
      }

      & dd {
        border-radius: 0 20px 0 0;

        @media (width <= 768px) {
          border-radius: 0 calc((100 / 390) * 10 * 1vw) 0 0;
        }
      }
    }
    &:last-child {
      & dt {
        border-radius: 0 0 0 20px;
        border-block-end: none;

        @media (width <= 768px) {
          border-radius: 0 0 0 calc((100 / 390) * 10 * 1vw);
        }
      }

      & dd {
        border-radius: 0 0 20px 0;
        border-block-end: none;

        @media (width <= 768px) {
          border-radius: 0 0 calc((100 / 390) * 10 * 1vw) 0;
        }
      }
    }
    /* ==== dt ==== */
    & dt {
      background-color: #549fd6;
      color: #fff;
      font-family: var(--yumin);
      font-weight: 500;
      border-block-end: 1px solid #fff;
      word-break: auto-phrase;
    }

    /* ==== dd ==== */
    & dd {
      background-color: #fff;
      border-block-end: 1px solid #dbdbdb;
    }
  }
}

/* =====================
  u-mv
===================== */
.u-mv {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  inline-size: calc(100% - 80px);
  block-size: 480px;
  margin-inline-start: 80px;
  margin-block-start: 84px;
  border-radius: 20px 0 0 20px;
  padding-block-start: 64px;
  padding-inline-start: 80px;

  @media (width <= 768px) {
    inline-size: calc(100% - calc((100 / 390) * 16 * 1vw));
    block-size: calc((100 / 390) * 219 * 1vw);
    margin-inline-start: calc((100 / 390) * 16 * 1vw);
    margin-block-start: calc((100 / 390) * 80 * 1vw);
    border-radius: calc((100 / 390) * 10 * 1vw) 0 0 calc((100 / 390) * 10 * 1vw);
    padding-block-start: calc((100 / 390) * 26 * 1vw);
    padding-inline-start: calc((100 / 390) * 32 * 1vw);
  }

  & > hgroup {
    position: relative;
    z-index: 5;

    & span[lang='en'] {
      font-family: var(--title);
      font-size: 24px;
      color: #fff;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 20 * 1vw);
      }
    }
    .title {
      font-family: var(--yumin);
      font-size: 34px;
      font-weight: 600;
      letter-spacing: 1.02px;
      color: #fff;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 24 * 1vw);
        letter-spacing: calc((100 / 390) * 0.72 * 1vw);
      }
    }
  }

  .breadcrumb {
    margin-block-start: 244px;

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

/* =====================
  bread
===================== */
.breadcrumb {
  inline-size: fit-content;
  margin-inline: auto 40px;
  padding-inline: 12px;
  border-radius: 4px;
  display: block flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-family: var(--yumin);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.45px;
  color: #1b57af;
  background-color: #fff;

  @media (width <= 768px) {
    margin-inline: auto calc((100 / 390) * 24 * 1vw);
    padding-inline: calc((100 / 390) * 12 * 1vw);
    padding-block: calc((100 / 390) * 1 * 1vw);
    font-size: calc((100 / 390) * 13 * 1vw);
    gap: calc((100 / 390) * 8 * 1vw);
    border-radius: calc((100 / 390) * 4 * 1vw);
  }

  & > li {
    display: block flex;
    gap: 8px;

    @media (width <= 768px) {
      gap: calc((100 / 390) * 8 * 1vw);
    }
  }

  & li + li {
    &::before {
      content: '|';
      display: inline-block;
      flex-shrink: 0;
    }
  }
}