html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-image: url("/assets/img/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
display: flex;
flex-direction: column;
}

.logo{
margin-top: 10px;
margin-left: 30px;
}

.logo img {
width: 100%;
max-width: 194px;
display: block; /* 불필요한 하단 여백 제거 */
}
.swiper {
border: 5px solid #ddd;
border-radius: 8px;
box-shadow: 0 0 20px 10px rgba(57, 57, 218, 0.58);
}
.swiper-container-wrapper {
width: 95dvw; /* 기본적으로 화면 전체 너비를 사용 */
max-width: 800px; /* PC에서 보일 최대 너비 (이 값을 조절해 크기 변경) */
max-height: 600px;
margin: 20px auto 50px auto; /* 위쪽 마진은 50px, 좌우는 auto, 아래는 50px */
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 이미지가 슬라이드 영역을 왜곡 없이 꽉 채움 */
}

.swiper-pagination-bullet {
width: 10px; /* 불릿의 너비 */
height: 10px; /* 불릿의 높이 */
background-color: rgba(255, 255, 255, 0.8); /* 불릿의 기본 색상 (반투명 흰색) */

opacity: 1; /* 투명도 */
}

/* 활성화된 페이지네이션 점 (현재 슬라이드를 나타내는 불릿) 스타일 */
.swiper-pagination-bullet-active {
background-color: #007bff; /* 활성화된 불릿의 색상 (파란색) */
border-color: #007bff; /* 활성화된 불릿의 테두리 색상 */
transform: scale(1.3); /* 활성화될 때 약간 커지게 */
}


.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 2em;
color: #ffffff;

}

.swiper-button-prev {
left: 2px; 
}

.swiper-button-next {
right: 2px; 
}


.button-container {
display: flex;
justify-content: center;
}
.button-container img{
width: 30dvw;
max-width: 581px;
max-height: auto;
display: block;
cursor: pointer;
}


.footer-notice{
background-color: rgba(0, 0, 0, 0.6); /* 검은색 배경 */
color: #fff; /* 흰색 글자색 */
padding: 1px; /* 내부 여백 */
text-align: center; /* 가운데 정렬 */
font-size:clamp(0.8em, 5svw, 0.8em);
line-height: 1.2; /* 줄 간격 */
width: 100%; /* 너비를 100%로 설정하여 화면 전체를 채움 */
box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
text-shadow:
-1px -1px 0 #000,  /* 왼쪽 위 */
1px -1px 0 #000,  /* 오른쪽 위 */
-1px  1px 0 #000,  /* 왼쪽 아래 */
1px  1px 0 #000;  /* 오른쪽 아래 */	
margin-top: auto;
}
.footer-notice a {
color: #979797cc; /* 링크 색상 */
text-decoration: none; /* 밑줄 제거 */
}
.footer-notice a:hover {
text-decoration: underline; /* 호버 시 밑줄 */
}

			
/* 세로 모드 */
@media screen and (max-aspect-ratio: 1/1) {
.logo{
width: 30dvw;
position:  static;
margin-top: 10px;
margin-left: 0px;
margin-left: auto;
margin-right: auto;
}

.swiper-container-wrapper {
width: 95dvw; /* 기본적으로 화면 전체 너비를 사용 */
max-width: 800px; /* PC에서 보일 최대 너비 (이 값을 조절해 크기 변경) */
max-height: 600px;
margin: 20px auto 20px auto; /* 위쪽 마진은 50px, 좌우는 auto, 아래는 50px */
}	

.button-container {
display: flex;
flex-direction: column;
align-items: center;

}
.button-container img{
width: 70dvw;
height: auto;
}	
}
/* 가로 모드 높이 870 */
@media screen and (min-aspect-ratio: 1/1) and (max-height: 900px) {
.logo{
width: 20dvw;

}

.swiper-container-wrapper {
width: 47vw; /* 기본적으로 화면 전체 너비를 사용 */
max-width: 800px; /* PC에서 보일 최대 너비 (이 값을 조절해 크기 변경) */
max-height: 600px;
margin: 20px auto 20px auto; /* 위쪽 마진은 50px, 좌우는 auto, 아래는 50px */
}	

.button-container {
display: flex;
justify-content: center;
}
.button-container img{
width: 33dvw;
max-width: 581px;
max-height: auto;
display: block;
cursor: pointer;
}
	
	
}