

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');



/* 구분 -----------------------------------*/

/**** PC ****/
@media only all and (min-width:1921px) {
.MAIN_maintop_GNS { width: 100%; 
overflow: hidden;
position: relative;
height: calc(100vh - var(--header-h));  

}
}


/**** PC ****/
@media all and (max-width:1920px) and (min-width:768px) {
.MAIN_maintop_GNS { width: 100%; 
overflow: hidden;
position: relative;
height: calc(100vh - var(--header-h));  

}
}

/**** PC2 ****/
@media all and (max-width:1280px) and (min-width:768px) {}

/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_GNS { width: 100%; 
overflow: hidden;
position: relative;
height: calc(100vh - var(--header-h));  

}
}

/**** 모바일(소형) ****/
@media only all and (max-width:400px) {}
/* 구분 //end -----------------------------------*/


.MAIN_maintop_GNS .contents-container {
display: flex;
justify-content: center;
height: 100%;
}

.MAIN_maintop_GNS .slide-area {
width: 100vw;
height: 100%;
}

.MAIN_maintop_GNS .swiper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100%;
}

.MAIN_maintop_GNS .swiper-slide {
display: flex;
justify-content: center;
padding: 0 0rem;
height: 100%;
width: 100%;
	
}

.MAIN_maintop_GNS picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100vh - var(--header-h));  max-height: 750px;
}

.MAIN_maintop_GNS .swiper-slide img {
width: 100%;
height: calc(100vh - var(--header-h));  max-height: 750px;
object-fit: cover;
}

/* 공통: 배경 이미지 잘림(클리핑) 방지 & 수직 가운데 정렬 */
.MAIN_maintop_GNS .swiper-slide .wg_img1 {
overflow: hidden;            /* 컨테이너 밖으로 넘치는 부분 숨김 */
display: flex;               /* 정렬을 위한 플렉스 컨테이너 */
align-items: center;         /* 수직 가운데 정렬(이미지 높이 고정 시 유용) */
width: 100%;
height: calc(100vh - var(--header-h));  max-height: 750px;
}

/* 기본 이미지 출력 형태 */
.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_GNS .visual-text-box {
position: relative;
width: 100%;
height: auto;
}
}

/**** PC2 ****/
@media all and (max-width:1440px) and (min-width:768px) {
.MAIN_maintop_GNS .visual-text-box {
position: relative;
width: 100%;
height: auto;
top: 0px;
padding-left: 30px;
}
}

/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_GNS .visual-text-box {
position: relative;
width: 100%;
height: auto;
padding: 0px 30px;
}
}

/**** 모바일(소형) ****/
@media only all and (max-width:400px) {}
/* 구분 //end -----------------------------------*/




.MAIN_maintop_GNS .visual-text-box .img{
position: absolute; left: 0px; top: 0px;
}
.MAIN_maintop_GNS .visual-text-box .img .wg_img1 {
width: 100%;  position: absolute; left: 0px; top: 0px;
}
.MAIN_maintop_GNS .visual-text-box .img .wg_img1 img{
width: 100%;
}

.MAIN_maintop_GNS .container-lg .visual-text-box { max-width:156rem; }
.MAIN_maintop_GNS .container-md .visual-text-box { max-width:156rem; }
.MAIN_maintop_GNS .container-sm .visual-text-box { max-width:128rem; }
.MAIN_maintop_GNS .container-full .visual-text-box { max-width:100%; }



.MAIN_maintop_GNS .visual-text-box .tx1{
position: relative;
text-align: center;  
margin-top:clamp(50px, calc(3.289vw + 36.842px), 100px); 	
}






.MAIN_maintop_GNS .visual-text-box .tx2{
 text-align: center
}





@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}



.MAIN_maintop_GNS .pagination_fraction {
position: absolute;
z-index: 1;
transform: translateY(-20rem);
width: 100%;
}

.MAIN_maintop_GNS .container-lg .pagination_fraction { max-width:156rem; }
.MAIN_maintop_GNS .container-md .pagination_fraction { max-width:144rem; }
.MAIN_maintop_GNS .container-sm .pagination_fraction { max-width:128rem; }

.MAIN_maintop_GNS .wrap {
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgba(255, 255, 255, 0.5);
font-family: var(--ff-en4);
}

.MAIN_maintop_GNS .pagination_fraction .current,
.MAIN_maintop_GNS .pagination_fraction .all {
font-weight: var(--fw-bold);
}

.MAIN_maintop_GNS .pagination_fraction .current {
color: #fff;
}

.MAIN_maintop_GNS .control-bottom {
display: flex;
align-items: center;
gap: 1.2rem;
position: absolute;
z-index: 1;
padding-left: 0px;
width: 100%;
bottom:55%;
left:50%; margin-left: -75px
}

.MAIN_maintop_GNS .container-lg .control-bottom { max-width:156rem!important; }
.MAIN_maintop_GNS .container-md .control-bottom { max-width:144rem!important; }
.MAIN_maintop_GNS .container-sm .control-bottom { max-width:128rem!important; }
.MAIN_maintop_GNS .container-full .control-bottom { max-width:100%!important; }

