.box_main{
    width:100rpx;
    height:100rpx;
    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;
}

.box_isopen{
    width: 420rpx;
}

.box_main .dian{
    text-align: center;
    width:100rpx;
    height:100rpx;  
    color: #ffff;
    font-size: 70rpx;
    background: none;
}

.box_main .dian image{
   width:75rpx; height:30rpx;margin-top:36rpx;
}

.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:100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    vertical-align: top;
}

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