@charset "UTF-8";
/* con_tit ============================== */
@font-face {
  font-family: "InkLiquid";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff") format("woff");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "MiraenaMu";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_04@1.0/Future_tree.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eonggeongkwi";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_11@1.0/Unggungqui.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
.text h2 {
  font-size: 3vw;
  font-weight: 200;
}
.text p {
  font-size: 1.9vw;
  font-weight: 200;
}
.text c {
  font-size: 1.2vw;
}
.text q {
  font-size: 1.3vw;
}

.section_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 2vw;
  opacity: 0.8;
  color: #aaadaf;
}
.section_title .deco_line {
  width: 9vw;
  height: 1px;
  background-color: #aaadaf;
}
.section_title .deco_dot {
  width: 10px;
  height: 10px;
  background-color: #aaadaf;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.section_title p {
  width: 7vw;
  font-size: 0.9vw;
}

/* main_wrapper ============================== */
.main_wrapper img {
  width: 100%;
  height: auto;
}

.main_wrapper {
  margin: 0 auto;
  background-color: #242b31;
  /* --------------------
      개별 요소 스타일 및 초기 상태
      -------------------- */
  /* FIX 1: 초기 텍스트 위치를 중앙에서 가깝게 배치하여 붙어 보이게 조정 */
  /* 이미지와 아이콘을 텍스트 사이 중앙에 배치 */
  /* 건물과 아이콘은 중앙 배치 */
}
.main_wrapper .bg_logo {
  width: 33vw;
  max-width: 597px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.main_wrapper .main_video_wrap {
  display: block;
  height: 48vw;
  background-color: #3f454a;
}
.main_wrapper .main_con01 {
  opacity: 0;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
}
.main_wrapper .main_con01.active {
  opacity: 1;
  z-index: 2;
}
.main_wrapper .main_con01 .main_con01_txt {
  width: 40%;
  max-width: 879px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.main_wrapper .main_con01 .main_con01_txt span {
  color: #919191;
}
.main_wrapper .main_con02 {
  background-color: #2b3237;
  height: 45vw;
}
.main_wrapper .main_con02 .content {
  width: 80%;
  height: auto;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5vw;
}
.main_wrapper .main_con02 .content .text {
  width: 30%;
  text-align: left;
}
.main_wrapper .main_con02 .content .text h2 {
  margin-bottom: 20px;
}
.main_wrapper .main_con02 .content .video {
  width: 70%;
  height: 500px;
  background-color: #1a1e21;
  margin-top: 13px;
}
.main_wrapper .main_con03 {
  background-color: #1a1e21;
}
.main_wrapper .main_con03 .mouse_ef {
  position: relative;
  margin-bottom: 6vw;
}
.main_wrapper .main_con03 .mouse_ef .scroll_dot {
  display: block;
  width: 0.5rem;
  height: 1rem;
  border-radius: 30%;
  background: #5e85ad;
  -webkit-animation: slideInDown 1.5s linear infinite;
          animation: slideInDown 1.5s linear infinite;
  position: absolute;
  left: 49.8%;
  bottom: 21%;
}
.main_wrapper .main_con03 .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2vw;
  margin: 3vw 0;
}
.main_wrapper .main_con03 .content img {
  max-width: 170px;
}
.main_wrapper .main_con03 .content .text {
  text-align: left;
  display: grid;
}
.main_wrapper .main_con03 .con03_03 p {
  width: 33%;
  margin: 0 auto;
  background-color: #fff;
  padding: 0.5vw;
  border-radius: 35px;
  font-size: 1.4vw;
}
.main_wrapper .main_con03 .con03_03 .baby_blue_s {
  font-family: "MiraenaMu";
  font-size: 2.5vw;
}
.main_wrapper .scroll-section {
  position: relative;
  width: 100%;
  height: 100vh; /* 애니메이션이 진행될 뷰포트 크기 */
  overflow: hidden;
  /* 기본 스크롤 섹션 위로 다른 콘텐츠가 있다면 이 영역 위에 위치합니다. */
  background-color: #174e77;
}
.main_wrapper .fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* GPU 가속을 위해 translateZ(0)를 사용합니다. */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.main_wrapper .bg-color {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #174e77; /* 이미지의 밝은 남색 */
}
.main_wrapper .text-songdo, .main_wrapper .text-first, .main_wrapper .building-img, .main_wrapper .icon-first, .main_wrapper .center-line, .main_wrapper .moving-line {
  position: absolute;
  color: white;
  opacity: 0;
  z-index: 10;
}
.main_wrapper .text-songdo, .main_wrapper .text-first {
  font-size: 8vw;
  font-weight: 900;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  white-space: nowrap;
}
.main_wrapper .text-songdo {
  left: 26%;
  -webkit-transform: translateX(-26vw) translateY(26px);
          transform: translateX(-26vw) translateY(26px); /* 화면 중앙에서 시작 */
}
.main_wrapper .text-first {
  left: 32%;
  -webkit-transform: translateX(32vw) translateY(32px);
          transform: translateX(32vw) translateY(32px); /* 화면 중앙에서 시작 */
}
.main_wrapper .building-img {
  width: 23vw;
  height: auto;
  max-width: 263px;
  z-index: 15;
  left: 50%;
  top: 6%;
  -webkit-transform: translateX(-50%) translateY(100px);
          transform: translateX(-50%) translateY(100px); /* 중앙 하단에서 시작 */
}
.main_wrapper .icon-first {
  font-size: 20vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
  z-index: 5;
  left: 50%;
  top: 49%;
  -webkit-transform: translateX(-50%) translateY(100px);
          transform: translateX(-50%) translateY(100px); /* 중앙 하단에서 시작 */
}
.main_wrapper .icon-first .bg_logo {
  width: 100%;
  max-width: 650px;
  position: static;
}
.main_wrapper .moving-line {
  position: absolute;
  width: 0;
  height: 20px; /* 화면 높이만큼 길게 설정 */
  background-color: rgba(255, 255, 255, 0.89); /* 반투명 흰색 선 */
  z-index: 9;
  /* 초기 위치는 FIRST 글자 중앙에 맞춥니다 (JS에서 위치 조정 필요) */
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
}
.main_wrapper .scroll-dummy {
  /* 이 영역의 높이가 애니메이션의 '총 길이'가 됩니다. */
  height: 350vh;
}