@charset "utf-8";








/* 서브비주얼 */
#svisible { position:relative; width:100%; height:180px; background:#ebf6f8 url(/images/chd/svisible_img.png) no-repeat 50% 50%; }

#svisible .txt1 { position:absolute; top:60px; color:#268c8e; font-weight:700; font-size:120%; opacity:0; letter-spacing:-1px;
	animation-name:txtMove1;
	animation-duration:1.0s; /* 걸리는 시간 */
	animation-fill-mode:forwards;
	animation-delay:0.2s;
	animation-timing-function:ease;
	animation-iteration-count:1; /* 반복횟수 */
	animation-direction:normal; /* 진행방향 alternate : 순방향 -> 역방향*/ 
	/*
	animation:txtMove1 1.5s 0.2s 1 ease fowards normal;
	*/
}

#svisible .txt2 { position:absolute; top:90px; color:#f36700; font-weight:700; font-size:185%; opacity:0; letter-spacing:-1px;
	animation:txtMove2 1.0s 0.5s 1 forwards;
}


@keyframes txtMove1 {
	from { right:70px; opacity:0; }
	to { right:120px; opacity:1; }
}
	
@keyframes txtMove2 {
	from { right:70px; opacity:0; }
	to { right:120px; opacity:1; }	
}



@media (min-width:1281px) and (max-width:1400px){
	#svisible { background:#ebf6f8 url(/images/chd/svisible_img.png) no-repeat 10% 50%; }
}

	
@media (min-width:1025px) and (max-width:1280px){
	#svisible { background:#ebf6f8 url(/images/chd/svisible_img.png) no-repeat -10% 50%; }
}


@media (min-width:769px) and (max-width:1024px){
	#svisible { display:none; }
}

@media (max-width:768px){
	#svisible { display:none; } 
}





