.empty_table {
    line-height: 10rem;
    text-align: center;
}


.hp-50 {
    height: 50px !important;
}

.hp-60 {
    height: 60px !important;
}

.hp-70 {
    height: 70px !important;
}

.hp-80 {
    height: 80px !important;
}

.hp-90 {
    height: 90px !important;
}

.hp-100 {
    height: 100px !important;
}

.hp-120 {
    height: 120px !important;
}

.hp-130 {
    height: 130px !important;
}

.hp-150 {
    height: 150px !important;
}

.hp-200 {
    height: 200px !important;
}

.hp-250 {
    height: 250px !important;
}

.hp-300 {
    height: 300px !important;
}

.hp-400 {
    height: 400px !important;
}

.hp-480 {
    height: 480px !important;
}

.hp-500 {
    height: 500px !important;
}

.hp-600 {
    height: 600px !important;
}

.hp-700 {
    height: 700px !important;
}

.hp-800 {
    height: 800px !important;
}

.hp-900 {
    height: 900px !important;
}

.wp-50 {
    width: 50px !important;
}

.wp-60 {
    width: 60px !important;
}

.wp-70 {
    width: 70px !important;
}

.wp-80 {
    width: 80px !important;
}

.wp-90 {
    width: 90px !important;
}

.wp-100 {
    width: 100px !important;
}

.wp-120 {
    width: 120px !important;
}

.wp-130 {
    width: 130px !important;
}

.wp-150 {
    width: 150px !important;
}

.wp-200 {
    width: 200px !important;
}

.wp-250 {
    width: 250px !important;
}

.wp-300 {
    width: 300px !important;
}

.wp-400 {
    width: 400px !important;
}

.wp-480 {
    width: 480px !important;
}

.wp-500 {
    width: 500px !important;
}

.wp-600 {
    width: 600px !important;
}

.wp-700 {
    width: 700px !important;
}

.wp-800 {
    width: 800px !important;
}

.wp-900 {
    width: 900px !important;
}

.w-20 {
    width: 20% !important;
}

.w-24 {
    width: 24% !important;
}

.w-30 {
    width: 30% !important;
}

