@charset "utf-8";

.titleArea .titleTextBox {
  width: 100%;
  height: 59.56rem;
  background: url(../img/img_seowonBg01.jpg) no-repeat center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 10rem;
}
.titleArea .titleTextBox {
  color: var(--white);
  text-align: center;
}
.titleArea .titleTextBox h2 {
  font-size: 4.5rem;
  margin-bottom: 1.25rem;
}
.titleArea .titleTextBox > p {
  width: 42.5rem;
  font-size: 1.31rem;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
}

/* mainVisual */
.mainVisual {
  margin-bottom: 12.5rem;
}
.mainVisual h3 {
  font-size: 2.68rem;
  color: var(--black);
  text-align: center;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}
.mainVisual > p {
  width: 50rem;
  font-size: 1.12rem;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
  margin: 0 auto;
}
.scroll-wrap {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reveal {
  overflow: hidden; /* 이미지를 자를 수 있게 */
  /* 처음엔 좌우가 80%만 보이도록 (가운데 20%만 보임) */
  clip-path: inset(0 40% 0 40%);
  transition: all 0.3s ease-out;
}
.reveal figure {
  width: 100%;
  height: auto;
  display: block;
}
.reveal img {
  width: 100%;
}

/* seowonGallery */
.seowonGallery > div {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 13.75rem;
  margin-bottom: 7.5rem;
}
.seowonGallery > div h3 {
  font-size: 2.68rem;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 10rem;
}
.seowonGallery .gallery > figure {
  width: 40rem;
  margin-bottom: 1.25rem;
}
.seowonGallery .gallery > figure img {
  width: 100%;
}
.seowonGallery .gallery h4 {
  font-size: 1.31rem;
  font-weight: 600;
  margin-bottom: 0.62rem;
}
.seowonGallery .gallery > p {
  font-weight: 500;
  margin-bottom: 7.5rem;
}

/* ==========노트북 반응형============= */
@media screen and (max-width: 1023px) {
  .titleArea .titleTextBox {
    height: 100vh;
    margin-bottom: 7.5rem;
  }
  .titleArea .titleTextBox h2 {
    font-size: 3.5rem;
    margin-bottom: 0.93rem;
  }
  .titleArea .titleTextBox > p {
    font-size: 1.25rem;
    line-height: 1.5;
  }

  /* mainVisual */
  .mainVisual {
    margin-bottom: 7.5rem;
  }
  .mainVisual h3 {
    font-size: 2.25rem;
  }
  .mainVisual > p {
    font-size: 1.06rem;
    line-height: 1.5;
  }
  .scroll-wrap {
    height: 50rem;
    margin: 5rem auto 0;
  }
  .reveal figure {
    width: 58.93rem;
    height: 50rem;
  }
  .reveal img {
    height: 100%;
    object-fit: cover;
  }

  /* seowonGallery */
  .seowonGallery > div {
    gap: 7.5rem;
  }
  .seowonGallery > div h3 {
    font-size: 2.25rem;
    margin-bottom: 7.5rem;
  }
  .seowonGallery .gallery > figure {
    width: 25.75rem;
    margin-bottom: 0.93rem;
  }
  .seowonGallery .gallery h4 {
    font-size: 1.25rem;
  }
}

/* ==========태블릿 반응형============= */
@media screen and (max-width: 860px) {
  .titleArea .titleTextBox {
    margin-bottom: 7rem;
  }
  .titleArea .titleTextBox h2 {
    font-size: 3.93rem;
  }
  .titleArea .titleTextBox > p {
    font-size: 1.43rem;
  }

  /* mainVisual */
  .mainVisual {
    margin-bottom: 7rem;
  }
  .mainVisual h3 {
    font-size: 2.56rem;
  }
  .mainVisual > p {
    width: 40.62rem;
    font-size: 1.25rem;
  }
  .scroll-wrap {
    height: 44.81rem;
    margin: 4.25rem 2.12rem 0;
  }
  .reveal figure {
    width: 49.56rem;
    height: 44.81rem;
  }

  /* seowonGallery */
  .seowonGallery > div {
    gap: 6.25rem;
    margin-bottom: 0;
  }
  .seowonGallery > div h3 {
    font-size: 2.56rem;
    margin-bottom: 7rem;
  }
  .seowonGallery .gallery > figure {
    width: 21.31rem;
    margin-bottom: 0.93rem;
  }
  .seowonGallery .gallery h4 {
    font-size: 1.43rem;
  }
  .seowonGallery .gallery > p {
    font-size: 1.12rem;
    margin-bottom: 7rem;
    word-break: keep-all;
  }
}
/* ==========모바일 반응형============= */
@media screen and (max-width: 540px) {
  .titleArea .titleTextBox {
    height: 100vh;
    background: url(../img/img_seowonBg01.jpg) no-repeat right -20rem top 0 / cover;
    margin-bottom: 7rem;
  }
  .titleArea .titleTextBox h2 {
    font-size: 4rem;
  }
  .titleArea .titleTextBox > p {
    width: 25rem;
    font-size: 1.56rem;
    word-break: keep-all;
  }

  /* mainVisual */
  .mainVisual {
    margin-bottom: 6.93rem;
  }
  .mainVisual h3 {
    font-size: 3rem;
    line-height: 1.3;
  }
  .mainVisual > p {
    width: 30.31rem;
    font-size: 1.43rem;
  }
  .scroll-wrap {
    width: 30.31rem;
    height: 55.43rem;
    margin: 4.18rem 2.12rem 0;
  }
  .reveal figure {
    width: 100%;
    height: 55.43rem;
  }

  /* seowonGallery */
  .seowonGallery > div {
    flex-direction: column;
    gap: 0;
    margin-bottom: 7.5rem;
  }
  .seowonGallery > div h3 {
    font-size: 3rem;
    margin-bottom: 3.12rem;
  }
  .seowonGallery .gallery > figure {
    width: 30.31rem;
  }
  .seowonGallery .gallery h4 {
    font-size: 1.56rem;
  }
  .seowonGallery .gallery > p {
    font-size: 1.31rem;
    margin-bottom: 5rem;
  }
}