.MAIN_maintop_GNS .swiper-pagination {
gap: 1rem;
position: static;
}

.MAIN_maintop_GNS .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
display: flex;
justify-content: flex-start;
align-items: center;
width: auto;
}

.MAIN_maintop_GNS .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
position: relative;
margin: 0;
width: 0.5rem;
height: 1.5rem;
background-color: var(--white);
border-radius: 100%;
}

.MAIN_maintop_GNS .swiper-pagination .swiper-pagination-bullet:first-child { margin-left: 0; }

.MAIN_maintop_GNS .swiper-pagination .swiper-pagination-bullet-active {
width: 2.8rem;
height: 1.5rem;
background-color: #006079;
border-radius: 50px;
}
.MAIN_maintop_GNS .swiper-pagination .swiper-pagination-bullet-active::after {
transform: scale(1);
transition: transform 0.2s;
}

.MAIN_maintop_GNS .swiper-button-play { display: none; }

.MAIN_maintop_GNS .swiper-button-play,
.MAIN_maintop_GNS .swiper-button-pause {
flex-shrink: 0;
width: 2rem;
height: 2rem;
opacity: 0.5;
color: #fff;
cursor: pointer;
}

.MAIN_maintop_GNS .swiper-button-play img,
.MAIN_maintop_GNS .swiper-button-pause img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: top;
}

.MAIN_maintop_GNS .swiper-button-play:hover,
.MAIN_maintop_GNS .swiper-button-pause:hover {
opacity: 1;
}

.MAIN_maintop_GNS .control-bottom .swiper-button-next{
position: relative; width:30px; height: 50px; background: none; margin-top: 0px;
}
.MAIN_maintop_GNS .control-bottom .swiper-button-next:before{
content: "\ec49"; font-family: unicons-line; color: #fff; font-size:30px;
}
.MAIN_maintop_GNS .control-bottom .swiper-button-next:after{ display: none!important; }

.MAIN_maintop_GNS .control-bottom .swiper-button-prev{
position: relative; width:30px; height: 50px; background: none; margin-top: 0px;
}
.MAIN_maintop_GNS .control-bottom .swiper-button-prev:before{
content: "\eb9f"; font-family: unicons-line; color: #fff; font-size:30px;
}
.MAIN_maintop_GNS .control-bottom .swiper-button-prev:after{ display: none!important; }

.MAIN_maintop_GNS .control-bottom .linebar{
width:150px; border-bottom: 1px solid rgba(204,204,204,0.56); float: left;
}


/* 구분 -----------------------------------*/
/**** PC ****/
@media only all and (min-width:768px) {
.MAIN_maintop_GNS .search_box {
width: 530px; padding: 15px 50px 15px 150px; background-color: #fff; border-radius: 80px;
position: relative; position: absolute; left: 0px; top:50%; margin-top: -100px; z-index: 99;
}
.MAIN_maintop_GNS .search_box input{
width: 100%; height: 50px; border: none!important; background-color: #fff; outline: none!important; font-size: calc(var(--tit-mds-size) * 0.9);
}
.MAIN_maintop_GNS .search_box .sch_btn{
width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; top: 10px; right:20px; background-color: #fff!important;
}
.MAIN_maintop_GNS .search_box .sch_btn:before{
content: "\e99a"; font-family: unicons-line; font-size: 40px; color: #000;
}

.MAIN_maintop_GNS .search_box:before{
content: ""; width: 90px; height: 90px; background: url("/_img/img/GNS/main_search_icon01.png") no-repeat center center; position: absolute; left: 30px; top: -20px;
}
}

/**** PC2 ****/
@media all and (max-width:1440px) and (min-width:768px) {
.MAIN_maintop_GNS .search_box {
max-width: 530px; padding: 15px 50px 15px 150px; background-color: #fff; border-radius: 80px;
position: relative; position: absolute; left: 30px; top:45%; margin-top: -100px; z-index: 99;
}
}

/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_GNS .search_box {
width:calc(100% - 40px); padding: 7px 50px 7px 100px; background-color: #fff; border-radius: 80px;
position: relative; position: absolute; left: 20px; bottom:230px; z-index: 99;
}
.MAIN_maintop_GNS .search_box input{
width: 100%; height: 50px; border: none!important; background-color: #fff; outline: none!important; font-size: calc(var(--tit-mds-size) * 0.9);
}
.MAIN_maintop_GNS .search_box .sch_btn{
width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; top: 5px; right:10px; background-color: #fff!important;
}
.MAIN_maintop_GNS .search_box .sch_btn:before{
content: "\e99a"; font-family: unicons-line; font-size:30px; color: #000;
}

.MAIN_maintop_GNS .search_box:before{
content: ""; width:80px; height:80px; background: url("/_img/img/GNS/main_search_icon01.png") no-repeat center center; background-size:100%;
position: absolute; left: 10px; top: -18px;
}
}

/**** 모바일(소형) ****/
@media only all and (max-width:400px) {}
/* 구분 //end -----------------------------------*/
