@charset "utf-8";
/* CSS Document */
/* 超小屏幕（小于576px）布局容器的宽度为100% */
@media screen and (max-width:575px){
    .container{
        width:100%;
    }
    /*member*/
    .user-info{
        width:100%;
        height:auto;
        margin:5px auto;
        padding:20px;
        background:var(--backgroundColor);
        overflow:hidden;
    }
    .user-info .avatar{
        width:145px;
        height:100px;
        margin:0 auto;
        position:relative;
    }
    .user-border{
        width:30px;
        height:80%;
        border:10px solid var(--redColor);
        border-right:none;
        position:absolute;
        left:0;
        top:10%;
        bottom:10%;
    }
    /*.user-topline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        top:10px;
    }
    .user-bottomline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        bottom:10px;
    }*/
    .user-blackblock{
        width:40px;
        height:calc(80% - 20px);
        background:var(--blackColor);
        position:absolute;
        left:10px;
        top:calc(10% + 10px);
        bottom:calc(10% + 10px);
        z-index:3;
    }
    .user-info .avatar img{
        width:100px;
        height:100px;
        display:block;
        position:absolute;
        left:45px;
        top:0;
        bottom:0;
        z-index:2;
    }
    .user-info h3{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:25px;
        color:var(--titleColor);
        font-weight:bold;
        text-align:center;
        margin:0;
        overflow:hidden;
    }
    .user-intro{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:center;
        padding:20px 0 0;
        overflow:hidden;
    }
    .user-intro p{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
        padding:0 0 10px;
        overflow:hidden;
    }
    .login{
        width:100%;
        height:auto;
        background:var(--backgroundColor);
        margin:5px auto;
        padding:20px;
    }
    .login-container{
        height:auto;
        margin:30px auto 0;
    }
    .login h4{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        text-align:center;
        margin:0 auto 2rem;
    }
    .login .login-avatar{
        width:50px;
        height:50px;
        background:url('../img/icon_login_avatar.png') center center no-repeat;
        background-size:50px 50px;
        margin:0 auto 2rem;
    }
    .login-item{
        width:100%;
        height:4rem;
        margin:0 0 5px;
        padding:0;
        position:relative;
    }
    .login-item input.login-item-fontsize{
        width:100%;
        height:4rem;
        line-height:3.8rem;
        font-size:1.6rem;
        color:var(--lightColor);
        background:var(--deepColor);
        border:0.1rem solid var(--deepColor);
        padding:0 5px;
    }
    .login-item span.captcha{
        width:auto;
        height:3.8rem;
        position:absolute;
        right:1px;
        top:0;
        bottom:0;
        z-index:2;
    }
    .login-item span.captcha img{
        width:auto;
        height:3.8rem;
    }
    .login-btn{
        width:100%;
        height:auto;
        text-align:center;
        margin:3rem 0 5rem;
    }
    .login-btn .login-btn-fontsize{
        font-size:1.6rem;
    }
    .member-menu{
        width:100%;
        height:auto;
        background:var(--backgroundColor);
        display:block;
        margin:5px auto;
        padding:0 15px;
    }
    .member-menu a{
        width:auto;
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.6rem;
        color:var(--lightColor);
        text-align:center;
        display:inline-block;
        float:left;
        padding:0 5px;
    }
    .member-edit{
        width:100%;
        height:auto;
        background:var(--backgroundColor);
        display:block;
        margin:0 auto 5px;
        padding:20px 20px 50px;
    }
    .member-edit h2{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        border-bottom:1px dashed var(--lightColor);;
        margin-bottom:2.5rem;
        padding-bottom:5px;
    }
    .member-edit .avatar{
        width:100%;
        height:auto;
        margin-bottom:25px;
        text-align:center;
    }
    .avatar-img{
        width:100px;
        height:100px;
        display:block;
        text-align:center;
        margin:0 auto 10px;
    }
    .avatar-img img{
        width:100px;
        height:100px;
        display:block;
    }
    .member-edit .avatar .upload-avatar{
        width:100px;
        height:auto;
        text-align:center;
        margin:0 auto 10px;
    }
    .member-edit .avatar .upload-avatar input{
    
    }
    .member-edit-item{
        margin:0 0 10px;
    }
    .member-edit label,.member-edit label{
        height:32px;
        line-height:32px;
        font-size:14px;
        color:var(--lightColor);
        display:inline-block;
        margin:0;
        padding:0;
    }
    .disable-username{
        color:var(--lightColor);
        margin:0;
        padding:0;
    }
    .member-edit input{
        height:3.2rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--lightColor);
        border:0.1rem solid var(--deepColor);
        background:var(--deepColor);
        padding:0 0 0 5px;
        display:inline-block;
    }
    .member-edit textarea{
        height:9.2rem;
        line-height:3px;
        font-size:14px;
        color:var(--lightColor);
        border:1px solid var(--deepColor);
        background:var(--deepColor);
        padding:0 0 0 5px;
        display:inline-block;
    }
    .member-edit-btn{
        width:100%;
        height:auto;
        margin:0;
        padding:0;
    }
    .member-edit-fontsize{
        font-size:1.6rem;
        margin:0;
        padding:0;
    }
}
/* 小屏幕（大于等于576px）布局容器的宽度为540px */
@media screen and (min-width:576px){
    .containner{
        width:540px;
    }
    /*member*/
    .user-info{
        width:100%;
        height:auto;
        margin:5px auto;
        padding:20px;
        background:var(--backgroundColor);
        overflow:hidden;
    }
    .user-info .avatar{
        width:145px;
        height:100px;
        margin:0 auto;
        position:relative;
    }
    .user-border{
        width:30px;
        height:80%;
        border:10px solid var(--redColor);
        border-right:none;
        position:absolute;
        left:0;
        top:10%;
        bottom:10%;
    }
    /*.user-topline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        top:10px;
    }
    .user-bottomline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        bottom:10px;
    }*/
    .user-blackblock{
        width:40px;
        height:calc(80% - 20px);
        background:var(--blackColor);
        position:absolute;
        left:10px;
        top:calc(10% + 10px);
        bottom:calc(10% + 10px);
        z-index:3;
    }
    .user-info .avatar img{
        width:100px;
        height:100px;
        display:block;
        position:absolute;
        left:45px;
        top:0;
        bottom:0;
        z-index:2;
    }
    .user-info h3{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:25px;
        color:var(--titleColor);
        font-weight:bold;
        text-align:center;
        margin:0;
        overflow:hidden;
    }
    .user-intro{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:center;
        padding:20px 0 0;
        overflow:hidden;
    }
    .user-intro p{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
        padding:0 0 10px;
        overflow:hidden;
    }
    .login{
        width:100%;
        height:auto;
        background:var(--backgroundColor);
        margin:5px auto;
        padding:20px;
    }
    .login-container{
        height:auto;
        margin:30px auto 0;
    }
    .login h4{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:20px;
        color:var(--titleColor);
        font-weight:bold;
        text-align:center;
        margin:0 auto 20px;
    }
    .login .login-avatar{
        width:50px;
        height:50px;
        background:url('../img/icon_login_avatar.png') center center no-repeat;
        background-size:50px 50px;
        margin:0 auto 20px;
    }
    .login-item{
        width:100%;
        height:40px;
        margin:0 0 5px;
        padding:0;
        position:relative;
    }
    .login-item input.login-item-fontsize{
        width:100%;
        height:40px;
        line-height:38px;
        font-size:14px;
        color:var(--lightColor);
        background:var(--deepColor);
        border:1px solid var(--deepColor);
        padding:0 5px;
    }
    .login-item span.captcha{
        width:auto;
        height:38px;
        position:absolute;
        right:1px;
        top:0;
        bottom:0;
        z-index:2;
    }
    .login-item span.captcha img{
        width:auto;
        height:38px;
    }
    .login-btn{
        width:100%;
        height:auto;
        text-align:center;
        margin:30px 0 50px;
    }
    .login-btn .login-btn-fontsize{
        font-size:14px;
    }
    .member-menu{
        width:100%;
        height:auto;
        background:var(--backgroundColor);
        display:block;
        margin:5px auto;
        padding:0 15px;
    }
    .member-menu a{
        width:auto;
        height:35px;
        line-height:35px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        display:inline-block;
        float:left;
        padding:0 5px;
    }
    .member-edit{
        width:100%;
        height:auto;
        background:var(--backgroundColor);
        display:block;
        margin:0 auto 5px;
        padding:20px 20px 50px;
    }
    .member-edit h2{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:20px;
        color:var(--titleColor);
        font-weight:bold;
        border-bottom:1px dashed var(--lightColor);;
        margin-bottom:25px;
        padding-bottom:5px;
    }
    .member-edit .avatar{
        width:100%;
        height:auto;
        margin-bottom:25px;
        text-align:center;
    }
    .avatar-img{
        width:100px;
        height:100px;
        display:block;
        text-align:center;
        margin:0 auto 10px;
    }
    .avatar-img img{
        width:100px;
        height:100px;
        display:block;
    }
    .member-edit .avatar .upload-avatar{
        width:100px;
        height:auto;
        text-align:center;
        margin:0 auto 10px;
    }
    .member-edit .avatar .upload-avatar input{
    
    }
    .member-edit-item{
        margin:0 0 10px;
    }
    .member-edit label,.member-edit label{
        height:32px;
        line-height:32px;
        font-size:14px;
        color:var(--lightColor);
        display:inline-block;
        margin:0;
        padding:0;
    }
    .disable-username{
        color:var(--lightColor);
        margin:0;
        padding:0;
    }
    .member-edit input{
        height:32px;
        line-height:30px;
        font-size:14px;
        color:var(--lightColor);
        border:1px solid var(--deepColor);
        background:var(--deepColor);
        padding:0 0 0 5px;
        display:inline-block;
    }
    .member-edit textarea{
        height:92px;
        line-height:25px;
        font-size:14px;
        color:var(--lightColor);
        border:1px solid var(--deepColor);
        background:var(--deepColor);
        padding:0 0 0 5px;
        display:inline-block;
    }
    .member-edit-btn{
        width:100%;
        height:auto;
        margin:0;
        padding:0;
    }
    .member-edit-fontsize{
        font-size:1.4rem;
    }
}
/* 中等屏幕（大于等于768px）布局容器的宽度为720px */
@media screen and (min-width:768px){
    .containner{
        width:720px;
    }
}
/* 大屏幕（大于等于992px）布局容器的宽度为960px */
@media screen and (min-width:992px){
    .containner{
        width:960px;
    }
}
/* 超大屏幕（大于等于1200px）布局容器的宽度为1140px */
@media screen and (min-width:1200px){
    .containner{
        width:1140px;
    }
}