@charset "utf-8";


/****** 모달 ******/
#board_gallery_content {margin-top: 80px;}
.gallery_list_wrap ul {display: flex; align-items: center; flex-wrap: wrap; margin: -25px -15px;}
.gallery_list_wrap .list_item {position: relative; width: calc(100% / 3 - 30px); height: auto; margin: 25px 15px; cursor: pointer;}
.gallery_list_wrap .list_item .dpp_pci_chk {position: absolute; top: 15px; left: 15px;}
.gallery_list_wrap .list_item .img_item {position: relative; width: 100%; height:300px; border: 1px solid #E7E7E7; overflow:hidden;}
.gallery_list_wrap .list_item .img_item::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity:0; z-index: 1; cursor: pointer; transition:0.5s all;}
.gallery_list_wrap .list_item .img_item::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity:0; z-index: 1; cursor: pointer; transition:0.5s all;}
.gallery_list_wrap .list_item:hover .img_item::before {opacity:1;}
.gallery_list_wrap .list_item .img_item::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 50px; height: 50px; background: #fff url("/theme/basic/img/gall_hover.png") center no-repeat; background-size: 21px; z-index: 2; border-radius: 50%;  cursor: pointer; transition:0.5s all; opacity:0;}
.gallery_list_wrap .list_item:hover .img_item::after {opacity:1;}
.gallery_list_wrap .list_item .img_item img {width: 100%; height: 100%; object-fit: cover;}
.gallery_list_wrap .list_item p {text-align: center; font-size: 1.04vw; font-weight: 600; margin-top: 0.94vw;}

/* pagination */
#board_gallery_content .pagination {padding-top: 1.74vw; display: flex; align-items: center; justify-content: center;}
#board_gallery_content .pagination li {width: 2.60vw; height: 2.60vw; margin: 0 0.52vw;}
#board_gallery_content .pagination li a {font-size: 1.30vw; font-weight: 500; color: #868686; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
#board_gallery_content .pagination li.active a {background: #000; color: #fff; font-weight: 700; border-radius: 100%;}

/* popup */
.popup_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10000;}
.popup_wrap .popup_cont {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: auto;}
.popup_wrap .popup_cont .close_btn {display: flex; justify-content: flex-end;}
.popup_wrap .popup_cont .close_btn i {width: 45px; height: 45px; line-height: 40px; text-align:center; background: #000; cursor: pointer; font-size: 30px; color: #fff; font-weight: 100;}
.popup_wrap .popup_cont .cont {width: 600px; height: auto; overflow-y: scroll;}
.popup_wrap .popup_cont .cont{-ms-overflow-style: none;}
.popup_wrap .popup_cont .cont::-webkit-scrollbar{display:none;}
.popup_wrap .popup_cont .cont img {width: 100%; height: 100%; object-fit: cover;}



@media screen and (max-width:1280px) {

	.gallery_list_wrap {margin-bottom:8vw;}
	.gallery_list_wrap ul{margin: -1.95vw -1.17vw;}
	.gallery_list_wrap .list_item {width: calc(100% / 3 - 2.34vw); margin: 1.95vw 1.17vw;}
	.gallery_list_wrap .list_item .img_item {height:21.44vw;}
	.gallery_list_wrap .list_item p {font-size: 2vw;}

}


@media screen and (max-width:768px) {

	.gallery_list_wrap {margin-bottom:15vw;}
	.gallery_list_wrap ul {margin-top: 1vw;}
	.gallery_list_wrap .list_item {width: calc(100% / 2 - 2.34vw); margin: 1.95vw 1.17vw;}
	.gallery_list_wrap .list_item p {margin-top: 2.8vw; font-size: 4.08vw;}
	.gallery_list_wrap .list_item .img_item {height: 29.8vw;}

	.page_navigation {margin: 6.51vw 0;}
	#board_gallery_content .pagination li {width: 3.91vw; height: 3.91vw; margin: 0 0.39vw;}
	#board_gallery_content .pagination li a {font-size: 2.34vw;}

	.popup_wrap .popup_cont {width: 100%; padding: 0 3.91vw; top: 50%;}
	.popup_wrap .popup_cont .close_btn  i {width: 5.91vw; height: 5.91vw; line-height: 5.91vw; font-size: 3.34vw;}
	.popup_wrap .popup_cont .cont {width: 100%; height: 100%; margin: 0 auto;}
	.popup_wrap .popup_cont .cont img {height: auto;}

}