@charset "utf-8";


html, body {width:100%;min-height:100%;}
body {background:#f5f5f5}

/********** header **********/

#header h1.logo {left:0px;top:55px;position:absolute;}
#global_wrap {}

    #util {display:inline-block;vertical-align:middle}
	#util li {float:left; margin:0; padding:0 11px; background:url("/images/common/util_line02.gif") no-repeat 0 50%;color:#FFFFFF;font-size:12px;}
	#util li:first-child{background:none;}
	#util li strong.city{color:#ffe064}
	#util li strong.site01{color:#bae9a0}
	
	#util a:link      {color:#fff; text-decoration:none;}
	#util a:visited   {color:#fff; text-decoration:none;}
	#util a:active    {color:#fff; text-decoration:none;}
	#util a:hover     {color:#fff; text-decoration:underline;}
			
#header .layerGnb {
	background: #fff;
	z-index: 500;
}	
#header .gnb {
	float: right;
	width: 80%;
	text-align: right;
	font-size: 0;
}
#header .gnb li {
	position: relative;
	display: inline-block;
}
#header .gnb li .txt {
	text-indent: -9999px;
	font-size: 0;
	line-height: 0;
}
#header .gnb li a {
	display: block;
	padding: 28px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	text-align: center;
	color:#fff
}
#header .gnb li:nth-child(3) a {padding-right:18px;padding-left:18px}
#header .gnb li:nth-child(4) a {padding-right:40px;padding-left:40px}
#header .gnb li:last-child a {
	padding: 28px 25px;
}
#header .gnb li a:hover, #header .gnb li a:focus {
	text-decoration: none
}
#header .gnb .depth2 {
	display: none;
	position: absolute;
	top: 81px;
	left: 0;
	right: 0;
	height: 226px;
	padding: 14px 0;
	border-left: 1px solid #e8e9ea;
	background: #fff;
	z-index: 500
}

#header .gnb .depth2 li {
	display: block;
}
#header .gnb .depth2 li a {
	padding: 6px 12px;
	font-size: 13px;
	font-weight: normal;
	color: #333;
	text-align: left;
}
#header .gnb .depth2 li .depth3 {
	display: none;
}

#header .layerGnb .bgLayer {
	display: none;
	height: 255px;
	position: fixed;
	top: 118px;
	left: 0;
	right: 0;
	border-bottom:3px solid #4174b6;
	background: #fff;
	-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
	z-index: 400
}
#header .layerGnb .bgLayer:before {
	content: '';
	display: block;
	width: 1000px;
	height: 255px;
	margin: 0 auto;
	background: url("/images/hea/common/gnb_bg.jpg") no-repeat 0 bottom;
}
#header .gnb li.active > a {
color: #ffe064;text-decoration:none;font-weight:600;
}
#header .gnb .depth2.on {
	background: #fff;
}
#header .gnb .depth2 li.on a {color:#4174b6;font-weight:600;text-decoration: underline;}
#header .gnb .depth2 li a:hover, #header .gnb .depth2 li a:active {
	color: #fff;
	background:#4174b6;
	text-decoration: underline;
}

