@charset "utf-8";
/****************************************/
/* Name: 금샘도서관
/* PART: LAYOUT STYLE 
/* Version: 1.0 / day: 2021-07-13
/* Author: imtec 
/****************************************/

/*
=========================================================================
pc 레이아웃 css
=========================================================================
*/

#header .head_box .logo a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}

#wrapper{position:relative;min-width:320px;width:100%;height:100%;right:0;z-index:300}
#wrapper.shadow_device::after{position:fixed;top:0;left:0;width:100%;height:100%;content:'';background:rgba(0,0,0,0.3);z-index:90;}

/* ---- 상단영역 ---- */
#header{position:fixed;top:0;left:0;min-width:320px;padding:0 40px;width:100%;font-family: 'GmarketSans';overflow:hidden;background:#fff;z-index:100}
#header::after{position:absolute;top:0;left:0;width:100%;height:50px;content:'';background:#ececec}
#header.online::before{position:absolute;left:0;top:160px;width:100%;height:100%;content:'';background:#f7f7f7;border-top:1px solid #d8d8d8}
#header.fix{border-bottom:1px solid #e1e1e1}

#header .head_box{position:relative;margin:0 auto;max-width:1400px;min-height:160px;z-index:200}
#header .head_box .logo{position:absolute;top:94px;left:0;z-index:20}
#header .head_box .logo a{display:block;}
#header .head_box .top_glob{position:relative;padding-top:5px}
#header .head_box .top_glob .btnGo{display:none}
#header .head_box .top_glob ul li{position:relative;display:inline-block;}
/*#header .head_box .top_glob ul li::after{position:absolute;top:50%;left:0;margin-top:-3px;width:5px;height:5px;content:'';background:#bfbfbf;border-radius:50%}*/
#header .head_box .top_glob ul li:first-child::after{display:none}
#header .head_box .top_glob ul li a{display:block;width:160px;font-size:15px;color:#555;line-height:45px;text-align:center}
#header .head_box .top_glob ul li.on a{color:#000;background:#fff;border-radius:8px 8px 0 0}
#header .head_box .top_glob ul li.on + li::after{display:none}
#header .head_box .top_glob .btn{position:absolute;top:0;right:0}
#header .head_box .top_glob .btn a{display:block;padding-left:30px;line-height:50px;color:#555;background:url('/img/gslib/ic_gl.png') no-repeat left 15px}

#header .btnSiteMap{position:absolute;top:85px;right:0;}
#header .btnSiteMap a{display:block;width:40px;height:40px;text-indent:-999px;overflow:hidden;background:url('/img/gslib/ic_menu.png') no-repeat center center}

#header .head_box .btnMenu{display:none}

#gnb{position:relative;padding:0 60px 0 0;overflow:hidden;}
#gnb ul.gnb{float:right;height:85px;overflow:hidden;text-align:left;z-index:20}
#gnb > ul:after{display:block;clear:both;content:''}
#gnb > ul > li{float:left;}
#gnb > ul > li > a{position:relative;display:block;padding:0 50px;height:110px;font-size:20px;color:#000;line-height:110px;text-decoration:none}
#gnb > ul > li > a::after{position:absolute;top:50%;left:0;margin-top:-4px;width:15px;height:0;content:'';border-top:1px solid #c1c1c1;transform:rotate(-45deg)}
#gnb > ul > li > a:focus{border:1px solid #111;}
#gnb > ul > li:first-child > a::after{display:none}
#gnb > ul > li > a span{position:relative;display:inline-block;padding-bottom:10px;line-height:1}
#gnb > ul > li > a span::after{position:absolute;bottom:0;left:50%;width:0;height:2px;content:'';background:#000;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#gnb > ul > li.open > a span::after,
#gnb > ul.on > li.hv > a span::after,
#gnb > ul.on > li.on > a span::after,
#gnb > ul.on > li > a:hover span::after{left:0;width:100%;}
#gnb > ul > li.hv .subMenu{z-index:1;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#gnb > ul > li .subMenu{position:absolute;top:110px;left:0;padding:35px 10px 30px 40px;width:20%;min-height:560px;border-right:1px solid #dedede}
#gnb > ul > li:nth-child(1) .subMenu{left:0;border-left:1px solid #dedede}
#gnb > ul > li:nth-child(2) .subMenu{left:20%;}
#gnb > ul > li:nth-child(3) .subMenu{left:40%;}
#gnb > ul > li:nth-child(4) .subMenu{left:60%;}
#gnb > ul > li:nth-child(5) .subMenu{left:80%;}
#gnb > ul > li  .subMenu h2{position:relative;margin-bottom:30px;font-size:22px;color:#000;line-height:1;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:2}
#gnb > ul > li  .subMenu > ul{position:relative;z-index:2}
#gnb > ul > li  .subMenu > ul li{margin-bottom:7px;}
#gnb > ul > li  .subMenu > ul li a{display:inline-block;padding:4px 0;font-size:15px;color:#555;line-height:1.1;border-bottom:1px solid transparent;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#gnb > ul > li  .subMenu > ul li a:hover,
#gnb > ul > li  .subMenu > ul li.on a{text-decoration:none;border-bottom-color:#fff}
#gnb > ul > li  .subMenu > ul li ul{display:none}
#gnb > ul > li.hv .subMenu h2{color:#fff;font-weight:400;}
#gnb > ul > li.hv .subMenu > ul li a{color:#fff;font-weight:400;}

