/* ==========================
   기본 설정
========================== */

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;
    height: 10850px;
    transform: translateX(-50%);
    background: url("../images/BG.png") no-repeat center top;
    background-size: 2560px auto;
    pointer-events: none;
    z-index: 0;
}

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

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

/* ==============================
   전체 배경
============================== */

.bg-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2560px;
    height: 10850px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 2560px auto;
    pointer-events: none;
}

/* 뒤 배경 */
.bg-back {
    background-image: url("../images/BG_back.jpg");
    z-index: 0;
}

/* 물결 포함 앞 배경 */
.bg-front {
    pointer-events: none;

    background-image: url("../images/BG_front.png");
    z-index: 2;
}

/* ==============================
   HERO
   화면 노출 영역 : 브라우저 너비
   내부 좌표 기준 : 2560px
============================== */

.hero-section {
    position: relative;

    width: 100%;
    height: 1270px;

    margin: 0;
    overflow: hidden;

    z-index: 1;
}

.hero-stage {
    position: absolute;
    top: 0;
    left: 50%;

    width: 2560px;
    height: 1270px;

    /* 기본 중앙 정렬 */
    transform: translateX(-50%);
}

/* ==============================
   HERO WebM
============================== */

.hero-character {
    position: absolute;

    top: 0px;
    left: 1070px;

    width: 1347px;
    height: 1394px;

    object-fit: contain;
    pointer-events: none;

    z-index: 1;
}


/* ==============================
   HERO 타이틀
   좌측 여백 630px 기준
============================== */

.hero-sub-title {
    position: absolute;

    left: 765px;
    top: 155px;

    width: 577px;
    height: auto;

    z-index: 10;
}

.hero-main-title {
    position: absolute;

    left: 660px;
    top: 210px;

    width: 787px;
    height: auto;

    z-index: 10;
}

.hero-date {
    position: absolute;

    left: 721px;
    top: 397px;

    width: 654px;
    height: auto;

    z-index: 10;
}


/* ==============================
   유튜브 공통
   Frame : 874 x 500
   Video : 854 x 480
============================== */

.video-item {
    position: absolute;

    width: 874px;
    height: 500px;

    overflow: visible;

    z-index: 30;
}

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

    top: 10px;
    left: 10px;

    width: 854px;
    height: 480px;

    border: 0;

    z-index: 5;
}

.video-mask {
    display: none;
}

.video-frame {
    position: absolute;

    top: 0;
    left: 0;

    width: 874px;
    height: 500px;

    pointer-events: none;

    z-index: 1;
}

.video-title {
    position: absolute;

    left: 50%;

    height: auto;

    transform: translateX(-50%);
    pointer-events: none;

    z-index: 8;
}

.play-btn {
    position: absolute;

    top: 250px;
    left: 437px;

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

    border: 0;
    background: none;

    cursor: pointer;

    z-index: 10;
}

.play-btn img {
    display: block;
    width: auto;
    max-width: none;
}


/* ==============================
   HERO 유튜브
============================== */

.hero-video {
    left: 600px;
    top: 530px;
}

.hero-video-title {
    top: -28px;
    width: auto;
}

/* ==============================
   HERO 로컬 영상
============================== */

.hero-video {
    position: absolute;

    left: 600px;
    top: 530px;

    width: 874px;
    height: 500px;

    overflow: visible;
    z-index: 30;
}

/* 실제 영상 854 × 480 */
.hero-local-video {
    position: absolute;

    top: 10px;
    left: 10px;

    width: 854px;
    height: 480px;

    object-fit: cover;
    border: 0;

    z-index: 5;
}

.hero-video-mask {
    position: absolute;

    top: 10px;
    left: 10px;

    width: 854px;
    height: 480px;

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

    z-index: 2;
}

.hero-video-frame {
    position: absolute;

    top: 0;
    left: 0;

    width: 874px;
    height: 500px;

    pointer-events: none;

    z-index: 1;
}

.hero-video-title {
    position: absolute;

    left: 50%;
    top: -28px;

    width: auto;
    height: auto;

    transform: translateX(-50%);
    pointer-events: none;

    z-index: 8;
}

.hero-play-btn {
    position: absolute;

    top: 250px;
    left: 437px;

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

    padding: 0;
    border: 0;
    background: none;

    cursor: pointer;
    z-index: 10;
}

.hero-play-btn img {
    display: block;
    width: auto;
    max-width: none;
}


/* ==============================
   HERO 버튼
============================== */

.hero-btn-wrap {
    position: absolute;

    left: 800px;
    top: 1060px;

    display: flex;
    gap: 35px;

    z-index: 40;
}

.hero-btn {
    display: block;
}

.hero-btn img {
    display: block;
    width: auto;
    max-width: none;
}


/* ==============================
   본문 컨테이너
============================== */

.main-container {
    position: relative;

    width: 1360px;
    margin: 0 auto;

    z-index: 3;
}

.section {
    position: relative;

    width: 1360px;
    margin: 0 auto;
}

.section > img {
    display: block;

    width: 1360px;
    max-width: none;
    margin: 0 auto;
}

/* ===== 섹션1 ===== */
.section01 {
  position: relative;
  height: 1550px;
}

.section01 > img {
  position: absolute;
  top: 80px;
  left: 50%;
  width: 1003px;
  transform: translateX(-50%);
}