#container_wrap {margin:0 auto 0} 


 
/********** visual **********/
#visual_wrap1 {height:137px;margin:118px 0 0 0}
.visual { width:735px; margin:0 auto; padding:0 0 0 245px;} 
.visual img { border-bottom:1px solid #dadada; }
 
 
/*********** container **********/
/* left */
.leftWrap {float:left;width:205px; margin-right:40px; margin-bottom:30px; margin-top:0; padding:0 0 0 0;} 
.leftWrap h2 {/*kdy - 2014.03.26 LNB 여백없애기 위해 마진추가 */margin:0; padding:54px 0 25px 15px; color:#09699c; font-size:24px; font-weight:600; line-height:28px; background:#7da804 url(/images/hea/common/h2_bg.jpg) no-repeat right bottom; height:65px; }
.leftWrap h2 span {padding:0px 0 0 0; color:#7b8aa3; display:block; font-size:12px; font-weight:normal;}

.leftMenu {border-top:1px solid #fff; margin-bottom:50px; width:100%;}
.leftMenu li {padding:0;width:205px;color:#000;border-bottom:1px solid #fff;font-size:14px;}
.leftMenu li a {padding:7px 10px 7px 10px; overflow:hidden;display:block;color:#444444;font-weight:600; background:#efefef;}
.leftMenu li a.on  {overflow:hidden;display:block;color:#fff;font-weight:600;background:#57534f;}
.leftMenu li a.on:hover, .leftMenu li a.on:active, .leftMenu li a.on:focus { overflow:hidden;display:block;color:#fff;font-weight:600; background:#57534f;}
.leftMenu li.hover a {}
.leftMenu li a:hover,
.leftMenu li a:active, 
.leftMenu li a:focus {color:#2b8cc4;}	

.leftMenu li ul{padding:10px 0;}
.leftMenu li ul li{padding:0; width:205px; border-bottom:0px; font-size:12px;}
.leftMenu li ul li a{font-weight:normal; padding:3px 10px 3px 20px; background:none;}
.leftMenu li ul li a.on{overflow:hidden;display:block;color:#000;font-weight:600;background:none;}
.leftMenu li ul li a.on:hover, .leftMenu li ul li a.on:active, .leftMenu li ul li a.on:focus{ overflow:hidden;display:block;color:#000;font-weight:600;background:none;}


/* right */
.conRight{padding:30px 0 30px; width:735px; height:auto; float:right; position:relative;}
.contents{ width:100%; height:auto; padding:30px 0 0 0;}


/************ list style **********/

h4  {color:#176fae; }
h5  {color:#666666;font-weight:bold }
h6  {color:#176fae;font-weight:normal;margin-left:18px;}
.h4_ul li {color:#176fae;}
.h5_ul li {color:#666666;}
.h6_ul li {color:#176fae;}
.h7_ul li {color:#666666;}

.h5_ul li			{margin:0 0 8px 0; padding-left:15px; background:url(/images/common/h5_bul.gif) no-repeat 5px 7px; font-size:13px; line-height:19px; color:#666666; font-weight:600;}
.h5_ul_normal		{margin-top:10px;color:#666666;}
.h5_ul_normal li	{margin:0 0 8px 0; padding-left:15px; background:url(/images/common/h5_bul.gif) no-repeat 5px 7px; font-size:13px; line-height:19px; color:#666666; font-weight:normal}
.h6_ul li			{margin:0 0 5px 0; padding-left:0px; background:none; font-weight:normal;color:#176fae;}
.h6_ul_normal li	{margin:10px 0 5px 0; padding-left:0px; background:none; font-weight:normal;color:#176fae;}
.h7_ul li			{margin:0 0 3px 0; padding-left:8px; background:url(/images/common/h7_bul.gif) no-repeat left 8px; color:#666666; font-weight:normal;} 
.h7_ul_small li			{margin:0 0 3px 0; padding-left:8px; background:url(/images/common/h7_bul.gif) no-repeat left 8px; color:#666666; font-weight:normal;font-size:12px} 



/************************************** responsible **********************************************/
.forPc {
	display: block !important;
}
.forTab, .forMbl, .hidePc {
	display: none !important;
}

@media screen and (max-width:1023px) {
.forPc {
	display: none !important;
}
.forTab, .hidePc {
	display: block !important;
}
*:hover, *:focus, *:active {
	text-decoration: none !important;
}
}
@media screen and (max-width:480px) {
.forTab {
	display: none !important;
}
.forMbl {
	display: block !important;
}
}


/********************************************** 1600px ���� ******************************************/
 @media screen and (max-width:1600px) {
.wrap {width:100%;margin:0 auto;overflow:hidden;}
 }
/********************************************** 16000px �� ******************************************/

/********************************************** 1400px ���� ******************************************/
 @media screen and (max-width:1400px) {

 }
/********************************************** 14000px �� ******************************************/

/********************************************** 1280px ���� ******************************************/
 @media screen and (max-width:1280px) {

 }
/********************************************** 1280px �� ******************************************/

/********************************************** 1024px ���� ******************************************/
 @media screen and (max-width:1024px) {

 }
/********************************************** 1024px �� ******************************************/

/********************************************** 1023px ���� ******************************************/
 @media screen and (max-width:1023px) {

#header h1.logo{top:50%;left:50%;margin:-22px 0 0 -80px}

#header .layerGnb .logo {
	position: static;
	width: 159px;
	margin: 15px auto 22px;
}
#header #global_wrap {
	float: none;
	width: 100%;
	padding: 0;
	text-align: center;
}
#header #global_wrap li, #header #global_wrap .btnSrch {
	display: none;
}
#header #global_wrap .login, #header #global_wrap .sitemap, #header #global_wrap .link {
	display: inline-block;
}
#header #global_wrap li a {
	display: block;
    padding: 12px 15px;
    margin: 0 5px 5px 0;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-decoration: none;
	background:none
}
#header #global_wrap li a:before {
	display: none
}
#header #global_wrap .login a {
	color: #fff;
	border: 1px solid #838794;
}
#header #global_wrap .sitemap a {
	color: #fff;
	border: 1px solid #838794;
}
#header #global_wrap .link a {
	color: #fff;
	border: 1px solid #838794;
}
#header #global_wrap li:last-child a {
    margin: 0 0 5px 0;
}
#header #global_wrap #util li {padding:0; background:none;}

#header .layerGnb {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.7);
	z-index: 9999;
}
#header .layerGnb .wrapCnt {
	overflow: scroll;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 314px;
	background: #4e5366;
}
#header .gnb {
	width: 100%;
	float: none;
	margin: 26px 0 0 0;

	border-bottom: 1px solid #111319 ;
}
#header .gnb li {
	display: block;
}
#header .gnb > ul > li > a {
	position: relative;
	padding:18px 22px !important;
	font-size: 18px;
	color: #fff;
	text-align: left;
	border-top: 1px solid #111319 ;
	background:#2b2f3e
}
#header .gnb > ul > li > a:after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 10px;
	position: absolute;
	top: 50%;
	right: 34px;
	margin: -5px 0 0 0;
	background: url("/images/fvu/common/bul_gnb.png") no-repeat 0 0;
}
#header .gnb > ul > li.on > a:after {
	background-position: -16px 0
}
	#header .gnb li.on > a {
	background: #2a4c76 
}
#header .gnb .depth2 {
	position: static;
	height: auto;
	padding: 0;
	border: 0;
	background: #2b2f3e;
}
#header .gnb .depth2 li a {
	padding: 14px 23px;
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	text-decoration: none !important;
	border-top: 1px solid rgba(255,255,255,.3);
	background:#4174b6
}
#header .gnb .depth2 li:first-child a {
	border: 0;
}
#header .gnb .depth2 .on a{color: #fff !important;background:#4174b6;text-decoration: underline !important}
#header .gnb .depth2 li.on .depth3 li a {color:#555 !important;font-weight:400 !important;text-decoration:none !important;}	
#header .gnb .depth2 li.on .depth3 .on a{color:#4174b6 !important;font-weight:600 !important;text-decoration: underline !important}

/*************** 3depth menu ***************/
#header .gnb .depth2, #header .gnb .depth2 > li.on .depth3:not(.noData) {
	display: block;
}
#header .gnb .depth3 {
	display: none;
	padding: 18px 0;
	background: #fff;
}
#header .gnb .depth3 li {
	display: block;
	margin: 0;
}
#header .gnb .depth3 li a {
	position: relative;
	padding: 10px 15px 10px 38px;
	font-size: 15px;
	line-height: 1;
	color: #555 !important;
	text-decoration: none;
	border-top: none;
	background:#fff !important
}
#header .gnb .depth3 li a:before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: -1px 7px 0 0;
	vertical-align: middle;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	background: #4e5366;
	color: #555 !important;
}
#header .gnb .depth3 li.active a {
	text-decoration: underline;
	color: #555 !important;
}
/*************** 3depth menu ***************/

