.swiper {
    margin-top: 120px;    /* 헤더 높이(80px)만큼 아래로 밀어줌 */
    width: 100%;
    height: 800px;
    position: relative;
    z-index: 1;

}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 잘리지 않고 꽉 차게 함 */
    z-index: 1 !important;
}

/* 좌우 화살표 버튼 위치 및 커스텀 */
.swiper-button-next,
.swiper-button-prev {
    width: 50px !important; 
    height: 50px !important;
    background-color: rgba(255, 255, 255, 0.8) !important; /* 반투명 흰색 배경 */
    border-radius: 50%; /* 동그랗게 */
    color: #cc0000 !important; /* ★ 로고와 맞춘 레드 계열 색상 추천 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 입체감 주는 그림자 */
    transition: all 0.3s ease;
}

/* 마우스 올렸을 때(Hover) 효과 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #cc0000 !important; /* 배경이 레드로 변경 */
    color: #ffffff !important; /* 화살표는 흰색으로 변경 */
}



/* 좌우 화살표 버튼 위치 및 커스텀 */
.swiper-button-next,
.swiper-button-prev {
    width: 50px !important; 
    height: 50px !important;
    background-color: rgba(255, 255, 255, 0.8) !important; /* 반투명 흰색 배경 */
    border-radius: 50%; /* 동그랗게 */
    color: #d35400 !important; /* ★ 주황색 -> 로고색으로 갈경우#cc0000으로 변경 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 입체감 주는 그림자 */
    transition: all 0.3s ease;
}

/* 마우스 올렸을 때(Hover) 효과 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #d35400 !important; /* 주황색 -> 로고색으로 갈경우#cc0000으로 변경 */
    color: #ffffff !important; /* 화살표는 흰색으로 변경 */
}

/* 화살표 크기 미세 조정 */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 30px !important;
    font-weight: bold;
}


/* 비활성화된 기본 점 스타일 */
.swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    /* (투명도로 비활성화 느낌 조절) */
    background: #ffffff !important; 
    opacity: 0.4; /* 비활성 상태이므로 투명도를 낮춰서 구분 */
    
    /* 요청하신 입체감 있는 그림자 추가 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; 
    
    transition: all 0.3s; /* 0.3초 동안 부드럽게 변화 */
}

/* 활성화된(현재 사진) 점 스타일 */
.swiper-pagination-bullet-active {
    width: 50px !important; /* 길쭉하게 변형 */
    border-radius: 5px !important;
    background: #d35400 !important; /* 같은 색이지만 투명도를 높여 강조 */
    opacity: 1; /* 선명하게 */
    
    /* 활성 상태에서는 그림자를 더 진하게 해서 띄워 보이게 함 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}











/* --- [추가] 모바일 대응: 사진 높이 최적화 --- */
@media (max-width: 1024px) {
    .swiper {
        /* [1] 모바일 헤더 높이에 맞춰 여백 조정 */
        margin-top: 80px !important; 
        
        /* [2] 세로가 너무 길어 보이지 않게 높이 축소 (기존 800px -> 450px) */
        height: 450px !important; 
    }

    /* [3] 화살표 버튼 크기도 모바일에 맞춰 축소 */
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px !important; 
        height: 35px !important;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 18px !important;
    }

    /* [4] 페이지네이션(점) 크기 조절 */
    .swiper-pagination-bullet-active {
        width: 30px !important; /* 모바일에서는 활성 바 길이를 조금 축소 */
    }
}

@media (max-width: 480px) {
    .swiper {
        /* [5] 아주 작은 화면(스마트폰)용 높이 조절 */
        height: 300px !important; 
    }
}