@charset "UTF-8";
:root {
  --pc-top-height: 165px;
  --pc-category-height: 237px;
  --pc-footer-height: 246px;
  --mobile-top-height: 55px;
  --mobile-category-height: 154px;
  --mobile-footer-height: 238px ;
}

html,
body,
div,
p,
img,
span,
a,
em,
strong,
pre,
h1,
h2,
h3,
h4,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
tbody,
thead,
tfoot,
tr,
th,
td,
form,
fieldset,
legend,
caption,
input,
textarea,
button,
select,
video,
iframe,
header,
article,
aside,
details,
figcaption,
figure,
footer,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main,
header,
article,
aside,
details,
figcaption,
figure,
footer,
hgroup,
menu,
nav,
section,
a,
span {
  display: block;
}

html {
  font-size: 16px;
  font-family: "Pretendard";
  -webkit-text-size-adjust: none;
}

body {
  font-weight: 400;
  word-break: break-all;
  letter-spacing: -0.5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  word-break: keep-all;
  letter-spacing: 0px;
}

body,
html {
  font-synthesis: none;
}

h1,
h2 {
  letter-spacing: -1px;
}

input,
textarea,
button,
select {
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

select {
  border: 0;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

textarea {
  border: none;
  resize: none;
}

img,
button {
  border: 0;
  background: none;
}

fieldset {
  border: 0;
  background: none;
  display: flex;
  min-width: 0;           /* 解決寬度 RWD Bug */
  min-height: 0;          /* 關鍵：解決高度 Bug，允許高度被內部元件撐開或收縮 */
  height: auto;           /* 確保它是自動適應內容高度，或設為 100% (如果父層有固定高) */
  box-sizing: border-box;
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  cursor: pointer;
}

input {
  border-radius: 0;
}

input[type=text],
input[type=tel] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input,
button,
textarea {
  border: 0 none;
  outline: 0;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a,
img {
  vertical-align: top;
}

em {
  font-style: normal;
}

.blind,
caption {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
  font-size: 0;
}

.hidden {
  visibility: hidden;
}

.fp-watermark {
  display: none;
}

.blind,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@font-face {
  font-family: "MMinn";
  src: url("https://lwi.nexon.com/m_mabinogim/fonts/MMinn/MM_inn.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
/*!
 * fullPage 4.0.11
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2021 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
html.fp-enabled,
.fp-enabled body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fp-section {
  position: relative;
  /* Safari<=5 Android<=3 */
  /* <=28 */
  box-sizing: border-box;
  height: 100%;
  display: block;
}

.fp-slide {
  float: left;
}

.fp-slide,
.fp-slidesContainer {
  height: 100%;
  display: block;
}

.fp-slides {
  z-index: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  /* Safari<=6 Android<=4.3 */
  transition: all 0.3s ease-out;
}

.fp-table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* .fp-table::before , 
.fp-table::after {
      content:'';
      flex:1;
} */
.fp-slidesContainer {
  float: left;
  position: relative;
}

.fp-controlArrow {
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  margin-top: -38px;
  transform: translate3d(0, 0, 0);
}

.fp-prev {
  left: 15px;
}

.fp-next {
  right: 15px;
}

.fp-arrow {
  width: 0;
  height: 0;
  border-style: solid;
}

.fp-arrow.fp-prev {
  border-width: 38.5px 34px 38.5px 0;
  border-color: transparent #fff transparent transparent;
}

.fp-arrow.fp-next {
  border-width: 38.5px 0 38.5px 34px;
  border-color: transparent transparent transparent #fff;
}

/* .fp-scrollable {
    overflow: hidden;
    position: relative;
} */
/* .fp-scroller{
    overflow: hidden;
} */
/* .iScrollIndicator{
    border: 0 !important;
} */
.fp-notransition {
  transition: none !important;
}

#fp-nav {
  position: fixed;
  z-index: 100;
  top: 50%;
  opacity: 1;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translate3d(0, -50%, 0);
}

#fp-nav.fp-right {
  right: 17px;
}

#fp-nav.fp-left {
  left: 17px;
}

.fp-slidesNav {
  position: absolute;
  z-index: 4;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  left: 0 !important;
  right: 0;
  margin: 0 auto !important;
}

.fp-slidesNav.fp-bottom {
  bottom: 17px;
}

.fp-slidesNav.fp-top {
  top: 17px;
}

#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav ul li,
.fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

.fp-slidesNav ul li {
  display: inline-block;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #333;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}

#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav ul li .fp-tooltip.fp-right {
  right: 20px;
}

#fp-nav ul li .fp-tooltip.fp-left {
  left: 20px;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide {
  height: auto !important;
}

.fp-responsive .fp-is-overflow.fp-section {
  height: auto !important;
}

/* Used with autoScrolling: false */
.fp-scrollable.fp-responsive .fp-is-overflow.fp-section,
.fp-scrollable .fp-section,
.fp-scrollable .fp-slide {
  /* Fallback for browsers that do not support Custom Properties */
  height: 100vh;
  min-height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Disabling vertical centering on scrollable elements */
.fp-overflow {
  justify-content: flex-start;
  max-height: 100%;
}

.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
.fp-is-overflow .fp-overflow.fp-auto-height,
.fp-is-overflow > .fp-overflow {
  overflow-y: auto;
}

.fp-overflow {
  outline: none;
}

.fp-overflow.fp-table {
  display: block;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide {
  height: auto !important;
}

/*Only display content to screen readers*/
.fp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
.fp-scroll-mac .fp-overflow::-webkit-scrollbar {
  background-color: transparent;
  width: 9px;
}

.fp-scroll-mac .fp-overflow::-webkit-scrollbar-track {
  background-color: transparent;
}

.fp-scroll-mac .fp-overflow::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  border: 4px solid transparent;
}

.fp-warning,
.fp-watermark {
  z-index: 9999999;
  position: absolute;
  bottom: 0;
}

.fp-warning,
.fp-watermark a {
  text-decoration: none;
  color: #000;
  background: rgba(255, 255, 255, 0.6);
  padding: 5px 8px;
  font-size: 14px;
  font-family: arial;
  color: black;
  display: inline-block;
  border-radius: 3px;
  margin: 12px;
}

.fp-noscroll .fp-overflow {
  overflow: hidden;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(5%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes fadeInLeft {
  0% {
    transform: translate(30%, 10%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes fadeInLeft2 {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes fadeInLeft3 {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeInRight3 {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeToRight {
  0% {
    transform: translateX(-3%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeToLona {
  0% {
    transform: translateX(-700px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(-640px);
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeUpSm {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeUpSm2 {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeDown {
  0% {
    transform: translateY(-5%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeDownBig {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeInRightToBottom {
  0% {
    transform: translate(20%, 20%);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes topMove {
  0% {
    transform: translateY(20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes gauge {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes scrollButton {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  40% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes dongdong {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes fadeInScale {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes contentUp {
  0% {
    opacity: 1;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes twinkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes disappear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes card {
  0% {
    opacity: 1;
    transform: rotateY(270deg) translateY(140px);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) translateY(0px);
  }
}
@keyframes fadeUpMargin {
  0% {
    opacity: 1;
    margin-left: 600px;
  }
  100% {
    opacity: 1;
    margin-left: 500px;
  }
}
@keyframes drone {
  0% {
    transform: translate(-10px, 0px);
  }
  25% {
    transform: translate(0px, -20px);
  }
  50% {
    transform: translate(10px, 0px);
  }
  75% {
    transform: translate(0px, 20px);
  }
  100% {
    transform: translate(-10px, 0px);
  }
}
@keyframes hideButton {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 1;
    display: none;
  }
}
@keyframes news {
  0% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes newsContent {
  0% {
    opacity: 1;
    transform: translate(15px, -15px) rotate(-2deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
}
@keyframes up {
  0% {
    opacity: 1;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes bubble-on {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes card-left-1 {
  0% {
    transform: translate(400px, 400px) rotateY(540deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 0px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes card-left-1-after {
  0% {
    transform: translate(0px, 0px) rotateY(0deg);
  }
  100% {
    transform: translate(20px, 20px) rotateY(10deg);
  }
}
@keyframes card-left-2 {
  0% {
    transform: translate(300px, 300px) rotateY(540deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 0px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes card-left-3 {
  0% {
    transform: translate(200px, 200px) rotateY(540deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 0px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes card-right {
  0% {
    transform: translate(-200px, 200px) rotateY(540deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 0px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes card-center {
  0% {
    transform: translateY(200px) rotateY(360deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes card-after {
  0% {
    transform: translateX(0px) translateY(0px) rotateZ(0deg) rotateY(0deg);
  }
  70% {
    transform: translateX(5px) translateY(5px) rotateZ(1deg) rotateY(5deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotateZ(0deg) rotateY(0deg);
  }
}
@keyframes card-after-right {
  0% {
    transform: translateX(0px) translateY(0px) rotateZ(0deg) rotateY(0deg);
  }
  70% {
    transform: translateX(-5px) translateY(5px) rotateZ(-1deg) rotateY(5deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotateZ(0deg) rotateY(0deg);
  }
}
@keyframes menu-bg {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes rt {
  0% {
    transform: scale(0.8) rotate(-15deg);
  }
  100% {
    transform: scale(1) rotate(15deg);
  }
}
@keyframes rt2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@keyframes rt3 {
  0% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes friendContentLeft {
  0% {
    opacity: 1;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes friendPhoto {
  0% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes friendEllipse {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes event2Paper {
  0% {
    opacity: 1;
    transform: translateY(-30px) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes draw {
  0% {
    opacity: 1;
    clip-path: inset(0% 100% 0% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
@keyframes boom {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes leftBar {
  0% {
    transform: translateX(93px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes rightBar {
  0% {
    transform: translateX(-93px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes bar {
  0% {
    height: 5px;
  }
  50% {
    height: 36px;
  }
  100% {
    height: 5px;
  }
}
@keyframes dimOpacity {
  0% {
    opacity: 1;
    background-color: #000;
  }
  100% {
    background-color: #000;
    opacity: 0.1;
  }
}
@keyframes loading1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loading3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loading2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.modal_open {
  filter: blur(10px);
  transition: 0s all;
}

.modal.alert_modal {
  background: rgba(0, 0, 0, 0.5411764706);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 320px;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  display: none;
}
.modal .modal_inner {
  width: 100%;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal .modal_inner .modal_header {
  padding: 10px 15px;
  width: 100%;
  max-width: 800px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
}
.modal .modal_inner .modal_header .logo {
  display: block;
  width: 84px;
  height: 24px;
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/common/mmlogo.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.modal .modal_inner .modal_header .logo img {
  display: none;
}
.modal .modal_inner .modal_header .close_button {
  display: block;
  min-width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath fill='%23838383' fill-rule='evenodd' d='M17.497 15.07a1.717 1.717 0 0 1-2.428 2.427L9 11.428l-6.069 6.07a1.717 1.717 0 0 1-2.428-2.429L6.573 9 .502 2.93A1.717 1.717 0 0 1 2.93.504L9 6.573 15.07.502a1.717 1.717 0 0 1 2.428 2.428L11.428 9l6.07 6.068Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: cover;
  opacity: 1;
}
.modal .modal_inner .modal_body {
  width: 100%;
  max-width: 800px;
  padding: 30px;
  position: relative;
  background-color: #f6f4f4;
}
@media (max-width: 991px) {
  .modal .modal_inner .modal_body {
    padding: 20px;
  }
}
.modal .modal_inner .modal_body h1 {
  color: #fff;
  font-size: 25px;
}
.modal .modal_inner .button_area {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  background: #f6f4f4;
  padding-bottom: 30px;
  border-radius: 0 0 16px 16px;
}
.modal .modal_inner .button_area button {
  font-family: "MMinn";
  padding: 10px 50px;
  white-space: nowrap;
  text-align: center;
  width: 50%;
  max-width: 132px;
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  margin-right: 10px;
  background: #00b670;
}
@media (max-width: 991px) {
  .modal .modal_inner .button_area button {
    padding: 10px 0;
    font-size: min(18px, 3.5vw);
  }
}
.modal .modal_inner .button_area button:last-child {
  margin-right: 0;
}
.modal .modal_inner .button_area button.cancel {
  background: #aaa;
}
.modal .disable {
  opacity: 0.3;
  pointer-events: none;
}

.modal_notice .modal_inner {
  max-width: 600px;
}
.modal_notice .title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}
.modal_notice .content {
  padding: 10px 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .modal_notice .content {
    padding: 0;
  }
}
.modal_notice ul.list {
  list-style: disc;
  padding-left: 20px;
  width: auto;
}
.modal_notice ul.list li {
  font-size: 13px;
  line-height: 1.5rem;
  padding-left: 0;
  font-weight: 200;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.modal_table .modal_inner {
  max-width: 600px;
}
.modal_table .title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}
.modal_table .content {
  padding: 10px 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .modal_table .content {
    padding: 0;
  }
}
.modal_table .content table {
  width: 100%;
  font-size: 13px;
}
.modal_table .content table th {
  padding: 10px;
  background: #e4e4e4;
  text-align: center;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.modal_table .content table td {
  padding: 10px;
  background: #fff;
  text-align: center;
  letter-spacing: 1px;
  border-bottom: 1px dashed #333;
}

.image_modal .modal_inner {
  max-width: 350px;
  position: relative;
  border-radius: 30px;
}
.image_modal .modal_inner .modal_header {
  position: absolute;
  z-index: 99;
  background: none;
}
.image_modal .modal_inner .modal_header .logo {
  opacity: 0;
}
.image_modal .modal_inner .modal_header .close_button {
  filter: brightness(2);
}
.image_modal .modal_inner .modal_body {
  padding: 0;
  border-radius: 30px;
  background: none;
  overflow: hidden;
}

.alert_modal .modal_inner {
  max-width: 350px;
  position: relative;
  border-radius: 30px;
}
.alert_modal .modal_inner .modal_body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.alert_modal .modal_inner .modal_body h4 {
  font-size: 25px;
  text-align: center;
}

.modal_vote .modal_inner {
  max-width: 600px;
}
.modal_vote .title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}
.modal_vote .content {
  padding: 10px 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .modal_vote .content {
    padding: 0;
  }
}
.modal_vote ul.votelist {
  list-style: none;
  padding-left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.modal_vote ul.votelist li {
  font-size: 13px;
  line-height: 1.5rem;
  padding-left: 0;
  font-weight: 200;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  width: 45%;
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #ececec;
  border-radius: 10px;
  border: 2px solid #ececec;
}
.modal_vote ul.votelist li.active, .modal_vote ul.votelist li:hover {
  background: #addbca;
  border: 2px solid #0fb376;
}

.register_modal .modal_inner {
  position: relative;
  border-radius: 30px;
  max-width: 600px;
}
.register_modal .modal_inner .modal_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.register_modal .modal_inner .modal_body h4 {
  font-size: 25px;
  text-align: center;
}
.register_modal .modal_inner .modal_body .prize_bonus {
  display: flex;
  background-color: #ececec;
  border-radius: 20px;
  width: 100%;
  margin: 15px 0;
  max-width: 450px;
}
@media (max-width: 991px) {
  .register_modal .modal_inner .modal_body .prize_bonus {
    width: 100%;
    padding: 10px 0;
    max-width: none;
  }
}
.register_modal .modal_inner .modal_body .prize_bonus picture {
  width: 35%;
  padding: 0 6%;
}
.register_modal .modal_inner .modal_body .prize_bonus .textArea {
  width: 50%;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: min(2vw, 13px);
}
.register_modal .modal_inner .modal_body .prize_bonus .textArea h5 {
  color: #0fb376;
  font-size: min(4vw, 18px);
}
@media (max-width: 991px) {
  .register_modal .modal_inner .modal_body .prize_bonus .textArea p {
    text-align: left;
    line-height: normal;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    font-size: min(3vw, 14px);
  }
  .register_modal .modal_inner .modal_body .prize_bonus .textArea br {
    display: none;
  }
  .register_modal .modal_inner .modal_body .prize_bonus .textArea h4 {
    font-size: min(3.5vw, 16px);
  }
}
.register_modal .modal_inner .button_area button {
  max-width: 200px;
}

.recive_mail_modal .modal_inner {
  position: relative;
  border-radius: 30px;
  max-width: 600px;
}
.recive_mail_modal .modal_inner .modal_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.recive_mail_modal .modal_inner .modal_body h3 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 3%;
}
@media (max-width: 991px) {
  .recive_mail_modal .modal_inner .modal_body h3 {
    font-size: min(5vw, 30px);
  }
}
.recive_mail_modal .modal_inner .modal_body .tag_wraps {
  display: flex;
}
.recive_mail_modal .modal_inner .modal_body .tag_wraps .tag {
  padding: 10px 10px;
  white-space: nowrap;
  text-align: center;
  width: 50%;
  min-width: 100px;
  border-radius: 12px;
  color: #fff;
  font-size: min(3vw, 14px);
  margin-right: 10px;
  background: #7e839f;
}
@media (max-width: 991px) {
  .recive_mail_modal .modal_inner .modal_body .tag_wraps .tag {
    padding: 10px 0;
    font-size: min(18px, 3.5vw);
  }
}
.recive_mail_modal .modal_inner .modal_body .textArea {
  display: flex;
  background-color: #ececec;
  justify-content: center;
  border-radius: 20px;
  width: 100%;
  margin: 15px 0;
  padding: 5%;
  text-align: center;
}
@media (max-width: 991px) {
  .recive_mail_modal .modal_inner .modal_body .textArea {
    width: 100%;
    padding: 10px 10px;
    max-width: none;
  }
  .recive_mail_modal .modal_inner .modal_body .textArea p {
    text-align: center;
    line-height: normal;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    font-size: min(3vw, 14px);
  }
  .recive_mail_modal .modal_inner .modal_body .textArea br {
    display: none;
  }
}
.recive_mail_modal .button_area button {
  max-width: 200px;
}

.modal_reply_mail .modal_inner,
.modal_write_mail .modal_inner {
  max-width: 600px;
}
.modal_reply_mail .modal_inner .button_area button,
.modal_write_mail .modal_inner .button_area button {
  max-width: none;
  width: 90%;
}
@media (max-width: 991px) {
  .modal_reply_mail .title,
  .modal_write_mail .title {
    margin-bottom: 4%;
  }
}
.modal_reply_mail .title.row,
.modal_write_mail .title.row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}
.modal_reply_mail .title.row h4,
.modal_write_mail .title.row h4 {
  margin-bottom: 0;
}
.modal_reply_mail .title h4,
.modal_write_mail .title h4 {
  text-align: left;
  font-size: 20px;
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .modal_reply_mail .title h4,
  .modal_write_mail .title h4 {
    font-size: min(18px, 3vw);
  }
}
.modal_reply_mail .title span,
.modal_write_mail .title span {
  color: #0fb376;
  font-size: min(15px, 1.5vw);
}
@media (max-width: 991px) {
  .modal_reply_mail .title span,
  .modal_write_mail .title span {
    font-size: min(15px, 2vw);
  }
}
.modal_reply_mail .input_wrap,
.modal_write_mail .input_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 2% 0 4%;
}
.modal_reply_mail .input_wrap input,
.modal_write_mail .input_wrap input {
  width: 80%;
  padding: 10px 10px;
  border-radius: 12px;
  background-color: #ececec;
  color: #333;
  font-size: min(16px, 2vw);
}
@media (max-width: 991px) {
  .modal_reply_mail .input_wrap input,
  .modal_write_mail .input_wrap input {
    padding: 5px 10px;
    font-size: min(15px, 2.5vw);
    border-radius: 8px;
  }
}
.modal_reply_mail .input_wrap textarea,
.modal_write_mail .input_wrap textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px 10px;
  border-radius: 12px;
  background-color: #ececec;
  color: #333;
  font-size: min(16px, 2vw);
}
@media (max-width: 991px) {
  .modal_reply_mail .input_wrap textarea,
  .modal_write_mail .input_wrap textarea {
    padding: 5px 10px;
    font-size: min(15px, 2.5vw);
    border-radius: 8px;
  }
}
.modal_reply_mail .input_wrap button,
.modal_write_mail .input_wrap button {
  font-family: "MMinn";
  padding: 0 0;
  white-space: nowrap;
  text-align: center;
  width: 18%;
  max-width: 132px;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  background: #00b670;
}
@media (max-width: 991px) {
  .modal_reply_mail .input_wrap button,
  .modal_write_mail .input_wrap button {
    padding: 5px 0;
    font-size: min(15px, 2.5vw);
    border-radius: 8px;
  }
}
.modal_reply_mail .input_wrap button:last-child,
.modal_write_mail .input_wrap button:last-child {
  margin-right: 0;
}
.modal_reply_mail .content,
.modal_write_mail .content {
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .modal_reply_mail .content,
  .modal_write_mail .content {
    padding: 0;
  }
}
.modal_reply_mail .info,
.modal_write_mail .info {
  color: #9c9c9c;
  margin-top: 3%;
  font-size: min(15px, 1.5vw);
}
@media (max-width: 991px) {
  .modal_reply_mail .info,
  .modal_write_mail .info {
    font-size: min(15px, 2.2vw);
  }
}
.modal_reply_mail ul.votelist,
.modal_write_mail ul.votelist {
  list-style: none;
  padding-left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
@media (max-width: 991px) {
  .modal_reply_mail ul.votelist,
  .modal_write_mail ul.votelist {
    gap: 4px;
  }
}
.modal_reply_mail ul.votelist li,
.modal_write_mail ul.votelist li {
  font-size: 13px;
  line-height: 1.5rem;
  padding-left: 0;
  font-weight: 200;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  width: 24%;
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #ececec;
  border-radius: 10px;
  border: 2px solid #ececec;
}
@media (max-width: 991px) {
  .modal_reply_mail ul.votelist li,
  .modal_write_mail ul.votelist li {
    padding: 0 5px;
    font-size: min(15px, 2.2vw);
  }
}
.modal_reply_mail ul.votelist li.active, .modal_reply_mail ul.votelist li:hover,
.modal_write_mail ul.votelist li.active,
.modal_write_mail ul.votelist li:hover {
  background: #addbca;
  border: 2px solid #0fb376;
}
.modal_reply_mail .button_area button,
.modal_write_mail .button_area button {
  width: 100%;
}

body {
  height: 100%;
  background: #000;
  font-family: "微軟正黑體", "Microsoft JhengHei", "PingFang TC", "Apple LiGothic Medium", "Noto Sans CJK TC", sans-serif;
}

#lnb.layer-down {
  position: absolute;
  left: -500px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

#wrapper {
  width: 100%;
  min-height: 700px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  animation: fadeIn 1s ease forwards;
  overflow: hidden;
}
@media (max-width: 991px) {
  #wrapper {
    width: 100%;
    max-width: 960px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin: 0 auto;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
  }
}
#wrapper section {
  width: 100%;
  min-height: 700px;
  position: relative;
}
@media (max-width: 991px) {
  #wrapper section {
    width: 100%;
    max-width: 960px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: auto;
  }
  #wrapper section .fp-tableCell {
    height: auto !important;
  }
}
#wrapper .noscroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 1. 設定滾動條軌道 (背景) */
}
#wrapper .noscroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#wrapper .noscroll {
  /* 2. 設定滾動條滑桿 (會移動的那個部分) */
}
#wrapper .noscroll::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#wrapper .noscroll {
  /* 3. 設定滑桿懸停時的變化 */
}
#wrapper .noscroll::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
#wrapper .noscroll {
  /* 4. 設定軌道背景 (可選) */
}
#wrapper .noscroll::-webkit-scrollbar-track {
  background: transparent;
}
@media (max-width: 991px) {
  #wrapper .noscroll {
    overflow: auto;
    overscroll-behavior: auto;
  }
}
#wrapper .inner {
  max-width: 1200px;
  height: 100vh;
  min-height: 700px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#wrapper .inner::-webkit-scrollbar {
  display: none;
}
@media (max-width: 991px) {
  #wrapper #quick {
    position: fixed;
    top: 0px;
    transition: none;
    z-index: 999;
  }
}
#wrapper #quick .q-wrap {
  position: fixed;
  width: 200px;
  right: 26px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap {
    position: static;
    width: 100vw;
    height: 54px;
    justify-content: flex-start;
    padding: 0 15px;
    background-color: #222;
    transform: translateY(0%);
    top: 0;
    right: 0;
    z-index: 10;
    max-width: 960px;
    transition: none;
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    overflow: scroll;
    scrollbar-width: none;
  }
}
#wrapper #quick .q-wrap::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 16px;
  display: block;
  width: 8px;
  height: 218px;
  background: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/common/icon_spr_f51a9a318d9c033d.png) no-repeat;
  background-position: -358px 0px;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap::after {
    display: none;
  }
}
#wrapper #quick .q-wrap .menu {
  font-size: 16px;
  color: #ececec;
  width: -moz-fit-content;
  width: fit-content;
  height: 39px;
  padding: 10px 24px 10px 18px;
  border-radius: 40px;
  text-align: right;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap .menu {
    display: flex;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    width: -moz-fit-content;
    width: fit-content;
    flex-shrink: 1;
    padding: 0;
    height: 100%;
    align-items: center;
    text-align: center;
    font-size: min(3vw, 13px);
  }
}
#wrapper #quick .q-wrap .menu:hover {
  color: #fff;
}
#wrapper #quick .q-wrap .menu span {
  z-index: 10;
  position: relative;
}
#wrapper #quick .q-wrap .menu span br {
  display: none;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap .menu span br {
    display: block;
  }
}
#wrapper #quick .q-wrap .menu.active {
  color: #fff;
  text-align: center;
  position: relative;
  right: 24px;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap .menu.active {
    right: 0;
  }
}
#wrapper #quick .q-wrap .menu.active::before {
  width: 5px;
  height: 5px;
  content: "";
  display: inline-block;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  position: relative;
  transform: rotate(225deg);
  margin-right: 8px;
  top: 2px;
  z-index: 10;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap .menu.active::before {
    opacity: 0;
    display: none;
  }
}
#wrapper #quick .q-wrap .menu.active::after {
  content: "";
  position: absolute;
  background: #0fb376;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 90px;
  transform-origin: right center;
  animation: menu-bg 0.2s ease-out forwards;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap .menu.active::after {
    width: 6px;
    height: 6px;
    display: inline-block;
    content: "";
    position: absolute;
    top: 10px;
    right: -5px;
    left: auto;
    border-radius: 10px;
    background-color: #0fb376;
  }
}
#wrapper #quick .q-wrap .sub-menu {
  font-size: 12px;
  color: #bbb;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 24px 0px 18px;
  border-radius: 40px;
  text-align: right;
  display: flex;
  align-items: center;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  height: 0;
  display: none;
}
#wrapper #quick .q-wrap .sub-menu:hover {
  color: #fff;
  font-weight: bold;
}
#wrapper #quick .q-wrap .sub-menu span {
  z-index: 10;
  position: relative;
}
#wrapper #quick .q-wrap .sub-menu span br {
  display: none;
}
@media (max-width: 991px) {
  #wrapper #quick .q-wrap .sub-menu span br {
    display: block;
  }
}
#wrapper #quick .q-wrap .sub-menu.on {
  position: static;
  opacity: 1;
  height: 25px;
  pointer-events: all;
  transition: 0.5s all;
}
#wrapper #quick .q-wrap .sub-menu.active {
  color: #0fb376;
  text-align: center;
  position: relative;
  right: 0;
}
#wrapper #quick .q-wrap .sub-menu.active::before {
  width: 5px;
  height: 5px;
  content: "";
  display: inline-block;
  border-top: 1px solid #0fb376;
  border-right: 1px solid #0fb376;
  transform: rotate(45deg);
  position: relative;
  transform: rotate(225deg);
  margin-right: 8px;
  top: 0px;
  z-index: 10;
}
#wrapper #quick .q-wrap .sub-menu.active::after {
  position: absolute;
  background: #0fb376;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 90px;
  transform-origin: right center;
  animation: menu-bg 0.2s ease-out forwards;
}
#wrapper #quick.layer-down {
  z-index: 0;
}
#wrapper .top {
  width: 106px;
  height: 50px;
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 1000;
}
#wrapper .top ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#wrapper .top li:nth-child(2) {
  position: relative;
}
#wrapper .top li:nth-child(2) ul {
  width: 100%;
  padding-top: 6px;
  height: 162px;
  display: none;
  position: absolute;
  flex-direction: column;
  align-items: center;
  box-sizing: content-box;
}
#wrapper .top li:nth-child(2) ul li {
  width: 50px;
  height: 50px;
  text-indent: -99999px;
  background-color: rgba(48, 48, 48, 0.7);
  border-radius: 14px;
}
#wrapper .top li:nth-child(2) ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#wrapper .top li:nth-child(2) ul li a::after {
  content: "";
  display: block;
  position: relative;
  background: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/common/icon_spr_f51a9a318d9c033d.png);
}
#wrapper .top li:nth-child(2) ul li:hover {
  background-color: #f0f0f0;
}
#wrapper .top li:nth-child(2) ul li:hover a::after {
  filter: invert(100%);
}
#wrapper .top li:nth-child(2) ul .btn-link a::after {
  width: 15px;
  height: 15px;
  background-position: -144px -436px;
}
#wrapper .top li:nth-child(2) ul .btn-x a::after {
  width: 16px;
  height: 14px;
  background-position: -168px -436px;
}
#wrapper .top li:nth-child(2) ul .btn-fb a::after {
  width: 7px;
  height: 15px;
  background-position: -193px -436px;
}
#wrapper .top li:nth-child(2):hover ul {
  display: flex;
}
#wrapper .top button {
  width: 50px;
  height: 50px;
  text-indent: -99999px;
  background-color: rgba(48, 48, 48, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
}
#wrapper .top button::after {
  background: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/common/icon_spr_f51a9a318d9c033d.png);
  background-position-y: 0px;
  content: "";
  position: relative;
  display: block;
}
#wrapper .top button:hover {
  background-color: #f0f0f0;
}
#wrapper .top .btn-sound::after {
  background-position-x: -195px;
  background-position-y: 0px;
  width: 12px;
  height: 14px;
}
#wrapper .top .btn-sound:hover::after {
  background-position-y: -20px;
}
#wrapper .top .btn-sound.play::after {
  height: 28px;
  width: 28px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/media/sound_motion.gif);
  background-position: center center;
  background-size: contain;
}
#wrapper .top .btn-sound.play:hover::after {
  background: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/common/icon_spr_f51a9a318d9c033d.png);
  background-position-x: -176px;
  background-position-y: 0px;
  width: 10px;
  height: 10px;
}
#wrapper .top .btn-sns::after {
  background-position-x: -95px;
  width: 14px;
  height: 18px;
}
#wrapper .top .btn-sns:hover::after {
  filter: invert(100%);
}
#wrapper .top .btn-hide::after {
  background-position-x: -118px;
  width: 14px;
  height: 14px;
}
#wrapper .top.layer-down {
  z-index: 0;
}

iframe {
  transition: 0.3s;
  transform-origin: center center;
}

.video-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.video-wrap > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-wrap > div > button {
  width: 100px;
  height: 40px;
  border-radius: 50px;
  background-color: #fff;
}

body.load {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.loading_wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fbfbfb;
  z-index: 9999;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

.loading {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading div {
  position: absolute;
  top: 33px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #04acd6;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading div:nth-child(1) {
  left: 8px;
  animation: loading1 0.6s infinite;
}
.loading div:nth-child(2) {
  left: 8px;
  animation: loading2 0.6s infinite;
}
.loading div:nth-child(3) {
  left: 32px;
  animation: loading2 0.6s infinite;
}
.loading div:nth-child(4) {
  left: 56px;
  animation: loading3 0.6s infinite;
}

.clone-card {
  width: 261px;
  height: 415px;
  position: absolute;
  left: -99999px;
  top: -9999px;
  display: inline-block;
  transform: rotate(0deg);
  animation: none;
}
.clone-card .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  border-radius: 30px;
  overflow: hidden;
}
.clone-card .img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  z-index: 3;
  border: 5px solid #efefef;
  box-sizing: border-box;
  border-radius: 30px;
  overflow: hidden;
}
.clone-card .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.clone-card .frame {
  display: block;
  position: absolute;
  width: 241px;
  height: 394px;
  top: 11px;
  left: 10px;
  z-index: 5;
  -o-object-fit: contain;
     object-fit: contain;
}
.clone-card .bubble {
  width: 197px;
  height: 77px;
  box-sizing: border-box;
  position: relative;
  top: 36px;
  left: 32px;
  z-index: 4;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
.clone-card .bubble .bubble-svg {
  width: 197px;
  height: 92px;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
.clone-card .bubble .txt-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateY(-14px);
}
.clone-card .bubble .ko {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  width: 100%;
  word-break: break-all;
}
.clone-card .bubble .er {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 8px;
  font-family: "MMinn";
  text-align: center;
  display: inline-block;
  margin-top: 3px;
  width: 100%;
  word-break: break-all;
}
.clone-card .bubble.on {
  opacity: 1;
}

.scrolldown {
  width: 2px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 1;
  animation: fadeDownBig 1s 1.5s ease-in-out forwards;
}
@media (max-width: 991px) {
  .scrolldown {
    display: flex;
    width: 2px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    position: relative;
    margin-top: 59px;
    bottom: 0;
    left: 0%;
    transform: translateX(0%);
    opacity: 0;
  }
}
.scrolldown::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 36px;
  background-color: #fff;
  animation: bar 1.8s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}
.scrolldown::after {
  content: "往下觀看更多";
  font-weight: 300;
  font-size: 14px;
  width: 80px;
  position: absolute;
  top: 46px;
  text-align: center;
}

.scrolldown2 {
  position: fixed;
  width: 100%;
  height: 150px;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.231372549) 100%);
}
@media (max-width: 991px) {
  .scrolldown2 {
    display: none;
  }
}
.scrolldown2 .scrolldown {
  bottom: 50%;
}
.scrolldown2.on {
  opacity: 1 !important;
  transition: 0.5s all;
}

/*================================================================= section 0 =================================================================*/
#section0 {
  background-position: center 0;
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_bg.jpg);
  background-size: cover;
  background-position: right;
}
@media (max-width: 991px) {
  #section0 {
    background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_bg_m.jpg);
    background-size: cover;
    background-position: right;
    padding-top: 50px;
    height: 100vh;
    min-height: 800px !important;
  }
}
#section0::after {
  width: 12%;
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  display: block;
  height: 100vh;
  min-height: 700px;
  background: linear-gradient(to left, #101317, transparent);
  opacity: 0.75;
}
@media (max-width: 991px) {
  #section0::after {
    display: none;
  }
}
#section0 .inner {
  gap: 12px;
  overflow-y: visible;
}
@media (max-width: 991px) {
  #section0 .inner {
    gap: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    top: 0vh;
    width: 279px;
    position: relative;
    height: auto;
    min-height: auto;
  }
}
#section0 #main_bg_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#section0 .dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  animation: dimOpacity 1.5s ease forwards;
}
#section0 .bi {
  max-width: 180px;
  width: 50%;
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_bi.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  margin-bottom: 22px;
  opacity: 1;
  flex-shrink: 0;
  aspect-ratio: 345/506;
  cursor: pointer;
}
@media (max-width: 991px) {
  #section0 .bi {
    width: 102px;
    background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_bi.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 12px;
  }
}
#section0 .title {
  width: 809px;
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_title.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-indent: -9999px;
  opacity: 1;
  aspect-ratio: 3710/318;
}
@media (max-width: 991px) {
  #section0 .title {
    width: 180px;
    height: 80px;
    text-indent: -9999px;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_title_m.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 1;
  }
}
#section0 .desc {
  text-indent: -9999px;
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 22px;
}
#section0 .desc .line1 {
  display: block;
  width: 33px;
  height: 9px;
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/line_l.png);
  opacity: 1;
}
#section0 .desc .line2 {
  display: block;
  width: 33px;
  height: 9px;
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/line_r.png);
  opacity: 1;
}
#section0 .desc p {
  width: 300px;
  transform-origin: center;
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_sub.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 1;
}
@media (max-width: 991px) {
  #section0 .desc p {
    width: 180px;
    height: 16px;
    transform-origin: center;
    background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_sub_m.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 1;
  }
}
#section0 .btn-play {
  width: 211px;
  height: 211px;
  background: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/main/btn_play_59ccaf9a5a968afc.png) no-repeat;
  background-repeat: no-repeat;
  opacity: 1;
  transition: 0.5s ease;
}
#section0 .btn-play:hover {
  background-image: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/main/btn_play_on_5828f546ed11ac8b.png);
}
#section0 .button-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 1;
}
#section0 .btn-preRegister {
  width: 320px;
  height: 72px;
  text-align: center;
  line-height: 71px;
  color: #fff;
  font-size: 22px;
  background-color: #0fb376;
  border-radius: 20px;
  cursor: pointer;
}
@media (max-width: 991px) {
  #section0 .btn-preRegister {
    width: 240px;
    height: 56px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #fff;
    font-size: 16px;
    background-color: #0fb376;
    border-radius: 12px;
  }
}
#section0 .btn-preRegister:hover {
  background-color: #07794f;
}
#section0 .btn-preRegister.off {
  background-color: #a6a5a5;
  color: rgba(246, 244, 244, 0.5019607843);
  pointer-events: none;
}
#section0 .btn-preDownload {
  width: 320px;
  height: 72px;
  text-align: center;
  line-height: 71px;
  color: #fff;
  font-size: 22px;
  background-color: #e4612b;
  border-radius: 20px;
}
#section0 .btn-preDownload:hover {
  background-color: #954d30;
}
#section0 .btn-preDownload.off {
  background-color: #a6a5a5;
  color: rgba(246, 244, 244, 0.5019607843);
  pointer-events: none;
}

