@charset "utf-8";

/* 검색 */
.visualw{padding:50px 0;display:inline-block;width:100%;background:url(/nanum/site/builder/main/main01/img/visual_bg.jpg) no-repeat center top / cover;}
.visualw .txtw{float:left;padding:50px 0;color:#fff;}
.visualw .txtw span{display:block;margin-bottom:20px;font-weight:200;font-size:30px;line-height:1;}
.visualw .txtw p{margin-bottom:60px;font-weight:700;font-size:44px;line-height:1;}
.visualw .txtw .search_bar{position:relative;height:66px;line-height:66px;font-weight:500;font-size:18px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.5);border-radius:10px;}
.visualw .txtw .search_bar .search_text{padding:0 40px;margin-right:70px;width:360px;height:100%;font-size:18px;border:0;background:transparent;}
.visualw .txtw .search_bar label{position:absolute;top:0;left:40px;color:#999;cursor:pointer;}
.visualw .txtw .search_bar .search_btn{position:absolute;top:0;right:40px;width:29px;height:100%;background:url(/nanum/site/builder/main/main01/img/search.png) no-repeat center;border:0;text-indent:-9999px;}

/* 팝업존 */
.visualw .puzw{float:right;width:510px;}
.visualw .puzw .swiper-wrapper{box-shadow:0 10px 32px rgba(0,0,0,0.4);}
.visualw .puzw .swiper-slide{height:290px;font-size:0;border-radius:15px;overflow:hidden;}
.visualw .puzw .swiper-slide .swiper-lazy{height:100%;}
.visualw .puzw .swiper-slide a{display:block;height:100%;line-height:0;}
.visualw .puzw .swiper-slide a img{width:100%;height:100%;}
.visualw .puzw .puz_btn{float:right;margin-right:10px;}
.visualw .puzw .puz_btn .swiper-pagination{display:inline-block;position:static;height:17px;font-size:0;line-height:0;}
.visualw .puzw .puz_btn .swiper-pagination-bullet{margin-left:10px;width:17px;height:100%;background:url(/nanum/site/builder/main/main01/img/puz_off.png) no-repeat center;opacity:1;}
.visualw .puzw .puz_btn .swiper-pagination-bullet-active{background-image:url(/nanum/site/builder/main/main01/img/puz_on.png);}
.visualw .puzw .puz_btn p{display:inline-block;vertical-align:middle;margin-left:15px;}
.visualw .puzw .puz_btn p a{display:block;width:6px;height:20px;font-size:0;line-height:0;text-indent:-9999px;}
.visualw .puzw .puz_btn .swiper_play{display:none;}
.visualw .puzw .puz_btn .swiper_play a{background:url(/nanum/site/builder/main/main01/img/pstart.png) no-repeat top center;}
.visualw .puzw .puz_btn .swiper_stop a{background:url(/nanum/site/builder/main/main01/img/pstop.png) no-repeat top center;}

/* 바로가기 */
.mq_listw{position:relative;padding:30px 0;background:#f6f6f6;}
.mq_listw .swiper-slide a{display:block;font-weight:500;font-size:16px;color:#444;text-align:center;}
.mq_listw .swiper-slide a span{display:block;margin:0 auto 15px;width:82px;height:82px;background:#fff;border-radius:50%;}
.mq_listw .swiper-slide a span i{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;transition:all 0.6s linear;}
.mq_listw .swiper-slide.icon1 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon1.png);}
.mq_listw .swiper-slide.icon2 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon2.png);}
.mq_listw .swiper-slide.icon3 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon3.png);}
.mq_listw .swiper-slide.icon4 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon4.png);}
.mq_listw .swiper-slide.icon5 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon5.png);}
.mq_listw .swiper-slide.icon6 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon6.png);}
.mq_listw .swiper-slide.icon7 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon7.png);}
.mq_listw .swiper-slide.icon8 a span i{background-image:url(/nanum/site/builder/main/main01/img/mq_icon8.png);}
.mq_listw .mq_btn{position:absolute;left:50%;top:50%;margin:-14px 0 0 -550px;height:28px;}
.mq_listw .mq_btn .swiper-button-next,
.mq_listw .mq_btn .swiper-button-prev{top:0;margin-top:0;width:15px;height:100%;background-size:auto;}
.mq_listw .mq_btn .swiper-button-next{right:-45px;background-image:url(/nanum/site/builder/main/main01/img/mq_next.png);}
.mq_listw .mq_btn .swiper-button-prev{left:-45px;background-image:url(/nanum/site/builder/main/main01/img/mq_prev.png);}

