<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@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; opacity: 1;}
.intxt:-ms-input-placeholder {color: #777777;}
.intxt:read-only {color: #bcbcbc;}
.intxt:disabled {border-color: #f8f8f8; background-color: #f8f8f8; color: #bcbcbc;}

/* interaction */
.intxt {transition: border 0.3s;}
.intxt:hover {border-color: #14663D;}
.intxt.type-b:hover {border-color: #304086;}
.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 {color: #bcbcbc;}

.tarea {transition: border 0.3s;}
.tarea:hover {border-color: #14663D;}
.tarea.type-b:hover {border-color: #304086;}
.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 &gt; option {color: inherit;}
.sel &gt; option:disabled {background-color: #dfdfdf;}
.sel:disabled {border-color: #f8f8f8; background-color: #f8f8f8;}

/* ------ 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 &gt; input[type="radio"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.radio &gt; span,
.radio &gt; label {display: inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #000;}
.radio &gt; label {cursor: pointer;}
.radio &gt; span::before,
.radio &gt; 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 &gt; span::after,
.radio &gt; label::after {content:""; position:absolute; top: 5px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: #ffffff; opacity: 0;}

/* focused */
.radio &gt; input[type="radio"]:focus + span::before,
.radio &gt; input[type="radio"]:focus + label::before {border-color: #14663D;}
.radio.type-b &gt; input[type="radio"]:focus + span::before,
.radio.type-b &gt; input[type="radio"]:focus + label::before {border-color: #304086;}
/* checked */
.radio &gt; input[type="radio"]:checked + span,
.radio &gt; input[type="radio"]:checked + label {color: #14663D;}
.radio &gt; input[type="radio"]:checked + span::before,
.radio &gt; input[type="radio"]:checked + label::before {border-color: #14663D; background-color: #14663D;}
.radio.type-b &gt; input[type="radio"]:checked + span,
.radio.type-b &gt; input[type="radio"]:checked + label {color: #304086;}
.radio.type-b &gt; input[type="radio"]:checked + span::before,
.radio.type-b &gt; input[type="radio"]:checked + label::before {border-color: #304086; background-color: #304086;}
.radio &gt; input[type="radio"]:checked + span::after,
.radio &gt; input[type="radio"]:checked + label::after {opacity: 1;}

.radio.aa &gt; input[type="radio"]:checked + span,
.radio.aa &gt; input[type="radio"]:checked + label {color: #F8941D;}
.radio.aa &gt; input[type="radio"]:checked + span::before,
.radio.aa &gt; input[type="radio"]:checked + label::before {border-color: #F8941D; background-color: #F8941D;}

/* disabled */
.radio &gt; input[type="radio"]:disabled + span,
.radio &gt; input[type="radio"]:disabled + label {color: #bcbcbc;}
.radio &gt; input[type="radio"]:disabled + span::before,
.radio &gt; input[type="radio"]:disabled + label::before {border-color: #bcbcbc; background-color: #dddddd;}
.radio &gt; input[type="radio"]:checked:disabled + span::before,
.radio &gt; input[type="radio"]:checked:disabled + label::before {border-color: #bcbcbc;}
.radio &gt; input[type="radio"]:checked:disabled + span::after,
.radio &gt; 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 &gt; input[type="checkbox"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.check &gt; span,
.check &gt; label {display:inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #000;}
.check &gt; label {cursor: pointer;}
.check &gt; span::before,
.check &gt; 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 &gt; span::after,
.check &gt; label::after {content:''; position:absolute; top: 4px; left: 4px; width: 12px; height: 9px; border-left: 3px solid #2F763D; border-bottom: 3px solid #2F763D; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;}
.check.type-b &gt; span::after,
.check.type-b &gt; label::after {border-color: #304086;}

/* focused */
.check &gt; input[type="checkbox"]:focus + span::before,
.check &gt; input[type="checkbox"]:focus + label::before {border-color: #14663D;}
.check.type-b &gt; input[type="checkbox"]:focus + span::before,
.check.type-b &gt; input[type="checkbox"]:focus + label::before {border-color: #304086;}
/* checked */
.check &gt; input[type="checkbox"]:checked + span::before,
.check &gt; input[type="checkbox"]:checked + label::before {border-color: #14663D;}
.check &gt; input[type="checkbox"]:checked + span,
.check &gt; input[type="checkbox"]:checked + label {color: #14663D;}
.check.type-b &gt; input[type="checkbox"]:checked + span::before,
.check.type-b &gt; input[type="checkbox"]:checked + label::before {border-color: #304086;}
.check.type-b &gt; input[type="checkbox"]:checked + span,
.check.type-b &gt; input[type="checkbox"]:checked + label {color: #304086;}
.check &gt; input[type="checkbox"]:checked + span::after,
.check &gt; input[type="checkbox"]:checked + label::after {opacity: 1;}

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

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


/* ------ label lists ------*/
.label-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.label-list &gt; li,
.label-list &gt; .label-item {display: block; padding: 8px 0; margin-right: 15px;}

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


/* ------ datepicker ------ */
/* default */
.date-box {display: inline-block;}
.date-box.dis-bk {display: block; width: 100%;}
.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 #dfdfdf; line-height: 43px; font-weight: 500; font-size: 1rem; color: #888888;}
.date-box &gt; button {float: left; width: 40px; height: 40px; border: 0; font-size: 0; background: #14663D url(../images/common/i_calender.png) no-repeat center; cursor: pointer;}
.date-box.type-b &gt; button {background-color: #304086;}

.date-box .picker {transition: border 0.3s;}
.date-box:hover .picker {border-color: #14663D;}
.date-box.type-b:hover .picker {border-color: #304086;}


/* ------ timepicker ------*/
/* default */
.timepicker {display: block; height: 45px; padding: 0 15px 0 40px; border: 1px solid #dfdfdf; 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:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex; width: 100%;}
.form-item &gt; .intxt {width: 80px; flex-basis: 0;}
.form-item &gt; .intxt,
.form-item &gt; .tarea,
.form-item &gt; .sel {margin-right: 8px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex-grow: 1;}
.form-item &gt; .intxt:last-child,
.form-item &gt; .sel:last-child,
.form-item &gt; .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:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex;}
.form.type-col .form-title {width: 160px; padding-right: 8px; flex-shrink: 0;}
.form.type-col .form-content {-webkit-box-flex: 1; -ms-flex: 1 0 auto; flex-grow: 1;}

/* form button */
.form-btn-box{margin-top:20px; text-align:center;}

@media screen and (max-width: 600px) {
    .form.type-col .form-title {width: 100px;}
}

/* wide */
.form.type-wide {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex;}
.form.type-wide .form-title {width: 160px; padding-right: 8px; flex-shrink: 0;}
.form.type-wide .form-content {display:flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex-grow: 1; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; 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: -moz-box; display: -ms-flexbox; display:flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.grid .row &gt; * {width: 100%;}

/* 자신칸수 */
.grid .col {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; 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 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; 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 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .grid .col-sm {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
    .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 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .grid .col-md {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
    .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 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .col-lg {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
    .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 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .col-xl {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
    .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 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .col-xxl {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
    .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 {background-color: #14663D; color: #ffffff;}
.label.type-b {background-color: #304086; color: #ffffff;}
.label.type-c {background-color: #DA3938; color: #ffffff;}
.label.type-d {background-color: #504795; color: #ffffff;}
.label.type-e {background-color: #0d6efd; color: #ffffff;}
.label.type-f {background-color: #6667ab; color: #ffffff;}
.label.type-wh {background-color: #f8f9fa; color: #000000;}
.label.type-bk {background-color: #000000; color: #ffffff;}
.label.type-red {background-color: #DA3938; color: #ffffff;}
.label.type-aa {background-color: #F8941D; color: #ffffff;}

/* colors - outline */
.label.outline.type-a {border-color: #14663D; background-color: #ffffff; color: #14663D;}
.label.outline.type-b {border-color: #304086; background-color: #ffffff; color: #304086;}
.label.outline.type-c {border-color: #DA3938; background-color: #ffffff; color: #DA3938;}
.label.outline.type-d {border-color: #504795; background-color: #ffffff; color: #504795;}
.label.outline.type-e {border-color: #0d6efd; background-color: #ffffff; color: #0d6efd;}
.label.outline.type-f {border-color: #6667ab; background-color: #ffffff; color: #6667ab;}
.label.outline.type-wh {border-color: #d3d4d5; background-color: #ffffff; color: #d3d4d5;}
.label.outline.type-bk {border-color: #333333; background-color: #ffffff; color: #333333;}
.label.outline.type-red {border-color: #DA3938; background-color: #ffffff; color: #DA3938;}
.label.outline.type-aa {border-color: #F8941D; background-color: #ffffff; color: #37B28D;}

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

/* disabled */
.btn:disabled {background-color: #bcbcbc !important; color: #f8f8f8 !important;}
.btn:disabled:hover,
.btn:disabled:focus {box-shadow: 0 0 6px 0 rgba(0,0,0,0);}

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

/* colors */
.btn.type-a {background-color: #14663D; color: #ffffff;}
.btn.type-b {background-color: #304086; color: #ffffff;}
.btn.type-c {background-color: #DA3938; color: #ffffff;}
.btn.type-d {background-color: #504795; color: #ffffff;}
.btn.type-e {background-color: #0d6efd; color: #ffffff;}
.btn.type-f {background-color: #6667ab; color: #ffffff;}
.btn.type-wh {background-color: #f8f9fa; color: #000000;}
.btn.type-bk {background-color: #333333; color: #ffffff;}
.btn.type-red {background-color: #DA3938; color: #ffffff;}
.btn.type-excel {background-color: #1d7145; color: #ffffff;}
.btn.type-aa {background-color: #F8941D; color: #ffffff;}
.btn.type-g {background-color: #ffffff; color: #385723; border:1px solid #385723;}
.btn.type-lg {background-color: #ffffff; color: #385723; border:1px solid #385723;}

/* outline - colors */
.btn.outline.type-a {border-color: #14663D; background-color: #ffffff; color: #14663D;}
.btn.outline.type-b {border-color: #304086; background-color: #ffffff; color: #304086;}
.btn.outline.type-c {border-color: #DA3938; background-color: #ffffff; color: #DA3938;}
.btn.outline.type-d {border-color: #504795; background-color: #ffffff; color: #504795;}
.btn.outline.type-e {border-color: #0d6efd; background-color: #ffffff; color: #0d6efd;}
.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;}
.btn.outline.type-red {border-color: #DA3938; background-color: #ffffff; color: #DA3938;}
.btn.outline.type-excel {border-color: #1d7145; background-color: #ffffff; color: #1d7145;}
.btn.outline.type-aa {border-color: #F8941D; background-color: #ffffff; color: #F8941D;}

/* 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: #000; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}
.btn.type-a:hover,
.btn.type-a:focus {background-color: #2F763D; color:#ffffff;}
.btn.type-b:hover,
.btn.type-b:focus {background-color: #2C4F9B; color:#ffffff;}
.btn.type-c:hover,
.btn.type-c:focus {background-color: #DA3938; color:#ffffff;}
.btn.type-d:hover,
.btn.type-d:focus {background-color: #5f417b; color:#ffffff;}
.btn.type-e:hover,
.btn.type-e:focus {background-color: #0b5ed7; color:#ffffff;}
.btn.type-f:hover,
.btn.type-f:focus {background-color: #55558c; 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.type-red:hover,
.btn.type-red:focus {background-color: #DA3938; color:#ffffff;}
.btn.type-excel:hover,
.btn.type-excel:focus {background-color: #1c5e3a; color:#ffffff;}
.btn.type-aa:hover,
.btn.type-aa:focus {background-color: #cc7412; color:#ffffff;}

.btn.outline:hover,
.btn.outline:focus {border-color: #14663D; background-color: #ffffff; color:#14663D;}
.btn.outline.type-a:hover,
.btn.outline.type-a:focus {border-color: #2F763D; background-color: #ffffff; color:#2F763D;}
.btn.outline.type-b:hover,
.btn.outline.type-b:focus {border-color: #2C4F9B; background-color: #ffffff; color:#2C4F9B;}
.btn.outline.type-c:hover,
.btn.outline.type-c:focus {border-color: #DA3938; background-color: #ffffff; color:#DA3938;}
.btn.outline.type-d:hover,
.btn.outline.type-d:focus {border-color: #5f417b; background-color: #ffffff; color:#5f417b;}
.btn.outline.type-e:hover,
.btn.outline.type-e:focus {border-color: #0b5ed7; background-color: #ffffff; color:#0b5ed7;}
.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;}
.btn.outline.type-red:hover,
.btn.outline.type-red:focus {border-color: #DA3938; background-color: #ffffff; color:#DA3938;}
.btn.outline.type-excel:hover,
.btn.outline.type-excel:focus {border-color: #1c5e3a; background-color: #ffffff; color:#1c5e3a;}
.btn.outline.type-aa:hover,
.btn.outline.type-aa:focus {border-color: #cc7412; background-color: #ffffff; color:#cc7412;}

/* button group */
.btn-group {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex;}
.btn-group &gt; .g-item {display: block;}

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

/* flexible */
.btn-group.flexible &gt; .g-item {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex-grow: 1;}
.btn-group.flexible &gt; .g-item .btn {display: block; width: 100%;}

/* fluid */
.btn-group.fluid {-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.btn-group.fluid &gt; .g-item {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex-grow: 1;}
.btn-group.fluid &gt; .g-item .btn {display: block; width: 100%;}

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


/*-------------------------------------------------------------------
	@ Paigination
-------------------------------------------------------------------*/
/* --- default ---*/
.paging {display: inline-block;}
.paging .paging-group {display: table; margin: 0 -4px; table-layout: fixed;}
.paging .paging-group &gt; li {display: table-cell; margin-bottom: 10px; padding: 0 4px; vertical-align: middle;}
.paging .paging-group &gt; li:last-child {padding-right: 0;}
.paging .paging-group &gt; 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 &gt; li .btn-page.first &gt; span,
.paging .paging-group &gt; li .btn-page.prev &gt; span,
.paging .paging-group &gt; li .btn-page.next &gt; span,
.paging .paging-group &gt; li .btn-page.last &gt; span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.paging .paging-group &gt; li .btn-page.first::before,
.paging .paging-group &gt; li .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 #14663D;}
.paging .paging-group &gt; li .btn-page.first::after {content:""; position: absolute; top: 8px; left: 8px; height: 12px; border-left: 2px solid #14663D}
.paging .paging-group &gt; li .btn-page.last::before,
.paging .paging-group &gt; li .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 #14663D;}
.paging .paging-group &gt; li .btn-page.last::after {content:""; position: absolute; top: 8px; right: 8px; height: 12px; border-right: 2px solid #14663D}
/* interaction */
.paging .paging-group &gt; li .btn-page {transition: border 0.3s, color 0.3s;}
.paging .paging-group &gt; li .btn-page:focus,
.paging .paging-group &gt; li .btn-page:hover,
.paging .paging-group &gt; li .btn-page.current {border-color: #14663D; color: #14663D;}

/* type-b */
.paging.type-b .paging-group &gt; li .btn-page.first::before,
.paging.type-b .paging-group &gt; li .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 #304086;}
.paging.type-b .paging-group &gt; li .btn-page.first::after {content:""; position: absolute; top: 8px; left: 8px; height: 12px; border-left: 2px solid #304086;}
.paging.type-b .paging-group &gt; li .btn-page.last::before,
.paging.type-b .paging-group &gt; li .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 #304086;}
.paging.type-b .paging-group &gt; li .btn-page.last::after {content:""; position: absolute; top: 8px; right: 8px; height: 12px; border-right: 2px solid #304086;}
.paging.type-b .paging-group &gt; li .btn-page:focus,
.paging.type-b .paging-group &gt; li .btn-page:hover,
.paging.type-b .paging-group &gt; li .btn-page.current {border-color: #304086; color: #304086;}


/* type scroll */
.paging.type-scroll {display: block; overflow-x: auto; overflow-y: hidden;}
.paging.type-scroll .paging-group {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex; margin: 0; flex-wrap: nowrap;}
.paging.type-scroll .paging-group &gt; li {display: block; margin-bottom: 0; padding-left: 0; padding-right: 8px;}


/* --- fraction --- */
.paging.fraction {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.paging.fraction .paging-number {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; 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;}


.paging-wrap {display: block; overflow-x: auto; overflow-y: hidden; height: 30px; margin-top: 30px; text-align: center;}

/*-------------------------------------------------------------------
	@text
-------------------------------------------------------------------*/
.tc-bk{color:#000000;}
.tc-wh{color:#ffffff;}
.tc-red{color:red}
.tc-01 {color: #14663D;}
.tc-02 {color: #304086;}


/* 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 &gt; li,
.bul-list &gt; .bul {display: table; word-break: break-all;}
.bul-list &gt; li:before,
.bul-list &gt; .bul:before {content:''; display: table-cell; position:relative; padding-right:5px;}

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

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

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

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

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

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

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

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


/* dot-list */
.dot-list {display: block;}
.dot-list &gt; li {position: relative; padding-left: 10px; margin-bottom: 5px;}
.dot-list &gt; li:last-child{margin-bottom: 0;}
.dot-list &gt; 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: 1px solid #000000; background-color: #fff;}
.table caption {width: 0; height: 0; font-size: 0;}
/* th */
.table tr th {padding: 8px 10px; border-bottom: 1px solid #E3E6F0; font-weight: 600; font-size: 1.0625rem; text-align: center; color: #000; background-color: #F3F5F9;}
.table tr th.depth {border-left: 1px solid #E3E6F0; background-color: #f7f7f7;}
.table tr th + th {border-left: 1px solid #E3E6F0;}
.table thead tr:nth-child(n + 2) th {border-left: 1px solid #E3E6F0;}
/* td */
.table tr td {padding: 8px 10px; border-bottom: 1px solid #E3E6F0; text-align: left;}
.table tr td.depth {border-left: 1px solid #E3E6F0;}
.table tr th + td {border-left: 1px solid #E3E6F0;}
.table tr td + td {border-left: 1px solid #E3E6F0;}

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

/* 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; position: relative;}
.scr-table-box .table-box {display: block; overflow-x: auto;}
@media screen and (max-width: 800px) {
    .scr-table-box::before {content:""; position: absolute; top: -20px; right: -10px; width: 40px; height: 40px; border-radius: 50%; background: #14663D url(../images/common/i_swipe.png) no-repeat center;}
    .scr-table-box.type-b::before {background-color: #304086;}
    .scr-table-box.mobile::before {display: none;}
    .scr-table-box.small::before {display: none;}

    .scr-table-box .table-box .table {width: 800px;}
    .scr-table-box.mobile .table-box .table {width: 100%;}
    .scr-table-box.small .table-box .table {width: 100%;}
}
@media screen and (max-width: 600px) {
    .scr-table-box.mobile::before {display: block;}
    .scr-table-box.mobile .table-box .table {width: 600px;}
}
@media screen and (max-width: 425px) {
    .scr-table-box.small::before {display: block;}
    .scr-table-box.small .table-box .table {width: 425px;}
}


/*-------------------------------------------------------------------
	@컴포넌트 - 탭박스
-------------------------------------------------------------------*/
/* Default */
.tab-box {overflow-x: auto; overflow-y: hidden; margin-bottom: 20px;}
.tab-box .list-wrap {display: block; width:100%;}
.tab-box .list-wrap::after {content:""; display: block; clear: both;}
.tab-box .list-wrap &gt; li {display:block; float: left;}
.tab-box .list-wrap &gt; li .btn-tab {display:block; position:relative; width: 100%; min-height: 40px; padding:3px 20px; border:1px solid #E3E6F0; border-left: 0; background:#ffffff; line-height: 32px; font-weight: 500; font-size: 1rem; text-align: center; color:#4e5b6f;}
.tab-box .list-wrap &gt; li:first-child .btn-tab {border-left: 1px solid #E3E6F0;}
.tab-box .list-wrap &gt; li .btn-tab.active {border-color: #14663D; background-color: #14663D; color:#ffffff;}
.tab-box .list-wrap &gt; li .btn-tab.type-b.active {border-color: #304086; background-color: #304086; color:#ffffff;}
.tab-box .list-wrap &gt; li .btn-tab &gt; span {display: inline-block; line-height: 1; vertical-align: middle;}

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

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

/* Tabbox - Media Dropdown */
.tab-box.type-drop {overflow: visible;}
.tab-box.type-drop .list-wrap {display: table; table-layout: fixed;}
.tab-box.type-drop .list-wrap::after {display: none;}
.tab-box.type-drop .list-wrap &gt; li {display: table-cell; float: none;}
.tab-box.type-drop .list-wrap &gt; li .btn-tab {min-height: 45px; padding:5px 10px; border:1px solid #E3E6F0; border-left: 0; background:#ffffff; line-height: 33px;}
.tab-box.type-drop .list-wrap &gt; li:first-child .btn-tab {border-left:1px solid #E3E6F0;}
.tab-box.type-drop .list-wrap &gt; li .btn-tab.active {border-color: #14663D; color:#fff; background: #14663D;}
.tab-box.type-drop .list-wrap &gt; li .btn-tab.type-b.active {border-color: #304086; background-color: #304086; color:#ffffff;}
.tab-box.type-drop .list-wrap &gt; li .btn-tab &gt; span {display: inline-block; line-height: 1; vertical-align: middle;}

@media screen and (max-width:750px){
    .tab-box.type-drop {display:block; overflow:hidden; position:relative; height:45px;}
    .tab-box.type-drop:after {content: ''; position: absolute; top:calc(50% - 2.5px); right:20px; z-index:10; border-top:5px solid #fff; border-right: 5px solid transparent; border-left: 5px solid transparent;}
    .tab-box.type-drop .list-wrap {display:block; overflow:hidden; position:absolute; top:0; left:0; z-index:10; width:100%; margin-right:0; padding-top:45px;}
    .tab-box.type-drop .list-wrap &gt; li {display:block; visibility: hidden; float:none; width:100%; }
    .tab-box.type-drop .list-wrap &gt; li .btn-tab {margin-right:0; padding:0; line-height:44px; border-top: 0; border-left: 1px solid #E3E6F0;}
    .tab-box.type-drop .list-wrap &gt; li .btn-tab.active {position:absolute; visibility: visible; top:0; left:0; width: 100%;}

    .tab-box.type-drop.active {overflow: initial;}
    .tab-box.type-drop.active .list-wrap {height: auto;}
    .tab-box.type-drop.active .list-wrap &gt; li {visibility: visible;}
}

/* Tabbox - Flexible */
.tab-box.flexible .list-wrap {display: table; table-layout: fixed;}
.tab-box.flexible .list-wrap::after {display: none;}
.tab-box.flexible .list-wrap &gt; li {display: table-cell; float: none;}

/* 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: 999; 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);}
.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; border-radius: 10px;}
.modal-popup .popup .pop-con .pop-head {display: flex; overflow: hidden; height: 100%; padding: 0 20px; border-radius: 15px 15px 0 0; background-color: #ffffff; color: #000000; align-items: center; justify-content: space-between; border-bottom:1px solid #dddddd;}
.modal-popup .popup .pop-con .pop-head .tit {display:block; line-height: 50px; font-weight: 700; font-size: 1.125rem; color: inherit;}
.modal-popup .popup .pop-con .pop-head .btn-close {display:block; position: relative; width: 26px; height: 26px; font-size: 0; background-color: transparent;}
.modal-popup .popup .pop-con .pop-head .btn-close &gt; span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.modal-popup .popup .pop-con .pop-head .btn-close::before,
.modal-popup .popup .pop-con .pop-head .btn-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 100%; height: 4px; background-color: #000000;}
.modal-popup .popup .pop-con .pop-head .btn-close::before {transform: translate(-50%, -50%) rotate(45deg); transform-origin: center; transition: transform-origin 0.3s;}
.modal-popup .popup .pop-con .pop-head .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.top .popup {top: 0; left:50%; transform: translateX(-50%);}
.modal-popup.bottom .popup {top: auto; bottom: 0; left:50%; transform: translateX(-50%);}

.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;}
@media screen and (max-width: 1400px) {
    .modal-popup.xxl .popup {left: 0; transform: translateY(-50%);}
    .modal-popup.xxl.top .popup,
    .modal-popup.xxl.bottom .popup {left:0; transform: none;}
}
@media screen and (max-width: 1200px) {
    .modal-popup.xl .popup {left: 0; transform: translateY(-50%);}
    .modal-popup.xl.top .popup,
    .modal-popup.xl.bottom .popup {left:0; transform: none;}
}
@media screen and (max-width: 1024px) {
    .modal-popup.lg .popup {left: 0; transform: translateY(-50%);}
    .modal-popup.lg.top .popup,
    .modal-popup.lg.bottom .popup {left:0; transform: none;}
}
@media screen and (max-width: 600px) {
    .modal-popup.sm .popup {left: 0; transform: translateY(-50%);}
    .modal-popup.sm.top .popup,
    .modal-popup.sm.bottom .popup {left:0; transform: none;}
}

/* color */
.modal-popup.type-a .popup .pop-con .pop-head {background-color: #14663D; color: #ffffff;}
.modal-popup.type-b .popup .pop-con .pop-head {background-color: #304086; color: #ffffff;}
.modal-popup.type-c .popup .pop-con .pop-head {background-color: #DA3938; color: #ffffff;}
.modal-popup.type-d .popup .pop-con .pop-head {background-color: #504795; color: #ffffff;}
.modal-popup.type-e .popup .pop-con .pop-head {background-color: #0d6efd; color: #ffffff;}
.modal-popup.type-f .popup .pop-con .pop-head {background-color: #6667ab; color: #ffffff;}

.modal-popup.type-a .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-a .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-b .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-b .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-c .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-c .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-d .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-d .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-e .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-e .popup .pop-con .pop-head .btn-close::after {background-color: #ffffff;}
.modal-popup.type-f .popup .pop-con .pop-head .btn-close::before,
.modal-popup.type-f .popup .pop-con .pop-head .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 .pop-con .pop-head .btn-close::before,
.modal-popup .popup .pop-con .pop-head .btn-close::after {transition: transform 0.3s;}
.modal-popup .popup .pop-con .pop-head .btn-close:focus::before,
.modal-popup .popup .pop-con .pop-head .btn-close:hover::before {transform: translate(-50%, -50%) rotate(30deg);}
.modal-popup .popup .pop-con .pop-head .btn-close:focus::after,
.modal-popup .popup .pop-con .pop-head .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;}

@media screen and (max-width: 800px) {
    .modal-popup .popup {padding: 0 15px;}
}
@media screen and (max-width: 600px) {
    .modal-popup .popup {padding: 0;}
}


/*-------------------------------------------------------------------
	@컴포넌트 - 텍스트 카운트
-------------------------------------------------------------------*/
/* 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;}</pre></body></html>