@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.dblock {
    display: block!important;
}

.flex-wrap {
    flex-wrap: wrap;

}

.betweentext {
    padding: 0 5px;
    font-size: 1rem;
    align-self: center;
    line-height: 1rem;
    position: relative;
    top: -2px;
}

.mlauto {
    margin-left: auto;
}

.ml20 {
    margin-left: 20px;
}


.ml10 {
    margin-left: 10px;
}

.mr20 {
    margin-right: 20px;
}

.mr-auto {
    margin-right: auto!important;
}

.text-left {
    text-align: left!important;
}

.text-right {
    text-align: right!important;
}

.ts-control {
    border-radius: 0!important;
}

.ts-dropdown {
    margin: 0!important;
}

/* .ts-wrapper.multi.has-items .ts-control {
    padding: 8px!important;
} */

/* .ts-wrapper.multi .ts-control>div {
    background: transparent!important;
    border: 0!important;
    color: inherit!important;
    cursor: default!important;
    margin: 0!important;
    padding: 0!important;
    border: 1px solid #CECECE;
    font-size: 14px;
    color: #212121;
}

.ts-wrapper.multi .ts-control>div::after {
    content:', ';
    display: inline-block;
} */

/* .ts-wrapper.multi .ts-control>div:last-of-type::after {
    display: none;
} */

.ts-wrapper input[type=text]::placeholder {
    color: #212121;
}

.tui-grid-editor-select-box-layer {
    margin-top: -1px;
}

.tui-grid-row-header-draggable span {
    display: inline-block;
    width: 5px!important;
    height: 1px;
    margin: 1px 0!important;
    line-height: 0;
    background: #98a0a6!important;
}

.tui-grid-row-header-checkbox input[type=checkbox] {
    position: relative;
    top: 2px;
}

.tui-grid-row-hover td {
    background-color: transparent;
}

.tui-grid-floating-row {
    background-color: #ffffff!important;
    padding-bottom: 4px!important;
}
.tui-grid-floating-row * {
    background: #ffffff!important;
}

.toastui-editor-defaultUI-toolbar {
    flex-wrap: wrap;
  }


/* 기본 npm 모듈 관련 수정 */
.has-items .ts-control>input {
    height: auto;
}

.plugin-checkbox_options .option input {
    position: relative;
    top: 2px;
}

.text-end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.fc .fc-daygrid-day-number {
    color: #212121;
}

.fc-day a {
    color: #212121;
}

.fc-day.fc-day-sun a {
    color: #f00;
}

.fc-day.fc-day-sat a {
    color: #00f;
}

/* tui grid */

.tui-grid-header-area {
    border-color: #e9ebec!important;
}

.tui-grid-border-line-top {
    border-top: 1px solid #f3f6f9!important;
}

.tui-grid-header-area .tui-grid-cell-row-header {
    background-color: #f3f6f9!important;
}

.tui-grid-lside-area .tui-grid-body-container,
.tui-grid-lside-area .tui-grid-body-container .tui-grid-table-container {
    width: 100%!important;
}

/* .tui-grid-cell {
    border-bottom: 0!important;
} */

.tui-grid-no-scroll-x .tui-grid-border-line-bottom {
    border-bottom: 1px solid #e9ebec!important;
}

.tui-grid-cell-has-input .tui-grid-cell-content {
    padding: 0 10px!important;
    font-size: 14px;
}

.tui-grid-cell-content input[type='text'], .tui-grid-cell-content input[type='password'] {
    font-size: 14px!important;
}

.tui-grid-layer-editing {
    padding-top: 1px!important;
    background-color: transparent !important;
}

.tui-grid-container .tui-grid-cell-content a {
    color: #007BFF;
    display: inline-block;
    border-bottom: 1px solid #007BFF;
}

.tui-grid-container strong {
    color: #007BFF;
}

.tui-grid-datepicker-input-container input.tui-grid-datepicker-input {
    height: 29.5px!important;
}

.useRestricDayBullet .tui-grid-cell-content::after {
    content: '일';
    display: inline;
}

.useRestricCountBullet .tui-grid-cell-content::after {
    content: '회';
    display: inline;
}

.tui-grid-cell .tui-grid-cell-content {
    line-height: 1.2!important;
}

.grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.grid-col {
    flex: 1 1 0;
}


.w60px {
    width: 60px!important;
}


.w132 {
    width: 132px!important;
}

.w100p {
    width: 100%!important;
}

.long-input {
    width: 240px!important;
}

.blind {
    position: absolute;
    top: -99999999px;
    left: -99999999px;
    overflow: hidden;
    width: 0;
    left: 0;
    text-indent: -999999px;
}

/* // */

/*******************************************************************************
                            레이아웃
********************************************************************************/
* {
    margin: 0;
    padding: 0;
}

html, body {
    font-size: 15px;
    color: #212121;
}

a {
    text-decoration: none;
    color: #3788d8;
}

ul {
    list-style: none;
}

body * {
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif !important;
}

body {
    background: #F6F9FF;
    height: 100vh;
}

.admin-wrapper {
    height: 100%;
}

.content-page {
    width: calc(100% - 260px);
    height: 100%;
    margin-left: auto;
}

.content {
    height: 100%;
}

.container-fluid {
    padding-bottom: 10px;
}

.row {
    margin: 1rem 2rem;
}

.card {
    padding: 20px;
    border-radius: 5px;
    background: #fff;
}

.validation-wrap p {
    font-size: 0.8rem;
    color: #FF0000;
    text-align: left;
}

.point-color {
    color: #007BFF;
}

.point-blue {
    color: #007BFF;
}

.point-red {
    color: #FF0000!important;
}

.point-orange {
    color: #ff9d00!important;
}

.collapse_tr {
    background-color: #efefef;
}

.fs1 {
    font-size: 1rem!important;
}

/*******************************************************************************
                            공용 수정
********************************************************************************/
.page-title-box {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    /* justify-content: space-between; */
    position: relative;
    height: 66px;
}

.page-title-box a {
    color: #212121
}

.page-title-box h1 {
    color: #212121;
    font-size: 1.5rem;
    margin: 0;
}

.pagination-rounded .page-link {
    border-radius: 3px !important;
}

.page-wayfinding {
    display: flex;
    padding: 0;
    margin: 0;
    margin-left: 2rem;
    list-style: none;
}

.page-wayfinding li {
    position: relative;
    font-size: 1rem;
    margin-right: 10px;
}

.page-wayfinding li:last-child {
    margin-right: 0;
}

.page-wayfinding li+li::before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    width: 8px;
    height: 16px;
    background-image: url(../images/ico-path-arrow.svg);
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.hidden {
    display: none !important;
}

.loading-spinner-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: none;
    color: white;
}

.loading-spinner {
    position: absolute;
    left: 47%;
    top: 42%;
    font-weight: 500;
    text-align: center;
}

.loader {
    transform: translate(-50%, -50%);
    width: 3.5rem;
    height: 3.5rem;
    border: 8px solid #414141;
    border-bottom-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin-bottom: 0.5rem;
    -webkit-animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
}

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
}
}

div.toastui-editor.ww-mode {
    cursor: text;
}

.display-none {
    display: none;
}

.weekend-red {
    color: red;
}

