/* 기본 */
html,
body {
  margin: 0;
  padding: 0;
}

/* html은 스크롤 담당 안 함 */
html {
  overflow: auto;
}

/* body만 스크롤 */
body {
  min-width: 1400px;
  margin: 0;
  background: #000;
  position: relative;
  overflow: hidden;
}

/* 공통 */
.bg-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2560px;

  /* translateX(-50%) 는 중앙정렬 삭제 하면 left로 좌우 위치값 설정 가능*/
  transform: translateX(-50%);

  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2560px auto;

  pointer-events: none;
  z-index: 0;
}

/* 메인 랜딩 */
.index-page .bg-wrap {
  height: 9060px;
  background-image: url("../images/260608_mois_pre_reg_BG.jpg");
}

/* 상단 nav 강제 고정 */
nav.nav-top {
  top: 0;
  left: 0;
}

/* 좌측 nav도 고정 */
nav.nav-left {
  top: 0;
}

/* 콘텐츠 */
.main-container {
  position: relative;
  width: 1360px;
  margin: 0 auto;
  z-index: 1;

  padding-bottom: 160px;
}

/* 공통 섹션 */
.section {
  position: relative;
  width: 1360px;
  margin: 0 auto;
}

/* 공통 이미지 초기화 */
.section img {
  display: block;
  max-width: none;
}

/* ===== 타이틀 ===== */
.main-section {
  height: 1270px;
}

.main-title {
  position: absolute;
  top: 510px;
  left: 280px;
  width: 922px;
  opacity: 0;
  z-index: 5;

  animation: titleFadeY 1s ease forwards;
  animation-delay: 0.2s;
}

.main-deco {
  position: absolute;
  top: 740px;
  left: 305px;
  width: 740px;
  opacity: 0;
  z-index: 4;

  animation: titleFadeY 1s ease forwards;
  animation-delay: 0.45s;
}

.sub-title {
  position: absolute;
  top: 770px;
  left: 300px;
  width: 754px;
  opacity: 0;
  z-index: 6;

  animation: titleFadeY 1s ease forwards;
  animation-delay: 0.7s;
}

.update {
  position: absolute;
  top: 950px;
  left: 434px;
  width: 492px;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 7;

  animation: titleFadeY 1s ease forwards;
  animation-delay: 0.95s;
}

.date-box {
  position: absolute;
  top: 1100px;
  left: 400px;
  width: 560px;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 8;

  animation: titleFadeY 1s ease forwards;
  animation-delay: 1.2s;
}

/* ===== 영상 섹션 ===== */
.video-section {
  position: relative;
  height: 1003px;
}

/* 비디오 타이틀 - 애니메이션 제거 */
.video-title {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 405px;

  transform: translateX(-50%);
  opacity: 1;
  z-index: 7;
}

/* 영상 전체 박스 */
.video-item {
  position: absolute;
  top: 340px;
  left: 50%;

  width: 915px;
  height: 542px;

  transform: translateX(-50%);
  overflow: visible;
  z-index: 2;
}

/* 프레임 */
.video-frame {
  position: absolute;
  top: 0;
  left: 0;

  width: 915px;
  height: 541px;

  z-index: 5;
  pointer-events: none;
}

/* 실제 유튜브 영역 */
.video-item .player,
.video-item iframe {
  position: absolute;

  /* 프레임 안쪽 여백에 맞춰 조정 */
  top: 31px;
  left: 31px;

  width: 853px;
  height: 480px;

  z-index: 1;
}

/* 어두운 마스크 */
.video-mask {
  position: absolute;

  top: 31px;
  left: 31px;

  width: 853px;
  height: 480px;

  background: rgba(0, 0, 0, .5);
  z-index: 2;
}

/* 플레이 버튼 */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border: 0;
  background: none;

  z-index: 10;
}

/* ===== 섹션3 ===== */
.section3 {
  position: relative;
  height: 900px;
}

