@import url(font-face.css);

*{margin:0; padding: 0;}
/*li{list-style: none;}*/
a{text-decoration: none;}

/*home, contactus, admin, 전체보기 등의 메뉴 영역*/
#header-top-wrap{width:100%; height:38px; background-color: #f2f4f7; }
.header-top{width:1200px; margin:0 auto; height:100%; position: relative;}
.menu-top{position: absolute; top:50%; right:100px; transform: translateY(-50%);}
.menu-top > ul > li{float:left; font-size:12px; padding:0px 4px; font-family: "Nanum Suqare";}
.menu-top > ul > li > a{color:black;font-family: "Malgun Gothic";font-size:1.14em}
.menu-top > ul > li > a:hover{text-decoration: underline;}
.all-view-button{width:88px; height:38px; background-color: #0089ce; position: absolute; top:0; right:0;  font-family: "Dotum"; }
.all-view-button > a{color:#b8d5ec; width:100%; height:100%; display: block; transition: 0.5s;}
.all-view-button > a > p{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:12px; white-space: nowrap;}

/*지산메거진, 나눔캠페인 메뉴 영역*/
#header-second-wrap{width: 100%; height:120px; position: relative;}
.header-second{width:1200px; margin:0 auto; height:100%; position: relative;}
#mobile-menu{font-size:3em; position: absolute; top:51.5%; right:2%; transform: translateY(-50%);  color:black;}
.header-second-left-menu{position: absolute; top:50%; left:0; transform: translateY(-50%);}
.header-second-left-menu > .header-second-left-menu-button{float:left; width:130px; height:40px; margin-right:10px;}
.header-second-left-menu > .header-second-left-menu-button:last-child{margin-right:0;}
.header-second-left-menu > .header-second-left-menu-button > a{color:black;}
.header-second-left-menu > .header-second-left-menu-button > a > img{margin-right: 8px;}
.header-second-left-menu > .header-second-left-menu-button > a > span{position: absolute; top:50%; transform: translateY(-50%); font-weight:700; font-size:1.04em; font-family:'Nanum Square';}

.new_sns_wrap{position: absolute; right: 0; transform: translateY(-50%); top: 50%;}

/*햄버거메뉴*/
#mobile-menu_wrap{width:100%; height:100%; position: fixed; z-index:10; background-color: rgba(33,33,33,0.4); }
.close2{width:100%; height:100%; position: absolute; top:0; left:0;}
.mobile-menu{width:50%; height:100%; background-color: black; position: absolute; top:0; right:-80%; z-index:11; }
#close{left:15px; color:white; }
.mobile-menu-top{width:100%; height:50px; position:relative;}
.mobile-menu-top > *{position: absolute; top:50%; transform:translateY(-50%);}
.mobile_home-button{right:5px; color:white;}

/*지산종합사회복지관 로고*/
.header-second > .logo{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.header-second > .logo > a{width:100%; height:100%; display:block;}

/*메인 네비게이션 영역*/
#gnb-wrap{width:100%; min-height:50px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; position: relative; font-family: "Nanum Square";}
.gnb{width:1200px; margin:0 auto;}
#gnb-wrap > .gnb > ul > li{float:left; width:240px; height:auto; text-align: center; line-height: 50px; border-right:1px solid #dadada; box-sizing: border-box; font-size:1.2em;}
#gnb-wrap > .gnb > ul > li:first-child{border-left:1px solid #dadada;}
#gnb-wrap > .gnb > ul > li:last-child{border-right:1px solid #dadada; }
#gnb-wrap > .gnb > ul > li > a{color:black; display: block; height:auto; }

/*서브메뉴*/
#subnav-wrap{width:100%; height:auto; background-color:white; position: absolute; top:50px; left:0; z-index:9; display: none; overflow: hidden; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;}
.subnav {width:1200px; margin:0 auto;  height:auto; overflow: hidden; }
.subnav > nav{float:left; width:240px; height:450px; border:1px solid #dadada; box-sizing: border-box; overflow: hidden;  border-bottom:0; border-top:0; border-left:0; }
.subnav > nav:first-child{border-left:1px solid #dadada; }
.subnav > nav:last-child{border-right:1px solid #dadada;}
.subnav > nav > ul > li{ text-align: center; line-height:50px;}
.subnav > nav > ul > li > a{color:black;  width:100%; height:50px; display:block;font-size:1.04em; font-weight:300}
.subnav > nav > ul > li > a:hover{background-color:#0795dc; color:white;}

/*footer 영역 - 빠른 링크 영역 - 모바일 - 태블릿*/
.tablet-pc{width:100%; height:70px; position: relative; border-bottom:1px solid #848484; border-top:1px solid #848484; }
.link-list-mobile{width:99%; margin:0 auto; height:100%; position: relative;}
.link-list-mobile > #foot_slider_button{position: absolute; width:10%; position: absolute; top:50%; transform: translateY(-50%);  height:100%; cursor: pointer;}
.link-list-mobile > #foot_slider_button > p{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);  font-size: 3em;}
.link-previous{left:0;}
.link-next{right:0;}
.link-img-wrappp{width:79%; height:70px; position:relative; overflow:hidden; margin:0 auto;}
.link-img{width:100%; height:56px; position:absolute; top:50%; transform: translateY(-50%);}
.link-img > ul > li{width:49%; height:56px; float:left; margin-right:1%; position:relative;}
.link-img > ul > li > img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)}
.link-img > ul > li:last-child{margin-right:0;}
/*.link-img > ul > li > a{width:auto; height:37px; position:absolute; top:0; left:50%; transform: translateX(-50%);  }*/

/*footer 영역 - 빠른 링크 영역 - 모바일 - 스마트폰*/
.smartp{width:100%; height:70px; position: relative; border-bottom:1px solid #848484; border-top:1px solid #848484; }
.link-previous2{left:0;}
.link-next2{right:0;}
.link-img2{width:100%; height:56px; position:absolute; top:50%; transform: translateY(-50%);}
.link-img2 > ul > .sm{width:100%; height:56px; margin-right:0; position:relative;}
.link-img2 > ul > .sm > img{width:175px; height:auto; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

/*footer 영역 - 빠른 링크 영역*/
#link-list-wrap{width:100%; height:97px; border-top:1px solid #848484; border-bottom: 1px solid #848484;}
.link-list{width:1200px; margin:0 auto; height:97px; position: relative;}
.link-list > .link-list-title{width:112px; height:100%; background-color: #097eba; position: relative; float:left; margin-right: 22px;}
.link-list > .link-list-title > a{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:14px; color:white; font-family:'Malgun Gothic';}
.link-list > .link-list-title > a:hover{text-decoration:underline;}

.link-list > .link-list-all{width:1066px; height:97px; float:left;  position: relative;}
.link-list > .link-list-all > span{position: absolute; top:50%; transform: translateY(-50%); cursor: pointer; }
.link-list > .link-list-all > span > img{width:100%; height:100%; width:17px; height:17px; border:1px solid #c7c7c7; box-sizing: border-box;}
.link-list > .link-list-all > .previous{left:0;}
.link-list > .link-list-all > .next{right:2px;}
.link-list-all2-area{width:969px; height:56px; margin:22px auto; overflow:hidden; position: relative;}
.link-list > .link-list-all > .link-list-all2-area > .link-list-all2{width:969px; height:56px; position: absolute;}
.link-list > .link-list-all > .link-list-all2-area > .link-list-all2 > ul > li{float:left;margin-right: 17px; width:174px; height:56px;}
.link-list > .link-list-all > .link-list-all2-area > .link-list-all2 > ul > li:nth-child(5){margin-right: 0px;}
.link-list > .link-list-all > .link-list-all2-area > .link-list-all2 > ul > li > img{width:100%; height:auto;}

/*footer영역 - 나머지*/
#footer-wrap{width:100%; height:208px; font-family:'Nanum Square';}
.footer{width:1200px; margin:0 auto; height:100%; position: relative;}
.footer-menu{height:50px; width:100%; position: relative;}
.footer-menu > ul{position: absolute; top:50%; left:0; transform: translateY(-50%);}
.footer-menu > ul > li{float:left;  font-weight: 600; padding:0 3px; color:#7f7f7f; font-size:11pt; font-family:'Malgun Gothic'; }
.footer-menu > ul > li > a{color:#7f7f7f;}
.footer-menu > ul > li > a:hover{text-decoration: underline;}

.select-area{height:38px; position: absolute; top:10px; right:0;}
.select-area > p.select {float:left; padding-right: 13px; line-height: 38px; font-size:11pt; font-family:'Malgun Gothic'; font-weight:700;}
.select-area > .link_form{width:235px; height:38px; float:left; }
.select-area > .link_form > #site-select{width:188px; height:38px; font-size:13px; float:left;}
.select-area > .link_form > .button-idong{width:47px; height:38px; background-color: #595959; color:white; position: relative; float:left; cursor:pointer;}
.select-area > .link_form > .button-idong > span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:12px; white-space: nowrap; }

.copyright{width:443px; height:auto; overflow:hidden;font-size:13px; position: absolute; top:74px; left:0;font-family:'Malgun Gothic';}
.cpoyright > p{line-height: 150%; }
.copyright > ul > li{float:left; line-height: 150%; }
.copyright > ul > li > a{color:black;}
.copyright > ul > li > a:hover{text-decoration: underline;}
.copy {font-weight: normal; color:#595959; font-size:12.5px; line-height: 150%; }

#footer-logo{position: absolute; top:73px; right:0;  width:235px; height:60px; }

/*반응형웹*/
@media(min-width:1250px){
     #mobile-menu{display:none;}
     .tablet-pc{display: none;}
     .smartp{display: none;}
     #mobile-menu_wrap{display: none;}
}
@media(max-width:1250px){
  #mobile-menu_wrap{display: none;}
  .header-top{width:960px;}
  .header-second{width:960px;}
  .gnb{width:960px;}
  .subnav{width:960px;}
  .subnav > nav{width:192px;}
  .subnav > nav > ul > li{font-size:15px;}
  #gnb-wrap > .gnb > ul > li{width:192px; font-size:20px;}
  .new_sns_wrap{display: flex; flex-wrap: wrap; gap:5px 5px; width: 220px;}

  .link-list{width:960px;}
  .link-list > .link-list-all{width:826px;}
  .link-list-all2-area{width:790px; margin:30px auto;}
   .link-list > .link-list-all > .link-list-all2-area > .link-list-all2{width:790px;}
  .link-list > .link-list-all > .link-list-all2-area > .link-list-all2 > ul > li{width:142px; height:37px; margin-right: 14.4px;}
  .link-list > .link-list-all > .link-list-all2-area > .link-list-all2 > ul > li > img{width:100%; height:auto;}
  .link-list > .link-list-all > .next{right:0;}


  .footer{width:960px;}
  #mobile-menu{display:none;}
     .tablet-pc{display: none;}
     .smartp{display: none;}
}

@media(max-width:1000px){
  #mobile-menu_wrap{display: none;}
  #gnb-wrap{display: none;}
  .header-second-left-menu{display: none;}
  #mobile-menu{display: block;}
  #header-top-wrap{display: none;}
  .header-second{width:99%;}
  .header-second > .logo{left:5%; transform: translate(-5%, -50%);}
  #link-list-wrap{display: none;}
     .tablet-pc{display: block;}
     .smartp{display: none;}
  .footer{width:95%;}
  .new_sns_wrap{display: none;}
}

@media(max-width:820px){
     .select-area{width:393px; height:38px; left:0; top:60px;}
     .copyright{top:90%; transform: translateY(-90%);}
     #footer-logo{top:55%; left:0; transform: translateY(-55%);}
	 #footer-wrap{height:270px;}
}
@media(max-width:640px){
#header-second-wrap{width: 100%; height:100px; }
  .select-area{width:100%; height:38px; left:0; top:60px;}
   .select-area >.link_form{width:70%;}
  .select-area > h3{font-size:13px; padding-right:10px;}
  .select-area > .link_form > #site-select{width:60%; height:30px;}
  .footer-menu{width:100%;}
  .select-area > .link_form > .button-idong{height:30px; width:20%;}
  .link-list-mobile > div > p > img{width:100%; height:auto;}
  #footer-wrap{height:300px;}
  .footer-menu > ul > li{float:left; font-size: 12px; font-weight: bold; padding:0 3px; color:#7f7f7f;}
  #footer-logo{top:50%; left:0; transform: translateY(-50%);}
  .copyright{top:95%; transform: translateY(-95%); height:auto; overflow:hidden;width:100%;}
  .copyright > p{line-height: 150%;}
  .copyright > ul > li{line-height: 150%;}
}
@media(max-width:510px){
	.smartp{display:block;}
	.tablet-pc{display:none;}
}
@media(max-width:495px){
  #footer-logo{top:52%; left:0; transform: translateY(-52%);}
  #footer-wrap{height:320px;}
}

@media(max-width:440px){
  .select-area{height:60px; top:40px;}
    .select-area > .link_form{width:100%;}
  .select-area > .link_form > .button-idong{width:20%;}
  }
 @media(max-width:435px){
	#footer-logo{top:45%; transform:translateY(-45%)}
     .mobile-menu{width:80%; }
  }
@media(min-width:383px) and (max-width:460px){
     .quickmenu > .quickmenu-list > .quickmenu-box{width:43%; height:auto; }
}
@media(max-width:383px){

     .link-img > a > img{width:auto;}
}