@charset "utf-8";


/* ============================================================
    파일정의 : reset.css
============================================================ */

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, 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, input, select, button, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'HyundaiSans', sans-serif;
    font-weight: 300;
    vertical-align: baseline;
    letter-spacing: -.5px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
a {
    color: #333;
    text-decoration: none;
}
ol, ul, dl, dt, dd, li {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table caption {
    position: absolute;
    top: -9999px;
    left: -9999px;
}


.hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* HyundaiSansTextOffice 웹폰트 */
@font-face {
    font-family: 'HyundaiSans';
    src: url('/css/fonts/SpoqaHanSansNeo-Thin-c9026604bd1a4fea44be2b5f71290b36.woff2') format('woff2'),
    url('/css/fonts/SpoqaHanSansNeo-Thin-7fdc09f6de82c11d66c573cfdfe794f6.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'HyundaiSans';
    src: url('/css/fonts/SpoqaHanSansNeo-Light-de87dfe939de7a3a1f7564bdc95b9f9e.woff2') format('woff2'),
    url('/css/fonts/SpoqaHanSansNeo-Light-de87dfe939de7a3a1f7564bdc95b9f9e.woff2') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'HyundaiSans';
    src: url('/css/fonts/SpoqaHanSansNeo-Regular-6f876d098a687c3ac9c6871fe473b3f1.woff2') format('woff2'),
    url('/css/fonts/SpoqaHanSansNeo-Regular-17458b7840c51e9c8a8646c495049cbb.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'HyundaiSans';
    src: url('/css/fonts/SpoqaHanSansNeo-Medium-9d46d938dff0062eddc760e606b2a020.woff2') format('woff2'),
    url('/css/fonts/SpoqaHanSansNeo-Medium-f4d5d7240069d0dd291579991883da22.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'HyundaiSans';
    src: url('/css/fonts/SpoqaHanSansNeo-Bold-d57ff6f22085316b0326e4396df975d3.woff2') format('woff2'),
    url('./fonts/SSpoqaHanSansNeo-Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}





/* ============================================================
    파일정의 : common.css
============================================================ */

/* 정렬 */
.agn_c{text-align: center !important;}
.agn_l{text-align: left !important;}
.agn_r{text-align: right !important;}

/* 마진 */
.mtp0{margin-top:0 !important}
.mtp50{margin-top: 50px !important;}
.ml0{margin-left: 0 !important;}
.ml10{margin-left: 10px !important;}
.ml20{margin-left: 20px !important;}
.ml30{margin-left: 30px !important;}
.mt0{margin-top: 0 !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}

/* 텍스트 */
.txt_danger {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 300;
    color: #D72B20;
}
.etc_txt {
    margin-top: 20px;
    font-size: 13px;
}
.etc_txt + .pop_search_box {
    margin-top: 10px;
}
.tbl_txt {
    font-size: 11px;
    margin-top: 2px;
}
.tbl_txt.red {
    color: #d72b20;
}

/* 테이블 border */
.br {border-right: 1px solid #d4d4d4 !important;}

/* 제목 */
.tit_box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.tit_box h2 {
    font-weight: 500;
    font-size: 20px;
    color: #333;
}
.tit_box h2 + span {
    font-size: 13px;
    color: #949494;
}
.tit_box h2 + span strong {
    font-weight: 400;
}
.tit_box h3 {
    font-weight: 500;
    font-size: 20px;
    color: #333;
}
.tit_box h4 {
    font-weight: 400;
}
.tit_box h4 + span {
    font-size: 13px;
    color: #949494;
}
.tit_box h4 + span strong {
    font-weight: 400;
}
.tit_box h5 + span {
    font-size: 11px;
    color: #949494;
}
.tit_box h5 + span strong {
    font-weight: 400;
}
.tit_box.h_btn {
    justify-content: space-between;
    margin-bottom: 20px;
}
.tit_box.h_btn .left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tit_box.h_btn .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.layout .tit_box.h_btn {
    margin-top: 20px;
}

/* 버튼 */
.btn_box_group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.btn_box_group.right {
    justify-content: flex-end;
}
.btn_box_group.center {
    justify-content: center;
}
.btn_box_group.between {
    justify-content: space-between;
}
.btn_box_group.between .right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn_box > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 9px 20px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer;
    transition: .2s;
}
.btn_gray {
    background-color: #ddd !important;
    color: #949494 !important;
}
.btn_gray:hover {
    background-color: rgb(196, 196, 196) !important;
    color: #333 !important;
}
.btn_red {
    background-color: #ff0000 !important;
    color: white !important;
}
.btn_red:hover {
    background-color: rgb(131, 5, 5) !important;
    color: white !important;
}
.btn_black {
    background-color: #333 !important;
    color: #fff !important;
}
.btn_black:hover {
    background-color: #000 !important;
}
.btn_main {
    background-color: #ED7423 !important;
    color: #fff !important;
}
.btn_main:hover {
    background-color: #7e3403 !important;
}
.btn_grayline {
    background-color: #fff !important;
    border: 1px solid #d4d4d4 !important;
    color: #949494 !important;
}
.btn_grayline:hover {
    border-color: #333 !important;
}
.btn_b_grayline {
    background-color: #f1f1f1 !important;
    border: 1px solid #d4d4d4 !important;
    color: #949494 !important;
}
.btn_b_grayline:hover {
    border-color: #333 !important;
}
.btn_blue {
    background-color: #0F2D76 !important;
    color: #fff !important;
}
.btn_blue:hover {
    background-color: #091b47 !important;
}
.tbl_btn {
    display: block;
    padding: 3px 7px;
    border-radius: 5px;
    background-color: #ddd;
    text-align: center;
    font-weight: 300 !important;
    font-size: 12px !important;
}
.btn_search {
    min-width: 35px;
    background: #0F2D76 url(/images/ico/ico_search-257b2d23283143a5786780c345eaeec6.svg) no-repeat center;
    text-indent: -9999px;
}
.btn_search:hover {
    background-color: #091b47 !important;
}
.btn_widget,
.btn_refresh {
    background-color: #fff !important;
    border: 1px solid #d4d4d4 !important;
    color: #949494 !important;
}
.btn_widget:hover,
.btn_refresh:hover {
    border-color: #333 !important;
}
.btn_widget::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(/images/ico/ico_widget-1e5584e31124a3acee41790a79e0ccda.svg) no-repeat left center;
    background-size: auto 17px;
}
.btn_refresh::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(/images/ico/ico_refresh-af7dd39ebc527264c1e3ee54825b4f25.svg) no-repeat left center;
    background-size: auto 16px;
}
.btn_more {
    padding: 5px 15px;
    min-width: 0;
    background-color: #f5f5f5;
    border-radius: 20px;
    font-size: 11px !important;
    color: #949494;
}
.btn_more:hover {
    background-color: rgb(196, 196, 196);
    color: #fff;
}

/* form 폼 */
.form_box_group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
}
.form_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.form_box > * {
    display: flex;
    width: 100%;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 13px;
    font-weight: 300;
    color: #333;
}
.form_box input::placeholder {
    font-weight: 200;
    color: #d4d4d4;
}
.form_box select {
    -webkit-appearance: none; /* 크롬 화살표 없애기 */
    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
    appearance: none; /* 화살표 없애기 */
    background: #fff url(/images/ico/ico_select-77979c19b1f00aaae40bfdd65af59293.svg) no-repeat calc(100% - 15px) center;
    padding-right: 30px;
}
.form_box > input:read-only {
    background-color: #eee;
    font-size: 13px;
    font-weight: 300;
    /*color: #ada3a3;*/
}
.form_box > textarea:read-only {
    background-color: #eee;
    font-size: 13px;
    font-weight: 300;
    /*color: #ada3a3;*/
}
.form_box > *:disabled {
    background-color: #d1d1d1;
    font-size: 13px;
    font-weight: 300;
}
.form_box_group .error {
    border: 1px solid rgb(206, 58, 58);
}
.form_box_group .error_txt {
    display: flex;
    width: 100%;
    padding-left: 17px;
    background: url(/images/ico/ico_danger-295f7202fa80a684945641ad7f51068e.svg) no-repeat left center;
    background-size: auto 12px;
    font-size: 13px;
    color: rgb(206, 58, 58);
}
.form_box .txt {
    width: auto;
    border: none;
    padding: 0;
    box-sizing: border-box;
    background-color: transparent;
    margin-left: 5px;
    margin-top: 5px;
}
.form_box textarea {
    resize: none;
}
.form_box > .datepicker {
    display: none;
    width: auto;
    border: none;
    border-radius: 5px;
    padding: 0;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 13px;
    font-weight: 300;
    color: #333;
}
.form_box > .datepicker.active {
    display: block;
}
.date_range {
    width: 100%;
    /* min-width: 260px; */
    max-width: 350px;
    height: 40px;
    padding: 0;
}
.date_range input,
.date input {
    padding-right: 36px;
    box-sizing: border-box;
    background: #fff url(/images/ico/ico_datepicker-46481698b781b81122c942ccf4e62e90.svg) no-repeat calc(100% - 10px) center;
    background-size: 19px auto;
}
.date_range input {
    display: block;
    width: calc(50% - 9px);
    height: 100%;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
}
.date_range > span {
    display: flex;
    align-items: center;
    padding: 0 5px;
}
.form_box > .btn_box {
    width: auto;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    margin-left: 5px;
}
.form_box_group.tel .form_box {
    width: calc(33.33% - 18px);
}
.form_box_group.tel2 .form_box:nth-child(1) {
    width: 100px;
}
.form_box_group.tel2 .form_box:nth-child(2) {
    width: calc(100% - 110px);
}
.form_box_group.file_group {
    position: relative;
}
.form_box.file_box {
    position: relative;
    width: 100%;
}
.form_box.file_box input[type="file"] {
    position: absolute;
    left: -9999px;
}
.form_box.file_box input[type="text"] {
    padding-right: 128px !important;
}
.form_box.file_box label {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: auto;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    color: #949494;
    transition: .2s;
}
.form_box.file_box label:hover {
    border-color: #333;
    z-index: 1;
}
.form_box_group.file_group .btn_box {
    position: absolute;
    top: 50%;
    right: 55px;
    transform: translateY(-50%);
}
.form_box_group.file_group .btn_box > * {
    padding: 5px 10px;
    min-width: 0;
    border-radius: 5px 0 0 5px;
}
.file_group.type_2 .form_box.file_box {
    gap: 5px;
}
.file_group.type_2 .form_box.file_box input[type="text"] {
    width: calc(100% - 100px);
    padding-right: 10px !important;
}
.file_group.type_2 .form_box.file_box label {
    display: flex;
    justify-content: center;
    align-items: center;
    position: inherit;
    top: inherit;
    right: inherit;
    transform: translate(0);
    min-width: 95px;
    border-radius: 5px;
    padding: 9px 20px;
    font-size: 13px;
}
.form_box_group.address {
    align-items: inherit;
}
.form_box_group.address .add_inp_box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: calc(100% - 105px);
}
.form_box_group.address .btn_box {
    height: 85px;
}
.form_box_group.address .btn_box > * {
    height: 100%;
}
.form_box_group.btn_date .btn_box_group {
    gap: 10px;
}
.form_box_group.btn_date .btn_box_group .btn_box > * {
    min-width: 55px;
    padding: 10px;
}
.form_box_group.btn_date .form_box {
    width: calc(100% - 195px);
}
.form_box_group.btn_date.type_2 .form_box {
    width: calc(100% - 260px);
}
.form_box_group.dashboard {
    gap: 10px;
    justify-content: flex-end;
}
.form_box_group.dashboard .btn_box_group {
    gap: 10px;
}
.form_box_group.dashboard .form_box {
    min-width: 200px;
}

.req {
    padding-left: 2px;
    color: rgb(206, 58, 58);
}

/* 셀렉트박스 */
.sel_box {
    position: relative;
    padding: 0;
}
.sel_box > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 300;
    color: #333;
}
.sel_box > button span {
    width: calc(100% - 12px);
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sel_box > button::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: url(/images/ico/ico_select-77979c19b1f00aaae40bfdd65af59293.svg) no-repeat center;
    transition: .2s;
}
.sel_box.on > button::after {
    transform: rotate(180deg);
}
.sel_box .opt_list {
    display: none;
    overflow-y: auto;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    max-height: 125px;
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    box-sizing: border-box;
    z-index: 1;
}
.sel_box.top .opt_list {
    top: inherit;
    bottom: 40px;
}
.sel_box.on .opt_list {
    display: block;
}
.sel_box .opt_list li {
    padding: 5px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sel_box .opt_list li:hover {
    background-color: #f9f9f9;
}
.sel_box.disabled .label {
    background-color: #ddd;
}

/* rdo_box 라디오박스 */
.rdo_box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}
.rdo_box + .rdo_box {
    margin-top: 10px; /* 예비용 */
}
.rdo_box span {
    display: flex;
    position: relative;
    width: 180px;
}
.rdo_box input {
    position: absolute;
    top: 0;
    left: -9999px;
}
.rdo_box input + label {
    display: flex;
    position: relative;
    padding-left: 25px;
    font-size: 13px;
    cursor: pointer;
}
.rdo_box input:focus + label::before {
    outline: 1px solid #333;
}
.rdo_box input + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #bfbfbf;
    background-color: #fff;
    box-sizing: border-box;
    transition: .3s;
}
.rdo_box input + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #0F2D76;
    transition: .2s;
    transform: scale(0);
}
.rdo_box input:checked + label::before {
    border-color: #0F2D76;
}
.rdo_box input:checked + label::after {
    transform: scale(1);
}
.rdo_box input:disabled + label::before {
    border-color: #bfbfbf;
    background-color: #eee;
}
.rdo_box input.checked + label::before {
    background-color: #eee;
}
.rdo_box input.checked + label::after {
    background-color: #bfbfbf;
    transform: scale(1);
}
.rdo_box.solo {
    justify-content: center;
}
.rdo_box.solo span {
    width: auto;
    min-height: 19px;
    min-width: 0;
}
.rdo_box.solo input + label {
    padding-left: 19px;
}
.rdo_box.type_2 {
    gap: 25px;
    flex-wrap: wrap;
}
.rdo_box.type_2 span {
    width: auto;
}

