@charset "utf-8";

.main {margin-top:170px;}
.main .visual {padding:50px 0; background: url(/images/main/visualBg.webp) no-repeat center / cover;}

.main .visual .topTxt {text-align: center;}
.main .visual .topTxt h3 {font-family: 'NPSfont'; font-weight: 600; font-size: var(--fs55); color: #FF6701; line-height: 145%;}
.main .visual .topTxt h3 br {display: none;}
.main .visual .topTxt h3 span {font-size: var(--fs65); color: #01C486;}
.main .visual .topTxt p {font-size: var(--fs24); font-weight: 400; color: #000;}

/* 메인비주얼 */
.main .visual .visualCon {display: grid; grid-template-columns: 700px auto; gap: 20px; margin-top: 40px;}
.main .visual .visualCon .leftZone {height: 430px; border-radius: 15px; overflow: hidden; box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.15);}
.main .visual .visualCon .leftZone .swiper-pagination-bullet {width:15px; height: 15px; opacity: 1;}
.main .visual .visualCon .leftZone .swiper-pagination-bullet-active {background: #fff;}

.main .visual .visualCon .rightZone {display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;}
.main .visual .visualCon .rightZone li {border-radius: 15px; box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.15); overflow: hidden;}
.main .visual .visualCon .rightZone li a {transition: .3s; font-weight: 500; display: inline-block; width: 100%; line-height: 100px; font-size: var(--fs24); color: #000; background: #fff; height: 100px; padding:0 30px;}
.main .visual .visualCon .rightZone li a:hover {color: var(--base3);}
.main .visual .visualCon .rightZone li:last-child {grid-column: 1 / -1;}

.main .visual .visualCon .rightZone li a.facility {background: #fff url(/images/main/ico-facility.svg) no-repeat center right 30px;}
.main .visual .visualCon .rightZone li a.volunteer {background: #fff url(/images/main/ico-volunteer.svg) no-repeat center right 30px;}
.main .visual .visualCon .rightZone li a.program {background: #fff url(/images/main/ico-program.svg) no-repeat center right 30px;}
.main .visual .visualCon .rightZone li a.apply {background: #fff url(/images/main/ico-apply.svg) no-repeat center right 30px;}
.main .visual .visualCon .rightZone li a.info {background: #fff url(/images/main/ico-info.svg) no-repeat center right 30px;}
.main .visual .visualCon .rightZone li a.location {background: #fff url(/images/main/ico-location.svg) no-repeat center right 30px;}

.main .visual .visualCon .rightZone .missionSwiper .swiper-slide {display: flex !important; gap: 20px; align-items: center;}
.main .visual .visualCon .rightZone .missionSwiper .swiper-slide span {font-size: var(--fs19); color: var(--base3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.main .visual .visualCon .rightZone .missionWrap {font-size: var(--fs24); color: #000; font-weight: 500; position: relative; display: flex; align-items: center; background: #fff; border-radius: 15px;height: 100px; padding: 0 30px;}
.main .visual .visualCon .rightZone .missionSwiper .missionBtn {position: absolute; top:0; right:0; display: flex; gap: 20px; flex-direction: row-reverse; top: 50%; transform: translateY(-50%); z-index: 10; background: #fff; padding:15px; padding-right: 0;}
.main .visual .visualCon .rightZone .missionSwiper .missionBtn .swiper-button-next {width:10px; height: 20px; position: static; background: url(/images/main/swiperNext.svg) no-repeat center;}
.main .visual .visualCon .rightZone .missionSwiper .missionBtn .swiper-button-prev {width:10px; height: 20px; position: static; background: url(/images/main/swiperPre.svg) no-repeat center;}
.main .visual .visualCon .rightZone .missionSwiper .missionBtn svg {display: none;}

.main .visual .visualCon .rightZone .menuWrap a {display: grid !important; grid-template-columns: auto auto; gap: 20px;}
.main .visual .visualCon .rightZone .menuWrap a span {word-break:break-all; font-size: var(--fs19); color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}


/* 탭메뉴 공통 */
.main .tabCon .tabIn{display:none;}
.main .tabCon .tabIn.on{display:block;}

.main .tabCon {position: relative;}
.main .tabCon .more {position: absolute; right: 0; top: -50px;}
.main .tabCon .more a {display: inline-block; width: 42px; height: 42px; border: 1px solid var(--border1); border-radius: 100px; background: url(/images/main/ico_plus.svg) no-repeat center; transition: .3s;}
.main .tabCon .more a:hover {background-color:#f5f5f5;}

.main .tabCon ul {padding: 30px; border:1px solid var(--border1); border-radius: 0 15px 15px 15px; margin-top: -1px;}
.main .tabCon ul li a p {color: #000; transition: .3s;}
.main .tabCon ul li a:hover p {color: var(--base3);}

.main .tabCon ul li a .img {overflow: hidden; border: 1px solid #eee;}
.main .tabCon ul li a .img img {width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
.main .tabCon ul li a:hover .img img {transform:scale(1.1); }


.main .tapBtn button {padding:18px 30px; border: 1px solid var(--border1); border-radius: 15px 15px 0 0; font-size: var(--fs22); color: #000; cursor: pointer; line-height: 1;}
.main .tapBtn button.on{position: relative; padding-left: 57px; color: var(--base3); background: url(/images/main/ico_select.svg) no-repeat left 30px center;}
.main .tapBtn button.on::before {content: ""; width: 100%; height: 10px; background: #fff; position: absolute; left: 0; bottom: -5px; z-index: 10;}
.main .tapBtn button+button {margin-left: -1px;}


/* 공지사항, 정보공개 */
.main .noticeWrap {display: grid; grid-template-columns:500px auto; padding: 50px 0; gap: 20px;}
.main .noticeWrap li+li {margin-bottom: 5px;}
.main .noticeWrap li:last-child {margin-bottom: 0;}
.main .noticeIn {box-sizing:border-box;}
.main .noticeIn li a {display: flex; justify-content: space-between; align-items: center; gap: 30px;}
.main .noticeIn li a p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 330px; word-break: break-all;}
.main .noticeIn li a span {font-size: var(--fs16); color: #666;}


/* 복지관소식/언론속의당하 */
.main .newsIn ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
.main .newsIn li a {display: flex; flex-direction: column; gap: 20px;}
.main .newsIn li a p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4 !important;  word-break: break-all;}
.main .newsIn ul li .img {height: 170px; border-radius: 15px; overflow: hidden;}
.main .newsIn ul li+li {margin-bottom: 0;}


/* 포토갤러리/미디어자료실 */
.main .photoIn ul {display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}
.main .photoIn ul li .img {height: 210px; border-radius: 15px; overflow: hidden;}
.main .photoIn li a p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 20px; line-height: 1;  word-break: break-all;}
.main .photoIn li a span {display: block; font-size: var(--fs16); color: #666; padding-top: 10px;}

/* 유관기관 */
.main .organizations{position:relative; padding:30px 0; overflow:hidden; display:flex; align-items:center;}
.main .organizations button{color: inherit; position:absolute; left:0; top:50%; transform:translateY(-50%); cursor:default; display:flex; gap:5px; font-size:var(--fs16); padding:15px; background:#F9F9F9; border:1px solid var(--border1); border-radius:7px; z-index:10;}
.main .organizations button span{cursor:pointer;}
.main .organizations .slider{width:100%; padding-left:170px; height:45px; overflow:hidden;}
.main .organizations .slider .slick-list{overflow:hidden;}




/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {

    .main {margin-top: 70px;}
	
	.main .tabCon ul {height:auto;}

    .main .visual .topTxt h3 {padding: 0 30px; line-height: 1.2;}
    .main .visual .topTxt h3 br {display: block;}

    .main .visual .visualCon {grid-template-columns: auto; padding: 0 30px;}

    .main .visual .visualCon .leftZone {height: auto;}
    .main .visual .visualCon .leftZone .swiper-slide {height: 100%;}
    .main .visual .visualCon .leftZone .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

    .main .noticeWrap {grid-template-columns: auto; gap: 50px; padding: 50px 30px;}
    .main .noticeIn li a p {width: 100%;}

    .main .photoGroup {padding:0 30px;}


    .main .organizations {padding: 30px;}
    .main .organizations button {left: 30px;}
    .main .organizations .slider {padding-left: 140px;}
	
    

}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {

    .main {margin-top: 60px;}
    .main .photoIn ul {grid-template-columns: repeat(2, 1fr);}



}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 


    .main .noticeWrap {gap: 25px; padding: 25px 30px;}

    .main .newsIn ul {grid-template-columns: repeat(1, 1fr);}
    .main .newsIn ul li .img {height: 180px;}

    .main .photoIn ul {grid-template-columns: repeat(1, 1fr);}


	
} 



/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) { 


    .main .visual .visualCon {margin-top: 10px; padding: 0 20px;}
    .main .visual .visualCon .rightZone li a {padding: 0 15px; height:65px; line-height: 65px; font-size: 18px;}

    .main .visual .visualCon .rightZone li a.facility {background: #fff url(/images/main/ico-facility.svg) no-repeat center right 15px; background-size: 34px;}
    .main .visual .visualCon .rightZone li a.volunteer {background: #fff url(/images/main/ico-volunteer.svg) no-repeat center right 15px; background-size: 34px;}
    .main .visual .visualCon .rightZone li a.program {background: #fff url(/images/main/ico-program.svg) no-repeat center right 15px; background-size: 34px;}
    .main .visual .visualCon .rightZone li a.apply {background: #fff url(/images/main/ico-apply.svg) no-repeat center right 15px; background-size: 34px;}
    .main .visual .visualCon .rightZone li a.info {background: #fff url(/images/main/ico-info.svg) no-repeat center right 15px; background-size: 34px;}
    .main .visual .visualCon .rightZone li a.location {background: #fff url(/images/main/ico-location.svg) no-repeat center right 15px; background-size: 34px;} 


    .main .visual .visualCon .rightZone .menuWrap a {gap: 10px;}


    .main .visual .visualCon .leftZone .swiper-pagination-bullet {width: 12px; height: 12px;}

    .main .tapBtn button {padding: 14px 20px;}
    .main .tabCon ul {padding: 20px;}
    .main .tapBtn button.on {background: url(/images/main/ico_select.svg) no-repeat left 20px center; padding-left: 50px;}

    
    .main .noticeIn li a {gap: 15px;}
    .main .newsIn li a {gap: 10px;}
    
    .main .photoIn li a p {margin-top: 10px;}
    .main .photoIn li a span {margin-top: 5px;}

    .main .noticeWrap {padding: 25px 20px;}
    .main .photoGroup {padding: 0 20px;}


    .main .visual .visualCon .rightZone .missionWrap {height: 65px;}
    .main .organizations button {left: 20px;}
    


}