@charset "utf-8";

@font-face{
	font-family: NanumMyeongjo;
	src : url("/css/font/NanumMyeongjo.eot");
	src : url("/css/font/NanumMyeongjo.eot?#iefix") format('embedded-opentype'), 
	      url("/css/font/NanumMyeongjo.woff") format("woff"), 
	      url("/css/font/NanumMyeongjo.ttf") format("ttf");
}


/* 공통*/
.organ_wrapper {position:relative;margin:0;padding:0;width:100%;}
.organ_wrapper #mcontainer{margin:0; padding:0px;}



/* 메인비주얼 */
#mvisual{position:relative; top:-12px; height:268px;background:url(/images/volunteer/content/mvisual_bg_360.JPG) no-repeat 50% top; background-size:cover;}
#mvisual .wrap{position:relative; margin:0 auto; padding:20px 0 0; width:100%; background:none;}
#mvisual h2{color:#ffffff; letter-spacing:1px; font-weight:500;  }
#mvisual h2 b{display:block;margin:0 0 0px;font-size:0px; }
#mvisual h2 b:before{display:block;position:absolute;top:120px;left:50px;width:0px;height:0px; background:#444C58; content:'';}


/* 메인링크 */
#mvisual #mlink{position:absolute;bottom:0;left:0;width:100%;background-color:rgba( 0, 0, 0, 0.7 );}
#mvisual #mlink ul.ml_box *{box-sizing: border-box;}
#mvisual #mlink ul.ml_box{}
#mvisual #mlink ul:after { content:""; display:block; clear:both; }
#mvisual #mlink ul.ml_box li:first-child{border-left:1px solid #A1D377; }
#mvisual #mlink ul.ml_box li{display:inline-block;float:left;width:50%; height:40px; background:#7DC242 url(/images/volunteer/content/mcnt4_bg.png) no-repeat; border-right:1px solid #A1D377; border-bottom:1px solid #A1D377;}
#mvisual #mlink ul.ml_box li a{display:block;margin:0 auto;padding:2px 0 0 0px;text-align:center;font-size:13px;line-height:40px;color:#fff;}
#mvisual #mlink ul.ml_box li a i{vertical-align:middle; display:inline-block; width:23px;height:18px; background: url(/images/volunteer/content/img_bu.PNG) no-repeat;}
#mvisual #mlink ul.ml_box li a:hover,
#mvisual #mlink ul.ml_box li a:active,
#mvisual #mlink ul.ml_box li a:focus{ text-decoration:underline;}




/* 메인 콘텐츠 */
.msectwrap{display:block;clear:both;content:'';padding:20px 4% 30px;}


