/*
 * 글꼴. 2026-09-23 파트너 64번.
 *
 * Pretendard 를 한 파일(PretendardVariable.woff2, 2MB)로 씁니다. 굵기 45~920 이 다 들어 있습니다.
 * 굵기마다 파일을 따로 받으면 도착 시각이 달라서, 어떤 메뉴는 Pretendard 로 어떤 메뉴는 맑은 고딕으로 나옵니다.
 * 한 파일이면 다 오거나 다 안 오거나 둘 중 하나라 섞이지 않습니다.
 *
 * font-display 는 swap 입니다. 늦게 와도 도착하는 순간 Pretendard 로 바뀝니다.
 * 머리말마다 이 파일을 preload 로 먼저 부르므로, 대개는 글꼴이 준비된 뒤에 첫 화면이 그려집니다.
 *
 * PC 에 Pretendard Variable 이 설치돼 있으면 받지 않고 그것을 씁니다.
 *
 * 전에는 이 자리에 @import url("../fonts/font.css") 가 있었습니다.
 * 그 파일이 굵기별 파일 9개를 같은 이름으로 등록해서, 한 파일 글꼴이 쓰이지 않았습니다.
 */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
    src: local('Pretendard Variable'),
         url('/fonts/pretendard/woff2/PretendardVariable.woff2') format('woff2');
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
* {
    box-sizing: border-box;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
em {
    font-style: normal;
}
a {
    color: inherit;
    text-decoration: none;
}
br.mobile_br {
    display: none;
}
body {
    font-size: 13px;
    line-height: 1.385;
    letter-spacing: -0.2px;
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    color: #14171C;
}
h1 {
    /* 	font-size: 2.769rem; */
    font-size: 36px;
    line-height: 1.334;
    font-weight: 700;
    /* 	36px */
}
h2 {
    /* 	font-size: 2.461rem; */
    font-size: 32px;
    line-height: 1.312;
    font-weight: 700;
    /* 	32px */
}
h3 {
    /* 	font-size: 1.846rem; */
    font-size: 24px;
    line-height: 1.334;
    font-weight: 700;
    /* 	24px */
}
h4 {
    /* 	font-size: 1.538rem; */
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    /* 	20px */
}
h5 {
    /* 	font-size: 1.307rem; */
    font-size: 17px;
    line-height: 1.53;
    font-weight: 700;
    /* 	17px */
}
h6 {
    /* 	font-size: 1.153rem; */
    font-size: 15px;
    line-height: 1.6;
    font-weight: 700;
    /* 	15px */
}
small, .small {
    /* 	font-size: 0.846rem; */
    font-size: 11px;
    /* 	11px */
}
strong, .strong {
    font-weight: 700;
}
b, .b {
    font-weight: 500;
}
.normal {
    font-weight: 400;
}
.highlight {
    color: #0099B0;
}

.text_left {
    text-align: left !important;
}
.text_center {
    text-align: center !important;
}
.text_right {
    text-align: right !important;
}

/* layout */
header {
    display: flex;
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 100;
    background-color: #FFF;
    border-bottom: 1px solid #E7E9EC;
}
aside {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 240px;
    background-color: #FFF;
    padding-top: 60px;
    z-index: 10;
    border-right:1px solid #E7E9EC;
}
aside.on {
    overflow-y: scroll;
    z-index: 1100;
}

main {
    width: 100%;
    padding-top: 60px;
    z-index: 10;
}
main.side_on {
    padding-left: 240px;
}

.header_area,
.header_left,
.header_right {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header_area {
    width: 100%;
    padding: 10px 28px;
}
.header_logo {
}
/* 2026-09-22 CI 교체. 공식 슬로건 "Safe City, Save Lives." 가 들어간 로고로 바꿨습니다.
   폭은 고객지원 머리말과 같은 111입니다. 높이 30일 때 이 로고의 폭이 약 108입니다. */
.header_logo a {
    display: block;
    font-size: 0;
    width: 111px;
    height: 30px;
    background-image: url('/images/logo/idis_krm.svg');
    background-size: auto 30px;
    background-position: left center;
    background-repeat: no-repeat;
}
.gnb {
    display: none;
}
.gnb ul,
.lnb ul {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lnb ul {
    gap: 16px;
}
.gnb a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    background-color: #F3F4F6;
}
.left_menu {
    padding: 8px 10px 0;
}
.navigation > li {
    margin-bottom: 4px;
}
.navigation li a {
    display: block;
    padding: 10px 10px;
    font-weight: 500;
}
.has_sub {
    border-radius: 8px;
    background-color: #F3F4F6;
    background-image: url('/images/icon/arrow/arrow_top_black.svg');
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
}
.has_sub.on {
    background-image: url('/images/icon/arrow/arrow_down_black.svg');
}
.sub_navigation > li > a {
    padding-left: 24px;
    color: #6B7787;
}

.container {
    padding-left: 30px;
    padding-right: 30px;
}
.md_container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}
.sm_container {
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
}
.xs_container {
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
}

.common_section {
    padding-top: 48px;
    padding-bottom: 48px;
}
.sign_section {
    padding-top: 80px;
    padding-bottom: 100px;
}


/* color */
.gray {
    color: #6B7787;
}

/*
        icon
        small 12px
        midium 16px
        large 24px
*/
.btn_ico {
    font-size: 0;
    border: none;
    background: none;
}
.btn_link {
    color: #0099B0 !important;
    background: none !important;
    border: none !important;
}
.ico {
    font-size: 0;
    font-style: normal;
    background-repeat: no-repeat;
    background-position: center;
}
.xs {
    display: block;
    width: 12px;
    height: 12px;
    background-size: 12px;
}
.sm {
    display: block;
    width: 16px;
    height: 16px;
    background-size: 16px;
}
.md {
    display: block;
    width: 20px;
    height: 20px;
    background-size: 20px;
}
.lg {
    display: block;
    width: 24px;
    height: 24px;
    background-size: 24px;
}
.xl {
    display: block;
    width: 32px;
    height: 32px;
    background-size: 32px;
}

.arrow_top {
    background-image: url('/images/icon/arrow/arrow_top_black.svg');
}
.arrow_right {
    background-image: url('/images/icon/arrow/arrow_right_black.svg');
}
.arrow_down {
    background-image: url('/images/icon/arrow/arrow_down_black.svg');
}
.arrow_left {
    background-image: url('/images/icon/arrow/arrow_left_black.svg');
}

.arrow_top_white {
    background-image: url('/images/icon/arrow/arrow_top_white.svg');
}
.arrow_right_white {
    background-image: url('/images/icon/arrow/arrow_right_white.svg');
}
.arrow_down_white {
    background-image: url('/images/icon/arrow/arrow_down_white.svg');
}
.arrow_left_white {
    background-image: url('/images/icon/arrow/arrow_left_white.svg');
}

.arrow_top_blue {
    background-image: url('/images/icon/arrow/arrow_top_blue.svg');
}
.arrow_right_blue {
    background-image: url('/images/icon/arrow/arrow_right_blue.svg');
}
.arrow_down_blue {
    background-image: url('/images/icon/arrow/arrow_down_blue.svg');
}
.arrow_left_blue {
    background-image: url('/images/icon/arrow/arrow_left_blue.svg');
}

.arrow_top_lightblue {
    background-image: url('/images/icon/arrow/arrow_top_lightblue.svg');
}
.arrow_right_lightblue {
    background-image: url('/images/icon/arrow/arrow_right_lightblue.svg');
}
.arrow_down_lightblue {
    background-image: url('/images/icon/arrow/arrow_down_lightblue.svg');
}
.arrow_left_lightblue {
    background-image: url('/images/icon/arrow/arrow_left_lightblue.svg');
}

.arrow_top_red {
    background-image: url('/images/icon/arrow/arrow_top_red.svg');
}
.arrow_right_red {
    background-image: url('/images/icon/arrow/arrow_right_red.svg');
}
.arrow_down_red {
    background-image: url('/images/icon/arrow/arrow_down_red.svg');
}
.arrow_left_red {
    background-image: url('/images/icon/arrow/arrow_left_red.svg');
}

.arrow_top_lightred {
    background-image: url('/images/icon/arrow/arrow_top_lightred.svg');
}
.arrow_right_lightred {
    background-image: url('/images/icon/arrow/arrow_right_lightred.svg');
}
.arrow_down_lightred {
    background-image: url('/images/icon/arrow/arrow_down_lightred.svg');
}
.arrow_left_lightred {
    background-image: url('/images/icon/arrow/arrow_left_lightred.svg');
}

.ico_menu {
    background-image: url('/images/icon/icon/default/ico_menu.svg');
}
.ico_close {
    background-image: url('/images/icon/icon/default/ico_close.svg');
}
.ico_plus {
    background-image: url('/images/icon/icon/default/ico_plus.svg');
}
.ico_search {
    background-image: url('/images/icon/icon/default/ico_search.svg');
}
.ico_alert {
    background-image: url('/images/icon/icon/default/ico_alert.svg');
}
.ico_delete {
    background-image: url('/images/icon/icon/default/ico_delete.svg');
}
.ico_download {
    background-image: url('/images/icon/icon/default/ico_download.svg');
}
.ico_calendar {
    background-image: url('/images/icon/icon/default/ico_calendar.svg');
}
.ico_reset {
    background-image: url('/images/icon/icon/default/ico_reset.svg');
}
.ico_link {
    background-image: url('/images/icon/icon/default/ico_link.svg');
}
.ico_file {
    background-image: url('/images/icon/icon/default/ico_file.svg');
}
.ico_image {
    background-image: url('/images/icon/icon/default/ico_image.svg');
}
.ico_more {
    background-image: url('/images/icon/icon/default/ico_more.svg');
}
.ico_edit {
    background-image: url('/images/icon/icon/default/ico_edit.svg');
}

.ico_menu_black {
    background-image: url('/images/icon/icon/black/ico_menu.svg');
}
.ico_close_black {
    background-image: url('/images/icon/icon/black/ico_close.svg');
}
.ico_plus_black {
    background-image: url('/images/icon/icon/black/ico_plus.svg');
}
.ico_search_black {
    background-image: url('/images/icon/icon/black/ico_search.svg');
}
.ico_alert_black {
    background-image: url('/images/icon/icon/black/ico_alert.svg');
}
.ico_delete_black {
    background-image: url('/images/icon/icon/black/ico_delete.svg');
}
.ico_download_black {
    background-image: url('/images/icon/icon/black/ico_download.svg');
}
.ico_calendar_black {
    background-image: url('/images/icon/icon/black/ico_calendar.svg');
}
.ico_reset_black {
    background-image: url('/images/icon/icon/black/ico_reset.svg');
}
.ico_link_black {
    background-image: url('/images/icon/icon/black/ico_link.svg');
}
.ico_file_black {
    background-image: url('/images/icon/icon/black/ico_file.svg');
}
.ico_image_black {
    background-image: url('/images/icon/icon/black/ico_image.svg');
}
.ico_more_black {
    background-image: url('/images/icon/icon/black/ico_more.svg');
}
.ico_edit_black {
    background-image: url('/images/icon/icon/black/ico_edit.svg');
}

.ico_menu_gray {
    background-image: url('/images/icon/icon/gray/ico_menu.svg');
}
.ico_close_gray {
    background-image: url('/images/icon/icon/gray/ico_close.svg');
}
.ico_plus_gray {
    background-image: url('/images/icon/icon/gray/ico_plus.svg');
}
.ico_search_gray {
    background-image: url('/images/icon/icon/gray/ico_search.svg');
}
.ico_alert_gray {
    background-image: url('/images/icon/icon/gray/ico_alert.svg');
}
.ico_delete_gray {
    background-image: url('/images/icon/icon/gray/ico_delete.svg');
}
.ico_download_gray {
    background-image: url('/images/icon/icon/gray/ico_download.svg');
}
.ico_calendar_gray {
    background-image: url('/images/icon/icon/gray/ico_calendar.svg');
}
.ico_reset_gray {
    background-image: url('/images/icon/icon/gray/ico_reset.svg');
}
.ico_link_gray {
    background-image: url('/images/icon/icon/gray/ico_link.svg');
}
.ico_file_gray {
    background-image: url('/images/icon/icon/gray/ico_file.svg');
}
.ico_image_gray {
    background-image: url('/images/icon/icon/gray/ico_image.svg');
}
.ico_more_gray {
    background-image: url('/images/icon/icon/gray/ico_more.svg');
}
.ico_edit_gray {
    background-image: url('/images/icon/icon/gray/ico_edit.svg');
}

.ico_menu_blue {
    background-image: url('/images/icon/icon/blue/ico_menu.svg');
}
.ico_close_blue {
    background-image: url('/images/icon/icon/blue/ico_close.svg');
}
.ico_plus_blue {
    background-image: url('/images/icon/icon/blue/ico_plus.svg');
}
.ico_search_blue {
    background-image: url('/images/icon/icon/blue/ico_search.svg');
}
.ico_alert_blue {
    background-image: url('/images/icon/icon/blue/ico_alert.svg');
}
.ico_delete_blue {
    background-image: url('/images/icon/icon/blue/ico_delete.svg');
}
.ico_download_blue {
    background-image: url('/images/icon/icon/blue/ico_download.svg');
}
.ico_calendar_blue {
    background-image: url('/images/icon/icon/blue/ico_calendar.svg');
}
.ico_reset_blue {
    background-image: url('/images/icon/icon/blue/ico_reset.svg');
}
.ico_link_blue {
    background-image: url('/images/icon/icon/blue/ico_link.svg');
}
.ico_file_blue {
    background-image: url('/images/icon/icon/blue/ico_file.svg');
}
.ico_image_blue {
    background-image: url('/images/icon/icon/blue/ico_image.svg');
}
.ico_more_blue {
    background-image: url('/images/icon/icon/blue/ico_more.svg');
}
.ico_edit_blue {
    background-image: url('/images/icon/icon/blue/ico_edit.svg');
}

.ico_menu_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_menu.svg');
}
.ico_close_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_close.svg');
}
.ico_plus_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_plus.svg');
}
.ico_search_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_search.svg');
}
.ico_alert_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_alert.svg');
}
.ico_delete_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_delete.svg');
}
.ico_download_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_download.svg');
}
.ico_calendar_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_calendar.svg');
}
.ico_reset_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_reset.svg');
}
.ico_link_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_link.svg');
}
.ico_file_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_file.svg');
}
.ico_image_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_image.svg');
}
.ico_more_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_more.svg');
}
.ico_edit_lightblue {
    background-image: url('/images/icon/icon/lightblue/ico_edit.svg');
}

