﻿@charset "UTF-8";
/* 레이아웃 */
#mainLayout {
	position:relative;
	_display:inline;
	float:left;
	width:1020px;
	left:50%;
	margin-left:-470px;
	}
#topArea {
	position:relative;
	overflow:hidden;
	float:left;
	width:945px;
	height:146px;
	}
#centerAreaWrap {
	overflow:hidden;
	float:left;
	width:1020px;
	height:615px;
	margin:0 0 10px 0;
	background:url(../images/main/centerAreaBg.gif) no-repeat left top;
	}
	#leftArea {
		overflow:hidden;
		float:left;
		width:238px;
		}
	#rightArea {float:left; width:699px; margin-right:13px;}
		
		
#footerArea {
	clear:both;
	overflow:hidden;
	float:left;
	width:940px;
	}


/*좌측 컨텐츠 */
/*로그인 */
.login {
	float:left;
	width:234px;
	height:100px;
	}
.login .objTop {
	float:left;
	padding:0 0 5px 0;
	}
.login fieldset {
	position:relative;
	float:left;
	width:234px;
	}
#idpwRow {
	float:left;
	width:135px;
	margin-right:5px;
	}
#idRow, #pwRow {
	float:left;
	width:130px;
	margin-bottom:3px;
	}
#idRow label  , #pwRow label{
	overflow:hidden;
	visibility:hidden;
	position:absolute;
	width:0; 
	height:0;
	line-height:0;
	}	
#idRow input , #pwRow input {
	float:left;
	width:130px;
	height:14px;
	padding:1px;
	border-top:#b1b1b1 1px solid;
	border-right:#dbdad9 1px solid;
	border-bottom:#dbdad9 1px solid;
	border-left:#b1b1b1 1px solid;
	}
#loginBtn {
	float:left;
	margin-top:0;
	}
#saveIDRow {
	position:absolute;
	top:0px;
	left:145px;
	width:55px;
	margin:0;
	padding:0;
	font-size:0.92em;
	}
#saveIDRow label {
	visibility:visible;
	overflow:visible;
	width:auto;  
	height:auto;
	color:#818181;
	font-size:11px;
	line-height:100%;
	}
.login #loginBtnArea {
	float:left;
	margin:10px 0 0 10px; 
	}
	.login #loginBtnArea a{
		margin-right:10px;
		padding-left:5px;
		background:url(../images/main/loginBu.gif) no-repeat left center;
		}
	.login #loginBtnArea a.none{
		margin-right:0;
		}

/*로그아웃 */
.logout {
	overflow:hidden;
	float:left;
	width:234px;
	height:100px;
	}
.logout .objTop {
	float:left;
	height:13px;
	padding:0 0 15px 0;
	}
.logout .objContent {
	display:inline;
	float:left;
	width:224px;
	margin:0 0 10px 10px;
	}
	.logout .objContent #logoutInfo {
		float:left;
		width:234px;
		margin:0 0 0 0;
		color:#535353;
		font-size:0.92em;
		}
.logout .objContent #logoutInfo .name {
	font-size:1.2em;
	font-weight:bold;
	color:#f76c92;
	}
.logout #logoutBtn {
	float:left;
	}
.logout #logoutBtnArea {
	text-align:center;
	
	margin:0 0 10px 75px;
	}
	.logout #logoutBtnArea img {
		text-align:center;
		margin-right:3px;
		}
#logoutBtnArea img {
	float:left;
	}
.logout #mypageBtn {
	float:left;
	padding-left:15px;
	background:url(../images/mypageBtnBg.gif) no-repeat left top;
	}


