@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__showDetail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/btn_showDetail.webp");
  --navigation__indicator: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/menu_hover_left_2.webp");
  --navigation__indicator-before: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/menu_hover_left_1.webp");
  --navigation__indicator__right: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/menu_hover_right.webp");
  --btn-close: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec1_close_btn.webp");
  --navigation__menu: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/menu_normal_9.webp");
  --navigation__menu--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/menu_hover_9.webp");
  --main__bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_bg_1.webp");
  --main-wingbanner-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/banner_wing_2.webp");
  --main-wingbanner-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/banner_wing_3.webp");
  --main-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_date.webp");
  --main-date-line: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_date_line.webp");
  --main-gameStart-btn: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_start_btn.webp");
  --main-gameStart-btn-hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_start_btn_hover.webp");
  --main-subtitle: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_tit_sub.webp");
  --main-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_tit_main.webp");
  --main-arrow: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/main_arrow.webp");
  --section12-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec12_bg.webp");
  --section12-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec12_tit_main.webp");
  --section12-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec12_tit_sub.webp");
  --section12-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec12_tit_date.webp");
  --section12-content: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec12_content.webp");
  --section13-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_bg.webp");
  --section13-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_tit_main.webp");
  --section13-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_tit_sub.webp");
  --section13-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_tit_date.webp");
  --section13-content: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_table.webp");
  --section13-reward--item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_box_1.webp");
  --section13-reward--item-01--detail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_box_1_item.webp");
  --section13-reward--item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_box_2.webp");
  --section13-reward--item-02--detail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_box_2_item.webp");
  --section13-reward--item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_box_3.webp");
  --section13-reward--item-03--detail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec13_box_3_item_1.webp");
  --section04-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_bg.webp");
  --section04-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_tit_main.webp");
  --section04-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_tit_sub.webp");
  --section04-line: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_line.webp");
  /* swiper */
  --section04-navi-prev: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_arrow_L.webp");
  --section04-navi-prev-hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_arrow_hover_L.webp");
  --section04-navi-next: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_arrow_R.webp");
  --section04-navi-next-hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_arrow_hover_R.webp");
  --section04-pagi-bullet: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_nav_normal.webp");
  --section04-pagi-bullet-active: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_nav_hover.webp");
  --section04-swiper-01-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map_1.webp");
  --section04-swiper-01-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map_3.webp");
  --section04-swiper-01-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map_3_1.webp");
  --section04-swiper-01-item-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map_4.webp");
  --section04-swiper-01-date-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_month_1.webp");
  --section04-swiper-02-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map2_1_3.webp");
  --section04-swiper-02-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map2_2_2.webp");
  --section04-swiper-02-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map2_4.webp");
  --section04-swiper-02-item-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_map2_5.webp");
  --section04-swiper-02-date-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_month_2.webp");
  --section04-swiper-02-date-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_month_3.webp");
  --section04-swiper-02-date-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec4_month_4.webp");
  --section06-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec6_bg.webp");
  --section06-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_tit_main.webp");
  --section06-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_tit_sub.webp");
  --section06-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_tit_date.webp");
  --section06-reward-list: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_item.webp");
  --section06-ranking-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_ranking_1.webp");
  --section06-ranking-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_ranking_2.webp");
  --section06-ranking-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_ranking_3.webp");
  --section06-event-caution: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec14_notice_txt.webp");
  --section10-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_bg.webp");
  --section10-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_tit_main.webp");
  --section10-swiper-tab: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_tab_normal_2.webp");
  --section10-swiper-tab--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_tab_hover_3.webp");
  --section10-swiper-tab--glow_star: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_tab_glow_1.webp");
  --section10-swiper-tab--glow_bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_tab_glow_2.webp");
  --section10-swiper-btn--show-detail: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_more_btn.webp");
  --section10-swiper-slide-01-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package1_item1.webp");
  --section10-swiper-slide-01-item--02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package1_item2.webp");
  --section10-swiper-slide-01-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package1_tit_1.webp");
  --section10-swiper-slide-01-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package1_txt.webp");
  --section10-swiper-slide-01-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package1_pop_1.webp");
  --section10-swiper-slide-01-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package1_buy_btn_1.webp");
  --section10-swiper-slide-02-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package2_item_1.webp");
  --section10-swiper-slide-02-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package2_tit.webp");
  --section10-swiper-slide-02-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package2_txt_1.webp");
  --section10-swiper-slide-02-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package2_pop_1.webp");
  --section10-swiper-slide-02-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package2_buy_btn.webp");
  --section10-swiper-slide-03-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package3_item_1.webp");
  --section10-swiper-slide-03-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package3_tit.webp");
  --section10-swiper-slide-03-caption: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package3_txt_1.webp");
  --section10-swiper-slide-03-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package3_pop_2.webp");
  --section10-swiper-slide-03-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package3_buy_btn.webp");
  --section10-swiper-slide-04-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package4_item_2.webp");
  --section10-swiper-slide-04-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package4_tit_2.webp");
  --section10-swiper-slide-04-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package4_pop_3.webp");
  --section10-swiper-slide-04-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package4_buy_btn_1.webp");
  --section10-swiper-slide-05-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package5_tit.webp");
  --section10-swiper-slide-05-detail--pop: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package5_pop.webp");
  --section10-swiper-slide-05-item--01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package5_item.webp");
  --section10-swiper-slide-05-btn--buy: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec10_package5_buy_btn.webp");
  --section99-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec5_bg.webp");
  --section99-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2025/0731/sec5_tit.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;
}
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;
}
header .top_in .equalizer_toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 225px;
}
#msg-aside__container {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9000;
}
#msg-aside__container .msg__navigator--list {
  position: relative;
  display: inline-block;
  top: 50%;
  margin-top: -212px;
  margin-left: 32px;
  z-index: 5;
  background: var(--navigation__menu) no-repeat;
  width: 230px;
  height: 455px;
  padding-top: 25px;
}
#msg-aside__container li {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 0;
  margin: 0;
  /* width: 187px; */
  height: 31px;
  text-indent: -8000px;
}
#msg-aside__container li a {
  display: block;
  position: relative;
  box-sizing: content-box;
  width: 220px;
  height: 100%;
}
#msg-aside__container li a::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 48%;
  transform: translateY(-50%) scale(0.2);
  filter: blur(5px) brightness(3);
  right: -48px;
  width: 70px;
  height: 48px;
  opacity: 0;
  background: var(--navigation__indicator__right) no-repeat center;
}
#msg-aside__container li a.right_indicator::after {
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), filter 0.5s ease, background-size 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(-50%) scale(1);
  filter: blur(0px) brightness(1);
  opacity: 1;
}
#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 {
  width: 180px;
}
#msg-aside__container li.msg__menu--item-main > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -25px;
}
#msg-aside__container li.msg__menu--item-01 > a {
  width: 176px;
}
#msg-aside__container li.msg__menu--item-01 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0 -56px;
}
#msg-aside__container li.msg__menu--item-02 > a {
  width: 228px;
}
#msg-aside__container li.msg__menu--item-02 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -87px;
}
#msg-aside__container li.msg__menu--item-03 > a {
  width: 172px;
}
#msg-aside__container li.msg__menu--item-03 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -118px;
}
#msg-aside__container li.msg__menu--item-04 > a {
  width: 142px;
}
#msg-aside__container li.msg__menu--item-04 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -149px;
}
#msg-aside__container li.msg__menu--item-05 > a {
  width: 136px;
}
#msg-aside__container li.msg__menu--item-05 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -180px;
}
#msg-aside__container li.msg__menu--item-06 > a {
  width: 115px;
}
#msg-aside__container li.msg__menu--item-06 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -211px;
}
#msg-aside__container li.msg__menu--item-07 > a {
  width: 172px;
}
#msg-aside__container li.msg__menu--item-07 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -242px;
}
#msg-aside__container li.msg__menu--item-08 > a {
  width: 193px;
}
#msg-aside__container li.msg__menu--item-08 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -273px;
}
#msg-aside__container li.msg__menu--item-09 > a {
  width: 188px;
}
#msg-aside__container li.msg__menu--item-09 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -304px;
}
#msg-aside__container li.msg__menu--item-10 > a {
  width: 146px;
}
#msg-aside__container li.msg__menu--item-10 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -335px;
}
#msg-aside__container li.msg__menu--item-11 > a {
  width: 172px;
}
#msg-aside__container li.msg__menu--item-11 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -366px;
}
#msg-aside__container li.msg__menu--item-12 > a {
  width: 195px;
}
#msg-aside__container li.msg__menu--item-12 > a::before {
  background: var(--navigation__menu--hover) no-repeat 0px -397px;
}
#msg-aside__container .msg__indicator--glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 34px;
  margin-left: -32px;
  margin-top: 15px;
  z-index: -1;
  user-select: none;
  pointer-events: none;
  background: var(--navigation__indicator-before) no-repeat 0 bottom;
}
#msg-aside__container .msg__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 74px;
  margin-left: -27px;
  margin-top: -6px;
  z-index: -1;
  user-select: none;
  pointer-events: none;
  background: var(--navigation__indicator) no-repeat 0 bottom;
  will-change: transform, opacity, clip-path;
  /* &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 48px;
      height: 34px;
      margin-left: -6px;
      margin-top: 22px;
      z-index: -1;
      user-select: none;
      pointer-events: none;
      background: var(--navigation__indicator-before) no-repeat 0 bottom;
    } */
}
.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;
}
#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%;
  width: 1048px;
  height: 320px;
  margin-left: -504px;
  margin-top: -234px;
  filter: blur(0px) brightness(1);
  background: var(--main-title) no-repeat center 0;
}
#msg-main__container #main .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 201px;
  height: 56px;
  margin-top: -202px;
  margin-left: -101px;
  filter: blur(0px) brightness(1);
  background: var(--main-subtitle) no-repeat center 0;
}
#msg-main__container #main .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 444px;
  height: 133px;
  margin-left: -222px;
  margin-top: -8px;
  background: var(--main-date) no-repeat center 0;
}
#msg-main__container #main .container .date_line {
  position: absolute;
  filter: brightness(1);
  top: 50%;
  left: 50%;
  width: 381px;
  height: 76px;
  margin-left: -190px;
  margin-top: -19px;
  background: var(--main-date-line) no-repeat center 0;
}
#msg-main__container #main .container .btn_banner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 294px;
  height: 66px;
  margin-left: -147px;
  margin-top: 152px;
  background: var(--main-gameStart-btn) no-repeat center 0;
}
#msg-main__container #main .container .btn_banner:hover::after {
  opacity: 1;
  visibility: visible;
}
#msg-main__container #main .container .btn_banner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 336px;
  height: 115px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background: var(--main-gameStart-btn-hover) no-repeat center 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}
