@charset "utf-8";

.web_width_1140 {
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
}

.mobile .web_width_1140 {
    width: 100%;
}

/* 대기획전 띠배너(DDY) PC: 원본 크기, 가운데, max 1200px */
.desktop .month-ddy-banner {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}
.desktop .month-ddy-banner a {
    display: inline-block;
    max-width: 1200px;
}
.desktop .month-ddy-banner img {
    display: block;
    width: auto;
    height: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* PC 메인배너: 전폭 1장 슬라이드 */
.desktop #MAIN_BANNER {
    width: 100%;
    max-width: none;
}
.desktop #MAIN_BANNER .swiper,
.desktop #MAIN_BANNER .swiper-slide {
    width: 100%;
}
.desktop #MAIN_BANNER img {
    display: block;
    width: 100%;
}

/* PC 배너: 부모 폭 안에서만 보이도록 */
.desktop #BEST .swiper,
.desktop #EVENT .swiper {
    overflow: hidden;
}

/* PC 진행중 이벤트 3개 미만: 가운데 정렬 (모바일 미적용) */
.desktop #EVENT .swiper.event-center .swiper-wrapper {
    justify-content: center !important;
    transform: translate3d(0, 0, 0) !important;
}

.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-34 { font-size: 34px; }

.title {
    margin: 0 0 20px 0;
    font-size: 20px;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.6px;
}

.desktop .title {
    font-size: 30px;
}

.MAIN_BANNER-pagination { padding: 10px 14px; opacity: 1; border-radius: 20px; background-color: rgba(0,0,0,0.4); z-index: 1; padding: 0 14px; height: 38px; display: none; align-items: center;}
.mobile .MAIN_BANNER-pagination {height: 30px;}
.MAIN_BANNER-pagination .swiper-pagination-fraction {color: #fff}
.MAIN_BANNER-pagination .swiper-button-prev, .MAIN_BANNER-pagination .swiper-button-next { background-image: none; width: auto; height: auto; position: unset; display: block; margin: 0; color: #fff; transform: none !important;}
.MAIN_BANNER-pagination .swiper-button-prev:after, .MAIN_BANNER-pagination .swiper-button-next:after {content: '';}
.MAIN_BANNER-pagination .swiper-button-prev {margin-right: 14px;}
.MAIN_BANNER-pagination .swiper-button-next {margin-left: 14px;}

.BEST-pagination { padding: 10px 14px; opacity: 1; border-radius: 20px; background-color: rgba(0,0,0,0.4); z-index: 1; padding: 0 14px; height: 38px; display: flex; align-items: center;}
.mobile .BEST-pagination {height: 30px;}
.BEST-pagination .swiper-pagination-fraction {color: #fff}
.BEST-pagination .swiper-button-prev, .BEST-pagination .swiper-button-next { background-image: none; width: auto; height: auto; position: unset; display: block; margin: 0; color: #fff; transform: none !important;}
.BEST-pagination .swiper-button-prev:after, .BEST-pagination .swiper-button-next:after {content: '';}
.BEST-pagination .swiper-button-prev {margin-right: 14px;}
.BEST-pagination .swiper-button-next {margin-left: 14px;}

.mobile #EVENT .swiper-slide {
    width: 90% !important;
}

#MAIN_CATEGORY .text {
    font-size: 0.78rem;
    letter-spacing: -1px;
    text-align: center;
    margin-top: 0.5rem;
    color: #222;
}

.text_area .item_title {
    width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
    text-overflow: ellipsis;
    line-height: 20px;
    margin-top: 1rem;
    margin-bottom: 5px;
    text-align: left;
    font-size: 16px;
}

/* 대표 특가상품: 공동구매 리스트(goods_list.css) 가격 스타일 우선 */
#BEST .item_box .text_area .price_box {
    display: flex;
    align-items: baseline;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

#BEST .item_box .text_area .market_price:after {
    content: none;
}

#BEST .item_box .text_area .price_box .sale_percent {
    font-size: 1.35rem;
    font-weight: bold;
    color: #ff7169;
    margin-right: 8px;
}

#BEST .item_box .text_area .price_box .sale_percent:after {
    content: '%';
    margin-right: 5px;
}

