/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.MAIN_maintop_KNB {
overflow: hidden;
position: relative;  height:700PX; background-color: #eeecec
}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_KNB {
overflow: hidden;
position: relative;  height:700PX; background-color: #eeecec; padding-top: 40px
}

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



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

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

.MAIN_maintop_KNB .swiper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100%;
}

.MAIN_maintop_KNB .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
padding: 0 0rem;
height: 100%;
}

.MAIN_maintop_KNB picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
}

.MAIN_maintop_KNB .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover; 
}





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_maintop_KNB .visual-text-box {
position: relative;
width: 100%;    height: 50%; margin-top: -15%; padding-top: 30px
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_maintop_KNB .visual-text-box {
position: relative;
width: 100%;    height: 100%;  padding-top: 30px; 
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_maintop_KNB .visual-text-box .img{
width: 170px ; position: absolute; left: 0px; top: 0px
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_maintop_KNB .visual-text-box .img{
width: 100px ; position: absolute; left:20px; top: 0px
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.MAIN_maintop_KNB .visual-text-box .img img{
width: 100%
}

.MAIN_maintop_KNB .container-lg .visual-text-box {
max-width:156rem;
}

.MAIN_maintop_KNB .container-md .visual-text-box {
max-width: 144rem;
}

.MAIN_maintop_KNB .container-sm .visual-text-box {
max-width: 128rem;
}
.MAIN_maintop_KNB .container-full .visual-text-box {
max-width: 100%;
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.MAIN_maintop_KNB  .visual-text-box .tx1{
margin-top: 2.7rem;
color: #000; font-size: var(--tit-lg-size); font-family: "hooncaramel", sans-serif;
font-weight: 400;
font-style: normal; line-height: 110%; margin-bottom: 0px
}
	.MAIN_maintop_KNB  .visual-text-box .tx2{

color:var(--primary); font-family: "hooncaramel", sans-serif;

font-style: normal;font-size: var(--tit-lg-size); line-height: 110%; margin-bottom: 10px
}
.MAIN_maintop_KNB  .visual-text-box .tx2 em{

color:#F16246; font-family: "hooncaramel", sans-serif;
font-weight: 400;
font-style: normal;font-size: var(--tit-lg-size); 
}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_KNB  .visual-text-box .tx1{
margin-top: 2rem;
color: #000; font-size:calc(var(--tit-lg-size) * 0.8); font-family: "hooncaramel", sans-serif;
font-weight: 400;
font-style: normal; line-height: 110%; margin-bottom: 0px
}
.MAIN_maintop_KNB  .visual-text-box .tx2{

color: #000; font-family: "hooncaramel", sans-serif;

font-style: normal;font-size:calc(var(--tit-lg-size) * 0.8);  line-height: 110%; margin-bottom: 10px
}
.MAIN_maintop_KNB  .visual-text-box .tx2 em{

color:#F16246; font-family: "hooncaramel", sans-serif;
font-weight: 400;
font-style: normal;font-size:calc(var(--tit-lg-size) * 0.8); 
}

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




/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.MAIN_maintop_KNB  .visual-text-box .tx3{

color: #333; font-size:calc(var(--tx-sm-size) * 1);
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_maintop_KNB  .visual-text-box .tx3{

color: #333; font-size:calc(var(--tx-sm-size) * 1);
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





.MAIN_maintop_KNB .pagination_fraction {
position: absolute;
z-index: 1;
transform: translateY(-20rem);
width:100%;
}

.MAIN_maintop_KNB .container-lg .pagination_fraction {
max-width: 156rem;
}

.MAIN_maintop_KNB .container-md .pagination_fraction {
max-width: 144rem;
}

.MAIN_maintop_KNB .container-sm .pagination_fraction {
max-width: 128rem;
}

.MAIN_maintop_KNB .wrap {
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgba(255, 255, 255, 0.5);
font-family: var(--ff-en4);
}

.MAIN_maintop_KNB .pagination_fraction .current,
.MAIN_maintop_KNB .pagination_fraction .all {
font-weight: var(--fw-bold);
}

.MAIN_maintop_KNB .pagination_fraction .current {
color: #fff;
}

.MAIN_maintop_KNB .control-bottom {
display: flex;
align-items: center;
gap: 1.2rem;
position: absolute;
z-index: 1;

padding-left: 1rem;
width: 100%; bottom: 10%
}

.MAIN_maintop_KNB .container-lg .control-bottom {
max-width: 156rem!important;
}

.MAIN_maintop_KNB .container-md .control-bottom {
max-width: 144rem!important;
}

.MAIN_maintop_KNB .container-sm .control-bottom {
max-width: 128rem!important;
}
.MAIN_maintop_KNB .container-full .control-bottom {
max-width: 100%!important;
}
.MAIN_maintop_KNB .swiper-pagination {
gap: 1rem;
position: static;
}

.MAIN_maintop_KNB .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
display: flex;
justify-content: flex-start;
align-items: center;
width: auto;
}

.MAIN_maintop_KNB .swiper-pagination-bullet {
opacity: 1;
position: relative;
margin: 0;
width: 1.2rem;
height: 1.2rem;
background-color: var(--white);
border-radius: 100%;
}

.MAIN_maintop_KNB .swiper-pagination-bullet:first-child {
margin-left: 0;
}


.MAIN_maintop_KNB .swiper-pagination-bullet-active {
background-color:var(--primary);;
}
.MAIN_maintop_KNB .swiper-pagination-bullet-active::after {
transform: scale(1);
transition: transform 0.2s;
}

.MAIN_maintop_KNB .swiper-button-play {
display: none;
}

.MAIN_maintop_KNB .swiper-button-play,
.MAIN_maintop_KNB .swiper-button-pause {
flex-shrink: 0;
width: 2rem;
height: 2rem;
opacity: 0.5;
color: #fff;
cursor: pointer;
}

.MAIN_maintop_KNB .swiper-button-play img,
.MAIN_maintop_KNB .swiper-button-pause img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: top;
}

.MAIN_maintop_KNB .swiper-button-play:hover,
.MAIN_maintop_KNB .swiper-button-pause:hover {
opacity: 1;
}

.MAIN_maintop_KNB .control-bottom .swiper-button-next{position: relative; width:30px ; height: 50px;background: none; margin-top: 0px}
.MAIN_maintop_KNB .control-bottom .swiper-button-next:before{content: "\ec49";    font-family: unicons-line; color: #fff; font-size:30px}
.MAIN_maintop_KNB .control-bottom .swiper-button-next:after{display: none!important}


.MAIN_maintop_KNB .control-bottom .swiper-button-prev{position: relative; width:30px ;height: 50px;background: none; margin-top: 0px }
.MAIN_maintop_KNB .control-bottom .swiper-button-prev:before{content: "\eb9f";    font-family: unicons-line; color: #fff; font-size:30px}
.MAIN_maintop_KNB .control-bottom .swiper-button-prev:after{display: none!important}

.MAIN_maintop_KNB .control-bottom .linebar{width:150px; border-bottom: 1px solid rgba(204,204,204,0.56); float: left}






@media (max-width: 1200px) {
.MAIN_maintop_KNB .slide-area {
width: 100%;
}

.MAIN_maintop_KNB .swiper {
margin-left: -4rem;
width: calc(100% + 8rem);
}

.MAIN_maintop_KNB .swiper-slide {
padding: 0 4rem;
}

.MAIN_maintop_KNB .pagination_fraction {
width: calc(100% - 8rem);  
}

.MAIN_maintop_KNB .control-bottom {
width: calc(100% - 8rem);
}
}

@media (max-width: 992px) {

.MAIN_maintop_KNB {
overflow: hidden;
position: relative;   height:100%; background-color: #eeecec
}

.MAIN_maintop_KNB .contents-container {

height:100%;
}
.MAIN_maintop_KNB .contents-container {
height:100%;
}

.MAIN_maintop_KNB .swiper {
margin-left: -1.6rem;
width: 100%
}

.MAIN_maintop_KNB .swiper-slide {
padding: 0 1.6rem 10rem;
align-items: flex-end;
}
.MAIN_maintop_KNB .visual-text-box {
top:0%; position: absolute; height: auto; margin-top: 0%; padding-top: 0px; padding: 0px 30px
}
.MAIN_maintop_KNB .visual-text-box p {
margin-top: 1rem; 
}

.MAIN_maintop_KNB .pagination_fraction {
top:20%;
transform: none;
width: calc(100% - 3.2rem);  
}

.MAIN_maintop_KNB .control-bottom {
transform: translateY(-50rem);
transform: none;
width: calc(100% - 3.2rem);
}
}





.swiper-progressbar-wrap {
  position: absolute;
  bottom: 25px;
  left: 250px;
  width:calc(100% - 205px);
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.swiper-progressbar {
  height: 100%;
  width: 0%;
  background: red;
  transition: width 0.8s ease-in-out;
}