@charset "utf-8";
@import url('common.css');

body { position: relative; overflow-x: hidden; }

#container1 { padding: 55px 24px 0; margin-bottom: 150px; }
#container2 { padding: 55px 24px; margin-bottom: 150px; }
#container3 { padding: 55px 20px 0; margin-bottom: 50px; }
#container4 { padding: 55px 24px 120px; }
#container5 { padding: 55px 20px 120px; }
#container6 { padding: 55px 20px 55px 20px; margin-bottom: 150px; }
#container7 { padding: 0px 20px; margin-bottom: 50px; }
#container8 { padding: 0px 24px 55px 24px; margin-bottom: 150px; }
#container_main { padding: 0 20px; margin-bottom: 100px; }
#container_w { padding: 55px 0 200px; }
#container_90 { padding: 55px 0 0; margin-bottom: 90px; }
#container_100 { padding: 55px 0; margin-bottom: 100px; }
#container_150 { padding: 55px 0; margin-bottom: 150px; }
#container_main { padding: 0 20px; margin-bottom: 100px; }

.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt100 { margin-top: 100px; }
.pdl5 { padding-left: 5px; }

.flex { display: flex; }
.dflex-col { flex-direction: column; }
.js-evenly { justify-content: space-evenly; }
.js-between { justify-content: space-between; }

.ai-center { align-items: center; }
.ta-center { text-align: center; }

.relative { position: relative; }

