@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/0129/modal_close_btn.webp");
  --navigation__indicator: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/nav_indicator.webp");
  --navigation__indicator-before: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/nav_dot.webp");
  --navigation__menu: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/nav_menu.webp");
  --navigation__menu--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/nav_menu_hover.webp");
  --main__bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/main_bg.webp");
  --main-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/main_date.webp");
  --main-preRegister-btn: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/main_preorder_btn.webp");
  --main-preRegister-btn-hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/main_preorder_btn_hover.webp");
  --main-subtitle: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/main_tit_sub.webp");
  /* fallback 처리 필요할 수 있음*/
  --main-title: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/title_fallback.webp");
  /* section-01 신서버 사전예약*/
  --section01-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_bg.webp");
  --section01-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_tit_main.webp");
  --section01-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_tit_sub.webp");
  --section01-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_date.webp");
  --section01-reward-item-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_reward_1.webp");
  --section01-reward-item-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_reward_2_1.webp");
  --section01-reward-item-03: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_reward_3.webp");
  --section01-reward-item-04: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_reward_4.webp");
  --section01-reward-item-01--popover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_item_1.webp");
  --section01-reward-item-02--popover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_item_2.webp");
  --section01-preRegister-btn: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_preorder_btn.webp");
  --section01-preRegister-btn--hover: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_preorder_btn_hover.webp");
  --section01-event-caution: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_notice_txt.webp");
  --section01-event-caution--btn: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_notice_btn.webp");
  --section01-privacy-caution--modal: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_pop_agreement.webp");
  --section01-event-caution--modal: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_pop_preorder.webp");
  --section01-preRegister-success--modal: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec1_pop_complete.webp");
  /* section-02 SNS 공유 이벤트 */
  --section02-bg: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_bg.webp");
  --section02-title-main: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_tit_main.webp");
  --section02-title-sub: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_tit_sub.webp");
  --section02-date: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_date.webp");
  --section02-content-01: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_step.webp");
  --section02-content-02: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_reward.webp");
  --section02-sns-share-event--modal: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2026/0129/sec2_pop.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__navigator--aside {
  display: block;
  visibility: visible;
}
#msg-aside__container {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9000;
}
#msg-aside__container .msg__navigator--list {
  position: absolute;
  top: 50%;
  left: 8px;
  z-index: 5;
  background: var(--navigation__menu) no-repeat;
  width: 220px;
  height: 167px;
  margin-top: -82px;
}
#msg-aside__container li {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 32px;
  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;
  margin-top: -2px;
}
#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::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin-left: -27px;
  margin-top: 16px;
  z-index: 1;
  user-select: none;
  pointer-events: none;
  background: var(--navigation__indicator-before) no-repeat 0 bottom;
}
#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 {
  margin-top: 34px;
}
#msg-aside__container li.msg__menu--item-main > a {
  width: 175px;
  margin-left: 69px;
}
#msg-aside__container li.msg__menu--item-main > a::before {
  background: var(--navigation__menu--hover) no-repeat -69px -34px;
}
#msg-aside__container li.msg__menu--item-01 > a {
  width: 120px;
  margin-left: 74px;
}
#msg-aside__container li.msg__menu--item-01 > a::before {
  background: var(--navigation__menu--hover) no-repeat -74px -66px;
}
#msg-aside__container li.msg__menu--item-02 > a {
  width: 120px;
  margin-left: 70px;
}
#msg-aside__container li.msg__menu--item-02 > a::before {
  background: var(--navigation__menu--hover) no-repeat -70px -98px;
}
#msg-aside__container .msg__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 77px;
  height: 47px;
  margin-left: -2px;
  margin-top: 9px;
  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;
}
#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: -139px;
  margin-left: -396px;
  filter: blur(0px) brightness(1);
  width: 814px;
  height: 392px;
  background: var(--main-title) no-repeat center center / cover;
}
#msg-main__container #main .container .title_canvas_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 61px;
  margin-left: 11px;
}
#msg-main__container #main .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 531px;
  height: 32px;
  margin-top: 247px;
  margin-left: -266px;
  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: 418px;
  height: 65px;
  margin-left: -208px;
  margin-top: 169px;
  background: var(--main-date) no-repeat center 0;
}
#msg-main__container #main .container .btn_banner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 312px;
  height: 80px;
  margin-left: -156px;
  margin-top: 308px;
  background: var(--main-preRegister-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: 312px;
  height: 80px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background: var(--main-preRegister-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__1 {
  background: var(--main-wingbanner-item-01) no-repeat center 0;
}
#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-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: 599px;
  height: 202px;
  margin-top: -410px;
  margin-left: -298px;
  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: 506px;
  height: 33px;
  margin-top: -387px;
  margin-left: -253px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-01 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section01-date) no-repeat center 0;
  width: 562px;
  height: 48px;
  margin-top: -253px;
  margin-left: -281px;
  filter: brightness(1);
}
#msg-main__container #section-01 .container .content .reward_list > li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 317px;
  height: 338px;
  margin-top: 7px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-01 .container .content .reward_list-item-01 {
  background: var(--section01-reward-item-01) no-repeat center / cover;
  margin-left: -451px;
  z-index: 4;
}
#msg-main__container #section-01 .container .content .reward_list-item-01 .popover_trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 41px;
  margin-left: 88px;
  margin-top: -53px;
  cursor: pointer;
  z-index: 99;
}
#msg-main__container #section-01 .container .content .reward_list-item-01 .reward_1_detail {
  width: 498px;
  height: 764px;
  margin-top: -160px;
  margin-left: 300px;
  background: var(--section01-reward-item-01--popover) no-repeat center / cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
