@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
:root {
  --main-color: #3648fb; /* 메인(가격, 체크박스, 상품명, 달력 등) */
  --bottom-bg-color: #1c1c1d; /* 하단 신청 배경 */
  --bottom-input-color: #d1d1d1; /* 하단 신청 입력, 달력 배경 */
  --bottom-label-color: #fff; /* 하단 신청 텍스트 */
  --input-text-color: #555; /* 하단 신청 인풋 텍스트 */
  --btn-bg-color: #ff309c; /* 버튼 배경*/
  --btn-text-color: #fff; /* 버튼 텍스트 */
  --bg-color: #000; /* 상품 리스트 배경 */
  --white-color: #fff;
  --text-color: #555;
}
img {
  vertical-align: top;
}
.content {
  position: relative;
  padding-top: 0px;
  background: #1c1c1d;
}

.content .ppeum_wrap {
  padding-bottom: 200px;
}
.content.mo .ppeum_wrap {
  padding-bottom: 500px;
}

@media (max-width: 500px) {
  .content {
    width: 100%;
  }
}

.top_text {
  padding: 32px 0;
  text-align: center;
  background-color: #000;
}

.blink {
  -webkit-animation: blink 0.6s linear infinite;
  -moz-animation: blink 0.6s linear infinite;
  animation: blink 0.6s linear infinite;
}
@-webkit-keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}
@-moz-keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}

.step01 {
  position: relative;
  background: #fff url(../img/background_img.jpg) no-repeat;
  padding: 121% 0 18%;
}
.step01.off {
  display: none;
}

.step01.gn {
  padding: 119% 0 15%;
}

.step02 {
  display: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.step02.on {
  display: block;
  z-index: 10;
  opacity: 1;
  overflow-y: auto;
}

/*슬롯 영역*/
.slot_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.slot_machine {
  position: relative;
  width: 100%;
  padding: 13% 0 10%;
  background: url("../img/slot.png") no-repeat center / contain;
  transform: translateX(20px);
}

/* 실제 카드가 보이는 영역 */
.slot_window {
  width: 36%;
  height: 470px;
  margin: 0 auto;
  overflow: hidden;
  transform: translateX(-20px);
}

/* 움직이는 카드 묶음 */
.slot_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.slot_card img {
  width: 100%;
  display: block;
}
.slot_btn {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.slot_btn .text_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
}

/* 두번째 페이지 - 상품 선택 */
.step2_top_img {
  position: relative;
}
.step2_top_img .paper {
  position: absolute;
  animation: fall 2s linear infinite;
}
.step2_top_img .con1 {
  top: -1px;
  left: 190px;
  animation-delay: 1.5ms;
}

.step2_top_img .con2 {
  top: 177px;
  left: 63px;
  animation-delay: 0.6ms;
}
.step2_top_img .con3 {
  top: 43px;
  left: 605px;
  animation-delay: 0.8ms;
}
.step2_top_img .con4 {
  top: 9px;
  left: 810px;
  animation-delay: 1.2ms;
}
.step2_top_img .con5 {
  top: 113px;
  left: 935px;
  animation-delay: 0.3ms;
}
.step2_top_img .con6 {
  top: 393px;
  left: 56px;
  animation-delay: 1.9ms;
}
.step2_top_img .con7 {
  top: 350px;
  right: 50px;
  animation-delay: 1ms;
}

@keyframes fall {
  0% {
    transform: translateY(-10%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(390deg);
    opacity: 0;
  }
}

.tab_cont_wrap {
  background-image: url("../img/landing_02.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 90px 0 130px;
}
.landing_title {
  display: block;
  margin: 0 auto;
}

.tab_cont {
  margin-top: 70px;
}
.tab_cont li {
  width: 90%;
  border-radius: 20px;
  padding: 37px;
  background-color: #fff;
  box-sizing: border-box;
  margin: 0 auto 17px;
}
.tab_cont li:last-child {
  margin-bottom: 0;
}

.tab_cont li::before,
.tab_cont li::after {
  width: 0;
  height: 0;
  border: 0;
}
.tab_cont li > div {
  position: relative;
  padding-left: 75px;
  display: flex;
  justify-content: space-between;
}
.tab_cont li > div::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 49px;
  height: 49px;
  margin-top: -28px;
  box-sizing: border-box;
  background: #ececec;
  border-radius: 5px;
  border: 1px solid #d4d4d4;
}
.tab_cont li.selected > div::before {
  background-image: url("../img/check-line.png");
  background-size: contain;
}

.tab_cont li .tit_wrap .tit {
  font-family: "Pretendard";
  font-size: 41px;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1.2;
}

.tab_cont li .tit_wrap span,
.tab_cont li .tit_wrap b {
  font-family: "Pretendard";
  display: block;
  margin-top: 5px;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1.4;
  color: #747474;
}
.tab_cont li .tit_wrap b {
  color: #000;
}
.price_wrap > p {
  display: flex;
  gap: 10px;
  flex-direction: column;
  text-align: right;
}
.price_wrap > p b {
  font-family: "Jost";
  font-size: 55px;
  font-weight: 900;
  color: #0048ff;
  letter-spacing: -3px;
}
.price_wrap > p em {
  font-family: "Jost";
  font-size: 28px;
  font-weight: 500;
  text-decoration: line-through;
  color: #848484;
  letter-spacing: -3px;
}

/*팝업*/
.pop {
  display: none;
  position: fixed;
  width: 1080px;
  background: rgba(0, 0, 0, 0.7);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  z-index: 10;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  transition: all ease 0.3s;
}
.pop .innerPop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 957px;
  height: 1284px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 34px;
}
.pop .popImg {
  width: 100%;
  border-radius: 22px;
}
.mo.pop .popImg {
  border-radius: 34px;
}
.pop .popClose {
  position: absolute;
  border: 0;
  top: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  background: url(../img/close.png) no-repeat 50% 50%;
  background-size: 38px;
  font-size: 0;
  color: transparent;
}
.pop .moveBtn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 77px;
  width: 779px;
  border: 0;
  background: transparent;
  margin: 0 auto;
  cursor: pointer;
}
.pop .moveBtn img {
  width: 100%;
}