.section3 > img {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 1089px;
  transform: translateX(-50%);
}

/* ===== 섹션4 슬라이드 ===== */
.section4 {
  position: relative;
  height: 1165px;
}

.section4-slide {
  position: absolute;
  top: 10px;
  left: 50%;

  /* 실제 프레임 크기로 부모를 맞춰야 중앙 정렬됨 */
  width: 1066px;
  height: 1035px;

  transform: translateX(-50%);
}

.section4-banner {
  position: relative;
  width: 1066px;
  height: 951px;

  background: url("../images/slide_frame.png") no-repeat center top;
  background-size: 1066px 951px;
}

.section4-inner {
  position: absolute;
  top: 45px;
  left: 56px;

  width: 955px;
  height: 860px;
  object-fit: cover;

  display: none;
  z-index: 1;
}

.section4-inner.active {
  display: block;
}

.section4-frame {
  position: absolute;
  top: 0;
  left: 0;

  width: 1066px;
  height: 951px;

  z-index: 3;
  pointer-events: none;
}

.section4-tab-list {
  position: absolute;
  top: 970px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 20px;
}

.section4-tab {
  position: relative;
  width: 186px;
  height: 80px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 호버용 검정 오버레이 */
.section4-tab::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0);

  transition: background .2s ease;

  pointer-events: none;
  z-index: 3;
}

/* 선택 안된 버튼만 호버 */
.section4-tab:not(.active):hover::after {
  background: rgba(0,0,0,.25);
}

.section4-tab img {
  position: absolute;
  top: 0;
  left: 0;

  width: 186px;
  height: 80px;
  pointer-events: none;
}

/* 기본 상태: off 보임 */
.section4-tab .tab-on {
  opacity: 0;
}

.section4-tab .tab-off {
  opacity: 1;
}

/* 선택 상태: on 보임 */
.section4-tab.active .tab-on {
  opacity: 1;
}

.section4-tab.active .tab-off {
  opacity: 0;
}

/* ===== 섹션5 ===== */
.section5 {
  position: relative;
  height: 1076px;
}

.section5 > img {
  position: absolute;
  top: 140px;
  left: 50%;
  width: 1288px;
  transform: translateX(-50%);
}

/* ===== 섹션6 ===== */
.section6 {
  position: relative;
  height: 765px;
}

.section6 > img {
  position: absolute;
  top: 140px;
  left: 50%;
  width: 974px;
  transform: translateX(-50%);
}

/* ===== 섹션7 ===== */
.section7 {
  position: relative;
  height: 973px;
}

.section7 > img {
  position: absolute;
  top: 140px;
  left: 50%;
  width: 974px;
  transform: translateX(-50%);
}

/* ===== 섹션8 ===== */
.section8 {
  position: relative;
  height: 977px;
}

.section8 > img {
  position: absolute;
  top: 140px;
  left: 50%;
  width: 974px;

  transform: translateX(-50%);

}

/* ===== 버튼 섹션 ===== */
.button-section {
  position: relative;
  height: 576px;
}

.button-section > img {
  position: absolute;
  top: 160px;
  left: 50%;
  width: 974px;
  transform: translateX(-50%);
}

.button-section .btn {
  position: absolute;
  top: 438px;
  left: 50%;

  transform: translateX(-50%);

  display: block;

  /* 모바일 파란 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;

  /* 드래그 선택 방지 */
  user-select: none;

  outline: none;
}

.button-section .btn img {
  display: block;
  width: 356px;

  transition: transform 0.2s ease;

  /* 이미지 선택 방지 */
  pointer-events: none;
}

/* hover */
.button-section .btn:hover img {
  transform: scale(1.02);
}

/* focus 제거 */
.button-section .btn:focus,
.button-section .btn:focus-visible,
.button-section .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== 타이틀 애니메이션 ===== */
@keyframes titleFadeY {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}