.w-33 {
    width: 33% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-48 {
    width: 48% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.max-50 {
    max-width: 50% !important;
}

.max-55 {
    max-width: 55% !important;
}

.max-60 {
    max-width: 60% !important;
}

.max-65 {
    max-width: 65% !important;
}

.max-70 {
    max-width: 70% !important;
}

.max-75 {
    max-width: 75% !important;
}

.max-80 {
    max-width: 80% !important;
}

.max-85 {
    max-width: 85% !important;
}

.max-90 {
    max-width: 90% !important;
}

.max-95 {
    max-width: 95% !important;
}

.max-100 {
    max-width: 99% !important;
}

.max-150 {
    max-width: 150px;
}

.max-200 {
    max-width: 200px;
}

.max-250 {
    max-width: 250px;
}

.max-300 {
    max-width: 300px;
}

.max-350 {
    max-width: 350px;
}

.max-400 {
    max-width: 400px;
}

.max-450 {
    max-width: 450px;
}

.max-500 {
    max-width: 500px;
}

.max-550 {
    max-width: 550px;
}

.max-600 {
    max-width: 600px;
}

.max-700 {
    max-width: 700px;
}

.max-800 {
    max-width: 800px;
}

.max-900 {
    max-width: 900px;
}

.max-1000 {
    max-width: 1000px;
}

.max-1100 {
    max-width: 1100px;
}

.min-100 {
    min-width: 100px;
}

.min-120 {
    min-width: 120px;
}

.min-150 {
    min-width: 150px;
}

.min-200 {
    min-width: 200px;
}

.min-250 {
    min-width: 250px;
}

.min-300 {
    min-width: 300px;
}

.min-350 {
    min-width: 350px;
}

.min-400 {
    min-width: 400px;
}

.min-450 {
    min-width: 450px;
}

.min-500 {
    min-width: 500px;
}

.min-550 {
    min-width: 550px;
}

.min-600 {
    min-width: 600px;
}

.min-700 {
    min-width: 700px;
}

.min-800 {
    min-width: 800px;
}

.min-900 {
    min-width: 900px;
}

.min-1000 {
    min-width: 1000px;
}

.min-1100 {
    min-width: 1100px;
}

.mb-p10 {
    margin-bottom: 10px !important;
}

.mb-p20 {
    margin-bottom: 20px !important;
}

.mb-p30 {
    margin-bottom: 30px !important;
}

.mb-p40 {
    margin-bottom: 40px !important;
}

.mb-p50 {
    margin-bottom: 50px !important;
}

.mb-p60 {
    margin-bottom: 60px !important;
}

.mb-p70 {
    margin-bottom: 70px !important;
}

.mb-p80 {
    margin-bottom: 80px !important;
}

.mb-p90 {
    margin-bottom: 90px !important;
}

.mb-p100 {
    margin-bottom: 100px !important;
}

.mb-p120 {
    margin-bottom: 150px !important;
}

.mb-p150 {
    margin-bottom: 150px !important;
}

.mb-p200 {
    margin-bottom: 200px !important;
}

.mb-p250 {
    margin-bottom: 250px !important;
}

.mb-p300 {
    margin-bottom: 300px !important;
}

.mt-p10 {
    margin-top: 10px !important;
}

.mt-p20 {
    margin-top: 20px !important;
}

.mt-p30 {
    margin-top: 30px !important;
}

.mt-p40 {
    margin-top: 40px !important;
}

.mt-p50 {
    margin-top: 50px !important;
}

.mt-p60 {
    margin-top: 60px !important;
}

.mt-p70 {
    margin-top: 70px !important;
}

.mt-p80 {
    margin-top: 80px !important;
}

.mt-p90 {
    margin-top: 90px !important;
}

.mt-p100 {
    margin-top: 100px !important;
}

.mt-p120 {
    margin-top: 150px !important;
}

.mt-p150 {
    margin-top: 150px !important;
}

.mt-p200 {
    margin-top: 200px !important;
}

.mt-p250 {
    margin-top: 250px !important;
}

.mt-p300 {
    margin-top: 300px !important;
}

.p-25 {
    padding: 0.75rem;
}

.py-25 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.px-25 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.ps-25 {
    padding-left: 0.75rem;
}

.pe-25 {
    padding-right: 0.75rem;
}

.pt-25 {
    padding-top: 0.75rem;
}

.pb-25 {
    padding-bottom: 0.75rem;
}


@media only screen and (min-width:576px) {

    .w-sm-20 {
        width: 20% !important;
    }

    .w-sm-24 {
        width: 24% !important;
    }

    .w-sm-30 {
        width: 30% !important;
    }

    .w-sm-33 {
        width: 33% !important;
    }

    .w-sm-40 {
        width: 40% !important;
    }

    .w-sm-45 {
        width: 45% !important;
    }

    .w-sm-48 {
        width: 48% !important;
    }

    .w-sm-60 {
        width: 60% !important;
    }

    .w-sm-65 {
        width: 65% !important;
    }

    .w-sm-70 {
        width: 70% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-80 {
        width: 80% !important;
    }

    .w-sm-85 {
        width: 85% !important;
    }

    .w-sm-90 {
        width: 90% !important;
    }

    .w-sm-95 {
        width: 95% !important;
    }
}

@media only screen and (min-width:768px) {


    .w-md-20 {
        width: 20% !important;
    }

    .w-md-24 {
        width: 24% !important;
    }

    .w-md-30 {
        width: 30% !important;
    }

    .w-md-33 {
        width: 33% !important;
    }

    .w-md-40 {
        width: 40% !important;
    }

    .w-md-45 {
        width: 45% !important;
    }

    .w-md-48 {
        width: 48% !important;
    }

    .w-md-60 {
        width: 60% !important;
    }

    .w-md-65 {
        width: 65% !important;
    }

    .w-md-70 {
        width: 70% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-80 {
        width: 80% !important;
    }

    .w-md-85 {
        width: 85% !important;
    }

    .w-md-90 {
        width: 90% !important;
    }

    .w-md-95 {
        width: 95% !important;
    }
}

/*컬러*/
.color_1 {
    background: #169dd6
}

.color_2 {
    background: #14d53d
}

.color_3 {
    background: #3814ff
}

.color_4 {
    background: #7520c5
}


/* 알림 */
#float_notice {
    width: 100%;
    height: 3rem;
    position: fixed;
    bottom: 0;
    text-align: center;
    background: rgb(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 3rem;
    display: none;
}

/*=================================== 리스팅 ===================================*/
ul.number-li {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    list-style: decimal;
}

ul.number-li.div-2 li {
    width: calc(50% - 1rem);
    padding: 0;
    margin-left: 1rem;
}

@media only screen and (max-width:767px) {
    ul.number-li.div-2 li {
        width: calc(100% - 1rem);
    }
}


/*=================================== 테이블 ===================================*/
table th,
table td {}

table td.empty-table {
    padding: 1.5rem 0 !important;
}

.table-x {
    border-top: 1px solid #ababab;
    margin-bottom: 1.5rem;
}

.table-x td,
.table-x th {
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    color: #000;
    font-weight: 400;
    font-size: 1rem;
}

.table-x td:first-child,
.table-x th:first-child {
    border-left: none;
}

.table-x td:last-child,
.table-x th:last-child {
    border-right: none;
}


.table-x th {
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    padding: 0.5rem 0.3rem;
    word-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
}

.table-x th:not(.no-bg) {
    background: #f7f7f7;
}

.table-x td {
    text-align: center;
    vertical-align: middle;
    padding: 0.35rem 0.3rem;
}

.table-x td:last-child,
.table-x th:last-child {}

.table-x tfoot td {
    background: #efefef;
    border-top: 1px solid #dedede !important;
}

.table-x td.nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.table-x .border-bottom-2 {
    border-bottom: 2px solid #ababab !important;
}

.table-x .info {
    font-size: 0.825rem;
    color: #989898;
}

.table-y {
    border-top: 1px solid #ababab;
}

.table-y td,
.table-y th {
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    color: #000;
    font-weight: 400;
    font-size: 1rem;
}

.table-y th {
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    padding: 0.5rem 0.3rem;
}

.table-y th:not(.no-bg) {
    background: #f7f7f7;
}

.table-y td {
    text-align: left;
    vertical-align: middle;
    padding: 0.35rem 0.35rem;
}

.table-y td:last-child,
.table-x th:last-child {
    border-right: none;
}

.table-y tfoot td {
    background: #f7f7f7;
    border-top: 1px solid #ababab !important;
}

.table-y td.nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.table-y .info {
    display: block;
    font-size: 0.825rem;
    color: #989898;
}

.table-y.table-div2 th {
    width: 30%;
}

.table-y.table-div2 td {
    width: 70%;
}


.table-l {
    width: 100%;
    border-top: 1px solid #ababab;
    margin-bottom: 1.5rem;
}

.table-l td,
.table-l th {
    border-bottom: 1px solid #dedede;
    color: #000;
    font-weight: 400;
    font-size: 1rem;
}

.table-l th {
    text-align: left;
    vertical-align: middle;
    font-weight: 500;
    padding: 0.5rem 0.3rem;
    word-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
}

.table-l th:not(.no-bg) {}

.table-l td {
    text-align: left;
    vertical-align: middle;
    padding: 0.35rem 0.3rem;
}

.table-l td+th {
    padding-left: 1rem;
}

.table-l td:last-child,
.table-l th:last-child {}

.table-l tfoot td {
    background: #efefef;
    border-top: 1px solid #dedede !important;
}

.table-l td.nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.table-l .border-bottom-2 {
    border-bottom: 2px solid #ababab !important;
}

.table-l .info {
    font-size: 0.825rem;
    color: #989898;
}


.table-list {
    border-top: 2px solid #454545;
}

.table-list td,
.table-list th {
    text-align: center;
}

.table-vert {
    border-top: 2px solid #454545;
}

.table-vert td,
.table-vert th {
    text-align: left;
}

.table-vert th {
    border-right: 1px solid #f7f7f7;
}

tr.deleted td {
    color: #aaa;
}

.grid0-head {
    width: 11%;
    min-width: 80px;
}

.grid1-head {
    width: 15%;
    min-width: 90px;
}

.grid2-head {
    width: 20%;
    min-width: 120px;
}

.grid3-head {
    width: 30%;
    min-width: 150px;
}

.grid4-head {
    width: 40%;
    min-width: 200px;
}

td .s-tit {
    font-size: 1.1rem;
    line-height: 1.2rem;
    font-weight: 500;
    color: #000;
    text-align: left;
    margin-bottom: 0.5rem;
}

.table-xs td,
.table-xs th {
    padding: 0 0.3rem 0 0.3rem;
    word-wrap: normal;
    word-break: keep-all;
}

.table-small td,
.table-small th {
    font-size: 0.925rem !important;
}

.table-fsmall th,
.table-fsmall td {
    font-size: 0.825em !important;
    padding: 0.15rem 0.15rem;
}

.table-fsmall td.small {
    font-size: 0.825em !important;
    min-width: 40px !important;
}

.table-fmid th,
.table-fmid td {
    font-size: 0.875em !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

.table-fmid td.small {
    font-size: 0.875em !important;
    min-width: 40px !important;
}

.table-ysmall th,
.table-ysmall td {
    font-size: 0.825em !important;
    padding: 0.15rem 0.15rem;
}

.table-ysmall td.small {
    font-size: 0.825em !important;
    min-width: 40px !important;
}

.table-ymid th,
.table-ymid td {
    font-size: 0.875em !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

.table-ymid td.small {
    font-size: 0.875em !important;
    min-width: 40px !important;
}

.table-ylg th,
.table-ylg td {
    padding: 0.8rem !important;
}

table.responsive-tb1 td:before {
    display: none !important;
}

table.responsive-tb1 td span.th {
    /* Now like a table header */
    display: inline-block;
    position: relative;
    width: 130px;
    align-self: stretch;
    line-height: 3rem;
    margin: -0.3rem 0.5rem -0.3rem 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid #eee;
    white-space: nowrap;
    background: #f7f7f7;
    font-weight: 600;
}

table.responsive-tb1 tr.block-tr td {
    width: 100%;
}

@media only screen and (max-width:991px) {
    .table-x.responsive-lg {
        border-top: 1px solid #eee;
        border-left: 0;
        border-right: 0;
    }

    .table-x.responsive-lg td {
        border-left: 0;
        border-right: 0;
        padding: 0.5rem 0;
    }

    .table-x.responsive-lg td {}
}

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

    table.responsive-tb1 {
        border: none;
    }

    table.responsive-tb1 thead,
    table.responsive-tb1 tbody,
    table.responsive-tb1 th {
        display: block;
    }

    table.responsive-tb1 tr {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-bottom: 0.8rem;
    }

    table.responsive-tb1 tr.tr-mid {
        border-bottom: 0;
        margin-bottom: 0;
    }

    table.responsive-tb1 td {
        width: 50%;
    }

    table.responsive-tb1 td.block-td {
        width: 100%;
        border-right: 0 !important;
    }


    table.responsive-tb1 td img.thumb {
        height: 30px;
    }

    table.responsive-tb1 colgroup {
        display: none;
        visibility: collapse;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table.responsive-tb1 thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.responsive-tb1 td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
    }

    table.responsive-tb1 td.empty-td {
        text-align: center;
    }

    table.responsive-tb1 td:not(.empty-td):not(.block-td) {
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 0.3rem 0.3rem 0.3rem 0;
        line-height: 100%;
    }

    table.responsive-tb1 td:nth-child(odd) {
        border-right: 1px solid #eee;
    }

    table.responsive-tb1 td:not(.empty-td):not(.block-td):before {
        /* Now like a table header */
        content: attr(data-label);
        display: inline-flex !important;
        align-items: center;
        position: relative;
        width: 130px;
        align-self: stretch;
        line-height: 120%;
        height: 3rem;
        margin: -0.3rem 0.5rem -0.3rem 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-right: 1px solid #eee;
        white-space: wrap;
        background: #f7f7f7;
        font-weight: 600;
    }

    table.responsive-tb1 td:not(.empty-td):not(.block-td)>div {
        max-width: calc(100% - 130px - 0.6rem);
    }

    table.responsive-tb1 td .td {
        /* Now like a table header */
        width: calc(100% - 140px);
    }

    table.responsive-tb1 td select,
    table.responsive-tb1 td input {
        max-width: 100%;
    }

    /*
	Label the data
	*/

    table.responsive-tb2 {
        border: none;
    }

    table.responsive-tb2 thead,
    table.responsive-tb2 tbody,
    table.responsive-tb2 th {
        display: block;
    }

    table.responsive-tb2 tr {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

    }

    table.responsive-tb2 td {
        display: flex;
        align-items: center;
        width: 100%;
    }

    table.responsive-tb2 colgroup {
        display: none;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table.responsive-tb2 thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.responsive-tb2 tr {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-bottom: 0.8rem;
    }

    table.responsive-tb2 td {
        /* Behave  like a "row" */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative;
        padding: 0.3rem 0.3rem 0.3rem 0;
        text-align: left;
    }

    table.responsive-tb2 td.empty-td {
        text-align: center;
    }

    table.responsive-tb2 td:not(.empty-td):not(.block-td) {
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 0.3rem 0.3rem 0.3rem 0;
        line-height: 100%;
    }

    table.responsive-tb2 td:not(.empty_table):not(.block-td):before {
        /* Now like a table header */
        content: attr(data-label);
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 130px;
        align-self: stretch;
        line-height: 120%;
        height:3rem;
        margin: -0.3rem 0.5rem -0.3rem 0;
        padding-left: 0.5rem;
        padding-right: 10px;
        border-right: 1px solid #eee;
        white-space: wrap;
        background: #f7f7f7;
        font-weight: 600;
    }

    table.responsive-tb2 td.block-td>div {
        max-width: calc(100% - 130px - 0.6rem);
    }

    table.responsive-tb2 td .td {
        /* Now like a table header */
        width: calc(100% - 130px - 0.6rem);
    }


}

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

    table.responsive-tb1 thead,
    table.responsive-tb1 tbody,
    table.responsive-tb1 th {
        display: block;
    }

    table.responsive-tb1 tr {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

    }

    table.responsive-tb1 td {
        width: 100%;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
    }

    table.responsive-tb1 td:not(.empty-td):not(.block-td) {
        display: flex;
    }


    table.responsive-tb1 colgroup {
        display: none;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table.responsive-tb1 thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.responsive-tb1 tr {
        border-bottom: 1px solid #ccc;
    }

    table.responsive-tb1 td {
        /* Behave  like a "row" */
        border: none !important;
        border-bottom: 1px solid #eee !important;

        position: relative;
        padding: 0.3rem 0.3rem 0.3rem 0;
        text-align: left;
    }

    table.responsive-tb1 td:not(.empty_table):not(.block-td):before {
        /* Now like a table header */
        position: relative !important;
        display: inline-block;
        width: 100px;
        align-self: stretch;
        line-height: 3rem;
        margin: -0.3rem 0.5rem -0.3rem 0;
        padding-left: 0.5rem;
        padding-right: 10px;
        border-right: 1px solid #eee;
    }

    table.responsive-tb1 td .td {
        /* Now like a table header */
        width: calc(100% - 100px);
    }

    table.responsive-tb1 td span.th {
        /* Now like a table header */
        width: 100px !important;
    }


    table.responsive-tb2 td:not(.empty_table):not(.block-td):before {
        /* Now like a table header */
        width: 100px;
    }

    table.responsive-tb2 td:not(.empty_table):not(.block-td):before>div {
        max-width: calc(100% - 100px - 0.6rem);
    }

    table.responsive-tb2 td .td {
        /* Now like a table header */
        width: calc(100% - 100px);
    }



    table.responsive-form1 {
        width: 100%;
        border-top: none;
        ;

    }

    table.responsive-form1>thead,
    table.responsive-form1>tbody,
    table.responsive-form1>tbody>tr>th,
    table.responsive-form1>tbody>tr,
    table.responsive-form1>tbody>tr>td,
    table.responsive-form1>tr>th,
    table.responsive-form1>tr,
    table.responsive-form1>tr>td {
        display: block;
        width: 100%;
    }


    table.responsive-form1>tbody>tr,
    table.responsive-form1>tr {
        border-bottom: none;
    }

    table.responsive-form1>tbody>tr>th,
    table.responsive-form1>tr>th {
        text-align: left;
        display: flex;
        align-items: center;
        padding: 0.7rem 0.0rem 0rem 0rem;
        border: none;
        border-top: 1px solid #ccc;
        border-bottom: none;
    }

    table.responsive-form1>tbody>tr>td,
    table.responsive-form1>tr>td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding: 0.3rem 0.0rem 1rem 0rem;
        text-align: left;
        height: auto;

    }

    colgroup {
        display: none;
    }

    table.responsive-form1 .grid1-head,
    table.responsive-form1 .grid2-head,
    table.responsive-form1 .grid3-head,
    table.responsive-form1 .grid4-head,
    table.responsive-form1 col {
        width: 100%;
    }

}

/* 테이블 그리드 padding 0 5px 고려한 넓이 */
.grid_1 {
    width: 40px
}

.grid_2 {
    width: 100px
}

.grid_3 {
    width: 120px
}

.grid_4 {
    width: 190px
}

.grid_5 {
    width: 240px
}

.grid_6 {
    width: 290px
}

.grid_7 {
    width: 340px
}

.grid_8 {
    width: 390px
}

.grid_9 {
    width: 440px
}

.grid_10 {
    width: 490px
}

.grid_11 {
    width: 540px
}

.grid_12 {
    width: 590px
}

.grid_13 {
    width: 640px
}

.grid_14 {
    width: 690px
}

.grid_15 {
    width: 740px
}

.grid_16 {
    width: 790px
}

.grid_17 {
    width: 840px
}

.grid_18 {
    width: 890px
}


.fs-7p {
    font-size: 7px;
}

.fs-8p {
    font-size: 8px;
}

.fs-9p {
    font-size: 9px;
}

.fs-10p {
    font-size: 10px;
}

.fs-12p {
    font-size: 12px;
}

.fs-13p {
    font-size: 13px;
}

.fs-14p {
    font-size: 14px;
}

.fs-15p {
    font-size: 15px;
}

.fs-16p {
    font-size: 16px;
}

.fs-18p {
    font-size: 18px;
}

.fs-20p {
    font-size: 20px;
}

.fs-24p {
    font-size: 24px;
}

.fs-28p {
    font-size: 28px;
}

.fs-30p {
    font-size: 30px;
}

.fs-32p {
    font-size: 32px;
}

.fs-34p {
    font-size: 34px;
}

.fs-60p {
    font-size: 60px;
}

.fs-80p {
    font-size: 80px;
}


.fs-06r {
    font-size: 0.6rem;
}

.fs-07r {
    font-size: 0.7rem;
}

.fs-08r {
    font-size: 0.8rem;
}

.fs-09r {
    font-size: 0.9rem;
}

.fs-1r {
    font-size: 1rem;
}

.fs-11r {
    font-size: 1.1rem;
}

.fs-12r {
    font-size: 1.2rem;
}

.fs-13r {
    font-size: 1.3rem;
}

.fs-14r {
    font-size: 1.4rem;
}

.fs-15r {
    font-size: 1.5rem;
}

.fs-16r {
    font-size: 1.6rem;
}

.fs-17r {
    font-size: 1.7rem;
}

.fs-18r {
    font-size: 1.8rem;
}

.fs-19r {
    font-size: 1.9rem;
}

.fs-2r {
    font-size: 2rem;
}

.fs-22r {
    font-size: 2.2rem;
}

.fs-25r {
    font-size: 2.5rem;
}

.fs-27r {
    font-size: 2.7rem;
}

.fs-3r {
    font-size: 3rem;
}

.fs-32r {
    font-size: 3.2rem;
}

.fs-35r {
    font-size: 3.5rem;
}

.fs-37r {
    font-size: 3.7rem;
}

.fs-4r {
    font-size: 4rem;
}

.fs-425r {
    font-size: 4.25rem;
}

.fs-45r {
    font-size: 4.5rem;
}

.fs-5r {
    font-size: 5rem;
}

.fs-55r {
    font-size: 5.5rem;
}

.fs-6r {
    font-size: 6rem;
}

@media only screen and (min-width:576px) {
    .fs-sm-06r {
        font-size: 0.6rem;
    }

    .fs-sm-07r {
        font-size: 0.7rem;
    }

    .fs-sm-08r {
        font-size: 0.8rem;
    }

    .fs-sm-09r {
        font-size: 0.9rem;
    }

    .fs-sm-1r {
        font-size: 1rem;
    }

    .fs-sm-11r {
        font-size: 1.1rem;
    }

    .fs-sm-12r {
        font-size: 1.2rem;
    }

    .fs-sm-13r {
        font-size: 1.3rem;
    }

    .fs-sm-14r {
        font-size: 1.4rem;
    }

    .fs-sm-15r {
        font-size: 1.5rem;
    }

    .fs-sm-16r {
        font-size: 1.6rem;
    }

    .fs-sm-17r {
        font-size: 1.7rem;
    }

    .fs-sm-18r {
        font-size: 1.8rem;
    }

    .fs-sm-19r {
        font-size: 1.9rem;
    }

    .fs-sm-2r {
        font-size: 2rem;
    }

    .fs-sm-22r {
        font-size: 2.2rem;
    }

    .fs-sm-25r {
        font-size: 2.5rem;
    }

    .fs-sm-27r {
        font-size: 2.7rem;
    }

    .fs-sm-3r {
        font-size: 3rem;
    }

    .fs-sm-32r {
        font-size: 3.2rem;
    }

    .fs-sm-35r {
        font-size: 3.5rem;
    }

    .fs-sm-37r {
        font-size: 3.7rem;
    }

    .fs-sm-4r {
        font-size: 4rem;
    }

    .fs-sm-425r {
        font-size: 4.25rem;
    }

    .fs-sm-45r {
        font-size: 4.5rem;
    }

    .fs-sm-5r {
        font-size: 5rem;
    }

    .fs-sm-55r {
        font-size: 5.5rem;
    }

    .fs-sm-6r {
        font-size: 6rem;
    }
}

@media only screen and (min-width:768px) {
    .fs-md-06r {
        font-size: 0.6rem;
    }

    .fs-md-07r {
        font-size: 0.7rem;
    }

    .fs-md-08r {
        font-size: 0.8rem;
    }

    .fs-md-09r {
        font-size: 0.9rem;
    }

    .fs-md-1r {
        font-size: 1rem;
    }

    .fs-md-11r {
        font-size: 1.1rem;
    }

    .fs-md-12r {
        font-size: 1.2rem;
    }

    .fs-md-13r {
        font-size: 1.3rem;
    }

    .fs-md-14r {
        font-size: 1.4rem;
    }

    .fs-md-15r {
        font-size: 1.5rem;
    }

    .fs-md-16r {
        font-size: 1.6rem;
    }

    .fs-md-17r {
        font-size: 1.7rem;
    }

    .fs-md-18r {
        font-size: 1.8rem;
    }

    .fs-md-19r {
        font-size: 1.9rem;
    }

    .fs-md-2r {
        font-size: 2rem;
    }

    .fs-md-22r {
        font-size: 2.2rem;
    }

    .fs-md-25r {
        font-size: 2.5rem;
    }

    .fs-md-27r {
        font-size: 2.7rem;
    }

    .fs-md-3r {
        font-size: 3rem;
    }

    .fs-md-32r {
        font-size: 3.2rem;
    }

    .fs-md-35r {
        font-size: 3.5rem;
    }

    .fs-md-37r {
        font-size: 3.7rem;
    }

    .fs-md-4r {
        font-size: 4rem;
    }

    .fs-md-425r {
        font-size: 4.25rem;
    }

    .fs-md-45r {
        font-size: 4.5rem;
    }

    .fs-md-5r {
        font-size: 5rem;
    }

    .fs-md-55r {
        font-size: 5.5rem;
    }

    .fs-md-6r {
        font-size: 6rem;
    }
}

@media only screen and (min-width:992px) {
    .fs-lg-08r {
        font-size: 0.8rem;
    }

    .fs-lg-09r {
        font-size: 0.9rem;
    }

    .fs-lg-1r {
        font-size: 1rem;
    }

    .fs-lg-11r {
        font-size: 1.1rem;
    }

    .fs-lg-12r {
        font-size: 1.2rem;
    }

    .fs-lg-13r {
        font-size: 1.3rem;
    }

    .fs-lg-14r {
        font-size: 1.4rem;
    }

    .fs-lg-15r {
        font-size: 1.5rem;
    }

    .fs-lg-16r {
        font-size: 1.6rem;
    }

    .fs-lg-17r {
        font-size: 1.7rem;
    }

    .fs-lg-18r {
        font-size: 1.8rem;
    }

    .fs-lg-19r {
        font-size: 1.9rem;
    }

    .fs-lg-2r {
        font-size: 2rem;
    }

    .fs-lg-22r {
        font-size: 2.2rem;
    }

    .fs-lg-25r {
        font-size: 2.5rem;
    }

    .fs-lg-27r {
        font-size: 2.7rem;
    }

    .fs-lg-3r {
        font-size: 3rem;
    }

    .fs-lg-32r {
        font-size: 3.2rem;
    }

    .fs-lg-35r {
        font-size: 3.5rem;
    }

    .fs-lg-37r {
        font-size: 3.7rem;
    }

    .fs-lg-4r {
        font-size: 4rem;
    }

    .fs-lg-425r {
        font-size: 4.25rem;
    }

    .fs-lg-45r {
        font-size: 4.5rem;
    }

    .fs-lg-5r {
        font-size: 5rem;
    }

    .fs-lg-55r {
        font-size: 5.5rem;
    }

    .fs-lg-6r {
        font-size: 6rem;
    }
}

.fw-1 {
    font-weight: 100 !important;
}

.fw-2 {
    font-weight: 200 !important;
}

.fw-3 {
    font-weight: 300 !important;
}

.fw-4 {
    font-weight: 400 !important;
}

.fw-5 {
    font-weight: 500 !important;
}

.fw-6 {
    font-weight: 600 !important;
}

.fw-7 {
    font-weight: 700 !important;
}

.fw-8 {
    font-weight: 800 !important;
}

.text-gray {
    color: #A6ACB1 !important;
}

.btn-group-xs>.btn,
.btn-xs {
    padding: .15rem .25rem;
    font-size: .775rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.btn-light {
    border: 1px solid #dfdfdf;
}

.ui-datepicker .ui-datepicker-title select {
    margin: 1px 2px !important;
    height: 2em;
    border-radius: 3px;
}


.btn-purple {
    color: #fff;
    background-color: #6564CB;
    border-color: #6564CB;
}

.btn-purple:hover {
    color: #fff;
    background-color: #5192D8;
    border-color: #3BC7E7;
}


.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #565656;
    border-color: #676767;
}

.alert {
    width: auto !important;
    position: relative;
    display: block;
    padding: .25rem 1.25rem;
    margin: .25rem 0;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.search-form span {
    display: inline-block;
    ;
    margin-bottom: 1%;
}

.search-form input,
.search-form select,
.search-form a {
    width: auto;
    margin-bottom: 1%;
}

.search-form input,
.search-form select,
.search-form a,
.search-form button {
    vertical-align: middle;
}

.cursor-pointer {
    cursor: pointer;
}

.required {
    /*background:url('../img/require.png')  top right no-repeat #fff !important*/
}


.filebox label {
    display: block;
    /*display: inline-block; padding: .5em .75em; color: #999; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em; */
}

.filebox input[type="file"] {
    /* 파일 필드 숨기기 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.filebox span {
    width: 80%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}


.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    white-space: nowrap;
    word-break: keep-all;
}


/*--------------------------------------------------------------
# ajax
--------------------------------------------------------------*/
#ajaxhtml {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-width: 100%;
    max-height: 90vh;
    background: #fff;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    z-index: 1041;
    box-shadow: 1px 1px 3px #dfdfdf;
}

#ajaxhtml .close {
    position: absolute;
    top: 5px;
    right: 25px;
    display: inline-block;
}

#ajaxhtml .cont {
    margin: 1rem 0;
    overflow-y: auto;
    max-height: 80vh;
    padding: 30px;
}

#ajaxhtml2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 790px;
    max-width: 96%;
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    z-index: 1041;
}

#ajaxhtml2 .close {
    position: absolute;
    top: 5px;
    right: 25px;
    display: inline-block;
}

#ajaxhtml2 .cont {
    margin: 1rem 0;
    overflow-y: auto;
    max-height: 80vh;
    padding: 30px;
}

#ajaxhtml3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 790px;
    max-width: 96%;
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    z-index: 1041;
}

