@charset "utf-8";
/* 공연정보 알림마당 최신글 스킨 (latest) */
.new_lt { 
    position: relative;
    margin-top: 30px;
    margin-bottom: 10px;
    background: #fff;
    padding: 0px 0px;
    width: 100%;
    box-sizing: border-box; /* 패딩과 테두리를 포함한 전체 너비 계산 */
}

.new_lt ul { 
    margin: 0 0 10px; 
    padding: 0; 
    list-style: none; 
    border: none; 
    /* ul 요소의 기본 여백과 패딩을 제거하고, 목록 스타일을 없애며, 테두리를 설정합니다. */
}

.new_lt li { 
border-top: 1px solid #f3f3f3; 
    padding: 4px 10px;  
    font-family: 'Noto Sans KR', sans-serif; /* Noto Sans KR 폰트를 사용합니다. */
    font-size: 1.1rem;
    font-weight: 400; /* Regular 스타일을 지정합니다. */
    /* li 요소에 상단 테두리와 내부 여백을 설정하고, 기본 폰트 크기를 지정합니다. */
    overflow: hidden !important; /* 영역을 벗어나는 텍스트 숨김 */
    text-overflow: ellipsis !important; /* 영역을 벗어나는 텍스트 말줄임표 표시 */
    white-space: nowrap !important; /* 텍스트를 한 줄로 표시 */
}

.new_lt li a {
    color: #000 !important; 
    display: block; /* a 요소를 블록 요소로 설정 */
    width: 100%; /* a 요소의 너비를 100%로 설정 */
    overflow: hidden !important; /* 영역을 벗어나는 텍스트 숨김 */
    text-overflow: ellipsis !important; /* 영역을 벗어나는 텍스트 말줄임표 표시 */
    white-space: nowrap !important; /* 텍스트를 한 줄로 표시 */
}

.new_lt li:first-child { 
    border: 0;   /* 첫 번째 li 요소의 테두리를 제거합니다. */
    padding: 4px  10px;

}

.new_lt li i { 
    color: #9da4bc;  
    /* i 요소의 텍스트 색상을 설정합니다. */
}

.new_lt li .fa-heart { 
    color: #ff0000; 
    /* 클래스가 'fa-heart'인 i 요소의 텍스트 색상을 빨간색으로 설정합니다. */
}

.new_lt li .new_icon { 
    display: inline-block; 
    padding: 0 3px; 
    line-height: 14px; 
    font-size: 0.833em; 
    color: #fff; 
    background: #c56bed; 
    /* 새로운 아이콘을 인라인 블록으로 표시하고, 패딩, 줄 높이, 폰트 크기, 텍스트 색상, 배경색을 설정합니다. */
}

.new_lt li .cnt_cmt { 
    color: #ff3970; 
    /* 클래스가 'cnt_cmt'인 요소의 텍스트 색상을 설정합니다. */
 padding: 0px 5px; 
}

.new_lt .new_title { 
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: space-between; /* 제목과 더보기 링크를 양쪽으로 배치 */
    font-size: 1.2rem;
    background-color: #e6e3e3; 
    margin-bottom: 10px; /* 제목과 콘텐츠 사이의 간격 설정 */
    border-radius:0px;
    padding: 0px 0px 0px 0px;
}

.newboard-title {
    color: #000;
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    flex: 1; /* 제목이 가능한 최대 너비를 가지도록 설정 */
}

.new_title img {
    margin-right: 5px; /* 이미지와 제목 사이에 간격 추가 */
    margin-left: 10px;
    width: 32px;   /* 원하는 너비 (픽셀 단위) */
    height: 32px;  /* 원하는 높이 (픽셀 단위) */
    }

.new_more {
    color: #253dbe;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    padding: 5px 15px; /* 적절한 패딩 추가 */
    font-size: 0.9rem; /* 폰트 크기 조정 */
    transition: color 0.3s, background-color 0.3s; /* 호버 효과에 부드러운 전환 추가 */
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
}

.new_more:hover {
    color: #777;
    background-color: #e0e0e0; /* 호버 시 배경 색상 변경 */
}

/* 모바일 뷰에서 폰트 크기 조절 */
@media (max-width: 767px) {
  /* 모바일에서 제목 글자 수를 줄이기 위한 스타일 */
    .new_lt li a {
        max-width: 280px; /* 모바일에서 최대 너비 설정 */
    }

   .new_lt li { 
        font-size: 1.125em; 
        /* 모바일 폰트 크기를 조절합니다. */
    }
    .new_lt {
        padding: 0px 0px; /* 모바일에서 좌우 패딩 조정 */
        margin-top: 10px;
        margin-bottom: 0px;
    }

    .new_lt .new_title {
      font-size: 1.1em;
      margin-bottom: 5px; /* 제목과 콘텐츠 사이의 간격 설정 */
    }

.new_title img {
    margin-right: 5px; /* 이미지와 제목 사이에 간격 추가 */
    width: 24px;   /* 원하는 너비 (픽셀 단위) */
    height: 24px;  /* 원하는 높이 (픽셀 단위) */
    }
}