@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');

/* 스킵메뉴 */
#skip{position: absolute; width: 100%; height: auto; font-size: 0; z-index: 9999;}
#skip a{display: block; padding: 0; font-size: 0; text-align: center; color: #fff; background: #000;}
#skip a:focus{padding: 20px; font-size: 16px;}

#wrap{width: 100%; margin: 0 auto; text-align: center;}
.container{width: 1100px; margin: 0 auto; height: inherit;}

/* gnb */
.gnb{width: 100%; height: 100px; margin: 0 auto;}
.logo{float: left; text-align: left; padding-top: 10px;}
.gnb_list{float: right; border: 1px solid #d5d7d9; border-radius: 3px; margin-top: 30px;}
.gnb_list li{display: inline-block; padding: 0 18px; background: url(../images/main/line_asidemenu.gif) no-repeat 0 50%; width: 64px;}
.gnb_list li:first-child{background: none; color: #333; padding: 0 8px 0 18px;}
.gnb_list li a{display: inline-block; height: 35px; text-decoration: none; color: #333; font-size: 12px; line-height:35px; padding-left: 10px;}
.gnb_list li a:hover{font-weight:bold;}
.gnb_list .icon1{width: 58px; background: url(../images/main/icon_login.gif) no-repeat 0 50%;}
.gnb_list .icon2{width: 68px; background: url(../images/main/icon_join.gif) no-repeat 0 50%; /*padding-left: 20px;*/}
.gnb_list .icon3{width: 68px; background: url(../images/main/icon_site_map.gif) no-repeat 0 50%; /*padding-left: 20px;*/}

/* navi */
.navi{width: 100%; height: 55px; border-top: 1px solid #e8e8e8; position: relative;}
.menu_area{display: inline-block;  width: 1100px; margin: 0 auto;}
.menu_area>ul{width: 1045px; float: left; display: inline-block; }
.menu_area>ul>li{float: left; display: inline-block; background: url(../images/common/line_menunavi.gif) no-repeat center left;}
.menu_area>ul>li:first-child{background: none;}
.menu_area>ul>li>a{display: inline-block; color: #222; font-size: 17px; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; width: 174px; height: 55px; line-height: 49px; letter-spacing: -1px; padding-top: 3px;;}
.menu_area>ul>li:hover>a{color: #4678db; padding-top: 0; border-top: 3px solid #4678db;}
.menu_area>.allbtn{float: right; width: 55px; text-align: center; padding-top: 17px; cursor: pointer;}

.smenu100{width: 100%; display:none; background: #fff; position: absolute; top: 55px; left: 0; padding: 40px 0; border-top: 1px solid #dfdfdf;  box-shadow: 0 5px 4px rgba(0,0,0,.2); z-index: 99; } 
.menu_area>ul>li:hover .smenu100{display: block;}
.smenu100 .smenu_area{width: 1100px; margin: 0 auto; position: relative;}
.smenu_area .smenu_tit{float: left; width: 170px; text-align: left; }
.smenu_area .smenu_tit .t_text{font-size: 28px; color: #000; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; letter-spacing: -2px;}
.smenu_area .smenu_tit .s_text{font-size: 18px; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; letter-spacing: -2px; margin-top: 25px;}
.smenu_area .smenu_tit .icon1{position: absolute; left: -160px; bottom: -45px;}
.smenu_area .smenu_tit .icon2{position: absolute; top: 62px; left: -120px;}
.smenu_area .smenu_tit .icon3{position: absolute; top: -10px; left: -160px;}
.smenu_area .smenu_tit .icon4{position: absolute; top: 18px; left: -100px;}
.smenu_area .smenu_tit .icon5{position: absolute; top: 19px; left: -160px;}
.smenu_area .smenu_tit .icon6{position: absolute; top: 105px; left: -100px;}
.smenu_area .smenu_con{float: right; width: 925px; text-align: left; padding-bottom: 25px; border-left: 1px solid #dfdfdf;}
.smenu_con>ul{width: 890px;}
.smenu_con>ul>li{float: left; width: 25%; }
.smenu_con>ul>li>a{display: block; height: 49px; color: #222; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; margin-left: 40px; padding-left: 5px; line-height: 49px; letter-spacing: -2px; border-bottom: 1px solid #dfdfdf;}
.smenu_con>ul>li:hover>a{background:#00abe8 url(../images/main/line_smenu_hover.gif) no-repeat left 50%; padding-left: 30px; color: #fff;}
/* .smenu_con>ul>li:hover>a:before{background: #00abe8;  color: #fff; content:"--  "; white-space: pre; font-weight: 200;} */


/* all menu */
#allmenu{position: absolute; top: 0; left: 0; display: none; width: 100%; height: 2000px; background: #009be6; z-index: 100;}
#allmenu .container{width: 1100px; margin: 0 auto;}
#allmenu .container .allmenu_info{margin-top: 55px; height: 80px; text-align: left;}
#allmenu .container .allmenu_info .icon1{float: left; height: 80px; padding-left: 90px; background: url(../images/main/icon1_allmenu_info.gif) no-repeat 0;}
#allmenu .container .allmenu_info .icon2{float: left; height: 80px; padding-left: 90px; margin-left: 90px; background: url(../images/main/icon2_allmenu_info.gif) no-repeat;}
#allmenu .container .allmenu_info p.t_text{margin-top: 10px;}
#allmenu .container .allmenu_info p.s_text{margin-top: 5px; color: #fff; font-size: 14px; font-family: 'Noto Sans KR', sans-serif;}
#allmenu .container .allmenu_box{position: relative; margin: 45px auto 55px auto; text-align: center;}
#allmenu .container .allmenu_box dl{float: left; width: 164px; margin-left: 23px;}
#allmenu .container .allmenu_box dl:first-child{margin-left: 0;}
#allmenu .container .allmenu_box dt{width: 164px; height: 54px; padding-top: 110px; margin-bottom: 35px; border: 1px solid #4db9ee; border-radius: 20px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 20px;}
#allmenu .container .allmenu_box dl.allmenu1>dt{background: url(../images/main/icon_allmenu1.gif) no-repeat center 30px;}
#allmenu .container .allmenu_box dl.allmenu2>dt{background: url(../images/main/icon_allmenu2.gif) no-repeat center 30px;}
#allmenu .container .allmenu_box dl.allmenu3>dt{background: url(../images/main/icon_allmenu3.gif) no-repeat center 30px;}
#allmenu .container .allmenu_box dl.allmenu4>dt{background: url(../images/main/icon_allmenu4.gif) no-repeat center 30px;}
#allmenu .container .allmenu_box dl.allmenu5>dt{background: url(../images/main/icon_allmenu5.gif) no-repeat center 30px;}
#allmenu .container .allmenu_box dl.allmenu6>dt{background: url(../images/main/icon_allmenu6.gif) no-repeat center 30px;}
#allmenu .container .allmenu_box dd a{display: block; padding: 5px 0; color: #fff; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.08em;}
#allmenu .container .allmenu_box dd:hover a{color: #ffff26; text-decoration: underline;}
#allmenu .container .allmenu_close{width: 55px; height: 54px; position: absolute; top: -120px; right: 0;}



/* contents*/
#con_wrap{width: 100%; text-align: center;}

/* infobox */
#info_box{width: 100%; height: 100px;
background:#467ce1 url(../images/main/libinfo_bg.jpg) repeat-y; /*background: -webkit-linear-gradient(left, #46cdd8 1%, #4682e0 60%); -moz-linear-gradient(left, #46cdd8 1%, #4682e0 60%); -ms-linear-gradient(left, #46cdd8 1%, #4682e0 60%);*/}

#info_box .container .search{float: left; width: 455px; height: 100px;  background: url(../images/main/libinfo_icon01.png) no-repeat 0 50%; padding-left: 55px;}
#info_box .container .search>.tit{float: left; color: #fff; font-weight: 500; font-size: 20px; font-family: 'Noto Sans KR', sans-serif; line-height: 100px; text-align: left; padding-left: 25px;}
#info_box .container .search_b_w{float: left; width: 260px; margin: 35px 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.4);}
#info_box .container .search_b_w .txt{float: left; position: relative; padding-left: 5px; }
/* #info_box .container .search_b_w .txt label{position: absolute; cursor: text; font-size: 20px; color: rgba(255,255,255,.4); font-family: 'Noto Sans KR', sans-serif;} */
#info_box .container .search_b_w .txt input{color: #fff;  width: 209px; border: 0; background: none; height: auto; font-size: 20px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; cursor: text;}
#info_box .container .search_b_w .txt .g_txt{position: absolute; cursor: text; font-size: 20px; color: rgba(255,255,255,.4); font-family: 'Noto Sans KR', sans-serif;}
#info_box .container .search_b_w .btn{float: right;}

#info_box .freeday{float: right; width: 500px; height: 100px;  background: url(../images/main/libinfo_icon02.png) no-repeat 0 50%; padding-left: 85px;}
#info_box .container .freeday .tit{float: left; color: #fff; font-weight: 500; font-size: 20px; font-family: 'Noto Sans KR', sans-serif; line-height: 100px; text-align: left; padding-right: 25px;}
.freeday .free_con{float: right; width: 390px; margin-top: 32px;}
.freeday .free_con .lib_sel{float: left; width: 130px; height: 35px; margin-right: 15px; line-height: 30px; border: 1px solid rgba(255,255,255,.4); border-radius: 5px;}
.freeday .free_con .lib_sel select{border: 0; background:  url(../images/main/free_lib_selt.png) no-repeat right 50%; width: 130px; height: 35px;padding-left: 10px; font-size: 13px; color: rgba(255,255,255,.8); border-radius: 5px; appearance: none; -webkit-appearance:none;}
.freeday .free_con ul{float: left;}
.freeday .free_con ul li{float: left; width: 35px; height: 35px; color: #4678db; font-size: 15px; line-height: 35px; font-weight: 700; margin-left: 5px; background: #fff; border-radius: 5px;}
.freeday .free_con .btn_more{float: right; margin-top: 7px;}

/* title banner */
#tit_banner{width: 100%; height: 450px; background: #d9e7fa;}
#tit_banner .container{width: 1100px; margin: 0 auto; height: 450px; position: relative; overflow: hidden;}
#tit_banner .container .tit_slide>li{position: absolute; width: 100%; height: 450px;}
#tit_banner .container .tit_slide>li.slide_1{background: url(../images/main/mvisual_img1.png) no-repeat right bottom; left: 0;}
#tit_banner .container .tit_slide>li.slide_2{background: url(../images/main/mvisual_img2.png) no-repeat right bottom; left: 0;} 
#tit_banner .container p{color: #344554; text-align: left;}
#tit_banner .container .tit_text1{font-size: 50px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; letter-spacing: -2px; padding-top: 80px; position: absolute; top:-70px; opacity: 0;}
#tit_banner .container .tit_text2{font-size: 50px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -2px; font-weight: bold; margin-bottom: 35px; position: absolute; top:0px; opacity: 0;}
#tit_banner .container .tit_text3{font-size: 18px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -1px; position: absolute; top:0px; opacity: 0;}


/* cal_banner */
#cal_banner{width: 100%; height:140px; margin: -70px auto 38px auto; padding-bottom: 38px; position: relative;}
#cal_banner .container{background: #fff;}
#cal_banner .tit_area{float: left; width: 191px; height: 140px; background: #344554;}
#cal_banner .tit_area p{float: left;}
#cal_banner .month{width: 100%;}
#cal_banner .month .month_w{width: 120px; height: 68px; margin: 0 auto;}
#cal_banner .month .prev{margin-top: 25px; cursor: pointer;}
#cal_banner .month .mon_slide{float: left; position: relative; width: 58px; height: 52px; margin: 15px 10px 0 10px; overflow: hidden;}
#cal_banner .month ul{position: relative; width: 1200px;}
#cal_banner .month .mon{float: left; width: 58px; font-family: 'Noto Sans KR', sans-serif; font-size: 35px; color: #fff; font-weight: bold;}
#cal_banner .month .mon>span{font-size: 18px; font-weight: normal;}
#cal_banner .month .next{margin-top: 25px; cursor: pointer;}
#cal_banner select{width: 120px; height: 35px; margin: 10px auto 0 auto; line-height: 35px; padding: 0 0 0 10px; border: 0; font-size: 13px; color: #d6dadd; background: #344554 url(../images/main/free_lib_selt.png) no-repeat right 50%; border-radius: 5px; border: 1px solid #717d88; appearance: none; -webkit-appearance: none;}

#cal_banner .event_area{width: 909px; height: 140px; float: right; overflow: hidden;}
#cal_banner .event_w{width: 3000px; padding-bottom: 70px;}
#cal_banner .event_w ul{position: relative; }
#cal_banner .event_slide{float: left; position: relative; width: 303px; height: 140px; border-left: none; box-sizing: border-box; background: #fff;}
#cal_banner .event_slide a{display: block; height: 108px; padding: 29px 25px 1px 25px; border: 1px solid #dfdfdf; border-left: none; font-family: 'Noto Sans KR', sans-serif; text-align: left;}
#cal_banner .event_slide:hover a{height: 108px; border: 2px solid #4678db; padding: 28px 23px 0 23px;}
#cal_banner .event_slide .date{margin-bottom: 10px; font-size: 13px; color: #344554; font-weight: bold;}
#cal_banner .event_slide .tit{width: 200px; margin-bottom: 15px; color: #36393c; font-weight: bold; font-size: 16px; letter-spacing: -0.02em; text-overflow: ellipsis;white-space: nowrap; overflow: hidden; }
#cal_banner .event_slide:hover .tit{text-decoration: underline;}
#cal_banner .event_slide .text{color: #5f6366; font-size: 14px; text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
#cal_banner .event_slide .lib_circle{position: absolute; top: 25px; right: 25px; width: 42px; height: 42px; color: #666; font-size: 13px; text-align: center; font-weight: bold; line-height: 42px; border-radius: 50px; background: #e8e8e8;}
#cal_banner .event_slide:hover .lib_circle{background: #4567db; color: #fff;}
#cal_banner .event_pagination{position: absolute; top: 150px; left: 0; width: 100%; text-align: center;}
#cal_banner .event_pagination ul{display: inline-block;}
#cal_banner .event_pagination .event_bullet{display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #b2b2b2; margin: 0 6px;}
#cal_banner .event_pagination .on{background: #222;}


/* icon banner */
#icon_banner{width: 100%; height:175px; margin: 0 auto 75px auto;}
#icon_banner .icon_banner_w{position: relative; width: 1100px; height:175px; margin: 0 auto;}
#icon_banner .icon_slide_wrap{overflow: hidden; width: 1100px; height:163px; margin: 0 auto;}
#icon_banner .icon_slide_wrap ul{position: relative; width: 1800px; }
#icon_banner .icon_slide{float: left; width: 220px; }
#icon_banner .icon_slide dt{margin-bottom: 8px; color: #181819; font-size: 16px; font-weight: bold;}
#icon_banner .icon_slide:hover dt{color: #2245DB; text-decoration: underline;}
#icon_banner .icon_slide dd{font-size: 14px; color: #494c52}
#icon_banner .icon_b1 dl{padding-top: 120px; background: url(../images/main/mservice_icon01.gif) no-repeat top center;}
#icon_banner .icon_b2 dl{padding-top: 120px; background: url(../images/main/mservice_icon02.gif) no-repeat top center;}
#icon_banner .icon_b3 dl{padding-top: 120px; background: url(../images/main/mservice_icon03.gif) no-repeat top center;}
#icon_banner .icon_b4 dl{padding-top: 120px; background: url(../images/main/mservice_icon04.gif) no-repeat top center;}
#icon_banner .icon_b5 dl{padding-top: 120px; background: url(../images/main/mservice_icon05.gif) no-repeat top center;}
#icon_banner .icon_b6 dl{padding-top: 120px; background: url(../images/main/mservice_icon06.gif) no-repeat top center;}
#icon_banner .icon_b7 dl{padding-top: 120px; background: url(../images/main/mservice_icon07.gif) no-repeat top center;}
#icon_banner .icon_b8 dl{padding-top: 120px; background: url(../images/main/mservice_icon08.gif) no-repeat top center;}
#icon_banner .icon_b9 dl{padding-top: 120px; background: url(../images/main/mservice_icon09.gif) no-repeat top center;}
#icon_banner .icon_b10 dl{padding-top: 120px; background: url(../images/main/mservice_icon10.gif) no-repeat top center;}
#icon_banner .icon_b_prev{position: absolute; width: 16px; top: 60px; left: -40px;}
#icon_banner .icon_b_next{position: absolute; width: 16px; top: 60px; right: -40px;}

/* img banner 팝업 안내 */
#img_banner{position: relative; height: 280px; padding-bottom: 50px; margin:0 20px 80px 20px;}
#img_banner .img_banner_w{position: relative; width: 100%; height: 280px; overflow: hidden;}
#img_banner .img_banner_w ul{position: relative; width: 3000px; }
#img_banner .img_slide{position: relative; text-align: left; float: left; width: 375px; /* width: 354.25px; margin-right: 12.5px; */}
#img_banner .img_slide a{display: block; text-align: left; width: 350px; border: 2px solid #fff; margin-right: 25px;}
#img_banner .img_slide:hover a{display: block; border: 2px solid #4567db;}
#img_banner .img_slide a .img_b{display: block; width: 354px; height: 280px; overflow: hidden; text-align: left;}
#img_banner .img_slide a dl{position: absolute; top: 0; left: 0; width: 354px; height: 100%; text-align: left; color: #fff; background: url(../images/main/mpoupupzone_mask.png) repeat-x bottom;}
#img_banner .img_slide:hover a dl{background: url(../images/main/mpoupupzone_mask_ov.png) repeat-x top;}
#img_banner .img_slide a dl dt{position: absolute; left: 0; bottom: 90px; padding: 0 30px; font-family: 'Noto Sans KR', sans-serif; font-size: 20px; font-weight: bold;}
#img_banner .img_slide a dl dd{position: absolute; left: 0; bottom: 35px; height: 40px; overflow: hidden; padding: 0 30px; line-height: 20px; font-family: 'Noto Sans KR', sans-serif; font-size: 14px;}
#img_banner .img_b_pagination{position: absolute; bottom:0; left: 0; width: 100%; text-align: center;}
#img_banner .img_b_pagination ul{display: inline-block;}
#img_banner .img_b_pagination .img_b_bullet{display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #b2b2b2; margin: 0 6px;}
#img_banner .img_b_pagination .on{background: #222;}
#img_banner .play{display: inline-block; width: 25px; height: 25px; margin-left: 10px; vertical-align: middle;}



/* board */
#board{width: 100%; height: 290px; margin-bottom: 80px;}
#board .board_w{width: 1100px; margin: 0 auto 0 auto;}
#board .notice{position: relative; width:450px; height: 290px; float:left; background: #fff; text-align: left;}
#board .tit_area{width: 100%; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid #222;}
#board .tit_area>.tit{float: left; margin-left: 10px; font-size: 20px; color: #222; font-weight: bold; font-family: 'Noto Sans KR', sans-serif;}
#board .tit_area>.lib_news{float: right; margin-right: 45px; width: 140px; height: 35px; line-height: 30px; border-right: 1px solid #dfdfdf;}
#board .tit_area>.lib_news>select{width: 140px; padding: 0 0 0 10px; border: 0; color: #222; font-size: 14px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif; background: url(../images/main/mnotice_lib.gif) no-repeat right 50%; appearance: none; -webkit-appearance: none; cursor: pointer;}
#board #notice_list li{display: inline-block; margin-bottom: 4px;}
#board #notice_list li a{float: left; display: inline-block; width: 310px; height: 25px; font-size: 15px; color: #666; margin-left: 18px; line-height: 23px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; letter-spacing: -0.02em;}
#board #notice_list li a:hover{color: #000; text-decoration: underline; font-weight: bold;}
#board li .lib_name{float: left; display: inline-block; width: 50px; height: 23px; border-radius: 3px; font-size: 13px; color: #fff; font-weight: bold; line-height: 23px; text-align: center;}
#board li .lib_0{background: #777;}
#board li .lib_1{background: #ffc926;}
#board li .lib_2{background: #a3d900;}
#board li .lib_3{background: #ff5c26;}
#board li .date{float: right; display: inline-block; margin-left: 12px; line-height: 23px; color: #929292; font-size: 13px;}
#board .more{position: absolute; top: 7px; right: 0;}

#board .best_con{width: 600px; height: 290px; float: right;}
#board .best_con_list{float: left; width: 537px;  overflow: hidden; position: relative;}
#board .best_con_list>ul{float: left; width: 3000px; position: relative;}
#board .best_con_list>ul>li{float: left; width: 537px; overflow: hidden;}
#board .book{float: left; position: relative;}
#board .book .book_img{width: 175px; height: 245px; margin-top: 5px; border: 1px solid #dfdfdf;}
#board .book .book_img img{width: 175px; height: 245px;}
#board .book .star{position: absolute; top: 0; right: 4px;}
#board .book_con{float: left; width: 330px; margin-left: 30px; padding-top: 10px; text-align: left;}
#board .book_con .book_tit{width: 140px; height: 35px; margin-bottom: 15px; font-weight: bold; color:#222; line-height: 35px; font-size: 14px; text-align: center; border: 1px solid #ff6000; border-radius: 50px;}
#board .book_con .book_title{margin-bottom: 15px; color: #222; font-size: 20px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif;}
#board .book_con .book_story{height: 72px; margin-bottom: 15px; font-size: 14px; line-height: 24px; color: #666; white-space: normal;  text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -ms-box; -ms-line-clamp: 3; -ms-box-orient: vertical; overflow: hidden;}
#board .book_con .book_info{color: #888; font-size: 14px;}
#board .arrow{float: right; width: 50px; margin-top: 108px;}

/* book_date */
#book_date{width: 100%; height: 252px; background: #f8f8f8; padding: 60px 0 80px 0;}
#book_date .book_date_w{width: 1100px; position: relative;  margin: 0 auto;}
#book_date .date_left{float: left; width: 175px;}
#book_date .date_tit{width: 175px; margin-bottom: 65px; text-align: left; letter-spacing: -0.01em;}
#book_date .date_tit .t_text{margin-bottom: 20px; color: #222; font-size: 20px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif;}
#book_date .date_tit .s_text{color: #666; font-size: 14px; line-height: 24px;}
#book_date .date_tab{width: 130px; height: 86px;}
#book_date .date_tab ul{}
#book_date .date_tab ul li{margin-bottom: 5px;}
#book_date .date_tab ul li a{display: block; width: 130px; height: 38px; font-weight: 800; font-size: 14px; line-height: 38px; border-radius: 5px; color: #344554; border: 1px solid #344554; border-radius: 5px;}
#book_date .date_tab ul li:hover a{color: #fff; background: #344554; border: 1px solid #344554; border-radius: 5px;}
#book_date .date_tab ul li a.on{color: #fff; background: #344554; border: 1px solid #344554; border-radius: 5px;}

#book_date .date_slide{position: absolute; top: 0; left: 195px; width: 835px; overflow: hidden; }
#book_date .re_slide_wrap{width: 5000px; }
#book_date .re_slide_wrap ul{position: relative; width: 5000px;}
#book_date .new_slide_wrap{width: 5000px;}
#book_date .new_slide_wrap ul{position: relative; width: 5000px;}
#book_date .date_slide .b_slide{float: left; width: 220px; /* margin: 0 45px 0 0; */}
#book_date .date_slide .b_slide .book_img{width: 175px; height: 245px; margin-bottom: 20px;}
#book_date .date_slide .b_slide .book_img img{width: 175px; height: 245px;}
#book_date .date_slide .b_slide .book_tit{width: 175px; height: 37px; font-weight: 800; font-size: 15px; color: #222;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

#book_date .arrow{float: right; width: 50px; margin-top: 80px;}
.arrow a.next{display: block; width: 50px; height: 50px; background: url(../images/main/book_next.png) no-repeat; margin-bottom: 5px;}
.arrow a.next:hover{display: block; width: 50px; height: 50px; background: url(../images/main/book_next_ov.png) no-repeat; margin-bottom: 5px;}
.arrow a.prev{display: block; width: 50px; height: 50px; background: url(../images/main/book_prev.png) no-repeat; }
.arrow a.prev:hover{display: block; width: 50px; height: 50px; background: url(../images/main/book_prev_ov.png) no-repeat; }

/* site */
#site{width: 1100px; height: 103px; margin: 0 auto 10px; padding: 50px 0 25px 0;}
#site .l_banner{position: relative; float: left; width: 792px; padding-bottom: 45px; overflow: hidden;}
#site .banner_wrap{width: 2000px; clear: both;}
#site .banner_wrap ul{position: relative;}
#site .banner_slide{float: left; width: 200px; height: 58px;/*  margin-right: 10px; */}
#site .banner_slide a{display: block; width: 190px; height: 58px; border: 1px solid #dfdfdf; margin-right: 10px;}
#site .banner_slide a img{width: 190px; height: 58px;}

#site .img_b_pagination{position: absolute; bottom:0px; left: 0; width: 100%; text-align: center;}
#site .img_b_pagination ul{display: inline-block;}
#site .img_b_pagination .img_b_bullet{display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #b2b2b2; margin: 0 6px;}
#site .img_b_pagination .on{background: #222;}
#site .play{display: inline-block; width: 25px; height: 25px; margin-left: 10px; vertical-align: middle;}

#site .r_site{float: right; width: 210px; padding: 5px 0 5px 50px; border-left: 1px solid #dfdfdf;}
#site .site_box{width: 210px; height: 50px; border: 1px solid #dfdfdf; border-radius: 5px; line-height: 45px;}
#site .site_box select{width: 210px; height: 50px; border: 0; border-radius: 5px; padding: 0 0 0 20px; cursor:pointer; color: #222; font-weight: bold; font-size: 13px; letter-spacing: -0.01em; appearance: none; -webkit-appearance:none; background: url(../images/main/mnotice_lib.gif) no-repeat right 50%;}



/* footer */
#footer{width: 100%; background: #32393f;}
#footer .container{text-align: left; padding: 45px 0; overflow: hidden;}
.foot_fl{float: left;}
.f_menu ul{display: inline-block; list-style: none; margin-bottom: 15px;}
.f_menu ul li{float: left; color: #fff; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; padding-left: 20px; margin-left: 20px; background: url(../images/common/line_foot.gif) no-repeat 0 50%;}
.f_menu ul li:first-child{padding-left: 0; margin-left:0; background: none;}
.f_menu ul li a{color: #fff; text-decoration: none;}
.f_menu ul li a span{color: #fee600;}
.foot_fr{float: right; display: block; width: 750px; color: #fff;}
.foot_fr .f_addr{display: inline-block; margin-bottom: 25px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;}
.foot_fr .f_call{display: inline-block;}
.foot_fr .f_call ul{display: inline-block; margin-bottom: 20px;}
.foot_fr .f_call ul li{float: left; width: 20%; margin-bottom: 5px; color: #adb0b2; font-size: 13px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;}
.foot_fr .f_call ul li span{margin-right: 10px; color: #fff;}
.foot_fr .f_call p{margin-top: -10px; font-size: 13px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400;}

/* quick_box */
.quick_box{position: absolute; width: 100%; top: 155px; left: 0; z-index: 50;}
.quick_box_w{position: relative; width: 1100px; height: 1px; margin: 0 auto;}
.con_quick{position: absolute; /* top: 175px; */ top: 120px; right: -260px; width: 260px; height: 582px;} 
.con_quick .map{position: relative; margin-bottom: 30px;}
.con_quick .map .tit_box{padding-left: 40px; text-align: left;}
.con_quick .map .tit_box .tit{margin-bottom: 14px; font-size: 20px; color: #222; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; letter-spacing: -0.05em;}
.con_quick .map .tit_box .tit>span{font-weight: bold;}
.con_quick .map .tit_box .go_btn a{display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #467ce1; color: #467ce1; font-weight: bold; font-size: 13px;}

.first_visit{position: relative; width: 155px; height: 275px; margin-left: 60px; background: url(../images/main/visit_img.gif) no-repeat;}
.first_visit a{display: block; width: 140px; height: 100%; text-align: left;}
.first_visit a .p1{position: absolute; top: 35px; left: 18px;}
.first_visit a .p2{position: absolute; top: 60px; left: 18px;}

/* weater */
.weather_wrap{position: absolute; width: 100%; top: 480px; left: 0; z-index: 51;}
.weater{position: relative; width: 1100px; margin: 0 auto;}
.con_weather{position: absolute; top: 400px; right: -220px; width: 140px; padding: 15px; border: 1px solid #ccc; background: #fff; font-family: 'Noto Sans KR', sans-serif;}
.con_weather h2{padding-bottom: 10px; border-bottom: 1px solid #ccc; font-size: 18px; font-weight: 500; text-align: center;}
.con_weather .weather_date{margin-top: 5px; color: #aaa; font-size: 12px; font-weight: 300;}
.con_weather .weather_icon{float: left; margin-left: -15px;}
.con_weather .weather_temp{float: right; margin-top: 35px; font-size: 25px; font-weight: 500; line-height: 25px;}
.con_weather .temp_box{clear: both; font-size: 14px; background: #ddd;}
.con_weather .temp_box span{font-size: 13px; color: #666;}
.con_weather .temp_box .min_temp, .con_weather .temp_box .max_temp{padding: 2px 0;}
.con_weather .temp_box .min_temp{border-bottom: 2px solid #fff;}