#ajaxhtml3 .close {
    position: absolute;
    top: 5px;
    right: 25px;
    display: inline-block;
}

#ajaxhtml3 .cont {
    margin: 1rem 0;
    overflow-y: auto;
    max-height: 80vh;
    padding: 30px;
}




#ajaxblank {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 96%;
    height: auto;
    max-height: 90vh;
    z-index: 1042;
}

#ajaxblank .cont {
    margin: 0;
    padding: 0px;
}


#ajaxtable {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-width: 100%;
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    z-index: 1041;
    overflow-y: auto;
}

#ajaxtable .close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-block;
}

#ajaxtable .cont {
    margin: 1rem 0;
    overflow-y: auto;
    max-height: 80vh;
    padding: 30px;
}

@media only screen and (max-width:768px) {
    #ajaxhtml .cont {
        margin: 0.5rem 0;
        padding: 20px;
    }
}


@media only screen and (max-width:576px) {
    #ajaxhtml .cont {
        margin: 0.3rem 0;
        padding: 10px;
    }
}

#mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    z-index: 1041;
    backdrop-filter: blur(3px) brightness(80%) grayscale(90%);
    /*
	backdrop-filter: brightness(60%);
	backdrop-filter: contrast(40%);
	backdrop-filter: drop-shadow(4px 4px 10px blue);
	backdrop-filter: grayscale(30%);
	backdrop-filter: hue-rotate(120deg);
	backdrop-filter: invert(70%);
	backdrop-filter: opacity(20%);
	backdrop-filter: sepia(90%);
	backdrop-filter: saturate(80%);
	*/
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 50% !important;
    transform: translateY(-50%);

}

