@charset "utf-8";

/* 메인페이지 스타일만 정의 */
.c-blue {color:#1975cf}
.c-yellow {color:#ffba25}
.c-green {color:#1fbcbf}


.main [class *='box'] {position:relative;}
.main [class *='box']:before,.main [class *='box']:after {content:""; display:block; width:100%; clear:both;}
.main .more {position:absolute; overflow:hidden; text-indent:-999px; width:33px; height:33px; border:1px solid #e5e5e5; background:url(../images/main/icon_plus.png) no-repeat 50%;}
.main .more:hover {border:1px solid #000;}

/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 992px) {
	
	.main {}
	.main h2 {font-size:24px; font-family:paybooc; color:#000; font-weight:600; line-height:1;}
	.main>section {max-width:1400px; width:100%; margin:0 auto;}
	.main>.sliderV2 {width:100%; height:440px !important; position:relative;}
	.main>.sliderV2 .sliderObj {height:440px !important; position:relative;}
	.main>.slider {width:100%; height:440px !important; position:relative;}
	.main>.slider .sliderObj {height:440px !important; position:relative;}
	.main [class *= 'rowWrap'] {display:block; position:relative; clear:both; margin-top:60px;} 
	.main [class *= 'rowWrap']:before,.main [class *= 'rowWrap']:after {content:""; display:block; width:100%; clear:both;} 
	.main .line {margin-top:60px; position:relative; width:100%; border-top:1px solid #f0f0f0;}
	
	/* 공지/채용 */
	.main .boardList {position:relative; width:calc(50% - 30px); float:left; }
	.main .boardList>ul>li {float:left; height:255px;}
	.main .boardList>ul>li>h2 {margin-right:20px;}
	.main .boardList>ul>li .list {display:none; position:absolute; left:0; top:60px; width:100%;}
	.main .boardList>ul>li .list li:before,
	.main .boardList>ul>li .list li:after {content:""; display:block; width:100%; clear:both;}
	.main .boardList>ul>li .list li+li {margin-top:5px;}
	.main .boardList>ul>li .list li a {display:block; position:relative; float:left; width:calc(100% - 120px); line-height:1.5; overflow-x:hidden;	text-overflow:ellipsis; white-space:nowrap; padding:0 20px 0 15px;}
	.main .boardList>ul>li .list li a:before {content:""; width:3px; height:3px; position:absolute; left:5px; top:10px; background:#ddd;}
	.main .boardList>ul>li .list li a:hover {color:#000;}
	.main .boardList>ul>li .list li a .new {position:absolute; right:0; top:2px; width:20px; height:20px; padding:4px 0 0 6px;  background:#ff9d02; color:#fff; font-size:10px; font-weight:400; line-height:1; border-radius:50%;}
	.main .boardList>ul>li .list li.notice a {font-weight:500; color:#000;}
	.main .boardList>ul>li .list li.notice a:before {background:#000;}
	.main .boardList>ul>li .list li span {display:block; float:right; line-height:1.2;}
	.main .boardList>ul>li .more {display:none; right:0; top:-5px;}
	.main .boardList>ul>li .more:hover {border:1px solid #000;}
	.main .boardList>ul>li.on>h2 {color:#ff9d02; padding-bottom:5px; border-bottom:2px solid #ff9d02;}
	.main .boardList>ul>li.on .list {display:block;}
	.main .boardList>ul>li.on .more {display:block;}
	
	
	/* 참여자모집 */
	.main .recruit {position:relative; float:right; width:calc(50% - 30px);}
	.main .recruit .more {right:0; top:-5px;}
	.main .recruit .list {position:absolute; left:0; top:60px; width:100%;}
	.main .recruit .list li {float:left; width:calc((100% - 21px) / 3); height:195px;}
	.main .recruit .list li+li {margin-left:10px;}
	.main .recruit .list a {display:block; width:100%; height:100%; padding:30px; border:1px solid #e5e5e5; border-radius:10px;	text-align:center;}
	.main .recruit .list a:hover {box-shadow:10px 10px 10px rgba(0,0,0,.05);}
	.main .recruit .list a p {height:50px; overflow:hidden; word-break:break-all; font-size:18px; font-weight:400; line-height:1.4; color:#000;}
	.main .recruit .list a span {display:block; font-size:13px; color:#666; padding:10px 0;}
	.main .recruit .list a i {display:inline-block; border-radius:100px; padding:13px 30px; line-height:1; font-size:15px; font-weight:400;}
	.main .recruit .list a.before:hover {border-color:#ff8484;}
	.main .recruit .list a.ing:hover {border-color:#ff9d02;}
	.main .recruit .list a.end:hover {border-color:#64bc8c;}
	.main .recruit .list a.before i {color:#ff8484; background:#fff; border:2px solid;} /* 접수전 */
	.main .recruit .list a.ing i {color:#fff; background:#ff9d02;} /* 접수중 */
	.main .recruit .list a.end i {color:#64bc8c; background:#fff; border:2px solid #64bc8c;} /* 접수마감 */
	
	/* 자원봉사,퀵,영상,출간자료 */
	.main .rowWrap2 > div {position:relative; float:left; width:calc((100% - 180px)/4); height:250px;}
	.main .rowWrap2 > div+div {margin-left:60px;}
	.main .service {}
	.main .service h2 {height:60px;}
	.main .service h2+p {line-height:1.4; letter-spacing:-.5px;}
	.main .service ul {position:absolute; bottom:0; left:0; width:100%;}
	.main .service ul li {float:left; width:calc((100% - 10px)/2);}
	.main .service ul li:nth-child(even) {margin-left:10px;}
	.main .service ul li:nth-child(2n)~li {margin-top:10px;}
	.main .service ul li a {display:block; padding:18px 25px 18px 18px; color:#000; font-weight:400; line-height:1; text-align:center; border:1px solid #e5e5e5; border-radius:10px; background:url(../images/main/icon_arrow1.png) no-repeat 90% 50%; overflow-x:hidden;	text-overflow:ellipsis; white-space:nowrap; }
	.main .service ul li a:hover {border-color:#ff9d02; background-color:#ff9d02; color:#fff; box-shadow:5px 5px 10px rgba(0,0,0,.1); background-position:95% 50%; background-image:url(../images/main/icon_arrow2.png);} 
	
	.main .quick {position:relative;}
	.main .quick ul {height:100%;}
	.main .quick ul li {float:left; width:calc((100% - 10px)/2); height:calc((100% - 10px)/2);}
	.main .quick ul li:nth-child(even) {margin-left:10px;}
	.main .quick ul li:nth-child(2n)~li {margin-top:10px;}
	.main .quick a {position:relative; display:block; width:100%; height:100%; border-radius:10px; text-align:center; color:rgba(0,0,0,.8); font-weight:500; padding-top:20px; letter-spacing:-1px;}
	.main .quick a:hover {box-shadow:5px 5px 10px rgba(0,0,0,.05);}
	.main .quick a i {display:block; width:100%; height:50px; background-position:50%; background-repeat:no-repeat; margin-bottom:5px;}
	.main .quick a.quick1 {background-color:#ffe1e7;}
	.main .quick a.quick2 {background-color:#ffeca7;}
	.main .quick a.quick3 {background-color:#cff3df;}
	.main .quick a.quick4 {background-color:#d3f8ff;}
	.main .quick a.quick1:hover {background-color:#ffcbd5;}
	.main .quick a.quick2:hover {background-color:#ffe27b;}
	.main .quick a.quick3:hover {background-color:#a7ebc5;}
	.main .quick a.quick4:hover {background-color:#a0e7f4;}
	.main .quick a.quick1 i {background-image:url(../images/main/icon_quick1.png);}
	.main .quick a.quick2 i {background-image:url(../images/main/icon_quick2.png);}
	.main .quick a.quick3 i {background-image:url(../images/main/icon_quick3.png);}
	.main .quick a.quick4 i {background-image:url(../images/main/icon_quick4.png);}
	
	.main .movie {}
	.main .movie h2 {padding-left:65px; background:url(../images/main/icon_h2youtube.png) no-repeat left 50%;}
	.main .movie .sliderV2 {position:absolute; bottom:0; left:0; width:100%; height:190px; border-radius:10px;}	
	.main .movie .sliderV2 .sliderPage a {position:absolute; right:20px; top:9px; font-size:14px; color:#fff;font-weight:400;}	
	.main .movie .sliderV2 .sliderButton {display:none !important;}
	
	.main .book {}
	.main .book .more {position:absolute; right:0; top:-5px;}
	.main .book .pic a {display:block; width:100%; height:190px; position:absolute; bottom:0; background:url(../images/main/book_bg.jpg) no-repeat 50% 100%; text-align:center;}
	.main .book .pic a span.img {height:148px; background-size:contain !important;}
	/* .main .book .pic a img {position:absolute; bottom:43px; left:50%;transform:translateX(-50%);} */
	.main .book .pic a p {position:absolute; bottom:0; width:100%;}
	
	
	/* 복지사업 */
	.main .business {position:relative; clear:both; max-width:100%; margin:60px 0; padding:120px 0 0; background:url(../images/main/business_bg.jpg) no-repeat 50% 0; background-size:cover; border-top:1px solid #f0f0f0;}
	.main .business * {z-index:1; position:relative;}
	.main .business .cover {z-index:0; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.7);}
	.main .business {background:url(../images/main/business_bg.jpg) no-repeat 50% 0; background-size:cover;}
	.main .business h2 {font-size:48px; font-weight:600; font-family:paybooc; color:#ff8484; text-align:center;}
	.main .business h2+p {font-size:25px; font-family:paybooc; font-weight:400; color:#000; margin-top:10px; text-align:center;}
	.main .business h2+p span {display:inline-block; position:relative;}
	.main .business h2+p span+span {padding-left:50px;}
	.main .business h2+p span+span:before {content:""; position:absolute; left:20px; top:12px; width:10px; height:10px; background:#ff8484; border-radius:50%;}
	
	.main .rollBanner {width:100%; overflow:hidden;}
	.main .rollWrap {width:calc(72.9% - 140px); margin:0 auto; position:relative; padding:50px 0;}
	.main .rollWrap ul {position:relative; min-height:440px;}
	.main .rollWrap ul li {position:absolute; top:0; padding:0 13.5px; transition:all .5s ease-in-out;}
	.main .rollWrap ul li a {display:block; box-shadow:5px 5px 15px rgba(0,0,0,.2); transition:all .5s ease-in-out; border-radius:10px; overflow:hidden; background:#fff;}
	.main .rollWrap ul li a .info {position:relative; padding:50px 40px;}
	.main .rollWrap ul li a .info .num {position:absolute; right:20px; top:20px; font-size:12px; font-weight:600; color:#ffc800; font-family:paybooc; line-height:1;}
	.main .rollWrap ul li a .info dt {font-family:paybooc; font-size:24px; color:#ff8484; font-weight:600; line-height:1.2; margin-bottom:20px;}
	.main .rollWrap ul li a .info dd {position:relative; word-break:break-all; height:50px; overflow:hidden;}
	.main .rollWrap ul li a .info dd:before {
		content:""; position:absolute; bottom:3px; right:0; width:50px; height:18px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);}
	.main .rollWrap ul li a .info dd:after {content:"..."; position:absolute; bottom:5px; right:5px;}
	.main .rollWrap ul li a .info dt p {display:block; font-size:14px; color:#888; font-weight:400; line-height:1; margin-bottom:10px;}
	.main .rollWrap ul li.opa {opacity:.5; transform:scale(.9);}
	.main .rollWrap ul li.opa a {border-color:#e5e5e5; box-shadow:none;}
	.main .rollWrap ul li.opa:hover {transform:none;}
	.main .rollWrap .rollBtn {position:absolute; width:calc(100% + 140px); left:50%; transform:translateX(-50%); top:42%;}
	.main .rollWrap .rollBtn button {position:absolute; display:block; width:50px; height:50px; cursor:pointer; background:url(../images/main/icon_rollBanner.png) center no-repeat; background-color:rgba(0,0,0,.5); border-radius:50%;}
	.main .rollWrap .rollBtn button:hover {background-color:rgba(0,0,0,.8);}
	.main .rollWrap .rollBtn button.prev {left:0; transform:rotate(180deg);}
	.main .rollWrap .rollBtn button.next {right:0;}
	
	
	/* 복지관 갤러리 */	
	.main .gallery {position:relative; float:left; width:53.6%;}
	.main .gallery h2 {height:60px;}
	.main .gallery h2 span {font-size:16px; font-family:NotoSansKR; font-weight:400; color:#666; padding-left:20px;}
	.main .gallery .more {position:absolute; right:0; top:-5px;}
	.main .gallery .list {}
	.main .gallery .list li {float:left; width:calc((100% - 30px)/3);}
	.main .gallery .list li+li {margin-left:15px;}
	.main .gallery .list a {position:relative; display:block; text-align:center; }
	.main .gallery .list a div {position:relative; display:block; overflow:hidden; border-radius:10px; background:#f9f9f9;}
	.main .gallery .list a div i {position:absolute; left:0; top:0; width:100%; height:100%; transition:all 1s ease !important;
	-webkit-transition:all 1s ease !important; -moz-transition:all 1s ease !important;}
	.main .gallery .list a:hover div i {transform:scale(1.1);}
	.main .gallery .list a p {line-height:1.2; color:#000; padding:8px 20px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.main .gallery .list a span {line-height:1; color:#666; font-size:14px;}
	
	
	/* 복지관 소개 */
	.main .intro {position:relative; width:42.9%; float:right;}
	.main .intro h2 {height:60px;}
	.main .intro h2+p {line-height:1.4;}
	.main .intro p+img {position:absolute; right:0; top:0;}
	.main .intro ul {position:relative; margin-top:28px;}
	.main .intro ul li {position:relative; float:left; width:calc((100% - 45px)/4);}
	.main .intro ul li+li {margin-left:15px;}
	.main .intro ul li a {display:block; text-align:center; color:#000; font-weight:400;}
	.main .intro ul li a:hover i {
		border-color:#000; box-shadow:10px 10px 10px rgba(0,0,0,.05); background-position:50% 35%;
	}
	.main .intro ul li i {
		display:block; height:100px; border:1px solid #e5e5e5; border-radius:10px; margin-bottom:7px;
		background-position:center; background-repeat:no-repeat;
		transition:all .3s ease !important;	-webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;
	}
	.main .intro ul li .icon1 i {background-image:url(../images/main/intro_icon1.png);}
	.main .intro ul li .icon2 i {background-image:url(../images/main/intro_icon2.png);}
	.main .intro ul li .icon3 i {background-image:url(../images/main/intro_icon3.png);}
	.main .intro ul li .icon4 i {background-image:url(../images/main/intro_icon4.png);}
	
	
	/* 함께하는 곳 배너 */
	.main .footer-family {margin-top:50px; border-top:1px solid #e5e5e5;}
	.main .footer-family-wrap {margin:0 auto; padding:15px 0; overflow:hidden; position:relative; }
	.main .footer-family-title .btn {position:absolute; top:calc(50% - 20px);  width:1400px;}
	.main .footer-family-title .btn a {position:absolute;display:block; width:40px; height:40px; border:1px solid #e5e5e5; background:#f9f9f9 center no-repeat; border-radius:50%; overflow:hidden; font-size:0;}
	.main .footer-family-title .btn a+a {margin-left:5px;}
	.main .footer-family-title .btn a.prev {left:0; background-image:url(../images/main/icon_arrow1.png); transform:rotate(180deg);}
	.main .footer-family-title .btn a.pause {display:none;}
	.main .footer-family-title .btn a.play {display:none;}
	.main .footer-family-title .btn a.next {right:0; background-image:url(../images/main/icon_arrow1.png);}
	.main .footer-family-title .btn a:hover {z-index:1; background:#000 url(../images/main/icon_arrow2.png) no-repeat center; border:none;}
	
	.main .footer-family-list {width:calc(100% - 160px); margin:0 80px; overflow:hidden;}
	.main .footer-family-list ul {overflow:hidden; width:30000px;}
	.main .footer-family-list ul li {float:left; margin-right:60px;}
	.main .footer-family-list ul li a {display:block; overflow:hidden;}
	.main .footer-family-list ul li a img {display:block;}
	
}









/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	.main {font-size:16px; font-weight:400;}
	.main h2 {font-size:20px; font-family:paybooc; color:#000; font-weight:600; line-height:1;}
	.main>section {width:100%; margin:0 auto;}
	.main>.slider {width:100%; position:relative;}
	.main>.sliderV2 {width:100%; position:relative;}
	.main [class *= 'rowWrap'] {display:block; position:relative; clear:both; margin-top:30px; padding:0 20px;} 
	.main [class *= 'rowWrap']:before,.main [class *= 'rowWrap']:after {content:""; display:block; width:100%; clear:both;} 
	.main .line {margin-top:60px; position:relative; width:100%; border-top:1px solid #f0f0f0;}
	
	/* 공지/채용 */
	.main .boardList {position:relative; margin-top:30px;}
	.main .boardList>ul>li {float:left; height:235px;}
	.main .boardList>ul>li>h2 {margin-right:20px;}
	.main .boardList>ul>li>h2 a {font-weight:600;}
	.main .boardList>ul>li .list {display:none; position:absolute; left:0; top:40px; width:100%;}
	.main .boardList>ul>li .list li:before,
	.main .boardList>ul>li .list li:after {content:""; display:block; width:100%; clear:both;}
	.main .boardList>ul>li .list li+li {margin-top:5px;}
	.main .boardList>ul>li .list li a {display:block; position:relative; float:left; width:calc(100% - 90px); line-height:1.5; overflow-x:hidden;	text-overflow:ellipsis; white-space:nowrap; padding:0 20px 0 15px; color:#000;}
	.main .boardList>ul>li .list li a:before {content:""; width:3px; height:3px; position:absolute; left:5px; top:10px; background:#ddd;}
	.main .boardList>ul>li .list li a:hover {color:#000;}
	.main .boardList>ul>li .list li a .new {position:absolute; right:0; top:2px; width:20px; height:20px; padding:4px 0 0 6px;  background:#ff9d02; color:#fff; font-size:10px; font-weight:400; line-height:1; border-radius:50%;}
	.main .boardList>ul>li .list li span {display:block; float:right; line-height:1.2;}
	.main .boardList>ul>li .more {display:none; right:0; top:-5px;}
	.main .boardList>ul>li .more:hover {border:1px solid #000;}
	.main .boardList>ul>li.on>h2 {color:#ff9d02; padding-bottom:5px; border-bottom:2px solid #ff9d02;}
	.main .boardList>ul>li.on .list {display:block;}
	.main .boardList>ul>li.on .more {display:block;}
	
	
	/* 참여자모집 */
	.main .recruit {position:relative; clear:both; margin-top:30px; padding-top:30px;}
	.main .recruit:before {content:""; position:absolute; display:block; width:calc(100% + 40px); top:0; left:-20px; border-top:1px solid #f0f0f0;}
	.main .recruit .more {right:0; top:20px;}
	.main .recruit .list {width:100%; margin-top:15px;}
	.main .recruit .list li {}
	.main .recruit .list li+li {margin-top:10px;}
	.main .recruit .list a {position:relative; display:block; width:100%; height:100%; padding:20px 120px 20px 20px; border:1px solid #e5e5e5; border-radius:10px;}
	.main .recruit .list a p {word-break:break-all; font-size:18px; font-weight:400; line-height:1.4; color:#000;}
	.main .recruit .list a span {display:block; font-size:15px; color:#999; padding:5px 0 0;}
	.main .recruit .list a i {position:absolute; right:20px; top:20px; display:block; border-radius:100px; padding:10px 13px; line-height:1; font-size:14px; font-weight:500;}
	.main .recruit .list a.before {border-color:#ff8484;}
	.main .recruit .list a.ing {border-color:#ff9d02;}
	.main .recruit .list a.end {border-color:#64bc8c;}
	.main .recruit .list a.ing i {color:#fff; background:#ff9d02;} /* 접수중 */
	.main .recruit .list a.before i {color:#ff8484; background:#fff; border:2px solid;} /* 접수전 */
	.main .recruit .list a.end i {color:#64bc8c; background:#fff; border:2px solid;} /* 접수마감 */
	
	
	/* 자원봉사,퀵,영상,출간자료 */
	.main .rowWrap2 > div {position:relative; clear:both;}
	.main .service {margin-top:30px; padding-top:30px;}
	.main .service:before {content:""; position:absolute; display:block; width:calc(100% + 40px); top:0; left:-20px; border-top:1px solid #f0f0f0;}
	.main .service h2 {margin-bottom:10px;}
	.main .service h2+p {font-size:14px; line-height:1.4; letter-spacing:-.5px; color:#999;}
	.main .service ul {margin-top:20px;}
	.main .service ul li {float:left; width:calc((100% - 10px)/2);}
	.main .service ul li:nth-child(even) {margin-left:10px;}
	.main .service ul li:nth-child(2n)~li {margin-top:10px;}
	.main .service ul li a {display:block; padding:25px 5px; color:#000; font-size:16px; font-weight:500; line-height:1; text-align:center; border:1px solid #e5e5e5; border-radius:10px; background:url(../images/main/icon_arrow1.png) no-repeat 90% 50%;}
	.main .service ul li a:hover {border-color:#ff9d02; background-color:#ff9d02; color:#fff; box-shadow:5px 5px 10px rgba(0,0,0,.1); background-position:95% 50%; background-image:url(../images/main/icon_arrow2.png);} 
	
	.main .quick {position:relative; margin-top:10px;}
	.main .quick ul {height:100%;}
	.main .quick ul li {float:left; width:calc((100% - 10px)/2);}
	.main .quick ul li:nth-child(even) {margin-left:10px;}
	.main .quick ul li:nth-child(2n)~li {margin-top:10px;}
	.main .quick a {position:relative; display:block; width:100%; height:100%; border-radius:10px; text-align:center; color:rgba(0,0,0,.8); font-weight:500; padding:20px; letter-spacing:-1px;}
	.main .quick a:hover {box-shadow:5px 5px 10px rgba(0,0,0,.05);}
	.main .quick a i {display:block; width:100%; height:50px; background-position:50%; background-repeat:no-repeat; margin-bottom:5px;}
	.main .quick a.quick1 {background-color:#ffe1e7;}
	.main .quick a.quick2 {background-color:#ffeca7;}
	.main .quick a.quick3 {background-color:#cff3df;}
	.main .quick a.quick4 {background-color:#d3f8ff;}
	.main .quick a.quick1:hover {background-color:#ffcbd5;}
	.main .quick a.quick2:hover {background-color:#ffe27b;}
	.main .quick a.quick3:hover {background-color:#a7ebc5;}
	.main .quick a.quick4:hover {background-color:#a0e7f4;}
	.main .quick a.quick1 i {background-image:url(../images/main/icon_quick1.png);}
	.main .quick a.quick2 i {background-image:url(../images/main/icon_quick2.png);}
	.main .quick a.quick3 i {background-image:url(../images/main/icon_quick3.png);}
	.main .quick a.quick4 i {background-image:url(../images/main/icon_quick4.png);}
	
	.main .movie {margin-top:30px; padding-top:30px;}
	.main .movie:before {content:""; position:absolute; display:block; width:calc(100% + 40px); top:0; left:-20px; border-top:1px solid #f0f0f0;}
	.main .movie h2 {padding-left:65px; background:url(../images/main/icon_h2youtube.png) no-repeat left 50%;}
	.main .movie .mobile {width:calc(100% + 40px); margin:20px 0 0 -20px; overflow-x:auto;}
	.main .movie .mobile>ul {display:table; padding-bottom:30px;}	
	.main .movie .mobile>ul>li {display:table-cell !important; position:relative; padding-left:20px;}
	.main .movie .mobile>ul>li:last-child {padding-right:20px;}
	.main .movie .mobile>ul>li a {position:absolute; width:100%; height:100%; left:0; top:0}
	.main .movie .mobile>ul>li img {width:60vw; border-radius:10px; overflow:hidden;}
	
	.main .book {padding-top:30px;}
	.main .book:before {content:""; position:absolute; display:block; width:calc(100% + 40px); top:0; left:-20px; border-top:1px solid #f0f0f0;}
	.main .book .more {position:absolute; right:0; top:20px;}
	.main .book .pic a {display:block; width:100%; height:190px; margin-top:15px; background:url(../images/main/book_bg.jpg) no-repeat 50% 100%; text-align:center;}
	.main .book .pic a span.img {height:148px; background-size:contain !important;}
	/* .main .book .pic a img {position:absolute; bottom:43px; left:50%;transform:translateX(-50%);} */
	.main .book .pic a p {position:absolute; bottom:0; width:100%;}
	
	
	/* 복지사업 */
	.main .business {position:relative; clear:both; margin:40px 0; padding:50px 0 0; background:url(../images/main/business_bg.jpg) no-repeat 50% 0; background-size:cover; border-top:1px solid #f0f0f0;}
	.main .business * {z-index:1; position:relative;}
	.main .business .cover {z-index:0; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.9);}
	.main .business {background:url(../images/main/business_bg.jpg) no-repeat 50% 0; background-size:cover;}
	.main .business h2 {font-size:36px; font-weight:600; font-family:paybooc; color:#ff8484; text-align:center;}
	.main .business h2+p {font-size:18px; font-family:paybooc; font-weight:400; color:#000; margin-top:10px; text-align:center;}
	.main .business h2+p span {display:block; position:relative;}
	
	.main .rollWrap_m {width:100%; margin:0 auto; position:relative; padding:20px 20px 0; overflow-x:auto;}
	.main .rollWrap_m ul {position:relative; overflow:hidden; display:table; padding-bottom:50px;}
	.main .rollWrap_m ul li {position:relative; display:table-cell; }
	.main .rollWrap_m ul li+li {padding-left:20px;}
	.main .rollWrap_m ul li:last-child {padding-right:20px;}
	.main .rollWrap_m ul li a {display:block; width:60vw; box-shadow:5px 5px 15px rgba(0,0,0,.2); transition:all .5s ease-in-out; border-radius:10px; overflow:hidden; background:#fff;}
	.main .rollWrap_m ul li a .info {position:relative; padding:30px;}
	.main .rollWrap_m ul li a .info .num {position:absolute; right:20px; top:20px; font-size:12px; font-weight:600; color:#ffc800; font-family:paybooc; line-height:1;}
	.main .rollWrap_m ul li a .info dt {font-family:paybooc; font-size:18px; color:#ff8484; font-weight:600; line-height:1.2; margin-bottom:10px;}
	.main .rollWrap_m ul li a .info dd {position:relative; word-break:break-all; height:50px; overflow:hidden;}
	.main .rollWrap_m ul li a .info dd:before {
		content:""; position:absolute; bottom:0; right:0; width:50px; height:20px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);}
	.main .rollWrap_m ul li a .info dd:after {content:"..."; position:absolute; bottom:0px; right:5px;}
	.main .rollWrap_m ul li a .info dt p {display:block; font-size:14px; color:#888; font-weight:400; line-height:1; margin-bottom:10px;}
	
	
	/* 복지관 갤러리 */	
	.main .gallery {position:relative;}
	.main .gallery h2 {height:60px;}
	.main .gallery h2 span {display:block; font-size:15px !important; font-family:NotoSansKR; font-weight:400; color:#999; padding-top:10px;}
	.main .gallery .more {position:absolute; right:0; top:-10px;}
	.main .gallery .list {margin-top:10px;}
	.main .gallery .list li {float:left; width:calc((100% - 10px)/2);}
	.main .gallery .list li+li {margin-left:10px;}
	.main .gallery .list li:nth-child(3) {display:none;}
	.main .gallery .list a {position:relative; display:block; text-align:center; }
	.main .gallery .list a div {position:relative; display:block; overflow:hidden; border-radius:10px; background:#f9f9f9;}
	.main .gallery .list a div i {position:absolute; left:0; top:0; width:100%; height:100%; transition:all 1s ease !important;
	-webkit-transition:all 1s ease !important; -moz-transition:all 1s ease !important;}
	.main .gallery .list a:hover div i {transform:scale(1.1);}
	.main .gallery .list a p {line-height:1.2; color:#000; padding:10px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.main .gallery .list a span {line-height:1; color:#999; font-size:15px;}
	
	
	/* 복지관 소개 */
	.main .intro {position:relative; margin-top:30px; padding-top:30px; }
	.main .intro:before {content:""; position:absolute; display:block; width:calc(100% + 40px); top:0; left:-20px; border-top:1px solid #f0f0f0;}
	.main .intro h2 {margin-bottom:10px;}
	.main .intro h2+p {line-height:1.4; padding-right:100px; color:#999; font-size:14px;}
	.main .intro p+img {position:absolute; right:0; top:20px; width:70px;}
	.main .intro ul {position:relative; margin-top:20px;}
	.main .intro ul li {position:relative; float:left; width:calc((100% - 15px)/4);}
	.main .intro ul li+li {margin-left:5px;}
	.main .intro ul li a {display:block; text-align:center; color:#000; font-size:15px; font-weight:400; letter-spacing:-1px;}
	.main .intro ul li a:hover i {
		border-color:#000; box-shadow:10px 10px 10px rgba(0,0,0,.05); background-position:50% 35%;
	}
	.main .intro ul li i {
		display:block; height:100px; border:1px solid #e5e5e5; border-radius:10px; margin-bottom:7px;
		background-position:center; background-repeat:no-repeat;
		transition:all .3s ease !important;	-webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;
	}
	.main .intro ul li .icon1 i {background-image:url(../images/main/intro_icon1.png);}
	.main .intro ul li .icon2 i {background-image:url(../images/main/intro_icon2.png);}
	.main .intro ul li .icon3 i {background-image:url(../images/main/intro_icon3.png);}
	.main .intro ul li .icon4 i {background-image:url(../images/main/intro_icon4.png);}
	
	
	/* 함께하는 곳 배너 */
	.main .footer-family {margin-top:30px; border-top:1px solid #e5e5e5;}
	.main .footer-family-wrap {width:100%; padding:10px 20px; overflow:hidden; position:relative;}
	.main .footer-family-title .btn {width:calc(100% - 40px); position:absolute; top:calc(50% - 15px);}
	.main .footer-family-title .btn a { position:absolute;display:block; width:30px; height:30px; border:1px solid #e5e5e5; background:#f9f9f9 center no-repeat; border-radius:50%; overflow:hidden; font-size:0;}
	.main .footer-family-title .btn a+a {margin-left:5px;}
	.main .footer-family-title .btn a.prev {left:0; background-image:url(../images/main/icon_arrow1.png); transform:rotate(180deg);}
	.main .footer-family-title .btn a.pause {display:none;}
	.main .footer-family-title .btn a.play {display:none;}
	.main .footer-family-title .btn a.next {right:0;background-image:url(../images/main/icon_arrow1.png);}
	.main .footer-family-title .btn a:hover {z-index:1; border-color:#000;}
	
	.main .footer-family-list {width:calc(100% - 100px); margin:0 50px; overflow:hidden;}
	.main .footer-family-list ul {overflow:hidden; width:30000px;}
	.main .footer-family-list ul li {float:left; margin-right:60px;}
	.main .footer-family-list ul li a {display:block; overflow:hidden;}
	.main .footer-family-list ul li a img {display:block; height:40px;}
}







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