#wrap{
   width:100%;
   height:100%;
   margin:auto;
   background: url(../img/login_view_bg.jpg) no-repeat top center;
   background-size:cover
}

@media all and (min-width:1px) and (max-width:500px) {
   #wrap{
      background: url(../img/login_view_bg_m.jpg) no-repeat bottom center;
      background-size:cover;
   }
}

#container{
    position: relative;
   width:100%;
   height:100%;
   text-align: center;
}

.content{
   position: relative;
   max-width:1400px;
   width:100%;
   min-height:100%;
   margin:auto;
}


/*** login ***/
.login-form{
   margin: auto;
   overflow: hidden;
   position: relative;
   background: #fff;
   padding: 95px 80px 95px 80px;
   border-radius: 30px;
   box-shadow: 0px 0px 20px rgb(49 49 103 / 10%);
}

.login-form .title{
   text-align:center;
   margin-bottom:15px;
}

.login-form .title .logo{
   font-weight:bold;
   color:#3a3a3a;
   background: url(../img/nifs-logo.png) no-repeat 50% 0;
   padding-top: 95px;
   background-size: 198px;
}

.login-form .title span{
   font-size:14px;
   display:block;
   margin:10px 0;
   color:#888;
   font-weight: 300;
   letter-spacing: 1px;
}

.login-form input{
    width:100%;
    height:54px;
   border:0;
   -webkit-border-radius:54px;
   -ms-border-radius:54px;
   -moz-border-radius:54px;
   border-radius:8px;
   border: 1px solid #ddd;
   padding:10px;
   outline: none; border:2px solid #9898ee;
}
.login-form input:focus {
   box-shadow: 0px 0px 10px rgb(49 49 103 / 15%);
}

.login-form label{
   color:#3a3a3a
}

.login-form .login-input{
    padding:20px 0px 0px 0px;
    text-align:left
}

.login-form .login-input .ckdbox{
   padding-left:15px
}

.login-form .login-input .ckdbox input {width:20px; height:20px;}
.login-form .login-input .ckdbox label {font-size: 14px;}

.login-form .login-input ul{
    margin-bottom:10px
}

.login-form .login-btn{
    text-align:center;
    width:100%;
   margin: 35px auto 0px auto;
}

.login-form .login-btn a{
    display:inline-block;
   height:54px;
   line-height:54px;
   -webkit-border-radius:54px;
   -ms-border-radius:54px;
   -moz-border-radius:54px;
   border-radius:54px;
    background:#4b4bb0;
    color:#fff;
   font-size:17px;
   font-weight:bold;
   flex:1;
   width: 120px;
}
.login-form .login-btn a.btn_gray {background: #e7e7e7; color:#000;}

#loginForm{height:100%}
.login-form .joinus{
   margin-top:30px;
}

.login-form .joinus span{
   color:#fff
}

.login-form .joinus .joinbtn{
   display:inline-block;
   margin-left:10px;
   font-size:17px;
   color:#fff;
   text-decoration: underline;
   font-weight:bold
}

.login-footer{
   width:100%;
   position:absolute;
   left:50%;
   transform: translateX(-50%);
   bottom:30px;
   color:#7b7b7b;
   font-size:12px;
   line-height:18px;
   letter-spacing: 0.5px;
}

.login_info {
    color: #4b4bb0;
    font-size: 14px;
    text-align: right;
 }
 .login_info:before {
   content: "\f06a";
   display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
 }


 @media screen and (max-width: 670px) {
   .content {
        padding: 0;
    }
    .login-form {
      width:90%;
      padding: 65px 40px 65px 40px;
   }
   .login-form .title .logo {
      background-size: 150px;
      padding-top: 75px;
      line-height: 1.2;
   }
}