/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { 
	 .COM_tab_YJM .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; }


	.COM_tab_YJM .contents-container .tab_area{width: 100%; float: left;  }
	 .COM_tab_YJM .tab_area .tabs { width: 100%; float: left;display: flex; flex-direction: row;  grid-gap: 20px;  margin-bottom: 50PX; display: grid;   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); display: flex;  justify-content: center;  align-items: center; flex-wrap: wrap;}
	
 .COM_tab_YJM.YJM_3010_0 .tab_area .tabs { width: 100%; float: left;display: flex; flex-direction: row;  grid-gap: 20px;  margin-bottom: 50PX!important; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px ; }
	
 .COM_tab_YJM .tab_area .tabs .tab { font-weight: 800;font-size:calc(var(--tx-sm-size) * 1.1);  max-width:350px ; min-width: 180PX; float: left;  background: #F7F7F7; padding: 17PX 30PX; border-radius: 50PX; display: flex;  justify-content: center;  align-items: center; cursor: pointer
    
  } 
	

	
.COM_tab_YJM .tab_area .tabs .tab P{
  width: auto; 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) {
	 .COM_tab_YJM .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; }


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

.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
	 .COM_tab_YJM .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; }


	.COM_tab_YJM .contents-container .tab_area{width: 100%; float: left;  }
	 .COM_tab_YJM .tab_area .tabs { width: 100%; float: left;display: flex; flex-direction: row;  grid-gap: 20px;  margin-bottom: 30PX }
	  .COM_tab_YJM .tab_area .tabs .tab {
  width: 100%; min-width: 180PX; float: left;  background: #F7F7F7; padding:15PX 20PX; border-radius: 50PX; display: flex;  justify-content: center;  align-items: center; cursor: pointer
    
  }  
.COM_tab_YJM .tab_area .tabs .tab P{
  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: 70px;
  z-index: 2;
  pointer-events: none;
}
.scroll-mask::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 60px;

  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:25px;
 
  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) { 
	
.COM_tab_YJM .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;
    
  }
  .COM_tab_YJM .tab_area .tabs .tab.on{
 background-color: var(--primary); color: #fff
  }
  .COM_tab_YJM .tab_area .tabs .tab.on p{
 
    font-weight: bold; font-size:calc(var(--tit-mds-size) * 1);  font-weight: 800;
    color: #FFF;  width: auto; float: left;
  }
	.COM_tab_YJM .tab-content { display: none;  padding: 0px 0PX; width: 100%; float: left }
	.COM_tab_YJM .tab-content .grid_cont{width: 100%; float: left;display: flex;flex-direction: column; grid-gap: 50px}
	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.COM_tab_YJM .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
    
  }
  .COM_tab_YJM .tab_area .tabs .tab.on{
 background-color: var(--primary);    color: #fff; 
	  
  }
  .COM_tab_YJM .tab_area .tabs .tab.on p{
 
    font-weight: bold; font-size:calc(var(--tit-mds-size) * 0.8); 
    color: #fff; border-bottom: 2px solid var(--primary); width: auto; float: left; position: relative; z-index: 2
  }
	.COM_tab_YJM .tab-content { display: none;  background-color: #fafafa; padding: 10px 0px; border-radius: 6px;  }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


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


/* 기본 포커스 링/하이라이트 제거 */
.tabs [role="tab"] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.tabs [role="tab"]:focus { outline: none; box-shadow: none; }
.tabs [role="tab"]::-moz-focus-inner { border: 0; }

/* 키보드 탐색일 때만 보이게 하려면 이 줄 유지/수정, 완전 숨기려면 아예 지우세요 */
.tabs [role="tab"]:focus-visible {
  /* 포커스 보일 필요 없으면 다음 두 줄도 주석 처리 또는 삭제 */
  outline: 0;
  box-shadow: none;
}

/* 크롬의 :focus 표시를 강제로 숨김 (focus-visible 아닐 때) */
.tabs [role="tab"]:focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}