@charset "utf-8";

/* S : 텍스트 정렬 ----------------------------------------------- */
    .align-left { text-align: left; }
    .align-right { text-align: right; }
    .align-center { text-align: center; }
/* E : 텍스트 정렬 ----------------------------------------------- */


/* S : breadcrumb ----------------------------------------------- */
    .breadcrumb > ul {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .breadcrumb > ul > li {
        display: flex;
        align-items: center;
        color: var(--sub-txt);
        font-size: 0.89em;
    }
    .breadcrumb > ul > li:first-child span {
        color: var(--main);
    }
    .breadcrumb > ul > li span {
        color: var(--border20);
        font-weight: 300;
    }
    .breadcrumb > ul > li:nth-child(even){
        position: relative;
        color: var(--gray30);
        font-weight: 200;
    }
/* E : breadcrumb ----------------------------------------------- */



/* S : tab ----------------------------------------------- */
    .tab-wrap {
        display: inline-flex;
    }

    .tab-wrap ul{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab-wrap ul > li.tab-list > a {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ----- S : tab solid ----- */
    .tab-wrap.solid{
        width: 100%;
    }
    .tab-wrap.solid ul > li.tab-list {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 53px;
        padding: 15px 0px;
        color: var(--sub-txt);
        background: var(--white);
        border: 1px solid var(--border20);
        border-left: 0;
        border-right: 0;
    }

    .tab-wrap.solid ul > li.tab-list:first-child {border-left: 1px solid var(--border20);}
    .tab-wrap.solid ul > li.tab-list:last-child {border-right: 1px solid var(--border20);}

    .tab-wrap.solid ul > li.tab-list > a {border-right: 1px solid var(--border20);}
    .tab-wrap.solid ul > li.tab-list:last-child > a {border-right: 0;}

    .tab-wrap.solid ul > li.tab-list.on {
        padding-top: 18px;
        color: var(--white);
        background: var(--main);
        border: 1px solid var(--main);
        border-bottom: 4px solid var(--point50);
    }
    .tab-wrap.solid ul > li.tab-list.on > a{
        border-right: 1px solid var(--main);
        font-weight: 600;
    }

    .tab-wrap.solid ul > li.tab-list:not(.on):hover {
        background-color: var(--white);
        border: 1px solid var(--main);
        box-shadow: 0 0 0 2px inset var(--main);
    }
    .tab-wrap.solid ul > li.tab-list:not(.on):hover > a {
        color: var(--main);
        border-right: 1px solid var(--main);
    }
    /* ----- E : tab solid ----- */


    /* ----- S : tab line ----- */
    .tab-wrap.line {
        justify-content: flex-start;
    }
    .tab-wrap.line ul {
        column-gap: 20px;
        overflow: hidden;
    }
    .tab-wrap.line ul > li.tab-list > a {
        padding: 10px 5px;
        color: var(--sub-txt);
        border-bottom: 3px solid var(--white);
    }
    .tab-wrap.line ul > li.tab-list.on > a {
        border-bottom: 3px solid var(--gray80);
        color: var(--txt);
        font-weight: 700;
    }
    .tab-wrap.line ul > li.tab-list:hover > a {
        color: var(--txt);
        border-bottom: 3px solid var(--gray80);
    }
    /* ----- E : tab line ----- */
/* E : tab ----------------------------------------------- */



/* S : input, textarea, select ----------------------------------------------- */
    input, textarea {
        width: 100%;
        padding: 12px;
        color: var(--txt);
        border: 1px solid var(--border20);
        border-radius: var(--rounded-s);
        font-family: "Pretendard", sans-serif;
    }
    input::placeholder, textarea::placeholder {
        color: var(--input-txt);
        font-weight: 400;
        font-size: 1em;
    }
    input:focus, textarea:focus, select:focus {
        border: 1px solid var(--border20) !important;
        transition: all 250ms ease;
        box-shadow: 4px 4px 4px rgb(0 0 0 / 5%);
    }
    input:disabled{
        color: var(--sub-txt);
        background: var(--gray20);
        border: 1px solid var(--gray30);
    }

    /* S : checkbox, radio, toggle */
        .checkbox > input + label,
        .radio > input + label {
            position: relative;
            padding-left: 25px;
            line-height: 1.3;
        }
        .checkbox > input,
        .radio > input {
            display: none;
        }
        .checkbox > input + label::before,
        .radio > input + label::before {
            content: "";
            position: absolute;
            top: 2px;
            left: 0;
            display: inline-block;
            cursor: pointer;
        }

        .checkbox > input + label::before {
            width: 17px;
            height: 17px;
            margin-top: 1px;
            background: var(--white);
            border: 1px solid var(--border30);
            border-radius: var(--rounded-s);
        }
        .checkbox input:checked + label:before {
            margin-top: 0;
            border: 0;
            width: 20px;
            height: 20px;
            background: url('../img/common/checkbox_on.svg');
        }
        .checkbox input:disabled + label::before,
        .radio input:disabled + label::before {
            background: var(--gray10);
        }
        .checkbox input:disabled:checked + label::before {
            margin-top: 1px;
            background: url('../img/common/checkbox_disabled_on.svg') no-repeat;
        }

        .radio > input + label::before {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            border: 1px solid var(--border30);
            border-radius: var(--rounded-circle);
            background: var(--white);
        }
        .radio input:checked + label:before {
            margin-top: 0;
            border: 0;
            width: 20px;
            height: 20px;
            background: url('../img/common/radio_on.svg');
        }
        .radio input:disabled:checked + label::before {
            margin-top: 1px;
            background: url('../img/common/radio_disabled_on.svg') no-repeat;
        }

        .checkbox input:disabled + label,
        .radio input:disabled + label {
            color: var(--input-txt);
        }

        .toggleSwitch {
            width: 46px;
            height: 24px;
            display: block;
            position: relative;
            border-radius: 12px;
            background-color: var(--gray10);
            border: 1px solid var(--border20);
            cursor: pointer;
        }
        .toggleSwitch .toggleButton {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 50%;
            right: 2px;
            transform: translateY(-50%);
            border-radius: 50%;
            background: var(--border20);
        }
        .toggle input:checked ~ .toggleSwitch {
            border: none;
            background: var(--main);
        }
        .toggle input:checked ~ .toggleSwitch .toggleButton {
            right: calc(100% - 21px);
            background: #fff;
        }
        .toggleSwitch, .toggleButton {
            transition: all 0.2s ease-in;
        }
    /* E : checkbox, radio, toggle */

    textarea {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid var(--border20);
        font-family: "Pretendard", sans-serif;
    }

    /* E : select */
        select {
            min-width: 130px;
            padding: 0 35px 0 12px;
            border-radius: var(--rounded-s);
            border: 1px solid var(--border20);
            background: var(--white) url('/img/common/expand_more.svg') right 8px center no-repeat;
            font-family: "Pretendard", sans-serif;
            color: var(--txt);
            -webkit-appearance:none; /* for chrome */
            -moz-appearance:none; /*for firefox*/
            appearance:none;
        }
        select::-ms-expand {
            display: none;
        }
        select:disabled{
            color: var(--sub-txt);
            background: var(--gray20) url('/img/common/expand_more.svg') right 8px center no-repeat;
            border: 1px solid var(--border20);
        }
        .content select.line {
            background-color: transparent;
            border: 0;
            border-radius: 0;
            border-bottom: 2px solid var(--gray70);
        }
    /* E : select */


    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="date"]::-webkit-inner-spin-button {
        display: none;
        appearance: none;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 1;
        display: block;
        background: url('/img/common/calendar.svg') no-repeat 98% 50%;
        width: 30px;
        height: 25px;
        border-width: thin;
    }


    /* S : 읽기모드 */
        input.read,
        select.read,
        textarea.read {
            padding-left: 0;
            padding-right: 0;
            color: var(--txt);
            background: var(--white);
            border: 0;
            pointer-events: none;
        }
        input.read,
        select.read {
            width: auto;
            padding-left: 0;
            padding-right: 0;
            color: var(--txt);
            background: var(--white);
            border: 0;
            pointer-events: none;
        }

        .checkbox.read > input + label::before,
        .radio.read > input + label::before {
            display: none;
            color: var(--txt);
        }
        .checkbox.read > input + label,
        .radio.read > input + label {
            padding-left: 0;
        }
    /* E : 읽기모드 */
/* E : input, textarea, select ----------------------------------------------- */



/* S : input, search-list ----------------------------------------------- */
    .input-container .row,
    .search-list .row {
        display: flex;
        margin-bottom: 10px;
        column-gap: 10px;
    }
    .input-container .row:last-child,
    .search-list .row:last-child {
        margin-bottom: 0;
    }
    .input-container .row .form-wrap,
    .search-list .row .form-wrap {
        display: flex;
        align-items: flex-start;
        column-gap: 10px;
        width: 100%;
    }
    .input-container .row .form-wrap.top {
        align-items: flex-start;
    }
    .input-container .row .form-wrap > label,
    .search-list .row .form-wrap > label {
        min-width: 120px;
        font-weight: 600;
        line-height: 44px;
    }
    label > span.required {
        margin-left: 3px;
        color: var(--able);
        font-weight: 600;
    }
    .input-container .row .form-wrap:nth-child(2) > label,
    .search-list .row .form-wrap:nth-child(2) > label {
        text-align: center;
    }
    .input-container .row .form-wrap > label + div,
    .search-list .row .form-wrap > label + div {
        display: flex;
        align-items: center;
        flex-grow: 1;
        column-gap: 5px;
    }
    .input-container .row .form-wrap .radio-wrap,
    .input-container .row .form-wrap .checkbox-wrap,
    .search-list .row .form-wrap .radio-wrap,
    .search-list .row .form-wrap .checkbox-wrap {
        flex-wrap: wrap;
        column-gap: 20px;
    }
    .input-container .row .form-wrap > label + div  select,
    .input-container .row .form-wrap > label + div  input,
    .input-container .row .form-wrap > label + div  textarea,
    .search-list .row .form-wrap > label + div  select,
    .search-list .row .form-wrap > label + div  input {
        width: 100%;
    }

    @media (max-width: 639px) {
        .input-container .row,
        .search-list .row {
            margin-bottom: 24px;
        }
        .input-container .row .form-wrap,
        .search-list .row .form-wrap {
            flex-direction: column;
        }
        .input-container .row .form-wrap > label,
        .search-list .row .form-wrap > label {
            line-height: 36px;
        }
        .input-container .row .form-wrap > label + div,
        .search-list .row .form-wrap > label + div {
            width: 100%;
        }
    }
/* E : input, select ----------------------------------------------- */



/* S : search-wrap ----------------------------------------------- */
    .search-wrap {
        display: flex;
        align-items: end;
        justify-content: center;
        column-gap: 15px;
        padding: 30px 40px;
        background-color: var(--gray5);
        border: solid var(--border20);
        border-width: 1px 0;
    }

    .search-wrap article:last-child{
        margin-bottom: 0;
    }
    .search-wrap input {
        background-color: transparent;
        border: 0;
        border-radius: 3px 3px 0 0;
        border-bottom: 2px solid var(--border40);
    }

    @media screen and (max-width: 1439px) {
        .search-wrap {
            flex-direction: column;
            align-items: center;
            row-gap: 20px;
        }
    }

    @media screen and (max-width: 767px) {
        .search-wrap {
            padding: 24px 30px;
        }
    }
/* E : search-wrap ----------------------------------------------- */



/* S : list ----------------------------------------------- */
    .content .con-wrap h4::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
        margin-right: 10px;
        background: url(/img/common/ico_circle.svg) no-repeat;
    }
    .content .con-wrap h4 {
        width: 100%;
        padding-left: 28px;
        margin-bottom: 20px;
        line-height: 140%;
        font-size: 1.17em;
        font-weight: 700;
        text-indent: -30px;
    }
    .content .con-wrap .tit-wrap h4 {
        margin-bottom: 4px;
    }
    .content .con-wrap .tit-wrap p.des {
        padding-left: 28px;
    }
/* E : list ----------------------------------------------- */




/* S : table ----------------------------------------------- */
    /* ----- S : table-top ----- */
        .table-container .table-wrap .table-top {
            display: flex;
            align-items: end;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 15px;
        }

        .table-container .table-wrap .table-top select:last-child {
            margin-right: 0;
        }
        .table-container .table-wrap .table-top .left-wrap p > .bold{
            color: var(--main);
            font-weight: 600;
        }
        .table-container .table-wrap .table-top .left-wrap,
        .table-container .table-wrap .table-top .right-wrap {
            display: flex;
            align-items: center;
            column-gap: 10px;
        }

        @media screen and (max-width: 767px) {
            .table-container .table-wrap .table-top {
                flex-direction: column;
                align-items: flex-start;
                row-gap: 10px;
            }
        }
    /* ----- E : table-top ----- */


    /* ----- S : table ----- */
        .table-container .table-wrap table {
            width: 100%;
            border-top: 2px solid var(--border40);
            table-layout: fixed;
        }

        .table-container .table-wrap table tr {
            border-bottom: 1px solid var(--border30);
        }

        .table-container .table-wrap table tr th{
            background: var(--gray10);
            font-weight: 600;
        }
        .table-container .table-wrap table tr th label{
            display: inline-block;
            height: 41px;
            line-height: 41px;
        }
        .table-container .table-wrap table tr th .checkbox label{
            display: block;
            height: unset;
            line-height: unset;
        }
        .table-container .table-wrap .vert table th{
            padding: 10px 15px;
            vertical-align: middle;
            text-align: left;
        }
        .table-container .table-wrap table tr th,
        .table-container .table-wrap table tr td {
            padding: 10px 12px;
            border-right: 1px solid var(--border30);
        }
        .table-container .table-wrap table tr th:last-child,
        .table-container .table-wrap table tr td:last-child {
            border-right: 0;
        }
        .table-container .table-wrap table tr th.font-sm {
            font-size: 16px;
        }
        .table-container .table-wrap table tr th.font-xs > label {
            height: auto;
            line-height: 1.25;
        }
        .table-container .table-wrap table tr th.font-xs .sub-txt {
            display: block;
            font-size: 12px;
            line-height: 1.25;
        }
        .table-container .table-wrap table tr td > div {
            display: flex;
            align-items: center;
            column-gap: 10px;
        }
        .table-container .table-wrap table tr td > div.time-wrap {
            column-gap: 3px;
        }
    /* ----- E : table ----- */


    /* ----- S : table 정렬 ----- */
        .table-container .table-wrap table tr th.left,
        .table-container .table-wrap table tr td.left {
            text-align: left;
        }
        .table-container .table-wrap table tr th.right,
        .table-container .table-wrap table tr td.right {
            text-align: right;
        }
        .table-container .table-wrap table tr th.cen,
        .table-container .table-wrap table tr td.cen {
            text-align: center;
        }
    /* ----- E : table 정렬 ----- */


    /* ----- S : table 텍스트 색변경 ----- */
        .table-container .table-wrap table tr td.txt-red {
            color: var(--del);
        }
    /* ----- E : table 텍스트 색변경 ----- */


    /* ----- S : table 데이터 없음 ----- */
        .table-container .table-wrap table tr td.no-data {
            padding: 50px 15px !important;
        }
    /* ----- E : table 데이터 없음 ----- */


    /* ----- S : table 가로스크롤 ----- */
        .table-container .table-wrap .overflow-table {
            overflow-x: auto;
        }
        .table-container .table-wrap .overflow-table::-webkit-scrollbar {
            height: 8px;
        }
        .table-container .table-wrap .overflow-table::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            transition: all 0.25s;
        }
        .table-container .table-wrap .overflow-table::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.08);
            border-radius: 4px;
        }
        .table-container .table-wrap .overflow-table::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.25s;
        }
    /* ----- E : table 가로스크롤 ----- */


    /* ----- S : table text-overflow ----- */
        .table-container .table-wrap table tr td .text-overflow {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .table-container .table-wrap table tr td .text-overflow-line {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    /* ----- S : table text-overflow ----- */


    /* ----- S : table tr 선택 / hover ----- */
        .table-container .table-wrap table tr.selected {
            background: var(--tint20);
        }
        .table-container .table-wrap table.hover-table tr:hover {
            background: var(--tint20);
        }
    /* ----- E : table tr 선택 / hover ----- */


    /* ----- S : table 선택 checkbox / radio ----- */
        .table-container .table-wrap table .checkbox.no-label,
        .table-container .table-wrap table .radio.no-label {
            display: block !important;
        }
        .table-container .table-wrap table .checkbox.no-label > input + label,
        .table-container .table-wrap table .radio.no-label > input + label {
            display: inline;
        }
        .table-container .table-wrap table .checkbox.no-label > input + label::before,
        .table-container .table-wrap table .radio.no-label > input + label::before {
            left: 50%;
            transform: translateX(-50%);
        }
    /* ----- S : table 선택 checkbox / radio ----- */
/* E : table ----------------------------------------------- */



/* S : table (input-area / 작성) ----------------------------------------------- */
    .table-container .table-wrap .input-area table th{
        vertical-align: top;
    }
    .table-container .table-wrap .input-area table .w100 {
        width: 100%;
    }
/* E : table (input-area / 작성) ----------------------------------------------- */



/* S : table (read-area / 읽기) ----------------------------------------------- */
    .table-container .read-area span.required {
        display:none;
    }
    
    .table-container .table-wrap .read-area table th{
        line-height: 38px;
        vertical-align: top;
    }
    
    .table-container .table-wrap .read-area > table input,
    .table-container .table-wrap .read-area > table select {
        width: -webkit-fill-available;
        min-width: auto;
        padding-left: 0;
        padding-right: 0;
        color: var(--txt);
        background: var(--white);
        border: 0;
        pointer-events: none;
    }

    .table-container .table-wrap .read-area > table pre {
        padding: 7px 0;
        line-height: 1.5;
    }

    .table-container .table-wrap .read-area > table input[type="date"] {
        width: 108px;
    }

    .table-container .table-wrap .read-area > table input[type="date"]::-webkit-inner-spin-button,
    .table-container .table-wrap .read-area > table input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    .table-container .table-wrap .read-area > table .checkbox > input + label::before,
    .table-container .table-wrap .read-area > table .radio > input + label::before {
        display: none;
        color: var(--txt);
    }

    .table-container .table-wrap .read-area > table .checkbox > input + label,
    .table-container .table-wrap .read-area > table .radio > input + label {
        padding-left: 0;
    }


    /* ----- S : line 필요 시 ----- */
        .a-line::after {
            content: "";
            display: inline-block;
            width: 1px;
            height: 17px;
            position: relative;
            top: 2px;
            margin-left: 7px;
            background: var(--border20);
        }
    /* ----- E : line 필요 시 ----- */

    @media screen and (max-width: 1023px) {
        .table-container .table-wrap [class*='-area']:not(.vert) {
            overflow-x: auto;
        }
        .table-container .table-wrap [class*='-area']:not(.vert) table {
            min-width: 960px;
            table-layout: fixed;
        }
        .table-container .table-wrap .read-area.vert table colgroup {
            display: none;
        }
        .table-container .table-wrap .read-area.vert table tr {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 0;
        }
        .table-container .table-wrap .read-area.vert table tr th {
            width: 180px;
            border-bottom: 1px solid var(--border30);
        }
        .table-container .table-wrap .read-area table tr th > label {
            height: auto;
            line-height: 1.4;
        }
        .table-container .table-wrap .read-area.vert table tr td {
            width: calc(100% - 180px);
            border: 0;
            border-bottom: 1px solid var(--border30);
        }
    }

    @media screen and (max-width: 639px) {
        .table-container .table-wrap .read-area.vert table tr th {
            width: 110px;
        }
        .table-container .table-wrap .read-area.vert table tr td {
            width: calc(100% - 110px);
        }
    }
/* E : table (read-area / 읽기) ----------------------------------------------- */



/* S : table (table-area / 조회) ----------------------------------------------- */
    .table-container .table-wrap .table-area > table {
        width: 100%;
        font-size: 0.89em;
        text-align: center;
    }
    .table-container .table-wrap .table-area > table th{
        vertical-align: top;
        font-weight: 600;
    }
/* E : table (table-area / 조회) ----------------------------------------------- */



/* S : table (tint-area / 특정) ----------------------------------------------- */
    .table-container .table-wrap .tint-area > table th{
        font-weight: 600;
        background: var(--tint20);
    }
/* E : table (tint-area / 특정) ----------------------------------------------- */



/* S : pagination ----------------------------------------------- */
    .pagination {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 40px
    }

    .pagination li a {
        display: inline-block;
        min-width: 30px;
        height: 30px;
        margin: 0px 2px;
        color: var(--gray40);
        background: var(--white);
        border-radius: var(--rounded-circle);
        border: 1px solid var(--white);
        line-height: 30px;
        text-align: center;
    }
    .pagination li a.arrow{
        display: inline-block;
        background: var(--white);
        margin: 0px 30px;
        border: 1px solid var(--border20);
        border-radius: var(--rounded-s);
        font-size: 0.7em;
    }

    .pagination li a:hover {
        border-color: var(--main);
        color: var(--main);
    }

    .pagination li a.active {
        background: var(--main) !important;
        color: var(--white) !important;
        border-color: var(--main)
    }
/* E : pagination ----------------------------------------------- */



/* S : button ----------------------------------------------- */
    .btn-wrap {
        display: flex;
        column-gap: 10px;
        width: fit-content;
    }
    .btn-wrap.vert {
        flex-direction: column;
        row-gap: 5px;
    }
    .btn-wrap.cen {
        margin: 0 auto;
    }
    .btn {
        display: inline-block;
        padding: 0 20px;
        border-radius: var(--rounded-s);
        font-family: "Pretendard", sans-serif;
        text-align: center;
        font-size: 1em;
        font-weight: 600;
        white-space: nowrap;
        -webkit-transition: all 250ms ease;
        -moz-transition: all 250ms ease;
        -o-transition: all 250ms ease;
        -ms-transition: all 250ms ease;
        transition: all 250ms ease;
    }

    .btn.type01 {
        color: var(--white);
        background: var(--main);
        border: 1px solid var(--main);
    }
    .btn.type01:hover {
        background: var(--point30);
        border: 1px solid var(--point30);
    }

    .btn.type02 {
        color: var(--main);
        background: var(--gray10);
        border: 1px solid var(--border20);
    }
    .btn.type02:hover {
        color: var(--point30);
        background: var(--tint20);
    }

    .btn.ghost {
        color: var(--main);
        background: var(--white);
        border: 1px solid var(--main);
    }
    .btn.ghost:hover {
        background: var(--tint20);
    }

    .btn.line {
        color: var(--sub-txt);
        background: var(--white);
        border: 1px solid var(--border30);
    }
    .btn.line:hover {
        color: var(--txt);
        background: var(--gray5);
        border: 1px solid var(--border40);
    }

    .btn.line02 {
        color: var(--main);
        background: var(--white);
        border: 1px solid var(--border20);
    }
    .btn.line02:hover {
        background: var(--tint20);
        border: 1px solid var(--main);
    }

    .btn.before {
        color: var(--sub-txt);
        background: var(--gray10);
        border: 1px solid var(--gray10);
    }
    .btn.before:hover {
        color: var(--txt);
        background: var(--white);
        border: 1px solid var(--main);
    }
    .btn.before:active {
        color: var(--main);
        background: var(--tint20);
        border: 1px solid var(--main);
    }

    .btn.disabled {
        color: var(--input-txt);
        background: var(--gray20);
        border: 1px solid var(--border20);
        cursor: default;
        pointer-events: none;
    }

    .btn.stop {
        color: var(--txt);
        background: var(--yellow);
        border: 1px solid var(--yellow);
        opacity: 1;
    }
    .btn.stop:hover {
        opacity: 0.8;
    }

    .btn.able {
        color: var(--main);
        background: var(--tint30);
        border: 1px solid var(--main);
    }
    .btn.able:hover {
        background: var(--tint20);
    }

    .btn.del {
        color: var(--del);
        background: var(--white);
        border: 1px solid var(--del);
    }
    .btn.del:hover {
        background: var(--del-bg);
    }

    .btn.text {
        color: var(--txt);
        border: 1px solid transparent;
        text-decoration: underline;
        font-weight: 500;
    }
    .btn.text:hover {
        color: var(--main);
        border: 1px solid transparent;
    }
/* E : button ----------------------------------------------- */



/* S : size -----------------------------------------------*/
    .size-s {
        height: 32px;
        line-height: 30px;
        font-size: 0.89em;
    }

    .size-m {
        height: 41px;
        line-height: 39px;
        font-size: 1em;
    }

    .size-l {
        height: 44px;
        line-height: 42px;
        font-size: 1em;
    }
/* E : size -----------------------------------------------*/

/* S : block,inline -----------------------------------------------*/
    .block {display: block;}
    @media screen and (max-width: 767px) {
        .block {display: inline;}
    }
/* E : block,inline -----------------------------------------------*/



/* S : Popup */
    .popup-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 10001;
    }

    .popup-container:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
    }

    .popup-container .popup {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 30px);
        max-height: 90vh;
        padding: 25px 30px 30px 30px;
        border-radius: 6px;
        background: var(--white);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
    }

    .popup-container .popup.width540 { max-width: 540px; }
    .popup-container .popup.width720 { max-width: 720px; }
    .popup-container .popup.width960 { max-width: 960px; }
    .popup-container .popup.width1140 { max-width: 1140px; }
    .popup-container .popup.width1320 { max-width: 1320px; }

    .popup-container .popup .pop-close {
        position: absolute;
        top: 25px;
        right: 30px;
    }

    .popup-container .popup h6 {
        margin-bottom: 24px;
        padding: 0 25px;
        text-align: center;
        font-size: 21px;
        font-weight: 600;
        line-height: 1.4;
    }

    .popup-container .popup .popup-con-wrap .sub-tit {
        margin-left: 28px;
        padding: 5px;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.4;
        text-indent: -30px;
    }

    .popup-container .popup .popup-con-wrap .sub-tit::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
        margin-right: 8px;
        background: url('/img/common/ico_circle.svg') no-repeat;
    }

    .popup-container .popup .popup-con-wrap .con {
        margin-top: 5px;
        margin-left: 28px;
        padding: 5px;
        line-height: 1.4;
        text-indent: -30px;
    }

    .popup-container .popup .popup-con-wrap .con::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 4px;
        margin-right: 8px;
        background: url('/img/common/ico_arrow_m.svg') no-repeat;
    }

    .popup-container .popup .btn-wrap {
        display: flex;
        justify-content: center;
        column-gap: 10px;
        width: 100%;
        margin-top: 30px;
    }

    .popup-container .popup .btn-wrap .btn {
        min-width: 100px;
    }

    /* S : 메세지 팝업 */

        .popup-container.message-popup .popup {
            max-width: 350px;
        }

        .popup-container.message-popup .popup .tit {
            text-align: center;
            font-weight: 600;
            line-height: 1.4;
        }

        .popup-container.message-popup .popup .tit::before {
            content: "";
            display: block;
            width: 48px;
            height: 48px;
            margin: 0 auto 8px auto;
            background: url('/img/common/ico_popup_info.svg') center center no-repeat;
        }

        .popup-container.message-popup .popup .sub-txt {
            margin-top: 8px;
            text-align: center;
            color: (--sub-txt);
            font-size: 16px;
            line-height: 1.4;
        }
    /* E : 메세지 팝업 */
