@charset "UTF-8";
/* s: reset css */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

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

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: rgb(11, 19, 43);
}

input,
button {
  outline: 0;
}

/* e: reset css */
/* s: 스크롤바 커스텀 */
::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  height: 17%;
  background-color: rgba(80, 79, 79, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(41, 41, 41, 0.2);
}

/* e: 스크롤바 커스텀 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(../../fonts/Poppins-Thin.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/Poppins-Light.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/Poppins-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../../fonts/Poppins-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../fonts/Poppins-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../fonts/Poppins-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../../fonts/Poppins-ExtraBold.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../../fonts/Poppins-Black.ttf) format("truetype");
}
@font-face {
  font-family: "DnfBitbeatV2";
  src: url("https://cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
body {
  font-size: 16px;
  font-weight: 400;
  color: rgb(41, 47, 56);
  width: 100%;
  font-family: "Poppins", "Pretendard Variable", Pretendard, serif;
  line-height: 1.2;
  word-break: break-all;
}
body.not_scroll {
  overflow-y: hidden;
}

button {
  display: block;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  font-family: "Poppins", serif;
  cursor: pointer;
}
button.btn {
  transition: all 0.3s;
}
button.btn.arr {
  border-radius: 10px;
  height: 37px;
  line-height: 37px;
  padding: 0 46px 0 22px;
  font-size: 14px;
  font-weight: 500;
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 22px center;
}
button.btn.arr.gray {
  background-color: rgb(75, 69, 70);
  color: #fff;
  background-image: url(../../assets/images/bunjang/icon_arr_w.svg);
}
button.btn.arr.gray:hover {
  background-color: #f52439;
}
button.btn.arr.white {
  padding: 0 46px 0 22px;
  background-color: rgb(255, 255, 255);
  color: rgb(44, 35, 38);
  background-image: url(../../assets/images/bunjang/icon_arr_b_20.svg);
}
button.btn.border {
  height: 40px;
  line-height: 38px;
  border: 1px solid rgb(149, 161, 178);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgb(122, 138, 159);
}
button.btn.border_b {
  height: 40px;
  line-height: 38px;
  border: 1px solid #95a1b2;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #292f38;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
button.btn.border_b:disabled {
  color: #7a8a9f;
  font-weight: 400;
  cursor: default;
}
button.btn.border_b .icon {
  width: 20px;
  height: 20px;
}
button.btn.border_b .icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
button.btn.shadow {
  position: relative;
  width: 320px;
}
button.btn.shadow span {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid rgb(11, 19, 43);
  border-radius: 10px;
  height: 51px;
  line-height: 38px;
  background: #fff;
  position: relative;
  z-index: 10;
  transition: all 120ms;
}
button.btn.shadow::before {
  content: "";
  width: calc(100% - 8px);
  height: 100%;
  border-radius: 10px;
  background: rgb(172, 186, 235);
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  transition: all 120ms;
}
button.btn.shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid rgb(11, 19, 43);
  border-radius: 10px;
  background: rgb(26, 79, 255);
  position: absolute;
  bottom: -8px;
  left: 0;
  box-sizing: border-box;
  transition: all 120ms;
}
button.btn.shadow:hover span {
  transform: translateY(4px);
}
button.btn.shadow:hover::before {
  transform: translate(-50%, -4px);
}
button.btn.shadow:active span {
  transform: translateY(8px);
}
button.btn.shadow:active::before {
  transform: translate(-50%, -8px);
}
button.btn.shadow.sm span {
  height: 40px;
  line-height: 38px;
  font-size: 16px;
}
button.btn.shadow.sm::before {
  content: "";
  width: calc(100% - 8px);
  height: 100%;
  border-radius: 10px;
  background: rgb(172, 186, 235);
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  transition: all 120ms;
}
button.btn.shadow.sm::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid rgb(11, 19, 43);
  border-radius: 10px;
  background: rgb(26, 79, 255);
  position: absolute;
  bottom: -8px;
  left: 0;
  box-sizing: border-box;
  transition: all 120ms;
}
button.btn.shadow.sm:hover span {
  transform: translateY(4px);
}
button.btn.shadow.sm:hover::before {
  transform: translate(-50%, -4px);
}
button.btn.shadow.sm:active span {
  transform: translateY(8px);
}
button.btn.shadow.sm:active::before {
  transform: translate(-50%, -8px);
}
@media (max-width: 1920px) {
  button.btn.shadow.sm span {
    height: 2.0833vw;
    line-height: 1.9792vw;
    font-size: 0.8333vw;
  }
  button.btn.shadow.sm::before {
    width: calc(100% - 0.4167vw);
    border-radius: 0.5208vw;
    bottom: -0.8333vw;
  }
  button.btn.shadow.sm::after {
    border-radius: 0.5208vw;
    bottom: -0.4167vw;
  }
  button.btn.shadow.sm:hover span {
    transform: translateY(0.2083vw);
  }
  button.btn.shadow.sm:hover::before {
    transform: translate(-50%, -0.2083vw);
  }
  button.btn.shadow.sm:active span {
    transform: translateY(0.4167vw);
  }
  button.btn.shadow.sm:active::before {
    transform: translate(-50%, -0.4167vw);
  }
}
@media (max-width: 768px) {
  button.btn.shadow.sm span {
    height: 8.8889vw;
    line-height: 8.3333vw;
    font-size: 3.3333vw;
    border-radius: 2.7778vw;
  }
  button.btn.shadow.sm::before {
    width: calc(100% - 2.2222vw);
    bottom: -4.4444vw;
    border-radius: 2.7778vw;
  }
  button.btn.shadow.sm::after {
    border-radius: 2.7778vw;
    bottom: -2.2222vw;
  }
}
button.btn.shadow.blue span {
  background: rgb(61, 104, 254);
  color: #fff;
  font-weight: 600;
}
button.btn.shadow.blue:hover span {
  background: #4d58ff;
}
button.btn.shadow.blue:active span {
  background: #002cbd;
}
button.btn.shadow.blue::after {
  background: rgb(0, 44, 189);
}
button.btn.shadow.blue:disabled span {
  transform: translateY(8px);
  background: rgb(228, 232, 236);
  color: rgb(122, 138, 159);
  box-shadow: inset 0px 5px 0 0 #cad0d8;
}
button.btn.shadow.blue:disabled::before {
  transform: translate(-50%, -8px);
}
button.btn.shadow.blue:disabled::after {
  transform: translate(0, -8px);
  background: rgb(149, 161, 178);
}
button.btn.shadow.red span {
  background: rgb(255, 89, 111);
  color: #fff;
  font-weight: 600;
}
button.btn.shadow.red::before {
  background: rgb(253, 211, 215);
}
button.btn.shadow.red::after {
  background: rgb(216, 11, 31);
}
button.btn.shadow.red:hover span {
  background: #f52439;
}
button.btn.shadow.red:active span {
  background: #d80b1f;
}
button.btn.shadow.green span {
  background: rgb(23, 228, 180);
  font-weight: 600;
}
button.btn.shadow.green::before {
  background: rgb(209, 235, 172);
}
button.btn.shadow.green::after {
  background: rgb(0, 136, 104);
}
button.btn.shadow.green:hover span {
  background: #00daae;
}
button.btn.shadow.green:active span {
  background: #00daae;
}
button.btn.shadow.reward_7 span {
  background: #d5ffa4;
  font-weight: 600;
}
button.btn.shadow.reward_7::before {
  background: #ccebac;
}
button.btn.shadow.reward_7::after {
  background: #76b72b;
}
button.btn.shadow.reward_7:hover span {
  background: #b6f46e;
}
button.btn.shadow.reward_7:active span {
  background: #83c735;
}
button.btn.shadow.reward_6 span {
  background: #ffad6e;
  font-weight: 600;
}
button.btn.shadow.reward_6::before {
  background: #ebb9ac;
}
button.btn.shadow.reward_6::after {
  background: #c56822;
}
button.btn.shadow.reward_6:hover span {
  background: #ff9545;
}
button.btn.shadow.reward_6:active span {
  background: #cd712c;
  color: #fff;
}
button.btn.shadow.reward_5 span {
  background: #ff7186;
  color: #fff;
  font-weight: 600;
}
button.btn.shadow.reward_5::before {
  background: #ebacad;
}
button.btn.shadow.reward_5::after {
  background: #d21a36;
}
button.btn.shadow.reward_5:hover span {
  background: #ff4a65;
}
button.btn.shadow.reward_5:active span {
  background: #d21a36;
}
button.btn.shadow.reward_4 span {
  background: #ffe28f;
  font-weight: 600;
}
button.btn.shadow.reward_4::before {
  background: #ebdeac;
}
button.btn.shadow.reward_4::after {
  background: #d9a100;
}
button.btn.shadow.reward_4:hover span {
  background: #ffd55d;
}
button.btn.shadow.reward_4:active span {
  background: #d9a100;
}
button.btn.shadow.reward_3 span {
  background: #ccffd6;
  font-weight: 600;
}
button.btn.shadow.reward_3::before {
  background: #cbedc7;
}
button.btn.shadow.reward_3::after {
  background: #00ad24;
}
button.btn.shadow.reward_3:hover span {
  background: #7cf495;
}
button.btn.shadow.reward_3:active span {
  background: #00ad24;
}
button.btn.shadow.reward_2 span {
  background: #3d68fe;
  color: #fff;
  font-weight: 600;
}
button.btn.shadow.reward_2::before {
  background: #acbaeb;
}
button.btn.shadow.reward_2::after {
  background: #002cbd;
}
button.btn.shadow.reward_2:hover span {
  background: #4d58ff;
}
button.btn.shadow.reward_2:active span {
  background: #002cbd;
}
button.btn.shadow.reward_1 span {
  background: #c27dff;
  font-weight: 600;
}
button.btn.shadow.reward_1::before {
  background: #d2aceb;
}
button.btn.shadow.reward_1::after {
  background: #7400da;
}
button.btn.shadow.reward_1:hover span {
  background: #af55ff;
}
button.btn.shadow.reward_1:active span {
  background: #7400da;
}
button.btn.shadow.cart span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
button.btn.shadow.cart span::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../assets/images/bunjang/icon_cart.svg) no-repeat center/contain;
}
button.btn.shadow.purchase span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
button.btn.shadow.purchase span::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../assets/images/bunjang/icon_history_w.svg) no-repeat center/contain;
}
@media (max-width: 100vw) {
  button.btn.shadow {
    width: 16.6667vw;
  }
  button.btn.shadow span {
    font-size: 0.8333vw;
    border-radius: 0.5208vw;
    height: 2.6563vw;
    line-height: 1.9792vw;
  }
  button.btn.shadow::before {
    width: calc(100% - 0.4167vw);
    border-radius: 0.5208vw;
    bottom: -0.8333vw;
  }
  button.btn.shadow::after {
    border-radius: 0.5208vw;
    bottom: -0.4167vw;
    left: 0;
  }
  button.btn.shadow.blue span {
    background: rgb(61, 104, 254);
  }
  button.btn.shadow.blue:hover span {
    background: #4d58ff;
  }
  button.btn.shadow.blue:active span {
    background: #002cbd;
  }
  button.btn.shadow.cart span {
    gap: 0.2083vw;
  }
  button.btn.shadow.cart span::before {
    width: 1.0417vw;
    height: 1.0417vw;
  }
  button.btn.shadow.purchase span {
    gap: 0.2083vw;
  }
  button.btn.shadow.purchase span::before {
    width: 1.0417vw;
    height: 1.0417vw;
  }
}

.event_detail_wr img {
  display: block;
  width: 100%;
}

.landing_body_wr {
  width: 100%;
  max-width: 1920px;
  margin: 60px auto 0;
  overflow: hidden;
}
.landing_body_wr header {
  position: fixed;
  height: 60px;
  width: 100%;
  max-width: 1920px;
  background: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
}
.landing_body_wr header h1 {
  width: 140px;
  height: 44px;
}
.landing_body_wr footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  line-height: 1.2;
  color: #0b132b;
  background: #947e7e;
  position: relative;
  text-align: center;
}
.landing_body_wr footer .copy {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}
.landing_body_wr footer .info {
  font-weight: 600;
  font-size: 28px;
}
@media (max-width: 1920px) {
  .landing_body_wr {
    margin: 3.125vw auto 0;
  }
  .landing_body_wr header {
    height: 3.125vw;
  }
  .landing_body_wr header h1 {
    width: 7.2917vw;
    height: 2.2917vw;
  }
  .landing_body_wr footer {
    padding: 4.1667vw 0;
  }
  .landing_body_wr footer .copy {
    font-size: 2.0833vw;
    margin-bottom: 1.0417vw;
  }
  .landing_body_wr footer .info {
    font-size: 1.4583vw;
  }
}

section.sec {
  position: relative;
  width: 100%;
  height: 900px;
}
section.sec .bg_img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
section.sec .bg_img img {
  width: 100%;
  height: 100%;
}
section.sec .inner {
  position: relative;
  z-index: 10;
}
section.sec article img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
section.sec.section_1 {
  width: 100%;
  height: 900px;
}
section.sec.section_1 .bg_img {
  background: url(../../assets/images/campaign/section_bg_1.png) no-repeat center/cover;
}
section.sec.section_1 .event_star div {
  transform: scale(1);
  opacity: 0;
  transform-style: preserve-3d;
  will-change: opacity, transform;
}
section.sec.section_1 .mo_contents {
  display: none;
}
section.sec.section_1 .left_star_1 {
  width: 307px;
  height: 379px;
  left: 0;
  top: -64px;
  position: absolute;
}
section.sec.section_1 .right_star_1 {
  width: 307px;
  height: 351px;
  right: 0;
  top: -27px;
  position: absolute;
}
section.sec.section_1 .left_star_2 {
  width: 149px;
  height: 143px;
  left: 634px;
  top: 636px;
  position: absolute;
}
section.sec.section_1 .right_star_2 {
  width: 191px;
  height: 185px;
  right: 431px;
  top: 530px;
  position: absolute;
}
section.sec.section_1 .event_logo_wr {
  padding-top: 80px;
}
section.sec.section_1 .event_logo {
  width: 1058px;
  height: 364px;
  margin: 0 auto 20px;
  transform: scale(0);
  opacity: 0;
}
section.sec.section_1 .event_caption {
  width: 678px;
  height: 121px;
  margin: 20px auto;
}
section.sec.section_1 .event_btn {
  margin-bottom: 77px;
}
section.sec.section_1 .event_btn button {
  width: 164px;
  height: 47px;
  margin: 0 auto;
  background: url(../../assets/images/campaign/event_btn.svg) no-repeat center/contain;
  transition: all 0.3s;
}
section.sec.section_1 .event_btn button:hover {
  background: url(../../assets/images/campaign/event_btn_on.svg) no-repeat center/contain;
}
section.sec.section_1 .scroll_arr .txt {
  width: 173px;
  height: 15px;
  margin: 0 auto 16px;
}
section.sec.section_1 .scroll_arr .arr {
  width: 49px;
  height: 57px;
  margin: 0 auto;
  transition: all 0.3s;
  /* 애니메이션 속성 */
  animation-name: scroll-down-flow; /* 위에서 정의한 키프레임 이름 */
  animation-duration: 1.2s; /* 시간을 2초로 늘려 더 느리고 부드럽게 */
  animation-timing-function: ease-in-out; /* 부드러운 곡선 운동을 위한 타이밍 함수 */
  animation-iteration-count: infinite; /* 무한 반복 */
}
section.sec.section_1 .contents .left_contents {
  width: 694px;
  height: 625px;
  position: absolute;
  top: 310px;
  left: -30px;
  transform: translateX(-5%);
  transform: translateX(-100%);
}
section.sec.section_1 .contents .right_contents {
  width: 561px;
  height: 579px;
  position: absolute;
  top: 390px;
  right: -30px;
  transform: translateX(100%);
}
section.sec.section_1.on .left_star_1 {
  animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
}
section.sec.section_1.on .right_star_1 {
  animation: appear 0.1s ease-in-out forwards, twinkle 1.2s ease-in-out 0.3s infinite alternate;
}
section.sec.section_1.on .left_star_2 {
  animation: appear 0.1s ease-in-out forwards, twinkle 1.4s ease-in-out 0.3s infinite alternate;
}
section.sec.section_1.on .right_star_2 {
  animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
}
section.sec.section_1.on .event_logo {
  animation: appearAndBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
  transform: scale(1);
  opacity: 1;
}
section.sec.section_1.on .contents.on .left_contents {
  animation: slideInLeft 0.4s ease-out forwards;
}
section.sec.section_1.on .contents.on .right_contents {
  animation: slideInRight 0.4s ease-out forwards;
}
@media (max-width: 1920px) {
  section.sec.section_1 {
    height: 46.875vw;
  }
  section.sec.section_1 .left_star_1 {
    width: 15.9896vw;
    height: 19.7396vw;
    top: -3.3333vw;
  }
  section.sec.section_1 .right_star_1 {
    width: 15.9896vw;
    height: 18.2813vw;
    top: -1.4063vw;
  }
  section.sec.section_1 .left_star_2 {
    width: 7.7604vw;
    height: 7.4479vw;
    left: 33.0208vw;
    top: 33.125vw;
  }
  section.sec.section_1 .right_star_2 {
    width: 9.9479vw;
    height: 9.6354vw;
    right: 22.4479vw;
    top: 27.6042vw;
  }
  section.sec.section_1 .event_logo_wr {
    padding-top: 4.1667vw;
  }
  section.sec.section_1 .event_logo {
    width: 55.1042vw;
    height: 18.9583vw;
  }
  section.sec.section_1 .event_caption {
    width: 35.3125vw;
    height: 6.3021vw;
    margin: 1.0417vw auto;
  }
  section.sec.section_1 .event_btn {
    margin-bottom: 4.0104vw;
  }
  section.sec.section_1 .event_btn button {
    width: 8.5417vw;
    height: 2.4479vw;
    margin: 0 auto;
  }
  section.sec.section_1 .scroll_arr .txt {
    width: 9.0104vw;
    height: 0.7813vw;
    margin: 0 auto 0.8333vw;
  }
  section.sec.section_1 .scroll_arr .arr {
    width: 2.5521vw;
    height: 2.9688vw;
  }
  section.sec.section_1 .contents .left_contents {
    width: 36.1458vw;
    height: 32.5521vw;
    top: 16.1458vw;
    left: 0;
  }
  section.sec.section_1 .contents .right_contents {
    width: 29.2188vw;
    height: 30.1563vw;
    top: 20.3125vw;
    right: 0;
  }
}
section.sec.section_2 {
  height: 1898px;
  padding-top: 80px;
}
section.sec.section_2 .bg_img {
  background: url(../../assets/images/campaign/section_bg_2.png) no-repeat center/cover;
}
section.sec.section_2 .inner {
  opacity: 1;
  transition: all 2s;
}
section.sec.section_2 .event_info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.sec.section_2 .event_info .title {
  width: 1030px;
  height: 363px;
}
section.sec.section_2 .event_info .coupons_wr {
  position: relative;
  width: 843px;
  height: 1100px;
  margin-bottom: 80px;
}
section.sec.section_2 .event_info .coupons_wr .txt {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}
section.sec.section_2 .event_info .coupons_wr .txt b {
  color: #00c178;
}
section.sec.section_2 .event_info .coupons_wr .coupons {
  width: 889px;
  height: 1077px;
}
section.sec.section_2 .event_info .coupons_wr .msg {
  width: 278px;
  height: 83px;
  position: absolute;
  animation: cloudyemove 2s infinite ease-in-out;
}
section.sec.section_2 .event_info .coupons_wr .msg.msg_1 {
  top: 240px;
  right: 190px;
}
section.sec.section_2 .event_info .coupons_wr .msg.msg_2 {
  top: 494px;
  left: 78px;
}
section.sec.section_2 .event_info .coupons_wr .msg.msg_3 {
  top: 738px;
  right: 192px;
}
section.sec.section_2 .event_info .btn {
  margin-bottom: 140px;
}
section.sec.section_2 .event_info .btn button {
  width: 666px;
  height: 135px;
  margin: 0 auto;
  transition: all 0.3s;
  background: url(../../assets/images/campaign/section_2_btn_2.svg) no-repeat center/contain;
}
section.sec.section_2 .event_info .btn button:hover {
  background: url(../../assets/images/campaign/section_2_btn_on_2.svg) no-repeat center/contain;
}
section.sec.section_2 .contents .left_contents {
  width: 935px;
  height: 789px;
  position: absolute;
  top: 750px;
  left: -570px;
}
section.sec.section_2 .contents .right_contents {
  width: 976px;
  height: 629px;
  position: absolute;
  top: 250px;
  right: -550px;
}
section.sec.section_2 .section_2_star div {
  position: absolute;
}
section.sec.section_2 .section_2_star .money {
  width: 212px;
  height: 162px;
  top: 780px;
  right: 228px;
}
section.sec.section_2 .section_2_star .star_left_1 {
  width: 69px;
  height: 70px;
  top: 337px;
  left: 97px;
}
section.sec.section_2 .section_2_star .star_left_2 {
  width: 24px;
  height: 25px;
  top: 715px;
  left: 308px;
}
section.sec.section_2 .section_2_star .star_left_3 {
  width: 97px;
  height: 98px;
  top: 705px;
  left: 363px;
}
section.sec.section_2 .section_2_star .star_right_1 {
  width: 32px;
  height: 31px;
  top: 1114px;
  right: 355px;
}
section.sec.section_2 .section_2_star .star_right_2 {
  width: 61px;
  height: 64px;
  top: 1038px;
  right: 282px;
}
section.sec.section_2 .section_2_star .star_left_1 {
  animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
}
section.sec.section_2 .section_2_star .star_left_2 {
  animation: appear 0.1s ease-in-out forwards, twinkle 1.2s ease-in-out 0.3s infinite alternate;
}
section.sec.section_2 .section_2_star .star_right_2,
section.sec.section_2 .section_2_star .star_left_3 {
  animation: appear 0.1s ease-in-out forwards, twinkle 1.4s ease-in-out 0.3s infinite alternate;
}
section.sec.section_2 .section_2_star .star_right_1 {
  animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
}
@media (max-width: 1920px) {
  section.sec.section_2 {
    height: 98.8542vw;
    padding-top: 4.1667vw;
  }
  section.sec.section_2 .event_info .title {
    width: 53.6458vw;
    height: 18.9063vw;
  }
  section.sec.section_2 .event_info .coupons_wr {
    width: 43.9063vw;
    height: 57.2917vw;
    margin-bottom: 4.1667vw;
  }
  section.sec.section_2 .event_info .coupons_wr .txt {
    font-size: 2.0833vw;
  }
  section.sec.section_2 .event_info .coupons_wr .coupons {
    width: 46.3021vw;
    height: 56.0938vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg {
    width: 14.4792vw;
    height: 4.3229vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg.msg_1 {
    top: 12.5vw;
    right: 9.8958vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg.msg_2 {
    top: 25.7292vw;
    left: 4.0625vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg.msg_3 {
    top: 38.4375vw;
    right: 10vw;
  }
  section.sec.section_2 .event_info .btn {
    margin-bottom: 7.2917vw;
  }
  section.sec.section_2 .event_info .btn button {
    width: 34.6875vw;
    height: 7.0313vw;
  }
  section.sec.section_2 .contents .left_contents {
    width: 48.6979vw;
    height: 41.0938vw;
    top: 39.0625vw;
    left: -29.6875vw;
  }
  section.sec.section_2 .contents .right_contents {
    width: 50.8333vw;
    height: 32.7604vw;
    top: 13.0208vw;
    right: -28.6458vw;
  }
  section.sec.section_2 .section_2_star .money {
    width: 11.0417vw;
    height: 8.4375vw;
    top: 40.625vw;
    right: 11.875vw;
  }
  section.sec.section_2 .section_2_star .star_left_1 {
    width: 3.5938vw;
    height: 3.6458vw;
    top: 17.5521vw;
    left: 5.0521vw;
  }
  section.sec.section_2 .section_2_star .star_left_2 {
    width: 1.25vw;
    height: 1.3021vw;
    top: 37.2396vw;
    left: 16.0417vw;
  }
  section.sec.section_2 .section_2_star .star_left_3 {
    width: 5.0521vw;
    height: 5.1042vw;
    top: 36.7188vw;
    left: 18.9063vw;
  }
  section.sec.section_2 .section_2_star .star_right_1 {
    width: 1.6667vw;
    height: 1.6146vw;
    top: 58.0208vw;
    right: 18.4896vw;
  }
  section.sec.section_2 .section_2_star .star_right_2 {
    width: 3.1771vw;
    height: 3.3333vw;
    top: 54.0625vw;
    right: 14.6875vw;
  }
}
section.sec.section_3 {
  height: 2427px;
  padding-top: 80px;
}
section.sec.section_3 .bg_img {
  background: url(../../assets/images/campaign/section_bg_3.png) no-repeat center/cover;
}
section.sec.section_3 .inner {
  opacity: 1;
}
section.sec.section_3 .title {
  width: 1065px;
  height: 309px;
  margin: 0 auto 100px;
}
section.sec.section_3 .contents_wr {
  width: 1712px;
  height: 1287px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
section.sec.section_3 .contents_wr .contents {
  width: 100%;
  height: 100%;
  background: url(../../assets/images/campaign/section_3_contents.svg) no-repeat center/contain;
}
section.sec.section_3 .contents_wr .machine {
  width: 705px;
  height: 700px;
  position: absolute;
  top: 293px;
  left: 0;
  animation: cloudyemove2 2s infinite ease-in-out;
}
section.sec.section_3 .contents_wr .controller {
  width: 593px;
  height: 623px;
  position: absolute;
  top: 613px;
  left: 444px;
  animation: cloudyemove2 2.3s infinite ease-in-out 0.2s;
}
section.sec.section_3 .contents_wr .controller .tap {
  width: 111px;
  height: 131px;
  position: absolute;
  top: 256px;
  right: 10%;
  z-index: 1;
  pointer-events: none;
  animation: tapAnimation 1s infinite;
}
section.sec.section_3 .contents_wr .ball {
  width: 196px;
  height: 196px;
  position: absolute;
  top: 643px;
  right: 463px;
}
section.sec.section_3 .contents_wr .ball img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: capsuleWobble 1.5s ease-in-out infinite;
}
section.sec.section_3 .contents_wr .btn {
  width: 519px;
  height: 137px;
  position: absolute;
  z-index: 20;
  top: 960px;
  right: 0;
  background: url(../../assets/images/campaign/section3_btn.svg) no-repeat center/contain;
  transition: all 0.3s;
}
section.sec.section_3 .contents_wr .btn:hover {
  background: url(../../assets/images/campaign/section3_btn_on.svg) no-repeat center/contain;
}
section.sec.section_3 .section_3_star_mo {
  display: none;
}
section.sec.section_3 .section_3_star .star_left {
  width: 323px;
  height: 310px;
  position: absolute;
  top: -141px;
  left: -95px;
}
section.sec.section_3 .section_3_star .star_right {
  width: 323px;
  height: 310px;
  position: absolute;
  top: 286px;
  right: -52px;
}
section.sec.section_3 .section_3_star .star_right_2 {
  width: 323px;
  height: 310px;
  position: absolute;
  top: 1214px;
  right: -53px;
}
section.sec.section_3 .bottom_wr {
  width: 1219px;
  height: 332px;
  margin: 0 auto;
}
section.sec.section_3 .bottom_wr .bottom {
  animation: cloudyemove2 2s infinite ease-in-out 0.3s;
}
section.sec.section_3 .bottom_wr .shadow {
  margin-top: 20px;
  padding: 0 80px;
}
section.sec.section_3 .btn_wr {
  margin: 68px auto 120px;
  width: 666px;
  height: 135px;
}
section.sec.section_3 .btn_wr .btn {
  width: 100%;
  height: 100%;
  background: url(../../assets/images/campaign/section3_btn_2.svg) no-repeat center/contain;
  transition: all 0.3s;
}
section.sec.section_3 .btn_wr .btn:hover {
  background: url(../../assets/images/campaign/section3_btn_on_2.svg) no-repeat center/contain;
}
section.sec.section_3 .section_3_star .star_left {
  animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
}
section.sec.section_3 .section_3_star .star_right {
  animation: appear 0.1s ease-in-out forwards, twinkle 1.2s ease-in-out 0.3s infinite alternate;
}
section.sec.section_3 .section_3_star .star_right_2 {
  animation: appear 0.1s ease-in-out forwards, twinkle 1.4s ease-in-out 0.3s infinite alternate;
}
@media (max-width: 1920px) {
  section.sec.section_3 {
    height: 126.4063vw;
    padding-top: 4.1667vw;
  }
  section.sec.section_3 .btn_wr {
    margin: 3.5417vw auto 6.25vw;
    width: 34.6875vw;
    height: 7.0313vw;
  }
  section.sec.section_3 .btn_wr .btn {
    width: 100%;
    height: 100%;
    background: url(../../assets/images/campaign/section3_btn_2.svg) no-repeat center/contain;
    transition: all 0.3s;
  }
  section.sec.section_3 .btn_wr .btn:hover {
    background: url(../../assets/images/campaign/section3_btn_on_2.svg) no-repeat center/contain;
  }
  section.sec.section_3 .title {
    width: 55.4688vw;
    height: 16.0938vw;
    margin: 0 auto 5.2083vw;
  }
  section.sec.section_3 .contents_wr {
    width: 89.1667vw;
    height: 67.0313vw;
  }
  section.sec.section_3 .contents_wr .machine {
    width: 36.7188vw;
    height: 36.4583vw;
    top: 15.2604vw;
  }
  section.sec.section_3 .contents_wr .controller {
    width: 30.8854vw;
    height: 32.4479vw;
    top: 31.9271vw;
    left: 23.125vw;
  }
  section.sec.section_3 .contents_wr .controller .tap {
    width: 5.7813vw;
    height: 6.8229vw;
    top: 13.3333vw;
  }
  section.sec.section_3 .contents_wr .ball {
    width: 10.2083vw;
    height: 10.2083vw;
    top: 33.4896vw;
    right: 24.1146vw;
  }
  section.sec.section_3 .contents_wr .btn {
    width: 27.0313vw;
    height: 7.1354vw;
    top: 50vw;
  }
  section.sec.section_3 .section_3_star .star_left {
    width: 16.8229vw;
    height: 16.1458vw;
    top: -7.3438vw;
    left: -4.9479vw;
  }
  section.sec.section_3 .section_3_star .star_right {
    width: 16.8229vw;
    height: 16.1458vw;
    top: 14.8958vw;
    right: -2.7083vw;
  }
  section.sec.section_3 .section_3_star .star_right_2 {
    width: 16.8229vw;
    height: 16.1458vw;
    top: 63.2292vw;
    right: -2.7604vw;
  }
  section.sec.section_3 .bottom_wr {
    width: 63.4896vw;
    height: 17.2917vw;
  }
  section.sec.section_3 .bottom_wr .shadow {
    margin-top: 1.0417vw;
    padding: 0 4.1667vw;
  }
}

.event_detail_wr {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}
.event_detail_wr .event_detail_title {
  width: 100%;
  height: 538px;
  padding-top: 80px;
  background: url(../../assets/images/campaign/event_detail_title_bg.png) no-repeat center/cover;
}
.event_detail_wr .event_detail_title .title {
  margin: 0 auto 20px;
  width: 899px;
  height: 312px;
}
.event_detail_wr .event_detail_title h3 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  color: #0b132b;
  margin: 0 auto;
  text-align: center;
}
.event_detail_wr .info_swiper {
  height: 56px;
  background: #0b132b;
  pointer-events: none;
}
.event_detail_wr .info_swiper .item {
  width: 720px;
  width: auto;
  padding: 0 40px;
  color: #fff;
  height: 100%;
  line-height: 56px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 80px;
}
.event_detail_wr .info_swiper .item.symbol_item {
  width: 104px;
}
.event_detail_wr .info_swiper .item .symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.event_detail_wr .info_swiper .item .symbol img {
  width: 24px;
  height: 24px;
}
.event_detail_wr .info_box {
  position: absolute;
  width: 100%;
  max-width: 1440px;
  background: rgba(0, 0, 0, 0.6);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event_detail_wr .info_box .txt {
  max-width: 695px;
  margin: 0 auto;
  padding: 40px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.event_detail_wr .info_box .txt h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}
.event_detail_wr .info_box .txt p {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.event_detail_wr .event_detail_body {
  background: #ffd2db;
  padding: 120px 20px 160px;
}
.event_detail_wr .event_detail_body .inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  justify-content: center;
  position: relative;
}
.event_detail_wr .event_detail_body .rules_info_wr {
  width: 100%;
  max-width: 1480px;
  padding: 0 20px;
  margin: 80px auto 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.event_detail_wr .event_detail_body .rules_info_wr .img {
  width: 178px;
  height: 218px;
}
.event_detail_wr .event_detail_body .rules_info_wr .txt_bx {
  width: calc(100% - 218px);
  margin-left: 20px;
  min-height: 218px;
  padding: 40px;
  background: #ffeef9;
  border-radius: 10px;
  position: relative;
}
.event_detail_wr .event_detail_body .rules_info_wr .txt_bx::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 32px;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  background: url(../../assets/images/campaign/textBubble_lg_tail.svg) no-repeat center/contain;
}
.event_detail_wr .event_detail_body .rules_info_wr .txt_bx h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
}
.event_detail_wr .event_detail_body .rules_info_wr .txt_bx p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}
.event_detail_wr .event_detail_body .rules_info_wr .txt_bx p:last-child {
  margin-bottom: 0;
}
.event_detail_wr .event_detail_body .rules_info_wr .txt_bx p b {
  font-weight: 600;
  margin-right: 10px;
}
.event_detail_wr .event_detail_body .play_contents {
  width: 704px;
  position: relative;
  height: 1230px;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx {
  padding-bottom: 53px;
  padding-left: 280px;
  position: relative;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr {
  position: absolute;
  bottom: -15px;
  left: 77px;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .face {
  width: 181px;
  height: 166px;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .hand {
  position: absolute;
  width: 57px;
  height: 41px;
  left: -33.56px;
  bottom: -3.5px;
  z-index: 10;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .hand.right {
  left: initial;
  right: -33.56px;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt {
  width: 404px;
  min-height: 98px;
  background: #fff8e3;
  animation: cloudyemove3 2s infinite ease-in-out;
  position: relative;
  width: 404px;
  min-height: 98px;
  padding: 20px 20px 20px 20px;
  margin-left: 20px;
  border-radius: 10px;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 32px;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  background: url(../../assets/images/campaign/textBubble_tail.svg) no-repeat center/contain;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt .txt {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
.event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt .txt b {
  font-family: "DnfBitbeatV2";
  color: #3265ff;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr {
  position: relative;
  width: 100%;
  height: 780px;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine {
  width: 100%;
  height: 100%;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .balls {
  width: 526px;
  height: 182px;
  position: absolute;
  top: 478px;
  left: 77.84px;
  z-index: 10;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand {
  position: absolute;
  top: 243px;
  left: 50%;
  margin-left: -56.5px; /* (width의 절반: 113px / 2 = 56.5px) */
  transition: all 0.05s linear;
  width: 113px;
  height: 301px;
  overflow: hidden;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .top {
  position: relative;
  z-index: 10;
  width: 113px;
  height: 28px;
  background: url(../../assets/images/campaign/machine_hand_top.svg) no-repeat center/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .middle {
  position: absolute;
  z-index: 5;
  top: -200px;
  left: 0;
  transition: all 1s;
  width: 113px;
  height: 267px;
  background: url(../../assets/images/campaign/machine_hand_middle.svg) no-repeat center/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .middle::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -126px;
  width: 113px;
  height: 130px;
  background: url(../../assets/images/campaign/machine_hand_bottom_unfold.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.prism .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-prism.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.blue .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-blue.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.yellow .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-yellow.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.green .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-green.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.red .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-red.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.orange .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-orange.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.lime .middle::after {
  background: url(../../assets/images/campaign/part-machine-bottom-picked-lime.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.center {
  left: 50%;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.left {
  left: 25%;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.right {
  left: 75%;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.pick .middle {
  top: 28px;
}
.event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.pick .middle::after {
  background: url(../../assets/images/campaign/machine_hand_bottom_fold.svg) no-repeat center top/contain;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr {
  width: 568.75px;
  height: 345.63px;
  position: absolute;
  top: 885px;
  left: 50%;
  transform: translateX(-50%);
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller {
  width: 100%;
  height: 100%;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr {
  width: 460px;
  height: 72px;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .btn span {
  border: 3px solid #0b132b;
  height: 56px;
  line-height: 50px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .btn::after {
  border: 3px solid #0b132b;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left {
  margin-right: 10px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span img {
  width: 35px;
  height: 35px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::after, .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::before {
  border-radius: 10px 0 0 10px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::before {
  left: initial;
  right: 0;
  transform: initial;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right:active::before,
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left:active::before {
  transform: translateY(-8px);
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span {
  display: flex;
  align-items: center;
  border-radius: 0 10px 10px 0;
  justify-content: center;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span img {
  width: 35px;
  height: 35px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::after, .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::before {
  border-radius: 0 10px 10px 0;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::before {
  left: 0;
  transform: initial;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick {
  margin-left: 30px;
  position: relative;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick .btn {
  width: 300px;
}
.event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick .tooltip {
  width: 66px;
  height: 36px;
  top: -22.72px;
  position: absolute;
  left: calc(50% - 33px);
  z-index: 11;
  animation: cloudyemove3 2s infinite ease-in-out;
}
.event_detail_wr .event_detail_body .play_contents .my_conins {
  width: 100%;
  position: absolute;
  top: 178px;
  left: 50%;
  transform: translateX(-50%);
}
.event_detail_wr .event_detail_body .play_contents .my_conins .title {
  display: flex;
  align-items: center;
  color: #0b132b;
  margin-bottom: 20px;
  justify-content: center;
}
.event_detail_wr .event_detail_body .play_contents .my_conins .title h3 {
  font-size: 40px;
  font-weight: 700;
}
.event_detail_wr .event_detail_body .play_contents .my_conins .title .icon {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
.event_detail_wr .event_detail_body .play_contents .my_conins .title .num {
  width: 160px;
  font-size: 40px;
  color: #0036e7;
  font-weight: 700;
  height: 48px;
  background: #fff;
  border: 1px soil #0b132b;
  border: 2px solid rgb(11, 19, 43);
  margin-left: 20px;
  border-radius: 10px;
  text-align: center;
}
.event_detail_wr .event_detail_body .play_contents .my_conins .desc {
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}
.event_detail_wr .event_detail_body .play_contents .my_conins .desc b {
  font-weight: 600;
}
.event_detail_wr .event_detail_body .lucky_list_contents {
  width: 696px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr {
  width: 100%;
  background: rgb(11, 19, 43);
  border-radius: 10px;
  position: relative;
  margin-bottom: 64px;
  padding: 80px 20px 20px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .title {
  width: 576px;
  height: 74px;
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  z-index: 10;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper {
  height: 72px;
  background: #3c4653;
  border-radius: 10px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item {
  height: 72px;
  width: 100%;
  display: flex;
  position: relative;
  padding: 16px 32px;
  gap: 10px;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .ball {
  width: 40px;
  height: 40px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt {
  color: #fff;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b {
  font-weight: 600;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.prism {
  color: #c27dff;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.blue {
  color: #7dacff;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.green {
  color: #aeffbf;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.yellow {
  color: #ffeaae;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.red {
  color: #ffeaae;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.orange {
  color: #FFC294;
}
.event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .txt b.lime {
  color: #EBFFD4;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr {
  padding: 0 40px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title {
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title h2 {
  color: #0b132b;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title p {
  font-size: 20px;
  line-height: 1.2;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx {
  padding: 20px 72px 20px 16px;
  border: 1px solid #0b132b;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx.green {
  background: linear-gradient(90deg, #e6ffee 0%, #cdffdd 100%);
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx.blue {
  background: linear-gradient(90deg, #e0f0ff 0%, #d3eaff 100%);
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx.purple {
  background: linear-gradient(90deg, #f5e4ff 0%, #efd3ff 100%);
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx.yellow {
  background: linear-gradient(90deg, #fff3e0 0%, #ffedd2 100%);
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx::after {
  content: "";
  width: 40px;
  height: 40px;
  background: url(../../assets/images/campaign/list_right.svg) no-repeat center/contain;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt {
  word-break: keep-all;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #0b132b;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins {
  width: 104px;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins span {
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins img {
  width: 64px;
  height: 64px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins_2 {
  width: 104px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins_2 img {
  width: 104px;
  height: 64px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr h4 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr h4::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../assets/images/campaign/check_w.svg) no-repeat center/contain;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr p {
  font-size: 16px;
  font-weight: 400;
}
.event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .wran_txt {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #0b132b;
  word-break: keep-all;
  text-align: center;
}
.event_detail_wr footer {
  padding: 64px 0;
  background: #cfaab2;
  color: #292f38;
  text-align: center;
}
.event_detail_wr footer .copy {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
}
.event_detail_wr footer .info {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 1920px) {
  .event_detail_wr .event_detail_title {
    height: 28.0208vw;
    padding-top: 4.1667vw;
  }
  .event_detail_wr .event_detail_title .title {
    margin: 0 auto 1.0417vw;
    width: 46.8229vw;
    height: 16.25vw;
  }
  .event_detail_wr .event_detail_title h3 {
    font-size: 1.6667vw;
  }
  .event_detail_wr .info_swiper {
    height: 2.9167vw;
  }
  .event_detail_wr .info_swiper .item {
    width: auto;
    padding: 0 2.0833vw;
    line-height: 2.9167vw;
    font-size: 1.0417vw;
    gap: 4.1667vw;
  }
  .event_detail_wr .info_swiper .item .symbol img {
    width: 1.25vw;
    height: 1.25vw;
  }
  .event_detail_wr .info_box .txt {
    max-width: 36.1979vw;
    padding: 2.0833vw 0;
  }
  .event_detail_wr .info_box .txt h3 {
    font-size: 2.0833vw;
    margin-bottom: 0.5208vw;
  }
  .event_detail_wr .info_box .txt p {
    font-size: 1.0417vw;
  }
  .event_detail_wr .event_detail_body {
    padding: 6.25vw 1.0417vw 8.3333vw;
  }
  .event_detail_wr .event_detail_body .inner {
    width: 100%;
    gap: 2.0833vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr {
    max-width: 77.0833vw;
    padding: 0 1.0417vw;
    margin: 4.1667vw auto 0;
    gap: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .img {
    width: 9.2708vw;
    height: 11.3542vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx {
    width: calc(100% - 11.3542vw);
    margin-left: 1.0417vw;
    min-height: 11.3542vw;
    padding: 2.0833vw;
    border-radius: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx::before {
    width: 1.0417vw;
    height: 1.6667vw;
    left: -1.0417vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx h3 {
    font-size: 1.25vw;
    margin-bottom: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx p {
    font-size: 0.8333vw;
    margin-bottom: 0.8333vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx p:last-child {
    margin-bottom: 0;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx p b {
    margin-right: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .play_contents {
    width: 36.6667vw;
    height: 64.0625vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx {
    padding-bottom: 2.7604vw;
    padding-left: 14.5833vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr {
    bottom: -0.7813vw;
    left: 4.0104vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .face {
    width: 9.4271vw;
    height: 8.6458vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .hand {
    width: 2.9688vw;
    height: 2.1354vw;
    left: -1.7479vw;
    bottom: -0.1823vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .hand.right {
    left: initial;
    right: -1.7479vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt {
    width: 21.0417vw;
    min-height: 5.1042vw;
    padding: 1.0417vw 1.0417vw 1.0417vw 1.0417vw;
    margin-left: 1.0417vw;
    border-radius: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt::before {
    width: 1.0417vw;
    height: 1.6667vw;
    left: -1.0417vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt .txt {
    font-size: 1.25vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr {
    height: 40.625vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .balls {
    width: 27.3958vw;
    height: 9.4792vw;
    top: 24.8958vw;
    left: 4.0542vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand {
    top: 12.6563vw;
    width: 5.8854vw;
    height: 15.6771vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .top {
    width: 5.8854vw;
    height: 1.4583vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .middle {
    top: -10.4167vw;
    width: 5.8854vw;
    height: 13.9063vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .middle::after {
    bottom: -6.5625vw;
    width: 5.8854vw;
    height: 6.7708vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.pick .middle {
    top: 1.4583vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr {
    width: 29.6224vw;
    height: 18.0016vw;
    top: 46.0938vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr {
    width: 23.9583vw;
    height: 3.75vw;
    top: -0.625vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .btn span {
    border-width: 0.1563vw;
    height: 2.9167vw;
    line-height: 2.8125vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .btn::after {
    border-width: 0.1563vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right:active::before,
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left:active::before {
    transform: translateY(-0.4167vw);
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left {
    margin-right: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span {
    border-radius: 0.5208vw 0 0 0.5208vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span img {
    width: 1.8229vw;
    height: 1.8229vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::after, .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::before {
    border-radius: 0.5208vw 0 0 0.5208vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span {
    border-radius: 0 0.5208vw 0.5208vw 0;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span img {
    width: 1.8229vw;
    height: 1.8229vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::after, .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::before {
    border-radius: 0 0.5208vw 0.5208vw 0;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick {
    margin-left: 1.5625vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick .btn {
    width: 15.625vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick .tooltip {
    width: 3.4375vw;
    height: 1.875vw;
    top: -1.1833vw;
    left: calc(50% - 1.7188vw);
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins {
    top: 9.2708vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title {
    margin-bottom: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title h3 {
    font-size: 2.0833vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title .icon {
    width: 3.125vw;
    height: 3.125vw;
    margin-right: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title .num {
    font-size: 2.0833vw;
    height: 2.5vw;
    border-width: 0.1042vw;
    margin-left: 1.0417vw;
    border-radius: 0.5208vw;
    width: 8.3333vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .desc {
    font-size: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .play_contents #left_button,
  .event_detail_wr .event_detail_body .play_contents #right_button {
    /* 해당 요소 위에서 발생하는 모든 터치 제스처(스크롤, 줌 등)를 비활성화 */
    touch-action: none;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents {
    width: 36.25vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr {
    border-radius: 0.5208vw;
    margin-bottom: 3.3333vw;
    padding: 4.1667vw 1.0417vw 1.0417vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .title {
    width: 30vw;
    height: 3.8542vw;
    top: -1.4583vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper {
    height: 3.75vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item {
    height: 3.75vw;
    border-radius: 0.5208vw;
    padding: 0.8333vw 1.6667vw;
    gap: 0.5208vw;
    font-size: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .ball {
    width: 2.0833vw;
    height: 2.0833vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr {
    padding: 0 2.0833vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title {
    margin-bottom: 2.0833vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title h2 {
    font-size: 2.0833vw;
    margin-bottom: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title p {
    font-size: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx {
    padding: 1.0417vw 3.75vw 1.0417vw 0.8333vw;
    gap: 0.8333vw;
    border-radius: 0.5208vw;
    margin-bottom: 1.0417vw;
    cursor: pointer;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx::after {
    width: 2.0833vw;
    height: 2.0833vw;
    right: 0.8333vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt h3 {
    font-size: 1.25vw;
    margin-bottom: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt p {
    font-size: 1.0417vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins {
    width: 5.4167vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins span {
    font-size: 0.8333vw;
    margin-top: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins img {
    width: 3.3333vw;
    height: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins_2 {
    width: 5.4167vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins_2 img {
    width: 5.4167vw;
    height: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr {
    border-radius: 0.5208vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr h4 {
    font-size: 1.0417vw;
    margin-bottom: 0.5208vw;
    gap: 0.2083vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr h4::before {
    width: 1.25vw;
    height: 1.25vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr p {
    font-size: 0.8333vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .wran_txt {
    margin-top: 2.0833vw;
    font-size: 1.0417vw;
  }
  .event_detail_wr footer {
    padding: 3.3333vw 0;
  }
  .event_detail_wr footer .copy {
    font-size: 1.4583vw;
    margin-bottom: 1.0417vw;
  }
  .event_detail_wr footer .info {
    font-size: 1.0417vw;
  }
}

.mo_only {
  display: none;
}
@media (max-width: 768px) {
  .mo_only {
    display: block;
  }
}

.reward_modal_wr {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.reward_modal_wr.on {
  display: block;
}
.reward_modal_wr .reward_modal {
  width: 606px;
  height: 710px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.reward_modal_wr .reward_modal .coupon_wr {
  width: 400px;
  height: 137px;
  position: absolute;
  top: 265px;
  left: calc(50% - 200px);
  animation: cloudyemove 2s infinite ease-in-out;
}
.reward_modal_wr .reward_modal .btn_wr {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
}
.reward_modal_wr .reward_modal .btn_wr .btn {
  width: 240px;
}
.reward_modal_wr .reward_modal_bd {
  width: 594px;
  height: 733px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.reward_modal_wr .reward_modal_bd .btn_close {
  position: absolute;
  cursor: pointer;
  top: -48px;
  right: 0;
  width: 48px;
  height: 48px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reward_modal_wr .reward_modal_bd .btn_close img {
  width: 36px;
  height: 36px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  padding: 20px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_moda_bg {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border: 2px solid #0b132b;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_moda_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_coupon_wr {
  border: 2px solid #0b132b;
  background: #fff;
  border-radius: 12px;
  position: relative;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_1 {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  height: 31px;
  line-height: 31px;
  padding: 0 12px;
  border-radius: 4px;
  background: #0b132b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr {
  margin-bottom: 70px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .title_2 {
  font-family: "DnfBitbeatV2";
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 28px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title {
  line-height: 44px;
  border: 2px solid #0b132b;
  padding: 0 20px;
  border-radius: 4px;
  background: #ebffd4;
  font-family: "DnfBitbeatV2";
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_7 {
  background: #ebffd4;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_6 {
  background: #ffc294;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_5 {
  background: #ff92a2;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_4 {
  background: #ffeaae;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_3 {
  background: #aeffbf;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_2 {
  background: #7dacff;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title.reward_1 {
  background: #c27dff;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .desc {
  font-size: 16px;
  font-weight: 400;
  color: #0b132b;
  line-height: 1.2;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx {
  position: relative;
  padding-top: 129px;
  margin-bottom: 10px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .coupon {
  position: absolute;
  top: 0;
  left: calc(50% - 200px);
  width: 400px;
  height: 140px;
  animation: cloudyemove 2s infinite ease-in-out;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .reward_ball {
  width: 96px;
  height: 156px;
  margin: 0 auto 10px;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
}
.reward_modal_wr .reward_modal_bd .reward_modal_inner .btn_wr .btn {
  width: 240px;
}
.reward_modal_wr .light_effect {
  width: 100%;
  max-width: 1230px;
  aspect-ratio: 1/1;
  z-index: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.reward_modal_wr .light_effect img {
  width: 100%;
  height: 100%;
  /* 애니메이션 적용 */
  animation-name: light_effect; /* 위에서 정의한 키프레임 이름 */
  animation-duration: 20s; /* 한 바퀴 도는 데 걸리는 시간 (예: 10초) */
  animation-iteration-count: infinite; /* 무한 반복 */
  animation-timing-function: linear; /* 일정한 속도로 (가속/감속 없이) */
}
.reward_modal_wr .light_effect.jackpot img {
  /* 애니메이션 적용 */
  animation-name: light_effect_1; /* 위에서 정의한 키프레임 이름 */
  animation-duration: 20s; /* 한 바퀴 도는 데 걸리는 시간 (예: 10초) */
  animation-iteration-count: infinite; /* 무한 반복 */
  animation-timing-function: linear; /* 일정한 속도로 (가속/감속 없이) */
}
@media (max-width: 1920px) {
  .reward_modal_wr .reward_modal {
    width: 31.5625vw;
    height: 36.9792vw;
  }
  .reward_modal_wr .reward_modal .coupon_wr {
    width: 20.8333vw;
    height: 7.1354vw;
    top: 13.8021vw;
    left: calc(50% - 10.4167vw);
  }
  .reward_modal_wr .reward_modal .btn_wr {
    bottom: 5.7292vw;
  }
  .reward_modal_wr .reward_modal .btn_wr .btn {
    width: 12.5vw;
  }
  .reward_modal_wr .reward_modal_bd {
    width: 30.9375vw;
    height: 38.1771vw;
  }
  .reward_modal_wr .reward_modal_bd .btn_close {
    top: -2.5vw;
    width: 2.5vw;
    height: 2.5vw;
  }
  .reward_modal_wr .reward_modal_bd .btn_close img {
    width: 1.875vw;
    height: 1.875vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner {
    border-radius: 1.0417vw;
    padding: 1.0417vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_moda_bg {
    border-radius: 1.0417vw;
    border-width: 0.1042vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_coupon_wr {
    border-width: 0.1042vw;
    border-radius: 0.625vw;
    padding: 2.0833vw 0;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_1 {
    top: -1.3542vw;
    height: 1.6146vw;
    line-height: 1.6146vw;
    padding: 0 0.625vw;
    border-radius: 0.2083vw;
    font-size: 0.8333vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr {
    margin-bottom: 3.6458vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .title_2 {
    font-size: 2.0833vw;
    margin-bottom: 1.4583vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title {
    line-height: 2.2917vw;
    border-width: 0.1042vw;
    padding: 0 1.0417vw;
    border-radius: 0.2083vw;
    font-size: 1.0417vw;
    margin-bottom: 0.5208vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .desc {
    font-size: 0.8333vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx {
    padding-top: 6.7188vw;
    margin-bottom: 0.5208vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .coupon {
    left: calc(50% - 10.4167vw);
    width: 20.8333vw;
    height: 7.2917vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .reward_ball {
    width: 5vw;
    height: 8.125vw;
    margin: 0 auto 0.5208vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .desc {
    font-size: 0.7292vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .btn_wr .btn {
    width: 12.5vw;
  }
}
@media (max-width: 768px) {
  .reward_modal_wr .reward_modal {
    width: 88.8889vw;
    height: 104.1667vw;
  }
  .reward_modal_wr .reward_modal .coupon_wr {
    width: 58.3333vw;
    height: 20.2778vw;
    top: 38.8889vw;
    left: calc(50% - 29.1667vw);
  }
  .reward_modal_wr .reward_modal .btn_wr {
    bottom: 14.7056vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .reward_modal_wr .reward_modal .btn_wr .btn {
    width: 44.4444vw;
  }
  .reward_modal_wr .reward_modal_bd {
    width: 88.8889vw;
    height: 109.4444vw;
  }
  .reward_modal_wr .reward_modal_bd .btn_close {
    top: -8.8889vw;
    width: 8.8889vw;
    height: 8.8889vw;
  }
  .reward_modal_wr .reward_modal_bd .btn_close img {
    width: 5.5556vw;
    height: 5.5556vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner {
    border-radius: 5.5556vw;
    padding: 3.3333vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_moda_bg {
    border-width: 0.2778vw;
    border-radius: 5.5556vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .reward_coupon_wr {
    border-width: 0.2778vw;
    border-radius: 3.3333vw;
    padding: 6.6667vw 0;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_1 {
    top: -4.7222vw;
    height: 5.5556vw;
    line-height: 5.5556vw;
    padding: 0 2.2222vw;
    border-radius: 1.1111vw;
    font-size: 2.7778vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr {
    margin-bottom: 6.6667vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .title_2 {
    font-size: 5.5556vw;
    line-height: 8.0556vw;
    margin-bottom: 4.4444vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .coupon_title {
    line-height: 8.6111vw;
    border-width: 0.2778vw;
    padding: 0 3.3333vw;
    border-radius: 1.1111vw;
    font-size: 3.3333vw;
    margin-bottom: 2.7778vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .title_wr .desc {
    font-size: 2.7778vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx {
    padding-top: 11.1111vw;
    margin-bottom: 2.7778vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .coupon {
    left: calc(50% - 27.7778vw);
    width: 55.5556vw;
    height: 19.4444vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .reward_ball {
    width: 13.3333vw;
    height: 21.6667vw;
    margin: 0 auto 2.7778vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .coupon_bx .desc {
    font-size: 2.7778vw;
  }
  .reward_modal_wr .reward_modal_bd .reward_modal_inner .btn_wr .btn {
    width: 44.4444vw;
  }
  .reward_modal_wr .light_effect {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reward_modal_wr .light_effect img {
    width: 130vw;
    aspect-ratio: 1/1;
    animation-name: light_effect_1; /* 위에서 정의한 키프레임 이름 */
    animation-duration: 20s; /* 한 바퀴 도는 데 걸리는 시간 (예: 10초) */
    animation-iteration-count: infinite; /* 무한 반복 */
    animation-timing-function: linear; /* 일정한 속도로 (가속/감속 없이) */
  }
  .reward_modal_wr .light_effect.jackpot img {
    width: 180vw;
  }
}

@media (max-width: 768px) {
  button.btn.arr {
    border-radius: 2.7778vw;
    height: 7.7778vw;
    line-height: 7.7778vw;
    padding: 0 11.6667vw 0 5vw;
    font-size: 3.3333vw;
    background-size: 5.5556vw;
    background-position: right 5vw center;
  }
  button.btn.arr.white {
    padding: 0 19.4444vw 0 12.5vw;
    background-position: right 12.5vw center;
  }
  button.btn.border, button.btn.border_b {
    height: 11.1111vw;
    line-height: 10.5556vw;
    border-radius: 2.7778vw;
    padding: 0 3.3333vw;
    font-size: 3.3333vw;
  }
  button.btn.shadow {
    width: 100%;
  }
  button.btn.shadow span {
    font-weight: 600;
    font-size: 3.3333vw;
    border-radius: 2.7778vw;
    height: 8.8889vw;
    line-height: 8.3333vw;
  }
  button.btn.shadow::before {
    content: "";
    width: calc(100% - 2.2222vw);
    bottom: -4.4444vw;
  }
  button.btn.shadow::after {
    border-radius: 2.7778vw;
    bottom: -2.2222vw;
  }
  button.btn.shadow:hover span {
    transform: translateY(2.2222vw);
  }
  button.btn.shadow:hover::before {
    transform: translate(-50%, -2.2222vw);
  }
  button.btn.shadow:active span {
    transform: translateY(2.2222vw);
  }
  button.btn.shadow:active::before {
    transform: translate(-50%, -2.2222vw);
  }
  button.btn.shadow.blue:disabled span {
    transform: translateY(2.2222vw);
    box-shadow: inset 0px 1.3889vw 0 0 #cad0d8;
  }
  button.btn.shadow.blue:disabled::before {
    transform: translate(-50%, -2.2222vw);
  }
  button.btn.shadow.blue:disabled::after {
    transform: translate(0, -2.2222vw);
  }
  button.btn.shadow.purchase span, button.btn.shadow.cart span {
    gap: 1.1111vw;
  }
  button.btn.shadow.purchase span::before, button.btn.shadow.cart span::before {
    width: 5.5556vw;
    height: 5.5556vw;
  }
  .landing_body_wr {
    margin: 11.1111vw auto 0;
  }
  .landing_body_wr header {
    height: 11.1111vw;
  }
  .landing_body_wr header h1 {
    width: 20vw;
    height: 6.1111vw;
  }
  .landing_body_wr footer {
    padding: 5.5556vw;
    word-break: keep-all;
  }
  .landing_body_wr footer .copy {
    font-size: 3.8889vw;
    margin-bottom: 2.7778vw;
  }
  .landing_body_wr footer .info {
    font-size: 2.7778vw;
  }
  section.sec.section_1 {
    height: 179.4444vw;
  }
  section.sec.section_1 .bg_img {
    background: url(../../assets/images/campaign/section_bg_1_mo.png) no-repeat center/cover;
  }
  section.sec.section_1 .contents,
  section.sec.section_1 .event_star {
    display: none;
  }
  section.sec.section_1 .event_logo_wr {
    padding-top: 17.7778vw;
  }
  section.sec.section_1 .event_logo_wr .event_logo {
    width: 94.4444vw;
    height: 32.5vw;
    margin-bottom: 2.7778vw;
  }
  section.sec.section_1 .event_logo_wr .event_caption {
    width: 63.0556vw;
    height: 19.4444vw;
    margin-bottom: 2.7778vw;
  }
  section.sec.section_1 .event_logo_wr .event_btn button {
    width: 22.2222vw;
    height: 6.3889vw;
  }
  section.sec.section_1 .mo_contents {
    display: block;
    width: 108.3333vw;
    height: 71.3889vw;
    margin: 0 auto 4.1667vw;
    transform: scale(0);
    opacity: 0;
  }
  section.sec.section_1 .mo_contents img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: translateX(-4.2vw);
  }
  section.sec.section_1 .scroll_arr .txt {
    width: 18.0556vw;
    height: 1.6667vw;
    margin-bottom: 1.6667vw;
  }
  section.sec.section_1 .scroll_arr .arr {
    width: 5.2778vw;
    height: 6.1111vw;
  }
  section.sec.section_1.on .mo_contents {
    animation: appearAndBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
    animation-delay: 1s;
  }
  section.sec.section_2 {
    height: 180.8333vw;
    padding-top: 5.5556vw;
  }
  section.sec.section_2 .bg_img {
    background: url(../../assets/images/campaign/section_bg_2_mo.png) no-repeat center/cover;
  }
  section.sec.section_2 .event_info {
    z-index: 2;
    position: relative;
  }
  section.sec.section_2 .event_info .title {
    width: 88.8889vw;
    height: 31.3889vw;
  }
  section.sec.section_2 .event_info .coupons_wr {
    width: 77.7778vw;
    height: 101.3889vw;
    margin-bottom: 7.7778vw;
  }
  section.sec.section_2 .event_info .coupons_wr .txt {
    font-size: 3.3333vw;
  }
  section.sec.section_2 .event_info .coupons_wr .coupons {
    width: 77.7778vw;
    height: 101.3889vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg {
    width: 23.8889vw;
    height: 7.0833vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg.msg_1 {
    top: 24.4444vw;
    right: 17.2222vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg.msg_2 {
    top: 46.4444vw;
    left: 6.6667vw;
  }
  section.sec.section_2 .event_info .coupons_wr .msg.msg_3 {
    top: 68.7222vw;
    right: 16.7778vw;
  }
  section.sec.section_2 .event_info .btn button {
    width: 82.7778vw;
    height: 14.7222vw;
    margin: 0 auto;
  }
  section.sec.section_2 .contents {
    z-index: 2;
  }
  section.sec.section_2 .contents .left_contents {
    width: 30.5556vw;
    height: 25.5556vw;
    top: 84.7222vw;
    left: -13.8889vw;
  }
  section.sec.section_2 .contents .right_contents {
    width: 32.7778vw;
    height: 20.8333vw;
    top: 55.5556vw;
    right: -13.8889vw;
  }
  section.sec.section_2 .section_2_star {
    z-index: 1;
  }
  section.sec.section_2 .section_2_star .money {
    width: 8.8889vw;
    height: 6.6667vw;
    top: 85.5556vw;
    right: 8.0556vw;
  }
  section.sec.section_2 .section_2_star .star_left_1 {
    width: 114px;
    height: 116px;
    top: 227px;
    right: -10px;
    left: initial;
    opacity: 0.15;
  }
  section.sec.section_2 .section_2_star .star_left_2 {
    width: 24px;
    height: 25px;
    top: 187px;
    left: 20px;
  }
  section.sec.section_2 .section_2_star .star_left_3 {
    width: 62px;
    height: 62px;
    top: 103px;
    left: -6px;
  }
  section.sec.section_2 .section_2_star .star_right_1 {
    width: 33px;
    height: 34px;
    top: 383px;
    right: 16px;
  }
  section.sec.section_2 .section_2_star .star_right_2 {
    width: 32px;
    height: 31px;
    top: 244px;
    right: initial;
    left: 13px;
  }
  section.sec.section_2.on .section_2_star .star_left_1 {
    animation: appear_mo 0.1s ease-in-out forwards, twinkle_mo 0.8s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_2.on .section_2_star .star_left_2 {
    animation: appear_mo 0.1s ease-in-out forwards, twinkle_mo 1.2s ease-in-out 0.3s infinite alternate;
  }
  section.sec.section_2.on .section_2_star .star_right_2,
  section.sec.section_2.on .section_2_star .star_left_3 {
    animation: appear_mo 0.1s ease-in-out forwards, twinkle_mo 1.4s ease-in-out 0.3s infinite alternate;
  }
  section.sec.section_2.on .section_2_star .star_right_1 {
    animation: appear_mo 0.1s ease-in-out forwards, twinkle_mo 1.5s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 {
    height: 336.9444vw;
    padding-top: 5.5556vw;
  }
  section.sec.section_3 .bg_img {
    background: #ff92a2;
  }
  section.sec.section_3 .inner {
    height: 100%;
  }
  section.sec.section_3 .title {
    width: 88.8889vw;
    height: 25.8333vw;
    margin: 0 auto 5.5556vw;
  }
  section.sec.section_3 .contents_wr {
    width: 100%;
    height: 221.6667vw;
  }
  section.sec.section_3 .contents_wr .contents {
    width: 100%;
    height: 100%;
    background: url(../../assets/images/campaign/section_3_contents_mo.svg) no-repeat top right/contain;
  }
  section.sec.section_3 .contents_wr .machine {
    width: 60.4167vw;
    height: 59.8611vw;
    top: 56.9444vw;
    left: 5.8333vw;
  }
  section.sec.section_3 .contents_wr .controller {
    width: 50.8333vw;
    height: 53.3333vw;
    top: 81.6667vw;
    right: 4.7222vw;
    left: initial;
  }
  section.sec.section_3 .contents_wr .controller .tap {
    width: 9.4444vw;
    height: 11.1111vw;
    top: 19.4444vw;
  }
  section.sec.section_3 .contents_wr .ball {
    width: 27.7778vw;
    height: 27.7778vw;
    position: absolute;
    top: 194vw;
    left: 5.5556vw;
    right: initial;
  }
  section.sec.section_3 .contents_wr .btn {
    position: absolute;
    z-index: 20;
    width: 44.4444vw;
    height: 11.8056vw;
    top: 266.6667vw;
    bottom: -50vw;
    top: initial;
    right: initial;
    left: 50%;
    transform: translateX(-50%);
  }
  section.sec.section_3 .section_3_star {
    display: none;
  }
  section.sec.section_3 .section_3_star_mo {
    display: block;
  }
  section.sec.section_3 .section_3_star_mo div {
    position: absolute;
  }
  section.sec.section_3 .section_3_star_mo .star_1 {
    width: 25.2778vw;
    height: 24.1667vw;
    top: 35.5556vw;
    left: -7.7778vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_2 {
    width: 22.7778vw;
    height: 22.2222vw;
    top: 52.5vw;
    right: -5vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 1.2s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_3 {
    width: 40.5556vw;
    height: 39.4444vw;
    top: 221.1111vw;
    left: -8.8333vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_4 {
    width: 40.5556vw;
    height: 39.4444vw;
    top: 210.2778vw;
    right: -7.8889vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 0.6s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_5 {
    width: 8.8889vw;
    height: 8.6111vw;
    top: 25.8333vw;
    right: 10.5556vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 1.2s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_6 {
    width: 4.0278vw;
    height: 3.8889vw;
    top: 61.1111vw;
    left: 8.3333vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 0.8s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_7 {
    width: 8.8889vw;
    height: 8.6111vw;
    top: 53.6111vw;
    left: 16.9444vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 1s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .section_3_star_mo .star_8 {
    width: 3.8889vw;
    height: 3.8889vw;
    top: 68.3333vw;
    right: 20.2778vw;
    animation: appear 0.1s ease-in-out forwards, twinkle 0.4s ease-in-out 0.1s infinite alternate;
  }
  section.sec.section_3 .bottom_wr {
    width: 94.7222vw;
    height: 27.2222vw;
    margin: 5.5556vw auto;
  }
  section.sec.section_3 .bottom_wr .bottom {
    animation: cloudyemove2 2s infinite ease-in-out 0.3s;
  }
  section.sec.section_3 .bottom_wr .shadow {
    margin-top: 2.7778vw;
    padding: 0 5.5556vw;
  }
  section.sec.section_3 .btn_wr {
    margin: 11.1111vw auto 17.7778vw;
    width: 83.3333vw;
    height: 16.9444vw;
  }
  .event_detail_wr .event_detail_title {
    height: 81.3889vw;
    padding-top: 22.2222vw;
    background: url(../../assets/images/campaign/event_detail_title_bg_mo.png) no-repeat center/cover;
  }
  .event_detail_wr .event_detail_title .title {
    margin: 0 auto 2.7778vw;
    width: 83.3333vw;
    height: 29.0278vw;
  }
  .event_detail_wr .event_detail_title h3 {
    font-size: 4.4444vw;
  }
  .event_detail_wr .info_swiper {
    height: 8.8889vw;
  }
  .event_detail_wr .info_swiper .item {
    width: auto !important;
    padding: 0 2.7778vw;
    gap: 5.5556vw;
    line-height: 8.8889vw;
    font-size: 3.3333vw;
    font-weight: 400;
  }
  .event_detail_wr .info_swiper .item .symbol img {
    width: 4.4444vw;
    height: 4.4444vw;
  }
  .event_detail_wr .info_box {
    top: 35%;
  }
  .event_detail_wr .info_box .txt {
    padding: 5.5556vw;
    max-width: initial;
    width: 100%;
  }
  .event_detail_wr .info_box .txt h3 {
    font-size: 4.4444vw;
    margin-bottom: 2.7778vw;
    font-weight: 600;
  }
  .event_detail_wr .info_box .txt p {
    font-size: 3.3333vw;
    font-weight: 400;
    text-align: left;
  }
  .event_detail_wr .event_detail_body {
    padding: 45.5556vw 5.5556vw 13.8889vw;
  }
  .event_detail_wr .event_detail_body .inner {
    gap: 11.1111vw;
    max-width: initial;
    flex-direction: column;
    position: relative;
  }
  .event_detail_wr .event_detail_body .rules_info_wr {
    width: 100%;
    max-width: initial;
    padding: 0;
    margin: 11.1111vw auto 0;
    flex-direction: column-reverse;
    gap: 5.5556vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .img {
    width: 27.2222vw;
    height: 33.3333vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx {
    width: 100%;
    margin-left: 0;
    min-height: initial;
    height: auto;
    padding: 2.7778vw;
    border-radius: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx::before {
    height: 4.4444vw;
    width: 2.7778vw;
    bottom: -2.7778vw;
    top: initial;
    transform: translateX(-50%) rotate(-90deg);
    left: 50%;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx h3 {
    font-size: 4.4444vw;
    margin-bottom: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx p {
    font-size: 2.7778vw;
    margin-bottom: 3.3333vw;
    word-break: keep-all;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx p:last-child {
    margin-bottom: 0;
  }
  .event_detail_wr .event_detail_body .rules_info_wr .txt_bx p b {
    font-size: 3.3333vw;
    margin-bottom: 1.1111vw;
    display: block;
    margin-right: 0;
  }
  .event_detail_wr .event_detail_body .play_contents {
    width: 88.8889vw;
    height: 156.6667vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx {
    padding-bottom: 5.8333vw;
    padding-left: 34.1667vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr {
    bottom: -2.2222vw;
    left: 9.8167vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .face {
    width: 22.7778vw;
    height: 21.1111vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .hand {
    width: 7.2222vw;
    height: 5.2778vw;
    left: -4.2389vw;
    bottom: 0px;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .character_wr .hand.right {
    left: initial;
    right: -4.2389vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt {
    width: 53.3333vw;
    min-height: 13.3333vw;
    padding: 2.7778vw;
    margin-left: 1.3889vw;
    border-radius: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt::before {
    width: 1.3889vw;
    height: 2.2222vw;
    left: -1.3889vw;
  }
  .event_detail_wr .event_detail_body .play_contents .info_txt_bx .info_txt .txt {
    font-size: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr {
    width: 88.8889vw;
    height: 137.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine {
    width: 100%;
    height: 100%;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .balls {
    position: absolute;
    width: 66.3889vw;
    height: 22.0833vw;
    top: 60vw;
    left: 9.3056vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand {
    top: 31.1111vw;
    width: 14.5139vw;
    margin-left: -7.2569vw;
    height: 41.6667vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .top {
    width: 14.4444vw;
    height: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .middle {
    top: -27.7778vw;
    width: 14.4444vw;
    height: 35.5556vw;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand .middle::after {
    bottom: -35vw;
    width: 14.4444vw;
    height: 36.1111vw;
    background: url(../../assets/images/campaign/machine_hand_bottom_unfold.svg) no-repeat center top/contain;
  }
  .event_detail_wr .event_detail_body .play_contents .machine_wr .machine_hand.pick .middle {
    top: 1.9444vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr {
    width: 76.6667vw;
    height: 45vw;
    top: 111.6667vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller {
    width: 100%;
    height: 100%;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr {
    width: 63.8889vw;
    height: 13.3333vw;
    top: -4.4444vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .btn span {
    border-width: 0.5556vw;
    height: 8.8889vw;
    line-height: 7.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .btn::after {
    border-width: 0.5556vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span,
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span {
    width: 11.1111vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::before,
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::before {
    width: 10vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right:active::before,
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left:active::before {
    transform: translateY(-2.2222vw);
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right.on::before,
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left.on::before {
    transform: translateY(-2.2222vw);
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right.on span,
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left.on span {
    transform: translateY(2.2222vw);
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left {
    margin-right: 1.1111vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.7778vw 0 0 2.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left span img {
    width: 6.6667vw;
    height: 6.6667vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::after, .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .left::before {
    border-radius: 2.7778vw 0 0 2.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span {
    border-radius: 0 2.7778vw 2.7778vw 0;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right span img {
    width: 6.6667vw;
    height: 6.6667vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::after, .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .right::before {
    border-radius: 0 2.7778vw 2.7778vw 0;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick {
    margin-left: 2.7778vw;
    position: relative;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick .btn {
    width: 37.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick .tooltip {
    width: 16.3889vw;
    height: 7.2222vw;
    top: -6.3111vw;
    left: calc(50% - 9.1667vw);
    position: absolute;
    z-index: 11;
    animation: cloudyemove 2s infinite ease-in-out;
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick.on .btn::before {
    transform: translateX(-50%) translateY(-2.2222vw);
  }
  .event_detail_wr .event_detail_body .play_contents .controller_wr .controller_btn_wr .pick.on .btn span {
    transform: translateY(2.2222vw);
    background: #002cbd;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins {
    width: 56.6667vw;
    top: 22.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title {
    margin-bottom: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title h3 {
    font-size: 4.4444vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title .icon {
    width: 6.6667vw;
    height: 6.6667vw;
    margin-right: 1.1111vw;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .title .num {
    font-size: 5.5556vw;
    width: 22.2222vw;
    height: 7.7778vw;
    margin-left: 2.7778vw;
    color: #0036e7;
  }
  .event_detail_wr .event_detail_body .play_contents .my_conins .desc {
    font-size: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents {
    width: 100%;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr {
    width: 100%;
    border-radius: 2.7778vw;
    margin-bottom: 0;
    padding: 11.1111vw 2.7778vw 2.7778vw;
    top: -33.3333vw;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .title {
    width: 83.3333vw;
    height: 9.4444vw;
    top: -3.6111vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper {
    height: 8.8889vw;
    border-radius: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item {
    height: 8.8889vw;
    border-radius: 2.7778vw;
    padding: 1.6667vw 2.7778vw;
    gap: 1.3889vw;
    font-size: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .spotlight_wr .spotlight_swiper .item .ball {
    width: 5.2778vw;
    height: 5.2778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr {
    padding: 0;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title {
    margin-bottom: 5.5556vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title h2 {
    font-size: 5.5556vw;
    margin-bottom: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .title p {
    font-size: 3.8889vw;
    word-break: keep-all;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx {
    padding: 4.4444vw 14.4444vw 5.5556vw 5.5556vw;
    gap: 4.4444vw;
    border-radius: 2.7778vw;
    margin-bottom: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx::after {
    width: 5.5556vw;
    height: 5.5556vw;
    right: 4.4444vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt h3 {
    font-size: 4.4444vw;
    margin-bottom: 1.6667vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .txt p {
    font-size: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins {
    width: 14.7222vw;
    flex-shrink: 0;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins span {
    margin-top: 1.1111vw;
    font-size: 3.3333vw;
    line-height: 1.2;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins img {
    width: 8.3333vw;
    height: 8.0556vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins_2 {
    width: 14.7222vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .coins_2 img {
    width: 13.3333vw;
    height: 8.0556vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr {
    border-radius: 2.7778vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr h4 {
    font-size: 3.8889vw;
    margin-bottom: 1.1111vw;
    gap: 1.1111vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr h4::before {
    width: 4.4444vw;
    height: 4.4444vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .list_bx .complete_wr p {
    font-size: 3.3333vw;
  }
  .event_detail_wr .event_detail_body .lucky_list_contents .draw_list_wr .wran_txt {
    margin-top: 5.5556vw;
    font-size: 3.3333vw;
  }
  .event_detail_wr footer {
    padding: 6.6667vw 5.5556vw;
  }
  .event_detail_wr footer .copy {
    font-size: 3.8889vw;
    margin-bottom: 2.7778vw;
  }
  .event_detail_wr footer .info {
    font-size: 3.3333vw;
    font-weight: 400;
    word-break: keep-all;
  }
}
/* 키프레임 정의 */
@keyframes appearAndBounce {
  /* 0% : 시작 상태 (첫 화면에 없음) */
  0% {
    transform: scale(0);
    opacity: 0;
  }
  /* 60% : 커지면서 등장 (가장 크게 튀어나오는 순간을 살짝 늦춤) */
  60% {
    /* 이징 함수가 적용되므로 60%에서는 목표치보다 살짝 작게 설정해두면 더 자연스러움 */
    transform: scale(0.9);
    opacity: 1;
  }
  /* 100% : 최종 상태 (cubic-bezier에 의해 1을 넘어섰다가 튕겨서 1로 돌아옴) */
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes appear {
  /* 0% : 시작 상태 (첫 화면에 없음) */
  0% {
    transform: scale(0);
    opacity: 0;
  }
  /* 100% : 최종 상태 (cubic-bezier에 의해 1을 넘어섰다가 튕겨서 1로 돌아옴) */
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes appear_mo {
  /* 0% : 시작 상태 (첫 화면에 없음) */
  0% {
    transform: scale(0);
    opacity: 0;
  }
  /* 100% : 최종 상태 (cubic-bezier에 의해 1을 넘어섰다가 튕겨서 1로 돌아옴) */
  100% {
    transform: scale(1);
    opacity: 0.15;
  }
}
/* 키프레임 정의 2: 반짝임 (별처럼 반복) */
@keyframes twinkle_mo {
  0% {
    opacity: 0.2;
    /* matrix3d를 이용해 미세하게 크기 조절 (scale(1.0, 1.0, 1.0)과 같음) */
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  50% {
    opacity: 0.05; /* 가장 어두워지는 순간 */
    /* 크기를 미세하게 줄여서 움츠러드는 효과 (matrix3d의 첫 번째 1은 X축 scale, 여섯 번째 1은 Y축 scale) */
    transform: matrix3d(0.98, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    opacity: 0.15;
    /* 다시 살짝 커지면서 빛이 돌아오는 느낌 */
    transform: matrix3d(1.02, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes scroll-down-flow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }
  75% {
    transform: translateX(3%);
  }
  90% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  75% {
    transform: translateX(-3%);
  }
  90% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(-5%);
  }
}
@keyframes cloudyemove {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-10%);
  }
}
@keyframes cloudyemove2 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-5%);
  }
}
@keyframes cloudyemove3 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-14%);
  }
}
@keyframes tapAnimation {
  0% {
    /* Starting state: Low opacity and no horizontal shift */
    opacity: 0.1;
    transform: translateX(0%);
  }
  100% {
    /* Ending state: Full opacity and 100% horizontal shift */
    opacity: 1;
    transform: translateX(70%);
  }
}
@keyframes tapAnimation2 {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translate(-50%, -45%) scale(1.1) rotate(-5deg);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -48%) scale(1.05) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -40%) scale(0.65) rotate(7deg);
    opacity: 0.6;
  }
  60% {
    transform: translate(-50%, -60%) scale(1.2) rotate(-7deg);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.95) rotate(2deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes wobbleBall {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg); /* 중앙에서 시작 및 끝 (회전 없음) */
  }
  25% {
    transform: translate(-50%, -50%) rotate(5deg); /* 오른쪽으로 5도 회전 */
  }
  75% {
    transform: translate(-50%, -50%) rotate(-5deg); /* 왼쪽으로 5도 회전 */
  }
}
/* 가챠 공 충돌 흔들림 애니메이션 키프레임 */
@keyframes capsuleWobble {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg); /* 중앙 (움직임 멈춤) */
  }
  10% {
    transform: translate(-48%, -50%) rotate(5deg); /* 오른쪽으로 살짝 이동 및 회전 시작 */
  }
  30% {
    transform: translate(-55%, -50%) rotate(-10deg); /* ⬅️ 왼쪽 끝으로 이동하며 강하게 회전 (벽에 부딪힘 느낌) */
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg); /* 중앙 복귀 (잠시 멈춤 또는 반대 방향 준비) */
  }
  70% {
    transform: translate(-45%, -50%) rotate(10deg); /* ➡️ 오른쪽 끝으로 이동하며 강하게 회전 (벽에 부딪힘 느낌) */
  }
  90% {
    transform: translate(-52%, -50%) rotate(-5deg); /* 왼쪽으로 살짝 돌아옴 */
  }
}
@keyframes light_effect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes light_effect_1 {
  from {
    transform: rotate(0deg) scale(1.5);
  }
  to {
    transform: rotate(360deg) scale(1.5);
  }
}
@keyframes twinkle {
  /* GSAP의 fromTo: { opacity: 1 } 에서 시작 */
  0% {
    opacity: 1;
    transform: scale(1) rotate(0.001deg); /* 시작 시 크기는 원래대로 (1) */
    display: block;
  }
  /* GSAP의 to: { opacity: 0, scale: R(0, 0.7) } 으로 이동 */
  50% {
    /* JS의 R(0, 0.7) 대신 중간 크기 0.35를 사용 */
    opacity: 0;
    transform: scale(0.8) rotate(0.001deg);
    /* display: none; 을 50% 지점에서 줄 경우 부드러움이 깨지므로 opacity로 대체 */
  }
  /* yoyo: true 효과를 위해 50% 지점에서 다시 0% 상태로 돌아감 */
  100% {
    opacity: 1;
    transform: scale(1) rotate(0.001deg);
    display: block;
  }
}
.dimm {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 102;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

.popupWrap {
  position: relative;
  overflow: hidden;
}

.comPopup {
  display: none;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.comPopupSecond {
  display: none;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.comPopupAgree {
  display: none;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.popup {
  min-width: 300px;
  width: calc(100% - 10px);
  z-index: 113;
  background-color: #fff;
  border-radius: 10px;
  padding: 40px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.popup .close {
  cursor: pointer;
  width: 15px;
  height: 14px;
  display: block;
  font-size: 0;
  position: absolute;
  right: 25px;
  top: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M1 13.5L14 0.500001' stroke='%230B132B' stroke-linecap='round'/%3E%3Cpath d='M1 0.5L14 13.5' stroke='%230B132B' stroke-linecap='round'/%3E%3C/svg%3E");
}
.popup .title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 50px;
}
.popup .btn-box {
  margin-top: 10px !important;
}
.popup .btn-box.d-flex {
  justify-content: space-between;
}
.popup .btn-box .button {
  width: calc(50% - 5px);
}
.popup .btn-group {
  justify-content: space-between;
  margin-top: 24px;
}
@media all and (min-width: 1049px) {
  .popup .btn-group {
    margin-top: 40px;
  }
}
.popup .btn-group.col2 .button {
  width: calc(50% - 5px);
}
.popup .text-info {
  margin-top: 40px;
}

.serviceMenuPopup {
  border-radius: 10px;
  padding: 25px 0;
  display: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.serviceMenuPopup.fadeUp {
  display: block;
}
.serviceMenuPopup .title {
  font-size: 18px;
  font-weight: 600;
  color: #0b132b;
}
.serviceMenuPopup.popup {
  background-color: #fff;
  padding: 0 20px;
}
@media all and (min-width: 1049px) {
  .serviceMenuPopup.popup {
    padding: 0;
  }
}
.serviceMenuPopup.popup li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 16px;
}
.serviceMenuPopup.popup li.primaryColor-black {
  font-weight: 500;
}
.serviceMenuPopup.popup li.total-area {
  padding-top: 16px;
  border-top: 1px solid #ebebeb;
}

.search-setting.popup {
  padding: 25px 25px 45px 25px;
  z-index: 113;
}
.search-setting.popup .title {
  margin-bottom: 25px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
  color: #0b132b;
}
.search-setting.popup .form-group .s-tit {
  display: block;
  line-height: 18px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #0b132b;
}
.search-setting.popup .form-group .mb {
  margin-bottom: 15px;
}
.search-setting.popup .form-group .text-rdo-wrap {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-setting.popup .form-group .text-rdo-wrap input[type=checkbox] + label,
.search-setting.popup .form-group .text-rdo-wrap input[type=radio] + label {
  display: inline-block;
  width: 100%;
  height: auto;
  border: 0;
  background-color: #f3f3f4;
  border-radius: 10px;
  padding: 8px 5px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  color: #0b132b;
}
.search-setting.popup .form-group .text-rdo-wrap input[type=checkbox] + label::before,
.search-setting.popup .form-group .text-rdo-wrap input[type=radio] + label::before {
  display: none;
}
.search-setting.popup .form-group .text-rdo-wrap input[type=checkbox]:checked + label,
.search-setting.popup .form-group .text-rdo-wrap input[type=radio]:checked + label {
  background-color: #626cff;
  color: #fff;
}
.search-setting.popup .form-group .text-rdo-wrap input[type=checkbox]:checked + label::before,
.search-setting.popup .form-group .text-rdo-wrap input[type=radio]:checked + label::before {
  display: none;
}
.search-setting.popup .form-group .text-rdo-wrap span {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}
.search-setting.popup .form-group .text-rdo-wrap.col2 span {
  width: calc(50% - 5px);
}
.search-setting.popup .form-group .text-rdo-wrap.col3 span {
  width: calc(33% - 5px);
}
.search-setting.popup .form-group .text-rdo-wrap.col4 span {
  width: calc(25% - 5px);
}
.search-setting.popup .form-group .text-rdo-wrap.col5 span {
  width: calc(20% - 5px);
}
.search-setting.popup .form-group .calender {
  border: 1px solid #626cff;
  border-radius: 10px;
  height: 34px;
}

.agreePopup {
  border-radius: 10px;
  background-color: #fff;
}
.agreePopup.chk-list {
  width: 700px;
  min-height: 500px;
  padding: 40px 40px;
  overflow-y: auto;
  text-align: center;
}
.agreePopup.chk-list .p-title {
  line-height: 36px;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}
.agreePopup.chk-list .p-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 40px;
}
.agreePopup.chk-list .list {
  text-align: left;
}
.agreePopup.chk-list .list li {
  margin-bottom: 15px;
  margin-left: 30px;
}
.agreePopup.chk-list .list li input[type=checkbox] + label {
  width: auto;
  height: auto;
  background-color: transparent;
  border: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}
.agreePopup.chk-list .list li input[type=checkbox] + label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #747474;
  margin-top: -2px;
  margin-left: -30px;
  margin-right: 8px;
  color: #0b132b;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.agreePopup.chk-list .list li input[type=checkbox]:checked + label::before {
  border: 0;
  background-color: #4065e7;
}
.agreePopup.chk-list .list li:last-child {
  font-weight: 600;
  border-top: 1px solid #f3f3f4;
  padding-top: 20px;
  margin-top: 20px;
}
.agreePopup.chk-list .btn-group {
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
}
.agreePopup.chk-list .btn-group .button {
  width: 130px;
  margin-left: 16px;
  font-size: 20px;
}

.productPopUp {
  border-radius: 10px;
  background-color: #fff;
}
.productPopUp.chk-list {
  width: 100%;
  min-height: 150px;
  padding: 40px 40px;
  overflow-y: auto;
  text-align: center;
}
@media all and (min-width: 1049px) {
  .productPopUp.chk-list {
    width: 500px;
    min-height: 180px;
  }
}
.productPopUp.chk-list .p-title {
  line-height: 36px;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}
.productPopUp.chk-list .p-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 40px;
}
.productPopUp.chk-list .list {
  text-align: left;
}
.productPopUp.chk-list .list li {
  margin-bottom: 15px;
  margin-left: 30px;
}
.productPopUp.chk-list .list li input[type=checkbox] + label {
  width: auto;
  height: auto;
  background-color: transparent;
  border: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}
.productPopUp.chk-list .list li input[type=checkbox] + label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #747474;
  margin-top: -2px;
  margin-left: -30px;
  margin-right: 8px;
  color: #0b132b;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.productPopUp.chk-list .list li input[type=checkbox]:checked + label::before {
  border: 0;
  background-color: #4065e7;
}
.productPopUp.chk-list .list li:last-child {
  font-weight: 600;
  border-top: 1px solid #f3f3f4;
  padding-top: 20px;
  margin-top: 20px;
}
.productPopUp.chk-list .btn-group {
  margin-top: 20px;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
}
.productPopUp.chk-list .btn-group .button {
  width: 200px;
  margin-left: 16px;
  font-size: 20px;
}

.content .serviceMenuPopup .title {
  margin-bottom: 20px;
}
.content .serviceMenuPopup .line-box {
  position: relative;
  border-radius: 10px !important;
  border: 1px solid #414ac7 !important;
  padding: 0 20px 24px 20px !important;
}
.content .serviceMenuPopup .line-box h5 {
  display: inline-block !important;
  margin: -7px 0 15px -10px;
  padding: 0 10px;
  font-weight: 300;
  font-size: 12px;
}
.content .serviceMenuPopup .line-box .check-detail div.row {
  margin-bottom: 8px;
  margin-top: 8px;
}
.content .serviceMenuPopup .line-box .check-detail div.row .line {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 8px;
}
.content .serviceMenuPopup .line-box .check-detail div.row:first-child {
  margin-top: 0;
}
.content .serviceMenuPopup .line-box .check-detail div.row:last-child {
  margin-bottom: 0;
}
.content .serviceMenuPopup .line-box .check-detail div.row.popup-tg-open {
  cursor: pointer;
}
.content .serviceMenuPopup .line-box .check-detail div.row .main-cont,
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-open {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #0b132b;
  line-height: 24px;
}
.content .serviceMenuPopup .line-box .check-detail div.row .main-cont i,
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-open i {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  border-top: 2px solid #0b132b;
  border-right: 2px solid #0b132b;
  border-radius: 0 1px 0 0;
  transform: rotate(135deg);
  margin-top: -3px;
  margin-left: 8px;
  cursor: pointer;
}
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont {
  display: none;
  margin-top: 10px;
  border-bottom: 1px solid #ebebeb;
}
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 300;
  color: #747474;
  margin-bottom: 4px;
  margin-top: 4px;
}
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li.points * {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #bd0000 !important;
}
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li:first-child {
  margin-top: 0;
}
.content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li:last-child {
  margin-bottom: 0;
}
.content .serviceMenuPopup .line-box .check-detail div.row span em {
  margin-left: 8px;
}
.content .serviceMenuPopup .line-box .service-tg {
  color: #747474;
  margin-bottom: 32px;
  margin-top: 10px;
}
.content .serviceMenuPopup .line-box .service-tg .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 10px;
  margin-bottom: 15px;
  line-height: 18px;
}
.content .serviceMenuPopup .line-box .service-tg .row {
  margin-bottom: 15px;
}
.content .serviceMenuPopup .line-box .service-tg .row em {
  font-style: normal;
}
.content .serviceMenuPopup .line-box .service-tg .row .popup-tg-open {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 18px;
  cursor: pointer;
}
.content .serviceMenuPopup .line-box .service-tg .row .popup-tg-open i {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  border-top: 1px solid #747474;
  border-right: 1px solid #747474;
  border-radius: 0 1px 0 0;
  transform: rotate(135deg);
  margin-top: -3px;
  margin-left: 3px;
}
.content .serviceMenuPopup .line-box .service-tg .row .popup-tg-open .primaryColor-black i {
  border-top: 1px solid #0b132b;
  border-right: 1px solid #0b132b;
}
.content .serviceMenuPopup .line-box .service-tg .row .popup-tg-open.on i {
  transform: rotate(-45deg);
  margin-top: 3px;
}
.content .serviceMenuPopup .line-box .service-tg .row .popup-tg-cont {
  display: none;
  margin-top: 10px;
}
.content .serviceMenuPopup .line-box .service-tg .row .popup-tg-cont li {
  line-height: 18px;
  margin-bottom: 0 !important;
}

@media all and (max-width: 780px) {
  .showUp .line-box {
    border: 0 !important;
    padding: 0 !important;
  }
  .showUp .line-box h5 {
    display: none !important;
  }
  .popup li {
    margin-bottom: 10px !important;
  }
  .popup .inner {
    padding-bottom: 0 !important;
  }
  .popup .title {
    display: block !important;
    margin-bottom: 16px;
  }
  .agreePopup {
    border-radius: 10px;
    background-color: #fff;
  }
  .agreePopup.chk-list {
    width: 100%;
    height: 500px;
    min-height: 400px;
    padding: 16px;
    overflow: hidden;
    text-align: center;
  }
  .agreePopup.chk-list .p-title {
    line-height: 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .agreePopup.chk-list .p-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 30px;
  }
  .agreePopup.chk-list .list {
    height: 300px;
    text-align: left;
    overflow-y: auto;
  }
  .agreePopup.chk-list .list li {
    margin-bottom: 10px;
    margin-left: 30px;
  }
  .agreePopup.chk-list .list li input[type=checkbox] + label {
    width: auto;
    height: auto;
    background-color: transparent;
    border: 0;
    border: 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
  }
  .agreePopup.chk-list .list li input[type=checkbox] + label::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #747474;
    margin-top: -2px;
    margin-left: -25px;
    margin-right: 8px;
    color: #0b132b;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
  }
  .agreePopup.chk-list .list li input[type=checkbox]:checked + label::before {
    border: 0;
    background-color: #4065e7;
  }
  .agreePopup.chk-list .list li:last-child {
    font-weight: 600;
    border-top: 1px solid #f3f3f4;
    padding-top: 10px;
    margin-top: 10px;
  }
  .agreePopup.chk-list .btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
  }
  .agreePopup.chk-list .btn-group .button {
    width: calc(50% - 5px);
    margin-left: 0;
    font-size: 16px;
  }
  .ui-widget.ui-widget-content {
    width: 280px !important;
  }
  .service-popup.pointsPopup {
    width: calc(100% - 10px) !important;
  }
  .service-popup.pointsPopup .top img {
    width: unset;
  }
  .service-popup.pointsPopup .inner .row .pop-cost .pop-cost-input button {
    padding: 0px;
  }
  .service-popup.couponPopup {
    width: calc(100% - 10px) !important;
  }
  .service-popup.couponPopup .top img {
    width: unset;
  }
  .service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li {
    margin-bottom: 0 !important;
  }
}
@media (min-width: 781px) and (max-width: 1048px) {
  .popup {
    width: 440px;
    left: 50%;
    top: 50%;
  }
  .showUp .line-box h5 {
    display: none !important;
  }
  .button {
    font-size: 12px !important;
  }
}
@media all and (min-width: 1049px) {
  .popup {
    width: 512px;
    left: 50%;
    top: 50%;
    padding: 40px 30px;
  }
  .popup .inner {
    padding-top: 0 !important;
  }
  .popup .title {
    font-size: 32px;
    font-weight: 600;
    color: #000;
  }
  .popup .text-info {
    margin: 30px 0 20px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }
  .showUp {
    max-width: 50%;
    left: 50%;
    top: 0;
    transform: translate(0, 0);
    padding-bottom: 50px !important;
  }
  .showUp.popup {
    padding: 0;
  }
  .showUp .line-box {
    border-radius: 10px;
    border: 1px solid #414ac7;
    padding: 10px 35px 40px;
  }
  .showUp .line-box h5 {
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
    padding: 0 15px;
    line-height: 24px;
    font-weight: 300;
    margin: -23px 0 30px -15px;
  }
  .showUp .line-box li {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
  }
  .showUp .line-box li.primaryColor-black {
    font-weight: 500;
  }
  .cont-row {
    position: relative;
  }
  .search-setting.popup .title {
    line-height: 30px;
    font-size: 20px;
    font-weight: 400;
    color: #0b132b;
  }
  .search-setting.popup .form-group .s-tit {
    font-size: 16px;
    line-height: 24px !important;
  }
  .search-setting.popup .form-group input[type=checkbox] + label,
  .search-setting.popup .form-group input[type=radio] + label {
    font-size: 16px !important;
  }
  .search-setting.popup .form-group .text-rdo-wrap input[type=checkbox] + label,
  .search-setting.popup .form-group .text-rdo-wrap input[type=radio] + label {
    line-height: 24px;
  }
  .content .serviceMenuPopup {
    width: 50%;
    padding: 0;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  .content .serviceMenuPopup .title {
    margin-bottom: 30px;
  }
  .content .serviceMenuPopup .line-box {
    padding: 0 30px 40px !important;
  }
  .content .serviceMenuPopup .line-box h5 {
    display: inline-block !important;
    margin: -7px 0 15px -10px;
    padding: 0 10px;
    font-weight: 300;
    font-size: 12px;
  }
  .content .serviceMenuPopup .line-box .check-detail {
    padding-top: 8px;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row {
    margin-bottom: 8px;
    margin-top: 8px;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .line {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 8px;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row:first-child {
    margin-top: 0;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row:last-child {
    margin-bottom: 0;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row.popup-tg-open {
    cursor: pointer;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .main-cont,
  .content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #0b132b;
    line-height: 24px;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont {
    display: none;
    margin-top: 10px;
    border-bottom: 1px solid #ebebeb;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 300;
    color: #747474;
    margin-bottom: 4px;
    margin-top: 4px;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li.points * {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #bd0000 !important;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li:first-child {
    margin-top: 0;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row .popup-tg-cont li:last-child {
    margin-bottom: 0;
  }
  .content .serviceMenuPopup .line-box .check-detail div.row span em {
    margin-left: 8px;
  }
  .content .serviceMenuPopup .line-box .service-tg {
    color: #747474;
  }
  .content .serviceMenuPopup .line-box .service-tg .top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
    margin-bottom: 15px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 500 !important;
  }
  .content .serviceMenuPopup .line-box .service-tg .row {
    margin-bottom: 15px;
  }
  .content .serviceMenuPopup .line-box .service-tg .row em {
    font-style: normal;
  }
  .content .serviceMenuPopup .line-box .service-tg .row .popup-tg-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 24px;
    font-size: 16px;
    font-weight: 300;
  }
  .content .serviceMenuPopup .line-box .service-tg .row .popup-tg-cont {
    display: none;
    margin-top: 10px;
  }
  .content .serviceMenuPopup .line-box .service-tg .row .popup-tg-cont li {
    line-height: 24px;
    font-weight: 300;
    margin-bottom: 8px !important;
  }
  .content .serviceMenuPopup.fadeUp {
    opacity: 1;
    -webkit-animation-name: fadeUpAni;
    animation-name: fadeUpAni;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @-webkit-keyframes fadeUpAni {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100px);
      transform: translateY(100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @keyframes fadeUpAni {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100px);
      transform: translateY(100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
}
.service-popup {
  display: none;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
.service-popup.pointsPopup {
  margin-left: -5px;
  width: 360px;
  padding: 0;
}
.service-popup.pointsPopup .top {
  padding: 8px 20px;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 0 0;
}
.service-popup.pointsPopup .top.d-flex {
  flex-direction: unset;
  justify-content: space-between;
}
.service-popup.pointsPopup .top span {
  font-size: 16px;
  font-weight: 600;
  color: #0b132b;
}
.service-popup.pointsPopup .inner {
  padding: 20px 20px 36px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.service-popup.pointsPopup .inner .row.d-flex {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-popup.pointsPopup .inner .row div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.service-popup.pointsPopup .inner .row hr {
  width: 100%;
  color: #CAD0D8;
}
.service-popup.pointsPopup .inner .row .pop-header label {
  display: flex;
  flex-direction: column;
}
.service-popup.pointsPopup .inner .row .pop-header label span em {
  margin-left: 4px;
}
.service-popup.pointsPopup .inner .row .pop-header label span:first-child {
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
  color: #0b132b;
}
.service-popup.pointsPopup .inner .row .pop-header label span:last-child {
  line-height: 18px;
  font-size: 12px;
  font-weight: 300;
  color: #747474;
}
.service-popup.pointsPopup .inner .row .pop-header label span:last-child.point-totalKrw-coupon {
  background: #A3B9FF;
  border-radius: 10px;
  line-height: 15px;
  font-size: 10px;
  font-weight: 600;
  color: #002CBD;
  width: fit-content;
  padding: 2px 4px;
  margin-left: auto;
}
.service-popup.pointsPopup .inner .row .pop-cont label {
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #0b132b;
}
.service-popup.pointsPopup .inner .row .pop-cont span {
  align-content: center;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #0b132b;
}
.service-popup.pointsPopup .inner .row .pop-cont span em {
  margin-left: 4px;
}
.service-popup.pointsPopup .inner .row .pop-cont span.no-point {
  color: #bd0000;
}
.service-popup.pointsPopup .inner .row .pop-cont span.no-point em {
  color: #bd0000;
  margin-left: 4px;
}
.service-popup.pointsPopup .inner .row .pop-cost {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-popup.pointsPopup .inner .row .pop-cost span {
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #0b132b;
}
.service-popup.pointsPopup .inner .row .pop-cost span.no-point {
  color: #d9d9d9;
}
.service-popup.pointsPopup .inner .row .pop-cost .pop-cost-input .no-point {
  color: #d9d9d9;
}
.service-popup.pointsPopup .inner .row .pop-cost .pop-cost-input button {
  font-size: 16px;
  font-weight: 400;
  color: #0b132b;
  line-height: 24px;
  background: #f3f3f4;
  border-radius: 10px;
  padding: 8px;
  width: 56px;
}
.service-popup.pointsPopup .inner .row.pop-btn-group span {
  text-align: center;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #bd0000;
  margin-bottom: 32px;
}
.service-popup.couponPopup {
  width: 720px;
  padding: 0;
}
.service-popup.couponPopup .top {
  padding: 8px 20px;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 0 0;
}
.service-popup.couponPopup .top.d-flex {
  flex-direction: unset;
  justify-content: space-between;
}
.service-popup.couponPopup .top span {
  font-size: 16px;
  font-weight: 600;
  color: #0b132b;
}
.service-popup.couponPopup .inner {
  padding: 20px 20px 36px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service-popup.couponPopup .inner .row.pop-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box::-webkit-scrollbar {
  width: 5px; /* 스크롤바의 너비 */
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box::-webkit-scrollbar-thumb {
  background: #626cff; /* 스크롤바의 색상 */
  border-radius: 10px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box::-webkit-scrollbar-track {
  background: rgba(33, 122, 244, 0.1); /*스크롤바 뒷 배경 색상*/
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: scroll;
  max-height: 380px;
  padding-bottom: 20px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li {
  display: flex;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-title {
  width: 160px;
  position: relative;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-title .coupon-title-info {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-title .coupon-title-info img {
  width: 32px;
  height: 32px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-title .coupon-title-info div {
  line-height: 21px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-title .coupon-title-circle {
  background: #fff;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0 16px 16px 0;
  border: 1px solid #95a1b2;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-title .coupon-title-back {
  width: 100%;
  height: 100%;
  border-radius: 10px 0 0 10px;
  border: 1px solid #95a1b2;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info {
  padding: 16px;
  border-radius: 0 10px 10px 0;
  border: 1px solid #95A1B2;
  border-left: none;
  width: calc(100% - 120px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info .coupon-amount {
  line-height: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #0b132b;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info .coupon-amount em {
  margin-left: 4px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info .coupon-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info .coupon-description .coupon-description-title {
  line-height: 21px;
  font-size: 14px;
  font-weight: 600;
  color: #414ac7;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info .coupon-description div {
  display: flex;
  flex-direction: column;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li .coupon-info .coupon-description div span {
  line-height: 15px;
  font-size: 10px;
  font-weight: 500;
  color: #5C6B7E;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-available .coupon-title .coupon-title-back {
  background: #4065e7;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-available.selected .coupon-title .coupon-title-circle {
  border: 4px solid #00BDA6;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-available.selected .coupon-title .coupon-title-back {
  border: 4px solid #00BDA6;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-available.selected .coupon-info {
  background: #E9FFEF;
  border: 4px solid #00BDA6;
  border-left: none;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-title .coupon-title-back {
  background: #7A8A9F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-info .coupon-amount {
  color: #7A8A9F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-info .coupon-amount em {
  color: #7A8A9F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-info .coupon-description .coupon-description-title {
  color: #7A8A9F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-info .coupon-description div span {
  color: #7A8A9F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-info .coupon-description div span em {
  color: #7A8A9F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-coupon-box ul li.coupon-unavailable .coupon-info .coupon-description div span em.expired {
  color: #D80B1F;
}
.service-popup.couponPopup .inner .row.pop-header .pop-check-box label {
  line-height: 15px;
  font-size: 12px;
  font-weight: 300;
  color: #0b132b;
}
.service-popup.couponPopup .inner .row .pop-register {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-popup.couponPopup .inner .row .pop-register span {
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #0b132b;
}
.service-popup.couponPopup .inner .row .pop-register .pop-coupon-input {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.service-popup.couponPopup .inner .row .pop-register .pop-coupon-input button {
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  padding: 8px 12px;
  background: #4065e7;
  border-radius: 10px;
}
.service-popup.couponPopup .inner .row.pop-btn-group {
  margin-top: 20px;
}

/*# sourceMappingURL=style.css.map */