/* chk_box 체크박스 */
.chk_box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}
.chk_box + .chk_box {
    margin-top: 10px; /* 예비용 */
}
.chk_box span {
    display: flex;
    position: relative;
    min-width: 120px;
}
.chk_box input {
    position: absolute;
    top: 0;
    left: -9999px;
}
.chk_box input ~ label {
    display: flex;
    position: relative;
    padding-left: 25px;
    font-size: 13px;
    cursor: pointer;
}
.chk_box input:focus ~ label::before {
    outline: 1px solid #333;
}
.chk_box input ~ label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: #fff;
    transition: .2s;
}
.chk_box input ~ label::after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: 1px solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: .2s;
}
.chk_box input:checked ~ label::before {
    border-color: #0F2D76;
    background-color: #0F2D76;
}
.chk_box input:checked ~ label::after {
    transform: rotate(45deg) scale(1);
}
.chk_box input.checked ~ label::before {
    background-color: #f5f5f5;
}
.chk_box input:disabled ~ label::before {
    background-color: #eee;
}
.chk_box input.checked ~ label::after {
    border-color: #bdbdbd;
    transform: rotate(45deg) scale(1);
}
.chk_box.solo {
    justify-content: center;
}
.chk_box.solo span {
    width: auto;
    min-height: 19px;
    min-width: 0;
}
.chk_box.solo input + label {
    padding-left: 19px;
}
.chk_box.solo.left {
    justify-content: flex-start;
}

