@charset "utf-8";

@import url('reset.css');
@import url('font.css');
@import url('bootstrap-grid.css');
@import url('variables.css');
@import url('jquery-ui.css');
@import url('jquery.treeview.css');
@import url('layout.css');

body {
    width: 100%;
    font-family: var(--font-family), -apple-system, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
    font-size: var(--font-size-14);
    font-weight: var(--font-w-normal);
    line-height: 1.67;
    letter-spacing: -0.025em;
    color: var(--text-dafault);
    /* overflow: hidden; */
}

/* 스크롤 */
::-webkit-scrollbar {
	width:6px;
}
::-webkit-scrollbar-track {
	width:6px;
	background-color:var(--bg-scroll);
    border: none;
}
::-webkit-scrollbar-thumb {
    background-color:var(--bg-scroll-bar);
    border: none;
}
/* 스크롤 firefox용 */
:root {
	scrollbar-color:var(--bg-scroll-bar) var(--bg-scroll);
	scrollbar-width: thin;
}

/* text  */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* pc / 모바일 전용 */
.pc { display: block;}
.mo { display: none;}

/* width */
.w-20 {width: 20% !important; }
.w-30 { width: 30% !important; }
.w-33 { width: 33.3333% !important;  }
.w-40 { width: 40% !important;  }
.w-50 { width: 50% !important;  }
.w-60 { width: 60% !important;  }
.w-70 { width: 70% !important;  }
.w-80 { width: 80% !important;  }
.w-90 { width: 90% !important;  }
.w-100 { width: 100% !important;  }

/* font size */

.fs-10 { font-size: var(--font-size-10) !important;}
.fs-11 { font-size: var(--font-size-11) !important;}
.fs-12 { font-size: var(--font-size-12) !important;}
.fs-13 { font-size: var(--font-size-13) !important;}
.fs-14 { font-size: var(--font-size-14) !important;}
.fs-15 { font-size: var(--font-size-15) !important;}
.fs-16 { font-size: var(--font-size-16) !important;}
.fs-18 { font-size: var(--font-size-18) !important;}
.fs-20 { font-size: var(--font-size-20) !important;}
.fs-21 { font-size: var(--font-size-21) !important;}
.fs-22 { font-size: var(--font-size-22) !important;}
.fs-24 { font-size: var(--font-size-24) !important;}
.fs-26 { font-size: var(--font-size-26) !important;}
.fs-28 { font-size: var(--font-size-28) !important;}
.fs-30 { font-size: var(--font-size-30) !important;}
.fs-32 { font-size: var(--font-size-32) !important;}
.fs-36 { font-size: var(--font-size-36) !important;}
.fs-40 { font-size: var(--font-size-40) !important;}
.fs-46 { font-size: var(--font-size-46) !important;}
.fs-50 { font-size: var(--font-size-50) !important;}
.fs-60 { font-size: var(--font-size-60) !important;}

.sub-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-w-bold);
    color: var(--secondary);
}

/* color */

.bg-primary { background-color: var(--primary) !important;}
.bg-secondary { background-color: var(--secondary) !important;}
.bg-black { background-color: var(--black) !important;}
.bg-white { background-color: var(--white) !important;}
.bg-gray600 {background-color: var(--gray-600) !important;}
.bg-gray550 {background-color: var(--gray-550) !important;}
.bg-gray500 {background-color: var(--gray-500) !important;}
.bg-gray100 {background-color: var(--gray-100) !important;}
.bg-gray80 {background-color: var(--gray-80) !important;}
.bg-gray70 {background-color: var(--gray-70) !important;}
.bg-gray60 {background-color: var(--gray-60) !important;}
.bg-gray50 {background-color: var(--gray-50) !important;}
.bg-gray40 {background-color: var(--gray-40) !important;}
.bg-gray30 {background-color: var(--gray-30) !important;}
.bg-gray20 {background-color: var(--gray-20) !important;}
.bg-gray10 {background-color: var(--gray-10) !important;}
.bg-gray5 {background-color: var(--gray-5) !important;}

.text-primary { color: var(--primary) !important;}
.text-secondary { color: var(--secondary) !important;}
.text-black { color: var(--black) !important;}
.text-white { color: var(--white) !important;}
.text-gray600 { color: var(--gray-600) !important;}

