﻿@charset "utf-8"; 

/**************************************************************************************************************************/
/***** 서브 공통 ****/
.sub_con {position:relative;  width:100%; }



/***** 서브 상단메뉴 
.sub  #header {background-color: transparent; border-bottom:0px solid rgba(0,0,0,0.1); box-shadow:0 0 0 rgba(0,0,0,0.2); z-index:1000}

.sub #header #gnb .gnb_menu .top1menu .depth1 > a{color:#fff}
.sub #header #gnb .gnb_menu .top1menu .depth1 > a:hover {color:#ddfffd}
.sub  #header .logo a {background:url("../images/common/logo_white.png") no-repeat left center;  background-size:contain}
.sub  #header .info-ul li a {color:#fff; }
.sub  #header .info-ul li+li:before {background-color:#fff}
.sub .tm_open .tm_menu {background:url("../images/common/btn_nav_open.png") no-repeat}****/

/* 스크롤시 
.sub  #header.fixed {background-color:#fff; border-bottom:0px solid rgba(0,0,0,0.1); box-shadow:1px 1px 10px rgba(0,0,0,0.2); z-index:1000}
.sub  #header.fixed .logo a {background:url("../images/common/logo.png") no-repeat left center;  background-size:contain}
.sub  #header.fixed #gnb .gnb_menu .top1menu .depth1 > a{color:#222}
.sub  #header.fixed #gnb .gnb_menu .top1menu .depth1 > a:hover {color:#51adf5; }

.sub  #header.fixed #gnb .gnb_menu .top1menu .depth1.menu_active > a{color:#fff}

.sub  #header.fixed .info-ul li a {color:#222; }
.sub  #header.fixed .info-ul li+li:before {background-color:#222}
.sub .fixed .tm_open .tm_menu {background:url("../images/common/btn_nav_open2.png") no-repeat}*/ 

.path {display:none}



/**************************************************************************************************************************/
/***** 서브 비쥬얼 ****/

#sub_visual.sub_img01 {background: #fff url('../images/subimg/sub_img01.jpg') no-repeat center; background-size:cover}
#sub_visual.sub_img02 {background: #fff url('../images/subimg/sub_img02.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img03 {background: #fff url('../images/subimg/sub_img03.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img04 {background: #fff url('../images/subimg/sub_img04.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img05 {background: #fff url('../images/subimg/sub_img05.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img06 {background: #fff url('../images/subimg/sub_img06.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img07 {background: #fff url('../images/subimg/sub_img07.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img08 {background: #fff url('../images/sub/svisual_04.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img09 {background: #fff url('../images/sub/svisual_01.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img10 {background: #fff url('../images/subimg/sub_img10.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img11 {background: #fff url('../images/subimg/sub_img03.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img13 {background: #fff url('../images/subimg/sub_img05.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img14 {background: #fff url('../images/subimg/sub_img07.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img15 {background: #fff url('../images/subimg/sub10_visual.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img16 {background: #fff url('../images/subimg/sub10_visual.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img17 {background: #fff url('../images/subimg/sub10_visual.jpg') no-repeat 75% center; background-size:cover}
#sub_visual.sub_img18 {background: #fff url('../images/subimg/sub10_visual.jpg') no-repeat 75% center; background-size:cover}
/* bgStar 파티클 애니메이션 */
#sub_visual .bgStar{position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:hidden}
#sub_visual .bgStar span{position:absolute; display:block; border-radius:50%; background:rgba(255,255,255,0.6); animation:starBlink 3s infinite ease-in-out}
#sub_visual .bgStar span:nth-child(1){width:6px; height:6px; left:15%; top:30%; animation-delay:0s; animation-duration:3.5s}
#sub_visual .bgStar span:nth-child(2){width:4px; height:4px; left:55%; top:55%; animation-delay:1.2s; animation-duration:2.8s}
#sub_visual .bgStar span:nth-child(3){width:5px; height:5px; left:80%; top:25%; animation-delay:2s; animation-duration:4s}
@keyframes starBlink {
    0%, 100%{opacity:0; transform:scale(0.5)}
    50%{opacity:1; transform:scale(1.2)}
}


