/* 커스텀 css css만 수정할시 사용해주세요. 사용후 퍼블리셔에게 꼭 알려주세요 */

main {

}

@media (max-width:calc(1600px + 6vw)) {

}

@media (max-width:1024px) {

}

@media (max-width:767px) {

}

@media (max-width:450px) {

}

/*
    제품 테이블 정렬 아이콘 및 반응형 디자인을 위한 사용자 지정 CSS입니다.
*/
/* 정렬 가능한 헤더 */
.product_table_wrap.sortable th:not(.no-sort) {
    cursor: pointer;
    position: relative;
    padding-right: 16px;
}

.product_table .product_table_wrap thead tr th, .product_table .product_table_wrap thead tr td, .product_table .product_table_wrap tbody tr th, .product_table .product_table_wrap tbody tr td  {
    font-size: 15px;
}

/* 위쪽 삼각형 */
.product_table_wrap.sortable th:not(.no-sort)::before {
    content: "";
    position: absolute;
    right: 8px;
    top: calc(50% - 5px);

    width: 0;
    height: 0;

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #c5cad0;
}

/* 아래쪽 삼각형 */
.product_table_wrap.sortable th:not(.no-sort)::after {
    content: "";
    position: absolute;
    right: 8px;
    top: calc(50% + 2px);

    width: 0;
    height: 0;

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #c5cad0;
}

/* 오름차순일 때 위쪽 삼각형 강조 */
.product_table_wrap.sortable th[aria-sort="ascending"]::before {
    border-bottom-color: #333;
}

/* 내림차순일 때 아래쪽 삼각형 강조 */
.product_table_wrap.sortable th[aria-sort="descending"]::after {
    border-top-color: #333;
}

/* 정렬하지 않는 컬럼 */
.product_table_wrap.sortable th.no-sort {
    cursor: default;
}