/* reset */
* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

button {
    border: none;
    background: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000;
}

/*  To Do Check */
:root {
    --primary: rgb(0, 76, 255);
    --secondary: #b2b2b2;
    --success: yellowgreen;
    --danger: indianred;
    --warning: coral;
    --info: #FFBB00;
    --light: #F2F2F2;
    --dark: #101010;
}

.blind {
    margin: 0 !important;
}

.blind {
    display: block;
    width: 1px;
    height: 1px;
    line-height: 0;
    text-indent: -9999px;
}

.text-hidden {
    display: none;
}

a {
    text-decoration: none;
    color: #222222;
}
.mykl-calendar .calendar-input {
    display: none;
}

.mykl-calendar .calendar-container {
    display: none;
    width: 60%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mykl-calendar .calendar-container.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mykl-calendar .calendar-container div[class^="week"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mykl-calendar .calendar-container div[class^="week"] > div {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
}

.mykl-calendar .calendar-container .year-month {
    position: relative;
    width: 100%;
}

/*.calendar-container .year-month > * {*/
/*    position: absolute;*/
/*}*/

.mykl-calendar .calendar-container .year-month .year {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}

.mykl-calendar .calendar-container .year-month .month {
    width: 100%;
    text-align: center;
    padding: 5px;
}

.mykl-calendar .calendar-container .year-month .calendar-button-group {
    position: absolute;
    width: 100%;
    top: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.mykl-calendar .day:hover {
    background: #bdbdbd;
}

.mykl-calendar .calendar-container div[class^="week"] .day:first-child {
    color: red;
}

.mykl-calendar .calendar-container div[class^="week"] .day:last-child {
    color: blue;
}

.mykl-calendar .mark {
    background: #d7a8f5;
}

.mykl-calendarList .calendar-container {
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

#header-search{
    background-color: white;
    border: 1px solid blue;
    border-radius: 20px;
}

.mykl-calendarList .calendar-container .year-month {
    background: var(--light);
}

.mykl-calendarList .calendar-container .year-month .calendar-button-group {
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.mykl-calendarList .calendar-button-group button {
    background: transparent;
    border: none;
    padding: 10px;
}

.mykl-calendarList .calendar-container .today {
    position: absolute;
    top: 50%;
    right: 20px;
    background: #F2F2F2;
    padding: 5px 10px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}


.mykl-calendarList .calendar-button-group .prev {
    margin-left: auto;
    margin-right: 50px;
}

.mykl-calendarList .calendar-button-group .next {
    margin-right: auto;
    margin-left: 50px;
}

.mykl-calendarList .calendar-container .month-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px 100px;
    border-bottom: 1px solid #707070;
}

.mykl-calendarList .calendar-container .month{
    padding: 5px 10px;
    cursor: pointer;
}

.mykl-calendarList .calendar-container .month.active {
    background: #B0B0B0;
}

.mykl-calendarList .calendar-container .weekday {
    border-bottom: 1px solid #707070;
}

.mykl-calendarList .calendar-container div[class^="week"] > * {
    padding: 10px 0;
    border-right: 1px solid #707070;
    border-bottom: 1px solid #707070;
}

.mykl-calendarList .calendar-container div[class^="week"] > *:first-child {
    border-left: 1px solid #707070;
}



.mykl-calendarList .calendar-container .date {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding-left: 10px;
}

.mykl-calendarList .calendar-container .content {
    min-height: 50px;
}
.mykl-check .check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.mykl-check .check-label {
    font-size: 1rem;
    display: inline-block;
    position: relative;
    left: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding-left: 1.5rem;
}

.mykl-check .check-label:before {
    width: 1rem;
    height: 1rem;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border: 1px solid rgba(189, 189, 189, 0.58);
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mykl-check .check-input:checked + .check-label:before {
    background: var(--primary);
    border: 1px solid var(--primary);
}

.mykl-check .check-input:checked + .check-label:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 0.7rem;
    height: 0.35rem;
    border: 0.125rem solid;
    border-color: transparent transparent rgba(242, 242, 242, 0.9) rgba(242, 242, 242, 0.9);
    top: 40%;
    left: 0;
    -webkit-transform: translate(20%, -50%) rotate(-45deg);
        -ms-transform: translate(20%, -50%) rotate(-45deg);
            transform: translate(20%, -50%) rotate(-45deg);
    -webkit-transform-origin: 50%;
        -ms-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* 상태 */
.mykl-check .check-input:disabled + .check-label {
    pointer-events: none;
    -webkit-filter: none;
            filter: none;
    opacity: .5;
}

.mykl-check .check-input[readonly] + .check-label {
    pointer-events: none;
    cursor: default;
}

.mykl-file .file-input {
    display: none;
}

.mykl-file .file-btn {
    padding: 10px 20px 10px 36px;
    border-radius: 18px;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    position: relative;
    background: #707070;
    cursor: pointer;
}

.mykl-file .file-btn:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 10px;
    height: 2px;
    background: white;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.mykl-file .file-btn:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 10px;
    height: 2px;
    background: white;
    -webkit-transform: translateY(-50%) rotateZ(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
            transform: translateY(-50%) rotateZ(90deg);
}

.mykl-file .uploaded-list {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.mykl-file .uploaded-list li {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #DFDFDF;
    line-height: 1;
    border-radius: 18px;
    padding: 10px 20px;
}

.mykl-file .uploaded-list li + li {
    margin-left: 10px;
}

.mykl-file .delete-file-btn {
    position: relative;
    margin-left: 8px;
    text-indent: -9999px;
    border: none;
    background: none;
    width: 16px;
    height: 16px;
}

.mykl-file .delete-file-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #707070;
    -webkit-transform: translateX(-50%) rotateZ(45deg);
        -ms-transform: translateX(-50%) rotate(45deg);
            transform: translateX(-50%) rotateZ(45deg);
}

.mykl-file .delete-file-btn:after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 2px;
    height: 100%;
    background: #707070;
    -webkit-transform: translateX(50%) rotateZ(-45deg);
        -ms-transform: translateX(50%) rotate(-45deg);
            transform: translateX(50%) rotateZ(-45deg);
}
.form-group {
    position: relative;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
}

.form-group > * {
    margin: 0 0 12px 0;
}

.form-group .form-label {
    font-weight: 600;
    margin: 0 0 12px 0;
}

.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.form-row > * {
    margin: 0 12px 0 0;
}

.form-row > *:last-child {
    margin: 0;
}

.form-row .form-label {
    margin: 0;
}

.form-group .form-label {
    display: inline-block;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    min-width: 80px;
    width: 100px;
}

/*.form-group > .mykl-input {*/
/*    flex-shrink: 1;*/
/*}*/

.mykl-input {
    display: inline-block;
    border: 1px solid #DFDFDF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 1rem;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    line-height: 1;
    width: 100%;
}

/* 크기*/
.mykl-input .input-sm {
    font-size: 0.875rem;
}

.mykl-input .input-lg {
    font-size: 1.25rem;
}

/* 상태 */
.mykl-input .input-error {
    outline: transparent;
    border: 1px solid #FF0000;
}

.mykl-input .mykl-input:disabled {
    background: #F2F2F2;
}

.mykl-input .mykl-input:-moz-read-only {
    pointer-events: none;
}

.mykl-input .mykl-input:read-only {
    pointer-events: none;
}

/* password */
.mykl-input-password {
    display: inline-block;
    width: 100%;
    position: relative;
}

.mykl-input-password .mykl-input {
    padding-right: 46px;
}

.mykl-input-password .input-password-icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    cursor: pointer;
    width: 22px;
    height: 22px;
    background: url(../images/pass_eye.png);
    text-indent: -9999px;
}

.mykl-postSearch .mykl-input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.mykl-radio {
    position: relative;
    vertical-align: top;
}

.mykl-radio .radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.mykl-radio .radio-label {
    display: inline-block;
    position: relative;
    left: 0;
    cursor: pointer;
    font-size: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding-left: 1.5rem;
}

.mykl-radio .radio-label:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid rgba(189, 189, 189, 0.58);
    border-radius: 100%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mykl-radio .radio-input:checked + .radio-label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 1rem;
    background: var(--primary);
    border-radius: 100%;
    border: 0.15rem solid #fff;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* 상태 */
.mykl-radio .radio-input:disabled + .radio-label {
    pointer-events: none;
    -webkit-filter: none;
            filter: none;
    opacity: .5;
}

.mykl-radio .radio-input[readonly] + .radio-label {
    pointer-events: none;
    cursor: default;
}

.mykl-range {
    position: relative;
    /*width: 100%;*/
    width: 400px;
    max-width: 100%;
}

.mykl-range .slider {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 15px;
    margin-bottom: 20px;
    z-index: -3;
}

.mykl-range .slider .track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 15px;
    background: #bdbdbd;
    z-index: -3;
}

.mykl-range .slider .range {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25%;
    right: 25%;
    border-radius: 15px;
    background: var(--primary);
    z-index: -2;
}

.mykl-range .slider .thumb {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--primary);
}