.flex-box {
    display: flex;
    justify-content: space-between;
    margin: -1rem;
}

.flex-box.m0 {
    margin: 0!important
}

dd .flex-box {
    margin: 0;
    margin-right: 1rem;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

dd .flex-box input,
dd .flex-box select {
    width: auto;
    max-width: 132px;
}

dd .flex-box .btw-bullet {
    line-height: 34px;
    width: auto
}

.flex-box.start {
    justify-content: start;
}

.w100 {
    padding: 1rem;
    width: 100%;
}

.w80px {
    width: 80px!important;
}


.flex-box .w50 {
    width: 50%;
    padding: 1rem;
}

.flex-box .w40 {
    width: 40%;
    padding: 1rem;
}

.flex-box .w60 {
    width: 60%;
    padding: 1rem;
}


.thumbnail-img-btn-wrap .w40,
.detail-img-btn-wrap .w40 {
    width: 40%;
    padding: 0;
}

.thumbnail-img-btn-wrap .w60,
.detail-img-btn-wrap .w60 {
    width: calc(60% - 8px);
    padding: 0;
}

.align-start {
    align-items: flex-start!important;
}

.text-center {
    text-align: center;
}

.m-0 {
    margin: 0;
}

.mb-0 {
    margin-bottom: 0!important;
}

.mb-1 {
    margin-bottom: 0.4rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.text-primary {
    color: #007BFF;
}

.fc .fc-button-primary,
.fc .fc-button-group>.fc-button {
    background: #191919;
    color: #fff;
}

.fc .fc-button-primary:disabled {
    background: #767676;
    border: 1px solid #767676;
}

[onclick] {
    cursor: pointer;
}

.alertify .ajs-dialog {
    z-index: 9999999 !important;
}

.col-12 {
    grid-column: 12 span;
}

.col-11 {
    grid-column: 11 span;
}

.col-10 {
    grid-column: 10 span;
}

.col-9 {
    grid-column: 9 span;
}

.col-8 {
    grid-column: 8 span;
}

.col-7 {
    grid-column: 7 span;
}

.col-6 {
    grid-column: 6 span;
}

.col-5 {
    grid-column: 5 span;
}

.col-4 {
    grid-column: 4 span;
}

.col-3 {
    grid-column: 3 span;
}

.col-2 {
    grid-column: 2 span;
}

.col-1 {
    grid-column: 1 span;
}

textarea {
    padding: 5px 10px;
}

textarea[readonly] {
    background: #F6F6F6;
}

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

    .col-12,
    .col-11,
    .col-10,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3,
    .col-2 {
        grid-column: 1 span;
    }
    .form-label {
        margin-bottom: 0.5rem;
    }
}

/*******************************************************************************
                                튤팁
********************************************************************************/

.tooltip {
    position: relative;
}

.tooltip-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: 1.5rem;
    border-radius: 50%;
    border: 1px solid #000;
    cursor: pointer;
}

.tooltip-btn>span {
    font-size: 1rem;
}

.tooltip-box {
    display: none;
    position: absolute;
    left: -1.5rem;
    bottom: calc(100% + 1rem);
    padding: 2rem;
    background: #007BFF;
    border-radius: 1rem;
}

.tooltip-box.open {
    display: block;
}

.tooltip-box::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 100%;
    transform: translateY(-2px);
    height: 1rem;
    width: 1.5rem;
    background: #007BFF;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.tooltip-box>p {
    font-size: 1rem !important;
    color: #fff;
    font-weight: 400;
}

.tooltip-close {
    position: absolute !important;
    right: .5rem;
    top: .5rem;
}

.tooltip-close::before,
.tooltip-close::after {
    background: #fff !important;
}

