body { background-color:var(--line); }
.main_section { padding:14px 20px 0; }
.num_tq_box { background: linear-gradient(to bottom right, #11B1F8, #1162F8); border-radius: 10px; overflow: hidden;}
.num_tq_box2 { background: url('../img/contents/main/main_card_new.jpg') no-repeat center;  border-radius: 10px; overflow: hidden; background-size: cover;}
/* .num_tq_box2 { background: url('../img/contents/new_img/main_card_web.jpg') no-repeat center;  border-radius: 10px; overflow: hidden; background-size: cover;} */
.num_tq_box3 { background: url('../img/contents/main/main_escrow_card_new.jpg') no-repeat center;  border-radius: 10px; overflow: hidden; background-size: cover;}
.num_tq_box4 { background: url('../img/contents/main/main_card_new_03_a.jpg') no-repeat center;  border-radius: 10px; overflow: hidden; background-size: cover;}
.num_tq_box5 { background: url('../img/contents/main/main_card_v.png') no-repeat center;  border-radius: 10px; overflow: hidden; background-size: cover;}
.esc_list_box { position: relative; padding:10px 20px; }
.esc_bg { position: absolute; left: 0; top: 0; width:100%; height:100%; background: rgba(17,98,248,0.3); mix-blend-mode: multiply; z-index: 20;}
.esc_bg_escrow { position: absolute; left: 0; top: 0; width:100%; height:100%; background: rgba(17,98,248,0.3); z-index: 20;}
.esc_bg_point { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(239,10,106,0.3); z-index: 20; }
.esc_list_box > div:last-child > div { z-index: 30; }
/* .wrapper { background-color: unset !important; } */
.main_wrap { background: var(--bg);}
.overhidden {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
.box_height {min-height:calc(100vh - 50px); min-height:calc(100svh - 50px); height: auto; background:var(--bg);}

/*가맹점 상태 */
 .franchisee_state { font-size:1.2rem; font-weight: 500; background: var(--bg); border-radius: 16px; padding:5px 14px; font-family: "noto_sans"; }
/*가맹점 상태 */

/*상단 KP, 원화 탭 */
.baltab_wrap .balance_active { border-bottom:2px solid var(--main); color:var(--main);  font-weight: 700;}
.baltab_wrap { display: flex; align-items: center; text-align: center; height:30px; 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: 500; font-size:1.8rem; min-width: 80px; border-bottom:1px solid var(--line); height:100%; }
.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:6px; cursor: pointer; border-radius: 8px; text-align: center; }
.bal_state_active { color:var(--main); background: #E6F0FE; }
.baltab {cursor:pointer;}

/*//상단 KP, 원화 탭 */

/* 상단 KP, 원화 탭 하단 */
.num_tq { padding:20px 20px 30px; font-size:2.6rem; font-family: "montserrat"; font-weight: 600; text-align: center; word-break: break-all;}
.dan { font-size:1.8rem; font-family: "montserrat"; font-weight: 700; color:var(--main); }
.total_sisa { font-size:1.4rem; color:var(--dark); font-weight: 500; display: flex; width:100%; word-break: break-all; width:90%;}
.total_sisa span:nth-child(2) {flex:none;}
.avg_sisa { font-size:1.2rem; color:var(--dark); margin-top:6px; font-weight: 400; }
.main_usage_history { display: block; background: #003495; border-radius: 16px; color:var(--white); padding:6px 16px; font-size:1.4rem; font-weight: 500; }
/* .main_usage_history_new { display: block; background: #FB8D02; border-radius: 16px; color:var(--white); padding:6px 16px; font-size:1.4rem; font-weight: 500; } */
.none_login_btn { display: block; background: var(--main_sub); border-radius: 10px; color:var(--main); padding:6px 16px; font-size:1.4rem; font-weight: 700; }

.refresh_btn { cursor:pointer; }
.refresh_btn > p { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; }
/* //상단 KP, 원화 탭 하단 */

/* 공지사항 슬라이드 */

.marquee{position:relative; background:#000; border-radius: 8px; margin:14px 20px; height:36px; overflow: hidden;}
.marquee .notice_info{z-index:1;}
.marquee .marquee_inner{position:absolute; display:flex; align-items:center; width:100%; height:100%;}
 /* 기존 marquee a태그 내 margin-right:40px; */
.marquee .marquee_inner a{flex:none; margin-left: 70px; color:#fff; font-size:1.4rem; font-weight:500; width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice_info {position: absolute; left:0; top:50%; transform: translateY(-50%); background:#000; padding:0 10px; text-align: right; border-radius: 0 10px 10px 0; font-size: 1.4rem;}
.notice_header { padding:4px 10px; background: var(--main); border-radius: 10px; color:#33F4FD; font-weight: 700;}


/* //공지사항 슬라이드 */

/* 클레이페이 온라인, 오프라인 쇼핑몰 */
/* .klaypay_paymenttitle { font-size:2.0rem; font-weight: 700; color:var(--main); }
.klaypay_paymentfri { font-size:1.4rem; font-weight: 500; margin-top:6px; margin-bottom:8px; }
.klaypay_paymentinfo { background-color: #E6F0FE; width:max-content; padding:6px 12px; font-size:1.2rem; font-weight: 500; border-radius: 16px; }
.klaypay_paymentbox { padding:20px 26px; background-color: #fff; border-radius: 10px; margin:0 20px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);}
.klaypay_paymentbox a { color:var(--main); }
.online_shopping { margin-right:12px; text-align: center; font-size:1.2rem; cursor:pointer;}
.offline_shopping { text-align: center; font-size:1.2rem;  cursor:pointer;  }
.online_shopping img, .offline_shopping img {margin:0 auto;} */
/* //클레이페이 온라인, 오프라인 쇼핑몰 */


/* 배너 이미지 슬라이드 */
/* .img_slider { height:110px; margin:14px 20px !important;  }
.img_slider .swiper-pagination-fraction { height:100%; left:unset; position: static; width:max-content; margin-right:6px; font-weight: 700; display: flex;}
.img_slider .swiper-pagination-fraction span:nth-child(1) {margin-right:4px;}
.img_slider .swiper-pagination-fraction span:nth-child(2) {margin-left:4px;}
.banner_img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);}
.img_slider .banner_img {background:#E6F0FE;}
.img_slider .banner_img2 {background:purple;}
.img_slider .banner_img3 {background:green;}
.img_slider .banner_img4 {background:violet;}
.banner_img img { position: absolute; height:100%; width:100%; top:0; left:0; object-fit: cover; }
.all_list { font-weight: 500; } */
/* //배너 이미지 슬라이드 기존 */

/* 배너 이미지 슬라이드 신규*/
/* .img_slider {margin:0 20px !important; border-radius: 10px; padding:14px 0 !important; }
.img_slider .swiper-pagination-fraction { height:100%; left:unset; position: static; width:max-content; margin-right:6px; font-weight: 700; display: flex;}
.img_slider .swiper-pagination-fraction span:nth-child(1) {margin-right:4px;}
.img_slider .swiper-pagination-fraction span:nth-child(2) {margin-left:4px;}
.img_slider .banner_img { border-radius: 10px; box-shadow: 0 3px 15px rgb(0,0,0, 0.06); overflow: hidden;}
.banner_img img { width:100%; height:110px;}
.all_list { font-weight: 500; }
.all_more02 { position: absolute; top:24px; right:10px; z-index:10; display: flex; align-items: center; padding:4px 8px; border-radius: 20px; background:rgba(0,0,0,0.7); color:var(--white); cursor:pointer; }
.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;} */
/* //배너 이미지 슬라이드 */



/*팝업창*/
.klaypopup_wrap { position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0,0,0,0.5); }
.klaypopup_wrap img {width:300px; height:300px;}
.klaypopup_cont { position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); max-width: 300px; max-height: 300px; z-index: 9920; }
.btn_closebox { width:100%; height:50px; font-size:1.6rem; background-color:var(--inactive); color:var(--black); font-weight: 500; }
.klaypopup_btn { display: flex; align-items: center; position: relative; top:-4px; }
.btn_box { width:100%; height:50px; font-size:1.6rem; background: linear-gradient(to right, #2E9DCD , #523B88); color:var(--white); font-weight: 500; }
.goodbye { color:var(--white); font-size:1.6rem; font-family:"montserrat"; font-weight: 400; text-align: center; cursor:pointer; width:max-content; margin:18px auto 0; }
.all_more { position: absolute; top:10px; right:10px; z-index:10; display: flex; align-items: center; padding:4px 8px; border-radius: 20px; background:rgba(0,0,0,0.7); color:var(--white); cursor:pointer; }
.shadow_box {box-shadow: 0px 10px 50px rgba(0,0,0,0.4) inset ;}
/* //팝업창 */

.bg {position: fixed; width:100%; height:100%; background-color: rgba(0,0,0,0.5);}

/* 가맹점 관리 */
.user_management_box p{ padding-top:5px; font-size:1.4rem; font-weight: 500; text-align: center;}
/* .user_menu_icon { width: 48px; height: 48px; line-height:48px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius:13px; } */
.user_management_listwrap { margin:20px 20px 0; box-shadow: 0px 3px 15px rgba(0,0,0,0.06); overflow: hidden; border-radius: 10px; }
.user_management_list { width:100%; cursor:pointer; position: relative; padding:14px 20px; border-bottom:1px solid var(--line); background-color: var(--white);}
.user_management_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%); }
.user_management_list.active:after { background-image: url("../../assets/img/icon/icon_arrow_up.svg"); content:""; }
.user_management_title {font-size:1.6rem; font-weight: 700;}
.user_management_box {background-color: var(--white);}
.list_paymentbox { padding:20px 0; border-bottom:1px solid var(--line); margin:0 20px; display: flex; justify-content: flex-start; align-items: flex-start;;}
.list_paymentbox > li { width:calc(100% / 4); height:100% }
.user_management_flex { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}



/* 결제 완료 */
.paycomt_wrap { position: fixed; top:0; left:0;  width: 100%; height: 100%;  z-index: 10000;  background-color: rgba(0,0,0,0.5);}
.paycomt_wrap .pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width:300px; max-width:300px; max-height:470px; border-radius: 20px; z-index: 9920; overflow: hidden; box-shadow: 0px 10px 50px rgba(0,0,0,0.4)}
.paycomt_wrap .pop_title { font-size:1.8rem; font-weight: 700; padding-top:40px; text-align: center;}
.paycomt_wrap .popup_txt { font-size:1.4rem; text-align: center; font-weight: 400; padding:0 20px 30px; line-height: 24px; }
/* .paycomt_wrap .popup_txt { font-size:1.4rem; text-align: center; font-weight: 400; padding:30px 20px; line-height: 24px; } */
.paycomt_wrap .popup_txt p:nth-child(1) { font-size:1.8rem; color:var(--main); font-weight:500; margin-bottom:4px; font-family: "noto_sans";}
.paycomt_wrap .oder_franlist { font-size:2.2rem; color:var(--black); font-weight:700; font-family: "noto_sans";}
.oder_list {border-top:2px solid var(--black); padding:20px; font-family: "noto_sans"; }
.order_info {font-size:1.6rem; font-weight: 700; margin-bottom:10px}
.payment_code {display: flex; justify-content: space-between;}
.payment_code span:nth-child(1) {font-size:1.4rem; font-weight: 500; color:var(--dark);}
.payment_code span:nth-child(2) {font-size:1.4rem; font-weight: 400; color:var(--black);}
.payment_total {border-top:1px solid var(--gray); display:flex; justify-content: space-between; align-items: center; border-bottom:2px solid var(--black); padding:20px; font-family: "noto_sans";}
.payment_total p:nth-child(1) {font-size:1.6rem; font-weight: 700;}
.payment_total p:nth-child(2) span:nth-child(1){font-size:2.2rem; font-weight: 700;}
.payment_total p:nth-child(2) span:nth-child(2){font-size:1.8rem; font-weight: 700; color:var(--main); font-family: "montserrat"; }
.paybg {background:#fff; padding:0 20px 40px;}

/* 스토어 바로가기 */
/* scroll custom */
.scroll_box::-webkit-scrollbar { width: 6px; }
.scroll_box::-webkit-scrollbar-track { background-color: var(--white); border-radius: 30px; }
.scroll_box::-webkit-scrollbar-thumb { background-color: #E3E3E3; border-radius: 30px; }

.menu_container { position:relative; width: calc(100% - 40px); padding: 0px 20px 20px; margin:0 auto; background: white; border-radius: 8px; overflow: hidden; }
.store_wrap {   height: auto; }
.store_wrap > div { width: 100%;font-size: 18px; font-weight: 700; }
.store_wrap .swiper-pagination { bottom: 10px; }
.fran_icon_container { display: flex; align-items: center; flex-wrap: wrap; text-align: center;}
.fran_icon_container > li { width: calc(100% / 4);}
.fran_icon_container > li > a > p { font-size:16px; font-weight: 400; margin-top:5px; }
.fran_icon_container > li > a { padding: 20px; display:block; }
/* .user_menu_icon { width: 70px; height: 70px; padding:4px; line-height:48px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius:13px; margin:0 auto; } */
/* 2023.04.11 main 3차 수정 관련 값 변경 */
.user_menu_icon { width: 70px; height: 70px; padding:4px; line-height:48px; border-radius:13px; margin:0 auto; }
.user_menu_icon img { width:100%; height:100%; object-fit: contain;;}
.store_wrap > div > img { transition: all 500ms; }
.store_wrap > div.active > img { transform:rotate(-180deg); }
.store_wrap .scroll_box { overflow-y:auto; height: 200px; margin:15px 0 }
.store_wrap .scroll_box li { position:relative; width:100%; height:45px; line-height:45px; font-size: 1.4rem; }
.store_wrap .scroll_box li:first-child { font-size: 1.4rem; font-weight:700; }
.store_wrap .scroll_box li a { position:absolute; top:0; left:0; width:100%; padding:0 20px;}
.store_wrap .scroll_box li:hover { background-color: var(--line);}

/* 배너 이미지 슬라이드 신규*/
.img_slider {margin:0 20px !important; border-radius: 10px !important; padding:14px 0 14px!important; overflow: hidden; }
.img_slider .swiper-pagination-fraction { height:100%; left:unset; position: static; width:max-content; margin-right:6px; font-weight: 700; display: flex;}
.img_slider .swiper-pagination-fraction span:nth-child(1) {margin-right:4px;}
.img_slider .swiper-pagination-fraction span:nth-child(2) {margin-left:4px;}
.img_slider .banner_img { border-radius: 10px; box-shadow: 0 3px 15px rgb(0,0,0, 0.06); aspect-ratio: 3 / 1; min-height: 80px; max-height:150px;}
.banner_img img { height:100%; width:100%; object-fit: fill; border-radius: 10px;}
.all_list { font-weight: 500; }
.all_more02 { position: absolute; top:24px; right:10px; z-index:10; display: flex; align-items: center; padding:4px 8px; border-radius: 20px; background:rgba(0,0,0,0.7); color:var(--white); cursor:pointer; }
.img_slider .swiper-pagination { bottom: 0px !important; }
.swiper-pagination-bullet { width: 6px !important; height: 6px !important; }
/* //배너 이미지 슬라이드 */

/*230302 메인페이지 내 TQ내역 신규클래스 추가 : 신정운 */
.tqlistbtn { flex:none; }
.card_name { padding:20px 20px 0; }
.card_name img { width:30px; height:30px; }
.card_name p { font-size:2rem; font-weight: 700; color:var(--white); }
.escrow_txt { flex:none; font-size:1.2rem; font-weight: 500; padding: 2px 4px; border-radius: 4px; background: #1162F8; color: var(--white); }

/* main_tab */
.user_fran_list { width: 100%; height: 100%; padding: 14px 20px 10px; }
.tabs {display:flex; position:relative; padding:4px; width:100%; height:48px; text-align: center; background: #fff; 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);}
.tabs .tab.active p { color:var(--main);}
.tabs .background { position:absolute; width:50%; height: 40px;  background:var(--main_sub); z-index: 1; bottom:4px; transition:0.4s; border-radius: 8px;}


/* franchise */
.menu_fran_info { padding: 20px 10px 14px; }
.menu_fran_info > div:first-child { width:100%; min-height: 80px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.menu_fran_img { margin-left: 10px; flex:none; width: 80px; height: 80px; overflow: hidden; border-radius: 13px; }
.menu_fran_img img { width: 100%; height:100%; object-fit: cover; }
.usage_history { display: block; width:90px; background: #E6F0FE; border-radius: 16px; color: var(--main); padding: 6px 16px; font-size: 1.4rem; font-weight: 500;}

.fran_status_box label { position:relative; width:33%; margin-right:20px; text-align: center;cursor:pointer;  }
.fran_status_box label:last-child { margin-right:0; }
.fran_status_box label span { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:var(--fran_inactive); width: 100%;}
.fran_status_box input[type="radio"]:checked { background:var(--black); color:#fff; }
.fran_status_box input[type="radio"]:checked + span { color:#fff; }
.btn_state { display:block; outline: none; margin:0; background:#fff; border-radius: 10px; min-height:40px; font-size:1.4rem; font-weight: 500; width:100%; background:var(--inactive); font-family: "noto_sans"; padding:0;}

/* 가맹점 관리 */
.none_pd_container { position: relative; width: calc(100% - 40px); margin: 0 auto; background: white; border-radius: 8px; overflow: hidden; }
.menu_fran_management { width: 100%; cursor: pointer; position: relative; padding: 14px 20px; border-bottom: 1px solid var(--line); background-color: var(--white); }
.menu_fran_management.active:after { background-image: url(../../assets/img/icon/icon_arrow_up.svg); content: ""; }
.menu_fran_management: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%); }
.menu_fran_box { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 10px; padding: 20px 0 0; border-bottom: 1px solid var(--line); margin: 0 20px; text-align: center; }
.menu_fran_box li { margin-bottom: 20px; }
.menu_fran_box p { font-size:1.4rem; font-weight: 500; line-height: 1;}
/* .menu_fran_box_icon { width: 48px; height: 48px; line-height: 30px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius: 13px; margin: 0 auto; padding: 9px; } */
.menu_fran_box_icon { width: 70px; height: 70px;  line-height: 30px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius: 13px; margin: 0 auto; padding: 9px;  }
.menu_fran_box_icon img { width: 100%; height:100%; object-fit: contain; }
/* 누적결제 */
.fran_paymentbox { padding: 14px 20px; border-bottom: 1px solid var(--line); }

/* 고객결제하기 */
.menu_fran_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; }
.menu_fran_paymentbox { padding: 14px 16px; color: var(--black); font-size: 1.6rem; font-weight: 700; border:1px solid var(--line);}
.payamount_confirmwrap .user_amount input::placeholder { font-size: 1.6rem; font-weight:500;}

/* 230327 */
.main_fran_list { width: 90px; height: 100%; }
.main_fran_list a { width: 100%; height: 100%; display: flex; }
/* 230419 main card 추가 */
.main_card { padding-bottom: 26px; }
.main_card_comma { color:var(--white); opacity: 50%; }
.card_name .main_escrow { letter-spacing: -1px; }
.escrow_list_btn { display: block; background: #E6F0FE; border-radius: 16px; color: #1162F8; padding: 6px 16px; font-size: 1.4rem; font-weight: 500; }
.main_card .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0px !important; }

@media screen and (max-width:600px){
  /* main franchise icon */
  .menu_fran_box_icon { width: 60px; height: 60px; line-height: 60px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius: 13px; margin: 0 auto; padding: 9px; }
  .menu_fran_box p { font-size: 1.4rem; }
  /* main user icon */
  .fran_icon_container > li > a { padding: 0; display:block; }
  .fran_icon_container > li > a > p { font-size:1.4rem; font-weight: 300; margin-top:5px; }
  .user_menu_icon { width: 60px; height: 60px; padding:4px; line-height:60px; border-radius:13px; margin:0 auto; }
  .user_menu_icon img { width:100%; height:100%; object-fit: cover;}
}

@media screen and (max-width:450px){
  /* main franchise icon */
  .menu_fran_box_icon { width: 48px; height: 48px; line-height: 48px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius: 13px; margin: 0 auto; padding: 9px; }
  .menu_fran_box p { font-size: 1.2rem; }
  /* main user icon */
  .fran_icon_container > li > a { padding: 0; display:block; }
  .fran_icon_container > li > a > p { font-size:1.2rem; font-weight: 300; margin-top:5px; }
  .user_menu_icon { width: 48px; height: 48px; padding:4px; line-height:48px; border-radius:13px; margin:0 auto; }
  .user_menu_icon img { width:100%; height:100%; object-fit: cover;}
}

@media screen and (max-width:300px){
  /* main franchise icon */
  .menu_fran_box_icon { width: 40px; height: 40px; line-height: 40px; background-color: var(--lightgray); border: 1px solid var(--line); border-radius: 13px; margin: 0 auto; padding: 9px; }
  .menu_fran_box p { font-size: 1rem; }
  /* main user */
  .fran_icon_container > li > a > p { font-size: 1rem; }
  .user_menu_icon { width: 35px; height: 35px; padding:4px; line-height:35px; border-radius:13px; margin:0 auto; }
  .user_menu_icon img { width:100%; height:100%; object-fit: cover;}
}