@charset "UTF-8";
html,
    body {
      position: relative;
      height: 100%;
    }
body{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  background: #000;
  /* opacity: 1; */
}
.pc {
  display: inherit;
  height: inherit;
}
#body-wrapper {
  width: 100%;
  height:1200px;
  position: relative;
}
.main {
  width: 100%;
  margin: 0 auto;
  height: 1200px;
  /* background: url("/images/web_new/img/bg.svg"); */
  position: relative;
}
.contentMain {
  width: 1920px;
  margin: 0 auto;
  height: 1200px;
  background: url("/images/web_new/img/bg.svg");
  position: relative;
}

@media (max-width: 1920px) {
    .main {
        width: 100%; /* 화면 너비가 1920px보다 작을 때 body를 90%로 설정 */
        margin: 0 auto; /* 가운데 정렬을 위해 추가 */
    }
}
/* START : swiper 관련 스타일------------------------------------------- */
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  justify-content: center;
  align-items: center;
}
/* END : swiper 관련 스타일 --------------------------------------------*/

/* START : header------------------------------------------------------ */
.header{
  height: 80px; width: 1920px; padding:38px 5.2% 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 20px; color: #fff;
  margin: 0 auto;
}
.header_left{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 1181px !important; */
}


.header_left::after{
  content: attr(title);
}
.header_left li{
  margin-right: 60px;
}
.h_logo{max-width: 145px; width: 100%;}
.h_text{padding-bottom: 6px; min-width: max-content;}
.h_text_qr{
   display: inline-block;
   text-align: left;
   width: 120px;
}
.header_right{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_right li{
  margin-left: 42px;
}
.h_menu{
  /* 23.05.30 : 햄버거 버튼 영역 사이즈 수정 */
  width: 36px; height:36px;
}
/* 23.05.30 : 햄버거 버튼 배경이미지로 수정 */
.h_menu.toggle{
  background:url("/images/web_new/icon/hi_menu.png"); background-size:contain;
  width: 36px;
  height: 36px;
}
.h_menu.toggle.active {
  background: url("/images/web_new/icon/hi_menu_yellow.png");
  background-size: contain;
}
.h_none{ display: none;}

/* START : header------------------------------------------------------ */


/* START : 메인 ---------------------------------------------------------*/
.bx-wrapper{width: 1920px;}
/* 23.05.30 : 스타일 추가 */
.c_main{
  width: 1920px;
  height: 658px;
  padding: 53px 100px;
  margin: 120px 0px;
  color:#fff;
  display:flex; justify-content: space-between;
}
.section_main_left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: -webkit-fill-available;
  width:550px;
}
.img_orginal img{max-width:469px;}
.img_pinmenu img{max-width: 416px; padding:35px 0 40px;}
.all_text{ font-size: 26px; line-height: 1.6; font-weight: 400;}
.main_right_b_text{
  font-size: 26px; text-align: right; margin-bottom: 8px; position: relative; padding-right: 143px;
}
.lottie_one{
  /* 23.05.26 : 스타일 추가 */
  width: 286px;
  height: 16px;
  position: absolute;
  bottom: 396px;
  left: 98px;
}
/* 23.05.26 : 주석처리 */
.lottie_pay,
.lottie_main{
  width:286px;
  height: 16px;
  position: absolute;
  bottom: 19px;
  left: 427px;
}
.section_main_center{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: -webkit-fill-available;
}
.section_main_cente p{font-size: 26px; }
.section_main_tablet{
  width: 549px;
  height: 350px;
  margin-top: 30px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 24px;
  box-shadow: 10px 10px 50px 0px #000;
}
.go_pay_btn{
  width: 420px;
  height: 55px;
  padding-top: 2px;
  font-size: 26px;
  border-radius: 10px;
  color:#000;
}
.section_main_01{
  width: 1219px;
  display: flex;
  justify-content: space-between;
}
.section_main_02{
  width: 380px;
  height:-webkit-fill-available;
  position: relative;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}
