@charset "utf-8";

body { font-size:14px; line-height:140%; font-family:"NanumGothic","나눔고딕","NanumGothicOTF", "맑은고딕", "Malgun Gothic", dotum, "돋움", "굴림", gulim, "Trebuchet MS", "Lucida Grande", "Tahoma","Helvetica","Arial", "hiragino kaku gothic pro", sans-serif; background:url(/layouts/dogong14507/image/main_bg.jpg)no-repeat fixed center top; }
input,select,textarea {font-size:12px; font-family:gulim;}
select {font-size:12px;font-family:dotum;}
label {cursor:pointer;}
a {text-decoration:none;color:#000;}
a:hover {color:#666;}

@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 400;
	src: local('※');
	src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot);
	src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
		url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff2) format('woff2'),
		url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff) format('woff'),
		url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.ttf) format('truetype');
}

html.lt-ie9 body { font-family:Malgun Gothic,dotum,"돋움",gulim,"굴림","Trebuchet MS", "Lucida Grande", "Tahoma","Helvetica","Arial", "hiragino kaku gothic pro", sans-serif; } 

.w_wrap { width:100%; margin:auto; background:url('/layouts/jsdkr14212/image/lib/wrap_bg.png') repeat-x; padding-top:0px; background-color:#f6f6f6; } 
.wrap { width:1000px; margin:auto; position: relative; } 

#header {width:100%;}
#header .headerbox { position:relative; font-family:NanumGothic,Malgun Gothic,Dotum; repeat-x; -box-shadow:0px 4px 5px #DDDDDD; z-index:100; background:rgba(43, 32, 22, 0.4);  }
#header .headerbox .headertop {border-bottom: 0px; }

#header .headerbox .logo { -height:60px; width:1000px; margin:0 auto; -padding-top:60px; position:relative; }
#header .headerbox .logo h1 {padding:0;margin:0;}
#header .headerbox .logo #top_logo a {font-size:30px;font-family:"malgun gothic";outline:none; }
#header .headerbox .logo #top_logo span { color:white; }
#header .headerbox .logo img {}
#header .headerbox .logo #top_logo { margin:0;}
#header .headerbox .logo #top_banner { position:absolute; left:850px; margin:0px 0px 22px 0px;}
#header .headerbox .logo #top_link { position:absolute; right:0px; top:0px; margin:0px 0px 22px 0px; width:300px;}
#header .headerbox .logo #top_link a { font-size:12px; -font-weight:bold; color:#fff; margin:0 10px 0; font-family:돋움, dutum; -letter-spacing:-2px; color:#662D00; }
#header .headerbox .logo #top_link a:hover { -color:#777; -text-decoration:underline; }

#header .headerbox .gnb { position:absolute; right:0; height:29px; z-index:100; }
#header .headerbox .gnb .menutops {padding:5px 0 0px 0;text-align:right;font-size:11px;font-family:dotum;letter-spacing:2px;}
#header .headerbox .gnb .menutops a {font-family:gulim;font-size:11px;letter-spacing:-1px;outline:none;}
#header .headerbox .gnb .menutops a:hover {text-decoration:underline;}
#header .headerbox .gnb .menutops img {margin-bottom:-3px;}
#header .headerbox .gnb .menutops .admin {font-size:11px;font-family:dotum;font-weight:normal;color:#FA5800;}

#header .headerbox .gnbtop { } 
#header .headerbox .gnbtop { height: 40px;position: absolute; -background:#65B649; top:50px; width : 600px; right:0px;}
#header .headerbox .gnbtop #top_menu { width: 1000px; margin: 0 auto; -background:#65B649; }

/* main gnb menu */
#header .headerbox #top_menu .menutabs { z-index:1000; } 
#header .headerbox #top_menu .menutabs ul { padding:0;margin:0; list-style-type:none;  } 
#header .headerbox #top_menu .menutabs li { padding:7px 20px 2px; height:30px; line-height:140%; position:relative; list-style:none; display:inline-block; x-border-right:solid 1px #2b83c8; margin-left:-4px; font-size:18px; font-weight:bold; } 
#header .headerbox #top_menu .menutabs li:hover, 
#header .headerbox #top_menu .menutabs li.on { -background:#008C00; } 
#header .headerbox #top_menu .menutabs li:first-child { margin-left:0; } 
#header .headerbox #top_menu .menutabs li:last-child { border-right:0; } 
#header .headerbox #top_menu .menutabs li a { color:#fff; font-size:14pt; font-weight:normal; padding:10px 0; font-family:NanumGothic; }
#header .headerbox #top_menu .menutabs li a:hover { -color:#777; -text-decoration:underline; }
#header .headerbox #top_menu .menutabs li ul { padding:10px; list-style-type:none; display:none; position:absolute; top:35px; left:10px; width:300px; z-index:100;  } 
#header .headerbox #top_menu .menutabs li ul.on { display:block; }
#header .headerbox #top_menu .menutabs li ul li {background:none;padding:2px 0px 0 0px; margin-right:10px; border-bottom:0px; font-size:14px; line-height:160%; }
#header .headerbox #top_menu .menutabs li ul li a {font-weight:normal; font-size:14px; padding:0 5px 0 0; }
#header .headerbox #top_menu .menutabs li ul li a:hover { text-decoration:underline;  }
#header .headerbox #top_menu .menutabs .open {x-background:url('./image/arr_minus.gif') left 9px no-repeat; }
#header .headerbox #top_menu .menutabs .on { x-color:#e52a4d; }

html.lt-ie8 #top_menu .menutabs li {
	float:left; display:block;
}

