/* =========================================================
   롤러 컨베이어 사양표
   PC 기준 최대폭 : 860px
========================================================= */

.roller-spec {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
    color: #333;
    box-sizing: border-box;
}

.roller-spec *,
.roller-spec *::before,
.roller-spec *::after {
    box-sizing: border-box;
}


/* 표 스크롤 영역 */
.roller-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 2px solid #364756;
    border-bottom: 1px solid #cfd5d9;
    -webkit-overflow-scrolling: touch;
}


/* 표 기본 */
.roller-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
}


/* 열 폭 */
.roller-table .col-product {
    width: 82px;
}

.roller-table .col-width {
    width: 63px;
}

.roller-table .col-name {
    width: 58px;
}

.roller-table .col-length1 {
    width: 115px;
}

.roller-table .col-length2 {
    width: 110px;
}

.roller-table .col-leg {
    width: 55px;
}

.roller-table .col-roller {
    width: 55px;
}

.roller-table .col-weight {
    width: 57px;
}

.roller-table .col-w1 {
    width: 50px;
}

.roller-table .col-w2 {
    width: 50px;
}

.roller-table .col-height {
    width: 55px;
}


/* 헤더 */
.roller-table thead th {
    padding: 8px 3px;
    border-right: 1px solid #d4d9dc;
    border-bottom: 1px solid #cbd2d6;
    background: #f1f4f3;
    color: #222;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}

.roller-table thead tr:first-child th {
    background: #e9eeeb;
    font-weight: 600;
}


/* 본문 */
.roller-table tbody td {
    height: 35px;
    padding: 5px 5px;
    border-right: 1px solid #dde1e3;
    border-bottom: 1px solid #dde1e3;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


/* 제품명 */
.roller-table tbody td.product {
    font-weight: 500;
    text-align: left;
    padding-left: 7px;
}


/* 숫자 긴 항목 */
.roller-table tbody td.num {
    text-align: right;
    padding-right: 7px;
}


/* 400 / 500 / 600 등의 병합셀 */
.roller-table .group-cell {
    background: #f7f9f8;
    font-weight: 500;
}


/* 높이 영역 */
.roller-table .height-cell {
    background: #f7f9f8;
    font-size: 11px;
    letter-spacing: -0.3px;
}


/* 그룹 구분선 */
.roller-table tbody tr.group-start td {
    border-top: 2px solid #cbd1d4;
}


/* 마지막 열 */
.roller-table th:last-child,
.roller-table td:last-child {
    border-right: 0;
}


/* 마우스 오버 */
@media (hover:hover) {

    .roller-table tbody tr:hover td:not([rowspan]) {
        background: #f6f8f9;
    }

}


/* 모바일 안내문 */
.roller-mobile-guide {
    display: none;
}


/* =========================================================
   태블릿 / 모바일
========================================================= */

@media screen and (max-width: 767px) {

    .roller-spec {
        max-width: 100%;
    }

    .roller-table-scroll {
        position: relative;
        overflow-x: auto;
        border-top-width: 2px;
    }

    /*
       모바일에서는 열을 억지로 줄이지 않고
       860px 표를 그대로 좌우 스크롤
    */
    .roller-table {
        width: 860px;
        min-width: 860px;
    }

    .roller-table thead th {
        padding: 7px 3px;
        font-size: 11px;
        line-height: 1.3;
    }

    .roller-table tbody td {
        height: 33px;
        padding: 5px 4px;
        font-size: 11px;
    }

    .roller-table tbody td.product {
        padding-left: 6px;
    }

    .roller-table .height-cell {
        font-size: 10px;
    }

    .roller-mobile-guide {
        display: block;
        margin-top: 8px;
        color: #888;
        font-size: 11px;
        text-align: right;
    }


    /* 모바일 스크롤바 */
    .roller-table-scroll::-webkit-scrollbar {
        height: 5px;
    }

    .roller-table-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .roller-table-scroll::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

}


/* 작은 모바일 */
@media screen and (max-width: 480px) {

    .roller-table {
        width: 820px;
        min-width: 820px;
    }

    .roller-table thead th {
        font-size: 10px;
    }

    .roller-table tbody td {
        font-size: 10.5px;
    }

}

/* =========================================================
   롤러 사양표 S TYPE
   PC 최대폭 860px
========================================================= */

.roller-s-spec {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
    color: #333;
    box-sizing: border-box;
}

.roller-s-spec *,
.roller-s-spec *::before,
.roller-s-spec *::after {
    box-sizing: border-box;
}


/* =========================================================
   스크롤 영역
========================================================= */

.roller-s-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 2px solid #364756;
    border-bottom: 1px solid #cfd5d9;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   TABLE
========================================================= */

.roller-s-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
}


/* 열 너비 */

.roller-s-table .c-product {
    width: 115px;
}

.roller-s-table .c-width {
    width: 105px;
}

.roller-s-table .c-name {
    width: 70px;
}

.roller-s-table .c-length {
    width: 125px;
}

.roller-s-table .c-roller {
    width: 70px;
}

.roller-s-table .c-weight {
    width: 75px;
}

.roller-s-table .c-w1 {
    width: 80px;
}

.roller-s-table .c-w2 {
    width: 80px;
}

.roller-s-table .c-height {
    width: 80px;
}


/* =========================================================
   HEADER
========================================================= */

.roller-s-table thead th {
    padding: 8px 4px;
    border-right: 1px solid #d1d7da;
    border-bottom: 1px solid #cbd2d6;
    background: #f1f4f3;
    color: #222;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
    white-space: nowrap;
}


/* 첫번째 헤더 줄 */

.roller-s-table thead tr:first-child th {
    background: #e9eeeb;
    font-weight: 600;
}


/* =========================================================
   BODY
========================================================= */

.roller-s-table tbody td {
    height: 38px;
    padding: 6px 5px;
    border-right: 1px solid #dde1e3;
    border-bottom: 1px solid #dde1e3;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


/* 제품명 */

.roller-s-table tbody td.product {
    padding-left: 7px;
    font-weight: 500;
    text-align: left;
}


/* 긴 숫자 */

.roller-s-table tbody td.num {
    padding-right: 8px;
    text-align: right;
}


/* 400 / 500 / 600 등 rowspan 영역 */

.roller-s-table .group-cell {
    background: #f7f9f8;
    font-weight: 500;
    vertical-align: middle;
}


/* 높이 H */

.roller-s-table .height-cell {
    background: #f7f9f8;
    font-weight: 500;
    vertical-align: middle;
}


/* =========================================================
   W2 오른쪽 선
   W2와 H 사이 세로선을 확실하게 표시
========================================================= */

.roller-s-table .w2-border {
    border-right: 1px solid #bfc8cd !important;
}


/* =========================================================
   400 / 500 / 600 그룹 구분
========================================================= */

.roller-s-table tbody tr.group-start td {
    border-top: 2px solid #c6ced2;
}


/*
   rowspan 때문에 그룹 시작선이 끊겨보이지 않도록
   병합셀 상단선도 조금 진하게 표시
*/

.roller-s-table tbody tr.group-start td:first-child {
    border-top: 2px solid #c6ced2;
}


/* 마지막 열 오른쪽 선 제거 */

.roller-s-table th:last-child,
.roller-s-table td:last-child {
    border-right: 0;
}


/* =========================================================
   마우스 오버
========================================================= */

@media (hover:hover) {

    .roller-s-table tbody tr:hover td:not([rowspan]) {
        background: #f6f8f9;
    }

}


/* 모바일 안내문 */

.roller-s-mobile-guide {
    display: none;
}


/* =========================================================
   태블릿 / 모바일
========================================================= */

@media screen and (max-width: 767px) {

    .roller-s-spec {
        width: 100%;
        max-width: 100%;
    }

    .roller-s-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }


    /*
       모바일에서는 표 자체 크기를 유지하면서
       좌우 스크롤
    */

    .roller-s-table {
        width: 820px;
        min-width: 820px;
    }


    .roller-s-table thead th {
        padding: 7px 4px;
        font-size: 11px;
    }


    .roller-s-table tbody td {
        height: 36px;
        padding: 5px 4px;
        font-size: 11px;
    }


    .roller-s-table tbody td.product {
        padding-left: 6px;
    }


    /* 스크롤 안내문 */

    .roller-s-mobile-guide {
        display: block;
        margin-top: 8px;
        color: #888;
        font-size: 11px;
        line-height: 1.4;
        text-align: right;
    }


    /* 스크롤바 */

    .roller-s-scroll::-webkit-scrollbar {
        height: 5px;
    }

    .roller-s-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .roller-s-scroll::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

}


/* =========================================================
   작은 모바일
========================================================= */

@media screen and (max-width: 480px) {

    .roller-s-table {
        width: 780px;
        min-width: 780px;
    }

    .roller-s-table thead th {
        font-size: 10.5px;
    }

    .roller-s-table tbody td {
        height: 35px;
        font-size: 10.5px;
    }

}