@charset "utf-8";
.naver_price_box::before { content: none; }
.button-more { width: 100%; height: 36px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; margin-top: 30px; background-color: #fff; }
.button-more:hover { background-color: #f1f1f1; }
.button-more span { font-size: 16px; letter-spacing: -0.48px; color: #202020; display: flex; align-items: center; line-height: 1; }
.button-more span:after { content: ''; background-image: url(/main/_lib/imgs/arrow_right.svg); width: 20px; height: 20px; display: block; background-repeat: no-repeat; background-position: 50%; }
.desktop .button-more { width: 450px; height: 50px; margin-top: 50px; }

.title_main { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; position: relative; }
.title_main .title { text-align: left; font-size: 18px; font-weight: bold; line-height: 1;  white-space: nowrap; overflow: hidden; color: #202020; letter-spacing: -0.4px; }
.title_main .sub { font-size: 14px; letter-spacing: -0.28px; font-weight: normal; color: #666; margin-top: 7px; }
.more { font-size: 13px; letter-spacing: -0.39px; color: #126CD5; }
.desktop .title_main { justify-content: center; margin-bottom: 30px; }
.desktop .title_main .title { font-size: 30px; text-align: center; }
.desktop .title_main .sub { font-size: 18px; }
.desktop .title_main .more { position: absolute; bottom: 10px; right: 0px; }


.mobile #MAIN_BANNER-contents { padding-top: 15px; }
.desktop #MAIN_BANNER { margin-bottom: 80px; }

.desktop #MAIN_BANNER a { display: block; position: relative; height: 450px; overflow: hidden; }
.desktop #MAIN_BANNER a img { height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); z-index: 0; }
.mobile #MAIN_BANNER { margin-bottom: 80px; }
#MAIN_BANNER .number_pagination { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.6); padding: 0 14px; border-radius: 12px; z-index : 1; }

.desktop #KEYWORD { margin-bottom: 100px; }
.mobile #KEYWORD { margin-bottom: 80px; }
#KEYWORD img { width: 100%; border-radius: 15px; }
#KEYWORD .row .col { margin-bottom: 16px; }
#KEYWORD .row .col:nth-child(n+6) { margin-bottom: 0; }

.desktop #SPECIAL { margin-bottom: 100px; }
.mobile #SPECIAL { margin-bottom: 80px; }
/* PC에서 모바일 마크업이 나와도 아이콘이 과하게 커지지 않도록 */
.desktop #SPECIAL {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
.desktop #SPECIAL .special-icon,
.desktop #SPECIAL img.w-100,
.desktop #SPECIAL .row-cols-5 img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    object-fit: cover;
    border-radius: 15px;
}
.desktop #SPECIAL .row-cols-5 > .col,
.desktop #SPECIAL .row-cols-5 > [class*="col"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.desktop #SPECIAL .main_title_mobile {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
}




.desktop #GROUP { margin-bottom: 100px; }
.mobile #GROUP { margin-bottom: 80px; }
#GROUP .thumb_box_3_2 { aspect-ratio: 3 / 2; width: 100%; overflow: hidden; position: relative; border-radius: 5px; }
#GROUP .thumb_box_3_2 img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; border: 1px solid #E5E5E5; }
#GROUP .thumb_box_3_2 .thumb-enddate { background-color: #444444; padding: 2px 6px; line-height: 1; color: #fff; position: absolute; top: 8px; left: 8px; border-radius: 4px; }
#GROUP .thumb_box_3_2 .soldout_box  { display: flex; position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; text-align: center; height: 100%; justify-content: center; align-items: center; font-weight: bold; color: #fff; line-height: 1.6666; border-radius: 5px; border: solid 1px #e5e5e5; top: 0; left: 0; }
#GROUP .text_area .sub_title { width: 100%; white-space: normal; line-height: 18px; margin-top: 12px; margin-bottom: 8px; text-align: left; font-size: 16px; letter-spacing: -0.48px; color:#202020; font-weight: bold; }
#GROUP .text_area .item_title { width: 100%; white-space: normal; line-height: 17px; margin-bottom: 7px; text-align: left; font-size: 15px; letter-spacing: -0.45px; color:#202020; }
#GROUP .text_area .price_box { display: flex; align-items: end; }
#GROUP .sale_percent { letter-spacing: -0.36px; color: #e8340c; text-align: left; font-weight: bold; font-size: 18px; }
#GROUP .sale_percent.pct:after { content: '%'; font-weight:500; }
#GROUP .price{ text-align: left; font-size: 18px; font-weight: bold; letter-spacing: -0.36px; color: #333333; margin: 0 4px; }
#GROUP .price.won:after { content: '원'; font-weight:500; }
#GROUP .market_price { text-align: left; text-decoration: line-through; font-size: 14px; letter-spacing: -0.28px; color: #999999; }
#GROUP .market_price.won:after { content: '원'; }
#GROUP .naver_price_box { display: flex; align-items: center; line-height: 1; margin-top: 7px; font-size: 14px; }
#GROUP i.icon-naver { margin-right: 5px; }
#GROUP .naver_price { letter-spacing: -0.56px; color: #1DC800; font-weight: 500; margin-right: 3px; }
#GROUP .naver_price_date { font-size: 12px; color: #999999; }
#GROUP .flag_box { display: flex; align-items: center; line-height: 1; margin-top: 13px; flex-wrap: wrap; gap: 4px; }
#GROUP .goods-label { background: #F4F4F4; border: 1px solid #F4F4F4; border-radius: 1px; padding: 2px 6px 3px 6px; color: #333333; line-height: 1; font-size: 13px; white-space: nowrap; overflow: hidden; }
#GROUP .goods-label i { margin-right: 2px; }
#GROUP .goods-label font { letter-spacing: -0.24px; }

#GROUP .item-market {
    margin: 0 !important;
}


.desktop #TODAY_PRICE { margin-bottom: 100px; }
.mobile #TODAY_PRICE { margin-bottom: 90px; }
#TODAY_PRICE .TODAY_PRICE_title { background-color: #F34C4C; letter-spacing: -0.4px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; font-weight: bolder; padding: 13px 0 12px 0; margin-bottom: 30px; line-height: 1; }
/* #TODAY_PRICE .goods-item { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #E5E5E5; } */
/* #TODAY_PRICE .thumb_area img { border: 1px solid #E5E5E5; border-radius: 5px; } */
#TODAY_PRICE .timer { background-color: #fff; letter-spacing: -1px; color: #126CD5; font-size: 14px; line-height: 1; display: flex; align-items: center; }
.desktop #TODAY_PRICE .timer { padding: 8px 0 7px 0; margin: 0; }
#TODAY_PRICE  .item-text {
    justify-content: space-between;
}
#TODAY_PRICE .sub_text {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -0.3px;
    position: relative;
    padding-left: 24px;
    padding: 6px 10px 5px 30px;
    border: 1px solid #E5E5E5;
    background-color: #F9F9F9;
    color: #202020;
}
#TODAY_PRICE .sub_text:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    background-image: url(/main/_lib/imgs/red-check.svg);
    width: 15px;
    height: 15px;
    background-size: 100%;
}

