@charset "utf-8";

/****************************************************************************************************************************************
레이어 팝업 공통
*****************************************************************************************************************************************/
#layerPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 9999; width: 100%; height: 100%;}
.layer-bg {position:relative; padding: 30px 15px; width:100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background:rgba(0,0,0,0.7); overflow-y: auto;}

.layer-wrap {position: relative;}
.layer-close {position: absolute; top: 0; left:0; right:0; margin:0 auto; text-align: center; z-index: 9; transition: 0.3s; cursor: pointer;}
.layer-close > i {padding:12px 12px; font-size: 20px; font-weight: 600; color:#000; background: #fff; border-radius: 50%;}

.layer-con {position: relative;}

@media (hover: hover) and (pointer: fine) {
    .layer-close:hover {transform: rotate(180deg);} 
}

/****************************************************************************************************************************************
팝업 공통
*****************************************************************************************************************************************/
.popup-wrap {position:relative; margin:50px auto 0 auto; padding:40px 30px; width: 1000px; text-align: center; background: #fff; border: 1px solid #fff; border-radius: 30px; overflow: hidden;}
.page-tit {position: relative; margin:0 auto 20px auto; padding:10px 0; width: 100%; text-align: center; font-size: 20px; font-weight: 600; background: #f5f5f5; border-radius: 10px;}

.page-con {position:relative; margin:0 auto; padding:0; width: 100%; height: 620px; text-align: center; overflow-y: auto; }
.page-con > img {width: 100%;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1030px) {
    .layer-wrap,
    .popup-wrap {width: 100%;}
    .popup-wrap {padding:30px 15px;}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
    .layer-bg {padding:20px 5px;}    
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    .page-tit {margin: 0 auto 10px auto; font-size: 16px;}
    .page-con {height: 400px;}    
}/* 미디어쿼리문 끝 */