@charset "UTF-8";
/* @import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css); */
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
/*reset*/
* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; padding: 0; margin: 0; }

html { font-family: 'Spoqa Han Sans Neo' !important; }

body { font-family: 'Spoqa Han Sans Neo' !important; top: 0; left: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #fff; }

a { text-decoration: none; }

li { list-style: none; }

em { font-style: normal; }

ul, li, ol { list-style: none; }

img { display: block; }

.hidden { display: none; }

.data-none { text-align: center; font-size: 14px; padding: 50px 0; color: #888; margin: 100px auto; }

/*공통*/
/* popup alert 공통화 */
.popup-alert-back { display: none; width: 100%; height: 100%; background: #333; opacity: 0.6; position: fixed; top: 0; left: 0; z-index: 101; }

.popup-alert-box { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; }

.popup-alert-box > .popup-alert-body { text-align: center; width: 300px; background: #fff; position: fixed; top: 200px; left: 0; right: 0; margin: auto; border-radius: 5px; padding: 25px 20px; }

.popup-alert-box > .popup-alert-body > p { font-size: 14px; margin: 0; }

.popup-alert-box > .popup-alert-body > .popup-alert-btn { padding: 4px 24px; margin-top: 20px; border: 1px solid #ccc; border-radius: 3px; background: #f4f4f4; }

.popup-confirm-box { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; }

.popup-confirm-box > .popup-alert-body { text-align: center; width: 300px; background: #fff; position: fixed; top: 200px; left: 0; right: 0; margin: auto; border-radius: 5px; padding: 25px 20px; }

.popup-confirm-box > .popup-alert-body > p { font-size: 14px; margin: 0; }

.popup-confirm-box > .popup-alert-body > .popup-alert-btn { padding: 4px 24px; margin-top: 20px; border: 1px solid #ccc; border-radius: 3px; background: #f4f4f4; }

/* init */
.init-wrap { width: 100%; position: relative; padding: 0 5%; box-sizing: border-box; margin-top: 167px; margin-bottom: 20px; }
.init-wrap .visual { width: 260px; margin:auto;}
.init-wrap .visual img { width: 100%; }
.init-wrap .init-btn-wrap { margin-bottom: 14px; width: 100%; }
.init-wrap .init-btn-wrap a { border-radius: 10px; display: block; width: 100%; height: 56px; display: block; font-size: 17px; font-weight: bold; letter-spacing: -0.49px; text-align: center; color: #fff; line-height: 56px; }
.init-wrap .btn-join { font-size: 15px; letter-spacing: -0.4px; text-align: center; color: #202326; width: 100%; display: block; }

/* 회원가입 */

.join-wrap { width: 100%; position: relative; padding: 0 5%; box-sizing: border-box; }
.join-wrap .join-notice { width: 100%; box-sizing: border-box; padding-left: 4px; box-sizing: border-box; margin-bottom: 36px; font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; color: #202326; }
.join-wrap .join-input { width: 100%; padding: 0px 4px; box-sizing: border-box; margin-bottom: 20px; }
.join-wrap .join-input .input-box { width: 100%; position: relative; height: 54px; border-bottom: 1px solid #dee1e4; margin-bottom: 40px; }
.join-wrap .join-input .input-box input { height: 54px; line-height: 54px; font-size: 17px; line-height: 1.53; letter-spacing: -0.37px; color: #0d0f11; width: calc(100% - 56px); padding-left: 4px; box-sizing: border-box; border: none; }
.join-wrap .join-input .input-box input:focus { outline: none; }
.join-wrap .join-input .input-box a { min-width: 50px; display: block; position: absolute; right: 0; top: 0; height: 54px; line-height: 54px; font-size: 13px; font-weight: 500; letter-spacing: -0.3px; text-align: center}
.join-wrap .join-input .input-box.confirmed a.btn-confirm { color: #37dc28; }
.join-wrap .join-bottom { width: 100%; background: #fff; margin-top: 20px; margin-top: 50px; }
.join-wrap .join-bottom .join-agreement { width: 100%; padding: 0 0 25px; box-sizing: border-box; position: relative; }
.join-wrap .join-bottom .join-agreement .flex { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; height: 46px; }
.join-wrap .join-bottom .join-agreement .flex label { display: block; position: relative; padding-left: 26px; font-size: 15px; color: #0d0f11; width: 72%; line-height: 20px; }
.join-wrap .join-bottom .join-agreement .flex label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.join-wrap .join-bottom .join-agreement .flex label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-check-off.svg") no-repeat center; }
.join-wrap .join-bottom .join-agreement .flex label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-check-on.svg") no-repeat center; }
.join-wrap .join-bottom .join-agreement .flex label input[name="agree-all"] + span { width: 20px; height: 20px; background: url("../images/btn-check-off_v2.svg") no-repeat center; }
.join-wrap .join-bottom .join-agreement .flex label input[name="agree-all"]:checked + span:after { width: 20px; height: 20px; background: url("../images/btn-check-on_v2.svg") no-repeat center; }
.join-wrap .join-bottom .join-agreement .flex .btn { display: block; width: 40px; height: 100%; background: url("../images/btn-more.svg") no-repeat right center; }
.join-wrap .join-bottom .join-btn { width: 100%; padding: 8px 0px 25px; box-sizing: border-box; }
.join-wrap .join-bottom .join-btn a { width: 100%; height: 50px; border-radius: 10px; display: block; line-height: 50px; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.join-wrap .join-bottom .join-btn a.join-submit { background-color: #cccccc; font-size: 17px; font-weight: bold; letter-spacing: -0.49px; text-align: center; color: #fff; }

.pop-policy { width: 100%; position: fixed; left: 0; top: 0; background: #fff; z-index: 100; display: none; padding-bottom: 20px; height: 100vh; box-sizing: border-box; }

.pop-policy .title { height: 56px; position: relative; }

.pop-policy .title h3 { font-weight: bold; font-size: 17px; color: #000; line-height: 56px; padding: 0 20px; }

.pop-policy .title a { width: 56px; height: 56px; position: absolute; right: 0; top: 0; display: block; background: url("../images/pop_close.svg"); }

/* .pop-policy .policy-content { padding: 0 5%; box-sizing: border-box; overflow-y: scroll; height: calc(100vh - 56px); } */

/* .pop-policy .policy-content p { font-size: 13px; line-height: 20px; color: #444; padding: 15px 10px; height: 100%; box-sizing: border-box; border-radius: 8px; height: 100%; overflow-y: scroll;} */

/* 메인 팝업 */
.popup-notice-wrap { width: 100%; margin: auto; position: fixed; display: flex; justify-content: center; align-items: center; z-index: 99999; height: 100%; background-color: rgba(13, 15, 17, 0.6); left: 0; top: -9999px; }

.popup-notice-wrap .swiper-wrapper { height: auto; }

.popup-notice-wrap .popup-notice { position: relative; width: 95%; background: #ffffff; overflow: hidden; border-radius: 12px; }

.popup-notice-wrap .swiper-slide { align-items: flex-start !important; height: auto; }

.popup-notice-wrap .popup-main-notice { text-align: center; }

.popup-notice-wrap img { width: 100%; height: auto; }

.popup-notice-wrap .popup-main-notice-btn { display: flex; justify-content: space-between; text-align: center; height: 48px; background: #fff; }

.popup-notice-wrap .popup-main-notice-btn :after { clear: both; content: ''; display: block; }

.swiper-container-vertical > .swiper-pagination-bullets { top: 10%; }

.swiper-popup-notice-pagination { text-align: center; -webkit-transition: 300ms opacity; -o-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; position: absolute; bottom: 60px; left: 0; right: 0; }

.swiper-popup-notice-pagination.swiper-pagination-hidden { opacity: 0; }

.swiper-popup-notice-pagination .swiper-pagination-bullet { margin: 0 3px; background: #000; }

.swiper-popup-notice-pagination .swiper-pagination-bullet-active { background: #fff; box-sizing: border-box; }

#btn-close { position: relative; display: block; width: 80px; height: 48px; line-height: 48px; float: left; background: #fff; text-align: center; color: #0d0f11; font-size: 15px; }

#btn-close::after { content: ''; display: block; position: absolute; }

#btn-close2 { float: left; line-height: 48px; padding-left: 46px; }

#btn-close2 { display: block; position: relative; padding-left: 46px; font-size: 15px; color: #0d0f11; line-height: 46px; }

#btn-close2 input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }

#btn-close2 input[type="checkbox"] + span { display: block; position: absolute; left: 18px; top: 14px; width: 20px; height: 20px; background: url("../images/btn-check-off.svg") no-repeat center; }

#btn-close2 input[type="checkbox"]:checked + span:after { content: ''; display: block; width: 20px; height: 20px; background: url("../images/btn-check-on.svg") no-repeat center; }

/* swiper */
.swiper-container { width: 100%; }

.swiper-slide { overflow: hidden; text-align: center; font-size: 18px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

header { width: 100%; height: 66px; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 30; background: #fff; }
header .nav { width: 30px; height: 30px; display: block; }
header .nav-left { position: absolute; left: 5%; top: 18px; }
header .nav-right { position: absolute; right: 5%; top: 18px; }
header .nav-right2 { position: absolute; right: 15%; top: 18px; }
header .btn-sidebar { background: url("../images/btn-sidebar.svg") no-repeat center; }
header .logo{ background: url("../images/logo-main.svg") no-repeat center !important; width: 128px; height: 46px; top: 10px; }
header .btn-alert { background: url("../images/btn-alert.svg") no-repeat center; }
header .btn-alert.on { background: url("../images/btn-alert-on.svg") no-repeat center; }
header .nav-back { background: url("../images/nav-back.svg") no-repeat center; }
header .nav-close { background: url("../images/nav-close.svg") no-repeat center; }
header .nav-refresh { background: url("../images/nav-refresh.svg") no-repeat center; }
header .nav-search { background: url("../images/nav-search.svg") no-repeat center; }
header .nav-cart { background: url("../images/nav-cart.svg") no-repeat center; }
header .nav-settings { background: url("../images/nav-settings.svg") no-repeat center; }
header .nav-help { background: url("../images/nav-help.svg") no-repeat center; }
header .btn-barcode { width: 30px; height: 30px; display: block; position: absolute; background: url("../images/btn-barcode.svg") no-repeat center;right: 15%; top: 18px; }
header h1.main-logo { height: 30px; position: absolute; left: 18px; top: 18px; }
header h1.main-logo img { width: 180px; height: 30px; }
header h1 { text-align: center; font-size: 18px; color: #000000; line-height: 66px; font-size: 17px; font-weight: 500; letter-spacing: -0.39px; }
header h1.left { text-align: left; text-indent: 5%; }
header h1.hide { visibility: hidden; }
header span.noti-count {position: absolute;right: 4%;top: 18px;width: 18px;height: 12px;line-height: 12px;background-color: #f73e7b;border-radius: 6px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;}
header span.cart-count { position: absolute; right: 4%; top: 18px; width: 18px; height: 12px; line-height: 12px; background-color: #f73e7b; border-radius: 6px; color: #fff; font-size: 10px; font-weight: bold; text-align: center; text-align: center; }

/* 타이틀은 .container 안에 */
h1.page-title { font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; color: #0d0f11; padding: 12px calc(5% + 4px); }
h1.page-title span { font-size: 22px; font-weight: bold; letter-spacing: -0.5px; color: #ff3750; }

.page-top { padding: 0 5%; box-sizing: border-box; }
.page-top a.link-history { box-sizing: border-box; border-radius: 15px; border: solid 1px #dee1e4; height: 30px; font-size: 13px; letter-spacing: -0.3px; line-height: 30px; position: relative; text-align: center; padding: 6px 17px 5px; }

.btn-round a.link-history { box-sizing: border-box; border-radius: 100px; border: 1px solid #dee1e4; font-size: 15px; font-weight: 500; text-align: center; color: #464b50; line-height: 30px; position: relative; text-align: center; padding: 6px 17px 5px; }

/* 라디오버튼 공통 */
label.radio-24 { height: 24px; display: block; position: relative; line-height: 24px; color: #0d0f11; }
label.radio-24 input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; }
label.radio-24 input[type="radio"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; box-sizing: border-box; transform: translateY(-50%); background: url("../images/btn-radio-off.svg") no-repeat center; }
label.radio-24 input[type="radio"]:checked + span { border: none; }
label.radio-24 input[type="radio"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-radio-on.svg") no-repeat center; }

/*container + tab ver2*/
.container { width: 100%; padding-top: 66px; /* 탭 밑줄 */ /* 탭 라운드 */ /* swiper tab 라운드 */ /* swiper tab 밑줄 */ }
.container .tab-menu { width: 100%; padding: 12px 5%; box-sizing: border-box; background: #fff; z-index: 10; }
.container .tab-menu select { width: 90px; height: 34px; border-radius: 17px; line-height: 34px; font-size: 15px; font-weight: bold; letter-spacing: -0.5px; color: #fff; text-align: center; padding-right: 10px; box-sizing: border-box; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #2e1617 url("../images/btn-dropdown-white.svg") no-repeat 95% center; background-size: 17px 17px; border: none; }
.container .tab-menu select::-ms-expand { display: none; }
.container .tab-menu > a { display: inline-block; border-radius: 18px; padding: 0 15px; height: 34px; line-height: 34px; font-size: 15px; font-weight: 500; letter-spacing: -0.5px; text-align: center; color: #464b50; border: solid 1px #dee1e4; margin-left: 6px; box-sizing: border-box; }
.container .tab-menu > a.on { background-color: #2e1617; border: none; color: #fff; }
.container .tab-menu > a.bk-main100 { border: none; color: #fff; }
.container .tab-menu > a:first-of-type { margin-left: 0; }.container .tab-menu-round { width: 100%; padding: 16px 5%; box-sizing: border-box; background: #fff; z-index: 10; height: 67px; display: flex; align-items: center; }
.gift-index .tab-menu-round {border-bottom: 1px solid #dee1e4;}
.container .tab-menu-round li { font-size: 15px; font-weight: 500; height: 35px; position: relative; line-height: 35px; border-radius: 18px; border: 1px solid #dee1e4; padding: 0px 16px; margin-right: 8px; }
.container .tab-menu-round li a { font-size: 17px; color: #64696e; }
.container .tab-menu-round li:first-child { margin-left: 0; }
.container .tab-menu-round li.on { background-color: #F17AAA; }
.container .tab-menu-round li.on a { font-weight: bold; font-weight: bold; color: #fff; }

.container .tab-menu-underline { width: 100%; padding: 12px 5% 6px; box-sizing: border-box; background: #fff; z-index: 10; height: 53px; display: flex; align-items: center; margin-bottom: 20px;}
.container .tab-menu-underline li {  width: auto; font-size: 17px; color: #0d0f11; height: 26px; margin: 0 10px; padding-bottom: 8px; position: relative; }
.container .tab-menu-underline li a { font-size: 17px; color: #0d0f11; }
.container .tab-menu-underline li:first-child { margin-left: 0; }
.container .tab-menu-underline li.on { font-weight: bold; }
.container .tab-menu-underline li.on::after { content: ''; display: block; width: 100%; height: 4px; background-color: #F17AAA; position: absolute; left: 0; bottom: 0; border-radius: 3px; }

.container .swiper-tab {  width: 100%; height: 67px; padding-top: 16px; box-sizing: border-box; background: #fff;}
.container .swiper-tab .swiper-tab-menu { width: 100%; height: 35px; box-sizing: border-box; position: relative; }
.container .swiper-tab .swiper-tab-menu li { position: relative; width: auto; text-align: center; box-sizing: border-box; background: #fff; margin-right: 8px; }
.container .swiper-tab .swiper-tab-menu li:first-of-type { margin-left: 5% !important; }
.container .swiper-tab .swiper-tab-menu li:last-of-type { margin-right: 5% !important; }
.container .swiper-tab .swiper-tab-menu li a { display: flex; border-radius: 18px; padding: 0 17px; height: 35px; line-height: 35px; font-size: 15px; font-weight: 500; letter-spacing: -0.5px; text-align: center; color: #64696e; border: solid 1px #dee1e4; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px;}
.container .swiper-tab .swiper-tab-menu li a.bk-main100 { border: none; color: #fff; }
.container .swiper-tab .swiper-tab-menu li.on a { border: none; color: #fff; background-color: #0d0f11; }
.container .swiper-tab-underline { width: 100%; padding: 12px 5% 6px; box-sizing: border-box; background: #fff; z-index: 10; height: 53px; display: flex; align-items: center; margin-bottom: 20px;}
.container .swiper-tab-underline .swiper-tab-menu li { width: auto; font-size: 17px; color: #0d0f11; height: 26px; margin: 0 10px; padding-bottom: 8px; position: relative; }
.container .swiper-tab-underline .swiper-tab-menu li a { font-size: 17px; color: #0d0f11; }
.container .swiper-tab-underline .swiper-tab-menu li:first-child { margin-left: 0; }
.container .swiper-tab-underline .swiper-tab-menu li.on { font-weight: bold; }
.container .swiper-tab-underline .swiper-tab-menu li.on::after { content: ''; display: block; width: 100%; height: 4px; background-color: #0d0f11; position: absolute; left: 0; bottom: 0; border-radius: 3px; }

.data-none { text-align: center; font-size: 13px; color: #888; padding: 25px 0; }

.divider { width: 100%; height: 8px; background: #f8fafc; margin-top: 1px; box-shadow: 0 -1px 0 0 #edf1f3; }

.list-more { width: 100%; padding: 10px 0 24px; box-sizing: border-box; }
.list-more a { display: block; width: 100%; text-align: center; border-radius: 10px; background-color: #f8fafc; box-sizing: border-box; height: 50px; font-size: 15px; font-weight: 500; line-height: 50px; letter-spacing: -0.5px; color: #464b50; }

.result-none { margin: 100px 0 100px; display: flex; justify-content: center; flex-wrap: wrap; padding: 0 5%; box-sizing: border-box; }
.result-none .img { background: url("../images/icon-result-none.svg") no-repeat center; width: 94px; height: 94px; }
.result-none p { width: 100%; text-align: center; font-size: 17px; font-weight: 500; line-height: 1.53; }
.result-none span { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; text-align: center; color: #0d0f11; }

/* 드롭다운 */
.content-top { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 12px 5%; z-index: 5; }
.content-top .available { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; }
.content-top .content-dropdown a { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; padding-left: 4px; display: flex; align-items: center; justify-content: space-between; }
.content-top .content-dropdown a .btn { width: 16px; height: 16px; background: url("../images/btn-dropdown-sm.svg") no-repeat center; margin-left: 4px; }

/* 팝업 박스 */
aside.pop-request { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; z-index: 99; display: none; }
aside.pop-request .wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
aside.pop-request .wrap .inner { width: 300px; border-radius: 12px; background: #fff; overflow: hidden; }
aside.pop-request .wrap .inner .txt { padding: 0 20px; box-sizing: border-box; margin: 40px 0 0px; text-align: center; font-size: 15px; line-height: 1.53; letter-spacing: -0.57px; color: #0d0f11; }
aside.pop-request .wrap .inner .txt h4 { font-size: 19px; line-height: 1.5; letter-spacing: -0.46px; text-align: center; margin-bottom: 8px; }
aside.pop-request .wrap .btn-wrap { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; margin: 28px 16px 16px;}
aside.pop-request .wrap .btn-wrap a { line-height: 50px; text-align: center; display: block; height: 50px; width: 50%; font-weight: bold; border-radius: 8px;}
aside.pop-request .wrap .btn-wrap a.reset { color: #462201; margin-right: 3px;}
aside.pop-request .wrap .btn-wrap a.submit { color: #fff; margin-left: 3px;}
aside.pop-request .wrap .btn-single-wrap { box-sizing: border-box; width: 100%; margin-top: 28px; }
aside.pop-request .wrap a.btn-basic { width: 100%; display: block; height: 50px; line-height: 50px; text-align: center; border-radius: 0 0 12px 12px; color: #462201; font-size: 15px; font-weight: bold; color: #fff; }

.btn-single-wrap2 { box-sizing: border-box; width: 100%; padding: 16px 5%; }
.btn-single-wrap2 a.btn-basic2 { width: 100%; display: block; height: 50px; line-height: 50px; text-align: center; border-radius: 8px; font-size: 15px; font-weight: bold; color: #fff; }

/* 높이56 */
.btn-single-wrap3 { box-sizing: border-box; width: 100%; padding: 16px 5%; }
.btn-single-wrap3 a.btn-basic3 { width: 100%; display: block; height: 56px; line-height: 56px; text-align: center; border-radius: 8px; font-size: 17px; font-weight: bold; color: #fff; }

.btn-single { box-sizing: border-box; width: 100%; }

.btn-single a.btn-basic { width: 100%; display: block; height: 56px; line-height: 56px; text-align: center; background-color: rgba(241, 122, 170, 0.12); border-radius: 10px; color: #462201; font-size: 17px; font-weight: bold; }

.btn-single a.btn-gray { width: 100%; display: block; height: 56px; line-height: 56px; text-align: center; background-color: #c9cdd1; border-radius: 10px; color: #fff; font-size: 17px; font-weight: bold; }

.pop-options { width: 100%; position: fixed; left: 0; top: 0; z-index: 80; display: none; }
.pop-options .back { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(13, 15, 17, 0.6); }
.pop-options .content { width: 100%; border-radius: 12px 12px 0 0; position: fixed; left: 0; bottom: 0; background: #fff; padding: 20px 5%; box-sizing: border-box; }
.pop-options .content .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pop-options .content .top span { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; text-indent: 8px; }
.pop-options .content .top a.close-pop-options { background: url("../images/btn-pop-close.svg") no-repeat center; width: 24px; height: 24px; display: block; }
.pop-options .content .options a { display: block; height: 50px; line-height: 50px; text-indent: 8px; font-size: 17px; letter-spacing: -0.57px; margin-bottom: 16px; }
.pop-options .content .options a:last-of-type { margin-bottom: 0; }

/* 약관 팝업 */
.pop-policy, .popup-view { width: 100%; position: fixed; left: 0; top: 0; background: #fff; z-index: 100; height: 100vh; box-sizing: border-box; display: none; }
.pop-policy .title, .popup-view .title { height: 66px; position: relative; }
.pop-policy .title h3, .popup-view .title h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.39px; text-align: center; line-height: 66px; }
.pop-policy .title a, .popup-view .title a { width: 30px; height: 30px; position: absolute; left: 5%; top: 18px; display: block; background: url("../images/nav-close.svg"); }
.pop-policy .policy-history, .popup-view .policy-history { padding: 13px 5% 25px; box-sizing: border-box; }
.pop-policy .policy-history select, .popup-view .policy-history select { width: 100%; font-size: 17px; border-radius: 8px; border: solid 1px #b4b9be; color: #0d0f11; width: 100%; display: block; height: 48px; padding: 0 12px; line-height: 48px; box-sizing: border-box; background: url("../images/btn-dropdown-24.svg") no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.pop-policy .policy-content, .popup-view .policy-content { padding: 0 5%; box-sizing: border-box; height: 100%; overflow: auto; position: absolute; left: 0; width: 100%; }
.pop-policy .policy-content p, .popup-view .policy-content p { font-size: 15px; line-height: 1.53; color: #0d0f11; padding: 4px; width: 100%; box-sizing: border-box; overflow-y: scroll; margin-bottom: 70px; }

/* sidebar */
.main-sidebar { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: scroll; background-color: #fff; z-index: 300; }
.main-sidebar .inner .user-info { width: 100%; padding: 0px 22px; background-color: #EF8BB3; box-sizing: border-box; }
.main-sidebar .inner .user-info .sidebar-header {line-height: 66px;display: flex;justify-content: space-between;    align-items: center;}
.main-sidebar .inner .user-info .sidebar-header a{font-size: 13px;color:#fff;}
.main-sidebar .inner .user-info .sidebar-user{padding: 24px 0;}
.main-sidebar .inner .user-info .sidebar-user b{font-size: 21px;line-height: 1.52; color: #fff; }
.main-sidebar .inner .user-info .sidebar-user b a{ font-size: 21px;line-height: 1.52; color: #fff; }
.main-sidebar .inner section{padding:24px 22px;box-sizing: border-box;}
.main-sidebar .inner h3{font-size: 13px;color:#464b50;font-weight: normal;padding-bottom: 8px;}
.main-sidebar .inner ul li{padding-bottom: 16px;}
.main-sidebar .inner ul li:last-child{padding-bottom:0px;}
.main-sidebar .inner ul li a{display:block;line-height: 26px;font-size: 17px;color:#0d0f11;}
.main-sidebar .inner ul.link{padding-top: 5px;}
.main-sidebar .inner ul.link li a{display:flex;align-items: center;height: 26px;padding-top: 2px;}
.main-sidebar .inner ul.link li a img{height: 24px;margin-right: 16px;}

.main-sidebar .inner .user-info .sidebar-header .flex{ height: 42px; align-items: center; position: relative; display: flex;}
.main-sidebar .inner .user-info .sidebar-header .flex span { display: inline-block; width: 25px; height: 100%; position: relative; }
.main-sidebar .inner .user-info .sidebar-header .flex span:after { clear: both; content: ''; display: block; width: 1px; height: 12px; background: #fff; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto;}

/* 팝업 바코드 */
.popup-barcode { width: 100%; position: fixed; left: 0; top: 0px; height: 100vh; z-index: 50; }
.popup-barcode .inner { width: 100%; background: #fff; z-index: 55; padding: 20px 16px 16px; border-radius: 12px; box-sizing: border-box; position: relative; }
.popup-barcode .inner .logo { width: 114px; height: 24px; background: url("../images/main-logo-barcode.svg"); margin: 0 auto 13px; }
.popup-barcode .inner span { margin-bottom: 40px; font-size: 19px; font-weight: bold; line-height: 1.53; text-align: center; color: #0d0f11; display: block; }
.popup-barcode .inner .barcode-wrap { width: 100%; margin-bottom: 30px; }
.popup-barcode .inner .barcode-wrap .barcode { margin: 0 auto 12px; text-align: center; }
.popup-barcode .inner .barcode-wrap p { font-size: 15px; line-height: 1.53; text-align: center; margin: auto; }
.popup-barcode .inner .barcode-noti { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
.popup-barcode .inner .barcode-noti .tip { width: 38px; margin-right: 8px; padding:2px 0; border-radius: 10.5px; text-align: center; font-size: 13px; font-weight: bold; letter-spacing: -0.3px; }
.popup-barcode .inner .barcode-noti .noti2 { font-size: 13px; letter-spacing: -0.3px; line-height: 20px; }
.popup-barcode .inner .btn-barcode-close{display:block;font-size: 17px;color:#0d0f11;font-weight: bold;text-align: center;line-height: 50px;border-radius: 8px;}

/* 접근권한 */
.access-wrap { width: 100%; padding: 78px 5% 28px; box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 200; background: #fff; overflow: scroll; height: 100vh; }
.access-wrap h1 { font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; margin-bottom: 12px; }
.access-wrap .notice { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; margin-bottom: 48px; }
.access-wrap .access-item { margin-bottom: 25px; }
.access-wrap .access-item h2 { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; margin-bottom: 3px; }
.access-wrap .access-item .desc { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; }
.access-wrap span { display: block; font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; margin-bottom: 14px; padding-top: 23px; }
.access-wrap .access-submit { display: block; width: 100%; height: 56px; border-radius: 10px; color: #fff; font-size: 17px; font-weight: bold; text-align: center; line-height: 56px; letter-spacing: -0.49px; }

/* 메인 알림 */
/* main push */
.main-push { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: scroll; background-color: #fff; z-index: 300; }
.main-push .nav-close { position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; display: block; background: url("../images/nav-close.svg") no-repeat center; }
.main-push .inner { width: 100%; padding: 65px 0 0px; box-sizing: border-box; }
.main-push .inner .top { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; box-sizing: border-box; }
.main-push .inner .top h2 { display: inline-block; font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; }
.main-push .inner .top a.read-all { display: inline-block; border-radius: 100px; border: solid 1px #dee1e4; width: 77px; height: 35px; line-height: 35px; font-size: 15px; font-weight: 500; color: #464b50; text-align: center; box-sizing: border-box; }
.main-push .inner ul { width: 100%; box-sizing: border-box; margin-top: 20px; }
.main-push .inner ul li { width: 100%; padding: 15px 23px 14px; box-sizing: border-box; }
.main-push .inner ul li.new { background-color: rgba(255, 55, 80, 0.12); }
.main-push .inner ul li a { display: block; }
.main-push .inner ul li a .alert-top { display: flex; align-items: center; justify-content: space-between; color: #64696e; margin-bottom: 5px; }
.main-push .inner ul li a .alert-top .category { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; }
.main-push .inner ul li a .alert-top .date { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; text-align: right; }
.main-push .inner ul li a .alert-content p { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; color: #0d0f11; max-height: 3.12em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* color */
.cl-system-red { color: #ff3750; }

.bk-system-red { background-color: #ff3750; }

.cl-system-blue { color: #0084ff; }

.bk-system-blue { background-color: #0084ff; }

.cl-system-green { color: #37dc28; }

.bk-system-green { background-color: #37dc28; }

.cl-point { color: #ff3953; }

.bk-point { background-color: #ff3953; }

.var9 { color: #0d0f11; }

.var8 { color: #202326; }

.var7 { color: #464b50; }

.var6 { color: #64696e; }

.var5 { color: #a5aaaf; }

.var4 { color: #c9cdd1; }

.var3 { color: #dee1e4; }

.var2 { color: #edf1f3; }

.var1 { color: #f8fafc; }

.var0 { color: #fff; }

.main100 { color: #F17AAA !important; }

.main90 { color: rgba(241, 122, 170, 0.9); }

.main80 { color: rgba(241, 122, 170, 0.8); }

.main70 { color: rgba(241, 122, 170, 0.7); }

.main60 { color: rgba(241, 122, 170, 0.6); }

.main50 { color: rgba(241, 122, 170, 0.5); }

.main40 { color: rgba(241, 122, 170, 0.4); }

.main30 { color: rgba(241, 122, 170, 0.3); }

.main20 { color: rgba(241, 122, 170, 0.2); }

.main12 { color: rgba(241, 122, 170, 0.12); }

.bk-main100 { background-color: #F17AAA !important; }

.bk-main90 { background-color: rgba(241, 122, 170, 0.9); }

.bk-main80 { background-color: rgba(241, 122, 170, 0.8); }

.bk-main70 { background-color: rgba(241, 122, 170, 0.7); }

.bk-main60 { background-color: rgba(241, 122, 170, 0.6); }

.bk-main50 { background-color: rgba(241, 122, 170, 0.5); }

.bk-main40 { background-color: rgba(241, 122, 170, 0.4); }

.bk-main30 { background-color: rgba(241, 122, 170, 0.3); }

.bk-main20 { background-color: rgba(241, 122, 170, 0.2); }

.bk-main12 { background-color: rgba(241, 122, 170, 0.12); }

.bk-disabled { background-color: #c9cdd1; }

.tr90 { opacity: 0.9; }

.tr80 { opacity: 0.8; }

.tr70 { opacity: 0.7; }

.tr60 { opacity: 0.6; }

.tr50 { opacity: 0.5; }

.tr40 { opacity: 0.4; }

.tr30 { opacity: 0.3; }

.tr20 { opacity: 0.2; }

.tr10 { opacity: 0.1; }

span.shadow { box-shadow: inset 0 -9px 0 rgba(0, 0, 0, 0.12); }

span.shadow-red { box-shadow: inset 0 -9px 0 rgba(255, 55, 80, 0.12); }

/* 체크박스 공통 */
label.check-24 { display: block; position: relative; color: #0d0f11; }
label.check-24 input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
label.check-24 input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; box-sizing: border-box; transform: translateY(-50%); background: url("../images/btn-check-off.svg") no-repeat center; }
label.check-24 input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-checkbox-on.svg") no-repeat center; }

/* 라디오버튼 공통 */
label.radio-24 { height: 24px; display: block; position: relative; line-height: 24px; color: #0d0f11; }
label.radio-24 input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; }
label.radio-24 input[type="radio"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; box-sizing: border-box; transform: translateY(-50%); background: url("../images/btn-radio-off.svg") no-repeat center; }
label.radio-24 input[type="radio"]:checked + span { border: none; }
label.radio-24 input[type="radio"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-radio-on.svg") no-repeat center; }

/* 섹션 공통 */
section h3.section-title { padding-left: calc(5% + 4px); margin-bottom: 8px; font-size: 17px; line-height: 1.53; color: #0d0f11; font-weight: 500; }
section .inner { width: 100%; padding: 0 5%; box-sizing: border-box; }

/* coupon_book 쿠폰 */
/* 쿠폰북 coupon_book */
.coupon-tab-menu .tab-menu li { width: auto; }

.content-dropdown { padding: 12px 5%; }

.content-dropdown a { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; padding-left: 4px; display: flex; align-items: center; }

.content-dropdown a .btn { width: 16px; height: 16px; background: url("../images/btn-dropdown-sm.svg") no-repeat center; margin-left: 4px; }

.coupon-list { width: 100%; padding: 0 5%; box-sizing: border-box; }

.coupon-list ul { width: 100%; }

.coupon-list ul li { width: 100%; box-shadow: 0 1px 0 0 #edf1f3; }

.coupon-list ul li:last-child { box-shadow: none; }

.coupon-list ul li a.wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 21px 0; }

.coupon-list ul li a.wrap .img { width: 80px; height: 80px; margin-right: 16px; box-sizing: border-box; position: relative; }

.coupon-list ul li a.wrap .img img { margin: 0 auto; height: 100%; width: 80px; border-radius: 50%; }

.coupon-list ul li a.wrap .img .d-day { position: absolute; left: 0; top: -10px; border-radius: 100px; background-color: #FCD7E4; color: #E62F88; font-size: 13px; font-weight: 500; letter-spacing: -0.43px; display: inline-block; line-height: 22px; padding: 3px 10px; white-space: nowrap; }

.coupon-list ul li a.wrap .txt { width: calc(100% - 95px); }

.coupon-list ul li a.wrap .txt .store { padding: 1px 5px; border-radius: 4px; border: solid 1px #dee1e4; display: inline-block; font-size: 10px; font-weight: bold; text-align: center; margin-bottom: 4px; }

.coupon-list ul li a.wrap .txt span { font-size: 13px; font-weight: 500; line-height: 1.54; }

.coupon-list ul li a.wrap .txt span::after { height: 10px; }

.coupon-list ul li a.wrap .txt h3 { font-size: 17px; font-weight: bold; line-height: 1.53; letter-spacing: -0.39px; margin-top: 4px; }

.coupon-list ul li a.wrap .txt p { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; }

.coupon-list ul li.used a.wrap .img::after { content: '사용완료'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }

.coupon-list ul li.end a.wrap .img::after { content: '기간만료'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }

.coupon-list ul li.canceled a.wrap .img::after { content: '발급취소'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }

.down-coupon ul li a.wrap .txt h3 { position: relative; font-size: 17px; font-weight: bold; line-height: 1.53; letter-spacing: -0.39px; margin-top: 4px; padding-right: 24px; }

.down-coupon ul li a.wrap .txt h3::after { clear: both; content: ''; display: block; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: url(../images/coupon-download.svg) no-repeat; background-size: 24px; }

.coupon-history ul li { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 21px 0; }

.coupon-history ul li .img { width: 80px; height: 80px; margin-right: 16px; box-sizing: border-box; position: relative; }

.coupon-history ul li .img img { margin: 0 auto; height: 100%; width: 80px; border-radius: 50%; }

.coupon-history ul li .img .d-day { position: absolute; left: 0; top: -10px; border-radius: 100px; background-color: #ff3750; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: -0.43px; display: inline-block; line-height: 22px; padding: 3px 10px; white-space: nowrap; }

.coupon-history ul li .txt { width: calc(100% - 95px); }

.coupon-history ul li .txt .store { padding: 1px 5px; border-radius: 4px; border: solid 1px #dee1e4; display: inline-block; font-size: 10px; font-weight: bold; text-align: center; margin-bottom: 4px; }

.coupon-history ul li .txt span { font-size: 13px; font-weight: 500; line-height: 1.54; }

.coupon-history ul li .txt span::after { height: 10px; }

.coupon-history ul li .txt h3 { font-size: 17px; font-weight: bold; line-height: 1.53; letter-spacing: -0.39px; margin-top: 4px; }

.coupon-history ul li .txt p { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; }

.coupon-history ul li.used .img::after { clear: both; content: '사용완료'; display: block; position: absolute; top: 0; left: 0; width: 80px; line-height: 80px; border-radius: 40px; background-color: rgba(0, 0, 0, 0.5); text-align: center; font-size: 13px; color: #fff; }

.coupon-history ul li.expire .img::after { clear: both; content: '기간만료'; display: block; position: absolute; top: 0; left: 0; width: 80px; line-height: 80px; border-radius: 40px; background-color: rgba(0, 0, 0, 0.5); text-align: center; font-size: 13px; color: #fff; }

.coupon-history ul li.canceled .img::after { clear: both; content: '발급취소'; display: block; position: absolute; top: 0; left: 0; width: 80px; line-height: 80px; border-radius: 40px; background-color: rgba(0, 0, 0, 0.5); text-align: center; font-size: 13px; color: #fff; }

.coupon-notice { padding: calc(5% + 4px); background: #f8fafc; box-sizing: border-box; }

.coupon-notice .title { margin-bottom: 7px; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }

.coupon-notice p { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; text-align: justify; }

.pop-coupon { width: 100%; position: fixed; height: 100vh; position: fixed; left: 0; top: 0; z-index: 40; background: #f8fafc; overflow: auto; display: none; }

.pop-coupon .pop-coupon-top {width: 100%; padding: 0px 0px 30px; box-sizing: border-box; }

.pop-coupon .pop-coupon-top .pop-coupon-header { width: 100%; height: 66px; position: relative; background: #fff;}

.pop-coupon .pop-coupon-top .pop-coupon-header a { position: absolute; left: 18px; top: 13px; background: url("../images/nav-close.svg") no-repeat center; display: block; width: 30px; height: 30px; }

.pop-coupon .pop-coupon-top .pop-coupon-header p{text-align: center;line-height: 66px;font-size: 17px;}

.pop-coupon .pop-coupon-top .inner { background: #fff; border-radius: 10px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2); padding-top: 30px; box-sizing: border-box; margin: 40px 5% 0; }

.pop-coupon .pop-coupon-top .inner .coupon-store { margin-bottom: 9px; text-align: center; }

.pop-coupon .pop-coupon-top .inner .coupon-store span { font-size: 15px; font-weight: 500; line-height: 1.33; text-align: center; }

.pop-coupon .pop-coupon-top .inner .coupon-store span::after { height: 9px; }

.pop-coupon .pop-coupon-top .inner h3 { font-size: 19px; line-height: 1.53; letter-spacing: -0.44px; text-align: center; margin-bottom: 4px; }

.pop-coupon .pop-coupon-top .inner span.exp { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; text-align: center; display: block; margin-bottom: 16px; }

.pop-coupon .pop-coupon-top .inner .img {display:flex;justify-content: center; width: 120px; height: 120px; margin: 0 auto 24px; overflow: hidden; }

.pop-coupon .pop-coupon-top .inner .img img { height: 100%; margin: 0 auto; }

.pop-coupon .pop-coupon-top .inner .coupon-divider { width: 100%; background: url("../images/icon_coupon_perforated-line.svg") no-repeat center; background-size: 100%; height: 10px; }

.pop-coupon .pop-coupon-top .inner .barcode-area { width: 100%; padding-top: 28px; padding-bottom: 36px; }

.pop-coupon .pop-coupon-top .inner .barcode-area .barcode {text-align: center; margin: 0 auto 8px; }

.pop-coupon .pop-coupon-top .inner .barcode-area p { font-size: 17px; line-height: 1.53; letter-spacing: -0.57px; text-align: center; }

.pop-coupon .pop-coupon-notice { width: 100%; padding: 20px 5%; box-sizing: border-box; background-color: #F3F0ED; }

.pop-coupon .pop-coupon-notice h4 { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; margin-bottom: 7px; }

.pop-coupon .pop-coupon-notice p { font-size: 13px; line-height: 20px; letter-spacing: normal; }

/* notice 공지사항 */
.notice-top h1 { font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; color: #0d0f11; padding-left: calc(5% + 5px); margin-bottom: 8px; }
.notice-top p.date { font-size: 15px; color: #0d0f11; line-height: 1.6; letter-spacing: -0.5px; padding-left: calc(5% + 5px); }

.notice-content { padding: 0 calc(5% + 5px); box-sizing: border-box; font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; margin: 48px 0 24px; }
.notice-content img{width: 100%;}

.notice-image { width: 100%; }
.notice-image img { width: 100%; }

.notice-list { width: 100%; padding: 0 5%; box-sizing: border-box; }
.notice-list li { width: 100%; border-bottom: 1px solid #e8ebee; padding: 20px 0; }
.notice-list li:last-child { border-bottom: none; }
.notice-list li a { display: block; width: 100%; }
.notice-list li a p { font-size: 17px; font-weight: bold; line-height: 1.53; letter-spacing: -0.39px; color: #0d0f11; margin-bottom: 4px; padding-left: 5px; max-height: 3.06em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notice-list li a span.date { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; text-indent: 5px; display: block; }

.notice-detail-wrap .notice-top h1 { font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; color: #0d0f11; padding-left: calc(5% + 5px); margin-bottom: 8px; }
.notice-detail-wrap .notice-top p.date { font-size: 15px; color: #0d0f11; line-height: 1.6; letter-spacing: -0.5px; padding-left: calc(5% + 5px); }
.notice-detail-wrap .notice-content { padding: 0 calc(5% + 5px); box-sizing: border-box; font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; margin: 36px 0 24px; }
.notice-detail-wrap .notice-image { width: 100%; }
.notice-detail-wrap .notice-image img { width: 100%; }

.event-list { width: 100%; padding: 12px 5% 0; box-sizing: border-box; }
.event-list li { width: 100%; margin-bottom: 9px; }
.event-list li:last-child { margin-bottom: none; }
.event-list li a { width: 100%; display: block; }
.event-list li a .event-img { width: 100%; min-height: 100px; border-radius: 10px; overflow: hidden; }
.event-list li a .event-img img { width: 100%; }
.event-list li a .event-txt { background: #fff; width: 100%; padding: 15px 5px 32px; box-sizing: border-box; }
.event-list li a .event-txt b { font-size: 17px; line-height: 1.53; letter-spacing: -0.39px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event-list li a .event-txt p { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; }
.event-list li.end a .event-img { position: relative; }
.event-list li.end a .event-img::after { content: '종료된 이벤트입니다'; display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(13, 15, 17, 0.6); font-size: 17px; font-weight: bold; color: #fff; align-items: center; justify-content: center; }


/* setting 더보기 */
.container.setting .setting-top { width: 100%; padding: 27px 5% 28px; box-sizing: border-box; }
.container.setting .setting-top h1 { font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; color: #0d0f11; margin-bottom: 15px; }
.container.setting .setting-top ul.setting-menu { width: 100%; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20px; }
.container.setting .setting-top ul.setting-menu li { box-sizing: border-box; width: 55px !important; }
.container.setting .setting-top ul.setting-menu li a .icon { width: 36px; height: 36px; margin: 0 auto; }
.container.setting .setting-top ul.setting-menu li a span { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; text-align: center; display: block; color: #202326; }
.container.setting .setting-top ul.setting-menu li.my-info a .icon { background: url("../images/icon-setting-myinfo.svg") no-repeat center; }
.container.setting .setting-top ul.setting-menu li.notice a .icon { background: url("../images/icon-setting-notice.svg") no-repeat center; }
.container.setting .setting-top ul.setting-menu li.help a .icon { background: url("../images/icon-setting-help.svg") no-repeat center; }
.container.setting .section-wrap { padding: 32px 5% 40px; box-sizing: border-box; }
.container.setting .section-wrap .setting-section { width: 100%; }
.container.setting .section-wrap .setting-section h2 { font-size: 17px; font-weight: 500; line-height: 1.53; letter-spacing: -0.39px; color: #0d0f11; margin-bottom: 16px; }
.container.setting .section-wrap .setting-section ul { width: 100%; display: flex; flex-wrap: wrap; }
.container.setting .section-wrap .setting-section ul li { width: 50%; margin-bottom: 16px; }
.container.setting .section-wrap .setting-section ul li a { font-size: 15px; line-height: 1.6; color: #0d0f11; letter-spacing: -0.5px; }
.container.setting .section-wrap .setting-section:first-of-type { margin-bottom: 40px; }

/* 20220208 */
/* 내정보 my info */
.info-section ul, .setting-list ul { padding: 0 5%; box-sizing: border-box; }
.info-section ul li a, .setting-list ul li a { display: block; width: 100%; height: 56px; position: relative; display: flex; justify-content: space-between; align-items: center; }
.info-section ul li a p, .setting-list ul li a p { font-size: 15px; color: #0d0f11; line-height: 56px; letter-spacing: -0.5px; text-indent: 5px; }
.info-section ul li a::after, .setting-list ul li a::after { content: ''; display: block; width: 24px; height: 24px; position: absolute; right: 0; top: 12px; background: url("../images/btn-more.svg") no-repeat center; }
.info-section ul li.switch a::after, .setting-list ul li.switch a::after { background: none; }
.info-section ul li.switch a .switch-wrap label.btn-switch, .setting-list ul li.switch a .switch-wrap label.btn-switch { position: relative; display: block; height: 16px; height: 56px; width: 45px; }
.info-section ul li.switch a .switch-wrap label.btn-switch input, .setting-list ul li.switch a .switch-wrap label.btn-switch input { opacity: 0; width: 0; height: 0; }
.info-section ul li.switch a .switch-wrap label.btn-switch input:checked + .slider, .setting-list ul li.switch a .switch-wrap label.btn-switch input:checked + .slider { background-color: #3dd73280; }
.info-section ul li.switch a .switch-wrap label.btn-switch input:checked + .slider::before, .setting-list ul li.switch a .switch-wrap label.btn-switch input:checked + .slider::before { -webkit-transform: translateX(14px); -ms-transform: translateX(14px); transform: translateX(14px); }
.info-section ul li.switch a .switch-wrap label.btn-switch input:checked + .slider::before, .setting-list ul li.switch a .switch-wrap label.btn-switch input:checked + .slider::before { background-color: #3dd732; }
.info-section ul li.switch a .switch-wrap label.btn-switch .slider, .setting-list ul li.switch a .switch-wrap label.btn-switch .slider { position: absolute; cursor: pointer; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px; width: 30px; height: 16px; }
.info-section ul li.switch a .switch-wrap label.btn-switch .slider::before, .setting-list ul li.switch a .switch-wrap label.btn-switch .slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: -2px; top: -2px; box-shadow: 0 2px 4px 0 rgba(13, 15, 17, 0.1); background-color: #edf1f3; -webkit-transition: .4s; transition: .4s; border-radius: 50%; }

/* 내정보 추가 */
.my-info ul { padding: 0 5%; box-sizing: border-box; }
.my-info ul li { width: 100%; height: 56px; display: flex; justify-content: space-between; align-items: center; }
.my-info ul li a { position: relative; display: block; width: calc(100% - 100px); line-height: 56px; color: #0d0f11; font-size: 15px; padding-right: 60px; text-align: right; box-sizing: border-box; height: 56px; }
.my-info ul li a::after { content: '변경'; display: block; width: 48px; line-height: 23px; position: absolute; right: 0; top: 15.5px; box-sizing: border-box; border: 1px solid #dee1e4; font-size: 13px; border-radius: 14px; text-align: center; color: #464b50; }
.my-info ul li p { font-size: 15px; color: #0d0f11; line-height: 56px; letter-spacing: -0.5px; text-indent: 5px; }

/* 닉네임 변경 */
.name-modify .input-wrap { position: relative; height: 58px; margin-top: 20px; }
.name-modify .input-wrap input { height: 100%; width: 100%; font-size: 17px; padding: 12px; border:none;border-bottom: 1px solid #dee1e4; padding-right: 58px; box-sizing: border-box; }
.name-modify .input-wrap input:focus { outline: none; }
.name-modify .input-wrap>span { position: absolute; right: 0; top: 17px; font-size: 15px; color: #64696e; line-height: 24px; }
#name_amount { position: absolute; right: 35px; }

/* 더보기 */
.more-wrap .swiper-area { width: 100%; box-sizing: border-box; position: relative; margin-bottom: 12px; position: relative; }
.more-wrap .swiper-area .swiper-container { width: 100%; overflow: hidden; height: auto; box-sizing: border-box; position: relative; }
.more-wrap .swiper-area .swiper-container .swiper-wrapper { width: 100%; height: auto; }
.more-wrap .swiper-area .swiper-container .swiper-wrapper .swiper-slide { width: 100%; height: auto; border-radius: 8px; overflow: hidden; }
.more-wrap .swiper-area .swiper-container .swiper-wrapper .swiper-slide a {display:block; width: 100%;}
.more-wrap .swiper-area .swiper-container .swiper-wrapper .swiper-slide a img { height: auto; width: 100%; }
.more-wrap .swiper-area img { height: auto; width: 100%; }
.more-wrap .swiper-area .swiper-pagination { text-align: center; padding: 2px 12px; border-radius: 14px; position: absolute; left: auto; right: 8px; bottom: 8px; background-color: rgba(0, 0, 0, 0.5); color: #fff; width: auto; font-size: 15px; line-height: 1.53; }
.more-wrap .swiper-area .swiper-pagination .swiper-pagination-current { font-weight: 500; }
.more-wrap .util { height: 66px; display: flex; align-items: center; margin-bottom: 24px; }
.more-wrap .util a { font-size: 13px; line-height: 1.54; color: #202326; position: relative; padding: 0 12px; }
.more-wrap .util a:first-child { padding-left: 0; }
.more-wrap .util a:first-child::after { display: block; content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.25); width: 1px; height: 12px; }
.more-wrap h3.username { font-size: 20px; line-height: 1.5; letter-spacing: -0.46px; margin-bottom: 12px; }
.more-wrap .more-list-wrap { width: 100%; padding: 24px 4px; box-sizing: border-box; }
.more-wrap .more-list-wrap h4.list-title { font-size: 13px; line-height: 1.54; color: #464b50; font-weight: normal; margin-bottom: 8px; }
.more-wrap .more-list-wrap ul.more-list li { margin-bottom: 16px; }
.more-wrap .more-list-wrap ul.more-list li a { display: block; font-size: 17px; line-height: 1.53; color: #0d0f11; }
.more-wrap .more-list-wrap ul.more-list li.flex { display: flex; align-items: center; justify-content: space-between; }
.more-wrap .more-list-wrap ul.more-list li.flex a.btn-update { display: block; width: 72px; height: 32px; border-radius: 100px; background-color: rgba(0, 132, 255, 0.12); text-align: center; line-height: 32px; font-size: 13px; font-weight: bold; color: #0084ff; }
.more-wrap .more-list-wrap ul.more-list li.flex p.version { font-size: 17px; line-height: 1.53; color: #0d0f11; }
.more-wrap .more-list-wrap ul.more-list li.flex span.version-notice { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; color: #464b50; }

/* withdrawal */
.withdrawal-wrap { box-sizing: border-box; margin: 0 auto; padding: 12px 5%; }
.withdrawal-wrap h2 { font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; margin-bottom: 11px; text-indent: 4px; }
.withdrawal-wrap .notice { font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; margin-bottom: 60px; padding-left: 4px; }
.withdrawal-wrap .remain-rewards { width: 100%; border-radius: 10px; padding: 20px 16px; box-sizing: border-box; margin-bottom: 40px; text-indent: 4px; background-color: #f8fafc; }
.withdrawal-wrap .remain-rewards .flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.withdrawal-wrap .remain-rewards .flex:last-child { margin-bottom: 0; }
.withdrawal-wrap .remain-rewards .flex h3 { font-size: 15px; line-height: 1.53; letter-spacing: -0.57px; font-weight: normal; }
.withdrawal-wrap .remain-rewards .flex p { font-size: 15px; font-weight: 500; line-height: 1.53; }
.withdrawal-wrap label { display: block; position: relative; padding-left: 26px; font-size: 15px; letter-spacing: -0.5px; line-height: 20px; width: calc(100% - 47px); box-sizing: border-box; margin-bottom: 15px; -webkit-tap-highlight-color: transparent; }
.withdrawal-wrap label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.withdrawal-wrap label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-check-off.svg") no-repeat center; }
.withdrawal-wrap label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-check-on.svg") no-repeat center; }
.withdrawal-wrap .withdrawal-submit { display: block; width: 100%; height: 56px; border-radius: 10px; color: #fff; font-size: 17px; font-weight: bold; text-align: center; line-height: 56px; margin-bottom: 10px; background-color: #c9cdd1; }

/* 스탬프 카드 */
.card-list { width: 100%; }
.card-list li { width: 100%; box-shadow: 0 1px 0 0  #e8ebee; position: relative; padding: 16px 18px 0; box-sizing: border-box; background: url("../images/stamp-list-bg.svg") no-repeat center; background-size: auto 100%; }
.card-list li a { width: 100%; height: auto; border-radius: 15px 15px 0 0; background-color: #FCD7E4; box-sizing: border-box; display: block; padding: 12px 16px; }
.card-list li a p { color: #504A46; font-size: 10px; font-style: normal; font-weight: 400; line-height: 140%; margin-bottom: 4px;}
.card-list li a .info { display: flex; align-items: center; justify-content: space-between; }
.card-list li a .info h3 { color:  #110F0D; font-size: 15px; font-style: normal; font-weight: 500; line-height: 23px; }
.card-list li a .info .count b { color: #ffffff; font-size: 17px; line-height: 1.53; }
.card-list li a .info .count span { color:  #110F0D; font-size: 15px; font-style: normal; font-weight: 500; line-height: 23px; }

/* 현금영수증 */
.cash-receipt { width: 100%; }
.cash-receipt .cash-radio input:focus { outline: none; }
.cash-check {margin-bottom: 20px;}
.cash-check label { display: block; position: relative; padding-left: 28px; width: 100%; box-sizing: border-box; font-size: 15px; line-height: 1.53; color: #0d0f11; margin-top: 10px;}
.cash-check label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.cash-check label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-checkbox-gr-off.svg") no-repeat center; }
.cash-check label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-checkbox-gr-on.svg") no-repeat center; }
.order-payment .pay-section h2.pay-list-title { padding: 0; margin-bottom: 8px; text-indent: 4px; }
.cash-receipt ul li {width: 50%!important;margin-right: 10%!important;} 
.cash-receipt-noti { background: #f8fafc; border-radius: 8px; padding: 12px 28px 12px 36px; }
.cash-receipt-noti p { position: relative; font-size: 13px; line-height: 1.54; color: #464b50; }
.cash-receipt-noti p:before { clear: both; content: ''; display: block; position: absolute; top: 0; left: -36px; width: 36px; height: 100%; background: url(../images/16-information2.svg) no-repeat top right 8px; background-size: 16px; }
.pay-section .wrap .cash-radio { width: 100%; display: flex; align-items: center; flex-wrap: wrap; }
.pay-section .wrap .cash-radio li { width: 100%; padding: 0 4px; box-sizing: border-box; }
.pay-section .wrap .cash-radio li label { padding-left: 28px; height: 42px; line-height: 42px;}

/* stamp-card 스탬프 카드 상세 */
.stamp-detail-wrap .stamp-detail { width: 100%; background: #fff; padding: 24px 0 25px; box-sizing: border-box; margin-bottom: 60px; }
.stamp-detail-wrap .stamp-detail ul::before { background-color: #FCD7E4; border-radius: 20px; content: ""; width: inherit; height: inherit; position: absolute; margin: -20px; }
.stamp-detail-wrap .stamp-detail ul { width: 330px; padding: 20px 20px; background-color: #FFFFFF; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; height: 256px; align-content: space-between;justify-content: center; gap: 4px; }
.stamp-detail-wrap .stamp-detail ul li { width: 56px; height: 72px; display: flex; align-items: center; justify-content: center; position: relative; color: #0D0F11; font-size: 13px; z-index: 1; }
.stamp-detail-wrap .stamp-detail ul li span.expire { display: none; border-radius: 6px; background-color: rgba(13, 15, 17, 0.7); position: absolute; left: 50%; top: 40px; box-sizing: border-box; z-index: 30; font-size: 13px; font-weight: 500; letter-spacing: -0.3px; text-align: center; color: #fff; width: auto; height: 42px; padding: 4px 6px; transform: translateX(-50%); }
.stamp-detail-wrap .stamp-detail ul li::before { content: ''; display: block; width: 40px; height: 40px; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%;  background-size: 50px;}
.stamp-detail-wrap .stamp-detail ul li.on::after { background: url("../images/stamp-on.svg?=v2") no-repeat center; content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; }
.stamp-detail-wrap .stamp-detail ul li.on::before { background: none; }
.stamp-detail-wrap .stamp-detail ul li:last-child::before { background: url("../images/last-stamp.svg") no-repeat center; }
.stamp-detail-wrap .stamp-notice { padding: calc(5% + 4px); background: #F3F0ED; box-sizing: border-box; }
.stamp-detail-wrap .stamp-notice .title { margin-bottom: 7px; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.stamp-detail-wrap .stamp-notice p { font-size: 13px; line-height: 1.54; letter-spacing: -0.3px; }

.stamp-history { width: 100%; background: #fff; box-sizing: border-box; }
.stamp-history ul { width: 100%; margin-bottom: 1px;}
.stamp-history ul li { width: 100%; padding: 12px 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
.stamp-history ul li:last-child { box-shadow: none; }
.stamp-history ul li .info p { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.stamp-history ul li .info span { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; }
.stamp-history ul li .count b { font-size: 17px; font-weight: bold; line-height: 1.53; letter-spacing: -0.39px; text-align: right; }
.stamp-history ul li .count span { font-size: 12px; color: #0d0f11; }
.stamp-history ul li.minus .count b { color: #64696e; }


/* 잔여 스탬프 progress bar */
.progress-wrap { padding: 16px calc(5% + 4px) 20px; box-sizing: border-box; }
.progress-wrap .stamp-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 17px; font-weight: 500; line-height: 1.53; letter-spacing: -0.39px; }
.progress-wrap .stamp-status .count .count-wrap { position: relative; display: flex; align-items: center; height: 33px; }
.progress-wrap .stamp-status .count .count-wrap span.icon { width: 16px; height: 15px; background: url("../images/stamp-star.svg?=v2") center; margin-right: 4px; }
.progress-wrap .stamp-status .count .count-wrap em { font-size: 22px; letter-spacing: -0.5px; padding-right: 4px; font-weight: bold;}
.progress-wrap .stamp-status .togo { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; }
.progress-wrap .stamp-status .togo span { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; }

.stamp-progress { width: 100%; height: 10px; box-sizing: border-box; position: relative; border-radius: 10px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1); }
.stamp-progress .bar { position: absolute; left: 0; top: 0; display: block; border-radius: 10px; height: 100%; background-color: #E62F88;}
.stamp-progress .bar.cnt1 { width: 0%; animation: cnt1 1.5s forwards; }
.stamp-progress .bar.cnt2 { width: 0%; animation: cnt2 1.5s forwards; }
.stamp-progress .bar.cnt3 { width: 0%; animation: cnt3 1.5s forwards; }
.stamp-progress .bar.cnt4 { width: 0%; animation: cnt4 1.5s forwards; }
.stamp-progress .bar.cnt5 { width: 0%; animation: cnt5 1.5s forwards; }
.stamp-progress .bar.cnt6 { width: 0%; animation: cnt6 1.5s forwards; }
.stamp-progress .bar.cnt7 { width: 0%; animation: cnt7 1.5s forwards; }
.stamp-progress .bar.cnt8 { width: 0%; animation: cnt8 1.5s forwards; }
.stamp-progress .bar.cnt9 { width: 0%; animation: cnt9 1.5s forwards; }
.stamp-progress .bar.cnt10 { width: 0%; animation: cnt10 1.5s forwards; }

@keyframes cnt1 { 0% { width: 0; }
  100% { width: 10%; } }
@keyframes cnt2 { 0% { width: 0; }
  100% { width: 20%; } }
@keyframes cnt3 { 0% { width: 0; }
  100% { width: 30%; } }
@keyframes cnt4 { 0% { width: 0; }
  100% { width: 40%; } }
@keyframes cnt5 { 0% { width: 0; }
  100% { width: 50%; } }
@keyframes cnt6 { 0% { width: 0; }
  100% { width: 60%; } }
@keyframes cnt7 { 0% { width: 0; }
  100% { width: 70%; } }
@keyframes cnt8 { 0% { width: 0; }
  100% { width: 80%; } }
@keyframes cnt9 { 0% { width: 0; }
  100% { width: 90%; } }
@keyframes cnt10 { 0% { width: 0; }
  100% { width: 100%; } }

/* 매장 리스트 store */
.store-notice { z-index: 5; padding: 0 5% 12px; width: 100%; box-sizing: border-box; height: 52px; background-color: #fff; }
.store-notice .inner { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background-color: #f8fafc; width: 100%; padding: 0 12px; box-sizing: border-box; }
.store-notice .inner p { line-height: 44px; font-size: 13px; color: #202326; box-sizing: border-box; }
.store-notice .inner .btn-refresh { width: 24px; height: 24px; background: url("../images/nav-refresh.svg") no-repeat; background-size:100%;}

.stores .store-list { width: 100%; padding: 0 5%; box-sizing: border-box; }
.stores .store-list ul { margin-bottom: 20px; }
.stores .store-list ul li { padding: 19px 0 20px; position: relative; }
.stores .store-list ul li a.list { display: flex; align-items: center; color:#222;}
.stores .store-list ul li a.list .img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin-right: 12px; position: relative; }
.stores .store-list ul li a.list .img img { height: 100%; width: 100%; }
.stores .store-list ul li a.list .txt { width: calc(100% - 96px); position: relative; }
.stores .store-list ul li a.list .txt h2 { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.stores .store-list ul li a.list .txt h2 .delivery { font-size: 13px; font-weight: 500; line-height: 1.54; color: #464b50; display: inline-block; height: 20px; padding: 0 8px; line-height: 20px; border-radius: 100px; background-color: #edf1f3; margin-left: 4px; }
.stores .store-list ul li a.list .txt p { font-size: 13px; line-height: 1.54; letter-spacing: -0.3px; color: #64696e; margin-bottom: 0px; }
.stores .store-list ul li a.list .txt p.openhours { font-size: 13px; line-height: 1.54; letter-spacing: -0.3px; color: #64696e;margin-bottom:6px;}
.stores .store-list ul li a.list .txt .dist-flex { display: flex; }
.stores .store-list ul li a.list .txt .distance { font-size: 13px; font-weight: 500; line-height: 1.54; color: #ff3750; }
.stores .store-list ul li a.list .txt .badge-tenday {display: block;width: 54px; height: 18px; margin-left: 6px;background:url("../images/badge-tenday.svg") no-repeat center;} 
.stores .store-list ul li a.bookmark { display: block; width: 24px; height: 25px; background: url("../images/icon-bookmark-off.svg") no-repeat center; position: absolute; left: 56px; top: 70px; }
.stores .store-list ul li.like a.bookmark { background: url("../images/icon-bookmark-on.svg") no-repeat center; }
.stores .store-list ul li a.bookmark.on { background: url("../images/icon-bookmark-on.svg") no-repeat center; }
.stores .store-list ul li.closed .img::after { content: '준비중'; display: block; position: absolute; left: 0; top: 0; background-color: rgba(13, 15, 17, 0.6); width: 100%; height: 100%; text-align: center; line-height: 80px; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: -0.3px; }
.stores .store-list ul li.closed .txt::after { content: ''; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.555); position: absolute; left: 0; top: 0; }

/* store_search 매장검색 */
.searchbox { width: 100%; padding: 0 5%; box-sizing: border-box; position: relative; margin-bottom: 12px; }
.searchbox .inner { position: relative; }
.searchbox .inner input[type=text] { height: 56px; width: 100%; padding-left: 45px; box-sizing: border-box; border: none; border-bottom: 2px solid #64696e; line-height: 56px; font-size: 19px; font-weight: 500; line-height: 1.53; letter-spacing: -0.44px; color: #0d0f11; }
.searchbox .inner input[type=text]:focus { outline: none; }
.searchbox .inner a.btn-search { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: url("../images/nav-search.svg"); }
.searchbox .inner a.btn-search-reset { display: none; width: 24px; height: 24px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background: url("../images/btn-delete.png") no-repeat; }

/* 매장 상세 store_detail */
.store-detail-wrap { width: 100%; position: relative; }
.store-detail-wrap a.nav-store-back { width: 40px; height: 40px; display: block; background: url("../images/nav-store-back.svg") no-repeat center; position: absolute; left: 8px; top: 13px; }
.store-detail-wrap .store-map { width: 100%; }
.store-detail-wrap .store-map .wrap { width: 100%; position: relative; }
.store-detail-wrap .store-map a.my-location { border-radius: 25px; box-shadow: 0 5px 10px 0 rgba(13, 15, 17, 0.2); background-color: #fff; width: 141px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; line-height: 42px; letter-spacing: -0.5px; text-align: center; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; }
.store-detail-wrap .store-map a.my-location span { width: 16px; height: 16px; display: block; background: url("../images/icon_store_relocation.svg") center; margin-right: 4px; }
.store-detail-wrap section.store-info { width: 100%; box-sizing: border-box; padding: 32px calc(5% + 4px) 0; }
.store-detail-wrap section.store-info .store-name { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.store-detail-wrap section.store-info .store-name h3 { font-size: 20px; letter-spacing: -0.73px; }
.store-detail-wrap section.store-info .store-name a.bookmark { width: 26px; height: 26px; display: block; background: url("../images/icon-bookmark-off.svg") no-repeat center; }
.store-detail-wrap section.store-info .store-name a.bookmark.on { background: url("../images/icon-bookmark-on.svg") no-repeat center; }
.store-detail-wrap section.store-info .list { margin-bottom: 20px; }
.store-detail-wrap section.store-info .list b { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; font-weight: normal;display:block;padding-bottom: 4px;}
.store-detail-wrap section.store-info .list div.wrap { font-size: 17px; line-height: 26px; letter-spacing: -0.57px; }
.store-detail-wrap section.store-info .list div.wrap a { font-size: 17px; line-height: 1.53; letter-spacing: -0.57px; display: flex; flex-wrap: wrap; position: relative; }
.store-detail-wrap section.store-info .list div.wrap a .txt { margin-right: 8px; border: none; width: auto; }
.store-detail-wrap section.store-info .list div.wrap a .addr-val { position: absolute; left: 0; top: 0; opacity: 0; }
.store-detail-wrap section.store-info .list div.wrap a .addr-val::focus { outline: none; }
.store-detail-wrap section.store-info .list div.wrap a span.util { display: flex; align-items: center; padding-left: 8px; position: relative; height: 26px; }
.store-detail-wrap section.store-info .list div.wrap a span.util span.icon { width: 18px; height: 18px; display: block; margin-right: 2px; }
.store-detail-wrap section.store-info .list div.wrap a span.util.copy span { background: url("../images/icon_copy.svg") center; }
.store-detail-wrap section.store-info .list div.wrap a span.util.call span { background: url("../images/icon_call.svg") center; }
.store-detail-wrap section.store-info .list div.wrap a span.util em { font-size: 15px; font-weight: 500; letter-spacing: -0.5px; line-height: 18px; }
.store-detail-wrap section.store-info .list div.wrap a span.util::before { content: ''; display: block; width: 1px; height: 8px; background-color: #dee1e4; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.store-detail-wrap section.store-info .list div.wrap .tag{display:none;border:1px solid #c9cdd1;color:#0d0f11;font-size: 15px;margin-right: 8px;margin-bottom: 5px;padding: 2px 8px;border-radius: 15px;}
.store-detail-wrap section.store-img { width: 100%; box-sizing: border-box; padding: 0 5%; margin-bottom: 20px; position: relative; }
.store-detail-wrap section.store-img .swiper-container { width: 100%; }
.store-detail-wrap section.store-img .swiper-slide { width: 100%; }
.store-detail-wrap section.store-img img { width: 100%; height: auto; }
.store-detail-wrap section.store-img .swiper-pagination { background: rgba(0, 0, 0, 0.7); height: 28px; position: absolute; bottom: 10px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 60px; border-radius: 15px; padding: 0 11px; left: auto; right: calc(5% + 10px); font-size: 15px; color: #fff; }
.store-detail-wrap section.store-img .swiper-pagination .swiper-pagination-current { font-weight: bold; }

/* 매장 선택 후 위치 확인 */
.store-confirm { width: 100%; height: 100%; position: fixed; left: 0; z-index: 9999; display: block; top: -9999px; }
.store-confirm.on { top: 0; }
.store-confirm .back { width: 100%; position: absolute; left: 0; top: 0; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: -1; }
.store-confirm .content { width: 92%; background: #fff; border-radius: 12px; padding: 15px 10px 20px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.store-confirm .content h4 { text-align: center; font-size: 20px; line-height: 1.5; letter-spacing: -0.46px; margin-bottom: 20px; }
.store-confirm .content .pop-confirm-close { width: 30px; height: 30px; background: url("../images/nav-close.svg") no-repeat center; display: block; }
.store-confirm .content .map-area { width: 100%; height: 240px; margin-bottom: 12px; }
.store-confirm .content .bottom { width: 100%; margin-bottom: 30px; }
.store-confirm .content .bottom .store-info-box {text-align: center;}
.store-confirm .content .bottom .store-info-box .store-addr {font-size: 15px;}
.store-confirm .content .bottom .store-info-box .phone-box{display: flex; justify-content: center;}
.store-confirm .content .bottom .store-info-box .phone-box .store-contact{font-size: 15px;}
.store-confirm .content .bottom .store-info-box .phone-box .shot-divider{ height: 10px; border-left: #DEE1E4 1px solid; display: flex; justify-content: center; align-items: center; margin: 4px;}
.store-confirm .content .bottom .store-info-box .phone-box .phone-icon{display: flex; color: #0084FF; font-size: 13px;}
.store-confirm .content .bottom p { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; text-align: center; }
.store-confirm .content .bottom .before-order { text-align: center; margin-top: 16px; }
.store-confirm .content .bottom .before-order span { font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.store-confirm .content .store-confirm-btn { width: 100%; height: 44px; text-align: center; color: #fff; line-height: 44px; font-size: 14px; font-weight: bold; background: #1b0d08; display: block; border-radius: 6px; }
.store-confirm .content .btn-wrap { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
.store-confirm .content .btn-wrap a { width: 49%; height: 50px; border-radius: 8px; line-height: 50px; text-align: center; font-weight: bold; }
.store-confirm .content .btn-wrap a.reset { color: #0d0f11; }
.store-confirm .content .btn-wrap a.submit { color: #fff; }
.store-confirm .content .btn-wrap a.disabled { color: #fff; background-color: #bcbcbc; }
.store-confirm .content .btn-menus { width: 100%; text-align: center; margin-top: 12px; }

.store-detail-wrap .inavi-ctrl-bottom-left,.store-confirm .content .inavi-ctrl-bottom-left{display:none;}
.store-detail-wrap .inavi-ctrl-bottom-right,.store-confirm .content .inavi-ctrl-bottom-right{display:none;}

/* 오더 상품 리스트 */
.order-wrap { width: 100%; padding: 20px 5%; box-sizing: border-box; background-color: #fff; }
ul.item-list-3 { display: flex; flex-wrap: wrap; padding-bottom: 20px;}
ul.item-list-3 li { width: calc(33.333% - 8px); margin-top: 12px; margin-bottom: 40px; margin-right:12px;}
ul.item-list-3 li:nth-child(3n+0){margin-right: 0;}
ul.item-list-3 li a { width: 100%; text-align: center; }
ul.item-list-3 li a .img {display:flex;justify-content: center; width: 100px; height: 100px; margin: auto; border-radius: 50%; background-color: #f8fafc; box-sizing: border-box; position: relative; overflow: hidden;}
ul.item-list-3 li a .img img { height: 100%; width: auto; }
ul.item-list-3 li a .txt { box-sizing: border-box; display: block; padding-top: 8px; }
ul.item-list-3 li a .txt h3 { margin-bottom: 8px; font-size: 12px; font-weight: 500; line-height: 1.6; padding: 0 5px;}
ul.item-list-3 li a .txt .badge { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
ul.item-list-3 li a .txt .badge .best { width: 35px; height: 18px; background: url("../images/img_best.svg") no-repeat; margin-right: 2px; background-size:100%;}
ul.item-list-3 li a .txt .badge .new { width: 32px; height: 18px; background: url("../images/img_new.svg") no-repeat; background-size:100%;}
ul.item-list-3 li a .txt .price { font-size: 14px; line-height: 1.53; }
ul.item-list-3 li.soldout a .img{border-radius: 50%;overflow: hidden;}
ul.item-list-3 li.soldout a .img::after { content: '품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 100px; width: 100px; color: #fff; border-radius: 50%; line-height: 100px; text-align: center; font-size: 13px; font-weight: bold; }
/*  일시 품절  */
ul.item-list-3 li.moment-soldout a .img{border-radius: 50%;overflow: hidden;}
ul.item-list-3 li.moment-soldout a .img::after { content: '일시품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 100px; width: 100px; color: #fff; border-radius: 50%; line-height: 100px; text-align: center; font-size: 13px; font-weight: bold; }

.footer { width: 100%; background-color: #f8fafc; padding: 24px 5% 41px; box-sizing: border-box; }
.footer .cs-wrap { width: 100%; margin-bottom: 30px; }
.footer .cs-wrap h4 { width: 100%; font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.footer .cs-wrap a.cs-call { font-size: 24px; font-weight: bold; display: inline-block; margin-bottom: 4px; line-height: 36px; }
.footer .cs-wrap p { margin-bottom: 30px; font-size: 13px; line-height: 1.46; }
.footer .cs-wrap .wald-info { font-size: 13px; line-height: 1.46; margin-bottom: 10px; }
.footer .footer-policy { width: 100%; text-align: center; position: relative; }
.footer .footer-policy .policy-wrap { display: flex; }
.footer .footer-policy .policy-wrap a { font-size: 13px; color: #464b50; position: relative; padding: 0 8px; float: left; }
.footer .footer-policy .policy-wrap a:first-child { padding-left: 0; }
.footer .footer-policy .policy-wrap a:first-child::before { display: none; }
.footer .footer-policy .policy-wrap a:last-child { padding-right: 0; }
.footer .footer-policy .policy-wrap a::before { content: ''; display: block; background-color: #bbb; width: 1px; height: 9px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
/* 오더 2.0 - 세로형 */
.order-location { width: 100%; background-color: rgba(13, 15, 17, 0.95); padding: 0 5%; box-sizing: border-box; position: fixed; left: 0; bottom: 0; z-index: 10; }
.order-location a { height: 56px; width: 100%; display: flex; align-items: center; }
.order-location a p { font-size: 17px; font-weight: bold; line-height: 1.53; letter-spacing: -0.49px; color: #fff; }
.order-location a span { display: block; width: 18px; height: 18px; background: url("../images/order-loc-dropdown.svg"); margin-left: 4px; }


/* 메뉴 상세 -v2 */
.order-item-detail { width: 100%; /* 옵션선택 공통 */ }
.order-item-detail .order-item { padding: 15px 5% 0px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; box-sizing: borde-box; }
.order-item-detail .order-item .img { width: 130px; height: 130px; position: relative; overflow: hidden; margin: 0 auto 16px; }
.order-item-detail .order-item .img img { height: 100%; margin: 0 auto; }
.order-item-detail .order-item .img .lg { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: url("../images/order_detail_enlg.svg"); }
.order-item-detail .order-item.soldout .img::after { content: '품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 130px; width: 130px; color: #fff; border-radius: 50%; line-height: 130px; text-align: center; font-size: 13px; font-weight: bold; }
.order-item-detail .order-item.moment-soldout .img::after { content: '일시품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 130px; width: 130px; color: #fff; border-radius: 50%; line-height: 130px; text-align: center; font-size: 13px; font-weight: bold; }
.order-item-detail .order-item h3 { width: 100%; text-align: center; margin-bottom: 8px; font-size: 17px; font-weight: 500; line-height: 1.53; }
.order-item-detail .order-item p { font-size: 13px; line-height: 1.54; text-align: center; }
.order-item-detail .opt-box { width: 100%; box-sizing: border-box; padding: 0 5%; box-sizing: border-box; }
.order-item-detail .opt-box .opt-req-wrap { width: 100%; margin-top: 32px; }
.order-item-detail .opt-box .opt-req-wrap h2 { font-size: 17px; font-weight: 500; line-height: 1.53; margin-bottom: 8px; }
.order-item-detail .opt-box .opt-req-wrap .opt-req input { position: absolute; left: 0; top: 0; visibility: hidden; }
.order-item-detail .opt-box .opt-req-wrap .opt-req input:checked + label { background-color: rgba(0, 187, 212, 0.12); color: #00bbd4; border: none; font-weight: bold; }
.order-item-detail .opt-box .opt-req-wrap .opt-req label { padding: 0px 24px; border-radius: 19px; border: solid 1px #c9cdd1; box-sizing: border-box; height: 39px; font-size: 15px; letter-spacing: -0.5px; color: #64696e; line-height: 39px; position: relative; display: inline-block; margin-right: 8px; }
.order-item-detail .opt-box .opt-req-wrap p { font-size: 13px; line-height: 1.54; letter-spacing: -0.5px; color: #000; }
.order-item-detail .opt-box .opt-req-wrap a { text-decoration: underline; font-size: 13px; line-height: 1.54; letter-spacing: -0.5px; }
.order-item-detail .opt-box .opt-personal-wrap { width: 100%; margin: 40px 0 24px; }
.order-item-detail .opt-box .opt-personal-wrap .personal-dropdown { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.order-item-detail .opt-box .opt-personal-wrap .personal-dropdown b { font-size: 17px; font-weight: 500; line-height: 1.53; color: #000; }
.order-item-detail .opt-box .opt-personal-wrap .personal-dropdown span { display: inline-block; width: 24px; height: 24px; background: url("../images/btn-dropdown-large.svg"); }
.order-item-detail .opt-box .opt-personal-wrap .personal-dropdown .btn-dropdown.rotated { transform: rotate(180deg); }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal { display: block; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio { margin-top: 24px; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio h2 { font-size: 15px; font-weight: 500; line-height: 1.53; color: #4c5054; margin-bottom: 8px; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex { display: flex; justify-content: space-between; margin-bottom: 18px; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex:last-of-type { margin-bottom: 0; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label { height: 24px; display: block; position: relative; padding-left: 28px; color: #0d0f11; width: calc(100% - 108px); font-size: 17px; line-height: 24px; color: #0d0f11; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; box-sizing: border-box; transform: translateY(-50%); background: url("../images/btn-radio-off.svg") no-repeat center; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"]:checked + span { border: none; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-radio-on.svg") no-repeat center; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex p { font-size: 15px; line-height: 20px; color: #0d0f11; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check { margin-top: 24px; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check h2 { font-size: 15px; font-weight: 500; line-height: 1.53; color: #4c5054; margin-bottom: 8px; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex { display: flex; justify-content: space-between; margin-bottom: 18px; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex:last-of-type { margin-bottom: 0; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label { height: 20px; display: block; position: relative; padding-left: 28px; color: #0d0f11; width: 100%; font-size: 17px; line-height: 20px; color: #0d0f11; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; border: 1px solid #c9cdd1; border-radius: 50%; box-sizing: border-box; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"]:checked + span { border: none; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-checkbox-on.svg") no-repeat center; }
.order-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex p { font-size: 15px; line-height: 20px; color: #0d0f11; }

/* 주문버튼 */
.order-detail-bottom { width: 100%; padding: 20px 5%; box-sizing: border-box;position:fixed;z-index:10; left:0; bottom:0;background-color:#fff;border-top: 1px solid rgba(241, 122, 170, 0.12); padding-top:12px; }
.order-detail-bottom .order-total-price { width: 100%; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0px 4px; box-sizing: border-box; height: 40px; margin-bottom: 12px; }
.order-detail-bottom .order-total-price p { font-size: 15px; line-height: 1.53; }
.order-detail-bottom .order-total-price span { font-size: 19px; font-weight: bold; line-height: 1.53; letter-spacing: -0.5px; text-align: right; color: #ff3750; }
.order-detail-bottom .order-btn-area { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
.order-detail-bottom .order-btn-area .btn-add-cart { width: 49.5%; height: 56px; box-sizing: border-box; border-radius: 8px; line-height: 56px; text-align: center; font-size: 17px; font-weight: bold; }
.order-detail-bottom .order-btn-area .btn-order-now { width: 49.5%; height: 56px; box-sizing: border-box; border-radius: 8px; line-height: 56px; text-align: center; font-size: 17px; font-weight: bold; color: #fff; }
.order-detail-bottom .order-btn-area .btn-soldout { width: 100%; height: 56px; box-sizing: border-box; border-radius: 10px; background-color: #cacdd0; color: #fff; line-height: 56px; text-align: center; border: none; font-size: 17px; font-weight: bold; }
.order-detail-bottom .order-btn-area .btn-go-order { width: 100%; height: 56px; box-sizing: border-box; border-radius: 10px; background-color: #cacdd0; color: #fff; line-height: 56px; text-align: center; border: none; font-size: 17px; font-weight: bold; }

.order-item-detail aside.pop-request .inner { padding: 32px 24px; box-sizing: border-box; }
.order-item-detail aside.pop-request .inner .title { text-align: center; margin-bottom: 30px; }
.order-item-detail aside.pop-request .inner .title h5 { font-size: 17px; font-weight: 500; line-height: 1.53; letter-spacing: -0.39px; }
.order-item-detail aside.pop-request .inner .title p { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; color: #202326; }
.order-item-detail aside.pop-request .inner .nutrition { width: 100%; }
.order-item-detail aside.pop-request .inner .nutrition .flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.order-item-detail aside.pop-request .inner .nutrition .flex p { font-size: 15px; letter-spacing: -0.5px; color: #0d0f11; }
.order-item-detail aside.pop-request .inner .nutrition .flex b { font-size: 15px; font-weight: 500; letter-spacing: -0.35px; color: #0d0f11; }
.order-item-detail aside.pop-request .inner .caffeine { margin-top: 22px; }
.order-item-detail aside.pop-request .inner .caffeine b { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.order-item-detail aside.pop-request .inner .caffeine p { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; color: #202326; }

/* amount */
.amount-box { width: 100%; padding: 15px 5%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: #fff; box-shadow: 0 1px 0 0 #dfdfdf; }
.amount-box .price { font-size: 15px; font-weight: bold; color: #0d0f11; }
.amount-box .amount { display: flex; align-items: center; justify-content: space-between; width: 120px; padding-right: 1px; }
.amount-box .amount .num-down { width: 24px; height: 24px; display: block; background: url("../images/btn-amount-min.svg"); }
.amount-box .amount .num-up { width: 24px; height: 24px; display: block; background: url("../images/btn-amount-plus.svg"); }
.amount-box .amount .num-up.off { background: url("../images/num_up_disabled.svg") no-repeat center; }

.recommend { width: 100%; margin: 24px 0 41px; }
.recommend h3 { font-size: 17px; font-weight: 500; line-height: 1.53; margin: 0 5% 20px; box-sizing: border-box; text-indent: 4px; }
.recommend .inner { width: 100%; padding: 0 5%; box-sizing: border-box; }
.recommend .inner ul { width: 100%; }
.recommend .inner ul li { width: 100%; padding: 12px 0; position: relative; }
.recommend .inner ul li label { width: 100%; display: flex; align-items: center; box-sizing: border-box; position: relative; flex-wrap: wrap; }
.recommend .inner ul li label .img { width: 80px; height: 80px; margin-right: 20px; border-radius: 50%; overflow: hidden; }
.recommend .inner ul li label .img img { height: 100%; width: auto; }
.recommend .inner ul li label .txt { width: calc(100% - 100px); padding-right: 30px; box-sizing: border-box; }
.recommend .inner ul li label .txt h4 { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.recommend .inner ul li label .txt b { font-size: 17px; line-height: 1.53; letter-spacing: -0.39px; color: #0d0f11; }
.recommend .inner ul li input[type="checkbox"] { position: absolute; left: 0; top: 0; visibility: hidden; }
.recommend .inner ul li span { width: 24px; height: 24px; border: 1px solid #c9cdd1; border-radius: 50%; box-sizing: border-box; position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 2px; }
.recommend .inner ul li input[type="checkbox"]:checked ~ span { display: block; width: 24px; height: 24px; background: url("../images/btn-checkbox-on.svg") no-repeat center; border: none; }

/* 장바구니 토스트 */
.order-add-cart { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("../images/add_cart.svg") no-repeat center;background-size:140px; width: 100%; height: 100%; display: none; z-index: 10; }

.order-add-cart.on { display: block; }

/* 장바구니 */
.order-location-top { width: 100%; padding: 16px 5%; box-sizing: border-box; line-height: 26px; background-color: #0d0f11; font-size: 17px; color: #fff; }

.order-cart .cart-list { width: 100%; }
.order-cart .cart-list .cart-title { font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; padding: 0 5%; margin-top: 20px; box-sizing: border-box; font-size: 17px; }
.order-cart .cart-list ul { width: 100%; padding: 0 5%; box-sizing: border-box; background: #fff; }
.order-cart .cart-list ul li { margin-bottom: 1px; width: 100%; padding: 24px 0; display: flex; align-items: flex-start; position: relative; background: #fff; box-sizing: border-box; box-shadow: 0 1px 0 0 #edf1f3; }
.order-cart .cart-list ul li:last-child { box-shadow: none; margin-bottom: 0; }
.order-cart .cart-list ul li .cart-list-left { width: 80px; height: 80px; margin-right: 16px; position: relative; overflow: hidden; border-radius: 50%; }
.order-cart .cart-list ul li .cart-list-left img { height: 100%; z-index: -1; margin: 0 auto; }
.order-cart .cart-list ul li .cart-list-right { width: calc(100% - 96px); position: relative; }
.order-cart .cart-list ul li .cart-list-right h4 { font-size: 13px; line-height: 1.54; width: calc(100% - 44px); }
.order-cart .cart-list ul li .cart-list-right .cart-opt { margin-bottom: 12px; }
.order-cart .cart-list ul li .cart-list-right .cart-opt p { font-size: 13px; color: #464b50; line-height: 1.62; }
.order-cart .cart-list ul li .cart-list-right .amount-box { display: flex; align-items: center; justify-content: space-between; padding: 0; box-shadow: none; }
.order-cart .cart-list ul li .cart-list-right .amount-box .amount { width: 120px; }
.order-cart .cart-list ul li .cart-delete-btn { position: absolute; top: 24px; right: 0px; width: 40px; height: 40px; background: url("../images/btn-cart-delete.svg") no-repeat right top; }
.order-cart .cart-list.sold-out { box-shadow: 0 1px 0 0 #edf1f3; }
.order-cart .cart-list.sold-out .sold-out-title { width: 100%; background: #fff; padding: 15px 5% 0; position: relative; box-sizing: border-box; }
.order-cart .cart-list.sold-out .sold-out-title b { font-size: 15px; color: #444444; }
.order-cart .cart-list.sold-out ul li .cart-list-left::after { content: '품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 80px; width: 80px; color: #fff; border-radius: 50%; line-height: 80px; text-align: center; font-size: 13px; font-weight: 500; }
.order-cart .cart-list.sold-out ul li .cart-list-right::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); display: block; content: ''; }
.order-cart .cart-notice { width: 100%; background-color: #f8fafc; height: 59px; box-shadow: 0 -1px 0 0 #edf1f3; margin-bottom: 4px; line-height: 59px; text-align: center; font-size: 13px; margin-top: 1px; }
.order-cart .total-price { width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; padding: 15px 0; box-shadow: 0 -1px 0 0 #dee1e4; }
.order-cart .total-price .price-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; box-sizing: border-box; margin-bottom: 10px; }
.order-cart .total-price h5 { font-size: 14px; font-weight: normal; color: #444; }
.order-cart .total-price b { font-size: 18px; color: #fb3b7c; }
.order-cart .total-price small { font-size: 14px; font-weight: normal; color: #fb3b7c; }
.order-cart .cart-order-btn-area { width: 100%; padding: 0px 3%; box-sizing: border-box; background: #fff; }
.order-cart .cart-order-btn-area a.cart-order-btn { display: block; width: 100%; height: 48px; background-color: #fb3b7c; text-align: center; line-height: 48px; color: #fff; border-radius: 7px; font-size: 16px; font-weight: bold; }
.order-cart .cart-order-btn-area a.cart-order-btn-unable { display: block; width: 100%; height: 48px; background-color: #c1c1c1; text-align: center; line-height: 48px; color: #fff; border-radius: 7px; font-size: 16px; font-weight: bold; }

/* 결제 payment */
.pay-list { width: 100%; margin-bottom: 9px; }
.pay-list ul { width: 100%; padding: 0 5%; box-sizing: border-box; background: #fff; }
.pay-list ul li { margin-bottom: 1px; width: 100%; padding: 15px 0; display: flex; align-items: flex-start; position: relative; background: #fff; box-sizing: border-box; box-shadow: 0 1px 0 0 #edf1f3; }
.pay-list ul li:last-child { margin-bottom: 0; box-shadow: none !important; }
.pay-list ul li .pay-list-left { width: 80px; height: 80px; margin-right: 10px; overflow: hidden; }
.pay-list ul li .pay-list-left img { height: 100%; margin: 0 auto; }
.pay-list ul li .pay-list-right { width: calc(100% - 96px); }
.pay-list ul li .pay-list-right h4 { font-size: 15px; color: #0d0f11; margin-bottom: 8px; font-weight: normal; }
.pay-list ul li .pay-list-right .cart-opt { margin-bottom: 12px; }
.pay-list ul li .pay-list-right .cart-opt p { font-size: 13px; line-height: 1.62; color: #464b50; }
.pay-list ul li .pay-list-right .cart-opt p b { font-weight: normal; }
.pay-list ul li .pay-list-right .cart-opt .flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
.pay-list ul li .pay-list-right .cart-opt .flex .option { width: calc(100% - 60px); }
.pay-list ul li .pay-list-right .cart-opt .flex .opt-price { width: 56px; text-align: right; }
.pay-list ul li .pay-list-right p.item-count { display: flex; align-items: center; justify-content: space-between; }
.pay-list ul li .pay-list-right p.item-count span { font-size: 17px; color: #0d0f11; }
.pay-list ul li .pay-list-right p.item-count b { font-size: 17px; color: #0d0f11; }

.order-payment { width: 100%; /* 결제진행 */ }
.order-payment .pay-list .pay-list-num { display: flex; height: 74px; justify-content: space-between; align-items: center; padding: 0 5%; box-sizing: border-box; line-height: 24px; }
.order-payment .pay-list .pay-list-num b { font-size: 17px; color: #0d0f11; }
.order-payment .pay-list .pay-list-num a { display: block; }
.order-payment .pay-list .pay-list-num a:after { clear: both; content: ''; display: block; }
.order-payment .pay-list .pay-list-num a p { font-size: 13px; color: #202326; font-weight: 500; padding-right: 8px; float: left; }
.order-payment .pay-list .pay-list-num a span { display: block; width: 24px; height: 24px; background: url(../images/arrow_24.svg) no-repeat; background-size: 100%; float: left; transform: rotate(360deg); transition-duration: 0.5s; }
.order-payment .pay-list .pay-list-num a span.on { transform: rotate(180deg); transition-duration: 0.5s; }

.order-payment h2 { font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; padding: 0 5%; margin-top: 20px; box-sizing: border-box; font-size: 17px; }
.order-payment .pay-section { width: 100%; background: #fff; padding: 0px 5%; box-sizing: border-box; }
.order-payment .pay-section .pay-section-title { font-size: 15px; font-weight: 500; line-height: 1.53; color: #4c5054; margin-bottom: 8px; text-indent: 4px; }
.order-payment .pay-section h2.pay-list-title { padding: 0; margin-bottom: 8px; text-indent: 4px; }
.order-payment .pay-section .wrap { margin-bottom: 24px; }
.order-payment input[type=text], .order-payment input[type=number] { font-size: 17px; border-radius: 8px; border: solid 1px #b4b9be; color: #0d0f11; width: 100%; display: block; height: 50px; padding: 0 12px; line-height: 50px; box-sizing: border-box; }
.order-payment input[type=text]:focus, .order-payment input[type=number]:focus { outline: none; }
.order-payment .flex { display: flex; height: 42px; align-items: center; position: relative; }
.order-payment .flex label { height: 42px; display: block; position: relative; padding-left: 34px; color: #0d0f11; font-size: 17px; line-height: 42px; color: #0d0f11; }
.order-payment .flex label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.order-payment .flex label input[type="checkbox"] + span { display: block; position: absolute; left: 4px; top: 50%; width: 24px; height: 24px; box-sizing: border-box; transform: translateY(-50%); background: url("../images/btn-check-off.svg"); }
.order-payment .flex label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-checkbox-on.svg") no-repeat center; }
.order-payment .flex label input[type="checkbox"]:focus { outline: none; }
.order-payment a.btn-help { display: block; width: 24px; height: 24px; background: url("../images/icon-question.svg") no-repeat center; margin-left: 4px; }
.order-payment .request select { width: 100%; font-size: 17px; border-radius: 8px; border: solid 1px #b4b9be; color: #0d0f11; width: 100%; display: block; height: 50px; padding: 0 12px; line-height: 50px; box-sizing: border-box; background: url("../images/btn-dropdown-24.svg") no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.order-payment .title-wrap { display: flex; justify-content: space-between; align-items: center; }
.order-payment .title-wrap h2 { display: flex; align-items: center; }
.order-payment .title-wrap p { font-size: 15px; font-weight: 500; line-height: 1.73; letter-spacing: -0.5px; color: #0d0f11; margin-top: 20px; }
.order-payment .coupon .wrap ul { width: 100%; border-radius: 8px; border: 1px solid #b4b9be; padding: 4px 12px; box-sizing: border-box; max-height: 227px; overflow-y: scroll; }
.order-payment .coupon .wrap ul li { width: 100%; padding: 12px 4px; box-sizing: border-box; border-bottom: 1px solid #edf1f3; }
.order-payment .coupon .wrap ul li:last-child { border-bottom: none; }
.order-payment .coupon .wrap ul li label { width: 100%; display: flex; align-items: center; }
.order-payment .coupon .wrap ul li label .left { width: 24px; margin-right: 8px; }
.order-payment .coupon .wrap ul li label .right { width: calc(100% - 32px); box-sizing: border-box; }
.order-payment .coupon .wrap ul li label .right .coupon-title { font-size: 17px; line-height: 1.53; color: #0d0f11; }
.order-payment .coupon .wrap ul li label .right span.expire { font-size: 13px; line-height: 1.54; color: #464b50; }
.order-payment .point .point-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.order-payment .point .point-wrap .input-wrap { width: calc(100% - 104px); position: relative; box-sizing: border-box; }
.order-payment .point .point-wrap .input-wrap input[type=number] { width: 100%; text-align: right; padding: 0 12px; box-sizing: border-box; font-size: 19px; font-weight: 500; color: #0d0f11; }
.order-payment .point .point-wrap .input-wrap a.btn-reset { width: 24px; height: 24px; display: inline-block; margin-left: 4px; background: url("../images/btn-delete.png"); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.order-payment .point .point-wrap a.btn-use-point { width: 100px; height: 50px; display: block; font-size: 15px; font-weight: bold; text-align: center; color: rgba(0, 187, 212, 0.8); line-height: 50px; border-radius: 8px; }
.order-payment .point .point-wrap a.btn-reset-point { width: 100px; height: 50px; display: block; font-size: 15px; font-weight: bold; text-align: center; color: rgba(0, 187, 212, 0.8); line-height: 50px; border-radius: 8px; display: none; }
.order-payment .payments .wrap ul { width: 100%; }
.order-payment .payments .wrap ul li { width: 100%; padding: 0 4px; margin-bottom: 8px;}
.order-payment .payments .wrap ul li label { padding-left: 34px; }
.order-payment .pay-price { width: 100%; background: #fff; padding: 15px 5% 0; box-sizing: border-box; }
.order-payment .pay-price .inner { box-shadow: 0 1px 0 0 #ececec; padding-bottom: 13px; margin-bottom: 1px; }
.order-payment .pay-price p { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.order-payment .pay-price .price-items, .order-payment .pay-price .price-discount, .order-payment .pay-price .price-delivery { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 12px; }
.order-payment .pay-price .price-items b, .order-payment .pay-price .price-discount b, .order-payment .pay-price .price-delivery b { font-size: 15px; font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.order-payment .pay-price .price-total { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.order-payment .pay-price .price-total b { font-size: 19px; line-height: 1.53; letter-spacing: -0.5px; color: #ff3750; }
.order-payment .payment-proceed { width: 100%; background: #fff; padding: 20px 5%; box-sizing: border-box; /* toggle area */ }
.order-payment .payment-proceed .payment-agree { width: 100%; display: flex; justify-content: space-between; padding: 0 4px; box-sizing: border-box; }
.order-payment .payment-proceed .payment-agree label { display: block; position: relative; padding-left: 28px; width: calc(100% - 32px); box-sizing: border-box; font-size: 15px; line-height: 1.53; color: #0d0f11; }
.order-payment .payment-proceed .payment-agree label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.order-payment .payment-proceed .payment-agree label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-check-off.svg") no-repeat center; }
.order-payment .payment-proceed .payment-agree label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-check-on.svg") no-repeat center; }
.order-payment .payment-proceed .payment-agree .show-policy { width: 24px; height: 24px; margin-left: 4px; background: url("../images/btn-dropdown-24.svg") no-repeat; display: block; transition-duration: .4s; }
.order-payment .payment-proceed .payment-agree .show-policy.on { transform: rotate(-180deg); }
.order-payment .payment-proceed .pay-policy { width: 100%; display: none; }
.order-payment .payment-proceed .pay-policy .flex { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding-left: 4px; }
.order-payment .payment-proceed .pay-policy .flex label { display: block; position: relative; width: 70%; height: 24px; line-height: 24px; font-size: 15px; line-height: 1.53; color: #0d0f11; padding-left: 28px; }
.order-payment .payment-proceed .pay-policy .flex label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.order-payment .payment-proceed .pay-policy .flex label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; background: url("../images/btn-check-off.svg") no-repeat center; transform: translateY(-50%); }
.order-payment .payment-proceed .pay-policy .flex label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-check-on.svg") no-repeat center; }
.order-payment .payment-proceed .pay-policy .flex a.btn-more { width: 24px; height: 24px; display: inline-block; background: url("../images/btn-more.svg"); }
.order-payment .payment-proceed .payment-btn-area .payment-btn { width: 100%; height: 56px; display: block; line-height: 56px; text-align: center; color: #fff; background-color: #c9cdd1; font-weight: bold; margin-top: 20px; border-radius: 10px; font-size: 19px; font-weight: bold; }

/* 주문확인 order_result*/
.order-result .result-top, .order-detail .result-top { width: 100%; background: #fff; padding: 12px 5% 32px; box-sizing: border-box; }
.order-result .result-top .txt-wrap, .order-detail .result-top .txt-wrap { padding: 0 4px; box-sizing: border-box; }
.order-result .result-top .txt-wrap .left, .order-detail .result-top .txt-wrap .left { width: 100%; }
.order-result .result-top .txt-wrap .left b, .order-detail .result-top .txt-wrap .left b { font-size: 17px; font-weight: 500; display: inline-block; margin-bottom: 4px; }
.order-result .result-top .txt-wrap .left h3, .order-detail .result-top .txt-wrap .left h3 { font-size: 19px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; line-height: 1.5; }
.order-result .result-top .txt-wrap .left span, .order-detail .result-top .txt-wrap .left span { font-size: 15px; line-height: 1.53; }
.order-result .result-top .txt-wrap .right, .order-detail .result-top .txt-wrap .right { display: none; }
.order-result .result-top .txt-wrap .right a, .order-detail .result-top .txt-wrap .right a { border-radius: 100px; border: 1px solid #dee1e4; font-size: 15px; font-weight: 500; line-height: 35px; text-align: center; color: #464b50; width: 91px; height: 35px; display: block; box-sizing: border-box; }
.order-result .result-top .txt-wrap .canceled-text{background: rgba(255, 55, 80, 0.12);font-size: 15px;color:#ff3750;padding: 12px;border-radius: 12px;margin-top: 12px;}
.order-result.canceled .result-top .txt-wrap .left b, .order-detail.canceled .result-top .txt-wrap .left b { color: #ff3750; }
.order-result.canceled .pay-list, .order-result.canceled .result-pay, .order-result.canceled .delivery-info, .order-detail.canceled .pay-list, .order-detail.canceled .result-pay, .order-detail.canceled .delivery-info { position: relative; }
.order-result.canceled .pay-list::after, .order-result.canceled .result-pay::after, .order-result.canceled .delivery-info::after, .order-detail.canceled .pay-list::after, .order-detail.canceled .result-pay::after, .order-detail.canceled .delivery-info::after { content: ''; display: block; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: absolute; left: 0; top: 0; }
.order-result .order-status-noti, .order-detail .order-status-noti { border-radius: 8px; background-color: rgba(255, 55, 80, 0.12); height: 47px; margin-top: 12px; font-size: 15px; line-height: 47px; padding: 0 12px; box-sizing: border-box; }
.order-result .btn-ask, .order-detail .btn-ask { display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #0084ff; height: 50px; margin-top: 28px; }
.order-result .btn-ask span, .order-detail .btn-ask span { display: inline-block; width: 18px; height: 18px; background: url("../images/icon-call.svg"); margin-right: 2px; }
.order-result .btn-ask p, .order-detail .btn-ask p { font-size: 15px; font-weight: 500; line-height: 1.73; letter-spacing: -0.5px; color: #0084ff; }
.order-result span.noti, .order-detail span.noti { font-size: 13px; line-height: 1.54; text-indent: 4px; }
.order-result .result-pay, .order-detail .result-pay { width: 100%; background: #fff; padding: 20px 5%; box-sizing: border-box; }
.order-result .result-pay .rp-sec, .order-detail .result-pay .rp-sec { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 8px; padding: 0 4px; box-sizing: border-box; }
.order-result .result-pay .rp-sec p, .order-detail .result-pay .rp-sec p { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.order-result .result-pay .rp-sec span, .order-detail .result-pay .rp-sec span { font-size: 15px; font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.order-result .result-pay .rp-sec b, .order-detail .result-pay .rp-sec b { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.order-result .result-pay .price-total b, .order-detail .result-pay .price-total b { font-size: 19px; line-height: 1.53; letter-spacing: -0.5px; color: #ff3750; }
.order-result .result-pay .noti, .order-detail .result-pay .noti{font-size: 14px;color:#ff3750;}

.order-result.canceled .progress-wrap{display:none;}
.progress-wrap { padding-top: 32px; box-sizing: border-box; }
.progress-wrap .order-progress { width: 100%; height: 10px; box-sizing: border-box; position: relative; border-radius: 10px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1); position: relative; margin-bottom: 12px; }
.progress-wrap .order-progress .bar { position: absolute; left: 0; top: 0; display: block; border-radius: 10px; height: 100%; }
.progress-wrap .order-progress .bar.lv1 { width: 0%; animation: lv1 1.5s forwards; }
.progress-wrap .order-progress .bar.lv2 { width: 0%; animation: lv2 1.5s forwards; }
.progress-wrap .order-progress .bar.lv3 { width: 0%; animation: lv3 1.5s forwards; }
.progress-wrap .order-progress .bar.lv4 { width: 0%; animation: lv4 1.5s forwards; }
.progress-wrap .order-progress .bar.lv5 { width: 0%; animation: lv5 1.5s forwards; }
.progress-wrap .order-progress .bar.lv6 { width: 0%; animation: lv6 1.5s forwards; }
.progress-wrap .order-progress .bar.lv7 { width: 0%; animation: lv7 1.5s forwards; }
.progress-wrap .order-progress .bar.lv8 { width: 0%; animation: lv8 1.5s forwards; }
.progress-wrap .order-progress .bar.lv9 { width: 0%; animation: lv9 1.5s forwards; }
.progress-wrap .order-progress .bar.lv10 { width: 0%; animation: lv10 1.5s forwards; }
.progress-wrap .progress-flex { display: flex; align-items: center; justify-content: space-between; font-size: 13px; line-height: 1.54; color: #464b50; padding: 0 4px; box-sizing: border-box; }
.progress-wrap .progress-flex .main100 { font-weight: 500; }

@keyframes lv1 { 0% { width: 0; }
  100% { width: 10%; } }
@keyframes lv2 { 0% { width: 0; }
  100% { width: 20%; } }
@keyframes lv3 { 0% { width: 0; }
  100% { width: 30%; } }
@keyframes lv4 { 0% { width: 0; }
  100% { width: 40%; } }
@keyframes lv5 { 0% { width: 0; }
  100% { width: 50%; } }
@keyframes lv6 { 0% { width: 0; }
  100% { width: 60%; } }
@keyframes lv7 { 0% { width: 0; }
  100% { width: 70%; } }
@keyframes lv8 { 0% { width: 0; }
  100% { width: 80%; } }
@keyframes lv9 { 0% { width: 0; }
  100% { width: 90%; } }
@keyframes lv10 { 0% { width: 0; }
  100% { width: 100%; } }

.order-history .store-notice { margin-top: 12px; }
.order-history .order-history-list { width: 100%; }
.order-history .order-history-list ul { width: 100%; padding: 0 5%; box-sizing: border-box; }
.order-history .order-history-list ul li { width: 100%; background: #fff; margin-bottom: 1px; box-sizing: border-box; box-shadow: 0 1px 0 0 #edf1f3; box-sizing: border-box; padding: 0 4px; }
.order-history .order-history-list ul li:last-child { box-shadow: none; }
.order-history .order-history-list ul li a { width: 100%; padding: 15px 0; display: block; }
.order-history .order-history-list ul li a b.order-status { font-size: 15px; font-weight: 500; margin-bottom: 4px; display: block; color: #464b50; }
.order-history .order-history-list ul li a b.order-status.canceled { color: #ff3750; }
.order-history .order-history-list ul li a h3 { font-size: 17px; font-weight: 500; color: #0d0f11; margin-bottom: 4px; display: flex; align-items: center; }
.order-history .order-history-list ul li a .history-menu { font-size: 13px; color: #0d0f11; position: relative; height: 20px; line-height: 20px; padding-right: 10px; display: inline-block; }
.order-history .order-history-list ul li a .history-menu::after { content: ''; display: block; position: absolute; right: 0; top: 50%; width: 1px; height: 10px; background-color: #a5aaaf; transform: translateY(-50%); }
.order-history .order-history-list ul li a .history-date { font-size: 13px; color: #464b50; height: 20px; line-height: 20px; display: inline-block; padding-left: 8px; }

/* 메인 */
.main-header { background-color: #EF8BB3; }
.main-header p{position:absolute;left:0;right:0;top:18px;margin:auto;width: 166px;height: 30px;display: flex; align-items: center;}

/* 메인배너 */
.main-barcode {padding: 20px 0;}
.main-barcode .inner{display:flex;flex-wrap:wrap;justify-content: space-between;}
.main-barcode .inner .left{line-height: 1.5; font-weight: bold;font-size: 20px;width:calc(100% - 130px);}
.main-barcode .inner .right a{display:block;}
.main-barcode .inner .right a .barcode{height: 30px;background: #eee;margin-bottom: 8px;}
.main-barcode .inner .right a span{font-size: 10px;color:#0d0f11;border:1px solid #0d0f11;padding:2px 8px;border-radius: 8px;}

.main-swiper-area { width: 100%; box-sizing: border-box; position: relative; }
.main-swiper-area .inner { width: 100%;  padding-left: 0;padding-right: 0;}
.main-swiper-area .inner .main-banner.swiper-container { width: 100%; overflow: hidden; height: auto; box-sizing: border-box; position: unset; }
.main-swiper-area .inner .main-banner.swiper-container .swiper-wrapper { width: 100%; height: auto; }
.main-swiper-area .inner .main-banner.swiper-container .swiper-wrapper .swiper-slide { width: 100%; height: auto; }
.main-swiper-area .inner .main-banner.swiper-container .swiper-wrapper .swiper-slide a {display:block; width: 100%; display: flex; justify-content: center;}
.main-swiper-area .inner .main-banner.swiper-container .swiper-wrapper .swiper-slide a img { height: auto; width: 100%;}
.main-swiper-area .inner img { height: auto; width: 100%; }
.main-swiper-area .inner .swiper-pagination {    text-align: center; padding: 2px 12px; border-radius: 14px; position: absolute; left: auto; right: 5%;  background-color: rgba(0, 0, 0, 0.5); color: #fff; width: auto; font-size: 15px; line-height: 1.53;}
.main-swiper-area .inner .swiper-pagination .swiper-pagination-current { font-weight: 500; }

.swiper-main-banner-pagination { text-align: center; -webkit-transition: 300ms opacity; -o-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; position: absolute; bottom: 60px; left: 0; right: 0; }
.swiper-container-horizontal>.swiper-pagination-bullets { display: flex; justify-content: center; align-items: center; }

.swiper-pagination-bullet { background-color: #FFFFFF !important; margin-bottom: 35px !important; }
.swiper-pagination-bullet-active { width: 10px !important; height: 10px  !important;}


section .inner { width: 100%; padding: 0 5%; box-sizing: border-box; }


.main-gnb {padding: 20px 0 28px;}
.main-gnb ul {display:flex;}
.main-gnb ul li { width: 100%; position: relative; margin-right: 1px; }
.main-gnb ul li:last-child::after { content: none; }
.main-gnb ul li::after { content: ""; position: absolute; right: 0; top: 20%; height: 32px;  width: 1px; background-color: #EDF1F3; }
.main-gnb ul li:last-child { margin: 0; }
.main-gnb ul li a {display:block;width: 60px;height: 72px;margin:auto;text-align: center;font-size: 13px;color:#0d0f11;font-weight: bold;}
.main-gnb ul li a .img {height: 40px;margin-bottom: 4px;display:flex;justify-content: center;}
.main-gnb ul li a .img img {width: 40px;}
.main-gnb ul li a p {font-size: 13px; line-height:1.54; font-weight: 400;}


.main-recommend { width: 100%;}
.main-recommend .inner { padding-right: 0; padding-left: 0; padding-top: 12px;}
.main-recommend .inner ul {height: auto; padding-left: 5%; box-sizing: border-box; }
.main-recommend .inner ul li { width: 144px;padding: 12px;box-sizing: border-box;}
.main-recommend .inner ul li a{display:block;width: 120px;}
.main-recommend .inner ul li .img {display:flex;justify-content: center; width: 100px; height: 100px; margin:auto; border-radius: 50%; background-color: #f8fafc; margin-bottom: 20px; overflow: hidden; }
.main-recommend .inner ul li .img img { height: 100%; width: auto; }
.main-recommend .inner ul li .txt h4 { margin-bottom: 4px; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.main-recommend .inner ul li .txt p {color:#0d0f11;font-size: 17px;font-weight: bold;}
.main-recommend .inner ul li .badge { display: flex; align-items: center; justify-content: center; margin-bottom: 4px;}
.main-recommend .inner ul li .badge .best { width: 33px; height: 15px; background: url("../images/badge_best.svg"); margin-right: 2px; }
.main-recommend .inner ul li .badge .new { width: 31px; height: 15px; background: url("../images/badge_new.svg"); }
.main-recommend .inner ul li:last-of-type { margin-right: 40px; }

.main-user { background-color: #EF8BB3; }
.main-user p, .main-user p a { color: #FFF; font-size: 19px; font-style: normal; font-weight: 700; line-height: 29px; }
.main-barcode .inner .right .barcode-box {  }

.main-user-bottom { background-color: #EF8BB3; display: flex; justify-content: space-between; padding: 0 5%; padding-bottom: 24px;}
.main-user-bottom .left { display: flex; flex-direction: column; justify-content: space-evenly; gap: 8px;}
.main-user-bottom .left a { display: flex; gap: 8px; align-items: center; }
.main-user-bottom .left a img { }
.main-user-bottom .left a span { color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: 23px;  }



.main-user-bottom .right .barcode-box { border-radius: 8px; background: #FFF; display: flex; width: 160px; padding: 12px 16px 8px 16px; flex-direction: column; align-items: center; gap: 4px; }
.main-user-bottom .right .barcode-box .barcode-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.main-user-bottom .right .barcode-box .barcode-wrap p { color: #110F0D; font-size: 11px; font-style: normal; font-weight: 400; line-height: 140%; margin: auto; }
/* 간편카드 */
/* + 버튼 */
.btn-add { width: 100%; margin: 12px 0; padding: 0 5%; box-sizing: border-box; }
.btn-add a { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: solid 1px #A5AAAF; height: 50px; }
.btn-add a span { display: block; width: 20px; height: 20px; background: url("../images/icon-btn-add.svg"); margin-right: 8px; }
.btn-add a p { font-size: 15px; font-weight: 500; line-height: 1.53; color: #464b50; }

/*간편카드관리 easypay_index*/
.easypay-list .easypay-card-setting { width: 100%; box-sizing: border-box; padding: 0 5%;}
.easypay-list .easypay-card-setting li { width: 100%; padding: 24px 0; border-bottom: 1px solid #edf1f3; }
.easypay-list .easypay-card-setting li:last-child { border-bottom: none; }
.easypay-list .easypay-card-setting li .card-detail { display: flex; align-items: center; position: relative; }
.easypay-list .easypay-card-setting li .card-detail .img { width: 96px; height: 64px; margin-right: 12px; border-radius: 6px; box-sizing: border-box; }
.easypay-list .easypay-card-setting li .card-detail .img img { width: 100%; }
.easypay-list .easypay-card-setting li .card-detail .txt { width: calc(100% - 140px); }
.easypay-list .easypay-card-setting li .card-detail .txt .card-info { font-size: 13px; line-height: 1.54; margin-bottom: 4px; }
.easypay-list .easypay-card-setting li .card-detail .txt .card-name { font-size: 17px; font-weight: bold; }
.easypay-list .easypay-card-setting li .card-detail a.btn-card-setting { width: 24px; height: 24px; display: block; position: absolute; right: 0; top: 0; background: url("../images/btn-more-dot3.svg") center; }
.easypay-list .easypay-card-setting li .card-detail.aqua .img { background-color: #12d4e3; }
.easypay-list .easypay-card-setting li .card-detail.black .img { background-color: #36363a; }
.easypay-list .easypay-card-setting li .card-detail.yellow .img { background-color: #fbc500; }
.easypay-list .easypay-card-setting li .card-detail.red .img { background-color: #ff3d19; }
.easypay-list .easypay-card-setting li .card-detail.blue .img { background-color: #333cba; }
.easypay-list .easypay-card-setting li .card-detail.sky .img { background-color: #35affd; }
.easypay-list .easypay-card-setting li .card-detail.purple .img { background-color: #a813cd; }
.easypay-list .easypay-card-setting li .card-detail.pink .img { background-color: #f40e65; }
.easypay-list .easypay-card-setting li .card-detail.green .img { background-color: #009858; }
.easypay-list .easypay-regist-btn-area { width: 100%; background-color: #fafafa; }
.easypay-list .easypay-regist-btn-area .easypay-regist-btn { text-align: center; width: 100%; height: 48px; line-height: 48px; font-size: 14px; font-weight: bold; color: #fb3b7c; display: flex; align-items: center; justify-content: center; }
.easypay-list .easypay-regist-btn-area .easypay-regist-btn span { width: 19px; height: 17px; background: url("../images/easypay_regist_plus.svg") no-repeat center; }
.easypay-list .easypay-setting-none { width: 100%; }
.easypay-list .easypay-setting-none .inner { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; padding: 20px 0; }
.easypay-list .easypay-setting-none .inner .icon { width: 32px; height: 32px; background: url("../images/easypay_card_icon.svg") center; margin-bottom: 15px; }
.easypay-list .easypay-setting-none .inner b { font-size: 16px; line-height: 1; text-align: center; color: #111111; width: 100%; }
.easypay-list .easypay-setting-none .inner p { width: 100%; font-size: 14px; line-height: 1.57; text-align: center; color: #111111; margin: 16px 0 30px; }
.easypay-list .easypay-setting-none .inner .easypay-setting-regist-btn { width: 120px; height: 45px; border-radius: 8px; background-color: rgba(251, 59, 124, 0.1); font-size: 15px; font-weight: bold; text-align: center; color: #fb3b7c; line-height: 45px; display: block; }

/* 카드이름 변경 */
.pop-ep-nickname { position: fixed; left: 0; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.7); height: 100%; z-index: 101; display: none; }
.pop-ep-nickname .inner { width: 100%; height: 100%; align-items: center; justify-content: center; display: flex; }
.pop-ep-nickname .inner .wrap { width: 90%; background: #fff; padding: 30px 15px 0; box-sizing: border-box; border-radius: 8px; }
.pop-ep-nickname .inner .wrap h4 { font-size: 14px; color: #111111; margin-bottom: 15px; }
.pop-ep-nickname .inner .wrap .input-area { position: relative; width: 100%; margin-bottom: 15px; }
.pop-ep-nickname .inner .wrap .input-area input { width: 100%; padding: 13px 45px 10px 13px; border-radius: 6px; background-color: #f4f4f4; box-sizing: border-box; border: none; }
.pop-ep-nickname .inner .wrap .input-area input:focus { outline: none; }
.pop-ep-nickname .inner .wrap .input-area .text-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #888888; }
.pop-ep-nickname .inner .wrap .btn-flex { width: 100%; height: 56px; justify-content: space-between; box-sizing: border-box; display: flex; }
.pop-ep-nickname .inner .wrap .btn-flex a { width: 50%; display: inline-block; height: 56px; line-height: 56px; box-sizing: border-box; color: #666666; font-size: 14px; text-align: center; }
.pop-ep-nickname .inner .wrap .btn-flex a.cancel { position: relative; }
.pop-ep-nickname .inner .wrap .btn-flex a.cancel::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ''; width: 1px; height: 16px; background-color: #ececec; }
.pop-ep-nickname .inner .wrap .btn-flex a.submit { color: #3f49ff; }

/* 간편카드 등록 */
.easypay-regist-wrap { width: 100%; /* 간편카드 등록 */ }
.easypay-regist-wrap .card-regist-wrap { width: 100%; background-color: #fff; }
.easypay-regist-wrap .card-regist-wrap h3 { padding-top: 30px; padding-left: calc(5% + 4px); width: 100%; box-sizing: border-box; font-size: 17px; line-height: 1.53; }
.easypay-regist-wrap .card-regist-wrap .regist-section { padding: 24px 5%; box-sizing: border-box; }
.easypay-regist-wrap .card-regist-wrap .regist-section h4 { font-size: 17px; font-weight: 500; line-height: 1.53; margin-bottom: 8px; padding-left: 4px; box-sizing: border-box; }
.easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap { position: relative; }
.easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap input[type=text], .easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap input[type=number], .easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap input[type=password] { border-radius: 8px; border: solid 1px #a5aaaf; box-sizing: border-box; height: 50px; font-size: 17px; line-height: 1.53; color: #0d0f11; }
.easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap input[type=password] { font-size: 17px; font: large Verdana,sans-serif; letter-spacing: 1px; }
.easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap input:focus { outline: none; }
.easypay-regist-wrap .card-regist-wrap .regist-section .ep-wrap>span{position: absolute;right: 0;top:12px;color:#464b50;font-size: 17px;line-height: 26px;padding-right: 12px;}
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-name .ep-wrap input { width: 100%; padding: 0 60px 0 12px; box-sizing: border-box; margin-bottom: 8px; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-name .ep-wrap p { font-size: 13px; line-height: 1.54; color: #64696e; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-number .ep-wrap { display: flex; justify-content: space-between; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-number .ep-wrap input { width: 23.5%; text-align: center; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-date input { width: 68px; text-align: center; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-pwd .ep-wrap { display: flex; align-items: center; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-pwd .ep-wrap input { width: 50px; margin-right: 4px; text-align: center; height: 50px; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-pwd .ep-wrap .asterisk { background: url("../images/asterisk.svg") no-repeat center; width: 40px; height: 50px; margin-right: 4px; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .radio-wrap {margin-bottom: 10px; /* radio */ }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .radio-wrap label { display: block; position: relative; padding-left: 28px; font-size: 16px; color: #111;margin-bottom: 16px; height: 18px; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .radio-wrap label input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .radio-wrap label input[type="radio"] + span { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 50%; box-sizing: border-box; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .radio-wrap label input[type="radio"]:checked + span { border: 1px solid #1b0d08; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .radio-wrap label input[type="radio"]:checked + span:after { clear: both; content: ''; display: block; position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1b0d08; border-radius: 50%; }
.easypay-regist-wrap .card-regist-wrap .regist-section.ep-customer .ep-wrap input { width: 100%; box-sizing: border-box; padding-left: 12px; }
.easypay-regist-wrap .card-regist-wrap .ep-section-wrap { width: 100%; display: flex; justify-content: space-between; }
.easypay-regist-wrap .card-regist-wrap .ep-section-wrap .regist-section { width: 100%; }

.easypay-regist-wrap .payment-proceed { width: 100%; background: #fff; padding: 20px 5%; box-sizing: border-box; /* toggle area */ }
.easypay-regist-wrap .payment-proceed .payment-agree { width: 100%; display: flex; justify-content: space-between; padding: 0 4px; box-sizing: border-box; }
.easypay-regist-wrap .payment-proceed .payment-agree label { display: block; position: relative; padding-left: 28px; width: calc(100% - 32px); box-sizing: border-box; font-size: 15px; line-height: 1.53; color: #0d0f11; }
.easypay-regist-wrap .payment-proceed .payment-agree label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.easypay-regist-wrap .payment-proceed .payment-agree label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-check-off.svg") no-repeat center; }
.easypay-regist-wrap .payment-proceed .payment-agree label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-check-on.svg") no-repeat center; }
.easypay-regist-wrap .payment-proceed .payment-agree .show-policy { width: 24px; height: 24px; margin-left: 4px; background: url("../images/btn-dropdown-24.svg") no-repeat; display: block; transition-duration: .4s; }
.easypay-regist-wrap .payment-proceed .payment-agree .show-policy.on { transform: rotate(-180deg); }
.easypay-regist-wrap .payment-proceed .pay-policy { width: 100%; display: none; }
.easypay-regist-wrap .payment-proceed .pay-policy .flex { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding-left: 4px; }
.easypay-regist-wrap .payment-proceed .pay-policy .flex label { display: block; position: relative; width: 70%; height: 24px; line-height: 24px; font-size: 15px; color: #0d0f11; padding-left: 28px; margin-bottom: 8px;}
.easypay-regist-wrap .payment-proceed .pay-policy .flex label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }
.easypay-regist-wrap .payment-proceed .pay-policy .flex label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; background: url("../images/btn-check-off.svg") no-repeat center; transform: translateY(-50%); }
.easypay-regist-wrap .payment-proceed .pay-policy .flex label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-check-on.svg") no-repeat center; }
.easypay-regist-wrap .payment-proceed .pay-policy .flex a.btn-more { width: 24px; height: 24px; display: inline-block; background: url("../images/btn-more.svg"); }
.easypay-regist-wrap .payment-proceed .payment-btn-area .payment-btn { width: 100%; height: 56px; display: block; line-height: 56px; text-align: center; color: #fff; background-color: #c9cdd1; margin-top: 20px; border-radius: 10px; font-size: 19px; }

/* 간편결제 이용약관 */
.ep-policy { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; background: #fff; overflow: auto; }
.ep-policy .title { height: 56px; position: relative; }
.ep-policy .title p { font-weight: bold; font-size: 17px; color: #000; line-height: 56px; padding: 0 20px; }
.ep-policy .title .close { position: absolute; top: 0; right: 0; width: 56px; height: 56px; background: url(../images/pop_close.svg) no-repeat center; }
.ep-policy .text { padding: 20px; }
.ep-policy .text p { font-size: 12px; line-height: 20px; color: #111; }

/*간편카드 결제 비밀번호*/
.easypay-pwd-wrap { width: 100%; }
.easypay-pwd-wrap .inner { width: 100%; }
.easypay-pwd-wrap .inner .top { padding-top: 32px; }
.easypay-pwd-wrap .inner .top p { font-size: 17px; line-height: 1.53; text-align: center; }
.easypay-pwd-wrap .inner .top .pwd-indicator { display: flex; align-items: center; justify-content: center; margin-top: 24px; }
.easypay-pwd-wrap .inner .top .pwd-indicator div { margin-right: 14px; width: 18px; height: 18px; border-radius: 50%; background-color: #dfdfdf; }
.easypay-pwd-wrap .inner .top .pwd-indicator div.on { background-color: #37dc28; }
.easypay-pwd-wrap .inner .top .pwd-indicator div:last-child { margin-right: 0; }
.easypay-pwd-wrap .inner .top span.pwd-alert { font-size: 15px; line-height: 1.53; display: block; text-align: center; margin-top: 24px; }
.easypay-pwd-wrap .inner .bottom-wrap { width: 100%; position: fixed; bottom: 0; left: 0; }
.easypay-pwd-wrap .inner .bottom-wrap .keypads { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; background-color: #37dc28; z-index: 10; }
.easypay-pwd-wrap .inner .bottom-wrap .keypads .keypad { width: 33.33333%; text-align: center; color: #fff; height: 70px; line-height: 70px; font-size: 28px; z-index: 10; }
.easypay-pwd-wrap .inner .bottom-wrap .keypads .keypad:last-child { margin-left: 33.3333%; }
.easypay-pwd-wrap .inner .bottom-wrap .del-wrap { display: flex; position: absolute; left: 0; bottom: 0; width: 100%; justify-content: space-between; z-index: 9; }
.easypay-pwd-wrap .inner .bottom-wrap .del-wrap a { height: 70px; width: 33.3333%; line-height: 70px; text-align: center; color: #fff; position: relative; font-size: 17px; font-weight: bold; letter-spacing: -0.49px; }
.easypay-pwd-wrap .inner .bottom-wrap .del-wrap a.delete-one { background: url("../images/btn-back-space.svg") no-repeat center; }
.easypay-pwd-wrap .inner .bottom-wrap .easy-cert-wrap { margin-bottom: 24px; padding: 0 calc(5% + 5px); box-sizing: border-box; }
.easypay-pwd-wrap .inner .bottom-wrap .easy-cert-wrap p { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; margin-top: 11px; }

/* 코코넛 간편결제*/
/* order_payment */
.kokonut-easypay { width: 100%; background-color: #fff; box-sizing: border-box; }
.kokonut-easypay .easypay-section-top { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 5%; box-sizing: border-box; border-top: 1px solid #edf1f3; }
.kokonut-easypay .easypay-section-top h4 { font-size: 17px; line-height: 1.53; padding-left: 4px; }
.kokonut-easypay .easypay-section-top a.easypay-setting { font-size: 13px; font-weight: 500; text-align: center; padding: 6px 16px; border-radius: 100px; border: solid 1px #dee1e4; }
.kokonut-easypay .easypay-existed { width: 100%; }
.kokonut-easypay .easypay-existed .easypay-card-wrap { width: 100%; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper { width: 100%; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide { width: 240px; margin-bottom: 20px; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap { width: 240px; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap .img { width: 240px; height: 150px; box-sizing: border-box; border-radius: 12px; margin-bottom: 10px; overflow: hidden; position: relative; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap .img img { width: 100%; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap .img h4.payment-card-name { position: absolute; left: 20px; top: 18px; font-size: 14px; font-weight: bold; color: #fff; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap .img p.payment-card-number { position: absolute; left: 20px; bottom: 17px; font-size: 18px; font-weight: bold; color: #fff; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap p { font-size: 13px; line-height: 1; text-align: center; color: #111111; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.aqua .img { background-color: #12d4e3; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.black .img { background-color: #36363a; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.yellow .img { background-color: #fbc500; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.red .img { background-color: #ff3d19; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.blue .img { background-color: #333cba; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.sky .img { background-color: #35affd; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.purple .img { background-color: #a813cd; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.pink .img { background-color: #f40e65; }
.kokonut-easypay .easypay-existed .easypay-card-wrap .swiper-wrapper .swiper-slide .wrap.green .img { background-color: #009858; }
.kokonut-easypay .easypay-none { width: 100%; margin-bottom: 20px; }
.kokonut-easypay .easypay-none span.alert { font-size: 13px; line-height: 1.54; padding-left: calc(5% + 4px); box-sizing: border-box; }


.payments.pay-section label {  padding-left: 28px; }
.store-request .input-store-request { width: 100%; height: 50px; border-radius: 8px; border: 1px solid #a5aaaf; resize: none; outline: none; font-size: 17px; line-height: 1.53; padding: 12px; box-sizing: border-box; }
/* 20230104 */
/* -------------------------------------- 선불카드 ------------------------------------------------ */
/* 공통 */
section h3.section-title { padding-left: calc(5% + 4px); margin-bottom: 8px; font-size: 17px; line-height: 1.53; color: #0d0f11; }
.prepaid-list .inner, .regist-coupon .inner, .prepaid-history-list .inner, .prepaid-detail .inner{ width: 100%; padding: 0 5%; box-sizing: border-box; }
.btn-single { box-sizing: border-box; width: 100%; }
.btn-single a.btn-basic { width: 100%; display: block; height: 56px; line-height: 56px; text-align: center; background-color: rgba(241, 122, 170, 0.12); border-radius: 10px; color: #462201; font-size: 17px; font-weight: bold; }
.btn-single a.btn-gray { width: 100%; display: block; height: 56px; line-height: 56px; text-align: center; background-color: #c9cdd1; border-radius: 10px; color: #fff; font-size: 17px; font-weight: bold; }

/* + 버튼 */
.btn-add { width: 100%; margin: 12px 0; padding: 0 5%; box-sizing: border-box; }
.btn-add a { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: solid 1px #dee1e4; height: 50px; }
.btn-add a span { display: block; width: 20px; height: 20px; background: url("../images/icon-btn-add.svg"); margin-right: 8px; }
.btn-add a p { font-size: 15px; font-weight: 500; line-height: 1.53; color: #464b50; }

/* 선불카드 결제 20230111 */

.ppcard-section-top { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 5% 8px; box-sizing: border-box; border-top: 1px solid #edf1f3; }
.ppcard-section-top .btn-get-ppcard {width: 80px;height: 32px;border-radius: 100px;border: solid 1px #dee1e4;line-height: 32px;text-align: center; font-weight: 500;color: #464b50;font-size: 13px;box-sizing: border-box;}
.ppcard-section-top h4 { font-size: 17px; line-height: 1.53; padding-left: 4px; }
.ppcard-pay span.alert { font-size: 13px; line-height: 1.54; padding-left: calc(5% + 4px); box-sizing: border-box; }
.ppcard-pay .prepaid-empty { width: 100%; padding-bottom: 20px; }
.ppcard-pay .prepaid-existed { width: 100%; box-sizing: border-box; padding: 0 5% 15px; }
.ppcard-pay .prepaid-existed .pay-cards { width: 100%; box-sizing: border-box; }
.ppcard-pay .prepaid-existed .pay-cards li { width: 100%; padding: 16px 0; box-sizing: border-box; position: relative; }
.ppcard-pay .prepaid-existed .pay-cards li label { width: 100%; }
.ppcard-pay .prepaid-existed .pay-cards li label input { opacity: 0; position: absolute; top: 0; left: 0; }
.ppcard-pay .prepaid-existed .pay-cards li label input[type="checkbox"] + span { position: absolute; top: 0px; right: 0; bottom: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; box-sizing: border-box; color: #fff; font-size: 12px; text-align: center; line-height: 18px; text-align: center; }
.ppcard-pay .prepaid-existed .pay-cards li label input[type="checkbox"]:checked + span { background-color: #1b0d08; border-color: #1b0d08; }
.ppcard-pay .prepaid-existed .pay-cards li label .flex { display: flex; align-items: center; }
.ppcard-pay .prepaid-existed .pay-cards li label .flex .img { width: 90px; height: 60px; border-radius: 8px; margin-right: 12px; overflow: hidden; }
.ppcard-pay .prepaid-existed .pay-cards li label .flex .img img { width: 100%; height: 100%; }
.ppcard-pay .prepaid-existed .pay-cards li label .flex .txt { width: calc(100% - 102px); }
.ppcard-pay .prepaid-existed .pay-cards li label .flex .txt p { font-size: 13px; line-height: 1.54; }
.ppcard-pay .prepaid-existed .pay-cards li label .flex .txt b { font-size: 17px; line-height: 1.53; }
.ppcard-pay .prepaid-existed .pay-cards li:last-child { border-bottom: none; }


/* 카드 관리 prepaid_list */
.prepaid-list ul.prepaid-card-list { width: 100%; }
.prepaid-list ul.prepaid-card-list li { width: 100%; position: relative; padding: 20px 32px 20px 0px; border-bottom: 1px solid #edf1f3; box-sizing: border-box; }
.prepaid-list ul.prepaid-card-list li a.list { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; align-items: center; }
.prepaid-list ul.prepaid-card-list li a.list .img { width: 120px; margin-right: 12px; height: 80px; }
.prepaid-list ul.prepaid-card-list li a.list .img img { width: 100%; }
.prepaid-list ul.prepaid-card-list li a.list .txt { width: calc(100% - 132px); }
.prepaid-list ul.prepaid-card-list li a.list .txt p { font-size: 15px; line-height: 1.53; margin-bottom: 4px; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.prepaid-list ul.prepaid-card-list li a.list .txt b { font-size: 17px; line-height: 1.53; }
.prepaid-list ul.prepaid-card-list li a.bookmark { position: absolute; display: block; right: 0; top: 20px; width: 24px; height: 24px; background: url("../images/icon-bookmark-off.svg"); }
.prepaid-list ul.prepaid-card-list li.on a.bookmark { background: url("../images/icon-bookmark-on.svg"); }
.prepaid-list ul.prepaid-card-list li:last-child { border-bottom: none; }

/* prepaid_index */
.prepaid-swiper-area { width: 100%; padding-top: 28px; box-sizing: border-box; }
.prepaid-swiper-area .inner { padding: 0; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide { width: 80%; background-color: #f8fafc; box-sizing: border-box; border-radius: 8px; display: flex; justify-content: center; flex-wrap: wrap;border:1px solid #dee1e4; padding: 38px 0;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-barcode-box{width: 100%;padding-bottom: 32px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-img { width: 240px; position: relative;border-radius: 20px;overflow: hidden;margin:20px auto;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-img img { width: 100%; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-img .swiper-pagination { width: 100%; text-align: center; bottom:-30px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-img .swiper-pagination .swiper-pagination-bullet { width: 6px !important; height: 6px !important; border-radius: 3px; background-color: #0d0f11; margin-right: 5px; transition: 0.4s; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-img .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #0d0f11; width: 15px !important; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide span.cardname { display: block; font-size: 17px; font-weight: 500; line-height: 26px; text-align: center; width: 240px;margin:auto;height: 52px;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide b.balance { width: 100%; display: block; padding-bottom: 20px; line-height: 1.52; font-size: 21px;width: 240px;margin:auto;border-bottom:1px solid #c9cdd1;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-barcode { width: 100%; text-align: center; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-barcode .barcode { margin: 0 auto; width: 100%;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-barcode p { font-size: 15px; line-height: 1.53; padding-top: 8px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns { width: 100%;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a {width:248px;position: relative; display: flex; height: 60px; align-items: center; border:1px solid #edf1f3; margin:auto; background:#fff;border-radius: 10px;padding:0 16px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a:after{clear:both;content:'';display:block;position: absolute;top: 0;right: 0;width: 40px;height: 100%;background: url(../images/next.svg) no-repeat center left;background-size:24px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a:last-child {border-bottom:none; margin-top:12px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a .icon { width: 36px; height: 36px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a p { font-size: 15px; padding-left: 8px; }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a.card-charge .icon { background: url("../images/icon-prepaid-charge.svg"); }
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide .card-btns a.card-history .icon { background: url("../images/icon-prepaid-history.svg"); }
/* 20220623 카드추가 */
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide.empty {height: 630px;align-items: flex-start;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide.empty a.btn-add-ppcard { width: 240px;border-radius: 12px;border: 1px dashed #a5aaaf;display: flex;justify-content: center;flex-wrap: wrap;padding: 60px 0 49px;box-sizing: border-box;background: #fff;margin-top: 124px;}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide.empty a.btn-add-ppcard span.icon{display: block; width: 24px; height: 24px; background: url('../images/icon-btn-add24.svg');}
.prepaid-swiper-area .inner .swiper-container .swiper-wrapper .swiper-slide.empty a.btn-add-ppcard p {width: 100%;font-size: 15px;font-weight: 500;line-height: 1.53;text-align: center;color: #64696e;}

.prepaid-swiper-area .inner .ppcard-empty a.btn-add-ppcard { width: 240px;height: 160px;border-radius: 12px;border: 1px dashed #a5aaaf;display: flex;justify-content: center;flex-wrap: wrap;padding: 60px 0 49px;box-sizing: border-box;margin:auto;}
.prepaid-swiper-area .inner .ppcard-empty a.btn-add-ppcard span.icon{display: block; width: 24px; height: 24px; background: url('../images/icon-btn-add24.svg');}
.prepaid-swiper-area .inner .ppcard-empty a.btn-add-ppcard p {width: 100%;font-size: 15px;font-weight: 500;line-height: 1.53;text-align: center;color: #64696e;}

/* 하단 유의사항 */
.btn-bottom-notice { padding: 15px calc(5% + 4px) 0; box-sizing: border-box; }
.btn-bottom-notice .title {display:block; margin-bottom: 7px; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; position: relative;}
.btn-bottom-notice .title:after{clear:both;content:'';display:block;width: 24px;height: 100%;background:url(../images/btn-dropdown-24.svg) no-repeat center;background-size:24px;position: absolute;top: 0;right: 0;transform: rotateX(180deg);}
.btn-bottom-notice .title.on:after{transform: rotateX(0deg);}
.btn-bottom-notice p {font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; }

.bottom-notice { padding: calc(5% + 4px); background: #f8fafc; box-sizing: border-box; }
.bottom-notice .title { margin-bottom: 7px; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
.bottom-notice p { font-size: 13px; line-height: 1.62; letter-spacing: -0.3px; }
.bottom-notice a.cl-system-red{color:#0084ff; text-decoration: underline;}

.gift-prepaid-img .prepaid-img-wrap { padding: 20px 0; }
.gift-prepaid-img .prepaid-img-wrap .swiper-container { padding-bottom: 27px; }
.gift-prepaid-img .prepaid-img-wrap .swiper-wrapper .swiper-slide { width: 240px; height: 160px; background-color: rgba(255, 55, 80, 0.12); margin-right: 10px;}
.gift-prepaid-img .prepaid-img-wrap .swiper-wrapper .swiper-slide:first-child {margin-left: 64px;}
.gift-prepaid-img .prepaid-img-wrap .swiper-wrapper .swiper-slide a { display: block; }
.gift-prepaid-img .prepaid-img-wrap .swiper-wrapper .swiper-slide a img { width: 100%; }
.gift-prepaid-img .swiper-pagination { position: absolute; bottom: 0 !important; left: 0; right: 0; margin: auto; }
.gift-prepaid-img .swiper-pagination-bullet-active { background: #0d0f11; }

.sub-prepaid-img { padding: 30px 0; }
.sub-prepaid-img section { padding-bottom: 40px; }
.sub-prepaid-img section:last-child { padding-bottom: 0; }
.sub-prepaid-img section h3 { font-size: 17px; line-height: 26px; color: #0d0f11; padding-bottom: 8px; padding-left:5%; }
.sub-prepaid-img section .swiper-slide { width: 120px; height: 80px; margin-right: 8px; border-radius: 8px; overflow: hidden; }
.sub-prepaid-img section .swiper-slide:first-child{margin-left: 5%;}
.sub-prepaid-img section .swiper-slide a { display: block; }
.sub-prepaid-img section .swiper-slide a img { width: 100%; }

/* 이용 내역 prepaid_history */
.prepaid-history-list { width: 100%; }
.prepaid-history-list ul { padding: 0 5px; box-sizing: border-box; }
.prepaid-history-list ul li { border-bottom: 1px solid #e8ebee; }
.prepaid-history-list ul li:last-child { border: none; }
.prepaid-history-list ul li a { display: flex; justify-content: space-between; padding: 20px 0; align-items: center; }
.prepaid-history-list ul li a .txt { width: 60%; }
.prepaid-history-list ul li a .txt .description { font-size: 15px; font-weight: 500; line-height: 1.53; margin-bottom: 2px; color: #0d0f11; }
.prepaid-history-list ul li a .txt .timestamp { font-size: 13px; line-height: 1.54; color: #64696e; }
.prepaid-history-list ul li a .detail { width: 40%; }
.prepaid-history-list ul li a .detail p { font-size: 17px; font-weight: 500; text-align: right; }
.prepaid-history-list ul li.plus a .detail p { color: #0084ff; }
.prepaid-history-list ul li.minus a .detail p { color: #ff3953; }

/* 카드 상세 prepaid_detail */
.prepaid-detail .card-title { width: 100%; padding: 22px 0 20px 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
.prepaid-detail .card-title h3 { font-size: 19px; line-height: 1.53; }
.prepaid-detail .card-title a.btn-change-name { width: 60px; height: 35px; border-radius: 100px; border: 1px solid #dee1e4; line-height: 35px; box-sizing: border-box; font-size: 15px; font-weight: 500; text-align: center; color: #464b50; margin-left: 8px; }
.prepaid-detail .card-wrap { padding: 12px 24px; margin-bottom: 20px; }
.prepaid-detail .card-wrap .card-img { width: 240px; height: 160px; margin: 0 auto; border-radius: 12px; overflow: hidden; }
.prepaid-detail .card-wrap .card-img img { width: 100%; }
.prepaid-detail .card-wrap b.balance { font-size: 19px; line-height: 1.53; display: block; width: 100%; text-align: center; margin-bottom: 17px; }
.prepaid-detail .card-wrap .card-barcode { width: 100%; text-align: center; }
.prepaid-detail .card-wrap .card-barcode .barcode { margin: 0 auto; text-align: center; }
.prepaid-detail .card-wrap .card-barcode p { font-size: 15px; line-height: 1.53; }
.prepaid-detail .card-btns { width: 100%; padding: 27px calc(5% + 30px); box-sizing: border-box; }
.prepaid-detail .card-btns a { width: 264px; margin: 0 auto; display: flex; align-items: center; margin-bottom: 32px; }
.prepaid-detail .card-btns a .icon { width: 36px; height: 36px; }
.prepaid-detail .card-btns a p { font-size: 17px; font-weight: 500; line-height: 1.53; padding-right: 36px; text-align: center; box-sizing: border-box; width: 228px; }
.prepaid-detail .card-btns a.card-charge .icon { background: url("../images/icon-prepaid-charge.svg"); }
.prepaid-detail .card-btns a.card-history .icon { background: url("../images/icon-prepaid-history.svg"); }

/* 카드 이름 변경 */
.ppcard-name-modify .txt {padding: 0 20px !important;}
.ppcard-name-modify .input-wrap { position: relative; height: 58px; margin-top: 20px; }
.ppcard-name-modify .input-wrap input { height: 100%; width: 100%; font-size: 17px; padding: 12px; border-radius: 8px; border: 1px solid #a5aaaf; padding-right: 58px; box-sizing: border-box; box-sizing: border-box; }
.ppcard-name-modify .input-wrap input:focus { outline: none; }
.ppcard-name-modify .input-wrap>span { position: absolute; right: 12px; top: 17px; font-size: 15px; color: #64696e; line-height: 24px; }
#name_amount { position: absolute; right: 35px; }

/* 선불카드 충전 결과 prepaid_charge_result */
.prepaid-charge .charge-img-wrap { display: flex; flex-wrap: wrap; padding: 24px 0; }
.prepaid-charge .charge-img-wrap .text { margin-left: 12px; width: calc(100% - 132px); }
.prepaid-charge .charge-img-wrap .text p { font-size: 15px; padding: 4px 0; }
.prepaid-charge .charge-img-wrap .text b { font-size: 17px; display: block; }
.prepaid-charge .charge-opt label { width: calc(25% - 3px) !important; border-radius: 100px !important; }
.prepaid-charge-result .result-charge-img { text-align: center; padding: 24px 0 40px; }
.prepaid-charge-result .result-charge-img h4 { font-size: 21px; line-height: 1.52; padding-bottom: 12px;}
.prepaid-charge-result .result-charge-img span{display:inline-block;text-align: center;font-size: 15px;}
.prepaid-charge-result .result-charge-img .img { margin: 28px auto 20px; width: 240px; height: 160px; background: rgba(255, 55, 80, 0.12); border-radius: 12px; overflow: hidden; }
.prepaid-charge-result .result-charge-img .img img { width: 100%; }
.prepaid-charge-result .result-charge-img .text p { font-size: 17px; line-height: 1.53; font-weight: bold;}
.prepaid-charge-result .result-charge-img .text b { font-size: 19px; line-height: 1.53; }
.prepaid-charge-result .result-price { width: 90%;margin:auto;}
.prepaid-charge-result .result-price ul { border:1px solid #dee1e4;border-radius: 10px;padding: 28px;box-sizing: border-box;margin-bottom: 15px;}
.prepaid-charge-result .result-price ul li { margin-bottom: 19px; font-size: 15px; display: flex; justify-content: space-between; line-height: 1.53; }
.prepaid-charge-result .result-price ul li:last-child { margin-bottom: 0; }
.prepaid-charge-result .result-price ul li b{font-size: 17px;}
.prepaid-charge-result .result-price .text{font-size: 15px;padding:15px 0 15px 21px; position: relative;}
.prepaid-charge-result .result-price .text:after{clear:both;content:'';display:block;width: 21px;height: 100%;background: url(../images/16-information2.svg) no-repeat left center;background-size:16px;position: absolute;top: 0;left: 0;}
.prepaid-charge-result .payment-proceed { padding: 0 5%; }
.prepaid-charge-result .payment-proceed .payment-btn { display: block; background: #462201; font-size: 17px; line-height: 56px; text-align: center; color: #fff; border-radius: 10px; font-weight: bold; }

/* new 카드 충전 */
.gift-payment .pay-section { width: 100%; background: #fff; padding: 0px 5%; box-sizing: border-box; }
.gift-payment .pay-section .pay-section-title { font-size: 15px; font-weight: 500; line-height: 1.53; color: #4c5054; margin-bottom: 8px; text-indent: 4px; }
.gift-payment .pay-section .wrap { margin-bottom: 24px; }
.gift-payment h2 { font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; padding-top: 20px; margin-bottom: 8px; box-sizing: border-box; font-size: 17px; }
.gift-payment input[type=text] { font-size: 17px; border-radius: 8px; border: solid 1px #b4b9be; color: #0d0f11; width: 100%; display: block; height: 50px; padding: 0 12px; line-height: 50px; box-sizing: border-box; }
.gift-payment .noti { font-size: 13px; color: #64696e; position: relative; padding-left: 21px; line-height: 30px;}
.gift-payment .noti:after{clear:both;content:'';display:block;width: 21px;height: 100%;position: absolute;top: 0;left: 0;background: url(../images/16-information2.svg) no-repeat left center;background-size:16px;}
.gift-payment .payments .prepaid-img-wrap { display: flex; align-items: center; padding: 16px 12px;border:1px solid #dee1e4;border-radius: 10px; box-sizing: border-box;margin: 12px 0 26px;}
.gift-payment .payments .prepaid-img-wrap .prepaid-img, .charge-img-wrap .prepaid-img { width: 90px; height: 60px; background: #eee; }
.gift-payment .payments .prepaid-img-wrap p{font-size: 17px;width: 190px;padding-left: 16px;overflow: hidden;}
.gift-payment .payments .prepaid-img-wrap, .charge-img-wrap .prepaid-img img { width: 100%; }
.gift-payment .payments .prepaid-img-wrap a { display: block; font-size: 15px; color: #464b50; padding: 6px 0; width: 105px; border: 1px solid #dee1e4; box-sizing: border-box; border-radius: 100px; text-align: center; }
.gift-payment .payments .charge-opt { width: 100%; position: relative; padding-bottom: 24px; }
.gift-payment .payments .charge-opt .flex {display: flex;margin-bottom: 8px;}
.gift-payment .payments .charge-opt label { display: block; position: relative; margin-right: 5px; border-radius: 6px; padding: 12px 0; width: 25%; text-align: center; background-color: #e8ebee; color: #969ba0; font-size: 14px; -webkit-tap-highlight-color: transparent; }
.gift-payment .payments .charge-opt label:last-child { margin-right: 0; }
.gift-payment .payments .charge-opt input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; }
.gift-payment .payments .charge-opt input[type="radio"]:checked + label { background-color: #0d0f11; color: #fff; font-weight: bold; }
.text-count { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #888888; }

.gift-payment .pay-price { width: 100%; background: #fff; padding: 15px 5% 0; box-sizing: border-box; }
.gift-payment .pay-price .inner { box-shadow: 0 1px 0 0 #ececec; padding-bottom: 13px; margin-bottom: 1px; }
.gift-payment .pay-price p { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.gift-payment .pay-price .price-items, .order-payment .pay-price .price-discount, .order-payment .pay-price .price-delivery { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 12px; }
.gift-payment .pay-price .price-items b, .order-payment .pay-price .price-discount b, .order-payment .pay-price .price-delivery b { font-size: 15px; font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }
.gift-payment .pay-price .price-total { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.gift-payment .pay-price .price-total b { font-size: 19px; line-height: 1.53; letter-spacing: -0.5px; color: #ff3750; }

.gift-payment .payment-proceed { width: 100%; background: #fff; padding: 20px 5%; box-sizing: border-box; /* toggle area */ }
.gift-payment .payment-proceed .payment-btn-area .payment-btn { width: 100%; height: 56px; display: block; line-height: 56px; text-align: center; color: #fff; background-color: #c9cdd1; font-weight: bold; margin-top: 20px; border-radius: 10px; font-size: 19px; font-weight: bold; }

.notice-fold .title {margin-bottom: 0;}
.notice-fold .flex {display: flex; align-items: center; justify-content: space-between;height: 42px;}
.notice-fold .flex .btn-fold {width: 24px; height: 24px; background: url('../images/btn-dropdown-24.svg');transform: rotateX(180deg);}
.notice-fold.folded .flex .btn-fold {transform: rotateX(0deg);}

/* 2023.01.27 */

/* 선물 장바구니 */
.gift-cart .cart-list { width: 100%; }

.gift-cart .cart-list .cart-title { font-weight: 500; line-height: 1.53; letter-spacing: -0.5px; padding: 0 5%; margin-top: 20px; box-sizing: border-box; font-size: 17px; }

.gift-cart .cart-list ul { width: 100%; padding: 0 5%; box-sizing: border-box; background: #fff; }

.gift-cart .cart-list ul li { margin-bottom: 1px; width: 100%; padding: 24px 0; display: flex; align-items: flex-start; position: relative; background: #fff; box-sizing: border-box; box-shadow: 0 1px 0 0 #edf1f3; }

.gift-cart .cart-list ul li:last-child { box-shadow: none; margin-bottom: 0; }

.gift-cart .cart-list ul li .cart-list-left { width: 80px; height: 80px; margin-right: 16px; position: relative; overflow: hidden; border-radius: 50%; }

.gift-cart .cart-list ul li .cart-list-left img { height: 100%; z-index: -1; margin: 0 auto; }

.gift-cart .cart-list ul li .cart-list-right { width: calc(100% - 96px); position: relative; }

.gift-cart .cart-list ul li .cart-list-right h4 { font-size: 15px; line-height: 1.54; width: calc(100% - 44px); }

.gift-cart .cart-list ul li .cart-list-right .cart-opt { margin-bottom: 12px; }

.gift-cart .cart-list ul li .cart-list-right .cart-opt p { font-size: 13px; color: #464b50; line-height: 1.62; }

.gift-cart .cart-list ul li .cart-list-right .amount-box { display: flex; align-items: center; justify-content: space-between; padding: 13px 0 0 0; box-shadow: none; }

.gift-cart .cart-list ul li .cart-list-right .amount-box .price { font-size: 17px; }

.gift-cart .cart-list ul li .cart-delete-btn { position: absolute; top: 24px; right: 0px; width: 40px; height: 40px; background: url("../images/btn-cart-delete.svg") no-repeat right top; }

.gift-cart .cart-list.sold-out { box-shadow: 0 1px 0 0 #edf1f3; }

.gift-cart .cart-list.sold-out .sold-out-title { width: 100%; background: #fff; padding: 15px 5% 0; position: relative; box-sizing: border-box; }

.gift-cart .cart-list.sold-out .sold-out-title b { font-size: 15px; color: #444444; }

.gift-cart .cart-list.sold-out ul li .cart-list-left::after { content: '품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 80px; width: 80px; color: #fff; border-radius: 50%; line-height: 80px; text-align: center; font-size: 13px; font-weight: 500; }

.gift-cart .cart-list.sold-out ul li .cart-list-right::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); display: block; content: ''; }

.gift-cart .cart-notice { width: 100%; background-color: #f8fafc; height: 59px; box-shadow: 0 -1px 0 0 #edf1f3; margin-bottom: 4px; line-height: 59px; text-align: center; font-size: 13px; margin-top: 1px; }

.gift-cart .total-price { width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; padding: 15px 0; box-shadow: 0 -1px 0 0 #dee1e4; }

.gift-cart .total-price .price-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; box-sizing: border-box; margin-bottom: 10px; }

.gift-cart .total-price h5 { font-size: 14px; font-weight: normal; color: #444; }

.gift-cart .total-price b { font-size: 18px; color: #fb3b7c; }

.gift-cart .total-price small { font-size: 14px; font-weight: normal; color: #fb3b7c; }

.gift-cart .cart-gift-btn-area { width: 100%; padding: 0px 3%; box-sizing: border-box; background: #fff; }

.gift-cart .cart-gift-btn-area a.cart-gift-btn { display: block; width: 100%; height: 48px; background-color: #fb3b7c; text-align: center; line-height: 48px; color: #fff; border-radius: 7px; font-size: 16px; font-weight: bold; }

.gift-cart .cart-gift-btn-area a.cart-gift-btn-unable { display: block; width: 100%; height: 48px; background-color: #c1c1c1; text-align: center; line-height: 48px; color: #fff; border-radius: 7px; font-size: 16px; font-weight: bold; }


.gift-result .result-pay { width: 100%; background: #fff; padding: 20px 5%; box-sizing: border-box; }

.gift-result .result-pay .rp-sec { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 4px; box-sizing: border-box; border-top: 1px solid #edf1f3; }

.gift-result .result-pay .rp-sec:first-child { border-top: none; }

.gift-result .result-pay .rp-sec p { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #464b50; }

.gift-result .result-pay .rp-sec span { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; }

.gift-result .result-pay .price-total b { font-size: 19px; line-height: 1.53; letter-spacing: -0.5px; color: #ff3750; }


/* 2023.02.14 order_payment 선물하기 쿠폰 적용 */

.order-payment .pay-coupon { padding-bottom: 12px; }

.order-payment .pay-coupon h2.pay-list-title { margin-bottom: 0; }

.order-payment .pay-coupon dl { padding-bottom: 12px; }

.order-payment .pay-coupon dl dt a { position: relative; display: block; font-size: 15px; color: #464b50; padding: 16px 0 4px; box-sizing: border-box; line-height: 23px; }

.order-payment .pay-coupon dl dt a::after { clear: both; content: ''; display: block; position: absolute; right: 0; top: 15.5px; width: 24px; height: 24px; background: url(../images/24-more.svg) no-repeat; background-size: 100%; }

.order-payment .pay-coupon dl dd { height: 40px; display: flex; }

.order-payment .pay-coupon dl dd .delete-btn { display: block; width: 30px; height: 40px; background: url(../images/24-delete.svg) no-repeat left center; background-size: 24px; }

.order-payment .pay-coupon dl dd .flex { width: calc(100% - 30px); display: flex; justify-content: space-between; }

.order-payment .pay-coupon dl dd .flex span { min-width: 90px; text-align: right; }

.order-payment .pay-coupon .line { width: 100%; height: 1px; background: #edf1f3; }

.order-payment .pay-coupon .noti { position: relative; font-size: 13px; color: #464b50; padding-left: 20px; }

.order-payment .pay-coupon .noti::before { clear: both; content: ''; display: block; width: 16px; height: 16px; position: absolute; left: 0; background: url(../images/16-information2.svg) no-repeat; }

/*  */

.pop-gift-coupon { width: 100%; position: fixed; left: 0; top: 0; height: 100vh; z-index: 99; display: none; }

.pop-gift-coupon .back { width: 100%; position: absolute; left: 0; top: 0; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: -1; }

.pop-gift-coupon .content { position: fixed; left: 0; bottom: 0; background: #fff; border-radius: 12px 12px 0 0; padding-top: 32px; width: 100%; height: 614px; box-sizing: border-box; }

.pop-gift-coupon .content h4 { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 16px; color: #0d0f11; }

.pop-gift-coupon .content .coupon-import { padding: 0 18px; }

.pop-gift-coupon .content .coupon-import a { display: block; border: 1px solid #a5aaaf; font-size: 15px; color: #202326; padding: 14px 0; border-radius: 8px; }

.pop-gift-coupon .content .coupon-import a p { text-align: center; padding-left: 30px; position: relative; }

.pop-gift-coupon .content .coupon-import a p:after { clear: both; content: ''; display: block; position: absolute; top: 0; left: -125px; right: 0; width: 20px; height: 20px; background: url(../images/gift_add.svg) no-repeat center; margin: auto; }

.pop-gift-coupon .content .coupon-list { padding-bottom: 120px; overflow-y: scroll; height: 100%; padding-bottom: 163px; }

.pop-gift-coupon .content .coupon-list label { position: relative; margin-left: 30px; min-height: 82px; display: flex; flex-wrap: wrap; align-items: center; box-shadow: 0 1px 0 0 #edf1f3; padding: 16px 0; box-sizing: border-box; }

.pop-gift-coupon .content .coupon-list label:last-child { box-shadow: none; }

.pop-gift-coupon .content .coupon-list label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }

.pop-gift-coupon .content .coupon-list label input[type="checkbox"] + span { display: block; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url("../images/btn-checkbox-off.svg") no-repeat center; }

.pop-gift-coupon .content .coupon-list label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-checkbox-on.svg") no-repeat center; }

.pop-gift-coupon .content .coupon-list .txt { width: 100%; display: flex; justify-content: space-between; align-items: center; }

.pop-gift-coupon .content .coupon-list .txt p { width: 216px; position: relative; }

.pop-gift-coupon .content .coupon-list .txt p .new { width: 46px; height: 20px; position: absolute; background: url(../images/badge-new.svg) no-repeat center; background-size: 46px; padding-left: 8px; }

.pop-gift-coupon .content .btn-wrap { position: fixed; bottom: 0; left: 0; right: 0; padding: 20px 18px; }

.pop-gift-coupon .content .btn-wrap .price-status .flex { display: flex; justify-content: space-between; padding-bottom: 10px; font-size: 15px; color: #202326; }

.pop-gift-coupon .content .btn-wrap .price-status .flex .remain-price { color: #ff3750; font-weight: bold; font-size: 17px; }
.pop-gift-coupon .content .btn-wrap .wrapper {display: flex; align-items: center; justify-content: space-between;}
.pop-gift-coupon .content .btn-wrap .wrapper a {display: block; height: 56px; text-align: center; color: #fff; font-weight: bold; border-radius: 10px; font-size: 17px; line-height: 56px; width: 49%;}
.pop-gift-coupon .content .btn-wrap .wrapper a.reset { background: rgba(241, 122, 170, 0.1);color: #462201;}
.pop-gift-coupon .content .btn-wrap .wrapper a.submit {background-color: #cacdd0;}
.pop-gift-coupon .content .btn-wrap .wrapper a.submit.on {background-color: #462201;}

.pop-gift-coupon .content .gift-coupon-list {padding-bottom: 240px!important;}
.pop-gift-coupon .content .btn-wrap {background-color: #fff;}

/* 카드 상세 수정 prepaid_detail_2 */
.prepaid-detail-2 {padding-bottom: 50px;}
.prepaid-detail-2 .card-img{padding: 28px 0;}
.prepaid-detail-2 .card-img img{height: 160px;margin:auto;}
.prepaid-detail-2 .card-wrap{border:1px solid #dee1e4;border-radius: 10px;padding: 0 24px;box-sizing: border-box;}
.prepaid-detail-2 .card-wrap .card-title{padding-top: 29px;}
.prepaid-detail-2 .card-wrap .card-title h3{font-size: 15px;line-height: 1.53;font-weight: normal;}
.prepaid-detail-2 .card-wrap .card-title .flex{display:flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.prepaid-detail-2 .card-wrap .card-title .flex p{width:calc(100% - 70px);font-size: 17px;font-weight: 500;}
.prepaid-detail-2 .card-wrap .card-title .flex a{display:inline-block;font-size: 15px;color:#464b50;line-height: 1.53;border:1px solid #dee1e4;border-radius: 100px;padding: 3px 16px;}
.prepaid-detail-2 .card-wrap .card-balance{display:flex;justify-content:space-between;align-items: center;padding: 20px 0;border-bottom:1px solid #edf1f3;}
.prepaid-detail-2 .card-wrap .card-balance span{font-size: 15px;}
.prepaid-detail-2 .card-wrap .card-balance b{font-size: 21px;line-height: 1.52;}
.prepaid-detail-2 .card-wrap .card-btns{padding: 20px 0;}
.prepaid-detail-2 .card-wrap .card-btns a{position: relative;font-size: 15px;display:block;line-height: 1.53;color:#0d0f11;}
.prepaid-detail-2 .card-wrap .card-btns a:after{clear:both;content:'';display:block;position: absolute;top: 0;right: 0;width: 24px;height: 100%;background: url(../images/next.svg) no-repeat center;background-size:100%;}
.prepaid-detail-2 .card-wrap .card-btns a:first-child{margin-bottom: 25px;}
.prepaid-detail-2 .card-wrap .card-barcode{border-top:1px solid #edf1f3;}
.prepaid-detail-2 .card-wrap .card-barcode a{display:block;padding:20px 0 24px;font-size: 15px;color:#000;line-height: 1.53;position: relative;}
.prepaid-detail-2 .card-wrap .card-barcode a:after{clear:both;content:'';display:block;width: 24px;height: 100%;position: absolute;top: 0;right: 0;background:url(../images/up.svg) no-repeat center;background-size:100%;transform: rotate(0deg);transition: all 0.5s;}
.prepaid-detail-2 .card-wrap .card-barcode a.hide:after{transform: rotate(180deg);transition: all 0.5s;}
.prepaid-detail-2 .card-wrap .card-barcode .barcode{margin:auto;}
.prepaid-detail-2 .card-wrap .card-barcode p{font-size: 15px;line-height: 1.53;padding-top: 8px;text-align: center;padding-bottom: 27px;}

/* 기존 카드 충전 prepaid_charge_existed_card */
.prepaid-charge .charge-img-wrap-2{display: flex;flex-wrap: wrap;align-items:center;padding: 16px 12px;margin: 13px 0 26px;border:1px solid #dee1e4;border-radius: 10px;}
.prepaid-charge .charge-img-wrap-2 .prepaid-img{width: 90px;height: 60px;margin-right: 16px;}
.prepaid-charge .charge-img-wrap-2 .prepaid-img img{height: 100%;}
.prepaid-charge .charge-img-wrap-2 .text{width: calc(100% - 110px);}
.prepaid-charge .charge-img-wrap-2 .text b{display:block;font-size: 17px;line-height: 1.53;font-weight: 500;}
.prepaid-charge .charge-img-wrap-2 .text p{padding-top: 4px;font-size: 15px;line-height: 1.53;}

/* 새 카드 구매 이미지 prepaid_image_detail */
.gift-prepaid-img .prepaid-new-img{padding: 0 5%;}
.gift-prepaid-img .prepaid-new-img ul{padding-top: 16px;}
.gift-prepaid-img .prepaid-new-img ul li{padding-bottom: 24px;}
.gift-prepaid-img .prepaid-new-img ul li a{display:block;}
.gift-prepaid-img .prepaid-new-img ul li a .img{width: 100%;border-radius: 30px;overflow: hidden;}
.gift-prepaid-img .prepaid-new-img ul li a .img img{width: 100%;}
.gift-prepaid-img .prepaid-new-img ul li a p{color:#0d0f11;line-height: 1.53;font-size: 15px;font-weight: 500;padding-top: 12px;}

/* 20230224 선물하기 v2 */

/* 선물하기 메인 gift_index, prepaid_index 배너 */
section.gift-index-banner{ width: 100%; padding: 21px 5%; box-sizing: border-box;}
section.prepaid-index-banner { width: 100%; margin-bottom: 40px;}
section.gift-index-banner a, section.prepaid-index-banner a { width: 100%; height: auto; }
section.gift-index-banner a img, section.prepaid-index-banner a img { width: 100%; height: auto; }
section.gift-index-banner a img {border-radius: 20px;}
section.gift-index-banner .swiper-slide img {border-radius: 20px;width: 100%; height: auto; }
section.gift-index-banner .swiper-pagination {text-align: center;width: 100%;box-sizing: border-box; position: relative!important;}
section.gift-index-banner .swiper-pagination .swiper-pagination-bullet {margin-right: 8px;background-color: #c9cdd1;transition: 0.2s;}
section.gift-index-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 16px;border-radius: 10px;background-color: #464b50;}

/* 20220623 */
section.gift-event-item { width: 100%; margin-bottom: 40px;margin-top: 32px; }
section.gift-event-item .inner { width: 100%; padding-right: 0; padding-left: 0;box-sizing: border-box; }
section.gift-event-item .inner ul {padding-left: 5%; box-sizing: border-box;  }
section.gift-event-item .inner ul li { padding: 24px 16px; border-radius: 12px;border: solid 1px #dee1e4; width: 142px;box-sizing: border-box;margin-right: 12px;}
section.gift-event-item .inner ul li:last-of-type { margin-right: 40px; }
section.gift-event-item .inner ul li a { width: 100%; display: flex;align-items: center; justify-content: center;flex-wrap: wrap;}
section.gift-event-item .inner ul li a .img {width: 110px; height: 110px;margin-bottom: 12px; background-color: #f8fafc;}
section.gift-event-item .inner ul li a .img img { width: 110px; height: 110px; }
section.gift-event-item .inner ul li a .txt { width: 100%; padding: 0 4px; box-sizing: border-box; text-align: center;}
section.gift-event-item .inner ul li a .txt span.shadow { font-size: 12px; line-height: 1.5; color: #0d0f11; }
section.gift-event-item .inner ul li a .txt h4 { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }
section.gift-event-item .inner ul li a .txt b { font-size: 17px; line-height: 1.53; letter-spacing: -0.39px; }
section.gift-event-item .inner ul li a .txt b small {text-decoration: line-through;  font-size: 13px;line-height: 1.54;color: #0d0f11;font-weight: normal;}
section.gift-event-item .inner ul li.soldout a .img::after { content:'품절'; display: block; background-color: rgba(0, 0, 0, 0.5);position: absolute; left: 16px; top: 24px;width: 110px; height: 110px;  letter-spacing: -0.3px;text-align: center;color: #fff;line-height: 110px; font-size: 13px;font-weight: 500;}

p.orig-price {height: 26px;}
p.orig-price .discount-percent { font-size: 13px;font-weight: 500;line-height: 1.54; margin-right: 10px;}
p.orig-price .strike {text-decoration: line-through;  font-size: 13px;font-weight: 500;line-height: 1.54;color: #a5aaaf;}
section.gift-event-item .inner ul li a .txt .badge { display: flex; align-items: center; justify-content: center; height: 16px; }
section.gift-event-item .inner ul li a .txt .badge .best { width: 31px; height: 12px; background: url("../images/img_best.svg") no-repeat; margin-right: 2px; background-size:100%;}
section.gift-event-item .inner ul li a .txt .badge .new { width: 29px; height: 12px; background: url("../images/img_new.svg") no-repeat; background-size:100%;}

.gift-items { width: 100%; margin-bottom: 40px; }
.gift-items .inner { padding-right: 0; padding-left: 0; }
.gift-items .inner ul { padding-left: 5%; box-sizing: border-box; }
.gift-items .inner ul li { width: 110px; margin-right: 8px; }
.gift-items .inner ul li .img {display:flex;justify-content: center; width: 110px; height: 110px; border-radius: 2px; background-color: #f8fafc; margin-bottom: 16px; }
.gift-items .inner ul li .img img { height: 100%;}
.gift-items .inner ul li .txt h4 { font-size: 13px; line-height: 1.54; margin-bottom: 2px; font-weight: normal; }
.gift-items .inner ul li .txt b { font-size: 15px; line-height: 1.53; }
.gift-items .inner ul li:last-of-type { margin-right: 40px; }
.gift-items .inner ul li.soldout a .img::after { content:'품절'; display: block; background-color: rgba(0, 0, 0, 0.5);position: absolute; left: 0; top: 0;width: 110px; height: 110px;  letter-spacing: -0.3px;text-align: center;color: #fff;line-height: 110px; font-size: 13px;font-weight: 500;}

.gift-category ul.item-list-3 li a .txt .badge .best { width: 31px; height: 12px; background: url("../images/img_best.svg") no-repeat; margin-right: 2px; background-size:100%;}
.gift-category ul.item-list-3 li a .txt .badge .new { width: 29px; height: 12px; background: url("../images/img_new.svg") no-repeat; background-size:100%;}

.gift-box-list .gift-received {padding: 0 4px;box-sizing: border-box;display: flex; align-items: center; flex-wrap: wrap;justify-content: space-between;}
.gift-box-list .gift-received li {width: calc((100% - 12px)/2);border-radius: 12px; border: solid 1px #dee1e4; height: 222px;box-sizing: border-box;padding: 24px;margin-bottom: 20px;}
.gift-box-list .gift-received li a {width: 100%;display: flex; justify-content: center;flex-wrap: wrap;text-align: center;}
.gift-box-list .gift-received li a .img {width: 80px; height: 80px;margin-bottom: 4px; position: relative;border-radius: 50%;overflow: hidden; display: flex; justify-content: center; align-items: center;}
.gift-box-list .gift-received li a .img img {height: 100%;}
.gift-box-list .gift-received li a .txt {}
.gift-box-list .gift-received li a .txt .store {  font-size: 12px;text-align: center;color: #6400c8;margin-bottom: 8px;}
.gift-box-list .gift-received li a .txt h4 {  font-size: 14px;color: #0d0f11; height: 36px;margin-bottom: 8px;}
.gift-box-list .gift-received li a .txt .from {  font-size: 12px;font-weight: 500;color: #202326;}
.gift-box-list .gift-received li.used a .img::after { content: '사용완료'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }
.gift-box-list .gift-received li.end a .img::after { content: '기간만료'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }
.gift-box-list .gift-received li.canceled a .img::after { content: '결제취소'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }


.gift-box-list .gift-sent {padding: 0 4px;box-sizing: border-box;display: flex; align-items: center; flex-wrap: wrap;justify-content: space-between;}
.gift-box-list .gift-sent li {width: 100%;border-radius: 12px; border: solid 1px #dee1e4; height:auto;box-sizing: border-box;padding: 20px 18px;margin-bottom: 12px;}
.gift-box-list .gift-sent li a {width: 100%;display: flex; justify-content: center;flex-wrap: wrap;align-items: center;}
.gift-box-list .gift-sent li a .img {width: 80px; height: 80px;margin-right: 12px;position: relative; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.gift-box-list .gift-sent li a .img img {height: 100%;}
.gift-box-list .gift-sent li a .txt {width: calc(100% - 92px);}
.gift-box-list .gift-sent li a .txt .store {  font-size: 12px;text-align: center;color: #6400c8;margin-bottom: 4px;}
.gift-box-list .gift-sent li a .txt h4 {  font-size: 14px;color: #0d0f11;margin-bottom: 4px;}
.gift-box-list .gift-sent li a .txt .to {  font-size: 12px;font-weight: 500;color: #202326;}
.gift-box-list .gift-sent li.used a .img::after { content: '사용완료'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }
.gift-box-list .gift-sent li.end a .img::after { content: '기간만료'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }
.gift-box-list .gift-sent li.canceled a .img::after { content: '결제취소'; display: block; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; text-align: center; line-height: 80px; font-size: 11px; font-weight: bold; }


/* 선물 쿠폰 등록하기, 선불카드 등록하기 */
.popup-header .nav-close { background: url("../images/nav-close.svg") no-repeat center; }
.popup-header .nav { width: 30px; height: 30px; display: block; }
.popup-header .nav-left { position: absolute; left: 5%; top: 18px; }
.popup-header { width: 100%; height: 66px; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 30; background: #fff; }
.popup-header h1 { text-align: center; font-size: 18px; color: #000000; line-height: 66px; font-size: 17px; font-weight: 500; letter-spacing: -0.39px; }
.gift-regist {width: 100%; height: 100vh; overflow: scroll; position: fixed; left: 0; top: 0;background-color: #fff;display: none;}
.gift-regist h3 { font-size: 21px;line-height: 1.52;color: #0d0f11; }
.gift-regist .regist-coupon {margin-top: 86px;margin-bottom: 44px;}
.regist-coupon .input-wrap { width: 100%; position: relative; box-sizing: border-box; }
.regist-coupon .input-wrap p { font-size: 15px; line-height: 1.53; margin: 20px 0 40px; }
.regist-coupon .input-wrap span.noti { font-size: 13px; line-height: 1.54; display: block; margin-top: 8px; }

.regist-coupon .input-box { width: 100%; position: relative; height: 54px; border-bottom: 1px solid #dee1e4; margin-bottom: 8px; }
.regist-coupon .input-box input { height: 54px; line-height: 54px; font-size: 17px; line-height: 1.53; letter-spacing: -0.37px; color: #0d0f11; width: calc(100% - 56px); padding-left: 4px; box-sizing: border-box; border: none; }
.regist-coupon .input-box input:focus { outline: none; }
.regist-coupon .input-box a {  display: block; position: absolute; right: 16px; top: 0; height: 54px; line-height: 54px; font-size: 13px; font-weight: 500; letter-spacing: -0.3px; text-align: center}
.regist-coupon .input-box.confirmed a.btn-confirm { color: #37dc28; }


/* 상품정보 gift_item_detail */
/* 메뉴 상세 -v2 */
.gift-item-detail { width: 100%; /* 옵션선택 공통 */ }

.gift-item-detail .gift-item { padding: 15px 5% 24px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; box-sizing: borde-box; }

.gift-item-detail .gift-item .img { width: 130px; height: 130px; position: relative; overflow: hidden; margin: 0 auto 16px; }

.gift-item-detail .gift-item .img img { height: 100%; margin: 0 auto; }

.gift-item-detail .gift-item .img .lg { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: url("../images/order_detail_enlg.svg"); }

.gift-item-detail .gift-item.soldout .img::after { content: '품절'; display: block; background-color: rgba(13, 15, 17, 0.6); position: absolute; left: 0; top: 0; height: 130px; width: 130px; color: #fff; border-radius: 50%; line-height: 130px; text-align: center; font-size: 13px; font-weight: bold; }

.gift-item-detail .gift-item h3 { width: 100%; text-align: center; margin-bottom: 8px; font-size: 17px; font-weight: 500; line-height: 1.53; }

.gift-item-detail .gift-item p { font-size: 13px; line-height: 1.54; text-align: center; }

.gift-item-detail .opt-box { width: 100%; box-sizing: border-box; padding: 0 5%; box-sizing: border-box; }

.gift-item-detail .opt-box .opt-req-wrap { width: 100%; margin-top: 32px; }

.gift-item-detail .opt-box .opt-req-wrap h2 { font-size: 17px; font-weight: 500; line-height: 1.53; margin-bottom: 8px; }

.gift-item-detail .opt-box .opt-req-wrap .opt-req input { position: absolute; left: 0; top: 0; visibility: hidden; }

.gift-item-detail .opt-box .opt-req-wrap .opt-req input#ice:checked + label { background-color: #0084ff; color: #fff; border: none; font-weight: bold; }

.gift-item-detail .opt-box .opt-req-wrap .opt-req input#hot:checked + label { background-color: #ff3750; color: #fff; border: none; font-weight: bold; }

.gift-item-detail .opt-box .opt-req-wrap .opt-req label { padding: 0px 24px; border-radius: 19px; border: solid 1px #c9cdd1; box-sizing: border-box; height: 39px; font-size: 15px; letter-spacing: -0.5px; color: #64696e; line-height: 39px; position: relative; display: inline-block; margin-right: 8px; }

.gift-item-detail .opt-box .opt-req-wrap p { font-size: 13px; line-height: 1.54; letter-spacing: -0.5px; color: #000; }

.gift-item-detail .opt-box .opt-req-wrap a { text-decoration: underline; font-size: 13px; line-height: 1.54; letter-spacing: -0.5px; }

.gift-item-detail .opt-box .opt-personal-wrap { width: 100%; margin: 40px 0 24px; }

.gift-item-detail .opt-box .opt-personal-wrap .personal-dropdown { display: flex; align-items: center; justify-content: space-between; height: 42px; }

.gift-item-detail .opt-box .opt-personal-wrap .personal-dropdown b { font-size: 17px; font-weight: 500; line-height: 1.53; color: #000; }

.gift-item-detail .opt-box .opt-personal-wrap .personal-dropdown span { display: inline-block; width: 24px; height: 24px; background: url("../images/btn-dropdown-large.svg"); }

/* .gift-item-detail .opt-box .opt-personal-wrap .opt-personal { display: none; } */

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio { margin-top: 24px; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio h2 { font-size: 15px; font-weight: 500; line-height: 1.53; color: #4c5054; margin-bottom: 8px; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex { display: flex; justify-content: space-between; margin-bottom: 10px; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex:last-of-type { margin-bottom: 0; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label { height: 24px; display: block; position: relative; padding-left: 28px; color: #0d0f11; width: calc(100% - 108px); font-size: 17px; line-height: 24px; color: #0d0f11; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"] + span { display: block; position: absolute; left: 0px; top: 50%; width: 24px; height: 24px; box-sizing: border-box; transform: translateY(-50%); background: url("../images/btn-radio-off.svg") no-repeat center; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"]:checked + span { border: none; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex label input[type="radio"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background: url("../images/btn-radio-on.svg") no-repeat center; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-radio .flex p { font-size: 15px; line-height: 20px; color: #0d0f11; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check { margin-top: 24px; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check h2 { font-size: 15px; font-weight: 500; line-height: 1.53; color: #4c5054; margin-bottom: 8px; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex { display: flex; justify-content: space-between; margin-bottom: 10px; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex:last-of-type { margin-bottom: 0; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label { height: 20px; display: block; position: relative; padding-left: 28px; color: #0d0f11; width: calc(100% - 104px); font-size: 17px; line-height: 20px; color: #0d0f11; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"] + span { display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; border: 1px solid #c9cdd1; border-radius: 50%; box-sizing: border-box; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"]:checked + span { border: none; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-checkbox-on.svg") no-repeat center; }

.gift-item-detail .opt-box .opt-personal-wrap .opt-personal .opt-check .flex p { font-size: 15px; line-height: 20px; color: #0d0f11; }

/* amount */
.amount-box { width: 100%; padding: 24px 5%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: #fff; box-shadow: 0 1px 0 0 #dfdfdf; }

/* .amount-box .price { font-size: 22px; font-weight: bold; color: #0d0f11; } */

.amount-box .amount { display: flex; align-items: center; justify-content: space-between; width: 120px; padding-right: 1px; font-size: 17px; }

.amount-box .amount .num-down { width: 24px; height: 24px; display: block; background: url("../images/btn-amount-min.svg") no-repeat center; }
.amount-box .amount .num-down.disabled { background: url("../images/btn-amount-min-disabled.svg") no-repeat center; }

.amount-box .amount .num-up { width: 24px; height: 24px; display: block; background: url("../images/btn-amount-plus.svg") no-repeat center; }

.amount-box .amount .num-up.off { background: url("../images/num_up_disabled.svg") no-repeat center; }

.gift-item-detail .recommend { width: 100%; margin: 24px 0 41px; }

.gift-item-detail .recommend h3 { font-size: 17px; line-height: 1.53; margin: 0 5% 20px; box-sizing: border-box; text-indent: 4px; }

.gift-item-detail .recommend .inner { width: 100%; padding: 0 5%; box-sizing: border-box; }

.gift-item-detail .recommend .inner ul { width: 100%; }

.gift-item-detail .recommend .inner ul li { width: 110px !important; padding: 12px 0; position: relative; margin-right: 10px; }

.gift-item-detail .recommend .inner ul li a { width: 100%; display: flex; align-items: center; box-sizing: border-box; position: relative; flex-wrap: wrap; }

.gift-item-detail .recommend .inner ul li a .img { width: 100%; height: 110px; overflow: hidden; background: #f8fafc; }

.gift-item-detail .recommend .inner ul li a .img img { height: 100%; width: auto;  }

.gift-item-detail .recommend .inner ul li a .txt { width: 100%; text-align: center; padding-top: 8px; }

.gift-item-detail .recommend .inner ul li a .txt h4 { font-size: 15px; line-height: 1.53; letter-spacing: -0.5px; color: #0d0f11; font-weight: normal; }

.gift-item-detail .recommend .inner ul li a .txt b { font-size: 17px; line-height: 1.53; letter-spacing: -0.39px; color: #0d0f11; }

/* 주문버튼 */
.gift-detail-bottom { width: 100%; padding: 20px 5%; box-sizing: border-box; }

.gift-detail-bottom .gift-total-price { width: 100%; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0px 4px; box-sizing: border-box; height: 40px; margin-bottom: 20px; }

.gift-detail-bottom .gift-total-price p { font-size: 15px; line-height: 1.53; }

.gift-detail-bottom .gift-total-price span { font-size: 19px; font-weight: bold; line-height: 1.53; letter-spacing: -0.5px; text-align: right; color: #ff3750; }

.gift-detail-bottom .gift-btn-area { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }

.gift-detail-bottom .gift-btn-area .btn-add-cart { width: 49.5%; height: 56px; box-sizing: border-box; border-radius: 8px; line-height: 56px; text-align: center; font-size: 17px; font-weight: bold; }

.gift-detail-bottom .gift-btn-area .btn-gift-now { width: 49.5%; height: 56px; box-sizing: border-box; border-radius: 8px; line-height: 56px; text-align: center; font-size: 17px; font-weight: bold; color: #fff; }

.gift-detail-bottom .gift-btn-area .btn-soldout { width: 100%; height: 56px; box-sizing: border-box; border-radius: 10px; background-color: #cacdd0; color: #fff; line-height: 56px; text-align: center; border: none; font-size: 17px; font-weight: bold; }

.gift-detail-bottom .gift-btn-area .btn-go-gift { width: 100%; height: 56px; box-sizing: border-box; border-radius: 10px; background-color: #cacdd0; color: #fff; line-height: 56px; text-align: center; border: none; font-size: 17px; font-weight: bold; }

.regist-coupon {margin-bottom: 44px;margin-top: 20px;}
.regist-coupon .regist-title {  font-size: 21px;line-height: 1.52;color: #0d0f11; margin-left: 5%!important;}

/* 230314 order_payment 간편카드 입력창 */
.payu-info {padding-bottom: 20px; margin:0 5%;}
.payu-info p {font-size: 10px; color: #d20b10; margin-bottom: 10px}
.payu-info input {padding: 11px 10px; width: 100%; box-sizing: border-box; color: #666666; font-size: 12px; border-radius: 6px!important; border: solid 1px #a8a8a8!important; background: #fff!important;}

/* 20230718 쿠폰북 장바구니쿠폰 추가 */
.coupon-tab{padding: 0 5% 0;}
.coupon-tab ul{border:1px solid #dee1e4;border-radius: 50px;display: flex;padding: 0 6px;box-sizing: border-box;}
.coupon-tab ul li{width: 100%;padding: 7px 6px;height: 36px;}
.coupon-tab ul li a{height: 100%;display:block;font-size: 15px;font-weight: 500;border-radius: 18px;text-align: center;line-height:36px;color:#64696e;}
.coupon-tab ul li a.on{background: #2e1617;color:#fff;font-weight: bold;}
/* .content-dropdown.add-flex{display: flex;justify-content: space-between;}
.content-dropdown .add-coupon{display:inline-block;color:#464b50;font-size: 15px;font-weight: 500;border:1px solid #dee1e4;border-radius: 100px;padding: 6px 16px;} */

/* 본인인증 20230807 */
.checkplus-top { width: 100%; padding: 12px calc(5% + 5px) 0; box-sizing: border-box; margin-bottom: 40px; }

.checkplus-top h2 { margin-bottom: 44px; font-size: 22px; color: #0d0f11; line-height: 1.52; letter-spacing: -0.45px; font-weight: bold; }

.checkplus-top .btn-single { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); padding:0px 5%; box-sizing:border-box; }

.checkplus-top p { margin-top: 20px; font-size: 15px; line-height: 1.53; color: #0d0f11; }

/* 2024.01.12 최근 주문 버튼 */
.stores .page-title {display: flex; align-items: center; justify-content: space-between;}
.stores .page-title a.go-history {font-size: 13px;font-weight: 500;line-height: 23px;text-decoration-line: underline;}
/* 주문확인 문구 */
.order-result .result-top .txt-wrap .order-status-notice {background: #F8FAFC;font-size: 15px;color:#202326;padding: 12px;border-radius: 12px;margin-top: 12px;font-weight: 400;}
.history-notice {width: 100%; background: rgba(255, 55, 80, 0.12);padding: 12px; box-sizing: border-box;border-radius: 8px;margin-top: 24px;}
.history-notice li {list-style: disc;color:#FF3750;font-size: 15px;font-weight: 400;line-height: 23px;margin-left: 15px;box-sizing: border-box;}
/* 20230116 order payment 유의사항 */
.pay-policy-2 .btn-show{position:relative;display:block;line-height: 48px;font-size: 15px;color:#0d0f11;}
.pay-policy-2 .btn-show:after{clear:both;content:'';display:block;position:absolute;top:12px;right:0; width: 24px;height: 24px;background: url(../images/btn-dropdown-24.svg) no-repeat;transition-duration: .4s;}
.pay-policy-2 .btn-show.on:after{clear:both;content:'';display:block;transform: rotate(-180deg);}
.pay-policy-2 .show-policy-2{display:none;padding: 8px 4px; line-height: 20px; font-size: 13px;color:#0d0f11}



/* 쿠폰적용 팝업 */
.pop-payment-coupon { width: 100%; position: fixed; left: 0; top: 0; height: 100vh; z-index: 99; display: none; }

.pop-payment-coupon .back { width: 100%; position: absolute; left: 0; top: 0; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: -1; }

.pop-payment-coupon .content { position: fixed; left: 0; bottom: 0; background: #fff; border-radius: 12px 12px 0 0; padding-top: 32px; width: 100%; height: 614px; box-sizing: border-box; }

.pop-payment-coupon .content h4 { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 12px; color: #0d0f11; }

.pop-payment-coupon .content .coupon-list { width: 100%; padding: 0 5%; box-sizing: border-box; padding-bottom: 120px; overflow-y: scroll; height: 100%; }

.pop-payment-coupon .content .coupon-list label { position: relative; margin-left: 30px; min-height: 82px; display: flex; flex-wrap: wrap; align-items: center; box-shadow: 0 1px 0 0 #edf1f3; padding: 15px 0 18px; box-sizing: border-box; }

.pop-payment-coupon .content .coupon-list label:last-child { box-shadow: none; }

.pop-payment-coupon .content .coupon-list label input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }

.pop-payment-coupon .content .coupon-list label input[type="checkbox"] + span { display: block; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url("../images/btn-checkbox-off.svg") no-repeat center; }

.pop-payment-coupon .content .coupon-list label input[type="checkbox"]:checked + span:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url("../images/btn-checkbox-on.svg") no-repeat center; }

.pop-payment-coupon .content .coupon-list label div { width: calc(100% - 56px); }

.pop-payment-coupon .content .coupon-list label b { display: block; width: 100%; font-size: 17px; line-height: 26px; color: #0d0f11; font-weight: normal; }

.pop-payment-coupon .content .coupon-list label p { font-size: 13px; color: #464b50; padding-top: 4px; }

.pop-payment-coupon .content .coupon-list label span { display: inline-block; width: 56px; font-size: 15px; color: #ff3750; font-weight: 500; }

.pop-payment-coupon .content .btn-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 16px; box-sizing: border-box; margin-top: 11px; position: absolute; left: 0; bottom: 0; background: #fff; }

.pop-payment-coupon .content .btn-wrap .reset {  font-size: 17px; text-align: center; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 56px;  border-radius: 10px; font-weight: bold; margin: 0 2px; width: 100%;}

.pop-payment-coupon .content .btn-wrap .submit { font-size: 17px; text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 56px; width: 49%; border-radius: 10px; background-color: #cacdd0; font-weight: bold;width: 100%;  margin: 0 2px;}

.pop-payment-coupon .pop-null-icon, .pop-gift-coupon .pop-null-icon { padding-top: 100px; position:absolute; left: 50%; top: 0;transform: translateX(-50%); width: 100%;}

.pop-payment-coupon .pop-null-icon p, .pop-gift-coupon .pop-null-icon p { position: relative; text-align: center; font-size: 17px; padding-top: 92px; }

.pop-payment-coupon .pop-null-icon p:before, .pop-gift-coupon .pop-null-icon p:before { clear: both; content: ''; display: block; width: 72px; height: 72px; position: absolute; top: 0; left: 0; right: 0; margin: auto; background: url(../images/icon-result-none.svg) no-repeat center; }

/* 쿠폰적용 팝업 */
aside.pop-request.menu .wrap .inner .txt { padding-top: 24px; margin: auto; height: 80vh; overflow-y: scroll;}
aside.pop-request.menu .pop-menu-list li { border-bottom: 1px solid #edf1f3; }
aside.pop-request.menu .pop-menu-list li:last-child { border-bottom: 0px solid #edf1f3; }
aside.pop-request.menu .pop-menu-list li a { display: block; padding: 24px 0; height: 80px;  }
aside.pop-request.menu .pop-menu-list li a .img { width: 80px; height: 80px; border-radius: 100%; float: left; }
aside.pop-request.menu .pop-menu-list li a .img img { width: 100%; }
aside.pop-request.menu .pop-menu-list li a .text { width: calc(100% - 80px); padding-left: 12px; box-sizing: border-box; text-align: left; float: left; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
aside.pop-request.menu .pop-menu-list li a .text div { width: calc(100% - 36px); }
aside.pop-request.menu .pop-menu-list li a .text p { font-size: 15px; color: #0d0f11; padding-bottom: 8px; }
aside.pop-request .wrap .btn-single-wrap { box-sizing: border-box; width: 100%; margin-top: 28px; }
aside.pop-request.menu .pop-menu-list li a .text span{display: block; font-size: 13px; color: #464b50;}



/* help */
.help-top { width: 100%; padding: 12px calc(5% + 5px) 0; box-sizing: border-box; margin-bottom: 40px; }

.help-top h2 { margin-bottom: 44px; font-size: 21px; color: #0d0f11; line-height: 1.52; letter-spacing: -0.45px; font-weight: 500; }

.help-top a { font-size: 28px; font-weight: 500; letter-spacing: -0.8px; color: #0d0f11; }

.help-top p { margin-top: 20px; font-size: 15px; line-height: 1.53; color: #0d0f11; }

.btn-inquiry { width: 100%; padding: 0 5%; margin-bottom: 48px; box-sizing: border-box; }

.btn-inquiry a { width: 100%; display: block; height: 56px; font-size: 17px; font-weight: bold; line-height: 56px; letter-spacing: -0.49px; text-align: center; color: #fff; border-radius: 10px; background-color: #F17AAA; }

.inquiry-wrap { width: 100%; padding: 0 5%; box-sizing: border-box; }

.inquiry-wrap .inq-box { border: solid 1px #a5aaaf; display: block; font-size: 15px; border-radius: 8px; }

.inquiry-wrap .inq-type { margin: 20px 0; }

.inquiry-wrap .inq-type a.inq-type-dropdown { width: 100%; line-height: 48px; padding-left: 15px; box-sizing: border-box; position: relative; padding-right: 40px; }

.inquiry-wrap .inq-type a.inq-type-dropdown span { position: absolute; display: block; width: 24px; height: 24px; background: url("../images/btn-dropdown-inq.svg") no-repeat center; right: 11px; bottom: 14px; }

.inquiry-wrap .inq-title input[type=text] { width: 100%; height: 48px; border-bottom: none; padding: 0 15px; box-sizing: border-box; }

.inquiry-wrap .inq-title input[type=text]:focus { outline: none; }

.inquiry-wrap .inq-content textarea { resize: none; width: 100%; padding: 15px; box-sizing: border-box; }

.inquiry-wrap .inq-content textarea:focus { outline: none; }


.inquiry-wrap .inq-img .inq-file-box { margin: 20px 0; } /*2022/06/16 추가*/

.inquiry-wrap .inq-img .file-area { display: flex;} /*2022/06/16 추가*/

.inquiry-wrap .inq-img .upload-name { overflow: auto; display: inline-block; height: 50px; padding: 0px 2px; margin-bottom: 10px; vertical-align: middle; box-sizing: border-box; border-radius: 6px; width: 70%; color: #111; } /*2022/06/16 추가*/

.inquiry-wrap .inq-img .upload-name.add-file { padding: 2px 2px; height: 80px; } /*2022/06/16 추가*/

.inquiry-wrap .inq-img .upload-name .file-name a { padding: 3px 15px; background: url(../images/btn-delete.png) no-repeat;} /*2022/06/16 추가*/

.inquiry-wrap .inq-img .upload-name .file-name { line-height: 2; overflow: hidden; margin: 7px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} /*2022/06/16 추가*/

.inquiry-wrap .inq-img input[type="file"] { padding: 2px 0; position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } /*2022/06/16 추가*/

.inquiry-wrap .inq-img label { width: 30%; margin-left: 10px; display: block; height: 51px; box-sizing: border-box; border-radius: 12px; font-size: 17px; font-weight: bold; letter-spacing: -0.49px; text-align: center; line-height: 51px; background: rgba(70, 34, 1, 0.12); } /*2022/06/16 추가*/

.inquiry-wrap .inq-btn-wrap { margin: 20px 0; }

.inquiry-wrap .inq-btn-wrap a { width: 100%; display: block; height: 56px; box-sizing: border-box; border-radius: 12px; font-size: 17px; font-weight: bold; letter-spacing: -0.49px; text-align: center; line-height: 56px; background: rgba(70, 34, 1, 0.12); }

.inquiry-wrap .inq-btn-wrap a.inq-submit { margin-bottom: 8px; color: #fff; background: #c9cdd1; }

.inquiry-list { width: 100%; padding: 0 5%; box-sizing: border-box; }

.inquiry-list ul { width: 100%; }

.inquiry-list ul li { padding: 20px 0; border-bottom: 1px solid #e8ebee; }

.inquiry-list ul li:last-child { border-bottom: none; }

.inquiry-list ul li a { display: block; }

.inquiry-list ul li a .status { font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; margin-bottom: 4px; color: #ff3750; }

.inquiry-list ul li.answered a .status { color: #0084ff; }

.inquiry-list ul li a p.title { margin-bottom: 4px; font-size: 17px; font-weight: 500; line-height: 1.53; letter-spacing: -0.39px; max-height: 3.06em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.inquiry-list ul li a p.date { font-size: 13px; line-height: 1.46; letter-spacing: -0.3px; }

.inq-detail-top { width: 100%; }

.inq-detail-top .status { padding-left: calc(5% + 5px); font-size: 15px; font-weight: 500; line-height: 1.53; letter-spacing: -0.39px; margin-bottom: 4px; color: #ff3750; }

.inq-detail-top .status.answered { color: #0084ff; }

.inq-detail-top h1 { font-size: 21px; line-height: 1.5; letter-spacing: -0.5px; color: #0d0f11; padding-left: calc(5% + 5px); margin-bottom: 8px; }

.inq-detail-top p.date { font-size: 15px; color: #0d0f11; line-height: 1.6; letter-spacing: -0.5px; padding-left: calc(5% + 5px); }

.inq-detail-content { padding: 0 calc(5% + 5px); box-sizing: border-box; font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; margin: 48px 0; }

.inq-detail-answer { padding: 24px calc(5% + 5px); box-sizing: border-box; font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; background-color: #f8fafc; margin-bottom: 20px; }

/* .inquery-tab-menu{ width: 100%; padding: 12px 5% 6px; box-sizing: border-box; background: #fff; z-index: 10; height: 53px; display: flex; align-items: center; border-bottom: 1px solid #dee1e4;}
.inquery-tab-menu { width: 100%; padding: 12px 5% 6px; box-sizing: border-box; background: #fff; z-index: 10; height: 53px; display: flex; align-items: center; border-bottom: 1px solid #dee1e4; }
.inquery-tab-menu li { font-size: 17px; color: #0d0f11; height: 26px; margin: 0 10px; padding-bottom: 8px; position: relative; }
.inquery-tab-menu li a { font-size: 17px; color: #0d0f11; }
.inquery-tab-menu li:first-child { margin-left: 0; }
.inquery-tab-menu li.on { font-weight: bold; }
.inquery-tab-menu li.on::after { content: ''; display: block; width: 100%; height: 4px; background-color: #0d0f11; position: absolute; left: 0; bottom: 0; border-radius: 3px; } */
.inquery-tab-menu ul { display: flex; }

section.quick-order{ box-sizing: border-box; }
section.quick-order .swiper-button-next{right: 0 !important; height: 60%; top: 35%; opacity: 0;}
section.quick-order .swiper-button-prev{left: 0 !important; height: 60%; top: 35%; opacity: 0;}
section.quick-order .title{ display: flex; justify-content: space-between; padding: 0 5%;}
section.quick-order .title h3 {font-weight: 500; font-size: 16px;}
section.quick-order .title a  {font-weight: 400; font-size: 14px; color: #0084FF;}
section.quick-order ul{margin: 12px 0 20px;}
section.quick-order ul li { border: 1px solid #F8E3E4; width: 80%; border-radius: 12px; padding: 12px 20px 12px 12px; box-sizing: border-box; position: relative;}
section.quick-order ul li a {display: flex;}
section.quick-order ul li .img-box { width: 30%;  position: relative; margin-right: 12px;}
section.quick-order ul li .img-box::after { position: absolute; width: 100%; height: 100%; content: ""; top: 0; background-color: #FFF; border-radius: 50%; left: 0; z-index: 1; box-shadow: 0px 2px 12px 0px #0000001F; }
section.quick-order ul li .img-box span{ line-height: 15px; position: absolute; width: 30px; height: 23px; content: ""; top: 0; right: 0; border-radius: 100px; background: #C48372; z-index: 10000; font-size: 15px; font-weight: 700; color: #fff; padding: 4px 6px; box-sizing: border-box;}
section.quick-order ul li .img-box img { width: 100%; z-index: 100; position: relative; border-radius: 100%;}
section.quick-order ul li .text-box { width: 70%; height: 100%; }
section.quick-order ul li .text-box .store-adress {  color: #C48372; font-size: 14px; font-weight: 700;  display: flex; margin-bottom: 4px; }
section.quick-order ul li .text-box .store-adress p {display: flex; justify-content: left; align-items: center;}
section.quick-order ul li .text-box .menu-name{text-align: left; font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #000000; }
section.quick-order ul li .text-box .menu-option{text-align: left;  color: #464B50; font-weight: 400; font-size: 12px; }
section.quick-order ul li:last-child { height: unset;}
section.quick-order ul li  .btn-history { display: block;}
section.quick-order ul li  .btn-history .btn-history-img-box{ margin: 0 auto 4px; width: fit-content;}
section.quick-order ul li  .btn-history p{font-size: 13px; font-weight: 400; color: #A5AAAF; text-align: center;}
section.quick-order .quick-none-box{ padding: 0 5%; margin: 12px 0 20px; height: 122px; }
section.quick-order .quick-none-box img{margin: auto; margin-top: 6px;}
section.quick-order .quick-none-box div{ text-align: center; margin: 2px 0 10px; font-weight: 400px; font-size: 13px; color: #A5AAAF; line-height: 23px; }
section.quick-order .quick-none-box a{ width: fit-content; display: block; margin: auto; border: 1px solid #C48372; text-decoration: none; color: #C48372;     padding: 6px 8px; font-size: 15px; font-weight: 700; border-radius: 6px;}

a.btn-order{ width: 110px; height: 100px; position: fixed; right: 0; bottom: 10px; z-index: 100; }
a.btn-order img { width: 100%; }