/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { 
	 .KNB_com_25 .contents-container .sub_stit{width: 100%; float: left; font-size:calc(var(--tit-md-size) * 1); font-weight: 700; line-height: 130%; margin-bottom: 40px; }


	.KNB_com_25 .contents-container .tab_area{width: 100%; float: left; }
	 .KNB_com_25 .tab_area .tabs {width: 100%; float: left; grid-gap:5px; display: grid; grid-template-columns: repeat(4, 1fr);}
	  .KNB_com_25 .tab_area .tabs .tab {
  width: 100%; float: left; text-align: center; 
    
  }  
	
	


/* 화살표 버튼 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  border-radius: 50%;
  z-index: 3;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px; display: none
}
.arrow.left { left: 5px; }
.arrow.right { right: 5px; }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	 .KNB_com_25 .contents-container .sub_stit{width: 100%; float: left; font-size:calc(var(--tit-md-size) * 1); font-weight: 700; line-height: 130%; margin-bottom: 10px; }


	.KNB_com_25 .contents-container .tab_area{ width: 100%; float: left; position: relative }
	 .KNB_com_25 .tab_area .tabs { display: flex; flex-direction: row;  grid-gap: 0px;  justify-content: space-between;   margin-bottom: 20px ; overflow-x: auto; padding: 0px 30px}
	
	.scroll-hidden {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  scrollbar-width: none; /* Firefox */
}

.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
	
	  .KNB_com_25 .tab_area .tabs .tab {
  width: auto; float: left; 
    
  }  
	
	
	.scroll-mask {position: relative; padding: 0px 0px}

/* 마스크 효과 */
.scroll-mask::before,
.scroll-mask::after {
  content: '';
  position: absolute;
  top: 0;
  width:50px;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}
.scroll-mask::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 40px;

  background: linear-gradient(to right, #fff 0px, #fff 25px, transparent 40px);
  z-index: 9999;
  pointer-events: none;
}

.scroll-mask::after {
  content: '';
  position: absolute;
  top: 0;
  right:-1px;
  width: 40px;

  background: linear-gradient(to left, #fff 0px, #fff 25px, transparent 40px);
  z-index: 9999;
  pointer-events: none;
}

/* 화살표 버튼 */
.arrow {
  position: absolute;
  top:7px;
 
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  border-radius: 50%;
  z-index: 999999;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
}
.arrow.left { left: -5px; }
.arrow.right { right: -5px; }


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



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { 
	
.KNB_com_25 .tab_area .tabs .tab p{
    padding: 10px 0px;
    cursor: pointer;
    width: 100%; float:left; text-align:center; 
    border-bottom: none;font-size:calc(var(--tit-mds-size) * 0.8); font-weight: 500; float: left;white-space:nowrap;  background-color: #f7f7f7;  border-radius: 6px; border: 1px solid #eee
    
  }

  .KNB_com_25 .tab_area .tabs .tab.on p{
 
    font-weight: bold; font-size:calc(var(--tit-mds-size) * 0.8); 
    color: #fff;  width: 100%; float:left; text-align:center; background-color: #6f6f6f;  border-radius: 6px; border: 1px solid #eee
  }
	.KNB_com_25 .tab-content { display: none;  margin-top: -80px;  }
	.KNB_com_25 .tab-content .grid_cont{width: 100%; float: left;  padding: 0PX 0PX; border-bottom: 1px solid #e4e4e4}


	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.KNB_com_25 .tab_area .tabs .tab p{
    padding: 2px 10px;
    cursor: pointer;  border-top: 2px solid #eee;
   
    border-bottom: 2px solid #eee; font-size:calc(var(--tit-mds-size) * 0.8); font-weight: 500;width: auto; float: left;white-space:nowrap; margin-top: -2px
    
  }

  .KNB_com_25 .tab_area .tabs .tab.on p{
 
    font-weight: bold; font-size:calc(var(--tit-mds-size) * 0.8); 
    color: var(--primary); border-bottom: 2px solid var(--primary); width: auto; float: left; position: relative; z-index: 2
  }
	.KNB_com_25 .tab-content { display: none; width: 100%; float: left;  background-color: #fafafa;  border-radius: 6px;  }

	.KNB_com_25 .tab-content .grid_cont{width: 100%; float: left;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


 
  .KNB_com_25 .tab-content.active { display: block; }




.KNB_com_25 { width:100%; float: left; }	



/* 구분 -----------------------------------*/
/**** pc ****/
.KNB_com_25 .sub_stit{ width:100%; float: left;font-size:calc(var(--tit-mds-size) * 1.2); color: #222; font-weight:600; line-height: 100%; letter-spacing: -1px; margin-bottom:clamp(10px, 2.344vw, 30px) }	


	
	
.KNB_com_25 .work_list_tit{ width:100%; float: left; font-size: var(--tit-md-size); color: #000; font-weight:700; line-height: 140%; letter-spacing: -1px; }    

.KNB_com_25 .work_list_hr { width: 100%; float: left; margin: clamp(30px, 4.688vw, 60px) 0 0 0; border-top: 1px solid #e4e4e4; position: relative;}


.KNB_com_25 .work_list_tx ul li{ width:100%; float: left; font-size: var(--tx-sm-size);color: #3b3b3b; font-weight:400; line-height: 180%; letter-spacing: -1px; margin-bottom: 5px; position: relative}	

.KNB_com_25 .work_list_tx ul li .label_em {color: #000; font-weight:500;}





.KNB_com_25 .box_line .wg_tx1 {width: 100%; float: left; font-size: var(--tit-mds-size); font-weight: 600; margin-bottom: 10px;  line-height: 150%; color: #304fb0; letter-spacing: -0.5px}


.KNB_com_25 .box_line .tt1 {width: 100%;float: left; font-size:calc(var(--tx-sm-size) * 1);  color: #000; margin-bottom: 10px;  }


.KNB_com_25 .box_line .wg_grid {width: 100%; float: left; padding:20px; background-color: #f7f7f7; border-radius: 10px; 
color: #000;}

.KNB_com_25 .box_line .tt2{width: 100%; float: left;font-size:var(--tx-sm-size); font-weight: 700; }
.KNB_com_25 .box_line .tt2 em{width: auto; font-size:calc(var(--tit-mds-size) * 1.5); font-weight: 700; margin-right: 5px}

.KNB_com_25 .box_line .tt2 ul li{ width:100%; float: left; font-size: var(--tx-sm-size);color: #222; font-weight:500; line-height: 140%; letter-spacing: -1px; margin-bottom: 5px; padding-left: clamp(10px, 1.172vw, 15px); position: relative}		
.KNB_com_25 .box_line .tt2 ul li:before{width: 3px; height: 3px;  border-radius: 100%; position: absolute; left: 0px; top:clamp(8px, 0.938vw, 12px); background-color: #222; 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;}



 .box_line {width:100%; float: left; border: 1px solid #e4e4e4; border-bottom: none; border-top: none; padding: clamp(10px, 2.344vw, 30px)  clamp(30px, 6.250vw, 60px)!important; border-radius: 0;}