@import url("sub.css");


/* 리스트 */
.recent .inner {
	max-width: 1640px;
}
.recent .list {
	flex-direction: row;
    flex-wrap: wrap;
    border-top: 1px solid #1D224F;
    padding-top: 80px;
}
.recent .list li {
    width: 785px;
    margin-right: 30px;
    margin-bottom: 30px;
    background: #F3F3F3;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
}
.recent .list li:nth-child(2n) {
	margin-right: 0;
}
.recent .list li button {
	display: block;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	font-family: 'Cafe24Ohsquareair';
}
.recent .list li .subject {
	background: #1D224F;
	color: #fff;
	text-align: center;
	font-size: 25px;
	padding: 25px 0;
	margin-bottom: 10px;
}
.recent .list li .flex > div.thumb {
	width: 350px;
	height: 495px;
}
.recent .list li .flex > div.thumb img {
	width: 100%;
	border: 1px solid #000;
	box-sizing: border-box;
}
.recent .list li .flex > div.info {
	width: 385px;
	margin-left: 10px;
}
.recent .list li .flex > div.info > div {
	width: 100%;
	background: #FFFFFF;
	border: 0.5px solid #1D224F;
	min-height: 65px;
	font-size: 20px;
	text-align: left;
	padding: 0 20px;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.recent .list li .flex > div.info > div .cell {
	vertical-align: middle;
}
.recent .list li .flex > div.info > div.yunsa,
.recent .list li .flex > div.info > div.info {
	white-space: pre-line;
	height: 167px;
	padding: 0;
}
.recent .list li .flex > div.info > div.yunsa .cell div,
.recent .list li .flex > div.info > div.info .cell div {
	max-height: 117px;
	padding: 0 20px;
	overflow-x: hidden;
    overflow-y: visible;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}




@media screen and (max-width: 1640px){
	.recent .list li {
		width: 49%;
    	margin-right: 2%;
	}
	.recent .list li .flex > div.thumb {
		width: 275px;
		height: auto;
	}
	.recent .list li .flex > div.info {
	    width: calc(100% - 285px);
	}
	.recent .list li .flex > div.info > div {
	    font-size: 15px;
	    min-height: 50px;
	    padding: 0 13px;
	}
	.recent .list li .flex > div.info > div.yunsa, 
	.recent .list li .flex > div.info > div.info {
		height: 129px;
	}
	.recent .list li .flex > div.info > div.yunsa .cell div, 
	.recent .list li .flex > div.info > div.info .cell div {
	    max-height: 91px;
	    padding: 0 13px;
	}
}
@media screen and (max-width: 1280px){
	.recent .list li .subject {
	    font-size: 20px;
	    padding: 20px 0;
	}
	.recent .list li .flex > div.thumb {
	    width: 210px;
	    height: auto;
	}
	.recent .list li .flex > div.info {
	    width: calc(100% - 200px);
	}
	.recent .list li .flex > div.info > div {
    	font-size: 12px;
		padding: 12px 10px;
	    min-height: 54px;
    }
    .recent .list li .flex > div.info > div.yunsa, 
	.recent .list li .flex > div.info > div.info {
		height: 72px;
	}
	.recent .list li .flex > div.info > div.yunsa .cell div, 
	.recent .list li .flex > div.info > div.info .cell div {
	    max-height: 32px;
	    padding: 0 10px;
	}
}
@media screen and (max-width: 1024px){
	.recent .list li .flex {
		display: block;
	}
	.recent .list li .flex > div.thumb {
		width: 100%;
	}
	.recent .list li .flex > div.info {
		margin: 10px 0 0;
		width: 100%;
	}
	.recent .list li .flex > div.info > div.yunsa, 
	.recent .list li .flex > div.info > div.info {
		height: 120px;
	}
	.recent .list li .flex > div.info > div.yunsa .cell div, 
	.recent .list li .flex > div.info > div.info .cell div {
	    max-height: 85px;
	}
}
@media screen and (max-width: 768px){
	.recent .list {
	    padding-top: 60px;
	}
	.recent .list li {
		width: 100%;
		margin: 10px 0;
	}
	.recent .list li .flex > div.info > div {
	    font-size: 15px;
	    padding: 17px 10px;
	}
}