/* html5 */
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption
{
	display: block;
}

/* 공통 */
*
{
	margin: 0;
	padding: 0;
	max-height: 99999px;
	word-break: break-all;
	-webkit-text-size-adjust: none;
}

body
{
	font-family: "Nanum Gothic", sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #333333;
	background: #272727;
}

ul
{
	list-style: none;
}

img
{
	vertical-align: middle;
	border: none;
	max-width: 100%;
}

fieldset
{
	border: none;
}

legend
{
	display: none;
}

select, input
{
	border: none;
	vertical-align: middle;
	border-radius: 0;
	background: #ffffff;
	-webkit-border-radius: 0;
}

input[ type="text" ],
input[ type="email" ],
input[ type="submit" ],
input[ type="number" ],
input[ type="password" ]
{
	-webkit-appearance: none;
	-moz-appearance: none;
}

input[ type="radio" ],
input[ type="checkbox" ]
{
	padding: 0 !important;
	vertical-align: -2px;
}

input[ type="image" ],
input[ type="radio" ]:checked
{
	border: none !important;
	background: none !important;
}

textarea
{
	resize: none;
}

address, em
{
	font-style: normal;
}

a
{
	text-decoration: none;
}

button
{
	cursor: pointer;
	border: none;
	background: none;
}

pre
{
	display: block;
	white-space: pre-wrap;
	margin: 12px 0 0 0;
	padding: 10px 10px 10px 10px;
	line-height: 22px;
	font-family: "Nanum Gothic", sans-serif;
	font-weight: 700;
	border: 1px solid #cccccc;
}

/* float을 빈 엘리먼트로 clear */
.clear
{
	clear: both;
}

.clearFix::after
{
	content: "";
	clear: both;
	display: block;
}