.ico_menu_red {
    background-image: url('/images/icon/icon/red/ico_menu.svg');
}
.ico_close_red {
    background-image: url('/images/icon/icon/red/ico_close.svg');
}
.ico_plus_red {
    background-image: url('/images/icon/icon/red/ico_plus.svg');
}
.ico_search_red {
    background-image: url('/images/icon/icon/red/ico_search.svg');
}
.ico_alert_red {
    background-image: url('/images/icon/icon/red/ico_alert.svg');
}
.ico_delete_red {
    background-image: url('/images/icon/icon/red/ico_delete.svg');
}
.ico_download_red {
    background-image: url('/images/icon/icon/red/ico_download.svg');
}
.ico_calendar_red {
    background-image: url('/images/icon/icon/red/ico_calendar.svg');
}
.ico_reset_red {
    background-image: url('/images/icon/icon/red/ico_reset.svg');
}
.ico_link_red {
    background-image: url('/images/icon/icon/red/ico_link.svg');
}
.ico_file_red {
    background-image: url('/images/icon/icon/red/ico_file.svg');
}
.ico_image_red {
    background-image: url('/images/icon/icon/red/ico_image.svg');
}
.ico_more_red {
    background-image: url('/images/icon/icon/red/ico_more.svg');
}
.ico_edit_red {
    background-image: url('/images/icon/icon/red/ico_edit.svg');
}