.border { border: 1px solid var(--text-dafault);}
.border-primary { border-color: var(--primary) !important;}
.border-secondary { border-color: var(--secondary) !important;}
.border-black { border-color: var(--black) !important;}
.border-white { border-color: var(--white) !important;}
.border-gray600 { border-color: var(--gray-600) !important;}
.border-gray550 { border-color: var(--gray-550) !important;}
.border-gray500 { border-color: var(--gray-500) !important;}
.border-gray100 { border-color: var(--gray-100) !important;}
.border-gray80 { border-color: var(--gray-80) !important;}
.border-gray70 { border-color: var(--gray-70) !important;}
.border-gray60 { border-color: var(--gray-60) !important;}
.border-gray50 { border-color: var(--gray-50) !important;}
.border-gray40 { border-color: var(--gray-40) !important;}
.border-gray30 { border-color: var(--gray-30) !important;}
.border-gray20 { border-color: var(--gray-20) !important;}
.border-gray10 { border-color: var(--gray-10) !important;}
.border-gray5 { border-color: var(--gray-5) !important;}


/* button style */
.btn {
    padding: 0 14px;
    min-height: 1.8rem;
    border-radius: 4px;
    font-size: var(--font-size-14);
    text-align: center;
}

.btn:disabled {
    opacity: 0.5 !important;
}
/* button size */

.btn-md {
    padding: 0 20px;
    min-height: 2rem;
}

.btn-lg {
    min-height: 4.375rem;
    border-radius: 0.375rem;
    font-size: var(--font-size-22);
    font-weight: var(--font-w-bold);
}

.btn-100 {
    width: 100%;
}

[class*="btn-outline"] {
    border: 1px solid;
    background-color: var(--white);
}

.btn-r-50 {
    border-radius: 1.8rem;
}

.btn-md.btn-r-50 {
    border-radius: 2rem;
}


/* button color */
.btn-primary {
    background-color: var(--primary);
    color: var(--white);
}
.btn-gray500 {
    background-color: var(--gray-500);
}
.btn-gray80 {
    background-color: var(--gray-80);
}
.btn-gray70 {
    background-color: var(--gray-70);
}
.btn-gray60 {
    background-color: var(--gray-60);
}
.btn-gray50 {
    background-color: var(--gray-50);
}
.btn-gray40 {
    background-color: var(--gray-40);
}
.btn-gray30 {
    background-color: var(--gray-30);
}
.btn-gray20 {
    background-color: var(--gray-20);
}
.btn-gray10 {
    background-color: var(--gray-10);
}
.btn-outline-primary {
    border-color: var(--primary);
}
.btn-outline-gray500 {
    border-color: var(--gray-500);
}
.btn-outline-gray80 {
    border-color: var(--gray-80);
}
.btn-outline-gray70 {
    border-color: var(--gray-70);
}
.btn-outline-gray60 {
    border-color: var(--gray-60);
}
.btn-outline-gray50 {
    border-color: var(--gray-50);
}
.btn-outline-gray40 {
    border-color: var(--gray-40);
}
.btn-outline-gray30 {
    border-color: var(--gray-30);
}
.btn-outline-gray20 {
    border-color: var(--gray-20);
}
.btn-outline-gray10 {
    border-color: var(--gray-10);
}

.btn-i {
    padding: 0;
    min-height: inherit;
}

.btn-i i {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* icon */

i.i-search {
    width: 1.125rem;
    height: 1.063rem;
    background-image: url('../images/i-search.png');
}

i.i-calendar {
    width: 1.125rem;
    height: 1.063rem;
    background-image: url('../images/i-calendar.png');
}

i.i-prev {
    width: 1.375rem;
    height: 2.438rem;
    background-image: url('../images/i-prev.png');
}

i.i-menu {
    width: 2.75rem;
    height: 2.25rem;
    background-image: url('../images/i-menu-mo.png');
}

i.i-excel {
    display: block;
    margin-right: .5rem;
    width: 1.1875rem;
    height: 1.1875rem;
    background-image: url('../images/i-excel.png');
    background-repeat: no-repeat;
    background-size: contain;
}

/* btn group */
.btn-group {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.btn-group .btn {
    margin-left: 10px;
}

/* tab */
.tab-content .tab-pane {
    display: none;
}
.tab-content .tab-pane.on {
    display: block;
}

/* form  */
/* input text */
.form-default input,
.form-default textarea,
.form-default select {
    padding: 0 0.313rem;
    display: block;
    width: 100%;
    height: 1.75rem;
    border:1px solid var(--gray-50) ;
    background-color: var(--white);
}

.form-default input::placeholder,
.form-default textarea::placeholder,
.form-default select::placeholder {
    font-weight: var(--font-w-normal);
    color: var(--gray-600);
}

.form-default textarea {
    padding: 0.313rem;
    min-height: 80px;
}

.form-default select {
    -moz-appearance:none;
    -webkit-appearance:none; 
    background-repeat: no-repeat;
    background-position:calc(100% - 7px) 50%;
    background-size:10px 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10px' height='6px'%3E%3Cpath fill-rule='evenodd' fill='rgb(32, 29, 62)' d='M-0.001,-0.001 L9.1000,-0.001 L4.1000,5.999 L-0.001,-0.001 Z'/%3E%3C/svg%3E");
}
select::-ms-expand {display:none;}

select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10px' height='6px'%3E%3Cpath fill-rule='evenodd' fill='rgb(153, 153, 153)' d='M-0.001,-0.001 L9.1000,-0.001 L4.1000,5.999 L-0.001,-0.001 Z'/%3E%3C/svg%3E");
}

.form-default input:read-only,
.form-default textarea:read-only,
.form-default select.readonly {
    background-color: var(--gray-5);
}

.form-default input:disabled,
.form-default textarea:disabled,
.form-default select:disabled {
    background-color: var(--gray-30) !important;
    color: var(--text-disabled);
}


.form-default input:disabled,
.form-default textarea:disabled {
    border-color: var(--border-default);
}

/* input checkbox */

.form-checkbox input + span {
    position: relative;
    display: inline-block;
    padding-left: 1.25rem;
    line-height: 0.875rem;
}

.form-checkbox input + span::before,
.form-checkbox input + span::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.form-checkbox input + span::before {
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--white);
    border: 1px solid var(--gray-50);
}

