@charset "UTF-8";



/***********************************************************************************************
	서체지정
***********************************************************************************************/
	.depth1 > li > a,
	.aside h2,
	.sub-menu > li > a,
	.sub-menu > li > ul > li > a{
		font-family: "NanumSquare";
	}

	.h2-tit,
	.h3-tit{ font-family: "MalgunGothicBold" }

	#page{ font-family: "MalgunGothic" !important }



/***********************************************************************************************
	바로가기
***********************************************************************************************/
	#skip-nav,
	#skip-nav dt,
	#skip-nav dd{ height: 0 }
	#skip-nav{ z-index: 500 }
	#skip-nav a{
		display: block;
		width: 1px;
		height: 1px;
		margin-left: -1px;
		margin-bottom: -1px;
		text-align: center;
		font-weight: bold;
		white-space: nowrap;
		color: #000;
		overflow: hidden;
	}
	#skip-nav a:hover,
	#skip-nav a:focus,
	#skip-nav a:active{
		width: 100%;
		height: auto;
		padding: 10px 0;
		background-color: #0C4DA2;
		color: #FFF;
		z-index: 1000;
	}



/***********************************************************************************************
	레이아웃
***********************************************************************************************/
	body{ min-width: 320px }

	#header{
		clear: both;
		float: left;
		border-bottom: 4px solid #00387F;
		z-index: 10;
	}

	#contents{
		clear: both;
		z-index: 1;
	}

	/*20190603(s)*/
	#footer{
		margin-top: 80px;
		padding: 20px 0;
		background-color: #45484D;
		font-size: 0;
		z-index: 0;
	}
	/*20190603(e)*/

	.container{
		position: relative;
		width: 1100px;
		margin: 0 auto;
		*zoom: 1;
	}
	.container:after{
		display: block;
		clear: both;
		height: 0;
		content: "";
		visibility: hidden;
	}




/***********************************************************************************************
	레이아웃 - 헤더
***********************************************************************************************/
	/** TOP BANNER **/
	#top-banner{
		border-bottom: 1px solid #E6E6E6;
		background-color: #F5F5F5;
	}
	#top-banner .container{ padding: 1.8em 0 2em }
	#top-banner .close,
	#top-banner .today-close{
		padding: 0.5em 0.6em;
	}
	#top-banner .close > img{ width: 1.3em }
	#top-banner .today-close > input{ width: 0.9em }
	#top-banner .today-close > label{ vertical-align: 0.1em }


	/** Header **/
	.htop{
      /* padding-top: 9px; */
      padding-right: 1em;
      line-height: 1em;
   	}
	.htop a{
      margin-left: 2em;
      font-size: 11px;
      letter-spacing: -1px;
      color: #fff;
      margin-top: 11px;
      display: inline-block;
   }
	.htop a:hover,
	.htop a:focus{
		color: #fff;
	}
	.htop a img{
		margin-right: 0.2em;
		vertical-align: -0.14em;
	}
	.htop a:first-child img{ vertical-align: -0.08em }
	.htop .logout a{ padding-right: 8px }

	#header > .logo{
		float: left;
		margin: 0;
		padding-bottom: 40px;
		border-bottom: 1px solid #DDD;
	}

	#header .hbody{ float: left }


	/** GNB **/
	#gnb li{
		position: relative;
		white-space: nowrap;
	}
	#gnb li a{ line-height: 1.1em }
	#gnb li.active > ul{ display: block }

	#gnb .depth1 > li{
		position: relative;
		float: left;
		margin-left: 6.8%;
		text-align: left;
	}
	#gnb .depth1 > li > a{
		display: block;
		padding: 0.9em 0.3em 0.85em;
		font-size: 1.06em;
		color: #222738;
	}
	#gnb .depth1 > li > a:hover,
	#gnb .depth1 > li > a:focus,
	#gnb .depth1 > li.active > a{
		color: #0377C8;
	}

	#gnb .depth2{
		display: none;
		position: absolute;
		top: 3em;
		padding-top: 3px;
		background-color: #002B69;
		box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.2);
		z-index: 10;
	}
	#gnb .depth2 > li{
		border: 1px solid #002B69;
		border-top: 1px solid #00072B;
	}
	#gnb .depth2 > li:first-child{
		border-top: 1px solid transparent;
	}
	#gnb .depth2 > li > a{
		display: block;
		padding: 0.7em 1em 0.9em;
		font-size: 0.8em;
		color: #FFF;
	}
	#gnb .depth2 > li > a:hover,
	#gnb .depth2 > li > a:focus,
	#gnb .depth2 > li.active > a{
		background-color: #FFF;
		color: #004EA2;
	}
	#gnb .menu1 .depth2{ width: 13em;left: -30px; }
	#gnb .menu2 .depth2{ width: 19.5em;left: -30px; }
	#gnb .menu3 .depth2{ width: 12em;left: -25px; }
	#gnb .menu4 .depth2{ width: 10em;left: -10px; }
	#gnb .menu5 .depth2{ width: 9em;left: -25px; }
	#gnb .menu6 .depth2{ width: 10em;left: -27px; }

	#gnb .depth3{
		display: none;
		position: absolute;
		top: 0;
		padding: 0.3em 0 0.8em;
		background-color: #FFF;
		box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.2);
		z-index: 11;
	}
	#gnb .menu1 .depth3{ left: 12.94em }
	#gnb .menu2 .depth3{ left: 19.54em }
	#gnb .menu3 .depth3{ left: 11.94em }
	#gnb .menu4 .depth3{ left: 9.94em }
	#gnb .menu7 .depth3{ left: 10.2em }

	#gnb .depth3 > li{ padding: 0.1em 1em 0.2em 0.8em }
	#gnb .depth3 > li > a{
		font-size: 0.8em;
		color: #45484D;
	}
	#gnb .depth3 > li > a:hover{ text-decoration: underline }




