/*팝업*/
@import url("reset.css");

.layer-popup {width:90%; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2000; display:none;}
.layer-popup > .inner {width:100%; position:relative;}
.layer-popup .popup-button {width:100%; margin:0 auto; margin-bottom:var(--gap-24); max-width:450px; display:flex; align-items:center;}
.layer-popup .popup-button .lf-box {width:calc(100% - 40px);}
.layer-popup .popup-button .bx-check input[type="checkbox"] + label {color:#fff;}
.layer-popup .btn-layer-close {width:40px; height:40px; border-radius:50%; background-color:#fff; font-size:0; margin-left:auto; display:block; position:relative;}
.layer-popup .btn-layer-close:before {content:""; width:100%; height:100%; background:var(--icon-close) center no-repeat; background-size:24px auto; position:absolute; left:0; top:0;}
.layer-popup .popup-conts {max-height:85vh; overflow-y:auto;}
.layer-popup .popup-conts .popup-list {opacity:0; visibility:hidden; max-width:450px; margin:0 auto;}
.layer-popup .popup-conts .popup-list.slick-initialized {opacity:1; visibility:visible;}
.layer-popup .popup-conts .popup-list .slick-arrow {width:48px; height:48px; border-radius:50%; background:#fff; font-size:0; position:absolute; top:calc(50% - (var(--gap-24) + 10px)); transform:translateY(-50%);}
.layer-popup .popup-conts .popup-list .slick-arrow:before {content:""; width:100%; height:100%; background:var(--arrow-b) center no-repeat; background-size:auto 16px; position:absolute; left:0; top:0;}
.layer-popup .popup-conts .popup-list .slick-prev {left:calc((48px + var(--gap-24)) * -1);}
.layer-popup .popup-conts .popup-list .slick-next {right:calc((48px + var(--gap-24)) * -1);}
.layer-popup .popup-conts .popup-list .slick-next:before {transform:scaleX(-1);}
.layer-popup .popup-conts .popup-list .slick-dots {width:100%; margin-top:var(--gap-24); display:flex; align-items:center; gap:0 var(--gap-24); justify-content:center;}
.layer-popup .popup-conts .popup-list .slick-dots li {font-size:0; line-height:0;}
.layer-popup .popup-conts .popup-list .slick-dots li button {font-size:0; width:10px; height:10px; border-radius:50%; background:#ccc;}
.layer-popup .popup-conts .popup-list .slick-dots .slick-active button {background:var(--main-color);}
.layer-popup .popup-conts .popup-list img {display:block; max-width:100%; margin:0 auto;}
.layer-popup.active {display:block;}

@media screen and (max-width: 768px) {
	.layer-popup .popup-button {width:calc(100% - ((40px + var(--gap-24)) * 2)); max-width:600px; margin-left:auto; margin-right:auto;}
	.layer-popup .popup-button .lf-box {width:calc(100% - 35px);}
	.layer-popup .btn-layer-close {width:35px; height:35px;}
	.layer-popup .btn-layer-close:before {background-size:20px auto;}
	.layer-popup .popup-conts .popup-list {width:calc(100% - ((40px + var(--gap-24)) * 2)); margin:0 auto; max-width:600px;}
	.layer-popup .popup-conts .popup-list .slick-arrow {width:40px; height:40px;}
	.layer-popup .popup-conts .popup-list .slick-arrow:before {background-size:auto 12px;}
	.layer-popup .popup-conts .popup-list .slick-prev {left:calc((40px + var(--gap-24)) * -1);}
	.layer-popup .popup-conts .popup-list .slick-next {right:calc((40px + var(--gap-24)) * -1);}
}

@media screen and (max-width: 480px) {
	.layer-popup .popup-button {width:calc(100% - ((32px + var(--gap-24)) * 2));}
	.layer-popup .popup-button .lf-box {width:calc(100% - 30px);}
	.layer-popup .btn-layer-close {width:30px; height:30px;}
	.layer-popup .btn-layer-close:before {background-size:16px auto;}
	.layer-popup .popup-conts .popup-list {width:calc(100% - ((32px + var(--gap-24)) * 2));}
	.layer-popup .popup-conts .popup-list .slick-arrow {width:32px; height:32px;}
	.layer-popup .popup-conts .popup-list .slick-arrow:before {background-size:auto 10px;}
	.layer-popup .popup-conts .popup-list .slick-prev {left:calc((32px + var(--gap-24)) * -1);}
	.layer-popup .popup-conts .popup-list .slick-next {right:calc((32px + var(--gap-24)) * -1);}
}