@charset "utf-8";
/****************************************/
/* Name: 금정구 생활문화센터
/* PART: LAYOUT STYLE 
/* Version: 1.0 / day: 2020-11-10
/* Author: imtec 
/****************************************/


/*
================================================================================
메인 레이아웃
================================================================================
*/

/* ---- 상단영역 ---- */
#wrap, header, footer, #container{
	width: 100%; position: relative;
}
.head_wrap{
	position:relative;width: 100%; height: 44px; line-height: 44px;
	background: #f6f6f6; border-bottom: 1px solid #efefef;z-index:110
}
.head_box{
	width: 1200px; height: 100%;
	margin: 0 auto; overflow: hidden;
}
.famLink{
	float: left; overflow: hidden;
}
.famLink li{
	float: left;
}
.famLink li a{
	display: block; padding: 0 15px 0 40px;
	height: 100%; color: #fff; position: relative;
	font-size: 14px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;

}
.famLink li a::before{
	content: ""; display: inline-block; position: absolute;
	background-image: url(/img/culture/img_common.png);
	background-repeat: no-repeat;
}
.famLink li.ic01 a{background-color: #2768c5}
.famLink li.ic02 a{background-color: #3680d7}
.famLink li.ic03 a{background-color: #1795e9}
.famLink li.ic04 a{background-color: #009ac0}
.famLink li.ic05 a{background-color: #009ea0}
.famLink li.ic01 a:hover{background-color: #1759b7}
.famLink li.ic02 a:hover{background-color: #2d72c4}
.famLink li.ic03 a:hover{background-color: #0085dd}
.famLink li.ic04 a:hover{background-color: #008db0}
.famLink li.ic05 a:hover{background-color: #008e90}

.famLink li.ic01 a::before{
	width: 19px; height: 14px;
	top: 14px; left: 17px;
	background-position: 0 -367px;
}
.famLink li.ic02 a::before{
	width: 19px; height: 15px;
	top: 15px; left: 16px;
	background-position: -28px -367px;
}
.famLink li.ic03 a::before{
	width: 18px; height: 16px;
	top: 14px; left: 17px;
	background-position: -50px -367px;
}
.famLink li.ic04 a::before{
	width: 15px; height: 15px;
	top: 14px; left: 18px;
	background-position: -72px -367px;
}
.famLink li.ic05 a::before{
	width: 17px; height: 16px;
	top: 14px; left: 18px;
	background-position: -97px -367px;
}
.topLink{
	float: right; position: relative;
}
.topLink li{
	float: left; color: #777;
}
.topLink li a{
	display: inline-block; position: relative;
	font-size: 14px;
}
.topLink li:first-child a{
	margin-right: 22px;
}
.topLink li:first-child a::after{
	content: ""; display: inline-block; position: absolute;
	top: 20px; right: -13px;
	background-image: url(/img/culture/img_common.png);
	background-repeat: no-repeat;	
	background-position: -275px 0;
	width: 3px; height: 3px;
}

/* 상단메뉴 */
.gnboverarea{
	position:relative;
	width:100%; height:86px;background:#fff;
	border-bottom:1px solid #e8e8e8; z-index:110;
}
.gnb_wrap{
	position:relative;
	width:1200px; height:100%;
	margin:0 auto; padding-left: 350px; padding-right: 56px;
}
.gnb_wrap .top_logo{
	display: inline-block; position: absolute;
	text-indent: -9999px;
	top: 22px; left: 10px;
	background-image: url(/img/culture/logo.png);
	background-repeat: no-repeat;	
	width: 216px; height: 42px;
}
#gnb{position:relative;width:100%;height:100%; }
#gnb > ul{width:100%;}
#gnb > ul > li{
	float:left; position:relative;
	width: 25%; text-align: center;
}
#gnb > ul > li > h2{
	width: 100%; height: 100%;
	font-size:18px; display:inline-block; 
	font-weight:bold; color:#333;
	font-family: 'NanumSquare';
}
#gnb > ul > li > h2 a{display:block; width: 100%; height:100%; line-height: 86px;}
#gnb > ul > li > h2 a:hover,
#gnb > ul > li > h2 a:focus{
	color:#004ab9;
}
#gnb > ul > li > h2 > a{float:left;}
#gnb > ul > li .gnbSub{
	position:absolute; z-index:100;	
	top:86px; left:0; display:inline-block;
	width: 100%; height: 0;
	padding: 0 0 0 20px;
	overflow:hidden;
	background: #fff; 
	border-right: 1px solid #e8e8e8;
	transition:all 0.1s ease;
}
#gnb > ul > li .gnbSub.on{
	
	height: 220px;
}
#gnb > ul > li .gnbSub.on2{
	background: #f6f7f8
}
#gnb > ul > li .gnbSub li{
	width: 100%; text-align: left;
}
#gnb > ul > li .gnbSub li:first-child{margin-top:30px}
#gnb > ul > li .gnbSub li a{
	color:#323279; display:block;
	padding-left: 8px; color: #555;
	line-height: 34px; position: relative;
}
#gnb > ul > li .gnbSub li a::before{
	content: ""; display: inline-block; position: absolute;
	top: 15px; left: 0px;
	background-image: url(/img/culture/img_common.png);
	background-repeat: no-repeat;	
	background-position: -288px 0;
	width: 3px; height: 3px;
}
#gnb > ul > li .gnbSub li a:hover,
#gnb > ul > li .gnbSub li a:focus{
	color: #004ab9; text-decoration: underline;
	font-weight: bold;
}
#gnb_Bg{position:absolute;top:86px; left:0;width:100%; height:0px;
background:#fff; overflow: hidden;}
#gnb_Bg.line{border-bottom:1px solid #000}
.gnboverarea .bg_box{
	position: absolute;
	top: 0; left: 0; margin-left: -250px;
	background-color: #fff;
	width: 50%; height: 220px;
}
.gnboverarea .bg_box > span{	
	width: 350px; height: 100%;
	font-size: 25px; line-height: 30px; color: #10356d;
	position: absolute; right:0;
	padding:50px 0 0 10px;
	font-family: 'NanumSquare';
}
.gnboverarea .bg_box > span span{color:#008fca}

.gnboverarea .bg_box > span::before{
	content: ""; display: inline-block; position: absolute;
	bottom: 0; right: 0;
	background: url(/img/culture/gnb_bg.png) no-repeat right bottom;
	width: 251px; height: 221px;
}
.btn_m_search{
	width: 56px; height: 56px;
	position: absolute;
	right: 0; top: 13px;
}
.btn_m_search::after{
	content: ""; display: inline-block; position: absolute;
	top: 17px; left: 18px;
	background-image: url('/img/culture/ic_search.png');
	background-repeat: no-repeat;
	width: 20px; height: 22px;
	background-size:100%;
}

.m_search_box{
	width: 100%; height: 140px; position: absolute;
	background: #4264c4;
	display: none; z-index: 120;
}
.search_fix_bg.on{position:fixed;top:0;left:0;width:100%;height:100%;content:'';background:rgba(0,0,0,0.4);z-index:100}
.m_search_box.on{
	display: block;
}
.m_search{
	width: 550px;height: 50px;
	margin: 45px auto 0 auto;	
	border-radius: 25px; background: #fff;
	position: relative;
	overflow: hidden;
	z-index:20
}
.m_search_box .btnClose{position:absolute;left:50%;bottom:0;margin-left:-43px;width:86px;height:86px;background:#4264c4;border-radius:50%;transition:all 0.3s ease;-webkit-transition:all 0.3s ease}
.m_search_box .btnClose.on{bottom:-30px;}
.m_search_box .btnClose span{position:absolute;left:50%;bottom:16px;width:14px;height:14px;text-indent:-999px;overflow:hidden;background-image: url('/img/culture/img_common.png');background-repeat: no-repeat;background-position: -276px -14px;transform:translateX(-50%);-webkit-transform:translateX(-50%)}
form[name="serch_form"]{
	display: inline-block;
	width: 100%;height: 100%;
	padding: 0 75px 0 130px;
	position: relative;
}
form[name="serch_form"]::after{
	content: ""; display: inline-block; position: absolute;
	top: 22px; left: 100px;
	background-image: url('/img/culture/img_common.png');
	background-repeat: no-repeat;	
	background-position: -301px -22px;
	width: 11px; height: 6px;
}
.m_search_select{
	position:absolute;top:11px;left:20px;
	padding:2px 35px 2px 5px; font-weight: bold;
	-webkit-appearance: none;-moz-appearance: none; appearance: none; border:0;font-family: 'NanumSquare';
} 
.m_search_select::-ms-expand { display: none; }
.m_search input.m_search_text{
	display: inline-block;
	width: 100%; height: 100%; line-height: 50px;
	-webkit-appearance: none;-moz-appearance: none; appearance: none; border:0;
}
.m_search .btn{
	position: absolute; right: 0; top:0;
	border:none; display: inline-block;	
}
.m_search .btn::after{
	content: ""; display: inline-block; position: absolute;
	top: 13px; right: 30px;
	background-image: url('/img/culture/img_common.png');
	background-repeat: no-repeat;	
	background-position: -246px -32px;
	width: 22px; height: 24px;
}
.m_search_btn{
	width: 75px; height: 50px;
	display: inline-block;
	cursor: pointer;
	border: none;
	text-indent: -9999px;
}


/* ---- 중간영역 ---- */
#container{position:relative;background:#fff}
#container #content{position:relative;width:100%;}
#container #content::after{display:block;clear:both;content:''}
#subContainer{position:relative;margin:0 auto;padding-top:60px;width:1200px;}
#subContainer::after{display:block;clear:both;content:''}
#subContainer aside{float:left;margin-bottom:100px;width:220px}
#subContainer aside .left_title{padding-top:60px;height:160px;background:#4264c4}
#subContainer aside .left_title h2{
	margin-bottom: 15px;
	font-family:'NanumSquare';
	font-size:26px;
	color:#fff;
	text-align:center;
	line-height:1;
}
#subContainer aside .left_title p{
	font-size:11px;color:#a5baf6;text-align:center;line-height: 1;
}
#subContainer #content{position:relative;float:right;padding-bottom:50px;width:920px;min-height:540px;}