/* main menu pallet */
#menupalette { z-index:1000; width:100%; border-top:1px solid #e1e1e1; display:none; position:absolute; 
	background:#fafafa; margin:0 auto; overflow:hidden; } 
#menupalette ul {position:relative; height:170px; padding:0;margin:0;list-style-type:none; }
#menupalette li {position:absolute; padding:0px 0px 30px; line-height:140%; font-size:20px; position:relative; list-style:none; display:none; }
#menupalette li.on { display:block; }
#menupalette li a {font-weight:bold; color:#444; font-size:16px; padding:0 10px 0; padding-bottom:10px;}
#menupalette li .title { position:absolute; width:230px; height:160px; background:url('./image/menupal_title_bg.png') right 0px no-repeat; }
#menupalette li .title h1 { padding:10px; font-size:36px; margin-bottom:5px; color:#555; }
#menupalette li .title h2 { padding:10px; font-size:12px; margin-top:0px; margin-right:20px; font-family:gulim, gothic; font-weight:normal; color:#444; line-height:150%; }
#menupalette li ul { position:absolute; 
	width:800px; height:140px; padding:10px; list-style-type:none; left:230px; z-index:100; display:none; }
#menupalette li ul { display:block; }
#menupalette li ul li { display:block; padding:2px 0px 0 0px; margin-right:0px; min-height:20px; border-bottom:0px; font-size:14px; line-height:160%; background:none; }
#menupalette li ul li a { font-weight:bold; font-size:13px; padding:0 5px 0 0; }
#menupalette li ul li a:hover { text-decoration:underline;  }
#menupalette li ul li ul { display:block; position:absolute; left: 120px; top:0; margin:0; padding:0; }
#menupalette li ul li ul li { display:inline-block; float:left; width:100px; padding-left:8px; background:url('./image/menupal_sub_menu2_bg.png') left 6px no-repeat; }
#menupalette li ul li ul li a { font-size:12px; xfont-family:gulim, gothic; font-weight:normal; }
#menupalette .open {x-background:url('./image/arr_minus.gif') left 9px no-repeat; }
#menupalette .on {color:#e52a4d;}

/* ------------------------- */

#container { }
#container .mainbox {height:320px;padding:25px 0 25px 0; }
#container .subbox { }

.wrap-content { clear:both; } 
.wrap-content .main_top { height:400px; } 
.wrap-content .main_bottom { with:100%; background:rgba(40,40,40,0.7); } 

