@charset "utf-8";
/* CSS Document */

.board-grid-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto; max-width:var(--layout-width);}
.grid-wrap{display: grid; grid-template-columns: repeat(4, calc(25% - 16.5px)); gap: 40px 22px;}
.grid-wrap > .box-wrap{ width: 100%; /* 그리드 셀의 전체 너비를 차지하도록 설정 */
    box-sizing: border-box; /* 패딩과 보더를 포함한 너비 계산 */
    margin: 0; /* 불필요한 마진 제거 */
    padding: 0; /* 불필요한 패딩 제거 */
 display: block;}
.grid-wrap > .box-wrap > .image-wrap{width:100%; position:relative; overflow: hidden;}
.grid-wrap > .box-wrap > .image-wrap:after{content:""; display:block; clear:both; padding-top:69%;}
.grid-wrap > .box-wrap > .image-wrap > img{width:100%; height: 100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); object-fit: cover; object-position: center; transition: all .3s;}
.grid-wrap > .box-wrap:hover > .image-wrap > img{width:105%; height: 105%; transition: all .3s;}
.grid-wrap > .box-wrap > .tlt{font-size:var(--font-size-medium); font-weight: 500; margin-top:var(--gap-15);}
.grid-wrap > .box-wrap > .info-name{color:var(--color-font); margin-top:var(--gap-5); font-size:var(--font-size-normal);}
.grid-wrap > .box-wrap > .info-wrap{display:flex; flex-wrap:wrap; align-items: center; margin-top:var(--gap-5);}
.grid-wrap > .box-wrap > .info-wrap > img{margin:0 var(--gap-10);}
.grid-wrap > .box-wrap > .info-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}

#thumbnail-list{width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-board); margin: auto; padding:var(--gap-140) 0;}
#thumbnail-list > .head-wrap{display:flex; flex-wrap: wrap;  align-items: center; justify-content: space-between;}
#thumbnail-list > .head-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}
#thumbnail-list > .head-wrap > p > span{color:var(--color-primary); font-weight: 600;}
#thumbnail-list > .head-wrap > .thumbnail-search-wrap{width:236px; display:flex; align-items: center; border-bottom:1px solid var(--color-border); padding:5px 0; background-color:transparent;}
#thumbnail-list > .head-wrap > .thumbnail-search-wrap > input{border:none; background-color:transparent; width:calc(100% - 26px); height: 25px;}
#thumbnail-list > .content-wrap > ul{display:flex; margin-top:var(--gap-40); flex-wrap:wrap;}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap{width:30%; position:relative; background-color: var(--color-background); cursor: pointer; overflow: hidden; border:1px solid var(--color-border);}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap:after{content:""; display:block; clear:both; padding-top:56%;}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap img{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); object-fit: cover; width:100%; height: 100%; object-position: center; transition:all .3s;}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap:hover img{width:105%; height: 105%;}
#thumbnail-list > .content-wrap > ul li.cont{width:calc(70% - var(--gap-40)); margin-left:var(--gap-40);}
#thumbnail-list > .content-wrap > ul li.cont .tlt{font-size:var(--font-size-large); font-weight: 600; margin-bottom:var(--gap-20);}
#thumbnail-list > .content-wrap > ul li.cont .cont{font-size:var(--font-size-normal); color:var(--color-font); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow: hidden;}
#thumbnail-list > .content-wrap > ul li.cont .date{text-align: right; font-size:var(--font-size-normal); color:var(--color-font); margin-top:var(--gap-20);}

#thumbnail-list.read-wrap{padding:var(--gap-140) 0;}
#thumbnail-list.read-wrap > .inner-wrap{ margin:0 auto; max-width:960px;}
#thumbnail-list.read-wrap h1.title{color:#000; text-align: center; font-weight: 600; font-size:var(--font-size-xxxlarge); margin:var(--gap-50) 0 var(--gap-20) 0;}
#thumbnail-list.read-wrap .head-info-wrap{display:flex; justify-content:center; align-items: center; flex-wrap: wrap; color:var(--color-font); padding:0 0 var(--gap-40) 0;}
#thumbnail-list.read-wrap .head-info-wrap .info-wrap{display: flex; align-items: center;}
#thumbnail-list.read-wrap .head-info-wrap .info-wrap > .hv{width:1px; height: 15px; background-color: var(--color-border); margin:0 var(--gap-15);}
#thumbnail-list.read-wrap .cont-wrap{padding:var(--gap-50) 0; color:var(--color-font); font-size:var(--font-size-normal); font-weight: 400;}
#thumbnail-list.read-wrap .cont-wrap img{max-width:100%;}
#thumbnail-list.read-wrap .btn-wrap{display:flex; justify-content: center; margin:var(--gap-30) 0;}
#thumbnail-list.read-wrap .file-wrap{margin-bottom:var(--gap-40);}
#thumbnail-list .pn-wrap{width:100%; padding:var(--gap-15); border-top:1px solid var(--color-border); display:flex; align-items: center; transition:all .5s;}
#thumbnail-list .pn-wrap:hover{background-color:#e8e8e8; transition:all .5s;}
#thumbnail-list .pn-wrap:last-of-type{border-bottom:1px solid var(--color-border);}
#thumbnail-list .pn-wrap > svg{margin:0 var(--gap-15);}

@media only screen and (max-width:768px){
	.grid-wrap{ grid-template-columns: repeat(3, calc(33% - 11px));}
}

@media only screen and (max-width:540px){
	.grid-wrap{ grid-template-columns: repeat(2, calc(50% - 8px)); gap: 30px 15px;}
	#thumbnail-list > .content-wrap > ul li.thumnail-wrap{width:100%;}
	#thumbnail-list > .content-wrap > ul li.cont{width:100%; margin-left:0; margin-top:var(--gap-40);}
	#thumbnail-list > .head-wrap{flex-direction: column-reverse;}
	#thumbnail-list > .head-wrap > p{width:100%; margin-top:var(--gap-20);}
	#thumbnail-list > .head-wrap > .search-wrap{width:100%;}
	
}

@media only screen and (max-width:320px){
	.grid-wrap{grid-template-columns: repeat(1, 1fr); gap: 25px 0;}
}