/*
세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)
col-

*/
@media (max-width: 575px) {
    body {
        padding-top: 100px; /* 네비게이션 바의 높이만큼 패딩을 추가하여 컨텐츠가 가려지지 않도록 설정 */
    }
    .img-wrapper-magazine{
        height: 80px;
    }
}

/*
가로모드 모바일 디바이스 (가로 해상도가 576px보다 크고 768px 보다 작은 화면에 적용)
col-sm-
*/
@media (min-width: 576px) and (max-width: 767px) {
    body {
        padding-top: 100px; /* 네비게이션 바의 높이만큼 패딩을 추가하여 컨텐츠가 가려지지 않도록 설정 */
    }
}

/*
태블릿 디바이스 (가로 해상도가 768px보다 크고 991px 보다 작은 화면에 적용)
col-md-
*/
@media (min-width: 768px) and (max-width: 991px) {
    body {
        padding-top: 100px; /* 네비게이션 바의 높이만큼 패딩을 추가하여 컨텐츠가 가려지지 않도록 설정 */
    }
}

/*
데스크탑 (가로 해상도가 992px보다 크고 1199px 보다 작은 화면에 적용)
col-lg-
*/
@media (min-width: 992px) and (max-width: 1199px) {

    /*slide*/
    .slider-container {
        width: 100%; /* 슬라이더의 너비 */
        overflow: hidden; /* 슬라이더 컨테이너 바깥의 내용 숨기기 */
        position: relative;
    }

    .slider {
        display: flex; /* 이미지들을 가로로 정렬 */
    }

    .slider img {
        width: 100%; /* 이미지가 컨테이너의 전체 너비를 채우도록 설정 */
        flex-shrink: 0; /* 이미지 크기가 줄어들지 않도록 설정 */
    }

    /* 좌에서 우로 슬라이드 애니메이션 */
    .slide-left-to-right {
        animation: slide-left-to-right 40s linear infinite; /* 애니메이션 설정 */
    }

    /* 우에서 좌로 슬라이드 애니메이션 */
    .slide-right-to-left {
        animation: slide-right-to-left 40s linear infinite; /* 애니메이션 설정 */
    }

    /* 좌에서 우로 애니메이션 정의 */
    @keyframes slide-left-to-right {
        0% { transform: translateX(-100%); } /* 시작 위치 (왼쪽) */
        50% { transform: translateX(0); } /* 중간 위치 */
        100% { transform: translateX(-100%); } /* 끝 위치 (왼쪽) */
    }

    /* 우에서 좌로 애니메이션 정의 */
    @keyframes slide-right-to-left {
        0% { transform: translateX(0); } /* 시작 위치 (오른쪽) */
        50% { transform: translateX(-100%); } /* 중간 위치 */
        100% { transform: translateX(0); } /* 끝 위치 (오른쪽) */
    }

    .hero-slider-container {
        width: 100%;
        height: 100%; /* 원하는 높이로 설정 */
        overflow: hidden; /* 이미지가 컨테이너를 넘치지 않도록 설정 */
        position: relative;
    }

    /* 히어로 슬라이더 내부 이미지 스타일 */
    .hero-slider img {
        height: 100%; /* 컨테이너의 높이에 맞게 이미지 높이 조정 */
        width: auto; /* 비율을 유지하면서 이미지 크기 조정 */
        display: block; /* 이미지 사이의 여백 제거 */
        margin: 0 auto; /* 이미지가 가운데 정렬되도록 설정 */
    }

    /* 히어로 슬라이더 이동 스타일 */
    .hero-slide-left-to-right {
        animation: slide-right-to-left 30s linear infinite; /* 애니메이션 설정 */
    }
    body {
        padding-top: 100px; /* 네비게이션 바의 높이만큼 패딩을 추가하여 컨텐츠가 가려지지 않도록 설정 */
    }
}


/*
큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
col-xl-
*/
@media (min-width: 1200px) {
    body {
        padding-top: 100px; /* 네비게이션 바의 높이만큼 패딩을 추가하여 컨텐츠가 가려지지 않도록 설정 */
    }
}