/*******************************************************************************
                                버튼 & input
********************************************************************************/
.button {
    /* padding: 10px 20px; */
    min-width: 100px;
    height: 36px;
    padding: 0 20px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    transition: all .3s;
    border: none!important;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-style-0 {
    background: #013193;
}

.btn-style-0:hover {
    background: #002379;
}

.btn-style-1 {
    background: #007BFF;
}

.btn-style-1:hover {
    background: #005FDB;
}

.btn-style-2 {
    background: #22cc6a;
}

.btn-style-2:hover {
    background: #18AF67;
}

.btn-style-3 {
    background: #558DFC;
}

.btn-style-3:hover {
    background: #3E6CD8;
}

.btn-style-4 {
    background: #ffc823;
}

.btn-style-4:hover {
    background: #DBA519;
}

.btn-style-5 {
    background: #FF5B32;
}

.btn-style-5:hover {
    background: #DB3B24;
}

.btn-style-6 {
    background: #888888;
}

.btn-style-6:hover {
    background: #666666;
}

.btn-style-7 {
    background: #f5f5f5;
    color: #212121;
}

.btn-style-7:hover {
    background: #eaeaea;
}

.btn-style-8 {
    border: 1px solid #cecece!important;
    color: #212121;
    background-color: #ffffff!important;
}

.btn-style-8:hover {
    border: 1px solid #999999!important;
}

.detail-img-btn-wrap {
    display: flex;
    justify-content: space-between;
}

.alertify {
    position: relative;
    z-index: 999999999999999999999999999999 !important;
}

select, input[type=text], input[type=number] {
    border: 1px solid #CECECE;
    font-size: 14px;
    height: 36px;
    padding: 0 10px;
    color: #212121;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    padding-right: 30px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

input[type=date], input[type=time] {
    border: 1px solid #CECECE;
    font-size: 14px;
    height: 36px;
    padding: 0 10px;
    padding-right: 8px;
    color: #212121;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.search-input-wrap .search-input select,
.search-input-wrap .search-input input[type=text],
.search-input-wrap .search-input input[type=number],
.search-input-wrap .search-input input[type=date],
.search-input-wrap .search-input input[type=time],
.search-input-wrap .ts-wrapper,
.data-length-select {
    width: 154px;
}

.popup-search-wrap .search-input-wrap .ts-wrapper {
    width: 100%;
}

select:hover, input:hover {
    border: 1px solid #999999;
}

select::-ms-expand {
    display:none;
}

select, .search-input-wrap .ts-wrapper {
    background-image: url(../images/select-bottom-arrow.svg);
    background-size: 12px 6px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: #ffffff!important;
}

.search-input-wrap .ts-wrapper .ts-control {
    background-color: transparent!important;
}

.form-select {
    width: 100%;
}

/*******************************************************************************
                               badge
********************************************************************************/

.badge {
    display: inline-block;
    /* padding: 10px 20px; */
    min-width: 70px;
    /* height: 36px; */
    padding: 3px 6px 4px;
    border-radius: 3px;
    font-size: 13px;
    color: #fff;
    transition: all .3s;
    border: none!important;
    white-space: nowrap;
    outline: none;
}

.badge-style-0 {
    background: #013193;
}

.badge-style-1 {
    background: #007BFF;
}

.badge-style-2 {
    background: #22cc6a;
}

.badge-style-3 {
    background: #558DFC;
}

.badge-style-4 {
    background: #ffc823;
}

.badge-style-5 {
    background: #FF5B32;
}

.badge-style-6 {
    background: #888888;
}

.badge-style-7 {
    background: #f5f5f5;
    color: #212121;
}

.badge-style-8 {
    border: 1px solid #cecece!important;
    color: #212121;
    background-color: #ffffff!important;
}

/*******************************************************************************
                                페이지 네이션
********************************************************************************/
.pagination-wrapper {
    font-size: 16px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
}

.pagination {
    display: flex;
    align-items: center;
    margin: 0;
}

.pagination li {
    width: 2rem;
    aspect-ratio: 1 / 1;
    margin: 0 0.5rem;
    color: #666666;
}

.pagination li.active {
    background: #EFF1F6;
    cursor: not-allowed;
}

.pagination li>a,
.pagination li>span {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 2rem;
    color: #666666;
    margin: 0;
}

input[readonly] {
    background-color: #F6F6F6 !important;
    border: 1px solid #e9ebec;
}

.pagination-arrow-box {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border: 1px solid #e9ebec;
}

.pagination-arrow-box>a {
    line-height: normal !important;
}

/*******************************************************************************
                                테이블
********************************************************************************/

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

table.default-table tr.deactivated {
    opacity: 0.3
}

table.default-table tr:hover {
    background: #f7f9fa;
}

table.default-table th,
table.default-table td {
    padding: 10px 0;
    border-bottom: 1px solid #e9ebec;
}

table.default-table th {
    background-color: #f3f6f9;
    font-size: 15px;
    font-weight: 500;
}

table.default-table th.editable {
    background-color: #babfff;
}

table.default-table sup {
    color: #DB3B24;
}

table.default-table.sc-table th{
    padding: 1rem 0.5rem;
}

table.default-table td.warning {
    background-color: #ffcbcb!important;
}

table.default-table td {
    font-size: 14px;
}

table.default-table td.sc-memo {
    padding: 1rem 0.5rem;
}


table.default-table td.year-td {
    background-color: #f7f9fa;
}


table.default-table td a {
    color: #212121;
}

table.default-table tbody.no-border td {
    border-bottom: 0;
}

table.default-table tbody.no-border {
    border-bottom: 1px solid #e9ebec
}

table.default-table tbody.no-border tr.add-border td {
    border-top: 1px solid #e9ebec;
}

table.default-table tbody.no-border tr:hover {
    background-color: transparent;
}

table.default-table tbody td a {
    color: #007BFF;
    text-decoration: underline;
}


table.default-table tbody td.table-alert {
    background-color: rgba(34, 204, 105, 0.15);
}

table.default-table tbody td.table-alert p {
    font-size: 13px;
    padding: 0 10px;
    padding-left: 38px;
    position: relative;
    text-align: left;
}

table.default-table tbody td.table-alert p::before {
    content: '!';
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    border-radius: 20px;
    color: #ffffff;
    font-weight: bold;
    line-height: 14px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -10px;
    text-align: center;
}

table.default-table tbody td select,
table.default-table tbody td input[type=text],
table.default-table tbody td input[type=date],
table.default-table tbody td input[type=time] {
    width: 100px;
}

.schedule-calendar,
.schedule-calendar2 {
    font-size: 13px;
    min-height: 583px;
}

.schedule-calendar table tr:hover,
.schedule-calendar2 table tr:hover,
table thead tr:hover {
    background: none;
}

.course-schedule-bg {
    background-color: #42D29D;
    border-color: #42D29D;
}
.test-schedule-bg {
    background-color: orange;
    border-color: orange;
}
.exam-schedule-bg {
    background-color: #FA6767;
    border-color: #FA6767;
}
.special-schedule-bg {
    background-color: green;
    border-color: green;
}

.registered-devices-popup-wrap table {
    text-align: center;
}

.fc-multiMonthYear-view td, .fc-multiMonthYear-view th {
    border: 0!important;
}

.fc-multiMonthYear-view .fc-cell-shaded, .fc-multiMonthYear-view .fc-day-disabled {
    background: none!important;
}

.fc .fc-multiMonthYear-view .fc-daygrid-day-top {
    justify-content: center;
}

.fc .fc-multimonth {
    /* gap: 1rem; */
    border: none!important;
}

.fc-multimonth-header {
    border: 1px solid #d0d0d0;
    border-bottom: 0;
}

.fc-multimonth-daygrid {

    border: 1px solid #d0d0d0;
    border-top: 0;
}

/*******************************************************************************
                            최상단 고정 로그인 부분
********************************************************************************/
.navbar-custom {
    display: flex;
    align-items: center;
    height: 72px;
    /* padding: 24px 0; */
    background: #ffffff !important;
    border-bottom: 1px solid #e9ebec;
    font-size: 14px;
    padding: 0 2rem;
}

.navbar-custom ul {
    display: flex;
    justify-content: end;
    align-items: center;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.navbar-custom ul li {
    margin-left: 1rem;
}

.navbar-custom ul li a {
    color: #212121;
    padding: 10px 16px;
    padding-right: 36px;
    border: 1px solid #CECECE;
    border-radius: 50px;
    background-image: url(../images/ico-open-new-window.svg);
    background-size: 16px 16px;
    background-position: right 16px center;
    background-repeat: no-repeat;
    transition: all .3s ease-in-out;
}

.navbar-custom ul li a:hover {
    border: 1px solid #999999;
}

.navbar-custom .login-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f5f5f5;
    height: 71px;
    padding: 0 2rem;
    margin-left: 2rem;
    width: 200px;
    line-height: 18px;
    font-weight: 500;
}

.navbar-custom .login-info a {
    color: #007BFF;
}

/*******************************************************************************
                                사이드 바
********************************************************************************/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh !important;
    background: #050D2E !important;
    overflow: auto;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

div.logo-box-wrapper {
    position: sticky;
    top: 0;
    background-color: #050D2E;
    z-index: 1000;
}

.sidebar-enable .sidebar {
    width: 70px;
}

.sidebar .logoBox {
    text-align: center;
    height: 72px;
}

.sidebar .logoBox a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.sidebar .logoBox img {
    max-width: 100%;
    aspect-ratio: 146 / 27;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -2px;
}

.navigation-btn {
    display: flex;
    margin: 0 auto 1rem;
    /* border-radius: .5rem; */
    border: 1px solid #4a81ff;
    padding: 0;
    list-style: none;
    overflow: hidden;
    margin: 0 16px;
}

.navigation-btn li {
    width: 50%;
    text-align: center;
    padding: 1rem 0;
    font-weight: 700;
    color: #007BFF;
    cursor: pointer;
    transition: all .3s;
}

.navigation-btn li+li {
    border-left: 1px solid #007BFF;
}

.navigation-btn li.active {
    background: #007BFF;
    color: #fff;
    transition: all .3s;
}

.navigation-btn li:hover:not(.active) {
    background: #0c67c8;
    color: #fff;
}

.navigation {
    margin-top: 10px;
    padding: 16px;
}

.navigation-1depth {
    padding: 0;
    list-style: none;
}

.navigation-1depth ul {
    list-style: none;
}

.navigation-1depth p,
.navigation-1depth a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
    color: #fff;
}

.navigation-1depth li {
    position: relative;
}

.navigation-1depth .star-favorites,
.navigation-1depth .star {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(50%, -50%);
    font-weight: 400;
    color: #000;
    width: 1rem;
    cursor: pointer;
}

.navigation-2depth>li .star {
    right: 0;
    transform: translate(0, -50%);
}

.navigation-1depth .star-favorites path,
.navigation-1depth .star path {
    display: inline-block;
    stroke: #1ec95b;
    stroke-width: 2px;
}

.navigation-1depth .star-favorites path {
    fill: #1ec95b;
}

.navigation-1depth .dripicons-chevron-down {
    display: inline-block;
    transition: all .3s;
    width: 12px;
    height: 6px;
    background: url('../images/bottom-arrow.svg') no-repeat center center;
    background-size: cover;
    opacity: 0.7;
    margin-right: 2px;
}


.navigation-1depth .open .dripicons-chevron-down {
    transform: rotate(-180deg);
    transition: all .3s;
    opacity: 1.0;
}

.navigation-1depth>li {
    margin-bottom: 1.5rem;
}

.navigation-1depth>li .navigation-2depth {
    height: 0;
    overflow: hidden;
    padding: 0;
    padding-left: 1rem;
    opacity: 0;
    transition: all .3s;
}

.navigation-1depth>li.active .navigation-2depth {
    opacity: 1;
    height: auto;
    transition: all .3s;
}

.navigation-1depth li::marker {
    color: #57b3fa;
}

.navigation-1depth>li>p,
.navigation-1depth>li>a {
    border-radius: 0.5rem;
    /* padding: 10px; */
    margin-bottom: 0;
    transition: all .3s;
    /* background: #2C324D; */
    color: rgba(255,255,255,.7);
    font-size: 14px;
    font-weight: bold;
}

.navigation-1depth>li>p.open {
    margin-bottom: 12px;
    /* background: #2C324D; */
    color: #fff;
    transition: all .3s;
}

.navigation-2depth {
    border-top: 1px solid rgba(255,255,255,.2);
    padding-left: 1rem;
}

.navigation-2depth>li.active {
    padding-bottom: 12px;
}

.navigation-2depth>li {
    border-bottom: 1px solid rgba(255,255,255,.2)
}

.navigation-2depth>li:last-child>p,
.navigation-2depth>li:last-child>a {
    border-bottom: none;
}

.navigation-2depth>li>p,
.navigation-2depth>li>a {
    margin-bottom: 0;
    padding: 12px 0;
    transition: all .3s;
}

.navigation-3depth>li>p,
.navigation-3depth>li>a {
    margin-bottom: 0;
    transition: all .3s;
    padding: 8px 0;
    color: rgba(255,255,255,.7)
}

.navigation-3depth>li>a {
    display: inline-block;
}

.navigation-3depth>li>a::before {
    content: '- ';
    display: inline;
    margin: 0 5px;
}

.navigation-2depth>li .navigation-3depth {
    height: 0;
    overflow: hidden;
    transition: all .3s;
    opacity: 0;
    padding-left: 1rem;
}

.navigation-2depth>li.active .navigation-3depth {
    opacity: 1;
    height: auto;
    transition: all .3s;
}

.favorites-no {
    height: auto;
    opacity: 1;
    /* transition: all .3s; */
    overflow-y: auto;
}

.favorites .favorites-no {
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    /* transition: all .3s; */
}

.navigation-favorites {
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    /* transition: all .3s; */
}

.favorites .navigation-favorites {
    height: auto;
    opacity: 1;
    padding: 1rem;
    /* transition: all .3s; */
}


/*******************************************************************************
                                검색폼
********************************************************************************/
.search-area {
    position: relative;
    overflow: hidden;
}

.search-form {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.search-button {
    width: 100px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    background-color: #f5f5f5;
    transition: all .3s ease-in-out;
}

.search-button:hover {
    background-color: #eaeaea;
}

.window-popup-con .search-button {
    width: 100px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    background: #007BFF;
    transition: all .3s ease-in-out;
    color: #ffffff;
}

.window-popup-con .search-button:hover {
    background: #005FDB;
}

.search-input-wrap {
    font-size: 0;
    margin: -0.5rem;
    width: calc(100% - 113px)
}

.search-input-wrap.full {
    width: 100%;
}

.search-input-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.search-input-row .input-wrapper {
    flex: 1 1 0;
}

.search-input-row .input-wrapper.grow2 {
    flex: 1.5 1 0!important;
}

.search-input-row .input-wrapper.grow3 {
    flex: 2 1 2rem!important;
}

.search-input-wrap .search-input {
    vertical-align: top;
}

.search-input {
    display: inline-block;
    margin: 0.5rem;
    font-size: 15px;
}

.search-input label {
    display: block;
    align-items: center;
    color: #000;
    /* vertical-align: top; */
    font-weight: 500;
    margin-bottom: 6px;
}

.search-input label.form-check-label {
    margin-bottom: 0!important;
}

.input-wrapper strong {
    font-weight: 500;
    margin-right: 10px;
}

.input-wrapper a {
    text-decoration: underline;
}

.search-input .btw-bullet {
    width: 1rem;
    display: inline-block;
    text-align: center;
    font-weight: 400;
}

/* .search-input-wrap .popup-input {} */

.popup-input .btw-bullet {
    width: 1rem;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    font-size: 1rem;
}

.flex-box .btw-bullet {
    width: 1rem;
    display: inline-block;
    text-align: center;
    font-weight: 400;
}

.search-input input[type="radio"] {
    width: auto;
    margin-right: 0.5rem;
}

.input-wrapper input,
.input-wrapper select {
    width: 100%;
}

.input-wrapper .plugin-remove_button input {
    width: auto!important;
    height: auto!important;
}

.input-wrapper label {
    display: inline-block;
    white-space: nowrap;
}

.input-wrapper {
    display: flex;
    margin-bottom: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.input-wrapper .discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.input-wrapper .discount strong {
    white-space: nowrap;
}

.input-wrapper .form-label,
.input-wrapper>dt {
    width: 110px !important;
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: 1rem;
}

.input-wrapper>div,
.input-wrapper>dd {
    width: 100%;
    position: relative;
}

.input-wrapper>label+div,
.input-wrapper>dt+dd {
    width: calc(100% - 110px) !important;
    position: relative;
    flex-wrap: wrap;
}

.input-wrapper>dd {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.input-wrapper>dd>div {
    position: relative;
}

.input-wrapper>dd>div:last-of-type {
    margin-right: 0;
}

.input-wrapper>dd div.flex-1 {
    flex: 1;
}

.flex-td {
    display: flex;
    padding: 0 10px;
    gap: 5px;
}

.flex-td input {
    width: 100%!important;
}

.flex-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.input-wrapper>dd div .unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.input-wrapper dd.validation-wrap {
    margin-left: 110px;
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
}

.form-check-wrap {
    height: 36px;
    display: flex;
    align-items: center;
}

.form-check-inline {
    display: inline-flex;
    margin-right: 1rem;
    font-size: 1rem;
    min-height: 36px;
    align-items: center;
    gap: 4px;
}

.form-check-inline input {
    width: auto;
    height: auto;
    position: relative;
    top: 1px;
}

.form-check-flex {
    display: flex;
    margin-right: 1rem;
    min-height: 36px;
    align-items: center;
}

.form-check-flex:last-child {
    margin-right: 0;
}

.form-check-flex input {
    width: auto;
    height: auto;
    position: relative;
    top: 1px;
    margin-right: 3px;
}

@media screen and (max-width: 1440px) {
    /* .input-wrapper { */
        /* display: block; */
    /* } */

    .input-wrapper>dt {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    .pd-con-row .input-wrapper>dt {
        width: 100px !important;
        margin-bottom: 0;
    }

    .input-wrapper>dd {
        width: 100% !important;
    }
}

/*******************************************************************************
                                회원관리
********************************************************************************/
.calendar-wrap,
.user-btn-wrap {
    display: flex;
    text-align: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.pagination-helper {
    display: flex;
}

.pagination-result {
    display: flex;
    justify-content: start;
    align-items: center;
}

.user-btn-wrap a,
.user-btn-wrap button {
    height: 36px;
    margin-left: 0.5rem;
}

.dataTables_wrapper {
    position: relative;
}

.dataTables_wrapper div.dataTables_length label {
    position: absolute;
    bottom: 100%;
    right: calc(240px + 2rem);
    width: 160px;
}

.dataTables_wrapper div.dataTables_length select {
    margin: 0 !important;
    width: 100% !important;
    height: 36px;
}

.dataTables_wrapper div.dataTables_info {
    position: absolute;
    bottom: 100%;
    left: 0;
    color: #000;
}

.dataTables_wrapper div.dataTables_info span {
    color: #4a81ff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 1rem !important;
}

/*******************************************************************************
                             팝업
********************************************************************************/
.edm-modal {
    display: none;
}

.registered-devices-popup-wrap,
.user-add-popup-wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    box-shadow: 0 .15rem .5rem rgba(0, 0, 0, 0.2);
}

.edm-modal.open,
.registered-devices-popup-wrap.open {
    display: block;
}

.user-add-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 860px;
    border-radius: 5px;
}

.user-add-popup-titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #fff;
    color: #000;
    border-bottom: 1px solid #e9ebec;
}

.user-add-popup-titleBox h2 {
    margin: 0;
}

.user-comment-remove,
.tooltip-close,
.user-add-popup-close {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    position: relative;
    width: 2rem;
    aspect-ratio: 1 / 1;
}

.user-comment-remove::before,
.user-comment-remove::after,
.tooltip-close::before,
.tooltip-close::after,
.user-add-popup-close::before,
.user-add-popup-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 1.5rem;
    height: 2px;
    background: #464646;
    border-radius: 1rem;
}

.tooltip-close::after,
.user-comment-remove::after,
.user-add-popup-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.user-add-popup-con {
    padding: 1rem;
    background: #fff;
}

/* .user-add-popup-con {max-height: 70vh;padding: 1rem;background: #fff;} */
.lecture-add-popup-row,
.user-add-popup-row {
    padding: 1rem;
    background: #F4F6F9;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 1rem;
}

.detail .user-add-popup-row {
    background: #fff;
}

.input-flex {
    display: flex;
}

.user-add-popup-row h3,
.detail-input dt,
.detail-img-title,
.user-add-popup-row label {
    position: relative;
    font-size: 1rem;
}

.detail-input.type2 dt {
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.req {
    position: relative;
}

.req::after {
    content: '*';
    display: contents;
    color: red;
}

.user-add-popup-row h3 {
    margin-right: 1rem;
}

.user-add-popup .text-center button {
    width: 20%;
}

.user-add-popup .text-right {
    text-align: right;
}

.example-select-box {
    display: none;
}

.example-select-box.active {
    display: block;
}

.popup-btn-wrap {
    display: flex;
    justify-content: end;
    align-self: center;
    margin-bottom: 1rem;
}

.popup-btn-wrap button {
    margin-left: 0.5rem;
}

.popup-btn-wrap select {
    width: auto;
}

/* 등록기기 팝업 */
.registered-devices-popup-wrap .user-add-popup-con {
    position: relative;
}

.registered-devices-btn-wrap {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.registered-devices-btn-wrap-input {
    display: flex;
    margin-right: 1rem;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #767676;
}

.registered-devices-btn-wrap-input label {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 10px 20px; */
    width: 120px;
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    /* color: #fff; */
    transition: all .3s;
    white-space: nowrap;
    cursor: pointer;
}

.registered-devices-btn-wrap-input label.active {
    background: #767676;
    color: #fff;
    transition: all .3s;
}

.registered-devices-btn-wrap-input label:hover:not(.active) {
    background: #767676;
    color: #fff;
}

/*******************************************************************************
                             회원관리 상세
*******************************************************************************/
.calendar-wrap,
.detail-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ebec;
    margin-bottom: 14px;
    font-size: 1rem;
}

.detail-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.detail-title .button-wrap {
    position: absolute;
    right: 0;
    top: -6px;
    display: flex;
    align-items: center;
    gap: 5px;

}

.input-wrapper dd.detail-img-wrap {
    flex-direction: column;
    /* width: 130px!important; */
    align-items: flex-start;
}

.detail-img {
    position: relative;
    aspect-ratio: 130 / 150;
    background: #F2F2F2;
    overflow: hidden;
    width: 130px;
}

.detail-img.img-size2 {
    aspect-ratio: 600 / 350;
    background: #F2F2F2;
    overflow: hidden;
    width: 600px;
}

.detail-img>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
}

.detail-img .btn-delete {
    position: absolute;
    right: 5px;
    top: 5px;
    border: 0;
    width: 24px;
    height: 24px;
    text-indent: -99999px;
    background-image: url(../images/ico-delete.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    z-index: 999;
    cursor: pointer;
}

.detail-img-notice {
    font-size: 13px;
}


.input-wrapper dd.thumbnail-img-wrap {
    flex-direction: column;
    /* width: 130px!important; */
    align-items: flex-start;
}

.thumbnail-img {
    position: relative;
    aspect-ratio: 512 / 344;
    background: #F2F2F2;
    overflow: hidden;
    width: 100%;
}

.thumbnail-img>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
}

.thumbnail-img .btn-delete {
    position: absolute;
    right: 5px;
    top: 5px;
    border: 0;
    width: 24px;
    height: 24px;
    text-indent: -99999px;
    background-image: url(../images/ico-delete.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    z-index: 999;
    cursor: pointer;
}

.thumbnail-img-notice {
    font-size: 13px;
}

.thumbnail-img-wrap.multi {
    flex-direction: row!important;
}

.detail .detail-con-wrap {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-gap: 1rem;
}

.detail .detail-con-wrap2 {
    display: grid;
    grid-gap: 1rem;
}

.detail .detail-con-wrap3 {
    display: grid;
    grid-template-columns: 4fr 8fr;
    grid-gap: 1rem;
    align-items: start;
}

.detail .detail-con-wrap4 {
    display: grid;
    grid-template-columns: 8fr 4fr;
    grid-gap: 1rem;
}

/* .detail .detail-con.card {

} */

.detail .user-add-popup-row {
    padding: 0;
}

.detail .user-add-popup-row .flex-box .btn-style-3 {
    width: 30%;
    word-break: keep-all !important;
    white-space: normal;
}

.detail #calendar {
    margin-bottom: 1rem;
}

.detail-calendar-text {
    display: flex;
    margin-top: 1rem;
}

.detail-title .detail-calendar-text {
    margin-top: 0;
    margin-left: auto;
    margin-right: 0;
}

.detail-calendar-text dl {
    display: flex;
    font-size: 1rem;
    margin-right: 1rem;
    color: #000;
}

.detail-calendar-text dl:last-of-type {
    margin-right: 0;
}

.detail-title .detail-calendar-text dl {
    font-size: 0.875rem;
}

.detail-calendar-text dl dt {
    margin-right: 0.6rem;
    position: relative;
    margin-bottom: 0;
}

.detail-calendar-text dl dt::before {
    content: ':';
    position: absolute;
    left: calc(100% + .3rem);
    top: 50%;
    transform: translate(-50%, -50%);
}

.detail-calendar-text dl dd {
    margin-bottom: 0;
}

/*******************************************************************************
                             삼품 상세
*******************************************************************************/
.lecture-detail-con {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

.page-btn-wrap {
    display: flex;
    margin-left: auto;
    margin-right: 0;
    gap: 5px;
}

.input-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .5rem;
}

.input-grid>span {
    display: flex;
    align-items: center;
}

.input-grid>span>input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.input-grid>span>label {
    margin-bottom: 0;
}

.input-wrapper input[type="button"] {
    width: 20%;
    margin-left: 0.5rem;
}

.input-wrapper textarea {
    width: 100%;
    border: 1px solid #CECECE;
}

.thumbnail,
.video-box {
    margin-bottom: 0.5rem;
    aspect-ratio: 493 / 280;
    background: #CECECE;
}

.thumbnail>img,
.video-box>video {
    width: 100%;
    height: 100%;
}

.thumbnail-img {
    aspect-ratio: 512 / 344;
    background: #F2F2F2;
    overflow: hidden;
}

.thumbnail-img-btn-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    max-width: 100%;
}

.instructors-curriculum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
}

.instructors-curriculum-col dt {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.instructors-curriculum-col dt span {
    display: inline-block;
    width: 20%;
    margin-right: 1rem;
    font-weight: 700;
    font-size: 1rem;
}

.instructors-curriculum-col select {
    width: auto;
    padding-right: 2rem;
}

.instructors-curriculum-col textarea {
    display: inline-block;
    height: 10rem;
}

.table-btn-wrap {
    position: relative;
}

.table-btn {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1440px) {
    .lecture-detail-con {
        grid-template-columns: repeat(1, 1fr);
    }
}

/*******************************************************************************
                             탭메뉴
********************************************************************************/
.tab-content-warpper {
    background-color: #ffffff;
}

.detail-tab-menu ul {
    position: relative;
    z-index: 5;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e9ebec;
}

.detail-tab-menu ul li {
    margin: 0 .2rem;
}

.detail-tab-menu ul li:first-child {
    margin-left: 0;
}

.detail-tab-menu ul li a {
    display: inline-block;
    /* border-radius: 1rem 1rem 0 0; */
    padding: 1rem 2rem;
    background: #ffffff;
    margin-left: -1px;
    /* border: 1px solid #e9ebec; */
    border-bottom: none;
    color: #999999;
    transition: all .3s ease-in-out;
    position: relative;
}

.detail-tab-menu ul li a:hover {
    color: #212121;
}

.detail-tab-menu ul li a::after {
    content: '';
    display: block;
    width: 0%;
    height: 2px;
    background-color: #007BFF;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    transition: all .3s ease-in-out;
}

.detail-tab-menu ul li a.activated {
    color: #007BFF;
    /* background: #DEEEFF; */
    border: none;
    font-weight: 500;
    /* border-bottom: 1px solid #007BFF; */
}

.detail-tab-menu ul li a.activated::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
}

/*******************************************************************************
                            토탈
********************************************************************************/
.user-total {
    display: flex;
    align-items: center;
}

.user-total dl {
    display: flex;
    margin-right: 1rem;
    font-size: 1rem;
    color: #000;
}

.user-total dl dt {
    margin-right: 0.4rem;
}

/*******************************************************************************
                         회원관리 상세 테이블
********************************************************************************/
.table-wrap {
    border: 1px solid #dbdde0;
    margin-bottom: 1rem;
    border-radius: 3px;
}

/* 하위 Tab Content 닫힌 상태 활성화  */
.tab-content-warpper div.tab-close {
    display: none;
}

div.fc-scrollgrid-sync-inner a {
    pointer-events: none;
}

.detail-img-btn-wrap {
    display: flex;
    margin-bottom: 0.5rem;
    width: 130px;
}

.detail-img-remove {
    width: 25%;
}

.detail-img-add {
    width: 75%;
}

.dropdown-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f3f6f9;
}

