Update style.css

style.css

@@ -10,27 +10,24 @@ body, html {
 }
 
 .slider-container {
-  width: 80%; /* 슬라이더 컨테이너의 너비를 줄입니다 */
-  height: 80%;
+  width: 100%; /* 전체 너비 사용 */
+  height: 100%; /* 전체 높이 사용 */
   overflow: hidden;
   position: relative;
-  margin: 0 auto;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: center; /* 가운데 정렬 */
+  align-items: center; /* 가운데 정렬 */
 }
 
 .slider {
   display: flex;
   transition: transform 0.5s ease-in-out;
-  justify-content: flex-start; /* 슬라이드를 왼쪽에서 시작하도록 정렬 */
-  padding: 0 20%; /* 좌우 슬라이드 미리보기를 위해 패딩 추가 */
 }
 
 .slide {
-  width: 60%; /* 슬라이더 너비를 줄여서 좌우 슬라이드가 보이도록 합니다 */
-  height: 100%;
-  margin: 0 10px; /* 슬라이드 사이의 간격 */
+  width: 70vw; /* 뷰포트 너비의 70% */
+  height: 60vh; /* 뷰포트 높이의 60% */
+  margin: 0 15px; /* 슬라이드 사이 간격 조정 */
   background-color: #ccc;
   display: flex;
   justify-content: center;