@charset "utf-8";
.MAIN_02_KNB{width: 100%; float: left;
background: linear-gradient(135deg,  #f3f2f8 0%,#f0f5f7 100%);  padding: clamp(30px, 11.719vw, 150px) 0px;  letter-spacing: -1px;}


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.MAIN_02_KNB .contents-container .grid_box{width: 100%; float: left; display: grid;grid-template-columns: auto 330px;  grid-gap: 50px}
	.MAIN_02_KNB .contents-container .grid_box .fl{width: 100%; float: left; display: grid;grid-template-columns: repeat(3, 1fr); grid-gap: 40px ; }
	
	 }
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	.MAIN_02_KNB .contents-container .grid_box{width: 100%; float: left; display: grid;grid-template-columns: auto 300px;  grid-gap: 80px}
	.MAIN_02_KNB .contents-container .grid_box .fl{width: 100%; float: left; display: grid;grid-template-columns:100%; grid-gap: 40px;}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_02_KNB .contents-container .grid_box{width: 100%; float: left; display: flex;flex-direction: column; grid-gap: 40px  }
	.MAIN_02_KNB .contents-container .grid_box .fl{width: 100%; float: left; display: flex;flex-direction: column; grid-gap: 40px }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.MAIN_02_KNB .contents-container .grid_box .fl .bbs_box{width: 100%; float: left; display: flex; flex-direction: column;  grid-gap: 20px}
.MAIN_02_KNB .contents-container .grid_box .fl .bbs_box .tit_box{width: 100%; float: left; position: relative; padding-right: 40px }



.MAIN_02_KNB .contents-container .grid_box .fl .bbs_box .tit_box .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_02_KNB .contents-container .grid_box .fl .bbs_box .tit_box .tx2{width: 100%; float: left;font-size:calc(var(--tx-sm-size) * 1); color: #333}

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

.MAIN_02_KNB .contents-container .grid_box .fl .bbs_box .tit_box .more:before{width:6px; height: 6px; border-radius: 100%; background-color: var(--primary); position: absolute; left: -20PX; top:50%; margin-top: -3PX;  content: ""
  }	

.MAIN_02_KNB .contents-container .grid_box .fl .bbs_box .tit_box .more:hover{ background-color: var(--primary-hover);
  }

.MAIN_02_KNB .contents-container .grid_box .fr{width: 100%; float: left;position: relative }