/*
================================================================================
서브 레이아웃
================================================================================
*/

/* 왼쪽메뉴 */
#lnb{margin-top: 10px;}
#lnb li{position:relative;border-bottom:1px solid #e8e8e8;}
#lnb li a{position:relative;display:block;word-break: keep-all;}
#lnb > li{
	margin-bottom: 5px;
	border:1px solid #d7d7d7;
}
#lnb > li.has-sub > a{}
#lnb > li > a{
	font-weight: bold;font-size:16px;
	display:block;color:#555;padding:15px 35px 15px 30px;
	text-decoration:none;background-color:#fff;
}
#lnb > li > a:hover{text-decoration:underline}
#lnb > li.open > a{color:#fff;background:#3e4452;border:1px solid #353c47;border-width:0 1px}
#lnb > li.has-sub > a::after{
	position:absolute;top:21px;right:25px;
	width:11px;height:11px;content:'';
	background:url('/img/culture/img_common2.png') no-repeat -102px -273px;
}
#lnb > li.has-sub.open > a::after{
	top:21px;right:25px;width:5px;height:9px;
	background-position:-135px -273px;
}

#lnb > li > ul{
	display:none;padding:10px 0;background:#f7f7f7;	
}
#lnb > li > ul > li{margin-bottom:5px;font-size:14px;line-height:18px;border:0}
#lnb > li > ul > li > a{padding:5px 10px 5px 38px;}
#lnb > li > ul > li.open > a,
#lnb > li > ul > li > a:hover{
	color:#4264c4;text-decoration:underline;
	font-weight: bold;
}
#lnb > li > ul > li.open > a::before{
	background:url('/img/culture/img_common2.png') no-repeat -161px -273px;	
	position:absolute;top:11px;left:24px;width:7px;height:7px;content:'';
}


