/* ========================================
   About Page Styles
   ======================================== */

/* Page Title */
.page-title {
  font-size: 100px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
  padding: 220px 60px 40px;
  background: #000 url('../../img/key-visuals/img_sub_key_visual_faq.jpg')
    center right/auto 100% no-repeat;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .page-title {
    font-size: 8.33vw; /* 100px / 1200px */
    padding: 18.33vw 3.13vw 3.33vw; /* 220px 60px 40px / 1920px, 1200px */
  }
}

@media (max-width: 767px) {
  .page-title {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
    padding: 155px 20px 10px;
    background: #000 url('../../img/key-visuals/img_sub_key_visual_faq_mo.jpg')
      center/auto 100% no-repeat;
  }
}

/* About Article */
.about-article {
  overflow: hidden;
  background: #e7e7e7;
}

/* Section Inner (공통 max-width 컨테이너) */
.about-section__inner {
  position: relative;
  z-index: 1;
  max-width: 1190px;
  margin: 0 auto;
  word-break: keep-all;
}

/* ========================================
   Banner Section
   ======================================== */
.about-banner {
  position: relative;
  padding: 265px 0 200px;
  border-bottom: 1px solid #cfcfcf;
}

.about-banner:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background-color: #cfcfcf;
  transform: translateX(-50%);
}

.about-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1190px;
  margin: 0 auto;
}

.about-banner__title {
  margin-top: 74px;
  position: relative;
  z-index: 1;
  width: 1068px;
}

.about-banner__title i {
  width: 100%;
  height: auto;
  display: inline-flex;
  line-height: 0;
}

.about-banner__title i svg {
  width: 100%;
  height: auto;
}

.about-banner__desc {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000;
  text-align: center;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-banner {
    padding: 22.08vw 3.13vw 16.67vw; /* 265px 60px 200px / 1200px, 1920px */
  }

  .about-banner__title {
    margin-top: 6.17vw; /* 74px / 1200px */
    width: 89vw; /* 1068px / 1200px */
  }

  .about-banner__desc {
    font-size: 3vw; /* 36px / 1200px */
  }
}

@media (max-width: 767px) {
  .about-banner {
    padding: 102px 40px 98px;
  }

  .about-banner:before {
    display: none;
  }

  .about-banner__title {
    margin-top: 46px;
    width: 100%;
  }

  .about-banner__desc {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.01em;
  }
}

/* ========================================
   Conference Info Section
   ======================================== */
.about-conference {
  position: relative;
  padding: 200px 5px 136px;
  text-align: center;
}

.about-conference:before {
  position: absolute;
  display: block;
  content: '';
  background-color: #cfcfcf;
  width: 200vw;
  height: 1px;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0) rotate(135deg);
  transform-origin: center;
}

.about-conference .about-section__inner {
  position: relative;
  z-index: 1;
}

.about-conference__title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000;
}

.about-conference__desc {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #808080;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-conference {
    padding: 16.67vw 3.13vw 11.33vw; /* 200px 60px 136px / 1200px, 1920px */
  }

  .about-conference__title {
    font-size: 4.17vw; /* 50px / 1200px */
  }

  .about-conference__desc {
    margin-top: 3.33vw; /* 40px / 1200px */
    font-size: 1.67vw; /* 20px / 1200px */
  }
}

@media (max-width: 767px) {
  .about-conference {
    padding: 100px 20px 60px;
  }

  .about-conference__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.01em;
  }

  .about-conference__desc {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
}

/* ========================================
   What is Pleos Section
   ======================================== */
.about-what__inner {
  border-radius: 20px;
  border: 1px solid #cfcfcf;
  background-color: #f2f2f2;
  padding: 100px;
  text-align: center;
}

.about-what__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000;
}

.about-what__desc {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #808080;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-what {
    padding: 0 3.13vw; /* 60px / 1920px */
  }

  .about-what__inner {
    border-radius: 1.67vw; /* 20px / 1200px */
    padding: 8.33vw; /* 100px / 1200px */
  }

  .about-what__title {
    font-size: 3.33vw; /* 40px / 1200px */
  }

  .about-what__desc {
    margin-top: 3.33vw; /* 40px / 1200px */
    font-size: 1.67vw; /* 20px / 1200px */
  }
}

