div,
p,
h4 {
    margin: 0;
    padding: 0;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

img {
    vertical-align: middle;
}

a {
    text-decoration: none;
}
#person {
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #232323;
    font-family: PingFang SC;
    background-color: #F5F7FD;
}

#person .left_my .person_right{
    display: none;
}
#person .person_right {
    position: relative;
}
/* #person .paging {
    position: absolute;
    left: 46%;
} */
.left_top{
  
    text-align: center;
    color: #232323;
    font-family: PingFang SC;
    background-color: #FFFFFF;
}
.left_my{
    background-color: #FFFFFF;
    /* height: 353px; */
}
.left_top .img_logo{
    width: 80px;
    margin: auto;
    position: relative;
}
.left_top .img_logo img:last-child {
    width: 22px;
    height: 22px;
    position: absolute;
    bottom: 3px;
    right: 0;

}
.left_top .img_logo img:first-child {
    width: 80px;
    height: 80px;
    margin-top: 41px;
    border-radius: 50%; 
}
.left_top .nickname{
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    margin-top: 10px;
}
.left_top .download_count{
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    margin-top: 10px;
    color: #CCCCCC;
}

.left_top .nickname>span{
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #CCCCCC;
    margin-top: 9px;
    line-height: 18px;
}
.left_top .date_end {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    box-sizing: border-box;
}
.left_top .date_end img{
    width: 81px;
    height: 22px;
    margin-right: 10px;
}
.left_top .date_end>div{
    font-size: 14px;
    font-weight: 500;
    color: #CCCCCC;
    line-height: 18px;
}

.left_top .person_data{
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.left_top .person_data>div{
    display: flex;
    flex-direction: column;
}
.left_top .person_data>div:last-child{
    cursor: pointer;
}
.left_top .person_data>div span:first-child{
    font-size: 18px;
    font-weight: bold;
}
.left_top .person_data>div span:last-child{
    font-size: 12px;
    font-weight: 500;
    color: #CACCD1;
  

}
.left_top .person_data .line{
    width: 1px;
    height: 25px;
    background: #DBE0EF;
    margin:auto 24px
}
/* .left_top .fabu{
    width: 220px;
    height: 40px;
    line-height: 40px;
    font-size:14px;
    font-weight: 500;
    margin:23px auto 0;
    color: #FFFFFF;
    background: #1C8EFF;
    border-radius: 4px;
    cursor: pointer;
} */
.left_top .fabu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 23px 20px 0;
}
.left_top .fabu>span{
    font-size:14px;
    height: 40px;
    display: inline-block;
    color: #FFFFFF;
    line-height: 40px;
    font-weight: 500;
    padding:0 10px;
    cursor: pointer;
    border-radius: 4px;
}
.left_top .fabu>span:first-child{
    
    background: #1C8EFF;
}
.left_top .fabu>span:nth-child(2){
   
    background: #4BAA8C;
}
.left_top .fabu>span:last-child{
   
    background: #FF9C44;
}
.left_my>ul{
   padding-top: 30px;
  
}
.left_my .toggle{
    background:#F4FAFF;
}
.left_my .toggle i{
    background: #1C8EFF;
}
.left_my>ul li{
    height: 51px;
    line-height: 51px;
    cursor: pointer;
}
.left_my>ul li i{
    display: inline-block;
    vertical-align:top;
}

@media screen and (min-width:751px){
    #person .w {
        min-width: 1000px;
        max-width: 1200px;
        margin: auto;
        display: flex;
    }
    #person .person_left {
        width: 285px;
    }
    .left_my ul{
        width: 100%;
     }
    .left_top{
        margin-bottom: 10px;
    }
    #person .left_my .person_right {
        display: none;
        
    }
    #person .w>.person_right{
        display: block;
    } 
    #person .person_right {
        width: 895px;
        margin-left: 19px;
    }
    .left_my ul li i{
        width: 3px;
        height: 51px;
        line-height: 51px;
        margin-right: 41px;

    }
    #person .left_my{
        display: block;
    }
}
@media screen and (max-width:750px){
    #person .w {
        min-width: 200px;
        max-width: 750px;
        margin: auto;
        display: flex;
    }
    #person .person_left {
        width: 100%;
    
    }
    .left_top{
        max-width: 750px;
        min-width: 200px;
        margin-bottom: 10px;
        margin:auto 10px;
    }
     #person .left_my .person_right {
        display: block;
        
    }
    #person .w>.person_right{
        display: none;
    }
    #person .person_right {
        width:100%;
    }

    .left_my ul li i{
        width: 3px;
        height: 51px;
        line-height: 51px;
        margin-right: 10px;
    }
    #person .left_my{
        display: flex;
        margin: 10px auto;
        justify-content: space-between;
        background-color:#F5F7FD ;
    }
    #person .left_my>ul{
        width: 26%; 
        height: 100%;
        margin-left: 10px;
        background-color: #fff;
    }
    #person .left_my .person_right{
        width: 66%;
        height: 100%;
        margin-right: 10px;
        background-color: #fff;
    }
}