.form-checkbox:focus input + span::before,
.form-checkbox:hover input + span::before {
    border-color: var(--primary);
}

.form-checkbox input + span::after {
    top: 0.25rem;
    left: 0.188rem;
    width: 0.563rem;
    height: 0.375rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9px' height='6px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M8.319,1.384 L3.319,5.384 L2.999,4.999 L2.646,5.353 L0.646,3.353 L1.353,2.646 L3.036,4.329 L7.679,0.616 L8.319,1.384 Z'/%3E%3C/svg%3E");
    opacity: 0;
}

.form-checkbox input:checked + span::before {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-checkbox input:checked + span::after {
    opacity: 1;
}

.form-checkbox input.readonly + span::before {
    border-color: var(--gray-50);
    background-color: var(--gray-5);
}

.form-checkbox input:disabled + span::before {
    border-color: var(--gray-50);
    background-color: var(--gray-30);
}

.form-checkbox input:disabled + span::after,
.form-checkbox input.readonly + span::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9px' height='6px'%3E%3Cpath fill-rule='evenodd' fill='rgb(169, 167, 175)' d='M8.319,1.384 L3.319,5.384 L2.999,4.999 L2.646,5.353 L0.646,3.353 L1.353,2.646 L3.036,4.329 L7.679,0.616 L8.319,1.384 Z'/%3E%3C/svg%3E");
}

/* input radio */

.form-radio input + span {
    position: relative;
    display: inline-block;
    padding-left: 1.25rem;
    line-height: 0.875rem;
}

.form-radio input + span::before,
.form-radio input + span::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.form-radio input + span::before {
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--white);
    border: 1px solid var(--gray-50);
    border-radius: 100%;
}

.form-radio:focus input + span::before,
.form-radio:hover input + span::before {
    border-color: var(--primary);
}

.form-radio input + span::after {
    top: 0.25rem;
    left: 0.25rem;
    width: 0.375rem;
    height: 0.375rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--white);
    border-radius: 100%;
    opacity: 0;
}

.form-radio input:checked + span::before {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-radio input:checked + span::after {
    opacity: 1;
}

.form-radio input.readonly + span::before {
    border-color: var(--gray-50);
    background-color: var(--gray-5);
}

.form-radio input:disabled + span::before {
    border-color: var(--gray-50);
    background-color: var(--gray-30);
}



.form-group {
    display: flex;
    align-items: center;
}

.form-group > * {
    flex: 0 0 auto;
}

.form-group > * + * {
    margin-left: 6px;
}

.form-group > .form-default {
    flex: 1 1 auto;
}

.form-group .btn-i {
    min-height: 100%;
}


/* 레이어 팝업 */

.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}

.modal .modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    background-color: var(--modal-bg-overlay);
    overflow: hidden;
}

.modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: 100%;
    max-height: 100%;
    background-color: var(--white);
    overflow: hidden;
}

.modal .modal-head {
    position: relative;
    padding: var(--modal-py) var(--modal-px);
    min-height: 3.75rem;
    background-color: var(--primary);
}

.modal .modal-head .modal-tit {
    padding-right: 1.25rem;
    font-size: var(--font-size-16);
    font-weight: var(--font-w-bold);
    line-height: 1;
    letter-spacing: 0;
    color: var(--white);
}