/* 서브 location */
.location_bd{
	width: 100%; height: 49px; 
	border-bottom: 1px solid #e8e8e8;
	background: #f6f6f6;
}

.locaInfor{position:absolute;top:-49px;left:0;width:100%;height:49px;}
.locaInfor .location{padding-left:54px;font-size:15px;line-height:49px;}
.locaInfor .location::after{display:block;clear:both;content:''}
.locaInfor .location .home{position:absolute;top:0;left:0;z-index:2}
.locaInfor .location .home a{
	position:relative;display:block;width:54px;height:100%;
	text-indent:-999px;overflow:hidden;
	border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;
}
.locaInfor .location .home a::after{position:absolute;top:50%;left:50%;margin:-9px 0 0 -8px;width:18px;height:16px;content:'';background:url('/img/culture/img_common2.png') no-repeat -101px -177px;z-index:1}
.locaInfor .location ul::after{display:block;clear:both;content:''}
.locaInfor .location ul li{
	position:relative;float:left;padding:0 55px 0 20px;
}
.locaInfor .location ul li::after{
	position:absolute;top:50%;right:5px;margin-top:-12px;
	width:24px;height:24px;content:'';
	background:url('/img/culture/img_common2.png') no-repeat -51px -177px;z-index:1;transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);
}
.locaInfor .location ul li:last-child::after{display:none;}
.locaInfor .location ul li:last-child{
	text-decoration: underline; font-weight: bold;
}
.locaInfor .btnPrint{
	position:absolute;top:0;right:0;
	display:block;width:54px;height:49px;
}
.locaInfor .btnPrint a{
	display:block;height:100%;text-indent:-999px;overflow:hidden;
	background: #a6a6a6;
}
.locaInfor .btnPrint a::after{
	position:absolute;top:50%;left:50%;margin:-8px 0 0 -8px;
	width:16px;height:17px;content:'';
	background:url('/img/culture/img_common2.png') no-repeat -141px -210px
}



