.box_main{
    width:80rpx;
    height:80rpx;
    background:#272636;
    transition:width 0.8s;
    -moz-transition:width 0.8s; /* Firefox 4 */
    -webkit-transition:width 0.8s; /* Safari and Chrome */
    -o-transition:width 0.8s; /* Opera */
    border-radius:50rpx ;
    position: fixed;
    right: 10rpx;
    bottom:300rpx;
    overflow: hidden;
    z-index: 999999

}

.box_isopen{
    width: 420rpx;
}

.box_main .dian{
  text-align: center;
width: 50rpx;
height: 50rpx;
color: #ffff;
font-size: 50rpx;
background: none;
line-height: 78rpx;


}

.box_main .dian image{
  width: 60rpx;
height: 20rpx;



}

.box_main.box_isopen  .dian{
    display: none;
}

.box_main .cl_list{
    display: none;
}

.box_main.box_isopen  .cl_list{
    display: block;
    margin-left: 20rpx;
}

.box_main .cl_list .item{
    display: inline-block;
    width:100rpx;
    height:80rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    vertical-align: top;
    font-size: 32rpx;

}

.box_main .cl_list .item.big{
  font-size: 70rpx;
line-height: 70rpx;

}