@charset "utf-8";
/*
*--------------------------------------------*
|                   Default                  |
*--------------------------------------------*
*/
html { overflow-x: hidden; width: 100%; height: 100vh; padding: var(--notch); scroll-behavior: smooth;}
body { /*height: 100%;*/ background: #fff; font-family:var(--Pretendard); font-size:var(--font-size); color:var(--default-font-color); line-height:var(--line-height); letter-spacing:var(--font-let-spc);}
b { font-weight: 500;}
strong { font-weight: 700;}
small { font-size: 80%;}
img { max-width: 100%;}
img:not([src]), img[src=""], img[src="/"] { visibility: hidden; }
em { color: var(--red-500);}

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

#loading-window { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; overflow: hidden; background: #ffffffcc; }
.loading-mask-wrap { max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 16px 22px; }
.loading-logo { width: 300px; height: 40px; max-width: 100%; }
.loading-logo img { width: 100%; height: 100%; object-fit: contain; }
.loading-mark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 80px; height: 80px; border: 1px solid #e5e8e7; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px rgba(34, 34, 34, 0.08);}
.loading-mark i { display: block; width: 8px; height: 24px; border-radius: 999px; background: var(--primary-500); opacity: 0.35; animation: kw-loading-pulse 0.9s ease-in-out infinite;}
.loading-mark i:nth-child(2) { animation-delay: 0.12s;}
.loading-mark i:nth-child(3) { animation-delay: 0.24s;}

@keyframes kw-loading-pulse {
    0%, 100% { opacity: 0.35; transform: scaleY(0.55);}
    45% { opacity: 1; transform: scaleY(1);}
}

/* Scroll */
/**::-webkit-scrollbar {background: transparent; width: 10px; height: 10px; border-radius: 10px;}*/
/**::-webkit-scrollbar-thumb {background: #C4C7C7; width: 10px; border-radius:10px;}*/
/**::-webkit-scrollbar-track {border-radius:10px;}*/



/*
*--------------------------------------------*
|               TextColor                    |
*--------------------------------------------*
*/
.text-primary { color: var(--primary-500);}
.text-default { color: var(--default-font-color);}
.text-red { color: var(--red-500);}
.text-blue { color: var(--blue-500);}
.text-green { color: var(--green-500);}



/*
*--------------------------------------------*
|                   Input                    |
*--------------------------------------------*
*/
.input-sm { height: 32px;}
.input-default { height: 35px;}
.input-search { height: 42px;}

.input-box { display: flex; justify-content: space-between; align-items: center; gap: 7px;}
.input-box .k-textbox { width: 100%;}
.input-box { display: flex; justify-content: space-between; align-items: center;}
.input-box2 .info-txt { display: inline-block; margin-top: 0; margin-left: 21.5px;}
.input-box2 .info-txt span { width: auto; vertical-align: middle;}
.input-box2 .info-txt .icon { margin-right: 5px;}
.input-box2 span.txt { width: 25.2px;}
.input-box2 span.txt,
.input-box span.txt { display: inline-block; flex-shrink: 0; margin-left: 7px; font-size: 14px; font-weight: normal; color: #404040; line-height: 35px; letter-spacing: -0.02em; vertical-align: middle;}
.input-box .k-textbox { width: 100%;}
.input-box .btn_input { display: inline-block; margin-left: 7px; padding: 8px 16px; border: 1px solid #D1D1D1; border-radius: 3px; background: #FFFFFF; font-family: 'Spoqa Han Sans Neo', sans-serif; font-size: 13px; font-weight: 500; color: #404040; line-height: 17px; letter-spacing: -0.04em; white-space: nowrap;}
.input-box .btn_input:hover { border: 1px solid #4549AB; color: #4549AB;}
.input-box .btn_input:disabled { background: #F8F8F8; color: #8E8E8E;}
.input-box .btn_input:focus { border: 1px solid #555555; color: #404040;}
.inputs-wrap { display: flex;}
.inputs-wrap li { display: flex; align-items: center; gap: 7px; width: 100%; padding-left: 10px;}
.inputs-wrap li:first-child { padding-left: 0;}
.inputs-wrap li .txt { display: inline-block; margin-left: 7px;}
.inputs-wrap li .k-input { width: 100%;}
.inputs-wrap li .label_text { flex-shrink: 0;}
/* date */
.date-box-wrap { display: inline-flex; align-items: center; width: 100%;}
/* .date-box-wrap::after { content: ''; display: block; clear: both;} */
.date-box-wrap .date-box { width: 100%;}
.date-box-wrap .label_text { display: inline-block; float: left; font-size: 14px; font-weight: 500; color: #404040; line-height: 35px;}
.tabular td .date-box-wrap { display: flex; width: 100%;}
.tabular td .date-box-wrap .date-box { width: 48.7%;}

/*
*--------------------------------------------*
|                   Select                   |
*--------------------------------------------*
*/
.kw-select { width: 120px; height: 48px; padding: 0 16px; border-radius: 6px; border: 1px solid #ddd; background: #fff; font-size: 14px; color: #828282; line-height: 1.07; letter-spacing: -0.28px;}
.kw-select.k-focus,
.kw-select.k-dropdown.k-focus { border: 1px solid #222;}
.kw-select.k-dropdown { padding: 0; border-color: #cecece; color: #828282;}
.kw-select.k-dropdown .k-input-value-text { font-family: var(--spoqaHanSansNeo); font-size: 15px; color: #222; line-height: 1.5; letter-spacing: -0.45px;}
.kw-select.k-dropdown .k-input-button { width: calc(1.4285714286em + 16px); height: 100%;}
select.k-dropdown { border-radius: 4px; border: 1px solid #ddd;}
.kw-select2 { background: url("../images/common/chevron-down.svg") no-repeat 95% center;}
.popup-content .table-div-wrap .kw-select.k-dropdown .k-input-value-text { font-size: 12px;}
.kw-select .k-input-inner { padding-left: 16px;}

.k-textbox { border: 0;}
input.k-textbox { height: 40px; border-radius: 4px;}
input.k-textbox,
input.k-input-inner { padding: 10px 16px; border: 1px solid #ddd; border-radius: 4px; background: #ffffff; font-size: 14px; font-weight: normal; color: #404040; text-align: left; line-height: 10px;}
input.k-textbox:hover,
input.k-input-inner:hover { border: 1px solid var(--primary-500);}
.k-timepicker input.k-input-inner:hover { border: 0;}
input.k-textbox:focus,
input.k-input-inner:focus, .k-numerictextbox:focus { border: 1px solid var(--primary-500);}
input.k-textbox:disabled,
input.k-input-inner:disabled { background: #F8F8F8; color: #404040;}
input.k-textbox:read-only,
input.k-input-inner:read-only { background: #F8F8F8; color: #404040;}
input.k-textbox[readonly='readonly'],
input.k-input-inner[readonly='readonly'] { background: #F8F8F8; color: #404040;}
textarea.k-textbox { height: 190px; padding: 10px; border: 1px solid #ddd; border-radius: 3px; background: #fff; font-size: 14px; font-weight: 500; color: #404040; line-height: 19px; resize: none;}
textarea.k-textbox:focus { border: 1px solid var(--primary-500);}
textarea.k-textbox:disabled { border: 1px solid #bbb; background: #f5f5f5; font-weight: 400; color: #757575;}
textarea.k-textbox[disabled] { border: 1px solid #bbb; background: #f5f5f5; font-weight: 400; color: #757575;}
textarea.k-textbox:read-only { border: 1px solid #bbb; background: #f5f5f5; font-weight: 400; color: #757575;}
textarea.k-textbox[readonly] { border: 1px solid #bbb; background: #f5f5f5; font-weight: 400; color: #757575;}
.popup-content .k-textbox { padding: 12px 16px; border: 1px solid #dddddd; }
.popup-content .k-textbox.disabled{ background-color: #f5f5f5; }
.popup-content #reviewCont.k-textbox, .popup-content #reviewContDiv.k-textbox{ min-height: 154px; }

.k-textbox.size-b { height: 60px; border-radius: 8px;}
.k-textbox.size-m { height: 50px; border-radius: 6px;}
.k-textbox.size-m2 { height: 44px; border-radius: 5px;}
.k-textbox.size-s { height: 32px; border-radius: 3px;}

input::placeholder,
*::placeholder { }
.k-textbox { font-size: 15px; letter-spacing: -0.3px;}

.input-position-box { position: relative; width: 100%;}
.input-position-box .clearDeptBtn { position: absolute; top: 10px; right: 16px; width: 20px; height: 20px;}

input.k-textbox::-webkit-input-placeholder,
textarea.k-textbox::-webkit-input-placeholder { font-weight: 400; color: #828282;}
input.k-textbox:-ms-input-placeholder,
textarea.k-textbox:-ms-input-placeholder { font-weight: 400; color: #828282;}
input.k-textbox::-ms-input-placeholder,
textarea.k-textbox::-ms-input-placeholder { font-weight: 400; color: #828282;}
input.k-textbox::placeholder,
textarea.k-textbox::placeholder { font-weight: 400; color: #828282;}


/*
*--------------------------------------------*
|                   Checkbox                 |
*--------------------------------------------*
*/
.check-box-wrap { display: inline-flex; align-items: center; gap: 16px;}
.check-box input[type="checkbox"],
.check-box input[type="radio"] { display: none;}
.check-box label,
label.check-box { align-items: center; gap: 8px; position: relative; cursor: pointer;}
.check-box .check { display: flex; flex-shrink: 0; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 4px; border: 1px solid #dbdbdb; background: #fff; transition: background .3s, border-color .3s ease;}
.check-box input[type="checkbox"]:checked + label .check,
.check-box input[type="checkbox"]:checked + .check { border: 1px solid var(--primary-500); background-image: url("../images/common/check.svg"); background-position: center center; background-color: var(--primary-500); background-size: contain;}
.check-box input[type="checkbox"]:disabled + label .check,
.check-box input[type="checkbox"]:disabled + .check { border-color: #ccc; background: #fafafa;}
.check-box input[type="checkbox"]:disabled:checked + label .check { }
.check-box input[type="checkbox"]:disabled:checked + label .check::before,
.check-box input[type="checkbox"]:disabled:checked + .check::before { background: #fafafa;}
.check-box input[type="checkbox"]:disabled:checked + label .check::after,
.check-box input[type="checkbox"]:disabled:checked + .check::after { filter: invert(84%) sepia(1%) saturate(1184%) hue-rotate(9deg) brightness(100%) contrast(87%) opacity(0.5);}

.radio-box-wrap { display: flex; align-items: center; gap: 16px;}
.radio-box { display: flex;}
.radio-box label { display: flex;}
.radio-box input[type="radio"] { width: 0; height: 0; -webkit-appearance: none; appearance: none; background-color: #fff;  margin: 0; font: inherit; color: currentColor; /*border: 1px solid currentColor;*/ border: 0; border-radius: 50%;}
.radio-box .radio { position: relative; width: 20px; height: 20px; background-image: url("../images/common/Checkbox_radio.svg"); background-repeat: no-repeat; transition: background .3s, border-color .3s ease;}
.radio-box input[type="radio"]:checked + label .radio { background-image: url("../images/common/Checkbox_radio_active.svg");}
.radio-box input[type="radio"]:disabled + label .radio { border: 1px solid #ccc; border-radius: 50%; background: #fafafa;}
.radio-box input[type="radio"]:disabled:checked + label .radio { border-color: #ccc; background-color: #fafafa; background-position: center; background-image: url("../images/common/Checkbox_radio_player.svg")}
.radio-box label { align-items: center; gap: 8px; margin-bottom: 0; font-size: 14px; font-weight: normal; color: #404040; line-height: 35px; letter-spacing: -0.02em; cursor: pointer;}
.radio-box-wrap::after { content: ''; display: block; clear: both;}
.radio-box-wrap li { display: inline-block; flex-shrink: 0; float: left; padding-left: 20px;}
.radio-box-wrap li:first-child { padding-left: 0;}
/* 설문 */
input[type="radio"], .stare-cont .problem-list .problem-cont li input[type="checkbox"]{ display: none; }
.radio22 + label, .check22 + label{ cursor: pointer; }
input[type="radio"].radio22 + label .icon{ position: relative; margin-right: 10px; vertical-align: middle; display: inline-block; width: 24px; height: 24px; border-radius: 100%; border: 1px solid #DBDBDB; }
input[type="radio"].radio22:checked + label .icon::before{ content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 14px; height: 14px; border-radius: 100%; background: #1460D2; }
input[type="checkbox"].check22 + label .icon{ margin-right: 10px; display: inline-block; width: 24px; height: 24px; border: 1px solid #DBDBDB; border-radius: 4px; background: #fff; box-sizing: border-box; }
input[type="checkbox"].check22:checked + label .icon{ background: #1460D2 url("../images/common/icon_chkbox_check.png") no-repeat center center; border: 1px solid #1460D2; }

/*
*--------------------------------------------*
|                   Button                   |
*--------------------------------------------*
*/
.k-grid-content [class*="btn-"],
.k-grid .k-grid-content table tr td a[class*="btn-"],
[class*="front-table-"] tr td [class*="btn-"] { display: inline-flex; height: 37px; padding: 0 16px;
    border-radius: 3px; font-size: 14px; font-weight: bold; line-height: 1; letter-spacing: -0.28px;
    text-decoration: none; cursor: pointer;}
.k-grid-content [class*="btn-"]:disabled,
.k-grid .k-grid-content table tr td a[class*="btn-"]:disabled,
[class*="front-table-"] tr td [class*="btn-"]:disabled { border: 1px solid var(--btn-disabled-border-color); background: var(--btn-disabled-bg-color); color: var(--btn-disabled-font-color); cursor: default !important;}

.k-grid-content .btn-default { min-width: auto; padding: 0 16px; border: 1px solid var(--btn-default-border-color); border-radius: 3px; background: #fff; font-weight: 500; color: #222; line-height: 0.93;}
.k-grid-content .btn-default:hover{ border: 1px solid var(--blue-600); background: #ffffff; color: var(--blue-600);}
.k-grid-content .btn-s { min-width: auto; padding: 0 16px; font-weight: 500;}

/* hegiht: 60, radius: 8 / 50, 6 / 40, 4 */
[class*="btn-"] { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s, border-color .3s ease, color .3s ease;}
[class*="btn-"]:disabled { border: 1px solid var(--btn-disabled-border-color); background: var(--btn-disabled-bg-color); color: var(--btn-disabled-font-color); cursor: default !important;}
/* size */
[class*="btn-"].size-b { height: 60px; padding: 0 24px; font-size: 18px; font-weight: bold; letter-spacing: -0.34px;}
[class*="btn-"].size-m { height: 50px; padding: 0 24px; font-size: 16px; font-weight: bold; letter-spacing: -0.32px;}
[class*="btn-"].size- { height: 40px; padding: 0 20px; font-size: 13px; font-weight: 500; letter-spacing: -0.26px;}
[class*="btn-"].size-s { height: 36px; padding: 0 10px; font-size: 12px; font-weight: 500; letter-spacing: -0.24px;}

/* 기본 */
.btn-default { padding: 0 20px; border: 1px solid var(--btn-default-border-color); background: #FFFFFF; cursor: pointer;}
.btn-default:not(:disabled):hover,
.btn-default:active { border: 1px solid var(--primary-500); background: #FFFFFF; color: var(--primary-500);}
.btn-default:focus,
.btn-default:active:focus { border: 1px solid #555555; background: #FFFFFF;}
/* 기본 아웃라인 */
.btn-outline { border: 1px solid var(--btn-default-border-color); border-radius: 8px; background: #fff; }
.btn-outline:hover {border-color: var(--default-font-color)} { border: 1px solid var(--btn-default-border-color); border-radius: 8px; }

/* 저장, 승인 등 긍정형 */
.btn-point { border: 1px solid var(--primary-500); background: var(--primary-500); color: #FFFFFF;}
.btn-point:focus { border: 1px solid var(--primary-500); background: #FFFFFF; color: var(--primary-500);}
.btn-point:active,
.btn-point:not(:disabled):hover { border: 1px solid var(--primary-600); background: var(--primary-600); color: #FFFFFF;}
/* 긍정형 보단 아래 */
.btn-point-white { border: 1px solid var(--primary-500); background: #fff; color: var(--primary-500);}
.btn-point-white:focus { border: 1px solid var(--primary-500); background: #FFFFFF; color: var(--primary-500);}
.btn-point-white:active,
.btn-point-white:not(:disabled):hover { border: 1px solid var(--primary-500); background: var(--primary-500); color: #FFFFFF;}
/* 그리드 상단 버튼 */
.btn-top { border: 1px solid var(--primary-500); background: #fff; color: var(--primary-500);}
.btn-top:focus { border: 1px solid var(--primary-500); background: #FFFFFF; color: var(--primary-500);}
.btn-top:active,
.btn-top:not(:disabled):hover { border: 1px solid var(--primary-500); background: var(--primary-500); color: #FFFFFF;}
/* 검은색 */
.btn-submit { border: 1px solid var(--apply-btn-bg); background: var(--apply-btn-bg); color: #fff;}
/* 아이콘 버튼 */
.btn-plus { width: 40px; height: 40px; padding: 0; border-radius: 4px; font-size: 20px; font-weight: bold;}
/* 필터 버튼 */
.btn-filter { padding: 8px 18px; border: 1px solid #D9D9D9; border-radius: 40px; background: #fff; }
.btn-filter.active { border: 1px solid var(--primary-500); background: var(--primary-500); color: #fff;}
.btn-filter:not(.active):hover { border-color: var(--primary-500); background: #FFF8E1; color: #222;}

.btnBox-wrap { display: flex; justify-content: center; align-items: center; gap: 7px;}
.btnBox-bottom { justify-content: flex-end; padding-top: 30px;}
.btnBox-bottom [class*="btn-"] { min-width: 111px; height: 60px; padding: 0; border-radius: 8px; font-size: 18px; font-weight: 500;}
.btnBox-bottom .btn-point { font-weight: bold;}
.btnBox-bottom > div { display: flex; align-items: center; gap: 7px;}

.grid-top-box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px;}
.grid-top-box.flex-end { justify-content: flex-end;}
.grid-top-box .left { display: flex; align-items: center; gap: 40px; width: 100%;}
.grid-top-box .right {gap:  8px; }
.grid-top-box .k-dropdown { height: 48px;}
.grid-top-box .k-dropdown .k-input-inner { padding-left: 20px;}
.grid-top-box .date-box-wrap { width: auto; gap: 8px; }
.grid-top-box .date-box-wrap .date-box { width: 200px;}
.grid-top-box .date-box-wrap .date-box button { right: 6px;}
.grid-top-box .k-datepicker,
.grid-top-box .k-picker { height: 48px; }
.grid-top-box .k-datepicker input.k-input-inner { font-size: 16px; text-align: left;}
.k-datepicker, .k-timepicker, .k-datetimepicker { border: 1px solid var(--btn-default-border-color); }
.grid-top-box [class*="btn-"], #excelDownload { height: 48px; padding: 0 16px; border-radius: 4px;}
.grid-top-box .btn-default { color: var(--default-font-color); white-space: nowrap;}

.input-box [class*="btn-"] { height: 40px; border-radius: 4px; padding: 0 20px; font-size: 14px; font-weight: 500;}

.grid-btnBox { display: flex; justify-content: flex-start; gap: 7px;}

/* 교육 리스트 공유 */
.share-btn { border-radius: 32px; height: 32px; line-height: 32px; padding: 0 12px; color: var(--text-subtle); font-size: 14px; display: flex; align-items: center; gap: 2px; transition: all .2s ease; white-space: nowrap;}
.share-btn:hover { color: var(--default-font-color);}
.share-btn:hover i { filter: brightness(40%); transition: .3s ease;  }
.lecture-share-k-window { max-width: calc(100vw - 32px); border-radius: 10px; overflow: hidden; }
.lecture-share-k-window .k-window-titlebar { display: none; }
.lecture-share-k-window .k-window-content { border-radius: 10px; }
.lecture-share-box { display: flex; flex-direction: column; padding: 16px 20px; gap: 8px; }
.lecture-share-box > button { display: flex; justify-content: flex-start; align-items: center; gap: 16px; width: 100%;  color: var(--default-font-color); font-size: 16px; font-weight: 700; line-height: 1.5; cursor: pointer; text-align: left; }
.lecture-share-box > button:hover {  }
.lecture-share-box .icon-share-kakao { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: url("../images/common/icon-share-kakao.svg") no-repeat center / 34px 34px; }
.lecture-share-box .icon-share-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #0b78cb url("../images/common/icon-share.svg") no-repeat center / 24px 24px; }
.lecture-share-k-window .btn-share-close { display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-top: 1px solid #CDD1D5; color: var(--default-font-color); font-size: 14px; cursor: pointer; padding: 9.5px 12px; height: 40px; }
.lecture-share-k-window .btn-share-close:hover { background: var(--white-100); }
.common-toast { position: fixed; left: 50%; bottom: 10vh; z-index: 10050; min-width: 220px; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 8px; background: #fff; color: var(--default-font-color); font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; border: 1px solid var(--white-600); box-shadow: 0 4px 21px #00000024;}
.common-toast.is-default { border-color: #D7DDE5; background: #F7F8FA; color: #3D4652; }
.common-toast.is-info { border-color: #C8D8F7; background: #F3F7FF; color: #174EA6; }
.common-toast.is-success { border-color: #B9E4C9; background: #F0FFF5; color: #157A3C; }
.common-toast.is-error { border-color: #F6C1C1; background: #FFF4F4; color: #C62828; }
.common-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 교육신청 더보기 */
.btn-edu-more { display: flex; justify-content: center; align-items: center; gap: 4px; width: 240px; height: 56px;  font-size: 18px; font-weight: bold; margin: auto; margin-top: 42px; }
.btn-edu-more i { transition: all .2s ease; }
.btn-edu-more:hover i { transform: translateY(-4px); }

/* 교육신청 */
.apply-btn { width: 100%; height: 48px; line-height: 48px; padding: 0 16px; font-weight: bold; }

/* popup 내부 button */
.k-window .popup-btn { min-width: 124px;}
.popup-content .k-grid-toolbar .k-button { padding: 9px 16px;}
.popup-content .k-grid-toolbar .k-button:hover { border: 1px solid #4549AB;}
.popup-btn { display: inline-flex; justify-content: center; align-items: center; min-width: 124px; height: 50px !important; border: 1px solid var(--primary-500); border-radius: 8px; background: var(--primary-500); font-size: 16px; font-weight: bold; color: #FFFFFF; line-height: normal; letter-spacing: -0.34px; cursor: pointer; transition: background .3s, border-color .3s ease, color .3s ease;}
.popup-btn:hover { border-color: var(--primary-600); background: var(--primary-600); color: #ffffff;}
.popup-btn.btn-default { min-width: 124px; border: 1px solid #c2c2c2; background: #FFFFFF; font-size: 16px; font-weight: bold; color: #212529;}
.popup-btn.btn-default:hover,
.popup-btn.btn-default:active { border: 1px solid var(--primary-500); background: #FFFFFF; font-weight: bold; color: var(--primary-500);}
.popup-content .cont-tip-box .icon { vertical-align: middle;}

/* swiper buttons */
.scroll-btn i { transition: .2s ease-in-out; }
.scroll-btn.next:hover i { transform: translateX(4px); }
.scroll-btn.prev:hover i { transform: translateX(-4px); }

/*
*--------------------------------------------*
|                   Badge                    |
*--------------------------------------------*
*/
/* grid 내부 color */
.grid-training-A { font-weight: 600; color: var(--online-500);}
.grid-training-B { font-weight: 600; color: var(--tag-training-B);}

.tag { display: flex; justify-content: center; align-items: center; min-width: 40px; height: 24px; border-radius: 4px; background-color: #fff; font-size: 12px; font-weight: bold; line-height: 1; letter-spacing: -0.24px; padding: 3px 6px;}

.tag-training-A { background: var(--online-100); color: var(--online-500);}         /*온라인*/
.tag-training-B { background: #F8E9FF; color: #6942BD;}       /*오프라인*/
.tag-training-D { background: var(--blended-100); color: var(--blended-500);}       /*블랜디드*/
.tag-training-G { background: #FFEBEB; color: var(--color-myClass-training-G);}   /*화상*/

.tag.tag-video { color: #DF2073; background: #FFEBEF; }
.tag.tag-text { color: #0B78CB; background: #EDF7FF; }
.tag.tag-file { color: #FF7829; background: #FFECDF; }

.tag-box, .tag-group { display: flex; align-items: center; gap: 6px;}
[class*="tag-rqop-"] { display: flex; justify-content: center; align-items: center; height: 18px; padding: 0 8.5px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -0.24px;}
.tag-rqop-RQ,
.tag-rq { background-color: var(--ess-500);}
.tag-rqop-OP,
.tag-op { background-color: var(--tag-op);}
.tag-rqop-PASS,
.tag-pass { background-color: var(--pass-500);}

.tag-training-M { padding: 0 10px; border: 2px solid var(--color-myClass-training-M); color: var(--color-myClass-training-M);}
.tag-category-mandatory { background: #FFEBEB; color: #D93333; }
.tag-category-open { background: #EAF2FF; color: #2E6BDE; }
.tag-category-legal { background: #FFF1E8; color: #E87722; }
/* .tag-training-day { border: 2px solid var(--color-edu-list-tag-day); background: var(--color-edu-list-tag-day) !important; color: #fff;}
.tag-training-always { border: 2px solid var(--color-edu-list-tag-always); background: var(--color-edu-list-tag-always) !important; color: #fff;} */


.badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 54px; width: 54px; height: 24px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; white-space: nowrap;}
.badge-mandatory { background: #f2eaff; color: #3C55D3; }
.badge-open { background: #F8E9FF; color: #6942BD; }
.badge-legal { background: #FFECDF; color: #FF7829; }
.badge-online, .badge-offline, .badge-etc  { background-color: #f5f5f5; color: #6B7380; }

/*
*--------------------------------------------*
|                   File                     |
*--------------------------------------------*
*/
.ftype { display: flex; align-items: center; justify-content: center; flex: 0 0 34px; height: 34px; overflow: hidden; background: #eef2f6; color: #53606f; font-size: 11px; font-weight: 700; }
.ftype.pdf { background: #fff0f0; color: #d92d20; background: url("../images/common/icon-pdf.svg") no-repeat center / contain; text-indent: -999rem; }
.ftype.txt { background: #eef6ff; color: #175cd3; }
.ftype.doc, .ftype.docx { background: #eff8ff; color: #1570ef; }
.ftype.xls, .ftype.xlsx { background: #ecfdf3; color: #027a48; background: url("../images/common/icon-xlsx.svg") no-repeat center / contain; text-indent: -999rem; }
.ftype.ppt, .ftype.pptx { background: #fff6ed; color: #c4320a; background: url("../images/common/icon-ppt.svg") no-repeat center / contain; text-indent: -999rem; }

/*
*--------------------------------------------*
|                   Header Point             |
*--------------------------------------------*
*/
.header-point-box { flex-shrink: 0;}
.header-point-box a { gap: 12px; align-items: center;}
.header-point-box .left { gap: 6px; align-items: center; font-size: 13px; font-weight: bold; letter-spacing: -0.26px; color: var(--primary-500);}
.header-point-box .right { align-items: center;}
.header-point-box .right span { font-size: 13px; font-weight: bold; letter-spacing: -0.26px; color: #222;}
/* 메인 모바일 */
.point-sec { padding-top: 20px; padding-bottom: 4px;}
.point-sec .header-point-box a { justify-content: space-between; width: 100%; height: 58px; padding: 0 16px 4px 20px; border-radius: 8px; border: 1px solid #e8e8e8; background: #f5f6fa;}
.point-sec .header-point-box .left { font-size: 16px; letter-spacing: -0.32px;}
.point-sec .header-point-box .icon-w { width: 19px; height: 19px;}
.point-sec .header-point-box .right span { margin-right: 3px; font-size: 15px; letter-spacing: -0.3px;}
.point-sec .header-point-box .right i { flex-shrink: 0;}
/* 서브 모바일용 */
.sub-header-top { display: none;}
.header .sub-header-top .container { height: 40px;}

/*
*--------------------------------------------*
|                   Icons                    |
*--------------------------------------------*
*/
/* icon- 배경이미지 사용 시 */
[class*="icon-"],
[class*="ico-"] { display: inline-flex; justify-content: center; align-items: center; position: relative;}

.circle { width: 3px; height: 3px; border-radius: 1000px; background: var(--default-font-color);}

/* main */
[class*="main-data-"].icon- { width: 40px; height: 40px; background-repeat: no-repeat; background-size: auto;}
.main-data-01 { background-image: url("../images/main/vuesax_linear_security-time.svg");}
.main-data-02 { background-image: url("../images/main/vuesax_linear_calendar-edit.svg");}
.main-data-03 { background-image: url("../images/main/vuesax_linear_award.svg");}
.main-data-04 { background-image: url("../images/main/vuesax_linear_calendar-tick.svg");}
.main-data-05 { background-image: url("../images/main/vuesax_linear_ranking.svg");}
.icon-star { width: 16px; height: 16px; background-image: url("../images/common/star.svg"); background-repeat: no-repeat; background-size: contain;}
.icon-chevron-right { width: 16px; height: 16px; background: var(--icon); background-size: var(--icon-size); background-position: -26px 3px;}

.icon-passyn { width: 40px; height: 40px;}
.icon-home { width: 20px; height: 20px; background: url("../images/common/icon-home.svg") no-repeat center center;}
.icon-arrow-down,
.k-select .k-i-arrow-s { width: 18px; height: 18px; background: url("../images/common/chevron-down.svg") no-repeat center center;}
.icon-search { width: 24px; height: 24px; background: url("../images/common/search.svg") no-repeat center center;}
/*.k-svg-i-caret-alt-down > svg { display: none;}*/

.icon-tip-close { width: 18px; height: 18px; background: url("../images/runway/admin/icon_map.png") no-repeat -2px -2px;}
.icon-info-blue { width: 18px; height: 19px; background: url("../images/runway/admin/icon_info_blue.png") no-repeat 0 0;}
.icon-info-gray { width: 18px; height: 19px; background: url("../images/runway/admin/icon_info_gray.png") no-repeat 0 0;}
.icon-info-file { width: 18px; height: 19px; background: url("../images/runway/admin/icon_filled_info.png") no-repeat 0 0;}
.icon-search { width: 20px; height: 20px; background: url("../images/runway/admin/icon_search.png") no-repeat -20px -22px;}
.icon-search-small { width: 18px; height: 18px; background: url("../images/runway/admin/icon_search.png") no-repeat -18px -20px;}
.icon-badge { width: 6px; height: 6px; margin-top: -3px; margin-right: 10px; border-radius: 50%; background: #4549AB; vertical-align: middle;}
.icon-download { width: 17px; height: 17px; background: url("../images/runway/admin/icon_download.png") no-repeat 0 0;}
.icon-download-black { width: 20px; height: 20px; background: url("../images/runway/admin/icon_download_black.png") no-repeat 0 0;}
.icon.right { width: 6px; height: 10px; background: url("../images/runway/admin/edss_btn.png") no-repeat;}
.icon.down { width: 20px; height: 20px; background: url("../images/runway/admin/icon_map2.png") no-repeat -170px -18px;}
.icon.up { width: 20px; height: 20px; background: url("../images/runway/admin/icon_map2.png") no-repeat -120px -18px;}
.icon.icon-nt-all { width: 14px; height: 14px; background: url("../images/runway/admin/icon_all_off.svg") no-repeat center; background-size: 100%;}
.icon.icon-nt-my { width: 14px; height: 14px; background: url("../images/runway/admin/icon_my_off.svg") no-repeat center; background-size: 100%;}
.icon-settings-check { background: var(--icon); background-size: 200px; background-position: -37px 3px;}
.icon-settings-heart { background: var(--icon); background-size: 200px; background-position: -58px 3px;}
.icon-accrodion_chevron-up { width: 28px; height: 28px; background: url("../images/common/accrodion_chevron-up.svg") no-repeat center;}
.icon-fail { width: 40px; height: 40px; background: url("../images/common/fail.svg") no-repeat center;}
.icon-pass { width: 40px; height: 40px; background: url("../images/common/pass.svg") no-repeat center;}
.icon-arrow-narrow-right { width: 25px; height: 25px; background: url("../images/common/arrow-narrow-right.svg") no-repeat center;}
.icon-myClass-x { width: 25px; height: 25px; background: url("../images/common/myClass_x.svg") no-repeat center;}
.icon-plus { width: 24px; height: 24px; background: var(--icon); background-size: var(--icon-size); background-position: -119px 3px;}
.icon-close { width: 24px; height: 24px; background: url("../images/common/x.svg") no-repeat center !important;}
.icon-menu { width: 24px; height: 24px; background: url("../images/common/menu-2.svg") no-repeat center !important;}
.icon-mobile-menu-arrow { width: 18px; height: 18px; background: url("../images/common/menu_chevron-down.svg") no-repeat center;}
.icon-alert-circle-blue { width: 20px; height: 20px; background: url("../images/common/alert-circle_blue.svg") no-repeat center;}
.icon-play { width: 20px; height: 20px; background: url("../images/common/icon-play.svg") no-repeat center;}
.icon-heart,
.icon-heart-on { width: 20px; height: 20px; }
.icon-heart { background: url("../images/common/icon-heart.svg") no-repeat center; }
.icon-heart-on { background: url("../images/common/icon-heart-on.svg") no-repeat center; }
.icon-share { width: 20px; height: 20px; background: url("../images/common/icon-share-2.svg") no-repeat center; }
.icon-download-big { width: 20px; height: 20px; background: url("../images/common/download_big.svg") no-repeat center;}
.icon-file-download { width: 23px; height: 23px; background: url("../images/common/file_download.svg") no-repeat center;}
.icon-lock { width: 20px; height: 20px; background: url("../images/common/lock.svg") no-repeat center;}
.arrow-right-white { width: 16px; height: 16px; background: url("../images/common/arrow-narrow-right_white.svg") no-repeat center;}
.icon-result-total { width: 20px; height: 20px; background: url("../images/common/icon_my_class_result.svg") no-repeat center;}
.icon-not { width: 27px; height: 27px; background: url("../images/common/myCdp_note-off.svg") no-repeat center;}
.icon-ok { width: 27px; height: 27px; background: url("../images/common/myCdp_check.svg") no-repeat center;}
.icon-volume { width: 26px; height: 26px; background: url("../images/common/volume-up.svg") no-repeat center;}
.icon-import-gray { width: 20px; height: 20px; background: url("../images/common/import_gray.svg") no-repeat center; background-size: contain;}
.icon-radar { width: 20px; height: 20px; background: url("../images/sub/icon_sort_pentagon_off.svg") no-repeat center; background-size: contain;}
.icon-bar { width: 20px; height: 20px; background: url("../images/sub/icon_bar_chart.svg") no-repeat center; background-size: contain;}
.icon-table { width: 20px; height: 20px; background: url("../images/sub/icon_sort_list.svg") no-repeat center; background-size: contain;}
.exclamation-circle { width: 20px; height: 20px; background: url("../images/common/exclamation-circle.svg") no-repeat center; background-size: contain;}
.icon-input-delete { width: 20px; height: 20px; background: url("../images/common/icon_input_delete.svg") no-repeat center; background-size: contain;}
.icon-mobile-down { width: 18px; height: 18px; background: url("../images/common/chevron-down_mobile_menu.svg") no-repeat center; background-size: contain;}
.icon-plus2 { width: 20px; height: 20px; background: url("../images/common/plus.svg") no-repeat center; background-size: contain;}
.icon-certificate { width: 16px; height: 16px; background: url("../images/sub/school.svg") no-repeat center; background-size: contain;}
.icon-review { width: 16px; height: 16px; background: url("../images/sub/result_star.svg") no-repeat center; background-size: contain;}
.icon-surv { width: 16px; height: 16px; background: url("../images/sub/pencil.svg") no-repeat center; background-size: contain;}
.icon-w { width: 19px; height: 19px; border-radius: 9999px; background-color: var(--primary-500); font-family: var(--SUIT); font-weight: bold; font-size: 11px; font-style: normal; line-height: 11px; letter-spacing: -0.22px; color: #fff;}
.icon-more { width: 20px; height: 20px; background: url("../images/common/icon-btn-more.svg") no-repeat center; }
.icon-card { width: 24px; height: 24px; background: url("../images/common/icon-card.svg") no-repeat center; }
.icon-list { width: 24px; height: 24px; background: url("../images/common/icon-list.svg") no-repeat center; }
.icon-next { width: 12px; height: 20px; background: url("../images/common/chevron-right.svg") no-repeat center; }
.icon-prev { width: 12px; height: 20px; background: url("../images/common/chevron-left.svg") no-repeat center; }