@charset "utf-8";

/* 새글 스킨 (latest) */
.newsWrap {position:relative;}
.newsWrap > ul {display:flex;flex-wrap:wrap;gap: 16px;justify-content: space-between; width:100%;}
.newsWrap > ul > li {position:relative; width:calc(25% - 12px);}

.newsWrap .newsImgBox {height: auto !important;}
.newsWrap .newsImgBox .no_image {background: #eaeaea;display: flex;align-items: center;justify-content: center;color: #777;font-size: 1.25em;text-transform: uppercase;font-weight: bold;}
.newsWrap .newsImgBox img {width:100%;}
.newsWrap .newsTxtBox {opacity:0;transition-duration:.3s;position:absolute;top:0;left:0;background:rgba(0,0,0,0.85);width:100%;height:100%;margin: 0;color: #fff;text-align: center;display: flex;align-items: center;justify-content: center;}
.newsWrap .newsTxtBox > div {width:100%; position:relative;}
.newsWrap .newsTxtBox:before {position:absolute; display:block; content:''; width:calc(100% - 44px); height:calc(100% - 44px); border:1px solid #fff; opacity:0.5; top:22px; right:22px;}
.newsWrap .newsTxtBox:after {position:absolute; display:block; content:''; width:4px; height:5px; background:#fff; border-radius:50%; top:20px; right:20px;}
.newsWrap .newsTxtBox h5 {color:#fff;font-size:20px;margin: 15px auto 30px;font-weight: 700;letter-spacing: -.5px; line-height:1.25; width:calc(100% - 50px);}
.newsWrap .newsTxtBox .bo_cnt {display:block;color:#fff;font-size:16px;width:75%;margin:auto;word-break:keep-all;overflow: visible; line-height:1.25;}
.newsWrap .newsTxtBox ul {display:flex; justify-content:center; gap:20px; align-items:flex-end;}
.newsWrap .newsTxtBox ul li {font-size:12px; position:relative;}
.newsWrap .newsTxtBox ul li a {position:absolute; width:100%; height:100%; display:block;}
.newsWrap .newsTxtBox ul li .viewContent {display:block; content:url('img/icon_viewContent.png'); margin:0 auto 6px;}
.newsWrap .newsTxtBox ul li .viewOriginal {display:block; content:url('img/icon_viewOriginal.png'); margin:0 auto 6px;}
.newsWrap .basic_li:hover .newsTxtBox {opacity:1;}

    @media screen and (max-width:1499px){
		.newsWrap .newsTxtBox h5 {font-size:19px;}
		.newsWrap .newsTxtBox .bo_cnt {font-size:15px;}
	}

    @media screen and (max-width:1199px){
		.newsWrap > ul > li {width:calc(100%/3 - 32px/3);}
		.newsWrap .newsTxtBox:before {width:calc(100% - 30px); height:calc(100% - 30px); top:15px; right:15px;}
		.newsWrap .newsTxtBox:after {top: 13px;right: 14px;}
		.newsWrap .newsTxtBox h5 {width: calc(100% - 40px);}
		.newsWrap .newsTxtBox .bo_cnt {}
		
	}

    @media screen and (max-width:999px){
		.newsWrap .newsTxtBox h5 {font-size:17px;margin: 15px auto 22px;}
		.newsWrap .newsTxtBox .bo_cnt {font-size: 14px;}
	}

    @media screen and (max-width:799px){
        .newsWrap > ul > li {width:calc(50% - 8px);}		
		.newsWrap .newsTxtBox ul li {font-size:10px;}
    }

	@media screen and (max-width:599px){
        .newsWrap > ul {gap:10px;}
        .newsWrap > ul > li {width:calc(50% - 5px);}
		.newsWrap .newsTxtBox:before {width:calc(100% - 20px); height:calc(100% - 20px); top:10px; right:10px;}
		.newsWrap .newsTxtBox:after {top: 8px;right: 8px;}
		.newsWrap .newsTxtBox h5 {width:75%;margin: 0 auto 20px;}
		.newsWrap .newsTxtBox .bo_cnt {display:none;}
		.newsWrap .newsTxtBox ul {gap:15px;}
		
    }

	@media screen and (max-width:399px){
		.newsWrap .newsTxtBox h5 {font-size:14px;}
	}