@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */

/* 
A CSS framework begins here. We don't recommend modifying framework. You can override these properties by defining the styles outside the framework.
여기서 부터 CSS 프레임웍 입니다. 프레임웍 수정을 권장하지 않습니다. 스킨을 변형할 때 프레임웍 밖에서 선언된 속성으로 덮어쓰기 할 수 있습니다. 
*/

/* Layout */
#xe{ position:relative;}
#container{ position:relative;}
#header{ position:relative; clear:both; *zoom:1;}
#header:after{ content:""; display:block; clear:both;}
#body{ position:relative; clear:both; *zoom:1;}
#body:after{ content:""; display:block; clear:both;}
#content{ position:relative; text-align:justify; *zoom:1;}
#content:after{ content:""; display:block; clear:both;}
#footer{ position:relative; clear:both; *zoom:1;}
#footer:after{ content:""; display:block; clear:both;}

/* Layout Width */
.fixed #container{ width:960px; margin-left:auto; margin-right:auto;}
.liquid #container{ width:80%; margin-left:auto; margin-right:auto;}
.hybrid #container{ width:80%; margin-left:auto; margin-right:auto;}

/* Layout Align */
.aLeft #container{ margin-left:0;}
.aRight #container{ margin-right:0;}

/* Header Extension */
#header .extension{ position:relative; *zoom:1; margin:0; padding:0;}
#header .extension:after{ content:""; display:block; clear:both;}
#header .extension .section{ position:relative;}
#header .extension ul{ position:relative;}
#header .extension li{ position:relative; display:inline; list-style:none;}

/* Footer Extension */
#footer .extension{ position:relative; *zoom:1;}
#footer .extension:after{ content:""; display:block; clear:both;}
#footer .extension *{ margin:0; padding:0;}
#footer .extension .section{ position:relative;}
#footer .extension ul{ position:relative;}
#footer .extension li{ position:relative; display:inline; list-style:none;}

/* Body Extension */
#body .extension{position:relative; *zoom:1; display:none;}
#body .extension:after{ content:""; display:block; clear:both;}
#body .extension .section{position:relative;}

/* ----- Fixed 1 Column Layout ----- */
.fixed .c #body .e1{ display:block; margin-right:-30px;}
.fixed .c #body .e1 .section{ float:left; width:300px; margin-right:30px;}

/* ----- Liquid 1 Column Layout ----- */
.liquid .c #body .e1{ display:block; margin-right:-3.4%;}
.liquid .c #body .e1 .section{ float:left; width:30%; margin-right:3.3%;}

/* ----- Hybrid 1 Column Layout ----- */
.hybrid .c #body .e1{ display:block; margin-right:-30px;}
.hybrid .c #body .e1 .section{ float:left; width:240px; margin-right:30px;}

/* ----- Fixed 2 Column Layout ----- */
.fixed .ce #body .e1,
.fixed .ec #body .e1{ width:220px;}
.fixed .ce #body #content,
.fixed .ec #body #content{ width:720px;}
.fixed .ce #body #content{ float:left;}
.fixed .ec #body #content{ float:right;}
.fixed .ce #body .e1,
.fixed .ec #body .e1{ display:block;}
.fixed .ce #body .e1{ float:right; clear:right;}
.fixed .ec #body .e1{ float:left; clear:left;}

/* ----- Liquid 2 Column Layout ----- */
.liquid .ce #body .e1,
.liquid .ec #body .e1{ width:23%;}
.liquid .ce #body #content,
.liquid .ec #body #content{ width:75%;}
.liquid .ce #body #content{ float:left;}
.liquid .ec #body #content{ float:right;}
.liquid .ce #body .e1,
.liquid .ec #body .e1{ display:block;}
.liquid .ce #body .e1{ float:right; clear:right;}
.liquid .ec #body .e1{ float:left; clear:left;}

/* ----- Hybrid 2 Column Layout ----- */
.hybrid .ce #body{ padding-right:280px;}
.hybrid .ec #body{ padding-left:280px;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ width:260px;}
.hybrid .ce #body #content,
.hybrid .ec #body #content{ width:100%;}
.hybrid .ce #body #content{ float:left;}
.hybrid .ec #body #content{ float:right;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ display:block;}
.hybrid .ce #body .e1{ float:right; clear:right; margin-left:-260px; right:-280px;}
.hybrid .ec #body .e1{ float:left; clear:left; margin-right:-260px; left:-280px;}

/* ----- Fixed 3 Column Layout ----- */
.fixed .cee #body .e1,
.fixed .cee #body .e2,
.fixed .ece #body .e1,
.fixed .ece #body .e2,
.fixed .eec #body .e1,
.fixed .eec #body .e2{ display:block; width:200px;}