/* E : Popup */



/* S : datepicker */
    .datepicker input[type="text"] {
        padding: 0 10px;
        background: #fff url('/img/common/ico_calendar.svg') center right 8px no-repeat;
        cursor: pointer;
        color: #333;
    }

    .ui-widget.ui-widget-content {
        padding: 8px 10px 5px 10px;
        border: 0;
        border-radius: var(--rounded-m);
        box-shadow: 0 10px 15px rgb(0 0 0 / 15%);
        font-family: "Pretendard", sans-serif;
        font-size: 14px;
    }

    .ui-widget-header {
        margin-bottom: 4px;
        background: var(--white);
        border: 0;
    }

    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
        width: 12px;
        height: 12px;
        margin: 0;
        background: url('/img/common/chevron_right.svg') center center no-repeat;
        transform: translate(-50%, -50%);
        opacity: 0.5;
    }

    .ui-datepicker .ui-datepicker-prev  {
        transform: rotate(180deg);
    }

    .ui-datepicker table {
        border: 0;
    }

    .ui-datepicker table tr {
        border: 0;
    }

    .ui-datepicker table tr th {
        padding: 7px 0;
        background: var(--white);
    }

    .ui-widget-content .ui-state-default {
        padding: 6px 2px;
        border: 0;
        border-radius: 50%;
        background: var(--white);
        text-align: center;
        transition: all 0.25s ease;
    }

    .ui-widget-content .ui-state-default:hover {
        background: var(--gray20);
        color: var(--main);
    }

    .ui-widget-content .ui-state-default.ui-state-active {
        background: var(--main);
        color: var(--white);
        font-weight: 700;
        box-shadow: 0px 4px 10px rgba(100, 156, 235, 0.15);
    }