.desktop #PLANNING { margin-bottom: 100px; }
.mobile #PLANNING { margin-bottom: 80px; }
#PLANNING .goods-list .item-thumb-box img.thumb { border-radius: 0; border: 0; }
#PLANNING .goods-list .item-box { background-color: #fff; }
#PLANNING .goods-list .item-text { padding: 8px 10px; background-color: #fff; height: 140px; }
#PLANNING .goods-list .item-title { height: 40px; }
.desktop #PLANNING .flicking-pagination { display: none; }

.desktop #FOOD { margin-bottom: 100px; }
.mobile #FOOD { margin-bottom: 80px; }
#FOOD .goods-list .item-thumb-box img.thumb { border-radius: 0; border: 0; }
#FOOD .goods-list .item-box { background-color: #fff; }
#FOOD .goods-list .item-text { padding: 8px 10px; background-color: #fff; height: 140px; }
#FOOD .goods-list .item-title { height: 40px; }
.desktop #FOOD .flicking-pagination { display: none; }

.desktop #PROMOTION { margin-bottom: 100px; }
.mobile #PROMOTION { margin-bottom: 80px; }
#PROMOTION .goods-list .item-thumb-box img.thumb { border-radius: 0; border: 0; }
#PROMOTION .goods-list .item-box { background-color: #fff; }
#PROMOTION .goods-list .item-text { padding: 8px 10px; background-color: #fff; height: 140px; }
#PROMOTION .goods-list .item-title { height: 40px; }
.desktop #PROMOTION .flicking-pagination { display: none; }

