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

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

/* body만 스크롤 */
body {
  min-width: 1400px;
  margin: 0;
  background: #00060e;
  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: 8000px;
  background-image: url("../images/260617_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;
}

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

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

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

.main-title {
  position: absolute;
  top: 180px;
  left: 110px;
  width: 525px;
  opacity: 0;
  z-index: 5;

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

.sub-title {
  position: absolute;
  top: 210px;
  left: 170px;
  width: 470px;
  opacity: 0;
  z-index: 6;

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

.update {
  position: absolute;
  top: 468px;
  left: 220px;
  width: 306px;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 7;

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

/* ===== 영상 섹션 ===== */
/* ========================= */
/* 공통 영상 */
/* ========================= */

.video-item {
    position: absolute;
    left: 50%;

    width: 856px;
    height: 482px;

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

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

    width: 882px;
    height: 536px;

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

.video-item .player,
.video-item iframe {
    position: absolute;

    top: 41px;
    left: 15px;

    width: 854px;
    height: 480px;

    z-index: 1;
}

.video-mask {
    position: absolute;

    top: 41px;
    left: 15px;

    width: 854px;
    height: 480px;

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

    z-index: 2;
}

.play-btn {
    position: absolute;

    left: 50%;
    top: 280px;

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

    border: 0;
    background: none;

    z-index: 10;
}

/* ========================= */
/* 영상1 */
/* ========================= */

.video-section-1 {
    height: 740px;
}

.video-section-1 .video-item {
    top: 0;
}

/* ========================= */
/* 영상2 */
/* ========================= */

.video-section-2 {
    height: 1000px;
}

.video-section-2 .video-title {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);
}

/* 타이틀 높이만큼 아래로 */
.video-section-2 .video-item {
    top: 255px;
}

/* ===== 버튼 ===== */
.event-section {
    position: relative;
    width: 1360px;
    margin: 0 auto 210px;
    text-align: center;
}

.event-img {
    display: block;
    margin: 0 auto;
    max-width: none;
}

.event-btn {
    display: block;
    margin: 45px auto 0;

    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.event-btn img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    transition: transform .2s ease;
}

.event-btn:hover img {
    transform: scale(1.05);
}

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

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

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

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

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