@charset "UTF-8";
@import url('../../../css/common.css');
@import url("../../../css/board.css");

/*-------------------------------------------------
title       : 갤러리
Author      : 플랜아이 광주
Create date : 2020-03-09
-------------------------------------------------*/

/* 동영상 게시판 */
.gallery_list { overflow: hidden; width: calc(100% + 5rem); margin-bottom: -1px; }
.gallery_list li { float: left; width: 33.333%; padding: 4rem 5rem 4rem 0; border-bottom: 1px solid #ddd; }
.gallery_list li:nth-child(3n+1) { clear: both; }

.gallery_list.type1 li { width: 25%; }
.gallery_list.type1 li:nth-child(3n+1) { clear: none; }
.gallery_list.type1 li:nth-child(4n+1) { clear: both; }

.gallery_list a { display: block; }
.gallery_list a:hover .thumb::before,
.gallery_list a:hover .thumb::after,
.gallery_list a:focus .thumb::before,
.gallery_list a:focus .thumb::after { opacity: 1; transform: rotate(0); transition: all 0.4s 0.1s; }
.gallery_list a:hover .thumb img,
.gallery_list a:focus .thumb img { opacity: 0.6; }

.gallery_list .thumb { display: block; overflow: hidden; position: relative; z-index: 0; height: 0; margin-bottom: 2rem; padding-top: 56.25%; background-color: #000; color: #fff; }
.gallery_list .thumb img { position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; min-height: 100%; transform: translateY(-50%); transition: all 0.2s; }
.gallery_list .thumb::before { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -1rem; font-family: 'xeicon'; font-size: 3.2rem; content: ''; text-align: center; line-height: 0; opacity: 0; transform: rotate(180deg); transition: all 0.2s; }
.gallery_list .thumb::after { position: absolute; left: 0; top: 50%; width: 100%; margin-top: 1rem; font-weight: 600; content: 'View Detail'; text-align: center; opacity: 0; transition: all 0.2s; }

.gallery_list .title { display: inline-block; overflow: hidden; max-width: 100%; font-size: 1.8rem; color: #222; text-overflow: ellipsis; white-space: nowrap; }
.gallery_list .title .xi-new { margin-top: 0.3rem; }
.gallery_list .label { font-weight: 400; color: #000; }

.gallery_list .desc { white-space: nowrap; }
.gallery_list .desc > span + span::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.4rem; margin: 0 1rem 0 0.75rem; background-color: #ddd; content: ''; vertical-align: middle; }
.gallery_list .desc > span { display: inline-block; vertical-align: middle; }
.gallery_list .desc .name { display: none; }
.gallery_list .desc .name + span::before { display: none; }
.gallery_list .desc p {border-bottom: 1px solid #AAA;margin-top: 1rem;}
.gallery_list .desc p em {display: inline-block;font-size: 1.4rem;border-left: 1px solid #AAA;color: #555;line-height: 3.5rem;font-weight: 500;padding:0 1.2rem}
.gallery_list .desc p em:first-child {padding-left:0;border-left:0;color:#2fd37e;}
.gallery_list .desc .title {margin: 1.7rem 0 .7rem;word-break: keep-all;white-space:initial;font-weight: 700;font-size: 2rem;color: #111;height: 6.3rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

/* 갤러리 내용 */
.gallery_view { margin-bottom: 2rem; }
.gallery_view .list { margin-top: 1rem; text-align: center; }
.gallery_view .list img { display: inline-block; max-width: 100%; min-height: 100%; }
.gallery_view .thumb { position: relative; padding: 0 5rem; }
.gallery_view .thumb li { padding-right: 1rem; }
.gallery_view .thumb li a { display: block; overflow: hidden; position: relative; height: 8rem; border: 2px solid #fff; background-color: #000; transition: all 0.2s; }
.gallery_view .thumb li a img { opacity: 0.7; transition: all 0.2s; }
.gallery_view .thumb .active a { border-color: #555; }
.gallery_view .thumb .active a img { opacity: 1; }
.gallery_view .thumb img { transition: all 0.2s; }
.gallery_view .thumb .bx-wrapper .bx-controls-direction a { left: -5rem; }
.gallery_view .thumb .bx-wrapper .bx-controls-direction a.bx-next { left: auto; right: -5rem; }


.gallery_list.newsletter {width: calc(100% + 4rem);}
.gallery_list.newsletter li {border: 0;width: calc(25% - 0px);padding: 4rem 4rem 3rem 0;}
.gallery_list.newsletter li .thumb {padding-top: 15.7rem;margin-bottom: 1.5rem;}
.gallery_list.newsletter li .thumb img {top: 50%;left: 50%;transform: translate(-50%, -50%);}
.gallery_list.newsletter .desc .title {margin: 0;font-size: 2.2rem;height: 3.4rem;-webkit-line-clamp: 1;}
.gallery_list.newsletter .desc .date {margin-bottom: 1.8rem;}
.gallery_list.newsletter .desc .date i, .gallery_list.newsletter a.btn_line i {color: #AAA;display: inline-block;margin-right: .4rem;font-size: 1.8rem;vertical-align: -4px;}
.gallery_list.newsletter a.btn_line {height: 5rem;line-height: 5rem;font-size: 1.5rem;font-weight: 500;}
.gallery_list.newsletter a.btn_line i {color: #8F8F8F;}


/* 동영상 내용 */
.video .desc { overflow: hidden; overflow-y: auto; max-height: 30rem; margin-top: 2rem; padding: 2rem 2.5rem 0; border: 1px solid #ddd; background-color: #f8f9fa; }
.video .desc::after { display: block; height: 2rem; content: ''; }
.video .youtube { position: relative; height: 0; padding-top: 55%; }
.video .youtube iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.video .txt_center {margin-top: 2rem;}

/* 웹진형 게시판 */
.blog_list { margin-bottom: -1px; }
.blog_list a { display: block; overflow: hidden; padding: 3rem 0; border-bottom: 1px solid #ddd; position: relative;}
.blog_list a:hover .thumb::before,
.blog_list a:hover .thumb::after,
.blog_list a:focus .thumb::before,
.blog_list a:focus .thumb::after { opacity: 1; transform: rotate(0); transition: all 0.4s 0.1s; }
.blog_list a:hover .thumb img,
.blog_list a:focus .thumb img { opacity: 0.6; }

.blog_list .thumb { overflow: hidden; float: left; position: relative; z-index: 0; width: 19.2rem; height: 0;padding-top: 13rem;}
.blog_list .thumb img { min-width: 100%; min-height: 100%; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.blog_list .thumb::before { position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; margin-top: -1rem; font-family: 'remixicon'; font-size: 3.2rem; content: '\ea13'; text-align: center; line-height: 0; opacity: 0; transform: rotate(180deg); transition: all 0.2s; }
.blog_list .thumb::after { position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; margin-top: 1rem; font-weight: 600; content: 'View Detail'; text-align: center; opacity: 0; transition: all 0.2s; }

.blog_list .title {max-height: 6.5rem;width: 90%; overflow: hidden; margin-bottom: 2rem; font-size: 2.2rem; font-weight: 700; color: #111; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: initial;word-break: keep-all;}
.blog_list .label { font-weight: 400; color: #000; }
.blog_list .txt { display: block;color: #2fd37e;font-size: 1.6rem;font-weight: 800; overflow: hidden; }
.blog_list .txt.cont {color: #555;font-weight: normal;line-height: 2.5rem;overflow: hidden;text-overflow: ellipsis;max-height: 7.5rem;margin-bottom: 2rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}

.blog_list .desc { float: right; width: calc(100% - 24.2rem); padding: 1rem 0; }
.blog_list .desc > span + span::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.4rem; margin: 0 1rem 0 0.75rem; background-color: #ddd; content: ''; vertical-align: middle; }
.blog_list .desc > span {color: #555;font-weight: 500;font-size: 1.5rem;}
.blog_list .desc > span i {vertical-align: -3px;margin-right: .6rem;display: inline-block;}
.blog_list .desc .name {color: #2fd37e;font-weight: 600;}
/* .blog_list .desc .name + span::before { display: none; } */

.blog_list .more {position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);color: #000;font-weight: 800;font-size: 1.4rem;transition: .2s;}
.blog_list .more i {vertical-align: -3px;margin-right: .6rem;display: inline-block;}
.blog_list .more:hover, .blog_list .more:focus {color: #2fd37e;}

.hash_tag .spanKwd {
	display: inline-block;
	margin: 0 0.2rem 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 1.6rem;
    color: #555;
    line-height: 1.2;
    font-size: 1.5rem;
}

@media ( max-width: 1200px ) {
	.gallery_list.newsletter li { width: 33.333% !important;}
	.gallery_list.newsletter li:nth-child(4n+1) { clear: none !important; }
	.gallery_list.newsletter li:nth-child(3n+1) { clear: none !important; }
}

@media ( max-width: 1024px )
{
	/* 동영상 게시판 */
	.gallery_list li { width: 33.333% !important;  padding: 2rem 2rem 2rem 0; }
	.gallery_list li:nth-child(4n+1) { clear: none !important; }
	.gallery_list li:nth-child(3n+1) { clear: none !important; }

	.blog_list .title {width: 80%;}
}

@media ( max-width: 800px ) {
	.gallery_list li { width: 50% !important; padding: 4rem 3rem 4rem 0; }
	.blog_list .desc {width: calc(100% - 22rem);}
}

@media ( max-width: 700px ) {
	.gallery_list.newsletter {width: calc(100% + 2rem);}
	.gallery_list.newsletter li {padding: 2rem 2rem 1rem 0;}
}

@media ( max-width: 580px )
{
	/* 동영상 게시판 */
	.gallery_list { width: calc(100% + 2rem); }
	.gallery_list li { width: 50% !important;}
	.gallery_list li:nth-child(3n+1) { clear: none !important; }
	.gallery_list li:nth-child(2n+1) { clear: none !important; }
	.gallery_list .desc .title {font-size: 1.8rem;margin: 1rem 0 0.7rem;height: 6rem;}
	.gallery_list .desc p em {padding: 0 1rem;}
	.hash_tag a.spanKwd {padding: .4rem .8rem;}
	
	/* 웹진형 게시판 */
	.blog_list a { padding: 2rem 0; }
	.blog_list .txt { margin-bottom: 2rem; }
	.blog_list .title { margin-bottom: 0.5rem; }
	.blog_list .desc { width: calc(100% - 22rem); padding: 0.5rem 0; }
	.blog_list .more {top: 4rem;}
}

@media ( max-width: 500px ) {
	.gallery_list li {padding: 2rem 2rem 2rem 0;}
	.gallery_list.newsletter li {width: 50% !important;}

		/* 웹진형 게시판 */
		.blog_list .thumb { display: block; float: none; width: 100%;}
		.blog_list .desc { float: none; width: 100%; padding: 2rem 0 0; }
		.blog_list .txt {margin-bottom: 1rem;}
		.blog_list .title {width: 100%;}
		.blog_list .more {display: none;} 
}

@media ( max-width: 400px )
{
	/* 동영상 게시판 */
	.gallery_list .desc span { display: block; }
	.gallery_list .desc span::before { display: none !important; }
	.gallery_list .desc p em {font-size: 1.2rem;line-height: 3rem;}
	

}