@charset "utf-8";
@import url("roboto.css");
@import url("NotoSansKR-Hestia.css");

/* layout */
body {margin: 0; padding: 0; border: 0; font-size: 16px; font-family: 'Roboto', 'Noto Sans Korean', -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; font-weight: 500; color: #333;}
ol, ul {list-style: none; margin:0; padding:0;}
.clearFix::after {content: ''; display: block; clear: both;}
.floatL {float: left;} 
.floatR {float: right;} 
.txL {text-align: left}
.txR {text-align: right}
.txC {text-align: center}
a:link, a:visited {color: #55ADAC; text-decoration: none; background: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
a:active {color: #3d7e7d; background-color: rgba(85, 173, 172, 0.1);}
button {cursor: pointer; border: none; outline: none; background: none; padding: 0; font-family: inherit;}
 
/* 자주 사용하는 margin */
.mt_10 {margin-top: 10px;}
.mt_16 {margin-top: 16px;}
.mt_24 {margin-top: 24px;}
.mt_32 {margin-top: 32px;}
.mt_72 {margin-top: 72px;}
.pb40 {padding-bottom: 40px;}
.pb65 {padding-bottom: 65px;}
.pb80 {padding-bottom: 80px;}
input.wid48 {width:48%;}
input.wid48:active {background:#999; color:#fff;}
input.wid48.on {background:#999; color:#fff;}
button.wid48 {width:48%;}
button.wid48:active {background:#999; color:#fff;}
button.wid48.on {background:#999; color:#fff;}

/* form */
select {font-size: 1.25rem; padding: 16px;border: 1px solid #E3E3E3; border-radius: 2px; background: url('../images/selectArrow.png') no-repeat 90% 50%;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select.w100 {width: 100%;}
select.w48 {width: 48.6%;}
select.bw48 {width: 49%; margin-left:3%;}
select:focus {outline:2px solid #55ADAC;}

/* 회원가입 약관동의 체크박스1 */
input#check_btn1 {display:none;} 
input#check_btn1 + label {cursor:pointer;}
input#check_btn1 + label > span {vertical-align: middle; padding-left: 5px;}
input#check_btn1 + label:before {content:""; display:inline-block; width:17px; height:17px; border:2px solid #55ADAC; border-radius: 4px; vertical-align:middle; margin-top:5px;}
input#check_btn1:checked + label:before {content:""; background-color:#55ADAC; border-color:#55ADAC; background-image: url('../images/checkArrow.png'); background-repeat: no-repeat; background-position: 50%;}

/* 회원가입 약관동의 체크박스2 */
input#check_btn2 {display:none;} 
input#check_btn2 + label {cursor:pointer;}
input#check_btn2 + label > span {vertical-align: middle; padding-left: 5px;}
input#check_btn2 + label:before {content:""; display:inline-block; width:17px; height:17px; border:2px solid #55ADAC; border-radius: 4px; vertical-align:middle;  margin-top:5px;}
input#check_btn2:checked + label:before {content:""; background-color:#55ADAC; border-color:#55ADAC; background-image: url('../images/checkArrow.png'); background-repeat: no-repeat; background-position: 50%;}

/* 회원가입 약관동의 체크박스3 */
input#check_btn3 {display:none;} 
input#check_btn3 + label {cursor:pointer;}
input#check_btn3 + label > span {vertical-align: middle; padding-left: 5px;}
input#check_btn3 + label:before {content:""; display:inline-block; width:17px; height:17px; border:2px solid #55ADAC; border-radius: 4px; vertical-align:middle; margin-top:5px;}
input#check_btn3:checked + label:before {content:""; background-color:#55ADAC; border-color:#55ADAC; background-image: url('../images/checkArrow.png'); background-repeat: no-repeat; background-position: 50%;}

/* 회원가입 약관동의 체크박스4 */
input#check_btn4 {display:none;} 
input#check_btn4 + label {cursor:pointer;}
input#check_btn4 + label > span {vertical-align: middle; padding-left: 5px;}
input#check_btn4 + label:before {content:""; display:inline-block; width:17px; height:17px; border:2px solid #55ADAC; border-radius: 4px; vertical-align:middle; margin-top:5px;}
input#check_btn4:checked + label:before {content:""; background-color:#55ADAC; border-color:#55ADAC; background-image: url('../images/checkArrow.png'); background-repeat: no-repeat; background-position: 50%;}

/* 회원가입 약관동의 체크박스5 */
input#check_btn5 {display:none;} 
input#check_btn5 + label {cursor:pointer;}
input#check_btn5 + label > span {vertical-align: middle; padding-left: 5px;}
input#check_btn5 + label:before {content:""; display:inline-block; width:17px; height:17px; border:2px solid #55ADAC; border-radius: 4px; vertical-align:middle; margin-top:5px;}
input#check_btn5:checked + label:before {content:""; background-color:#55ADAC; border-color:#55ADAC; background-image: url('../images/checkArrow.png'); background-repeat: no-repeat; background-position: 50%;}

/* intro, login */
#introWrap {display: grid; place-items: center; align-content: center; height: 100vh; background: url("../images/intro/intro_bg.png") no-repeat; background-size: cover;}
#introWrap img { max-width: 100%; height: auto; margin: 5px;}
#introWrap img:nth-child(2) {margin-top:30px;}
.introLogo {text-align: center; margin-top:150px;}
.introImg {text-align: center; margin-top:30px;}
.offline {text-align: center; margin-top:10px; color:navy; font-size: 16px;}

#pageWrap {width: 100vw; height: 100vh;}
.pageArea {padding:10px;}
.authContents {text-align: center; margin-top : 190px;}
.pageTitle {display: flex; align-items: center;}
.pageTitle img {padding-right:10px;}
.pageTitle span {font-size: 18px; font-weight:600;}
.authContentsTitle {font-size: 20px; font-weight : 800; color : #333333;}
.authContentsContent {margin-top : 8px; font-size : 16px; line-height: 140%; color: #333333;}
.authContentsBtn {margin-top : 48px; width : 90%;}
.checkIdBtn {width: 90px; height: 24px; background: #FFFFFF; border: 1px solid #EDEDED; box-sizing: border-box;
        border-radius: 32px; font-size: 14px; text-align: center; color: #55ADAC; position: absolute; top: 14px; right: 12px;}    
.loginEtcMenu {display: flex; justify-content: space-between; align-items: flex-start; color: #55ADAC; font-weight:600; margin-top:30px;}
.joinFormList {margin-top:0px;}
.joinFormList ul li {padding:10px 0px; font-size:16px; font-weight:400; border-bottom: 1px solid #ccc;}
.joinFormList ul li:last-child {border-bottom:0;}
.joinFormList ul li span {font-weight:600;}
.joinForm h3 {font-size:18px; color: #222; font-weight:800; margin-top:24px;}
.selectAuth {width: 100%; margin: 0 auto;}
.selectAuth img {width:100%; margin-top:30px;}
.changeBtnWrap {display: flex; justify-content: center; align-items: center; margin-top:24px; gap:10px;}
.changeOkBtn {width:40%; height: 52px; text-align: center; background: #55ADAC; color:#fff; font-size: 20px; font-weight: 600;border: 1px solid #55ADAC;}
.changeCancelBtn {width:40%; height: 52px; text-align: center; background: #656565; color:#fff; font-size: 20px; font-weight: 600;border: 1px solid #656565;}

/* 버튼 스타일 */
.btn1 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #333333; color:#fff; font-size: 20px; font-weight: 600;border-radius: 2px;}
.btn2 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #F2F2F2; color:#333; font-size: 20px; font-weight: 600;border-radius: 2px;}
.btn3 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #fff; color:#333; font-size: 20px; font-weight: 600;border-radius: 2px; border: 1px solid #E3E3E3;}
.btn4 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #55ADAC; color:#fff; font-size: 20px; font-weight: 600;border: 1px solid #55ADAC;box-shadow: 4px 4px 10px rgba(2, 196, 136, 0.3);border-radius: 2px; }
.btn5 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #fff; color:#55ADAC; font-size: 20px; font-weight: 600;box-shadow: 4px 4px 10px rgba(24, 147, 168, 0.3); border:1px solid #55ADAC !important; border-radius: 2px;}
.btn6 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #55ADAC; color:#fff; font-size: 20px; font-weight: 600; border-radius: 2px; }
.btn7 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #fff; color:#656565; font-size: 20px; font-weight: 600;  border:1px solid #E3E3E3 !important;}
.btn7.on {background: #fff; color:#55ADAC; font-size: 20px; border:1px solid #55ADAC !important;}
.btn9 {width: 100%; height: 52px; line-height: 40px; text-align: center; background: #F2F2F2; color:#333; font-size: 20px; font-weight: 600; border:0;}
.btn9.onG {background: #55ADAC; color:#fff;}
.btn9.onB {background: #333333; color:#fff;}
.btn9.onW {background: #fff; color:#666;}
.moreListBtn {margin-top: 10px; border: 1px solid #eee;background: #fff;border-radius: 5px;padding: 10px 22px;font-size: 18px;width: 100%;}
.moreEvtListBtn {margin-top: 10px; border: 1px solid #eee;background: #fff;border-radius: 5px;padding: 10px 22px;font-size: 18px;width: 100%;}
.moreNotiListBtn {margin-top: 10px; border: 1px solid #eee;background: #fff;border-radius: 5px;padding: 10px 22px;font-size: 18px;width: 100%;}

/* home */
.topLogo {padding: 10px 16px 6px; text-align: center; border-bottom: 1px solid #ccc;}
.topLogo img {width:74px; height:42px;}
.container {flex: 1; /* 남은 공간을 채우도록 */}
.com_contain {width:90%; margin:0 auto 10px;}
.com_contain2 {width:95%; margin:0 auto 5px;} /* 추천매장 리스트, 리워드 */
.sec2, .sec3 {position: relative;}
.mH2 {font-size: 22px; font-weight: 900; line-height: 24px; letter-spacing: 0.8px}
.mH2 span {font-size: 22px;font-weight: 900; line-height: 24px; color: #489090;letter-spacing: 0.8px;}
.mH2 i {margin-right: 7px; margin-top: 3px;width: 20px; height: 20px; vertical-align: top; display: inline-block; background: url('../images/icon1.png')no-repeat; background-size: contain;}
.mH2 i.recommendStore {background: url('../images/icon2.png')no-repeat; background-size: contain;}
.more {position: absolute; top: -16px; right: 4px;font-size: 16px;font-weight: 500;color: #333;}
.more::after {content: '';display: inline-block;width: 6px;height: 10px; background: url('../images/more.png')no-repeat;vertical-align: top;margin-top: 6px;margin-left: 7px;}
.mList {margin-top: 16px;}
.mList li {position: relative; float: left;width: 47.56%; margin-right: 4.8%; font-size:0.84rem;}
.mList li:nth-child(n+3) {margin-top: 24px}
.mList li:nth-child(even) {margin-right: 0}
.mList li .storeImg {position: relative; width: 100%; border-radius: 5px;}
.mList li .storeImg img {width: 100%; aspect-ratio: 1; border-radius: 5px; background-position: center center; background-size: contain;}
.mList li i.heart {width: 21px; height: 17px; position: absolute; bottom:14px; right: 11px; background:url('../images/heart.png')no-repeat; background-size: contain;}
.mList li .heart.on {background:url('../images/heartOn.png')no-repeat;  background-size: contain;}
.mList li .title_area {display: flex; justify-content: space-between; align-items: flex-start;}
.mList li .title_area ul.iconlist {display: flex; align-items: center; margin-top: 12px;}
.mList li .title_area ul.iconlist li img {width: 24px; height: 24px;}
.mList li .title_area span {display: block; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.5; color: #55ADAC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mList li .title_area span.haveCoupon::after {content: ''; background: url('../images/couponIcon.png'); width: 12px; height: 14px; display: inline-block; margin-left: 5px;}
.mList li p {font-size: 15px; font-weight: 500; color: #787878; line-height: 14.06px; margin-top: 8px; letter-spacing: -1px;}
.mList li p .recommedIcon {display: inline-block; margin-right:4px; vertical-align: middle; width: 12px; height: 14px; background:url('../images/recomentHeart.png')no-repeat;  background-size: contain}
.store_name_title {width:100%;display: block; margin-top: 10px; font-size: 0.875rem; font-weight: 700; line-height: 20.9px; color: #55ADAC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mDepositeBtn {background: #55adac;color: #fff;padding: 16px 0; width: 100%; border-radius: 2px;border:0;font-size: 1.1rem; font-weight: 700;}
.errorCup {width: 100%; font-size: 12px !important;text-align: center;display: block;margin: 0 auto 10px;color: #d80404;position: absolute;top: 43px;left: 50%;transform: translateX(-50%);}
@media (min-width:600px){
    .mList li .storeImg{width: 200px;height: 200px;}
}
@media (max-width:360px){
    .mList li .stampImg ul >li{margin-right: 9px;width: calc((100vw - 69px) / 5);height: calc((100vw - 69px) / 5);line-height: calc((100vw - 69px) / 5);}
    .mList li .stampImg ul >li.on,
    .mList li .stampImg ul >li:nth-child(6).on{background-size: 36%;}
    .mList li .stampImg ul >li:nth-child(2).on,
    .mList li .stampImg ul >li:nth-child(7).on{background-size: 50%;}
    .mList li .stampImg ul >li:nth-child(3).on,
    .mList li .stampImg ul >li:nth-child(8).on{background-size: 57%;}
    .mList li .stampImg ul >li:nth-child(4).on,
    .mList li .stampImg ul >li:nth-child(9).on{background-size: 50%;}
    .mList li .stampImg ul >li:nth-child(5).on,
    .mList li .stampImg ul >li:nth-child(10).on{background-size: 50%;}
}

header { padding: 10px 16px;}
.noLogin {position: relative;}

.qrCode{ text-align: center}
.qrCode .tit {display: block; margin-bottom: 11px; font-size: 20px; font-weight: 700; color: #55ADAC;}
.qrCode .cnt {font-size: 18px; line-height: 1.5; color: #656565; letter-spacing: -0.5px;}
.qrCode .qrImg {margin: 16px auto 0; width: 160px;height: 168px;}
.qrCode .qrImg .qrColor {color: #9A9A9A;}
.qrCode .qrImg.noQr img {margin-top: 15px; width: 117px;}
.qrCode .qrImg.noQr p {margin-top: 20px; font-size: 14px; font-weight: 700; color: #656565;}
.qrCode .qrImg img {width: 100%; max-height: 100%; text-align: center;}
.qrCode .plus {margin: 8px auto 0; position: relative;}
.qrCode .plus > p {font-size: 0.95rem; font-weight: 700; line-height: 2; margin-bottom: 45px;}
.qrCode .plus > p span {display: inline-block; font-weight: bold;font-size: 1.35rem;color: #55ADAC;position: relative; vertical-align: middle;}
.qrCode .plus > p .minusPlus {display: inline-block; margin: 0 4px;/*vertical-align: middle;*/}
.qrCode .plus > p .minusPlus > img {width: 24px;height: 24px;image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;-ms-interpolation-mode: nearest-neighbor;image-rendering: crisp-edges;}
.mainSec {position: relative; margin-top: 48px;}

.cooperationList {margin-top: 16px; margin-bottom:30px; padding:0;}
.cooperationList li {float: left;width: 33.3%;text-align: center; height: 52px; line-height: 52px;}
.cooperationList li img {image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering:
-webkit-optimize-contrast;-ms-interpolation-mode: nearest-neighbor;image-rendering: crisp-edges; width: 100%;}
.myCupInfo {margin-top: 24px;}
.myCupInfo li {position: relative; float: left; width: 50%; line-height: 0.5; }
.myCupInfo li:not(:last-child):after {content: '';width: 1px; height: 56px;background: #ccc;position: absolute;right: 0;top: 18px;}
.myCupInfo li p {color: #444;font-size: 20px; text-align: center;font-weight: 500;}
.myCupInfo li p.cupCount {margin-top: 20px; font-size: 40px; font-weight: 700; color: #333;}

/* 홈 팝업 */
.popup-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; 
        justify-content: center; align-items: center;  z-index: 3000;}
.popup-content {background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.popup-content p {margin:0;padding:0;}
.popup-content p img {width: 302px; height: 348px;}
.popForm {height:34px; line-height: 34px;}
.popForm .close2 {float:right; padding-right:10px; margin-top:-1px;}
.popupCloseBtn {width: 80px; height: 30px; background: #efefef; border:1px solid #ccc; font-size: 13px; color:#333; font-weight: 600;}

.qrImg {position: relative;}
.showTxt {display: block;}
.noCupQr {filter: opacity(0.1);}
.qrTxt {position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%,-50%); padding: 4px 0; width: calc( 100% - 32px );
        font-weight: 900; /* background: #55ADAC; */ color: #fff; font-size: 14px;}

/* 슬라이드 배너 */
.swiperWrap {margin-bottom:24px;}
.swiper-slide img {display: block; width: 100%; /* height: 310px; */ height: 100%; object-fit: cover;}

/* 사업자 정보 */
.companyLogo {margin: 40px 0; text-align: center;}
.companyInfo {margin-top:40px;}
.companyInfo ul li {padding:10px 20px; font-size:16px; font-weight:400; border-bottom: 1px solid #ccc;}
.companyInfo ul li span {font-weight:600;}

/* footer */ 
.footer_navi {background-color: #fff;
padding: 8px 0; position: fixed;
transform: translateZ(0);
will-change: transform;
-webkit-transform: translateZ(0);
bottom: 0; left: 0; width: 100%;
text-align: center; font-size:0.75rem; border-top:1px solid #ececec; z-index:100;}
.footer_navi ul {display: flex; justify-content: space-between; align-items: flex-start;}
.footer_navi ul li a {color: #333; text-decoration: none;}
.footer_navi ul li img {display:block; width:34px; height:34px;}
.footer_navi ul li span {display:block; margin-top:-5px;}
.footer_navi ul li span.on {color:#55ADAC;}
.footer_navi ul li:first-child {margin-left:20px;}
.footer_navi ul li:last-child {margin-right:20px;}

/* My page */ 
#myPage {position: relative;}
.closeBtn {position: absolute; right: 20px; top: 20px;}
.loginBtnMyPage {width: 80px; height: 28px; background: #55ADAC; border-radius: 32px; padding-left: 17px;}
.loginBtnMyPage svg {margin-top:2px; padding-right : 4px;}
.loginBtnMyPage p {font-size: 12px; color: #FFFFFF;}
.myPageTopGreenBar {position: relative; width : 100%; height: 72px; background: #489190;}
.logoutBtn {width: 88px; height: 28px; background: #55ADAC; border: 0; border-radius: 32px; padding-left: 17px; 
        position: absolute; top: 50%; left: 16px; transform: translateY(-50%);}
.logoutBtn svg {margin-top: 5px; vertical-align: middle; padding-right : 4px;}
.logoutBtn p {font-weight: bold; font-size: 12px; color: #FFFFFF; margin-top: 3px;}
.myPageProfileContainer {position: relative; border-radius: 8px 8px 0px 0px; text-align : center; background: #FFFFFF;}
.myPageProfileContainer .profileImg {overflow: hidden; position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
        width: 80px; height : 80px; border-radius: 70%; background-color: #DBF4EC;}
.myPageProfileContainer  .profileImg img {height: 100%;}
.myPageProfileContainer .userInfo {margin-top: 50px;}
.changNickNameBtn {width: 90px; height: 24px; background: #FFFFFF; border: 1px solid #EDEDED; box-sizing: border-box;
        border-radius: 32px; font-size: 16px; text-align: center; color: #55ADAC; position: absolute; top: 5px; right: 20px; line-height: 0;}    
.myPageProfileContainer p {margin-top : 10px; font-weight: bold; font-size: 22px; color: #333333;}
.myPageProfilePhoneNum {font-weight: bold !important; font-size: 14px !important; color: #656565 !important;}
.myPageLoginBtn {margin-top : 10px; display: inline-flex;}
.myPageLoginBtn p {margin-right : 5px; font-weight: bold; font-size: 14px; color: #55ADAC;}
.myPageContentsContainer{ width : 90%; margin: 0 auto;}
.myPageEcupStatusFalse {margin-top : 16px; width: 100%; height: 40px; background: #EDEDED; border-radius: 2px; text-align: center;}
.myPageEcupStatusFalse p {width :100%; padding-top: 10px; font-weight: bold; font-size: 14px; color: #656565;}
.myPageEcupStatusTrue {margin-top: 14px; padding: 4px 0; width: 100%; border: 1px solid #55ADAC; border-radius: 2px;}
.myPageEcupStatusTrue span {position: relative; padding-left: 50px; font-weight: 700; color: #55ADAC;}
.myPageEcupStatusTrue span::before {content: ''; display: inline-block; background: url('../images/co2.png'); width: 48px; height: 30px;
        position: absolute; top: 50%; transform: translateY(-53%); left: 0; background-size: contain;}
.myPageEcupStatusTrue p {font-weight: bold; font-size: 18px; text-align: center; color: #656565;}
.myPageMenu {margin-top : 10px;}
.myPageMenuRow {padding : 15px 0 5px 5px; border-bottom : 1px solid #E9E9E9;}
.myPageMenuRow img {width: 40px; margin-right : 8px; image-rendering: -webkit-optimize-contrast;}
.myPageMenuRow img.iconsize1 {width:20px; margin-top:13px;}
.myPageMenuRow img.iconsize2 {width:20px; margin-top:10px;}
.myPageMenuRow img.iconsize3 {width:20px; margin-top:16px;}
.myPageMenuRow p {font-weight: bold; font-size: 20px; color: #55ADAC;margin-top : 8px;}
.myPageMenuRow svg {margin-top : 16px;}
.myPageMenuRow:last-child {border-bottom : 0px;}
.myPageMenuRow:last-child svg {margin-top : 15px;}
.lastMenuP {display: table-cell;}
.menuClickPTag {font-weight: normal !important; font-size: 12px !important; color: #333333 !important;}
.myPageTopGrayBar {width :100%; height :8px; margin-top : 8px; background: #F5F5F5;}
.myPageInformationContainer {width : 90%; margin: 0 auto;}
.myPageInformationRow {padding: 15px 5px;}
.myPageInformationRow img {margin-right : 8px; width: 24px; image-rendering: -webkit-optimize-contrast;}
.myPageInformationRow p {margin-top: 0; font-weight: bold; font-size: 18px; color: #333333;}
.myPageInformationRow svg {margin-top: 5px;}
.myPageDelete {width :90%; margin : 0 auto;}
.myPageDelete div {padding : 18px; color : #656565;}
.nickNameTxt {line-height: 28.49px;}
.delMember {font-weight: 600; line-height: 1.5;}
.delMember span {font-weight: bold; color: #55ADAC;}
.delMemberInner input[type="text"]:last-child {margin-top: 10px;}
.delMemberInner .txtS2 {text-align: left;}    
@media (max-width:330px) {
        .myPageEcupStatusTrue p {font-size: 11px;}
        .myPageEcupStatusTrue p span {font-size: 11px;}
}

/* 이용약관 */
.termContainer { width : 90%; margin: 0 auto; padding-bottom:30px;}
.termContainer p {margin-top: 32px;}
.termContainer table p {margin-top: 0;}
.termTitleGreen {color: #148B64;}
.boldTitle {font-weight : 800;}
.termContents {margin-top : 15px; width:100%; height: 165px; padding: 0 17px 0 17px; background: #FFFFFF;
    border: 1px dashed #E3E3E3; box-sizing: border-box; border-radius: 5px; overflow-y: scroll; line-height: 20px;}
.topClose {margin-top:-36px;}

/* 회원가입 */ 
#joinForm {margin-top:0; position: relative; height: 100%; max-height: none;}
#joinForm .txtS2 span.icon img {transform: translateY(-8px);}
.joinFormContainer {padding-bottom : 70px;}
.joinFormTitle {margin-top:35px; font-size: 18px; line-height: 150%; font-weight: bold; letter-spacing: 0.01em; color: #333333;}
.joinForm {width : 90%; margin: 0 auto; margin-bottom:60px;}
.joinForm label {margin-top : 24px; font-size: 18px; font-weight: 700;}
.joinFormComment {margin-top : 10px; font-size: 12px; line-height: 150%; color: #656565;}
.joinFormComment.error {font-size: 12px; color: #F23939;}
.btnGender {width: 49%; margin-right: 3px; /* width : calc(50% - 2px)*/}
.btnGender:last-child {margin-right: 0;/* width : calc(50% - 2px)*/}
.joinFormBtnContainer {margin-top:10px;}
.joinFormBtnContainer select.city {width: 49%; margin-right: 1%;}
.joinFormBtnContainer select.city option {background:#fff !important;}
.joinFormBtnContainer select.area {width: 48.6%;}
.txtS {position: relative; width: 100%; margin-bottom: 0px !important; padding-bottom: 0px !important;}
.txtS input {display: block;font-size: 16px;padding: 16px; background: #FFFFFF;border:0;}
.txtS input:focus {outline:0;}
.txtS label span {font-size: 16px; color: #148B64;}
.txtS2 {position: relative;}
.txtS2 input {padding: 16px 70px 16px 16px; width: calc(100% - 90px); font-size:16px; color:#222; border: 1px solid #E3E3E3;border-radius: 2px;}
.txtS2 input:focus {outline:2px solid #55ADAC;}
.txtS2 span.icon img {position: absolute;right: 16px;top: 50%;transform: translateY(-40%); width: auto; height: auto;}
.joinFormCheckboxContainer {margin-top : 24px;}
.joinFormCheckboxContainer:first-child {margin-top : 0px;}
.joinFormCheckboxContainer p.error {color : #F23939;}
.joinFormCheckboxContainer p {color : #333333; font-size: 16px; font-weight: bold; margin-top: 2px;}
.joinFormCheckboxContainer .floatR {margin-top: 6px;}
.joinFormCheckbox {margin-right : 10.5px;}
.lookTerms {border-bottom: 1px solid;}
.joinFormLine {margin-top: 24px; border: 1px solid #F2F2F2;}
.areaTxt {display: none;}
.areaError {display: block; color: #F23939;}
.nextBtn {position: fixed; right : 0; left:0; bottom:0; width:100%; height :50px; background: #55ADAC; font-weight: bold;
    font-size: 18px; text-align: center; color: #FFFFFF; border:0;}
@media (max-width : 320px) { .joinFormCheckboxContainer p {font-size : 12px;} }

/* 회원탈퇴 */
.withdraw {width : 90%; margin: 0 auto; margin-bottom:60px;}
.withdrawTitle {margin-top:35px; font-size: 20px; line-height: 150%; font-weight: bold; letter-spacing: 0.01em; color: #333333;}
.withdrawTitle span {font-size: 20px; color: #55ADAC;}
.withdraw ul li span::before {content: ''; display: inline-block; width: 6px; height: 10px; margin-right: 8px; background: url('../images/more.png'); vertical-align: middle;}
.withdraw ul > li {margin-bottom: 24px; font-size:16px;}

/* etc */
h1 {font-size: 18px; font-weight: 900; line-height:1;}
h2, h3, h4 {font-size: 18px; font-weight: 600; color:#333; margin-top:40px;}
.line {width: 100%; height: 8px; background-color: #f5f5f5;}

/* 매장명 검색 */ 
.search input{padding-right: 94px;}
.search span.icon{display: inline-block;position: absolute;right: 17px;top: 50%;transform: translateY(-29%);width: 17px;height: 16px;background-image: url(../images/search.png); background-repeat: no-repeat;background-position: 94% 50%;}
.search input + span.icon.reset {display: inline-block;position: absolute;right: 17px;top: 50%;transform: translateY(-29%);width: 50px;height: 16px;background-image: url(../images/resetIcon.png); background-repeat: no-repeat;background-position:4.5% 50%;}
.search input + span.icon.searchicon {display: inline-block;position: absolute;right: 17px;top: 50%;transform: translateY(-29%);width: 50px;height: 16px;background-image: url(../images/search.png); background-repeat: no-repeat;background-position:97% 50%;}
.search input.searchArea {display: block;font-size: 18px;padding: 16px; color:#222; background: #FFFFFF;border: 1px solid #ccc;border-radius: 2px; width:90%;}
.search input.searchArea:focus {border:1px solid #55ADAC;}

/* 현위치 검색 */
.tabStyle1 {margin-top : 16px;display:flex;text-align: center;font-size: 20px;color: #333;border-bottom: 1px solid #999;}
.tabStyle1 div{position: relative; padding-bottom: 8px;width : 33.33%;}
.tabStyle1 div.on{font-weight: 700;  color: #55ADAC;}
.tabStyle1 div.on::after{content:''; background-color: #55ADAC;border-bottom: 2px solid #55ADAC; width: 100%;height: 1px;position: absolute;left: 0;bottom: 0;}
#nowLocation .btn1{position: relative;background : #FFF}
#nowLocation .btn1 input {width: 100%; height: 100%; border:0; background-color: #55ADAC; color:  inherit; font-size: inherit; font-weight: 700; line-height: 1;}
#nowLocation .btn1::before{content: ''; width: 20px; height: 20px; position: absolute; top: 14px; left: 15%; background:url(../images/locationsearchIcon.png)no-repeat;background-color: #55ADAC; }
.searchPage .container {margin: 0 auto 0;padding: 10px 16px 16px;}
.mapArea {margin-bottom: 8px; width: 100%; height: 248px; background:#efefef;}
.SearchAreaWrap {height:100%; padding-bottom: 160px; /*padding-bottom: 76px;*/}
.SearchAreaWrap .con2 {display: flex;} 
.storeListWrap {width:90%; margin:0 auto; }
.storeListWrap p {font-size: 20px; margin-top: 6px;}
.storeList {height: 100%;}
.storeList li:first-child{border-top: 0}
.storeList .selected {outline: 2px solid #55ADAC; outline-offset : 7px; margin-bottom : 10px ;}
.storeList li{border-top: 1px solid #e9e9e9;}
.storeList li {display: inline-block; position: relative; padding: 16px 0; width: 100%; height: 100%;}
.storeList li span.tit{font-size: 20px; font-weight: 700; color: #55ADAC;}
.storeList li .tel{margin-top: 8px; font-size: 16px; font-weight: 700; color: #333;}
.storeList li .addr{margin-top: 4px; font-size: 16px; font-weight: 400; color: #656565; width: 90%; line-height: 1;}
.storeList li .arrow{position: absolute;right: 18px;top: 50%;transform: translateY(-50%);}
.storeList li .arrow img{width: 11px;}
.storeList li .rewardImg {margin-right: 6px; width: 24px; height: 24px; vertical-align: middle;}
.nodata {padding: 56px 0; text-align: center;}
.nodata p {font-size: 18px;}

/* 토글버튼 */
.rewardToggleWrap {float:right; margin-right:16px;}
.rewardToggleArea {display: flex; align-items: center;  justify-content: center;}
.rewardToggleArea span {font-size: 20px;}
#switch {appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.switch_label {position: relative; cursor: pointer; display: inline-block; width: 58px; height: 28px; background: #fff;
        border: 2px solid #55ADAC; border-radius: 20px; transition: 0.2s;}
.switch_label:active {background: #efefef;}
.onf_btn {position: absolute; top: 4px; left: 3px; display: inline-block; width: 20px; height: 20px; border-radius: 20px;
        background: #55ADAC; transition: 0.2s;}
#switch:checked+.switch_label {background: #55ADAC; border: 2px solid #55ADAC;}
#switch:checked+.switch_label:active {background: #55ADAC;}
#switch:checked+.switch_label .onf_btn {left: 34px; background: #fff; }

/* 추천 매장 */
/*.listS1 {margin-top: 30px;}*/
.listS1 li {margin-bottom: 20px; width: 100%;height: auto;}
.listS1 li::after {content: ''; display: block; clear: both;}
.listS1 li > .storeImg {float:left; position: relative; width: 30.48%; height: 26vw; border-radius: 5px;}
.listS1 li > .storeImg img {width: 100%; aspect-ratio: 1; border-radius: 5px; background-position: center center; background-size: contain;}
.listS1 li > .storeCnt {float:left;margin-left: 4%;width: calc(100% - 34.48%);}
.listS1 li > .storeCnt .cafe_title {display: flex; justify-content: space-between; /*margin-top:-5px;*/}
.listS1 li > .storeCnt .cafe_title > .iconlist {display: flex; justify-content: flex-start; /*margin-top: 16px;*/}
.listS1 li > .storeCnt .cafe_title > .iconlist > li {width: 24px; height: 24px; margin-bottom:0;}
.listS1 li > .storeCnt .cafe_title > .iconlist > li > img {width: 100%;}
.listS1 li > .storeCnt .cafe_title p.storeNm { float: left; margin-top: 0; margin-bottom:5px; font-size: 16px; font-weight: 700; color: #55ADAC;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 83%;}
.listS1 li > .storeCnt  span.haveCoupon {float: left; margin-top: 8px; background: url('../images/couponIcon.png'); width: 12px; height: 14px; margin-left: 5px;}
.listS1 li > .storeCnt > p.storeIntfo {font-size: 14px; /*font-weight: 700;*/ color: #787878; line-height: 1; margin-top: 0;}
.listS1 li > .storeCnt > p.storeIntfo .recommedIcon {display: inline-block; margin-right: 5px; vertical-align: middle; width: 12px; height: 14px; background:url('../images/recomentHeart.png')no-repeat;background-size: contain;}
.listS1 li > .storeCnt > p.storeExplan {font-size: 14px; font-weight: 400; color: #656565; line-height: 1.2; margin-top: 0; letter-spacing: -0.4px;/*max-height: 115px;*/display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 2;}
.listS1 li > .storeCnt > p.storeExplan span {color:#55ADAC; float:right;}
.listS1 li > .storeImg > img {width: 100%; height: 100%; border-radius: 5px;}
.listS1 li > .storeImg .img {width: 100%; height: 100%; border-radius: 5px; width: 100%;height: 100%;background-position: center center; background-size: contain;}
.listS1 li  .heart {width: 20px; height: 17px; position: absolute; bottom:6px; right: 11px; background:url('../images/heart.png')no-repeat; background-size: contain; z-index: 9;}
.listS1 li  .heart.on {background:url('../images/heartOn.png')no-repeat; background-size: contain;}

/* 매장 상세 */
.carousel {width: 100%; overflow: hidden;}
.carousel-item {width: 100%; aspect-ratio: 4/3;}
.carousel-image {width: 100%; height: 100%; object-fit: cover;}

.storeNm2 {margin-top: 24px;}
.storeNm2 span{position: relative; display: block;font-size: 24px; font-weight: 700;line-height: 25px;color: #55ADAC; max-width: 93%;}
.storeNm2 span.haveCoupon::after{content: ''; background: url('../images/couponIcon.png'); background-size: contain; width: 14px; height: 14px; display: inline-block; position: absolute;top: 2px;right: -6%;}
.storeNm2 p.aroundMy {font-size: 14px; font-weight: 700; color: #787878; line-height: 14.06px; margin-top: 10px;}
.basicInfo {display: none}
.basicInfo.on {display: block}
.storeOperation {margin-top: 16px;}
.storeOperation li {position: relative;margin-bottom: 8px;}
.storeOperation li.hourInner {position: relative;}
.storeOperation li.hourInner::before {position: absolute;top: 0;left: 0;}
.storeOperation li p {display: inline-block; font-size: 14px; color: #333;}
.storeOperation li p.hour {display: block; margin-left: 33px;line-height: 1.4;}
.storeOperation li.tel::before {content: ''; width:24px; height: 24px;display:inline-block;  margin-right: 8px; background: url('../images/storeDetailIcon.png')no-repeat; background-size: contain; vertical-align: middle; margin-top:-5px;}
.storeOperation li.hourInner::before { width:24px; height: 24px; display:inline-block;margin-right: 8px; background: url('../images/storeDetailIcon2.png')no-repeat;background-size: contain; vertical-align: top;}
.storeOperation li.message { display: flex;}
.storeOperation li.message img { width:24px; height: 24px; margin-right : 6px;}
.storeOperation li.message p { width: calc(100% - 24px); margin-top : 3px;}
.storeOperation li:last-child p {width: 86%; line-height: 1.2}
.linePosition {margin: 24px 0; height: 5px;background-color: #F5F5F5;}
.storeOperation li.reward_area1::before {content: ''; width:24px; height: 24px;display:inline-block;  margin-right: 8px; background: url('../images/reward_icon.png')no-repeat; background-size: contain; vertical-align: middle; margin-top:-6px;}
.storeOperation li.reward_area2::before {content: ''; width:24px; height: 24px;display:inline-block;  margin-right: 8px; background: url('../images/storeDetailIcon6.png')no-repeat; background-size: contain; vertical-align: middle; margin-top:-6px;}
.storeOperation .storeOperation .instar_area img {margin-right: 6px; width: 24px; height: 24px;}
.storeOperation li.address::before {content: ''; width:24px; height: 24px;display:inline-block; margin-top:17px; margin-right: 8px; background: url('../images/icon1.png')no-repeat; background-size: contain; vertical-align: top;}
.storeOperation li.address img { width:18px; height: 18px; margin-top:5px; margin-left : 6px; vertical-align: bottom; opacity: 0.5;}
.mapArea2 {margin-bottom: 8px; width: 100%; height: 348px; background:#efefef;}

#storeDetail .tabStyle1 div {position: relative; padding-bottom: 8px;width : 50%;}
#storeDetail .tabStyle1 div.on::after {content:''; background-color: #55ADAC;border-bottom: 2px solid #55ADAC; width: 100%;height: 1px;position: absolute;left: 0;bottom: 0;}
.basicTit {margin-bottom: 14px; font-size: 1rem; font-weight: 700; color: #4c5753; }
.menu li {position:relative;  margin-top: 10px;}
.menu li::after {content: ''; display: block; clear: both;}
.menu li.havePhoto {padding: 16px 0;border-bottom: 1px solid #e9e9e9;}
.menu li .title {float: left; width: 80%; font-size: 0.875rem; font-weight: 700; letter-spacing: -1.2px;}
.menu li .title.hot {color: #55ADAC;}
.menu li .cost {float: right;font-size: 0.75rem; font-weight: 400; line-height:14px}
.menu li .expInner {float: left; width: calc(100% - 45.63%); margin-right: 4.87%;}
.menu li .expInner .title {float: none; width: 100%}
.menu li .expInner .exp {margin-top: 7px; font-size: 0.75rem; font-weight: 400; color:#787878; line-height: 1.4;}
.menu li .expInner .cost {float: none;margin-top: 10%; font-weight: 600; position: absolute;bottom: 16px;}
.menu li .imgInner {float: right; width: calc(100% - 59.63%); height: 36vw;border-radius: 5px;}    
.menu li .imgInner .img {width: 100%; height: 100%; background-position: center center; background-size: contain;border-radius: 5px;}
.storeExp::before {content: ''; display: inline-block; width: 24px; height: 24px; background: url('../images/storeDetailIcon5.png')no-repeat; background-size: contain; vertical-align: top;}
.storeExp p{display: inline-block; width: 90%;font-size: 0.75rem; font-weight: 400; line-height: 1.4;}
.store_pic_slider {margin-top:16px; height:90vw}
.store_pic_slider img {width: 100%; height: 100%; object-fit: cover;}

/* 공지사항 */
.announceNav {margin-top : 30px; display:flex; text-align: center; font-size: 20px; color: #333; border-bottom: 1px solid #999;}
.announceNav div {padding-bottom: 8px; width : 50%;}
.announceNav div.on {position: relative; font-weight: 700; color: #55ADAC;}
.announceNav div.on::after {content: ''; position: absolute; bottom: -1px; left: 0; right: 0; color: #55ADAC; height: 3px; width: 100%; background: #55ADAC;}
.announceContents {margin-top : 8px; padding-bottom: 20px; /*display:none;*/}
.announceContents > div {margin-top : 16px; border-bottom: 1px solid #E9E9E9;}
.announceTitle {font-weight: bold; font-size: 18px; line-height: 150%; letter-spacing: 0.02em; color: #333333;}
.announceDate {margin-top : 16px; margin-bottom : 17px; font-size: 16px; color: #656565;}
.announceDetail {margin-top : 8px;}
.announceDetail div:first-child {margin-top : 16px; border-bottom: 1px solid #E9E9E9;}
.announceDetailTitle {font-weight: bold; font-size: 18px; line-height: 150%; letter-spacing: 0.02em; color: #333333; margin-top:30px;}
.announceDetailDate {margin-top: 16px; margin-bottom : 17px; font-size: 16px; color: #656565;}
.announceDetailContent {margin-top: 16px; line-height: 1.4; font-size: 20px; color: #333333;}

/* 보증금 환불, 단체 주문 */
.orderBtn {width: 100%; height: 52px; background: #55ADAC; border-radius: 2px; color: #fff; border:0; font-size: 18px; font-weight: 600;}
.orderGroupImg {margin-top: 130px; text-align:center;}
.orderGroupBold {margin-top: 24px; font-size: 20px; font-weight: 800; color: #333; line-height: 1.8; text-align:center;}
.orderGroupDec {display: block; margin-top: 8px; font-size: 16px; font-weight: 400; color: #787878;}

/* 닉네임 변경 */
.nickNameInputContainer {width : 90%; margin : 50px auto;}
.changeNmTitle {color:#55ADAC; font-size: 18px; font-weight: 700; margin-bottom: 10px;}
.nickInfo {font-size:14px; margin-top:10px;}
.nickError {color: #f55050; font-weight: 700; font-size:14px; margin-top:20px;}

/* 이용안내 */
.question {margin-top: 16px; padding-bottom:30px;}
.question h3 {font-weight: 700; font-size: 22px;}
.question h3 span {font-weight: 700; color: #55ADAC;}
.question .faqInner {margin-top: 25px; overflow-y: auto;}
.question ul > li span::before {content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px;
            background: url('../images/faqIcon.png'); vertical-align: middle;}
.question ul > li {margin-bottom: 24px; position: relative;}
.question ul > li span.faqTitle {font-size: 18px; font-weight: 700; line-height: 1.1; margin-bottom: 8px; display:inline-block;}
.question ul > li .faqContent {display: none; padding: 16px; font-size: 16px; color: #656565; background: #F7F7F7;        
            /*white-space: pre-line;*/ animation:reveal 0.3s;}
.faqTitle.on + .faqContent {display: block;}

@keyframes reveal {
        from { opacity:0; transform:translate3d(0, -5px, 0); }
        to { opacity:1; transform:translate3d(0, 0, 0); }
}    
.question .kakaoBtn {display: block; margin-top : 10px; width: 100%; height: 52px; background: #55ADAC; border-radius: 2px; color: #fff;}

/* 리워드 */
.tabStyle3 {margin-top: 30px;display:flex;text-align: center;font-size: 20px;color: #333;border-bottom: 1px solid #999;}
.tabStyle3 div {position: relative; padding-bottom: 8px;width : 50%;}
.tabStyle3 div.on {font-weight: 700;  color: #55ADAC;}
.tabStyle3 div.on::after {content:''; background-color: #55ADAC;border-bottom: 2px solid #55ADAC; width: 100%;height: 1px;position: absolute;left: 0;bottom: -3px;}
.fontCG {color:red;}
.storeCnt p.rewardImgSize {margin-top: -4px; font-size: 16px;}
.storeCnt p.rewardImgSize img {width:18px; height:18px; padding-right:5px; vertical-align: middle; margin-top:-4px;}

.innerContainer {position: relative; padding:16px 0;}
.innerContainer .userCouponWarning {font-size: 14px; color:#656565;}
.innerContainer .stampCout {position:absolute; top: 0; right:16px; font-weight: 600; font-size: 18px;}
.innerContainer .stampCout span {font-size: inherit; font-weight: inherit;color: #55ADAC;}
.innerContainer .stampImg {padding:20px 0;}
.innerContainer .stampImg ul  {display:flex; flex-wrap: wrap;  justify-content: center;}
.innerContainer .stampImg ul::after {clear: both; content: ''; display: block;}
.innerContainer .stampImg ul >li {float: left; margin: 3px; text-align: center; background: #f4f4f4; color:#5F5F5F; font-weight: 900; border-radius: 50%;width: calc((100vw - 100px) / 5);height: calc((100vw - 100px) / 5);line-height: calc((100vw - 100px) / 5);}
.innerContainer .stampImg ul >li:nth-child(5n){margin-right: 0%}
.innerContainer .stampImg ul >li.on {background-color: #93D1D8;}
.innerContainer .stampImg ul >li.on,
.innerContainer .stampImg ul >li:nth-child(6).on {background-image: url(../images/coupon1.png);background-repeat: no-repeat;font-size: 0; background-position: 50%;}
.innerContainer .stampImg ul >li:nth-child(2).on,
.innerContainer .stampImg ul >li:nth-child(7).on {background-image: url(../images/coupon2.png);background-repeat: no-repeat;font-size: 0;background-position: 50%;}
.innerContainer .stampImg ul >li:nth-child(3).on,
.innerContainer .stampImg ul >li:nth-child(8).on {background-image: url(../images/coupon3.png);background-repeat: no-repeat;font-size: 0;background-position: 50%;}
.innerContainer .stampImg ul >li:nth-child(4).on,
.innerContainer .stampImg ul >li:nth-child(9).on {background-image: url(../images/coupon4.png);background-repeat: no-repeat;font-size: 0;background-position: 50%;}
.innerContainer .stampImg ul >li:nth-child(5).on,
.innerContainer .stampImg ul >li:nth-child(10).on {background-image: url(../images/coupon5.png);background-repeat: no-repeat;font-size: 0;background-position: 50%;}
.innerContainer .couponList ul > li{margin-top: 16px; padding: 16px; box-shadow: 0px 0px 10px rgba(2, 196, 136, 0.3);border-radius: 8px;}
.innerContainer .couponList ul > li.used{padding: 16px; box-shadow: none;border: 1px solid #F4F4F4;box-sizing: border-box;}
.innerContainer .couponList ul > li::after{content: ''; display: block; clear: both;}
.innerContainer .couponList ul > li .cupImg {float: left; width: calc(100% - 89%); padding-top: 22px; text-align: center;}
.innerContainer .couponList ul > li >img {width: auto;}
.innerContainer .couponList ul > li .couponBreakdown {float: right; width: calc(100% - 21%);}
.innerContainer .couponList ul > li .couponBreakdown .title {display: block; color: #55ADAC; font-weight: 700; font-size: 18px;}
.innerContainer .couponList ul > li.used .couponBreakdown .title {color: #656565;}
.innerContainer .couponList ul > li .couponBreakdown p {font-size: 18px; font-weight: 700; color: #333; line-height: 0.5;}
.innerContainer .couponList ul > li .couponBreakdown p > span {display: block;font-size: 16px; margin-top: 14px; color:#656565; }
.innerContainer .noCoupon{text-align: center;}
.innerContainer .noCoupon p {margin-top: 16px; font-size: 18px; font-weight: 500; color: #656565; text-align: center; line-height: 1.5}
.innerContainer h2 {font-size: 18px; font-weight: 600; color:#333; line-height:0; }

/* 모달팝업 : 리워드쿠폰 */
.modalPopup {position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh;overflow-y: hidden;margin-bottom : 0px; background-color: rgba(0,0,0,0.4); z-index:3000;}
.modalArea {position:absolute; top:50%; left: 50%;transform: translate(-50%,-50%); padding:20px; width: 70%; text-align: center; background:#fff; z-index:3001; }      
.modalArea p {font-size: 22px; font-weight: 600;}
.modalArea p span.greenTxt {color: #55ADAC;}
.modalArea p.info {font-size: 18px; font-weight: 600; color:#666;}
.modalArea .qrImg {margin: 16px auto 0; width: 132px;height: 132px; border:1px solid #F2F2F2; border-radius:4px;box-sizing:border-box;}
.modalArea .qrImg .qrColor {color: #9A9A9A;}
.modalArea .qrImg.noQr img {margin-top: 15px; width: 117px;}
.modalArea .qrImg.noQr p {margin-top: 20px; font-size: 14px; font-weight: 700; color: #656565;}
.modalArea .qrImg img {width: 100%; max-height: 100%; text-align: center;}

/* E컵 사용내역 */
.ecupHistoryTitle {margin-top : 16px; font-weight: bold; font-size: 22px; color: #333333;}
.ecupHistoryTitle span {font-weight: bold; font-size: 22px; color: #55ADAC;}
.ecupHistorIconContainer {margin-top: 15px;}
.ecupHistorIconDiv {width : 48%; height: 104px; background: #FFFFFF; border: 1px solid #E3E3E3; box-sizing: border-box; border-radius: 2px; text-align: center;}
.ecupHistorIconDiv svg {margin-top : 24px;}
.ecupHistorIconDiv p {margin-top : 8px; font-size: 20px; letter-spacing: -0.02em; color: #333333;}
.redSpan {font-weight: bold; font-size: 20px; color: #E73D3D;}
.greenSpan {font-weight: bold; font-size: 20px;color: #55ADAC;}
.ecupHistoryPresentTitle {margin-top : 32px; font-weight: bold; font-size: 20px; line-height: 19px; color: #333333;}
.ecupHistoryPresent {overflow: hidden; padding : 16px 16px 0 16px; margin-top: 15px; background: #FFF; border:1px solid #e3e3e3; border-radius: 4px; transition: 0.5s;}
.ecupHistoryPresent .dateInfo {font-weight: 700; font-size: 20px; letter-spacing: 0.3px; margin-top: 4px;}    
.ecupHistoryPresent .dateInfo span {font-weight: 700; color: #55ADAC;}    
.ecupHistoryPresent.on .ecupHistoryContentContainer {display: block;}      
.ecupHistoryPresent svg {margin-top: 5px; margin-right : -10px; transition: 0.5s;}
.ecupHistoryPresent.on svg {transform: rotate(180deg);}
.ecupHistoryPresent > p {font-size: 14px; line-height: 150%; color: #333333;}
.ecupHistoryContent {margin-top : 16px;}
.ecupHistoryContent:last-child {margin-bottom: 16px;}
.ecupHistoryContentTitle {font-weight: bold; font-size: 18px; color: #333333;}
.ecupHistoryContentDue, .ecupHistoryContentDue span {margin-top: -14px; font-size: 18px;letter-spacing: -0.02em; color: #656565;}
.ecupHistoryContentDue span.hurryLetter {font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #E73D3D;}
.ecupHistoryContentDue2 {margin-top: 24px; text-align: center;}
.ecupHistoryContentDue2 > p {font-size:14px; color:#333; letter-spacing: -0.5px;}
.ecupHistoryContentDue2 > p > span {font-size:14px; font-weight:700; letter-spacing: -0.5px; color:#E73D3D;}
.ecupHistoryContentDue2 > button {width:100%; margin-top:8px; padding:12px 0; background:#55ADAC; border:0; color:#fff;
            font-weight:700; font-size:18px; z-index:90;}
.ecupHistoryContentQuantity {margin-top: -14px; font-weight: bold; font-size: 18px; color: #333333;}
.ecupHistoryContentTitlePrevious {font-weight: bold; font-size: 18px; color: #333333;}
.ecupHistoryContentDuePrevious {margin-top : -14px; font-size: 18px; letter-spacing: -0.02em; color: #55ADAC;}
.ecupHistoryContentDuePrevious.on {color: #E73D3D;}
.ecupHistoryContentDuePrevious2 {margin-top : 24px; font-size: 18px; letter-spacing: -0.02em; color: #E73D3D; text-align: center;}
.ecupHistoryContentDuePrevious2 span {margin-top : 6px; font-size: 18px; letter-spacing: -0.02em; font-weight: bold; color: #E73D3D;}    
.ecupHistoryContentDue span.on {font-size: 18px; font-weight: bold; letter-spacing: -0.02em; color: #E73D3D;}
.ecupHistoryPresent > div > p > span.on {font-size: 20px; color: #55ADAC; font-weight: bold;}

/* 보증금 충전 및 내역 */
.depositContainer {margin-top : 24px;}
.depositContainer > p {font-weight: bold; font-size: 22px; line-height: 0; margin-top: 40px; margin-bottom: 40px;}
.depositContainer > p >span {font-weight: bold; font-size: 22px; color: #55ADAC;}
.depositStatus {margin-top: 16px; text-align : center; width: 100%; height: 42px; background: #F2F2F2; border-radius: 2px;}
.depositStatus > p {padding-top : 8px; font-weight: bold; font-size: 18px; line-height: 150%; color: #333333;}
.depositStatusTxt {padding-top : 0px !important; line-height: 42px !important;}
.depositStatus > p > span {font-weight: bold; font-size: 18px; color: #55ADAC;}    
.depositAddBtn {margin-top : 18px; border: 0;}
.depositCancelBtn {margin-top : 5px; background: #7f7f7f;  border: 0;}
.depositListTitle {margin-top : 32px; font-weight: bold; font-size: 16px; color: #333333;}
.depositListContentsNoList {margin-top : 15px; width : 100%; height: 244px; background: #FFFFFF; box-sizing: border-box; border-radius: 4px; text-align: center;}
.depositListContentsNoList img {margin-top : 40px; width : 134px; height : 136px;}
.depositListContentsNoList p {margin-top: 10px; font-weight: 500; font-size: 14px; color: #656565;}
.depositListContents {margin-top: 8px; height : 48px; background: #FFFFFF; border: 1px solid #F2F2F2; box-sizing: border-box; border-radius: 4px;}
.depositListContents > div {width : 90%; margin : 0 auto;}
.depositListContents  > div > p {padding-top : 10px;}
.depositListStatusUse {margin-top : -1px; margin-right : 8px; font-weight: bold; font-size: 18px; color: #55ADAC; letter-spacing: 0.02em;}
.depositListStatusReturn {margin-top : -1px; margin-right : 8px; font-weight: bold; font-size: 18px; letter-spacing: 0.02em; color: #E73D3D !important;}
.depositListDate {margin-top : 1px; font-size: 16px; letter-spacing: -0.02em; color: #656565;}
.depositListPrice {margin-top : -1px; font-weight: bold; font-size: 18px; letter-spacing: 0.02em; color: #333333;}
.depositListPrice2 {margin-top : -1px; font-weight: bold; font-size: 18px; letter-spacing: 0.02em; color: #E73D3D;}