#msg-main__container #main .container .scroll-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 71px;
  height: 74px;
  margin-left: -35px;
  margin-top: 294px;
  background: var(--main-arrow) no-repeat center 0;
  animation: bounce 3s infinite;
}
#msg-main__container #main .container .wingbanner-container {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
#msg-main__container #main .container .wingbanner-container li {
  width: 241px;
  height: 100px;
  transition: all 0.3s ease;
  cursor: pointer;
}
#msg-main__container #main .container .wingbanner-container li:hover {
  transform: translateX(20px);
}
#msg-main__container #main .container .wingbanner-container li a {
  display: block;
  width: 100%;
  height: 100%;
}
#msg-main__container #main .container .wingbanner-container .wingbanner-item__2 {
  background: var(--main-wingbanner-item-02) no-repeat center 0;
}
#msg-main__container #main .container .wingbanner-container .wingbanner-item__3 {
  background: var(--main-wingbanner-item-03) no-repeat center 0;
}
#msg-main__container #section-12 {
  background: var(--section12-bg) no-repeat center / cover;
}
#msg-main__container #section-12 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section12-title-main) no-repeat center 0;
  width: 708px;
  height: 94px;
  margin-top: -323px;
  margin-left: -365px;
}
#msg-main__container #section-12 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section12-title-sub) no-repeat center 0;
  width: 282px;
  height: 22px;
  margin-top: -338px;
  margin-left: -141px;
}
#msg-main__container #section-12 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section12-date) no-repeat center 0;
  width: 496px;
  height: 77px;
  margin-top: -235px;
  margin-left: -248px;
}
#msg-main__container #section-12 .container .quest_info {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section12-content) no-repeat center 0;
  width: 1075px;
  height: 433px;
  margin-top: -149px;
  margin-left: -535px;
}
#msg-main__container #section-12 .container .show_detail {
  position: absolute;
  background: var(--btn__showDetail) no-repeat center 0;
  top: 50%;
  left: 50%;
  width: 253px;
  height: 60px;
  margin-top: 278px;
  margin-left: -127px;
}
#msg-main__container #section-13 {
  background: var(--section13-bg) no-repeat center / cover;
}
#msg-main__container #section-13 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-title-main) no-repeat center 0;
  width: 969px;
  height: 95px;
  margin-top: -336px;
  margin-left: -488px;
}
#msg-main__container #section-13 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-title-sub) no-repeat center 0;
  width: 364px;
  height: 22px;
  margin-top: -352px;
  margin-left: -182px;
}
#msg-main__container #section-13 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-date) no-repeat center 0;
  width: 496px;
  height: 77px;
  margin-top: -249px;
  margin-left: -248px;
}
#msg-main__container #section-13 .container .dungeon_info {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-content) no-repeat center 0;
  width: 835px;
  height: 159px;
  margin-top: -136px;
  margin-left: -417px;
}
#msg-main__container #section-13 .container .show_detail_btn {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 48px;
  height: 50px;
}
#msg-main__container #section-13 .container .reward_item--01 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-reward--item-01) no-repeat center 0;
  width: 182px;
  height: 183px;
  margin-top: 37px;
  margin-left: -297px;
}
#msg-main__container #section-13 .container .reward_item--02 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-reward--item-02) no-repeat center 0;
  width: 182px;
  height: 183px;
  margin-top: 37px;
  margin-left: -83px;
}
#msg-main__container #section-13 .container .reward_item--03 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section13-reward--item-03) no-repeat center 0;
  width: 182px;
  height: 183px;
  margin-top: 37px;
  margin-left: 131px;
}
#msg-main__container #section-13 .container .detail {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}
#msg-main__container #section-13 .container .detail.active {
  opacity: 1;
}
#msg-main__container #section-13 .container .detail-01 {
  background: var(--section13-reward--item-01--detail) no-repeat center 0;
  width: 540px;
  height: 334px;
  margin-left: -122px;
  margin-top: -75px;
}
#msg-main__container #section-13 .container .detail-02 {
  background: var(--section13-reward--item-02--detail) no-repeat center 0;
  width: 540px;
  height: 334px;
  margin-left: 50px;
  margin-top: -75px;
}
#msg-main__container #section-13 .container .detail-03 {
  background: var(--section13-reward--item-03--detail) no-repeat center 0;
  width: 450px;
  height: 255px;
  margin-left: -198px;
  margin-top: -19px;
}
#msg-main__container #section-13 .container .show_detail {
  position: absolute;
  background: var(--btn__showDetail) no-repeat center 0;
  top: 50%;
  left: 50%;
  width: 253px;
  height: 60px;
  margin-top: 285px;
  margin-left: -127px;
}
#msg-main__container #section-14 {
  background: var(--section06-bg) no-repeat center / cover;
}
#msg-main__container #section-14 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-title-main) no-repeat center 0;
  width: 428px;
  height: 94px;
  margin-top: -372px;
  margin-left: -214px;
}
#msg-main__container #section-14 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-title-sub) no-repeat center 0;
  width: 288px;
  height: 22px;
  margin-top: -388px;
  margin-left: -144px;
}
#msg-main__container #section-14 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-date) no-repeat center 0;
  width: 600px;
  height: 106px;
  margin-top: -285px;
  margin-left: -300px;
}
#msg-main__container #section-14 .container .content .reward_list {
  background: var(--section06-reward-list) no-repeat center 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 723px;
  height: 277px;
  margin-top: -159px;
  margin-left: -361px;
}
#msg-main__container #section-14 .container .content .ranking_list .ranking_info-01 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 13px;
  margin-left: -105px;
  background: var(--section06-ranking-item-01) no-repeat center 0;
  width: 211px;
  height: 223px;
}
#msg-main__container #section-14 .container .content .ranking_list .ranking_info-02 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 71px;
  margin-left: -302px;
  background: var(--section06-ranking-item-02) no-repeat center 0;
  width: 192px;
  height: 203px;
}
#msg-main__container #section-14 .container .content .ranking_list .ranking_info-03 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 71px;
  margin-left: 112px;
  background: var(--section06-ranking-item-03) no-repeat center 0;
  width: 192px;
  height: 203px;
}
#msg-main__container #section-14 .container .content .caution {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section06-event-caution) no-repeat center 0;
  width: 335px;
  height: 75px;
  margin-top: 255px;
  margin-left: -168px;
}
#msg-main__container #section-14 .container .content .show_detail {
  position: absolute;
  background: var(--btn__showDetail) no-repeat center 0;
  top: 50%;
  left: 50%;
  width: 253px;
  height: 60px;
  margin-top: 330px;
  margin-left: -127px;
}
#msg-main__container #section-10 {
  background: var(--section10-bg) no-repeat center / cover;
}
#msg-main__container #section-10 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section10-title-main) no-repeat center 0;
  width: 520px;
  height: 94px;
  margin-top: -416px;
  margin-left: -256px;
}
#msg-main__container #section-10 .container .content .swiper {
  position: absolute;
  width: 100%;
  height: 100%;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper {
  position: absolute;
  overflow: hidden;
  width: 1100px;
  height: 620px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -550px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide .btn_detail {
  width: 232px;
  height: 53px;
  background: var(--section10-swiper-btn--show-detail) no-repeat center 0;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .slide-item-title {
  position: absolute;
  background: var(--section10-swiper-slide-01-title) no-repeat center 0;
  width: 514px;
  height: 105px;
  margin: 0;
  margin-top: 26px;
  margin-left: 293px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_item_list--01 {
  position: absolute;
  background: var(--section10-swiper-slide-01-item--01) no-repeat center 0;
  width: 333px;
  height: 326px;
  margin-top: 150px;
  margin-left: 102px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .package_item_list--02 {
  position: absolute;
  background: var(--section10-swiper-slide-01-item--02) no-repeat center 0;
  width: 544px;
  height: 325px;
  margin-top: 151px;
  margin-left: 454px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .cta .caution {
  position: absolute;
  background: var(--section10-swiper-slide-01-caption) no-repeat center 0;
  width: 385px;
  height: 73px;
  margin-top: 473px;
  margin-left: 356px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .cta .btn_detail {
  position: absolute;
  margin-top: 537px;
  margin-left: 265px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--01 .cta .btn_buy {
  position: absolute;
  background: var(--section10-swiper-slide-01-btn--buy) no-repeat center 0;
  width: 320px;
  height: 72px;
  margin-top: 518px;
  margin-left: 516px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .slide-item-title {
  position: absolute;
  background: var(--section10-swiper-slide-05-title) no-repeat center 0;
  width: 487px;
  height: 105px;
  margin: 0;
  margin-top: 25px;
  margin-left: 306px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .package_item_list--01 {
  position: absolute;
  background: var(--section10-swiper-slide-05-item--01) no-repeat center 0;
  width: 802px;
  height: 396px;
  margin-top: 149px;
  margin-left: 149px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .cta .btn_detail {
  position: absolute;
  margin-top: 409px;
  margin-left: 309px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--02 .cta .btn_buy {
  position: absolute;
  background: var(--section10-swiper-slide-05-btn--buy) no-repeat center 0;
  width: 230px;
  height: 53px;
  margin-top: 409px;
  margin-left: 560px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--03 .slide-item-title {
  position: absolute;
  background: var(--section10-swiper-slide-02-title) no-repeat center 0;
  width: 433px;
  height: 105px;
  margin: 0;
  margin-top: 26px;
  margin-left: 333px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--03 .package_item_list--01 {
  position: absolute;
  background: var(--section10-swiper-slide-02-item--01) no-repeat center 0;
  width: 633px;
  height: 276px;
  margin-top: 165px;
  margin-left: 233px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--03 .cta .btn_detail {
  position: absolute;
  margin-top: 418px;
  margin-left: 309px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--03 .cta .btn_buy {
  position: absolute;
  background: var(--section10-swiper-slide-02-btn--buy) no-repeat center 0;
  width: 230px;
  height: 53px;
  margin-top: 418px;
  margin-left: 560px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--04 .slide-item-title {
  position: absolute;
  background: var(--section10-swiper-slide-03-title) no-repeat center 0;
  width: 449px;
  height: 105px;
  margin: 0;
  margin-top: 26px;
  margin-left: 325px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--04 .package_item_list--01 {
  position: absolute;
  background: var(--section10-swiper-slide-03-item--01) no-repeat center 0;
  width: 563px;
  height: 326px;
  margin-top: 149px;
  margin-left: 267px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--04 .cta .caution {
  position: absolute;
  background: var(--section10-swiper-slide-03-caption) no-repeat center 0;
  width: 341px;
  height: 73px;
  margin-top: 470px;
  margin-left: 378px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--04 .cta .btn_detail {
  position: absolute;
  margin-top: 535px;
  margin-left: 309px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--04 .cta .btn_buy {
  position: absolute;
  background: var(--section10-swiper-slide-03-btn--buy) no-repeat center 0;
  width: 230px;
  height: 53px;
  margin-top: 535px;
  margin-left: 560px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--05 .slide-item-title {
  position: absolute;
  background: var(--section10-swiper-slide-04-title) no-repeat center 0;
  width: 449px;
  height: 105px;
  margin: 0;
  margin-top: 26px;
  margin-left: 325px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--05 .package_item_list--01 {
  position: absolute;
  background: var(--section10-swiper-slide-04-item--01) no-repeat center 0;
  width: 847px;
  height: 276px;
  margin-top: 164px;
  margin-left: 126px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--05 .cta .btn_detail {
  position: absolute;
  margin-top: 418px;
  margin-left: 309px;
}
#msg-main__container #section-10 .container .content .swiper .swiper-wrapper .swiper-slide.slide--05 .cta .btn_buy {
  position: absolute;
  background: var(--section10-swiper-slide-04-btn--buy) no-repeat center 0;
  width: 230px;
  height: 53px;
  margin-top: 418px;
  margin-left: 560px;
}
#msg-main__container #section-10 .container .content .pagination_container {
  background: var(--section10-swiper-tab) no-repeat center 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -286px;
  margin-left: -549px;
  width: 1100px;
  height: 84px;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination {
  position: absolute;
  top: 0px;
  display: flex;
  z-index: 5;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination .swiper-pagination-bullet {
  width: 220px;
  height: 84px;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination .pagination-item-01.swiper-pagination-bullet-active {
  background: var(--section10-swiper-tab--hover) no-repeat center 0;
  background-position-x: 0px;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination .pagination-item-02.swiper-pagination-bullet-active {
  background: var(--section10-swiper-tab--hover) no-repeat center 0;
  background-position-x: -220px;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination .pagination-item-03.swiper-pagination-bullet-active {
  background: var(--section10-swiper-tab--hover) no-repeat center 0;
  background-position-x: -440px;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination .pagination-item-04.swiper-pagination-bullet-active {
  background: var(--section10-swiper-tab--hover) no-repeat center 0;
  background-position-x: -660px;
}
#msg-main__container #section-10 .container .content .pagination_container .pagination .pagination-item-05.swiper-pagination-bullet-active {
  background: var(--section10-swiper-tab--hover) no-repeat center 0;
  background-position-x: -880px;
}
#msg-main__container #section-10 .container .content .pagination_container .glow {
  position: absolute;
  top: 14px;
  left: 0px;
  background: var(--section10-swiper-tab--glow_bg) no-repeat center 0;
  width: 270px;
  height: 84px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  will-change: transform, opacity, clip-path;
}
#msg-main__container #section-10 .container .content .pagination_container .star {
  position: absolute;
  top: -19px;
  left: 0px;
  background: var(--section10-swiper-tab--glow_star) no-repeat center 0;
  width: 58px;
  height: 67px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  scale: 0.5;
  will-change: transform, opacity, clip-path, scale;
}
#msg-main__container #section-11 {
  background-image: var(--section04-bg);
}
#msg-main__container #section-11 .container .title {
  background: var(--section04-title-main) no-repeat center 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 401px;
  height: 94px;
  margin-left: -200px;
  margin-top: -372px;
}
#msg-main__container #section-11 .container .subtitle {
  background: var(--section04-title-sub) no-repeat center 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 426px;
  height: 22px;
  margin-left: -210px;
  margin-top: -254px;
}
#msg-main__container #section-11 .container .line {
  background: var(--section04-line) no-repeat center 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 471px;
  height: 68px;
  margin-left: -235px;
  margin-top: -235px;
}
#msg-main__container #section-11 .container .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1140px;
  height: 580px;
  margin-top: -178px;
  margin-left: -570px;
}
#msg-main__container #section-11 .container .content .swiper {
  height: 100%;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 {
  box-sizing: border-box;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 > div {
  position: absolute;
  top: 50%;
  left: 50%;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 .road_map_date-01 {
  background: var(--section04-swiper-01-date-01);
  width: 159px;
  height: 72px;
  margin-top: -305px;
  margin-left: -80px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 .road_map_item--01 {
  width: 249px;
  height: 503px;
  background: var(--section04-swiper-01-item-01);
  margin-top: -255px;
  margin-left: -508px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 .road_map_item--02 {
  width: 250px;
  height: 477px;
  background: var(--section04-swiper-01-item-02);
  margin-top: -238px;
  margin-left: -253px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 .road_map_item--03 {
  width: 251px;
  height: 477px;
  background: var(--section04-swiper-01-item-03);
  margin-top: -238px;
  margin-left: 2px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--01 .road_map_item--04 {
  width: 249px;
  height: 503px;
  background: var(--section04-swiper-01-item-04);
  margin-top: -255px;
  margin-left: 259px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 {
  box-sizing: border-box;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 > div {
  position: absolute;
  top: 50%;
  left: 50%;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_date-02 {
  background: var(--section04-swiper-02-date-01);
  width: 159px;
  height: 72px;
  margin-top: -305px;
  margin-left: -335px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_date-03 {
  background: var(--section04-swiper-02-date-02);
  width: 159px;
  height: 72px;
  margin-top: -305px;
  margin-left: -80px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_date-04 {
  background: var(--section04-swiper-02-date-03);
  width: 159px;
  height: 72px;
  margin-top: -305px;
  margin-left: 175px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_item--05 {
  width: 249px;
  height: 503px;
  background: var(--section04-swiper-02-item-01);
  margin-top: -255px;
  margin-left: -381px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_item--06 {
  width: 250px;
  height: 246px;
  background: var(--section04-swiper-02-item-02);
  margin-top: 2px;
  margin-left: -382px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_item--07 {
  width: 250px;
  height: 477px;
  background: var(--section04-swiper-02-item-03);
  margin-top: -238px;
  margin-left: -126px;
}
#msg-main__container #section-11 .container .content .swiper .swiper-slide.slide--02 .road_map_item--08 {
  width: 250px;
  height: 503px;
  background: var(--section04-swiper-02-item-04);
  margin-top: -255px;
  margin-left: 129px;
}
#msg-main__container #section-11 .container .content .swiper .navigation .navi-prev {
  position: absolute;
  top: 50%;
  left: -18px;
  width: 75px;
  height: 75px;
  background: var(--section04-navi-prev) no-repeat center 0;
  margin-top: -54px;
  z-index: 999;
}
#msg-main__container #section-11 .container .content .swiper .navigation .navi-prev:hover {
  background: var(--section04-navi-prev-hover);
}
#msg-main__container #section-11 .container .content .swiper .navigation .navi-next {
  position: absolute;
  top: 50%;
  right: -18px;
  width: 75px;
  height: 75px;
  margin-top: -54px;
  background: var(--section04-navi-next) no-repeat center 0;
  z-index: 999;
}
#msg-main__container #section-11 .container .content .swiper .navigation .navi-next:hover {
  background: var(--section04-navi-next-hover);
}
#msg-main__container #section-11 .container .content .swiper .pagination {
  position: absolute;
  height: 30px;
  top: 50%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 250px;
}
#msg-main__container #section-11 .container .content .swiper .pagination button[data-page-index="0"] {
  width: 104px;
  height: 10px;
  background: var(--section04-pagi-bullet) no-repeat center / contain;
}
#msg-main__container #section-11 .container .content .swiper .pagination button[data-page-index="0"].swiper-pagination-bullet-active {
  transform: scaleX(-1);
  background: var(--section04-pagi-bullet-active) no-repeat center / contain;
}
#msg-main__container #section-11 .container .content .swiper .pagination button[data-page-index="1"] {
  width: 104px;
  height: 10px;
  transform: scaleX(-1);
  background: var(--section04-pagi-bullet) no-repeat center / contain;
}
#msg-main__container #section-11 .container .content .swiper .pagination button[data-page-index="1"].swiper-pagination-bullet-active {
  transform: scaleX(1);
  background: var(--section04-pagi-bullet-active) no-repeat center / contain;
}
#msg-main__container #section-99 {
  background-image: var(--section99-bg);
}
#msg-main__container #section-99 .container .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 542px;
  height: 187px;
  margin-left: -271px;
  margin-top: -120px;
  background: var(--section99-title-main) no-repeat center center;
}
#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;
}
#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 #dkSeasonPassPackage_composition .content {
  position: relative;
  width: 1100px;
  height: 560px;
  background: var(--section10-swiper-slide-01-detail--pop) no-repeat center 0;
}
#msg-modal__container #dkSeasonPassPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #dkMonthlyPackage_composition .content {
  position: relative;
  width: 900px;
  height: 560px;
  background: var(--section10-swiper-slide-05-detail--pop) no-repeat center 0;
}
#msg-modal__container #dkMonthlyPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #dkBasicPackage_composition .content {
  position: relative;
  width: 892px;
  height: 312px;
  background: var(--section10-swiper-slide-02-detail--pop) no-repeat center 0;
}
#msg-modal__container #dkBasicPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #dkAmenityPackage_composition .content {
  position: relative;
  width: 892px;
  height: 446px;
  background: var(--section10-swiper-slide-03-detail--pop) no-repeat center 0;
}
#msg-modal__container #dkAmenityPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 38px;
  height: 37px;
  background: var(--btn-close) no-repeat center 0;
}
#msg-modal__container #dkBoostingPackage_composition .content {
  position: relative;
  width: 776px;
  height: 486px;
  background: var(--section10-swiper-slide-04-detail--pop) no-repeat center 0;
}
#msg-modal__container #dkBoostingPackage_composition .msg-modal__btn--close {
  position: absolute;
  top: -45px;
  right: -45px;
  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;
  height: 208px;
  background: white;
  font-size: 20px;
  border: 1px solid;
  border-radius: 5px;
  font-family: "NEXON Lv2 Gothic";
  display: flex;
  justify-content: center;
  align-items: center;
}
#msg-popup__container .msg-popup__content .message {
  margin-top: -46px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
}
#msg-popup__container .msg-popup__content .close {
  position: absolute;
  bottom: 45px;
  left: 50%;
  margin-left: -50px;
  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);
  }
}