/* 검색박스 */
.search_box {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 18px 25px;
    border-radius: 10px;
    gap: 5px;
    margin: 10px 0 40px;
}
.search_box > div {
    display: flex;
    gap: 5px 20px;
    flex-wrap: wrap;
}
.search_box > div dl {
    display: flex;
    align-items: center;
}
.search_box > div.type_1 dl {
    width: 100%;
}
.search_box > div.type_2 dl {
    width: calc(50% - 10px);
    min-width: 255px;
}
.search_box > div.type_3 dl {
    width: calc(33.33% - 13.3px);
    min-width: 255px;
}
.search_box > div.type_4 dl {
    width: calc(25% - 15px);
    min-width: 255px;
}
.search_box > div.type_4 dl.colspan2 {
    width: calc(50% - 10px);
    min-width: calc(255px * 2);
}
.search_box > div.type_4 dl.colspan3 {
    width: calc(75% - 5px);
    min-width: calc(255px * 3);
}
.search_box > div dl dt {
    width: 90px;
}
.search_box > div dl dd {
    width: calc(100% - 90px);
}
.search_box > div dl dt label {
    font-size: 13px;
    font-weight: 300;
    color: #949494;
}
/* pop 검색박스 */
.pop_search_box {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 18px 25px;
    border-radius: 10px;
    gap: 5px;
    margin: 20px 0 20px;
}
.pop_search_box.in {
    padding: 0;
    margin: 0;
}
.pop_search_box > div {
    display: flex;
    gap: 5px 20px;
    flex-wrap: wrap;
}
.pop_search_box > div dl {
    display: flex;
    align-items: center;
}
.pop_search_box > div.type_1 dl {
    width: 100%;
}
.pop_search_box > div.type_2 dl {
    width: calc(50% - 10px);
    min-width: 255px;
}
.pop_search_box > div.type_3 dl {
    width: calc(33.33% - 13.3px);
    min-width: 255px;
}
.pop_search_box > div.type_4 dl {
    width: calc(25% - 15px);
    min-width: 255px;
}
.pop_content .pop_search_box > div dl {
    min-width: 222px;
}
.pop_content .layout .pop_search_box > div dl {
    min-width: 210px;
}
.pop_search_box > div dl dt {
    width: 90px;
    padding-right: 5px;
    box-sizing: border-box;
}
.pop_search_box > div dl dd {
    width: calc(100% - 89px);
    font-size: 14px;
    color: #333;
}
.pop_search_box.long > div dl dt {
    width: 120px;
}
.pop_search_box.long > div dl dd {
    width: calc(100% - 120px);
}
.pop_search_box > div dl dt label {
    font-size: 13px;
    font-weight: 300;
    color: #949494;
}
.pop_search_box > div.type_4 dl.colspan2 {
    width: calc(50% - 10px);
    min-width: calc(255px * 2);
}
.pop_search_box > div.type_4 dl.colspan3 {
    width: calc(75% - 5px);
    min-width: calc(255px * 3);
}

.layout .search_box {
    padding: 0;
    margin: 0;
    gap: 3px;
}
.layout .search_box > div dl {
    flex-direction: column;
    align-items: flex-start;
}
.layout .search_box > div dl {
    width: auto;
    min-width: 160px;
}
.layout .search_box > div dl dd {
    width: 100%;
}
.layout .search_box > div dl dd .sel_box > button,
.layout .search_box > div dl dd .form_box > * {
    padding: 5px 10px;
}
.layout .search_box > div dl dd .sel_box {
    padding: 0;
}
.layout .search_box > div dl dd .sel_box .opt_list {
    top: 30px;
}
.tbl_group .btn_box_group.search_add {
    align-items: inherit;
}
.tbl_group .btn_box_group.search_add .right .btn_box {
    height: 100%;
}
.tbl_group .btn_box_group.search_add .right .btn_box > * {
    height: 100%;
}
.layout .search_box > div.type_1 dl {
    width: 100%;
}
.layout .search_box > div dl dt {
    line-height: 13px;
    margin-bottom: 2px;
}
/* 테이블 안 검색박스 */
.tbl_box .search_box {
    padding: 0;
    margin: 0;
}