.fs10 { font-size: 10px; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs24 { font-size: 24px; }

.fw500 { font-weight: 500!important; }
.fw600 { font-weight: 600!important; }

.blue { color: #328CFF!important; }
.deepblue { color: #1064CF!important; }
.red { color: red!important; }
.deepgray { color: #2c2c2c!important; }
.gray { color: #7e7e7e!important; }
.white { color: #fff!important; }
.lightgray { color: #CDCDCD }

/*login*/

.login_title { margin-top: 100px; text-align: center; }
.login_title p { font-size: 30px; }

.input_group.login { margin-top: 85px; flex-direction: column; }
.input_group.login span { padding-left: 10px; }

.input_group span { color: #2c2c2c; }
.input_group select { padding: 0 15px; width: 240px; height: 45px; color: #2c2c2c; border: 1px solid #d9d9d9; border-radius: 5px; appearance: none; background-image: url("../img/ico-17-drop-down.png"); background-repeat: no-repeat; background-position: 96% center; background-size: 10px; }
.input_group select:invalid { color: #b3b3b3; }
.input_group select.school { margin-bottom: 15px; width: 100%; height: 55px; }

.input_group input { padding: 15px; width: 240px; height: 45px; border: 1px solid #d9d9d9; border-radius: 5px; }
.input_group input.phone {  width: 100%; height: 55px; }
.input_group input::placeholder { font-size: 15px; color: #b3b3b3; }
.input_group input:read-only { color: #b3b3b3; }
.input_group input.school:read-only { color: #2c2c2c; }
.input_group label { padding-left: 10px; }
.input_group label input { width: 16px; height: 16px; margin-top: 6px; }

.container span a { color: #2c2c2c; }

button.btn_100 { width: 100%; height: 55px; color: #fff; line-height: 49px; border-radius: 10px; background-color: #328CFF; }

.auto-login { display: flex; align-items: center; }
.auto-login .checkbox { margin: 0 6px 0 0; }

/*login_school*/

.school > div { height: 50px; border-bottom: 1px solid #f7f7f7; }
.school > div span { line-height: 50px; }
.school > div span:first-of-type { width: 55%; border-right: 1px solid #f7f7f7; }
.school > div span:last-of-type { width: 45%; }
.school .school_list li { display: flex; height: 50px; }
.school .school_list li span { display: block; padding-left: 10px; font-size: 15px; line-height: 50px; border-bottom: 1px solid #f7f7f7; }
.school .school_list li span:first-of-type { width: 55%; border-right: 1px solid #f7f7f7; }
.school .school_list li span:last-of-type { width: 45%; }
.selected { background-color: #EFF6FF; }


/*join*/

.join .input_group input::placeholder { font-size: 14px; }

button.btn_s_wht { width: 65px; height: 45px; color: #328CFF; font-size: 12px; font-weight: 600; background-color: #fff; border: 2px solid #328CFF; border-radius: 10px; }
button.btn_s_blue { width: 65px; height: 45px; color: #fff; font-size: 12px; font-weight: 600; background-color: #328CFF;  border-radius: 10px; }
button:disabled { background-color: #84BAFF; }

.button-container.__bottom { position: fixed; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 10; }


/*certify*/

.input_certify { position: relative; }
.input_certify span.red.count { position: absolute; top: 13px; right: 15px; font-size: 12px; }

.btn_agree_blue { width: 80px; height: 45px; color: #fff; font-size: 16px; font-weight: 600; background-color: #328CFF; border: 2px solid #328CFF; border-radius: 10px; }
.btn_cancel_wht { width: 80px; height: 45px; color: #328CFF; font-size: 16px; font-weight: 600; background-color: #fFF; border: 2px solid #328CFF; border-radius: 10px; }

.modal-center .modal-content p { line-height: 27px; }


/*pin*/

.pin_input_group { width: 170px; margin: auto; }
.pin_input_group input { width: 20px; height: 20px; border: none; border-radius: 50%; background-color: #d9d9d9; }

/*input[type="password"] { color: transparent; }*/
input[type="password"] { color: #7f7f7f; }
.pin_input:focus { outline: 2px solid #328CFF; }
.pin_input:valid { background-color: #328CFF; }


/*main*/


#header_main { position: relative; width: 100%; height: 55px; background-color: #fff; z-index: 1; }
#header_main .navbar.__left,
#header_main .navbar.__right { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
#header_main .navbar.__left { left: 6px; }
#header_main .navbar.__right { right: 6px; }


.ban1 { height: 40px; padding: 0 15px; background-color: #E6F1FF; border: none; border-radius: 10px; }
.ban2 { height: 70px; padding: 15px; background-color: #1064CF; border: none; border-radius: 10px; }

.quick_order ul li { width: 100%; height: 70px; padding: 10px 15px; border: 1px solid #e9e9e9; border-radius: 10px; }
.quick_order ul li:first-of-type { margin-right: 15px; }


.meal_list { position: relative; }
.meal_list .weekly { width: 100%; height: 80px; margin-top: 15px; display: flex; justify-content: space-evenly; align-items: center; border: none; border-radius: 10px; background-color: #F9F9F9; }
.meal_list .weekly li { display: flex; flex-direction: column; align-items: center; }
.meal_list .weekly li.active span { color: #328CFF; font-weight: 600; }
.meal_list .weekly li.active span.date:after { background-color: #E6F1FF; font-weight: 600; }

.meal_list .weekly li span { color: #2c2c2c; font-size: 14px; }
.meal_list .weekly li span.date { position: relative; margin-top: 10px; font-size: 15px; z-index: 1; }
.meal_list .weekly li span.date:after { content: ''; position: absolute; top: -1px; left: -4px; width: 25px; height: 25px; border: none; border-radius: 50%; background-color: #fff; z-index: -1; }


.restaurant_list { overflow-x: auto; white-space: nowrap; }

.meal_detail_list li { margin-right: 5px; height: 25px; border: 1px solid #328cff; border-radius: 15px; }
.meal_detail_list li a { padding: 0 10px; color: #328cff; }

.see_more { position: absolute; top: 5px; right: 0; font-size: 12px; color: #a1a1a1; }

.navi-container.__bottom { position: fixed; left: 0; right: 0; bottom: 0; padding-top: 10px; background-color: #f7f7f7; z-index: 10; }
.navi-bar { height: 80px; border: none; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #fff; }
.navi-bar ul { padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.navi-bar ul li button { width: 42px; display: flex; flex-direction: column; align-items: center; }
.navi-bar ul li.active button span { color: #328CFF; }
.navi-bar ul li button img { width: 22px; height: auto; }
.navi-bar ul li button span { margin-top: 5px; font-size: 11px; font-weight: 600; }


/*check*/

#header .navbar.__right.r_icon { padding-right: 20px; }
#header .navbar.__right.r_icon button img { margin-top: 2px; width: 20px; height: 20px; }

.tab_list li { width: 100%; }
.tab_list li button { width: 100%; padding: 15px 0; text-align: center; border-bottom: 4px solid #f9f9f9; }

.tab_list li.tab_active button { width: 100%; padding: 15px 0; text-align: center; border-bottom: 4px solid #328CFF; }
.tab_list li button span { color: #CDCDCD; }
.tab_list li.tab_active button span { color: #000; }

.store_list li { padding: 20px 0; border-bottom: 1px solid #d9d9d9; }
.store_list li:last-of-type { border-bottom: 0; }
.store_list li a img { width: 60px; height: 60px; border: none; border-radius: 5px; }
.store_list li a div { width: 170px; }
.store_list li a span.menu_more { padding-right: 10px; font-size: 12px; color: #2c2c2c; }
.store_list li a span.closed { color: #CDCDCD }

.option_list.input_group select { height: 35px; }

.menu_list li { padding: 10px 0; border-bottom: 1px solid #f9f9f9; }
.menu_list li:last-of-type { border-bottom: 0; }
.menu_list li a img { margin-right: 30px; width: 60ox; height: 60px; border: none; border-radius: 50%; z-index: 1; }
.menu_list li a span { font-size: 14px; font-weight: 600; }


/*store_info*/

.store_tab { overflow: auto; white-space: nowrap; scrollbar-width: none; }
.store_tab ul { display: inline-flex; min-width: max-content; }
.store_tab li button { height: 54px; margin-right: 10px; }
.store_tab li.active span { padding-bottom: 13px; color: #328CFF; border-bottom: 3px solid #328CFF; }
.store_tab li span { padding: 15px; font-size: 13px; font-weight: 600; color: #CDCDCD; }

.menu_list .txt_sold_out { display: none; }

.menu_list .sold_out { position: relative; }
.menu_list .sold_out:after { content: ''; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; border: none; border-radius: 5px; background-color: rgba(0,0,0,0.3); z-index: 99; }
.menu_list .sold_out .txt_sold_out { display: block; position: absolute; top: 29px; left: 19px;  color: red; font-weight: 500; z-index: 100; }
.menu_list .sold_out div > span:first-of-type { color: #cdcdcd; }


/*menu_info*/

.navbar.r_icon button.ico_cart { margin-right: 20px; position: relative; }
.navbar.r_icon button .ban_qty { display: none; }
.navbar.r_icon button.active .ban_qty { display: block; position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; color: #fff; font-size: 13px; font-weight: 500; line-height: 20px; background-color: #ec221f; border-radius: 50% }

.img_menu { width: 100%; height: 300px; }

button.btn_wht { width: 100%; height: 55px; color: #328CFF; line-height: 49px; border: 2px solid #328CFF; border-radius: 10px; background-color: #fff; }
button.btn_wht:disabled { color: #84BAFF; border: 2px solid #84BAFF; }
.__bottom button.btn_wht { margin-right: 20px; }

.qty .btn_minus { width: 22px; height: 22px; }
.qty .btn_minus img { width: 22px; height: 22px; }
.qty .btn_plus { width: 22px; height: 22px; }
.qty .btn_plus img { width: 22px; height: 22px; }
.qty span { margin: 0 20px; }

fieldset.drink { min-width: 216px; border: none; text-align: right; }
fieldset.drink label { margin-right: 5px; }
fieldset.drink label:last-of-type { margin: 0; }
fieldset.drink label input { display: none; }
fieldset.drink label span { display: inline-block; /*width: 64px;*/ min-width: 64px; max-width: 106px; height: 35px; font-size: 14px; color: #d9d9d9; line-height: 35px;  text-align: center; border:1px solid #d9d9d9; border-radius: 30px; background-color: #fff;}
fieldset.drink label:has(input:checked) span { color: #000; border:none; background-color: #d9d9d9; }

.menu_opt select { padding: 0 10px; width: 95px; height: 30px; font-size: 14px; border: 1px solid #d9d9d9; border-radius: 5px; appearance: none; background-image: url(../img/ico-17-drop-down.png); background-repeat: no-repeat; background-position: 90% center; background-size: 10px; }
.menu_opt .btn_opt span { min-width: 76px; max-width: 150px; }
.menu_opt .btn_opt_3over div { overflow: scroll; scrollbar-width: none; }
.menu_opt .btn_opt_3over fieldset { justify-content: flex-start; }
.menu_opt .btn_opt_3over span { width: 64px; height : 50px; line-height: normal; align-content: center; border-radius: 13px; }


/*cart*/

.bg_gray { width: 100%; height: 40px; background-color: #f7f7f7; }
.bg_gray .cart_store { padding: 0 24px; line-height: 40px; }

.cart_list { padding: 0 20px; }
.cart_list li { position: relative; padding: 20px 0; border-bottom: 1px solid #f9f9f9; }
.cart_list li > img { margin-right: 30px; min-width: 64px; max-width: 64px; min-height: 64px; max-height: 64px; border-radius: 50%; }
.cart_list li div.qty button img { margin-top: 3px; width: 18px; height: 18px; }
.cart_list li button.remove { position: absolute; top: 20px; right: 0; width: 38px; height: 22px; font-size: 11px; text-align: center; line-height: 20px; border: 1px solid #d9d9d9; border-radius: 5px; }

.total.__bottom { position: fixed; left: 0; right: 0; bottom: 100px; padding: 0 30px; background-color: #fff; }

.total span { font-weight: 600; }
.total b { margin: 0 15px; font-weight: 600; }

.cart_none .total { display: none; }


/*order*/

.order_title { width: 100%; height: 40px; padding: 10px 24px; border-bottom: 1px solid #f7f7f7; background-color: #fff; }
.order_title button.btn-toggle { position: relative; width: 19px; height: 19px; }
.order_title button.btn-toggle > img { position: absolute; top: -2px; right: 0; width: 25px; height: auto; transform: rotate(180deg); }
.order_title button.btn-toggle.__active > img { transform: rotate(0deg); }

#order_info { width: 100%; padding: 20px; background-color: #f7f7f7; }
#order_info > div { padding: 15px; border-radius: 7px; background-color: #fff; }
#order_info hr { border: 0; height: 1px; background-color: #f7f7f7; margin-left: -15px; margin-right: -15px; }
#order_info ul li { padding: 15px 0; border-bottom: 1px solid #f7f7f7; }
#order_info ul li:last-of-type { padding: 15px 0 0; border-bottom: 0; }
#order_info ul li .order_menu span.opt { margin: 5px 0 0 10px; font-size: 11px; }
#order_info ul li .order_menu b.menu_qty { margin-left: 20px; font-weight: 600; }
#order_info ul li .price { width: 80px; text-align: right; }

.toggle-content { display: none; }
.toggle-content.__active { display: block; }

.point_info { padding: 20px 30px; }
.point_info .input_group input { height: 35px; padding: 0 15px; font-size: 13px; }
.point_info .input_group input::placeholder { font-size: 13px; }

.btn_s_wht:disabled { color: #98C5FF; border-color: #98C5FF; background-color: #fff; }

fieldset.payment { padding: 0 20px; margin: 15px 0; border: none; }
fieldset.payment label input { display: none; }
fieldset.payment label span { display: inline-block; width: 100%; height: 50px; margin-bottom: 10px; color: #d9d9d9; line-height: 45px;  text-align: center; border:2px solid #d9d9d9; border-radius: 7px; background-color: #fff;}
fieldset.payment label:has(input:checked) span { color: #328CFF; border-color:#328CFF; }


/*wallet_mealTkt*/

.meal_ticket select { margin: 20px 0 10px; padding: 5px 15px; width: 100%; font-size: 13px; color: #2c2c2c; border: 1px solid #d9d9d9; border-radius: 5px; appearance: none; background-image: url(../img/ico-17-drop-down.png); background-repeat: no-repeat; background-position: 96% center; background-size: 10px; }
.meal_ticket .qty { margin-left: 5px; font-size: 12px; color: #2c2c2c; }
.meal_ticket .qty b { margin: 0 10px; font-size: 15px; color: #328CFF; font-weight: 600; }

.meal_ticket .hold_tkt li { position: relative; display: flex; flex-direction: column; padding: 15px; margin-top: 20px; background-color: #f9f9f9; border-radius: 10px; }
.meal_ticket .hold_tkt li > div:first-of-type { padding: 0 10px 0 5px; margin-bottom: 20px; }
.meal_ticket .hold_tkt li span { color: #2c2c2c; font-size: 13px; font-weight: 600; }
.meal_ticket .hold_tkt li span.price { font-size: 15px; }
.meal_ticket .hold_tkt li span.mealTkt_qty { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; color: #fff; font-size: 17px; font-weight: 600; line-height: 24px; text-align: center; border-radius: 50%; background-color: #328cff; }
.meal_ticket .hold_tkt li button { width: 100%; padding: 7px 0; color: #2c2c2c; font-size: 13px; font-weight: 600; text-align: center; border: 1px solid #d9d9d9; border-radius: 5px; background-color: #fff; }
.meal_ticket .hold_tkt li button:first-of-type { margin-right: 20px; }
.meal_ticket .hold_tkt li button.qr { justify-content: center; }
.meal_ticket .hold_tkt li button.qr img { margin-right: 5px; width: 10px; height: 10px; }

.meal_ticket .calendar { margin: 10px -20px 0; padding: 0 24px; border: 0; height: 36px; background-color: #f7f7f7; }
.meal_ticket .calendar .btn_calendar { width: 15px; height: 16px; border: none; }

.meal_ticket .mealTkt_history li { display: flex; flex-direction: column; padding: 15px 5px; color: #2c2c2c; border-bottom: 1px solid #D9D9D9; }
.meal_ticket .mealTkt_history li div { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.meal_ticket .mealTkt_history li div:first-of-type { margin-top: 0!important; }
.meal_ticket .mealTkt_history li div span.ban_mealTkt { width: 85px; height: 20px; font-size: 11px; font-weight: 600; color: #2c2c2c; border: 1px solid #d9d9d9; border-radius: 5px; text-align: center; }


.mealTkt_gift .button-container button { width: 90px!important; line-height: 41px; }
.mealTkt_gift input { padding: 5px 10px; }
.mealTkt_gift input::placeholder { font-size: 13px!important; }

.mealTkt_gift_complete .gift_qty { margin: 0 5px; }


/*wallet_mobileTkt*/

.mobileTkt_list li { display: flex; flex-direction: column; justify-content: space-between; position: relative; margin-top: 20px; padding: 20px; height: 155px; border-radius: 10px; background-color: #F9F9F9; }
.mobileTkt_list li span { font-weight: 600; color: #2c2c2c; }
.mobileTkt_list li button { display: flex; justify-content: space-evenly; align-items: center; padding: 0 5px; width: 80px; height: 24px; background-color: #328cff; border-radius: 50px; }
.mobileTkt_list li button > img { width: 10px; height: 10px; }
.mobileTkt_list li button > span { color: #fff; font-size: 10px; font-weight: 600; line-height: 24px; }
.mobileTkt_list li span.see_more { position: absolute; top: 20px; right: 20px; font-size: 10px; }
.mobileTkt_list li span.see_more a { color: #8C9091; }

.mobileTkt_list li.done { height: 125px; }
.mobileTkt_list li.done span { color: #8C9091; }
.mobileTkt_list li.done span.ban_done { height: 24px; width: 80px; font-size: 10px; font-weight: 600; text-align: center; color: #EC221F; border: 1px solid #EC221F; border-radius: 50px; line-height: 21px; }

.mobileTkt_info { padding: 20px; background-color: #F9F9F9; }
.mobileTkt_info .mobileTkt_detail { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px 30px 30px; height: 370px; text-align: center; background-color: #fff; border-radius: 10px; }
.mobileTkt_info .mobileTkt_detail span { color: #2c2c2c; font-weight: 600; }
.mobileTkt_info .mobileTkt_detail img { margin: 15px; width: 140px; height: 140px; }
.mobileTkt_info .mobileTkt_detail > div:last-of-type { display: flex; flex-direction: column; justify-content: space-between; width: 85%; height: 45px; }

.mobileTkt_info .mobileTkt_detail .qr { position: relative; }
.mobileTkt_info.done .mobileTkt_detail .qr:after { content: '사용완료'; position: absolute; top: 15px; left: 15px; width: 140px; height: 140px; font-size: 20px; color: #ec221f; font-weight: 600; line-height: 140px; background-color: rgba(217,217,217,0.9); }

.mobileTkt_info .notice { display: flex; flex-direction: column; margin-top: 15px; padding: 25px; }
.mobileTkt_info .notice ul li { position: relative; margin-left: 10px; }
.mobileTkt_info .notice ul li:before { content: ''; position: absolute; top: 7px; left: -10px; width: 3px; height: 3px; background-color: #2c2c2c; border-radius: 50%;}


.mobileTkt_history  li { display: flex; padding: 15px 5px; border-bottom: 1px solid #d9d9d9; }
.mobileTkt_history  li span.used { color: #EC221F; }


/*wallet_prepaid*/

.prepaid_card { margin-bottom: 220px; }
.prepaid_card select { margin: 20px 0 10px; padding: 5px 15px; font-size: 13px; color: #2c2c2c; border: 1px solid #d9d9d9; border-radius: 5px; appearance: none; background-image: url(../img/ico-17-drop-down.png); background-repeat: no-repeat; background-position: 96% center; background-size: 10px; }

.prepaid_card .card_info { height: 370px; }
.prepaid_card .card_info .qr { position: relative; padding: 20px; width: 180px; height: 180px; background: linear-gradient(to top, #328CFF, #ADD1FF); border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.prepaid_card .card_info .qr::before { content: ''; position: absolute; top: 6px; left: 6px; width: 168px; height: 168px; border-radius: 10px; background-color: #fff; }
.prepaid_card .card_info .qr img { position: relative; width: 140px; height: 140px; }

.prepaid_card .card_info .btn_back { width: 15px; height: 15px; }
.prepaid_card .card_info .btn_back img { transform: rotate(90deg); width: 15px; height: 15px; }

.prepaid_card .card_info .btn_bookmark { margin-right: 5px; margin-top: 2px; width: 20px; height: 20px; background-image: url(../img/ico_bookmark.png); background-size: 20px; }
.prepaid_card .card_info .btn_bookmark.active { background-image: url(../img/ico_bookmark_active.png); }

.prepaid_card .card_info .notice { display: none; width: 70%; text-align: left; }
.prepaid_card .card_info .notice span { display: inline-block; }
.prepaid_card .card_info .notice ul li { position: relative; margin-left: 10px; }
.prepaid_card .card_info .notice ul li:before { content: ''; position: absolute; top: 7px; left: -10px; width: 3px; height: 3px; background-color: #2c2c2c; border-radius: 50%; }

.prepaid .calendar { height: 60px; }
.postpaid .calendar { height: 60px; }


/*meal_plan*/

.meal_date { height: 115px; }
.meal_date .date { width: 220px; }
.meal_date .date button { margin-top: 3px; width: 16px; height: 16px; background-image: url(../img/ico_drop_down.svg); background-size: 16px; transform: rotate(90deg); }
.meal_date .date button:last-of-type { margin-top: 0px; transform: rotate(-90deg); }

.meal_date fieldset.meal_type { width: 200px; border: none; }
.meal_date fieldset.meal_type input { display: none; }
.meal_date fieldset.meal_type span { display: block; width: 60px; height: 28px; color: #328CFF; line-height: 28px; border: 1px solid #328CFF;  border-radius: 30px; background-color: #fff; }
.meal_date fieldset.meal_type label:has(input:checked) span { color: #fff; border: none; background-color: #328cff; }

.meal_list { padding: 30px 0; }
.meal_list .list { margin-bottom: 30px; }
.meal_list .menu_list { width: 100%; height: 130px; border: 1px solid #d9d9d9; border-radius: 10px; }
.meal_list .menu_list img { width: 130px; height: 128px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.meal_list .menu_list .menu { padding: 20px; height: 110px; overflow-y: hidden; }
.meal_list .menu_list .menu span { display: block; width: 100%; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.meal_date.weekly .date { width: 80%; }

.weekly_list { width: 100%; }
.weekly_list li .list { display: flex; padding: 0 20px; justify-content: space-between; align-items: center; height: 45px; border-bottom: 1px solid #F7F7F7; }
.weekly_list li .list span { padding-left: 5px; font-size: 13px; color: #2c2c2c; }
.weekly_list li .list button { width: 20px; height: 20px; background-image: url(../img/ico-back.png); transform: rotate(90deg); background-size: 20px; }

.weekly_list li.active { flex-direction: column; }
.weekly_list li.active .day_menu { display: flex!important; flex-direction: column; justify-content: space-between; padding: 20px 0 20px 30px; width: 100%; height: auto; background-color: #F7F7F7; }
.weekly_list li.active .day_menu div { margin: 10px 30px 0 0; padding-bottom: 15px; border-bottom: 0.5px dashed #BBBBBB; }
.weekly_list li.active .day_menu div:first-of-type { margin-top: 0; }
.weekly_list li.active .day_menu div:last-of-type { padding-bottom: 0; border-bottom: none; }
.weekly_list li.active .list span { color: #328CFF; font-weight: 600; }
.weekly_list li.active .list button { transform: rotate(270deg); }


/*order_history*/

.order_list li { position: relative; display: flex; flex-direction: column; justify-content: space-between; margin-top: 20px; height: 150px; padding: 15px 20px; border: 1px solid #E4E4E4; border-radius: 15px; }
.order_list li div .btn_qr { width: 52px; height: 24px; padding: 0 10px; color: #fff; border-radius: 5px; background-color: #000; }
.order_list li div .btn_qr img { margin-top: 2px; width: 10px; height: 10px; }
.order_list li a.detail { position: absolute; top: 15px; right: 20px; color: #2c2c2c; font-size: 11px; }

span.status { display: inline-block; margin-left: 10px; width: 45px; height: 20px; font-size: 9.5px; line-height: 20px; border-radius: 5px; }
span.status._1 { background-color: #e6f1ff; }
span.status._2 { color: #fff; background-color: #328CFF; }
span.status._3 { background-color: #eaeaea; }

.order_header { margin: 10px -20px 0!important; padding: 0 24px; height: 60px; background-color: #f7f7f7; }

.order_info { padding: 15px 20px 20px; width: 100%; border: 1px solid #e4e4e4; border-radius: 15px; }
.order_info .menu { width: 100%; padding-right: 5px; }
.order_info .menu .name { margin-right: 5px; }
.order_info hr { margin: 15px 0; width: 100%; }

.order_info.payment hr { width: 100%; margin: 15px 0; }

.btn_receipt { margin-left: 10px; width: 45px; height: 20px; color: #1064CF; font-size: 9.5px; border: 1px solid #1064CF; border-radius: 20px; background-color: #fff; }


/*mypage*/

.my_page { margin: 20px 0; padding: 0 20px; }
.my_page .info { width: 100%; }
.my_page .school { width: 100%; }
.my_page .point { width: 100%; height: auto; padding: 14px 20px; background-color: #e6f1ff; border-radius: 10px; }
.my_page .point a img { width: 15px; height: 15px; margin-top: 2px; }

.my_list li span.title { display: block; width: 100%; height: 36px; padding: 10px 20px; background-color: #F7F7F7; }
.my_list li div { height: 44px; padding: 13px 24px; border-bottom: 1px solid #F7F7F7; }
.my_list li div .btn_detail { width: 20px; height: 20px; }
.my_list li div .btn_detail img { width: 20px; height: 20px; }


.agency_certify .input_group input::placeholder { font-size: 14px; }
.withdraw .input_group input::placeholder { font-size: 14px; }

/*.member_info .member_info_list { margin: 0 -20px; padding: 15px 25px; background-color: #f7f7f7; }*/
/*.member_info .member_info_list li { margin-top: 15px; display: flex; justify-content: space-between; }*/
/*.member_info .member_info_list li:first-of-type { margin-top: 0px; }*/


/* qna */

/*.qna .qna_txt { width: 100%; height: 300px; padding: 15px; border: none; border-radius: 5px; background-color: #f7f7f7; }*/
/*.qna .notice .qna_list { width: 100%; height: 60px; padding: 10px 0;  }*/
/*.qna .notice .qna_list button { width: 100%; height: 40px; }*/
/*.qna .notice .qna_list button > div { height: 40px; }*/
/*.qna .notice .qna_list img { width: 20px; height: 20px; transform: rotate(90deg); }*/


/*card*/

.card_header { display: flex; align-items: center; margin: 10px -20px 0; padding: 0 24px; border: 0; height: 36px; background-color: #f7f7f7; }

.card_list li { height: 100px; padding: 25px 0 25px; border-bottom: 1px solid #F7F7F7; }
.card_list li .img_card { width: 90px; height: 50px; margin-right: 20px; box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2); border-radius: 5px; }
.card_list li button > img { width: 20px; height: 20px; }

.btn_card { justify-content: center; margin-right: 0px; }
.btn_card img { width: 22px; height: 22px; margin-right: 5px; }

.card_register .input_group .row { width: 100%; }
.card_register .input_group .row input::placeholder { font-size: 14px; }
.card_register .input_group .row > div { width: 240px; }
.card_register .input_group #month { margin-right: 10px; background-position: 90% center; }
.card_register .input_group #year { background-position: 90% center; }
.card_register .input_group .row #card_password { color: #2c2c2c!important; width: 110px!important; margin-right: 10px; }




/*member*/

.member_apply .input_group input::placeholder { font-size: 14px; }
.member_apply .input_group .agency select { margin-right: 10px; width: 170px; background-position: 94% center; }

.member_pay .pay_header { display: flex; align-items: center; margin: 20px -20px 0; padding: 0 24px; height: 70px; border: 0; background-color: #f7f7f7; }
.member_pay fieldset.payment_type { border: none; width: 100%; }
.member_pay fieldset.payment_type input { display: none; }
.member_pay fieldset.payment_type span { display: inline-block; width: 100%; height: 50px; line-height: 49px; color: #d9d9d9; border: 2px solid #d9d9d9; border-radius: 7px; background-color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.member_pay fieldset.payment_type label:has(input:checked) span { color: #328cff; border: 2px solid #328cff; }

.member_info input::placeholder { font-size: 14px; }
.member_info .member_info_list { margin: 20px -20px 0!important; padding: 15px 25px; background-color: #f7f7f7; }
.member_info .member_info_list li { margin-top: 15px; display: flex; justify-content: space-between; }
.member_info .member_info_list li:first-of-type { margin-top: 0; }

.button-container.__bottom .btn_wht.withdraw { margin-right: 10px!important; width: 30%; }
.button-container.__bottom .btn_100.withdraw { width: 70%; }


/*history*/

fieldset.history_type { padding: 0 15px; width: 100%; border: none; }
fieldset.history_type label input { display: none; }
fieldset.history_type label span { display: block; width: 150px; height: 28px; color: #328CFF; line-height: 28px; border: 1px solid #328CFF;  border-radius: 30px; background-color: #fff; }
fieldset.history_type label:has(input:checked) span { color: #fFF; border: none; background-color: #328CFF; }

.member_info.history .member_info_list { margin: 20px -24px 0!important; }
.history_list li,
.history_wait li { display: flex; justify-content: space-between; width: 100%; height: 68px; padding: 14px 0 12px; border-bottom: 1px solid #d9d9d9; }
.history_list li .type,
.history_wait li .type { width: 85px; height: 20px; font-size: 12px; font-weight: 600; color: #2c2c2c; background-color: #f0f2f6; border-radius: 5px; text-align: center; }
.history_list li .num,
.history_wait li .num { display: flex; flex-direction: column; width: 35%; margin-right: 0!important; justify-content: center; }
.history_wait li .num .cancel { display: flex; margin-top: 5px; justify-content: right; }
.history_wait li .num .cancel > span { display: flex; width: 50px; height: 20px; font-size: 11px; font-weight: 600; color: #fff; background-color: #ec221f; border-radius: 5px; line-height: 20px; justify-content: center; }

.account .qty span { margin: 0!important; width: 90px; text-align: center; }



/*notice*/

.notice_list, .qna_list { border-bottom: 1px solid #f7f7f7; }
.notice_list button.btn-toggle,  .qna_list button.btn-toggle { width: 100%; height: 60px; padding: 10px 4px; }
.notice_list button.btn-toggle img { width: 20px; height: 20px; transform: rotate(90deg); }
.notice_list.active button.btn-toggle img { transform: rotate(270deg)!important; }
.notice_list .toggle-content, .qna_list .toggle-content { margin: 0 -20px; padding: 20px 24px; background-color: #f7f7f7; }

.qna .input_group input::placeholder { font-size: 14px; }
.qna textarea { width: 100%; height: 300px; padding: 15px; overflow-y: scroll; background-color: #f7f7f7; border: none; border-radius: 5px; }









/*point , qna*/

fieldset.point_type { padding: 0 24px; width: 100%; border: none; }
fieldset.point_type label input { display: none; }
fieldset.point_type label span { display: block; width: 100px; height: 28px; color: #328CFF; line-height: 28px; border: 1px solid #328CFF;  border-radius: 30px; background-color: #fff; }
fieldset.point_type label:has(input:checked) span { color: #fFF; border: none; background-color: #328CFF; }

.point_history .calendar { margin: 20px 0 0; padding: 0 24px; border: 0; height: 36px; background-color: #f7f7f7; }
.calendar .btn_calendar { width: 15px; height: 16px; }
.calendar .btn_calendar img { width: 15px; height: 16px; }

.point_history .point_list li { padding: 15px 24px; height: 70px; border-bottom: 1px solid #D9D9D9; }

#mobileQrCode img {
  display: inline-block !important;
}


.qna_list button.btn-toggle img { width: 20px; height: 20px; transform: rotate(90deg); }
.qna_list.active button.btn-toggle img { transform: rotate(270deg)!important; }

.qna_list div.q p { line-height: 18px; }
.qna_list div.a { margin-top: 20px; padding-top: 15px; border-top: 1px solid #d9d9d9; }


/*receipt*/

.receipt > p { text-align: center; }
.receipt .dashed2 { width: 100%; height: 3px; border-top: 1px dashed #393939; border-bottom: 1px dashed #393939; }
.receipt .dashed { width: 100%; height: 1px; border-top: 1px dashed #393939; }
.receipt .menu { width: 35%; text-align: left; padding-left: 5px; font-size: 14px; }
.receipt .menu.opt { padding-left: 15px; }
.receipt .store { display: inline-block; width: 100%; padding-left: 5px; text-align: left; }
.w20 { width: 20%; min-width: 40px; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.num { text-align: right; margin-right: 15px; }


/*info*/

.member_info .info_header { display: flex; align-items: center; height: 36px; padding: 10px 20px; border: 0; background-color: #f7f7f7; }
.member_info .login ul li { display: flex; flex-direction: column; justify-content: space-between; min-height: 90px; padding: 18px 24px; border-bottom: 1px solid #f7f7f7; }
/*
.member_info ul li.phone.active { min-height: 165px; }
*/
.member_info ul li.active { padding-bottom: 10px!important; }
.member_info ul li.active .input_group { display: block; }
.member_info ul li.active .input_group.certify { display: none; }
.member_info ul li.active .input_group.btn { display: flex; }


.member_info ul li .btn_change { font-size: 13px; font-weight: 600; color: #328CFF; border: none; }

.member_info ul li .input_group { display: none; }
.member_info ul li .input_group input { width: 100%; height: 34px; font-size: 14px; }
.member_info ul li .input_group input::placeholder { font-size: 13px; }

.member_info ul li .input_group.btn input { width: 75%; }

.btnChange { display: none; }
.btnChange.active { display: block; }

.member_info .phone .input_group .input-wrapper { position: relative; flex: 1; }
.member_info .phone .input_group .input-wrapper .red.count { position: absolute; top: 45%; right: 15px; transform: translateY(-50%); font-size: 12px; }




@media screen and (max-width: 360px) {
    .input_group input { width: 215px; }
    .input_group select { width: 215px; }
    .input_group div.phone { width: 215px!important; }
    .input_group div.phone input { width: 150px!important; }
    .input_group div.phone button { width: 60px; }
    .input_group div.id_number { width: 215px!important; }
    .input_group div.id_number input { width: 150px!important; }
    .input_group div.id_number button { width: 60px!important; }
    .input_group .w215 { width: 215px!important; }
    .member_apply .input_group div.id_number input { width: 215px!important; }
    .member_apply .input_group #input_units { width: 100px!important; }
    .mealTkt_gift input { width: 160px!important; }
    .mobileTkt span::after { content: '모바일\A상품권'; white-space: pre; }
    .mobileTkt span { visibility: hidden; position: relative; }
    .mobileTkt span::after { position: absolute; top: 0; left: 35%; visibility: visible; }
    .mobileTkt button { padding: 3px 0!important; }
    .meal_date.weekly .date { width: 90%; }
    fieldset.point_type label span { width: 90px; }
}