@charset "UTF-8";

:root { }


/* ----- body 적용 ----- */
body { opacity: 1; transition: opacity 0.15s ease-in; } /* FOUC 방지: CSS 로드 시 fade-in */
body.fixed_body { overflow: hidden; }
/* body.fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } */


/* ----- inner_max 정의 ----- */
.inner_max { position: relative; max-width: 1352px; margin: 0 auto; /* border: 1px dashed #ddd; */ }
@media all and (max-width: 1352px) {
  .inner_max {
    max-width: 96%;
  }
}





/* ========================================== wrapper ========================================== */
/* ========================================== wrapper ========================================== */
/* ========================================== wrapper ========================================== */
.wrapper { position: relative; width: 100%;  overflow: hidden; padding-top: 80px; }




/* ----- site_popup ----- */
/* ----- site_popup ----- */

/*메인 레이어 팝업 기본-이미지인 경우*/
.popup_screen_mask{ display: block; position: absolute; z-index: 3000; top: 0; left: 0;  width: 100%; height: 100%; background:rgba(0,0,0,0.5);}

.layer_popup{  position: absolute; background: #fff; }
.layer_popup .layer_pop_area{  width: 100%; background: #fff; }
.layer_popup .layer_pop_area .pop_con img{ display: block; max-width: 100%;}

.layer_popup .pop_bottom{ display: flex; justify-content: space-between; align-items: center; padding: 10px 15px;  border-top: 1px solid #e4e4e4; }

@media screen and ( max-width:1070px){
    .layer_popup { left: 5% !important; height: auto !important; max-width: 90%;} 
}


/*메인 레이어 팝업-텍트트인 경우*/
.layer_popup.text_type{ border: 4px solid #0f4da3; background: #fff; }
.layer_popup.text_type .layer_pop_area .pop_ti{ padding: 15px 15px 10px; border-bottom: 1px solid #4083e0; font-size: 20px; font-weight: 600; letter-spacing: -0.05em; color: #0f4da3; }
.layer_popup.text_type .layer_pop_area .pop_ti .txt{ display: inline-block; width: 100%; line-height: 1.2em;}

/*텍스트*/
.layer_popup.text_type .layer_pop_area .pop_con .txt_wrap{ padding: 15px 15px;}
.layer_popup.text_type .layer_pop_area .pop_con .in_txt{ line-height: 1.5em;}

@media screen and ( max-width:1070px){
    .layer_popup.text_type .layer_pop_area .pop_ti{  }    
    .layer_popup.text_type .layer_pop_area .pop_con .txt_wrap{ }
    .layer_popup.text_type .layer_pop_area .pop_con .in_txt{ }
}






.header_container { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, top 0.3s ease;}
.header_container.hide-up { transform: translateY(-100%); }
/* 모바일 메뉴 열림 시 헤더를 최상위로 (body.fixed_body는 메뉴 open 시 추가됨) */
body.fixed_body .header_container { z-index: 12000; }
@media all and (max-width:1200px) {
  .wrapper { padding-top: 60px; }   
  .header_container.hide-up{ transform: none;}
}

/* ----- home_area ----- */
/* ----- home_area ----- */
.home_area_mask { display: none; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
.home_area_mask.on { display: block; }

.home_area { position: relative; z-index: 2000; width: 100%; height: 80px; background-color: #fff;}
.home_area .inner_max{ display: flex; justify-content: space-between; align-items: center; position: static !important; z-index: 10;  height: 100%; }

.home_area .top_logo { display: flex; align-items: center; flex: 0 0 auto; }
.home_area .top_logo img { width: 100%; }
@media all and (max-width:1200px) {
  .home_area { height: 60px; }
  .home_area .inner_max { justify-content: center; }
  .home_area .top_logo img { height: 40px; }
}



/* gnb */
.gnb{  }
.gnb .dep1_ul {  display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 1; }
.gnb .dep1_ul>li { flex: 1 1 auto; position: relative;  padding: 0 30px; }
.gnb .dep1_ul>li>a { display: flex; justify-content: flex-start; align-items: center; height: 80px; font-size: 19px; font-weight: 600; line-height: 1;  text-decoration: none; transition: color 0.3s; }
.gnb .dep1_ul>li>a span { position: relative;}
.gnb .dep1_ul>li>a span::before { content: ''; position: absolute; bottom: -8px; left: 50%; z-index: -1; width: 0; height: 16px; opacity: 0; background-color: #a8e5ff; transition: all 0.25s ease-in-out; transform: translateX(-50%);}
.gnb .dep1_ul>li.active>a span { font-weight: bold; color: #244CB1; }
.gnb .dep1_ul>li.active>a span::before { content: ''; position: absolute; bottom: -10px; left: 50%; z-index: -1; width: calc(100% + 10px); height: 3px; opacity: 1; background-color: #244CB1; }
.gnb .dep1_ul>li:hover>a span::before {  width: calc(100% + 10px); opacity: .7; }
@media all and (max-width:1800px) {
  .gnb .dep1_ul>li {  padding: 0 calc(2.15vw - 5px ); }
}
@media all and (max-width:1200px) {
  .gnb { display: none; }
}



/*모바일 메뉴 토글버튼*/
.mobile_util { display: none; position: absolute; top: 0px; right: 16px; z-index: 200; height: 60px;  }
.mobile_util .m_nav_toggle { position: relative; width: 18px; height: 18px; padding: 0 2px;}
.mobile_util .m_nav_toggle span { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; background: #1E2124; transition: all 0.2s ease-in-out;}
.mobile_util .m_nav_toggle .bar2 { top: 8px; width: 70%; }
.mobile_util .m_nav_toggle .bar3 { top: 16px; }

.m_nav_toggle.on .bar1 { transform: rotate(45deg) translate(7px, 6px); }
.m_nav_toggle.on .bar2 { opacity: 0; }
.m_nav_toggle.on .bar3 { transform: rotate(-45deg) translate(5px, -5px); }
@media all and (max-width:1200px) {
  .mobile_util { display: flex; display: flex; align-items: center;}

}



/* ----- 모바일 네비게이션 ----- */
/* ----- 모바일 네비게이션 ----- */
.m_nav_mask { display: none; position: fixed; top: 60px; left: 0; z-index: 11000; width: 100%; height: calc(100% - 60px); opacity: 0; background: rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease-in-out; }
.m_nav_mask.on { display: block; opacity: 1; }




.m_nav a{ transition: none;}
.m_nav { display: none; position: fixed; top: 60px; right: 0px; z-index: 11001; width: 400px; height: calc(100% - 60px); overflow-y: auto; border-top: 1px solid #CDD1D5;  transition: transform 0.3s ease-in-out; transform: translateX(100%);}
.m_nav.on { display: block; transform: translateX(0);  }

.m_nav_inner { position: relative; width: 100%; height: 100%; background-color: #383E48; }
.m_nav_inner::before { content: ''; position: absolute; top: 0; right: 0; width: 60%; height: 100%; background-color: #fff; }


.m_nav .dep1_ul { width: 40%; }
.m_nav .dep1_ul>li {  }
.m_nav .dep1_ul>li>a { display: flex; align-items: center; min-height: 50px;  padding: 0 15px; font-size: 15px; color: #fff; font-weight: 500; line-height: 1.2;  }

.m_nav .dep2_ul { display: none; position: absolute; top: 0; right: 0; width: 60%; height: 100%; overflow-y:auto; background-color: #fff; }
.m_nav .dep2_ul>li>a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 15px; font-size: 14px; font-weight: 500; line-height: 1.2;}
.m_nav .dep2_ul>li>a.arrow::after { content: ''; display: inline-flex; width: 14px; height: 14px; margin-left: 10px; background: url(/main/images/common/arrow_down.svg) no-repeat center center; transition: transform 0.3s ease-in-out; }

.m_nav .dep3_ul { max-height: 0; opacity: 0; visibility: hidden; padding: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }
.m_nav .dep3_ul>li>a { display: flex; align-items: flex-start; position: relative; padding: 10px 15px 10px 35px; font-size: 15px; }
.m_nav .dep3_ul>li>a:before { content: ''; position: absolute; top: 20px; left: 22px; width: 2px; height: 2px; background-color: #000; border-radius: 999px;  }


/* on */
.m_nav .dep1_ul>li.on>a { background-color: #fff; color: #383E48; font-weight: 700; }
.m_nav .dep1_ul>li.on>.dep2_ul { display: block; }

.m_nav .dep2_ul>li.on>a { color: #383E48; font-weight: 700; background-color: #F2F9FF; }
.m_nav .dep2_ul>li.on>a.arrow::after { transform: rotate(180deg); }
.m_nav .dep2_ul > li.on > .dep3_ul { opacity: 1; visibility: visible; transition: max-height 0.3s ease, opacity 0.3s ease; }

@media all and (max-width:1200px) {

}
@media all and (max-width:640px) {

}
@media all and (max-width:400px) {
  .m_nav { width: 320px;}
}

/* ----- footer ----- */
/* ----- footer ----- */
/* ========================================== footer ========================================== */
.footer_container { padding: 60px 0; background: #3b4148;  }
.footer_container .inner_max { position: relative; }

.footer_container .foot_area { color: #fff;}
.foot_area .foot_top {  }
.foot_area .foot_logo { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1; }
.foot_area .foot_logo img { display: block; width: auto; height: 28px; }
.foot_area .foot_logo .brand { font-size: 22px; font-weight: 800; }

.foot_area .foot_info { padding: 30px 0; }
.foot_area .foot_info .addr { margin-bottom: 5px; }
.foot_area .foot_info .cs {  }
.foot_area .foot_info .cs strong { margin-right: 8px; font-weight: 700; }
.foot_area .foot_info .cs .tel { letter-spacing: 0.02em; }


.foot_area .foot_bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 30px; border-top: 1px solid #565D68; }
.foot_area .foot_bottom .inq_link {
  display: inline-block; padding-bottom: 2px; color: #e9eef3; text-decoration: none;
}
.foot_area .foot_bottom .inq_link:hover { border-color: #fff; color: #fff; }
.foot_area .foot_bottom .copy { color: #CDD1D5;  }

/* fixed 캐릭터 */
.helper_char { display: inline-block;
  position: fixed; right: 24px; bottom: 60px; z-index: 9000;
  width: 120px; height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.3));
}
.helper_char img { display: block; width: 100%; height: auto; }

@media all and (max-width:640px) {
  .footer_container { padding: 40px 0; }
  .foot_area .foot_logo img { height: 24px; }
  .foot_area .foot_info { padding: 20px 0 20px; }
  .foot_area .foot_bottom { align-items: flex-start; flex-direction: column; gap: 10px; padding-top: 20px;}
  .foot_area .foot_bottom .copy i { display: inline-block; }

}






/* ========================================== 서브 레이아웃 공통 ========================================== */
/* ========================================== 서브 레이아웃 공통 ========================================== */
/* ========================================== 서브 레이아웃 공통 ========================================== */
.sub_container { /* border: 15px solid #7fb8f5; */ }


/* ----- sub_head ----- */
/* ----- sub_head ----- */
.sub_head { margin-bottom: 60px; }
.sub_head_visual {
  position: relative;
  width: 100%;
  height: 280px;
  background-image: url(/main/images/sub/sub_vi1.jpg);
  background-repeat: no-repeat;  
  background-position: 50% 50%;
  background-size: cover;
  text-align: center;
}
.sub_head_visual::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); }
.sub_head_visual.bg1 { background-image: url(/main/images/sub/sub_vi1.jpg); }


@keyframes animate_visual {
  0% { background-position: 50% 10%; }
  50% { background-position: 50% 80%; }
  100% { background-position: 50% 50%; }
}

.sub_head_visual .slogan_wrap { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; }
.sub_head_visual .slogan_wrap .slogan { position: relative; font-size: 42px; color: #fff; font-weight: bold; transition: all 0.3s;}
.sub_head_visual .slogan_wrap .slogan.t1 { font-size: 42px; }

@media screen and (min-width: 1200px) {
	.sub_head_visual {animation:animate_visual 20s linear;}
}

@media all and (max-width:1200px) {
  .sub_head { margin-bottom: 40px; }
  .sub_head_visual { height: 23vw; min-height: 160px; background-size: 180%; }
  .sub_head_visual .slogan_wrap .slogan.t1 { font-size: 34px; }
}
@media all and (max-width:640px) {
  .sub_head_visual {  background-size: 260%; }
  .sub_head_visual .slogan_wrap .slogan.t1 { font-size: 28px; }
}




/* lnb_zone */
.lnb_zone{ margin-bottom: 60px; }
@media all and (max-width:1200px) {
  .lnb_zone{ margin-bottom: 40px; }
}


/* lnb - 2차메뉴 */
/* lnb - 2차메뉴 */

/* lnb_2depth_scroll */
/* lnb_2depth_scroll */
.lnb_2depth_scroll { position: relative; display: flex; align-items: center; }
/* 좌우 버튼 */
.lnb_2depth_scroll .scroll_btn { width: 36px; height: 36px; font-size: 18px; font-weight: bold; border: 1px solid #ccc; background: #fff; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: all 0.2s; }
.lnb_2depth_scroll .scroll_btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lnb_2depth_scroll .scroll_btn.prev { margin-right: 8px; }
.lnb_2depth_scroll .scroll_btn.next { margin-left: 8px; }

/* lnb */
/* lnb */
.lnb_2depth_scroll .lnb { background: #fff; width: 100%; overflow-x: auto; position: relative; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; flex: 1; }
/* .lnb_2depth_scroll .lnb::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #B1B8BE; z-index: 1; } */
.lnb_2depth_scroll .lnb_list { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; margin: 0; list-style: none; min-width: max-content; }
.lnb_2depth_scroll .lnb_list li { flex: 1 0 auto; align-content: flex-start; }
/* .lnb_2depth_scroll .lnb_list li::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #B1B8BE; } */
.lnb_2depth_scroll .lnb_list li a { display: flex; justify-content: center; align-items: center; position: relative; height: 56px; padding: 0 10px; font-size: 19px; color: #464C53; font-weight: 700; text-decoration: none; transition: color 0.3s; }

.lnb_2depth_scroll .lnb_list li a::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; background-color: #b0c1d4; transition: height .2s ease-in-out; z-index: 2; }
.lnb_2depth_scroll .lnb_list li a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #B1B8BE; transition: height .2s ease-in-out; }
.lnb_2depth_scroll .lnb_list li.active a { color: #052B57; }
.lnb_2depth_scroll .lnb_list li.active a::after { height: 4px; background-color: #063A74;}
.lnb_2depth_scroll .lnb_list li:not(.active) a:hover::before { height: 4px; }
/* 좌우 버튼 */
.lnb_2depth_scroll .scroll_btn { display: none; width: 36px; height: 36px; font-size: 18px; font-weight: bold; border: 1px solid #ccc; background: #fff; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: all 0.2s; z-index: 10; }
.lnb_2depth_scroll .scroll_btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lnb_2depth_scroll .scroll_btn.prev { margin-right: 4px; }
.lnb_2depth_scroll .scroll_btn.next { margin-left: 4px; }

@media all and (max-width:1200px) {
  .lnb_2depth_scroll .lnb_zone { padding-top: 30px; }
  .lnb_2depth_scroll .lnb_zone .inner_max { max-width: 100%; }
  .lnb_2depth_scroll .lnb { width: 100%; overflow-x: auto; }
  .lnb_2depth_scroll .lnb_list li { flex: 1 0 auto;}
}

/* lnb_submenu - 3차메뉴 */
/* lnb_submenu - 3차메뉴 */

/* lnb_3depth_scroll */
/* lnb_3depth_scroll */
.lnb_3depth_scroll { position: relative; display: flex; align-items: center; margin-top: 40px; }
/* 좌우 버튼 */
.lnb_3depth_scroll .scroll_btn { width: 36px; height: 36px; font-size: 18px; font-weight: bold; border: 1px solid #ccc; background: #fff; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: all 0.2s; }
.lnb_3depth_scroll .scroll_btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lnb_3depth_scroll .scroll_btn.prev { margin-right: 8px; }
.lnb_3depth_scroll .scroll_btn.next { margin-left: 8px; }


/* lnb_submenu */
/* lnb_submenu */
.lnb_3depth_scroll .lnb_submenu { background: #fff; width: 100%; overflow-x: auto; position: relative; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; flex: 1; }
.lnb_3depth_scroll .lnb_submenu_list { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; margin: 0; list-style: none; min-width: max-content; }
.lnb_3depth_scroll .lnb_submenu_list li { flex: 1 0 0; align-content: flex-start; border: 1px solid #B1B8BE; border-right: none;}
.lnb_3depth_scroll .lnb_submenu_list li a { display: flex; justify-content: center; align-items: center; position: relative; height: 56px; padding: 0 10px; font-size: 19px; color: #464C53; font-weight: 700; text-decoration: none; transition: color 0.3s; }
.lnb_3depth_scroll .lnb_submenu_list li a:hover { background-color: #ebf0f4; }

.lnb_3depth_scroll .lnb_submenu_list li:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; }
.lnb_3depth_scroll .lnb_submenu_list li:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-right: 1px solid #B1B8BE; overflow: hidden; }
.lnb_3depth_scroll .lnb_submenu_list li.active { border-color: #063A74;; }
.lnb_3depth_scroll .lnb_submenu_list li.active a { color: #fff; background-color: #063A74; }

/* 좌우 버튼 */
.lnb_3depth_scroll .scroll_btn { display: none; width: 36px; height: 36px; font-size: 18px; font-weight: bold; border: 1px solid #ccc; background: #fff; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: all 0.2s; z-index: 10; }
.lnb_3depth_scroll .scroll_btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lnb_3depth_scroll .scroll_btn.prev { margin-right: 4px; }
.lnb_3depth_scroll .scroll_btn.next { margin-left: 4px; }
@media all and (max-width:1200px) {
  .lnb_3depth_scroll .lnb_zone { padding-top: 30px; }
  .lnb_3depth_scroll .lnb_zone .inner_max { max-width: 100%; }
  .lnb_3depth_scroll .lnb { width: 100%; overflow-x: auto; }
  .lnb_3depth_scroll .lnb_submenu_list li { flex: 1 0 auto; border: none; border-radius: 10px !important; overflow: hidden;}
  .lnb_3depth_scroll .lnb_submenu_list li:last-child { border-right: none; }
  .lnb_3depth_scroll .lnb_submenu_list li.active { border-color: #063A74;; }


}




/* ----- sub_body ----- */
/* ----- sub_body ----- */
.sub_container .sub_body { margin-bottom: 60px; }

@media all and (max-width:1200px) {
  .sub_container .sub_body {  }
}

/* sub_body_top */
.sub_body_top .sub_body_top_title { font-size: 24px; font-weight: bold; }

/* sub_body_cnt */
.sub_body_cnt { }