/* total */
.tbl_group .btn_box_group {
    padding: 13px 25px;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
.btn_box_group .total {
    display: flex;
    font-size: 14px;
    color: #949494
}
.btn_box_group .total > * {
    margin: 0 2px 0 5px;
    font-size: 14px;
    font-weight: 500;
    color: #0F2D76;
}
.tbl_group .paging_box {
    padding: 19px 25px;
    border-radius: 0 0 10px 10px;
    background-color: #fff;
}
.pop_box .tbl_group .paging_box {
    border-top: 1px solid #d4d4d4;
}

/* 페이지네이션 */
.paging_box ul {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.paging_box ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: 300;
    font-size: 12px;
    color: #949494;
    transition: .2s;
}
.paging_box ul li a:hover,
.paging_box ul li a:focus,
.paging_box ul li.on a {
    background-color: #0F2D76;
    color: #fff;
}
.paging_box ul li.prev_all a,
.paging_box ul li.prev a,
.paging_box ul li.next a,
.paging_box ul li.next_all a {
    min-width: 25px;
    padding: 0;
    background: no-repeat center;
    background-size: auto 9px;
    border: none;
}
.paging_box ul li.prev_all:hover a,
.paging_box ul li.prev:hover a,
.paging_box ul li.next:hover a,
.paging_box ul li.next_all:hover a {
    background-color: #0F2D76;
}

.paging_box ul li.prev_all a {background-image: url(/images/ico/ico_prev_off-7e01d7c541cce53a9d583abdf2277ecd.svg);}
.paging_box ul li.prev a {background-image: url(/images/ico/ico_prev_all_off-116607830edf08399a3e924f74ea97d3.svg);}
.paging_box ul li.next a {background-image: url(/images/ico/ico_next_off-fe4d06f46eba681451aa1b6d0b4c6238.svg);}
.paging_box ul li.next_all a {background-image: url(/images/ico/ico_next_all_off-023e823d6e55f905d76d88fb0608b744.svg);}

.paging_box ul li.prev_all:hover a {background-image: url(/images/ico/ico_prev_on-d6b12367f211cdee631b0da224a0a56a.svg);}
.paging_box ul li.prev:hover a {background-image: url(/images/ico/ico_prev_all_on-ff2b56fa8d1836a36b01ede4ab57dcb0.svg);}
.paging_box ul li.next:hover a {background-image: url(/images/ico/ico_next_on-6a6b83fefacd6a3f2175410bb4a10b35.svg);}
.paging_box ul li.next_all:hover a {background-image: url(/images/ico/ico_next_all_on-e8963772237693b81fc4af34c87d99f8.svg);}

/* 테이블 */
.tbl_box {}
.tbl_box table {
    width: 100%;
}
.tbl_box table th {
    padding: 15px 0;
    background-color: #f0f0f0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: #949494;
}
.tbl_box table th:last-child {
    border-right: none;
}
.tbl_box table tbody td {
    /*padding: 15px 10px;*/
    /*background-color: #fff;*/
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    word-break: break-all;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    /*color: #333;*/
}
.tbl_box table tbody td:last-child {
    border-right: none;
}
.tbl_box table tbody td a {
    font-size: 13px;
    font-weight: 300;
    color: #333;
}
.tbl_box table tbody td a:hover {
    color: #000;
    text-decoration: underline;
}

.detail_box {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
}
.detail_box .tbl_box {
    border-top: 1px solid #333;
}
.detail_box .tbl_box tr:first-child th {
    border-top: 0;
}
.detail_box .tbl_box td {
    padding: 5px 10px;
    text-align: left;
}

/* chklist */
.chklist_box {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 18px 25px;
    border-radius: 10px;
    margin: 20px 0 20px;
}
.chklist_box dl {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
}
.chklist_box dl:last-child {
    border: none;
}
.chklist_box dl dt {
    display: flex;
    position: relative;
    padding-left: 20px;
    padding: 10px 0 10px 20px;
    font-size: 14px;
    font-weight: 500;
}
.chklist_box dl dt::before {
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: 1px solid #333;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.chklist_box dl dd {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    box-sizing: border-box;
    gap: 10px 0;
}
.chklist_box dl dd.type_2 {
    justify-content: space-between;
}
.chklist_item {
    display: flex;
    width: 100%;
}
.type_2 .chklist_item {
    width: calc(50% - 20px);
}
.chklist_item .tit {
    width: calc(100% - 110px);
    font-size: 13px;
}
/* 20220508 수정 */
.type_1 .chklist_item .tit {
    width: calc(100% - 225px);
    padding-right: 15px;
    box-sizing: border-box;
}
.chklist_item .tit .txt_danger {
    justify-content: flex-start;
}
.chklist_item .rdo_box {
    gap: 0 20px;
}
/* 20220508 수정 */
.chklist_item .rdo_box span {
    width: auto;
    align-items: center;
}
.type_1 .chklist_item .form_box input {
    width: 200px;
}
.type_3 .chklist_item {
    flex-wrap: wrap;
}
.type_3 .chklist_item .form_box {
    width: 100%;
    margin-top: 5px;
}

/* datepicker */
.datepicker {
    display: none;
}
.datepicker.active {
    display: block;
}
.datepicker-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    padding-top: 4px;
}
.datepicker-dropdown.datepicker-orient-top {
    padding-top: 0;
    padding-bottom: 4px;
}
.datepicker-picker {
    display: inline-block;
    border-radius: 4px;
    background-color: white;
}
.datepicker-dropdown .datepicker-picker {
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}
.datepicker-picker span {
    display: block;
    flex: 1;
    border: 0;
    border-radius: 4px;
    cursor: default;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.datepicker-main {
    padding: 10px;
}
.datepicker-footer {
    box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
    background-color: whitesmoke;
}
.datepicker-grid,
.datepicker-view .days-of-week,
.datepicker-view,
.datepicker-controls {
    display: flex;
}
.datepicker-grid {
    flex-wrap: wrap;
}
.datepicker-view .days .datepicker-cell,
.datepicker-view .dow {
    flex-basis: 14.2857142857%;
}
.datepicker-view.datepicker-grid .datepicker-cell {
    flex-basis: 25%;
}
.datepicker-cell,
.datepicker-view .week {
    height: 2.25rem;
    line-height: 2.25rem;
}
.datepicker-title {
    box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
    background-color: whitesmoke;
    padding: 0.375rem 0.75rem;
    text-align: center;
    font-weight: 700;
}
.datepicker-header .datepicker-controls {
    padding: 10px 10px 0;
}
.datepicker-controls .button {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: none;
    background-color: white;
    cursor: pointer;
    padding: calc(0.375em - 1px) 0.75em;
    height: 2.25em;
    vertical-align: top;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    color: #333;
    font-size: 1rem;
}
.datepicker-controls .button:focus,
.datepicker-controls .button:active {
    outline: none;
}
.datepicker-controls .button:hover {
    border-color: #b5b5b5;
    color: #333;
}
.datepicker-controls .button:focus {
    border-color: #0F2D76;
    color: #333;
}
.datepicker-controls .button:focus:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.datepicker-controls .button:active {
    border-color: #4a4a4a;
    color: #333;
}
.datepicker-controls .button[disabled] {
    cursor: not-allowed;
}
.datepicker-header .datepicker-controls .button {
    border-color: transparent;
    font-weight: bold;
}
.datepicker-header .datepicker-controls .button:hover {
    background-color: #f9f9f9;
}
.datepicker-header .datepicker-controls .button:focus:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}
.datepicker-header .datepicker-controls .button:active {
    background-color: #f2f2f2;
}
.datepicker-header .datepicker-controls .button[disabled] {
    box-shadow: none;
}
.datepicker-footer .datepicker-controls .button {
    margin: calc(0.375rem - 1px) 0.375rem;
    border-radius: 2px;
    width: 100%;
    font-size: 0.75rem;
}
.datepicker-controls .view-switch {
    flex: auto;
}
.datepicker-controls .prev-btn,
.datepicker-controls .next-btn {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    width: 2.25rem;
}
.datepicker-controls .prev-btn.disabled,
.datepicker-controls .next-btn.disabled {
    visibility: hidden;
}
.datepicker-view .dow {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.875rem;
    font-weight: 400;
}
.datepicker-view .week {
    width: 2.25rem;
    color: #b5b5b5;
    font-size: 0.75rem;
}
@media (max-width: 22.5rem) {
    .datepicker-view .week {
        width: 1.96875rem;
    }
}
.datepicker-grid {
    width: 15.75rem;
}
@media (max-width: 22.5rem) {
    .calendar-weeks + .days .datepicker-grid {
        width: 13.78125rem;
    }
}
.datepicker-cell:not(.disabled):hover {
    background-color: #f9f9f9;
    cursor: pointer;
}
.datepicker-cell.focused:not(.selected) {
    background-color: #e8e8e8;
}
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background-color: #0F2D76;
    color: #fff;
    font-weight: 600;
}
.datepicker-cell.disabled {
    color: #dbdbdb;
}
.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
    color: #ddd;
}
.datepicker-cell.prev.selected,
.datepicker-cell.next.selected {
    color: #e6e6e6;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
    border-radius: 0;
    background-color: whitesmoke;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
    background-color: #eeeeee;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
    background-color: #e8e8e8;
}
.datepicker-cell.today:not(.selected) {
    background-color: #00d1b2;
}
.datepicker-cell.today:not(.selected):not(.disabled) {
    color: #fff;
}
.datepicker-cell.today.focused:not(.selected) {
    background-color: #00c4a7;
}
.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
    background-color: #b5b5b5;
    color: #fff;
}
.datepicker-cell.range-end.focused:not(.selected),
.datepicker-cell.range-start.focused:not(.selected) {
    background-color: #afafaf;
}
.datepicker-cell.range-start {
    border-radius: 4px 0 0 4px;
}
.datepicker-cell.range-end {
    border-radius: 0 4px 4px 0;
}
.datepicker-cell.range {
    border-radius: 0;
    background-color: #dbdbdb;
}
.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
    background-color: #d5d5d5;
}
.datepicker-cell.range.disabled {
    color: #c2c2c2;
}
.datepicker-cell.range.focused {
    background-color: #cfcfcf;
}
.datepicker-view.datepicker-grid .datepicker-cell {
    height: 4.5rem;
    line-height: 4.5rem;
}
.datepicker-input.in-edit {
    border-color: #2366d1;
}
.datepicker-input.in-edit:focus,
.datepicker-input.in-edit:active {
    box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
}




