@charset "utf-8";


.latest-event-container, .latest-event-container .container_div{
	background-color:#202125;
	padding-top: 20px;
    padding-bottom: 35px;
}

.latest-event-container header h2, .latest-event-container .sct_wrap header .btn_more{
	color:#fff;
}

.latest-event-container .sct_wrap header h2:after{
	border-bottom: 1px solid #fff;
}

/* 기본 컨테이너 설정 */
.latest_event {
    width: 100%;
    margin: 30px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 제목 헤더 스타일 (제공해주신 캡처의 MORE 버튼 스타일 반영) */
.latest_event header {
    display: block;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.latest_event header h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.latest_event .btn_more {
    font-size: 0.85rem;
    text-decoration: none;
}

/* 리스트 그리드 설정 */
.latest_event .pic_lt ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 아이템 간 간격 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest_event .pic_lt ul li{
	position:relative;
}

.latest_event .pic_lt ul li .lt_tit{
	position:absolute;
	top:0px;
	left:0px;
	padding:1em;
	color:#fff;
}



/* 개별 리스트 아이템 (PC: 4열) */
.latest_event .pic_lt li {
    width: calc(25% - 15px); /* 4열 배치 */
    margin-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 이미지 영역 스타일 (이미지와 같이 둥근 모서리 적용) */
.latest_event .lt_img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 비율 유지 (이미지 형태에 따라 조절 가능) */
    overflow: hidden;
    border-radius: 20px; /* 캡처와 같은 깊은 둥근 모서리 */
    margin-bottom: 12px;
    background: #f8f8f8;
}

.latest_event .lt_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채움 */
    transition: transform 0.3s ease;
}

/* 이미지 호버 효과 */
.latest_event .lt_img:hover img {
    transform: scale(1.05);
}

/* 제목 스타일 (이미지 아래 중앙 배치) */
.latest_event .pic_lt li {
    text-align: center; /* 제목 중앙 정렬 */
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    word-break: keep-all;
}

/* -------------------------------------------
   모바일 대응 (반응형: 2열 구성)
------------------------------------------- */
@media (max-width: 768px) {
    .latest_event .pic_lt ul {
        gap: 10px; /* 모바일에서는 간격 축소 */
    }

    .latest_event .pic_lt li {
        width: calc(50% - 5px); /* 모바일: 2열 배치 */
    }

    .latest_event .lt_img {
        border-radius: 15px; /* 모바일은 조금 적은 곡률 */
    }

    .latest_event .pic_lt li {
        font-size: 0.9rem; /* 글자 크기 축소 */
    }
}