@charset "UTF-8";
/* 스크롤 고정 */
body.fixed{position:relative;overflow:hidden;}

/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
.popup-outer-wrap{position:relative;}
.popup-wrap{display:none;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;background:var(--black20);overflow:auto;text-align:center;}
.popup-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
.popup-wrap .popup-box{display:inline-block;position:relative;width:100%;max-width:calc(100% - 2rem);background:var(--white100);text-align:left;border-radius:1rem;box-shadow:0px 5px 21px 6px rgba(0,0,0,0.1);vertical-align:middle;}
.popup-box .popup-header{display:flex;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--black10);}
.popup-box .popup-header h4{color:var(--black06);font-weight:var(--font-weight-medium);}
.popup-box .popup-body{padding:4rem;max-height:70vh;height:70vh;overflow:auto;box-sizing:border-box;}
.popup-box .popup-footer{display:flex;justify-content:center;padding:2rem 4rem;}

/* 일반 팝업 - 툴팁 레이아웃 (딤 배경이 없는 유형) */
.popup-wrap.tooltip{position:static;top:auto;left:auto;background:none;}
.popup-wrap.tooltip:before{display:none;}
.popup-wrap.tooltip .popup-box{position:absolute;top:100%;left:0;width:100%;z-index:500;border:1px solid var(--black10);border-radius:1rem;box-shadow:rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;}
.popup-wrap.tooltip .popup-body{min-height:auto;height:auto;}

/* 일반 팝업 - 아이프레임, 레이아웃 크기별 팝업 사용자 지정 */
.popup-wrap.layer-iframe .popup-body{padding:0;overflow:unset;}

/* 일반 팝업 - 팝업 열기 버튼 */
.btn-popup-open{display:inline-block;position:relative;margin:9px;padding:1.5rem 2.5rem;border:0;border-radius:1rem;background:var(--black10);font-size:inherit;color:var(--white100);text-align:center;}

/* 일반 팝업 - 팝업 닫기 버튼(헤더) */
.btn-popup-close{display:inline-block;position:relative;width:2rem;height:2rem;}
.btn-popup-close:after,
.btn-popup-close:before{content:'';position:absolute;top:50%;left:50%;width:calc(100% * 1.4142);height:2px;background-color:var(--black10);transform-origin:center center;}
.btn-popup-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
.btn-popup-close:before{transform:translate(-50%, -50%) rotate(45deg);}

/* 일반 팝업 - 팝업 닫기 버튼(팝업 외부) */
.popup-box > .btn-popup-close{position:absolute;top:-4rem;right:0;z-index:10;}

/* 일반 팝업 - 팝업 닫기 버튼(푸터) */
.popup-footer > .btn-popup-close{padding:1rem 2rem;width:auto;height:auto;background:none;border:1px solid var(--black10);border-radius:5px;background:var(--white100);color:var(--black06);transition:all .2s;}
.popup-footer > .btn-popup-close:hover{background:#101725;color:var(--white100);}
.popup-footer > .btn-popup-close:before,
.popup-footer > .btn-popup-close:after{display:none;}

/* 일반 팝업 - 옵션(외부스크롤) */
.outer-scroll .popup-wrap{padding:2rem;box-sizing:border-box;}
.outer-scroll .popup-wrap .popup-body{max-height:100%;height:auto;}

@media screen and (max-width:1024.98px) {
	/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
	.popup-box .popup-footer{padding:2rem;}
	.popup-wrap .popup-body{min-height:60vh;}

	/* 일반 팝업 - 팝업 닫기 버튼(헤더) */
	.btn-popup-close{width:1.5rem;height:1.5rem;}

	/* 일반 팝업 - 팝업 닫기 버튼(푸터) */
	.popup-footer > .btn-popup-close{padding:8px 1rem;}

	/* 일반 팝업 - 옵션(외부스크롤) */
	.outer-scroll .popup-wrap .popup-body{max-height:100%;min-height:100%;height:auto;}
}