@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: #71B1D1; margin: a auto; }



/* side */

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


#main_lnb { float: left; width: 100%; height: 380px; background: #71B1D1; 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: #B9DFFF;}

#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;  margin: 0 auto;  text-align: center;  }


#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; }






#contents {width: 100%; height: auto;  margin: 0 auto; text-align: center; background: #FFF;}
.subtop_banner {width: 100%; }
/*.subtop_bn1 { height: 30px;  }
.subtop_bn1 a{display: block; height: 30px; line-height: 30px; font-size: 18px; color: #FFF; }
.subtop_bn2 { height: 50px;   }
.subtop_bn2 a{display: block; height: 50px; line-height: 50px; font-size: 18px; color: #FFF; }
.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) {



#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) {


#subtop_img {display: none; }

#side_contents {display: none; }
#contents_wrap {width:100%; }
.subtop_banner { overflow:hidden;box-sizing:border-box;}
/*.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 }


}