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

/*-------------------------------------------------
title       : 갤러리
Author      : 
Create date :2021-06-30
-------------------------------------------------*/

/* 앨범2 게시판 */
.gallery_list2 {display:flex; flex-wrap:wrap; width:calc(100% + 3rem)}
.gallery_list2 > * {border-bottom:1px solid #ddd; width:calc(25% - 3rem); margin-bottom:-1px; margin-right:3rem; padding:3rem 0; position:relative}
.gallery_list2 .cate {position:absolute; top:3rem; left:0; width:6rem; height:6rem; display:flex; align-items:center; justify-content:center; background-color:#000; color:#fff; font-size:1.4rem; line-height:1.2; padding:1rem 0.5rem; text-align:center; z-index:1; word-break:keep-all}
.gallery_list2 .C01 {background-color:#00b1ec}
.gallery_list2 .C02 {background-color:#001b57}
.gallery_list2 .C03 {background-color:#ffa74e}
.gallery_list2 .C04 {background-color:#e36b17}
.gallery_list2 .thumb { display: block; overflow: hidden; position: relative; z-index: 0; height: 0; margin-bottom: 1.5rem; padding-top: 62%; background-color:rgba(0,0,0,0); border:1px solid #ddd; border-radius:0.5rem; color: #fff; transition:all .3s}
.gallery_list2 .thumb img { position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; min-height: 100%; transform: translateY(-50%); transition: all 0.2s; }
.gallery_list2 .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_list2 .thumb::after { position: absolute; left: 0; top: 50%; width: 100%; margin-top: 1rem; font-weight: 600; content: '자세히 보기'; text-align: center; opacity: 0; transition: all 0.2s; }
.gallery_list2 .title {color:#222; display:block; font-size:1.6rem; font-weight:500; line-height:1.4; min-height:5rem; word-break:keep-all}
.gallery_list2 .date {color:#666; display:block; font-size:1.5rem; margin-top:0.5rem}
.gallery_list2 .date {color:#999; font-weight:normal; margin-right:1rem}
.gallery_list2 .hit {color:#666; display:block; font-size:1.5rem; margin-top:0.5rem}
.gallery_list2 .hit {color:#999; font-weight:normal; margin-right:1rem}
.gallery_list2 .btn {display:flex; justify-content:space-between; margin-top:2rem}
.gallery_list2 .btn span {display:block; position:relative; width:49%; height:4rem}
.gallery_list2 .btn a {align-items:center; display:flex; font-size:1.4rem; width:100%; height:100%; padding:1rem 1.5rem 0.5rem; text-align:left}
.gallery_list2 .btn a i {position:absolute; top:50%; right:1.5rem; transform:translateY(-50%)}

/* 동영상 게시판 */
.gallery_list {display:flex; flex-wrap:wrap; overflow: hidden; width: calc(100% + 4rem); margin-bottom: -1px; }
.gallery_list li {width: 33.333%; padding: 4rem 4rem 4rem 0; border-bottom: 1px solid #ddd; }

.gallery_list.type1 li { width: 25%; }

.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 {background-color:rgba(0,0,0,1); }
.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: 1.5rem; padding-top: 62%; background-color:rgba(0,0,0,0); border:1px solid #ddd; border-radius:0.5rem; color: #fff; transition:all .3s}
.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: '자세히 보기'; text-align: center; opacity: 0; transition: all 0.2s; }

.gallery_list .title { display: block; overflow: hidden; max-width: 100%; font-size: 1.6rem; font-weight:normal; color: #222; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all;}
.gallery_list .title .xi-new { margin-top: 0.3rem; }
.gallery_list .label { font-weight:normal; color: #999; }
.gallery_list .desc > span:after {content:''; background-color:#ccc; border-radius:100rem; width:.4rem; height:.4rem; display:inline-block; vertical-align:4px; margin:0 .6rem 0 .8rem}
.gallery_list .desc > span:last-child:after {display:none}
.gallery_list .desc > span { display:inline-block; font-size:1.4rem; 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 .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 .txt_center {margin-top: 2rem;}

/* 웹진형 게시판 */
.blog_list { margin-bottom: -1px; }
.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; }

.board_view .table td {text-align:left}

@media (max-width:1320px){
	/* 이북형 */
	.gallery_list2 > * {width:calc(33.333% - 3rem)}
}

@media ( max-width: 1024px )
{
	/* 동영상 게시판 */
	.gallery_list li { width: 33.333% !important; }
	
	/* 웹진형 게시판 */
	.blog_list .txt {height:7.5rem}
}


@media ( max-width:767px )
{
	
	/* gallery_list2 */
	.gallery_list2 {width:calc(100% + 2rem)}
	.gallery_list2 > * {width:calc(50% - 2rem); margin-right:2rem}
	.gallery_list2 .btn a {padding:0 1rem}	
	.gallery_list2 .btn a i {right:1rem}
	
	.gallery_list .desc > span { display:none; vertical-align: middle; }
	.gallery_list .title {text-overflow:inherit; white-space:normal}
	
	/* 동영상 게시판 */
	.gallery_list { width: calc(100% + 2rem); }
	.gallery_list li { width: 50% !important; padding: 2rem 2rem 2rem 0; }
	
	/* 웹진형 게시판 */
	.blog_list a { padding: 2rem 0; }
	.blog_list .thumb { width: 20rem; height: 14rem; }
	.blog_list .txt { margin-bottom: 2rem; height:6.5rem}
	.blog_list .title { margin-bottom: 0.5rem; }
	.blog_list .desc { width: calc(100% - 22rem); padding: 0.5rem 0; }
}

@media ( max-width: 400px )
{
	/* 동영상 게시판 */
	.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; }
}