/* ===========================
   外交学院统一身份认证平台
   style.css
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
}

body{
    font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
    overflow:hidden;
}

/* -------------------------
   背景
--------------------------*/

.background{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            rgba(80,0,0,.45),
            rgba(80,0,0,.45)
        ),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1600&auto=format&fit=crop");

    background-size:cover;
    background-position:center;

    filter:blur(2px);

    transform:scale(1.05);

    z-index:-2;

}

/* -------------------------
   登录容器
--------------------------*/

.login-container{

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;

}

/* -------------------------
   标题
--------------------------*/

.login-header{

    text-align:center;

    color:white;

    margin-bottom:35px;

}

.login-header h1{

    font-size:42px;

    letter-spacing:4px;

    font-weight:700;

}

.login-header h2{

    margin-top:10px;

    font-size:24px;

    font-weight:500;

}

.login-header p{

    margin-top:12px;

    opacity:.9;

    font-size:14px;

}

/* -------------------------
   登录框
--------------------------*/

.login-box{

    width:430px;

    background:rgba(255,255,255,.95);

    border-radius:14px;

    padding:45px;

    box-shadow:

        0 20px 50px rgba(0,0,0,.25);

    backdrop-filter:blur(15px);

}

.login-box h3{

    color:#8b0000;

    text-align:center;

    margin-bottom:30px;

    font-size:24px;

}

/* -------------------------
   输入框
--------------------------*/

.input-group{

    margin-bottom:22px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    color:#555;

    font-size:15px;

}

.input-group input{

    width:100%;

    padding:13px 15px;

    border:1px solid #cccccc;

    border-radius:6px;

    font-size:15px;

    transition:.25s;

    outline:none;

}

.input-group input:focus{

    border-color:#8b0000;

    box-shadow:

        0 0 0 3px rgba(139,0,0,.12);

}

/* -------------------------
   登录按钮
--------------------------*/

#loginBtn{

    width:100%;

    margin-top:10px;

    background:#8b0000;

    color:white;

    border:none;

    padding:14px;

    border-radius:6px;

    font-size:17px;

    cursor:pointer;

    transition:.25s;

}

#loginBtn:hover{

    background:#a40000;

    transform:translateY(-1px);

}

#loginBtn:active{

    transform:scale(.98);

}

/* -------------------------
   错误信息
--------------------------*/

#error-message{

    color:#d60000;

    font-size:14px;

    height:22px;

    margin-top:-8px;

    margin-bottom:8px;

}

/* -------------------------
   底部版权
--------------------------*/

.copyright{

    margin-top:35px;

    color:white;

    text-align:center;

    line-height:1.8;

    font-size:13px;

    opacity:.85;

}

/* -------------------------
   Loading 页面
--------------------------*/

#loading-screen{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:white;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:9999;

}

.loader{

    width:60px;

    height:60px;

    border-radius:50%;

    border:6px solid #dddddd;

    border-top:6px solid #8b0000;

    animation:spin 1s linear infinite;

}

#loading-screen h2{

    margin-top:28px;

    color:#8b0000;

}

#loading-screen p{

    margin-top:10px;

    color:#777;

}

/* -------------------------
   动画
--------------------------*/

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* -------------------------
   手机适配
--------------------------*/

@media(max-width:520px){

    .login-box{

        width:100%;

        padding:30px;

    }

    .login-header h1{

        font-size:30px;

    }

    .login-header h2{

        font-size:18px;

    }

}