@charset "utf-8";

/* 로그인페이지 */
.member.login{background:none}
.member.login:before{position:fixed}
.member.login:after{content:'';position:fixed;width:100%;height:100%;display:block;background: url(../images/img/bg_login@3x.png) center no-repeat;background-size: cover;top: 0px;z-index: -1;}
.member.login .sns_login_set a{width: 25%;}
.member.login .sns_login_set{text-align: center;width:100%}
.member.login .sys-msg{color:#fff;padding-top:3px}
.member.login .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 .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;}
.login_bottom_btn a{float:left}
.login_bottom_btn:after{content:'';clear:both;display:block}

.log + .input_msg input + a.submit img {vertical-align: middle; padding-top: 15px;padding-right: 15px;}

.list.single_row li .infos .name {width:auto;}
.list.single_row li .infos .value {width:auto;float:right}
.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 .infos .value a.none{background:none}

.member .forms li .list.single_row li label{cursor: pointer;}
.member .forms li .list.single_row li input[type=checkbox]:checked + span.checkbox{border: 0; background:url("../images/input/check_on.svg") no-repeat center center; background-color: var(--main-color); background-size: auto 12px;}
label input[type=checkbox]:checked + span.checkbox{border: 0; background:url("../images/input/check_on.svg") no-repeat center center; background-color: var(--main-color); background-size: auto 12px;}

/* 매장상세 - 채팅 (주문1건일경우 너무 좁아보여서) */
.log .my_chat{min-width:50%}  
/* 마이페이지  - 상단 아이콘 span으로 수정 후 */
.mypage .header.full.mypage_main .launcher li .icon{display:block}
/* 마이페이지 - 최신주문내역 span으로 수정 후  */
.recent_order .list .infos .info a span{display:block} 

.order_log .list li.canceled .status_btn {display:none}
.mid h2.price .totalPrice{font-weight:bold;font-size: 30px; color: var(--main-color); margin-top: 5px;}

.edit .thumb_menu 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.svg") no-repeat center center; background-size: 50% auto;}
.edit .thumb_menu label i {vertical-align: middle; display: none;}

.edit .header.fixed .title .name input[type=text] {color:#000;height: 50px;line-height: 50px;}

.edit .myInfo .name:after{display:none} 
.edit .myInfo .name:after, .edit .myInfo  .substr:after, .edit .myInfo  .price:after{display:none}


label input[type=radio]:checked + span{border: 6px solid var(--main-color);background-color: #fff;}
.member .radio label:first-child span{margin-left:0px}

.recent_order  .list.horizon li:last-child:after{display:none}

/* 회원정보 수정페이지 */
/* .mid .forms.small td input[type=number] {height: 40px; width:calc(100% - 100px); background-color: #fff;  font-size: 12px; border-radius: 0; vertical-align: middle; color: var(--battleship-grey); padding-left: 0;} */
/* .mid .forms.small td input[type=number].with_btn +a{background-color: var(--mid-grey); color: #fff; font-size: 12px; display: inline-block; width: auto; padding: 8px 10px; border-radius: 3px; float: right; margin-top: 4px; line-height: 1; height: auto} */
input[type=number] + 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: -80px; text-align: center; float: right; position: relative; z-index: 1;flex-grow: 0; flex-basis: 30px; white-space: nowrap}
.mid .forms.small td input[type=number] {height: 40px; width:calc(100% - 100px); background-color: #fff;  font-size: 12px; border-radius: 0; vertical-align: middle; color: var(--battleship-grey); padding-left: 0;}
.mid .forms.small td input[type=number].with_btn {width: 100%}
.mid .forms.small td input[type=number].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;}
.mid .forms.small td input[type=tel],
.mid .forms.small td 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;}

/** storeForm 옵션 */
.store.edit .advanced .mid .option a.remove_this i{line-height: 1.2em; vertical-align: top;}
.store.edit .advanced .mid .option a.remove_this i.xi-minus:before{vertical-align: top;line-height: 1.2em;}

.store.edit .advanced .mid h1{width:100%;position:relative;top:0px;left:0px}
.store.edit .advanced .mid{overflow:hidden}
.store.edit .advanced .mid .contents_area{padding-top:0px;height:calc(100% - 51px) ;overflow:hidden;overflow-y:auto}
.store.edit .advanced .mid .contents_area .tableTypeB{border-top:0px}

