@charset 'utf-8';



.login {background:center bottom / contain no-repeat; background-color:#002961; background-image:url(../img/login_bg.jpg); width:100vw; height:100vh}
.login .t_box {width:400px; position:absolute; left:calc(50% - 200px); bottom:460px; text-align:center}
.login .t_box * {color:var(--bs-white)}
.login .t_box h3 {font-size:60px; font-weight:bold}
.login .t_box p {font-size:16px; font-weight:normal; margin-bottom:0; padding-top:5px}
.login .box {background:url(./img/hd_img.png) no-repeat 90%; background-size:500px; position: absolute; left:calc(50% - 200px); bottom:220px; width:400px; height:190px; padding: 20px; box-shadow: rgb(0 0 0 / 30%) 10px 10px 10px; background-color:#e4e7ec; overflow:hidden}
.login .login_logo {padding: 30px 70px 0;}
.login .login_logo img {width:100%}
.login .input {float:left; width:100%; }
.login .text {float:left; width:calc(100% - 130px)}
.login .text .id {margin-bottom:10px}
.login .text div {float:left;height:50px}
.login .text div p {float:left;width:40px; text-align:left;line-height:40px; font-weight:bold}
.login .text div div {float:left;width:calc(100% - 40px)}
.login .text input {width:100%; height:50px }
.login .text input:focus {background:#ccedfc}
.login button {float:right; margin-left:10px; height:110px; width:120px; background-color:#345973; color:var(--bs-white); border-radius:0}
.login .chk {float:left; width:100%; padding:18px 0 0 0}
.login .chk div {float:right;margin-left:40px}
.login .chk div label {font-size:12px;}

.login .f_box {width:400px; position:absolute; left:calc(50% - 200px); bottom:50px; text-align: center;}
.login .f_box img {width:210px; margin:0 auto}


@media (max-width: 800px) {
    /*.login * {bottom:unset !important}*/
    .login {padding:15px}
    .login .t_box h3 {font-size:30px}
    .login .t_box p {font-size:12px; white-space:normal}

}

@media (max-width: 640px) {
    .login .t_box,
    .login .box,
    .login .f_box {width:calc(100% - 30px); left:15px}
}


@media (max-width: 360px) {

    .login .box {width:320px; margin:0;left:calc(50% - 160px)}

}