@charset "UTF-8";

/*-------------------------------------------------------------------
	분류그룹 : 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : 공통 > hashtag list
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .hash-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -5px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#content .hash-wrap > li {padding: 5px;}
#content .hash-wrap > li .label.badge {font-size:0.875rem;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
    #content .hash-wrap > li .label.badge {font-size: 12px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > 검색 필터
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.total-filter {border:1px solid #e9e9e9;}
.total-filter .filter-head {display: block;}
.total-filter .filter-head .btn-filter {display: block; width:100%; border-top:2px solid #000000; border-bottom:1px solid #e9e9e9; background-color:#F7F8FB; text-align: left;}
.total-filter .filter-head .btn-filter .form-item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position:relative; width:100%; height:100%; padding-right:35px; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.total-filter .filter-head .btn-filter .form-item::after {content:''; position:absolute; top:calc(50% - 4px); right: 20px; width:8px; height:8px; border-right:2px solid #000; border-bottom:2px solid #000000; transform: rotate(45deg) translateY(-50%);}
.total-filter .filter-head .btn-filter .form-cell {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding:20px; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.total-filter .filter-head .btn-filter .form-cell .cell-tit {display: block; min-width:170px; padding-right:15px; font-weight:700; font-size:1.125rem; color:#000000; flex-shrink: 0;}
.total-filter .filter-head .btn-filter .form-cell .cell-sub-tit {font-weight:500; font-size:1rem; color:#666666;}

.total-filter .filter-body .slide-body {display: none;}
.total-filter .filter-body .form-item {border-bottom:1px solid #e9e9e9; background-color:#ffffff; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} 
.total-filter .filter-body .form-item .item-tit {width:170px; padding:10px 20px; flex-shrink:0;}
.total-filter .filter-body .form-item .item-tit .tit {display: block; font-weight:600; font-size:1rem; color:#000000; word-break:break-word;}
.total-filter .filter-body .form-item .item-con {width:100%; padding:10px 20px 0 10px;}
.total-filter .filter-body .form-item .item-con .intxt,
.total-filter .filter-body .form-item .item-con .sel {display:block; width:100%;}


/* 버튼 리스트  */
.total-filter .result-wrap {padding:20px;}
.total-filter .result-wrap .btn-group {-webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.total-filter .result-wrap .btn-group .btn {min-width: 100px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.total-filter .filter-head .form-item::after {transition:transform 0.3s;}
.total-filter .filter-head.active .form-item::after { transform:rotate(-135deg);}

.total-filter .filter-head .btn-filter .form-item {transition:background 0.3s;}
.total-filter .filter-head .btn-filter .form-item::after {transition:transform 0.1s;}
.total-filter .filter-head .btn-filter.active .form-item::after {transform:rotate(-135deg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
    .total-filter .filter-head .btn-filter .form-item {padding-right: 30px;}
    .total-filter .filter-head .btn-filter .form-item::after {right: 15px;}
    .total-filter .filter-head .btn-filter .form-cell {display: block; padding: 15px;}
    .total-filter .filter-head .btn-filter .form-cell .cell-tit {margin-bottom:5px;}

    .total-filter .filter-body .form-item {display: block; width:100%;}
    .total-filter .filter-body .form-item .item-tit {width:100%; padding: 10px 15px;}
    .total-filter .filter-body .form-item .item-con {padding:0 15px 5px;}

    .total-filter .result-wrap {padding: 15px;}
}
@media screen and (max-width:600px) {
    .total-filter .result-wrap .btn-group > .g-item {width:100%;}
    .total-filter .result-wrap .btn-group > .g-item .btn {width:100%;}

    .total-filter .filter-head .btn-filter .form-item::after {width:6px; height:6px;}
    .total-filter .filter-head .btn-filter .form-cell .cell-tit {margin-bottom:0;}
    .total-filter .filter-head .btn-filter .form-cell .cell-sub-tit {display: none;}
}



/*-------------------------------------------------------------------
	분류그룹 : 공통 > 검색 필터 > 키워드
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.total-filter .keyword-area {display: block; position: relative; padding: 15px 50px; border-width: 0 1px; border-style: solid; border-color: #e9e9e9; background-color: #F7F8FB;}
.total-filter .keyword-area .slide-nav {display: block;}
.total-filter .keyword-area .slide-nav .btn-nav {display: block; position: absolute; top: 15px; z-index: 3; width: 30px; height: calc(100% - 30px); border-radius: 4px; border: 1px solid transparent; background-color: transparent;}
.total-filter .keyword-area .slide-nav .btn-nav::before {content:""; position: absolute; top: calc(50% - 6px); left: calc(50% - 3px); border-style: solid;}
.total-filter .keyword-area .slide-nav .btn-nav.btn-prev {left: 20px;}
.total-filter .keyword-area .slide-nav .btn-nav.btn-prev::before {border-width: 6px 6px 6px 0; border-color: transparent #000000 transparent transparent;}
.total-filter .keyword-area .slide-nav .btn-nav.btn-next {right: 20px;}
.total-filter .keyword-area .slide-nav .btn-nav.btn-next::before {border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #000000;}
.total-filter .keyword-area .keyword-slide {display: block; overflow: hidden;}
.total-filter .keyword-area .keyword-slide .swiper-wrapper .swiper-slide {width: auto; max-width: 100%;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.total-filter .keyword-area .slide-nav .btn-nav {transition: border 0.4s, background 0.4s;}
.total-filter .keyword-area .slide-nav .btn-nav:focus,
.total-filter .keyword-area .slide-nav .btn-nav:hover {border-color: #e9e9e9; background-color: #ffffff;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	.total-filter .keyword-area {padding: 15px 40px;}
	.total-filter .keyword-area .slide-nav .btn-nav.btn-prev {left: 10px;}
	.total-filter .keyword-area .slide-nav .btn-nav.btn-next {right: 10px;}
}
@media screen and (max-width:475px) {
	.total-filter .keyword-area {padding: 10px 30px;}
	.total-filter .keyword-area .slide-nav .btn-nav {top: 10px; width: 20px; height: calc(100% - 20px);}
	.total-filter .keyword-area .slide-nav .btn-nav.btn-prev {left: 10px;}
	.total-filter .keyword-area .slide-nav .btn-nav.btn-next {right: 10px;}
	.total-filter .keyword-area .keyword-slide .swiper-wrapper .swiper-slide .btn-badge {padding: 8px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > 검색 필터
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.filter-form {border-top: 2px solid #000000;}
.filter-form .filter-body {display: block; border-width: 0 1px; border-style: solid; border-color: #e9e9e9;}
.filter-form .filter-body .form-item {border-bottom:1px solid #e9e9e9; background-color:#ffffff; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} 
.filter-form .filter-body .form-item .item-tit {width:170px; padding:10px 20px; flex-shrink:0;}
.filter-form .filter-body .form-item .item-tit .tit {display: block; font-weight:600; font-size:1rem; color:#000000; word-break:break-word;}
.filter-form .filter-body .form-item .item-con {width:100%; padding:10px 20px 0 10px;}
.filter-form .filter-body .form-item .item-con .intxt,
.filter-form .filter-body .form-item .item-con .sel {display:block; width:100%;}

/* 버튼 리스트  */
.filter-form .result-wrap {padding:20px;}
.filter-form .result-wrap .btn-group {-webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.filter-form .result-wrap .btn-group .btn {min-width: 100px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
    .filter-form .filter-body .form-item {display: block; width:100%;}
    .filter-form .filter-body .form-item .item-tit {width:100%; padding: 10px 15px;}
    .filter-form .filter-body .form-item .item-con {padding:0 15px 5px;}

    .filter-form .result-wrap {padding: 15px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 공통 > search-bar
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .mdl-srch-wrap {padding-top:50px; padding-bottom:10px;}
#content .mdl-srch-wrap .srch-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#content .mdl-srch-wrap .srch-box .srch-util {}
#content .mdl-srch-wrap .srch-box .srch-util .total {position:relative; padding-left:35px;}
#content .mdl-srch-wrap .srch-box .srch-util .total::before {content:''; position:absolute; top:50%; left:0; width:30px; height:30px; border-radius:50%; background-color:#AD733E; transform: translateY(-50%);}
#content .mdl-srch-wrap .srch-box .srch-util .total::after {content:''; position:absolute; top:50%; left:calc(15px - 5.5px); width:11px; height:16px; background-image:url(../images/sub/i_sharp.svg); background-repeat: no-repeat; transform: translateY(-50%);}
#content .mdl-srch-wrap .srch-box .srch-util .total > strong {color:#AD733E;}
#content .mdl-srch-wrap .srch-box .srch-bar {display: block; padding-left:10px;}
#content .mdl-srch-wrap .srch-box .srch-bar .btn {display: block; width: 100%; min-width: 120px; padding: 4px 8px; white-space: nowrap;}
#content .mdl-srch-wrap .srch-box .srch-bar .sel {width:100%;}

#content .mdl-srch-wrap .srch-box .srch-bar .btn-toggle-list {color: #ffffff;}
#content .mdl-srch-wrap .srch-box .srch-bar .btn-toggle-list[data-list-type="list"] {background-color: #AD733E;}
#content .mdl-srch-wrap .srch-box .srch-bar .btn-toggle-list[data-list-type="gallery"] {background-color: #003863;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    #content .mdl-srch-wrap .srch-box .srch-bar .btn {min-width: 0;}
}
@media screen and (max-width: 800px) {
    #content .mdl-srch-wrap .srch-box {display: block;}
    #content .mdl-srch-wrap .srch-box .srch-bar {display: block; margin-top:15px; padding-left: 0;}
}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > Paigination
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.paging {display: block; margin-top: 50px; overflow-x: auto; overflow-y: hidden; text-align: center;}
.paging::-webkit-scrollbar {width: 5px; height: 5px; box-sizing: content-box;}
.paging::-webkit-scrollbar-thumb {height: 30%; border-radius: 5px; background: #01216D;}
.paging::-webkit-scrollbar-track {padding: 0 5px; border-radius: 5px; background: #e4e4e4;}
.paging .paging-group {display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex; margin: 0; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.paging .paging-group > li {display: block;}
.paging .paging-group > li .btn-page {display: block; position: relative; min-width: 30px; height: 30px; margin: 0 5px 10px; padding: 0 5px; border: 1px solid #e9e9e9; border-radius: 20px; background-color: #ffffff; line-height: 28px; font-weight: 500; font-size: 14px; color: #003863; text-align: center;}
.paging .paging-group > li .btn-page::before {content:""; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #01216D; box-sizing: border-box;}
.paging .paging-group > li .btn-page > span {display: inline-block; vertical-align: middle;}

.paging .paging-group > li .btn-page.first > span,
.paging .paging-group > li .btn-page.prev > span,
.paging .paging-group > li .btn-page.next > span,
.paging .paging-group > li .btn-page.last > span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.paging .paging-group > li .btn-page.first {background-image: url(../images/board/i_first.svg); background-repeat: no-repeat; background-position: center;}
.paging .paging-group > li .btn-page.prev {background-image: url(../images/board/i_prev.svg); background-repeat: no-repeat; background-position: center;}
.paging .paging-group > li .btn-page.next {background-image: url(../images/board/i_next.svg); background-repeat: no-repeat; background-position: center;}
.paging .paging-group > li .btn-page.last {background-image: url(../images/board/i_last.svg); background-repeat: no-repeat; background-position: center;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
.paging .paging-group > li .btn-page {transition: border 0.3s, background 0.3s, color 0.3s;}
.paging .paging-group > li .btn-page:focus {outline: none; border-color: #01216D;}
.paging .paging-group > li .btn-page:hover,
.paging .paging-group > li .btn-page.current {border-color: #01216D; background-color: #01216D; color: #ffffff;}
.paging .paging-group > li .btn-page:focus::before {display: block;}
.paging .paging-group > li .btn-page:focus:hover::before {top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 2px dashed #ffffff;}
.paging .paging-group > li .btn-page:focus:not(:focus-visible)::before {display: none;}

.paging .paging-group > li .btn-page.first:hover {background-image: url(../images/board/i_first_on.svg);}
.paging .paging-group > li .btn-page.prev:hover {background-image: url(../images/board/i_prev_on.svg);}
.paging .paging-group > li .btn-page.next:hover {background-image: url(../images/board/i_next_on.svg);}
.paging .paging-group > li .btn-page.last:hover {background-image: url(../images/board/i_last_on.svg);}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .paging {margin-top: 35px;}
    .paging .paging-group > li .btn-page {min-width: 28px; height: 28px; margin: 0 2.5px 5px; line-height: 26px; font-size: 13px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > SNS 공유
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.share-wrap {display: block;}
.share-wrap .btn-share {display: block; width:40px; height:40px; border-radius: 50%; background-color:#000000; background-image:url(../images/sub/i_share.svg); background-repeat: no-repeat; background-position:center;}

.share-wrap .share-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute;}
.share-wrap .share-box .box-wrap {display: block;}
.share-wrap .share-box .box-wrap .list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.share-wrap .share-box .box-wrap .list > li {display: block; margin-right: 10px;}
.share-wrap .share-box .box-wrap .list > li:last-child {margin-right: 0;}
.share-wrap .share-box .box-wrap .list > li .btn-sns {display: block; width: 30px; height: 30px; border-radius: 50%; background-repeat: no-repeat; background-position: center;}
.share-wrap .share-box .box-wrap .list > li .btn-sns.sns-facebook {background-color: #4C69BA; background-image: url(../images/common/i_sns_facebook.svg);}
.share-wrap .share-box .box-wrap .list > li .btn-sns.sns-twitter {background-color: #4FA5EA; background-image: url(../images/common/i_sns_twitter.svg);}
.share-wrap .share-box .box-wrap .list > li .btn-sns.sns-blog {background-color: #01C73C; background-image: url(../images/common/i_sns_blog.svg);}

.share-wrap .url-box {display: block; text-align: center;}
.share-wrap .url-box .tit {display: block; font-weight: 600; font-size: 1rem; color: #ffffff;}
.share-wrap .url-box .copybox {display: block;}
.share-wrap .url-box .copybox .intxt {display: block; width: 100%;}
.share-wrap .url-box .copybox .btn-sns-copy {display: inline-block; height: 40px; padding: 0 20px; background-color: #000000; line-height: 40px; font-weight: 600; font-size: 1rem; color: #ffffff;}
.share-wrap .url-box .copybox .btn-sns-copy > span {display: inline-block; position: relative; padding-right: 30px; line-height: 1; vertical-align: middle;}
.share-wrap .url-box .copybox .btn-sns-copy > span::before {content:""; position: absolute; top: calc(50% - 10px); right: 0; width: 20px; height: 20px; background: url(../images/common/i_copy.svg) no-repeat center;}

.share-wrap .btn-share-close {display: block; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 5px; background-color: transparent;}
.share-wrap .btn-share-close::before {content:""; position: absolute; top: 50%; left: 50%; width: 80%; height: 2px; background-color: #ffffff; transform: translate(-50%, -50%) rotate(45deg);}
.share-wrap .btn-share-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 80%; height: 2px; background-color: #ffffff; transform: translate(-50%, -50%) rotate(-45deg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.share-wrap .share-box {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s;}
.share-wrap .share-box.active {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.3s;}

.share-wrap .btn-share {transition: background 0.3s;}
.share-wrap .btn-share:focus,
.share-wrap .btn-share:hover,
.share-wrap .btn-share.active {background-color: #20A089;}

.share-wrap .share-box .btn-share-close {transition: background 0.3s;}
.share-wrap .share-box .btn-share-close:focus,
.share-wrap .share-box .btn-share-close:hover {background-color: #ffffff;}
.share-wrap .share-box .btn-share-close::before,
.share-wrap .share-box .btn-share-close::after {transition: background 0.3s;}
.share-wrap .share-box .btn-share-close:focus::before,
.share-wrap .share-box .btn-share-close:hover::before,
.share-wrap .share-box .btn-share-close:focus::after,
.share-wrap .share-box .btn-share-close:hover::after {background-color: #003863;}

.share-wrap .share-box .box-wrap .url-box .copybox .btn-sns-copy {transition: background 0.3s;}
.share-wrap .share-box .box-wrap .url-box .copybox .btn-sns-copy:focus,
.share-wrap .share-box .box-wrap .url-box .copybox .btn-sns-copy:hover {background-color: #003863;}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > SNS 공유 > 목록형 (기본)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.share-wrap .share-box[data-type="list"] {top: 0; left: 0; width: 100%; height: 100%; padding: 20px; background-color: rgba(86, 138, 229, 0.95); -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.share-wrap .share-box[data-type="list"] .box-wrap {display: block;}
.share-wrap .share-box[data-type="list"] .box-wrap .list {margin-bottom: 30px; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.share-wrap .share-box[data-type="list"] .box-wrap .url-box {display: block;}
.share-wrap .share-box[data-type="list"] .box-wrap .url-box .tit {margin-bottom: 10px;}
.share-wrap .share-box[data-type="list"] .box-wrap .url-box .copybox {display: block;}
.share-wrap .share-box[data-type="list"] .box-wrap .url-box .copybox .btn-sns-copy {margin-top: 10px;}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > SNS 공유 > 목록형 (wide)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.share-wrap .share-box[data-type="wide"] {top: 0; left: 0; width: 100%; height: 100%; padding: 20px; background-color: rgba(86, 138, 229, 0.95); -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.share-wrap .share-box[data-type="wide"] .box-wrap .list {margin-bottom: 10px; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.share-wrap .share-box[data-type="wide"] .box-wrap .url-box {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;}
.share-wrap .share-box[data-type="wide"] .box-wrap .url-box .tit {margin-bottom: 0; margin-right: 20px; flex-shrink: 0;}
.share-wrap .share-box[data-type="wide"] .box-wrap .url-box .copybox {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.share-wrap .share-box[data-type="wide"] .box-wrap .url-box .copybox .btn-sns-copy {margin-top: 0;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:425px) {
	.share-wrap .share-box[data-type="wide"] .box-wrap .url-box .copybox {display: block;}
	.share-wrap .share-box[data-type="wide"] .box-wrap .url-box .copybox .btn-sns-copy {display: block; width: 100%;}
}


/*-------------------------------------------------------------------
	분류그룹 : 공통 > SNS 공유 > 모달형
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.share-wrap .share-box[data-type="modal"] {z-index: 10; padding: 25px 15px 15px; background-color: #ffffff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);}
.share-wrap .share-box[data-type="modal"] .box-wrap .list {margin-bottom: 10px;}
.share-wrap .share-box[data-type="modal"] .box-wrap .url-box {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;}
.share-wrap .share-box[data-type="modal"] .box-wrap .url-box .tit {margin-right: 10px; color: #000000; white-space: nowrap;}
.share-wrap .share-box[data-type="modal"] .box-wrap .url-box .copybox {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.share-wrap .share-box[data-type="modal"] .box-wrap .url-box .copybox .intxt {min-width: 120px;}
.share-wrap .share-box[data-type="modal"] .box-wrap .url-box .copybox .btn-sns-copy {padding: 0 8px;}
.share-wrap .share-box[data-type="modal"] .btn-share-close {top: 5px; right: 5px; width: 20px; height: 20px;}
.share-wrap .share-box[data-type="modal"] .btn-share-close::before {background-color: #000000;}
.share-wrap .share-box[data-type="modal"] .btn-share-close::after {background-color: #000000;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	.share-wrap .share-box[data-type="modal"] .box-wrap .url-box {display: block;}
	.share-wrap .share-box[data-type="modal"] .box-wrap .url-box .tit {display: none;}
}



/*-------------------------------------------------------------------
	분류그룹 : 공통 > 버튼 (component 참조)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-btn-wrap {margin: 0 -5px; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.bod-btn-wrap > .g-item {padding: 0 5px;}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .bod-btn-wrap.type-drop {-webkit-box-lines: single; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
    .bod-btn-wrap.type-drop > .g-item {width: 100%;}
    .bod-btn-wrap.type-drop > .g-item .btn {min-width: 0; width: 100%;}
}
@media screen and (max-width: 475px) {
    .bod-btn-wrap.type-full > .g-item {width: 50%; padding: 0 5px 10px;}
    .bod-btn-wrap.type-full > .g-item .btn {min-width: 0; width: 100%;}

    .bod-btn-wrap.type-drop {display: block;}
    .bod-btn-wrap.type-drop > .g-item {padding: 0 5px 10px;}
}




/*-------------------------------------------------------------------
	분류그룹 : 일반 게시판 목록
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : 일반 게시판 목록 > 검색
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-cmn-info-bar {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 10px;}
.bod-cmn-info-bar .total {display: block; position: relative; height: 100%; margin-bottom: 10px; padding-left: 35px; background-size: 14px; line-height: 30px; font-weight: 500; font-size: 1rem; flex-shrink: 0;}
.bod-cmn-info-bar .total::before {content:"#"; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #AD733E; line-height: 30px; font-weight: 800; font-size: 16px; color: #ffffff; text-align: center;}
.bod-cmn-info-bar .total .num {display: inline-block; line-height: 1; color: #AD733E; vertical-align: baseline;}

.bod-cmn-info-bar .search-bar {display: block; margin-left: auto; max-width: 600px;}
.bod-cmn-info-bar .search-bar .row > .item {padding-bottom: 0;}
.bod-cmn-info-bar .search-bar .row .intxt,
.bod-cmn-info-bar .search-bar .row .sel,
.bod-cmn-info-bar .search-bar .row .btn {width: 100%;}
.bod-cmn-info-bar .search-bar .row .btn-bod-search {display: block; width: 40px; height: 40px; background: #141414 url(../images/board/i_btn_search_wh.svg) no-repeat center / 20px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.bod-cmn-info-bar .search-bar .row .btn-bod-search {box-shadow: 0 0 6px 0 rgba(0,0,0,0); transition: background 0.3s, color 0.3s, box-shadow 0.3s;}
.bod-cmn-info-bar .search-bar .row .btn-bod-search:hover,
.bod-cmn-info-bar .search-bar .row .btn-bod-search:focus {background-color: #AD733E; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
	.bod-cmn-info-bar {display: block;}
    .bod-cmn-info-bar .total {padding-left: 35px; font-size: 14px;}
    .bod-cmn-info-bar .search-bar {max-width: none;}
}
@media screen and (max-width: 600px) {
	.bod-cmn-info-bar .search-bar .row > .item {padding-bottom: 10px;}
}
@media screen and (max-width: 425px) {
    .bod-cmn-info-bar .total {padding-left: 0;}
	.bod-cmn-info-bar .total::before {display: none;}
}


/*-------------------------------------------------------------------
	분류그룹 : 일반 게시판 목록 > 일반형 목록
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-def-list .bod-list-head {display: block; margin-bottom: 20px;}
.bod-def-list .bod-list-body {display: block;}

.bod-def-list-table {width:100%;border-top:2px solid #000;}
.bod-def-list-table caption {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.bod-def-list-table th {padding: 20px 10px; border-bottom:1px solid #dedede; background-color:#f7f7f7; font-size:16px; text-align:center; color:#141414;}
.bod-def-list-table td {padding: 20px 10px; border-bottom:1px solid #dedede; background-color:#fff; font-size:16px; text-align:center; color:#141414;}

.bod-def-list-table td.title {width:55%; text-align:left;}
.bod-def-list-table td .tit {display:inline-block; color:#141414; word-break: break-all; vertical-align: middle;}
.bod-def-list-table td .tit .txt {display: inline; word-break: inherit; vertical-align: middle;}

.bod-def-list-table td .i-notice {display:inline-block; width: 18px; height: 18px; background: url(../images/board/i_notice.svg) no-repeat center; vertical-align: middle;}
.bod-def-list-table td .i-cate {display:inline-block; min-width:60px; max-width: 150px; padding:2px 5px; border-radius: 5px; background-color:#AD733E; font-weight: 600; font-size: 14px; color:#ffffff; text-align:center; vertical-align: middle;}
.bod-def-list-table td .i-new {display:inline-block; width: 1.1875rem; height: 1.1875rem; margin-left: 5px; border-radius: 50%; background-color:#AD733E; letter-spacing: 1px; line-height: 1.1875rem; font-size:10px; text-align:center; color:#ffffff; font-weight: 700; vertical-align: middle;}
.bod-def-list-table td .i-attach {display: inline-block; position: relative; width: 18px; height: 20px; border-radius: 2px; background-color: #01216D; vertical-align: middle;}
.bod-def-list-table td .i-attach::before {content:""; position: absolute; top: 5px; left: 6px; width: 6px; height: 10px; background: #fff; background: linear-gradient(#ffffff 50%,transparent 50%); background: -moz-linear-gradient(#ffffff 50%, transparent 50%); background-size: 100% 4px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
    .bod-def-list-table th {padding: 15px 10px; font-size: 14px;}
    .bod-def-list-table td {padding: 15px 10px; font-size: 14px;}
}
@media screen and (max-width: 800px){
    .bod-def-list .bod-list-head {margin-bottom: 10px;}

	.bod-def-list-table th.author,
	.bod-def-list-table th.attach,
	.bod-def-list-table th.date,
	.bod-def-list-table th.reading,
    .bod-def-list-table th.pc,
	.bod-def-list-table td.author,
	.bod-def-list-table td.attach,
	.bod-def-list-table td.date,
	.bod-def-list-table td.reading,
    .bod-def-list-table td.pc {display: none;}
	.bod-def-list-table td.title {width:80%;}
}
@media screen and (max-width: 600px){
    .bod-def-list-table th {padding: 10px 5px;}
    .bod-def-list-table td {padding: 10px 5px;}

	.bod-def-list-table th.category,
	.bod-def-list-table td.category {display: none;}
	.bod-def-list-table td.title {width:80%;}
}
@media screen and (max-width: 480px){
	.bod-def-list-table td.title a {display:inline; white-space:inherit;}
}












































/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .mdl-list-tab-con {display: block;}
#content .mdl-list-tab-con .tab-con {display: none;}
#content .mdl-list-tab-con .tab-con.active {display: block;}

/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 목록 > 목록형
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .mdl-data-list {display: block; width:100%; border-top:2px solid #000;}
#content .mdl-data-list > li {display: block; position: relative; padding: 20px; border-bottom:1px solid #e9e9e9; background-color:#ffffff;}
#content .mdl-data-list > li .con-box {display: block;}
#content .mdl-data-list > li .con-box .txt-con {display: block; margin-bottom: 10px;}
#content .mdl-data-list > li .con-box .txt-con .title-box {display: flex; align-items: flex-start;}
#content .mdl-data-list > li .con-box .txt-con .title-box .tit {display: block;  margin-right: 20px; margin-bottom: 5px; font-weight:700; line-height: 30px; font-size:1.125rem; color:#000000;}
#content .mdl-data-list > li .con-box .txt-con .title-box .category {display: flex; flex-wrap: wrap;}
#content .mdl-data-list > li .con-box .txt-con .title-box .category > li {display: block; margin-bottom: 5px; margin-right: 10px;}
#content .mdl-data-list > li .con-box .txt-con .title-box .category > li:last-child {margin-right: 0;}
#content .mdl-data-list > li .con-box .txt-con .title-box .category > li > .item {display: block; height: 30px; padding: 0 10px; border: 1px solid #AD733E; border-radius: 30px; background-color: #ffffff; line-height: 28px; font-weight: 600; font-size: 14px; color: #AD733E;}

#content .mdl-data-list > li .con-box .txt-con .info-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 10px -10px 0; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#content .mdl-data-list > li .con-box .txt-con .info-list > li {display: block; padding: 0 10px 10px;}
#content .mdl-data-list > li .con-box .txt-con .info-list > li .tit {display: block; float: left; padding-right:10px; font-weight:700; font-size:1rem; color:#000000;}
#content .mdl-data-list > li .con-box .txt-con .info-list > li .txt {display: block; overflow: hidden; font-weight:400; font-size:1rem; color:#666666;}
#content .mdl-data-list > li .con-box .utils-con {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;}
#content .mdl-data-list > li .con-box .utils-con .item {display: block;}
#content .mdl-data-list > li .con-box .utils-con .item.type-a {-webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
#content .mdl-data-list > li .con-box .utils-con .item.type-b {flex-shrink:0;}
/* sns */
#content .mdl-data-list > li .con-box .utils-con .item .share-wrap {display: block; padding-left: 20px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#content .mdl-data-list > li .con-box .txt-con .tit {transition:color 0.3s;}
#content .mdl-data-list > li .con-box .txt-con .tit:focus,
#content .mdl-data-list > li .con-box .txt-con .tit:hover {color:#AD733E;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
    #content .mdl-data-list > li {padding: 15px;}
    #content .mdl-data-list > li .con-box .txt-con .info-list > li {width: 50%;}
    #content .mdl-data-list > li .con-box .utils-con .item .share-wrap {padding-left: 15px;}
    #content .mdl-data-list > li .con-box .utils-con .item .share-wrap .btn-share {width:35px; height:35px; background-size:18px;}
}
@media screen and (max-width: 600px) {
	#content .mdl-data-list > li .con-box .utils-con .item .share-wrap .share-box .box-wrap .url-box .tit {display: none;}
}
@media screen and (max-width:425px) {
    #content .mdl-data-list > li .con-box .txt-con .info-list {display: block;}
    #content .mdl-data-list > li .con-box .txt-con .info-list > li {width: 100%;}

    #content .mdl-data-list > li .con-box .utils-con .item .share-wrap .btn-share {width: 30px; height: 30px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 목록 > 갤러리형
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .mdl-data-gallery-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -20px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#content .mdl-data-gallery-list > li {display: block; width: 25%; padding: 40px 20px 0;}
#content .mdl-data-gallery-list > li:nth-child(1) {padding-top: 0;}
#content .mdl-data-gallery-list > li .item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; height: 100%; flex-direction: column;}
#content .mdl-data-gallery-list > li .item .img-box {display: block; position: relative; padding-top: 63.768%; background-color: #e9e9e9; flex-shrink: 0;}
#content .mdl-data-gallery-list > li .item .img-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill;}
#content .mdl-data-gallery-list > li .item .con-box {display: block; padding: 20px; border-width: 0 1px 1px; border-style: solid; border-color: #e9e9e9; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
#content .mdl-data-gallery-list > li .item .con-box .title {display: block; overflow: hidden; margin-bottom: 20px; height: 2.925rem; font-weight: 600; font-size: 1.125rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#content .mdl-data-gallery-list > li .item .con-box .info-list {display: block;}
#content .mdl-data-gallery-list > li .item .con-box .info-list > li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 10px;}
#content .mdl-data-gallery-list > li .item .con-box .info-list > li:last-child {margin-bottom: 0;}
#content .mdl-data-gallery-list > li .item .con-box .info-list > li .tit {display: block; min-width: 70px; font-weight: 600; font-size: 1rem; color: #000000; flex-shrink: 0;}
#content .mdl-data-gallery-list > li .item .con-box .info-list > li .txt {display: block; overflow: hidden; font-size: 1rem; color: #666666;}
#content .mdl-data-gallery-list > li .item .con-box .hash-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 35px;}
#content .mdl-data-gallery-list > li .item .con-box .hash-wrap > li {display: block;}

#content .mdl-data-gallery-list > li .item .share-wrap {display: block;}
#content .mdl-data-gallery-list > li .item .share-wrap .btn-share {position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background-size: 20px;}


#content .mdl-data-gallery-list > li .item .con-box .title {transition: color 0.3s;}
#content .mdl-data-gallery-list > li .item .con-box .title:focus,
#content .mdl-data-gallery-list > li .item .con-box .title:hover {color: #AD733E;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (min-width: 1201px){
	#content .mdl-data-gallery-list > li:nth-child(4) {padding-top: 0;}
}
@media screen and (min-width: 801px){
	#content .mdl-data-gallery-list > li:nth-child(3) {padding-top: 0;}
}
@media screen and (min-width: 476px){
	#content .mdl-data-gallery-list > li:nth-child(2) {padding-top: 0;}
}

@media screen and (max-width: 1600px) {
    #content .mdl-data-gallery-list {margin: 0 -10px;}
    #content .mdl-data-gallery-list > li {padding: 20px 10px 0;}
	#content .mdl-data-gallery-list > li .item .con-box {padding: 15px;}
}
@media screen and (max-width: 1200px) {
	#content .mdl-data-gallery-list > li {width: 33.333%;}
    #content .mdl-data-gallery-list > li .item .con-box .title {height: 2.6rem; margin-bottom: 15px; font-size: 1rem;}
	#content .mdl-data-gallery-list > li .item .con-box .info-list > li {margin-bottom: 5px;}
	#content .mdl-data-gallery-list > li .item .con-box .info-list > li .tit {min-width: 55px; font-size: 14px;}
	#content .mdl-data-gallery-list > li .item .con-box .info-list > li .txt {font-size: 14px;}
	#content .mdl-data-gallery-list > li .item .con-box .hash-wrap {margin-top: 20px;}
}
@media screen and (max-width: 800px) {
	#content .mdl-data-gallery-list > li {width: 50%;}
}
@media screen and (max-width: 600px) {
	#content .mdl-data-gallery-list > li .item .con-box {padding: 15px 10px;}

	#content .mdl-data-gallery-list > li .item .share-wrap .share-box {padding: 15px;}
}
@media screen and (max-width: 475px) {
	#content .mdl-data-gallery-list > li {display: block; width: 100%;}
}




/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 상세페이지
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 상세페이지 > 게시글 타이틀
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-def-view {display: block; margin-bottom: 50px;}
.bod-def-view .view-head {display: block; border-top: 2px solid #000; border-bottom: 1px solid #e9e9e9;}
.bod-def-view .view-head .view-title {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; padding: 20px; border-bottom: 1px solid #e9e9e9; background-color:#F8F8F8; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.bod-def-view .view-head .view-title .title-box {display:flex; width:100%; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.bod-def-view .view-head .view-title .title-box .title {display: block; line-height: 1; font-weight: 700; font-size: 1.5rem; color:#000000; word-break: break-all;}
.bod-def-view .view-head .view-title .title-box .category {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 35%; padding-left: 20px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.bod-def-view .view-head .view-title .title-box .category > li {display:block; margin-top: 5px; margin-bottom: 5px; margin-right: 10px;}
.bod-def-view .view-head .view-title .title-box .category > li:last-child {margin-right: 0;}
.bod-def-view .view-head .view-title .title-box .category > li .item {display: block; height: 30px; padding: 0 10px; border: 1px solid #AD733E; border-radius: 30px; background-color: #ffffff; line-height: 28px; font-weight: 600; font-size: 14px; color: #AD733E;}

.bod-def-view .view-head .utils {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-left: 20px; flex-shrink: 0;}
.bod-def-view .view-head .utils .date {display: block; line-height: 40px; font-weight: 500; font-size: 1rem; color: #141414; white-space: nowrap;}
.bod-def-view .view-head .utils .share-wrap {display: block; position: relative; margin-left: 20px;}
.bod-def-view .view-head .utils .share-wrap .share-box[data-type="modal"] {display: block; top: 100%; right: 0;}

.bod-def-view .view-head .view-info {display: flex; padding: 10px 20px;}
.bod-def-view .view-head .view-info .view-info-column {display:flex; padding: 10px 0 0; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-grow: 1;}
.bod-def-view .view-head .view-info .view-info-column > li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; margin-bottom: 10px; padding-right:25px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.bod-def-view .view-head .view-info .view-info-column > li::before {content:""; position: absolute; top: 10%; right: 12px; width: 1px; height: 80%; background-color: #999;}
.bod-def-view .view-head .view-info .view-info-column > li:last-child::before {display: none;}
.bod-def-view .view-head .view-info .view-info-column > li .tit {display: block; padding-right: 10px; font-weight: 600; font-size: 1rem; color:#141414; flex-shrink: 0;}
.bod-def-view .view-head .view-info .view-info-column > li .txt {display: block; font-weight: 400; font-size:1rem; color:#5C6C82; word-break: break-all;}

.bod-def-view .view-head .view-info .link-box {display: block; padding-left: 20px; flex-shrink: 0;}
.bod-def-view .view-head .view-info .link-box .btn-origin-link {display: flex; position: relative; height: 100%; padding: 0 50px 0 20px; border-radius: 5px; background-color: #AD733E; font-weight: 600; font-size: 1rem; color: #ffffff; align-items: center;}
.bod-def-view .view-head .view-info .link-box .btn-origin-link::before {content:""; position: absolute; top: 0; right: 20px; width: 20px; height: 100%; background: url(../images/common/i_link_on.png) no-repeat center;}

.bod-def-view .view-head .view-tag-wrap {display: block; padding: 5px 20px; border-top: 1px dashed #dedede;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
	.bod-def-view {margin-bottom: 35px;}
	.bod-def-view .view-head .view-title {padding: 15px;}
	.bod-def-view .view-head .view-title .title-box .title {font-size:1.375rem;}
	.bod-def-view .view-head .view-title .utils {margin-left: 15px;}
	.bod-def-view .view-head .view-title .utils .share-wrap {margin-left: 15px;}

	.bod-def-view .view-head .view-info {padding: 10px 15px; align-items: stretch;}
	.bod-def-view .view-head .view-info .view-info-column > li {padding-right: 10px;}
    .bod-def-view .view-head .view-info .view-info-column > li::before {right: 4px;}
	.bod-def-view .view-head .view-info .link-box {padding-left: 15px;}
	.bod-def-view .view-head .view-info .link-box .btn-origin-link {padding: 0 45px 0 15px;}

	.bod-def-view .view-head .view-tag-wrap {padding: 5px 15px;}
}
@media screen and (max-width: 800px){
	.bod-def-view .view-head .view-title .title-box .title {font-size: 1.25rem;}
	.bod-def-view .view-head .view-title .title-box .category > li .item {height: 24px; line-height: 22px; font-size: 12px;}

	.bod-def-view .view-head .view-info .view-info-column > li .tit {font-size: 13px;}
    .bod-def-view .view-head .view-info .view-info-column > li .txt {font-size: 13px;}
}
@media screen and (max-width: 600px){
	.bod-def-view .view-head .view-title {display: block; padding: 20px 40px 20px 10px;}
	.bod-def-view .view-head .view-title .title-box {display: block;}
	.bod-def-view .view-head .view-title .title-box .title {width: 100%; margin-bottom: 5px;}
	.bod-def-view .view-head .view-title .title-box .category {max-width: none; padding-left: 0;}
	.bod-def-view .view-head .view-title .title-box .category > li {margin-top: 0; margin-bottom: 10px;}

	.bod-def-view .view-head .view-title .utils {display: block; margin-left: 0;}
	.bod-def-view .view-head .view-title .utils .date {line-height: 20px; font-size: 13px;}
	.bod-def-view .view-head .view-title .utils .share-wrap {position: absolute; top: 20px; right: 10px; margin-left: 0;}
	.bod-def-view .view-head .view-title .utils .share-wrap .btn-share {width: 26px; height: 26px; background-size: 20px;}
	.bod-def-view .view-head .view-title .utils .share-wrap .share-box[data-type="modal"] {min-width: 80vw;}

	.bod-def-view .view-head .view-info {display: block; padding: 0 10px 10px;}
	.bod-def-view .view-head .view-info .link-box {padding-left: 0;}
	.bod-def-view .view-head .view-info .link-box .btn-origin-link {height: 36px;}

	.bod-def-view .view-head .view-tag-wrap {padding: 5px 10px;}
}



/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 상세페이지 > 첨부된 파일 목록
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-def-view .attach-list {display: block; width: 100%; padding: 10px 20px; border-top: 1px dashed #dedede;}
.bod-def-view .attach-list > li {display: block; margin-bottom: 10px;}
.bod-def-view .attach-list > li:last-child {margin-bottom: 0;}
.bod-def-view .attach-list > li .btn-view-attach {display: block; position: relative; padding-left: 35px; background-color: transparent; line-height: 28px; font-weight: 500; font-size: 15px; color: #555c63; word-break: break-all;}
.bod-def-view .attach-list > li .btn-view-attach::before {content:""; position: absolute; top: 0; left: 0; width: 28px; height: 28px; background: #003863  url(../images/board/i_btn_down_wh.svg) no-repeat center / 18px;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
.bod-def-view .attach-list > li .btn-view-attach {transition: color 0.3s;}
.bod-def-view .attach-list > li .btn-view-attach:focus,
.bod-def-view .attach-list > li .btn-view-attach:hover {color: #AD733E;}
.bod-def-view .attach-list > li .btn-view-attach::before {transition: background 0.3s;}
.bod-def-view .attach-list > li .btn-view-attach:focus::before,
.bod-def-view .attach-list > li .btn-view-attach:hover::before {background-color: #AD733E;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
	.bod-def-view .attach-list {padding: 10px 15px;}
}
@media screen and (max-width: 600px){
	.bod-def-view .attach-list {padding: 10px;}
	.bod-def-view .attach-list > li .btn-view-attach {padding-left: 25px; line-height: 20px; font-size: 13px;}
	.bod-def-view .attach-list > li .btn-view-attach::before {width: 20px; height: 20px; background-size: 13px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 상세페이지 > 본문
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-def-view .view-body {display:block; width: 100%; padding: 50px 20px; border-bottom: 1px solid #e9e9e9; font-size: 1rem; color:#141414; word-break: break-all;}
.bod-def-view .view-body:after{content:"";display:block;clear:both;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .bod-def-view .view-body {margin-bottom: 35px; padding: 35px 15px;}
}
@media screen and (max-width: 600px) {
    .bod-def-view .view-body {padding: 35px 10px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 자료검색 게시판 > 상세페이지 > 저작권
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-def-view .view-copyright {display: block; padding: 20px; border-bottom: 1px solid #e9e9e9;}
.bod-def-view .view-copyright .txt {display: block; position: relative; padding-left: 22px;}
.bod-def-view .view-copyright .txt::before {content:"i"; display: block; position: absolute; top: 0; left: 0; width: 18px; height: 18px; padding-left: 1px; border-radius: 50%; background-color: #AD733E; line-height: 18px; font-weight: 500; font-size: 13px; color: #ffffff; text-align: center; box-sizing: border-box;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	.bod-def-view .view-copyright {padding: 15px;}
}
@media screen and (max-width: 600px) {
	.bod-def-view .view-copyright {padding: 15px 10px;}
}






/*-------------------------------------------------------------------
	분류그룹 : 키워드 이슈
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : 키워드 이슈 > 목록
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.keyword-issue-list {display: block; border-top: 2px solid #141414;}
.keyword-issue-list .list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -20px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.keyword-issue-list .list > li {display: block; width: 33.333%; padding: 40px 20px 0;}
.keyword-issue-list .list > li .item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; height: 100%; border: 1px solid #e9e9e9; border-radius: 5px; box-shadow: 0 0 0 0 rgba(0,0,0,0.2); flex-direction: column;}
.keyword-issue-list .list > li .item .item-con {display: block; padding: 30px 30px 20px; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
.keyword-issue-list .list > li .item .item-con .title {display: inline-block; position: relative; overflow: hidden; margin-bottom: 15px; line-height: 1; font-weight: 700; font-size: 1.125rem; color: #000000;}
.keyword-issue-list .list > li .item .item-con .title::before {content:""; position: absolute; bottom: -4px; left: 0; width: 0; height: 16px; background-color: rgba(86, 138, 229, 0.5);}
.keyword-issue-list .list > li .item .item-con .title > span {display: block; overflow: hidden; position: relative; max-width: 100%; max-height: 2.925rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.keyword-issue-list .list > li .item .item-con .txt {display: block; overflow: hidden; max-height: 2.6rem; margin-bottom: 15px; font-size: 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.keyword-issue-list .list > li .item .item-con .keyword-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -5px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.keyword-issue-list .list > li .item .item-con .keyword-list > li {display: block; margin-bottom: 10px; padding: 0 5px;}
.keyword-issue-list .list > li .item .item-con .keyword-list > li .key {display: block; overflow: hidden; position: relative; padding: 6px 10px; border: 1px solid #e9e9e9; border-radius: 4px; background-color: #ffffff; line-height: 1; font-weight: 500; font-size: 14px; color: #666666;}
.keyword-issue-list .list > li .item .item-info {display: block; padding: 30px 30px 20px; border-top: 1px dashed #e9e9e9;}
.keyword-issue-list .list > li .item .item-info::before {content:""; display: block; position: absolute; right: 15px; bottom: 10px; width: 10px; height: 10px; border-width: 5px; border-style: solid; border-color: transparent transparent #568AE5 #568AE5; box-sizing: border-box;}
.keyword-issue-list .list > li .item .item-info::after {content:"";position: absolute;bottom: 10px;right: 25px;width: 15px;height: 3px;background-color: #568AE5;}
.keyword-issue-list .list > li .item .item-info .count-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; z-index: 1; margin: 0 -5px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.keyword-issue-list .list > li .item .item-info .count-list > li {display: block; padding: 0 5px 10px; min-width: 33.333%;}
.keyword-issue-list .list > li .item .item-info .count-list > li .count {display: block; position: relative; padding-left: 35px; line-height: 30px; font-weight: 500; font-size: 14px;}
.keyword-issue-list .list > li .item .item-info .count-list > li .count::before {content:""; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 4px; background-color: #333333; background-repeat: no-repeat; background-position: center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.keyword-issue-list .list > li .item {transition: border 0.4s, box-shadow 0.4s;}
.keyword-issue-list .list > li .item:focus {outline-color: transparent;}
.keyword-issue-list .list > li .item:focus-visible::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #568AE5; border-radius: 5px; box-sizing: border-box;}
.keyword-issue-list .list > li .item:focus,
.keyword-issue-list .list > li .item:hover {border-color: #568AE5; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}

.keyword-issue-list .list > li .item .item-con .title::before {opacity: 0; transition: opacity 0.4s, width 0.4s;}
.keyword-issue-list .list > li .item:focus .item-con .title::before,
.keyword-issue-list .list > li .item:hover .item-con .title::before {opacity: 1; width: 100%;}

.keyword-issue-list .list > li .item .item-info {transition: border 0.4s;}
.keyword-issue-list .list > li .item:focus .item-info,
.keyword-issue-list .list > li .item:hover .item-info {border-color: #346ac8;}

.keyword-issue-list .list > li .item .item-info::before {transition: bottom 0.3s, right 0.3s, opacity 0.3s; opacity: 0;}
.keyword-issue-list .list > li .item:focus .item-info::before,
.keyword-issue-list .list > li .item:hover .item-info::before {right: 10px; opacity: 1;}
.keyword-issue-list .list > li .item .item-info::after {transition: right 0.3s, opacity 0.3s; opacity: 0;}
.keyword-issue-list .list > li .item:focus .item-info::after,
.keyword-issue-list .list > li .item:hover .item-info::after {right: 20px; opacity: 1;}

.keyword-issue-list .list > li .item .item-info .count-list > li .count::before {transition: background 0.4s, color 0.4s;}
.keyword-issue-list .list > li .item .item-info .count-list > li .count.type-a::before {background-color: #4D72BE; background-image: url(../images/common/i_curation_01.svg);}
.keyword-issue-list .list > li .item .item-info .count-list > li .count.type-b::before {background-color: #AD733E; background-image: url(../images/common/i_curation_02.svg);}
.keyword-issue-list .list > li .item .item-info .count-list > li .count.type-c::before {background-color: #50ACAC; background-image: url(../images/common/i_curation_03.svg);}
.keyword-issue-list .list > li .item .item-info .count-list > li .count.type-d::before {background-color: #754FA6; background-image: url(../images/common/i_curation_04.svg);}
.keyword-issue-list .list > li .item .item-info .count-list > li .count.type-e::before {background-color: #E4032E; background-image: url(../images/common/i_curation_05.svg);}

.keyword-issue-list .list > li .item:focus .item-info .count-list > li .count.type-a::before,
.keyword-issue-list .list > li .item:hover .item-info .count-list > li .count.type-a::before,
.keyword-issue-list .list > li .item:focus .item-info .count-list > li .count.type-b::before,
.keyword-issue-list .list > li .item:hover .item-info .count-list > li .count.type-b::before,
.keyword-issue-list .list > li .item:focus .item-info .count-list > li .count.type-c::before,
.keyword-issue-list .list > li .item:hover .item-info .count-list > li .count.type-c::before,
.keyword-issue-list .list > li .item:focus .item-info .count-list > li .count.type-d::before,
.keyword-issue-list .list > li .item:hover .item-info .count-list > li .count.type-d::before,
.keyword-issue-list .list > li .item:focus .item-info .count-list > li .count.type-e::before,
.keyword-issue-list .list > li .item:hover .item-info .count-list > li .count.type-e::before {background-color: #003863;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	.keyword-issue-list .list {margin: 0 -10px;}
	.keyword-issue-list .list > li {padding: 20px 10px 0;}
	.keyword-issue-list .list > li .item .item-con {padding: 20px 20px 10px;}
	.keyword-issue-list .list > li .item .item-con .txt {font-size: 14px;}
	.keyword-issue-list .list > li .item .item-con .keyword-list > li .key {padding: 4px 8px;}
	.keyword-issue-list .list > li .item .item-info {padding: 20px 20px 10px;}
	.keyword-issue-list .list > li .item .item-info .count-list > li {min-width: 50%;}
}
@media screen and (max-width: 1024px) {
	.keyword-issue-list .list > li {width: 50%;}
	.keyword-issue-list .list > li .item .item-con {padding: 15px 15px 5px;}
	.keyword-issue-list .list > li .item .item-con .title {margin-bottom: 10px;}
	.keyword-issue-list .list > li .item .item-con .txt {margin-bottom: 10px;}
	.keyword-issue-list .list > li .item .item-con .keyword-list > li .key {font-size: 13px;}
	.keyword-issue-list .list > li .item .item-info {padding: 15px 15px 5px;}
	.keyword-issue-list .list > li .item .item-info .count-list > li .count {font-size: 13px;}
}
@media screen and (max-width: 600px) {
	.keyword-issue-list .list {display: block;}
	.keyword-issue-list .list > li {width: 100%;}
	.keyword-issue-list .list > li .item .item-con .keyword-list > li .key {font-size: 12px;}
	.keyword-issue-list .list > li .item .item-info .count-list > li {min-width: 33.333%;}
	.keyword-issue-list .list > li .item .item-info .count-list > li .count {padding-left: 30px; line-height: 24px; font-size: 12px;}
	.keyword-issue-list .list > li .item .item-info .count-list > li .count::before {width: 24px; height: 24px;}
}
@media screen and (max-width: 375px) {
	.keyword-issue-list .list > li .item .item-info .count-list > li {min-width: 50%;}
}


/*-------------------------------------------------------------------
	분류그룹 : 키워드 이슈 > 상세페이지
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.keyword-issue-detail {display: block;}
.keyword-issue-detail .detail-search {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; padding-top: 20px; border-top: 2px solid #141414;}
.keyword-issue-detail .detail-search .img-box {display: block; position: relative; width: 30%; max-width: 350px; height: 100%; flex-shrink: 0;}
.keyword-issue-detail .detail-search .img-box::before {content:""; display: block; padding-top: 100%;}
/* .keyword-issue-detail .detail-search .img-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} */
 .keyword-issue-detail .detail-search .img-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill;} 
.keyword-issue-detail .detail-search .con-box {display: block; margin-left: 20px; border-width: 1px 0; border-style: solid; border-color: #e9e9e9; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
.keyword-issue-detail .detail-search .con-box .title-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 30px 20px; border-bottom: 1px solid #e9e9e9; background-color: #F8F8F8;}
.keyword-issue-detail .detail-search .con-box .title-wrap .title-box {display: block;}
.keyword-issue-detail .detail-search .con-box .title-wrap .title-box .tit {display: block; margin-bottom: 10px; font-weight: 700; font-size: 1.25rem; color: #141414;}
.keyword-issue-detail .detail-search .con-box .title-wrap .title-box .txt {display: block; font-size: 1rem; color: #555c63;}
.keyword-issue-detail .detail-search .con-box .title-wrap .date {display: block; margin-top: 5px; margin-left: auto; height: 20px; padding-left: 20px; background: url(../images/common/i_date_gray.svg) no-repeat center left / 17px; line-height: 20px; font-size: 1rem; color: #555c63; flex-shrink: 0;}
.keyword-issue-detail .detail-search .con-box .filter-wrap {display: block;}
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item {border-bottom:1px dashed #e9e9e9; background-color:#ffffff; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} 
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item:last-child {border-bottom: none;}
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-tit {width: 120px; padding:10px 20px; flex-shrink:0;}
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-tit .tit {display: block; font-weight:600; font-size:1rem; color:#000000; word-break:break-word;}
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-con {width:100%; padding:10px 20px 0 10px;}
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-con .intxt,
.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-con .sel {display:block; width:100%;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	.keyword-issue-detail .detail-search .con-box .title-wrap {padding: 20px;}
	.keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-tit {width: 100px; padding: 10px;}
}
@media screen and (max-width: 1024px) {
	.keyword-issue-detail .detail-search .con-box .title-wrap .date {font-size: 14px;}
}
@media screen and (max-width: 800px) {
	.keyword-issue-detail .detail-search {display: block;}
	.keyword-issue-detail .detail-search .img-box {width: 100%; max-width: none; min-height: 160px; padding: 20px; background-color: #2e313d;}
	.keyword-issue-detail .detail-search .img-box::before {display: none;}
	.keyword-issue-detail .detail-search .img-box img {display: block; position: relative; top: auto; left: auto; width: auto; height: auto; max-height: 300px; margin: 0 auto;}
	.keyword-issue-detail .detail-search .con-box {margin-left: 0;}
    .keyword-issue-detail .detail-search .con-box .filter-wrap .form-item {display: block; width:100%;}
    .keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-tit {width:100%; padding: 10px 0;}
    .keyword-issue-detail .detail-search .con-box .filter-wrap .form-item .item-con {padding: 0;}
}
@media screen and (max-width: 600px) {
	.keyword-issue-detail .detail-search .img-box {padding: 15px;}
	.keyword-issue-detail .detail-search .con-box .title-wrap {display: block; padding: 20px 15px;}
	.keyword-issue-detail .detail-search .con-box .title-wrap .title-box .tit {font-size: 16px;}
	.keyword-issue-detail .detail-search .con-box .title-wrap .title-box .txt {font-size: 13px;}
	.keyword-issue-detail .detail-search .con-box .title-wrap .date {margin-top: 10px; font-size: 13px;}
}
























/*-------------------------------------------------------------------
	분류그룹 : 자료보유현황 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .chart-section {display: block; width: 100%; margin-bottom: 50px; border-width: 2px 1px 1px; border-style: solid; border-color: #000000 #e9e9e9 #e9e9e9;}
#content .chart-section .sc-head {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 25px; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
#content .chart-section .sc-head .tit {display: block; font-weight: 700; font-size: 1.25rem; color: #000;}
#content .chart-section .sc-body {display: block; padding: 0 25px 25px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	#content .chart-section .sc-head {padding: 20px;}
	#content .chart-section .sc-body {padding: 0 20px 20px;}
}
@media screen and (max-width: 1024px) {
	#content .chart-section .sc-head {padding: 15px;}
	#content .chart-section .sc-body {padding: 0 15px 15px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 자료보유현황 > 연도별 자료생산 추이
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* #content #year_sc .sc-body .chart-wrap #chart_year {display: block; position: relative;} */
#content #year_sc .sc-body .chart-wrap {display: block; overflow-x: auto;}
#content #year_sc .sc-body .chart-wrap::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#content #year_sc .sc-body .chart-wrap::-webkit-scrollbar-thumb {height: 6px; border-radius: 10px; background: rgba(173, 115, 62, 0.8);}
#content #year_sc .sc-body .chart-wrap::-webkit-scrollbar-track {padding: 0 5px; border-radius: 10px; background: #e4e4e4;}
#content #year_sc .sc-body .chart-wrap svg {display: block;}
#content #year_sc .sc-body .chart-wrap svg .axis {font-weight: 500; font-size: 14px; font-family:  inherit;}
#content #year_sc .sc-body .chart-wrap svg .axis .domain {stroke: #e9e9e9;}
#content #year_sc .sc-body .chart-wrap svg .axis .tick .t2 {stroke: #e9e9e9;}
#content #year_sc .sc-body .chart-wrap .tooltip {display: block; position: absolute; padding: 15px; border-radius: 5px; background-color: rgba(0,0,0,0.8); font-weight: 500; font-size: 14px; color: #F2E1CC; text-align: center; white-space: nowrap;}
#content #year_sc .sc-body .chart-wrap .tooltip::before {content: ""; display: block; position: absolute; top: 100%; left: calc(50% - 10px); width: 20px; height: 10px; border-width: 10px 10px 0 10px; border-style: solid; border-color: rgba(0,0,0,0.8) transparent transparent transparent; box-sizing: border-box;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#content #year_sc .sc-body .chart-wrap .tooltip {visibility: hidden; opacity: 0;}
#content #year_sc .sc-body .chart-wrap .tooltip.active {visibility: visible; opacity: 1;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#content #year_sc .sc-body .chart-wrap .tooltip {padding: 10px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 자료보유현황 > 질병별 자료생산 추이
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content #disease_sc .sc-body {padding: 0; border-top: 1px solid #e9e9e9;}
#content #disease_sc .sc-body .pie-area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#content #disease_sc .sc-body .pie-area .pie-chart {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 50%; padding: 20px; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
#content #disease_sc .sc-body .pie-area .pie-chart #chart_disease {display: block; position: relative; width: 380px; height: 380px;}
#content #disease_sc .sc-body .pie-area .pie-chart path {transition: transform 0.3s;}
#content #disease_sc .sc-body .pie-area .pie-chart path.act {transform: scale(1.1);}
#content #disease_sc .sc-body .pie-area .pie-chart .tooltip {display: block; position: absolute; z-index: 2; padding: 15px; border-radius: 5px; background-color: rgba(0,0,0,0.8); font-weight: 500; font-size: 14px; color: #F2E1CC; text-align: center; white-space: nowrap;}
#content #disease_sc .sc-body .pie-area .pie-chart .tooltip::before {content: ""; display: block; position: absolute; top: 100%; left: calc(50% - 10px); width: 20px; height: 10px; border-width: 10px 10px 0 10px; border-style: solid; border-color: rgba(0,0,0,0.8) transparent transparent transparent; box-sizing: border-box;}
#content #disease_sc .sc-body .pie-area .pie-chart .title {display: block; position: absolute; top: 50%; left: 50%; font-weight: 700; font-size: 0.9rem; text-align: center; transform: translate(-50%, -50%);}

#content #disease_sc .sc-body .pie-area .pie-info {display: block; width: 50%; border-left: 1px solid #e9e9e9;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%; flex-direction: column;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li {display: block; border-bottom: 1px solid #e9e9e9; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li:last-child {border-bottom-color: transparent;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info {display: block; width: 100%; height: 100%; min-height: 89px; padding: 20px 35px; text-align: left; background-color: #ffffff;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info.act {background-color: #F7F8FB;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info > span {display: block; position: relative; padding-left: calc(1rem + 15px); line-height: 1; font-weight: 600; font-size: 1rem;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info > span::before {content:""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 50%; background-color: #fff;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info.type-a > span::before {background-color: #BED3E9;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info.type-b > span::before {background-color: #F2E1CC;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info.type-c > span::before {background-color: #C6AF92;}
#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info.type-d > span::before {background-color: #005DA9;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#content #disease_sc .sc-body .pie-area .pie-chart .tooltip {visibility: hidden; opacity: 0;}
#content #disease_sc .sc-body .pie-area .pie-chart .tooltip.active {visibility: visible; opacity: 1;}

#content #disease_sc .sc-body .pie-area .pie-chart .title {opacity: 0; transition: opacity 0.3s;}
#content #disease_sc .sc-body .pie-area .pie-chart .title.active {opacity: 1;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	#content #disease_sc .sc-body .pie-area .pie-chart {width: 65%;}
	#content #disease_sc .sc-body .pie-area .pie-info {width: 35%;}
	#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info {padding: 20px;}
	#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info > span {padding-left: calc(1rem + 10px);}
}
@media screen and (max-width: 1024px) {
	#content #disease_sc .sc-body .pie-area .pie-chart {padding: 15px;}
	#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info {padding: 15px;}
}
@media screen and (max-width: 800px) {
	#content #disease_sc .sc-body .pie-area {display: block;}
	#content #disease_sc .sc-body .pie-area .pie-chart {width: 100%;}
	#content #disease_sc .sc-body .pie-area .pie-info {width: 100%; border-left: 0; border-top: 1px solid #e9e9e9;}
	#content #disease_sc .sc-body .pie-area .pie-info .info-list > li .btn-info {min-height: 0;}
}
@media screen and (max-width: 600px) {
	#content #disease_sc .sc-body .pie-area .pie-chart #chart_disease {width: 300px; height: 300px;}
	#content #disease_sc .sc-body .pie-area .pie-chart #chart_disease .tooltip {padding: 10px;}
}
@media screen and (max-width: 320px) {
	#content #disease_sc .sc-body .pie-area .pie-chart #chart_disease {width: 200px; height: 200px;}
	#content #disease_sc .sc-body .pie-area .pie-chart #chart_disease .title {font-size: 12px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 자료보유현황 > 유형별 자료 추이, 형태별 자료 추이, 수집기관 추이
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content #stack_sc .sc-head {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#content #stack_sc .sc-head .chart-tab {display: block;}
#content #stack_sc .sc-head .chart-tab::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#content #stack_sc .sc-head .chart-tab::-webkit-scrollbar-thumb {height: 6px; border-radius: 10px; background: rgba(173, 115, 62, 0.8);}
#content #stack_sc .sc-head .chart-tab::-webkit-scrollbar-track {padding: 0 5px; border-radius: 10px; background: #e4e4e4;}
#content #stack_sc .sc-head .chart-tab .tab-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#content #stack_sc .sc-head .chart-tab .tab-list > li {display: block; margin-right: 10px;}
#content #stack_sc .sc-head .chart-tab .tab-list > li:last-child {margin-right: 0;}
#content #stack_sc .sc-head .chart-tab .tab-list > li .btn-tab {display: block; width: 100%; min-width: 150px; height: 44px; padding: 0 15px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: transparent; line-height: 42px; font-weight: 500; font-size: 1rem; color: #000; white-space: nowrap;}
#content #stack_sc .sc-head .chart-tab .tab-list > li .btn-tab.active {border-color: #141414; background-color: #141414; color: #fff;}

#content #stack_sc .sc-head .chart-info {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-shrink: 0;}
#content #stack_sc .sc-head .chart-info .data-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#content #stack_sc .sc-head .chart-info .data-list > li {display: block; position: relative; margin-right: 15px; padding-left: calc(1rem + 5px); line-height: 1; font-weight: 600; font-size: 1rem; white-space: nowrap;}
#content #stack_sc .sc-head .chart-info .data-list > li:last-child {margin-right: 0;}
#content #stack_sc .sc-head .chart-info .data-list > li::before {content:""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 50%;}
#content #stack_sc .sc-head .chart-info .unit {display: block; margin-left: 30px; line-height: 1; font-weight: 500; font-size: 1rem; white-space: nowrap;}

#content #stack_sc .sc-body .chart-wrap {overflow-x: auto;}
#content #stack_sc .sc-body .chart-wrap::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#content #stack_sc .sc-body .chart-wrap::-webkit-scrollbar-thumb {height: 6px; border-radius: 10px; background: rgba(173, 115, 62, 0.8);}
#content #stack_sc .sc-body .chart-wrap::-webkit-scrollbar-track {padding: 0 5px; border-radius: 10px; background: #e4e4e4;}
#content #stack_sc .sc-body .chart-wrap svg {display: block;}
#content #stack_sc .sc-body .chart-wrap svg .axis {font-weight: 500; font-size: 14px; font-family:  inherit;}
#content #stack_sc .sc-body .chart-wrap svg .axis .domain {stroke: #e9e9e9;}
/* #content #stack_sc #chart_stack svg .axis .tick line {stroke: #e9e9e9;} */
#content #stack_sc .sc-body .chart-wrap svg .axis .tick .t2 {stroke: #e9e9e9;}
#content #stack_sc .sc-body .chart-wrap svg rect {position: relative; z-index: 10;}
#content #stack_sc .sc-body .chart-wrap .tooltip {display: block; position: absolute; padding: 15px; border-radius: 5px; background-color: rgba(0,0,0,0.8); font-weight: 500; font-size: 14px; color: #F2E1CC; text-align: center; white-space: nowrap;}
#content #stack_sc .sc-body .chart-wrap .tooltip::before {content: ""; display: block; position: absolute; top: 100%; left: calc(50% - 10px); width: 20px; height: 10px; border-width: 10px 10px 0 10px; border-style: solid; border-color: rgba(0,0,0,0.8) transparent transparent transparent; box-sizing: border-box;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#content #stack_sc .sc-body .tooltip {visibility: hidden; opacity: 0;}
#content #stack_sc .sc-body .tooltip.active {visibility: visible; opacity: 1;}

#content #stack_sc .sc-head .chart-tab > li .btn-tab {transition: border 0.3s, background 0.3s;}
#content #stack_sc .sc-head .chart-tab > li .btn-tab:focus,
#content #stack_sc .sc-head .chart-tab > li .btn-tab:hover {border-color: #141414;}

#content #stack_sc .sc-head .chart-info .data-list > li.type-SARS::before {background-color: #BED3E9;}
#content #stack_sc .sc-head .chart-info .data-list > li.type-H1N1::before {background-color: #F2E1CC;}
#content #stack_sc .sc-head .chart-info .data-list > li.type-MERS::before {background-color: #C6AF92;}
#content #stack_sc .sc-head .chart-info .data-list > li.type-COVID-19::before {background-color: #005DA9;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	#content #stack_sc .sc-head {display: block;}
	#content #stack_sc .sc-head .chart-tab .tab-list {margin-bottom: 5px;}
	#content #stack_sc .sc-head .chart-info {margin-top: 5px; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
}
@media screen and (max-width: 800px) {
	#content #stack_sc .sc-head .chart-tab .tab-list > li .btn-tab {min-width: 100px;}
}
@media screen and (max-width: 600px) {
	#content #stack_sc .sc-head .chart-tab {overflow-x: auto;}
	#content #stack_sc .sc-head .chart-tab .tab-list > li {-webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
	#content #stack_sc .sc-head .chart-tab .tab-list > li .btn-tab {min-width: 0;}

	#content #stack_sc .sc-head .chart-info {display: block;}
	#content #stack_sc .sc-head .chart-info .data-list {width: 100%; border: 1px solid #e9e9e9; padding: 10px; border-radius: 5px; background-color: #F7F8FB; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
	#content #stack_sc .sc-head .chart-info .data-list > li {padding-top: 5px; padding-bottom: 5px;}
	#content #stack_sc .sc-head .chart-info .data-list > li::before {top: 5px;}
	#content #stack_sc .sc-head .chart-info .unit {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 10px; margin-left: 0; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
}