.modal { display: none; position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px) }
.modal-content { position: relative; background-color: #fefefe; padding: 20px; border: 1px solid #888; width: 500px; border-radius: 20px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.close { position: absolute; top: 33px; right: 33px; color: #000; font-size: 36px; font-weight: bold; cursor: pointer; line-height:1rem; }
.close:hover,.close:focus { color: black; text-decoration: none; cursor: pointer; }

#login-modal .modal-content { padding: 115px 50px; max-width: 500px; width: 100%; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; }
#login-modal .modal-content .modal-title { font-family: 'Pretendard-Bold'; font-size: 34px; text-align: center; }
#login-modal .modal-content .modal-content-wrap { display: flex; align-items: center; height: 100%; flex: 1; flex-direction: column; margin: 40px 0 0 0; }
#login-modal .modal-content .modal-content-wrap > input { width: 100%; height: 50px; border-radius: 10px; background : #F3F3F3; outline: unset; border: unset; padding: 0 20px; }
#login-modal .modal-content .modal-content-wrap #id { margin-bottom: 14px; }
#login-modal .modal-content .modal-content-wrap #pw { margin-bottom: 13px; }
#login-modal .modal-content .modal-content-wrap .remember-wrap { width: 100%; text-align: right; }
#login-modal .modal-content .modal-content-wrap .remember-wrap label { font-family: 'Pretendard-Regular'; font-size: 15px; user-select: none; }
#login-modal .modal-content .modal-content-wrap p { margin: 20px 0; font-family: 'Pretendard-SemiBold'; font-weight: 600; font-size: 24px; letter-spacing: -1px; flex: 1; align-items: center; display: flex; }
#login-modal .modal-content .modal-button-wrap .btn { min-width: 72px; width: 100%; height: 50px; padding: 0 15px; border-radius: 8px; border: 0; outline: none; color: white; font-size: 18px; font-weight: 500; font-family: 'Pretendard-Regular'; cursor: pointer; }
#login-modal .modal-content .modal-button-wrap .btn-login { background: #5E60FF; }

@media (max-width:580px) {
    .modal-content { width:90%; }
    #login-modal .modal-content { width: 90%; }
}

@media (max-width:480px) {
    .modal-content { width:84%; padding:15px; }
    #login-modal .modal-content { width:84%; min-height: 500px; padding: 95px 45px; }
}