.blocksrceen{position:absolute;width:100%;height:100%;display:none;background-color:rgba(125,125,125,0.3);z-index:99999;align-items:center;justify-content:center;font-size:2rem}
.blocksrceen >.msg{padding:10px 20px;color:red;background-color:#fff;border:5px double #000}


.container{display:flex;align-content:center;justify-content: center;width:100%;align-items: center;background-color:var(--login-container-color);height: 100%;}
.container .wrap{display:flex;overflow:hidden;padding: 30px;width:1024px;}

.container .wrap  .titlearea{width:100%}
.container .wrap  .titlearea >.title{font-size:4.6rem;font-weight:bold;color:rgba(63, 122, 216,1)}
.container .wrap  .titlearea >.desc{margin:10px 0px;font-size:2.8rem;color:#000;}

.container .wrap  .loginwrap{display:flex;align-items:center;}

.container .wrap  .loginwrap .loginbox{border-radius:5px;width:100%;padding:10px 10px;box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.75);border:1px solid #ebebeb;border-radius:5px;background-color:#fff}
.container .wrap  .loginwrap .loginbox >each.{margin:5px 0px}


.container .wrap .each{margin:10px;width:350px;flex:auto;padding:10px 20px;}

.container .wrap .each.input{position:relative;}
.container .wrap .each.input .title{font-family: Poppins-Bold;font-size: 36px;color: var(--login-input-title);line-height: 1.2;text-align: center; width: 100%;display: block;padding-bottom: 54px;}
.container .wrap .each.input .inputbox{width:100%;border-bottom:2px solid #adadad;margin-bottom:30px;position:relative;}
.container .wrap .each.input .inputbox .inputText{font-size:15px;color: var(--login-input-font-color);line-height: 1.2; display: block;width: 100%; height: 45px;padding: 0 5px;border:none;}
.container .wrap .each.input .inputbox .focus-inputText{position: absolute;display: block;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;}
.container .wrap .each.input .inputbox .focus-inputText::after{color: #999;line-height: 1.2;content: attr(data-placeholder);display:block;width:100%;position:absolute;top:16px;left: 0;padding-left: 5px;transition: all .4s;}
.container .wrap .each.input .inputbox .inputText:focus + .focus-inputText::after{top: -15px;}
.container .wrap .each.input .inputbox .has-val.inputText + .focus-inputText::after{top: -15px;}

.container .wrap .each.logo-area{display:flex;align-items:center;justify-content:center}
.container .wrap .each.logo-area img{width:200px}


.container .wrap .each.input .footer{position:absolute;bottom:5px;right:0px;font-weight:bold;color:var(--login-input-font-color);font-size:12px;}

.footer{display:flex;width:100%; padding: 3rem 0; align-items:center;justify-content:center;background-color:#2D2D2D;color:#fff;font-size:2vh}
.footer .wrap{display:flex;width:100vw;justify-content:center;}





@media (max-width: 1024px){
    
    .container .wrap{flex-direction:column;}

    .container .wrap  .titlearea{text-align:center;}
    .container .wrap  .titlearea >.title{font-size:6vh}
    .container .wrap  .titlearea >.desc{font-size:3vh}

    .container .wrap .loginwrap{width:auto;}
    .container .wrap .loginwrap .loginbox{box-shadow:none;border:none;}
    .container .wrap .each{width:auto;margin:0}

    .footer{height:10vh;font-size:2vh}

}