/* BASIC css start */
/* BASIC css start */
 
.sec-best {
    background: #f4f6f8;
    /* margin: 30px 0 0; */
    padding-bottom: 65px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px; 
    padding-top: 65px;
}

.section-header h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #000;
}

.section-header h2 span {
    font-size: 28px;
    font-weight: bold;
    color: #000;
    color: var(--maincolor);
}
/*
.section-header h2 span::after {
    content: "";
    background: #ddd;
    width: 1px;
    height: 28px;
    position: absolute;
    top: 6px;
    right: 0;
}
*/

.product_count {
    color: #555555;
    font-size: 16px;
    padding: 25px 0 15px;
}

.product_count strong {
    font-weight: bold;
    color: #000;
}

.sort {
    display: flex;
    border-top: 2px solid #000;
}

.sort li {
    flex: 1;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.sort li:first-child, .sort li + li {
    border-left: 1px solid #ddd;
}

.sort li:last-child {
    border-right: 1px solid #ddd;
}

.sort li a {
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #000000;
    font-size: 17px;
}

.sort li:has(a.on) {
    background: #fff;
    border-bottom: 0;
}

.sort + .paging {
    padding-top: 30px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    border-top: 2px solid #000;
    /* border-left: 1px solid #ddd; */
    font-size: 17px;
    box-sizing: border-box;
}

a.main-item {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 10px 17px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: #000;
    background-color: #ffffff;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 17px;
}
.main-item:nth-child(6n+1 of .main-item) {
    border-left: 1px solid #ddd;
}
a.main-item:hover {
    background-color: #fafafa;
}

div.active-main {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #000000;
}

div.active-main > .active-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 50px;
    padding: 10px 17px;
    color: #ffffff;
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
    box-sizing: border-box;
}

.sub-menu-fullrow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.sub-item {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 10px 17px;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f4f6f8;
    color: #777777;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 17px;
}
.sub-item:nth-child(6n+1) {
    border-left: 1px solid #ddd;
}
.sub-item:not(.empty):hover {
    color: #000;
}

.sub-item.active-sub {
    color: #000;
    font-weight: bold;
}

.sub-item.empty {
    pointer-events: none;
}

.sec-location {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #cccccc;
    font-size: 14px;
    padding: 30px 0;
}

.sec-location > a {
    display: none !important;
}

.sec-location select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 41px;
    padding: 0 32px 0 10px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background-color: #ffffff;
    color: #555;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.sec-location select:focus {
    border-color: #bbbbbb;
}

.sec-location select::-ms-expand {
    display: none;
}



