@charset "utf-8";
/* ************************ 공통적인 스타일작성 ************************ */

/* ===== SUB-TAB (공용) ===== */
/* PC: 좌측 세로형 sticky / 모바일: 상단 가로 스크롤 */
.sub-tab-wrap{display:flex;align-items:flex-start;gap:100px;width:100%;}
.sub-tab-nav{flex-shrink:0;width:240px;position:sticky;top:120px;z-index:100;}
.sub-tab-nav ul{display:flex;flex-direction:column;gap:4px;}
.sub-tab-nav ul li a{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:8px;
  font-size:var(--fs16);font-weight:600;color:#888;
  transition:all .25s ease;border-left:3px solid transparent;
  background:#f8f8f8; cursor: pointer;
}
.sub-tab-nav ul li a:hover{color:var(--c_base4);background:#f0f0f0;}
.sub-tab-nav ul li.on a{color:var(--c_base2);background:#fff3ea;border-left-color:var(--c_base2);font-weight:700;}
.sub-tab-nav ul li a .tab-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-size:1.1rem;font-weight:700;background:#e0e0e0;color:#888;flex-shrink:0;
  transition:all .25s; 
}
.sub-tab-nav ul li.on a .tab-num{background:var(--c_base2);color:#fff;}
.sub-tab-content{flex:1;min-width:0;}

/* ************************ 데스크탑(992~) ************************ */

/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 1199px) {
  .sub-tab-nav{width:160px;}
  .sub-tab-wrap{gap:24px;}
  .sub-tab-nav ul li a {font-size:var(--fs16);}
  .sub-tab-wrap{flex-direction:column;gap:0;}
  .sub-tab-nav{
    width:100%;position:sticky;top:12px;
    background:rgba(255,255,255,0.2); z-index:200;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    padding:0 16px; border-radius:16px; backdrop-filter: blur(10px);
  }
  .sub-tab-nav ul{flex-direction:row;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 0; gap:8px;}
  .sub-tab-nav ul::-webkit-scrollbar{height:3px;}
  .sub-tab-nav ul::-webkit-scrollbar-thumb{background:var(--c_base2);border-radius:2px;}
  .sub-tab-nav ul li{flex-shrink:0;}
  .sub-tab-nav ul li a{
    padding:9px 16px;border-radius:100px;border-left:none;
    border:1.5px solid #e0e0e0;white-space:nowrap;font-size:var(--fs16);
    background:#fff; 
  }
  .sub-tab-nav ul li.on a{border-color:var(--c_base2);background:#fff3ea;color:var(--c_base2);}
  .sub-tab-content{width:100%; padding-top:60px;}	
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
/* 모바일: 탭이 상단 가로 스크롤 */
  .sub-tab-wrap{flex-direction:column;gap:0;}
  .sub-tab-nav{
    width:100%;position:sticky;top:12px;
    background:rgba(255,255,255,0.2); z-index:200;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    padding:0 16px; backdrop-filter: blur(10px);
  }
  .sub-tab-nav ul{flex-direction:row;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 0; gap:8px;}
  .sub-tab-nav ul::-webkit-scrollbar{height:3px;}
  .sub-tab-nav ul::-webkit-scrollbar-thumb{background:var(--c_base2);border-radius:2px;}
  .sub-tab-nav ul li{flex-shrink:0;}
  .sub-tab-nav ul li a{
    padding:9px 16px;border-radius:100px;border-left:none;
    border:1.5px solid #e0e0e0;white-space:nowrap;font-size:1.4rem;
    background:#fff;
  }
  .sub-tab-nav ul li.on a{border-color:var(--c_base2);background:#fff3ea;color:var(--c_base2);}
  .sub-tab-content{width:100%; padding-top:40px;}	
	
    

}


/* ************************ 모바일 (0~500) ************************ */
@media screen and (max-width: 500px) {

  

}