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


#section1 {overflow: hidden; position: relative; padding:80px 0 0;height:780px;}
#section3{padding:74px 0 78px;}
#section4{background:url("/include/image/main/bg_recommend.jpg") no-repeat 0 0;background-size:cover;padding:84px 0;}
.sectionGroup {position: relative; max-width: 1800px; margin: 0 auto;}

.mainTit{font-size:1.500em;color:#333;font-weight:700;margin-bottom:15px;font-size:1.875em;}
.gnb > li > ul{top:120px;}

#footer{margin-top:0;}
/* 메인 배경 이미지 롤링 */
.backImg {position: absolute; left: 0; top: 0; width: 100%; height:780px; z-index: 0;}
.backImg .popupList {overflow: hidden; height: 100%;}
.backImg .popupList.thumb {position: relative;}
.backImg .popupList.thumb > li {position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-repeat:no-repeat;background-position:center top;background-size:cover;}
.backImg .popupList.thumb > li .inner{width:1800px;margin:0 auto;top:0;left: 0;max-width: 1800px;height: 100%;color:#fff;white-space:nowrap;position: relative;}
.backImg .popupList.thumb > li .inner p{position:absolute;left:40px;bottom:25px;font-size: 1.250em;color:#fff;}
.backImg .popupList.thumb > li:nth-child(1) {background-image:url("/include/image/main/visual_1.jpg");}
.backImg .popupList.thumb > li:nth-child(2) {background-image: url("/include/image/main/visual_2.jpg?ver=20250422")}
.backImg .popupList.thumb > li:nth-child(3) {background-image: url("/include/image/main/visual_3.jpg");}
.backImg .pp-controls, .backImg .arrowWrap{display:none;}

/* 처음오셨나요? 레이어팝업 */
.bannerBtn {position: absolute; right:-88px; top: 0;animation: float-vertical 1.5s ease-in-out infinite alternate;}
@keyframes float-vertical{0%{transform:translateY(0);}100%{transform: translateY(-20px);}}
.chart-pop {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .4);}
.chartPopinner {width: 730px; position: relative;border-radius:5px;overflow:hidden;}
.chartPopinner .chart-close01{width:40px;height:40px;position: absolute;top:32px;right:31px;z-index:1;}
.chartPopinner .chart-close01::before,
.chartPopinner .chart-close01::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height:2px;background-color:#fff;border-radius:1px;}
.chartPopinner .chart-close01::after{transform:translate(-50%, -50%) rotate(-45deg);}
.chartPopinner h4 {padding: 20px; font-size: 1.176em; color: #fff; font-weight: 300;background: linear-gradient(70deg, #8dc63f 85%,#6a6fb3 85%,#6a6fb3 100%);position:relative;z-index:1;}
.chartPopinner h4::after {content: "";background: url("/include/image/main/bg_first.png") no-repeat 0 0;position:absolute;right:112px;bottom:-11px;width:105px;height:110px;}
.chartPopinner .layer-content {overflow: hidden; position: relative; background-color: #fff;padding:20px 30px 40px;}

.chartFirst .subTit{font-size:1.333em;font-weight:700;margin-bottom:10px;}
.chartFirst .conTxt + .conTxt{margin-top:20px;}
.chartFirst .list {display: flex;margin-left:-20px;overflow: hidden;}
.chartFirst .list > li{width:calc(25% - 20px);margin-left:20px;text-align:center;}
.chartFirst .list > li a{display:block;border:1px solid #e2e2e2;border-radius:5px;padding:10px 0;line-height:1.2;}
.chartFirst .list > li a span{font-weight:700;color:#777;font-size:1.125em;}
.chartFirst .list > li a:focus,
.chartFirst .list > li a:hover{border-color:#d8d8ef;background:#f1f1fa;}
.chartFirst .list > li a:focus span,
.chartFirst .list > li a:hover span{color:#6a6fb3;}
.chartFirst .list > li .ico::before{content:"";display:block;width:100px;height:100px;background: url("/include/image/main/ico_first.png") no-repeat 0 0;margin:0 auto;}
.chartFirst .list > li.first1 .ico::before{background-position:0 0;}/* 회원가입 */
.chartFirst .list > li.first2 .ico::before{background-position:0 -100px;}/* 대출/반납/예약 */
.chartFirst .list > li.first3 .ico::before{background-position:0 -200px;}/* 도서관지도 */
.chartFirst .list > li.first4 .ico::before{background-position:0 -300px;}/* 자주하는질문 */
.chartFirst .list > li.first5 .ico::before{background-position:0 -400px;}/* 통합검색 */
.chartFirst .list > li.first6 .ico::before{background-position:0 -500px;}/* 대출인기도서 */
.chartFirst .list > li.first7 .ico::before{background-position:0 -600px;}/* 신착자료 */
.chartFirst .list > li.first8 .ico::before{background-position:0 -700px;}/* 사서추천도서 */
.chartFirst br{display:none;}

/* 상단검색영역 */
.mainLibWrap{position:relative;padding:35px 0 0 0;}
.mainLibWrap .slogan p{color:#fff;font-size:2.188em;text-shadow:0 0 10px #000;}
.mainLibWrap .slogan p strong{font-size:1.543em;font-weight:700;}
.mainSearchForm{box-shadow:0 0 10px rgba(0, 0, 0, 0.5);border-radius:5px;overflow:hidden;position:relative;margin:47px 80px 87px 0;}
.mainSearchForm .mainSearchKeyword input{width:calc(100% - 80px); height: 70px;line-height: 70px;background: rgba(255, 255, 255, 0.95);font-size:1.250em;border-radius:0;}
.mainSearchForm .btnSearch{position: absolute;top: 0;right:0;width: 80px;height: 100%;background:#6b6ab0 url("/include/image/main/btn_search.png") no-repeat 50% 50%;opacity:0.9;}

/* 바로가기 */
.shortcut li{float:left;text-align:center;}
.shortcut li a{display:block;}
.shortcut li + li{margin-left:30px;}
.shortcut li .ico{display:block;width:144px;height:144px;border-radius:50%;position: relative;display:block;background-color:rgba(255, 255, 255, 0.7);margin:0 auto 5px;}
.shortcut li .ico::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);
background:url("/include/image/main/ico_svc.png") no-repeat 0 0;width:100px;height:100px;}
.shortcut li .txt{color:#fff;font-size:1.250em;font-weight:700;line-height:1.2;}
.shortcut li .txt br{display:none;}
.shortcut li.svc1 .ico::after{background-position:0 0;}/* 나만의 도서관 */
.shortcut li.svc2 .ico::after{background-position:0 -100px;}/* 도서관 견학신청 */
.shortcut li.svc3 .ico::after{background-position:0 -200px;}/* 희망도서신청 */
.shortcut li.svc4 .ico::after{background-position:0 -300px;}/* 자원봉사신청 */
.shortcut li.svc5 .ico::after{background-position:0 -400px;}/* 원문서비스 */
.shortcut li.svc6 .ico::after{background-position:0 -500px;}/* 문의/건의하기 */

.visualConWrap {display:flex;}
.visualConWrap .rt{width:630px;margin-left:auto;}
.visualConWrap .rt .popupZone {width:100%;position:relative;}

/* 팝업존 */
.popupZone {padding:20px;padding-top:0;}
.popupZone .swiper-container{border-radius:10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.7);overflow:hidden;}
.popupZone .swiper-slide a{display:block;}
.popupZone .swiper-slide-active a:focus{border:2px solid #000;}
.popupZone .cover{display:block;position:relative;overflow:hidden;padding-top:100%;}
.popupZone .cover img{position:absolute;left:0;top:0;width:100%;height:100%;}
.popupZone .title{color:#fff;font-size:1.500em;margin-bottom:10px;}
.popupZone .controlArea{position:absolute;right:23px;top:4px;z-index:1;overflow:hidden;}
.popupZone .controlArea .pagination{float:left;color:#fff;font-size:1.111em;}
.popupZone .controlArea .pagination .swiper-pagination-current{font-size:1.150em;font-weight:700;}
.popupZone .controlArea .controls{float:left;color:#fff;margin: 5px 0 0 20px;}
.popupZone .controlArea a{display:block;background:url("/include/image/main/btn_roll.png") 50% 0 no-repeat;width:12px;height:20px;float:left;margin:0 5px;}
.popupZone .controlArea .btnSlidePrev{background-position-y:0}
.popupZone .controlArea .btnSlideNext{background-position-y:-20px;}
.popupZone .controlArea .btnSlidePause{background-position-y:-40px;}
.popupZone .controlArea .btnSlidePlay{background-position-y:-60px;}
.popupZone .cover {border-radius: 3px;position: relative;display: block;padding-top: 100%;overflow: hidden;}
.popupZone .cover img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

/* popup template */
.popupZone .textPopup {overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0;word-break:keep-all;letter-spacing:-1.2px;}
.popupZone .textPopup .title {line-height:1.3;}

.popupZone.public img[src$="bg_pzTemp01.jpg"] ~ .textPopup {margin:6.382978723404255% 12.72727272727273%;text-align:center;border-radius:50%}
.popupZone.public img[src$="bg_pzTemp01.jpg"] ~ .textPopup .title {padding-top:20%;font-weight:700;font-size:2.250em;color:#333;margin:0 10%;}
.popupZone.public img[src$="bg_pzTemp01.jpg"] ~ .textPopup .summary {margin:5% 10px;font-size:1.375em;color:#737373}
.popupZone.public img[src$="bg_pzTemp01.jpg"] ~ .textPopup .desc {padding:0 6.521739130434783%;font-weight:700;font-size:1.500em;color:#237dd8}

.popupZone.public img[src$="bg_pzTemp02.jpg"] ~ .textPopup {padding:15.574468085106383% 6.382978723404255% 0}
.popupZone.public img[src$="bg_pzTemp02.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#fcc04a;text-align:center;}
.popupZone.public img[src$="bg_pzTemp02.jpg"] ~ .textPopup .summary {margin:6% 10px;font-size:1.375em;color:#fff;min-height:35%;}
.popupZone.public img[src$="bg_pzTemp02.jpg"] ~ .textPopup .desc {position:absolute;top:74.11764705882353%;right:6.382978723404255%;left:6.382978723404255%;font-size:1.250em;color:#4b4540}

.popupZone.public img[src$="bg_pzTemp03.jpg"] ~ .textPopup {padding:15.446808510638298% 7.446808510638298% 0;text-align:center}
.popupZone.public img[src$="bg_pzTemp03.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#d13507;}
.popupZone.public img[src$="bg_pzTemp03.jpg"] ~ .textPopup .summary {margin:7% 0;font-size:1.313em;color:#000}
.popupZone.public img[src$="bg_pzTemp03.jpg"] ~ .textPopup .desc {padding:15px;font-size:1.250em;color:#74630d;text-align:left;border-radius:10px;background-color:rgba(255,255,255,.7)}

.popupZone.public img[src$="bg_pzTemp04.jpg"] ~ .textPopup {padding:7.446808510638298% 7.446808510638298% 0;text-align:center}
.popupZone.public img[src$="bg_pzTemp04.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#8ac4f6;}
.popupZone.public img[src$="bg_pzTemp04.jpg"] ~ .textPopup .summary {margin:7% 0;font-size:1.313em;color:#fff;}
.popupZone.public img[src$="bg_pzTemp04.jpg"] ~ .textPopup .desc {padding:15px;font-size:1.250em;color:#666;text-align:left;border-radius:10px;background-color:#fff}

.popupZone.public img[src$="bg_pzTemp05.jpg"] ~ .textPopup {padding:7.446808510638298% 7.446808510638298% 0;text-align:center}
.popupZone.public img[src$="bg_pzTemp05.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#004c5e;}
.popupZone.public img[src$="bg_pzTemp05.jpg"] ~ .textPopup .summary {margin:6% 0;font-size:1.313em;color:#515151;}
.popupZone.public img[src$="bg_pzTemp05.jpg"] ~ .textPopup .desc {padding:15px;font-size:1.250em;color:#666;text-align:left;border-radius:10px;background-color:#fff}

.popupZone.public img[src$="bg_pzTemp06.jpg"] ~ .textPopup {padding:7.446808510638298% 8.51063829787234% 0;text-align:center}
.popupZone.public img[src$="bg_pzTemp06.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#07bd41;}
.popupZone.public img[src$="bg_pzTemp06.jpg"] ~ .textPopup .summary {margin:6% 0;font-size:1.313em;color:#000;}
.popupZone.public img[src$="bg_pzTemp06.jpg"] ~ .textPopup .desc {margin:6% 0;font-size:1.250em;color:#666;text-align:left;letter-spacing:-0.05em}

.popupZone.public img[src$="bg_pzTemp07.jpg"] ~ .textPopup {padding:7.446808510638298% 7.446808510638298% 0;text-align:center}
.popupZone.public img[src$="bg_pzTemp07.jpg"] ~ .textPopup .title {position:relative;padding-bottom:30px;font-weight:700;font-size:2.250em;color:#dc2f50;margin-bottom:0;}
.popupZone.public img[src$="bg_pzTemp07.jpg"] ~ .textPopup .title::before {content:"";position:absolute;bottom:10px;left:0;width:100%;height:2px;background-color:#fff}
.popupZone.public img[src$="bg_pzTemp07.jpg"] ~ .textPopup .title::after {content:"";position:absolute;bottom:0;left:50%;width:24px;height:23px;margin-left:-12px;background:url("/include/image/popupzone/bg_pzTemp07_title.png") 50% 100% no-repeat}
.popupZone.public img[src$="bg_pzTemp07.jpg"] ~ .textPopup .summary {margin:6% 0;font-size:1.313em;color:#333;}
.popupZone.public img[src$="bg_pzTemp07.jpg"] ~ .textPopup .desc {padding:15px;font-size:1.250em;color:#666;text-align:left;border-radius:10px;background-color:rgba(255,255,255,.7)}

.popupZone.public img[src$="bg_pzTemp08.jpg"] ~ .textPopup {padding:7.446808510638298% 7.446808510638298% 0}
.popupZone.public img[src$="bg_pzTemp08.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#fdfb39;}
.popupZone.public img[src$="bg_pzTemp08.jpg"] ~ .textPopup .summary {min-height:32.5%;margin:8% 10% 12% 0;font-size:1.313em;color:#fff;}
.popupZone.public img[src$="bg_pzTemp08.jpg"] ~ .textPopup .desc {margin:6% 0;font-size:1.250em;color:#494848;text-align:left;}

.popupZone.public img[src$="bg_pzTemp09.jpg"] ~ .textPopup {padding:7.446808510638298% 7.446808510638298% 0}
.popupZone.public img[src$="bg_pzTemp09.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#812300}
.popupZone.public img[src$="bg_pzTemp09.jpg"] ~ .textPopup .summary {margin:6% 0;font-size:1.313em;color:#333;}
.popupZone.public img[src$="bg_pzTemp09.jpg"] ~ .textPopup .desc {padding: 15px;font-size: 1.250em;color: #666;text-align: left;border-radius: 10px;background-color: rgba(255,255,255,.7);}

.popupZone.public img[src$="bg_pzTemp10.jpg"] ~ .textPopup {padding:7.446808510638298% 7.446808510638298% 0}
.popupZone.public img[src$="bg_pzTemp10.jpg"] ~ .textPopup .title {font-weight:700;font-size:2.250em;color:#4a5169;}
.popupZone.public img[src$="bg_pzTemp10.jpg"] ~ .textPopup .summary {min-height:30%;margin:6% 0;font-size:1.313em;color:#3155a5;}
.popupZone.public img[src$="bg_pzTemp10.jpg"] ~ .textPopup .desc {margin:6% 0;font-size:1.250em;color:#fff;text-align:left;}


/* 더보기 - 공통 */
.more{position: absolute; right:0; top:0;border:1px solid #999;width:29px;height:29px;}
.more::before,.more::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: calc(100% - 12px);height: 2px;background-color:#555;}
.more::after{transform:translate(-50%, -50%) rotate(90deg);}

.holidayNotice {display: flex; align-items: center; justify-content: center; height: 120px;}
.holidayNotice::before{content: ""; width: 38px; height: 42px; background: url("/include/image/main/ico_bell.png") 0 0 no-repeat; margin-right:10px; background-size: 100%;}
.holidayNotice div {color: #333; font-size: 1.222em;}
.holidayNotice div strong {font-size: 1.273em;}

/* 도서관 바로가기 */
.libraryList {overflow: hidden; position: relative;display:flex;height:480px;}
.libraryList .tabArea {overflow: hidden; position: relative; padding: 30px; background:#8dc63f;}
.libraryList .tabArea ul {margin-left: -20px; margin-top: -20px;padding-top:20px;}
.libraryList .tabArea ul li {float: left; width: calc(50% - 20px); margin-left:20px; margin-top:20px; position: relative;}
.libraryList .tabArea ul li a, .libraryList .tabArea ul li button {display: block; width: 100%; line-height: 60px; font-size: 1.313em; font-weight:700; color: #fff;  text-align: center; background-color: #6db027;border-radius:5px;}
.libraryList .tabArea ul li.on a {background-color: #4e9a10;}
.libraryList .tabArea ul li .holiday {background-color:#f7324b; color:#fff; position:absolute; right:0; top:-50%; padding:2px 10px; font-size:0.944em; transform:translateY(50%);}
.libraryList .tabArea ul li button.small, .libraryList .tabArea ul li button.elib, .libraryList .tabArea ul li.on button.small, .libraryList .tabArea ul li.on button.elib {line-height: 68px; background-color: #fff; border: 1px solid #e1e3e9; color: #333; font-size: 1.125em; cursor: pointer;}
.libraryList .tabArea ul li button.small::before {content: ""; display: inline; padding: 3px 0 3px 33px; background: url(/include/image/main/ico_small.png) 0 50% no-repeat;}
.libraryList .tabArea ul li button.elib::before {content: ""; display: inline; padding: 3px 0 3px 33px; background: url(/include/image/main/ico_elib.png) 0 50% no-repeat;}
.libraryList .tabArea ul li span {position: absolute; left: 0; top: 0; width: 44px; height: 23px; line-height: 22px; font-size: 0.813em; color: #fff; text-align: center; background-color: #d92c41;}
.libraryList .tabArea .mainTitle {color:#333;font-size:1.875em;}
.libraryList .tabArea .txt {color:#333;font-size:1.250em;margin-top:8px;}
.libraryList .infoZone{position:relative;padding:34px 20px 0 60px;}

.libraryList .infoArea {position: relative;width:50%;background:#f7f7f8;}
.libraryList .infoArea .img {border-radius: 5px;padding-top: 48.6%;position: relative;display: block;overflow: hidden;margin-bottom:25px;background: #f0f0f3 url("/include/image/board/bg_noPhoto.png") 50% 50% no-repeat;}
.libraryList .infoArea .img img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.libraryList .infoArea .name {margin: 0 0 19px; padding-left: 5px;font-size: 1.688em; line-height: 1; color: #222;height:40px;line-height:40px;}
.libraryList .infoArea .name span {font-size: 0.800em; color: #555; font-weight: normal;}
.libraryList .infoArea .name.fs_small {font-size:1.388em;}

/* 도서관이용안내 - 전자도서관/스마트도서관  */
.tab-cont .location{position:relative;}
.tab-cont .location span {display: inline-block;position: relative;padding-right: 12px;margin-right: 9px;letter-spacing: -0.5px;}
.tab-cont .location span:first-child::after{content: "";position: absolute;right: 0;top: 50%;width: 1px;height: 14px;margin-top: -7px;background-color: #ccc;}
.tab-cont .libInfo li{font-size:1.250em;line-height:1.8;letter-spacing:-0.1px;}
.tab-cont .libInfo li .bar{vertical-align:middle;}

.libraryOther{background:#f7f7f8;display:flex;}
.otherLibSel{width:100%;border:1px solid #999;font-size:1.333em;color:#555;margin-bottom:35px;}
.otherLibTab .list{display: flex;flex-direction: column;}
.otherLibTab .list > li a{display:block;background:#ebebec;border-radius:5px;height:40px;line-height:40px;padding:0 10px;font-size:1.250em;}
.libraryOther .otherLibTab,
.libraryOther .otherLibCon{width:50%;}
.libraryOther .otherLibTab{padding:33px 25px 50px 50px;}
.libraryOther .otherLibCon{width:50%;padding:33px 50px 50px 25px;display:none;}
.libraryOther .otherLibCon.on{display:block;}
.libraryOther .otherLibCon .more{right:50px;top:35px;}

.otherLibTab .list{display:none;}
.otherLibTab .list > li.on a,
.otherLibTab .list > li a:hover,
.otherLibTab .list > li a:focus{background:#e1ecd3;}
.otherLibTab .list > li + li{margin-top:15px;}
.otherLibTab .list > li span::after{content:"";width:1px;height:10px;display:inline-block;background:#ababab;margin:0 10px;}

.otherLibCon .name .baseLib::before{content:"";width:38px;height:38px;display:inline-block;background: url("/include/image/main/ico_mainbaseLib.png") no-repeat 0 0;vertical-align:middle;}
.otherLibCon .name .baseLib{margin-right:10px;}


/* 도서관 이용안내, 공지사항 */
.noticeZone,
.libraryList .tabArea{width:25%;}
.festivalZone{width:75%;}
.libraryList .snsArea{width:25%;}
.libraryList .infoZone .more{top:40px;}

/* 달력 */
.calZone {overflow: hidden; position: relative;padding:30px 50px;}
.schedule .top {overflow: hidden; position: relative; padding:0 10px 19px;}
.schedule .top h5 {float: left; font-size: 1.471em; color: #fff; font-weight: 500;}
.schedule .top .guide {position: relative; text-align: center; padding: 0 30px;}
.schedule .top .guide .arrow {position: absolute; top: 50%; width: 20px; height: 30px; margin-top: -15px;font-size:1.278em;}
.schedule .top .guide .arrow.prev {left: 0;}
.schedule .top .guide .arrow.next {right: 0;}
.schedule .top .guide .year {font-size: 1.563em; font-weight: 500; color: #333;}
.schedule .top .guide .year span {font-size:1.080em;}

.schedule .guide_info {text-align:right;margin-top:3px;}
.schedule .guide_info ul > li {display: inline-block; color: #555; margin-left: 15px;}
.schedule .guide_info ul > li + li {margin-left: 10px;}
.schedule .guide_info ul i {display: inline-block; vertical-align: middle; margin-top:-2px;}
.schedule .guide_info ul i.all {width: 14px; height: 14px; background: #1193ac; border-radius: 100%;}
.schedule .guide_info ul i.holiday {width: 14px; height: 14px; background: #f6881c;}

.schedule .cont {position: relative;}
.schedule .calendar {position: relative;}
.schedule .calendar table {position: relative; text-align: center;table-layout: fixed;}
.schedule .calendar table th {height: 36px; font-weight:700; border-bottom: 1px solid #777;border-top:1px solid #777;color: #333;font-size:1.188em;}
.schedule .calendar table td {width: 14.285%; height: 35px; padding-top: 10px; text-align: center; color: #333;font-size:1.188em;}
.schedule .calendar table td div {height: 30px; line-height: 30px;}
.schedule .calendar td.sun {color: red;}
.schedule .calendar td.sat {color: blue;}
.schedule .calendar a {display: block; width: 30px; margin: 0 auto;}
.schedule .calendar a.holiday {color: #fff; background: #1193ac; border-radius: 100%;}
.schedule .calendar a.festival {color: #fff; background: #f6881c;}

/* SNS 소통마당 */
.libraryList .snsArea{background:#efefef;padding:34px 40px;position: relative;}
.libraryList .snsArea .title{font-size:1.688em;margin-bottom:14px;}
.libraryList .snsArea .thum .cover{border-radius:5px;padding-top:70%;position:relative;display: block;overflow: hidden;
background: #f8f8fa url(/include/image/board/bg_noPhoto.png) 50% 50% no-repeat;border: 1px solid #e1e1e1;}
.libraryList .snsArea .thum img{position:absolute;left:0;top:0;width:100%;height:100%;}
.libraryList .snsArea .txt{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:1.250em;margin-top:10px;}
.libraryList .snsArea .snsGroup{position: absolute;right:40px;top:30px}
.snsGroup .icoSns{display:inline-block;width:40px;height:40px;background:url("/include/image/main/ico_sns_main.png") no-repeat 0 0;background-size:100%;transform: rotate(0.033222deg);}
.snsGroup .icoSns.youtube{background-position:0 0;}/* 유튜브 */
.snsGroup .icoSns.facebook{background-position:0 -40px;}/* 페이스북 */
.snsGroup .icoSns.kakaotalk{background-position:0 -80px;}/* 카카오톡 */
#section1 .snsGroup{text-align:right;margin-right:0;display:none;}

/* 공지사항 */
#section3 .sectionGroup{overflow:hidden;}
.noticeZone {position: relative;}
.noticeZone .more {right: 0; top: -62px;}
.noticeZone .tab{margin-bottom:25px;}
.noticeZone .tab > li {float: left; position: relative; z-index: 1;}
.noticeZone .tab > li a {display: block;font-weight: 700; color: #777; ;font-size:1.750em;}
.noticeZone .tab > li + li{padding-left:30px;}
.noticeZone .tab > li.on{top:-3px;}
.noticeZone .tab > li.on a{color:#333;font-size:1.875em;}
.boardListWrap {position: relative;min-height:270px;}
.boardListWrap ul li {position: relative;}
.boardListWrap ul li + li {margin-top:23px;}
.boardListWrap ul li.emptyNote{font-size:1.111em;color:#464646;font-weight:700;padding:0;padding-top:70px;text-align:center;}
.boardListWrap ul li.emptyNote p::before{content:"";width:20px;height:20px;display:block;background: url("/include/image/common/ico_emptyNote.png") no-repeat 0 0;width:68px;height:55px;margin-right:20px;margin:0 auto 15px;}
.boardListWrap ul li .libFB{border:1px solid #999;color:#777;width:60px;height:48px;line-height:48px; text-align: center;float:left;margin-right:10px;}
.boardListWrap ul a {display: block; font-size:1.188em; line-height: 28px; color: #464646; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.boardListWrap ul li .date {color: #777;}

/* 도서관 행사안내 */
.festivalZone{position:relative;}
.festivalZone .top{display:flex}
.festivalZone .top p{margin:10px 0 0 20px;font-size:1.111em;color:#777;}
.fesivalList{display:flex;margin-left:-30px;}
.fesivalList > li{margin-left:30px;width:calc(25% - 30px)}
.fesivalList > li a{display:block;}
.fesivalList > li.emptyNote{font-size:1.111em;color:#464646;font-weight:700;padding:0;padding-top:70px;text-align:center;width:100%;margin-left:0;}
.fesivalList > li.emptyNote p::before{content:"";width:20px;height:20px;display:block;background: url("/include/image/common/ico_emptyNote.png") no-repeat 0 0;width:68px;height:55px;margin-right:20px;margin:0 auto 15px;}
.fesivalList > li .caption > li{margin-top:3px;}

.fesivalList .thum{margin-bottom:15px;}
.fesivalList .statusBox{overflow:hidden;}
.fesivalList .statusBox .status{float:left;border-radius:3px;padding:0 5px;color:#fff;background:#777;font-size:1em;border: 1px solid #999;}
.fesivalList .statusBox .status.maining{background-color: #f7324b;border-color: #f7324b;}/* 접수중 */
.fesivalList .statusBox .status.mainwait{background-color: #009fe0 !important;border-color: #009fe0 !important;}/* 대기자접수 */
.fesivalList .statusBox .status.mainfinish{color: #607287;background-color: #fff;border-color: #607287}/* 접수마감 */
.fesivalList .statusBox .status.mainready{background:#1193ac;border-color: #1193ac;}/* 접수예정 */
.fesivalList .statusBox .status.mainend{color: #97a3b1; background-color: #fff; border-color: #97a3b1;}/* 종료 */
.fesivalList .statusBox .status.mainonline{color: #fff; background-color: #6e7277; border-color: #6e7277;}/* 온라인 */


.fesivalList .statusBox .name{float:right;color:#777;font-size:1.063em}
.fesivalList .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.188em;color:#333;font-weight:700;margin:8px 0;}
.fesivalList > li .thum .cover{overflow:hidden;padding-top:70%;position:relative;display:block;background: #f8f8fa url("/include/image/board/bg_noPhoto.png") 50% 50% no-repeat;
border: 1px solid #e1e1e1;background-size:40%;}
.fesivalList > li .thum .cover img{position:absolute;left:0;top:0;width:100%;height:100%}
.fesivalList .caption > li dl{overflow:hidden;}
.fesivalList .caption > li dl dt{float:left;color:#555;font-size:1.063em;margin-right:10px;}
.fesivalList .caption > li dl dd{overflow:hidden;color:#777;font-size:1.063em;text-overflow:ellipsis;white-space:nowrap;}

/* 추천도서 */
.bookZone .tab > li a{display:block;background-color:#fff;font-weight:700;font-size:1.250em;color:#777;}
.bookZone .tabBox .title{font-size:1.813em;color:#333;font-weight:700;margin-bottom:15px;}
.bookZone .tab > li.on a{background:#6b6ab0;color:#fff;font-size:1.375em;}
.bookZone .moreB{position: absolute; border:1px solid #999;width:29px;height:29px;left:213px;bottom:30px;background:#fff;}
.bookZone .moreB::before,
.bookZone .moreB::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: calc(100% - 12px);height: 2px;background-color:#555;}
.bookZone .moreB::after{transform:translate(-50%, -50%) rotate(90deg);}
.bookZone .moreB a{display:block;width:100%;height:100%;}
.bookZone .tabBox .tab{display:flex;margin-bottom:40px;padding-right:50px;}
.bookZone .tabBox .tab li{flex:1;text-align:center;border-right:1px solid #ededed;}
.bookZone .tabBox .tab li a{height:60px;line-height:60px;}

.bookList{margin-left:-60px;}
.bookList > li{float: left;width: calc(20% - 60px);text-align: center;margin-left:60px;}
.bookList > li.emptyNote{width:100%;min-height:270px;}
.bookList > li.emptyNote{font-size:1.111em;color:#464646;font-weight:700;padding-top:115px;margin:0;}
.bookList > li.emptyNote p::before{content:"";width:20px;height:20px;display:inline-block;background: url(/include/image/common/ico_emptyNote.png) no-repeat 0 0;width:68px;height:55px;margin-right:20px;vertical-align:middle;}
.bookList > li .txt{display:block;}
.bookList > li .cover{display:block;position:relative;overflow:hidden;padding-top:141%;background: #f8f8fa url(/include/image/board/ico_noImg.png) no-repeat 50% 50%;
border: 1px solid #e1e1e1;}
.bookList > li .cover a{outline:1px solid #000;}
.bookList > li .cover img{position:absolute;left:0;top:0;width:100%;height:100%;}


/* 모바일회원증 */
.mainMemerOpen{display:block;width:100%;height:50px;line-height:50px;background:#6a6fb3;color:#fff;text-align:center;border-radius:0 0 25px 25px;-webkit-box-shadow:  0px 10px  10px rgb(0 0 0 / 30%);
box-shadow: 0px 10px  10px rgb(0 0 0 / 30%);font-size:1.278em;font-weight:700;}
.mainMemerOpen::before{content:"";display:inline-block;background:url("/include/image/main/ico_barcode.png") no-repeat 0 0;background-size:100%;width:31px;height:19px;vertical-align:middle;margin-right:10px;}
/* 로그인시 회원바코드 레이어팝업 */
.mainMemerWrap{display:none;position:absolute;top:0;width:100%;border-radius:0 0 25px 25px;-webkit-box-shadow:  0px 10px  10px rgb(0 0 0 / 30%);
box-shadow: 0px 10px  10px rgb(0 0 0 / 30%);z-index:40;text-align:center;padding:20px 15px;
background:#6a6fb3 url("/include/image/main/bg_barcode.png") no-repeat right bottom;background-size:30%;}
.mainMemerWrap .barcode{width:100%;}
.mainMemerWrap .img{border-radius:10px;background:#fff;width:100%;padding:30px 20px;}
.mainMemerWrap .img img{width:300px;margin:0 auto;}
.mainMemerWrap .num{color:#fff;font-size:1.111em;padding-top:15px;}
.mainMemerWrap .btnClose{width:50px;height:50px;border-radius:50%;background:#fff;    position: absolute;
bottom: -75px;left: 50%;transform: translateX(-50%);}
.mainMemerWrap .btnClose::before,
.mainMemerWrap .btnClose::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(45deg);width: calc(100% - 26px);height:3px;background-color:#777;border-radius:1px;}
.mainMemerWrap .btnClose::after{transform:translate(-50%, -50%) rotate(-45deg);}
.mainMemerWrap .btnSlidePrev,
.mainMemerWrap .btnSlideNext{display:none;width:10px;height:18px;background-size:100%;background-repeat:no-repeat;position:absolute;z-index:1;}
.mainMemerWrap .btnSlidePrev{background-image:url("/include/image/main/prev_barcode.png");left:0;bottom:0;}
.mainMemerWrap .btnSlideNext{background-image:url("/include/image/main/next_barcode.png");right:0;bottom:0;}
.barcodeblackBG {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 39;background-color: #000;opacity: 0.5;}


/****** 미디어쿼리 시작 ******/
@media screen and (max-width:1800px){  
#section1{padding:80px 0 50px;}
#section3{padding:40px 0 50px;}
#section4{padding:40px 0 50px;}

.gnb > li > ul{top:83px;}

/* 추천도서 */
.bookZone .tabBox .title{display:none;}
.bookZone .moreB {width:50px;height:60px;left:auto;right: 0;top: 0;background: #fff;border:none;border-left:1px solid #f0f0f0;}
.bookZone .moreB::before,
.bookZone .moreB::after{width: calc(100% - 30px);}

/* 도서관 이용안내 */
.tab-cont .libInfo li{line-height:1.6;}

/* SNS소통마당 */
#section1 .snsGroup{display:block;}
.libraryList .snsArea{display:none;}
.noticeZone, .libraryList .tabArea{width:33.333%}
.libraryList .infoArea,.festivalZone{width: 66.667%;}

/* 도서관 행사안내 */
.fesivalList{margin-left:-25px;}
.fesivalList > li{width:calc(33.333% - 25px);margin-left:25px;}
.fesivalList > li:last-child{display:none;}

/* 바로가기 */
.visualConWrap .lt{padding-left:20px;width: 58%;}
.visualConWrap .rt{width:530px;}
.visualConWrap .mainLibWrap{padding-left:0;}
.bannerBtn{right:0}
/*.shortcut li + li{margin-left:10px;}*/
.shortcut li .ico{width:130px;height:130px;}
.bannerBtn img{transform:scale(0.85);}

/* popup template */
.popupZone.public{font-size:0.875em;}
}

@media screen and (max-width:1320px){ 
#section4{padding:30px 15px 40px}
.mainLibWrap .slogan p{font-size:1.556em;}

/* 바로가기 */
.bannerBtn{right:0;}
.shortcut > li .ico{width:100px;height:100px;}
/* 웹/모바일 같은이미지 사이즈 다름 */
.shortcut > li i{width:100px;height:100px;}
.shortcut > li .ico{background-size:65px auto;}
.shortcut > li .ico::after{width:65px;height:65px;background-size:100%;}
.shortcut li.svc1 .ico::after{background-position:0 0;}/* 나만의 도서관 */
.shortcut li.svc2 .ico::after{background-position:0 -65px;}/* 도서관 견학신청 */
.shortcut li.svc3 .ico::after{background-position:0 -130px;}/* 희망도서신청 */
.shortcut li.svc4 .ico::after{background-position:0 -195px;}/* 자원봉사신청 */
.shortcut li.svc5 .ico::after{background-position:0 -260px;}/* 자원봉사신청 */

.libraryList .tabArea ul{padding-top:15px;}
/* 추천도서 */
.bookZone{padding:0;}
}

/******** 모바일 퍼스트 ********/
@media screen and (max-width: 1079px){
#section1{height: auto;}
#section1, #section2, #section3{padding:0;}
#section3,
#section4{padding:30px 15px 40px}

/* 메인 배경 이미지 롤링 */
.backImg{height:1000px;}
.backImg .popupList.thumb > li {background-position:left top;}

/* 도서관이용안내 */
.otherLibTab .list{display:flex;;margin-left:-10px;flex-direction: row;}
.otherLibTab .list > li + li{margin-top:0;}
.otherLibTab .list > li{flex:1;text-align:center;margin-left:10px;white-space: nowrap;}
.otherLibTab .list > li em,
.otherLibTab .list > li span{display:none;}
.libraryOther .otherLibCon .more{top:15px;right:15px;}

/* 상단검색영역 */
.mainLibWrap{padding:50px 0 0 0;}
.mainSearchForm .btnSearch{width:60px;}
.mainSearchForm .mainSearchKeyword input {width: calc(100% - 60px);}
.mainSearchForm .btnSearch{background-size:50%;}
.bannerBtn{right:-46px;top:-10px;}
.bannerBtn img{transform: scale(0.52);}
.mainSearchForm .mainSearchKeyword input{height:50px;line-height:50px;}
.mainSearchForm{margin:30px 0 30px}
.visualConWrap .lt{padding:0;}
.visualConWrap {flex-wrap:wrap;padding:0 15px 25px;}
.visualConWrap .lt,
.visualConWrap .rt{width:100%;}


/* 팝업존 */
.popupZone{padding:0}
.popupZone .controlArea {position:static;bottom:auto;right:auto;}
.popupZone .controlArea .controls{float:right;}

/* 이용안내 */
.holidayNotice {height: 60px; font-size: 0.833em; padding: 0 10px;}
.holidayNotice::before{width: 24px; height: 26px;}

/* 도서관 이용안내 */
.libraryList .tabArea ul{padding-top:20px}
.libraryList .tabArea ul li a, .libraryList .tabArea ul li button{height:40px;line-height:40px;}
.libraryList{flex-wrap:wrap;height:auto;}

/* 추천도서 */
.bookZone .tabBox .title{display:block;text-align:center;}
.bookZone .tabBox .tab{padding-right:0;}
.bookZone .tabBox .tab li a{height:40px;line-height:40px;}
.bookZone .moreB{border: 1px solid #999;width: 29px;height:29px;right:0;top:0;left:auto}
.bookZone .moreB::before,
.bookZone .moreB::after{width: calc(100% - 12px);}
.bookList{overflow-x:auto;white-space: nowrap;margin-left:0;}
.bookList > li{width:150px;margin-left:10px;display:inline-block;float:none;}

.shortcut{margin-bottom:15px;}
.shortcut li{width:25%;}
.shortcut > li .ico{width:75px;height:75px;}
.shortcut li + li{margin:0;}


/* 도서관이용안내 */
.tab-cont{flex-wrap: wrap;}
.libraryOther .otherLibTab, .libraryOther .otherLibCon{width:100%;padding:20px 15px 10px;}
.otherLibSel{margin-bottom:20px;}
.libraryList .infoZone{width:100%;padding:20px 15px 10px;}
.libraryList .infoZone .more{top: 18px;right: 15px;}
.libraryList .calZone{width:100%;padding:10px 15px 20px;}
.libraryList .tabArea ul {margin-left: -5px; margin-top: -5px;}
.libraryList .tabArea ul li {width: calc(33.333% - 5px); margin-left: 5px; margin-top: 5px; }
.libraryList .tabArea{text-align:center;}

/* SNS소통마당 */
.snsArea{display:block;width:100%;}

/* 공지사항 */
.noticeZone .more{top:-53px}
.festivalZone, .libraryList .infoArea,
.noticeZone, .libraryList .tabArea {width: 100%}
.noticeZone{padding:0 0 30px;}
.boardListWrap ul li + li{margin-top:15px;}

/* 도서관행사안내 */
.festivalZone{padding:0 15px;}
.fesivalList{overflow-x:auto;margin-left:0;}
.fesivalList > li{flex:none;width:180px;margin:0;margin-right:15px;}
.fesivalList > li:nth-child(3),
.fesivalList > li:last-child{display:block;}
}
@media screen and (max-width: 767px){
/* popup template */
.popupZone.public{font-size:0.938em;}/* 15px */

/* 처음오셨나요? 레이어팝업 */
.chartFirst  .chartPopinner h4{padding:15px 20px}
.chartFirst .chart-close01 {top:20px}
.chartFirst .list{margin-left:-10px;}
.chartFirst .list > li{width: calc(25% - 10px);margin-left:10px;}
.chartFirst .chartPopinner{width:100%;padding:0 10px;}
.chartFirst .layer-content{padding:15px 15px 20px;}
.chartFirst .list > li a span{height:38px;justify-content:center;align-items: center;display: flex;}
/* 웹/모바일 같은이미지 사이즈 다름 */
.chartFirst .list a{width:100%;}
.chartFirst .list i{width:70px;height:70px;}
.chartFirst .list a i:after{background-size:70px auto;}
.chartFirst .list > li .ico::before{width:50px;height:50px;background-size:100%;}
.chartFirst .list > li.first1 .ico::before{background-position:0 0}
.chartFirst .list > li.first2 .ico::before{background-position:0 -50px;}
.chartFirst .list > li.first3 .ico::before{background-position:0 -100px;}
.chartFirst .list > li.first4 .ico::before{background-position:0 -150px;}
.chartFirst .list > li.first5 .ico::before{background-position:0 -200px;}
.chartFirst .list > li.first6 .ico::before{background-position:0 -250px;}
.chartFirst .list > li.first7 .ico::before{background-position:0 -300px;}
.chartFirst .list > li.first8 .ico::before{background-position:0 -350px;}
.chartFirst .list > li a{padding:5px 0;height:100px;}
.chartFirst .chartPopinner h4 img{width:170px;}
.chartFirst .chartPopinner h4::after{display:none;}
.chartFirst br{display:block;}

/* 도서관 이용안내 */
.libraryList .infoArea .name{margin-bottom:10px;}
.libraryList .infoArea .img{float:left;width:200px;margin-right:10px;}
.libraryList .infoArea .img img{width:100%;}
.libraryList .infoArea .libInfo{overflow:hidden;}
}
@media screen and (max-width: 640px){
    /* 바로가기 */
    .shortcut li .txt br{display:block;}
   
    /* 도서관 이용안내 */
    .libraryList .infoArea .img{float:none;width:100%;margin-right:0;margin-bottom:15px;}
    .libraryList .infoArea .img img{width:100%;}
   
}
@media screen and (max-width: 480px){}
@media screen and (max-width: 375px){}

/******** 웹퍼스트 ********/
@media screen and (min-width: 1080px){
#section1 .sectionGroup,#section2 .sectionGroup,#section3 .sectionGroup,#section4 .sectionGroup{width:1080px;margin:0 auto;}
.main {min-width: 1080px;}

/* 마우스 스크롤 */
.mouse-scroll{position:absolute;left:50%;transform:translate(50%);bottom:20px;display:inline-block;width:28px;height:63px;
background:url("/include/image/button/mouse.png") no-repeat 0 0;
-webkit-animation: floating_updown .7s infinite alternate; animation: floating_updown .7s infinite alternate;}
@keyframes floating_updown{0%{transform:translateY(0);}100%{transform: translateY(-15px);}}

/* 도서관 이용안내, 공지사항 */
.libraryList .infoZone,
.libraryList .calZone{width:50%;}
.libraryList .infoZone .more{right:20px;}
.festivalZone{padding-left:60px;}
.noticeZone,.festivalZone{float:left;}
.festivalZone .mainTit{margin-bottom:25px;}

/* 위로이동 */
#btnTopScroll {margin-right: -900px;}

}

@media screen and (min-width:1320px){
    #section1 .sectionGroup,#section2 .sectionGroup,#section3 .sectionGroup,#section4 .sectionGroup{width:1320px;} 
    #header.fixed #btnSearchTop {margin-right: -500px;}

    /* 바로가기 */
    .visualConWrap .rt{margin-right:0;}
    .visualConWrap .rt .popupZone{right:-20px;}
}

@media screen and (min-width: 1800px){
    .headerInner, .footerInner,#section1 .sectionGroup,#section2 .sectionGroup,#section3 .sectionGroup,#section4 .sectionGroup{width:1800px;} 
   
    .gnb {padding-right:0;height:120px;}
    #logo{top:27px;}
   .gnb{justify-content:center;}
    .siteUtilGroup{padding:0;height:auto;}
    
    /* 중간세트 */
	#header .gnb{width:1800px;}
	#header .gnbTit {width: 380px;top:110px;}
	#header .gnb > li > ul{width: calc(100% - 380px);}
	#header .gnb > li > ul > li{width: calc(16.66666666666667% - 30px);}
    #header .siteMenu {position: fixed;top: 108px;right: 50%;z-index: 1012;transform: translateX(898px);}

    #btnSearchTop{top:37px; right: 50%; margin-right:-500px; margin-top: 0; width: 47px; height: 47px;} 

    /* 바로가기 */
    .visualConWrap .lt{margin-left:123px; width: 40%;}
    .visualConWrap .rt{margin-right:50px;}

    /* 추천도서 */
    .bookZone{position:relative;padding:0 0 0 360px;min-height:340px;}
    .bookZone .tabBox .tab{display:block;margin:0;padding-right:0;}
    .bookZone .tabBox .tab > li{border:none;text-align:left;}
    .bookZone .tabBox .tab > li a{height:35px;line-height:35px;padding:0 10px;margin-top:5px;}
    .tabBox{background:#fff;padding:33px;position:absolute;left:0;top:0;width:270px;height:100%;}
    .bookZone .moreB{left:209px;top:284px;right:auto;}
}