@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; background:url(../images/top_bg.gif) no-repeat;}
#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;}
#footer address{ text-align:center;}

/* Layout Width */
.fixed #container{ width: 964px; 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;}
#header .extension:after{ content:""; display:block; clear:both;}
#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 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 ÇÁ·¹ÀÓ¿÷ ÀÔ´Ï´Ù. ÇÁ·¹ÀÓ¿÷ ¼öÁ¤À» ±ÇÀåÇÏÁö ¾Ê½À´Ï´Ù. ½ºÅ²À» º¯ÇüÇÒ ¶§ ÇÁ·¹ÀÓ¿÷ ¹Û¿¡¼­ ¼±¾ðµÈ ¼Ó¼ºÀ¸·Î µ¤¾î¾²±â ÇÒ ¼ö ÀÖ½À´Ï´Ù. 
*/

/**
* KS Jade
**/
/* no.1 5ea À§Á¬ */
#no1post { float:left; width:962px; height:188px; background:#fff; border:1px solid #ccc; margin-bottom:0px;  }
#no1post #grayRect { width:960px; height:186px; background:#eee; margin-top:1px; margin-left:1px;}
#no1post #grayRect .postBox { float:left; width:960px; margin:0 auto; padding:10px 0 0 7px; }
#no1post #grayRect .postBox { _padding-left:0; }
#no1post #grayRect .postBox .postWidget { float:left; width:175px; margin:0 7px; background:none; }

.shadow { float:left; width:100%; height:23px; margin:0 auto; background:url(../images/shadow.gif);}

/* no.2 widget */
#no2post { float:left; width:964px; height:115px; background:url(../images/no2Bg.gif) #f4f4f4 no-repeat; padding:30px 0;}
#no2post ul { list-style:none; padding:0; margin:0;}
#no2post ul li{ float:left; width:320px; height:115px; }

/* nwp ·Î±×ÀÎ */
#nwpLogin { position:relative; float:left; top:3px; background:none; width:964px; }
#nwpLogin img { position:absolute; }

/* no.3 webzine style */
#no3post { float:left; width:964px; }
#no3post .LLBox { float:left; width:455px; height:263px; background:#fff; border:solid 1px #d6d6d6; padding:10px 10px; margin-bottom:10px; }
#no3post .LLBox { _padding-bottom:5px; }
#no3post .LBox { float:left; width:445px; height:115px; background:#fff url(../images/boxBg.gif) repeat-x; border:solid 1px #d6d6d6; padding:10px 15px; margin-bottom:10px; }
#no3post .LBox { _padding-bottom:5px; }
#no3post .RBox { position:relative; float:right; width:445px; height:115px; background:#fff url(../images/boxBg.gif) repeat-x; border:solid 1px #d6d6d6; padding:10px 15px; margin-bottom:10px; }
#no3post .RBox { _padding-bottom:5px; }
#no3post .RBox .rssImg { position:absolute; float:left; } 
#no3post .RBox .member { position:absolute; float:left; left:165px; width:290px; }

#no3Bg { position:relative; float:left; width:964px; height:30px; top:-10px;}
#no3Bg .LboxBg { position:absolute; float:left; width:477px; height:30px; background:url(../images/no3Bg.gif) no-repeat; }
#no3Bg .RboxBg { float:right; width:477px; height:30px; background:url(../images/no3Bg.gif) no-repeat; }

/* no.4 ÃÖ±Ù±Û À§Á¬ */
#newarticle { float:left; width:964px; margin-bottom:12px; }
#newarticle .news { float:left; width:315px; margin-right:10px; } 
#newarticle .news3 { float:right; width:315px; }
#newarticle .newstitle { width:315px; height:50px; background:#111 url(../images/no4Bg.gif) no-repeat; color:#eee; text-align:center; padding-top:10px; } 
#newarticle #centerNews { float:left; width:314px; }
#newarticle #centerNews .titleBar { width:312px; height:50px; background:#111 url(../images/no4Bg.gif) no-repeat; color:#eee; text-align:center; padding-top:10px; }
#newarticle #centerNews .commentBox { padding-left:0px; padding-top:0px; border-bottom:2px dotted #ddd; }
#newarticle #centerNews .memberBox { padding-left:0px; margin-top:3px; }

/* no.5 ¸â¹ö °¶·¯¸®widgetBox */
#memberGallery { float:left; width:962px; height:188px; background:#fff; border:1px solid #ccc; margin-bottom:30px;  }
#memberGallery #gray { width:960px; height:186px; background:#eee; margin-top:1px; margin-left:1px; }
#memberGallery #gray .widgetBox { width:924px; height:166px; margin:0 auto; padding-left:20px; }
#memberGallery #gray .widgetBox .titleBar { width:922px; height:24px; padding-top:10px; margin-bottom:10px; }
#memberGallery #gray .widgetBox .titleBar a { font:bold .9em verdana; color:#444; text-decoration:none; }
#memberGallery #gray .widgetBox .gallerywidget { margin-left:10px; }
#memberGallery #gray .widgetBox .gallerywidget { xpadding-left:0; }

/* no.6 inspiration */
#inspiration { float:left; width:964px; border-bottom:2px solid; border-color:#333;  margin-bottom:20px; }
#inspiration .inspiTitle { background:url(../images/no6Bg.gif) no-repeat left top; width:964px; height:48px; padding-top:12px; text-align: center;}
#inspiration .inspiTitle a { font: 1em verdana; color:#fff; text-decoration:none; }
#inspiration .inspiTitle a:hover { color:#f60; }