/* 서브 상단  */

/* 이미지 줌아웃 애니메이션 (1.1 -> 1.0) */
@keyframes subtop_img_zoomout {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}

.sub_topbg_round {
  overflow: hidden;
}



.sub_topbg_round img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: subtop_img_zoomout 2.5s ease-out forwards !important;
  will-change: transform;
  transform: scale(1.1);
}






.Sub_Path{	width:100%;	   height:var(--Path-h);  float: left; position: relative;  background:var(--Path-bg); z-index: 1}	

.Sub_Path.none{	display: none!important}	



.PageGo{width:100%;   float: left;  display: flex;flex-direction: row; background-color: transparent!important}
.PageGo .gohome{width:var(--Path-h); height:var(--Path-h); display: flex;  justify-content: center;  align-items: center;  float: left;  display: flex;  }
.PageGo .gohome:before{content: "\eca5";    font-family: unicons-line; width:var(--Path-h); height:var(--Path-h); display: flex;  justify-content: center;  align-items: center;  float: left;  display: flex; color: #fff; font-size: 25px}
	




/**** 모바일 ****/
@media only all and (max-width:768px) {
	


.PageGo{ display: grid; grid-template-columns:40px auto auto ; grid-gap: 0px}
}






.PageGo_dep1 {min-width:var(--Path-w);    float:left; position: relative; display: block;  border-left: 1px solid  rgba(255,255,255,0.08); }


.PageGo_dep1 .Dep1_tit{ width:100%;   float: left;  color: #fff;  /* Old browsers */
line-height:var(--Path-h); text-align: left; box-sizing: border-box ; background-color:var(--Path-bg-in)!important;  padding-left: 15px; box-sizing: border-box; position: relative; font-size: var(--Path-font-size); height:var(--Path-h)!important}

.PageGo_dep1 .Dep1_tit:before{ content: "\eb3a";    font-family: unicons-line; position: absolute; right: 10px; top: -3px; color: #fff;font-size: 20px;}

.PageGo_dep1 ul {  width:100%; float: left }



.PageGo_dep1 ul>li{  width:100%; float: left;color: #fff;  background-color:var(--Path-bg-in)!important;  line-height: 40px; text-align:left;font-size: var(--Path-font-size); cursor: pointer; padding: 0px 0px; border: 1px solid rgba(255,255,255,0.08); margin-right: -1px; margin-bottom: -1px; box-sizing: border-box; padding-left: 15px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
 }

.PageGo_dep1 ul>li:hover{ background-color:var(--Path-bg-in)!important;   filter: brightness(125%);}

.PageGo_dep1 ul.mysub_b{width:100%; float: left; display: none;position: absolute; top: var(--Path-h); left: 0px;z-index: 99999999 }
.PageGo_dep1 ul.mysub_b_on{width:100%;float: left;  display: block;position: absolute; top:var(--Path-h); left: 0px }



.PageGo_dep1 ul li a{ color: #fff; font-size: var(--Path-font-size); text-align: left }	
.PageGo_dep1 ul li.smenu{ width:100%; float:left; padding-top: 10px ; padding-bottom: 10px}
.PageGo_dep1 ul li.smenu a{ width:100%; float:left;height: 25px; line-height: 25px; color: rgba(255,255,255,0.5); padding-left: 10px; position: relative; box-sizing: border-box; }
.PageGo_dep1 ul li.smenu a.on{ color:    var(--div-color1)!important; }
.PageGo_dep1 ul li.smenu a:hover{color: rgba(255,255,255,1); }
.PageGo_dep1 ul li.smenu a:before{ content: "-";  position: absolute; left: 0px; top: 0px}	




/* 2뎁스 */

.PageGo_dep2 {min-width:var(--Path-w);   float:left; position: relative;  padding-right: 0px; border-left: 1px solid  rgba(255,255,255,0.08);  margin-left: -1px}


.PageGo_dep2 .Dep2_tit{ width:100%;   float: left;  color: #fff;  /* Old browsers */
line-height: var(--Path-h); text-align: left; box-sizing: border-box ; background-color:var(--Path-bg-in)!important;  padding-left: 15px; box-sizing: border-box; position: relative; font-size: var(--Path-font-size);  height:var(--Path-h)!important}

.PageGo_dep2 .Dep2_tit:before{ content: "\eb3a";    font-family: unicons-line; position: absolute; right: 10px; top: -3px; color: #fff;font-size: 20px;}

.PageGo_dep2 ul {  width:100%; float: left }



.PageGo_dep2 ul>li{  width:100%; float: left;color: #fff;  background-color:var(--Path-bg-in)!important; line-height:40px; text-align:left; font-size: var(--Path-font-size); cursor: pointer; padding: 0px 0px; border: 1px solid rgba(255,255,255,0.08);  margin-right: -1px; margin-bottom: -1px; box-sizing: border-box; padding-left: 15px; }
.PageGo_dep2 ul>li:hover{ background-color:var(--Path-bg-in)!important;   filter: brightness(125%);}

.PageGo_dep2 ul.mysub{width:100%; float: left; display: none;position: absolute; top:var(--Path-h); left: 0px;z-index: 99999999 }
.PageGo_dep2 ul.mysub_on{width:100%;float: left;  display: block;position: absolute; top:var(--Path-h); left: 0px }



.PageGo_dep2 ul li a{ color: #fff; font-size:var(--Path-font-size); text-align: left }	
.PageGo_dep2 ul li.smenu{ width:100%; float:left; padding-top: 10px ; padding-bottom: 10px}
.PageGo_dep2 ul li.smenu a{ width:100%; float:left;height: 25px; line-height: 25px; color: rgba(255,255,255,0.5); padding-left: 10px; position: relative; box-sizing: border-box; }
.PageGo_dep2 ul li.smenu a.on{ color:    var(--div-color1)!important; }
.PageGo_dep2 ul li.smenu a:hover{color: rgba(255,255,255,1); }
.PageGo_dep2 ul li.smenu a:before{ content: "-";  position: absolute; left: 0px; top: 0px}	


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.heading-title{font-size:30px!important; text-align: left; margin-bottom: 5px!important}

.menu-item-has-children a{font-size:26px!important;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


.Dep3_tit {
  cursor: pointer;
  padding: 10px 0;
}

/* 구분 -----------------------------------*/
/**** 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;}
.subtop_tit_size em{font-size: var(--subtop-tit-size)!important;  line-height: 110%!important; color: var(--primary);letter-spacing: -1px;   background: linear-gradient(110deg, #08842d 0%, #23966d 20%, #30a08e 40%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  background-repeat: no-repeat;font-weight: 800;font-family:var(--ff-ko2)!important; }
.subtop_tit_size span{font-size:calc(var(--tx-sm-size) * 1); line-height: 110%!important; letter-spacing: -1px; font-weight: 500; color: #666}

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

}
/**** 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; text-align: left!important}
.subtop_tit_size em{font-size:calc(var(--tit-md-size) * 1.2)!important; line-height: 110%!important; color: var(--primary);letter-spacing: -1px; ; width: 100%; float: left;text-align: left!important }
.subtop_tit_size span{font-size:calc(var(--tx-sm-size) * 1); line-height: 110%!important; letter-spacing: -1px; font-weight: 500; color: #666;text-align: left!important}

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

/* 모바일에서 contents-container의 max-width 무효화 */
.contents-container.container-lg,
.contents-container.container-md,
.contents-container.container-sm,
.contents-container.container-xl,
.contents-container.container-xxl {
    max-width: 100% !important;
    width: 100% !important;
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* ★ 기타 페이지 상단 (쇼핑몰, 회원, All_USE_ 등) */
.subbgtopimg_etc_wrap {
  position: relative;
  width: 100%;
  float: left;
  min-height: clamp(200px, 25vw, 350px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #2c3e50;
}
.subbgtopimg_etc_bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: subtop_img_zoomout 2.5s ease-out forwards;
  transform: scale(1.1);
}
.subbgtopimg_etc_bg_alt {
  animation: none;
  transform: none;
  overflow: hidden;
}
.subbgtopimg_etc_bg_alt img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.subbgtopimg_etc_overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.subbgtopimg_etc_wrap > .contents-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h, 80px) + clamp(30px, 4vw, 60px));
  padding-bottom: clamp(30px, 4vw, 60px);
}
.subbgtopimg_etc_txbox {
  text-align: left;
}
.subbgtopimg_etc_tit {
  color: #fff;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.subbgtopimg_etc_tit em {
  display: block;
  font-style: normal;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.subbgtopimg_etc_tit .current-menu {
  color: #fff;
}
.subbgtopimg_etc_desc {
  color: rgba(255,255,255,0.8);
  font-size: clamp(13px, 1.1vw, 16px);
  margin-top: 12px;
  font-weight: 300;
}

/* 이미지 영역 내 관리자 뱃지 */
.subbgtopimg_etc_wrap .topimg_admin_badge_btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 99999;
    background: rgba(116, 36, 147, 0.9);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.subbgtopimg_etc_wrap .topimg_admin_badge_btn:hover {
    background: rgba(90, 28, 114, 1);
    transform: scale(1.05);
}
.subbgtopimg_etc_wrap .topimg_admin_badge_btn .badge_icon { font-size: 14px; }
.subbgtopimg_etc_wrap .topimg_admin_badge_btn .badge_text { font-weight: 500; }

@media only all and (max-width:767px) {
  .subbgtopimg_etc_wrap {
    min-height: 180px;
  }
  .subbgtopimg_etc_tit {
    font-size: 24px;
  }
}