div.modal-wrap {transition: all 0.4s ease 0s; position: relative; z-index: 10000;}
div.modal-wrap div.modal-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background-color: rgba(0, 0, 0, 0.3); cursor: pointer; }
div.modal-wrap div.modal-box { width: 52vw; height: 100dvh; background-color: #fff; position: fixed; top: 0; right: 0; overflow-y: auto; box-shadow: rgba(9, 0, 0, 0.2) -1px -4px 12px -3px; animation: 0.4s ease 0s 1 normal none running modalSlideLeft; transition: all 0.4s ease 0s; }
@keyframes modalSlideLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}
div.modal-wrap div.modal-box div.modal-box-header { background-color: #ced6f0; position : sticky; top : 0; height : 70px; padding: 0 30px; z-index: 2; display: flex; flex-wrap: wrap; align-content: center;}
div.modal-wrap div.modal-box div.modal-box-header h3 {font-size: 22px; color: #000; }
div.modal-wrap div.modal-box div.modal-box-header button.modal-back  { position: absolute; top: 28px; left: 20px; font-size: 25px; z-index : 999; width : 26px; height: 18px; background-color : transparent; background-image : url('/images/common/document/modal-back-img.png'); font-weight : 100;}
div.modal-wrap div.modal-box div.modal-box-header button.modal-close { position: absolute; top: 8px; right: 20px; font-size: 45px; z-index : 999; background-color : transparent; font-weight : 100;}
div.modal-wrap div.modal-box div.modal-box-table::before {content: ''; display: block; width: 100%; height: 25px; background-color: #fff; position: sticky; top: 70px; z-index: 9999;}
div.modal-wrap div.modal-box div.modal-box-table {margin: 0 20px 40px; min-height: calc(100vh - 135px); position: relative; z-index: 1;}
div.modal-wrap div.modal-box div.modal-box-table table { font-size: 15px; color: #323332; counter-reset:tr; border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%;}
div.modal-wrap div.modal-box div.modal-box-table table tr th { font-weight: 500; padding: 14px 0; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; text-align: center; background-color: rgb(241, 243, 244); position: sticky; top: 95px; z-index: 2;}
div.modal-wrap div.modal-box div.modal-box-table table tr td { font-weight: 400; padding: 14px 17px; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; line-height: 21px; word-break: break-all;}
div.modal-wrap div.modal-box div.modal-box-table table tr td:first-child::before {counter-increment : tr;content : counter(tr);}
div.modal-wrap div.modal-box div.modal-box-table table tr th:last-child,
div.modal-wrap div.modal-box div.modal-box-table table tr td:last-child {border-right: none;}
div.modal-wrap div.modal-box div.modal-box-table table thead {position: relative; z-index: 2;}
div.modal-wrap div.modal-box div.modal-box-table table tbody {position: relative; z-index: 1;}
div.modal-wrap div.modal-box div.modal-box-table table thead tr th:nth-child(1) { width: 5%; }
div.modal-wrap div.modal-box div.modal-box-table table thead tr th:nth-child(2) { width: 16%; }
div.modal-wrap div.modal-box div.modal-box-table table thead tr th:nth-child(3) { width: 13%; }
div.modal-wrap div.modal-box div.modal-box-table table thead tr th:nth-child(4) { width: 6%; }
div.modal-wrap div.modal-box div.modal-box-table table thead tr th:nth-child(5) { width: 6%; }
div.modal-wrap div.modal-box div.modal-box-table table thead tr th:last-child { width: auto; }
div.modal-wrap div.modal-box div.modal-box-table table tbody tr td:nth-child(1),
div.modal-wrap div.modal-box div.modal-box-table table tbody tr td:nth-child(4),
div.modal-wrap div.modal-box div.modal-box-table table tbody tr td:nth-child(5) { text-align: center; padding: 14px 5px;}
div.modal-wrap div.modal-box div.modal-box-table table tbody tr td:last-child { text-align: left; padding: 14px 17px;}
div.modal-wrap div.modal-box div.modal-box-table table a[href] { color: rgb(77, 100, 228); }
div.modal-wrap div.modal-box div.modal-box-table table a[data-function-name] { color: rgb(77, 100, 228); }
div.modal-wrap div.modal-box div.modal-box-table table a[data-object-name] { color: rgb(77, 100, 228); }
div.modal-wrap div.modal-box div.copyright-box {position : relative; text-align: right; margin : 0 20px 0 0;}
div.modal-wrap div.modal-box div.copyright-box copyright{position : absolute; bottom : 13px; right : 10px; font-size : 15px; display : inline-flex; font-weight : 500; color : #777;}
div.modal-wrap div.modal-box div.copyright-box copyright span{display : inline-block; margin : -1px 2px 0 0;}
div.modal-wrap + .modal-wrap div.modal-box { width: 50.8vw; }
div.modal-wrap + .modal-wrap div.modal-box h3 { width: 50.8vw; padding-left: 25px; }

@media (max-width: 1570px) {
    div.modal-wrap div.modal-box {width: 60vw;}
    div.modal-wrap + .modal-wrap div.modal-box {width: 58vw;}
}

@media (max-width:1480px) {
    div.modal-wrap div.modal-box {width: 65vw;}
    div.modal-wrap + .modal-wrap div.modal-box {width: 63vw;}
}

@media (max-width: 1250px) {
    div.modal-wrap div.modal-box {width: 70vw;}
    div.modal-wrap + .modal-wrap div.modal-box {width: 68vw;}
}

@media (max-width: 980px) {
    div.modal-wrap {display: none;}
}