/* border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
.category-wrapper { position: sticky; top: 0; z-index: 1011; display: flex; align-items: center; overflow-x: hidden; background: #fff;     padding: 10px 1rem; background-color: #fff; margin-bottom: 20px; }
.category-wrapper .category-bar { display: flex; overflow-x: auto; white-space: nowrap; gap: 8px; flex: 1; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; }
.category-wrapper .category-bar::-webkit-scrollbar { display:none; }
.category-wrapper .category-btn { flex: 0 0 auto; padding: 4px 12px; border: 1px solid #ccc; background: #fff; border-radius: 4px; font-size: 14px; cursor: pointer; color: #202020; }
.desktop .category-wrapper .category-btn { padding: 8px 12px; }
.category-wrapper .category-btn.checked { background-color: #202020; color:#FFF; }
.category-wrapper .category-fade { position: absolute; right: 44px; top: 0; bottom: 0; width: 30px; background: linear-gradient(to right, transparent, white); pointer-events: none; z-index: 1; }
.category-wrapper .dropdown-btn { flex-shrink: 0; border: 1px solid #ccc; background: #fff; padding: 4px 12px; border-radius: 4px; margin-left: 8px; z-index: 2; color: #202020; }




.desktop #BEST_PRODUCT { margin-bottom: 100px; }
.mobile #BEST_PRODUCT { margin-bottom: 80px; }
.desktop #BEST_PRODUCT .item_box { margin-right: 24px; width: 267px; margin-bottom: 60px !important; }
.desktop #BEST_PRODUCT .item_box:nth-child(4n) { margin-right: 0; }
.desktop #BEST_PRODUCT .item_box:nth-child(n+5) { margin-bottom: 0 !important; }

.desktop #NEW_PRODUCT { margin-bottom: 100px; }
.mobile #NEW_PRODUCT { margin-bottom: 80px; }
.desktop #NEW_PRODUCT .item_box { margin-right: 24px; width: 267px; margin-bottom: 60px !important; }
.desktop #NEW_PRODUCT .item_box:nth-child(4n) { margin-right: 0; }
.desktop #NEW_PRODUCT .item_box:nth-child(n+5) { margin-bottom: 0 !important; }

.desktop #BANNER_ROLL { margin-bottom: 100px; }
.mobile #BANNER_ROLL { margin-bottom: 80px; }
#BANNER_ROLL .banner_box { position: relative; }
#BANNER_ROLL .banner_box { position: relative; }
#BANNER_ROLL .banner_box .banner_con_box { position: absolute; background-color: rgba(32, 32, 32, 0.8); bottom: 0; width: 100%; }
#BANNER_ROLL .banner_box .banner_roll_tit { display: none; }
#BANNER_ROLL .banner_box .banner_roll_sub { display: none; }
#BANNER_ROLL .banner_box .banner_roll_date { color: #fff; padding: 6px 0; display: flex; align-items: center; justify-content: center; letter-spacing: -0.42px; font-size: 1rem; }

.desktop #DDY { margin-bottom: 100px; }
.mobile #DDY { margin-bottom: 80px; }

.desktop #BARO { margin-bottom: 100px; }
.mobile #BARO { margin-bottom: 80px; }

.desktop .THEMA { margin-bottom: 100px; }
.mobile .THEMA { margin-bottom: 80px; }




.flicking-control { position: absolute; right: 5%; bottom: 0px; left: auto; width: auto; background: rgba(0, 0, 0, .45); color: #fff; padding: 0 10px; z-index: 1; }
.desktop .flicking-control { right: auto; left: 50%; font-size: 1rem; }
.flicking-control .flicking-pagination { position: unset; }

#main-banner-modal.desktop { width: 1140px; }
#main-banner-modal.desktop .modal-header { display: none;}

#popup-modal .modal-body {
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
#popup-modal #POPUP .flicking-viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
#popup-modal #POPUP .flicking-camera {
    box-sizing: border-box;
}
#popup-modal #POPUP .popup-flicking-panel,
#popup-modal #POPUP .flicking-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
#popup-modal #POPUP .popup-flicking-panel a,
#popup-modal #POPUP .flicking-panel a {
    box-sizing: border-box;
}
#popup-modal #POPUP img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}