@charset "UTF-8";
/* INTRO */
.intro{width:100%; height:100vh; background:linear-gradient(45deg, #238870, #4bae50);}
.cafeplan {text-align: center; padding-top:150px; margin-bottom: 20px;}
.intro .cafeplan {padding-top:250px;}
.cafeplan img {width:230px;}
.intro h3 {font-size: 1em; text-align: center; letter-spacing: -0.05em; color:#fff; }
.intro h2{position: absolute; left:50%; bottom:250px; transform:translateX(-50%);}
.centerTel {text-align: center;}
.intro.kisulin {padding-top:100px;}
.intro.kisulin:after {animation: none; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);}

@keyframes beforeBg {
    0% {background-size: auto 150%;}
    100% {background-size: auto 140%}
}
@keyframes beforeBgWide {
    0% {background-size: 130%;}
    100% {background-size: 100%}
}
@keyframes afterBg {
    0% {background:rgba(255,255,255,0.7);}
    100% {background:#FFF;}
}
.log_wrap {margin: 30px 0 100px; padding:0 10px;}
.login .btn_wrap {margin-top:20px;}
.login h3 {margin: 50px 0; color:#888; font-weight: normal; text-align: center;}
.find {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; margin-top: 20px; font-size: 16px;}
.find > a.bd:after {content:"|"; color:#bebebe; margin: 0 10px;}
.find > a#signup {color:#238870;}

.notLoginAlert {padding:10px; background: #fff; border:1px solid #fd6666; color:#ff2626; border-radius: 2px; overflow: hidden; display: -webkit-flex; display: -ms-flex; display: flex; align-items: center;}
.notLoginAlert i.fa {margin-right: 12px; display: inline-block; font-size: 2em;}
/* ----------------------- search_id / search_pw ----------------------- */
.full_img {width:100%; display: inline-block;}
.choice_wrap input[type="radio"]{display: none;}
.show_info {font-size: 17px; line-height: 27px;  text-align: center; margin-bottom:20px; display: none;}
.show_info .blue { background: #E9F0FE;padding:30px 0;}
.link_btn {text-decoration: underline; font-size: 14px;}
.link_btn.all {display: inline-block;}
.choice_wrap {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; text-align: center; justify-content: center;}
.choice_wrap li {width:100%; }
.srch_method {border:1px solid #ccc; display: inline-block; width:100%; height:100%; padding:10px 0; box-sizing: border-box; transition:0.2s;}
.c_icon {height: 50px; width:100px; display: inline-block; position: relative;}
#srchid_card + .srch_method .c_icon {background: url('/common/img/icon/icon_card_off.png') no-repeat center center;}
#srchid_ipin + .srch_method .c_icon {background: url('/common/img/icon/icon_ipin_off.png') no-repeat center center;}
#srchid_phone + .srch_method .c_icon {background: url('/common/img/icon/icon_phone_off.png') no-repeat center center;}
.srch_method span {line-height: 20px; color: #747474; font-weight: bold;}
.sel_auth {width:262px; margin-right: 10px;}

#layer,
#changeBuyer {display: none; position:fixed; top: 0; bottom: 0; left: 0; right: 0;background: #fff; width: 100%; height: 100%; box-sizing: border-box; overflow-y:scroll;}
#layer.on {display: block;}
#layer .closed {position: fixed; bottom:0; left:0; right:0; z-index: 300;}
#layer.slideToLeft,
#changeBuyer.slideToLeft {right:-100%;  display: block; width:90%; left:auto; transition: 0.4s; z-index: 2005;}
#layer.slideToLeft.on,
#changeBuyer.slideToLeft.on {right:0;}
#layer .close,
#changeBuyer .close {z-index: 2006; position: absolute; right:20px; top:20px; background-position: -94px 1px;}
#layer.popup {left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); height:auto; min-width:350px; width:80%; box-sizing: border-box; overflow-y: scroll; z-index: 2005;}

/* ----------------------- agree ----------------------- */
.switch_wrap {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; padding:10px; align-items: center;}
.switch_wrap.agree {margin-top: -15px; border-top: 1px solid #ccc;}
.overflow_y.agree {padding:10px; max-height:200px; box-sizing: border-box;}
.overflow_y.agree p {margin-bottom: 10px; font-size: 0.8em; line-height: 1.3em;;}
.overflow_y.agree table th,
.overflow_y.agree table td {padding:4px;  font-size: 0.8em; line-height: 1.3em; vertical-align: middle; text-align: center;}
.switch { position: relative; width: 90px; margin-top:-4px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
.switch_box { display: none;}
.switch_label { display: block; overflow: hidden; cursor: pointer;background:#ebebeb; border-radius: 20px; position: relative;}
span.switch_text { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; overflow: hidden;}
span.switch_text:before,
span.switch_text:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: #444; box-sizing: border-box;}
span.switch_onoff { display: inline-block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 54px;border-radius: 20px; transition: all 0.3s ease-in 0s;}
.switch_box:checked + .switch_label span.switch_text { margin-left: 0;background: #5797e1; }
.switch_box:checked + .switch_label span.switch_onoff { right: 0px;}
span.switch_text.switch_text2:before { content: "동의"; color:#fff; transform:translateX(10px);}
span.switch_text.switch_text2:after { content: "비동의"; text-align: right; padding: 0 10px 0 8px;}

/* ----------------------- main.asp ----------------------- */
.main .point {padding:15px; border-radius: 5px; }
.main .point ul {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center;}
.main .point .main_point { font-size: 1.8em; color:#4FAC86; font-weight: bold;}
.main .ctgr {border-radius: 5px;}
.main .ctgr ul {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap; justify-content: center;}
.main .ctgr ul li {width:33%; text-align: center; display: -webkit-flex; display: -ms-flex; display: flex; flex-direction: column; justify-content: center; padding-top:13px; padding-bottom:20px; letter-spacing: -0.1em}
.main .ctgr ul li:nth-child(2),
.main .ctgr ul li:nth-child(5),
.main .ctgr ul li:nth-child(8) {border-left:1px solid #e4e4e4; border-right:1px solid #e4e4e4;}
.main .ctgr ul li:nth-child(4),
.main .ctgr ul li:nth-child(5),
.main .ctgr ul li:nth-child(6) {border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.main .ctgr ul li a {display: block; height:60px;}
.main .ctgr ul li img {vertical-align: bottom; height:80%; margin-bottom: 5px;}
.main .ctgr ul li a span {display: block; font-size: 0.9em; letter-spacing: -0.15em;}

/* 최근 본 상품 슬릭슬라이드 */
.veiwed_prod_area {padding:0 10px;}
#veiwed_prod {width:100%; overflow: hidden; position: relative; padding:0 13px; box-sizing: border-box;}
#veiwed_prod a {display: inline-block; padding:5px; box-sizing: border-box; border-radius: 5px; overflow:hidden; }
#veiwed_prod a img {width:100%; height:100%; border-radius: 10px; border:1px solid #e4e4e4;}
#veiwed_prod .arrow {text-indent: -999999em; width:40px; height:40px; background: url("/common/img/sprites.png") no-repeat; background-size:450px; position: absolute; top:50%; transform:translateY(-50%); z-index: 100;}
#veiwed_prod .arrow.prev {background-position: -321px -3px; left:0;}
#veiwed_prod .arrow.next {background-position: -361px -3px; right:0;}

#veiwed_prod .slick-list {overflow: hidden;}
/* ----------------------- sideMenu.asp ----------------------- */
#sidenav {z-index: 200003; height:100vh; width:90%; transition: 0.5s; position: fixed; top:0; left:-100%; overflow-y: scroll; background: #F1F1F1;}
#sidenav.open {left:0; }
.side_top {width:100%; padding:15px; box-sizing: border-box; color:#fff; background: #4FAC86; }
.side_top .greeting {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center;}
.side_top .logout {border:1px solid #DBF0E8; border-radius: 2px; font-size: 13px; color:#DBF0E8; display: inline-block; padding:4px 6px; line-height: 14px; font-weight: bold;}
.sidenav_content {width:100%; min-width:300px;  padding-bottom:30px; box-sizing: border-box; overflow-y:scroll; }
.side_ctgr {background: #fbfbfb;}
.side_ctgr > li a { border-bottom: 1px solid #dedede; padding: 10px 15px; display: -webkit-flex;display: -ms-flex;display: flex;}
.side_ctgr li .img {width:15%; display: inline-block; text-align: center;}
.side_ctgr li span {display: inline-block; width:80%;}
.side_ctgr li:last-child {border-bottom: none;}

.quick_btn {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap; background: #fff; background:#F1F1F1; padding-bottom: 10px; }
.quick_btn li {width:50%; background: #fff; padding-left:15px; box-sizing: border-box; display: -webkit-flex; display: -ms-flex; display: flex; align-items: center;}
.quick_btn li:nth-child(-n+2) {border-bottom:1px solid #ebebeb;}
.quick_btn li:nth-child(2n) {border-left:1px solid #ebebeb;}
.quick_btn a {display: inline-block; width:70%;line-height: 50px;}
#sidenav section {margin-bottom: 15px;}
.quick_btn span {display: inline-block; width:30%; text-align: center;}
.quick_btn span img {vertical-align: middle; height:40px;}

.side_point{background: #fff; border-radius: 5px; margin-bottom: 0; padding:15px; box-sizing: border-box;}
.side_point h4 {font-size: 1.4em; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between;}
.side_point .main_point {color:#4FAC86;}
.side_tit {font-size: 0.9em; padding:0 0 5px 5px;color:#3ea078; font-weight: bold;}

.side_customer {padding-left:10px; padding-bottom:50px;}
.side_customer .item {border-radius: 2px; background: #dedede; padding:7px 10px; text-align: center; display: inline-block; font-size: 0.9em; margin:0 2px;}

/* ----------------------- center index ----------------------- */
.center_notice {border-radius: 10px; width:90%; background: #fff; overflow: hidden; box-shadow: 4px 4px 2px rgba(0,0,0,0.05); margin:10px auto 20px;}
.center_notice h3 {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; padding:10px; background: #9edbac; color:#444; }
.center_notice h3 a {color:#444;}
.center_notice ul {padding:10px;}
.center_notice li {display: -webkit-flex; display: -ms-flex; display: flex; line-height: 27px; font-size: 0.9em;justify-content: space-between; color:#949494;}
.center_notice li .title {width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* ----------------------- oneOnOne 1:1 ----------------------- */
.btn_wrap.one {box-sizing: border-box; display: -webkit-flex; display: -ms-flex; display: flex;}
.select_btn {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap; align-items: center; text-align: center; border:1px solid #e4e4e4; margin-bottom: 10px;}
.select_btn li {height:70px; line-height: 70px; width:25%; display: inline-block; background: #fff; box-sizing: border-box;}
.select_btn li a {display: block; height:100%;}
.select_btn li:nth-child(2),
.select_btn li:nth-child(6) {border-right:1px solid #e4e4e4; border-left:1px solid #e4e4e4;}
.select_btn li:nth-child(3),
.select_btn li:nth-child(7) {border-right:1px solid #e4e4e4;}
.select_btn li:nth-child(-n+4) {border-bottom:1px solid #e4e4e4;}
.select_btn li.on a {background: #4FAC86; color:#fff;}
.ques_box {padding:15px; box-sizing: border-box; background: #fff; border:1px solid #e4e4e4; margin-bottom: 5px;}
.ques_tit {line-height: 1.8em;}
.ques_box.on {border:1px solid #0091EA;}
.ques_ct {border-top:1px solid #e4e4e4; padding-top:10px;}
.ques_ct pre {margin-top: 5px; background: #f0f0f0; white-space: pre-wrap;}

/* ----------------------- FAQ ----------------------- */
.tabcontent {background: #fff; padding:10px; font-size: 0.9em; letter-spacing: -0.1em; }
.content_desc {display: none; padding: 10px;}
.content_tit {text-align: left; padding:10px 50px 10px 5px; border-bottom:1px solid #e4e4e4; width:100%; position: relative;font-size: 0.9em; letter-spacing: -0.1em;}
.content_tit:after{content:""; position: absolute; top:50%; transform:translateY(-50%); right:15px; background-image: url("/common/img/sprites.png"); background-repeat:no-repeat; background-size:200px; width:17px; height:17px; background-position:1px -25px;}
.content_tit.on {color:#4FAC86; font-weight: bold; }
.content_tit.on:after {height:2px; background-position:-15px  -25px;}
.content_tit.on + .content_desc {display: block;border-bottom: 1px solid #ebebeb;}

/* ----------------------- notice  ----------------------- */
.notice {padding:10px;}
.notice pre {white-space: pre-wrap; letter-spacing: -0.01em;}
.notice .content_desc {font-size: 0.9em; letter-spacing: -0.01em; line-height: 1.3em;}

/* ----------------------- mypage ----------------------- */
.mypage.greeting {background: #fff; padding:15px; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; }
.mypage.div {background: #fff; margin-bottom:10px; display: -webkit-flex; display: -ms-flex; display: flex; align-items: flex-end;}
.mypage.div a {width:100%;  text-align: center; padding:14px 0; height:100%; border-right:1px solid #ebebeb;}
.mypage.div a:last-child {border-right:none;}
.mypage.div a span {width:50px; height:40px; display: inline-block;}
.STATE .mypage.div {border-top:2px solid #4fac86; border-bottom:1px solid #ccc; margin-bottom: 0;}
.STATE .mypage.div a {display: -webkit-flex; display: -ms-flex; display: flex; flex-direction: column-reverse; border-right:none;}
.mypage.div .sub_tit {font-size: 0.9em; font-weight: 400; color:#666;}
.ico_lock img {width:117px;}
.chkpwd {text-align: center; padding:20px; background: #fff; margin-top: 10px;}

/* .mypage.point {padding:20px; background: #4fac86;} */
.mypage.point a { width:100%;  background: #fff; border-radius: 5px; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; height:50px; padding:0 20px; box-sizing: border-box;}

.mypage.icon {overflow: hidden; align-items: center;}
.mypage.icon a {float:left; width:23%; margin:0 3px 8px; text-align: center;}
.mypage.icon span {background: #f7f7f7; display: inline-block; border-radius: 10px; width:70px; height:70px; text-align: center; line-height: 70px; }
.mypage.icon p {font-size: 0.8em; margin-top: 10px;}
/* ----------------------- point ----------------------- */
.filter_wrap {background: #fff; margin-bottom: 10px;}
.filter_button {padding:0 20px; height:50px; line-height: 50px; text-align: right; }
.filter_content {padding:10px; border-top:1px solid #e4e4e4;}
.point_list li {padding:15px 20px 10px 20px; background: #fff; border-bottom: 1px solid #e4e4e4; }
.point_list li > span {font-size: 0.8em; color: #888;}
.filter_result {background: #fff; padding:0 20px; margin-bottom: 10px; line-height: 50px; height:50px;}

.point_list {overflow-y: scroll; height:calc(100vh - 122px);}
.point_list li em:before {content:"- "; }
.point_list li em:after {content:" P"; }
.point_list li em.plus {color:#5797e1}
.point_list li em.plus:before {content:"+ ";}

.use_place {width:67%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* ----------------------- welfare > refund ----------------------- */
.refund_wrap {overflow-y: scroll; height:calc(100vh - 122px)}
.refund_ct {background: #fff; margin-bottom: 10px; padding:10px 10px 5px; }
.refund_ct .top {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; border-bottom:1px solid #e4e4e4; margin-bottom: 5px; padding-bottom: 5px;}
.refund_ct .top .state {text-align: center; width:19%;}
.refund_ct .top .desc {width:50%;}
.refund_ct .top .desc .date {font-size: 0.9em; color:#888;}
#layer.filter .layer_tit {padding:10px; border-bottom:1px solid #e4e4e4; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; }
#layer.filter .layer_tit .close {position: inherit;}
/* .receipt_list {padding:20px 0 25px;} */
.receipt_list li {margin-bottom: 10px;}
/* .receipt_list .input, .receipt_list .select {border:none; border-bottom:1px solid #ccc;} */
#layer.filter .basic_info {padding:15px 20px; margin: 0 20px; background: #f6f6f6; margin-top: 10px;}

#layer.filter .date input[type='radio']:checked + label,
#layer.filter .state input[type='radio']:checked + label,
#layer.filter .point input[type='radio']:checked + label
{background: #2CBD9F; color: #fff; border: 1px solid #ccc;;}

.refund #layer.refund,.refund #layer.reason {padding:15px;}
.refund #layer.refund .layer_tit h3,
.refund #layer.reason .layer_tit h3 {padding-bottom:15px; font-size: 24px; margin-bottom: 20px; border-bottom: 1px solid #ccc;}

.menu_fold li.refund a {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; padding-right:60px;}

.refund_ct .use_place {display: block; width: 98%; line-height: 1.1em; font-size: 0.9em;}
.refund_ct .use_pay {width:30%; line-height: 1em; text-align: right;}
.refund_ct .use_pay:after {content:"원"}
.refund_ct .bottom {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between;}
.refund_ct .bottom > * {width:50%; }
.refund_ct .bottom p:first-child { padding-right:10px; border-right: 1px solid #e4e4e4;}

#usePay:after {content:"원";}
.swal2-select {margin-top: 0!important; border:1px solid #ccc; }




/* ----------------------- receipt ----------------------- */
.sec.layout {padding:10px; margin-bottom: 10px;}
.point_view {margin-top: 10px; padding: 0 10px; background: #ebebeb;}
.point_view li {display: block; line-height: 35px; overflow: hidden; padding: 0 10px;}
.point_view li:not(:last-child) {border-bottom: 1px solid #ccc;}
.point_view li span:last-child {float:right;}
.show_point {width: auto; font-size: 14px; height: auto; padding: 5px 10px; line-height: 1em; float: right; font-weight: normal;}
.receipt_btn div { display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between;}
.receipt_btn button {display: inline-block; margin: 0 2px; font-size: 14px; height:48px; line-height: 16px; border-radius:4px; background: #fff; text-align: center; background:#238870; color:#fff; width:100%; margin:0 3px; transition:0.2s;}
.receipt_btn button.onnuri {background:#ffbc3b;}
.receipt_btn button.lopay {background: #5797E1;}
/* .receipt_btn button:hover {background: #eafdf9; color:#238870; border:1px solid #238870;}' */
'
.search_box {background: #fff; border: 1px solid #dcdcdc; margin-bottom: 10px; border-radius: 0; color: #333;}
.search_bind {margin: 10px;}
.search_bind label {display: block; color:#888; font-weight: bold; font-size: 14px;}
.bill_list .desc {padding: 10px; background: #ebebeb;font-size: 14px; line-height: 20px; font-weight: bold; color: #444; margin: 10px 0;}
.bill_list li {border: 1px solid #dcdcdc; margin-bottom: 10px; background: #fff; padding: 10px; border-left: 3px solid #238870; display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap: wrap; position: relative; }
.bill_list .item {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap: wrap; width: 50%; align-items: center; font-size: 0.9em; margin-bottom: 3px;}
.bill_list .item.block {width:100%; }
.bill_list li.lopayTag {border-left: 3px solid #5797E1;}
.bill_list li.onnuriTag {border-left: 3px solid #ffbc3b;}
.bill_list .list_tt {font-weight: bold; margin-right: 10px;}
.bill_list li:after {content: ""; position: absolute; bottom: 0; right: 0; border-radius: 20px 0 0 0; padding:4px 17px; font-size: 14px;}
.list_wrap li.lopayTag:after {content: "지역사랑"; background: #5797E1;color: #fff; }
.list_wrap li.onnuriTag:after {content: "온누리"; background: #ffbc3b;color: #fff; }
.list_wrap li.pointTag:after {content: "일반"; background: #238870; color: #fff; }
.list_wrap li:last-child {margin-bottom: 0px;}
.modify_photo_upload { background: #f3f3f3; border:1px solid #ebebeb; border-radius: 5px; display: inline-block; text-align: center; padding:5px; width:150px; margin-top: 5px; word-break: break-all;}
.upload_desc {display: inline-block; line-height: 1.2em;  word-break: break-all;}
.chkiam { font-weight: normal; font-size: 0.8em; display: block;;}
#refundMsg {color:#ff5656; font-weight: bold; text-align: left; font-size: 0.9em; margin-top: 10px;}
/* ---------------------- shop > order ----------------------- */
.order_tit {font-size: 1.1em; font-weight: bold; color:#666; background: #fff; padding:10px; border-bottom:1px solid #e4e4e4;}
.order_tit.list {font-weight: normal; font-size: 0.9em; display: -webkit-flex;
display: -ms-flex; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.menu_fold .parent.on .order_tit {border:none; border-bottom:1px solid #ccc; font-weight: normal; }
.menu_fold .order_tit {height:50px; }
.product_img.mini {width:100px; height:100px; border:1px solid #e4e4e4; box-sizing: border-box; border-radius: 5px; overflow:hidden;}
.product_img img {width:100%; height:100%; }
.menu_fold.order .parent {margin-bottom: 10px;}
.menu_fold.order .child {padding:0; background: #fff; }
.order_item {padding:15px; background: #fff; border-bottom:1px solid #e4e4e4; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center;}
.order_item:last-child {border-bottom:0;}
.pd_name {font-size: 0.95em; word-break: break-all;}
.pd_option {color:#999; font-size: 0.9em; word-break: break-all;}
.product_info {width:68%; letter-spacing: -0.1em;}
.product_info span {font-size: 0.9em;}
.totalNum {font-size: 0.9em; margin-bottom: 10px;}
#slide_order_btn {padding-right:30px; position:relative;}
#slide_order_btn:after { content:""; display: inline-block; width:11px; height:18px; background-image: url("/common/img/sprites.png"); background-repeat:no-repeat; background-size: 200px; background-position: -50px -21px; position: absolute; right: 11px; transform: rotate(90deg); top: 4px;}

#slide_order_btn.on:after {transform: rotate(-90deg); top:2px;}

i.divide { font-style: normal; color: #888; padding-left: 8px; padding-right: 8px; font-size: 0.8em; line-height: 1.5em;}

.go_datial {position: relative; text-indent: -9999em; background-image: url("/common/img/sprites.png");background-size:300px; background-repeat:no-repeat; width:12px; height:26px; background-position:-77px -33px;}
/* .go_datial:after {content:""; position: absolute; top:50%; transform:translateY(-50%); right:15px; } */

/* ---------------------- shopping  ----------------------- */
.share {color:#b3b3b3; font-size: 26px; display: inline-block; float: right; vertical-align: top;}
.prod_detail_desc {padding:15px; }
.prod_detail_desc .prod_all_name {font-size: 1.1em; font-weight: normal; margin-top: 10px; margin-bottom: 10px; word-break: break-all;}
.prod_detail_desc strike {color:#888; font-size: 0.9em; }
.prod_detail_desc .price {font-size: 1.3em; font-weight: bold; color:#ff5656; display: inline-block;}
.detail_page img {width:100% !important; height:auto !important;}
.prod_pay_box {position: fixed; bottom: -1px; right: 0; left: 0; background: #fff; box-shadow: -4px -4px 10px rgba(0,0,0,0.15); z-index:2002;}
.buy_step_1 {padding:10px; background: #fff;}
.buy_step_2 {display: none; padding:40px 10px 10px 10px;  }
.buy_step_2 .payment {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; padding:20px 10px;}
.buy_step_2 .payment p {font-size: 1.3em; font-weight: bold; display: inline-block;}
.buy_step_2 .pay_down {width:50px; height:50px; position: absolute; top:-25px; left:50%; transform:translateX(-50%); text-indent:-999999em; border-radius: 50%; overflow: hidden; }
.buy_step_2 .pay_down:after { content:""; position: absolute; background-image: url("/common/img/sprites.png"); background-repeat:no-repeat; background-size:300px; background-position:-188px 0px; z-index: 0; width:23px; height:30px; left:50%; top:50%; transform:translate(-50%,-50%);}
.buy_step_2 .pay_down:before {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background:#d7d7d7; z-index: -1; }

.shopping.ctgr { margin-bottom: 10px;}
.shopping.ctgr ul {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap ;}
.shopping.ctgr li {width:25%; font-size: 0.9em; text-align: center; padding:15px 0; box-sizing: border-box;}

.shopping.ctgr li a{display: block; text-align: center; }
.shopping.ctgr li a span {display: block;}
.shopping.ctgr img {height:30px; margin-bottom: 5px;}
.shopping.ctgr li:nth-child(-n+4) {border-bottom:1px solid #ebebeb;}
.shopping.ctgr li:nth-child(2),
.shopping.ctgr li:nth-child(3),
.shopping.ctgr li:nth-child(6),
.shopping.ctgr li:nth-child(7) {border-left:1px solid #ebebeb; border-right:1px solid #ebebeb;}

.shopping.ctgr li.on {border:none; border:1px solid #4fac86;}

.ctgr3 {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap; background: #fff; padding: 10px; margin-bottom: 10px;}
.ctgr3 button {height:50px; width:33.3%; line-height: 1.2em; border:1px solid #ebebeb; font-size: 0.9em; padding:0 10px;}
.ctgr3 button.on {background:#4fac86; color:#fff; }

.ctgr4 {overflow: hidden; background: #fff; margin-bottom: 10px; padding: 10px; transition:  0.5s;}
.ctgr4 button {padding:5px 10px; font-size: 0.8em; display: inline-block; float:left; margin: 4px; border:1px solid #ccc; border-radius: 5px; letter-spacing: -0.1em;}
.ctgr4 button:before {content:"# "}
.ctgr4 button.on {border:1px solid #4fac86; }
.ctgr4 button.on:before {color:#4fac86; }
.ctgr4.fixed {position: fixed; top: 0; left: 0; right: 0; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); transition: 0.5s;}
.sort_wrap {justify-content: flex-end; background: #fff; padding:10px; border-bottom:1px solid #ebebeb;}
.sort { font-size: 0.8em; padding:0 5px; color:#999; font-weight: bold;}
.sort.on, .sort.selected {color:#000; }
.search_result_area {background: #fff; padding:10px; margin-bottom: 10px; text-align: center;}



/* ---------------------- cart  ----------------------- */
.allchk {display: inline-block; margin-bottom: 10px; font-weight: bold; padding:0 10px;}
.cart {padding:10px;}
.cart .product_img {width:80px; height:80px; display: inline-block; border-radius: 10px; overflow: hidden;}
.cart .prod_desc {display: inline-block; width:76%; padding: 0;}
.cart .prod_name {-webkit-line-clamp:1; height:20px;}
.cart .prod_option {font-size: 0.95em; color:#888; font-weight: bold;}
.cart .prod_price {font-size: 0.9em; font-weight: bold;}
.cart .product_img img {width:100%; }
.deleteProd {font-size: 20px; font-weight: bold; color:#666;}
.cartChkbox {width:18px; height:18px;}
.cart .btn.outline.gray {height:32px; line-height: 32px; width:auto; padding:0 20px; margin-left: 20px; font-size: 0.8em; color:#000;}
.cart .top {border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px;}
.cart .ea_btn, .cart .ea  {display: inline-block; width:30px; height:30px; border:1px solid #ccc; border-radius: 2px; text-align: center; line-height: 30px;}
.cart.fixed {position: fixed; bottom: -1px; left: 0; right: 0; margin-bottom: 0; box-shadow: -4px -4px 10px rgba(0,0,0,0.1);}
.cart_price_box {display: -webkit-flex; display: -ms-flex; display: flex; box-sizing: border-box; align-items: center;}
.cart_price_box h4 {width:55%;}
.cart_price_box .btn {width:60%;}
.sec.empty {width:100vw; text-align: center; display: -webkit-flex; display: -ms-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; height:calc(100vh - 110px);}
.empty div {width:70%; margin-bottom: 20px;}
.empty .btn {padding:0 30px; width:auto;}

/* ---------------------- buy  ----------------------- */
.overflow_y {max-height:300px; overflow-y: scroll;}
.use_point,.input.w60  {width:60%;}
.bank_desc li {overflow: hidden;}
.bank_desc li span {float:left; line-height: 40px; display: inline-block;}
.bank_desc li span:first-child {width:30%;}
.bank_desc li span:last-child {width:70%; }
.delivery {border: 2px solid #e4e4e4; background: #f9f9f9; border-radius: 5px; }
.deli .tit {text-align: center; padding-top:10px; padding-bottom: 10px; border-bottom:1px solid #e4e4e4;}
.deli .back {width:30px; height:20px; background-position: -110px 0; width:21px; height:30px; position: absolute; top:10px; left:20px;}
.deli label.font_sm {width:23%; line-height: 50px;}
.deli label + input[type="text"],
.deli label + input[type="tel"],
.layerSection label + div {width:77%}
.agree_check {display: inline-block;margin-bottom: 5px; margin-top: 5px;}
.deli.new {display: none;}
#totalPayment {width:60%;text-align:right;color:#ff5656;font-weight:bold;}
.save_wrap {border:1px solid #e4e4e4; border-radius: 2px; overflow: hidden; padding:7px;}
input[name='addrType'], input[name="saveBuyer"] {display: none;}
.save_lbl {padding:5px 17px; border-radius:50px; background: #ebebeb; font-size: 0.9em;  margin:5px; display: inline-block; float:left; position: relative; letter-spacing: -0.1em; font-weight: bold; color:#555;}
input:checked + .save_lbl {text-indent: 10px; background: #c3e3d6;  color:#222; }
input:checked + .save_lbl:before {content:""; width:9px; height:5px; transform:rotate(-45deg); display: inline-block; position: absolute; left: 12px; top: 12px; border-left:2px solid #238870; border-bottom:2px solid #238870;}
.addr_btn {display: inline-block; font-size: 0.9em; line-height: 1em; width: auto; padding: 8px 13px; background:#238870; color:#fff; border-radius: 2px; font-weight: bold;}
#nopayInfo {display: none;}
.icon_chk {width:40px; height:40px; background: #fff; border:2px solid #179B65; border-radius: 50%; text-indent: -99999em; position: relative; margin:0 auto; margin-bottom: 20px;}
.icon_chk:after {content:""; position: absolute; left:50%; top:41%; transform:translate(-50%,-50%) rotate(-45deg); width:22px; height:13px; border-left:2px solid #179B65; border-bottom:2px solid #179B65;}

.order_list {padding: 10px;}
.order_list li {display: -webkit-flex; display: -ms-flex; display: flex; padding:5px 0;}
.order_list li span {width:50%;}
/* #bank { margin:0 10px;} */
.order_list.ratio span:first-child {width:20%;}
.order_list.ratio span:last-child {width:80%;}

/* ---------------------- exhibition ----------------------- */
.ex_ctgr_wrap {background:#fff; margin-bottom:10px; display: -webkit-flex;
display: -ms-flex; display: flex; flex-wrap:wrap;  }
.ex_ctgr_wrap .ctgr1 {width:25%; padding:10px 0; font-size: 14px; border-right:1px solid #ebebeb;}
.ex_ctgr_wrap .ctgr1:nth-child(4n) {border-right:0;}
.ex_ctgr_wrap .ctgr1:nth-child(-n+4) {border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb;}
.ex_ctgr_wrap .ctgr1:nth-child(n+5):nth-child(-n+8) {border-bottom:1px solid #ebebeb;}
.ex_ctgr_wrap .ctgr1.show {background:#444; color:#fff;}

.exhibit_list li {width:100%; }
.exhibit_list li a {display: inline-block; width:100%;  }
.exhibit_list li img {width:100%; }

.exhibit_link,
.scroll_ctgr {background: #f9f9f9; margin-bottom: 10px; padding:10px; overflow: hidden;}

.exhibit_link a,
.scroll_ctgr a,
.scroll_ctgr span {padding:2px 10px; margin:2px; border-radius: 10px; position: relative; float:left; font-size: 0.95em;}

.exhibit_link a:after,
.scroll_ctgr a:after,
.scroll_ctgr span:after {content:" | "; color:#e4e4e4; position: absolute; right:-7px;}

.exhibit_link a:last-child:after,
.scroll_ctgr a:last-child:after,
.scroll_ctgr span:last-child:after {content:"";}
.exhibit_link a.active,
.scroll_ctgr a.active,
.scroll_ctgr span.active {background: #444; color:#fff; }

.exhibit_link.fixed,
.scroll_ctgr.fixed {position: fixed; top: 0; left: 0; right: 0; box-shadow: 4px 4px 10px rgba(0,0,0,0.2); z-index: 200;}

.ex_info {background:#333; color:#fff; font-size: 1em; display: -webkit-flex; display: -ms-flex; display: flex; flex-direction: column; align-items: center; padding:20px 40px;}
.ex_info h2 {font-weight: bold; color:#fff; margin-bottom: 10px}
.ex_info ul {flex:3; list-style:circle;}
.ex_info li {display:list-item; list-style: disc; font-size: 12px; line-height: 1.3em;}

/* ---------------------- best 100 ----------------------  */
.rank_box {position: absolute; top: 0; left: 10px; width: 40px; height: 35px; background: #666; color: #fff; font-family: arial; font-weight: bold; text-align: center; padding: 5px 0; box-sizing: border-box; z-index: 6;}
.rank_box:before { content: ''; width: 0px; height: 0px; border-top: 0 solid #000; border-bottom: 20px solid transparent; border-right: 20px solid #666; border-left: 20px solid #666; position: absolute; top: 98%; left: 0;}
.rank_box .best {font-size: 14px; font-weight: bold; color: #fff; text-transform: uppercase;display: block; line-height: 16px;}
.rank_box .rank {font-size: 23px; line-height: 28px;}

.prod:nth-child(-n+3) .rank_box {background: #ff5656;}
.prod:nth-child(-n+3) .rank_box:before { border-right: 20px solid #ff5656; border-left: 20px solid #ff5656;}

.top_banner {border-radius:10px; overflow:hidden; width:100%; }








@media screen and (max-width:500px) {
    .side_icon_wrap li {width:60px; height:60px; }
    .prod_name {font-size: 15px;}
}
@media screen and (min-width:500px) and (max-width:767px) {
    .input, .select, .btn {font-size: 1.3em;}
    .intro h3 {font-size: 1.5em;}
    .cafeplan img {width:300px;}


}
@media screen and (min-width:768px) and (max-width:1900px) {
    .header {height:63px; line-height: 63px;}
    .header.dep1 li a {font-size: 1.3em;}
    #page_tit {line-height: 63px;}
    .login {max-width:600px; margin:0 auto;}
    .wrap.intro:before {animation:3s beforeBgWide ease forwards;}
    .input, .select, .btn {font-size: 1.3em;}
    .intro h3 {font-size: 1.5em;}
    .cafeplan img {width:300px;}
    .main .point {font-size: 1.5em; line-height: 2em; padding:20px; }
    .main .ctgr ul li {padding-top: 17px; padding-bottom: 65px;}
    .main .ctgr ul li a {height:80px;}
    .main .ctgr ul li img {vertical-align: bottom; height:100%;}
    .main .ctgr ul li a span  {font-size: 1.3em; margin-top: 10px;}
    #sidenav{width:60%;}
    /* .refund_wrap {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-start;} */
    .refund_ct {width:46.5%; float:left; }
    .refund_ct:nth-child(odd) {margin-right: 1.5%;}
    .cart .prod_name {font-size: 1.3em; line-height: 1.5em;height:1.5em;}
    .cart .prod_price {font-size: 1.2em;}
    .cart .ea_btn, .cart .ea {width:50px; height:50px; font-size:1.5em; line-height: 50px;}
    .product_img.mini {width:140px; height:140px;}
    .prod_name {font-size: 1.2em; line-height: 1.5em; height: auto;}
    .prod_detail_desc .prod_all_name, .product_info .a_rt {font-size: 1.4em;}
    #totalPayment {font-size: 1.5em;}
    .com_price {font-size: 1.2em;}
    .sele_price {font-size: 1.5em;}
    .exhibit_list {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap;}
    .exhibit_list li {width:50%; padding:5px 10px; box-sizing: border-box; }
    .exhibit_list li img {border-radius: 10px; border:1px solid  #ebebeb;}
    .cart .product_img {width:140px; height:140px;}
    .prod_wrap.border .prod {width:49%}
    .corp_area {max-width: 100%;}
    .menu_link span.font_xsm {font-size: 0.9em;}
    .notice .content_desc, .content_tit, .tabcontent {font-size: 1.1em;}
    .product_info h4.font_sm {font-size: 1.2em;}
    .product_info {font-size: 1.2em; margin-left: 20px;}
    .order_item {justify-content: flex-start;}
    .btn.small {font-size: 15px;}
}