:root {--sub-totalbg:#f7f6f4; }


.sub_top{width: 100%; float: left;  position: relative; float: left;}


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.sub1d_tit_area{width: 100%; float: left;  position: relative;float: left; padding-top: var(--header-h);; width: 100%;  min-height:clamp(200px, calc(18.421vw + 126.316px), 350px);   align-items: center;background-color: var(--sub-totalbg);display: flex;vertical-align: middle;flex-direction: column; }
.sub1d_tit_area>div{width: 100%; float: left; }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.sub1d_tit_area{width: 100%; float: left;  position: relative;float: left; padding-top: var(--header-h);; width: 100%;  min-height:clamp(200px, calc(18.421vw + 126.316px), 480px); background-color: var(--sub-totalbg); }
.sub1d_tit_area .container-md{width: 100%; float: left; padding: 0px!important}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.sub1d_tit_area .sub_topbg{width: auto; float: left; position: absolute; left: 60%; top:10%; z-index: 0 }
	.sub1d_tit_area .title-area { width: 100%; float: left; margin-top: 50px;}
	
	.sub1d_tit_area .txbox { width: 100%; float: left;}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	.sub1d_tit_area .sub_topbg{width: auto; float: left; position: absolute; left: 30%; top:10%; z-index: 0 }
	.sub1d_tit_area .title-area { width: 100%; float: left;z-index: 99999; display: flex; justify-content:flex-start;align-items:flex-start; flex-direction: column; margin-bottom: 30px}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	.sub1d_tit_area .sub_topbg{width: auto; float: left; position: absolute; right: 0px; top:10%; z-index: 0 }
		.sub1d_tit_area .sub_topbg img{width: 80%; float: left; }
	.sub1d_tit_area .title-area { width:100%; float: left;z-index: 99999; margin-bottom: 20px; padding:30px 30px 0px;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 상단 타이틀 css -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.subtop_tit_size {font-size: var(--subtop-tit-size)!important; line-height: 110%!important; width: auto; float: left; margin-right: 10px; width: 100%; float: left;}
.subtop_tit_size em{font-size: var(--subtop-tit-size)!important;  line-height: 110%!important; color: var(--primary);letter-spacing: -1px;   
  background-clip: text;
  display: inline-block;
  background-repeat: no-repeat;font-weight: 800; }
.subtop_tit_size span{font-size:calc(var(--tx-sm-size) * 1); line-height: 110%!important; letter-spacing: -1px; font-weight: 500; color: #666}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.subtop_tit_size {font-size: var(--tit-mds-size); line-height: 110%!important; width: 100%; float: left}
.subtop_tit_size em{font-size:calc(var(--tit-md-size) * 1.1)!important; line-height: 110%!important; color: var(--primary);letter-spacing: -1px; ; width: 100%; float: left ;text-align: left; margin-bottom: 10px}
.subtop_tit_size span{font-size:calc(var(--tx-sm-size) * 1); line-height: 110%!important; letter-spacing: -1px; font-weight: 500; color: #666}


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




/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.subtop_tit_size {font-size: var(--subtop-tit-size)!important; line-height: 110%!important}
.subtop_tit_size em{font-size:calc(var(--tit-lg-size) * 1); line-height: 110%!important; color: #000;letter-spacing: -1px;  }
.subtop_tit_size span{font-size:calc(var(--tx-sm-size) * 1); line-height: 110%!important; letter-spacing: -1px; font-weight: 500; color: #666}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.subtop_tit_size {font-size: var(--subtop-tit-size)!important; line-height: 110%!important; width: 100%; text-align: center}
.subtop_tit_size em{font-size:calc(var(--tit-lg-size) * 0.8); line-height: 110%!important; color: #000;letter-spacing: -1px; font-weight: 800 }
.subtop_tit_size span{font-size:calc(var(--tx-sm-size) * 1); line-height: 110%!important; letter-spacing: -1px; font-weight: 700  color: #666}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




	/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {	.sub2d_menu_out_area{width: 100%; float: left;position: relative ; overflow-x: hidden; margin-bottom: 100px; margin-top: -35px}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {	.sub2d_menu_out_area{width: 100%; float: left;position: relative ; overflow-x: hidden; margin-bottom: 100px; margin-top: -10px}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
	
	.sub2d_menu_area{width: 100%; float: left;position: relative ;}
.sub2d_menu_area:before{content: "";    width: 100%;  height:100%; position: absolute; left: 50%; top: 0px; float: left; background-color: var(--dynamic-bg-color, var(--sub-color10));}
.sub2d_menu_area .titgrid{width: 100%;  height: 100%;  float: left;grid-template-columns:80px auto ;display: grid;}
	
	
.sub2d_menu_area .titgrid .d1_tit{width: 100%;  height: 100%;  float: left; background-color: #333; padding: 0px 30px; color: #fff; font-weight: 700;border-radius: 10px 0px 0px 10px ; display: flex;   align-items: center; font-size:calc(var(--tit-mds-size) * 0.9); position: relative}

.sub2d_menu_area .titgrid .d1_tit:before{width: 40px;;  height: 40px;  content: "\eb9f";   background-color: var(--primary);  font-family: unicons-line; color: #Fff; font-size: 20px; display: flex;  justify-content: center;  align-items: center; position: absolute; right: 30px; border-radius: 100%; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}

.sub2d_menu_area .home{width: 80px;  height: 100%;  float: left; background-color: #000000;border-radius: 20px 0px 0px 0px ; display: flex;  justify-content: center;  align-items: center;}
.sub2d_menu_area .home img{   width: 30px; 
}
	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.sub2d_menu_area{width: 100%; float: left;position: relative ; margin-top:10px; background-color: var(--dynamic-bg-color, var(--sub-color10));; overflow: hidden }

.sub2d_menu_area .titgrid{width: 100%;  height: 100%;  float: left;border-radius: 6px ; }
.sub2d_menu_area .titgrid .d1_tit{width: 100%;  height: 100%;  float: left; background-color: #333; padding: 0px 15px; color: #fff; font-weight: 700;border-radius: 10px 0px 0px 10px ; display: flex;   align-items: center; font-size:calc(var(--tit-mds-size) * 0.9); position: relative}

.sub2d_menu_area .titgrid .d1_tit:before{width: 40px;;  height: 40px;  content: "\eb9f";   background-color: var(--primary);  font-family: unicons-line; color: #Fff; font-size: 20px; display: flex;  justify-content: center;  align-items: center; position: absolute; right: 30px; border-radius: 100%; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.sub2d_menu_area .home{ width: 50px;   height: 100%; float: left; background-color: #333;border-radius: 6px 0px 0px 6px ; display: flex;  justify-content: center;  align-items: center;  display: none;}
.sub2d_menu_area .home img{   width: 30px; 
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





/* 서브 메뉴 왼쪽 셀렉트 선택 컨테이너 */

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.d1_wrap { position: relative; display:inline-block; }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.d1_wrap { position: relative; display:inline-block; display: none }

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



/* 토글 버튼 */
.d1_tit {}
.d1_tit:hover { border-color:#cbd5e1; box-shadow:0 4px 10px rgba(0,0,0,.06); }
.d1_tit.on { border-color:#2563eb; box-shadow:0 6px 16px rgba(37,99,235,.12); }

.sub2d_menu_area .titgrid .d1_tit.on:before{width: 40px;;  height: 40px;  content: "\eb9f";   background-color: var(--primary);  font-family: unicons-line; color: #Fff; font-size: 20px; display: flex;  justify-content: center;  align-items: center; position: absolute; right: 30px; border-radius: 100%; transform:rotate(90deg);  }




/* 드롭다운 */
.d1_select {
  position:absolute; left:0; top:calc(100% - 7px);
  min-width: 100%; z-index: 50;
  background:#333; border-radius:0px 0px 12px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  overflow: hidden; /* 둥근모서리 */
  /* 애니메이션용 래퍼 트릭 */; z-index: 9999999999; padding-top: 5px
}

/* 스르르(슬라이드) 효과용 내부 래퍼 */
.d1_select.is-anim {
  transform-origin: top center;
  animation: d1SlideDown .18s ease forwards;
}
.d1_select.is-hide {
  animation: d1SlideUp .18s ease forwards;
}

@keyframes d1SlideDown {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes d1SlideUp {
  from { opacity:1; transform: translateY(0); }
  to   { opacity:0; transform: translateY(-6px); }
}

/* 리스트 */
.d1_select__list {
  list-style:none; margin:0; padding:10px;
  max-height: 60vh; overflow:auto;
}
.d1_select__item { margin:2px 0; }

.d1_select__a {
  display:block; padding:10px 20px; border-radius:8px;
  color:#fff!important; text-decoration:none; line-height:1.2;
  transition: background .15s, color .15s;
}
.d1_select__a:hover { background:#000; }

/* 현재 1뎁스(on 컬러) */
.d1_select__item.is-current .d1_select__a,
.d1_select__a.is-current {
  font-weight:700; background:var(--primary);; cursor:default; color:#fff;
}













.page_title{ width: 100%; float: left;  font-size: var(--tit-lg-size)!important; line-height: 110%!important ;color: #000; margin: clamp(10px, 3.906vw, 50px) 0px; font-weight: 700}




/* ===== dh-nav arrows (2뎁스 순회) ===== */



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
	.dh-nav-arrows{display:flex;gap:10px;align-items:center ; position: absolute; right: 0px; 

top:50%;transform: translateY(-50%);
		; z-index: 99999}
.dh-nav-arrows .btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%; aspect-ratio:1 / 1;
  background:#f3f4f6; /* 기본 회색 */
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  transition:background .15s, transform .12s, opacity .12s;
  text-decoration:none; cursor: pointer; z-index: 9999; position: relative
}

	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	
	.dh-nav-arrows{display:flex;gap:0px;align-items:center ;  z-index: 99999; width: calc(100% + 20px); margin-left: -10px; float: left}
.dh-nav-arrows .btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%; aspect-ratio:1 / 1!important;
  background:#f3f4f6; /* 기본 회색 */
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  transition:background .15s, transform .12s, opacity .12s;
  text-decoration:none; cursor: pointer; z-index: 9999; position: relative
}

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




.dh-nav-arrows .btn.next:hover{ background:var(--primary); } /* 우측만 hover 컬러 */
.dh-nav-arrows .btn.prev:hover{ background:var(--primary);; }  /* 좌측은 hover해도 회색 유지 */

.dh-nav-arrows .btn.next:before{ content: "\eb9f";    font-family: unicons-line; } /* 우측만 hover 컬러 */
.dh-nav-arrows .btn.prev:before{ content: "\ec49";    font-family: unicons-line; } /* 우측만 hover 컬러 */


.dh-nav-arrows .btn.next:hover:before{content: "\eb9f";  color: #fff } /* 우측만 hover 컬러 */
.dh-nav-arrows .btn.prev:hover:before{content: "\eb9f";   color: #fff }  /* 좌측은 hover해도 회색 유지 */



.dh-nav-arrows .btn.disabled{ opacity:.28; pointer-events:none; filter:grayscale(1); }
.dh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	/* ===== Breadcrumb (center) ===== */
.dh-bc{display:flex;align-items:center;justify-content:center;gap:10px; min-height:36px; width: auto; float: left; z-index: 1;position: absolute; right: 0px;bottom: 0px}
.dh-bc ol{display:flex;gap:8px;flex-wrap:wrap;align-items:center; list-style:none;margin:0;padding:0;font-size:14px;color:#6b7280}
.dh-bc li{display:flex;align-items:center;gap:8px}
.dh-bc li a{color:#374151;text-decoration:nonel; font-size:calc(var(--tx-sm-size) * 1); }
.dh-bc li a:hover{text-decoration:underline}
.dh-bc .sep{color:#cbd5e1}
.dh-bc .home{display:inline-flex;align-items:center;gap:6px; margin-top: -3px!important}
.dh-bc .home img{width: 25px; ; }
.dh-bc .curr{color:#111;font-weight:600;  font-size:calc(var(--tx-sm-size) * 1); } /* 마지막(현재) */


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	/* ===== Breadcrumb (center) ===== */
.dh-bc{display:flex; flex-direction: row;gap:5px; min-height:36px; width: 100%; float: left; z-index: 1; padding-left: 30px}
.dh-bc ol{display:flex;gap:3px;flex-wrap:wrap;align-items:center; list-style:none;margin:0;padding:0;font-size:12px;color:#6b7280}
.dh-bc li{display:flex;align-items:center;gap:4px}
.dh-bc li a{color:#374151;text-decoration:nonel; font-size:calc(var(--tx-sm-size) * 0.9); letter-spacing: -0.5px }
.dh-bc li a:hover{text-decoration:underline}
.dh-bc .sep{color:#cbd5e1}
.dh-bc .home{display:inline-flex;align-items:center;gap:3px}
.dh-bc .home img{width:15px; ; }
.dh-bc .curr{color:#111;font-weight:600;  font-size:calc(var(--tx-sm-size) * 1); } /* 마지막(현재) */


}

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











/* 2뎁스 메뉴 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
ul.Sub2d_gnb { list-style: none; width:100%; display: flex; flex-direction: row; grid-gap: 0px; padding: 0px 0px 0px 40px; background-color: var(--primary);  }
ul.Sub2d_gnb {height:clamp(40px, 6.250vw, 70px);display: flex;   grid-gap:clamp(10px, calc(2.632vw + -0.526px), 50px); }

ul.Sub2d_gnb li {height: 100%; display: flex;  justify-content: center;  align-items: center; position: relative}	

ul.Sub2d_gnb li a { padding: 10px 0px 10px 0px;  font-weight: 600; position: relative; font-size:calc(var(--tx-sm-size) * 1.1); color: rgba(255,255,255,0.70);  height: 100%; display: flex;  justify-content: center;  align-items: center;}
ul.Sub2d_gnb li a:hover{color: rgba(255,255,255,1); }
}
	
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
ul.Sub2d_gnb { list-style: none; width:100%;float: left; display: flex; flex-direction: row;  padding: 10px 0px;  background-color: var(--primary-opacity80); }

ul.Sub2d_gnb li {padding: 0px 10px}	

ul.Sub2d_gnb li a { padding: 7px 0px 7px 0px;  font-weight:400; position: relative;font-size:calc(var(--tx-sm-size) * 1.1); color: #fff;  height: 100%; display: flex;  justify-content: center;  align-items: center;}

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






/* 현재 선택된 메뉴 스타일 */
ul.Sub2d_gnb li.active a {  color: var(--dynamic-point-color, #000); border-radius: 50px; z-index: 99; position: relative; }
/* 현재 선택된 메뉴 스타일 */

ul.Sub2d_gnb li.active a:after {  width: 100%; float: left; height: 5px; background-color: var(--dynamic-point-color, #333);  position: absolute; bottom: 0px; left: 0px ;content: "";  border-radius: 10px }


/* 스크롤 래퍼 공통 */
.Sub2d_scroller { position: relative; }

/* 모바일: 한 줄 가로 스크롤 + 버튼 */
@media only all and (max-width:767px) {
  .Sub2d_viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* 양옆 화살표와 겹치지 않도록 여백 살짝 */
    padding: 0 35px; 
    position: relative;
    /* 터치 스크롤 개선 */
    scroll-snap-type: none;
    scrollbar-width: none; /* Firefox */
  }
  .Sub2d_viewport::-webkit-scrollbar { display: none; }

  /* 기존 ul.Sub2d_gnb 디자인은 그대로, 다만 모바일에서만 한 줄 강제 */
  .Sub2d_viewport > ul.Sub2d_gnb {
    flex-wrap: nowrap !important;   /* ← 핵심: 줄바꿈 금지 */
    white-space: nowrap;            /* 폭 좁은 항목도 줄바꿈 방지 */
    gap: 0;                         /* grid-gap 대신 기존 규칙들을 존중 */
    width: max-content;            /* 내용물 크기에 맞춤 */
    min-width: 100%;              /* 최소 너비 보장 */
  }
  /* li는 가로 방향으로만 흐르게 고정 */
  .Sub2d_viewport > ul.Sub2d_gnb > li {
    flex: 0 0 auto;
    position: relative;
    white-space: nowrap;
  }

  /* 좌/우 네비 버튼 개선 */
  .Sub2d_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; 
    height: 32px;
    border: 0; 
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer; 
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
    font-size: 18px;
    font-weight: bold;
  }
  .Sub2d_nav:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
  }
  .Sub2d_nav.prev { left: 5px; }
  .Sub2d_nav.next { right: 5px; }
  
  /* 화살표가 숨겨질 때 부드러운 애니메이션 */
  .Sub2d_nav[hidden] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.8);
  }

  /* 가장자리 힌트 제거 (화살표로 충분) */
  .Sub2d_scroller::before,
  .Sub2d_scroller::after {
    display: none;
  }
}





/*상단 이미지 2 영역 */

.sub_top .contents-container{ position: relative;}
.sub_top .top_icon_area {width: 100%; float: left; position: relative; background-color: #000}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.sub_top .top_icon_area  .top_icon{width:auto; height: clamp(200px, calc(13.158vw + 147.368px), 400px) ;float: left;  position: relative; position: absolute; right: 0px; bottom:-40px; display: flex;  justify-content: center;  align-items: center; position: absolute;}


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.sub_top .top_icon_area  .top_icon{width:auto; height: clamp(200px, calc(13.158vw + 147.368px), 400px) ;float: left;  position: relative; position: absolute; right: 0px;bottom:40px; display: flex;  justify-content: center;  align-items: center; position: absolute;}


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


.sub_top .top_icon_area  .top_icon img{width:auto; height: 100%;}

 .sub_top .top_icon_area .top_icon lottie-player{width: 290px;  aspect-ratio:290 / 250; float: left; }
 .sub_top .top_icon_area .top_icon lottie-player.json-top01{width: 290px;  aspect-ratio:290 / 250; float: left; }



/*하위 본문 타이틀 영역 */


.sub2d_tit_area{width: 100%; float: left; padding:clamp(30px, calc(7.895vw + -1.579px), 150px)  0px 0px; position: relative; margin-bottom: clamp(30px, calc(1.316vw + 24.737px), 50px)}
	
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.sub2d_tit_area .Corner1 {position: absolute;left: 0px;top:0px;
  width:clamp(100px, 15.625vw, 200px);
  height:clamp(100px, 15.625vw, 200px); z-index: 99999!important
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.sub2d_tit_area .Corner1 {position: absolute;left: 0px;top:0px;
  width:clamp(100px, 15.625vw, 200px);
  height:clamp(100px, 15.625vw, 200px); z-index: 99999!important; display: none
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.sub2d_tit_area  .Corner1 .white-cutout {
  width: 100%;
  height: 100%;
  background:var(--sub-totalbg);

  /* 왼쪽 아래에 꽉 찬 1/4 원을 투명하게 */
  -webkit-mask-image: radial-gradient(circle at bottom right, transparent clamp(100px, 15.625vw, 200px), black clamp(100px, 15.625vw, 200px));
  mask-image: radial-gradient(circle at bottom right, transparent clamp(100px, 15.625vw, 200px), black 200pxclamp(100px, 15.625vw, 200px));  
}



 .sub2d_tit_area  .txbox .tx1 { width:auto; float: left; font-size:calc(var(--tit-lg-size) * 1); line-height: 110% ;margin-bottom:20px;  font-weight:900; z-index: 999; ; letter-spacing: -0.5px;  position: relative; font-family:var(--ff-ko3)!important;}






/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
 .sub2d_tit_area  .txbox .tx1 .current-menu{ width:auto; float: left; font-size:calc(var(--tit-lg-size) * 1); line-height: 110% ; font-weight:700; z-index: 999; ; letter-spacing: -0.5px;  position: relative ; font-family:var(--ff-ko2)!important; position: relative; padding-right: 20px }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
 .sub2d_tit_area  .txbox .tx1 .current-menu{ width:auto; float: left; font-size:calc(var(--tit-md-size) * 0.8); line-height: 110% ; font-weight:700; z-index: 999; ; letter-spacing: -0.5px;  position: relative ; font-family:var(--ff-ko2)!important; position: relative; padding-right: 20px }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.sub2d_tit_area  .txbox .tx1  .current-menu:after{content: ""; width: clamp(100px, calc(19.737vw + 21.053px), 300px); float: left; height: 1px; background-color: #ccc; position: absolute; left: 100%; top: 50%;}

.sub2d_tit_area  .txbox .tx1  .current-menu::before{ content: ""; width: 8px; height: 8px; border-radius: 100%; position: absolute; left: calc(100% + clamp(100px, calc(19.737vw + 21.053px), 305px));  

top:50%;transform: translateY(-50%);background-color: #ccc}



.sub2d_tit_area  .txbox .tx2 { width: 100%; float: left; color: #333; font-size:calc(var(--tx-sm-size) * 1); line-height: 120%; position: relative; letter-spacing: -1px; }
.sub2d_tit_area  .txbox .tx2  span{ width: 100%; float: left; color: #333; font-size:calc(var(--tx-sm-size) * 1); line-height: 120%; position: relative; letter-spacing: -1px;}
.sub2d_tit_area  .txbox .tx2  span em{ width: 100%; float: left; color:#000; font-size:calc(var(--tit-mds-size) * 1);line-height: 120%; position: relative;  font-weight: 800; letter-spacing: -1px; margin-bottom: 10px}


 .subbgtopimg  .txbox .tx3 { width: 100%; float: left; color: var(--subtop-tx3-color); font-size: var(--subtop-tx3)!important;}
 .subbgtopimg   .txbox .tx3 em{  color: var(--subtop-tx3-color); font-size: var(--subtop-tx3)!important;}










/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.dep3_tab_box{ width:100%; float:left; margin-bottom: 20px;z-index: 99; position: relative; margin-top: -20px}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.dep3_tab_box{ width:100%; float:left; margin:  0px 0px 10px; margin-top: -20px}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.dep3_tab_box .contents-container { display: flex; justify-content: center; }

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.dep3_tab { width:auto; float: left; height:100%;  flex-direction: row; /* 흰색 선을 나타낼 공간 */; display: flex;grid-gap:clamp(10px, 3.906vw, 20px); justify-content: center;  border-radius: 50px; }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.dep3_tab { width: 100%; float: left; height:100%;  flex-direction: row; /* 흰색 선을 나타낼 공간 */; display: flex;grid-gap:10px; justify-content: center;   overflow-x: auto; padding-bottom: 10px}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.dep3_tab .dep3_btn { width: 100%; float: left; display: flex; align-items: center; justify-content: center; padding:clamp(10px, 1.172vw, 17px) clamp(20px, 3.125vw, 60px); color: #333; text-decoration: none; font-size:calc(var(--tit-mds-size) * 0.7); font-weight: 600; letter-spacing: -1px; box-sizing: border-box; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  border: none!important; grid-gap: 10; white-space:nowrap; border-radius: 50px; background-color: #f9f9f9;}


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.dep3_tab .dep3_btn { width: 100%; float: left; display: flex; align-items: center; justify-content: center; padding:clamp(10px, 1.172vw, 17px) clamp(20px, 3.125vw, 60px); color: #333; text-decoration: none; font-size:calc(var(--tit-mds-size) * 0.9); font-weight: 600; letter-spacing: -1px; box-sizing: border-box; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  border: none!important; grid-gap: 10; white-space:nowrap; border-radius: 50px; background-color: #f9f9f9;}}


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



.dep3_tab .dep3_btn.active { background-color:var(--dynamic-point-color, var(--primary));  color: white;  }




.dep3_btn.active { background-color:var(--dynamic-point-color, var(--primary)); color: #fff; border: none;  }
.dep3_btn.active:hover { color: #fff; border: none; }
.dep3_btn:hover { background-color:var(--dynamic-point-color, var(--primary));color: #fff; order: none;}
/* 흰색 라인을 위해 탭 버튼 사이의 간격을 흰색으로 채우기 */


.dep3_tab > * { box-sizing: border-box; }
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { .dep3_btn:nth-last-child(n+6) {
border-right: 1px solid #ccc; box-sizing: border-box; border-bottom:1px solid #ccc; }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {  }
/**** 모바일 ****/
@media only all and (max-width:767px) { .dep3_btn:nth-last-child(n) {
border-right: 1px solid #ccc; box-sizing: border-box; border-bottom:1px solid #ccc; }
}
/**** 모바일 ****/
@media only all and (max-width:649px) { .dep3_btn:nth-last-child(n+3) {
border-right: 1px solid #ccc; box-sizing: border-box; border-bottom:1px solid #ccc; }
}
	/**** 모바일 ****/
@media only all and (max-width:525px) { .dep3_btn:last-child() {
border-right: 1px solid #ccc; box-sizing: border-box; border-bottom:1px solid #ccc; }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {  }
/* 구분 //end -----------------------------------*/

ul.depth3{ min-width: 150px!important; float: left;  position: absolute;  background-color: #000 ; padding: 15px; border-radius: 10px;}
ul.depth3 li{ min-width: 150px!important; float: left;  position: absolute;  background-color: #fff ; padding: 15px; border-radius: 10px;}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { .dep3_title{ width:100%; float:left; font-weight: 700; color: #000; font-size: 30px; text-align: center; margin: 80px 0px; border-bottom: none; }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {  }
/**** 모바일 ****/
@media only all and (max-width:767px) { .dep3_title{ width:100%; float:left; font-weight: 700; color: #000; font-size:22px; text-align: center; margin:30px 0px; border-bottom: none; }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {  }




.com_page_menu{position: absolute; right: 0PX; top: 0PX; display: flex;flex-direction: row;  grid-gap: 30PX;}
.com_page_menu ul{display: flex;flex-direction: row;  grid-gap: 10PX;}

.com_page_menu ul  li a{ padding: 15px 30px; background-color: #fff; color: #333; border-radius: 50px}
.com_page_menu ul  li a.on{ padding: 15px 30px; background-color:var(--primary);; color: #fff}






/* ======================================= */
/* ========== Subnav 전체 컨테이너 ========== */
/* ======================================= */
.scf-subnav{
  --btn: 56px;          /* 버튼 지름 */
  --gap: 12px;          /* 버튼/라인/라벨 간격 */
  --line-w: 400px;      /* 기본 라인 길이 */
  --line-w-min: 80px;   /* 최소 라인 길이 */

  display:flex; align-items:center; justify-content:space-between;
  gap:24px; margin:20px 0 50px; width:100%; font-family:inherit; float: left;
}

/* 좌/우 사이드 */
.scf-subnav .subnav-side{
  flex:1 1 0; display:flex; align-items:center; min-width:0; position:relative;
}
.scf-subnav .subnav-left{ justify-content:flex-start; }
.scf-subnav .subnav-right{ justify-content:flex-end; }

/* 중앙(항상 자기 크기만) */
.scf-subnav .subnav-center{
  flex:0 0 auto; text-align:center;
}

/* ===== breadcrumb ===== */
.scf-subnav .dh-bc{ font-size:14px; color:#6b7280; margin-bottom:6px; }
.scf-subnav .dh-bc ol{ padding:0; margin:0; list-style:none; display:inline-flex; align-items:center; gap:4px; }
.scf-subnav .dh-bc .sep{ color:#9ca3af; }
.scf-subnav .dh-bc a{ color:#6b7280; text-decoration:none; }
.scf-subnav .dh-bc a:hover{ text-decoration:underline; }

/* 중앙 타이틀 */

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.subpage-title{
  font-size:calc(var(--tit-lg-size) * 1);
  font-weight:700; color:#111827; margin:0;
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.subpage-title{
  font-size:calc(var(--tit-lg-size) * 1)!important;
  font-weight:700; color:#111827; margin:0; margin-top: -100px
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/






/* ===== 버튼 ===== */
.scf-subnav .nav-btn{
  width:var(--btn); height:var(--btn);  aspect-ratio: 1 / 1;  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f3f4f6; color:#111;
  box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
  transition:background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.scf-subnav .nav-btn svg{ width:24px; height:24px; }
.scf-subnav .nav-btn.disabled{ opacity:.35; pointer-events:none; }

/* ===== 라인: 길이 고정/제한 + 애니메이션 ===== */
.scf-subnav .subnav-line{
  position:relative; overflow:hidden;
  height:1px; background:#e5e7eb;
  flex:0 0 var(--line-w);   /* 이 값이 라인 길이 */
  max-width:100%;           /* 부모를 넘지 않게 */
  min-width:var(--line-w-min);
  margin:0 var(--gap);
}

/* 초록선: 채워지는 애니메이션 */
.scf-subnav .subnav-line::after{
  content:""; position:absolute; inset:0; background: var(--dynamic-bg-color, #2ea44f);
  transform:scaleX(0); transform-origin:left center; transition:transform .45s ease;
}
/* 왼쪽: 왼→오 */
.scf-subnav .subnav-left:hover .subnav-line::after{
  transform:scaleX(1); transform-origin:left center;
}
/* 오른쪽: 오→왼 */
.scf-subnav .subnav-right:hover .subnav-line::after{
  transform:scaleX(1); transform-origin:right center;
}

/* ===== 제목 라벨(기본 숨김, hover 시 표시) ===== */
.scf-subnav .edge-label{
  position:absolute; top:0;
  font-size:14px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:28vw; opacity:0; transform:translateY(2px);
  transition:opacity .18s ease, transform .18s ease;
}
/* 버튼에서 적당히 떨어진 위치(버튼 + 간격) */
.subnav-left  .edge-label{ left: calc(var(--btn) + var(--gap) * 2); }
.subnav-right .edge-label{ right: calc(var(--btn) + var(--gap) * 2); }

/* hover 시 라벨/버튼 강조 */
.scf-subnav .subnav-side:hover .edge-label{ opacity:1; transform:translateY(0); }
.scf-subnav .subnav-side:hover .nav-btn{ background: var(--dynamic-bg-color, #2ea44f); color:#fff; }
.scf-subnav .subnav-side:hover .nav-btn:not(.disabled){ transform:translateY(-1px); }

/* ===== 반응형 ===== */
@media (max-width: 768px){
  .subpage-title{ font-size:18px; }
}
@media (max-width: 576px){
  .scf-subnav{ gap:12px; }
  .scf-subnav .nav-btn{ --btn:48px; }
  .scf-subnav .edge-label{ display:none; } /* 모바일은 라벨 숨김 */
  .scf-subnav .subnav-line{
    --line-w: 120px; --line-w-min: 80px;
  }
}
/* ========== //Subnav 전체 컨테이너 ========== */



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.subbgtopimg { width: 100%; float: left; height:var(--subtop-h);  overflow: hidden; position: relative!important; background-color: rgba(0,0,0,0.13);  display: flex;  justify-content: center;  align-items: center;  flex-direction: column; position: absolute; top: 0px; left: 0px; }
.subbgtopimg .img_box { width: 100%; height:100%; position: absolute; top: 0px; left: 0px; z-index: 0}
.subbgtopimg .img_box img { object-fit: cover; width: 100%; height: 100%; }
	



}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.subbgtopimg { width: 100%; float: left; height:calc(var(--subtop-h) * 0.8);  overflow: hidden; position: relative!important; background-color: rgba(0,0,0,0.13);  margin-top:var(--header-h); display: flex;  justify-content: center;  align-items: center;  flex-direction: column; }
.subbgtopimg .img_box { width: 100%; height:100%; position: absolute; top: 0px; left: 0px; z-index: 0}
.subbgtopimg .img_box img { object-fit: cover; width: 100%; height: 100%; }


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