.fixed .cee #body #content,
.fixed .ece #body #content,
.fixed .eec #body #content{ width:520px;}

.fixed .cee #body #content{ float:left; margin-right:20px;}
.fixed .ece #body #content{ float:left; margin-right:-100%; left:220px;}
.fixed .eec #body #content{ float:right;}

.fixed .ece #body .e1,
.fixed .eec #body .e1{ float:left; margin-right:20px;}

.fixed .cee #body .e1,
.fixed .eec #body .e2{ float:left;}

.fixed .cee #body .e2,
.fixed .ece #body .e2{ float:right;}

/* ----- Liquid 3 Column Layout ----- */
.liquid .cee #body .e1,
.liquid .cee #body .e2,
.liquid .ece #body .e1,
.liquid .ece #body .e2,
.liquid .eec #body .e1,
.liquid .eec #body .e2{ display:block; width:20%;}

.liquid .cee #body #content,
.liquid .ece #body #content,
.liquid .eec #body #content{ width:56%;}

.liquid .cee #body #content{ float:left; margin-right:2%;}
.liquid .ece #body #content{ float:left; margin-right:-100%; left:22%;}
.liquid .eec #body #content{ float:right;}

.liquid .ece #body .e1,
.liquid .eec #body .e1{ float:left; margin-right:2%;}

.liquid .cee #body .e1,
.liquid .eec #body .e2{ float:left;}

.liquid .cee #body .e2,
.liquid .ece #body .e2{ float:right;}

/* ----- Hybrid 3 Column Layout ----- */
.hybrid .cee #body .e1,
.hybrid .cee #body .e2,
.hybrid .ece #body .e1,
.hybrid .ece #body .e2,
.hybrid .eec #body .e1,
.hybrid .eec #body .e2{ display:block; width:220px;}

.hybrid .cee #body{ padding-right:480px;}
.hybrid .ece #body{ padding-left:240px; padding-right:240px;}
.hybrid .eec #body{ padding-left:480px;}

.hybrid .cee #body #content,
.hybrid .ece #body #content,
.hybrid .eec #body #content{ width:100%;}

.hybrid .cee #body #content,
.hybrid .ece #body #content{ float:left; margin-right:-100%;}
.hybrid .eec #body #content{ float:right;}

.hybrid .ece #body .e1,
.hybrid .eec #body .e2{ float:left; left:-240px; margin-right:-220px;}
.hybrid .eec #body .e1{ float:left; left:-480px; margin-right:-220px;}

.hybrid .cee #body .e1,
.hybrid .ece #body .e2{ float:right; left:240px; margin-left:-220px;}
.hybrid .cee #body .e2{ float:right; left:480px; margin-left:-220px;}

/* 
A CSS framework ends here. We don't recommend modifying framework. You can override these properties by defining the styles outside the framework.
여기까지 CSS 프레임웍 입니다. 프레임웍 수정을 권장하지 않습니다. 스킨을 변형할 때 프레임웍 밖에서 선언된 속성으로 덮어쓰기 할 수 있습니다. 
*/


