@charset "UTF-8";
.aside-nav {
    position: fixed;
    right: 1.3rem;
    bottom: 15%;
    display: none;
}

.aside-nav .el-menu {
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    list-style: none !important; 
}

.aside-nav .el-menu-item {
    height: auto;
    padding: 0 !important;
    margin-bottom: .1rem;
}

.aside-nav .list {
    position: relative;
    width: 3.1rem;
    height: 3.1rem;
    background-size: contain;
    transition: all .3s ease-in;
}

.aside-nav .card {
    opacity: 0;
    position: absolute;
    right: 3.2rem;
    top: 0;
    z-index: -1;
    padding: .4rem 1.3rem !important;
    border-radius: 0px;
    transition: all .3s ease-in;
}

.aside-nav .card div {
    padding: 0 !important;
}

.aside-nav .card div div {
    line-height: 1.8rem;
}

.aside-nav .card div div span {
    margin-left: .3rem;
}

.aside-nav .wechat-card {
    padding: .6rem !important;
    text-align: center;
}

.aside-nav .wechat-card span {
    display: block;
    margin-top: .4rem;
    font-family: PingFangSC-Regular;
    font-size: 0.9rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .9rem;
    letter-spacing: 0rem;
    color: #666666;
}

.aside-nav .QRcode-card {
    opacity: 0;
    /*top: -200%;*/
}
.aside-nav .qq-card {
    padding: 1.3rem !important;
}
.aside-nav .contact-card {
    padding: 1.2rem !important;
}
.aside-nav .contact-card  div {
    line-height: .9rem;
}

.aside-nav .qq {
    background-image: url("../images/asideNav/default-qq.png");
}

.aside-nav .qq:hover {
    background-image: url("../images/asideNav/select-qq.png");
}

.aside-nav .qq:hover+.qq-card {
    opacity: 1;
    z-index: 10;
}

.qq-card:hover {
    opacity: 1 !important;
    z-index: 10;
}
.qq-card:hover span {
    color: #1d38a0;
}

.aside-nav .wechat {
    background-image: url("../images/asideNav/default-wechat.png");
}

.aside-nav .wechat:hover {
    background-image: url("../images/asideNav/select-wechat.png");
}

.aside-nav .wechat:hover+.wechat-card {
    opacity: 1;
    z-index: 10;
}

.wechat-card:hover {
    opacity: 1 !important;
    z-index: 10;
}

.aside-nav .contact {
    background-image: url("../images/asideNav/default-contact.png");
}

.aside-nav .contact:hover {
    background-image: url("../images/asideNav/select-contact.png");
}

.aside-nav .contact:hover+.contact-card {
    opacity: 1;
    z-index: 10;
}

.aside-nav .contact-card:hover {
    opacity: 1 !important;
    z-index: 10;
}
.aside-nav .contact-card:hover span {
    color: #1d38a0;
}

.aside-nav .QRcode {
    background-image: url("../images/asideNav/default-QRcode.png");
}

.aside-nav .QRcode:hover {
    background-image: url("../images/asideNav/select-QRcode.png");
}

.aside-nav .QRcode:hover+.QRcode-card {
    opacity: 1;
    z-index: 10;
}

.aside-nav .QRcode-card:hover {
    opacity: 1 !important;
    z-index: 10;
}

.aside-nav .back-top {
    background-image: url("../images/asideNav/default-backtop.png");
}

.aside-nav .back-top:hover {
    background-image: url("../images/asideNav/select-backtop.png");
}