/*달력*/
#calendar  {
	position:relative;
	overflow:hidden;
	display:inline;
	float:left;
	width:213px;
	height:172px;
	margin:10px 65px 4px 18px;
	}
	#calendar .calendar {
		overflow:hidden;
		float:left;
		width:213px;
		height:18px;
		color:#000;
		}
		#calendar .calendar span {
			float:left;
			}
		#calendar .calendar ul {float:right;}
		#calendar .calendar li {
			float:left;
			padding-left:15px;
			}
		#calendar .calendar .haveSchedule {
			float:left;
			margin-right:7px;
			padding-right:10px;
			background:url(../images/main/haveScheduleBg.gif) no-repeat right center;
			}
		#calendar .calendar .closeSchedule {
			float:left;
			padding-right:10px;
			background:url(../images/main/closeScheduleBg.gif) no-repeat right center;
			}
			#calendar .calendar .haveSchedule a {color:#fff;}
			#calendar .calendar .closeSchedule a {color:#fff;}

#calendar .calendarList {float:left;  width:199px; }
#calendar .calendarList, .calendarList td, .calendarList th {
	border:0;
	border-collapse:collapse;
	}
	#calendar .objTop {
		display:inline;
		float:left;
		margin:5px 0 5px 40px;
		font-weight:bold; 
		font-size:1.2em;
		color:#2462b9;
		}
	#calendar .objTop .date {
		margin-bottom:10px;
		font-weight:bold;
		color:#666;
		text-align:center;
		}
		#calendar .objTop .date img {
			vertical-align:middle;	
			}
		#calendar .objTop .date .btm {
			vertical-align:bottom;	
			}
	#calendar .objContent {
		float:left;
		width:199px;
		height:131px;
		margin-top:10px;
		}
		#calendar .date {	
			margin-bottom:10px;
			text-align:center;
			color:#fff;
			font-size:1em;
			font-weight:bold;
			}
	.calendarList {background:url(../images/main/calendarBg.gif) no-repeat left top;}
	.calendarList th {
		padding-top:5px;
		color:#000;
		}
	.calendarList .sun {color:#ff5307;}
	.calendarList td {
		font-size:0.92em;
		font-weight:normal;
		margin:0;
		color:#777;
		white-space:nowrap;
		text-align:center;
		}
		.calendarList span {
			display:block;
			margin:0 auto;
			width:22px;
			height:8px;
			padding:4px 0;
			}
		*html .calendarList span {
			display:block;
			margin:0 auto;
			width:22px;
			height:6px;
			padding:1px 0;
			}
			.haveSchedule {
				background:#f25623;
				}
			.haveSchedule a {color:#fff;}
			.closeSchedule  {
				background:url(../images/main/closeScheduleBg2.gif) no-repeat center top;
				}
			.closeSchedule a {
				color:#fff;
				}
				
/*서비스바로가기 */
#service {
	position:relative;
	display:inline;
	overflow:hidden;
	float:left; 
	width:219px;
	margin:-5px 0 0 10px;
	}
	#service .tit {margin-bottom:2px;}
	#service ul {width:216px; margin-left:2px;}
	#service li {overflow:hidden; float:left; width:108px; height:12px; margin-bottom:2px;}
	#service .moreBtn {position:absolute; top:5px; right:5px; }

/*영화상영*/
#movieArea {display:inline; float:left; width:227px; margin:20px 0 0 11px;}
#movieArea .objTop {overflow:hidden;display:inline; float:left; height:35px; margin:0 0 10px 7px;}
#movieArea .movieList {
	float:left;
	width:227px;
	}
	.movieList .movieImg {
		float:left;
		margin-right:5px;
		background:#fff;
		}
		.movieList .movieImg img {
			overflow:hidden;
			width:80px;
			height:100px;
			padding:2px;
			border:1px solid #ccc;
			}
		#movieArea .titleArea {float:left; text-align:left;  color:#2462b9; width:117px; height:16px; padding:4px 0 0 5px; overflow:hidden;text-overflow:ellipsis; background:url(../images/main/movieTitBg.gif) no-repeat left top;}
		#movieArea .title { padding:0 0 0 0; text-align:left; font-weight:bold; color:#2462b9; width:100px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
		.movieList ul {	
			float:left;
			width:115px;
			color:#707070;
			margin:0; padding:0;
			}
			.movieList ul li { width:97px; padding-left:10px; line-height:160%;background:url(../images/common/icon/Bu6.gif) no-repeat left center;}

