@charset "UTF-8";


/* 동영상 게시판 */
.gallery_list {display: flex; display: -webkit-flex; flex-flow: row wrap; width: calc(100% + 2.95rem); margin-bottom: -1px; overflow: hidden;}
.gallery_list > li {width: 33.333%; padding: 4rem 2.95rem 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; height: 0; margin-bottom: 2rem; padding-top: 60%; background-color: #000; color: #fff; }
.gallery_list .thumb img {position: absolute;  top: 50%; left: 0;  width: 100%; min-height: 100%;transform: translateY(-50%); transition: all 0.2s; }
.gallery_list .thumb::before,
.gallery_list .thumb::after {position: absolute; top: 50%; left: 0; width: 100%; margin-top: -1rem; text-align: center; line-height: 0; opacity: 0; transform: rotate(180deg); transition: all 0.2s; font-size: 3.2rem; font-family: 'xeicon'; content:""; z-index: 1; }
.gallery_list .thumb::after {margin-top: 1rem; font-weight: 600; content: ' '; }

.gallery_list .title { display: block; overflow: hidden; max-width: 100%; font-size: 1.5rem; font-weight:400; letter-spacing:-0.06em; color: #222; text-overflow: ellipsis; white-space: nowrap; }
.gallery_list .title .xi-new { margin-top: 0.3rem; }
.gallery_list .label { font-weight: 200; 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; color: #666; vertical-align: middle; }
.gallery_list .desc .name { display: none; }
.gallery_list .desc .name + span::before { display: none; }

/* 갤러리 내용 */
.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; }

/* 행사 */
.video_list {
	width: calc(100% + 4rem);
	}
.gallery_list.video_list > li {
	width: 50% !important;
	padding-right: 4rem;
	}
.video_list a {
	position: relative;
    text-decoration: none;
	}	
.video_list .thumb {
    margin-bottom: 1.8rem;
    padding-top: 53.4%;
	}
.video_list .fix {
	position: absolute;
	top: 2rem;
	right: 2rem;
    z-index: 55;
	}
.video_list .fix > span {
	display: inline-block;
	padding: 0.7rem 1.3rem;
	background-color: #fff;
	color: #333;
    line-height: 1.3;
	font-size: 1.4rem;
	font-weight: 500;
	}
.video_list .fix > span.d_day {
	background-color: #F9571E;
	color: #fff;
	font-size: 1.5rem;
	}	
.video_list .category {
	display: block;
    margin-bottom: 2rem;
	overflow: hidden;
	}
.video_list .category > span {
	display: inline-block;
	padding: 0.4rem 1.2rem;
	border: 1px solid #ddd;
	border-radius: 1.6rem;
	font-size: 1.5rem;
	}
.video_list .category > span:first-child {
	background-color: #1B358E;
	color: #fff;
	font-weight: 500;
	}
.video_list .basic_info {
	margin-top: 0.8rem;
	font-size: 1.6rem;
    font-weight: 200;
	overflow: hidden;
	}
.video_list .basic_info > li {
	overflow: hidden;
	}	
.video_list .basic_info .tit {
	position: relative;
	display: block;
	float: left;
	width: 4.7rem;
	margin-right: 1.5rem;
	color: #000;
	font-weight: 200;
	}
.video_list .basic_info .tit::after {
	position: absolute;
	top: 0.6rem;
	right: 0;
	width: 1px;
	height: 1.5rem;
	background-color: #ddd;
	content: '';
	}
.video_list .basic_info .txt {
	display: block;
	position: relative;
	color: #666;
	overflow: hidden;
	} 	
	
/* 동영상 내용 */
.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: 45%; }
.video .youtube iframe { position: absolute; top: 0; left: 50%; width:  80%; height: 100%; transform: translateX(-50%);}
.video .txt_center {margin-top: 2rem;}

/* 웹진형 게시판 */
.blog_list { margin-bottom: -1px; }
.blog_list > li {overflow: hidden;}
.blog_list a { display: block; overflow: hidden; padding: 4rem 0; border-bottom: 1px solid #ddd; }
.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: 30rem; height: 19rem; background-color: #000; color: #fff; }
.blog_list .thumb img { min-width: 100%; min-height: 100%; }
.blog_list .thumb::before { position: absolute; left: 0; top: 50%; z-index: 1; 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; }
.blog_list .thumb::after { position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; margin-top: 1rem; font-weight: 600; content: ' '; text-align: center; opacity: 0; transition: all 0.2s; }

.blog_list .title { display: block; overflow: hidden; margin-bottom: 1rem; font-size: 1.8rem; font-weight: 600; color: #222; text-overflow: ellipsis; white-space: nowrap; }
.blog_list .label { font-weight: 400; color: #000; }
.blog_list .txt { display: block; overflow: hidden; height: 5.2rem; margin-bottom: 3rem; color: #666; }

.blog_list .desc { float: right; width: calc(100% - 35rem); padding: 2.5rem 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 { display: inline-block; vertical-align: middle; }
.blog_list .desc .name { display: none; }
.blog_list .desc .name + span::before { display: none; }

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

@media ( max-width: 580px ) {
	/* 동영상 게시판 */
	.gallery_list { width: calc(100% + 2rem); }
	.gallery_list > li { width: 100% !important;/*  padding: 2rem 2rem 2rem 0; */ }
	.gallery_list > li:nth-child(3n+1) { clear: none !important; }
	.gallery_list > li:nth-child(2n+1) { clear: both !important; }
	
	/* 웹진형 게시판 */
	.blog_list a { padding: 2rem 0; }
	.blog_list .thumb { width: 20rem; height: 14rem; }
	.blog_list .txt { margin-bottom: 2rem; }
	.blog_list .title { margin-bottom: 0.5rem; }
	.blog_list .desc { width: calc(100% - 22rem); padding: 0.5rem 0; }
	.gallery_list.video_list > li {width: 100% !important; padding-left: 2rem;}
}

@media ( max-width: 400px ){
	/* 동영상 게시판 */
	.gallery_list .desc span { display: block; }
	.gallery_list .desc span::before { display: none !important; }
	
	/* 웹진형 게시판 */
	.blog_list .thumb { display: block; float: none; width: 100%; height: auto; }
	.blog_list .desc { float: none; width: 100%; padding: 1.5rem 0 0; }
}