/* photo_section3.css */
/* 이미지 컨테이너 스타일 */
#photo3-container {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden;
}

#photo3 {
    width: 100%; /* 브라우저 너비에 맞춤 */
    height: auto;
    object-fit: cover;
    transition: height 0.3s ease; /* 높이 변경 시 부드러운 애니메이션 */
}

/* 텍스트 오버레이 */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6); /* 반투명 배경 */
    color: #fff; /* 글씨 색상 */
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    opacity: 0; /* 초기 상태: 숨김 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 텍스트가 나타날 때 애니메이션 */
#photo3-container:hover .text-overlay {
    opacity: 1; /* 마우스가 올라가면 보이게 */
    transform: translate(-50%, -40%); /* 살짝 위로 올라가는 효과 */
}

/* 컨트롤 박스 스타일 */
#photo-section3 .controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 배경 */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

#height-slider {
    width: 200px;
}