@charset "utf-8";
/* 새글 스킨 (latest) */

.latBox {position:relative; font-family: "Noto Sans KR", sans-serif; width: calc(100% + 10px); left:-5px;   }
.latBox ul {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-top: 30px}
.latBox ul li {width: 50%; }

.latBox ul li > div {padding: 10px; }
.latBox ul li a {position: relative; display: block; width: 100%; height: 100%; border: 1px solid #cacaca; padding: 10px; background: #fff; color:#343a40; transition: all 0.3s;
	box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.15);
}
.latBox ul li a::after,
.latBox ul li a::before {
	display: block;
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 100;
    opacity: 0;
    -webkit-transition: opacity 0.3s -webkit-transform 0.3s;
    transition: opacity 0.5s, transform 0.5s;
}
.latBox ul li a::before {
	border-top: 2px solid #00baff ;
    border-bottom: 2px solid #00baff ;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}
.latBox ul li a::after {
	border-left: 2px solid #00baff ;
    border-right: 2px solid #00baff ;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}
.latBox ul li a:hover::after,.latBox ul li a:hover::before,
.latBox ul li a:focus::after,.latBox ul li a:focus::before {
	opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.latBox ul li .lt-title {font-size: 16px; font-weight: 500; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 22px; color:inherit;}
.latBox ul li .lt-date {margin: 10px 0; font-size: 12px; height: 16px; color:inherit;}
.latBox ul li .lt-content {font-size: 14px; font-weight: 300; position: relative;  line-height: 21px; overflow: hidden;text-overflow: ellipsis; height: calc(100% - 58px); color:inherit;}
.latBox ul li .lt-content::after {content: "..."; display: block; position: absolute; background: #fff; bottom: 0; right: 0; padding: 0 2px ; color:#343a40; transition: all 0.3s;  }
.latBox ul li a:hover .lt-content::after ,
.latBox ul li a:hover { }

@media (min-width:576px){ /* 폰가로 */
	.latBox ul li a {padding: 15px;}
}
@media (min-width:767px){ /*테블릿 세로*/
	.latBox ul li a {padding: 20px;}
}

@media (min-width:992px){ /* 테블릿 가로*/
	.latBox ul li {width: 25%;}
	.latBox ul li a {padding: 25px;}
}

@media (min-width:1200px) { /* PC */
	
}