/* ============================================================
    파일정의 : style.css
============================================================ */

/* layout */
.layout {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
}
.layout.nogap {
    gap: 0;
}
.layout.dashboard {
    gap: 20px;
}
.pop_content .layout {
    gap: 10px;
}
.pop_content .layout.gap50 {
    gap: 50px;
}
.l20 {width: calc(20% - 25px);}
.l30 {width: calc(30% - 25px);}
.l40 {width: calc(40% - 25px);}
.l50 {width: calc(50% - 25px) !important;}
.l60 {width: calc(60% - 25px);}
.l70 {width: calc(70% - 25px);}
.l80 {width: calc(80% - 25px);}
.pop_content .l20 {width: calc(20% - 5px);}
.pop_content .l23 {width: calc(23% - 5px);}
.pop_content .l25 {width: calc(25% - 5px);}
.pop_content .l30 {width: calc(30% - 5px);}
.pop_content .l40 {width: calc(40% - 5px);}
.pop_content .l50 {width: calc(50% - 5px);}
.pop_content .l60 {width: calc(60% - 5px);}
.pop_content .l70 {width: calc(70% - 5px);}
.pop_content .l75 {width: calc(75% - 5px);}
.pop_content .l77 {width: calc(77% - 5px);}
.pop_content .l80 {width: calc(80% - 5px);}
.gap50 .l30 {width: calc(30% - 25px);}
.gap50 .l40 {width: calc(40% - 25px);}
.gap50 .l50 {width: calc(50% - 25px);}
.gap50 .l60 {width: calc(60% - 25px);}
.gap50 .l70 {width: calc(70% - 25px);}
.layout.nogap .l30 {width: 30%;}
.layout.nogap .l40 {width: 40%;}
.layout.nogap .l50 {width: 50%;}
.layout.nogap .l60 {width: 60%;}
.layout.nogap .l70 {width: 70%;}
.layout.dashboard .l30 {width: calc(30% - 10px);}
.layout.dashboard .l40 {width: calc(40% - 10px);}
.layout.dashboard .l50 {width: calc(50% - 10px);}
.layout.dashboard .l60 {width: calc(60% - 10px);}
.layout.dashboard .l70 {width: calc(70% - 10px);}

.pop_content .layout .movement_box {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -50%);
    gap: 10px;
}
.pop_content .layout .movement_box button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #f0f0f0;
    cursor: pointer;
}
.pop_content .layout .movement_box button:hover {
    border: 1px solid #333;
}

/* header */
header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: 2px 0 8px 2px rgb(0 0 0 / 16%);
    z-index: 3;
}
header ul {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    width: calc(100% - 260px);
    padding: 0 20px;
    box-sizing: border-box;
}
header ul li {
    display: flex;
    position: relative;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #949494;
}
header ul li:first-child {
    cursor: pointer;
}
header ul li > span {
    display: block;
    width: 20px;
    height: 20px;
    background: #D9D9D9 no-repeat center;
    border-radius: 50%;
}
header ul li > strong {
    color: #333;
}
header ul li span.ico_time {background-image: url(/images/ico/ico_time-eeed5cfe6c18a6f343e62e64b7ff2991.svg);}
header ul li span.ico_user {background-image: url(/images/ico/ico_user-a81d91e1aaf5e2f3b3d60311b2128fa3.svg);}
header ul li .time_box {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 30px;
    right: -8px;
    width: calc(100% + 16px);
    padding: 7px 0;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 0px 8px 2px rgb(0 0 0 / 16%);
}
header ul li:hover .time_box {
    display: flex;
}
header ul li .time_box span {
    letter-spacing: .3px;
    font-size: 11px;
    font-weight: 200;
}
header ul li button {
    display: flex;
    padding: 7px 17px;
    box-sizing: border-box;
    border-radius: 25px;
    background-color: #f5f5f5;
    font-size: 13px;
    color: #949494;
    cursor: pointer;
    transition: .2s;
}
header ul li button:hover {
    background-color: #e8e8e8;
}

/* left menu */
aside {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    width: 225px;
    height: calc(100vh - 60px);
    background-color: #fff;
    transition: .2s;
    z-index: 2;
}
.side_top {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    width: 260px;
    height: 100%;
}
.side_top .logo a {
    display: block;
    width: 102px;
    height: 37px;
    background: url(/images/top_logo-6b54a1b83d74040d922b375e5bfebdcb.png) no-repeat center;
    background-size: 102px 37px;
    text-indent: -9999px;
}
.side_top .logo {
    margin-left: 15px;
}
.side_top .menu_slide_btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 30px;
    background: url(/images/ico/ico_menu_off-0aec611778c94a61f8fd739f4c06d090.svg) no-repeat center;
    background-size: auto 13px;
}

.wrap.on .side_top .menu_slide_btn {
    position: inherit;
    width: 30px;
    height: 30px;
    background-image: url(/images/ico/ico_menu_on-02182ddcf7a5f359943a4cb8b48cd600.svg);
    background-size: auto 13px;
}

