/* 767px 이하일때----------------------------------------------------------------------------- */   
    @media only screen and (max-width : 767px) {   
        .sponge-layout-main-background{ background-image:none !important; min-width:320px; background-color:#fff;}
        .sponge-layout-sub-background {width:100%;min-width:0px;}
        body{font-size:13px; min-width:320px;}
        .container { padding-left: 15px; padding-right: 15px; width:100%; min-width:320px; }    
        /* menu */
        .sponge-header-nav{  width:100%; border:0px; background-color:#fff; position:fixed; left:0px; right:0px; z-index:2000; background-image:none; height:auto; border-top:0px solid #00467f !important; min-width:320px;}          
        .sponge-header-nav .navbar-toggle{margin-right:0px; margin-top:8px; display:block; position:absolute; right:0px;}
        .sponge-header-nav .navbar-toggle .icon-bar{background-color:#00467f; height:3px;}
        .sponge-header-nav{ margin-bottom:0px; padding:0px; border:0px; }
        .sponge-header-nav .navbar{ margin-bottom:0px; border:0px;}
        .sponge-navbar-top{padding-left:0px; padding-right:0px; background-image:none;}
        
        .navbar-header{ border-bottom:0px solid #00467f; float:none; padding-top:0; width:100%; height:54px;}
        /*logo*/
        .navbar > .container .sponge-navbar-brand, .navbar > .container-fluid .sponge-navbar-brand{ margin-left:0px; margin-top:0px;}
        .navbar-header h1{margin-top:0px;}
        .navbar-brand {padding: 10px 10px; height: auto; text-align:left; float:left; margin:0; }
        .navbar-brand img{ height:auto;}

        .navbar{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;border-left:none;border-right:none}
        
        .infoBox{ clear:both; padding:0 0; margin:0 -15px !important; text-align:center; font-size:12px; color:#b1b1b1 !important; width:auto; border-top:1px solid #b5b5b5; border-bottom:1px solid #b5b5b5;}
        .infoBox > li{ display:inline-block;padding:7px 8px;  margin:1px 0;}
        .infoBox > li > a{ padding:0px !important; color:#555; display:inline-block; background-image:none; margin:0px; }
        .infoBox > li > a:hover, .infoBox > li > a:focus{ border:0px solid #00467f; background-color:transparent; color:#00467f !important}
        .infoBox > li > a:hover span, .infoBox > li > a:focus span{color:#feff9a !important;}
        .infoBox > li > a.loginIcon{ color:#00467f !important; background-image:none;}
        
        .infoBox > li.login-top-main { clear:left;}
        .infoBox > li.login-library-list {  /*border-bottom:1px solid rgba(246,246,246, 0.8);*/ border-bottom:1px solid #b5b5b5; margin:0 auto; width:100% !important; text-align:center;}
        .infoBox > li.login-library-list > a.eng-hide{  display:inline-block !important; color:#fff; }
        .infoBox > li.login-library-list > a{ padding:0 0px !important;  margin:0 5px;display:inline-block !important; }
        .infoBox > li.login-library-list > a span{ color:#ff3939 !important;  }
        .infoBox > li.login-library-list > a span:hover, .infoBox > li.login-library-list > a span:focus, .infoBox > li.login-library-list > a:hover span.eng-hide{ color:#feff9a !important; }
        .infoBox > li.login-library-list > a span.eng-hide{ color:#555 !important; }
        :last-child.navbar-right.navbar-nav.infoBox{ margin-right:-15px;}
        .infoBox > li img { margin-top:-2px;}
        .infoBox > li.icon{ margin:0 5px; padding:0;}
        .infoBox > li.icon > a > span.banner{  display:none; } 
        .infoBox > li.icon > a > i{ display:inline-block; }

        .sponge-empty-space-login{height:125px;}
        .sponge-empty-space-logout{height:90px;}  

        .sub-background-content{padding:0px;}
        /* 메뉴- navbar*/    
        /*menuBar*/
        .menuWrap{display:none;}
        .menuWrapMobile {margin:0 0; display:block; padding:0 15px; width:100%;  }
        .menuWrapMobile .navbar-nav{ margin-top:0px; margin-bottom:0; padding-top:10px; padding-bottom:15px; }
        .sponge-navbar{ background-color:transparent; height:auto !important; padding:0px; background-image:none; top:auto; background-color:#fff; border-top:0px; }  
        .sponge-navbar .navbar-collapse{ }

        .sponge-navbar-top.navbar-collapse.collapse{ visibility:hidden; height:0 !important; display:none !important; width:100%; }
        .sponge-navbar-top.navbar-collapse.collapse.in{ visibility:visible; height:auto !important; display:block !important; border-bottom:2px solid #cf2c91; overflow-y:inherit !important; }


        .sponge-navbar .navbar{ margin-bottom:0px; border:0px;}
        .sponge-navbar-nav > li > a:hover, .sponge-navbar-nav > li > a:focus, .sponge-navbar-nav .open > a, .sponge-navbar-nav .open > a:hover, .sponge-navbar-nav .open > a:focus{border:0px; color:#fff !important; background-color:#00467f !important;}/*, .nav .active a*/
        .sponge-navbar-nav > li > a{ padding:7px 15px; background-color:#fff; font-weight:600;}
        .sponge-navbar-nav li > a > i{ position:absolute; right:15px;font-size:18px}
        .sponge-navbar-nav.navbar-nav{ border:0px solid #eee;  } 
	    .sponge-navbar-nav > li > a{ border-top:0px solid #eee;}
        .dropdown-menu a{font-size:12px;}  
            
            
         /* -------- Sub wrap --------- ***************************************************************************************************************************************/
        .sponge-layout-wrap{width: 100%; margin:0px auto; background-color:#fff; border-bottom:0px solid #cccccc; border-top:0px solid #cccccc;}
        .sponge-layout-sub-background .sponge-layout-wrap{ border:0px solid #cccccc; min-width:320px;}
        .sponge-layout-main-background .sponge-layout-wrap{padding:0px; min-width:320px;}    
        .sponge-layout-content-main{ width:100%; background-image:none; }
        .sponge-layout-content-sub{ width:100%; padding:0px;}
        .sponge-layout-content-container{ width:100%;} 
        /*.sponge-page-title-section{background-color:#fff !important;}*/
        .sponge-main-left-content, .sponge-main-right-content{width:100%; position:relative;}
        .sponge-layout-images-bg{height:420px; }
        .sponge-layout-main-image{ width:100%; }
        /* 메인 롤링이미지 */
        .sponge-main-carousel .carousel-control{display:none;}
        
        /* SEARCH */       
        .sponge-layout-main-search-position{ width:100%; top:90px;}
        .sponge-layout-main-search { position:relative; width:100%; padding:0 10px 0 10px;  margin-top:0px; height:auto; margin-bottom:0; min-height:0; z-index:1;}  
        .sponge-layout-main-search .form-inline{width:100%;}
        .sponge-layout-main-search .nav-tabs{ height:29px; }
        .sponge-layout-main-search .nav-tabs > li > a{ padding:3px 0px; font-size:14px; width:120px; height:30px; }
        .sponge-layout-main-search .row{padding-bottom:0px;}
        .sponge-layout-main-search h3{ display:none !important;}
        .sponge-layout-main-search .sbHolder{ display:none;}
        .sponge-layout-main-search .active_mobile{ display:block;}     
        .sponge-layout-main-search .col-md-10{ min-width:100%; width:100% !important; }
        .sponge-layout-main-search .search_inputboxmain { height:37px; min-width:100%; width:100% !important; min-width:250px; background-image:none !important; font-size:13px; padding-left:10px; }
        .sponge-layout-main-search button.searchBtn, .sponge-layout-main-search input.searchBtn, .sponge-layout-main-search a.searchBtn02{  position:absolute; right:0; background-size:75% !important; height:37px; width:37px; }   
        
        .sponge-layout-main-search > div{ top:50px; left:10px; right:10px; }
        .sponge-layout-main-search > div > a{font-size:13px; height:auto; padding:5px 0; width:25%;  text-align:center; float:left;}
        .sponge-layout-main-search > div > a:first-child{ margin-right:2%; }
        .sponge-layout-main-search > div > a:nth-child(2){ margin-right:2%; }
        .sponge-layout-main-search > div > a:nth-child(3){ width:46%;}
        .sponge-layout-main-search > div > a:nth-child(4){ float:right;}
 

        .sponge-main-icon-map-top{ margin-bottom:0; height:auto; padding-bottom:15px;}
        .sponge-main-icon-map-top > ul{width:100%; height:auto;}
        .sponge-main-icon-map-top > ul > li{width:24%; height:110px; padding-top:15px; }
        .sponge-main-icon-map-top > ul > li.width{width:24%;}
        .sponge-main-icon-map-top > ul > li:hover{ border-bottom-width:0px;}
        .sponge-main-icon-map-top > ul > li > a{ font-size:11px; font-weight:normal;}
        .sponge-main-icon-map-top > ul > li > a > span.map{margin-bottom:5px; background-size:600px; width:64px; height:64px;}
        .sponge-main-icon-map-top > ul > li > a > span.map01{ background-position-x:0px;}
        .sponge-main-icon-map-top > ul > li > a > span.map02{ background-position-x:-75px; }
        .sponge-main-icon-map-top > ul > li > a > span.map03{ background-position-x:-150px; }
        .sponge-main-icon-map-top > ul > li > a > span.map04{ background-position-x:-225px; }
        .sponge-main-icon-map-top > ul > li > a > span.map05{ background-position-x:-300px; }
        .sponge-main-icon-map-top > ul > li > a > span.map06{ background-position-x:-375px; }
        .sponge-main-icon-map-top > ul > li > a > span.map07{ background-position-x:-450px; }
        .sponge-main-icon-map-top > ul > li > a > span.map08{ background-position-x:-525px; }
      .sponge-main-icon-map-top > ul > li:hover > a > span.map{  background-position-y:-75px; }

       /* 신착자료, 공지사항, 인기자료 */
        .sponge-layout-main-dataList{ width:100%; padding:0 0; margin:0; min-width:290px;}
        .sponge-layout-main-dataList > .row{width:100%;margin-top:0; }
        .sponge-layout-main-dataList > .row > .col-md-4{ width:100%; height:auto;border-width:0px; } 
        .sponge-layout-main-dataList > .row > .col-md-4:first-child{ width:100%; margin-right:0;} 
        .sponge-layout-main-dataList > .row > .col-md-4:last-child, .sponge-layout-main-dataList > .row > .col-md-4:nth-child(2){ width:100%;} 
   

        .sponge-layout-main-dataList .title{ border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:8px 10px; height:40px; background-color:#eee; background-image:none; }
        .sponge-layout-main-dataList h3 { color:#000 !important; border-radius:0; padding:0px 0 ; font-size:12px; margin-right:-1px; min-width:0; line-height:1.4285; text-align:center; font-size:15px; border-bottom:0px; }
        .sponge-layout-main-dataList a.main-more-icon{ padding:0px; border:0px solid #dddddd; border-radius:0px; top:7px; right:10px; }
        .sponge-layout-main-dataList a.main-more-icon span{ letter-spacing:0px; }
        .sponge-layout-main-dataList .nav-tabs{border-bottom: 0px solid #dddddd; height:auto;}
        .sponge-layout-main-dataList .nav-tabs > li{margin:0px;}
        .sponge-layout-main-dataList .nav-tabs > li.active > a,
        .sponge-layout-main-dataList .nav-tabs > li.active > a:hover,
        .sponge-layout-main-dataList .nav-tabs > li.active > a:focus{ border-bottom:0px; background-color:transparent !important; border-bottom:0px !important; color:#000 !important; height:auto;}
        .sponge-layout-main-dataList .nav-tabs > li > a {color:#969696 !important; border-radius:0; padding:0px 0 !important; margin-right:15px; min-width:0; height:auto; line-height:1.4285; text-align:center; font-weight:600; font-size:15px; border-bottom:0px; background-color:transparent !important;}
        .sponge-layout-main-dataList .nav-tabs > li > a:hover, .sponge-layout-main-dataList .nav-tabs > li > a:focus{ color:#000 !important;}
        .sponge-layout-main-dataList ul.data{  padding:15px 15px 5px 15px;}
        .sponge-layout-main-dataList .tab-content{ padding:0 0 0 0;}
        .sponge-layout-main-dataList .col-md-4, .sponge-layout-main-dataList .col-md-5, .sponge-layout-main-dataList .col-md-6{ width:100%; padding:0 0 0 0 !important; border:0px; height:auto; background-color:transparent; }
        .sponge-layout-main-dataList .col-md-5 .title{ border-top:1px solid #ddd;  }
        .sponge-layout-main-dataList > .col-md-4:nth-last-child(2){width:100%;}
        .sponge-layout-main-dataList .col-md-4:first-child{width:100%;}
        
        .sponge-main-icon-map-hycl > ul{ padding-top:15px;}



        .sponge-layout-main-board ul.data{ padding:0 0 0 0;}
        .sponge-layout-main-board li.list{  height:auto; border-bottom:1px solid #eee; padding:5px 0; }

        .sponge-layout-main-board ul.data > li.list:last-child{ border-bottom-width:0px;  }
        .sponge-layout-main-board li.list a{  height:auto; padding-left:10px; display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:82%; } 

        .sponge-layout-main-board li.list p{margin:0; padding:5px 10px 0 0;} 
       
 

        .sponge-layout-main-dataList .col-md-4:last-child{ width:100%; }
        
        .sponge-main-icon-map-hycl > ul{padding-bottom:10px;}
        .sponge-main-icon-map-hycl > ul > li{height:130px;}
        .sponge-main-icon-map-hycl > ul > li > a{font-size:11px; line-height:15px; }

        .sponge-main-book{ margin-top:0px; width:100%;}
        .sponge-layout-main-dataList .sponge-main-book .title{border-bottom:1px solid #ddd; padding:8px 10px;}
        .sponge-layout-main-dataList .sponge-main-book a.main-more-icon{top:7px; left:auto; right:10px;}
        
        .sponge-main-book > ul > li > div > div{ height:125px;}


        #sponge-layout-content-container-quick{bottom:110px; top:auto; right:15px; opacity:0.9; width:15px; height:15px; padding:0px; z-index:9000; }	
        #quickMenu{width:auto; border:0px solid #ddd; display:block; padding:0; border-radius:5px; background-color:#fff;}
        #sponge-layout-content-container-quick h3, #sponge-layout-content-container-quick ul{display:none; }	
        .sponge-top-btn{border:1px solid #bebebe !important; font-weight:600; border-radius:3px !important; width:15px !important; height:15px !important; padding:0px 0 !important; display:block; font-size:12px !important; color:#3f3f3f; text-align:center;
                text-shadow: 3px 3px 3px #fff; background-color:#fff; background:#fff linear-gradient(#fff 40%, #ddd ) !important; line-height:5px; line-height:-1.5px; margin:1px 0 !important; float:left; z-index:99999; position:relative;}


       /* Copyright */

        footer, .sponge-footer{ width:100%; margin: 0 auto 0 auto; background-color:#fff; border-top:1px solid #ddd; text-align:center; }
        .sponge-layout-sub-background footer, .sponge-layout-sub-background .sponge-footer{ margin: 0px auto 0 auto; }
        .sponge-layout-footer .navbar-nav-footer{  display:none;}

        /* 배너 */
        .sponge-layout-footer-banner {padding: 0; display:none; }

        .sponge-layout-footer{ padding:20px 0 ; color:#4d4d4d;  width:100%;}
        .sponge-layout-footer address{ width:100%;}
        .sponge-layout-footer p{ margin:0px; }
        .sponge-layout-footer address p a{  margin:0 5px; color:#004224; font-weight:600;}
        .sponge-layout-footer address p a:first-child{  margin-left:0px; }
        .sponge-layout-footer span.green, .sponge-layout-footer a.green{ color:#184174;}
        .sponge-layout-footer address span{ letter-spacing:0px; }
        .sponge-layout-footer a:hover{ color:#000; }

        .sponge-layout-footer .select_links{ display:none; }

    .sponge-layout-content-sub-2021, .sponge-page-breadcrumbs-section, .sponge-layout-sub-search{width:100%;}

    /* -------- left & right wrap --------- ***************************************************************************************************************************************/


        .sponge-layout-content-container-rightcontent{ float:none; width:100%; } /* 8월24일 */
        .sponge-layout-content-container-leftmenu{ display:none; }
   
        .big-Img.sponge-border{ margin-left:0; }

        .arrowBox p.box, .arrowBox div.box{ width:100% !important; height:auto !important; min-height:0; }
        .arrowBox .arrow{ display:none;}
        .sponge-QRcod h4{ font-size:15px !important; }
        
        /*.sponge-table-default-SubDigital#sponge-table-banner .userBtn a, .sponge-table-default-SubDigital .userBtn div.btnDiv { height: auto; width: auto; background: none; padding-top:0; }
        .sponge-table-default-SubDigital#sponge-table-banner .userBtn a span.hide{display:block !important; font-size:12px; line-height:13px; text-indent:0; overflow:auto;}
        #sponge-table-banner .userBtn a:hover, #sponge-table-banner .userBtn div.btnDiv:hover,  #sponge-table-banner .userBtn a img:hover { border:0px solid #c1c1c1; border-radius:0;  box-shadow: none;}*/
        .sponge-QRcod-bg-none-hycl .sponge-page-boxGide{ margin:15px; }


    /*정보자료실소개*/
    .floor-big-Img .big-Img{ max-width:530px; width:100%; }
    .arrowBox3.sponge-padding-top20.sponge-padding-bottom20{ padding:0px !important; }



     .sponge-account-login-body-Hycl-sky{  background-image:none; width:100% !important; } 
     .sponge-account-login-body-Hycl{ background-image:none; min-height:0; width:100% !important; } 
   
      .userBtn-p p{ display:block; width:100%; border-right:0px solid #eee; border-bottom:1px solid #eee; margin-bottom:10px; padding-bottom:5px;}
      .userBtn-p p:last-child{ margin-bottom:0px; border-bottom:0px solid #eee; padding-bottom:0px; width:100%;}

    table#sponge-table-banner .userBtn a, table#sponge-table-banner .userBtn div.btnDiv, #sponge-table-banner table .userBtn a {  border-color:#002854; padding:10px 5px !important;}
    table#sponge-table-banner .userBtn a:hover span.hide, #sponge-table-banner table .userBtn a:hover span.hide, table#sponge-table-banner .userBtn a:hover, #sponge-table-banner table .userBtn a:hover{ color:#feff9a !important; }
    #searchq01 .sponge-list-content{ padding-top:0; }
    .search-list-command{ width:30px; text-align:right; }




.sponge-page-guide .arrowBox2019{ border:1px solid #c8c8c8; background:#fff; border-radius:3px; /*box-shadow:0 0 20px #ddd inset !important;*/box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1) inset; width:100%;}
.sponge-page-guide .arrowBox2019 table{ width: 100%;border-bottom:1px solid #c8c8c8;}
.sponge-page-guide .arrowBox2019 table:last-child{ border-bottom-width:0;}
.sponge-page-guide .arrowBox2019 td, .arrowBox2019 .sponge-table-default tbody td { padding:15px 40px 15px 10px; margin:0px;  display:table-cell !important;
 background: url('/Sponge/Images/Arrow/arrowBoxGray.png') no-repeat right center !important;background-position:right center !important;   vertical-align:middle; 
 width:auto !important; text-align:center; color:#555; font-weight:600; line-height:18px; border-left-width:0; }
.sponge-page-guide .arrowBox2019 table:last-child tr > td:last-child{ background-image:none !important; padding-right:15px; }
.sponge-page-guide .arrowBox2019 td i{ display:inline-block; font-size:30px; color:#5aa8dd;}
.sponge-page-guide .arrowBox2019 td span{ display:inline-block; }
.sponge-page-guide .arrowBox2019 td a{ text-decoration:underline; }

.sponge-page-guide .arrowBox2019-small.arrowBox2019 td{padding:15px 20px 15px 10px;}

.sponge-page-guide .arrowBox2019 + ul{ padding-top:20px;}

}
    /* 320px 이하일때 --------------------------- */
    @media only screen and (max-width : 340px) {
     /*.sponge-header-nav{min-width:320px; margin-bottom:0px; } 
     .border-width{ border:0px;}
     .sponge-main-icon-map a{ width:23%; font-size:14px;}
     .sponge-layout-main-board .nav-tabs > li > a {width:54px !important; }
     .sponge-layout-main-board a.main-more-icon{ margin-right:5px;}
     .sponge-layout-main-board h3, .booklist-newbook .nav-tabs > li > a {  min-width:80px; font-size:12px; }
     .booklist-newbook ul#mycarousel li, .booklist-newbook ul#mycarousel1 li, .booklist-newbook ul#mycarousel2 li{ width:86px;}*/
     
    }