body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: #f4f4f4; /* 배경색 추가 */
}

/* 메인 컨테이너 스타일 */
.container {
    width: 80%; /* 폭 설정 */
    max-width: 1200px; /* 최대 너비 설정 */
    margin: auto; /* 자동 마진으로 중앙 정렬 */
    overflow: hidden; /* 내부 플로트 요소들을 감싸기 위함 */
    background: #fff; /* 배경색 */
    padding: 20px; /* 패딩 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

header {
    background: #d4b0fd;/*#333;*/
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

footer {
    text-align: center;
    padding: 10px 0;
    background: #d4b0fd;/*#333333;*/
    color: #fff;
}

/* iframe을 감싸는 컨테이너 */
.videos-container {
    display: block;
    position: relative;
    width: 100%;
    max-width: 560px; /* 최대 폭 설정 */
    margin: auto; /* 중앙 정렬 */
}

/* 16:9 비율을 유지하기 위한 패딩 */
.videos-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 비율을 위한 패딩 */
}

/* iframe에 반응형 스타일 적용 */
.videos-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 부모 컨테이너에 맞게 폭 조정 */
    height: 100%; /* 부모 컨테이너에 맞게 높이 조정 */
    border: 0; /* 테두리 제거 */
}



/*슬라이드*/
.slider {
    overflow: hidden;
}

.slides {
display: flex;
transition: transform 0.5s ease;
}

.slide {
min-width: 100%; /* 슬라이더 컨테이너의 너비와 같게 설정 */
/* 슬라이드 별 추가 스타일링 */
}

.slider-container {
    display: flex; /* Flex 컨테이너 설정 */
    align-items: center; /* 세로축 중앙 정렬 */
}


/*슬라이드 버튼*/
.slider-buttons {
    text-align: center; /* 버튼들을 가운데 정렬 */
    margin-top: 5px; /* 슬라이더와의 간격 조정 */
}
  



/*포스터이미지*/
.poster-container {
    display: flex;
    justify-content: center; /* 이미지들을 가운데 정렬 */
    margin: auto;
}

/* 이미지 컨테이너 */
.image-container {
    width: 100%; /* 부모 컨테이너의 전체 너비를 사용 */
    display: flex;
    justify-content: center; /* 가로 방향 중앙 정렬 */
    align-items: center; /* 세로 방향 중앙 정렬 */
    /* height: 100vh;  */
        /* 화면 높이만큼 설정, 필요에 따라 조정 가능 */
    margin: 0 auto; /* 중앙 정렬 */
}

/* 이미지 */
.poster-image {
    max-width: 600px; /* 최대 폭 설정 */
    max-height: 600px; /* 최대 높이 설정 */
    object-fit: contain; /* 컨테이너에 맞춰 이미지 비율 유지 */
    width: 100%; /* 컨테이너 폭에 맞춤 */
    height: auto; /* 비율을 유지하며 높이를 자동으로 설정 */
}

@media screen and (max-width: 1200px) {
    .poster-image {
        max-width: 100%; /* 최대 폭을 컨테이너 너비의 100%로 설정 */
        max-height: none; /* 최대 높이 제한 해제 */
    }
}





.icon-container {
    display: flex;
    justify-content: center; /* 가로 방향 중앙 정렬 */
    align-items: center; /* 세로 방향 중앙 정렬 */
    flex-wrap: wrap; /* 필요 시 줄바꿈 */
    gap: 15px; /* 아이콘 사이의 간격 */
    padding: 20px; /* 컨테이너 패딩 */
}

.icon-image {
    width: 50px; /* 아이콘의 폭 설정 */
    height: 50px; /* 아이콘의 높이 설정 */
    border-radius: 10%; /* 이미지를 둥글게 만들기 */
    object-fit: contain; /* 큰 쪽에 맞춰 이미지 크기 조정 */
}