/* 하단영역 */

#footer{padding:40px 30px;background: #3e4148}
#footer .footWrap{position:relative;margin:0 auto;max-width:1200px}
#footer .footWrap .footMenu{margin-bottom:40px;}
#footer .footWrap .footMenu li{position:relative;display:inline-block;padding:0 22px;}
#footer .footWrap .footMenu li::before{position:absolute;top:50%;left:0;margin-top:-2px;width:4px;height:4px;content:'';background:#fff;border-radius:50%}
#footer .footWrap .footMenu li:first-child{padding-left:0}
#footer .footWrap .footMenu li:first-child::before{display:none}
#footer .footWrap .footMenu li a{display:block;color:#fff}
#footer .footWrap .fFamily{position:absolute;top:-10px;right:0;z-index:100}
#footer .footWrap .fFamily button{position:relative;width:190px;height:46px;font-size:14px;color:#fff;text-indent:20px;text-align:left;border:1px solid #787a7f;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#footer .footWrap .fFamily button::after{position: absolute; top: 50%; right: 15px;content: "";margin-top:-7px;width:14px;height:14px;background:url('/img/culture/img_common.png') no-repeat -301px 0;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#footer .footWrap .fFamily button.on::after{margin-top: -5px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}
#footer .footWrap .fFamily button:hover,
#footer .footWrap .fFamily button.on{background:rgba(0,0,0,0.5)}
#footer .footWrap .fFamily ul{display:none;position:absolute;top:46px;right:0;width:100%;height:137px;overflow:auto;text-align:left;background:#fff;}
#footer .footWrap .fFamily ul li a{display:block;padding:0 20px;color:#555;line-height:45px;background:#f4f4f4;border-bottom:1px solid #e6e6e6;transition:all 0.2s ease;-webkit-transition:all 0.2s ease}
#footer .footWrap .fFamily ul li:nth-child(2n) a{background:#fff}
#footer .footWrap .footer_logo{margin-bottom:40px;height:41px;text-indent:-999px;overflow:hidden;background:url('/img/culture/foot_logo.png') no-repeat center top}
#footer .footWrap address{margin-bottom:10px;color:#fff}
#footer .footWrap address span{display:inline-block;padding-left:40px;font-size:15px}
#footer .footWrap .copyright{color:#fff;opacity:0.5}