/* 메뉴 슬라이드 시 */
.wrap.on aside {
    overflow: inherit;
    width: 70px;
}
.wrap.on aside nav {
    overflow: inherit;
    width: 100%;
}
.wrap.on aside nav > ul > li {
    position: relative;
    padding: 0;
}
.wrap.on aside nav > ul > li > a {
    justify-content: center;
}
.wrap.on aside nav > ul > li > a > strong {
    display: none;
}
.wrap.on aside nav > ul > li.more > a::after {
    right: 10px;
    transform: translateY(-50%) rotate(-45deg);
}
/* 2depth */
.wrap.on aside nav ul ul {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 80px;
    background-color: #fff;
    border-radius: 5px;
    width: 150px;
    height: 0px;
    margin: 0;
}
.wrap.on aside nav ul li.on ul {
    height: auto;
    padding: 5px;
    box-shadow: 2px 0px 8px 2px rgb(0 0 0 / 16%);
}
.wrap.on aside nav ul ul::before {
    display: none;
}
.wrap.on footer {
    display: none;
}

nav {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    width: calc(100% + 18px);
    padding-top: 20px;
    box-sizing: border-box;
}
/* 1deth */
nav > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
nav > ul > li {
    padding: 0 48px 0 23px;
    box-sizing: border-box;
}
nav > ul > li > a {
    display: flex;
    position: relative;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    box-sizing: border-box;
}
nav > ul > li.more > a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border: 1px solid #949494;
    border-width: 0 1px 1px 0;
    transform: translateY(-50%) rotate(45deg);
    transition: .2s;
}
nav > ul > li.more.on > a::after {
    border-color: #ED7423;
    transform: translateY(-19%) rotate(-135deg);
}
nav > ul > li > a > strong {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    transition: .2s;
}
nav > ul > li.on > a strong {
    color: #ED7423;
}
nav > ul > li > a:hover > strong {
    color: #ED7423;
}
nav > ul > li > a > span {
    display: block;
    width: 30px;
    height: 30px;
    background: no-repeat center;
    border-radius: 5px;
    transition: .2s;
}
nav > ul > li:hover > a > span,
nav > ul > li.on > a > span {
    background-color: #ED7423;
}
nav > ul > li > a .ico_dashboard {background-image: url(/images/ico/ico_dashboard_off-2b66f577d6cef96eabc43c9011a55f2d.svg);}
nav > ul > li > a:hover .ico_dashboard {background-image: url(/images/ico/ico_dashboard_on-092fd2290453ce83635d78f41c6f4e13.svg);}
nav > ul > li.on > a .ico_dashboard {background-image: url(/images/ico/ico_dashboard_on-092fd2290453ce83635d78f41c6f4e13.svg);}
nav > ul > li > a .ico_operation {background-image: url(/images/ico/ico_operation_off-2246e050265b94b8fbf4001b63b73889.png);}
nav > ul > li > a:hover .ico_operation {background-image: url(/images/ico/ico_operation_on-83e9e66dcfaa13bc444b9ae747be61ea.png);}
nav > ul > li.on > a .ico_operation {background-image: url(/images/ico/ico_operation_on-83e9e66dcfaa13bc444b9ae747be61ea.png);}
nav > ul > li > a .ico_car {background-image: url(/images/ico/ico_car_off-1ac2491585512879ff6d5a568a25f933.png);}
nav > ul > li > a:hover .ico_car {background-image: url(/images/ico/ico_car_on-9110f301ea48272110ad50786afb9689.png);}
nav > ul > li.on > a .ico_car {background-image: url(/images/ico/ico_car_on-9110f301ea48272110ad50786afb9689.png);}
nav > ul > li > a .ico_contents {background-image: url(/images/ico/ico_contents_off-e45b032a8acbad3a5deec46c9c639872.png);}
nav > ul > li > a:hover .ico_contents {background-image: url(/images/ico/ico_contents_on-c0638bc27828325f225c8e5349022af7.png);}
nav > ul > li.on > a .ico_contents {background-image: url(/images/ico/ico_contents_on-c0638bc27828325f225c8e5349022af7.png);}

nav > ul > li > a .ico_history {background-image: url(/images/ico/ico_activity_history_off-6dcfe84b09692752e5f855dd31e18a50.png);}
nav > ul > li > a:hover .ico_history {background-image: url(/images/ico/ico_activity_history_on-861eee00789319bf7ca634fde9a1eae7.png);}
nav > ul > li.on > a .ico_history {background-image: url(/images/ico/ico_activity_history_on-861eee00789319bf7ca634fde9a1eae7.png);}

nav > ul > li > a .ico_system {background-image: url(/images/ico/ico_system_off-6beeccc9711fb9272f786557b57b0f60.svg);}
nav > ul > li > a:hover .ico_system {background-image: url(/images/ico/ico_system_on-c3e65f0c1c62848b5f20a1110473a095.svg);}
nav > ul > li.on > a .ico_system {background-image: url(/images/ico/ico_system_on-c3e65f0c1c62848b5f20a1110473a095.svg);}

nav > ul > li > a .ico_user {background-image: url(/images/ico/ico_user_off-e6ac29d91adcab50e7b5601130e62430.png);}
nav > ul > li > a:hover .ico_user {background-image: url(/images/ico/ico_user_on-4da6cfd21a01029eae40484c1a6b2d73.png);}
nav > ul > li.on > a .ico_user {background-image: url(/images/ico/ico_user_on-4da6cfd21a01029eae40484c1a6b2d73.png);}

nav > ul > li > a .ico_money {background-image: url(/images/ico/ico_money_off-23a40ad2ad8f328cbaa78ab104fbe888.png);}
nav > ul > li > a:hover .ico_money {background-image: url(/images/ico/ico_money_on-55eccf69dd82d1dd035eb1ea33dbd2dd.png);}
nav > ul > li.on > a .ico_money {background-image: url(/images/ico/ico_money_on-55eccf69dd82d1dd035eb1ea33dbd2dd.png);}



/* 2depth */
nav ul ul {
    display: block;
    overflow: hidden;
    height: 0px;
    position: relative;
    padding: 0 0 0 30px;
    box-sizing: border-box;
    transition: .2s;
}
nav ul li.on ul {
    height: auto;
    margin: 10px 0;
}
nav ul ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 9px;
    width: 1px;
    height: 100%;
    background-color: #ED7423;
}
nav ul ul li + li {
    margin-top: 5px;
}
nav ul ul li a {
    display: flex;
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: 300;
    font-size: 13px;
    color: #333;
}
nav ul ul li:hover a,
nav ul ul li.on a {
    font-weight: 400;
    background-color: #f9f9f9;
    color: #ED7423;
}

footer {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}
footer p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 218px;
    word-break: keep-all;
    text-align: center;
    font-size: 10px;
    letter-spacing: .5px;
    color: #949494;
}
footer p::before {
    content: "";
    display: block;
    width: 131px;
    height: 30px;
    background: url(/images/logo_orange_4-85b49ca7c2b946848c00bb50ff8fb337.png) no-repeat center ;
    background-size: 131px 30px;
}

/* container */
.container {
    box-sizing: border-box;
    padding-left: 225px;
    padding-top: 60px;
    background-color: #F9F9F9;
    transition: .2s;
}
.wrap.on .container {
    padding-left: 70px;
}