/* E : datepicker */



/* S : 온라인강의 동영상 콘텐츠 팝업 */

    #wrap .section .online-popup .content {
        width: 100%;
        background: var(--white);
    }

    .online-popup .content .con-wrap h4 {
        font-weight: 600;
    }

    .online-popup .con-wrap .gray-box {
        padding: 30px 40px;
        background: var(--gray5);
        line-height: 1.4;
        border-radius: var(--rounded-s);
    }


    /* S : 플레이어 */

        .online-popup .player-container {
            width: 100%;
            height: 550px;
            margin-top: 20px;
            overflow: hidden;
        }

        .online-popup .video-box .video {
            aspect-ratio: 16 / 9;
            background: var(--gray80);
        }

        .online-popup .player-container .video-box .control-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 15px 30px;
            background-color: var(--gray60);
        }


        .online-popup .player-container .video-box .control-bar {
            width: calc(100% - 140px);
            height: 10px;
            border-radius: var(--rounded-m);
            background-color: var(--gray20);
        }

        .online-popup .player-container .video-box .play-bar {
            width: 10%;
            height: 10px;
            border-radius: var(--rounded-m);
            background-color: var(--able);
        }

        .online-popup .player-container .video-box .time-wrap {
            width: max-content;
            text-align: center;
            color: var(--gray20);
        }

        @media (max-width: 1259px) {
            .online-popup .player-container .video-box {
                width: 100%;
            }
        }

    /* E : 플레이어 */

    .online-popup .con-list {
        border-top: 1px solid var(--border20);
    }

    .online-popup .con-list li {
        display: flex;
        align-items: center;
        column-gap: 40px;
        padding: 15px;
        border-bottom: 1px solid var(--border20);
    }
    .online-popup .con-list li.done {
        background-color: var(--gray10);
    }
    .online-popup .con-list li.play {
        background-color: var(--tint30);
    }

    .online-popup .con-list li .num {
        display: flex;
        align-items: center;
        column-gap: 10px;
        font-weight: 600;
        line-height: 1.4;
    }

    .online-popup .con-list li .num::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url('/img/common/ico_play.svg') center center no-repeat;
        background-size: contain;
    }

    .online-popup .con-list li .tit {
        flex: 1 0 0;
        line-height: 1.4;
    }

    .online-popup .con-list li .time {
        color: var(--sub-txt);
        line-height: 32px;
    }

    @media screen and (max-width: 767px) {
        .online-popup .con-list li {
            flex-wrap: wrap;
            column-gap: 20px;
            row-gap: 12px;
        }
        .online-popup .con-list li .num {
            width: 100%;
        }
        .online-popup .con-list li .tit {
            flex: auto;
            width: 100%;
            min-height: auto;
        }
    }

