@charset "utf-8";

/* 전체 히어로(스크롤) 영역 */
#wrap {
  position: relative;
  width: 100%;
  height: 500vh; /* TOTAL_SEG * 100vh */
}
.sticky {
  position: sticky;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* 배경 2장 */
.bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transition: all 280ms linear;
}
.bg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--black30);
}
.bg1 {
  z-index: 1;
  opacity: 1;
  background-image: url(../img/img_bg01.jpg);
} /* 첫 배경(숲 등) */
.bg2 {
  z-index: 0;
  opacity: 0;
  background-image: url(../img/img_bg02.jpg);
} /* 두 번째 배경(바다/처마 등) */

/* 중앙 문장 컨테이너 (초기 3개 문장 단계) */
.center {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-self: center;
  z-index: 3;
  text-align: center;
}
.msg {
  position: absolute;
  font-size: 1.68rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--white);
  opacity: 0;
  transform: translateY(0);
  will-change: transform, opacity;
}

/* 마지막 전환용 오버레이(어둡게) */
.veil {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 2; /* 배경 위, 텍스트 아래 */
  pointer-events: none;
  transition: opacity 200ms linear;
}

/* 마지막에 나타나는 중앙 텍스트 */
.final {
  position: absolute;
  inset: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}
.final .finalText {
  font-size: 3.25rem;
  font-weight: 600;
  color: var(--white);
  opacity: 0;
  transform: translateY(18vh);
  will-change: transform, opacity;
  text-align: center;
}

#aboutArea > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#aboutArea .aboutSource {
  width: 50%;
  height: 100vh;
}
#aboutArea .aboutSource video,
#aboutArea .aboutSource img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#aboutArea .txtBox {
  width: 30.5rem;
  text-align: center;
  margin: 0 auto;
}
#aboutArea .txtBox h3 {
  font-size: 2.68rem;
  color: var(--black);
  margin-bottom: 1.87rem;
}
#aboutArea .txtBox .koText {
  font-size: 1.31rem;
  font-weight: 500;
  color: var(--dark-gray);
  margin-bottom: 0.31rem;
}
#aboutArea .txtBox .enText {
  font-size: 1.31rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--deep-gray);
}

.aboutMain {
  position: relative;
  width: 100%;
  height: 100vh;
}
.aboutMain .mainImg {
  width: 100%;
  height: 100%;
  background: url(../img/img_bg03.jpg) no-repeat center/cover;
}
.aboutMain .mainImg::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--black50);
}
.aboutMain .mainTxt {
  position: absolute;
  inset: 0;
  width: 68.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}
.aboutMain .mainTxt img {
  width: 22.5rem;
  margin-bottom: 1.87rem;
}
.aboutMain .mainTxt p {
  font-size: 1.31rem;
  font-weight: 500;
  color: var(--white);
  text-align: center;
  line-height: 1.6;
  margin-top: 0.62rem;
}

.imgListArea .inner02 {
  padding: 12.5rem 0 15rem;
}
.imgListArea .imgTop,
.imgListArea .imgBottom {
  display: flex;
  justify-content: space-between;
}
.imgListArea .imgTop {
  margin-bottom: 10rem;
}
.imgListArea img {
  width: 37.75rem;
  height: 41.5rem;
}
.imgListArea p {
  font-size: 1.31rem;
  font-weight: 600;
  margin-top: 1.25rem;
}
.imgListArea .imgArea02,
.imgListArea .imgArea04 {
  margin-top: 18.75rem;
}

/* ==========노트북 반응형============= */
@media screen and (max-width: 1023px) {
  .bg1 {
    background-position: top center;
  } /* 첫 배경(숲) */
  .bg2 {
    background-position: center;
    background-size: cover;
  } /* 두 번째 배경(처마) */
  .msg {
    font-size: 1.5rem;
  }
  .final .finalText {
    font-size: 2.75rem;
    line-height: 1.4;
  }
  #aboutArea .aboutSource {
    width: 32rem;
    height: 36.06rem;
  }
  #aboutArea .txtBox {
    width: 32rem;
    padding: 2.5rem;
  }
  #aboutArea .txtBox h3 {
    font-size: 2.25rem;
  }
  #aboutArea .txtBox .koText {
    font-size: 1.25rem;
  }
  #aboutArea .txtBox .enText {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .aboutMain {
    height: 100vh;
    overflow: hidden;
  }
  .aboutMain .mainImg {
    height: calc(100vh * 1.4);
    background: url(../img/img_bg03.jpg) no-repeat bottom center/cover;
  }
  .aboutMain .mainImg::before {
    background: rgba(0, 0, 0, 0.6);
  }
  .aboutMain .mainTxt {
    width: 58.93rem;
  }
  .aboutMain .mainTxt img {
    width: 18.75rem;
  }
  .aboutMain .mainTxt p {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .imgListArea .inner02 {
    padding: 0;
    margin: 7.5rem auto;
  }
  .imgListArea .imgTop {
    margin-bottom: 3.12rem;
  }
  .imgListArea img {
    width: 23.75rem;
    height: 26.12rem;
  }
  .imgListArea p {
    font-size: 1.25rem;
  }
  .imgListArea .imgArea02,
  .imgListArea .imgArea04 {
    margin-top: 3.12rem;
  }
}

