@charset "utf-8";

/* 레이어팝업 */
.leyerpop_box {
	position: absolute; 
	padding: 0px; 
	margin: 0px;
	border:5px solid #20272e;
	z-index: 999999999;
	font-size:13px;
}
.leyerpop_box dl.alt{display:block;overflow:hidden;position:absolute;top:-9999px;left:-9999px;visibility:hidden;}
#popup1 {left: 0; 	top: 10px; }
#popup2 {left: 350px; 	top: 10px; }
#popup3 {left: 770px; 	top: 10px; }

@media all and (max-width:748px){
	/* left값 동일 _ top값만 변경 */
	.leyerpop_box img{width:100%;}
	#popup1 {left: 0; 	top: 10px;}
	#popup2 {left: 0; top: 30px;}
	#popup3 {left: 0; 	top: 60px; }
}

html,body {background-color: #FAEDFF;}
#header {margin-bottom: 1rem;}
#header:hover {background-color: #FFF;}

#content *,
#content *:before,
#content *:after {
  transition: all 0.2s ease;
}

/* main_top */
#main_top{
	max-width:1400px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	overflow:hidden;
}
@media all and (max-width:1400px){
	#main_top{width:96%;margin:0 auto;}
}
@media all and (max-width:1024px){
	#main_top{width: 100%;gap: 1rem;}
}
	/* m_visual */
	div.m_visual{
		position: relative;
		width: 66%;
		max-height: 410px;
	}
	div.m_visual img.pc_on,
	div.m_visual img.m_on{width:100%;}
	div.m_visual img.m_on{display:none;}
	div.m_visual .slider_img {
		display:block !important;
		overflow: hidden;
		-webkit-border-radius: 28px;
		border-radius: 28px;
	}
	div.m_visual .slider_img img {
		width: 100%;height: 100%;
		object-fit: cover;
	}
	div.m_visual .slider_img .m_slogan {
		position: absolute;
		top: 28%;left: 6%;
		z-index: 99;
	}
	div.m_visual .slider_img .m_slogan p {
	    font-size: 1.5rem;
	    font-weight: 700;
	    line-height: 1.5;
	    color: #fff;
	    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
	    opacity: 0; 
	}
	div.m_visual .slider_img .m_slogan p strong {
	    font-size: 2.75rem;
	    font-weight: 900;
	}
	div.m_visual .slick-active .slider_img .m_slogan p {
	    animation: slogan_blur 2s ease forwards;
	}
	div.m_visual .slick-active .slider_img .m_slogan p:last-child {animation-delay: .5s;}
	@keyframes slogan_blur {
	    0% {opacity: 0; filter: blur(8px); transform: scale(1.2);}
	    100% {opacity: 1; filter: blur(0); transform: scale(1);}
	}
	@keyframes slogan_In {
	    0% {opacity: 0; filter: blur(4px); transform: translateX(-10rem);}
	    100% {opacity: 1; filter: blur(0px); transform: translateX(0);}
	}
	div.m_visual .visual-control{position: absolute;top: 65%;left: 6%;display: flex;gap: 4px;}
	div.m_visual .visual-control button{margin-right:1px;width: 1.75rem;height: 1.75rem;background-color: #FFF;border-radius: 50%;-webkit-border-radius: 50%;}
	div.m_visual .visual-control button.btn_play{display:none;}
	div.m_visual .visual-control .visual-dots .slick-dots{display:flex !important; align-items:center; height:100%; gap:4px; margin-left:8px;}
	div.m_visual .visual-control .visual-dots .slick-dots li{width:20px; height:4px; background:#fff; text-indent:-9999px; opacity:.6; }
	div.m_visual .visual-control .visual-dots .slick-dots li.slick-active{opacity:1;}
	
	@media (max-width: 1400px){
		div.m_visual .slider_img .m_slogan,
		div.m_visual .visual-control {left: 5%;}
		div.m_visual .slider_img .m_slogan p {font-size: 1.25rem;}
	}
	@media (max-width: 1280px){
		div.m_visual .slider_img .m_slogan p strong {font-size: 2.5rem;}
	}
	@media (max-width: 1024px){
		div.m_visual{width: 96%;margin: 0 auto;}
		div.m_visual .visual-control{gap: 2px;}
	}
	@media (max-width: 768px){
		div.m_visual img.pc_on{display:none;}
		div.m_visual img.m_on{display:block;}
		div.m_visual .slider_img {
			height: 360px;
			-webkit-border-radius: 1rem;
			border-radius: 1rem;
		}
		div.m_visual .slider_img .m_slogan,
		div.m_visual .visual-control {top: auto;bottom: 12%;}
		div.m_visual .visual-control {left: auto;right: 6%;}
		
		div.m_visual .slider_img .m_slogan p {font-size: 1.1rem;}
		div.m_visual .slider_img .m_slogan p strong {font-size: 2.1rem;}
	}
	@media (max-width: 480px){
		div.m_visual .slider_img {height: 300px;}
		div.m_visual .slider_img .m_slogan p {font-size: 1rem;line-height: 1.4;}
		div.m_visual .slider_img .m_slogan p strong {font-size: 1.8rem;}
		
		div.m_visual .visual-control button{width: 1.5rem;height: 1.5rem;}
	}
	
	/* m_popupzone */
	div.m_popupzone{
		width:32%;
		max-height:410px;
		display:flex;
		flex-direction: column-reverse;
		background: url('/images/FamilycultureCenter/main/popupzone_sample.png') center bottom no-repeat;
		background-size: 100%;
		-webkit-border-radius: 28px;
		border-radius: 28px; 
		overflow: hidden;
	}
	.popup_head{
		position:relative;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
		align-items: center;
		flex: 1;
		width:100%; min-height: 50px;padding:0 30px; 
		background: linear-gradient(90deg, #4B3B99 0%, #72337C 100%);
	}
	.popup_head h3{font-size: 18px;font-weight: 700;color: #fff;}
	.popup_head .popup-control {display: flex;gap: 6px;}
	.popup_head .popup-control button{width: 28px;background-color: #FFF;border-radius: 50%;-webkit-border-radius: 50%;}
	.popup_head .popup-control button.btn_play{display:none;}
	
	.popup-list .slick-slide > div > div{display:block !important;}
	/*.popup-list .slick-slide img{
		width: 100%;height: 100%;
		object-fit: cover;
	}*/
	.popup-list .slick-slide img{width: 100%;height: 100% !important;}
	
	@media (max-width: 1400px){}
	@media (max-width: 1024px){
		div.m_popupzone {
			width: 96%;
			margin:0 auto;
			background: none;
			-webkit-border-radius: 1rem;
			border-radius: 1rem;
		}		
	}
	@media (max-width: 768px){
		.popup_head{min-height: 45px;padding:0 1.5rem;}
		.popup_head h3{font-size: 16px;}
		.popup_head .popup-control button {width: 1.5rem;}
	}


/* 자주찾는 서비스 */
.m_service{position:relative; max-width:1400px; margin: 40px auto;}
	.service_head {position:relative; margin-bottom: 12px;padding: 0;display:flex; justify-content: space-between;align-items: center;}
	.service_head h3{font-size:26px;color: #111;}
	.service_head h3 strong{font-weight: 900;}	
	.service_head .service-control {display:flex;align-items: center;gap: 4px;}
	.service_head .service-control button{width: 32px;height: 32px;}
	.service_head .service-control button.btn_play {display:none;}
	.service_head .service-control button.btn_pause,
	.service_head .service-control button.btn_play {background-color: #FFF;border-radius: 50%;-webkit-border-radius: 50%;}

	.service_cont {width:100%;display: flex;justify-content: space-between;align-items: center;gap: .75rem;}
	.service_first {width:15%;}	
	.service_list {width:85%;}
	.service_list .slick-list {margin: 0 -5px;padding-top: 0.5rem;}
	.service_list .slick-slide {margin: 0 5px;}/*슬라이드 간격*/
	.service_cont .item a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		height: 180px;
		font-size: 15px;
		line-height: 1.2;
		color: #111;
		text-align: center;
		background-color: #FFF;
		border: 1px solid #AD6FDE;
		-webkit-border-radius: 1rem;
		border-radius: 1rem;
	}
	.service_list .item a:hover{
		transform: translateY(-0.5rem);
	}
	.service_cont .item a strong {flex: 1;font-weight: 500;}
	.service_cont .item i {
		display: block;
		width: 80px;height: 100px;
		background-size: 80px;
		background-position: center;
		background-repeat: no-repeat;
	}
	.service_first .item i.s1 {background-image: url('/images/FamilycultureCenter/main/m_service_ico1.svg');}
	.service_list .item i.s2 {background-image: url('/images/FamilycultureCenter/main/m_service_ico2.svg');}
	.service_list .item i.s3 {background-image: url('/images/FamilycultureCenter/main/m_service_ico3.svg');}
	.service_list .item i.s4 {background-image: url('/images/FamilycultureCenter/main/m_service_ico4.svg');}
	.service_list .item i.s5 {background-image: url('/images/FamilycultureCenter/main/m_service_ico5.svg');}
	.service_list .item i.s6 {background-image: url('/images/FamilycultureCenter/main/m_service_ico6.svg');}
	.service_list .item i.s7 {background-image: url('/images/FamilycultureCenter/main/m_service_ico7.svg');}
	.service_list .item i.s8 {background-image: url('/images/FamilycultureCenter/main/m_service_ico8.svg');}
	.service_list .item i.s9 {background-image: url('/images/FamilycultureCenter/main/m_service_ico9.svg');}
	.service_list .item i.s10 {background-image: url('/images/FamilycultureCenter/main/m_service_ico10.svg');}
	.service_first .item.sugang a {
		color: #fff;
		background-color: #8848B9;
		border: 0;
	}
	.service_list .item.sisul a {background-image: linear-gradient(0deg, #FBEAEF 0%, #FFF 40%);}
		
	/* main */
	.m_service ul.service_main li a.sugang{background:#824bad; color:#fff;}
	.m_service ul.service_main li a.sisul{border:1px solid #824bad; color:#824bad;}
	.m_service ul.service_main li a.sugang:hover{color:#fff;}
	
	@media all and (max-width:1400px){
		.m_service {width: 96%;margin: 30px auto;}
	}
	@media all and (max-width:1280px){
		.service_first {width:20%;}	
		.service_list {width:80%;}
		.service_cont .item a {height: 150px;}
		.service_cont .item i {width: 70px;height: 80px;background-size: 70px;}
	}
	@media all and (max-width:1024px){
		.service_first {width:25%;}	
		.service_list {width:75%;}
		.service_cont .item a {font-size: 14px;}
		.service_cont .item a strong br {display: none;}
	}
	@media all and (max-width:768px){
		.service_head h3{font-size: 20px;}
		.service_head .service-control {gap:2px;}
		.service_head .service-control button{width: 24px;height: 24px;}
		.service_head .service-control a.allmenu {padding: 0 8px;font-size: 12px;line-height: 24px;}
		
		.service_first {width:34%;}	
		.service_list {width:66%;}
		.service_cont .item a {height: 120px;font-size: 13px;}
		.service_cont .item i {width: 60px;height: 80px;background-size: 60px;}
	}
	@media all and (max-width:460px){
		.service_first,
		.service_list {width:50%;}
	}


/* 소식 */
#m_news {position:relative;overflow:hidden;margin-bottom: 50px;}
#m_news .inner{	
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-content:stretch;
}
#m_news .m_notice{position:relative;width:66%;height: 320px;}
#m_news .m_video{position:relative;width:32%;-webkit-border-radius: 1rem; border-radius: 1rem;overflow:hidden;}

	/* 탭 기본*/
	.notice_tab {position:relative;border:0;margin:0 auto;z-index: 0;}
	.notice_tab:after {display:block;clear:both;content:''}
	.notice_tab > li {display:inline-block;width:auto;margin:0 -5px;overflow:hidden;}
	.notice_tab .tab_cont {position: absolute;width: 100%;top: 68px;left: 0;opacity: 0;display: none;}
	/* 탭 활성 */
	.notice_tab > li.active .tab_cont {display: block;}
	.notice_tab > li.show .tab_cont {display: block;width: 100%;top: 68px;opacity: 1;}
	/* 탭 스타일 */
	.notice_tab > li button.btn_tab{
		position: relative;
		display: block;
		min-width: 100px;
		height: 48px;
		padding: 0 1.5rem;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		color: #333;
		-webkit-border-radius: 9rem;
		border-radius: 9rem;
	}	
	.notice_tab > li button.btn_tab::before {
		position: absolute;
		display:block;
		content: '';
		top: 50%;left: 0;transform: translateY(-50%);
		width: 5px; height: 5px;
		background: #C9C6E3;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		z-index: -1;
	}
	.notice_tab > li:first-child button.btn_tab::before {display: none;}
	.notice_tab > li.active button.btn_tab{
		font-weight: 700;
		color: #fff;
		background: linear-gradient(90deg, #4B3B99 0%, #72337C 100%);
		-webkit-border-radius: 9rem;
		border-radius: 9rem;
	}
	/* 소식 리스트 */
	.notice_m{
		position:relative;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		align-content:stretch;
	}
	.notice_m a{
		display:block; position:relative;
		width:32.3%; height:240px; margin-bottom: 1rem;padding: 2rem;	
		background:#fff; color:#000;
		-webkit-border-radius: 1rem;
		border-radius: 1rem; 
		-webkit-box-shadow:0 .5rem 1.5rem 0px rgb(139 62 222 / 15%);
		-moz-box-shadow:0 .5rem 1.5rem 0px rgb(139 62 222 / 15%);
		box-shadow:0 .5rem 1.5rem 0px rgb(139 62 222 / 15%);
	}
	.notice_m a p.subject{margin-left: -5px;}
	.notice_m a p.subject span{
		display: inline-block;
		margin-right: 3px;
		padding: 0 .75rem;
		font-size: 13px; font-weight: 500;
		line-height: 2;
		vertical-align: top;
		-webkit-border-radius: 2rem;
		border-radius: 2rem;
	}
	.notice_m a p.subject span.ico{background: #879ED7;color: #fff;}
	.notice_m a p.subject span.new{border: 1px solid #5f4dab;color: #5f4dab;}
	.notice_m a p.title{margin-top: 1rem;font-size: 17px;font-weight: 500;line-height: 1.5;height: 80px;overflow: hidden;}
	.notice_m a p.date{position:absolute;bottom: 2rem;left: 2rem;font-size: 13px;color: #555;}
	.tab_cont p.more{position:absolute; top:-68px; right:0;} 
	.tab_cont p.more a{
		display:block;
		width:48px; height:48px; 
		background: url('/images/FamilycultureCenter/main/btn_more.svg') center center no-repeat;
		background-size: 48px auto;
		text-indent:-9999px;
	}
	.notice_m a:hover{
		border: 1px solid #AF8ACC;
		transform: scale(1.05);
	}
	@media all and (max-width:1400px){
		.notice_tab > li button.btn_tab{
			height: 40px;
			line-height: 40px;
			font-size: 16px;
		}	
		.notice_m a{height:200px;padding: 1.5rem;}
		.notice_m a p.title{font-size: 16px; height: 76px;}
	}
	@media all and (max-width:1024px){
		#m_news .inner{	
			flex-direction: column;
		}
		#m_news .m_notice{width: 100%;height: 300px;}
		#m_news .m_lecture{width: 100%;}
		#m_news .m_video {width: 100%;height: 300px;}
	}
	@media all and (max-width:768px){
		.notice_tab{text-align: center;}
		.notice_tab > li {margin: 0 -5px;}
		.notice_tab > li button.btn_tab {min-width: 80px;height: 36px;padding: 0 1rem;line-height: 36px;font-size: 14px;}
		
		.notice_tab .tab_cont ,
		.notice_tab > li.show .tab_cont {top: 52px;}	
	
		#m_news .m_notice{height: 400px;margin-bottom: 40px;}
		
		.notice_m{display: block;}
		.notice_m a{width: 100%;height: auto;margin-bottom: 6px;text-align: left;}
		.notice_m a p.date{bottom: auto;top: 20px;left: auto;right: 20px;font-size: 11px;}
		.notice_m a p.title{margin-top: .5rem;width:90% !important;display: block;font-size: 14px;height: auto;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap !important;overflow: hidden !important;} 
		
		.tab_cont p.more{top:auto;bottom:-40px;right:0;}
		.tab_cont p.more a{
			display:block; text-indent:0; 
			width:auto; height:36px; padding:0 20px;
			line-height:34px; font-size:13px;
			background:#fff; border: 1px solid rgba(0, 0, 0, 0.10); 
			border-radius:30px 30px; -webkit-border-radius:30px 30px; 
		}
		.notice_m a:hover{
			margin-top:0;
			transform: scale(1.02);
		}
	}
	
	
	/* 공개강좌 */
	.m_lecture > a{
		display:block; height:100%; position:relative; overflow:hidden;
		border: 1px solid rgba(0, 0, 0, 0.3); 
		border-radius:12px 12px; -webkit-border-radius:12px 12px;
		box-shadow: 0 3px 15px rgba(73, 61, 112, 0.4)  ;
		-webkit-box-shadow: 0 3px 15px rgba(73, 61, 112, 0.4)  ;
		-moz-box-shadow: 0 3px 15px rgba(73, 61, 112, 0.4)  ;
	}
	.m_lecture > a .subject{position:absolute; top:20px; left:20px;}
	.m_lecture > a .subject span.lec{
		display:inline-block; 
		padding:6px 13px 5px 13px;
		background:#b3adf2; color:#fff;
		font-size:11px; line-height:1.2em;
		border-radius:30px 30px; -webkit-border-radius:30px 30px; 
	}
	.m_lecture > a .subject span.new{
		display:inline-block; 
		padding:6px 13px 5px 13px;
		background:#fff; color:#8881d2; border:1px solid #b3adf2;
		font-size:11px; line-height:1.2em;
		border-radius:30px 30px; -webkit-border-radius:30px 30px; 
	}
	.m_lecture > a .img{height:100%; border-radius:11px 11px 0 0; -webkit-border-radius:11px 11px 0 0; overflow:hidden;}
	.m_lecture > a .img span.no-img{display:block; height:220px; text-indent:-9999px; background:#ededed url('/images/FamilycultureCenter/main/lecture_sample.jpg') center center no-repeat; background-size:100%;}
	.m_lecture > a .img img{width:100%;}
	.m_lecture > a .info{position:absolute; bottom:0; width:100%; padding:20px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%); }
	.m_lecture > a .info span.title{display:block; margin-bottom:5px; color:#fff; font-size:16px; width:90% !important;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap !important;overflow:hidden !important}
	.m_lecture > a .info span.date{color:#aaa; font-size:13px; color:#ccc;}
	.m_lecture p.more{position:absolute; bottom:10px; right:10px; }
	.m_lecture p.more a{
		display:block; text-indent:-9999px;
		width:40px; height:40px;
		background:url('/images/FamilycultureCenter/main/notice_more.gif') center center no-repeat;
	}
	
	@media all and (max-width:1000px){
		.m_lecture > a .img{height:auto; }
		.m_lecture > a .img span.no-img{display:block; min-height:220px; height:auto; text-indent:-9999px; background:#ededed url('/images/FamilycultureCenter/main/lecture_sample.jpg') center center no-repeat; background-size:500px;}
		.m_lecture > a .info{padding:20px;}
	}