.main_tab_btn{
  display: flex;
  height: -webkit-fill-available;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
}
.main_tab_btn li{
  width:320px; height: 120px; background: rgba(255, 255, 255, 5%); border-radius: 16px; padding:20px 0 20px 40px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.main_tab_btn li:active{background: rgba(0, 0, 0, 0.02);}
.main_tab_btn li img{
  width: 100px;
  height: auto;
  margin-right: 38px;
}
/* END : 메인 ---------------------------------------------------------*/

/* START : 메인 - 알파요 --------------------------------------*/
.ap_title_01 {
  font-size: 34px;
  margin: 26px 0 29px;
}

.main_tab_btn li.tab_selected {
  background: url("/images/web_new/img/main/main_tab_selected_bg.svg");
}

.ap_title_02,
.ap_title_03 {
  font-size: 26px;
  margin: 36px 0 30px;
}

#slide3{
  /* 23.05.25 수정 */
  /* height: 522px; */
  height: 490px;
  overflow: hidden;
}
.arpayo_slides {
  display: block;
  text-align: center;
}
.img_arpayo_01 {width: 550px;}

.arpayo_slides .img_arpayo_01 img {width: 100%;}/* 23.05.25 : 이름 수정 */
.arpayo_slides li img.t_only_one {width: auto;}/* 23.05.25 : 이름 수정 */
.img_tablets img{width: 100%;}/* 23.05.25 : 스타일 추가 */
/* END : 메인 - 알파요 ---------------------------------------*/

/* START : 메인 - PC -----------------------------------------*/
.main_pc_title {
  font-size: 26px;
  margin: 36px 0 30px;
}
.ul_pc, .ul_smart_phone{display: block; text-align: center;}
/* END : 메인 - PC -------------------------------------------*/
.img_smartphone{
  padding:0 50px;
}




/* START : 요금 ----------------------------------------------------------*/
.section_pay_tablet {
  width: 550px;
  height: 350px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 24px;
  box-shadow: 10px 10px 50px 0px #000;
  border: 2px solid #fff;
  padding: 10px;
}