/* E : 온라인강의 동영상 콘텐츠 팝업 */



/* ----- S : 이수증설정 ----- */
    .certificate-wrap {
        display: flex;
    }
    .certificate-wrap .certificate-area {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 770px;
        padding: 30px 0;
        background: var(--gray30);
        border-top: 2px solid var(--border40);
        border-right: 1px solid var(--border30);
        border-bottom: 1px solid var(--border30);
    }
    .certificate-wrap .input-area {
        width: calc(100% - 770px);
    }
    .certificate-wrap .certificate-area .preview-box {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
        align-items: center;
        justify-content: center;
        width: 500px;
        height: 354px;
        padding: 50px;
        font-family: "Noto Serif KR", serif;
        background: var(--white);
    }

    .certificate-wrap .certificate-area .preview-box.bksk {
        background: var(--white) url('/img/common/certificate/bg_bksk.svg') no-repeat center center/cover;
    }
    .certificate-wrap .certificate-area .preview-box.bwc {
        background: var(--white) url('/img/common/certificate/bg_bwc.svg') no-repeat center center/cover;
    }
    .certificate-wrap .certificate-area .preview-box h6 {
        font-size: 15px;
        font-weight: 900;
        font-family: "Noto Serif KR", serif;
    }
    .certificate-wrap .certificate-area .preview-box .info-list dl {
        display: flex;
        align-items: flex-start;
        font-size: 9px;
        font-weight: 700;
    }
    .certificate-wrap .certificate-area .preview-box .info-list dl ~ dl {
        margin-top: 4px;
    }
    .certificate-wrap .certificate-area .preview-box .info-list dl dt {
        display: inline-block;
        flex-shrink: 0;
        width: 50px;
        max-height: 1em;
        text-align: justify;
    }
    .certificate-wrap .certificate-area .preview-box .info-list dl dt::after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    .certificate-wrap .certificate-area .preview-box .info-list dl dd::before {
        content: ':';
        margin: 0px 3px;
    }
    .certificate-wrap .certificate-area .preview-box pre {
        width: 100%;
        white-space: pre-wrap;
        text-align: center;
        font-family: "Noto Serif KR", serif;
        font-size: 10px;
        font-weight: 700;
    }
    .certificate-wrap .certificate-area .preview-box p.date {
        font-size: 9px;
    }
    .certificate-wrap .certificate-area .preview-box .logo-wrap {
        display: flex;
        align-items: center;
        column-gap: 4px;
    }
    .certificate-wrap .certificate-area .preview-box.bist .logo {
        width: 90px;
        height: 11px;
        background: url('/img/logo/logo_bist.svg') no-repeat center center/contain;
    }
    .certificate-wrap .certificate-area .preview-box.bksk .logo {
        width: 65px;
        height: 11px;
        background: url('/img/logo/logo_bksk.svg') no-repeat center center/contain;
    }
    .certificate-wrap .certificate-area .preview-box.bwc .logo {
        width: 60px;
        height: 14px;
        background: url('/img/logo/logo_bwc.svg') no-repeat center center/contain;
    }
    .certificate-wrap .certificate-area .preview-box .logo-wrap p {
        font-size: 8px;
        font-weight: 700;
        line-height: 1;
    }

        /* S : 수료증 추가 수정 BIST */
        .certificate-wrap .certificate-area .preview-box.bist {
            row-gap: 20px;
            width: 350px;
            height: 494px;
            position: relative;
            background: var(--white) url('/img/common/certificate/bg-bist.svg') no-repeat center center/cover;
        }
        .certificate-wrap .certificate-area .preview-box.bist .numbering {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            position: absolute;
            top: 60px;
            left: 60px;
            font-size: 8px;
        }
        .certificate-wrap .certificate-area .preview-box.bist .numbering span {
            font-size: 10px;
            font-weight: 600;
        }
        .certificate-wrap .certificate-area .preview-box.bist h6 {
            font-size: 24px;
            font-weight: 900;
        }
        .certificate-wrap .certificate-area .preview-box.bist .info-list dl {
            font-size: 10px;
            word-break: break-word;
        }
        .certificate-wrap .certificate-area .preview-box.bist .info-list dl dd {
            word-break: keep-all;
        }
        .certificate-wrap .certificate-area .preview-box.bist pre {
            font-size: 12px;
        }
        .certificate-wrap .certificate-area .preview-box.bist p.date {
            font-size: 12px;
        }
        .certificate-wrap .certificate-area .preview-box.bist .award {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .certificate-wrap .certificate-area .preview-box.bist .award {
            position: relative;
        }
        .certificate-wrap .certificate-area .preview-box.bist .award .leader p {
            font-size: 16px;
            font-weight: 700;
        }
        .certificate-wrap .certificate-area .preview-box.bist .award .leader img {
            width: 40px;
            position: absolute;
            top: -30%;
            right: -20%;
        }
        .certificate-wrap .certificate-area .preview-box.bist .logo-wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }
        .certificate-wrap .certificate-area .preview-box.bist .logo {
            width: 86px;
        }
        .certificate-wrap .certificate-area .preview-box.bist .logo-wrap p {
            font-size: 8px;
        }
        .certificate-wrap .input-area.bist table td,
        .certificate-wrap .read-area.bist table td {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .certificate-wrap .input-area.bist table td > label:before,
        .certificate-wrap .read-area.bist table td > label:before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
            top: 4px;
            margin-right: 10px;
            background: url(/img/common/ico_circle.svg) no-repeat;
        }
        .certificate-wrap .input-area.bist table td > label,
        .certificate-wrap .read-area.bist table td > label {
            font-weight: 600;
        }
        /* E : 수료증 추가 수정 BIST */