/*--영화상영+뉴스레터 2011-04-20 수정본----*/
#movieAreaNew {display:inline; float:left; width:100px; margin:20px 0 0 11px;}
#movieAreaNew .objTop {overflow:hidden;display:inline; float:left; height:35px; margin:0 0 7px 0px;}
#movieAreaNew .movieList {float:left;width:100px;}
	.movieList .movieImg {float:left;margin-right:5px;background:#fff;}
		.movieList .movieImg img {overflow:hidden;width:92px;height:120px;padding:2px;border:1px solid #ccc;}
#movieAreaNew .movieInfo {clear:both; overflow:hidden; height:38px; width:100px; font:normal 11px/16px dotum;}
#movieAreaNew .titleArea {float:left; text-align:left;  color:#2462b9; width:117px; height:16px; padding:4px 0 0 5px; overflow:hidden;text-overflow:ellipsis; background:url(../images/main/movieTitBg.gif) no-repeat left top;}
#movieAreaNew .title { padding:0 0 0 0; text-align:left; font-weight:bold; color:#2462b9; width:100px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
		.movieList ul {float:left;width:115px;color:#707070;margin:0; padding:0;}
			.movieList ul li { width:97px; padding-left:10px; line-height:150%;background:url(../images/common/icon/Bu6.gif) no-repeat left center;}

#newsletter {display:inline;float:left; width:114px; height:170px;background:url(../images/main/newsletterBg.gif) no-repeat left top; margin-left:5px;margin-top:22px;}
#newsletter span img {margin-top:39px; margin-left:9px; border:solid 1px #999; width:93px; height:119px;}

#newsletter_New {display:inline;float:left; width:110px; margin-top:22px; margin-left:5px;  _margin-left:0px;}

.movieInfoArea {display:inline;float:left; width:110px; font:normal 11px/16px dotum;margin-left:5px; margin-top:15px;}
.movieInfoArea .titleArea {overflow:hidden;float:left; text-align:left;  color:#2462b9; width:105px; height:16px; padding:4px 0 0 5px; overflow:hidden;text-overflow:ellipsis; background:url(../images/main/movieTitBg.gif) no-repeat left top;}
.movieInfoArea .title { padding:0 0 0 0; text-align:left; font-weight:bold; color:#2462b9; width:100px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
.movieInfoArea ul {float:left;width:110px;color:#707070;margin:0; padding:0;}
.movieInfoArea ul li { width:95px; padding-left:10px; line-height:150%;background:url(../images/common/icon/Bu6.gif) no-repeat left center;}



/*오른쪽영역*/
/*배너리스트시작 */
#popZone {
	display:inline;
	overflow:hidden;
	float:left;
	width:699px;
	height:232px;
	margin:1px 1px 1px 1px;
	background:url(../images/main/popzoneBg.gif) no-repeat left top;
	}
	#popZone .popSubject {
		overflow:hidden;
		width:240px;
		vertical-align:top;
		font:bold 14px/43px dotum;
		margin:0 0 0 0px;
		float:left;
		}
		#popZone .popSubject li {
			padding-left:50px;
			height:43px;
			width:190px;
			white-space:nowrap; overflow:hidden;text-overflow:ellipsis;
			}
		#popZone .popSubject li a{
			color:#666;
			}
		#popZone .popSubject li a:hover{
			color:#b41a3f;
			}
			
			#popZone .popSubject li.over01 {
				background:url(../images/main/popzone_no01.gif) no-repeat left top;
				}
			#popZone .popSubject li.over01_on {
				padding-left:52px;				
				background:url(../images/main/popzone_no01_on.gif) no-repeat left top;
				}
			#popZone .popSubject li.over01_on a{
				color:#b41a3f;
				}
			#popZone .popSubject li.over02 {
				background:url(../images/main/popzone_no02.gif) no-repeat left top;
				}
			#popZone .popSubject li.over02_on {
				background:url(../images/main/popzone_no02_on.gif) no-repeat left top;
				}
			#popZone .popSubject li.over02_on a{
				color:#b41a3f;
				}
			#popZone .popSubject li.over03 {
				background:url(../images/main/popzone_no03.gif) no-repeat left top;
				}
			#popZone .popSubject li.over03_on {
				background:url(../images/main/popzone_no03_on.gif) no-repeat left top;
				}
			#popZone .popSubject li.over03_on a{
				color:#b41a3f;
				}
			#popZone .popSubject li.over04 {
				background:url(../images/main/popzone_no04.gif) no-repeat left top;
				}
			#popZone .popSubject li.over04_on {
				background:url(../images/main/popzone_no04_on.gif) no-repeat left top;
				}
			#popZone .popSubject li.over04_on a{
				color:#b41a3f;
				}
			#popZone .popSubject li.over05 {
				background:url(../images/main/popzone_no05.gif) no-repeat left top;
				}
			#popZone .popSubject li.over05_on {
				background:url(../images/main/popzone_no05_on.gif) no-repeat left top;
				}
			#popZone .popSubject li.over05_on a{
				color:#b41a3f;
				}
	#divpopupzone {
		overflow:hidden;
		float:left;
		width:449px;
		height:232px;
		display:inline;
		}