.text_area .price_box {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.text_area .price_box {
    display: flex;
    align-items: baseline;
    letter-spacing: -0.88px;
    line-height: 1;
    margin-bottom: 5px;
}

.text_area .price_box .sale_percent {
    font-size: 1.35rem;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-align: left;
    color: #ff7169;
    margin-right: 8px;
}

.text_area .price_box .sale_percent:after {
    content: '%';
    margin-right: 5px;
}

.text_area .market_price {
    font-size: 0.95rem;
    letter-spacing: -0.56px;
    text-align: left;
    color: #888;
    padding: 1px 4px;
    text-decoration: line-through;
}

.text_area .market_price:after {
    content: '원';
}

.text_area .price_box .price {
    font-size: 1.35rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    /* letter-spacing: -0.88px; */
    text-align: left;
    color: #303030;
    margin-right: 8px;
}

.text_area .naver_price_box {
    display: flex;
    align-items: center;
}

.text_area .naver_price_box .naver_price {
    font-size: 0.9rem;
    letter-spacing: -0.6px;
    text-align: left;
    color: #1dc800;
    margin-right: 4px;
    line-height: 1;
}

.naver_price_box::before {
    content: ' ';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='655' height='655' overflow='hidden'%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect x='128' y='110' width='655' height='655'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23clip0)' transform='translate(-128 -110)'%3E%3Cpath d='M781.13 710.225C781.13 738.924 757.896 762.169 729.08 762.169L184.05 762.169C155.364 762.169 132 738.924 132 710.225L132 164.944C132 136.245 155.364 113 184.05 113L729.08 113C757.766 113 781.13 136.245 781.13 164.944L781.13 710.225Z' fill='%2300C300' fill-rule='evenodd' fill-opacity='1'/%3E%3Cpath d='M399.631 275.979C359.174 274.159 318.587 275.459 278 275.329 278.259 383.749 278.13 492.169 278.13 600.589 318.587 600.849 359.174 600.719 399.631 600.589 400.279 546.899 398.853 493.079 400.279 439.259 413.635 457.849 425.695 477.349 439.31 495.679 462.002 531.039 487.677 564.319 509.462 600.199 550.308 601.239 591.024 600.199 631.87 600.849 632.26 595.779 632.778 590.709 632.778 585.639 632.13 482.159 633.297 378.679 632.26 275.199 591.932 274.939 551.605 275.329 511.277 275.069 511.018 329.149 511.536 383.229 510.888 437.179 473.413 383.879 438.013 328.759 399.631 275.979Z' fill='%23FFFFFF' fill-rule='evenodd' fill-opacity='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
    margin-right: 0.2rem !important;
    margin-bottom: 3px;
}

.text_area .naver_price_box .naver_price:after {
    content: '원';
}
















.cate_nav_1,
.cate_nav_2,
.cate_nav_3 {
    position: relative;
}

.cate_nav_1 ul li span { height: 50px; cursor: pointer; }
.cate_nav_2 ul li span { height: 48px; cursor: pointer; }
.cate_nav_3 ul li span { 
    height: 44px; 
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 5px;
}
.cate_nav_3 .nav-more button { width: 46px; height: 46px; }

.mobile_wrap .cate_nav_1 ul li span { height: 38px; }
.mobile_wrap .cate_nav_2 ul li span { height: 34px; }
.mobile_wrap .cate_nav_2 .nav-more button { width: 36px; height: 36px; }
.mobile_wrap .cate_nav_3 ul li span { height: 38px; }
.mobile_wrap .cate_nav_3 .nav-more button { width: 40px; height: 40px; }