.ico_menu_lightred {
    background-image: url('/images/icon/icon/lightred/ico_menu.svg');
}
.ico_close_lightred {
    background-image: url('/images/icon/icon/lightred/ico_close.svg');
}
.ico_plus_lightred {
    background-image: url('/images/icon/icon/lightred/ico_plus.svg');
}
.ico_search_lightred {
    background-image: url('/images/icon/icon/lightred/ico_search.svg');
}
.ico_alert_lightred {
    background-image: url('/images/icon/icon/lightred/ico_alert.svg');
}
.ico_delete_lightred {
    background-image: url('/images/icon/icon/lightred/ico_delete.svg');
}
.ico_download_lightred {
    background-image: url('/images/icon/icon/lightred/ico_download.svg');
}
.ico_calendar_lightred {
    background-image: url('/images/icon/icon/lightred/ico_calendar.svg');
}
.ico_reset_lightred {
    background-image: url('/images/icon/icon/lightred/ico_reset.svg');
}
.ico_link_lightred {
    background-image: url('/images/icon/icon/lightred/ico_link.svg');
}
.ico_file_lightred {
    background-image: url('/images/icon/icon/lightred/ico_file.svg');
}
.ico_image_lightred {
    background-image: url('/images/icon/icon/lightred/ico_image.svg');
}
.ico_more_lightred {
    background-image: url('/images/icon/icon/lightred/ico_more.svg');
}
.ico_edit_lightred {
    background-image: url('/images/icon/icon/lightred/ico_edit.svg');
}

