@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
*{margin: 0; padding: 0; border: 0;}
body{font:normal dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: 0;  vertical-align: top;}
.cf:after{content:""; display: block; clear:both;}
.fl{float:left;}

/* 탑 토글 */ 
#open .pop{
	text-align: center;
	margin-top: -253px; /* 처음시작하면 -값으로 인해 올라가서 보이지 않는다. */
}

#open .pop .pop_drop{
	width: 100%;
	height: 253px;
	background: #eee;
}

/* 팝업 */ 

#pop_wrap{
	position: absolute;
	z-index: 999;
	top: 120px; /* 팝업 위치 설정 */
	left: 80px; /* 팝업 위치 설정 */
	display: none; /* 팝업 보이지 않게 설정 */
}

#wrap{
	margin-top: 1px;
	position: relative;
	/* 탑 토글을 했을때 상단에서 아래로 밀어내기 위해서 포지 position: relative; 사용을 한다 */
	}
	
#line{
	width: 100%;
	position: absolute;
	border-top: 2px solid #30204d;
	top: 88px;
	}
	
#top_layout{width: 1350px; margin: 0 auto;}
#top{width: 1350px; height: 176px; position:relative;}
#logo{background:url(../images/logo.jpg) no-repeat; width: 169px; height: 177px; position: absolute; float: left;}
#top #top_header{width: 1350px; height: 88px; }
#top #top_header h1{background:url(../images/slogan.jpg) no-repeat; width: 330px; height: 39px; float: left; text-indent:-999999px; margin: 30px 0 0 180px;}
#top #top_header #search{float: left; margin: 30px 0 0 180px;}
#top #top_header #search .guideText{border: 1px solid #bbbbbb; width: 200px; height:35px; padding: 0 10px; float: left;}
#top #top_header #search .search_img{display: block; float: left; width: 37px; height: 37px;}
#top_header #gnb{float: right;}
#top_header #gnb li{float: left; padding-left: 10px; padding-top: 5px;}

#top #top_menu{width: 1178px; height: 88px; margin-left: 170px;}
#top #top_menu #top_nav{float: right;}
#top #top_menu #top_nav>li{float:left; position: relative;}
#top #top_menu #top_nav>li>a{
	display: block;
	float: left;
	padding: 35px 21px 38px 21px;
	color: #444444;
	text-decoration: none;
	font-size: 0.8em;
	font-family:"Nanum Gothic", sans-serif; font-weight: bold;
}
#top #top_menu #top_nav>li>a:hover{color: #7545a8;}
#top #top_menu #top_nav li .drop{display:none; position: absolute; top:87px;}
#top #top_menu #top_nav li:hover .drop{display:block;}
#top #top_menu #top_nav li .drop p{position: absolute; left:170px;}
#top #top_menu #top_nav li .drop  ul{border-bottom:3px solid #2b174a;}
#top #top_menu #top_nav li .drop  ul li{width:170px; height: 30px; padding: 5px 0; background: #f2f2f2; border-bottom: 1px solid #cccccc;}
#top #top_menu #top_nav li .drop  ul li img{margin: 4px 15px 0 0;}
.tit_sub a{display: block; font-size: 0.75em; font-weight: bold;  text-decoration: none; color: #666666; padding: 7px 0; margin-left: 20px;}
.tit_sub li a:hover{color: #333333;}
.drop>p>span.text1{position: absolute; top: 30px; left: 30px; color: #ffffff; font-size: 1.063em; font-weight: bold;}
.drop>p>span.text2{position: absolute; top:55px; left: 30px; color: #ffffff; font-size: 0.625em; font-weight: bold;}

li.nav_tit #left1{position:absolute; left:-60px;}
li.nav_tit #left2{position:absolute; left:-190px;}
li.nav_tit #left3{position:absolute; left:-290px;}

/* 새롭게 디자인한 상단 메인 이미지 배너 css 설정 */

#main_image{
	width: 100%;
	height:554px;
	text-align: center;
	}

#main_image ul{
	position: relative;
	width: 100%;
	height: 554px;
	overflow: hidden;
}

#main_image ul li{
	position: absolute;
	width: 100%;
	height: 554px;
	float: left;
	left: 100%;
}

#main_image ul li:first-child{
	left: 0;
}

#main_image ul li img{
	display: block;
	width: 100%;
	height: 554px;
	background-size: cover;
	}



/* 새롭게 디자인한 상단 메인 이미지 배너 css 끝 */

#middle_layout{width: 1350px; margin: 0 auto;}

#top_sub_menu{width:1335px; height: 68px; margin: 0 auto; position: relative;}
.left{position: absolute; left: 0; top: 0;}
.right{position: absolute; right: 0; top: 0;}

#top_sub_menu .slide01{
	/* 움직이기 전 가로 값과 세로값 그리고 숨기는 효과를 줬다. */
	width:1221px;
	height: 68px;
	margin-left: 57px;
	overflow: hidden;
	}

#top_sub_menu ul{
	/* ul 한칸씩 움직이는 스크립트는 ul에게 준다. */
	width: 2442px;
	height: 67px;
	position: relative;
	border-bottom:1px solid #000;
	/* 아래 li에 있던 보더 버텀을 가져와서 ul 구문에 삽입 하여 border-bottom 라인을 보이게 헀다. */
	}


#top_sub_menu ul li{
	float:left;
	width: 203.5px;
	height: 68px;
	text-align: center;
	}
	
#top_sub_menu ul li a{display: block; text-decoration: none; padding: 25.5px 0; border-left: 1px solid #30204d; font-size: 0.875em; color: #444444; font-weight: bold;}
#top_sub_menu ul li a:hover{background: #643684; color: #ffffff;}