.dropdown-bar h2 {
    font-size: 1.2rem;
    margin: 0;
}

.dropdown-bar button {
    width: 2rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: none;
    border: none;
    transition: all .3s;
    background: #000 url('../images/bottom-arrow.svg') no-repeat center center;
    background-size: 60%;
    border-radius: 50%;
    cursor: pointer;
}

.detail-table-wrap {
    padding: 1rem;
}

table.detail-table tr:hover {
    background: none;
}

table.detail-table th,
table.detail-table td {
    padding: 10px;
    border-bottom: 1px solid #e9ebec;
}

table.detail-table th {
    background-color: #f3f6f9;
    font-size: 15px;
    font-weight: 500;
}

table.detail-table td {
    font-size: 14px;
}

table.detail-table td a {
    color: #212121;
}

table.detail-table td p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.table-wrap.open .dropdown-bar {
    background: rgb(0 123 255 / 5%);
}

.table-wrap.open .dropdown-bar h2 {
    color: #007bff;
}

.table-wrap.open .dropdown-bar button {
    transform: rotate(180deg);
    transition: all .3s;
    background: #007BFF url('../images/bottom-arrow.svg') no-repeat center center;
}

.table-wrap .detail-table-wrap {
    display: none;
}

.table-wrap.open .detail-table-wrap {
    display: block;
}

