@charset "utf-8";

/* 새글 스킨 (latest) */

.latNotice {}
.latNotice ul {}
.latNotice ul li.basicBox {background:#f9f9f9; box-shadow:0 3px 6px rgba(0,0,0,0.08); transition:0.5s;}
.latNotice ul li.basicBox a {width:100%; height:100%; display:block; box-sizing:border-box; padding: 40px 20px 30px;}
.latNotice ul li.basicBox:first-child {margin-left:0;}
.latNotice ul li.basicBox .cate {text-transform:uppercase; font-weight:500; color:rgba(0,0,0,0.5); margin-bottom:20px;}
.latNotice ul li.basicBox h5 {font-size:20px; font-weight:900; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;}
.latNotice ul li.basicBox .contents {width:100%; height:80px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; letter-spacing:-0.05em; margin-top:15px;}
.latNotice ul li.basicBox .datetime {font-size:14px; color:rgba(0,0,0,0.5); text-align:right; margin-top:22px;}

	@media screen and (max-width:999px){
		.latNotice ul li.basicBox .cate {font-size:95%; margin-bottom:15px;}
		.latNotice ul li.basicBox h5 {font-size:120%; line-height:140%;}
		.latNotice ul li.basicBox .contents {font-size:100%;}
		.latNotice ul li.basicBox .datetime {font-size:90%;}
	}

	@media screen and (max-width:799px){
		.latNotice ul li.basicBox .cate {font-size:85%; margin-bottom:10px;}
		.latNotice ul li.basicBox a {padding:30px 20px 20px;}
		.latNotice ul li.basicBox h5 {font-size:110%;}
		.latNotice ul li.basicBox .contents {font-size:90%;}
		.latNotice ul li.basicBox .datetime {font-size:80%; margin-top:17px;}
	}

	@media screen and (max-width:499px){
		.latNotice ul li.basicBox .cate {font-size:75%;}
		.latNotice ul li.basicBox h5 {font-size:100%;}
		.latNotice ul li.basicBox .contents {font-size:80%;}
		.latNotice ul li.basicBox .datetime {font-size:70%; margin-top:17px;}
	}


.latNotice ul li.basicBox:hover {background:#06326a; color:#fff;}
.latNotice ul li.basicBox:hover .cate {color:rgba(255,255,255,0.5);}
.latNotice ul li.basicBox:hover .datetime {color:rgba(255,255,255,0.5);}


.latNotice .empty_li {width:100%; line-height:280px; text-align:center;}

	@media screen and (max-width:999px){
		.latNotice .empty_li {line-height:180px;}
	}