.point_log .list.horizon li.in .icon, .point_log .list.horizon li.in .value_num{line-height:26px}
.point_log .list.horizon li.out .icon, .point_log .list.horizon li.out .value_num{line-height:26px}

.soldout_btn {flex-basis: 45px;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=checkbox] + label.soldout_btn{height: 45px;line-height: 43px;background-color: transparent;border: 1px solid var(--lighten-grey);color: var(--mid-grey);font-weight: normal;}
input[type=checkbox]:checked + label.soldout_btn{background-color: var(--light-grey); color: #fff;}   
input[type=checkbox] + label.soldout_btn:before{display:none}

/** 메뉴 상세보기 팝업 - 최소주문수량 안내 **/
/** 메뉴 상세보기 팝업 - 옵션이 짧을때 중간에 배경 없음 **/
.menu_detail_popup .menu_detail{height:calc(100% - 70px)}
.not_ready  .menu_detail_popup .menu_detail{height:100%}

/** 메뉴 옵션 **/
.weekly_sale ul li{float:left}
.weekly_sale ul:after{clear:both}
.weekly_sale input[type=checkbox] + label:before{margin-left:0px;}
.weekly_sale input[type=checkbox] + label{margin-right:10px}

.signature .list li:after{display:none}
input[type=radio] + span{width: 24px; height: 24px; border-radius: 24px;  box-sizing: border-box; border: 1px solid var(--light-grey); transition: .2s; display: inline-block; vertical-align: middle}
input[type=radio]:checked + span{border:6px solid var(--main-color); background-color: #fff} 

/** 상점페이지 메뉴 명 길때 세일아이콘이 없어져서 .name span 으로 수정 **/
/* .list.horizon li.sale.today .name:after{content:"요일";margin-bottom: 5px;}
.list.horizon li.sale.today .name, .list.horizon li.sale.time .name{font-size:0px;text-overflow: initial;}
.list.horizon li.sale.today .name span, .list.horizon li.sale.time .name span{font-size: 16px;font-weight: bold;margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; max-width: calc( 100% - 60px); display: inline-block; vertical-align: middle;}
.list.horizon li .name span, .list.horizon li .name span{font-size: 16px;font-weight: bold;margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; max-width:100%; display: inline-block; vertical-align: middle;}
.list.horizon li.sale.time .name:after {margin-bottom:0px;content: "시간"; background-color: var(--orange)}  */

/** 요일,시간할인 두개 적용시 요일할인을 span으로 표기 **/
.list.horizon li.sale.today.time span.today{font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; color: #fff; padding: 4px 6px; border-radius: 3px; background-color:var(--main-color); line-height: 12px;}
.list.horizon li.sale.today.time span.time{font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; color: #fff; padding: 4px 6px; border-radius: 3px; background-color:var(--orange); line-height: 12px;}
.list.horizon li.sale.today.time .name span, .list.horizon li.today.time .name span{max-width: calc( 100% - 72px);}

/** 장바구니 > 요일,시간할인  **/
.list.order_cart .infos .option .today{font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; color: #fff; padding: 4px 6px; border-radius: 3px; background-color:var(--main-color); line-height: 12px;vertical-align: top;}
.list.order_cart .infos .option .time{font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; color: #fff; padding: 4px 6px; border-radius: 3px; background-color:var(--orange); line-height: 12px;vertical-align: top;}
 
.edit li.signature .thumb_box span.signature {font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; margin-top:5px; content: "대표메뉴"; color: #fff; padding: 4px 6px; border-radius: 3px; background-color: var(--black); line-height: 12px;}
.edit li.time.sale .thumb_box span.time {font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; margin-top:5px; content: "시간"; color: #fff; padding: 4px 6px; border-radius: 3px; background-color: var(--orange); line-height: 12px;}
.edit li.today.sale .thumb_box span.today {font-size: 10px; font-weight: bold; display: inline-block;margin-left: 5px; margin-top:5px; content: "요일"; color: #fff; padding: 4px 6px; border-radius: 3px; background-color: var(--main-color); line-height: 12px;}
.edit li .thumb_box .thumb_menu{display:block}
.edit li .thumb_box{display:inline-block}
.edit li .thumb_box + .infos {padding-left: 15px;width: calc(100% - 80px);}

/** 타임세일 미적용시 normal */
.menu_detail_popup .menu_detail .sub_infos p.timesale span{font-weight:normal}

/** empty 클래스를 하위로 */
.mypage .my_only_menu .empty .img {background-image: url("../images/img/empty_my_only_order.svg"); }  
.mypage .recent_order .empty .img {background-image: url("../images/img/empty_small.svg"); } 

/** 회원정보 페이지 SNS 연동 (SNS 가입시 버튼처리) **/
.sns_pass {background-color: var(--mid-grey);color: #fff;font-size: 12px;display: inline-block;width: auto;padding: 8px 10px;border-radius: 3px;float: right;}
/** 회원정보 페이지 SNS 연동 (연동완료시 커서없애기) **/
.sns_sync .sns {text-align: center;}
.sns_sync .sns a {cursor: default;}
.sns_sync .sns a.not_sync {cursor: pointer;}

/** 상점 하단 장바구니에서 메뉴명 길때 **/
.btn_global.type2 a .cart_name{width: calc(50% - 40px)}
.cart_name #menuNm{max-width:calc(90% - 20px);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;display:inline-block} 
.cart_name .other_count{vertical-align:top}

/** 상점 가게정보 지도 아래로 이동 후 **/
.tab_contents.info .store_infos h2{margin-top:20px}
.tab_contents.info .map{margin:20px 0px}

/** 마이페이지 회원 전환신청시 화살표 **/
.mypage.edit .mid .forms.small td a + a.more{top:0px}

/** 마이페이지 상단 회원이름**/
.header.full.mypage_main .my_area .infos .info.name span.id{max-width:200px;}


/** 장바구니 로그인 클릭 영억 a에 padding 추가 **/
.order .recommand_login{padding:0px}
.order .recommand_login a{padding:25px 20px}

#paginationBox .pagination {font-size: 18px; display: block; color: var(--dark-grey); position: relative; line-height: 18px; vertical-align: top; margin-bottom: 20px;text-align: center;}
#paginationBox .pagination .page-item {display: inline-block; padding: 5px 8px; }
#paginationBox .pagination .page-item.active { color: red; font-weight: bold; }

/** 관리자  페이지 사용자 관리 SNS **/
.sns_sync .sns {font-size: 0; white-space: nowrap}
.sns_sync .sns a {width: 36px; height: 36px; margin-right: calc(25% - 28px); background: no-repeat left center; background-size: auto 100%; display: inline-block}
.sns_sync .sns a.not_sync {filter: grayscale(1); opacity: .4}
.sns_sync .sns a.facebook { background-image: url("../images/btn/login_facebook@3x.png")}
.sns_sync .sns a.google {background-image: url("../images/btn/login_google@3x.png")}
.sns_sync .sns a.naver { background-image: url("../images/btn/login_naver@3x.png")}
.sns_sync .sns a.kakako { background-image: url("../images/btn/login_kakao@3x.png"); margin-right: 0;}
.sns_sync .sns p {font-weight: normal; color: var(--light-grey); font-size: 12px; padding-top: 15px;}

.contents .user_dtl_btn {text-align: right;}
.contents .user_dtl_btn a.btn {padding: 10px 12px;display:inline-block;border-radius: 5px; font-size: 12px; background-color: var(--mid-grey); transition: .2s; color: #fff;"}

/** 임시로 **/
.member.login .sns_login_set{width:100%}


.mid .small_banner li{padding:0px}
.mid .small_banner li a{display: block;width: 100%;height: 100%;vertical-align: middle;padding: 20px;}


.take_order .mid .menu_item .list h3:before{display:none}
.take_order .list.horizon li .thumb_menu{width:50px;height:50px}



.reg_page td{line-height:35px;}
.reg_page input[type=number]{width:100px}
.reg_page input.date{width:100px} 
.reg_page .table td a {
	height: 35px; 
	line-height: 33px; 
	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;
}

.reg_page #editor_div {margin-top: 10px;}

.reg_page .ui-datepicker {
	z-index : 999 !important;
}

.reg_page table + h2{
		margin-top:20px;
}


/*codeUpdForm*/
.codeUpdForm table {border-spacing:0; border-collapse:collapse;}
.codeUpdForm table td, table th { padding:2px; }

.codeUpdForm .mid .forms.small select.with_input {width: 100px; padding-right: 20px;  padding-left: 0; color: var(--battleship-grey); display: inline-block;  }
.codeUpdForm .mid .forms.small tr.select_bank {white-space: nowrap}
.codeUpdForm .mid .forms.small .with_select {width: calc(100% - 105px); margin-left: 5px}
	.updForm table + h2{
		margin-top:20px;
	}


/*boardUpdForm*/
.boardUpdForm td {
	line-height: 35px;
}

.boardUpdForm input[type=number] {
	width: 100px
}

.boardUpdForm input.date {
	width: 100px
}

.boardUpdForm .table td a {
	height: 35px;
	line-height: 33px;
	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
}

.boardUpdForm .file {
	display: inline;
	margin-right: 15px;
}

.boardUpdForm #fileList {
	margin-top: 15px;
}

.boardUpdForm #editor_div {
	margin-top: 10px;
}

.boardUpdForm .ui-datepicker {
	z-index: 999 !important;
}

.boardUpdForm .table .contents {height: 100px;}
.boardUpdForm .table .contents th{ vertical-align: middle;}
.boardUpdForm .table .contents td{vertical-align: top;line-height: 1.5;}

	.boardUpdForm table + h2{
		margin-top:20px;
	}
	


/*dashBoard*/
.dashBoard .cursor {
	cursor: pointer;
}
.dashBoard .category {
	margin-bottom: 10px;
}

.dashBoard .deleted_item{
	margin-left: 5px; 
	color: red;
}

.dashBoard .btn_div { 
	margin-top: 10px;
}

.dashBoard .search_div {
	float: right;
}

.dashBoard .paging {
	margin: 0;
}

.dashBoard .search-btn {
	float: none !important; 
	border-radius: 5px 5px 5px 5px !important; 
	margin-left: 0px !important;
}


.dashBoard .circle {
    width: 200px;
    margin: 6px 6px 20px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.2;
    }

    .dashBoard .circle canvas {
    vertical-align: top;
    width: 150px !important;
    height
    }

    .dashBoard .circle strong {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    color: black;
    }

    .dashBoard .circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
    }

    .dashBoard .circle span {
    display: block;
    color: #aaa;
    margin-top: 12px;
    }

.dashBoard .progress-outer{
    background: #fff;
    border-radius: 50px;
    padding: 25px;
    margin: 10px 0;
    box-shadow: 0 0  10px rgba(209, 219, 231,0.7);
}

.dashBoard .progress{
    height: 27px;
    margin: 0;
    overflow: visible;
    border-radius: 50px;
    background: #eaedf3;
    box-shadow: inset 0 10px  10px rgba(244, 245, 250,0.9);
}

.dashBoard .progress .progress-bar{
    border-radius: 50px;
}

.dashBoard .progress .progress-value{
    position: relative;
    left: -45px;
    top: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}

.dashBoard .progress-bar.active{
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}

@-webkit-keyframes animate-positive{
    10% { width: 10%; }
}

@keyframes animate-positive {
    20% { width: 20%; }
}

.dashBoard .progress2-outer{
    background: #fff;
    border-radius: 50px;
    padding: 25px;
    margin: 10px 0;
    box-shadow: 0 0  10px rgba(209, 219, 231,0.7);
}

.dashBoard .progress2{
    height: 27px;
    margin: 0;
    overflow: visible;
    border-radius: 50px;
    background: #eaedf3;
    box-shadow: inset 0 10px  10px rgba(244, 245, 250,0.9);
}

.dashBoard .progress2 .progress2-bar{
    border-radius: 50px;
}

.dashBoard .progress2 .progress2-value{
    position: relative;
    left: -45px;
    top: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}

.dashBoard .progress2-bar.active{
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}

	.dashBoard table + h2{
		margin-top:20px;
	}



td img {max-width:100%}