﻿/* 전체 컨테이너 */
.tab-container {
    width: 100%;
    margin: 20px auto;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* 버튼 영역 */
.tab-buttons {
    display: flex;
    gap: 12px; /* 버튼 사이 간격 */
    margin-bottom: 16px; /* 컨텐츠와의 간격 */
}

/* 버튼 */
.tab-btn {
    flex: 1;
    padding: 14px 0;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    cursor: pointer;
    font-size: 15px;
    border-radius: 6px; /* 개별 버튼 라운드 */
}

    /* 활성 버튼 */
    .tab-btn.active {
        background-color: #007bff;
        color: #ffffff;
        border-color: #007bff;
    }

    /* hover */
    .tab-btn:hover {
        background-color: #e9ecef;
    }

/* 컨텐츠 영역 */
.tab-content {
    width: 100%;
    border: 1px solid #ddd;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    justify-content: center; /* 가로 */
    align-items: center; /* 세로 */
    text-align: center;
}

/* 탭 패널 */
.tab-panel {
    display: none;
}

    .tab-panel.active {
        display: block;
    }


/* 샘플수거요청 */
.service-wrap {
}

.ser-tab {
    margin-bottom: 55px;
    font-size: 0;
}

    .ser-tab a {
        font-size: 18px;
        line-height: 60px;
        width: 625px;
        margin-right: 10px;
        letter-spacing: -0.05em;
        font-weight: 300;
        color: #333;
        background: #f2f2f2;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        transition: .3s;
        -webkit-transition: .3s;
        -o-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
    }

        .ser-tab a:hover {
            background: #00a0e9;
            color: #fff;
            font-weight: 500;
        }

        .ser-tab a.on {
            background: #00a0e9;
            color: #fff;
            font-weight: 500;
        }

        .ser-tab a:last-of-type {
            margin-right: 0;
        }

.ser06-01 {
}

    .ser06-01 .submit {
        margin-top: 60px;
        text-align: right;
        font-size: 0;
    }

        .ser06-01 .submit input[type="submit"] {
            width: 130px;
            height: 40px;
            font-size: 14px;
            line-height: 40px;
            letter-spacing: 0;
            font-weight: 400;
            color: #fff;
            background: #444;
            display: inline-block;
            vertical-align: top;
            box-sizing: border-box;
            text-align: center;
            border: 0;
            cursor: pointer;
        }

            .ser06-01 .submit input[type="submit"]:hover {
                background: #316cb8;
            }

.ser06-01-in {
    padding: 60px 0;
    font-size: 0;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.ser06-box {
    width: 245px;
    margin-right: 190px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

    .ser06-box:last-of-type {
        margin-right: 0;
    }

    .ser06-box > input[type="radio"] {
        display: none !important;
    }

    .ser06-box > label {
        padding: 0 !important;
    }

        .ser06-box > label:before {
            display: none !important;
        }

        .ser06-box > label:after {
            display: none !important;
        }

        .ser06-box > label i {
            width: 21px;
            height: 21px;
            margin: 0 auto;
            display: block;
            box-sizing: border-box;
            border: 0;
            background: url(../img/sub/ser06-radio-off.png) center center no-repeat;
            background-size: cover;
        }

    .ser06-box > input[type="radio"]:checked + label i {
        background: url(../img/sub/ser06-radio-on.png) center center no-repeat;
        background-size: cover;
    }

.phone {
    margin-bottom: 20px;
    padding: 30px 8px;
    border-radius: 20px;
    background: #ccc;
    box-sizing: border-box;
}

.phone-in {
    padding: 25px 15px 0;
    height: 365px;
    text-align: center;
    background: #fff;
    box-sizing: border-box;
}

    .phone-in > span#img {
        display: block;
        text-align: center;
    }

        .phone-in > span#img img {
            margin: 0 auto;
            width: 35px;
            height: 43px;
            display: block;
        }

            .phone-in > span#img img.on {
                display: none;
            }

    .phone-in > p {
        margin-top: 15px;
        font-size: 30px;
        line-height: 1;
        letter-spacing: 0;
        font-weight: 500;
        color: #777;
    }

    .phone-in .phone-box {
        padding: 55px 0;
        box-sizing: border-box;
    }

        .phone-in .phone-box.ptb20 {
            padding: 20px 0;
        }

        .phone-in .phone-box > span {
            font-size: 16px;
            line-height: 1;
            letter-spacing: -0.05em;
            font-weight: 400;
            color: #777;
            display: block;
        }

            .phone-in .phone-box > span.mt10 {
                margin-top: 10px;
            }

            .phone-in .phone-box > span.mt5 {
                margin-top: 5px;
            }

        .phone-in .phone-box > input[type="text"] {
            z-index: -1;
            margin: 2px 0 5px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 31px;
            width: 100%;
            height: 33px;
            letter-spacing: -0.05em;
            font-weight: 300;
            color: #777;
            box-sizing: border-box;
            border: 1px solid #ccc;
            background: #fff;
            display: block;
            position: relative;
        }

        .phone-in .phone-box .p-sel {
            margin-top: 7px;
            font-size: 0;
        }

            .phone-in .phone-box .p-sel select {
                padding: 0 25px 0 10px;
                font-size: 14px;
                line-height: 31px;
                width: 115px;
                height: 33px;
                letter-spacing: -0.05em;
                font-weight: 300;
                color: #777;
                box-sizing: border-box;
                border: 1px solid #ccc;
                background: #fff url(../img/sub/ser06-select-arrow.png) top 13px right 16px no-repeat;
                display: inline-block;
                vertical-align: top;
                cursor: pointer;
            }

            .phone-in .phone-box .p-sel select {
                border-radius: 0;
                /* 아이폰 사파리 보더 없애기 */
                -webkit-appearance: none;
                /* 화살표 없애기 for chrome*/
                -moz-appearance: none;
                /* 화살표 없애기 for firefox*/
                appearance: none /* 화살표 없애기 공통*/
            }

                .phone-in .phone-box .p-sel select::-ms-expand {
                    display: none /* 화살표 없애기 for IE10, 11*/
                }

            .phone-in .phone-box .p-sel input[type="number"] {
                margin-left: 4px;
                font-size: 14px;
                line-height: 31px;
                width: 80px;
                height: 33px;
                letter-spacing: -0.05em;
                font-weight: 300;
                color: #777;
                box-sizing: border-box;
                text-align: center;
                display: inline-block;
                vertical-align: top;
                border: 1px solid #ccc;
                background: #fff;
            }

                .phone-in .phone-box .p-sel input[type="number"]::-webkit-outer-spin-button, .phone-in .phone-box .p-sel input[type="number"]::-webkit-inner-spin-button {
                    appearance: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    -o-appearance: none;
                    -ms-appearance: none;
                }

    .phone-in .phone-number {
        padding: 20px 10px 0;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
        text-align: left;
    }

        .phone-in .phone-number span {
            font-size: 16px;
            line-height: 25px;
            letter-spacing: -0.05em;
            font-weight: 300;
            color: #777;
            display: block;
        }

.phone.on {
    background: #316cb8;
}

    .phone.on .phone-in > span#img img.off {
        display: none;
    }

    .phone.on .phone-in > span#img img.on {
        display: block;
    }

    .phone.on .phone-in > p {
        color: #326cb8;
    }

    .phone.on .phone-in .phone-box > span {
        color: #326cb8;
    }

    .phone.on .phone-in .phone-number {
        border-top: 1px solid #98b5db;
    }

        .phone.on .phone-in .phone-number span {
            color: #326cb8;
        }

    .phone.on .phone-in .phone-box .p-sel select {
        border: 1px solid #336db8;
        color: #336db8;
        background: #fff url(../img/sub/ser06-select-arrow-on.png) top 13px right 16px no-repeat;
    }

    .phone.on .phone-in .phone-box .p-sel input[type="number"] {
        border: 1px solid #336db8;
        color: #336db8;
    }

    .phone.on .phone-in .phone-box > input[type="text"] {
        border: 1px solid #336db8;
        color: #336db8;
    }

/* 샘플수거요청 */