@import url("/klib/Sponge/WebFonts/NotoSansKR/NotoSansKR.css");
/*  한국어 */
:lang(ko) {
  font-family: 'Noto Sans KR', sans-serif;
}

:lang(ko) .fa, .fa {
  font-family: 'FontAwesome' !important;
}
:lang(ko) .fas, .fas {
  font-family: 'Font Awesome 5 Free' !important;
}
body{  font-size:16px;}
.sponge-layout-main-background{ min-width:1440px; }
.sponge-layout-sub-background{ min-width:1440px;}
/*TOP---------------------------------- ***************************************************************************************************************************************/
a{  }
a:hover, a:focus { color: #004098; }
a:active { color: #004098;  }
#skipnavi{ display:none;}
.kor-hide{ display:none !important;}
.container {  padding-left:0px; padding-right:0px; width: 1440px; margin:0 auto;  }  


#scrollNavOver #sponge-header{ position:fixed; width:100%; background-color:#fff; z-index:300;  }

.sponge-layout-main-background #sponge-header{ position:relative; z-index:2000; }
.navbar-header{float:left; width:360px; /*position:absolute; left:0;*/}
/* menu */
.sponge-header-nav { margin-bottom:0px;  height:163px;  border-radius:0px; border:0px; }
.sponge-layout-sub-background .sponge-header-nav { border-bottom:1px solid #ddd; }
/*.sponge-header-nav .navbar-toggle{display: none;}*/


/* logo */
.navbar-header h1{ margin:0; margin-top:17px;}
.navbar > .container .sponge-navbar-brand, .navbar > .container-fluid .sponge-navbar-brand{ margin-left:0px; margin-top:0;}
.sponge-navbar-brand { height: auto; padding:0 0; position:absolute; z-index:5000;}
.navbar-header h1 a{ background: url('/klib/Users/Gbklib/Images/main/sponge-logo.png') no-repeat; width:324px; height:35px; display:block; }
 
/* infoBox */  
.infoBoxTop{ width:100%; position:absolute; left:0px; right:0px; height:76px; border-bottom:1px solid #eff1f0; }
.infoBox{  text-align:right; width:1440px; margin:21px auto 0 auto !important; float:none !important; position:relative;}
.infoBox > li{ margin:3px 5px; display:inline-block; color:#555; float:none; vertical-align:top; }
.infoBox > li:last-child{ margin-right:0px;}
.infoBox > li > a:hover, .infoBox > li > a:focus{ background-color:transparent; color:#00448f;}        
.infoBox > li > a{ display:inline-block; padding:0px 0; margin:0 0px;}
/*.infoBox > li > a > strong{ vertical-align:top; }*/
.infoBox a.loginIcon{ color:#ff8497 !important;  }
.infoBox li.login-library-list > a{ margin-left:10px;}
.infoBox li.login-library-list > a > span{ color:#ec5e33; }
.infoBox li.login-library-list > a > span.eng-hide{ color:#555; }
.infoBox li.login-library-list > a:hover > span.eng-hide{ color:#00448f; }
/*:last-child.navbar-right.navbar-nav.infoBox{ padding-right:40px;}*/
.infoBox li.infoBox-language > a{ font-size:11px; color:#fff; padding:1px 8px; border-radius:15px; background-color:#555; margin-top:-2px; }
.infoBox li.infoBox-language > a:hover, .infoBox li.infoBox-language > a:focus, .infoBox li.infoBox-language > a:active{ color:#faffad; background-color:#0e4e96; }
.sponge-user-top-search input[type=text]:focus { width: 455px; }

/* 메뉴- navbar */   

.sponge-navbar-top{ padding:0px; top:0; position:absolute; left:0px; right:0px; }
.sponge-navbar{  padding:0px; /*width:1440px;*/  margin:0 auto; }  

.menuWrap{ clear:both; width:100%;  margin:0 auto; position:absolute; top:76px; z-index:2000; overflow:hidden; background-color:#fff; transition-duration: 0.9s, 0s; border-bottom:1px solid #ddd;border-top:1px solid #ddd; background-color:#f7f7f7; }
.menuWrap:hover{ border-bottom-width:0px;}
#GNB{ padding:0 0 0 0; margin:0 auto; width:100%; background-color:#fff; height:87px; max-height:500px; text-align:center; transition-duration: 0.5s, 0s;}
#GNB a:active { background-color:transparent;}
#GNB > li{ display:inline-block; vertical-align:top; width:290px; margin:0px -3px;}
#GNB > li:hover { background-color:#014099; }
#GNB > li > a { font-size:21px; color:#1e1e1e; font-weight:500; padding:32px 0 0 0; height:87px; display:block; border-right:1px solid transparent;transition-duration: 0s, 0s; line-height:20px; border-radius:0;  position:relative;}
#GNB > li:hover > a { color:#1e1e1e;  background-color:#fff;}
#GNB > li:hover > a::before{ content:''; background-color:#171c61;  width:100%; height:4px; position:absolute; bottom:0; display:block; display:none; }
#GNB > li > a.line2 { padding-top:16px; }
#GNB > li > a:hover, #GNB > li > a:focus, #GNB > li.over a{color:#000; }
#GNB > li > .gnb1{ padding:20px 0; height:505px; text-align:left; border-right:2px solid #dcdcdc; margin:0 0px 0 0px;}
#GNB > li.over .gnb1{ border-right:0px solid #b5b5b5;}
#GNB > li:last-child > .gnb1{ border-right:0px solid #eee;  }
#GNB .gnb1.last{border-right:0px solid #eee;}
#GNB .gnb1 > li{float:none;  line-height:18px; width:100%; padding:7px 25px;}
#GNB .gnb1 > li > a{display:block; float:none; padding:10px 0px;   border-bottom:1px solid transparent;}
#GNB .gnb1 > li:hover > a{ border-bottom-color:#fff;  }
#GNB > li.over .gnb1 > li > a{ color:#fff;}
/*#GNB .gnb1 > li > ul{ padding-left:10px; }*/
#GNB .gnb1 > li > ul > li{ padding-left:10px; width:100%; }
#GNB .gnb1 > li > ul > li:last-child{ padding-bottom:3px;}
#GNB .gnb1 > li > ul > li > a{ padding:4px 20px 4px 20px; font-weight:normal !important; display:inline-block; position:relative;font-size:80%; }
#GNB .gnb1 > li > ul > li > a::before{ content:'└'; font-size:80%; position:absolute; left:3px; }
#GNB .gnb1 > li > ul > li > ul{margin-bottom:5px;display:none;}
#GNB .gnb1 > li > ul > li > ul > li { width:100%; padding-left:35px;}
#GNB .gnb1 > li > ul > li > ul > li > a{  display:inline-block;padding:2px 0 2px 0; font-size:70%; }
#GNB .gnb1 > li > ul > li > ul > li > ul{display:none;}
#GNB .gnb1 > li > ul > li > ul > li > ul > li { width:100%;padding-left:20px; }
#GNB .gnb1 > li > ul > li > ul > li > ul > li > a{  display:inline-block; padding:3px 0 3px 0;font-size:70%;}


#GNB .over .gnb1 > li a{ /*opacity:0.8;*/  transition-duration: 0.5s, 0s; }

#GNB .gnb1 > li:hover > a, #GNB .gnb1 > li:hover > ul > li:hover > a, #GNB .gnb1 > li:hover > ul > li:hover > ul > li:hover > a, #GNB .gnb1 > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > a{ font-weight:500; color:#fff !important; }



.menuWrap-line{ position:absolute; width:100%; height:1px; background-color:#dddddd; top:87px; z-index:2007; }

.menuWrapMobile{ display:none; }

/*메뉴흰백부분*/
.sponge-layout-main-background #sponge-header{ /*background-color:rgba(0, 0, 0, 0.55);*/ position:relative; }  

.sponge-layout-main-background .sponge-navbar{ border-color:transparent;}  

.sponge-layout-main-background .navbar-header h1 a{ background-image: url('/klib/Users/Gbklib/Images/main/sponge-logo-white.png');}
.sponge-layout-main-background .infoBox > li, .sponge-layout-main-background .infoBox li a,
.sponge-layout-main-background .infoBox li.login-library-list a span.eng-hide,
.sponge-layout-main-background .infoBox li.login-library-list a:hover span.eng-hide,
.sponge-layout-main-background .infoBox li.infoBox-language a{ color:#fff !important; }
.sponge-layout-main-background .infoBox > li > a{ color:#fff;}

.sponge-layout-main-background .menuWrap{  border-top-color:rgba(255, 255, 255, 0.3); border-bottom-color:rgba(255, 255, 255, 0); background-color:transparent; }

.sponge-layout-main-background #sponge-header:hover{background-color:#fff;}
.sponge-layout-main-background #sponge-header:hover .sponge-header-nav{background-color:#fff;}
.sponge-layout-main-background #GNB{ background-color:transparent; }
.sponge-layout-main-background #GNB > li > a  { color:#fff; }
.sponge-layout-main-background #GNB > li:hover > a  { color:#000; }
.sponge-layout-main-background #sponge-header:hover #GNB > li > a  { color:#1e1e1e; }
/*메뉴hover부분*/
.sponge-layout-main-background #sponge-header:hover{ background-color:#fff;}
.sponge-layout-main-background #sponge-header:hover #GNB{ background-color:#fff; }
.sponge-layout-main-background #sponge-header:hover .menuWrap{ background-color:#f7f7f7; border-top-color:rgba(0, 0, 0, 0.2);border-bottom-color:rgba(0, 0, 0, 0.2);}
.sponge-layout-main-background #sponge-header:hover .sponge-navbar { background-color:#fff;}
.sponge-layout-main-background #sponge-header:hover .sponge-header-nav .container{ border-color: #eeeeee !important;}
.sponge-layout-main-background #sponge-header:hover .navbar-header h1 a{ background-image: url('/klib/Users/Gbklib/Images/main/sponge-logo.png');}
.sponge-layout-main-background #sponge-header:hover .infoBox > li,.sponge-layout-main-background #sponge-header:hover .infoBox li a,
.sponge-layout-main-background #sponge-header:hover .infoBox li.login-library-list a span.eng-hide,
.sponge-layout-main-background #sponge-header:hover .infoBox li.login-library-list a:hover span.eng-hide{ color:#000 !important;}

.sponge-layout-main-background #sponge-header:hover .infoBox li.infoBox-language a{ color:#fff !important;}



.sponge-layout-main-background .sponge-layout-wrap{ /*position:absolute; width:100%; top:0;*/}

/* -------- Main wrap --------- ***************************************************************************************************************************************/
.sponge-layout-content-sub-2021, .sponge-page-breadcrumbs-section, .sponge-layout-sub-search{width:1440px;}
.sponge-layout-content-main{ width:100%; overflow:hidden; margin:0 auto; padding:0; }
.sponge-layout-content-sub{width:100%; overflow:hidden; padding-bottom:30px; margin:0 auto;  clear:both;}

.sponge-layout-content-container{ width:100%; padding-right:0px; float:left; display:inline; overflow:hidden;} 



/* 메인 롤링이미지-----------------------------------------------------------------------------------------------------------------------------------------*/  
.sponge-layout-images-bg{  width:100%; margin-bottom:0; height:376px; }

 
.sponge-layout-images{width:100%; margin:0 auto; padding:0 0px;  z-index:100; overflow: hidden; background: url('/klib/Users/Gbklib/Images/main/mainImg01.jpg') no-repeat center top; position:absolute; top:0; height:800px;}

.sponge-carousel .item{  background:#d2cfca url('/klib/Users/Gbklib/Images/main/mainImg01.jpg') no-repeat center top; background-size:auto; }
.sponge-carousel .item.mainImg02{ background-image:url('/klib/Users/Gbklib/Images/main/mainImg02.jpg'); }

.sponge-carousel .carousel-control{  width:7%; z-index:50;}
.sponge-carousel .carousel-control:active{ background-color:transparent;}
.sponge-carousel .carousel-indicators{bottom:auto; top:880px;}
.sponge-carousel .carousel-indicators li{ width:16px; height:16px; margin:1px 2px;}
.sponge-carousel .carousel-indicators .active{ width:18px; height:18px;}


/*.sponge-main-icon-map-box{ width:100%;  font-weight:500; margin:0 auto; padding-top:155px; min-height:calc(920px - 119px)}
.sponge-main-icon-map-box > div{ padding:0px 0px 0 0; text-align:center; position:absolute; width:100%; z-index:1; }
.sponge-main-icon-map-box > div > div{ margin:0 auto; width:922px; box-shadow:0px 10px 20px rgb(0 0 0 / 20%); background-color:#fff;  border-radius:15px; padding:40px 45px;
animation-name:top; animation-duration:1s; -webkit-animation-name:top; -webkit-animation-duration:1s;  }*/


.wrap-index { overflow: hidden; }

.dark-green { color: #4c5b52; }

.light-green { color: #00853e; }

.mb-50 { margin-bottom: 50px;}

/*slider*/

.slider { float: left; height:960px; width: 100%; position: absolute; }
.slider .jquery-reslider .slider-block {width: 100%; height: 100%; position: absolute; z-index: 1; background-position: center top; background-repeat: no-repeat; background-size: 100%; opacity: 0; animation:sunday 7s 2s infinite alternate;
 -webkit-animation:sunday 7s infinite alternate; -moz-animation:sunday 7s infinite alternate; -o-animation:sunday 7s infinite alternate; -ms-animation:sunday 7s infinite alternate;

} 
@keyframes sunday{ 10%{background-size:100%;} /*50%{background-size:105%;}*/  100%{background-size:105%;} }
.slider .jquery-reslider .slider-direction { position: absolute; top: 30%; cursor: pointer; z-index:5000 !important; font-size:40px; color:#fff; opacity:0.6; z-index:500 !important; } 
.slider .jquery-reslider .slider-direction.slider-direction-prev {left: 20px; /*background: url('../Images/main/prev.png') no-repeat; */ }
.slider .jquery-reslider .slider-direction.slider-direction-next {right: 20px; /*background: url('../Images/main/next.png') no-repeat*/ }
.slider .jquery-reslider .slider-direction:hover{opacity:1;}
.slider .jquery-reslider .slider-dots {position: absolute; width: 100%; text-align: center; top: 480px; z-index:5000 !important; }
.slider .jquery-reslider .slider-dots li {width: 15px; height: 15px; border-radius: 100px; display: inline-block; margin: 10px; border: 1px solid #ffffff; cursor: pointer; }
.slider .jquery-reslider .slider-dots li.active {background-color: #ffffff; }



/* SEARCH -----------------------------------------------------------------------------------------------------------------------------------------*/  
.sponge-layout-main-search-bg{width:950px; margin:0 auto; position:relative; padding-top:118px; animation-name:top3; animation-duration:1s; -webkit-animation-name:top3; -webkit-animation-duration:1s; }
.sponge-layout-main-search-bg > div { width:100%; position:absolute; z-index:108;}   

.sponge-layout-main-search { width:750px; margin:0 auto;  height:auto; position:relative; }   


@keyframes top3
{
from {margin-top:-100px; opacity:0;}
to   {margin-top:0; opacity:1; }
}
.sponge-layout-main-search .nav-tabs{ font-weight:500; float:none; border-bottom: 0px solid #dddddd; width:100%; margin:0 auto;  }
.sponge-layout-main-search .nav-tabs > li{ margin:0; vertical-align:top;  }
.sponge-layout-main-search .nav-tabs > li:last-child{  border-right-width:1px;  }
.sponge-layout-main-search .nav-tabs > li > a { padding:10px 5px; margin:0px 25px 15px 25px; font-size:23px; /*cursor: auto;*/ color:#fff; text-align:center; border-radius:0; z-index:50; border-width:0; transition-duration: 0.5s, 0s; 
                                                background-color:transparent; }

.sponge-layout-main-search .nav-tabs > li:first-child > a, .sponge-layout-main-search .nav-tabs > li.active > a, .sponge-layout-main-search .nav-tabs > li > a + .sponge-layout-main-search .nav-tabs > li.active{border-left-width:0px;}
.sponge-layout-main-search .nav-tabs > li.active > a,
.sponge-layout-main-search .nav-tabs > li.active > a:hover,
.sponge-layout-main-search .nav-tabs > li.active > a:active,
.sponge-layout-main-search .nav-tabs > li.active > a:focus { color:#fff;  border-width:0px; font-size:28px; border-bottom:3px solid #014099; padding:5px 5px; background-color:transparent; }
/*.sponge-layout-main-search .nav-tabs > li.active > a::after{ content:'▼'; display:block; font-size:11px; color:#004028; }*/


.sponge-layout-main-search .tab-content{  float:none; margin:0 auto; z-index:10; position:relative; }
.sponge-layout-main-search h3{ position:absolute;height:70px; width:180px; display:block; border-radius:50px 0 0 50px; background-color:#003f99; top:0; margin:0; padding-top:23px; color:#fff; text-align:center; font-size:21px; }
.sponge-layout-main-search .search_inputboxmain { width:99%;height: 70px; margin:0 0 0 1px; vertical-align: middle !important; color: #000000; padding-left:195px; padding-right:90px; box-shadow:none; border-radius:50px; border:0px solid #014099; font-size:21px; }
/*.sponge-layout-main-search #search01 .search_inputboxmain {  padding-left:165px; }*/
.sponge-layout-main-search .search_inputboxmain:-ms-input-placeholder,
.sponge-layout-main-search input.search_inputboxmain::placeholder,
.sponge-layout-main-search input.search_inputboxmain:placeholder,
.sponge-layout-main-search input.search_inputboxmain::-ms-input-placeholder,
.sponge-layout-main-search input.search_inputboxmain:-ms-input-placeholder,
.sponge-layout-main-search input.search_inputboxmain::-webkit-input-placeholder,
.sponge-layout-main-search input.search_inputboxmain::-moz-placeholder, .sponge-layout-main-search input.search_inputboxmain.form-control::-webkit-input-placeholder{ color: #999696; }

.sponge-layout-main-search .local-search-main:hover, .sponge-layout-main-search .local-search-main:focus{ background-color:#00448f !important;}
.sponge-layout-main-search .btn-main{  background:transparent url("/klib/Users/Gbklib/Images/main/readingGlasses.png") no-repeat center center; position:absolute; right:0; top:0; height:70px; width:90px; display:block; border-radius:0 50px 50px 0;  }


.sponge-layout-main-search .searchBtn:hover, .sponge-layout-main-search .searchBtn:focus{ opacity:1; }
.sponge-layout-main-search .searchBtn:hover, .sponge-layout-main-search .searchBtn02:hover{ color:#fff !important;}

/* -------- 즐겨찾기 --------- ***************************************************************************************************************************************/
.sponge-main-btn{  width:100%; padding:20px 0 20px 0; position:absolute;top:757px; z-index:104; background-color:#fff;}
.sponge-main-btn > ul{ text-align:center; overflow:hidden; width:1440px; margin:0 auto; }
.sponge-main-btn > ul > li{ width:12.2%;  display:inline-block; line-height:15px; position:relative;}
.sponge-main-btn > ul > li > a{ display:block; text-decoration:none; line-height:15px; color:#000; text-align:center; font-size:18px;}
.sponge-main-btn > ul > li > a:hover, .sponge-main-btn > ul > li > a:focus{ background-color:transparent;}
.sponge-main-btn > ul > li > a span.map { display:block; width:82px; height:82px; margin:10px auto 10px auto; border-radius:50%;}
.sponge-main-btn > ul > li > a span.map > i{ display:block; width:82px; height:82px;  background:url('/klib/Users/Gbklib/Images/main.png') no-repeat left -9px;  border-radius:50%;}
.sponge-main-btn > ul > li > a span.map01 > i{ background-position-x:-9px;}
.sponge-main-btn > ul > li > a span.map02 > i{ background-position-x:-109px; }
.sponge-main-btn > ul > li > a span.map03 > i{ background-position-x:-209px; }
.sponge-main-btn > ul > li > a span.map04 > i{ background-position-x:-309px; }
.sponge-main-btn > ul > li > a span.map05 > i{ background-position-x:-409px; }
.sponge-main-btn > ul > li > a span.map06 > i{ background-position-x:-509px; }
.sponge-main-btn > ul > li > a span.map07 > i{ background-position-x:-609px; }
.sponge-main-btn > ul > li > a span.map08 > i{ background-position-x:-709px; }
/*.sponge-main-btn > ul > li > a span.map09{ background-position-x:-800px; }
.sponge-main-btn > ul > li > a span.map10{ background-position-x:-900px; width:47px;}
.sponge-main-btn > ul > li > a span.map11{ background-position-x:-1000px; width:52px;}
.sponge-main-btn > ul > li > a span.map12{ background-position-x:-1100px; width:54px;}*/

.sponge-main-btn > ul > li:nth-child(1) > a > span.map { animation-delay:0.5s;}
.sponge-main-btn > ul > li:nth-child(2) > a > span.map { animation-delay:0.75s;}
.sponge-main-btn > ul > li:nth-child(3) > a > span.map { animation-delay:1s;}
.sponge-main-btn > ul > li:nth-child(4) > a > span.map { animation-delay:1.25s;}
.sponge-main-btn > ul > li:nth-child(5) > a > span.map { animation-delay:1.5s;}
.sponge-main-btn > ul > li:nth-child(6) > a > span.map { animation-delay:1.75s;}
.sponge-main-btn > ul > li:nth-child(7) > a > span.map { animation-delay:2s;}
.sponge-main-btn > ul > li:nth-child(8) > a > span.map { animation-delay:2.25s;}
.sponge-main-btn > ul > li:nth-child(9) > a > span.map { animation-delay:2.5s;}
.sponge-main-btn > ul > li:nth-child(10) > a > span.map { animation-delay:2.75s;}

.sponge-main-btn > ul > li:hover > a{ opacity:1; }
.sponge-main-btn > ul > li:hover > a > span.map{background-position-y: top; transition-duration: 0.9s, 0s; transform:rotateY(360deg); background-color:#014099;   }
.sponge-main-btn > ul > li:hover > a > span.map > i{  background-position-y:-9px; filter: brightness(0) invert(1);}

.sponge-back-bg {position:absolute; top:0; height:100vh; width:100%; z-index:500;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */}
/*waves*/
.sponge-waves{ position:absolute; top:360px; z-index:102; width:100%; min-width:1903px; }
.sponge-waves-header {
  

}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:70vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:150px;
  margin-bottom:-7px; /*Fix for safari gap*/
  /*min-height:100px;
  max-height:150px;*/
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}




/* 커뮤니티 -----------------------------------------------------------------------------------------------------------------------------------------*/  


.sponge-layout-main-board.sponge-layout-imgaes-main-box h3{ display:none;}
.sponge-main-images .sponge-layout-main-board{ padding:40px; }
.sponge-main-images .sponge-layout-main-board h3{ display:block;}
/*.sponge-layout-main-board.sponge-layout-imgaes-main-box .title{ display:none;}*/
.sponge-layout-main-board .tab-content ul.data{ padding:0 0 0 0; margin:0 0 0 0; clear:both; }
.sponge-layout-main-board .tab-content ul.data > li{ clear:both; width:100%; margin:0px;  overflow:hidden; vertical-align:bottom;border-bottom:1px solid #dcdbdb; position:relative; }
.sponge-layout-main-board .tab-content ul.data > li:last-child{ border-bottom-width:0;}
.sponge-layout-main-board .tab-content ul.data > li > a{ display:block; color:#000; font-size:16px; font-weight:500; text-align:left; width:100%; padding:17px 21% 17px 0; height:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sponge-layout-main-board .tab-content ul.data > li > p{  width:21%; position:absolute; right:0; top:0; font-size:16px;  padding:20px 0; text-align:right;  margin:0px;  color:#9b9a9a;} 
.sponge-layout-main-board .tab-content ul.data > li > a:hover{ color: #014099; }
.sponge-layout-main-board .tab-content ul.data > li > a > span.btn{ min-width:73px; height:34px; padding-top:5px; text-align:center; background-color:#014099; border-color:#014099; border-radius:50px; font-size:16px; font-weight:500; }
.onroad-board dd span.btn.btn-xs.btn-primary{background-color:#014099; border-color:#014099;}
.sponge-layout-main-board .tab-content ul.data > li > a > span.btn.btn-info, .onroad-board dd span.btn.btn-xs.btn-info{ background-color:#ee6993; border-color:#ee6993; }
.sponge-layout-main-board .tab-content ul.data > li > a > span.label{ display:none; }
/* 커뮤니티 */
/*.sponge-main-images .sponge-layout-main-board{ padding:0; width:100%;}*/
.sponge-main-images .sponge-layout-main-board .tab-content ul.data { padding:0 0 0 0; margin:0 0 0 0; display:inline-block; width:100%; overflow-y:hidden; height:204px;}
.sponge-main-images .sponge-layout-main-board .tab-content ul.data > li{ border-bottom-color:rgba(255, 255, 255, 0.25);}
.sponge-main-images .sponge-layout-main-board .tab-content ul.data > li > a{ color:#fff; }
.sponge-main-images .sponge-layout-main-board .tab-content ul.data > li > a:hover{ color:#ffc0d4; }
.sponge-main-images .sponge-layout-main-board .tab-content ul.data > li > p{ color:#fff; } 

.sponge-layout-main-recommendation{position:relative;}
.sponge-layout-main-dataList .row > div.col-md-3 > .sponge-layout-main-recommendation:first-child{ padding-bottom:10px; }
.sponge-layout-main-recommendation > div.title{ float:left; width:20%; }
.sponge-layout-main-recommendation > div.title > h3{ writing-mode: vertical-lr; font-size:30px; }
.sponge-layout-main-recommendation > div.title a.main-more-icon{ right:auto; left:34px; top:130px; width:25px; height:25px; font-size:18px; line-height:25px; }

.sponge-layout-main-recommendation > div.Recommendationbox{ float:right; width:232px; height:215px; background: url('/klib/Users/Gbklib/Images/main/RecommendationBg.png') no-repeat; padding-left:54px; }
.sponge-layout-main-recommendation > div.Recommendationbox > a { display:block; }
.sponge-layout-main-recommendation > div.Recommendationbox > a > img{ width:120px; height:182px; display:block; }

/* 신착도서 -----------------------------------------------------------------------------------------------------------------------------------------*/  

.sponge-main-images .sponge-layout-imgaes-main-box.sponge-layout-main-booklist{ width:880px; padding:40px 0;}
.sponge-layout-main-booklist h2{ font-size:34px;font-weight:500; padding:0 0 40px 0; color:#fff; text-align:center; }
.sponge-main-images .sponge-layout-main-booklist h3{ margin-bottom:0;}
.sponge-layout-main-booklist a.main-more-icon{position:absolute; right:10px; top:20px; }
.sponge-layout-main-booklist ul{ padding:0 0 0 0; margin:0 0 0 0; clear:both;text-align:center;}
.sponge-layout-main-booklist ul > li{ display:inline-block; width:143px; }
.sponge-layout-main-booklist ul > li > i{ display:none; }
.sponge-layout-main-booklist ul > li > div{ display:inline-block; width:143px; height:187px; padding:10px 0 0 24px; margin:0px; background: url('/klib/Users/Gbklib/Images/main/bookBg_s.png') no-repeat;  text-align:left;}
.sponge-layout-main-booklist ul > li > div > a{  width:115px; height:163px; background-image:none; position:relative; display:block; overflow:hidden; border:1px solid #555; }
.sponge-layout-main-booklist ul > li > div > a > img{ width:113px; height:161px; }
.sponge-layout-main-booklist ul > li > div > a:hover > img{ }
.sponge-layout-main-booklist ul > li > div > a > span{ overflow:hidden; display:none; padding:30px 10px; position:absolute; width:115px; height:163px; background-color:rgba(0, 0, 0, 0.7); top:0; text-align:center; font-weight:500; color:#fff; }
.sponge-layout-main-booklist ul > li > div > a:hover > span{ display:block; animation-name:top4; animation-duration:1s; -webkit-animation-name:top4; -webkit-animation-duration:1s;}


.sponge-layout-main-booklist ul > li:first-child{ background: url('/klib/Users/Gbklib/Images/main/bookFirstBg.png') no-repeat bottom left; width:337px; height:325px; padding:32px 0 0 62px;  text-align:left;  position:relative; }
.sponge-layout-main-booklist ul > li:first-child > i{ display:block; background:url('/klib/Users/Gbklib/Images/main/bookNew.png') no-repeat left top; position:absolute; z-index:2; top:10px; left:65px; width:73px; height:66px; color:#fff; text-align:center;
 padding-top:18px; }
.sponge-layout-main-booklist ul > li:first-child > div{ width:273px; height:274px; padding:10px 0 0 27px;background: url('/klib/Users/Gbklib/Images/main/bookBg.png') no-repeat; }
.sponge-layout-main-booklist ul > li:first-child > div > a{  width:176px; height:250px;  }
.sponge-layout-main-booklist ul > li:first-child > div > a > img{ width:174px; height:248px; }
.sponge-layout-main-booklist ul > li:first-child > div > a > span{ width:176px; height:250px;  }


@keyframes top4
{
from {top:245px; opacity:0;}
to   {top:0; opacity:1; }
}


/* -------- 바로가기2 --------- ***************************************************************************************************************************************/
.sponge-content{ /*background-color: rgba(255,255,255, 0.9);*/ background-color:#fff; padding-top:60px; 
/*background: linear-gradient(to bottom,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 1%,rgba(255,255,255,1) 68%,rgba(255,255,255,1) 100%);*/ position:relative; z-index:1000; padding-bottom:10px; width:100%; }
.sponge-content h2{ font-size:30px; display:block; padding:70px 0 50px 0; text-align:center; }
.sponge-content h2 > span{position:relative; display:inline-block;  text-align:center; width:350px; height:30px;}
.sponge-content h2 > span > span{position:absolute; width:100%; left:0;  z-index:3; color:#000;}
.sponge-content h2 > span > i{ content:''; display:block; width:100%; position:absolute; height:9px; background-color:rgba(148, 201, 72, 0.58);  z-index:1; bottom:0; }


/* 신착도서, 공지사항, 인기도서 */
.sponge-layout-main-dataList{  clear:both; padding:0 0 25px 0;}
.sponge-layout-main-dataList .row{ width:1440px; margin:0 auto 0 auto; padding:0px; }
.sponge-layout-main-dataList .row > div{ margin:0; padding:0px;}

.sponge-layout-main-dataList .row > div.col-md-8{ width:840px; } 
.sponge-layout-main-dataList .row > div.col-md-4{ width:525px; float:right;} 
.sponge-layout-main-dataList .row > div .title{ height:50px;  font-weight:500; position:relative; border-bottom:0px solid #000; }
.sponge-layout-main-dataList .row > div .title > h3 span{ font-weight:500;font-size:26px; color:#000; padding:0 0; position:relative; height:60px; width:auto; display:inline-block; }


/* 이용시간 */
.sponge-layout-main-time{ padding:40px 30px; position:relative; background:#f0f0ee url("/Klib/Users/Gbklib/Images/main/timeGuide.png") no-repeat 12px -44px;  height:360px;
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3)  ; 
	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3)  ; 
	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3)  ;  }
.sponge-layout-main-time h3{ font-size:24px; text-align:center; color:#014099; padding-bottom:40px; font-weight:500; }
.sponge-layout-main-time > div > dl > dt{ font-size:17px; color:#fff; padding:10px; background-color:#014099; width:220px; margin-bottom:25px;}
.sponge-layout-main-time > div > dl > dd{ font-size:16px; color:#091c5e; font-weight:500; letter-spacing:-0.5px; margin-bottom:15px; }
.sponge-layout-main-time > div > dl > dd:last-child{ margin-bottom:25px; }
.sponge-layout-main-time > div > dl > dd.red{ color:#cd3429; }
.sponge-layout-main-dataList .sponge-layout-main-time a.main-more-icon{ position:absolute; right:30px; bottom:30px; top:auto; font-size:15px; display:block; color:#da4034; width:auto; font-weight:500; }
.sponge-layout-main-dataList .sponge-layout-main-time a.main-more-icon span{ font-family:'돋움'; }

/* 게시판 */
.sponge-layout-main-dataList .row > div .sponge-layout-imgaes-main-tabs{ /*background-color:#fff; padding:30px 30px 0px 30px; height:360px;*/}
.sponge-layout-main-dataList .row > div .sponge-layout-main-board.sponge-layout-imgaes-main-box .title{ display:block; width:100%;}

.sponge-layout-imgaes-main-tabs{ border-bottom: 0px solid #dddddd;/*box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3)  ;
	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3)  ; 
	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3)  ;*/ }
.sponge-layout-imgaes-main-tabs ul.nav-tabs > li.active > a,
.sponge-layout-imgaes-main-tabs ul.nav-tabs > li.active > a:hover,
.sponge-layout-imgaes-main-tabs ul.nav-tabs > li.active > a:focus { color:#000; height:32px; border-bottom:0px solid #286cb7 !important; font-size:26px; padding:0; background-color:transparent; }
.sponge-layout-imgaes-main-tabs ul.nav-tabs > li > a { height:32px; font-weight:500; color:#767676; padding:0 0 0 0; margin-right:20px; font-size:26px; display:block; float:left; border:0px !important; background-color:transparent;}
.sponge-layout-imgaes-main-tabs ul.nav-tabs > li > a:hover, .sponge-layout-main-dataList .nav-tabs > li > a:focus { color:#000;  }
.sponge-layout-imgaes-main-tabs ul.nav-tabs > li > a > span.main-new-btn{ border-radius:20px !important; font-size:60% !important;}

a.main-more-icon{position:absolute; right:0; top:35px; color:#848282; line-height:30px; background-color:#fff;  font-weight:500; font-size:30px; text-align:center; color:#585858; font-family:돋움; }
a.main-more-icon span{ font-family:'돋움'; }
.sponge-layout-main-board a.main-more-icon{ top:5px; }


.sponge-layout-main-booklist-bottom{ padding:0 0 0 0; width:100%;background-color:#fff; }

/*.sponge-layout-main-booklist-bottom > div{width:100%; margin:0 auto; padding:80px 0; }
.sponge-layout-main-booklist-bottom .nav-tabs{text-align:center; margin-bottom:50px; }
.sponge-layout-main-booklist-bottom .nav-tabs > li{ float:none; display:inline-block;}
.sponge-layout-main-booklist-bottom .nav-tabs > li > a{ font-size:36px; display:block; padding:0 0 0 0; text-align:center; border-width:0; background-color:transparent; font-weight:500; }
.sponge-layout-main-booklist-bottom .nav-tabs > li > a > span{position:relative; display:inline-block;  text-align:center; width:185px; height:45px;}
.sponge-layout-main-booklist-bottom .nav-tabs > li > a > span > span{position:absolute; width:100%; left:0;  z-index:3; color:#000;}
.sponge-layout-main-booklist-bottom .nav-tabs > li > a > span > i{ content:''; display:block; width:100%; position:absolute; height:9px; background-color:transparent;  z-index:1; bottom:0; }
.sponge-layout-main-booklist-bottom .nav-tabs > li.active > a{ border-width:0; background-color:transparent; }
.sponge-layout-main-booklist-bottom .nav-tabs > li.active > a > span > i{ background-color:#014099; }*/




/* e-Learning */
.sponge-layout-banner{ position:relative; width:1440px; margin:50px auto; }

.sponge-layout-banner > div > h2 > span{ width:200px; }
.sponge-layout-main-booklist-bottom .sponge-layout-banner > div .nav-tabs > li > a > span{ width:250px; }
.sponge-layout-banner > div a.main-more-icon{position:absolute; right:0; top:-15px; }
.sponge-layout-banner .sponge-main-book > ul > li > div > div, .sponge-layout-banner .sponge-main-book > ul > li > div > div > ul, .sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li{height:320px;}
.sponge-layout-banner .sponge-main-book > ul > li > div > div{ margin:0 30px; }
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul{ padding-top:50px; text-align:left; }
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li{  width:275px !important; }
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a{ width:265px;  height:auto; background-image:none; padding:0px; position:relative; display:block; overflow:hidden; font-size:20px;  }
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a > i{width:265px; height:184px; display:block;  overflow:hidden;box-shadow:0px 5px 4px 2px rgba(0, 0, 0, .05); margin-bottom:25px;}
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a > i > img{ width:265px; height:184px; object-fit:cover; display:block;  transition-duration: 0.9s, 0s;}
/*.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a:hover > i > img{ width:285px; height:198px; margin-left:-10px; margin-top:-7px; }*/
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a > span{  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; display:block; }
.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a > span > span{ font-size:85%; opacity:0.6; }
/*.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a > span::after{ content:'>'; font-family:'굴림'; margin-left:10px; font-size:11px; vertical-align:middle;}*/


/*.sponge-layout-banner .sponge-main-book > ul > li > div > div > ul > li > a:hover > img{  box-shadow:0px 10px 10px 2px rgba(0, 0, 0, .2); }*/

.sponge-layout-banner .sponge-main-book ul > li.active .btns{top:120px; }


/* 신착도서 -----------------f------------------------------------------------------------------------------------------------------------------------*/  

.sponge-layout-newbook{padding:0 0;  }

.sponge-layout-newbook > div .title{ padding:0;}
.sponge-layout-newbook > div h3{ font-size:30px; display:block; padding:0 0 0 0; border-width:0; background-color:transparent; font-weight:500; color:#fff;}



.sponge-layout-newbook a.main-more-icon{ right:0px; top:-65px;}

.sponge-layout-newbook > .row{ width:1440px; margin:0 auto; padding:0; }
.sponge-layout-newbook > .row > .col-md-6{ width:48%; margin:0; padding:0; }
.sponge-layout-newbook > .row > .col-md-6:last-child{ float:right; }
.sponge-layout-newbook .sponge-main-book{box-sizing: border-box; }

.sponge-main-book > ul{ padding-top:0px; }
.sponge-main-book > ul > li{width:100%; position:relative;}
.sponge-main-book > ul > li > div{width:100%; }
.sponge-main-book > ul > li p.noData{display:none;position:absolute;top:100px;left:25px;}
.sponge-main-book > ul > li.active p.noData{display:block}
.sponge-main-book > ul > li.active > div{display:block}
.sponge-main-book > ul > li> h2 a:before{content: '';opacity: 0;display: block;position: absolute;top: 0;right: 50%;left: 50%;height: 3px;background-color: #06603c;transition: right 0.25s ease, left 0.25s ease, opacity 0.25s ease;}
.sponge-main-book > ul > li.active > h2 a:before{left: 0;right: 0;opacity: 1;}
.sponge-main-book > ul > li > div > div{position:relative;height: 230px;margin:0 10px;overflow:hidden;z-index:10; /*width:100%;*/ }
.sponge-main-book > ul > li > div > div > ul{ }

/*.sponge-main-book > ul > li > div > div > ul > li{float:left; width:146px !important; height:190px; overflow:hidden; transform: translateY(0);transition: transform 0.25s ease; padding:0 5px;}
.sponge-main-book > ul > li > div > div > ul > li:hover{transform: translateY(-7px);}
.sponge-main-book > ul > li > div > div > ul > li a{display:inline-block; width: 100%; text-align:center;}
.sponge-main-book > ul > li > div > div > ul > li a img{ width: 119px; height: 171px; border:1px solid #999;}
.sponge-main-book > ul > li > div > div > ul > li a span{display:none;color:#424242;text-align:center;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis; margin-top:10px; }
.sponge-main-book > ul > li > div > div > ul > li a span.writer{display:block;color:#acacac;text-align:center;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}*/

.sponge-main-book > ul > li > div > div > ul{ position:absolute;top: 0;left:0;width:100%;padding-top: 10px; height:230px; overflow:hidden; text-align:center; width:1440px !important;}
.sponge-main-book > ul > li > div > div > ul > li{ display:inline-block; width:178px !important; height:230px; padding:0 0% 0 0; margin:0px;  text-align:left;}
.sponge-main-book > ul > li > div > div > ul > li > a{ width:147px;  height:202px; background: url('/klib/Users/Gbklib/Images/main/bookBglogo.png') no-repeat; padding:0px; position:relative; display:block; overflow:hidden; word-break:keep-all; }
.sponge-main-book > ul > li > div > div > ul > li > a > img{ width:138px; height:202px; border:1px solid #c6c6ca; transition: all 0.4s; transform-origin: left top;}
.sponge-main-book > ul > li > div > div > ul > li > a:hover > img{ }

.sponge-layout-newbook .sponge-main-book > ul > li > div > div > ul > li > a > span{ word-break:keep-all; overflow:hidden; display:none; position:absolute; width:138px; height:202px; padding:0 5px; background-color:rgba(0,63,153, 0.7); top:0; text-align:center; font-weight:400; color:#fff; }
.sponge-layout-newbook .sponge-main-book > ul > li > div > div > ul > li > a:hover > span{ display:table; animation-name:top; animation-duration:1s; -webkit-animation-name:top; -webkit-animation-duration:1s;}
.sponge-layout-newbook .sponge-main-book > ul > li > div > div > ul > li > a:hover > span > span{ display:table-cell; vertical-align:middle; }



.sponge-main-book ul > li .btns{display:none; position:absolute; top:85px; left:0}
.sponge-main-book ul > li.active .btns{display:block}
.sponge-main-book .btns a{position:absolute;top:0;display: block; transition:background 0.25s ease; z-index:2000; font-family:'나눔고딕'; color:#fff; font-size:30px; }
.sponge-main-book .btns a span.glyphicon{ color:#c9c9c9; font-size:20px;}
.sponge-main-book .btns a:hover span.glyphicon{ color:#86aedb; }
.sponge-main-book .btns a.prev{right: 00px;}
.sponge-main-book .btns a.next{left: 0px;}


@keyframes top
{
from {top:245px; opacity:0;}
to   {top:0; opacity:1; }
}
.sponge-layout-newbook .sponge-main-book > ul{ padding:20px 0;}
.sponge-layout-newbook .sponge-main-book > ul > li > div > div{ margin:0 20px; }
.sponge-layout-newbook .sponge-main-book > ul > li > div > div > ul{ text-align:left; width:1440px !important; padding-left:0;}
.sponge-layout-newbook .sponge-main-book > ul > li > div > div > ul > li{ width:159px !important; }
.sponge-layout-newbook .sponge-main-book .btns a img{ filter: invert(0%); }



a.main-more-icon:hover{ color:#014099; }


.sponge-main-intro{ background: url('/klib/Users/Gbklib/Images/main/sponge-main-intro.jpg') no-repeat center 31px; background-size:cover;  width:100%;}
.sponge-main-intro > div{ width:1440px; margin:0 auto; background: url('/klib/Users/Gbklib/Images/main/sponge-main-intro-logo.png') no-repeat right top; height:511px; color:#fff; font-size:36px; padding-top:170px; }


/* Copyright */
.sponge-footer{ width:100%;padding:0 0; background-color:#fff; }
footer{ border-top:1px solid #ddd; background-color:#fff; }
.sponge-layout-main-background footer{ border-top:1px solid #ececec;  margin-top:0;}
.sponge-layout-footer-banner {  width:100%; margin:0px auto 0px auto; background-color:#fff; }

.sponge-layout-footer-banner h3 { float:left; }
.sponge-layout-footer-banner > ul  { vertical-align:top; margin:0 auto;  width:1440px; text-align:center; height:96px; margin-bottom:0; padding-top:25px;}
.sponge-layout-footer-banner > ul > li { display:inline-block; margin:0 0 0 0; float:left; padding:0 36px;vertical-align:top;}
.sponge-layout-footer-banner > ul > li:first-child { padding-left:0; }
.sponge-layout-footer-banner > ul > li:last-child { padding:0;  float:right; }
.sponge-layout-footer-banner  nobr > a{  display:inline-block; padding:0 0; margin:0 20px; }  

.sponge-layout-footer-banner li a:hover, .sponge-layout-footer-banner li a:focus{ opacity:0.8; }

.sponge-layout-footer{ padding:0 0 ; color:#fff;  width:100%; background-color:#3d3d3d; }
.sponge-layout-footer > *{ padding:50px 0; margin:0 auto; width:1440px; }
.sponge-layout-footer > div:first-child{ border-bottom:1px solid rgba(255, 255, 255, .4); }
.sponge-layout-footer > div.sponge-layout-footer-logo {display:none; }
.sponge-layout-footer > div.sponge-layout-footer-logo a{ background:transparent url('/klib/Users/Gbklib/Images/main/sponge-logo-white2.png') no-repeat left top; /*filter: brightness(0) invert(1);*/ width:280px; height:50px;}
.sponge-layout-footer p{ margin:0px; }
.sponge-layout-footer a{ color:#fff; }
.sponge-layout-footer > .sponge-layout-footer-address{ color:#fff;  line-height:40px;}
.sponge-layout-footer > .sponge-layout-footer-address > p > a{margin-right:30px;}
.sponge-layout-footer > .sponge-layout-footer-address > p > a:first-child{ font-weight:500; color:#fee25e; }

.sponge-layout-footer a:hover{ opacity:0.8; }

/* ----------content "퀵메뉴 quick" to center the layout-------- */	 
#sponge-layout-content-container-quick{float:right; display:inline; position:fixed; top:273px; width:auto; padding-left:30px; z-index:0; transition-duration: 3.9s, 0s;}	
#scrollNavOver #sponge-layout-content-container-quick{ top:188px; }	
#quickMenu{width:auto; }
.sponge-top-btn{border:1px solid #bebebe; font-weight:500;width:auto; height:30px; padding:5px 8px; display:block; color:#3f3f3f; text-align:center;margin:1px 0;
                text-shadow: 3px 3px 3px #fff; background-color:#fff; background:#fff linear-gradient(#fff 40%, #ddd ) !important; line-height:5px; line-height:-1.5px; -webkit-text-size-adjust:none !important; font-size:13pt !important; 
 }



.sponge-layout-content-container-leftmenu{ padding-top:0px; width:273px; position:fixed; transition-duration: 3.9s, 0s; top:273px;background-color:#fff; border-radius:0 0 2px 2px; z-index:100; }
#scrollNavOver .sponge-layout-content-container-leftmenu{ top:188px; }


.sponge-layout-content-container-rightcontent{ min-height:600px;}


.introGuide{ width:100%; color:#000; padding:0 0 0 0; font-size:130%; font-weight:500; word-break:keep-all;  line-height:40px; text-shadow: 1px 1px 0.5px #fff;}
.introGuide p{ margin-bottom:30px;}
.introGuide strong{ font-size:140%; }
.introGuide strong span{ color:#00448f; }

.sponge-page-guide ul.sponge-detail-list > li{ font-size:unset;}


/*찾아오시는길*/
.root_daum_roughmap.root_daum_roughmap_landing{ width:100%; }

#comeToUsMap{height:400px;z-index:3; position:absolute; top:0; width:1123px;  top:110px; left:auto;}


	.location_info{background-color: rgba( 0, 96, 91, 0.7 );color:#FFF;text-align:center;padding:0 15px;position:absolute;z-index:2;width:100%;bottom:0;}
	.location_info span{display:inline-block;padding:15px 0 15px 30px;}
	.location_info span.address{background:url(/klib/Users/Gbklib/Images/sub/location_01.png) left no-repeat;margin-right:30px;}
	.location_info span.telephone{background:url(/klib/Users/Gbklib/Images/sub/location_02.png) left no-repeat;}

	@media only screen and (max-width:580px){
		
		.location_info{text-align:left;padding:10px 15px;}
		.location_info span{display:block;padding:5px 0 5px 25px;background-size:15px !important;}
.location_trans{ display:none;}
	}
    #comeToUsMap .root_daum_roughmap{ position:absolute; width:100%;}
	.location_trans{border-top:4px solid #00733f;}
	.location_trans .location_trans_wrap{overflow:hidden;border-bottom:1px solid #787878;padding:30px 10px;}
    .location_trans > .location_trans_wrap:last-child{ border-bottom-width:0; }
	.location_trans h3{float:left;width:103px;text-align:center;padding-top:120px;}
	.location_trans h3.train{background:url(/klib/Users/Gbklib/Images/sub/location_03.png) center top no-repeat;}
	.location_trans h3.bus{background:url(/klib/Users/Gbklib/Images/sub/location_04.png) center top no-repeat;}
	.location_trans dl{float:left;margin-left:5%;overflow:hidden;width:80%;}
	.location_trans dl dt,
	.location_trans dl dd{float:left;margin-bottom:25px;}
	.location_trans dl dt{font-weight:500;clear:both;width:12.5%;}
	.location_trans dl dd{width:80%;position:relative;padding-left:15px;background:url(/klib/Users/Gbklib/Images/sub/bul_09.png) 0 6px no-repeat;}
	.location_trans dl dd span{font-size:0.85em;position:absolute;left:50%;font-weight:500;display:inline-block;padding-left:20px;background:url(/klib/Users/Gbklib/Images/sub/location_05.png) 0 2px no-repeat;}

	.location_trans dl dd ul,
	.location_trans dl dd ol{overflow:hidden;}
	.location_trans dl dd ol li{list-style:none;}
	.location_trans dl dd ul li,
	.location_trans dl dd ol li{font-size:0.85em;float:left;background:url(/klib/Users/Gbklib/Images/sub/arrow_right_02.png) right no-repeat;padding:0 30px 0 10px;}
	.location_trans dl dd ol li:marker{display:none;}
	.location_trans dl dd ul li:first-child,
	.location_trans dl dd ol li:first-child{padding-left:0;}
	.location_trans dl dd ul li:last-child,
	.location_trans dl dd ol li:last-child{background:none;font-weight:500;color:#00733f;}
	@media only screen and (max-width:1023px){
		.location_trans dl{margin-left:2.5%;}
		.location_trans dl dd ul li,
		.location_trans dl dd ol li{width:23.3%;padding:0 5% 0 0;margin-right:5%;margin-bottom:10px;}
	}
	@media only screen and (max-width:760px){
		.location_trans h3{float:none;padding-top:80px;background-size:70px !important;margin: 0 auto 20px auto;}
		.location_trans dl{float:none;margin-left:0%;width:100%;}
		.location_trans dl dt,
		.location_trans dl dd{float:none;}
		.location_trans dl dt{margin-bottom:5px;width:100%;}
		.location_trans dl dd{margin-bottom:20px;width:auto;}
		.location_trans dl dd span{left:auto;margin-left:20px;}
	}
	@media only screen and (max-width:840px){
		.location_trans dl dd ul li,
		.location_trans dl dd ol li{width:40%;}
	}
	@media only screen and (max-width:480px){
		.location_trans dl dd span{margin-left:0;position:relative;display:block;margin-top:10px;}
	}
	.location_car{overflow:hidden;position:relative;}
	.location_carBtn{width:65%;position:absolute;right:0;top:0; overflow:hidden;}
	.location_carBtn ul{overflow:hidden;}
	.sponge-page-guide .location_carBtn ul > li{width:24%;float:left;margin:0.5%; padding:0;}
    .sponge-page-guide .location_carBtn ul > li::before{ display:none; }
	.sponge-page-guide .location_carBtn ul > li a{display:block;text-align:center;padding:8px;border:1px solid #cdcdcd;font-weight:500;}
	.sponge-page-guide .location_carBtn ul > li a:hover,
	.sponge-page-guide .location_carBtn ul > li a._active{border:1px solid #00733f;background:#00733f;color:#FFF;}
	.location_carBtn h4{width:24%;float:left;margin:0.5%;}
	.location_carBtn h4 a{display:block;text-align:center;padding:8px;border:1px solid #cdcdcd;font-weight:500;}
	.location_carBtn h4 a:hover,
	.location_carBtn h4 a._active{border:1px solid #00733f;background:#00733f;color:#FFF;}
	@media only screen and (max-width:680px){
		.location_carBtn{width:50%;}
	}
	@media only screen and (max-width:480px){
		.location_carBtn{width:100%;position:relative;right:auto;margin-bottom:20px;font-size:0.9em;}
	}
	.location_car_Wrap{overflow:hidden;}
	.location_car_Wrap .mapTitHidden{font-size:0;position:absolute;top:0;left:0;text-indent:-9999px;}
	.location_car_Wrap .location_carMap{float:left;width:30%;}
	.location_car_Wrap .location_carMap img{max-width:100%;}
	.location_car_Wrap .location_carText{float:right;width:65%;margin-top:110px;}
	.location_car_Wrap .location_carText ul{ overflow:hidden; margin-top:30px; }
	.sponge-page-guide .location_car_Wrap .location_carText ul > li{float:left;width:47%;padding-left:3%;margin-bottom:40px;font-size:0.85em;}
    .sponge-page-guide .location_car_Wrap .location_carText ul > li::before{ display:none; }
	.sponge-page-guide .location_car_Wrap .location_carText ul > li span{display:inline-block; width:11px;height:11px;background:url(/klib/Users/Gbklib/Images/sub/bul_09.png) center no-repeat; vertical-align:middle; margin-right:5px;}
	.sponge-page-guide .location_car_Wrap .location_carText ul > li:last-child{font-weight:500;color:#00733f;}
	@media only screen and (max-width:680px){
		.location_car_Wrap .location_carMap{width:45%;}
		.location_car_Wrap .location_carText{width:50%;}
	}
	@media only screen and (max-width:480px){
		.location_car_Wrap .location_carMap{float:none;width:100%;}
		.location_car_Wrap .location_carText{float:none;width:100%;margin-top:20px;}
		.sponge-page-guide .location_car_Wrap .location_carText ul > li{float:none;width:97%;margin-bottom:20px;}
	}
	.location_car_02,
	.location_car_03,
	.location_car_04,
	.location_car_05,
	.location_car_06,
	.location_car_07,
	.location_car_08{display:none;}


.kiosk-layout #sponge-header{  z-index:500;  }
.kiosk-layout-bg{background:#ffc10d; }
.kiosk-layout .container{ width:1600px; }
.kiosk-layout .sponge-header-nav{ height:130px; }
.kiosk-layout .sponge-header-nav .container{ position: relative; display: inline-block; width:100%; padding:0 50px; text-align:center;   }
.kiosk-layout .sponge-header-nav .container > *{ display: inline-block; width:42%; float:left; font-size:48px; color:#5a2515; font-weight:600; }
.kiosk-layout .sponge-header-nav .container > *:first-child{ text-align:left; width:29%;  }
.kiosk-layout .sponge-header-nav .container > *:last-child{ text-align:right; float:right; width:29%; }

.kiosk-layout .sponge-header-nav .container > * #currentTime > span{ display:inline-block; font-size:60%; vertical-align:top; padding-top:10px; margin-left:30px; }

.kiosk-layout .sponge-header-nav .container h1{ padding:45px 0;}
.kiosk-layout .sponge-header-nav .container h1 a{ background-image: url('/klib/Users/Gbklib/Images/kiosk/spong-kiosk-logo.png'); width:263px; height:45px; display:block; }

.kiosk-top-center{ padding-top:35px;}

.infoBox-kiosk{ text-align:right; padding-top:35px; }
.kiosk-layout-sub.kiosk-layout .sponge-header-nav .container > *.infoBox-kiosk > ul{ display:none; }
.infoBox-kiosk > ul > li{ float:none; display:inline-block; }
.infoBox-kiosk > ul > li > a{ padding:20px 30px; background-color:#071f60; color:#fff; font-size:48px; font-weight:600; border-radius:50px;}

.kiosk-layout .sponge-header-nav .container > *.infoBox-kiosk > div{ display:none; }
.kiosk-layout-sub.kiosk-layout .sponge-header-nav .container > *.infoBox-kiosk > div{ display:inline-block; }



.kiosk-main-guide{height:calc(100vh - 130px); display:table; text-align:center; width:100%; padding-top:30px;}

.kiosk-main-guide > *{ display:table-cell; vertical-align:middle;  text-align:center; }

.kiosk-main-date{ width:100%;  font-size:100px; line-height:180px; color:#5a2515; font-weight:600;  }
.kiosk-main-date > h1{ margin-bottom:20px;font-size:100px;}

.main-date{ font-size:130px;  }
.main-date > h1{ font-size:130px;}

.main-search{ font-size:66px;  }
.main-search > h1{ font-size:66px;}

/*.kiosk-main-date span.date, .kiosk-main-date a.date{cursor:pointer; border-radius:50px; background-color:black; color:#fff; padding:0 30px; line-height:normal; display:inline-block; vertical-align:middle; }*/

.kiosk-main-icon-guide{  text-align:center; width:100%; }
.kiosk-main-icon-guide > ul{ padding:80px 0 0 0; width:100%;  }
.kiosk-main-icon-guide > ul > li{ padding:0 50px; display:inline-block; }
.kiosk-main-icon-guide > ul > li > a{ display:block; padding-bottom:15px; color:#000; background-color:#fff; border-radius:20px; font-size:63px; font-weight:600;box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1); text-align:center; }
.kiosk-barcod .kiosk-main-icon-guide > ul > li > a{ min-width:1280px; background-color:rgba(255, 255, 255, .7); padding-top:10px;}
.kiosk-main-icon-guide > ul > li > a:hover, .kiosk-main-icon-guide > ul > li > a:focus{ background-color:rgba(255, 255, 255, .8);}

.kiosk-main-icon-guide > ul > li > a > i.icon{ display:block; width:360px; height:263px;  background:url('/klib/Users/Gbklib/Images/kiosk/main.png') no-repeat left top; margin:0 auto 0 auto; animation: 0.5s linear 1s slidein; }
.kiosk-main-icon-guide > ul > li > a > i.icon01{ background-position-x:0px;}
.kiosk-main-icon-guide > ul > li > a > i.icon02{ background-position-x:-360px; }
.kiosk-main-icon-guide > ul > li > a > i.icon03{ background-position-x:-720px; }
.kiosk-main-icon-guide > ul > li > a > i.icon04{ background-position-x:-1080px; }
.kiosk-main-icon-guide > ul > li > a > i.icon04{ background-position-x:-1446px; width:293px; height:233px;}


.kiosk-main-lend .kiosk-main-date { margin-bottom:80px; text-align:left; color:#071f60; font-size:70px; }
.kiosk-main-lend .kiosk-main-date .col-md-9{ text-align:center; }
.kiosk-main-lend .kiosk-main-date span.date{ min-width:500px; background-color:#071f60; color:#fff; padding:0px 30px 5px 30px; border-radius:78px; font-size:48px; line-height:48px; min-height:78px; }
.kiosk-main-lend .kiosk-main-date span.date > span{ color:#abc7f1; }
.kiosk-main-lend .kiosk-main-content{ padding:0; margin:0; }
.kiosk-main-lend .kiosk-main-content > div{ padding:0; margin:0; width:380px; }

.kiosk-main-lend .kiosk-main-content > div.col-md-3{ text-align:right; }
.kiosk-main-lend .kiosk-main-content > div:last-child{ width:1220px; }
.kiosk-main-lend .kiosk-main-date{ margin-bottom:50px;}
.kiosk-main-lend .kiosk-main-box{ margin:0;}
.kiosk-main-lend .kiosk-main-icon-guide{ text-align:left; }
.kiosk-main-lend .kiosk-main-icon-guide > ul{ padding:0; margin:0;}
.kiosk-main-lend .kiosk-main-icon-guide > ul > li{ padding:0;}
.kiosk-main-lend .kiosk-main-icon-guide > ul > li > a{ padding:15px 20px 35px 20px; background:rgba(255, 255, 255, .7); line-height:70px; font-size:48px; }
.kiosk-main-lend .kiosk-main-icon-guide > ul > li > a > i.icon{ margin-bottom:10px; }

.kiosk-main-box{ background-color:#fff; padding:50px; text-align:left; margin:70px 0 0 0;}
.kiosk-main-box table.hover{ border-top:1px solid #c4c4c4;}
.kiosk-main-box table.hover body tr{ border-bottom:1px solid #c4c4c4;}
.kiosk-main-box table.hover body tr:hover{ border:3px solid #114c9f; border-radius:20px;}

.kiosk-main-box form { text-align:center; padding-top:30px;}
.kiosk-main-box form .search_inputboxmain{  height:80px; width:780px; border-radius:20px; border:4px solid #0a479d; font-size:21px; padding-left:30px;}

.kiosk-main-box form .btn-main{  background:#0a479d url("/klib/Users/Gbklib/Images/kiosk/readingGlasses.png") no-repeat center center; height:80px; width:80px; border-radius:20px; margin-left:20px; }

.kiosk-search-best{position:relative; padding-top:80px; padding-bottom:20px;}
/* -------- 바로가기2 --------- ***************************************************************************************************************************************/
.kiosk-search-best h2{ font-size:50px; display:block; padding:0px 0 60px 0; text-align:center; }
.kiosk-search-best h2 > span{position:relative; display:inline-block;  text-align:center; width:300px; height:40px;}
.kiosk-search-best h2 > span > span{position:absolute; width:100%; left:0;  z-index:3; color:#000;}
.kiosk-search-best h2 > span > i{ content:''; display:block; width:100%; position:absolute; height:9px;  background-color:rgba(253,189,1, 0.48);  z-index:1; bottom:0; }

.kiosk-search-best > div{width:100%; }

.kiosk-search-best > div > div{position:relative;height: 220px;margin:0 20px;overflow:hidden;z-index:10; /*width:100%;*/ }
.kiosk-search-best > div > div > ul{ position:absolute;top: 0;left:0;width:100%;padding-top: 10px; padding-left:30px; height:220px; overflow:hidden; text-align:center; width:1440px !important;}
.kiosk-search-best > div > div > ul > li{ display:inline-block; width:175px !important; height:220px; padding:0 0% 0 0; margin:0px;  text-align:left;}
.kiosk-search-best > div > div > ul > li > a{ width:147px;  height:202px; background: url('/klib/Users/Gbklib/Images/main/bookBglogo.png') no-repeat; padding:0px; position:relative; display:block; overflow:hidden; word-break:keep-all; }
.kiosk-search-best > div > div > ul > li > a > img{ width:138px; height:202px; border:1px solid #c6c6ca; transition: all 0.4s; transform-origin: left top;}
.kiosk-search-best > div > div > ul > li > a:hover > img{ }
.kiosk-search-best > div > div > ul > li > a > span{ word-break:keep-all; overflow:hidden; display:none; position:absolute; width:138px; height:202px; padding:15px 5px; background-color:rgba(1,64,153, 0.8); top:0; text-align:center; font-weight:400; color:#fff; }
.kiosk-search-best > div > div > ul > li > a:hover > span{ display:table; animation-name:top; animation-duration:1s; -webkit-animation-name:top; -webkit-animation-duration:1s;}
.kiosk-search-best > div > div > ul > li > a:hover > span > span{ display:table-cell; vertical-align:middle; }

.kiosk-search-best ul > li .btns{display:none; position:absolute; top:85px; left:0}
.kiosk-search-best ul > li.active .btns{display:block}
.kiosk-search-best .btns a{position:absolute;top:250px;display: block; transition:background 0.25s ease; z-index:2000; font-family:'나눔고딕'; color:#fff; font-size:30px; }
.kiosk-search-best .btns a span.glyphicon{ color:#c9c9c9; font-size:20px;}
.kiosk-search-best .btns a:hover span.glyphicon{ color:#86aedb; }
.kiosk-search-best .btns a.prev{right: 10px;}
.kiosk-search-best .btns a.next{left: 10px;}

.kiosk-main-box .sponge-form-default form, .kiosk-main-box form#resultsform {padding-top:0;}
.kiosk-main-box .search-list-checkbox{ left:0; right:auto; top:3px;}

.table-striped.sponge-table-default-kiosk{ border-top-width:1px;}
.table-striped.sponge-table-default-kiosk > tbody > tr:nth-child(odd) > th{ background-color:#d5e0ec; }
.table-striped.sponge-table-default-kiosk > tbody > tr:nth-child(odd) > td{ background-color:#fff; }


.page-search-list-kiosk .search-list-result{ border-top-color:#ddd; }
.page-search-list-kiosk .sponge-list-title a{ font-size:120%; }
.page-search-list-kiosk .search-left-refine{border-radius:0; border-color:#909090;}
.page-search-list-kiosk .page-refine-title{ background-color:#d5e0ec; border-color:#909090; padding:7px 10px;  }
.page-search-list-kiosk .page-refine-title .fa.fa-angle-down{ margin-left:5px; }
.page-search-list-kiosk .page-refine-sub-title{ font-size:90%; background-color:#d5e0ec; border-color:#909090; width:100%; border-width:0; border-top-width:1px; margin:0;}
.page-search-list-kiosk .page-refine-title + .page-refine-sub-title{ border-top-width:0px;}
.page-search-list-kiosk .search-left-refine ul{ font-size:90%;}


a.go-to-previous-page{ display:block;  background-color:transparent; border-width:0; vertical-align:middle; font-size:60px; color:#5a2515; font-weight:600; margin:40px auto 0 auto; }
a.go-to-previous-page > i{ background: url('/klib/Users/Gbklib/Images/kiosk/close.png') no-repeat center center; width:98px; height:98px; display:inline-block; border-radius:50%; border:2px solid #5a2515; vertical-align:middle; }
a.go-to-previous-page > span{ display:none;}

.kiosk-layout-sub.kiosk-layout .sponge-header-nav .container > *.infoBox-kiosk > div a.go-to-previous-page{position:absolute;  left:auto; right:50px; top:20px; margin:0;}
.kiosk-layout-sub.kiosk-layout .sponge-header-nav .container > *.infoBox-kiosk > div a.go-to-previous-page > span{ display:none;}




.kiosk-layout .modal-dialog{ margin-top:15%;}

/*Sponge.Common.css URL 다시 정의 */
select.form-control, select { background:#fff url('/klib/sponge/Images/Arrow/select-arrow.png') no-repeat center right !important; /* 화살표 모양의 이미지 */ }
.sponge-page-guide .sponge-detail-book.sponge-detail-book-best > ul > li > div > div > ul > li {	
	background: url('/klib/Sponge/Images/background/sponge-detail-book-best.png') no-repeat center top !important;	
}



/* 스크롤 스타일 정의 */ 
.tableFixHead {
  overflow-y: auto;
  height: 432px;
border-top:1px solid #909090 !important;

}


/* Just common table stuff. */

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
margin-bottom:0;
border-top-width:0;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

.tableFixHead th {
  background: #eee;
  border-top-width:0 !important;
}


.sponge-custom-loading{position:fixed;top:0; left:0; right:0; bottom:0;  background-color:rgba(0,0,0,.5); text-align:center; margin:auto; overflow:hidden; z-index:1999;}
.sponge-custom-loading > div.sponge-custom-loading-text{position:absolute; top:580px; width:100%; text-align:center; font-size:24px; color:#fff;}

.sponge-spin-body-bg{position:relative;}
.sponge-spin-body{position:absolute; left:0; top:0; bottom:0; right:0; padding-top:230px; width:100%; text-align:center; min-height:532px; font-size:20px; background-color:rgba(0,0,0,.3); color:#fff;}
.sponge-spin {
    margin:20px;
    color:#1c71ba;
    font-size:40px;
    animation-name: sponge-spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes sponge-spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

#tiles li > div.list > a > .img-pictureboard{ height:271px; }
#tiles li > div.list > a > .img-pictureboard img.photo_img{object-fit:cover; height:271px;}