@charset "UTF-8";

/*-------------------------------------------------------------------
	분류그룹 : board > 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .filter {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom:5px; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
#container .filter .sel {border:1px solid transparent; background:#fff url(../images/sub/i_down.png) no-repeat center right 10px}
#container .filter .btn-filter {display: inline-block; background-color:transparent; font-weight:400; font-size:1rem; letter-spacing: 0.2rem; color: #4a4a4a;}


/*-------------------------------------------------------------------
	분류그룹 : board > gallery
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .gallery-list-wrap {display: block;}
#container .gallery-list-wrap .gallery-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin:0 -30px; flex-wrap:wrap;}
#container .gallery-list-wrap .gallery-list > li {width:33.3333%; padding:10px 30px 100px;}
#container .gallery-list-wrap .gallery-list > li .item {display: block; }
#container .gallery-list-wrap .gallery-list > li .item .img-box {display: block; overflow: hidden; position:relative; background-color:#F4F4F4;}
#container .gallery-list-wrap .gallery-list > li .item .img-box::before {content:''; display: block; padding-top:100%;}
#container .gallery-list-wrap .gallery-list > li .item .img-box img {position:absolute; top:0; left:50%; height:100%; transform: translateX(-50%);max-width: unset;}
#container .gallery-list-wrap .gallery-list > li .item .txt-box {padding:20px 0;}
#container .gallery-list-wrap .gallery-list > li .item .txt-box .exhibit {display: block; overflow: hidden; font-weight:400; font-size:1rem; color:#4A4A4A; text-overflow:ellipsis; white-space:nowrap;}
#container .gallery-list-wrap .gallery-list > li .item .txt-box .tit {display: block; overflow: hidden; padding:10px 0 6px; font-weight:700; font-size:1.625rem; color:#4A4A4A; text-overflow:ellipsis; white-space:nowrap;}
#container .gallery-list-wrap .gallery-list > li .item .txt-box .date {display: block; overflow: hidden; font-weight:400; font-size:1.125rem; color:#4A4A4A; text-overflow:ellipsis; white-space:nowrap;}

#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(1),
#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(2) {width:50%;}
#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(1) .item .img-box::before,
#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(2) .item .img-box::before {padding-top:66.579%;}

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#container .gallery-list-wrap .gallery-list > li .item .img-box img {transition:transform 0.4s;}
#container .gallery-list-wrap .gallery-list > li:focus .item .img-box img,
#container .gallery-list-wrap .gallery-list > li:hover .item .img-box img {transform: translateX(-50%) scale(1.1);}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
	#container .gallery-list-wrap .gallery-list {margin:0 -20px;}
	#container .gallery-list-wrap .gallery-list > li {padding:10px 20px 90px;}
	#container .gallery-list-wrap .gallery-list > li .item .txt-box .tit {padding:4px 0; font-size:1.25rem;}
	#container .gallery-list-wrap .gallery-list > li .item .txt-box .date {font-size:1.0625rem;}
}
@media screen and (max-width:1024px) {
	#container .gallery-list-wrap .gallery-list > li {padding:10px 20px 80px;}
}
@media screen and (max-width:800px) {	
	#container .gallery-list-wrap .gallery-list > li {width:50%; padding:5px 20px 80px;}
	#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(1),
	#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(2) {width:100%;}
}
@media screen and (max-width:425px) {
	#container .gallery-list-wrap .gallery-list {margin:0 -10px;}
	#container .gallery-list-wrap .gallery-list > li {width:100%; padding:5px 10px 50px;}
	#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(1) .item .img-box::before,
	#container .gallery-list-wrap.type-a .gallery-list > li:nth-child(2) .item .img-box::before {padding-top:100%;}
}


/*-------------------------------------------------------------------
	분류그룹 : board > 디지털 수장고
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .digital-list-wrap {display: block;}
#container .digital-list-wrap .gallery-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin:0 -15px; flex-wrap:wrap;}
#container .digital-list-wrap .gallery-list > li {width:25%; padding:10px 15px 50px;}
#container .digital-list-wrap .gallery-list > li .item {display: block; }
#container .digital-list-wrap .gallery-list > li .item .img-box {display: block; overflow: hidden; position:relative; background-color:#F4F4F4;}
#container .digital-list-wrap .gallery-list > li .item .img-box::before {content:''; display: block; padding-top:100%;}
#container .digital-list-wrap .gallery-list > li .item .img-box img {position:absolute; top: 50%; left: 0; width: 100%; height:100%; object-fit: cover; object-position: center; transform: translateY(-50%);}
#container .digital-list-wrap .gallery-list > li .item .img-box img.high {top: 0; left: 50%; transform: translateX(-50%) translateY(0);}
#container .digital-list-wrap .gallery-list > li .item .txt-box {padding:5px 0; text-align: center;}
#container .digital-list-wrap .gallery-list > li .item .txt-box .tit {display: block; overflow:hidden; padding:10px 0 6px; font-weight:700; font-size:1.125rem; color:#4A4A4A; text-overflow:ellipsis; white-space:nowrap;}
#container .digital-list-wrap .gallery-list > li .item .txt-box .txt {display: block;  overflow:hidden;  font-weight:400; font-size:1rem; color:#4A4A4A;  text-overflow:ellipsis; white-space:nowrap;}

/*-------------------------------------------------------------------
@interaction 
-------------------------------------------------------------------*/
#container .digital-list-wrap .gallery-list > li .item .img-box img {transition: width 0.3s, height 0.3s;}
/* #container .digital-list-wrap .gallery-list > li .item:focus .img-box img,  */
/* #container .digital-list-wrap .gallery-list > li .item:hover .img-box img {object-fit: contain;} */

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
	#container .digital-list-wrap .gallery-list {margin:0 -10px;}
	#container .digital-list-wrap .gallery-list > li {padding:10px 10px 50px;}
}
@media screen and (max-width:1024px) {
	#container .digital-list-wrap .gallery-list > li {width:33.3333%;}
}
@media screen and (max-width:800px) {
	#container .digital-list-wrap .gallery-list {margin:0 -5px;}
	#container .digital-list-wrap .gallery-list > li {padding:10px 5px 40px;}
	#container .digital-list-wrap .gallery-list > li .item .txt-box .tit {font-size:1.0625rem;}
	#container .digital-list-wrap .gallery-list > li .item .txt-box .txt {font-size: 0.9375rem;}
}
@media screen and (max-width:600px) {
	#container .digital-list-wrap .gallery-list > li {width:50%;}
}
@media screen and (max-width:375px) {
	#container .digital-list-wrap .gallery-list > li {width:100%; padding:10px 5px 20px;}
	#container .digital-list-wrap .gallery-list > li .item .txt-box .tit {font-size:1.125rem;}
}