/* 필터 */
.btn-filter {margin-top:30px;padding-left:25px;font-size:15px;font-weight:bold;background:url(/images/common/icon_filter.png) no-repeat left center;display: none;}
.filter-wrap * {font-family:'Malgun Gothic';color: #000;word-break:break-all;}
.layer-filter-wrap {display: block !important;/* position:fixed; *//* left:0; *//* top:0; *//* width:100%; *//* height:100%; *//* background:rgba(0,0,0,0.4); *//* z-index:999; *//* content:''; */}
.layer-filter-wrap .layer-filter {/* position:fixed; *//* left:0; *//* top:0; *//* width:400px; *//* height:100%; *//* background:#fff; *//* z-index:200; *//* overflow:auto; */position: relative;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar {width:6px;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar-thumb {height:30%; background:#666; border:2px solid #fff;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar-track {background:#fff;}
.layer-filter-wrap .layer-filter .tit {position:sticky; top:0; padding:30px; background:#fff; border-bottom:1px solid #f0f0f0; z-index:100;}
.layer-filter-wrap .layer-filter .tit h3 {display:inline-block; font-size:17px; font-weight:bold;}
.layer-filter-wrap .layer-filter .tit .total-count {display:inline-block;margin-left:15px;color: var(--maincolor);font-size:13px;}
.layer-filter-wrap .layer-filter .tit .btn-close {position:absolute;right:30px;top:30px;width:18px;height:18px;font-size:0px;text-indent:-9999px;background:url(/images/common/icon_close.png) no-repeat left center;display: none;}
.layer-filter-wrap .layer-filter .opt-box li > div {/* padding-top:7px; */display: inline-flex !important;gap: 15px;flex: 1;flex-wrap: wrap;}
.layer-filter-wrap .layer-filter .opt-box li > span {
    width: 140px;
    flex-shrink: 0;
}
.layer-filter-wrap .layer-filter .opt-box li {padding:18px 30px 17px;border-bottom:1px solid #f0f0f0;/* background:url(/images/common/icon_arr_down.png) no-repeat 92% 22px; */font-size:15px;font-weight:bold;cursor: default;display: flex;}
.layer-filter-wrap .layer-filter .opt-box li.active {/* background:url(/images/common/icon_arr_up.png) no-repeat 92% 22px; */}
.layer-filter-wrap .layer-filter .opt-box li input[type="checkbox"]{display:none;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label {position:relative;height:21px;line-height:19px;/* margin-top:10px; */padding-left:26px;display:block;font-size:13px;font-weight:normal;cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label:before {position:absolute; left:0; top:0; width:21px; height:21px; background:url(/images/common/chkbox_off.png) no-repeat center center; content:'';}
.layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"]:checked + label:before {background:url(/images/common/chkbox_on.png) no-repeat center center;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code {display:flex; flex-wrap:wrap; gap:15px; margin-top:10px;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code label {display:block; width:36px; height:36px; border:3px solid #fff; border-radius:50%; font-size:13px; font-weight:normal; box-shadow:0px 0px 1px 1px #dfdfdf; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label {box-shadow:0px 0px 1px 1px #000;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label + p {color:#202020;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code p {padding-top:9px; color:#a6a6a6; font-size:12px; text-align:center; font-weight:normal;}
.layer-filter-wrap .layer-filter .select-filter {display:flex; flex-wrap:wrap; gap:5px; margin:20px 0 0; padding:0 30px;}
.layer-filter-wrap .layer-filter .select-filter li {display:flex; align-items:center; padding:6px 10px 7px; background:#f8f8f8; border-radius:5px; font-size:13px;}
.layer-filter-wrap .layer-filter .select-filter li .btn-del {width:10px; height:10px; margin-left:5px; background:url(/images/common/icon_txt_delete.png) no-repeat right center; font-size:0px; text-indent:-9999px;}
.layer-filter-wrap .layer-filter .select-filter li .color-code {display:inline-block; width:18px; height:18px; margin-right:5px; border-radius:50%;}
.layer-filter-wrap .layer-filter .select-filter li .filter-text {max-width:200px;}
.layer-filter-wrap .layer-filter .btn-wrap {display:flex;border: 1px solid var(--maincolor);border-radius: 6px;box-sizing:border-box;position: absolute;top: 22px;left: 160px;z-index: 100;}
.layer-filter-wrap .layer-filter .btn-wrap button {width:auto;padding: 10px 0;text-align:center;background: var(--maincolor);font-size:14px;font-weight:bold;color: #fff;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {width:100%;min-width: 160px;border-radius:5px;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-search {min-width:220px; background:#202020; border-radius:0 5px 5px 0;}
.layer-filter-wrap .layer-filter .btn-wrap button span {display:inline-block;visibility:visible;color: #fff;}
.layer-filter-wrap .layer-filter .btn-wrap button span.fc-fff {color:#fff;}


.more {
    padding: 80px 0;
}

.more a {
    border: 1px solid #ddd;
    width: 100%;
    max-width: 480px;
    height: 70px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 22px;
    font-weight: bold;
    margin: 0 auto;
}

.sort + #MS_product {
    margin-top: 50px;
}
.items.default:not(.swiper-wrapper) + .items.default:not(.swiper-wrapper) {
    margin-top: 80px;
}
.br-bl { border-bottom-left-radius: 6px !important; }
.br-br { border-bottom-right-radius: 6px !important; }

.swiper:has(> .items) .swiper-button-prev, .swiper:has(> .items) .swiper-button-next {
    background: #fff;
}

.sec-best .items>li .thumbArea {
    border: 1px solid rgba(0, 0, 0, .04);
}

.sec-best .items>li .thumbArea .thumb-link::after {
    background-color: transparent;
}

/* BASIC css end */


/* BASIC css end */