body { min-width:320px; }

/* 상단 버튼 */
#top_area { position:absolute; left:50%; top:6px; display:block; width:auto; margin-left:430px; box-sizing:border-box; }
#top_area > ul { display:block; list-style:none; width:auto; height:26px; margin:0; padding:0; box-sizing:border-box; overflow:hidden; }
#top_area > ul > li { display:block; float:left; box-sizing:border-box; overflow:hidden; }
#top_area > ul > li > a { display:block; height:100%; padding:0 17px; font-size:0.75em; color:#333; font-weight:400; background:url('../../images/common/bar1.gif') no-repeat left center; }
#top_area > ul > li:first-child a { background:none; }

/* 로고 */
#header { position:relative; display:block; width:auto; height:99px; margin:0 auto; background:#fff; box-shadow:0 3px 10px #eaedf2; }
#header > h1 { position:absolute; display:block; left:50%; top:34px; width:234px; margin:0; margin-left:-600px; overflow:hidden; }
#header > #btn_total { display:none; }

/* GN : 영역 */
#btn_n_close { display:none; }
#gn_area { position:absolute; display:block; right:50%; top:34px; margin-right:-600px; z-index:129; }
#gn_area ul { display:block; list-style:none; margin:0; padding:0; box-sizing:border-box; }
#gn_area ul li { display:block; box-sizing:border-box; }
#gn_area ul li a { display:block; box-sizing:border-box; }

#gn_area > ul { }
#gn_area > ul > li { position:relative; float:left; }
#gn_area > ul > li > a { width:100%; height:65px; line-height:65px; padding:0 45px; font-size:1.12em; color:#000; font-weight:400; overflow:hidden; }
#gn_area > ul > li:hover > a { font-weight:600; color:#21364f; }
#gn_area > ul > li.width > a { padding:0 50px; }

#gn_area .sn { position:absolute; display:none; width:100%; height:320px; text-align:left; background:url('../../images/common/sn_bg.png') repeat left center; overflow:hidden; }
#gn_area .sn > ul { width:100%; height:100%; margin:0; padding:10px 10px 30px 25px; }
#gn_area .sn > ul li { }
#gn_area .sn > ul li a { padding:10px 0 10px 20px; font-size:0.87em; color:#333; letter-spacing:-0.5px; }
#gn_area .sn > ul li:hover a { }
#gn_area .sn > ul li > a sub { font-size:0.62em; }
#gn_area .sn > ul > li > ul { display:none; }
#gn_area .sn2 ul li:nth-child(2) a { letter-spacing:-1px; }

#gn_bg { position:absolute; top:99px; display:none; background:url('../../images/common/sn_bg.png') repeat left center; }

/* 상단 검색 버튼 */
#top_search_area { position:absolute; display:block; right:50%; top:74px; width:50px; height:59px; margin:0; margin-right:-600px; }
#top_search_area > .btn_top_search { display:block; width:100%; height:59px; text-align:center; }
#top_search_area > .btn_top_search:after { font-family:'FontAwesome'; line-height:59px; content:'\f002'; }
#top_search_area > .btn_top_search span { font-size:0; }

#top_search_area > .btn_top_search_active { display:block; width:100%; height:59px; text-align:center; background:#2d2e33; }
#top_search_area > .btn_top_search_active:after { font-family:'FontAwesome'; line-height:59px; color:#fff; content:'\f00d'; }
#top_search_area > .btn_top_search_active span { font-size:0; }

/* 상단 검색 박스 */
#top_search_box { position:absolute; display:none; right:50%; top:133px; width:370px; height:auto; margin-right:-600px; padding:6px; background:#f4f4f4; border:5px solid #2d2e33; box-sizing:border-box; overflow:hidden; }
#top_search_box > input[type=text] { display:inline-block; width:calc(100% - 40px); height:34px; line-height:34px; text-indent:5px; border:1px solid #ccc; box-sizing:border-box; outline:0; }
#top_search_box > button { display:inline-block; width:34px; height:34px; font-size:13px; color:#fff; background:#000; border:0; outline:0; }

/* 푸터 */
#footer { display:block; padding:27px 0 30px; background:#ccc; overflow:hidden; clear:both; }
#footer .foot_logo { position:absolute; left:6px; top:35px; }
#footer .foot_box { position:relative; display:block; width:auto; max-width:1200px; margin:0 auto; padding-left:155px; box-sizing:border-box; overflow:hidden; }
#footer .foot_txt { width:auto; max-width:1200px; line-height:2.2; margin:0 auto; padding:15px 0 0; font-size:0.75em; color:#666; box-sizing:border-box; clear:both; overflow:hidden; }
#footer .foot_txt .btn_ims { display:inline-block; margin-left:5px; padding:0 5px; font-size:10px; color:#fff; background:#9ea2a9; border-radius:2px; vertical-align:middle; }
#footer .foot_btn {/*  position:absolute; right:0; top:0;  */display:block; margin:0; padding:0; list-style:none; overflow:hidden; }
#footer .foot_btn li { display:block; float:left; padding:0 11px; background:url('../../images/common/bar2.gif') no-repeat left center; }
#footer .foot_btn li:first-child {padding-left: 0;background:none; }
#footer .foot_btn li a { display:block; font-size:0.75em; color:#666;line-height: 1.7; }
#footer .foot_btn li:hover a { color:#21364f; }

