/* 공통 CSS */
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
/* reset start */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, 
strike, strong, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, 
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
	-webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라 신버전 */
	-ms-text-size-adjust : none;  /* IE */
	-moz-text-size-adjust : none;  /* 파이어폭스 */
	-o-text-size-adjust : none;  /* 오페라 구버전 */
	text-size-adjust:none;} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} 
html {font-size: 15px;-ms-touch-action: manipulation;touch-action: manipulation;}
body {line-height: 1;} 
ol, ul {list-style: none;} 
blockquote, q {quotes: none;} 
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;} 
table {border-collapse: collapse; border-spacing: 0;}
a {text-decoration: none; color: #000; cursor: pointer;}
b {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} 


/* clearfix */
.clearfix::after {content: ''; display: block; clear: both;}

/* IR효과 */
/* 01 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_pm {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}
/* 02 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할때 */
.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/* 03 대체 텍스트가 아닌 접근성을 위한 숨긴 텍스트를 제공할때 */
.ir_su {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}
/* reset end */


/* 공통 */
body {font-family: 'Noto Sans KR', sans-serif !important;
    /* background: linear-gradient(#f5f5f5 75%, #ffffff 25%) !important; */
     }
.mall-wapper {
    position: relative; width: 100%; height: 100%; max-width: 480px; 
    min-height: 100vh; /* z-index: 0; */ 
    /*box-shadow: 0px 0px 16px 8px rgb(75 40 7 / 16%); */ 
    box-shadow: 4px 8px 38px 0px rgba(149, 149, 149, 0.12);
    overflow-y: auto; overflow-x: hidden; margin: 0 auto; background-color: #fff;}
/* @media all and (min-width: 720px) {
.mall-wapper {border: solid 1px #f1f1f1;}
} */
textarea, input {font-family: 'Noto Sans KR', sans-serif;}
.clear { clear:both; }
.clear:after { content:' '; display:block; clear:both; }
.categoryList a { text-decoration:none; color:inherit; }
@media all and (min-width: 1201px) {
    .mall-wapper {/* left: 50%; margin-left: -550px; */ overflow-y: auto; overflow-x: hidden;}
}
body.fixed .mall-wapper header {position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;}

/* fontawesome */
.fa {display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; padding-left: 3px;}
.fa-angle-right:before {content: "\f105";}
button {font-family: "Noto Sans KR", sans-serif;}

/* 안드로이드 기기에서 input[type="date"] 요소의 체크 모양 제거 */
/* input[type="date"]::-webkit-calendar-picker-indicator {display: none;} */

/* body 스크롤 방지용 */
.stop-scroll{height: 100%; overflow: hidden;}

/* body 스크롤 방지용 */
.hidden-scroll{height:100%; }

/* pc-area css */
.pc-area {position: fixed; top: 0; left: calc(50% + 300px); height: 100%; width: 300px;border: solid 1px #ffcc00;display: none;}
@keyframes up-down {
    from {transform: translatey(0px);}
    to {transform: translatey(-10px);}
}

/* loader(로더) */
.loader_wrap {z-index: 99999; position: fixed; top: 50%; left: 50%; width: 4em; height: 4em; margin-top: -2em; margin-left: -2em; background: #cccccc; border: 1px solid #cccccc; border-radius: 100px; -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px); transform: translate(-100px, -100px) scale(1) translate(100px, 100px);}
.loader {margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; display: block; position: absolute; left: 0px; top: 0px; background: url(/images/common/loading.svg) no-repeat; background-size: 70%; background-position: center; -webkit-animation: lds-ball 1s linear infinite; animation: lds-ball 1s linear infinite;}
.loader img{width:70%; height:70%; overflow: hidden; display: block; position: absolute; left: 50%; top: 0px; margin-left: -17.5px; -webkit-animation: lds-ball 1s linear infinite; animation: lds-ball 1s linear infinite;}

.loader_wrap2 {z-index: 99999; position: fixed; top: 50%; left: 50%; width: 4em; height: 4em; margin-top: -2em; margin-left: -2em; border-radius: 100px; -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px); transform: translate(-100px, -100px) scale(1) translate(100px, 100px);}
.loader_wrap2 .loader2 {margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; display: block; position: absolute; left: 0px; top: 0px; background: url(/images/common_icon/loading2.svg) no-repeat; background-size: 100%; background-position: center; -webkit-animation: lds-ball 1s linear infinite; animation: lds-ball 1s linear infinite;}
.loader_wrap2 .loader2 img{width:70%; height:70%; overflow: hidden; display: block; position: absolute; left: 50%; top: 0px; margin-left: -17.5px; -webkit-animation: lds-ball 1s linear infinite; animation: lds-ball 1s linear infinite;}

@keyframes lds-ball {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
    }
    0% {
        -webkit-transform: translate(0, -2px);
        transform: translate(0, -2px);
    }
    50% {
        -webkit-transform: translate(0, 4px);
        transform: translate(0, 4px);
        animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
    }
    100% {
        -webkit-transform: translate(0, -2px);
        transform: translate(0, -2px);
    }
}
@-webkit-keyframes lds-ball {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
    }
    0% {
        -webkit-transform: translate(0, -2px);
        transform: translate(0, -2px);
    }
    50% {
        -webkit-transform: translate(0, 4px);
        transform: translate(0, 4px);
        animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
    }
    100% {
        -webkit-transform: translate(0, -2px);
        transform: translate(0, -2px);
    }
}


/* pc-area right */
.pc-area_right {position: fixed; top: 0; left: calc(50% + 361px); height: 100%; width: 400px; display: flex; align-items: center; /* z-index: -1; */}
.brd-recommen:hover {animation-play-state: paused;}
.brd-boxshadow {/* box-shadow: 0px 0px 15px 3px rgb(50 51 51 / 15%); */ box-shadow: 4px 8px 38px 0px rgba(149, 149, 149, 0.12);}
.brd-recommen {animation: up-down 1.4s infinite ease-in-out alternate;}
.brd-recommen-thumR {width: 360px; height: auto; background: #fff; padding: 15px; margin-left: 40px; position: absolute; border-radius: 20px;}
.brd-recommen-thumR .section-title-wrapper {padding: 0px; display: flex; align-items: center; margin-left: 10px;}
.brd-recommen .section-title {line-height: 27px; font-size: 18px; font-weight: 500; position: relative; margin: 0; display: block;}
.brd-recommen-thumR .recommenclosebtn {margin-left: auto; border: none; background: none;}
.brd-recommen-thumR .itembox_wrapper {width: 100%;}
.brd-recommen-thumR .itembox {margin-top: 8px; padding: 10px;}


/* pc-area left */
.pc-area_left {position: fixed; top: 0; left: calc(50% - 761px); height: 100%; width: 400px; display: flex; align-items: center;}
.BrandLeft {width: 400px; height: 100%;}
.BLfixed {height: 100%; position: fixed; display: flex; flex-direction: column; width: 400px; align-items: flex-start; justify-content: center;}
.BLfixed .brandimgbox {align-items: center; display: flex; flex-direction: column;}
.BLfixed .brandimgbox img {width: 200px;}
/* .BrandLeft .actions {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 32px 0;}
.BrandLeft .actions li {display: inline-block; vertical-align: top; padding: 16px; margin: 0 1px; border-radius: 12px; background: #FFF; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.15);}
.BrandLeft .actions li + li {margin-left: 20px;}
.BrandLeft .actions li .btn {display: block; width: 100px;}
.BrandLeft .actions li .btn img {width: 100%;} */
.BrandLeft .download {display: flex; margin: 36px 0;}
.BrandLeft .download .qr {width: 90px; height: 90px;}
.BrandLeft .download .qr > img {width: 100%;}
.BrandLeft .download .store-btn {display: flex; justify-content: center; gap: 8px;}
.BrandLeft .download .store-btn > a {width: 120px; height: 40px; display: block; padding: 0;}
.BrandLeft .download .store-btn > a > img {width: 100%;}
.BrandLeft .BLfixed .app {display: flex;}
.BrandLeft .BLfixed .app a {display: block; width: 100%; height: 100%; display: flex;}
.BrandLeft .BLfixed .app a img {width: 49px;}
.BrandLeft .BLfixed .app a p {margin-left: 12px; letter-spacing: -0.24px; color: #333; line-height: 150%; font-size: 16px;}
.BrandLeft .BLfixed .app a p strong {font-weight: 700;}
@media all and (max-width: 1600px){
    .pc-area_right {left: auto; right: 0;}
    .pc-area_right .brd-recommen-thumR {margin-left: 0;}
    .pc-area_left {left: 30px;}
}
@media all and (max-width: 1380px){
    .pc-area_right {display: none;}
    .pc-area_left {display: none;}
}


/* 메인 사이드 컨텐츠 */
.brd-recommen-thumL .col-xs-6, .brd-recommen-thumR .col-xs-6 {padding: 0 4px; display: flex; flex-flow: wrap; flex: auto;}
.col-xs-6 {width: 47%; float: left; position: relative; min-height: 1px;}
.brd-recommen .panel.prod {width: 100%; padding-bottom: 16px;}
.prod > .panel-heading {position: relative; padding: 0;}
.img-responsive {width: 100%; border-radius: 8px; /* image-rendering: pixelated; */}
.prod > .panel-heading .dc-body {position: absolute; top: 0; left: 0; display: flex; z-index: 1;}
.brd-recommen .panel-body {width: 100%; /*padding: 7px 15px; max-height: 86px; */padding: 0px 3px !important; position: relative; }
/*.panel-body:before {content: " "; display: table;} */
.brd-recommen-thumR .prod-title {overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; height: 38px; line-height: 1.3; font-size: 14px; margin:8px 0; }
.brd-recommen .price-box {/* min-height: 42px; */}
.prod > .panel-body .price-wrapper.default-pricewrap {display: inline-block; line-height: 1; white-space: nowrap; color: #484848; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; width: 100%; position: relative;}
.price-wrapper.default-pricewrap .org-price {display: inline-block; color: #aeaeae; height: 16px; letter-spacing: -0.2px; font-size: 12px; min-height: 14px; max-height: 14px;}
.flex {display: flex;}
.align_items_center {align-items: center; justify-content: space-between;}
.brd-recommen-thumR .recommen-price {font-weight: 700; color: #484848; letter-spacing: -0.5px}
.col-xs-6 .default-pricewrap .dc-rate {margin-right: 8px; font-weight: 700; color: #FF6B00; display: inline-block; min-width: auto; font-size: 15px;}


/* footer(푸터) */
.footer-wrapper {/*margin-bottom: 20px; */border-top: solid 10px #f5f5f5;}
.info-text-wrapper div {display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding: 22px 20px;}
.info-text-wrapper div li {text-align: left; width: 100%; padding: 3px; font-family: "Noto Sans KR", sans-serif;}
.info-text-wrapper div li h5 {font-size: 16px; font-weight: 500;}
.info-text-wrapper div li p {font-size: 13px; line-height: 1.5; color: #727272; padding-right: 15px; word-break: keep-all;}
.info-text-wrapper .btn-kakao {background: #FFE700; color: #222; width: 110px; height: 30px; border: solid 1px #ffe700; border-radius: 5px; font-size: 14px; font-weight: 400; font-family: 'Noto Sans KR', sans-serif;}
.info-text-wrapper .btn-kakao a {text-decoration-line: none; color: #222;}
.info-text-wrapper .btn-kakao a i {padding-right: 2px; color: #371c1d;}
.info-text-wrapper .btn-kakao a svg {padding-right: 2px; color: #371c1d;}
.info-text-wrapper .btn-shop {background: #222; width: 110px; height: 30px; border-radius: 5px; font-size: 14px; font-weight: 400; border: none; font-family: 'Noto Sans KR', sans-serif; color: #fff; cursor: pointer;}
.info-text-wrapper .btn-shop a {text-decoration-line: none; color: #fff;}
.info-text-wrapper .btn-Call {background: #222; width: 110px; height: 30px; border-radius: 5px; font-size: 14px; font-weight: 400; border: none; color: #fff; cursor: pointer;}
.info-text-wrapper .btn-Call a {text-decoration-line: none; color: #fff;}
.info-text-wrapper div li:last-child {/*margin-top: 10px*/}
.footer-wrapper .menu-wrapper {height: 60px; line-height: 60px; border-top: 1px solid #eee; background-color: #f8f8f8; padding: 0 20px; position: relative;}
.footer-wrapper .menu-wrapper .menu {font-size: 15px !important; font-weight: 500; color: #222; padding-right: 10px; text-decoration-line: none;}
.footer-wrapper .menu-wrapper .menu.insta {position: absolute; right: 20px; padding-right: 0; top: 5px;}
.footer-wrapper .company {background-color: #f8f8f8; padding: 0px 5px 30px 5px; max-height: 400px;}
.footer-wrapper .company .info {position: relative; line-height: 20px;}
.footer-wrapper .company .info .list-group {padding: 0; color: #727272;}
.footer-wrapper .company ul li {line-height: 1.5; padding: 3px 20px; font-size: 13px; font-weight: 400; background-color: #f8f8f8;}
.footer-wrapper .company .info_title {position: relative; padding: 5px 15px; cursor: pointer; font-size: 14px; color: #222; font-weight: 500; background-color: #f8f8f8;}
.footer-wrapper .company .info_title .title_wrap {display: flex; justify-content: flex-start; align-items: center;}
.footer-wrapper .company .info_title p {color: #727272; font-size: 12px; padding-bottom: 5px;}
.footer-wrapper .company .info_title span {/*font-size: 13px; */}
.footer-wrapper .company .info_txt {display: none; overflow: hidden; font-size: 14px; color: #000; height: 126px;}
.footer-wrapper .company .arrow-wrap {/*position: absolute; *//*top: 53%; *//*left: 33%; *//*transform: translate(0, -50%); */color: #727272;}
.footer-wrapper .company .company-arrow-wrap {/*position: absolute; */ /*top: 53%; */ /*left: 33%; */ /*transform: translate(0, -50%); */ color: #727272;}
.footer-wrapper .company .info_title .arrow-top {display: none;}
.footer-wrapper .company .info_title .arrow-bottom {display: block;}
.footer-wrapper .company .info_title.open .arrow-bottom {display: none;}
.footer-wrapper .company .info_title.open .arrow-top {display: block;}
.copyright {font-size: 13px; margin-bottom: 32px; padding: 5px 20px;}
.footer-icon-wrapper {margin: 28px 0 100px 0;}
.footer-icon-wrapper div {display: flex; justify-content: center; align-items: center;}
.footer-icon-wrapper div {display: flex; justify-content: center; align-items: center;}
.footer-icon-wrapper div:last-child {margin-top: 20px;}
.info_title.open {position: absolute; top: 0; left: 0; border-radius: 4px; /*display: flex; *//*justify-content: flex-start; */}
.info_title.open:after {content: ""; position: absolute; width: 6px; height: 10px; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 2px;}
.bn-event {width: 100%; border-radius: 10px; overflow: hidden; display: block; margin: 20px 0;}
.bn-event img {width: 100%;}



/* toolbar(툴바) */
.toolbar {position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 64px; box-shadow: 0px 0px 18px 3px rgb(1 1 1 / 5%); max-width: 480px; margin: 0 auto; background-color: #fff; z-index: 2; display: flex; align-items: center;}
.toolbar-menu {width: 100%; padding-top: 3px;}
.toolbar ul.menu {display: flex; width: 100%;}
.toolbar ul.menu li {text-align: center; display: flex; align-items: center; justify-content: center; width: 25%; padding: 0; background-color: #fff; vertical-align: middle; cursor:pointer;}
.toolbar ul.menu li a {text-decoration: none;}
.toolbar ul.menu li .tool {display: flex; flex-direction: column; align-items: center; position: relative;}
.toolbar ul.menu li img {width: 26px; height: 26px; max-width: 26px;}
.toolbar ul.menu li .menu_img {width: 100%; max-width: 37px; height: auto; position: absolute; bottom: -14px;}
.toolbar ul.menu li .menu_img_icon {width: 26px; height: 26px; max-width: 26px; border-radius: 5px;}
.toolbar ul.menu li .menu_img_icon {width: 26px; height: 26px; max-width: 26px; border-radius: 5px;}
.toolbar ul.menu li span {color: #555; height: 12px; font-size: 12px; letter-spacing: 0; margin-top: 10px;}
.toolbar ul.menu li.on span {color: #FF6B00;}
.toolbar .tool .re_badge_wrap {position: relative;}
.toolbar .tool .re_badge_wrap .re_badge {line-height: 1.2; display: flex; align-items: center; justify-content: center; font-weight: 500; position: absolute; top: -51px; right: -20px; box-sizing: border-box; border-radius: 50%; background: #FF6B00; color: #fff; width: 18px; height: 18px; font-size: 11px; letter-spacing: -0.5px;}
.toolbar .tool .re_badge_wrap .re_badge span {color: #fff;}
.quick_button {font-size: 0; height: 43px; width: 43px; z-index: 99; border: 0; border-radius: 15px; padding-top: 5px; /*display: none; */}
.quick_button:last-child {width: 39px; height: 39px;}

.toolbar .tool .re_badge_wrap2 {position: relative;}
.toolbar .tool .re_badge_wrap2 .re_badge2 {line-height: 1.2; display: flex; align-items: center; justify-content: center; font-weight: 500; position: absolute; top: -51px; right: -20px; box-sizing: border-box; border-radius: 50%; background: #F92E12; color: #fff; width: 18px; height: 18px; font-size: 11px; letter-spacing: -0.5px;}
.toolbar .tool .re_badge_wrap2 .re_badge2 span {color: #fff;}


/* 퀵버튼 */
.quick_button_area {display: none; position: fixed; bottom: 80px; right: 10px; z-index: 3;}
.quick_button_area.on {display: block;}
.quick_button_area > img.push-img {max-width: 47px !important; cursor: pointer; border-radius: 50%; margin-bottom: 3px; border: 1px solid #fff; box-sizing: border-box; display: none;}
.quick_button_area > a {display: block; width: 45px; margin-bottom: 7px;}
.quick_button_area > a img {width: 100%;}
.quick_button_area > div {background: rgba(0, 0, 0, .9); color: #ddd; text-align: center; border-radius: 30px; padding: 10px 0px; position: relative; width: 45px;}
.quick_button_area > div::after {content: ''; position: absolute; left: 0; top: 50%; background-color: #ddd; width: 100%; height: 1px; opacity: 0.6;}
.quick_button_area > div a.quick_button {display: block; width: 100%; height: 100%; color: #ddd; text-decoration: none;}
.quick_button_area > div a.quick_button:nth-of-type(1) {padding-bottom: 7px;}
.quick_button_area > div a.quick_button:nth-of-type(1) img {width: 23px;}
.quick_button_area > div a.quick_button:nth-of-type(2) img {width: 13px;}
.quick_button_area > div a.quick_button span {display: block; font-size: 10px; letter-spacing: -0.9px; margin: 3px 0;}
@media (min-width: 480px){
    .quick_button_area {position: fixed !important; right: auto !important; margin-left: 420px;}
}


/* 메인 헤더 */
.main.header-wrapper {position: fixed; width: 100%; max-width: 480px; top: 0; z-index: 2;}
.main.header-wrapper .navbar {display: block;}
.main.header-wrapper .navbar .menu-wrapper {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 480px; height: 48px; padding: 0 20px; border-bottom: solid 1px #f6f6f6; box-sizing: border-box; background-color: #fff;}
.main.header-wrapper .navbar .menu-wrapper .back {align-items: center; z-index: 9;}
.main.header-wrapper .navbar .menu-wrapper .btn_back {width: 24px; height: 24px;}
.main.header-wrapper .navbar .menu-wrapper .btn_back img {}
.main.header-wrapper .navbar .menu-wrapper .btn_home img {width: 24px; height: 24px;}
.main.header-wrapper .navbar .menu-wrapper .logo-wrapper {display: flex;}
.main.header-wrapper .navbar .menu-wrapper .logo-wrapper .logo {}
.main.header-wrapper .navbar .menu-wrapper .logo-wrapper img {width: 84px; height: 100%; display: inline-block; cursor: pointer; background-position: center center;}
.main.header-wrapper .navbar .menu-wrapper .title-wrapper {display: flex; justify-content: center; align-items: center; margin: auto 0; width: 80%;}
.main.header-wrapper .navbar .menu-wrapper .title-wrapper a {color: #000; text-decoration-line: none; font-size: 16px;}
.main.header-wrapper .navbar .menu-wrapper .btn_right {display: flex; justify-content: flex-end; align-items: baseline; z-index: 9;}
.main.header-wrapper .navbar .menu-wrapper .btn_right .btn_search {width: 24px; height: 24px; margin-right: 8px;}
.main.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart {width: 24px; height: 24px; position: relative;}
.main.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart img {width: 24px; margin-top: 0;}
.main.header-wrapper .navbar .menu-wrapper .btn_right .btn_home {width: 24px; height: 24px; margin-right: 8px;}
.main.header-wrapper .navbar .menu-wrapper .btn_cart .cart_badge {font-weight: 500; position: absolute; top: -9px; float: right; right: -10px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #FF6B00; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;}
.main.header-wrapper .navbar .menu-wrapper .title-wrapper .title {color: #000; text-decoration-line: none; font-size: 20px; text-align: center;}
/* .main.header-wrapper.drop {position: fixed; animation: dropHeader 0.3s; width: 100%; max-width: 480px; top: 0; z-index: 2;} */


/* 서브페이지 헤더 */
.sub.header-wrapper {position: fixed; width: 100%; max-width: 480px; top: 0; z-index: 4;}
.sub.header-wrapper .navbar {display: block;}
.sub.header-wrapper .navbar .menu-wrapper {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 480px; height: 48px; padding: 0 20px; border-bottom: solid 1px #f6f6f6; box-sizing: border-box; background-color: #fff;}
.sub.header-wrapper .navbar .menu-wrapper .btn_left {display: flex;}
.sub.header-wrapper .navbar .menu-wrapper .btn_left .back {align-items: center; z-index: 9;}
.sub.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_back {width: 24px; height: 24px; margin-right: 8px;}
.sub.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_back img {width: 100%;}
.sub.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_home {width: 24px; height: 24px;}
.sub.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_home img {width: 100%;}
.sub.header-wrapper .navbar .menu-wrapper .btn_home img {width: 24px;}
.sub.header-wrapper .navbar .menu-wrapper .logo-wrapper {position: absolute; left: 50%; transform: translate(-50%,0);}
.sub.header-wrapper .navbar .menu-wrapper .logo-wrapper .logo {}
.sub.header-wrapper .navbar .menu-wrapper .logo-wrapper img {width: 84px; height: 100%; display: inline-block; cursor: pointer; background-position: center center;}
.sub.header-wrapper .navbar .menu-wrapper .title-wrapper {display: flex; justify-content: center; align-items: center; margin: auto 0; width: 80%;}
.sub.header-wrapper .navbar .menu-wrapper .title-wrapper a {color: #000; text-decoration-line: none; font-size: 16px;}
.sub.header-wrapper .navbar .menu-wrapper .btn_right {display: flex; justify-content: flex-end; align-items: baseline; z-index: 9;}
.sub.header-wrapper .navbar .menu-wrapper .btn_right .btn_search {width: 24px; height: 24px;}
.sub.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart {width: 24px; height: 24px; position: relative; margin-left: 8px;}
.sub.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart img {width: 24px; margin-top: 0;}
.sub.header-wrapper .navbar .menu-wrapper .btn_right .btn_home {width: 24px; height: 24px; margin-right: 8px;}
.sub.header-wrapper .navbar .menu-wrapper .btn_cart .cart_badge {font-weight: 500; position: absolute; top: -9px; float: right; right: -10px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #FF6B00; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;}
.sub.header-wrapper .navbar .menu-wrapper .title-wrapper .title {color: #000; text-decoration-line: none; font-size: 20px; text-align: center;}
/* .sub.header-wrapper.drop {position: fixed; animation: dropHeader 0.3s; width: 100%; max-width: 480px; top: 0; z-index: 33;} */


/* 카테고리 헤더 */
.cate.header-wrapper {position: fixed; width: 100%; top: 0; z-index: 11;}
.cate.header-wrapper .navbar {display: block; position: relative;}
.cate.header-wrapper .navbar .menu-wrapper {display: flex; justify-content: space-between; align-items: center; position: relative; height: 48px; padding: 0 20px; border-bottom: solid 1px #f6f6f6; box-sizing: border-box; background-color: #fff; max-width: 480px;}
.cate.header-wrapper .navbar .menu-wrapper .btn_left {display: flex; justify-content: flex-start;}
.cate.header-wrapper .navbar .menu-wrapper .btn_left .back {align-items: center; z-index: 9;}
.cate.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_back {width: 24px; height: 24px; margin-right: 8px;}
.cate.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_back img {width: 100%;}
.cate.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_home {width: 24px; height: 24px;}
.cate.header-wrapper .navbar .menu-wrapper .btn_left .back .btn_home img {width: 100%;}
.cate.header-wrapper .navbar .menu-wrapper .logo-wrapper {display: flex;}
.cate.header-wrapper .navbar .menu-wrapper .logo-wrapper .logo {}
.cate.header-wrapper .navbar .menu-wrapper .logo-wrapper img {width: 84px; height: 100%; display: inline-block; cursor: pointer; background-position: center center;}
.cate.header-wrapper .navbar .menu-wrapper .title-wrapper {display: flex; justify-content: center; align-items: center; margin: auto 0; width: 80%;}
.cate.header-wrapper .navbar .menu-wrapper .title-wrapper a {color: #000; text-decoration-line: none; font-size: 16px;}
.cate.header-wrapper .navbar .menu-wrapper .btn_right {display: flex; justify-content: flex-end; align-items: baseline; z-index: 9;}
.cate.header-wrapper .navbar .menu-wrapper .btn_right .btn_search {width: 24px; height: 24px; margin-right: 8px;}
.cate.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart {width: 24px; height: 24px; position: relative;}
.cate.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart img {}
.cate.header-wrapper .navbar .menu-wrapper .btn_right .btn_home {width: 24px; height: 24px; margin-right: 8px;}
.cate.header-wrapper .navbar .menu-wrapper .btn_cart .cart_badge {font-weight: 500; position: absolute; top: -9px; float: right; right: -10px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #FF6B00; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;}
.cate.header-wrapper .navbar .menu-wrapper .title-wrapper .title {color: #000; text-decoration-line: none; font-size: 20px; text-align: center;}
/* .cate.header-wrapper.drop {position: fixed; animation: dropHeader 0.3s; width: 100%; top: 0; z-index: 11;} */


.cate-menu {}
.cate-menu ul.cate-menu-box {}
.cate-menu ul.cate-menu-box > li {}
.cate-menu ul.cate-menu-box > li > a {position: relative; padding-right: 25px; z-index: 10;font-weight: 700;}
.cate-menu ul.cate-menu-box > li > a::before {content: ''; position: absolute; right: -6px; top: 50%; width: 18px; height: 18px; border-radius: 50%; background-color: #f5f5f5; z-index: -10; transform: translate(-50%, -50%);}
.cate-menu ul.cate-menu-box > li > a > span {background: url(/images/common/ico_arrow_down.svg) center center no-repeat; width: 14px; height: 14px; background-size: 14px 14px; color: #000; display: inline-block; position: absolute; right: 5px}
.cate-menu ul.cate-menu-box > li > ul {display: none; width: 100%; min-width: 360px; position: absolute; top: 47px; text-align: left;	left: 50%;	transform: translate(-50%, 0);}
.cate-menu ul.cate-menu-box > li > ul > li {width: 50%; height: 45px; border-top: 1px solid #eee; box-sizing: border-box; background-color: #fff; float: left;}
.cate-menu ul.cate-menu-box > li > ul > li:nth-child(odd) {border-right: 1px solid #eee;}
.cate-menu ul.cate-menu-box > li > ul > li:nth-last-child(2) {border-bottom: 1px solid #eee;}
.cate-menu ul.cate-menu-box > li > ul > li:last-child {border-bottom: 1px solid #eee;}
.cate-menu ul.cate-menu-box > li > ul > li.cate-menu-active > a {font-weight: 700;}
.cate-menu ul.cate-menu-box > li > ul > li > a {display: block; width: 100%; height: 100%; padding: 12px 20px; box-sizing: border-box; font-size: 14px;}
.cate-menu ul.cate-menu-box.open > li > ul {display: block;}
.cate-menu ul.cate-menu-box.open > li > a > span {transform: rotate(180deg);}
.header-bg {display: none;}
.header-bg.open {display: block; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10;}

/* @keyframes dropHeader {
	0% {top: -5rem;}
	100% {top: 0;}
} */
@media all and (min-width: 480px){
	.header-wrapper.drop {width: 480px;}
}
@media all and (max-width: 480px){
	.tool .re_badge {font-size: 11px; line-height: 17px; width: 18px; height: 18px; top: -25px; right: -21px;}
	.header-wrapper .navbar .menu-wrapper .btn_cart .cart_badge {font-size: 11px; line-height: 17px; width: 18px; height: 18px; top: -6px; right: -9px;}
}


/* 로그인 페이지 member */
#login_wrap {width: 100%; height: 100%;}
#login_wrap h3 {border: 1px solid #cdcdcd; height: 3px; border-left: 0 none; border-right: 0 none; font-size: 0; line-height: 0; margin: 34px 0 37px 0; position: relative;}
#login_wrap h3 span {display: inline-block; position: absolute; left: 50%; margin-left: -83px; background: #fff; text-align: center; top: -11px; width: auto; padding: 0 25px; font-size: 16px; color: #8b8a8a; line-height: normal; font-weight: 400;}
#login_wrap .login_sns {width: 100%; height: 100%; background: #fff; padding: 12px;}
#login_wrap .login_sns a {width: 90%; margin: 10px auto; border-radius: 5px; display: block; font-weight: 600; text-align: center; padding: 15px 0 13px 0;}
#login_wrap .login_sns .sns_log01 {background: url(https://img.mysdis.co.kr/images/login_naver.png) no-repeat; color: #fff; background-color: #1ec800; background-size: 36px; background-position: 20px center;}
#login_wrap .login_sns .sns_log02 {background: url(https://img.mysdis.co.kr/images/login_kakao.png) no-repeat; color: #3c1e1e; background-color: #ffeb00; background-size: 36px; background-position: 20px center;}
#login_wrap .login_sns .sns_log03 {background: url(https://img.mysdis.co.kr/images/login_facebook.png) no-repeat; color: #fff; background-color: #2c4780; background-size: 36px; background-position: 20px center;}
#login_wrap .noMember_order {background: #f4f5f7; width: 100%; height: 100%; padding: 20px 10px 150px;}
#login_wrap .noMember_order h3 span {background: #f4f5f7;}
#login_wrap .noMember_order input {width: 90%; margin: 0 auto; display: block; height: 50px; margin-bottom: 10px; padding: 0 20px;}
#login_wrap .noMember_order input.noMember_btn {background: #fff; color: #ff5553; border: 1px solid #ff5553;}


/* 회원인증 */
#phone_auth_wrap {background-color: #fff;}
#phone_auth_wrap .phone_auth {width: 100%; height: 100%; padding: 20px 10px 0 10px;}
#phone_auth_wrap .phone_auth .tit {text-align: center; padding: 20px 0 30px;}
#phone_auth_wrap .phone_auth .tit img {margin-left: 11px;}
#phone_auth_wrap .phone_auth .tit h3 {font-size: 29px; color: #737677; letter-spacing: -1px; line-height:32px;}
#phone_auth_wrap .phone_auth .tit p {font-size: 15px; color: #363636; letter-spacing: -1px; text-align: center; padding-top:16px; line-height:21px;}
#phone_auth_wrap .phone_auth .tit p span {color: #6facff;}
#phone_auth_wrap .phone_auth input,.open_certify_area input {width: 90%; margin: 0 auto; display: block; height: 50px; margin-bottom: 10px; padding-left: 15px; border: 1px solid #cecece; font-size: 15px;}
#phone_auth_wrap .phone_auth input.phone_num {text-align: center; padding: 0; width: calc((100% - 35px) / 3);}
#phone_auth_wrap .phone_auth .phone_num_wrap {width: 90%; margin: 0 auto; display: block; height: 50px; margin-bottom: 10px;}
#phone_auth_wrap .phone_auth .phone_num_wrap * {float: left;}
#phone_auth_wrap .phone_auth .phone_num_wrap span {width: 17px; display: inline-block; text-align: center; height: 50px; line-height: 50px; vertical-align: baseline}
#phone_auth_wrap .phone_auth input.sub_btn,.open_certify_area input.sub_btn_2 {background: #43a4ff; color: #fff; border:none; font-size: 19px; letter-spacing: -1px; margin-bottom: 30px;}

.org-price,.o_pri, .dc-price {/* ,.org-price span*/text-decoration: line-through;}
.review-area-wrap {line-height: 16px;}
.review-area-wrap p.rate em.star {height: 14px !important; margin: 0.6px 1px 1px 1px !important;}
.review_comment_icon {margin-right: 5px;}

/* input[type="number"] arrow disabled */
.none_arrow::-webkit-outer-spin-button, .none_arrow::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.loadingBox{width:100%;height:400px;/* background:url("/images/common/loading.gif") no-repeat center center;background-size: 80px; opacity: 0.5 */}


/* 240529 월간푸드 깜짝 선물 토스트 팝업 */
/* #first-buy-coupon-layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.5); display: none;} 
#first-buy-coupon-layer-mask.on {display: block;} 
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff; border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} 
.first-buy-coupon-bottom .container.on .first-buy-coupon-popup2.on {bottom: 0; z-index: 5001; top: auto; height: auto; left: auto; border: 0;} 
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content {display: block; max-height: 60vh; overflow: auto;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: 100%; width: 100%;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap {background-color: #fff; position: relative; padding: 20px; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap > em {display: block; font-size: 20px; font-weight: 500; line-height: 135%; margin: 12px 0 20px 0;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap > img {width: 50%;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap .btn-area {width: 100%; margin-top: 20px;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap .btn-area button {background-color: #FF6B00; height: 48px; font-size: 16px; color: #fff; width: 100%; border: 0; border-radius: 5px; font-weight: 700;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap a.close {position: absolute; left: 50%; top: 15px; transform: translate(-50%,0); background-color: #79747E; opacity: 0.4; width: 32px; height: 4px; border-radius: 100px;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap a.close > span {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap a.close2 {position: absolute; right: 15px; top: 15px;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap a.close2 span {display: inline-block; background: url(/images/common/btn_close_gray.png) no-repeat; width: 16px; height: 16px; background-size: 16px; text-indent: -9999px;} */



/* 240530 주문완료 첫구매 쿠폰 토스트 팝업 */
#first-buy-coupon-layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.5); display: none;} 
#first-buy-coupon-layer-mask.on {display: block;} 
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff; border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} 
.first-buy-coupon-bottom .container.on .first-buy-coupon-popup2.on {bottom: 0; z-index: 5001; top: auto; height: auto; left: auto; border: 0;} 
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content {display: block; max-height: 60vh; overflow: auto;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: 100%; width: 100%;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap {background-color: #fff; position: relative; padding: 20px; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap::before {content: ''; position: absolute; left: -3px; bottom: 73px; border: 1px solid #fff; width: 15px; height: 30px; border-radius: 0 15px 15px 0; background-color: #7c7c7c; border-left: 1px solid #7c7c7c;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap::after {content: ''; position: absolute; right: -3px; bottom: 73px; border: 1px solid #fff; width: 15px; height: 30px; border-radius: 15px 0 0 15px; background-color: #7c7c7c; border-right: 1px solid #7c7c7c; z-index: 1;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap > em {display: block; font-size: clamp(0.9rem, 4vw, 1.5rem); font-weight: 500; line-height: 135%; margin: 12px 0 4px 0; color: #1F75FF;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap > p {font-size: clamp(1.07rem, 4vw, 1.2rem); font-weight: 500; line-height: 135%; width: 100%; text-align: center;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap .percent {margin: 20px 0 30px 0; text-align: center;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap .percent > img {width: 90%; max-width: 400px;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap .btn-area {width: 100%; padding-top: 20px; border-top: 2px dashed #D3D6DB;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap .btn-area button {background-color: #000; height: 48px; font-size: 16px; color: #fff; width: 100%; border: 0; border-radius: 5px; font-weight: 500;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap a.close2 {position: absolute; right: 15px; top: 15px;}
.first-buy-coupon-bottom .container .first-buy-coupon-popup2 .content .content-wrap a.close2 span {display: inline-block; background: url(/images/common/btn_close_gray.png) no-repeat; width: 16px; height: 16px; background-size: 16px; text-indent: -9999px;}

/* 241105 적립금 알림 */
.notice_saved {
    background: #222;
    position: relative;
    padding-left: 18px;
    max-width:462px;
    width:100%;
}
.notice_saved.drop {
    position: fixed;
    width: 100%;
    top: 48px;
    z-index: 2;
    max-width:462px;
    padding-left:18px;
}
.notice_saved .ico_notice_saved {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(calc(-50% + 2px));
    background: url('https://img.monfood.co.kr/images/common/ico_notice_saved.png') no-repeat center;
    background-size: 24px;
    width: 28px;
    height: 28px;
}
.notice_saved p {
    position: relative;
    font-size: 14px;
    color: #fff;
    line-height: 135%;
    padding: 12px 40px 12px 28px;
    word-break:keep-all; word-wrap:break-word;
    cursor:pointer;
}

.notice_saved p em {
    color: #ff6b00;
}
.notice_saved .btn_close_notice_saved {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: url('https://img.monfood.co.kr/images/common/btn_close_white.png') no-repeat center;
    background-size: 14px;
    border: 0;
    cursor:pointer;

}

@media (min-width: 480px){
    .notice_saved .btn_close_notice_saved {
        position: absolute;
        right: 6px;
        top: 50%;
        width: 42px;
        height: 42px;
        background: url('https://img.monfood.co.kr/images/common/btn_close_white.png') no-repeat center;
        background-size: 14px;
        border: 0;
        cursor:pointer;
    }
}

br.break-t {
   display: none;
}

@media only screen and (max-width: 480px) {
    br.break-t {
        display: inline;
    }
}


/* 장바구니 리마인드 241220 */
.cart_remind {
    display: none;
    /*position: absolute;*/
    position: fixed;
    min-width: 220px;
    top: 44px;
    /*left: 50%;*/
    right: calc(50% - 234px);
    /*right: 8px;*/
    background: #222;
    color: #fff;
    border-radius: 50px;
    padding: 0 8px;
    line-height: 44px;
    font-size: 15px;
    z-index: 100000;
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
    opacity: 0; /* 초기 상태 숨김 */
    transform: translateY(-10px); /* 초기 위치: 위로 이동 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 부드러운 전환 효과 */
    pointer-events: none; /* 숨겨진 상태에서는 상호작용 방지 */
}
@media only screen and (max-width: 480px) { /* 모바일 */
    .cart_remind {
        left: initial;
        right: 7px;
    }
}

/* 표시 상태 */
.cart_remind.show {
    opacity: 1;
    transform: translateY(0); /* 원래 위치로 이동 */
    pointer-events: auto; /* 표시된 상태에서는 상호작용 허용 */
}

/* 숨김 상태 (페이드아웃 및 슬라이드 업용) */
.cart_remind.hide {
    opacity: 0;
    transform: translateY(-10px); /* 위로 슬라이드 업 */
    pointer-events: none;
}
.cart_remind:before {
    content: '';
    background: url('https://img.monfood.co.kr/images/common_icon/ico_cart_remind.png') no-repeat 0 0;
    background-size: 40px 26.67px;
    display: block;
    width: 40px;
    height: 26.67px;
}
.cart_remind:after {
    position: absolute;
    top: -8px;
    right: 16px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 8px 13.856px 8px;
    border-color: transparent transparent #222222 transparent;
}
.cart_remind .btn_close_cart_remind {
    width: 32px;
    height: 32px;
    background: url('https://img.monfood.co.kr/images/common/btn_close_white.png') no-repeat center;
    background-size: 14px;
    border: 0;
    cursor:pointer;
}