.sub1d_tit_area{width: 100%; float: left;  position: relative;float: left; margin-top: var(--header-h);; width: 100%;  height:clamp(100px, 11.719vw, 150px); display: flex;  justify-content: center;  align-items: center; overflow: hidden}


.sub1d_tit_area .contents-container { width: 100%; float: left; padding-top: 30px; padding-bottom: clamp(10px, 2.344vw, 30px); position: relative}


.sub1d_tit_area .title-area { width: 100%; float: left;z-index: 99999; }
	

	
.sub1d_tit_area .title-area { width: 100%; float: left; position: relative; z-index: 99999; padding: 0px 0px; }
.sub1d_tit_area .title-area h2 { color: #000; }
.sub1d_tit_area .title-area h2 em { position: relative;  }



/* 구분 -----------------------------------*/
/**** 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_area{width: 100%; float: left;position: relative ; margin-bottom: 30px}
.sub2d_menu_area:before{content: "";    width: 50%;  height: 100%; position: absolute; right: 0px; top: 0px; float: left; background-color: var(--primary);}
.sub2d_menu_area .titgrid{width: 100%;  height: 100%;  float: left;grid-template-columns:250px 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; 
}

}
/**** 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(--primary);; overflow: hidden }

.sub2d_menu_area .titgrid{width: 100%;  height: 100%;  float: left;}
.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; 
}

}
/**** 모바일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: "\ec49";   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: 100%; float: left; z-index: 1}
.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;align-items:center;justify-content:center; flex-direction: row;gap:5px; min-height:36px; width: 100%; float: left; z-index: 1}
.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: 5px; padding: 0px 0px 0px 40px; background-color: var(--primary);  }
ul.Sub2d_gnb {height:clamp(40px, 6.250vw, 80px);display: flex;   grid-gap:clamp(10px, 5.469vw, 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: var(--top1d-font-size); 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: #fff; border-radius: 50px; z-index: 99; position: relative; }
/* 현재 선택된 메뉴 스타일 */

ul.Sub2d_gnb li.active a:after {  width: 100%; float: left; height: 5px; background-color:#cd5348;  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 20px; position: relative
  }
  .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 대신 기존 규칙들을 존중 */
  }
  /* li는 가로 방향으로만 흐르게 고정 */
  .Sub2d_viewport > ul.Sub2d_gnb > li {
    flex: 0 0 auto;
    position: relative;
  }

  /* 좌/우 네비 버튼 (배경과 어울리게 반투명) */
  .Sub2d_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 100%;
    border: 0; border-radius: 6px;
    background:var(--primary-900);;
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer; z-index: 3;
    -webkit-tap-highlight-color: transparent;z-index: 999
  }
  .Sub2d_nav.prev { left:-20px; }
  .Sub2d_nav.next { right:-20px; }

  /* 가장자리 힌트(컨텐츠 넘침 표시). 배경색과 어울리게 투명 그라데이션 */
  .Sub2d_scroller::before,
  .Sub2d_scroller::after {
    content:"";
    position:absolute; top:0; bottom:0; width:28px;
    pointer-events:none; z-index:2;
  }
  .Sub2d_scroller::before {
    left:0;

  }
  .Sub2d_scroller::after {
    right:0;
 
  }
}






.subbgtopimg { width: 100%; float: left; height:var(--subtop-h);  overflow: hidden; position: relative!important;  margin-bottom: clamp(30px, 6.250vw, 80px);}
.subbgtopimg .img_box { width: 100%; height:100%; position: absolute; top: 0px;left: 0px; z-index: 0!important; overflow: hidden}
	
.subbgtopimg .img_box:before{ width: 100%; height:80px; position: absolute; top: -80px; left: 0px; z-index: 0; content: "";   background-color: var(--primary-opacity80);z-index: 99999999;}
	


.subbgtopimg .img_box img {height:auto; width: 2560PX; -webkit-animation: sub_top_ani  2s forwards; /* Safari 4.0 - 8.0 */
  animation: sub_top_ani 2s forwards; position: absolute; top: 0PX; left:50%; margin-left: -1280PX}

@keyframes sub_top_ani {
  from { opacity:0; transform: translateY(-60px); }
  to   { opacity:1; transform:  translateY(0px);  }
}

.subbgtopimg  .contents-container{  padding: 80PX 0PX; height: 100%!important; text-align: left!important;  }
	
 .tit_img_tx{ width: 100%!important; float: left; color: #fff}
.tit_img_tx span{ width: 100%; float: left; color: #fff}
	








/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.sub2d_tit_area{width: 100%; float: left; padding: clamp(20px, 3.125vw, 40px) 0px clamp(30px, 4.688vw, 60px); position: relative}

.sub2d_tit_area .top_icon{width:clamp(150px, 23.438vw, 300px);aspect-ratio:30 / 28; float: left;  position: relative; position: absolute; right: 0px; top: clamp(-80px, -6.250vw, -40px); display: flex;  justify-content: center;  align-items: center;}

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



}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.sub2d_tit_area{width: 100%; float: left; padding: clamp(20px, 3.125vw, 40px)  0px clamp(30px, 4.688vw, 60px) 0px; position: relative ; overflow: hidden}
	
.sub2d_tit_area .top_icon{width: clamp(150px, 23.438vw, 300px);aspect-ratio:30 / 28; float: left;  position: relative; position: absolute; right: 0px; top: 0px; display: flex;  justify-content: center;  align-items: center;}

.sub2d_tit_area .top_icon lottie-player{width: 290px;  aspect-ratio:290 / 250; float: left; }


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


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.sub2d_tit_area  .txbox{ width: 100%!important; float: left;     margin-top: 0px ; grid-gap: clamp(5px, 0.781vw, 10px)}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.sub2d_tit_area  .txbox{ width: 100%!important; float: left;   margin-top: 0px ; grid-gap: clamp(5px, 0.781vw, 10px); padding-right:  clamp(100px, 23.438vw, 300px)}

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



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

 .sub2d_tit_area  .txbox .tx1:before{ width: calc(100% + 13px); float: left; content: "";    font-family: unicons-line; background-color: #eaeaea; height: 50%; border-radius: 30px;position: absolute; bottom: 0px; left: -5px;}



.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;}