﻿#animate_container {
    position: relative;
    left: 0px;
    top: 0px;
    width: 980px; /* 실제 이미지 너비에 맞춰 조정 필요 */
    height: 906px; /* 실제 이미지 높이에 맞춰 조정 필요 */
    padding: 0;
    margin: 0px auto 20px auto; /* 버튼과의 간격 추가 */
    vertical-align: top;
    overflow: hidden; /* 슬라이딩 영역 밖의 이미지는 숨김 */
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff;
}

#img_container {
    position: relative;
    left: 0px;
    top: 0px;
    border: 0px solid red;
    white-space: nowrap; /* 자식 요소들이 한 줄에 표시되도록 설정 */
    font-size: 0; /* inline-block 요소들 사이의 공백 제거 */
}

    #img_container img {
        display: inline-block; /* 이미지를 가로로 나열 */
        width: 980px; /* 각 이미지의 너비를 컨테이너 너비와 동일하게 설정 */
        height: 906px; /* 각 이미지의 높이를 컨테이너 높이와 동일하게 설정 */
        vertical-align: top; /* 이미지 하단 여백 제거 */
    }

/*
#buttons_container {
    text-align: center;
    margin-top: 10px;
}

    #buttons_container button {
        padding: 10px 20px;
        margin: 0 5px;
        font-size: 16px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #e0e0e0;
        transition: background-color 0.3s ease;
    }

        #buttons_container button.active,
        #buttons_container button:hover {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
*/