.transition {
    transition: all 0.3s ease;
}



/*--------------------------------------------------------------
# Ajax Modal Styles (Tailwind Integrated)
--------------------------------------------------------------*/
#mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
}

#ajaxhtml,
#ajaxhtml2,
#ajaxhtml3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 1001;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 98vw;
    max-height: 90vh;
    overflow-y: hidden;
    transition: all 0.3s ease-out;
}

#ajaxhtml .close,
#ajaxhtml2 .close,
#ajaxhtml3 .close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

#ajaxhtml .cont,
#ajaxhtml2 .cont,
#ajaxhtml3 .cont {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    #ajaxhtml {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    #ajaxhtml .cont {
        max-height: 100vh;
    }
}


/*--------------------------------------------------------------
# Preloader (Rainbow Wave)
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#preloader .rainbow-spinner {
    display: flex;
    gap: 3px;
    align-items: center;
}

#preloader .rainbow-spinner .dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: rainbow-wave 1.4s infinite ease-in-out both, rainbow-color 9.8s infinite linear both;
}

/* animation-delay: 파동 딜레이, 색상 딜레이(음수로 주어 미리 진행된 상태로 시작) */
#preloader .rainbow-spinner .dot:nth-child(7) {
    animation-delay: 0.6s, 0s;
}

