
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);	
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);



* { margin:auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img { border: 0; max-width: 100%; margin: 0 auto; box-sizing: border-box;}
body { background: #FFF; font-family: 'Nanum Gothic', Tahoma,'Jeju Gothic',"Malgun Gothic", Qrial, sans-serif;  }




/* sub*/





#subtop_img {width: 100%; height:auto;  }


#main_wrap {width: 1200px; height: auto; overflow: hidden;background:#66cccc; margin: 0 auto; }



/* side */

#side_contents{ float:left; width: 20%; height:auto; padding-top: 30px;}


#main_lnb { float: left; width: 100%; height: 380px; background:#66cccc; padding-top: 30px; }

h3 { float: none; hight: 80px; font-size: 24px; color: #FFF;text-align: center; margin-bottom: 20px;}

#main_lnb ul {float: none; height: 280px;}
#main_lnb ul li {height: 40px; }
#main_lnb ul li a {display: block; height: 40px; line-height:40px; padding-left: 15px; border-top:1px solid #96D6F6; border-bottom: 1px solid #6398B2; color: #FFF; font-weight: bold;}
#main_lnb ul li a:hover { background: #85CBF0;}

#side_banner { overflow: none; width: 90%; height: auto; text-align: center;  margin-top: 50px; margin-bottom:5px ; background: #FFF; border: 1px solid #96D6F6; padding-top: 10px;}


.sbn_text1 a {font-size: 18px; color: #333;font-weight:bold; border-bottom: 1px solid #333;}
.sbn_text2 a {font-size: 28px; color: #FF0000; font-weight:bolder; font-style: italic;}
.sbn_text3 a {font-size: 14px; color: #333;font-weight:bold;}
.sbn_text4 a {font-size: 12px; color: #333;font-weight:bold;}


/*side end*/


#contents_wrap { float:left; width: 80%; height:100%; background: #FFF; }


#gnb { display: none;  overflow: hidden; height: 30px; border-bottom: 1px solid #5F6673; background: #71B1D1; } /* 모바일시 노출 */
.gnb_1{ float: left; width:25% }
.gnb_2{ float: left; width:25% }
.gnb_3{ float: left; width:25% }
.gnb_4{ float: left; width:25% }
.gnb_5{ float: left; width:33% }
.gnb_6{ float: left; width:33% }
.gnb_7{ float: left; width:33% }


#gnb ul li a { display: block; padding: 10px 0; color: #FFF;  font-weight: bold; font-size: 10px;}
#gnb ul li a:hover { background: #000; }






#sub_contents {width: 100%; height: auto;  margin: 0 auto; text-align: center; background: #FFF;}
.subtop_banner {width: 100%; height: auto; }
/*.subtop_bn1 { height: 30px;  }
.subtop_bn1 a{display: block; height: 30px; line-height: 30px; font-size: 18px; color: #FF0000; }
.subtop_bn2 { height: 50px;   }
.subtop_bn2 a{display: block; height: 50px; line-height: 50px; font-size: 18px; color: #FF0000; }
.subtop_bn2_1 a{font-size: 24px; font-weight: bolder; }*/

.con_nav {width: 100%; height: 50px; overflow: hidden; background: #FFF; border-bottom: 1px solid #333; }
.connav_1 { float: left; width: 60%; text-align: left; }
.connav_1 a{ display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: bold; color; #333; text-indent: 20px;}
.connav_2 { float: left; width: 40%; text-align:left;}
.connav_2 a{display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: bold; #333; text-indent: 50%;}

.contents_img {box-sizing: boder-box; }
.contents_img img { margin-top: 5px;}

.contents_video1 {display:block }
.contents_video2 {display:none }

/*sub end*/









@media screen and (max-width: 1200px) { 

#main_wrap {width: 100%;}

}


@media screen and (max-width: 1024px) {

#main_lnb h3 {font-size: 16px; }



}


@media screen and (max-width: 768px) {

	#top_banner { width: 100%; }
	#top_banner a { display:block; width: 100%; height: 30px; line-height: 30px; font-size: 12px; }
	
	#nav_1 { float:left; width:20%; }
	#nav_2 { float:left; width:22%; }
	#nav_3 { float:left; width:21%; }
	#nav_4 { float:left; width:20%; }
	#nav_5 { float:left; width:17%; }
		
	#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a, #nav_5 > a { font-size: 14px; }

	#nav_sub1 li, #nav_sub2 li, #nav_sub3 li, #nav_sub4 li, #nav_sub5 li { background:rgba(120, 18, 106, 0.5)}

	#nav_sub1 { width:25%;  font-size: 12px; margin-left:-15px;}
	#nav_sub2 { width:27%;  font-size: 12px; margin-left:-10px;}
	#nav_sub3 { width:26%;  font-size: 12px; margin-left:-10px;}
	#nav_sub4 { width:25%;  font-size: 12px; margin-left:-10px;}
	#nav_sub5 { width:22%;  font-size: 12px; margin-left:-15px;}

#main_lnb ul li a {font-size:12px; padding-left: 10px; }
.sbn_text1 a {font-size: 16px;}
.connav_2 a {text-indent: 30%; }

.contents_img iframe {box-sizing: border-box;}
}




@media screen and (max-width: 480px) {

#top_banner { width: 100%; }
	#top_banner a { display:none;}

#logo {display: none; }
#logo2 {display: block; }

#nav_1 > a, #nav_2 > a, #nav_3 > a, #nav_4 > a, #nav_5 > a { font-size: 12px; }


#subtop_img {display: none; }

#side_contents {display: none; }
#contents_wrap {width:100%; }
.subtop_banner {overflow:hidden;}
.subtop_bn1{float:left; width: 40%;}
.subtop_bn2{float:left; width: 60%}
.subtop_bn1 a {height: 50px; line-height: 50px; font-size: 14px;font-weight: bolder; }
.subtop_bn2 a {font-size: 16px; }
.subtop_no1 {display: none; }
.subtop_no2 {display: none; }
.con_nav {height: 30px; }
.connav_1 a {display:none;}
.connav_2 a {width: 100%; height: 30px; line-height: 30px; text-indent: 10px; font-size: 12px;}

#gnb {display: block; }
.contents_video1 {display:none }
.contents_video2 {display:block }


}