.mykl-range .slider .thumb.left {
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}


.mykl-range .slider .thumb.right {
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.mykl-range .slider .thumb span {
    position: absolute;
    top: 100%;
}

.mykl-range input[type="range"] {
    position: absolute;
    /* opacity로 가린 것을 이벤트도 비활성화하기 위해 */
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    height: 10px;
    width: 100%;
    opacity: 0;
}

.mykl-range input[type="range"]::-ms-thumb {
    /* 겹쳐진 두 thumb를 모두 활성화 */
    pointer-events: all;
    width: 15px;
    height: 15px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    cursor: pointer;
    /* appearance를 해야 위의 스타일들을 볼 수 있음 */
    -webkit-appearance: none;
}

.mykl-range input[type="range"]::-moz-range-thumb {
    /* 겹쳐진 두 thumb를 모두 활성화 */
    pointer-events: all;
    width: 15px;
    height: 15px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    cursor: pointer;
    /* appearance를 해야 위의 스타일들을 볼 수 있음 */
    -webkit-appearance: none;
}

.mykl-range input[type="range"]::-webkit-slider-thumb {
    /* 겹쳐진 두 thumb를 모두 활성화 */
    pointer-events: all;
    width: 15px;
    height: 15px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    cursor: pointer;
    /* appearance를 해야 위의 스타일들을 볼 수 있음 */
    -webkit-appearance: none;
}

.mykl-range .step {
    position: absolute;
    display: block;
    width: 1px;
    height: 10px;
    background: antiquewhite;
    z-index: -1;
    -webkit-transform: translateX(7.5px);
        -ms-transform: translateX(7.5px);
            transform: translateX(7.5px);
    /*z-index: 3;*/
}
.mykl-select {
    position: relative;
    display: inline-block;
    min-width: 80px;
}

.mykl-select select{
    display: none;
}

.mykl-select .select-group {
    position: relative;
    width: 100%;
}

.mykl-select .select-selected {
    width: 100%;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 11px 32px 11px 16px;
    border-radius: 5px;
    border: 1px solid #DFDFDF;
    text-align: left;
    font-weight: 500;
    font-size: 1rem;
    color: #101010;
    display: block;
}

.mykl-select .select-selected:before {
    content:"";
    position: absolute;
    right:16px;
    top:50%;
    -webkit-transform: translateY(-50%) rotateZ(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotateZ(45deg);
    width: 8px;
    height: 2px;
    background: #707070;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.mykl-select .select-selected:after {
    content:"";
    position: absolute;
    right: 11px;
    top:50%;
    -webkit-transform: translateY(-50%) rotateZ(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotateZ(-45deg);
    width: 8px;
    height: 2px;
    background: #707070;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.mykl-select .select-selected.select-arrow-active:before {
    -webkit-transform: translateY(-50%) rotateZ(-225deg);
        -ms-transform: translateY(-50%) rotate(-225deg);
            transform: translateY(-50%) rotateZ(-225deg);
}

.mykl-select .select-selected.select-arrow-active:after {
    -webkit-transform: translateY(-50%) rotateZ(225deg);
        -ms-transform: translateY(-50%) rotate(225deg);
            transform: translateY(-50%) rotateZ(225deg);
}

.mykl-select .select-items div {
    color: #000;
    padding: 11px 32px 11px 16px;
    border: 1px solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    word-break: keep-all;
    white-space: nowrap;
}

.mykl-select .select-items {
    width: 100%;
    position: absolute;
    left: 0;
    border: 1px solid #DFDFDF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    z-index: 10;
    top: 100%;
    background-color: #fff;
}

.mykl-select .select-hide {
    visibility: hidden;
}

.mykl-select .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.mykl-select.select-sm .select-selected,
.mykl-select.select-sm .select-items div {
    padding: 8px 32px 8px 16px;
}
.mykl-textarea {
    border: 1px solid #DFDFDF;
    padding: 18px 20px;
    resize: none;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: auto;
    height: 300px;
}

.mykl-textarea.textarea-vertical {
    resize: vertical;
}

.mykl-textarea.textarea-horizontal {
    resize: horizontal;
}

.mykl-textarea.textarea-auto {
    resize: both;
}

.mykl-textarea.textarea-smart {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.mykl-textarea.textarea-smart::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}


.mykl-time .time-input {
    display: none;
}

.mykl-time .time-wrapper {
    display: none;
    position: relative;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 1);
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 1);
}

.mykl-time .time-wrapper.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: relative;
}