/* 빨 시작 */
#preloader .rainbow-spinner .dot:nth-child(6) {
    animation-delay: 0.5s, -1.4s;
}

/* 주 시작 */
#preloader .rainbow-spinner .dot:nth-child(5) {
    animation-delay: 0.4s, -2.8s;
}

/* 노 시작 */
#preloader .rainbow-spinner .dot:nth-child(4) {
    animation-delay: 0.3s, -4.2s;
}

/* 초 시작 */
#preloader .rainbow-spinner .dot:nth-child(3) {
    animation-delay: 0.2s, -5.6s;
}

/* 파 시작 */
#preloader .rainbow-spinner .dot:nth-child(2) {
    animation-delay: 0.1s, -7.0s;
}

/* 남 시작 */
#preloader .rainbow-spinner .dot:nth-child(1) {
    animation-delay: 0s, -8.4s;
}

/* 보 시작 */
@keyframes rainbow-wave {

    0%,
    80%,
    100% {
        transform: scale(0.3) translateX(20px);
        opacity: 0.2;
    }

    40% {
        transform: scale(1.2) translateX(0);
        opacity: 1;
    }
}

@keyframes rainbow-color {

    0%,
    100% {
        background-color: #ef4444;
    }

    /* 빨 */
    14.28% {
        background-color: #f97316;
    }

    /* 주 */
    28.57% {
        background-color: #eab308;
    }

    /* 노 */
    42.85% {
        background-color: #22c55e;
    }

    /* 초 */
    57.14% {
        background-color: #3b82f6;
    }

    /* 파 */
    71.42% {
        background-color: #4f46e5;
    }

    /* 남 */
    85.71% {
        background-color: #a855f7;
    }

    /* 보 */
}