#msg-main__container #section-01 .container .content .reward_list-item-01 .popover_trigger:hover + .reward_1_detail,
#msg-main__container #section-01 .container .content .reward_list-item-01 .reward_1_detail:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#msg-main__container #section-01 .container .content .reward_list-item-02 {
  background: var(--section01-reward-item-02) no-repeat center / cover;
  margin-left: -150px;
  z-index: 3;
}
#msg-main__container #section-01 .container .content .reward_list-item-02 .popover_trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 41px;
  margin-left: 88px;
  margin-top: -53px;
  cursor: pointer;
  z-index: 99;
}
#msg-main__container #section-01 .container .content .reward_list-item-02 .reward_2_detail {
  width: 498px;
  height: 554px;
  margin-top: -120px;
  margin-left: 305px;
  background: var(--section01-reward-item-02--popover) no-repeat center / cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
#msg-main__container #section-01 .container .content .reward_list-item-02 .popover_trigger:hover + .reward_2_detail,
#msg-main__container #section-01 .container .content .reward_list-item-02 .reward_2_detail:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#msg-main__container #section-01 .container .content .reward_list-item-03 {
  background: var(--section01-reward-item-03) no-repeat center / cover;
  margin-left: 151px;
}
#msg-main__container #section-01 .container .content .reward_list-item-04 {
  background: var(--section01-reward-item-04) no-repeat center / cover;
  margin-left: 452px;
}
#msg-main__container #section-01 .container .content .form__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 225px;
  margin-left: 3px;
  width: 620px;
}
#msg-main__container #section-01 .container .content .form__container .input_number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#msg-main__container #section-01 .container .content .form__container .input_number input[type="number"] {
  flex: 1;
  height: 60px;
  background: #fff;
  padding-left: 26px;
  font-size: 18px;
  border: none;
  outline: none;
  color: #666666;
  text-align: left;
}
#msg-main__container #section-01 .container .content .form__container .input_number input[type="number"]::-webkit-inner-spin-button,
#msg-main__container #section-01 .container .content .form__container .input_number input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#msg-main__container #section-01 .container .content .form__container .input_number button[type="submit"] {
  position: relative;
  width: 247px;
  height: 60px;
  background: var(--section01-preRegister-btn) no-repeat center 0;
}
#msg-main__container #section-01 .container .content .form__container .input_number button[type="submit"]:hover::after {
  opacity: 1;
  visibility: visible;
}
#msg-main__container #section-01 .container .content .form__container .input_number button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 247px;
  height: 60px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background: var(--section01-preRegister-btn--hover) no-repeat center 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#msg-main__container #section-01 .container .content .form__container .privacy {
  margin-top: 8px;
  display: flex;
}
#msg-main__container #section-01 .container .content .form__container .privacy input[type="checkbox"] {
  display: none;
}
#msg-main__container #section-01 .container .content .form__container .privacy input[type="checkbox"]:checked + label {
  background: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2024/0808/cont01_check.png") left bottom no-repeat;
}
#msg-main__container #section-01 .container .content .form__container .privacy label {
  display: inline-block;
  background: url("https://web-files-tokyo-cdn.masangsoft.com/public/DK/event/2024/0808/cont01_checkbox.png") left bottom no-repeat;
  cursor: pointer;
  font-size: 14px;
  color: #a1a1a1;
  padding-left: 28px;
  letter-spacing: -2px;
  height: 27px;
  line-height: 32px;
  user-select: none;
}
#msg-main__container #section-01 .container .content .form__container .privacy_terms {
  margin-left: 5px;
  display: block;
  height: 32px;
  font-size: 12px;
  letter-spacing: -1px;
  color: #ffeec0;
}
#msg-main__container #section-01 .container .content .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section01-event-caution) no-repeat center 0;
  width: 773px;
  height: 98px;
  margin-top: 258px;
  margin-left: -385px;
  pointer-events: none;
}
#msg-main__container #section-01 .container .content button.caution {
  position: absolute;
  background: var(--section01-event-caution--btn) no-repeat center 0;
  top: 50%;
  left: 50%;
  width: 151px;
  height: 56px;
  margin-top: 343px;
  margin-left: -77px;
}
#msg-main__container #section-02 {
  background: var(--section02-bg) no-repeat center / cover;
}
#msg-main__container #section-02 .container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section02-title-main) no-repeat center 0;
  width: 602px;
  height: 203px;
  margin-top: -375px;
  margin-left: -303px;
  filter: blur(0px) brightness(1);
}
#msg-main__container #section-02 .container .subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section02-title-sub) no-repeat center 0;
  width: 650px;
  height: 33px;
  margin-top: -352px;
  margin-left: -325px;
}
#msg-main__container #section-02 .container .date {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section02-date) no-repeat center 0;
  width: 492px;
  height: 48px;
  margin-top: -218px;
  margin-left: -246px;
}
#msg-main__container #section-02 .container .content .content_list .content-item-01 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section02-content-01) no-repeat center 0;
  width: 556px;
  height: 441px;
  margin-top: -134px;
  margin-left: -500px;
}
#msg-main__container #section-02 .container .content .content_list .content-item-01 .image_download {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 175px;
  height: 57px;
  margin-top: -47px;
  margin-left: -185px;
}
#msg-main__container #section-02 .container .content .content_list .content-item-01 .copy_promotion {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 175px;
  height: 57px;
  margin-top: -47px;
  margin-left: 11px;
}
#msg-main__container #section-02 .container .content .content_list .content-item-02 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--section02-content-02) no-repeat center 0;
  width: 534px;
  height: 412px;
  margin-top: -134px;
  margin-left: 18px;
}
#msg-main__container #section-02 .container .content .event_caution {
  position: absolute;
  background: var(--section01-event-caution--btn) no-repeat center 0;
  top: 50%;
  left: 50%;
  width: 151px;
  height: 56px;
  margin-top: 288px;
  margin-left: -77px;
}
#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 #privacy_terms .content {
  position: relative;
  width: 840px;
  height: 650px;
  background: var(--section01-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(--section01-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: 408px;
  background: var(--section01-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 #sns_share_event_notice .content {
  position: relative;
  width: 841px;
  height: 417px;
  background: var(--section02-sns-share-event--modal) no-repeat center 0;
}
#msg-modal__container #sns_share_event_notice .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;
  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);
  }
}