.mykl-time .day-night > * {
    display: block;
}

.mykl-time .time-box {
    display: inline-block;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}

.mykl-time .time-group {
    margin: 2px;
    cursor: pointer;
}

.mykl-time .time-mark {
    background: dodgerblue;
}
.accordion-item {
    font-size: 15px;
    color: #000000;
    font-weight: 500;
    position: relative;
    width: 100%;
    text-align: left;
    /*margin-bottom: 12px;*/
}

.accordion-item a {
    color: inherit;
}

.accordion-header {
    padding: 16px 0px;
}

.accordion-toggle {
    padding: 0;
    font-size: 15px;
    color: #000000;
    font-weight: 500;
    position: relative;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
}

/*.accordion-toggle:focus, .accordion-toggle:active {*/
/*    padding: 8px;*/
/*}*/

.accordion-toggle.show {
    color: #004CFF;
    font-weight: 600;
}

.accordion-toggle:before {
    content:"";
    position: absolute;
    right:16px;
    top:50%;
    -webkit-transform: translateY(-50%) rotateZ(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotateZ(45deg);
    width: 8px;
    height: 2px;
    background: #707070;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.accordion-toggle:after {
    content:"";
    position: absolute;
    right: 11px;
    top:50%;
    -webkit-transform: translateY(-50%) rotateZ(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotateZ(-45deg);
    width: 8px;
    height: 2px;
    background: #707070;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.accordion-toggle.show:before {
    -webkit-transform: translateY(-50%) rotateZ(-225deg);
        -ms-transform: translateY(-50%) rotate(-225deg);
            transform: translateY(-50%) rotateZ(-225deg);
    background: #004CFF;
}

.accordion-toggle.show:after {
    -webkit-transform: translateY(-50%) rotateZ(225deg);
        -ms-transform: translateY(-50%) rotate(225deg);
            transform: translateY(-50%) rotateZ(225deg);
    background: #004CFF;
}

.accordion-toggle * {
    pointer-events: none;
}

.accordion-body {
    overflow: hidden;
    height: 0;
    padding: 0 10px;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.accordion-body.show {
    padding: 10px;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    /*border: 10px solid transparent;*/
}

.accordion-body-item {
    border-radius: 5px;
    padding-bottom: 15px;
}

.accordion-body-item + .accordion-body-item {
    border-radius: 5px;
    padding: 15px 0;
}
.mykl-btn {
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-width: 80px;

    /*!* 한글, 영어 높이 동일 하게 됨*!*/
    line-height: 2;
    border: 1px solid transparent;
    background: #fff;
    padding: 5px 15px;
}

.mykl-btn:hover {
    opacity: 0.8;
}

/* 크기 */
.btn-sm {
    min-width: 50px;
}

.btn-lg {
    min-width: 140px;
}

.btn-round {
    border-radius: 28px;
}

.btn-full {
    width: 100%;
    max-width: none;
    max-width: initial;
}

/* 상태 */
.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary-rev {
    border: 1px solid currentColor;
    color: #004CFF;
}

.btn-secondary {
    border: 1px solid transparent;
    background: var(--secondary);
    color: #505050;
}

.btn-secondary-rev {
    color: #505050;
    border: 1px solid var(--secondary);
    background: #fff;
}

.btn-dark {
    border: 1px solid #101010;
    background: #101010;
    color: #fff;
}

.btn-hide {
    display: none !important;
}



.dropdown-toggle {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    color: #101010;
    /*white-space: nowrap;*/
}

.dropdown-toggle:hover {
    color: #222;
}

.dropdown-menu-outer {
    position: absolute;
    height: 0;
    overflow: hidden;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    padding-top: 8px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.dropdown-menu {
    border-radius:5px;
    background: #fff;
    height: auto;
    padding:20px 32px 20px 20px;
    -webkit-filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
            filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    overflow: hidden;
    -webkit-transform: matrix(1,0,0,1,0,0);
        -ms-transform: matrix(1,0,0,1,0,0);
            transform: matrix(1,0,0,1,0,0);
}

.dropdown-toggle:hover + .dropdown-menu-outer, .dropdown-menu-outer:hover {
    overflow: visible;
    height: auto;
    opacity: 1;
    z-index: 10;
}

.dropdown-item + .dropdown-item {
    margin-top: 35px;
}

.dropdown-text:hover {
    font-weight: 600;
    color: #004CFF;
}

.dropdown-text {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #505050;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.dropdown-list {
    float: left;
    display: inline-block;
    width: 100%;
}
.mykl-emotion {
    position: relative;
}

.mykl-emotion .remove-emotion {
    position: absolute;
    top: 0;
}

.mykl-emotion .emotion-group {
    display: none;
}
.mykl-emotion .btn-reset {
    margin-left: 10px;
}

.mykl-emotion .emotion-group.show {
    display: block;
}

.mykl-emotion .emotion-item {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    vertical-align: middle;
    text-indent: -9999px;
}

.mykl-emotion .emotion-group .emotion-item:hover {
    background-color: #bdbdbd;
}

.emotion-good {
    background: url(../images/emoji-smile.svg) no-repeat center;
}
.emotion-sad {
    background: url(../images/emoji-frown.svg) no-repeat center;
}
.emotion-like {
    background: url(../images/emoji-heart-eyes.svg) no-repeat center;
}
.emotion-bad {
    background: url(../images/emoji-angry.svg) no-repeat center;
}
.emotion-thumbsUp {
    background: url(../images/hand-thumbs-up.svg) no-repeat center;
}
.emotion-thumbsDown {
    background: url(../images/hand-thumbs-down.svg) no-repeat center;
}

.mykl-img img {
    width: 100%;
    height: 100%;
}

.image-cover img {
    -o-object-fit: cover;
       object-fit: cover;
}

.image-contain img {
    -o-object-fit: contain;
       object-fit: contain;
}

.image-fill img {
    -o-object-fit: fill;
       object-fit: fill;
}

figure.mykl-img {
    border: thin #c0c0c0 solid;
    padding: 5px;
    margin: auto 0;
}

figure.mykl-img > * {
    display: block;
}

figure.mykl-img img {
    height: calc(100% - 30px);
}

.mykl-img figcaption {
    display: inline-block;
    width: 100%;
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    min-height: 30px;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.mykl-navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mykl-navbar .nav-logo-cover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: 50px;
}

.mykl-navbar .nav-logo-cover .nav-logo {
    margin-left: 10px;
}

.mykl-navbar .nav-logo {
    margin-right: 50px;
}

.mykl-navbar .nav-logo {
    margin-right: 0px;
}

.mykl-navbar .nav {
    vertical-align: middle;
}

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.nav > li {
    vertical-align: top;
    padding: 0 25px;
}

.nav > li:first-child {
    padding-left: 0;
}

.nav-end {
    margin-left: auto;
}

/*.nav-menu {*/
/*    border-top: 1px solid #000;*/
/*    display: none;*/
/*}*/

/*.nav-menu > li {*/
/*    padding: 5px 10px;*/
/*    border-bottom: 1px solid #ccc;*/
/*}*/

.nav-toggle {
    display: none;
}

@media all and (max-width: 938px) {
    .mykl-navbar {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .nav-toggle {
        display: block;
        padding: 5px;
    }

    .nav-hamburger {
        position: relative;
        display: block;
        width: 10px;
        height: 2px;
        background: #000;
    }

    .nav-hamburger::before {
        content: "";
        display: block;
        width: 10px;
        height: 2px;
        background: #000;
        position: absolute;
        top: -4px;
        left: 0;
    }

    .nav-hamburger::after {
        content: "";
        display: block;
        width: 10px;
        height: 2px;
        background: #000;
        position: absolute;
        bottom: -4px;
        left: 0;
    }

    /*.mykl-navbar .nav {*/
    /*    display: none;*/
    /*    flex-basis: 100%;*/
    /*    flex-grow: 1;*/
    /*    align-items: center;*/
    /*    flex-direction: column;*/
    /*}*/

    /*.mykl-navbar .nav.show {*/
    /*    display: block;*/
    /*}*/
}
.mykl-pagination {
    text-align: center;
}
.page-item {
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #B0B0B0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.page-item a {
    font-weight: inherit;
    color: inherit;
}

.mykl-pagination .active,
.mykl-pagination .active a {
    font-weight: bold;
    color: #101010;
}

.mykl-item:hover,
.mykl-item:focus {
    font-weight: bold;
    color: #101010;
}

/*.page-item.disabled {*/
/*    pointer-events: none;*/
/*    background-color: #555555;*/
/*    color: #b7b7b7;*/
/*}*/

.page-prev, .page-next {
    width: 28px;
    height: 28px;
    margin: 0 10px 0 0;
    padding: 0;
    position: relative;
    border: 0;
    text-indent: -999999px;
    background: #B0B0B0;
    border-radius: 100%;
}

.page-prev:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: #fff transparent transparent #fff;
    -webkit-transform: translate(-30%, -50%) rotate(-45deg);
        -ms-transform: translate(-30%, -50%) rotate(-45deg);
            transform: translate(-30%, -50%) rotate(-45deg);
}

.page-next:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    -webkit-transform: translate(30%, -50%) rotate(45deg);
        -ms-transform: translate(30%, -50%) rotate(45deg);
            transform: translate(30%, -50%) rotate(45deg);
}
.process .process-item {
    background: var(--secondary);
    padding: 10px;

}

.process-item.active {
    background: var(--primary);
}

.process-item.disabled {
    background: var(--light);
}

.process-item.done {
    background: var(--success);
}
.mykl-progress {
    background: transparent;
    min-height: 20px;
    height: 100%;
    max-height: 50px;
}

.progress-bar {
    position: relative;
    color: var(--primary);
    border: 3px solid currentColor;
    -webkit-box-shadow: 0 0 20px inset currentColor;
            box-shadow: 0 0 20px inset currentColor;
    min-height: inherit;
    height: 100%;
    max-height: inherit;
}

.progress-value {
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0 10px;
}

.progress-primary .progress-bar {
    color: var(--primary);
}

.progress-secondary .progress-bar {
    color: var(--secondary);
}

.progress-success .progress-bar {
    color: var(--success);
}

.progress-danger .progress-bar {
    color: var(--danger);
}

.progress-warning .progress-bar {
    color: var(--warning);
}

.progress-info .progress-bar {
    color: var(--info);
}

.progress-light .progress-bar {
    color: var(--light);
}

.progress-dark .progress-bar {
    color: var(--dark);
}
.mykl-star .star-group {
    display: inline-block;
}
.mykl-star .star-item {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.star-fill {
    background: url(../images/star-fill.svg) no-repeat;
}
.star-half {
    background: url(../images/star-half.svg) no-repeat;
}
.star-empty {
    background: url(../images/star.svg) no-repeat;
}
.step {
    width: 150px;
    position: relative;
    /*border: 2px solid #000;*/
    /*border-right: none;*/
    margin-bottom: 5px;
}

.step-text {
    display: inline-block;
    padding: 5px;
    width: 150px;
    background: cadetblue;
}

.step.step-active:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 15px solid cadetblue;
    border-left: 0px solid transparent;
    border-right: 15px solid transparent;
    /*background: black;*/
    /*transform-origin: 0;*/
    -webkit-transform: translateX(15px);
        -ms-transform: translateX(15px);
            transform: translateX(15px);
}

.step.step-active:after {
    position: absolute;
    content: '';
    /*top: 100%;*/
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    /*width: 2px;*/
    /*height: 80%;*/
    border-bottom: 15px solid cadetblue;
    border-left: 0px solid transparent;
    border-right: 15px solid transparent;
    /*background: black;*/
    -webkit-transform-origin: 100%;
        -ms-transform-origin: 100%;
            transform-origin: 100%;
    -webkit-transform: translate(7px, 6px) rotate(90deg);
        -ms-transform: translate(7px, 6px) rotate(90deg);
            transform: translate(7px, 6px) rotate(90deg);

}

.step-active {
    background: skyblue;
}

/*.triangle {*/
/*    width: 0px;*/
/*    height: 0px;*/
/*    border-bottom: 180px solid #666666;*/
/*    border-left: 0px solid transparent;*/
/*    border-right: 180px solid transparent;*/
/*}*/
.tab-title {
    display: inline-block;
    font-size: 0.9rem;
    color: #fff;
    padding-left: 20px;
}

.tab-menu {
    font-size: 0;
}

.tab-title,
.tab-item {
    display: inline-block;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 0.875rem;
    color: #101010;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
}

.tab-item * {
    pointer-events: none;
}

.tab-item.active {
    font-weight: 600;
    background: var(--primary);
    color: #fff;
}

.tab-title > span,
.tab-item > span {
    display: inline-block;
    line-height: normal;
}

.tab-title:before,
.tab-item:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.tab-title:after,
.tab-item:after {
    content:'';
    display: block;
}

.tab-content {
    display: none;
    padding: 10px;
    border-top: 1px solid #bdbdbd;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.tab-content.show {
    display: block;
}

.tab-content.mykl-tab {
    padding: 0;
    border: none;
}

/* 상태 */
.tab-secondary .tab-item.active {
    background: var(--secondary);
}

.tab-success .tab-item.active {
    background: var(--success);
}

.tab-danger .tab-item.active {
    background: var(--danger);
}

.tab-warning .tab-item.active {
    background: var(--warning);
}

.tab-info .tab-item.active {
    background: var(--info);
}

.tab-light .tab-item.active {
    background: var(--light);
    color: #101010;
}

.tab-dark .tab-item.active {
    background: var(--dark);
}

/* disabled */
.tab-item.tab-disabled {
    pointer-events: none;
    color: var(--light );
}

/* nav 반대 */
[dir="ltr"] .tab-rev .tab-menu {
    text-align: right;
}
[dir="rtl"] .tab-rev .tab-menu {
    text-align: left;
}

/* 둥글게 */
.tab-round .tab-item {
    border-radius: 20px;
}

.tab-round .tab-item + .tab-item {
    margin-left: 10px;
}

.tab-round .tab-content {
    border-top: none;
}

/* 크기 */
.tab-lg > nav > .tab-title, .tab-lg > nav > .tab-item {
    width: 220px;
    height: 60px;
}

.tab-lg.tab-vertical > .tab-content.show {
    width: calc(100% - 220px);
}

/* 세로 정렬 */
.tab-vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tab-vertical > .tab-menu {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 120px;
            flex: 0 0 120px;
}

.tab-vertical > nav > .tab-title,
.tab-vertical > nav > .tab-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: none;
    border-top: 1px solid #F2F2F2;
    border-radius: 0;
    text-align: left;
}

.tab-vertical > .tab-content {
    display: none;
    border-top: none;
    border-left: 1px solid #B0B0B0;
}

.tab-vertical > .tab-content.show.mykl-tab {
    border-left: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tab-vertical > .tab-content.show {
    display: inline-block;
    width: 100%;
}


/*@media all and (max-width: 768px) {*/
/*    .tab {*/
/*        display: flex;*/
/*    }*/

/*    .tab-item {*/
/*        flex: 1;*/
/*        flex-shrink: 0;*/
/*        overflow: hidden;*/
/*        white-space: nowrap;*/
/*        text-overflow: ellipsis;*/
/*    }*/

/*    .tab-item.active {*/
/*        min-width: fit-content;*/
/*        text-overflow: initial;*/
/*    }*/
/*}*/
.mykl-table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.mykl-table th {
    font-size: 1rem;
    font-weight: 600;
}

.mykl-table td {
    font-size: 0.9rem;
}

.mykl-table thead {
    text-align: center;
    background-color: var(--light);
}

.mykl-table thead th,
.mykl-table thead td {
    padding: 14px;
}

.mykl-table thead th, td {
    vertical-align: middle;
}

.mykl-table tbody th,
.mykl-table tbody td {
    padding: 10px;
    vertical-align: middle;
}

.mykl-table tbody th a,
.mykl-table tbody td a {
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
}


.mykl-table tbody tr {
    border-top: 1px solid var(--light);
}

/* 상태 */
.table-primary thead {
    background: var(--primary);
    color: #fff;
}

.table-primary tbody tr {
    border-top: 1px solid var(--primary);
}

.table-secondary thead {
    background: var(--secondary);
    color: #fff;
}

.table-secondary tbody tr {
    border-top: 1px solid var(--secondary);
}

.table-success thead {
    background: var(--success);
}

.table-success tbody tr {
    border-top: 1px solid var(--success);
}

.table-danger thead {
    background: var(--danger);
    color: #fff;
}

.table-danger tbody tr {
    border-top: 1px solid var(--danger);
}

.table-warning thead {
    background: var(--warning);
}

.table-warning tbody tr {
    border-top: 1px solid var(--warning);
}

.table-info thead {
    background: var(--info);
}

.table-info tbody tr {
    border-top: 1px solid var(--info);
}

.table-dark thead {
    background: var(--dark);
    color: #fff;
}

.table-dark tbody tr {
    border-top: 1px solid var(--dark);
}

/*.mykl-table tbody .text-sm {*/
/*    font-size: 13px;*/
/*    line-height: 18px;*/
/*}*/

/*.mobile-collapse {*/
/*    visibility: collapse;*/
/*}*/

.mykl-tag {
    font-size: 13px;
}

.tag-input-box {
    position: relative;
}

.tag-input-box::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    content: '#';
    color: #000;
}

.tag-input-box.inactive::before {
    /*content: none;*/
    color: #b7b7b7;
}

.tag-input {
    font-size: 13px;
    border: none;
    padding-left: 8px;
    width: 200px;
    vertical-align: middle;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}

/* ie */
.tag-input::-ms-clear {
    display: none;
}

.tag-input-box.focus {
    display: inline-block;
    width: auto;
    padding: 0 9px;
    border-radius: 4px;
    line-height: 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #eff0f2;
    color: #000;
    vertical-align: top;
}

.tag-input:focus {
    outline: none;
}

.tag-input-box.focus .tag-input {
    background: #eff0f2;
    width: auto;
}

.tag-input-box .tag-hidden-text {
    display: inline-block;
    visibility: hidden;
    position: fixed;
    overflow:auto;
    min-width: 9px;
    width: auto;
}

.tag-item {
    display: inline-block;
    margin: 0 10px 0 0;
}

.tag-item .tag-text {
    display: block;
    height: 30px;
    padding: 0 9px;
    border-radius: 4px;
    line-height: 32px;
    background: #eff0f2;
    color: #000;
    font-style: normal;
}


.mykl-tag .mykl-tooltip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

.mykl-tag .mykl-tooltip.tooltip-active {
    display: inline-block;
}

.mykl-tag .mykl-tooltip.tooltip-active .tooltip-icon::after,
.mykl-tag .mykl-tooltip.tooltip-active .tooltip-content {
    display: block;
    opacity: 1;
}


/* 위치 */
.text-start {
    text-align: left !important;
    text-align: -moz-left !important;
    text-align: -webkit-left !important;
}

.text-center {
    text-align: center !important;
    text-align: -moz-center !important;
    text-align: -webkit-center !important;
}

.text-end {
    text-align: right !important;
    text-align: -moz-right !important;
    text-align: -webkit-right !important;
}

/* 글자 높이 간격 */
.lh-sm {
    line-height: 1.25;
}

.lh-md {
    line-height: 1.5;
}

.lh-lg {
    line-height: 2;
}

/* 글자 색상 */
.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-success {
    color: var(--success);
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--warning);
}

.text-info {
    color: var(--info);
}

.text-light {
    color: var(--light);
}

.text-dark {
    color: var(--dark);
}

/* 글자 크기 */
.fs-1 {
    font-size: 2.5rem;
}

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

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

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

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

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

.fw-bold {
    font-weight: 700;
}

.fw-bolder {
    font-weight: bolder;
}

.fw-semibold {
    font-weight: 600;
}

.fw-normal {
    font-weight: 400;
}

.fw-light {
    font-weight: 300;
}

.fw-lighter {
    font-weight: lighter;
}

.fst-italic {
    font-style: italic;
}

.bg-primary {
    background: var(--primary);
}

.bg-secondary {
    background: var(--secondary);
}

.bg-success {
    background: var(--success);
}

.bg-danger {
    background: var(--danger);
}

.bg-warning {
    background: var(--warning);
}

.bg-info {
    background: var(--info);
}

.bg-light {
    background: var(--light);
}

.bg-dark {
    background: var(--dark);
}

.mykl-tooltip {
    position: relative;
    display: inline-block;
}

.mykl-tooltip .tooltip-content {
    position: absolute;
    display: none;
    min-width: 200px;
    padding: 10px;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-20px) translateY(100%);
        -ms-transform: translateX(-20px) translateY(100%);
            transform: translateX(-20px) translateY(100%);
    background: #fff;
    z-index: 2;
    color: #555;
    -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.16078);
            box-shadow: 0px 3px 6px rgba(0,0,0,0.16078);
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    opacity: 0;
}

