﻿@charset "utf-8";

/* ------------------------------
import
------------------------------ */
@import url('reset.css');

/* ------------------------------
 layout 
------------------------------ */
#preLoadImg{display:none;}
html,body{height:100%;width:100%;*height:99.99%;*width:99.99%;background:#33271b}
#header {position:relative;z-index:1;margin:0;padding:0;height:76px;background:url('/images/bg_top.png');z-index:101;min-width:400px;}
#subtitle {height:42px;background:url('/images/bg_category.png');font-size:1.4em;font-weight:bold;line-height:42px;color:#4e3f2a;font-family:ngttfbold;min-width:400px;}
#bookshelf{background: url('/images/shelf.png') repeat;min-height:679px;position:relative;padding:0 60px;z-index:10;min-width:400px;}

/********************************
 wrap > header
*********************************/
#header .logo{position:absolute;top:12px;left:10px;background:url('/images/logo.png') no-repeat;height:45px;min-width:91px;padding-left:100px;line-height:40px;color:#fff;font-size:2em;font-weight:bold;cursor:pointer}
#header .logo img {display:block;margin:5px 0;}

#header .btn_comp_area{margin:0 auto;width:200px;text-align:center;overflow:hidden;padding-top:15px;}
#header .btn_comp_area a{display:block;height:37px;width:88px;}
#header .btn_comp_area a.btnComp1{background:url('/images/top_btn_01_off.png');float:left}
#header .btn_comp_area a.btnComp1.active{background:url('/images/top_btn_01_on.png');float:left}
#header .btn_comp_area a.btnComp2{background:url('/images/top_btn_02_off.png');float:left}
#header .btn_comp_area a.btnComp2.active{background:url('/images/top_btn_02_on.png');float:left}

#header .btn_menu_area{position:absolute;top:15px;right:10px;width:160px;overflow:hidden;}
header .btn_menu_area input{position:absolute;top:-9999px;}
#header .btn_menu_area .btnEdit{display:block;width:79px;height:37px;background:url('/images/top_btn_edit.png');float:left;}
#header .btn_menu_area .btnEdit.active{background:url('/images/top_btn_edit_on.png');}

#header .btn_menu_area a.menu{margin:0 5px; display:block;width:69px;height:37px; background:url('/images/top_btn_list.png');float:right;}
#header .btn_menu_area a.menu.active{background:url('/images/top_btn_list_on.png');}

/********************************
 wrap > gnb
*********************************/
#gnb {position:absolute;top:55px;right:20px;}
#gnb ul{border:2px solid #4a3827;overflow:hidden;background:#f9ebdf}
#gnb ul > li{margin:0;background:url('/images/icon_arr.png') no-repeat 10px;padding:10px 30px 10px 20px;border-bottom:1px solid #d3c7bd;cursor:pointer;font-size:1.2em;}
#gnb ul > li:hover{background-color:#fcf8f5;}
#gnb ul > li:last-child{border-bottom:none;}


/********************************
 wrap > gnb
*********************************/
#subtitle > ul{overflow:hidden;margin:0 20px;}
#subtitle > ul > li{float:left;margin-right:10px;}
#subtitle > ul > li:not(:first-child){background:url('/images/icon_depth.png') no-repeat center left;text-indent:20px;}
.title_depth{background:url('/images/icon_depth.png') no-repeat center left;text-indent:20px}


/********************************
 wrap > subtitle
*********************************/
#subtitle > ul > li{cursor:pointer;text-decoration:underline;font-size:1.2em;font-weight:bold;}
#subtitle > ul > li:hover{text-decoration:underline;}


/********************************
 wrap > bookshelf
*********************************/
#bookshelf div.shelf_l{position:absolute;top:0;left:0;height:100%;width:99px;
	background-image: url('/images/selfforever_l.png');
	background-repeat: repeat-y;
	background-position:top left;
	z-index:10;
}
#bookshelf div.shelf_r{position:absolute;top:0;right:0;height:100%;width:99px;
background-image: url('/images/selfforever_r.png');
background-repeat: repeat-y;
background-position:top right;
z-index:10;
}

#bookshelf > #bookshelf_warp > div.book{
	position:relative;
	z-index:100;
	float: left;
	height:227px;
	margin: 0px 25px;
	text-align:center;
}

#bookshelf a{text-decoration:none;}

#bookshelf div.book p.title{text-align:center;overflow:hidden;color:#6c4124;max-width:150px;white-space:nowrap;height:32px;line-height:20px;padding-top:10px;}
#bookshelf div.book .img_area{text-align:center;height:160px;vertical-align: bottom;margin:0;padding:0;text-align:center;}

#bookshelf div.book img.img{
	max-height:160px;display:block;
	box-shadow: 3px 4px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 3px 4px 5px #555;
    -webkit-box-shadow: 3px 4px 5px #555;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#000000');
}

#bookshelf div.book div.book_area{position:relative;margin:0 auto;padding:0;}
#bookshelf div.book div.book_area.book img.img{position:relative;margin:0 auto;padding:0;}

#bookshelf div.book div.book_area.media{position:relative;background:url('/images/book_img_bg.png') no-repeat;width:170px;height:132px;padding:8px 0 0 8px;}
#bookshelf div.book div.book_area.media img.img{width:152px;height:114px;border-radius:4px;}
#bookshelf div.book div.book_area.folder img.img{box-shadow:none;-ms-filter:0;filter:0;}


img.new{display:none;}
img.new.active{display:block;position:absolute;left:-18px;top:-15px;}

div.icon_movie{position:absolute;top:45px;left:65px;background:url('/images/icon_play.png');width:37px;height:37px;}
p.folder_title{position:absolute;top:50px;left:0;font-size:1.5em;color:#fff;font-weight:bold;text-align:center;margin:0 auto;width:155px;text-shadow: 0 -1px 1px rgba(0,0,0,0.5);line-height:1.2em;

    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#555')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 1, Direction = 135, Color = '#555555');

}



@media only screen and (max-width:700px) {
    #header .logo img{display:none;}
	/*#header .logo span{display:none;}*/
}



/*******************************************************************************
 로그인
*******************************************************************************/
.login{width:100%;height:100%;margin:0;padding:0;}
.login_box{position:absolute;top:50%;left:50%;z-index:100;width:492px;height:290px;margin-left:-246px;margin-top:-145px;padding:5px 0;background:url(/images/login/box_login.png) no-repeat;}

h1.login_title{margin:20px 0 0 40px;padding:0;font-size:0;line-height:0;}
.login_con{width:333px;margin:40px auto 0;padding:0;}
dl.loginDl{float:left;width:250px;margin:0;padding:0 0 20px;}
dl.loginDl dt{float:left;width:30px;height:28px;margin:0;padding:5px 0 0;font-size:0;line-height:0;}
dl.loginDl dd{float:left;width:200px;height:33px;margin:0;padding:0;}
input.login_field{height:22px;line-height:18px;margin:0;padding:0 5px 0 5px;font-family:dotum;font-size:11px;border:1px solid #ccc;width:200px;}

.remember_id{clear:both;margin:0;padding:20px 0 0 80px;font-weight:bold;background:url(/images/login/line_dot.png) center top no-repeat;} 


/*******************************************************************************
 학습관상단자료전용
*******************************************************************************/

#bookshelf_warp > div.book > div.addFile{margin-top:40px;}

/*div.icon_remove{position:absolute;top:38px;left:58px;background:url('/images/icon_remove.png');width:52px;height:52px;}*/

div.icon_remove{position:absolute;top:0;left:0;background:url('/images/icon_remove.png') no-repeat center;width:170px;height:240px;z-index:100;cursor:pointer}