/*  20180202 */
#mainBg {width:100%; background:#333;}

/*메인배너영역*/
#banner-wrap{width:100%; height:616px; background:url(../images/banner.jpg) no-repeat 46% 100%; background-size:cover; font-family:'Nanum Square';}
#banner-wrap > .banner-img-mobile{width:100%; height:auto; overflow: hidden; display: none;}
#banner-wrap > .banner-img-mobile > img{width:100%; height:auto;}
.banner{width:1200px; margin:0 auto; height:auto; }
.banner > .popzone-wrap{width:484px; height:auto; padding:70px 0px 0px 716px;}
/*팝업존 슬라이드 영역*/
.banner > .popzone-wrap > .popupzone{width:484px; height:259px; margin-bottom: 10px; overflow:hidden; position:relative;}
.banner > .popzone-wrap > .popupzone > .popupzone1{width:484px; height:259px; position:absolute;}

/*팝업존 슬라이드 영역 - 왼쪽 사진*/
.banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img{float:left; width:304px; height:auto;}
.banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img > img{width:100%; height:auto;}
.banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img > a > img{width:100%; height:100%;}

/*팝업존 슬라이드 영역 - 팝업존 오른쪽 녹색배경 텍스트*/
.banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description{width:180px; height:259px; float:left; position: relative; background:url(../images/popupzone-background.jpg) no-repeat; background-size:cover;}
.banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description > h1{position: absolute; left:20px; top:70px; font-size:1.5em; color:white;}
.banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description > p{position: absolute; left:20px; top:136px; font-size:15px; color:white; line-height:140%;}
.banner > .popzone-wrap > .popupzone > .button-area{position: absolute; top:0; right:2px; height:33px; width:109px; z-index:8;}
.banner > .popzone-wrap > .popupzone > .button-area > span{width:33px; height:auto;  text-align: center; line-height: 33px; cursor: pointer;
display: block; float:left; margin-right:5px;}
.banner > .popzone-wrap > .popupzone > .button-area > #play{display:none;}
.banner > .popzone-wrap > .popupzone > .button-area > #next{margin-right: 0;}

/*후원 참여하기, 자원봉사신청, 교육 문화강좌신청*/
.box-banner-color{width:483px; height:148px;}
.box-banner-color > .banner-color{width:161px; height:148px; float:left;}

/*원형 퀵메뉴*/
#quickmenu-wrap{width:100%; height:211px; background-color: #097eba; position: relative; }
#hide-button{width:100px; height:36px; position: absolute; top:-36px; left:50%; transform: translateX(-50%); z-index:2; cursor: pointer;}
.quickmenu{width:1020px; margin:0 auto; height:auto; }
.quickmenu > .quickmenu-list{width:100%; height:150px; padding:30px 0px;}
.quickmenu > .quickmenu-list > .quickmenu-box{width:150px; height:auto; float:left; margin-right: 67.5px; overflow: hidden;}
.quickmenu > .quickmenu-list > .quickmenu-box:last-child{margin-right: 0;}
.quickmenu > .quickmenu-list > .quickmenu-box > a > img{width:100%; height:auto;}

