@charset "utf-8";
html, body, td, input { height: 100%; font-size:100%; color: var( --dark-grey );}
body { overflow-x: hidden; overflow-y: auto; font-size: 14px; }
html,body{height: 100%;}
li { list-style: none; }
a {color: inherit; text-decoration: none; outline: hidden}
a:focus { outline:none; }
* { 
	margin: 0; padding: 0; -webkit-text-size-adjust: none;  -webkit-overflow-scrolling: touch; box-sizing: border-box;  font-family:-apple-system, BlinkMacSystemFont, sans-serif, "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.5px; }

/*1픽셀 라인들*/
.list.order_cart:after{background-color: var( --dark-grey ); height: 1px; position: absolute; left: 0; bottom: 0; content: ""; width: 300%; transform: scale(.334); transform-origin: left bottom; opacity: 1;}
.menu_detail .list.option:after{background-color: var( --dark-grey ); height: 1px; position: absolute; left: 0; top: 0; content: ""; width: 300%; transform: scale(.334); transform-origin: left top; opacity: 1;}
div.review .list:after {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left top; width: 300%; opacity: .3; left: 0; top: 0; content: "";}
.menu_item:after,.list li:after,.payment .mid .article:after ,.member.login .login_form li:first-child:after, .mid .forms.small.choose li:after, .mid .forms.small table td:after,.member .forms dd:after,div.review .list li:after,.member .forms li .list.single_row:after{background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; bottom: 0; content: ""; width: 300%; opacity: .3;}
.tab_bar:after, .mid .forms.small:after {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left top; width: 300%; opacity: 1; left: 0; top: 0; content: "";}
.no-1pxline:after {display: none !important;}

.scroll_mode .header.main .tabs{ padding: 20px 0; box-shadow: 0px 5px 10px rgba(0,0,0,0.15); background-color: #fff; z-index: 100; transform: translate3d(0,0,10px)}
.scroll_mode .header.main .title,  .scroll_mode .header .right_btn_set{height: 0; transition: .2s; overflow: hidden; }
.scroll_mode .tab_bar {bottom: -100px; }

.header.main {background-color: #fff}
.contents, .mid {min-height: 100%;}
.wrap {height: 100%; }

.review {background-position: left center; background-repeat: no-repeat;  background-size: auto 90%;}
.review.best {background-image: url("../images/icon/review_best.svg"); padding-left: 18px; font-weight: bold; color: var(--orange)}
.review.good {background-image: url("../images/icon/review_good.svg"); padding-left: 18px; font-weight: bold; color: var(--orange)}
.review.normal {background-image: url("../images/icon/review_normal.svg"); padding-left: 18px; font-weight: bold; color: var(--orange)}
.review.bad {background-image: url("../images/icon/review_bad.svg"); padding-left: 18px; font-weight: bold; color: var(--orange)}
.review.notbad {background-image: url("../images/icon/review_notbad.svg"); padding-left: 18px; font-weight: bold; color: var(--orange)}
.review.worst {background-image: url("../images/icon/review_worst.svg"); padding-left: 18px; font-weight: bold; color: var(--orange)}

.what_this {display: inline-block; }
.what_this img {height: 16px; vertical-align: middle; margin-top: -2px;}
.what_this.on {position: relative}
.what_this:after {content: "";  font-size: 11px; color: var(--battleship-grey);}
.what_this.on:after {content: "힌트가 들어갑니다"; position: absolute; top: 20px; right: -5px; max-width: 40vw; background-color: #fff; box-shadow: 6px 6px 12px rgba(0,0,0,0.15); font-size: 11px; font-weight: normal;  word-break: keep-all; padding: 5px; border-radius: 5px; text-align: right; z-index: 10; transition: .1s; }
.what_this.on:before{display: block; content: ""; width: 0;height: 0; border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #fff; position: absolute; top: 12px; right: 3px; z-index: 31}
.store_bene li:first-child .what_this.on:after {content: "내폰에로 주문하시면 할인혜택을 드립니다."; width: 100px;}
.store_bene li:last-child .what_this.on:after {content: "5,000원당 스탬프 1개씩 적립해드리며 10개 적립시 음료 무료 쿠폰을 드립니다."; width: 120px;}
.header.full.mypage_main .my_area .infos .info.point span:first-of-type .what_this.on:after {content: "룰렛포인트로 룰렛이용이 가능합니다.";}
.header.full.mypage_main .my_area .infos .info.point span:nth-of-type(2) .what_this.on:after {content: "1GOB로 10룰렛포인트로 교환이 가능하며, 추후 제휴처에서 현금처럼 사용가능합니다."; white-space: normal; width: 200px}

.btn_global { color: #fff; font-size: 0; font-weight: bold; position: fixed; left: 0; bottom: 0; width: 100%; background-image: linear-gradient(to bottom, #ffffff00, #ffffff 84%); z-index: 41; transition: .2s; white-space: nowrap; padding: 10px 20px; }
.btn_global a {display: block; height: 60px; line-height: 60px; text-align: center; border-radius: 8px; background-color:var( --dark-grey ); font-size: 16px; }
.btn_global a.bgcolor-main, .edit .btn_global a , .store_review .btn_global a{background-image: linear-gradient(to left, #f86176, #ffb28a); background-color: transparent;}
.btn_global a:first-child:nth-last-child(2),.btn_global a:first-child:nth-last-child(2) ~ a {width: 60%; display: inline-block; border-radius: 8px 0 0 8px; background-color: var(--light-grey);}
.btn_global a + a {width: 40% !important; border-radius: 0 8px 8px 0 !important; background-image: linear-gradient(to left, #f86176, #ffb28a); background-color: transparent;}
.btn_global.halfhalf a:first-child:nth-last-child(2),.btn_global.halfhalf a:first-child:nth-last-child(2) ~ a {width: 50%; display: inline-block; border-radius: 8px 0 0 8px; background-color: var(--light-grey);}
.btn_global.halfhalf a + a {width: 50% !important; border-radius: 0 8px 8px 0 !important; background-image: none; background-color: var(--battleship-grey) !important;}

.btn_global a img { vertical-align:middle; margin-right:5px;; margin-top:-3px}
.btn_global.notyet {bottom: -100%; transition: .2s;}
.btn_global.type2 { background: rgba(255,255,255,1); padding: 0;}
.btn_global.type2:after {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left top; opacity: 1; display: block; width: 300%; left: 0; top:0; content: ""; margin-top: 0;}
.btn_global.type2 a{ color: var(--dark-grey); background: none; margin: 0; height: auto; line-height: normal;}
.btn_global.type2 a .menu_name:before {content: ""; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: left center; width: 24px; height: 24px; margin-right: 5px; }
.cafe .btn_global.type2 .cart_name:before {background-image: url("../images/btn/menu_order_coffee_black.svg"); margin-top: -4px}
.food .btn_global.type2 .cart_name:before {background-image: url("../images/btn/menu_order_food_black.svg"); margin-top: -4px}
.btn_global.type2 .hide {display: none;}
.btn_global.type2 .thumb_menus_small {white-space: nowrap;  padding: 10px 0 10px 20px; height: 10vw; position: relative;  box-sizing: content-box; overflow-x: auto;}
.btn_global.type2 .thumb_menus_small.overflow {margin-top: -100px; padding-top: 110px;}
.btn_global.type2 .thumb_menus_small::-webkit-scrollbar {display:none;}
.btn_global.type2 .thumb_menus_small .thumb_menu {width:calc(10vw) !important; height:calc(10vw); margin-right: 5px; vertical-align: top; display:inline-block;  animation-name: cart_thumb;  animation-duration: .35s; animation-timing-function: ease-in-out; border-radius: 5px; position:relative; }
.btn_global.type2 .thumb_menus_small .thumb_menu span.sale {display: none;}
@keyframes cart_thumb {0% { transform: scale(2); margin-top: -150px } 70% { transform: scale(1.2); margin-top: 6px }  85% { transform: scale(.9); margin-top: 0 }  95% { transform: scale(1.1); margin-top: -2px } 100% {transform: scale(1); margin-top: 0;} }
.btn_global.type2 .thumb_menus_small #last {position: absolute; right: 0; bottom: 0; width: 5px; height: 100%;}
.btn_global.type2 .thumb_menus_small .thumb_menu .count {font-size: 10px; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); position: absolute; right: 5px; bottom: 5px; font-weight: bold;}
.btn_global.type2 .thumb_menus_small .thumb_menu.quan1 .count {display: none;}
.btn_global.type2 a {display: block; display: flex; padding-left: 20px; padding-right: 20px; padding-bottom: 10px; align-items: center; justify-content: center;}
.btn_global.type2 a .cart_name {flex-grow: 1; text-align: left; font-weight: normal; font-size: 12px; color: var(--mid-grey); position: relative}
.btn_global.type2 a .cart_name .count {position: relative; display: inline-block}
.btn_global.type2 a .cart_name .count span{display: none;}
.btn_global.type2 a .cart_name .blink {position: absolute; right: -5px; top: -15px; font-size: 10px; background-color: var(--main-color); padding:3px 5px; color: #fff; font-weight: bold; line-height: 1; border-radius: 3px; opacity: 0}
.btn_global.type2  .thumb_menus_small .thumb_menu .blink.adding {animation-name: adding2; animation-duration: 1.5s}
@keyframes adding {0%{ opacity: 1; top: -15px} 100%{ opacity: 0; top: -30px} }
.btn_global.type2 a .order_next {flex-grow: 1; text-align: right; font-size: 18px;}
.btn_global.type2 a .cart_name .price {color: var(--main-color); font-size: 16px; font-weight: bold}
.btn_global.type2 a .order_next i {font-size: 1.2em; vertical-align: middle; margin-top: -3px; margin-right: 3px;}
.btn_global.type2 .cart_name img {display: none;}
.btn_global.type2 .cart_name span.count {background-color: var(--main-color); display: inline-block; margin-left: 5px; width: 24px; height: 24px; line-height: 24px; font-size: 12px; border-radius: 30px; text-align: center; color: #fff; margin-top: -3px; vertical-align: middle}
.btn_global.incomplete a {background-color: var(--lighten-grey) !important; background-image: none;}
.btn_global.add {background-color: var(--dark-grey); background-image: none}
.btn_global.add a {background-color: none;}

.btn_global.type2  .thumb_menus_small .thumb_menu .blink {position: absolute; right: -5px; top: -5px; font-size: 10px; background-color: var(--main-color); padding:3px 5px; color: #fff; font-weight: bold; line-height: 1; border-radius: 3px; opacity: 0}
.btn_global.type2 a .cart_name .blink.adding {animation-name: adding; animation-duration: 1.5s}
@keyframes adding2 {0%{ opacity: 1; top: 15px} 100%{ opacity: 0; top: -5px} }

.small_btn { color: var(--battleship-grey); font-size: 12px; display: inline-block;  padding: 9px 15px; border-radius: 30px; border: 1px solid var(--lighten-grey)}
.btn_big {display: block; height: 60px; line-height: 60px; text-align: center; border-radius: 8px; color:var( --light-grey ); font-size: 16px; margin:20px; border:2px solid var(--lighten-grey) }

.thumb {-webkit-mask-image: url(../images/img/round_rect_mask.svg); -webkit-mask-size:cover; background-position: center; width: 70px; height: 70px; background-size: cover; display: inline-block; vertical-align: top; position: relative; flex-shrink: 0; background-repeat: no-repeat}
.thumb.no_store {background-color: var(--pale-grey); background-size: auto 60%;}

.thumb_menu { height: 80px; width: 80px; background-size: cover; background-position: center; border-radius: 8px; display: inline-block; position: relative; background-color: var(--pale-grey); flex-shrink: 0}
.thumb_menu label, .thumb label,.store.edit .header .right_btn_set label, .thumb_profile label, .thumb label {width: 100%; height: 100%; cursor: pointer; text-align: center; font-size: 36px; color: #fff; text-shadow: 6px 6px 12px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; background: url("../images/btn/camera_grey.svg") no-repeat center center; background-size: 40% auto; position: absolute; border:2px dotted var(--lighten-grey); border-radius: 5px;}
.thumb_menu label i, .thumb label i ,.store.edit .header .right_btn_set label i , .thumb_profile label i, .thumb label i {display: none;}
.edit .thumb_menu[style] label,.edit .thumb[style] label, .store.edit .header.full .right_btn_set label, .thumb_profile label,.thumb_menu[style] label {background-image: url("../images/btn/camera.svg"); border: none;}


.thumb_profile label i {display: none;}
.thumb_profile {width: 90px; height: 90px; border-radius: 50%; background-size: cover; background-position: center; background-image: url(../images/img/profile_default.jpg); box-shadow: 10px 10px 20px 0 rgba(255,0,0,0.4); position: relative}
.thumb_menu  input[type="file"], .thumb  input[type="file"] {font-size: 0; opacity: 0; height: 0;}
.thumb_menu label i, .thumb label i {display: none;}
.edit .thumb_menu[style] label,.edit  .thumb[style] label {border: none; background-color: transparent; background-image: url(../images/btn/camera.svg)}
.thumb_menu.noimg { background-image: url("../images/img/logo_sample1@3x.png"); overflow: hidden}
.thumb_menu.noimg:before {background-image:linear-gradient(white, white); width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; opacity: .7; z-index: 2}
.thumb_menu.noimg:after {background-image:linear-gradient(black, black); width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; mix-blend-mode: saturation; z-index: 1}
.thumb_menu[style] {background-color: transparent}
.thumb_menu a {display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0}
.menu_item .list.horizon li .thumb_menu.noimg + .infos { width: 100%; padding-left: 0;}
.menu_item .list.horizon .thumb_menu.noimg { display: none;}
.menu_item .list.horizon li.soldout .thumb_menu.noimg { display: block;}
.menu_item .list.horizon li.soldout .thumb_menu.noimg + .infos {width: calc(100% - 80px); padding-left: 15px;}

/*탭바*/
.main .contents {padding-top: 0;}
.tab_bar {font-size: 0; white-space: nowrap; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 21; background-color: #fff; transition: .15s}
.tab_bar li {font-size: 0px; font-weight: bold; display: inline-block; text-align: center; width: 20%; color: var(--light-grey); transition: .2s;  padding-bottom: 10px; position: relative}
.tab_bar li .count {display: block; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: bold; line-height: 20px; text-align: center; background-image: linear-gradient(to left, #f86176, #ffb28a ); color: #fff; box-shadow: 2px 2px 6px rgba(255,89,89,0.3);  position: absolute; top: 5px; right: 20%; z-index: 2}
.tab_bar li:after {font-size: 10px; content: ""}
.beta .tab_bar li:after {display: none;}
.tab_bar li:first-child:after {content: "홈"}
.tab_bar li:nth-child(2):after {content: "이벤트"}
.tab_bar li:nth-child(3):after {content: "주문내역"}
.tab_bar li:nth-child(4):after {content: "매장톡"}
.tab_bar li:nth-child(5):after {content: "마이페이지"}
.tab_bar li .icon {height: 40px; background: center 10px no-repeat;}
.tab_bar li:first-child .icon {background-image: url("../images/btn/tabbar1.svg")}
.tab_bar li:nth-child(2) .icon {background-image: url("../images/btn/tabbar2.svg")}
.tab_bar li:nth-child(3) .icon {background-image: url("../images/btn/tabbar3.svg")}
.tab_bar li:nth-child(4) .icon {background-image: url("../images/btn/tabbar4.svg")}
.tab_bar li:nth-child(5) .icon {background-image: url("../images/btn/tabbar5.svg"); background-size: auto 24px;}
.tab_bar li.active {color: var(--main-color)}
.tab_bar li.active:first-child .icon {background-image: url("../images/btn/tabbar1_active.svg")}
.tab_bar li.active:nth-child(2) .icon {background-image: url("../images/btn/tabbar2_active.svg"); }
.tab_bar li.active:nth-child(3) .icon {background-image: url("../images/btn/tabbar3_active.svg")}
.tab_bar li.active:nth-child(4) .icon {background-image: url("../images/btn/tabbar4_active.svg")}
.tab_bar li.active:nth-child(5) .icon {background-image: url("../images/btn/tabbar5_active.svg")}

.empty {padding: 50px 20px 50px 0; text-align: center;}
.empty .img {background: no-repeat top center; height: 155px;}
.empty h4 {font-size: 18px}
.empty p {font-size: 14px; color: var(--battleship-grey); }
.empty p + a{margin-top: 15px;}
.empty.no_roulette {padding-right: 20px; padding-top: 0; padding-bottom: 20px;}
.empty.no_roulette .img{background-image: url("../images/img/no_roulette.png"); background-size: auto 100%; margin-bottom: 15px; height: 130px;}
.order_log .empty .img {background-image: url("../images/img/empty.svg")}
.order .empty {padding: 40px 0 !important}
.order .empty .img {background-image: url("../images/img/empty_cart.svg"); height: 125px; }
.review .empty .img {background-image: url("../images/img/empty_review.svg")}
.mypage .empty {padding:10px 0 20px 0; overflow: hidden; text-align: left}
.mypage .empty .img {float: left; width: 57px; height: 57px; margin-right: 20px; background-position: center center}
.mypage .empty .img {float: left; width: 57px; height: 57px; margin-right: 20px; background-position: center center}
.mypage .empty.recent_order .img {background-image: url("../images/img/empty_small.svg"); }
.mypage .empty h4 {font-size: 14px; margin-top: 10px; margin-bottom: 3px;}
.mypage .empty p {font-size: 12px}
.mypage .empty.store .img {background-image: url("../images/img/store_empty.svg"); }
.mypage .empty.my_only_menu .img {background-image: url("../images/img/empty_my_only_order.svg"); }

.add_more_order { height: 60px; ;line-height: 56px; display: block; border-radius: 8px; border: 2px dotted var(--light-grey); color: var( --light-grey ); font-weight: bold; text-align: center; font-size: 16px}
.add_more_order i {vertical-align: middle; margin-right: 5px; margin-top: -2px}


.tabs a {transition: .2s}
.tabs_top {white-space: nowrap; font-size: 0}
.tabs_top a.tab{line-height: 48px; height: 50px; text-align: center; font-size: 14px; color: var( --mid-grey ); border-top: 1px solid var(--light-grey); border-left: 1px solid var(--light-grey); border-right: 1px solid var(--light-grey); border-bottom: 1px solid var( --dark-grey ); position: relative; z-index: 1; display: inline-block; width: 50%}
.tabs_top a.tab + a {margin-left: -1px;}
.tabs_top a.tab.active {border-left-color: var( --dark-grey ); border-top-color: var( --dark-grey ); border-right-color: var( --dark-grey ); border-bottom-color: #fff; color: var( --dark-grey ); font-weight: bold; z-index: 2}
.tabs_top + .list.order_cart:before {display: none;}

.mid .sector.second {white-space: nowrap;}
.tab_contents {opacity: 0; transition: .2s; display: none }
.tab_contents.active {opacity: 1; display: block;}

/*.system_alert { position: fixed; width: 100%; height: 100%; text-align: center; opacity:0; display: none; top: 0}
.system_alert .alert_content {display: flex; align-items: center; justify-content: center; height: 100%;}
.system_alert .alert_content .message {max-width: 90%; box-shadow: 9px 9px 16px rgba(0,0,0,0.1); background-color: var(--dark-grey); border-radius: 8px; padding: 25px;}
.system_alert h6{font-size: 18px; color: #fff }
.system_alert p {color: var(--light-grey)}
.system_alert.on {display: block; animation: alert_on 1.5s ;  z-index: 60;}*/

.system_alert { position: fixed; width: 100%; z-index: 30; transition: .2s; display: none; opacity: 0}
.system_alert .alert_content {}
.system_alert .alert_content .message {  background-color: var(--dark-grey); padding: 20px;}
.system_alert h6{font-size: 18px; color: #fff }
.system_alert p {color: var(--light-grey)}
.system_alert.on {display: block;  bottom: 59px; animation-name: alert_on; animation-timing-function: ease-in-out; animation-duration: 1s  }
@keyframes alert_on {0% {opacity: 0} 20% {opacity: 1} 80% {opacity: 1} 100% {opacity: 0}}

.modal.complete {position: fixed; top: 50%; left: 50%; margin-left: -150px; width: 300px; text-align: center; height: 300px; margin-top: -150px; z-index: 40; border-radius: 50%; overflow: hidden; background-color: #fff; box-shadow: 30px 30px 60px rgba(0,0,0,0.3); border: 5px solid var(--main-color); animation: complete_push .2s infinite; transition:.15s; transform: scale(0); transform-origin: center center;}
.modal.complete.on {transform: scale(1);}
.modal.complete img {width: 70%;}
.modal.complete h1 {font-size: 24px; margin-top: -10px}
.modal.complete p {color: var(--mid-grey); font-size: 16px; margin-top: 10px;}
.modal.complete p.substr {margin-top: 0; font-size: 14px; color: var(--light-grey)}
@keyframes complete_push { 0% {left: 49%} 50% {left: 51%} 100% {left: 49%}}


/*헤더*/
.header {position: fixed;  width: 100%; white-space: nowrap; transition: 0; color: var( --dark-grey ); top: 0; left: 0; -webkit-transform: translateZ(0); min-height: 50px; z-index: 20;}
.header.dark {color: #fff}
.header.full {background-size: cover; background-position: center;  height: 228px;}
.header.full:after {display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 0; transition: .2; pointer-events: none;}
.header .title { width: 100%; text-align: center; position: relative; white-space: normal; z-index: 2; transition: .15s}
.header.full .title {padding: 30px 0 55px; pointer-events: none;}
.header .title .name {margin-top: 10px; font-size: 18px; font-weight: bold}
.header .title .substr {margin: 5px 20px; font-size: 12px; position: relative; z-index: -1; word-break: keep-all;}
.header .title .infos {white-space: nowrap; font-size: 0; font-weight: 400; position: relative; z-index: -1 }
.header .title .infos span{position: relative; }
.header .title .infos span + span {margin-left:10px; padding-left: 10px;}
.header .title .infos span + span:before {position: absolute; background-color: rgba(255,255,255,0.3); width: 1px; height: 10px; left: 0; top: 50%; margin-top: -5px; content: ""; }
.header.full .bx-wrapper, .header.full .bx-wrapper .bx-viewport  {height: 100%;}

.bx-wrapper .bx-pager { text-align: center; font-size: 10px;  z-index: 1; padding: 10px ;}
.header .bx-wrapper .bx-pager { right: 10px; padding: 5px 10px !important; border-radius: 30px; background-color: rgba(0,0,0,0.2); line-height: 1; color: rgba(255,255,255,0.5) !important; position: absolute; bottom: 10px;}
.header .bx-wrapper .bx-pager { bottom: 35px; right: 20px;}
.header.fixed .bx-wrapper {display: none;}

.header.full .bg_set, .header.full .bx-wrapper {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.header.full .bg_set li {height: 100%; background-size: cover; background-position: center}
.header .right_btn_set { position: absolute; line-height: 50px; height: 50px; text-align: right; right: 20px; top: 0; font-size: 0; z-index: 4}
.header .right_btn_set .btn_qr { background-image: url("../images/btn/scan_qr.svg"); width: 20px; min-width: 20px}
.header .right_btn_set .btn_qr input {opacity: 0}
.edit .header .right_btn_set {width: 50px;}
.mypage.edit .header .right_btn_set {width: auto;}
.header .right_btn_set > * {min-width: 30px; height: 50px; display: inline-block; background-repeat: no-repeat; background-position: left center; vertical-align: top; font-size: 14px; position: relative; margin-left: 20px; box-sizing: content-box;}
.header .right_btn_set > a.talk {width: 22px; background-image: url(../images/btn/talk_black.svg); min-width: 22px;}
.header .right_btn_set > a.mypage {width: 22px; background-image: url("../images/btn/mypage_black.svg"); min-width: 22px;}
.header.dark .right_btn_set > a.mypage {width: 22px; background-image: url("../images/btn/mypage_white.svg");}
.header.dark .right_btn_set .btn_qr  { background-image: url("../images/btn/scan_qr_white.svg");}

.header.dark .right_btn_set .talk { background-image: url(../images/btn/talk_white.svg)}
.header .right_btn_set a.talk .push {border-radius: 50%; width: 8px; height: 8px; vertical-align: middle; animation-name: push_on; animation-timing-function:ease-in-out; animation-duration: 0.5s; animation-iteration-count: infinite; display: none; position: absolute; top: 15px; right: 0}
.header .right_btn_set a.talk .push.on{display: inline-block}
@keyframes push_on {0% {top: 15px;} 50% {top: 10px;} 100% {top: 15px;}}

.cafe .header .right_btn_set a.order_list {width: 22px; background-image: url(../images/btn/menu_order_coffee_black.svg); background-position: right 10px}
.cafe .header.dark .right_btn_set a.order_list{width: 22px; background-image: url(../images/btn/menu_order_coffee.svg)}
.food .header .right_btn_set a.order_list {width: 22px; background-image: url(../images/btn/menu_order_food_black.svg); background-position: right 10px}
.food .header.dark .right_btn_set a.order_list{width: 22px; background-image: url(../images/btn/menu_order_food.svg)}

.header .right_btn_set a .count {display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-weight: bold; font-size: 12px; color: #fff; border-radius: 50%; white-space: nowrap; position: absolute; top: 5px; right: -10px; transition: .2s; transform: scale(0); }
.header .right_btn_set a .count.show {transform: scale(1); }

.header .right_btn_set a .order_summary { border-radius: 5px; font-size: 10px; position: absolute; max-width: 500%; white-space: nowrap; right: 0; top: 42px; text-align: right;  padding:0 7px; line-height: 24px; color: #fff; transition: .2s; overflow: hidden; height: 0; }
.header .right_btn_set a .order_summary:before { width: 0px;height: 0px;border-top:5px solid none;border-bottom:5px solid var(--main-color);border-right: 5px solid transparent;border-left: 5px solid  transparent; content: ""; position: absolute; top: -5px; right: 8px}
.header .right_btn_set a .order_summary.show {height: 24px; overflow: visible}
.header .right_btn_set a.close {width: 16px; min-width: 16px; background-image: url(../images/btn/close_black.svg)}
.header.dark .right_btn_set a.close { background-image: url(../images/btn/close_white.svg)}

.header .left_btn { position: absolute; z-index: 3; white-space: nowrap; line-height: 50px; height: 50px; padding-left: 20px; left: 0; top: 0}
.header .left_btn a {width: 50px; height: 50px; display: inline-block;  }
.header .left_btn a.back {width: 26px; height: 50px; background-repeat: no-repeat; background-position: left center; background-image: url(../images/btn/back_black.svg)}
.header .left_btn a.back.close {width: 20px; height: 50px; background-repeat: no-repeat; background-position: left center; background-image: url(../images/btn/close_black.svg)}
.header.dark .left_btn a.back { display: inline-block; background-image: url(../images/btn/back_white.svg)}
.header.dark .left_btn a.back.close { display: inline-block; background-image: url(../images/btn/close_white.svg)}

.header.fixed, .header.side_style { line-height: 50px; height: 50px; /*background: rgba(255,255,255,1) !important;*/ z-index: 29; transition: .2s; background: #fff !important  }
.header.fixed:after {background-color: var( --dark-grey ); height: 1px;  transform: scale(.334); transform-origin: left bottom; opacity: 1; display: block; width: 300%; position: absolute; top: 50px; left: 0;}
.header.fixed .title, .header.side_style .title { overflow: hidden; height: 50px; line-height: 50px; padding: 0;}
.header.fixed .title .thumb, .header.side_style .title .thumb {display: inline-block; vertical-align: middle; width: 30px; height: 30px;}
.header.fixed .title .name, .header.side_style .title .name {margin-top: 0; display: inline-block}
.header.fixed.dark {background: transparent !important; }

.header.main {line-height: 50px;  z-index: 29;/* background: rgba(255,255,255,1)*/}
.header.main:after {border-radius: 24px 24px 0 0; height: 24px}
.header.main .right_btn_set{line-height: 50px;}
.header.main .right_btn_set a{height: 50px;}
.header.main .title {text-align: left; padding-left: 20px;}
.header.main .title .name { font-size: 21px; margin-top: 0; font-weight: 800; height: 50px; }
.header.main .title .name a.loc {display: inline-block; margin-left: 5px;}
.header.main .title .name img{vertical-align: middle; margin-top: -4px; margin-left: 5px}
.header.main .right_btn_set a.btn_search { background-image: url("../images/btn/search.svg"); width: 20px; min-width: 20px;}
.header.main .right_btn_set .btn_qr { background-image: url("../images/btn/scan_qr.svg"); width: 20px; min-width: 20px; }
.header.main .right_btn_set .btn_qr input {opacity: 0}

.header.main .tabs { line-height: 1; font-weight: 800; color: var(--light-grey); font-size: 0px; white-space: nowrap; overflow-y: auto; padding: 10px 0 10px 5px;}
.header.main .tabs a {padding-left: 15px;font-size: 18px; outline:none; }
.header.main .tabs a:last-of-type {padding-right: 20px;}
.header.main .tabs a.active {color: var(--main-color)}
.header.main .tabs .more {display: inline-block}

.mid, .contents {position: relative;}
.mid {position: relative; overflow-x: hidden}

.store .mid {background-image: linear-gradient(transparent, var(--pale-grey) 50% , var(--pale-grey) 100% ) }
.store .mid > * {}
.store .contents { }

.header.full + .contents,.header.full .popup.advanced {margin-top: 200px; z-index: 20; padding-top:0 }
.header + .contents{ padding-top: 50px; }
.header.main + .contents{ padding-top: 100px; }

.header.full.mypage_main:after {display: none;}
.header.full.mypage_main {height: auto;}
.header.full.mypage_main.type1 {background-image: linear-gradient(to left, #f86176, #ffb28a);}
.header.full.mypage_main .my_area {padding: 20px; display: flex; align-items: center;}

.header.full.mypage_main .my_area .infos { padding-left: 20px; font-weight: bold; color: #fff}
.header.full.mypage_main .my_area .infos .info.name {font-size: 21px; font-weight: 800; overflow: hidden; width: calc(100% - 30px)}
.header.full.mypage_main .my_area .infos .info.name .id_area {flex-grow: 1; display: flex; align-items: center; width: calc(100% - 25px); float: left}
.header.full.mypage_main .my_area .infos .info.name span.id {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.header.full.mypage_main .my_area .infos .info.name .synced { background-repeat: no-repeat; background-size: 100% 100%; border-radius: 3px; width: 20px; height: 20px; margin-left: 8px; vertical-align: middle; flex-shrink: 0; flex-grow: 0; flex-basis: 20px}
.header.full.mypage_main .my_area .infos .info.name .synced.facebook {background-image: url("../images/btn/login_facebook@3x.png")}
.header.full.mypage_main .my_area .infos .info.name .synced.google {background-image: url("../images/btn/login_google@3x 2.png")}
.header.full.mypage_main .my_area .infos .info.name .synced.naver {background-image: url("../images/btn/login_naver@3x.png")}
.header.full.mypage_main .my_area .infos .info.name .synced.kakao {background-image: url("../images/btn/login_kakao@3x.png")}
.header.full.mypage .my_area .infos .info.name a.more{background-image: url("../images/btn/mypage_arrow_right_white.svg"); flex-grow: 0; flex-shrink: 0; justify-content: flex-end;}
.header.full.mypage_main .my_area .infos .info.name input {padding: 0; font-weight: bold; font-size: 21px; background-color: transparent; color: #fff; height: auto; width: 80%; float: left}
.header.full.mypage_main .my_area .infos .info.loc {font-size: 16px; margin: 5px 0; clear: both; }
.header.full.mypage_main .my_area .infos .info.loc a img{mix-blend-mode:screen; height: 18px; vertical-align: middle; margin-top: -2px;}
.header.full.mypage_main .my_area .infos .info.point {font-size: 16px; letter-spacing: 0; }
.header.full.mypage_main .my_area .infos .info.point span:first-of-type {margin-left: 0; display: inline-block}
.header.full.mypage_main .my_area .infos .info.point span:nth-of-type(2) {margin-left: 5px; padding-left: 10px; position: relative; display: inline-block}
.header.full.mypage_main .my_area .infos .info.point span:nth-of-type(2):before {content: ""; position: absolute; width: 1px; height: 16px; background-color: #fff; left: 0; top: 50%; margin-top: -8px; opacity: .2;}
.header.full.mypage_main .my_area .infos .info.point span img {margin-right: 3px; height: 16px}
.header.full.mypage_main .my_area .infos .info a {margin-left: 4px;}
.header.full.mypage_main .my_area .infos .info img {vertical-align: middle; margin-top: -2px;}
.header.full.mypage_main .my_area .infos .name span.sns {display: inline-block; width: 20px; height: 20px; margin-left: 5px; background-repeat: no-repeat; background-size: 100% auto; vertical-align: middle; margin-top: -4px;}
.header.full.mypage_main .my_area .infos .name span.sns.kakao {background-image: url("../images/btn/login_kakao@3x.png")}


.mid .sector { background-color: #fff; border-radius: 24px 24px 0 0 }
.mid .sector .store_info {padding: 20px 20px 20px; overflow-x: hidden; margin-bottom: -50px}
.mid .sector .sect_header{ padding: 10px 0}
.mid .sector .sect_header:after {content: ""; display: block; clear: both}
.mid .sector .sect_header h3 {font-size: 18px; float: left; font-weight: 800}
.mid .sector .sect_header .rel_btns {text-align: right; float: right; font-size: 0; white-space: nowrap}
.mid .sector .sect_header .rel_btns a {display: inline-block; font-size: 12px; background-position: right center; background-repeat: no-repeat; width: 20px; height: 20px; vertical-align: top; margin-left:20px; box-sizing: content-box}
.mid .sector .sect_header .rel_btns a.share {background-image:url(../images/btn/share.svg); width: 22px}
.mid .sector .sect_header .rel_btns a.fav {background-image:url(../images/btn/like_off.svg); width: 18px; transition: .2s}
.mid .sector .sect_header .rel_btns a.fav.on {background-image:url(../images/btn/like_on.svg)}
.mid .sector .cont {font-size: 12px; color: var( --battleship-grey ); word-break: keep-all; margin-bottom: 20px; line-height: 1.4}

.mid .store_bene { padding: 20px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 10px; }
.mid .store_bene:after {display: block; content: ""; clear: both}
.mid .store_bene li {float: left; width: 50%; font-size: 21px; font-weight: 300; color: var( --mid-grey );}
.mid .store_bene li h5{ font-size: 14px; color: var( --dark-grey ); margin-bottom: 5px; }

.mid .store_info .bx-viewport { overflow: visible !important}
.mid .small_banner { overflow: visible !important; margin-left: -20px}
.mid .small_banner li{background-size: auto 100%; background-repeat: no-repeat; background-position: right center; overflow: hidden; padding: 0 20px; height: 90px; border-radius: 8px; border: solid 1px #e4e7eb; display: flex; align-items: center; justify-content:flex-start; margin-left: 20px; }
.mid .small_banner li .banner_cont {width: 100%;}
.mid .small_banner li h6 {font-size: 14px; margin-bottom: 5px; }
.mid .small_banner li p {font-size: 12px; color: var( --battleship-grey ); width: 70%; overflow: hidden; white-space: normal; line-height: 1.2; max-height: 2.4em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}



.mid .sector.second {  padding-top: 50px; background-color: transparent}
.mid .sector.second .menu_info {border-radius: 0 0 0 0; /*box-shadow: 0 -8px 12px 0 rgba(0, 0, 0, 0.09);*/ background-color: #ffffff;  /*overflow: hidden;*/}
.mid .sector.second .holder {width: 100px; height: 5px; border-radius: 5px; margin: 15px auto 5px; background-color:#cfd4d9; display: none}
.mid .sector.second .tabs{ /*overflow-x: auto;*/ white-space: nowrap; position: relative; margin-left:20px; font-size: 0}
.mid .sector.second .tabs a{line-height: 50px; height: 50px; display: inline-block; margin-right: 25px; color: var( --light-grey ); font-weight: bold; font-size: 16px; position: relative}
.mid .sector.second .tabs a.active { border-bottom: 3px solid var(--main-color); color: var(--main-color);}
.mid .sector.second .tabs a span {font-weight: 300; letter-spacing: 0;}
.caution{padding: 20px; background-color: var(--pale-grey)}
.caution h6{color: var(--battleship-grey); padding-bottom: 10px; font-size: 16px;}
.caution h6 span{color: var(--dark-grey); margin-left: 5px;}
.mid .sector.second .tabs.fixed {position: fixed;  width: 100%; top: 40px; left: 0; background-color: #fff; z-index: 32; margin-left: 0 !important; padding-left: 20px;  -webkit-transform: translate3d(0,0,1px);
    transform: translate3d(0,0,1px); transition: .2s }
.mid .sector.second .menu_sheet {transition: .0s}
.mid .sector.second .tabs.fixed + .menu_sheet {margin-top: 40px; }
.mid .sector.second .tabs.fixed:after {opacity: 1 !important}
.mid .sector.second .order_log {margin-left: 20px;}



.tab_contents.review {padding-left: 20px;}
.review_header {padding:10px 0 10px 0; }
.review_header select {border: 0; width: auto; text-indent: 0; font-weight: bold; height: 36px; font-size: 14px; -webkit-appearance:none;}
.review_header select + a.small_btn {float: right; margin-right: 20px;}
.list.review .writer {display: flex; align-items: center; padding-bottom: 15px;}
.list.review .writer .thumb_profile {flex-grow: 0; flex-shrink: 0; flex-basis: 48px; width: 48px; height: 48px; margin-right: 12px; box-shadow: none;}
.list.review .writer .writer_info{flex-grow: 1; padding-right: 20px; }
.list.review .writer .writer_info h5 {font-size: 14px; flex-grow: 1; width: 100%; padding-bottom: 3px;}
.list.review .writer .writer_info h5 span.date{font-size: 12px; font-weight: normal; color: var(--light-grey); float: right; text-align: right}
.list.review .writer .writer_info .review {font-size: 12px;}
.list.review .review_contents {padding-right: 20px; white-space: normal; word-break: keep-all;}
.list.review .review_contents .order_item {font-weight: bold; color: var(--light-grey); font-size: 12px; margin: 10px 0 15px 0}
.list.review .reply {margin-right: 20px; background-color: var(--pale-grey); border-radius: 8px; padding: 15px; white-space: normal; word-break: keep-all; color: var(--battleship-grey)}
.list.review .reply h5 {color: var(--dark-grey); font-size: 14px; margin-bottom: 10px}
.list.review .reply h5 span.date {font-size: 12px; font-weight: normal; color: var(--light-grey); float: right; text-align: right}
.list.review li{padding: 20px 0;}
.list.review li .img img {max-width: 100%; border-radius: 8px; margin-top: 10px}
.list.review li .img {position: relative}
.list.review li .img .more_img {background-color: rgba(0,0,0,0.5); color: #fff; font-size: 12px; padding: 10px; position: absolute; right: 10px; bottom: 10px; border-radius: 8px; line-height: 1; font-weight: bold}

.tab_contents.info {}
.tab_contents.info .map {margin: 20px; border-radius: 8px; overflow: hidden; position: relative; z-index: 10}
.tab_contents.info .map iframe{ width:calc(100vw - 40px); height: calc(100vw - 40px); border-radius: 8px; overflow: hidden; position: relative; position: 9}
.tab_contents.info .store_infos {position: relative; padding:0 20px 20px;}
.tab_contents.info .store_infos h2 {margin-bottom: 20px; font-size: 24px;}
.tab_contents.info .store_infos h3 {font-weight: 200; font-size: 18px;}
.tab_contents.info .store_infos p.tel {text-decoration: underline; font-weight: bold; font-size: 16px; margin: 10px 0; color: var(--mint-blue) }
.tab_contents.info .store_infos p {font-size: 14px; color: var(--mid-grey); line-height: 1.5}
.tab_contents.info .store_infos .detail_info { margin-top: 30px;}
.tab_contents.info .store_infos .detail_info h3.head_title {font-size: 16px; font-weight: bold; margin-bottom: 10px;}
.tab_contents.info .store_infos .detail_info .forms.small td{height: 50px;}
.tab_contents.info .facility {overflow: hidden; margin: 20px 0 20px -20px;}
.tab_contents.info .facility li {float: left; text-align: center; width: 25%; padding: 15px 0; }
.tab_contents.info .facility li p { font-size: 12px; color: var(--light-grey); font-weight: bold}
.tab_contents.info .facility li .icon {height: 34px; background: no-repeat center center; margin-bottom: 10px;}
.tab_contents.info .facility li.wifi .icon {background-image: url("../images/icon/store_info_wifi.svg")}
.tab_contents.info .facility li.toilet .icon {background-image: url("../images/icon/store_info_toilet.svg")}
.tab_contents.info .facility li.parking .icon {background-image: url("../images/icon/store_info_parking.svg")}
.tab_contents.info .facility li.playground .icon {background-image: url("../images/icon/store_info_kidplay.svg")}
.tab_contents.info .facility li.nokids .icon {background-image: url("../images/icon/store_info_nokids.svg")}
.tab_contents.info .facility li.allday .icon {background-image: url("../images/icon/store_info_24h.svg")}
.tab_contents.info .facility li.delivery .icon {background-image: url("../images/icon/store_info_delivery.svg")}
.tab_contents.info .facility li.pickup .icon {background-image: url("../images/icon/store_info_takeaway.svg")}
.tab_contents.info .able_localmoney {font-size: 0; white-space: normal}
.tab_contents.info .able_localmoney li{ font-size: 12px; color: var(--lighten-grey); font-weight: bold; font-family: "Gmarket Sans"; display: inline-block; width: 33%; vertical-align: top; margin-bottom: 20px;}



.store_review {white-space: nowrap; text-align: center; font-size: 0;}
.store_review h2, .wrap.board h2 {font-size: 30px; font-weight: 100; word-break: keep-all; white-space: normal; text-align: left; padding-top: 20px}
.store_review h2 + p, .wrap.board h2 + p  {color: var(--mid-grey); font-size: 14px; text-align: left; margin-top: 5px; padding-bottom: 10px; white-space: normal; word-break: keep-all}
.store_review h2 + p a {text-decoration: underline; font-weight: bold; color: var(--dark-grey)}
.store_review .contents, .store_review .mid {overflow-x: visible}
.store_review .contents {display: flex; }
.store_review .mid {display: flex; flex-direction: column; padding: 0 20px;}
.store_review .mid > div {flex-grow: 0; flex-shrink: 0;}
.store_review .mid textarea, .wrap.board .mid textarea {flex-grow: 1; margin-top: 20px; word-break: keep-all; margin-bottom: 10px;}
.store_review .mid textarea + a.submit {background-color: var(--dark-grey); display: block; text-align: center; line-height: 50px; height: 50px; color: #fff; border-radius: 5px; font-size: 14px; font-weight: bold
}
.store_review .review_grade a {width: 20%; display: inline-block; height:calc(20vw - 8px); background-size: 50% auto; background-position: center center; padding-left: 0; -webkit-filter: grayscale(100%); filter: gray; opacity: .5; transition: .2s}
.store_review .review_grade a.on {mix-blend-mode: normal; -webkit-filter: grayscale(0); filter: none; opacity: 1}
.store_review .photo_review {text-align: left; padding: 20px 0; display: flex; justify-content: space-between}
.store_review .list.horizon li .photo_review  .thumb_menu{ width: calc(25vw - 18px);  height: calc(25vw - 18px); }
.store_review .list.horizon li .photo_review .thumb_menu a.del {width: 24px; height: 24px; border-radius: 50%; line-height: 24px; text-align: center; left: auto; top: -5px; right: -5px; background-color: var(--light-grey); z-index: 2; color: #fff; font-size: 16px; display: none;}
.store_review .photo_review .thumb_menu:last-child {margin-right: 0;}
.store_review .photo_review .thumb_menu[style] a.del {display: block}
.store_review textarea {width: 100%; background-color: var(--pale-grey); border-radius: 8px; margin-bottom: 20px; height: 20vh; font-size: 16px; padding: 15px;}
.store_review .private {text-align: left; margin-top: 20px; font-size: 14px; margin: 10px 0 0 0;}
.store_review .private .checkbox{margin-right: 5px}
.store_review .private input[type=text] {display: none;}
.store_review .private input[type=checkbox]:checked + label + input[type=text] {display: block; margin-top: 10px;}
.store_review .list.single_row li {padding: 20px 0 0 0;}
.store_review .list.single_row li p, .store_review .list.single_row li label {font-size: 14px; text-align: left }
.store_review .list.single_row li .infos .name {font-weight: normal; display: block; width: 100%;}
.store_review .list.single_row li .infos .subinfo {color: var(--mid-grey)}
.store_review .list.single_row li .infos .value a {padding-right: 0; background: none; color: var(--light-grey); transition: .2s}
.store_review .list.single_row li .infos .value a i{font-size: 1.2em;}
.store_review .list.single_row li .infos .value a.on {color: var(--orange)}
.store_review .list.single_row li .infos .value a + a {margin-left: 15px;}
.store_review .article { position: relative}
.store_review .article h3 {font-size: 16px; font-weight: bold; margin-bottom: 10px; text-align: left}
.store_review .article + .private {margin-top: 10px; margin-bottom: 10px;}

.caution {font-size: 11px; color: var( --light-grey ); word-break: keep-all; white-space: normal}
.qr {height: 100%; background-color: #000}

.mypage a.more {float: right; width: 19px; height: 26px; background: url("../images/btn/mypage_arrow_more.svg") no-repeat right center; background-size: 19px 19px;}
.mypage .header.full.mypage_main + .contents {margin-top: 220px;}
.mypage .header.full.mypage_main:after {display: none;}
.mypage .header.full.mypage_main {height: auto;}
.mypage .header.full.mypage_main.type1 {background-image: linear-gradient(to left, #f86176, #ffb28a);}
.mypage .my_area {padding: 20px 20px 30px 20px; display: flex; align-items: center;}
.mypage .my_area .thumb_profile {width: 90px; height: 90px; border-radius: 50%; background-size: cover; background-position: center; background-image: url(../images/img/profile_female.png); box-shadow: 10px 10px 20px 0 rgba(255,0,0,0.4); flex-grow: 0; flex-shrink: 0; }
.mypage .my_area .infos { padding-left: 20px; font-weight: bold; color: #fff; flex-grow: 2}
.mypage .my_area .infos .info.name {font-size: 21px; }
.mypage .my_area .infos .info.name a.more{background-image: url("../images/btn/mypage_arrow_right_white.svg");}
.mypage .my_area .infos .info.loc {font-size: 16px; }
.mypage .my_area .infos .info.point {font-size: 18px; letter-spacing: 0;}
.mypage .my_area .infos .info a {margin-left: 5px;}
.mypage .my_area .infos .info img {vertical-align: middle; margin-top: -2px;}
.mypage .my_area .infos .name span.sns {display: inline-block; width: 20px; height: 20px; margin-left: 5px; background-repeat: no-repeat; background-size: 100% auto; vertical-align: middle; margin-top: -4px;}
.mypage .my_area .infos .name span.sns.kakao {background-image: url("../images/btn/login_kakao@3x.png"); }


.mypage .header.full.mypage_main .launcher {font-size: 0; white-space: nowrap;}
.mypage .header.full.mypage_main .launcher li{display: inline-block; font-size: 12px; font-weight: bold; color: #fff; text-align: center; width: 20%; position: relative; vertical-align: top; }
.mypage .header.full.mypage_main .launcher li:first-child:nth-last-child(2),.mypage .header.full.mypage_main .launcher  li:first-child:nth-last-child(2) ~ li { width: 50%; }
.mypage .header.full.mypage_main .launcher li:first-child:nth-last-child(3),.mypage .header.full.mypage_main .launcher  li:first-child:nth-last-child(3) ~ li { width: 33.3%; }
.mypage .header.full.mypage_main .launcher li:first-child:nth-last-child(4),.mypage .header.full.mypage_main .launcher  li:first-child:nth-last-child(4) ~ li { width: 25%; }
.mypage .header.full.mypage_main .launcher li:first-child:nth-last-child(4),.mypage .header.full.mypage_main .launcher  li:first-child:nth-last-child(5) ~ li { width: 20%; }


.mypage .header.full.mypage_main .launcher:after {display: block; border-radius:24px 24px 0 0; height: 24px; background-color: #fff; content: ""; margin-top: 20px;}
.mypage .header.full.mypage_main .launcher li .icon {height: 34px; background-position: center; background-repeat: no-repeat; margin-bottom: 10px;}
.mypage .header.full.mypage_main .launcher li.invite .icon {background-image: url("../images/btn/invite_friend_white.svg"); background-size: auto 30px}
.mypage .header.full.mypage_main .launcher li.gift .icon {background-image: url("../images/btn/gift_white.svg");}
.mypage .header.full.mypage_main .launcher li.coupon .icon {background-image: url("../images/btn/coupon_white.svg"); background-size: auto 22px}
.mypage .header.full.mypage_main .launcher li.stamp .icon {background-image: url("../images/btn/stamp_white.svg"); background-size: auto 30px}
.mypage .header.full.mypage_main .launcher li.reviews .icon {background-image: url("../images/btn/write_review_white.svg"); background-size: auto 28px}
.mypage .header.full.mypage_main .launcher li.coupon .icon span {display: block; position: absolute; color: var(--main-color); background-color: #fff; border-radius: 50%; text-align: center; width: 20px; height: 20px; line-height: 20px; left: 60%; top: -5px;}
.mypage .header.full.mypage_main .launcher li.invite .baloon {position: absolute; background-color: var(--dark-grey); font-size: 10px; font-weight: normal; padding: 5px 8px; border-radius: 3px; left: 20px; bottom:-30px; display: block;}
.mypage .header.full.mypage_main .launcher li.invite .baloon:before {content: ""; width: 0px;height: 0px;border-top:8px solid none;border-bottom:8px solid var(--dark-grey);border-right: 8px solid transparent;border-left: 8px solid  transparent; position: absolute; top: -5px;}
.mypage .mid {}
.mypage .header.fixed + .contents .mid.has_btn {padding: 20px 20px 83px 20px;}
.mypage .mid .sector > div {padding: 20px 0 10px 20px;}
.mypage .mid .sector + .sector {border-top: 6px solid var(--pale-grey); border-radius: 0;}
.mypage .order_log .list.horizon li .thumb_menu {width: 70px; height: 70px;}
.mypage .mid .sector h3 {padding-right: 20px; padding-bottom: 10px;}
.mypage .mid .sector h3.tabs a {color:var(--light-grey)} 
.mypage .mid .sector h3.tabs a.active {color:var(--dark-grey)} 
.mypage .mid .sector h3.tabs a + a {margin-left: 20px} 
.list li .store_name  {font-weight: bold; color: var(--mid-grey); font-size: 14px; margin-bottom: 3px;}
.list li .store_name img {vertical-align: middle; margin-top: -1px}
.mypage .recent_order.list li .infos .price {position: absolute; right: 20px; bottom: 12px; font-size: 14px}
.mypage .recent_order li.waiting .price {display: none;}
.mypage .recent_order li.waiting .status_btn {display:block;}
.mypage .recent_order .status_btn {display: none;}
.mypage .recent_order.contents .mid {padding: 0 0 20px 20px;}
.mypage .mid h2 {font-size: 16px;}
.mypage .mid h2.head_title {margin-bottom: 10px; }
.mypage .mid h2.head_title span{font-size: 12px; color: var(--light-grey); font-weight: normal; float: right; margin-top: 2px}
.forms.small {font-size: 0; position: relative}
.forms.small .require {background-size: auto 8px; padding-left: 13px;}
.forms.small td:first-child {font-size: 12px; font-weight: bold; color: var(--dark-grey);  height: 60px; vertical-align: middle; text-align: left; padding-right: 15px; white-space: nowrap; width: 1px;}
.mypage.edit .mid .forms.small tr.subscript td {white-space: normal}
.forms.small td {font-size: 12px; color: var(--battleship-grey); position: relative;  height: 60px; vertical-align: middle; text-align: left}
.forms.small input {vertical-align: middle}
.forms.small span +input {margin-left: 5px;}
.forms.small input[type=text], .forms.small input[type=password], .forms.small select,  .forms.small  input[type=time], .forms.smallinput[type=tel],.forms.small input[type=number] {height: 40px; background-color: #fff;  font-size: 12px; vertical-align: middle; color: var(--battleship-grey); border: 1px solid var(--lighten-grey); padding-left: 10px; border-radius: 3px;}
/*.forms.small input[type=time] + span {margin-left: 5px;}*/
.forms.small input[type=text].with_btn,.forms.small input[type=password].with_btn {width: 100%}
.forms.small input[type=text].with_btn +a, .forms.small input[type=password].with_btn +a {background-color: var(--mid-grey); color: #fff; font-size: 12px; display: inline-block; width: auto; padding: 0 10px; border-radius:0 3px 3px 0; float: right;height: 40px; line-height: 40px;}
.forms.small a[href="/manager/form.do"]:first-child {display: block; float: left; padding-right: 20px;} 
.forms.small.choose {position: relative}
.forms.small.choose li{padding: 20px 0; position: relative}
.forms.small.choose h3 {font-size: 12px; margin-bottom: 3px;}
.forms.small.choose p {font-size: 12px; color: var(--battleship-grey)}
.forms.small.choose .right_input { position: absolute; right: 0; top: 25px; }
.forms.small table .checkbox {width: 18px; height: 18px;}
.forms.small table .checkbox {margin-left: 15px; margin-right: 3px;}
.forms.small table .checkbox:first-child {margin-left: 0;}
.forms.small tr.address_detail { display: none}
.forms.small tr.open_time td:after {display: none;}
.forms.small tr.check_dayweek td {height:auto; padding-bottom: 20px;}
.forms.small tr.check_dayweek td {font-weight: normal; color: var(--battelship-grey)}
.forms.small select.with_input {width: 100px; padding-right: 20px;  padding-left: 0; color: var(--battleship-grey); display: inline-block;  }
.forms.small tr.select_bank {white-space: nowrap}
.forms.small .with_select {width: calc(100% - 105px); margin-left: 5px}
.forms.small + .sector {margin-top: 30px;}


.point_log .list.single_row span{font-size:14px; }
.point_log .list.single_row span.date{font-weight: normal; float: right; font-size: 12px; color: var(--light-grey); padding-right: 20px;}
.point_log .list.single_row span.number {width: 65px; display: inline-block; font-weight: bold;}
.point_log .list.single_row span.number.get {color:var(--mint-blue)}
.point_log .list.single_row span.number.put {color:var(--cherry-red)}
.point_log .list.horizon li {display: flex; font-size: 14px; padding: 20px 0;}
.point_log .list.horizon li.in .icon, .point_log .list.horizon li.in .value_num {color: var(--main-color)}
.point_log .list.horizon li.out .icon, .point_log .list.horizon li.out .value_num {color: var(--mint-blue)}
.point_log .list.horizon li .icon {flex-shrink: 0; flex-grow: 0; margin-right: 10px; flex-basis: 30px; font-size: 0; height: 30px;}
.point_log .list.horizon li.point .icon {font-size: 0}
.point_log .list.horizon li.point.out .icon {background: url("../images/icon/point_put.svg") no-repeat center;}
.point_log .list.horizon li.point.in .icon {background: url("../images/icon/point_get.svg") no-repeat center;}
.point_log .list.horizon li.gob.out .icon {background: url(../images/icon/gob_spend.svg) no-repeat center;}
.point_log .list.horizon li.gob.in .icon {background: url(../images/icon/gob_get.svg) no-repeat center;}
.point_log .list.horizon li.stamp .icon {background: url(../images/icon/stamp_get.svg) no-repeat center;}
.point_log .list.horizon li .log {flex-grow: 3;}
.point_log .list.horizon li .log .info .title {font-size: 14px;}
.point_log .list.horizon li .log .info .title .item {font-weight: bold; margin-right: 5px;}
.point_log .list.horizon li .log .info .from {font-size: 12px; color: var(--light-grey); font-weight: bold; margin-top: 3px;}
.point_log .list.horizon li .value {align-items: flex-end; text-align: right; padding-right: 20px; letter-spacing: 0;}
.point_log .list.horizon li .value .value_num {font-size: 14px; font-weight: bold;}
.point_log .list.horizon li .value .date {font-size: 12px; color: var(--light-grey); margin-top: 3px;}
.point_log .list.horizon li.stamp .value .value_num { color: var(--orange)}
.point_log .list.horizon li.stamp .value .value_num span{ color: var(--dark-grey); font-weight: normal}

.mypage .mid .sector > div.setting {padding: 0;}
.mypage .mid .sector > div.setting  .list.single_row li{ padding:20px;}
.mypage .mid .sector > div.setting  .list.single_row li .infos .name{font-size: 14px;}
.mypage .mid .sector:last-child .list li:last-child:after {display: none;}
.mypage.edit .my_area {padding: 0;}
.mypage.edit .my_area .infos {color: var(--dark-grey); white-space: nowrap}
.mypage.edit .my_area .infos .info.name input {font-size: 21px; font-weight: 800; width: 100%; padding: 10px 0; border-bottom:1px solid var(--lighten-grey); border-radius: 0; background-color: transparent}
.mypage.edit .my_area .infos .info.name:after {margin-top: 15px;}
.mypage.edit .my_area .infos .info.loc input {font-size: 16px; color: var(--mid-grey); width: 100%; padding: 10px 0; border-bottom:1px solid var(--lighten-grey); font-weight: bold; border-radius: 0; background-color: transparent}
.mypage.edit .my_area .infos .info.loc:after { display: inline-block; margin-left: -15px;width: 15px;height: 18px;background: url("../images/icon/edit_loc.svg") no-repeat center center;content: ""; margin-top: 15px; vertical-align:top; }
.mypage.edit .my_area .thumb_profile {box-shadow:10px 10px 20px 0 rgba(0,0,0,0.15);}
.mypage.edit .mid .forms.small tr.phone td:after {display: none;}
.mypage.edit .mid .forms.small tr.phone td { height: auto; padding:  5px 0 0 0}
.mypage.edit .mid .forms.small tr.subscript td{padding: 8px 0 20px 0; height: auto; font-weight: normal; color: var(--light-grey);}
.mypage.edit .mid .forms.small td a.more {background-image: url("../images/icon/arrow_right.svg"); background-size: auto 14px;}
.mypage.edit .mid .forms.small td a + a.more {position: absolute; right: 0; height: 60px; top: 0;}
.mypage.edit .mid .forms.small tr.sns_sync td{height: auto; vertical-align: top; padding:20px 0;}
.mypage.edit .mid .forms.small td .sns {font-size: 0; white-space: nowrap}
.mypage.edit .mid .forms.small td .sns a {width: 36px; height: 36px; margin-right: calc(25% - 28px); background: no-repeat left center; background-size: auto 100%; display: inline-block}
.mypage.edit .mid .forms.small td .sns a.not_sync {filter: grayscale(1); opacity: .4}
.mypage.edit .mid .forms.small td .sns a.facebook { background-image: url("../images/btn/login_facebook@3x.png")}
.mypage.edit .mid .forms.small td .sns a.google {background-image: url("../images/btn/login_google@3x.png")}
.mypage.edit .mid .forms.small td .sns a.naver { background-image: url("../images/btn/login_naver@3x.png")}
.mypage.edit .mid .forms.small td .sns a.kakako { background-image: url("../images/btn/login_kakao@3x.png"); margin-right: 0;}
.mypage.edit .mid .forms.small td .sns p {font-weight: normal; color: var(--light-grey); font-size: 12px; padding-top: 15px;}
.mypage.edit .member_out_btn {display: block; padding-top: 15px; padding-bottom: 5px; text-align: right; font-size: 12px; color: var(--light-grey); text-decoration: underline;}


.mypage.member_out {}
.mypage.member_out dl dt {font-size: 16px; font-weight: bold; margin-bottom: 5px; padding-top: 20px; position: relative}
.mypage.member_out dl dd {font-size: 14px; color: var(--battleship-grey); padding-bottom: 20px; position: relative}
.mypage.member_out dl dd:after {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; bottom: 0; content: ""; width: 300%; opacity: .3;}
.mypage.member_out .input_password {padding-top: 20px; font-size: 14px; color: var(--mid-grey);}
.mypage.member_out .input_password input {margin-top: 15px;}

.mypage .ment {color: var(--mid-grey); font-size: 14px; margin-bottom: 20px;}
.mypage .caution {border-radius: 8px; color: var(--mid-grey); margin-top: 20px}
.mypage .caution h3,  .coupon.full .caution h3 {color: var(--battleship-grey); font-size: 14px; margin-bottom: 10px;}
.mypage .caution li, .coupon.full .caution li{ margin-bottom: 5px; font-size: 12px; position: relative}
.mypage .caution li:before,  .coupon.full .caution li:before {content: ""; position: absolute; width: 3px; height: 3px; margin-left: -8px; top: 5px; background-color: var(--lighten-grey)}

.mypage.recent_order .order_log .list.horizon li .thumb_menu {width: 80px; height: 80px;}
.mypage.recent_order .order_log .list.horizon li {padding: 15px 0;}
.mypage.recent_order .mid, .mypage.my_fav_store .mid {padding: 0 0 0 20px}
.mypage.my_fav_store .list li .icon_like{background: url("../images/btn/like_off.svg") no-repeat top center;width: 20px; height: 20px; position: absolute; right: 20px; transition: .2s }
.mypage.my_fav_store .list li .icon_like.on{background-image: url("../images/btn/like_on.svg"); }
.mypage.my_fav_store .store.list.horizon li .infos {width: calc(100% - 120px)}
.mypage.my_fav_store .store.list.horizon li:last-child:after {display: block}



/*팝업*/
.side_popup.poped {right: 0}
.side_popup {position: fixed; background:#fff; border-radius: 20px 0 0 20px; z-index: 35; top: 0; right: -100%; height: 100%; width: calc(100% - 20px); overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: .2s}
.mask {content: ""; position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 30; -webkit-transform: translateZ(0); transform: translateZ(0);display: block}
.side_popup .header {position: relative;}
.side_popup .header:after {display: none;}
.side_popup .header .title {text-align: left; padding-left: 10px;}
.side_popup .header .title a.btn {border-radius: 20px;background-color: rgb(174, 183, 191); color: #fff; font-size: 12px;  padding: 6px 13px 6px 10px; display: inline-block; margin-left: 5px; line-height: normal; vertical-align: middle}
.side_popup .log {height: calc(100% - 130px); overflow-y: auto; background-color: #fff; padding:0 20px 20px; font-size: 12px; position: relative; z-index: 2}
.log .store_chat {padding: 10px; background-color: var( --pale-grey ); border-radius: 8px; max-width: 80%; word-break: keep-all; position: relative; float: left; clear: both; margin-top: 10px;}
.log .store_chat:before {width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 16px solid var( --pale-grey ); content: ""; display: block; position: absolute; left: -10px; top: 10px; z-index:0}
.log .my_chat {padding: 10px; background-color: #fff6dc; border-radius: 8px; max-width: 80%; word-break: keep-all; position: relative; float: right; clear: both; margin-top: 10px;}
.log .my_chat:before {width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 16px solid #fff6dc; content: ""; display: block; position: absolute; right: -10px; top: 10px; z-index: 0}
.log .my_chat a {background-color: #fff; border-radius: 8px; text-align: center;  font-weight: bold; height: 40px; line-height: 40px; display: block; margin-top: 20px;}
.log .my_chat.order {font-size: 14px; }
.log .my_chat.order .title {font-size: 18px; color: var(--main-color); margin: 10px 0; font-weight: bold}
.log .my_chat.order .menu_thumbs {}
.log .my_chat.order .menu_thumbs .thumb_menu {width: 40px; height: 40px;}
.log .my_chat.order .menu_thumbs .thumb_menu p { content: ""; position: absolute; right: 5px; bottom: 5px;  z-index: 1; text-align: center; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 5px rgba(0,0,0,0.6)}
.log .store_chat .time { position: absolute; left: calc(100% + 5px); bottom: 0; color: var( --light-grey ); white-space: nowrap; font-size: 12px}
.log .my_chat .time { position: absolute; right: calc(100% + 5px); bottom: 0; color: var( --light-grey ); white-space: nowrap; font-size: 12px}
.log + .input_msg { padding:0 10px; background-color: #fff; white-space: nowrap; position: relative; z-index: 2}
.log + .input_msg input {height: 60px; display: inline-block; width: 100%; background-color: var( --pale-grey );; border-radius: 60px; padding-right:60px; padding-left: 20px; }
.log + .input_msg input + a.submit { display: inline-block; width: 60px; height: 60px; line-height: 60px; margin-left: -60px; text-align: center; border-radius: 50%; background: transparent url("../images/btn/submit_msg.svg") no-repeat center center;}
.log + .input_msg input + a.submit img {vertical-align: middle; display: none}

.menu_item {position: relative}
.menu_item h3 {font-size: 16px;  position: relative;}
.menu_item h3 a {display: block;  padding: 20px 0;}
.menu_item h3:after {content: ""; background: url(../images/icon/arrow_up.svg) no-repeat; width: 14px; height: 7px; position: absolute; right: 20px; top: 50%; margin-top: -4px; transition: .2s}
.menu_item h3.col:after { transform: rotate(180deg)}
.menu_item h3.col + ul{display: none;}
.menu_item .list.horizon li:last-child:after{display: none;}
.edit .menu_item h3 {padding: 20px 0}
.edit .menu_item h3 a{padding: 0}
/*상점페이지 에디터블*/
.store.edit input[type=text],.edit input[type=number],.edit input[type=tel] {background-color: transparent; height: inherit; border-bottom: 1px dashed var(--light-grey); border-radius: 0; width: auto; max-width: 100%; }
.store.edit .header .title .name input[type=text] {color: #fff; text-align: center; font-weight: bold;  border-color:#fff; font-size: 18px; padding: 0;}
.store.edit .header .title .substr {z-index: 0}
.store.edit .header .title .substr input[type=text] {color: #fff; text-align: center;  border-color:#fff; font-size: 12px;  width: 70%; }
.store.edit .mid .sector .cont textarea {border: 1px dashed #ddd; border-radius: 5px; font-size: 12px; color: var( --battleship-grey );}
.store.edit .list li .infos .name input[type=text] {font-size: 16px; font-weight: bold;  width: 100%; white-space: nowrap}
.store.edit .list li .infos .substr input[type=text] {font-size: 12px; font-weight: normal;  width: 100%; color: var( --mid-grey ); white-space: nowrap}
.store.edit .list li .infos .price input {font-size: 16px}
.store.edit .list li .infos .price input[type=text], .edit .list li .infos .price input[type=number], .edit .list li .infos .price input[type=tel] {color: var(--main-color);  width: 100%;white-space: nowrap}
.store.edit .name span:first-child:after, .store.edit .substr:after, .store.edit .price:after, .store.edit .mid .store_bene li p:after { display: inline-block; margin-left: -20px; width: 16px; height: 15px; background: url("../images/icon/edit_input.svg") no-repeat center center; content: ""; padding: 8px 0; vertical-align: bottom;}

.store.edit .mid .store_bene li p:after {margin-left: -40px;}
.store.edit input[type="file"], .thumb_profile input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; -webkit-appearance:none;}
.store.edit .list.vertical .thumb_menu label{background-size: 30% auto}
.store.edit input[type="file"] + label i {vertical-align: middle; display: none;}
.store.edit .list.vertical input[type="file"] + label {font-size: 48px}
.store.edit .list.horizon li .infos > * {max-width: 100%; margin-right: 20px}
.store.edit .mid .store_bene li input[type=text], .edit .mid .store_bene li input[type=number]{font-size: 21px; width: 100px; padding-left: 0;}
.edit .mid .sector.second .menu_info:after {content: ""; display: block; clear: both}

.store.edit .list.vertical li.add_new {height: 180px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--light-grey); font-weight: bold}
.store.edit .list li.add_new i {font-size: 36px; margin-bottom: 5px; color: var(--lighten-grey); }
.store.edit .list.horizon li.add_new { text-align: center; color: var(--light-grey); font-weight: bold; padding: 20px 0; margin-left: -10px;}
.store.edit .list.horizon li.add_new h4 { display: inline-block; line-height: 36px;}
.store.edit .list.horizon li.add_new h4 i {margin-bottom: 0; vertical-align: top; line-height: 36px; margin-right: 4px;}
.store.edit .list.horizon li.add_new p {display: inline-block; font-size: 16px; line-height: 36px; vertical-align: top;}
.store.edit .header .name:after{display: none;}
.store.edit .header.fixed .thumb label {font-size: 12px}
/*.edit .list.horizon li.blank,.edit .list.vertical li.blank {display: none;}*/
.store.edit .list.horizon li.blank {animation: blank_insert .6s}
@keyframes blank_insert { 0% {max-width: 0}  100% {max-width: 500px}}

.store.edit .add_category {padding: 20px; border:2px dotted var(--lighten-grey); margin: 20px; border-radius: 8px; color: var(--light-grey);}
.store.edit .add_category i {font-size: 1.3em; vertical-align: middle; margin-right: 5px;}
.store.edit .add_category .add_new {display: none;}
.store.edit .add_category input[type=text] {border: none; font-weight: bold; font-size: 16px}
.store.edit .add_category a{float: right}
.store.edit .add_category span:after {content: "\e9c3"; font-family: "xeicon"; display: inline-block; margin-left: -15px; }
.store.edit .right_btn_set input[type="file"] + label {font-size: 24px}
.store.edit .menu_item h3 { padding: 0 20px 0 0;  margin: 10px 0;}
.store.edit .menu_item.signature h3 input[type=text] {border-bottom: 0}
.store.edit .menu_item h3 input[type=text] {font-size: 16px; font-weight: bold; width: 100%; padding: 10px 0 15px 0;}
.store.edit .menu_item h3:after { display: inline-block; margin-left: -20px; width: 16px; height: 15px; background: url("../images/icon/edit_input.svg") no-repeat center center; content: ""; display: none;}
.store.edit .menu_item h3 .advance_setting {position: absolute; right: 20px; white-space: nowrap; top: 0; background-color: #fff; border: 1px solid var(--lighten-grey); font-size: 0; border-radius: 5px; z-index: 20;}
.store.edit .menu_item h3 .advance_setting a {display: inline-block; line-height: 30px; font-weight: normal; padding: 0 8px; text-align: center; border-left: 1px solid var(--lighten-grey); color: var(--light-grey); vertical-align: top; height: 30px; font-size: 14px;}
.store.edit .menu_item h3 .advance_setting a.sort_up {border-left: 0; }
.store.edit .menu_item h3 .advance_setting a.sort_up:before {content: "\e915"; font-family: xeicon;width: 30px; color: var(--battleship-grey)}
.store.edit .menu_item h3 .advance_setting a.sort_down:before {content: "\e905"; font-family: xeicon; width: 30px; color: var(--battleship-grey)}
.store.edit .menu_item h3 .advance_setting a.del:before {content: "삭제"; color: var(--lighten-grey); width: auto;  font-size: 12px;}
.store.edit .menu_item:after {opacity: 1}
/*.edit .list li .infos .del {position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; color: #fff; background: url("../images/btn/trash.svg") no-repeat center; background-size: auto 50%; background-color: var(--dark-grey) }*/
.store.edit .menu_item .list.horizon li {display: block}
.store.edit .list li .advance_setting { font-size: 0; margin-top: 5px; border-radius: 5px; border-radius: 5px; overflow: hidden;  border: 1px solid var(--lighten-grey)}
.store.edit .list li .advance_setting a { font-size: 12px; display: inline-block; text-align: center;  line-height: 35px; height: 35px; color: var(--mid-grey); vertical-align: top;}
.store.edit .list li .advance_setting a.advance_set { color: var(--battleship-grey); border-right: 1px solid var(--lighten-grey)}
.store.edit .list li .advance_setting a.sort_up, .store.edit .list li .advance_setting a.sort_down {border-right: 1px solid var(--lighten-grey); color: var(--battleship-grey); font-size: 14px }
.store.edit .list li .advance_setting a.sort_up {border-left: 0; }
.store.edit .list li .advance_setting a.sort_up:before {content: "\e915"; font-family: xeicon;width: 30px;}
.store.edit .list li .advance_setting a.sort_down:before {content: "\e905"; font-family: xeicon; width: 30px;}
.store.edit .menu_item:nth-child(2) h3 .advance_setting a.sort_up:before { color: var(--lighten-grey); content: "\e9ae"}
.store.edit .menu_item:last-child h3 .advance_setting a.sort_down:before {color: var(--lighten-grey); content: "\e9ae"}
.store.edit .list li:first-child .advance_setting a.sort_up:before {color: var(--lighten-grey); content: "\e9ae"}
.store.edit .list.horizon li:nth-last-child(2) .advance_setting a.sort_down:before, .edit .list.vertical li:nth-last-child(1) .advance_setting a.sort_down:before {color: var(--lighten-grey); content: "\e9ae"}
.store.edit .list li .advance_setting {display: flex; flex-wrap: wrap}
.store.edit .list li .advance_setting a {flex-grow: 1;}
.store.edit .list.vertical li .advance_setting a.advance_set{flex-basis:100%; display: block; width: 100%; border-right: 0; border-bottom: 1px solid var(--lighten-grey)}
.store.edit .list li .advance_setting a.copy {border-left: 1px solid var(--lighten-grey); color: var(--mid-grey)}
.store.edit .list li .infos .substr,.store.edit .list li .infos .name,.store.edit .list li .infos .price,.store.edit .list li .infos .substr, .list li .infos .name,.store.edit .list li .infos p {margin: 0; padding: 0;}
.store.edit .list li.horizon .infos {margin-top: -10px;}
.store.edit .list.vertical li .infos .name {margin-top: 5px}
.store.edit .list li input[type=text], .edit .list li input[type=number],.edit .list li input[type=tel]{padding: 8px 0;}
.store.edit .header .title .substr {margin: 0;}
.store.edit .header .title .substr input {padding: 5px 0;}
.store.edit .advanced input[type=text],.edit .advanced  input[type=password],.edit .advanced  input[type=number],.edit .advanced  input[type=tel] { font-size: 14px; border-radius: 5px;  border: 1px solid var(--lighten-grey); padding:10px; height: 45px; width: 100%;}
.advanced .option_cnt input[type=tel] { font-size: 14px; border-radius: 5px;  border: 1px solid var(--lighten-grey); padding:10px; height: 45px; flex-grow: 0; flex-basis: 60px;}
.store.edit .advanced input[type=text]:read-only,.edit .advanced  input[type=password]:read-only,.edit .advanced  input[type=number]:read-only, .edit .advanced input[type=tel]:read-only  {background: none;}
.store.edit .advanced input[type=text]:disabled,.edit .advanced  input[type=password]:disabled, .edit .advanced input[type=number]:disabled, .edit .advanced input[type=tel]:disabled  { color: var(--light-grey);background-color: var(--pale-grey);}
.store.edit .advanced input[type=text]::placeholder,.edit .advanced input[type=password]::placeholder, .edit .advanced input[type=number]::placeholder, .edit .advanced input[type=tel]::placeholder  {color: var(--light-grey); font-weight: normal}
img {vertical-align: top}
.store.edit .advanced select,.store.edit .advanced  input[type=time] { height: 45px; font-size: 14px; border-radius: 5px; border: 1px solid var(--lighten-grey); padding-left: 10px; background: #fff url(../images/input/select_arrow.svg) no-repeat right 10px center; font-weight: 400; padding-right: 20px; text-align: left; text-indent: 0;  }
.store.edit .advanced select:disabled,.store.edit .advanced  input[type=time]:disabled {background-color: var(--pale-grey); color: var(--light-grey);}
.store.store.edit .advanced {position: fixed; width: 100%; height: 100%; z-index: 100; background-color: rgba(0,0,0,0.8); left: 0; top: -100%; transition: .2s; padding: 10px; }
.store.edit .advanced .mid {background-image: none; background-color: var(--pale-grey); width:100%; height: 100%; border-radius: 8px; overflow-y: auto; }
.store.edit .advanced .mid .table {background-color:#fff;}
.store.edit .advanced .mid,.edit .advanced  .contents {clear: both}
.store.edit .advanced .mid .right_el {float: right; font-size: 12px; font-weight: normal; color: var(--mid-grey); line-height: 2em;}
.store.edit .advanced .mid h1 {font-size: 18px; letter-spacing: -1px; padding:0 10px 0 15px; line-height: 50px; position: fixed; width: calc(100% - 20px); left: 10px; top:-100%; z-index: 30; background-color: #fff; border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--dark-grey); transition: .2s}
.store.edit .advanced .mid h1 + div {padding-top: 49px}
.store.edit .advanced .mid h1 .right_el{float: right; font-size: 14px; font-weight: normal; line-height: normal; color: var(--mid-grey); margin-top: 8px;}
.store.edit .advanced .mid h1 .right_el > * {display: inline-block; font-size: 12px}
.store.edit .advanced .mid h1 .right_el a {padding: 10px 12px; border-radius: 5px; font-size: 12px; background-color:var(--light-grey); transition: .2s; color: #fff}
.store.edit .advanced .mid h1 .right_el a.ok i{ font-size: 1.3em}
.store.edit .advanced .mid h1 .right_el a.cancel i{ font-size: 1em}
.store.edit .advanced .mid .right_el a:hover {background-color: var(--main-color); color: #fff; }
.store.edit .advanced .mid .right_el i {font-size: 1.2em; margin-right: 5px;}
.store.edit .advanced .contents_box {border-radius: 5px; background-color: #fff;}
.store.edit .advanced .mid h2 {font-size: 18px; margin-bottom: 10px; }
.store.edit .advanced .mid h2:before {content: "\ea3f"; font-family: "xeicon"; ; display: inline-block; margin-right: 3px;  vertical-align: middle; margin-top: -2px;}
.store.edit .advanced .mid h2 .right_el {float: right; font-size: 14px; font-weight: normal; line-height: 30px; color: var(--mid-grey); max-width: 100%; white-space: nowrap}
.store.edit .advanced .mid h2 .right_el > * {display: inline-block; font-size: 12px; width: auto;}
.store.edit .advanced .mid h2 .right_el a {padding: 8px 10px; border-radius: 5px; font-size: 11px; border: 1px solid var(--lighten-grey);transition: .2s; color: var(--mid-grey); margin-top: -4px; display: inline-block; line-height: normal; vertical-align: top}
.store.edit .advanced .mid h2 .right_el a:hover {background-color: var(--main-color); color: #fff; border-color: transparent}
.store.edit .advanced .mid h3 {margin-bottom: 10px; font-size: 14px; }
.store.edit .advanced .mid h2 .right_el > * + * {margin-left: 5px}
.store.edit .advanced .mid .with_bottom {margin-top: 10px;}
.store.edit .advanced .mid .with_bottom input[type=text]{min-width: 200px}
.store.edit .advanced .mid h1:after,.edit .advanced .mid h2:after {content: ""; display: block; clear: both}
.store.edit .advanced .mid i {vertical-align: middle; margin-top: -2px; font-size: 1.2em}
.store.edit .advanced .mid a i {margin-right: 5px;}
.store.edit .advanced .mid a.soldout {transition: .2s}
.store.edit .advanced .mid a.soldout.active {background-color: var(--pale-grey); color: var(--light-grey)}
.store.edit .advanced .mid div + .options {margin-top: 0; padding-top: 10px;}
.store.edit .advanced .mid .options {margin-top: 30px;}
.store.edit .advanced .mid .sortable .option tr {display: none;}
.store.edit .advanced .mid .sortable .option th {display: none;}
.store.edit .advanced .mid .sortable .option td {background: url("../images/icon/icon_sort.svg") no-repeat 10px center;  padding-left: 40px; width: 100% !important; display: block}
.store.edit .advanced .btn_big {margin:0 10px 20px 10px; border:none; text-align: right; padding-right: 10px; font-size: 12px; height: auto; line-height: normal; border-radius: 0;}
.store.edit .advanced .btn_big:before { background: url("../images/btn/trash.svg") no-repeat left center; width: 14px; height: 14px; display: inline-block; content: ""; background-size: auto 100%; vertical-align: middle; margin-top: -3px; margin-right: 3px }

.store.edit .add_category input[type=text] {padding: 0}
.store.edit .advanced .mid .sortable .option tr:first-child {display: block}
.store.edit .advanced .mid .option a.remove_this {display: block; position: absolute; right: -5px; top: -5px; width: 24px; height: 24px; background-color: var(--mid-grey); text-align: center; line-height: 24px; color: #fff; font-size: 18px; border-radius: 50%; z-index: 20}
.store.edit .advanced .mid .option a.remove_this i {margin: 0;}
.store.edit .advanced .mid .dc_price, .store.edit .advanced .mid .limit_time {display: none;}
.store.edit .advanced .mid .limit_time .flex-full:first-of-type a.delete {display: none;}
.store.edit .advanced .mid h1 .right_el a:hover {background-color: var(--mid-grey);}
.store.edit .advanced .mid h2 .right_el a:hover {background-color: inherit; border:1px solid var(--lighten-grey); color: inherit}
.store.edit .advanced .mid h2 select,  .mid h2 input {height: 35px; font-size: 12px;}
.store.edit .advanced .mid h2 {font-size: 18px; margin-left: 15px; margin-right: 15px; padding-top: 5px;}
.store.edit .advanced .mid h3 {margin-left: 15px; margin-right: 15px;}
.store.edit .advanced .mid {padding: 0;}
.store.edit .advanced .mid h1 + .margin-top-30 {margin-top: 0}
.store.edit .advanced tr.label_wrap label {display: block; }
.store.edit .advanced tr.label_wrap label + input + label:before  {margin-left: 0; }
.store.edit .advanced tr.label_wrap label + input + label {margin-top: 10px;}
.store.edit .advanced .col-10.margin-top-30 + .col-10.margin-top-30 {margin-top: 50px;}
.store.edit .advanced .options { background-color: var(--pale-grey); padding: 20px 0; margin-top: 0;}
.store.edit .advanced .option{ margin: 0 10px; box-shadow: 1px 1px 9px rgba(0,0,0,0.1); border: none; border-radius: 5px; background-color: #fff; position: relative}
.store.edit .advanced .option table {border-top: none;}
.store.edit .advanced .option + .option {margin-top: 10px;}
.store.edit .advanced .option tr:last-child td:after, .option tr:last-child th:after {opacity: 0}
.store.edit .advanced .sortable .option td {padding: 5px; padding-left: 45px; margin-left: 0; background-position: 15px center;}
tr.time_sale .timesale_name {display: none;}
.advanced_mode {overflow: hidden}
.advanced_mode .store.store.edit .advanced {top: 0;}
.advanced_mode .edit .advanced .mid h1{top: 10px}
.advanced_mode .store.edit .advanced .mid {overflow-x: hidden}


.table td {padding:7px 5px; box-sizing: border-box; vertical-align: middle; color: #6a6e76; text-align: left; position: relative; }
.table th {position: relative}
.table td:after, .table th:after {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; bottom: 0; content: ""; width: 300%; opacity: .6;}
.table th {width: 1%; white-space: nowrap; padding: 10px 15px;  text-align: left}
.table thead td{ font-size:12px; text-align:left; color:#000; letter-spacing:-0.03em; font-weight: bold}
.table td.title {text-align:left; color:#000; font-size:13px; width: 99%;}
.table td.date{color:#979da7;}
.table .tableTypeB td:nth-child(even) {width: 50%}
.table td a {height: 45px; line-height: 43px; padding: 0 10px; font-size: 12px; background-color: var(--light-grey); color: #fff; font-weight: bold; display: inline-block; border-radius: 5px; text-align: center; flex-grow: 0; flex-basis: 45px; white-space: nowrap}
input[type=text] + a {height: 35px; line-height: 35px; padding: 0 10px; font-size: 12px; background-color: var(--light-grey); color: #fff; font-weight: bold; display: inline-block; border-radius: 0 5px 5px 0; margin-left: -120px; text-align: center; float: right; position: relative; z-index: 1;flex-grow: 0; flex-basis: 30px; white-space: nowrap}
.flex-full {display: flex; justify-content: flex-start; flex-grow:2; align-items: center}
.flex-full > * {flex-grow:1; flex-basis: 100px; white-space: nowrap}
.flex-full input[type=text] + a.other {flex-grow: 0; flex-basis: 30px;  border-radius: 3px; margin-left: 5px;}
.flex-full + .flex-full {margin-top: 5px;}
.flex-full span.won {flex-grow: 0; margin: 0 5px; flex-basis: 14px;}
.flex-full a {flex-grow: 0; flex-basis: auto;}
.table td a.other {background-color: transparent; border:1px solid var(--lighten-grey); color: var(--mid-grey); font-weight: normal}
.table td a.other.delete {background-color: transparent; border:1px solid var(--cherry-red); color: var(--cherry-red); font-weight: normal}
.table td a + a {margin-left: 5px;}
.tableTypeA { font-size:12px; width:100%; border-top:1px solid #000;  }
.tableTypeA td{ width: 1%; white-space: nowrap }
.tableTypeB { font-size:12px; width:100%; border-top: 1px solid #000}
.tableTypeB tbody{}
.tableTypeB th {background-color: var(--pale-grey); font-weight: bold; color: var(--dark-grey); vertical-align: middle; line-height: 35px;}
.sortable tbody {display: block; }
.table .tableTypeB td:nth-child(even) {width: inherit;}
.table tr.weekly_sale .inline-block + .inline-block {margin-left: 0; display: block; margin-top: 10px;}
.tableTypeB th, .tableTypeB td {display: block ; width:calc(100% - 15px); margin-left: 15px;}
.tableTypeB .split th:after {display: block}
.table th:after {display: none}
.table tr:last-child td:after, .table tr:last-child th:after {opacity: 1}
.table td:after, .table th:after, .mid .menu_item .h3:after {opacity: .3}
.table th, .tableTypeB th, .tableTypeA th {background-color: transparent; width: 100%; line-height: normal;padding: 15px 0 10px 0; font-size: 14px; color: var(--battleship-grey)}
.table td, .tableTypeB td, .tableTypeA td {padding: 0 15px 15px 0; line-height: normal; height: auto;}
.table .split th,.table .split td, .tableTypeB .split td, .tableTypeA .split td {display: inline-block; padding: 15px; height: 50px; margin: 0; padding-right: 20px; width: 20%}
.table .tableTypeB .split td:nth-child(even) {width: 30%}
.tableTypeA thead {display: none;}
.tableTypeA td {width: 100%; padding: 15px 0;}
.tableTypeB td .thumb_menu {width: 200px; height: 200px; margin:10px auto; display: block;/* border: 2px dotted var(--light-grey)*/}
.tableTypeB td .thumb_menu + div {text-align: center; margin-left: 0; display: block;}

.table .quantity a {background-color: transparent; line-height: normal; height: auto; padding: 0;}


/*리스트*/

.list { position: relative}
.list li {position: relative}
.list li .infos {display: inline-block; white-space: nowrap}
.list li .infos .name {display: flex; margin-bottom: 3px; align-items: center}
.list li .infos .name span:first-child {font-size: 16px; font-weight: bold;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block}
.list.order_cart li .infos .name {display: block;font-size: 16px; font-weight: bold;  overflow: visible; text-overflow:clip; white-space: normal; word-break: keep-all }
.list.order_cart li .infos .name span:first-child {font-size: 16px; font-weight: bold;  overflow: visible; text-overflow:clip; white-space: normal; word-break: keep-all; display: inline}
.list.horizon li .name span, .list.horizon li .name span {margin-bottom: 0 !important}
.list li .infos .substr {font-size: 12px; color: var( --mid-grey ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.list li .infos .price {font-size: 16px; letter-spacing: 0;margin-top: 5px; margin-bottom: 5px; font-weight: 300; line-height: 20px; color:var(--mid-grey)}
.list li .infos .name + .price {margin-top: 0;}
.list li .infos .btn_add_list {background: url(../images/icon/add_8px.svg) no-repeat left center; padding-left: 13px; font-weight: 500; color: var( --mid-grey ); font-size: 0; line-height: 18px; height: 28px;  padding-top: 5px; padding-bottom: 5px; display: block}
.list.vertical li .infos .btn_add_list:after {content: "메뉴상세보기"; font-size: 12px;}

.list li.soldout {pointer-events: none;  position: relative}
.list li.soldout .infos {filter: grayscale(1); opacity: .4}
.list li.soldout .thumb_menu {position: relative;  filter: grayscale(.6);}
.list li.soldout:before {color: var(--main-color); text-align: center; border: 2px solid var(--main-color); content: "품절"; position: absolute; font-size: 12px; border-radius: 50px; z-index: 3; font-weight: bold; left: 25px;;  width: 32px; height: 32px; line-height: 32px; }
.list.vertical li.soldout:before {left: 50%; margin-left: -25px; top: calc(25vw - 28px)}
.list li.soldout .thumb_menu a{ background-color: rgba(255,255,255,0.6); z-index: 2;  }
span.sale{font-size: 10px; font-weight: bold; display: inline-block; color: #fff; padding: 4px 6px; border-radius: 3px; background-color: var(--main-color); margin-left: 5px; line-height: 12px; flex-grow: 0; flex-shrink: 0; }
.list.horizon li span.sale {margin-top: -2px; vertical-align: top}
span.sale.time {background-color: var(--orange)}
.menu_detail_popup .menu_detail .thumb_menu {display: flex; justify-content: flex-start; align-items: flex-end; padding: 10px}
.menu_detail_popup .menu_detail .thumb_menu span.sale {font-size: 12px; padding: 6px 8px;}

.list.vertical li.sale span.sale {margin-top: 5px;}
.list li.option .thumb_menu {overflow: hidden}
.list.vertical li.option .thumb_menu:after, .list.horizon li.option .thumb_menu:after {content: "옵션"; background-color: var(--battleship-grey); color: #fff; font-size: 10px; font-weight: bold; display: inline-block; padding: 4px 15px; border-radius: 3px; line-height: 12px; position: absolute; right: -25px; top: 5px; text-align: center; transform: rotate(45deg); width: 50px;}



.main .list.vertical li .thumb_menu {height: calc(50vw - 63px)}
.list li.sale p span.before {color: var(--mid-grey); margin-right: 10px; text-decoration: line-through; }

.menu_item .list.horizon li, .store.list.horizon li {display: flex;  align-items: center; justify-content: left;}
.store.list.horizon li:after {display: none;}
.list.horizon li {font-size: 0; white-space: nowrap; padding: 10px 0; display: flex; align-items: center}
.list.horizon li .thumb_menu {width: 70px; height: 70px;  vertical-align: top;}
.list.horizon li .infos{vertical-align: top; align-items: center; width: 100%; padding-left: 0}
.list.horizon li .thumb_menu + .infos {padding-left: 15px; width: calc(100% - 80px);}
.list.horizon li .infos > * {max-width: calc(100% - 20px); white-space: nowrap; text-overflow: ellipsis}
.list.horizon.order_cart li .infos .substr {max-width: calc(100% - 70px); white-space: normal; text-overflow: ellipsis}
.list.horizon li .infos .btn_add_list {background: url(../images/btn/add_gray.svg) no-repeat right center; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -8px; font-size:0}

.list.vertical {padding-right: 5px; }
.list.vertical:after {content: ""; clear: both; display: block}
.list.vertical li:after {display: none;}
.list.vertical li{ width: 50%; float: left; padding-right: 15px; padding-bottom: 30px;}
.list.vertical li .infos { display: block}
.list.vertical li .infos .name {margin-top: 15px; margin-bottom: 2px}
.list.vertical li .infos .store_name {margin-top: 15px; font-size: 12px;}
.list.vertical li .infos .store_name + .name {margin-top: 3px}
.list.vertical li .thumb_menu {width: 100%;  height: calc(50vw - 28px); display: block}
.menu_item .list.horizon li:first-child {padding-top: 0}
.limit19 { font-size: 12px; color:var(--main-color); font-weight: bold; text-align: center; width: 24px; height: 24px; line-height: 20px; border:2px solid var(--main-color); border-radius: 50%; display: inline-block; vertical-align: middle; margin-top: -2px;}


.list.order_cart {}
.list.order_cart:before {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; top: 0; content: ""; width: 300%; opacity: 1; } 
.list.order_cart li {padding: 20px 0; border-bottom: 1px dotted var( --light-grey ); display: block}
.list.order_cart li:last-child {border: none;}

.list.order_cart li:after {display: none}
.list.order_cart .infos {margin-top: 0}
.list.order_cart .infos .name {font-size: 16px;}
.list.order_cart .infos .option {font-size: 14px;}
.list.order_cart .infos .price {font-weight: bold; color: var( --mid-grey ); position: absolute;bottom: 20px; right: 0; margin-bottom: 0; margin-top: 0;}
.list.order_cart .infos .before {margin-right: 5px; text-decoration: line-through; color: var(--light-grey); display: inline-block}
.list.order_cart .infos .before:after {content: "\e907"; font-family: xeicon; display: inline-block; margin-left: 5px;}

.list.single_row li{ white-space: nowrap; padding: 20px 0; display: block}
.list.single_row li .infos {margin: 0; display: block}
.list.single_row li .infos .name {display: inline-block; width: 50%; margin: 0; padding: 0; overflow: visible; text-overflow: clip; vertical-align: top}
.list.single_row li .infos .value {display: inline-block; width: 50%; text-align: right; font-size: 16px; color: var(--battleship-grey);vertical-align: top}
.list.single_row li .infos .value a {padding-right: 18px; background: url(../images/icon/arrow_right.svg) no-repeat right center; }
.list.single_row li.discount .infos .name{font-size: 14px; color: var(--battleship-grey)}
.list.single_row li.discount .infos .value {font-size: 14px; font-weight: bold; color:var(--main-color) }
.list.single_row li.discount .infos + .infos{margin-top: 5px;}
.list.single_row li.total .infos .name{font-size: 18px;}
.list.single_row li.total .infos .value {font-size: 18px; font-weight: bold; color:var(--main-color) }
.list.single_row li.total:after {display: none;}

.list .add_order_list {z-index: 10}

.list.horizon .add_order_list .quantity_setting {right: -100%; transition: .2s; }
.list.horizon .add_order_list .quantity_setting.show {right:10px ; box-shadow:7px 8px 9px 2px rgba(0, 0, 0, 0.11);}
.list.horizon .add_order_list .quantity_setting {position: absolute;  background-color: #fff; border:2px solid var(--lighten-grey);  border-radius: 50px; padding: 12px 0 10px 12px; white-space: nowrap; height: 48px; z-index: 10; top: 50%; margin-top: -27px;}
.list.horizon .add_order_list .quantity_setting a {font-size: 14px; color: var(--light-grey)}
.list.horizon .add_order_list .quantity_setting a.btn_cancel {margin: 0 15px;}
.list.horizon .add_order_list .quantity_setting a.btn_add_cart {text-align: center; line-height: 54px; width: 54px; border-radius: 40px; background-color: var(--main-color); color: #fff; display: inline-block; margin-top: -17px; margin-right: -2px; font-weight: bold;}

.list.vertical .add_order_list .quantity_setting {max-height: 0; overflow: hidden; transition: .2s; bottom: 0 }
.list.vertical .add_order_list .quantity_setting.show {max-height: 300px; bottom: 15px; box-shadow:7px 8px 9px 2px rgba(0, 0, 0, 0.11);}
.list.vertical .add_order_list .quantity_setting { position: absolute; z-index: 20; background-color: #fff;    font-size: 0; overflow: hidden; border-radius: 8px;  left: 0; white-space: nowrap; width: calc(100% - 15px)}
.list.vertical .add_order_list .quantity_setting .quantity{ text-align: center; display: block; white-space: nowrap; padding:15px 10px; border:2px solid var(--lighten-grey); border-bottom: 0; border-radius: 8px 8px 0 0; font-size: 0; }
.list.vertical .add_order_list .quantity_setting .quantity .quantity_num {width: calc(100% - 44px)}
.list.vertical .add_order_list .quantity_setting a.btn_cancel, .list.vertical .add_order_list .quantity_setting a.btn_add_cart { width: 50%; display: inline-block; text-align: center; padding: 12px 0; font-size: 14px; color: #fff}
.list.vertical .add_order_list .quantity_setting a.btn_cancel {background-color: var(--light-grey); border-radius: 0 0 0 8px}
.list.vertical .add_order_list .quantity_setting a.btn_add_cart {background-color: var(--main-color); border-radius: 0 0 8px 0}

.list.order_cart .set_quantity {margin-top: 10px; overflow: hidden}
.list.order_cart .set_quantity .quantity{ overflow: hidden}
.list.order_cart .set_quantity a.delete {position: absolute; right: 0; top: 20px;}
.list.order_cart .set_quantity a.delete img {height: 16px;}

.order_log .list .status_btn {position: absolute; right: 10px; top: 50%; margin-top: -26px; height: 52px; width: 50px; background-position: center top; color: var(--light-grey); font-size: 10px; font-weight: bold; background-repeat: no-repeat; text-align: center; padding-top: 40px}
.list.my_only_menu li .status_btn { background-image: url(../images/btn/mymenu.svg); background-size: auto 32px; background-position: 13px top;}

.list.my_only_menu li .status_btn:before {content: "주문하기"; font-size: 10px}


.order_log .list li .thumb_menu {overflow: hidden; display: flex; align-items: center; justify-content: center}
.order_log .list li .thumb_menu a { text-align: center; color: #fff; font-size: 16px; font-weight: bold; align-items: center; display: inline-flex; justify-content: center; padding: 0 20px; word-break: keep-all; z-index: 2}
.order_log .list li .infos .info .name {margin-bottom: 2px; color: var(--dark-grey)}
.order_log .list li .infos .info .item_price {color: var(--main-color); font-size: 14px}
.order_log .list li .infos .info .substr {color: var(--light-grey); margin-bottom: 2px;}
.list li.complete .status_btn {background-image: url("../images/btn/write_review.svg")}
.list li.complete .status_btn:before {content: "리뷰쓰기"}
.list li.complete.reviewed .status_btn {display: none;}
.list li.complete.reviewed .status_btn:before {content: "리뷰보기"}
/*.mid .sector.second .order_log .list li.complete .thumb_menu a {background-color: rgba(0,0,0,0.3);  }
.mid .sector.second .order_log .list li.complete .thumb_menu a:before {content:"완료" }*/
.list li.waiting .status_btn {background-image: url("../images/btn/cancel_order.svg")}
.list li.waiting .status_btn:before {content: "주문취소"}
.list li.waiting .thumb_menu a {background-color: rgba(0,194,213,0.6); }
.list li.waiting .thumb_menu a:before {content:"접수중" }
.list li.ing .thumb_menu a {background-color: rgba(250,176,5,0.6); }
.list li.ing .thumb_menu a:before {content:"준비중" }
.list li.ready .thumb_menu a {background-color: rgba(244,2,35,0.4); }
.list li.ready .thumb_menu a:before {content:"메뉴완료"; }
.list li.canceled {filter: grayscale(1); text-decoration: line-through}
.list li.canceled .thumb_menu a {background-color: rgba(0,0,0,0.4); }
.list li.canceled .thumb_menu a:before {content:"취소완료"; }

.mypage .recent_order.list li.delivery .infos .price{bottom: auto; top: 50px; margin-bottom: 0;}
.list.horizon li.delivery {flex-wrap: wrap}
.list.horizon li.delivery .item_status {font-size: 12px; display: flex; clear: both; width: 100%; align-items: center; flex-basis: 100%; justify-content: flex-start; padding: 15px 20px 5px 0; height: 32px; box-sizing: content-box}
.list.horizon li.delivery .item_status .delivery_stats{}
.list.horizon li.delivery .item_status .delivery_stats h4 {font-size: 14px}
.list.horizon li.delivery .item_status .delivery_stats a {font-size: 12px; color: var(--light-grey)}
.list.horizon li.delivery .item_status .delivery_stats a i {display: inline-block; border: 1px solid var(--lighten-grey);border-radius: 50%;}
.list.horizon li.delivery .item_status .item_btns { text-align: right; flex-grow: 1; font-size: 0}
.list.horizon li.delivery .item_status .item_btns a{ font-size: 12px; text-align: center; margin-left: 10px; color: var(--mid-grey); background-color: var(--pale-grey); padding: 8px 15px; border-radius: 20px; font-weight: bold}
.list.horizon li.delivery .item_status .item_btns a.bgcolor-main-gra {color: #fff}

.store.list.horizon {background-color: #fff; position: relative; z-index: 3;}
.store.list.horizon li .infos {padding-left: 15px; width: calc(100% - 85px)}
.store.list.horizon li .infos > * {max-width: 100%;}
.store.list.horizon li .infos .name {line-height: 22px; height: 22px;}
.store.list.horizon li .subinfo {font-size: 0}
.list li .name .additional {font-size: 10px; color: var(--light-grey); font-weight: bold; border: 1px solid var(--lighten-grey); margin-left: 5px; padding: 0 5px; line-height: 20px; display: inline-block; border-radius: 3px; vertical-align: top;}
.list.vertical.row3 {}
.list.vertical.row3 li {padding-right: 20px; }
.store.list.horizon li:last-child:after {display: none;}
.list li .subinfo p {font-size: 12px; display: inline-block; color: var(--light-grey); position: relative; line-height: 1; vertical-align: top; margin-top: 5px;}
.list li .subinfo p + p {padding-left:10px;}
.list li .subinfo p + p:before { width: 1px; height: 10px; top: 50%; margin-top: -5px; background-color: var(--lighten-grey); margin-right: 10px; display: inline-block; position: absolute; left: 0;}
.list li .subinfo p.review {color: var(--orange); font-weight: bold; padding-left: 15px; line-height: 1; background-size: auto 100%}
.list li .subinfo p.fav { padding-left: 15px; background: url("../images/btn/like_off_list.svg") no-repeat left center; margin-left: 10px;}
.list.vertical.row3 .infos .info .price {font-size: 14px; color: var(--light-grey); margin: 2px 0}
.list.vertical.row3 .infos .info .price .before {text-decoration: line-through;}
.list.vertical.row3 .infos .info .price .after {color: var(--main-color); margin-left: 5px;}



.mid .section.roulette {padding-bottom: 10px;}
.mid .section.roulette .list.vertical.row3 li { text-align: center}
.mid .section.roulette .list.vertical.row3 li .thumb_menu {height:  calc(50vw - 82px); background-color: transparent; width: 100px; height: 100px; margin: auto}
.mid .section.roulette .list.vertical.row3 li .thumb_menu.cafe {background-image: url("../../../roulette/images/thumb/cafeO.png"); border-radius: 50%; box-shadow: 10px 10px 30px rgba(0,0,0,0.2)}
.mid .section.roulette .list.vertical.row3 li .thumb_menu.normal {background-image: url("../../../roulette/images/thumb/normalO.png"); }
.mid .section.roulette .list.vertical.row3 li .thumb_menu.game {background-image: url("../../../roulette/images/thumb/gameO.png"); }
.mid .section.roulette .list.vertical.row3 li .thumb_menu.hospital {background-image: url("../../../roulette/images/thumb/hospitalO.png"); }
.mid .section.roulette .list.vertical.row3 li .thumb_menu.restaurant {background-image: url("../../../roulette/images/thumb/restaurantO.jpg");}
.mid .section.roulette .list.vertical.row3 li .thumb_menu.shoppingmall {background-image: url("../../../roulette/images/thumb/shoppingmallO.png"); }
.mid .section.roulette .list.vertical.row3 li .thumb_menu.brick {background-image: url("../../../roulette/images/thumb/brick.jpg"); border-radius: 0; }
.mid .section.roulette .list.vertical.row3 li .thumb_menu .thumb {width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px;}
.mid .section.roulette .list.vertical.row3 li .infos .name {justify-content: center}
.list.vertical.row3 li .infos .info a {pointer-events: none}
.mid .section.roulette.section .head h3 {font-family: "GmarketSans" !important}
.mid .section.roulette.section .head h3 span {color: var(--main-color); font-weight: bold; font-family: inherit;}

.mid .section .title_deco {line-height: 1;  font-size: 0;}
.mid .section .title_deco span {display: inline-block; font-size: 14px; padding: 8px;}
.mid .section .title_deco span.first {background-image: var(--main-gra); color: #fff;}
.mid .section .title_deco span.first + span{border:2px solid #ff9c8b; padding: 6px; border-left: 0; color:#ff9c8b } 

.mid .section.hotplace {padding-top: 20px; padding-bottom: 10px;}
.mid .section.hotplace .head {margin-bottom: 10px;}
.mid .section .head a.more{ position: absolute; right: 20px; top: 3px; }
.mid .section.listall {padding-top: 20px; padding-bottom: 20px;}
.mid .section.listall .head {overflow: visible; height: 34px; margin-bottom: 10px; margin-left: -20px; }
.mid .section.listall .head .filters { white-space: nowrap; font-size: 0; overflow-x: auto; padding-left: 20px; position: relative; width: calc(100% + 20px); padding-right: 90px}
.mid .section.listall .head:after {content: ""; background-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); display: block; position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: 100px; pointer-events: none}
.mid .section.listall .head li.apply {font-size: 12px; display: inline-block; margin-right: 10px; color: #fff; background-color: var(--light-grey); font-weight: bold; border-radius: 30px;   padding: 8px 5px 8px 10px;}
.mid .section.listall .head li.apply a {padding: 5px}
.mid .section.listall .head li.apply a img {height: 8px; vertical-align: middle; margin-top:-3px;  }
.mid .section.listall .head a.more{ position: absolute; z-index: 5}
.mid .section.listall .filterlist {position: absolute; width: 100%; box-shadow: 0 10px 10px rgba(0,0,0,0.15); z-index: 10; background-color: #fff; top: 0; left: 0; display: none;}
.mid .section.listall .filterlist h3 {margin-left: 20px;margin-bottom: 10px;}
.mid .section.listall .filterlist h3 a {position: absolute; right: 20px; top: 0;}
.mid .section.listall .filterlist li {border-bottom: 1px solid var(--lighten-grey); padding:10px 20px 5px 20px;}
.mid .section.listall .filterlist li a {font-size: 12px; display: inline-block; margin-right: 5px; color: var(--light-grey); border:1px solid var(--lighten-grey); font-weight: bold; border-radius: 30px;  padding: 8px 10px; margin-bottom: 5px; transition: .2s }
.mid .section.listall .filterlist li a.on {color: #fff; background-color: var(--light-grey); border:1px solid transparent}


.mid .section.roulette .mid_banner li { border-radius: 8px; overflow: hidden}
.mid .section.roulette .current_winner {   text-align: center; margin-bottom: 20px;}
.mid .section.roulette .current_winner dl {display: inline-block; background-color: var(--pale-grey); border-radius: 30px; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; padding: 5px 15px; color:var(--mid-grey)}
.mid .section.roulette .current_winner dl > * {display: inline-block; line-height: 30px; font-size: 12px;}
.mid .section.roulette .current_winner dl dt.item { height: 30px;}
.mid .section.roulette .current_winner dl dt.item img {height: 100%;}
.mid .section.roulette .current_winner dl span {font-weight: bold}

.mid .section.reviews {padding-bottom: 20px;}
.mid .section.reviews .head {margin-bottom: 10px;}
.mid .section.reviews .list.horizon li .thumb_menu{ width: 60px; height: 60px;}
.mid .section.reviews .list.horizon li .store_name {font-size: 12px}
.mid .section.reviews .list.horizon li .name {font-size: 14px; margin-bottom: 0;}
.mid .section.reviews .list.horizon li .subinfo p + p:before {display: none;}


.main .section .list li:after {display: none !important}
.main .section.rshop h3 {margin-bottom: 8px;}
.main .section.rshop .list .thumb_menu {}
.main .section.rshop .list .price {color: var(--main-color)}
.main .section.rshop .list .price .before {text-decoration: line-through; color: var(--light-grey); margin-right: 10px;}

/*쿠폰*/
.store.list.horizon.coupon {padding-bottom: 10px; margin-right: 20px;}
.store.list.horizon.coupon li{ background-color: var(--pale-grey);  border-radius: 8px; padding-left: 10px;  margin-bottom: 10px; padding: 15px 0 15px 10px}
.store.list.horizon.coupon li .thumb {flex-basis: 70px;}
.store.list.horizon.coupon li .infos {width: calc(100% - 130px)}
.store.list.horizon.coupon li .infos .name {font-size: 12px; margin-bottom: 0;}
.store.list.horizon.coupon li .infos .cont {font-size: 16px; font-weight: bold; color: var(--main-color); margin-bottom: 3px;}
.store.list.horizon.coupon li .infos .substr {margin-bottom: 0;}
.store.list.horizon.coupon li:before {content: ""; position: absolute; right: 60px; top: -5px; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; z-index: 2 }
.store.list.horizon.coupon li:after, .store.list.horizon.coupon li:last-child:after{ content: ""; position: absolute; right: 60px; bottom: -5px; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; transform: scale(1); left: auto; opacity: 1; display: block; z-index: 2}
.store.list.horizon.coupon li .use_ny {font-size: 12px; font-weight: bold; text-align: center; color: var(--light-grey); flex-basis: 65px; position: relative; height: 70px;}
.store.list.horizon.coupon li .use_ny .barcode { padding: 10px; }
.store.list.horizon.coupon li .use_ny .barcode img {width: 100%;}
.store.list.horizon.coupon li .spector {height: 100%; top: 0; right: 65px; border-left: 2px dotted var(--lighten-grey); position: absolute}
.store.list.horizon.coupon li.used .thumb, .store.list.horizon.coupon li.used .infos, .store.list.horizon.coupon li.expired .thumb, .store.list.horizon.coupon li.expired .infos,.store.list.horizon.coupon li.unable .infos, .store.list.horizon.coupon li.unable .thumb {opacity: .3;  filter: grayscale(1)}
.store.list.horizon.coupon li.used .use_ny:before, .store.list.horizon.coupon li.expired .use_ny:before, .store.list.horizon.coupon li.unable .use_ny:before {content: ""; position: absolute; left: 0; top: -20%; width: 100%; height: 140%; background: rgba(255,255,255,0.5) no-repeat center center; background-size: 80% auto;}
.store.list.horizon.coupon li.able{border: 1px solid var(--lighten-grey);  box-shadow: 3px 3px 9px rgba(0,0,0,0.15); -webkit-box-shadow: 3px 3px 9px rgba(0,0,0,0.15)}
.store.list.horizon.coupon li.able.only .name i { margin-right: 3px;}
.store.list.horizon.coupon li.able.selected {border: 1px solid var(--main-color);  box-shadow: 3px 3px 9px rgba(164,0,2,0.20); -webkit-box-shadow: 3px 3px 9px rgba(164,0,2,0.20); transition: .2s}
.store.list.horizon.coupon li.able:before {content: "\e92b"; font-family: xeicon; font-size: 24px;  position: absolute; top: 5px; left: 5px; z-index: 2; width: auto; height: auto; right: auto; background-color: transparent; color: var(--light-grey)}
.store.list.horizon.coupon li.able.selected:before {color: var(--main-color); border-color: var(--main-color); transition: .2s}
.store.list.horizon.coupon li.able:after {display: none;}
.store.list.horizon.coupon li.used .use_ny:before {background-image: url("../images/img/icon-used-stamp.svg");}
.store.list.horizon.coupon li.expired .use_ny:before {background-image: url("../images/img/icon-expired-stamp.svg"); }
.my_coupon {padding: 0 20px 20px}
.my_coupon.edit_mode .list.horizon.coupon li .use_ny .btn_del {display: flex}
.coupon.list.horizon.coupon li .use_ny .btn_del{ width: 100%; height: 140%; background-color: var(--pale-grey); display: none;  align-items: center; justify-content: center; position: absolute; font-size: 11px; top: -20%;}
.coupon.list.horizon.coupon li .use_ny .btn_del img {display: block; width: 18px; margin-bottom: 5px;}

.coupon.store.list.horizon.coupon {margin-right: 0;}
.popup.coupon_detail {width: calc(100vw - 40px); height:0;  background-color: #fff; z-index: 31; top: 50px; left: 20px; position: fixed; overflow: hidden; transition: .2s}
.popup.coupon_detail.poped {height: calc(100vh - 50px);}
.popup.coupon_detail .close {position: absolute;top: 0; right: 0; padding: 20px; z-index: 30;}
.popup.coupon_detail .coupon.full {margin-right: 0; margin-bottom: 0; position: absolute; width: 100%; height: calc(100% - 20px); background-color: var(--pale-grey); border-radius: 12px; display: flex; flex-direction: column; flex-grow: 0}
.popup.coupon_detail .coupon.full .barcode {padding: 20px; mix-blend-mode: multiply; flex-grow: 1; align-items: center; justify-content: center; text-align: center; display: flex; flex-direction: column; font-weight: bold; color: var(--light-grey); font-size: 12px; margin-top: 10px;}
.popup.coupon_detail .coupon.full .barcode img {max-width: 100%;}
.popup.coupon_detail .coupon.full .caution {align-self: flex-end; margin-top: 0;}
.popup.coupon_detail .coupon.full .caution li {font-size: 11px;}
.popup.coupon_detail .list.horizon.store { background-color: transparent; align-self: flex-start; padding:0}
.popup.coupon_detail .store.list.horizon li {margin-bottom: 0;}
.popup.coupon_detail .store.list.horizon li .infos {width: auto; flex-flow: 1; }
.popup.coupon_detail .store.list.horizon li:before, .popup.coupon_detail .store.list.horizon li:after {display: none;}

.my_review .list.review {}
.my_review .tabs {white-space: nowrap; font-size: 0; margin-left: 20px; position: relative}
.my_review .tabs a {display: inline-block; padding:5px 0 15px 0; font-size: 16px; color: var(--light-grey); font-weight: bold;}
.my_review .tabs a.active {color: var(--dark-grey)}
.my_review .tabs a + a {margin-left: 20px;}
.my_review .list.review .writer .thumb{margin-right: 15px;}
.my_review .list.review .writer .btns {float: right; color: var(--light-grey); }
.my_review .list.review .writer .btns a + a {margin-left: 15px;}
.my_review .list.review .writer h5 {font-size: 16px; width: 100%; white-space: nowrap; overflow: hidden; margin-top: 5px;}
.my_review .list.review .writer h5 span {display: inline-block; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; line-height: 19px}
.my_review .list.review .writer h5 img { margin-left: 5px; vertical-align: middle; width: 16px; margin-top: -5px}
.my_review .list.review .writer .date {font-size: 12px; color: var(--light-grey);}
.my_review .review_will {margin-left: 20px;}
.my_review .review_will .list li.join_event .thumb_menu:before {content: "리뷰이벤트참여"; background-color: var(--main-color); position: absolute; padding: 5px 0; left: 0; width: 100%; bottom: 0; text-align: center; color: #fff; font-size: 10px; display: block}

.main .mid .section + .section { background-color: #fff; z-index: 1}
.main .mid .section h4 + .bx-wrapper {margin-top: 15px;}
.mid .small_banner_bottom img {max-width: 100%;}

.order .header {background-color: #fff}
.mid .article {padding: 20px 0 0}
.mid .sub_title {font-size: 14px; font-weight: bold;}
.mid .sub_title + .text {margin-top: 5px;}
.mid .text {font-size: 14px; color: var( --battleship-grey ); word-break: keep-all}
.order .header .right_btn_set {font-size: 18px; }
.order .mid {padding-left: 20px; padding-right: 20px;}
/*.order .mid input[type=text],.order .mid  input[type=password],.order .mid  input[type=number],.order .mid  input[type=tel] {height: 60px}*/
.mid.has_btn {padding-bottom: 80px;}

.store.edit .mid.has_btn {padding-bottom: 80px;}

.main .mid {overflow-x: hidden; background-color: var(--pale-grey)}
.main .mid > * {background-color: #fff}
.main .mid .banner_area {padding-left: 20px;}
.main .mid .big_banner > li {position: relative; transition: .2s; z-index: 4;}
.main .mid .big_banner > li img { border-radius: 10px; box-shadow: none; position: relative; z-index: 3;}
.main .mid .big_banner > li.active:after {box-shadow: 10px 10px 30px 0 rgba(255,149,116,0.4); content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; position: absolute; opacity: 1; z-index: 2}
.main .mid .big_banner > li:after, .main .mid .big_banner > li.active + li:after { opacity: 1}
.main .mid .big_banner > li.active.blue:after{ box-shadow: 10px 10px 30px 0 rgba(153,55,216,0.2);}
.main .mid .big_banner > li.active.red:after{ box-shadow:10px 15px 25px 0 rgba(255, 120, 116, 0.33);}
.main .mid .big_banner > li.active {z-index: 10;}

.main .mid .bx-viewport {overflow: visible !important}
.main .mid .big_banner > li h3 {font-size: 18px; }
.main .mid .big_banner > li h4 {font-size: 21px; margin-bottom: 5px; }
.main .mid .big_banner > li p {font-size: 12px; color: var( --battleship-grey ); width: 70%; overflow: hidden; white-space: normal; line-height: 1.2; max-height: 2.4em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.main .mid .mid_banner .bx-clone {display: none;}
.main .mid .big_banner {font-size: 0}
.main .mid .big_banner li {display: inline-block !important; float: none !important; vertical-align: top}

.main .mid .notice {}
.main .mid .notice li {margin-left: 20px}
.main .mid .notice li:last-child {margin-left: 0; padding-left: 20px;}
.main .mid .notice li span {font-size: 14px;}
.main .mid .notice li span + span {margin-left: 5px;}
.main .mid .footer .caution {padding: 0;}
.main .mid .footer .caution h6{padding: 0; font-size: 12px}
.main .mid .footer .company_info {font-size: 10px; color: var(--mid-grey); margin-bottom: 10px;}
.main .mid .footer h5 {font-size: 11px; margin-bottom: 10px; text-transform: uppercase; color: var(--battleship-grey)}
.main .mid .footer .btns {white-space: nowrap; font-size: 11px; margin-bottom: 10px; line-height: 1;}
.main .mid .footer .btns a{ color: var(--mid-grey);}
.main .mid .footer .btns a + a {margin-left: 10px; border-left: 1px solid rgba(0,0,0,0.1); padding-left: 10px;}


.mid .section {padding-left: 20px; padding-top: 30px }
.mid .section .head {margin-bottom: 20px; position: relative;}
.mid .section .head p {font-size: 20px; text-align:left; width: 90px; position: absolute; top: 50%; right: 20px; height: 32px; line-height: 32px; margin-top: -16px; font-weight: 200; color: var(--light-grey); min-width: 32px; background-repeat: no-repeat; background-position: right center;  }
.mid .section .head p.thistime {padding-left: 23px; background: url("../images/icon/timesale.svg") no-repeat left center;}
.mid .section .sect.daysale .head p {background-size: auto 100%; }
.mid .section .sect.daysale .head p.sunday {background-image: url("../images/icon/sunday.svg")}
.mid .section .sect.daysale .head p.monday {background-image: url("../images/icon/monday.svg")}
.mid .section .sect.daysale .head p.tuesday {background-image: url("../images/icon/tuesday.svg")}
.mid .section .sect.daysale .head p.wednesday {background-image: url("../images/icon/wednesday.svg")}
.mid .section .sect.daysale .head p.thursday {background-image: url("../images/icon/thursday.svg")}
.mid .section .sect.daysale .head p.friday {background-image: url("../images/icon/friday.svg")}
.mid .section .sect.daysale .head p.saturday {background-image: url("../images/icon/saturday.svg")}
.mid .section.sales {padding: 30px 0 0 20px}
.mid .section.sales .sect + .sect { border-top: 1px dotted var(--lighten-grey); padding-top: 30px;}
.spector {position: relative}
.mid .section.spector { border-top: 6px solid var(--pale-grey)}
.mid .section h3 img {vertical-align: middle; margin-top: -2px;}
.mid .section h3 {font-size: 18px; font-weight: 800 }
.mid .section h4 {font-size: 14px; font-weight: normal; color: var(--battleship-grey); margin-top: 2px;}
.mid .section h3 + .store.list.horizon {margin-top: 5px;}


.main_category .header.main + .contents {padding-top: 90px}
.main_category .contents .mid {background-color: #fff}
.main_category .header.main + .contents .mid .newopen .sect {margin-top: 12px; background-color: var(--pale-grey); padding-left: 20px;}
.mid .section.newopen { padding-top: 0; padding-left: 0;}
.mid .section.newopen .head img {display: inline-block; margin-top: -12px}
.mid .section.newopen .head h3 {display: inline-block; background-image: var(--main-gra); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; margin-top: 20px; line-height: 1}
.mid .section.newopen .list.vertical {text-align: center}
.mid .section.newopen .list.vertical .infos .name {display: block}

.mid h1 { font-size: 24px; padding-top: 10px; line-height: 1; font-weight: 800;}
.mid h1 img {vertical-align: middle; height: 20px; margin-top: -5px}
.mid h1 + h1 {padding-top: 0}
.mid h1 + h1 + h1 +h1 {padding-bottom: 10px;}
.mid h1.title.deactive {color: var(--lighten-grey)}
.mid h1.title.active {font-weight: 800}
.mid h2.price {font-size: 30px; color: var(--main-color); margin-top: 5px;}
.mid h2.price > span {font-size: .5em; font-weight: normal; color: var( --light-grey ); margin-left: 5px;}
.mid h2.order_number {  margin-top: 10px; margin-bottom: 10px; font-size: 14px; color: var(--mid-grey)}
.mid h2.order_number span {letter-spacing: 0; font-size: 24px; font-weight: bold; display: block; color: var(--dark-grey)}
.mid h3.substr {font-size: 14px; color: var( --battleship-grey ); font-weight: normal; margin-top: 5px;}
.mid h4.date {margin-top: 10px; font-size:14px; color: var(--light-grey);}
.payment .mid .article {padding: 20px 0; position: relative}
.payment .contents {background-color: var(--pale-grey);}
.payment .contents .mid {background-color: #fff}
.payment .caution {margin: 0 -20px -80px; padding-bottom: 100px;}

.bottom{ padding: 0 20px 50px 20px; position: relative; margin-top: -1px;}
.bottom.has_btn { padding: 0 20px 80px 20px; overflow-x: hidden}
.bottom {background-color: var( --pale-grey );}
.bottom:after {background-color: var( --dark-grey ); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; top: 0; content: ""; width: 300%; opacity: 1; }


.menu_detail {padding-left: 20px; padding-right: 20px;}
.menu_detail .mid .thumb_menu{width: 100%; height: calc(100vw - 40px); display: block; display: inline-block !important; float: none !important}
.thumb_menu_set {font-size: 0;}
.menu_detail .mid .title{padding-top: 30px}
.menu_detail .mid h3.substr {color: var(--battleship-grey)}
.menu_detail .mid h2.price {margin-bottom: 30px;}
.menu_detail .mid h2.price .quantity {float: right; margin-top: 7px;}
.menu_detail .list.option {}
.menu_detail .list.option li {padding:20px 0 15px 0}
.menu_detail .list.option li h4{ font-size: 16px;margin-bottom: 5px; }
.menu_detail .list.option li > div { font-size: 14px; display: block; line-height: 40px;  }
.menu_detail .list.option li > div span {margin-right: 5px; vertical-align: middle}
.menu_detail .list.option li > div .value {float: right; color: var(--mid-grey); font-size: 14px; font-weight: bold}


.delivery .header.fixed,.delivery .header.side_style {background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0))!important; color: #fff}
.delivery .header.fixed .left_btn a.back{background-image: url("../images/btn/back_white.svg")}
.delivery .header.fixed .right_btn_set a.share {background-image: url("../images/btn/share_white.svg"); min-width: 20px}
.scroll_mode .delivery .header.fixed .right_btn_set a.share {background-image: url("../images/btn/share_black.svg"); }
.scroll_mode .delivery .header.fixed,.delivery .header.side_style {background: #fff !important; color: var(--dark-grey); box-shadow: 0px 3px 9px rgba(0,0,0,0.1)}
.scroll_mode .delivery .header.fixed .left_btn a.back {background-image: url("../images/btn/back_black.svg")}
.delivery.menu_detail {padding: 0;}
.delivery.menu_detail .contents {padding-bottom: 210px;}
.delivery.menu_detail.option_pop .contents {padding-bottom: 410px;}
.delivery.menu_detail .price_info {padding: 30px; border-bottom: 8px solid var(--pale-grey)}
.delivery.menu_detail .price_info .review_avg {margin-top: 5px;}
.delivery.menu_detail .price_info .review_avg span.cnt {color: var(--light-grey); margin-left: 10px;}
.delivery.menu_detail .price_info p.delivery_price {color: var(--mid-grey); margin-top: 5px;}
.delivery.menu_detail .mid .thumb_menu {border-radius: 0}
.delivery.menu_detail h1,.menu_detail.delivery h2,.menu_detail.delivery h3 {padding:0; word-break: keep-all; line-height: normal}
.delivery.menu_detail .mid .title {padding-top: 0;}
.delivery.menu_detail .mid h2.price {margin-bottom: 0}
.delivery.menu_detail .header + .contents {padding-top: 0;}
.delivery.menu_detail .item_detail img {max-width: 100%;}
.delivery.menu_detail .item_detail > div {position: relative}
.delivery.menu_detail .item_detail .more {background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.77) 28%, var(--white) 50%); padding:45px 20px 12px; position: absolute; width: 100%; left: 0; bottom: 0; z-index: 1}
.delivery.menu_detail .item_detail .item_info {max-height: 200vh; overflow: hidden; transition: .2s}
.delivery.menu_detail .item_detail div.expand {max-height: 100%; padding-bottom: 90px}
.delivery.menu_detail .item_detail .item_info .more a.more_btn:after {content: "상세정보 더보기"}
.delivery.menu_detail .item_detail .item_info.expand .more a.more_btn:after {content: "상세정보 닫기"}
.delivery.menu_detail .item_detail .item_review .more a.more_btn:after {content: "리뷰 더보기"}
.delivery.menu_detail .item_detail .item_review.expand .more a.more_btn:after {content: "리뷰 닫기"}
.delivery.menu_detail .item_detail .item_facts .more a.more_btn:after {content: "상품정보 제공 고시 더보기"}
.delivery.menu_detail .item_detail .item_facts.expand .more a.more_btn:after {content: "상품정보 제공 고시 닫기"}
.delivery.menu_detail .item_detail .item_facts {max-height: 350px; padding: 50px 20px 0; overflow: hidden}
.delivery.menu_detail .item_detail .item_facts h3 {margin-bottom: 10px;}
.delivery.menu_detail .item_detail .expand .more {padding: 20px;}
.delivery.menu_detail .item_detail .expand .more a.more_btn img {transform: rotate(180deg);}
.delivery.menu_detail .item_detail .more a.more_btn {background-color: #fff; border-radius: 8px; border: 1px solid var(--lighten-grey); color: var(--light-grey); font-weight: bold; box-shadow:12px 6px 12px 0 rgba(0, 0, 0, 0.1); display: block; height: 50px; line-height: 50px; text-align: center;}
.delivery.menu_detail .item_detail .more a.more_btn img {vertical-align: middle; margin-top: -3px; margin-right: 5px; display: inline-block; line-height: 50px; transition: .2s}
.delivery.menu_detail .item_review { padding: 0 0 0 20px; margin-top: 30px;}
.delivery.menu_detail .item_review .list.review .writer {padding-bottom: 0; }
.delivery.menu_detail .item_review .list.review li:after {display: none; }
.delivery.menu_detail .item_review .list.review li { padding: 20px 0 0 0}
.delivery.menu_detail .item_review .list.review li .thumb_profile {width: 56px; height: 56px; flex-basis: 56px; flex-shrink: 0;}
.delivery.menu_detail .item_review .list.review li .writer .writer_info .item_name{ font-weight: bold; margin-bottom: 3px;; color: var(--mid-grey); font-size: 12px;}
.delivery.menu_detail .btn_global {padding: 0; background: var(--main-gra)}
.delivery.menu_detail .btn_global > a {padding: 20px }
.delivery.menu_detail .btn_global a {background: none; height: auto; line-height: normal}
.delivery.menu_detail .btn_global .options {background-color: var(--pale-grey); color: var(--dark-grey);position: relative; border-top: 1px solid var(--lighten-grey); box-shadow: 0 -3px 12px rgba(0,0,0,0.1)}
.delivery.menu_detail.option_pop .btn_global .options .toggler i {transform: rotate(-180deg); transition: .3s}
.delivery.menu_detail.option_pop .btn_global .options .list{max-height: 200px; overflow-y: auto; }
.delivery.menu_detail.option_pop .btn_global .options .list li {pointer-events: none; padding: 20px 0;  }
.delivery.menu_detail.option_pop .btn_global .options .list li a {pointer-events: all}
.delivery.menu_detail .btn_global .options .toggler {text-align: center; background-color: var(--pale-grey); width: 36px; height: 36px; line-height: 30px; border-radius: 50%; transition: .3s; z-index: 0; box-shadow: 0 -6px 6px rgba(0,0,0,0.1); border-top: 1px solid var(--light-grey); margin: -18px auto; display: block; position: relative}
.delivery.menu_detail .btn_global .options .list{max-height: 0; transition: .2s;  overflow-y: hidden; overflow-x: hidden; padding: 0 20px; z-index: 1 }
.delivery.menu_detail .btn_global .options .list:before, .delivery.menu_detail .btn_global .options .list:after {display: none;}
.delivery.menu_detail .btn_global .options .list.order_cart:after {display: none;}
.delivery.menu_detail .btn_global .options .selector {padding:20px 20px 0 20px; position: relative; z-index: 2; pointer-events: none;}
.delivery.menu_detail .btn_global .options .selector > * {pointer-events: all}
.delivery.menu_detail.option_pop .btn_global .options .selector:before {background-image: linear-gradient(rgba(246,247,249,0), rgba(246,247,249,1)); content: ""; position: absolute; width: 100%; height:30px; left: 0; top: -30px;}
.delivery.menu_detail .select_option {display: none;}
.delivery.menu_detail.option_sel_pop .select_option { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 100; display: block; padding: 10px; right: 0; bottom: 0; top: 0; left: 0;}
.delivery.menu_detail.option_sel_pop .select_option .list.option_select { display: flex; flex-direction: column; background-color: #fff; font-size: 14px; }
.delivery.menu_detail.option_sel_pop .select_option.menu_detail_popup .menu_detail .sub_infos {margin-top: 0}

.delivery.menu_detail .btn_global .list li .infos .substr {font-weight: normal}
.delivery.menu_detail .btn_global .list.order_cart .set_quantity, .delivery.menu_detail .btn_global .list.order_cart .set_quantity .quantity {overflow: visible}
.delivery.menu_detail .btn_global .list.horizon.single_row.totalprice {background-color: var(--pale-grey); padding: 0 20px; color: var(--dark-grey)}
.delivery.menu_detail .bx-wrapper .bx-pager {margin-top: -30px; position: relative; z-index: 2}

.radio_multi { font-size: 14px; display: block;  }
.radio_multi  span {margin-right: 5px; vertical-align: middle}
.menu_detail .btn_global a{ margin: 0; border-radius: 0;}
.menu_detail .btn_global.add a:before, .delivery.menu_detail .btn_global > a:last-child:before {content: "\e917"; font-family: xeicon; vertical-align: middle; display: inline-block; font-size: 1.2em; margin-right: 4px; margin-top: -2px}
.menu_detail .btn_global.type2 + .menu_detail .btn_global.add {}



.error {display: flex; justify-content: center; align-items: center; background-color: var(--pale-grey)}
.error .img { text-align: center; width: 70%; margin-top: -80px; margin-bottom: 20px}
.error .img img{  margin-bottom: 20px}
.error .img h1 {font-size: 36px;}
.error .img h2 {font-size: 18px; letter-spacing: 0; margin-bottom: 10px;}
.error .img p {color: var(--mid-grey)} 

.error.no_store {}
.error.no_store .header.fixed{ background: transparent !important;}


.member .forms > li.error {display: block; background-color: inherit}
/*회원가입*/


.member .mid {padding-left: 30px; padding-right: 30px;}
.member .ment {color: var(--mid-grey); font-size: 14px; word-break: keep-all; margin-top: 15px;}
.member .header {background-color: #fff}
.member .header .left_btn {padding-left: 30px}
.member .forms {margin-top: 30px;}
.member .forms > li {padding-bottom: 25px; white-space: nowrap; font-size: 0;}
.member .forms li.correct h2 span {color: var(--mint-blue); font-weight: bold}
.member .forms li.error h2 span {color: var(--cherry-red); }
.member .forms li.error input {border:1px solid var(--cherry-red); color: var(--cherry-red);}
.member .forms > li:last-child {padding-bottom: 0}
.member .forms li h2 {font-size: 16px; margin-bottom: 8px;position: relative}
.require {background: url("../images/icon/star.svg") left center no-repeat; padding-left: 16px;}
.member .forms li h2 span {font-size: 12px; text-align: right; float: right;font-weight: normal; color: var(--light-grey)}
.member .forms li input {font-weight: bold}
.member .radio {line-height: 60px; font-size: 14px; vertical-align: middle}
.member .radio span {line-height: 60px; font-size: 14px; vertical-align: middle}
.member .radio span:first-child {margin-left: 0}
.member .radio span {margin-right: 5px; margin-left: 15px;}
.member .forms li .with_input {width: 68px; text-align: center; height: 50px; line-height: 50px; background-color: var(--light-grey); color: #fff; display: inline-block; margin-left: -68px; border-radius: 0 5px 5px 0; font-size: 12px}
.member .forms li .with_btn { padding-right: 78px}
.member .forms li .list.single_row {}
.member .forms li .list.single_row:after{background-color: var( --dark-grey ); height: 1px; position: absolute; left: 0; top: 0; content: ""; width: 300%; transform: scale(.334); transform-origin: left top; opacity: 1;}
.member .radios .radio{margin-top: 30px; line-height: 24px;}

.member .forms li .list.single_row li span.checkbox {margin-right: 5px;}
.member .forms li .list.single_row li .infos {font-size: 14px;}
.member .forms li .list.single_row li .infos .name {font-weight: normal; font-size: 14px; vertical-align: top}
.member .forms li .list.single_row li .infos .value {font-weight: normal; font-size: 14px; vertical-align: top; color: var(--light-grey)}
.member .forms dt {font-size: 12px; font-weight: bold; color: var(--light-grey); padding-top: 20px;}
.member .forms dd {font-size: 14px; color: var(--dark-grey); padding-bottom: 20px; position: relative}

.member .forms li select.width_input {width: 100px; background-position: right center; }
.member .forms li select.width_input + input[type=text] {width: calc(100% - 100px); border-radius: 0 8px 8px 0;}
.member .agreement {color: var(--mid-grey); font-size: 12px}
.member .agreement h4 {color: var(--dark-grey); margin: 25px 0 5px 0; font-size: 16px;}
.member .agreement strong {color: var(--battleship-grey);}

.member.login {background: url("../images/img/bg_login@3x.png") center; background-size: cover;}
.member.login:before {background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";}
.member.login .header {display: none}
.member.login h2.copy {margin: 30px 0; font-size: 26px; font-weight: 200; color: #fff; letter-spacing: -1px;}
.member.login .login_form {border-radius: 8px; background-color: #fff; overflow: hidden}
.member.login .login_form li{position: relative}
.member.login .login_form input {border-radius: 0; height: 60px; padding-left:50px; background-position: 20px center; background-repeat: no-repeat; position: relative; letter-spacing: 0; font-weight: bold}
.member.login .login_form input.id {background-image: url("../images/icon/id.svg")}
.member.login .login_form input.pw {background-image: url("../images/icon/pw.svg")}
.member.login .login_form + .btn_login {display: block; height: 60px; line-height: 60px; border-radius: 8px; text-align: center; background-color: var(--main-color); color: #fff; font-weight: bold; font-size: 16px; margin-top: 10px;}
.member.login .login_form + .btn_login + .btn_join {display: block; height: 60px; line-height: 56px; border-radius: 8px; text-align: center; border:2px solid #fff; color: #fff; font-weight: bold; font-size: 16px; margin-top: 10px;}
.member.login h3 {color: #fff; font-size: 16px; margin: 20px 0 15px 0;}
.member.login .sns_login_set {font-size: 0; white-space: nowrap; text-align: left; margin-top: 20px; width: calc(100% + 30px)}
.member.login .sns_login_set a {display: inline-block; width: 20%; }
.member.login .sns_login_set a img{height:40px; border-radius: 8px;}
.member.login .find_id_pw {  color: #fff; font-weight: bold; display: inline-block; width: 50%; line-height: 18px; margin-top: 30px;}
.member.login .find_id_pw img {margin-right: 5px; height: 18px;}
.member.login .join_member {  color: #fff; font-weight: bold; display: inline-block; width: 50%; text-align: right; margin-left: -4px; line-height: 18px; margin-top: 30px;}
.member.login .join_member img {margin-right: 5px; height: 18px;}




/*.main .contents .mid {padding-bottom: 63px;}*/

.main .contents .mid .footer { padding: 20px; background-color: var(--pale-grey)}

.qrcode {background-color: #000; height: 100%}
.qrcode .banner {position: fixed; left: 0; bottom: 0;} 
.qrcode.main .banner {position: fixed; left: 0; bottom: 50px;} 
.qrcode .viewport {height: 100%;}
.qrcode.main .viewport {height: 100%; padding-bottom: 63px;}
.qrcode .viewport .view_finder { position: absolute; left: 50%; bottom: 50%; width: 180px; height: 180px; margin-left: -90px; }


.progress {white-space: nowrap; font-size: 0; padding: 15px 0; background-color: #fff}
.progress h1 {font-size: 12px; width: 25%; display: inline-block; text-align: center; color: var(--lighten-grey); vertical-align: top}
.progress h1.active {color: var(--main-color)}
.progress h1 i{ display: block; text-align: center; font-size: 28px; margin-bottom: 10px; vertical-align: top; }
.progress h1 p {word-break: keep-all; font-weight: normal; color: var(--mid-grey); font-size: 11px; margin-top: 2px}
.progress h1:nth-child(3).active i{animation: xi-spin 1s infinite linear}

.point_log .list.single_row li{font-size: 14px;}

.system_msg {display: flex; justify-content: center; align-items: center; position: fixed; z-index: 100; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow: hidden; top: 0; left: 0; transition: .2s; visibility: hidden; opacity: 0}
.system_msg.poped {visibility:visible; opacity: 1}
.system_msg .alert_msg { background-color: #fff; border-radius: 16px; overflow: hidden; max-width: 90%; box-shadow: 24px 24px 36px rgba(0,0,0,0.32)}
.system_msg .alert_msg h3 {padding:30px 30px 20px 20px; font-size: 24px; letter-spacing: -1px; word-break: keep-all;}
.system_msg .alert_msg h3:after {display: block; width: 30px; height: 3px; background-color:var(--dark-grey); content: "";  margin-top: 20px;}
.system_msg .alert_msg p {font-size: 16px; color: var(--battleship-grey); padding: 0 20px; line-height: 1.4}
.system_msg .alert_msg .btns {display: block; margin-top: 30px; font-size: 0; white-space: 0;}
.system_msg .alert_msg .btns a {padding: 20px; background-color: var(--mid-grey); color: #fff; display: inline-block; width: 50%; font-size: 14px; font-weight: bold;}
.system_msg .alert_msg .btns a:first-child ~ .system_msg .alert_msg .btns a:last-child {width: 100%; background-image: var(--main-gra)}
.system_msg .alert_msg .btns a.confirm {background-image: var(--main-gra)}

/*친구초대이벤트*/
.event_invite {height: 0}
.event_invite .img {position: relative;}
.event_invite .mycode {position: absolute;  top: 127.46vw; margin: 0 auto;  text-align: center; color: var(--mid-grey); width: 100%; }
.event_invite .mycode .code { border: 3px solid #FFCD5A; border-radius: 30px; background-color: #fff; padding: 12px 18px; display: inline-block}
.event_invite .mycode .code span {font-weight: bold; color: var(--dark-grey); margin-left: 5px;}
.event_invite .event_area {width: 100%;/* height: 292vw; background:#FFECC0 url(../images/img/event_invite_img@3x.png) no-repeat left top; background-size: 100% auto; */ background-color: #FFECC0}
.event_invite .caution { background-color:#FFE5AA; margin-top: 40px }
.event_invite .caution h2{ color:#CD8F00; font-size: 14px; margin-bottom: 10px;}
.event_invite .caution li{ color:#9D8244; font-size: 11px; margin-bottom: 2px;}
.event_invite .img .btns { position: absolute; width: 100%; left: 0; top: 180vw; white-space: 0; font-size: 0; text-align: center; vertical-align: top}
.event_invite .img .btns a {display: inline-block; width: 33.3%; height: 11vw;}
.event_invite .close {position: absolute; left: 0; top: 0; padding: 10px; font-size: 1.8em; color: #825C2A; z-index: 10}

.popup {position: absolute;  transition: .2;}
.popup.full.poped {overflow: hidden; height: 100%; overflow-y: auto;  top: 0;}
.popup.full {position: fixed; width: 100%;  z-index: 31;  transition: .2s; left: 0; max-height: 3000px; overflow: hidden;  top: -100%;}


/*스탬프*/
.stamp .mid {padding:0 20px 20px;}
.stamp .stamp_list {border-radius: 12px; background-color: var(--pale-grey); padding: 20px;}
.stamp .stamp_list .store_name {position: relative}
.stamp .stamp_list .store_name h2 {margin-bottom: 5px; font-size: 16px;}
.stamp .stamp_list .store_name p { font-size: 14px; color: var(--battleship-grey);}
.stamp .stamp_list .store_name p:nth-of-type(2) {font-size: 12px; color: var(--light-grey); margin-top: 3px}
.stamp .stamp_list .store_name .count {position: absolute; right: 0; top: 0; font-size: 21px; font-weight: 200; color: var(--mid-grey)}
.stamp .stamp_list .store_name .count span {color: var(--main-color);}
.stamp .stamp_list .stamp_area {font-size: 0; margin-top: 10px;}
.stamp .stamp_list + .stamp_list {margin-top: 10px;}
.stamp .stamp_list .stamp_area .stamp_shape {width: 13.4vw; height: 13.4vw; margin: 2.6vw 2.6vw 0 0; display: inline-block;  overflow: hidden; background-size: cover; background-position: center; position: relative; border-radius: 50%; border: 2px dotted var(--light-grey); filter: grayscale(1) brightness(1.1); opacity: .5 }
.stamp .stamp_list .stamp_area .stamp_shape:nth-child(5n + 5) {margin: 2.6vw 0 0 0;  }
.stamp .stamp_list .stamp_area .stamp_shape:after {background-image:linear-gradient(black, black); width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; mix-blend-mode: saturation; z-index: 1}
.stamp .stamp_list .stamp_area .stamp_shape.on {filter: grayscale(0); border: none; opacity: 1; /*box-shadow: 1px 1px 6px rgba(0,0,0,0.15)*/}
.stamp .stamp_list .stamp_area .stamp_shape.on:before, .stamp .stamp_list .stamp_area .stamp_shape.on:after {display: none;}


/*지역설정*/
.set_loc {position: fixed; z-index: 70; background-color: #fff; width: 100%; height:0; display: flex; flex-direction: column; overflow: hidden; transition: .2s }
.set_loc.poped {height: 100%;}
.set_loc .close {position: absolute; top: 0; right: 0; padding: 20px}
.set_loc .list_addr {position: relative; z-index: 2; padding: 8px 0; background-color: #fff}
.set_loc .list_addr li{ font-size: 21px; padding: 8px 20px; flex-grow: 0;}
.set_loc .list_addr li{ transition: .2s; font-weight: 800;  color: var(--lighten-grey)}
.set_loc .list_addr li input[type=radio] + label:before {display: inline-block; width: 22px; height: 22px; background: var(--lighten-grey)  no-repeat center; background-size: 50% auto; background-image: url("../images/input/check_on.svg"); border-radius: 30px; vertical-align: middle; border: none; margin-top: -3px}
.set_loc .list_addr li input[type=radio]:checked + label:before {background-color: var(--dark-grey);}
.set_loc .list_addr li input[type=radio]:checked + label {color: var(--dark-grey)}
.set_loc .list_addr li a.remove {background: url("../images/btn/remove_addr.svg") no-repeat center; width: 20px; height: 20px; display: inline-block; margin-left: 10px; vertical-align: middle; margin-top: -4px}

.set_loc .add_addr {background-color: var(--lighten-grey); color: #fff; font-size: 16px; line-height: 40px;  padding: 8px 20px; flex-grow: 0; position: relative; z-index: 3; transition: .2s}
.set_loc .add_addr.expand { border-radius: 0 0 24px 24px; margin-bottom: -24px; box-shadow: 0 12px 36px rgba(0,0,0,0.15)}
.set_loc .add_addr.expand > a span {display: none;}
.set_loc .add_addr > a {flex-grow: 1; font-weight: normal;}
.set_loc .add_addr > a span { margin-left: 5px; font-weight: normal;}
.set_loc .add_addr > a > i {width: 22px; font-size: 21px; vertical-align: middle; margin-top: -3px; margin-right: 5px; transition: .3s; transform: rotate(0); transform-origin: center;}
.set_loc .add_addr.expand > a > i {transform: rotate(45deg); }
.set_loc .search_dong {margin-top: 7px; padding-bottom: 13px; display: none; }
.set_loc .search_dong input[type=text] {background-color: #fff; border-radius: 8px}
.set_loc .search_dong input[type=text] + a {height: 50px; line-height: 50px;}
.set_loc .search_dong .expand_result {background-color: #fff; margin-top: 10px; transition: .2s; border-radius: 8px; overflow-y: auto;  overflow-x: hidden; max-height: 40vh; display: none;}
.set_loc .search_dong .expand_result li{font-size: 14px; font-weight: normal; color: var(--dark-grey); padding-left: 15px; padding-right: 15px;}
.set_loc .search_dong .expand_result li a {display: flex; flex-grow:1; flex-direction: row; }
.set_loc .search_dong .expand_result li a span {flex-grow: 1; justify-content: center; align-items: center;}
.set_loc .search_dong .expand_result li a i {font-size: 16px; color: var(--lighten-grey);  flex-grow: 0; align-self: center; margin-right: 0; width: auto; height: auto;}
.set_loc .search_dong a.current_loc { text-align: center; display: block; line-height: 46px; height: 50px; border-radius: 8px; border: 2px solid #fff; margin-top: 10px; font-weight: bold; font-size: 14px;}
.set_loc .search_dong a.current_loc i {margin-right: 3px; font-size: 1.2em; vertical-align: middle; margin-top: -2px;}
.set_loc .map { flex-shrink: 1; flex-grow: 1; position: relative; height: 100%; z-index: 1}
.set_loc .map .status {position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; z-index: 1}
.set_loc .map .status p {display: inline-block; font-size: 14px; background-color: #fff; padding: 15px 20px; border-radius: 40px; box-shadow: 10px 10px 30px rgba(0,0,0,0.25)}
.set_loc .map .status p span {color: var(--main-color); font-weight: bold}
.set_loc .map iframe {flex-grow: 1}

.set_loc .map .pin {width: 30px; height: 43px; position: absolute; background: url("../images/icon/map_pin.svg") no-repeat center bottom; text-align: center; transition: .2s; filter: grayscale(1);}
.set_loc .map .pin.active { transform-origin: center bottom; transform: scale(1.2); filter: grayscale(0)}
.set_loc .map .pin > p.category {width: 22px; height: 22px; border-radius: 22px; margin: 4px auto; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: auto 60%;}
.set_loc .map .pin.cafe > p.category {background-image: url("../images/btn/menu_order_coffee_black.svg")}
.set_loc .map .pin.food > p.category {background-image: url("../images/btn/menu_order_food_black.svg")}
.set_loc .map .popup {width: 100vw; position: absolute; text-align: left; padding:0 10px; z-index: 2;  top: 10px; right: -100%; transition: .2s}
.set_loc .map .popup.poped { right: 0;transition: .2s;} 

.set_loc .map .popup .close {position: absolute; border-radius: 50%; width: 28px; height: 28px; text-align: center; line-height: 28px; padding: 0; background-color: #fff; z-index: 10; top: -5px; right: -5px;  box-shadow: 1px 1px 10px rgba(0,0,0,0.2); }
.set_loc .map .popup .close img {width: 10px; opacity: .5; vertical-align: middle}
.set_loc .map .popup .list {padding-left: 10px; border-radius: 8px;  box-shadow: 10px 10px 30px rgba(0,0,0,0.15);}
/*.set_loc .map .pin:before {content: "▼";  text-shadow: 3px 3px 6px rgba(0,0,0,0.3); color: #fff; position: absolute; top: -5px; left: 50%; margin-left: -6px; z-index: 3;}*/


.permission {position: fixed; z-index: 50; ; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 30px; transition: .2s; visibility: hidden; opacity: 0}
.permission.poped {opacity: 1; visibility: visible}
.permission .agreement { background-color: #fff; position: relative}
.permission .agreement .close {position: absolute; top: 0; right: 0; padding: 20px; z-index: 50;}
.permission .agreement .popup_contents h1 img {height: 20px; margin-bottom: 20px;}
.permission .agreement .popup_contents h2 {font-weight: 800; font-size: 18px; line-height: 24px; margin-bottom: 30px; }
.permission .agreement .popup_contents {padding: 30px; position: relative}
.permission .agreement .popup_contents .permission_list { padding-top: 30px; position: relative}
.permission .agreement .popup_contents .permission_list li {margin-bottom: 30px;}
.permission .agreement .popup_contents .permission_list h3 {font-size: 16px; line-height: 24px;}
.permission .agreement .popup_contents .permission_list p {font-size: 12px; color: var(--light-grey); margin-left: 29px;}
.permission .agreement .popup_contents + a {display: block; line-height: 60px; color: #fff; font-weight: bold; text-align: center}
.permission .agreement .popup_contents .permission_list li h3 span {display: inline-block; line-height: 24px; background-position: center center; background-repeat: no-repeat; height: 24px; width: 24px; vertical-align: top; margin-right: 5px;}
.permission .agreement .popup_contents .permission_list li.push h3 span {background-image: url("../images/icon/permission_noti.svg");}
.permission .agreement .popup_contents .permission_list li.camera h3 span {background-image: url("../images/icon/permission_camera.svg");}
.permission .agreement .popup_contents .permission_list li.geometric h3 span {background-image: url("../images/icon/permission_geo.svg");}


/*메뉴 상세 팝업*/

.menu_detail_popup {position: fixed; z-index: 90; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); padding: 10px; right: -100%; bottom: -100%;  overflow: hidden; -webkit-transform:translate3d(0,0,50px)}
.menu_detail_popup.poped-bt {bottom: 0; right: 0; animation-name: poped-bt; animation-duration: .2s}
.menu_detail_popup.poped-rl {bottom: 0; right: 0; animation-name: poped-rl; animation-duration: .2s}
@keyframes poped-bt {0% {bottom: -100%; right:0 } 1% {bottom: -100%; right: 0} 100% {bottom: 0; right: 0}}
@keyframes poped-rl {0% {bottom: 0; right:-100% } 1% {bottom: 0%; right: -100%} 100% {bottom: 0; right: 0}}

.menu_detail_popup .close {position: absolute; z-index: 41; width: 32px; height: 32px; line-height: 32px; text-align: center; top: 5px; left: 5px; background-color: rgba(255,255,255,1); box-shadow: 3px 3px 12px rgba(0,0,0,0.1); border-radius: 50%; }
.menu_detail_popup .close img {vertical-align: middle; width: 12px;}
.menu_detail_popup .menu_detail { overflow: hidden; max-height: calc(100% - 70px); overflow-y: auto; padding: 0; border-radius: 8px; box-shadow: 10px 10px 30px rgba(0,0,0,0.15)}
.menu_detail_popup .menu_detail .mid {background-color: #fff; background-image: none;}
.menu_detail_popup .menu_detail .mid .bxslider3 {display: block;}
.menu_detail_popup .bx-pager {margin-top: -30px; position: relative;}
.bx-wrapper .bx-pager.bx-default-pager a {background: #fff}
.bx-wrapper .bx-pager.bx-default-pager a.active {background: var(--main-color)}
.menu_detail_popup .menu_detail .mid .thumb_menu { height: calc(100vw - 20px); display: block; border-radius: 0; position: relative}
.menu_detail_popup .menu_detail .mid .thumb_menu a {display: none;}
.menu_detail_popup .menu_detail .mid h1, .menu_detail_popup .menu_detail .mid h2, .menu_detail_popup .menu_detail .mid h3 , .menu_detail_popup .menu_detail .mid ul.list {padding-left:20px; padding-right:20px; word-break: keep-all}
.menu_detail_popup .menu_detail .mid h2.price {font-size: 24px; position: relative}
.menu_detail_popup .menu_detail .mid h2.price .default_price { font-size: 16px; color: var(--mid-grey); font-weight: normal; margin-top: 5px;}
.menu_detail_popup .menu_detail .mid h2.price .default_price .before {margin-right: 10px; text-decoration: line-through; color: var(--light-grey)}
.menu_detail_popup .menu_detail .mid h2.price .default_price .before:after {content: "\e907"; font-family: xeicon; display: inline-block; margin-left: 10px;}
.menu_detail_popup .menu_detail .mid h2.price .quantity { margin-top: 4px; float: none; position: absolute; right: 20px; top: 0;}
.menu_detail_popup .menu_detail .mid .radio + .radio {margin-left: 0; padding-left: 0;}
.menu_detail_popup .btn_global.add {background-color: transparent; padding-left: 10px; padding-right: 10px; position: absolute;}
.menu_detail_popup .btn_global.add a{  }
.menu_detail_popup .btn_global a:first-child:nth-last-child(2),.menu_detail_popup .btn_global a:first-child:nth-last-child(2) ~ a {background-color: var(--mid-grey) !important}
.menu_detail_popup .menu_detail input[type=radio] + label:before,.menu_detail_popup .menu_detail input[type=checkbox] + label:before {width: 24px; height: 24px;}
.menu_detail_popup .menu_detail .sub_infos {padding:0 20px 20px; margin-top: -10px; color: var(--mid-grey); line-height: 1.6;}
.menu_detail_popup .menu_detail .sub_infos p span {font-weight: bold;}
.menu_detail_popup .menu_detail .sub_infos p.weekday span {font-weight: bold; display: inline-block; width: 22px; height: 22px;border-radius: 3px; border: 1px solid var(--lighten-grey); text-align: center; font-size: 11px; line-height: 20px; margin-right: 3px; }
.menu_detail_popup .menu_detail .sub_infos p.apply.timesale span{color: var(--main-color)}
.menu_detail_popup .menu_detail .sub_infos p.weekday span.today {border-color: var(--main-color); background-color: var(--main-color); color: #fff; }
.menu_detail_popup .menu_detail .sub_infos p.weekday.apply span.today { width: auto; padding-left: 5px; padding-right: 5px;}
.menu_detail_popup .menu_detail .sub_infos p.apply span.today:after, .menu_detail_popup .menu_detail .sub_infos p.apply.timesale span:after{content: "(적용중)"}
.menu_detail_popup .menu_detail .list li:last-of-type:after{display: none;}


.search_expand {position: fixed; width: 100%; z-index: 31; background-color: #fff; border-radius: 0 0 24px 24px; box-shadow: 0 12px 24px rgba(0,0,0,0.15);  padding: 0 20px; transition: .2s; overflow: hidden; max-height: 0;}
.search_expand .title {font-size: 21px; line-height: 50px; font-weight: 800; margin-bottom: 5px; }
.search_expand .close { display: block; padding:15px 20px 15px 60px; top: 0; right: 0; position: absolute; line-height: 1;}
.search_expand .search_bar {  overflow: hidden; height: 50px; line-height: 50px; white-space: nowrap}
.search_expand .search_bar input[type=text]{ padding: 0 20px; border-radius: 50px; }
.search_expand .search_bar input[type=text] + * {display: inline-block; width: 50px; height: 50px; margin-left: -50px; background: url("../images/btn/search.svg") no-repeat center center; font-size: 0;}
.search_expand .recent_search {}
.search_expand .recent_search li {font-size: 14px;}
.search_expand .recent_search li.sub_title {font-size: 14px; overflow: hidden; } 
.search_expand .recent_search li.sub_title h3 {float: left; color: var(--dark-grey)}
.search_expand .recent_search li.sub_title a {float: right; font-size: 12px; color: var(--mid-grey); margin-top: 2px;}
.search_expand .recent_search li.sub_title a img {height: 15px; margin-right: 3px;}
.search_expand .recent_search li {color: var(--battleship-grey)}
.search_expand .recent_search li a.del { float: right; opacity: .5; margin-top: 2px;}
.search_expand .recent_search li a.del img{ float: right; height: 12px;}
.search_expand.poped {max-height: calc(100% - 200px)}


.search_result .tabs{ overflow-x: auto; white-space: nowrap; position: relative; font-size: 0; line-height: 50px; height: 50px; margin-right: -20px}
.search_result .header { height:150px;}
.search_result .header:after{background-color: var( --dark-grey ); height: 1px; position: absolute; left: 0; bottom: 0; content: ""; width: 300%; transform: scale(.334); transform-origin: left bottom; opacity: 1; display: none;}
.search_result .tabs a{line-height: 50px; height: 50px; display: inline-block; margin-right: 25px; color: var( --light-grey ); font-weight: bold; font-size: 16px; position: relative}
.search_result .tabs a.active { border-bottom: 3px solid var(--main-color); color: var(--main-color);}
.search_result .tabs a span {font-weight: 300; letter-spacing: 0;}
.search_result .search_bar { height: 50px; line-height: 50px; white-space: nowrap; margin: 0 20px; position: relative}
.search_result .search_bar input[type=text]{ padding: 0 20px; border-radius: 50px; }
.search_result .search_bar input[type=text] + * {display: inline-block; width: 50px; height: 50px; margin-left: -55px; background: url("../images/btn/search.svg") no-repeat center center; font-size: 0;}
.search_result .search_bar a.value_del {position: absolute; right: 55px; top: 16px;}
.search_result .recent_search { position: absolute; width: 100%; top: 60px; background-color: #fff; z-index: 20; line-height: normal; box-shadow: 10px 10px 24px rgba(0,0,0,0.15); border-radius: 12px; overflow: hidden; display: none;}
.search_result .recent_search li {font-size: 14px; padding: 20px;}
.search_result .recent_search li.sub_title {font-size: 14px; overflow: hidden; } 
.search_result .recent_search li.sub_title h3 {float: left; color: var(--dark-grey)}
.search_result .recent_search li.sub_title a {float: right; font-size: 12px; color: var(--mid-grey); margin-top: 2px;}
.search_result .recent_search li.sub_title a img {height: 15px; margin-right: 3px;}
.search_result .recent_search li {color: var(--battleship-grey)}
.search_result .recent_search li a.del { float: right; opacity: .5; margin-top: 2px;}
.search_result .recent_search li a.del img{ float: right; height: 12px;}
.search_result .tab_contents {margin-left: 20px; padding-top: 100px;}
.search_result .store.list.horizon li:last-child:after {display: block;}

.category .tabs{ overflow-x: auto; overflow-y: hidden; white-space: nowrap; position: relative; font-size: 0; clear: both; margin-left: 20px; line-height: normal;}
.category .header { height:auto; background-color: #fff}
.category .tabs a{padding:5px 0 15px; display: inline-block; margin-right: 25px; color: var( --light-grey ); font-weight: bold; font-size: 16px; position: relative; line-height: normal; vertical-align: top;}
.category .tabs a.active {color: var(--main-color);}
.category .tabs a span {font-weight: 300; letter-spacing: 0;}
.category .header + .contents {padding-top: 90px; padding-left: 20px;}
.category .category_img {display: flex; background-size: cover; background-position: center; height: 45vw; border-radius: 12px; margin-right: 20px; justify-content: center; align-items: stretch; align-content: stretch; color: #fff; font-size: 24px; text-align: center; font-weight: bold; flex-direction: column; overflow: hidden;}
.category .category_img:after {content: ""; z-index: 1; background-color: rgba(0,0,0,0.2); align-items: stretch; flex: 1; display: flex; flex-direction: column; justify-content: center;}
.category .category1 .category_img {background-image: url("../images/img/img_category1.jpg");}
.category .category1 .category_img:after {content: "식당"; background-color: transparent;}
.category .category2 .category_img {background-image: url("../images/img/img_category2.jpg"); }
.category .category2 .category_img:after {content: "카페"; background-color: transparent;}
.category .category3 .category_img {background-image: url("../images/img/img_category3.jpg"); }
.category .category3 .category_img:after {content: "마트"; background-color: transparent;}


/* 이미지 크롭 */
.crop { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; left: 0; top: -100%; right: 0; bottom: 0; padding: 10px; display: flex; justify-content: center; align-items: center; z-index: 45; transition: .2s;}
.crop.poped {top: 0;}
.crop_img img,  .crop_img canvas{max-width: 100%;}
.crop h1 {padding:30px 30px 20px 20px; font-size: 24px; letter-spacing: -1px; word-break: keep-all;}
.crop h1:after {display: block; width: 30px; height: 3px; background-color:var(--dark-grey); content: "";  margin-top: 20px;}
.crop p {font-size: 16px; color: var(--battleship-grey); padding: 0 20px; line-height: 1.6}
.crop p:last-of-type {margin-bottom: 20px;}
.crop_container { background-color: #fff; border-radius: 8px; overflow: hidden; flex-grow: 0; box-shadow: 12px 12px 30px rgba(0,0,0,0.15) }
.crop .btns {display: block;font-size: 0; white-space: 0;}
.crop .btns button {padding: 20px; background-color: var(--mid-grey); color: #fff; display: inline-block; width: 50%; font-size: 14px; font-weight: bold; -webkit-appearance:none; border: none; text-align: left;}
.crop .btns button:first-child ~ .system_msg .alert_msg .btns a:last-child {width: 100%; background-image: var(--main-gra)}
.crop .btns button.confirm {background-image: var(--main-gra)}
.crop .options { white-space: nowrap; font-size: 0; padding:0 15px;}
.crop .options button { font-size: 16px; text-align: center; width: calc(100% / 6); color: var(--mid-grey); -webkit-appearance:none; padding: 15px; background-color: #fff; border: none;}
.crop .img-container {}
.crop .img-container,
.crop .img-preview { background-color: #f7f7f7;text-align: center;width: 100%;}
.crop .img-container { max-height: 497px; min-height: 200px;}
@media (min-width: 768px) {
  .crop .img-container {min-height: 497px;}
}
.crop .img-container > img {max-width: 100%;}
.crop .img-preview {float: left; margin-bottom: 0.5rem;margin-right: 0.5rem;overflow: hidden;}
.crop .img-preview > img {max-width: 100%;}
.crop .preview-lg {height: 9rem;width: 16rem;}
.crop .preview-md {height: 4.5rem;width: 8rem;}
.crop .preview-sm {height: 2.25rem;width: 4rem;}
.crop .preview-xs {height: 1.125rem;margin-right: 0;width: 2rem;}
.crop .docs-cropped .modal-body {text-align: center;}
.crop .docs-cropped .modal-body > img,
.crop .docs-cropped .modal-body > canvas {max-width: 100%;}
.crop .crop_img {display: none;}

.order .order_type { overflow: hidden; border: 1px solid var(--lighten-grey); border-radius: 8px; padding-top: 0; margin-top: 20px; margin-bottom: 10px;}
.order .order_type li {width: 50%; float: left; padding: 10px 0 20px 10px; color: var(--light-grey); border-left: 1px solid var(--lighten-grey); margin-left: -1px; }
.order .order_type li .icon {height: 84px; background:no-repeat bottom center; margin-top: -15px; margin-bottom: 15px; filter: grayscale(1); transition: .2s}
.order .order_type li:first-child {border-left: 0; margin-left: 0; }
.order .order_type li .icon {height: 84px; background:no-repeat bottom center;}
.order .order_type li h4, .order .order_type li p {text-align: center; transition: .2s}
.order .order_type li.order_hall .icon { background-image: url("../images/img/order_type_hall.svg")}
.order .order_type li.order_pickup .icon { background-image: url("../images/img/order_type_pickup.svg")}
.order .order_type li h4 {color: var(--mid-grey); font-size: 16px; margin-bottom: 3px;}
.order .order_type li input[type=radio] + label { line-height: normal; display: block}
.order .order_type li input[type=radio] + label:before {width: 24px; height: 24px; line-height: 24px}
.order .order_type li input[type=radio]:checked + label:before { border-width: 0; background:var(--main-color) url("../images/input/check_on.svg") no-repeat center center; background-size: 50% auto;}
.order .order_type li input[type=radio]:checked + label .icon {filter: grayscale(0)}
.order .order_type li input[type=radio]:checked + label h4 {font-weight: 900; color: var(--main-color)}
.order .order_type li input[type=radio]:checked + label p { color: var(--dark-grey)}

.gift {padding-left: 20px; padding-right: 20px;}
.gift .ment {padding-top: 20px; background: url("../images/img/giftfor.svg") no-repeat right center; margin-bottom: 10px;}
.gift .ment p.title {margin-bottom: 10px; font-size: 14px;}
.gift .ment p.substr {font-size: 12px; margin-top: 5px; color: var(--mid-grey)}
.gift .article h3 {margin-bottom: 3px;}
.gift .article p {color: var(--mid-grey)}
.gift .article input[type=text] {margin-top: 10px;}
.gift .article.point, .gift .article.gob {padding: 20px; border: 1px solid var(--lighten-grey); margin-top: 20px; border-radius: 8px; background: no-repeat top 20px right 20px;}
.gift .article.point .num, .gift .article.gob .num {color: var(--main-color); font-size: 16px;}
.gift .article.point {background-image: url("../images/icon/roulette_point.svg")}
.gift .article.gob {background-image: url("../images/icon/gob_give.svg")}
.gift .article .list {margin-top: 15px; margin-bottom: -10px;}
.gift .list input[type=checkbox] + label {align-self: flex-start; display: flex}
.gift .list input[type=checkbox] + label:before{ background-color: #fff; z-index: 2;width: 24px; height: 24px; margin-right: -24px; position: relative; margin-top: -10px;}
.gift .list input[type=checkbox]:checked + label:before {background-color: var(--main-color)}

.popup.full.receipt { z-index: 80; padding: 10px; transition: .2s; bottom: -200%; top: auto}
.popup.full.receipt.poped {bottom: 0;  overflow-y: auto; background-color: rgba(0,0,0,0.8);}
.receipt .receipt_contents { position: relative}
.receipt .receipt_contents .close-this{ position: absolute; right: 20px; top: 20px;}
.receipt .receipt_contents .download{ position: absolute; right: 55px; top: 20px; font-size: 20px; line-height: 1;}
.receipt .receipt_contents > div {background-color: #fff}
.receipt .receipt_contents:before {content: ""; display: block; background: url("../images/img/receipt_bg.svg") repeat-x; height: 8px;}
.receipt .receipt_contents:after {content: ""; display: block; background: url("../images/img/receipt_bg.svg") repeat-x; height: 8px; transform: rotate(180deg)}
.receipt .receipt_contents .receipt_head {padding:20px 30px;}
.receipt .receipt_contents .receipt_head h1 { font-size: 14px; text-transform: uppercase; margin-top: -5px; margin-bottom: 20px;}
.receipt .receipt_contents .receipt_head h2, .popup.full.receipt .receipt_contents .receipt_head h3 {font-size: 24px; font-weight: 900;}
.receipt .receipt_contents .receipt_head h3 {}
.receipt .receipt_contents .receipt_head p {line-height: 1.4}
.receipt .receipt_contents .receipt_head p:first-of-type {margin-top: 10px;}
.receipt .receipt_contents .receipt_body {padding: 0 30px;}
.receipt .receipt_contents .receipt_body h4{ font-size: 18px; margin-bottom: 10px;}
.receipt .receipt_contents .receipt_body .bill {border-top: 1px solid var(--dark-grey)}
.receipt .receipt_contents .receipt_body .section {position: relative; padding: 20px 0; border-bottom: 1px dashed var(--dark-grey)}
.receipt .receipt_contents .receipt_body .section:last-of-type {border-bottom: 0;}
/*.popup.full.receipt .receipt_contents .receipt_body .section:before {background-color: #000; height: 1px; transform: scale(.334); transform-origin: left top;  content: ""; width: 300%; opacity: 1; display: block; position: absolute; top: 0; left: 0;}*/
.receipt .receipt_contents .receipt_body .section li {margin-bottom: 10px;}
.receipt .receipt_contents .receipt_body .section li:last-of-type{margin-bottom: 0;}
.receipt .receipt_contents .receipt_body .section li > div{display: flex; justify-content:flex-start; flex-direction: row; }
.receipt .receipt_contents .receipt_body .section li > div:last-child {margin-bottom: 0;}
.receipt .receipt_contents .receipt_body .section li > div span {align-self: stretch; flex-grow: 0; flex-shrink: 0;  flex-basis: 20%; text-align: right;}
.receipt .receipt_contents .receipt_body .section li > div span:first-child {align-self: stretch; flex-grow: 1; margin-left: 0; text-align: left; flex-basis: 50%;}
.receipt .receipt_contents .receipt_body .section li > div span.item_quan {align-self: stretch; flex-basis: 10%;}
.receipt .receipt_contents .receipt_body .section li > div span {align-self: stretch}
.receipt .receipt_contents .receipt_body .section li > div span:last-child {}
.receipt .receipt_contents .receipt_body .section li .option { flex-wrap: wrap;line-height: 1.4}
.receipt .receipt_contents .receipt_body .section li > div.option { }
.receipt .receipt_contents .receipt_body .section li > div.option span:first-child {padding-left: 5px; }
.receipt .receipt_contents .receipt_body .section.total {font-weight: bold; font-size: 18px;}
.receipt .receipt_contents .receipt_body .sectionsub {font-size: 12px; line-height: 1.4; border-top: 1px solid var(--dark-grey); padding: 20px 0;}
.receipt .receipt_contents .receipt_body .sectionsub.footer {font-size: 10px;}


.receipt.ordersheet {padding: 0;}
.receipt.ordersheet .receipt_contents .receipt_body .section li > div span {align-self: stretch; flex-grow: 1; flex-shrink: 1;  flex-basis: 20%; text-align: right;}
.receipt.ordersheet .receipt_contents .receipt_body .section li > div span:first-child {align-self: stretch; flex-grow: 1; margin-left: 0; text-align: left; flex-basis: 50%;}
.receipt.ordersheet .receipt_contents .receipt_body .sectionsub strong {font-size: 14px; margin-bottom: 3px; display: inline-block}


.order .recommand_login {border-radius: 8px;  padding:25px 20px; background: var(--pale-grey)url("../images/img/recom_login.svg") no-repeat center right 20px; margin-top: 25px;}
.order .recommand_login a {display: block}
.order .recommand_login h4{font-size: 14px; margin-bottom: 5px; padding-right: 50px}
.order .recommand_login p{font-size: 12px; color: var(--mid-grey); word-break: keep-all;  padding-right: 50px}
.order .recommand_login + .list.order_cart {margin-top: 10px;}
.order .recommand_login + .list.order_cart:before {opacity: 0;}




.small_btn { color: var(--battleship-grey); font-size: 12px; display: inline-block;  padding: 9px 15px; border-radius: 30px; border: 1px solid var(--lighten-grey)}
.btn_big {display: block; height: 60px; line-height: 60px; text-align: center; border-radius: 8px; color:var( --light-grey ); font-size: 16px; margin:20px; border:2px solid var(--lighten-grey) }







.empty .img {background: no-repeat top center; height: 155px;}
.empty h4 {font-size: 18px}
.empty p {font-size: 14px; color: var(--battleship-grey); }
.empty p + a{margin-top: 15px;}
.order_log .empty .img {background-image: url("../images/img/empty.svg"); }
.menu_sheet .empty .img {background-image: url("../images/img/no_menu.svg")}
.order .empty {padding: 40px 0 !important}
.order .empty .img {background-image: url("../images/img/empty_cart.svg"); height: 125px; }
.review .empty .img {background-image: url("../images/img/empty_review.svg")}
.mypage .empty {padding:10px 0 20px 0; overflow: hidden; text-align: left}
.mypage .empty .img {float: left; width: 57px; height: 57px; margin-right: 20px; background-position: center center}
.mypage .empty .img {float: left; width: 57px; height: 57px; margin-right: 20px; background-position: center center}
.mypage .empty.recent_order .img {background-image: url("../images/img/empty_small.svg"); }
.mypage .empty h4 {font-size: 14px; margin-top: 10px; margin-bottom: 3px;}
.mypage .empty p {font-size: 12px}
.mypage .empty.store .img {background-image: url("../images/img/store_empty.svg"); }
.mypage .empty.my_only_menu .img {background-image: url("../images/img/empty_my_only_order.svg"); }

.add_more_order { height: 60px; ;line-height: 56px; display: block; border-radius: 8px; border: 2px dotted var(--light-grey); color: var( --light-grey ); font-weight: bold; text-align: center; font-size: 16px}
.add_more_order i {vertical-align: middle; margin-right: 5px; margin-top: -2px}


.tabs a {transition: .2s}
.tabs_top {white-space: nowrap; font-size: 0}
.tabs_top a.tab{line-height: 48px; height: 50px; text-align: center; font-size: 14px; color: var( --mid-grey ); border-top: 1px solid var(--light-grey); border-left: 1px solid var(--light-grey); border-right: 1px solid var(--light-grey); border-bottom: 1px solid var( --dark-grey ); position: relative; z-index: 1; display: inline-block; width: 50%}
.tabs_top a.tab + a {margin-left: -1px;}
.tabs_top a.tab.active {border-left-color: var( --dark-grey ); border-top-color: var( --dark-grey ); border-right-color: var( --dark-grey ); border-bottom-color: #fff; color: var( --dark-grey ); font-weight: bold; z-index: 2}
.tabs_top + .list.order_cart:before {display: none;}

.mid .sector.second {white-space: nowrap;}
.tab_contents {opacity: 0; transition: .2s; display: none }
.tab_contents.active {opacity: 1; display: block;}


.loading {position: fixed; background-color: rgba(255,255,255,0.7); left: 0; top: 0; display: flex; align-items: center; z-index: 30; width: 100%; height: 100%; text-align: center; justify-content: center;}
.loading img {flex-grow: 0; width: 60%;  animation: loading 1s infinite ease-in-out;}
@keyframes loading {0%{margin-top: 0} 50%{margin-top: 10px}  100%{margin-top: 0} }



.system_msg.select_coupon {background-color: rgba(0,0,0,0.8); z-index: 50; padding: 10px; overflow: hidden}
.system_msg.select_coupon .alert_msg {width: 100%; max-width: 100%; display: flex; max-height: 100%; flex-direction: column}
.system_msg.select_coupon .alert_msg .list {flex-grow: 1; overflow-y: auto; padding:20px 10px 0;;}
.system_msg.select_coupon .btns {margin-top: 0;}
.system_msg.select_coupon .alert_msg .list p {padding: 0; font-size: inherit; line-height: normal}
.store.list.horizon.coupon li .infos .substr {font-size: 12px;}
.list.coupon li .infos .name span:first-child, .list.coupon li .infos .name {font-size: 14px; font-weight: bold; color: var(--dark-grey)}

/*준비중 처리*/
.list li.not_ready .thumb {filter: grayscale(1)}
.list li.not_ready .thumb:after { display: flex; width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: "준비중"; background-color: rgba(0,0,0,0.4); font-size: 12px; align-items: center; justify-content: center; color: #fff; font-weight: bold;}
.list li.not_ready .infos {opacity: .5}
.not_ready .menu_detail .list.option li > div {line-height: 30px;}
.not_ready .menu_detail_popup .menu_detail {max-height: 100%;}
.not_ready .menu_detail_popup .btn_global.add {display: none;}
.not_ready .menu_detail_popup .menu_detail input[type=radio] + label:before,.not_ready .menu_detail_popup .menu_detail input[type=checkbox] + label:before {display: none;}
.not_ready .store .btn_global.type2 {display: block; text-align: center; padding: 15px 0;} 
.not_ready .store .btn_global.type2 h4 {font-size: 16px; color: var(--light-grey); mix-blend-mode: multiply}
.not_ready .store .btn_global.type2 h5 {font-size: 12px; color: var(--light-grey); font-weight: normal; mix-blend-mode: multiply}
.not_ready .store .contents > .mid.has_btn {margin-bottom: -20px; }
.not_ready .store .contents > .mid.has_btn {padding-bottom: calc( env(safe-area-inset-bottom) + 66px); padding-bottom: calc( constant(safe-area-inset-bottom) + 66px);}
.not_ready .menu_detail_popup .thumb_menu:after {content: "지금은 운영시간이 아닙니다."; position: absolute; right: 0; bottom: 0; font-size: 12px; color: #fff; padding:20px 15px 10px 15px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); width: 100%;  box-sizing: border-box; text-align: right}

.thumb_menu a.delete, .thumb a.delete {height: 30px; width: 30px; line-height: 30px; border-radius: 50%; background-color: rgba(0,0,0,0.5);  display: none;  text-align: center; position: absolute; right: 5px; bottom: 5px; z-index: 20; flex: none; left: auto; top: auto}
.thumb_menu a.delete img, .thumb a.delete img {vertical-align: middle; width: 12px; height: auto; mix-blend-mode: screen}
.thumb_menu[style] a.delete, .thumb[style] a.delete {display: block}

/*베타버전*/
.beta .tab_bar {}
.beta .tab_bar:after {display: none;}
.beta .tab_bar li {padding-bottom: 0;}
.beta .tab_bar li, .beta .tab_bar li .icon {line-height: 56px; height: 56px;}
.beta .tab_bar li a {display: inline-block; position: relative;}
.beta .tab_bar li .icon {background-position: center; background-color: var(--light-grey); background-image: none; display: inline-block; vertical-align: middle; text-align: right;}
.beta .tab_bar li .count {display: block; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: bold; line-height: 20px; text-align: center; background-image: linear-gradient(to left, #f86176, #ffb28a ); color: #fff; box-shadow: 2px 2px 6px rgba(255,89,89,0.3);  position: absolute; top: 13px; right: 7px; z-index: 2}
.beta .tab_bar li.active .icon {background-image: linear-gradient(to left, #f86176, #ffb28a) !important;}
.beta .tab_bar li:first-child .icon { background-image: none; -webkit-mask-image: url("../images/btn/scan_qr_white.svg"); -webkit-mask-size:cover; background-repeat: no-repeat; width: 22px; height: 22px;}
.beta .tab_bar li:nth-child(2) .icon { background-image: none; -webkit-mask-image: url("../images/btn/tabbar_gift.svg"); -webkit-mask-size:cover; background-repeat: no-repeat; width: 27px; height: 24px;}
.beta .tab_bar li:nth-child(3) .icon { background-image: none; -webkit-mask-image: url("../images/btn/tabbar_mymenu.svg"); -webkit-mask-size:cover; background-repeat: no-repeat; width: 21px; height: 31px; margin-top: -3px;}
.beta .tab_bar li:nth-child(4) .icon { background-image: none; -webkit-mask-image: url("../images/btn/tabbar_storetalk.svg"); -webkit-mask-size:cover; background-repeat: no-repeat; width: 28px; height: 24px;}
.beta .tab_bar li:nth-child(5) .icon { background-image: none; -webkit-mask-image: url("../images/btn/tabbar_mypage.svg"); -webkit-mask-size:cover; background-repeat: no-repeat; width: 22px; height: 24px;}
.beta .header.fixed {z-index: 20; font-size: 21px; height: 64px;}
.beta .header.fixed .title { text-align: left; padding-left: 20px;  padding:18px 20px; line-height: 28px; height: auto;}

.beta .header.fixed .title .name {font-size: 24px}
.beta .header.fixed .title img.logo {height: 20px; }
.beta .header.fixed .right_btn_set a {height: 64px; background-position: right center; line-height: 64px;}
.beta .header.fixed .right_btn_set a.flash {background-image: url("../images/btn/qr_flash.svg")}
.beta .header.fixed .right_btn_set a.edit {background-image: url("../images/btn/top_select.svg"); min-width: 21px; width: 21px; transition: .2s}
.beta .header.fixed .right_btn_set a.submit, .beta .header.fixed .right_btn_set a.del {width: 21px; min-width: 21px; transition: .2s}
.beta.edit_mode .header.fixed .right_btn_set a.del {background-image: url("../images/btn/trash_black.svg"); min-width: 21px; width: 21px }
.beta.edit_mode .header.fixed .right_btn_set a.submit {background-image: url("../images/btn/ok_black.svg"); min-width: 21px; width: 21px}
.beta.edit_mode .header.fixed .right_btn_set a.edit {background-image: url("../images/btn/top_select.svg"); min-width: 0; width: 0; transition: .2s; margin-left: 0;}

.header.fixed .right_btn_set a.flash {background-image: url("../images/btn/qr_flash.svg")}
.header.fixed .right_btn_set a.edit {background-image: url("../images/btn/top_select.svg"); min-width: 21px; width: 21px; transition: .2s}
.header.fixed .right_btn_set a.submit, .beta .header.fixed .right_btn_set a.del {width: 21px; min-width: 21px; transition: .2s}
.edit_mode .header.fixed .right_btn_set a.del {background-image: url("../images/btn/trash_black.svg"); min-width: 21px; width: 21px }
.edit_mode .header.fixed .right_btn_set a.submit {background-image: url("../images/btn/ok_black.svg"); min-width: 21px; width: 21px}
.edit_mode .header.fixed .right_btn_set a.edit {background-image: url("../images/btn/top_select.svg"); min-width: 0; width: 0; transition: .2s; margin-left: 0;}



.beta .qrcode, .beta .mymenu {display: flex; flex-direction: column; background-color: #fff; height: 100%; flex-grow: 0; overflow: hidden}
.beta .qrcode, .beta .mymenu{padding-bottom: 56px;}
.ext_info {background-color: #fff; border-radius: 24px 24px 0 0; margin-top: -24px; padding-bottom: 10px; max-height: calc(100vh - 120px); transition: .2s; position: relative; z-index: 1001; box-shadow: 0 -8px 12px 0 rgba(0, 0, 0, 0.09);}
.ext_info .list {padding-left: 20px; overflow-y: auto; overflow-x: hidden; max-height: 125px; transition: .2s; transform-origin: bottom}
.ext_info:after { position: absolute; width: 100%; height: 15px; bottom: 0; left: 0; background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); content: ""; z-index: 0}
.ext_info .list.small .thumb,  .ext_info .list.small .thumb_menu{width: 50px; height: 50px;}
.ext_info .list .infos .name > span {font-size: 14px; font-weight: bold}
.ext_info .list .infos .name  {margin-bottom: 0; font-size: 14px; font-weight: bold; height: auto; line-height: normal}
.ext_info .list .infos .substr * {font-size: 12px;}
.ext_info .list li:after {display: none;}
.ext_info .list li {padding: 5px 0;}
.ext_info .list .infos .name > span, .ext_info .list .infos .name {font-size: 12px; color: var(--mid-grey); height: auto; line-height: normal; font-weight: bold}
.ext_info .list .infos .name img {height: 12px; vertical-align:top; margin-top: -1px; margin-left: 4px; vertical-align: middle}
.ext_info .list .infos .substr {font-size: 14px; color: var(--dark-grey); font-weight: bold}

.ext_info h3 {font-size: 18px; padding: 10px 0 10px 20px}
.ext_info .handle {margin: 12px auto; width: 100px; border-radius: 10px; height: 5px;  background-color: var(--lighten-grey)}
.beta .qrcode .viewport:before {position: absolute; width: 100%; height: 150px; top: 0; left: 0; background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0)); content: ""; mix-blend-mode: multiply}
.beta .qrcode .viewport{display: flex; flex-grow: 1; justify-content: center; align-items: center; background-color: var(--lighten-grey)}
.beta .mymenu .my_menus{ overflow-y: auto; overflow-x: hidden; padding-top: 64px; padding-left: 20px; padding-right: 0; padding-bottom: 30px; flex-grow: 1}
.beta .mymenu .my_menus .list.vertical {padding-right: 20px;}
.beta .mymenu .my_menus .list.vertical li {float: none; width: calc(50% - 3px)}
.beta .mymenu .my_menus .list.vertical li .thumb_menu {overflow: hidden}
.beta .mymenu .my_menus .list.vertical li .thumb_menu:after {content: "MY"; background-color: var(--orange); color: #fff; font-size: 10px; font-weight: bold; display: inline-block; padding: 4px 15px; border-radius: 3px; line-height: 12px; position: absolute; right: -25px; top: 5px; text-align: center; transform: rotate(45deg); width: 50px;}
.beta .mymenu .my_menus .list.vertical li .infos .substr {word-break: keep-all}
.ext_info .list li a.add_mymenu {background: url("../images/btn/ea_plus.svg") no-repeat; position: absolute; width: 22px; height: 22px; background-size: 22px; right: 20px; top: 50%; margin-top: -12px; opacity: .4}

.beta .mymenu .my_menus .list.vertical {column-count: 2; column-gap: 15px;}
.beta .mymenu .my_menus .list.vertical li { display: inline-block; margin: 0 0 1em; width: 100%; float: none; padding: 0;}
.beta .mymenu .my_menus .list.vertical li:first-child:nth-last-child(2),.beta .mymenu .my_menus .list.vertical li:first-child:nth-last-child(2) ~ li { width: 100%; display: block; height: 50vh;}



.beta .mymenu .list.vertical .thumb_menu label {transition: .2s; opacity: 0;}
.beta.edit_mode .mymenu .list.vertical .thumb_menu label {opacity: 1;}
.beta.edit_mode .mymenu .list.vertical li.soldout {pointer-events: auto}
.beta.edit_mode .mymenu .list.vertical li .handle{ display: block; width: 28px; height: 28px; border-radius: 5px; background:#fff  url("../images/btn/sortable_handle_grey.svg") no-repeat center; z-index: 10; margin-left: 5px; margin-top: 5px;  position: absolute}
.beta.edit_mode .mymenu .list.vertical li:before, .beta.edit_mode .mymenu .list.vertical li .thumb_menu:before, .beta.edit_mode .mymenu .list.vertical li .thumb_menu span,.beta.edit_mode .mymenu .list li.soldout .thumb_menu a {display: none;}
.beta.edit_mode .mymenu .list.vertical li.soldout .thumb_menu, .beta.edit_mode .mymenu .list.vertical li.soldout .infos {filter: grayscale(0); opacity: 1}

.beta .mymenu .my_menus .list.vertical .infos .info .name {margin: 0; margin-bottom: 6px;}
.beta .mymenu .my_menus .list.vertical .infos .info .store_name {margin-top: 15px;}
.beta .mymenu .my_menus .list.vertical .infos .info .name span:first-child {white-space: normal;}
.beta .mymenu .my_menus .list.vertical .infos .info .substr {white-space: normal;}
.beta .mymenu .menu_item:after, .beta .mymenu .my_menus .list:after {display: none;}
.beta .qrcode .viewport img { position: static; left: auto; bottom: auto; margin:auto; width: 200px; height: 200px; z-index:1}
.beta div.expand {}
.beta div.expand .viewport {}
.beta div.expand .viewport:before { background-color: rgba(0,0,0,0.7); height: 100%; background-image: none; z-index: 2}
.beta div.expand .viewport img {z-index: 1; display: none;}
.beta div.expand .ext_info {max-height: calc(100% - 65px); }
.beta div.expand .ext_info .list {max-height: calc(100% - 62px);}
.recent_order div.expand .ext_info {max-height: calc(100% - 65px); }
.recent_order div.expand .ext_info .list {max-height: calc(100% - 62px);}

.beta .event {}
.beta .event .list.event { padding: 65px 20px 56px;}

.beta .event .list.event li {margin-bottom: 20px;}
.beta .event .list.event li:after {display: none;}
.beta .event .list.event li img {width: 100%; border-radius: 20px;}

.event .list.event { padding: 55px 20px 63px;}
.event .list.event li {margin-bottom: 20px;}
.event .list.event li:after {display: none;}
.event .list.event li img {width: 100%; border-radius: 20px}


.beta .timeline .header .right_btn_set a.noti_onoff:before {content: "\e99d"; font-family: xeicon; font-size: 24px; display: inline-block; vertical-align: middle}
.beta .timeline .header .right_btn_set a.noti_onoff.on:before {content: "\e99f"}

.beta .timeline .list.timeline {padding: 65px 20px 56px;}
.beta .timeline .list.timeline li {display: flex; padding: 15px 0;}
.beta .timeline .list.timeline li:after {display: none; }
.beta .timeline .list.timeline li .icon {flex-shrink: 0; flex-grow: 0; flex-basis: 26px; width: 26px; font-size: 26px; margin-right: 15px; overflow: visible; text-align: center}
.beta .timeline .list.timeline li.type.order .icon{background-image: linear-gradient(to left, #f86176, #ffb28a); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.beta .timeline .list.timeline li.type.coupon p {color: var(--orange)}
.beta .timeline .list.timeline li.type.point.get p {color: var(--main-color)}
.beta .timeline .list.timeline li.type.point.put p {color: var(--mint-blue)}
.beta .timeline .list.timeline li.type.order .icon:before {content: ""; font-family: xeicon;}
.beta .timeline .list.timeline li.type.order.complete .icon:before {content: "\e962"; }
.beta .timeline .list.timeline li.type.order.step1 .icon:before {content: "\eafa"; }
.beta .timeline .list.timeline li.type.order.step2 .icon:before {content: "\e92c"; }
.beta .timeline .list.timeline li.type.order.cancel .icon:before {content: "\e925"; }
.beta .timeline .list.timeline li.type.msg .icon { background: url("../images/icon/timeline_msg.svg") no-repeat;}
.beta .timeline .list.timeline li.type.notice .icon { background: url("../images/icon/timeline_notice.svg") no-repeat;}
.beta .timeline .list.timeline li.type.coupon .icon { background: url("../images/icon/timeline_coupon.svg") no-repeat;}
.beta .timeline .list.timeline li.type.stamp .icon { background: url("../images/icon/stamp_get.svg") no-repeat; background-size: 26px 26px;}
.beta .timeline .list.timeline li.type.point.get .icon { background: url("../images/icon/roulette_point_get.svg") no-repeat;}
.beta .timeline .list.timeline li.type.point.put .icon { background: url("../images/icon/roulette_point_put.svg") no-repeat;}
.beta .timeline .list.timeline li.type.gob.put .icon { background: url("../images/icon/gob_spend.svg") no-repeat; background-size: 24px 24px}
.beta .timeline .list.timeline li.type.gob.get .icon { background: url("../images/icon/gob_get.svg") no-repeat; background-size: 24px 24px}
.beta .timeline .list.timeline li .infos { align-self: center;}
.beta .timeline .list.timeline li .infos h3 {font-size: 16px; margin-bottom: 3px; white-space: normal; word-break: keep-all}
.beta .timeline .list.timeline li .infos h4 {font-size: 14px; color: var(--battleship-grey)}
.beta .timeline .list.timeline li .infos p strong {position: relative; margin-right: 10px; padding-right: 10px; font-weight: bold;}
.beta .timeline .list.timeline li .infos p strong:after {position: absolute; content: ""; right: 0; top: 50%; height: 12px; margin-top: -6px; width: 1px; background-color: var(--lighten-grey) }
.beta .timeline .list.timeline li .infos p {white-space: normal; word-break: keep-all; color: var(--battleship-grey); font-size: 14px}
.beta .timeline .list.timeline li .infos p.date {font-size: 12px; color: var(--light-grey) !important; margin-top: 3px;}


.beta .thumb_menu label,.beta .thumb label {border: none; display: block; background: none; width: auto; height: auto; position: absolute; right: 0; top: 5px; line-height: 1; z-index: 10; font-size: 1rem;}

.beta .store_talk, .beta .store_talk .talk_list {height: 100%;}
.beta .store_talk .talk_list {padding: 65px 0 56px 20px; overflow: hidden}
.beta .store_talk .talk_list .list.horizon.store .thumb {width: 60px; height: 60px;}
.beta.edit_mode .store_talk .talk_list .list.horizon.store li .check { transition: .2s; right: 15px}
.beta.edit_mode .store_talk .talk_list .list.horizon.store .infos .name span.date {width: 0; margin-right: -30px;  transition: .2s; }
.beta.edit_mode .store_talk .talk_list .list.horizon.store .infos .count {right: -30px;transition: .2s; }
.beta .store_talk .talk_list .list.horizon.store li {padding: 10px 0; transition:.1s}
.beta .store_talk .talk_list .list.horizon.store li .message {display: flex; transition: .1s; width: 100%;}
.beta .store_talk .talk_list .list.horizon.store li .check {transition: .2s; position: absolute; right: -35px; top: 50%; margin-top: -12px; display: block}
.beta .store_talk .talk_list .list.horizon.store li .infos {width:auto; flex-grow: 10; align-self: center;}
.beta .store_talk .talk_list .list.horizon.store li:after {display: none;}
.beta .store_talk .talk_list .list.horizon.store li.read .count {display: none;}
.beta .store_talk .talk_list .list.horizon.store li .count {display: block; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: bold; line-height: 24px; text-align: center; background-image: linear-gradient(to left, #f86176, #ffb28a ); color: #fff; box-shadow: 2px 2px 6px rgba(255,89,89,0.3);  position: absolute; bottom: 15px; right: 20px; z-index: 2; transition: .2s}
.beta .store_talk .talk_list .list.horizon.store li .name {width: 100%;}
.beta .store_talk .talk_list .list.horizon.store li .name span:first-child {flex-grow: 20; flex-shrink: 1;}
.beta .store_talk .talk_list .list.horizon.store li .name span.date {flex-grow: 1; flex-shrink: 1; font-size: 11px; color: var(--light-grey); align-self: flex-end; margin-right: 20px; text-align: right; transition: .2s}
.beta .store_talk .talk_list .search {margin-right: 20px; font-size: 0; margin-bottom: 10px;}
.beta .store_talk .talk_list .search input[type=text] {border-radius: 60px; height: 50px; font-size: 14px}
.beta .store_talk .talk_list .search input[type=submit] {margin-left: -50px; width: 50px; height: 50px; font-size: 0; background: url("../images/input/search_btn_grey.svg") center center no-repeat; }
.beta .store_talk .talk_list .list.horizon.store li .infos .substr {white-space: normal; line-height: 1.2; max-height: 2.2em; word-break: keep-all;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 35px;}
.beta .store_talk .talk_list .list.horizon.store li.swipeOn {margin-left: -100px; }
.beta .store_talk .talk_list .list.horizon.store li .btns {width: 0; transition: .2s; position: absolute; font-size: 0; height: 60px; text-align: center; background: no-repeat center 20px; right: 0; top: 10px; color: #fff; font-weight: bold; z-index: 3}
.beta .store_talk .talk_list .list.horizon.store li .btns a {display: inline-block; width: 50%; font-size: 12px; height: 60px; background: no-repeat center 15px; padding-top: 35px;}
.beta .store_talk .talk_list .list.horizon.store li .btns a.read {background-color: var(--mint-blue); background-image: url("../images/btn/readed.svg")}
.beta .store_talk .talk_list .list.horizon.store li .btns a.delete {background-color: var(--cherry-red); background-image: url("../images/btn/trash_white.svg"); background-position: center 12px}
.beta .store_talk .talk_list .list.horizon.store li.swipeOn .btns{width: 120px;}
.beta .store_talk .talk_list .list.horizon.store li.swipeOn .count, .beta .store_talk .talk_list .list.horizon.store li.swipeOn label, .beta .store_talk .talk_list .list.horizon.store li.swipeOn .infos .name span.date {display: none;}
.beta .store_talk .talk_list .list.horizon.store.none { height: calc(100% - 60px); display: flex; }
.beta .store_talk .talk_list .list.horizon.store .empty {align-self: center;}
.beta .store_talk .talk_list .list.horizon.store .empty img {width: 40%; align-self: center; margin-bottom: 25px; margin-left: 5vw;}

/*매장톡*/
.store_talk, .beta .store_talk .talk_list {height: 100%;}
.store_talk .talk_list {padding: 55px 0 75px 20px; overflow: hidden}
.store_talk .talk_list .list.horizon.store .thumb {width: 60px; height: 60px;}
.edit_mode .store_talk .talk_list .list.horizon.store li .check { transition: .2s; right: 15px}
.edit_mode .store_talk .talk_list .list.horizon.store .infos .name span.date {width: 0; margin-right: -30px;  transition: .2s; }
.edit_mode .store_talk .talk_list .list.horizon.store .infos .count {right: -30px;transition: .2s; }
.store_talk .talk_list .list.horizon.store li {padding: 10px 0; transition:.1s}
.store_talk .talk_list .list.horizon.store li .message {display: flex; transition: .1s; width: 100%;}
.store_talk .talk_list .list.horizon.store li .check {transition: .2s; position: absolute; right: -35px; top: 50%; margin-top: -12px; display: block}
.store_talk .talk_list .list.horizon.store li .infos {width:auto; flex-grow: 10; align-self: center;}
.store_talk .talk_list .list.horizon.store li:after {display: none;}
.store_talk .talk_list .list.horizon.store li.unread .count {display: block; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: bold; line-height: 24px; text-align: center; background-image: linear-gradient(to left, #f86176, #ffb28a ); color: #fff; box-shadow: 2px 2px 6px rgba(255,89,89,0.3);  position: absolute; bottom: 15px; right: 20px; z-index: 2; transition: .2s; opacity: 1}
.store_talk .talk_list .list.horizon.store li.read .count {display: none}
.store_talk .talk_list .list.horizon.store li .count {display: none; }
.store_talk .talk_list .list.horizon.store li .name {width: 100%;}
.store_talk .talk_list .list.horizon.store li .name span:first-child {flex-grow: 20; flex-shrink: 1;}
.store_talk .talk_list .list.horizon.store li .name span.date {flex-grow: 1; flex-shrink: 1; font-size: 11px; color: var(--light-grey); align-self: flex-end; margin-right: 20px; text-align: right; transition: .2s}
.store_talk .talk_list .search {margin-right: 20px; font-size: 0; margin-bottom: 10px;}
.store_talk .talk_list .search input[type=text] {border-radius: 60px; height: 50px; font-size: 14px}
.store_talk .talk_list .search input[type=submit] {margin-left: -50px; width: 50px; height: 50px; font-size: 0; background: url("../images/input/search_btn_grey.svg") center center no-repeat; }
.store_talk .talk_list .list.horizon.store li .infos .substr {white-space: normal; line-height: 1.2; max-height: 2.2em; word-break: keep-all;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 35px;}
.store_talk .talk_list .list.horizon.store li.swipeOn {margin-left: -100px; }
.store_talk .talk_list .list.horizon.store li .btns {width: 0; transition: .2s; position: absolute; font-size: 0; height: 60px; text-align: center; background: no-repeat center 20px; right: 0; top: 10px; color: #fff; font-weight: bold; z-index: 3}
.store_talk .talk_list .list.horizon.store li .btns a {display: inline-block; width: 50%; font-size: 12px; height: 60px; background: no-repeat center 15px; padding-top: 35px;}
.store_talk .talk_list .list.horizon.store li .btns a.read {background-color: var(--mint-blue); background-image: url("../images/btn/readed.svg")}
.store_talk .talk_list .list.horizon.store li .btns a.delete {background-color: var(--cherry-red); background-image: url("../images/btn/trash_white.svg"); background-position: center 12px}
.store_talk .talk_list .list.horizon.store li.swipeOn .btns{width: 120px;}
.store_talk .talk_list .list.horizon.store li.swipeOn .count, .beta .store_talk .talk_list .list.horizon.store li.swipeOn label, .store_talk .talk_list .list.horizon.store li.swipeOn .infos .name span.date {display: none;}
.store_talk .talk_list .list.horizon.store.none { height: calc(100% - 60px); display: flex; }
.store_talk .talk_list .list.horizon.store .empty {align-self: center;}
.store_talk .talk_list .list.horizon.store .empty img {width: 40%; align-self: center; margin-bottom: 25px; margin-left: 5vw;}



.app_install {position: fixed; width: 100%; height: 100%; left: 0; top: 0;  z-index: 1000; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center;  flex-direction: column; color: #fff;}
.app_install .frame {background-image: var(--main-gra-rev) ; width:310px; border-radius: 10px; }
.app_install .frame .ment {padding: 30px 30px 10px 30px; position: relative}
.app_install .frame .ment .close {position: absolute; right: 20px; top: 20px;}
.app_install .frame .ment h1 {font-weight: 800; font-size: 24px; margin: 20px 0 5px 0;}
.app_install .frame .ment .img {text-align: center; margin-top: 30px}
.app_install .frame .ment .img img{width: 90%;}
.app_install .frame a.install_now {text-align: center; font-weight: bold; display: block; font-size: 16px; padding: 20px; border-top: 1px solid rgba(255,255,255,.15)}
.app_install a.no_imweb { font-weight: bold; font-size: 14px; padding: 30px 0; color:rgba(255,255,255,.6); position: fixed; bottom: 0; width: 100%; text-align: center}

.list li.discount .infos .name span:first-child {font-size: 14px}
.wrap.delivery .header .right_btn_set img {height: 16px; vertical-align: middle}
.wrap.delivery .mid h2 span {font-weight: normal; font-size: 21px; letter-spacing: -1px;}
.wrap.delivery .list.horizon.with_delivery{margin-top: 20px;}
.wrap.delivery .list.horizon.with_delivery:before {background-color: var(--dark-grey); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; top: 0; content: ""; width: 300%; opacity: 1;}
.wrap.delivery .list.horizon li .infos .price {margin: 0; color: var(--battleship-grey) !important; font-size: 14px; font-weight: bold; position: static; }
.wrap.delivery .list.horizon li.delivery .item_status {padding-right: 0}
.wrap.delivery .list.horizon .thumb_menu {width: 70px; height: 70px;}
.wrap.delivery .list.horizon.with_delivery li {padding-bottom: 10px;}
.wrap.delivery .list.horizon.with_delivery li:last-child:after {opacity: 1}
.wrap.delivery .list.horizon.with_delivery li .infos .name {margin-bottom: 0;}
.wrap.delivery .list.horizon.with_delivery li .infos .option {font-size: 12px;}
.wrap.delivery .list.horizon.with_delivery li .infos .option:before {content: "▪"; color: var(--lighten-grey); font-size: 12px; margin-right: 3px;}
.wrap.delivery .list.horizon li.delivery .infos .order_num {font-size: 11px; font-weight: bold; color: var(--light-grey); margin-bottom: 2px}
.wrap.delivery .list.horizon li.single {padding: 20px 0; overflow: hidden}
.wrap.delivery .list.horizon li.single .infos {display: block;}
.wrap.delivery .list.horizon li.single .infos > p {width: 50%; float: left; font-size: 14px;}
.wrap.delivery .list.horizon li.single .infos .value {text-align: right; color: var(--battleship-grey); font-weight: bold}
.store_detail_poped {overflow: hidden}
.store_detail_poped .store_detail {overflow-y: auto; bottom: 0;}
.store_detail {position: fixed; width: 100%; height: 100%;  left: 0; bottom: -200%;  transition: .3s; z-index: 1000;}
.store_detail_poped .header .left_btn a.back.close {}

.order_log .list li .store_name {font-size: 12px;}
.recent_order .header.main + .contents {padding-top: 50px;}
.recent_order .contents .order_log {overflow-y:auto; flex-shrink: 1; flex-grow: 1; padding-left: 20px; padding-bottom: 30px}
.recent_order .contents .order_log .list.horizon li .thumb_menu {width: 60px; height: 60px;}
.recent_order .contents .ext_info {  margin-bottom: -1px; }
.recent_order .contents .ext_info h3 {padding-top: 0;}
.recent_order .contents .ext_info:after {z-index: 10; display: none;}
.recent_order .contents{  padding-right: 0; flex-grow: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden}
.recent_order .contents .order_log .list.horizon li:last-of-type:after{display: none;}

.list li .store_name a img {vertical-align: middle; margin-top: -1px; margin-left: 5px}
.list.board li {font-size: 14px; text-align: left; white-space: normal}
.list.board li div.q, .list.board li .a { display: flex; width: 100%; }
.list.board li div.q {align-items: center}
.list.board li div.q span.status {}
.list.board li span {flex-grow: 0; flex-shrink:0}
.list.board li span.title {flex-grow: 1;}
.list.board li div.q .mark{font-weight: bold; color: var(--main-color); font-size: 1.2em; margin-right: 5px;}
.list.board li div.q .status{ font-size: 12px; padding: 5px; border: 1px solid var(--lighten-grey); color: var(--light-grey)}
.list.board li div.a .mark{font-weight: bold; color: var(--mint-blue); font-size: 1.2em; margin-right: 5px;}
.list.board li div.a {color: var(--mid-grey);  overflow: hidden;  transition: .2s; transform: scaleY(0); transform-origin: top; overflow: hidden; max-height: 0}
.list.board li div.a.active { padding: 10px 0 0px 0; transform: scaleY(1); max-height: 100vh}
.store_review.vs1 .list.board li {padding: 15px 0;}

.wrap.board .mid {padding-left: 20px;}
.wrap.board .mid .list {}
.wrap.board .mid .list:before {background-color: var(--dark-grey); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; top: 0;  width: 300%; opacity: 1;}
.wrap.board .mid .list li {font-size: 14px; display: flex;}
.wrap.board .mid .list li span.color-battleship-grey {margin-left: 5px; flex-grow: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
.wrap.board .search {margin-right: 20px; font-size: 0; }
.wrap.board .search input[type=text] {border-radius: 60px; height: 50px; font-size: 14px}
.wrap.board .search input[type=submit] {margin-left: -50px; width: 50px; height: 50px; font-size: 0; background: url("../images/input/search_btn_grey.svg") center center no-repeat; }
.wrap.board .mid.view .detail {color: var(--battleship-grey); white-space: normal; margin-top: 30px; word-break: keep-all; padding-right: 20px; line-height: 1.4}
.wrap.board .mid.view .detail img {border-radius: 8px; max-width: 100%; margin: 15px 0;}
.wrap.board .mid.view .attachment {margin-top: 30px;}
.wrap.board .mid.view .attachment a {display: inline-block; text-decoration: underline; background: url("../images/btn/attachment.svg") no-repeat left center; padding-left: 15px; margin-right: 20px; font-size: 12px; font-weight: bold; line-height: 1.8}
.wrap.board .mid.view .date {font-family: serif; font-style: italic; font-size: 12px; color: var(--light-grey); margin-top: 30px;}

.search_company_result { transition: .2s; margin-top: -200%; }
.search_company_result.poped {background-color: rgba(0,0,0,0.8); z-index: 100; display: block;  margin-top: 0;}
.search_company_result .in {display: flex; align-items: center; padding: 10px; flex-direction: column; text-align: left; min-height: 100%;  justify-content: center;}
.search_company_result .in .content { background-color: #fff; border-radius: 10px; padding: 20px; width: 100%; align-self: center }
.search_company_result .in .content h1 {font-size: 21px; width: 100%; flex-basis: 100%; overflow: hidden}
.search_company_result .in .content h1 span {float: left}
.search_company_result .in .content h1 a.close {float: right;}
.search_company_result .in .content .forms.small {margin-top: 15px;}
.search_company_result .in .content .list li{font-size: 14px;}
.search_company_result .in .content .list li .info {width: 100%;}
.search_company_result .in .content .list li .empty {width: 100%;}
.search_company_result .in .content .list li .empty .img {background-image: url("../images/img/error_img.svg"); background-size: auto 80%;}

/*iOS 안전영역*/
.wrap {padding-top:calc(env(safe-area-inset-top) ); padding-top:calc(constant(safe-area-inset-top))}
.header {padding-top:calc(env(safe-area-inset-top) ); padding-top:calc(constant(safe-area-inset-top)); box-sizing: content-box}
.contents > .mid {padding-bottom: calc(env(safe-area-inset-bottom) + 20px); padding-bottom:calc(constant(safe-area-inset-bottom) + 20px)}
.main .contents > .mid, .category .contents > .mid,  .mypage .contents > .mid {padding-bottom: calc(env(safe-area-inset-bottom) + 53px); padding-bottom:calc(constant(safe-area-inset-bottom) + 53px)}
.recent_order .contents {padding-bottom: calc(env(safe-area-inset-bottom) + 63px); padding-bottom:calc(constant(safe-area-inset-bottom) + 63px)}
.contents > .mid.has_btn{padding-bottom: calc(env(safe-area-inset-bottom) + 80px); padding-bottom:calc(constant(safe-area-inset-bottom) + 80px)}
.header .right_btn_set, .header .left_btn{top:calc(env(safe-area-inset-top) ); top:calc(constant(safe-area-inset-top)); }
.header.fixed:after {top:calc(env(safe-area-inset-top) + 50px ); top:calc(constant(safe-area-inset-top) + 50px ); }
.tab_bar {padding-bottom: calc(env(safe-area-inset-bottom) - 10px); padding-bottom:calc(constant(safe-area-inset-bottom) - 10px)}
.btn_global {padding-bottom: calc(env(safe-area-inset-bottom) + 10px); padding-bottom:calc(constant(safe-area-inset-bottom) + 10px)}
.btn_global.type2 {padding-bottom: calc(env(safe-area-inset-bottom) - 10px); padding-bottom:calc(constant(safe-area-inset-bottom) - 10px)}
.side_popup .log {height: calc( 100% - env(safe-area-inset-bottom) - 120px); height: calc( 100% - constant(safe-area-inset-bottom) - 120px);}
.mid .sector.second .tabs.fixed { top: calc( env(safe-area-inset-top) + 40px); top: calc( constant(safe-area-inset-top) + 40px);}
.mid .sector.second .tabs.fixed + .menu_sheet { margin-top: calc( env(safe-area-inset-top) + 40px); margin-top: calc( constant(safe-area-inset-top) + 40px);}
.system_alert.on {bottom: calc( env(safe-area-inset-bottom) + 108px); bottom: calc( constant(safe-area-inset-bottom) + 108px); }
.system_alert.on {bottom: calc( env(safe-area-inset-bottom) + 108px); bottom: calc( constant(safe-area-inset-bottom) + 108px); }
.event_invite .caution {padding-bottom: calc(env(safe-area-inset-bottom) + 20px); padding-bottom:calc(constant(safe-area-inset-bottom) + 20px)}
.set_loc .map .status {bottom: calc( env(safe-area-inset-bottom) + 30px); bottom: calc( constant(safe-area-inset-bottom) + 30px);}
.menu_detail_popup {padding-bottom: calc( env(safe-area-inset-bottom) + 10px);}
.store .contents > .mid.has_btn {padding-bottom: calc( env(safe-area-inset-bottom) + 100px); padding-bottom: calc( constant(safe-area-inset-bottom) + 100px);}
.store.edit .contents > .mid.has_btn, .bottom.has_btn {padding-bottom: calc( env(safe-area-inset-bottom) + 80px); padding-bottom: calc( constant(safe-area-inset-bottom) + 80px);}
.order .contents > .mid + .bottom.has_btn { margin-top: calc( (env(safe-area-inset-bottom) + 21px) * -1 );}
.popup.full {padding-top:calc(env(safe-area-inset-top) ); padding-top:calc(constant(safe-area-inset-top)); padding-bottom:calc( env(safe-area-inset-bottom) ); padding-bottom: calc( constant(safe-area-inset-bottom) ) ;}
.popup.full.receipt {padding-bottom:calc( env(safe-area-inset-bottom) + 10px ) !important; padding-bottom: calc( constant(safe-area-inset-bottom) + 10px ) !important;}
.beta .store_talk .talk_list, .beta .event .list.event {padding-bottom:calc( env(safe-area-inset-bottom) + 56px ) !important; padding-bottom: calc( constant(safe-area-inset-bottom) + 56px ) !important;}



@supports (-webkit-backdrop-filter: none) { 
   .btn_global.type2, .loading, .tab_bar, .popup{ -webkit-backdrop-filter: blur(16px) !important; background-color: rgba(255,255,255,0.7) !important }
   .mask, .system_msg, .crop, .menu_detail_popup, .popup{ -webkit-backdrop-filter: blur(16px) !important; background-color: rgba(0,0,0,0.5) !important }
   .beta .tab_bar, .app_install {-webkit-backdrop-filter: blur(16px) !important; background-color: rgba(0,0,0,.8) !important }
}