html,
body {
    position: relative;
    height: 100%;
}

body {

    background-color: rgb(0, 0, 0);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 60%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.2);
    /* background: transparent; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    /* width: 100%;
    height: 100%; */
    object-fit: cover;
}

.autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.bg-video {

    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.8;
}

.bg-video__content {

    height: 100%;
    width: 100%;
    object-fit: cover;

}

.bg-img {
    background-image: url("../image/ss.webp");
    background-size: auto;
    background-repeat: repeat;
    background-position: center;
    height: 100%;
    width: 100%;
}

.dm-img {
    text-align: center;
    /* padding: 60px 0 50px 0; */
    padding: 3% 0 3% 0;
}

.item-bg {
    background-image: url("../image/file.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
}

.btn:active,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.swiper-button-next,
.swiper-button-prev {
 
  width: 60px; /* 이미지 크기 조절 */
  height: 60px; /* 이미지 크기 조절 */
}

.swiper-button-next {
    background-image: url('../image/arrow.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%; 
    right: 10px; /* 우측에 10px 여백 */
    transform: translateY(-50%); /* 정확히 수직 중앙에 위치 */
    z-index: 999; /* 다른 요소 위에 표시 */
  }
  .swiper-button-next:hover {
    background-image: url('../image/arrow1.png'); /* 호버 시 이미지 변경 */
    transform: translateY(-50%); /* 수직 중앙 유지 */
    z-index: 999; /* 호버 시에도 다른 요소 위에 표시 */
    }
    

.swiper-button-prev {
    background-image: url('../image/arrow_left.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%; 
    left: 10px; /* 우측에 10px 여백 */
    transform: translateY(-50%); /* 정확히 수직 중앙에 위치 */
    z-index: 999; /* 다른 요소 위에 표시 */
}
.swiper-button-prev:hover {
    background-image: url('../image/arrow_left1.png'); /* 호버 시 이미지 변경 */
    transform: translateY(-50%); /* 수직 중앙 유지 */
    z-index: 999; /* 호버 시에도 다른 요소 위에 표시 */
    }

.text-footer {
    display: flex;
    justify-content: center; /* 가로 정렬 */
    align-items: center; /* 세로 정렬 */
    height: 70px; 
}