.ico_menu_white {
    background-image: url('/images/icon/icon/white/ico_menu.svg');
}
.ico_close_white {
    background-image: url('/images/icon/icon/white/ico_close.svg');
}
.ico_plus_white {
    background-image: url('/images/icon/icon/white/ico_plus.svg');
}
.ico_search_white {
    background-image: url('/images/icon/icon/white/ico_search.svg');
}
.ico_alert_white {
    background-image: url('/images/icon/icon/white/ico_alert.svg');
}
.ico_delete_white {
    background-image: url('/images/icon/icon/white/ico_delete.svg');
}
.ico_download_white {
    background-image: url('/images/icon/icon/white/ico_download.svg');
}
.ico_calendar_white {
    background-image: url('/images/icon/icon/white/ico_calendar.svg');
}
.ico_reset_white {
    background-image: url('/images/icon/icon/white/ico_reset.svg');
}
.ico_link_white {
    background-image: url('/images/icon/icon/white/ico_link.svg');
}
.ico_file_white {
    background-image: url('/images/icon/icon/white/ico_file.svg');
}
.ico_image_white {
    background-image: url('/images/icon/icon/white/ico_image.svg');
}
.ico_more_white {
    background-image: url('/images/icon/icon/white/ico_more.svg');
}
.ico_edit_white {
    background-image: url('/images/icon/icon/white/ico_edit.svg');
}