/* ----- E : 이수증설정 ----- */



/* ----- S : 준비중 ----- */
    .ready-wrap::after {
        content: "";
        display: block;
        max-width: 500px;
        width: 100%;
        height: 355px;
        margin: 60px auto 0 auto;
        background: url('/img/common/img_ready.svg') center center no-repeat;
        background-size: contain;
    }

    .ready-wrap p.tit {
        margin-bottom: 30px;
        text-align: center;
        font-size: 24px;
    }

    .ready-wrap p.tit strong {
        font-weight: 600;
    }

    .ready-wrap p.sub-txt {
        text-align: center;
        line-height: 1.4;
    }

    @media screen and (max-width: 499px) {
        .ready-wrap::after {
            height: 275px;
        }
    }
/* ----- E : 준비중 ----- */



/* ----- S : 직업상담문의관리 댓글 ----- */
    .page-detail .detail-container .reply-wrap > li {
        border-bottom: 1px solid var(--border20);
    }

    .page-detail .detail-container .reply-wrap .reply-area {
        padding: 30px 50px;
    }

    .page-detail .detail-container .reply-wrap .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .page-detail .detail-container .reply-wrap .top .left-wrap {
        display: flex;
        align-items: center;
    }

    .page-detail .detail-container .reply-wrap .top .left-wrap strong {
        margin-right: 15px;
    }

    .page-detail .detail-container .reply-wrap .top span {
        font-size: 16px;
        color: var(--input-txt);
    }

    .page-detail .detail-container .reply-wrap .top span ~ span::before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 15px;
        margin: 0px 15px -2px 15px;
        background: var(--border20);
    }

    .page-detail .detail-container .reply-wrap .mid {
        line-height: 1.4;
    }

    .page-detail .detail-container .reply-wrap .mid .input-wrap {
        display: flex;
        align-items: flex-start;
        column-gap: 20px;
    }

    .page-detail .detail-container .reply-wrap .bottom {
        margin-top: 20px;
    }

    .page-detail .detail-container .reply-wrap .comment-list > li {
        padding: 30px 50px;
        background: var(--gray5);
        border-top: 1px solid var(--border20);
    }
/* ----- E : 직업상담문의관리 댓글 ----- */