#header .btnToggleMn {position:absolute;left:17px;top:12px;width:43px;height:43px;text-indent:-9999px;font-size:0;background:url("/images/hea/common/btn_toggle_gnb.gif") no-repeat 0 0;}
#header .btnToggleMn a {display:block;width:43px;height:43px;}

#header .topSrch {position:absolute;top:12px;right:17px;width:43px;height:43px;}
#header .topSrch:after {content:'';display:inline-block;position:absolute;top:50%;left:50%;width:43px;height:43px;margin:-20px 0 0 -22px;background:url("/images/common/btn_top_srch_mo.png") no-repeat 0 0;z-index:0;}
#header .topSrch a {display:block;position:relative;width:100%;height:100%;font-size:0;text-indent:-9999px;z-index:10;}
#header .topSrch.btnClose:after {background-position:-53px 0;}

#header .layerSrch {
	top: 70px;
}

#visual_wrap {text-align:center;padding:0;margin:70px 0 0 0}

#container_wrap {margin:0px auto 0 !important} 

#container_wrap .contents_layout{padding:0px 30px 20px}
.leftWrap {display:none}	

.conRight {width:100%;display:inline-block;margin-left:0;float:inherit;box-sizing:border-box;padding:25px 30px !important}
.contents{ width:100%; height:auto; padding:30px 0 0 0;}