.section_pay_tablet_inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  position: relative;
  padding: 4px 10px 5px 10px;
  border-radius: 16px;
  border: none;
  background: radial-gradient(#240819, #0F0009);
}
.price_contents_list{display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.price_contents_list li{
  display: flex; justify-content: center; line-height: 1.2;
}
.price_item_02{
  height: 45px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15),rgba(255, 255, 255, 0)); align-items: center; width: 100%; text-align: center;
  margin: 30px auto 10px;
}
.img_multi img{max-width:412px;}
.img_price img {
  max-width: 261px;
  padding: 35px 0 40px;
}
.section_main_arpayo_bg{
  background: rgba(255, 255, 255, 5%);
  border-radius: 16px;
  width: 320px;
  height: 521px;
  margin-top: 40px;
  position: relative;
  padding:59px 20px 20px;
}
.logo_plus_loge{padding: 32px 0 30px;}
.onepiece{
  padding-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.onepiece i{margin: 0px 0px -3px 8px;}
.price_table{display: flex; align-items: center;}
.price_ex_all{
  text-align: right;
  width: -webkit-fill-available;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.price_ex01{width: 113px; height:36px; padding: 3px 10px 5px; display: flex; align-items: center; justify-content: space-between; background: rgba(0, 0, 0, 0.24);}
.price_ex02{width: 99px; height: 36px; padding: 4px 10px 5px; background: rgba(0, 0, 0, 0.24); margin:0 1px; }
.price_ex03{width: 66px; height: 36px; padding: 4px 10px 5px 8px; background: rgba(0, 0, 0, 0.24);}

/* 2023.09.08 추가 */
.section_right_bg {
  background: rgba(255, 255, 255, 5%);
  border-radius: 16px;
  width: 320px;
}

.arpayo_bottom_area{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.arpayo_bottom_area .three_dotted{padding: 5px 0 12px;}
.arpayo_logo_top_area{
  position: absolute;
  width: 320px;
  display: flex; top:0px;
  justify-content: center;
  float: right;
}
.arpayo_logo_top_area li:first-child{margin-right: 20px;}
.arpayo_logo_top_area li{ width: 80px; height: 80px;}
.arpayo_logo_top_area li img{width: 100%;}
.active_arpayo_text{
  opacity: 0; transition: all .5s ease;
  width:-webkit-fill-available; height:36px;
  margin:0 20px;
  background:rgba(0, 0, 0, 0.35);
  position: absolute; bottom: 206px; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#B4B4B4;
}
.active_arpayo_text.text_show{opacity: 1;}
.premium_arpayo{padding: 8px 0 22px;}
/* END : 요금 -------------------------------------------------------------- */

/* START : 요금-매장선택---------------------------------------------------- */
.select_contents_list {
  width: 100%;
  height: 170.5px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.select_contents_list li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select_contents_list li:nth-child(2){
}
.pay_select_area{
  width: 415px;
  height: 48px;
  font-size: 20px;
  padding: 0px 40px 0px 20px;
  background: url(/images/web_new/icon/i_white_select.png) calc(100% - 10px) center no-repeat rgba(255, 255, 255, 0.1);
  background-size: 14px 10px;
}
.pay_select_number_area{
  height: 46px; width: 86px;
  text-align: center;
}
.pay_select_number_area option{
  max-width: 230px;
  width: 100%; overflow: hidden;
  color:#000;
}
.used_number{
  position: absolute; top:11px; right:40px; text-align:right;
}

.payMethod[type=checkbox] {
  /* 체크박스 버튼 없애기 */
  position: relative;
  display: none;
}
input.payMethod[type=checkbox]+label {
  /* 체크박스 버튼 체크전 */
  cursor: pointer;
  height: 20px;
  padding-left: 30px;
  background-image: url(/images/web_new/icon/check_yellow_round_off.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 20px;
}
input.payMethod[type=checkbox]:checked+label {
  /* 체크박스 버튼 체크후 */
  background-image: url(/images/web_new/icon/check_yellow_round_on.png);
}
/* END : 요금-매장선택------------------------------------------------------ */

/* START : 메인 결제창 팝업 ------------------------------------------------ */
 #payment_popup {
  position: absolute;
  top: 0px;
  bottom: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05, 1.05);
  transition: all 0.4s;
  width: 1920px;
}

#payment_popup.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1, 1);
}

.payment_popup_outbg {
  background: rgba(0, 0, 0, .4);
  z-index: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.2s;
}

.payment_popup_inner::-webkit-scrollbar {
  /* 결제창 팝업에서만 사용하는 스크롤 바 없애기 */
  display: none;
}
.payment_popup_gide{
  width: 1920px;
  margin: 0 auto;
  text-align: center;
}
.payment_popup_inner {
  padding:40px;
  width: 720px;
  height: 1023px;
  margin: 80px auto 0;
  text-align: left;
  background: #fff;
  z-index: 500;
  position: relative;
  border-radius: 10px;
  /* 인터넷 익스플로러 */
  -ms-overflow-style: none;
  /* 파이어폭스 */
  scrollbar-width: none;
  /* overflow 시 스크롤 자동 */
  overflow-y: scroll;
}

.pay_close_agree {
  /* 닫기버튼 */
  position: absolute;
  top: 40px;
  right: 40px;
  cursor: pointer;
  padding: 10px;
  background: url(/images/web_new/icon/btn_popup_close.png)no-repeat center center /cover;
  z-index: 1000;
  background-size: 26px;
}

.close_agree_essentail_popup {
  top: 100px;
  right: 140px;
}

.pay_close_agree i {
  transition: all 0.3s;
}

/* 팝업 내용 영역*/
/* 상품명, 결제금액, 결제방법 */
.pay_area_top {
  /* padding: 20px; */
  width: 100%;
  /* height: 200px; */
  /* background: #FEF6DB; */
}
.remoncolorbg{
  background: #FEF6DB;
  border-radius: 6px;
  padding:20px;
}
.remoncolorbg:first-child{
  padding-bottom: 10px;
}
.name_width70{
  width: 70px;
}
.name_width86{
  width: 86px;
}
.pay_blacklogo {
  width: 145px;
  height: 42px;
  margin-bottom: 20px;
}

.top_impormation {
  display: flex;
  justify-content: space-between;

}
.remoncolorbg li:first-child{padding-bottom: 10px;}
.top_impormation div{display: flex; align-items: center;}

.table_2column_554 {
  width: 554px;
  display: flex;
  position: relative;
  align-items: center;
}
.pay_item02{width:250px;}
.hrline {
      margin: 30px 0;
        border-bottom: 2px solid #F2F2F2;
}

.form-wrap {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.pay_agree_check input{display: none;}
/* 생년월일/사업자번호, 이메일 압력 영역 */
.people_select{
  display: flex;
}
.payment_impormation_input {
  width: 100%;
  padding: 30px 0px 0px;
}

.payment_impormation_input table {
  width: 100%;
}

.table_row_pay {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.table_2column_342 {
  width: 342px;
  display: flex;
  position: relative;
  align-items: center;
}
.table_2column_254{
  width: 254px;
  display: flex;
  position: relative;
  align-items: center;
}
.card_pws{width: 124px; margin-left:30px;}
/* 전체동의 체크박스 영역 */
.pay_area_bottom {
  padding: 0 0px;
  width: 100%;
  /* height: 200px; */
}

.pay_all_agree {
  margin: 30px 0 20px;
}

.pay_sub_agree {
  margin: 0 0 16px 20px;
}
.pay_sub_agree:last-child{margin-bottom: 0;}
.people_select_check_01,
.people_select_check_02{margin-right: 60px; margin-bottom: 19px;}
.people_select_check_01 input,
.people_select_check_02 input { display: none;}
.people_select input[type=checkbox] {display: none;}

.pay_agree input[type=checkbox]+label .chk_chk,
.people_select_check_01 input[type=checkbox]+label .chk_chk_01,
.people_select_check_02 input[type=checkbox]+label .chk_chk_02,
.people_select input[type=checkbox]+label .chk_chk{
  display: inline-block;
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  padding-left: 30px;
  background: url(/images/web_new/icon/check_round_off.png) left top no-repeat;
  background-size: 20px 20px;
  vertical-align: middle;
}

.pay_agree input[type=checkbox]:checked+label .chk_chk,
.people_select_check_01 input[type=checkbox]:checked+label .chk_chk_01,
.people_select_check_02 input[type=checkbox]:checked+label .chk_chk_02,
.people_select input[type=checkbox]:checked+label .chk_chk {
  background: url(/images/web_new/icon/check_yellow_round_on.png) left top no-repeat;
  background-size: 20px 20px;
}
.uesed_agree_btn{
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  border-radius: 5px;
  padding: 5px 10px 6px;
  background: #F2F2F2;
  color: #000;
  line-height: 1
}
.uesed_agree_btn_active{
  background: linear-gradient(to right, #FFE709, #FFD843);
}
.brithday_email{
  display: flex; justify-content: space-between;
}
.brithday_email li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.brithday_email li label{padding-bottom: 10px;}
.brithday_email_item01{width: 240px;}
.brithday_email_item02{width: 370px;}

/* END : 메인 결제창 팝업 ------------------------------------------- */

/* START : 메인 로그인 ----------------------------------------------*/
.pay_tablet_login_inner{
  width: 100%;
  padding: 77px 40px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pay_tablet_login_inner li{
  width: 100%;
}
.pay_tablet_login_inner input::placeholder { color: #B4B4B4}
.plus_number_area{margin-right: 12px;}
.minus_number_area{margin-left: 12px;}
/* END : 메인 로그인----------------------------------------------- */

/* START : 비밀번호 찾기----------------------------------*/
.pay_tablet_password_inner {
  width: 100%;
  padding: 82px 40px 0 40px;
  display: flex;
  flex-direction: column;
}
.id_item{margin:15px 0 20px;}
/* END : 비밀번호 찾기--------------------------------------*/

/* START : footer------------------------------------------- */
footer{
  width: 100vw;
  bottom: 0;
  position: absolute;
  color:#fff;
  background: #000;
  clear: both;
}
.slider_bg{
  background-image: url(/images/web_new/img/icon_bg.svg);
  height: 140px;
}
.slider-nav {
  /* height: min(12.962vh, 140px); */
  height: min(140px);
  display: flex;
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
  width:1920px;
  padding:0 100px;
}
.footer_txt{
  color: #FFFFFF;
  /* 23.05.30 : padding-top 값 수정 */
  padding-top: 24px;
  text-align: center;
  width: 1920px;
  margin: 0 auto;
}

.footer_txt_copyright{
  color: #7C7C7C;
  padding: 9px 0;
  text-align: center;
  width: 1920px;
  margin: 0 auto;
}

/* 23.05.30 : ooter_txt>ul>li:nth-child(2) 추가 */
.footer_txt>ul>li:nth-child(2){
  margin: 4px auto 8px;
}
.f_text{
  font-size: 24px;
}
footer img{
  width: 86px;
}
.slick-slide {
  display: flex;
  justify-content: center;
  float: left;
  margin: 0 auto;
  width: 120px;
}
.slick-slide_active{
  width:100%;
  font-size: 30px;
}

.private_txt {
  position: absolute;
    right: 830px;
    top: 163px;
}
/* END : footer--------------------------------------------------- */