.mykl-tooltip:hover .tooltip-icon::after, .mykl-tooltip:hover  .tooltip-content,
.mykl-tooltip:hover .tooltip-icon::after, .mykl-tooltip:focus  .tooltip-content,
.mykl-tooltip:focus .tooltip-icon::after, .mykl-tooltip:hover  .tooltip-content
.mykl-tooltip:focus .tooltip-icon::after, .mykl-tooltip:focus  .tooltip-content{
    display: block;
    opacity: 1;
}

.mykl-tooltip .tooltip-icon::after {
    display: none;
    content: ' ';
    position: absolute;
    border: 5px solid transparent;
    z-index: 2;
}

.tooltip-right .tooltip-icon::after {
    border-color:  transparent #fff transparent transparent;
    top: 50%;
    right: -10px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.tooltip-right .tooltip-content {
    top: 0;
    left: 100%;
    -webkit-transform: translateX(10px) translateY(-10px);
        -ms-transform: translateX(10px) translateY(-10px);
            transform: translateX(10px) translateY(-10px);
}

.tooltip-left .tooltip-icon::after {
    border: 5px solid;
    border-color:  transparent transparent transparent #fff;
    top: 50%;
    left: -10px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.tooltip-left .tooltip-content {
    top: 0%;
    right: 100%;
    -webkit-transform: translateX(-10px) translateY(-10px);
        -ms-transform: translateX(-10px) translateY(-10px);
            transform: translateX(-10px) translateY(-10px);
}

.tooltip-top .tooltip-icon::after {
    border-color:  #fff transparent transparent transparent;
    top: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.tooltip-top .tooltip-content {
    top: -10px;
    left: 50%;
    -webkit-transform: translateX(-20px) translateY(-100%);
        -ms-transform: translateX(-20px) translateY(-100%);
            transform: translateX(-20px) translateY(-100%);
}

.tooltip-bottom .tooltip-icon::after {
    border-color:  transparent transparent #fff transparent;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.tooltip-bottom .tooltip-content {
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-20px) translateY(100%);
        -ms-transform: translateX(-20px) translateY(100%);
            transform: translateX(-20px) translateY(100%);
}

.link-group a {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 26px;
    font-weight: 500;
    color: #101010;
    vertical-align: top;
    -webkit-transition: all 0.3s ease;
}

.link-group a + a {
    margin-left: 40px;
}

.link-group a + a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    margin-top: -6px;
    width: 1px;
    height: 12px;
    background-color: #101010;
}

.link-group.link-arrow a + a:before {
    content: "\003e";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -13px;
    width: auto;
    width: initial;
    height: auto;
    height: initial;
    background-color: transparent;
}
.mykl-loading,
.loading {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 100%;
}

.mykl-loading.loading-stop {
    display: none;
}

.loading {
    border: 4px solid;
    border-color: var(--primary) var(--primary) transparent transparent;
    -webkit-animation: rotate-loading 2s linear 0s infinite normal;
            animation: rotate-loading 2s linear 0s infinite normal;
}

.loading-text {
    -webkit-animation: loading-text-opacity 3s linear 0s infinite normal;
            animation: loading-text-opacity 3s linear 0s infinite normal;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    width: 100%;
}

@-webkit-keyframes rotate-loading {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg)}
}