.btnMenu, #total_m_lay{
	display: none;
}

/*
================================================================================
메인, 서브레이아웃 반응형
================================================================================
*/

/* Pc Device */
@media all and (min-width:1201px){
	#total_m_lay{
		display: none; left:-230px; position: absolute;
	}
}


 /* Tablet Device */
@media all and (max-width:1200px){
	.wra_box{
		width: 100%;
	}
	.head_wrap, #gnb{
		display: none;
	}
	.gnb_wrap{
		width: 100%; padding: 0;
	}
	.gnb_wrap .top_logo{
		left: 50%; margin-left: -141px;
	}
	.btn_m_search{
		right: 0; top:0;
		background: #fff;
		width: 85px; height: 85px;
		position: absolute;
	}
	.btn_m_search::after{
		top:0;left:0;
		width:100%;height:100%;
		background-size:30px;
		background-position:center center
	}
	.m_search_box::after{
		left: inherit; right: 24px; margin:0;
	}

	#subContainer{padding:0;max-width:740px;width:100%}
	#subContainer aside{display:none}
	#subContainer #content{padding:30px 20px;width:100%}

	.locaInfor .location ul li{padding:0 40px 0 10px;font-size:12px}
	.locaInfor .location ul li::after{right:5px}	

	/* 모바일메뉴 */
	.btnMenu{
		display: inline-block;
		z-index: 110;
		width: 85px; height: 85px;
		position: absolute;
		background: url(/img/culture/ic_menu.png) no-repeat center center;
		top: 0; left: 0;
		text-indent: -9999px;
	}
	#total_m_lay{left:-230px;}	
	#total_m_lay.mOpen{left:0}	
	#total_m_lay{
		position:fixed;top:0;width:230px;height:100%;overflow:auto;
		background:#4264c4;z-index:500;
		transition: all 0.3s;
		-ms-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-webkit-transition: all 0.3s; 
		-o-transition: all 0.3s;}
	#total_m_lay .total_m > ul{
		background:#1b3fa5
	}
	#total_m_lay .total_m li{position:relative}
	#total_m_lay .total_m li a{display:block}
	#total_m_lay .total_m li button{position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-999px;overflow:hidden;}
	#total_m_lay .total_m > ul > li{
		width:auto !important;font-size:18px;border-bottom:1px solid #405eb3;
	}
	#total_m_lay .total_m > ul > li.has-sub > a::after{
		position:absolute;top:22px;right:20px;
		width:6px;height:10px;content:'';
		background:url('/img/culture/img_common.png') no-repeat -427px -46px}
	#total_m_lay .total_m > ul > li.has-sub.open > a::after{
		width: 10px; height: 6px;
		top:24px;
		background-position:-427px -67px
	}
	#total_m_lay .total_m > ul > li > a{
		display:block;font-family:'NanumSquare';color:#fff;
		padding:15px 0 15px 40px;font-weight:bold;text-decoration:none;
		word-break: keep-all;
	}
	#total_m_lay .total_m > ul > li.open > a{color:#fff;background:#353c47}
	#total_m_lay .total_m > ul > li.has-sub.open > a{background:#1b3fa5}
	#total_m_lay .total_m > ul > li > ul{display:none;padding:0;background:#e7e7e7;}
	#total_m_lay .total_m > ul > li > ul > li{
		font-size:17px;border-bottom:1px solid #fff
	}
	#total_m_lay .total_m > ul > li > ul > li.has-sub{background:#fff}
	#total_m_lay .total_m > ul > li > ul > li.has-sub.open{background-color:#fff;}
	#total_m_lay .total_m > ul > li > ul > li > a{
		padding:15px 0 15px 40px;color:#333;background: #e7e7e7;
	}
	#total_m_lay .total_m > ul > li > ul > li.open > a{
		color:#fff;font-weight:bold;background:#65a1e3
	}
	#total_m_lay .total_m > ul > li > ul > li.has-sub > a::after{
		position:absolute;top:25px;right:20px;
		width:7px;height:4px;content:'';
		background:url('/img/culture/img_common.png') no-repeat -444px -46px
	}
	#total_m_lay .total_m > ul > li > ul > li.has-sub.open > a::after{
		background-position:-444px -61px
	}
	#total_m_lay .total_m > ul > li > ul > li > ul{display:none;margin:15px 0;}
	#total_m_lay .total_m > ul > li > ul > li > ul > li{
		font-size:15px;letter-spacing:-1px;
	}
	#total_m_lay .total_m > ul > li > ul > li > ul > li.has-sub{}
	#total_m_lay .total_m > ul > li > ul > li > ul > li > a::before{
		position:absolute;top:13px;left:40px;width:5px;height:7px;content:'';
		background:url('/img/culture/img_common.png') no-repeat -463px -63px;
	}
	#total_m_lay .total_m > ul > li > ul > li > ul > li.open > a{
		color:#4264c4;font-weight:bold
	}
	#total_m_lay .total_m > ul > li > ul > li > ul > li.open > a::before{
		background-position: -463px -46px;
	}
	#total_m_lay .total_m > ul > li > ul > li > ul > li > a{
		padding:5px 10px 5px 50px;
	}
	

	.mbTopLogo{
		width: 100%; height: 144px;
		position: relative;
		text-indent: -9999px;
	}
	.mbTopLogo::after{
		content: ""; display: inline-block; position: absolute;
		background: url(/img/culture/mb_logo.png) no-repeat;
		top: 32px; left: 50%; margin-left: -65px;
		width: 130px; height: 83px;
	}

	.btnMenuClose{position:absolute;top:0;left:0;width:35px;height:35px;text-indent:-999px;overflow:hidden;opacity:0;background: url('/img/culture/img_common.png') no-repeat 0 -166px;z-index:20}
	.btnMenuClose:focus{opacity:0.5}

	.wra_box{position:fixed;top:0;left:0;height:auto;z-index:200}
	.fix_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.7;z-index:450}
	.footer_info{
		height: auto; line-height:1;  padding: 20px 0;
	}

	.footer_info .location{
		width: 100%; padding-left: 90px; margin-bottom: 14px;
	}
	.footer_info .location dt::after{
		top:0;
	}
	.footer_info .call dt::after,
	.footer_info .fax dt::after{
		top:1px;
	}
	.footer_info .right_box{
		float: none;
	}
	.footer_copy .footer_logo{
		left: 30px;
	}
}

 /* Mobile Device */