@media (max-width: 767px) {
  .about-what {
    padding: 0 23px;
  }

  .about-what__inner {
    padding: 48px 17px;
  }

  .about-what__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .about-what__desc {
    margin-top: 26px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
}

/* ========================================
   Pleos Platform Section
   ======================================== */
.about-pleos {
  padding: 140px 0;
  text-align: center;
}

.about-pleos__icon {
  display: block;
  margin: 0 auto;
  width: 180px;
  height: 180px;
}

.about-pleos__title {
  margin-top: 60px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000;
}

.about-pleos__desc {
  margin-top: 40px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #808080;
}

.about-pleos__desc + .about-pleos__desc {
  margin-top: 16px;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-pleos {
    padding: 11.67vw 3.13vw; /* 140px 60px / 1200px, 1920px */
  }

  .about-pleos__icon {
    width: 15vw; /* 180px / 1200px */
    height: 15vw;
  }

  .about-pleos__title {
    margin-top: 5vw; /* 60px / 1200px */
    font-size: 3.17vw; /* 38px / 1200px */
  }

  .about-pleos__desc {
    margin-top: 3.33vw; /* 40px / 1200px */
    font-size: 1.5vw; /* 18px / 1200px */
  }

  .about-pleos__desc + .about-pleos__desc {
    margin-top: 1.33vw; /* 16px / 1200px */
  }
}

@media (max-width: 767px) {
  .about-pleos {
    padding: 60px 35px;
  }

  .about-pleos__icon {
    width: 180px;
    height: 180px;
  }

  .about-pleos__title {
    margin-top: 44px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.01em;
  }

  .about-pleos__desc {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  .about-pleos__desc + .about-pleos__desc {
    margin-top: 16px;
  }
}

/* ========================================
   Video Section
   ======================================== */
.about-video {
  padding-bottom: 180px;
}

.about-video__box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
}

.about-video__play-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  cursor: pointer;
}

.about-video__play-btn img {
  opacity: 0.8;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-video__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 80px;
  height: 80px;
}

.about-video__play-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-video {
    padding: 0 3.13vw 15vw; /* 60px 180px / 1920px, 1200px */
  }

  .about-video__box {
    border-radius: 1.67vw; /* 20px / 1200px */
  }

  .about-video__play-icon {
    width: 6.67vw; /* 80px / 1200px */
    height: 6.67vw;
  }
}

@media (max-width: 767px) {
  .about-video {
    padding: 0 20px 80px;
  }

  .about-video__box {
    border-radius: 14px;
  }

  .about-video__play-icon {
    width: 45px;
    height: 45px;
  }
}

/* ========================================
   Structure Section (참가 안내, 프로그램, 이벤트)
   ======================================== */
.about-structure {
  background-color: #000;
  padding: 180px 0;
}

.about-structure__content {
  text-align: center;
  color: #fff;
}

.about-structure__content + .about-structure__content {
  margin-top: 163px;
}

.about-structure__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
}

.about-structure__desc {
  margin-top: 42px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.4px;
  color: #cfcfcf;
}

.about-structure__desc.type_large {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
}

/* 참가 신청 프로세스 */
.about-structure__process {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  height: 480px;
  background-color: #282828;
  border-radius: 20px;
}

.about-structure__process-list {
  display: flex;
  gap: 64px;
}

.about-structure__process-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #414141;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: pre-line;
}

.about-structure__process-item.type_select {
  background-color: #3b3b3b;
  border-color: #4e4e4e;
}

.about-structure__process-desc {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: #808080;
  white-space: pre-line;
}

.about-structure__process-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #282828;
  border-radius: 100px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: -0.01em;
  width: 64px;
  height: 30px;
  margin-bottom: 10px;
  white-space: pre-line;
}

.about-structure__process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 90px;
  left: -20px;
  width: 24px;
  height: 8px;
  transform: translateX(-100%);
}