.detail-tab-menu ul li a {
    border-bottom: 1px black;
}

/*******************************************************************************
                         회원관리 코멘트
********************************************************************************/
.comment-wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.comment-con {
    flex: 1 1 auto;
}

.comment-con h2 {
    font-weight: 400;
    font-size: 1rem;
    margin: 0.5rem 0;
}

.comment-con h2 span {
    color: #007BFF;
}

.comment-textarea-wrap {
    display: flex;
    margin-bottom: 1rem;
}

.comment-textarea-wrap textarea {
    width: calc(100% - 150px - 0.5rem);
    height: 150px;
    padding: 0.5rem;
    resize: none;
    border: 1px solid #CECECE;
    font-size: 14px;
    padding: 10px;
    color: #212121;
    outline: none;
    transition: all .2s ease-in-out;
}

.comment-textarea-wrap textarea:focus {
    border: 1px solid #999999;
}

.comment-textarea-wrap button {
    width: 150px;
    font-size: 1rem;
    height: 150px;
    margin-left: 0.5rem;
}

.comment-row {
    padding: 1rem;
    background: #EDF6FF;
    margin-bottom: 1rem;
}

.comment-row.comment-reply {
    background-color: #ffffff;
}

.user-comment {
    position: relative;
    display: flex;
    margin-bottom: 0.5rem;
}