/* content */
.container .content {
    padding: 25px 40px;
    box-sizing: border-box;
    min-height: calc(100vh - 60px);
}

/* 팝업 */
.pop_box_group {
    /*display: none;*/
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 98%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 10;
}
@media screen and (max-width: 1140px) {
    .pop_box_group .pop_box {
        min-width: 0;
        width: 100%;
    }
}
.pop_box_group.on {
    display: flex;
}
.pop_box_group .pop_box {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 900px;
    margin: 0px;
    max-width: 1000px;
    /*box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0%);*/
}
.pop_box_group.small .pop_box {
    min-width: 500px;
}
.pop_box_group.big .pop_box {
    min-width: 1350px;
}
@media screen and (max-width: 1500px) {
    .pop_box_group.big .pop_box {
        min-width: calc(100% - 0px);
    }
}
.pop_box_group .pop_box .pop_header .close {
    display: flex;
    position: absolute;
    top: 18px;
    right: 23px;
    border: none;
    padding: 0;
    margin: 0;
}
.pop_box_group .pop_box .pop_header .close button {
    display: flex;
    background: url(/images/ico/ico_close-23bc249d5863d813ad58b1d4b1deb67b.svg) no-repeat center;
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}
.pop_box_group .pop_box .pop_content {
    overflow-y: auto;
    min-height: 180px;
    max-height: calc(100vh - 155px);
    padding: 0 20px;
    box-sizing: border-box;
}
.pop_box_group .common_pop_box {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 400px;
    max-width: 400px;
    box-shadow: 0px 0px 9px 4px rgb(0 0 0 / 17%);
}
.pop_box_group .common_pop_box .pop_header .close {
    display: flex;
    position: absolute;
    top: 22px;
    right: 23px;
    border: none;
    padding: 0;
    margin: 0;
}
.pop_box_group .common_pop_box .pop_header .close button {
    display: flex;
    background: url(/images/ico/ico_close-23bc249d5863d813ad58b1d4b1deb67b.svg) no-repeat center;
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}
.pop_box_group .common_pop_box .pop_header .img {
    display: block;
    width: 100%;
    height: 50px;
    background: no-repeat center;
    background-size: auto 100%;
    margin: 20px 0 20px;
}
.pop_box_group .common_pop_box .pop_header .img.success {background-image: url(/images/ico/ico_success-9b82be6ab174c11d886454710377ea4b.svg);}
.pop_box_group .common_pop_box .pop_header .img.error {background-image: url(/images/ico/ico_error-c7d8f950a3d9cc4d45f182101230e364.svg);}
.pop_box_group .common_pop_box .pop_header .img.confirm {background-image: url(/images/ico/ico_confirm-ea6f37d88756da181deb62ab4bcb0e91.svg);}
.pop_box_group .common_pop_box .pop_content {
    text-align: center;
}
.pop_box_group .common_pop_box .pop_footer {
    margin-top: 20px;
}
.pop_box .tbl_group {
    overflow: hidden;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
}
.pop_box .tbl_box {
    overflow-y: auto;
    max-height: calc(100vh - 470px)
}
.pop_box .tbl_box table tbody td {
    padding: 10px;
}
.pop_box .tbl_box table tbody tr:last-child td {
    border-bottom: 0;
}
.pop_box .tbl_box table thead th {
    border-top: 0;
    padding: 10px;
}
.pop_footer {
    margin-top: 20px;
}

/* 에러페이지 */
.error_box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #F9F9F9;
}
.error_box .img {
    width: 100%;
    height: 110px;
    background: url(/images/ico/ico_error-c7d8f950a3d9cc4d45f182101230e364.svg) no-repeat center;
    background-size: auto 100%;
}
.error_box dl {
    margin: 30px 0 50px;
    text-align: center;
}
.error_box dl dt {
    font-size: 40px;
}
.error_box dl dt span {
    font-weight: 500;
    color: #ED7423;
}
.error_box dl dd {
    width: 70%;
    margin: 30px auto 0;
    word-break: keep-all;
}

/* 로그인 */
.login_box_group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: #f9f9f9;
}
.login_header {
    position: fixed;
    top: 30px;
    left: 30px;
}
.login_header .logo {
    width: 128px;
    height: 46px;
    background: url(/images/logo_orange_4-85b49ca7c2b946848c00bb50ff8fb337.png) no-repeat center;
    background-size: 100% auto;
    text-indent: -9999px;
}
.login_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 530px;
    height: 650px;
    border-radius: 25px;
    background-color: #fff;
    box-shadow: 0px 4px 42px 13px rgba(0, 0, 0, 0.12);
}
.login_box .lang_box {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
}
.login_box .lang_box .sel_box {
    border-radius: 25px;
}
.login_box .lang_box .sel_box > button {
    border-radius: 25px;
    padding: 10px 20px;
}
.login_box .content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login_box .content .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 40px;
}
.login_box .content .logo .img {
    display: flex;
    width: 320px;
    height: 145px;
    background: url(/images/logo_orange_1-9ab3594a50ed93004a8623fd0f5019d4.png) no-repeat center;
}
.login_box .content .logo .txt {
    margin-top: 5px;
    letter-spacing: -1.2px;
    font-weight: 700;
    font-size: 18px;
    color: #002C5F;
}
.login_inp {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;
    width: 320px;
}
.login_inp > div {
    position: relative;
    width: 100%;
}
.login_inp label {
    position: absolute;
    top: 50%;
    left: 10px;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    background: no-repeat center;
    transform: translateY(-50%);
}
.login_inp .inp_id label {background-image: url(/images/ico/ico_id-54bcd69b65014936c2146c7e2d58017b.svg);}
.login_inp .inp_pw label {background-image: url(/images/ico/ico_password-1b27f59a4f95be4862d43fdaa9ccf0d4.svg);}
.login_inp input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    padding: 15px 20px 15px 45px;
    border-bottom: 1px solid #949494;
    transition: .2s;
}
.login_inp input[type="password"]::-ms-reveal,
.login_inp input[type="password"]::-ms-clear {
    display: none;
}
.login_inp input:focus {
    border-radius: 10px;
    border: 1px solid #002C5F;
    box-shadow: 0px 0px 10px 1px rgba(0 44 95);
    outline: none;
}
.login_inp .inp_txt span {
    display: block;
    font-size: 12px;
    color: #CE0000;
}
.inp_pw .ico_eye {
    display: block;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 28px;
    height: 21px;
    border-radius: 4px;
    background: url(/images/ico/ico_pweye-db430ebc4ba03e6d51c5e518c5eaa701.svg) no-repeat center;
    transform: translateY(-50%);
    cursor: pointer;
}
.inp_pw .ico_eye.on {
    background: #002C5F url(/images/ico/ico_pweye_on-4a365418192b1e6b9b58684f4a936ecb.svg) no-repeat center;
}
.form_box.inp_pw {
    position: relative;
}
.form_box.inp_pw .ico_eye {
    border: none;
}
.inp_certification {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inp_certification .result_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: calc(100% - 76px);
}
.inp_certification .result_box label {
    position: absolute;
    left: -9999px;
}
.inp_certification .result_box input {
    padding: 15px 50px 15px 10px;
}
.inp_certification .result_box .time {
    position: absolute;
    top: 50%;
    right: 10px;
    font-size: 13px;
    transform: translateY(-50%);
    color: #CE0000;
}
.inp_certification > button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 51px;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #ddd;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
}
.id_pw_open .inp_id,
.id_pw_open .inp_pw,
.id_pw_open .inp_txt {
    display: block;
}
.id_pw_open .inp_certification {
    display: none;
}
.id_pw_close .inp_id,
.id_pw_close .inp_pw,
.id_pw_close .inp_txt {
    display: none;
}
.id_pw_close .inp_certification {
    display: flex;
}

