/**
이미지 경로 : /images/inc/...
**/
/* 마이페이지 상황에 따른 버튼 디자인 ------------------------------------------------- */

a.btn.off { background: #E6E8EA; color:#8A949E; border-color:#8A949E; cursor: context-menu; }
a.btn.edit { background: #F6BFC8; } 

button.off[disabled] { cursor: default; }

.btn:has(> .tooltip) { position:relative; }
.btn:has(> .tooltip) .tooltip { display:none; opacity:0; position:absolute; top:5.2rem; left:50%; z-index:10; min-width:max-content; padding:0 .4rem; font-size:1.5rem; border-radius:.4rem; background:rgba(0,0,0,.8); box-shadow:0 0 1rem #CDD1D5; color:#fff; transform:translateX(-50%); text-align: center; }

.btn.icon:has(> .tooltip) .tooltip { top: 3.2rem; }

.btn:has(> .tooltip) .tooltip::before { content:''; position:absolute; top:-.2rem; left:50%; background:inherit; width:.4rem; height:.4rem; transform:rotate(45deg); }

.btn:hover .tooltip,
.btn:focus .tooltip { display:block; opacity:1; }

/*form:has(button[type="submit"].btn) { display:inline-block; }*/

/* 버튼 */
.exam-wrap { display:flex; align-items:flex-start; gap:16px; }
.btn.submit { width:100%; border:none;}
.btn { display:inline-flex; justify-content:center; align-items:center; border-radius:8px; color:#fff; background:#5151BA; transition:0.3s; cursor: pointer; }

.btn-txt { padding:2px; background:none; color:#464c53; }

.btn.secondary { background:#f5f5ff; border:1px solid #5151BA; color:#5151BA; }
.btn.tertiary { background:#fff; border:1px solid #666; color:#666; }
.btn.point { background:#D63D4A; color:#fff; }
.btn.bg-point { background:#FBEFF0; border:1px solid #AB2B36; color:#AB2B36; }
.btn.warning { background:#98690A; color:#fff; }
.btn.bg-warning { background:#FFF8E9; border:1px solid #98690A; color:#98690A; }
.btn.information { background:#0b78cb; border:1px solid #0b78cb; color:#fff; }
.btn.bg-information { background:#e7f4fe; border:1px solid #096ab3; color:#096ab3; }
.btn.success { background:#2873c8; border:1px solid #088a7c; color:#fff; }
.btn.bg-success { background:#EEF7F0; border:1px solid #006E18; color:#006E18; }

.btn.gray { background:#fff; border:1px solid #6D7882; color:#6D7882; }
.btn.bg-gray { background:#8A949E; border:1px solid #8A949E; color:#fafafa; }
.btn.bg-gray { background:#E6E8EA; border:1px solid #58616A; color:#58616A; }



	/* 상호작용 효과 */
.btn:active { outline:2px solid #D4BFFB; }
.btn:not(.link):focus { outline-offset:-4px; outline:2px solid #E9ECFF; }
.btn:hover { background:#451B92; } 

.btn.secondary:hover { background:#dde6ff; }
.btn.secondary:focus { outline-color:#5a83f5; }

.btn.tertiary:hover { background:#E6E8EA; }
.btn.tertiary:focus { outline-color:#F55A74; }

.btn.bg-point:hover { background:#F5D6D9; color:#7A1F26; }
.btn.bg-point:focus { outline-color:#D63D4A; }

.btn.bg-information:hover { background:#d3ebfd; color:#085691; }
.btn.bg-information:focus { outline-color:#0b78cb; }

.btn.bg-warning:hover { background:#FFEAC1; color:#66490E; }
.btn.bg-warning:focus { outline-color:#FFB724; }

.btn.point:hover { background:#AB2B36; }
.btn.point:focus { outline-color:#fff; }

.btn.information:hover { background:#096ab3; }
.btn.information:focus { outline-color:#fff; }

.btn.gray:hover { background:#E6E8EA; color:#464C53; }
.btn.gray:focus { outline-color:#6D7882; }

.btn.bg-gray:hover { background:#CDD1D5; }
.btn.bg-gray:focus { outline-color:#fff; }

.btn.bg-success:hover { background:#CEE9D4; }
.btn.bg-success:focus { outline-color:#005312; }

.btn-txt:active { outline:2px solid #464C53 !important; }
.btn-txt:focus { outline-offset:0 !important; outline:2px solid #464C53 !important; }
.btn-txt:hover { background:#CDD1D5 !important; }


/* 사이즈별 */
.btn.xs { min-height:2.4rem; padding:0 1rem; font-size:1.5rem; }
.btn.s { min-height:3.2rem; padding:0 1.2rem; font-size:1.6rem; }
.btn,
.btn.m { min-height:4rem; padding:0 1.6rem; font-size:1.7rem; }
.btn.l { min-height:4.8rem; padding:0 2rem; font-size:1.8rem; }
.btn.xl { min-height:5.6rem; padding:0 2.4rem; font-size:1.9rem; }
.btn.long { width:30rem; padding:1rem; font-size:1.8rem; }

.btn.icon.xs { width:2rem; height:2rem; }
.btn.icon.s { width:2.6rem; height:2.6rem; }
.btn.icon { width:3.2rem; height:3.2rem; min-height:auto; padding:0; border-radius:100%; }
.btn.icon.l { width:4rem; height:4rem; }
.btn.icon.xl { width:4.8rem; height:4.8rem; }


/* 기능별 */
.btn .svg-icon { width:2rem; height:2rem; }
.btn.ico-excel { background-color:#138147; gap:4px; }
.btn.ico-excel::before,
.btn.ico-excel.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/icon/ico_excel.svg) no-repeat center; }

.btn.ico-hwp { background-color:#148FD0; gap:4px; }
.btn.ico-hwp::before,
.btn.ico-hwp.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/inc/ico_hwp.png) no-repeat center; }

.btn.ico-down { background-color:#fff; color:#1E2124; gap:4px; }
.btn.ico-down::before,
.btn.ico-down.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/inc/ico_down.png) no-repeat center; }



.btn.after::before { display:none; }


button[disabled],
a[disabled] { cursor: default; background:#CDD1D5 !important; border:0 !important; color:#58616A !important; }
button:hover[disabled],
a:hover[disabled] { background:#CDD1D5 !important; color:#58616A !important; }



/* 링크 */
.btn.link { background-color: #00000000; border-color: #00000000; color: #3B4BA9; }
.btn.link:not(.icon) .svg-icon { background-color: #3B4BA9; }
.btn.link:hover { background-color: #ffffff00; }
.btn.link:active, .krds-btn.link:focus { background-color: #ffffff00; }
.btn.link[disabled], .krds-btn.link.disabled { background-color: #ffffff00;  border-color: #00000000; color: #8A949E;}
.btn.link[disabled]:not(.icon) .svg-icon, .btn.link.disabled:not(.icon) .svg-icon { background-color: #8A949E; }
.btn.link[disabled]:hover, .btn.link.disabled:hover { background-color: #ffffff00; border-color: #00000000; color: #8A949E; }

.btn.link { display: inline-block; min-height: auto !important; padding: 0 0.2rem; font-size: 1.9rem; text-align: left; white-space: normal; }
.btn.link.xs { padding: 0 0.2rem; font-size: 1.5rem;}
.btn.link.xs .svg-icon { margin-bottom: -0.3rem; }
.btn.link.s { padding: 0 0.2rem; font-size: 1.5rem; }
.btn.link.s .svg-icon { margin-bottom: -0.3rem; }
.btn.link.m { padding: 0 0.2rem; font-size: 1.7rem; }
.btn.link.m .svg-icon { margin-bottom: -0.4rem; }
.btn.link.l { padding: 0 0.2rem; font-size: 1.9rem; }
.btn.link.l .svg-icon { margin-bottom: -0.5rem; }
.btn.link.xl { padding: 0 0.2rem; font-size:  1.9rem; }

.btn.link.xlarge .svg-icon { margin-bottom: -0.6rem; }
.btn.link.basic { color: #1E2124; text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-color: #00000000; }
.btn.link.basic .svg-icon { background-color: #1E2124; }

.btn.link.basic:hover,
.btn.link.basic:active,
.btn.link.basic:focus { text-decoration-color: inherit; }

.btn.link:hover { color: #1B2D92; }
.btn.link:hover .svg-icon { background-color: #1B2D92; }

.btn.link:active,
.btn.link:focus { color: #142277; }

.btn.link:active .svg-icon,
.btn.link:focus .svg-icon { background-color: #142277; }
.btn.link:visited { color: #5917b8;; text-decoration: none; }
.btn.link:visited .svg-icon { background-color: #5917b8;; }
.btn.link .svg-icon { display: inline-block; margin-bottom: -0.5rem; }

@media (max-width: 767px) {
	.btn.link { font-size: 1.9rem; }
	.btn.link.xsmall { font-size: 1.5rem; }
	.btn.link.small { font-size: 1.5rem; }
	.btn.link.medium { font-size: 1.7rem; }
	.btn.link.large { font-size: 1.9rem; }
	.btn.link.xlarge { font-size: 1.9rem; }
}




/* icon-img 사이즈 */
.extIcon { width:20px; height:20px; border-radius:4px; }
.extIcon.pdf { background:#EF3E5E; }
.extIcon.hwp { background:#2098f3;  }
.extIcon.ppt { background:#2098f3; }
.extIcon.excel { background:#2873c8 }
.extIcon.word { background:#2873c8 }
.extIcon.photo { background:#6D7882; }




/* 아이콘 & 기능 */
.svg-icon { display:inline-flex; width:2rem; height:2rem; -webkit-mask-repeat: no-repeat; -webkit-mask-position:center center; -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center center; mask-size:cover; background-color:#33363D; }

	/* 사이즈 */
.xs .svg-icon,
.s .svg-icon { width:1.6rem; height:1.6rem; }
.l .svg-icon { width:2.4rem; height:2.4rem; }

.svg-icon.ico-excel { -webkit-mask-image:url(/images/icon/ico_excel.svg); mask-image:url(/images/icon/ico_excel.svg); }
.svg-icon.ico-all { -webkit-mask-image:url(/images/icon/ico_all.svg); mask-image:url(/images/icon/ico_all.svg); }
.svg-icon.ico-all2 { -webkit-mask-image:url(/images/icon/ico_all2.svg); mask-image:url(/images/icon/ico_all2.svg); }
.svg-icon.ico-go { -webkit-mask-image:url(/images/icon/ico_go.svg); mask-image:url(/images/icon/ico_go.svg); }
.svg-icon.ico-go.white { -webkit-mask-image:url(/images/icon/ico_go_w.svg); mask-image:url(/images/icon/ico_go_w.svg); }
.svg-icon.ico-angle { -webkit-mask-image:url(/images/icon/ico_angle.svg); mask-image:url(/images/icon/ico_angle.svg); }
.svg-icon.ico-arrow { -webkit-mask-image:url(/images/icon/ico_arrow_dropdown.svg); mask-image:url(/images/icon/ico_arrow_dropdown.svg); }
.svg-icon.ico-blog { -webkit-mask-image:url(/images/icon/ico_blog.svg); mask-image:url(/images/icon/ico_blog.svg); }
.svg-icon.ico-chart { -webkit-mask-image:url(/images/icon/ico_chart.svg); mask-image:url(/images/icon/ico_chart.svg); }
.svg-icon.ico-calendar { -webkit-mask-image:url(/images/icon/ico_calendar.svg); mask-image:url(/images/icon/ico_calendar.svg); }
.svg-icon.ico-monitor { -webkit-mask-image:url(/images/icon/ico_monitor.svg); mask-image:url(/images/icon/ico_monitor.svg); }
.svg-icon.ico-dashboard { -webkit-mask-image:url(/images/icon/ico_dashboard.svg); mask-image:url(/images/icon/ico_dashboard.svg); }
.svg-icon.ico-document { -webkit-mask-image:url(/images/icon/ico_document.svg); mask-image:url(/images/icon/ico_document.svg); }
.svg-icon.ico-edit { -webkit-mask-image:url(/images/icon/ico_edit.svg); mask-image:url(/images/icon/ico_edit.svg); }
.svg-icon.ico-bell { -webkit-mask-image:url(/images/icon/ico_bell.svg); mask-image:url(/images/icon/ico_bell.svg); }
.svg-icon.ico-call { -webkit-mask-image:url(/images/icon/ico_call.svg); mask-image:url(/images/icon/ico_call.svg); }
.svg-icon.ico-like { -webkit-mask-image:url(/images/icon/ico_like.svg); mask-image:url(/images/icon/ico_like.svg); }
.svg-icon.ico-down { -webkit-mask-image:url(/images/icon/ico_download.svg); mask-image:url(/images/icon/ico_download.svg); }
.svg-icon.ico-angle.up { transform: rotate(180deg); }
.svg-icon.ico-angle.left { transform: rotate(90deg); }
.svg-icon.ico-angle.right { transform: rotate(-90deg); }
.svg-icon.ico-close { -webkit-mask-image:url(/images/icon/ico_close.svg); mask-image:url(/images/icon/ico_close.svg); }
.svg-icon.ico-file { -webkit-mask-image:url(/images/icon/ico_file.svg); mask-image:url(/images/icon/ico_file.svg); }
.svg-icon.ico-fold { -webkit-mask-image:url(/images/icon/ico_foldable.svg); mask-image:url(/images/icon/ico_foldable.svg); }
.svg-icon.ico-fold.up { transform: rotate(90deg); }
.svg-icon.ico-fold.down { transform: rotate(-90deg); }
.svg-icon.ico-fold.right { transform: rotate(180deg); }
.svg-icon.ico-home { -webkit-mask-image:url(/images/icon/ico_bread_home.svg); mask-image:url(/images/icon/ico_bread_home.svg); }
.svg-icon.ico-global { -webkit-mask-image:url(/images/icon/ico_global.svg); mask-image:url(/images/icon/ico_global.svg); }
.svg-icon.ico-login { -webkit-mask-image:url(/images/icon/ico_login.svg); mask-image:url(/images/icon/ico_login.svg); }
.svg-icon.ico-logout { -webkit-mask-image:url(/images/icon/ico_logout.svg); mask-image:url(/images/icon/ico_logout.svg); }
.svg-icon.ico-time { -webkit-mask-image:url(/images/icon/ico_clock.svg); mask-image:url(/images/icon/ico_clock.svg); }
.svg-icon.ico-trash { -webkit-mask-image:url(/images/icon/ico_trash.svg); mask-image:url(/images/icon/ico_trash.svg); }
.svg-icon.ico-more { -webkit-mask-image:url(/images/icon/ico_ellipsis.svg); mask-image:url(/images/icon/ico_ellipsis.svg); }
.svg-icon.ico-plus { -webkit-mask-image:url(/images/icon/ico_plus.svg); mask-image:url(/images/icon/ico_plus.svg); }
.svg-icon.ico-print { -webkit-mask-image:url(/images/icon/ico_print.svg); mask-image:url(/images/icon/ico_print.svg); }
.svg-icon.ico-play { -webkit-mask-image:url(/images/icon/ico_swiper_play.svg); mask-image:url(/images/icon/ico_swiper_play.svg); }
.svg-icon.ico-play.on { -webkit-mask-image:url(/images/icon/ico_swiper_stop.svg); mask-image:url(/images/icon/ico_swiper_stop.svg); }
.svg-icon.ico-youtube { -webkit-mask-image:url(/images/icon/ico_youtube.svg); mask-image:url(/images/icon/ico_youtube.svg); }
.svg-icon.ico-reset { -webkit-mask-image:url(/images/icon/ico_reset.svg); mask-image:url(/images/icon/ico_reset.svg); }
.svg-icon.ico-setting { -webkit-mask-image:url(/images/icon/ico_setting.svg); mask-image:url(/images/icon/ico_setting.svg); }
.svg-icon.ico-unlock { -webkit-mask-image:url(/images/icon/ico_unlock.svg); mask-image:url(/images/icon/ico_unlock.svg); }
.svg-icon.ico-lock { -webkit-mask-image:url(/images/icon/ico_lock.svg); mask-image:url(/images/icon/ico_lock.svg); }
.svg-icon.ico-information { -webkit-mask-image:url(/images/icon/ico_information.svg); mask-image:url(/images/icon/ico_information.svg); }
.svg-icon.ico-help { -webkit-mask-image:url(/images/icon/ico_help_line.svg); mask-image:url(/images/icon/ico_help_line.svg); }
.svg-icon.ico-my { -webkit-mask-image:url(/images/icon/ico_my.svg); mask-image:url(/images/icon/ico_my.svg); }

.svg-icon.ico-link { -webkit-mask-image:url(/images/icon/ico-link.png); mask-image:url(/images/icon/ico-link.png); }
.svg-icon.ico_calender { -webkit-mask-image:url(/images/icon/ico_calender.svg); mask-image:url(/images/icon/ico_calender.svg); }
.svg-icon.ico-map { -webkit-mask-image:url(/images/icon/ico-map.png); mask-image:url(/images/icon/ico-map.png); }
.svg-icon.ico-check { -webkit-mask-image:url(/images/icon/ico-check.png); mask-image:url(/images/icon/ico-check.png); }
.svg-icon.ico-check2 { -webkit-mask-image:url(/images/icon/ico-check2.png); mask-image:url(/images/icon/ico-check2.png); }
.svg-icon.ico-repair { -webkit-mask-image:url(/images/icon/ico-repair.png); mask-image:url(/images/icon/ico-repair.png); }
.svg-icon.ico-mail { -webkit-mask-image:url(/images/icon/ico-mail.svg); mask-image:url(/images/icon/ico-mail.svg); }
.svg-icon.ico-identity { -webkit-mask-image:url(/images/icon/ico-identity.svg); mask-image:url(/images/icon/ico-identity.svg); }
.svg-icon.ico_search { -webkit-mask-image:url(/images/icon/ico_search.png); mask-image:url(/images/icon/ico_search.png); }

.svg-icon.before { margin-right:.8rem; }
.svg-icon.after { margin-left:.8rem; }

.xs .svg-icon.before,
.s .svg-icon.before { margin-right:.4rem; }
.xs .svg-icon.after,
.s .svg-icon.after { margin-left:.4rem; }


.ico-inquiry { width:20px; }


/* 색상 */
.btn.bg-point .svg-icon { background-color:#fff; }
.btn.bg-point .svg-icon { background-color:#D63D4A; }
.btn.bg-success .svg-icon { background-color:#2873c8 }
.btn.bg-warning .svg-icon { background-color:#98690A; }
.btn.bg-information .svg-icon { background-color:#0b78cb; }

.btn.point .svg-icon,
.btn.point .svg-icon,
.btn.success .svg-icon,
.btn.warning .svg-icon,
.btn.information .svg-icon { background-color:#fff; }


.btn[disabled] .svg-icon { background-color:#6D7882 !important; }