/*-------------------------------------------------------------------
	분류그룹 : board > 디지털 수장고 > detail
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .digital-detail {width:100%; height:100%; padding:85px 0; background-color:#d9d9d9;}
#container .digital-detail .digi-box {margin:0 auto; max-width:800px;}
#container .digital-detail .digi-box .img-box {position:relative; text-align: center;}
#container .digital-detail .digi-box .img-box > img {display: block; width:100%;}
#container .digital-detail .digi-box .txt-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding:40px 50px; background-color:#ffffff;}
#container .digital-detail .digi-box .txt-box .description {width:50%;}
#container .digital-detail .digi-box .txt-box .description .tit {display: block; margin-bottom:20px; font-weight:700; font-size:1.125rem; color:#6A6A6A; word-break: break-all; white-space: wrap;}
#container .digital-detail .digi-box .txt-box .description .txt-con {display: block;}
#container .digital-detail .digi-box .txt-box .description .txt-con .cell {display: block; margin-bottom:3px; font-weight:500; font-size:0.875rem; color:#6A6A6A; word-break: break-all;}
/* #container .digital-detail .digi-box .txt-box .description .txt-con .cell.donate {margin-top:5px; font-size:0.925rem; font-weight:600;} */
#container .digital-detail .digi-box .txt-box .description.en {font-family:'transat-text','Roboto';}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:600px) {
	#container .digital-detail .digi-box .txt-box {display: block;}
	#container .digital-detail .digi-box .txt-box .description {width:100%;}
	#container .digital-detail .digi-box .txt-box .description.ko {margin-bottom:20px;}
}