.ico_new {
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background-image: url('/images/icon/ico_new.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #F97415;
}
.ico_reply {
    display: block;
    padding: 2px 6px;
    color: #0099B0;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: -0.2px;
    border-radius: 10px;
    border: 1px solid #D1D6DD;
}

/* button */
button {
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
}
.btn_wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #39424E;
    border: 1px solid #39424E;
    border-radius: 8px;
    background-color: #FFF;
}

.btn_sm {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 4px;
}
.btn_md {
    padding: 12px 12px;
    font-size: 15px;
    border-radius: 8px;
}
.btn_lg {
    padding: 14px 20px;
    font-size: 15px;
    border-radius: 10px;
}
.btn_ipt {
    padding: 10px 12px;
    height: 46px;
    font-size: 15px;
    border-radius: 10px;
}

/* btn color */
button:disabled {
    cursor: no-drop;
}

.solid.primary {
    color: #FFF;
    border-color: #0099B0;
    background-color: #0099B0;
}
.solid.primary:hover {
    color: #FFF;
    border-color: #008498;
    background-color: #008498;
}
.solid.primary:disabled {
    color: #FFF;
    border-color: #99D7E1;
    background-color: #99D7E1;
}
.solid.dark {
    color: #FFF;
    border-color: #39424E;
    background-color: #39424E;
}
.solid.dark:hover {
    color: #FFF;
    border-color: #22282F;
    background-color: #22282F;
}
.solid.dark:disabled {
    color: #FFF;
    border-color: #D1D6DD;
    background-color: #D1D6DD;
}
.solid.danger {
    color: #FFF;
    border-color: #FF4242;
    background-color: #FF4242;
}
.solid.danger:hover {
    color: #FFF;
    border-color: #D93838;
    background-color: #D93838;
}
.solid.danger:disabled {
    color: #FFF;
    border-color: #FFB3B3;
    background-color: #FFB3B3;
}

.light.primary {
    color: #0099B0;
    border-color: #E3F4F7;
    background-color: #E3F4F7;
}
.light.primary:hover {
    color: #0099B0;
    border-color: #CCEBF0;
    background-color: #CCEBF0;
}
.light.primary:disabled {
    color: #73C8D5;
    border-color: #F1F9FB;
    background-color: #F1F9FB;
}
.light.dark {
    color: #39424E;
    border-color: #F3F4F6;
    background-color: #F3F4F6;
}
.light.dark:hover {
    color: #39424E;
    border-color: #E7E9EC;
    background-color: #E7E9EC;
}
.light.dark:disabled {
    color: #9BA5B4;
    border-color: #F3F4F6;
    background-color: #F3F4F6;
}
.light.danger {
    color: #FF4242;
    border-color: #FFEDED;
    background-color: #FFEDED;
}
.light.danger:hover {
    color: #FF4242;
    border-color: #FFD9D9;
    background-color: #FFD9D9;
}
.light.danger:disabled {
    color: #FF9797;
    border-color: #FFEDED;
    background-color: #FFEDED;
}

.outline.primary {
    color: #0099B0;
    border-color: #33AFC2;
    background-color: #FFF;
}
.outline.primary:hover {
    color: #0099B0;
    border-color: #33AFC2;
    background-color: #F1F9FB;
}
.outline.primary:disabled {
    color: #73C8D5;
    border-color: #99D7E1;
    background-color: #FFF;
}
.outline.dark {
    color: #39424E;
    border-color: #D1D6DD;
    background-color: #FFF;
}
.outline.dark:hover {
    color: #39424E;
    border-color: #D1D6DD;
    background-color: #F3F4F6;
}
.outline.dark:disabled {
    color: #9BA5B4;
    border-color: #D1D6DD;
    background-color: #FFF;
}
.outline.danger {
    color: #FF4242;
    border-color: #FF4242;
    background-color: #FFEDED;
}
.outline.danger:hover {
    color: #FF4242;
    border-color: #FF6868;
    background-color: #FFF;
}
.outline.danger:disabled {
    color: #FFB3B3;
    border-color: #FFB3B3;
    background-color: #FFF;
}