/*--------------------------------------------------------------
# sloading
--------------------------------------------------------------*/
#sloading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#sloading.hidden {
    display: none !important;
}

#sloading .rainbow-spinner {
    display: flex;
    gap: 3px;
    align-items: center;
}

#sloading .rainbow-spinner .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: srainbow-wave 1.4s infinite ease-in-out both, srainbow-color 9.8s infinite linear both;
}

/* animation-delay: 파동 딜레이, 색상 딜레이(음수로 주어 미리 진행된 상태로 시작) */
#sloading .rainbow-spinner .dot:nth-child(1) {
    animation-delay: 0s, 0s;
}

/* 빨 시작 */
#sloading .rainbow-spinner .dot:nth-child(2) {
    animation-delay: 0.15s, -1.4s;
}

/* 주 시작 */
#sloading .rainbow-spinner .dot:nth-child(3) {
    animation-delay: 0.3s, -2.8s;
}



/* 보 시작 */
@keyframes srainbow-wave {

    0%,
    80%,
    100% {
        transform: scale(0.3) translateX(20px);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.2) translateX(0);
        opacity: 1;
    }
}

@keyframes srainbow-color {

    0%,
    100% {
        background-color: #ef4444;
    }

    /* 빨 */
    14.28% {
        background-color: #f97316;
    }

    /* 주 */
    28.57% {
        background-color: #eab308;
    }

    /* 노 */
    42.85% {
        background-color: #22c55e;
    }

    /* 초 */
    57.14% {
        background-color: #3b82f6;
    }

    /* 파 */
    71.42% {
        background-color: #4f46e5;
    }

    /* 남 */
    85.71% {
        background-color: #a855f7;
    }

    /* 보 */
}


