@charset "utf-8";

.basic-N9 {
position: relative;
padding-top:0rem!important;
padding-bottom:0rem!important;
overflow: hidden;
}

.basic-N9 .contents-inner {
position: relative;
}

.basic-N9 .textset { width:100%;
margin-bottom: clamp(20px, 3.906vw, 50px);
}

.basic-N9 .textset .textset-tit { color: #000; line-height: 100%; letter-spacing: -1px; position: relative
}
.basic-N9 .textset .textset-tit:before{position: absolute; right: 200px; top:50%; content: "";  color:var(--div-color1);   font-family: unicons-line; font-size: 0px;  width:clamp(50px, 23.438vw, 300px); height: 1px; background-color:#c6c6c6 }


.basic-N9 .textset .textset-txt {
margin-bottom: clamp(10px, 1.563vw, 20px); font-weight: 700; color: #666; line-height: 100%; letter-spacing: -1px
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.basic-N9 .contents-swiper {
width: calc(100% + 32rem); padding-bottom: 50px!important; padding-top: clamp(0px, 3.125vw, 40px)
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.basic-N9 .textset .textset-tit { color: #000; line-height: 130%; letter-spacing: -1px; position: relative; 
}
.basic-N9 .textset .textset-tit:before{position: absolute; right: 200px; top:50%; content: "";  color:var(--div-color1);   font-family: unicons-line; font-size: 0px;  width:clamp(50px, 23.438vw, 300px); height: 1px; background-color:#c6c6c6 ; display: none}


.basic-N9 .textset .textset-txt {
margin-bottom: clamp(10px, 1.563vw, 20px); font-weight: 700; color: #666; line-height: 100%; letter-spacing: -1px
}	
	
	
.basic-N9 .contents-swiper {
width: calc(100% + 2rem); padding-bottom: 50px!important; padding-top: clamp(0px, 3.125vw, 40px)
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
	.basic-N9 .contents-swiper {
width:100%; padding-bottom: 50px!important; padding-top: clamp(0px, 3.125vw, 40px)
}
}
/* 구분 //end -----------------------------------*/




.basic-N9 .swiper-slide {
width: 100%;
position: relative
}

.basic-N9 .contents-control {
position: absolute;
right:70px;
top: 30px;
display: flex;
align-items: center;
gap: 2.4rem; 
}



.basic-N9 .swiper-button-prev{
    display: inline-block;
    flex-shrink: 0;
  position: absolute;
    margin-top: 0;
    width: clamp(6rem, 1.563vw, 3.5rem);
    height: clamp(6rem, 1.563vw, 3.5rem);
    background-image: url(../icons/ar_l.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(1.8rem, 1.563vw, 1rem);
    border-radius: 50%;
    background-color: #f3f3f9;
    opacity: 1;
    transition: 0.3s
}
.basic-N9 .swiper-button-next {
    display: inline-block;
    flex-shrink: 0;
  position: absolute;
    margin-top: 0;
    width: clamp(6rem, 1.563vw, 3.5rem);
    height: clamp(6rem, 1.563vw, 3.5rem);
    background-image: url(../icons/ar_l.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(1.8rem, 1.563vw, 1rem);
    border-radius: 50%;
    background-color: #f3f3f9;
    opacity: 1;
    transition: 0.3s
}

.basic-N9 .swiper-button-prev {
transform: rotate(180deg);
}

.basic-N9 .swiper-button-prev::after,
.basic-N9 .swiper-button-next::after {
content: none;
}

.basic-N9 .swiper-slide  {padding-left:clamp(50px, 21.875vw, 280px) }		
.basic-N9 .swiper-slide-active  {padding-left: 0px }		



.swiper-slide .swbox_in  {width:100%!important;  height:clamp(200px, 33.359vw, 427px); float: left; position: relative; overflow: hidden!important; }		
.swiper-slide .swbox_in  .swbox_img{width:100%;  height:clamp(200px, 33.359vw, 427px); float: left; position: relative; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
 }	
.swiper-slide .swbox_in  .swbox_img img{ display: block; object-fit: cover; border-radius: 30px;
width: 100%;
height: 100%; }	
	
.swiper-slide .swbox_img2{width:clamp(200px, 33.984vw, 435px);  aspect-ratio:435 / 567; float: left; position:absolute; right: clamp(-300px, -15.625vw, -50px); bottom:-50px;margin-right: -50px ; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; }	
.swiper-slide .swbox_img2 img{ object-fit: cover; 
width: 100%;
height: 100%;  opacity: 0;  
}	

.swiper-slide .swbox_in  .swbox_tx{width:100%;  height:100%; float: left;   position: absolute; left:0px ; bottom:0px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
display: flex; justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box;}

.swiper-slide .swbox_in   .swbox_tx .in_text{width:100%;   float: left;  font-size:clamp(26px, 3.438vw, 44px);line-height:100%; color: #fff; text-align:center!important;
font-weight:700!important; letter-spacing: -1px; word-wrap: break-word; word-break: keep-all;  transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; margin-bottom:20px }

.swiper-slide .swbox_in   .swbox_tx .in_text2{width:100%;   float: left; font-size: clamp(16px, 1.563vw, 20px);line-height:100%; color: #fff; text-align:center!important;	
font-weight:700!important; letter-spacing: -1px; word-wrap: break-word; word-break: keep-all;  transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  margin-bottom: 10px}

.swiper-slide .swbox_in   .swbox_tx .in_text3{width:100%;   float: left; font-size: clamp(12px, 1.563vw, 20px);line-height:100%; color: #fff; text-align:center!important;	
font-weight:400!important;  word-wrap: break-word; word-break: keep-all;  transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  margin-bottom: 10px}


.swiper-slide .swbox_in  .swbox_tx .in_more{width: clamp(40px, 3.906vw, 80px); aspect-ratio:1 / 1;float: left;  border-radius: 100%;  background-color: var(--primary);; background-size: 1.8rem;   transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; margin-top: 20px; display: none; position: relative}
.swiper-slide .swbox_in  .swbox_tx .in_more:before{position: absolute; left: 0px; top:0px; width: 100%; aspect-ratio:1 / 1; content: "\eb9f";  color:rgba(238,238,238,0.3);   font-family: unicons-line; font-size:clamp(20px, 2.344vw, 30px); display: flex;  justify-content: center;  align-items: center; margin-top: -3px}
	


	/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.swiper-slide-active .swbox_in  {width:100%;  height:clamp(300px, 45.313vw, 580px)!important; float: left; position: relative; overflow: hidden}	
	.swiper-slide-active .swbox_in  .swbox_img{width:100%;  height:clamp(300px, 45.313vw, 580px); float: left; position: relative; }	
.swiper-slide-active .swbox_in  .swbox_img img{ display: block; object-fit: cover; border-radius: 30px;
width: 100%;
height: 100%; }	

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.swiper-slide-active .swbox_in  {width:90%!important;  height:clamp(300px, 45.313vw, 580px)!important; float: left; position: relative; overflow: hidden}	
	.swiper-slide-active .swbox_in  .swbox_img{width:100%;  height:clamp(300px, 45.313vw, 580px); float: left; position: relative; }	
.swiper-slide-active .swbox_in  .swbox_img img{ display: block; object-fit: cover; border-radius: 30px;
width: 100%;
height: 100%; }	

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




.swiper-slide-active .swbox_in  .swbox_tx .in_more{width: clamp(40px, 3.906vw, 80px); float: left;  border-radius: 100%; background-color:var( --primary-opacity50);  background-size: 2.5rem;   transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; margin-top: 40p; display: block;; position: relative; cursor: pointer}
.swiper-slide-active .swbox_in  .swbox_tx .in_more:before{position: absolute; left: 0px; top:0px; width: 100%; aspect-ratio:1 / 1; content: "\eb9f";  color:rgba(238,238,238,0.3);   font-family: unicons-line; font-size:clamp(20px, 2.344vw, 30px); display: flex;  justify-content: center;  align-items: center; margin-top: -3px}


.swiper-slide-active .swbox_in  .swbox_tx .in_more:hover{ background-color:var( --primary);}
.swiper-slide-active .swbox_in  .swbox_tx .in_more:before:hover{ color:rgba(255,255,255,1);  }

	



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.swiper-slide-active .swbox_img2{width:clamp(200px, 33.984vw, 435px);  aspect-ratio:435 / 567;float: left; position:absolute; right:clamp(-300px, -15.625vw, -5px); bottom:-50px;margin-right: 0px;}	
.swiper-slide-active .swbox_img2 img{ display: block; object-fit: cover; 
width: 100%;
height: 100%;opacity: 1 }		

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.swiper-slide-active .swbox_img2{width:clamp(200px, 33.984vw, 435px);  aspect-ratio:435 / 567;float: left; position:absolute; right:00px; bottom:-50px;margin-right: 0px;}	
.swiper-slide-active .swbox_img2 img{ display: block; object-fit: cover; 
width: 100%;
height: 100%;opacity: 1 }		

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


/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.basic-N9 .contents-control {
position: absolute;
right:50px;
top:75px;
display: flex;
align-items: center;
gap: 1rem; 
}
.basic-N9 .swiper-button-prev{
    display: inline-block;
    flex-shrink: 0;
  position: absolute;
    margin-top: 0;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url(../icons/ar_l.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:1rem;
    border-radius: 50%;
    background-color: #f3f3f9;
    opacity: 1;
    transition: 0.3s
}
.basic-N9 .swiper-button-next {
    display: inline-block;
    flex-shrink: 0;
  position: absolute;
    margin-top: 0;
    width: 3.5rem;
    height:3.5rem;
    background-image: url(../icons/ar_l.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:1rem;
    border-radius: 50%;
    background-color: #f3f3f9;
    opacity: 1;
    transition: 0.3s
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/