/*================================================================= section 1 =================================================================*/
#section1 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_bg.jpg);
  background-size: cover;
  background-color: #fff;
  background-position: center 0;
}
#section1 a.link {
  display: inline;
  text-decoration: underline;
}
@media (max-width: 991px) {
  #section1 {
    height: auto !important;
    overflow: hidden;
  }
  #section1 .fp-tableCell {
    width: 100% !important;
  }
}
#section1 .inner {
  height: auto;
  padding: 100px 0;
}
@media (max-width: 991px) {
  #section1 .inner {
    position: relative;
    width: 100%;
    padding: 0;
    min-height: 0;
  }
}
#section1 .content {
  width: 100%;
}
@media (max-width: 1200px) {
  #section1 .content {
    width: 90%;
  }
}
@media (max-width: 991px) {
  #section1 .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 0;
    width: 100%;
  }
}
#section1 .content .content-wrap-1 {
  width: 100%;
  display: flex;
  aspect-ratio: 1200/680;
  justify-content: center;
  position: relative;
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 {
    height: auto;
    flex-direction: column;
    width: 100%;
  }
}
#section1 .content .content-wrap-1 .info {
  width: 41%;
  aspect-ratio: 2943/4095;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_left_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info {
    width: 100%;
    height: auto;
    position: relative;
    aspect-ratio: 100/124;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_left_bg_m.png) no-repeat;
    background-size: 100%;
    background-color: #2e344c;
    overflow: clip;
  }
}
#section1 .content .content-wrap-1 .info > * {
  position: absolute;
}
#section1 .content .content-wrap-1 .info .bi {
  width: 11%;
  top: 8.5%;
  left: 50%;
  transform: translateX(-49%);
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_bi.png) no-repeat;
  background-size: 100% auto;
  aspect-ratio: 345/506;
  cursor: pointer;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .bi {
    width: 10%;
    top: 9.5%;
    height: auto;
    aspect-ratio: 345/516;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s0_bi.png) no-repeat;
    background-size: 100% auto;
  }
}
#section1 .content .content-wrap-1 .info .title {
  width: 69.5%;
  top: 22.5%;
  left: 50%;
  transform: translateX(-49%);
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_title.png) no-repeat;
  background-size: 100% auto;
  opacity: 1;
  aspect-ratio: 319/49;
  text-indent: -9999px;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .title {
    width: 50%;
    top: 24%;
    aspect-ratio: 199/32;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_title.png) no-repeat;
    background-size: 100% auto;
  }
}
#section1 .content .content-wrap-1 .info .date {
  width: 96%;
  top: 32%;
  left: 50%;
  transform: translateX(-49%);
  font-size: min(11px, 0.8vw);
  letter-spacing: 1px;
  text-align: center;
  font-weight: 500;
  margin-top: -5px;
  margin-bottom: 1px;
  color: #c2c6d3;
  opacity: 1;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .date {
    font-size: min(2.5vw, 18px);
    /*
    top: 11vw;
    */
  }
}
#section1 .content .content-wrap-1 .info .sub {
  width: 60%;
  top: 35.5%;
  left: 50%;
  transform: translateX(-49%);
  font-size: min(14px, 1vw);
  line-height: 25px;
  letter-spacing: 1px;
  padding: 0.2% 0;
  text-align: center;
  font-weight: 500;
  margin-top: -5px;
  margin-bottom: 1px;
  color: #c2c6d3;
  opacity: 1;
  border-top: 1px solid #c2c6d3;
  border-bottom: 1px solid #c2c6d3;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .sub {
    /*
    width: 62%;
    padding: 0 0;
    line-height: 20px;
    */
    top: 37%;
    width: 55%;
    line-height: 18px;
    padding: 1% 0;
    font-size: min(2.5vw, 18px);
  }
}
#section1 .content .content-wrap-1 .info .gift {
  width: 100%;
  height: 100%;
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift {
    /*
    background: none;
    width: 95%;
    height: 0;
    left: 0px;
    margin-top: 0px;
    top: 10vw;

    &::after {
      content: '';
      display: block;
      width: 94%;
      left: 3%;
      top: -2.5vw;
      aspect-ratio: 327/231;
      position: absolute;
      background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_char.png) no-repeat;
      background-size: 100% auto;
      background-repeat: no-repeat;
      pointer-events: none;
    }
      */
  }
}
#section1 .content .content-wrap-1 .info .gift::after {
  content: "";
  display: block;
  width: 86%;
  left: 50%;
  top: 46%;
  transform: translateX(-49%);
  aspect-ratio: 327/280;
  position: absolute;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_char.png) no-repeat;
  background-size: 100% auto;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift::after {
    width: 92%;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info {
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translateX(-50%);
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift .gift-info {
    padding: 0;
    width: 55%;
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-title {
  width: 70%;
  top: 6%;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 500;
  color: #c2c6d3;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_sub.png) no-repeat;
  background-size: 100% auto;
  text-indent: -9999px;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-title {
    height: auto;
    aspect-ratio: 100/12;
    width: 70%;
    margin-top: 1%;
    margin-bottom: 0;
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box {
  width: calc(46% - 8px);
  display: flex;
  padding: 4%;
  aspect-ratio: 3/1.8;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #262b3e;
  border-radius: 10px;
  margin: 1%;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box {
    /*
    margin: 0 2px;
    padding: 5px;
    */
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box h5 {
  font-size: 14px;
  color: #c2c6d3;
  text-align: center;
  line-height: 14px;
  letter-spacing: 1px;
  margin-bottom: 2%;
  font-size: min(12px, 0.95vw);
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box h5 {
    /*
    padding: 0 0;
    */
    line-height: 14px;
    font-size: min(3vw, 14px);
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box p {
  font-size: min(9px, 0.75vw);
  color: #8085a0;
  text-align: center;
  line-height: 13px;
  letter-spacing: 0px;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box p {
    padding: 0 0;
    font-size: min(2.2vw, 10px);
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box .btn {
  font-size: min(9px, 0.8vw);
  color: #fff;
  text-align: center;
  line-height: 13px;
  padding: 1% 6%;
  border-radius: 10px;
  margin-top: 5%;
  letter-spacing: 0px;
  background: #dd703e;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box .btn {
    padding: 2% 10%;
    font-size: min(2.2vw, 10px);
  }
}
#section1 .content .content-wrap-1 .info .gift .gift-info .gift-info-box .btn::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.6274509804);
  border-right: 1px solid rgba(255, 255, 255, 0.6274509804);
  transform: rotate(45deg) translate(0, -50%);
  margin-left: 0px;
}
#section1 .content .content-wrap-1 .form-wrap {
  width: 60%;
  aspect-ratio: 4275/4083;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_right_bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap {
    background: #fff;
    width: 100%;
    padding: 20px;
  }
}
#section1 .content .content-wrap-1 .form-wrap h5 {
  font-size: 18px;
  color: #222;
  margin-bottom: 10px;
  width: 520px;
  opacity: 1;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap h5 {
    width: 100%;
  }
}
#section1 .content .content-wrap-1 .form-wrap h5::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 19px;
  background: url(https://lwi.nexon.com/m_mabinogim/event/2025/0206_preregister_96A6C889307DDAD9/common/icon_spr_f51a9a318d9c033d.png);
  background-position: -24px -37px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
#section1 .content .content-wrap-1 .form-wrap .btn-noti {
  position: absolute;
  top: 4.1%;
  right: 19%;
  width: 14%;
  padding: 1%;
  color: #fff;
  background-color: #222;
  font-size: min(12px, 1vw);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .btn-noti {
    right: 15%;
    top: 2%;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .btn-noti {
    font-size: min(4vw, 15px);
    position: static;
    padding: 8px;
    height: auto;
    border-radius: 25px;
    margin: 0 auto 10px;
    width: 50%;
  }
}
#section1 .content .content-wrap-1 .form-wrap .btn-noti::after {
  width: 3.6px;
  height: 3.6px;
  content: "";
  display: inline-block;
  border-top: 1px solid #7b7b7b;
  border-right: 1px solid #7b7b7b;
  transform: rotate(45deg);
  position: relative;
}
#section1 .content .content-wrap-1 .form-wrap .btn-noti:hover {
  background-color: #0fb376;
}
#section1 .content .content-wrap-1 .form-wrap .btn-noti:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
#section1 .content .content-wrap-1 .form-wrap .top_prize {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 89%;
  position: static;
  top: 0;
  padding-left: 8%;
  padding-top: 9%;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize {
    width: 94%;
    padding-top: 4.5%;
    padding-left: 4%;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize {
    width: 100%;
    margin: 0 auto;
    max-width: 545px;
    padding-top: 4.5%;
    padding-left: 0%;
  }
}
#section1 .content .content-wrap-1 .form-wrap .top_prize p {
  letter-spacing: 0px;
  font-size: min(14px, 1vw);
  line-height: 1.3rem;
}
#section1 .content .content-wrap-1 .form-wrap .top_prize p .br {
  display: none;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize p {
    line-height: 1.1rem;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize p {
    font-size: min(14px, 3vw);
    text-align: center;
    line-height: 5vw;
  }
  #section1 .content .content-wrap-1 .form-wrap .top_prize p .br {
    display: block;
  }
}
#section1 .content .content-wrap-1 .form-wrap .top_prize p > span {
  color: #0fb376;
}
#section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus {
  display: flex;
  background-color: #2e344c;
  border-radius: 15px;
  width: 90%;
  margin: 3% 0;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus {
    margin: 2% 0;
    border-radius: 10px;
    aspect-ratio: 100/11;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus {
    width: 100%;
    padding: 10px 0;
    max-width: none;
  }
}
#section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus picture {
  width: 40%;
  padding: 0 6%;
}
#section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus picture img {
  margin-left: 6%;
}
#section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus .textArea {
  width: 60%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus .textArea h4 {
  color: #0fb376;
  font-size: min(1.5vw, 19px);
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus .textArea {
    width: 42%;
  }
  #section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus .textArea p {
    text-align: left;
    line-height: normal;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    font-size: min(2.5vw, 14px);
  }
  #section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus .textArea br {
    display: none;
  }
  #section1 .content .content-wrap-1 .form-wrap .top_prize .prize_bonus .textArea h4 {
    font-size: min(3.5vw, 16px);
  }
}
#section1 .content .content-wrap-1 .form-wrap form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 81%;
  position: static;
  top: 0;
  padding-left: 8%;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap form {
    width: 85%;
    padding-left: 4%;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap form {
    width: 100%;
    margin: 0 auto;
    max-width: 545px;
    padding-top: 4.5%;
    padding-left: 0%;
  }
}
#section1 .content .content-wrap-1 .form-wrap form > * {
  width: 100%;
  margin-bottom: 10px;
}
#section1 .content .content-wrap-1 .form-wrap form input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: none;
}
#section1 .content .content-wrap-1 .form-wrap form input[type=radio]:checked + label::after {
  display: inline-block;
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: #0fb376;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
#section1 .content .content-wrap-1 .form-wrap form input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: none;
}
#section1 .content .content-wrap-1 .form-wrap form input[type=checkbox]:checked + label::after {
  display: inline-block;
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/icon_spr_f51a9a318d9c033d.png) no-repeat;
  background-position: 0 -37px;
  width: 17px;
  height: 18px;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap form input[type=checkbox]:checked + label::after {
    width: 12px;
    height: 12px;
    left: 2px;
    top: 2px;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/icon_check.png) no-repeat;
    background-size: 100%;
    background-position: 0 0;
  }
}
#section1 .content .content-wrap-1 .form-wrap form label {
  position: relative;
  display: flex;
  align-items: flex-start;
  letter-spacing: 0;
  font-size: min(14px, 1vw);
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap form label {
    font-size: min(3.5vw, 16px);
  }
}
#section1 .content .content-wrap-1 .form-wrap form label span.ul {
  text-decoration: underline;
}
#section1 .content .content-wrap-1 .form-wrap form input[type=radio] + label::before {
  display: inline-block;
  content: "";
  position: relative;
  border: 1px solid #222;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 10px;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap form input[type=radio] + label::before {
    transform: scale(0.8);
  }
}
#section1 .content .content-wrap-1 .form-wrap form input[type=checkbox] + label::before {
  display: inline-block;
  content: "";
  position: relative;
  border: 1px solid #222;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 10px;
  aspect-ratio: 1/1;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap form input[type=checkbox] + label::before {
    width: 10px;
    height: 10px;
    margin: 3px 6px 0 0;
  }
}
#section1 .content .content-wrap-1 .form-wrap .store {
  display: flex;
  align-items: center;
  gap: 5%;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .store {
    justify-content: center;
  }
}
#section1 .content .content-wrap-1 .form-wrap .age-tab {
  display: flex;
  gap: 4px;
  justify-content: center;
  border-bottom: 1px solid #222;
  margin: 10px 0;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab button {
  width: 258px;
  height: 52px;
  border-radius: 16px 16px 0 0;
  background-color: #e2e2e2;
  color: #626262;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab button:hover {
  background-color: #222;
  color: #f6f4f4;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab button.on {
  background-color: #222;
  color: #f6f4f4;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con {
  display: none;
  flex-direction: column;
  gap: 10px;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap {
  padding: 2% 3%;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap {
    border-radius: 10px;
    aspect-ratio: 100/11;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap {
    max-width: 100%;
    padding: 14px 14px;
    min-width: 0;       /* 關鍵：解除瀏覽器預設的 min-content 限制 */
    min-height: 0;
    width: 100%;        /* 讓 fieldset 寬度能隨父容器自適應縮放 */
    height: 140px;
    box-sizing: border-box; /* 確保 padding 和 border 不會撐大寬度 */
  }
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap label {
  letter-spacing: 0px;
  font-size: min(12.5px, 1vw);
  line-height: 1.2rem;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap label {
    font-size: min(3vw, 16px);
    line-height: min(4.5vw, 1.5rem);
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }
  #section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap label br {
    display: none;
  }
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap label button {
  margin-left: 6px;
  display: inline-block;
  border: 1px solid #464a59;
  color: #222;
  background-color: #fdfbfb;
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
  padding: 0 14px;
  height: 19px;
  line-height: 18px;
  text-align: center;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .input-wrap label button:hover {
  color: #fff;
  background-color: #222;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .parent-auth {
  height: 44px;
  background: #e2e2e2;
  display: flex;
  align-items: center;
  position: relative;
  color: #222;
  border-radius: 16px;
  font-weight: 700;
  font-size: 14px;
  padding-left: 30px;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .parent-auth .btn-auth {
  color: #fff;
  background: #222;
  position: absolute;
  right: 0;
  border-radius: 16px;
  width: 224px;
  height: 100%;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  line-height: 43px;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .parent-auth .btn-auth:hover {
  background: #0fb376;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .parent-auth .btn-auth.complete {
  background: #888;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con .agree-all ~ label {
  font-weight: 700;
}
#section1 .content .content-wrap-1 .form-wrap .age-tab-con.on {
  display: flex;
}
#section1 .content .content-wrap-1 .form-wrap .lb-phone {
  box-sizing: border-box;
  border: 1px solid #222;
  border-radius: 10px;
  aspect-ratio: 100/11;
  background-color: #fdfbfb;
  padding: 0 5%;
  font-size: min(28px, 1.5vw);
  font-weight: 800;
  color: #222;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0% 0 2%;
  aspect-ratio: 1000/132;
}
#section1 .content .content-wrap-1 .form-wrap .lb-phone select {
  background: none;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .lb-phone {
    border-radius: 10px;
    aspect-ratio: 100/11;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .lb-phone {
    font-size: min(4vw, 28px);
    /*
    width: 100%;
    overflow: hidden;
    height: 50%;
    padding: 10px 30px;
    font-size: min(4vw, 28px);
    */
  }
}
#section1 .content .content-wrap-1 .form-wrap .lb-phone .placeholder {
  color: #464a59;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
  left: 105px;
}
#section1 .content .content-wrap-1 .form-wrap .lb-phone #phone {
  position: relative;
  left: 9px;
  background-color: rgba(0, 0, 0, 0);
  font-size: min(28px, 1.5vw);
  font-weight: 800;
  color: #000;
  z-index: 5;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .lb-phone #phone {
    font-size: min(4vw, 28px);
    /*
    width: 80%;
    overflow: hidden;
    height: 50%;
    font-size: min(4vw, 28px);
    */
  }
}
#section1 .content .content-wrap-1 .form-wrap .lb-phone .phone-label {
  position: absolute;
  left: 105px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 28px;
  font-weight: 800;
  color: #222;
}
#section1 .content .content-wrap-1 .form-wrap .warn {
  font-size: 24px;
  font-weight: 700;
  color: #e4612b;
  text-align: center;
}
#section1 .content .content-wrap-1 .form-wrap .btn-submit {
  border-radius: 16px;
  background-color: #0fb376;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  aspect-ratio: 100/13;
}
@media (max-width: 1200px) {
  #section1 .content .content-wrap-1 .form-wrap .btn-submit {
    font-size: min(4vw, 22px);
    height: auto;
    border-radius: 10px;
    aspect-ratio: 100/11;
  }
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .btn-submit {
    font-size: min(4vw, 22px);
    height: auto;
    padding: 5% 0;
  }
}
#section1 .content .content-wrap-1 .form-wrap .btn-submit:hover {
  background-color: #07794f;
}
#section1 .content .content-wrap-1 .form-wrap .btn-submit.off {
  background-color: #a6a5a5;
  color: rgba(246, 244, 244, 0.5);
  pointer-events: none;
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap {
  display: flex;
  font-size: 15px;
  color: #222;
  font-weight: 500;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 8px;
  -moz-column-gap: 2%;
       column-gap: 2%;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .gift-wrap {
    width: 100%;
    justify-content: space-between;
  }
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap p {
  width: 520px;
  text-align: center;
  margin-top: 5px;
  font-weight: 400;
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap em {
  font-weight: 700;
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap a {
  text-indent: -99999px;
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap a.store-apple {
  width: 30%;
  aspect-ratio: 144/42;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_ios.png) no-repeat;
  background-color: #000;
  background-size: auto 100%;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .gift-wrap a.store-apple {
    width: 48%;
    height: auto;
    background-size: 100% auto;
    aspect-ratio: 321/99;
  }
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap a.store-google {
  width: 30%;
  aspect-ratio: 144/42;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_aos.png) no-repeat;
  background-color: #000;
  background-size: auto 100%;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .gift-wrap a.store-google {
    width: 48%;
    height: auto;
    background-size: 100% auto;
    aspect-ratio: 321/99;
  }
}
#section1 .content .content-wrap-1 .form-wrap .gift-wrap a.store-kakao {
  width: 30%;
  aspect-ratio: 144/42;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_win.png) no-repeat;
  background-size: auto 100%;
  background-position: center;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-1 .form-wrap .gift-wrap a.store-kakao {
    display: none;
  }
}
#section1 .content .content-wrap-2 {
  min-height: 300px;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-2 {
    width: 88%;
  }
}
#section1 .content .content-wrap-2 .title {
  text-indent: -99999px;
  width: 81.5%;
  margin: 90px auto 30px;
  aspect-ratio: 100/7;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_title2.png) no-repeat;
  background-size: 100% auto;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-2 .title {
    width: 90%;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s1_title2.png) no-repeat;
    background-size: 100% auto;
    aspect-ratio: 626/45;
    margin: 40px auto 20px;
  }
}
#section1 .content .content-wrap-2 .box {
  background: #fff;
  border-radius: 30px;
  width: 100%;
  min-width: 100%;
  aspect-ratio: 1920/1920;
  position: relative;
  overflow: hidden;
  padding: 15px;
  margin-bottom: 30px;
}
#section1 .content .content-wrap-2 .box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
}
@media (max-width: 991px) {
  #section1 .content .content-wrap-2 .box {
    border-radius: 20px;
    padding: 20px;
    min-height: 500px;
    aspect-ratio: 1920/1920;
    position: relative;
  }
}
#section1 .content .content-wrap-2 .box .inside-box {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 15px;
  overflow: hidden;
  background-color: #efefef;
  position: relative;
}
#section1 .btn-gift {
  text-indent: -9999px;
  width: 100px;
  height: 149px;
  width: 100px;
  height: 149px;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/sec1-spr.png) no-repeat;
  background-position: -435px -846px;
  position: absolute;
  z-index: 5;
  right: 30px;
  bottom: 60px;
  transition: y 0.3s;
  animation: dongdong 2s infinite linear;
}
#section1 .btn-gift:hover {
  transform: translateY(-7px);
  background-position: -550px -846px;
}
#section1 .content.on {
  animation: contentUp 0.7s 0.2s ease forwards;
}
#section1 .content.on .title {
  animation: fadeUp 0.6s 0.5s ease forwards;
}
#section1 .content.on .date {
  animation: fadeUp 0.6s 0.6s ease forwards;
}
#section1 .content.on .gift {
  animation: fadeUp 0.8s 0.7s ease forwards;
}
#section1 .content.on .form-wrap h5 {
  animation: fadeUp 0.8s 0.4s ease forwards;
}
#section1 .content.on .form-wrap form {
  animation: fadeUp 0.8s 0.4s ease forwards;
}

