@import url("reset.css");

#wrap {min-height:100vh;}
.popup-area {display: none; width:100%; height: 100%;  position:fixed; top: 0%; left: 0; z-index:1000; background: rgba(0,0,0,0.7); }
.popup-area .popup-inner {width: 90%; max-width: 500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.popup-area.hide {pointer-events: none; opacity: 0;}
.popup-area .popup-box { min-width:200px; max-width:500px; box-sizing:border-box; border:1px solid rgba(102,102,102,1); border-bottom: 0; background:rgba(255,255,255,1); z-index:1000;  position: relative;}
.popup-area .popup-box:focus-visible,
.popup-area .popup-box:focus {outline: 3px solid #005fcc; outline-offset: -3px;}
.popup-area .popup-slide {font-size: 0;}
/* .popup-area .popup-box.hide {display:none;}
.popup-area .popup-box.active {display:block;} */
.popup-area .popup-box .popup-wrap {width:100%; display:block;}
.popup-area .popup-box .popup-conts {width:100%; position:relative; box-sizing:border-box;}
.popup-area .popup-box .popup-conts a {position: relative; display: block;}
.popup-area .popup-box .popup-conts a:focus,
.popup-area .popup-box .popup-conts a:focus-visible {outline: 3px solid #005fcc; outline-offset: -3px; box-shadow: 0 0 0 3px #ffff00;}
.popup-area .popup-box .popup-conts img {max-width:100%; display:block;}
.popup-area .popup-bottom {width:100%; background:rgba(102,102,102,1); font-size:0; padding:10px; box-sizing:border-box;}
.popup-area .popup-bottom > * {display:inline-block; vertical-align:middle; position:relative;}
.popup-area .popup-bottom .chk-box {width:calc(100% - 20px); font-size:0;}
.popup-area .popup-bottom .chk-box > * {display:inline-block; vertical-align:middle;}
.popup-area .popup-bottom .chk-box [type="checkbox"] {width:0; height:0; opacity:0; position:absolute; left:-999px; top:-999px;}
.popup-area .popup-bottom .chk-box [type="checkbox"] + label {font-size:14px; color:rgba(255,255,255,1);; box-sizing:border-box; max-width:100%; padding-left:30px; position:relative; cursor:pointer;}
.popup-area .popup-bottom .chk-box [type="checkbox"] + label:before {content:""; width:20px; height:20px; box-sizing:border-box; background:rgba(255,255,255,1); border:1px solid rgba(0,0,0,0.5); position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.popup-area .popup-bottom .chk-box [type="checkbox"]:focus + label:before,
.popup-area .popup-bottom .chk-box [type="checkbox"]:focus-visible + label:before {outline: 3px solid #ffff00; outline-offset: 2px; box-shadow: 0 0 0 2px #005fcc;}
.popup-area .popup-bottom .chk-box [type="checkbox"] + label:after {content:""; width:5px; height:10px; border:solid rgba(102,102,102,1); border-width:0 2px 2px 0; position:absolute; left:6px; top:2px; -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); transform:rotate(40deg); display:none;} 
.popup-area .popup-bottom .chk-box [type="checkbox"]:checked + label:after {display:block;}
.popup-area .popup-bottom .btn-close {width:20px; height:20px;}
.popup-area .popup-bottom .btn-close:before,
.popup-area .popup-bottom .btn-close:after {content:""; width:1px; height:100%; border-left:1px solid rgba(255,255,255,1);; position:absolute; left:9px; top:0;}
.popup-area .popup-bottom .btn-close:before {-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg);}
.popup-area .popup-bottom .btn-close:after {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg);}
.popup-area .popup-bottom .btn-close a {display:block; width:100%; height:100%; position:relative; z-index:10; font-size:0; outline: none;}
.popup-area .popup-bottom .btn-close a:focus,
.popup-area .popup-bottom .btn-close a:focus-visible {outline: 3px solid #ffff00; outline-offset: 3px; box-shadow: 0 0 0 2px #005fcc;}


.popup-area .slick-dots {width:100%; font-size:0; background:rgba(102,102,102,1); text-align:center; padding:10px 0;}
.popup-area .slick-dots li {display:inline-block; vertical-align:middle; margin-left:5px;}
.popup-area .slick-dots li:nth-child(1) {margin-left:0;}
.popup-area .slick-dots li button {width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,1); box-sizing:border-box; border:none; font-size:0; cursor:pointer; display:block; padding:0;}
.popup-area .slick-dots li button:focus,
.popup-area .slick-dots li button:focus-visible {outline: 3px solid #ffff00; outline-offset: 2px;}
.popup-area .slick-dots li.slick-active button {width:25px; border-radius:25%; background:#FFFF00;}

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

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

	

}

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

@media screen and (max-width: 768px){
	.popup-area {left:50%; top:50%;  -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
	.popup-area .slick-dots li button {width:24px; height:24px;}
}

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

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