.about-structure__process-arrow i {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.about-structure__process-arrow svg {
  width: 100%;
  height: 100%;
}

/* 카드 리스트 */
.about-structure__card-list {
  display: grid;
  gap: 25px;
  margin-top: 80px;
  text-align: left;
}

.about-structure__card-list--3col {
  grid-template-columns: repeat(3, 1fr);
}

.about-structure__card-list--2col {
  grid-template-columns: repeat(2, 1fr);
}

.about-structure__card {
  background-color: #282828;
  border-radius: 20px;
  padding: 58px 42px;
}

.about-structure__card-icon {
  display: block;
  width: 54px;
  height: 54px;
  flex: none;
}

.about-structure__card-icon i {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.about-structure__card-icon svg {
  width: 100%;
  height: 100%;
}

.about-structure__card-title {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
}

.about-structure__card-desc {
  margin-top: 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #cfcfcf;
  white-space: pre-line;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-structure {
    padding: 15vw 3.13vw; /* 180px 60px / 1200px, 1920px */
  }

  .about-structure__content + .about-structure__content {
    margin-top: 13.58vw; /* 163px / 1200px */
  }

  .about-structure__title {
    font-size: 3vw; /* 36px / 1200px */
  }

  .about-structure__desc {
    margin-top: 3.5vw; /* 42px / 1200px */
    font-size: 1.5vw; /* 18px / 1200px */
  }

  .about-structure__desc.type_large {
    font-size: 1.83vw; /* 22px / 1200px */
  }

  .about-structure__process {
    margin-top: 6.67vw; /* 80px / 1200px */
    height: 33.33vw; /* 400px / 1200px */
    border-radius: 1.67vw; /* 20px / 1200px */
  }

  .about-structure__process-list {
    gap: 5.33vw; /* 64px / 1200px */
  }

  .about-structure__process-item {
    height: 16.67vw; /* 200px / 1200px */
    width: 16.67vw;
    font-size: 1.67vw; /* 20px / 1200px */
  }

  .about-structure__process-desc {
    margin-top: 0.33vw; /* 4px / 1200px */
    font-size: 1.08vw; /* 13px / 1200px */
  }

  .about-structure__process-tag {
    border-radius: 8.33vw; /* 100px / 1200px */
    font-size: 1.08vw; /* 13px / 1200px */
    width: 5.33vw; /* 64px / 1200px */
    height: 2.5vw; /* 30px / 1200px */
    margin-bottom: 0.83vw; /* 10px / 1200px */
  }

  .about-structure__process-arrow {
    top: 7.5vw; /* 90px / 1200px */
    left: -1.67vw; /* -20px / 1200px */
    width: 2vw; /* 24px / 1200px */
    height: 0.67vw; /* 8px / 1200px */
  }

  .about-structure__card-list {
    gap: 2.08vw; /* 25px / 1200px */
    margin-top: 6.67vw; /* 80px / 1200px */
  }

  .about-structure__card {
    border-radius: 1.67vw; /* 20px / 1200px */
    padding: 4.83vw 3.5vw; /* 58px 42px / 1200px */
  }

  .about-structure__card-icon {
    width: 4.5vw; /* 54px / 1200px */
    height: 4.5vw;
  }

  .about-structure__card-title {
    margin-top: 2.33vw; /* 28px / 1200px */
    font-size: 2vw; /* 24px / 1200px */
  }

  .about-structure__card-desc {
    margin-top: 1.67vw; /* 20px / 1200px */
    font-size: 1.33vw; /* 16px / 1200px */
  }
}

@media (max-width: 767px) {
  .about-structure {
    padding: 80px 20px;
  }

  .about-structure__content + .about-structure__content {
    margin-top: 80px;
  }

  .about-structure__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  .about-structure__desc {
    margin-top: 19px;
    font-size: 13px;
    line-height: 1.5;
  }

  .about-structure__desc.type_large {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.01em;
    color: #cfcfcf;
  }

  .about-structure__process {
    margin-top: 40px;
    height: auto;
    padding: 58px 0;
    width: 100%;
    border-radius: 14px;
  }

  .about-structure__process-list {
    flex-direction: column;
    gap: 50px;
  }

  .about-structure__process-item {
    height: 172px;
    width: 172px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.47;
    letter-spacing: -0.01em;
  }

  .about-structure__process-tag {
    margin-bottom: 6px;
  }

  .about-structure__process-arrow {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 25px;
    height: 8px;
    transform: translate(-50%, -100%) rotate(90deg);
  }

  .about-structure__card-list--3col,
  .about-structure__card-list--2col {
    grid-template-columns: repeat(1, 1fr);
  }

  .about-structure__card-list {
    gap: 20px;
    margin-top: 39px;
  }

  .about-structure__card {
    border-radius: 14px;
    padding: 42px 32px 48px;
  }

  .about-structure__card-icon {
    width: 48px;
    height: 48px;
  }

  .about-structure__card-title {
    margin-top: 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.27;
    letter-spacing: -0.01em;
  }

  .about-structure__card-desc {
    margin-top: 28px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.01em;
  }
}

/* ========================================
   Partner Section
   ======================================== */
.about-partner {
  padding: 180px 0 100px;
  background-color: #2f2f2f;
  text-align: center;
  color: #fff;
}

.about-partner__title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.01em;
}

.about-partner__desc {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.about-partner__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 80px;
}

.about-partner__item {
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  text-align: left;
}

.about-partner__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: #000;
}

.about-partner__logo {
  width: 160px;
  height: 60px;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .about-partner {
    padding: 15vw 3.13vw 5.21vw; /* 180px 60px 100px / 1200px, 1920px */
  }

  .about-partner__title {
    font-size: 2.6vw; /* 50px / 1920px */
  }

  .about-partner__desc {
    margin-top: 2.08vw; /* 40px / 1920px */
    font-size: 1.15vw; /* 22px / 1920px */
  }

  .about-partner__list {
    gap: 2vw; /* 24px / 1200px */
  }

  .about-partner__logo-box {
    height: 10vw; /* 120px / 1200px */
  }

  .about-partner__logo {
    width: 13.33vw; /* 160px / 1200px */
    height: 5vw; /* 60px / 1200px */
  }
}

@media (max-width: 767px) {
  .about-partner {
    padding: 80px 20px 60px;
  }

  .about-partner__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  .about-partner__desc {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.428;
    letter-spacing: -0.01em;
  }

  .about-partner__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 40px;
  }

  .about-partner__item {
    border-radius: 14px;
  }

  .about-partner__logo-box {
    height: 18.33vw; /* 66px / 360px */
  }

  .about-partner__logo {
    width: 21.11vw; /* 76px / 360px */
    height: 7.78vw; /* 28px / 360px */
  }
}

/* ========================================
   Footer Background Color Override
   ======================================== */
.footer-container {
  background-color: #2f2f2f;
}