.conRight {padding:0 30px 10px !important}
 }
/********************************************** 1023px �� ******************************************/

/********************************************** 1000px ���� ******************************************/
 @media screen and (max-width:1000px) {
#container_wrap {margin:0 auto 0 !important} 

#container_wrap .contents_layout{padding:0 30px 20px}

#visual_wrap,#visual_wrap1 {margin:70px 0 0;padding:0;text-align:center}
.visual {width:100%;padding:0;border-bottom:1px solid #dadada; } 
.visual img { border-bottom:none }

.conRight {padding:10px 30px  !important}

.charge{box-sizing:border-box;}
 }
/********************************************** 1000px �� ******************************************/

/********************************************** 900px ���� ******************************************/
 @media screen and (max-width:900px) {
	 .visual_img{width:100%}
	#container_wrap .contents_layout{width:100%}

 }
/********************************************** 900px �� ******************************************/

/********************************************** 800px ���� ******************************************/
 @media screen and (max-width:800px) {
	.conRight {padding:20px 0 20px !important}
 }
/********************************************** 800px �� ******************************************/

/********************************************** 768px ���� ******************************************/
 @media screen and (max-width:768px) {

 }
/********************************************** 768px �� ******************************************/

/********************************************** 640px ���� ******************************************/
 @media screen and (max-width:640px) {
	#visual_wrap,#visual_wrap1 {display:none}
	#container_wrap {margin:70px auto 0 !important} 
	.conRight {padding:30px 0 !important}
	.contents .img{width:100% !important;height:auto !important}
 }
/********************************************** 640px �� ******************************************/

/********************************************** 600px ���� ******************************************/
 @media screen and (max-width:600px) {

 }
/********************************************** 600px �� ******************************************/

/********************************************** 480px ���� ******************************************/
 @media screen and (max-width:480px) {
	#container_wrap .contents_layout{padding:0 20px 20px}
	.conRight {padding:30px 10px 20px !important}
 }
/********************************************** 480px �� ******************************************/

/********************************************** 414px ���� ******************************************/
 @media screen and (max-width:414px) {


 }
/********************************************** 414px �� ******************************************/

/********************************************** 384px ���� ******************************************/
 @media screen and (max-width:384px) {

 }
/********************************************** 384px �� ******************************************/

/********************************************** 360px ���� ******************************************/
 @media screen and (max-width:360px) {

 }
/********************************************** 360px �� ******************************************/

/********************************************** 320px ���� ******************************************/
 @media screen and (max-width:320px) {
#header .layerGnb .wrapCnt {width: 280px;}
#util li {float:none;padding:0}
 }
/********************************************** 320px �� ******************************************/