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

/* 상단 슬라이드 기본설정 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/*
================================================================================
메인콘텐츠
================================================================================
*/

.mConBox1{background:#f3f6f8}
.mVisual{padding:70px 20px 0;height:580px;text-align:center;background:url('/img/culture/main/m_visual.jpg') no-repeat center center;background-size:cover}
.mVisual p{font-family:'NanumSquare';margin-top:15px;font-size:17px;text-align:center;}

.conBox{margin:0 auto;padding:0 30px;max-width:1260px}
.conBox::after{display:block;clear:both;content:''}

.mCon1{position:relative;margin:-280px 0 70px}
.mCon1::after{display:block;clear:both;content:''}
.mCon1 dl{float:left;padding:80px;width:50%;height:460px;color:#fff;background-repeat:no-repeat;background-position:center top}
.mCon1 dl.con1{background-image:url('/img/culture/main/m_con1_bg1.jpg');border-radius:20px 0 0}
.mCon1 dl.con2{background-image:url('/img/culture/main/m_con1_bg2.jpg');border-radius:0 20px 0 0}
.mCon1 dl dt{margin-bottom:20px;font-family: 'NanumSquare';font-size:30px;line-height:1.2;font-weight:bold}
.mCon1 dl dd ul{margin-top:40px}
.mCon1 dl dd ul li{margin-bottom:9px}
.mCon1 dl dd ul li a{position:relative;display:block;padding-left:58px;width:160px;color:#000;line-height:50px;background-color:#fff;background-repeat:no-repeat;background-position:20px center;background-size:25px;transition:all 0.3s ease;-webkit-transition:all 0.3s ease}
.mCon1 dl dd ul li a::before{position:absolute;top:50%;left:20px;margin-top:-16px;width:25px;height:32px;content:'';background-size:25px;background-position:left top}
.mCon1 dl dd ul li a::after{position:absolute;top:50%;right:13px;margin-top:-3px;width:18px;height:6px;content:'';background-image:url('/img/culture/main/ic_arrow.png');background-repeat:no-repeat;background-position:left top}
.mCon1 dl dd ul li.ic1 a::before{background-image:url('/img/culture/main/m_con_1_ic1.png');}
.mCon1 dl dd ul li.ic2 a::before{background-image:url('/img/culture/main/m_con_1_ic2.png');}
.mCon1 dl dd ul li.ic3 a::before{background-image:url('/img/culture/main/m_con_1_ic3.png');}
.mCon1 dl dd ul li a:hover::before{background-position:left bottom}
.mCon1 dl dd ul li a:hover{color:#fff;}
.mCon1 dl.con1 dd ul li a:hover{background:#0e305d}
.mCon1 dl.con2 dd ul li a:hover{background:#006048}
.mCon1 dl dd ul li a:hover::after{background-position:left bottom}

.mCon2{position:relative;height:440px}
.mCon2::before{position:absolute;top:20px;left:0;width:24%;height:0;content:'';border-top:1px solid #0172ba}
.mCon2::after{position:absolute;top:20px;right:0;width:24%;height:0;content:'';border-top:1px solid #179678}
.mCon2 h2{position:absolute;top:5px;left:0;padding-right:20px;font-family: 'NanumSquare';font-size:32px;color:#000;background:#f3f6f8;z-index:2}
.mCon2 .mTabM{margin:0 auto;padding-right:100px;max-width:640px;text-align:center;}
.mCon2 .mTabM > li{display:inline-block;}
.mCon2 .mTabM > li > a{display:block;padding:0 25px;font-size:18px;font-weight:bold}
.mCon2 .mTabM > li > a span{font-family:'NanumSquare';position:relative;display:block;line-height:40px}
.mCon2 .mTabM > li > a span::after{position:absolute;left:50%;bottom:0;width:0;height:4px;content:'';background:#3255ad;transition:all 0.2s ease}
.mCon2 .mTabM > li > a:hover,
.mCon2 .mTabM > li.on > a{color:#1b3f9a}
.mCon2 .mTabM > li.on > a span::after{left:0;width:100%}
.mCon2 .mTabM > li .mTabCon{position:absolute;top:85px;left:0;width:100%;text-align:left}
.mCon2 .mTabM > li .mTabCon ul{margin:0 -13px}
.mCon2 .mTabM > li .mTabCon ul::after{display:block;clear:both;content:''}
.mCon2 .mTabM > li .mTabCon ul li{float:left;padding:0 13px;width:25%}
.mCon2 .mTabM > li .mTabCon ul li a{display:block}
.mCon2 .mTabM > li .mTabCon ul li a:hover .box .tit{text-decoration:underline}
.mCon2 .mTabM > li .mTabCon ul li .box{position:relative;padding:45px 35px 35px;height:250px;background:#fff;border:1px solid #e4e4e4;border-radius:20px;box-shadow:6px 10px 0 rgba(0,0,0,0.2)}
.mCon2 .mTabM > li .mTabCon ul li .box span{display:block;}
.mCon2 .mTabM > li .mTabCon ul li .box .part{position:absolute;right:-6px;top:-9px;padding:0 20px;color:#fff;line-height:40px;font-weight:bold;border-radius:20px}
.mCon2 .mTabM > li .mTabCon ul li .box .part.pat1{background:#3255ad}
.mCon2 .mTabM > li .mTabCon ul li .box .part.pat2{background:#14a391}
.mCon2 .mTabM > li .mTabCon ul li .box .part.pat3{background:#83b12b}
.mCon2 .mTabM > li .mTabCon ul li .box .tit{font-family:'NanumSquare';margin-bottom:20px;height:54px;font-size:22px;color:#000;font-weight:bold;overflow: hidden; text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;line-height:1.3}
.mCon2 .mTabM > li .mTabCon ul li .box .txt{margin-bottom:20px;padding-top:20px;height:56px;color:#666;overflow: hidden; text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;line-height:1.2;background:url('/img/culture/main/m_con2_line.png'); background-repeat:repeat-x;}
.mCon2 .mTabM > li .mTabCon .btnMore{position:absolute;top:-78px;right:26%}
.mCon2 .mTabM > li .mTabCon .btnMore a{display:block;font-size:17px}
.mCon2 .mTabM > li .mTabCon .btnMore a span{position:relative;display:inline-block;margin-right:8px;width:20px;height:20px;vertical-align:middle;background:#333;border-radius:50%}
.mCon2 .mTabM > li .mTabCon .btnMore a span::before{position:absolute;top:50%;left:50%;width:14px;height:14px;content:'';background:url('/img/culture/main/ic_more.png') no-repeat center center;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%)}

.mConBox2{position:relative;background:#f3f6f8}
.mConBox2::before{position:absolute;top:100px;left:0;width:50%;height:310px;content:'';background:#14a391}
.mConBox2::after{position:absolute;top:0;right:0;width:50%;height:100%;content:'';background:url('/img/culture/main/m_con4_bg.png') no-repeat left top, linear-gradient(to right, #3960af , #1490be)}

.mCon3{position:relative;float:left;padding:45px 100px;width:50%;height:410px;background:#fff;z-index:2}
.mCon3 h2{margin-bottom:25px;font-family: 'NanumSquare';font-size:28px;color:#000}
.mCon3 .mPhoto ul li{position:relative;text-align:center}
.mCon3 .mPhoto ul li a{display:block;background:#f5f5f5}
.mCon3 .mPhoto ul li a:focus{border:2px dotted #000}
.mCon3 .mPhoto ul li a img{width:100%}
.mCon3 .mPhoto ul li .part{font-family:'NanumSquare';position:absolute;top:0;left:0;padding:0 20px;font-size:18px;color:#fff;line-height:60px;text-align:center;z-index:2}
.mCon3 .mPhoto ul li .part.pat1{background:#3255ad}
.mCon3 .mPhoto ul li .part.pat2{background:#14a391}
.mCon3 .mPhoto ul li .part.pat3{background:#83b12b}
.mCon3 .mPhoto ul li .tit{font-family:'NanumSquare';position:absolute;left:0;bottom:0;padding:100px 10px 20px 10px;width:100%;font-size:18px;color:#fff;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;background-image: linear-gradient(transparent, rgba(0,0,0,0.8));z-index:2}
.mCon3 .mPhoto ul li a:hover .tit{text-decoration:underline}
.mCon3 .control button{position:absolute;top:50%;width:52px;height:52px;text-indent:-999px;overflow:hidden;background-color:#f5f5f5;background-repeat:no-repeat;background-position:center top;border-radius:50%;transform:translateY(-30%);-webkit-transform:translateY(-30%)}
.mCon3 .control button:hover{background-color:#3e4148;background-position:center bottom}
.mCon3 .control .prevSlide1{left:25px;background-image:url('/img/culture/main/m_before_ic.png');}
.mCon3 .control .nextSlide1{right:25px;background-image:url('/img/culture/main/m_next_ic.png');}
.mCon3 .btnMore{position:absolute;top:45px;right:100px;}
.mCon3 .btnMore a{display:block;padding-right:33px;font-size:14px;font-style:italic;line-height:23px;background:url('/img/culture/main/ic_more2.png') no-repeat right center}

.mCon4{position:relative;float:left;padding:40px 0 40px 100px;width:50%;height:410px;z-index:2}
.mCon4::before{position:absolute;top:0;left:0;width:40px;height:100%;content:'';background-image: linear-gradient(to right, rgba(0,0,0,0.3) , transparent);}
.mCon4 ul li{background:url('/img/culture/main/ic_arrow2.png') no-repeat right center;border-bottom:1px solid rgba(255,255,255,0.12)}
.mCon4 ul li:last-child{border-bottom:0}
.mCon4 ul li a{font-family:'NanumSquare';position:relative;display:block;padding:40px 95px 40px 90px;font-size:20px;color:#fff;font-weight:bold;background-repeat:no-repeat;background-position:left center;background-size:70px}
.mCon4 ul li a:hover{text-decoration:underline}
.mCon4 ul li.ic1 a{background-image:url('/img/culture/main/m_con_4_ic1.png');}
.mCon4 ul li.ic2 a{background-image:url('/img/culture/main/m_con_4_ic2.png');}
.mCon4 ul li.ic3 a{background-image:url('/img/culture/main/m_con_4_ic3.png');}

/*
================================================================================
메인콘텐츠 반응형
================================================================================
*/


 /* Tablet Device */
@media all and (max-width:1200px){	
	.contentBox{
		width: 100%; padding: 0 30px;
	}

	.mVisual{padding-top: 55px;height: 400px;background-position:right center}
	
	.mCon1{margin: -140px 0 70px;}
	.mCon1 dl{padding:50px;height:340px;box-shadow:10px 10px 20px rgba(0,0,0,0.2)}
	.mCon1 dl dd p{display:none}
	
	.mCon2::before{top: 73px;width: 10%;}
	.mCon2::after{top:73px;width:10%}
	.mCon2 h2{position: relative;top: 0;margin-bottom:30px;padding-right: 0;text-align:center;background:none}
	.mCon2 .mTabM > li > a{padding:0 20px}
	.mCon2 .mTabM > li .mTabCon{top:130px}
	.mCon2 .mTabM > li .mTabCon .btnMore{top: -68px;right: 13%;}
	.mCon2 .mTabM > li .mTabCon ul li{width:33.33%}
	.mCon2 .mTabM > li .mTabCon ul li:nth-child(4){display:none}
	
	.mConBox2::after{width:100%;background: url(/img/culture/main/m_con4_bg.png) no-repeat left bottom, linear-gradient(#15a391 , #3960af);}
	.mConBox2::before{top:0;height:100px;background:#f8f8f8;z-index:1}
	.mCon3{float:none;margin:0 auto;max-width:600px;width:auto;height:auto}
	.mCon4{float:none;margin:0 auto;padding: 40px;max-width:600px;width:auto}
	.mCon4::before{display:none}

}

 /* Mobile Device */
@media all and (max-width:750px){

	.mCon2::before{display:none;}
	.mCon2::after{display:none;}
	.mCon2 .mTabM > li .mTabCon .btnMore{right:6%;}

}

 /* Mobile Device */
@media all and (max-width:640px){

	.contentBox{
		padding: 0 20px;
	}

	.mVisual{padding-top: 35px;height: 260px;background-position: 85% center;}
	.mVisual img{width:250px}
	.mVisual p{font-size:15px}
	.mCon1{margin: -60px 0 50px;}
	.mCon1 dl{float:none;padding:40px 10px 30px;width:100%;height:auto;text-align:center;border-radius:20px !important;background-size:100%;background-position:center 15%;box-shadow:0 6px 10px rgba(0,0,0,0.2);}
	.mCon1 dl dt{font-size:24px}
	.mCon1 dl dd p{display:none}
	.mCon1 dl dd ul{margin-top:0}
	.mCon1 dl dd ul li{display:inline-block;margin-bottom:0;text-align:left}
	.mCon1 dl dd ul li a{padding-left:20px;width:110px;line-height:42px}
	.mCon1 dl dd ul li a::before{display:none}
	.mCon1 dl.con1{margin-bottom:20px}

	.conBox{padding:0 20px}
	
	.mCon2{height:670px}
	.mCon2::before,
	.mCon2::after{display:none}
	.mCon2 h2{margin-bottom:20px;font-size:28px}
	.mCon2 .mTabM{padding-right:0}
	.mCon2 .mTabM::after{display:block;clear:both;content:''}
	.mCon2 .mTabM > li{display:block;float:left;width:50%}
	.mCon2 .mTabM > li > a{margin:-1px 0 0 -1px;padding:0 5px;font-size:17px;background:#fff;border:1px solid #e4e4e4}
	.mCon2 .mTabM > li > a span{line-height:50px;}
	.mCon2 .mTabM > li > a span::after{display:none}
	.mCon2 .mTabM > li.on > a{position:relative;color:#fff;background:#3255ad;border:1px solid #3255ad;z-index:1}
	.mCon2 .mTabM > li .mTabCon{top:170px}
	.mCon2 .mTabM > li .mTabCon ul{margin:0}
	.mCon2 .mTabM > li .mTabCon ul li{float:none;margin-bottom:28px;padding:0;width:100%}
	.mCon2 .mTabM > li .mTabCon ul li .box{padding: 45px 30px 30px;height:210px}
	.mCon2 .mTabM > li .mTabCon ul li .box .tit{display: block;margin-bottom:15px;-webkit-line-clamp: 1;height:auto;font-size:20px;white-space: nowrap;}
	.mCon2 .mTabM > li .mTabCon ul li .box .txt{margin-bottom: 15px;padding-top: 15px;}
	.mCon2 .mTabM > li .mTabCon ul li:nth-child(3){display:none}
	.mCon2 .mTabM > li .mTabCon .btnMore{top: -75px;right:0;width:50%;text-align:center;background:#fff;border:1px solid #e4e4e4;border-width:0 1px 1px 0}
	.mCon2 .mTabM > li .mTabCon .btnMore a{line-height:50px}

	.mCon3{padding: 35px 40px;}
	.mCon3 h2{margin-bottom:15px;font-size:24px}
	.mCon3 .mPhoto ul li .part{padding:0 10px;font-size:16px;line-height:40px}
	.mCon3 .mPhoto ul li .tit{padding: 50px 10px 10px 10px;font-size: 15px;}
	.mCon3 .btnMore{top: 35px;right: 40px;}
	.mCon3 .control button{width: 40px;height: 40px;background-size:100%}
	.mCon3 .control button,
	.mCon3 .control button:focus{background-color:transparent;background-position:left top}
	.mCon3 .control .prevSlide1{left:0}
	.mCon3 .control .nextSlide1{right:0}
	
	.mCon4{padding:30px 0;height:auto}
	.mCon4 ul li{background-size:84px}
	.mCon4 ul li a{padding: 20px 80px;font-size: 17px;background-size: 55px;}

}

@media all and (max-width:400px){

	.mCon1 dl{background-size:cover;}
	.mCon1 dl dd ul li{display:block;}
	.mCon1 dl dd ul li a{width:80%; margin:5px auto;}

}

/*
================================================================================
서브콘텐츠
================================================================================
*/


/* 서브 공통 */
.conTopCommonBox{
	width: 100%; height: 300px;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 105px;
	text-align: center;
}
.conTopCommonBox::after{
	content: ""; display: inline-block; position: absolute;
	background-repeat: no-repeat;	
	background-position: 0 0;
	bottom: -32px; left: 50%; margin-left: -32px;
	width: 64px; height: 64px;
}
.conTopCommonBox.ic01::after{
	background-image: url(/img/lll/sub/ConBox_ic01.jpg);
}
.conTopCommonBox dt{
	font-size: 30px; color: #111; font-weight: bold;font-family: 'NanumSquare';
	line-height: 1; margin-bottom: 35px; position: relative;
}
.conTopCommonBox dt::after{
	content: ""; display: inline-block; position: absolute;
	background:#111;
	bottom: -20px; left: 50%; margin-left: -15px;
	width: 30px; height: 1px;
}
.conTopCommonBox dd{
	font-size: 16px;
}

.conTopCommonBox.s1_1{
	background-image: url(/img/lll/sub/s1_1_bg.jpg);
}

.contentBoxBoder{
	width: 100%; height: 5px; display: block; clear: both;
	background: url(/img/lll/sub/s6_1_bd.png) left center repeat-x;
}


/* 센터소개 */
.s1_introduce {position:relative;}
.s1_introduce .imgbox {position:relative; padding:20px 0 0 20px;}
.s1_introduce .imgbox::after {position:absolute; top:0px; left:0px; content:""; background:#29a892; width:460px; height:260px; z-index:-1;}
.s1_introduce .txt {font-family:'NanumSquare'; position:absolute; top:50px; right:0; width:420px; padding:0 0 0 80px; z-index:10; word-break:keep-all;}
.s1_introduce .txt strong {display:block; position:relative; font-size:34px; font-weight:bold; color:#000; line-height:1.2; margin-bottom:40px;}
.s1_introduce .txt strong.line1::after {top:180px;}
.s1_introduce .txt strong::after {position:absolute; top:100px; left:-100px; background:#00967c; width:190px; height:1px; content:"";}
.s1_introduce .txt strong span {color:#00967c;}
.s1_introduce .txt .s_txt {font-size:18px;}
.s1_introduce p {clear:both; display:block; margin-top:30px;}

.s1_imgbox ul li {position:relative; float:left; width:450px; margin-right:20px; margin-bottom:20px;}
.s1_imgbox ul li:nth-child(2n+2) {margin-right: 0;}
.s1_imgbox ul li .titBox {position:absolute; bottom:0; left:0; background:#fff; padding:10px 14px 0 14px; height:50px; line-height:38px; color:#000; font-size:16px;}
.s1_imgbox ul li .titBox span { display:inline-block; background:#efefef; width:38px; height:38px; border-radius:50%; text-align:center; margin-right:8px;}
.s1_imgbox ul li .titBox span.long_txt { width:auto; padding:0 16px; border-radius:20px;}



/*
================================================================================
서브콘텐츠 반응형
================================================================================
*/



 /* Tablet Device */
@media all and (max-width:1200px){
	.s1_introduce .imgbox {margin:0 auto; max-width:500px;}
	.s1_introduce .txt {position:relative; display:block; clear:both; width:100%; top:0; padding:30px 0 0 0; text-align:center;}
	.s1_introduce .txt strong {margin-bottom:20px; font-size:28px;}
	.s1_introduce .txt strong::after {width:1px; height:50px; top:-60px; left:50%;}
	.s1_introduce .txt strong.line1::after {top:-60px;}
	.s1_introduce p {margin-top:20px;}

	.s1_imgbox ul li {width:48.5%; margin-right:1%;}

}

@media all and (max-width:640px){
	.s1_introduce .imgbox::after {width:90%; height:80%;}

	.s1_imgbox ul li {width:100%; margin-right:0;}
	.s1_imgbox ul li img {width:100%;}
	.s1_imgbox ul li .titBox {font-size:15px; padding:6px 12px 0 12px; height:42px; line-height:36px;}
	.s1_imgbox ul li .titBox span {width:34px; height:34px; margin-right:5px;}
	.s1_imgbox ul li .titBox span.long_txt {padding:0 10px;}

}