@charset "utf-8";

/***************************
  Contents
***************************/

/* Layout */
body { background-color:#fff; }
#wrapper { background:url('');}

/*
--------------------------------------------------------------------
*/


/*
	## 서브상단 이미지 타이틀, 애니메이션
*/
#wrap_subtop {
	position:relative; width:100%; height:350px; background-color:#007C8A;
	overflow: hidden;
	/*background-image: url(../img/subtop.jpg);*/
	background-size: cover;
	/*background-attachment: fixed;*/
	background-position:center center;
}

/* anim : circle */
#wrap_subtop .sub-img-circle {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; background-color: #fff;
  background: url(../img/subtop.jpg) center/cover;
  clip-path: circle(0% at 50% 50%);
  animation: subtop_reveal 1.5s ease-in-out both 0s;
  /*z-index: 2;*/
}


#wrap_subtop .sub-text { position:absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;  top:65%; left:50%; transform:translate(-50%, -50%); }
#wrap_subtop .sub-text div { position:relative; }
#wrap_subtop .sub-text .t1 {
	letter-spacing: -1px; font-size:2.3rem; font-weight:600; color: #000;
	animation: subtop_t1 1.5s 0.5s both; margin-bottom: 10px; 
	text-align: center;
}
#wrap_subtop .sub-text .t2 {
	position: relative; display: inline-block; width: auto; text-align:center; font-size:0.875rem; letter-spacing: 10px;
	background-color:rgba(255,255,255,0.3); color:#fff; padding: 0 20px 0 30px;
	animation: subtop_t2 1s 0.7s both; overflow: hidden; white-space: nowrap; 
}

@keyframes subtop_t1 { from { transform: translateY(-50%); opacity: 0; } to {  } }
@keyframes subtop_t2 { from { opacity: 0; transform: translateY(50%);  } to {  } }


@keyframes subtop_reveal { 
  to { clip-path: circle(150% at 50% 50%);  }
}



/*
	## 서브내용
*/
#wrap_content {	position:relative; width:1200px; padding:50px 0 100px; margin:0 auto !important; font-family:Noto Sans Korean; }
#wrap_content .content { }
#wrap_content .page-title {
	position:relative; color:#222; text-align:center;
	font-family:Nanum Gothic; letter-spacing: -1px; font-size:40px; font-weight:600; 
}


/*
	## 서브위치표시
*/
#page_path {
	position: absolute; top: 20px; right: 0px; padding: 0 !important;
	font-family:Noto Sans Korean; font-size: 0.875rem; font-weight: 400; letter-spacing: -0.5px; text-align:right;
}
#page_path span, #page_path i { display:inline-block; vertical-align: middle; color:#909090; }
#page_path .fa-chevron-right { color:#D1D1D1; }
#page_path span, #page_path .fa { display:inline-block; vertical-align: middle; }
#page_path .fa-chevron-right { display: inline-block; padding: 0 5px 0px  ; font-size:4px; }

#wrap_content .page-title-bar {
	position:relative; height:3px; margin: 20px 0 50px 0;
	background:linear-gradient(to left, transparent, red, skyblue, green, transparent);
}

#wrap_content .sub-content { position:relative; margin-top:30px }





