@charset "utf-8"; /* TQPAY : 2022.10.01 : NBR */

/*신규 wrap 추가 */
.wrap_btn { width:100%; max-width:768px; min-height:calc(100vh - 230px); height:100%; margin:70px auto 50px; }
.wrap_keypad { width:100%; max-width:768px; min-height:calc(100vh - 394px); height:100%; margin:114px auto 0; }
.btn_wrap { display: flex; width: 100%; max-width: 768px; padding: 0 20px 32px; margin: 0 auto; }
.keypad_btn { width:100%; max-width:768px; margin:0 auto; padding:0 20px; background-color: var(--main); }
.wrap_compl { width:100%; max-width:768px; min-height:calc(100vh - 375px); height:100%; margin:90px auto 0; }
.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; }
/* .btn_50.btn_active { background: var(--main); color:var(--white); } */
.btn_50.btn_active { background: var(--main); color:var(--white); }
.send_amountin.input_active { border:1px solid var(--main);}
.wallet_addr.input_active { border:1px solid var(--main);}
.pozi {position:relative;  top:-1px;}
/*프렌차이즈용*/
.btn_50.fran_active { background: var(--fran); color:var(--white); }
.request_btn.fran_active{background: var(--fran); color:var(--white);}
.myinfo { position: fixed; left:0; bottom:0; width:100%; max-width:768px; right:0; margin:auto; padding:0 32px 20px; background: var(--white);}
.comple_pay {background:var(--fran); width:100%; height:50px; color:var(--white); font-size:1.6rem; font-family: "noto_sans"; font-weight: 500; }
/*//신규 wrap 추가 */

/* header & 하단 탭 메뉴 둘 다 있을때 viewport */
.viewport { height:auto; min-height: calc(100vh - 140px); min-height: calc(100svh - 140px); overflow: auto;}
/* header & 하단 탭 메뉴 둘 다 있을때 - 문제있을때 viewport */
.viewport_60 { height:auto; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); overflow: auto;}
/* header & 하단 탭 메뉴 없을때 웹 viewport */

.viewport_info {  height:auto; min-height: 100vh; min-height: 100svh;  overflow: auto;}
/* header 만 있을 때 웹 viewport */
.viewport_header {  height:auto; min-height: 100vh; min-height: 100svh;  overflow: auto;}

/* 높이 고정 */
.viewport_header.height {  height:auto; min-height: 100vh; min-height: 100svh;  padding-top:60px; overflow: auto;}

/* header 하단탭 조절 */
.header_bottom { padding : 60px 0 80px;}

/*index 가입 후 확인 페이지 xd : intro 페이지 */
.klaypay_wrap { padding:0 40px; }
.coin_realworld { color:var(--dark); font-size:3.0rem; margin-top:70px; font-weight: 300; }
.coin_realworld span { color:var(--main); font-weight: 500; }
.korea_services { margin-top:70px; font-size:1.4rem; font-weight: 500; color:var(--dark); }
.korea_services span { color:var(--main); font-size:3.8rem; margin-bottom:6px;display: inline-block;}
/* .btn_con { width:100%; border-radius: 10px; height:58px; font-size:1.6rem; background-color: var(--main); color:var(--white); font-weight:700; } */
.btn_con { width:100%; border-radius: 10px; height:58px; font-size:1.6rem; background: var(--main); color:var(--white); font-weight:700; }
.btn_con.cancel { background:var(--inactive); color:var(--black); }
.btn_con.btn_con_active {background:var(--inactive); color:var(--gray);}
/*//dindex 가입 후 확인 페이지 xd : intro 페이지 */

/* 휴대폰 본인인증 1번 */
.verfiwrap { padding:92px 20px 0; height:80vh;}
.termsofuse_title { font-size:1.8rem; font-weight:700; }
/* individual_chk 내 padding-left:14px; 제거 : 221011 NBR */
.individual_chk { color:var(--dark); margin:10px 0 50px; }


.individual_chk input[type="checkbox"] + label { font-size: 1.4rem; font-weight: 500; padding-left: 30px; background: url("../img/icon/icon_check_off.svg") no-repeat 0 50% / 12px 12px; cursor:pointer; }
.individual_chk input[type="checkbox"]:checked + label { background: url("../img/icon/icon_check_on.svg") no-repeat 0 50% / 12px 12px; cursor: pointer; }
.all_agree span { font-size:1.6rem; font-weight: 500; font-family: "noto_sans"; }
.individual_chk input[type="checkbox"] { display: none; }
/* .individual_chk span { color:var(--main); } */
.clause { width: 16px; height: 16px; background: url("../img/icon/icon_right.svg") no-repeat; background-position: center; }
/* .Basic_info { margin-top:40px; font-size:1.8rem; font-weight:700; } */


/* //휴대폰 본인인증 1번 */

/*create_pin*/
/* .send_info { padding-top:32px; text-align: center; font-size:2.2rem; font-weight:700;   font-family: "noto_sans"; } */
/* 230321 키패드 변경 */
.send_info { text-align: center; font-size:2.2rem; font-weight:700;   font-family: "noto_sans"; }
.send_sinfo { font-size:1.4rem; text-align: center; }
.pinnumber { margin-right:14px; width: 18px; height: 18px; padding-top:10px; border-radius: 50%; background-color: var(--inactive); }
.pinnumber:last-child { margin-right:0 }
.send_button { touch-action: manipulation; color:var(--white); width: 33%; padding: 18px 40px; margin-bottom: 2px; border-radius: 10px; outline: none; border: none; background-color: transparent; font-size:2.6rem; }
.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; } */
/*//create_pin*/