@media all and (max-width:640px){
	.gnb_wrap .top_logo{
		width: 194px; height: 39px;
		margin-left: -97px; top:22px;
		background-size:100%
	}
	.btnMenu{
		width:65px;
		background-size:28px
	}
	.btn_m_search{
		    width: 65px;
	}
	.btn_m_search::after{background-size:25px}
	.m_search{
		width: 90%;
	}

	#subContainer{max-width:640px;}
	#subContainer #content{padding:20px 10px;}

	.location_bd{height: 40px;}

	.locaInfor{top: -40px;padding-right:40px;height:40px}
	.locaInfor .location{padding-left:45px;height:40px;
		line-height:40px;overflow-x:auto;overflow-y:hidden
	}
	.locaInfor .location .home a{width:40px}
	.locaInfor .location ul{white-space: nowrap;}
	.locaInfor .location ul li{
		float:none;display:inline-block;padding:0 40px 0 5px;
		font-size:13px;
	}
	
	.locaInfor .btnPrint{display:none}
	
	#footer{text-align:center}
	#footer .footWrap .footMenu{margin-bottom:20px}
	#footer .footWrap .footMenu li{padding:0 10px}
	#footer .footWrap .footMenu li:last-child{padding-right:0}
	#footer .footWrap .fFamily{position:relative;top:0;margin:0 auto 20px;width:190px}
	#footer .footWrap address span{padding:0 10px}
}