@charset "utf-8";
@import url("/include/css/common/default.css");
@import url("/include/css/common/common.css");
@import url("/include/css/common/button.css");
@import url("layout.css");

#container.main {position: relative; width: 100%;}

/* title */
.mtitle {font-size:1.467em;color:#333}

/* btn */
.btnMore a {display:block;width:23px;height:19px;background:url("/include/image/intro/main/btn_sp.png") 0 0 no-repeat}

.libList {background:#606baa url("/include/image/intro/main/bg_libList.jpg") 100% 0 no-repeat;background-size: auto 100%}
.libList .box {position:relative;height:538px;border:1px solid #fff}
.libList .slogan {padding:30px 0 0 25px}
.libList .desc {padding:10px 0 0 40px;font-size:1.4em}
.libList .box ul {overflow:hidden;position:absolute;left:10px;right:10px;bottom:15px;margin-left:-10px}
.libList .box ul > li {float:left;width:33.33%}
.libList .box ul a {display:block;margin:10px 0 0 10px;padding:10px 0;font-size:1.333em;line-height:30px;text-align:center;border:2px solid #fff;color:#fff;letter-spacing:-2px}
.libList .box ul > li.holiday a {position:relative;padding:11px 0;color:#bcc7ff;border-width:1px;border-color:#7a8ce8}
.libList .box ul > li.holiday a i {display:block;position:absolute;top:0;right:0;width:44px;height:32px;padding-right:2px;line-height:20px;font-size:0.7em;text-align:right;font-style:normal;color:#fff;letter-spacing:-1px;background:url("/include/image/intro/main/bg_libList_label.png") 0 0 no-repeat}

/* 메인 모바일회원증 */
.mobileMemArea {margin: 20px 0; float: none;}

.mainService {background:#444d78 url("/include/image/intro/main/bg_mainService.jpg") center 0 no-repeat;background-size:auto 100%}
.mainService .box {position:relative}
.mainService .arrowWrap {overflow:hidden;position:absolute;top:25px;right:0}
.mainService .arrowWrap a {float:left;display:block;position:relative;width:25px;height:25px;padding:0;border:1px solid #7a86bd;background:none}
.mainService .arrowWrap a + a {margin-left:4px}
.mainService .arrowWrap a::after {content:"";display:block;position:absolute;top:50%;left:50%;width:10px;height:15px;margin:-7.5px 0 0 -5px;background:url("/include//image/intro/main/btn_sp.png") 0 -40px no-repeat}
.mainService .arrowWrap a.btnSlidePrev::after {background-position:0 -40px}
.mainService .arrowWrap a.btnSlideNext::after {background-position:0 -60px}
.mainService .listWrap {overflow:hidden;margin-top:20px}
.mainService .listWrap ul {overflow:hidden}
.mainService .listWrap ul > li {float:left;width:20%;text-align:center}
.mainService .listWrap ul a {display:inline-block}
.mainService .listWrap ul a b {font-size:1.067em;color:#fff}
.mainService .listWrap ul a i {overflow:hidden;position:relative;display:block;width:95px;height:95px;margin:0 auto 8px;background-color:rgba(122,134,198,0.45);border-radius:50%}
.mainService .listWrap ul a i::after {content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url("/include/image/intro/main/ico_mainService.png") 0 0 no-repeat}
.mainService .listWrap ul a i.ico1::after {background-position:0 0}
.mainService .listWrap ul a i.ico2::after {background-position:-100px 0}
.mainService .listWrap ul a i.ico3::after {background-position:-200px 0}
.mainService .listWrap ul a i.ico4::after {background-position:-300px 0}
.mainService .listWrap ul a i.ico5::after {background-position:-400px 0}
.mainService .listWrap ul a i.ico6::after {background-position:0 -100px}
.mainService .listWrap ul a i.ico7::after {background-position:-100px -100px}
.mainService .listWrap ul a i.ico8::after {background-position:-200px -100px}
.mainService .listWrap ul a i.ico9::after {background-position:-300px -100px}
.mainService .listWrap ul a i.ico10::after {background-position:-400px -100px}
.mainService .listWrap ul a i.ico11::after {background-position:-500px 0}
.mainService .listWrap ul a i.ico12::after {background-position:-500px -100px}
.mainService .listWrap ul a:hover i::after,.mainService .listWrap ul a:focus i::after {opacity:0.7}
.mainService .pagerWrap {display:block;height:20px;margin-top:10px;text-align:center;}
.mainService .pagerWrap a {display:inline-block;width:10px;height:10px;margin:0 3px;background-color: #eee;}
.mainService .pagerWrap a.on {background-color: #f50;}

.bbsListWrap {position:relative;background-color:#eef1fa}
.bbsListWrap::before {content:"";display:block;position:absolute;top:0;left:0;width:100%;height:75px;background-color:#c3cbea}
.bbsListWrap .topGroup {overflow:hidden;position:relative}
.bbsListWrap .tab {float:left;padding:20px 0;margin-right:20px}
.bbsListWrap .tab > li {float:left}
.bbsListWrap .tab > li + li {float:left;margin-left:20px}
.bbsListWrap .tab a {font-size:1.333em;line-height:35px;color:#464e7a}
.bbsListWrap .tab > li.on a {font-weight:bold}
.bbsListWrap .selectLibrary {float:left;position:relative;margin-top:20px;padding-right:50px}
.bbsListWrap .selectLibrary select {padding-left:10px;color:#464e7a;border-color:#464e7a;background:transparent url("/include/image/intro/main/arr_sel1.png") 100% center no-repeat}
.bbsListWrap .selectLibrary a {position:absolute;top:0;right:0;width:44px;line-height:36px;color:#fff;text-align:center}
.bbsListWrap .cont {position:relative}
.bbsListWrap .btnMore {position:absolute;right:2px;top:-45px}
.bbsListWrap .cont ul > li {position:relative;height:36px;padding:0 95px 0 70px;line-height:36px}
.bbsListWrap .cont a {overflow:hidden;display:inline-block;max-width:100%;font-size:1.133em;color:#464646;white-space:nowrap;text-overflow:ellipsis}
.bbsListWrap .cont .ico {position:absolute;top:7px;left:0;width:58px;height:22px;line-height:22px;font-size:1.067m;text-align:center;font-style:normal;border:1px solid #ccc;border-radius:3px}
.bbsListWrap .cont .date {position:absolute;top:0;right:0;font-size:1.067em}
.bbsListWrap .cont .ico.ct {color:#4972bc !important;border-color:#4972bc !important} /* 중앙도서관 */
.bbsListWrap .cont .ico.bd {color:#e96829 !important;border-color:#e96829 !important} /* 분당도서관 */
.bbsListWrap .cont .ico.gm {color:#ea5e42 !important;border-color:#ea5e42 !important} /* 구미도서관 */
.bbsListWrap .cont .ico.pg {color:#0f86a3 !important;border-color:#0f86a3 !important} /* 판교도서관 */
.bbsListWrap .cont .ico.uj {color:#d83a3a !important;border-color:#d83a3a !important} /* 운중도서관 */
.bbsListWrap .cont .ico.mjg {color:#df5e88 !important;border-color:#df5e88 !important} /* 무지개도서관 */
.bbsListWrap .cont .ico.cpg {color:#2493e4 !important;border-color:#2493e4 !important} /* 판교어린이도서관 */
.bbsListWrap .cont .ico.jw {color:#6ea209 !important;border-color:#6ea209 !important} /* 중원도서관 */
.bbsListWrap .cont .ico.hor {color:#7c6fd1 !important;border-color:#7c6fd1 !important} /* 해오름도서관 */
.bbsListWrap .cont .ico.cjw {color:#e3a000 !important;border-color:#e3a000 !important} /*중원어린이도서관 */
.bbsListWrap .cont .ico.sj {color:#2b9b61 !important;border-color:#2b9b61 !important} /* 수정도서관 */
.bbsListWrap .cont .ico.sh {color:#996e4f !important;border-color:#996e4f !important} /* 서현도서관 */
.bbsListWrap .cont .ico.small {color:#3cb149 !important;border-color:#3cb149 !important} /* 작은도도서관 */

/* popupZone */
.popupZone {position:relative}
.popupZone .controlGroup {overflow:hidden;position:absolute;top:0;right:0;z-index:2;text-align:right;background-color:#fff}
.popupZone .controlGroup .nowpage {display:block;float:left; padding: 0 10px; line-height: 24px; border: 1px solid #ccc; border-right: none;}
.popupZone .controlGroup a {display:block;float:left;width:26px;height:26px;background:url(/include/image/common/btn_roll.png) 0 0 no-repeat}
.popupZone .controlGroup .pp-controls,.banner .controlArea .pp-controls {float:left}
.popupZone .controlGroup .btnSlidePause {background-position-x:-26px}
.popupZone .controlGroup .btnSlidePlay {background-position-x:-52px}
.popupZone .controlGroup .btnSlideNext {width:27px;background-position-x:-78px}
.popupZone .popupList {overflow:hidden;position:relative;z-index:1}
.popupZone .popupList > li {position:absolute;top:0;left:0;width:100%;height:100%}
.popupZone .popupList a,.popupZone .popupList span {display:block;height:100%}
.popupZone .popupList .slide {display:block;width:100%;height:100%}
.popupZone .textPopup {position:absolute;top:0;left:0;width:100%;height:100%;padding:15px;box-sizing:border-box}
.popupZone .textPopup .tit {margin-bottom:5px;font-weight:bold;font-size:1.125em}

.schedule {position:relative;border:1px solid #e4e4e4}
.schedule h4 {padding:15px 25px;border-bottom:1px solid #e4e4e4}
.schedule .cont {position:relative;height:260px;padding-left:120px}
.schedule .guide {position:absolute;top:0;left:0;bottom:0;width:119px;border-right:1px solid #e4e4e4}
.schedule .guide .topGroup {position:relative;padding:20px 35px 10px;text-align:center}
.schedule .guide .arrow {position:absolute;top:40px;width:13px;height:21px;padding:0;background:url("/include/image/intro/main/btn_sp.png") 0 -80px no-repeat}
.schedule .guide .arrow.prev {left:14px}
.schedule .guide .arrow.next {right:14px;background-position:0 -110px}
.schedule .guide .topGroup p {line-height:1.2;color:#333}
.schedule .guide .year {font-size:1.333em;}
.schedule .guide .month {font-size:2.333em;font-weight:bold}
.schedule .guide select {overflow:hidden;display:block;height:24px;line-height:24px;padding:0 20px 0 5px;margin:0 auto;color:#fff;border:none;background:#777 url("/include/image/intro/main/arr_sel2.png") 100% center no-repeat;border-radius:12px}
.schedule .guide .info {position:absolute;left:10px;right:10px;bottom:15px}
.schedule .guide .info > li {font-size:0.867em;color:#7d7d7d}
.schedule .guide .info > li + li {margin-top:8px}
.schedule .guide .info i {display:inline-block;vertical-align:middle;background-size:100% !important}
.schedule .guide .info i.all {width:15px;height:15px;background:url("/include/image/intro/main/ico_cal_circle.png") 0 0 no-repeat}
.schedule .guide .info i.holiday {width:13px;height:13px;margin:0 1px;background:url("/include/image/intro/main/ico_cal_squre.png") 0 0 no-repeat}
.schedule .guide .info i.event {width:15px;height:15px;background:url("/include/image/intro/main/ico_cal_hexagon.png") 0 0 no-repeat}
.schedule .calendar {position:relative;padding:0 15px}
.schedule .calendar::before {content:"";display:block;position:absolute;top:0;left:0;width:100%;height:40px;background-color:#c3cbea}
.schedule .calendar table {position:relative;text-align:center}
.schedule .calendar table th {height:40px;font-weight:normal;line-height:40px;padding-bottom:10px;font-size:1.067em;color:#37558d}
.schedule .calendar table td {width:14.285%;padding:0;height:34px;font-size:1.067em;color:#777;text-align:center}
.schedule .calendar table td div {height:30px;line-height:30px}
.schedule .calendar td.sun {color:#d83a3a}
.schedule .calendar a {display:block}
.schedule .calendar a.all {color:#fff;background:url("/include/image/intro/main/ico_cal_circle.png") center center no-repeat}
.schedule .calendar a.event {color:#fff;background:url("/include/image/intro/main/ico_cal_hexagon.png") center center no-repeat}
.schedule .calendar a.holiday {color:#fff;background:url("/include/image/intro/main/ico_cal_squre.png") center center no-repeat}
.schedule .btnMore {position:absolute;top:20px;right:25px}
.schedule .btnMore a {background-position:0 -20px}

.shortcut .smlib {border:1px solid #e4e4e4}
.shortcut .smlib > a {position:relative;display:block;padding:20px 0 20px 100px;line-height:25px;font-size:1.267em}
.shortcut .smlib > a::before {content:"";display:block;position:absolute;top:50%;left:20px;width:65px;height:65px;margin-top:-32.5px;background:url("/include/image/intro/main/ico_service.gif") 0 0 no-repeat}
.shortcut > ul {overflow:hidden;margin-top:20px;border-top:1px solid #e4e4e4;border-left:1px solid #e4e4e4}
.shortcut > ul > li {float:left;width:50%;text-align:center}
.shortcut > ul a {display:block;height:96px;padding-top:10px;color:#666;border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}
.shortcut > ul a:hover i,.shortcut > ul a:focus i {opacity:0.7}
.shortcut > ul i {display:block;width:70px;height:60px;margin:0 auto;background:url("/include/image/intro/main/ico_service.gif") 0 -70px no-repeat}
.shortcut > ul i.ico1 {background-position:0 -70px}
.shortcut > ul i.ico2 {background-position:-70px -70px}
.shortcut > ul i.ico3 {background-position:-140px -70px}
.shortcut > ul i.ico4 {background-position:-210px -70px}
.shortcut > ul span {font-size:1.067em;letter-spacing:-0.5px}

#section3 {padding:30px 0;background-color:#f3f4f4}
.recomBook .tab {overflow:hidden;padding-bottom:30px; padding-right: 50px;}
.recomBook .tab > li {float:left;width:25%}
.recomBook .tab a {display:block;padding:12px 0;line-height:24px;font-size:1.2em;text-align:center;letter-spacing:-1px;background-color:#fff;border:1px solid #e4e4e4;border-left:none}
.recomBook .tab > li:first-child a {border-left:1px solid #e4e4e4}
.recomBook .tab > li.on a {position:relative;color:#fff;font-weight:bold;background-color:#515665;border-color:#373c4a}
.recomBook .tab > li.on a::after {content:"";display:block;position:absolute;left:50%;bottom:-24px;width:0;height:0;margin-left:-12px;border:12px solid transparent;border-top-color:#515665}
.recomBook .bookList {margin-right:-40px}
.recomBook .bookList::after {content:"";display:block;clear:both}
.recomBook .bookList > li {float:left;width:16.666%;text-align:center}
.recomBook .bookList > li .box {margin-right:40px}
.recomBook .cont {position: relative;}
.recomBook .cont .swiper-button-prev, .recomBook .cont .swiper-button-next {margin-top: -60px; width: 35px; height: 60px; background-size: auto;}
.recomBook .cont .swiper-button-prev {left: 0; background-image: url(/include/image/common/swiper_btnPrev.png);}
.recomBook .cont .swiper-button-next {right: 0; background-image: url(/include/image/common/swiper_btnNext.png);}
.recomBook .cont .box a {display: block; position: relative; padding-top: 138%; box-shadow: 25px 15px 20px -20px #aaa; background:#ddd url("/include/image/common/noimg_book.png") center center no-repeat;}
.recomBook .cont .box a img {display: block; position: absolute; left: 0; top: 0; width:100%;height:100%}
.recomBook .cont .box a:focus{border:1px dotted #555;}
.recomBook .cont .info {overflow:hidden;margin-top:10px;color:#585858;white-space:nowrap;text-overflow:ellipsis;text-align: center;}
.recomBook .cont .info + .info {margin-top:0}
.recomBook .cont .btnMore {position:absolute; top:-80px; right:0; width: 50px; height: 50px; background: #fff url("/include/image/common/btn_more.png") 50% 50% no-repeat; border:1px solid #e4e4e4; border-left:none; box-sizing: border-box;}
.recomBook .cont .nodata {width: 100%; line-height:200px;text-align:center}

.sns {position:relative}
.sns h4 {font-size:1.6em;line-height:40px;font-weight:normal}
.sns .tab {position:absolute;top:5px;right:0}
.sns .tab > li {float:left}
.sns .tab > li + li {margin-left:8px}
.sns .tab a {overflow:hidden;display:block;padding:5px 20px;height:20px;line-height:20px;font-size:1.067em;border-radius:15px;border:1px solid #ccc}
.sns .tab a.twitter {color:#55acee;border-color:#55acee}
.sns .tab a.facebook {color:#6672a8;border-color:#6672a8}
.sns .tab a.blog {color:#3cb878;border-color:#3cb878}
.sns .tab > li.on a {color:#fff}
.sns .tab > li.on a.twitter {background-color:#55acee}
.sns .tab > li.on a.facebook {background-color:#6672a8}
.sns .tab > li.on a.blog {background-color:#3cb878}
.sns .cont {overflow:auto;height:270px;margin-top:10px}
.snsList {position:relative;padding:10px 0}
.snsList::before {content:"";display:block;position:absolute;top:0;left:15px;width:2px;height:100%;background-color:#cacaca}
.snsList > li {position:relative;padding-left:50px}
.snsList > li + li {margin-top:20px}
.snsList > li::before {content:"";display:block;position:absolute;top:0;left:0;width:32px;height:32px;background:url("/include/image/intro/main/ico_sns.png") 0 0 no-repeat}
#twitter .snsList > li::before {background-position:0 0}
#facebook .snsList > li::before {background-position:0 -40px}
#blog .snsList > li::before {background-position:0 -80px}
.snsList .tit {overflow:hidden;margin-right:90px;line-height:30px;white-space:nowrap;text-overflow:ellipsis}
.snsList .tit a {color:#333;font-size:1.067em}
.snsList .desc {overflow:hidden;max-height:40px;line-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.snsList .desc a {font-size:0.867em;color:#666}
.snsList .date {position:absolute;top:0;right:2px;font-size:0.933em;line-height:30px;color:#999}



@media screen and (max-width:1000px){
	.libList {padding:10px}
	.mainService {padding:20px 10px}
	.mainService .arrowWrap {top:3px}

	.bbsListWrap .topGroup {padding:0 10px}
	.bbsListWrap .btnMore {right:12px}
	.bbsListWrap .cont {padding:15px 10px}

	#section2 {margin:0 10px}
	.popupZone {margin:20px 0}
	.shortcut {margin:20px 0}

	#section3 .sectionGroup {padding:0 10px}
	.recomBook .bookList {margin-right:0}
	.recomBook .bookList > li {width:33.33%}
	.recomBook .bookList > li .box {margin-right:0}
	.sns {margin-top:20px}

	/* 메인하단 성남소식 */
	#section4 .sectionGroup{padding:15px 10px;}
	.snsNews{padding:0 10px 0 70px;}
	.snsNews .list li + li{margin-left:0;}
	.snsNews .list li a{border:none;background:none;}
	.snsNews .list li a::before{margin:0;}
	.snsNews .list span{display:none;}
}
@media screen and (max-width:640px){
	.libList .box {height:auto}
	.libList .box ul {position:inherit;left:inherit;right:inherit;bottom:inherit;margin:40px 10px 15px 0}
	.libList .box ul > li {width:50%}

	/* 메인 모바일회원증 */
	.mobileMemArea {margin: 15px 0;}

	.mainService .listWrap ul > li {width:25%}

	.recomBook .tab > li {width:50%}
	.recomBook .tab > li.on a::after {display:none}
	.recomBook .bookList > li {width:50%;margin-bottom:20px}
	.recomBook .bookList .info {height:40px}
}
@media screen and (max-width:480px){
	.libList .slogan {padding-left:10px}
	.libList .desc {padding-left:15px}

	.mainService .listWrap ul a i {transform:scale(0.8)}

	.bbsListWrap::before {height:55px}
	.bbsListWrap .tab {width:100%;padding:10px 0}
	.bbsListWrap .selectLibrary {float:right;margin-top:10px}
	.bbsListWrap .cont {padding:10px}
	.bbsListWrap .btnMore {top:-82px}

	.sns {margin-top:0}
	.sns h4 {float:left;width:100%}
	.sns .tab {float:right;position:inherit;top:inherit;right:inherit;margin-bottom:10px}
	.sns .cont {clear:both}
}
@media screen and (max-width:375px){
	.slogan img {max-width:60%}
	.recomBook .bookList a {width:120px;height:165px}
}
@media screen and (max-width:360px){
	.mainService .listWrap ul > li {width:33.33%}
}
@media screen and (min-width:1000px){
	.sectionGroup {width:1200px;margin:0 auto}
	#section1 {overflow:hidden;position:relative;height:570px}
	#section1 > div {position:absolute;top:0;bottom:0;width:50%}
	#section1 .leftArea {left:0}
	#section1 .leftArea .box {float:right;overflow:hidden;width:583px;margin:15px 15px 15px 0}
	#section1 .rightArea {right:0}
	.libList .box ul a:hover, .libList .box ul a:focus {border:2px solid #bcc7ff; background-color:#5964a1}

	.mainService .box {width:565px;height:215px;padding:25px 0 0 35px}
	.mainService .listWrap ul a:hover p, .mainService .listWrap ul a:focus p {text-decoration:underline}

	.bbsListWrap {height:330px}
	.bbsListWrap > div {width:565px;padding-left:35px !important}
	.bbsListWrap .topGroup {padding-left:35px}
	.bbsListWrap .cont {padding:15px 0}
	.bbsListWrap .cont a:hover, .bbsListWrap .cont a:focus {text-decoration:underline}

	#section2 {padding:40px 0}
	.popupZone {float:left;width:460px;margin-right:20px;}
	#scheduleCalendar {float:left;width:428px;}
	.schedule {float:left;width:428px;}
	.shortcut {float:left;width:270px;margin-left:20px;}

/*
	.recomBook {float:left;width:710px}
	.sns {float:right;width:440px}
*/
	.snsList a:hover, .snsList a:focus {text-decoration:underline}
}