/*================================================================= section 2 =================================================================*/
#section2 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_bg.jpg);
  background-size: cover;
  background-color: #fff;
  background-position: center 0;
}
@media (max-width: 991px) {
  #section2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    height: auto !important;
    padding: 40px 0;
  }
}
#section2 .fp-tableCell {
  width: 100%;
}
@media (max-width: 991px) {
  #section2 .inner {
    position: relative;
    width: 100%;
    padding: 0;
    min-height: 0;
    height: auto;
  }
}
#section2 .content {
  width: 100%;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_box.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 1;
  aspect-ratio: 1200/600;
  position: relative;
}
#section2 .content::after {
  content: "";
  display: block;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_box_deco.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 20.6%;
  right: -3.8%;
  top: -7.7%;
  aspect-ratio: 251/255;
  position: absolute;
}
@media (max-width: 1200px) {
  #section2 .content::after {
    display: none;
  }
}
@media (max-width: 1200px) {
  #section2 .content {
    width: 90%;
  }
}
@media (max-width: 991px) {
  #section2 .content {
    background: #fff;
    border-radius: 20px;
    transform: none;
    /*
    width: 100%;
    background: #fff;
    border-radius: 20px;
    transform: none;
    padding: 20px;
    height: auto;
    position: static;
    max-width: 520px;
    */
  }
}
#section2 .content .event-invite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  left: 7%;
  top: 0%;
  width: 30%;
  height: 100%;
  position: absolute;
}
@media (max-width: 991px) {
  #section2 .content .event-invite {
    width: 80%;
    position: static;
    height: auto;
    padding-top: 20px;
    margin: 0 auto;
    max-width: 545px;
    padding-top: 8%;
    padding-left: 0%;
  }
}
#section2 .content .event-invite .sub-title {
  width: 70%;
  height: auto;
  aspect-ratio: 1545/174;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_sub.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .sub-title {
    /*
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/p2_sub_m.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 50%;
    aspect-ratio: 329/38;
    height: auto;
    margin-bottom: 10px;
    */
  }
}
#section2 .content .event-invite .title {
  width: 87%;
  left: 50%;
  height: auto;
  margin: 5% 0;
  aspect-ratio: 345/58;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_title.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .title {
    /*
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/p2_title_m.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 65%;
    aspect-ratio: 416/72;
    height: auto;
    */
  }
}
#section2 .content .event-invite .desc {
  width: 100%;
  text-align: center;
  color: #436aa9;
  font-size: min(14px, 1.1vw);
  letter-spacing: 0px;
  padding: 5px 0;
  margin: 0% 0 4%;
  border-top: 1px solid #436aa9;
  border-bottom: 1px solid #436aa9;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .desc {
    width: 100%;
    padding: 10px 0;
    font-size: min(3.1vw, 14px);
  }
}
#section2 .content .event-invite ul.info {
  width: 100%;
  text-align: center;
  color: #676a70;
  padding: 0 0;
  margin: 0 0 5px;
  text-align: left;
  letter-spacing: 1px;
  padding-left: 0;
  font-size: min(14px, 1.1vw);
}
@media (max-width: 991px) {
  #section2 .content .event-invite ul.info {
    width: 100%;
    padding-left: 10px;
    font-size: min(3.1vw, 14px);
  }
}
#section2 .content .event-invite ul.info li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  align-items: flex-start;
}
#section2 .content .event-invite ul.info span:nth-of-type(1) {
  font-weight: 700;
}
#section2 .content .event-invite ul.info span:nth-of-type(2) {
  font-weight: 400;
}
#section2 .content .event-invite .bar-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 5%;
  margin-top: 0%;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap {
    width: 100%;
  }
}
#section2 .content .event-invite .bar-wrap .bar-item {
  width: 100%;
  height: 70px;
  background-color: #dcdcdc;
  border-radius: 3px;
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  border-radius: 35px;
  color: #fff;
}
#section2 .content .event-invite .bar-wrap .bar-item .icon {
  width: 25%;
  height: 100%;
  aspect-ratio: 106/74;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item .icon {
    width: 25%;
  }
}
#section2 .content .event-invite .bar-wrap .bar-item .progress {
  width: 57%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item .progress {
    width: 60%;
    justify-content: flex-start;
  }
}
#section2 .content .event-invite .bar-wrap .bar-item .progress .name {
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-size: min(3vw, 14px);
  font-weight: 500;
  padding: 0 0 5px 0;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item .progress .name {
    font-size: min(3.5vw, 18px);
  }
}
#section2 .content .event-invite .bar-wrap .bar-item .progress .bar {
  width: 50%;
  height: 12px;
  background-color: #fff;
  border-radius: 6px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item .progress .bar {
    width: 50%;
  }
}
#section2 .content .event-invite .bar-wrap .bar-item .progress .text {
  width: auto;
  width: 50%;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 7px;
  font-size: 10px;
  text-align: left;
  padding: 0 10px;
}
#section2 .content .event-invite .bar-wrap .bar-item .arrow {
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  position: relative;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item .arrow {
    transform: scale(0.9);
  }
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(1) {
  background-color: #ff0302;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(1) {
    margin-bottom: 10px;
  }
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(1) .icon {
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_yt.png) no-repeat;
  background-size: 50%;
  background-position: center;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(1) .icon {
    background-size: min(50px, 60%);
  }
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(1) .progress .bar .line {
  display: inline-block;
  width: 0%;
  height: 100%;
  left: 0;
  background-color: #f39494;
  position: absolute;
  box-shadow: 0 0 5px #fff inset;
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(1) .arrow::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ff0302;
  border-right: 3px solid #ff0302;
  transform: rotate(45deg) scaleX(0.5) translate(-5%, 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%) rotate(45deg);
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(2) {
  background-color: #5865f2;
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(2) .icon {
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_dc.png) no-repeat;
  background-size: 50%;
  background-position: center;
}
@media (max-width: 991px) {
  #section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(2) .icon {
    background-size: min(50px, 60%);
  }
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(2) .progress .bar .line {
  display: inline-block;
  width: 0%;
  height: 100%;
  left: 0;
  background-color: #94acf3;
  position: absolute;
  box-shadow: 0 0 5px #fff inset;
}
#section2 .content .event-invite .bar-wrap .bar-item:nth-of-type(2) .arrow::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 3px solid #5865f2;
  border-right: 3px solid #5865f2;
  transform: rotate(45deg) scaleX(0.5) translate(-5%, 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%) rotate(45deg) translate(-5%, 0);
}
#section2 .content .reward {
  width: 21%;
  height: 100%;
  position: absolute;
  left: 37%;
  top: 0;
  z-index: 10;
}
@media (max-width: 991px) {
  #section2 .content .reward {
    width: 80%;
    margin: 0 auto;
    max-width: 545px;
    position: static;
    height: auto;
  }
}
#section2 .content .reward .rwd-1 {
  width: 90%;
  margin: 25% auto 0;
  aspect-ratio: 100/150;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_prize.png) no-repeat;
  background-size: 100% auto;
  top: 20px;
  left: 35px;
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 991px) {
  #section2 .content .reward .rwd-1 {
    position: static;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_prize_m.png) no-repeat;
    background-size: 100% auto;
    aspect-ratio: 660/288;
    max-width: 330px;
    height: auto;
    margin: 20px auto 10px;
    width: 100%;
  }
}
#section2 .content .reward .rwd-2 {
  width: 90%;
  margin: 5% auto;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  #section2 .content .reward .rwd-2 {
    position: static;
    width: 100%;
    height: auto;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: center;
    gap: 10px;
  }
}
#section2 .content .reward .rwd-2 h5 {
  color: #dd703e;
  font-size: min(14px, 1.1vw);
  text-align: center;
  line-height: 25px;
  letter-spacing: 0px;
  justify-self: center;
}
@media (max-width: 991px) {
  #section2 .content .reward .rwd-2 h5 {
    width: 100%;
    font-size: min(3.5vw, 16px);
  }
}
#section2 .content .reward .rwd-2 a {
  padding: 6px 10px;
  position: relative;
  display: block;
  font-size: 13px;
  border-radius: 15px;
  width: 130px;
  margin: 4px 0;
  text-align: center;
}
@media (max-width: 991px) {
  #section2 .content .reward .rwd-2 a {
    width: 48%;
    justify-self: left;
    font-size: min(4vw, 13px);
  }
}
#section2 .content .reward .rwd-2 a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.6274509804);
  border-right: 1px solid rgba(255, 255, 255, 0.6274509804);
  transform: rotate(45deg) translate(0, -50%);
  margin-left: 4px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
}
#section2 .content .reward .rwd-2 a:nth-of-type(1) {
  background: #dd703e;
  color: #fff;
}
#section2 .content .reward .rwd-2 a:nth-of-type(1):hover {
  background-color: #b64a10;
}
#section2 .content .reward .rwd-2 a:nth-of-type(2) {
  background: #000000;
  color: #fff;
}
#section2 .content .reward .rwd-2 a:nth-of-type(2):hover {
  background-color: #0fb376;
}
#section2 .content .photo {
  width: 37.5%;
  right: 4.9%;
  top: 7%;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s2_polarid.png);
  background-size: 100% auto;
  position: absolute;
  aspect-ratio: 433/465;
  opacity: 1;
}
@media (max-width: 991px) {
  #section2 .content .photo {
    width: 80%;
    max-width: 545px;
    margin: 0 auto 5%;
    position: static;
    /*
    margin-top: 2%;
    width: 100%;
    height: auto;
    aspect-ratio: 433/465;
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/polarid_m.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: 2%;
    */
  }
}
#section2 .content .photo .video {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50.2%);
  width: 83%;
  aspect-ratio: 368/336;
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 991px) {
  #section2 .content .photo .video {
    position: relative;
    left: 50%;
    width: 83%;
    height: auto;
    aspect-ratio: 368/336;
    border-radius: 8px;
    transform: translateX(-50%);
    opacity: 1;
  }
}
#section2 .content .photo .desc {
  position: absolute;
  top: 380px;
  left: 29px;
  width: 404px;
  color: #444;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}
