/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* 기본 구조 - 수정하지 마십시오
------------------------------------------------------------------------------*/
html,
body { margin:0; padding:0; height:100%; }
#wrap { margin:0 auto; width:990px; height:100%; }

/* float 해제 */
#wrap { position:relative; clear:both; *zoom:1; }
#warp:after{ content:""; display:block; clear:both;}

header.main { position:relative; clear:both; *zoom:1; z-index:4; }
header.main:after{ content:""; display:block; clear:both;}

nav.main { position:relative; clear:both; *zoom:1; z-index:3; }
nav.mainr:after{ content:""; display:block; clear:both;}

nav.sub { position:relative; clear:both; *zoom:1; }
nav.sub:after{ content:""; display:block; clear:both;}

section.promo { position:relative; clear:both; *zoom:1; }
section.promo:after{ content:""; display:block; clear:both;}

article.main { position:relative; overflow:hidden; *zoom:1; }

footer.sub { position:relative; *zoom:1; clear:both }
footer.sub:after{ content:""; display:block; clear:both;}

footer.main { position:relative; *zoom:1; }
footer.main:after{ content:""; display:block; clear:both;}

aside.s1,
aside.s2 { display:none; }

/* 사이드바 1을 좌측에 정렬 */
.sc aside.s1 { display:block; float:left; margin-right:10px }

/* 사이드바 1을 우측에 정렬 */
.cs aside.s1 { display:block; float:right; margin-left:10px; }

/* 사이드바 1,2를 좌측에 정렬 */
.ssc aside.s1 { display:block; float:left; margin-right:10px; }
.ssc aside.s2 { display:block; float:left; margin-right:10px; }

/* 사이드바 1,2를 우측에 정렬 */
.css aside.s1 { display:block; float:right; margin-left:10px; }
.css aside.s2 { display:block; float:right; margin-left:10px; }

/* 사이드바 1,2를 양쪽에 위치시키고 컨텐츠부를 가운데로 정렬 */
.scs aside.s1 {display:block; float:left; margin-right:10px; }
.scs aside.s2 { display:block; float:right; margin-left:10px; }

/* 요소별 높이 100% 설정 */
*html div.wrap.main-container { height:100%; }
div.wrap.main-container { width:980px; padding:20px 0 0 0; min-height:100%; }

div.wrap.main-container { margin:-296px auto -140px auto; }
#equal { padding:296px 0 140px 0; }

#wrap.use-submenu div.wrap.main-container { margin:-354px auto -140px auto; }
#wrap.use-submenu #equal { padding:354px 0 140px 0; }

#wrap.use-promo div.wrap.main-container { margin:-723px auto -140px auto; }
#wrap.use-promo #equal { padding:723px 0 140px 0; }

#wrap.use-both div.wrap.main-container { margin:-781px auto -140px auto; }
#wrap.use-both #equal { padding:781px 0 140px 0; }

/* 요소 토글링 */
nav.sub { display:none; }
#wrap.use-submenu nav.sub,
#wrap.use-both nav.sub { display:block; }

section.promo { display:none; }
#wrap.use-promo section.promo,
#wrap.use-both section.promo { display:block; }


/* 기본 스타일링
------------------------------------------------------------------------------*/
a, a:visited { text-decoration: none; }
a:hover,
a:active,
a:focus { text-decoration:none; }

