@charset "utf-8";



.mystery_box {

	position: fixed;

	max-width: 420px;

    width: 100%;

	top: 0;

	z-index:1000;

    background-color: #2b145c !important;

}

.mystery_box .box_black {

	width: 100%;

	margin: 0 auto;

	background-color: #2b145c;

	border-radius: 15px;

	position: relative;

	box-sizing: border-box;

	z-index:1000;

}

.mystery_box .btn_close {

	position: absolute;

	top: -15px;

	right: 0px;

}

.mystery_box .select_area {

	text-align: center;

}

.mystery_box .select_area .tit {

    text-align: center;

    border-bottom: 1px solid #412c6d;

}

.mystery_box .select_area .tit img {

    width: 100%;

    max-width: 300px;

}

.mystery_box .select_area .mst_area {

    padding-top: 30px;

}

.mystery_box .select_area .mst_img {

    width: 80px;

    height: 80px;

    border-radius: 50px;

    background: #fff;

    margin: 0 auto;

}

.mystery_box .select_area .mst_img img {

	width: 100%;

    max-width: 80px;

    border-radius: 50px;

}

.mystery_box .select_area .name{

	font-family: one_R;

	font-size: 15px;

	color:#fff;

	margin-top: 10px;

}

.mystery_box .select_area .name span {

    font-size: 12px;

}

.mystery_box .select_area .btn_area {

    margin: 20px 0 10px;

    text-align: center;

}

.mystery_box .select_area .btn_event_resv {

    width: 80%;

    height: 40px;

    border: 0;

    background: #9989fe;

    border-radius: 10px;

    color: #16043b;

    font-size: 16px;

    font-weight: 600;

}



/*** 여기서부터는 기존 css 공통이라 빼도되요 ***/

/**** 모달팝업 공통 ****/



.bg {

    display: none;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100vh;

    background-color: #000000;

    opacity: 0.7;

    z-index: 1000;

    overflow: hidden;

}



.bg.show {

    display: block;

}



.modal-pop {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    max-width: 330px;

	width: 100%;

    padding: 30px 20px;

	box-sizing: border-box;

    border-radius: 20px;

    background-color: rgba( 0, 0, 0, 0.9 );

    text-align: center;

    z-index: 10000;

}





.modal-pop.show {

    display: block;

}







/* 모바일일 경우....*/

@media screen and (hover: none) and (pointer: coarse) {



.modal-pop {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width:100%;

    padding: 40px 20px;

	border-radius: 20px;

    background-color: rgba( 0, 0, 0, 0.9 );

    text-align: center;

    z-index: 10000;

}





.modal-pop.event-pop {

    padding-top: 18.611vw;

    padding-bottom: 0;

    background-color: #fff;

}



.modal-pop.event-pop {

    position: fixed;

    width: 100%;

	max-width: 100%;

    top: auto;

    bottom: 0;

    left: 0;

    transform: translate(0, 100%);

    padding: 30px 10px 20px;

    border-radius: 20px 20px 0 0;

    background-color: rgba( 0, 0, 0, 0.9 );

}



	

	.modal-pop.event-pop.show {

	    animation: popTrans 0.6s ease both;

	}

	

	.modal-pop.event-pop.hidePop {

	    transform: translate(0, 100%);

	    display: block;

	    animation: popTransHide 0.7s ease both;

	}

	

	

	@keyframes popTransHide {

	    0% {

	        transform: translate(0, 0);

	    }

	    100% {

	        transform: translate(0, 120%);

	        display: none;

	    }

	}

	

	@keyframes popTrans {

	    0% {

	        transform: translate(0, 100%);

	    }

	    100% {

	        transform: translate(0, 0);

	    }

	}

	

}