@charset "UTF-8";

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

}

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

/* 노트북 */
@media screen and (max-width:1239px){
    #header #gnb {
        display: none;
    }
}

/* 태블릿 */
@media screen and (max-width:1040px){
    :root{
        --border-r-dafault: 0.625rem; 
        /* padding */
        --sub-p: 1.25rem;
    }
}

/* 모바일 */

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

        /* padding */
        --main-p: 3.75rem;

    }

    html {
        font-size: 8px;
    }
    body {
        font-size: var(--font-size-28);
    }

    .pc { display: none;}
    .mo { display: block;}

    /* header */
    /* s :: 240422 수정 */
    #header {
        position: absolute;
        top: 0;
        right: -100%;
        z-index: 1000;
        width: 100vw;
        height: calc(var(--vh, 1vh) * 100);
        background-color: var(--primary);
        transition: right 0.4s;
        z-index: 10;
    }

    #header.on {
        right: 0;
    }

    #header .head-inner {
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 2.25rem 3.125rem;
    }

    #header .head-inner h1.logo {
        width: 13.3125rem;
        height: 2.875rem;
        background-image: url('../images/img-logo_w.png');
    }

    #header .head-inner .btn-close {
        position: absolute;
        top: 2.75rem;
        right: 3.125rem;
    }

    #header .head-inner .btn-close i {
        width: 2.125rem;
        height: 2.125rem;
        background-image: url('../images/i-close2.png');
    }

    #header #gnb {
        display: block;
        order: 1;
        width: 100%;
    }

    #header #gnb li {
        width: 100%;
    }

    #header #gnb li + li {
        margin-top: 2.5rem;
        margin-left: 0;
    }

    #header #gnb li button {
        width: 100%;
        height: 7.5rem;
        border: 1px solid #4b4d5f;
        border-radius: .625rem;
        font-size: var(--font-size-36);
        color: var(--white);
    }

    #header .util-list {
        order: 0;
        flex-wrap: wrap;
        margin-top: 3.125rem;
        margin-bottom: 3.5625rem;
        width: 100%;
        height: fit-content;
        border: 1px solid #4b4d5f;
        border-radius: .625rem;
        font-size: var(--font-size-28);
        text-align: center;
        color: var(--white);
    }

    #header .util-list li {
        flex: 0 0 50%;
        width: 100%;
        height: 6.25rem;
        padding: 0;
    }

    #header .util-list li:first-child,
    #header .util-list li:nth-child(2) {
        margin: 0;
        border-bottom: 1px solid #4b4d5f;
    }

    #header .util-list li:nth-child(odd) {
        border-right: 1px solid #4b4d5f;
    }

    #header .util-list li:first-child::before {
        display: none;
    }

    #header .util-list li > * {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        height: 100% !important;
    }

    #header .util-list li .btn {
        padding: 0;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #header .util-list li > *::before {
        content: '';
        display: block;
        margin-right: 1.25rem;
        width: 1.875rem;
        height: 1.875rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    #header .util-list li:nth-child(1) > *::before {
        background-image: url('../images/i-head-01.png');
    }
    #header .util-list li:nth-child(2) > *::before {
        width: 1.6875rem;
        height: 2.0625rem;
        background-image: url('../images/i-head-02.png');
    }
    #header .util-list li:nth-child(3) > *::before {
        width: 2rem;
        height: 2rem;
        background-image: url('../images/i-head-03.png');
    }
    #header .util-list li:nth-child(4) > *::before {
        width: 2.0625rem;
        height: 1.9375rem;
        background-image: url('../images/i-head-04.png');
    }

    

    
    /* e :: 240422 수정 */
    
    /* footer */
    #footer {
        border-top: 1px solid var(--border-login);
        height: auto;
    }

    #footer .footer-inner {
        padding: 3.75rem;
        font-size: var(--font-size-24);
        line-height: 1.4;
    }

    #footer .footer-inner > ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    #footer .footer-inner > ul li {
        position: relative;
        padding: 0 1.25rem;
    }

    #footer .footer-inner > ul li::before {
        height: 1.25rem;
    }

    #footer .footer-inner p {
        height: 1.25rem;
        font-size: var(--font-size-22);
        color: var(--gray-550);
    }

    .main-pannel {
        height: 100vh;
    }

    .container-top .container-head {
        position: relative;
        background-color: var(--primary);
    }

    .container-top .container-head .title {
        margin: 0 auto;
        font-size: var(--font-size-36);
        font-weight: var(--font-w-bold);
        color: var(--white);
    }
    .container-top .container-head .util-button-box {
        display: none;
    }
    
    .container-top .container-head .mo .btn-i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .container-top .container-head .mo .btn-i:first-child {
        left: var(--main-p);
    }

    .container-top .container-head .mo .btn-i:last-child {
        right: var(--main-p);
    }

    .main-pannel .ib-context-menu.ib-simple_under_blue, .main-pannel .ib-tab-tabs.ib-simple_under_blue {
        display: none;
    }

    #wrap > section {
        height: 100vh;
    }
    /* s :: 240422 수정 */

    .nav {
        left: -100%;
        width: 100vw;
        z-index: 100;
    }

    .nav .tab-pane {
        max-height: 100vh;
    }

    .nav .lnb > li > div,
    .nav .lnb > li > button {
        font-size: var(--font-size-36);
    } 

    .nav .lnb > li > ul > li > a {
        font-size: var(--font-size-28);
    }

    .container {
        left: 0;
        width: 100vw;
    }

    .on .nav {
        left: 0;
    }
    /* e :: 240422 수정 */

    .ib-tab-contents.ib-simple_under_blue {
        height: 100vh;
    }

    .content-wrap {
        padding: 0;
        padding-top: 3.75rem;
    }

    .box {
        margin-bottom: 5rem;
    }
    
    .box:last-of-type {
        margin-bottom: 0;
    }

    /* btn */

    .btn {
        min-height: 3.6rem;
        font-size: var(--font-size-28);
    }
    /* button size */
    
    .btn-md {
        min-height: 2rem;
    }

    .btn-lg {
        min-height: 5.625rem;
        font-size: var(--font-size-32);
    }

    /* icon */

    i.i-search,
    i.i-calendar {
        width: 2.375rem;
        height: 2.125rem;
    }

    /* form  */
    /* input text */
    .form-default input,
    .form-default textarea,
    .form-default select {
        padding: 0 1.25rem;
        height: 4.375rem;
    }

    .form-default select {
        background-position:calc(100% - 1.25rem) 50%;
        background-size:1.25rem 0.8rem;
    }

    /* input checkbox */

    .form-radio input + span,
    .form-checkbox input + span {
        position: relative;
        display: inline-block;
        padding-left: 3.125rem;
        line-height: 2.625rem;
    }

    .form-radio input + span::before,
    .form-checkbox input + span::before {
        width: 2.625rem;
        height: 2.625rem;
    }

    .form-radio input + span::after,
    .form-checkbox input + span::after {
        top: 0.75rem;
        left: 0.625rem;
        width: 1.5rem;
        height: 1rem;
    }

    .form-radio input + span::after {
        top: 0.8rem;
        left: 0.8rem;
        width: 1rem;
    }

    .form-group > * + * {
        margin-left: 1.1rem;
    }

    /* 레이어 팝업 */
    .modal .modal-overlay {
        padding: calc(var(--main-p) / 2);
    }

    .modal .modal-head {
        position: relative;
        min-height: inherit;
    }

    .modal .modal-head .modal-tit {
        padding-right: 2.5rem;
        font-size: var(--font-size-32);
    }

    .modal .modal-head .modal-btn {
        width: 2rem;
        height: 2rem;
    }

    .modal .modal-body {
        font-size: var(--font-size-32);
    }

    .modal .modal-footer .btn {
        width: 50%;
        min-height: 6.25rem;
        border-radius: 0.375rem;
        font-size: var(--font-size-24);
    }

    .modal.modal-sm .modal-head {
        padding: 2.25rem 3.25rem;
    }

    .modal.modal-sm .modal-head .modal-tit {
        padding-right: 3.75rem;
        font-size: var(--font-size-40);
    }

    .modal.modal-sm .modal-head .modal-btn {
        top: 2.25rem;
        right: 3.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .modal.modal-sm .modal-footer .btn {
        font-size: var(--font-size-32);
    }

    /* 경고 모달 */
    .modal.modal-error .modal-body::before {
        margin-bottom: 1.5rem;
        width: 6rem;
        height: 6rem;
        background-size: 2rem 2rem;
    }
    
    /* 오류 모달 */
    
    .modal.modal-warn .modal-body::before {
        margin-bottom: 1.5rem;
        width: 6.625rem;
        height: 5.75rem;
    }
    

    /* div-table */

    .table,
    .table tbody,
    .table th,
    .table td {
        display: block;
    }

    .table {
        border-style : hidden;
        box-shadow : none;
        border-radius : 0;
    }

    .table colgroup {
        display: none;
    }

    .table tr {
        display: flex;
        flex-wrap: wrap;
    }
    .table th {
        display: flex;
        align-items: center;
        border-top: 1px solid var(--gray-70);
        width: 33%;
        min-height: 6.875rem;
        padding: 1.25rem;
        border-right: 0;
    }

    .table td {
        border-top: 1px solid var(--gray-70);
        width:67%;
        min-height: 6.875rem;
        padding: 1.25rem;
    }

    .table th,
    .table td {
        border-bottom: none;
    }

    .table tr:last-child th:last-of-type,
    .table tr:last-child td:last-of-type {
        border-bottom: 1px solid var(--gray-70);
    }

    /* ibtab */

    .tab-wrap .ib-tab-tabs {
        margin-bottom: 1.25rem;
        padding: 0 var(--sub-p);
    }
    
    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item {
        display: flex;
        width: 100%;
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link {
        height: 5rem;
        padding: 0 1.3rem;
        border-radius: 0;
        line-height: 5rem;
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link:first-of-type {
        border-radius: var(--border-r-dafault) 0 0 var(--border-r-dafault);
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link:last-of-type {
        border-radius: 0 var(--border-r-dafault) var(--border-r-dafault) 0;
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active {
        font-weight: var(--font-w-bold);
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link:first-child {
        font-weight: var(--font-w-bold);
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-shadow.left,
    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-shadow.right {
        display: none;
    }

    .tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-cus {
        display: none;
    }

    .tab-wrap.content-wrap {
        padding: 0;
        height: 100vh;
    }


    /* login */
    #login-wrap {
        padding: 0;
        width: 100vw;
        height: 100vh;
    }

    #login-wrap .login-box {
        justify-content: space-between;
        max-width: initial;
        width: 100%;
        max-height: initial;
        height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    #login-wrap .login-box .login-input-box {
        padding: 6.25rem var(--main-p) 3.438rem;
    }

    #login-wrap .login-box .login-input-box h1 img {
        width: 7.5rem;
    }

    #login-wrap .login-box .login-input-box p {
        margin: 2.25rem 0 3.375rem;
        font-size: var(--font-size-60);
    }

    #login-wrap .login-box .login-input-box .form-default input {
        padding: 0 2rem;
        height: 5.625rem;
        border-radius: 0.5rem;
        font-size: var(--font-size-28);
    }

    #login-wrap .login-box .login-input-box fieldset ul li {
        margin-bottom: 1.25rem;
    }

    #login-wrap .login-box .login-input-box fieldset ul li:last-child {
        margin-bottom: 1.875rem;
    }

    #login-wrap .login-box .login-input-box li > .btn {
        margin: 1.25rem 0;
    }

    #login-wrap .login-box .login-input-box .btn_area {
        font-size: var(--font-size-26);
    }

    #login-wrap .login-box .login-input-box .btn_area > div {
        padding: 0 2.25rem;
    }

    #login-wrap .login-box .login-input-box .btn_area > div::before {
        width: 0.25rem;
        height: 0.25rem;
    }
    #login-wrap .login-box .login-info {
        font-size: var(--font-size-24);
        line-height: 2;
    }
    #login-wrap .login-box .login-info li {
        padding-left: 2rem;
    }

    #login-wrap .login-box .login-info li::before {
        top: 0.25rem;
        width: 1.375rem;
        height: 1.375rem;
    }

    /* 240126 추가 */
    .btn-search {
        display: block;
        margin: 0 var(--sub-p);
        margin-top: 2.625rem;
        width: calc(100% - (var(--sub-p) * 2));
    }

    .but-top {
        position: relative;
        padding-right: var(--sub-p);
        margin-bottom: 1.25rem;
    }

    .but-top .btn {
        margin-left: 1rem;
    }

    i.i-excel {
        margin-right: 2rem;
        width: 2.75rem;
        height: 2.625rem;
    }
    

}

@media screen and ( max-width: 360px) {
    html {
        font-size: 2.2222vw;
    }
}