#main1{width: 1350px; height: 462px; margin-bottom: 83px;}
#main1_title{width: 1335px; height: 120px; margin: 0 auto;}
#main1_banner{width: 1336px; height: 342px; margin: 0 auto; background: red; overflow: hidden;}
#main1_banner ul li{float: left; position: relative; z-index: 10;}
#main1_banner .color{width: 171px; height: 0; text-align: center; background: #4b138b; position: absolute; bottom:0px; z-index: 100; opacity: 0.6; transition-property:height; transition-duration:0.3s;}
#main1_banner ul li:hover .color{height:171px;}
#main1_banner ul li .color a{display: block; color: #ffffff; font-size: 0.75em; font-weight: bold; margin-top: 40px; line-height: 20px; text-decoration: none;}
#main1_banner ul li .color a:hover{color: #dfbfff;}

/* 이달의 포커스 시작 */
#main2{
	width: 1335px;
	height: 300px;
	margin-bottom:40px;
	margin: 0 auto;
	}

.board1_tit{
	width: 443px;
	height: 58px;
}

.img1{
	width: 443px;
	height: 40px;
	overflow: hidden;
}

.board1_img{
	width: 437px;
	height: 215px;
	overflow: hidden;
}

/* 탭 설정 시작 */
#main2Box{
	width: 800px;
	height: 300px;
	float: left;
}

.all{
	width: 800px;
	float: right;
}

.tabSet ul{
	padding: 20px 12px 0;
	overflow: hidden;
	border-radius: 4px;
}

.tabs{
	margin-left: -10px;
	width: 800px;
}

.tabSet ul li{
	float: left;
	padding: 0 4px 0 0;
}

.tabSet ul li a{ /* 탭 부분 css 설정 */
	float: left;
	background: #fff;
	color: #333;
	padding: 0.50em 1.5em;
	border-radius: 4px 4px 0 0;
	text-shadow: 0 0 3px #fff;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 0 5px #444;
	/* display: none; */
}

.tabSet ul li a.on{ /* 탭 클릭하면 활성화 되는 탭 설정 */
	color: #dddddd;
	background: #502686;
	cursor: pointer;
}

.panels{ /* 폰트가 들어가는 부분 크기와 백그라운드 컬러 설정 */
	width: 800px;
	height: 220px;
	background: #eee;
}

.panel{
	padding: 0.75em 1em 0.4em;
	margin: 0 0 0.5em;
	width: 770px;
	height: 210px;
}

.panels>.panel>.notice{
	width: 500px;
	height: 180px;
	margin-left: 20px;
}

.panels>.panel>.notice>p>a{
	color: #333;
	line-height: 150%;
	letter-spacing: 1px;
	text-decoration: none;
}

.panels>.panel>.notice_date{
	width: 200px;
	height: 180px;
}

.panels>.panel>.notice_date>p{
	color: #333;
	line-height: 150%;
}

#main3{width: 1350px; height:930px;}
#main3_banner{width: 1335px; height:930px; margin: 0 auto;}
#banner1 li{float: left; margin-bottom: 20px;}
#banner2 li{float: left; margin-bottom: 20px;}
#banner3 li{float: left; margin-bottom: 20px;}
#main3_banner ul li:hover{opacity: 0.7;}

#partner{
	width:1300px;
	height: 46px;
	margin: 30px auto;
	text-align: center;
	}
	
#partner .left1{
	float: left;
	}
	
#partner .right1{
	float: right;
	}
	
#partner li.partner{
	float: left;
	width: 290px;
	height: 46px;
	}
	
	
#partner .area{
	width: 1160px;
	height: 46px;
	margin-left: 20px;
	float: left;
	overflow: hidden;
}

#partner .area ul{
	width: 2320px; /*좌측에서 우측으로 부드러운 움직임을 주기위해 2배로 넓이를 줬다*/
	height: 46px;
	position: relative; /* 포지션을 주지 않으면 자연스럽게 움직이지 않는다. */
}


#footer{width: 100%; height: 1000px; background: #1a1a1a;}
#footer #foot_information{width: 1337px; height: 630px; margin: 0 auto; background:url(../images/foot.jpg) no-repeat; position: relative;}
#footer #foot_information .text1{font-size: 0.875em; color: #979797; line-height: 20px; text-align: center; position: relative; top: 40%;}
.foot_icon{float:left; width:936px; position: absolute; top: 325px; left: 263px;}
.foot_icon li{float:left;}
#foot_information h2{font-size: 1.5em; color: #bd934b; position:absolute; top:525px; left: 40%;}
#foot_information .text2{font-weight: bold; font-size: 0.813em; color: #979797; text-align: center; position:absolute; top: 585px; left: 250px; line-height: 17px;}
#foot_information .text2 a{text-decoration: none; color:#ffffff;}
#footer #foot_sitemap{width: 1336px; height: 370px; margin: 0 auto; }
.sitemap_list{margin-left: 40px;}
.sitemap_list>li{
	height: 330px; border-left:2px solid #333333;
	color: #ffffff; font-weight: bold; font-size: 0.875em; padding-top: 40px; padding-right: 5px; padding-left: 10px; margin-left: 12px;
}
.sitemap_list>li.bordernone{border-left:none;}
.sitemap_list>li>ul{margin-top: 15px;}
.sitemap_list>li>ul>li{list-style:square; color: #666666; margin-left:20px;}
.sitemap_list>li>ul>li>a{font-weight:normal; text-decoration: none; font-size: 0.75em; line-height: 25px; color: #666666;}
.sitemap_list>li>ul>li>a:hover{color: #ffffff;}

#page_up_btn>a>img{position:fixed; right: 0; bottom:0; z-index:100;}