.moveBtn .moveBtn_inner {
  position: relative;
}
.moveBtn .moveBtn_inner .apply_text {
  width: 38.5%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.pop.pc .innerPop {
  width: 507px;
  height: 680px;
  border-radius: 20px;
  overflow: hidden;
}
.pop.pc .popClose {
  top: 17px;
  right: 17px;
  background-size: 21px;
  cursor: pointer;
}
.pop.pc .moveBtn {
  bottom: 40px;
  width: 85%;
}
.pop .pop_cont {
  position: absolute;
  top: 34%;
  left: 52%;
  transform: translateX(-50%);
  width: 95%;
}

.event_request {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 0;
  margin-left: -540px;
  width: 1080px;
  height: 160px;
  border: 0;
  background: #1c1c1d;
  font-size: 0;
  font-weight: 500;
  letter-spacing: -3px;
  color: transparent;
  z-index: 20;
  font-family: "Noto Sans KR";
}

.pop_info {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
}
.pop_info_cont {
  width: 810px;
  height: 890px;
  height: 537px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  box-sizing: border-box;
  font-size: 42px;
  font-weight: 400;
  color: #000;
  letter-spacing: -2px;
  line-height: 1.5;
}
.pop_info_cont p {
  font-size: 60px;
  font-weight: 400;
  color: #000;
  letter-spacing: -3px;
  line-height: 1.5;
  margin-top: 100px;
  margin-bottom: 90px;
}
.pop_info_cont p em {
  color: #ea4da4;
}
.pop_info_cont .ok-btn {
  width: 480px;
  height: 150px;
  background: #ff309c;
  color: #fff;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -6px;
  border: 0;
  border-radius: 75px;
  margin-top: 0;
  outline: 0;
}
.pc .pop_info_cont {
  width: 600px;
  height: 650px;
  height: 364px;
  font-size: 30px;
}
.pc .pop_info_cont p {
  font-size: 40px;
  margin-top: 72px;
  margin-bottom: 50px;
}
.pc .pop_info_cont .ok-btn {
  width: 380px;
  height: 100px;
  font-size: 40px;
}
.notice {
  font-size: 26px;
  font-weight: 300;
  color: #8e8399;
  letter-spacing: -1px;
  margin-top: 50px;
  margin-bottom: 65px;
  text-align: center;
}

.content:not(.benefit) .laser_cont_box,
.content:not(.benefit) .event_request {
  display: none;
}
.content.benefit .laser_cont_box {
  display: block;
  z-index: 21;
  padding-top: 9%;
}

#consult_wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 21;
  margin: 0 auto;
  padding-bottom: 0;
  background: #1c1c1d;
}
#consult_wrapper h1,
#consult_wrapper .consult_close {
  display: none !important;
}
#consult_wrapper .consult_inner {
  background: transparent;
  width: 90%;
  height: auto;
  max-height: none;
  width: 900px;
  position: relative;
  top: 0;
  left: 0 !important;
  right: 0;
  margin: 0 auto;
  padding: 0 0 0 0;
  -webkit-transform: unset;
  -moz-transform: unset;
  transform: unset;
  box-sizing: border-box;
}
#consult_wrapper.mo .consult_inner {
  width: 90%;
  height: auto;
  max-height: unset;
}
#consult_wrapper .consult_inner .form_wrapper {
  height: auto;
}
#consult_wrapper.pc .consult_inner {
  width: 870px;
  height: auto;
  padding: 0;
}
#consult_wrapper.ver2 .formGroup.selectBox {
  margin-top: 3px;
  margin-bottom: 35px;
  padding-bottom: 10px;
}
#consult_wrapper.ver2.mo .formGroup.selectBox {
  padding-bottom: 24px;
}
#consult_wrapper.mo .formGroup.selectBox label {
  top: 22px;
}
#consult_wrapper.ver2 .formGroup.selectBox::before {
  position: static;
}
#consult_wrapper.ver2 .formGroup.selectBox select {
  background: #3d3d3d url(/include/common/img/ico_arrow_bk.png) no-repeat 96%
    50%;
  border: 0 !important;
  cursor: pointer;
  width: 100% !important;
  height: 86px !important;
  margin-left: 0;
  padding: 0 27px !important;
  font-size: 34px !important;
  margin-bottom: 0;
}
#consult_wrapper.ver2.mo .formGroup.selectBox select {
  height: 120px !important;
}
#consult_wrapper .consult_inner .formGroup select * {
  color: #fff;
}
#consult_wrapper .formGroup input[type="text"],
#consult_wrapper .formGroup input[type="number"],
#consult_wrapper .formGroup select {
  width: 100% !important;
  height: 126px !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  color: #fff !important;
  padding: 15px 30px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  outline: 0;
  background: #3d3d3d;
}
#consult_wrapper.mo .reserveAccordion .reserveTimeGroup {
  height: 238px;
}
#consult_wrapper .reserveAccordion.reserveDateWrapper .sectionTitle span {
  display: block;
}
#consult_wrapper .reserveAccordion .sectionTitle span em {
  width: 100% !important;
  height: 126px !important;
  font-size: 38px !important;
  font-weight: 500 !important;
  padding: 15px 30px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: 0;
  background: #3d3d3d;
  margin-left: 0;
  top: -30px !important;
  display: flex;
  align-items: center;
}
#consult_wrapper.pc .reserveAccordion .sectionTitle span em {
  width: 100% !important;
  height: 90px !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  padding: 15px 30px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: 0;
  background: #3d3d3d;
  margin-left: 0;
  top: -22px !important;
  display: flex;
  align-items: center;
}
#consult_wrapper .reserveAccordion .selectList .radioBox:hover label,
#consult_wrapper
  .reserveAccordion
  .selectList
  .radioBox
  input[type="radio"]:checked
  + label {
  color: #ff309c;
}
#consult_wrapper.pc .formGroup .titles,
#consult_wrapper.pc .formGroup_radio span,
#consult_wrapper.pc .reserveRadioBox span {
  font-size: 34px;
  color: #fff;
  font-weight: 400;
}
#consult_wrapper.ver2 .formGroup.selectBox .titles {
  display: none !important;
}
#consult_wrapper.pc .formGroup label[for="name"] {
  margin-top: 20px;
}
#consult_wrapper .formGroup input[type="text"],
#consult_wrapper .formGroup input[type="number"],
#consult_wrapper .formGroup select,
#consult_wrapper.pc .formGroup input[type="text"],
#consult_wrapper.pc .formGroup input[type="number"],
#consult_wrapper.pc .formGroup select {
  border: 0 !important;
}
#consult_wrapper .reserveTimeWrapper,
#consult_wrapper .formGroup,
#consult_wrapper .formGroup_radio {
  margin-right: 0;
  border: 0;
}
#consult_wrapper .reserveAccordion .selectList.on {
  margin-top: -28px;
}
#eventCalendar .ui-widget.ui-widget-content {
  border: 0;
  width: 100%;
  padding: 0;
  background: #3d3d3d !important;
}
#eventCalendar .ui-state-default,
#eventCalendar .ui-widget-content .ui-state-default,
#eventCalendar .ui-widget-header .ui-state-default,
#eventCalendar .ui-button,
html #eventCalendar .ui-button.ui-state-disabled:hover,
html #eventCalendar .ui-button.ui-state-disabled:active {
  border: 0;
  background: transparent;
  font-weight: normal;
  color: #fff;
}
#eventCalendar .ui-datepicker td a.ui-state-highlight::after,
#eventCalendar .ui-datepicker td.ui-datepicker-today .ui-state-default::after {
  color: #fff;
}
#eventCalendar .ui-state-disabled,
#eventCalendar .ui-widget-content .ui-state-disabled,
#eventCalendar .ui-widget-header .ui-state-disabled {
  opacity: 0.3;
  filter: Alpha(Opacity=30);
}
#eventCalendar .ui-datepicker th,
#consult_wrapper .reserveAccordion.reserveDateWrapper .sectionTitle span,
#eventCalendar .ui-datepicker .ui-datepicker-title {
  color: #fff;
}
#eventCalendar {
  padding-top: 40px;
  background: #3d3d3d;
  padding-bottom: 30px;
  margin-top: 20px;
}