#gnb_sub_bg{position:absolute;top:110px;left:0;width:20%;height:110%;background:#3e5799;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;}



/* ---- 중간영역 ---- */
#container{position:relative;padding-top:160px;height:100%}
#container #content{position:relative;margin:0 auto;min-height:500px;overflow:hidden}
#container #content::after{display:block;clear:both;content:''}
#subContainer{position:relative;padding-top:420px;padding-bottom:80px;height:100%}
#subContainer .subConBox{margin:0 auto;padding:0 20px;max-width:1440px}
#subContainer .subConBox::after{display:block;clear:both;content:''}
#subContainer .subConBox #sideMenu{float:left;width:20%;max-width:280px}
#subContainer .subConBox #content{float:right;width:76%;max-width:1060px;min-height:300px}


#sideMenu{padding-bottom:100px;font-family: 'GmarketSans';}
#sideMenu h2{margin-bottom:30px;font-size:30px;color:#3e5799;line-height:1;}
#lnb li{position:relative;font-size:16px;}
#lnb li a{position:relative;display:block;word-break: keep-all;}
#lnb > ul > li{margin-top:-1px}
#lnb > ul > li > a{display:block;font-size:18px;color:#333;padding:19px 30px;text-decoration:none;background-color:#fff;border:1px solid #d8d8d8;background-repeat:no-repeat;background-position: right 20px top 23px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#lnb > ul > li:first-child {border-top:3px solid #3e5996;}
#lnb > ul > li:first-child > a {border-top:0;}
#lnb > ul > li.has-sub > a{background-image:url('/img/gslib/ic_lnb_dot1.png')}
#lnb > ul > li.on > a,
#lnb > ul > li > a:hover,
#lnb > ul > li.open > a:hover{color:#fff;background-color:#3e5799;border-color:#3e5799;text-decoration:none}
#lnb > ul > li.has-sub.open > a{color:#fff;background-color:#3e5799;border-color:#3e5799;background-image:url('/img/gslib/ic_lnb_dot2.png');background-position:right 20px top 28px}
#lnb > ul > li > ul{display:none;padding:15px 30px;background:#f5f6fa;border:1px solid #d8d8d8;border-width:0 1px 1px}
#lnb > ul > li > ul > li{position:relative;margin:5px 0}
#lnb > ul > li > ul > li::before{position:absolute;top:7px;left:0;width:4px;height:4px;content:'';background:#686868;border-radius:50%}
#lnb > ul > li > ul > li > a{display:block;padding-left:10px;color:#555}
#lnb > ul > li > ul > li.on > a{color:#000;text-decoration:underline}
#lnb > ul > li .blank::after{display:inline-block;margin-left:8px;width:13px;height:13px;content:'';background:url('/img/gslib/ic_blank.png') no-repeat}