/* 메인 공지사항 */
.sect1 .mcnt3{display:none; visibility:hidden;}
.sect1 .m_mcnt3{position:relative;height:200px; margin:0 0 30px 0; background:#fff url(/images/organ/common/mcnt2_bar.gif) repeat-x; border-radius:3px; }
.sect1 .m_mcnt3:after{display:block;clear:both;content:'';}

.sect1 .m_mcnt3 h3{float:left;position:relative;}
.sect1 .m_mcnt3 h3:after{display:block;position:absolute;top:16px;left:0;width:1px;height:9px;background:#a2a6ac;content:'';}
.sect1 .m_mcnt3 h3:first-child:after{display:none;}
.sect1 .m_mcnt3 h3 a{display:block;padding:10px 20px 6px;font-size:16px;color:#fff; text-decoration:none;}
.sect1 .m_mcnt3 h3 a.ov:before{position:absolute;bottom:-3px;left:50%;margin-left:-40px;width:80px;height:3px;background:#7DC242;content:'';}
.sect1 .m_mcnt3 h3 a.ov:after{position:absolute;bottom:-17px;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:#7DC242;content:'';}

.sect1 .m_mcnt3 .grap{position:absolute;top:67px;left:0; width:90%;background:#fff; border-radius:3px;}
.sect1 .m_mcnt3 .grap ul{padding:0 0 5px 0;}
.sect1 .m_mcnt3 .grap li{position:relative;margin:6px 0 0;padding:0 0 0 8px;font-size:13px;color:#999}
.sect1 .m_mcnt3 .grap li:before{display:block;position:absolute;top:9px;left:0;width:3px;height:3px;background:#a9a9a9;content:'';}
.sect1 .m_mcnt3 .grap li.new:before{top:2px;left:-7px;width:16px;height:16px;background:url(/images/organ/common/notice_new.png) no-repeat;}
.sect1 .m_mcnt3 .grap li:first-child{margin:0;}
.sect1 .m_mcnt3 .grap li:after{display:block;clear:both;content:'';}
.sect1 .m_mcnt3 .grap li a{display:block;float:left;overflow:hidden;width:65%;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-size:14px;color:#545454}
.sect1 .m_mcnt3 .grap li a:hover,
.sect1 .m_mcnt3 .grap li a:focus{text-decoration:underline;}
.sect1 .m_mcnt3 .grap li span{float:right;}

.sect1 .m_mcnt3 .grap .more{/*display:none;*/position:absolute;top:-55px;right:5px}
.sect1 .m_mcnt3 .grap .more a{display:block;width:24px;height:24px;background:#2b2c2e url(/images/organ/common/more.png) no-repeat 49% 50%;font-size:0;line-height:0;}



/*배너*/
.sect2 .mcnt_banner {background:url(/images/volunteer/content/main_img01.JPG) repeat 50% 0;}
.sect2 .mcnt_banner a h3{margin:5px 0;padding:0 0 0 118px;font-size:16px;font-weight:500;}
.sect2 ul li a .b_txt{display:block; visibility:visible; padding:0 10px 0 118px; font-size:13px;}
.sect2 .mcnt_banner a h3,
.sect2 .mcnt_banner a:hover h3,
.sect2 .mcnt_banner a:active h3{color:#fff;}
.sect2 .mcnt_banner a{background:url(/images/volunteer/content/main_img01_play.PNG) no-repeat 17px 50%; border-radius:3px; color:#fff;}
.sect2 .mcnt_banner a:hover,
.sect2 .mcnt_banner a:focus{color:#fff;}




@media only screen and (min-width:320px){

	/* 메인비주얼 */
	#mvisual{height:250px;}

	
	/* 메인 공지사항 */
	.sect1 .m_mcnt3 .grap {padding:0 5% 10px 5%;}
}




@media only screen and (min-width:480px){

	/* 메인비주얼 */
	#mvisual h2 b{display:block;margin:60px 0 0 50px;font-size:0px;}
	#mvisual h2 b:before{top:65px;left:50px;width:0px;height:0px; background:#444C58; content:'';}


	/* 메인 공지사항 */
	.sect1 .m_mcnt3 .grap .more{right:20px}


	/*배너*/	
	.sect2 .mcnt_banner a h3{margin:15px 0 5px 0; font-size:17px;font-weight:500;}
	.sect2 ul li a .b_txt{font-size:15px;}

}


@media only screen and (min-width:768px){

	/* 메인비주얼 */
	#mvisual{height:371px; background:url(/images/volunteer/content/mvisual_bg_768.JPG) no-repeat 50% top;}
	#mvisual .wrap{position:relative; margin:0 auto; padding:150px 0 0 50PX; width:980px;}

	#mvisual h2 b{display:block;margin:0 0 0px;font-size:0px;}
	#mvisual h2 b:before{width:0px;height:0px;}


	/* 메인링크 */
	#mvisual #mlink ul.ml_box li{width:25%; height:60px;}
	#mvisual #mlink ul.ml_box li{border-bottom:none;}
	#mvisual #mlink ul.ml_box li a{ padding:5px 0 0 0px; font-size:14px; line-height:50px;}

	#mvisual #mlink ul.ml_box li a i{vertical-align:middle; display:inline-block; width:60px; height:49px; background: url(/images/volunteer/content/m_quickicon.PNG) no-repeat;transition:all 0.7s;}
	#mvisual #mlink ul.ml_box li a.btn1 i{background-position:-38px 0px;}
	#mvisual #mlink ul.ml_box li a.btn2 i{background-position:-163px 0px;}
	#mvisual #mlink ul.ml_box li a.btn3 i{background-position:-288px 0px;}
	#mvisual #mlink ul.ml_box li a.btn4 i{background-position:-413px 0px;}
	#mvisual #mlink ul.ml_box li a.btn1:hover i,
	#mvisual #mlink ul.ml_box li a.btn1:focus i{background-position:-38px -90px;}
	#mvisual #mlink ul.ml_box li a.btn2:hover i,
	#mvisual #mlink ul.ml_box li a.btn2:focus i{background-position:-163px -90px;}
	#mvisual #mlink ul.ml_box li a.btn3:hover i,
	#mvisual #mlink ul.ml_box li a.btn3:focus i{background-position:-288px -90px;}
	#mvisual #mlink ul.ml_box li a.btn4:hover i,
	#mvisual #mlink ul.ml_box li a.btn4:focus i{background-position:-413px -90px;}


	/* 메인 공지사항 */
	.sect1 .mcnt3{display:block; visibility:visible; position:relative; height:250px; margin:0 0 20px 0; background:#fff url(/images/organ/common/mcnt2_bar.gif) repeat-x; border-radius:3px;}
	.sect1 .mcnt3:after{display:block;clear:both;content:'';}

	.sect1 .mcnt3 h3{float:left;position:relative; }
	.sect1 .mcnt3 h3:after{display:block;position:absolute;top:16px;left:0;width:1px;height:9px;background:#a2a6ac;content:'';}
	.sect1 .mcnt3 h3:first-child:after{display:none;}
	.sect1 .mcnt3 h3 a{display:block;padding:10px 20px 6px;font-size:16px;color:#fff; text-decoration:none;}
	.sect1 .mcnt3 h3 a.ov:before{position:absolute;bottom:-3px;left:50%;margin-left:-40px;width:80px;height:3px;background:#7DC242;content:'';}
	.sect1 .mcnt3 h3 a.ov:after{position:absolute;bottom:-17px;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:#7DC242;content:'';}

	.sect1 .mcnt3 .grap{position:absolute;top:65px;left:0;padding:0 5% 10px 5%;width:90%;background:#fff; border-radius:3px;}
	.sect1 .mcnt3 .grap li{position:relative;margin:9px 0 0;padding:0 0 0 8px;font-size:13px;color:#999}
	.sect1 .mcnt3 .grap li:before{display:block;position:absolute;top:9px;left:0;width:3px;height:3px;background:#a9a9a9;content:'';}
	.sect1 .mcnt3 .grap li.new:before{top:2px;left:-7px;width:16px;height:16px;background:url(/images/organ/common/notice_new.png) no-repeat;}
	.sect1 .mcnt3 .grap li:first-child{margin:0;}
	.sect1 .mcnt3 .grap li:after{display:block;clear:both;content:'';}
	.sect1 .mcnt3 .grap li a{display:block;float:left;overflow:hidden;width:65%;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-size:14px;color:#545454}
	.sect1 .mcnt3 .grap li a:hover,
	.sect1 .mcnt3 .grap li a:focus{text-decoration:underline;}
	.sect1 .mcnt3 .grap li span{float:right;}

	.sect1 .mcnt3 .grap .more{/*display:none;*/position:absolute;top:-55px;right:23px}
	.sect1 .mcnt3 .grap .more a{display:block;width:24px;height:24px;background:#2b2c2e url(/images/organ/common/more.png) no-repeat 49% 50%;font-size:0;line-height:0;}

	.sect1 .mcnt1 .grap .obj{height:218px;}


	/*배너*/
	.sect2 .mcnt_banner a h3{margin:35px 0 0;padding:0; font-size:18px; font-weight:500;}
	.sect2 .mcnt_banner a{background:url(/images/volunteer/content/main_img01_play.PNG) no-repeat 50% 100px;}
	.sect2 ul li a .b_txt{display:none; visibility:hidden;}



}





@media only screen and (min-width:1000px){


	/* 메인링크 */
	#mvisual #mlink ul.ml_box{z-index:12; margin:0 auto; width:1000px; }



	/* 메인 콘텐츠 */
	#mvisual{height:371px; background:url(/images/volunteer/content/mvisual_bg.JPG) no-repeat 50% top;}
	.msectwrap{display:block; clear:both;content:''; padding:30px 0; margin:0 auto; width:1000px; height:284px;}



	/* 메인 공지사항 */
	.sect1 .mcnt3 h3:first-child{padding-left:20px; }
	.sect1 .mcnt3 h3:first-child:after{display:none;}
	.sect1 .mcnt3 h3:first-child a.ov:before{margin-left:-30px;}
	.sect1 .mcnt3 h3:first-child a.ov:after{margin-left:3px;}
	.sect1 .mcnt3 .grap{top:65px; height:191px; padding:0 24px 4px 24px; width:440px;}
	.sect1 .mcnt3 .grap li a{width:70%; }
	.sect1 .mcnt3 .grap .more{display:block;}


}



@media only screen and (min-width:1200px){

	/* 메인비주얼 */
	#mvisual .wrap{padding:150px 0 0 20PX;}
	#mvisual h2 b:before{left:20px;}


}