/* 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:12px; 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:2px solid #11901e !important; min-width:320px;}          
        .sponge-header-nav .navbar-toggle{margin-right:0px; margin-top:8px; display:block; position:absolute; right:5px;}
        .sponge-header-nav .navbar-toggle .icon-bar{background-color:#11901e; 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 #11901e; 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-brand {padding: 8px 15px; height: 54px; text-align:left; float:left; margin:0; }
        .navbar-brand img{ height:40px;}

        .navbar{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;border-left:none;border-right:none}
        
        .infoBox{ clear:both; border-top:0px solid #dddddd !important; border-bottom:0px solid #dddddd !important;padding:0 0; margin:0 -15px !important; text-align:center; background: #11901e; /* Old browsers */ font-size:11px; color:#b1b1b1 !important; width:auto; }
        .infoBox > li{ display:inline-block;padding:7px 10px !important;  margin:1px; color:#fff;}
        .infoBox > li > a{ padding:0px !important; color:#fff !important; display:inline-block; background-image:none; margin:0px; }
        .infoBox > li > a:hover, .infoBox > li > a:focus{ border:0px solid #11901e; background-color:transparent; color:#feff9a !important}
        .infoBox > li > a:hover span, .infoBox > li > a:focus span{color:#feff9a !important;}
        .infoBox a.loginIcon{ color:#feff9a !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.2); margin:0 auto; width:100% !important;}
        .infoBox li.login-library-list a.eng-hide{  display:inline-block !important; }
        .infoBox li.login-library-list a{ padding:0 0px !important;  margin:0 10px;}
        .infoBox li.login-library-list a span{ color:#feff9a !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:#fff !important; }
        :last-child.navbar-right.navbar-nav.infoBox{ margin-right:-15px;}
        .infoBox li img { margin-top:-2px;}

        .sponge-empty-space-login{height:123px;}
        .sponge-empty-space-logout{height:89px;}  

        /* 메뉴- 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;}  
        .sponge-navbar .navbar-collapse{ }
        .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:#11901e !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; border-bottom:2px solid #11901e !important; } 
	    .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; background-color:transparent; padding-bottom:0; }
        .sponge-layout-content-sub{ width:100%; padding:0px;}
        .sponge-layout-content-container{ width:100%;} 
.sponge-layout-content-sub-2021, .sponge-page-breadcrumbs-section, .sponge-layout-sub-search{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:auto; background-image:none; border-bottom:0px; background-color:transparent;}      
       
        .sponge-layout-images{ background-image:none; padding:0px; height:auto; width:100%;}
        .sponge-layout-main-text{display:none !important;}

        #slideshow, #slides, #slides ul, #slides ul li { height:auto; }
        .visual .visual_ctr ul.pagination { padding:75px; }
         
        /* SEARCH */    
        .sponge-layout-main-search-bg{width:100%;}   
        .sponge-layout-main-search { position:relative; width:100% !important; padding:15px 15px !important;  margin-top:0px; background: rgba(10,49,31, 0.0); height:auto; margin-bottom:0; left:auto; top:auto;}  
        .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; border-left:1px solid #005aab !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; top:15px; right:15px; padding:3px 10px 6px 10px;  height:37px; font-size:14px; 
                                                                                                                                            width:55px;  }   
        .sponge-layout-main-search-popular{display:none;}
   

        /* -------- 바로가기 --------- ***************************************************************************************************************************************/
        .sponge-main-icon { width:100%; background-image:none; background-color:transparent; height:auto; border:0px solid #ddd; border-left:0px; border-right:0px; padding-bottom:10px !important; min-width:290px; margin:0px;} 
        .sponge-main-icon li.mapline{ border-right:0px solid #cacdcf; padding-right:0; width:50%; margin-right:0;}
        .sponge-main-icon ul{  padding:0 0 0 0 !important; height:auto; background-color:transparent; width:100%; border:0px;}
        .sponge-main-icon li{ width:30% !important; margin-bottom:15px; vertical-align:top; margin-top:15px; } 
        .sponge-main-icon li a{ font-size:12px; color:#292523; }
        .sponge-main-icon li a span{  margin:0 auto 5px auto; }
        .sponge-main-icon li a:hover, .sponge-main-icon li a:focus{ color:#000 !important; }


        /* 신착자료, 공지사항, 인기자료 */
        .sponge-layout-main-dataList{ width:100%; padding:0 0; margin:0; min-width:290px;}
        .sponge-layout-main-dataList .title{ border-bottom:1px solid #ddd; border-top:1px solid #ddd; padding:8px 15px; height:40px; background-color:#eee; }
        .sponge-layout-main-dataList h3 { color:#000 !important; border-radius:0; padding:0px 0 !important; 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:10px; right:15px; float:right;}
      
        .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;}
        .sponge-layout-main-dataList .nav-tabs > li > a {color:#969696 !important; border-radius:0; padding:0px 0 !important; font-size:12px; margin-right:15px; min-width:0; border-bottom:0px !important; line-height:1.4285; text-align:center; font-size:15px; border-bottom:0px;}
        .sponge-layout-main-dataList .nav-tabs > li > a:hover{ background-color:transparent;}
        .sponge-layout-main-dataList ul.data{ margin:0 0 0 0; width:100%; height:auto; padding:15px 15px 15px 15px !important; min-height:120px;}
        
        .sponge-layout-main-dataList .col-md-4, .sponge-layout-main-dataList .col-md-5, .sponge-layout-main-dataList .col-md-4.sponge-layout-main-booklist{ width:100%; padding:0 0 0 0 !important; border:0px; height:auto;  margin:0px;}
        
        .sponge-layout-main-dataList .col-md-5 .title{ border-top:1px solid #ddd;  }

        .sponge-layout-main-board ul.data{ background-image:none;}
        .sponge-layout-main-board li.list{  height:24px;  overflow:hidden;  }
        .sponge-layout-main-board li.list a{font-size:13px;}

        .sponge-layout-main-booklist li.list span{ font-size:12px; padding-top:5px; height:22px;}
        .sponge-layout-main-booklist {  }  
        .sponge-layout-main-booklist ul.data{ text-align:center; overflow:hidden !important;  padding-bottom:10px !important; padding-top:20px;}
        .sponge-layout-main-booklist li.list{display:inline-block; width:23%; text-align:center; line-height:20px; font-size:12px; height:auto; overflow:hidden; padding:0 0px; margin:0 0.5%; }
        .sponge-layout-main-booklist li.list img{ width:65px; height:90px; }

        .sponge-layout-main-banner{ display:none; }

        #sponge-layout-content-container-quick{bottom:110px; top:auto; right:15px; opacity:0.9; width:15px; height:15px; padding:0px; }	
        #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 */
   
    .sponge-layout-footer-banner { width:100%; margin-top:10px;}
    .footer-banner-list > li{ padding:0 5px;}
     footer{ margin-top:0;}
    .sponge-layout-footer{ width:100%; text-align:center; border-top:1px solid #ddd; padding-left:10px; padding-right:15px; padding-top:10px; }
    .sponge-layout-footer p{line-height:24px;}
    .footer-banner{display:none;}

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


    .sponge-layout-content-container-rightcontent{ float:none; width:100%; } /* 8월24일 */
    .sponge-layout-content-container-leftmenu{ display:none; }
   
    .guideMap .pull-right{ margin:-4px 0px 0 0; }
    .guideMap p.img{margin-top:0px;}

    .sponge-padding-top30.sponge-guide-Box{padding-top:15px !important;}

    .sponge-nav-tabs{border:0px solid #ddd; }
    .sponge-nav-tabs > li{width:auto;}
    .sponge-nav-tabs > li > a{ border-radius:3px; border-top:1px solid #ddd !important; border-bottom:1px solid #ddd !important; border-right:1px solid #ddd !important; margin:0px; height:auto !important;}
    .sponge-nav-tabs > li:nth-child(4n+1) > a{  border-left:1px solid #ddd !important; }
    .sponge-nav-tabs > li:last-child > a, .sponge-nav-tabs > li:nth-last-child(2) > a, .sponge-nav-tabs > li:nth-last-child(3) > a, .sponge-nav-tabs > li:nth-last-child(4) > a{  border-bottom:1px solid #ddd !important; }

    .nav-tabs.sponge-nav-tabs > li.active > a, .nav-tabs.sponge-nav-tabs > li.active > a:hover, .nav-tabs.sponge-nav-tabs > li.active > a:focus{border:1px solid #00733f !important;}
    .sponge-nav-tabs-50p > li{width:auto; }

    .intro{ margin-top:0px; padding-left:0px;}
    .intro div{ display:none;}
    
    .intro{ background:none; height:auto; text-align:justify;   }
    .intro p{ padding-top:0px; padding-bottom:15px; margin:0px;}
    .intro p:last-child{ margin-bottom:0px; padding-bottom:0px; }


    }
        /* 320px 이하일때 --------------------------- */
    @media only screen and (max-width : 340px) {
        
          
    }