.user-comment-remove {
    position: absolute!important;
    right: 0;
    top: 0;
    background: none;
    border: none;
    width: 50px;
    display: inline-block;
}

.user-comment-img {
    width: 46px;
    margin-right: 1rem;
}

.user-comment-img img {
    width: 100%;
    aspect-ratio: 130 / 150;
}

.user-comment-contents {
    width: calc(100% - 46px - 1rem);
}

.user-comment-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.user-comment-name {
    font-size: 1rem;
    font-weight: 600;
}

.comment-text {
    font-size: 1rem;
    margin: 0.5rem 0;
}

.comment-btn-wrap {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.result-td {
    background-color: rgb(0 123 255 / 5%);
}

.result {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}

.result a {
    color: #007BFF!important;
    border-bottom: 1px solid #007BFF;
}

.result .order-number {
    margin-left: auto;
}

.result .price-name,
.result .attendance-rate,
.result .price {
    margin-left: 100px;
}

.table-title {
    font-weight: 500;
    margin-top: 2rem;
}

.table-title + .detail-table {
    margin-top: 0.5rem;
}

.detail-table td.change-history {
    background-color: rgb(255 91 50 / 25%);
}

/* 윈도우 팝업 디자인 추가 */


.window-popup {
    min-height: 100%;
    background-color: #ffffff;
}

.window-popup-titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #fff;
    color: #000;
    border-bottom: 1px solid #e9ebec;
}

