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

/*-------------------------------------------------
title       : 갤러리
Create date : 2022-05-26
-------------------------------------------------*/

.gallery_list {display:flex; flex-wrap:wrap; overflow: hidden; width: calc(100% + 3rem); margin-bottom: -1px; }
.gallery_list li {width:33.333%; padding:3rem 3rem 3rem 0; border-bottom: 1px solid #ddd; }

.gallery_list a { display: block; }
.gallery_list a:hover .thumb {background-color:#000}
.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 {transform:scale(1.1); opacity: 0.6; }

.gallery_list .thumb {border:1px solid #eee; display: block; overflow: hidden; position: relative; z-index: 0; height: 0; margin-bottom: 2rem; padding-top:100%; color: #fff; }
.gallery_list .thumb img { position: absolute; left: 0; top:0; z-index: -1; width: 100%; min-height: 100%; object-fit:cover; 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.8rem; color: #222; text-overflow: ellipsis; white-space: nowrap; }
.gallery_list .title .xi-new { margin-top: 0.3rem; margin-right:0.5rem}
.gallery_list .label { font-weight: 400; color: #000; }

.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; font-size:1.4rem; color:#666}
.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 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; max-width: 100%;}
.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:0}
.gallery_view .thumb .bx-wrapper .bx-controls-direction a.bx-next { left: auto; right:0; margin-right:0}

.gallery_view .thumb,
.gallery_view .bx-wrapper {position:static}
.gallery_view .bx-controls {position:absolute; top:80rem; left:50%; transform: translateX(-50%); width:100%; z-index:1}
.gallery_view .bx-controls div  {display:block; width:100%}
.gallery_view .bx-controls a {background-color:rgba(255,255,255,0.5); border:1px solid #ddd; width:6rem; height:6rem; position:absolute;}
.gallery_view .bx-controls a:before {font-size:2rem; line-height:2.8}

@media screen and (max-width:768px) {
	
	.gallery_view .bx-controls {top:65rem}
	.gallery_view .bx-controls a:before {color:#fff}	
}

/* 동영상 내용 */
.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, .board_list.sk6 .blog_list li > span { 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: 768px )
{
	.gallery_list { width: calc(100% + 2rem); }
	.gallery_list li { width:50%; padding: 2rem 2rem 2rem 0; }
	
	.gallery-view .info {padding:3rem}
	.gallery-view .info .img {width:100%; margin-bottom:3rem}
	.gallery-view .info .desc {padding-left:0; width:100%}
	.gallery-view .info .con {margin:3rem 0}
}

@media ( max-width: 580px )
{
	.gallery_list li {width:100%}
	
	/* 웹진형 게시판 */
	.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; }

	.board_list.sk6 .gallery_list .thumb img {margin-top:-1.5rem}
	.board_list.sk6 .gallery_list .desc .label {display:none}
	.board_view.sk6 .youtube iframe {min-height:30rem}
}

@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; }
}


/* 공공디자인 연구소 - 인증서 */
.sk2 .gallery_list li {width:16.6%}
.sk2 .gallery_list .thumb {border:1px solid #ddd; margin-bottom:1rem; padding-top:130%}
.sk2 .gallery_list .thumb img {left:3%; top:3%; width:94%; height:94%; min-height:auto; object-fit:inherit; transition:all 0.3s}
.sk2 .gallery_list .title {color:#333; font-size:1.6rem; font-weight:normal; line-height:1.4; text-align:center; text-overflow:inherit; white-space:inherit}

.sk2.gallery-view {border-top:2px solid #555}
.sk2.gallery-view .info {display:none}
.sk2.gallery-view .title {border-bottom:1px solid #ddd; font-size:3.4rem; font-weight:700; line-height:1.4; padding:3rem 2rem; text-align:center; word-break:break-all}
.sk2.gallery-view .contents {border-bottom:1px solid #ddd; padding:5rem 2rem}

/* 공공디자인 연구소 - 포트폴리오 */
.sk5 .gallery_list .title {line-height:1.4; margin-bottom:1rem; text-overflow:inherit; word-break:keep-all; white-space:inherit}
.sk5 .gallery_list .desc > span + span::before {display:none}
.sk5 .gallery_list span {display:block}
.sk5 .gallery_list .year,
.sk5 .gallery_list .price,
.sk5 .gallery_list .scale {display:none}
.sk5 .gallery_list .label {display:inline-block; font-size:0; width:2rem; overflow:hidden; vertical-align:-0.9rem}
.sk5 .gallery_list .label:before {color:#333; display:block; font-size:1.6rem; font-family:'xeicon'; width:100%}
.sk5 .gallery_list .place .label:before {content:''}
.sk5 .gallery_list .period .label:before {content:''}
.sk5 .gallery_list .thumb {border:1px solid #ddd; padding-top:60%}

.sk5.gallery-view .info {display:flex}
.sk5.gallery-view .info .img {background-color:#eaeaea; border:1px solid #eee; width:55%; height:56rem; overflow:hidden; position:relative}
.sk5.gallery-view .info .img img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:inherit; min-height:100%; min-width:100%; object-fit:cover}
.sk5.gallery-view .info .desc {width:45%; padding:2rem 2rem 2rem 7rem; word-break:keep-all}
.sk5.gallery-view .info .title {color:#333; display:block; font-size:4rem; font-weight:700; line-height:1.2}
.sk5.gallery-view .info .title small {color:#888; display:block; font-size:3rem; font-weight:300; margin-top:0.5rem}
.sk5.gallery-view .info .con {color:#333; font-size:1.9rem; margin-top:6.5rem}
.sk5.gallery-view .info .con li {padding-left:13rem; position:relative; line-height:1.4}
.sk5.gallery-view .info .con li + li {margin-top:2rem}
.sk5.gallery-view .info .con .label {color:#777; display:inline-block; font-weight:normal; padding-left:2.5rem; position:absolute; left:0; width:13rem}
.sk5.gallery-view .info .con .label:before {content:''; background:url('/kor/img/sub/portfolio-bul.gif') no-repeat; background-size:cover; width:1rem; height:1.1rem; position:absolute; left:0.5rem; top:0.8rem}
.sk5.gallery-view .info .con .label + span {display:block}
.sk5.gallery-view .info .con .name,
.sk5.gallery-view .info .con .date,
.sk5.gallery-view .info .con .cate,
.sk5.gallery-view .info .con .hit {display:none}
.sk5.gallery-view .contents {background-color:#f7f7f7; color:#777; font-family:'Noto Sans KR'; font-size:1.8rem; margin-top:5rem; padding:5rem 7rem}
.sk5.gallery-view .img-group {border-bottom:1px solid #ddd; margin-top:10rem; padding-bottom:5rem; text-align:center}

@media ( max-width: 1024px ) {
	.sk5.gallery-view .info .img {min-height:40rem; height:auto}
	.sk5.gallery-view .info .desc {padding:2rem 2rem 2rem 4rem}
	.sk5.gallery-view .info .title {font-size:3rem}
	.sk5.gallery-view .info .con {font-size:1.6rem; margin-top:4rem}
	.sk5.gallery-view .info .con li + li {margin-top:1rem}
	.sk5.gallery-view .contents {padding:3rem 3rem}
	.sk5.gallery-view .img-group {margin-top:5rem}
}

@media ( max-width: 768px ){
	.gallery-view .info {padding:0; flex-wrap:wrap}
	.sk2 .gallery_list li {width:33.333%}
	.sk5.gallery-view .info .img {min-height:auto; width:100%}
	.sk5.gallery-view .info .img img {position:relative; top:auto; left:auto; transform:inherit; max-width:100%}
	.sk5.gallery-view .info .desc {width:100%; padding:0}
	.sk5.gallery-view .info .con {margin:3rem 0 0}
	.sk5.gallery-view .info .con li {padding-left:10rem}
	.sk5.gallery-view .info .con .label {width:10rem}
}

@media ( max-width: 640px ){
	.sk2 .gallery_list li {width:50%}
}