.panel-left {
    background-color: #f6f6f6;
}
.jinsom-mobile-left-bar-a-header {
    background-color: var(--jinsom-color);
    height: 62vw;
    position: relative;
    overflow: hidden;
}
.jinsom-mobile-left-bar-a-header .avatarimg {
    width: 18vw;
    height: 18vw;
    margin: 6vw auto 0;
    position: relative;
}
.jinsom-mobile-left-bar-a-header .avatarimg img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: none;
    padding: 1vw;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 18%);
}
.jinsom-mobile-left-bar-a-header .avatarimg>i {
    bottom: 0vw;
    right: 0.5vw;
}
.jinsom-mobile-left-bar-a-header .had-login {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 1;
}
.jinsom-mobile-left-bar-a-header .had-login .number {
    display: flex;
    margin-top: 2vw;
    text-shadow: 0 0 4px rgb(0 0 0 / 50%);
}
.jinsom-mobile-left-bar-a-header .had-login .number li {
    flex: 1;
    text-align: center;
}
.jinsom-mobile-left-bar-a-header .had-login .desc {
    font-size: 3vw;
    margin: 4vw;
    color: #f1f1f1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.jinsom-mobile-left-bar-a-header .had-login .number p {
    font-size: 3vw;
}
.jinsom-mobile-left-bar-a-header .had-login .nickname {
    margin-top: 3vw;
}
.jinsom-mobile-left-bar-a-header .no-login {
    width: 60%;
    margin: auto;
    display: flex;
    margin-top: 12vw;
}
.jinsom-mobile-left-bar-a-header .no-login>span {
    flex: 1;
    text-align: center;
    color: #fff;
    background-color: rgb(255 255 255 / 18%);
    padding: 1vw;
    border-radius: 1vw;
    border: 2px solid rgb(255 255 255 / 18%);
}
.jinsom-mobile-left-bar-a-header .no-login>span.login {
    margin-right: 4vw;
}
.jinsom-mobile-left-bar-a-header-hr {
    position: absolute;
    bottom: -10vw;
}
.jinsom-mobile-left-bar-a-header-hr>div {
    background: url(a.png) repeat-x 0 bottom;
    position: absolute;
    left: 0;
    width: 1500px;
    background-size: 500px 75px;
    height: 25vw;
    margin-top: -25vw;
}
.jinsom-mobile-left-bar-a-header-hr.animation>div {
    animation: hr-animation-a 100s linear 0s infinite alternate;
}
.jinsom-mobile-left-bar-a-header-hr>div:nth-child(2n) {
    width: 1500px;
    background-size: 600px 70px;
    background-image: url(b.png);
    left: -100px;
}
.jinsom-mobile-left-bar-a-header-hr.animation>div:nth-child(2n) {
    animation: hr-animation-b 30s linear 0s infinite alternate;
}
.jinsom-mobile-left-bar-a-box {
    margin: 4vw;
    background-color: #fff;
    padding: 2vw 3vw;
    box-sizing: border-box;
    border: 1px solid #efefef;
    border-radius: 2vw;
}
.jinsom-mobile-left-bar-a-box li>a {
    display: flex;
    line-height: 11vw;
    width: calc(100% - 2vw);
    align-items: center;
    margin-left: 2vw;
}
.jinsom-mobile-left-bar-a-box li i {
    color: #bbb;
    font-size: 4vw;
}
.jinsom-mobile-left-bar-a-box li .name {
    flex: 1;
    margin-left: 2vw;
    font-size: 3.8vw;
    color: #202020;
}
.jinsom-mobile-left-bar-a-box li .right-icon i {
    font-size: 3vw;
}
.no-login .jinsom-mobile-left-bar-a-header .avatarimg {
    margin-top: 8vw;
}
@keyframes hr-animation-a{
    0%   {left:0px; top:0px;}
    50%  {left:-1500px; top:0;}
    100% {left:0px; top:0px;}
}
@keyframes hr-animation-b{
    0%   {left:0px; top:0px;}
    50%  {left:-1000px; top:0;}
    100% {left:0px; top:0px;}
}