@charset "utf-8";

.modal {display: none; position: fixed; z-index: 20; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.5);}
.modal-content {position: relative; border: 1px solid rgba(255,255,255,0.6); background-color: #030A38; margin: auto; padding: 3rem 4rem 5rem; width: 80%; max-height: 90%; max-width: 932px; border-radius: 2.4rem; -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; overflow: hidden;}
.modal-body {max-height: calc(100dvh - 2.5rem - 3.7rem - 21rem); line-height: 1.5; overflow: hidden auto;}
/*.modal-body::-webkit-scrollbar {width: 8px;}*/
/*.modal-body::-webkit-scrollbar-track {background-color: #030A38;}*/
/*.modal-body::-webkit-scrollbar-thumb {background-color: #fff; border-radius: 50px;}*/

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


/* 상단 */
.modal-header {display: flex; justify-content: flex-end; align-items: center; margin-bottom: 1.8rem;}
.modal-header .close-btn {font-family: 'ClashDisplay-Regular'; color: #fff; font-size: 2.6rem; font-weight: 600; line-height: 1;}

/* 하단 */
.modal-footer {display: flex; justify-content: center; gap: 8px; margin-top: 4rem; text-align: center;}
.modal-footer button {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 100%; max-width: 18rem; height: 4rem; border: 1px solid #9A9DAF; border-radius: .4rem; color: #fff; font-size: 1.4rem;}


@media (max-width: 768px) {
    .modal-content {padding: 3rem 2rem;}
}