#content p { line-height:1.5; }
.box { width:100%; padding:25px; border:1px solid #ddd; }

@media (max-width:768px){
	.box { padding:20px 15px; }
}






/* 페이지 타이틀 */
.pagetitle { position:relative; width:100%; height:110px; border-bottom:1px solid #eee; margin-bottom:50px; }

.pagetitle .path { position:absolute; left:5px; bottom:15px; font-size:90%; color:#888; }
.pagetitle .path img { position:relative; top:4px; }

.pagetitle h1 { padding:0px 0 0 5px; font-weight:700; font-size:250%; color:#000; }

.pagetitle .snsbtn { position:absolute; right:0; bottom:10px; height:35px; }
.pagetitle .snsbtn ul { height:35px; overflow:hidden;}

.pagetitle .snsbtn ul.pcTabletBtn { display:block; }
.pagetitle .snsbtn ul.mobileBtn { display:none; }

.pagetitle .snsbtn ul li { float:left; margin-left:10px; }


@media (min-width:769px) and (max-width:1024px){		
	.pagetitle .snsbtn ul.pcTabletBtn { display:none; }
	.pagetitle .snsbtn ul.mobileBtn { display:block; }
	.pagetitle .snsbtn ul li { margin-left:5px; }
	
}

@media (max-width:768px){
	.pagetitle { height:110px; border-bottom:none; }
	.pagetitle .path { position:static; width:100%; height:55px; line-height:55px; padding-left:10px; padding-right:80px; background:#f36700; color:#fff; display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
	.pagetitle .path img { position: relative; top:19px; }
	
	.pagetitle h1 { padding:38px 15px 0 15px; font-size:200%; color:#000; }

	
	.pagetitle .snsbtn { position:absolute; right:5px; top:10px; }
	
	.pagetitle .snsbtn ul.pcTabletBtn { display:none; }
	.pagetitle .snsbtn ul.mobileBtn { display:block; }
	.pagetitle .snsbtn ul li { margin-left:5px; }
}





/* 숙제도우미 */
.homeworkhelper dl dt { padding:10px 20px; border-radius:5px; background:#36a6a8; color:#fff; display:inline-block; margin-bottom:10px; }
.homeworkhelper dl dd { width:100%; padding:0 10px 10px 10px; border-bottom:1px solid #ddd; line-height:1.5; margin-bottom:20px; }







/* 알고싶어요 */
.interest { width:100%; }
.interest .committee ul li { float:left; margin-right:50px; }

.interest .committeeImg { padding:100px; box-sizing:border-box; }
.interest img { width:100%; }

@media (min-width:769px) and (max-width:1024px){
	.interest .committee ul li { float:left; margin-right:30px; }
	.interest .committeeImg { padding:30px 20px 30px 40px; }
}

@media (max-width:425px){
	.interest .committee ul li { float:left; margin-right:10px; }
	.interest .committeeImg { padding:10px 10px 10px 30px; }
	
}



/* 유용한누리집 */
.linksite { display:flex; justify-content:space-between; }

.linksite > div { position:relative; width:calc(100% / 3 - 20px); padding:36px 24px 24px; border:2px dotted #ddd; border-radius:16px; margin-left:30px;}
.linksite > div:nth-child(1) { margin-left:0; }
.linksite > div::after { position:absolute; bottom:-2px; right:-2px; content:''; width:10%; height:10%; border-radius:0 0 16px 0; border-right:2px solid #415BC0; border-bottom:2px solid #415BC0; z-index:1; animation:borderUp 1s linear forwards; }

.linksite > div:nth-child(2)::after { animation-delay:0.3s; }
.linksite > div:nth-child(3)::after { animation-delay:0.6s; }


.linksite > div h3 { position:absolute; top:-18px; left:12px; background-color:#fff !important; padding-right:4px;}

.linksite > div ul li a { display:block; padding:12px 20px; font-size:106.25%; background:#586CB6; border:1px solid #586CB6; color:#fff; border-radius:4px; transition:0.3s; }
.linksite > div ul li a:hover,
.linksite > div ul li a:focus,
.linksite > div ul li a:active { background:#fff; color:#586CB6; }
.linksite > div ul li { margin-bottom:12px; }
.linksite > div ul li:last-child { margin-bottom:0; }

@keyframes borderUp {
	0% { height:10%; }
	80% { height:40%; }
	100% { height:50%; }
}
@media (min-width:769px) and (max-width:1024px){
	.linksite { flex-wrap:wrap; }
	.linksite > div { width:calc(50% - 15px); margin-bottom:40px; }
	.linksite > div:nth-child(3) { margin-left:0; }
}

@media (max-width:768px){
	.linksite { flex-direction:column; }
	.linksite > div { width:100%; margin:0 0 32px;}
}




/* 알고싶어요 */

.interest ul li { flex-direction:column; display:flex; align-items:center; }
.interest ul li div { position:relative; display:flex; align-items:center; justify-content:center; }

.interest .org1 { position:relative; max-width:94rem; margin:0 auto 9.6rem; }
.interest .org1 > li > div { flex-direction:column; width:18rem; height:18rem; border-radius:10rem; background:url(/images/council/sub/org1_bg.png) no-repeat center/cover; color:#fff; }
.interest .org1::before { position:absolute; left:50%; top:0; content:''; width:.1rem; height:calc(100% - 4.7rem); background:#ddd; z-index:0; }
.interest .org1 > li > div strong { font-size:1.5em; }

.interest .org2 { width:100%; }
.interest .org2 > li > div { width:12rem; height:12rem; font-size:2rem; border-radius:8rem; background:#00a990; color:#fff; margin-top:4.8rem; }

.interest .org3 { position:relative; display:flex; justify-content:space-between; width:100%; margin:9.6rem 0; }
.interest .org3 > li { width:16rem; }
.interest .org3 > li > div { width:100%; height:4.8rem; border-radius:2.4rem .8rem 2.4rem .8rem; background:#344b47; color:#fff; }
.interest .org3 > li .spc-list { position:absolute; right:0; top:50%; max-width:16rem; background:#43a17e; }
.interest .org3::before,
.interest .org3::after { position:absolute; left:50%; top:-3.1rem; content:''; width:calc(100% - 16rem); height:.1rem; background:#ddd; transform: translateX(-50%); }
.interest .org3::after { top:calc(50% + 2.4rem); z-index:-1; }

.interest .org4-1 { width:100%; padding:.8rem 1.2rem; background:#fff; border-radius:.8rem; border:.1rem solid #ddd; margin-top:.8rem; }
.interest .org4-1 > li { padding:.8rem .8rem; border-bottom:.1rem dashed #ddd; }
.interest .org4-1 > li:last-child { border-bottom:0; }

.interest .org4-2 { position:absolute; bottom:-14.4rem; display:flex; width:100%; }
.interest .org4-2::before { position:absolute; left:50%; top:-3.1rem; content:''; width:calc(100% - ((100% / 8) - .7rem)); height:.1rem; background:#ddd; transform: translateX(-50%); }
.interest .org4-2 > li { position:relative; justify-content:center; width:calc(100% - .7rem); height:6.4rem; margin:0 0 0 .8rem; }
.interest .org4-2 > li:first-child { margin-left:0; }
.interest .org4-2 > li { background:#fff; border-radius:.4rem; border:.1rem solid #344b47; color:#344b47; }
.interest .org4-2 > li::before { position:absolute; left:50%; top:-50%; content:''; width:.1rem; height:50%; background:#ddd; }
.interest .org4-2 > li::after { position:absolute; left:calc(50% - .4rem); top:-.4rem; content:''; width:.8rem; height:.8rem; background:#fff; border:.2rem solid #344b47; border-radius:4rem; }

.interest .org3 > li > div.cmt { background:#00995b; }
.interest .org3 > li > div.spc-cmt { background:#3D6BC9; }

.interest .org3 > li > div.cmt::before,
.interest .org3 > li > div.spc-cmt::before { position:absolute; left:50%; top:-3.1rem; content:''; width:.1rem; height:3.1rem; background:#ddd; }



.interest .comUl { display:flex; flex-wrap:nowrap; justify-content:center;}
.interest .comUl li { position:relative; padding-left:11px; font-size:1.8rem; margin:0 15px; }
.interest .comUl li:before { content:''; position:absolute; left:0; top:12px; width:4px; height:4px; background:orange;  display:inline-block; }




@media (max-width:768px){
	.interest .org1::before { height:calc(100% - 14.3rem); }
	.interest .org3 { margin:9.6rem 0 19.2rem; }
	.interest .org4-2 { flex-wrap:wrap; bottom:-24rem; }
	.interest .org4-2 > li { width:calc(25% - .6rem); margin-left:.8rem; margin-bottom:1.6rem; }
	.interest .org4-2 > li:nth-child(1),
	.interest .org4-2 > li:nth-child(5n) { margin-left:0; }

	.interest .org4-2 > li:nth-child(n+5)::before { display:none; }
	.interest .org4-2::before { width:calc(100% - (25% - .6rem)) }
}


@media (max-width:500px){
	.interest .comUl { flex-wrap:wrap; }
	.interest .comUl li { width:calc(50% - 20px); text-align:left; align-items:flex-start; margin:0 10px; }
	.interest .comUl li:before { content:''; position:absolute; left:0; top:10px; width:4px; height:4px; background:orange;  display:inline-block; }
}