@charset "utf-8";
@import url(menu.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/* reset style [start] */
html, body, div, span, object, iframe,
h1, h3, h4, h5, h6, h7, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{margin: 0;
padding: 0;
border:0;
line-height: 1.5em;
font-size: 13px;
LIST-STYLE-TYPE: none;
list-style:none;
word-break: break-all;
font-family:'맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana; color:#555; font-size:13px;
}

h1, h2{position:absolute; left:-10000px; width:1px; height:1px; overflow:scroll;}

#accessibility { display:none}/*웹접근성_ 반복메뉴건너뛰기*/
/* 일반적으로 accessibility라는 클래스를 두어 html에서 디자인상 감추고 싶은 부분을 지정한다 */

/*html {overflow-x:hidden;}*/
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,fieldset,caption,label,input,textarea,button,select,iframe,object,header,footer,nav,hgroup,section,article,aside{margin:0;padding:0;}
img,a,span,abbr,address,pre,code,del,em,strong,sub,sup{margin:0;padding:0;}

br {letter-spacing:normal;}


input,textarea,select,button {font-size:12px;}
button {background: none repeat scroll 0 0 #FFF; border: medium none;cursor: pointer; margin: 0;padding: 0;vertical-align: middle;}
legend {margin:0;padding:0;display:none;}
img{border:0 none; /*vertical-align:top;*/}
input {vertical-align:middle;line-height:16px;}
textarea,select {vertical-align:middle;}
ul,ol,li,dl,dt,dd{list-style:none;vertical-align:top; list-style-position: inside;}
a{text-decoration:none;color:#555;}
a:hover,a:active,a:focus{color:#003fa0;}

/* vertical-align: baseline; outline: 0; ie 외 브라우저 포커싱 사라지는 문제로 제거 */

/*body {overflow-y:scroll; overflow-x:hidden;} */




/*기존있던 css */

/* tables still need 'cellspacing="0"' in the markup */
table {border-spacing:0; overflow:hidden;} /* border-collapse: collapse; ff에서 border="0" 인 경우 문제 발생 */
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;} /* font-weight:normal */

a {text-decoration:none;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}

 
caption{position:absolute; left:-10000px; width:1px; height:1px; overflow:scroll;}

/* 헤딩태그와 필드셋은 웹접근성(만)을 위한 대표적인 태그로 일반적으로는 감춘다. */

#png img {_filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

/*********CUSTOM**********/

/* 정렬 */
.fl{float:left;}
.fr{float:right;}
.cb{clear:both;}
.oh{overflow:hidden;}


/* 가운데 맞춤 & 여백 */
#wrap{width:100%;}

/* 상단 */
#top{width:100%; background:#606069;}
.top_info{width:1200px; margin:0 auto; text-align:center; clear:both; overflow:hidden;}
.top_info > ul{float:right; margin-right:115px;}
.top_info > ul > li{display:inline-block; padding:10px 0 11px 0; float:left;}
.top_info > ul > li:nth-child(3){padding-right:10px;}
.top_info > ul > li:nth-child(4){padding-left:35px; padding-right:10px; background:url('/img/fullmenu_ico.png') no-repeat 15px 15px; background-color:#47474d;}

.top_info > ul > li > a{color:#fff;}
.top_info .logo{float:left; padding-top:15px; padding-bottom:15px; margin-left:20px;}

.line{color:#ccc; padding-left:10px; padding-right:10px;}

/* 언어 */
.family{position:absolute; left:50%; top:0; margin-left:485px; z-index:10;}
.family button{height:40px; background:#252529 url('/img/arrow_select.png') no-repeat right 19px; border:none;  width:115px; text-align:left; text-indent:15px; font-size:14px; color:#fff; outline:none; font-family:'맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana;} 
.family .family_list{ background:#f8f8f8; width:113px; position:absolute; right:0; top:40px; border:1px solid #ccc;  line-height:28px; border-top:none; height:87px; display:none;}
.family .family_list a{display:block; color:#333; padding:5px 7px;}
.family .family_list a:hover{background:#ccc;}


/* 메뉴 */
.m_menu_wrap{width:100%; background:#fff;}
#m_menu{width:1200px; margin:0 auto; clear:both; padding:5px 0; text-align:center; overflow:hidden; }
#m_menu .logo{float:left; padding-top:10px;}
#m_menu .ul_wrap{float:right; width:75%;}
.m_menu_ul > li{display:inline;}
.m_menu_ul > li > a{font-size:19px;color:#333;padding:20px 0; width:16%; display:inline-block; font-family:'Noto Sans KR', '맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana; font-weight:500;}
.m_menu_ul > li > a:hover{color:#0c58ce;}


/* 서브메뉴 */
.snb_wrap{display:none; width:100%; height:238px; position:absolute; z-index:9; top:118px; background:url('/img/bg.gif') repeat left top;  background-color:#373a46;  border-top:3px solid #0c58ce;}
.snb{max-width:1200px; height:238px; margin:0 auto; overflow:hidden;}
.snb .ul_wrap{width:100%; margin:0 auto;}
.snb_ul{width:75%; float:right; list-style:none; color:#555;  text-align:center; overflow:hidden; }
.snb_ul > li{display:inline-block; width:16%; border-left:1px solid #272931; height:193px; padding:20px 0 25px 0;}

.sub_menu_li{line-height:2.1em; text-align:left;}
.sub_menu_li a, .sub_menu_li a span{font-size:13px;font-family:'맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana; color: #bcbcbc; padding-left:20px;}
.sub_menu_li a span{display:block; margin-top:-5px;}
.sub_menu_li a:hover{color: #fff; font-weight:bold; background:url('/img/snb_hover.png') no-repeat left 5px;} 
.sub_menu_li a span:hover{color:#fff;}

.hei{height:52px;}

.snb_tit{width:25%; height:238px; float:left; background:url('/img/snb_bg.png') no-repeat right 10px;}
.snb_tit > div:nth-child(1){font-size:23px;font-family:'Noto Sans KR', '맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana; color: #fff; margin-top:39px;}
.snb_tit > div:nth-child(2){font-size:13px;font-family:'맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana; color: #bcbcbc; margin-top:5px;}
.snb_tit > div:nth-child(3){margin-top:39px;}
.snb_tit > div:nth-child(3) > a{font-size:14px;font-family:'맑은고딕', 'Malgun Gothic', '나눔고딕', 'nanumgothic', '돋움', Verdana; color: #fff; border:1px solid #fff; padding:10px; display:inline-block;}


/* 중간 */
#middle{clear:both; position:relative;}


/* 하단 */
.b_wrap{background-color:#fff;  border-top:1px solid #ccc;}
.b_menu{height:22px; width:1200px; margin:0 auto; padding:12px 0;  position:relative;}
.b_menu > ul > li {float:left; padding-right:5px; overflow:hidden; color:#bebebe;} 
.b_menu > ul > li > a{color:#555;}


.info{background-color:#606069;}
.info_c{width:1200px;margin:0 auto;overflow:hidden; position:relative; padding:35px 0;}
.address, .tel{color:#fff;}
.copyright{color:#d0cfcf; margin-top:5px;}
.b_logo{position:absolute; top:30px; right:5px;}




/* 반응형 적용부분 */
@media screen and (max-width: 1230px) {

/* 상단 */
.top_info, #m_menu{display:none;}
.main_vis, .sub_vis{margin-top:72px;}


/* 하단 */
.b_menu{width:94%;}
.info_c{width:94%;}

}


@media screen and (max-width: 950px) {
	
/* 하단 */	

.b_menu{height:auto; width:96%; margin:0 auto; text-align:center; padding:20px 0; overflow:hidden;}
.b_menu > ul > li {float:none; display:inline-block;}
.info_c{text-align:center;}

.b_logo{display:none;}



}