.subVisual{position:absolute;top:160px;left:0;padding:0 20px;width:100%;background:url('/img/gslib/sub_skin.jpg') no-repeat center top;background-size:cover}
.subVisual .svbox{position:relative;margin:0 auto;padding-top:70px;max-width:1400px;height:200px;text-align:center}

.subVisual .svbox .location{margin-bottom:20px}
.subVisual .svbox .location li{position:relative;display:inline-block;margin-right:15px;padding-right:10px;color:#666;vertical-align:middle}
.subVisual .svbox .location li::before{position:absolute;top:50%;right:-5px;margin-top:-3px;width:7px;height:7px;content:'';border:1px solid #292e42;border-width:1px 1px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.subVisual .svbox .location li:last-child::before{display:none}
.subVisual .svbox .location li:last-child{color:#333;font-weight:bold; margin-right:0; padding-right:0;}
.subVisual .svbox .location li.home a{display:block;width:14px;height:13px;text-indent:-999px;overflow:hidden;background:url('/img/gslib/ic_home.png') no-repeat center center;}
.subVisual .svbox .btnPrint{position:absolute;bottom:20px;right:0}
.subVisual .svbox .btnPrint a{display:block;width:36px;height:36px;text-indent:-999px;overflow:hidden;background:#fff url('/img/gslib/ic_print.png') no-repeat center center;border-radius:50%;}

/* ---- 하단영역 ---- */
#footer {position:relative;padding:60px 30px;width:100%;background:#383a4a}
#footer .footBox{position:relative;margin:0 auto;padding-left:280px;max-width:1400px;}
#footer .footBox .foot_logo{position:absolute;top:-15px;left:0;}
#footer .footBox .foot_menu{margin-bottom:25px;font-family: 'GmarketSans';text-align:left}
#footer .footBox .foot_menu li{position:relative;display:inline-block;margin-bottom:5px}
#footer .footBox .foot_menu li::before{position:absolute;top:50%;left:-2px;margin-top:-3px;width:5px;height:5px;content:'';background:#bfbfbf;border-radius:50%}
#footer .footBox .foot_menu li:first-child::before{display:none}
#footer .footBox .foot_menu li:first-child a{padding-left:0;}
#footer .footBox .foot_menu li a{display:block;padding:0 25px;color:#fff}
#footer .footBox address{display:block;margin-bottom:5px;font-size:15px;color:#fff;opacity:0.6}
#footer .footBox address span{margin:0 20px}
#footer .footBox p{margin-bottom:20px;font-size:15px;color:#fff;opacity:0.6}
#footer .footBox small{font-size:15px;color:#fff;opacity:0.6}
#footer .footBox .botBtTop{position:absolute;top:-60px;right:0;padding-top:45px;width:100px;height:100px;font-family: 'GmarketSans';font-size:13px;color:#fff;background:#3e5799 url('/img/gslib/ic_top.png') no-repeat center 29px;z-index:300}


#mGnb{display:none;}


/*
=========================================================================
반응형 레이아웃 css
=========================================================================
*/

 /* PC Device */
@media all and (max-width:1500px){
	
	
	
}

@media all and (max-width:1250px){
        #gnb > ul > li > a {padding: 0 38px;}
}

 /* PC / TABLET Device */
@media all and (min-width:641px){
	
	#header .head_box .top_glob ul{display:block !important}

}

 /* PC Device */
@media all and (min-width:1201px){
	
	
	#mGnb{display:none;}


}

 /* TABLET Device */
@media all and (max-width:1200px){
	
	#header{padding: 0 20px;overflow:initial}
	
	#header .head_box .btnMenu{display:block;position:absolute;right:-20px;top:50px;width:110px;height:110px;text-indent:-999px;overflow:hidden;background:url('/img/gslib/ic_menu.png') no-repeat center center;z-index:110}

	#header .btnSiteMap{display:none}
	#gnb{display:none}

	/* 모바일메뉴 */
	#mGnb{display:block !important;position:fixed;top:0;right:-100%;width:100%;height:100%;font-family:'Nanum Gothic';background:#fff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;border-top:1px solid #e1e1e1;z-index:500}
	#mGnb::after{position:absolute;top:0;left:0;width:100%;height:70px;content:'';background:#3e5799;z-index:1}
	#mGnb .mbHome{position:relative;padding:0 10px;z-index:2}
	#mGnb .mbHome a{display:block;width:70px;height:70px;text-indent:-999px;overflow:hidden;background:url('/img/gslib/ic_mb_home.png') no-repeat center center;}
	#mGnb .mGnb{position:relative;width:100%;height:calc(100% - 70px);background:#fff;}
	#mGnb .mGnb::before{position:absolute;top:0;left:0;width:40%;height:100%;content:'';background:#2a313e}
	#mGnb .mGnb > li{width:40%;}
	#mGnb .mGnb > li > a{position:relative;display:block;padding:0 30px;font-size:17px;color:#fff;font-weight:bold;line-height:55px;background:#2a313e;border-bottom:1px solid rgba(255,255,255,0.1);z-index:2}
	#mGnb .mGnb > li > a > span{display:inline-block;line-height:1.2;vertical-align:middle}
	#mGnb .mGnb > li.on > ul{display:block}
	#mGnb .mGnb > li.open > a{position:relative;display:block;color:#3e5799;font-weight:bold;background:#fff;text-decoration:none;z-index:3}
	#mGnb .mGnb > li > ul{display:none;position:absolute;top:0;left:40%;padding:0 30px;width:60%;height:calc(100vh - 70px);overflow:auto;}
	#mGnb .mGnb > li > ul > li{position:relative;border-top:1px solid #e5e5e5}
	#mGnb .mGnb > li > ul > li:first-child{border-top:0}
	#mGnb .mGnb > li > ul > li > a{position:relative;display:block;padding:15px 15px;font-size:17px;color:#555;text-decoration:none;}
	#mGnb .mGnb > li > ul > li > a:hover,
	#mGnb .mGnb > li > ul > li.on > a,
	#mGnb .mGnb > li > ul > li.open > a{color:#06377b;font-weight:bold;}
	#mGnb .mGnb > li > ul > li.has-sub > a::after{position:absolute;top:50%;right:0;margin-top:-1px;width:15px;height:0;content:'';border-top:2px solid #2a313e;}
	#mGnb .mGnb > li > ul > li.has-sub > a::before{position:absolute;top:50%;right:6px;margin-top:-8px;width:0;height:16px;content:'';border-left:2px solid #2a313e;}
	#mGnb .mGnb > li > ul > li.open > a::after{border-color:#294baa}
	#mGnb .mGnb > li > ul > li.open > a::before{display:none}
	#mGnb .mGnb > li > ul > li.on > ul{display:block}
	#mGnb .mGnb > li > ul > li > ul{display:none;padding:10px 20px;background:#f7f7f7;border-top:3px solid #3e5799}
	#mGnb .mGnb > li > ul > li > ul > li{position:relative;}
	#mGnb .mGnb > li > ul > li > ul > li > a{position:relative;display:block;padding:5px 10px;font-size:15px;color:#555;text-decoration:none;}
	#mGnb .mGnb > li > ul > li > ul > li > a::before{position:absolute;top:13px;left:0;width:3px;height:3px;content:'';background:#9d9ea6;}
	#mGnb .mGnb > li > ul > li > ul > li.open > a,
	#mGnb .mGnb > li > ul > li > ul > li.on > a,
	#mGnb .mGnb > li > ul > li > ul > li > a:hover{color:#333;font-weight:bold}
	#mGnb .mGnb > li > ul > li > ul > li > a:hover::before{background:#383a4a}
	#mGnb .mGnb > li > ul > li > ul > li.on > ul{display:block}
	#mGnb .mGnb > li > ul > li > ul > li > ul{display:none;padding:5px 15px;background:#f2f6fb;}
	#mGnb .mGnb > li > ul > li > ul > li > ul li a{position:relative;display:block;padding:2px 10px;font-size:15px;color:#636363;text-decoration:none;}
	#mGnb .mGnb > li > ul > li > ul > li > ul li a::before{position:absolute;top:3px;left:0;content:'-'}
	#mGnb .mGnb > li > ul > li > ul > li > ul li.on a{color:#252525}
	#mGnb.on{right:0}

	#mGnb .btnMenuClose{display:block;position:absolute;top:0;right:0;width:70px;height:70px;text-indent:-999px;overflow:hidden;z-index:20}
	#mGnb .btnMenuClose span{position:relative;display:block;margin:0 auto;width:30px;height:2px;background:transparent}
	#mGnb .btnMenuClose span::before{position:absolute;top:0;left:0;width:100%;height:2px;content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background:#fff;}
	#mGnb .btnMenuClose span::after{position:absolute;top:0;left:0;width:100%;height:2px;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);background:#fff;}

	.fix_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:200}
	#wrapper.wra_box{position:fixed;top:0;width:100%;height:auto;z-index:200;}

	/*#subContainer .subConBox{padding-bottom:100px}*/
	#subContainer .subConBox #sideMenu{display:none}
	#subContainer .subConBox #content{float:none;width:100%}
	
	#footer{padding:40px 30px 70px}
	#footer .footBox{padding-left:0}
	#footer .footBox .foot_logo{position:relative;top:0;margin-bottom:40px}
	#footer .footBox .botBtTop{top:-40px;right:0;;z-index:999}
	
}


 /* Mobile Device */
@media all and (max-width:640px){
	
	body,
	table{font-size:14px;line-height:1.3}
	textarea, select, input, button{font-size:13px;line-height:1.3}
	
	#header{padding:0;}
	#header:after{display:none}
	#header .head_box{min-height:130px}
	#header .head_box .logo{top:74px;left:20px;width:177px;}
	#header .head_box .top_glob{padding-top:0;height:40px;background:#2f3041}
	#header .head_box .top_glob .btnGo{position:relative;display:block;float:left;width:50%;height:40px; font-family: 'GmarketSans';font-size:14px;color:#fff;background:url('/img/gslib/intro/ic_link.png') no-repeat 17px center;background-size:15px}
	#header .head_box .top_glob .btnGo::after{position:absolute;top:17px;right:20px;width:6px;height:6px;content:'';border:1px solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
	#header .head_box .top_glob ul{display:none;position:absolute;top:40px;left:0;width:50%;background:#fff;box-shadow:3px 3px 6px rgba(0,0,0,0.2);z-index:100}
	#header .head_box .top_glob ul li{display:block;border-bottom:1px solid #e6e6e8}
	#header .head_box .top_glob ul li a{width:auto;line-height:40px}
	#header .head_box .top_glob ul li::after{display:none}
	#header .head_box .top_glob .btn{position:relative;float:left;width:50%;text-align:center;border-left:1px solid rgba(255,255,255,0.1)}
	#header .head_box .top_glob .btn a{padding-left:0;color:#fff;line-height:40px;background-position:20px center}
	#header .head_box .top_glob .btn a::after{position:absolute;top:17px;right:20px;width:6px;height:6px;content:'';border:1px solid #fff;border-width:2px 2px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg)}

	#header .head_box .btnMenu{top:40px;right:0;width:70px;height:90px}
	
	#mGnb .mGnb::before{width:35%}
	#mGnb .mGnb > li{width:35%}
	#mGnb .mGnb > li > ul{left:35%;padding:0 20px;width:65%}
	#mGnb .mGnb > li > a{padding: 0 13px;}

	
	#lnb{display:none}

	#container{padding-top:130px}
	
	#subContainer{padding-top:270px; padding-bottom: 0;}
	#subContainer .subConBox #content{padding:40px 0 50px;min-height:200px}

	.subVisual{top:130px;background-position:64% center}
	.subVisual .svbox{padding-top: 40px;height: 140px;}
	.subVisual .svbox .location{margin-bottom:10px}
	.subVisual .svbox .location li{margin-right: 10px;padding-right: 7px;}

	.subVisual .svbox .btnPrint{display:none}

	
	#footer{padding: 30px 20px 70px;}
	#footer .footBox .foot_menu li a{padding: 0 10px;}
	#footer .footBox address span{display:block;margin:0;}
	#footer .footBox .botBtTop{top:-30px;padding-top: 30px;width: 60px;height: 60px;font-size: 12px;background-position:center 10px;}
		
}