/* Main Content */
.main-content {
  padding-bottom: clamp(80px, 34.352px + 12.18vw, 200px);
}

/* Main Visual */
#main-visual {
  aspect-ratio: 1920 / 804;
  padding: 0 0 calc(45.1vw / 19.2);
  position: relative;
}
#main-visual .top__container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#main-visual .top__video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#main-visual .top__video > video {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#main-visual .top__video > video:not(.active) {
  display: none;
}

/* Recruit Banner */
.recruit-banner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  display: block;
  width: 60%;
  @media screen and (max-width: 768px) {
    width: 90%;
  }
}

/* TODO */

.recruit-banner__image {
  width: 100%;
  height: auto;
}

/* Section Vision */
.section-vision-wrapper {
  padding-top: clamp(80px, 34.352px + 12.18vw, 200px);
}

.section-vision {
  width: 90vw;
  max-width: 1360px;
  margin: 0 auto;
}

.section-vision__hgroup {
  width: 90%;
  max-width: 1360px;
}

.section-vision__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(40px, 9.568px + 8.12vw, 120px);
  font-weight: 400;
}

.section-vision__subtitle {
  font-size: clamp(16px, 9.968px + 1.62vw, 32px);
}

.section-vision__statement {
  font-size: clamp(20px, 12.392px + 2.03vw, 40px);
  font-weight: 400;
  margin-top: 56px;
}

.section-vision__text-container {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-vision__text {
  font-size: 18px;
}

/* Newsroom */
#news {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(50px, 30.9664px + 5.076vw, 100px) 0 calc(200vw / 19.2);
  gap: calc(70vw / 19.2);
}

.newsroom__hgroup {
  width: 90%;
  max-width: 1360px;
}

.newsroom__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(40px, 9.568px + 8.12vw, 120px);
  font-weight: 400;
}

.newsroom__subtitle {
  font-size: clamp(16px, 9.968px + 1.62vw, 32px);
}

#news .news__contents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-direction: column;
  gap: calc(32vw / 19.2) calc(16vw / 19.2);
  width: calc(1364vw / 19.2);
  max-width: 1364px;
}

#news .newsroom__list {
  width: 90vw;
}

#news .news__contents > li {
  position: relative;
  padding: calc(4vw / 19.2);
  height: fit-content;
}

#news .news__contents > li .news__thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
  aspect-ratio: 3 / 2;
  & > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

#news .news__contents > li .news__info {
  display: flex;
  flex-direction: column;
  margin-top: calc(24vw / 19.2);
  gap: calc(4vw / 19.2);
  & > * {
    font-size: clamp(16px, calc(16vw / 19.2), 24px);
    font-weight: bold;
    line-height: clamp(normal, calc(28vw / 19.2), 28px);
  }
}

#news .news__contents > li > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: background-color 0.5s;
}

#news .news__contents > li > a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#news .news__button {
  display: flex;
  align-items: center;
  justify-content: center;
}

#news .news__button > * {
  display: flex;
  padding: calc(32vw / 19.2) calc(140vw / 19.2) calc(25vw / 19.2);
  border: var(--text-main) calc(4vw / 19.2) solid;
  font-size: calc(32vw / 19.2);
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #news {
    padding: calc(100.1vw / 3.75) 0 calc(94vw / 3.75);
    gap: calc(50.9vw / 3.75);
  }

  #news .news__title {
    width: calc(181.62vw / 3.75);
    height: calc(36.35vw / 3.75);
  }

  #news .news__contents {
    grid-template-columns: repeat(1, 1fr);
    width: calc(308vw / 3.75);
    row-gap: calc(32vw / 3.75);
    & > li {
      & > * {
        font-size: calc(14vw / 3.75);
      }
      &:not(:nth-child(1)) {
        display: none;
      }
      &.archive__item {
        display: list-item;
      }
    }
  }

  #news .news__button > * {
    padding: calc(10vw / 3.75) calc(90vw / 3.75);
    border: var(--text-main) calc(4vw / 3.75) solid;
    font-size: calc(24vw / 3.75);
  }
}

/* SNS List */
.sns-list {
  width: 90%;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: clamp(40px, 24.784px + 4.06vw, 80px);
  padding-bottom: clamp(40px, 24.784px + 4.06vw, 80px);
  gap: clamp(10px, 6.196px + 1.015vw, 20px);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.sns-list__icon {
  height: clamp(20px, 12.392px + 2.03vw, 40px);
  width: auto;
}