.login_btn {
    display: flex;
    flex-direction: column;
    width: 320px;
    margin-top: 65px;
    gap: 10px;
}
.login_btn .chk_box input ~ label::before {
    border-radius: 50%;
}
.login_btn > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #ED7423;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .5px;
    color: #fff;
    transition: .2s;
}
.login_btn > a:hover {
    background-color: #7e3403;
}
.login_btn .etc_btn {
    display: flex;
    justify-content: center;
}
.login_btn .etc_btn a {
    font-size: 12px;
    color: #949494;
}
.login_btn .etc_btn a:hover {
    color: #333;
}
.login_footer {
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: .5px;
    font-size: 12px;
    font-weight: 300;
    color: #555;
}

/* 비밀번호 찾기 */
.login_box.sub {
    height: 400px;
}
.login_sub_header {
    margin-bottom: 40px;
}
.login_sub_header h2 {
    font-weight: 500;
}
.login_sub_inp {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;
    width: 320px;
}
.login_sub_inp .btn_box > * {
    width: 100%;
}
.login_sub_inp .txt {
    word-break: keep-all;
    font-size: 13px;
}

/* 충전소 등록/조회 */
.composition_box {
    display: flex;
    gap: 5px;
    width: 100%;
}
.composition_box .count {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 100px;
}
.composition_box .count dl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
    height: calc(100% - 5px);
}
.composition_box .count dl dt {
    text-align: center;
}
.composition_box .count dl dd {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.composition_box .scroll_tbl_chart {
    width: calc(100% - 105px - 100px);
}
.composition_box .scroll_tbl_chart > dl > dt {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
}
.composition_box .scroll_tbl_chart > dl > dd {
    overflow-y: auto;
    height: 200px;
}
.composition_box .btn_box .btn_blue {
    height: 100%;
}
.tbl_search_group {
    display: flex;
    width: 100%;
    gap: 5px;
}
.tbl_search_group + .tbl_search_group {
    margin-top: 5px;
}
.tbl_search_group .search_box {
    width: calc(100% - 50px);
    background-color: transparent;
    padding: 0;
    margin: 0;
}
.pop_search_box > .tbl_search_group {
    gap: 5px;
}
.tbl_search_group .search_box div.type_1 dl {
    flex-direction: row;
    align-items: center;
}
.tbl_search_group .search_box div.type_1 dl dd {
    width: calc(100% - 90px);
}
.tbl_search_group .btn_box {
    width: 45px;
}
.tbl_search_group .btn_box > * {
    height: 100%;
}
.map_group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.map_box {
    height: calc(100% - 215px);
}
.map_box > * {
    width: 100%;
    height: 100%;
}
.pop_box .tbl_box.h450 {
    max-height: 450px;
}
.pop_box .tbl_box.h250 {
    max-height: 250px;
}

/* 대시보드 */
.dashboard_group {
    position: relative;
    padding: 20px 25px 25px 25px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}
.dashboard_group.h100 {
    height: 100%;
}
.layout .dashboard_group .tit_box.h_btn {
    margin-top: 0;
}
.dashboard_group.post_current .tit_box .sel_box {
    min-width: 90px;
    border: 1px solid #d4d4d4;
}
.dashboard_group.post_current .tit_box .sel_box > button {
    padding: 5px 10px;
}
.dashboard_group.post_current .tit_box .sel_box.on .opt_list {
    top: 30px;
    border-radius: 0;
    left: -1px;
    width: calc(100% + 2px);
}
.dashboard_group.post_current .tit_box .sel_box.on .opt_list li {
    font-size: 12px;
}
.post_current_box {
    position: absolute;
    bottom: 20px;
    right: 25px;
    border: 1px solid #d4d4d4;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .7);
}
.post_current_box dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.post_current_box dt {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
}
.post_current_box dd {
    font-size: 12px;
}
.post_current_box dd:before {
    content: "·";
    margin-right: 3px;
}
.registration_count_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 10px;
}
.registration_count_box dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: calc(25% - 10px);
}
.registration_count_box dl::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #ddd;
}
.registration_count_box dl:nth-child(4n)::after {
    display: none;
}
.registration_count_box dl dt {
    text-align: center;
    margin-bottom: 7px;
    font-size: 12px;
}
.registration_count_box dl dd .count {
    margin-bottom: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}
.registration_count_box dl dd .updown_box {
    text-align: center;
    font-size: 11px;
    font-weight: 300;
}
.registration_count_box dl.up dd .count,
.registration_count_box dl.up dd .updown_box {
    color: #9F2E2E;
}
.registration_count_box dl.up dd .updown_box::before {
    content: "▲";
    margin-right: 5px;
}
.registration_count_box dl.down dd .count,
.registration_count_box dl.down dd .updown_box {
    color: #ED7423;
}
.registration_count_box dl.down dd .updown_box::before {
    content: "▼";
    margin-right: 5px;
}
.dashboard_in_box .chart {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard_in_box .chart img {
    max-height: 190px;
    width: 100%;
}

/* 현황모니터링 */
.chart {
    max-height: 240px;
}
.chart > * {
    height: 100%;
}
.chart > img {
    width: 100%;
    height: 100%;
    max-height: 240px;
}
.charge_analysis_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.charge_analysis_txt span {
    font-size: 11px;
}
.charge_analysis_txt strong {
    font-size: 18px;
    font-weight: 500;
}
.charge_analysis_txt strong em {
    font-style: normal;
    font-weight: 500;
}
.charge_analysis_txt strong em.red {color: #d72b20;}
.charge_analysis_txt strong em.green {color: #189b4e;}
.charge_analysis_txt strong em.blue {color: #ED7423;}
.tit_box.h_btn .right .small_sel .sel_box {
    min-width: 90px;
}
.tit_box.h_btn .right .small_sel .sel_box > button {
    padding: 5px 10px;
}
.tit_box.h_btn .right .small_sel .sel_box .opt_list {
    top: 30px;
}

/* 알람 시뮬레이션 */
.result_box h2 {
    font-size: 16px;
}

/* 원격제어 */
.txt_result {
    display: flex;
    justify-content: center;
    font-size: 15px;
}
.txt_result span {
    font-weight: 500;
    margin: 0 5px 0 5px;
}

/*.ui-jqgrid tr.myAltRowClass td {*/
/*    background: #f5f5f5;*/
/*}*/


.ui-jqgrid tr.ui-state-highlight td {
    background: #ffede7 !important;
}


.datepicker--nav {
    width: 100% !important;
}