@charset "UTF-8";
#container {position:relative;padding-bottom:128px}

/* visual */
/* .visual {position:relative;height:228px;background:url(/images/site/mbl/main/visual.jpg) no-repeat center 0;background-size:cover} */
.visual {position:relative;height:175px;background:url(/images/site/mbl/main/visual_n_001.jpg) no-repeat center 0;background-size:cover}
.visual .text {visibility:hidden}

/*.btn_join {position:absolute;left:0;bottom:25px;width:100%;text-align:center}
.btn_join a {display:inline-block;width:65px;height:65px;background:url(/images/site/mbl/main/btn_join.png) no-repeat;;background-size:100% auto;text-indent:-9999em}*/

/* 목록 제목 */
.mainSubTlt {}
.mainSubTlt {height:44px;padding:0 10px;margin-top:6px;border-bottom:1px solid #c7c7c7;font-size:17px;color:#252525;line-height:44px;letter-spacing:-1px;font-weight:bold}
.mainSubTlt a {display:block;background:url(/images/site/mbl/ico/ico_mainTlt.png) no-repeat right center;background-size:10px auto}

.listStyle {border-bottom:1px solid #c7c7c7}
.listStyle li:last-child a {border-bottom:0 none}

/* 공지 */
p.notice {position:relative;overflow:hidden;height:40px;padding:0 10px;border-bottom:1px solid #dedede;background:#f6f9fa;line-height:41px;font-size:14px;letter-spacing:-0.5px;font-weight:bold}
p.notice a {display:block;padding-right:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
p.notice span {position:absolute;right:10px;top:0;font-size:13px;color:#888888;font-weight:normal}

/* 박스 링크 */
.boxLink {overflow:hidden;padding:15px 10px 10px 10px}
.boxLink li {float:left;padding-left:5px;width:50%;box-sizing:border-box}

.boxLink li a {display:block;height:107px;background:url(/images/site/mbl/main/boxLink_bg02.png) no-repeat center 0;background-size:100% 100%;text-align:center;box-sizing:border-box}
.boxLink li a span {display:block;height:100%;background:url(/images/site/mbl/main/ico_boxLink_txt02.png) no-repeat center 12px;background-size:auto 90px;text-indent:-9999em; background-color: #5fccf3;}

.boxLink li:first-child {padding-right:5px;padding-left:0}
.boxLink li:first-child a {background-image:url(/images/site/mbl/main/boxLink_bg01.png)}
.boxLink li:first-child a span {background:url(/images/site/mbl/main/ico_boxLink_txt01.png) no-repeat center 12px;background-size:auto 90px; background-color: #4793e9}

/* 배너 이미지 */
.bannerImg {position:relative;padding:20px 10px}
.bannerImg h2 {display:none;font-size:17px;color:#252525;letter-spacing:-1px}
.bannerImg img {width:100%}

p.bannerNum {display:none;position:absolute;right:49px;top:25px;font-size:12px;color:#777}
p.bannerNum strong {color:#f1592a;font-size:14px}
p.bannerNum span {color:#7d7d7d}
.btn_playStop {position:absolute;right:10px;top:20px;display:block;width:19px;height:19px;padding:10px;background:url(/images/site/mbl/main/btn_pause.png) no-repeat center center;background-size:19px auto;text-indent:-9999em;z-index:30}
.btn_playStop.play {background-image:url(/images/site/mbl/main/btn_play.png)}

.swiper-pagination {left:13px;top:11px;text-align:left}
.swiper-pagination .swiper-pagination-bullet {position:relative;top:2px;width:5px;height:5px;margin-right:5px;background:#d1d1d1;opacity:1;text-indent:-9999em;vertical-align:top}
.swiper-pagination .swiper-pagination-bullet-active {top:0;width:9px;height:9px;background:#fff}

/* 바로가기 버튼 */
.quick {padding:0 10px}
.quick ul {border:1px solid #bcbcbc;border-bottom:0 none}
.quick li {border-bottom:1px solid #bcbcbc}
.quick li a {display:block;height:42px;padding-left:54px;background:url(/images/site/mbl/main/quick_ico01.png) no-repeat 19px center;background-size:23px auto;line-height:42px;font-weight:bold;font-size:14px;color:#333}
.quick li:nth-child(2) a {background:url(/images/site/mbl/main/quick_ico02.png) no-repeat 15px center;background-size:26px auto;}
.quick li:nth-child(3) a {background:url(/images/site/mbl/main/quick_ico03.png) no-repeat 17px center;background-size:22px auto;}
.quick li:nth-child(4) a {background:url(/images/site/mbl/main/quick_ico04.png) no-repeat 21px center;background-size:15px auto;}

/* 자원봉사 활동내역 */
.activityGo {height:83px;margin:20px 10px;background:#1c7fa4;text-align:center}
.activityGo h3 {padding:21px 0 10px 0;font-size:19px;color:#fff;letter-spacing:-1.5px}
.activityGo p {display:inline-block;padding-right:13px;background:url(/images/site/mbl/main/ico_arrow.png) no-repeat right center;background-size:auto 10px;font-size:13px;color:#eceaea;letter-spacing:-0.5px}


@media only screen and (min-width:360px) {
.visual {height:215px}
}

@media only screen and (min-width:400px) {
.visual {height:225px}
}

@media only screen and (max-width:570px) and (orientation : landscape) {
.visual {height:250px}
}

@media only screen and (min-width:560px) and (orientation : landscape) {
.visual {background-image:url(/images/site/mbl/main/visual_n_001_T.jpg)}
}

/* 아이패드 세로 이상 해상도 */
@media only screen and (min-width:768px) {
.visual {height:328px;background-image:url(/images/site/mbl/main/visual_n_001_T.jpg)}
}

/* 테블릿 2단 */
@media only screen and (min-width:768px) and (orientation : landscape) {
#container {padding-bottom:124px} /* 2016-05-18 수정 */

.mainLeft {float:left;width:64%;padding-right:1px;box-sizing:border-box}
.mainRight {float:right;width:36%;box-sizing:border-box}
.mainRight02 {position:absolute;right:0;top:209px}

.visual {height:278px}

p.notice {padding:0 15px}
p.notice span {right:15px}

.boxLink {padding:20px 15px;border-bottom:1px solid #888888}
.boxLink li a {height:123px}
.boxLink li a span {background-position:center 12px;background-size:auto 96px}
.boxLink li:first-child a span {background-position:center 15px;background-size:auto 93px}

.bannerImg {padding:25px 15px 20px 15px;border-bottom:1px solid #888888}
.bannerImg h2 {display:block;margin-bottom:14px}
p.bannerNum {display:block}
.btn_playStop {right:5px;top:10px;width:26px;height:26px;background-image:url(/images/site/mbl/main/btn_pauseT.png);background-size:26px auto}
.btn_playStop.play {background-image:url(/images/site/mbl/main/btn_playT.png)}

.swiper-pagination {display:none}

.quick {padding:20px 15px 0 15px}
.activityGo {margin:20px 15px}

@media only screen and (min-width:1150px) {
.visual {height:310px}
}

@media only screen and (min-width:1200px) {
.visual {height:345px}
}

@media only screen and (min-width:1300px) {
.visual {height:350px}
}

@media only screen and (min-width:1400px) {
.visual {height:380px}
}

@media only screen and (min-width:1500px) {
.visual {height:407px}
}

@media only screen and (min-width:1600px) {
.visual {height:434px}
}

@media only screen and (min-width:1700px) {
.visual {height:460px}
}

@media only screen and (min-width:1800px) {
.visual {height:488px}
}
@media only screen and (min-width:1700px) {
.visual {height:515px}
}