/* btn size */
.btn_block {
    width: 100%;
    justify-content: center;
}
.btn.disabled {
    opacity: 0.4;
    cursor: auto;
}
/* more_btn */
.more_btn {
    position: relative;
}
.more_btn_area {
    display: none;
    position: absolute;
    top: 20px;
    right: 0;
    padding: 16px 16px;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 2px 10px 18px 0px rgba(0, 0, 0, 0.06);
}
.more_btn_area.on {
    display: block;
}
.more_btn_area li + li {
    margin-top: 12px;
}
.more_btn_area button {
    min-width: 52px;
    padding: 2px 4px;
    background: #FFF;
    border: none;
}

/*badge*/
.badge {
    display: inline-block;
    padding: 4px 8px;
    color: #485363;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
    border-color: #F3F4F6;
    background-color: #F3F4F6;
}
.badge.on {
    color: #FFF;
    border-color: #485363;
    background-color: #485363;
}
.blue {
    color: #0099B0;
    border-color: #E9F2FF;
    background-color: #E9F2FF;
}
.blue_on {
    color: #FFF;
    border-color: #0099B0;
    background-color: #0099B0;
}
.red {
    color: #FF4242;
    border-color: #FFEDED;
    background-color: #FFEDED;
}
.red_on {
    color: #FFF;
    border-color: #FF4242;
    background-color: #FF4242;
}
.danger {
    color: #F97415;
    border-color: #FEE3D0;
    background-color: #FEE3D0;
}
.danger_on {
    color: #FFF;
    border-color: #F97415;
    background-color: #F97415;
}
.green {
    color: #21C45D;
    border-color: #D3F3DF;
    background-color: #D3F3DF;
}
.green_on {
    color: #FFF;
    border-color: #21C45D;
    background-color: #21C45D;
}

/* input */
input, select, textarea {
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
}
input:focus,
select:focus {
    outline: 2px solid #4891FF;
}
input[type='date'], input[type='time'] {
    -webkit-appearance: none;
    background-color: #FFF;
}
select {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    background-color: #FFF;
}
input::placeholder,
select::placeholder {
    color: #848E9D;
}
.ipt_title {
    position: relative;
    display: block;
    margin-bottom: 8px;
    color: #485363;
    font-weight: 500;
}
.ipt_title.required:after {
    content: ' *';
    color: #0099B0;
}

.ipt_box {
}
.ipt_box + .ipt_box {
    margin-top: 16px;
}
.ipt_box.flex {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ipt_box.flex .ipt_input {
    width: 100%;
}
.pr40 {
    padding-right: 40px !important;
}
.ipt_input {
    position: relative;
}
.ipt_input > button.add_btn {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}
.ipt_input input {
    width: 100%;
    height: 46px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #E3E6EA;
}
.ipt_input select {
    width: 100%;
    height: 46px;
    padding: 12px 40px 12px 16px;
    border-radius: 8px;
    border: 1px solid #E3E6EA;
    background-image: url('/images/icon/arrow/arrow_down_black.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}
.ipt_input input:read-only {
    background-color: #F3F4F6;
    border-color: #E7E9EC;
}
.ipt_input.search input {
    background-image: url('/images/icon/icon/default/ico_search.svg');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px;
}
.ipt_input.search.left input {
    padding-left: 40px;
    background-position: left 14px center;
}
.drag_menu {
    padding-left: 40px;
    background-image: url('/images/icon/icon/default/ico_menu.svg');
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 16px;
}
.ipt_input textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #E3E6EA;
    resize: vertical;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
}
.ipt_input.timer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.timer_wrap {
    position: relative;
    width: 100%;
}
.timer_wrap .time {
    position: absolute;
    bottom: 13px;
    right: 10px;
    color: #FF4242;
}
.timer button {
    width: 140px;
    justify-content: center;
}
.ipt_file_box {
    margin-top: 20px;
}
.ipt_file_box span {
    display: block;
    margin-top: 10px;
}
.ipt_add_file {
    position: relative;
    margin-top: 10px;
}
.ipt_input input[type="file"] {
    height: auto;
    padding: 12px 16px;
    background-color: #FFF;
}
.ipt_input input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 5px 8px;
    color: #39424E;
    font-size: 13px;
    font-family: 'Pretendard', sans-serif;
    background: #fff;
    border: 1px solid #D1D6DD;
    border-radius: 4px;
    cursor: pointer;
}
.ipt_add_file > .del_file {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    background-size: 12px;
    background-color: #E7E9EC;
    background-image: url('/images/icon/icon/default/ico_close.svg');
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
}

/* ipt_check_lg.svg 9 6 */
/* ipt_check.svg 7 5 */
.ipt_chk {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    word-break: keep-all;
}
.ipt_chk input {
    display: none;
}
.ipt_chk span {
    display: block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 2px solid #D1D6DD;
    border-radius: 4px;
    background: #FFF;
}
.ipt_chk p {
    margin: 0 !important;
    font-size: 13px;
    line-height: 16px;
    color: #14171C;
}
.ipt_chk.large p {
    line-height: 20px;
}
.ipt_chk input:checked + span {
    border-color: #0099B0;
    background-color: #0099B0;
    background-image: url('/images/icon/icon/ipt_chk.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 6px;
}
.ipt_chk.large span {
    width: 20px;
    height: 20px;
    min-width: 20px;
}
.ipt_chk.large input:checked + span {
    background-size: 12px 8px;
}
.ipt_chk.round span {
    border-radius: 10px;
}
.ipt_radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    word-break: keep-all;
}
.ipt_radio input {
    display: none;
}
.ipt_radio span {
    position: relative;
    display: block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 2px solid #D1D6DD;
    border-radius: 12px;
    background: #FFF;
}
.ipt_radio p {
    margin: 0 !important;
    font-size: 14px;
    line-height: 16px;
    color: #14171C;
}
.ipt_radio input:checked + span {
    border-width: 5px;
    border-color: #0099B0;
}
.ipt_radio.large span {
    width: 20px;
    height: 20px;
    min-width: 20px;
}
.ipt_radio.large input:checked + span {
    border-width: 6px;
}
.ipt_radio.large p {
    line-height: 20px;
}

/* switch */
.ipt_switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.ipt_switch input[type="checkbox"] {
    margin: 0;
    appearance: none;
    position: relative;
    width: 38px;
    height: 24px;
    cursor: pointer;
    border: 3px solid #E3E6EA;
    border-radius: 12px;
    background-color: #E3E6EA;
}
.ipt_switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FFF;
    transition: left 250ms linear;
    transform: translateY(-50%);
}
.ipt_switch input[type="checkbox"]:checked {
    background-color: #0099B0;
    border-color: #0099B0;
}

