/*
 * [Figma Component Reference]
 * Design: https://www.figma.com/design/g3GEVhEscIv6o7TYuJhyJh/DRT?node-id=474-172&m=dev
 *         https://www.figma.com/design/g3GEVhEscIv6o7TYuJhyJh/DRT?node-id=474-947&m=dev
 *         https://www.figma.com/design/g3GEVhEscIv6o7TYuJhyJh/DRT?node-id=474-941&m=dev
 *         https://www.figma.com/design/g3GEVhEscIv6o7TYuJhyJh/DRT?node-id=474-944&m=dev
 * Component: About / 360/About / PlayMovie
 * Applied as: create
 * Notes: 기존 #intro와 새 디자인을 about-section.js의 단일 스위치로 전환.
 *        PC 영상 슬롯과 버튼은 배치하고 실제 영상 파일은 미연결.
 */

.about-variant {
  width: 100%;
}

.about-variant--new {
  display: none;
  height: 100%;
}

[data-about-variant="new"] .about-variant--legacy {
  display: none;
}

[data-about-variant="new"] .about-variant--new {
  display: flex;
  align-items: center;
}

.about-new-stage {
  position: relative;
  width: 100%;
  height: 650px;
}

.about-new-copy {
  position: absolute;
  top: 35px;
  left: 0;
  z-index: 1;
  width: 474px;
}

.about-new-eyebrow {
  margin: 0 0 8px;
  color: #003eba;
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.396px;
}

.about-new-copy h2 {
  margin: 0 0 16px;
  color: #222;
  font-size: 40px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.88px;
}

.about-new-description {
  margin: 0;
  color: #797676;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.396px;
}

.about-new-annotation {
  margin: 0;
  color: #797676;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.308px;
}

.about-new-actions {
  position: absolute;
  top: 323px;
  left: -1px;
  z-index: 1;
  display: flex;
  width: 290px;
  height: 44px;
  gap: 8px;
}

.about-new-video-button,
.about-new-equipment-button {
  display: inline-flex;
  height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #003eba;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: -1.12px;
}

.about-new-video-button:hover,
.about-new-video-button:focus-visible,
.about-new-video-button.is-active,
.about-new-equipment-button:hover,
.about-new-equipment-button:focus-visible,
.about-new-equipment-button.is-active {
  background: #222;
}

.about-new-video-button:focus-visible,
.about-new-equipment-button:focus-visible {
  outline: 2px solid #78abf6;
  outline-offset: 2px;
}

.about-new-video-button {
  width: 140px;
}

.about-new-equipment-button {
  width: 142px;
}

.about-new-video-button .about-new-button-label {
  width: 72px;
}

.about-new-equipment-button .about-new-button-label {
  width: 70px;
}

.about-new-play-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url("images/play-movie-24@2x.png") center / contain no-repeat;
}

.about-new-movie {
  position: absolute;
  top: 0;
  right: -1px;
  display: grid;
  width: 696px;
  height: 344px;
  place-items: center;
  background: #dfdfdf;
  color: #fff;
  font-size: 48px;
  font-weight: 600;
  line-height: 67px;
  letter-spacing: -1.056px;
}

.about-new-movie video {
  width: 100%;
  height: 100%;
}

.about-new-values {
  position: absolute;
  top: 431px;
  left: -1px;
  display: grid;
  width: calc(100% + 1px);
  grid-template-columns: repeat(3, 347px);
}

.about-new-value {
  display: flex;
  width: 347px;
  height: 205px;
  margin: 0 -1px 0 0;
  border: 1px solid #eee;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #222;
  text-align: center;
}

.about-new-value img {
  display: block;
  width: 60px;
  height: 56px;
}

.about-new-value p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.396px;
}

.about-new-value > span {
  display: none;
}

html[lang="ja"] .about-new-copy h2 {
  font-size: 32px;
  line-height: 44px;
  letter-spacing: -0.704px;
}

html[lang="ja"] .about-new-description {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.33px;
}

html[lang="ja"] .about-new-annotation {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.264px;
}

@media (max-width: 909px) {
  [data-about-variant="new"] #section2 .section-inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  [data-about-variant="new"] .about-variant--new {
    align-items: flex-start;
  }

  .about-new-stage {
    height: 100%;
    padding-top: 108px;
  }

  .about-new-copy {
    position: static;
    width: 328px;
    max-width: 100%;
    margin: 0 auto;
  }

  .about-new-eyebrow {
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 500;
  }

  .about-new-copy h2 {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.44px;
  }

  .about-new-description {
    min-height: 60px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    letter-spacing: -0.286px;
  }

  .about-desktop-break,
  .about-new-annotation,
  .about-new-equipment-button,
  .about-new-movie {
    display: none;
  }

  .about-new-actions {
    position: static;
    width: 328px;
    max-width: 100%;
    height: 32px;
    margin: 16px auto 36px;
    padding-right: 8px;
    justify-content: flex-end;
  }

  .about-new-video-button {
    width: 102px;
    height: 32px;
    padding: 8px 10px 8px 8px;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: -0.96px;
  }

  .about-new-video-button .about-new-button-label {
    width: 62px;
  }

  .about-new-play-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    background-image: url("images/play-movie-18@2x.png");
  }

  .about-new-values {
    position: static;
    width: 328px;
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: 1fr;
  }

  .about-new-value {
    width: 100%;
    height: 124px;
    margin: 0 0 -1px;
    gap: 4px;
  }

  .about-new-value img {
    width: auto;
    height: 38px;
  }

  .about-new-value p {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: -0.264px;
  }

  .about-new-value > span {
    display: inline;
    color: #78abf6;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.1px;
  }
}