/* design.php / gift.php 프로덕트 리스트에서 사용하는 스타일시트 */
body,html{
    height: auto;
}

body.body-filter-now{
    overflow: hidden;
}

/* 모바일 네비 */
/* 상단 모바일 버튼 */
.product_top_button_wrapper{
    /* flex */
    display: flex;
    align-items: center;
    gap: 15px;
}

.product_top_buttons {
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
}
/* 상단 모바일 버튼 아이콘 */
.product_top_buttons img{
    width: 100%;
    height: auto;
}


/* 상품 리스트 메인 wrapper */
.main-design{
    margin: 0;
    padding: 0 5px 80px 5px ;
}
/* 서브 카테고리 스타일링 */
.sub_category_total_wrapper{
    position: sticky;
    top: 60px;
    z-index: 10000;
    width: 100%;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
}

#sub_category_lists{
    width: 100%;
    /* flex */
    display: flex;
    align-items: center;
    gap: 0;
    /* overflow */
    overflow-x: auto;
}

/* 서브 카테고리 아이템 */
.sub_category_items{
    padding: 17px 32px;
    /* font */
    color: var(--main-dark-grey);
    text-align: center;
    font-family: var(--font-kr);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
    white-space: nowrap;
    /* cursor */
    cursor: pointer;
    /* border */
    border-bottom: 2px solid #FFF;
}

.sub_category_items.active{
    color: var(--dark-main-color);
    border-color: var(--dark-main-color);
}

