@charset "utf-8";

/* 최신글 뉴스 스킨 기본 그리드 레이아웃 */
.news { width: 100%; position: relative; }
.news ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;  width: 100%;}

/* 카드 아이템 기본 스타일 (모든 카드 동일한 기본값 및 전환 효과 부여) */
.news li.galley_li { background: #fff; border: 1px solid #e7eaec; border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; box-sizing: border-box; overflow: hidden; }
.news li.galley_li .in_area { display: flex; flex-direction: column; justify-content: space-between; min-height: 290px; padding: 35px 25px 25px; text-decoration: none; box-sizing: border-box; height: 100%; }

/* 텍스트 영역 기본 스타일 (컬러 전환 transition 적용) */
.news li.galley_li .tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 23px; font-weight: 700; color: #222; line-height: 1.45; margin: 0 0 18px 0; word-break: keep-all; transition: color 0.3s ease; }
.news li.galley_li .bo_cnt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; font-weight: 400; color: #777; line-height: 1.6; word-break: keep-all; margin: 0; transition: color 0.3s ease; }

/* 카드 하단 작성일 기본 스타일 */
.news li.galley_li .con_bot { margin-top: auto; padding-top: 25px; text-align: right; }
.news li.galley_li .lt_date { font-size: 17px; font-weight: 400; color: #999; transition: color 0.3s ease; }
.news .empty_li { grid-column: 1 / -1; line-height: 180px; text-align: center; color: #888; }

/* 마우스 Hover 시: 그린/청록 컬러로 배경 전환 및 텍스트 화이트 반전 (핵심) */
.news li.galley_li:hover { background: #00a69c; border-color: #00a69c; transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0, 166, 156, 0.28); }
.news li.galley_li:hover .tit { color: #fff; }
.news li.galley_li:hover .bo_cnt { color: rgba(255, 255, 255, 0.85); }
.news li.galley_li:hover .lt_date { color: rgba(255, 255, 255, 0.8); }

/* 스킨 반응형 미디어 쿼리 */


@media all and (max-width : 1360px) { 
	.news ul { gap: 15px; }
	.news li.galley_li .in_area { min-height: 270px; padding: 25px 18px 20px; }
	.news li.galley_li .tit { font-size: 17px; } 
}

@media all and (max-width : 1280px) { 
	.news ul {grid-template-columns: repeat(2, 1fr);}
	
	
}

@media all and (max-width : 1100px) { 
	.news ul { grid-template-columns: repeat(2, 1fr); gap: 20px; } 
}

@media all and (max-width : 640px) { 
	.news ul { grid-template-columns: repeat(1, 1fr); gap: 15px; }
	.news li.galley_li .in_area { min-height: auto; padding: 25px 20px; } 
}