@charset "utf-8";
/*-------------------------------------------------------------------
	분류그룹 : 초기화
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
	@Forms Elements
-------------------------------------------------------------------*/
/* ------ input ------ */
.intxt {display: inline-block; min-width:0; height: 40px; padding: 2px 15px; border: 1px solid #dfdfdf; line-height: 34px; font-weight: 400; font-size: 1rem; color: #000000;}
.intxt::placeholder {color: #777777;}
.intxt:read-only {background-color: #f8f8f8; color: #bcbcbc;}
.intxt:disabled {border-color: #f8f8f8; background-color: #f8f8f8; color: #bcbcbc;}

.intxt {transition: border 0.3s;}
.intxt:hover {border-color: #3D99B6;}
.intxt:read-only:hover {border-color: #dfdfdf;}
.intxt:disabled:hover {border-color: #f8f8f8;}

/* ------ textarea ------*/
.tarea {display: block; width:100%; min-height:100px; padding: 10px 15px; border: 1px solid #dfdfdf; font-weight: 400; font-size: 1rem; color: #000000; resize: none;}
.tarea.resize {resize: vertical;}
.tarea:read-only {background-color: #f8f8f8; color: #bcbcbc;}
.tarea.xl {min-height:200px;}

.tarea {transition: border 0.3s;}
.tarea:hover {border-color: #007B66;}
.tarea:read-only:hover {border-color: #dfdfdf;}

/* ------ select ------ */
.sel {display:inline-block; min-width:0; height: 40px; padding: 2px 34px 2px 15px; border: 1px solid #dfdfdf; font-weight: 400; font-size: 1rem; background: #fff url(../images/common/i_sel.svg) no-repeat center right 10px; background-size: 14px; color: #888888;}
.sel > option {color: inherit;}
.sel > option:disabled {background-color: #dfdfdf;}
.sel:disabled {border-color: #f8f8f8; background-color: #f8f8f8;}
.sel.chk-sel {height:30px;}

/* ------ radio button ------ */
.radio {display: inline-block; position: relative; min-height: 20px; padding-left: 25px; line-height: 1; white-space: nowrap; vertical-align: middle; cursor: pointer;}
.radio > input[type="radio"] {width: 0; height: 0; font-size: 0;}
.radio > span,
.radio > label {display: inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #000;}
.radio > label {cursor: pointer;}
.radio > span::before,
.radio > label::before {content:''; position:absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #dfdfdf; border-radius: 50%; background-color: #fff; box-sizing: border-box;}
.radio > span::after,
.radio > label::after {content:""; position:absolute; top: 5px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: #ffffff; opacity: 0;}

/* checked */
.radio > input[type="radio"]:checked + span,
.radio > input[type="radio"]:checked + label {color: #0aafb1;}
.radio > input[type="radio"]:checked + span::before,
.radio > input[type="radio"]:checked + label::before {border-color: #0aafb1; background-color: #0aafb1;}
.radio > input[type="radio"]:checked + span::after,
.radio > input[type="radio"]:checked + label::after {opacity: 1;}

/* disabled */
.radio > input[type="radio"]:disabled + span,
.radio > input[type="radio"]:disabled + label {color: #bcbcbc;}
.radio > input[type="radio"]:disabled + span::before,
.radio > input[type="radio"]:disabled + label::before {border-color: #bcbcbc; background-color: #dddddd;}
.radio > input[type="radio"]:checked:disabled + span::before,
.radio > input[type="radio"]:checked:disabled + label::before {border-color: #bcbcbc;}
.radio > input[type="radio"]:checked:disabled + span::after,
.radio > input[type="radio"]:checked:disabled + label::after {background-color: #bcbcbc;}

/* mutiple line */
.radio.long {white-space: normal;}


/* ------ checkbox button ------ */
.check {display: inline-block; position: relative; min-height: 20px; padding-left: 25px; line-height: 1; white-space: nowrap; vertical-align: middle; cursor: pointer;}
.check > input[type="checkbox"] {width: 0; height: 0; font-size: 0;}
.check > span,
.check > label {display:inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #000;}
.check > label {cursor: pointer;}
.check > span::before,
.check > label::before {content:''; position:absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #dfdfdf; background-color: #fff; box-sizing: border-box;}
.check > span::after,
.check > label::after {content:''; position:absolute; top: 4px; left: 4px; width: 12px; height: 9px; border-left: 3px solid #3D99B6; border-bottom: 3px solid #3D99B6; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;}

/* checked */
.check > input[type="checkbox"]:checked + span::before,
.check > input[type="checkbox"]:checked + label::before {border-color: #3D99B6;}
.check > input[type="checkbox"]:checked + span::after,
.check > input[type="checkbox"]:checked + label::after {opacity: 1;}
.check > input[type="checkbox"]:checked + span,
.check > input[type="checkbox"]:checked + label {color: #3D99B6;}

/* disabled */
.check > input[type="checkbox"]:disabled + span::before,
.check > input[type="checkbox"]:disabled + label::before {border-color: #bcbcbc; background-color: #f8f8f8;}
.check > input[type="checkbox"]:disabled + span,
.check > input[type="checkbox"]:disabled + label {color: #bcbcbc;}
.check > input[type="checkbox"]:checked:disabled + span::before,
.check > input[type="checkbox"]:checked:disabled + label::before {border-color: #bcbcbc;}
.check > input[type="checkbox"]:checked:disabled + span::after,
.check > input[type="checkbox"]:checked:disabled + label::after {border-color: #bcbcbc;}

/* mutiple line */
.check.long {white-space: normal;}


/* ------ label lists ------*/
.label-list {display: flex; align-items: center; flex-wrap: wrap;}
.label-list > li,
.label-list > .label-item {display: block; padding: 8px 0; margin-right: 15px;}

/* align */
.label-list.jf-center > li,
.label-list.jf-center > .label-item {margin-right: 0; padding: 8px;}
.label-list.jf-end > li,
.label-list.jf-end > .label-item {margin-left: 15px; margin-right: 0;}


/* ------ datepicker ------ */
/* default */
.date-box {display: inline-block;}
.date-box.dis-bk {display: block; width: 100%; padding: 10px;}
.date-box::after {content: ''; display: block; clear:both;}
.date-box .picker {float:left; width:calc(100% - 40px); height: 40px; padding: 2px 15px; border: 1px solid #e9e9e9; line-height: 43px; font-weight: 500; font-size: 1rem; color: #888888;}
.date-box > button {float: left; width: 40px; height: 40px; border: 0; font-size: 0; background:#3d99b6 url(../images/common/i_calender.png) no-repeat center; cursor: pointer;}

.date-box .picker {transition: border 0.3s;}
.date-box:hover .picker {border-color: #1AC1C1;}


/* ------ timepicker ------*/
/* default */
.timepicker {display: block; height: 45px; padding: 0 15px 0 40px; border: 1px solid #e9e9e9; background: #fff url(../images/common/clock.svg) no-repeat; background-size: 20px; background-position: center left 10px; line-height: 43px; font-weight: 500; font-size: 1rem; color: #888888;}


/*-------------------------------------------------------------------
	@Forms Group
    .form : 폼 그룹 기본영역 (폼 그룹 상하배치)
    .form.type-col: 폼 그룹 기본영역 (폼 그룹 좌우배치)
    .form.type-wide: 폼 그룹 기본영역 (폼 그룹 좌우배치)
    .form-title : 폼 그룹 제목영역
    .form-tit : 폼 그룹 제목
    .form-content : 폼 그룹 내용영역
    .form-item : 폼 그룹 내용 컨트롤 영역
-------------------------------------------------------------------*/
/* default - row */
.form {display: block;}
.form .form-title {display: block;}
.form .form-title .form-tit {display:inline-block; line-height: 40px; font-weight: 600; vertical-align: middle;}
.form .form-content {display: block;}

/* form control */
.form-item {display: flex; width: 100%;}
.form-item > .intxt,
.form-item > .sel,
.form-item > .tarea {margin-right: 8px; flex-grow: 1; flex-basis: 0;}
.form-item > .intxt:last-child,
.form-item > .sel:last-child,
.form-item > .tarea:last-child {margin-right: 0;}

/* form text */
.form-item .form-txt {margin-right: 8px; line-height: 40px;}
.form-item .form-txt:last-child {margin-right: 0;}
.form .form-desc {display:block; margin-top: 10px;}
.form .form-info {display:block; margin-top: 10px; color: #777777;}
.form .form-alert {display:none; margin-top: 10px; color: red;}
.form .form-alert.is-visible {display:block;}
.form .form-alert.is-success {color: #0d6efd;}
.form .form-require {display: inline-block; margin-left: 5px; font-weight: 500; color: #DB161E; vertical-align: middle;}

/* column */
.form.type-col {display: flex;}
.form.type-col .form-title {width: 160px; padding-right: 8px; flex-shrink: 0;}
.form.type-col .form-content {flex-grow: 1;}
@media screen and (max-width: 600px) {
    .form.type-col .form-title {width: 100px;}
}

/* wide */
.form.type-wide {display: flex;}
.form.type-wide .form-title {width: 160px; padding-right: 8px; flex-shrink: 0;}
.form.type-wide .form-content {display:flex; flex-grow: 1; flex-wrap: wrap; align-items: center;}
.form.type-wide .form-item {width: auto;}
.form.type-wide .form-desc {margin-top: 0; margin-left: 15px;}
.form.type-wide .form-info {margin-top: 0; margin-left: 15px;}
@media screen and (max-width: 600px) {
    .form.type-wide .form-title {width: 100px;}
}


/*-------------------------------------------------------------------
	@Grid
    -sm : until 601px
    -md : until 801px
    -lg : until 1025px
    -xl : until 1201px
    -xxl : until 1401px
-------------------------------------------------------------------*/
/* Grid Flexible */
.grid {display: block;}
.grid .row {display:-webkit-flex; display:flex; flex-wrap: wrap;}
.grid .row > * {width: 100%;}

/* 자신칸수 */
.grid .col {width: auto; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
.grid .col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
/* default */
.grid .col-1, .grid .col-2, .grid .col-3, .grid .col-4, .grid .col-5, .grid .col-6,
.grid .col-7, .grid .col-8, .grid .col-9, .grid .col-10, .grid .col-11, .grid .col-12 {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.grid .col-1 {width:8.3333%;}
.grid .col-2 {width:16.6666%;}
.grid .col-3 {width:25%;}
.grid .col-4 {width:33.3333%;}
.grid .col-5 {width:41.6667%;}
.grid .col-6 {width:50%;}
.grid .col-7 {width:58.3333%;}
.grid .col-8 {width:66.6667%;}
.grid .col-9 {width:75%;}
.grid .col-10 {width:83.3334%;}
.grid .col-11 {width:91.6667%;}
.grid .col-12 {width:100%;}

/* sm */
@media screen and (min-width: 601px) {
    .grid .col-sm-auto, .grid .col-sm-1, .grid .col-sm-2, .grid .col-sm-3, .grid .col-sm-4, .grid .col-sm-5, .grid .col-sm-6,
    .grid .col-sm-7, .grid .col-sm-8, .grid .col-sm-9, .grid .col-sm-10, .grid .col-sm-11, .grid .col-sm-12 {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .grid .col-sm-auto {width:auto;}
    .grid .col-sm-1 {width:8.3333%;}
    .grid .col-sm-2 {width:16.6666%;}
    .grid .col-sm-3 {width:25%;}
    .grid .col-sm-4 {width:33.3333%;}
    .grid .col-sm-5 {width:41.6667%;}
    .grid .col-sm-6 {width:50%;}
    .grid .col-sm-7 {width:58.3333%;}
    .grid .col-sm-8 {width:66.6667%;}
    .grid .col-sm-9 {width:75%;}
    .grid .col-sm-10 {width:83.3334%;}
    .grid .col-sm-11 {width:91.6667%;}
    .grid .col-sm-12 {width:100%;}
}
/* md */
@media screen and (min-width: 801px) {
    .grid .col-md-auto, .grid .col-md-1, .grid .col-md-2, .grid .col-md-3, .grid .col-md-4, .grid .col-md-5, .grid .col-md-6,
    .grid .col-md-7, .grid .col-md-8, .grid .col-md-9, .grid .col-md-10, .grid .col-md-11, .grid .col-md-12 {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .grid .col-md-auto {width:auto;}
    .grid .col-md-1 {width:8.3333%;}
    .grid .col-md-2 {width:16.6666%;}
    .grid .col-md-3 {width:25%;}
    .grid .col-md-4 {width:33.3333%;}
    .grid .col-md-5 {width:41.6667%;}
    .grid .col-md-6 {width:50%;}
    .grid .col-md-7 {width:58.3333%;}
    .grid .col-md-8 {width:66.6667%;}
    .grid .col-md-9 {width:75%;}
    .grid .col-md-10 {width:83.3334%;}
    .grid .col-md-11 {width:91.6667%;}
    .grid .col-md-12 {width:100%;}
}
/* lg */
@media screen and (min-width: 1025px) {
    .grid .col-lg-auto, .grid .col-lg-1, .grid .col-lg-2, .grid .col-lg-3, .grid .col-lg-4, .grid .col-lg-5, .grid .col-lg-6,
    .grid .col-lg-7, .grid .col-lg-8, .grid .col-lg-9, .grid .col-lg-10, .grid .col-lg-11, .grid .col-lg-12 {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .col-lg-auto {width:auto;}
    .grid .col-lg-1 {width:8.3333%;}
    .grid .col-lg-2 {width:16.6666%;}
    .grid .col-lg-3 {width:25%;}
    .grid .col-lg-4 {width:33.3333%;}
    .grid .col-lg-5 {width:41.6667%;}
    .grid .col-lg-6 {width:50%;}
    .grid .col-lg-7 {width:58.3333%;}
    .grid .col-lg-8 {width:66.6667%;}
    .grid .col-lg-9 {width:75%;}
    .grid .col-lg-10 {width:83.3334%;}
    .grid .col-lg-11 {width:91.6667%;}
    .grid .col-lg-12 {width:100%;}
}
/* xl */
@media screen and (min-width: 1201px) {
    .grid .col-xl-auto, .grid .col-xl-1, .grid .col-xl-2, .grid .col-xl-3, .grid .col-xl-4, .grid .col-xl-5, .grid .col-xl-6,
    .grid .col-xl-7, .grid .col-xl-8, .grid .col-xl-9, .grid .col-xl-10, .grid .col-xl-11, .grid .col-xl-12 {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .col-xl-auto {width:auto;}
    .grid .col-xl-1 {width:8.3333%;}
    .grid .col-xl-2 {width:16.6666%;}
    .grid .col-xl-3 {width:25%;}
    .grid .col-xl-4 {width:33.3333%;}
    .grid .col-xl-5 {width:41.6667%;}
    .grid .col-xl-6 {width:50%;}
    .grid .col-xl-7 {width:58.3333%;}
    .grid .col-xl-8 {width:66.6667%;}
    .grid .col-xl-9 {width:75%;}
    .grid .col-xl-10 {width:83.3334%;}
    .grid .col-xl-11 {width:91.6667%;}
    .grid .col-xl-12 {width:100%;}
}
/* xxl */
@media screen and (min-width: 1401px) {
    .grid .col-xxl-auto, .grid .col-xxl-1, .grid .col-xxl-2, .grid .col-xxl-3, .grid .col-xxl-4, .grid .col-xxl-5, .grid .col-xxl-6,
    .grid .col-xxl-7, .grid .col-xxl-8, .grid .col-xxl-9, .grid .col-xxl-10, .grid .col-xxl-11, .grid .col-xxl-12 {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .col-xxl-auto {width:auto;}
    .grid .col-xxl-1 {width:8.3333%;}
    .grid .col-xxl-2 {width:16.6666%;}
    .grid .col-xxl-3 {width:25%;}
    .grid .col-xxl-4 {width:33.3333%;}
    .grid .col-xxl-5 {width:41.6667%;}
    .grid .col-xxl-6 {width:50%;}
    .grid .col-xxl-7 {width:58.3333%;}
    .grid .col-xxl-8 {width:66.6667%;}
    .grid .col-xxl-9 {width:75%;}
    .grid .col-xxl-10 {width:83.3334%;}
    .grid .col-xxl-11 {width:91.6667%;}
    .grid .col-xxl-12 {width:100%;}
}

/* gutter */
.grid.gutter .row {margin: 0 -5px;}
.grid.gutter .col-auto, .grid.gutter .col, .grid.gutter .col-1, .grid.gutter .col-2, .grid.gutter .col-3, .grid.gutter .col-4, .grid.gutter .col-5,
.grid.gutter .col-6, .grid.gutter .col-7, .grid.gutter .col-8, .grid.gutter .col-9, .grid.gutter .col-10, .grid.gutter .col-11, .grid.gutter .col-12,
.grid.gutter .col-sm-auto, .grid.gutter .col-sm-1, .grid.gutter .col-sm-2, .grid.gutter .col-sm-3, .grid.gutter .col-sm-4, .grid.gutter .col-sm-5,
.grid.gutter .col-sm-6, .grid.gutter .col-sm-7, .grid.gutter .col-sm-8, .grid.gutter .col-sm-9, .grid.gutter .col-sm-10, .grid.gutter .col-sm-11, .grid.gutter .col-sm-12,
.grid.gutter .col-md-auto, .grid.gutter .col-md-1, .grid.gutter .col-md-2, .grid.gutter .col-md-3, .grid.gutter .col-md-4, .grid.gutter .col-md-5,
.grid.gutter .col-md-6, .grid.gutter .col-md-7, .grid.gutter .col-md-8, .grid.gutter .col-md-9, .grid.gutter .col-md-10, .grid.gutter .col-md-11, .grid.gutter .col-md-12,
.grid.gutter .col-lg-auto, .grid.gutter .col-lg-1, .grid.gutter .col-lg-2, .grid.gutter .col-lg-3, .grid.gutter .col-lg-4, .grid.gutter .col-lg-5,
.grid.gutter .col-lg-6, .grid.gutter .col-lg-7, .grid.gutter .col-lg-8, .grid.gutter .col-lg-9, .grid.gutter .col-lg-10, .grid.gutter .col-lg-11, .grid.gutter .col-lg-12,
.grid.gutter .col-xl-auto, .grid.gutter .col-xl-1, .grid.gutter .col-xl-2, .grid.gutter .col-xl-3, .grid.gutter .col-xl-4, .grid.gutter .col-xl-5,
.grid.gutter .col-xl-6, .grid.gutter .col-xl-7, .grid.gutter .col-xl-8, .grid.gutter .col-xl-9, .grid.gutter .col-xl-10, .grid.gutter .col-xl-11, .grid.gutter .col-xl-12,
.grid.gutter .col-xxl-auto, .grid.gutter .col-xxl-1, .grid.gutter .col-xxl-2, .grid.gutter .col-xxl-3, .grid.gutter .col-xxl-4, .grid.gutter .col-xxl-5,
.grid.gutter .col-xxl-6, .grid.gutter .col-xxl-7, .grid.gutter .col-xxl-8, .grid.gutter .col-xxl-9, .grid.gutter .col-xxl-10, .grid.gutter .col-xxl-11, .grid.gutter .col-xxl-12 {padding: 0 5px 10px;}
/* gutter - bottom 0 */
.grid.g-0 .col-auto, .grid.g-0 .col, .grid.g-0 .col-1, .grid.g-0 .col-2, .grid.g-0 .col-3, .grid.g-0 .col-4, .grid.g-0 .col-5,
.grid.g-0 .col-6, .grid.g-0 .col-7, .grid.g-0 .col-8, .grid.g-0 .col-9, .grid.g-0 .col-10, .grid.g-0 .col-11, .grid.g-0 .col-12,
.grid.g-0 .col-sm-auto, .grid.g-0 .col-sm-1, .grid.g-0 .col-sm-2, .grid.g-0 .col-sm-3, .grid.g-0 .col-sm-4, .grid.g-0 .col-sm-5,
.grid.g-0 .col-sm-6, .grid.g-0 .col-sm-7, .grid.g-0 .col-sm-8, .grid.g-0 .col-sm-9, .grid.g-0 .col-sm-10, .grid.g-0 .col-sm-11, .grid.g-0 .col-sm-12,
.grid.g-0 .col-md-auto, .grid.g-0 .col-md-1, .grid.g-0 .col-md-2, .grid.g-0 .col-md-3, .grid.g-0 .col-md-4, .grid.g-0 .col-md-5,
.grid.g-0 .col-md-6, .grid.g-0 .col-md-7, .grid.g-0 .col-md-8, .grid.g-0 .col-md-9, .grid.g-0 .col-md-10, .grid.g-0 .col-md-11, .grid.g-0 .col-md-12,
.grid.g-0 .col-lg-auto, .grid.g-0 .col-lg-1, .grid.g-0 .col-lg-2, .grid.g-0 .col-lg-3, .grid.g-0 .col-lg-4, .grid.g-0 .col-lg-5,
.grid.g-0 .col-lg-6, .grid.g-0 .col-lg-7, .grid.g-0 .col-lg-8, .grid.g-0 .col-lg-9, .grid.g-0 .col-lg-10, .grid.g-0 .col-lg-11, .grid.g-0 .col-lg-12,
.grid.g-0 .col-xl-auto, .grid.g-0 .col-xl-1, .grid.g-0 .col-xl-2, .grid.g-0 .col-xl-3, .grid.g-0 .col-xl-4, .grid.g-0 .col-xl-5,
.grid.g-0 .col-xl-6, .grid.g-0 .col-xl-7, .grid.g-0 .col-xl-8, .grid.g-0 .col-xl-9, .grid.g-0 .col-xl-10, .grid.g-0 .col-xl-11, .grid.g-0 .col-xl-12,
.grid.g-0 .col-xxl-auto, .grid.g-0 .col-xxl-1, .grid.g-0 .col-xxl-2, .grid.g-0 .col-xxl-3, .grid.g-0 .col-xxl-4, .grid.g-0 .col-xxl-5,
.grid.g-0 .col-xxl-6, .grid.g-0 .col-xxl-7, .grid.g-0 .col-xxl-8, .grid.g-0 .col-xxl-9, .grid.g-0 .col-xxl-10, .grid.g-0 .col-xxl-11, .grid.g-0 .col-xxl-12 {padding: 0 5px;}

/* Align */
.grid .col.top {margin-bottom:auto;}
.grid .col.bottom {margin-top:auto;}
.grid .col.right {margin-left:auto;}
.grid .col.left {margin-right:auto;}

/* example */
.grid-item {display: block; height: 40px; border-radius: 5px; line-height: 40px; background-color: #555; text-align: center; color: #fff;}
/*-------------------------------------------------------------------
	@labels
-------------------------------------------------------------------*/
/* default */
.label {display:inline-block; padding: 6px 15px; border-radius: 4px; background-color: #aaaaaa; font-weight: 500; font-size: 1rem; color: #ffffff;}

/* outline */
.label.outline {padding: 5px 14px; border: 1px solid #aaaaaa; background-color: #fff; color: #aaaaaa;}

/* badges */
.label.badge {padding: 4px 8px; background-color:#aaaaaa; color: #ffffff; vertical-align: middle;}
.label.outline.badge {padding: 3px 7px; border: 1px solid #aaaaaa; background-color: #fff; color: #aaaaaa;}

/* colors */
.label.type-a {color: #ffffff; background-color: #0d6efd;}
.label.type-b {color: #ffffff; background-color: #198754;}
.label.type-c {color: #ffffff; background-color: #dc3545;}
.label.type-d {color: #000000; background-color: #ffc107;}
.label.type-e {color: #ffffff; background-color: #0dcaf0;}
.label.type-f {color: #ffffff; background-color: #6667ab;}
.label.type-wh {color: #000000; background-color: #f8f9fa;}
.label.type-bk {color: #ffffff; background-color: #000000;}

/* colors - outline */
.label.outline.type-a {border-color: #0d6efd; color: #0d6efd; background-color: #ffffff;}
.label.outline.type-b {border-color: #198754; color: #198754; background-color: #ffffff;}
.label.outline.type-c {border-color: #dc3545; color: #dc3545; background-color: #ffffff;}
.label.outline.type-d {border-color: #ffc107; color: #ffc107; background-color: #ffffff;}
.label.outline.type-e {border-color: #0dcaf0; color: #0dcaf0; background-color: #ffffff;}
.label.outline.type-f {border-color: #6667ab; color: #6667ab; background-color: #ffffff;}
.label.outline.type-wh {border-color: #d3d4d5; color: #d3d4d5; background-color: #ffffff;}
.label.outline.type-bk {border-color: #333333; color: #333333; background-color: #ffffff;}

/*-------------------------------------------------------------------
	@ Buttons
-------------------------------------------------------------------*/
/* default */
.btn {display: inline-block; min-height: 40px; padding: 4px 20px; background-color: #3D99B6; line-height: 32px; font-weight: 600; font-size: 1rem; color: #ffffff; text-align: center; cursor: pointer;}
input[type="button"].btn {border-radius: 4px;}
.btn > span {display: inline-block; line-height: 1; vertical-align: middle;}
.btn.dis-bk {width:100%;}
.btn.gen {min-width: 130px;}

/* outline */
.btn.outline {padding: 3px 19px; border: 1px solid #f0f0f0; background-color: #ffffff; color: #333333;}

/* colors */
.btn.type-a {background-color: #3D99B6; color: #ffffff;}
.btn.type-b {background-color: #E9E9E9; color: #000000;}
.btn.type-c {background-color: #dc3545; color: #ffffff;}
.btn.type-d {background-color: #ffffff; color: #333333;}
.btn.type-e {background-color: #405381; color: #ffffff;}
.btn.type-f {background-color: #6FBA2C; color: #ffffff;}
.btn.type-g {background-color:#fcb902; color:#ffffff;}
.btn.type-h {background-color: #555555; color: #ffffff;}
.btn.type-wh {background-color: #f8f9fa; color: #000000;}
.btn.type-bk {background-color: #333333; color: #ffffff;}

/* outline - colors */
.btn.outline.type-a {border-color: #0d6efd; background-color: #ffffff; color: #0d6efd;}
.btn.outline.type-b {border-color: #E9E9E9; background-color: #ffffff; color: #198754;}
.btn.outline.type-c {border-color: #dc3545; background-color: #ffffff; color: #dc3545;}
.btn.outline.type-d {border-color: #ffc107; background-color: #ffffff; color: #ffc107;}
.btn.outline.type-e {border-color: #0dcaf0; background-color: #ffffff; color: #0dcaf0;}
.btn.outline.type-f {border-color: #6667ab; background-color: #ffffff; color: #6667ab;}
.btn.outline.type-wh {border-color: #f8f9fa; background-color: #ffffff; color: #f8f9fa;}
.btn.outline.type-bk {border-color: #333333; background-color: #ffffff; color: #333333;}

/* interaction */
.btn {box-shadow: 0 0 6px 0 rgba(0,0,0,0); transition: border 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;}
.btn:hover,
.btn:focus {color:#ffffff; background-color: #3D99B6; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}
.btn.type-a:hover,
.btn.type-a:focus {background-color: #405381; color:#ffffff;}
.btn.type-b:hover,
.btn.type-b:focus {background-color: #E9E9E9; color:#333333;}
.btn.type-c:hover,
.btn.type-c:focus {background-color: #bb2d3b; color:#ffffff;}
.btn.type-d:hover,
.btn.type-d:focus {background-color: #ffca2c; color:#000000;}
.btn.type-e:hover,
.btn.type-e:focus {background-color: #405381; color:#ffffff;}
.btn.type-f:hover,
.btn.type-f:focus {background-color: #6FBA2C; color:#ffffff;}
.btn.type-g:hover,
.btn.type-g:focus {background-color: #fcb902; color:#ffffff;}
.btn.type-wh:hover,
.btn.type-wh:focus {background-color: #d3d4d5; color:#000000;}
.btn.type-bk:hover,
.btn.type-bk:focus {background-color: #000000; color:#ffffff;}

.btn.outline:hover,
.btn.outline:focus {border-color: #1D7145; background-color: #ffffff; color:#1D7145;}
.btn.outline.type-a:hover,
.btn.outline.type-a:focus {border-color: #0d6efd; background-color: #ffffff; color:#0b5ed7;}
.btn.outline.type-b:hover,
.btn.outline.type-b:focus {border-color: #157347; background-color: #ffffff; color:#157347;}
.btn.outline.type-c:hover,
.btn.outline.type-c:focus {border-color: #bb2d3b; background-color: #ffffff; color:#bb2d3b;}
.btn.outline.type-d:hover,
.btn.outline.type-d:focus {border-color: #ffca2c; background-color: #ffffff; color:#ffca2c;}
.btn.outline.type-e:hover,
.btn.outline.type-e:focus {border-color: #31d2f2; background-color: #ffffff; color:#31d2f2;}
.btn.outline.type-f:hover,
.btn.outline.type-f:focus {border-color: #55558c; background-color: #ffffff; color:#55558c;}
.btn.outline.type-wh:hover,
.btn.outline.type-wh:focus {border-color: #d3d4d5; background-color: #ffffff; color:#d3d4d5;}
.btn.outline.type-bk:hover,
.btn.outline.type-bk:focus {border-color: #000000; background-color: #ffffff; color:#000000;}

/* button group */
.btn-group {display: flex;}
.btn-group > .g-item {display: block;}

/* gutter */
.btn-group.gutter {margin: 0 -5px;}
.btn-group.gutter > .g-item {padding: 0 5px;}

/* flexible */
.btn-group.flexible > .g-item {flex-grow: 1;}
.btn-group.flexible > .g-item .btn {display: block; width: 100%;}

/* fluid */
.btn-group.fluid {flex-wrap: wrap;}
.btn-group.fluid > .g-item {flex-grow: 1;}
.btn-group.fluid > .g-item .btn {display: block; width: 100%;}

/*-------------------------------------------------------------------
	@컴포넌트 - Sorting Button
-------------------------------------------------------------------*/
/* default */
.sorting-list {display: flex;}
.sorting-list > li {display: block; position: relative; margin-right: 5px; padding-right: 5px;}
.sorting-list > li::before {content:""; position: absolute; top: 20%; right: 0; width: 1px; height: 60%; background-color: #dfdfdf;}
.sorting-list > li:last-child {margin-right: 0; padding-right: 0;}
.sorting-list > li:last-child::before {display: none;}
.sorting-list > li .btn-sorting {display: block; padding: 5px; background-color: transparent; line-height: 1; font-weight: 500; font-size: 1.0625rem;}
.sorting-list > li .btn-sorting.active {font-weight: 700; color: #0aafb1;}


/*-------------------------------------------------------------------
	@ Paigination
-------------------------------------------------------------------*/
/* --- default ---*/
.paging {display: block;}
.paging .paging-group {display: flex; margin: 0 -4px; flex-wrap: wrap;}
.paging .paging-group > li {display: block; margin-bottom: 10px; padding: 0 4px;}
.paging .paging-group > li:last-child {display: block; padding-right: 0;}
.paging .paging-group > li .btn-page {display: block; position: relative; min-width: 30px; height: 30px; padding: 0 5px; border: 1px solid #dfdfdf; background-color: #ffffff; font-size: 1rem;}
/* arrow */
.paging .paging-group > li .btn-page.first,
.paging .paging-group > li .btn-page.prev,
.paging .paging-group > li .btn-page.next,
.paging .paging-group > li .btn-page.last {position:relative; font-size: 0;}
.paging .paging-group > li .btn-page.first::before,
.paging .paging-group > li .btn-page.prev::before {content:""; position: absolute; top: 50%; left: 50%; width:20px; height:20px; background:url(../images/sub/i_prev_arrow.svg) no-repeat center; transform: translate(-50%, -50%);}
.paging .paging-group > li .btn-page.first::after {content:""; position: absolute; top: 8px; left: 8px; height: 12px; border-left: 2px solid #333}
.paging .paging-group > li .btn-page.last::before,
.paging .paging-group > li .btn-page.next::before {content:""; position: absolute; top: 50%; left: 50%; width:20px; height:20px; background:url(../images/sub/i_next_arrow.svg) no-repeat center; transform: translate(-50%, -50%);}
.paging .paging-group > li .btn-page.last::after {content:""; position: absolute; top: 8px; right: 8px; height: 12px; border-right: 2px solid #333}
/* interaction */
.paging .paging-group > li .btn-page {transition: border 0.3s, color 0.3s;}
.paging .paging-group > li .btn-page:focus,
.paging .paging-group > li .btn-page:hover,
.paging .paging-group > li .btn-page.current {border-color: #0aafb1; color: #0aafb1;}


/* type scroll */
.paging.type-scroll {display: block; overflow-x: auto; overflow-y: hidden;}
.paging.type-scroll .paging-group {display: flex; margin: 0; flex-wrap: nowrap;}
.paging.type-scroll .paging-group > li {display: block; margin-bottom: 0; padding-left: 0; padding-right: 8px;}


/* --- fraction --- */
.paging.fraction {display: flex; align-items: center;}
.paging.fraction .paging-number {display: flex; align-items: center;}
.paging.fraction .paging-number .paging-txt {display: block; padding: 0 5px; font-weight: 500; font-size: 1rem;}
.paging.fraction .paging-number .paging-txt.now {color: #0aafb1;}
.paging.fraction .paging-number .paging-txt.split {color: #dfdfdf;}
.paging.fraction .paging-number .paging-txt.total {color: #000000;}
.paging.fraction .btn-page {display: block; position: relative; min-width: 30px; height: 30px; padding: 0 5px; background-color: #ffffff; font-size: 0;}
.paging.fraction .btn-page.prev::before {content:""; position: absolute; top: 7px; left: 10px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 8px solid #0aafb1;}
.paging.fraction .btn-page.next::before {content:""; position: absolute; top: 7px; right: 10px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 8px solid #0aafb1;}
/* disabled */
.paging.fraction .btn-page.prev:disabled::before {border-right-color: #dfdfdf !important;}
.paging.fraction .btn-page.next:disabled::before {border-right-color: #dfdfdf !important;}
/* interaction */
.paging.fraction .btn-page::before {transition: border 0.3s;}
.paging.fraction .btn-page.prev:focus::before,
.paging.fraction .btn-page.prev:hover::before {border-right-color:#088c8e;}
.paging.fraction .btn-page.next:focus::before,
.paging.fraction .btn-page.next:hover::before {border-left-color: #088c8e;}


/*-------------------------------------------------------------------
	@text
-------------------------------------------------------------------*/
.tc-bk{color:#000000;}
.tc-wh{color:#ffffff;}
.tc-red{color:red}
.tc-01 {color: #0aafb1;}
.tc-02 {color: #15b3d6;}
.tc-03 {color: #474747;}


/* description list - dt, dd */
.dl {display: block;}
.dl::after {content:""; display: block; clear: both;}
.dl .dt {float: left;}
.dl .dd {display: block; overflow: hidden;}
@media screen and (max-width: 600px) {
    .dl.mo .dt {float: none;}
}
/* //dt, dd */


/*-------------------------------------------------------------------
	@Bullets
-------------------------------------------------------------------*/
/* General */
.bul-list {display: block;}
.bul-list > li,
.bul-list > .bul {display: table; word-break: break-all;}
.bul-list > li:before,
.bul-list > .bul:before {content:''; display: table-cell; position:relative; padding-right:5px;}

/* 특수문자 */
.bul-list.hyphen > li::before,
.bul-list.hyphen > .bul::before {content:'-';}

.bul-list.star > li::before,
.bul-list.star > .bul::before {content:'*';}

.bul-list.bill > li::before,
.bul-list.bill > .bul::before {content:'※';}

/* 숫자목록 : 1. (1) 1) ① */
.bul-list.num1 {counter-reset:num1;}
.bul-list.num1 > li::before {counter-increment:num1; content:counter(num1, decimal) ".";}
.bul-list.num2 {counter-reset:num2;}
.bul-list.num2 > li::before {counter-increment:num2; content:"(" counter(num2, decimal) ")";}
.bul-list.num3 {counter-reset:num3;}
.bul-list.num3 > li::before {counter-increment:num3; content:counter(num3, decimal) ")";}
.bul-list.num4 > li::before {content:'①';}
.bul-list.num4 > li+li::before {content:'②';}
.bul-list.num4 > li+li+li::before {content:'③';}
.bul-list.num4 > li+li+li+li::before {content:'④';}
.bul-list.num4 > li+li+li+li+li::before {content:'⑤';}
.bul-list.num4 > li+li+li+li+li+li::before {content:'⑥';}
.bul-list.num4 > li+li+li+li+li+li+li::before {content:'⑦';}
.bul-list.num4 > li+li+li+li+li+li+li+li::before {content:'⑧';}
.bul-list.num4 > li+li+li+li+li+li+li+li+li::before {content:'⑨';}
.bul-list.num4 > li+li+li+li+li+li+li+li+li+li::before {content:'⑩';}

/* 알파벳목록 A. (a) a) ⓐ */
.bul-list.eng1 {counter-reset:eng1;}
.bul-list.eng1 > li::before {counter-increment:eng1; content:counter(eng1, upper-alpha) ".";}
.bul-list.eng2 {counter-reset:eng2;}
.bul-list.eng2 > li::before {counter-increment:eng2; content:"(" counter(eng2, lower-alpha) ")";}
.bul-list.eng3 {counter-reset:eng3;}
.bul-list.eng3 > li::before {counter-increment:eng3; content:counter(eng3, lower-alpha) ")";}
.bul-list.eng4 > li::before {content:'ⓐ';}
.bul-list.eng4 > li+li::before {content:'ⓑ';}
.bul-list.eng4 > li+li+li::before {content:'ⓒ';}
.bul-list.eng4 > li+li+li+li::before {content:'ⓓ';}
.bul-list.eng4 > li+li+li+li+li::before {content:'ⓔ';}
.bul-list.eng4 > li+li+li+li+li+li::before {content:'ⓕ';}
.bul-list.eng4 > li+li+li+li+li+li+li::before {content:'ⓖ';}
.bul-list.eng4 > li+li+li+li+li+li+li+li::before {content:'ⓗ';}
.bul-list.eng4 > li+li+li+li+li+li+li+li+li::before {content:'ⓘ';}
.bul-list.eng4 > li+li+li+li+li+li+li+li+li+li::before {content:'ⓙ';}

/* 한글목록 가. (가) 가) */
.bul-list.kor1 > li::before {content:'가';}
.bul-list.kor1 > li+li::before {content:'나';}
.bul-list.kor1 > li+li+li::before {content:'다';}
.bul-list.kor1 > li+li+li+li::before {content:'라';}
.bul-list.kor1 > li+li+li+li+li::before {content:'마';}
.bul-list.kor1 > li+li+li+li+li+li::before {content:'바';}
.bul-list.kor1 > li+li+li+li+li+li+li::before {content:'사';}
.bul-list.kor1 > li+li+li+li+li+li+li+li::before {content:'아';}
.bul-list.kor1 > li+li+li+li+li+li+li+li+li::before {content:'자';}
.bul-list.kor1 > li+li+li+li+li+li+li+li+li+li::before {content:'차';}
.bul-list.kor1 > li+li+li+li+li+li+li+li+li+li+li::before {content:'카';}
.bul-list.kor1 > li+li+li+li+li+li+li+li+li+li+li+li::before {content:'타';}
.bul-list.kor1 > li+li+li+li+li+li+li+li+li+li+li+li+li::before {content:'파';}
.bul-list.kor1 > li+li+li+li+li+li+li+li+li+li+li+li+li+li::before {content:'하';}

.bul-list.kor2 > li::before {content:'(가)';}
.bul-list.kor2 > li+li::before {content:'(나)';}
.bul-list.kor2 > li+li+li::before {content:'(다)';}
.bul-list.kor2 > li+li+li+li::before {content:'(라)';}
.bul-list.kor2 > li+li+li+li+li::before {content:'(마)';}
.bul-list.kor2 > li+li+li+li+li+li::before {content:'(바)';}
.bul-list.kor2 > li+li+li+li+li+li+li::before {content:'(사)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li::before {content:'(아)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li+li::before {content:'(자)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li+li+li::before {content:'(차)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li+li+li+li::before {content:'(카)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li+li+li+li+li::before {content:'(타)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li+li+li+li+li+li::before {content:'(파)';}
.bul-list.kor2 > li+li+li+li+li+li+li+li+li+li+li+li+li+li::before {content:'(하)';}

.bul-list.kor3 > li::before {content:'가)';}
.bul-list.kor3 > li+li::before {content:'나)';}
.bul-list.kor3 > li+li+li::before {content:'다)';}
.bul-list.kor3 > li+li+li+li::before {content:'라)';}
.bul-list.kor3 > li+li+li+li+li::before {content:'마)';}
.bul-list.kor3 > li+li+li+li+li+li::before {content:'바)';}
.bul-list.kor3 > li+li+li+li+li+li+li::before {content:'사)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li::before {content:'아)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li+li::before {content:'자)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li+li+li::before {content:'차)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li+li+li+li::before {content:'카)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li+li+li+li+li::before {content:'타)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li+li+li+li+li+li::before {content:'파)';}
.bul-list.kor3 > li+li+li+li+li+li+li+li+li+li+li+li+li+li::before {content:'하)';}


/* dot-list */
.dot-list {display: block;}
.dot-list > li {position: relative; padding-left: 10px; margin-bottom: 5px;}
.dot-list > li:last-child{margin-bottom: 0;}
.dot-list > li::before {content:""; position: absolute; top: calc(0.65rem - 1.5px); left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #000;}

/*-------------------------------------------------------------------
	@컴포넌트 - 테이블
-------------------------------------------------------------------*/
/* default */
.table {width: 100%; border-top: 2px solid #000; background-color: #fff;}
.table caption {width: 0; height: 0; font-size: 0;}
/* th */
.table tr th {padding: 8px 10px; border-bottom: 1px solid #dddddd; font-weight: 600; font-size: 1.0625rem; text-align: center; color: #000; background-color: #eeeeee;}
.table tr th.depth {border-left: 1px solid #dddddd; background-color: #f7f7f7;}
.table tr th + th {border-left: 1px solid #dddddd;}
.table thead tr:nth-child(n + 2) th {border-left: 1px solid #dddddd;}
/* td */
.table tr td {padding: 8px 10px; border-bottom: 1px solid #dddddd; text-align: left;}
.table tr td.depth {border-left: 1px solid #dddddd;}
.table tr th + td {border-left: 1px solid #dddddd;}
.table tr td + td {border-left: 1px solid #dddddd;}

/* group */
.table tbody.rowspan tr:nth-child(n + 2) td {border-left: 1px solid #dddddd;}
.table tbody.rowspan tr:nth-child(n + 2) th {border-left: 1px solid #dddddd;}
.table tr.rowspan th:first-child {border-left: 1px solid #dddddd;}
.table tr.rowspan td:first-child {border-left: 1px solid #dddddd;}
.table tr th.bl {border-left: 1px solid #dddddd;}
.table tr td.bl {border-left: 1px solid #dddddd;}

/* align */
.table.th-left tr th {text-align: left;}
.table.th-right tr th {text-align: right;}
.table tr th.left {text-align: left;}
.table tr th.center {text-align: center;}
.table tr th.right {text-align: right;}

.table.td-right tr td {text-align: right;}
.table.td-center tr td {text-align: center;}
.table tr td.left {text-align: left;}
.table tr td.center {text-align: center;}
.table tr td.right {text-align: right;}

.table tr th.nowrap {white-space: nowrap;}
.table tr td.nowrap {white-space: nowrap;}

/* scroll */
.scr-table-box {display: block; overflow-x: auto; position: relative;}
.scr-table-box .table-box {display: block;}
.scr-table-box.lg {}
.scr-table-box.lg .bod-table tr td {padding: 12px 10px;}
.scy-table-box{overflow-y:auto;max-height:500px;}

/*-------------------------------------------------------------------
	@컴포넌트 - 테이블
-------------------------------------------------------------------*/
/* default */
.bod-table {width: 100%; border-top: 2px solid #000; background-color: #fff;}
.bod-table caption {width: 0; height: 0; font-size: 0;}
/* th */
.bod-table tr th {padding: 8px 10px; border-bottom: 1px solid #dddddd; font-weight: 600; font-size: 1.0625rem; text-align: center; color: #000; background-color: #eeeeee;}
.bod-table tr th.depth {border-left: 1px solid #dddddd; background-color: #f7f7f7;}
.bod-table tr th + th {border-left: 1px solid #dddddd;}
.bod-table thead tr:nth-child(n + 2) th {border-left: 1px solid #dddddd;}
/* td */
.bod-table tr td {padding: 8px 10px; border-bottom: 1px solid #dddddd; text-align: left;}
.bod-table tr td.depth {border-left: 1px solid #dddddd;}
.bod-table tr th + td {border-left: 1px solid #dddddd;}
.bod-table tr td + td {border-left: 1px solid #dddddd;}

/* group */
.bod-table tbody.rowspan tr:nth-child(n + 2) td {border-left: 1px solid #dddddd;}
.bod-table tbody.rowspan tr:nth-child(n + 2) th {border-left: 1px solid #dddddd;}
.bod-table tr.rowspan th:first-child {border-left: 1px solid #dddddd;}
.bod-table tr.rowspan td:first-child {border-left: 1px solid #dddddd;}
.bod-table tr th.bl {border-left: 1px solid #dddddd;}
.bod-table tr td.bl {border-left: 1px solid #dddddd;}

/* align */
.bod-table.th-left tr th {text-align: left;}
.bod-table.th-right tr th {text-align: right;}
.bod-table tr th.left {text-align: left;}
.bod-table tr th.center {text-align: center;}
.bod-table tr th.right {text-align: right;}

.bod-table.td-right tr td {text-align: right;}
.bod-table.td-center tr td {text-align: center;}
.bod-table tr td.left {text-align: left;}
.bod-table tr td.center {text-align: center;}
.bod-table tr td.right {text-align: right;}

.bod-table tr th.nowrap {white-space: nowrap;}
.bod-table tr td.nowrap {white-space: nowrap;}

/* head */
.bod-con {margin-top:50px;}
.bod-con .bod-head {display: flex;margin-bottom:12px;justify-content: space-between;align-items: flex-end;}
.bod-con .bod-head .total {font-weight:500;}
.bod-con .bod-head .total .num {color:#1AC1C1;}
.bod-con .bod-head .sort-wrap {display: flex;}
.bod-con .bod-head .sort-wrap .list {display: flex; margin-left:10px; align-items: center;}


/* table */
.bod-table thead tr {padding:4px 0;}
.bod-table thead tr th {border-left:1px solid transparent; background-color: #fff;}
.bod-table tbody tr td {border-left:1px solid transparent; border-bottom:1px solid #e9e9e9;}
.bod-table tbody tr td.name {}
.bod-table tbody tr td.name .tit {display:block; max-width: 530px;}
.bod-table tbody tr td.period,
.bod-table tbody tr td.input-period {word-break: break-word;}
.bod-table tbody tr td.file {text-align: left;}
/* .bod-table tbody tr td.busi-num {}
.bod-table tbody tr td.file .txt,
.bod-table tbody tr td.busi-num .txt {color:#0aafb1;} */

.bod-table.type-a {}
.bod-table.type-a thead {background-color:#efefef;}
.bod-table tbody tr.bod-tr.type-a td {background-color:#f3f3f3;}

.bod-table.type-b {}
.bod-table.type-b tr th {padding:12px 0; background-color:#F8F9FA; font-size:1rem;}

/* pagination */
.bod-con .paging {display: flex; margin:20px auto; justify-content: center;}

/* interaction */
.bod-table tbody tr {transition: background 0.3s;}
.bod-table tbody tr:focus,
.bod-table tbody tr:hover {background-color:#d4ecdd;}
.bod-table.type-b tbody tr:focus,
.bod-table.type-b tbody tr:hover {background-color:transparent;}
/* .bod-table tbody tr td.file:hover .txt,
.bod-table tbody tr td.busi-num:hover .txt {color:#5a5a5a; text-decoration: underline; }
.bod-table tbody tr td.busi-name:hover .txt {color:#0aafb1;} */


/* ------ select ------ */
.form-sel {display:inline-block; width:100%; height: 40px; padding: 2px 34px 2px 15px; border: 1px solid #dfdfdf; font-weight: 400; font-size: 1rem; background: #fff url(../images/common/i_sel.svg) no-repeat center right 10px; background-size: 14px; color: #888888;}
.form-sel > option {color: inherit;}
.form-sel > option:disabled {background-color: #dfdfdf;}
.form-sel:disabled {border-color: #f8f8f8; background-color: #f8f8f8;}
/* ------ input ------ */
.form-intxt {display: inline-block; width:100%; height: 40px; padding: 2px 15px; border: 1px solid #dfdfdf; line-height: 34px; font-weight: 400; font-size: 1rem; color: #000000;}
.form-intxt::placeholder {color: #777777;}
.form-intxt:read-only {background-color: #f8f8f8; color: #bcbcbc;}
.form-intxt:disabled {border-color: #f8f8f8; background-color: #e9e9e9; color: #bcbcbc;}

.form-intxt {transition: border 0.3s;}
.form-intxt:hover {border-color: #3D99B6;}
.form-intxt:read-only:hover {border-color: #dfdfdf;}
.form-intxt:disabled:hover {border-color: #f8f8f8;}

/*-------------------------------------------------------------------
	@컴포넌트 - 버튼
-------------------------------------------------------------------*/
/* default */
.btn-circle {display: inline-block; min-width:60px; min-height: 40px; padding: 4px 20px; border-radius: 100px; background-color:#1AC1C1; line-height: 32px; font-weight: 600; font-size:0.75rem; color: #ffffff; text-align: center; cursor: pointer;}
input[type="button"].btn-circle {border-radius: 4px;}
.btn-circle > span {display: inline-block; line-height: 1; vertical-align: middle;}
.btn-circle.dis-bk {width:100%;}
.btn-circle.gen {min-width: 130px;}
.function .btn-circle {margin-bottom:2px; padding: 6px 15px; min-height:auto; line-height: 1.3;}
.label-circle {display:inline-block; min-width:60px;padding:0 5px; border-radius: 100px; background-color:#6FBA2C; line-height: 28px; font-weight: 600; font-size:0.75rem; color: #ffffff;text-align: center;}

.btn-circle.type-a {background-color: #1AC1C1;}
.btn-circle.type-b {background-color: #405381;}
.btn-circle.type-c {background-color: #dc3545;}
.btn-circle.type-d {border:1px solid #bfbfbf; color:#333;  background-color:#fff;}

.label-circle.type-a {background-color: #3D99B6;} 
.label-circle.type-b {background-color: #bfbfbf;}
.label-circle.type-c {background-color: #333333;}
.label-circle.type-d {background-color: #1AC1C1;}

/* interaction */
.btn-circle {box-shadow: 0 0 6px 0 rgba(0,0,0,0); transition: border 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;}
.btn-circle:hover,
.btn-circle:focus {color:#ffffff; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}
.btn-circle.type-d:hover,
.btn-circle.type-d:focus {color:#333; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}

/*-------------------------------------------------------------------
	@컴포넌트 - 탭박스
-------------------------------------------------------------------*/
/* Default */
.tab-box {overflow-x: auto; overflow-y: hidden; margin-bottom: 20px;}
.tab-box .list-wrap {display: flex; width:100%;}
.tab-box .list-wrap > li {display:block;}
.tab-box .list-wrap > li .btn-tab {display:block; position:relative; width: 100%; min-height: 40px; padding:3px 20px; border:1px solid #dfdfdf; border-left: 0; background:#ffffff; line-height: 32px; font-weight: 500; font-size: 1rem; text-align: center; color:#4e5b6f;}
.tab-box .list-wrap > li:first-child .btn-tab {border-left: 1px solid #dfdfdf;}
.tab-box .list-wrap > li .btn-tab.active {border-color: #353fba; background-color: #353fba; color:#ffffff;}
.tab-box .list-wrap > li .btn-tab > span {display: inline-block; line-height: 1; vertical-align: middle;}

/* Tabbox - Flexible */
.tab-box.flexible .list-wrap > li {flex-grow: 1;}

/* Tabbox - Type-a */
.tab-box.type-a {overflow-x: auto; overflow-y: hidden;}
.tab-box.type-a .list-wrap {display: flex; width:100%;}
.tab-box.type-a .list-wrap > li {display:block;}
.tab-box.type-a .list-wrap > li .btn-tab {border-top: 2px solid #efefef; border-bottom: 2px solid #353fba; border-left: 0; border-right: 0; background:#efefef;}
.tab-box.type-a .list-wrap > li .btn-tab.active {padding-bottom: 5px; border: 2px solid #353fba; border-bottom: 0; background-color: #ffffff; color:#353fba;}

/* Tabbox - Grid */
.tab-box.grid {overflow: visible;}
.tab-box.grid .list-wrap {border-bottom: 2px solid #353fba;}
.tab-box.grid .list-wrap > li .btn-tab {border: 0; line-height: 34px; background: #efefef;}
.tab-box.grid .list-wrap > li:first-child .btn-tab {border-left: 0;}
.tab-box.grid .list-wrap > li .btn-tab.active {background: #353fba;}

/* Tabbox - Media Dropdown */
.tab-box.type-drop {overflow: visible;}
.tab-box.type-drop .list-wrap > li {flex-grow: 1;}
.tab-box.type-drop .list-wrap > li .btn-tab {min-height: 45px; padding:5px 10px; border:1px solid #dfdfdf; border-left: 0; background:#ffffff; line-height: 33px;}
.tab-box.type-drop .list-wrap > li:first-child .btn-tab {border-left:1px solid #dfdfdf;}
.tab-box.type-drop .list-wrap > li .btn-tab.active {border-color: #353fba; color:#fff; background: #353fba;}
.tab-box.type-drop .list-wrap > li .btn-tab > span {display: inline-block; line-height: 1; vertical-align: middle;}


/* tab content */
.tab-box-con .tab-con {display: block;}
.tab-box-con .tab-con {display: none;}
.tab-box-con .tab-con.active {display: block;}



/*-------------------------------------------------------------------
	@컴포넌트 - 모달 팝업
-------------------------------------------------------------------*/
/* default */
.modal-popup {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; transition: visibility 0s 0.4s;}
.modal-popup.on {visibility: visible; transition: visibility 0s 0s;}
.modal-popup .pop-bg {width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);}
.modal-popup .pop-bg.no {background-color: transparent;}
.modal-popup .popup {position: absolute; top: 50%; left: 50%; max-width: 800px; width: 100%; padding: 0 20px; transform: translate(-50%, -50%);}
.modal-popup .popup .pop-con {display: block; overflow: hidden; position:relative;}
.modal-popup .popup .pop-con .pop-head {display: flex; overflow: hidden; height: 50px; padding: 0 20px; background-color: #ffffff; color: #000000; align-items: center; justify-content: space-between;}
.modal-popup .popup .pop-con .pop-head .tit {display:block; line-height: 50px; font-weight: 700; font-size: 1.0625rem; color: inherit;}
.modal-popup .popup .pop-con .btn-close {display:block; position: absolute; top: 15px; right: 20px;  width: 22px; height: 22px; font-size: 0; background-color: transparent;}
.modal-popup .popup .pop-con .btn-close::before,
.modal-popup .popup .pop-con .btn-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; background-color: #ffffff;}
.modal-popup .popup .pop-con .btn-close::before {transform: translate(-50%, -50%) rotate(45deg); transform-origin: center; transition: transform-origin 0.3s;}
.modal-popup .popup .pop-con .btn-close::after {transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; transition: transform 0.3s;}

/* body */
.modal-popup .popup .pop-con .pop-body {overflow-x:hidden; overflow-y: auto; max-height: calc(100vh - 50px); padding: 20px; background-color: #ffffff;}

/* size */
.modal-popup.xxl .popup {max-width: 1400px;}
.modal-popup.xl .popup {max-width: 1200px;}
.modal-popup.lg .popup {max-width: 1024px;}
.modal-popup.sm .popup {max-width: 600px;}

/* color */
.modal-popup .popup .pop-con .pop-head {background-color: #3D99B6; color: #ffffff;}
.modal-popup.type-a .popup .pop-con .pop-head {background-color: #0d6efd; color: #ffffff;}
.modal-popup.type-b .popup .pop-con .pop-head {background-color: #198754; color: #ffffff;}
.modal-popup.type-c .popup .pop-con .pop-head {background-color: #dc3545; color: #ffffff;}
.modal-popup.type-d .popup .pop-con .pop-head {background-color: #ffc107; color: #000000;}
.modal-popup.type-e .popup .pop-con .pop-head {background-color: #0dcaf0; color: #ffffff;}
.modal-popup.type-f .popup .pop-con .pop-head {background-color: #6667ab; color: #ffffff;}

.modal-popup.type-a .popup .btn-close::before,
.modal-popup.type-a .popup .btn-close::after {background-color: #ffffff;}
.modal-popup.type-b .popup .btn-close::before,
.modal-popup.type-b .popup .btn-close::after {background-color: #ffffff;}
.modal-popup.type-c .popup .btn-close::before,
.modal-popup.type-c .popup .btn-close::after {background-color: #ffffff;}
.modal-popup.type-d .popup .btn-close::before,
.modal-popup.type-d .popup .btn-close::after {background-color: #000000;}
.modal-popup.type-e .popup .btn-close::before,
.modal-popup.type-e .popup .btn-close::after {background-color: #ffffff;}
.modal-popup.type-f .popup .btn-close::before,
.modal-popup.type-f .popup .btn-close::after {background-color: #ffffff;}

/* interaction */
.modal-popup .pop-bg {background-color: rgba(0,0,0,0); transition: background 0.4s;}
.modal-popup.on .pop-bg {background-color: rgba(0,0,0,0.4);}
.modal-popup .popup .btn-close::before,
.modal-popup .popup .btn-close::after {transition: transform 0.3s;}
.modal-popup .popup .btn-close:focus::before,
.modal-popup .popup .btn-close:hover::before {transform: translate(-50%, -50%) rotate(30deg);}
.modal-popup .popup .btn-close:focus::after,
.modal-popup .popup .btn-close:hover::after {transform: translate(-50%, -50%) rotate(-30deg);}
.modal-popup .popup .pop-con {top: 55%; opacity:0; transition: top 0.4s, opacity 0.4s;}
.modal-popup.on .popup .pop-con {top: 50%; opacity:1;}


/*-------------------------------------------------------------------
	@컴포넌트 - 텍스트 카운트
-------------------------------------------------------------------*/
/* default */
.count-box {display: block;}
.count-box .count-info {display: flex; padding: 8px 10px; border: 1px solid #dfdfdf; border-top: 0;}
.count-box .count-info .count {display: block;}
.count-box .count-info .count .now {color: #0aafb1;}



/* ====== 모듈 ====== */

/* 모듈 - content */
#con .mdl-content {display: block;}

/* module - 분할 박스 */
#con .mdl-content .mdl-section {margin-bottom: 40px;}
#con .mdl-content .mdl-section:last-child {margin-bottom: 0;}
#con .mdl-content .mdl-section .mdl-part {margin-bottom: 25px;}
#con .mdl-content .mdl-section .mdl-part:last-child {margin-bottom: 0;}
/* module - form 박스 */
#con .mdl-content .mdl-form {display: block; padding: 20px; border: 1px solid #e9e9e9; background-color: #FAFAFA;}



/* 모듈 - 게시판 header */
#con .mdl-content .mdl-board-head {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#con .mdl-content .mdl-board-head .total {display:block; margin-bottom: 10px; font-size: 0.9375rem; color: #4e5b6f;}
#con .mdl-content .mdl-board-head .total > strong {font-weight: 600; color: #DB161E;}

#con .mdl-content .mdl-board-head .info-wrap {display: flex; margin: 0 -5px; flex-wrap: wrap;}
#con .mdl-content .mdl-board-head .info-wrap > li {padding: 0 5px; margin-bottom: 10px;}
#con .mdl-content .mdl-board-head .info-wrap > li .intxt {width: 100%;}
#con .mdl-content .mdl-board-head .info-wrap > li .insel {width: 100%;}



/* 모듈 - 게시판 */
/* ====== 기본 미디어 테이블 ====== */
#con .mdl-content .media-table {display: table; width: 100%; border-top: 2px solid #000; text-align: center;}
#con .mdl-content .media-table .thead {display: table-header-group;}
#con .mdl-content .media-table .tbody {display: table-row-group;}
/* 기본 미디어 테이블 - tr, th, td */
#con .mdl-content .media-table .t-tr {display: table-row;}
#con .mdl-content .media-table .t-tr .t-th {display: table-cell; padding: 15px; border-bottom: 1px solid #e9e9e9; font-weight: 700; font-size: 1.0625rem; color: #000; text-align: center; background-color: #fff; vertical-align: middle;}
#con .mdl-content .media-table .t-tr .t-td {display: table-cell; padding: 15px; text-align: center; border-bottom: 1px solid #e9e9e9; color: #4E5B6F; vertical-align: middle;}
#con .mdl-content .media-table .t-tr .t-th.tl,
#con .mdl-content .media-table .t-tr .t-td.tl {text-align: left;}
#con .mdl-content .media-table .t-tr .t-th.tc,
#con .mdl-content .media-table .t-tr .t-td.tc {text-align: center;}
#con .mdl-content .media-table .t-tr .t-th.tr,
#con .mdl-content .media-table .t-tr .t-td.tr {text-align: left;}
/* 기본 미디어 테이블 - 테이블 열 길이 */
#con .mdl-content .media-table .t-tr .t-td.w1 {width: 10%;}
#con .mdl-content .media-table .t-tr .t-td.w2 {width: 20%;}
#con .mdl-content .media-table .t-tr .t-td.w3 {width: 30%;}
#con .mdl-content .media-table .t-tr .t-td.w4 {width: 40%;}
#con .mdl-content .media-table .t-tr .t-td.w5 {width: 50%;}


/* === 기본 미디어 테이블 - pc === */
/* 기본 미디어테이블 - pc 제목 타이틀 */
#con .mdl-content .media-table .t-tr .t-td .tit-box {display: inline-block; overflow: hidden; max-width: 30vw;}
#con .mdl-content .media-table .t-tr .t-td .tit-box .tit {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* 기본 미디어테이블 - 컨텐츠(내용) */
#con .mdl-content .media-table .t-tr .t-td .td-c {display:block;}


/* === 기본 미디어 테이블 - mobile === */
/* 기본 미디어테이블 - 모바일 제목 타이틀 버튼 */
#con .mdl-content .media-table .t-tr .t-td.mo-tit {display: none;}
#con .mdl-content .media-table .t-tr .t-td .btn-tit {display: flex; position: relative; width: 100%; height: 100%; padding: 0 30px 0 20px; border: 0; color: #000; background-color: #f7f7f7; align-items: center; cursor: pointer;}
#con .mdl-content .media-table .t-tr .t-td .btn-tit::before {content:""; position: absolute; top: calc(50% - 6px); right: 10px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #000;}
#con .mdl-content .media-table .t-tr .t-td .btn-tit > span {display:block; overflow:hidden; font-weight: 700; font-size: 1.125rem; white-space: nowrap; text-overflow: ellipsis;}
/* 기본 미디어테이블 - 모바일 타이틀 */
#con .mdl-content .media-table .t-tr .t-td .m-tit {display: none;}


/* === 기본 미디어 테이블 - 기타 === */
/* 기본 미디어테이블 - 버튼 정렬 */
#con .mdl-content .media-table .t-tr .t-td .btn {margin: 0 auto;}


/* interaction */
#con .mdl-content .media-table .t-tr .t-td .btn-tit.on::before {border-top: 0; border-bottom: 6px solid #fff;}

@media screen and (max-width: 1500px) {
    #con .mdl-content .media-table .t-tr .t-th {font-size: 1rem;}
    #con .mdl-content .media-table .t-tr .t-th,
    #con .mdl-content .media-table .t-tr .t-td {padding: 12px 10px;}
}

/* 모듈 - form list */
/* form list 1depth */
#con .mdl-content .form-list {display: block;}
#con .mdl-content .form-list .cell-row {display: flex; margin: 0 -10px; padding-bottom: 10px;}
#con .mdl-content .form-list .cell-row:last-child {padding-bottom: 0;}
#con .mdl-content .form-list .cell-row .cell {display: flex; width: 50%; padding: 0 10px; align-items: center;}
#con .mdl-content .form-list .cell-row .cell.v1 {width: 60%;}
#con .mdl-content .form-list .cell-row .cell.v2 {width: 40%;}
#con .mdl-content .form-list .cell-row .cell.full {width: 100%;}
#con .mdl-content .form-list .cell-row .cell .lc {min-width: 160px;}
#con .mdl-content .form-list .cell-row .cell .rc {flex-grow: 1; padding-right: 10px;}
#con .mdl-content .form-list .cell-row .cell .rc:last-child {padding-right: 0;}
#con .mdl-content .form-list .cell-row .cell .rc.v2 {flex-grow: 2;}
#con .mdl-content .form-list .cell-row .cell .rc .intxt {width: 100%;}
#con .mdl-content .form-list .cell-row .cell .rc .insel {width: 100%;}
#con .mdl-content .form-list .cell-row .cell .rc .textarea {width: 100%;}

/* form list 2depth */
#con .mdl-content .form-list .cell-row .cell .rc .sm-row {display: flex; margin: 0 -10px; align-items: center;}
#con .mdl-content .form-list .cell-row .cell .rc .sm-row .sm-cell {display: block; padding: 0 10px; flex-grow: 1; flex-basis: 0;}
#con .mdl-content .form-list .cell-row .cell .rc .sm-row .sm-cell.auto {flex-grow: 0;}




/* 모듈 paigination */
#con .mdl-content .paging-wrap {display: flex; overflow-x: auto; overflow-y: hidden; margin-top: 40px;}
#con .mdl-content .paging-wrap .paging {display: flex; margin: 0 auto; text-align:center;}
#con .mdl-content .paging-wrap .paging > a,
#con .mdl-content .paging-wrap .paging > strong {display: block;width: 35px; height: 35px; margin-right:10px; border: 2px solid transparent; border-radius:50%; font-weight:700; line-height: 31px; font-size: 1rem; text-align: center; color:#9e9e9e; background-color: transparent;}
#con .mdl-content .paging-wrap .paging > strong,
#con .mdl-content .paging-wrap .paging > a.active {color: #fff; border: 2px solid #DB161E; background-color:#DB161E;}
/* interaction */
#con .mdl-content .paging-wrap .paging > a {transition: border 0.3s, color 0.3s;}
#con .mdl-content .paging-wrap .paging > a:focus,
#con .mdl-content .paging-wrap .paging > a:hover {border-color: #DB161E; color: #DB161E;}

/* ====== 모듈 ====== */

.bod-table tbody tr td.name .txt {display:block; max-width: 530px; word-break: break-word;}



#paging{margin-bottom:50px;}

#paging .pagination {
  display: -ms-flexbox;
  display: flex;
  height:35px;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
  margin-top:20px;
  align-items: center;
  justify-content: center;
}
#paging .pagination > li{min-width:35px;height:100%;}

#paging .page-link {
  position: relative;
  display: block;
  height:100%;
  padding: 0.5rem 0.75rem;
  margin: 0 2px;
  line-height: 1.25;
  color: #000;
  background-color: #fff;
  border: 1px solid #dee2e6;
}


#paging .page-link[aria-label='start']::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: url(../images/sub/i_prev_arrow.svg) no-repeat center;
    transform: translate(-50%, -50%);
}
#paging .page-link[aria-label='start']::after{
   content: "";
    position: absolute;
    top: 11px;
    left: 10px;
    height: 12px;
    border-left: 2px solid #333;
}

#paging .page-link[aria-label='Previous']::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: url(../images/sub/i_prev_arrow.svg) no-repeat center;
    transform: translate(-50%, -50%);
}

#paging .page-link[aria-label='Next']::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: url(../images/sub/i_next_arrow.svg) no-repeat center;
    transform: translate(-50%, -50%);
}
#paging .page-link[aria-label='end']::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: url(../images/sub/i_next_arrow.svg) no-repeat center;
    transform: translate(-50%, -50%);
}
#paging .page-link[aria-label='end']::after{
    content: "";
    position: absolute;
    top: 11px;
    right: 9px;
    height: 12px;
    border-right: 2px solid #333;
}

#paging .page-link:hover {
  z-index: 2;
  text-decoration: none;
  color: #0aafb1;
  background-color: #fff;
  border-color: #0aafb1;
}

#paging .page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#paging .page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

#paging .page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

#paging .page-item.active .page-link {
  z-index: 1;
  color: #0aafb1;
  background-color: #fff;
  border-color: #0aafb1;
}

#paging .page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
  height:100%;
}

#paging .pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

#paging .pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

#paging .pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

#paging .pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

#paging .pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

#paging .pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

/*-------------------------------------------------------------------
@버튼 타입 2024.ksy - 추가
-------------------------------------------------------------------*/
.function .btn-round {margin-bottom: 2px; min-height: auto; line-height: 1.3;}
.btn-round {display: inline-block; min-width: 60px; padding: 2px 15px; border-radius: 100px; background-color: #fff; line-height: 22px; font-weight: 600; color: #222; text-align: center; cursor: pointer; transition: all 0.2s;}
.btn-round.type-a {background-color: #fff; color: #333a44; border: 1px solid #333a44;}

/* interaction */
.btn-round.type-a:hover,
.btn-round.type-a:focus {background-color: #333a44; color: #fff;}