@keyframes rotate-loading {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg)}
}

@-webkit-keyframes loading-text-opacity {
    0% { opacity: 0.4 }
    20% { opacity: 0.4 }
    50% { opacity: 1 }
    100% { opacity: 0.4}
}

@keyframes loading-text-opacity {
    0% { opacity: 0.4 }
    20% { opacity: 0.4 }
    50% { opacity: 1 }
    100% { opacity: 0.4}
}
.message-bar {
    border: 1px solid #000000;
    padding: 5px 30px 5px 10px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 5px;
}

.message-icon {
    vertical-align: middle;
}

.center {
    text-align: center;
}

.btn-check {
    float: right;
    margin-bottom: 10px;
}

.context-message .message {
    display: none;
}

.context-message .message.show {
    display: block;
}

.justify {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*.message {}*/
.mykl-card {
    border-radius: 20px;
    position: relative;
}

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

.card-center .card-header {
    text-align: left;
    text-align: initial;
}

.mykl-card > * {
    padding: 10px;
    border-bottom: 1px solid #343434;
}

.mykl-card > *:last-child {
    border-bottom: none;
}

.card-header {
    background: #bdbdbd;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.card-style-A .card-header {
    position: absolute;
    background: #fff;
    border: none;
    left: 20px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.card-row .card-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
/*.mykl-card .mykl-tooltip {*/
/*    position: absolute;*/
/*    top: 12px;*/
/*    left: 12px;*/
/*    font-size: 12px;*/
/*}*/

.mykl-slide {
    position: relative;
}

.mykl-slide .slide-group {
    white-space: nowrap;
    transition: transform 0.5s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    /*margin: 0 40px;*/
    /*padding: 0;*/
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.mykl-slide .slide-item {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    vertical-align: top;
    font-size: medium;
    font-size: initial;
    letter-spacing: normal;
    letter-spacing: initial;
    word-spacing: normal;
    word-spacing: initial;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

/*.mykl-slide .slide-item + .slide-item {*/
/*    margin-left: 20px;*/
/*}*/

.play_icon{
    position: absolute;
    left: 16%;
    top: 67%;
    z-index: 30;
    cursor: pointer;
}
.slide-number{
    position: absolute;
    left: 10%;
    top: 68%;
    z-index: 31;
    color: white;
    font-weight: 600;
}

.stop_icon{
    position: absolute;
    left: 16%;
    top: 67%;
    z-index: 30;
    cursor: pointer;
}

.certificate-slide{
    background-size: cover;
    border: none;
    cursor: pointer;
}
.testslide-prev {
    background-image: url("/images/main/slide/ser_icon_arrow_l.png");
    background-repeat: no-repeat;
    width: 15px;
    height: 21px;
    /*border: 0;*/
    /*padding: 0;*/
    position: absolute;
    top: 50%;
    right : 104%;
    /*-webkit-transform: translateY(-50%);*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
    text-indent: -9999px;
    /*border-radius: 100%;*/
    /*z-index: 3;*/
}
.testslide-next {
    background-image: url("/images/main/slide/ser_icon_arrow_r.png");
    background-repeat: no-repeat;
    width: 27px;
    height: 21px;
    /*border: 0;*/
    /*padding: 0;*/
    position: absolute;
    top: 50%;
    left: 103%;
    /*-webkit-transform: translateY(-50%);*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
    text-indent: -9999px;
    /*border-radius: 100%;*/
    /*z-index: 3;*/
}

/*.testslide-prev {*/
/*    left: 0;*/
/*}*/

/*.testslide-prev:before {*/
/*    color: orange;*/
/*    content: "";*/
/*    display: inline-block;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: 104%;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    border: 1px solid;*/
/*    border-color: #fff transparent transparent red;*/
/*    -webkit-transform: translate(-30%, -50%) rotate(-45deg);*/
/*    -ms-transform: translate(-30%, -50%) rotate(-45deg);*/
/*    transform: translate(-30%, -50%) rotate(-45deg);*/
/*}*/

/*.certificate-slide .slide-prev.disabled {*/
/*    !*background: #dedede;*!*/
/*    pointer-events: none;*/
/*}*/


.mykl-slide .slide-prev{
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    position: absolute;
    top: 69%;
    left: 30%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-indent: -9999px;
    background: transparent;
    border-radius: 100%;
    z-index: 3;
}

.mykl-slide .slide-next {
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    position: absolute;
    top: 69%;
    left: 13%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-indent: -9999px;
    background: transparent;
    border-radius: 100%;
    z-index: 3;
}

.mykl-slide .slide-prev {
    left: 0;
}

.mykl-slide .slide-next {
    right: 0;
}

.mykl-slide .slide-prev:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: #fff transparent transparent #fff;
    -webkit-transform: translate(-30%, -50%) rotate(-45deg);
        -ms-transform: translate(-30%, -50%) rotate(-45deg);
            transform: translate(-30%, -50%) rotate(-45deg);
}
.mykl-slide .slide-next:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    -webkit-transform: translate(30%, -50%) rotate(45deg);
        -ms-transform: translate(30%, -50%) rotate(45deg);
            transform: translate(30%, -50%) rotate(45deg);
}

/*.mykl-slide .slide-prev.disabled,*/
/*.mykl-slide .slide-next.disabled {*/
/*    !*background: #dedede;*!*/
/*    pointer-events: none;*/
/*}*/

.mykl-slide .slide-prev:hover,
.mykl-slide .slide-next:hover {
    /*background: var(--primary);*/
    cursor: pointer;
}


.media-group .mykl-media + .mykl-media {
    border-top: 1px solid #F2F2F2;
}

.mykl-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
}

.media-vertical > * {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.media-group > .mykl-media {
    padding: 10px;
}

.media-cover {
    position: relative;
    text-align: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    margin-right: 30px;
    border-radius: 5px;
    width: 220px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.media-cover img {
    width: 100%;
}

.media-body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 10px 0;
}

.media-body > *:last-child {
    margin-bottom: 0;
}

.mykl-media .mykl-tooltip {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
}

.media-cover .media-cover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.media-vertical {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.media-vertical .media-cover {
    margin-right: 0;
    margin-bottom: 20px;
    min-width: 100%;
}

.modal-dialog {
    display: none;
}
.modal-dialog.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    margin-bottom: 100px;
    border-radius: 10px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

.modal-header {
    padding: 5px 10px;
    position: relative;
}

.modal-body {
    padding: 5px 10px;
}

.modal-footer {
    padding: 5px 10px;
}

.btn-close {
    border: none;
    position: absolute;
    background: none;
    top: 50%;
    right: 0px;
    width: 20px;
    height: 20px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.btn-close::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 16px;
    height: 2px;
    display: block;
    background: #000;
    -webkit-transform: translateY(-1px) rotate(45deg) ;
        -ms-transform: translateY(-1px) rotate(45deg) ;
            transform: translateY(-1px) rotate(45deg) ;
    -webkit-transform-origin: 50%;
        -ms-transform-origin: 50%;
            transform-origin: 50%;
}

.btn-close::after {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 16px;
    height: 2px;
    display: block;
    background: #000;
    -webkit-transform: translateY(-1px) rotate(-45deg);
        -ms-transform: translateY(-1px) rotate(-45deg);
            transform: translateY(-1px) rotate(-45deg);
    -webkit-transform-origin: 50%;
        -ms-transform-origin: 50%;
            transform-origin: 50%;
}


.mykl-autoComplete .auto-complete.selected {
    background: #bdbdbd;
}

.mykl-autoComplete .auto-complete-list {
    position: absolute;
    background: antiquewhite;
    z-index: 1;
    display: none;
}

.mykl-autoComplete .auto-complete-item {
    position: relative;
}

.mykl-autoComplete .auto-complete-item.active .auto-complete-list.show {
    display: block;
}

.user_profile{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;

}
.user_profile p {
    text-align: center;
}
.user_profile img {
    margin-bottom: 10px;
    width: 107px;
}
.match-info-contaniner{
    display: flex;
    justify-content: space-between;
}
.match-check{
    /*padding: 20px 50px 0 50px;*/
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid gray;
    border-radius: 4px;
    justify-content: end;
}
.match-check p {
    font-size: 17px;
    font-weight: 700;
    margin: 20px;
}
.match-check .match-title{
    padding: 0 78px;

}
.match-check span {
    font-size: 10px;
    margin-bottom: 27px;
}
.match-check button {
    padding: 24px;
    background-color: #e5e5e5;
    font-weight: 600;
}
.mypage-info-btn{
    display: flex;
    background-color: #e5e5e5;
    align-items: center;
}

.match-info-check-btn{
    width: 100%;
    display: flex;
    background-color: #e5e5e5;
    align-items: center;
    justify-content: center;
}
.current-situation{
    width: 287px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid gray;
    border-radius: 4px;
}
.current-situation p {
    font-size: 17px;
    font-weight: 700;
    margin: 20px;
}
.current-situation .gun {
    font-weight: 700;
    font-size: 15px;
}
.current-situation .qna-number {
    color: var(--primary);
    font-size: 20px;
}
.current-situation span {
    font-size: 10px;
    margin-bottom: 27px;
}
.current-situation button {
    padding: 24px;
    background-color: #e5e5e5;
    width: 100%;
    font-weight: 600;
}

.container-common {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background-color: #fff;
}
.status-box {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: left;
    width: 45%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.status-box h3 {
    font-size: 1.2em;
    color: #333;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 1em;
    color: #666;
}
.status-item .label {
    flex: 1;
    text-align: left;
}
.status-item .value {
    flex: 1;
    text-align: right;
    font-size: 2em;
    color: #6a0dad;
}
.status-item:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.container-diagnostic {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.table-box {
    width: 48%;
}
.table-box h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    /*border: 1px solid #ddd;*/
    border-bottom: 2px solid #ffbe56;
}

th, td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
th {
    background-color: #ffbe56;
    color: white;
    text-align: center;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:last-child td {
    border-bottom: none;
}
.status-complete {
    color: green;
    font-weight: bold;
}
.status-incomplete {
    color: orange;
    font-weight: bold;
}


.dropdown-toggle span {
    font-weight: 600;
}

/*# sourceMappingURL=mykl_ui_style.css.map*/