@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");

.sectionGroup {position:relative;max-width:1200px;margin:0 auto;padding:30px 0px}
.sectionGroup::after,.libraryInfo .closeTimeArea li::after {content:"";display:block;clear:both}

.slogan {margin-bottom:30px;text-align:center}
.slogan img {max-width:50%}

#section1 {background:#f2f4e6}
#section1 article {overflow:hidden;position:relative;box-sizing:border-box}
#section1 article .title {margin-bottom:15px;font-size:1.250em;color:#fff;}
#section1 .loginArea .title span {font-weight:normal;font-size:0.824em;color:#555}
#section1 .left, #section1 .right {width:340px;}
#section1 .center {float:left; width: 520px;}
/* 이용안내 */
.libraryInfo {position:relative; float:left; width:340px; height:265px;}
.libraryInfo .title {position:absolute; top:-10px; left:30px; font-size:1.250em; background:#526000; color:#fff; z-index:1; padding:7px 30px;}
.libraryInfo > article,.libraryInfo > div {float:left;position:relative;width:100%;height:100%;color:#fff;box-sizing:border-box}
.libraryInfo .closeTimeArea {padding:60px 30px 25px;background:#9fb700 url(/include/image/common/main_libinfo_bg.png) 0 0 no-repeat}
.libraryInfo .more {position:absolute;top:15px;right:30px;width:12px;height:12px;background:url(/include/image/button/ico_more.png) 50% 50% no-repeat; z-index:1;}
.libraryInfo .closeTimeArea .title,.libraryInfo .telArea .title {margin-bottom:20px;font-size:1.333em;line-height:1}
.libraryInfo .closeTimeArea .title {padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.5)}
/* .libraryInfo .closeTimeArea li {margin-top:5px;font-size:1.067em}
.libraryInfo .closeTimeArea li span {float:right} */
.libraryInfo .infoList {margin-bottom:20px;}
.libraryInfo .infoList li {display:table;float:left;position:relative;text-align:center; box-sizing:border-box; width:90px; height:58px; background:rgba(255,255,255,0.3); color:#5d6b00; line-height:58px; border-radius:8px; font-size:1em; letter-spacing:-1px;}
.libraryInfo .infoList li.tline {line-height:20px}
.libraryInfo .infoList li.on {background:#fff; font-weight:700;}
.libraryInfo .infoList li.on::after {content:""; position:absolute; left:50%; bottom:-9px; border-left:solid 10px transparent; border-right:solid 10px transparent; border-bottom:solid 10px #fff; height:0; width:0; transform:rotate(180deg); margin-left:-10px;}
.libraryInfo .infoList li+li {margin-left:5px;}
.libraryInfo .infoList li a {display:table-cell;line-height:normal;vertical-align:middle;height:58px;width:inherit;text-align:center;}
.libraryInfo .infoList li.tline {padding:10px 0;}
.libraryInfo .mainInfoBox {width:280px; height:108px; border:1px solid #fff; border-radius:10px; box-sizing:border-box; display:table;}
.libraryInfo .mainInfoBox li {display:table-cell;text-align:center;vertical-align:middle;line-height:1.2em;font-size:1.125em;text-align:center;}
.libraryInfo .mainInfoBox li span {display:inline-block;color:#ffff00; margin:5px 0; font-weight:700; vertical-align:middle;}
.libraryInfo .telArea {width:29%;padding:25px 15px;text-align:center}
.libraryInfo .telArea img {margin-top:15px}
.libraryInfo .telArea p {position:absolute;right:0;bottom:20px;left:0;font-size:1.200em}
.libraryInfo .linkArea {width:19%;text-align:center}
.libraryInfo .linkArea a {display:block;height:50%;padding-top:25px;font-weight:bold;font-size:1.333em;line-height:1;box-sizing:border-box}
.libraryInfo .linkArea a img {display:block;margin:15px auto 0}
.libraryInfo .linkArea a:last-child {font-size:1.467em;background-color:#b1c3d2}

.holidayArea {padding:30px; height:145px; width:340px;}
.holidayArea {position:relative;color:#fff; background:#889d00 url(/include/image/common/main_holiday_bg.png) 0 0 no-repeat;}
.holidayArea h2.title {line-height:1em;}
.holidayArea .more,.mylibraryArea .more {position:absolute;top:15px;right:30px;width:12px;height:12px;background:url(/include/image/button/ico_more.png) 50% 50% no-repeat}
.holidayArea .desc {font-size:15px;text-align:left;letter-spacing:-0.07em; margin-top:5px;}
.holidayArea .info {font-size:13px;line-height:19px;}
.holidayArea .info li {display:block}
.holidayArea .info i {display:inline-block;width:12px;height:12px;border-radius:50%;box-sizing:border-box;}
.holidayArea .info i.holiday {border:2px solid #fff}
.monthController {display:inline-block;overflow:hidden;position:absolute;top:10px;left:0;padding:0 22px;font-size:2.267em}
.monthController a {display:block;position:absolute;top:50%;width:14px;height:20px;margin-top:-10px;background:url(/include/image/board/arr_sp.png) 0 -440px no-repeat}
.monthController a.btnMonthPrev {left:0}
.monthController a.btnMonthNext {right:0;background-position:0 -470px}
.monthController p {width:70px;height:70px;line-height:70px;text-align:center;border:2px solid #fff}
.holidayList {display:block;width:100%;box-sizing:border-box}
.holidayList ul {width:calc(100% - 29px);vertical-align:middle; position:relative;}
.holidayList li {float:left;width:25px;height:25px;margin:0 6px 6px 0;font-size:1em;font-weight:700;line-height:26px;text-align:center;border-radius:50%;box-sizing:border-box;background-color:#fff;color:#5d6b00;}
.holidayList li.moreDate {position:absolute;top:0;right:0;background:transparent;border:1px solid #fff;color:#fff;}
.holidayList li.moreDate span {display:block; margin-top:-6px;}
/* .holidayList li.all {color:#333;background-color:#fff} */
/* .holidayList li.holiday {line-height:38px;border:2px solid #fff} */

/* 주요서비스 */
.shortcut {float:left; max-width:520px;height:410px;margin:0 auto;padding:30px; background:#408174 url(/include/image/dklib/main/main_shortcut_bg.png) 0 0 no-repeat; ; box-sizing:border-box;}
.shortcutList li {float:left;width:25%;margin:0 0 10px;text-align:center}
.shortcutList li a {display:inline-block;font-family:'나눔스퀘어',NanumSqaure,'맑은 고딕','Malgun Gothic','나눔고딕',NanumGothic,sans-serif;color:#fff; font-size:0.953em;}
.shortcutList li.tline a {line-height:1.2em; word-break:keep-all;}
.shortcutList li.tline i {margin-bottom:8px}
.shortcutList li .ico {display:block;width:80px;height:80px;margin:0 auto 5px;background:url(/include/image/dklib/main/ico_shortcut.png) 0 0 no-repeat; border-radius:50%;}
/* .shortcutList li a:hover .ico,.shortcutList li a:focus .ico {opacity:0.8} */
.shortcutList li.svc2 .ico {background-position:-110px 0}
.shortcutList li.svc3 .ico {background-position:-220px 0}
.shortcutList li.svc4 .ico {background-position:-330px 0}
.shortcutList li.svc5 .ico {background-position:0 -120px}
.shortcutList li.svc6 .ico {background-position:-110px -120px}
.shortcutList li.svc7 .ico {background-position:-220px -120px}
.shortcutList li.svc8 .ico {background-position:-330px -120px}
.shortcutList li.svc9 .ico {background-position:0 -240px}
.shortcutList li.svc10 .ico {background-position:-110px -240px}
.shortcutList li.svc11 .ico {background-position:-220px -240px}
.shortcutList li.svc12 .ico {background-position:-330px -240px}

/* 나의도서관 */
.mylibraryArea li {float:left;position:relative;width:50%;margin:4px 0;padding-left:33px;font-size:1.067em;line-height:30px;color:#fff;box-sizing:border-box;background:url(/include/image/common/ico_main_my.png) 0 0 no-repeat}
.mylibraryArea li a:hover,.mylibraryArea li a:focus {text-decoration:underline; text-underline-position:under;}
.mylibraryArea li:nth-of-type(2) {background-position:0 -30px}
.mylibraryArea li:nth-of-type(3) {background-position:0 -60px}
.mylibraryArea li:nth-of-type(4) {background-position:0 -90px}
.mylibraryArea li:nth-of-type(5) {background-position:0 -120px}
.mylibraryArea li:nth-of-type(6) {background-position:0 -150px}

.loginArea {float:right; width:340px; height:200px; background-color:#fff; padding:50px 30px 23px;}
.loginArea h2 {position:absolute; top:0; left:30px; background:#889d00; color:#fff; z-index:1; padding:0 30px; line-height:50px;}
.loginArea .more {display:block;position:absolute;top:17px;right:26px;width:12px;height:12px;padding:4px;line-height:0}
.loginArea .memberInfo {position:relative;margin-top:20px;padding-right:80px;background-color:#eee;box-sizing:border-box;padding:10px; min-height:71px; text-align:center;}
.loginArea .memberInfo.assoMem {line-height:110px;}
.loginArea .memberInfo > b {font-size:1.250em; line-height:1.2em;}
.loginArea .memberInfo > b span {font-size:0.875em; line-height:1.2em; font-weight:normal;}
.loginArea .memberInfo .number {margin-top:5px; text-align: left; letter-spacing:-1.3px; font-size:0.875em; text-align:center;line-height:1.3;}
.loginArea .memberInfo .btnLogout {position:absolute;top:0;right:0;width:80px;height:71px;font-weight:600;font-size:1.133em;line-height:71px;color:#fff;background-color:#666 !important;text-align:center;}
.loginArea .memberInfo .btnArea {margin-top:10px;line-height:40px;}
.loginArea .memberInfo .btnArea a {display:block;float:left;width:calc(50% - 5px);color:#333;background-color:#f3f4f4}
.loginArea .memberInfo .btnArea a + a {margin-left:10px}
.loginArea .inputGroup {position:relative;margin-top:20px;padding-right:80px}
.loginArea .inpArea {overflow:hidden;position:relative;height:35px;background-color:#eee}
.loginArea .inpArea label {position:absolute;top:0;left:0;width:32px;height:32px;padding:3px 5px}
/* .loginArea .inpArea label::before {content:"";display:block;position:absolute;top:3px;left:5px;width:32px;height:32px;background:url(/include/image/common/btn_snb.png) 0 -80px no-repeat} */
.loginArea .inpArea input {width:100%;height:35px;line-height:35px;border:0;background-color:#eee; padding-left:15px;}
.loginArea .inpArea + .inpArea {margin-top:1px}
/* .loginArea .inpArea + .inpArea label::before {background-position:0 -120px} */
.loginArea .btnLogin {position:absolute;top:0;right:0;width:80px;height:71px;font-weight:600;font-size:1.133em;line-height:71px;color:#fff;background-color:#666;text-align:center;}
.loginArea .menuLink {margin-top:20px;line-height:1em;text-align:center;}
.loginArea .menuLink a {display:inline-block;position:relative;font-size:1em;letter-spacing: -1px;}
.loginArea .menuLink a + a {margin-left:8px;padding-left:10px}
.loginArea .menuLink a + a::before {content:"";position:absolute;top:50%;left:0;height:12px;margin-top:-6px;border-left:2px solid #dbdbdb}

.loginArea.after {padding-top: 15px; padding-bottom: 15px;}
.loginArea.after .memberInfo {margin-top: 0;}
.loginArea.after .memberInfo > b {display:inline-block; margin-bottom: 5px;}
.loginArea.after .memberInfo p.barcode {padding: 0 10px;}
.loginArea.after .menuLink {margin-top: 10px;}

/* 로그인 - 준회원 */
.loginArea.associate {padding: 20px 30px;}
.loginArea.associate .memberInfo {min-height: auto; margin-top: 0; padding: 0; background-color: transparent; text-align: left;}
.loginArea.associate .memberInfo > b {font-size: 1.125em; color: #000;}
.loginArea.associate .memberInfo > p {font-size: 0.938em;}
.loginArea.associate .memberInfo > p + p {margin-top: 5px;}
.loginArea.associate .memberInfo > p + p.barcode {margin-top: 10px;}
.loginArea.associate .memberInfo .btn {display: block; margin-top: 5px; background-color: #526000;}
.loginArea.associate .menuLink {margin-top: 15px;}

/* 로그인 - 정회원 */
.loginArea.associate .memberInfo.regular > p + p {margin-top: 0;}
.loginArea.associate .memberInfo.regular > p + p.barcode {margin-top: 5px;}
.loginArea.associate  .regular + .menuLink {margin-top: 5px;}

#section2 .sectionGroup {padding-top:50px; padding-bottom:75px;}

.boardArticle {position:relative;border:1px solid #e6e6e6;background-color:#fff; height:360px;float:left; padding:20px 30px; box-sizing:border-box;}
.boardArticle.mainNotice {width:340px;}
.boardArticle.mainEvent {width:480px; margin:0 20px;}
.boardArticle .tab {overflow:hidden;}
.boardArticle .tab > li {float:left;position: relative;}
.boardArticle .tab > li a {display:block;line-height:54px;font-size:1.563em;color:#748600;font-weight:bold;}
.boardArticle .tab > li a::before {content:"";position:absolute;top:0;left:0;width:30px; height:2px; background:#748600;}
.boardArticle .boardContent li {overflow:hidden;position:relative;line-height:30px;white-space:nowrap;text-overflow:ellipsis;font-size:1em;letter-spacing: -1px;}
.boardArticle #eventList li {padding-right: 85px}
.boardArticle #eventList li.top {padding-right:0;}
.boardArticle .boardContent li a {color:#333; }
.boardArticle .boardContent li .lib {display:inline-block;width:57px;height:26px;line-height:26px; font-size:15px; font-weight:700; letter-spacing:-0.1em;text-align:center;font-style:normal;color:#fff !important; background:#4f4f4f;margin-right:10px;vertical-align:middle;}
.boardArticle .boardContent li .date {position:absolute;top:0;right:0;color:#999;font-weight:400;}
.boardArticle .boardContent .more {display:block;position:absolute;top:30px;right:30px;width:12px;height:12px;padding:4px;line-height:0}
.boardArticle .boardContent ul a:hover,.boardArticle .tabContent ul a:focus {text-decoration:underline; }
.boardArticle .boardContent li.nodata {padding-right:0;line-height:200px;text-align:center}

.boardArticle .top {position:relative;min-height:102px;margin-bottom:15px;padding-right:0px;border-bottom:1px solid #ddd;}
.boardArticle #eventList .top {padding-left:90px;}
/* .boardArticle #noticeList .top img {position:absolute;top:0;left:0;border-radius:50%} */
/* .boardArticle #noticeList .top p {overflow:hidden;font-size:1.125em;font-weight:700;line-height:1.3;color:#333;text-overflow:ellipsis;white-space:nowrap}
.boardArticle #noticeList .top p.desc {margin-top:10px; font-size:1em; font-weight:400;} */
.boardArticle #noticeList .top .date {margin-top:12px;font-size:1.063em;line-height:1;color:#666; position: relative; font-weight:400;}

.boardArticle #eventList .top .date {position:absolute;top:0;left:0;width:80px;height:80px;font-size:14px;line-height:2em;color:#555; font-weight:400; background:#f5f5f5; text-align:center; padding:8px 0; box-sizing:border-box; letter-spacing:-1px; }
.boardArticle #eventList .top .date span {display: block; margin-bottom: 5px !important;}
.boardArticle #eventList .top .date .day {font-size:2em; font-size:42px; font-weight:bold;}
.boardArticle .top p {font-size:1.125em;font-size:1.125em; font-weight:700;line-height:1.5;color:#333;}
.boardArticle .top p.tit {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boardArticle .top p.desc {margin-top:10px; font-size:1em; font-size:1em; font-weight:400;white-space:normal;height:45px;overflow:hidden;}



/* library schedule */
.schedule_wrap {float:right; overflow:hidden; position:relative; width:340px; min-height:360px; background-color:#fff; box-sizing:border-box; background:url(/include/image/common/bg_diagonal_line.png) 0 100% repeat; padding:10px;}
.schedule {position:relative; background:#fff;}
/* .schedule h4 {padding:20px 30px;font-size:1.438em;line-height:30px;} */
.schedule h4 {position:absolute; top:-10px; left:20px; width:130px; font-size:1.250em; background:#333; color:#fff; text-align:center; z-index:1; padding:0; line-height:50px;}
.schedule .libList {background:#fafafa; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; padding:10px 30px; text-align:center;}
.schedule .libList li {display:inline-block;position:relative;box-sizing:border-box; width:calc(25% - 5px);line-height:30px; text-align:center;}
.schedule .libList li.selected {color:#fff; background:#333; border-radius:15px;}
.schedule .cont {position:relative;height:340px;letter-spacing: -1px;}
.schedule .guide {position:absolute;top:0;right:0;bottom:0;width:140px;height:40px;box-sizing:border-box;}
.schedule .guide .topGroup {position:relative;padding:0 0 10px;text-align:center;margin-top:15px;margin-right:70px;}
.schedule .guide .arrowGroup {position:absolute;top:15px;right:50px;overflow:hidden;width:105px;height:30px;margin:0 auto;}
.schedule .guide .arrow {position:absolute;width:15px;height:20px;padding:0;background:url("/include/image/common/btn_sp.png") 0 0px no-repeat;margin-top:2px;}
.schedule .guide .arrow.prev {left:0;}
.schedule .guide .arrow.next {background-position:0 -20px; right:0;}
.schedule .guide .topGroup p {display:inline-block;line-height:1.2;color:#333;font-weight:bold}
.schedule .guide .topGroup p.year {color:#333;}
.schedule .guide .year {font-size:1.125em;}
.schedule .guide .month {font-size:1.125em;}
.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 .calendar {position:relative;padding:60px 20px 0px;}
.schedule .calendar table {position:relative;text-align:center}
.schedule .calendar table th {height:20px;font-weight:bold;line-height:20px;font-size:1em;color:#666666;padding-bottom:10px;border-bottom:1px solid #ddd;}
.schedule .calendar table td {width:14.285%;padding:0;height:40px;;color:#666666;text-align:center}
.schedule .calendar table td div {width:22px;height:22px;line-height:22px;padding:4px;margin:0 auto;}
 
/* .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:#2dabf1;}
.schedule .calendar a.holiday {color:#fff;background:#fc424d; border-radius:50%;}
.schedule .calendar a.prog {color:#fff;background:#53b569;}
.schedule .btnMore {position:absolute;top:15px;right:20px;transform:rotate(0deg);}
.schedule .btnMore a {background-position:0 -20px}
.schedule .info {position:absolute;left:10px;right:10px;bottom:12px;text-align: center;}
.schedule .info > li {display:inline-block;font-size:0.867em;font-weight:bold;color:#7d7d7d;text-align:center;margin:0 5px;}
.schedule .info > li + li {margin-top:5px}
.schedule .info i {display:inline-block;vertical-align:middle;background-size:100% !important}
.schedule .info i.holiday {width:15px;height:15px;margin:0 1px;;background:#fc424d; border-radius:50%;}
.schedule .info i.event {width:15px;height:15px;background:#2dabf1;}
.schedule .info i.prog {width:15px;height:15px;background:#53b569;}


#section3 {background-color:#f3f4f4}
#section3 .sectionGroup {padding:60px 0 0;}

.bookZone {position:relative;}
.bookZone .tab {margin-bottom:30px;box-sizing:border-box; position:absolute; top:-85px; left:50%; width:730px; margin-left:-390px;}
.bookZone .tab > li {float:left;width:20%;text-align:center;vertical-align:middle;box-sizing:border-box;background-color:#fff}
.bookZone .tab > li:nth-of-type(1) {width:29%}
.bookZone .tab > li:nth-of-type(4) {width:31%}
.bookZone .tab > li a {display:block;position:relative;height:100%;padding:9px 5px;color:#333;font-size:1.200em;line-height:30px;letter-spacing:-0.05em;border:1px solid #333;border-left:0}
.bookZone .tab > li:first-child a {border-left:1px solid #333}
.bookZone .tab > li.on {background-color:#333}
.bookZone .tab > li.on a {font-weight:bold;border-color:#333; color:#fff; }
.bookZone .tab > li a.more {display:none; position:absolute; top:0; right:-48px; width:49px; height:50px; background-color:#fff; padding:10px 0; box-sizing:border-box; border-left:0;transform:rotate(0deg);}
/* .bookZone .tab > li.on a {font-weight:bold;color:#222;background-color:#fff} */
.bookZone .tab > li.on a.more {display:block; background-color:#fff; color:#555;}

.bookZone .tabContent {position:relative; padding:0px 0px 30px; }
.bookList > li {float:left;position:relative;width:180px;}
.bookList > li + li {margin-left:75px;} 
.bookList .cover {display:block;position:relative;margin:0;transition:all .5s}
.bookList .cover a {display:block;position:relative;margin:0 auto;padding-top:144.45%;}
.bookList .cover img {position:absolute;top:0;left:0;width:100%;height:100%; box-sizing:border-box; border:1px solid #d5d5d5;}
/* .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;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 .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;}

#section4.mainBannerGroup {background:#fff;}
#section4 .sectionGroup {padding: 0;}
/* 배너모음 */
.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:120px}
.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){
	.sectionGroup {padding:30px 15px}
	.bookList {overflow:hidden;margin:0;padding-left:6px}
	.bookList > li {width:calc(20% - 10px);}
	.bookList > li + li {margin-left:10px;}

	.bookZone .tab {width:calc(100% - 48px); margin-left:-50%;}

	#section1 .left {width:calc(100% - 340px);}
	#section1 .right {float: none !important; position: absolute; top:30px; right:15px;}
	#section1 .center {float: right; width:100%;}
	.libraryInfo, .holidayArea, .loginArea, .popupzone {width:100%;}
	.libraryInfo .mainInfoBox {width:100%; height:auto; min-height:100px}
	.libraryInfo .infoList li {width:calc(33.333% - 4px);}
	.shortcut {max-width:100%; background-size:cover}
	.popupZone {max-width:100%; width:100%; float: left;}
	.holidayArea .desc {font-size:1em;}
	.boardArticle.mainNotice, .boardArticle.mainEvent {width:calc(50% - 5px);}
	.boardArticle.mainEvent {margin:0 0 0 10px}

	#section3 .sectionGroup {padding:60px 15px 0;}

	.boardArticle #eventList li {padding-right:0;}
	.bookList > li.nodata {min-height:200px;line-height:200px;text-align:center;}
}
@media screen and (max-width:800px){
	.slogan {margin-bottom:0}
	.mylibraryArea {margin-bottom:15px}
	.mylibraryArea li {width:33.333%}
	/* .holidayList ul {text-align:right} */
	.holidayList li {display:inline-block;float:none}
	.shortcutList li {width:25%; min-height:112px;}
	.libraryInfo,.libraryInfo > article, .libraryInfo > div {position:relative;height:auto}
	/* .libraryInfo .closeTimeArea {width:70%;height:260px} */
	.libraryInfo .telArea {width:30%;height:260px}
	.libraryInfo .linkArea {width:100%}
	.libraryInfo .linkArea a {float:left;width:50%;height:auto;padding:20px 0}
	.bookZone .tab > li a {font-size:1.067em}

	.libraryInfo .closeTimeArea {padding:60px 15px 25px;}
	.holidayArea{padding: 30px 15px}
	.libraryInfo .more, .holidayArea .more {right:15px;}
	
	.loginArea {height: 198px;}
}
@media screen and (max-width:640px){
	#section1 .left {width:calc(100% - 240px);}
	#section1 .right {width:240px;}
	.libraryInfo .closeTimeArea {padding:40px 15px 25px;}
	.holidayArea {padding: 20px 15px;height:125px;}
	.holidayList li {margin-bottom:0;}
	.loginArea {height: 194px; padding: 50px 15px 20px}
	.loginArea .menuLink a + a {margin-left: 5px;padding-left: 8px;}
	.loginArea .more {right:15px;}
	.libraryInfo .mainInfoBox {min-height:74px; padding:9px}	

	.libraryInfo > article, .libraryInfo > div {float:none}
	.libraryInfo .closeTimeArea {width:100%;height:auto}
	.libraryInfo .telArea {width:auto;height:220px;margin-right:110px;padding:15px}
	.libraryInfo .telArea .title {margin-bottom:10px}
	.libraryInfo .telArea p {font-size:1.154em}
	.libraryInfo .linkArea {position:absolute;right:0;bottom:0;width:110px}
	.libraryInfo .linkArea a {float:none;width:100%;height:110px;padding:15px 0 0}
	.bookZone .tab > li {height:50px; }
	.bookZone .tab > li a {padding:0; box-sizing:border-box; line-height:50px; font-size:1.231em}
	.bookZone .tab > li a.more {padding: 0;}
	.boardArticle {padding: 20px 15px}
	.boardArticle #eventList li.top {padding-left:0;}
	.boardArticle .top p.desc {height:55px;}
	.boardArticle #eventList .top .date {display:none;}
	.boardArticle .boardContent .more {right:15px;}

	/* 로그인 - 준회원 */
	.loginArea.associate .memberInfo .btn {line-height: 34px;}
}
@media screen and (max-width:520px){
	#section1 .left {width:100%; margin-top:440px;}
	#section1 .center {position: absolute; top:30px !important; float:none; width:calc(100% - 30px); }
	#section1 .right {width:100%; position:relative; right:0;}
	.loginArea {height: auto;}
	.loginArea .memberInfo.assoMem {line-height:50px;}
	.popupZone {margin:30px auto;}
	#section2 .sectionGroup {padding-top:30px; padding-bottom:55px;}
}
@media screen and (max-width:480px){
	.mylibraryArea li,.bookList li {width:calc(25% - 10px);}
	.bookList li:nth-of-type(5) {display: none;}
	.bookZone .tab > li {width:21%;}
	.bookZone .tab > li:nth-of-type(4) {width:29%}
	.bookZone .tab > li:nth-of-type(4) a {font-size:1.125em; line-height:1.5em; padding:5px; word-break: keep-all;}
	.bookZone .tab > li:nth-of-type(4).on a.more {line-height:40px;}

	.boardArticle.mainNotice, .boardArticle.mainEvent {width:100%;}
	.boardArticle.mainEvent {margin:20px 0 0;}
	.libraryInfo .mainInfoBox {padding:20px}
	.shortcut {padding:30px 15px;}
	.shortcutList li .ico {width:70px;height:70px;background-size:355px;}
	.shortcutList li a:hover .ico,.shortcutList li a:focus .ico {opacity:0.8}
	.shortcutList li.svc2 .ico {background-position:-95px 0}
	.shortcutList li.svc3 .ico {background-position:-190px 0}
	.shortcutList li.svc4 .ico {background-position:-285px 0}
	.shortcutList li.svc5 .ico {background-position:0 -104px}
	.shortcutList li.svc6 .ico {background-position:-95px -104px}
	.shortcutList li.svc7 .ico {background-position:-190px -104px}
	.shortcutList li.svc8 .ico {background-position:-285px -104px}
	.shortcutList li.svc9 .ico {background-position:0 -208px}
	.shortcutList li.svc10 .ico {background-position:-95px -208px}
	.shortcutList li.svc11 .ico {background-position:-190px -208px}
	.shortcutList li.svc12 .ico {background-position:-285px -208px}
}
@media screen and (max-width:375px){
	.slogan img {max-width:60%}
	.holidayWrap {text-align:center}
	.monthController {position:relative;top:inherit;left:inherit}
	.monthController p {height:36px;line-height:36px}
	.holidayList {display:block;margin-top:10px;padding:0}
	.holidayList ul {display:block;text-align:center}
	.holidayArea .desc {text-align:center;}
	
	.mylibraryArea li,.bookList li {width:calc(33.3333% - 10px);}
	.bookList li:nth-of-type(4) {display: none;}
	.bookZone .tab > li a {font-size:1em}
	.bookZone .tab > li:nth-of-type(4) a {font-size:1em;}
	.bookList .rank {left:-7px;width:28px;height:28px;padding:0 6px 6px 0;font-size:1.231em;line-height:28px}

	.shortcutList li .ico {width:60px;height:60px;background-size:300px;}
	.shortcutList li a:hover .ico,.shortcutList li a:focus .ico {opacity:0.8}
	.shortcutList li.svc2 .ico {background-position:-80px 0}
	.shortcutList li.svc3 .ico {background-position:-160px 0}
	.shortcutList li.svc4 .ico {background-position:-240px 0}
	.shortcutList li.svc5 .ico {background-position:0 -87px}
	.shortcutList li.svc6 .ico {background-position:-80px -87px}
	.shortcutList li.svc7 .ico {background-position:-160px -87px}
	.shortcutList li.svc8 .ico {background-position:-240px -87px}
	.shortcutList li.svc9 .ico {background-position:0 -174px}
	.shortcutList li.svc10 .ico {background-position:-80px -174px}
	.shortcutList li.svc11 .ico {background-position:-160px -174px}
	.shortcutList li.svc12 .ico {background-position:-240px -174px}

}
@media screen and (min-width:375px){
	.holidayArea .info {position:absolute;top:95px;left:0;}
}
@media screen and (min-width:800px){
	.visual {padding:20px 0}
	/* #section1 article {float:left;height:200px} */
	#section1 .mylibraryArea {width:45%}
	/* #section1 .holidayArea {float:right;width:calc(55% - 30px)} */
	/* .holidayList {display:block;overflow-y: auto;} */
	/* .holidayList ul {height:100px;} */
}
@media screen and (min-width:1025px){
	/* .sectionGroup {padding:30px 0} */
	/* #section1 .loginArea {width:29.166%} */
	/* #section1 .mylibraryArea {width:30.833%;margin-left:30px} */
	/* #section1 .holidayArea {width:35%} */
	/* .libraryInfo,.bookZone {float:left;width:58.75%;margin:0} */
	/* .boardArticle,.popupZone {float:right;width:38.333333333333333%;height:260px} */
	/* .bookZone,.popupZone {height:auto} */
	.popupZone {float:right;height:210px;width:340px;}
	.bookZone {height:auto}

	/* animation */
	.shortcut {padding:20px 30px;}
	.shortcutList li .ico {border:0.6px solid rgba(255,255,255,0.6);}
.shortcutList a:hover .ico, .shortcutList a:focus .ico {animation-name:mainService;animation-duration:0.5s;animation-fill-mode:forwards}
}

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