@charset "utf-8";

.fab.fa-youtube { position: relative; top: 2px; color: #d90000; }
.fas.fa-external-link-alt { position: relative; top: 1px; color: #616fa7; }
table.vertic-table tbody tr td a.link { color: #1f5eb3; }
table.vertic-table tbody tr td a.link:hover { text-decoration: underline; }

.content-area.intro-area .btn-wrap { float: right; }
.content-area.intro-area .cont-title { clear: both; margin-bottom: 20px;}
.content-area .name { margin: 10px 0 20px; float: left; font-size: 2.5rem; width: -webkit-calc(100% - 400px); width: calc(100% - 400px); }
.content-area .img-area { position: relative; width: 380px; height: 304px; float: left; border: 1px solid #dee3eb; margin-right: 20px; overflow: hidden; }
.content-area .img-area img { max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); padding: 5px;}
.content-area table.vertic-table { margin-top: 0; border-top: 1px solid #333; }
.content-area table.vertic-table.detail-table { float: left; width: -webkit-calc(100% - 400px); width: calc(100% - 400px); }
.content-area table.vertic-table tbody tr th { height: 40px; font-weight: 500; }
/* 목록 */
.content-area .list-area .box { position: relative; float: left; margin-right: 30px; margin-top: 40px; width: -webkit-calc(33% - 16px); width: calc(33% - 16px); }
.content-area .list-area .box:nth-child(-n+3) { margin-top: 0; }
.content-area .list-area .box:nth-child(3n) { margin-right: 0; }
.content-area .list-area .box .community-name { padding-right: 130px; float: none; position: relative; margin: 15px 0; font-size: 1.5rem; }
.content-area .list-area .box .community-name h3 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.content-area .list-area .box .community-name .btn-wrap { position: absolute; top: -2px; right: 0; margin: 0; }
.content-area .list-area .box .community-name .btn-wrap button { height: 27px; font-size: 1.2rem; line-height: 25px; }
.content-area .list-area .box .img-area { float: none; margin: 0; width: 100%; height: 200px; cursor: pointer; overflow: hidden; }
.content-area .list-area .box .img-area img { width: 100%; -webkit-transform: translate(-50%,-50%) scale(1.05); -ms-transform: translate(-50%,-50%) scale(1.05); -o-transform: translate(-50%,-50%) scale(1.05); transform: translate(-50%,-50%) scale(1.05); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: -o-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s, -o-transform .3s; }
.content-area .list-area .box .img-area:hover img { -webkit-transform: translate(-50%,-50%) scale(1.1); -ms-transform: translate(-50%,-50%) scale(1.1); -o-transform: translate(-50%,-50%) scale(1.1); transform: translate(-50%,-50%) scale(1.1); }
.content-area .list-area .box table.vertic-table { float: none;  width: 100%; table-layout: fixed; }
.content-area .list-area .box table.vertic-table tbody tr th { width: 80px; }
.content-area .list-area .box table.vertic-table tbody tr td { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 7px; }

.content-area .list-area .box .img-area.default-img-area { position: relative;
	background: #a9d6ff; 
	background: -webkit-linear-gradient(top, #7fb1ed 0%,#53b4ed 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#7fb1ed ),to(#53b4ed));
	background: -o-linear-gradient(top, #7fb1ed 0%,#53b4ed 100%);
	background: linear-gradient(to bottom, #7fb1ed 0%,#53b4ed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f74de', endColorstr='#5a42ec',GradientType=0 );
}
.content-area .list-area .box .img-area.default-img-area:before { content: ''; position: absolute; top:0; left: 0; width: 150px; height: 130px; background-image: url(../../../img/sub/jumin/item01.png); background-repeat: no-repeat; background-size: 100%;}
.content-area .list-area .box .img-area.default-img-area:after { content: ''; position: absolute; bottom:0; right: 0; width: 150px; height: 130px; background-image: url(../../../img/sub/jumin/item01.png); background-repeat: no-repeat; background-size: 100%; transform: rotate(180deg); }
.content-area .list-area .box .img-area.default-img-area > p { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 2rem; font-weight: 600; width: 90%; text-align: center; }

.search-wrap-01.search-wrap .select-box-01 select { border-radius: 5px; }
.search-wrap-02.search-wrap { margin-bottom: 10px; }
.search-wrap-02.search-wrap .result-area { margin-top: 15px; }

@media all and (max-width: 1200px) {
	.content-area .list-area .box { width: -webkit-calc(33% - 11px); width: calc(33% - 11px); margin-right: 20px; }
	.content-area .list-area .box table.vertic-table tbody tr th { width: 60px;  }
}
@media all and (max-width: 1024px) {
	.content-area .list-area .box { width: -webkit-calc(50% - 18px); width: calc(50% - 18px); margin-top: 20px; margin-right: 20px;}
	.content-area .list-area .box:nth-child(-n+3) { margin-top: 20px; margin-right: 20px; }
	.content-area .list-area .box:nth-child(2n) { margin-right: 0; }
}
@media all and (max-width: 800px) {
	.search-wrap .search-area { float: right; }
}
@media all and (max-width: 768px) {
	.content-area .img-area { width: 200px; height: 200px; }
	.content-area table.vertic-table.detail-table { width: -webkit-calc(100% - 220px); width: calc(100% - 220px); }
	.content-area table.vertic-table tbody tr th { height: 35px; }
}
@media all and (max-width: 600px) {
	.content-area .img-area { width: 100%; margin: 0; }
	.content-area .img-area img { padding: 10px;}
	.content-area table.vertic-table tbody tr th { width: 90px; }
	.content-area table.vertic-table.detail-table { width: 100%; float: none;}
	.content-area .name { margin: 40px 0 20px; width: 100%; text-align: center; font-size: 2.2rem; }
	.content-area .list-area .box .name { text-align: left; }
	input[type="text"].text-input.m-width { width: 100%; }
	table.apply-table input[type="text"].m-width,
	table.apply-table input[type="text"].calendar-input { width: 100%; }
	table.apply-table .file-input { width: 100%; }

	.content-area.list-cont-area .search-wrap .search-area { float: none; }
	.content-area.list-cont-area .search-wrap-01.search-wrap .select-box-01 { float: none; display: block; position: relative; top: 95px; }
	.content-area.list-cont-area .search-wrap-02.search-wrap { margin-bottom: 20px; }
	.content-area.list-cont-area .search-wrap-02.search-wrap .result-area { position: relative; top: 35px; }

	.content-area .list-area .box { margin-bottom: 40px; width: 100%; margin-right: 0; }
}
@media all and (max-width: 425px) {
	.content-area.list-cont-area .search-wrap-02.search-wrap { position: relative; margin-bottom: 45px;}
	.content-area.list-cont-area .search-wrap-02.search-wrap .btn-wrap { position: absolute; top: 0; right: 0; margin: 0; }
	.content-area.list-cont-area .search-wrap-02.search-wrap .result-area { float: none; width: 100%; top: 55px; }
}

@media(max-width:500px) {
	.btn-wrap.news-write .btn-right {display:inline-block; float:none;}
	.btn-wrap.news-write .btn-right button {min-width:75px;}
}

/* 마을공동체 소개 detail 추가 */
.content-info-wrap {padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid #dee3eb}
.btn-wrap.intro-detail-btn {width:100%;margin-bottom:20px }

/* intro-banner */
.intro-banner { margin-bottom: 30px; }

/* 마을공동체 운영자 회원가입 버튼 */
.btn-wrap.join-btn-wrap { margin: 0 0 20px; }
.btn-wrap.join-btn-wrap button i { margin-right: 3px; font-size: 1.2rem; top: -1px; position: relative; }