@charset "utf-8";
/*-------------------------------------------------------------------
	components version 1.0
    copyright (c) 2022 whisker - lee ho yeon
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
	분류그룹 : Form
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : Form > 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 {color: #bcbcbc;}
.intxt:disabled {border-color: #f8f8f8; background-color: #f8f8f8; color: #bcbcbc;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.intxt {transition: border 0.3s;}
.intxt:hover {border-color: #2A4681;}
.intxt:read-only:hover {border-color: #dfdfdf;}
.intxt:disabled:hover {border-color: #f8f8f8;}


/*-------------------------------------------------------------------
	분류그룹 : Form > 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;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.tarea {transition: border 0.3s;}
.tarea:hover {border-color: #2A4681;}
.tarea:read-only:hover {border-color: #dfdfdf;}


/*-------------------------------------------------------------------
	분류그룹 : Form > 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: #666666; background-color: #f8f8f8;}
.sel > option:disabled {background-color: #dfdfdf;}
.sel:disabled {border-color: #f8f8f8; background-color: #f8f8f8;}


/*-------------------------------------------------------------------
	분류그룹 : Form > 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"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.radio > span,
.radio > label {display: inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #666666;}
.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: #9F9F9F; opacity: 0;}

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

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* focused */
.radio > input[type="radio"]:focus + span::before,
.radio > input[type="radio"]:focus + label::before {border-color: #9F9F9F; outline: 1px solid #000000;}

/* checked */
.radio > input[type="radio"]:checked + span,
.radio > input[type="radio"]:checked + label {color: #666666;}
.radio > input[type="radio"]:checked + span::before,
.radio > input[type="radio"]:checked + label::before {border-color: #9F9F9F; background-color: #fff;}
.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: #9F9F9F; background-color: #9F9F9F;}
.radio > input[type="radio"]:checked:disabled + span::before,
.radio > input[type="radio"]:checked:disabled + label::before {border-color: #ffffff;}
.radio > input[type="radio"]:checked:disabled + span::after,
.radio > input[type="radio"]:checked:disabled + label::after {background-color: #ffffff;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .radio > span::before,
    .radio > label::before {top: 3px; left: 0; width: 16px; height: 16px;}
    .radio > span::after,
    .radio > label::after {top: 7px; left: 4px; width: 8px; height: 8px;}
}

/*-------------------------------------------------------------------
	분류그룹 : Form > 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"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.check > span,
.check > label {display:inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #666666;}
.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 #9F9F9F; border-bottom: 3px solid #9F9F9F; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;}

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

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* focused */
.check > input[type="checkbox"]:focus + span::before,
.check > input[type="checkbox"]:focus + label::before {border-color: #9F9F9F; outline: 1px solid #000000;}

/* checked */
.check > input[type="checkbox"]:checked + span::before,
.check > input[type="checkbox"]:checked + label::before {border-color: #9F9F9F;}
.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: #666666;}

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


/*-------------------------------------------------------------------
	분류그룹 : Form > radiobox, checkbox button
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.sel-badge {display: inline-block; vertical-align: middle; cursor: pointer;}
.sel-badge > input[type="checkbox"],
.sel-badge > input[type="radio"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.sel-badge > label {display: block; overflow: hidden; position: relative; padding: 8px 15px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: #ffffff; line-height: 1; font-weight: 500; font-size: 1rem; color: #666666; cursor: pointer;}
.sel-badge > label > span {display: block; position: relative;}

.sel-badge.type-a > label {background-color: #F7F8FB;}
.sel-badge.type-c > label {background: linear-gradient(180deg, #FFFFFF 0%, #EEEEEE 100%);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.sel-badge > input[type="checkbox"] + label,
.sel-badge > input[type="radio"] + label {transition: border-color 0.3s, color 0.3s;}

/* focused */
.sel-badge > input[type="checkbox"]:focus + label,
.sel-badge > input[type="radio"]:focus + label {outline: 2px solid #000000;}

/* focused & hover */
.sel-badge > input[type="checkbox"]:focus + label,
.sel-badge > input[type="checkbox"]:hover + label,
.sel-badge > input[type="radio"]:focus + label,
.sel-badge > input[type="radio"]:hover + label {border-color: #2A4681; color: #2A4681;}
.sel-badge.type-a > input[type="checkbox"]:focus + label,
.sel-badge.type-a > input[type="checkbox"]:hover + label,
.sel-badge.type-a > input[type="radio"]:focus + label,
.sel-badge.type-a > input[type="radio"]:hover + label {border-color: #2A4681; color: #2A4681;}

.sel-badge.type-b > input[type="checkbox"]:focus + label,
.sel-badge.type-b > input[type="checkbox"]:hover + label,
.sel-badge.type-b > input[type="radio"]:focus + label,
.sel-badge.type-b > input[type="radio"]:hover + label {border-color: #2A4681; color: #2A4681;}

.sel-badge.type-bk > input[type="checkbox"]:focus + label,
.sel-badge.type-bk > input[type="radio"]:focus + label {outline-color: #2A4681; color: #2A4681;}
.sel-badge.type-bk > input[type="checkbox"]:focus + label,
.sel-badge.type-bk > input[type="checkbox"]:hover + label,
.sel-badge.type-bk > input[type="radio"]:focus + label,
.sel-badge.type-bk > input[type="radio"]:hover + label {border-color: #2A4681; color: #2A4681;}

/* checked */
.sel-badge > input[type="checkbox"]:checked + label,
.sel-badge > input[type="radio"]:checked + label {border-color: #2A4681; background-color: #2A4681; color: #ffffff;}
.sel-badge.type-a > input[type="checkbox"]:checked + label,
.sel-badge.type-a > input[type="radio"]:checked + label {border-color: #2A4681; background-color: #2A4681; color: #ffffff;}
.sel-badge.type-b > input[type="checkbox"]:checked + label,
.sel-badge.type-b > input[type="radio"]:checked + label {border-color: #2A4681; background-color: #2A4681; color: #ffffff;}
.sel-badge.type-c > input[type="checkbox"]:checked + label,
.sel-badge.type-c > input[type="radio"]:checked + label {padding: 9px 16px; border: 0; background: repeating-linear-gradient(180deg, #2A4681, #2A4681 50%, #2A4681 50%, #663305 100%); color: #ffffff;}
.sel-badge.type-bk > input[type="checkbox"]:checked + label,
.sel-badge.type-bk > input[type="radio"]:checked + label {padding: 9px 16px; border: 0; background: repeating-linear-gradient(180deg, #333333, #333333 50%, #000000 50%, #000000 100%); color: #ffffff;}


/*-------------------------------------------------------------------
	분류그룹 : Form > Select Range 범위 설정 버튼
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.sel-range {display: block; position: relative;}
.sel-range .progress {display: block; overflow: hidden; position: absolute; top: 9px; left: 15px; width: calc(100% - 30px); height: 12px; background-color: #F7F8FB; box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);}
.sel-range .progress .bar {position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(86, 138, 229, 0.3);}
.sel-range .range-list {display: flex; position: relative; justify-content: space-between;}
.sel-range .range-list > li {display: block;}
.sel-range .range-list > li > input[type="radio"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.sel-range .range-list > li > label {display: block; position: relative; width: 30px; padding-bottom: calc(14px + 10px); background-color: #ffffff; color: #666666; cursor: pointer;}
.sel-range .range-list > li > label::before {content:""; display:block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e9e9e9; box-sizing: border-box;}
.sel-range .range-list > li > label > span {display: block; position: absolute; bottom: 0; left: 50%; font-weight: 500; font-size: 14px; white-space: nowrap; transform: translateX(-50%);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.sel-range .progress .bar {transition: width 0.4s;}
/* .sel-range .range-list > li > input[type="radio"]:focus + label {outline: 2px dashed #333333;} */
/* .sel-range .range-list > li > input[type="radio"]:focus + label > span {outline: 2px dashed #333333;} */
.sel-range .range-list > li > input[type="radio"]:checked + label {border-color: #2A4681; background-color: #ffffff; color: #000000;}
.sel-range .range-list > li > input[type="radio"]:checked + label::before {border: 6px solid #2A4681;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .sel-range {overflow-x: auto; overflow-y: hidden; padding: 5px 0;}
    .sel-range::-webkit-scrollbar {height: 5px; box-sizing: content-box;}
    .sel-range::-webkit-scrollbar-thumb {height: 30%; border-radius: 10px; background: #9e9e9e;}
    .sel-range::-webkit-scrollbar-track {padding: 0 5px; border-radius: 10px; background: #e4e4e4;}
    .sel-range .progress {display: none;}
    .sel-range .range-list > li {padding: 0 10px;}
    .sel-range .range-list > li > label {width: auto; height: auto; padding-top: 30px; padding-bottom: 0;}
    .sel-range .range-list > li > label > span {position: static; transform: translateX(0);}
    .sel-range .range-list > li > label::before {position: absolute; top: 0; left: calc(50% - 12px); width: 24px; height: 24px;}
}


/*-------------------------------------------------------------------
	분류그룹 : Form > Select Range 범위 설정 버튼
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.sync-dropbox {display: block; overflow: hidden; position: relative; height: 40px;}
.sync-dropbox .btn-sfd {display: block; overflow: hidden; width: 100%; padding: 0 34px 0 15px; height: 40px; border: 1px solid #dfdfdf; background: #fff url(../images/common/i_sel.svg) no-repeat center right 10px; background-size: 14px; font-weight: 500; font-size: 1rem; color: #888888; white-space: nowrap; text-overflow: ellipsis;}
.sync-dropbox .list {display: block; position: absolute; top: 100%; left: 0; z-index: 2; width: 100%; padding: 5px 10px; border-width: 0 1px 1px; border-style: solid; border-color: #dfdfdf;}
.sync-dropbox .list > li {display: block; padding: 5px 0;}
.sync-dropbox .list > li input[type="checkbox"],
.sync-dropbox .list > li input[type="radio"],
.sync-dropbox .list > li .item {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.sync-dropbox .list > li .item + span,
.sync-dropbox .list > li .item + label {display: block; position: relative; padding-left: 30px; line-height: 20px; font-weight: 500; font-size: 1rem; color: #000000; word-break: break-all; cursor: pointer;}
.sync-dropbox .list > li .item + span::before,
.sync-dropbox .list > li .item + label::before {content:''; position:absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #dfdfdf; background-color: #fff; box-sizing: border-box;}
.sync-dropbox .list > li .item + span::after,
.sync-dropbox .list > li .item + label::after {content:''; position:absolute; top: 4px; left: 4px; width: 12px; height: 9px; border-left: 3px solid #2A4681; border-bottom: 3px solid #2A4681; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.sync-dropbox.active {overflow: visible; height: auto;}
/* focused */
.sync-dropbox .list > li .item:focus-visible + span,
.sync-dropbox .list > li .item:focus-visible + label {outline: 3px solid #000000;}
.sync-dropbox .list > li .item:focus-visible + span::before,
.sync-dropbox .list > li .item:focus-visible + label::before {border-color: #2A4681; outline: 3px solid #000000;}
.sync-dropbox .list > li .item:focus:not(:focus-visible) + span,
.sync-dropbox .list > li .item:focus:not(:focus-visible) + label {outline: 0;}
.sync-dropbox .list > li .item:focus:not(:focus-visible) + span::before,
.sync-dropbox .list > li .item:focus:not(:focus-visible) + label::before {outline: 0;}

/* checked */
.sync-dropbox .list > li .item:checked + span,
.sync-dropbox .list > li .item:checked + label {color: #2A4681;}
.sync-dropbox .list > li .item:checked + span::before,
.sync-dropbox .list > li .item:checked + label::before {border-color: #2A4681; background-color: #fff;}
.sync-dropbox .list > li .item:checked + span::after,
.sync-dropbox .list > li .item:checked + label::after {opacity: 1;}

/* disabled */
.sync-dropbox .list > li .item:disabled + span,
.sync-dropbox .list > li .item:disabled + label {color: #bcbcbc;}
.sync-dropbox .list > li .item:disabled + span::before,
.sync-dropbox .list > li .item:disabled + label::before {border-color: #bcbcbc; background-color: #dddddd;}
.sync-dropbox .list > li .item:checked:disabled + span::before,
.sync-dropbox .list > li .item:checked:disabled + label::before {border-color: #bcbcbc;}
.sync-dropbox .list > li .item:checked:disabled + span::after,
.sync-dropbox .list > li .item:checked:disabled + label::after {background-color: #bcbcbc;}


/*-------------------------------------------------------------------
	분류그룹 : Form > 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 > 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;}


/*-------------------------------------------------------------------
	분류그룹 : Form > datepicker
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.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 #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: #2A4681 url(../images/common/i_calender.png) no-repeat center; cursor: pointer;}

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


/*-------------------------------------------------------------------
	분류그룹 : Form > timepicker
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.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;}


/*-------------------------------------------------------------------
    분류그룹 : Form Layout
    속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    
    .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 > .intxt {width: 80px; flex-basis: 0;}
.form-item > .intxt,
.form-item > .tarea,
.form-item > .sel {margin-right: 8px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex-grow: 1;}
.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: #2A4681;}
.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;}
@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 > * {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%;}

/* xs */
@media screen and (min-width: 426px) {
    .grid .col-xs-auto, .grid .col-xs-1, .grid .col-xs-2, .grid .col-xs-3, .grid .col-xs-4, .grid .col-xs-5, .grid .col-xs-6,
    .grid .col-xs-7, .grid .col-xs-8, .grid .col-xs-9, .grid .col-xs-10, .grid .col-xs-11, .grid .col-xs-12 {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .grid .col-xs-auto {width: auto; -webkit-box-flex: 0; -ms-flex: 0 0 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    .grid .col-xs {width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex-grow: 1; flex-shrink: 0; flex-basis: 0;}
    .grid .col-xs-1 {width:8.3333%;}
    .grid .col-xs-2 {width:16.6666%;}
    .grid .col-xs-3 {width:25%;}
    .grid .col-xs-4 {width:33.3333%;}
    .grid .col-xs-5 {width:41.6667%;}
    .grid .col-xs-6 {width:50%;}
    .grid .col-xs-7 {width:58.3333%;}
    .grid .col-xs-8 {width:66.6667%;}
    .grid .col-xs-9 {width:75%;}
    .grid .col-xs-10 {width:83.3334%;}
    .grid .col-xs-11 {width:91.6667%;}
    .grid .col-xs-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-auto {width: auto; -webkit-box-flex: 0; -ms-flex: 0 0 0; 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-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-auto {width: auto; -webkit-box-flex: 0; -ms-flex: 0 0 0; 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-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-auto {width: auto; -webkit-box-flex: 0; -ms-flex: 0 0 0; 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-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-auto {width: auto; -webkit-box-flex: 0; -ms-flex: 0 0 0; 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-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-auto {width: auto; -webkit-box-flex: 0; -ms-flex: 0 0 0; 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-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, .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, .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, .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, .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, .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;}

.grid .row.gutter {margin: 0 -5px;}
.grid .row.gutter > .col-auto, .grid .row.gutter > .col, .grid .row.gutter > .col-1, .grid .row.gutter > .col-2, .grid .row.gutter > .col-3, .grid .row.gutter > .col-4, .grid .row.gutter > .col-5,
.grid .row.gutter > .col-6, .grid .row.gutter > .col-7, .grid .row.gutter > .col-8, .grid .row.gutter > .col-9, .grid .row.gutter > .col-10, .grid .row.gutter > .col-11, .grid .row.gutter > .col-12,
.grid .row.gutter > .col-sm-auto, .grid .row.gutter > .col-sm, .grid .row.gutter > .col-sm-1, .grid .row.gutter > .col-sm-2, .grid .row.gutter > .col-sm-3, .grid .row.gutter > .col-sm-4, .grid .row.gutter > .col-sm-5,
.grid .row.gutter > .col-sm-6, .grid .row.gutter > .col-sm-7, .grid .row.gutter > .col-sm-8, .grid .row.gutter > .col-sm-9, .grid .row.gutter > .col-sm-10, .grid .row.gutter > .col-sm-11, .grid .row.gutter > .col-sm-12,
.grid .row.gutter > .col-md-auto, .grid .row.gutter > .col-md, .grid .row.gutter > .col-md-1, .grid .row.gutter > .col-md-2, .grid .row.gutter > .col-md-3, .grid .row.gutter > .col-md-4, .grid .row.gutter > .col-md-5,
.grid .row.gutter > .col-md-6, .grid .row.gutter > .col-md-7, .grid .row.gutter > .col-md-8, .grid .row.gutter > .col-md-9, .grid .row.gutter > .col-md-10, .grid .row.gutter > .col-md-11, .grid .row.gutter > .col-md-12,
.grid .row.gutter > .col-lg-auto, .grid .row.gutter > .col-lg, .grid .row.gutter > .col-lg-1, .grid .row.gutter > .col-lg-2, .grid .row.gutter > .col-lg-3, .grid .row.gutter > .col-lg-4, .grid .row.gutter > .col-lg-5,
.grid .row.gutter > .col-lg-6, .grid .row.gutter > .col-lg-7, .grid .row.gutter > .col-lg-8, .grid .row.gutter > .col-lg-9, .grid .row.gutter > .col-lg-10, .grid .row.gutter > .col-lg-11, .grid .row.gutter > .col-lg-12,
.grid .row.gutter > .col-xl-auto, .grid .row.gutter > .col-xl, .grid .row.gutter > .col-xl-1, .grid .row.gutter > .col-xl-2, .grid .row.gutter > .col-xl-3, .grid .row.gutter > .col-xl-4, .grid .row.gutter > .col-xl-5,
.grid .row.gutter > .col-xl-6, .grid .row.gutter > .col-xl-7, .grid .row.gutter > .col-xl-8, .grid .row.gutter > .col-xl-9, .grid .row.gutter > .col-xl-10, .grid .row.gutter > .col-xl-11, .grid .row.gutter > .col-xl-12,
.grid .row.gutter > .col-xxl-auto, .grid .row.gutter > .col-xxl, .grid .row.gutter > .col-xxl-1, .grid .row.gutter > .col-xxl-2, .grid .row.gutter > .col-xxl-3, .grid .row.gutter > .col-xxl-4, .grid .row.gutter > .col-xxl-5,
.grid .row.gutter > .col-xxl-6, .grid .row.gutter > .col-xxl-7, .grid .row.gutter > .col-xxl-8, .grid .row.gutter > .col-xxl-9, .grid .row.gutter > .col-xxl-10, .grid .row.gutter > .col-xxl-11, .grid .row.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, .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, .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, .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, .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, .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;}
/* gutter - bottom 0 */
.grid .row.g-0 > .col-auto, .grid .row.g-0 > .col, .grid .row.g-0 > .col-1, .grid .row.g-0 > .col-2, .grid .row.g-0 > .col-3, .grid .row.g-0 > .col-4, .grid .row.g-0 > .col-5,
.grid .row.g-0 > .col-6, .grid .row.g-0 > .col-7, .grid .row.g-0 > .col-8, .grid .row.g-0 > .col-9, .grid .row.g-0 > .col-10, .grid .row.g-0 > .col-11, .grid .row.g-0 > .col-12,
.grid .row.g-0 > .col-sm-auto, .grid .row.g-0 > .col-sm, .grid .row.g-0 > .col-sm-1, .grid .row.g-0 > .col-sm-2, .grid .row.g-0 > .col-sm-3, .grid .row.g-0 > .col-sm-4, .grid .row.g-0 > .col-sm-5,
.grid .row.g-0 > .col-sm-6, .grid .row.g-0 > .col-sm-7, .grid .row.g-0 > .col-sm-8, .grid .row.g-0 > .col-sm-9, .grid .row.g-0 > .col-sm-10, .grid .row.g-0 > .col-sm-11, .grid .row.g-0 > .col-sm-12,
.grid .row.g-0 > .col-md-auto, .grid .row.g-0 > .col-md, .grid .row.g-0 > .col-md-1, .grid .row.g-0 > .col-md-2, .grid .row.g-0 > .col-md-3, .grid .row.g-0 > .col-md-4, .grid .row.g-0 > .col-md-5,
.grid .row.g-0 > .col-md-6, .grid .row.g-0 > .col-md-7, .grid .row.g-0 > .col-md-8, .grid .row.g-0 > .col-md-9, .grid .row.g-0 > .col-md-10, .grid .row.g-0 > .col-md-11, .grid .row.g-0 > .col-md-12,
.grid .row.g-0 > .col-lg-auto, .grid .row.g-0 > .col-lg, .grid .row.g-0 > .col-lg-1, .grid .row.g-0 > .col-lg-2, .grid .row.g-0 > .col-lg-3, .grid .row.g-0 > .col-lg-4, .grid .row.g-0 > .col-lg-5,
.grid .row.g-0 > .col-lg-6, .grid .row.g-0 > .col-lg-7, .grid .row.g-0 > .col-lg-8, .grid .row.g-0 > .col-lg-9, .grid .row.g-0 > .col-lg-10, .grid .row.g-0 > .col-lg-11, .grid .row.g-0 > .col-lg-12,
.grid .row.g-0 > .col-xl-auto, .grid .row.g-0 > .col-xl, .grid .row.g-0 > .col-xl-1, .grid .row.g-0 > .col-xl-2, .grid .row.g-0 > .col-xl-3, .grid .row.g-0 > .col-xl-4, .grid .row.g-0 > .col-xl-5,
.grid .row.g-0 > .col-xl-6, .grid .row.g-0 > .col-xl-7, .grid .row.g-0 > .col-xl-8, .grid .row.g-0 > .col-xl-9, .grid .row.g-0 > .col-xl-10, .grid .row.g-0 > .col-xl-11, .grid .row.g-0 > .col-xl-12,
.grid .row.g-0 > .col-xxl-auto, .grid .row.g-0 > .col-xxl, .grid .row.g-0 > .col-xxl-1, .grid .row.g-0 > .col-xxl-2, .grid .row.g-0 > .col-xxl-3, .grid .row.g-0 > .col-xxl-4, .grid .row.g-0 > .col-xxl-5,
.grid .row.g-0 > .col-xxl-6, .grid .row.g-0 > .col-xxl-7, .grid .row.g-0 > .col-xxl-8, .grid .row.g-0 > .col-xxl-9, .grid .row.g-0 > .col-xxl-10, .grid .row.g-0 > .col-xxl-11, .grid .row.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
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.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: #2A4681;}
.label.type-b {color: #ffffff; background-color: #19B5AA;}
.label.type-c {color: #ffffff; background-color: #dc3545;}
.label.type-d {color: #000000; background-color: #ffc107;}
.label.type-e {color: #ffffff; background-color: #02AFFC;}
.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: #2A4681; color: #2A4681; background-color: #ffffff;}
.label.outline.type-b {border-color: #19B5AA; color: #19B5AA; 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: #02AFFC; color: #02AFFC; 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
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.btn {display: inline-block; min-height: 30px; padding: 8px 20px; border-radius: 4px; background-color: #f0f0f0; line-height: 30px; font-weight: 600; font-size: 1rem; color: #000000; 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;}
/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .btn {padding: 4px 15px;}
}
@media screen and (max-width: 480px) {
    .btn {padding: 2px 15px; border-radius: 0;}
}

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

/* colors */
.btn.type-a {background-color: #2A4681; color: #ffffff;}
.btn.type-b {background-color: #19B5AA; color: #ffffff;}
.btn.type-c {background-color: #dc3545; color: #ffffff;}
.btn.type-d {background-color: #0361D6; color: #ffffff;}
.btn.type-e {background-color: #02AFFC; color: #ffffff;}
.btn.type-f {background-color: #656565; color: #ffffff;}
.btn.type-g {background-color: #7092BE; color: #ffffff;}
.btn.type-wh {background-color: #f8f9fa; color: #000000;}
.btn.type-bk {background-color: #111111; color: #ffffff;}

/* outline - colors */
.btn.outline.type-a {border-color: #2A4681; background-color: #ffffff; color: #2A4681;}
.btn.outline.type-b {border-color: #19B5AA; background-color: #ffffff; color: #19B5AA;}
.btn.outline.type-c {border-color: #dc3545; background-color: #ffffff; color: #dc3545;}
.btn.outline.type-d {border-color: #0361D6; background-color: #ffffff; color: #0361D6;}
.btn.outline.type-e {border-color: #02AFFC; background-color: #ffffff; color: #02AFFC;}
.btn.outline.type-f {border-color: #656565; background-color: #ffffff; color: #656565;}
.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: #2A4681; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}
.btn:focus {outline: 3px solid #000000;}
.btn.type-a:hover,
.btn.type-a:focus {background-color: #193061; color:#ffffff;}
.btn.type-b:hover,
.btn.type-b:focus {background-color: #169c93; color:#ffffff;}
.btn.type-c:hover,
.btn.type-c:focus {background-color: #bb2d3b; color:#ffffff;}
.btn.type-d:hover,
.btn.type-d:focus {background-color: #0350af; color:#ffffff;}
.btn.type-e:hover,
.btn.type-e:focus {background-color: #319bf2; color:#ffffff;}
.btn.type-f:hover,
.btn.type-f:focus {background-color: #555454; 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: #333333; color:#ffffff;}

.btn.outline:hover,
.btn.outline:focus {border-color: #2A4681; background-color: #ffffff; color:#2A4681;}
.btn.outline:focus {outline: 3px solid #000000;}
.btn.outline.type-a:hover,
.btn.outline.type-a:focus {border-color: #0b5ed7; 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: #0350af; background-color: #ffffff; color:#0350af;}
.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:-webkit-flex; display: -moz-box; display: -ms-flexbox; 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 {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex-grow: 1;}
.btn-group.flexible > .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 > .g-item {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex-grow: 1;}
.btn-group.fluid > .g-item .btn {display: block; width: 100%;}




/*-------------------------------------------------------------------
	분류그룹 : Sorting Button
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.sorting-list {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; 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: #2A4681;}




/*-------------------------------------------------------------------
	분류그룹 : Paigination
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.paging {display: block;}
.paging .paging-group {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex; margin: 0 -4px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; 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 {font-size: 0;}
.paging .paging-group > li .btn-page.first::before,
.paging .paging-group > 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 #2A4681;}
.paging .paging-group > li .btn-page.first::after {content:""; position: absolute; top: 8px; left: 8px; height: 12px; border-left: 2px solid #2A4681}
.paging .paging-group > li .btn-page.last::before,
.paging .paging-group > 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 #2A4681;}
.paging .paging-group > li .btn-page.last::after {content:""; position: absolute; top: 8px; right: 8px; height: 12px; border-right: 2px solid #2A4681}

/* 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; -webkit-box-lines: single; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.paging.type-scroll .paging-group > li {display: block; margin-bottom: 0; padding-left: 0; padding-right: 8px;}

/*-------------------------------------------------------------------
	@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: #2A4681; color: #2A4681;}


/*-------------------------------------------------------------------
	분류그룹 : Paigination > 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: #2A4681;}
.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 #2A4681;}
.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 #2A4681;}
/* 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 color
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.tc-bk{color:#000000;}
.tc-wh{color:#ffffff;}
.tc-red{color:red}
.tc-01 {color: #2A4681;}
.tc-02 {color: #15b3d6;}




/*-------------------------------------------------------------------
	분류그룹 : 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;}
}




/*-------------------------------------------------------------------
	분류그룹 : lists > bul-list
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.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; white-space: nowrap;}

/* 특수문자 */
.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:'하)';}


/*-------------------------------------------------------------------
	분류그룹 : lists > 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;}




/*-------------------------------------------------------------------
	분류그룹 : Table
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.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;}
.table tr th.slash {background-image: url('../images/common/i_slash.svg');}
.table tr th.slash .txt:first-child {text-align: left;}
.table tr th.slash .txt:last-child {text-align: right;}
.table tr th.backslash {background-image: url('../images/common/i_slash_back.svg');}
.table tr th.backslash .txt:first-child {text-align: right;}
.table tr th.backslash .txt:last-child {text-align: left;}
/* td */
.table tr td {padding: 10px 12px; 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; position: relative;}
.scr-table-box .table-box {display: block; overflow-x: auto;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@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: #2A4681 url(../images/common/i_swipe.png) no-repeat center;}
    .scr-table-box.mobile::before {display: none;}
    .scr-table-box.small::before {display: none;}

    .scr-table-box .table-box .table {width: 1200px;}
    .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;}
}




/*-------------------------------------------------------------------
	분류그룹 : 탭박스
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.tab-box {overflow-x: auto; overflow-y: hidden; margin-bottom: 20px;}
.tab-box .list-wrap {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; 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; height:100%; padding:3px 20px; border:1px solid #dfdfdf; border-left: 0; background:#ffffff; font-weight: 500; font-size: 1rem; text-align: center; color:#4e5b6f; cursor: pointer;}
.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 {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex-grow: 1;}

/* Tabbox - Type-a */
.tab-box.type-a {overflow-x: auto; overflow-y: hidden;}
.tab-box.type-a .list-wrap {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; 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 {padding: 10px; border-radius: 10px; background:#ECEFF2;}
.tab-box.type-drop .list-wrap > li {margin-right: 3px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex-grow: 1;}
.tab-box.type-drop .list-wrap > li:last-child {margin-right: 0;}
.tab-box.type-drop .list-wrap > li .btn-tab {min-height: 45px; padding:5px 10px; border: none; border-radius: 10px; background:#ECEFF2;}
.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;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.tab-box.type-drop .list-wrap > li .btn-tab {transition: color 0.3s , background-color 0.3s;}
.tab-box.type-drop .list-wrap > li .btn-tab:hover,
.tab-box.type-drop .list-wrap > li .btn-tab.active {color:#fff; background-color: #2C94E9;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:800px){
    .tab-box.type-drop {display:block; overflow:hidden; position:relative; z-index:1; height:45px;}
    .tab-box.type-drop:after {content: ''; position: absolute; top:20px; right:20px; z-index:99; 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:99; width:100%; height: 45px; margin-right:0; padding:45px 0 0; border-radius: 5px;}
    .tab-box.type-drop .list-wrap > li {display:block; visibility: hidden; float:none; width:100%; }
    .tab-box.type-drop .list-wrap > li .btn-tab {margin-right:0; padding:0; border-radius: 5px;}
    .tab-box.type-drop .list-wrap > li .btn-tab.active {position:absolute; visibility: visible; top:0; left:0; width: 100%; height: 45px;}

    .tab-box.type-drop.active {overflow: initial;}
    .tab-box.type-drop.active .list-wrap {height: auto;}
    .tab-box.type-drop.active .list-wrap > li {visibility: visible;}
}
@media screen and (max-width:480px){
    .tab-box.type-drop .list-wrap {border-radius: 0;}
    .tab-box.type-drop .list-wrap > li .btn-tab {border-radius: 0;}
}

 


/*-------------------------------------------------------------------
	분류그룹 : 모달 (modal)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.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.2);}
.modal-popup .pop-bg.no {background-color: transparent;}
.modal-popup .popup {position: absolute; top: calc(50% - 0.5px); left: calc(50% - 0.5px); max-width: 800px; width: 100%; padding: 0 20px; transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));}
.modal-popup .popup .pop-con {display: block; overflow: hidden; border-radius: 10px;}
.modal-popup .popup .pop-con .pop-head {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; display:flex; overflow: hidden; height: 50px; padding: 0 20px; border-radius: 15px 15px 0 0; background-color: #ffffff; color: #000000; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: flex-end; -ms-flex-pack: justify; justify-content: flex-end;}
.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: relative; width: 26px; height: 26px; 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: 4px; background-color: #000000;}
.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.type-a .popup .pop-con .pop-head {background-color: #2A4681; color: #ffffff;}
.modal-popup.type-b .popup .pop-con .pop-head {background-color: #19B5AA; 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: #02AFFC; color: #ffffff;}
.modal-popup.type-f .popup .pop-con .pop-head {background-color: #6667ab; color: #ffffff;}

.modal-popup.type-a .popup .pop-con .btn-close::before,
.modal-popup.type-a .popup .pop-con .btn-close::after {background-color: #ffffff;}
.modal-popup.type-b .popup .pop-con .btn-close::before,
.modal-popup.type-b .popup .pop-con .btn-close::after {background-color: #ffffff;}
.modal-popup.type-c .popup .pop-con .btn-close::before,
.modal-popup.type-c .popup .pop-con .btn-close::after {background-color: #ffffff;}
.modal-popup.type-d .popup .pop-con .btn-close::before,
.modal-popup.type-d .popup .pop-con .btn-close::after {background-color: #000000;}
.modal-popup.type-e .popup .pop-con .btn-close::before,
.modal-popup.type-e .popup .pop-con .btn-close::after {background-color: #ffffff;}
.modal-popup.type-f .popup .pop-con .btn-close::before,
.modal-popup.type-f .popup .pop-con .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.2);}
.modal-popup .popup .pop-con .btn-close::before,
.modal-popup .popup .pop-con .btn-close::after {transition: transform 0.3s;}
.modal-popup .popup .pop-con .btn-close:focus::before,
.modal-popup .popup .pop-con .btn-close:hover::before {transform: translate(-50%, -50%) rotate(30deg);}
.modal-popup .popup .pop-con .btn-close:focus::after,
.modal-popup .popup .pop-con .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
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .modal-popup .popup {padding: 0 15px;}
}
@media screen and (max-width: 600px) {
    .modal-popup .popup {padding: 0;}
}




/*-------------------------------------------------------------------
	분류그룹 : 텍스트 카운트 (Text Count)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.count-box {display: block;}
.count-box .count-info {display:-webkit-flex; display: -moz-box; display: -ms-flexbox; 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: #2A4681;}




/*-------------------------------------------------------------------
	분류그룹 : 첨부파일
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.attach-file-wrap .attach-file-box {display: block; position: relative; width:100%; height: 40px; padding-left: 120px;}
.attach-file-wrap .attach-file-box .upload-name {display:block; padding: 0 15px; width:100%; height: 100%; border: 1px solid #e9e9e9; background-color: #f8f8f8;}
.attach-file-wrap .attach-file-box .fileupload {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.attach-file-wrap .attach-file-box .attach-label {display: block; position: absolute; top: 0; left: 0; width:120px; background-color:#2A4681; line-height: 40px; font-weight: 600; text-align:center; color:#fff; cursor: pointer;}

.attach-file-wrap .file-box-wrap {display: block;}
.attach-file-wrap .file-box-wrap .file-box {display: none; position: relative; margin: 10px -5px 0; border-top: 1px solid transparent;}
.attach-file-wrap .file-box-wrap .file-box::before {content:''; position: absolute; top: 0; left: 5px; width: calc(100% - 10px); height: 1px; background-color: #e9e9e9;}
.attach-file-wrap .file-box-wrap .file-box::after {content:''; display: block; clear: both;}
.attach-file-wrap .file-box-wrap .file-box.on {display: block;}
.attach-file-wrap .file-box-wrap .file-box .close-item {display:inline-block; position:relative; vertical-align: middle; width: 16px; height: 16px; margin-left: 5px; background-color: #2A4681; background-image:url(../images/board_i_close.png); line-height: 16px; vertical-align: middle;}
.attach-file-wrap .file-box-wrap .file-box .close-item::before {content:""; position: absolute; top: calc(50% - 1px); left: calc(50% - 6px); width: 12px; height: 2px; transform: rotate(45deg); background-color: #fff;}
.attach-file-wrap .file-box-wrap .file-box .close-item::after {content:""; position: absolute; top: calc(50% - 1px); left: calc(50% - 6px); width: 12px; height: 2px; transform: rotate(-45deg); background-color: #fff;}
.attach-file-wrap .file-box-wrap .file-box .close-item > span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.attach-file-wrap .file-box-wrap .file-box .file-item .name {display: inline-block; overflow: hidden; max-width: calc(100% - 26px); font-size: 14px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;}
.attach-file-wrap .file-box-wrap .file-box .c_pointer{cursor:pointer;}
/* 일반 파일 */
.attach-file-wrap .file-box-wrap .file-nor-box .file-item {padding: 10px 5px; line-height: 16px;}
/* 이미지 파일 */
.attach-file-wrap .file-box-wrap .file-img-box {padding-top: 5px;}
.attach-file-wrap .file-box-wrap .file-img-box .file-item {float: left; width: 20%; padding: 5px;}
.attach-file-wrap .file-box-wrap .file-img-box .file-item:last-child {border: none;}
.attach-file-wrap .file-box-wrap .file-img-box .file-item .img-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; overflow:hidden; height: 120px; margin-bottom: 1rem; border: 1px solid #e9e9e9; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.attach-file-wrap .file-box-wrap .file-img-box .file-item .img-box > img {display:block; max-width: none; height: 100%;}
.attach-file-wrap .file-box-wrap .file-img-box .file-item .name {display: inline-block; overflow: hidden; max-width: calc(100% - 26px); font-size: 14px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.attach-file-wrap .attach-file-box .attach-label {transition: background 0.3s;}
.attach-file-wrap .attach-file-box .fileupload:hover + .attach-label,
.attach-file-wrap .attach-file-box .fileupload:focus + .attach-label {background-color:#0b5ed7;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	.attach-file-wrap .file-box-wrap .file-img-box .file-item {width: 25%;}
}
@media screen and (max-width: 800px) {
	.attach-file-wrap .file-box-wrap .file-img-box .file-item {width: 33.333%;}
}
@media screen and (max-width: 425px) {
	.attach-file-wrap .file-box-wrap .file-img-box .file-item {width: 50%;}
}




/*-------------------------------------------------------------------
	분류그룹 : 아코디언 메뉴
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.accordion-wrap {border-top: 1px solid #e9e9e9;}
.accordion-wrap .acr-depth {display: block;}
.accordion-wrap .acr-depth li {display: block; position: relative;}
.accordion-wrap .acr-depth li > .acr-menu {display: flex; height: 40px; padding: 0 15px; border-bottom: 1px solid #e9e9e9; font-weight: 600; font-size: 1rem; color: #000000; align-items: center;}
.accordion-wrap .acr-depth li > .acr-menu > span {display: block; width: 100%; position: relative; padding-right: 20px;}
.accordion-wrap .acr-depth li > .acr-depth {display: none; margin-left: 15px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.accordion-wrap .acr-depth li > .acr-menu {transition: background 0.3s, color 0.3s;}
.accordion-wrap .acr-depth li > .acr-menu:focus {position: relative; outline-color: transparent;}
.accordion-wrap .acr-depth li > .acr-menu:focus::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px dashed #000000; box-sizing: border-box;}
.accordion-wrap .acr-depth li > .acr-menu:focus,
.accordion-wrap .acr-depth li > .acr-menu:hover {color: #2A4681;}
.accordion-wrap .acr-depth li > .acr-menu.active {background-color: #2A4681; color: #ffffff;}

.accordion-wrap .acr-depth li > .acr-menu.fold > span::before {content:""; position: absolute; top: calc(50% - 1px); right: 0; width: 14px; height: 2px; background-color: #000000;}
.accordion-wrap .acr-depth li > .acr-menu.fold > span::after {content:""; position: absolute; top: calc(50% - 7px); right: 6px; width: 2px; height: 14px; background-color: #000000;}
.accordion-wrap .acr-depth li > .acr-menu.fold.active > span::before {background-color: #ffffff;}
.accordion-wrap .acr-depth li > .acr-menu.fold.active > span::after {display: none;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .accordion-wrap .acr-depth li > .acr-menu {padding: 0 10px;}
}




/*-------------------------------------------------------------------
	분류그룹 : 순차정렬 폼 (Sort Form)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.sort-form-wrap {display: block;}
.sort-form-wrap .sort-form-con {display: block;}
.sort-form-wrap .sort-form-con .sort-form-list {display: block;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item:last-child {margin-bottom: 0;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-1 {display: block; flex-grow: 1; padding-right: 10px;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-1 .cell-intxt {display: block; min-width:0; width: 100%; height: 40px; padding: 2px 15px; border: 1px solid #dfdfdf; line-height: 34px; font-weight: 400; font-size: 1rem; color: #000000;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-1 .cell-intxt::placeholder {color: #777777;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-1 .cell-intxt:read-only {color: #bcbcbc;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-1 .cell-intxt:disabled {border-color: #f8f8f8; background-color: #f8f8f8; color: #bcbcbc;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-1 textarea.cell-intxt {resize: vertical;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-shrink: 0;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort {display: block; position: relative; height: 40px; padding: 4px 20px; background-color: #f0f0f0; line-height: 40px; font-weight: 600; font-size: 1rem; color: #000000; text-align: center; cursor: pointer;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort > span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort::before {content:""; position: absolute; top: calc(50% - 1px); left: 30%; width: 40%; height: 2px; background-color: #ffffff;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.btn-add {border-radius: 4px 0 0 4px; background-color: #6667ab;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.btn-add::after {content:""; position: absolute; top: 30%; left: calc(50% - 1px); width: 2px; height: 40%; background-color: #ffffff;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.btn-del {border-radius: 0 4px 4px 0; background-color: #4a4a4a;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-drag {display: block; position: relative; width: 40px; height: 40px; margin-left: 10px; border-radius: 4px; background-color: #4a4a4a; cursor: move;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-drag::before {content:""; display: block; position: absolute; top: calc(50% - 12px); left: calc(50% - 6px); border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #ffffff;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-drag::after {content:""; display: block; position: absolute; top: calc(50% + 6px); left: calc(50% - 6px); border-width: 6px 6px 0 6px; border-style: solid; border-color: #ffffff transparent transparent;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort {box-shadow: 0 0 6px 0 rgba(0,0,0,0); transition: background 0.3s, color 0.3s, box-shadow 0.3s;}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.type-add:hover,
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.type-add:focus {color:#ffffff; background-color: #2A4681; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.type-del:hover,
.sort-form-wrap .sort-form-con .sort-form-list .list-item .cell-2 .btn-sort.type-del:focus {background-color: #0b5ed7; color:#ffffff;}






/*-------------------------------------------------------------------
	분류그룹 : 모듈
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* 모듈 - 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;}

@media screen and (max-width: 1024px) {
    #con .mdl-content .mdl-form {padding: 15px;}
}
@media screen and (max-width: 320px) {
    #con .mdl-content .mdl-form {padding: 10px;}
}


/* 모듈 - 게시판 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%;}

@media screen and (max-width:600px) {
    #con .mdl-content .mdl-board-head {display: block;}
    #con .mdl-content .mdl-board-head .info-wrap > li {flex-grow: 1;}
    #con .mdl-content .mdl-board-head .info-wrap > li:nth-child(n + 2) {max-width: 50%; flex-basis: 50%;}
}


/* 모듈 - 게시판 */
/* ====== 기본 미디어 테이블 ====== */
#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;}
}
@media screen and (max-width: 1024px) {
    /* 기본 미디어테이블 */
    #con .mdl-content .media-table {display: block; position: relative;}
    #con .mdl-content .media-table .thead {display: none;}
    #con .mdl-content .media-table .tbody {display: block;}

    /* 기본 미디어테이블 - tr */
    #con .mdl-content .media-table .t-tr {display:flex; overflow: hidden; position: relative; height: 50px; padding-top: 50px; border-left: 1px solid #e9e9e9; flex-wrap: wrap;}
    #con .mdl-content .media-table .t-tr.on {height: auto; overflow: visible;}
    /* 기본 미디어테이블 - td */
    #con .mdl-content .media-table .t-tr .t-td {display: flex; width:100%; padding: 10px; border-right: 1px solid #e9e9e9; text-align: left; align-items: center;}
    /* 기본 미디어테이블 - td 길이 초기화 */
    #con .mdl-content .media-table .t-tr .t-td.w1,
    #con .mdl-content .media-table .t-tr .t-td.w2,
    #con .mdl-content .media-table .t-tr .t-td.w3,
    #con .mdl-content .media-table .t-tr .t-td.w4,
    #con .mdl-content .media-table .t-tr .t-td.w5 {width: 100%;}
    /* 기본 미디어테이블 - 모바일 td 길이 */
    #con .mdl-content .media-table .t-tr .t-td.m-w50 {width: 50%;}


    /* 기본 미디어테이블 - pc 제목 타이틀 & 컨텐츠 */
    #con .mdl-content .media-table .t-tr .t-td .tit-box {max-width: unset;}
    #con .mdl-content .media-table .t-tr .t-td .tit-box .tit {white-space: normal; word-break: break-all;}

    /* 기본 미디어테이블 - 모바일 타이틀 */
    #con .mdl-content .media-table .t-tr .t-td .m-tit {display: block; width: 150px; padding-right: 10px; text-align: left; word-break: break-all; flex-shrink: 0;}
    /* 기본 미디어테이블 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table .t-tr .t-td.mo-tit {display: block; overflow: hidden; position: absolute; top: 0; left: 0; width:100%; height: 50px; padding: 0;}
    #con .mdl-content .media-table .t-tr.on .t-td.mo-tit {border-color: #830509;}
    #con .mdl-content .media-table .t-tr .t-td .btn-tit.on {color: #fff; background-color: #830509;}
}
@media screen and (max-width: 800px) {
    #con .mdl-content .media-table .t-tr .t-td .m-tit {width: 130px;}
}
@media screen and (max-width: 600px) {
    /* 기본 미디어테이블 - 컨텐츠(내용) */
    #con .mdl-content .media-table .t-tr .t-td .td-c {flex-grow: 1;}


    /* 기본 미디어테이블 - 모바일 타이틀 */
    #con .mdl-content .media-table .t-tr .t-td .m-tit {width: 100px;}
    /* 기본 미디어테이블 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table .t-tr .t-td .btn-tit {padding: 0 30px 0 10px;}


    /* 기본 미디어테이블 - 버튼 정렬 */
    #con .mdl-content .media-table .t-tr .t-td .btn {width: 100%;}

    /* 기본 미디어테이블 - 모바일 td 길이 */
	#con .mdl-content .media-table .t-tr .t-td.m-w50 {width: 100%;}
}
@media screen and (max-width: 425px) {
    /* 기본 미디어 테이블 - tr, th, td */
    #con .mdl-content .media-table .t-tr .t-td {display: block;}
    /* 기본 미디어테이블 - 모바일 타이틀 */
    #con .mdl-content .media-table .t-tr .t-td .m-tit {width: auto; margin-bottom: 10px;}
}
@media screen and (max-width: 320px) {
    /* 기본 미디어 테이블 - tr, th, td */
	#con .mdl-content .media-table .t-tr {display: block;}
    
}




/* ====== 미디어 테이블_bigsize ====== */
#con .mdl-content .media-table.big {}
#con .mdl-content .media-table.big .t-tr .t-th {padding: 10px;}
#con .mdl-content .media-table.big .t-tr .t-td {padding: 10px;}
@media screen and (max-width: 1200px) {
   /* 미디어 테이블_bigsize */
   #con .mdl-content .media-table.big {display: block; position: relative;}
   #con .mdl-content .media-table.big .thead {display: none;}
   #con .mdl-content .media-table.big .tbody {display: block;}

   /* 미디어 테이블_bigsize - tr */
   #con .mdl-content .media-table.big .t-tr {display:flex; overflow: hidden; position: relative; height: 50px; padding-top: 50px; border-left: 1px solid #e9e9e9; flex-wrap: wrap;}
   #con .mdl-content .media-table.big .t-tr.on {height: auto; overflow: visible;}
   /* 미디어 테이블_bigsize - td */
   #con .mdl-content .media-table.big .t-tr .t-td {display: flex; width:100%; padding: 10px; border-right: 1px solid #e9e9e9; text-align: left; align-items: center;}
   /* 미디어 테이블_bigsize - td 길이 초기화 */
   #con .mdl-content .media-table.big .t-tr .t-td.w1,
   #con .mdl-content .media-table.big .t-tr .t-td.w2,
   #con .mdl-content .media-table.big .t-tr .t-td.w3,
   #con .mdl-content .media-table.big .t-tr .t-td.w4,
   #con .mdl-content .media-table.big .t-tr .t-td.w5 {width: 100%;}
   /* 미디어 테이블_bigsize - 모바일 td 길이 */
   #con .mdl-content .media-table.big .t-tr .t-td.m-w50 {width: 50%;}


   /* 미디어 테이블_bigsize - pc 제목 타이틀 & 컨텐츠 */
   #con .mdl-content .media-table.big .t-tr .t-td .tit-box {max-width: unset;}
   #con .mdl-content .media-table.big .t-tr .t-td .tit-box .tit {white-space: normal; word-break: break-all;}

   /* 미디어 테이블_bigsize - 모바일 타이틀 */
   #con .mdl-content .media-table.big .t-tr .t-td .m-tit {display: block; width: 150px; padding-right:10px; text-align: left; word-break: break-all; flex-shrink: 0;}
   /* 미디어 테이블_bigsize - 모바일 제목 타이틀 버튼 */
   #con .mdl-content .media-table.big .t-tr .t-td.mo-tit {display: block; overflow: hidden; position: absolute; top: 0; left: 0; width:100%; height: 50px; padding: 0;}
   #con .mdl-content .media-table.big .t-tr.on .t-td.mo-tit {border-color: #830509;}
   #con .mdl-content .media-table.big .t-tr .t-td .btn-tit.on {color: #fff; background-color: #830509;}
}
@media screen and (max-width: 800px) {
    /* 미디어 테이블_bigsize - 모바일 타이틀 */
    #con .mdl-content .media-table.big .t-tr .t-td .m-tit {width: 130px;}
}
@media screen and (max-width: 600px) {
    /* 미디어 테이블_bigsize - 모바일 td 길이 */
	#con .mdl-content .media-table.big .t-tr .t-td.m-w50 {width: 100%;}
}





/* ====== 미디어 테이블_small ====== */
#con .mdl-content .media-table.small {}
@media screen and (max-width: 1024px) {
    #con .mdl-content .media-table.small {display: table;}
    #con .mdl-content .media-table.small .thead {display: table-header-group;}
    #con .mdl-content .media-table.small .tbody {display: table-row-group;}
    /* 미디어 테이블_small - tr, th, td */
    #con .mdl-content .media-table.small .t-tr {display: table-row; overflow: visible;}
    #con .mdl-content .media-table.small .t-tr .t-td {display: table-cell; width: auto; padding: 10px; border-right: 0; text-align: center;}
    /* 미디어 테이블_small - 테이블 열 길이 */
    #con .mdl-content .media-table.small .t-tr .t-td.w1 {width: 10%;}
    #con .mdl-content .media-table.small .t-tr .t-td.w2 {width: 20%;}
    #con .mdl-content .media-table.small .t-tr .t-td.w3 {width: 30%;}
    #con .mdl-content .media-table.small .t-tr .t-td.w4 {width: 40%;}
    #con .mdl-content .media-table.small .t-tr .t-td.w5 {width: 50%;}


    /* === 미디어 테이블_small - pc === */
    /* 미디어 테이블_small - pc 제목 타이틀 */
    #con .mdl-content .media-table.small .t-tr .t-td .tit-box {max-width: 30vw;}
    #con .mdl-content .media-table.small .t-tr .t-td .tit-box .tit {white-space: nowrap;}

    /* === 미디어 테이블_small - mobile === */
    /* 미디어 테이블_small - 모바일 타이틀 */
    #con .mdl-content .media-table.small .t-tr .t-td .m-tit {display: none;}
    /* 미디어 테이블_small - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.small .t-tr .t-td.mo-tit {display: none; padding: 0;}
}
@media screen and (max-width: 800px) {
    #con .mdl-content .media-table.small {display: block;}
    #con .mdl-content .media-table.small .thead {display: none;}
    #con .mdl-content .media-table.small .tbody {display: block;}
    /* 미디어 테이블_small - tr, th, td */
    #con .mdl-content .media-table.small .t-tr {display: flex; overflow: hidden;}
    #con .mdl-content .media-table.small .t-tr .t-td {display: block; width: 100%; border-right: 1px solid #e9e9e9; text-align: left;}
    /* 미디어 테이블_small - 테이블 열 길이 */
    #con .mdl-content .media-table.small .t-tr .t-td.w1,
    #con .mdl-content .media-table.small .t-tr .t-td.w2,
    #con .mdl-content .media-table.small .t-tr .t-td.w3,
    #con .mdl-content .media-table.small .t-tr .t-td.w4,
    #con .mdl-content .media-table.small .t-tr .t-td.w5 {width: 100%;}


    /* === 미디어 테이블_small - pc === */
    /* 미디어 테이블_small - pc 제목 타이틀 */
    #con .mdl-content .media-table.small .t-tr .t-td .tit-box {max-width: unset;}
    #con .mdl-content .media-table.small .t-tr .t-td .tit-box .tit {white-space: normal;}

    /* === 미디어 테이블_small - mobile === */
    /* 미디어 테이블_small - 모바일 타이틀 */
    #con .mdl-content .media-table.small .t-tr .t-td .m-tit {display: block;}
    /* 미디어 테이블_small - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.small .t-tr .t-td.mo-tit {display: block;}
}




/* ====== 체크박스 미디어 테이블_기본 ====== */
#con .mdl-content .media-table.ck-table {}
@media screen and (max-width: 1024px) {
    /* 체크박스 미디어 테이블_기본 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.ck-table .t-tr .t-td.mo-tit {left: 50px; width: calc(100% - 50px);}
    /* 체크박스 미디어 테이블_기본 - head 체크박스 */
    #con .mdl-content .media-table.ck-table .t-tr .t-td.ck{display: flex; position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-left: 0; align-items: center; justify-content: center}
}
@media screen and (max-width: 600px) {
    /* 체크박스 미디어 테이블_기본 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.ck-table .t-tr .t-td.mo-tit {left:40px; width: calc(100% - 40px);}
    /* 체크박스 미디어 테이블_기본 - head 체크박스 */
    #con .mdl-content .media-table.ck-table .t-tr .t-td.ck {width: 40px; padding: 5px;}
}

/* ====== 체크박스 미디어 테이블_빅사이즈 ====== */
#con .mdl-content .media-table.big.ck-table {}
@media screen and (max-width: 1200px) {
    /* 체크박스 미디어 테이블_빅사이즈 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.big.ck-table .t-tr .t-td.mo-tit {left: 50px; width: calc(100% - 50px);}
    /* 체크박스 미디어 테이블_빅사이즈 - head 체크박스 */
    #con .mdl-content .media-table.big.ck-table .t-tr .t-td.ck{display: flex; position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-left: 0; align-items: center; justify-content: center}
}
@media screen and (max-width: 600px) {
    /* 체크박스 미디어 테이블_기본 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.big.ck-table .t-tr .t-td.mo-tit {left:40px; width: calc(100% - 40px);}
    /* 체크박스 미디어 테이블_기본 - head 체크박스 */
    #con .mdl-content .media-table.big.ck-table .t-tr .t-td.ck {width: 40px; padding: 5px;}
}

/* ====== 체크박스 미디어 테이블_스몰사이즈 ====== */
#con .mdl-content .media-table.small.ck-table {}
@media screen and (max-width: 1024px) {
    /* 체크박스 미디어 테이블_스몰사이즈 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.small.ck-table .t-tr .t-td.mo-tit {left: 0; width: 100%;}
    /* 체크박스 미디어 테이블_스몰사이즈 - head 체크박스 */
    #con .mdl-content .media-table.small.ck-table .t-tr .t-td.ck{display: block; position: static; width: auto; height: auto;}
}
@media screen and (max-width: 800px) {
    /* 체크박스 미디어 테이블_스몰사이즈 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.small.ck-table .t-tr .t-td.mo-tit {left: 50px; width: calc(100% - 50px);}
    /* 체크박스 미디어 테이블_스몰사이즈 - head 체크박스 */
    #con .mdl-content .media-table.small.ck-table .t-tr .t-td.ck{display: flex; position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-left: 0;}
}
@media screen and (max-width: 600px) {
    /* 체크박스 미디어 테이블_스몰사이즈 - 모바일 제목 타이틀 버튼 */
    #con .mdl-content .media-table.small.ck-table .t-tr .t-td.mo-tit {left:40px; width: calc(100% - 40px);}
    /* 체크박스 미디어 테이블_스몰사이즈 - head 체크박스 */
    #con .mdl-content .media-table.small.ck-table .t-tr .t-td.ck {width: 40px; padding: 5px;}
}







/* 모듈 - 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;}
@media screen and (max-width: 1024px) {
    #con .mdl-content .form-list .cell-row .cell .lc {min-width: 120px;}
}
@media screen and (max-width: 800px) {
    #con .mdl-content .form-list .cell-row {margin: 0 -5px;}
    #con .mdl-content .form-list .cell-row .cell {display: block; padding: 0 5px;}
    #con .mdl-content .form-list .cell-row .cell .lc {margin-bottom: 5px;}
    #con .mdl-content .form-list .cell-row .cell .rc {padding-bottom: 10px; padding-right: 0;}
    #con .mdl-content .form-list .cell-row .cell .rc:last-child {padding-bottom: 0;}


    #con .mdl-content .form-list .cell-row .cell .rc .sm-row {margin: 0 -5px;}
    #con .mdl-content .form-list .cell-row .cell .rc .sm-row .sm-cell {padding: 0 5px;}
}
@media screen and (max-width: 600px) {
    #con .mdl-content .form-list .cell-row {display: block; margin: 0;}
    #con .mdl-content .form-list .cell-row .cell {width: auto; padding: 0; margin-bottom: 10px;}
    #con .mdl-content .form-list .cell-row .cell:last-child {margin-bottom: 0;}
    #con .mdl-content .form-list .cell-row .cell.v1 {width: auto;}
    #con .mdl-content .form-list .cell-row .cell.v2 {width: auto;}

    #con .mdl-content .form-list .cell-row .cell .rc .sm-row {display: block;}
}





/* 모듈 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;}
@media screen and (max-width:1024px) {
    #con .mdl-content {margin-top: 40px;}
}
/* ====== 모듈 ====== */