/* BASIC css start */
/* 기본 초기화 */
* {margin:0;padding:0;box-sizing:border-box;}
ul, li {list-style:none;}

/* 흐르는 슬라이더 전체 감싸기 */
.award-rolling-wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: #fff;
    /* [수정] 상하 패딩을 100px로 넓혀 시각적 여유 공간 확보 */
    padding: 100px 0; 
}

/* 실제로 움직이는 트랙 (상장너비 500px * 22장 = 11,000px) */
.rolling-track {
    display: flex;
    width: calc(500px * 22); 
    
    animation-name: marquee;
    /* [수정] 아주 천천히 흐르도록 95초 설정 */
    animation-duration: 95s; 
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    /* 처음 진입 시 2.5초간 대기 후 출발 */
    animation-delay: 2.5s; 
    animation-fill-mode: backwards; 
}

/* 마우스 올리면 일시 정지 */
.award-rolling-wrap:hover .rolling-track {
    animation-play-state: paused;
}

/* 상장 리스트 스타일 */
.award-list {
    display: flex;
    align-items: center;
}

.award-list li {
    /* [수정] 가로 사이즈 500px */
    width: 500px; 
    padding: 0 25px; /* 상장 사이 여백도 넉넉히 조정 */
}

.award-list li img {
    width: 100%;
    height: auto;
    border: 1px solid #ededed;
    /* 그림자를 더 은은하고 넓게 퍼뜨려 고급스럽게 수정 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    transition: all 0.4s ease-in-out;
}

/* 마우스 올렸을 때 강조 효과 */
.award-list li img:hover {
    transform: translateY(-12px); /* 더 역동적으로 위로 이동 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-color: #ddd;
}

/* --- 무한 흐름 애니메이션 로직 --- */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}
/* BASIC css end */