@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap');

*, html {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin:0; }
*, *:before, *:after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html { font-size: 10px; }
button {cursor: pointer;}
.login_container {width: 100%; height: 100vh; display: flex; flex-direction: column; background-color: #fafafa; position: relative;}
.login_container .login_title { margin-top: auto; font-weight: 500; text-align: center; font-size: 2.6rem; margin-bottom: 7.5rem; color: #7d7d7d; }
.login_container .login_title .color { color:#0095ef; }
.login_container .login_content {width: 40rem; max-width: 90%; padding: 3.5rem 3rem; margin: 0 auto; background:#fff; border-radius: .5rem; box-shadow: 0 0 .5rem rgba(0,0,0,0.2); }
.login_container .login_content_title { display: flex; flex-direction: column-reverse; align-items: center; }
.login_container .login_content_title span {font-size: 2.2rem;color:#555; margin-top: 10px; }
.login_container .login_content_title img { background-color:#0095ef; width: 4rem; height: 4rem; border-radius: 100%; margin-top: 1.5rem; }
.login_container .login_content .login_form {margin-top: 3rem;}
.login_container .login_content .login_form .form_input { margin-bottom: 1rem; padding-bottom: 2rem; }
.login_container .login_content .login_form .form_input label { display: block; font-size: 1.3rem; margin-bottom: .5rem; transform: translateX(-1rem);  margin-left: 12px;}
.login_container .login_content .login_form .form_input input { width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid #e0e0e0; border-radius: .3rem; }
.login_container .login_content .form_check { display: flex; align-items: center; margin-top: 2rem;}
.login_container .login_content .form_check span { font-size: 1.3rem; }
.login_container .login_content .form_check input[type="checkbox"] { display: none; }
.login_container .login_content .form_check input[type="checkbox"] + label { width: 1.8rem; height: 1.8rem; border: 1px solid #e0e0e0; margin-right: 1rem; border-radius: .3rem; }
.login_container .login_content .form_check input[type="checkbox"]:checked + label { background-color: #0095ef; position: relative; border-color: #0095ef; }
.login_container .login_content .form_check input[type="checkbox"]:checked + :after { content: ""; display: block; width: 0.5rem; height: 1rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff; position: absolute; top: 45%; left:50%; transform: translate(-50%, -50%) rotate(45deg); }
.login_container .btn_login {width: 100%; height: 3.5rem; margin-top: 4rem; border: 0; background-color: #26a1f1; border-radius: .3rem; color:#fff; font-size: 1.3rem; box-shadow: 0 .3rem .5rem rgba(0,0,0,0.3); }
.login_container .footer_login {width: 100%; margin-top: auto; padding: 2rem 2rem 4rem; display: flex; align-items: center; justify-content: center;}
.login_container .footer_login img {margin-right: 1.5rem;}
.login_container .footer_login p { font-size: 1.1rem; line-height: 130%;}

.alert_msg {position: absolute; display: block; color:#ff3300; margin-left: .5rem; padding-left:0; margin-top: 0.5rem;}

@media screen and (max-width: 768px) {
	.login_container {padding: 4rem 0;}
	.login_container .login_title {margin-bottom: 4rem; padding: 0 2rem}
	.login_container .login_content {width: auto; min-width: 90%; margin-bottom: 2rem;}
}

@media screen and (max-width: 280px) {
	html { font-size: 9px; }
}