#bannerList {
	float:left; 
	width:675px;
	height:102px;
	padding:15px 0 0 25px;
	}
	#bannerList li {float:left; margin-right:10px;}

/*자료검색*/
#dataSearch {
	overflow:hidden;
	float:left;
	width:670px;
	height:20px;
	padding:11px 0 0 16px;
	background:url(../images/main/dataSearchBg.gif) no-repeat left top;
	}
	#dataSearch form , #dataSearch fieldset{
		float:left;
		width:664px;
		}
	#dataSearch legend {
		overflow:hidden;
		visibility:hidden;
		width:0;
		height:0;
		line-height:0;
		}
	#dataSearch .tit {float:left; margin:5px 25px 0 0;}
	#dataSearch .searchInput {
		float:left;
		width:510px;
		height:20px;
		margin:2px 5px 0 0;
		padding: 0 5px;
		border:none;
		background:none;
		}
	#dataSearch input {
		float:left;
		}
	#dataSearch label {
		padding-top:5px;
		font-size:0.92em;
		color:#5c5c5c;
		}

/*공지사항/신착자료 */
#noticeArea {
	overflow:hidden;
	position:relative;
	display:inline;
	float:left;
	width:375px;
	height:130px;
	margin:10px 25px 0 18px;
	background:url(../images/main/noticeBg.gif) repeat-x left 5px;
	}
#noticeArea .moreBtn {
	position:absolute;
	top:8px;
	right:0;
	}
#noticeArea .objTop {
	position:absolute;
	top:0;
	height:20px;
	}
	#notice .objTop {left:0;}
	#newBook .objTop {left:89px;}
	
	#noticeArea #notice .tabArea {width:89px;}
	#noticeArea #newBook .tabArea {width:89px;}
	
#noticeArea .tabArea {
	display:block;
	overflow:hidden;
	position:absolute;
	width:88px;
	height:20px;
	}
	#noticeArea .tabArea img {
		position:absolute;
		top:0;
		}
	#noticeArea .tabArea img.on {
		position:absolute;
		top:-20px;
		}

/* 탭 디스플레이 속성 구현 */
#noticeArea .objContent ul {
	margin-top:38px;
	}
#noticeArea .objContent ul, #noticeArea .moreBtn a {
	display:none;
	}
