* {
            margin: 0;
            padding: 0;
        }

        @font-face {
            font-family: 'mFont';
            src: url('../font/苹方黑体-中粗-简.ttf');
        }

        html,
        body {
            height: 100%;
        }
        html{
            font-size: 5.208333vw;
        }
        img {
            display: block;
        }

        a {
            text-decoration: none;
        }

        button {
            border: 0;
            background-color: transparent;
            outline: none;
            font-family: 'mFont';
        }

        .reset_input {
            outline: none;
            border: none;
            height: 22px;
            font-size: 16px;
            padding-left: 24px;
        }
        .input_paddingRight{
            padding-right: 290px;
        }
        .container {
            width: 100%;
            height: 100%;
            background: url('../img/1708427d170932fe06e6184e51ff1e9.jpg') left top no-repeat;
            background-size: cover;
            position: relative;
            background-color: #f0f2f5;
        }
        .container .main {
            width: 100%;
            /* clear: both; */
            display: flex;
        }
        /* .main:after{
            content: ""; 
            display: block; 
            height: 0; 
            clear: both; 
            visibility: hidden;  
            } */
        @media (min-width: 1268px){

            .container .track {
                margin-left: 4.8%;
                margin-top: 136px;
                width: 929px;
                /* height: 687px; */
                /* min-width: 662px; */
            }
            
        }
        @media (max-width: 1268px){

            .container .track {
                margin-left: 4.8%;
                margin-top: 136px;
                width: 929px;
                height: 687px;
                display: none;
                /* min-width: 662px; */
            }
            
        }
        /* .container .track {
            margin-left: 4.8%;
            margin-top: 136px;
            width: 929px;
            height: 687px;
            float: left;
        } */

        .container .track img {
            display: block;
            width: 100%;
        }
        /* .container .footer {
            position: absolute;
            bottom: 40px;
            margin-top: 30px;
            width: 100%;
            height: 64px;
        } */
        .container .footer p{
            text-align: center;
            font-size: 17px;
            line-height: 24px;
            color: #999999;
        }
        .container .footer p a{
            color: #999999;
        }
        .container .footer p:nth-of-type(1){
            margin-bottom: 16px;
        }
        /* .container .footer p:nth-of-type(2){
            margin-bottom: 16px;
        } */
        /* 拥有密码登录 */
        @media (min-width: 1268px){
            .container .footer {
                /* position: absolute; */
                /* bottom: 40px; */
                margin-top: .4rem;
                width: 100%;
                height: 64px;
            }
            .container .login_area {
                width: 515px;
                height: 6.07rem;
                border-radius: 32px;
                box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
                background-color: rgba(255, 255, 255, 1);
                margin: 136px 9.53% 0 6.2%;
                padding: 40px;
                overflow: hidden;
                min-width: 400px;
            }
            .container .login_area .title {
                font-family: 'mFont';
                color: rgba(86, 89, 90, 1);
                font-size: 35px;
                margin: .32rem 0 .42rem 0;
                text-align: center;
            }
    
            .container .login_area .username_text {
                font-family: 'mFont';
                color: rgba(22, 119, 255, 1);
                font-size: 20px;
                line-height: 28px;
                margin-bottom: .09rem;
            }
    
            .container .login_area .username_div {
                height: .6rem;
                border-bottom: 1px solid rgba(221, 221, 221, 1);
                display: flex;
                align-items: center;
                margin-bottom: .42rem;
            }
    
            .container .login_area .password_div {
                height: .6rem;
                border-bottom: 1px solid rgba(221, 221, 221, 1);
                display: flex;
                align-items: center;
            }
    
            .container .login_area .auto_login {
                height: 28px;
                margin-top: 0.45rem;
                display: flex;
                justify-content: space-between;
            }
    
            .login_area .auto_login .auto_login_left {
                height: 28px;
                display: flex;
            }
            .login_area .auto_login .auto_login_left label{
                height: 28px;
                display: flex;
            }
            .login_area .auto_login .auto_login_left input {
                height: 28px;
                width: 28px;
                display: block;
                margin-right: 16px;
            }
            .login_area .auto_login .auto_login_left span {
                display: block;
                font-size: 20px;
                line-height: 28px;
                font-family: 'mFont';
                color: rgba(153, 153, 153, 1);
            }
    
            .login_area .auto_login .auto_login_right span {
                height: 28px;
                line-height: 28px;
                font-size: 20px;
                color: rgba(22, 119, 255, 1);
                display: block;
                font-family: 'mFont';
                cursor: pointer;
            }
    
            .login_area .loginbtn_div {
                margin-top: 0.82rem;
                overflow: hidden;
            }
    
            .login_area .loginbtn_div .loginbtn {
                display: block;
                width: 100%;
                height: .61rem;
                background-color: rgba(22, 119, 255, 1);
                line-height: .61rem;
                text-align: center;
                box-shadow: 0 4px 16px 0 rgba(0, 106, 255, 0.1);
                border-radius: 4px;
                font-size: 21px;
                color: rgba(255, 255, 255, 1);
                font-family: 'mFont';
                cursor: pointer;
            }
            
        }

        @media (max-width: 1268px){
            .container .footer {
            /* position: absolute; */
            /* bottom: 40px; */
            margin-top: 30px;
            width: 100%;
            height: 64px;
        }

            .container .login_area {
                width: 515px;
                height: 607px;
                border-radius: 32px;
                box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
                background-color: rgba(255, 255, 255, 1);
                margin: 136px auto 0 auto;
                padding: 40px;
                overflow: hidden;
                min-width: 400px;
            }

            .container .login_area .title {
            font-family: 'mFont';
            color: rgba(86, 89, 90, 1);
            font-size: 35px;
            margin: 32px 0 42px 0;
            text-align: center;
        }

        .container .login_area .username_text {
            font-family: 'mFont';
            color: rgba(22, 119, 255, 1);
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 9px;
        }

        .container .login_area .username_div {
            height: 60px;
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            display: flex;
            align-items: center;
            margin-bottom: 42px;
        }

        .container .login_area .password_div {
            height: 60px;
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            display: flex;
            align-items: center;
        }

        .container .login_area .auto_login {
            height: 28px;
            margin-top: 45px;
            display: flex;
            justify-content: space-between;
        }

        .login_area .auto_login .auto_login_left {
            height: 28px;
            display: flex;
        }
        .login_area .auto_login .auto_login_left label{
            height: 28px;
            display: flex;
        }
        .login_area .auto_login .auto_login_left input {
            height: 28px;
            width: 28px;
            display: block;
            margin-right: 16px;
        }
        .login_area .auto_login .auto_login_left span {
            display: block;
            font-size: 20px;
            line-height: 28px;
            font-family: 'mFont';
            color: rgba(153, 153, 153, 1);
        }

        .login_area .auto_login .auto_login_right span {
            height: 28px;
            line-height: 28px;
            font-size: 20px;
            color: rgba(22, 119, 255, 1);
            display: block;
            font-family: 'mFont';
            cursor: pointer;
        }

        .login_area .loginbtn_div {
            margin-top: 82px;
        }

        .login_area .loginbtn_div .loginbtn {
            display: block;
            width: 100%;
            height: 61px;
            background-color: rgba(22, 119, 255, 1);
            line-height: 61px;
            text-align: center;
            box-shadow: 0 4px 16px 0 rgba(0, 106, 255, 0.1);
            border-radius: 4px;
            font-size: 21px;
            color: rgba(255, 255, 255, 1);
            font-family: 'mFont';
        }
        }

        /* 忘记密码登录 */
        @media (min-width: 1268px){

            .container .forgetpwd_area {
                width: 515px;
                height: 458px;
                border-radius: 32px;
                box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
                background-color: rgba(255, 255, 255, 1);
                margin: 136px 9.53% 0 6.2%;
                padding: 40px;
                overflow: hidden;
                display: none;
                min-width: 400px;
            }
            
        }
        @media (max-width: 1268px){

            .container .forgetpwd_area {
                width: 515px;
                height: 458px;
                border-radius: 32px;
                box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
                background-color: rgba(255, 255, 255, 1);
                margin: 136px auto 0 auto;
                padding: 40px;
                overflow: hidden;
                display: none;
                min-width: 400px;
            }

        }

        .container .forgetpwd_area .title {
            font-family: 'mFont';
            color: rgba(86, 89, 90, 1);
            font-size: 35px;
            margin: 32px 0 42px 0;
            text-align: center;
        }
        .YZM_forgetpwd{
            width: 80px;
        }
        .container .forgetpwd_area .username_text {
            font-family: 'mFont';
            color: rgba(22, 119, 255, 1);
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 9px;
        }

        .container .forgetpwd_area .username_div {
            height: 60px;
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            display: flex;
            align-items: center;
            margin-bottom: 37px;
            justify-content: space-between;
        }

        .container .forgetpwd_area .username_div .username {
            width: 3rem;
        }

        .container .forgetpwd_area .username_div .phone_tips {
            margin-right: 12px;
            color: rgba(255, 59, 48, 1);
            font-family: 'mFont';
            font-size: 16px;
        }

        .container .forgetpwd_area .password_div {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .forgetpwd_area .password_div .password_div_left {
            width: 335px;
            height: 60px;
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .forgetpwd_area .password_div .password_div_left .YZM_tips {
            margin-right: 12px;
            color: rgba(255, 59, 48, 1);
            font-family: 'mFont';
            font-size: 16px;
        }

        .forgetpwd_area .password_div .password_div_right {}

        .forgetpwd_area .password_div .password_div_right .getYZM {
            display: block;
            width: 172px;
            height: 60px;
            background-color: rgba(22, 119, 255, 1);
            border-radius: 4px;
            line-height: 60px;
            text-align: center;
            font-size: 21px;
            color: #fff;
            cursor: pointer;
        }

        .forgetpwd_area .password_div .password_div_right .gotYZM {
            width: 170px;
            height: 58px;
            border: 1px solid rgba(22, 119, 255, 1);
            background-color: rgba(255, 255, 255, 1);
            color: rgba(22, 119, 255, 1);
            border-radius: 4px;
            line-height: 60px;
            text-align: center;
            font-size: 21px;
            display: none;
        }

        .container .forgetpwd_area .next {
            height: 61px;
            margin-top: 85px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .forgetpwd_area .next .next_left .nextBtn {
             display: block;
             height: 61px;
             width: 236px;
             font-size: 21px;
             line-height: 61px;
             border-radius: 4px;
             background-color: rgba(204, 204, 204, 1);
             color: #fff;
             text-align: center;
             font-family: 'mFont';
             cursor: pointer;
         }

        .forgetpwd_area .next .next_left .getYZM {
            display: block;
            height: 61px;
            width: 236px;
            font-size: 21px;
            line-height: 61px;
            border-radius: 4px;
            background-color: rgba(22, 119, 255, 1);
            color: #fff;
            text-align: center;
            font-family: 'mFont';
            cursor: pointer;
        }

        .forgetpwd_area .next .next_right span {
            height: 28px;
            line-height: 28px;
            font-size: 20px;
            color: rgba(22, 119, 255, 1);
            display: block;
            font-family: 'mFont';
            cursor: pointer;
        }

        /* 进入修改页面 */
        @media (min-width: 1268px){

            .container .editpwd_area {
                width: 515px;
                height: 458px;
                border-radius: 32px;
                box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
                background-color: rgba(255, 255, 255, 1);
                margin: 136px 9.53% 0 6.2%;
                padding: 40px;
                overflow: hidden;
                display: none;
                min-width: 400px;
            }
            
        }
        @media (max-width: 1268px){

            .container .editpwd_area {
                width: 515px;
                height: 458px;
                border-radius: 32px;
                box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
                background-color: rgba(255, 255, 255, 1);
                margin: 136px auto 0 auto;
                padding: 40px;
                overflow: hidden;
                display: none;
                min-width: 400px;
            }
            
        }
        /* .container .editpwd_area {
            width: 515px;
            height: 458px;
            border-radius: 32px;
            box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 1);
            margin: 136px 9.53% 0 6.2%;
            padding: 40px;
            overflow: hidden;
            display: none;
            min-width: 380px;
        } */

        .container .editpwd_area .title {
            font-family: 'mFont';
            color: rgba(86, 89, 90, 1);
            font-size: 35px;
            margin: 32px 0 42px 0;
            text-align: center;
        }

        .container .editpwd_area .username_text {
            font-family: 'mFont';
            color: rgba(22, 119, 255, 1);
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 9px;
        }

        .container .editpwd_area .username_div {
            height: 60px;
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            display: flex;
            align-items: center;
            margin-bottom: 37px;
        }

        .container .editpwd_area .username_div .username {
            width: 327px;
        }

        .container .editpwd_area .tips {
            height: 60px;
            display: flex;
            display: none;
        }

        .container .editpwd_area .tips .tips_pic {
            display: flex;
            align-items: center;
        }

        .container .editpwd_area .tips .tips_pic img {
            height: 44px;
            width: 44px;
            margin: 0 20px 0 16px;
        }

        .container .editpwd_area .tips .tips_cont {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .container .editpwd_area .tips p:nth-of-type(1) {
            font-size: 16px;
            line-height: 22px;
            height: 22px;
            color: rgba(51, 51, 51, 1);
            /* font-family: 'mFont'; */
        }

        .container .editpwd_area .tips p:nth-of-type(2) {
            font-size: 16px;
            line-height: 22px;
            color: rgba(153, 153, 153, 1);
            /* font-family: 'mFont'; */
        }

        .container .editpwd_area .password_div {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(221, 221, 221, 1);
        }

        .editpwd_area .password_div .password_div_left {
            height: 60px;
            display: flex;
            align-items: center;
        }

        .editpwd_area .password_div .password_div_right {
            font-size: 16px;
            line-height: 22px;
            height: 22px;
            color: rgba(255, 59, 48, 1);
            margin-right: 12px;
            font-family: 'mFont';
        }

        .container .editpwd_area .next {
            height: 61px;
            margin-top: 85px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .editpwd_area .next .next_left .loginbtn {
            display: block;
            height: 61px;
            width: 236px;
            font-size: 21px;
            line-height: 61px;
            border-radius: 4px;
            background-color: rgba(22, 119, 255, 1);
            color: #fff;
            cursor: pointer;
        }

        .editpwd_area .next .next_right span {
            height: 28px;
            line-height: 28px;
            font-size: 20px;
            color: rgba(22, 119, 255, 1);
            display: block;
            font-family: 'mFont';
            cursor: pointer;
        }
    /* 弹窗样式 */
    #message-container {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;

        /* 采用flex弹性布局，让容器内部的所有消息可以水平居中，还能任意的调整宽度 */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #message-container .message {
        background: #fff;
        margin: 10px 0;
        padding: 0 10px;
        height: 40px;
        box-shadow: 0 0 10px 0 #eee;
        font-size: 14px;
        border-radius: 3px;

        /* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
        display: flex;
        align-items: center;
    }

    #message-container .message .text {
        color: #333;
        padding: 0 20px 0 5px;
    }

    #message-container .message .close {
        cursor: pointer;
        color: #999;
    }
    /* 给每个图标都加上不同的颜色，用来区分不同类型的消息 */
    #message-container .message .icon-info {
        color: #0482f8;
    }
    #message-container .message .icon-error {
        color: #f83504;
    }
    #message-container .message .icon-success {
        color: #06a35a;
    }
    #message-container .message .icon-warning {
        color: #ceca07;
    }
    #message-container .message .icon-loading {
        color: #0482f8;
    }
    @keyframes message-move-in {
        0% {
            transform: translateY(-100%);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    #message-container .message.move-in {
        animation: message-move-in 0.3s ease-in-out;
    }
    @keyframes message-move-out {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-100%);
        }
    }
    #message-container .message.move-out {
        animation: message-move-out 0.3s ease-in-out;
        /* 让动画结束后保持结束状态 */
        animation-fill-mode: forwards;
    }