.content {
clear: both;
position: relative;
width: 100%; 
height: auto;
}

.topredline { x-width:100%; x-border-top:#bc003a 3px solid; height:0px; background-color: #F3F3F3; } 
.topblueline { x-width:100%; border-top:#1cb4d5 5px solid; height:0px; }

#squarebox { height:300px; padding: 20px }
#squarebox .vbox { float: left; width: 240px; }
#squarebox .vbox .tt { font-weight: 600; font-family: "malgun gothic"; font-size: 20px; color: #444; padding: 0 0 10px 0; margin: 0; }
#squarebox .vbox .ws { color: #2466BD; padding: 0 0 1px 0; }
#squarebox .vbox p { width: 230px; padding-top: 15px; line-height: 140%; font-size: 11px; color: #666; }
#squarebox .mbox { float: left; width: 600px; }

/* ------------------------- */

#footer {margin:15px 0 0 0 0; clear:both; -border-top:#d9d9d9 solid 1px; 
font-family:NanumGothic,Malgun Gothic,Dotum; background-color:#1d1106; clear:both; -background:url(image/footer_bg.png) repeat-x; }
#footer select { font-family:NanumGothic,Malgun Gothic,Dotum; }

#footer .footer {padding:15px 0 15px 0;}
#footer .footer .slinks {float:left; }
#footer .footer .slinks2 {float:right;}

#footer .footer .elink { padding: 0px 0 10px 20px;
    font-size: 12px;
    font-family: dotum;
    color: #FFFFff;
    -font-weight: bold;
}
#footer .footer .elink a {font-family:gulim;font-size:12px;letter-spacing:-1px;color:#666666;}
#footer .footer .elink a:hover {text-decoration:underline;}
#footer .footer .copyright {font-size:11px;font-family:arial;color:#999999;}
#footer .footer .powered {float:right;}
#footer .footer .kimsq {padding:10px 0 10px 0;font-size:11px;font-family:arial;color:#c0c0c0;}

#footer .footer .sitelinks { padding:0px 0 10px 0; width:300px; font-size:12px;font-family:dotum; text-align:right; }
#footer .footer .sitelinks select { height:25px; font-size:13px; border:1px solid gray; } 
#footer .footer .sitelinks select#languages { width:90px; } 
#footer .footer .sitelinks select#relatedsites { width:150px; } 
#footer .footer .snslinks { padding:10px 0 10px 0; width:300px; font-size:12px;font-family:dotum; text-align:right; }


/* -- BBS common ----------------------- */
#bbsview { font-family:NanumGothic,Malgun Gothic,Dotum; } 

/* 

*/
.width100 {	width:100px !important; }
.width150 { width:150px !important; }
.width180 {	width:180px !important; }
.width200 { width:200px !important; }
.width210 { width:210px !important; }
.width230 { width:230px !important; }
.width250 { width:250px !important; }
.width300 { width:300px !important; }
.width400 { width:400px !important; }
.width500 { width:500px !important; }

.tabbutton1 {
	font-size:12px;
	font-family:Arial;
	font-weight:bold;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(38%, #ededed), color-stop(67%, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 38%, #dfdfdf 67% );
	background:-ms-linear-gradient( top, #ededed 38%, #dfdfdf 67% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.tabbutton1:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(38%, #dfdfdf), color-stop(67%, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 38%, #ededed 67% );
	background:-ms-linear-gradient( top, #dfdfdf 38%, #ededed 67% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.tabbutton1:active {
	position:relative;
	top:1px;
}


.content-top {
	margin-top:40px; 
	margin-bottom:40px; 
	min-height:80px; 
}

div.tabbar { /* 소개 메뉴 1단 메뉴 */
	width:798px; x-height:36px; 
	margin-top:30px; border:1px solid #e6e6e6; background-color:#fbfbfb; 
}
div.tabbar ul {
	list-style:none; margin:0; padding:0; 
}
div.tabbar ul li {
	float:left; display:inline-block; 
	margin:0px; height:26px; padding:5px 15px 5px; border-right:1px solid #e6e6e6; xborder-bottom:1px solid #e6e6e6; xborder-top:1px solid #e6e6e6; 
	x-background-color:#f8fbfa;
	background:url(image/tabbar_li_bg.png) left center repeat;
}
div.tabbar ul li.on {
	font-weight:bold;
}

a.tabbutton { 
	margin:4px 0; display:block; 
}

div.tabbar2 {  /* 소개 메뉴 2단 메뉴 */
	x-border:1px solid #e6e6e6; 
	border-top:none; background-color:#7dc8e9; 
	padding-left:15px; 
}
div.tabbar2 ul {
	list-style:none; margin:0; padding:0; 
}
div.tabbar2 ul li {
	float:left; display:inline-block; 
	margin:0px; height:26px; padding:2px 10px 2px;
	background:url(image/tabbutton2_bg.png) left center no-repeat ;
}
div.tabbar2 ul li.on {
	font-weight:bold;
}
div.tabbar2 ul li:last-child {
	background:none; 
}
a.tabbutton2 { 
	margin:4px 0; display:block; 
	font-size:12px; 
	color : white;
}

div.tabbar3 {	/* 백문백답 1 메뉴 */ 
	margin-top:30px; border:1px solid #d2ddda; 
	padding: 10px 15px 5px; 
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
	background: #fafafa;
}
div.tabbar3 ul {
	list-style:none; padding:0; 
	x-background-color:#f8fbfa; 
}
div.tabbar3 ul li {
	float:left; display:inline-block; 
	height:26px; padding:2px 5px 2px;
	x-background-color:#f8fbfa;
}
div.tabbar3 ul li.on {
	font-weight:700;
}


div.tabbar4 { /* pre/next */
	margin-top:30px; margin-bottom:30px; 
	border:none; list-style:none; padding:0; 
	padding: 0px 5px 0px; 
}
div.tabbar4 ul li {
	float:left; display:inline-block; 
	height:26px; xpadding:2px 5px 2px;
	background-color:#f8fbfa;
}
div.tabbar4 ul li.on {
	font-weight:700;
}
a.tabbutton4 { 
	margin:4px 0; display:block; 
	font-size:14px; 
}
a.tabbutton4:before { 
}

.tabbar5 { /* 목차 */
	float:right; 
	width:214px;
	background:url(image/box/tabbar5_bg.png) repeat-y;
	margin-left:30px;
}
.tabbar5 .tabbar5-top { 
	height:29px;
	background:url(image/box/tabbar5_top.png) repeat-y;
}
.tabbar5 .tabbar5-bottom { 
	height:31px;
	background:url(image/box/tabbar5_bottom.png) repeat-y;
}
div.tabbar5 ul {
	list-style:none; 
	padding:0; 
}
div.tabbar5 ul li {
	display:block; 
	height:20px; 
	margin:0 11px 0;
	padding-left:5px;
	xbackground-color:#f8fbfa;
}
div.tabbar5 ul li:hover {
	background-color:#DDDDDD;
}
div.tabbar5 ul li.on {
	font-weight:700;
	background-color:#A4A4A4;
}
div.tabbar5 ul li.on a {
	color:white;
}
div.tabbar5 ul li.on a:hover {
	color:#ddd;
}
a.tabbutton5 { 
	margin:4px 0; display:block; 
	font-size:14px; 
}
a.tabbutton5:before { 
	content:" · ";
}

div.tabbar6 {	/* 백문백답 2 메뉴 */ 
	margin-top:10px; 
	padding: 5px 15px 5px; 
	border:1px solid #d2ddda; border-top:none; background-color:#e7efed; 
	padding-left:5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;	
}
div.tabbar6 ul {
	list-style:none; 
	padding:0px;
}
div.tabbar6 ul li {
	float:left; display:inline-block; 
	height:15px; padding:2px 5px 2px;
	x-background-color:#f8fbfa;
}
div.tabbar6 ul li.on {
	font-weight:700;
}
a.tabbutton6 { 
	margin:0 5px 0; display:block; 
	font-size:14px; 
}

.box_round1 {
	border:1px solid #d2ddda; padding:20px; background-color:#f8fbfa; 
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

/**************************************************************/
/* from pure css ( http://purecss.io/buttons/ ) */

.pure-button {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* csslint unqualified-attributes:false, outline-none:false */ 
.pure-button {
	font-size: 100%;
	*font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
	*overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
	padding: 0.5em 1.5em 0.5em;
	color: #444; /* rgba not supported (IE 8) */
	color: rgba(0, 0, 0, 0.80); /* rgba supported */
	*color: #444; /* IE 6 & 7 */
	border: 1px solid #999;  /*IE 6/7/8*/
	border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
	background-color: #E6E6E6;
	text-decoration: none;
	border-radius: 2px;
	/* Transitions */
	-webkit-transition: 0.1s linear -webkit-box-shadow;
	-moz-transition: 0.1s linear -moz-box-shadow;
	-ms-transition: 0.1s linear box-shadow;
	-o-transition: 0.1s linear box-shadow;
	transition: 0.1s linear box-shadow;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
	background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
	background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
	background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
	background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
	outline: 0;
}
.pure-button-active,
.pure-button:active {
	box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
	border: none;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	filter: alpha(opacity=40);
	-khtml-opacity: 0.40;
	-moz-opacity: 0.40;
	opacity: 0.40;
	cursor: not-allowed;
	box-shadow: none;
}

.pure-button-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
    padding: 0;
    border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
    background-color: rgb(0, 120, 231);
    color: #fff;
}

.pure-button-success,
a.pure-button-success,
.pure-button-error,
a.pure-button-error,
.pure-button-warning,
a.pure-button-warning,
.pure-button-secondary,
a.pure-button-secondary {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pure-button-success {
	background: rgb(28, 184, 65); /* this is a green */
}

.pure-button-error {
	background: rgb(202, 60, 60); /* this is a maroon */
}

.pure-button-warning {
	background: rgb(223, 117, 20); /* this is an orange */
}

.pure-button-secondary {
	background: rgb(66, 184, 221); /* this is a light blue */
}

.pure-button-xsmall {
	font-size: 70%;
}

.pure-button-small {
	font-size: 85%;
}

.pure-button-large {
	font-size: 110%;
}

.pure-button-xlarge {
	font-size: 125%;
}

/**************************************************************/

a.tooltip1 { outline:none; }
a.tooltip1 strong { line-height:30px; }
a.tooltip1:hover {  } 
a.tooltip1 span { 
	z-index:10; display:none; padding:14px 20px; 
	margin-top:-10px; margin-left:10px;
	width:170px; line-height:16px;
	opacity:0.85;
} 
a.tooltip1.hover span, a.tooltip1:hover span { 
    display:inline; position:absolute; color:#111; 
    border:1px solid #DCA; background:#fffAF0; 
	font-size:12px; 
} 
.callout { z-index:20; position:absolute; top:30px; border:0; left:-12px; }

/*CSS3 extras*/
a.tooltip1 span
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
}

/**************************************************************/
/* Document Styles */

.dojeon {
	border:1px solid #EEEEEE; 
	padding:10px 20px 10px; 
	background-color:#FFFCF0; 
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.dojeon h3 {
	font-size: 16px; 
	color:#B30000;
	xpadding:0.5em 0 0.5em;
	font-weight:700;
}
.dojeon ul {
	list-style:none;
	padding-left:0;
}
.dojeon li {
	padding:5px;
}

.messagebox {
	margin: 1.3em 0 1.3em;
	padding: 1.3em;
	x-font-family: Consolas, 'Liberation Mono', Courier, monospace;
	color: #333;
	background: rgb(250, 250, 250);
	border: 1px solid #eee;
}

.copyright-notice { color:#777; }
.copyright-notice a { color:#777; }