#content{
    width: 1000px;
    height: 600px;
    display: flex;
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.content .left_area{
    width: 600px;
    height: 600px;
    background:url("../image/img_login@2x.png");
    background-repeat: round;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .right_area{
    width: 400px;
    height: 600px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content .login_way_con{
    margin-bottom: 67px;
}

.content .login_way_con a{
    font-size: 16px;
}

.content .input-icon{
    width: 320px;
    height: 40px;
}

.content .input-icon input{
    background-color: #ffffff;
    border-radius: 2px;
    border: solid 1px #dfe0eb;
    height: 40px;
}

.content .triggerBtn{
    font-size: 16px;
    color: #1f87f3;
    cursor: pointer;
    user-select: none;
}

.content .right_area .alert{
    width: 320px;
    background-color: rgba(238, 73, 41, 0.05);
    border-radius: 2px;
    border: solid 1px #ee4929;
    color: #2a2b2d;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

#changelag{
    width: 320px;
    height: 40px;
    border-radius: 2px;
}

#changelag .btn{
    height: 40px;
    background-color: #bdd9f5;
    border-radius: 2px;
    font-size: 16px;
}

#rememberPass{
    position: absolute;
    right: 35px;
    top: 0px;
}

#j_code{
    width: 176px;
    height: 40px;
    float: left;
    margin-right: 16px;
}

#j_captcha{
    width: 176px;
    height: 40px;
    float: left;
    margin-right: 16px;
}

#conformCodeBtn{
    width: 128px;
    height: 40px;
    border-radius: 2px;
    background-color: #bdd9f5;
}

#conformCaptchaBtn{
    width: 128px;
    height: 40px;
    border-radius: 2px;
    background-color: #bdd9f5;
    cursor: pointer;
}

#conformCodeBtn:active{
    background-color:#bdd9f5;
}

#submitBtn:active{
    background-color:#bdd9f5;
}

#telLoginBtn:active{
    background-color:#bdd9f5;
}

.content .text{
    width: 480px;
    height: 208px;
}

.content .text p{
    color: #ffffff;
    font-size: 20px;
}

.logo_img{
    width: 200px;
    height: 24px;
    position: fixed;
    left: 64px;
    top: 36px;
}

.logo_img img{
    width: 100%;
    height: 100%;
}

.applet{
    width: 98px;
    height: 32px;
    background-image: linear-gradient(45deg,
    #f0d7a3 0%,
    #efcb85 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 64px;
    top: 36px;
    cursor: pointer;
}

.applet_code{
    width: 131px;
    height: 171px;
    background-color: #ffffff;
    border-radius: 16px;
    position: fixed;
    right: 64px;
    top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*transition-duration:1s;*/
    /*transition-timing-function:linear;*/
}
.applet_code .applet_close{
    width: 23px;
    height: 23px;
    float: right;
    background-color: #5886E6;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: -7px;
    top: -5px;
    cursor: pointer;
}

.applet_code img{
    width: 100%;
    height: 100%;
}

.copyright{
    color: #9e9fa8;
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    right: 60px;
}

.triggerBtn:hover{
    color: #55A8FE;
}

#xforgerPs a:hover{
    color: #55A8FE;
}