/***********************************************************************************************
	페이지
***********************************************************************************************/
	.page{
		float: right;
		width: 670px;
		margin-right: 30px;
	}

	#page{
		margin-top: 35px;
		padding-bottom: 30px;
		line-height: 1.8em;
		color: #666;
	}

	#page.main{
		margin-top: 0;
		padding-bottom: 0;
	}




/***********************************************************************************************
	푸터
***********************************************************************************************/
	#footer .menu{
		padding: 10px 0;
		color: #8B97A3;
	}
	#footer .menu a{
		font-size: 12px;
		color: #FFF;
	}
	#footer .menu span{
		font-size: 12px;
		margin: 0 9px;
	}

	#footer .banner > a{ margin-left: 40px }
	#footer .banner > a:first-child{ margin-left: 0 }

	#footer .logo,
	#footer .info{
		display: inline-block;
		float: left;
	}
	#footer .logo{ margin-top: 40px }
	#footer .info{
		padding: 35px 0 25px 20px;
		font-size: 11px;
		line-height: 1.5em;
		color: #8B97A3;
	}
	#footer .info > address{ color: #D0D5DB }
	#footer .info > address b{
		display: inline-block;
		font-weight: normal;
		color: #FFF;
	}





/***********************************************************************************************
	MEDIA  [ width : 1120 ~ 320 ]
***********************************************************************************************/
@media all and (max-width: 1120px)
{
	.container{ width: auto }

	#gnb .depth1{ text-align: center }
	#gnb .depth1 > li{
		display: inline-block;
		float: none;
		margin-left: 5.8%;
	}
	#total_search_fm{margin-left:15px;}
	#gnb .depth1 > li:first-child{ margin-left: 0 !important }

	#footer .container{ margin: 0 10px }
	.border1-gray>span{display:none;}
	.file{
    margin: 10px 40px !important;
    display: block;
    }
}



@media all and (max-width: 1020px)
{
	#gnb .depth1 > li{ margin-left: 5% }
	#gnb .depth1 > li > a{ font-size: 1em }
	#gnb .depth2{ top: 2.85em }

	#footer .menu a{ font-size: 11px }
	#footer .menu span{
		font-size: 11px;
		margin: 0 5px;
	}
	#footer .banner{ top: 6px }
	#footer .banner img{ height: 25px }
	#footer .banner > a{ margin-left: 25px }
	#footer .logo img{ width: 160px }
	#footer .info{ padding-bottom: 15px }
	#footer .wa img{ width: 100px }
}


@media all and (max-width: 960px)
{
	#gnb .menu1 .depth2{ left: -0.5em }
	#gnb .menu6 .depth2{
		left: auto;
		right: -0.4em;
		text-align: right;
	}
}


@media all and (max-width: 800px)
{
	#gnb .depth1 > li{ margin-left: 4.2% }
	#gnb .depth1 > li > a{ font-size: 0.94em }
	#gnb .depth2{ top: 2.7em }

	#footer .banner,
	#footer .wa img{ display: none }
}



