@charset "utf-8";
.section { background: #f8f2f3; }

.user-wrapper { padding: .35rem 0 .5rem; }

.user-sidebar { width: 2.6rem; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15); }

.user-info { padding: 6px .24rem .15rem; font-size: .14rem; line-height: .28rem; color: rgba(255, 255, 255, .85); background: #ba0c31; }
.user-info .user-info-name { font-size: .16rem; font-weight: 700; color: #fff; line-height: .46rem; text-align: center; }
.user-info .user-info-img { margin: 0 auto .15rem; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; }

.user-nav { padding: 0 0 .2rem; }
.user-nav li { border-bottom: 1px solid #e6e6e6; }
.user-nav li:last-child { border: none; }
.user-nav li a { display: block; padding: .16rem .1rem .16rem 13%; }
.user-nav li .icon { display: inline-block; vertical-align: middle; width: .84rem; height: .84rem; border: 1px solid #e6e6e6; border-radius: 50%; overflow: hidden; transition: all .2s; -ms-transition: all .2s; }
.user-nav li .icon i { display: block; width: 100%; height: 100%; background: no-repeat 50% 50%; }
.user-nav li .icon i.i1 { background-image: url("../images/user_icon2.png"); }
.user-nav li .icon i.i2 { background-image: url("../images/user_icon3.png"); }
.user-nav li .icon i.i3 { background-image: url("../images/user_icon4.png"); }
.user-nav li .icon i.i4 { background-image: url("../images/user_icon5.png"); }
.user-nav li .text { display: inline-block; vertical-align: middle; margin: 0 0 0 .15rem; font-size: .17rem; line-height: .42rem; color: #000; }

.user-nav li a.cur .icon, .user-nav li a:hover .icon { border-color: #ba0c31; }
.user-nav li a.cur .text, .user-nav li a:hover .text { font-weight: 700; color: #ba0c31; }

.user-main { width: calc(100% - 3rem); padding: 0 .2rem .3rem; border-top: 2px solid #ba0c31; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15) }
.user-main .position { padding: 0 0 0 38px; font-size: .18rem; font-weight: 700; line-height: .68rem; color: #000; border-bottom: 1px solid #ffabbc; background: url("../images/user_icon1.png") no-repeat 0 50%; }

.user-table { margin: .2rem 0 0; font-size: 0; }
.user-table a { color: #000; }
.user-table a:hover { color: #ba0c31; }
.user-table .th .td { font-weight: 700; line-height: .55rem; }
.user-table .td { display: inline-block; vertical-align: top; padding: 0 2%; font-size: .16rem; line-height: .44rem; color: #000; }
.user-table .td .tips { display: none; font-weight: 700; color: #000; }
.user-table .td.title { width: calc(87% - 2.7rem); }
.user-table .td.date { width: 1.5rem; text-align: center; }
.user-table .td.state { width: 1.2rem; margin: 0 0 0 13%; text-align: center; }

.user-table .tr .td.date { color: #999; } 
.user-table .tr .td.state { font-size: .15rem; color: #666; }

@media screen and (max-width: 1450px) {
    .user-table .td.title { width: calc(100% - 2.7rem); }
    .user-table .td.state { margin: 0; }
}
@media screen and (max-width: 992px) {
    .user-sidebar { display: flex; flex-wrap: wrap; width: 100%; font-size: 0; }
    .user-info { width: 250px; }
    .user-nav { display: flex; flex-wrap: wrap; align-items: center; width: calc(100% - 250px); }
    .user-nav li { width: 50%; }
    .user-nav li:nth-child(3) { border: none; }
    .user-main { width: 100%; margin: .25rem 0 0; }
}
@media screen and (max-width: 768px) {
    .user-info { width: 100%; display: flex; flex-wrap: wrap; padding-left: .14rem; padding-right: .14rem; }
    .user-info .user-info-name { width: 100%; text-align: left; padding: 0 0 0 100px; }
    .user-info .user-info-img { margin: -30px 20px 0 0; }
    .user-nav { width: 100%; }
    .user-table .th { display: none; }
    .user-table .tr { padding: .1rem 0; border-bottom: 1px dashed #ddd; }
    .user-table .tr:last-child { border: none; }
    .user-table .td { width: 100% !important; padding: 0; text-align: left !important; line-height: .3rem; }
    .user-table .td .tips { display: inline; }
    .user-table .td.title .tt1 { white-space: inherit; overflow: visible; text-overflow: clip; }
    .user-table .td.date { margin: 6px 0; }
}
@media screen and (max-width: 480px) {
    .user-nav li a { padding-left: 7%; padding-right: 7%; text-align: center; }
    .user-nav li a .text { width: 100%; margin: 0; }
}

.listNo { display: none; }
@media screen and (max-width: 768px) {
.listNo { display: inline; } .listNo2 { display: none !important; }
}