.filter-wrap {
    display: flex;
    align-items: center;
    border-top: 1px solid #eaecef;
}

.filter-tit {
    padding: .75rem 0;
}

.filter-wrap h2 {
    width: 100%;
    max-width: 180px;
    font-size: 1rem;
    font-weight: 400;
    background: #f8f8f8;
    color: #818181;
    padding: 30px;
    margin: 0;
}

.filter-wrap > ul {
    display: flex;
    margin: 0 30px;
    flex-wrap: wrap;
}

.filter-wrap > ul > li {
    margin-right: 20px;
}

.colour-box {
    position: relative;
    padding-left: 15px;
    overflow: hidden;
}

.colour-box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid transparent;
}

.colour-box.colour--white:before {
    background: #fff;
    border: 1px solid #dededd;
}

.colour-box.colour--beige:before {
    background: #decdb3;
}

.colour-box.colour--brown:before {
    background: #856239;
}

.colour-box.colour--gray:before {
    background: #9b9a9a;
}

.colour-box.colour--black:before {
    background: #000;
}

.colour-box.colour--vivid:before {
    background: linear-gradient(to right, red, orange, yellow, green, skyblue, blue, purple);
}

.filter-wrap .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: #adb5bd !important;
    background-color: #ffffff;
}


@media (max-width: 959.98px) {
    .filter-wrap {
        flex-direction: column;
    }

    .filter-wrap h2 {
        max-width: 100%;
        padding: 15px 20px;
    }

    .filter-wrap > ul {
        padding: 15px 20px;
        width: 100%;
    }

    .filter-wrap > ul > li {
        margin-right: 10px;
        padding: 3px;
    }
}

/* set cols count 5 20% */
@media (min-width: 1560px) {
    .color_item{width:20% !important;max-width:20% !important;flex:0 0 20%;}
}
.color_item:hover .card-action-group{box-shadow: 0px 0px 10px 3px #888;}

.btn-image-download__text-differ,
.btn-image-download__text-content {
    display: block;
}
.btn-image-download__text-differ {
    opacity: 0.8;
    font-size: inherit;
}
@media (min-width: 640px) {
    .btn-image-download__text-differ {
        text-align: left;
        line-height: 1.35;
    }
}
/**
24-08-23
colorList.php 클릭방지 추가
 */
.click-prevent {
    /*pointer-events : none;*/
    display : none !important;
}