@charset "utf-8";

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.MAIN_04_KNB_2 {width: 100%; 
  float: left; 
  position: relative;
  padding: 15rem 0rem;
  margin-top: -47rem;  overflow-x: hidden; position: relative; z-index: 9999999
}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	.MAIN_04_KNB_2 {width: 100%; 
  float: left; 
  position: relative;
  padding: 15rem 0rem;
  margin-top: -250px;  overflow-x: hidden; position: relative; z-index: 9999999
}

}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_04_KNB_2 {width: 100%; 
  float: left; 
  position: relative;
  padding: 0rem 0rem;
  margin-top:-3rem;overflow-x: hidden;   position: relative; z-index: 9999999; padding-bottom:80px
}

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



.MAIN_04_KNB_2 .contents-container {
  padding: 0;
}

.MAIN_04_KNB_2 .contents-inner {
  width: 100%;  padding: 0px; position: relative
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
	.MAIN_04_KNB_2 .area_right  .area_right_bgbox{  width:150%; height: 400px;  box-sizing: border-box;  position: absolute; left: -100px; top: 80px; 
  z-index:-1; background: url("/_img/svg/knb_icon/main_4_bg.svg") no-repeat left top ; background-size: auto 100%

}

	.MAIN_04_KNB_2 .area_right {  width: 67%;  height: 400px;  position: relative; float:right
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	.MAIN_04_KNB_2 .area_right  .area_right_bgbox{  width:150%; height:  clamp(300px, 31.250vw, 400px);  box-sizing: border-box;  position: absolute; left: -80px; top:60px; 
  z-index:-1; background: url("/_img/svg/knb_icon/main_4_bg.svg") no-repeat left top ; background-size: auto 100%

}

	.MAIN_04_KNB_2 .area_right {  width:80%;  height:  clamp(300px, 31.250vw, 400px);  position: relative; float:right
}
	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
		.MAIN_04_KNB_2 .area_right  .area_right_bgbox{  width:100%; height:clamp(230px, 23.438vw, 300px);  box-sizing: border-box;  position: absolute; left: 20px; top:0px; 
  z-index:-1; background: url("/_img/svg/knb_icon/main_4_bg.svg") no-repeat left top ; background-size: auto 100%

}
	.MAIN_04_KNB_2 .area_right {  width: 100%;  position: relative; float:right; padding: 20px 30px 0px 80px
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/******3******/





.MAIN_04_KNB_2 .area_right .contents_list{width: 100%; float: left;  display: flex;
justify-content:flex-start;  align-items: center; flex-direction:row; box-sizing: border-box;   }

.MAIN_04_KNB_2 .area_right  .contents_list .in_list{width: 100%;   display: flex;
justify-content:flex-end;  align-items:center; flex-direction:column; box-sizing: border-box; }
.MAIN_04_KNB_2 .area_right .contents_list .in_list .wg_img1{width: 100%;}
.MAIN_04_KNB_2 .area_right .contents_list .in_list .wg_img1 img{width: 100%;}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_04_KNB_2 .area_right .contents_list .in_list span{width: 100%;   font-weight: 600; color: #000;  font-size: calc(var(--tx-sm-size) * 1.3); letter-spacing: -1px ;  text-align: center; margin-top:40px}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_04_KNB_2 .area_right .contents_list .in_list span{width: 100%;   font-weight: 600; color: #000;  font-size: calc(var(--tx-sm-size) * 1); letter-spacing: -1px ;  text-align: center; margin-top:20px}

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


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_04_KNB_2 .area_right .contents_list .more_go3{ width:150%;  float: left;  height: 1px; background-color: #dadaed;  margin-bottom: 0; position: absolute; bottom:-30px; right:calc(100% + 150px); z-index: 9999; background-color: !important }
.MAIN_04_KNB_2 .area_right .more_go3:before{ width:65px; height: 65px; background-color: #333399; border-radius: 100%; position: absolute; right:-120px; top:-35px; content: "\ebb5";  color: #fff; font-family: unicons-line; font-size: 35px;
 display: flex; justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; padding-bottom: 5px}
.MAIN_04_KNB_2 .area_right .more_go3:after{width: 10px; height: 10px;  border-radius: 100%; position: absolute; right: -20px; top:-5px; background-color: #333399; content: "";  transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;}


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_04_KNB_2 .area_right .contents_list .more_go3{ width:30%;  float: left;  height: 1px; background-color: #dadaed;  margin-bottom: 0; position: absolute; bottom:-15px; right:calc(100%); z-index: 9999; background-color: !important }
.MAIN_04_KNB_2 .area_right .more_go3:before{ width:40px; height: 40px; background-color: #333399; border-radius: 100%; position: absolute; right:-70px; top:-20px; content: "\ebb5";  color: #fff; font-family: unicons-line; font-size: 35px;
 display: flex; justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; padding-bottom: 5px}
.MAIN_04_KNB_2 .area_right .more_go3:after{width: 10px; height: 10px;  border-radius: 100%; position: absolute; right: -20px; top:-5px; background-color: #333399; content: "";  transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;}


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