/* ===== 섹션2 ===== */
.section02 {
  position: relative;
  height: 550px;
}

.section02 > img {
  position: absolute;
  top: 180px;
  left: 50%;
  width: 1240px;
  transform: translateX(-50%);
}

/* ===== 섹션5 ===== */
.section05 {
  position: relative;
  height: 1255px;
}

.section05 > img {
  position: absolute;
  top: 170px;
  left: 50%;
  width: 903px;
  transform: translateX(-50%);
}


/* ==============================
   SECTION 3 : MP4 슬라이드
============================== */

.section03 {
    position: relative;
    height: 1030px;
}

/* 프레임 기준 박스 */
.slide-box {
    position: absolute;
    top: 20px;
    left: 50%;

    width: 800px;
    height: 800px;

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

/* 프레임 800x800 */
.slide-frame{
    position:absolute;

    left:0px;
    top:0px;

    width:800px;
    height:800px;

    z-index:2;
}

.slide-video-wrap{
    position:absolute;

    left:10px;
    top:10px;

    width:780px;
    height:780px;

    overflow:hidden;

    z-index:3;
}

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

    display: none;

    width: 780px;
    height: 780px;

    object-fit: contain;
    background: #fff;
}

.slide-video.active {
    display: block;
}

/* 좌우 버튼: 프레임 바깥 */
.slide-arrow {
    position: absolute;
    top: 335px;

    padding: 0;
    border: 0;
    background: none;

    cursor: pointer;
    transition: filter .2s ease;

    z-index: 30;
}

.slide-arrow img {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
}

.slide-prev {
    left: 150px;
}

.slide-next {
    right: 150px;
}

.slide-arrow:hover {
    filter: brightness(1.15);
}

/* 하단 탭 */
.slide-tab-wrap {
    position: absolute;
    left: 50%;
    bottom:100px;

    display: flex;
    align-items: center;
    gap: 40px;

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

.slide-tab {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: filter .2s ease;
}

.slide-tab img {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
}

.slide-tab:hover {
    filter: brightness(1.15);
}

.slide-tab.active {
    filter: brightness(1.25);
}

/* ==============================
   SECTION 4 : 유튜브 3개
============================== */
.section04 {
    position: relative;
    height: 1260px;
}

/* 상단 854 × 480 */
.section04-main-video {
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
}

.section04-main-title {
    top: -28px;
    width: auto;
}

/* 하단 영상 2개 정렬 */
.section04-small-row {
    position: absolute;
    top: 800px;
    left: 50%;

    display: flex;
    gap: 40px;

    width: 1360px;

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

/* 작은 영상 전체:
   영상 640 × 360
   프레임 660 × 380
*/
.video-item-640 {
    position: relative;

    width: 660px;
    height: 380px;

    flex: 0 0 660px;
    overflow: visible;
}

/* 실제 유튜브 640 × 360 */
.video-item-640 .player,
.video-item-640 iframe {
    position: absolute;

    top: 10px;
    left: 10px;

    width: 640px;
    height: 360px;

    border: 0;
    z-index: 5;
}

/* 마스크도 영상과 동일 */
.video-item-640 .video-mask {
    position: absolute;

    top: 10px;
    left: 10px;

    width: 640px;
    height: 360px;

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

/* 프레임 660 × 380 */
.video-item-640 .video-frame {
    position: absolute;

    top: 0;
    left: 0;

    width: 660px;
    height: 380px;

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

/* 플레이 버튼 영상 중앙 */
.video-item-640 .play-btn {
    position: absolute;

    top: 190px;
    left: 330px;

    transform: translate(-50%, -50%);
    z-index: 10;
}

/* 작은 영상 타이틀 */
.section04-small-title {
    top: -28px;
    width: auto;
}

.video-mask{
    display:none;
}

/* ==============================
   SECTION 6 : 버튼
============================== */

.section06 {
  position: relative;
  height: 795px;
}

.section06 > img {
  position: absolute;
  top: 170px;
  left: 50%;
  width: 764px;
  transform: translateX(-50%);
}

.store-btn {
    position: absolute;

    left: 50%;
    bottom: 85px;

    transform: translateX(-50%);

    z-index: 10;
}

.store-btn img {
    display: block;

    width: auto;
    max-width: none;
}

/* ==============================
   SECTION 7 : 버튼
============================== */

.section07 {
    position: relative;
    height: 2950px;
}

.section07 > img {
    position: absolute;
    top: 180px;
    left: 50%;
    width: 995px;
    transform: translateX(-50%);
}

.info-btn {
    position: absolute;

    left: 50%;
    top: 2700px; /* section07 이미지 아래 40px 위치 */

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

/* 버튼 공통 */
.hero-btn img,
.store-btn img,
.info-btn img,
.slide-tab img,
.play-btn img {
    display: block;
    transition: filter 0.2s ease;
}

.hero-btn:hover img,
.store-btn:hover img,
.info-btn:hover img,
.slide-tab:hover img,
.play-btn:hover img {
    filter: brightness(1.15);
}

.hero-btn:active img,
.store-btn:active img,
.info-btn:active img,
.slide-tab:active img,
.play-btn:active img {
    filter: brightness(0.95);
}

#ft {
    position: relative;
    z-index: 10;
}