/* 가입 완료 */
/* join & user complete page : NBR */
.name_txt { font-size: 3rem; font-weight: 500; color: var(--main); padding:22px 0 14px;}
.comp_txt { font-size: 2.6rem; font-weight: 400; color: var(--black); }
.klay_comp_img {text-align: center; margin:70px 0 84px;}
.klay_comp_img img { width: 140px; height: 140px; margin:0 auto; }
.klay_compl_box { text-align: center; margin-bottom: 57px; }
.comp_sub_txt { padding-bottom: 6px; font-size: 1.4rem; font-weight: 500; color: var(--dark); }
.comp_main_txt { font-size: 3.8rem; font-weight: 500; color: var(--main); }
/* .wrapper {  } */
.bg_grdi {background: linear-gradient(to top, #fff, #E6F0FE); width:100%; height:100%;}
.joinwrap_btn {margin:90px auto 57px;min-height:calc(100vh - 237px); padding:0 40px;}


/*//가입 완료 */

/* 모바일 기기에서만 접속이 가능합니다 */
.mobile_only{display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%;}
.mobile_only img{margin-bottom:20px;}
/* // 모바일 기기에서만 접속이 가능합니다 */

/* 중복 로그인 */
.duplicate_box { padding:112px 20px 0; background: var(--white);}
.duplicate_txt { font-size:2.2rem; font-weight:700; text-align: center; }
.duplicate_stxt { font-size:1.6rem; font-weight: 400; text-align: center; margin-top:32px; }
.klay_duplicatinfo { margin-top:5.2vh; background-color:var(--lightgray); padding:20px; border-radius: 10px; font-size:1.2rem; }
.klay_duptxt { color:var(--dark); }
.klay_duptxt span { color:var(--main); }
.but_wrap { margin-top:5vh; }
.duplicate_close {width:33%;}
.duplicate_changelogin {width:63%;}
/* 중복 로그인 */

/*송금받기*/
.contents_qr_scan .qrpayment_img { text-align: center; padding:0 42px; }
.qrpayment_img img {margin:0 auto;}
.myqr_state { display: flex; justify-content: space-between; margin:30px 0; }
.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; }
.receive_walletbox { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; text-align: center; padding:0 20px; }

.qr_addrtxt { font-family: "montserrat"; font-weight: 500; font-size: 1.6rem; word-break: break-all; width: calc(100% - 40px); margin: 40px auto; text-align: center; cursor:pointer;}
.qr_active { background: var(--main); color:var(--white); }
.send_qrcon .payment_cont {bottom:0;}
.img_change.active { background-color: var(--main); color: var(--white);}

/* KYC 인증 */
.kyc_bx .applicant_select_box { position: relative; margin-bottom:20px; }
.kyc_bx .applicant_select { display: flex; justify-content: space-between; align-items: center; width: 100%; height:50px; font-size: 1.6rem; background-color: var(--lightgray); border:1px solid var(--gray); cursor: pointer; border-radius: 10px; color:var(--gray); padding:14px 20px; font-weight: 400; }




/*KYC 인증 option 역할 (select 커스텀) */
.scroll_list { display : none; position: absolute; top: 90px; width: 100%; padding: 32px 20px; color:#000; border: 1px solid var(--gray); background-color:var(--lightgray); border-radius: 10px; z-index:10; }
.down { transform: rotate(-180deg); }
.applicant_select > img { transition: 500ms ease; }
.applicant_select_box ul li { font-size: 1.6rem; font-weight: 500; padding-bottom:30px; cursor: pointer; }
.applicant_select_box ul li:last-child { padding-bottom:0; }
.select_title { font-size:1.4rem; font-weight: 500; margin-bottom:10px; }
.kyc_state { display: flex; justify-content: space-between; }
.kyc_state > div { width:49%; justify-content: center; }

/* kyc 인증완료 */
.kyc_completewrap {padding:112px 20px 0; text-align: center; }
.kyc_completewrap li:nth-child(1) { font-size:2.2rem; font-weight:700; }
.kyc_completewrap li:nth-child(2) { font-size:1.6rem; font-weight: 400; padding:32px 0 52px; }

/* 쇼핑몰 결제 */
.shopping_klay_logo { text-align: center; padding-top:50px; }
.shopping_klay_logo img {margin:0 auto;}
.iphone_p { position: relative; top:0; }
.popup_txt { font-size:1.4rem; text-align: center; font-weight: 400; padding:20px 0 0; line-height: 24px; }
.popup_txt span:nth-child(1) { font-size:1.8rem; color:var(--main); font-weight:500; }
.oder_franlist { font-size:2.2rem; color:var(--black); font-weight:700; }
.order_title { font-size:1.6rem; font-weight:700; }
.shoporder_wrap { margin-top:50px; border-top:2px solid var(--black); padding:20px; }
.order_table { display: flex; justify-content: space-between; align-items: center;}
.order_table p:nth-child(1) { font-size:1.4rem; font-weight: 500; color:var(--dark); }

.order_table p:nth-child(2) { font-size:1.4rem; font-weight: 400; color:var(--black); }
.paymentinfo_wrap { padding:22px 20px; border-top:1px solid var(--gray); border-bottom:1px solid var(--gray); }
.paymentinfo_wrap .order_table p:nth-child(2) { font-size:1.4rem; font-weight: 500; color:var(--black); }
.paymentinfo_wrap .order_table p:nth-child(2) span { color:var(--main); font-family: "montserrat"; font-weight: 500; }
.total_amount { padding:20px; border-bottom:2px solid var(--black); }
.total_amount p:nth-child(1) { font-size:1.6rem; font-weight:700; }
.total_amount p:nth-child(2) { font-size:2.2rem; font-weight:700; }
.total_amount p:nth-child(2) span { color:var(--main); font-family: "montserrat"; font-weight:700; }
.agree_shop { background-color: var(--lightgray); padding:16px 0; text-align: center; border-radius: 10px; margin-bottom:20px; }

/* 05.13 font-color 추가: NBR */
.agree_shop label span { color: var(--dark);}

/* 새간편비밀번호 재입력 */
.kycpopup_wrap { position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0,0,0,0.5); font-family: "noto_sans"; }
.kycpopup_wrap .pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width:300px; max-width:300px; max-height:254px; background-color: #fff; border-radius: 10px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0,0,0,0.4);}
.kycpopup_wrap .pop_title { font-size:1.8rem; font-weight:700; text-align: center; padding:40px 20px 0; }
.kycpopup_wrap .popup_txt { font-size:1.4rem; text-align: center; font-weight: 400; padding:30px 20px 40px; line-height: 22px; }
.pop_btn { display: flex; }
.pop_btn span { display: block; width: 48%; padding: 10px 0; font-weight: 500; text-align: center; color: #fff; font-size: 1.6rem; border-radius: 26px; cursor: pointer; }
.cancel_btn { background:var(--inactive); height:50px; width:50%; font-size:1.6rem; font-weight: 500; font-family: "noto_sans"; }
.kyc_btn { background:var(--main); height:50px; width:50%; font-size:1.6rem; font-weight: 500; color:var(--white); }

/* 공지사항 */
.notice_list { padding:0 20px 0; }
.notice_text { width:100%; padding:18px 0; border-bottom:1px solid var(--line); min-height:90px; }
.notice_text p { font-size:1.6rem; font-weight: 500; margin-bottom:10px; margin-right: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.notice_open_title span, .notice_text .notice_day { font-size:1.4rem; font-weight: 500; color:var(--dark); font-family: "montserrat";}
.notice_button { margin:44px 0 40px; }
.notice_null { text-align: center; padding: 20px; font-size:1.8rem; }
.notice_open_title { padding:18px 20px; border-bottom: 1px solid var(--line); }
.notice_open_title p { font-size:1.6rem; font-weight: 500; margin-bottom:10px; }
.notice_viewlist { background: var(--white);}
.notice_text_box { font-size:1.4rem; padding:30px 20px 16px; font-weight: 400; }
.notice_text_box img { max-width:50%; margin:0 auto; }
/* .notice_thumb img { max-width:100%; margin:30px 0; min-height: 180px; } */
.notice_check li:nth-child(1) { font-size:1.6rem; font-weight: 500; }
.notice_check li { font-size:1.4rem; font-weight: 400; }

/*faq */
.faq_wrap { height:auto;}
.faq_title { font-size:1.8rem; font-weight:700; margin-bottom:10px; color:var(--main); padding:0 20px;}
.faq_list { width:100%; cursor:pointer; position: relative; /*margin:0 20px;*/}
.faq_answer { color:var(--main); font-family: "montserrat"; }
.faq_question {padding:18px 0; margin:0 20px; font-size:1.6rem; font-weight: 500;  border-bottom:1px solid var(--line); }
.faq_question > p {width: calc(100% - 40px);}
.faq_question > p:last-child { font-size: 1.3rem; font-weight: 400; color: var(--fran_inactive);}
.answer_box { background-color:var(--bg); font-size:1.4rem; font-weight: 400; max-height: 0; overflow: hidden; }
.inquiry_list:after, .faq_list:after { background-position: center; background-image: url("../../assets/img/icon/icon_arrow_down.svg"); background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; content:""; position:absolute; top:50%; right:20px; transform: translateY(-50%); }
.inquiry_list.active:after, .faq_list.active:after { background-image: url("../../assets/img/icon/icon_arrow_up.svg"); content:""; }
.inquiry_list.active .inquiry_question, .faq_list.active .faq_question { border-bottom: none;}
.answer_faq { padding:20px; line-height:20px; }
.answer_faq img {max-width:50%;}
.bar { width:100%; height:6px; background-color:var(--bg); margin:30px 0; }


/* 1:1 문의 */
.inquiry_wrap { height:auto;}
.inquiry_title { font-size:1.8rem; font-weight:700; margin-bottom:10px; color:var(--main); padding:0 20px;}
.inquiry_list { width:100%; cursor:pointer; position: relative; /*margin:0 20px;*/}
.inquiry_answer { color:var(--main); font-family: "montserrat"; }
.inquiry_question {padding:18px 0; margin:0 20px; font-size:1.6rem; font-weight: 500;  border-bottom:1px solid var(--line); }
.inquiry_question > div { display: flex; align-items: flex-start; }
.inquiry_question > div > span { width:50px; }
.inquiry_question > div > p { width: calc(100% - 100px); }
.inquiry_question > p { font-size: 1.3rem; font-weight: 400; color: var(--fran_inactive);}
.questions_inquiry { padding:20px; line-height:20px; word-break: break-all;}
.answer_inquiry { padding:20px; line-height:20px; background-color:var(--white);  border-bottom:1px solid var(--line);}
.answer_inquiry .date {font-size: 1.3rem; font-weight: 400; color: var(--fran_inactive); }
.inquiry_box { position: relative; border-bottom: 1px solid var(--line); }
.inquiry_box input { font-size: 1.4rem; font-weight: 400; width: 100%; padding: 10px 70px 10px 10px; border-radius: 10px; border: 1px solid var(--fran_inactive); font-family: "noto_sans";}
.inquiry_box .txtLength_wrap { position: absolute; bottom: 13px; right: 20px; display: flex; flex-wrap:nowrap; -webkit-flex-wrap:nowrap; align-items: center; font-size: 12px; font-weight: 500; color: var(--fran_inactive); }
.inquiry_box .mail_txtLength_wrap { position: absolute; bottom: 13px; right: 20px; display: flex; flex-wrap:nowrap; -webkit-flex-wrap:nowrap; align-items: center; font-size: 12px; font-weight: 500; color: var(--fran_inactive); }


.inquiry_file_add .inquiry_upload_name { display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid var(--fran_inactive); width: 100%; color:var(--black); border-radius: 10px; }
.inquiry_file_add label { position: relative; display: inline-block; width: 100%; color: var(--main); border:1px solid var(--main); vertical-align: middle; cursor: pointer; height: 40px; line-height: 40px; border-radius: 10px; text-align: center;}
.inquiry_file_add input[type="file"] { width: 100%; height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
.inquiry_file_add .position_rel button { position:absolute; right:20px; top:50%; transform: translateY(-50%);}
/*카카오톡 1:1 문의*/
/* .inquiry_txt { font-size:1.6rem; font-weight: 400; padding-top:52px; text-align: center; } */
/* .inquiry_img { margin:70px 0; text-align: center; } */
/* .inquiry_img img { max-width: 100%; margin:0 auto; } */
.information_time { font-size:1.8rem; font-weight:700; }
.time_information { padding:20px; background-color: var(--lightgray); margin-top:20px; border-radius: 10px;}
.time_information p:nth-child(1) { color:var(--main);  }
.time_information p { color:var(--dark); font-size:1.4rem; font-weight: 500; padding-top:10px; }

/* 이용약관 */
.klay_services { margin:60px 0 82px; }
 /* border-bottom:1px solid var(--line); */
.klay_titlebox { padding:18px 20px; }
.klay_titlebox li:nth-child(1) { font-size:2.0rem; font-weight:700; margin-bottom:8px; }
.klay_version { font-size:1.4rem; font-weight: 500; color:var(--dark); }
.klay_servicesnum { color:var(--main); margin-bottom:20px; font-size:1.8rem; font-weight:700; }
.klay_list { padding:30px 20px; }
.klay_servicesnum_s { color:var(--dark); font-size:1.6rem; font-weight:700; margin-bottom:10px; }
.klayservices_info { font-size:1.4rem; font-weight: 400;  }

/*220609 신규 클래스 추가 : SJW */
.klay_li {padding-left: 20px;}
.klay_li li {list-style-type: decimal; font-size:1.4rem; font-weight: 400; line-height: 20px;}
.klay_li_en {padding-left: 20px;}
.klay_li_en li {list-style-type: upper-alpha; font-size:1.4rem; font-weight: 400; line-height: 20px;}
.down_li {margin-bottom:30px;}
.start_klay {font-size:1.4rem; font-weight: 400;}
.no_margin{margin-bottom:0;}
.klay_table {font-size:1.4rem; font-weight: 400; border:1px solid #ededed; text-align: center; width:100%;}
.klay_table th {width:33%;}
.klay_table thead th {border-bottom:1px solid #ededed; border-right:1px solid #ededed; }
.klay_table thead th:last-child {border-right:none;}
.klay_table tbody td { border-right:1px solid #ededed; }
.klay_table tbody td:last-child {border-right:none;}



/* 지갑으로  송금하기 최종전 */
.send_klay_logo {padding:54px 0 30px;}
.send_klay_logo img {margin:0 auto;}
.send_finchk  {font-size:2.2rem; font-weight: 700; padding:50px 0;}
.fail_send_finchk  {font-size:2.2rem; font-weight: 700; padding:50px 0 30px;}
.send_sub_finchk  {font-size:1.6rem; font-weight: 500;}
.sender_finwrap {padding:20px; border-bottom:1px solid var(--gray); }
.sender_finwrap p:nth-child(2) {font-weight: 500;}
.sender_finwrap p:nth-child(2) span {color:var(--main); font-family: "montserrat"; font-weight: 500;}
.remit_info  { font-size:1.6rem; font-weight: 700; }
.sender_finbox {border-top:2px solid var(--line); border-bottom:2px solid var(--line);  margin-top:62px;}
.addr_finwrap {padding:20px;}
.send_wallet_addr {word-break: break-all;}
.addr_finwrap p:nth-child(1) {min-width:122px;}
.send_finwrap .check_sender {margin-top:114px; padding:0;}
.btn_swrap { width: 100%; max-width: 768px; padding: 0 20px 32px; margin: 0 auto; }

/* TQ 보내기 23.04.13 */
.send_num_container { background: var(--lightgray); padding: 14px 20px; }
.send_num_tq_box { background: linear-gradient(to bottom right, #11B1F8, #1162F8); border-radius: 10px; overflow: hidden; box-shadow: 0px 3px 15px rgba(0,0,0,0.2);}
.send_card_name { padding:20px 20px 0; }
.send_card_name img { width:20px; height:20px; }
.send_card_name p { font-size:2rem; font-weight: 700; color:var(--white); }
.send_num_tq { padding:20px 20px 30px; font-size:2.6rem; font-family: "montserrat"; font-weight: 600; text-align: center; word-break: break-all;}
.send_num_tq > div:first-child { flex-wrap: wrap; }

.send_input_box.first_pd { padding: 30px 20px 0;  }
.send_input_box > p { font-size: 1.6rem; font-weight: 500; margin-bottom: 10px; }
.send_input_box input { background: #FBFBFB ;}
.send_input_box small { display: block; font-size:1.2rem; font-weight: 400; margin-top:10px;}
.send_fee_box { padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.send_fee_box > p { font-size: 1.6rem; margin-bottom: 10px; }
.send_fee_box > p:first-child { font-weight: 500; }
/* TQ 보내기 확인 23.04.17 */
.tq_send_txt_box { padding: 20px; }
.tq_send_txt_box .tq_send_title { padding: 10px 20px 30px; font-size: 2rem; font-weight: 700; text-align: center; line-height: 1.8; }
.tq_send_txt_box .tq_send_txt_list { padding: 20px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.tq_send_txt_box .tq_send_txt_list > p:first-child { width:100px; color:var(--dark); font-size: 1.4rem; font-weight: 500; }
.tq_send_txt_box .tq_send_txt_list > p:last-child { font-size: 1.6rem; font-weight: 400; }
.tq_send_info_txt { padding: 0 20px 20px; display: flex; justify-content: flex-start; align-items: flex-start; }
.tq_send_info_txt > img { margin-top: 5px; }
.tq_send_info_txt > p { font-size: 1.4rem; line-height: 2; font-weight: 400; color:var(--main); }

/*클레이페이 소개*/
.klay_lntbox { width: 100%; max-width: 768px; min-height: calc(100vh - 92px); height: 100%; padding:0 0 50px; }
.klay_slider .swiper-wrapper { padding-top:134px; }
.klay_slider { background: linear-gradient(to top, var(--white), #E6F0FE ); height:518px; padding-top:70px; }
.klay_slider .klay_img { position:relative; width:250px; height:250px; border-radius: 100%; background: var(--white); margin:0 auto; overflow: hidden; }
.klay_slider .klay_img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.klay_slider .swiper-pagination { bottom:30px !important; }
.klay_lntrobox { padding:42px 20px 0; text-align: center; }
.klay_lntrtitle { font-size:2.2rem; font-weight:700; }
.klay_lntrstitle { font-size:1.6rem; font-weight: 400; padding:20px 0 14px; }
.pass_klay { font-size:1.4rem; font-weight: 500; color:var(--dark); cursor:pointer; }
.klay_choice { padding:14px 20px 46px; }
.next_klay { background-color: #E6F0FE; border-radius: 16px; font-size:1.4rem; font-weight: 500; padding:6px 14px; }
.next_klay a { color:var(--main); }
.klay04_introtitle {font-size:1.4rem; font-weight: 500; color:var(--dark);}
.klay04_lntrtitle {font-size:3.8rem; color:var(--main); font-weight: 500;}
.klay04_lntrstitle {color:var(--black); font-weight: 400; font-size:1.6rem; margin-top:24px;}



/*mylist*/
.mylist_wrap { padding:30px 20px; background:var(--bg); }
.mylist_title { font-size:1.6rem; font-weight: 400; }
.mylist_title span { color:var(--main); font-size:2.2rem; font-weight: 500; }
.mypage_go { display: flex; align-items: center; font-size:1.4rem; font-weight: 500; background:var(--white); border-radius: 15px; padding:6px 10px; cursor:pointer; }
.mypage_go img { display: block; margin-right:2px; }
.mylist_klay { background:var(--white); border-radius: 10px; padding:20px 26px; margin:30px 0 20px; }
.mylist_imgbox { background-color: var(--lightgray); border-radius: 12px; border:1px solid var(--line); padding:4px; width:48px; height:48px; text-align: center; margin:0 auto; }
/* .mylist_imgbox img {height:100%;} */
.mylist_imgbox img {max-width:100%; height:100%;}
.mylist_klay p { font-size:1.4rem; font-weight: 500; text-align: center; margin-top:12px; }
.mylist_klay li { cursor: pointer; }

/* mylist 배너 이미지 슬라이드 */
.event_slider { height:110px; }
.event_slider .swiper-pagination-fraction { top:10px; right:10px; left:unset; bottom:unset; font-weight: 500; width:50px; z-index:100; background-color: rgba(0,0,0,0.7); color:var(--white); padding: 4px 10px; border-radius: 20px;}
.banner_img { position: relative; border-radius: 10px; overflow: hidden; }
/* .event_slider .banner_img { background:#E6F0FE; }
.event_slider .banner_img2 { background:purple; }
.event_slider .banner_img3 { background:green; }
.event_slider .banner_img4 { background:violet; } */
.banner_img img { position: absolute; height:100%; width:100%; top:0; left:0; object-fit: cover; }
.evnet_all { font-size:1.4rem; font-weight: 500; margin-top:14px; text-align: right; }
.evnet_all a span { color:var(--main); }
.evnet_all a img { display:inline-block; position: relative; top:3px; }
.event_null {background:var(--white); border-radius: 10px; margin: 14px 20px; box-shadow: 0 3px 15px rgb(0 0 0 / 6%); padding:50px 0;}
.event_null li { align-items: center; font-weight: 500; text-align: center; font-size: 1.4rem;}
/* //배너 이미지 슬라이드 */

/* mypage */
.list_box { padding: 10px 0 5px; background:var(--white); }
.list_box.border_none { border:none;}
.box_title { font-size:1.4rem; font-weight: 500; color:var(--main); padding: 5px 20px; }
.box_goto { font-size:1.6rem; font-weight: 500;}
.box_goto a { padding:10px 20px; }
.box_goto:hover { background:var(--line);}
.box_goto .wait { color: var(--red); }
.box_goto .comp { color: var(--main); }
.version_txt { font-size:1.4rem; font-family: "montserrat"; font-weight: 500; color:var(--dark); text-align: center; }
.mylist_p { padding-bottom:110px; }
.mylist_body::-webkit-scrollbar {display: none; }
.mylist_body { -ms-overflow-style: none; scrollbar-width: none;}

/* 내정보 수정 */
/* .mypage_wrap { margin-top:90px; padding:0 20px; } */
.user_profile { border-bottom:1px solid var(--line); padding:10px 0 10px; }
.user_type { min-width:84px; margin-right:30px; }
.myuser_info { padding: 0 20px;}
/* 05.13 space-between 추가 : NBR */
.myuser_box { margin-top:10px; font-weight: 500; font-size:1.6rem; word-break: break-all; display: flex; width:100%; justify-content: space-between; word-break: keep-all;}
.myuser_box > p:last-child {text-align:right;}
/* .myuser_box > p:last-child {text-align: right;} */
.change_phonenumber { background:var(--inactive); border-radius: 10px; padding:10px; font-size:1.4rem; cursor:pointer; width:max-content; }
.copy_address {display:flex; justify-content: center; align-items: center; font-family: "noto_sans"; font-weight: 500; font-size:1.4rem; background-color: var(--inactive); padding:8px 64px; border-radius: 10px; margin-top:10px;}
.copy_address.active { background-color: var(--main); color:var(--white); }
.change_phonemypage { display: flex; align-items: center; font-weight: 500; }
.change_phonemypage:nth-child(2) { display: flex; align-items: center; font-weight: 500; text-align:right; word-break: break-all;}
.user_kind{display:flex;  word-break: break-all; font-weight: 500;  text-align:right;}
.user_kind img { margin-left:6px; cursor:pointer;}
 /*
 .user_kind::after { position: absolute; right: 0; top: 2px; content: ''; width: 20px; height: 20px; background: url(../img/icon/icon_copy_g.svg);
 background-repeat: no-repeat; background-size: cover; cursor:pointer;
 } */



 /*ON, OFF (생체인증, 마케팅 알림) */

 .on-off-toggle { position: relative; display: inline-block; width: 68px; height: 28px;  }
 .on-off-toggle__slider { cursor:pointer; display: block; width: 68px; height: 28px; border-radius: 34px; background-color: var(--inactive); transition: background-color 500ms; }
 /*동그라미 원*/
 .on-off-toggle__slider:before { position: absolute; content: ''; display: block; background-color: #fff; bottom: 2px; height: 24px; left: 2px; transition: .4s; width: 24px; z-index: 5; border-radius: 100%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);}
 .on-off-toggle__slider:after { display: block; line-height: 28px; text-transform: uppercase; font-size: 1.4rem; font-weight:700; content: 'off'; color: var(--gray); padding-left: 32px; transition: all 500ms; }
 .on-off-toggle__input { position: absolute; opacity: 0; }
 .on-off-toggle__input:checked + .on-off-toggle__slider { background-color: var(--main);}
 .on-off-toggle__input:checked + .on-off-toggle__slider:before { transform: translateX(40px); }
 .on-off-toggle__input:checked + .on-off-toggle__slider:after { content: 'on'; color: #FFFFFF; padding-left: 10px; }

/* 지갑으로 송금하기 */
.send_box {padding-top:60px;}
.sendwallet_box {background-color: var(--lightgray); padding:20px;}
.swrap_btn {width:100%; max-width:768px;  height:100%; margin:60px auto 8px;}
.baltab_wrap .balance_active { border-bottom:2px solid var(--main); color:var(--main); }
.baltab_wrap { display: flex; align-items: center; text-align: center; height:30px; cursor:pointer; color:var(--dark);  }
.won_txt { font-size:1.8rem; font-weight: 500; border-bottom:2px solid var(--line); min-width: 80px; height:100%; }
.kp_txt { font-family: "montserrat"; font-weight:700; font-size:1.8rem; min-width: 80px; border-bottom:1px solid var(--line); height:100%; }
/* 05.13 간격 수정요청 관련 CSS 수정 : NBR */
.sync_txt {font-size:1.4rem; font-weight: 500; color:var(--main); margin-right:4px; }
.sync_box {cursor:pointer;}
.sync_box img { display: block;}
.current_amount {text-align: center; padding:30px 0 20px; }
.current_amount span:nth-child(1) { font-family: "montserrat"; font-size:2.6rem; font-weight: 700;}
.current_amount span:nth-child(2) {  font-family: "montserrat"; font-weight:700; font-size:1.8rem; color:var(--main); }
.current_amount_sisa {text-align: center;}
.current_amount_sisa span {color:var(--dark); word-break: break-all;}
.qr_header_box { height:60px; display: flex; align-items: center; justify-content: space-between; padding:0 20px;}
.qr_header_box p {color:var(--white); font-size: 1.8rem; font-weight: 700;}

/* 05.13 간격 수정요청 관련 CSS 수정 : NBR */
.current_amount_sisa span:nth-child(1) {font-size:1.4rem; font-weight: 500; margin-right:10px; display: inline-block;}
.current_amount_sisa span:nth-child(2) {font-size:1.2rem; font-weight: 400;}
.withdraw_box, .sendwallet_infomation { padding:20px 20px 0;}
.withdraw_box label, .sendwallet_infomation label {font-size:1.6rem; margin-bottom:10px; display: block; font-weight: 700;}
.withdraw_atm label {font-size:1.6rem; margin-bottom:10px; display: block; font-weight: 700;}
.sendwallet_infomatio input::placeholder {background: var(--lightgray);}
.sender_amount {position: relative;}
.sender_amount .input_basic {margin-top:0;}
.sender_amount input::placeholder { font-size: 1.4rem; font-weight:500; text-align: left;}
.position_txt {position:absolute; top:50%; right:20px; transform: translateY(-50%); font-size:1.6rem;    font-family: "montserrat"; font-weight:700; color:var(--main);}
.position_txt_main{color:var(--main);}
.fees_txt { font-size:1.4rem; font-weight: 500; color:var(--dark);}
.fees_amount {font-size:1.2rem; font-weight: 400; color:var(--dark);}
.waring_amount { font-size:1.2rem; color:#FF0000; margin-top:10px; font-weight: 400;}
.send_qrbtn { width:24px;background:url("../../assets/img/icon/icon_loadQR.svg");background-repeat: no-repeat;background-position: center; background-color:var(--main); height:86px; border-radius: 10px; min-width:64px;}
.wallet_addrbox {width:90%; margin-right:10px;}
.wallet_addrbox textarea {padding:14px 20px; width:100%; height:84px; border-radius: 10px; background:var(--lightgray); border:1px solid var(--gray); font-size:1.6rem; font-family: "montserrat"; font-weight: 500; border-radius: 10px; resize:none; outline: none; }
.wallet_addrbox textarea::placeholder { color:var(--gray);}
.addr_txt { font-size:1.6rem; font-weight: 500; margin:22px 0 10px; }
.check_sender {margin-top:82px; padding:0 20px;}
.send_notice {display:flex;}
.send_notice div:nth-child(1) {position: relative; top:3px; margin-right:6px;}
.check_re { font-size:1.4rem; font-weight: 400; color:var(--main);}
.fees_check { font-size:1.2rem; font-weight: 400; color:var(--dark); margin-top:12px; margin-bottom:30px;}

/*이벤트*/
.event_box { padding-top:85px;}
.event_tab {display:flex; justify-content: space-between; align-items: center; text-align: center;}
.event_tab li {font-size:1.6rem; font-weight: 500; color:var(--dark); width:50%; padding-bottom:14px; border-bottom:1px solid var(--line); cursor:pointer; }
.event_tab li.event_active {border-bottom:2px solid var(--main); color:var(--main);}

/* 05.13 box shadow 추가 : NBR */
.event_imgbox { width:100%; height:110px; overflow: hidden; border-radius: 10px; box-shadow: 0px 3px 15px rgb(0 0 0 / 0.06%);     position: relative;}
.event_imgbox img {width:100%; height:100%; position: absolute; top:0; left:0; object-fit: cover;}
.event_title {font-size:1.6rem; font-weight: 500; margin:20px 0 14px; }
.event_state {border-bottom:1px solid var(--line); padding:20px 0; }
.event_listbox  .p_none { padding-top:0;}
.event_viewbox  {padding-top:60px; height:100vh;}
.event_date {font-size:1.2rem; font-weight:400; color:var(--dark); text-align: right;}
.end_txt {position: absolute; width:100%; height:100%; background:rgba(0,0,0,0.6);  color:var(--white); box-shadow:0px 3px 15px ;}
.end_txt p {display: flex; align-items: center; justify-content: center; width:100%;  height:100%; font-size:1.4rem; font-weight:700;}
.event_listtitle { border-bottom:1px solid var(--line); padding:32px 20px; font-size:1.8rem; font-weight:700;}
.eventdate_box { padding:30px 0; display:flex; justify-content: center; align-items: center;}
.date_choiice { background-color: var(--main); padding:4px 10px; color:var(--white); border-radius:10px; font-size:1.0rem; font-weight:700; margin-right:10px;}
.date_year {font-size:1.4rem; font-weight: 500; color:var(--main); white-space: nowrap;}
.eventlist_img {width:100%; text-align: center;}
.eventlist_img img, .event_view img {width:100%; max-width:50%; margin:0 auto;}
.eventlist_stxt { padding:28px 0; font-size:1.4rem; font-weight: 400;}
.more_btn { margin:30px 20px 0; padding-bottom:44px; }
.event_view img  {padding:28px 0;}
.event_view { font-size:1.4rem; font-weight: 400;}
/*220615 신규이벤트 추가 : SJW */

/*결제방법 안내 */
.guide_txt {font-size:1.8rem; font-weight: 700; color:var(--main);}
.guide_state {border-bottom:1px solid var(--line); padding:30px 20px; }
.guide_img {width:90px; height:90px; margin-right:20px; border-radius: 10px; overflow: hidden; float:left;}
.guide_imgtxt { padding-top:20px;}
.guide_imgtxt::after {clear:both; content:''; display: block;}
.guide_img img {width:100%; height:100%;}
.guide_view p:nth-child(1) { font-size:1.6rem; font-weight: 500; color:var(--black); }
.guide_view p:nth-child(2) { font-size:1.4rem; font-weight: 400; color:var(--dark); margin-top:8px; }

/* 사용내역 */
/* .date_check_stick { position:sticky; position: -webkit-sticky; top:60px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding:20px; background:var(--white);} */
/* 230317 수정 */
.date_check_stick { position:sticky; position: -webkit-sticky; top:50px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding:20px; background:var(--white);}
.date_check_borderb { position:sticky; position: -webkit-sticky; top:60px; border-bottom:1px solid var(--line);padding:20px; background:var(--white);}
.usage_historybox {  padding-top:60px;}


/* 230421 tq 내역(tq_history) 수정 : KMS */
.tq_history_top > p {text-align: right; color: #89949C;}
.tq_history_logo {display: block; width: 24px; height: 24px; border-radius: 50%; background-color: #d9d9d9;}
.tq_history_amount {padding: 20px 20px 30px; background-color: var(--lightgray);}

.tq_history_date_check {border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding: 14px 20px; background:var(--white);}
.tq_history_date_check .select_box {width: 125px; height: 36px; line-height: 36px; background-color: var(--lightgray); border: 1px solid #BEC8CF}

.tq_history_month_choice .dset {position: relative;}
.tq_history_month_choice .dset input {width: 116px; text-align: left; border: none; background-color: #EFF3F5;}
.tq_history_month_choice .dset img {position: absolute; right: 8px;top: 50%; transform: translateY(-50%);}

.tq_history_content .date_listtime {font-family: "montserrat"; color: var(--black); margin: 0; padding: 20px 20px 0; border: none;}
.tq_history_content .transaction_history_list, .tq_history_content .transaction_history_list li {padding: 0;}

.tq_history_box .gift_date_check {padding: 0; border: none;}
.tq_history_box .gift_date_check_box {height: auto;}







.cancel_active::before { content:''; width:2px; height:10px; margin:0 10px; background:var(--line); display: inline-block;}
.date_check {display:flex; justify-content: space-between; align-items: center; }

/*송금 및 입금관련 checkbox 버튼 디자인 화 */
.depoawith_state input[type="checkbox"]{ display: none;}
.depoawith_state input[type=checkbox]:checked + span{ background: var(--white); color:var(--gray); border:1px solid var(--gray);}
.depoawith_state li label span { color:var(--main); border:1px solid var(--main); background: var(--white); border-radius: 20px; padding:6px 14px; text-align: center; word-break: break-all;
  font-weight: 500; cursor: pointer;}

/* 05.13 select box custom : NBR */
.date_check .applicant_select_box { width:110px; margin-bottom:0; position:relative; font-size: 1.4rem; background-color: var(--lightgray); cursor: pointer; border-radius: 10px; color:var(--gray); font-weight: 500; }
.date_check .applicant_select.hours_time { display:flex; justify-content: space-between; width:100%; min-width:110px; padding: 8px 15px; }
.date_check .applicant_select_box span {color:var(--black);}
.date_check .scroll_list {top:48px; padding: 20px; left: 0; box-shadow:0px 3px 15px rgb(0 0 0 / 6%); width: 110px;}
.date_check .applicant_select_box ul li {padding-bottom:20px; font-size:1.4rem; font-weight:500 ;}
.date_check .applicant_select_box ul li:last-child{padding-bottom:0;}

.month_choice input[type="radio"]{ position: relative; top:-1px; -webkit-appearance:none; width:18px; height:18px; border:1px solid var(--gray); border-radius:50%; flex:none;}
.month_choice input[type="radio"]:checked{-webkit-appearance:none; border:1px solid var(--main); border-radius:50%;}
.month_choice input[type="radio"]:checked ~ span {color:var(--black);}
/* .month_choice input[type="radio"]:checked ~ label {color:var(--black);} */
.month_choice input[type='radio']:before {content:''; display:block; width:50%; height:50%;margin:25% auto; border-radius:50%;}
.month_choice input[type='radio']:checked:before {background:var(--main);}
.month_choice label {color:var(--dark);  display: flex; align-items: center; cursor:pointer;}
.now_state p {font-size:1.4rem; font-weight: 500; cursor:pointer; margin-right:8px;}
.now_state {cursor:pointer;}
.date_listtime {padding:30px 0 20px; font-size:1.6rem; font-weight: 700;  color:var(--dark); border-bottom:1px solid var(--line); margin:0 20px; }
.transaction_history_list {border-bottom:1px solid var(--line); padding:0 20px;}
.transaction_history_list li {border-bottom:1px solid var(--line);}
.transaction_history_list li:last-child {border-bottom:none;}
.date_list_txt {padding:20px 0;}
.date_listmore {font-size:1.6rem; color:var(--black); font-weight:500;}
.date_listmore p:nth-child(1) {flex:none;}


.date_plusamount {color:var(--main); font-weight: 700; font-family: "montserrat";}
.date_default {color:var(--black); font-weight: 700; font-family: "montserrat";}
.date_timemore {font-size:1.4rem; font-weight: 500; color:var(--dark);}
.date_minusamount {color:#FF0000; font-weight: 700; font-family: "montserrat";}
.history_more {padding:30px 20px;}


/*사용내역에서 직접설정 팝업*/
.transaction {position: sticky; top:0; left:0;  z-index:300; width: 100%; height: 100%;}
.transaction_choicetitle { font-size:1.4rem; font-weight: 500; text-align: center; margin-bottom:20px;  font-family: "noto_sans"; }
.transaction_choice_wrap { position: fixed; left: 50%; bottom: 0; border-radius: 10px 10px 0 0; transform: translateX(-50%); width: 100%; max-width: 768px; z-index: 9920; background-color: var(--white); padding:30px 20px;}
.transaction_choice_box {display: flex; justify-content: space-between; align-items: center; }
.transaction_choice_box .transaction_date {width:48%;  font-family: "noto_sans";}

/* 05.13 select box custom : NBR */
.transaction .applicant_select_box {margin-bottom:30px; position: unset;}
.transaction .applicant_select { width:100%; height: auto; font-size:1.6rem; padding:13px 0; background-color:var(--lightgray); color:var(--black); text-align: center; align-items: unset; display:block; height:auto; border:1px solid var(--gray); border-radius:10px; font-weight:500;}
.transaction .applicant_select_box ul li {color:var(--gray); font-weight:500; padding-bottom:24px;}
.transaction .scroll_list {position: unset; display: block; margin-top:10px; padding:30px 28px; text-align: center; height:176px; overflow-y: scroll; box-shadow:0px 3px 15px rgb(0 0 0 / 6%); }

/* 상세내역 */
.history_viewbox { padding:0 20px; background: #fff; height:auto;}
.history_wrap {padding:60px 0 20px; background: var(--white);}
.history_viewwrap { padding:40px 0; border-bottom:1px solid var(--line); }
.history_viewtitle {font-size:2rem; font-weight: 700; }
.history_mactive {color:var(--main);}
.history_ractive {color:#FF0000;}
.history_viewstate {min-width:30px; margin-left:20px;}
.history_viewamount {font-size:1.8rem; font-weight: 700; margin-top:10px;}
.shistory_viewamount {font-size:1.4rem; font-weight: 500; color:var(--dark); margin-top:14px; }
.shistory_viewamount span {font-size:1.2rem;  font-weight: 400; padding-left:10px;}
.trading_day {padding:20px 0;}
.trading_dayview {font-size:1.4rem; font-weight: 500; display: flex; justify-content: space-between;}
.trading_dayviewx {font-size:1.4rem; font-weight: 500; display: flex; justify-content: space-between;}
.trading_dayviewx p:nth-child(1) {color:var(--dark); flex:none;}
/* .trading_dayviewx p:nth-child(1) {color:var(--dark);} */
.trading_dayview p:nth-child(1) {color:var(--dark);}
.trad_txt  {min-width:56px; margin-right:10px;}
.tx_hashaddr {word-break:break-all; cursor:pointer; color:var(--main); text-decoration: underline; width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


/* 05.13 text 정렬 및 icon size 변경 관련 CSS 수정: NBR */
.trad_img {position: relative; padding-right:30px; cursor:pointer; word-break: break-all; text-align: left;}
.trad_img::after { position: absolute; right:0; top:2px; content:''; width:20px; height:20px;background: url("../img/icon/icon_copy_g.svg");
  background-repeat: no-repeat; background-size:cover;}
.franchisee_info { background-color: var(--line_gray); border-radius: 10px; padding:20px; margin-top:20px;}
.franchisee_info_txt {font-size:1.4rem; font-weight: 500; border-bottom:1px solid var(--line); padding-bottom:20px;}
.franchisee_box {display: flex; justify-content: space-between; align-items: center; font-size:1.4rem;}
.franchisee_box p:nth-child(1) {font-weight: 500; max-width:60px;}
.franchisee_box p:nth-child(2) {font-weight: 500; max-width:202px; word-break: keep-all; text-align: right;}

/* 05.13 상단 정렬 관련 CSS 추가 : NBR */
.franchisee_box:nth-child(2) { align-items: flex-start;}

/*주소복사 디자인 */
.addr_completbox {opacity: 1; position:fixed; bottom:30px; left:0; right:0; margin:auto; width:calc(100% - 40px); max-width:728px; height: 50px; background-color:#E6F0FE; border-radius: 10px; padding:16px 0 16px 54px; color:var(--main);
  margin:0 auto; font-size:1.4rem; font-weight: 500; transition: opacity 300ms ease-in-out; font-family: "noto_sans"; }
.addr_completbox.inactive {opacity: 0; transition: opacity 300ms ease-in-out; }
.addr_completbox::before { display:inline-block; content:''; position: absolute; left:28px; top:42%; width:24px; height:24px;background: url("../img/icon/icon_check_on.svg"); background-repeat: no-repeat;}

/* 가맹점 결제내역 */
.baltab_wrap .frn_active { border-bottom: 2px solid var(--fran); color: var(--fran);}
.fansync_txt { font-size: 1.4rem; font-weight: 500; color: var(--fran); margin-right: 4px;}
.fpayment_kp .current_amount span:nth-child(2), .fpayment_won .current_amount span:nth-child(2) { font-family: "montserrat"; font-weight: 700; font-size: 1.8rem; color: var(--fran);}
/* .franchice_month_choice  {border-bottom:1px solid var(--line); padding:20px;} */
.franchice_month_choice input[type="radio"]{ position: relative; top:-1px; -webkit-appearance:none; width:18px; height:18px; border:1px solid var(--gray); border-radius:50%; flex:none;}
.franchice_month_choice input[type="radio"]:checked{-webkit-appearance:none; border:1px solid var(--fran); border-radius:50%;}
.franchice_month_choice input[type="radio"]:checked ~ span {color:var(--black);}
.franchice_month_choice input[type='radio']:before {content:''; display:block; width:50%; height:50%;margin:25% auto; border-radius:50%;}
.franchice_month_choice input[type='radio']:checked:before {background:var(--fran);}
.franchice_month_choice label {color:var(--dark); display: flex; align-items: center; cursor:pointer;}
.fran_plusamount { color:var(--fran); font-weight:700; font-family: "montserrat"; }
.cancel_payment { text-align: right; margin-top:10px;}
.cancel_payment button {background-color:#EBEDFF; color:var(--fran); padding:6px 12px; border-radius:15px;   font-family: "noto_sans"; font-size:1.4rem; font-weight: 500;}
.fran_middle_line { text-decoration: line-through; color:var(--dark)}
.comple_pay_txt {font-size:1.6rem; font-weight: 500; color:var(--dark);}

.pay_historyf {padding:60px 0 110px; background: var(--white);}

.middle_line{ text-decoration: line-through;}

/* 가맹점 결제내역 팝업 */
.fran_cancelp { position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0,0,0,0.5); font-family: "noto_sans"; }
.fran_cancelp .pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width:300px; max-width:300px; max-height:330px; background-color: #fff; border-radius: 10px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0,0,0,0.4);}
.fran_cancelp .pop_title { font-size:1.8rem; font-weight:700; text-align: center; padding:40px 20px 0; }
.fran_cancelp .popup_txt { font-size:1.4rem; text-align: center; font-weight: 400; padding:30px 20px 40px; line-height: 22px; }
.pop_btn span { display: block; width: 48%; padding: 10px 0; font-weight: 500; text-align: center; color: #fff; font-size: 1.6rem; border-radius: 26px; cursor: pointer; }
.cancel_btn { background:var(--inactive); height:50px; width:50%; font-size:1.6rem; font-weight: 500; font-family: "noto_sans"; }
.cancel_yes { background:var(--fran); height:50px; width:50%; font-size:1.6rem; font-weight: 500; color:var(--white); }
.fran_paybtn {width:100%; max-width:768px; min-height:calc(100vh - 230px); height:100%; margin:60px auto 110px;}
.pay_complet {color:var(--fran);}
.fran_btn { width:100%; max-width:768px; min-height:calc(100vh - 230px); height:100%; margin:70px auto 40px; }
.payment_cancel {width:100%; max-width:768px; padding:0 20px;}
.gray_act { color:var(--dark);}
.fran_paybtn .franchice_month_choice {padding:20px 0 0;}


/* 가맹점 결제금액 */
.payamount_confirmwrap {margin:60px 0 70px;}
.payamount_confirm {padding: 30px 20px 20px; }
.payamount_confirm li:nth-child(1) { text-align: center; font-size:1.8rem; font-weight: 700;}
.payamount_confirm li:nth-child(3) {text-align: center;}
.fran_linebar {border:1px solid var(--line); margin:10px 0;}
.confirm_amount {font-size:2rem; font-family: "montserrat"; font-weight: 700; word-break: break-all; }
.confirm_dan {font-size:1.8rem; font-weight: 700; color:var(--fran); }
.change_fbtn {width:72px; display: flex; align-items: center; background-color: #E8EDFF; border-radius: 15px; padding:4px 18px;}
.change_fbtn span:nth-child(2) {font-size:1.6rem; font-weight: 500; font-family: "noto_sans"; padding-left:6px; color:var(--fran);}
.prediction_amount {font-size:1.4rem; font-weight: 400; color:var(--dark); word-break: break-all;}
.confirm_qrscan {width:100%; background: #000; position: fixed; height:calc(100% - 204px); max-width:768px; margin:0 auto;}
.confirm_qrscan_ab { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width:100%;}


/* .confirm_qrscan {height:485px; background-color:var(--black);} */
.scan_box { width:250px; height:250px; background-color:var(--white);  margin:5px auto; overflow: hidden; }
.qr_headertitle {text-align: center; color:var(--white); font-size:1.6rem; font-weight: 400; padding:0 0 30px;}
.filming_info { color:var(--white); font-size:1.4rem; font-weight: 400; padding-top:46px; text-align: center;}

/*지급정산*/
.my_psamount {cursor:pointer; position: relative; font-size:1.6rem; font-weight: 600; text-align: right; }
.usage_won {  position: relative; font-size:1.6rem; font-weight: 600; text-align: right;}
/* .my_psamount:after { background-position: center; background-image: url("../../assets/img/icon/icon_arrow_down.svg"); background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; content:""; position:absolute; top:50%; transform: translateY(-50%); right:0; } */
.my_psamount.active:after { background-image: url("../../assets/img/icon/icon_arrow_up.svg"); content:""; }
.accumulate {margin-bottom:10px;}
.accumulate_n {margin-bottom:0;}
.accumulate div:nth-child(1) {font-size:1.4rem; font-weight: 500;}
.other_amount { text-align: right; color:#7E7E7E; font-size:1.4rem; font-weight: 500; font-family: "noto_sans"; margin:8px 0 18px; padding-right:20px;}
.other_amount span { font-family: "montserrat"; font-weight: 500;}
.request_btn { background: #EFF3F5;}

/*가맹점 지급/정산*/
.payment_settlementwrap {padding:60px 0 110px; background: var(--white);}
.my_paymentamount {padding:20px; background:var(--lightgray); }
.alert_btn {position: relative;}
.alert_btn > p:first-child { width:70px; }
.alert_btn_img {margin-left:4px;}
.accumulate_info {background-color: var(--white); position: absolute; border:1px solid var(--fran); color:var(--fran); padding:10px; width:350px; font-size:1.2rem; font-weight: 500; left:0; top:25px; z-index: -1; opacity: 0; transition: opacity 300ms linear, z-index 300ms linear; }
.accumulate_info.active {opacity:1; transition: opacity 300ms linear, z-index 300ms linear;}
.accumulate_50.active { z-index:50;}
.accumulate_40.active { z-index:40;}
.accumulate_30.active { z-index:30;}
.settle_tab { color:var(--dark); font-size:1.6rem; font-weight: 500; border-bottom:1px solid var(--line); width:50%; text-align: center; padding:24px 0 14px; cursor:pointer;}
.settle_active { color:var(--fran); border-bottom:2px solid var(--fran);}
.payment_settlementwrap .user_amount { position: relative; width: 100%; height: 50px; margin-top: 10px; border-radius: 10px; background-color: var(--lightgray); border: 1px solid var(--gray);  font-size: 1.6rem;  font-weight: 600;}
.payment_settlementwrap .user_amount .input_basic {margin-top:0; border:unset;  background-color: unset; }
.payment_settlementwrap .user_amount input::placeholder { font-size: 1.6rem; font-weight:500;}
.payment_settlementwrap .position_txt {position:absolute; top:50%; right:20px; transform: translateY(-50%); font-size:1.6rem;  font-family: "montserrat"; font-weight:700; color:var(--fran);}
.request_wrap .choice_num {width:96%;}
.request_wrap .choice_num input {font-size:1.6rem; font-weight: 500; font-family: "noto_sans";}
.request_wrap .choice_num input::placeholder {font-size:1.6rem; font-weight: 500; font-family: "noto_sans";}
.choice_act {font-size:1.6rem; font-weight: 500; color:var(--black);}
.request_amount {font-size:1.6rem; font-weight: 500; margin-top:22px;}
.deposit_account .applicant_select_box { position: relative; }
.deposit_account .applicant_select { display: flex; justify-content: space-between; align-items: center; width: 100%; height:50px; font-size: 1.6rem; background-color: var(--lightgray); border:1px solid var(--gray); cursor: pointer; border-radius: 10px; color:var(--gray); padding:14px 20px; font-weight: 400; }
.deposit_account .select_title {font-size:1.6rem; font-weight: 500; margin-top:22px;}
.deposit_account .applicant_select span {font-weight: 500;}
.depositor_info {display:flex; margin-top:10px; color:var(--fran); font-size:1.4rem; font-weight: 400;}
/* .name_depositor */
.f_error { color:#FF0000; margin-top:10px; font-size:1.2rem; font-weight: 400; display: inline-block;}
.f_complet { color:var(--dark); margin-top:10px; font-size:1.2rem; font-weight: 400; display: inline-block;}
.paymentrequest_btn {margin-top:40px;}
.request_btn{
   font-size:1.6rem; font-weight:700; font-family: "noto_sans"; text-align: center; background-color: #EFF3F5; color:var(--gray); width:100%; height:50px; border-radius: 10px;}
.settlement_tab .date_listtime {margin:0;}


/* .paymentrequest_btn button  */

.bank_listwrap { position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 210; background-color: rgba(0,0,0, 0.7); }
.bank_cont { position: fixed; left:0; margin:auto; right:0; bottom:0;  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); }
.bank_title { font-size:1.8rem; font-weight:700; text-align: center; margin-top:32px; margin-bottom:30px; font-family: "noto_sans"; }
.bank_infobox {padding:0 30px; max-height:500px; overflow-y: scroll;}
.bank_img img {width:24px; height:24px; display: inline-block; max-width:100%;}
.bank_name {font-size:1.4rem; font-weight: 400; font-family: "noto_sans"; margin-left:10px;}
.bank_box {margin-bottom:20px; text-align: center; width:24%; display: flex; align-items: center; }
.bank_info {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; font-family: "noto_sans";}
.bank_info button {outline: none; border:none; background:none;}
.request_txt {font-size:1.4rem; font-weight: 400; font-family: "noto_sans"; text-align: center; }
.request_txt span { font-family: "montserrat"; font-weight: 600;}
.settle_radio {border-bottom:1px solid var(--line); padding:20px;}


.box_height {min-height:calc(100vh - 50px); min-height:calc(100svh - 50px); height: auto; background:var(--white);}
/* .box_height {height:100svh; background:var(--white);} */
.off_box { height:100vh;}

/*220623 SJW 가맹점 신규클래스 추가*/
.fran_histroy_box .keypad_pininput {vertical-align: top;}
.fran_histroy_box .history_viewwrap {padding:100px 0 40px; }
.fran_histroy_box .enter_keypadwrap {background: transparent; min-height:90px;}
.fran_histroy_box .payment_cancel {padding:0;}
.payment_tab .date_listtime{margin:0;}

/* 221004 NBR 가맹점 등록 페이지 추가 ------------------------------------------------------------------ */
/* .viewport_header, .viewport_info, .viewport { height: 100%; } */
.step_icon { padding: 20px 0; text-align: center; }
.step_icon img { display: inline-block; }
.franchising_info { padding : 30px 20px; }
.franchising_info p { margin-bottom: 10px; font-size: 2.2rem; font-weight: 700; line-height: 26px; }
.franchising_info span { font-size: 1.4rem; font-weight: 400; color: var(--sub); }

/* 신청자 정보 내역 */
.applicant_info { padding : 10px 20px 20px; border-bottom: 4px solid var(--line); }
.applicant_info h2 { font-size: 18px; font-weight:500; }
.applicant_info > ul { padding: 0 16px; margin: 10px 0; border: 1px solid var(--fran_inactive); border-radius: 10px; }
.applicant_info > ul > li { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
.applicant_info > ul > li:first-child { border-bottom: 1px solid var(--line); }
.applicant_info > ul > li > p { font-size: 1.4rem; font-weight: 400; color: var(--sub); }
.applicant_info > ul > li > span { font-size: 1.4rem; font-weight: 500; }
.applicant_info > p { display: flex; font-size: 12px; font-weight: 400; color: var(--sub); }
.applicant_info > p:nth-child(3) { margin-bottom: 12px; }
.applicant_info > p::before { content: '* '; display: block; width: 8px; height: auto; margin-right: 2px; }
.applicant_title { padding: 30px 20px 20px; margin-bottom: 10.5px; font-size: 18px; font-weight: 500; border-top: 4px solid var(--line); border-bottom: 1px solid var(--line); }
.applicant_sub_title { font-size: 1.6rem; font-weight: 500; }
/* 사업자 등록 번호 영역 / signup_box = 회원가입부분 추가 */
.signup_box, .business_num_box { padding: 10px 20px; }

/* 상호 & 법인명 영역 */
.business_name_box { padding: 10px 20px; }
.business_select_box { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* .fran_select_between:first-child { margin-right: 10px;}
.fran_select_between { width: 100%; border:none; padding: 18px 0 8px; border-bottom:1px solid var(--fran_inactive); outline: none;}
.fran_select_between option { color : var(--black);} */
.fran_select_between:first-child { margin-right: 10px;}
.fran_select_between { margin-top:10px; width: 100%; height:50px; border:1px solid var(--gray); border-radius: 10px; padding: 14px 20px 14px 20px; border-bottom:1px solid var(--fran_inactive); outline: none;}
.fran_select_between option { color : var(--black);}
/* 대표자 이름 입력 영역 */
.represent_box { padding: 10px 20px 20px; }
/* 신분증 입력 영역 */
.drag_drop_zone { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-width: 100%; height: 213px; border: 1px dashed var(--fran_inactive); border-radius: 10px; overflow: hidden; margin-top: 15px; }
.drag_drop_zone p { font-size: 1.4rem; font-weight: 400; line-height: 33px; color: var(--fran_inactive); }
.drop_upload { display: none; }
.drag_drop_zone > label { position: absolute; top: 0; left: 0; width: 100%; margin-top: 15px; height: 100%; cursor: pointer; }
.represent_box > p { display: flex; align-items: flex-start; font-size: 12px; font-weight: 400; color: var(--sub); margin-top: 10px; }
.represent_box > p::before { content: '* '; display: block; width: 8px; height: auto; margin-right: 2px; line-height: 2;}
.drop_img { width: 100%; height: 100%; object-fit: contain; }
.off { display: none; }
/* 가맹점 명 입력 영역 */
.franchise_name_box { padding: 10px 20px 20px; }
.franchise_num_box, .franchise_adress_box { padding: 10px 20px; }

/* 가맹점 주소 입력 영역 */
.zip_code { width: calc(100% - 115px); }
.address_btn { margin-top:10px; font-family: "noto_sans"; width:100px; height:50px; margin-left:15px; border: 1px solid var(--gray); border-radius: 10px; font-size: 1.4rem; font-weight: 500; background-color: #fff; color: var(--fran_inactive); }

/* input placeholder 설정 */
input::placeholder { color: var(--gray); font-family: "noto_sans"; font-weight: 400; font-size: 1.4rem; }

/* btn 활성화 */
.on_color { border: none; background: var(--main); color:var(--white); }
.address_on_btn { border: none; font-family: "noto_sans"; padding: 5px 10px; border-radius: 15px; font-size: 1.4rem; font-weight: 500; background: var(--main); color: #ffffff; }
/*input label 화살표 제거*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* scroll custom */
.scroll_box::-webkit-scrollbar { width: 6px; }
.scroll_box::-webkit-scrollbar-track { background-color: #F0F0F0; border-radius: 30px; }
.scroll_box::-webkit-scrollbar-thumb { background-color: #E3E3E3; border-radius: 30px; }
.header_title { width: max-content; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }

/* 2022.03.31 매장관리 & index_franchise CSS 수정작업 : NBR  */
.holiday_txt b { margin-left:10px; font-size : 12px; font-weight:500; color:red;}
.hours_box > img { position: absolute; right: 0; top: 25%; transition: 500ms ease;}
.header_wrap > p > span { font-size:1.2rem; border-radius: 13px; padding: 6px 10px; font-family: 'noto_sans'; color: #888888; background-color: #F2F2F2; }
.franchise_icon > span { width:57px; height:25px; border-radius:13px; color:var(--main) !important; border:1px solid var(--main); text-align: center; font-size:1.2rem; font-weight:500; background-color: #ffffff !important;}
/*// 2022.03.31 매장관리 & index_franchise CSS 수정작업 : NBR  */

.contents_franchise { margin-top: 60px;}
/* .contents_franchise input { font-family: "noto_sans"; font-weight: 400; font-size: 1.4rem; color: #000; } */

/* input 포커싱 > border 색상 변경 : NJH */
/* .input_box { display: block; padding-top: 18px; } */
.input_box { display: block;}
/* .input_box > input { width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--fran_inactive); transition: border-bottom 300ms ease; font-size: 1.4rem;} */
.input_box > input { width: 100%; height:50px; margin-top:10px; padding:14px 20px 14px 20px; border-radius:10px; border:1px solid var(--gray); font-size: 1.6rem; font-weight: 600;}
.input_box > input:focus { border: 1px solid var(--main); }
.business_num { width: calc(100% - 97px); }
/* .input_btn { width: 87px; height: 30px; border: 1px solid var(--fran_inactive); border-radius: 15px; background-color: #fff; font-size: 1.4rem; font-weight: 500; color: var(--fran_inactive); transition: background-color 300ms ease; } */
.input_btn { margin-top:10px; width: 87px; height: 50px; border: 1px solid var(--gray); border-radius: 10px; background-color: #fff; font-size: 1.4rem; font-weight: 500; color: var(--fran_inactive); transition: background-color 300ms ease; }
.input_btn.on_color { background-color: var(--main); border-color: var(--main); color: #fff; }
.btn_box { padding: 20px;}
.btn_box > p { text-align: center; font-size:1.2rem; font-weight:400; padding-bottom:10px; color:red;}
.franchise_name_box small, .business_num_box small { font-size:1.2rem; font-weight:500;}
.input_box small { font-size:1.2rem; font-weight:500;}
/* 팝업창 */
.dark_bg { position: fixed; left:0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.6); z-index: -1; opacity: 0; }
.dark_bg.active { opacity: 1; z-index: 150; transition: opacity 300ms ease; }
.pop_up { position: fixed; left:50%; top:50%; transform:translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width:calc(100% - 40px); max-width:335px; padding: 50px 0; background-color: #fff; text-align: center; z-index: -1; opacity: 0; border-radius: 10px; }
.pop_up.active { opacity: 1; z-index: 150; transition: opacity 300ms ease; }
.pop_up p { color: #000; font-size: 22px; font-weight: 700; }
.pop_up > span { width: 100%; padding: 20px 0 30px; font-size: 1.4rem; font-weight: 400; color: var(--sub); text-align: center; transition: background-color 300ms ease-in-out; }
.pop_close { cursor: pointer; font-size: 1.6rem; font-weight: 500; min-width: 158px; padding: 8px 0; background-color: var(--main); color: #ffffff; border-radius: 26px; }


/* ------ 오프라인 매장 offline_store - menu ------ */
.franchise_listwrap { width: 100%; height:100vh; padding: 60px 0 80px; }
.list_search, .map_around { width:50%; text-align: center; padding:24px 20px 14px; border-bottom:2px solid var(--line); cursor:pointer; font-size: 1.6rem; font-weight: 500; color:var(--darkgray); }
.f_active { border-bottom:2px solid var(--main); color:var(--main); font-weight:800; }
.franchise_search { border:1px solid var(--fran_inactive); border-radius: 6px; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; padding:10px 20px; }
.search_input { width:100%; }
.search_input input { width:100%; }
.search_btn { width:auto; }
.search_btn button { outline:none; border:none; background:transparent; display:block; }
.list_active { background:var(--main); color:var(--white); border:none; }

/* search 바로 아래있는 스크롤 */
.list_slider { overflow-x:auto; display: flex; padding: 0 0 10px 20px; }
/*스크롤바의 색상*/
/* .list_slider::-webkit-scrollbar-thumb { background-color: #ededed; border-radius: 20px; } */
/*스크롤바 트랙 색상*/
/* .list_slider::-webkit-scrollbar-track { background-color: var(--white); } */
/*스크롤바의 색상*/
.list_slider::-webkit-scrollbar { height:5px;}
.list_slider::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 20px;}
.list_slider:hover::-webkit-scrollbar-thumb { background: #ededed;}
/*스크롤바 트랙 색상*/
.list_slider::-webkit-scrollbar-track { background-color: #fff; }
.list_slider li { padding:6px 10px; margin-right:8px; color: var(--fran_inactive); font-size:1.4rem; white-space: nowrap; border:1px solid var(--fran_inactive); border-radius: 20px; cursor:pointer; }
.list_slider li.list_active { background:var(--main); color:var(--white); border:none !important; }

/* 주변 가맹점 갯수 text */
.franchise_total { padding:0 20px; font-size:1.4rem; font-family: "noto_sans"; font-weight: 400; }
.franchise_number { color:var(--main); }

.franchise_lise_select { width: 100%; display: flex; justify-content: flex-end; padding: 0 20px;}
.franchise_lise_select select { padding: 10px; border: none; font-size: 1.4rem; font-weight: 700; outline: none;}
.franchise_lise_select option { color: #000;}

/* 가맹점 리스트 */
.franchise_list_container { padding: 0 20px;}
.fran_listw { border-bottom:1px solid var(--line); cursor: pointer; padding: 10px 0; }
.fran_listw:last-child { border: none;}
.fran_list_null { font-size: 1.4rem; font-weight: 400;}
.fran_list, .fran_infotxt {width:100%;}


/* 가맹점리스트 left */
.franchise_imglist { position: relative; width:120px; height:120px; border-radius: 10px; border: 1px solid var(--inactive); overflow: hidden; }
.franchise_imglist img { width:100%; height:100%; object-fit: cover; border-radius: 10px;}

.franchise_darkbg { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.franchise_darkbg > p { font-size: 1.6rem; color: var(--white);}

/* 가맹점 리스트 right */
.franchise_txt_list {position: relative; width: calc(100% - 140px); height: 120px; padding: 5px 0;}
.franchise_txt_list p { font-size: 1.3rem; font-weight: 400; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.franchise_txt_list p:first-child { font-size: 1.6rem; font-weight: 700; }
.franchise_txt_list p:last-child { padding: 0;}
.franchise_txt_list > div > p:last-child { color:var(--fran_inactive); }

/* 가맹점 리스트 right icon */
.fran_map_tel { display: flex; position: absolute; bottom: 0; right: 0;}
/* ------ // 오프라인 매장 offline_store - menu ------ */


/* ------ 오프라인 매장 franchise_information ------ */

/* 매장 내 슬라이드 이미지 */
.main_slider_box { position: relative;}
.main_bg .swiper-pagination-bullet-active { background:var(--main); }

/* 매장 관리 현황에 따른 표시 영역 */
.state_mainslider_txt { position: absolute; bottom:0; left:0; right:0; margin:auto; width:calc(100% - 40px); color:#fff; font-weight: 500; font-size:1.4rem; padding:10px 20px; background:rgba(0,0,0, 0.5); border-radius: 20px; text-align: center; z-index:66; }

/* 가맹점 이름 영역 */
.fran_infowrap { padding: 20px 20px 0; }
.fran_infowrap > div { width: 100%; min-height: 60px; }
.fran_name { font-size: 2rem; font-weight: 700; margin-right:10px;  }
/* word-break: keep-all; */

/* 아이콘 */
.franchise_tel { justify-content: flex-end; align-items: center; }
.franchise_tel a { width: 35px; height: 35px; padding: 3px; color: var(--main); border-radius: 20px; line-height: 1; }
.franchise_tel a:hover { background-color: rgba(0, 0, 0, 0.05)}
.franchise_tel img { width: 100%; height: 100%; object-fit: fill;}

/* 메뉴나 정보에 값이 없을때 null 값 */
.fri_infosection { position: relative; width:100%; min-height:500px; height:auto; margin-bottom: 80px;}
.no_data { position: absolute; text-align: center; top:50%; left:50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height:100%;  background-color: rgba(249, 249, 249, 0.1); font-size:1.4rem; font-weight:500; }
.no_searchdata { font-size: 1.4rem; }

/* 가맹점 사진 */
.fran_mainimg.null { background-color: #f9f9f9; margin-right:10px; }
.fran_mainimg { position: relative; width:100%; height:280px; }
.fran_mainimg img { position: absolute; top:0; left:0; right:0; bottom:0; margin: auto; width: 100%; height: 100%; max-width:100%; object-fit: contain; }

/* 가맹점 사진이 없을때 */
.nullimgf { max-width:70% !important;}

/* 정보탭 */
/* .fri_infoj { padding:20px 20px 80px;} */
.fri_infoj { padding: 0 20px;}
.fri_infoj > ul > li { padding: 20px 0 10px; border-bottom:1px solid var(--line); }
.fri_infoj > ul > li:last-child { border:none; }
.company_name { font-size:1.6rem; font-weight: 500; color:#111; }
/* .company_name { font-size:1.6rem; margin-bottom:20px; font-weight: 500; color:#111; } */
.company_detail_txt { font-size: 1.4rem; font-weight: 400; }
.company_detail_txt > li { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px;}
.company_detail_txt > li > span, .company_detail_txt > li > div { width: calc(100% - 110px); height: auto; word-break: break-all;}
.back_color { background-color:rgba(255,255,255, 0.01) ; -webkit-transition: background-color 300ms ease; -o-transition: background-color 300ms ease; transition: background-color 300ms ease; }

.store_open_time > p, .store_open_time > div { padding: 0 0 5px;}

.menu_box { display: flex; justify-content: space-between; align-items: center; padding: 20px; font-size: 20px; font-weight: 700;background-color: var(--bg);
 border-bottom: 1px solid var(--line_gray);}
.menu_box > div { display: flex; flex-direction: column; }
.menu_box > div > p:first-child { font-size: 1.6rem; font-weight:700;}
.menu_box span { font-size: 1.4rem; font-weight: 400;}

/* 메뉴탭 */
/* .fri_infom { padding-bottom : 80px; } */
/* 메뉴그룹 공지 */
.fri_menu_notice { padding: 20px; font-size: 1.4rem; border-bottom:3px solid var(--line); word-break: break-all;}
/* word-break: keep-all; */
/* 메뉴 더보기 화살표 transform */
.menu_box > img { transition: all 500ms; }
.arrow_down { transform: rotate(-180deg); transition: all 500ms;}
/* 메뉴 상세 */
.menu_detail_box { display: flex; justify-content: space-between; padding: 20px; cursor: pointer; border-bottom:1px solid var(--line);}
/* .menu_detail_box:hover { background: var(--line);} */
.menu_detail_img {width: 100px; height: 100px; border-radius: 8px; overflow: hidden;}
.menu_detail_img img { width: 100%; height: 100%; object-fit: cover;}
/* 메뉴 상세 내용 */
.menu_detail_list { width: calc(100% - 130px); word-break: break-all;}
.menu_detail_list.none_img { width: 100%; }
.menu_detail_list > p { font-size: 1.4rem; font-weight:500;}
.menu_detail_list > p:first-child { font-size: 1.6rem; font-weight:500; }
.menu_detail_list > p:nth-child(2) { padding: 3px 0; font-size: 1.4rem; font-weight:400; color: var(--fran_inactive);}
/* 유의사항 */
.info_sub_notice { padding: 20px 20px 60px; border-top:1px solid var(--line); color:var(--darkgray);}
.info_sub_notice > p { padding-bottom:5px; font-size:1.4rem; }
.info_sub_notice > ul > li { padding-left: 20px; list-style:inside;  text-indent: -20px; font-size:1.2rem; }

/* ------ // 오프라인 매장 franchise_information ------ */


/* index > splash */
.bg_color_fran { background-color: #EBF4FE; position: relative; }
.bg_color { background-color: #f1f1f1; position: relative; }
.splash { position: relative; width: 100vw; height: 100vh; }
.splash_fran_txt { text-align: center; font-size: 22px; font-weight: 500; line-height: 32px; color: var(--main); font-family: 'noto_sans'; font-weight : 700;}
.splash_txt { text-align: center; font-size: 22px; font-weight: 500; line-height: 32px; color: var(--main); font-family: 'noto_sans'; font-weight : 700;}
.splash { width:100%; text-align: center; }
.splash_img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.splash img { background-origin: border-box; background-clip: content-box, border-box; width:30px; height: 30px; animation: spin 1s linear infinite; margin-bottom: 20px; }

@keyframes spin {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(360deg); }
 }


/* ----------- Franchise Mode Main ----------- */
/* body { background-color:var(--line); } */
/* .wrapper { background-color: unset !important; } */
/*가맹점 상태 */
.franchisee_state { font-size:1.2rem; font-weight: 500; background: var(--bg); border-radius: 16px; padding:5px 14px; font-family: "noto_sans"; }
/*가맹점 상태 */

/*가맹점 정보안내 및 정보수정 페이지 */
.franmain_wrap { background: var(--bg); }
.user_wrap { margin:60px 0 90px; }
.fran_infomation {position:relative; box-shadow: 0px 3px 15px rgba(0,0,0,0.06); padding:20px; background: var(--white);}
.fran_infomation > div:first-child { width: calc(100% - 130px);}
/* word-break: keep-all; */
.fran_bg_img { position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; }
.fran_bg_img img { width: 100%; height: 100%;}
.fran_mtitle { font-size:1.8rem;  font-weight: 700; color:var(--fran);}
.fran_stitle { font-size:1.4rem; font-weight: 400; padding:4px 0; word-break: break-all;}
.fran_time {font-size:1.4rem; font-weight: 400; color:var(--dark);}
/* .change_franinfo  {background-color: var(--main_sub); margin-top:10px; width:max-content; border-radius: 15px; padding:6px 10px; cursor:pointer;} */
.change_franinfo  {background-color: var(--bg); margin-top:10px; width:max-content; border-radius: 10px; padding:7px 20px; cursor:pointer;}
/* .change_franinfo p:nth-child(2) {font-size:1.4rem; font-weight: 500; margin-left:4px; } */
.change_franinfo p {font-size:1.4rem; font-weight: 500; }

/* 가맹점관리 */
.fran_management_box p{ padding-top:5px; font-size:1.4rem; font-weight: 500;}
.fran_menu_icon { width: 48px; height: 48px; line-height:48px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius:13px; margin:0 auto; }
.fran_icon_container { display: flex; align-items: center; flex-wrap: wrap; text-align: center;}
.fran_icon_container > li { width: calc(100% / 4);}
/* 보유금액 */
.fran_state_amount { background-color: var(--white); box-shadow: 0px 3px 15px rgba(0,0,0,0.06); margin:20px; border-radius: 10px; padding:20px;}
.fran_state_amount p:nth-child(1) { font-size:1.6rem; font-weight: 700;}
.bal_number { font-size:1.4rem; font-weight: 500; }
.bal_state { width:40px; color:var(--gray); font-size:1.4rem; font-weight:700; padding:2px 0; background-color: var(--inactive); margin-left:8px; cursor: pointer; border-radius: 8px; text-align: center; }
.bal_state_fctive { color:var(--fran); background: #E8EDFF; }
.num_klay { padding:10px 0; font-size:2.2rem; font-family: "montserrat"; font-weight: 600; }
.num_klay .dan { font-size:1.4rem; font-family: "montserrat"; font-weight: 700; color:var(--fran); } */
.total_sisa { font-size:1.4rem; color:var(--dark); font-weight: 500; width:100%;}
.change_fbtn {width:72px; display: flex; align-items: center; background-color: #E8EDFF; border-radius: 15px; padding:4px 18px;}
.change_fbtn span:nth-child(2) {font-size:1.6rem; font-weight: 500; font-family: "noto_sans"; padding-left:6px; color:var(--fran);}
.sync_img {margin-left:4px;}
.refresh_btn { cursor:pointer; }
.refresh_btn > p { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; }
/* 누적 결제 */
.fran_management_listwrap, .accumulated_listwrap { margin:20px 20px 0; box-shadow: 0px 3px 15px rgba(0,0,0,0.06); overflow: hidden; border-radius: 10px; }
.fran_management_title, .accumulated_title {font-size:1.6rem; font-weight: 700;}

.fran_management_list, .accumulated_list { width:100%; cursor:pointer; position: relative; padding:14px 20px; border-bottom:1px solid var(--line); background-color: var(--white);}
.fran_management_list:after, .accumulated_list:after { background-position: center; background-image: url("../../assets/img/icon/icon_arrow_down.svg"); background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; content:""; position:absolute; top:50%; right:20px; transform: translateY(-50%); }
.fran_management_list.active:after, .accumulated_list.active:after { background-image: url("../../assets/img/icon/icon_arrow_up.svg"); content:""; }
.fran_management_box, .accumulated_box {background-color: var(--white);}

/*누적 결제 클릭시 보여지는 내역*/
.list_paymentbox { padding:20px 0; border-bottom:1px solid var(--line); margin:0 20px;}
.accu_title { font-size:1.4rem; font-weight: 500; color:var(--dark);}
.accu_paycolor {color:var(--fran); font-weight: 700; font-family: "montserrat"; font-size:1.6rem;}
.accu_paycolor span {font-weight: 700; font-family: "montserrat"; font-size:1.4rem;}
.accu_number {font-size:1.6rem; font-family: "montserrat"; font-weight: 600; padding-top:6px;}
.accu_number span {font-size:1.6rem;  font-family: "noto_sans"; font-weight: 600;}
.accu_snumber {font-size:1.4rem; font-weight: 500;  color:var(--dark); padding-top:6px;}

/*현재 시세*/
.accu_date {margin:10px 40px 0;}
.accu_date p {font-size:1.4rem; font-weight: 400; color:var(--dark);}

/*고객 결제하기 */
.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: var(--main); 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: 50px; margin-top: 10px; border-radius: 10px; background-color: var(--lightgray); 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);} */
/* .choice_num {width:96%;} */
/* .user_bacode_pay {width:100%; border-radius:10px; margin-top:20px; overflow: hidden;}
.user_bacode_pay span {padding-left:40px;}
.user_bacode_pay button::before { top:50%; transform: translateY(-50%); position: absolute; content: ''; background: url('../img/icon/icon_barcode.svg'); width:32px; height:32px; background-position: center;}
.user_bacode_pay button.key_active::before { background: url('../img/icon/icon_barcode_w.svg');} */
.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);}
.main_fran_qr_info {font-size:1.4rem; font-weight: 400; color:var(--main); margin: 10px 30px 0; text-align: center;}
.main_fran_qr_info p {color:var(--main);}
.user_amount.input_active {  border:1px solid var(--fran);}
.user_bacode_btn.key_active { background-color: var(--fran); color:var(--white);}
.user_bacode_btn.key_active span { color:var(--white);}
.user_bacode_btn.pay_active { background-color: var(--main); color:var(--white);}
.user_bacode_btn.pay_active span { color:var(--white);}

.user_qr_pay {width:100%; border-radius:10px; margin-top:20px; overflow: hidden; }
.user_qr_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";}
.pay_code_number.pay_active { background-color: var(--main); color:var(--white);}
.pay_code_number.pay_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); }
.quit_img { position: absolute; top:0; right:0; padding:27px 27px 0; cursor:pointer; width:max-content; }
.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); }
.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;}

/* 가맹점 가입 */
.join_container { padding: 20px; }
.step_img { padding-bottom:20px; text-align: center; }
.step_img img { margin:0 auto;}
.join_step01_title { padding: 20px 0; }
.join_step01_title > p { font-size: 2.2rem; font-weight:700; }
.join_step01_title > p:last-child { padding-top: 10px; font-size: 1.4rem; font-weight: 500;}

.spa { margin: 10px 10px 0 24px; padding-bottom: 20px; font-size: 1.4rem; font-weight: 400; color: var(--sub); cursor: pointer; text-align: justify; }
.all_agree { margin-top: 30px; border-bottom: 1px solid var(--line); }
/* 전체동의 이미지 변환*/
.all_agree input[type="checkbox"] + label { width: 100%; overflow: hidden; font-size: 1.6rem; font-weight:500; padding-left: 24px; background: url("../img/layout/svg/icon_check_off.svg") no-repeat 0 50% / 20px 20px; cursor: pointer; }

.all_agree input[type="checkbox"]:checked + label { background: url("../img/layout/svg/icon_check_on.svg") no-repeat 0 50% / 20px 20px; cursor: pointer; }

.all_agree input[type="checkbox"], .individual_chk input[type="checkbox"] { display: none; }

.chk_box { margin:0 0 15px 5px; }

.individual_chk input[type="checkbox"] + label { font-size: 1.4rem; font-weight: 500; background: url("../img/layout/svg/icon_check_off.svg") no-repeat 0 50% / 20px 20px; cursor: pointer; }

.individual_chk input[type="checkbox"]:checked + label { background: url("../img/layout/svg/icon_check_on.svg") no-repeat 0 50% / 20px 20px; cursor: pointer; }

.clause { width: 25px; height: 25px; background: url('../img/layout/svg/icon_arrow_right.svg') no-repeat; }


/* join comp step03 */
.join_comp_img { display: table-cell; text-align: center; vertical-align: middle;}
.join_comp_img img { margin:0 auto; padding-bottom: 20px; width:80px; height:80px;}
.join_franstate { font-size: 2.2rem;}
.join_franscomplet { font-size: 1.6rem;}


/* 매장관리 - 기본정보 */
.basic_info { width: 50%; text-align: center; font-weight: 700; padding: 24px 20px 14px; border-bottom: 2px solid var(--line); cursor: pointer; color: var(--fran_inactive); font-size:1.6rem; }
.infor_title { font-size:2.2rem; padding:30px 20px 24px; font-weight: 700; border-bottom:1px solid var(--line); }
.store_active { border-bottom:2px solid var(--main); color:var(--main); font-weight:800; }
.openinfor_wrap { border:1px solid var(--fran_inactive); border-radius: 10px; padding:26px; }
.open_totalwrap { padding:20px; border-bottom:1px solid var(--line); }
.open_timetitle {margin-bottom:14px; font-weight: 700; font-size:1.6rem;}
.open_numbertitle { font-weight:400; font-family: "poppins"; font-size:1.6rem; }
.day_flex { display: flex; justify-content: space-between; align-items: center; margin-top:24px; flex-wrap: wrap;}
.day_week { display: flex; justify-content: center; align-items: center; width:34px; height:34px; border-radius: 50%; border:1px solid var(--fran_inactive); color:var(--fran_inactive); font-size:1.6rem; }
.day_active { background:var(--main); color:#fff; border:none; }
.null_holiday_wrap, .holiday_wrap { padding:20px; }
.holiday_txt { font-size:1.6rem; font-weight: 700; }
.holiday_stxt { font-size:1.4rem; font-weight: 400; word-break: break-all;}
.holiday_date { font-family: poppins; font-size:1.4rem; font-weight: 400; }
.store_line { height:4px; background:var(--line); }
.employee_wrap { padding:30px 20px; }
.employee_flex { display: flex; justify-content: space-between; align-items: center; margin-bottom:14px; }
.employee_sflex { display: flex; align-items: center; }
.employee_name { margin-right:30px; font-weight: 500; }
.employee_time { font-family: poppins; font-weight: 400; }
.employee_img img { display: block; }
.employee_state.employee_active { background:#EBF4FE; color:var(--main); padding:10px; border:none; border-radius: 18px; }
.employee_state { margin-left:16px; padding:10px; font-size:1.4rem; border-radius: 18px; font-weight: 500; color:var(--fran_inactive); border:1px solid var(--fran_inactive); }

/* store_notice */
.store_notice { padding: 20px; border-bottom: 1px solid var(--line);}
.store_notice span { font-size: 1.2rem; font-weight: 400;}

/* store information 매장관리 내 운영관리 */

/* 운영관리 내 매장 공지사항 */
.notice_edit_area_box { width: 100%; height: 140px; padding: 20px; border: 1px solid var(--fran_inactive); font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none; border-radius: 10px; }
.notice_edit_area { width: 100%; height: 100px; font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none; border:none;}
.hours_time { border:1px solid var(--fran_inactive); border-radius: 10px; width:100%; padding:8px; font-size:1.4rem; text-align: center;}
.hours_box { width:49%; position: relative;}
.businessstatus_btn label { position:relative; width:33%; margin-right:30px; text-align: center;cursor:pointer;  }
.businessstatus_btn label:last-child { margin-right:0; }
.businessstatus_btn label span { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:var(--fran_inactive); width: 100%;}
.business_hours_wrap { margin:20px; }
.business_hours { position:relative; border:1px solid var(--fran_inactive); border-radius: 10px; padding:20px; }
.hoilday_closeimg { cursor: pointer; margin-bottom:20px; }
.businessstatus_wrap { padding:20px; border-bottom:1px solid var(--line); }
.businessstatus_wrap > li:first-child { align-items: flex-start; margin-bottom: 6px;}
.businessstatus_time { font-size:1.2rem; font-weight: 400; }
.btn_state { display:block; outline: none; margin:0; background:#fff; border:1px solid var(--fran_inactive); border-radius: 18px; min-height:35px; font-size:1.4rem; font-weight: 500; width:100%; color:var(--fran_inactive); font-family: "noto_sans"; padding:0;}


.businessstatus_btn input[type="radio"]:checked {
  /* background:linear-gradient(to right, #2E9DCD , #523B88); color:#fff; */
  background:var(--main); color:#fff; border:none;
}
.businessstatus_btn input[type="radio"]:checked + span {
  color:#fff;
}
/* 삭제버튼 */
.business_close_btn { position:absolute; top:10px; right:10px; display:flex; justify-content: flex-end; align-items: center; background-color:rgba(0,0,0,0);}
/* word-break: keep-all; */

/* timePicker custom */
.ui-menu-item{ height: 35px !important; display:flex !important; align-items: center !important;}
.ui-menu-item > a { display:block !important; width:100% !important; padding: 7px 0 !important; font-size: 1.4rem !important;}
/* 영업정보 관련 안내문 */
.operation_info { padding: 20px; list-style-type: disc; border-top:1px solid var(--line);}
.operation_info > li { font-size: 1.4rem; color: var(--darkgray);}
/* switch initial setting & off style */
.hour_switch { line-height: 0; }
.hour_switch_check { cursor:pointer; position: absolute; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 50px; height: 26px; z-index: 2; margin: 0; }
.switch_label { position: relative; cursor: pointer; display: inline-block; width: 50px; height: 26px; background: var(--fran_inactive); border-radius: 20px; transition: 0.2s; }
.onf_btn { position: absolute; top: 2px; left: 2px; display: inline-block; width: 22px; height: 22px; border-radius: 20px; background: #ffffff; transition: 0.2s; box-shadow: 0px 0px 5px rgba(0,0,0, 0.16); }
/* switch move & on style */
.hour_switch_check:checked+.switch_label .onf_btn { left: 26px; top: 2px; }
.hour_switch_check:checked+.switch_label { background: var(--main); }

.join_state { display: flex; justify-content: space-around; align-items: center; margin-bottom:14px; }
.time_rest > p {margin-top:10px; font-size:1.2rem; font-weight: 500;}
.holiday_check { padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* 요일 체크박스 */
.join_obj input[type="checkbox"] {  display: none;}
.join_obj input[type="checkbox"] + span {display: flex; justify-content: center; align-items: center; color: var(--fran_inactive); border-radius: 50%; border:1px solid var(--fran_inactive); cursor: pointer; width:34px; height:34px; font-size:1.4rem; font-weight: 400;}
.join_obj input[type="checkbox"]:checked + span { color: #fff; background: var(--main); border:none;}
.plus_buzi img { display: block; width: 13px; height: 13px;}
.buzi_txt { font-size:1.2rem; color:var(--main); font-weight: 500; margin-left:4px; }

/* 확인 필요 */
.choice_huwrap { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.choice_hu { padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/*// 확인 필요 */

.regular_holiday { width:47%; }
.business_hours_wrap .scroll_list { top:42px; z-index:2; }
.plus_holidy { cursor: pointer; width:110px; }

.store_img_box { padding: 20px 20px 20px; margin-bottom: 10px; border-bottom: 4px solid var(--line); }
.store_img_box > p { font-size: 1.4rem; font-weight: 400; padding-bottom: 15px; }
.store_img_box > p:nth-child(2) { font-size:1.2rem; color:var(--fran_inactive); }
.store_img_box .store_container { overflow: auto; padding-bottom: 10px; }
.upload_img_bg .file::after { content: "+"; font-size: 20px; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #999; }
.upload_img_bg .file{display:block;  width: 100%;  max-width: 153px; height: 115px; border-radius:10px; border:1px dashed var(--fran_inactive); cursor:pointer; overflow:hidden; position:relative;}
.store_slide { width: max-content; min-width:100%;  display: flex;  overflow-x: auto; }
.store_slide li { margin-right: 5px; text-align: center; font-size: 18px; width: 100%; min-width: 153px; max-width: 153px; height: 115px; border-radius: 10px; overflow: hidden; position: relative;}
.store_slide li img { display: block;  width: 100%; height:100%; object-fit: cover; }
.store_slide .noset_img {height:60%; object-fit: contain; position: absolute; left:0; top:50%; transform: translateY(-50%);}
/*스크롤바의 색상*/
.store_container::-webkit-scrollbar { position: absolute; left: 0; top: 0; width: 100%; height: 5px; background-color: rgba(0,0,0,0.1);}
.store_container::-webkit-scrollbar-thumb { background-color: var(--fran); border-radius: 20px;  }
/*스크롤바 트랙 색상*/
.store_container::-webkit-scrollbar-track { background-color: transparent;  transition: 10s;}
.store_list_box { padding: 20px 0 ;margin:0 20px; border-bottom:1px solid var(--line); word-break: break-all;}
.store_sub { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.store_list_box span { font-size: 1.4rem; font-weight: 400;}
/* .store_list_box span.active { color: var(--black);} */
.store_list_box ul { display: flex; align-items: center; flex-wrap: wrap; }
.store_list_box ul li { padding: 10px; font-size: 1.4rem; font-weight: 500; color: var(--main); }
/* .store_list_box ul li::before { content: '# '; } */
.parking_btn { display: none; font-size:1.4rem; margin-right:15px; width: 94px; height: 35px; line-height: 35px; text-align: center; border:1px solid var(--fran_inactive); border-radius: 18px; color: var(--fran_inactive); }
.parking_btn.active { display: block; background: var(--main); color: #ffffff; border: none; }

/* change_franchise_edit */
.repre_img { display: none; position: absolute; top: 5px; left: 5px; width: 67px; height: 21px; line-height: 21px; font-size: 12px; font-weight: 500; text-align: center; background-color: var(--line); border-radius: 10px; }
.repre_img.active { display: block; }
.store_list input:focus { border-color: #4A9EFA; }
.store_list > div { margin-bottom: 8px; }
.store_list > div:last-child { margin: 0; }
.store_list { position: relative; padding: 16px 20px 20px; border-bottom:1px solid var(--line); }
.store_list input { font-size: 1.4rem; font-weight: 400; width: 100%; padding: 10px 70px 10px 10px; border-radius: 10px; border: 1px solid var(--fran_inactive); font-family: "noto_sans";}
.store_select > span { padding-left: 7px !important; }
.edit_sub { font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.edit_area_box { width: 100%; height: 180px; padding: 20px; border: 1px solid var(--fran_inactive); font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none; border-radius: 10px; }
.edit_area { width: 100%; height: 140px; border: none; font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none;}
.inquiry_txtarea::placeholder, .edit_txt::placeholder, .fran_edit_txt::placeholder, .store_list input::placeholder, .edit_area::placeholder { font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; color: var(--fran_inactive); }
.store_list textarea:focus { border-color: #4A9EFA; }
textarea { outline: none; }
.mail_txtLength_wrap, .txtLength_wrap , .area_textLengthWrap {  position: absolute; bottom: 33px; right: 40px; display: flex; flex-wrap:nowrap; -webkit-flex-wrap:nowrap; align-items: center; font-size: 12px; font-weight: 500; color: var(--dark); }
.mail_txt_count, .txt_count,.area_textCount { margin-right: 4px; min-width:30px; text-align: right;}
/* .txt_total,.area_textTotal {min-width:40px;} */
.tag_add { margin-left: 15px; min-width: 94px; height: 35px; font-size: 1.4rem; font-weight: 400; color: #ffffff; background-color: #4A9EFA; border-radius: 18px; }
.tag_add_input { width:100%; height: 35px; border:1px solid var(--fran_inactive); border-radius: 10px; text-indent:16px; }
.store_list > ul { margin: 16px 0 20px; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.hash_add { margin: 5px 4px;  height: 35px; padding: 8px 14px; background-color: #F7FCEF; display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; font-weight: 500; color: var(--main); border-radius: 18px; }
.hash_add img {margin-left:10px;}
.hash_add > a { height: 35px; line-height: 40px; }
.postcode_edit { width: calc(100% - 135px);}
.address_btn_edit { font-family: "noto_sans"; padding:8px 20px; margin-left:10px; border: 1px solid var(--fran_inactive); border-radius: 10px; font-size: 1.4rem; font-weight: 500; background-color: #fff; color: var(--fran_inactive); }
.catecory_sel { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--fran_inactive); }

/* store_image_create */
.rep_container { padding: 20px;}
.rep_container .rep_txt{ display: flex; align-items: baseline;}
.rep_container span { display: block; width: 10px; height: 100%; margin-right: 5px;}
.rep_container p { font-size: 12px; font-weight: 400; color: var(--sub); margin-top: 10px;}
.rep_img_box { position: relative; width: 100%; height: 0; padding-top: 75%; margin: 0 auto; overflow: hidden; border-radius: 10px; border: 1px dashed var(--fran_inactive);}
.rep_img_box img{ position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 100%; height: 100%; object-fit: cover;}
.rep_img_box > label { position:absolute; left: 0; top: 0; width:100%; height: 100%;}
.rep_img_box input { display: none;}

.img_add_box {border: 1px dashed var(--fran_inactive); }


.detail_img { display: flex; flex-wrap:wrap; justify-content: space-between; padding: 20px; }
.detail_img > li { position: relative; text-align: center; width: calc(100% / 2 - 10px); height: 0; padding-bottom: 37.5%; margin-bottom: 10px; overflow: hidden; border-radius: 10px; }
.detail_img > li img { width: 100%; height:100%; object-fit: cover; position: absolute; left:0; top:0; }
.detail_img .noset_img {height:50%; object-fit: contain; position: absolute; left:0; top:50%; transform: translateY(-50%);}
.create_img_close { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; z-index: 2; background-color: transparent; cursor:pointer; background: url(../img/contents/franchise/icon_img_close.svg)no-repeat;}
.detail_img > li label { position:absolute; left: 0; top: 0; width:100%; height: 100%;}
.detail_img > li input { display: none;}


/* 가맹점 - 메뉴관리 */
.group_menu_list { width:100%; padding: 0 20px; height: calc(100% - 69px);}
.group_menu_list > li {position:relative; padding: 20px 0; border-bottom: 1px solid var(--line);}
/* .group_menu_list > li:hover { background:var(--inactive); border-radius:5px;} */
.group_menu_list > li > div > p { font-size: 1.4rem; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: var(--fran_inactive); font-weight:400;}
.group_menu_txt { display:flex; justify-content:space-between; cursor:pointer; }
.menu_dot_box { position:absolute; top:50%; right: 0; transform: translateY(-50%);}
.main_group_box { position: relative; padding-bottom: 10px; }
.main_group_box p:first-child { font-size: 1.6rem; font-weight: 500;}
.main_group_sub {font-size:1.4rem; font-weight:400;}

.group_menu_modify { display: none; position: absolute; right:0; top: 20px; width:120px; background-color: var(--white); border: 1px solid var(--fran_inactive); z-index: 30;}
.group_menu_modify.active { display: block;}
.group_menu_modify li:hover { background-color: var(--main_sub); color: var(--white);}
.group_menu_modify li p { padding: 8px 15px; border-bottom: 1px solid var(--fran_inactive); font-size: 1.4rem; font-weight: 500;}
.group_menu_modify li p:last-child { border:none; }

.menu_null_txt > p {padding: 50px 20px; font-size: 1.6rem; color: var(--black); font-weight: 700; text-align: center; }
.fran_point_text { padding:0 20px; font-size: 1.4rem; font-weight: 500; color: var(--red);}
.bottom_fixed { position: fixed; bottom: 0; width: 100%; padding: 10px 20px; max-width: 768px;}

.menu_add_btn { width: 90px; font-size: 1.4rem; font-weight: 700; border-radius: 6px; padding: 6px; color: var(--fran); background: #E8EDFF; }
.dot_img_btn { width: 12px; height: 12px; z-index:20; transform: rotate(180deg);}
.dot_img_btn img { width: 100%; height: 100%;}

/* 원산지 표기 */
.origin_text_box { padding: 20px; word-break:break-all;}
.origin_text_box > p { font-size: 1.6rem; font-weight: 700; padding-bottom: 10px;}
.origin_txt{font-size: 1.4rem; font-weight: 400;}
.origin_hidden { width: 100%; max-height: 60px; overflow: hidden;}
.origin_active { display:flex; justify-content:center; padding: 10px 0; width:100%; transition: all 500ms;}
.origin_active.rotate { transform:rotate(180deg);}

/* 메뉴그룹 수정 */
.fran_check { margin: 7px 10px;}
.fran_check input[type="checkbox"] {  display: none;}
.fran_check input[type="checkbox"] {display: flex; justify-content: center; align-items: center; color: var(--fran_inactive); border-radius: 0; border:1px solid var(--fran_inactive); cursor: pointer;padding:0; width:15px; height:15px; font-size:1.4rem; font-weight: 400;}
.fran_check input[type="checkbox"]:checked { color: #fff; background: url("../img/icon/icon_chk.svg") no-repeat 0 50% / 13px 13px; }
.fran_menu_add { display: flex; justify-content: space-between; padding: 15px 0; width: 100%; border-bottom: 1px solid var(--line);}
.price_flex > div img, .fran_menu_add > div:last-child { min-width: 10px; height: 10px; margin: 7px 10px;}
.fran_menu_add > div:last-child img { width: 100%; height: 100%;}
/* textarea */
.fran_edit_txt_box { width: 100%; height: 80px; padding: 10px 10px 20px 10px; border: 1px solid var(--fran_inactive); font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none; border-radius: 10px; }
.fran_edit_txt { width: 100%; height: 50px; border: none; font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none;  }
.inquiry_txtarea_box { padding: 10px 10px 25px; width: 100%; height: 250px; border: 1px solid var(--fran_inactive); border-radius: 10px;}
.inquiry_txtarea { width: 100%; height: 100%; border:none; font-family: "noto_sans"; font-size: 1.4rem; font-weight: 400; resize: none;  border-radius: 10px; }
/* 메뉴 등록 */
.price_flex { display: flex; justify-content: center; align-items: center;}
.price_flex > p { font-size: 1.4rem; font-weight: 500;}

.label_file{display:block;}
.label_file input[type="file"]{display:none;}
.label_file .file{display:block; width:100px; height:100px; border-radius:10px; border:1px dashed var(--fran_inactive); cursor:pointer; overflow:hidden; position:relative;}
.label_file .file::after{content:"+"; font-size:20px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#999;}
.label_file .file img{width:100%; height:100%; object-fit:cover;}
.label_file .file.active::after{display:none;}
.register_menu_img { display:flex; align-items: flex-end;}
.register_menu_img > p { font-size: 1.2rem; color:var(--fran_inactive);}

/* 메뉴관리 내 상세메뉴 */
.menu_title_link{ display:flex; align-items: flex-end; padding: 20px 20px 0;}
.menu_title_link > p { font-size:1.6rem; font-weight:700; color:var(--fran); }

/* user - franchise 내 상세 메뉴 */
.fran_de_txt { font-size: 1.4rem; font-weight:400; color: var(--fran_inactive);}
.price_list { margin-top:20px; padding:20px; border-top:1px solid var(--line); }
.price_list > div { padding-bottom:10px; }
.price_list > div > p { font-size:1.6rem; font-weight:700; }
.price_list > ul > li { display:flex;  justify-content: space-between; align-items: center; padding:15px 0;}
.price_list > ul > li > p { font-size:1.4rem; font-weight: 400;}

/* add & edit button */
.edit_img, .add_img { position:absolute; left: 50%; top:50%; transform: translate(-50%, -50%); width:30px; height: 30px; cursor:pointer;}
.edit_img > img, .add_img > img { width: 100%; height: 100%; }

.fran_info_addr { font-size:1.4rem; font-weight:400; word-break: break-all;}

/* 230419 kms 로그인페이지 수정 */
.login_box {padding: 14vh 20px 20px; min-height: calc(100svh - 50px); width:100%; position: absolute; left: 50%; transform: translate(-50%);background-color: var(--white);}
.login_box > p { font-size: 32px; font-weight:700; text-align:center; color: var(--main);}

.login_form_box { width: 100%; margin-top: 40px; background-color: var(--white); overflow: hidden; }
.user_box, .password_box { position: relative; }
.user_id { width: 100%; height: 60px; padding-left: 18px; border: 1px solid var(--main); border-radius: 10px; margin-bottom: 15px; font-size: 1.5rem;outline: none; background-color: var(--white); }
.user_password { width: 100%; height: 60px; padding-left: 18px; box-sizing: border-box; border-radius: 10px;  background-color: transparent; border: 1px solid var(--main); font-size: 1.5rem; outline: none; }
.eye_svg { position: absolute; right: 20px; top: 18px; }

.easy_box { width: 98%; display: flex; justify-content: space-between; align-items: center; margin: 15px auto 0;}
.login_txt { color : var(--main); font-weight:400; font-size: 1.4rem; cursor:pointer;}

.line { position: relative; height: 1px; margin-top: 30px; border: 1px solid var(--main); }
.line_i { position: absolute; top: 50%; left: 50%; width: 50px; transform: translate(-50%, -50%); font-size: 1.2rem; color: var(--main); background-color: var(--white); text-align: center; }

.subtxt14 { font-size: 1.4rem; line-height: 2.4rem; font-weight: 400; color: var(--main);}
.subtxt14 + p { color : var(--main);}

/* 가맹점 미리보기 */
.preview_setting{ position:relative; }
.preview_setting > ul { position: absolute; top:40px; right:0; width:130px; background:var(--white);}
.preview_setting > ul > li { font-size: 1.6rem; font-weight: 500; border:1px solid var(--black); text-align:center; }
.preview_setting > ul > li > a { padding:10px 20px; display:block; width:100%; height:100%; }
.preview_setting > ul > li:last-child { border-top: none; }

/* 지도 */
/* #map { height:calc(100% - 245px);} */
.map_box {width:100%; height:100%; margin-top:20px;}
/* 회원가입 */
.pw_security { position:relative; }
.pw_security_txt { position: absolute; top:20px; right: 0; font-weight:500;}

/* 가맹점 첫 로그인시 비밀번호 변경페이지 */
.pw_comple_box > p:first-child { margin-top:14vh; font-size: 2.2rem; font-weight:700; text-align: center;}
.pw_comple_box > p:last-child { margin-top:20vh; font-size: 1.6rem; font-weight:500; text-align: center;}

/* usage_histoy 사용내역 */
.dset input { width: 110px; text-align: center; font-size:1.4rem; font-weight:500; padding: 8px; border: 1px solid var(--fran_inactive); border-radius: 10px; }
.demi { padding : 0 10px; }
.ellipsis_170 {word-break:break-all; cursor:pointer; width:170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.franchise_info_box { position:absolute; bottom:20px; width:calc(100% - 40px); }

/* QR 결제 */
.qr_img_box { padding-top:70px; text-align: center;}
.qr_img_box > h2 { font-size: 1.8rem; }
/* .qr_img { padding: 20px 0; } */
/* 230329 간격수정 */
.qr_img { padding: 0 0 10px; }
.qr_img img { margin:0 auto; width:180px; height:180px;}
/* .none_pay { width:100%; margin-top:50px; }
.none_pay > p { text-align: center; font-size: 1.4rem; font-weight: 500; text-decoration:underline; cursor: pointer;}
.none_pay_code > p { width: 180px; height: 40px; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--gray); background: var(--bg); color:var(--darkgray); font-size: 1.6rem; font-weight: 600; text-align: center;} */
/* .none_pay_code input { width: 200px; height: 40px; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--gray); font-size: 1.6rem; font-weight: 600; text-align: center;} */
/* .pay_code_input > input { width: 30%; height: 40px; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--gray); font-size: 1.6rem; font-weight: 600; text-align: center; } */

/*230328 QR결제 변경작업 : 신정운 */
.box_height.bg_black_j {background: #0E131B;}
header.bg_black_j {background: #0E131B; border-bottom:1px solid #1A222E;}
.header_list.bg_black_j {background: #0E131B; border-bottom:1px solid #1A222E;}
.header_list.bg_black_j .header_title {color:#fff;  }
.user_fran_list { width: 100%; height: 100%; padding: 0 20px; }
.tabs {display:flex; position:relative; padding:4px; width:100%; height:48px; text-align: center; background: #000; overflow: hidden; border-radius: 10px;}
.tabs .tab { display: flex; justify-content: center; align-items: center; width: 50%; height:100%; z-index: 2; cursor: pointer;}
.tabs .tab p { font-size: 1.8rem; font-weight: 500; color:var(--dark);}
.qrtab_j .active {background: #24272D; color:#fff; border-radius: 8px;}
.qrtab_j .tab.active p {color:#fff;}
.qrcode_jbox .history_viewbox {background: unset; padding:0;}
.qrcode_jbox {background: #fff; border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.6); width:calc(100% - 40px); margin:0 auto; padding:30px;}
.qrcode_jbox .qr_img_box {padding-top:0;}
.payment_usejtxt {font-size:16px; color:var(--dark); font-weight: 500;}
.num_tq_box_j {background: linear-gradient(to bottom right, #11B1F8, #1162F8); border-radius: 10px; padding:20px; aspect-ratio: 2 / 1; margin:0 auto; width:100%; max-width: 250px; height: 145px;}
.card_name img { width:30px; height:30px;}
.card_name p { font-size: 2rem; font-weight: 700; color: var(--white);}
.qr_myamount {font-size:1.4rem; font-weight: 500; color:#fff;}
.change_wj {font-size:2.6rem; font-weight: 600; word-break: break-all;}
.dan_j {font-size:1.8rem; font-weight: 700;}
.none_pay_j {margin-top:30px;}
.qrtimer_jbox .timer_txt  {color:var(--main);}
.underline_qr {text-decoration: underline;}
.num_tqj {margin-top:40px;}
.none_pay_code_j {background: #fff; border-radius: 10px; padding:20px 30px; width:calc(100% - 40px); margin:0 auto;}
.qrnotpay_codenum {background: var(--bg); border-radius: 10px; padding:14px 0; color:#000; font-size:1.8rem; font-weight: 700; font-family: "montserrat"; width:32%; text-align: center;}
.qrnotpay_codenumwrap {display:flex; align-items: center; justify-content: space-between;}
.paymentnumgo_j {display:flex; justify-content: space-between; align-items: center;}
.paymentnumgo_j_go {color:var(--dark); font-size:1.4rem;}
.main_tab_container_j {background: unset !important;}
.fran_payment_jwrap .history_viewbox {background: unset; padding:0;}
.fran_payment_jwrap {width:calc(100% - 40px); margin:0 auto; background: #fff; border-radius: 10px;}
.fran_payment_jwrap .fran_pay_title {padding:30px 0;}
.input_payment_j .position_txt { color:var(--main);  }
.fran_pay_info_txt_j {color:#fff;padding:0 20px; display:flex; margin-top:20px; justify-content: center;}
.fran_pay_info_txt_j img { flex:none; margin-right:5px; display: block;}
.fran_pay_info_txt_jtxt {font-size:1.4rem;}
.payamount_confirm_j {background: #fff; border-radius: 10px; width:calc(100% - 40px); margin:0 auto; padding:20px; text-align: center;}
.payamount_confirm_j .confirm_dan {color:var(--main);}
.payamount_confirm_j .seco_j {margin-top:15px;}
.confirm_qrscan_j {background: #1B2B48; margin-top:20px;}
.confirm_qrscan_j .scan_box {border-radius: 10px;}
.confirm_qrscan_j .qr_headertitle {height:auto !important}
.mypaymentamount_j {background: #fff;}
.userpaymnetnum_j {background: #fff; width:calc(100% - 40px); margin:20px auto 0; border-radius: 10px; padding:30px 20px; }
.userpaymnetnum_j .pay_code_input input { border:1px solid var(--gray); background:var(--lightgray); border-radius: 10px; height:50px; text-align: center; font-size:1.8rem; font-weight: 700; color:var(--black);   font-family: "montserrat"; width:32%;}
.userpaymnetnum_j .pay_code_input > input:focus { border: 1px solid var(--main); }
.userpaymnetnum_j .pay_code_input input::placeholder {font-size:1.8rem; font-weight: 700; color:var(--gray);   font-family: "montserrat";}
.userpaymnetnum_j .user_qr_pay {overflow: visible; margin-top:10px; border-radius: 10px;}
.userpaymnetnum_j .user_qr_pay button {border-radius: 10px;}
.sender_finbox_j {border-top:2px solid var(--black); border-bottom:2px solid var(--black);}
.sender_finbox_j .sender_finbox {border-top:none; border-bottom:none; margin-top:0;}
.sender_paymentamount_j {background: var(--lightgray); border-top:1px solid var(--gray); padding:20px;}
.sender_finbox_j .trading_day {padding:20px;}


@media (max-width:340px) {
  .qr_img img { margin:0 auto; width:150px; height:150px;}
  .change_wj {font-size:2rem;}
  .dan_j {font-size:1.4rem;}
  .num_tqj{margin-top: 30px;}
  .num_tq_box_j {height:130px;}
}

@media (max-width:300px) {
.qr_img img { margin:0 auto; width:140px; height:140px;}
  .change_wj {font-size:1.6rem;}
  .dan_j {font-size:1.2rem;}
  .num_tqj{margin-top: 20px;}
  .num_tq_box_j {height:100px;}
}

/* 내 지갑 */
.coin_container { width:100%; padding:10px 20px; border:1px solid var(--fran_inactive); border-radius: 10px;}
.logo_box > img { width: 30px;  border-radius: 5px; overflow: hidden;}
.wallet_title_box { position: relative; }
.balance_txt { padding: 10px 0;}
.balance_txt > p { font-size : 2rem; font-weight:700; word-break: break-all;}
.copy_btn { padding: 17px 0 0;}
.copy_btn > img { width: 20px; height:20px; }

/* 내 지갑 상세보기 */
.logo_detail_box > img { margin: 0 auto; width:70px; height:70px;  }
.abso_btn { position:absolute; top:20px; right:20px;}
.coin_wallet { padding-top:10px; display:flex; justify-content: space-between; align-items: flex-start;}
.coin_wallet > p { font-size: 1.2rem; font-weight:500; width: calc(100% - 50px); overflow-wrap: break-word;}
.coin_wallet > div > img { width: 20px; height:20px; }
.sender_amount > input { padding: 14px 70px 14px 20px; }
.sender_amount > input:focus { border: 1px solid var(--main); }
.sendwallet_infomation > p { padding-top:10px; font-size:1.2rem; text-align: right;}

/* TQ 구매하기 */
.purchase_tax > p { margin-bottom:10px; font-size: 1.6rem; font-weight: 700; }
.info_text { padding: 40px 20px 20px; }
.info_text > p { font-size:1.2rem; font-weight:700; color:var(--red);}
.deal_card { padding: 20px; border: 1px solid var(--line); border-radius: 10px; }
.deal_card_flex { display : flex; align-items: flex-start; justify-content: space-between;}
.deal_card_txt {font-weight: 700; width: 80px; }
.deal_card_hash { width: calc(100% - 90px); text-align: right;}
.deal_card_hash > a { width: 100%; word-break: break-all;}

/*고객 결제하기 */
.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; }
.payamount_confirmwrap .input_payment {padding:20px;}
.payamount_confirmwrap .input_paybox p { font-size:1.6rem; font-weight: 700;   font-family: "noto_sans";}
.payamount_confirmwrap .user_amount { position: relative; width: 100%; height: 50px; margin-top: 10px; border-radius: 10px; background-color: #FAFBFA; border: 1px solid var(--gray);  font-size: 1.6rem;  font-weight: 600;}
.payamount_confirmwrap .user_amount .input_basic {margin-top:0; border:unset;  background-color: unset; }
.payamount_confirmwrap .user_amount input::placeholder { font-size: 1.6rem; font-weight:500;}
.payamount_confirmwrap .user_amount > .position_txt {position:absolute; top:50%; right:20px; transform: translateY(-50%); font-size:1.6rem;    font-family: "montserrat"; font-weight:700; color:var(--fran);}
.payamount_confirmwrap .choice_num {width:96%;}
.payamount_confirmwrap > .user_bacode_pay {width:100%; border-radius:10px; margin-top:10px; overflow: hidden;}
.payamount_confirmwrap > .user_bacode_pay span {padding-left:40px;}
.payamount_confirmwrap > .user_bacode_pay button::before { top:50%; transform: translateY(-50%); position: absolute; content: ''; background: url('../../assets/img/icon/icon_QR.svg'); width:32px; height:32px; background-position: center; background-repeat: no-repeat;}
.payamount_confirmwrap > .user_bacode_pay button.key_active::before { background: url('../../assets/img/icon/icon_QR.svg'); background-repeat: no-repeat; }
.fran_pay_title { padding: 20px; }
/* .fran_pay_title > p { font-size: 2rem; font-weight:700; text-align: center;} */
/* 2023.03.29 수정 */
.fran_pay_title > p { font-size: 1.8rem; font-weight:700; text-align: center;}
.fran_pay_info_txt { font-size:1.3rem; font-weight: 500; text-align: center;}
.fran_pay_info_txt > p { padding-bottom:5px; }

/* 20230329 추가 */
.qr_input_payment { padding : 20px 20px 30px; }

/* 매출 / 정산 */
.sett_card { padding: 20px;  border:1px solid var(--fran_inactive); border-radius:10px; }
.sett_card > div:first-child { border-bottom: 2px solid var(--fran_inactive); }
.sales_status { font-size : 1.4rem; font-weight: 500; padding-top: 20px; }
.sales_status > div > p:first-child { padding-bottom:5px; }
.fran_dset > input { width:80px; text-align: center; font-size: 1.4rem; font-weight: 500; }
.modify_icon { background-color:rgba(0,0,0,0); padding:0;}
.sett_num { padding: 20px 0; font-size: 2.6rem; font-family: "montserrat"; font-weight: 600; text-align: center; }
.sett_num .dan { font-size: 1.8rem; font-family: "montserrat"; font-weight: 700; color: var(--main); }
/* 결제 취소 */
.history_info_txt { display:block; font-size:1.4rem; font-weight:500; text-align: center;color:var(--red);}

/* 정산요청 */
.fran_accumulate_info { background-color: var(--white); position: absolute; border: 1px solid var(--fran); color: var(--fran); padding: 10px; width: 300px; font-size: 1.2rem; font-weight:500; left: 50%; top: 25px; transform: translateX(-50%); z-index: -1; opacity: 0; transition: opacity 300ms linear, z-index 300ms linear; }
.fran_accumulate_info.active { opacity: 1; transition: opacity 300ms linear, z-index 300ms linear; }
.input_btn_label { width:calc(100% - 105px); }
.fran_won_txt { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 1.4rem; font-family: "montserrat"; font-weight: 700; color: var(--fran); }
.fran_sett_won { padding: 20px; }
.fran_sett_won input { font-size: 1.4rem; font-weight: 400; width: 100%; padding: 10px 70px 10px 10px; border-radius: 10px; border: 1px solid var(--fran_inactive); }

/* loading */
.loading_box { position: fixed; top:0; left:0;  width: 100%; height: 100%;  z-index: 10000;  background-color: rgba(255,255,255,1); }
.loading_bg { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; z-index: 9920; overflow: hidden; }
.loading_bg img { background-origin: border-box; background-clip: content-box, border-box; width:50px; height: 50px; animation: spin 1s linear infinite;}


/* ATM 출금 */
.withdraw_box > p { font-size:1.2rem; text-align: left;}
.withdraw_container { position: relative; width:100%; padding:40px; border:1px solid var(--fran_inactive); border-radius: 10px;}
.atm_title_box { position: absolute; top: 15px; right: 15px; }
.atm_title_box > p { width:45px; }
.withdraw_time > div { font-size:1.6rem; font-weight: 500;}
.atm_input > input { padding: 14px 70px 14px 20px; margin:0; height: 45px;}

/* 계좌 출금 */
.account_with_box { background-color: var(--lightgray); padding: 0 20px 20px; }
.account_with_btn { padding: 5px 10px; border-radius: 5px; font-weight: 500; background: var(--main); color: var(--white); }
.sender_amount select { width: 100%;
    height: 50px;
    padding: 14px 20px 14px 20px;
    border-radius: 10px;
    border: 1px solid var(--gray);
    font-size: 1.6rem;
    font-weight: 600; outline: none;  background: #FBFBFB;}
.sender_amount select option[value="all"][disabled] {
    	color:var(--gray); font-size:1.4rem; font-weight: 400;
      display: none;
    }
    .account_amount input {    width: 100%;
    height: 50px;
    padding: 14px 20px 14px 20px;
    border-radius: 10px;
    border: 1px solid var(--gray);
    font-size: 1.6rem;
    font-weight: 600;
  background: #FBFBFB;}

  .account_amount input:focus { border:1px solid var(--main);}

/* 영업 가맹점 관리 */
.salse_listw { padding:10px 20px; border-bottom: 1px solid var(--line); cursor: pointer;}
.salse_listw:hover { background: var(--bg);}
.salse_list { width: 100%; padding: 20px 0; }
.salse_txt_list { position: relative; width: calc(100% - 140px); }
.salse_fran_list > img { transform: rotate(180deg);}
.salse_txt_list p:first-child { font-size: 1.6rem; font-weight: 700; }
.salse_txt_list p { font-size: 1.3rem; font-weight: 400; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.salse_txt { font-size:1.6rem; font-weight: 500; }

/* 영업 정산 수당 내역 */
.settl_input { width:calc(100% - 50px); border:1px solid var(--fran_inactive); padding:10px; border-radius:10px; }
.settl_input input { width: 100%; }
.settl_btn { flex:none; padding:10px; border-radius: 10px; font-weight: 700; background: #E6F0FE; color: var(--main); }
.settl_width { width: calc(100% - 150px); }
.sales_pd { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; }

@keyframes spin {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(360deg); }
 }

/* select */
select option[value=""][disabled] {
	display: none;
}

/*230208 신규 클래스 작업 : ATM 출금 : 신정운 */
.fees_box { display:flex; justify-content: space-between; align-items: center;}
.fees_box p { font-size: 1.6rem; font-weight: 700;}
.fees_box p:nth-child(2) { font-size: 1.6rem; font-weight: 500;}
.withdraw_requ {font-size:1.6rem;font-weight: 700;}
.withdraw_fee, .withdraw_total {font-size:1.4rem; font-weight: 500;}
.withdraw_info {text-align: center; font-size:1.3rem; font-weight: 400; padding-bottom:10px;}

.fran_num_tq { padding:30px 0 0; font-size:2.6rem; font-family: "montserrat"; font-weight: 600; text-align: center; }
.fran_dan { font-size:1.8rem; font-family: "montserrat"; font-weight: 700; color:var(--main); }
.fran_total_sisa { font-size:1.4rem; color:var(--dark); font-weight: 500; display: flex; width:100%; word-break: break-all;}
.fran_avg_sisa { font-size:1.2rem; color:var(--dark); margin-top:6px; font-weight: 400; }
.fran_usage_history { background: var(--fran); border-radius: 16px; color:#fff; padding:6px 16px; font-size:1.4rem; font-weight: 500; }
.withdraw_bank {text-align: center; font-size:1.4rem; font-weight: 400; padding-bottom:30px;}
.usage_history { display: block; width:90px; background: #E6F0FE; border-radius: 16px; color: var(--main); padding: 6px 16px; font-size: 1.4rem; font-weight: 500;}

.map_splach {width: 100%; height: 100%; z-index: 99; position: absolute;background-color:white;}
.informap_view {position: absolute; z-index:4; width:100%; height:150px; left:50%; bottom:66px; transform: translateX(-50%); max-width:768px;}
.listmap_fran {position: absolute; width:100%; padding: 0 10px;  background:#fff;}
.month_box {text-align: center; width:100%; margin:0 auto;}
.month_box input {font-size: 1.4rem;font-weight: 500; height:40px; padding: 8px; font-family: "montserrat"; border: 1px solid var(--fran_inactive); border-radius: 10px; text-align: center; background: #fff;   position: relative; width:100%; max-width:200px;}
.totla_calce .alert_btn > p:first-child {  width:auto;}

.total_calcinfo { background-color: var(--white); position: absolute; border: 1px solid var(--fran); color: var(--fran); padding: 10px; width: 210px; font-size: 1.2rem; font-weight: 500; right: 60px; top: 10px; z-index: -1; opacity: 0; transition: opacity 300ms linear, z-index 300ms linear;}
.total_calcinfo.active {opacity:1; transition: opacity 300ms linear, z-index 300ms linear;}
.day_settle {border-right:1px solid #ededed; flex:none;}
.day_settle p {width:50px;  padding:20px 0 ;}
.wallet_box {  padding:6px 20px;}
.wallet_height { height:auto;}
.wallet_totalwrap {width: 100%; max-width: 768px;height: 100%; margin: 60px auto 8px;}

.over_auto::-webkit-scrollbar { display:none; }
.over_auto::-webkit-scrollbar-track { display:none; }
.over_auto::-webkit-scrollbar-thumb { display:none; }
.tq_walletbox {padding:15px 20px}
.change_w {word-break: break-all;}
.dis_j {display:inherit !important;}
.day_sales_settle { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px; background: var(--white);}

.store_select_box { width: 100%; height: 40px; }
.store_select_box .scroll_list { display: none; padding: 15px; position: absolute; top: 40px; width: 100%; border: solid 1px var(--fran_inactive); background-color: #ffffff; z-index: 2; }
.classification { font-size: 1.4rem; font-weight:400;}
.wallet_detail_btn { padding: 20px;}

/* GIFT */
.gift_container { position:relative; width:100%; padding: 0px 20px 20px; margin:0 auto; background: white; border-radius: 8px; overflow: hidden; }
/* .gift_container { width: 100%; min-height: 100vh; min-height: 100svh; } */
.gift_info_b { display: flex; align-items: center; background: url(../img/contents/gift/info01.png) top no-repeat; background-size: contain;  width:100%; height:100%; aspect-ratio:4/1; }
.gift_info_c { display: flex; align-items: center; background: url(../img/contents/gift/info02.png) top no-repeat; background-size: contain;  width:100%; height:100%; aspect-ratio:4/1; }
.gift_info_s { display: flex; align-items: center; background: url(../img/contents/gift/info02.png) top no-repeat; background-size: contain;  width:100%; height:100%; aspect-ratio:4/1; }
/* .gift_info span { font-size: 15px;color:#fff;background-color:#000;display:inline-block;width:35px;height:35px;border-radius:10px;font-weight: 700;line-height: 35px;text-align: center; } */
/* .gift_info img { width: 40px; height:40px; object-fit: cover; border:1px solid var(--line); border-radius: 10px;} */
.gift_info_b > p,.gift_info_c > p, .gift_info_s > p { padding:0 20px;  margin-left:10px; font-size: 3.2rem; font-weight: 400; }
.gift_icon_box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width:100%; }
.gift_icon_box > li { width: calc(100% / 4); text-align: center; }
.gift_box { padding: 20px 0; }
.gift_box > p { font-size: 1.4rem; margin-top: 5px; font-weight: 700; }
/* .gift_icon { margin:0 auto; max-width: 90px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border:1px solid var(--line);} */
/* .gift_icon img{ width:100%; height:100%; object-fit: cover;} */
.banner_container {width: 100%; height:100%; aspect-ratio: 4 / 1; }
.banner_container img { width: 100%; object-fit: contain; }
.category_list { }
/* 배너 이미지 슬라이드 신규*/
.menu_container { position:relative; width: calc(100% - 40px); padding: 0 0 20px; margin:0 auto; background: white; border-radius: 8px; overflow: hidden; }
.gift_wrap {   height: auto; }
.gift_wrap > div { width: 100%;font-size: 18px; font-weight: 700; }
.gift_wrap .swiper-pagination { bottom: 5px; }
.gift_icon { width: 100px; height: 100px; line-height:48px; border: 1px solid var(--line); border-radius:13px; margin:0 auto; overflow: hidden;}
.gift_icon img { width:100%; height:100%; object-fit: cover;}
.gift_wrap > div > img { transition: all 500ms; }
.gift_wrap > div.active > img { transform:rotate(-180deg); }
.gift_wrap .scroll_box { overflow-y:auto; height: 200px; margin:15px 0 }
.gift_wrap .scroll_box li { position:relative; width:100%; height:45px; line-height:45px; font-size: 1.4rem; }
.gift_wrap .scroll_box li:first-child { font-size: 1.4rem; font-weight:700; }
.gift_wrap .scroll_box li a { position:absolute; top:0; left:0; width:100%; padding:0 20px;}
.gift_wrap .scroll_box li:hover { background-color: var(--line);}
/* //배너 이미지 슬라이드 */

/* 선불카드 임시영역 */
.gift_card_list {   display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; }
.gift_card_list > li { width: 100%; text-align: center; padding: 10px 5px; margin: 10px 0;  border:1px solid var(--line); border-radius: 20px; font-size: 1.4rem; font-weight: 700;}
/*// 선불카드 임시영역 */

/* GIFT_Category : 230322 */
.gift_title_container { padding: 0 20px;  width:100%; height:60px; display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid var(--line); }
.gift_icon_title { display: flex; align-items: center; width:100%; height:100%; }
.gift_icon_title > div { width: 48px; height:48px; border:1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gift_icon_title > div > img { width:100%; height:100%; object-fit: cover;}
.gift_icon_title > p { font-size: 1.6rem; font-weight: 500; }
/* select box */
.gift_select { position: relative; width: 100%; display: flex; justify-content: flex-end; }
.gift_select select { margin-right: 10px; padding: 10px; text-align-last: right; border: none; font-size: 1.4rem; font-weight: 700; outline: none; -webkit-appearance:none; /* 크롬 화살표 없애기 */ -moz-appearance:none; /* 파이어폭스 화살표 없애기 */ appearance:none; color: var(--dark); }
.gift_select option { color: var(--black); font-family: "noto_sans"; font-size: 1.4rem; }
.gift_select_icon { position:absolute; right:0px; top:50%; transform:translateY(-50%); }

.gift_category_list { padding: 0 14px 20px;  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 15px; }
.gift_category_list > li { width:100%; height: 100%; }
.gift_category_list .gift_img { margin-bottom: 8px; border:1px solid var(--line); aspect-ratio: auto 1 / 1; }
.gift_category_list .gift_img img { width: 100%; height: 100%; object-fit: cover; }
.gift_product_info { display: flex; flex-direction: column; justify-content: space-between; width:100%; height:80px; font-size: 1.4rem; font-weight: 400;}
.gift_product_info > div:first-child > p:first-child { color:var(--dark); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.gift_product_info > div:first-child > p:last-child {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; line-height: 1.3;}
.gift_product_info > p { font-size:1.6rem; word-break: break-all;}

/* GIFT_Detail */
.gift_detail_img { aspect-ratio: auto 1 / 1; overflow: hidden;}
.gift_detail_img img { width: 100%; height:100%; object-fit: cover; }
.gift_detail_title { width:100%; height:100%; min-height:170px; display:flex; justify-content: space-between; flex-direction: column; }
.gift_detail_title > div:first-child > p:first-child { color:var(--dark); font-size: 1.4rem; word-break: break-all;}
.gift_detail_title > div:first-child > p:last-child { font-size: 2rem; font-weight: 500; word-break: break-all;}
.gift_detail_title .product_num { width: 116px; display: flex; justify-content: space-between; align-items: center; border:1px solid var(--line);}
.gift_detail_title .product_num button { display: flex; justify-content: center; align-items: center; width:36px; height: 36px; background-color: #fff; text-align: center;}
.gift_detail_title .product_num button:first-child { border-right:1px solid var(--line);}
.gift_detail_title .product_num button:last-child { border-left:1px solid var(--line);}
.gift_detail_title .product_num input { width: 46px; height: 36px; line-height: 36px; text-align: center; font-size: 1.6rem; font-weight: 700; }
/* gift tab */
.gift_tab { width: 50%; height:50px; line-height: 50px; text-align: center; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 1.6rem; font-weight: 500; color: var(--darkgray); }
.gift_tab p { width:max-content; margin:0 auto; height:calc(100% + 1px); font-size: 1.6rem; font-weight: 500; }
.gift_tab .g_active { border-bottom: 2px solid var(--main); color: var(--main); }

.gift_detail_pro_info { width: 100%; }
.gift_detail_pro_info > .pro_info_one,.gift_detail_pro_info > .gift_use_info { padding:20px; }
.gift_detail_pro_info > .pro_info_one > p, .gift_detail_pro_info > .gift_use_info > p { line-height: 1.6; }

.gift_detail_more_info { width:100%;}
/* accor_tit */
.gift_accor_tit {cursor: pointer; font-weight: 400; background-color: var(--outside); height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);}
.gift_accor_tit > span { font-size : 1.6rem; }
.gift_accor_tit.active .arrow {transform: rotate(180deg);}
.gift_accor_tit.active+.gift_accor_cont {display: block;}
.gift_accor_cont { display: none; padding: 20px; background-color: var(--lightgray); border-bottom: 1px solid var(--line);}
.gift_accor_title { font-size: 1.4rem; font-weight: 700; word-break: keep-all;}
.gift_accor_sub_title { font-size: 1.4rem; font-weight: 400; word-break: keep-all;}

/* GIFT_total_tab */
.gift_go_tab_box { position:sticky;  position: -webkit-sticky; top:50px; z-index: 33; background: var(--white);}
.gift_go_tab { width: 100%; height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 1.6rem; font-weight: 500; color: var(--darkgray); }
.gift_go_tab p { width:max-content; margin:0 auto; height:calc(100% + 1px); font-size: 1.6rem; font-weight: 500; }
.gift_go_tab .g_active { border-bottom: 2px solid var(--main); color: var(--main); }

/* GIFT_ POPULA_GIFTS */
.popular_gifts { padding:20px; }
.popular_list > div > div { width: 100%; height: 229px; background: pink;}
.popular_list { overflow: hidden;}

.popular_list .popular_gift_img { margin-bottom: 8px; border:1px solid var(--line); aspect-ratio: auto 1 / 1; }
.popular_list .popular_gift_img img { width: 100%; height: 100%; object-fit: cover; }
.popular_list .gift_popular_info { display: flex; flex-direction: column; justify-content: space-between; width:100%; height:80px; font-size: 1.4rem; font-weight: 400;}
.popular_list .gift_popular_info > div > p:first-child { color:var(--dark); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.popular_list .gift_popular_info > div > p:last-child {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.popular_list .gift_popular_info > p { font-size:1.6rem; }

/* 230327 GIFT PRODUCT_BUY */
.gift_buy_item, .gift_buy_send { padding: 20px; }
.gift_buy_item img { width: 80px; height:80px; }
.gift_buy_send button { width: 100%; height:50px; border-radius: 10px; overflow: hidden; background: var(--inactive);}
.gift_buy_send button.active { background: var(--main); color:var(--white); }
.gift_buy_button p { font-size: 1.6rem; font-weight: 500; line-height: 1.6;}
.text_error { display: block; font-size: 1.2rem; font-weight: 400; margin-top: 10px; color: red;}

/* 받는사람 아이디 클릭시 추가되는 div */
.gift_num_box > div { width: 100%; }
.gift_num_box > div > div:first-child { width: 35%; }
.gift_num_box > div > div:last-child { width: 65%; }

/* GIFT INPUT 추가 */
.gift_name_input {position: relative;}
.gift_name_input .input_basic {margin-top:0;}
.gift_name_input > input { padding: 14px 20px 14px 20px; font-size: 1.6rem; font-weight: 500; }
.gift_name_input > input:focus { border: 1px solid var(--main); }
.gift_name_input input::placeholder { font-size: 1.4rem; font-weight:500; text-align: left;}

.gift_phone_input {position: relative; width:100%;}
.gift_phone_input .input_basic {margin-top:0;}
.gift_phone_input > input { padding: 14px 20px 14px 20px; font-size: 1.6rem; font-weight: 500; }
.gift_phone_input > input:focus { border: 1px solid var(--main); }
.gift_phone_input input::placeholder { font-size: 1.4rem; font-weight:500; text-align: left;}

/* GIFT MESSAGES */
/* GIFT TEXTAREA 추가 */
.gift_buy_messages { padding: 20px 20px 10px; }
.gift_area_box { width: 100%; height: 100px; padding: 15px 20px 40px; border: 1px solid var(--gray); font-family: "noto_sans"; font-size: 1.4rem; font-weight: 500; resize: none; border-radius: 10px; background: var(--lightgray);}
.gift_area { width: 100%; height: 100%; border: none; font-family: "noto_sans"; font-size: 1.6rem; font-weight: 500; resize: none; background: var(--lightgray); }
.gift_area::placeholder { font-family: "noto_sans"; font-size: 1.4rem; font-weight: 500; color: var(--gray); }

.gift_id_box { position: relative; }
.gift_search_input > button { width: 24px; height: 24px; background: none; position: absolute; top: 60%; right: 10px; transform: translate(-10px,-50%); }
.gift_product_box { position:absolute; top:60px; width: 100%; margin-top:10px; padding: 14px 20px; border-radius: 10px; background: var(--lightgray); border:1px solid var(--gray); z-index: 55;}
.gift_product_list { height:132px; overflow-y:scroll;}
.gift_product_list > li { padding:5px 0; cursor: pointer;}

.receive_user { padding: 10px 20px; }
.gift_search_input input:focus { border: 1px solid var(--main); }

/* 2023.03.31 GIFT_PRODUCT_PAYMENT */
.gift_payment_check { padding: 10px 20px; }
.gift_send_user_list > li { font-size: 1.6rem; font-weight: 500; font-family: "montserrat"; padding: 10px 0; }
.gift_send_user_list > li:first-child { padding: 0 0 10px; }
.gift_send_user_list > li:last-child { padding: 10px 0 0; }
.gift_send_user_list > li::before { content: '•'; margin-right: 5px; }
.gift_send_phone_list > li { font-size: 1.6rem; font-weight: 500; padding: 10px 0; }
.gift_send_phone_list > li:first-child { padding: 0 0 10px; }
.gift_send_phone_list > li:last-child { padding: 10px 0 0; }
.gift_send_phone_list > li::before { content: '•'; margin-right: 5px; }
.gift_payment_total { padding: 20px; border:1px solid var(--main); border-radius: 10px; background: var(--main_sub);}

/* 결제조건 확인 230419 kms 수정 */
/* .gift_pay_chk input[type="checkbox"] { display: none; } */
.gift_pay_chk p { font-size: 1.4rem; font-weight: 500; background: url(../img/layout/svg/icon_check_on.svg) no-repeat 0 0 / 20px 20px;  padding-left: 25px; }
/* .gift_pay_chk input[type="checkbox"]:checked + label { background: url(../img/layout/svg/icon_check_on.svg) no-repeat 0 0 / 20px 20px; cursor: pointer; } */

/* 230331 kms 선물하기 */
.gift_comp_bg_box { display: flex; align-items: center; justify-content: center; flex-direction: column; background: url(../img/contents/gift/bg_gift_comp.png) no-repeat; background-size: contain; aspect-ratio: 7 / 3;}
.gift_comp_box { padding: 30px 40px; margin: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--white); border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.06);}
.gift_comp_box img { width: 166px; height: 166px; }


/* 23.04.04 GIFTBOX_AVAILABLE */
.gift_available_width { max-width: 375px; margin:0 auto;}
.gift_comp_bg_box { display: flex; align-items: center; justify-content: center; flex-direction: column; background: url(../img/contents/gift/bg_gift_comp.png) no-repeat; background-size: contain; aspect-ratio: 7 / 3;}
.giftbox_comp_box { padding: 30px 40px; margin: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--white); border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.06);}
.giftbox_comp_box img { width: 166px; height: 166px; }

/* 230419 kms GIFTBOX_AVAILABLE 사용완료 수정 */
.giftbox_comp_box .gift_img {position: relative; margin-bottom: 8px; border: 1px solid var(--line); aspect-ratio: 1/1;}
.giftbox_comp_box .used_up_bg {display: flex;justify-content: center; align-items: center; position: absolute; left: 0; top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);}
.giftbox_comp_box .used_up_bg p {font-size: 1.4rem; font-weight: 700;color: #fff;}

.giftbox_top_count { display: flex; align-items: center; background: url(../img/contents/gift/giftbox_ava_bg.png) top no-repeat; background-size: cover;  width:100%; height:100%; aspect-ratio:4/1; }
.giftbox_top_count > p { padding:0 20px;  margin-left:10px; font-size: 3.2rem; font-weight: 400; }

.giftbox_product_list { padding: 0 14px 20px;  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 15px; }
.giftbox_product_list > li { width:100%; height: 100%; }
.giftbox_product_list .gift_img { position: relative; margin-bottom: 8px; border:1px solid var(--line); aspect-ratio: auto 1 / 1; }
.giftbox_product_list .gift_img > p { padding:4px 10px; position: absolute; left:10px; top:10px; background: #222222; font-family: "montserrat"; font-weight: 600; font-size: 1.2rem; color: var(--white); border-radius: 5px; }
.giftbox_product_list .gift_img .used_up_bg { display: flex; justify-content: center; align-items: center; position:absolute; left: 0; top: 0; width: 100%; height:100%; background: rgba(0,0,0,0.3);}
.giftbox_product_list .gift_img .used_up_bg p { font-size: 1.4rem; font-weight: 700; color:var(--white); }
.giftbox_product_list .gift_img img { width: 100%; height: 100%; object-fit: cover; }

.giftbox_product_info { display: flex; flex-direction: column; justify-content: space-between; width:100%; min-height:100px; font-size: 1.4rem; font-weight: 400;}
.giftbox_product_info > div:last-child > p { word-break: break-all; }
.giftbox_product_info > div:first-child > p:first-child { color:var(--dark); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.giftbox_product_info > div:first-child > p:last-child {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.gift_barcode { margin-top:20px; width: 100%; max-width: 255px; height: 60px;}
.gift_barcode img { width:100%; height: 100%; object-fit: contain;}
.gift_copycode_box img { width:20px; height:20px; object-fit: contain;}

.giftbox_messages { padding: 20px; }
.giftbox_messages > p { font-size: 16px; font-weight: 700; }
.giftbox_messages .giftbox_messages_card { padding:20px; background: var(--white); border-radius: 10px;  box-shadow: 0px 3px 15px rgba(0,0,0,0.06);}

.gift_copy_box { opacity: 0; transition:2s; position:fixed; bottom:40px; left:50%; transform: translateX(-50%); display: flex; justify-content: flex-start; align-items: center; padding: 15px 20px; width: 100%; max-width: 335px; background: var(--main_sub); border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.06);}
.gift_copy_box.active { opacity: 1; }

/* 23.04.20 GIFT_HISTORY */
.gift_history_null { padding: 60px 0 0; text-align: center; width:100%; height: 100%; min-height: calc(100vh - 50px); min-height: calc(100svh - 50px); background: var(--white); }
.gift_history_null img { margin : 0 auto; width: 83px; height:100px; }
.gift_history_null button { padding: 14px 50px; background: var(--main); color:var(--white); border-radius: 10px; font-size: 1.6rem; font-weight: 700; }
.gift_date_check_box { width:100%; height:50px; }
.gift_date_check { display: flex; justify-content: flex-start; align-items: center; width:100%; max-width: 768px; border-bottom: 1px solid var(--line); padding: 7px 20px; background: var(--white); }
.gift_date_check > p { margin-right: 10px; }
.gift_date_check .gift_dset { position: relative; }
.gift_date_check .gift_dset input { cursor: pointer; width: 125px;  text-align: center; background: var(--inactive); font-size: 1.4rem; font-weight: 500; padding: 9px 34px 9px 10px; border-radius: 10px; border:none; font-weight: 600; }
.gift_date_check .gift_demi { font-weight: 700; font-size: 1.4rem; margin: 0 5px; }
.gift_cal { cursor: pointer; position:absolute; right: 10px; top:50%; transform: translateY(-50%);}
.gift_history_cardbox { padding: 20px 20px 10px; min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); height: auto; background: var(--bg); }
.gift_history_date > p { margin-bottom: 12px; font-size: 1.6rem;  }
.gift_history_card { width: 100%; height: 100%; margin:0 auto; background: var(--white); border-radius: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.06); margin-top: 8px;}
.gift_history_card:first-child { margin-top: 0;}
.gift_history_card:last-child { margin-bottom: 20px;}

/* 23.04.21 GIFT_HISTORY_DETAIL */
.gift_detail_cardbox { min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); height: auto; background: var(--bg); }
.gift_detail_container { position: relative; width: 100%; margin: 10px auto 0; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0px 3px 15px rgba(0,0,0,0.06); }
.gift_detail_acc_txt { width: 100%; cursor: pointer; position: relative; padding: 18px 20px; border-bottom: 1px solid var(--line); background-color: var(--white); }
.gift_detail_acc_txt:after { background-position: center; background-image: url(../img/icon/icon_arrow_down.svg); background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; content: ""; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.gift_detail_acc_txt.active:after { background-image: url(../../assets/img/icon/icon_arrow_up.svg); content: ""; }

.gift_checkbox input[type="checkbox"] {display: flex; justify-content: center; align-items: center; border-radius: 4px; border:2px solid var(--gray); cursor: pointer;padding:0; width:18px; height:18px; background: var(--white);}
.gift_checkbox input[type="checkbox"]:disabled { background: var(--inactive); border:none; }
.gift_checkbox input[type="checkbox"]:checked { color: #fff; background: url("../img/icon/icon_chk_white.svg") no-repeat 50% 50% / 12px 12px; background-color: var(--main); border:none;}

.gift_cancel_btn { background: var(--inactive); width:100%; height: 40px; line-height: 40px; text-align: center; border-radius: 10px; font-size: 1.6rem; font-weight: 500; font-family: 'noto_sans'; }
.gift_small_btn { background: var(--main_sub); padding:10px 15px; width:max-content; height: 40px; text-align: center; border-radius: 10px; font-size: 1.4rem; font-weight: 500; font-family: 'noto_sans'; color:var(--main);}

.gift_history_detail_date { margin-bottom: 20px; }
.gift_history_detail_date:last-child { margin-bottom: 0; }
.gift_detail_messages { background-color:var(--white); }
.gift_detail_messages .gift_payment_check { min-height:100px; }
.gift_detail_acc_btn { position: absolute; width: 55px; height: 55px; right: 0; z-index: 33;}
.gift_detail_acc { border-top: 1px solid var(--line); }
.gift_detail_acc:first-of-type { border : none; }
/* 이용가이드 */
.guide_tab_container { width:100%; height: 64px; }
.guide_tab_box { position:fixed; width:100%; max-width: 768px; background: var(--white); z-index:33; }
.guide_tab { width:100%; text-align: center; padding:24px 0 14px; border-bottom:2px solid var(--line); cursor:pointer; font-size: 1.6rem; font-weight: 500; color:var(--darkgray); }
.g_active { border-bottom:2px solid var(--main); color:var(--main); font-weight:800; }
/* tab_btn */
.tab_btn {background-color: var(--outside); padding: 13px 0; font-size: 1.6rem; font-weight: 800; cursor: pointer; display: block; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.tabbox li:last-child .tab_btn {border-right: none;}
.tab_btn.on {background-color: var(--dark); color: var(--on); border-right: none;}

/* tab_cont */
.tab_cont {position: absolute; top: 100%; left: 0; width: 100%; display: none;}
/* accor_tit */
.accor_tit {cursor: pointer; font-weight: 800; background-color: var(--outside); height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);}
.accor_tit > span { font-size : 1.6rem; }
.accor_tit.active .arrow {transform: rotate(180deg);}
.accor_tit.active+.accor_cont {display: block;}
/* accor_cont */
.accor_cont {display: none; padding: 20px; background-color: var(--inside); border-bottom: 1px solid var(--line);}
.img { position: relative; width: 100%; max-width: 500px; margin:20px auto;  background-color: lightgrey; display: block; border: 1px solid var(--line);}
.img > p { position: absolute; left: -10px; top: -10px; width: 30px; height: 30px; line-height: 30px; font-size: 1.4rem; font-weight: 700; text-align: center; background: red; border-radius: 50%; color: var(--white);}
.img video, .img img {width: 100%; height: 100%; display: block;}

.accor_title { font-size: 2rem; font-weight: 700; }
.accor_sub_title { font-size: 1.8rem; font-weight: 500; }
.accor_txt { font-size: 1.6rem; font-weight: 400; word-break: keep-all;}
.guide_link_txt { font-size: 1.6rem; font-weight: 500; color:var(--main);}

/* 기본사이즈 INPUT 추가 */
.normal_input {position: relative;}
.normal_input .input_basic {margin-top:0;}
.normal_input > input  { font-family: "noto_sans"; padding: 14px 20px 14px 20px; font-size: 1.6rem; font-weight: 500; }
.normal_input > input:focus { border: 1px solid var(--main); }
.normal_input input::placeholder { font-size: 1.4rem; font-weight:500; text-align: left;}

/* 계좌 충전하기 */
.charge_txt { padding: 30px 20px; }
.account_btn {font-family: "noto_sans";  width:calc(100% - 80px); height:50px; background:var(--inactive); color:var(--black); font-size:1.6rem; font-weight: 500; border-radius: 10px; padding:14px 0; }
.account_charge_bank_info { border: 1px solid var(--line); margin: 0 20px; padding: 10px 20px; border-radius: 10px; }
/* .account_charge_bank_info button { background: transparent; } */
.account_charge_bank_info button img { width: 20px; height:20px; }

.tq_charge_deposit .tq_send_info_txt_red {padding: 0;}
.tq_charge_info_box {padding: 22px 20px; background-color: var(--lightgray); border-radius: 10px;}
.tq_charge_info_box li {margin-bottom: 12px;}
.tq_charge_info_box li:last-child {margin: 0;}
.tq_send_info_txt_red > p { font-size: 1.4rem; line-height: 2; font-weight: 400; color:var(--red); }


/* 230411 추천하기 추가 */
.referral_tit { padding: 30px 20px 0; text-align: center;}
.referral_tit p:first-child { font-size: 3.8rem; line-height: 1.3;}
.referral_tit p:last-child { font-size: 1.6rem; }

.referral_box { position: relative; padding: 0 20px 20px; }
.referral_box img { width:100%; max-width: 620px; height:100%; max-height: 430px; object-fit: contain; aspect-ratio: 6 / 5; margin: auto;}
/* .referral_box button { background-color: var(--black);} */

.referral_box_card { margin:20px 20px 0; padding: 14px 20px; background: var(--white); border-radius: 10px; }
.referral_info li { display: flex; align-items: stretch; }
.referral_num { display: block; width: 21px; height: 21px; display: flex; justify-content: center; align-items: center; background: #89949C; font-size: 1.2rem; font-weight: 600; font-family: "montserrat"; border-radius: 50%; color:var(--white); }
.referral_info li { font-size: 1.4rem; font-weight: 500; }

.referral_fri_card { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--white); border-radius: 10px; width: calc(100% - 40px); margin: 10px auto 0;}

/* 230420 친구초대 추가 kms */
/* .referral_receive_section_top {background-color: #C5D6F4;} */
.referral_receive_section {background-color: #EBF3FE; padding: 42px 20px 50px;}

.referral_receive_img img {width: 100%; max-width: 370px; margin:0 auto;}
.referral_receive_card {text-align: center; background-color: var(--lightgray); padding: 14px 20px 20px; border-radius: 10px;}
.referral_receive_card p:last-child {line-height: 1.7;}

.referral_receive_col {margin-top: 28px; display: flex; gap: 10px;}
.referral_receive_col_card {display: flex; flex-direction: column;  align-items: center; padding: 24px 20px; background-color: var(--lightgray); border-radius: 10px; flex: 1; gap: 10px;}
.referral_receive_col_card > span:first-child { background-color: #ebebeb; width: 80px; height: 80px; aspect-ratio: 1/1; border-radius: 50%; display: block; overflow: hidden;}
.referral_receive_col_card > span:first-child > img { width: 100%; height: 100%; object-fit: cover;}

.referral_tq_btn { border-radius: 10px; background-color: var(--main); padding: 10px 12px; color: var(--white); }

footer.referral_receive_footer {padding-bottom: 120px; background-color: #F4F4F4;}
.referral_receive_info {background-color:var(--lightgray); padding: 20px;font-size: 14px;}
.referral_receive_info p:nth-of-type(1) {display: flex; align-items: center;gap: 5px;}



/*
.month_box input:after{
  position: absolute;
  top:50%;
  right:6px;
  content: '';
  width: 20px;
  height:22px;
  background: #fff url('../img/icon/calendar.svg') center center /contain;
  transform: translateY(-50%);
  z-index: 0;
}

.month_box input::-webkit-clear-button,
.month_box input::-webkit-inner-spin-button {
    display: none;
}

.month_box input::-webkit-calendar-picker-indicator {
    background: transparent;
    z-index: 1;
} */

/* 미디어쿼리 */
@media screen and (max-width:767px){
  .store_box { justify-content: space-between;}
  .store_infotxt {margin-right:0;}
  .wrap_keypad { margin:70px auto 0; }
  .change_phonemypage {justify-content: space-between;}
  .eventlist_img img {max-width:100%;}
  .event_view img {width:100% !important; max-width:100%;}
  .trad_img {max-width:230px;}
  /* .tx_hashaddr {max-width:224px;} */
  .choice_num {width:88%;}
  .bank_box {width:50%;  justify-content: flex-start;}
  .notice_text_box img, .answer_faq img { max-width:100%; }
  /* 영업상태 버튼 간격 수정 */
  .businessstatus_btn div { width: 33%; margin-right: 5px; text-align: center; }
  .list_slider::-webkit-scrollbar { display: none; }
  .gift_category_list { grid-template-columns: repeat(3, 1fr); }
  .giftbox_product_list { padding: 0 14px 20px;  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 15px; }
 }

@media screen and (max-width:767px) {
  .choice_num {width:88%;}
  .paddingbtn {padding-bottom:60px;}
}
@media screen and (max-width:730px) {
  .referral_receive_col {flex-direction: column;}
}
@media screen and (max-width:650px) {
  /* gift */
  .gift_info_b > p, .gift_info_c > p, .gift_info_s > p { margin-left:10px; font-size: 2.8rem; font-weight: 500; }
  .giftbox_top_count > p { margin-left:10px; font-size: 2.8rem; font-weight: 400; }
  .gift_icon { width: 80px; height: 80px; line-height:48px; border: 1px solid var(--line); border-radius:13px; margin:0 auto; }
  .gift_icon img { width:100%; height:100%; object-fit: cover;}
}

@media screen and (max-width:530px) {
  /* GIFTBOX */
  .gift_category_list { grid-template-columns: repeat(2, 1fr); }
  .giftbox_product_list { padding: 0 14px 20px;  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 15px; }
}

@media screen and (max-width:450px){
  /* GIFT */
  .gift_box { padding: 10px 0; }
  .gift_box > p { font-size: 1.2rem; margin-top: 5px;}
  .gift_info_b > p, .gift_info_c > p, .gift_info_s > p { margin-left:10px; font-size: 2.4rem; font-weight: 500; }
  .giftbox_top_count > p { margin-left:10px; font-size: 2.4rem; font-weight: 400; }
  .gift_icon { width: 64px; height: 64px; line-height:48px; border: 1px solid var(--line); border-radius:13px; margin:0 auto; }
  .gift_icon img { width:100%; height:100%; object-fit: cover;}
  .giftbox_product_list { padding: 0 14px 20px;  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 15px; }
}

@media screen and (max-width:400px){
  .hash_add { margin: 5px 2px; }
  /* GIFT */
  .gift_info_b > p, .gift_info_c > p, .gift_info_s > p { margin-left:10px; font-size: 2rem; font-weight: 500; }
  .giftbox_top_count > p { margin-left:10px; font-size: 1.8rem; font-weight: 400; }
  /* REFERRAL */
  .referral_box img { max-height: 258px; }

  .gift_date_check_box { width:100%; height:50px; }
  .gift_date_check { display: flex; justify-content: center; align-items: center; }
}

@media screen and (max-width:360px){
  /* gift */
  .gift_box > p { font-size: 1.0rem; margin-top: 5px;}
  .gift_icon { width: 54px; height: 54px; line-height:48px; border: 1px solid var(--line); border-radius:13px; margin:0 auto; }
  .gift_icon img { width:100%; height:100%; object-fit: cover;}
  .gift_info_b > p, .gift_info_c > p, .gift_info_s > p { margin-left:10px; font-size: 1.8rem; font-weight: 500; }
  .giftbox_top_count > p { margin-left:10px; font-size: 1.6rem; font-weight: 400; }
  .guide_tab {font-size: 1.4rem; }

  .qrnotpay_codenum {font-size:1.4rem;  }

  /* GIFT HISTORY */
  .gift_history_cardbox { min-height: calc(100vh - 125px); min-height: calc(100svh - 125px); height: auto; }
  .gift_date_check_box { width:100%; height:75px; }
  .gift_date_check { display: flex; justify-content: center; align-items: center; flex-direction: column}
  .gift_date_check > p { margin-right: 0; }
}

@media screen and (max-width:340px){
  .paymentnumgo_j {flex-wrap:wrap;}
  .qrtimer_jbox .timer_txt {margin-left:0 !important;}
}

@media screen and (max-width:310px){
  .giftbox_comp_box { padding:30px 20px; }
}

 @media screen and (max-height:668px){
   .qr_img_box { padding-top: 10px; }
   .none_pay {margin-top:20px;}
   .franchise_info_box { position: static; width: 100%; }
 }




/* 미디어쿼리 */