/*
	## 서브 센터메뉴1
*/
#wrap_centermenu1 {
  --smenu_a_padding: 13px 30px 15px; /* 상단메뉴 높이 */
  --smenu_a_color_on_font: #FFF ; /* 선택된 메뉴 폰트 color */
  --smenu_a_color_on_bg: #3E2F22; /* 선택된 메뉴 BG color */
  --smenu_a_color_on_over: #3E2F22 ;
  --smenu_a_color_over: #F1ECE7 ;


  --topmenu_pos_color: #3726B2; /* 위치바 색 변경 */
  --submenu_hover_bg_color: #3E2F22; /* 오버시 서브메뉴 배경색 */
  --submenu_hover_font_color: #fff; /* 메뉴배경 색상지정 */
  --submenu_hover_sm2_color: #8C0052; /* 메뉴배경 색상지정 */
}
#wrap_centermenu1 { position:relative; text-align:center; background-color:#F8F8F8; border-bottom:1px solid #E9E9E9; overflow:hidden;}
#wrap_centermenu1 .smenu { display:flex; justify-content:center; margin:0; padding:0}
#wrap_centermenu1 .smenu .sm { position:relative; display:inline-block; text-align:center; }
#wrap_centermenu1 .smenu .sm { border-left:1px solid #E9E9E9;}
#wrap_centermenu1 .smenu .sm:last-child { border-right:1px solid #E9E9E9;}
/*#wrap_centermenu1 .smenu .sm:last-child {border-right:1px solid #E9E9E9;}*/
#wrap_centermenu1 .smenu li a {
	font-size:1rem; font-family:'Noto Sans KR', sans-serif; display:inline-block;  padding:var(--smenu_a_padding); color:#464646; vertical-align:middle; text-decoration:none;
	letter-spacing:-.5px; position:relative;
}
#wrap_centermenu1 .smenu li.on { background-color:var(--smenu_a_color_on_bg); font-weight:bold; }
#wrap_centermenu1 .smenu li.on > a { color:var(--smenu_a_color_on_font); border-bottom:0px solid #fff; position:relative;}

#wrap_centermenu1 .smenu li a:hover { background-color:var(--smenu_a_color_over)}
#wrap_centermenu1 .smenu li.on a:hover { background-color:var(--smenu_a_color_on_over) }


/*
	## 서브 센터메뉴2
*/
#wrap_centermenu2 { position:relative; background-color:#fff; z-index:10; }
#wrap_centermenu2 .smenu-align { position:relative; display:block; width:1000px; height:100%; margin:0 auto; top:0px; }
#wrap_centermenu2 .smenu {
	position:absolute; top:0; left:0; width:100%; height:100%; list-style:none; display:block;
	border:1px solid #E9E9E9;  background-color:#fff; 
}
#wrap_centermenu2 .smenu .sm {
	font-size: 1rem; font-family:'Noto Sans KR', sans-serif;
	position:relative; display:inline-block; float:left; margin-left:-1px;
	background-color:#fff;  border-left:1px solid #E9E9E9; border-right:1px solid #E9E9E9; border-bottom:1px solid #E9E9E9;
}
#wrap_centermenu2 .smenu .sm > a { position:relative; padding:12px 15px 17px; width:100%; display:block;}
#wrap_centermenu2 .smenu .sm.home > a { font-size:20px; padding:9px 20px 10px; border:0; color: #141414}
#wrap_centermenu2 .smenu .sm .items { position:relative; width:100%; display:none; }
#wrap_centermenu2 .smenu .sm .items li { position:relative; display:block; border-top:1px solid #E9E9E9;}
#wrap_centermenu2 .smenu li a {
	position:relative; display:block; padding:15px 20px; color:#393939; text-decoration:none;
}
#wrap_centermenu2 .smenu .sm.menu { width:20%; }
#wrap_centermenu2 { height:52px;}
#wrap_centermenu2 .smenu .sm > a { height:50px;}
#wrap_centermenu2 .smenu li.on { background-color:#650138;  }
#wrap_centermenu2 .smenu .sm .on a { color:#fff }

#wrap_centermenu2 .fa-angle-down { float:right; font-size:16px; padding-top: 4px;}


/*
	## 서브 센터메뉴3
*/
#wrap_centermenu3 { text-align:center; background-color:#F8F8F8; height:53px; border-bottom:1px solid #E9E9E9;}
#wrap_centermenu3 .smenu { display:inline-block; overflow:hidden; }
#wrap_centermenu3 .smenu .sm {
	position:relative; display:inline-block; padding:12px 15px; text-align:center; float:left;
	border:0; border-left:1px solid #E9E9E9;
}
#wrap_centermenu3 .smenu .sm:last-child {border-right:1px solid #E9E9E9;}
#wrap_centermenu3 .smenu li a { display:inline-block; padding:5px 0; color:#A4A4A4; vertical-align:middle; text-decoration:none; }
#wrap_centermenu3 .smenu li.on { background-color:#fff; border-bottom:1px solid #fff; }
#wrap_centermenu3 .smenu li.on > a { color:#1F1F23; border-bottom:1px solid #2EBDAD; }