.popup-search-wrap {
    padding: 20px;
    border-radius: 5px;
    background-color: #f3f6f9;
}

.popup-search-wrap .search-input-wrap,
.pd-event .search-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pd-event .search-input-wrap,
.mod-form .search-input-wrap {
    width: 100%;
}

.popup-search-wrap .search-input-wrap,
.popup-search-wrap .search-input-wrap .input-wrapper,
.popup-search-wrap .search-input-wrap .form-label,
.pd-event .search-input-wrap,
.pd-event .search-input-wrap .input-wrapper,
.pd-event .search-input-wrap .form-label {
    margin: 0!important;
    margin-bottom: 0!important;
}

.popup-search-wrap .search-input-wrap .input-wrapper>div {
    display: flex;
    min-height: 36px;
    align-items: center;
}

.popup-search-wrap .search-input-wrap .form-label,
.pd-event .search-input-wrap .form-label {
    font-weight: 500;
}

.popup-search-wrap .search-input-wrap .input-wrapper label input {
    flex: 0;
    margin-right: 0.5rem;
}

.pd-event .input-wrapper>div,
.pd-event .input-wrapper>dd {
    display: flex;
}

.pd-event .input-wrapper input,
.pd-event .input-wrapper select,
.popup-search-wrap .search-input-wrap .input-wrapper input,
.popup-search-wrap .search-input-wrap .input-wrapper select {
    width: auto;
    flex: 1 1 0;
}

.pd-event .input-wrapper input + input,
.pd-event .input-wrapper input + select,
.pd-event .input-wrapper select + input,
.pd-event .input-wrapper select + select {
    flex: 0.75 0.5 0;
    margin-left: 0.5rem;
}


.popup-search-wrap .search-input-wrap .input-wrapper input + input,
.popup-search-wrap .search-input-wrap .input-wrapper input + select,
.popup-search-wrap .search-input-wrap .input-wrapper select + input,
.popup-search-wrap .search-input-wrap .input-wrapper select + select {
    flex:1 1 0;
    margin-left: 0.5rem;
}

.popup-search-wrap .search-input-wrap .input-wrapper label {
    font-size: 1rem;
}

.pd-event .input-wrapper .button,
.mod-form .input-wrapper .button {
    margin-left: 0.5rem;
}

.input-wrapper .active-val {
    padding-bottom: 24px;
}

.input-wrapper>div.active-val .validation-wrap {
    position: absolute;
    height: 24px;
    bottom: 0;
    left: 0;
    line-height: 24px;
}

.window-popup-con .total {
    background-color: #f3f6f9;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    gap: 2rem;
}

.window-popup-con .total dl {
    display: flex;
    gap: 1rem;
}

.window-popup-con .total dl dt {
    font-weight: 500;
}

.refund-title,
.pd-wrap .pd-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}

.refund-title input[type=checkbox],
.pd-wrap .pd-title input[type=checkbox] {
    margin-left: 10px;
    position: relative;
    top: 1px;
}

.pd-wrap .pd-title input[type=checkbox] {
    margin-right: auto;
}

.pd-wrap .pd-title .button {
    margin-left: auto;
    margin-right: 0;
}

.refund-title label {
    margin-left: 0px;
    margin-right: auto;
    padding-left: 5px;
}

.pd-wrap .pd-con-wrap {
    border: 1px solid #dbdde0;
    margin-bottom: 1rem;
    border-radius: 3px;
}

.pd-wrap .pd-con-wrap .pd-title-bar {
    background-color: rgb(0 123 255 / 5%);
    padding: 20px;
    display: flex;
}

.pd-wrap .pd-con-wrap .pd-title-bar dl {
    display: flex;
    flex: 1 1 auto;
}

.pd-wrap .pd-con-wrap .pd-title-bar dl dt {
    width: 120px !important;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
}
.pd-wrap .pd-con-wrap .pd-title-bar dl dd {
    width: calc(100% - 120px) !important;
    display: flex;
    align-items: center;
    color: #007BFF
}

.pd-wrap .pd-con-wrap .pd-title-bar .button {
    margin: -8px 0;
}

.pd-wrap .pd-con-wrap .pd-con-row {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-gap: 1rem;
    align-items: center
}

.pd-con {
    padding: 20px;
}

.w100 .pd-con {
    padding: 0;
}

.pd-con .pd-con-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-con .pd-con-title h3 {
    font-size: 1rem;
}

.pd-con .pd-con-title .btn-wrap {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 0;
}

.pd-con .pd-con-title .btn-wrap select {
    min-width: 200px;
}

.pd-con .table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}

.pd-con .table-title h3 {
    font-size: 1rem;
}

.pd-con .table-title div {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.pd-con .table-title div dl {
    display: flex;
    gap: 1rem;
}

.pd-con .table-title div dl dd {
    color: #007BFF
}

.pd-con .table-alert {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: rgba(34, 204, 105, 0.15);
}

.pd-con .table-alert p {
    font-size: 13px;
    padding-left: 28px;
    position: relative;
}

.pd-con .table-alert p::before {
    content: '!';
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    border-radius: 20px;
    color: #ffffff;
    font-weight: bold;
    line-height: 14px;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    text-align: center;
}

.pd-con .table-alert dl {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 2rem;
}

.pd-con .table-alert dl:first-of-type {
    margin-left: auto;
}

.pd-con .table-alert dt {
    font-weight: 500;
}

.pd-con .table-alert dd {
    display: flex;
    align-items: center;
}

.pd-con .table-alert dl input[type=text],
.pd-con .table-alert dl input[type=number] {
    width: 50px;
}

.pd-con .validation-wrap {
    margin-top: 0.5rem
}

.pd-wrap .pd-con-wrap>h3 {
    margin: 0 20px 1rem;
}

.pd-wrap .pd-con-wrap .pd-event {
    background-color: #f3f6f9;
    padding: 20px
}

.window-popup-titleBox h2 {
    margin: 0;
}

.user-comment-remove,
.tooltip-close,
.window-popup-close {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    position: relative;
    width: 2rem;
    aspect-ratio: 1 / 1;
}

.user-comment-remove::before,
.user-comment-remove::after,
.tooltip-close::before,
.tooltip-close::after,
.window-popup-close::before,
.window-popup-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 1.5rem;
    height: 2px;
    background: #464646;
    border-radius: 1rem;
}

