*{margin: 0;padding: 0;}

.box{/* margin: 40px 0; *//* position: relative; */}

.change-type {

    min-width: 40px;

    min-height: 60px;

    position: fixed;

    z-index: 20;

    right: -45px;

    bottom: 60%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    /* width: 60px; */

    /* opacity: 0; */

    /* background: #fff; */

    background-color: rgba(253, 253, 253, 0);

}



.change-type .type-left {

    width: 0;

    background: transparent;

    height: 230px;

   

  

    transition: width 0.4s;

    -moz-transition: width 0.4s;

    -webkit-transition: width 0.4s;

    -o-transition: width 0.4s;

}

.change-type .showListType {

    width: 230px;

    transition: width 0.4s;

    -moz-transition: width 0.4s;

    -webkit-transition: width 0.4s;

    -o-transition: width 0.4s;

    border-radius: 50%;

    right: -160px;

    position: relative;

    top: -70px;

    background: url(../images/QQ2.png)no-repeat left;

    -webkit-background-size: 50% 50%;

            background-size: 50%;

}

.change-type .type-left ul li {

    line-height: 40px;

    height: 77px;

    text-align: left;

    width: 100%;

    position: relative;

    cursor: pointer;

 

}



 





.change-type .type-left ul li a {

    display:block;

    width:0;

    position: absolute;

    left: -160px;

    top: 0;

    z-index: 999;

    color: #333;

    font-size: 18px;

    overflow:hidden;

    font-weight: 900;

}



.change-type .type-left ul li:hover a {



    width:155px;

}



.change-type .type-left ul li a img {

    

  width:140px;

  

}







.change-type .type-left ul li span {

    display: block;

    position: absolute;

    width: 0;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 8;

    overflow: hidden;

    transition: width 0.5s;

    -moz-transition: width 0.5s;

    -webkit-transition: width 0.5s;

    -o-transition: width 0.5s;

}

.change-type .type-left ul li:hover span {

    transition: width 0.5s;

    -moz-transition: width 0.5s;

    -webkit-transition: width 0.5s;

    -o-transition: width 0.5s;

}





.change-type .type-right {

    width: 90px;

    /* background: #121213; */

    height: 90px;

    overflow: hidden;

    /* box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.5); */

    border-top-right-radius: 5px;

    border-bottom-right-radius: 5px;

    display: table;

    border-radius: 50%;

    padding-right: 50px;

    z-index: 99;

    /* top: 20px; */

    background: url("../images/QQ1.png")no-repeat left;

    padding-left: 10px;

}

.change-type .type-right p {

    text-align: center;

    padding: 0 5px;

    color: #fff;

    display: table-cell;

    vertical-align: middle;

    cursor: pointer;

    line-height: 35px;

    /* margin-left: 220px; */

    font-size: 15px;

}s