@charset "utf-8";

@import url('./common.css');

/* reset */
html { min-height: 600px; min-width: 320px; }
html, body { height: 100%; margin: 0; padding: 0; }

/* layout */
body { padding: 0 20px; background: url(../img/back.jpg) #000 top center repeat fixed; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#wrap { position: relative; height: 100%; margin: 0 auto; color: #000; background-color: #fff; font-size: 13px; letter-spacing: -0.4px; }
#header { height: 150px; background: url(../img/header.jpg) center 9px no-repeat; }
#container { height: 100%; margin-top: -150px; margin-bottom: -40px; padding-top: 150px; padding-bottom: 40px; }
#contents { height: 100%; }
#contents > iframe { width: 100%; height: 100%; }
#footer { position: fixed; left: 20px; right: 20px; bottom: 0; height: 40px; margin: 0 auto; background-color: #fff; }
#wrap,
#footer { max-width: 850px; }

#gnb { padding-top: 8px; }
#gnb ul,
#gnb li { margin: 0; padding: 0; }
#gnb ul { display: table; width: 525px; max-width: 100%; margin: 0 auto; table-layout: fixed; }
#gnb li { display: table-cell; width: 20%; text-align: center; vertical-align: middle; }
#gnb li a { display: block; color: #fff; background-color: #000; font-size: 11px; cursor: help; }
#gnb li a span { display: block; border-left: 1px solid #fff; line-height: 17px; }
#gnb li:first-child a span { border-left: none; }

@media all and (max-width: 850px) { 
}

@media all and (max-width: 768px) { /* 모바일, 768px 기준 */
	html { min-height: inherit; }
	body { background-size: 48px; }
	#header { height: 70px; background-position-y: 6px; background-size: 60px; }
	#container { margin-top: -70px; padding-top: 70px; }
	#footer { left: 0; right: 0; width: 100%; height: 40px; background-color: #000; }

	#gnb ul { width: 100%; }
	#gnb li { width: 18%; height: 16px; }
	#gnb li:nth-child(3) { width: 28%; }
	#gnb li a { padding: 5px 0; }
	#gnb li a span { line-height: 7px; }
}

@media all and (max-width: 640px) { /* 모바일, 768px 기준 */
	body { padding: 0 10px; }
}