/* Element Reset */
body { font-family: Dotum, AppleGothic, Tahoma, Sans-serif; font-size:12px; margin:0; background-color:#ffffff; color:#000; height:100%}
address { font-style:normal; float:left; margin-top: 10px}
legend{ position:absolute; width:0; height:0; font-size:0; line-height:0; visibility:hidden;}
fieldset{ border:0; padding:0; margin:0;}

/* Global Class */
.inputText{ border:1px solid #9c9c9c; border-right-color:#c2c2c2; border-bottom-color:#c2c2c2; color:#666; font-family:Tahoma;}
.inputTextarea{ border:1px solid #9c9c9c; border-right-color:#c2c2c2; border-bottom-color:#c2c2c2; color:#666; font-family:Tahoma; line-height:1.5;}
.inputCheck{ width:13px; height:13px;}
.inputRadio{ width:13px; height:13px;}


/* Skip To Content */
a.skipToContent{ display:block; position:relative; clear:both; overflow:hidden; width:1px; height:1px; text-decoration:none !important; margin:0 0 -1px 0;}
a.skipToContent:hover,
a.skipToContent:active,
a.skipToContent:focus{ width:100%; height:auto; margin-bottom:-23px; padding:5px 0;}


/* Layout */
.fixed #container { width:960px; }
#header{ padding:0; height:380px; }
#body{ padding:0; height:100%; margin:0;}
.fixed .ce #body #content,
.fixed .ec #body #content{ width:595px;}
.fixed .ce #body .e1,
.fixed .ec #body .e1{ width:340px;}
#footer{ background:url(../images/default/bg_footer.gif) no-repeat 0 0; margin:0px 0 0 0; padding:15px 15px 30px 20px;}

/* Header */
#header a{ text-decoration:none;}
#header a:hover,
#header a:active,
#header a:focus{ text-decoration:underline;}

#header h1 { margin:0; padding:0; position:absolute; top:3px; left:0;}
#header h1 a{ color:#000;}

#header ul#topmenu { position:absolute; display:block; margin:0; padding:0; top:16px; right:0px; font-size:11px; z-index:10;}
#header ul#topmenu a { color:#999999 }
#header ul#topmenu li{ position:relative; float:left; padding:0 5px 0 8px; background:url(../images/default/bg_topmenu.gif) no-repeat; list-style-type:none;  z-index:12;}
#header ul#topmenu li.first{ background:none;}
#header ul#topmenu li.log a{ display:block; }
#header ul#topmenu li.profile .memberProfile{ display:none; position:absolute; top:15px; left:0px; padding:20px; background:#fff; border:2px solid #737373;}
#header ul#topmenu li.profile .memberProfile.active{ display:block;}
#header ul#topmenu li.profile .memberProfile .authorName{ margin:0 0 8px 0; font-size:16px; font-weight:bold; color:#333; white-space:nowrap;}
#header ul#topmenu li.profile .memberProfile ul{ margin:0; padding:15px 15px 5px 15px; list-style:none; border:1px solid #dddddd; background:#fcfcfc;}
#header ul#topmenu li.profile .memberProfile li{ float:none; white-space:nowrap; margin:0 0 10px 0; padding:0 0 0 10px; background:url(../images/default/bulletB.gif) no-repeat left center;}
#header ul#topmenu li.profile .memberProfile li a{ background:none; color:#333; text-decoration:none;}
#header ul#topmenu li.profile .memberProfile li a:hover,
#header ul#topmenu li.profile .memberProfile li a:active,
#header ul#topmenu li.profile .memberProfile li a:focus{ text-decoration:underline;}
#header ul#topmenu li .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../images/default/buttonCloseX.gif) no-repeat center center;}
#header ul#topmenu li .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}
#header ul#topmenu li.register a{ display:block; }
#header ul#topmenu li.help a{ display:block; }


#isSearch { position:absolute; top:37px; height:29px; right:0; width:400px; z-index:8;}
#isSearch .searchOrder { display:none;}
#isSearch .checked { position:absolute; left:0; top:0; text-align:left; display:block; padding:5px 0 0 5px; width:64px; height:14px; background:url(../images/default/bgSearchTerm.gif) no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#ffffff; line-height:normal;}
*:first-child+html #isSearch .checked { top:1px; }
#isSearch div.target { position:relative; float:left; width:112px; height:29px; background:url(../images/default/bg_search_target.gif) no-repeat; }
#isSearch div.target a.button { position:relative; display:block; top:9px; _top:10px; left:28px; width:80px; height:14px; text-decoration:none; color:#000; background:transparent none repeat scroll 0 0; border:0 none; font-size:11px; font-family:Dotum; margin:0; padding:0; text-align:center; color:#999999}
#isSearch div.target ul.target_list { background:#ffffff none ; border:1px solid #ffffff; display:none; position:absolute; right:4px; top:25px; padding:0; margin:0 }
#isSearch div.target ul.target_list li { list-style:none; text-align: center; }
#isSearch div.target ul.target_list li a {  color:#000; display:block; font-family:Dotum; font-size:11px; line-height:normal; padding:0 8px; text-decoration:none; width:61px; }
#isSearch div.target ul.target_list li a:hover { color:#ff0000;}
#isSearch .searchtext { position:relative; float:left; width:219px; height:29px; background:url(../images/default/bg_search_text.gif) no-repeat; }
#isSearch .searchtext.notext { background:url(../images/default/bg_search_notext.gif) no-repeat; }
#isSearch .inputText { position:relative; vertical-align:middle; top:7px; left:31px; font-size:11px; font-family:Dotum; width:165px;  height:12px; padding: 3px; color:#000000; background:transparent none repeat scroll 0 0; border:0 none; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { position:relative; float:left; vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}

#header .mainmenu { position:relative; top:72px; margin:0; height:70px; }
#header .extension{ position:relative; top:70px; float:none; clear:both; padding:0; *zoom:1; }

#body .extension { padding-top:1px; }
#body .extension a{ text-decoration:none;}
#body .extension a:hover,
#body .extension a:active,
#body .extension a:focus{ text-decoration:underline;}
#body .extension .section{ margin: 9px 0 12px 21px;}
#body .extension .section h2{ height:36px; display:block; text-indent:-1000em; margin:0;}
#body .extension .section a{ color:#666;}

#body .extension .section a.more2 { position:absolute; display:block; left:270px; top:0;}

#body .extension .section.login h2 { background:url(../images/default/hd_login.gif) no-repeat; }
#body .extension .section.notice h2 { background:url(../images/default/hd_notice.gif) no-repeat; }
#body .extension .section.data h2 { background:url(../images/default/hd_data.gif) no-repeat; }
#body .extension .section.closeup h2 { background:url(../images/default/hd_closeup.gif) no-repeat; }
#body .extension .section.gallery h2 { background:url(../images/default/hd_gallery.gif) no-repeat; }
#body .extension .section.link h2 { display:block; height:10px; padding:0; margin:0; font-size:10px }
#body .extension .section.link ul { position:relative; display:block; background-color:#8DC63F; padding:0; margin:0; }
#body .extension .section.link ul li { position:relative; display:block; list-style: none; padding:0; margin:0; height:63px; overflow:hidden; white-space: nowrap;}
#body .extension .section.link ul li.first { margin-bottom:8px; _margin-bottom:7px;}
#body .extension .section.link ul li a { display:block; padding:0; margin:0; line-height:10px;}


#footer .family_site { display:inline; float:right; margin-right:10px;}




.fixed #body #content { width:595px; padding:20px 10px;}
.fixed #body #content p { padding:0px; margin:0px}

/* modalWindow */
.loginWindow{ display:none; position:fixed; left:0; top:0; _position:absolute; width:100%; height:100%; z-index:100; } 
.loginWindow.open{ display:block;}
.loginWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity:30); }
.loginWindow .loginLayer{ position:absolute; width:289px; top:120px; left:50%; padding:30px; border:2px solid #737373; margin:0 0 0 -175px; background:#fff;}
.loginWindow .loginLayer form{ display:none; *zoom:1; margin:0 0 29px 0;}
.loginWindow .loginLayer form:after{ content:""; display:block; clear:both;}
.loginWindow .loginLayer form legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;}
.loginWindow .loginLayer fieldset{ border:0; margin:0; padding:0;}
.loginWindow .loginLayer.loginTypeA form.typeA,
.loginWindow .loginLayer.loginTypeB form.typeB{ display:block;}
.loginWindow .loginLayer dl{ margin:0; padding:0 0 1px 0;}
.loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;}
.loginWindow .loginLayer dd{ margin:0 0 21px 0;}
.loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; border:1px solid #ddd; font:20px Tahoma; color:#333;}
.loginWindow .loginLayer .inputText:focus{ background-color:#fbfbfb;}
.loginWindow .loginLayer .inputCheck{ margin:0 3px 0 0; width:13px; height:13px; vertical-align:middle;}
.loginWindow .loginLayer.loginTypeA .inputText{ background-image:url(../images/default/bgLoginText.gif); background-repeat:no-repeat; background-position:right top;}
.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../images/default/bgOpenidText.gif); background-repeat:no-repeat; background-position:right top; padding:6px 9px 0 35px; width:243px;}
.loginWindow .loginLayer .keep{ margin:0; float:left; font-size:11px; line-height:normal; white-space:nowrap;}
.loginWindow .loginLayer .keep label{ color:#555;}
.loginWindow .loginLayer .loginButton,
.loginWindow .loginLayer .loginButton input{ position:relative; border:0; color:#fff; font-size:12px; font-weight:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../images/default/buttonLoginAction.gif); background-repeat:no-repeat; overflow:visible;}
.loginWindow .loginLayer .loginButton{ float:right; background-position:0 0; right:11px;}
.loginWindow .loginLayer .loginButton input{ left:11px; background-position:right 0; padding:0 30px 0 45px; cursor:pointer;}
.loginWindow .loginLayer .help{ margin:0 -30px -30px -30px; padding:14px 0; list-style:none; text-align:center; background:#fafafa; border-top:1px solid #f2f2f2;}
.loginWindow .loginLayer .help li{ display:inline; font-size:11px; line-height:11px; padding:0 0 0 5px;}
.loginWindow .loginLayer .help li.join{ font-weight:bold;}
.loginWindow .loginLayer .help li.find{ border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer .help li.typeA,
.loginWindow .loginLayer .help li.typeB{ display:none; border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer.loginTypeA .help li.typeA,
.loginWindow .loginLayer.loginTypeB .help li.typeB{ display:inline;}
.loginWindow .loginLayer .help li a{ text-decoration:none; color:#555;}
.loginWindow .loginLayer .help li a:hover,
.loginWindow .loginLayer .help li a:active,
.loginWindow .loginLayer .help li a:focus{ text-decoration:underline;}
.loginWindow .loginLayer .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../images/default/buttonCloseX.gif) no-repeat center center;}
.loginWindow .loginLayer .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}