.tooltip-close::after,
.user-comment-remove::after,
.window-popup-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.window-popup-con {
    padding: 1rem;
    background: #fff;
}

/* .window-popup-con {max-height: 70vh;padding: 1rem;background: #fff;} */
.lecture-add-popup-row,
.window-popup-row {
    padding: 1rem;
    background: #F4F6F9;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 1rem;
}

.detail .window-popup-row {
    background: #fff;
}

.window-popup-row .input-flex {
    display: flex;
}

.window-popup-row h3,
.detail-input dt,
.detail-img-title,
.window-popup-row label {
    position: relative;
    font-size: 1rem;
}

.detail-input + h2 {
    margin-top: 3rem;
}

.window-popup-row h3 {
    margin-right: 1rem;
}

.window-popup .text-center button {
    width: 20%;
    display: inline-block;
}

.window-popup .text-right {
    text-align: right;
}

.example-select-box {
    display: none;
}

.example-select-box.active {
    display: block;
}

.popup-btn-wrap {
    display: flex;
    justify-content: end;
    align-self: center;
    margin-bottom: 1rem;
}

.popup-btn-wrap button {
    margin-left: 0.5rem;
}

.popup-btn-wrap select {
    width: auto;
}

/* 등록기기 팝업 */
.registered-devices-popup-wrap .window-popup-con {
    position: relative;
}


/* 정보 알림 */
.info {
    margin-left: 2px;
    display: inline-block;
    position: relative;
}

.info .ico-info {
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #212121;
    border-radius: 20px;
    color: #212121;
    font-weight: bold;
    line-height: 14px;
    font-size: 12px;
    font-style: normal;
    text-align: center;
    cursor: pointer;
}

.info .tooltip-con {
    display: none;
    position: absolute;
    width: 240px;
    background-color: #000;
    color: #ffffff;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 10px);
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    white-space: normal;
}

.info:hover .tooltip-con {
    display: block;
}

.info .tooltip-con::after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 9px 5px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(180deg) translateX(50%);
    position: absolute;
    bottom: -7px;
    left: 50%;
}

.card-body table.default-table {
    table-layout: auto;
}

.card-body table.default-table.fixed-table {
    table-layout: fixed!important;
}

.sale-table-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 428px;
    margin: 0 auto;
}

.sale-table-select.cont1 {
    width: 282px;
}

.sale-table-select dt {
    width: 136px!important;
}

.sale-table-select dd {
    width: 282px;
    display: flex;
    align-items: center;
}
.sale-table-select dd .btw-bullet {
    display: inline-block;
    width: 10px;
}
.sale-table-select input,
.sale-table-select select {
    width: 136px!important;
}

.sale-table-select + .validation-wrap {
    width: 428px;
    margin: 0 auto;
}

.sale-table-select.cont1 dd {
    width: 136px;
    display: flex;
    align-items: center;
}

.sale-table-select.cont1 + .validation-wrap {
    width: 282px;
    display: flex;
    align-items: center;
}

.flag-color-list {
    display: flex;
    justify-content: center;
}

.detail-input .flag-color-list {
    display: inline-flex;
}

.detail-input.multi-col  {
    display: flex;
    flex-wrap: wrap;
}

.detail-input.multi-col dl {
    width: 50%;
}

.flag-color-list input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    cursor: pointer;
    vertical-align: top;
    margin-right: -1px;
}

.flag-color-list input:checked::after {
    content: '✔';
    display: block;
    text-align: center;
}

.form-control ~ button {
    min-width: 50px!important;
}

.p-alert {
    font-size: 13px;
    padding: 0 10px;
    padding-left: 32px;
    position: relative;
    text-align: left;
    font-weight: 400;
}
.p-alert::before {
    content: '!';
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    border-radius: 16px;
    color: #ffffff;
    font-weight: bold;
    line-height: 14px;
    font-size: 12px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -8px;
    text-align: center;
}

.table-info {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}

.top-select-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-select-form select {
    flex: 1 1 0;
}

.schedule-table-wrap {
    margin-top: 1rem;
}

/* 파일첨부 리스트 */
.file-list {
    flex: 1 1 auto;
    margin-bottom: -0.5rem;
}
.file-list li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 20px;
    border-radius: 3px;
    font-size: 14px;
    border: 1px solid #cecece !important;
    color: #212121;
    background-color: #f3f6f9 !important;
    margin-bottom: 0.5rem;
    position: relative;
}

.file-list li span {
    margin-left: 0.5rem;
}

.file-list li .ico-delete {
    position: absolute;
    right: 5px;
    top: 5px;
    border: 0;
    width: 24px;
    height: 24px;
    text-indent: -99999px;
    background-image: url(../images/ico-delete.svg);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 999;
    cursor: pointer;
}

/* 별점 */
/* Ratings widget */
.rate {
  display: inline-block;
  border: 0;
  vertical-align: top;
}
/* Hide radio */
.rate > input {
  display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
  float: right;
  color: #c2c8d4;
}
/* The star of the show */
.rate > label:before {
  display: inline-block;
  font-size: 24px;
  padding: 0 0.2rem;
  margin: 0;
  cursor: pointer;
  font-family: FontAwesome;
  content: "\f005 "; /* full star */
}
/* Zero stars rating */

/* Half star trick */
.rate .half:before {
  content: "\f089 "; /* half star no outline */
  position: absolute;
  padding-right: 0;
}
/* Click + hover color */
.rate input:checked ~ label, /* color current and previous stars on checked */
.rate label:hover, label:hover ~ label {
  color: #69A82C;
} /* color previous stars on hover */

/* Hover highlights */
.rate input:checked + label:hover, .rate input:checked ~ label:hover, /* highlight current and previous stars */
.rate input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
.rate label:hover ~ input:checked ~ label /* highlight previous selected stars */ {
  color: #528b18;
}


.rate-wrapper {
    display: flex;
    height: 36px;
    align-items: center;
}

.rate-wrapper dt {
    min-width: 268px;
    font-size: 15px;
    letter-spacing: -0.3px;
}

#forbidden-words ~ div {
    height:300px;
}

#forbidden-words ~ div .ts-control {
    height: 300px;
    align-items: flex-start;
    display: block;
}

/* toggle schedule table */

/* .toggle-sche td, .toggle-sche th{
    border: 0;
}
.toggle-sche .fc-scrollgrid {
    border: 0;
}

.toggle-sche .fc-daygrid-day-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-sche .fc-daygrid-day-events {
    display: none;
}

.toggle-sche .fc-day-today {
    background-color: transparent!important;
}

.toggle-sche td {
    cursor: pointer
}

.toggle-sche td.selected {
    background-color: rgb(188 232 241 / 80%);
} */

.po-re {
    position: relative;
}

.before-select {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(217, 217, 217, 0.8);
    font-size: 1.75rem;
    font-weight: 600;
}

.input-wrapper span.unit {
    position: absolute;
    right: 0.5em;
    top: 0.4em;
    color: #c7c7c7;
}