/* ==========태블릿 반응형============= */
@media screen and (max-width: 860px) {
  .bg1 {
    background-position: top center;
  } /* 첫 배경(숲) */
  .bg2 {
    background-position: center;
    background-size: cover;
  } /* 두 번째 배경(처마) */
  .center .msg.mobileTxt01 {
    width: 29.37rem;
    margin: 0 auto;
  }
  .center .msg.mobileTxt02 {
    margin: 0 auto;
  }
  .center .msg.mobileTxt03 {
    width: 31.87rem;
    margin: 0 auto;
  }
  .final .finalText {
    font-size: 3.12rem;
  }
  #aboutArea .aboutSource {
    width: 26.87rem;
    height: 36.06rem;
  }
  #aboutArea .txtBox {
    width: 26.87rem;
    padding: 2.12rem;
  }
  #aboutArea .txtBox h3 {
    font-size: 2.56rem;
  }
  #aboutArea .txtBox .koText {
    font-size: 1.43rem;
    line-height: 1.5;
    margin-bottom: 0.31rem;
  }
  #aboutArea .txtBox .enText {
    font-size: 1.43rem;
    font-weight: 600;
  }

  .aboutMain .mainImg {
    height: calc(100vh * 1);
    background: url(../img/img_bg03.jpg) no-repeat top center/cover;
  }
  .aboutMain .mainTxt {
    width: 49.56rem;
  }
  .aboutMain .mainTxt img {
    width: 18.25rem;
  }
  .aboutMain .mainTxt p {
    font-size: 1.43rem;
    line-height: 1.6;
    word-break: keep-all;
  }

  .imgListArea .inner02 {
    margin: 7rem auto;
  }
  .imgListArea .imgTop {
    margin-bottom: 6.25rem;
  }
  .imgListArea img {
    width: 23.37rem;
    height: 25.75rem;
  }
  .imgListArea p {
    font-size: 1.43rem;
  }
  .imgListArea .imgArea02,
  .imgListArea .imgArea04 {
    margin-top: 10rem;
  }
}

/* ==========모바일 반응형============= */
@media screen and (max-width: 540px) {
  #wrap {
    position: relative;
    width: 100%;
    height: 300vh;
  }
  .sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 150vh;
    overflow: visible;
  }
  /* 중앙 문장 컨테이너 (초기 3개 문장 단계) */
  .center {
    top: 25%;
    align-self: flex-start;
  }
  .center .msg.mobileTxt01 {
    width: 20.62rem;
    height: 100vh;
    font-size: 2.12rem;
    word-break: keep-all;
  }
  .center .msg.mobileTxt02 {
    width: 31.25rem;
    height: 100vh;
    font-size: 2.12rem;
    word-break: keep-all;
  }
  .center .msg.mobileTxt03 {
    width: 29.37rem;
    font-size: 2.12rem;
    word-break: keep-all;
  }
  .final {
    height: 100%;
  }
  .final .finalText {
    width: 25.31rem;
    font-size: 3.5rem;
    word-break: keep-all;
  }
  #aboutArea .mission,
  #aboutArea .coreValues {
    display: flex;
    flex-direction: column-reverse;
  }
  #aboutArea .aboutSource {
    width: 100%;
    height: auto;
  }
  #aboutArea .vision {
    display: flex;
    flex-direction: column;
  }
  #aboutArea .aboutSource video,
  #aboutArea .aboutSource img {
    height: auto;
    margin-top: 7rem;
  }
  #aboutArea .txtBox {
    width: 30.31rem;
    padding: 0;
  }
  #aboutArea .txtBox h3 {
    font-size: 3rem;
    margin: 7rem 0 1.87rem;
  }
  #aboutArea .txtBox .koText {
    font-size: 1.56rem;
    word-break: keep-all;
  }
  #aboutArea .txtBox .enText {
    font-size: 1.56rem;
    font-weight: 500;
    word-break: keep-all;
  }
  .aboutMain .mainTxt {
    width: 30.31rem;
  }
  .aboutMain .mainTxt img {
    width: 19.06rem;
    margin-bottom: 1.87rem;
  }
  .aboutMain .mainTxt p {
    font-size: 1.56rem;
  }

  .imgListArea {
    position: relative;
    width: 30.31rem;
    height: 142.5rem;
    margin: 0 auto;
  }
  .imgListArea .inner02 {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .imgListArea .imgTop,
  .imgListArea .imgBottom {
    display: block
  }
  .imgListArea .imgTop {
    margin-bottom: 10rem;
  }
  .imgListArea img {
    width: 24.25rem;
    height: 26.68rem;
  }
  .imgListArea p {
    font-size: 1.56rem;
  }
   .imgListArea .imgArea01 {
    position: absolute;
    top: 0;
   }
   .imgListArea .imgArea02 {
    position: absolute;
    right: 0;
    top: 25rem;
   }
   .imgListArea .imgArea03 {
    position: absolute;
    top: 71.87rem;
   }
   .imgListArea .imgArea04 {
    position: absolute;
    right: 0;
    top: 96.87rem;
   }
}