/* 말줄임. 블록 태그에 적용 가능 */
.drop
{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* 링크라인 */
@media screen and (max-width: 989px)
{
	*:focus
	{
		outline: 0;
	}
}

/* 스킵네비게이션 */
a.skip_nav
{
	position: absolute;
	left: -9999px;
	top: -9999px;
	z-index: 9999;
	display: block;
	width: 0;
	height: 0;
	line-height: 0;
}

a.skip_nav:focus
{
	left: 0;
	top: 0;
	width: 100%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #333333;
	border-bottom: 1px solid #cccccc;
	background: #ffffff;
}

/* top */
div#top
{
	float: left;
	width: 100%;
	border-top: 4px solid #0062c3;
	border-bottom: 1px solid #cccccc;
	background: #ffffff;
}

div#header
{
	position: relative;
	padding: 55px 0 0 0; /* h1 과 button 이 position 이기 때문에 메뉴가 표시되는 시작점을 padding 으로 설정 */
}

div#header h1
{
	position: absolute;
	left: 50%;
	top: 12px;
	z-index: 1;
	width: 128px;
	margin: 0 0 0 -64px;
	text-align: center;
}

div#header h1 a
{
	font-family: "Roboto", sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #0062c3;
}

div#header h1 a img
{
	width: 128px;
	vertical-align: top;
}

div#header button
{
	position: absolute;
	left: 10px;
	top: 15px;
	display: block;
	width: 35px;
	height: 26px;
}

div#header button img
{
	width: 35px;
	height: 26px;
}

div.nav
{
	display: none; /* Js */
	float: left;
	width: 100%;
	border-top: 1px solid #cccccc;
}

div.nav_toggle
{
	display: block; /* Js */
}

ul#gnb li
{
	float: left;
	width: 100%;
	line-height: 45px;
}

ul#gnb li a
{
	display: block;
	padding: 0 0 0 16px;
	font-size: 16px;
	color: #333333;
	border-bottom: 1px solid #cccccc;
}

ul#gnb li a.active
{
	font-weight: 700;
	color: #0062c3;
}

ul#gnb li ul
{
	display: none; /* Js */
	float: left;
	width: 100%;
	padding: 10px 0 10px 0;
	border-bottom: 1px solid #cccccc;
}

ul#gnb li ul.active
{
	display: block; /* Js */
}

ul#gnb li ul li
{
	width: 50%;
	line-height: 23px;
}

ul#gnb li ul li span.admin
{
	display: block;
	background: url("/images/common/bg_adminmenu.png") 32px center no-repeat;
}

ul#gnb li ul li a
{
	padding: 0 0 0 32px;
	text-align: left;
	font-size: 13px;
	font-weight: normal;
	color: #777777;
	border-bottom: none;
	background: url("/images/common/bg_dotted.jpg") 25px 10px no-repeat;
}

ul#gnb li ul li span.admin a
{
	padding: 0 0 0 47px;
}

ul#gnb li ul li a:hover,
ul#gnb li ul li a.active
{
	font-weight: 700;
	color: #333333;
}

ul#util
{
	float: left;
	width: 100%;
}

ul#util li
{
	float: left;
	/* width: 25%; 로그인 후 홈페이지 진입시 */
	width: 33%;
	line-height: 13px;
}

ul#util li a
{
	line-height: 13px;
}

ul#util li a,
ul#util li span
{
	display: block;
	padding: 16px 0 16px 0;
	text-align: center;
	font-size: 11px;
	color: #777777;
	border-right: 1px solid #cccccc;
}

ul#util li span strong
{
	color: #333333;
}

ul#util li.last_child a,
ul#util li.last_child span
{
	border-right: none;
}

ul#util li a:hover
{
	color: #333333;
	text-decoration: underline;
}

@media screen and (min-width: 990px)
{
	div#header
	{
		left: 50%;
		width: 970px;
		margin: 0 0 0 -485px;
		padding: 0 0 0 0;
	}

	div#header h1
	{
		left: 0;
		top: 30px;
		margin: 0 0 0 0;
		text-align: left;
	}

	div#header button
	{
		display: none;
	}

	div.nav
	{
		display: block !important;
		width: 100%;
		border-top: none;
	}

	ul#gnb
	{
		float: right;
		margin: 70px 0 0 0;
		border-top: none;
	}

	ul#gnb li
	{
		width: 100px;
		margin: 0 0 0 30px;
	}

	ul#gnb li#gnb_01
	{
		width: 151px;
	}

	ul#gnb li#gnb_02
	{
		width: 117px;
	}

	ul#gnb li#gnb_03
	{
		width: 106px;
	}

	ul#gnb li#gnb_05
	{
		width: 130px;
	}

	ul#gnb li a
	{
		padding: 0 0 0 5px;
		border-bottom: none;
	}

	ul#gnb li ul
	{
		display: none !important; /* Js */
		border-top: 1px solid #cccccc;
		border-bottom: none;
	}

	ul#gnb li ul.gnb_li_ul_toggle
	{
		display: block !important; /* Js */
	}

	ul#gnb li ul li
	{
		width: 100%;
		margin: 0 0 0 0;
		line-height: 33px;
		background: url("/images/common/bg_dotline.jpg") 0 bottom repeat-x;
	}

	ul#gnb li ul li span.admin
	{
		background: url("/images/common/bg_adminmenu.png") right center no-repeat;
	}

	ul#gnb li ul li.last_child
	{
		background: none;
	}

	ul#gnb li ul li a,
	ul#gnb li ul li span.admin a
	{
		padding: 0 0 0 10px;
		background: url("/images/common/bg_dotted.jpg") 3px 16px no-repeat;
	}

	ul#gnb li ul li a.active
	{
		border-bottom: 1px solid #333333;
	}

	ul#gnb li ul li.last_child a.active
	{
		border-bottom: none;
	}

	ul#util
	{
		position: absolute;
		right: 0;
		top: 15px;
		width: auto;
		border-bottom: none;
	}

	ul#util li
	{
		width: auto;
		padding: 0 10px 0 8px;
		background: url("/images/common/bg_dotted.jpg") right center no-repeat;
	}

	ul#util li.last_child
	{
		padding: 0 0 0 8px;
		background: none;
	}

	ul#util li a,
	ul#util li span
	{
		padding: 0 0 0 0;
		text-align: left;
		border-right: none;
	}
}

/* bottom */
div#bottom
{
	float: left;
	width: 100%;
	color: #b1aba1;
}

div#footer
{
	padding: 16px 16px 16px 16px;
	text-align: center;
}

div#footer address
{
	line-height: 20px;
}

div#footer address span
{
	display: block;
	padding: 6px 0 0 0;
}

div#footer address span a
{
	margin: 0 10px 0 0;
	color: #b1aba1;
}

p#copyright
{
	padding: 10px 0 0 0;
	line-height: 20px;
}

div#click_rate
{
	padding: 20px 0 0 0;
	line-height: 20px;
}

div#click_rate dl dt
{
	display: inline-block;
	font-weight: 700;
}

div#click_rate dl dd
{
	display: inline-block;
	padding: 0 0 0 10px;
}

div#click_rate dl dd strong
{
	color: #ffffff;
}

div#validator
{
	padding: 16px 0 0 0;
}

div#validator a
{
	margin: 0 6px 0 6px;
}

div#validator a img
{
	width: 30px;
}

div#family_site
{
	padding: 15px 0 0 0;
}

div#family_site div
{
	padding: 0 0 0 0;
	border: 1px solid #cccccc;
	border-radius: 2px;
	background: #ffffff;
}

div#family_site div button
{
	display: block;
	width: 100%;
	padding: 8px 10px 10px 10px;
	text-align: left;
	font-weight: 700;
	color: #777777;
	background: url("/images/common/bg_family_off.png") right 16px no-repeat;
}

div#family_site div button.family_div_button_toggle
{
	background: url("/images/common/bg_family_on.png") right 16px no-repeat;
}

div#family_site div ul
{
	display: none; /* Js */
	padding: 0 10px 0 10px;
	text-align: left;
}

div#family_site div ul.family_div_ul_toggle
{
	display: block; /* Js */
}

div#family_site div ul li
{
	line-height: 30px;
	background: url("/images/common/bg_dotline.jpg") 0 top repeat-x;
}

div#family_site div ul li a
{
	display: block;
	font-size: 13px;
	color: #cccccc;
}

div#family_site div ul li a:hover
{
	color: #333333;
}

@media screen and (min-width: 760px)
{
	div#family_site div
	{
		position: relative;
		left: 25%;
		width: 50%;
	}
}

@media screen and (min-width: 990px)
{
	div#footer
	{
		position: relative;
		left: 50%;
		top: 0;
		float: left;
		width: 970px;
		margin: 0 0 0 -485px;
		padding: 15px 0 15px 0;
		text-align: left;
	}

	div#validator
	{
		position: absolute;
		right: 190px;
		top: 0;
	}
	
	div#family_site
	{
		position: absolute;
		right: 0;
		bottom: 84px;
		z-index: 10000;
		width: 180px;
		padding: 0 0 0 0;
	}

	div#family_site div
	{
		left: 0;
		width: 100%;
	}
}

/* middle */
div#middle,
div#container,
div#main_contents
{
	float: left;
	width: 100%;
}

div#middle
{
	background: #ffffff;
}

@media screen and (min-width: 990px)
{
	div#container
	{
		position: relative;
		left: 50%;
		width: 970px;
		margin: 0 0 0 -485px;
	}
}

div#sidemenu
{
	display: none;
}

@media screen and (min-width: 760px)
{
	div#sidemenu
	{
		display: block;
		float: left;
		width: 20%;
		padding: 34px 0 64px 0;
		background: url("/images/common/bg_main_contents.jpg") right 0 repeat-y;
	}

	div#sidemenu dl dt
	{
		padding: 0 0 10px 14px;
		font-size: 17px;
		font-weight: 700;
		color: #0062c3;
		letter-spacing: -1px;
		border-bottom: 2px solid #0062c3;
	}

	div#sidemenu dl dd
	{
		line-height: 40px;
	}

	div#sidemenu dl dd.admin
	{
		background: url("/images/common/bg_adminmenu.png") right center no-repeat;
	}

	div#sidemenu dl dd a
	{
		display: block;
		padding: 0 0 0 14px;
		font-size: 13px;
		color: #777777;
		background: url("/images/common/bg_dotline.jpg") 0 bottom repeat-x;
	}

	div#sidemenu dl dd.active a
	{
		border-bottom: 1px solid #333333;
		background: url("/images/common/bg_sidemenu.png") right center no-repeat;
	}

	div#sidemenu dl dd a:hover,
	div#sidemenu dl dd.active a
	{
		font-weight: 700;
		color: #333333;
	}
}

@media screen and (min-width: 990px)
{
	div#sidemenu
	{
		width: 150px;
	}
}

/* main_contents */
div#main_contents
{
	position: relative;
	padding: 20px 0 40px 0;
}

@media screen and (min-width: 760px)
{
	div#main_contents
	{
		float: right;
		left: -1px;
		width: 80%;
		padding: 30px 0 50px 0;
		background: url("/images/common/bg_main_contents.jpg") 0 0 repeat-y;
	}
}

@media screen and (min-width: 990px)
{
	div#main_contents
	{
		width: 820px;
	}
}

div#main_contents div#page_position
{
	padding: 0 12px 0 12px;
}

div#main_contents div#page_position span
{
	padding: 0 4px 0 4px;
	font-size: 9px;
	vertical-align: 1px;
}

div#main_contents div#page_position strong
{
	color: #333333;
}

div#main_contents div#page_position img
{
	vertical-align: -1px;
	width: 12px;
}

@media screen and (min-width: 760px)
{
	div#main_contents div#page_position
	{
		position: absolute;
		right: 20px;
		top: 30px;
		padding: 0 0 0 0;
	}
}

@media screen and (min-width: 990px)
{
	div#main_contents div#page_position
	{
		right: 0;
	}
}

div#main_contents h2
{
	padding: 20px 12px 0 12px;
	font-size: 21px;
}

div#main_contents h2 div.editor
{
	display: inline-block;
	margin: 0 0 0 8px;
}

div#main_contents h2 div.editor input
{
	display: inline-block;
	padding: 3px 5px 4px 5px;
	font-size: 11px;
	color: #ffffff;
	border: 1px solid #000000;
	background: #333333;
	cursor: pointer;
}

@media screen and (min-width: 760px)
{
	div#main_contents h2
	{
		padding: 0 0 0 20px;
		font-size: 25px;
	}
}

@media screen and (min-width: 990px)
{
	div#main_contents h2
	{
		padding: 0 0 0 30px;
	}
}

div#main_contents div.box
{
	float: left;
	overflow: hidden;
}

div#main_contents div.clear_box
{
	clear: both;
	float: left;
	overflow: hidden;
}

div#main_contents div.box_mobile_100 { width: 100%; }
div#main_contents div.box_mobile_75 { width: 75%; }
div#main_contents div.box_mobile_50 { width: 50%; }
div#main_contents div.box_mobile_25 { width: 25%; }
div#main_contents div.box_mobile_33 { width: 33.33333333333333%; }

@media screen and (min-width: 760px)
{
	div#main_contents div.box_tablet_100 { width: 100%; }
	div#main_contents div.box_tablet_75 { width: 75%; }
	div#main_contents div.box_tablet_50 { width: 50%; }
	div#main_contents div.box_tablet_25 { width: 25%; }
	div#main_contents div.box_tablet_33 { width: 33.33333333333333%; }
}

@media screen and (min-width: 990px)
{
	div#main_contents div.box_laptop_100 { width: 100%; }
	div#main_contents div.box_laptop_75 { width: 75%; }
	div#main_contents div.box_laptop_50 { width: 50%; }
	div#main_contents div.box_laptop_25 { width: 25%; }
	div#main_contents div.box_laptop_33 { width: 33.33333333333333%; }
}

div#main_contents div.article
{
	position: relative;
	padding: 0 12px 0 12px;
}

a.newwin
{
	padding: 0 15px 0 0;
	color: #0055a9;
	background: url("/images/common/bg_newwin.jpg") right 0 no-repeat;
}

@media screen and (min-width: 760px)
{
	div#main_contents div.article
	{
		padding: 0 20px 0 20px;
	}
}

@media screen and (min-width: 990px)
{
	div#main_contents div.article
	{
		padding: 0 0 0 30px;
	}
}