@charset "utf-8";
@font-face {
  font-family: "NEXON Lv2 Gothic";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
:root {
  --dk__logo: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2024/0125/dk_logo.png");
  --btn__home: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2024/0808/home_btn.png");
  --btn__hideToday: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2024/0808/close_btn.png");
  --btn-close: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/modal_close_btn.webp");
  --navigation__indicator: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/nav_indicator.webp");
  --navigation__menu: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/nav_menu_8.webp");
  --navigation__menu--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/nav_menu_hover_8.webp");
  --main-wingbanner-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/banner_wing_2.webp");
  --main__bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/main_bg_1.webp");
  --main-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/main_date_1.webp");
  --main-subtitle--top: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/main_tit_sub_top.webp");
  --main-subtitle--bottom: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/main_tit_sub_bottom.webp");
  --main-arrow: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/main_arrow.webp");
  --main-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/main_tit.webp");
  /* section-01 신서버 사전예약*/
  --section01-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_bg_1.webp");
  --section01-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_tit_main.webp");
  --section01-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_tit_sub.webp");
  --section01-title-logo: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_tit_sub_top.webp");
  --section01-content-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_ct_1_1.webp");
  --section01-content-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_ct_2_1.webp");
  --section01-content-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_ct_3_1.webp");
  --section01-content-item-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_ct_4_1.webp");
  --section01-content-item-05: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_ct_5_1.webp");
  --section01-server-feature-btn: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_btn_1.webp");
  --section01-server-feature-btn--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec1_btn_hover_1.webp");
  /* section-03 서버 로드맵 */
  --section03-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_bg.webp");
  --section03-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_tit_main.webp");
  --section03-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_tit_sub.webp");
  --section03-swiper-01-date-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_1.webp");
  --section03-swiper-01-date-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_2.webp");
  --section03-swiper-01-date-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_2.webp");
  --section03-swiper-01-date-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_3.webp");
  --section03-swiper-01-date-05: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_4.webp");
  --section03-swiper-01-date-06: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_5.webp");
  --section03-swiper-01-date-07: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_date_6.webp");
  --section03-swiper-01-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_1.webp");
  --section03-swiper-01-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_2.webp");
  --section03-swiper-01-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_3.webp");
  --section03-swiper-01-item-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_4.webp");
  --section03-swiper-01-item-05: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_5.webp");
  --section03-swiper-01-item-06: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_6.webp");
  --section03-swiper-01-item-07: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_7.webp");
  --section03-swiper-01-item-08: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_8.webp");
  --section03-swiper-01-item-09: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_9.webp");
  --section03-swiper-01-item-10: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_10.webp");
  --section03-swiper-01-item-11: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_11.webp");
  --section03-swiper-01-item-12: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_12.webp");
  --section03-swiper-01-item-13: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_13.webp");
  --section03-swiper-01-item-14: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_map_14.webp");
  --section03-swiper-bullet-side: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_bullet_side.webp");
  --section03-swiper-bullet-side--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_bullet_side--hover.webp");
  --section03-swiper-bullet-center: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_bullet_center.webp");
  --section03-swiper-bullet-center--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_bullet_center--hover.webp");
  --section03-swiper-arrow-btn: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_arrow.webp");
  --section03-swiper-arrow-btn--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec3_arrow_hover.webp");
  /* section-04 정점의 기록 */
  --section04-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_bg.webp");
  --section04-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_tit_main.webp");
  --section04-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_tit_sub.webp");
  --section04-date-1: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_tit_date_1.webp");
  --section04-date-2: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_tit_date_2_1.webp");
  --section04-content-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_ct_1.webp");
  --section04-content-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_ct_2.webp");
  --section04-content-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec4_ct_3.webp");
  /* section-05 영혼의 각성 */
  --section05-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_bg.webp");
  --section05-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_tit_main.webp");
  --section05-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_tit_sub.webp");
  --section05-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_tit_date.webp");
  --section05-content-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_ct_1.webp");
  --section05-content-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_ct_2.webp");
  --section05-content-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec5_ct_3.webp");
  /* section-06 최고의 길드를 가려라 */
  --section06-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_bg.webp");
  --section06-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_tit_main.webp");
  --section06-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_tit_sub.webp");
  --section06-date-1: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_tit_date_1_2.webp");
  --section06-date-2: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_tit_date_2_2.webp");
  --section06-content-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_ct_1.webp");
  --section06-content-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_ct_2.webp");
  --section06-content-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_ct_3.webp");
  --section06-content-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec6_ct_4.webp");
  /* section-06 모험의 서막1 */
  --section07-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_bg.webp");
  --section07-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_tit_main.webp");
  --section07-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_tit_sub.webp");
  --section07-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_tit_date_1.webp");
  --section07-milestone: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_ct_title.webp");
  --section07-content-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_ct_1.webp");
  --section07-content-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_ct_2.webp");
  --section07-content-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_ct_3.webp");
  --section07-content-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_ct_4.webp");
  --section07-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec7_notice_txt.webp");
  /* section-08 하드코어 서버 오픈 기념 패키지 (탭 2개) */
  --section08-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_bg.webp");
  --section08-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_tit.webp");
  /* 탭 - 두 이미지 모두 551x277 안에 탭 2개가 나란히 들어있다.
     normal 은 통째로 배경에 깔고, hover(활성) 는 탭 폭(275px)만큼 X 오프셋으로 잘라 쓴다. */
  --section08-swiper-tab: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_tab_normal.webp");
  --section08-swiper-tab--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_tab_hover.webp");
  /* 안내 문구 - 두 슬라이드 공용 */
  --section08-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_notice_txt.webp");
  /* slide-01 [시즌] 기본 패키지 - 아이템 아이콘 3개 */
  --section08-swiper-slide-01-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_tit_1.webp");
  --section08-swiper-slide-01-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_ct_1.webp");
  --section08-swiper-slide-01-item--02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_ct_2.webp");
  --section08-swiper-slide-01-item--03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_ct_3.webp");
  --section08-swiper-slide-01-btn--detail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_btn_1.webp");
  --section08-swiper-slide-01-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_btn_2_1.webp");
  --section08-swiper-slide-01-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_pop.webp");
  --section08-package-01-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package1_notice_txt.webp");
  /* slide-02 DK 편의 패키지 - 아이템 아이콘 5개 */
  --section08-swiper-slide-02-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_tit_1.webp");
  --section08-swiper-slide-02-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_ct_1.webp");
  --section08-swiper-slide-02-item--02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_ct_2.webp");
  --section08-swiper-slide-02-item--03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_ct_3.webp");
  --section08-swiper-slide-02-item--04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_ct_4.webp");
  --section08-swiper-slide-02-item--05: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_ct_5.webp");
  --section08-swiper-slide-02-btn--detail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_btn_1.webp");
  --section08-swiper-slide-02-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_btn_2_1.webp");
  --section08-swiper-slide-02-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_pop.webp");
  --section08-package-02-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0730/sec8_package2_notice_txt.webp");
}
body {
  font-size: 0;
  background-color: black;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
body a {
  cursor: pointer;
}
body button {
  cursor: pointer;
  padding: 0;
  border: none;
  font-size: 0;
  color: inherit;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
body h2 {
  font-size: 0;
}
.msg-wrapper {
  display: none;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  z-index: 9100;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
}
header .top_in {
  height: 100%;
  margin: 0 3%;
  position: relative;
}
header .top_in .dk_logo {
  position: absolute;
  top: 15px;
  display: block;
  background: var(--dk__logo) no-repeat center 0;
  background-size: cover;
  width: 170px;
  height: 35px;
}
header .top_in .btn_home {
  position: absolute;
  top: 15px;
  right: 180px;
  width: 27px;
  height: 25px;
  background: var(--btn__home) no-repeat center 0;
}
header .top_in .btn_close {
  position: absolute;
  top: 10px;
  right: 0;
  display: block;
  width: 163px;
  height: 38px;
  background: var(--btn__hideToday) no-repeat center 0;
}
header .top_in .msg-navigator__toggle {
  display: none;
  position: absolute;
  cursor: pointer;
}
.msg__navigator--aside {
  display: block;
  visibility: visible;
}
#msg-aside__container {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9000;
  /* 서브메뉴 ul 은 브라우저 기본 padding/margin 을 그대로 두면 하위 li 의
     offsetTop 이 그룹 헤더와 다른 기준으로 잡혀 인디케이터가 그룹 안에서
     흔들린다. 레이아웃상 투명한 래퍼가 되도록 초기화한다. */
}
#msg-aside__container .msg__navigator--list {
  position: absolute;
  top: 50%;
  z-index: 5;
  background: var(--navigation__menu) no-repeat;
  width: 220px;
  height: 470px;
  margin-top: -216px;
  margin-left: -13px;
  padding-top: 65px;
}
#msg-aside__container .sub__menu-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
#msg-aside__container li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 31px;
  text-indent: -8000px;
  /* nav_menu_4 스프라이트(227x500) 행 매핑.
       li 순서가 아닌 실제 문구 기준으로 오프셋을 맞춤 */
  /* 하드코어 서버 특징 */
  /* 하드코어 로드맵 */
  /* 도전 이벤트 */
  /* 정점의 기록 1 */
  /* 영혼의 각성 */
  /* 최고의 길드를 가려라 */
  /* 성장 이벤트 */
  /* 모험의 서막1 */
  /* 오픈 기념 패키지(신규 패키지) */
  /* CREATORS */
}
#msg-aside__container li a {
  display: block;
  position: relative;
  box-sizing: content-box;
  width: 227px;
  height: 100%;
}
#msg-aside__container li.msg__menu {
  position: relative;
  box-sizing: border-box;
}
#msg-aside__container li.msg__menu {
  position: relative;
  z-index: 1;
}
#msg-aside__container li.msg__menu > a::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s;
}
#msg-aside__container li.msg__menu > a.active::before,
#msg-aside__container li.msg__menu > a:hover::before {
  opacity: 1;
}
#msg-aside__container li.msg__menu > a.active,
#msg-aside__container li.msg__menu > a:hover {
  background: none;
  /* 기존 배경 제거, ::before로 대체 */
}
#msg-aside__container li.msg__menu--item-main > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -65px;
}
#msg-aside__container li.msg__menu--item-01 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -96px;
}
#msg-aside__container li.msg__menu--item-03 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -127px;
}
#msg-aside__container li.msg__menu--item-04 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -158px;
}
#msg-aside__container li.msg__menu--item-05 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -189px;
}
#msg-aside__container li.msg__menu--item-06 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -220px;
}
#msg-aside__container li.msg__menu--item-07 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -251px;
}
#msg-aside__container li.msg__menu--item-08 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -282px;
}
#msg-aside__container li.msg__menu--item-09 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -313px;
}
#msg-aside__container li.msg__menu--item-10 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -344px;
}
#msg-aside__container li.msg__menu--item-12 {
  margin-top: -1px;
}
#msg-aside__container li.msg__menu--item-12 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -374px;
}
#msg-aside__container .msg__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 77px;
  height: 15px;
  margin-top: 22px;
  z-index: -1;
  user-select: none;
  pointer-events: none;
  background: var(--navigation__indicator) no-repeat 0 bottom;
  will-change: transform, opacity, clip-path;
}
.msg-overlay {
  position: absolute;
  inset: 0;
  z-index: 9100;
  background-color: rgba(0, 0, 0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.msg-overlay.active {
  opacity: 0.5;
}
.wing_banner_container .wingbanner-item__1 {
  position: absolute;
  z-index: 999;
  right: 0%;
  top: 50%;
  margin-right: 41px;
  margin-top: -137px;
  width: 251px;
  height: 291px;
  background: var(--main-wingbanner-item-01) no-repeat center 0;
  transition: filter 0.2s ease, opacity 0.3s ease;
}
.wing_banner_container .wingbanner-item__1:hover {
  filter: brightness(1.25);
}
/* 보상 팝오버를 섹션(z-index 쌓임 맥락) 밖 전역으로 빼서 윙배너(999)보다
   앞에 오게 함. 트리거는 #section-02 카드 안에 있고, hover는 :has로 연결 */
.popover_container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 30px;
  /* .reward_list의 margin-top과 동일하게 원점 정렬 */
  width: 0;
  height: 0;
  z-index: 1000;
  pointer-events: none;
  /* 좌표는 리스트 중심(원점) 기준. 원래 카드 기준 위치를 화면 기준으로 환산한 값 */
}
.popover_container .reward_1_detail,
.popover_container .reward_2_detail {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  cursor: pointer;
}
.popover_container .reward_1_detail {
  top: -262px;
  left: -137px;
  width: 540px;
  height: 529px;
  background: var(--section02-reward-item-01--popover) no-repeat center / cover;
}
.popover_container .reward_2_detail {
  top: -262px;
  left: 315px;
  width: 540px;
  height: 650px;
  background: var(--section02-reward-item-02--popover) no-repeat center / cover;
}
/* 트리거 hover 또는 팝오버 자체 hover 시 표시 (순수 CSS, :has 연결)
   트리거는 main 안, 팝오버는 main 밖 → 공통 조상 .msg-wrapper 기준으로 연결 */
.msg-wrapper:has(.reward_list-item-01 .popover_trigger:hover) .popover_container .reward_1_detail,
.popover_container:has(.reward_1_detail:hover) .reward_1_detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.msg-wrapper:has(.reward_list-item-02 .popover_trigger:hover) .popover_container .reward_2_detail,
.popover_container:has(.reward_2_detail:hover) .reward_2_detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#msg-main__container {
  width: 100%;
  height: 100%;
}
#msg-main__container .msg-main__section {
  will-change: transform;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#msg-main__container .container {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}