.ipt_switch input[type="checkbox"]:checked::before {
    background-color: white;
    left: 14px;
}
.ipt_switch input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ipt_switch input[type="checkbox"]:focus {
    outline: 0;
}
.ipt_switch input[type="checkbox"]:focus-visible {
}

/* bar, arrow_list */
.bar_list {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bar_list li {
    position: relative;
}
.bar_list li + li {
    padding-left: 8px;
}
.bar_list li + li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 12px;
    background-color: #D1D6DD;
    transform: translateY(-50%);
}
.dot_list {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dot_list li {
    position: relative;
    color: #6B7787;
}
.dot_list li + li {
    padding-left: 8px;
}
.dot_list li + li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #6B7787;
    border-radius: 50%;
    transform: translateY(-50%);
}
.file_list {
}
.file_list ul {
    margin-top: 24px;
}
.file_list ul li + li {
    margin-top: 8px;
}
.file_list ul li a {
    display: flex;
    align-items: center;
    text-decoration: underline;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
}

/* common area */
.common_form_area {
}
.common_cnt_area {
    margin-bottom: 10px;
}
.common_form_btn {
    margin-top: 32px;
}

/* table */
.common_table_area {
}
.table_title_area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.table_title {
}
.reponsive_table {
    overflow-y: auto;
}
.reponsive_table thead th {
    min-width: 100px;
}
.table + .table {
    margin-top: 20px;
}

.tbl_title {
    position: relative;
    display: block;
}
.tbl_title.required:after {
    content: ' *';
    color: #0099B0;
}