body { font-family:돋움, Dotum, Arial, Helvetica, sans-serif, AppleGothic; font-size:9pt; }
div.bg-container { background:#f4f4f4 url(../img/default/bg3.jpg) repeat-x center top; overflow:hidden; }
.site_logo { display:block; position:absolute; bottom:0; left:5px; }
.noSpace { padding:0!important; }

/* 사이드 바 */
aside.s1 { width:280px; }
aside.s2 { width:152px; }

/* 위젯 박스 */
section.style01,
section.style02,
section.style03,
section.style04 { margin-bottom:10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }

section.style01 { position:relative; padding:0; *zoom:1; }
section.style01 h4.title { display:block; margin:0 0 10px 0; padding:0 0 8px 0; color:#666; border-bottom:1px solid #ddd; }
section.style01 article.contents { padding:0; }

section.style02 { display:block; position:relative; background-color:#fff; border:1px solid #d2d2d2; color:#888; *zoom:1; }
section.style02 h4.title { display:block; margin:0; padding:10px 15px 10px 15px; *padding:12px 15px 8px 15px; color:#888; border-bottom:1px solid #d2d2d2; }

section.style03 { position:relative; padding:0; background-color:#ebebeb; border:1px solid #ddd; color:#888; *zoom:1;}
section.style03 h4.title { display:block; margin:0; padding:10px 15px 10px 15px; *padding:12px 15px 8px 15px; color:#666; border-bottom:1px solid #ddd; }

section.style04 { position:relative; padding:0; background-color:#ff0000; border:3px solid #ffcc00; color:#fff; *zoom:1; }
section.style04 h4.title { display:block; margin:0; padding:10px 15px 10px 15px; *padding:12px 15px 8px 15px; color:#ffcc00; border-bottom:1px solid #ffcc00; }

section article.contents { overflow:hidden; margin:0; padding:15px; } 
section article.contents a,
section article.contents a:visited { color:#66bced; }
section article.contents a:hover { color:#000; }
section article.contents a:active { color:#ff6600; }


/* 메인 메뉴 (pxe_droppy_menu)
------------------------------------------------------------------------------*/
nav.main { position:relative; margin:0 0 20px 0; width:980px; height:70px; }
 #nav { display: block; margin: 0; padding: 0; position:relative; z-index:1; }
  #nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
  #nav { display: block; }
  #nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
  * html #nav ul { line-height: 0; } /* IE6 "fix" */
  	#nav ul a { zoom: 1; } /* IE6/7 fix */
    #nav ul li a { float: none; }
    #nav ul ul { top: 0; }
    
/* Essentials - configure this */
#nav ul { width: 160px; top:65px; }
#nav ul ul { left: 158px; top:-1px; }

/* Everything else is theming */
#nav { height:70px; background:url(../img/default/mainmenu/menubar_left.png); }
#nav span.menuR { position:absolute; width:10px; height:70px; top:0; right:-10px; background:url(../img/default/mainmenu/menubar_right.png); text-indent:-1000em; }
#nav *:hover { background-color: none; }
#nav li a { position:relative; margin:0 20px; _margin:0 10px; padding:13px 0 0 0; height:47px; text-align:center; color:#999; display:block; font:12px 굴림, 돋움, Helvetica, sans-serif; z-index:10; float:left; top:5px; font-weight:normal; text-decoration:none; font-weight:bold; line-height:38px; outline:0; selector-dummy:expression(this.hideFocus=true); }
#nav li a img { position:relative; top:-2px; }
#nav li a:hover { color:#000; }
*:first-child+html #nav li a img { top:-6px; }
#nav li a .vr { position:absolute; width:2px; height:60px; top:0; right:-20px; z-index:10; background: url("../img/default/mainmenu/vr.png"); display:block; }
#nav li.back { background: url("../img/default/mainmenu/lava.png") no-repeat center top; height:52px; z-index:8; position: absolute; top:39px; }
#nav li.on a { color:#000; }
#nav li.hover a { background:url(../img/menu_hover.gif) no-repeat; color:#000; }

#nav ul {  }
#nav ul li { margin-bottom:-1px; border:1px solid #dfdfdf; background:#f9f9f9; color:#505050 }
#nav ul a { color:#999!important; display:block; margin:0; padding:9px 0 0 12px!important; width:146px!important; height:21px!important; font-size:11px; letter-spacing:-1px; text-align:left; background:none !important; top:0!important; font-weight:normal!important; line-height:120%!important; }
#nav ul a:hover { background-color:#fff !important; color:#6b95b2!important; }
#nav ul .on { background:#fff url(../img/default/mainmenu/btn_arrow.gif) no-repeat 138px center; }

/* #nav ul a { border-bottom: none; } - I also needed this for IE6/7 */

/*검색 창*/
fieldset#pxe-search { display:block; position:absolute; margin:0; padding:0; border:none; width:153px; height:62px; top:-9px; right:12px; background:url(../img/default/search/search.png); z-index:1; }
fieldset#pxe-search legend { display:none; }
fieldset#pxe-search .searchOrder { display:none;}
fieldset#pxe-search #schall_stx { background:url(../img/default/search/bg_inputtext.gif) left 10px no-repeat; }
fieldset#pxe-search .inputText { vertical-align:middle; position:absolute; top:32px; left:12px; border:none; margin:0; padding:0; width:110px; height:28px; color:#7d7d91; line-height:27px; }
fieldset#pxe-search .inputText.focus { background:none!important; }
fieldset#pxe-search .inputText.focusnot { background:none!important; }
fieldset#pxe-search .submit { margin:0; padding:0; position:absolute; top:40px; right:12px; border:none; }


/* 옵션 메뉴 - 우측 상단 메뉴
------------------------------------------------------------------------------*/
header.main { width:990px; margin:0 auto 22px auto; }
header.main .wrap { height:124px; }

header.main .option-menu { position:absolute; margin:0; padding:0; right:0; bottom:10px; list-style:none; }
header.main .option-menu li { float:left; height:45px; display:block; }
header.main .option-menu li.olb { width:11px; background:url(../img/default/omenu/olb.png); }
header.main .option-menu li.ocb { background:url(../img/default/omenu/ocb.png) repeat-x; }
header.main .option-menu li.orb { width:14px; background:url(../img/default/omenu/orb.png); }
header.main .option-menu span.tw_bird { position:absolute; width:44px; height:37px; text-indent:-1000em; background:url(../img/default/omenu/bird.png); top:-30px; right:40px; display:block; }

header.main .option-menu .optionMenuList { position:relative; margin:0; padding:0; top:5px; list-style:none; }
header.main .option-menu .optionMenuList li { float:left; height:30px; font:12px 굴림,Gulim,AppleGothic; display:inline; position:relative; margin:0; padding:0 16px; text-align:center; white-space:nowrap; }
header.main .option-menu .optionMenuList li a { position:relative; top:10px; text-shadow:0 1px 0 #e0e0e0; z-index:1; outline:0; selector-dummy:expression(this.hideFocus=true); *zoom:1; }
header.main .option-menu .optionMenuList li .vr { position:absolute; width:2px; height:30px; top:0px; right:0px; z-index:0; background: url("../img/default/omenu/bu_bar.gif"); display:block; }
header.main .option-menu .optionMenuList li a,
header.main .option-menu .optionMenuList li a:visited { color:#666; text-decoration:none; }
header.main .option-menu .optionMenuList li.twitter { background:none; padding:0 16px; }

header.main .option-menu .optionMenuList li.login,
header.main .option-menu .optionMenuList li.logout,
header.main .option-menu .optionMenuList li.signup,
header.main .option-menu .optionMenuList li.profile { width:55px; }


/* 회원정보 팝업 창*/
header.main .option-menu .optionMenuList li.profile .memberProfile { position:absolute; margin:0; padding:0; width:154px; height:208px; top:0; left:7px; color:#797771; background:url(../img/default/omenu/bg_profile.png) no-repeat left top; display:none; *zoom:1; overflow:hidden; }
header.main .option-menu .optionMenuList li.profile .memberProfile ul{ position:relative; margin:0; padding:0; top:55px; left:10px; list-style:none; }
header.main .option-menu .optionMenuList li.profile .memberProfile li { float:none!important; margin:0; padding:0; height:22px; }

header.main .option-menu .optionMenuList li.profile .memberProfile li a { display:block!important; margin:0; padding:6px 0 4px 22px; *padding:6px 0 6px 22px; font-size:11px; letter-spacing:-1px; text-align:left!important; color:#666; text-decoration:none; text-shadow:none; filter:none; background:url(../img/default/omenu/dots.gif) no-repeat left 0px; }
header.main .option-menu .optionMenuList li.profile .memberProfile li a:hover { background:url(../img/default/omenu/dots.gif) no-repeat left -22px; }
header.main .option-menu .optionMenuList li.profile .memberProfile li a:hover,
header.main .option-menu .optionMenuList li.profile .memberProfile li a:active,
header.main .option-menu .optionMenuList li.profile .memberProfile li a:focus{ text-decoration:none; }
header.main .option-menu .optionMenuList li.profile .memberProfile .close { position:absolute; cursor:pointer; border:0; padding:0; top:50px; right:8px; width:40px; height:10px; background:url(../img/default/omenu/btn_x.gif); }


/* 로그인 팝업 창*/
header.main .option-menu .optionMenuList .loginLayer { position:absolute; margin:0; padding:76px 0 20px 0; width:218px; height:177px; top:0; left:6px; color:#797771; background:url(../img/default/omenu/bg_login.png) no-repeat left top; display:none; overflow:hidden; text-align:center; }
header.main .option-menu .optionMenuList .loginLayer .inner { width:218px; margin:0 0 15px 0; padding:0; }
header.main .option-menu .optionMenuList .loginLayer .inner_oid { width:218px; margin:0; padding:0; }
header.main .option-menu .optionMenuList .loginLayer form{ *zoom:1; position:relative; overflow:hidden; }

header.main .option-menu .optionMenuList .loginLayer #commonLogin{ height:58px; margin:0; padding:0; }
header.main .option-menu .optionMenuList .loginLayer #openidLogin{ height:27px; margin:0; padding:0; }

header.main .option-menu .optionMenuList .loginLayer input { font-size:9pt; }

/*ID*/
header.main .option-menu .optionMenuList .loginLayer input.user_id { position:absolute; top:0; left:12px; width:117px; height:18px; padding:8px 5px 0 5px; color:#505050; border:none; background-image:url(../img/default/omenu/bg_input.gif); background-color:transparent; vertical-align:top; background-position:0 0 }
:root header.main .option-menu .optionMenuList .loginLayer input.user_id { width:117px; height:23px; padding:3px 5px 0 5px; }
header.main .option-menu .optionMenuList .loginLayer input.user_id.focus { background:url(../img/default/omenu/bg_input_focus.gif)!important; }
header.main .option-menu .optionMenuList .loginLayer input.user_id.focusnot { background:url(../img/default/omenu/bg_input_notfocus.gif)!important; }

/*Password*/
header.main .option-menu .optionMenuList .loginLayer input.user_pw { position:absolute; top:30px; left:12px; width:117px; height:18px; padding:8px 5px 0 5px; color:#505050; border:none; background-image:url(../img/default/omenu/bg_input.gif); background-color:transparent; vertical-align:top; background-position:0 -26px!important }
:root header.main .option-menu .optionMenuList .loginLayer input.user_pw { width:117px; height:23px; padding:3px 5px 0 5px; }
header.main .option-menu .optionMenuList .loginLayer input.user_pw.focus { background:url(../img/default/omenu/bg_input_focus.gif)!important; }
header.main .option-menu .optionMenuList .loginLayer input.user_pw.focusnot { background:url(../img/default/omenu/bg_input_notfocus.gif)!important; }

header.main .option-menu .optionMenuList .loginLayer .saveIDinfo { position:absolute; top:5px; *top:1px; left:147px; *left:141px; }
header.main .option-menu .optionMenuList .loginLayer .saveIDinfo .inputCheck { position:relative; top:2px; *top:1px; left:0; *left:2px; }
header.main .option-menu .optionMenuList .loginLayer label { color:#555; font-size:11px; letter-spacing:-1px; }
header.main .option-menu .optionMenuList .loginLayer button.submit { width:52px; height:26px; background-image:url(../img/default/omenu/login_btn_submit.gif); background-color:transparent; border:none; margin:0; cursor:pointer; position:absolute; top:30px; left:146px; text-indent:-1000em; }

header.main .option-menu .optionMenuList .loginLayer .help { margin:15px 0 0 6px; padding:0; list-style:none; *zoom:1; overflow:hidden; }
header.main .option-menu .optionMenuList .loginLayer .help li { position:relative; margin:0; padding:0 5px 0 6px; display:inline; line-height:14px; background:url(../img/default/omenu/vr_extra.gif) no-repeat 0 2px; white-space:nowrap }
header.main .option-menu .optionMenuList .loginLayer .help li a { text-decoration:none; color:#999; text-shadow:none; top:0; filter:none; font-size:11px; letter-spacing:-1px; }
header.main .option-menu .optionMenuList .loginLayer .help li.first { background:none }
header.main .option-menu .optionMenuList .loginLayer .help li a:hover,
header.main .option-menu .optionMenuList .loginLayer .help li a:active,
header.main .option-menu .optionMenuList .loginLayer .help li a:focus{ text-decoration:underline;}

header.main .option-menu .optionMenuList .loginLayer .close { position:absolute; cursor:pointer; border:0; padding:0; top:50px; right:8px; width:40px; height:10px; background:url(../img/default/omenu/btn_x.gif); }


/* 상단 서브 메뉴 (pxe_hmenu)
------------------------------------------------------------------------------*/
nav.sub { margin:0 auto 25px auto; width:980px; }

/* 경로표시기*/
nav.sub .menuPath { position:relative; width:965px; height:33px; margin:0; background:url(../img/default/hmenu/bg_bread.png) no-repeat; }
nav.sub .menuPath a,
nav.sub .menuPath a:visited { float:left; display:inline-block; height:22px; padding-top:10px; padding-right:20px; margin-right:10px; background:url(../img/default/hmenu/icon_bread_arrow.gif) no-repeat right top; color:#666; font-size:9pt; }
nav.sub .menuPath a:hover { color:#000; }
nav.sub .menuPath a.home { width:25px; }
nav.sub .menuPath .terminator { position:absolute; display:block; width:15px; height:33px; top:0; right:-15px; background:url(../img/default/hmenu/tm_bread.png) no-repeat; text-indent:-1000em; }
nav.sub .menuPath span.pageTitle { float:left; display:inline-block; height:22px; padding-top:10px; padding-right:20px; margin-right:10px; color:#666; font-size:9pt; font-weight:bold; }

/* 가로 2차 메뉴*/
nav.sub .hnb { position:relative; width:965px; height:33px; margin:0; background:url(../img/default/hmenu/bg_hnb.png) no-repeat; }
nav.sub .hnb .terminator { position:absolute; display:block; width:15px; height:33px; top:0; right:-15px; background:url(../img/default/hmenu/tm_bread.png) no-repeat; text-indent:-1000em; }

nav.sub .hnb ul { margin:0; padding:0; list-style:none; }
nav.sub .hnb ul li { float:left; }
nav.sub .hnb ul li a { float:left; display:inline-block; height:22px; margin:0; padding:11px 15px 0 15px; *padding:9px 15px 0 15px; text-decoration:none; background:url(../img/default/hmenu/vr.gif) no-repeat right top; font-size:9pt; }
nav.sub .hnb ul li a,
nav.sub .hnb ul li a:visited { color:#666; }
nav.sub .hnb ul li a:hover { color:#000; }
nav.sub .hnb ul li.on a { color:#000; font-weight:bold; }


/* Promotion - 상단 콘트롤러 (pxe_promo)
------------------------------------------------------------------------------*/
section.promo { width:980px; margin:0 auto 20px auto; }
section.promo #promo_control { position:relative; width:970px; height:40px; background:url(../img/default/promo/bg_promo_control.png) }
section.promo #promo_control span.promo_control_right { position:absolute; right:-10px; width:10px; height:40px; background:url(../img/default/promo/bg_promo_control_right.png); text-indent:-1000em; }

section.promo #tab_controler { margin:0; padding:0; height:40px; list-style:none; overflow:hidden; }
section.promo #tab_controler li { float:left; text-indent:-1000em; }
section.promo #tab_controler li a { display:block; height:40px; }

section.promo #tab_controler li.static { width:95px; height:40px; background:url(../img/default/promo/tab_controler.gif); }

section.promo #tab_controler li.image a { width:41px; background:url(../img/default/promo/tab_controler.gif) -95px 0; }
section.promo #tab_controler li.image a:hover { background:url(../img/default/promo/tab_controler.gif) -95px -40px;  border-left:1px solid #94bf1d;}
section.promo #tab_controler li.image a.selected { background:url(../img/default/promo/tab_controler.gif) -95px -40px;  border-left:1px solid #94bf1d;}

section.promo #tab_controler li.slide a { width:41px; background:url(../img/default/promo/tab_controler.gif) -136px 0; }
section.promo #tab_controler li.slide a:hover { background:url(../img/default/promo/tab_controler.gif) -136px -40px; border-left:1px solid #94bf1d; }
section.promo #tab_controler li.slide a.selected { background:url(../img/default/promo/tab_controler.gif) -136px -40px; border-left:1px solid #94bf1d; }

section.promo #tab_controler li.movie a { width:41px; background:url(../img/default/promo/tab_controler.gif) -177px 0; }
section.promo #tab_controler li.movie a:hover { background:url(../img/default/promo/tab_controler.gif) -177px -40px; border-left:1px solid #94bf1d; }
section.promo #tab_controler li.movie a.selected { background:url(../img/default/promo/tab_controler.gif) -177px -40px; border-left:1px solid #94bf1d; }

section.promo #tab_controler li.mp3 .mp3btn { width:41px; height:40px; display:block; background:url(../img/default/promo/tab_controler.gif) -218px 0; cursor:pointer; }
section.promo #tab_controler li.mp3 .mp3btn:hover { background:url(../img/default/promo/tab_controler.gif) -218px -40px; border-left:1px solid #94bf1d; }

/* Promotion - 중간*/
section.promo #promo_bd { position:relative; z-index:1; }
section.promo #promo_image { _margin:0 0 -3px 0; display:none; width:980px; height:327px; }
section.promo #promo_slide { position:relative; height:327px; }
section.promo #promo_movie { position:relative; display:none; }
section.promo #promo_mp3 { position:absolute; width:275px; height:170px; bottom:-14px; right:-11px; background:url(../img/default/promo/mp3player.png); z-index:1; }
section.promo #promo_mp3.show { display:block; }
section.promo #promo_mp3.hide { display:none; }
section.promo #promo_mp3 #playerArea { position:relative; width:230px; height:120px; top:20px; left:26px; }

/* 슬라이드 - Main Container*/
section.promo .main_view { position: relative; margin:0 auto; }
/*--Window/Masking Styles--*/
section.promo .window { overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; height:327px; }
section.promo .image_reel { position: absolute; top: 0; left: 0; }
section.promo .image_reel img {float: left;}

/* 슬라이드 - Paging Styles*/
section.promo .slider_nav { width:950px; position:absolute; padding:0 15px; bottom:-37px; overflow:hidden; }
section.promo .page_nav { float:right; width: 40%; }
section.promo .page_nav .paging { float:right; display: none; /*--Hidden by default, will be later shown with jQuery--*/ }
section.promo .page_nav .paging a { float:left; margin-left:10px; width:27px; height:27px; text-decoration: none; font:12px Arial, Geneva, sans-serif; font-weight: bold; color:#aaa; background:url../img/default/promo/silde_nav_off.gif) no-repeat; display:block; text-align:center; line-height:26px; outline:0; selector-dummy:expression(this.hideFocus=true) }
section.promo .page_nav .paging a.active { color:#fff; font-weight: bold;  background:url(../img/default/promo/silde_nav_on.gif) no-repeat; }

section.promo .values { float:left; width:60%; height:30px; text-align:left; font:9px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; text-transform:uppercase; line-height:140%; *zoom:1; overflow:hidden; }
section.promo .values a { color:#999 !important; text-decoration: none; display:none; *zoom:1; }
section.promo .values a:first-child { display:inline; }

/* Promotion - 하단*/
section.promo #promo_bottom { position:relative; width:970px; height:40px; background:url(../img/default/promo/bg_promo_bottom.png); }
section.promo #promo_bottom span.promo_bottom_right { position:absolute; right:-10px; width:10px; height:40px; background:url(../img/default/promo/bg_promo_bottom_right.png); text-indent:-1000em; }


/* 사이드 바 세로메뉴
------------------------------------------------------------------------------*/
#sub_nav { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; list-style:none; overflow:hidden; }

/* 2차 */
#sub_nav li a { position:relative; padding:10px 15px; display:block; color:#666; *zoom:1; border-bottom:1px solid #eee;}
#sub_nav li a:hover { color:#333 !important; background:#daedf8; }
#sub_nav li a .i{position:absolute;top:50%;left:100%;width:15px;height:8px;margin:-4px 0 0 -23px;_margin:-12px 0 0 -23px;color:#ccc;background:url(../img/default/vmenu/ico_sub.gif) no-repeat left bottom; }
#sub_nav li.on a { font-weight:bold; color:#000;  }

/*3차 */
#sub_nav li ul { list-style:none; margin:0; padding:0; }
#sub_nav li ul li a { padding-left:30px; font-weight:normal; border:none; color:#777; text-transform:none; }
#sub_nav li.on ul { border-bottom:1px solid #eee; }
#sub_nav li.on ul li a { font-weight:normal !important; color:#777; background:none; }
#sub_nav li.on ul li.on a { font-weight:bold !important; color:#000; }

/*4차 */
#sub_nav li ul li ul { margin:0; padding:0;  border-bottom:1px solid #eee; border-top:1px solid #eee; }
#sub_nav li ul li ul li a { padding-left:45px; background:none; }
#sub_nav li.on ul li.on ul { border-bottom:none;}
#sub_nav li.on ul li.on ul li a { font-weight:normal !important; color:#999; background:none; border:none; }
#sub_nav li.on ul li.on ul li.on a { font-weight:bold !important; color:#000; }

/*예비 */
#sub_nav li ul li ul li ul { margin:0; padding:0; font-size:11px; }
#sub_nav li ul li ul li ul li a { padding:0px 0 10px 60px; _padding:0 0 0 75px; background:none; border:none; }
#sub_nav li.on ul li.on ul li.on ul li a { font-weight:normal !important; color:#999; background:none; }
#sub_nav li.on ul li.on ul li.on ul li.on a{ font-weight:bold !important; color:#000; }

#sub_nav li:last-child a { border:none; }


/* 소셜 네트워크 링크
------------------------------------------------------------------------------*/
.social_networks { margin:0; padding:0; overflow:hidden; *zoom:1; }
.social_networks .label { font:11px Arial, Helvetica, sans-serif; float:left; display:block; padding:0; line-height: 16px; font-weight: 900; color: #666; }
.social_networks .label-content { float:left; display: block; width: 145px; padding: 0 0 0 5px; line-height: 16px; font-size: 11px; }
.social_networks .label-content a { color: #878787; font-weight: 900; text-decoration: none; }
.social_networks .label-content a:hover { color: #4a4a4a; }
.social_networks .label-content.icons a { display: block; float: left; margin: 0 0 3px 3px; padding: 0; width: 16px; height: 16px; text-indent: -4000px; background: transparent url('../img/default/social/social.gif') no-repeat; }
.social_networks .label-content.icons a.twitter { background-position: right 0; }
.social_networks .label-content.icons a.twitter:hover { background-position: left 0; }
.social_networks .label-content.icons a.facebook { background-position: right -16px; }
.social_networks .label-content.icons a.facebook:hover { background-position: left -16px; }
.social_networks .label-content.icons a.delicious { background-position: right -32px; }
.social_networks .label-content.icons a.delicious:hover { background-position: left -32px; }
.social_networks .label-content.icons a.digg { background-position: right -48px; }
.social_networks .label-content.icons a.digg:hover { background-position: left -48px; }
.social_networks .label-content.icons a.stumbleupon { background-position: right -64px; }
.social_networks .label-content.icons a.stumbleupon:hover { background-position: left -64px; }
.social_networks .label-content.icons a.friendfeed { background-position: right -80px; }
.social_networks .label-content.icons a.friendfeed:hover { background-position: left -80px; }
.social_networks .label-content.icons a.myspace { background-position: right -96px; }
.social_networks .label-content.icons a.myspace:hover { background-position: left -96px; }
.social_networks .label-content.icons a.tumblr { background-position: right -112px; }
.social_networks .label-content.icons a.tumblr:hover { background-position: left -112px; }


/* 서브 푸터
------------------------------------------------------------------------------*/
footer.sub { width:980px; margin:0 auto; padding:40px 0 0 0; }

/* 경로표시기 */
footer.sub .menuPath02 { margin:0; padding:0; position:relative; height:33px; background:url(../img/default/bwidgets/bg_bread_home.gif) no-repeat 14px center; border-bottom:1px solid #d2d2d2; }
footer.sub .menuPath02 a,
footer.sub .menuPath02 a:visited { float:left; display:inline-block; height:23px; padding:10px 20px 0 0; margin-right:10px; background:url(../img/default/bwidgets/icon_bread_arrow_02.gif) no-repeat right top; color:#999; }
footer.sub .menuPath02 a:hover { color:#66bced; }
footer.sub .menuPath02 a.home { width:25px; }
footer.sub .menuPath02 span { float:left; display:inline-block; height:23px; padding:10px 20px 0 0; margin-right:10px; color:#666; font-weight:bold; }

/* 위젯 */
footer.sub .smartList { margin:0; padding:20px; }
footer.sub .smartList ul.column{ margin:0; padding:0; list-style: none; overflow:hidden; }
footer.sub .smartList ul.column li { float: left; width: 160px; /*Set default width*/ padding: 0; margin: 0; display: block; }
footer.sub .smartList ul.column .block { font-size:11px; letter-spacing:-1px; margin-right: 20px; /*Creates the 20px gap between each column*/ padding: 0; }
footer.sub .smartList ul.column .block h2 { font-size:11px; margin:0 0 10px 0; padding:0; color:#333; border:none; }


/* 메인 푸터
------------------------------------------------------------------------------*/
footer.main { margin:30px 0 0 0; padding:0; width:970px; height:110px; left:5px; background:url(../img/default/bg_footer.png) no-repeat; }
footer.main span.footerR { position:absolute; top:0; right:-10px; width:10px; height:110px; display:block; text-indent:-1000em; background:url(../img/default/bg_footer_right.png) no-repeat; }
footer.main .wrap { height:71px; padding:27px 15px 0 25px; overflow:hidden;  }
footer.main .footer_left { position:relative; float:left; width:70%; }
footer.main .footer_right { position:relative; float:right; width:26%; }

/* 하단 메뉴 */
footer.main .bottom_menu { margin:3px 0 15px 0; padding:0; list-style:none; overflow:hidden; *zoom:1; }
footer.main .bottom_menu li { float:left; }
footer.main .bottom_menu li a { margin:0 25px 0 0; display:inline; }
footer.main .bottom_menu li a,
footer.main .bottom_menu li a:visited { color:#fff; }

/* 이용자 저작권 정보 */
footer.main address.copyright { font:11px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; color:#fff; font-style:normal; }

/* 저작권 정보 */
footer.main .madeWith { float:right; width:187px; height:69px; margin:0; padding:0;  background:url(../img/default/bg_madeWith.gif); overflow:hidden; }
footer.main .madeWith p { margin:0; padding:0; display:block; position:relative; top:18px; left:30px; font:9px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; text-transform:uppercase; color:#5d779c; }
footer.main .madeWith p a,
footer.main .madeWith p a:visited { font:13px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; color:#fff; text-transform:none; font-weight:bold; line-height:140%; }
footer.main .madeWith p span.address { display:block; font:9px Arial, Helvetica, sans-serif; color:#fff; text-transform:none; }


/* 샘플용 CSS - 실제 서비스시에는 삭제 가능
------------------------------------------------------------------------------*/
/*중앙 컨텐츠*/
.splash_body { color:#999; font-size:9pt; line-height:160%; }
.splash_body a,
.splash_body a:visited { color:#66bced; font-weight:bold; }
.splash_body img.imgLeft { margin:0 20px 5px 0; border:1px solid #ddd; float:left; }
.splash_body h2 { margin:0 0 10px 0; padding:0; color:#222; border:none; font:bold 12px 굴림,Gulim; letter-spacing:-1px; line-height:140%; }

.splash_body .moreBox { margin:15px 0 20px 0; padding:20px 20px 20px 20px; *padding:20px 20px 0 20px; font:12px 굴림,Gulim; color:#888; border:1px solid #d5f0ff; background-color:#fafafa; *zoom:1; overflow:hidden }
.splash_body .moreBox .left { float:left; width:50%; border-right:1px solid #ebebeb; }
.splash_body .moreBox .right { float:right; width:45% }

.splash_body .moreBox .list { margin:0; padding:0; list-style:none; }
.splash_body .moreBox .list li { height:13px; font:11px 돋움,Dotum; letter-spacing:-1px; }
.splash_body .moreBox .list li.title { margin:0 0 15px 0; padding:15px 0 0 0; color:#454545; font-weight:bold; font:bold 11px 돋움,Dotum; letter-spacing:-1px; }
.splash_body .moreBox .list li.check { margin:0 0 12px 0; padding:0 0 0 24px; background:url(../img/default/splash/icon-check.gif) no-repeat; }
.splash_body .moreBox .list li.nocheck { margin:0 0 12px 0; padding:0 0 0 24px; background:url(../img/default/splash/icon-x.gif) no-repeat; }

.splash_body .clio_feature { margin:0; padding:0; list-style:none; font:11px 돋움,Dotum; letter-spacing:-1px; line-height:170%; }
.splash_body .clio_feature li { display:block; padding:10px 0; border-top:1px solid #ddd; color:#888;overflow:hidden; *zoom:1; }
.splash_body .clio_feature li h3 { margin:0 0 10px 0; padding:0; color:#66bced; border:none; font:bold 12px 굴림,Gulim; line-height:170%; }
.splash_body .clio_feature li p { margin:0; padding:0; }
.splash_body .clio_feature li p.imgFeature { float:left; margin-right:15px; width:70px; height:70px; border:7px solid #f0f0f0; }

/*폰트 스타일*/
.enSansLL { font:18px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; line-height:140%; }
.enSansL { font:12px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; line-height:140%; }
.enSansS { font:9px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; text-transform:uppercase; line-height:140%; }
.enSansSS { font:9px Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; line-height:140%; }
.enAriM { font:11px Arial, Helvetica, sans-serif; line-height:140%; }
.enAriS { font:9px Arial, Helvetica, sans-serif; line-height:140%; }

.krLL { font:bold 12px 굴림,Gulim; line-height:140%; }
.krL { font:12px 굴림,Gulim; line-height:140%; }
.krLE { font:12px 굴림,Gulim; letter-spacing:-1px; }
.krM { font:9pt 돋움,Dotum; line-height:140%; }
.krS { font:11px 돋움,Dotum; letter-spacing:-1px; }

/*우측 사이드바*/
aside.s2 a.download_clio { display:block; margin:0; padding:0; width:152px; height:175px; text-indent:-1000em; outline:0; selector-dummy:expression(this.hideFocus=true); background:url(../img/default/splash/download_ko.gif); }
aside.s2 a.download_clio:hover { background:url(../img/default/splash/download_ko.gif) 0 -175px; }

aside.s2 a.download_psd { display:block; margin:10px 0 0 0; padding:0; width:152px; height:175px; text-indent:-1000em; outline:0; selector-dummy:expression(this.hideFocus=true); background:url(../img/default/splash/download_ko.gif) -152px 0; }
aside.s2 a.download_psd:hover { background:url(../img/default/splash/download_ko.gif) -152px -175px; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}