@charset "utf-8";


.MAIN_03_KNB{width: 100%; float: left;  padding: clamp(30px, 11.719vw, 150px) 0px;  letter-spacing: -1px; overflow-x:hidden}
.MAIN_03_KNB .contents-container{}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.MAIN_03_KNB .contents-container .grid_box{width: 100%; float: left;display: flex;  gap: 80px;}
	.MAIN_03_KNB .contents-container .grid_box .fl{width:72.5%; float: left; position: relative }
	.MAIN_03_KNB .contents-container .grid_box .fr{width: 27.5%; float: left;position: relative }


	 }
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	.MAIN_03_KNB .contents-container .grid_box{width: 100%; float: left;display: flex;  gap: 80px;}
	.MAIN_03_KNB .contents-container .grid_box .fl{width:60%; float: left; position: relative }
	.MAIN_03_KNB .contents-container .grid_box .fr{width: 40%; float: left;position: relative }


}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.MAIN_03_KNB .contents-container .grid_box{width: 100%; float: left;display: flex; flex-direction: column;  gap: 50px;}
	.MAIN_03_KNB .contents-container .grid_box .fl{width:100%; float: left; position: relative }
	.MAIN_03_KNB .contents-container .grid_box .fr{width: 100%; float: left;position: relative }


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

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box{width: 100%; float: left; position: relative;  margin-bottom: 30px; display: grid;grid-template-columns:clamp(300px, 31.250vw, 400px) auto ; grid-gap: 30px }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box{width: 100%; float: left; position: relative;  margin-bottom: 30px; }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fl {width: 100%; float: left;}

.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fl .tx1{width: 100%; float: left;font-size:calc(var(--tit-md-size) * 1.1); letter-spacing: -2px; color: #000 ; font-weight: 700; margin-bottom: 15px}
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fl .tx2{width: 100%; float: left;font-size:calc(var(--tx-sm-size) * 0.9); color: #333}





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr {width: 100%; float: left; position: relative}
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr:before {width: 100%; float: left;  height: 1px; color: #999;content: "";  background-color: #ccc; position: absolute; bottom:35px}
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr:after{width:10px; height: 10px; background-color: var(--primary); border-radius: 100%; position: absolute;left: 0px;bottom:30px; content: "";   }

.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr .more{width:60px; height:60px; border-radius: 100%; background-color: var(--primary); display: flex;  justify-content: center;  align-items: center; color: #fff; font-size: 20px; position: absolute; right: 0px; bottom: 10px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  }
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr .more:hover{ background-color: var(--primary-hover);}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr{width: 100%; float: left;   position: absolute; right: 0px; top: -10px;  height:40px;}
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr:before {width:calc(100% - 150px); float: left;  height: 1px; color: #999;content: "";  background-color: #ccc; position: absolute;top:50%; right: 0px;}
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr:after{width:10px; height: 10px; background-color: var(--primary); border-radius: 100%; position: absolute;left: 150px;top:50%; margin-top: -5px;content: "";   }

.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr .more{width:40px; height:40px; border-radius: 100%; background-color: var(--primary); display: flex;  justify-content: center;  align-items: center; color: #fff; font-size: 20px; position: absolute; right: 0px;top:0px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  }
.MAIN_03_KNB .contents-container .grid_box .fl  .tit_box .tit_fr .more:hover{ background-color: var(--primary-hover);
  }


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








.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box{width: 100%; float: left; position: relative;  margin-bottom:clamp(20px, 2.344vw, 30px);  }

.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fl {width: 100%; float: left; margin-bottom: 0px}

.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fl .tx1{width: 100%; float: left;font-size:calc(var(--tit-md-size) * 1); letter-spacing: -2px; color: #000 ; font-weight: 700;}


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr {width: 100%; float: left; position: relative;  margin-bottom: 65px}
.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr:before {width: 100%; float: left;  height: 1px; color: #999;content: "";  background-color: #ccc; position: absolute;top: 30px; left: 5px;}
.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr:after{width:10px; height: 10px; background-color: var(--primary); border-radius: 100%; position: absolute;left: 0px;top:27px;content: "";   }

.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr .more{width:60px; height:60px; border-radius: 100%; background-color: var(--primary); display: flex;  justify-content: center;  align-items: center; color: #fff; font-size: 20px; position: absolute; right: 0px;top:0px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  }
.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr .more:hover{ background-color: var(--primary-hover);
  }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr {width: 100%; float: left;   position: absolute; right: 0px; top: -10px;  height:40px;}
.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr:before {width:calc(100% - 120px); float: left;  height: 1px; color: #999;content: "";  background-color: #ccc; position: absolute;top:50%; right: 0px;}
.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr:after{width:10px; height: 10px; background-color: var(--primary); border-radius: 100%; position: absolute;left: 120px;top:50%; margin-top: -5px;content: "";   }

.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr .more{width:40px; height:40px; border-radius: 100%; background-color: var(--primary); display: flex;  justify-content: center;  align-items: center; color: #fff; font-size: 20px; position: absolute; right: 0px;top:0px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  }
.MAIN_03_KNB .contents-container .grid_box .fr  .tit_box .tit_fr .more:hover{ background-color: var(--primary-hover);
  }


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