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

#visual {background:url("/include/image/intro/main/bg_visual.jpg") center center no-repeat;background-size: cover; background-attachment: fixed;}
#header {position:relative;z-index:40;border-bottom:1px solid #d0d0d0}
#header {padding:70px 0 45px;text-align:center; margin:0 auto; border:0 !important;}
#header h1 {position:absolute; left:0;}
#header .desc {margin-top:5px;padding:0 10px;font-size:1.286em;font-weight:bold;word-break:keep-all}

/* 도서관 목록 */
.libZone {position:relative;padding-bottom:70px; width:100%}
.libZone > a {display:block;position:absolute;top:50%;width:23px;height:36px;margin-top:-53px;background:url("/include/image/intro/btn_sp.png") 0 -26px no-repeat}
.libZone .btnSlidePrev {left:10px;background-position:0 -26px}
.libZone .btnSlideNext {right:10px;background-position:-26px -26px}
.libZone .pagerWrap {position:absolute;left:0;right:0;bottom:46px;height:24px;line-height:24px;text-align:center}
.libZone .pager {display:inline-block;width:10px;height:10px;background-color:#b8b8b8;border-radius:5px;vertical-align:middle;transition:0.2s}
.libZone .pager + .pager {margin-left:5px}
.libZone .pager.on {width:55px}
.libZone .pp-controls {display:inline-block;margin-right:5px;vertical-align:middle}
.libZone .pp-controls a {display:block;width:24px;height:24px;background:url("/include/image/intro/btn_sp.png") -52px -26px no-repeat}
.libZone .pp-controls .btnSlidePause {background-position:-79px -26px}
.libList {overflow:hidden;position:relative;margin:0 auto;}
.libList > li {position:relative;top:0;left:0;width:100%;height: auto}

.libList .slide > li {position:relative;float:left;width:16.66%;height:230px;color:#fff;text-align:center;box-sizing:border-box;padding:15px 0;}

.libList .slide a {position:relative;display:block;width:170px;height:170px;background-color:#fff;border-radius:50%;overflow:hidden;margin:0 auto; border:1px solid rgba(82, 96, 0, 0.5);}
.libList .slide a {
    image-rendering: -moz-auto;
    image-rendering: -moz-auto; /* Firefox */
    image-rendering: -o-auto; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic; /* IE (non-standard property) */
}
.libList .slide a:hover {transition:all 0.3s;}
.libList .slide a:after {content:"";display:block;position:absolute;top:0;left:0;width:170px;height:170px;background:url("/include/image/intro/main/ico_lib.png") 0 0 no-repeat} 
.libList .slide .tit {position:absolute;bottom:-1px;width:100%;height:48px;font-size:1.063em;text-align:center;line-height:40px;border-bottom:1px solid #bacfe9;background-color:#7B8C0F;letter-spacing:-1px;}
/* .libList .slide .info {font-size:1.071em;font-weight:400;margin-top:10px;line-height:1.5em;letter-spacing:-1px;}
.libList .slide .info span {font-weight:700;}
.libList .slide a:hover .info, .libList .slide a:focus .info {text-decoration:underline; text-underline-position:under;} */
.libList .holyday {position:absolute;top:0;left:50%;width:90px;color:#fff;background:#ff6000;font-size:1.071em;line-height:28px;text-align:center;border-radius:14px;z-index:3;margin-left:-45px;}
.libList .holyday:after {content:""; position:absolute; left:50%; bottom:-12px; border-left:solid 13px transparent; border-right:solid 13px transparent; border-bottom:solid 13px #ff6000; height:0; width:0; transform:rotate(180deg); z-index:100; margin-left:-13px;}
.libList .slide > li.ojlake a:after {background-position:0 0} /* 옥정호수도서관 */
.libList .slide > li.djlib a:after {background-position:-170px 0} /* 덕정도서관 */
.libList .slide > li.childlib a:after {background-position:-340px 0} /* 꿈나무도서관 */
.libList .slide > li.nmlib a:after {background-position:-510px 0} /* 남면도서관 */
.libList .slide > li.gulib a:after {background-position:-680px 0} /* 고읍도서관 */
.libList .slide > li.dklib a:after {background-position:0 -170px} /* 덕계도서관 */
.libList .slide > li.hmlib a:after {background-position:-170px -170px} /* 양주희망도서관 */
.libList .slide > li.gjlib a:after {background-position:-340px -170px} /* 광적도서관 */
.libList .slide > li.jhlib a:after {background-position:-510px -170px} /* 장흥작은도서관 */
.libList .slide > li.goamlib a:after {background-position:-678px -170px} /* 고암작은도서관*/
.libList .slide > li.yjlib a:after {background-position: -850px -170px} /* 사립작은도서관 */
.libList li.botrow .slide{display: flex; justify-content: center; }



#container.main {position:relative;z-index:30;padding:0;background:none;margin-top:-25px; width:100%}
.sectionGroup {position:relative;max-width:1200px;margin:0 auto}
.sectionGroup::after {content:"";display:block;clear:both}
h1.title {font-weight:normal}
/* a.more {position:relative;width:12px;height:12px}
a.more::before {content:"";position:absolute;top:0;left:5px;width:2px;height:12px;background-color:#fff}
a.more::after {content:"";position:absolute;top:5px;left:0;width:12px;height:2px;background-color:#fff} */

.mainSectionCore {padding-bottom:35px;}
.mainSectionGroup {background:#f5f5f5; padding-top:50px; padding-bottom:50px;}
.mainBannerGroup {background:#fff;}
.slogan {max-width:1200px;padding:50px 0;font-size:1.500em;line-height:1;color:#515665;text-align:center;background:url(/include/image/intro/main/img_library.png) center top no-repeat;}
.slogan strong {display:block;margin-top:20px;font-size:1.958em; font-weight:500;}

/* snb */
#snb {background:none !important; border:0 !important; position:absolute; top:30px; right:0;}
.siteUtilGroup {height:auto !important; line-height:1em !important;}
.siteMenu {color:#fff !important;}
.siteMenu > ul > li + li::before {content:"";display:block;position:absolute;top:50%;left:0;width:1px;height:10px;margin-top:-5px;background-color:rgba(255,255,255,.3)}
.siteMenu > ul > li a {padding: 0 20px !important;}
.siteMenu > ul > li:last-child a {padding-right:0 !important;}

.mainSearchWrap {overflow:hidden;clear:both;position:relative;margin-bottom:20px;padding:8px;color:#fff;text-align:right;border-radius:10px}
.mainSearchWrap .title {display:inline-block;margin-right:30px;font-size:1.250em;line-height:45px;vertical-align:top}
.mainSearchForm {display:inline-block;position:relative;line-height:0;vertical-align:top}
.mainSearchKeyword {display:inline-block;overflow:hidden;position:relative;height:45px;padding-right:80px}
.mainSearchKeyword input {display:block;width:100%;min-width:580px;height:45px;padding:0 15px;font-size:1.125em;color:#333;border:0;border-radius:10px 0 0 10px;background-color:#fff}
.mainSearchKeyword .btnSearch {display:block;position:absolute;top:0;right:0;width:80px;line-height:45px;font-size:1.250em;text-align:center;border-radius:0 10px 10px 0;background-color:#04295d}
.mainBestKeyword {display:inline-block;overflow:hidden;position:relative;min-width:200px;height:25px;margin:10px 15px;padding-right:30px;vertical-align:top}
.mainBestKeyword .controlArea {position:absolute;top:0;right:0}
.mainBestKeyword .controlArea a {display:block;margin:3px 0}
.mainBestKeyword .controlArea a#btnUp {border-right:7px solid transparent;border-bottom:7px solid rgba(255,255,255,.5);border-left:7px solid transparent}
.mainBestKeyword .controlArea a#btnDwon {border-top:7px solid rgba(255,255,255,.5);border-right:7px solid transparent;border-left:7px solid transparent}
.mainBestKeyword .keywordListWrap {overflow:hidden;font-size:1.125em;line-height:25px;text-align:left}
.mainBestKeyword .keywordList li {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.snsBtn {margin-top:-5px !important;}

.memberService {float:left}
.memberService .title {margin-bottom:10px;font-weight:300;font-size:1.438em;line-height:1}
.memberService .title b {font-size:1.333em}
.memberService .logoutArea .title {font-size:1.125em}
.loginArea {overflow:hidden;margin-bottom:15px;padding:15px 20px;border-radius:10px;box-sizing:border-box;background-color:#fff}
.loginArea .inputGroup {position:relative;margin-top:20px;padding-right:95px}
.loginArea .inputGroup .btnLogin {display:block;position:absolute;top:0;right:0;width:80px;line-height:80px;color:#fff;text-align:center;border-radius:5px}
.loginArea .inputGroup .inpArea {overflow:hidden;position:relative;height:38px;padding-left:50px;border-radius:5px}
.loginArea .inputGroup .inpArea label {display:block;position:absolute;top:0;left:0;width:40px;height:38px;border-radius:5px 0 0 5px;background:url(/include/image/common/ico_main_my.png) 5px 0 no-repeat}
.loginArea .inputGroup .inpArea input {width:100%;height:38px;line-height:38px;color:#333;border:0;background:transparent}
.loginArea .inputGroup .inpArea input::placeholder {color:#333333;opacity:1}
.loginArea .inputGroup .inpArea input::-ms-input-placeholder {color:#333333;opacity:1}
.loginArea .inputGroup .inpArea input::-webkit-input-placeholder {color:#333333;opacity:1}
.loginArea .inputGroup .inpArea + .inpArea {margin-top:4px}
.loginArea .inputGroup .inpArea + .inpArea label {background-position-y:-40px}
.loginArea .menuLink {margin-top:20px;line-height:1;text-align:center}
.loginArea .menuLink a {display:inline-block;font-size:0.938em;vertical-align:top}
.loginArea .menuLink a + a::before {content:"|";display:inline-block;margin:0 10px 0 6px;font-size:0.733em;color:#d1d1d1;vertical-align:top}
.loginArea .btnLogout {display:block;margin-top:20px;font-size:1.188em;line-height:40px;color:#fff;text-align:center;border-radius:5px;background-color:#555}
.loginArea .myBtnArea {margin-top:15px;padding-top:15px;border-top:1px dotted #888}
.loginArea .myBtnArea a {display:block;float:left;width:calc(50% - 5px);font-size:1.063em;line-height:40px;text-align:center;border-radius:5px;background-color:#f1f1f1}
.loginArea .myBtnArea a + a {margin-left:10px}
.mobilecard {padding:0}
.mobilecard .top {position:relative;padding:5px 15px;color:#fff;border-radius:9px 9px 0 0}
.mobilecard .top .title {margin:0;font-size:1.125em;line-height:40px}
.mobilecard .top p {overflow:hidden;position:absolute;top:5px;right:10px;width:40px;height:30px;padding:5px 0;line-height:15px;text-align:center;border-radius:50%}
.mobilecard .top p b {display:block}
.mobilecard .top .loan {right:55px}
.mobilecard .barcode {position:relative;padding:25px 40px;text-align:center;background-color:#fff}
.mobilecard .barcode img {max-height:90px;vertical-align:middle}
.mobilecard .barcode .barcodeNumber {text-align:center; font-size:1.188em; letter-spacing:0.4em; color:#999; margin-top:5px;}
.barcode .zoom {position:absolute;top:50%;right:10px;width:20px;height:20px;margin-top:-20px;border:1px solid #8e8e8e;border-radius:50%}
.barcode .zoom::before {content:"";position:absolute;top:4px;left:9px;width:2px;height:12px;border-radius:2px;background-color:#8e8e8e}
.barcode .zoom::after {content:"";position:absolute;top:9px;left:4px;width:12px;height:2px;border-radius:2px;background-color:#8e8e8e}
.barcode.zoomIn {position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;height:100%;min-height:100%;text-align:center;background-color:#fff}
.barcode.zoomIn img {position:absolute;top:50%;left:50%;width:80%;height:auto;margin:-25% 0 0 -40%}
.barcode.zoomIn .barcodeNumber {position:absolute;top:50%;left:0%;width:100%;height:auto;text-align:center; font-size:1.188em; letter-spacing:0.4em; color:#999; margin-top:5px;}
.barcode.zoomIn .zoom {top:20px;right:20px;margin:0;transform:rotate(45deg)}
.mylibraryArea {overflow:hidden;position:relative;padding:20px;color:#fff;border-radius:10px;box-sizing:border-box}
.mylibraryArea .more {position:absolute;top:25px;right:25px}
.mylibraryArea li {float:left;margin-top:12px;padding-left:30px;line-height:28px;box-sizing:border-box;background:url(/include/image/common/ico_main_my.png) 0 -80px no-repeat}
.mylibraryArea li:nth-child(odd) {width:58%}
.mylibraryArea li.svc2 {background-position-y:-110px}
.mylibraryArea li.svc3 {background-position-y:-140px}
.mylibraryArea li.svc4 {background-position-y:-170px}
.mylibraryArea li.svc5 {background-position-y:-200px}
.mylibraryArea li.svc6 {background-position-y:-230px}


.library_wrap {overflow:hidden}
.libraryList {font-size:0;line-height:0;text-align:center}
.libraryList li {display:inline-block;box-sizing:border-box;}
.libraryList li a {display:block;font-weight:300;font-size:19px;letter-spacing:-0.05em;border-radius:10px;border:1px solid rgba(9,81,143,.4);box-sizing:border-box;background-color:#fff; position: relative;}
.libraryList li a span {display:block; position:absolute; left: 50%; bottom: -7px; width:56px; margin-left:-27px; font-weight:normal;font-size:13px;line-height:19px;color:#fff;letter-spacing:-0.05em;border-radius:10px;box-sizing:border-box;background-color:#d93c5e}

.shortcut {float:right; width:340px; padding-top:20px;overflow:hidden;}
.shortcutList {line-height:0;text-align:center;background-color:#fff;padding:15px 5px;}
.shortcutList li {display:inline-block;box-sizing:border-box;vertical-align:top}
.shortcutList li a {display:block;font-size:1em;line-height:20px;letter-spacing:-0.05em;box-sizing:border-box;}
.shortcutList li .ico {display:block;width:58px;height:59px;margin:0 auto 5px;background:url(/include/image/intro/main/ico_intro_shortcut.png) 0 0 no-repeat;}
.shortcutList li.svc1 .ico {background-position-x:0} /*시립작은도서관*/
.shortcutList li.svc2 .ico {background-position-x:-70px} /*문화가있는날*/
.shortcutList li.svc3 .ico {background-position-x:-140px} /*U도서관*/
.shortcutList li.svc4 .ico {background-position-x:-210px} /*북스타트바로가기*/
.shortcutList li.svc5 .ico {background-position-x:-280px} /*오디오북*/


.boardGroup {padding:35px 0;background-color:#f2f2f2;}
.boardZone {overflow:hidden;position:relative;width:1200px;margin:0 auto;}
.boardZone .boardmore {position:absolute;top:0px;right:50%;width:50px; height:50px; background:#fff url(/include/image/intro/main/intro_more_b.png) center no-repeat !important; border:1px solid #333; margin-right:-330px;}
.boardZone .tab {width:650px; height:54px; text-align: center; margin:0 auto;}
.boardZone .tab > li {float:left; font-size:1.250em; font-size:20px; background:#fff;}
/* .boardZone .tab > li + li {margin-left:-4px} */
.boardZone .tab > li a {display:inline-block;color:#333;vertical-align:top;width:300px;line-height:50px;border:1px solid #333;}
.boardZone .tab > li.on a {background:#333; color:#fff;}
.boardArticle {padding:50px 0 0;}
.articleList {margin:0 0 0 -25px; letter-spacing:-0.03em; }
.articleList > li {width:calc(33.3333% - 25px); margin-left: 25px; box-sizing:border-box; border:solid 1px #e7e7e7; background-color: #fff; position: relative; margin-bottom:15px;}
.articleList a {display: block; padding:20px 19px; } 
.articleList p {display:inline-block;width:100%; font-size:1.125em;color:#555555; font-weight:700; line-height:30px; clear:both; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.articleList > li:hover {border:2px solid #333;}
.articleList li .lib {float:left;width:57px;height:26px;line-height:26px;margin-bottom:0; font-size:15px; letter-spacing:-0.1em;text-align:center;font-style:normal;color:#fff !important; background:#4f4f4f;margin-right:5px;margin-top:3px;}
.articleList li .state {float:left;width:57px;height:26px;line-height:26px;margin-bottom:0; font-size:15px; letter-spacing:-0.1em;text-align:center;font-style:normal;border:1px solid;margin-right:10px; box-sizing:border-box;margin-top:3px;}
.articleList li dt, .articleList li dd {line-height:1.3em; font-size:1em;}
.articleList li dd.desc {min-height:2.6em; max-height:2.6em; overflow:hidden;}
.articleList li dd.day {margin-top:10px; }
#eventArticle .articleList li .date dd {font-size: 0.88em; line-height:18px;}
#eventArticle .articleList li dd {line-height:1.6em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.bookZone {position:relative;margin-bottom:20px; border:3px solid #00a088; box-sizing:border-box;}
.bookZone .tab {box-sizing:border-box; width:calc(100% - 49px);}
.bookZone .tab > li {float:left;width:23%;text-align:center;vertical-align:middle;box-sizing:border-box;background-color:#fff}
.bookZone .tab > li:nth-of-type(4) {width:31%; border-right: 1px solid #33b3a0;}
.bookZone .tab > li + li {border-left:1px solid #33b3a0;}
.bookZone .tab > li a {display:block;position:relative;height:100%;padding:10px;font-size:1.250em;line-height:30px;letter-spacing:-0.05em;background-color:#00a088;color:#fff;border-left:0}
/* .bookZone .tab > li:first-child a {border-left:1px solid #e6e6e6} */
.bookZone .tab > li a.more {display:none; position:absolute; top:0; right:-1px; width:51px; height:50px; border-left:1px solid #33b3a0; background-color:#00a088; padding:10px 0; box-sizing:border-box;}
.bookZone .tab > li.on a {font-weight:bold;color:#222;background-color:#fff;}
.bookZone .tab > li.on a span {border-bottom:1px solid #333;}
.bookZone .tab > li.on a.more {display:block; background-color:#00a088; color:#fff;transform:rotate(0deg);}
/* .bookZone .tab > li.on a::after {content:"";position:absolute;top:100%;left:50%;z-index:1;margin-left:-5px;border-top:10px solid #515665;border-right:7px solid transparent;border-left:7px solid transparent} */
.bookZone .tabContent {position:relative; padding:30px 30px 20px; }
.bookList > li {float:left;position:relative;width:20%;}
.bookList .cover {display:block;position:relative;margin:0 7px;transition:all .5s}
.bookList .cover a {display:block;position:relative;width:100%;padding-top:134.482%}
.bookList .cover a:focus {outline: 1px dotted #000;}
.bookList .cover img {position:absolute;top:0;left:0;width:100%;height:100%; box-sizing:border-box; border:1px solid #ddd;}
/* .bookList .rank {position:absolute;top:10px;left:-8px;z-index:2;width:34px;height:34px;padding:0 8px 8px 0;font-size:1.400em;line-height:34px;color:#fff;text-align:center;background:url(/include/image/common/bg_main_rank.png) 0 0 no-repeat;background-size:cover} */
.bookList .tit,.bookList .writer {display:block;overflow:hidden;font-weight:normal;text-align:center;font-size:1.067em;letter-spacing:-0.05em;text-overflow:ellipsis;white-space:nowrap;line-height: 1.5em;}
.bookList .tit{margin-top:10px;font-weight:bold;}
.bookList .writer {color:#888;}
.bookList > li.nodata {float:none;width:100%;min-height:320px;line-height:320px;text-align:center;}

.popupZone {position:relative;float:right;width:340px;height:210px;background:#fff;max-width:640px;margin:0 auto}
.popupZone .title {padding:0 20px;line-height:59px;font-size:1.313em;color:#222;border-bottom:1px solid #e6e6e6}
.popupZone .controlGroup {overflow:hidden;position:absolute;bottom: 0;left: 0;z-index:2;text-align:right;} 
.popupZone .controlGroup a {display:block;float:left;width:28px;height:28px;background:url(/include/image/common/btn_roll.png) 0 0 no-repeat; background-size:114px;}
.popupZone .controlGroup .pp-controls,.banner .controlArea .pp-controls {float:left}
.popupZone .controlGroup .btnSlidePause {background-position-x:-28px}
.popupZone .controlGroup .btnSlidePlay {background-position-x:-56px}
.popupZone .controlGroup .btnSlideNext {background-position-x:-85px;}
.popupZone .controlGroup .nowpage {float:left;display:block;width:64px;line-height:28px;text-align:center;color:#fff;background-color:rgba(0,26,46,0.7);}
.popupZone .controlGroup .nowpage strong {font-weight:normal}
.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 a:focus {border: 1px dashed #000}
.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.438em; word-break: keep-all;}

/* 배너모음 */
.banner {position:relative;padding:30px 0 30px 90px;line-height:28px;background:#fff;}
.banner h4 {position:absolute;top:30px;left:0;width:90px;color:#333;font-size:1.286em;font-weight:normal}
.banner .controlArea {overflow:hidden;position:absolute;top:30px;left:90px}
.banner .controlArea a {display:block;width:27px;height:30px;background:url("/include/image/common/btn_roll.png") 0 -45px no-repeat}
.banner .controlArea > a {float:left}
.banner .controlArea .pp-controls {float:left}
.banner .controlArea .pp-controls a {width:29px}
.banner .controlArea .btnSlideNext {width:28px;background-position-x:-82px}
.banner .controlArea .btnSlidePause {background-position-x:-27px}
.banner .controlArea .btnSlidePlay {background-position-x:-54px}
.bannerZone {overflow:hidden;margin-left:90px}
.bannerZone .bannerList {overflow:hidden}
.bannerZone .bannerList > li {float:left;padding:0 15px}
.bannerZone .bannerList > li + li {position:relative}
.bannerZone .bannerList > li + li:before {content:"";display:block;position:absolute;top:50%;left:0;width:1px;height:12px;margin-top:-6px;background-color:#bebebe}
.bannerZone .bannerList a {color:#333;font-size:1.143em}


@media screen and (max-width:1024px){
	.mobileShow {display:block !important}
	.mobileShowInline {display:inline-block !important}
	.mobileHide,.mobileShow2,.mobileShow3,.mHide,#lnbNav {display:none !important}

    .sectionGroup {padding:0 15px}

	.mainSectionCore {padding-bottom:40px;background-size:contain;}
	.mainSearchWrap {text-align:center}
	.mainSearchWrap .title {margin:0 20px 0 0}
	.mainSearchKeyword input {min-width:400px}

	#snb {right:15px;}
	#header h1 {position: relative; margin:0 auto;}
	
	.libzone {padding: 0;}
	.libList {height:380px;margin:0 20px}
	.libList .slide a {display:inline-block;padding:0 0 0;margin-right:0;vertical-align:top;width:140px;height:140px;}
	.libList .slide a:after {width:140px; height:140px; background-size:840px;}
	.libList .slide > li {height: 200px;}
	.libList .slide .info {word-break: keep-all;}
	.libList .slide > li.ojlake a:after {background-position:0 0} /* 옥정호수도서관 */
	.libList .slide > li.djlib a:after {background-position:-140px 0} /* 덕정도서관 */
	.libList .slide > li.childlib a:after {background-position:-280px 0} /* 꿈나무도서관 */
	.libList .slide > li.nmlib a:after {background-position:-420px 0} /* 남면도서관 */
	.libList .slide > li.gulib a:after {background-position:-560px 0} /* 고읍도서관 */
	.libList .slide > li.dklib a:after {background-position:0 -140px} /* 덕계도서관 */
	.libList .slide > li.hmlib a:after {background-position:-140px -140px} /* 양주희망도서관 */
	.libList .slide > li.gjlib a:after {background-position:-280px -140px} /* 광적도서관 */
	.libList .slide > li.jhlib a:after {background-position:-420px -140px} /* 장흥작은도서관 */
	.libList .slide > li.readbook a:after {background-position:-560px -140px} /* 책읽는 양주 */
	.libList .slide > li.goamlib a:after {background-position:-558px -140px} /* 고암작은도서관*/
	.libList .slide > li.yjlib a:after {background-position:-700px -140px} /* 사립작은도서관*/

	.libList .slide a:before,.libList .slide a:after {left:50%;margin-left:-70px}
	.libList .slide .tit {margin-bottom:0;padding-bottom:0;border-bottom:none}
	
	.boardZone {width:100%;}
	.bookZone {float: left; width: calc(100% - 360px); height:364px}
	.bookZone .tab > li {width:21%;}
	.bookZone .tab > li:nth-of-type(4) {width:37%;}
	.bookZone .tab > li a {padding:0 0px; line-height:50px; height:50px;font-size:0.938em;}
	.bookZone .tab > li a.more {padding:0;}
	.bookZone .tabContent {padding: 45px 30px 20px;}
	.bookList > li {width:25%;}
	.bookList > li:nth-of-type(5) {display:none;}
	.boardArticle {padding:50px 15px 0;} 	

    .memberService {width:calc(100% - 435px);margin-right:15px}
	.loginArea,.mylibraryArea {height:182px}
	.loginArea .menuLink {margin-top:15px}
    .mylibraryArea li {margin-top:10px}

    .popupZone .textPopup {font-size:0.875em}
    
    .library_wrap {clear:both;margin:0 -10px;padding-top:30px}
	.libraryList li {width:16.666%}
    .libraryList li a {margin:10px;line-height:60px;}
    
	.shortcutList li {width:24%}
    
    .boardGroup {padding:30px 15px;}
    .articleList {margin:-10px 0 0 0;}
    .articleList > li {width:100%; margin: 10px 0 0 0; box-sizing: border-box; }
    .articleList li .ico {width: 80px; padding:0; margin-right: 10px;}
	.articleList li .date {top:25px;right:20px;}
	#noticeArticle .articleList li:nth-child(6), #noticeArticle .articleList li:nth-child(7), #noticeArticle .articleList li:nth-child(8), #noticeArticle .articleList li:nth-child(9) {display:none;}
	#eventArticle .articleList li:nth-child(5), #eventArticle .articleList li:nth-child(6), #eventArticle .articleList li:nth-child(7), #eventArticle .articleList li:nth-child(8), #eventArticle .articleList li:nth-child(9) {display:none;}
	.familySite {right:15px;left:inherit;margin:0}
	#footer {padding:0 15px 30px;}
}
@media screen and (max-width:1024px) and (min-width:481px){
	.libZone {padding-bottom:50px}
	.libZone .pagerWrap {bottom:65px;height:20px;line-height:20px}
	.libZone .pager {width:20px;height:20px;border-radius:10px}
	.libZone .pager + .pager {margin-left:10px}
	.libZone .pager.on {width:120px}
	.libList li.botrow .slide{display: block }
}
@media screen and (max-width:940px){
	.bookList > li {width:33.333%;}
	.bookList > li:nth-of-type(4) {display:none;}
	.bookZone .tabContent {padding: 40px 30px 20px}
}
@media screen and (max-width:800px){
	.mobileShow2 {display:block !important}
	.mobileHide2, .familySite {display:none !important}

	.libList {height:680px;margin:0 20px}

    .slogan {padding:35px 0; background-size: cover;}

	.sectionContent {overflow:hidden;position:relative;padding-bottom:25px}
	.memberService {width:100%}
	.loginArea {clear:both;width:100%;height:auto}
	.mylibraryArea {width:calc(100% - 347px);height:300px}
	.mylibraryArea ul {margin-top:0}
    .mylibraryArea li,.mylibraryArea li:nth-child(odd) {float:none;width:100%;margin-top:9px}
	
	.bookZone {width: 100%; height:auto;}
	.bookZone .tab > li a {font-size:0.875em;}
	.bookZone .tabContent {padding: 30px 30px 20px}
	.bookList > li {width:20%;}
	.bookList > li:nth-of-type(4), .bookList > li:nth-of-type(5) {display:block;}
	.popupZone {float:left;}
	.shortcut {float:right; width:calc(100% - 350px); padding-top:0;}
	.shortcutList {padding:48px 18px;}
	.shortcutList li {width:20%; margin:0 1.2%;}
	.shortcutList li .ico {margin-bottom:15px;}

    .library_wrap {padding:30px 5px 10px}
    .libraryList li a {margin:5px;font-size:1em; line-height: 50px;}

	.articleList li a { width: 100%; }
	
	.libList .slide > li {height: auto; width:25%;}
	.boardZone .tab {width:100%;}
	.boardZone .tab > li {width:calc(50% - 26px);}
	.boardZone .tab > li a {width:100%;}
	.boardZone .boardmore {margin-right:-50%;}
}
@media screen and (max-width:710px){
	.shortcutList {padding:48px 0px;}
	/* .shortcutList li {width:49%;}
	.shortcutList li .ico {margin-bottom:5px;} */
}
@media screen and (max-width:640px){
    .sectionGroup {padding:0 10px}

	.slogan {font-size:1.286em}
	.slogan strong {margin-top:15px;font-size:1.714em}
	
	.mainSearchWrap {padding:0}
	.mainSearchWrap .title,.shortcutList li.wide a br {display:none}
	.mainSearchForm,.mainSearchKeyword {display:block}
	.mainSearchKeyword {padding:0 66px 0 40px}
	.mainSearchKeyword::before {content:"";display:block;position:absolute;top:3px;left:7px;width:40px;height:40px;background:url("/include/image/button/btn_search.png") 0 0 no-repeat;background-size:cover;opacity:.5}
	.mainSearchKeyword .btnSearch {width:66px}
	.mainSearchKeyword input {width:100%;min-width:100%;color:#fff;background-color:#0a518f}
	.mainSearchKeyword input::placeholder {opacity:1;color:#fff}
    
    .memberService {float:none;width:auto;margin:0 0 15px}
	.mylibraryArea {width:auto;height:auto}
	.mylibraryArea li {float:left;width:40%}
	.mylibraryArea li:nth-child(odd) {float:left;width:60%}

	.bookZone {float:none;position:relative;width:100%;}
	.popupZone {float:none;position:relative;right:auto;bottom:auto;width:100%; max-width:480px;height:auto;margin:0 auto;}
	.popupZone .textPopup {font-size:1.286em}
	
	.shortcut {display:none;}

	.libList {height:640px;}
	.libList .slide > li {height:160px; width:33.33333%}
	

	.libraryList li {width:33.333%}
	.shortcutList li .ico {width: 100%;transform:scale(0.8)}
	.shortcutList li.svc1 .ico {background-position-x:-4px} /*이용안내*/
	.shortcutList li.svc2 .ico {background-position-x:-134px} /*상호대차신청*/
	.shortcutList li.svc3 .ico {background-position-x:-264px} /*희망도서신청*/
	.shortcutList li.svc4 .ico {background-position-x:-394px} /*전자도서관*/
	.shortcutList li.svc5 .ico {background-position-x:-524px} /*U도서관*/
	.shortcutList li.svc6 .ico {background-position-x:-654px} /*스마트도서관*/
	.shortcutList li.svc7 .ico {background-position-x:-784px} /*책이음서비스*/
	.shortcutList li.svc8 .ico {background-position-x:-1044px} /*독서동아리*/

	.articleList a {box-sizing: border-box;}

	.bookZone .tab > li {width:22%;}
	.bookZone .tab > li:nth-of-type(1) {width:28%;}
	.bookZone .tab > li:nth-of-type(4) {width:28%;}
	.bookZone .tab > li:nth-of-type(4) a {font-size:1em; line-height:1.2em; padding:8px 20px 0; word-break:keep-all; box-sizing:border-box;}
	.bookZone .tab > li a {font-size:1em; padding:0 3px;}
	.bookList > li {width:25%;}
	.bookList > li:nth-of-type(5) {display:none;}
	.bookZone .tabContent {padding:20px 15px 20px;}

	.boardArticle {padding:30px 15px 0;} 
	.mainSectionGroup {padding-top:30px; padding-bottom:30px;}
	.mainSectionCore {padding-bottom:30px;}
}
@media screen and (max-width:480px){
	#header {padding-bottom:20px;}
	#header h1 {margin:0 20px;}
    .slogan strong {margin-top:10px;font-size:1.500em}
	.popupZone .textPopup {font-size:1em}
    .shortcut {padding:20px 0;}
	.shortcutList li {float:left; width:33.33333%;}
	.shortcutList li a {margin-bottom: 20px; font-size: 15px;}
	.shortcutList li .ico {width: 130px;}

	.libList {margin:0 5px; height:680px;}
	.libList .slide a {display:inline-block;padding:0 0 0;margin-right:0;vertical-align:top;width:110px;height:110px;overflow:visible;}
	.libList .slide a:after {width:110px; height:110px; background-size:660px; margin-left:-55px;}
	.libList .slide > li {height: 170px;}
	.libList .slide .info {word-break: keep-all;}
	.libList .slide > li.ojlake a:after {background-position:0 15px} /* 옥정호수도서관 */
	.libList .slide > li.djlib a:after {background-position:-110px 15px} /* 덕정도서관 */
	.libList .slide > li.childlib a:after {background-position:-220px 15px} /* 꿈나무도서관 */
	.libList .slide > li.nmlib a:after {background-position:-330px 15px} /* 남면도서관 */
	.libList .slide > li.gulib a:after {background-position:-440px 15px} /* 고읍도서관 */
	.libList .slide > li.dklib a:after {background-position:0 -95px} /* 덕계도서관 */
	.libList .slide > li.hmlib a:after {background-position:-110px -95px} /* 양주희망도서관 */
	.libList .slide > li.gjlib a:after {background-position:-220px -95px} /* 광적도서관 */
	.libList .slide > li.jhlib a:after {background-position:-330px -95px} /* 장흥작은도서관 */
	.libList .slide > li.readbook a:after {background-position:-440px -95px} /* 책읽는 양주 */
	.libList .slide > li.goamlib a:after {background-position:-438px -95px} /* 고암작은도서관*/
	.libList .slide > li.yjlib a:after {background-position:-549px -95px} /* 사립작은도서관*/
	.libList .slide .tit {bottom:-50px; background-color: transparent;}
	.libList li.botrow .slide {display: block;}

	.bookZone .tab > li:nth-of-type(4) a {padding:8px 5px 0;}
}
@media screen and (max-width:375px){
	.popupZone .textPopup {font-size:0.917em}
	.libList {height:1010px;}
	.libList .slide > li {width: 50%;}
}
@media screen and (max-width:360px){
	.popupZone .textPopup {font-size:0.833em}
	.bookZone .tab > li a {padding:0px;}
}
@media screen and (min-width:1025px){
	#header {width:1200px;}
	.libList, .sectionGroup {width:1200px; margin:0 auto;}
	.sectionContent {float:left}
    .memberService,.libraryInfoGroup {width:350px;height:425px}
    .loginArea,.mylibraryArea {height:205px}
    
    .library_wrap {float:right;width:350px;height:425px;padding:0 0 10px;}
	.libraryList {margin:-9px 0 0 -8px}
	.libraryList li {float:left;width:33.333%;margin-top:11px}
    .libraryList li a {height:61px; line-height: 61px; margin-left:8px}
    
    
	/* .shortcutList {margin:-13px 0 0 -20px} */
	.shortcutList li {float:left;width: 58px;margin: 0 4px;}
    /* .shortcutList li a {margin-left:20px} */
    
    .articleList > li {float:left; height:150px;}
	.articleList li .date {bottom:20px;left:20px;}
	
	.libraryInfo,.bookZone {float:left;width:820px;margin:0}
	
	.bookZone {height:auto}

	/* animation */
	.libList .slide a:hover, .libList .slide a:focus {animation-name:mainService;animation-duration:0.5s;animation-fill-mode:forwards; border-radius:50%;}
}

/* keyframes */
@keyframes mainService {
	0% {box-shadow:0 0 0 5px rgba(255,255,255,0.3)}
	50% {box-shadow:0 0 0 15px rgba(255,255,255,0.3)}
	100% {box-shadow:0 0 0 5px rgba(255,255,255,0.3)}
}