#msg-main__container .container--mobile {
  display: none;
}
#msg-main__container #main {
  background-image: var(--main__bg);
}
#msg-main__container #main .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -171px;
  margin-left: -408px;
  filter: blur(0px) brightness(1);
  width: 816px;
  height: 232px;
  background: var(--main-title) no-repeat center center / cover;
}
#msg-main__container #main .container .subtitle_top {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 485px;
  height: 53px;
  margin-top: -193px;
  margin-left: -243px;
  filter: blur(0px) brightness(1);
  background: var(--main-subtitle--top) no-repeat center 0;
}
#msg-main__container #main .container .subtitle_bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 628px;
  height: 111px;
  margin-top: 24px;
  margin-left: -301px;
  filter: blur(0px) brightness(1);
  background: var(--main-subtitle--bottom) no-repeat center 0;
}
#msg-main__container #main .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 578px;
  height: 157px;
  margin-left: -289px;
  margin-top: 199px;
  background: var(--main-date) no-repeat center 0;
}
#msg-main__container #main .container .scroll-indicator {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 133px;
  height: 116px;
  margin-left: -66px;
  background: var(--main-arrow) no-repeat center 0;
  animation: bounce 3s infinite;
}
#msg-main__container #section-01 {
  background: var(--section01-bg) no-repeat center / cover;
}
#msg-main__container #section-01 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section01-title-main) no-repeat center 0;
  width: 941px;
  height: 253px;
  margin-top: -355px;
  margin-left: -480px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-01 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section01-title-sub) no-repeat center 0;
  width: 463px;
  height: 88px;
  margin-top: -193px;
  margin-left: -234px;
}
#msg-main__container #section-01 .container .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section01-title-logo) no-repeat center 0;
  width: 463px;
  height: 88px;
  margin-top: -368px;
  margin-left: -234px;
}
#msg-main__container #section-01 .container .content .content_list {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap: 10px;
  margin-top: 61px;
}
#msg-main__container #section-01 .container .content .content_list li {
  width: 211px;
  height: 322px;
}
#msg-main__container #section-01 .container .content .content_list .content-item-01 {
  background: var(--section01-content-item-01) no-repeat center 0;
}
#msg-main__container #section-01 .container .content .content_list .content-item-02 {
  background: var(--section01-content-item-02) no-repeat center 0;
}
#msg-main__container #section-01 .container .content .content_list .content-item-03 {
  background: var(--section01-content-item-03) no-repeat center 0;
}
#msg-main__container #section-01 .container .content .content_list .content-item-04 {
  background: var(--section01-content-item-04) no-repeat center 0;
}
#msg-main__container #section-01 .container .content .content_list .content-item-05 {
  background: var(--section01-content-item-05) no-repeat center 0;
}
#msg-main__container #section-01 .container .server_features {
  position: absolute;
  background: var(--section01-server-feature-btn) no-repeat center 0;
  top: 50%;
  left: 50%;
  width: 374px;
  height: 130px;
  margin-top: 268px;
  margin-left: -175px;
}
#msg-main__container #section-01 .container .server_features::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--section01-server-feature-btn--hover) no-repeat center 0;
  transition: opacity 0.3s ease;
}
#msg-main__container #section-01 .container .server_features:hover::after {
  opacity: 1;
}
#msg-main__container #section-03 {
  background: var(--section03-bg) no-repeat center / cover;
}
#msg-main__container #section-03 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section03-title-main) no-repeat center 0;
  width: 916px;
  height: 222px;
  margin-top: -405px;
  margin-left: -480px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-03 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section03-title-sub) no-repeat center 0;
  width: 520px;
  height: 86px;
  margin-top: -411px;
  margin-left: -259px;
}
#msg-main__container #section-03 .container .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1140px;
  height: 650px;
  margin-top: -200px;
  margin-left: -568px;
}
#msg-main__container #section-03 .container .content .swiper {
  width: 930px;
  height: 100%;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide {
  box-sizing: border-box;
  position: relative;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide div {
  position: absolute;
  top: 50%;
  left: 50%;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-01 {
  background: var(--section03-swiper-01-date-01);
  width: 178px;
  height: 28px;
  margin-top: -318px;
  margin-left: -233px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-02 {
  background: var(--section03-swiper-01-date-02);
  width: 178px;
  height: 28px;
  margin-top: -318px;
  margin-left: 230px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-03 {
  background: var(--section03-swiper-01-date-03);
  width: 178px;
  height: 28px;
  margin-top: -318px;
  margin-left: -401px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-04 {
  background: var(--section03-swiper-01-date-04);
  width: 178px;
  height: 28px;
  margin-top: -318px;
  margin-left: -91px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-05 {
  background: var(--section03-swiper-01-date-05);
  width: 178px;
  height: 28px;
  margin-top: -318px;
  margin-left: 218px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-06 {
  background: var(--section03-swiper-01-date-06);
  width: 178px;
  height: 28px;
  margin-top: -318px;
  margin-left: -365px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_date-07 {
  background: var(--section03-swiper-01-date-07);
  width: 211px;
  height: 28px;
  margin-top: -318px;
  margin-left: 69px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--01 {
  background: var(--section03-swiper-01-item-01);
  width: 266px;
  height: 535px;
  margin-top: -262px;
  margin-left: -455px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--02 {
  background: var(--section03-swiper-01-item-02);
  width: 338px;
  height: 177px;
  margin-top: -261px;
  margin-left: -173px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--03 {
  background: var(--section03-swiper-01-item-03);
  width: 338px;
  height: 177px;
  margin-top: -82px;
  margin-left: -173px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--04 {
  background: var(--section03-swiper-01-item-04);
  width: 338px;
  height: 177px;
  margin-top: 96px;
  margin-left: -173px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--05 {
  background: var(--section03-swiper-01-item-05);
  width: 266px;
  height: 535px;
  margin-top: -261px;
  margin-left: 187px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--06 {
  background: var(--section03-swiper-01-item-06);
  width: 266px;
  height: 535px;
  margin-top: -261px;
  margin-left: -446px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--07 {
  background: var(--section03-swiper-01-item-07);
  width: 302px;
  height: 259px;
  margin-top: -261px;
  margin-left: -153px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--08 {
  background: var(--section03-swiper-01-item-08);
  width: 302px;
  height: 259px;
  margin-top: 15px;
  margin-left: -153px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--09 {
  background: var(--section03-swiper-01-item-09);
  width: 266px;
  height: 535px;
  margin-top: -261px;
  margin-left: 175px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--10 {
  background: var(--section03-swiper-01-item-10);
  width: 338px;
  height: 177px;
  margin-top: -261px;
  margin-left: -445px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--11 {
  background: var(--section03-swiper-01-item-11);
  width: 338px;
  height: 177px;
  margin-top: -82px;
  margin-left: -445px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--12 {
  background: var(--section03-swiper-01-item-12);
  width: 338px;
  height: 177px;
  margin-top: 97px;
  margin-left: -445px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--13 {
  background: var(--section03-swiper-01-item-13);
  width: 535px;
  height: 261px;
  margin-top: -260px;
  margin-left: -93px;
}
#msg-main__container #section-03 .container .content .swiper .swiper-slide .road_map_item--14 {
  background: var(--section03-swiper-01-item-14);
  width: 535px;
  height: 261px;
  margin-top: 11px;
  margin-left: -93px;
}
#msg-main__container #section-03 .container .content .navigation .navi-prev,
#msg-main__container #section-03 .container .content .navigation .navi-next {
  top: 50%;
  left: 50%;
  width: 43px;
  height: 56px;
  margin-top: -20px;
  position: absolute;
  background: var(--section03-swiper-arrow-btn) no-repeat center / cover;
  z-index: 99;
}
#msg-main__container #section-03 .container .content .navigation .navi-prev::after,
#msg-main__container #section-03 .container .content .navigation .navi-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--section03-swiper-arrow-btn--hover) no-repeat center / cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#msg-main__container #section-03 .container .content .navigation .navi-prev:hover::after,
#msg-main__container #section-03 .container .content .navigation .navi-next:hover::after {
  opacity: 1;
}
#msg-main__container #section-03 .container .content .navigation .navi-prev {
  margin-left: -512px;
}
#msg-main__container #section-03 .container .content .navigation .navi-next {
  margin-left: 467px;
  transform: scaleX(-1);
}
#msg-main__container #section-03 .container .content .pagination {
  position: absolute;
  height: 30px;
  top: 50%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 297px;
  gap: 4px;
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index] {
  position: relative;
  width: 82px;
  height: 30px;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none;
  opacity: 1 !important;
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index]::before,
#msg-main__container #section-03 .container .content .pagination button[data-page-index]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--section03-swiper-bullet-center) no-repeat center / cover;
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index]::after {
  background-image: var(--section03-swiper-bullet-center--hover);
  opacity: 0;
  transition: opacity 0.45s ease;
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:first-child::before,
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:first-child::after,
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:last-child::before,
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:last-child::after {
  background-image: var(--section03-swiper-bullet-side);
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:first-child::after,
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:last-child::after {
  background-image: var(--section03-swiper-bullet-side--hover);
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:last-child::before,
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:last-child::after {
  transform: scaleX(-1);
}
#msg-main__container #section-03 .container .content .pagination button[data-page-index]:hover::after,
#msg-main__container #section-03 .container .content .pagination button[data-page-index].swiper-pagination-bullet-active::after {
  opacity: 1;
}
#msg-main__container #section-03 .container .content .show_detail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 237px;
  height: 62px;
  margin-top: 267px;
  margin-left: -127px;
  background: var(--btn__showDetail) no-repeat center / cover;
}
#msg-main__container #section-04 {
  background: var(--section04-bg) no-repeat center / cover;
}
#msg-main__container #section-04 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section04-title-main) no-repeat center 0;
  width: 800px;
  height: 219px;
  margin-top: -390px;
  margin-left: -418px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-04 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section04-title-sub) no-repeat center 0;
  width: 873px;
  height: 86px;
  margin-top: -410px;
  margin-left: -436px;
}
#msg-main__container #section-04 .container .date_1 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section04-date-1) no-repeat center 0;
  width: 597px;
  height: 186px;
  margin-top: -220px;
  margin-left: -298px;
}
#msg-main__container #section-04 .container .date_2 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section04-date-2) no-repeat center 0;
  width: 510px;
  height: 40px;
  margin-top: -157px;
  margin-left: -255px;
}
#msg-main__container #section-04 .container .content .reward_list li {
  position: absolute;
  top: 50%;
  left: 50%;
}
#msg-main__container #section-04 .container .content .reward_list .reward_item--01 {
  z-index: 3;
  width: 350px;
  height: 789px;
  margin-top: -76px;
  margin-left: -500px;
  background: var(--section04-content-02) no-repeat center / cover;
}
#msg-main__container #section-04 .container .content .reward_list .reward_item--02 {
  z-index: 4;
  width: 637px;
  height: 821px;
  margin-top: -92px;
  margin-left: -311px;
  background: var(--section04-content-01) no-repeat center / cover;
}
#msg-main__container #section-04 .container .content .reward_list .reward_item--03 {
  z-index: 3;
  width: 349px;
  height: 785px;
  margin-top: -78px;
  margin-left: 149px;
  background: var(--section04-content-03) no-repeat center / cover;
}
#msg-main__container #section-05 {
  background: var(--section05-bg) no-repeat center / cover;
}
#msg-main__container #section-05 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section05-title-main) no-repeat center 0;
  width: 777px;
  height: 215px;
  margin-top: -375px;
  margin-left: -389px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-05 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section05-title-sub) no-repeat center 0;
  width: 709px;
  height: 86px;
  margin-top: -396px;
  margin-left: -354px;
}
#msg-main__container #section-05 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section05-date) no-repeat center 0;
  width: 597px;
  height: 186px;
  margin-top: -205px;
  margin-left: -298px;
}
#msg-main__container #section-05 .container .content .reward_list li {
  position: absolute;
  top: 50%;
  left: 50%;
}
#msg-main__container #section-05 .container .content .reward_list .reward_item--01 {
  z-index: 3;
  width: 345px;
  height: 537px;
  margin-top: -154px;
  margin-left: -518px;
  background: var(--section05-content-01) no-repeat center / cover;
}
#msg-main__container #section-05 .container .content .reward_list .reward_item--02 {
  z-index: 4;
  width: 345px;
  height: 537px;
  margin-top: -104px;
  margin-left: -174px;
  background: var(--section05-content-02) no-repeat center / cover;
}
#msg-main__container #section-05 .container .content .reward_list .reward_item--03 {
  z-index: 3;
  width: 345px;
  height: 537px;
  margin-top: -154px;
  margin-left: 172px;
  background: var(--section05-content-03) no-repeat center / cover;
}
#msg-main__container #section-06 {
  background: var(--section06-bg) no-repeat center / cover;
}
#msg-main__container #section-06 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-title-main) no-repeat center 0;
  width: 934px;
  height: 212px;
  margin-top: -383px;
  margin-left: -481px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-06 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-title-sub) no-repeat center 0;
  width: 373px;
  height: 87px;
  margin-top: -407px;
  margin-left: -186px;
}
#msg-main__container #section-06 .container .date_1 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-date-1) no-repeat center 0;
  width: 597px;
  height: 186px;
  margin-top: -215px;
  margin-left: -298px;
}
#msg-main__container #section-06 .container .date_2 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-date-2) no-repeat center 0;
  width: 530px;
  height: 40px;
  margin-top: -161px;
  margin-left: -265px;
}
#msg-main__container #section-06 .container .content .reward_list li {
  position: absolute;
  top: 50%;
  left: 50%;
}
#msg-main__container #section-06 .container .content .reward_list .reward_item--01 {
  z-index: 3;
  width: 428px;
  height: 423px;
  margin-top: -109px;
  margin-left: -651px;
  background: var(--section06-content-01) no-repeat center / cover;
}
#msg-main__container #section-06 .container .content .reward_list .reward_item--02 {
  z-index: 4;
  width: 383px;
  height: 370px;
  margin-top: -58px;
  margin-left: -323px;
  background: var(--section06-content-02) no-repeat center / cover;
}
#msg-main__container #section-06 .container .content .reward_list .reward_item--03 {
  z-index: 3;
  width: 383px;
  height: 370px;
  margin-top: -58px;
  margin-left: -24px;
  background: var(--section06-content-03) no-repeat center / cover;
}
#msg-main__container #section-06 .container .content .reward_list .reward_item--04 {
  z-index: 3;
  width: 383px;
  height: 370px;
  margin-top: -58px;
  margin-left: 276px;
  background: var(--section06-content-04) no-repeat center / cover;
}
#msg-main__container #section-07 {
  background: var(--section07-bg) no-repeat center / cover;
}
#msg-main__container #section-07 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section07-title-main) no-repeat center 0;
  width: 808px;
  height: 217px;
  margin-top: -379px;
  margin-left: -395px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-07 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section07-title-sub) no-repeat center 0;
  width: 551px;
  height: 87px;
  margin-top: -403px;
  margin-left: -273px;
}
#msg-main__container #section-07 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section07-date) no-repeat center / cover;
  width: 597px;
  height: 186px;
  margin-top: -211px;
  margin-left: -298px;
}
#msg-main__container #section-07 .container .content .reward_milestone {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 1218px;
  height: 162px;
  margin-top: -142px;
  margin-left: -608px;
  background: var(--section07-milestone) no-repeat center / cover;
}
#msg-main__container #section-07 .container .content .reward_list li {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  margin-top: -61px;
}
#msg-main__container #section-07 .container .content .reward_list .reward_item--01 {
  width: 238px;
  height: 371px;
  margin-left: -505px;
  background: var(--section07-content-01) no-repeat center / cover;
}
#msg-main__container #section-07 .container .content .reward_list .reward_item--02 {
  width: 238px;
  height: 371px;
  margin-left: -247px;
  background: var(--section07-content-02) no-repeat center / cover;
}
#msg-main__container #section-07 .container .content .reward_list .reward_item--03 {
  width: 238px;
  height: 371px;
  margin-left: 12px;
  background: var(--section07-content-03) no-repeat center / cover;
}
#msg-main__container #section-07 .container .content .reward_list .reward_item--04 {
  width: 238px;
  height: 371px;
  margin-left: 271px;
  background: var(--section07-content-04) no-repeat center / cover;
}
#msg-main__container #section-07 .container .caption {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 540px;
  height: 76px;
  margin-top: 345px;
  margin-left: -271px;
  background: var(--section07-caption) no-repeat center / cover;
}
#msg-main__container #section-08 {
  background: var(--section08-bg) no-repeat center / cover;
}
#msg-main__container #section-08 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section08-title-main) no-repeat center 0;
  width: 1111px;
  height: 221px;
  margin-top: -475px;
  margin-left: -563px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-08 .container .content .swiper {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 탭 - 이미지 551px 안에 탭 2개, 하나당 275px.
             normal 을 컨테이너 배경으로 깔고 활성 탭만 hover 이미지에서 잘라 덮는다. */
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper {
  position: absolute;
  overflow: hidden;
  width: 1200px;
  height: 620px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -600px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide {
  /* 아이템 아이콘 - 두 슬라이드 공통 규격 (가로 배치는 각 슬라이드에서) */
  /* slide--01 [시즌] 기본 패키지 - 아이콘 3개 */
  /* slide--02 DK 편의 패키지 - 아이콘 5개 */
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .package_container {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 155px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .package_container .package_item_list--01 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .package_container .package_item_list--01 li {
  width: 227px;
  height: 246px;
  flex: 0 0 auto;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .cta .btn_detail,
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .cta .btn_buy {
  position: absolute;
  width: 282px;
  height: 55px;
  margin-top: 504px;
  transition: filter 0.3s ease;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .cta .btn_detail:hover,
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .cta .btn_buy:hover {
  filter: brightness(1.3);
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .cta .btn_detail {
  margin-left: 328px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide .cta .btn_buy {
  margin-left: 592px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .slide-item-title {
  position: absolute;
  background: var(--section08-swiper-slide-01-title) no-repeat center 0;
  width: 452px;
  height: 145px;
  margin: 0;
  margin-top: -19px;
  margin-left: 373px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_container {
  margin-left: 252px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_container .package_item_list--01 {
  margin-top: 1px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_container .package_item_list--01 li {
  height: 246px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_container .package_item_list--01 .package_item--01 {
  background: var(--section08-swiper-slide-01-item--01) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_container .package_item_list--01 .package_item--02 {
  background: var(--section08-swiper-slide-01-item--02) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_container .package_item_list--01 .package_item--03 {
  background: var(--section08-swiper-slide-01-item--03) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .cta .caution {
  position: absolute;
  background: var(--section08-package-01-caption) no-repeat center 0;
  width: 413px;
  height: 60px;
  margin: 0;
  margin-top: 410px;
  margin-left: 383px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .cta .btn_detail {
  background: var(--section08-swiper-slide-01-btn--detail) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .cta .btn_buy {
  background: var(--section08-swiper-slide-01-btn--buy) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .slide-item-title {
  position: absolute;
  background: var(--section08-swiper-slide-02-title) no-repeat center 0;
  width: 452px;
  height: 145px;
  margin: 0;
  margin-top: -19px;
  margin-left: 373px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_container {
  margin-left: 15px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_container .package_item_list--01 .package_item--01 {
  background: var(--section08-swiper-slide-02-item--01) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_container .package_item_list--01 .package_item--02 {
  background: var(--section08-swiper-slide-02-item--02) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_container .package_item_list--01 .package_item--03 {
  background: var(--section08-swiper-slide-02-item--03) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_container .package_item_list--01 .package_item--04 {
  background: var(--section08-swiper-slide-02-item--04) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_container .package_item_list--01 .package_item--05 {
  background: var(--section08-swiper-slide-02-item--05) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .cta .caution {
  position: absolute;
  background: var(--section08-package-02-caption) no-repeat center 0;
  width: 413px;
  height: 60px;
  margin: 0;
  margin-top: 410px;
  margin-left: 383px;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .cta .btn_detail {
  background: var(--section08-swiper-slide-02-btn--detail) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .cta .btn_buy {
  background: var(--section08-swiper-slide-02-btn--buy) no-repeat center 0;
}
#msg-main__container #section-08 .container .content .swiper .pagination_container {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section08-swiper-tab) no-repeat center 0;
  width: 551px;
  height: 277px;
  margin-top: -290px;
  margin-left: -275px;
  pointer-events: none;
}
#msg-main__container #section-08 .container .content .swiper .pagination_container .pagination {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  z-index: 5;
  pointer-events: auto;
}
#msg-main__container #section-08 .container .content .swiper .pagination_container .pagination .swiper-pagination-bullet {
  width: 275px;
  height: 60px;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
#msg-main__container #section-08 .container .content .swiper .pagination_container .pagination .pagination-item-01.swiper-pagination-bullet-active {
  background: var(--section08-swiper-tab--hover) no-repeat 0 0;
}
#msg-main__container #section-08 .container .content .swiper .pagination_container .pagination .pagination-item-02.swiper-pagination-bullet-active {
  background: var(--section08-swiper-tab--hover) no-repeat -275px 0;
}
#msg-main__container .prev {
  z-index: 3;
  transform: translate3d(0, -50%, 0);
}
#msg-main__container .active {
  z-index: 4;
  transform: translate3d(0, 0, 0);
}
#msg-main__container .next {
  z-index: 3;
  transform: translate3d(0, 50%, 0);
}
#msg-main__container .to-prev {
  z-index: 6;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.7s ease;
}
#msg-main__container .to-active {
  z-index: 5;
  transform: translate3d(0, 0%, 0);
  transition: transform 0.7s ease;
}
#msg-main__container .to-next {
  z-index: 6;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.7s ease;
}
#msg-modal__container {
  position: fixed;
  inset: 0;
  left: -500vw;
  opacity: 0;
  height: 0;
  z-index: 9100;
  transition: opacity 0.5s ease, height 0s 0.5s ease;
  /* section-08 패키지 아이템 상세 보기 */
}
#msg-modal__container.active {
  opacity: 1;
  left: 0;
  height: 100%;
  transition: opacity 0.5s ease;
}
#msg-modal__container .msg-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 9100;
  transition: background-color 0.3s ease;
  pointer-events: none;
}
#msg-modal__container .msg-modal__overlay.active {
  background-color: rgba(0, 0, 0, 0.5);
}
#msg-modal__container .msg-modal__content {
  position: absolute;
  z-index: 9101;
  left: -500vw;
  top: -200vh;
  transform: translate(-50%, -50%);
  opacity: 0;
  overflow: visible;
  transition: opacity 0.5s ease, left 0s 0.5s ease;
}
#msg-modal__container .msg-modal__content.active {
  opacity: 1;
  left: 50%;
  top: 50%;
  transition: opacity 0.5s ease;
}
#msg-modal__container #privacy_terms .content {
  position: relative;
  width: 840px;
  height: 650px;
  background: var(--section02-privacy-caution--modal) no-repeat center 0;
}
#msg-modal__container #privacy_terms .msg-modal__btn--close {
  position: absolute;
  top: 37px;
  right: 38px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #pre_order_notice .content {
  position: relative;
  width: 841px;
  height: 753px;
  background: var(--section02-event-caution--modal) no-repeat center 0;
}
#msg-modal__container #pre_order_notice .msg-modal__btn--close {
  position: absolute;
  top: 37px;
  right: 38px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #preorder_complete .content {
  position: relative;
  width: 668px;
  height: 395px;
  background: var(--section02-preRegister-success--modal) no-repeat center 0;
}
#msg-modal__container #preorder_complete .msg-modal__btn--close {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 171px;
  height: 54px;
  margin-left: -85px;
  margin-top: 78px;
}
#msg-modal__container #seasonBasicPackage_composition .content {
  position: relative;
  width: 841px;
  height: 312px;
  background: var(--section08-swiper-slide-01-detail--pop) no-repeat center 0;
}
#msg-modal__container #seasonBasicPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: 37px;
  right: 38px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #dkAmenityPackage_composition .content {
  position: relative;
  width: 841px;
  height: 430px;
  background: var(--section08-swiper-slide-02-detail--pop) no-repeat center 0;
}
#msg-modal__container #dkAmenityPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: 37px;
  right: 38px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-popup__container {
  position: fixed;
  inset: 0;
  left: -500vw;
  z-index: 9200;
  opacity: 0;
  height: 0;
  transition: opacity 0.3s ease, height 0s 0.3s ease;
}
#msg-popup__container.active {
  opacity: 1;
  left: 0;
  height: 100%;
  transition: opacity 0.3s ease;
}
#msg-popup__container .msg-popup__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 9200;
  transition: background-color 0.3s ease;
  pointer-events: none;
}
#msg-popup__container .msg-popup__overlay.active {
  background-color: rgba(0, 0, 0, 0.5);
}
#msg-popup__container .msg-popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9201;
  overflow: hidden;
  width: 564px;
  min-height: 208px;
  box-sizing: border-box;
  padding: 40px 40px 36px;
  background: white;
  font-size: 20px;
  border: 1px solid;
  border-radius: 5px;
  font-family: "NEXON Lv2 Gothic";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
#msg-popup__container .msg-popup__content .message {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
}
#msg-popup__container .msg-popup__content .close {
  position: static;
  margin: 0;
  flex-shrink: 0;
  width: 100px;
  height: 44px;
  font-size: 15px;
  text-align: center;
  line-height: 48px;
  background: #272727;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
}
#msg-popup__container .msg-popup__content .confirm {
  position: absolute;
  bottom: 45px;
  left: 50%;
  margin-left: -140px;
  width: 140px;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  background: #333;
  color: #fff;
  cursor: pointer;
}
#msg-popup__container .msg-popup__content .cancel {
  position: absolute;
  bottom: 45px;
  left: 50%;
  margin-left: 15px;
  width: 140px;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  background: #333;
  color: #fff;
  cursor: pointer;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(18px);
  }
  50% {
    transform: translateY(12px);
  }
  70% {
    transform: translateY(18px);
  }
  100% {
    transform: translateY(0);
  }
}