.btn_all_top { position:fixed; display:block; right:0; bottom:0; width:40px; height:40px; line-height:40px; text-align:center; background:#21364f; border-radius:50%; overflow:hidden; z-index:300; }
.btn_all_top:after { font-family:'FontAwesome'; color:#fff; content:'\f062';  }
.btn_all_top span { font-size:0; }

/* 메인 프레임 */

/* 화면 사이즈 별 스타일시트 */
@media (max-width:1200px) {
	#gn_area { right:10px; margin-right:0; }
	#top_area { left:auto; right:0; margin-left:0; }
	#top_area > ul { padding-right:10px; }
	#header > h1 { left:15px; margin-left:0; }
	#footer .foot_logo { left:20px; }
}

@media (max-width:1026px) {
	#header { overflow:hidden; }
}

@media (max-width:1024px) {
	#top_area { position:relative; left:auto; top:auto; display:block; width:auto; margin-left:0; padding:10px 0 30px; background:#444; box-sizing:border-box; }
	#top_area > ul > li > a { display:none; }

	/* 로고 */
	#header { position:fixed; display:block; left:0; top:0; width:100%; min-width:100%; height:70px; margin:0; background:#fff; box-sizing:border-box; box-shadow:0 3px 5px rgba(0,0,0,0.3); overflow:hidden; z-index:130; }
	#header > h1 { position:relative; left:20px; top:22px; width:100px; margin:0; overflow:hidden; }
	#header > h1 a { display:block; }
	#header > h1 img { max-width:100%; }
	#header > #btn_total { position:absolute; display:block; right:10px; top:0; bottom:0; width:40px; height:40px; line-height:40px; margin:auto 0; text-align:center; background:#00aeef; border-radius:0.3em; cursor:pointer; }
	#header > #btn_total:after { font-family:'FontAwesome'; font-size:22px; color:#fff; content:'\f0c9'; }
	#header > #btn_total > .txt { font-size:0; }

	/* 우측 사이드 메뉴 영역 */
	.m_side_area { position:fixed; display:block; right:-220px; top:0; width:220px; height:100%; background:#fff; box-sizing:border-box; overflow-x:hidden;  z-index:9999; }
	#btn_n_close { position:absolute; display:block; right:10px; top:15px; width:12px; height:12px; background:url('../../images/common/icon_close.png') no-repeat center center; background-size:100%; z-index:129; cursor:pointer; }
	#btn_n_close > .txt { font-size:0; }

	#gn_area { position:relative; right:0; top:0; margin:0; }
	#gn_area > ul { }
	#gn_area > ul > li { float:none; border-bottom:0; }
	#gn_area > ul > li > a { width:100%; height:30px; line-height:30px; padding:0 10px; font-size:0.75em; font-weight:600; color:#333; background:url('../../images/common/btn_down.png') no-repeat 95% center; background-size:15px; border-bottom:1px solid #d8d8d8; }
	#gn_area > ul > li.width a { padding:0 10px; }
	#gn_area > ul > li:hover > a { color:#fff; background:#00aeef url('../../images/common/btn_up.png') no-repeat 95% center; background-size:15px; ; }

	#gn_area .sn { position:relative; display:none; width:100%; height:auto; background:#eee; box-shadow:none; border-bottom:1px solid #ccc;  }
	#gn_area .sn > ul { padding:0; }
	#gn_area .sn > ul > li { }
	#gn_area .sn > ul > li > a { height:30px; line-height:30px; padding:0 20px; font-size:0.75em; color:#333; background:url('../../images/common/m_bar1.gif') no-repeat 10px center; background-size:5px; border-bottom:1px solid #d8d8d8; }
	#gn_area .sn > ul > li:last-child > a { border-bottom:0; }

	#gn_area .sn > ul > li > ul { display:none; background:#4d6cd7; }
	#gn_area .sn > ul > li > ul > li { }
	#gn_area .sn > ul > li > ul > li > a { padding:0 10px; font-size:0.75em; }
	#gn_area .sn2 > ul li { display:block; float:none; width:100%; }

	/* 푸터 */
	#footer { clear:both; }
	#footer .foot_txt { font-size:0.81em; }
}

@media (max-width:800px) {
	#footer { padding:30px 20px; }
	#footer .foot_logo { position:relative; left:auto; top:auto; display:block; margin:0 0 30px; text-align:center; }
	#footer .foot_box { padding-left:0; }
	#footer .foot_btn { position:relative; right:auto; top:auto; }
	#footer .foot_btn li:first-child { padding-left:0; }
}

@media (max-width:640px) {

}

@media (max-width:480px) {

}

@media (max-width:400px) {
	#footer .foot_btn li { float:none; margin:0 0 10px; padding:0; text-align:center; background:none;}
}