/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { 
	 .KNB_tablayout .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_tablayout .contents-container .tab_area{width: 100%; float: left; display: grid;grid-template-columns: 25% auto ; }
	 .KNB_tablayout .tab_area .tabs { display: flex;flex-direction: column;   grid-gap: 20px;  }
	  .KNB_tablayout .tab_area .tabs .tab {
  width: 100%; float: left; 
    
  }  
	
	


/* 화살표 버튼 */
.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_tablayout .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_tablayout .contents-container .tab_area{ width: 100%; float: left; position: relative }
	 .KNB_tablayout .tab_area .tabs { display: flex; flex-direction: row;  grid-gap: 0px;  justify-content: space-between;   margin-bottom:40px ; 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_tablayout .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_tablayout .tab_area .tabs .tab p{
    padding: 5px 0px;
    cursor: pointer;
   
    border-bottom: none;font-size:calc(var(--tit-mds-size) * 0.8); font-weight: 500;width: auto; float: left;white-space:nowrap;
    
  }

  .KNB_tablayout .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
  }
	.KNB_tablayout .tab-content { display: none;  margin-top: -80px;  }
	.KNB_tablayout .tab-content .grid_cont{width: 100%; float: left;display: flex;flex-direction: column; grid-gap: 80px }
.KNB_tablayout .tab-content .grid_cont>div:first-child{margin-left: -50px; width: calc(100% + 50px)}
.KNB_tablayout .tab-content .grid_cont>div:first-child{ background-color: #f7f7f7 ; padding:clamp(20px, 3.906vw, 50px) clamp(20px, 3.906vw, 50px) clamp(40px, 3.906vw, 70px); border-radius: 30px }
.KNB_tablayout .tab-content .grid_cont>div:nth-child(2){ background-color: #f7f7f7 ; border-radius: 0px 0px 30px 30px;width: calc(100% + 50px);margin-left: -50px; margin-top: -100px}
	


	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.KNB_tablayout .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.9); font-weight: 500;width: auto; float: left;white-space:nowrap; margin-top: -2px
    
  }

  .KNB_tablayout .tab_area .tabs .tab.on p{
 
    font-weight: bold; font-size:calc(var(--tit-mds-size) * 0.9); 
    color: var(--primary); border-bottom: 2px solid var(--primary); width: auto; float: left; position: relative; z-index: 2
  }
	.KNB_tablayout .tab-content { display: none;   }

	.KNB_tablayout .tab-content .grid_cont{width: 100%; float: left;display: flex;flex-direction: column; grid-gap: 30px }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


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