/* 기본 */
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: 5830px;
  background-image: url("../images/BG.png");
}

/* 상단 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;
}

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

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

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

.main-title {
  position: absolute;
  top: 188px;
  left: 50%;
  width: 720px;
  transform: translateX(calc(-50% - 200px));
  z-index: 3;
  opacity: 1;
}

.sub-title {
  position: absolute;
  top: 390px;
  left: 50%;
  width: 406px;
  transform: translateX(calc(-50% - 200px));
  z-index: 3;
  opacity: 1;
}

.story-text {
  position: absolute;
  top: 558px;
  left: 50%;
  width: 451px;
  transform: translateX(calc(-50% - 210px));
  z-index: 3;
  opacity: 1;
}

/* ===== 영상 섹션 ===== */
.video-section {
  height: 800px; /* 프레임 + 여백 */
}

/* 영상 전체 박스 = 프레임 기준 */
.video-item {
  position: absolute;
  /* 프레임 위치값 */
  top: 0px;
  left: 50%;

  /* 프레임 사이즈 */
  width: 981px;
  height: 591px;

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

/* 프레임은 video-item 안에서 0,0 */
.video-frame {
  position: absolute;
  top: 0;
  left: 0;

  /* 프레임 사이즈 */
  width: 981px;
  height: 591px;

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

/* 실제 유튜브 영역 */
.video-item .player,
.video-item iframe {
  position: absolute;
  /* 프레임 기준 위치값 */
  top: 55px;
  left: 67px;

  width: 854px;
  height: 480px;

  z-index: 1;
}

/* 마스크도 유튜브랑 같은 좌표 */
.video-mask {
  position: absolute;
  /* 프레임 기준 위치값 */
  top:55px;
  left: 67px;

  width: 854px;
  height: 480px;

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

/* 플레이 버튼 = 프레임 중앙 */
.play-btn {
  position: absolute;

  top: calc(50% + 10px);
  left: 50%;

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

  border: 0;
  background: none;

  z-index: 10;
}
.section1 {
  height: 2635px;
}
.section1-title {
  position: absolute;
  top: 160px;
  left: 50%;
  width: 446px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 1;
}

.map {
  position: absolute;
  top: 450px;
  left: 50%;
  width: 1041px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 1;
}

.reward {
  position: absolute;
  top: 1020px;
  left: 50%;
  width: 1135px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 1;
}

.upgrade {
  position: absolute;
  top: 1670px;
  left: 50%;
  width: 1134px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 1;
}


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

.section2-event {
  position: absolute;
  top: 125px;
  left: 50%;
  width: 763px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 1;
}

.button-section .btn {
  position: absolute;
  bottom: 140px;
  left: 50%;

  transform: translateX(-50%);

  display: block;

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

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

  outline: none;
}

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

  transition: transform 0.2s ease;

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

/* hover */
.button-section .btn:hover img {
  filter: brightness(0.85);
}

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