.list_table {}
.list_table tr {}
.list_table th {
    padding: 10px 12px;
    color: #6B7787;
    font-weight: 500;
    text-align: left;
    background: #F9F9FA;
    vertical-align: middle;
}
.list_table td {
    padding: 10px 12px;
    color: #14171C;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}
.list_table th,
.list_table td {
    text-align: center;
    border: 1px solid #E3E6EA;
}
.list_table.search th {}
.list_table.search td {
    text-align: left;
}

th.tbl_btn_area,
td.tbl_btn_area {
    min-width: 80px;
    padding-left: 8px;
    padding-right: 8px;
}
th.tbl_btn_area button,
td.tbl_btn_area button {
    margin: 0 auto;
}
.tbl_btn_area.inline {} 
.tbl_btn_area.inline button {
    display: inline-block;
    margin: 0;
}
.list_table a {
    color: #0099B0;
    text-decoration: underline;
}
.tbl_input input,
.tbl_input select,
.tbl_input textarea {
    width: 100%;
    font-size: 13px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    border: none;
}
.tbl_input input {
    width: 100%;
    padding: 4px 4px 4px 4px;
}
.tbl_input select {
    width: 100%;
    padding: 4px 20px 4px 4px;
    background-image: url('/images/icon/arrow/arrow_down_black.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px;
}
.tbl_input.small input,
.tbl_input.small select {
    max-width: 120px;
}
.tbl_input textarea {
    resize: vertical;
}
.view_table {}
.view_table tr {
}
.view_table th,
.view_table td {
    padding: 10px 12px;
    border: 1px solid #E3E6EA;
}
.view_table th {
    vertical-align: middle;
    background-color: #F9F9FA;
}
.view_table td {
}
.view_table tfoot {
    background-color: #F3F4F6;
}

.table_btn_area {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.btn_flex_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* reply */
.reply_area {
    margin-top: 28px;
}
.reply_area textarea {
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    border: none;
    resize: vertical;
}
.reply_area textarea:focus {
    outline: 0;
}

.reply_form {
}
.reply_form h5 {
    margin-bottom: 10px;
}
.reply_form_ipt {
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid #E7E9EC;
    background-color: #FFF;
}

.reply_form_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.reply_form_btn_left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}
.reply_form_btn_right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.reply_form_btn button {
    color: #0099B0;
    font-size: 15px;
    font-weight: 600;
    background: none;
    border: none;
}
.reply_list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
}
.reply_contents {
    margin-top: 24px;
}
.reply_contents_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reply_contents_title_left {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
.reply_contents_title span {
    position: relative;
    display: block;
}
.reply_contents_title span + span {
    padding-left: 8px;
    color: #6B7787;
}
.reply_contents_title span + span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #9BA5B4;
    transform: translateY(-50%);
}
.reply_contents_desc {
    padding: 12px 14px;
    border-radius: 8px;
    background: #F3F4F6;
    word-break: break-all;
}
.reply_contents_desc p {
    font-size: 15px;
    color: #22282F;
}
.reply_contents_desc form {
    margin-top: 8px;
}


/* profile */
.profile_area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.profile_img {
    display: block;
    width: 42px;
    height: 42px;
    background-color: #E7E9EC;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50px;
    border: 1px solid rgba(209, 214, 221, 0.70);
}
.profile_name {
}

/* board */
.common_board_area {}
.board_list {}
.board_list ul {
    border-top: 1px solid #E7E9EC;
}
.board_list ul.top {
    background-color: #f4f4f4;
}
.board_list ul li {
    padding: 0 10px;
}
.board_list ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    padding: 20px 0;
    border-bottom: 1px solid #E7E9EC;
}
.board_list_title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    word-break: break-all;
}
.board_list_title h6 {
    line-height: 26px;
}
.board_list_title .ico_file  {
    line-height: 24px;
}
.board_list_title .no {
    display: block;
    padding: 1px 4px;
    min-width: 25px;
    height: 16px;
    color: #FFF;
    font-weight: 500;
    font-size: 11px;
    text-align: center;
    line-height: 16px;
    border-radius: 6px;
    background-color: #5b5b5b;
}
.board_list_title .ico_new {
    line-height: 26px;
}
.board_list_desc {
    display: flex;
    align-items: center;
    gap: 12px;
}
.board_list_desc span {
    display: block;
    color: #6B7787;
}

.board_view_area {
}
.board_view_title {
    margin-bottom: 28px;
    word-break: break-all;
}
.board_view_title span {
    display: block;
    margin-bottom: 8px;
}
.board_view_title h2 {
    margin-top: 8px;
}
.board_view_profile {
    margin-top: 20px;
}
.board_view_contents {
    padding-bottom: 28px;
    border-bottom: 1px solid #E7E9EC;
    word-break: break-all;
}
.board_view_btn {
    margin-top: 20px;
}
.board_view_btn ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.board_view_btn li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* paging */
.paging {
    margin-top: 20px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pagination a {
    display: block;
    width: 30px;
    height: 30px;
    padding: 6px;
    font-size: 15px;
    text-align: center;
    border-radius: 50%;
}
.pagination .active a {
    color: #0099B0;
    background-color: #F3F4F6;

}
.first a {
    font-size: 0;
    background-image: url('/images/icon/arrow/arrow_left_black_double.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
.prev a {
    font-size: 0;
    background-image: url('/images/icon/arrow/arrow_left_black.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
.next a {
    font-size: 0;
    background-image: url('/images/icon/arrow/arrow_right_black.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
.last a {
    font-size: 0;
    background-image: url('/images/icon/arrow/arrow_right_black_double.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
/* TEST 05 유지보수 공간: 패스키 화면 숨김 */
#pkBox,#pkArea,.pk_login,.pk_area,.pk_nudge,[id*="passkey"],[class*="passkey"]{display:none!important}