/*최근 게시물 및 배너 영역*/
#sections-wrap{width:100%; height:auto; overflow:hidden; padding:50px 0px; font-family:'Nanum Square';}
.sections{width:1200px; height:auto; margin:0 auto;}
.main-box-list{width:100%; height:358px; margin:50px 0px;}
.article-box{width:379px; height:358px; float:left; border:1px solid #e7e7e7; margin-right: 31.5px; box-sizing: border-box;}
.article-box:nth-child(2){background-color:#e7e7e7;}
.article-box:last-child{margin-right: 0; border-style: none;}
.container{width:100%; height:auto;}

/*공지사항, 복지관소식, q&a영역 - 탭 버튼 영역*/
.tab-list{height:60px; width:328px; float:left; border-bottom:1px solid #e7e7e7; box-sizing: border-box;}
.tab-list > ul > li{float:left; width:110px; height:auto; cursor: pointer; text-align: center; line-height:61px; font-size:1.1em;}
.tab-list > ul > li.active{background:url(../images/tab-line.png) no-repeat bottom center; background-size:auto;}
.tab-list > ul > li:last-child{width:108px;}

/*공지사항, 복지관소식, q&a영역 - 전체보기 버튼 영역*/
.more{width:49px; float:left; height:60px; position: relative; border-bottom: 1px solid #e7e7e7; box-sizing: border-box;}
.more > span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:1.5em;}
.more > span > a{color:black;}

/*공지사항, 복지관소식, q&a영역 - 탭 버튼 클릭했을때 나타나는 영역*/
.tab-area11{width:100%; height:204px; float:left; clear:both;}
.tb{width:100%; height:auto; float:left; display: none;}
.tb > .notice1{padding-top:6.5%; padding-left:8.5%;}
.tb > .notice1 > li{font-size:14.5px; padding:9px 0px;}
.tb > .notice1 > li > a{color:black;}
.tb > .notice1 > li > a:hover{text-decoration: underline;}

/*보도자료 - 복지관 갤러리 - 탭 버튼 영역*/
.tab-list2{height:60px; width:328px; float:left;  border-bottom:1px solid #e7e7e7; box-sizing: border-box;}
.tab-list2 > ul > li{float:left; width:164px; height:auto; cursor: pointer; text-align: center; line-height:61px;  font-size:1.1em;}
.tab-list2 > ul > li.active{background:url(../images/tab-line.png) no-repeat bottom center; background-size:100%;}

/*보도자료 - 복지관 갤러리 - 탭버튼 클릭했을때 나타나는 영역*/
.tab-area2{width:100%; height:297px; float:left; clear:both;}
.tk{width:100%; height:auto; float:left; display: none;}

/*보도자료 - 복지관 갤러리 - 탭 눌렀을때 나오는 영역 - 갤러리 영역*/
.gallery-list{width:363px; height:122px; padding-top:16px; padding-left:16px; }
.gallery-box{width:164px; height:auto; float:left; margin-right:16px; overflow:hidden; margin-top:8px;}
.gallery-box:nth-child(2){margin-right:0;}
.gallery-box:last-child{margin-right:0;}
.gallery-box > p{font-size:1em; text-align:left; padding-top:8px;}
.gallery-box > p > a{color:black; }
.gallery-box > a > img{width:100%; height:100px;}
.gallery-box > p > a:hover{text-decoration:underline;}

/*공지사항, 복지관소식, q&a영역 - 하단 배너 영역*/
.notice-banner{width:100%; height:93px; float:left;}
.notice-banner > a{height:auto; overflow: hidden;}
.notice-banner > a > img{width:100%; height:auto;}

/*문의사항안내, sns 영역*/
.banner-tel{
  width:100%;
  /* height:191px; */
  margin-bottom: 7px;
}
.banner-tel > img{width:100%; height:auto;}
.sns{width:100%; height:167px;}
.sns-list{width:100%; height:81px; padding-bottom: 4px;}
.sns-box{
  /* width:187px;  */
  height:84px; float:left; margin-right:5px;
}
.sns-box > a > img{width:100%; height:auto;}
.sns-box:last-child{margin-right: 0;}
.sns-box-responsive{ margin-top:11.1px; background-color:/*#ececec*/ powderblue;}
.sns-box-responsive > a{width:100%;  display:block;}
.sns-box-responsive  img{width: 100%;}
.sns-responsive{display:none;}

/*카카오톡 - 팝업*/
#rgba3{width:100%; height:100%; position: fixed; top:0; z-index:30; background-color:rgba(0,0,0,0.7); display: none;  left:0;}

#apply-wrap3{width:679px; height:552px; max-width:1641px;  position: fixed; top:50%; left:50%; transform:translate(-50%, -50%);  z-index:31; background-color: white; display: none; font-family:'Nanum Square';}
.apply-top3{width:100%; height:78px; background-color:#0089cd; position:relative; float:left;}
.apply-title3{width:602px; height:78px; position: absolute; top:0; left:0;}
.apply-title3 > p{color:white; left:40px; position:absolute; top:50%;  transform:translateY(-50%); font-size:24px;}
#close22222{width:77px; height:78px; background-color: #2763bb; position: absolute; cursor: pointer; top:0; right:0;}
#close22222 > p{color:white; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:3em; padding:0;}

.apply3{width:100%; height:474px;float:left;}

/*반응형*/
@media(max-width:1250px){

  /*배너 전체영역*/
  .banner{width:960px;}
  .quickmenu{width:960px;}
  .quickmenu > .quickmenu-list > .quickmenu-box{margin-right: 42px;}
  #banner-wrap{width:100%; background-position: 40%; }
  .banner > .popzone-wrap{padding-left:476px;}
  #banner-wrap > .banner-img-mobile{display: none;}

  /*최근 게시물 및 배너 영역*/
  #sections-wrap{width:100%;}
  .sections{width:960px;}
  .article-box{width:300px; height:auto; margin-right:30px; overflow:hidden;}
  .tab-list{width:260px;}
  .more{width:38px; }
  .tab-list > ul > li{width:90px; font-size:13px;}
  .tab-list > ul > li:last-child{width:75px;}
  .tb > .notice1{padding-top:3%; padding-left:6%;}
  .tb > .notice1 > li{font-size:12px;}
  .notice-banner{height:70px; }

  .tab-list2{width:260px;}
  .tab-list2 > ul > li{width:130px; font-size:13px;}
  .gallery-list{width:280px; padding-top:10px; padding-left:12px; height:112px;}
  .gallery-list:last-child{padding-top:0;}
  .gallery-box{width:130px; margin-right:10px; }
  .gallery-box > a > img{width:100%; height:93px;}
  .gallery-box > p{font-size:12px;}

  .tab-area11{height:180px;}
   .tab-area2{height:250px; }



/*문의사항안내, sns 영역*/
  .banner-tel{width:100%; height:auto;}
  .banner-tel > img{width:100%; height:auto;}
  .sns{width:100%; height:auto; overflow:hidden; margin-top:10px; display:none;}
  .sns-responsive{display:block;}
}

@media(max-width:1000px){
  /*배너 전체 영역*/
  #banner-wrap{width:100%; height:auto; background: none; padding:0 0 30px 0px;}
  #banner-wrap > .banner-img-mobile{display: block;}
  #banner-wrap > .banner-img-mobile > .m-banner2{display: none;}
  .banner{width:65%; margin:0 auto; }
  .banner > .popzone-wrap{width:100%; padding-left:0; padding-top:30px;}
  .banner > .popzone-wrap > .popupzone{width:100%; height:259px; }
  .banner > .popzone-wrap > .popupzone > .popupzone1{width:100%; height:259px; }

  /*팝업존 슬라이드 영역 - 왼쪽 사진*/
  .banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img{float:left; width:55%; height:259px; overflow: hidden;}
  .banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img > img{width:100%; height:259px;}

  /*팝업존 슬라이드 영역 - 팝업존 오른쪽 녹색배경 텍스트*/
  .banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description{width:45%; height:259px; float:left; position: relative; overflow: hidden;}
  .box-banner-color{width:100%; height:auto; overflow: hidden; }
  .box-banner-color > .banner-color{width:33.3%; height:auto; overflow: hidden;}
  .box-banner-color > .banner-color > a > img{width:100%; height:auto;}

  #quickmenu-wrap{width:100%; height:auto; overflow: hidden; padding:30px 0px}
  .quickmenu{width:90%;}
  .quickmenu > .quickmenu-list{width:100%; height:auto; overflow: hidden;}
  .quickmenu > .quickmenu-list > .quickmenu-box{width:20%; height:auto; float:left; margin-right:5%; margin-bottom:15px; overflow: hidden;}
.tab-area{height:auto; overflow: hidden;}
.notice-banner{height:auto; overflow: hidden;}

  .sections{width:90%; }

.article-box{width:49%; height:auto; margin-right:2%; margin-bottom:15px; overflow: hidden;}
.article-box:nth-child(2){margin-right:0;margin-top:0;}
.main-box-list{width:100%; height:auto; overflow:hidden; margin:0px 0px;}
.tab-list{width:85%;}
.tab-list > ul > li{width:33.33%;}
.more{width:15%;}
.tb{height:auto; overflow: hidden;}
.tab-list2{width:85%;}
.tab-list2 > ul > li{width:50%;}
.gallery-list{width:97%; margin-top:3.5%;}
.gallery-list:last-child{height:auto; overflow: hidden; margin-top:1.5%; margin-bottom: 3.5%;}
.gallery-box{width:48.5%; margin-right:1.5%;}
.tab-area11{height:170.66px; overflow:hidden; padding-bottom:1%;}
.tab-area2{height:263.66px; overflow: hidden;}
.notice-banner{height:93px;}
.notice-banner > a > img{height:100%;}


/*여기서 수정*/

.article-box:last-child{width:100%; height:auto; overflow: hidden;}
.banner-tel{width:46.5%; height:auto; float:left;}
.banner-tel > img{width:100%; height:auto;}
.sns{width:53.5%; height:auto; float:left; margin-top:0; display:block;}
.sns-responsive{display:none;}
.sns-list{width:100%; height:auto; padding-bottom:0; margin-bottom: 0; overflow: hidden; margin-top:3px;}
.sns-list:first-child{margin-top:0; margin-bottom:7px;}
.sns-list:last-child{margin-top:0;}
.sns-box{width:100%; margin-right: 2%; height:auto; overflow: hidden;}
.sns-box:first-child{margin-left:2%;}
.sns-box:nth-child(2){margin-right: 0;}
.sns-box:nth-child(3){margin-right: 0;}
.sns-box:last-child{margin-right: 0;}
.sns-box > a > img{width:100%; height:auto;}
.sns-responsive{margin-left:3.5%; width:50%; float:left;}
.sns-box-responsive{ margin-top:10px; width:100%; }
.sns-box-responsive:first-child{ margin-top:0px;}
}

@media(max-width:820px){
     .gallery-box > a > p{font-size:12px;}
     .box-banner-color{width:100%; height:auto; top:73%; overflow: hidden;}
     .box-banner-color > .banner-color{width:33.3%; height:auto;}
}
@media(max-width:700px){
	#apply-wrap3{width:99%; height:auto; overflow:hidden;}
	.apply-title3{width:100%;}
	.apply3{height:auto; overflow:hidden;}
	.jisan-kakao{width:100%; height:auto;}
	.apply-title3 > p{left:20px;}
	}

@media(max-width:640px){
  #sections-wrap{width:100%; height:auto; padding:5px 0px; }
  .sections{width:75%; height:auto; margin:0 auto; overflow:hidden;}
.main-box-list{width:100%; height:auto; overflow: hidden; margin:5px 0px;}
.article-box{width:100%; height:auto; margin-right: 0;  margin:30px 0px; overflow: hidden;}

  /*여기서 수정*/

.article-box:last-child{height:auto; overflow: hidden;margin-top:0;}
.banner-tel{width:100%; height:auto; float:none;}
.banner-tel > img{width:100%; height:auto;}
.sns{width:100%; height:auto; float:none; overflow: hidden; margin-top:2%;}
.sns-list:first-child{margin-bottom:2%;}
.sns-list{width:100%;}
.sns-box{width:100%; margin-right: 2%; height:auto; overflow: hidden;}
.sns-box:first-child{margin-bottom:0px; margin-left:0;}
.sns-box:nth-child(2){margin-right: 0;}
.sns-box:nth-child(3){margin-right: 0;  margin-top:0;}
.sns-box:last-child{margin-right: 0;}
.sns-box > a > img{width:100%; height:auto;}

  /*배너영역 - 팝업존*/

  .banner{width:90%; height:auto;}
  #banner-wrap > .banner-img-mobile > .m-banner1{display: none;}
  #banner-wrap > .banner-img-mobile > .m-banner2{display: block;}
  .banner > .popzone-wrap > .popupzone{width:100%; height:259px;}
  .banner > .popzone-wrap > .popupzone > .button-area > span{font-size:12px;}

  /*팝업존 슬라이드 영역 - 왼쪽 사진*/
  .banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img{float:left; width:55%; height:auto;}
  .banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img > img{width:100%; height:259px;}

  /*팝업존 슬라이드 영역 - 팝업존 오른쪽 녹색배경 텍스트*/
  .banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description{width:45%; height:259px;}
  .box-banner-color{width:100%; height:auto; }
  .box-banner-color > .banner-color{width:33.33%; height:auto; }
}

@media(min-width:460px) and (max-width:640px){
     .quickmenu{width:99%;}
     .quickmenu > .quickmenu-list{width:100%; height:auto; padding:30px 0px; }
     .quickmenu > .quickmenu-list > .quickmenu-box{width:30%; height:auto; float:left; margin-right:3%; margin-bottom:15px; overflow: hidden;}
}
@media(max-width:460px){
     .quickmenu{width:90%; }
     .quickmenu > .quickmenu-list > .quickmenu-box{width:45%; height:auto; margin-right:5%;}
     .quickmenu > .quickmenu-list > .quickmenu-box:nth-child(2){margin-right: 0;}
     .quickmenu > .quickmenu-list > .quickmenu-box:nth-child(4){margin-right: 0;}
     .banner > .popzone-wrap > .popupzone{width:100%; height:419px;}
     .banner > .popzone-wrap > .popupzone > .popupzone1 > .popupzone-left-img{width:100%; height:259px;}

     .banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description{height:160px; width:100%; background-position:bottom left; background-size:auto 100%;
	 background-color:#76ab37;}
	 .banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description > h1{top:20px;}
	 .banner > .popzone-wrap > .popupzone > .popupzone1 > .popzone-description > p{top:60px;}
   .sections{width:90%; height:auto; margin:0 auto; overflow:hidden;}
   	.apply-title3 > p{left:10px; font-size:1.1em;}
}
@media(max-width:420px){
  .box-banner-color > .banner-color{width:50%; height:auto; }
  .apply-top3{height:50px;}
  .apply-title3{height:50px;}
  #close22222{width:50px; height:50px;}
 .apply-title3 > p{left:5px;}
  }