@charset "utf-8";

/* 메인페이지 */

/* 메인 배너 영역 main banner area */
.main-banner-area { height: 430px; overflow: hidden; width: 100%; position: relative; }
.main-banner-area .bg-area { height: 100%; width: 100%; position: relative; }
.main-banner-area .bg-area svg { width: 1920px; height: 100%; position: absolute; left: 50%; margin-left: -960px; top: 0; z-index: -1; }

.main-banner-area .banner { position: absolute; position: absolute; z-index: 1; width: 1200px; left: 50%; margin-left: -600px; height: 100%; }
.main-banner-area .banner .txt-area { float: left; width: 50%; height: 100%; padding: 120px 0; }
.main-banner-area .banner .notice-card-area { float: right; width: 50%; height: 100%; }

.main-banner-area .banner .txt-area h3 { font-size: 3.4rem; font-weight: 300; margin-bottom: 3px; line-height: 42px; }
.main-banner-area .banner .txt-area h4 { font-size: 4.4rem; font-weight: 600; margin-bottom: 10px; line-height: 56px; }
.main-banner-area .banner .txt-area h4 b { font-weight: 600; color: #005fea; }
.main-banner-area .banner .txt-area p { font-size: 2.3rem; font-weight: 300; color: #252529; }

/* 메인 배너 카드 슬라이드 */
.notice-card-area { padding: 40px 0; }
.notice-card-area .card-subject { display: block; text-align: center; font-size: 1.8rem; color: #013683; }
.notice-card-area .card-slide,
.notice-card-area .no-livinglab { height: 100%; }
.notice-card-area .no-livinglab { text-align: center; position: relative; overflow: hidden; }
.notice-card-area .card-slide .card { height: 240px; width: calc(100% - 200px); border-radius: 16px; overflow: hidden; margin: 20px; transform: scale(0.85); transition: box-shadow .5s ease, transform .5s ease; outline: 0; cursor: pointer; }
.notice-card-area .no-livinglab .card { height: 240px; width: 360px; border-radius: 16px; overflow: hidden; margin: 20px;display: inline-block; background: rgba(159,200,240,0.20); border: 1px solid rgba(94,150,205,0.2); padding: 110px 10px; font-size: 1.5rem; color: rgba(1,54,131,0.7); font-weight: 100; }
.notice-card-area .no-livinglab .card:first-child { border-radius: 0 16px 16px 0; width: 150px; position: absolute; left: -105px; transform: scale(0.85); }
.notice-card-area .no-livinglab .card:last-child { border-radius: 16px 0 0 16px; width: 150px;  position: absolute; right: -105px; transform: scale(0.85); }
.notice-card-area .card-slide .card.slick-current { box-shadow: 0 15px 25px 0px rgba(1, 55, 133, 0.25); transform: scale(1); }
.notice-card-area .card-slide .card .title-area { height: 80px; display: table; width: 100%; overflow: hidden; padding: 20px 40px; }
.notice-card-area .card-slide .card .title-area .title { display: table-cell; vertical-align: middle; text-align: center; }
.notice-card-area .card-slide .card .title-area .title h3 { display: -webkit-box; font-size: 1.7rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 42px; font-weight: normal; line-height: 21px; }
.notice-card-area .card-slide .card.recruit .title-area { background: #005fea; }
.notice-card-area .card-slide .card.recruit .title-area .title { color: #fff; }
.notice-card-area .card-slide .card.noti .title-area { background: #ffd543; }
.notice-card-area .card-slide .card.noti .title-area .title { color: #222; }

.notice-card-area .card-slide .card .content-area { height: calc(100% - 80px); background-color: #fff; display: table; width: 100%; }
.notice-card-area .card-slide .card .content-area .content { display: table-cell; vertical-align: middle; text-align: center; height: 100%; }
.notice-card-area .card-slide .card .content-area .content .detail-view-btn { outline: 0; width: 160px; height: 40px; display: block; margin: 20px auto 0; border-radius: 40px; font-size: 1.3rem; line-height: 41px; transition: background .25s ease; }
.notice-card-area .card-slide .card .content-area .content .detail-view-btn img { width: 16px; display: inline-block; margin: 12px 0 0 5px; }

.notice-card-area .card-slide .card.recruit .content-area .content .detail-view-btn { background: #005fea; color: #fff; }
.notice-card-area .card-slide .card.recruit .content-area .content .detail-view-btn:hover { background: #0052cc; }
.notice-card-area .card-slide .card.noti .content-area .content .detail-view-btn { background: #ffd543; color: #222; }
.notice-card-area .card-slide .card.noti .content-area .content .detail-view-btn:hover { background: #f0c837; }

.notice-card-area .card-slide .card.recruit .content-area .content .row-wrap { display: inline-block; }
.notice-card-area .card-slide .card.recruit .content-area .content .row { font-size: 1.5rem; width: 100%; margin-bottom: 10px; line-height: 16px; }
.notice-card-area .card-slide .card.recruit .content-area .content .row:last-child { margin-bottom: 0; }
.notice-card-area .card-slide .card.recruit .content-area .content .row .head { float: left; width: 100px; color: #63667d; padding-left: 30px; position: relative; text-align: left; }
.notice-card-area .card-slide .card.recruit .content-area .content .row .head img { position: absolute; left: 0; top: 0; }
.notice-card-area .card-slide .card.recruit .content-area .content .row .head img.cal-ico { width: 18px; left: 3px; }
.notice-card-area .card-slide .card.recruit .content-area .content .row .head img.people-ico { width: 24px; top: -3px; }
.notice-card-area .card-slide .card.recruit .content-area .content .row .cont { float: right; width: calc(100% - 100px); text-align: left; padding-left: 10px; white-space: nowrap; }

.notice-card-area .card-slide .card.noti .content-area .content .noti-cont { display: -webkit-box; font-size: 1.5rem; padding: 0 30px; color: #666; max-height: 63px; line-height: 21px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; font-weight: normal; }

.notice-card-area .card-slide .slick-list { height: calc(100% - 50px); position: relative; }
.notice-card-area .card-slide .slick-arrow { width: 40px; height: 40px; color: transparent; font-size: 0; border: none; border-radius: 50%; position: absolute; z-index: 2; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.1); opacity: .7; transition: opacity .25s ease, box-shadow .25s ease; }
.notice-card-area .card-slide .slick-arrow:hover { opacity: 1; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2); }
.notice-card-area .card-slide .slick-arrow.slick-prev { background: url(../../img/common/navi_arrow_pre.svg) no-repeat; background-size: 28px; background-position: center; background-color: #fff; left: -20px; top: 50%; margin-top: -45px; }
.notice-card-area .card-slide .slick-arrow.slick-next { background: url(../../img/common/navi_arrow_next.svg) no-repeat; background-size: 28px; background-position: center; background-color: #fff; right: -20px; top: 50%; margin-top: -45px; }

.notice-card-area .card-slide .slick-list:before,
.notice-card-area .no-livinglab:before { width: 20px; height: 212px; background: url(../../img/main/slider_blind.png); position: absolute; z-index: 2; content: ''; left: 0; top: 30px; }
.notice-card-area .card-slide .slick-list:after,
.notice-card-area .no-livinglab:after { width: 20px; height: 212px; background: url(../../img/main/slider_blind.png); position: absolute; z-index: 2; content: ''; right: 0; top: 30px; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); }

.notice-card-area .card-slide .slick-dots { text-align: center; }
.notice-card-area .card-slide .slick-dots li { display: inline-block; margin: 0 2px;}
.notice-card-area .card-slide .slick-dots li button { color: transparent; font-size: 0; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #005fea; background: transparent; }
.notice-card-area .card-slide .slick-dots li.slick-active button { background: #005fea; }

@media all and (max-width: 1200px)
{
    .main-banner-area { height: 660px; }
    .main-banner-area .bg-area svg { width: auto; }
    .main-banner-area .banner { width: 100%; left: 0; margin-left: 0; }
    .main-banner-area .banner .txt-area { width: 100%;  text-align: center; float: none; padding: 80px 10px 0; height: auto; }

    .main-banner-area .banner .notice-card-area { float: none; width: 100%; height: auto; padding-bottom: 0; }
    .notice-card-area .card-slide .card { margin: 20px 5px 40px; }
    .notice-card-area .card-slide .slick-arrow.slick-prev { left: 10px; }
    .notice-card-area .card-slide .slick-arrow.slick-next { right: 10px; }
	
	.main-banner-area.no-livinglab-area { height: 320px; }
	.main-banner-area.no-livinglab-area .notice-card-area { display: none; }
	.main-banner-area.no-livinglab-area .bg-area svg { height: 340px; }
}
@media all and (max-width: 600px)
{
    .main-banner-area { height: 530px; }
    .main-banner-area .banner .txt-area { padding-top: 50px; }
    .main-banner-area .banner .txt-area h3 { font-size: 2.8rem; font-weight: 300; margin-bottom: 0; line-height: 34px; }
    .main-banner-area .banner .txt-area h4 { font-size: 3.5rem; font-weight: 600; margin-bottom: 8px; line-height: 44px; }
    .main-banner-area .banner .txt-area h4 b { font-weight: 600; color: #005fea; }
    .main-banner-area .banner .txt-area p { font-size: 1.8rem; font-weight: 300; color: #252529; }

    .notice-card-area .card-subject { font-size: 1.6rem; }
    .notice-card-area .card-slide .card { height: 190px; }
    .notice-card-area .card-slide .card .title-area { padding: 15px 20px; height: 66px; }
    .notice-card-area .card-slide .card .title-area .title h3 { font-size: 1.5rem; max-height: 40px; line-height: 20px; }
    .notice-card-area .card-slide .card .content-area { height: calc(100% - 66px); }
    .notice-card-area .card-slide .card .content-area .content .detail-view-btn { height: 35px; line-height: 35px; margin-top: 10px; }
    .notice-card-area .card-slide .card .content-area .content .detail-view-btn img { margin-top: 8px; }
    .notice-card-area .card-slide .card.recruit .content-area .content .row { font-size: 1.3rem; }
	
	.main-banner-area.no-livinglab-area { height: 220px; }
}
@media all and (max-width: 425px)
{
	.notice-card-area .card-slide .card.recruit .content-area .content .row .head { width: 30px; color: transparent; height: 15px ; }
	.notice-card-area .card-slide .card.recruit .content-area .content .row .cont { width: calc(100% - 30px); }
}
/* 퀵 3 메뉴 */
.quick-menu-area { padding: 60px 0; }
.quick-menu-area .quick-menu-wrap { width: 1200px; margin: 0 auto; }
.quick-menu-area .quick-menu-wrap a { height: 240px; width: calc(33.33% - 20px); float: left; border: 1px solid #dee3eb; border-radius: 16px; overflow: hidden; position: relative; transition: box-shadow .25s ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); }
.quick-menu-area .quick-menu-wrap a:nth-child(2) { margin: 0 28px; }
.quick-menu-area .quick-menu-wrap a:hover { box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.15); }
.quick-menu-area .quick-menu-wrap a div.txt { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; padding: 40px ; }
.quick-menu-area .quick-menu-wrap a div.txt h1 { font-size: 2.3rem; font-weight: bold; margin-bottom: 25px; display: block; line-height: 23px; }
.quick-menu-area .quick-menu-wrap a div.txt p { font-size: 1.6rem; font-weight: 300; display: block; }
.quick-menu-area .quick-menu-wrap a div.txt .detail-view-btn { display: block; margin-top: 30px; width: 180px; height: 45px; border-radius: 23px; border: 1px solid #e5e8ee; line-height: 45px; font-size: 1.4rem; color: #999; transition: border-color .25s ease, background .25s ease, color .25s ease; text-align: center; padding-right: 20px; position: relative; }
.quick-menu-area .quick-menu-wrap a div.txt .detail-view-btn:after { position: absolute; content: ''; width: 18px; height: 18px; background: url(../../img/common/arrow_next.svg); background-size: 18px; opacity: .3; right: 35px; top: 13px; transition: background .25s ease,opacity .25s ease; }
.quick-menu-area .quick-menu-wrap a:hover div.txt .detail-view-btn:after { osition: absolute; content: ''; width: 18px; height: 18px; background: url(../../img/common/arrow_next_w.svg); background-size: 18px; opacity: 1; right: 35px; top: 13px; }
.quick-menu-area .quick-menu-wrap a:hover div.txt .detail-view-btn { border-color: #005fea; background: #005fea; color: #fff; }

.quick-menu-area .quick-menu-wrap a .ico-bg-wrap { width: 230px; height: 230px; position: absolute; z-index: 1; right: -75px; top: -75px; }
.quick-menu-area .quick-menu-wrap a .ico-bg-wrap .ico-bg { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.quick-menu-area .quick-menu-wrap a .ico-bg-wrap .ico-bg:before { position: absolute; content: ''; border-radius: 50%; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; transition: width .3s ease, height .3s ease, left .3s ease, top .3s ease; }
.quick-menu-area .quick-menu-wrap a:hover .ico-bg-wrap .ico-bg:before { width: calc(100% + 50px); height: calc(100% + 50px); left: -25px; top: -25px; }
.quick-menu-area .quick-menu-wrap a:nth-child(1) .ico-bg-wrap .ico-bg { background: #ffe68f; }
.quick-menu-area .quick-menu-wrap a:nth-child(1) .ico-bg-wrap .ico-bg:before { background: #fff9e6; }
.quick-menu-area .quick-menu-wrap a:nth-child(2) .ico-bg-wrap .ico-bg { background: #95f3e1; }
.quick-menu-area .quick-menu-wrap a:nth-child(2) .ico-bg-wrap .ico-bg:before { background: #d6fff7; }
.quick-menu-area .quick-menu-wrap a:nth-child(3) .ico-bg-wrap .ico-bg { background: #b7d7fb; }
.quick-menu-area .quick-menu-wrap a:nth-child(3) .ico-bg-wrap .ico-bg:before { background: #edf5ff; }

.quick-menu-area .quick-menu-wrap a .ico-bg-wrap .ico-bg:after { position: absolute; content: ''; z-index: 1; }
.quick-menu-area .quick-menu-wrap a:nth-child(1) .ico-bg-wrap .ico-bg:after { width: 60px; height: 60px; background: url(../../img/main/quick_icon_01.svg); background-size: 60px; right: 48%; top: 48%; }
.quick-menu-area .quick-menu-wrap a:nth-child(2) .ico-bg-wrap .ico-bg:after { width: 70px; height: 55px; background: url(../../img/main/quick_icon_02.svg); background-size: 70px 55px; right: 45%; top: 48%; }
.quick-menu-area .quick-menu-wrap a:nth-child(3) .ico-bg-wrap .ico-bg:after { width: 52px; height: 64px; background: url(../../img/main/quick_icon_03.svg); background-size: 52px 64px; right: 47%; top: 48%; }

@media all and (max-width: 1200px)
{
    .quick-menu-area .quick-menu-wrap { width: 100%; padding: 0 10px; }
}
@media all and (max-width: 960px)
{
    .quick-menu-area .quick-menu-wrap a { width: calc(33.33% - 10px); height: 200px; }
    .quick-menu-area .quick-menu-wrap a:hover { box-shadow: none; }
    .quick-menu-area .quick-menu-wrap a div.txt { padding: 20px; }
    .quick-menu-area .quick-menu-wrap a div.txt p { display: none; }
    .quick-menu-area .quick-menu-wrap a div.txt .detail-view-btn { display: none; }
    .quick-menu-area .quick-menu-wrap a div.txt h1 { text-align: center; margin: 125px 0 0; font-size: 2rem; }

    .quick-menu-area .quick-menu-wrap a .ico-bg-wrap { width: 100px; height: 100px; right: 50%; margin-right: -50px; top: 30px; }
    .quick-menu-area .quick-menu-wrap a:nth-child(2) { margin: 0 15px; }
    .quick-menu-area .quick-menu-wrap a:hover .ico-bg-wrap .ico-bg:before { width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; }
    .quick-menu-area .quick-menu-wrap a:nth-child(1) .ico-bg-wrap .ico-bg:after { width: 42px; height: 42px; background: url(../../img/main/quick_icon_01.svg); background-size: 42px; right: 50%; top: 50%; margin: -21px -21px 0 0; }
    .quick-menu-area .quick-menu-wrap a:nth-child(2) .ico-bg-wrap .ico-bg:after { width: 49px; height: 38px; background: url(../../img/main/quick_icon_02.svg); background-size: 49px 38px; right: 50%; top: 50%; margin: -19px -25px 0 0; }
    .quick-menu-area .quick-menu-wrap a:nth-child(3) .ico-bg-wrap .ico-bg:after { width: 36px; height: 45px; background: url(../../img/main/quick_icon_03.svg); background-size: 36px 45px; right: 50%; top: 50%; margin: -22px -18px 0 0; }
}
@media all and (max-width: 660px)
{
    .quick-menu-area { padding: 20px 0; }
    .quick-menu-area .quick-menu-wrap a { border: none; padding: 0; }
    .quick-menu-area .quick-menu-wrap a div.txt { padding: 10px; }
    .quick-menu-area .quick-menu-wrap a div.txt h1 { font-size: 1.6rem; font-weight: 500; margin-top: 135px; }
}

/* 영역 타이틀 */
.area-title-area { margin-bottom: 40px; text-align: center; }
.area-title-area h2 { font-size: 2.8rem; font-weight: bold; }
.area-title-area p { font-size: 1.8rem; font-weight: 300; margin-top: 10px; }

@media all and (max-width: 600px)
{
    .area-title-area h2 { font-size: 2.5rem; }
    .area-title-area p { font-size: 1.6rem; margin-top: 10px; }
}

/* 커뮤니티 맵 */
.community-map-area { padding: 60px 0 70px; background: #f8f8f8; }
.community-map-area .community-map { width: 1200px; margin: 0 auto; }
.map-wrap .category { float: left; width: 50%; }
.map-wrap .category a { width: calc(33.3333% - 15px); margin-right: 15px; height: 166px; border-radius: 12px; border: 1px solid #cad2df; float: left; background: #e8eef6; transition: border-color .25s ease, background .25s ease; }
.map-wrap .category a:nth-child(1),
.map-wrap .category a:nth-child(2),
.map-wrap .category a:nth-child(3) { margin-bottom: 18px; }
.map-wrap .category a .ico { width: 75px; height: 75px; border-radius: 50%; background: #fff; transition: background .25s ease; margin: 32px auto 0; position: relative; }
.map-wrap .category a .ico:after { position: absolute; z-index: 1; content: ''; }
.map-wrap .category a .cate-name { display: block; text-align: center; font-size: 1.5rem; margin-top: 10px; transition: color .25s ease; }
.map-wrap .category a.select,
.map-wrap .category a:hover { background: #005fea; border-color: #005fea; }
.map-wrap .category a.select .ico,
.map-wrap .category a:hover .ico { background: #0047af; }
.map-wrap .category a.select .cate-name,
.map-wrap .category a:hover .cate-name { color: #fff; }

.map-wrap .category a.new .ico:after { width: 39px; height: 28px; background: url(../../img/common/map/cate_new.svg); background-size: 39px 28px; left: 50%; margin-left: -20px; top: 50%; margin-top: -16px; }
.map-wrap .category a.new.select .ico:after,
.map-wrap .category a.new:hover .ico:after { width: 39px; height: 28px; background: url(../../img/common/map/cate_new_w.svg); background-size: 39px 28px; left: 50%; margin-left: -20px; top: 50%; margin-top: -16px; }
.map-wrap .category a.event .ico:after { width: 45px; height: 27px; background: url(../../img/common/map/cate_event.svg); background-size: 45px 27px; left: 50%; margin-left: -22px; top: 50%; margin-top: -10px; }
.map-wrap .category a.event.select .ico:after,
.map-wrap .category a.event:hover .ico:after { width: 45px; height: 27px; background: url(../../img/common/map/cate_event_w.svg); background-size: 45px 27px; left: 50%; margin-left: -22px; top: 50%; margin-top: -10px; }
.map-wrap .category a.show .ico:after { width: 22px; height: 36px; background: url(../../img/common/map/cate_show.svg); background-size: 22px 36px; left: 50%; margin-left: -11px; top: 50%; margin-top: -16px; }
.map-wrap .category a.show.select .ico:after,
.map-wrap .category a.show:hover .ico:after { width: 22px; height: 36px; background: url(../../img/common/map/cate_show_w.svg); background-size: 22px 36px; left: 50%; margin-left: -11px; top: 50%; margin-top: -16px; }
.map-wrap .category a.dang .ico:after { width: 30px; height: 26px; background: url(../../img/common/map/cate_dang.svg); background-size: 30px 26px; left: 50%; margin-left: -15px; top: 50%; margin-top: -15px; }
.map-wrap .category a.dang.select .ico:after,
.map-wrap .category a.dang:hover .ico:after { width: 30px; height: 26px; background: url(../../img/common/map/cate_dang_w.svg); background-size: 30px 26px; left: 50%; margin-left: -15px; top: 50%; margin-top: -15px; }
.map-wrap .category a.etc .ico:after { width: 26px; height: 26px; background: url(../../img/common/map/cate_etc.svg); background-size: 26px 26px; left: 50%; margin-left: -13px; top: 50%; margin-top: -14px; }
.map-wrap .category a.etc.select .ico:after,
.map-wrap .category a.etc:hover .ico:after { width: 26px; height: 26px; background: url(../../img/common/map/cate_etc_w.svg); background-size: 26px 26px; left: 50%; margin-left: -13px; top: 50%; margin-top: -14px; }

.map-wrap .category a.more .more-box { display: table; width: 100%; height: 100%; }
.map-wrap .category a.more .more-box .txt { display: table-cell; vertical-align: middle; text-align: center; font-size: 1.4rem; }
.map-wrap .category a.more .more-box .txt .arrow { display: inline-block; width: 15px; height: 15px; background: url(../../img/common/arrow_next.svg); opacity: .6; margin: 2px 0 0 5px; vertical-align: top; }
.map-wrap .category a.more:hover .more-box .txt .arrow { background: url(../../img/common/arrow_next_w.svg); opacity: 1; }
.map-wrap .category a.more:hover .more-box .txt { color: #fff; }

.map-wrap .map { float: right; width: 50%; height: 350px; border-radius: 16px; border: 1px solid #cad2df; overflow: hidden; cursor: pointer; }

@media all and (max-width: 1200px)
{
    .community-map-area .community-map { width: 100%; padding: 0 10px; }
}
@media all and (max-width: 960px)
{
    .map-wrap .category { float: none; width: 100%; white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; }
    .map-wrap .category::-webkit-scrollbar { display: none; }
    .map-wrap .category a { float: none; display: inline-block; width: 120px; vertical-align: top; height: 38px; border-radius: 6px; line-height: 36px; margin: 0; }
    .map-wrap .category a .cate-name { margin: 0; }
    .map-wrap .category a .ico { display: none; }
    .map-wrap .category a.more .more-box .txt .arrow { margin-top: 9px; }
    .map-wrap .map { float: none; width: 100%; }
}
@media all and (max-width: 600px)
{
    .map-wrap .category a .cate-name { font-size: 1.4rem; }
}

/* 마을 의제 */
.village-agenda-area { background: #778ffd; padding: 60px 0; }
.village-agenda-area .village-agenda { width: 1200px; margin: 0 auto; }
.village-agenda-area .village-agenda .area-title-area { color: #fff; }
.village-agenda-area .village-agenda .agenda-type-select { text-align: center; }
.village-agenda-area .village-agenda .agenda-type-select button { height: 38px; border: none; background: transparent; border-radius: 6px; line-height: 36px; padding: 0 20px; color: #fff; font-size: 1.5rem; display: inline-block; transition: background .25s ease, opacity .25s ease; opacity: .5; }
.village-agenda-area .village-agenda .agenda-type-select button.select,
.village-agenda-area .village-agenda .agenda-type-select button:hover { background: #4b63fc; opacity: 1; }
.village-agenda-area .village-agenda .agenda-slide { margin-top: 20px; height: 250px; }

.agenda-slide .slick-list { height: 100%; overflow: visible; }
.agenda-slide .slick-list .slick-track { height: 100%; }
.agenda-card { position: relative; background: #fff; height: 100%; width: calc(33.33% - 20px); box-shadow: 0 15px 25px 0px rgba(1, 55, 133, 0.25); margin: 0 15px; display: block; border-radius: 16px; padding: 35px 40px; outline: 0; opacity: .2; transition: opacity .25s ease; }
.agenda-card.slick-active { opacity: 1; }
.agenda-card .title-area .agenda-label { display: block; margin-bottom: 15px; }
.agenda-card .title-area .agenda-label span { display: inline-block; height: 20px; border-radius: 10px; padding: 0 15px; text-align: center; font-size: 1.1rem; line-height: 20px; margin-right: 3px; }
.agenda-card .title-area .agenda-label span.green { background: #baed8c; color: #467819; }
.agenda-card .title-area .agenda-label span.status { background: #0475f4; color: #fff; }
.agenda-card .title-area .title h3 { font-size: 2.1rem; font-weight: bold; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 52px; margin-bottom: 8px; line-height: 26px; }
.agenda-card .content-area .content { font-size: 1.4rem; font-weight: 300; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 56px; line-height: 18px; }
.agenda-card .user { position: absolute; z-index: 1; bottom: 30px; height: 25px; width: calc(100% - 80px); left: 40px; line-height: 25px; }
.agenda-card .user img { display: inline-block; }
.agenda-card .user .sympathy { float: left; color: #005fea; }
.agenda-card .user .sympathy img { width: 24px; height: 24px }
.agenda-card .user .comment { float: right; }
.agenda-card .user .comment img { width: 24px; height: 24px; }
.agenda-slide .slick-arrow { width: 50px; height: 50px; color: transparent; font-size: 0; border: none; border-radius: 50%; position: absolute; z-index: 2; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.1); opacity: .7; transition: opacity .25s ease, box-shadow .25s ease; }
.agenda-slide .slick-arrow:hover { opacity: 1; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2); }
.agenda-slide .slick-arrow.slick-prev { background: url(../../img/common/navi_arrow_pre.svg) no-repeat; background-size: 28px; background-position: center; background-color: #fff; left: -95px; top: 50%; margin-top: -25px; }
.agenda-slide .slick-arrow.slick-next { background: url(../../img/common/navi_arrow_next.svg) no-repeat; background-size: 28px; background-position: center; background-color: #fff; right: -95px; top: 50%; margin-top: -25px; }

.village-agenda-area .village-agenda .detail-view-btn { font-size: 1.4rem; color: #fff; margin: 40px auto 0; display: block; width: 145px; border: 1px solid rgba(255, 255, 255, 0.3); height: 45px; line-height: 43px; text-align: center; border-radius: 30px; }
.village-agenda-area .village-agenda .detail-view-btn img { width: 18px; height: 18px; margin: 12px 0 0 5px; }

@media all and (max-width: 1420px)
{
    .agenda-slide .slick-arrow.slick-prev { left: 0; }
    .agenda-slide .slick-arrow.slick-next { right: 0; }
}

@media all and (max-width: 1200px)
{
    .village-agenda-area .village-agenda { width: 100%; padding: 0 10px; }
}
@media all and (max-width: 960px)
{
    .agenda-card { padding: 25px; }
    .agenda-card .user { width: calc(100% - 50px); left: 25px; }
}
@media all and (max-width: 600px)
{
    .village-agenda-area .village-agenda .agenda-type-select button { font-size: 1.4rem; }
    .agenda-card .title-area .title h3 { font-size: 1.9rem; max-height: 42px; line-height: 21px; }
}
/* 알림마당, 공모사업 */
.board-wrap-area { padding: 60px 0; }
.board-wrap-area .area-title-area h2 { float: left; }
.board-wrap-area .area-title-area .more-view-btn { float: right; font-size: 1.5rem; color: #666; line-height: 30px; margin-top: 5px; }
.board-wrap-area .area-title-area .more-view-btn img { width: 16px; height: 16px; opacity: .7; margin: 7px 0 0 3px; }

.board-wrap-area .board-wrap { width: 1200px; margin: 0 auto; }
.board-wrap-area .board-wrap .board { width: 50%; float: left; }
.board-wrap-area .board-wrap .board:nth-child(1) { padding-right: 15px; }
.board-wrap-area .board-wrap .board:nth-child(2) { padding-left: 15px; }

.board-wrap .list .body .row .td.title { width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }
.board-wrap .list .body .row .td.title a { font-size: 1.7rem; }
.board-wrap .list .body .row .td.date { width: 50px; color: #999; }

@media all and (max-width: 1200px)
{
    .board-wrap-area .board-wrap { width: 100%; padding: 0 10px; }
}
@media all and (max-width: 960px)
{
    .board-wrap-area .board-wrap .area-title-area { margin-bottom: 20px; }
    .board-wrap-area .board-wrap .board { width: 100%; float: none; }
    .board-wrap-area .board-wrap .board:nth-child(1) { padding-right: 0; margin-bottom: 50px; }
    .board-wrap-area .board-wrap .board:nth-child(2) { padding-left: 0; }
}
@media all and (max-width: 600px)
{
    .board-wrap .list .body .row { padding: 13px 0; }
    .board-wrap .list .body .row .td.title { margin-bottom: 0; }
    .board-wrap .list .body .row .td.title a { font-size: 1.5rem; }
}

/* 설문조사 */
.survey-list-area { height: 130px; }
.survey-list-area .survey-wrap { height: 100%; width: 100%; display: block; outline: 0; }
.survey-list-area .survey-wrap:nth-child(2n-1) { background: #b7d7fb; }
.survey-list-area .survey-wrap:nth-child(2n) { background: #95f3e1; }
.survey-list-area .survey-wrap .survey { height: 100%; width: 1200px; margin: 0 auto; text-align: center; padding: 35px 0; position: relative; overflow: hidden; background: url(../../img/main/survey_bg_01.svg) no-repeat; background-size: 230px 259px; background-position: 0 -30px; position: relative; }
.survey-list-area .survey-wrap .survey .survey-title { font-size: 2.1rem; }
.survey-list-area .survey-wrap .survey .date-range { margin-top: 10px; }
.survey-list-area .survey-wrap .survey .date-range .head { color: #fff; font-size: 1.4rem; display: inline-block; height: 25px; line-height: 25px; padding: 0 15px; border-radius: 15px; }
.survey-list-area .survey-wrap:nth-child(2n-1) .survey .survey-title { color: #0e2175; }
.survey-list-area .survey-wrap:nth-child(2n) .survey .survey-title { color: #005243; }
.survey-list-area .survey-wrap .survey .date-range .date { font-size: 1.4rem; margin-left: 10px; line-height: 25px; }
.survey-list-area .survey-wrap:nth-child(2n-1) .survey .date-range .head { background: #0e2175; }
.survey-list-area .survey-wrap:nth-child(2n) .survey .date-range .head { background: #005243; }

.survey-list-area .slick-arrow { width: 40px; height: 40px; color: transparent; font-size: 0; border: none; border-radius: 50%; position: absolute; z-index: 2; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.1); opacity: .7; transition: opacity .25s ease, box-shadow .25s ease; }
.survey-list-area .slick-arrow:hover { opacity: 1; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2); }
.survey-list-area .slick-arrow.slick-prev { background: url(../../img/common/navi_arrow_pre.svg) no-repeat; background-size: 28px; background-position: center; background-color: #fff; left: 50%; margin-left: -600px; top: 50%; margin-top: -20px; }
.survey-list-area .slick-arrow.slick-next { background: url(../../img/common/navi_arrow_next.svg) no-repeat; background-size: 28px; background-position: center; background-color: #fff; right: 50%; margin-right: -600px; top: 50%; margin-top: -20px; }

@media all and (max-width: 1200px)
{
    .survey-list-area .survey-wrap .survey { width: 100%; padding: 35px 10px; }
    .survey-list-area .slick-arrow.slick-prev { left: 10px; margin-left: 0; }
    .survey-list-area .slick-arrow.slick-next { right: 10px; margin-right: 0; }
}
@media all and (max-width: 960px)
{
	.survey-list-area .survey-wrap .survey { background: none; }
}