/* to embed a font : https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


/* document --------------------------- */
*, *::after, *::before {
	box-sizing: border-box;
}

body, html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
	font-family: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    /* smoothing font */
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
    /* mouse drag none */
    /*-ms-user-select: none; */
    /*-moz-user-select: -moz-none;*/
    /*-khtml-user-select: none;*/
    /*-webkit-user-select: none;*/
    /*user-select: none;*/
}


/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
	clear: both;
  	margin: 0;
  	padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 700;
}


/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}


/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
	font-family: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
	cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
	padding: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}


/* link --------------------------- */
a {
    color: #222;
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
	background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:focus, a:active {
    color: #222;
	outline: 0;
    text-decoration: none;
}

:focus {
	outline: none;
}


/* misc --------------------------- */
[hidden] {
    /* add the correct display in IE 10 */
    display: none;
}


@media only screen and (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}



/* clearfix */
.clearfix {/*  IE 6,7 */ zoom: 1;}
.clearfix::before,
.clearfix::after {content: ''; display: table;}
.clearfix::after {clear: both;}

/* scroll */
/* ::-webkit-scrollbar {width: .5rem; height: .5rem;}
::-webkit-scrollbar-track {background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: #f0f0f0;} */

/* padding */
.pd-4 {padding: 0.25rem!important;}
.pd-8 {padding: 0.5rem!important;}
.pd-10 {padding: 0.625rem!important;}
.pd-16 {padding: 1rem!important;}
.pd-20 {padding: 1.25rem!important;}
.pd-40 {padding: 2.5rem!important;}
.pd-60 {padding: 3.75rem!important;}

.pd-t-4 {padding-top: 0.25rem!important;}
.pd-t-8 {padding-top: 0.5rem!important;}
.pd-t-10 {padding-top: 0.625rem!important;}
.pd-t-16 {padding-top: 1rem!important;}
.pd-t-20 {padding-top: 1.25rem!important;}
.pd-t-40 {padding-top: 2.5rem!important;}
.pd-t-60 {padding-top: 3.75rem!important;}

.pd-r-4 {padding-right: 0.25rem!important;}
.pd-r-8 {padding-right: 0.5rem!important;}
.pd-r-10 {padding-right: 0.625rem!important;}
.pd-r-16 {padding-right: 1rem!important;}
.pd-r-20 {padding-right: 1.25rem!important;}
.pd-r-40 {padding-right: 2.5rem!important;}
.pd-r-60 {padding-right: 3.75rem!important;}

.pd-b-4 {padding-bottom: 0.25rem!important;}
.pd-b-8 {padding-bottom: 0.5rem!important;}
.pd-b-10 {padding-bottom: 0.625rem!important;}
.pd-b-16 {padding-bottom: 1rem!important;}
.pd-b-20 {padding-bottom: 1.25rem!important;}
.pd-b-40 {padding-bottom: 2.5rem!important;}
.pd-b-60 {padding-bottom: 3.75rem!important;}

.pd-l-4 {padding-left: 0.25rem!important;}
.pd-l-8 {padding-left: 0.5rem!important;}
.pd-l-10 {padding-left: 0.625rem!important;}
.pd-l-16 {padding-left: 1rem!important;}
.pd-l-20 {padding-left: 1.25rem!important;}
.pd-l-40 {padding-left: 2.5rem!important;}
.pd-l-60 {padding-left: 3.75rem!important;}


/* margin */
.mg-4 {margin: 0.25rem!important;}
.mg-8 {margin: 0.5rem!important;}
.mg-10 {margin: 0.625rem!important;}
.mg-16 {margin: 1rem!important;}
.mg-20 {margin: 1.25rem!important;}
.mg-40 {margin: 2.5rem!important;}
.mg-60 {margin: 3.75rem!important;}

.mg-t-4 {margin-top: 0.25rem!important;}
.mg-t-8 {margin-top: 0.5rem!important;}
.mg-t-10 {margin-top: 0.625rem!important;}
.mg-t-16 {margin-top: 1rem!important;}
.mg-t-20 {margin-top: 1.25rem!important;}
.mg-t-40 {margin-top: 2.5rem!important;}
.mg-t-60 {margin-top: 3.75rem!important;}

.mg-r-4 {margin-right: 0.25rem!important;}
.mg-r-8 {margin-right: 0.5rem!important;}
.mg-r-10 {margin-right: 0.625rem!important;}
.mg-r-16 {margin-right: 1rem!important;}
.mg-r-20 {margin-right: 1.25rem!important;}
.mg-r-40 {margin-right: 2.5rem!important;}
.mg-r-60 {margin-right: 3.75rem!important;}

.mg-b-4 {margin-bottom: 0.25rem!important;}
.mg-b-8 {margin-bottom: 0.5rem!important;}
.mg-b-10 {margin-bottom: 0.625rem!important;}
.mg-b-16 {margin-bottom: 1rem!important;}
.mg-b-20 {margin-bottom: 1.25rem!important;}
.mg-b-40 {margin-bottom: 2.5rem!important;}
.mg-b-60 {margin-bottom: 3.75rem!important;}

.mg-l-4 {margin-left: 0.25rem!important;}
.mg-l-8 {margin-left: 0.5rem!important;}
.mg-l-10 {margin-left: 0.625rem!important;}
.mg-l-16 {margin-left: 1rem!important;}
.mg-l-20 {margin-left: 1.25rem!important;}
.mg-l-40 {margin-left: 2.5rem!important;}
.mg-l-60 {margin-left: 3.75rem!important;}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

.block {display: block;}
.inline-block {display: inline-block;}

/* font style */
.font12 {font-size: 0.75rem!important;}
.font14 {font-size: 0.875rem!important;}
.font16 {font-size: 1rem!important;}
.font18 {font-size: 1.125rem!important;}
.font20 {font-size: 1.25rem!important;}

.font300 {font-weight: 300!important;}
.font500 {font-weight: 500!important;}
.font700 {font-weight: 700!important;}

.align-left {text-align: left!important;}
.align-center {text-align: center!important;}
.align-right {text-align: right!important;}
.align-right td{text-align: right!important;}

.red {color: #d32f2f!important;}
.yellow {color: #a29684!important;}
.navy {color: #2d3f64!important;}
.blue {color: #006AD5!important;}
.green {color: #4caf50!important;}

/* icon - google material icon */
i.material-icons {font-family: 'Material Icons';}

/* select */
select {min-width: 4rem; height: 1.5rem; padding: 0 1rem 0 .25rem; border: 0.063rem solid #eeeff2; font-size: .75rem; color: #222; vertical-align: top; background-color: #fff; background-image: url(../img/select-arrow.png); background-repeat: no-repeat; background-position: right center;  background-size: 1rem; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}

/* input */
input[type='text'], input[type='password'], input[type='number'], input[type='date'], input[type='month'], input[type='datetime-local'] {min-width: 5rem; height: 1.5rem; line-height: 1.5rem; padding: 0 .25rem; border: 0.063rem solid #eeeff2; font-size: .75rem; color: #222; cursor: initial; vertical-align: top; background-color: #fff;}
input[type='text']:disabled, input[type='password']:disabled, input[type='number']:disabled, input[type='date']:disabled, input[type='month']:disabled, input[type='date-local']:disabled,
input[type='text']:read-only, input[type='password']:read-only, input[type='number']:read-only, input[type='date']:read-only, input[type='month']:read-only, input[type='date-local']:read-only {background-color: #eeeff2; color: #777;}
table input[type='text'], table input[type='password'], table input[type='number'], table input[type='date'], table input[type='month'], table input[type='datetime-local'] {height: 1.5rem; line-height: 1.5rem;}

.checkbox {display: inline-block;}
input[type='checkbox'] {display: none;}
input[type='checkbox'] + label {display: inline-flex; align-items: center; column-gap: 6px; margin-right: 10px;}
input[type='checkbox'] + label::before {content: ''; display: inline-block; width: .65rem; height: .65rem; border: 0.063rem solid #2d3f64; background-color: #fff; cursor: pointer; vertical-align: middle;}
input[type='checkbox']:checked + label::before {background-color: #2d3f64; background-image: url(../img/checkbox-check.png); background-repeat: no-repeat; background-position: center center; background-size: .5rem;}
input[type='checkbox'] + label span {margin-left: .25rem; font-size: .75rem; vertical-align: middle;}

input[type='checkbox'].lg + label::before {width: 1rem; height: 1rem;}
input[type='checkbox'].lg:checked + label::before {background-size: .75rem;}
input[type='checkbox'].lg + label span {margin-left: .4rem; font-size: .875rem;}

input[type='radio'] {display: none;}
input[type='radio'] + label {display: inline-flex; align-items: center; column-gap:0; margin-right: 10px;}
input[type='radio'] + label::before {content: ''; display: inline-block; width: .75rem; height: .75rem; border-radius: 100%; border: 0.063rem solid #2d3f64; background-color: #fff; cursor: pointer; vertical-align: middle;}
input[type='radio']:checked + label::before {background-image: url(../img/radio-check.png); background-repeat: no-repeat; background-position: center center; background-size: .5rem;}
input[type='radio'] + label span {margin-left: .25rem; font-size: .75rem; vertical-align: middle;}

input[type='radio'].lg + label::before {width: 1rem; height: 1rem;}
input[type='radio'].lg:checked + label::before {background-size: .75rem;}
input[type='radio'].lg + label span {margin-left: .4rem; font-size: .875rem;}

input[type='checkbox']:disabled + label::before, input[type='radio']:disabled + label::before {background-color: #eee; border-color: #dbdbdb; cursor: initial;}

.file-image input[type='file'] {display: none;}
.file-image img {cursor: pointer; transform: scale(1);}
.file-image img:hover {transition: transform .1s linear; transform: scale(1.05);}

.file-button input[type='file'] {display: none;}
.file-button label {display: inline-block; height: 1.5rem; line-height: 1.5rem; background-color: #2d3f64; font-size: .75rem; padding: 0 .5rem; border: 0; color: #fff; text-align: center; vertical-align: middle; cursor: pointer;}

textarea {min-height: 3rem; display: inline-block; padding: 0 .25rem; border: 0.063rem solid #eeeff2; font-size: .75rem; line-height: 1.25; color: #222; vertical-align: middle; background-color: #fff; cursor: initial;}
.textarea100 {width: calc(100% - 2.9rem);}

/* button */
.btn-wrap {text-align: right; margin-top: 1rem;}
.btn-wrap > button {min-width: 4rem;}

.btn-list > li {display: inline-block; height: 1.25rem; line-height: 1.25rem; font-size: .75rem; padding: 0 .5rem; border: 0; background-color: #eeeff2; text-align: center; vertical-align: middle; cursor: pointer; background-color: #2d3f64; color: #fff;}
.btn-list > li:not(:first-child) {margin-left: .063rem;}
.btn-list > li.red {background-color: #d32f2f; color: #fff!important;}
.btn-list > li.yellow {background-color: #f9a825; color: #fff!important;}
.btn-list > li.blue {background-color: #006AD5; color: #fff!important;}
.btn-list > li.green {background-color: #4caf50; color: #fff!important;}
.btn-list > li.gray {background-color: #888; color: #fff!important;}

button {height: 1.5rem; line-height: 1.5; font-size: .75rem; padding: 0 .5rem; border: 0; background-color: #eeeff2; text-align: center; vertical-align: middle; cursor: pointer;}
input[type='text'] + button {margin-left: .25rem;}

button.red {background-color: #d32f2f; color: #fff!important;}
button.yellow {background-color: #f9a825; color: #fff!important;}
button.navy {background-color: #2d3f64; color: #fff!important;}
button.blue {background-color: #006AD5; color: #fff!important;}
button.green {background-color: #4caf50; color: #fff!important;}
button.gray {background-color: #888; color: #fff!important;}
button.gold {background-color: #b08e60; color: #fff!important;}

button.navy-yellow {background-color: #2d3f64; color: yellow!important;}
button.navy-pink {background-color: #2d3f64; color: #ff0066!important;}

table button {height: 1.5rem; font-size: .75rem; background-color: #2d3f64; color: #fff!important;}
table button + button {margin-left: .25rem;}


/*editor 버튼 및 모달 스타일 수정*/
.note-btn {color: #333!important; height: initial;}


.note-modal.open{
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.note-modal-header button{
    background: #747474 !important;
    width: 24px;
    height: 24px;
}

.note-modal-footer{
    height: auto !important;
    text-align: right !important;
}

.note-modal-footer input{
    float: none !important;
}


/* iframe */
iframe {width: 100%;}

/* index */
.index {margin-bottom: 1rem;}
.index > li {display: inline-block; font-size: .875rem;}
.index > li:not(:first-child)::before {content: '>'; margin: 0 .5rem 0 .25rem;}
.index > li:last-child {font-weight: 700;}

/* sub page title */
.page-title {font-size: 1.125rem; font-weight: 700; margin-bottom: 1.25rem;}

/* tab menu */
.tab-menu {margin: 0 -1rem 1.25rem; padding: 0 1rem; border-bottom: .063rem solid #2d3f64;}
.tab-menu > li {position: relative; display: inline-block; min-width: 8rem; padding: .625rem; text-align: center; border: .063rem solid #eeeff2; border-bottom-color: #fff; background-color: #fff; font-size: .75rem; font-weight: 500; color: #cfd1d4; cursor: pointer;}
.tab-menu > li.active {color: #2d3f64; background-color: transparent; border-color: #2d3f64; border-bottom-color: #fafafa;}
.tab-menu > li.active::before {content: ''; width: 100%; height: .063rem; position: absolute; left: 0; bottom: -.125rem; background-color: #fafafa;}

/* search bar */
.search-bar {min-height: 2.375rem; margin-bottom: 2rem; padding: .25rem .5rem; background-color: #fff; border: 0.063rem solid #eeeff2;}
.search-bar + .search-bar {margin-top: -1.4rem;}
.search-bar > li {display: inline-block; height: 1.5rem; line-height: 1.5rem; padding: .125rem 0; font-size: .75rem; font-weight: 500; vertical-align: middle;}
.search-bar > li input[type="checkbox"] + label::before {position: relative; top: -0.04rem;}
.search-bar > li.search-btn {float: right;}
.search-bar > li:not(:last-child) {margin-right: .5rem;}
.search-bar > li:not(:first-child) > label {padding-left: .75rem;}

.icon-close {width: 1rem; height: 1rem; display: inline-block; background-image: url(../img/icon-close.svg); background-repeat: no-repeat; background-size: contain; background-position: center; vertical-align: text-bottom; cursor: pointer;}

/* page split */
.cont-left {display: inline-block; margin-left: -2px; padding-right: 1rem; vertical-align: top;}
.cont-right {display: inline-block; margin-right: -2px; vertical-align: top;}

/* table */
.table-desc {width: 100%; margin-bottom: .5rem; display: flex; align-items: flex-end; justify-content: space-between;}
.table-desc .left-desc > li {display: inline-block; vertical-align: middle; font-size: .75rem;}
.table-desc .left-desc > li:not(:first-child) > label {padding-left: .75rem;}
.table-desc .left-desc > li > select {min-width: auto; height: 1.5rem; padding: 0 .6rem 0 .2rem; font-size: .75rem; background-position: right center;}
.table-desc .right-desc {margin-left: auto; vertical-align: middle; font-size: .75rem;}
.table-desc .right-desc > li {display: inline-block;}
.table-desc .right-desc > li textarea {min-width: 25rem; margin-left: .25rem;}
.table-desc .right-desc.textarea100 {width: 100%; display: grid; grid-template-columns: 2.8rem calc(100% - 2.8rem); justify-content: space-between; align-items: center;}

table {position: relative; width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; vertical-align: top; border-right: .063rem solid #f1f2f3;}
table::before {content: ''; display: block; width: 100%; height: .125rem; background-color: #2d3f64; position: absolute; top: 0; left: 0; z-index: 10}
table tr th {height: 2.813rem; background-color: #F9F9FA; text-align: center; font-size: .75rem; vertical-align: middle; border-bottom: .063rem solid #f1f2f3; border-left: .063rem solid #f1f2f3; line-height: 1.4;}
table tr td {height: 2.813rem; padding: 0 .5rem; background-color: #fff; border-bottom: 0.063rem solid #f1f2f3; border-left: .063rem solid #f1f2f3; text-align: center; font-size: .75rem; line-height: 1.4; vertical-align: middle;}
table .bor-b-r {border-right: .125rem solid #2d3f64;}
table tr.bg-gray td, table tr.bg-gray th, table .bg-gray {background-color: #cfd1d4;}
table tfoot tr td {height: 2.813rem; padding: 0 .5rem; background-color: #F9F9FA; border-bottom: 0.063rem solid #f1f2f3; border-left: .063rem solid #f1f2f3; text-align: center; font-size: .75rem; line-height: 1.4; vertical-align: middle;}

.sticky-table table {position: relative; border-collapse: separate;}
.sticky-table table::before {content: none;}
.sticky-table table thead {position: sticky; top: -2.25rem;}
.sticky-table table thead tr:nth-child(1) th {border-top: .125rem solid #2d3f64;}

.table.scroll {width: 100%; overflow-x: auto;}
.table-scroll {overflow-x: auto; display: inline-block; vertical-align: top;}
.tbody-scroll {position: relative; overflow-y: auto; height: 18rem;}
.tbody-scroll table thead th {position: sticky; top: 0; border-top: 0;}

.table-fixed {margin-right: -.25rem; display: inline-block; vertical-align: top;}
.table-fixed .thumbnail > img {width: 2.5rem!important; height: auto!important; vertical-align: middle;}

p.sub-desc {width: 50%; margin-top: .75rem; margin-left: auto; text-align: right; font-size: .75rem; line-height: 1.6;}
p.sub-desc::before {content: '*'; margin-right: .25rem;}

.table + .table {margin-top: .5rem;}
.table.align-left table tr td {text-align: left;}

/* calendar */
.calendar-control {margin-bottom: .5rem; position: relative;}
.calendar-control button {position: absolute; right: 0;}

.calendar-control02 {margin-bottom: .5rem; position: relative; text-align: center;}
.calendar-control02 ul,
.calendar-control02 ul > li {display: flex; align-items: center; justify-content: center;}
.calendar-control02 ul > li + li {margin-left: 1rem;}
.calendar-control02 ul > li select {height: 2rem;}
.calendar-control02 ul > li span {font-size: .75rem; padding-left: .625rem;}
.calendar-control02 ul > li.prev,
.calendar-control02 ul > li.next {width: 1.75rem; height: 1.75rem; background-color: #2d3f64; cursor: pointer;}
.calendar-control02 ul > li.prev::before,
.calendar-control02 ul > li.next::before {content: ''; width: 1.75rem; height: 1.75rem; background-repeat: no-repeat; background-size: 1.25rem; background-position: center; filter: invert(1);}
.calendar-control02 ul > li.prev::before {background-image: url(../img/nav-prev.png);}
.calendar-control02 ul > li.next::before {background-image: url(../img/nav-next.png);}

.calendar table {table-layout: fixed;}
.calendar table tr td {position: relative; height: 6rem; padding: 1.75rem .875rem .875rem; background-color: #fff; font-size: .75rem; vertical-align: top;}
.calendar table tr td:not(:last-child) {border-right: 0.063rem solid #eeeff2;}
.calendar table tr td span.day {position: absolute; top: .75rem; right: .875rem;}
.calendar table tr td:first-child span.day, .calendar table tr td span.day.holi {color: #d32f2f;}
.calendar table tr td span.day.blur {color: rgba(34, 34, 34, 0.15);}
.calendar table tr td:hover {background-color: rgba(238, 239, 242, 0.05);}

/* thumbnail */
.thumbnail.sm > img {height: 2rem; vertical-align: middle;}
.thumbnail > img {height: 4rem; vertical-align: middle;}
.thumbnail.lg > img {height: 6rem; vertical-align: middle;}
.thumbnail.xlg > img {height: 8rem; vertical-align: middle;}
.thumbnail.xxlg > img {height: 10rem; vertical-align: middle;}

/* pagination */
.pagination {text-align: center; margin-top: .75rem;}
.pagination > ul > li {display: inline-block; width: 1.75rem; height: 1.75rem; line-height: 1.7rem; background-color: #fff; vertical-align: middle; font-size: .75rem; text-align: center; color: #757575; border: 0.063rem solid #eeeff2; cursor: pointer;}
.pagination > ul > li.first::before, .pagination > ul > li.last::before,
.pagination > ul > li.prev::before, .pagination > ul > li.next::before {content: ''; width: 100%; height: 100%; display: block; background-repeat: no-repeat; background-size: 1rem; background-position: center;}
.pagination > ul > li.first::before {background-image: url(../img/nav-first.png);}
.pagination > ul > li.last::before {background-image: url(../img/nav-last.png);}
.pagination > ul > li.prev::before {background-image: url(../img/nav-prev.png);}
.pagination > ul > li.next::before {background-image: url(../img/nav-next.png);}
.pagination > ul > li.active {background-color: #2d3f64; color: #fff;}
.pagination > ul > li.disabled {pointer-events: none; opacity: 0.6;}

.prev-day, .next-day {width: 1.5rem; height: 1.5rem; background-color: #fff; border: 0.063rem solid #eeeff2; cursor: pointer; background-repeat: no-repeat; background-size: 1rem; background-position: center;}
.prev-day {background-image: url(../img/nav-prev.png); margin-right: -.5rem;}
.next-day {background-image: url(../img/nav-next.png);}

/* display grid */
.display-grid {display: grid; grid-gap: 1rem;}
.display-grid + * {margin-top: 1rem;}

.grid-col-6 {grid-template-columns: repeat(6, 1fr);}
.grid-col-5 {grid-template-columns: repeat(5, 1fr);}
.grid-col-4 {grid-template-columns: repeat(4, 1fr);}
.grid-col-3 {grid-template-columns: repeat(3, 1fr);}
.grid-col-2 {grid-template-columns: repeat(2, 1fr);}
.grid-col-1 {grid-template-columns: repeat(1, 1fr);}

.cont-box {padding: 1rem; background-color: #fff; box-shadow: 0 .2rem .5rem rgba(47,60,74,.04), 0 .2rem .5rem rgba(47,60,74,.04);}
.cont-box h4 {margin-bottom: 1rem; font-size: .875rem; font-weight: 700; color: #222;}
.cont-box p {font-size: .75rem; line-height: 1.6;}
.cont-box iframe {width: 100%;}
.cont-box p + * {margin-top: .75rem;}
.cont-box img {width: 100%;}
.cont-box .table table tr th {padding: .5rem; font-size: .75rem;}
.cont-box .table table tr td {padding: .5rem; font-size: .75rem;}
.cont-box .search-bar {margin-bottom: 1rem; border: 0; padding: 0;}

.cont-wrap + .cont-wrap {margin-top: 2rem;}
.cont-wrap h4 {margin-bottom: 1rem; font-size: .875rem; font-weight: 700; color: #222;}
.cont-wrap p {font-size: .75rem; line-height: 1.6;}
.cont-wrap p + * {margin-top: .75rem;}
.cont-wrap img {width: 100%;}
.cont-wrap .table table tr th {padding: .5rem; font-size: .75rem;}
.cont-wrap .table table tr td {padding: .5rem; font-size: .75rem;}
.cont-wrap .search-bar {margin-bottom: 1rem;}

/* etc */
.text-over-cut {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;}

.multi-select {position: relative; min-width: 8rem;}
.select-text {height: 1.5rem; padding: 0 1rem 0 .25rem; border: 0.063rem solid #eeeff2; font-size: .75rem; color: #222; vertical-align: top; background-color: #fff; background-image: url(../img/select-arrow.png); background-repeat: no-repeat; background-position: right center;  background-size: 1rem;}
.options {display: none; padding: .5rem; border: 1px solid var(--gray02); position: absolute; background: var(--white); z-index: 1; width: 100%; top: 1.5rem; background-color: #fff; border: 0.063rem solid #eeeff2;}
.options.active {display: flex; flex-flow: column; row-gap: .25rem;}
.options input[type="checkbox"] + label {display: flex; align-items: center; column-gap: .25rem; line-height: 1.2;}
.options input[type='checkbox'] + label + input[type='checkbox'] + label {margin-left: 0;}

table > tbody >  tr:not(:nth-child(1)) > td .multi-select {display: none;}

.table_wrap tr > th{
    line-height: 45px !important;
}

.table_wrap tr > td{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 180px !important;
    width: 100% !important;
}

.table_wrap tr > td > select, .table_wrap tr > td > input{
    width: 100%;
}

.table_wrap tr > td > button{
    white-space: nowrap;
}


/*인풋 number 스핀 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


/* 배너 스타일*/
.banner{
    margin-bottom: 2rem;
    padding: 12px;
    background-color: #fff;
    border: 1px solid #eeeff2;
}
.banner h4{
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.banner h4 span{
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
}


.banner .banner_tit{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 12px;
}

.banner .banner_img{
    width: 200px;
    height: auto;
    aspect-ratio: 1/1.25;
}

.banner .banner_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;

}