html {background: #000;height: 100%}
html body {min-width:unset;background-color:unset;font-family:"Pretendard Variable", Pretendard;color: #171717;font-size: 14px;font-style: normal;font-weight: 500;letter-spacing: -0.6px;}
.register-container {display: flex;justify-content:center;align-items:center}
.register-container .logo {width:240px;margin:0 auto 10px}
.register-container .logo img {width:100%}
.register-container #register-wrap {position: relative;display: flex;flex-flow: column;margin:20px 0}
.register-container #register-wrap .register-form {margin:0 auto;display:flex;flex-flow:column;gap:32px;width:480px;background-color:#000;color:#fff;border-radius:20px;border:1px solid #e2e8f0;padding:24px}
.register-container #register-wrap .register-form .input-wrap {display: flex;flex-flow: column;gap: 12px}
.register-container #register-wrap .register-form .input-wrap .text-wrap {display: flex;gap: 12px;width: 100%}
.register-container #register-wrap .register-form .input-wrap .title span {margin-left: 4px;color: #f8a802}
.register-container #register-wrap .register-form .input-wrap select,.register-container #register-wrap .register-form .input-wrap input {padding:12px;display:flex;justify-content:center;align-items:center;text-align:center;width:100%;border-radius:12px;border:1px solid #e2e8f0;background-color:#f8fafc}
.register-container #register-wrap .register-form .input-wrap select::-moz-placeholder, .register-container #register-wrap .register-form .input-wrap input::-moz-placeholder {color: #9ca3af}
.register-container #register-wrap .register-form .input-wrap select::placeholder,.register-container #register-wrap .register-form .input-wrap input::placeholder {color: #9ca3af}
.register-container #register-wrap .register-form .input-wrap .button {display:flex;justify-content:center;align-items:center;padding:12px;border:1px solid #f8a802;border-radius:12px;font-weight:500;background-color:#fff;color:#f8a802;cursor:pointer}
.register-container #register-wrap .register-form .input-wrap .button#register-btn {background-color:#f8a802;color: #fff}

#login-modal {position:relative;margin-top:60px;width:640px;max-width:unset;height:500px;background-color:#fff;padding:24px;box-shadow:0px 1px 3px 0px rgba(0, 0, 0, .1), 0px 1px 2px -1px rgba(0, 0, 0, .1);border-radius:20px;transition:.5s ease-in;}
#login-modal a.close-modal {top: 24px;right: 24px;background-image:url("/img/Gray-X-Circle-Mini-Icon.svg");}
#login-modal .left-girl {position: absolute;top: -10px;left: 0;width: 420px;aspect-ratio: 420 / 510;}
#login-modal .login-wrap {display: flex;flex-flow: column;gap: 20px;z-index: 2;margin: 68px 0 0 auto;width: 240px;}
#login-modal .login-wrap .logo {display: flex;width: 100%;justify-content: center;}
#login-modal .login-wrap .input-wrap {display: flex;flex-flow: column;gap: 12px;}
#login-modal .login-wrap .input-wrap input {padding: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 12px;border: 1px solid #e2e8f0;background-color: #f8fafc;}
#login-modal .login-wrap .input-wrap .button {display: flex;justify-content: center;align-items: center;padding: 12px;border: 1px solid #f8a802;border-radius: 12px;font-weight: 500;background-color: #f8a802;}
#login-modal .login-wrap .input-wrap .button#login-btn {color: #fff;cursor: pointer;}
#login-modal .login-wrap .input-wrap .button#register-btn {background-color: #fff;color: #f8a802;}

@media only screen and (max-width:768px) {
	.register-container #register-wrap .register-form {width:100%;padding:10px;gap:10px}
	.register-container #register-wrap .register-form .input-wrap select, .register-container #register-wrap .register-form .input-wrap input {padding:8px;border-radius:6px}
	
	#login-modal {width:100%;margin-top:20px;height:400px}
	#login-modal .left-girl {display:none}
	#login-modal .login-wrap {width:100%;gap:10px;margin:20px auto}
}
