@charset "UTF-8"; 


/* 모바일작업중 */
@media only screen and (max-width: 1440px){
/*gallery*/
.gallery ul li {width:18.7%}

/* social */
.link-zone .social {width:100%;}
}


@media only screen and (max-width: 1200px){
/* volunteer */
/*.volunteer {width:100%;height:600px;}
.volunteer .popup-zone {width: 50%;top:20%;left:0;border-radius:0;}
.volunteer .volunteer_02 {width:50%;top:20%;left:50%;}
.volunteer .volunteer_03 {width: 50%;left:0;top:56.7%;}
.volunteer .volunteer_04 {width:50%;left:50%;top:56.7%; border-radius:0;}
.volunteer .volunteer_04 .icon_1365 {position: absolute;right: 9%;bottom: 5%;}
.volunteer .volunteer_04 ul {width:90%;margin:2% auto 0;}*/
/**/
.gallery {width:99%;margin:0 auto;}
}
/* mobile 1200px end */


@media only screen and (max-width: 1024px){

/* header .logo h1 {text-align:left;padding:2% 2% 2%;} */
.rimg {display:none;}

.fadeSlide {padding-bottom:30%;}
#img1, #img2  {padding-bottom:30%;}


/* .volunteer .volunteer_02 .pnum {font-size:2.5em;} */


/*gallery*/
.gallery ul li {width:45%}
.gallery ul li:last-child {display:none;}
.gallery ul li a img {height:auto;width:100%;}

/* newsbox */
.newsbox_wrap .news_box ul.con {display:none;}
.newsbox_wrap .news_box .con_m {display:block;text-align:center;}
.newsbox_wrap .news_box .con_m li {background:#89c238;width:20%;height:100px;}
.newsbox_wrap .news_box .con_m li a {color:#fff;font-weight:600;display:block;width:100%;height:100%;}
/**/
.link-zone .social {width: 100%;text-align: center;margin: 0 auto;}
/* gallery */
.link-zone .social ul li {display: inline-block;padding: 0px 5px;height: 120px;line-height: 170px;width: 13%;}
.partner {display:none;}
/* 주요사업 */

} 
/* mobile 1024px end */


@media only screen and (max-width: 768px){
/* header */
header .logo {width:100%;}

.fadeSlide {padding-bottom:50%;}
#img1, #img2  {padding-bottom:50%;}


/* volunteer */
/* .volun_title > img {display:none;}
.volunteer .volunteer_02 .pnum {font-size:2.5em;}

.volunteer .popup-zone {width: 50%;top:18%;left:0;}
.volunteer .volunteer_02 {width:50%;top:18%;left:50%;}
.volunteer .volunteer_03 {width: 50%;top:54.7%;left:0;}
.volunteer .volunteer_04 {width:50%;top:54.7%;} */

/* social */

.link-zone .social ul li {display: inline-block;padding: 0px 5px;height: 120px;line-height: 170px;width: 13%;}



/**/
.partner {display:none;} 

/* footer */
.break {display:block;}
}
/* mobile 768px end */


@media only screen and (max-width:425px){
/* header */
header .logo_img {width:80%;} 


.fadeSlide {padding-bottom:60%;}
#img1, #img2  {padding-bottom:60%;}


/* volunteer */
/* .volunteer_wrap {height:0;padding-bottom:235%;margin: -1% 0 0 0;} */
/* .volunteer_wrap {height:990px;margin: -1% 0 0 0;}
.volunteer {width:100%;}
.volunteer h1 {font-size:2em;}
.volunteer .popup-zone {width:100%;top:12%;}
.volunteer .volunteer_02 {width:100%;top:48.6%;left:0;}
.volunteer .volunteer_03 {width:100%;top:85.2%;left:0;}
.volunteer .volunteer_04 {width:100%;top:119.9%;left:0;} */

/* gallery */
.gallery_wrap {margin: -15px 0 40px 0}
.gallery h1 {font-size:2em;}
/**/
.link-zone .social .vertical_dot {display:none;}

.link-zone .social ul li:nth-child(2){background-size:100%;}
.link-zone .social ul li:nth-child(4){background-size:100%;}
.link-zone .social ul li:nth-child(6){background-size:100%;}
.link-zone .social ul li:nth-child(8){background-size:100%;}
.link-zone .social ul li:nth-child(10){background-size:100%;}



}



@media only screen and (max-width: 320px){
.fadeSlide {padding-bottom: 50%;}
#img1 {padding-bottom:50%;}
#img2 {padding-bottom:50%;}







.link-zone .social .vertical_dot {display:none;}
.link-zone .social ul li {width: 10%;}
}
/* mobile 320px end */













/*기존 m css */
@media (max-width:1200px) {
	.location .loca_ {width:100%;margin:0;padding:0;}
}


@media (max-width:1024px){
    
/*html {overflow-x: visible}*/
body {min-width: auto}
    
    header .nav_top {display: none}
	header .logo h1 {text-align:left;padding:2% 2% 2%;}
   /* header h1 {padding:0; padding-left: 1%; padding-top: 3%}*/
    header h1 a {width:185px; margin:0; background-size: contain}
    header .nav {display: none}
	header .rimg img {display:none;}


    .nav-m > ul { background-color: #69d5ee}
    .nav-m > ul > li {display: block; color:#fff; border-bottom: 1px solid #62b58b; line-height: 45px; text-align: center; font-size: 16px; cursor:pointer}
    .nav-m ul li ul {display: none; background-color: #f4f4f4; }
    .nav-m ul li ul li a {display: block; color:#444; text-align: center; line-height: 45px; font-size: 14px}
.nav-trigger {display:block; position: absolute; z-index: 999; top: 15%; right: 2%; height: 30px; width: 30px; overflow: hidden; 
color: transparent; white-space: nowrap; text-indent: 100%;}
.nav-trigger span, .nav-trigger span:before, .nav-trigger span:after { position: absolute; height: 2px; width: 30px; background: #69d5ee;}
.nav-trigger span { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 
background .3s; transition: background .3s;}
.nav-trigger span:before, .nav-trigger span:after { content: ''; top: 0; left: 0; -webkit-transition: background .3s, -webkit-transform .3s; 
transition: background .3s, -webkit-transform .3s; transition: background .3s, transform .3s; transition: background .3s, transform .3s, -webkit-transform .3s;}

.nav-trigger span:before { -webkit-transform: translateY(-10px); transform: translateY(-10px);}
.nav-trigger span:after { -webkit-transform: translateY(10px); transform: translateY(10px);}
.nav-trigger:hover span, .nav-trigger:hover span:before, .nav-trigger:hover span:after { background: #69d5ee;}
.nav-open {height:100%;}
.nav-open .nav-trigger span { background: transparent;}
.nav-open .nav-trigger span:before, .nav-open .nav-trigger span:after { background: #1F2B3D;}
.nav-open .nav-trigger span:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.nav-open .nav-trigger span:after { -webkit-transform: rotate(45deg); transform: rotate(45deg);}
    
.nav-open .nav-m {display: block; position: fixed; right: 0; width: 60%; height:100vh; z-index: 5; background-color: #f4f4f4;z-index:100;}
.nav-open header .nav-m > ul > li {float:none; width:100%; border:none; animation: slide-in .4s .2s backwards;}
.nav-open header .nav-m > ul > li:nth-child(2) {animation-delay:0.3s; -webkit-animation-delay:0.3s}
.nav-open header .nav-m > ul > li:nth-child(3) {animation-delay:0.4s; -webkit-animation-delay:0.4s}
.nav-open header .nav-m > ul > li:nth-child(4) {animation-delay:0.5s; -webkit-animation-delay:0.5s}
.nav-open header .nav-m > ul > li:nth-child(5) {animation-delay:0.6s; -webkit-animation-delay:0.6s}
.nav-open header .nav-m > ul > li:nth-child(6) {animation-delay:0.7s; -webkit-animation-delay:0.7s}
    @keyframes slide-in {
        0% {
            opacity: 0;
            transform: translateX(80px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    -webkit-@keyframes slide-in {
        0% {
            opacity: 0;
            -webkit-transform: translateX(80px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }
    .nav-toggle ul {display: block !important}



  /**/  
    .container {padding-top: 0}
    .main-vusual {margin-bottom: 1.5%}
    .main-vusual .visual {float: none; width: 100%; margin-right: 0; margin-bottom: 1%}
    .main-vusual .quick {float: none; width: 100%}
    .main-vusual .quick ul:before, .main-vusual .quick ul:after {content: ''; clear: both; display: block;}
    .main-vusual .quick ul li {float: left; width: 32.5%; margin-right: 1%; margin-bottom: 0}
    .main-vusual .quick ul li:nth-child(3) {margin-right: 0}
    
    .latest .notice, .latest .calendar {float: none; width: 100%; margin-right: 0; margin-bottom: 1.5%; padding: 0 3%; box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;}
    .latest h1 {margin-bottom: 1%}
    .latest .notice ul li a {background-position:1% 49%; line-height:40px}
    .latest .calendar {margin-left: 0}
    .latest .popup-zone {float:none; width: 100%; margin-bottom: 1.5%; padding: 0 3%; box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;}
    
/*     .link-zone .social ul li {margin-right: 7%} */
	
	.sub_visual .location span {margin-top:12px}
	.sub_visual h1 {padding-left:1%; line-height:25px; font-size:25px}
	.container .nav-left {display:none}
	.right {float:none; width:95%; margin:0 auto;border:none;padding:50px 0 50px 0!important;display:block;}
	
	/* .s0101 .sign .date {float:none; margin-right:0; margin-bottom:2%} */

/* s0101 */
.s0101 .tab ul li {width:48%;}


	.s0106 .map {margin-right:2%}
	.s0106 .location-info h4 {background-position:left top}
	.s0106 .location-info h4 span {display:block; margin-left:0}

	.s0301 .volunteer .character {display:inline-block;}
	.s0301 .volunteer .character div {width:180px; height:180px; margin-right:18px; font-size:80px}
	.s0301 .volunteer .character div span {line-height:10px}
	.s0301 .step .step-img img {display:block; margin:auto auto}
	.s0301 .step .step-img img:last-child {margin:auto auto}
	.s0301 .step div ul {text-align:left}
	.s0301 .step .step01, .s0301 .step .step02, .s0301 .step .step03 {display:inline-block;}
}

@media screen and (max-width:767px){
    body {min-width: 320px; overflow-x: visible}

    /* header */
header .logo {width:100%;}

    .bx-controls.bx-has-pager.bx-has-controls-direction {display: none}
    .main-vusual .visual .bx-wrapper .bx-caption span {font-size: 0.7em}
    .main-vusual .visual .bx-wrapper .bx-caption {height: 1.8em}
    
    .main-vusual .quick ul li {float:none; width: 100%; margin-right: 0; }
    .main-vusual .quick ul li a {padding-top:5.5%}
    .main-vusual .quick ul li:nth-child(1) a {padding-top: 4.5%}
    

   
    
   
    
    footer .privacy-footer ul li a {font-size: 12px}
    footer .address h1 {float:none}
    footer .address h1 a {background-size: 80%; background-position: center}
    footer .address {font-size: 12px}
    
    #btn_top {top:0;right:10%; width: 50px; height: 50px; background-size: 100%; text-indent: -9999px}




	.s0101 .intro_bg {display:none;}
	.s0103 p img {width:100%;}
	.s0102 div {margin-bottom:20px}
	.s0102 div h4 {float:none}
	.s0102 div ul li {margin-left:0}
	.s0104 h3 {font-size:2em}
	.s0104 h4 {font-size:1.3em; line-height:1em}
	.s0104 .mission p {font-size:2.4em}
	.s0104 .value {padding-bottom:0; background:none}
	.s0104 .vision ul {display:inline-block;}
	.s0104 .vision ul li {float:none; margin-right:0; margin-bottom:20px;}
	.s0104 .value .value-left, .s0104 .value .value-right {margin-top:0; }
	.s0104 .value .value-left {margin-right:0; padding-left:0; background-color:transparent}
	.s0104 .value .value-center {position:relative; top:0; left:0}
	.s0104 .value .value-center span {background-color:transparent}
	.s0104 .value .value-right {margin-left:0; background-color:transparent}
	.s0104 .value div {width:100%}
	.s0104 .value .value-left:hover, .s0104 .value .value-right:hover {background-color:transparent; color:#444; transition:none; -webkit-transition:none;}
	.s0104 .value .value-center:hover {color:#444}
	.s0104 .value .value-center:hover span {background-color:transparent; transition:none; -webkit-transition:none;}
	.s0105 .intro-tit {float:none; width:auto}
	.s0105 .intro-tit h3 {margin-bottom:2%}
	.s0105 .intro-tit span {display:none}
	.s0105 .intro-con {float:none; width:100%}
	.s0105 .intro-con .line {border:none; padding:0}
	.s0105 .intro-con div h4 {float:none; width:100%}
	.s0105 .intro-con div ul {float:none; display:block; width:100%}
	.s0105 .intro-con h4 {width:100%; margin-right:0}
	.s0106 .location-info .guide {width:100%}
	.s0106 .location-info .guide ul {line-height:24px; font-size:14px}
	.s0106 .location-info .guide ul li:nth-child(1) {background-position: left 20%}
	.s0301 > div {margin-bottom:6%}
	.s0301 h2 {font-size:1.6em}
	.s0301 h4 {font-size:1.5em}
	.s0301 p {font-size:14px}
	.s0301 .volunteer .character div {float:none; margin-right:0; margin-bottom:5%}
	.s0301 .point .point-group div {float:none; width:auto; margin-right:0; margin-bottom:4%}
	.s0301 .step div ul {font-size:14px}
	.s0401 .share .share-con p {font-size:15px;}
	.s0401 .share .share-con p span {font-size:12px}

    
	.board-wrap {min-width:340px}
	/*.normal-list {min-width:712px}*/
	.normal-list table td.subject a {font-size:14px}
	#EditorViewer img {width:auto;height:auto;}

	

    
    }


@media all and (max-width:425px){
/* header */
header .logo_img {width:80%;} 

/*
.location .loca_ span.menu_depth {width:30%;}
.location .loca_ span.menu_name {width:30%}
*/


.s0103 dl dd span {
    padding-left: 15px;
    padding-right: 6%;
    font-size: 17px;
    background: url('../img/sub/bullet_01.jpg') no-repeat left 48%;
}



}

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


}