/* 도서관 일정 */
.mbox_w > div{position:relative;margin:60px 0;}
.mbox_w > div > p{margin-bottom:15px;font-weight:700;font-size:24px;line-height:37px;color:#222;}
.mbox_w .more_btnw{position:absolute;right:0;top:0;height:35px;border:1px solid #ededed;}
.mbox_w .more_btnw select{float:left;padding:0 40px 0 15px;height:100%;font-family:'Be Vietnam Pro','Noto Sans KR',sans-serif;font-weight:500;font-size:15px;color:#666;background:url(/nanum/site/builder/main/main01/img/mbox_select.gif) no-repeat right 15px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;}
.mbox_w .more_btnw a{float:left;display:block;width:35px;height:100%;background:#ededed url(/nanum/site/builder/main/main01/img/mbox_more.gif) no-repeat center;text-indent:-9999px;}

.mcal_w{float:left;width:42%;}
.cal_twrap{border-radius:20px 20px 0 0;overflow:hidden;}
.cal_twrap .cal_tit{padding:0 30px;height:60px;line-height:60px;color:#fff;background:#0066c1 url(/nanum/site/builder/main/main01/img/mcal_bg.png) no-repeat left bottom;clear:both;overflow:hidden;}
.cal_twrap .cal_tit p{float:left;font-size:20px;font-weight:500;letter-spacing:0;}
.cal_twrap .cal_tit ul{float:right;}
.cal_twrap .cal_tit ul li{float:left;margin-left:23px;font-weight:500;font-size:14px;color:#fff !important;}
.cal_twrap .cal_tit ul li span{display:inline-block;margin-right:8px;width:8px;height:8px;border-radius:50%;}
.cal_twrap .cal_tit ul li.red span{background:#e1153e;}
.cal_twrap .cal_tit ul li.green span{background:#89d70e;}
.cal_twrap .cal_tit ul li.blue span{background:#62c3f0;}
.cal_twrap .cal_tit ul li.pink span{background:#e65e90;}

.cal_wrap{padding:16px 20px;border:1px solid #ddd;border-radius:0 0 20px 20px;overflow:hidden;}
.cal_wrap ul{margin-top:4px;clear:both;overflow:hidden;}
.cal_wrap ul li{position:relative;float:left;width:14.28%;height:34px;line-height:34px;font-weight:500;font-size:14px;color:#555;text-align:center;letter-spacing:0;}
.cal_wrap ul.day_week li{font-weight:700;font-size:15px;}
.cal_wrap ul.day_week li.red{color:#f60f0f;}
.cal_wrap ul.day_week li.blue{color:#008fd2;}
.cal_wrap ul li a{display:block;height:100%;color:#fff;}
.cal_wrap ul li a span{position:absolute;top:0;left:50%;margin-left:-17px;display:block;width:34px;height:100%;border-radius:50%;z-index:-1;}
.cal_wrap ul li a span.today{background:#e65e90;}
.cal_wrap ul li a span.event{background:#62c3f0;}
.cal_wrap ul li a span.event2{background:#89d70e;}
.cal_wrap ul li a span.close{background:#d11b47;}
.cal_wrap ul li a span:nth-child(2){margin-left:-12px;z-index:-2;}
.cal_wrap ul li a span:nth-child(3){margin-left:-7px;z-index:-3;}

/* 공지사항 */
.mnoti_w{float:right;width:53%;}
.moti_listw{font-size:0;line-height:0;}
.moti_listw li{display:inline-block;width:100%;margin-top:10px;}
.moti_listw li a{position:relative;display:block;padding:0 90px 0 105px;height:34px;line-height:34px;font-size:16px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.moti_listw li p{position:absolute;top:0;left:0;width:82px;height:32px;line-height:32px;font-weight:700;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center;}
.moti_listw li span{position:absolute;top:0;right:0;font-weight:400;font-size:13px;color:#999;letter-spacing:0;}
.moti_listw li.color1 p{border-color:#767676;color:#767676;} /* 전체 */
.moti_listw li.color2 p{border-color:#3599d4;color:#3599d4;} /* 중앙 */
.moti_listw li.color3 p{border-color:#5a1ea6;color:#5a1ea6;} /* 매곡 */
.moti_listw li.color4 p{border-color:#ed4d00;color:#ed4d00;} /* 기적 */
.moti_listw li.color5 p{border-color:#162daf;color:#162daf;} /* 농소1동 */
.moti_listw li.color6 p{border-color:#278e6e;color:#278e6e;} /* 농소3동 */
.moti_listw li.color7 p{border-color:#57881e;color:#57881e;} /* 염포양정 */
.moti_listw li.color8 p{border-color:#e65e90;color:#e65e90;} /* 명촌어린이 */
.moti_listw li.color9 p{border-color:#53c92c;color:#53c92c;} /* 작은 */
.moti_listw li.color10 p{border-color:#dd8b00;color:#dd8b00;} /* 송정나래 */
.moti_listw li.color11 p{border-color:#006fff;color:#006fff;} /* 강동바다 */

/* 책 */
.mbook_w{padding:60px 0;background:url(/nanum/site/builder/main/main01/img/book_wbg.jpg) no-repeat top center / 100% auto;}
.mbook_w .wsize{padding:0 30px;height:480px;background:#fff;box-shadow:0 0 75px rgba(0,0,0,0.25);border-radius:20px;overflow:hidden;}
.mbook_w .more_btn{position:absolute;top:46px;right:0;display:block;width:24px !important;height:24px;background:url(/nanum/site/builder/main/main01/img/mbook_btn.gif) no-repeat center;text-indent:-9999px;}
.mbook_w .wsize .book_li1{position:relative;float:left;padding:45px 0 0 10px;width:840px;}
.mbook_w .wsize .book_li1 > li{display:inline-block;}
.mbook_w .wsize .tab{margin-right:45px;font-weight:500;font-size:25px;color:#4c4c4c;}
.mbook_w .wsize .tab.on{font-weight:700;color:#000;text-decoration:underline;text-underline-position:under;}
.mbook_w .wsize li .plist_wrap{position:absolute;top:110px;left:0;width:100%;}
.mbook_w .wsize li .plist_box_wrap{display:inline-block;width:103%;margin-left:-3%;}
.mbook_w .wsize li .plist_box_wrap li{float:left;width:22%;margin-left:3%;text-align:center;}
.mbook_w .wsize li .plist_box_wrap li p,
.mbook_w .wsize .movi a p{margin:0 auto 25px;max-width:188px;height:256px;line-height:0;border:2px solid #fff;box-sizing:border-box;}
.mbook_w .wsize li .plist_box_wrap li p img,
.mbook_w .wsize .movi a p img{width:100%;height:100%;}
.mbook_w .wsize li .plist_box_wrap li dl dt,
.mbook_w .wsize .movi a span{display:block;font-weight:500;font-size:18px;line-height:1;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.mbook_w .wsize li .plist_box_wrap li dl dd{margin-top:15px;font-size:14px;line-height:1;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbook_w .wsize li .plist_box_wrap li dl dd span{display:inline-block;margin-left:9px;padding-left:9px;border-left:1px solid #ccc;}
.mbook_w .wsize .movi{position:relative;float:left;margin-left:28px;padding:45px 0 75px 28px;height:100%;border-left:1px solid #ddd;}
.mbook_w .wsize .movi a{display:block;width:180px;}
.mbook_w .wsize .movi .tab{margin-bottom:38px;font-weight:700;color:#000;}


/******************************1023******************************/
@media all and (max-width:1023px){

/* 검색 */
.visualw{padding:40px 0;}
.visualw .txtw{float:none;padding:0 15px 30px;text-align:center;}
.visualw .txtw span{margin-bottom:15px;font-size:25px;}
.visualw .txtw p{margin-bottom:40px;font-size:35px;}
.visualw .txtw .search_bar{height:60px;line-height:60px;font-size:16px;text-align:left;}
.visualw .txtw .search_bar .search_text{width:100%;font-size:16px;box-sizing:border-box;}

/* 팝업존 */
.visualw .puzw{float:none;width:480px;}
.visualw .puzw .swiper-slide{height:273px;}
.visualw .puzw .puz_btn .swiper-pagination{height:15px;}
.visualw .puzw .puz_btn .swiper-pagination-bullet{width:15px;background-size:contain;}
.visualw .puzw .puz_btn p{margin-left:10px;}
.visualw .puzw .puz_btn p a{height:17px;background-size:contain;}

/* 바로가기 */
.mq_listw{padding:20px 40px;}
.mq_listw .mq_btn{left:0;margin-left:0;}
.mq_listw .mq_btn .swiper-button-prev{left:15px;}
.mq_listw .mq_btn .swiper-button-next{right:15px;}
.mq_listw .swiper-slide a{font-size:15px;}
.mq_listw .swiper-slide a span{margin-bottom:10px;width:70px;height:70px;}
.mq_listw .swiper-slide a span i{background-size:33px;}

/* 공지사항 */
.mbox_w{display:block;margin:0 15px;width:auto;clear:both;overflow:hidden;}
.mbox_w > div{margin:45px 0;}
.mbox_w > div > p{font-size:21px;}
.mbox_w .more_btnw{height:33px;}
.mbox_w .more_btnw select{font-size:14px;}
.mbox_w .more_btnw a{width:33px;}

.cal_twrap .cal_tit{padding:0 25px;height:52px;line-height:52px;}
.cal_twrap .cal_tit p{font-size:18px;}
.cal_twrap .cal_tit ul li{margin-left:15px;font-size:13px;}
.cal_twrap .cal_tit ul li span{margin:0 6px 2px 0;width:6px;height:6px;}
.cal_wrap{padding:5px 15px 10px;}
.cal_wrap ul{margin-top:2px;}
.cal_wrap ul li{height:32px;line-height:32px;font-size:13px;}
.cal_wrap ul.day_week li{font-size:14px;}
.cal_wrap ul li a span{margin-left:-16px;width:32px;}

.moti_listw li{margin-top:7px;}
.moti_listw li a{padding:0 75px 0 95px;height:30px;line-height:30px;font-size:15px;}
.moti_listw li p{height:auto;line-height:28px;box-sizing:border-box;}
.moti_listw li span{font-size:12px;}

/* 책 */
.mbook_w{padding:45px 15px;background-size:100% 300px;}
.mbook_w .wsize{display:block;padding:0 15px;width:auto;height:410px;box-sizing:border-box;}
.mbook_w .wsize .tab{font-size:21px;}
.mbook_w .wsize .book_li1{padding:30px 0 0 5px;width:73%;}
.mbook_w .wsize li .plist_wrap{top:90px;}
.mbook_w .wsize li .plist_box_wrap li{margin-left:2%;width:31.333%;}
.mbook_w .wsize li .plist_box_wrap li:last-child{display:none;}
.mbook_w .wsize li .plist_box_wrap li p, 
.mbook_w .wsize .movi a p{margin-bottom:15px;max-width:none;width:169px;height:228px;}
.mbook_w .wsize .movi{padding:30px 0 65px 1%;margin-left:1%;width:25%;box-sizing:border-box;}
.mbook_w .wsize .movi .tab{margin-bottom:32px;}
.mbook_w .wsize li .plist_box_wrap li dl dt, 
.mbook_w .wsize .movi a span{font-size:16px;}
.mbook_w .wsize li .plist_box_wrap li dl dd{margin-top:10px;font-size:13px;}
.mbook_w .more_btn{top:31px;}

}

/******************************768******************************/
@media all and (max-width:768px){

/* 검색 */
.visualw{padding:30px 0;}
.visualw .txtw span{margin-bottom:10px;font-size:20px;}
.visualw .txtw p{margin-bottom:25px;font-size:27px;}
.visualw .txtw .search_bar{height:50px;line-height:50px;font-size:14px;}
.visualw .txtw .search_bar .search_text{padding:0 40px 0 20px;}
.visualw .txtw .search_bar label{left:20px;}
.visualw .txtw .search_bar .search_btn{right:20px;width:24px;background-size:contain;}

/* 팝업존 */
.visualw .puzw{max-width:94%;}
.visualw .puzw .swiper-slide{height:auto;max-height:273px;}
.visualw .puzw .puz_btn .swiper-pagination{height:13px;}
.visualw .puzw .puz_btn .swiper-pagination-bullet{margin-left:5px;width:13px;}
.visualw .puzw .puz_btn p{margin-left:7px;}
.visualw .puzw .puz_btn p a{height:15px;}

/* 바로가기 */
.mq_listw{padding:15px 40px 7px;}
.mq_listw .swiper-slide a{font-size:14px;}
.mq_listw .swiper-slide a span{margin-bottom:5px;width:60px;height:60px;}
.mq_listw .swiper-slide a span i{background-size:30px;}
.mq_listw .mq_btn .swiper-button-next, 
.mq_listw .mq_btn .swiper-button-prev{width:12px;background-size:contain;}

/* 공지사항 */
.mbox_w > div{margin:35px 0;float:none;width:auto;}
.mbox_w > div > p{margin-bottom:10px;font-size:19px;line-height:33px;}
.mbox_w .more_btnw select{font-size:13px;}
.cal_twrap .cal_tit{padding:0 20px;height:46px;line-height:46px;}
.cal_twrap .cal_tit p{font-size:16px;}
.cal_twrap .cal_tit ul li{margin-left:10px;font-size:12px;}
.cal_wrap{padding:5px 5px 10px;}
.cal_wrap ul.day_week li{font-size:13px;}
.cal_wrap ul li{height:30px;line-height:30px;font-size:12px;}
.cal_wrap ul li a{font-weight:700;}
.cal_wrap ul li a span{margin-left:-15px;width:30px;}

.moti_listw li{margin-top:5px;}
.moti_listw li:nth-child(5),
.moti_listw li:nth-child(6),
.moti_listw li:nth-child(7),
.moti_listw li:nth-child(8){display:none;}
.moti_listw li a{padding:0 65px 0 80px;height:30px;line-height:30px;font-size:14px;}
.moti_listw li p{width:70px;font-size:13px;}
.moti_listw li span{font-size:11px;}

/* 책 */
.mbook_w{padding:35px 15px;}
.mbook_w .wsize .book_li1{width:66%;}
.mbook_w .wsize li .plist_box_wrap li{width:48%;}
.mbook_w .wsize li .plist_box_wrap li:nth-child(3){display:none;}
.mbook_w .wsize .movi{padding-left:2%;margin-left:2%;width:31%;}
.mbook_w .wsize li .plist_box_wrap li dl dd{margin-top:7px;font-size:12px;}
.mbook_w .wsize li .plist_box_wrap li p, 
.mbook_w .wsize .movi a p{margin-bottom:12px;}

}

/******************************620******************************/
@media all and (max-width:620px){

/* 책 */
.mbook_w .wsize{height:385px;}
.mbook_w .wsize .book_li1{width:47%;}
.mbook_w .wsize li .plist_wrap{top:80px;}
.mbook_w .wsize li .plist_box_wrap{width:100%;margin-left:0;}
.mbook_w .wsize li .plist_box_wrap li{float:none;width:auto;}
.mbook_w .wsize li .plist_box_wrap li:nth-child(2){display:none;}
.mbook_w .wsize .movi{padding-left:3%;margin-left:3%;width:48%;}
.mbook_w .wsize .tab{margin-right:20px;font-size:19px;}
.mbook_w .wsize .movi .tab{margin-bottom:22px;}
.mbook_w .wsize li .plist_box_wrap li dl dt, 
.mbook_w .wsize .movi a span{font-weight:700;font-size:15px;}
.mbook_w .more_btn{top:33px;width:20px;height:20px;}

}

/******************************450******************************/
@media all and (max-width:450px){

/* 책 */
.mbox_w > div > p{font-size:18px;}
.mbook_w .wsize{padding:0 5px;height:auto;}
.mbook_w .wsize .book_li1{padding-top:25px;}
.mbook_w .wsize .book_li1 > li{display:block;}
.mbook_w .wsize li .plist_box_wrap{display:block;width:94%;margin:0 auto;}
.mbook_w .wsize li .plist_box_wrap li dl dd{display:none;}
.mbook_w .wsize li .plist_wrap{top:100px;}
.mbook_w .wsize .movi{padding:25px 0 25px 3%;}
.mbook_w .wsize .tab{margin:0 0 8px;display:inline-block;font-size:18px;}
.mbook_w .wsize .movi .tab{margin-bottom:48px;}
.mbook_w .more_btn{top:28px;}
.mbook_w .wsize .movi a{width:auto;}
.mbook_w .wsize li .plist_box_wrap li p, 
.mbook_w .wsize .movi a p{max-width:100%;height:170px;text-align:center;}
.mbook_w .wsize li .plist_box_wrap li p img,
.mbook_w .wsize .movi a p img{width:auto;}

}

/******************************769******************************/
@media all and (min-width:769px){

/* 바로가기 */
.mq_listw .swiper-slide a:hover{font-weight:700;color:#000;}
.mq_listw .swiper-slide a:hover span{border:2px solid #000;box-sizing:border-box;}
.mq_listw .swiper-slide a:hover span i{transform:rotateY(360deg);transition:all 0.6s linear;}

/* 공지사항 */
.moti_listw li a:hover{font-weight:700;}
.moti_listw li a:hover p{color:#fff !important;}
.moti_listw li.color1 a:hover p{background:#767676;} /* 전체 */
.moti_listw li.color2 a:hover p{background:#3599d4;} /* 중앙 */
.moti_listw li.color3 a:hover p{background:#5a1ea6;} /* 매곡 */
.moti_listw li.color4 a:hover p{background:#ed4d00;} /* 기적 */
.moti_listw li.color5 a:hover p{background:#162daf;} /* 농소1동 */
.moti_listw li.color6 a:hover p{background:#278e6e;} /* 농소3동 */
.moti_listw li.color7 a:hover p{background:#57881e;} /* 염포양정 */
.moti_listw li.color8 a:hover p{background:#e65e90;} /* 명촌어린이 */
.moti_listw li.color9 a:hover p{background:#53c92c;} /* 작은 */
.moti_listw li.color10 a:hover p{background:#dd8b00;} /* 송정나래 */
.moti_listw li.color11 a:hover p{background:#006fff;} /* 강동바다 */

/* 책 */
.mbook_w .wsize li .plist_box_wrap li:hover p,
.mbook_w .wsize .movi a:hover p{border-color:#000;box-shadow:10px 10px 10px rgba(0,0,0,0.15);}
.mbook_w .wsize li .plist_box_wrap li:hover dl dt,
.mbook_w .wsize .movi a:hover span{font-weight:700;color:#000;}

}