@media all and (max-width: 720px)
{
	#gnb{ display: none }

	#top-banner{ font-size: 0.8em }

	#header{border-bottom: 0;}
	#header > .logo{ padding: 5px 0 20px }
	#header .btn-menu{
		top: 51px;
		left: 2%;
		height: 60%;
	}
	#header .btn-menu img{ height: 100% }

	/** 모바일 메뉴 적용 **/
	#gnb{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}
	#gnb .container{ height: 100% }
	#gnb .top{
		position: relative;
		padding: 8% 5%;
		font-size: 0;
	}
	#gnb .top > a{ display: inline-block }
	#gnb .top > a > img{ width: 100% }
	#gnb .top > .logo{ width: 70% }
	#gnb .top > .close{
		width: 7%;
		margin-left: 23%;
		vertical-align: -3px;
	}
	#gnb #menu{
		display: block;
		position: absolute;
		top: 0;
		left: -100%;
		width: 70%;
		max-width: 320px;
		height: 100%;
		background-color: #FFF;
	}
	#gnb .depth1 > li{
		display: block;
		margin-left: 0;
		border-bottom: 1px solid #00072B;
	}
	#gnb .depth1 > li > a{
		background-color: #002B69;
		font-size: 0.8em;
		color: #FFF;
	}
	#gnb .depth1 > li > a:hover,
	#gnb .depth1 > li > a:focus,
	#gnb .depth1 > li.active > a{
		color: #C4DCFF;
	}
	#gnb .depth2{
		position: relative;
		top: 0 !important;
		left: 0 !important;
		width: auto !important;
		padding-top: 0;
		box-shadow: none;
	}
	#gnb .menu6 .depth2{ text-align: left }
	#gnb .depth2 > li{
		border: 0;
		border-bottom: 1px solid #FFF;
	}
	#gnb .depth2 > li > a{
		background-color: #D0D5DB;
		font-size: 0.7em;
		color: #002B69;
	}
	#gnb .depth2 > li > a:hover,
	#gnb .depth2 > li > a:focus,
	#gnb .depth2 > li.active > a{
		background-color: #476999;
		color: #FFF;
	}
	#gnb .depth3{
		position: relative;
		left: 0 !important;
		padding: 0.2em 0 0.4em;
		box-shadow: none;
	}
	#gnb .depth3 > li{ padding: 0.1em 0 0.3em 1em }
	#gnb .depth3 > li > a{ font-size: 0.7em }

	#footer .container{ margin: 0 20px }
	#footer .logo{
		float: none;
		margin-top: 0;
	}
	#footer .info{
		display: block;
		float: none;
		padding: 15px 0 0;
		white-space: normal;
	}
}



@media all and (max-width: 480px)
{
	#top-banner{ font-size: 0.6em }

	#header .logo img{ width: 40% }
	#header .btn-menu{
		/* top: 5%; */
		/* height: 90%; */
	}

	#footer{ margin-top: 30px }
	#footer .container{ margin: 0 0 0 11px }
	#footer .info{
		font-size: 10px;
		letter-spacing: -1px;
	}
	#footer .info address{ font-size: 9px }
	#footer .info address p{ margin: 10px 0 }
}


/***********************************************************************************************
	우측 퀵메뉴
***********************************************************************************************/
div.quick_menu{position: fixed;z-index: 9999;background: #fff;margin-left: 1115px;top: 300px;border: 3px solid #004ea2;text-align: center;}
div.quick_menu p.quick_menu_title{background: #004ea2;color: #fff;letter-spacing: -1px;width: 120px;font-size: 20px;font-weight: bold;line-height: 120%;padding: 10px 15px;}
div.quick_menu ul.quick_menu_btn{margin: 8px;}
div.quick_menu ul.quick_menu_btn li{border-bottom: 2px solid #004ea2;height: 80px;}
div.quick_menu ul.quick_menu_btn li a{display: block;letter-spacing: -1px;font-size: 20px;line-height: 100%;font-weight: bold;padding: 20px 0px;}
div.quick_menu ul.quick_menu_btn li.three_line a{padding: 10px 0;}
div.quick_menu ul.quick_menu_btn li:last-child{border: 0;}

.header_search{background:#071f5d;/* padding-bottom: 10px; */margin-bottom:30px;}
#total_search_fm{float:left;text-align:left;background: #fff;height: 2em;margin: 0.3em;}
#total_search_fm input[type="text"]{width:200px;border: 0;outline: none;padding: 0 0 0 0.8em;background: none;}
 .htop{
      /* padding-top: 9px; */
      padding-right: 1em;
      line-height: 1em;
   }


.header_search{background:#071f5d;/* padding-bottom: 10px; */margin-bottom:30px;}