.modal .modal-head .modal-btn {
    display: block;
    position: absolute;
    top: var(--modal-py);
    right: var(--modal-px);
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='21px' height='21px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M20.707,19.293 L19.293,20.707 L10.500,11.914 L1.706,20.707 L0.292,19.293 L9.085,10.500 L0.292,1.707 L1.706,0.293 L10.500,9.086 L19.293,0.293 L20.707,1.707 L11.914,10.500 L20.707,19.293 Z'/%3E%3C/svg%3E");
}

.modal .modal-body {
    padding: var(--modal-px);
    font-size: var(--font-size-16);
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal .modal-body * { 
    font-size: inherit;
}

.modal .modal-footer {
    display: flex;
    justify-content: center;
    padding: 0 var(--modal-px);
    padding-bottom: var(--modal-px);
}

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

.modal .modal-footer .btn.btn-primary {
    font-weight: var(--font-w-bold);
}

.modal .modal-footer .btn + .btn {
    margin-left: 10px;
}

.modal.modal-sm .modal-content {
    max-width: 400px;
}

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

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

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

.modal.modal-lg .modal-content {
    max-width: 1000px;
}

.modal.modal-lg .modal-content {
    max-width: 1000px;
}

/* 경고 모달 */
.modal.modal-error .modal-head {
    background-color: var(--red);
}

.modal.modal-error .modal-body::before {
    content: '';
    display: block;
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.1875rem 1.1875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='21px' height='21px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M20.414,17.586 L17.585,20.414 L10.500,13.328 L3.414,20.414 L0.586,17.586 L7.671,10.500 L0.586,3.414 L3.414,0.586 L10.500,7.671 L17.585,0.586 L20.414,3.414 L13.328,10.500 L20.414,17.586 Z'/%3E%3C/svg%3E");
    background-color: var(--red);
}

/* 오류 모달 */
.modal.modal-warn .modal-head {
    background-color: var(--yellow);
}

.modal.modal-warn .modal-head .modal-tit {
    color: #3a3019;
}

.modal.modal-warn .modal-head .modal-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='21px' height='21px'%3E%3Cpath fill-rule='evenodd' fill='rgb(58, 48, 25)' d='M20.706,19.293 L19.292,20.707 L10.499,11.914 L1.706,20.707 L0.292,19.293 L9.085,10.500 L0.292,1.707 L1.706,0.293 L10.499,9.085 L19.292,0.293 L20.706,1.707 L11.913,10.500 L20.706,19.293 Z'/%3E%3C/svg%3E");
}

.modal.modal-warn .modal-body::before {
    content: '';
    display: block;
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 4.0625rem;
    height: 3.5625rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/i-warn.png");
}


/* table */
.table {
    border-style : hidden;
    box-shadow : 0 0 0 1px var(--gray-70);
    border-radius : var(--border-r-dafault);
    width: 100%;
    vertical-align: middle;
    overflow: hidden;
}

.table th {
    padding: 8px 10px;
    background-color: var(--gray-10);
    border: 1px solid var(--gray-70);
    border-top: none;
    font-weight: var(--font-w-bold);
    text-align: left;
}

.table td {
    padding: 8px;
    border: 1px solid var(--gray-70);
    border-top: none;
}

.table tr:last-child th,
.table tr:last-child td {
    border-bottom: 0;
}

/* table */
.IBHeadLeft,
.IBHeadMid,
.IBHeadRight {
    border-top-color: var(--primary);
}

.IBHeaderText,
.IBCellHeader {
    background-color: var(--gray-10) !important;
}

.IBPagerEdit > div {
    background-color: var(--white);
    border: 1px solid var(--gray-50);
}

/* ibtab */

.tab-wrap iframe {
    min-height: 500px;
}

.tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link {
    flex: 1 1 auto;
    height: 2.25rem;
    margin: 0;
    padding: 0 20px;
    background-color: var(--gray-20);
    border-color: var(--gray-60);
    border-radius: var(--border-r-dafault) var(--border-r-dafault) 0 0;
    font-size: var(--font-size-15);
    font-weight: var(--font-w-normal);
    line-height: 2.25rem;
    color: var(--text-dafault);
}

.tab-wrap .ib-tab-tabs.ib-bootstrap_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.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;
}

/* IBSheet 팝업 */
.IBMenuBody > div  {box-sizing:border-box !important; padding:30px;}
.IBMenuBody > div > div {padding:0 !important;}
.IBMenuBody > div > div + div {padding-top:15px !important;}
.IBPickMain .IBMenuBody > div {padding:0;}

.IBPickShadow, .IBPickOuter {width:296px !important;}


/* 240126 추가 */

.btn-search {
    display: none;
}

.relative {
    position: relative;
}

.but-top {
    display: flex;
    justify-content: end;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
}

.but-top .btn {
    display: flex;
    align-items: center;
    margin-left: 6px;
}

/* ============== accordion ==============  */