.mobile_wrap .cate_nav_1,
.mobile_wrap .cate_nav_2 { padding: 10px 16px; margin: 0; background-color: #f4f4f4; }
.cate_nav_3 { padding: 0; margin: 0; background-color: #f4f4f4; }

.cate_nav_wrap {
    position: relative;
}

.mobile .cate_nav_wrap {
    border-left: 1px solid #dee2e6;
}

.mobile_wrap .cate_nav_wrap {
    /* border-bottom: 1px solid #dee2e6; */
    background-color: #f9f9f9;
}

.cate_nav_wrap ul li span {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 16px; */
    color:#000;
}

.cate_nav_1 ul li.active span,
.cate_nav_1 ul li:hover span {
    background-color: #01178d;
    color:#fff;
}

.cate_nav_2 ul li.active span,
.cate_nav_2 ul li:hover span {
    background-color: #000;
    color:#fff;
    border-radius: 100px;
}

.cate_nav_3 .nav_item {
    /* margin-right: 30px; */
    /* padding: 12px 0; */
    line-height: 1;
}

.mobile_wrap .cate_nav_3 .nav_item {
    /* margin-right: 20px; */
    /* padding: 12px 5px 8px 5px; */
    text-align: center;
}

.w-scroll-css {
    overflow-y: hidden;
    overflow-x: auto;
    padding-right: 36px;
}

.w-scroll-css::-webkit-scrollbar {
    display: none;
}

.w-scroll-css ul {
    padding: 10px !important;
    display: inline-flex;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
}

.w-scroll-css ul li {
    display: table-cell;
    float: none;
    width: initial;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

.cate_nav_2 .w-scroll-css ul li {
    /* border-top: 1px solid #dee2e6; */
    /* border-bottom: 1px solid #dee2e6; */
    margin-top: -1px;
    padding-right: 10px;
}


.none-scroll-css {
    overflow-y: initial;
    overflow-x: initial;
}

.cate_nav_3 .none-scroll-css {
    padding-left: 20px;
}

.none-scroll-css ul {
    display: flex;
}

.none-scroll-css .col-auto {
    flex: 1 1 auto;
}

.nav-more {
    position: initial;
    height: 0;
    border: 0;
}

.nav-more button {
    height: 36px;
    width: 36px;
    position: absolute;
    top: 10px;
    right: 0;
    background: #f9f9f9;
    border: 0;
    color: transparent;
    /* border: 1px solid #fefefe; */
    outline: 0;
}

.cate_nav_3 .nav-more button {
    top: 0;
}

.nav-more button:before {
    height: 8px;
    width: 8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    border: 1px solid #333;
    border-width: 0 1px 1px 0;
    content: "";
}

.nav-more button.open:before {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    margin: -3px 0 0 -3px;
}

/* .nav-more button:after {
    display: block;
    height: 100%;
    width: 14px;
    position: absolute;
    left: -14px;
    top: 0;
    content: "";
    background: -webkit-gradient(linear,left top,right top,from(rgba(250,250,250,0)),to(#efefef));
    background: -webkit-linear-gradient(left,rgba(250,250,250,0) 0,#efefef 100%);
    background: linear-gradient(90deg,rgba(250,250,250,0) 0,#efefef 100%);
} */







.main_swiper_tab .swiper-tab .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #222;
}


.mobile .flex_overflow_x {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.flex_overflow_x {
    display: inline-flex;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
}


#M_GNB_contents {
    margin-bottom: 0px !important;
}



.dan3_list .item_box .text_area .price_box .sale_percent {
    margin-right: 8px;
}





.row-col-border.row {border-left: 1px solid #dee2e6;}
.row-col-border.row .col {border-top: 1px solid #dee2e6; border-right: 1px solid #dee2e6; padding: 0.5rem 0.5rem;}
.row-col-border.row .col:not(:last-child) {border-right: 1px solid #dee2e6;}
.row-col-border.row {border-bottom: 1px solid #dee2e6;} 
.row-col-border.row .col-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
} 


.fitem {
    cursor: pointer;
    line-height: 1;
    border-radius: var(--bs-border-radius) !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    font-size: 1.1rem;
}

.fitem.active {
    /* --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; */
    background: #0076c6;
    color: #fff;
    font-weight: bold;
}

.ritem {
    cursor: pointer;
    line-height: 1;
    --bs-text-opacity: 1;
    color: #0076c6;
    font-weight: bold;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    margin-right: .25rem !important;
    font-size: 1.1rem ;
}

.ritem:hover {
    color: var(--bs-dark-color) !important;
}


.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: 10px;
    border: solid 1px #e5e5e5;
}