@import url(common.css);
@import url(main.css);
@import url(sub.css);
@import url(contents.css);

@media screen and (min-width:1100px)
{ 
	.container {width:1100px; padding:0; }
	.row {margin-left:0}	
}


#wrap #header .container{position:relative; padding:0; }
#header h1 {position:relative; top:45px; display:inline-block; z-index:12;}
	.top_menu {position:absolute;right:0; top:20px;height:32px; z-index:11;}
	.top_menu a {float:left; display:block; height:32px; line-height:32px; margin-left:3px; padding:0 8px 0 29px; border:1px solid #c7c7c7; border-radius:5px; transition: all .3s ease;}
	.top_menu a:hover {border-color:#999}
	.top_menu a.tm01 {background:url('../images/icon_login.png') no-repeat 8px 8px}
	.top_menu a.tm02 {background:url('../images/icon_join.png') no-repeat 8px 8px}
	.top_menu a.tm03 {background:url('../images/icon_mypage.png') no-repeat 8px 8px} 
	.top_menu a.tm04 {padding:0 8px; text-align:center}
	.top_menu a.tm05 {background:url('../images/icon_logout.png') no-repeat 8px 8px}
	.top_menu a.tm06 {background:url('../images/icon_modify.png') no-repeat 8px 8px} 
	.top_menu span {float:left; height:32px; line-height:32px; margin-right:10px; padding-left:28px; background:url('../images/contents/images/icon_user.png') no-repeat left 4px}
	
/* °øÅë */
div#nav_box { position:relative; }

ul#mqNavi > li > a { display:block; }

div#mqCheck { position:absolute; top:-99999px; }

@media all and (min-width:1px) and (max-width:799px) {
	#wrap {min-width:360px}
	div#mqCheck { z-index:1; }
	.top_menu a.last {display:none;}
}
@media all and (min-width:1px) and (max-width:500px) {
	.top_menu span {display:none;}
}

/* ¸ð¹ÙÀÏ & ÅÂºí¸´ */
@media all and (min-width:1px) and (max-width:1099px) {

	#header {position:relative; height:80px; background-color:#fff; border-bottom:1px solid #0c0c0c; }
	#header h1 {position:relative; top:24px; left:15px; width:46%; display:inline-block; z-index:12;}

	.top_menu {right:15px;}

	p#mqNaviToggle { position:absolute; width:38px; height:38px; top:-10px; right:10px; z-index:104; }
	p#mqNaviToggle > a { width:100%; height:100%; display:block; background:url('../images/btn_navi_display.png') no-repeat; }
	p#mqNaviToggle > a.enter { background:url('../images/btn_navi_displayOff.png') no-repeat; }

	ul#mqNavi { width:160px; height:100%; position:fixed; top:0; left:-160px; z-index:103; padding-top:56px; overflow-y:auto; background:url('../images/mobile_logo.png') #1e304c center 22px no-repeat; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
	ul#mqNavi > li > a { background-color:#2b3c5a; border-bottom:1px solid #273853; background-position:center -16px; font-size:1em; font-weight:bold; text-align:center; color:#fff; padding-top:10px; padding-bottom:10px; }
	ul#mqNavi > li > a:focus,
	ul#mqNavi > li > a:hover,
	ul#mqNavi > li > a.enter { background-color:#c84c42; }
	ul#mqNavi > li > ul { background-color:#162841; }
	ul#mqNavi > li > ul > li { border-bottom:1px solid #273853; }
	ul#mqNavi > li > ul > li > * { display:block; color:#ddd; text-align:center; padding-top:8px; padding-bottom:8px; }
	ul#mqNavi > li > ul > li > *:focus,
	ul#mqNavi > li > ul > li > *:hover { background-color:#111f33; color:#e6ffaf; }
	ul#mqNavi > li:last-of-type { margin-bottom:50px; }
	ul#mqNavi > li > ul > li a {font-size:0.9em}

	div#nav_box > nav > div.logo { padding:16px 0; text-align:center; }

	div#shortCut { background-color:rgba(185,203,118,0.5); }
	div#shortCut > div#icon_box > ul { width:100%; overflow:hidden; }
	div#shortCut > div#icon_box > ul > li > a { height:130px; padding-top:20px; display:block; text-align:center; color:#fff; }

	#header > div.gnb_nav > div#nav_box > nav { position:relative; }

	nav a.tel {position:absolute; top:-10px; right:95px; width:38px; height:38px; background:url('../images/icon_m_tel.png') no-repeat center top; }
	nav a.tel span {display:none}
	nav a.add {position:absolute; top:-10px; right:53px;width:38px;  height:38px; background:url('../images/icon_m_add.png') no-repeat center top; }
	nav a.add span {display:none}

}

@media all and (min-width:800px) and (max-width:1100px) {

	div#mqCheck { z-index:2; }
}

/* µ¥½ºÅ©Å¾ */
@media all and (min-width:1100px) {
	/* header */
	#header {position:relative; height:123px; background-color:#fff; border-bottom:1px solid #05af50; }

	#header > div.gnb_nav {clear:both; position:relative; top:0; z-index:11;}

	#header > div.gnb_nav > div#nav_box { width:100%; height:auto; /*border-bottom:2px solid #0c0c0c;*/ background-color: #fff;}
	#header > div.gnb_nav > div#nav_box > div.line { position:absolute; top:78px; left:0; border-bottom:1px solid #05af50; width:100%; }
	#header > div.gnb_nav > div#nav_box > nav { position:relative; overflow:hidden; max-width:1100px; width:100%; margin-left:auto; margin-right:auto; }
	#header > div.gnb_nav > div#nav_box > nav > div { float:left; }
	#header > div.gnb_nav > div#nav_box > nav > div.logo { display:none; padding:20px 0;  }
	#header > div.gnb_nav > div#nav_box > nav > div.menu { float:left; margin-left:300px }
	
	ul#mqNavi { overflow:hidden; width:auto; text-align:center; }
	ul#mqNavi > li { float:left; }
	ul#mqNavi > li > a { width:170px; display:block; padding:23px 0 ; font-size:1.3em; font-weight:500; color:#3a3a3a; border-bottom:5px solid #fff; }
	ul#mqNavi > li > a.enter { border-bottom:5px solid #235a91; color:#235a91; }
	ul#mqNavi > li > ul { width:170px; padding-top:13px; height:220px; border-right:1px solid #ccc; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;  }
	ul#mqNavi > li:first-of-type > ul { border-left:1px solid #ccc; }
	ul#mqNavi > li > ul > li { text-align:left; }
	ul#mqNavi > li > ul > li > a { display:block; padding:6px 9px; line-height:18px; font-size:0.9em; color:#444; letter-spacing:-0.09em;  transition: all .1s ease;}
	ul#mqNavi > li > ul > li > a.enter { color:#fff; }
	ul#mqNavi > li > ul > li > a:focus,
	ul#mqNavi > li > ul > li > a:hover { background-color:#235a91; color:#fff; font-weight:600}

	nav a.tel {position:absolute; top:0px; right:150px; height:80px; background:url('../images/icon_tel.png') no-repeat center top; padding-top:42px; }
	nav a.tel span {font-size:0.9em}
	nav a.tel:hover {text-decoration:underline} 
	nav a.add {position:absolute; top:0px; right:30px; height:80px; background:url('../images/icon_add.png') no-repeat center top; padding-top:42px; }
	nav a.add span {font-size:0.9em}
	nav a.add:hover {text-decoration:underline} 

	
	div#mqCheck { z-index:3; }

	p#mqNaviToggle { display:none; }
	a#toggleNS { display:none; }
}

#footer {clear:both; width:100%; padding:50px 0; background-color:#fafafa; border-top:1px solid #e6e6e6; text-align:center }
	#footer .topBt {position:fixed;bottom:40px;right:-70px;width:68px;height:68px;text-align:center;background:#454545;z-index:3500;transition:all .3s ease}
	#footer .topBt i {color:#999; margin-top:12px}
	#footer .topBt span {display:block;color:#fff;font-size:14px;}
	#footer .topBt.over {right:30px;}


	@media all and (max-width:1000px) {
		#footer .banner_box > div {display:none}
		#footer .banner { width:100%;}
		#footer .banner li {margin-right:16px; }
	}

	#footer .bottom_logo {margin-bottom:30px; padding:0; }
	#footer .bottom_content {margin:0; padding:0; color:#888; font-size:0.9em }
	#footer .bottom_menu {margin-bottom:10px; }
	#footer .bottom_menu a {display:inline; margin-right:18px; line-height:20px; color:#efefef; font-weight:600; }
	#footer .bottom_content .info {padding:0 4%; margin-bottom:15px}
	#footer .bottom_content .info span {margin:0 10px; }



	@media all and (max-width:1200px)
	{ 
		#footer .topBt {bottom:160px;}		
		#footer .bottom_logo {margin-bottom:30px;}
	}

	@media all and (max-width:799px) {
		#footer .topBt {width:60px;height:60px;}
		#footer .topBt i {margin-top:0}

		#footer .bottom_logo {width:65%; margin:0 auto 30px}

		#footer .bottom_content .info span {font-size:0.9em;}
		#footer .copyright {font-size:12px}
	}

	@media all and (max-width:420px){
		#footer .topBt {width:40px;height:40px;bottom:260px;}
		#footer .topBt.over {right:10px;}
		#footer .topBt span {width:20px;height:0;overflow:hidden;font-size:1px;}
	}