/*-------------------------------------------------------------------
	분류그룹 : board > 조직도 (people)
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .people-list-wrap {display: block; margin-top:50px;}
#container .people-list-wrap .people-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin:0 -30px; flex-wrap:wrap;}
#container .people-list-wrap .people-list > li {width:25%; padding:20px 30px 70px;}
#container .people-list-wrap .people-list > li .item {display: block;}
#container .people-list-wrap .people-list > li .item .img-box {display: block; overflow: hidden; position:relative; background-color:#F4F4F4;}
#container .people-list-wrap .people-list > li .item .img-box::before {content:''; display: block; padding-top:100%;}
#container .people-list-wrap .people-list > li .item .img-box img {position:absolute; top:0; left:50%; height:100%; transform: translateX(-50%);}
#container .people-list-wrap .people-list > li .item .txt-box {padding:20px 0 5px;}
#container .people-list-wrap .people-list > li .item .txt-box .part {display: block; font-weight:500; font-size:1rem; color:#4A4A4A;}
#container .people-list-wrap .people-list > li .item .txt-box .tit {display: block; padding:10px 0 10px; font-weight:700; font-size:1.75rem; color:#4A4A4A; }
#container .people-list-wrap .people-list > li .item .txt-box .info {display: block; font-weight:400; font-size:1.125rem; color:#4A4A4A;}
#container .people-list-wrap .people-list > li .item .txt-box .email {margin-bottom:3px;}
#container .people-list-wrap .people-list > li .item .txt-box .tel {margin-top:5px;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
	#container .people-list-wrap .people-list {margin:0 -20px;}
	#container .people-list-wrap .people-list > li {padding:20px 20px;}
	#container .people-list-wrap .people-list > li .item .txt-box .tit {padding:6px 0 5px;}
}
@media screen and (max-width:1024px) {
	#container .people-list-wrap .people-list {margin:0 -10px;}
	#container .people-list-wrap .people-list > li {padding:20px 10px;}
	#container .people-list-wrap .people-list > li .item .txt-box .tit {padding:4px 0 5px; font-size:1.5rem;}
	#container .people-list-wrap .people-list > li .item .txt-box .email {margin-bottom:0px;}
}
@media screen and (max-width:800px) {	
	#container .people-list-wrap .people-list > li {width:33.3333%;}
	#container .people-list-wrap .people-list > li .item .txt-box {padding:15px 5px;}
}
@media screen and (max-width:600px) {
	#container .people-list-wrap .people-list {margin:0 -10px;}
	#container .people-list-wrap .people-list > li {width:50%; padding:20px 10px;}
	#container .people-list-wrap .people-list > li .item .txt-box {padding:15px 5px;}
}
@media screen and (max-width:475px) {
	#container .people-list-wrap .people-list {margin: 0 -5px;}
	#container .people-list-wrap .people-list > li {padding:10px 5px;}
	#container .people-list-wrap .people-list > li .item .txt-box {padding:15px 5px;}
	#container .people-list-wrap .people-list > li .item .txt-box .tit {font-size:1.375rem;}
}
@media screen and (max-width:475px) {
	#container .people-list-wrap .people-list {margin: 0;}
	#container .people-list-wrap .people-list > li {width:100%; padding:10px 0;}
}

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#container .people-list-wrap .people-list > li .item .img-box img {transition: transform 0.5s;}
#container .people-list-wrap .people-list > li .item:focus .img-box img,
#container .people-list-wrap .people-list > li .item:hover .img-box img {transform:scale(1.1) translatex(-50%);}

/*-------------------------------------------------------------------
	분류그룹 : filter 필터
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#filterModal {display: block; visibility: hidden; position:fixed; top:0; left:0; z-index: 300; width:100%; height:100vh;}
#filterModal .bg {position:absolute; top:0; left:0; z-index: 301; width:100%; height:100%;}
#filterModal .filter-wrap {position:absolute; overflow: auto; top:0; right:-100%; z-index: 302; width:600px; height:100%; padding:60px 80px; background-color:#ffffff;}
#filterModal .filter-wrap .btn-close {position:absolute; top:30px; right:80px; width:30px; height:30px; background-color:transparent;}
#filterModal .filter-wrap .btn-close .ln {display: block; position:relative; width:20px; height:20px;} 
#filterModal .filter-wrap .btn-close .ln::before {content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:2px; background-color:#707070; transform: translate(-50%,-50%) rotate(45deg) ;}
#filterModal .filter-wrap .btn-close .ln::after {content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:2px; background-color:#707070; transform: translate(-50%,-50%) rotate(-45deg);}

#filterModal .filter-wrap .con-head {display: block;}
#filterModal .filter-wrap .con-head .tit {display: block; margin-bottom:30px; font-weight:500; font-size:1.125rem; color:#6A6A6A; letter-spacing:0.2rem;}
#filterModal .filter-wrap .con-head ul li > button,
#filterModal .filter-wrap .con-body ul li > button {background-color:transparent;}
#filterModal .filter-wrap .con-head .filter-list {display: block;}
#filterModal .filter-wrap .con-head .filter-list > li {width:100%;  margin-bottom:15px;}
#filterModal .filter-wrap .con-head .filter-list > li .filter {display: block; position:relative; padding-left:0; font-weight:400; font-size:1.25rem; color:#6A6A6A; }

#filterModal .filter-wrap .con-body {display: block; margin-top:50px;}
#filterModal .filter-wrap .con-body .name-list {display: block; overflow-y: auto; max-height:450px;}
#filterModal .filter-wrap .con-body .name-list > li {width:100%; margin-bottom:15px;}
#filterModal .filter-wrap .con-body .name-list > li .check > input[type="checkbox"]:checked + .name,
#filterModal .filter-wrap .con-body .name-list > li .check > input[type="checkbox"]:checked + .total {color: #000000; font-weight:700;}
#filterModal .filter-wrap .con-body .name-list > li .btn-name {display: block; font-weight:400; font-size:1rem; color:#6A6A6A;}
#filterModal .filter-wrap .con-body .btn-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top:30px;}
#filterModal .filter-wrap .con-body .btn-list > li {display: block; margin-right:20px;}
#filterModal .filter-wrap .con-body .btn-list > li:last-child {margin-right:0;}
#filterModal .filter-wrap .con-body .btn-list > li .btn {overflow: hidden; position:relative; z-index: 2; width:150px; border:1px solid #707070; line-height: 40px; font-weight:400; font-size:1rem; color:#707070;}
#filterModal .filter-wrap .con-body .btn-list > li .btn::before {content:''; position:absolute; top:0; left:0; z-index: 1; width:0%; height:100%; background-color:#000000;}
#filterModal .filter-wrap .con-body .btn-list > li .btn > span {position:relative; z-index: 100; color:#707070;}

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#filterModal.active {visibility: visible; transition: visibility 0s 0s;}
#filterModal .bg {transition:background 0.3s;}
#filterModal.active .bg {background-color:rgba(118,118,118,0.2);}
#filterModal .filter-wrap {transition:right 0.3s;}
#filterModal.active .filter-wrap {right:0;}

#filterModal .filter-wrap .con-head .filter-list > li .filter {transition: font-weight 0.3s, padding 0.3s,color 0.3s;}
#filterModal .filter-wrap .con-head .filter-list > li .filter::before {transition: opacity 0.3s; opacity: 0;}
#filterModal .filter-wrap .con-head .filter-list > li:hover .filter,
#filterModal .filter-wrap .con-head .filter-list > li:focus .filter {font-weight:bold; color:#000000;}

#filterModal .filter-wrap .con-body .name-list > li .btn-name {transition:font-weight 0.3s, color 0.3s;}
#filterModal .filter-wrap .con-body .name-list > li:focus .btn-name,
#filterModal .filter-wrap .con-body .name-list > li:hover .btn-name {font-weight:bold; color:#000000;}

#filterModal .filter-wrap .con-body .btn-list > li .btn::before {transition: width 0.3s;}
#filterModal .filter-wrap .con-body .btn-list > li .btn > span {transition: color 0.3s;}
#filterModal .filter-wrap .con-body .btn-list > li .btn:hover::before,
#filterModal .filter-wrap .con-body .btn-list > li .btn:focus::before {width:100%;}
#filterModal .filter-wrap .con-body .btn-list > li .btn:hover > span,
#filterModal .filter-wrap .con-body .btn-list > li .btn:focus > span {color:#ffffff;}


/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#container #filterModal .filter-wrap {width:100%; padding:60px;}
	#container #filterModal .filter-wrap .btn-close {right:40px;}
}
@media screen and (max-width:600px) {
	#container #filterModal .filter-wrap {width:100%; padding:60px 50px;}
	#container #filterModal .filter-wrap .con-body .btn-list > li .btn {width:130px;}
}
@media screen and (max-width:375px) {
	#container #filterModal .filter-wrap .con-body .btn-list {display:block;}
	#container #filterModal .filter-wrap .con-body .btn-list > li {width:100%; margin-right:0; margin-bottom:5px;}
	#container #filterModal .filter-wrap .con-body .btn-list > li .btn {width:100%;}
}

/*-------------------------------------------------------------------
	분류그룹 : 연구 > 리스트 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .rsch-wrap {display: block; margin-bottom:70px;}
#container .rsch-wrap .tit-area {display: block; margin-bottom:60px; text-align: center;}
#container .rsch-wrap .tit-area .sub-tit {display: block; font-weight:400; font-size:1.5rem; color:#707070;}

#container .rsch-wrap > .rsch-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin:0 -25px; flex-wrap:wrap;}
#container .rsch-wrap > .rsch-list li {width:25%; padding:25px;}
#container .rsch-wrap > .rsch-list li .item {display: block; padding:30px; border:1px solid #707070;}
#container .rsch-wrap > .rsch-list li .item .txt-box {display: block;}
#container .rsch-wrap > .rsch-list li .item .tag {display: block; margin-bottom:8px; font-weight:500; font-size:0.875rem; word-break: break-word;}
#container .rsch-wrap > .rsch-list li .item .tit {display: inline-block; overflow: hidden; position:relative; width:100%; margin-bottom:25px; padding-bottom:4px; font-weight:700; font-size:1.5rem; text-overflow: ellipsis; white-space: nowrap; width:100%;}
#container .rsch-wrap > .rsch-list li .item .tit::before {content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#4A4A4A;} 
#container .rsch-wrap > .rsch-list li .item .con-box {display: block; overflow: hidden; min-height:196px; max-height:196px;}
#container .rsch-wrap > .rsch-list li .item .con-box .txt {display:-webkit-box; overflow: hidden; line-height: 1.9; -webkit-line-clamp:6;-webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-all;}
#container .rsch-wrap > .rsch-list li .item .con-box img {display: block; width:100%; height:100%;}

#container .rsch-wrap .btn-load {margin-top:70px;}
/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#container .rsch-wrap > .rsch-list li .item .tit::before {transition: width 0.3s;}
#container .rsch-wrap > .rsch-list li:focus .item .tit::before,
#container .rsch-wrap > .rsch-list li:hover .item .tit::before {width:100%;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1600px) {
	#container .rsch-wrap > .rsch-list {margin:0 -15px;}
	#container .rsch-wrap > .rsch-list li {padding:15px;}	
}
@media screen and (max-width:1300px) {	
	#container .rsch-wrap > .rsch-list li {width:50%;}	
	#container .rsch-wrap .tit-area .tit-01 {margin-bottom:30px;}
	#container .rsch-wrap .tit-area .sub-tit {font-size:1.325rem;}
}
@media screen and (max-width:600px) {
	#container .rsch-wrap .tit-area {margin-bottom:40px;}
	#container .rsch-wrap .tit-area .sub-tit {font-size:1.125rem;}

	#container .rsch-wrap > .rsch-list {margin:0 -10px;}
	#container .rsch-wrap > .rsch-list li {padding:10px;}
	#container .rsch-wrap > .rsch-list li .item {padding:20px;}	
	#container .rsch-wrap > .rsch-list li .item .con-box {min-height:146px; max-height:146px;}	
	#container .rsch-wrap > .rsch-list li .item .con-box .txt {-webkit-line-clamp:5;}
}
@media screen and (max-width:475px) {
	#container .rsch-wrap > .rsch-list li {width:100%;}
}