/*--------------------------------------------------------------
# 외부 컴포넌트 재 정의
--------------------------------------------------------------*/
.swal2-icon {
    width: 3em !important;
    height: 3em !important;
    border-width: 3px !important;
    line-height: 3em !important;
}

.swal2-icon .swal2-icon-content {
    font-size: 1.75em;
}

/* 3em 규격 전용 SweetAlert2 내부 아이콘 교정 스타일 */
.swal2-icon.swal2-success {
    border: 3px solid #a5dc86 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    height: 3px !important;
    background-color: #a5dc86 !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip {
    top: 1.6em !important;
    left: 0.45em !important;
    width: 1.1em !important;
}

.swal2-icon.swal2-success .swal2-success-line-long {
    top: 1.4em !important;
    right: 0.44em !important;
    width: 1.5em !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    display: none !important;
}

.swal2-icon.swal2-success .swal2-success-fix {
    display: none !important;
}

.swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
    display: none !important;
}

.swal2-icon.swal2-error {
    border-color: #f27474 !important;
}

.swal2-icon.swal2-error .swal2-x-mark {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    height: 3px !important;
    width: 1.6em !important;
    top: 1.35em !important;
    background-color: #f27474 !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left {
    left: 0.7em !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-right {
    right: 0.7em !important;
}

.swal2-icon.swal2-warning .swal2-icon-content,
.swal2-icon.swal2-info .swal2-icon-content,
.swal2-icon.swal2-question .swal2-icon-content {
    font-size: 1.8em !important;
    line-height: 1 !important;
}