/* 구분 -----------------------------------*/

/**** PC ****/
@media only all and (min-width:1921px) {
.MAIN_maintop_WSA { width: 100%; 
overflow: hidden;
position: relative;
height: 100vh;   

}
}


/**** PC ****/
@media all and (max-width:1920px) and (min-width:768px) {
.MAIN_maintop_WSA { width: 100%; 
overflow: hidden;
position: relative;
height: 100vh;  

}
}

/**** PC2 ****/
@media all and (max-width:1280px) and (min-width:768px) {}

/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_WSA { width: 100%; 
overflow: hidden;
position: relative;
height: 100vh;  

}
}

/**** 모바일(소형) ****/
@media only all and (max-width:400px) {}
/* 구분 //end -----------------------------------*/





.MAIN_maintop_WSA .contents-container {
 display: flex; align-items: center; justify-content: center;
height: 100%;
}

.MAIN_maintop_WSA .contents-container:not(.fullscreen) {
  height: 100vh; padding: 0px!important;
}

.MAIN_maintop_WSA .slide-area {
width: 100vw;
height: 100%;
}

.MAIN_maintop_WSA .swiper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100%;padding: 0px!important;
}

.MAIN_maintop_WSA .swiper-slide {
display: flex;
justify-content: center;
padding: 0px!important;
height: 105vh;
width: 100%; background-color: #000

}





.MAIN_maintop_WSA .thumb { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.MAIN_maintop_WSA .thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--black-rgb), 0.4); pointer-events: none; }

.MAIN_maintop_WSA .thumb .videoset { position: absolute; top: 0; left: 0; width: 100%; height: 100% }


.MAIN_maintop_GNS picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;  max-height: 962px;
}



.MAIN_maintop_GNS .swiper-slide img {
width: 100%;
height: 100%;  max-height: 962px;
object-fit: cover;
}

/* 공통: 배경 이미지 잘림(클리핑) 방지 & 수직 가운데 정렬 */
.MAIN_maintop_GNS .swiper-slide .wg_img1 {
overflow: hidden;            /* 컨테이너 밖으로 넘치는 부분 숨김 */
display: flex;               /* 정렬을 위한 플렉스 컨테이너 */
align-items: center;         /* 수직 가운데 정렬(이미지 높이 고정 시 유용) */
width: 100%;
height: 100%;  max-height: 962px;
}

/* 기본 이미지 출력 형태 */
.MAIN_maintop_GNS .swiper-slide .wg_img1 img {
display: block;
width: 100%;         object-fit: cover;    height: 100%; 
}



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_maintop_WSA .container-lg .desc { max-width: 144rem; }
.MAIN_maintop_WSA .container-md .desc { max-width:  144rem; }
.MAIN_maintop_WSA .container-sm .desc { max-width:  144rem; }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	.MAIN_maintop_WSA .container-lg .desc { max-width:  100%;}
.MAIN_maintop_WSA .container-md .desc { max-width: 100%; padding:200px  40px 0px!important}
.MAIN_maintop_WSA .container-sm .desc { max-width: 100%;  padding:200px 40px 0px!important}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_maintop_WSA .container-lg .desc { max-width:  100%;}
.MAIN_maintop_WSA .container-md .desc { max-width:  100%; padding: 100px 20px !important}
.MAIN_maintop_WSA .container-sm .desc { max-width: 100%;  padding: 100px 20px!important}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.MAIN_maintop_WSA .desc { position: relative; z-index: 1;  width: 100%; padding-top:300px; }

.MAIN_maintop_WSA .fixed-area { display: flex; align-items: flex-end; gap: 1.2rem; position: absolute; left: 0;   z-index: 999!important; width: 100%; padding: 0 0rem; margin-top: -450px}

.MAIN_maintop_WSA .paging-wrap { display: flex; align-items: flex-end; gap: 0.8rem; padding-bottom: 0.4rem; }
.MAIN_maintop_WSA .paging-item { width: 6rem; }
.MAIN_maintop_WSA .paging-item .curr { display: block; opacity: 0; visibility: hidden; color: #fff; font-weight: 800; transition: opacity 0.3s, visibility 0.3s; }
.MAIN_maintop_WSA .paging-item.active .curr { opacity: 1; visibility: visible; }
.MAIN_maintop_WSA .paging-item .bar { overflow: hidden; position: relative; width: 100%; height: 0.4rem; border-radius: 9rem; background: rgba(255,255,255, 0.5); } 
.MAIN_maintop_WSA .paging-item .bar .progress { width: 0%; height: 100%; background: #fff; }
.MAIN_maintop_WSA .paging-item.active .progress.running { animation: MAIN_maintop_WSA-progress 5s linear forwards; }
.MAIN_maintop_WSA .paging-item .bar::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #fff; }
.MAIN_maintop_WSA .paging-item.active .bar::before { animation: MAIN_maintop_WSA-progress 5s linear; }

.MAIN_maintop_WSA .btn-wrap { display: flex; align-items: center; gap: 0.4rem; }
.MAIN_maintop_WSA .btn-wrap button { display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; font-size: 1.4rem; background: none; border: none; color: #fff; }
.MAIN_maintop_WSA .swiper-progress button { display: none; }
.MAIN_maintop_WSA .swiper-progress button.active { display: flex; }


.ti-chevron-left:before {
  content: "\eb79";
}
.ti-chevron-right:before {
  content: "\eb6d";
}

.ti-pause-fill:before {
  content: "\eb8e"; transform: rotate(45deg)
}




.MAIN_maintop_WSA .scroll { display: flex; align-items: center; flex-direction: row-reverse; gap: 0.4rem; position: absolute; left: 50%; bottom:50px; transform: translateX(-50%); color: #fff; font-weight: 800; z-index: 1; animation: MAIN_maintop_WSA-bounce 1.4s ease-in-out infinite; }
.MAIN_maintop_WSA .scroll::before { font-size: 1rem; }



@keyframes MAIN_maintop_WSA-progress { 0% {
width: 0%; }
100% { width: 100%; }
}

@keyframes MAIN_maintop_WSA-bounce { 0%,
100% {
transform: translate(-50%, 0); }
50% { transform: translate(-50%, 0.8rem); }
}





@media (max-width: 992px) { 

.MAIN_maintop_WSA .fixed-area { gap: 0.8rem; padding: 0 1.6rem; }
.MAIN_maintop_WSA .paging-wrap { gap: 0.4rem; padding-bottom: 0.2rem; }
.MAIN_maintop_WSA .paging-item { width: 3.2rem; }
.MAIN_maintop_WSA .paging-item .bar { height: 0.4rem; }
.MAIN_maintop_WSA .btn-wrap button { width: 1rem; height: 1rem; font-size: 1rem; line-height: 1rem; }
.MAIN_maintop_WSA .scroll { bottom: 8.6rem; }
}