/* 프로덕트 인포 관련 섹션 */
.product_info_sec{
    width: 100%;
    /* margin */
    padding: 20px 3%;
    /* flex */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 상품 개수 */
.product_cnt{
    color: var(--main-dark-grey);
    font-family: var(--font-kr);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 100% */
}

/* 필터 버튼 */
.product_filter_btn{
    width: auto;
    /* flex */
    display: flex;
    align-items: center;
    /* font */
    color: #000;
    text-align: right;
    font-family: var(--font-kr);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
    gap: 4px;
}
/* 필터 아이콘 */
.product_filter_icon{
    display: inline-block;
    width: 20px;
    height: 20px;
}

.product_filter_icon img{
    width: 100%;
    height: 100%;
}



/* filter */
/* 마켓형, 상품 필터 GUI 개선 작업
===================================================*/

/* background blind off */
.blind-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    z-index: 13000;
    overflow-y: hidden;
    /* display */
    display: none;
  }
  
  /* background blind on */
  .blind-bg-active {
    /* display */
    display: block;
  }
  
  /* Toggle off */
  .sideFilter {
    min-width: calc(200px + 37px);
    width: auto;
    height: 100%;
    position: fixed;
    top:0;
    right: 0;
    z-index: 14000;
    /* flex */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    /* overflow */
    overflow: hidden;
  
    /* Transform */
    transform: translateX(100vw);
  
    /* transition */
    transition: all 400ms ease-in-out;
  }
  
  /* Toggle on */
  .sideFilter-active {
    /* Transform */
    transform: translateX(0);
    visibility: visible;
    /* transition */
    transition: all 400ms ease-in-out;
  }

  /* 사이드 필터 메인 부분 */
  .sideFilter_main{
    max-width: 200px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* overflow */
    overflow: auto;
    /* padding */
    padding: 40px 0 150px 0;
  }
  
  /* 사이드 닫기 버튼 */
  .sideFilter_close{
    display: block;
    /* size */
    width: 25px;
    height: 25px;
    /* margin */
    margin: 9px 12px 0 0;
  }
  .sideFilter_close img{
    width: 100%;
    height: 100%;
  }

  /* 사이드 필터 내용물 */
  .filter-box-styled{
    width: 100%;
  }

  .filter-box-styled:not(.filter-box-styled:first-child){
    border-top: 8px solid #f3f3f3;
  }
  /* 기본 필터 스타일 */
  .filter-box-styled li{
    width: 100%;
    /* padding */
    padding: 14px 16px;
    /* font */
    color: var(--main-dark-grey);
    font-family: var(--font-kr);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
    /* flex */
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  /* 필터 이름 */
  .filter-box-styled li .filter-name{
    width: calc(100% - 36px);
  }

  /* 필터 아이콘 */
  .filter-box-styled li .checked{
    display: block;
    width: 20px;
    height: 20px;
  }

  /* 필터 체크시 */
  .filter-box-styled .filter-checked{
    color: var(--dark-main-color);
    font-weight: 700;
    background: #EAF6F6;
  }

  /* 필터 체크시 아이콘 */
  .filter-box-styled .filter-checked .checked{
    background: url(../../img/icon/agree/able.png) no-repeat center/cover;
  }

/* PC 에만 존재 */
.only_pc{
    display: none;
}
.companyinfo{
    display: none;
}

/* 상품이 없을때 */
.no_result_wrapper{
    padding: 80px 0;
}

/* 상품 베이스 선택 리스트 */
.base{
    width: 100%;
    background-color: #fff;
    margin-bottom: 8px;
    padding: 40px 0;
    overflow: hidden;
}
/* 리스트 */
.baselist{
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    /* flex */
    display: -webkit-box;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

/* 베이스 전체 */
.baseall{
    color: var(--main-dark-grey);
    text-align: center;
    font-family: var(--font-kr);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 100% */
    /* size */
    width: 52px;
    height: 52px;
    /* flex */
    display: flex;
    align-items: center;
    justify-content: center;
    /* border */
    border-radius: 50%;
    border: 2px solid var(--main-dark-grey);
}

/*  베이스 전체 active */
.baseactive .baseall{
    color: var(--main-color);
    border-color: var(--main-color);
}


/* 베이스 아이템 */
.baseitem{
    cursor: pointer;
}

/* All을 제외한 모든 베이스 */
.base_only_item{
    /* size */
    width: 56px;
    height: 56px;
    /* border */
    border-radius: 50%;
    border: 2px solid #fff;
    /* over */
    overflow: hidden;
}

.base_only_item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Active 베이스 */
.base_only_item.baseactive{
    border-color: var(--main-color);
}

/* 모바일 버전 */
@media screen and (max-width: 992px) {
    /* 베이스 */
    .base {
        padding: 20px 0 20px 16px;
    }
}

/* PC 버전 */
@media screen and (min-width: 992px) {
    /* Gift 카테고리 페이지 모바일 헤더 없애기*/
    .gift-common-header{
        display: none;
    }
    /* PC 에만 존재 */
    .only_pc{
        display: block;
    }
    /* 현재있는 대카테고리명  */
    .product_now_category{
        max-width: 1300px;
        width: 100%;
        margin: 0 auto;
        /* font */
        color: #000;
        font-family: var(--font-kr);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px; /* 90% */
        padding-bottom: 24px;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* 카테고리로 돌아가기 */
    .product_back_category{
        color: var(--main-dark-grey);
        text-align: right;
        font-family: var(--font-kr);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px; /* 100% */
        text-decoration-line: underline;
        cursor: pointer;
    }
    /* 상단 배너 */
    .category_topbanners{
        width: 100%;
        background-color: #fff;
        padding: 40px 0;
    }
    .swiper-container{
        max-width: 1300px;
        width: 100%;
        margin: 0 auto;
    }

    /* 서브 카테고리 */
    #sub_category_lists{
        max-width: 1300px;
        width: 100%;
        margin: 0 auto;
    }
    .companyinfo{
        display: flex;
    }

    /* Filter GUI 개선 */
    .sideFilter{
        min-width: calc(360px + 37px + 5px);
        /* top: unset; */
    }
    /* 메인 */
    .sideFilter_main{
        max-width: 360px;
    }

    /* 스크롤 */
    .sideFilter_main::-webkit-scrollbar {
        display: block;
        width: 5px;
    }
    .sideFilter_main::-webkit-scrollbar-thumb {
        background-color: var(--dark-main-color);
        border-radius: 2px;
    }
    .sideFilter_main::-webkit-scrollbar-track {
        background-color: #fff;
    }
    
    /* 프로덕트 인포 섹션 */
    .product_info_sec{
        max-width: 1300px;
        width: 100%;
        margin: 0 auto;
        padding: 30px 1% 0 1%;
    }
    /* 상품 개수 */
    .product_cnt{
        font-size: 14px;
        line-height: 14px;
    }
}

/* 1300px과 992px 사이 일때 */
@media screen and (min-width:992px) and (max-width: 1300px) {
    /* 대카테고리 명 */
    .product_now_category{
        padding: 0 16px 24px 16px;
    }
    /* 베이스에 패딩일부 주기 */
    .base {
        padding-left: 16px;
        padding-right: 16px;
    }
}