@charset "UTF-8";


:root {
    --font-icon: "bootstrap-icons";

    --form-color01: #DEE2E6;
    --form-color02: #F5F8FF;
    --form-color03: #F8F8FB;

    --bg-color-base: #E3E8EE;
    --bg-color-base-hover: #dfe5ec;
    --border-line-base: #DEE1E8;

    --grey-color-0: #ffffff;
    --grey-color-5: #f4f5f6;
    --grey-color-10: #e6e8ea;
    --grey-color-20: #cdd1d5;
    --grey-color-30: #b1b8be;
    --grey-color-40: #8a949e;
    --grey-color-50: #6d7882;
    --grey-color-60: #58616a;
    --grey-color-70: #464c53;
    --grey-color-80: #33363d;
    --grey-color-90: #1e2124;
    --grey-color-95: #131416;
    --grey-color-100: #000000;


}
/********************************************
common
********************************************/
html, body {min-width: 320px;height: 100%;font-family: var(--font-type01), sans-serif;font-size: 14px;letter-spacing: -.5px;background-color: #f0f1f6;overflow-y: hidden;}
/* skip-nav */
.skip-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1055; }
.skip-nav ul, .skip-nav li { margin: 0; padding: 0; list-style-type: none; }
.skip-nav a { display: block; position: absolute; top: -9999px; left: 0; width: 100%; height: 26px; line-height: 18px; text-align: center; background: #333; color: #fff; text-decoration: none; font-size: 12px}
.skip-nav a:focus, .skip-nav a:active { top: 0; padding: 4px 0; font-weight: 600}
ul, dl { margin-bottom: 0; padding-left: 0; }
li { list-style: none; }
a, button { transition: 0.5s; }
a { color: #1d1d1d; text-decoration: inherit}
a:hover, a:focus { color: var(--main-color01); font-weight: 700; transition: all 0.3s ease-out; cursor: pointer; }
.dropdown .dropdown-menu { padding: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px; }
a:hover, a:focus, .sub-container:focus { outline: none; }
/* *:focus, *:focus-visible {
    outline-offset: -1px;
    outline: 3px dashed #0fd9dd;
  } */
button:focus, button:focus-visible, .form-control:focus, .form-control:focus-visible, .form-select:focus, .form-select:focus-visible { outline-offset: -1px; outline: 3px dashed #86b7fe; }

/* scroll */
::-webkit-scrollbar { width: 6px; background-color: #f1f1f1;}
::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 50px; border: 1px solid rgb(241, 241, 241);}
::-webkit-scrollbar-thumb:hover { background-color: var(--main-color01); }


/********************************************
components
********************************************/
/* Title */
[class^="tit0"] { margin-bottom: 10px; }
[class^="tit0"] + [class^="tit0"] { margin-top: 0; }
.tit03 {position: relative;font-size: 16px;padding-left: 18px;font-family: var(--font-type02);font-weight: 700;margin-top: 50px;}
.tit03:after, .tit03:before {content: '';position: absolute;top: 50%;left: 0;transform: translateY(-50%);display: block;width: 12px;height: 12px;border-radius: 7px;}
.tit03>small { padding-left: 6px; color: var( --text-body-sub); }
.tit03:after {background-color: #F6F8FA;width: 6px;height: 6px;left: 3px;}
.tit03:before {background: var(--point-color-grd);left: 0;}
.tit03 + .tabs-style01 { margin-top: 20px; }
.tit03:first-child { margin-top: 0; }
.tit04 { color: var(--main-color01); font-size: 17px; font-weight: 700; margin-top: 40px; }
.tit05 { color: var(--point-color01); margin-top: 20px; font-size: 15px; font-weight: 700; }
.tit-type01 { display: flex; align-items: flex-end; font-family: var(--font-type01); font-weight: 500; color: #000; margin: 20px 0 10px; }
.tit-type01 .icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 20px; background: var(--main-color01); }

/* text */
.text-primary {color: var(--main-color01) !important;}


/* button */
.btn {padding: 6px;line-height: 1;--bs-btn-border-radius: var(--bs-border-radius-sm);white-space: nowrap;}
.btn:hover, .btn:focus { color: var(--bs-btn-hover-color); background-color: transparent; border-color: transparent; }
.btn-primary {background-color: var(--main-color01);border-color: var(--main-color01-hover);}
.btn-primary:hover, .btn-primary:focus, .btn-primary:focus-visible,:not(.btn-check)+.btn-primary:active, .btn.btn-primary:first-child:active { background-color: var(--main-color01-hover); border-color: var(--main-color01-hover); }
.btn-secondary { border-color: var(--main-color02-border); background-color: var(--main-color02); color: #fff}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:focus-visible,:not(.btn-check)+.btn-secondary:active, .btn.btn-secondary:first-child:active { background-color: var(--main-color02-hover); border-color: var(--main-color02-border); color: #fff; }
.btn-outline-primary { background-color: #fff; border-color: var(--main-color01); color: var(--main-color01); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:focus-visible, .btn-outline-primary:active,:not(.btn-check)+.btn-outline-primary:active, .btn.btn-outline-primary:first-child:active { background-color: var(--main-color01); border-color: var(--main-color01); }
.btn-outline-secondary { background-color: #fff; border-color: var(--main-color02); color: var(--main-color02); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:focus-visible, .btn-outline-secondary:active,:not(.btn-check)+.btn-outline-secondary:active, .btn.btn-outline-secondary:first-child:active { background-color: var(--main-color02); border-color: var(--main-color02); }
.btn.btn-primary.disabled, .btn.btn-primary:disabled, fieldset:disabled .btn.btn-primary { background-color: var(--main-color01); border-color: var(--main-color01-hover); }
.btn.btn-outline-primary.disabled, .btn.btn-outline-primary:disabled, fieldset:disabled .btn.btn-outline-primary { border-color: var(--main-color01); color: var(--main-color01); }
.btn.btn-secondary.disabled, .btn.btn-secondary:disabled, fieldset:disabled .btn.btn-secondary { background-color: var(--main-color02); border-color: var(--main-color02)}
.btn.btn-outline-secondary.disabled, .btn.btn-outline-secondary:disabled, fieldset:disabled .btn.btn-outline-secondary {border-color: var(--grey-color-40);color: var(--main-color02);}
.btn-light { color: var( --grey-color-80); border-color: var( --grey-color-50); }
.btn-light:hover, .btn-light:focus, .btn-light:focus-visible,:not(.btn-check)+.btn-light:active { background-color: var( --grey-color-10); border-color: var( --grey-color-50); color: var( --grey-color-70)}
.btn-guide { background: transparent; border: none; color: #888; font-size: 18px; }


/* list */
/* list-style */
[class*="list-style0"] { margin: 5px 0; padding-left: 5px; }
ul[class*="list-style0"] { list-style: none; }
ul[class*="list-style0"] li, ol[class*="list-style0"] li { color: var( --text-body-sub); }
ul.list-style01 { margin-bottom: 30px; }
ul.list-style01 > li { position: relative; padding-left: 12px; }
ul.list-style01 > li::after { content: ''; position: absolute; top: 10px; left: 0; display: block; width: 4px; height: 4px; border-radius: 3px; background-color: #ccc; }
ul.list-style01 > li > ul, ul.list-style01 > li > p { margin-bottom: 4px; }
ul.list-style02 { margin-bottom: 20px; }
ul.list-style02 > li { position: relative; padding-left: 13px; }
ul.list-style02 > li::after { content: ''; position: absolute; top: 11px; left: 0; display: block; width: 6px; height: 2px; border-radius: 2px; background: #ccc; }
ol.list-style01 { list-style: decimal-leading-zero; padding-left: 28px; }
ol.list-style01 > li { position: relative; list-style: inherit; }
ol.list-style02 { list-style: hangul; padding-left: 25px; }
ol.list-style02 > li { list-style: inherit; }
ol.list-style01 li, ol.list-style02 li { padding-left: 8px; }
ol.list-style01 li::marker, ol.list-style02 li::marker { font-family: var(--font-type02); font-size: 15px; font-weight: 700; }
ol.list-style02 li::marker { color: var(--main-color02)}

/* list-box01 */
.list-box01 { margin-right: -5px; margin-left: -5px; padding-left: 0; list-style: none; gap: 10px 0; }
.list-box01.row { margin-right: -5px; margin-left: -5px; }
.list-box01 [class^="col-"] { padding-left: 5px; padding-right: 5px; }
.list-box01 > li { position: relative; }
.list-box01 > li .box-inner {display: flex;justify-content: center;align-items: center;height: 100%;min-height: 70px;padding: 0 20px;background: #fff;border: 1px solid var(--border-line-base);border-radius: 5px;color: var( --text-body-sub);}
.list-box01 > li .box-inner > .txt { word-break: keep-all; text-align: center; font-size: 16px; line-height: 1.3; }
.list-box01 > li > a.box-inner { text-decoration: none; }
.list-box01 > li > a.box-inner:hover, .list-box01 > li > a.box-inner:focus { background-color: var(--main-color01); border-color: var(--main-color01); }
.list-box01 > li > a.box-inner:hover .txt, .list-box01 > li > a.box-inner:focus .txt { color: #fff; }

/* list-box02 */
.list-box02 { display: flex; padding-left: 0; list-style: none; counter-reset: zeroCounter 0; gap: 10px 0; flex-wrap: wrap; }
.list-box02.row { margin-right: -5px; margin-left: -5px; }
.list-box02 [class^="col-"] { padding-left: 5px; padding-right: 5px; }
.list-box02 > li { width: 100%; counter-increment: zeroCounter 1; content: counter(zeroCounter); }
.list-box02 > li .box-inner {position: relative;height: 100%;min-height: 50px;padding: 10px 10px 10px 45px;background: var(--grey-color-5);border-radius: 5px;color: var( --text-body-sub);word-break: keep-all;}
.list-box02 > li .box-inner:after {content: counter(zeroCounter, decimal-leading-zero);position: absolute;left: 10px;top: 10px;display: flex;align-items: center;justify-content: center;width: 25px;height: 25px;border-radius: 20px;background: var(--main-color01);color: #fff;font-family: var(--font-type02);font-weight: 600;font-size: 11px;}
.list-box02 > li .box-inner > .form-group {display: flex;flex-wrap: wrap;width: 100%;align-items: flex-start;}
.list-box02 > li .box-inner > .form-group:last-child {margin-bottom: 0;}
.list-box02 > li .box-inner > .form-group > label {position:relative;display: inline-flex;flex:0 0 100%;align-items: flex-start;}
.list-box02 > li .box-inner > .form-group:not(.form-check) > label::before {display: inline-flex;align-items: center;height: 20px;}

@media (min-width:992px) {
  .list-box02 > li .box-inner { padding: 15px 20px 15px 55px; }
  .list-box02 > li .box-inner:after { left: 15px; top: 13px; }
}

/* tab-style */
.tabs-style01.nav-tabs {margin-bottom: 6px;padding: 3px 3px 0;border-bottom: 1px solid var(--border-line-base);}
.tabs-style01.nav-tabs .nav-link {position: relative;min-width: 50px;margin: 1px 4px 0;padding: 9px 10px 10px;color: #949494;line-height: 1;letter-spacing: -.05em;transition: 0.3s all ease-in-out;background: var(--bg-color-base);border-bottom: none;font-family: var(--font-type02);}
.tabs-style01.nav-tabs .nav-link:first-child { margin-left: 0; }
.tabs-style01.nav-tabs .nav-link:hover, .tabs-style01.nav-tabs .nav-link:focus {color: var(--text-body-sub-hover);background: var(--bg-color-base-hover);}
.tabs-style01.nav-tabs .nav-link.active:hover, .tabs-style01.nav-tabs .nav-link.active:focus { background: #fff; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background-color: #fff;color: #000;font-weight: 500;padding-left: 20px;}
.nav-tabs .nav-item.show .nav-link:hover, .nav-tabs .nav-item.show .nav-link:focus { color: #fff; background: var( --grey-color-20); }
.tabs-style01.nav-tabs .nav-item.show .nav-link::before, .tabs-style01.nav-tabs .nav-link.active::before {content: '';display: inline-block;position: absolute;top: 50%;left: 8px;transform: translateY(-50%);width: 6px;height: 6px;background: var(--point-color02);border-radius: 60px;line-height: 1;}
.tabs-style01.nav-tabs .nav-link[aria-disabled="true"] { opacity: 0.8; }
.tabs-style02.nav-pills { margin-bottom: 6px; }
.tabs-style02.nav-pills .nav-link {position: relative;margin: 0 4px;padding: 4px 10px;border: 1px solid var(--bs-border-color);border-radius: 50px;color: #888;overflow: hidden;box-sizing: border-box;z-index: 1;}
.tabs-style02.nav-pills .nav-link:hover, .tabs-style02.nav-pills .nav-link:focus {background: #fff;border: 1px solid var(--point-color01);color: var(--point-color01);font-weight: 500;}
.tabs-style02.nav-pills .nav-link.active, .tabs-style02.nav-pills .show>.nav-link {background: var(--point-color01);border: 1px solid var(--point-color01);color: #fff;font-weight: 500;}
.tabs-style02.nav-pills .nav-link:first-child { margin-left: 0; }
.tabs-style02.nav-pills .nav-link[aria-disabled="true"] { opacity: 0.8; }

/* info-text */
.info-text { position: relative; margin: 6px 0; padding-left: 26px; color: var( --text-body-sub); font-size: 15px; }
.info-text::after, .info-text::before {position: absolute;top: 2px;display: block;}
.info-text::after { content: "\f269"; left: 2px; font-family: var(--font-icon); color: #fff; font-weight: 400; line-height: 20px;  }
.info-text::before { content: ""; left: 0; width: 18px; height: 18px; font-family: var(--font-icon); border-radius: 50px; background-color: var(--point-color01); }
.info-text.text-danger::before { background-color: var(--bs-danger); }

/* Table */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch}
.table-responsive th, .table-responsive td {word-break: keep-all;}
.table {position: relative;width: 100%;margin-bottom: 10px;background-color: #fff;border-bottom: 1px solid #c5c9d6;border-top: 1px solid #1d1d1d;font-size: 16px;line-height: 24px;border-color: var(--bs-border-color);}
.table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.table, .table th { text-align: center}
.table th, .table td {padding: 6px 10px;color: #222;border-top: 1px solid var(--bs-border-color);border-left: 1px solid var(--bs-border-color);}
.table th:first-child { border-left: none; }
.table thead th {border-top: 2px solid var(--main-color01);background: var(--main-color01-light);font-weight: 700;line-height: 1.2;}
.table tbody th {background-color: #f4f9ff;font-weight: 500;color: var(--main-color01);}
.table tfoot th { background-color: #dbe4ef; font-weight: 500; color: #333; }
.table tfoot td { background-color: #dbe4ef; color: #333; }

/* table-line */
.table tr td { border-left: 1px solid var(--bs-border-color); border-right: none; }
.table>thead>tr>th:first-child, .table>tbody>tr>th:first-child, .table>tbody>tr>td:first-child { border-left: none; }
.table thead th:last-child { border-right: none; }

/* table-collapse */
th[rowspan], th[colspan], td[rowspan], td[colspan] { border-right: 1px solid #c5c9d6}
th[rowspan]:last-child, th[colspan]:last-child, td[rowspan]:last-child, td[colspan]:last-child { border-right: 0; }

/* pagination */
.pagination { gap: 0 4px; justify-content: center; }
.pagination .page-item .page-link { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 10px; background-color: transparent; border-color: transparent; font-size: 15px; color: var(--text-body-sub); line-height: 1; transition: all .3s ease-out; }
.pagination .page-item .page-link:disabled .bi { opacity: .5}
.pagination .page-item.active .page-link { color: #fff; font-weight: 700; background: var(--main-color01); box-shadow: 0 3px 3px rgb(32 32 32 / 30%); }
.pagination .page-item { display: none; }
.pagination .page-item[class*="go-"], .pagination .page-item.active, .pagination .page-item:nth-last-of-type(3) { display: block; }
.pagination .page-item[class*="go-"] .page-link:hover, .pagination .page-item[class*="go-"] .page-link:focus { background-color: var(--grey-color-10); color: var(--text-body-sub-hover); }
@media(min-width:768px) {
  .pagination .page-item { display: block; }
  .pagination .page-item .page-link:hover, .pagination .page-item .page-link:focus { color: #fff; font-weight: 500; background-color: var(--main-color01-hover); }
  .pagination .page-item:nth-last-of-type(3) .page-link::before { display: none; }
}

/* accordian */
.accordion { margin-top: 10px; }
.accordion .qa {margin-right: 10px;color: #222;}
.accordion-button {  padding: 13px 18px; }
.accordion-button:not(.collapsed) .qa { color: var(--main-color01); }
.accordion-style01 .accordion-button:not(.collapsed) {padding: 12px 18px;background-color: var(--point-color01-light);border: 1px solid var(--main-color01);font-weight: 700;color: var(--point-color01-text);}
.accordion-style01 .accordion-button dl > dt, .accordion-button dl > dd { display: inline-block; }
.accordion-style01 .accordion-button dl > dt { position: relative; color: var(--main-color01); font-weight: 700; padding-left: 10px; margin-left: 10px; }
.accordion-style01 .accordion-button dl > dt:first-child { padding-left: 0; margin-left: 0; }
.accordion-style01 .accordion-button dl > dt:after { content: ''; position: absolute; top: 7px; left: 0; display: block; width: 1px; height: 10px; background: #afafaf; }
.accordion-style01 .accordion-button dl > dt:first-child:after { display: none; }
.accordion-style01 .accordion-button dl > dd { margin-left: 5px; margin-bottom: 0; }
.accordion-style02 .accordion-item:first-of-type>.accordion-header .accordion-button {border-radius: 0;border-top: 1px solid var(--main-color01);}
.accordion-style02 .accordion-button { background: #fff; }
.accordion-style02 .accordion-button:hover, .accordion-style02 .accordion-button:focus {background: var(--main-color01-light);}
.accordion-style02 .accordion-button span { margin-right: 10px; color: var(--text-body-sub-light); font-weight: 700; }

/* size-sm */
.form-control, .form-select {height: 28px;padding: 3px 8px;color: #343a40;font-size: 14px;border-radius: var(--bs-border-radius-sm);}
.input-group > .btn, .input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text { padding: 3px 8px; font-size: 13px; border-radius: var(--bs-border-radius-sm); }
.input-group > .btn .bi { font-size: 13px; }
.input-group > .btn .bi::before { font-weight: 700 !important; }

/* form */
.input-group { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > input { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); }
.form-control:required, [class*="form-"].req { position: relative; border: 1px solid var(--bs-danger); }
[class*="form-"]:disabled.req {border: 1px solid rgba(239, 85, 92, 0.5)}
.form-control:disabled {color: #888;}
.form-select:disabled + .ts-wrapper.form-select, .form-control:disabled, .form-control[readonly] {background-color: #e9ecef;border-color: #dadcdd;opacity: .8;}
.form-select:disabled.req + .ts-wrapper.form-select, .form-control:disabled.req, .form-control[readonly] {border: 1px solid rgba(239, 85, 92, 0.5)}
.ts-wrapper.form-select { height: 28px; }
.form-control.addr { position: relative; }
.addr-btn { border: none; background: transparent; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
.addr-btn i { font-size: 20px; }

/* form-check */
.form-check { margin: 0; padding-left: 0; }
.form-check:not(.form-switch) input { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
.form-check input:focus + label:after { border: 2px solid var(--main-color01); }
.form-check label {position: relative;padding-left: 22px;margin: 0 25px 0 0;}
.form-check-input:disabled~.form-check-label {color:#343a40;opacity: .8 !important;}
.form-check label.sr-only { width: 18px; height: 24px; margin: 0; padding-left: 20px; }
.form-check label:after { content: ''; position: absolute; left: 0; top: 50%; display: block; width: 17px; height: 17px; transform: translateY(-50%); background-color: #fff; border: 1px solid var( --grey-color-20); }
.form-check input:disabled + label:after { background-color: var(--grey-color02)}
.form-check input:checked:disabled + label:before { background-color: #8288b4; border-radius: 5px; }
.form-check label:before {z-index: 1;position: absolute;top: 50%;transform: translateY(-50%);}
.form-check [type="checkbox"] + label:after { border-radius: 5px; }
.form-check [type="checkbox"]:checked + label:after { background-color: var(--main-color01); border: none; }
.form-check [type="checkbox"]:checked + label:before {content: '\F26E';left: 0;font-family: var(--font-icon);color: #fff;font-size: 18px;line-height: 1;}
.form-check [type="checkbox"]:checked:disabled + label:after { border-color: #8288b4; background-color: #8288b4; }
.form-check [type="radio"] + label:after { border-radius: 22px; }
.form-check [type="radio"]:checked + label:after { border-color: var(--main-color01); }
.form-check [type="radio"]:checked + label:before { content: ''; left: 4px; display: block; width: 9px; height: 9px; border-radius: 11px; background-color: var(--main-color01); }
.form-check [type="radio"]:checked:disabled + label:after { border-color: #8288b4; }
select { appearance: none; }

/* check-box */
.check-box { display: flex; flex-wrap: wrap; margin-bottom: 20px; gap: 20px; }
.check-box .item { position: relative; display: flex; flex: 0 0 calc(50% - 10px); height: 110px; text-align: center; padding: 10px; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; border: 1px solid transparent; background: var(--grey-color04); transition: 0.3s}
.check-box .item:hover, .check-box .item:focus { border-color: var(--grey-color05); }
.check-box .item.checked { background: #fff; border: 2px solid var(--main-color01); }
.check-box .item.checked:after { content: '\F26B'; position: absolute; top: 10px; right: 10px; font-size: 20px; line-height: 1; height: 20px; border-radius: 20px; font-family: var(--font-icon); color: var(--main-color01); background: #f5f8ff; }
.check-box .item .img { max-width: 40px; }
.check-box .item .tit { margin-top: 5px; }
@media (min-width:992px) {
  .check-box .item { flex: 0 0 auto; min-width: 180px; }
}

/* ts-control */
.ts-wrapper { min-height: 28px; }
.b-con-box .ts-wrapper.multi .ts-control>div { margin: 0 3px 0 0; padding: 0; line-height: 1.5; }
.ts-wrapper.multi.has-items .ts-control {padding: calc(0.25rem - 6px) 0.25rem;}
.ts-wrapper .ts-control > input { min-width: 0 !important; }
.ts-wrapper.input-hidden .ts-control > div.item { white-space: nowrap; overflow: hidden; }


.ts-control {/* min-height: 28px; */min-height: 26px;padding: 0.25em 0.25rem;font-size: 1rem;border-radius: var(--bs-border-radius-sm);}
.ts-control .item {font-size: 1rem;line-height:1}
.disabled .ts-control {background-color: transparent;opacity: 08;}

.input-group .ts-control { height: 28px; padding: 3px 8px; font-size: 13px; border-radius: var(--bs-border-radius-sm); }
.input-group .ts-wrapper.form-select {height: 28px;min-height: 28px; }
.input-group .ts-control{ height: 26px;min-height: 26px;line-height: 1;padding: 3px 8px; font-size: 13px; border-radius: var(--bs-border-radius-sm); }
.input-group .ts-wrapper.form-select {border-top-left-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important;}


/* form-table */
.form-table {position: relative;margin-bottom: 10px;background: #fff;border-top: 2px solid var(--main-color01);}
.form-table:after, .form-table:before, .form-table > .row:after {content: '';position: absolute;display: block;background: #cad4e7;z-index: 2;}
.form-table:after {width: 100%;height: 1px;top: 0;right: 0;}
.form-table:before {width: 1px;height: 100%;top: 0;left: 0;display: none;}
.form-table > .row:after { width: 100%; height: 1px; bottom: 0; }
.form-table .row {margin: 0;border-top: 1px solid var(--border-line-base);}
.form-table .row + .row { border-top: none; }
.form-table .row > [class*="col-"] {display: flex;flex-direction: row;align-items: center;padding: 0;border: 1px solid #cad4e7;border-left: none;margin-top: -1px;}
.form-table .b-title-box {position: relative;display: flex;align-items: center;height: 100%;flex-wrap: wrap;flex: 0 0 110px;max-width: 110px;min-height: 34px;padding: 0 10px 0 2px;box-sizing: border-box;background: var(--main-color01-light);font-weight: 700;line-height: 1.2;justify-content: flex-end;text-align: right;}
.form-table .b-title-box label { margin-bottom: 0; font-weight: 500; word-break: keep-all; display: inline-flex; align-items: center; gap: 1px; }
.form-table .b-title-box label.req::before, label.req::before, th.req nobr::before { content: "필수 입력 사항입니다."; display: inline-block; text-indent: -9999px; width: 10px; height: 10px; margin-right: 2px; font-size: 0; background: url(/common/images/req.png) no-repeat left center; }
.form-table .b-con-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 110px); flex-grow: 1; padding: 3px 4px;  }
.form-table .b-con-box .row {flex-grow: 1;border-left: 1px solid var(--main-color01-light);}
.form-table .b-con-box .img-thumb.stamp { position: relative; width: 120px; height: 0; min-height: 120px; overflow: hidden; background-color: #fff;border:1px solid #ddd }
.form-table .b-con-box .img-thumb.stamp.no-stamp {background: #f4f4f4 url(/common/images/no-image.png) no-repeat center;}
.form-table .b-con-box .img-thumb img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }

/* search-box */
.search-box { position: relative; margin-bottom: 10px; background-color: var(--main-color01); }
.search-box .form-table .row {border-top: 1px solid #cad4e7;margin: 0;}
.search-box .form-table .row > [class*="col-"] {border: 1px solid #cad4e7;border-left: none;border-right: none;}
.search-box .form-table .b-title-box::before { content: ''; display: block; }
.search-box .form-table .b-title-box label { color: var(--main-color02)}
.search-box .btn-outline-secondary {border-color: var(--main-color01);background-color: var(--main-color01);color: #fff;}
.search-box .btn-outline-secondary:hover, .btn-outline-secondary:focus, .search-box .btn-outline-secondary:focus-visible, .search-box:not(.btn-check)+.btn-outline-secondary:active {background-color: var(--main-color02-hover);border-color: var(--main-color02-hover);}
.search-box .form-select:disabled { background-color: var(--grey-color-10); color: var(--grey-color-40); }

.form-table .b-con-box .row {border: none;flex: 1;--bs-gutter-x: 0.25rem;--bs-gutter-y: 0.25rem;margin: inherit;margin-right: calc(-.5 * var(--bs-gutter-x));margin-left: calc(-.5 * var(--bs-gutter-x));align-items: center;}
.form-table .b-con-box .row > [class*="col-"] {border: none;padding: inherit;padding-right: calc(var(--bs-gutter-x) * .5);padding-left: calc(var(--bs-gutter-x) * .5);}

/* popover */
.popover-box { display: inline-block; font-weight: 400; }
.popover-box .popover-btn { position: relative; background-color: transparent; padding: 0 3px; border: 0; color: var(--main-color02); }
.popover-box .popover-btn:hover, .popover-box .popover-btn:focus { opacity: 1; }
.popover-box .popover-txt { display: none; position: absolute; min-width: 200px; margin-top: 4px; padding: 6px; border-radius: 5px; border: 2px solid var(--main-color02); background-color: #fff; color: var(--text-body-sub);  font-weight: 500; word-break: keep-all; z-index: 10; }
.popover-box .popover-txt > ul { margin: 0; text-align: left; }
.popover-box .popover-txt > ul > li { margin: 0; }
.popover-box.active .popover-btn { color: var(--main-color01-hover); opacity: 1; }
.popover-box.active .popover-btn::after { content: ""; position: absolute; width: 8px; height: 8px; border-top: 2px solid var(--main-color02); border-left: 2px solid var(--main-color02); background-color: #fff; bottom: -8px; left: 50%; transform: rotate(45deg) translateX(-50%); transform-origin: left; z-index: 20; }
.popover-box.active .popover-txt { display: block; }

/* form-file */
.form-file { display: flex; justify-content: space-between; border: 1px solid var(--border-line-base); overflow: hidden; cursor: pointer; }
.form-file.active { background-color: #fff; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.form-file > label { display: inline-flex; width: 100%; margin: 0; font-weight: 400; cursor: pointer; }
.form-file > label .txt { padding: 8px 14px 8px 13px; border-right: 1px solid var(--form-color01); background-color: #F8F9FA; transition: all .3s ease-out; }
.form-file.on > label .txt { background-color: #E9ECEF; }
.form-file > label .name-box { padding: 8px 12px; background-color: #fff; flex: 1; }
.form-file > label > .name-box > .name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.form-file > .btn-box { display: flex; align-items: center; margin: 8px; }
.form-file > .btn-box > .btn { min-height: auto; padding: 4px; margin: 0; border: 0; border-radius: 0; color: #909090; }
.form-file > .btn-box > .btn:hover, .form-file > .btn-box > .btn:focus { color: #000; }
.form-file > .btn-box > .btn > .bi {  }

/* attach */
.attach {position: relative;display: flex;align-items: center;flex-direction: column;border: 1px solid var(--border-line-base);background: #fff;margin-bottom: 10px;padding: 15px;}
.attach .attach-list {display: flex;flex-wrap: wrap;align-items: flex-start;gap: 5px;max-height: 190px;margin: 0;padding: 3px;overflow: auto;}
.attach .attach-list::-webkit-scrollbar { width: 4px; height: 4px; }
.attach .attach-list::-webkit-scrollbar-thumb { background-color: #555; border-radius: 5px; }
.attach .attach-list::-webkit-scrollbar-track { background-color: #eee; border-radius: 5px; }
.attach .attach-list > li { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 2px 6px; background-color: var(--bg-color-base); border: 1px solid transparent; border-radius: var(--bs-border-radius-sm); overflow: hidden; cursor: pointer; transition: all .3s ease-out; }
.attach .attach-list > li:hover { background-color: #f5f5f5; border-color: #ccc; }
.attach .attach-list > li.active { background-color: #fff; border-color: var(--main-color01); }
.attach .attach-list > li > .item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 0 4px; color: #555; background-color: transparent; border: 0; transition: all .3s ease-out; }
.attach .attach-list > li.active > .item { color: #000; }
.attach .attach-list > li > .item > img { max-height: 20px; }
.attach .attach-list > li > .item .name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-width: 300px; overflow: hidden; font-size: 13px; }
.attach .attach-list > li > .item .size { color: #909090; white-space: nowrap; font-size: 13px; }
.attach .attach-list > li > .btn-box { display: flex; align-items: center; }
.attach .attach-list > li > .btn-box > .btn { min-height: auto; padding: 4px; margin: 0; border: 0; border-radius: 0; color: #909090; }
.attach .attach-list > li > .btn-box > .btn:hover, .attach .attach-list > li > .btn-box > .btn:focus { color: #000; }
.attach .attach-list > li > .btn-box > .btn > .bi {  }
.attach .attach-message { padding: 5px 0; text-align: center; }
.attach .attach-message .txt { margin: 0; color: #888; }
.attach .attach-btn { display: flex; justify-content: flex-end; gap: 2px 4px; padding: 5px 0 0 0; flex-wrap: nowrap; width: 100%; }
.attach .attach-btn .btn { flex: 1 1 100%; }
.attach .attach-btn .btn > .bi { position: relative; padding-right: 9px; margin-right: 8px; }
.attach .attach-btn .btn > .bi::after { content: ""; position: absolute; width: 1px; height: 13px; background-color: #BDC2E4; top: 4px; right: 0; }
.attach .attach-btn .btn > .bi.bi-universal-access { padding-left: 12px; }
.attach .attach-btn .btn > .bi.bi-universal-access::before { content: ""; position: absolute; top: 4px; left: 2px; width: 20px; height: 13px; background: url(/common/images/icon-universal-access.svg) no-repeat left center; }
.attach .attach-btn .btn:hover > .bi.bi-universal-access::before { background: url(/common/images/icon-universal-access-w.svg) no-repeat left center; }
.form-table .attach { margin-bottom: 0; }
.attach.attach-single {flex-direction: row;justify-content: space-between;gap: 6px;padding: 0;width: 100%;border: none;background: transparent;}
.attach.attach-single .attach-message {width: 100%;height: 27px;line-height: 1;background-color: var(--bg-color-base);border-radius: var(--bs-border-radius-sm);}
.attach.attach-single .attach-message .icon {display:none;}
.attach.attach-single .attach-list, .attach.attach-single .attach-list > li {flex-grow: 1;}
.attach.attach-single .attach-list { padding: 0; }
.attach.attach-single .attach-list > li { padding: 2px; height: 27px; }
.attach.attach-single .attach-btn { width: auto; padding: 0; }
@media(min-width:576px) {
  .attach .attach-btn .btn { flex: 0 0 auto; }
  .attach .attach-message + .attach-btn {position: absolute;bottom: 15px;right: 15px;}
  .attach.attach-single .attach-message + .attach-btn {position:relative;bottom:auto;right:auto;}
}
@media(min-width:768px) {
  .attach .attach-list {max-height: 115px;width: 100%;}
  .attach .attach-list > li {width: auto;padding: 3px 6px;}
}

/* dropzone */
.dropzone { min-height: auto; padding: 15px 20px; border: 1px solid var(--bs-border-color); border-radius: 6px; }
.dropzone .dz-message { margin: 10px 0 !important; padding: 0; }
.dropzone .dz-message .dz-icon { margin-bottom: 10px; }
.dropzone .dz-message .dz-button { position: relative; padding-left: 28px; }
.dropzone .dz-message .dz-button::before, .dropzone .dz-message .dz-button::after { content: ""; position: absolute; display: inline-block; }
.dropzone .dz-message .dz-button::before { content: ""; top: 3px; left: 0; width: 20px; height: 20px; font-family: var(--font-icon); border-radius: 50px; background-color: var(--main-color01); box-shadow: 0 3px 3px rgb(38 53 165 / 15%); }
.dropzone .dz-message .dz-button::after { content: "\f269"; top: 3px; left: 3px; font-family: var(--font-icon); color: #fff;  }
.dropzone:hover .dz-icon img, .dropzone:focus .dz-icon img { animation: ico-vertical 1s ease-in-out 1; }
.dz-image-preview ul { padding: 0; }
.dz-image-preview ul li {position: relative;list-style: none;margin: 0 0 5px 0;padding: 10px;border: 1px solid var(--border-line-base);border-radius: 10px;background-color: #fff;}
.dz-image-preview ul li .inner { margin: 0 0 8px 0; width: 100%; }
.dz-image-preview ul li .inner .txt { margin: 0 0 5px 0; width: 80%; color: var( --text-body-sub); line-height: 1; }
.dz-image-preview ul li .inner .txt.text-primary { color: var(--main-color01) !important; }
.dz-image-preview ul li .inner dd:last-child { margin-bottom: 0; }
@media (min-width:1400px) {
  .dz-image-preview ul li { display: flex; width: 100%; justify-content: space-between; align-items: center; padding-left: 50px; }
  .dz-image-preview ul li::before { content: "\F71B"; display: inline-block; font-family: var(--font-icon); position: absolute; top: 7px; left: 10px; width: 30px; height: 30px; text-align: center; padding: 3px; font-size: 22px; color: var(--main-color01); }
  .dz-image-preview ul li .inner { flex-grow: 1; margin-bottom: 0; }
  .dz-image-preview ul li .inner.btn-group { max-width: 300px; }
}

/* masking-box */
.masking-box { margin-bottom: 30px; }
.masking-box [class*="col-"] { text-align: center; }
.masking-box .img { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; padding: 20px; height: 200px; background: var(--grey-color-5); }
.masking-box img { max-width: 100%; }
.masking-box p { margin-bottom: 0; font-weight: 500; }
.masking-box span { color: var(--text-body-sub); }

/*  grid */
.cont-body .tabulator:last-child { margin-bottom: 0 !important; }
.tabulator {margin-bottom: 10px;border: none;font-size: 14px;background: #f5f5f5;border: 1px solid #ddd;border-top: none;background: #fff;}
.tabulator .tabulator-header {background-color: #eaeaea;border-top: 2px solid var(--main-color01);border-bottom: 1px solid var( --bs-border-color);color: #222;font-weight: 700;}
.tabulator .tabulator-header .tabulator-header-contents { background: #fff; }
.tabulator .tabulator-header .tabulator-col {background-color: var(--main-color01-light);border-right: 1px solid var(--bs-border-color);}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover, .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:focus {background-color: #d9e3f4;}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {border-bottom-color: #a4bbe1;}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {border-bottom: 6px solid #a4bbe1;}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom: none; border-top: 6px solid #a4bbe1; color: #a4bbe1; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 6px; }
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { border-top: 1px solid var(--bs-border-color); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { line-height: 1.2; }
.tabulator-row { min-height: 31px; }
.tabulator-row .tabulator-cell { padding: 2px 4px; min-height: 34px; line-height: 27px; border: 1px solid transparent; }
.tabulator-row .tabulator-cell .form-control { height: 32px; }
.tabulator-row .tabulator-cell .btn { border-radius: 0; }
.tabulator-row .tabulator-cell .bi { font-size: 17px; line-height: 17px; vertical-align: middle; }
.tabulator-row.tabulator-selectable:hover, .tabulator-row.tabulator-selectable:focus {background-color: var(--point-color01-light);}
.tabulator-row .tabulator-cell.tabulator-frozen { background-color: #fff; }
.tabulator-row.tabulator-selected {background-color: #C8EEE9 !important;box-shadow: inset 0 0 0 1px #40b8a8;}
.tabulator-row.tabulator-selected:hover, .tabulator-row.tabulator-selected:focus { background-color: #c7ebe6; }
.tabulator-cell.tabulator-editing { background-color: #b9e9e3; border: 1px solid #40b8a8 !important; }
.tabulator-row.tabulator-row-even { min-height: 31px; background-color: var(--grey-color-5); }
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left, .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {border-right: 1px solid var(--border-line-base);}
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { background-color: #fff; }
.tabulator .tabulator-footer { background: #fff; border: none; }
.tabulator .tabulator-footer .tabulator-footer-contents { background: #fff; }
.tabulator .tabulator-footer .tabulator-page { position: relative; width: 26px; height: 26px; background-color: transparent; border: none; border-radius: 10px; margin: 0 2px; padding: 2px 5px; color: var(--text-body-sub); }
.tabulator .tabulator-footer .tabulator-page[data-page="last"] { border: none; border-radius: 10px; }
.tabulator .tabulator-footer .tabulator-page:not(disabled):hover, .tabulator .tabulator-footer .tabulator-page:not(disabled):focus { background-color: var(--main-color01-hover); color: #fff; }
.tabulator .tabulator-footer .tabulator-page:is([data-page="first"], [data-page="last"], [data-page="prev"], [data-page="next"]):is(:hover,:focus) { background-color: var(--grey-color-10); }
.tabulator .tabulator-footer .tabulator-page:is([data-page="first"], [data-page="last"], [data-page="prev"], [data-page="next"]):is(:hover,:focus)::before { color: var(--text-body-sub-hover) !important; font-weight: 400 !important; }
.tabulator .tabulator-footer .tabulator-paginator { text-align: left; }
.tabulator .tabulator-footer .tabulator-page.active { background-color: var(--main-color01); color: #fff; font-weight: 700; box-shadow: 0 3px 3px rgb(32 32 32 / 30%); }
.tabulator .tabulator-footer .tabulator-page.active:hover, .tabulator .tabulator-footer .tabulator-page.active:focus { background-color: var(--main-color01-hover); }
.tabulator .tabulator-footer .tabulator-page::before { content: ""; display: inline-block; font-family: var(--font-icon); color: var(--text-body-sub); font-size: 14px; line-height: 1.8; }
.tabulator .tabulator-footer .tabulator-page[data-page="first"], .tabulator .tabulator-footer .tabulator-page[data-page="last"], .tabulator .tabulator-footer .tabulator-page[data-page="prev"], .tabulator .tabulator-footer .tabulator-page[data-page="next"] { overflow: hidden !important; color: var(--text-body-sub); }
.tabulator .tabulator-footer .tabulator-page[data-page="first"]::before { content: "\F27F"; }
.tabulator .tabulator-footer .tabulator-page[data-page="last"]::before { content: "\F280"; }
.tabulator .tabulator-footer .tabulator-page[data-page="prev"]::before { content: "\F284"; }
.tabulator .tabulator-footer .tabulator-page[data-page="next"]::before { content: "\F285"; }
.tabulator .tabulator-footer .tabulator-page[data-page="first"]:hover::before, .tabulator .tabulator-footer .tabulator-page[data-page="prev"]:hover::before, .tabulator .tabulator-footer .tabulator-page[data-page="last"]:hover::before, .tabulator .tabulator-footer .tabulator-page[data-page="next"]:hover::before, .tabulator .tabulator-footer .tabulator-page[data-page="first"]:focus::before, .tabulator .tabulator-footer .tabulator-page[data-page="prev"]:focus::before, .tabulator .tabulator-footer .tabulator-page[data-page="last"]:focus::before, .tabulator .tabulator-footer .tabulator-page[data-page="next"]:focus::before { color: #fff; font-weight: 700; }
.tabulator .tabulator-header .tabulator-col.req .tabulator-col-content .tabulator-col-title { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; }
.tabulator .tabulator-header .tabulator-col.req .tabulator-col-content .tabulator-col-title::before { content: "필수 입력 사항입니다."; display: inline-block; text-indent: -9999px; width: 10px; height: 10px; margin-right: 2px; font-size: 0; background: url(/common/images/req.png) no-repeat left center; }
.tabulator .tabulator-tableholder .tabulator-placeholder span.no-data { display: inline-block; padding-top: 80px; background: url(/common/images/no-data.png) no-repeat center; color: rgb(204, 204, 204); }
.tabulator-row .tabulator-cell .tabulator-data-tree-branch { margin-bottom: 3px; border-bottom: 2px solid #93a0ad; border-left: 2px solid #93a0ad; }
.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after, .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand, .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after { background: #717a83; }

/* tabulator-editing */
.tabulator-cell.tabulator-editing { background-color: #b9e9e3;}

/* input, textarea에만 테두리 스타일 지정 */
.tabulator-cell.tabulator-editing input:focus, .tabulator-cell.tabulator-editing textarea:focus { outline: none !important; box-shadow: none !important; border: 1px solid #40b8a8; background-color:#b9e9e3 }
.tabulator-cell.tabulator-editing textarea:focus { height: 36px !important; padding: 8px 5px !important; /* 내부 여백 */
  line-height: 1.2; box-sizing: border-box; }

  /* checkbox */
/* 기본 체크박스 숨기기 */
.tabulator-cell {
}
.tabulator-col-title input[type="checkbox"], .tabulator-cell input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin-top: -3px; line-height: 1; vertical-align: middle; border: 1px solid var( --grey-color-20); border-radius: 5px; background: #fff; cursor: pointer; }
.tabulator-cell input[type="checkbox"] ~ label { padding-left: 7px; }

/* 체크된 상태 */
.tabulator-col-title input[type="checkbox"]:checked, .tabulator-cell input[type="checkbox"]:checked {background: var(--main-color01-hover);border-color: var(--main-color01-hover);position: relative;}
.tabulator-col-title input[type="checkbox"]:checked:before, .tabulator-cell input[type="checkbox"]:checked:before {content: '\F26E';position: absolute;left: -2px;top: -1px;font-family: var(--font-icon);color: #fff;font-size: 18px;line-height: 1;}

/* select 박스 (드롭다운 화살표 있는 경우)도 추가 */
.tabulator-cell.tabulator-editing select:focus { outline: none !important; box-shadow: none !important; border: 2px solid var(--point-color01); background-color: var(--point-color02-light); appearance: auto; /* 시스템 기본 화살표 유지 */
}

/* disabled */
.tabulator-col-title input[type="checkbox"]:disabled, .tabulator-cell input[type="checkbox"]:disabled {background: #e9ecef;}

/* tree level margin-left : 17px 간격 */
.tabulator-row.tabulator-tree-level-1 .tabulator-cell .tabulator-data-tree-branch { margin-left: 5px !important; }
.tabulator-row.tabulator-tree-level-2 .tabulator-cell .tabulator-data-tree-branch { margin-left: 22px !important; }
.tabulator-row.tabulator-tree-level-3 .tabulator-cell .tabulator-data-tree-branch { margin-left: 39px !important; }
.tabulator-row.tabulator-tree-level-4 .tabulator-cell .tabulator-data-tree-branch { margin-left: 56px !important; }
.tabulator-row.tabulator-tree-level-5 .tabulator-cell .tabulator-data-tree-branch { margin-left: 73px !important; }
.tabulator-row.tabulator-tree-level-6 .tabulator-cell .tabulator-data-tree-branch { margin-left: 90px !important; }
.tabulator-row.tabulator-tree-level-7 .tabulator-cell .tabulator-data-tree-branch { margin-left: 107px !important; }
.tabulator-row.tabulator-tree-level-8 .tabulator-cell .tabulator-data-tree-branch { margin-left: 124px !important; }
.tabulator-row.tabulator-tree-level-9 .tabulator-cell .tabulator-data-tree-branch { margin-left: 141px !important; }
.tabulator-row.tabulator-tree-level-10 .tabulator-cell .tabulator-data-tree-branch { margin-left: 158px !important; }

.btn-view { display: flex; justify-content: center; gap: 4px; margin: 0 auto; padding: 6px 4px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #6c757d; font-size: 13px; letter-spacing: -0.05em; }
.btn-view > i { font-size: 12px; }
.btn-status { box-shadow: 0 0 7px rgba(80, 90, 129, 0.4); transform: translateY(0px); transition-property: transform, box-shadow; transition-duration: 500ms; transition-timing-function: cubic-bezier(.22, .57, .12, .96); }
.btn-status:hover, .btn-status:focus { transform: translateY(-4px); box-shadow: 0 0 7px rgba(80, 90, 129, 0.8); }
.grid-rowstatus-c { background: url(/common/images/icon-add.png) no-repeat center center; }
.grid-rowstatus-d { background: url(/common/images/icon-delete.png) no-repeat center center; }
.grid-rowstatus-u { background: url(/common/images/icon-edit.png) no-repeat center center; }
@media (hover:hover) and (pointer:fine) {
  .tabulator-row.tabulator-selectable:hover, .tabulator-row.tabulator-selectable:focus { background-color: #E6F7F5; }
}

/* toast UI */
#frmEditor { width: 100%; height: 100%; }
.toastui-editor-defaultUI { height: 100%; min-height: 300px; }

/* sticky */
.sticky-wrap { position: sticky; top: 0; }


/********************************************
components +std
********************************************/
/*  Badge  */
.badge-primary { background-color: var(--primary); }
.badge-info { background-color: var(--info); }
.badge-secondary { background-color: var(--secondary); }

/* badge-type */
[class*="badge-style"] { font-weight: normal; font-size: 80%; }
.badge-style00 { background-color: var(--grey-color04); border: 1px solid var(--grey-color05); color: #555; }
.badge-style01 { background-color: #d9f4ff; color: #199adb; }
.badge-style02 {background-color: #dcf2fb;color: var(--main-color01);}
.badge-style03 { background-color: #efe8fd; color: #5626a5; }
.badge-style04 { background-color: #f8e5f9; color: #b832c1; }
.badge-style05 { background-color: #f9eae1; color: #dc4a00; }
.badge-style06 { background-color: #fbe9e9; color: #d54545; }
.badge-style07 { background-color: #fffad1; color: #7d710a; }
.badge-style08 { background-color: #e3fdec; color: #007f2e; }
.badge-style09 { background-color: #effdff; color: #157d89; }
.badge-style10 { background-color: #f9f9f9; color: #616161; }

/* badge-group */
.badge-group { display: inline-flex; flex-wrap: wrap; flex-grow: 1; gap: 3px; }
.badge-group .btn { padding: 4px 6px; border-radius: 50px; }
.badge-group .btn:not(.btn-primary) { border-color: var(--border-line-base); }
.badge-group .btn .badge { margin-left: 2px; border-radius: 50px; font-weight: 700; }

/*  Progress */
.progress-style01 { display: flex; gap: 15px 0; flex-direction: column; }
.progress-style01 > .progress { position: relative;  height: 35px; border-radius: 30px; background-color: var(--grey-color-5); }
.progress-style01 > .progress .progress-bar {overflow: visible;background: var(--point-color01);color: var(--bs-body-color);font-size: 14px;}
.progress-style01 > .progress .progress-bar:after {content: attr(aria-valuenow)'%';position: absolute;top: 50%;right: 21px;transform: translateY(-50%);width: 35px;text-align: right;font-family: var( --font-type02);color: var(--bs-body-color);font-size: 14px;}
.progress-style01 > .progress .progress-bar > span {display: block;text-align: left;padding: 0 16px;font-weight: 600;}

/*  Message */
/* Message Top */
.message-top {position: relative;padding: 30px;margin-bottom: 40px;border: 1px solid var(--grey-color05);background: #fff;border-radius: 0 30px 0 0;}
.message-top:after {content: '';position: absolute;top: 0;left: -1px;display: block;width: calc(100% + 2px);height: 65px;border-radius: 0 30px 0 0;border: 1px solid var(--main-color01);border-bottom-color: transparent;}
.message-top .img-icon { display: none; }
.message-top .txt > h4 { font-family: var(--font-type02); font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.message-top .txt > p, .message-top .txt > ul > li { word-break: keep-all; color: #464c53; }
.message-top .txt > p:last-child, .message-top .txt > ul:last-child { margin-bottom: 0; }
.message-top .txt hr { border-top: 1px dotted #222; }
.message-top .txt .btn { font-size: 15px; margin-bottom: 3px; }
@media (min-width:768px) {
  .message-top { padding-left: 160px; min-height: 140px; }
  .message-top .img-icon { display: block; position: absolute; top: 25px; left: 30px; width: 90px; height: 90px; }
}
@media (min-width:992px) {
  .message-top { min-height: 180px; padding: 20px 20px 20px 150px; }
  .message-top .img-icon { top: 30px; left: 40px; }
}

/* message-box01 */
.message-box01 {display: flex;flex-direction: column;border-top: 1px solid #000;border-bottom: 1px solid #d3d3d3;background: #fff;padding: 7px;margin-bottom: 10px;}
.message-box01 .icon {display: flex;justify-content: center;align-items: center;width: 18px;height: 18px;margin-top: 5px;border-radius: 100px;background-color: var(--point-color01);}
.message-box01 .icon .bi { font-size: 17px; color: #fff; line-height: 1.2; }
.message-box01 .txt { padding-top: 10px; }
.message-box01 .txt > p, .message-box01 .txt > ul { margin: 3px 0; }
.message-box01 .txt > ul [class*="list-style0"] { margin: 0; }
@media (min-width:768px) {
  .message-box01 {flex-direction: row;gap: 10px;}
  .message-box01 .txt {width: calc(100% - 50px);padding-top: 0;}
}
@media (min-width:1200px) {
  .message-box01 .img { width: 80px; }
  .message-box01 .img > .icon { width: 60px; height: 60px; }
  .message-box01 .img > .icon .bi { font-size: 30px; }
}

/* message-box02 */
.message-box02 {border: 1px solid  var(--border-line-base);background: #fff;padding: 20px 30px;border-radius: 8px;margin-bottom: 30px;}
.message-box02 h4 { font-family: var(--font-type01); margin-bottom: 0; line-height: 1.4; font-size: 19px; }
.message-box02 h4 > strong { position: relative; display: inline-block; }
.message-box02 h4 > strong:after { content: ''; position: absolute; bottom: 3px; left: 0; z-index: -1; width: 100%; height: 35%; background: rgba(9, 153, 219, 0.2); }
.message-box02 h4 + p { margin-top: 10px; color: #464c53; }
.message-box02 p { margin-bottom: 0; }
@media (min-width:992px) {
  .message-box02 { padding: 30px 230px 30px 30px; background-image: url('/common/images/message-bg00.png'); background-repeat: no-repeat; background-position: right center; background-size: 200px; min-height: 170px; }
  .message-box02.type01 { background-image: url("/common/images/message-bg01.png"); }
  .message-box02.type02 { background-image: url("/common/images/message-bg02.png"); }
  .message-box02.type03 { background-image: url("/common/images/message-bg03.png"); }
  .message-box02.type04 { background-image: url("/common/images/message-bg04.png"); }
  .message-box02.type05 { background-image: url("/common/images/message-bg05.png"); }
  .message-box02.type06 { background-image: url("/common/images/message-bg06.png"); }
  .message-box02.type07 { background-image: url("/common/images/message-bg07.png"); }
  .message-box02.type08 { background-image: url("/common/images/message-bg08.png"); }
}

/*  Card  */
.card { border-color: var(--border-line-base); border-radius: 10px; overflow: hidden; }
.card.active { border: 1px solid var(--main-color01); }
[class*="card-list0"] [class*="col-"] { margin-top: 15px; margin-bottom: 15px; }
[class*="card-list0"] .card { height: 100%; border-radius: 10px; overflow: hidden; }
[class*="card-list0"] .card-header { display: flex; align-items: center; background: transparent; border-bottom: none; }
[class*="card-list0"] .card-header .title { font-size: 17px; font-weight: 700; font-family: var(--font-type01); }
[class*="card-"][class*="01"] .card-header:after {content: '';position: absolute;left: 20px;bottom: 0;display: block;width: calc(100% - 40px);border-bottom: 1px solid var(--border-line-base);}
[class*="card-"][class*="01"] .card-header .item .btn { position: relative; display: inline-block; font-size: 15px; padding: 0 20px 0 0; background-color: transparent; border: none; color: #222; margin-left: 20px; }
[class*="card-"][class*="01"] .card-header .item .btn:first-child { margin-left: 0; }
[class*="card-"][class*="01"] .card-header .item .btn:before { content: ''; position: absolute; display: block; width: 1px; height: 10px; top: 50%; left: -10px; transform: translateY(-50%); border: none; background: #ccc; }
[class*="card-"][class*="01"] .card-header .item .btn:first-child:before { display: none; }
[class*="card-"][class*="01"] .card-header .item .btn:after { content: '\F134'; position: absolute; right: 0; left: inherit; bottom: inherit; top: 0; font-family: var(--font-icon); color: #888; }
[class*="card-"][class*="01"] .card-header .item .btn-link:after { content: '\F1C5'; }
[class*="card-"][class*="01"] .card-header .item .btn-down:after { content: '\F30A'; }
[class*="card-"][class*="01"] .card-header .item .btn-del:after { content: '\F623'; color: var(--bs-danger); }
[class*="card-"][class*="01"] .card-header .item .btn-excel:after { content: ''; background: url(/common/images/icon-excel.png) no-repeat top -3px right; width: 20px; height: 20px; }
[class*="card-"][class*="01"] .card-header .item .btn.icon-etc { padding-right: 0; }
[class*="card-"][class*="01"] .card-header .item .btn.icon-etc:after { display: none}
[class*="card-"][class*="01"] .card-header .item .btn.icon-etc .bi { color: #999}
[class*="card-"][class*="01"] .card-header .item .btn:hover, [class*="card-"][class*="01"] .card-header .item .btn:focus { color: var(--main-color01)}
[class*="card-"][class*="01"] .card-header .item .btn.btn-del:hover, [class*="card-"][class*="01"] .card-header .item .btn.btn-del:focus { color: var(--bs-danger); }

/* card-style01 */
.card.card-style01 { margin: 0 0 20px 0; box-shadow: 0 2px 10px rgb(225 225 225 / 30%); }
.card.card-style01 .card-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: none; background: transparent; }
.card.card-style01 .card-header .item > h4 { padding: 0; font-family: var(--font-type01); font-size: 19px; color: #000; font-weight: 700; margin-bottom: 0; }
.card.card-style01 .card-body + .card-body { position: relative; }
.card.card-style01 .card-body + .card-body:after { content: ''; position: absolute; left: 20px; top: 0; display: block; width: calc(100% - 40px); border-bottom: 1px dotted var(--grey-color05); }
.card.card-style01 .card-footer {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;border-top: none;background: var(--bg-color-base);}
.card.card-style01 .card-footer .form-check label { margin-bottom: 0; }

/* card-list01 */
.card-list01 { margin-right: -10px; margin-left: -10px; }
.card-list01 [class*="col-"] { margin-top: 10px; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; }
.card-list01 .card { height: 100%; }
.card-list01 .card .card-header { position: relative; display: flex; justify-content: space-between; padding: 20px 20px 9px; }
.card-list01 .card .card-header .item > h4 { font-size: 17px; font-family: var(--font-type01); font-weight: 700; margin-bottom: 0; }
.card-list01 .card .card-body .item { position: relative; display: flex; justify-content: space-between; padding-left: 35px; gap: 0 10px; }
.card-list01 .card .card-body .item + .item { margin-top: 20px; }
.card-list01 .card .card-body .item .btn-wrap { display: flex; gap: 3px; }
.card-list01 .card .card-body .item .btn-wrap button { display: inline-block; white-space: nowrap;  line-height: 1.3; padding: 5px 10px; height: 31px; }
.card-list01 .card .card-body .item .num { display: flex; justify-content: center; position: absolute; top: 9px; left: 0; transform: translateY(-50%); align-items: center;  line-height: 1; font-family: var(--font-type01); font-weight: 500; color: #51525b; width: 25px; height: 25px; border-radius: 25px; background-color: #dde1f6; }
.card-list01 .card .card-body .item .num[class*="type0"] { color: #fff}
.card-list01 .card .card-body .item .num.type01 { background: rgb(245 184 34); background: linear-gradient(126deg, rgb(245 184 34) 30%, rgb(210 153 20) 92%); }
.card-list01 .card .card-body .item .num.type02 { background: rgb(182 184 195); background: linear-gradient(126deg, rgb(182 184 195) 30%, rgb(136 137 149) 92%); }
.card-list01 .card .card-body .item .num.type03 { background: rgb(198 138 79); background: linear-gradient(126deg, rgb(198 138 79) 30%, rgb(154 98 42) 92%); }
.card-list01 .card .category { color: var(--point-color01); font-weight: 700; font-size: 15px; line-height: 1.2rem; white-space: nowrap; }
.card-list01 .card .category.type01 { color: var(--main-color01); }
.card-list01 .card .category.type02 { color: #7726a5; }
.card-list01 .card .category.type03 { color: #d729b6; }
.card-list01 .card .card-body h4 { width: auto; font-size: 15px; line-height: 1.2rem; word-break: initial; margin-bottom: 0; }
.card-list01 .card .card-body .item.type-txt { padding: 0; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.card-list01 .card .card-body .item.type-txt .tit { border-radius: 5px; background-color: #eff0f9; padding: 2px 5px; color: #51525b; max-width: 30%;  word-break: break-all; }
.card-list01 .card .card-body .item.type-txt h4 { line-height: inherit; flex: 1 1 10%; }

/* card-list02  */
.card-list02 .card {border: none;box-shadow: 0 1px 10px rgb(129 129 129 / 10%);}
.card-list02 .card.success { border: 1px solid var(--main-color01); }
.card-list02 .card .card-body > .badge {position: absolute;top: 10px;right: 10px;display: flex;justify-content: center;align-items: center;padding: 0 10px;font-size: 16px;font-weight: 400;border: 1px solid var(--grey-color-20);background: #fff;color: #666;min-width: 70px;height: 35px;border-radius: 25px;}
.card-list02 .card.success .card-body > .badge { background-color: var(--main-color01); border: none; color: #fff; }
.card-list02 .card .card-body {position: relative;display: flex;flex-direction: column;align-items: center;padding: 30px;background-color: #fff;border-radius: 10px;justify-content: center;}
.card-list02 .card .card-body.bg-primary { background: rgb(38,53,165); background: linear-gradient(155deg, rgba(38,53,165,1) 13%, rgba(31,42,124,1) 65%); background: url("/common/v2/images/thumb-bg.jpg")}
.card-list02 .card .card-body .img { margin: 15px auto; max-width: 100%; }
.card-list02 .card .card-body > h4 { font-family: var(--font-type01); font-weight: 700; text-align: center; font-size: 19px; margin-bottom: 0; }
.card-list02 .card .card-body > .icon + h4 { margin-top: 20px; }
.card-list02 .card .card-body[class*="bg-"] h4 { color: #fff}
.card-list02 .card .card-body > h4 > span { font-size: 16px; color: #666; margin-left: 6px; }
.card-list02 .card .card-body .icon {display: flex;align-items: center;justify-content: center;width: 100px;height: 100px;border-radius: 100px;background: var(--grey-color-5);}
.card-list02 .card .card-body .icon .bi { font-size: 30px; line-height: 1.1; color: var(--main-color01); }
.card-list02 .card .card-body .icon > img { max-width: 32px; }
.card-list02 .card .card-body .thum {position: relative;width: 110px;height: 110px;border-radius: 110px;overflow: hidden;margin-bottom: 15px;background: var(--grey-color-5);box-shadow: 0 0 3px rgb(77 85 104 / 29%);}
.card-list02 .card .card-body .thum:after { content: '\F4E1'; position: absolute; top: 50%; left: 50%; z-index: 1; font-family: var(--font-icon); font-size: 52px; color: #e4e4e4; transform: translate(-50%, -50%); }
.card-list02 .card .card-body .thum > img { position: absolute; left: 50%; transform: translateX(-50%); min-width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.card-list02 .card .card-body .num {display: flex;align-items: center;justify-content: center;width: 100px;height: 100px;border-radius: 100px;background: var(--grey-color-5);margin-bottom: 20px;font-family: var(--font-type02);font-weight: 700;letter-spacing: normal;font-size: 27px;line-height: 1;color: var(--main-color01);}
.card-list02 .card .card-body .num .small { font-size: 18px; font-weight: 500; margin-left: 5px; color: #888; }
.card-list02 .card .card-body .num + h4 { font-size: 17px; color: #666; }
.card-list02 .card .card-body p { font-size: 15px; color: #555; margin-top: 3px; margin-bottom: 0; }
.card-list02 .card .card-body .btn-wrap { margin-top: 15px; }
.card-list02 .card .card-body .btn-wrap .btn { display: inline-flex; justify-content: center; align-items: center; background: #A4B1CF; padding: 0; width: 35px; height: 35px; border-radius: 35px; transition: 0.3s; margin: 0 2px; }
.card-list02 .card .card-body .btn-wrap .btn[href^="tel:"] { background: var(--main-color02); }
.card-list02 .card .card-body .btn-wrap .btn[data-toggle^="modal"] { display: none; }
.card-list02 .card .card-body .btn-wrap .btn:hover, .card-list02 .card .card-body .btn-wrap .btn:focus { background: #919cb5; }
.card-list02 .card .card-body .btn-wrap .btn[href^="tel:"]:hover, .card-list02 .card .card-body .btn-wrap .btn[href^="tel:"]:focus { background: var(--main-color02-hover); }
.card-list02 .card .card-body .btn-wrap .btn .bi {  color: #fff; }
.card-list02 .card .card-footer {display: flex;text-align: center;padding: 15px 10px;justify-content: center;align-items: center;background: var(--main-color01);border-top: 1px solid #ddd;}
.card-list02 .card .card-footer:last-child { border-radius: 0 0 10px 10px; }
.card-list02 .card .card-footer > .btn {position: relative;padding: 0;margin: 0 13px;padding-right: 20px;font-size: 15px;color: #fff;}
.card-list02 .card .card-footer > .btn:hover, .card-list02 .card .card-footer > .btn:focus {font-weight: 500;}
.card-list02 .card .card-footer > .btn.btn-dele:hover, .card-list02 .card .card-footer > .btn.btn-dele:focus { color: var(--danger); }
.card-list02 .card .card-footer > .btn:after { content: ''; position: absolute; top: 50%; left: -13px; display: block; width: 1px; height: 10px; transform: translateY(-50%); background: #ccc; }
.card-list02 .card .card-footer > .btn:before {content: '\F134';position: absolute;top: 0;right: 0;display: block;font-family: var(--font-icon);color: #fff;}
.card-list02 .card .card-footer > .btn.btn-dele:before { content: '\F623'; color: var(--danger); }
.card-list02 .card .card-footer > .btn:hover:before, .card-list02 .card .card-footer > .btn:focus:before { transform: scaleX(1); }
.card-list02 .card .card-footer > .btn:first-child:after { display: none; }
.card-list02 .card .card-footer > .btn .bi { color: var(--main-color01); }
.card-list02 .card .card-footer > .btn:hover .bi, .card-list02 .card .card-footer > .btn:focus .bi { color: var(--secondary); }
@media (min-width:992px) {
  .card-list02 .card .card-body .btn-wrap { position: absolute; margin-top: 0; top: 20px; right: 20px; }
  .card-list02 .card .card-body .btn-wrap .btn { display: none; }
  .card-list02 .card .card-body .btn-wrap .btn[data-toggle^="modal"] { display: inline-flex; margin: 0; background: linear-gradient(137deg, rgba(28,185,188,1) 13%, rgba(28,146,235,1) 92%); }
  .card-list02 .card .card-body .btn-wrap .btn[data-toggle^="modal"]:hover, .card-list02 .card .card-body .btn-wrap .btn[data-toggle^="modal"]:focus { background: rgba(28, 146, 235, 1); }
}

/* card-list03 */
.card-list03 { margin-right: -10px; margin-left: -10px; }
.card-list03 [class*="col-"] { margin-top: 10px; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; }
.card-list03 .card-body.flex-row { display: flex; align-items: center; justify-content: space-between; gap: 0 10px; }
.card-list03 .card-body h4 { font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 15px; }
.card-list03 .card-body.flex-row h4 { margin-bottom: 0; }
.card-list03 .card-body h4 > .bi { font-size: 19px; color: var(--text-body-sub-light); font-weight: 700; margin-right: 4px; }
.card-list03 .card-body h4 > img { margin-right: 6px; max-height: 20px; max-width: 20px; }
.card-list03 .card-body .appraise-item { display: flex; font-family: var(--font-type01); font-size: 18px; font-weight: 700; color: #888; align-items: center; gap: 0 10px; }
.card-list03 .card-body .appraise-item .appraise-box { display: flex; gap: 0 4px; }
.card-list03 .card-body .appraise-item .appraise-box > span { display: block; width: 13px; height: 13px; border-radius: 13px; background-color: var(--main-color01); opacity: 0.2; }
.card-list03 .card-body .appraise-item .appraise-box > .check { opacity: 1; }
.card-list03 .card-body .btn {  }
@media (min-width:992px) {
  .card-list03 .card-body { display: flex; align-items: center; justify-content: space-between; gap: 0 10px; }
  .card-list03 .card-body h4 { margin-bottom: 0; }
}

/* card-list04 */
.card-list04 img { display: block; max-width: 100%; margin: 0 auto; }
.card-list04 p { text-align: center; font-size: 15px; color: #777; margin-bottom: 0; }
.card-list04 .card-footer { display: flex; flex: 0 0 auto; background: var(--grey-color-5); padding: 0; }
.card-list04 .card-footer .btn {padding: 10px;width: 100%;font-size: 16px;background: var(--main-color01);color: #fff;}
.card-list04 .card-footer .btn .bi {margin-left: 5px;font-size: 13px;color: #fff;}

/*  MBTI */
.mbti-box .mbti-img { margin-top: 40px; padding: 0 20px; }
.mbti-box .mbti-img > h4 { font-family: var(--font-type01); text-align: center; font-size: 17px; color: #464c53; margin-bottom: 20px; }
.mbti-box .mbti-img > h4 > .mbti-type { display: block; margin-top: 5px; font-size: 21px; font-weight: 700; color: #000; }
.mbti-box .mbti-img > h4 > .mbti-type > i { display: inline-block; width: 20px; height: 20px; margin: 0 3px; border-radius: 10px; background: var(--grey-color-10); }
.mbti-box .mbti-img > img { display: block; max-width: 100%; margin: 0 auto; }
.mbti-box .progress-box { display: flex; gap: 20px; flex-direction: column; }
.mbti-box .progress-box .item { display: flex; flex-wrap: wrap; justify-content: space-between; background: var(--grey-color04); padding: 20px; border-radius: 10px; }
.mbti-box .progress-box .item .form-group { flex: 0 0 calc(50% - 10px); margin-bottom: 0; }
.mbti-box .progress-box .item .form-group label { display: block; margin-bottom: 0; }
.mbti-box .progress-box .item .form-group:last-child label { text-align: right; }
.mbti-box .progress-box .item .form-group:last-child input { text-align: right; }
.mbti-box .progress-box .item .form-group .num { font-family: var(--font-type02); font-size: 26px; font-weight: 700; color: #1c92eb; }
.mbti-box .progress-box .item .form-group:last-child .num { text-align: right; color: #979aa2; }
.mbti-box .progress-box .item.reversal .form-group:last-child .num { color: #1c92eb; }
.mbti-box .progress-box .item.reversal .form-group .num { color: #979aa2; }
.mbti-box .progress-box .item .progress-wrap { flex: 0 0 100%; margin-bottom: 5px; }
.mbti-box .progress-box .item .progress-wrap .tit > h4 { font-size: 17px; text-align: center; }
.mbti-box .progress-box .item .progress-wrap .tit .stit { display: none; }
.mbti-box .progress-box .item .progress-wrap .progress {border-radius: 10px;height: 16px;background: var(--bg-color-base);}
.mbti-box .progress-box .item.reversal .progress-wrap .progress { justify-content: flex-end; }
.mbti-box .progress-box .item .progress-wrap .progress .progress-bar {position: relative;background: var(--point-color-grd);border-radius: 10px;}
.mbti-box .progress-box .item.reversal .progress-wrap .progress .progress-bar { transform: rotateZ(180deg); }
.mbti-box .progress-box .item .progress-wrap .progress .progress-bar:after { content: ''; position: absolute; top: 50%; right: 4px; width: 10px; height: 10px; transform: translateY(-50%); border-radius: 10px; background: #fff; }
@media (min-width:576px) {
  .mbti-box .progress-box .item .progress-wrap .tit { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }
  .mbti-box .progress-box .item .progress-wrap .tit .stit { display: block;  color: #464c53; }
  .mbti-box .progress-box .item .progress-wrap .tit > h4 { margin-bottom: 2px; }
  .mbti-box .progress-box .item .progress-wrap .progress { margin-bottom: 5px; }
  .mbti-box .progress-box .item .form-group label { display: none; }
}
@media (min-width:992px) {
  .mbti-box { display: flex; align-items: center; }
  .mbti-box .progress-box { order: 2; gap: 40px; width: calc(100% - 400px); }
  .mbti-box .progress-box .item { background: transparent; padding: 0; }
  .mbti-box .mbti-img { order: 1; width: 400px; }
}
@media (min-width:1200px) {
  .mbti-box .progress-box .item { align-items: flex-end; flex-wrap: nowrap; gap: 20px; }
  .mbti-box .progress-box .item .progress-wrap { flex: 0 0 calc(100% - 260px - 40px); margin-bottom: 0; order: 1; }
  .mbti-box.result .progress-box .item .progress-wrap { flex: 0 0 calc(100% - 160px - 40px); }
  .mbti-box .progress-box .item .progress-wrap .tit { display: flex; justify-content: space-between; }
  .mbti-box .progress-box .item .progress-wrap .tit .stit { display: block; }
  .mbti-box .progress-box .item .progress-wrap .progress { height: 30px; border-radius: 30px; }
  .mbti-box .progress-box .item .progress-wrap .progress .progress-bar { border-radius: 20px; }
  .mbti-box .progress-box .item .progress-wrap .progress .progress-bar:after { width: 20px; height: 20px; border-radius: 20px; }
  .mbti-box .progress-box .item .form-group { flex: 0 0 130px; }
  .mbti-box.result .progress-box .item .form-group { flex: 0 0 80px; }
  .mbti-box .progress-box .item .form-group:last-child { order: 2; }
  .mbti-box .progress-box .item .form-group label { display: none; }
}
@media (min-width:1400px) {
  .mbti-box .progress-box { width: 800px; }
  .mbti-box .mbti-img { width: calc(100% - 800px); }
}

/*  Student Info */
.student-info { margin-bottom: 40px; }
.student-info .card { margin-bottom: 30px; height: calc(100% - 30px); }
.student-info .member .member-inner { display: flex; justify-content: center; align-items: center; border-bottom: 1px dotted #ccc; padding-bottom: 15px; margin-bottom: 15px; }
.student-info .member .member-inner .img { position: relative; display: block; flex: 0 0 70px; width: 70px; height: 70px; border-radius: 120px; overflow: hidden; margin-bottom: 0; background-color: #fff; border: 1px solid #dee2e6; }
.student-info .member .member-inner .img > img { position: absolute; left: 50%; max-width: 100%; transform: translateX(-50%); z-index: 2; }
.student-info .member .member-inner .img:after { content: '\F4E1'; position: absolute; top: 50%; left: 50%; z-index: 1; font-family: var(--font-icon); font-size: 38px; color: #e4e4e4; transform: translate(-50%, -50%); }
.student-info .member .member-inner .member-name { padding-bottom: 0; border: none; padding-left: 25px; }
.student-info .member .member-inner .member-name > h4 { font-size: 17px; color: #000; margin-bottom: 0; }
.student-info .member .member-inner .member-name > p { color: var( --text-body-sub); margin-top: 2px; margin-bottom: 0; }
.student-info .member dl > dd {min-height: 21px;margin-bottom: 5px; color: var( --text-body-sub); }
.student-info .box-item { background: #f8f8fb; border-color: #dfdfdf; border-radius: 0.25rem 30px 0.25rem 0.25rem; }
.student-info .box-item .card-header { background: transparent; border-bottom: 0; font-size: 17px; color: #000; font-weight: 700; padding-top: 20px; }
.student-info .box-item .icon { display: inline-flex; width: 30px; height: 30px; margin-right: 10px; background-color: var(--main-color01); border-radius: 5px; align-items: center; justify-content: center; }
.student-info .box-item .icon .bi { color: #fff; font-size: 18px; }
.student-info .box-item .card-body { padding-top: 10px; }
.student-info .box-item dl > dt { display: block; }
.student-info .box-item dl > dd { color: var( --text-body-sub); }
.student-info .box-item dl > dd:last-child { margin-bottom: 0; }
@media(min-width:576px) {
  .student-info .member .member-inner { justify-content: flex-start; }
}

/* student-info02 */
.student-info02 .member { margin-bottom: 1rem}
.student-info02 .member .member-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.student-info02 .member .member-inner .img { position: relative; display: block; flex: 0 0 120px; width: 120px; min-height: 144px; border-radius: 8px; overflow: hidden; margin-bottom: 0; border: 1px solid var(--form-color01); background: #EAF0FA url(/common/images/prof-img.png) no-repeat center; }
.student-info02 .member .member-inner .img > img { position: absolute; left: 50%; max-width: 100%; transform: translateX(-50%); }
.student-info02 .member .member-inner .btn-wrap {display: flex;flex-direction: column;gap: 6px;}
.student-info02 .member .member-inner .btn-wrap .btn {width:120px}

/* tit-box */
.tit-box { text-align: center; background-color: #F5F8FF; margin-bottom: 30px; padding: 15px; border-radius: 10px; }
.tit-box h3 { font-weight: 700; font-family: var(--font-type01); color: var(--main-color01); margin-bottom: 0; font-size: 17px; }
.tit-box .tit-box-info { position: relative; margin-top: 5px; text-align: center;  }
.tit-box .tit-box-info li { position: relative; display: inline-block; color: var( --text-body-sub); }
.tit-box .tit-box-info li::after { display: inline-block; content: ''; width: 1px; height: 15px; background-color: #a9a9a9; margin: 0 15px; vertical-align: middle; transform: translateY(-1px); }
.tit-box .tit-box-info li:last-child::after { display: none; }
@media (min-width:768px) {
  .tit-box { margin-bottom: 50px; padding: 22px 22px 20px; }
}

/********************************************
contents
********************************************/
.gray-box { padding: 20px; background: #fff; border: 1px dashed #ddd; }

/* related */
.related { position: relative; overflow: hidden; }
.related .related-list { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; padding: 5px; gap: 5px 4px; overflow: auto; }
.related .related-list > li { position: relative; display: inline-block; vertical-align: middle; width: 100%; }
.related .related-list > li > .item { display: flex; align-items: center; width: 100%; min-height: 27px; padding: 2px 24px 2px 2px; background-color: #fff; border: 1px solid #dedede; border-radius: 50px;  color: #333; transition: all .3s ease-out; }
.related .related-list > li > .item .badge { padding: 4px 6px; color: #464A5D; margin: 0; border-radius: 50px; font-size: 13px; }
.related .related-list > li > .item .name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-width: 300px; padding-left: 4px; overflow: hidden; }
.related .related-list > li > .close { position: absolute; top: 50%; right: 4px; padding: 0; margin: 0; font-size: 21px; color: #aaa; line-height: 1; background-color: transparent; border: 0; transform: translateY(-50%); opacity: 1; }
.related .related-list > li > .close:hover, .related .related-list > li > .close:focus { color: #333; }
.related.no-data { display: flex; align-items: center; justify-content: center; height: 107px; color: var(--bs-secondary); }
.related.no-data .related-list { display: none; }
@media(min-width:400px) {
  .related .related-list > li { width: auto; }
}

/* sandwich-area */
.edit-wrap { position: relative; margin: 10px 0 0 0; padding: 10px; background-color: var( --grey-color-5); border: 1px solid var( --grey-color-10); border-radius: 6px; }
.sandwich-area { margin: 0; padding: 15px; background-color: var( --grey-color-10); border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; }
.sandwich-area .inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 500px; height: 100%; margin: 0 auto; }
.sandwich-area .btn { min-width: 120px; --bs-btn-padding-y: 0.5rem; border: none; }
.sandwich-area .btn > .bi::before { font-size: 12px; }
.sandwich-area .input-group .btn { min-width: auto; border: 1px solid var( --grey-color-30); background: var( --grey-color-30); color: #fff; }
.sandwich-area .btn-outline-dark:not(:hover) { background-color: #fff; }
.sandwich-area .btn.btn-move > .bi::before { transform: rotate(90deg); }
.sandwich-area .b-table-box .b-con-box { background-color: transparent; }
.sandwich-area .b-table-box, .sandwich-area .b-table-box .b-title-box, .sandwich-area.b-table-box .b-con-box { background: transparent; border: none; }
.sandwich-area .b-table-box .b-row-item { border-bottom: none; }
.sandwich-area .b-table-box .b-title-box { color: #fff; flex: 0 0 90px; max-width: 90px; }
@media (min-width:1400px) {
  .sandwich-area { position: relative; right: -11px; bottom: -10px; height: 100%; padding: 20px; border-top-left-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
  .sandwich-area .inner { flex-direction: column; }
  .sandwich-area .btn.btn-move > .bi::before { transform: rotate(0); }
}

/*  waiting  */
.waiting { background-color: var( --grey-color01); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px; text-align: center; word-break: keep-all; }
.waiting h1 { font-weight: 700; margin: 17px 0; }
.waiting h1 span { color: var(--main-color01); margin: 0 4px; }
.waiting p { color: var(--text-body-sub); }

/*  sitemap  */
.sitemap-wrap { padding: 10px; }
.sitemap-wrap a { display: inline-block; width: 100%; height: 100%; color: var(--text-body-sub); }
.sitemap-wrap a:hover { color: var(--main-color01); font-weight: 700; }
.sitemap { margin-bottom: 20px; }
.site-tit { padding: 10px 20px; margin-bottom: 10px; border-radius: 5px; background-color: var(--main-color02); color: #fff; }
.site-tit p { margin: 0; font-size: 18px; font-weight: 700; text-align: center; word-break: keep-all; }
.site-map-list { padding: 10px; border-radius: 5px; margin-bottom: 10px; }
.list-2dep { padding: 10px 20px; background-color: var(--grey-color-5); }
.list-2dep > li > a { padding: 10px 5px; border-radius: 5px; font-size: 17px; font-weight: 500; }
.list-2dep > li > a:hover, .list-2dep > li > a:focus { background-color: var( --grey-color01); padding: 10px; }
.list-3dep { background-color: #fff; }
.list-3dep > li + li { border-top: 1px dashed #ddd; }
.list-3dep > li > a { padding: 10px 5px; color: var(--text-body-sub); font-weight: 400; }
.list-4dep > li > a { color: #555; }
ul.list-4dep.list-style01 > li::after { background-color: var(--main-color01); }
.list-5dep { background-color: var(--main-color01-light); }

/*  fc-calendar  */
.fc a { color: #000; text-decoration: inherit; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 15px; }
.fc .fc-button { padding: 0.25rem 0.25rem; }
.fc .fc-toolbar-title { font-family: var(--font-type02); font-weight: 700; font-size: 1rem; }
.fc .fc-col-header-cell-cushion {  font-weight: 400; }
.fc-h-event .fc-event-title-container { box-shadow: 0 3px 3px rgb(0 0 0 / 10%); }
.fc-day-other { background: var( --grey-color01); }
.fc .fc-daygrid-day-number { padding: 5px 8px; font-family: var(--font-type02); font-size: 15px; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color: #fff; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number::before { content: ""; display: inline-block; position: absolute; top: 5px; right: 1px; background: #222; border-radius: 50px; width: 22px; height: 22px; z-index: -1; }
.fc a.fc-event:hover, .fc a.fc-event:focus { background-color: var(--point-color01-light); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-button-primary:not(:disabled).fc-button-active:hover, .fc .fc-button-primary:not(:disabled):active:hover, .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus { background-color: #424649; }
.fc .fc-button:hover, .fc .fc-button:focus { color: #fff; }
.fc-button-primary.fc-today-button, .fc-button-primary.fc-today-button { background: #fff; border: 1px solid var(--main-color01); color: var(--main-color01); }
.fc-button-primary.fc-today-button:hover, .fc-button-primary.fc-today-button:focus { background: var( --grey-color01); border: 1px solid var(--main-color01); color: var(--main-color01);
}:root { --fc-event-bg-color: #eef7fe; --fc-event-text-color: var(--main-color01); --fc-event-border-color: #50a0de; --fc-button-bg-color: #fff; --fc-button-hover-bg-color: #6c757d; --fc-button-border-color: #6c757d; --fc-button-text-color: #1d1d1d; --fc-button-active-bg-color: var(--main-color02); --fc-today-bg-color: #fffdeb; }
@media (min-width:768px) {
  .fc .fc-toolbar-title { font-size: 1.5rem; }
}
@media (min-width:1400px) {
  .fc .fc-toolbar-title { font-size: 1.75rem; }
  .fc .fc-button { padding: 0.25rem 0.5rem; }
}

/* survey */
.survey {}
.survey-list {min-height: 628px;margin-top: 20px;overflow: auto;}


/*  popup  */
body.popup { padding-top: 0; background: #fff; }
body.popup .popup-header {background-color: var(--main-color01);}
body.popup .popup-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 15px; height: 50px; padding-top: 2px; color: #fff; }
body.popup .popup-top .popup-tit { margin: 0; font-size: 18px; }
body.popup .popup-contents { padding: 20px 0; }
body.popup .container, body.popup .container-sm { max-width: 100%; }

/*  Non info  */
.non-info { text-align: center; max-width: 100%; padding: 30px 0; }
.non-info .img {display: block;max-width: 100%;margin: 0 auto;}
.non-info h4 { font-family: var(--font-type01); font-weight: 700; font-size: 19px; color: #12294a; margin-bottom: 2px; text-align: center; }
.non-info img + h4 { margin-top: 20px; }
.non-info p { text-align: center; color: #999; margin-bottom: 0; }
.non-info .btn-wrap { display: flex; justify-content: center; margin-top: 30px; gap: 0 10px; }
.non-info .btn-wrap > button { min-width: 100px; padding: 8px 15px; }
@media (min-width:576px) {
  .non-info .img { width: auto; }
}

/*  popup-survey  */
.popup-contents { background-color: #fff; }
.box-style01 { margin-bottom: 40px; }
.box-style01.inner { padding-left: 20px; margin-top: 20px; }
.box-style01.inner .title { font-size: 16px; color: var(--main-color02); }
.box-style01 .title { color: var(--main-color01); font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.box-style01 .txt { padding: 16px; background-color: var(--main-color01-light); border-radius: 5px; }
.inner-title { font-size: 16px; color: var(--main-color01); }
.important-tit { width: fit-content; position: relative; }
.important-tit::before { content: "*"; display: inline-block; width: 8px; margin-right: 2px; font-family: var(--font-type01); font-weight: 500; font-size: 20px; color: var(--danger); position: absolute; top: 0; right: -14px; }
.box-style01.inner .title.gray-tit { color: #555; }
.box-radio .form-check-box { height: 100%; position: relative; padding-left: calc(var(--bs-gutter-x) * 0.5); }
.box-radio .form-check-box .form-check-input[type="radio"] { width: 100%; float: unset; padding: 20px; border-radius: 5px; margin-left: 0; }
.box-radio .form-check-box .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: none; }
.box-radio .form-check-box .form-check-input:checked[type="radio"] + label { color: #fff; font-weight: 700; }
.box-radio .form-check-box .form-check-label { position: absolute; top: calc(50% + 3px); left: 50%; transform: translate(-50%, -50%); }
.input-form { display: flex; gap: 10px; align-items: center; }
.input-form + .input-form { margin-top: 10px; }
.num-input { max-width: 60px; }
.flatpickr-months { position: relative; margin-top: 5px; }
.flatpickr-months .flatpickr-month { display: flex; align-items: center; justify-content: space-between; }
.flatpickr-current-month { padding: 0; height: auto; display: flex; justify-content: center; }
.flatpickr-current-month .numInput.cur-year { width: 58px; padding: 0; text-align: center; color: #333; font-weight: 400; }
.flatpickr-current-month .numInputWrapper { width: auto; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { height: fit-content; padding: 0; top: 50%; transform: translateY(-50%); }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month { left: 10px; }
.flatpickr-months .flatpickr-next-month.flatpickr-next-month { right: 10px; }
.flatpickr-monthSelect-month { font-size: 15px; font-weight: 400; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 400; }
.profile-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.profile-wrapper .b-table-box { flex: 1 1 100%; }
.profile-wrapper .profile-box .profile-img { min-height: 120px; background-image: url(/common/images/profile_non.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; }
.profile-wrapper .profile-box .btn { margin-top: 6px; }
@media (min-width:576px) {
  .profile-wrapper { flex-direction: row; align-items: unset; }
}
.center { display: flex; justify-content: center; }
.non { width: 100%; min-height: 140px; height: 100%; border-radius: 8px; background-color: #fff; display: flex; align-items: center; justify-content: center; }
.non p { margin: 0; padding-top: 46px; font-size: 18px; font-weight: 500; color: #555; background-image: url(/common/images/no-data.png); background-position: top center; background-repeat: no-repeat; }
.table tr th {text-align: center;line-height: 1.6;vertical-align: middle;}

/* modal */
.modal-content {border-radius: 6px;border: 0;}
.modal-header {padding: 0 5px 0 12px;background: var(--main-color01);border-radius: 0;justify-content: flex-end;}
.modal-header .modal-close { position: relative; border: 0; padding: 13px; background-color: transparent; opacity: .6; }
.modal-header .modal-close::before, .modal-header .modal-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 50px; background-color: #fff; transition: all .3s ease-out; }
.modal-header .modal-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.modal-header .modal-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.modal-header .modal-close:hover, .modal-header .modal-close:focus { opacity: 1; }
.modal-header .modal-close:hover::before, .modal-header .modal-close:focus::before { transform: translate(-50%,-50%) rotate(-45deg); }
.modal-header .modal-close:hover::after, .modal-header .modal-close:focus::after { transform: translate(-50%,-50%) rotate(45deg); }
.modal-subheader { background-color: #f8f9fa; padding: 10px 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.modal-subheader h2 { display: inline-block; position: relative; font-size: 21px; font-family: var(--font-type01); font-weight: 700; margin: 0; }
.modal-subheader .inner { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.modal-subheader .btn-wrap { display: inline-flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.modal-body { overflow-y: auto; scroll-behavior: smooth; }
.modal-body .file-list li a p { max-width: 340px; }
.modal-body .cont-header:first-child { margin-top: 0; }
.modal-body .popup-area { padding: 0; }
.modal-footer { display: flex; justify-content: center; }
.modal-footer .btn { margin: 0 2px; min-width: 48px}
.alert-modal .modal-body {word-break: break-word;display: flex;align-items: center;gap: 10px;}
.alert-modal .modal-body .alert-tit {position: relative;margin: 0;font-size: 21px;font-weight: 600;}
.alert-modal .modal-body .alert-tit .bi {vertical-align: middle;color: var(--point-color02);font-size: 29px;}
.alert-modal .modal-body #text {margin-bottom:0;padding: 0;color: #575757;word-break: break-all;}

@media (min-width:1400px) {
    .modal-xxl { max-width: 1400px; }
}


.popup-area { padding: 0 20px; }
.popup-area .file-box { display: flex; border-top: 1px solid var(--border-line-base); border-bottom: 1px solid var(--border-line-base); }
.popup-area .file-box .tit { width: 20%; padding: 10px; display: flex; align-items: center; justify-content: center; background-color: #edf0f9; }
.popup-area .file-box .file { width: 80%; padding: 10px; }
.popup-area .board-box {margin-bottom: 10px;padding: 20px 10px;height: 480px;overflow-y: auto;border-bottom: 1px solid #ccc;}
.popup-area .board-box p { margin: 0; }
.file-list li a { width: 100%; display: flex; align-items: center; gap: 6px; }
.file-list li a p { margin: 0; max-width: 400px; width: 100%; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; color: var(--text-body-sub); }

/* textarea height */
textarea.rows-2 { height: 47px; }
textarea.rows-3 { height: 67px; }
textarea.rows-4 { height: 86px; }
textarea.rows-5 { height: 106px; }
textarea.rows-6 { height: 125px; }

/* modal backdrop 관련 */
.modal-backdrop { transition: opacity .25s ease; }

@supports (scrollbar-gutter: stable) {
  .content-inner {
    scrollbar-gutter: stable;
  }
}

/* 드롭다운 열릴 때 스크롤 숨김 */
.content-inner.ts-dropdown-open,
.modal-body.ts-dropdown-open,
.tab-pane.ts-dropdown-open {
  overflow-y: hidden !important;
}

/* 드롭다운 스크롤 속도 */
.ts-dropdown-content {
  scroll-behavior: auto !important;
}

/* 드롭다운 기본 숨김 */
.ts-dropdown {
  opacity: 0 !important;
  transition: none !important;
  animation: none !important;
}

/* 드롭다운 default height 지정 */
.ts-dropdown .option {
  min-height: 27px;
}
.ts-dropdown .option input {
  vertical-align:middle
}

/* 드롭다운 선택한 자료 색상 지정 */
.ts-dropdown .option.active {
  background-color: var(--main-color01-light)
}

/* 위치 결정 후 보이기 */
.ts-dropdown.ts-ready {
  opacity: 1 !important;
}

.ts-dropdown.ts-dropup {
  transition: none !important;
  animation: none !important;
}

/* 모달 모드 스타일 */
.ts-dropdown.ts-modal-mode {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 500px !important;
  max-width: 90vw !important;
  max-height: 60vh !important;
  z-index: 10000 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  background: white !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  pointer-events: auto;
}

.ts-modal-header {
  height: 40px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  position: relative;
}

.ts-dropdown.ts-modal-mode .ts-dropdown-content {
  flex: 1;
  overflow-y: auto !important;
  padding: 8px 0;
  scroll-behavior: auto !important;
}

.ts-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ts-modal-close:hover {
  background: #f8f9fa;
  color: #333;
  border-color: #999;
}

.ts-modal-close:active {
  background: #e9ecef;
  transform: scale(0.95);
}

body.ts-modal-backdrop::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  pointer-events: none;
}

.ts-dropdown.ts-modal-mode .option {
  padding: 10px 16px;
  cursor: pointer;
}

.ts-dropdown.ts-modal-mode .option:hover {
  background-color: #f0f0f0;
}

.ts-dropdown.ts-modal-mode .option.active {
  background-color: #e3f2fd;
}

.ts-dropdown.ts-modal-mode .option.selected {
  font-weight: 600;
}

@media (max-width: 768px) {
  .ts-dropdown.ts-modal-mode {
    width: 90vw !important;
    max-height: 70vh !important;
  }
}

@media (max-width: 480px) {
  .ts-dropdown.ts-modal-mode {
    width: 95vw !important;
    max-height: 75vh !important;
    border-radius: 4px !important;
  }

  .ts-modal-close {
    top: 6px;
    right: 8px;
  }
}