@charset "UTF-8";
/* 客服浮窗 */

.float{
    position: fixed;
    width: 1.6rem;
    top: 1rem;
    height: 2.92rem;
    right: 0.5rem;
    z-index: 2;
}
.float > .content{
    width: 1.6rem;
    height: 2.92rem;
    padding: 0.15rem 0 0.16rem;
    background-image: url("/index-float/img/float-service-bg.png");
    background-repeat: no-repeat;
    background-position: 1.33rem 0;
    background-size: 0.1rem auto;
}
.float > .content > div{
    display: flex;
    height: 33.33%;
}
.float > .content > div > .content{
    position: relative;
    width: 0.55rem;
    height: 0.45rem;
}
.float > .content > div > .content:hover{
    width: 100%;
    height: 100%;
}
.float > .content > div > .content > .title{
    position: absolute;
    color: white;
    font-size: 0.16rem;
    writing-mode: vertical-lr;
    width: 0.24rem;
    opacity: 0;
    height: 0.87rem;
    right: 1.55rem;
    text-align: center;
}
.float > .content > div > .content:hover > .title{
    opacity: 1;
}
.float > .content > div > .content > .code{
    position: absolute;
    opacity: 0;
    background-image: url("/index-float/img/code-bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    transition: opacity 0.3s;
}
.float > .content > div > .content:hover > .code{
    width: 0.965rem;
    height: 0.87rem;
    right: 0.55rem;
    opacity: 1;
    padding: 0.04rem 0 0 0.04rem;
}
.float > .content > div > .content > .code > img{
    width: 0;
    height: 0.785rem;
}
.float > .content > div > .content:hover > .code > img{
    width: 0.785rem;
    height: 0.785rem;
}
.float > .content > div > .content > .icon{
    width: 0.45rem;
    height: 0.45rem;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 100%;
    transition: background-image 0.3s;
}
.float > .content > .qq-service > .content > .icon{
    background-image: url("/index-float/img/qq-service.png");
}
.float > .content > .qq > .content > .icon{
    background-image: url("/index-float/img/qq.png");
}
.float > .content > .vx > .content > .icon{
    background-image: url("/index-float/img/vx.png");
}
.float > .content > .qq-service:hover > .content > .icon{
    background-image: url("/index-float/img/qq-service-active.png");
}
.float > .content > .qq:hover > .content > .icon{
    background-image: url("/index-float/img/qq-active.png");
}
.float > .content > .vx:hover > .content > .icon{
    background-image: url("/index-float/img/vx-active.png");
}