#consult_wrapper .formGroup.selectOpt {
  color: #fff;
  font-weight: 300;
}
#consult_wrapper .consult_inner form .submit_btn {
  position: fixed !important;
  width: 1080px !important;
  display: inline-block;
  background: #ff309c !important;
  height: 160px !important;
  margin: 0 auto !important;
  right: 0 !important;
  font-family: "Note Sans KR";
  font-size: 46px !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.proChkBtn {
  background: var(--btn-bg-color) !important;
  color: var(--btn-text-color) !important;
}
#consult_wrapper .consult_inner form .moreBtn {
  display: inline-block;
  background: url(../img/btn02.png);
  width: 405px;
  height: 120px;
  border-radius: 56px;
  margin: 0 auto;
  font-size: 0;
  color: transparent;
  border: 0;
  margin-left: 42px;
}
#consult_wrapper .checkbox {
  width: 48%;
}
#consult_wrapper .checkbox input[type="checkbox"]:checked + label:before {
  background: #ff309c;
  border-color: #ff309c;
}
#consult_wrapper.pc .checkbox input[type="checkbox"]:checked + label:after,
#consult_wrapper .checkbox input[type="checkbox"]:checked + label:after {
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
}
#consult_wrapper .formGroup .titles,
#consult_wrapper .formGroup_radio span {
  color: #fff;
}
#consult_wrapper.mo .reserveAccordion .reserveTimeGroup {
  margin-top: 0;
}
#consult_wrapper .reserveAccordion .sectionTitle {
  line-height: 3.6;
}
#consult_wrapper .reserveAccordion .sectionTitle span em.on {
  color: #fff;
}
#eventCalendar .ui-state-active,
#eventCalendar .ui-widget-content .ui-state-active,
#eventCalendar .ui-widget-header .ui-state-active,
#eventCalendar a.ui-button:active,
#eventCalendar .ui-button:active,
#eventCalendar .ui-button.ui-state-active:hover {
  border-radius: 50%;
  background: #ff309c;
  color: #fff;
}
#consult_wrapper label.error {
  color: #dc0000;
}
.fb {
  background: var(--bottom-bg-color);
}
.fb.fixed .dbTitle {
  color: var(--white-color);
}