#noticeArea .objContent ul.selected, #noticeArea .moreBtn a.on {
	display:block;
	}
#noticeArea .objContent li {
	height:14px;
	color:#535353;
	}
	#noticeArea .objContent a:hover {
		color:#757575;
		}
#noticeArea .title {
	overflow:hidden;
	float:left;
	width:285px;
	margin-right:10px;
	padding-left:8px;
	height:18px;
	font-weight:normal;
	white-space:nowrap;
	vertical-align:middle;
	text-overflow:ellipsis;
	background:url(../images/main/noticeBu.gif) no-repeat 2px 7px;
	}
#noticeArea .title img {
	vertical-align:middle;
	}
#noticeArea .date {
	float:left;
	color:#d5424c;
	}

/*권장도서일반/권장도서어린이*/
#borrowArea {
	overflow:hidden;
	position:relative;
	display:inline;
	float:left; 
	width:250px;
	height:168px;
	margin:10px 0 0 18px;
	background:url(../images/main/noticeBg.gif) repeat-x left 10px;
	}
#borrowArea .borrowmoreBtn {
	position:absolute;
	top:8px;
	right:0;
	clear:both;
	}
#borrowArea .objTop {
	position:absolute;
	top:0;
	height:20px;
	}
	#adult .objTop {left:0;}
	#child .objTop {left:89px;}
	
	#borrowArea #adult .tabArea {width:89px;}
	#borrowArea #child .tabArea {width:89px;}
#borrowArea .tabArea {
	display:block;
	overflow:hidden;
	position:absolute;
	width:88px;
	height:20px;
	}
	#borrowArea .tabArea img {
		position:absolute;
		top:0;
		}
	#borrowArea .tabArea img.on {
		position:absolute;
		top:-20px;
		}

#borrowArea .objContent div {
		margin:35px 0 0 0;
		}

#borrowArea .objContent div, #borrowArea .borrowmoreBtn a {
	display:none;
	}
#borrowArea .objContent div.selected, #borrowArea .borrowmoreBtn a.on {
	display:block;
	}
	
	#borrowArea .objContent .borrowImg {
		float:left;
		margin-right:10px;
		background:#fff;
		}
		#borrowArea .objContent .borrowImg img {
			overflow:hidden;
			width:80px; 
			height:100px;
			padding:2px;
			border:1px solid #ccc;
			}
		#borrowArea .objContent .borrowImg.no img {
			border:none;
			}
		#borrowArea .objContent dl {
			display:inline;
			overflow:hidden;
			float:left;
			width:150px;
			margin:0 0 0 0;
			color:#707070;
			}
			#borrowArea .objContent dl dt {width:140px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; margin-bottom:2px;color:#885f2f;font-weight:bold; }
			#borrowArea .objContent dl .writer {text-align:right;color:#666; margin-bottom:10px;}
			#borrowArea .objContent dl .cont {overflow:hidden; height:75px;color:#333; line-height:160%;}


/* 탭 디스플레이 속성 구현 */
#borrowArea .objContent ul {
	margin-top:29px;
	}
#borrowArea .objContent ul, #noticeArea .moreBtn a {
	display:none;
	}
#borrowArea .objContent ul.selected, #noticeArea .moreBtn a.on {
	display:block;
	}
#borrowArea .objContent li {
	line-height:160%;
	color:#535353;
	}
	#borrowArea .objContent a:hover {
		color:#757575;
		}
#borrowArea .title {
	float:left;
	width:200px;
	overflow:hidden;
	margin-right:10px;
	padding-left:8px;
	white-space:nowrap;
	text-overflow:ellipsis;
	background:url(../images/main/noticeBu.gif) no-repeat 2px 5px;
	}
#borrowArea .newIco {
	float:left;
	margin-top:2px;
	margin-right:10px;
	}
#borrowArea .date {
	float:left;
	color:#1c9fa6;
	}


	