/**************************************************************************************************************************/
/***** 컨텐츠 영역 ****/
#content{position:relative; width:100%; min-height:500px}
.sub_head{position:relative; width:100%; margin-bottom:150px; text-align:center} 
.sub_head .tit{padding:2.5em 0 0.5em 0; font-size:3.2em; line-height:1.2em;  color:#202020; font-weight: 600; letter-spacing:-0.01em; display:none}
.sub_head .tit_txt {font-size:1.2em; font-weight:300; display:none}

.info {position:relative; font-size:1.8em; font-weight:300;  padding:0 2%; line-height:1.4em}
.info .txt01 {font-weight:600; padding-bottom:10px; font-size:1.2em}

.sub_head .sub_path{ display:none}


/* ===== PathIndicator ===== */
.PathIndicator > ul{position: relative;}
.PathIndicator > ul > li{align-items:center; position:relative; text-align:left; height:80px}
.PathIndicator > ul > li.Home{align-items:center; padding-left:0}
.PathIndicator > ul > li.Home > a{display:flex; align-items:center; padding:0 30px}
.PathIndicator > ul > li.Home > a .material-symbols-rounded{color:#fff; font-size:22px}
.PathIndicator > ul > li.Depth1 > a,
.PathIndicator > ul > li.Depth2 > a{display:flex; align-items:center; height:100%; padding:0 20px; font-weight:500; color:#fff; white-space:nowrap}
.PathIndicator > ul > li.Depth1 > a .material-symbols-rounded,
.PathIndicator > ul > li.Depth2 > a .material-symbols-rounded{color:#fff; font-weight:300; transition:transform 0.2s}
.PathIndicator > ul > li > ul{display:none; position:absolute; left:0; top:80px; z-index:200; min-width:160px; border-radius:0 0 12px 12px; overflow:hidden; border-top:1px solid #fff}
.PathIndicator > ul > li > ul > li > a{display:block; padding:13px 20px; color:#fff; background:#005098; font-size:15px; white-space:nowrap}
.PathIndicator > ul > li > ul > li > a.Current,
.PathIndicator > ul > li > ul > li > a:hover{background-color:#147bc8}
/* Depth1/Depth2 아이콘 회전: on 클래스는 li에 적용 */
.PathIndicator > ul > li.on > a .material-symbols-rounded{transform:rotate(180deg)}

/* scroll-top 버튼 */
.scroll-top{display:flex; justify-content:center; align-items:center; flex-direction:column; width:70px; height:70px; border:1px solid #ddd; border-radius:50%; color:#005AAA; text-align:center; font-weight:600; background-color:#fff; position:fixed; right:20px; bottom:50px; z-index:999; box-shadow:0 0 15px rgba(0,0,0,.2); cursor:pointer; transition:all .5s}
.scroll-top .material-symbols-rounded{margin:-7px 0 -7px; font-size:35px}
.scroll-top:hover{border:0; color:#fff; background-color:#2651C0}
.scroll-top:hover .material-symbols-rounded{color:#fff}

/* snb_menu */
#sub_lnb {position:relative ; width:100%; height:70px;  z-index:100; border-bottom:0px solid #ededed; }
#sub_lnb .snb_menu {position:relative ;  background-color:#fff; height:70px; border-bottom:1px solid #ededed}
#sub_lnb .snb_depth1 {position:relative;padding-left:70px;text-align:left}
#sub_lnb .snb_depth1 > li {display:block;position:relative;float:left;width:auto;vertical-align:top}
#sub_lnb .snb_depth1 > li:before {position:absolute; right:0; top:0; width:1px; height:100%; background-color:rgba(255,255,255,0.1); display:block; content:""}
#sub_lnb .snb_depth1 > li:last-child {display:block}
#sub_lnb .snb_depth1  .snb_depth1_list {height:70px;font-size:16px; width:25%}
#sub_lnb .snb_depth1  .home {position:absolute !important;top:0;left:0;width:70px !important;height:70px}
#sub_lnb .snb_depth1  .home a {display:block;font-size:0;line-height:0;width:100%;height:100%;background:#001c54 url("../images/common/lnb_home_ico.png") no-repeat center center}

#sub_lnb .snb_menu-link {position:relative;display:block;width:auto; border-right:0px solid rgba(0,0,0,0.1); box-sizing:border-box; color:#999}
#sub_lnb .snb_menu-link > span {display:table; width:100%; height:70px;  vertical-align:Middle;  padding:0 45px 0 15px;  box-sizing:border-box; line-height:1.2em}
#sub_lnb .snb_menu-link > span > span {display:table-cell; vertical-align:Middle;  font-weight:600; font-size:1.1em}
#sub_lnb .snb_menu-link:after {content:'';display:block;position:absolute;right:0;top:0;height:100%;width:50px; background:url("../images/common/lnb_off.png") no-repeat center center;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out}
#sub_lnb .snb_menu-link:hover,
#sub_lnb .snb_menu-link.js-active {background:#1165cc !important; color:#fff;  opacity:1}
#sub_lnb .snb_menu-link.js-active:after {background: url("../images/common/lnb_open.png") no-repeat center center}

#sub_lnb .snb_depth2{overflow:hidden;display:none;position:absolute;left:0;top:70px;padding:18px 0 22px 0;width:calc(100% - 2px); background-color:#fff; border:1px solid #1165cc;border-top:0;box-sizing:content-box;z-index:99}
#sub_lnb .snb_depth2 a {display:block;padding:10px 20px;color:#666;font-size:16px;line-height:20px}
#sub_lnb .snb_depth2 a:hover {background:#1165cc;color:#fff}
#sub_lnb .snb_depth2 a > span {display:inline-block;word-break:break-all}



@media screen and (max-width:1599px) {
	/***** 서브 비쥬얼 ****/

	#sub_lnb .snb_menu-wrap {position:relative;max-width:100%;margin:0}
	#sub_lnb .snb_depth1_list {height:60px;font-size:16px}
}


@media screen and (max-width:1400px){
	#sub_lnb .wrap {position:relative;width:100%;margin:0}
}

@media screen and (max-width:1024px){
	#sub_lnb .snb_depth1 {position:relative;padding-left:0px;text-align:left}
	#sub_lnb .snb_depth1  .home {display:none}
	#sub_lnb .snb_depth1  .snb_depth1_list {height:60px;font-size:14px}
}




@media screen and (max-width:768px) {

	/**************************************************************************************************************************/
	/***** 서브 비쥬얼 ****/

	/* PathIndicator 모바일 */
	.PathIndicator > ul > li.Depth1 > a span,
	.PathIndicator > ul > li.Depth2 > a span{margin-left:5px}


	/***** 컨텐츠 영역 > 타이틀 / 네비게이션 ****/
	#content{position:relative; width:100%}
	.sub_head{position:relative; width:100%; margin-bottom:2em; text-align:center} 
	.sub_head .tit{padding:1.5em 0 0.1em 0; font-size:2.2em; line-height:1.2em;  color:#202020; font-weight: 600}
	.sub_head .tit_txt {font-size:1.2em; font-weight:300}

	.info {position:relative; font-size:1.3em; font-weight:300;  padding:0 2%; line-height:1.4em}
	.info .txt01 {font-weight:600; padding-bottom:10px; font-size:1.3em}

	/* snb_menu */
	#sub_lnb {position:relative ; width:100%; height:auto;  z-index:100; border-bottom:0px solid #ededed;  margin-top:0px; background-color:#083797}
	#sub_lnb:before {display:none}
	#sub_lnb .snb_depth1:before {display:none}
	#sub_lnb .snb_depth1 > li:before {display:none}
	#sub_lnb .wrap {width:100%}

	#sub_lnb .snb_menu {position:relative ;  background-color:#083797; height:auto}
	#sub_lnb .snb_depth1 {position:relative;padding-left:0px;text-align:left}
	#sub_lnb .snb_depth1  .home a {display:none}
	#sub_lnb .snb_depth1  .snb_depth1_list {position:relative; width:100%; min-width:100px;height:50px;font-size:14px; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing:border-box}
	#sub_lnb .snb_depth1  .snb_depth1_list > a {position:relative; color:#fff; height:50px; font-weight:500;  z-index:0 !important}
	#sub_lnb .snb_menu-link > span {height:50px; padding: 0 45px 0  20px}

	#sub_lnb .snb_menu-link:after {background:url("../images/common/lnb_open.png") no-repeat center center}

	#sub_lnb .snb_depth2 {overflow:hidden;display:none;position:absolute;left:0;top:50px; z-index:100}
	#sub_lnb .snb_depth2 li {position:relative; z-index:1000}
	#sub_lnb .snb_depth2 a {font-size:14px; padding:5px 20px}
}