#section2 .content .photo .desc em {
  color: #0fb376;
  font-weight: 800;
}
#section2 .content .photo .tape {
  width: 88px;
  height: 79px;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/sec2-spr.png);
  background-position: 0px -2122px;
  position: absolute;
  left: 360px;
  top: -18px;
  z-index: 2;
}

#section3 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_bg.jpg);
  background-size: cover;
  background-color: #fff;
  background-position: center 0;
  overflow: hidden;
}
@media (max-width: 991px) {
  #section3 {
    /*
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    height: auto !important;
    padding: 40px 0;
    */
  }
}
#section3 .fp-tableCell {
  width: 100%;
}
@media (max-width: 991px) {
  #section3 .inner {
    position: relative;
    width: 100%;
    padding: 0;
    min-height: 0;
    height: auto;
  }
}
#section3 .char {
  width: 387px;
  height: 940px;
  position: absolute;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_char.png);
  background-size: 100% auto;
  bottom: 0;
  left: -160px;
  z-index: 999;
}
@media (max-width: 1200px) {
  #section3 .char {
    display: none;
  }
}
@media (max-width: 991px) {
  #section3 .char {
    display: none;
  }
}
#section3 .content {
  width: 100%;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_box.png);
  aspect-ratio: 732/432;
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 1;
  transform: translateY(0);
  position: relative;
}
@media (max-width: 1200px) {
  #section3 .content {
    width: 90%;
  }
}
@media (max-width: 991px) {
  #section3 .content {
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_box_m.png);
    background-repeat: no-repeat;
    height: auto;
    aspect-ratio: 375/652;
    width: 100%;
    max-height: none;
    background-size: 100% auto;
    position: static;
    padding-top: 40%;
  }
}
#section3 .content .char {
  width: 387px;
  height: 940px;
  position: absolute;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_char.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  bottom: -341px;
  left: -160px;
}
@media (max-width: 991px) {
  #section3 .content .char {
    display: none;
  }
}
#section3 .content .sub {
  text-indent: -999999px;
  width: 44%;
  aspect-ratio: 495/25;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_sub.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  #section3 .content .sub {
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_sub_m.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    aspect-ratio: 575/27;
    width: 80%;
    height: auto;
    position: static;
    transform: none;
    margin: 0 auto;
  }
}
#section3 .content .title {
  text-indent: -999999px;
  width: 56%;
  aspect-ratio: 646/50;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_title.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  #section3 .content .title {
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_title_m.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    aspect-ratio: 452/166;
    height: auto;
    width: 64%;
    position: static;
    transform: none;
    margin: 4% auto;
  }
}
#section3 .content .time {
  color: #13611a;
  width: 52%;
  line-height: 20px;
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_time.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: auto;
  aspect-ratio: 1500/138;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  #section3 .content .time {
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_time.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 343/46;
    line-height: 18px;
    height: auto;
    width: 80%;
    position: static;
    transform: none;
    margin: 4% auto;
    font-size: min(4vw, 15px);
  }
}
#section3 .content .ranks {
  color: #fff;
  width: 50%;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translateX(-50%);
  background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_rank.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  aspect-ratio: 606/124;
  font-size: 12px;
}
@media (max-width: 991px) {
  #section3 .content .ranks {
    background: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s3_rank.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: auto;
    width: 90%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin: 4% auto;
    font-size: min(3.5vw, 14px);
  }
}
#section3 .content .ranks .rank-no1 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 33.3%;
  text-align: center;
}
@media (max-width: 991px) {
  #section3 .content .ranks .rank-no1 {
    font-size: min(2.3vw, 14px);
    width: 30%;
  }
}
#section3 .content .ranks .rank-no2 {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 30%;
  text-align: center;
}
@media (max-width: 991px) {
  #section3 .content .ranks .rank-no2 {
    font-size: min(2.3vw, 14px);
    width: 30%;
  }
}
#section3 .content .ranks .rank-no3 {
  position: absolute;
  bottom: 5%;
  right: 0;
  width: 30%;
  text-align: center;
}
@media (max-width: 991px) {
  #section3 .content .ranks .rank-no3 {
    font-size: min(2.3vw, 14px);
    width: 30%;
  }
}
#section3 .content .notice {
  color: #edeadc;
  position: absolute;
  text-align: center;
  width: 80%;
  font-size: min(14px, 1.1vw);
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 1px;
}
@media (max-width: 991px) {
  #section3 .content .notice {
    width: 85%;
    position: static;
    transform: none;
    margin: 0 auto;
    font-size: min(3.5vw, 14px);
    line-break: anywhere;
  }
}
#section3 .content .btn {
  width: 20%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  height: 60px;
  border-radius: 16px;
  background-color: #0fb376;
  color: #fff;
  font-size: min(4vw, 22px);
  font-weight: 700;
}
@media (max-width: 991px) {
  #section3 .content .btn {
    position: static;
    transform: none;
    margin: 5% auto;
    width: 50%;
    font-size: min(4vw, 22px);
  }
}
#section3 .content .btn:hover {
  transition: 0.2s all;
  background: #17a26f;
}
#section3 .content .btn-noti {
  position: absolute;
  top: 190px;
  right: 60px;
  width: 118px;
  height: 29px;
  background-color: #2e4c32;
  color: #fff;
  font-size: 12px;
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
@media (max-width: 991px) {
  #section3 .content .btn-noti {
    font-size: min(4vw, 15px);
    position: static;
    padding: 8px;
    height: auto;
    border-radius: 25px;
    margin: 0 auto 10px;
    width: 50%;
  }
}
#section3 .content .btn-noti::after {
  width: 3.6px;
  height: 3.6px;
  content: "";
  display: inline-block;
  border-top: 1px solid #7b7b7b;
  border-right: 1px solid #7b7b7b;
  transform: rotate(45deg);
  position: relative;
}
#section3 .content .btn-noti:hover {
  background-color: #0fb376;
}
#section3 .content .btn-noti:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.content0,
.content1,
.content2,
.content3 {
  background-color: #000;
  background-size: cover;
  background-position: center 0;
}
@media (max-width: 991px) {
  .content0,
  .content1,
  .content2,
  .content3 {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .content0 .inner,
  .content1 .inner,
  .content2 .inner,
  .content3 .inner {
    position: relative;
    width: 90%;
    padding: 0;
    min-height: 0;
    height: auto;
  }
}
.content0 .inner .content,
.content1 .inner .content,
.content2 .inner .content,
.content3 .inner .content {
  width: 100%;
  max-width: 1200px;
}
.content0 .inner .content .txt,
.content1 .inner .content .txt,
.content2 .inner .content .txt,
.content3 .inner .content .txt {
  text-indent: -9999px;
}
@media (max-width: 1200px) {
  .content0 .inner .content,
  .content1 .inner .content,
  .content2 .inner .content,
  .content3 .inner .content {
    width: 90%;
  }
}
@media (max-width: 991px) {
  .content0 .inner .content,
  .content1 .inner .content,
  .content2 .inner .content,
  .content3 .inner .content {
    width: 100%;
  }
}

.content0 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c0_bg.jpg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  aspect-ratio: 5120/2153;
}
.content0 .img {
  display: none;
}
.content0 .paper {
  position: absolute;
  left: 50%;
  width: 8%;
  bottom: -7%;
  transform: translateX(-369%);
  z-index: 99;
}
@media (max-width: 991px) {
  .content0 .paper {
    display: none;
  }
}
@media (max-width: 991px) {
  .content0 {
    background-image: none;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .content0 .img {
    display: block;
    width: 100%;
  }
}

.content1 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_bg.jpg);
  background-size: cover;
  height: auto !important;
  padding: 5% 0;
}
@media (max-width: 991px) {
  .content1 {
    padding: 10% 0;
  }
}
.content1 .inner {
  height: auto !important;
}
.content1 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content1 .content .title {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_title.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 44%;
  aspect-ratio: 7.8125;
  margin-bottom: 3%;
}
@media (max-width: 991px) {
  .content1 .content .title {
    width: 70%;
  }
}
.content1 .content .time {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_time.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 32%;
  aspect-ratio: 18.0533333333;
  margin-bottom: 4%;
}
@media (max-width: 991px) {
  .content1 .content .time {
    width: 65%;
  }
}
.content1 .content .main_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 991px) {
  .content1 .content .main_box {
    flex-direction: column;
  }
}
.content1 .content .main_box .box_left {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_login_box_l.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 43%;
  aspect-ratio: 0.7362810896;
  position: relative;
}
@media (max-width: 991px) {
  .content1 .content .main_box .box_left {
    background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_login_box_l_m.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    aspect-ratio: 2.2090032154;
    margin-bottom: 5%;
  }
}
.content1 .content .main_box .box_left .login_btn {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_login.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 43%;
  aspect-ratio: 1.8548094374;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translateX(-50%);
  aspect-ratio: 100/55;
}
@media (max-width: 991px) {
  .content1 .content .main_box .box_left .login_btn {
    background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_login.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 38%;
    aspect-ratio: 1.8548094374;
    left: 50%;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.content1 .content .main_box .box_right {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_login_box_r.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 56.5%;
  aspect-ratio: 0.9680221082;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .content1 .content .main_box .box_right {
    background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c1_login_box_r.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    aspect-ratio: 0.9680221082;
  }
}
.content1 .content .main_box .box_right .top_list {
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content1 .content .main_box .box_right .top_list ul {
  width: 85%;
  list-style-type: disc;
  font-family: "微軟正黑體";
  font-weight: normal;
  color: #666;
  font-size: min(17px, 1.2vw);
  line-height: min(34px, 2.4vw);
  list-style-type: disc;
  padding-left: 4%;
}
@media (max-width: 991px) {
  .content1 .content .main_box .box_right .top_list ul {
    font-size: min(14px, 2.6vw);
    line-height: min(28px, 5.2vw);
  }
}
.content1 .content .main_box .box_right .bot_list {
  width: 100%;
  height: 25%;
  padding-bottom: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.content1 .content .main_box .box_right .bot_list:after {
  position: absolute;
  background: #ececec;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: 0 0 25px 25px;
  mix-blend-mode: multiply;
}
.content1 .content .main_box .box_right .bot_list h4 {
  padding: 1% 3%;
  background-color: #b4bbc1;
  border-radius: 20px;
  color: #fff;
  margin-bottom: 4%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 99;
  transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
  .content1 .content .main_box .box_right .bot_list h4 {
    font-size: min(14px, 2.6vw);
    line-height: min(28px, 5.2vw);
  }
}
.content1 .content .main_box .box_right .bot_list ul {
  width: 85%;
  list-style-type: disc;
  font-family: "微軟正黑體";
  font-weight: normal;
  color: #666;
  position: relative;
  font-size: min(17px, 1.2vw);
  line-height: min(34px, 2.4vw);
  list-style-type: disc;
  padding-left: 4%;
}
@media (max-width: 991px) {
  .content1 .content .main_box .box_right .bot_list ul {
    font-size: min(14px, 2.6vw);
    line-height: min(28px, 5.2vw);
  }
}

.content2 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c2_bg.jpg);
  background-size: cover;
  height: auto !important;
  padding: 5% 0;
}
@media (max-width: 991px) {
  .content2 {
    padding: 10% 0;
  }
}
.content2 .inner {
  height: auto !important;
}
.content2 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content2 .content .title {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c2_title.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 62.4%;
  aspect-ratio: 11.2396694215;
  margin-bottom: 3%;
}
@media (max-width: 991px) {
  .content2 .content .title {
    width: 100%;
  }
}
.content2 .content .sub {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c2_sub.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 32%;
  aspect-ratio: 18.4605263158;
  margin-bottom: 4%;
}
@media (max-width: 991px) {
  .content2 .content .sub {
    width: 71%;
  }
}
.content2 .content .main_box {
  width: 100%;
}
.content2 .content .main_box .top_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content2 .content .main_box .top_box .box {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c2_letter_box.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 30%;
  aspect-ratio: 0.6310444874;
  position: relative;
}
.content2 .content .main_box .top_box .box .name {
  font-family: "PingFang TC", "Microsoft JhengHei", "Apple LiGothic Medium", "微軟正黑體", sans-serif;
  color: #fff;
  font-size: min(35px, 2.5vw);
  text-align: center;
  position: absolute;
  width: 100%;
  left: 50%;
  top: 17%;
  letter-spacing: 2px;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .content2 .content .main_box .top_box .box .name {
    font-size: min(25px, 3vw);
    letter-spacing: 0;
  }
}
.content2 .content .main_box .top_box .box .btn {
  width: 76%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  height: 13%;
  border-radius: 16px;
  background-color: #0fb376;
  color: #fff;
  font-size: min(25px, 1.8vw);
  font-weight: 700;
}
@media (max-width: 991px) {
  .content2 .content .main_box .top_box .box .btn {
    border-radius: 5px;
    font-size: min(25px, 2.5vw);
    width: 85%;
    bottom: 5%;
  }
}
.content2 .content .main_box .top_box .box .btn:hover {
  transition: 0.2s all;
  background-color: #07794f;
}
.content2 .content .main_box .bot_box {
  display: flex;
  flex-direction: column;
}
.content2 .content .main_box .bot_box .title2 {
  width: 8%;
  margin: 5% auto 2%;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .title2 {
    width: 15%;
    margin: 8% auto 2%;
  }
}
.content2 .content .main_box .bot_box .mail_interface {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c2_mail_box.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 1.7293650794;
  position: relative;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface {
    background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c2_mail_box_m.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    aspect-ratio: 1.0489795918;
  }
}
.content2 .content .main_box .bot_box .mail_interface .left {
  width: 23%;
  height: 83%;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .left {
    width: 27%;
  }
}
.content2 .content .main_box .bot_box .mail_interface .left .name_btn {
  width: 93%;
  height: 15%;
  color: #fff;
  font-size: min(18px, 1.5vw);
  display: flex;
  align-items: center;
  padding-left: 15%;
  position: relative;
  border-bottom: 1px solid #4a4e66;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .left .name_btn {
    font-size: min(25px, 2.5vw);
  }
}
.content2 .content .main_box .bot_box .mail_interface .left .name_btn.active {
  background: #2b2f42;
  border-bottom: none;
}
.content2 .content .main_box .bot_box .mail_interface .left .name_btn.active::before {
  content: "";
  width: 3%;
  height: 100%;
  display: block;
  position: absolute;
  background-color: #0fb376;
  top: 0;
  left: 0;
}
.content2 .content .main_box .bot_box .mail_interface .left .name_btn.new::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #ff8181;
  transform: translateY(-80%);
  margin: 5px;
}
.content2 .content .main_box .bot_box .mail_interface .right {
  width: 77%;
  height: 100%;
  margin-top: 17%;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right {
    width: 73%;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .top_name {
  width: 100%;
  padding-left: 5%;
  height: 17%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .top_name {
    height: 19.5%;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .top_name .name {
  font-size: min(4vw, 24px);
  margin-bottom: 0.5%;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .top_name .name {
    font-size: min(24px, 3.5vw);
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .top_name .subname {
  color: #adadad;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .top_name .subname {
    font-size: min(18px, 2.5vw);
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom {
  width: 100%;
  height: 80%;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom {
    height: 79.5%;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap {
  height: 78%;
  width: calc(100% - 60px);
  margin: 2% auto;
  padding: 2%;
  overflow-x: hidden;
  overflow-y: auto;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap.empty {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap.empty .empty_img {
  width: 60%;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap.empty .empty_img {
    width: 80%;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap {
  /* 1. 設定捲軸整體寬度 */
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap::-webkit-scrollbar {
  width: 5px;
  /* 垂直捲軸寬度 */
  height: 5px;
  /* 水平捲軸高度 */
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap {
  /* 2. 設定捲軸軌道 (Background) */
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap {
  /* 3. 設定捲軸滑塊 (Thumb) */
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap::-webkit-scrollbar-thumb {
  background: #0fb376;
  border-radius: 5px;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap {
  /* 4. 設定滑塊懸停效果 (Hover) */
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap::-webkit-scrollbar-thumb:hover {
  background: #0fb376;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap {
    width: calc(100% - 40px);
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list.l {
  justify-content: flex-start;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list.r {
  justify-content: flex-end;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg {
  background: #ececec;
  padding: 3% 3%;
  margin-bottom: 5%;
  max-width: 70%;
  min-width: 0;
  flex: 0 1 auto;
  width: auto;
  display: inline;
  position: relative;
  clear: both;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  font-size: min(17px, 1.2vw);
  line-height: min(30px, 2vw);
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg {
    font-size: min(18px, 2.5vw);
    line-height: min(30px, 5vw);
    max-width: 100%;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg .arrow {
  width: 30px;
  height: 30px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg .arrow::after {
  content: "";
  background: #ececec;
  position: absolute;
  width: 185%;
  height: 100%;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_l {
  border-radius: 15px 15px 15px 0;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_l .arrow {
  left: -30px;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_l .arrow {
    left: -25px;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_l .arrow::after {
  transform: rotate(-45deg) translate(0%, -50%);
  top: 16px;
  left: 100%;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_r {
  border-radius: 15px 15px 0 15px;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_r .arrow {
  right: -30px;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_r .arrow {
    right: -25px;
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .msg_wrap .msg_list .msg.msg_r .arrow::after {
  transform: rotate(45deg) translate(0%, -50%);
  top: 16px;
  right: 100%;
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .btn {
  width: 90%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  height: 10%;
  border-radius: 16px;
  background-color: #0fb376;
  color: #fff;
  font-size: min(25px, 1.8vw);
  font-weight: 700;
}
@media (max-width: 991px) {
  .content2 .content .main_box .bot_box .mail_interface .right .bottom .btn {
    border-radius: 5px;
    font-size: min(25px, 2.5vw);
  }
}
.content2 .content .main_box .bot_box .mail_interface .right .bottom .btn:hover {
  transition: 0.2s all;
  background-color: #07794f;
}

.content3 {
  background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c3_bg.jpg);
  background-size: cover;
  padding: 5% 0;
}
@media (max-width: 991px) {
  .content3 {
    padding: 10% 0;
  }
}
.content3 .inner {
  height: auto !important;
}
.content3 .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .content3 .content {
    flex-direction: column;
  }
}
.content3 .content .char {
  width: 43%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .content3 .content .char {
    width: 100%;
    transform: translateX(-10%);
  }
}
.content3 .content .char img {
  width: 100%;
}
.content3 .content .main {
  width: 56%;
}
@media (max-width: 991px) {
  .content3 .content .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.content3 .content .main .title {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c3_title.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 90%;
  aspect-ratio: 4.3099173554;
  margin-bottom: 5%;
}
.content3 .content .main .sub {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c3_sub.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 90%;
  aspect-ratio: 29.6133333333;
  margin-bottom: 5%;
}
.content3 .content .main .btn {
  background-image: url("https://nxtw.dn.nexoncdn.co.kr/mbm/event/2026/0624_a4d2pdi50g/s4/c3_btn.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 90%;
  aspect-ratio: 5.7772020725;
  margin-bottom: 3%;
}
@media (max-width: 991px) {
  .content3 .content .main .btn {
    width: 100%;
    margin-bottom: 3%;
  }
}
.content3 .content .main ul {
  width: 100%;
  list-style-type: disc;
  font-family: "微軟正黑體";
  font-weight: normal;
  color: #fff;
  position: relative;
  font-size: min(17px, 1.2vw);
  line-height: min(34px, 2.4vw);
  list-style-type: disc;
  padding-left: 4%;
}
@media (max-width: 991px) {
  .content3 .content .main ul {
    font-size: min(14px, 2.6vw);
    line-height: min(28px, 5.2vw);
  }
}

#footerJS {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff !important;
  position: relative;
  height: 90px !important;
}
@media (max-width: 991px) {
  #footerJS {
    height: 150px !important;
  }
}

.footBox {
  width: 98%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  gap: 20px;
  background-color: #fff;
}
@media (max-width: 991px) {
  .footBox {
    max-width: 530px;
    width: 106%;
    height: auto;
    transform: scale(0.9) translateX(-2%);
    justify-content: center;
    padding: 10px 0;
    gap: 10px;
  }
}
.footBox img.foCi {
  margin: 5px 0;
  margin-right: 10px;
  max-height: 30px;
}
.footBox img.foTasri {
  margin: 5px 10px;
}
@media (max-width: 991px) {
  .footBox img.foTasri {
    width: 40px;
    margin: 0 10px 0 0;
  }
}
.footBox p.foCopy {
  font-size: 10px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0;
  color: #525252;
  text-align: center;
}
@media (max-width: 991px) {
  .footBox p.foCopy {
    font-size: 10px;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0;
    width: 100%;
  }
}
.footBox .bi {
  display: flex;
  align-items: center;
}
.footBox .list {
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .footBox .list {
    justify-content: center;
    transform: scale(0.9);
  }
}
.footBox ul.foList {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: 0;
  list-style-type: none;
  color: #525252;
}
@media (max-width: 991px) {
  .footBox ul.foList {
    letter-spacing: 0 !important;
    width: auto;
    flex: 0 0 auto;
  }
}
.footBox ul.foList li {
  line-height: 1.5em;
}
/*# sourceMappingURL=style.css.map */