.btn_50 { font-family: "noto_sans"; width:100%; height:50px; background:var(--inactive); color:var(--black);  font-size:1.6rem; font-weight: 500; border-radius: 10px; padding:14px 0; }
.bg_dark {position: fixed;  top:0; left:0; width:100%; height:100vh; background-color: rgba(0,0,0,0.5); }
/* 바코드 결제 팝업창 */
.bacode_wrap { background-color: #fff; padding:30px 30px 20px 30px; border-radius: 10px; text-align: center; margin:0 20px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);}
.barcode_img { width:275px; margin:0 auto;  cursor:pointer; }
.bacode_box { width:275px; display: flex; justify-content: space-between; margin:0 auto; padding-top:10px; }
.bacode_number { font-size:1.4rem; font-family: "montserrat"; font-weight: 500; color:var(--dark); }
.bacode_time img { cursor:pointer; }
.bacode_date { font-size:1.4rem; font-family: "montserrat"; font-weight: 500; color:var(--main); margin-right:6px; }

.bacode_payment { position: sticky; top:0; left:0; width: 100%; height: 100%; z-index: 200; }
.payment_cont { position: fixed; left:0; margin:auto; right:0; bottom:80px;  border-radius: 10px 10px 0 0;width:100%; max-width:768px; z-index: 9920; background-color:var(--white); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06); }
.quit_img { position: absolute; top:0; right:0; padding:27px 27px 0; cursor:pointer; width:max-content; }
.bacode_progressbar { text-align: center; margin-top:40px; padding-bottom:68px; }
.paymettxt { font-size:1.8rem; font-weight:700; text-align: center; margin-top:32px; margin-bottom:68px; }
progress { width:100%; max-width:275px; border-radius: 2px; -webkit-appearance: none; height:4px; }
::-webkit-progress-bar { background-color: #E6F0FE; border-radius: 2px;  }
::-webkit-progress-value { background-color: var(--main); border-radius: 2px; }


/*QR 결제 팝업창 */
.qr_scanwrap {position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 200; background-color: rgba(0,0,0, 0.7);}
.qr_scan_cont {position: fixed;left: 50%; top:0;  transform: translateX(-50%); width:100%; max-width:768px; z-index: 9920; height:100%; background-color: rgba(0,0,0, 0.7);}
.qr_scan_cont > li {height:100%;}
.contents_qr_scan { width: 100%; max-width: 768px; height:calc(100% - 230px);  }
.myqr_wrap {position: sticky; top:0; left:0; width: 100%; height: 100%; z-index: 200;}
.myqr_wrap .paymettxt {margin-bottom:52px;}
.myqr_wrap .qr_addrtxt {  font-family: "montserrat"; font-weight: 400; font-size:1.6rem; word-break: break-all; text-align: left; margin-top:10px; width:290px; margin:0 auto;}
.myqr_wrap .qrpayment_img {text-align: center; padding:0 20px; margin:0 auto;}
.myqr_wrap .qrpayment_img img {max-width:100%; margin:0 auto;}
.send_walletwrap .payment_cont {bottom:0;}
.scan_box { width: 250px; height: 250px; background-color: rgba(255,255,255, 1); margin:5px auto; }
.myqr_confirm { position: absolute; /*top:calc(100% - 230px);*/ left:0; bottom:80px; right:0; width:100%; max-width:768px; margin:0 auto; background-color:var(--inactive); height:150px; z-index: 9999;}
.myqr_img { margin:0 auto; width:max-content; border-radius:13px; padding:12px; background:#FAFBFA; margin-top:34px;}
.myqr_txt { font-size:1.6rem; font-weight: 500; text-align: center; margin-top:12px;}
.myqr_info {width:max-content; margin:0 auto; cursor:pointer; padding:14px 16px; color:var(--white); border:1px solid var(--white); margin-top:52px; border-radius: 24px; font-size:1.6rem; font-weight: 500;}
.qr_headertitle {font-size:1.6rem; font-weight: 400; height:60px; color:var(--white); display: flex; justify-content: center; align-items: center;}
.qr_scan_txt { font-size:1.6rem; font-weight: 500; padding:58px 0; color:var(--white); text-align: center;}
.myqr_state {display: flex; justify-content: space-between; margin:30px 0 70px; padding:0 20px;}
.choice_box { width:100%; display: flex; font-family: "noto_sans"; justify-content:center; align-items: center; background-color: var(--inactive); border-radius: 10px; height:50px; font-size:1.6rem; font-weight: 500; cursor:pointer; }
.qr_active {background: var(--main); color:var(--white);}
.qr_paywrap .payment_cont {bottom:0;}
.qr_paywrap header  {z-index:1000; background: transparent; color:#fff; border-bottom:0;}

.qr_paywrap .qr_scan_txt {margin-top:60px;}

/* 송금하기 */
.remittance_wrap {position: sticky; top:0; left:0; width: 100%; height: 100%; z-index: 200;}
.remittance_wrap .paymettxt {margin-bottom:0}
.remittance_wrap .myqr_state {padding:50px 20px; margin:0;}
.img_change.active {background-color:var(--main); color:var(--white);}

/* 220617 신규클래스 추가 */
.send_coinlist { padding: 32px 20px; color: #000; border: 1px solid var(--gray); background-color: #FAFBFA; border-radius: 10px; font-size: 1.6rem; font-weight: 500; margin-top:20px;}
.send_coinlist a {display:block; width:max-content}

/*고객결제 팝업창*/
/*고객결제*/
/*고객 결제하기 */
.customer_payment_wrap { margin:14px 20px 0; border-radius: 10px; background-color:var(--white);  box-shadow: 0px 3px 15px rgba(0,0,0,0.06); overflow: hidden; }
.user_paymentbox  { padding:14px 16px; background-color: var(--fran); color:var(--white); font-size:1.6rem; font-weight: 700;}
/* .user_paymentbox.remove {background:#E8EDFF; color:var(--fran);} */
.input_payment {padding:20px;}
.input_paybox p { font-size:1.6rem; font-weight: 700; font-family: "noto_sans";}
.user_amount { position: relative; width: 100%; height: 40px; margin-top: 10px; border-radius: 10px; background-color: #FAFBFA; border: 1px solid var(--gray);  font-size: 1.6rem;  font-weight: 600;}
.user_amount .input_basic {margin-top:0; border:unset;  background-color: unset; }
.user_amount input::placeholder { font-size: 1.6rem; font-weight:500;}
.position_txt {position:absolute; top:50%; right:20px; transform: translateY(-50%); font-size:1.6rem;    font-family: "montserrat"; font-weight:700; color:var(--fran);}
.position_txt_main{color:var(--main);}
/* 2023.03.27 */
.main_position_txt {position:absolute; top:50%; right:20px; transform: translateY(-50%); font-size:1.6rem;    font-family: "montserrat"; font-weight:700; color:var(--main);}
.main_position_txt_main{color:var(--main);}
.choice_num {width:96%;}
.user_bacode_pay {width:100%; border-radius:10px; margin-top:10px; overflow: hidden; }
.user_bacode_pay button {position:relative; color:var(--gray); font-size:1.6rem; font-weight: 700; padding-left:4px; width:100%; padding:14px 0; background:#EFF3F5; font-family: "noto_sans";}
.bacode_info {font-size:1.4rem; font-weight: 400; color:var(--dark); margin: 10px 30px 0; text-align: center;}
.bacode_info p {color:var(--fran);}
/* 230327 main_fran_qr_info add */
.main_fran_qr_info {display: flex; justify-content: center; align-items: flex-start; font-size:1.4rem; font-weight: 400; color:var(--main); margin: 10px 20px 0; }
.main_fran_qr_info p {color:var(--main);}
.user_amount.input_active {  border:1px solid var(--main);}
.user_amount.input_active {  border:1px solid var(--main);}
.bank_ip.input_active {  border:1px solid var(--fran);}
.bank_ipnanme.input_active {  border:1px solid var(--fran);}

.user_bacode_btn.key_active { background-color: var(--main); color:var(--white);}
.user_bacode_btn.key_active span { color:var(--white);}

.use_payment { position: sticky; top:0; left:0; width: 100%; height: 100%; z-index: 200; }
/* .bg_dark {position: fixed;  top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); } */
.payment_cont { position: fixed; left:0; margin:auto; right:0; bottom:80px;  border-radius: 10px 10px 0 0;width:100%; max-width:768px; z-index: 9920; background-color:var(--white); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06); }
.paymettxt { font-size:1.8rem; font-weight:700; text-align: center; margin-top:32px; margin-bottom:30px; }
.use_txt {font-size:1.4rem; font-weight: 400; color:var(--dark); font-family: "noto_sans"; margin-top:20px;}
.use_txt p {color:var(--fran);}
.use_payment .input_payment {padding:0 30px;}

/* 고객결제 키패드 */
.keypad_btn {background-color: var(--line); padding:10px;}
.send_button { touch-action: manipulation; color:var(--black); width: 33%; padding: 16px 0; margin-bottom: 6px; border-radius: 10px; outline: none; border: none; font-size:2.2rem; background-color: var(--white); height:58px; }
.reset_txt { font-size:1.8rem; }
.pin_active { background-color: var(--main); }
.number_box { text-align: center; padding:50px 0; }
.number_box input::placeholder { font-size:2.2rem; }
.easy_password { font-size:1.4rem; font-weight: 400; text-align: center; }
.reset_img img{ margin:0 auto;}
.no_m {margin-bottom:0;}

/*가맹점고객결제 완료 */
/* 결제 완료 */
.paycomt_wrap { position: fixed; top:0; left:0;  width: 100%; height: 100%;  z-index: 10000;  background-color: rgba(0,0,0,0.5);}
.paycomt_wrap .pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:300px;  border-radius: 20px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0,0,0,0.4)}
.paycomt_wrap .pop_title { font-size:1.8rem; font-weight: 700; padding:40px 0 30px; text-align: center; font-family: "noto_sans";}
.pop_sub{font-size:1.4rem; font-weight:500; padding-bottom: 20px; text-align: center;}

.oder_list {border-top:2px solid var(--black); padding:20px; font-family: "noto_sans"; }
.order_info {font-size:1.6rem; font-weight: 700; margin-bottom:10px}
.payment_code {display: flex; justify-content: space-between;}
.payment_code span:nth-child(1) {font-size:1.4rem; font-weight: 500; color:var(--dark);}
.payment_code span:nth-child(2) {font-size:1.4rem; font-weight: 400; color:var(--black);}
.payment_totalbox {border-top:1px solid var(--gray);  border-bottom:2px solid var(--black); padding:20px; background:#FAFBFA;  }
.payment_total {display:flex; justify-content: space-between; align-items: center; font-family: "noto_sans";}
.payment_total p:nth-child(1) {font-size:1.6rem; font-weight: 700;}
.payment_total p:nth-child(2) span:nth-child(1){font-size:2.2rem; font-weight: 700;}
.fran_payment_total p:nth-child(2) span:nth-child(2){font-size:1.8rem; font-weight: 700; color:var(--fran); font-family: "montserrat"; }
.pay_c {font-size:1.4rem; font-weight:700; color:var(--dark); text-align: right;}
.paybg {background:#fff; padding:0 20px 40px;}
.btn_fbox { width:100%; height:50px; font-size:1.6rem; background-color: var(--main); color:var(--white); font-weight: 500; font-family: "noto_sans";  }
.none_btn_fbox { width:100%; height:50px; font-size:1.6rem; background-color: var(--inactive); color:var(--black); font-weight: 500; font-family: "noto_sans";  }



.fquit_img { position: absolute; top:0; right:0; padding:27px 27px 0; cursor:pointer; width:max-content; font-family: "noto_sans"; }

/* 가맹점 가입 및 미가입 팝업 */
.join_popup_wrap, .fran_popup_wrap {  position: fixed; top:0; left:0;  width: 100%; height: 100%;  z-index: 10000;  background-color: rgba(0,0,0,0.5); }
.join_popup_wrap .pop_cont, .fran_popup_wrap .pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width:300px; width: 100%; border-radius: 10px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0,0,0,0.4)}
.fran_popup_wrap > .pop_cont > div > button:nth-child(2) { border-left : 1px solid var(--line); }
.join_popup_wrap .pop_title, .fran_popup_wrap .pop_title { font-size:1.8rem; font-weight: 700; padding:40px 0 40px; text-align: center; font-family: "noto_sans";}
.join_popup_wrap .fran_check_txt, .fran_popup_wrap .fran_check_txt { text-align: center; font-size: 1.4rem; font-weight:500; line-height:20px; }
.fran_check_box > p:last-child { width:100%; text-align: center;}

/* 가맹점 가입_2 */
/* 2022.11.01 추가 */
.fran_check_box > div > p:first-child { font-size: 1.6rem; font-weight: 700; }
.fran_check_box > div > p { font-size:1.4rem; }

/* 가맹점 이용제한 팝업 */
.fran_rest_txt { display:flex; align-items: flex-start;}
.fran_rest_txt > p {padding: 0; font-size: 1.2rem; word-break: keep-all; border:none;}

.fran_pop_table > p { font-size: 1.4rem; padding:0 0 10px;}
.fran_pop_table > table { width: 100%; }
.fran_pop_table td { padding: 10px; }
.fran_pop_table > table, .fran_pop_table td { border : 1px solid black; border-collapse : collapse; font-size: 1.4rem; text-align: center; }

.max_text { height:auto; max-height:100px; overflow:auto; }

/* 신규 메인 팝업 추가 23.09.13 남보라 */
.new_popup_title { width: 100%;  position:fixed; left: 50%; transform: translateX(-50%); padding-bottom: 10px; text-align: center; font-size: 1.8rem; font-weight: 700; box-shadow: 0px 7px 8px rgb(255 255 255); color:var(--main);}
.new_popup_text { max-height: 400px; height: calc(100vh - 280px); overflow-y: scroll; margin-top:65px; margin-bottom: 65px;}

.new_popup_text::-webkit-scrollbar { width: 6px; display: none; }
.new_popup_text::-webkit-scrollbar-track { background-color: #F0F0F0; border-radius: 30px; }
.new_popup_text::-webkit-scrollbar-thumb { background-color: #E3E3E3; border-radius: 30px; }
.new_popup_small_box { flex:none; padding:2px 4px; background-color: var(--dark); color:var(--white); border-radius: 4px; font-weight: 700; font-size: 1rem;}
.new_popup_small_box.main { background-color: var(--main); }
.new_popup_line_height_14 { line-height: 1.4rem; }
.new_popup_btn_box { box-shadow: 0px -7px 8px rgb(255 255 255); position: fixed; bottom: 20px; width: calc(100% - 40px); left: 50%; transform: translateX(-50%); }

/* 팝업공지 추가 230418 */
.main_popup_wrap { position: fixed; top:0; left:0;  width: 100%; height: 100%;  z-index: 10000;  background-color: rgba(0,0,0,0.5); }
.main_popup_wrap .pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 320px; min-width: 200px; width: calc(100% - 40px); border-radius: 10px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0,0,0,0.4); }
.main_popup_wrap .pop_cont .pop_contxt { padding: 28px 24px; }
.main_popup_wrap .pop_title { font-size: 1.8rem; font-weight: 700; padding: 0 0 20px; text-align: center; font-family: "noto_sans"; word-break: break-all; }
.main_popup_wrap .none_btn_fbox { width: 100%; height: 50px; font-size: 1.4rem; background-color: var(--white); border:1px solid var(--main);  color: var(--main); font-weight: 500; font-family: "noto_sans"; border-radius: 10px; }
.main_popup_wrap .btn_fbox { width: 100%; height: 50px; font-size: 1.4rem; background-color: var(--main); color: var(--white); font-weight: 500; font-family: "noto_sans"; border-radius: 10px;  }

/* 신규 메인 팝업 css 변경 23.10.19 신정운 */
.new_popup_tq_text { max-height: 290px; overflow-y: scroll; margin-top:45px; margin-bottom: 65px;}
.new_popup_tq_text > p { font-size: 14px !important; font-weight: 500 !important; margin-bottom: 3px !important; }
.new_popup_tq_text::-webkit-scrollbar {   display: none; /* Chrome, Safari, Opera*/}
/*리워드 팝업*/
.reward_pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0, 0, 0, 0.5);}
.reward_pop.active {display: block;}
.reward_title {display: flex; align-items: center; justify-content: flex-end; position: relative; border-bottom:1px solid var(--line); padding:20px;}
.reward_title span {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 20px; display: inline-block; }
.pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 768px; width: calc(100% - 40px); border-radius: 10px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.4);}

.reward_pop_list .store_slide_img { position: relative; aspect-ratio: 1 / 1; object-fit: contain;  height: unset; margin-right:unset; }
.reward_pop_list .store_slide_img img { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; max-width: 100%; object-fit: cover;}
.reward_pop_list {display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 10px; row-gap: 10px; max-height:calc(100vh - 200px); overflow-x: auto;}
.reward_pop_list .active .store_slide_img {outline:4px solid var(--main);}
.reward_pop_list li {cursor:pointer;  padding:4px; width:max-content;}
.reward_pop_list .active .reward_style_name {color:var(--main);}





@media all and ( max-height:680px ){
  .qr_headertitle { font-size: 1.4rem; }
  .scan_box { width: 180px; height: 180px; background-color: rgba(255,255,255, 1);}
  .qr_headertitle { padding: 0 0 10px; }
  .none_qr { padding: 0 !important; }
}

@media all and ( max-width:767px ){
  /* .reward_pop_list {grid-template-columns: repeat(2, 1fr);} */
  .reward_pop_list {display: flex;}
  .reward_pop .reward_style_name {width:150px;}
  .reward_title span {font-size:16px;}

}