
/*--------------------------------------------------------------
右侧悬浮 客服工具
----------------------------------------------------------------*/

.slide-bar{position:fixed;width:65px;right:10px;bottom:52%;z-index:9;background-color:#4381D9;border-radius:2px}
.slide-bar p{padding:0;margin:0;font-size:12px;line-height:1.2;color:#fff}
.slide-bar a:focus{color:#fff}
.slide-bar .slide-bar__item{width:65px;height:70px;text-align:center;position:relative;cursor:pointer;color:#fff;display:block;border-bottom:1px solid  #fff;line-height:1.8}
.slide-bar .slide-bar__item:last-child{border-bottom:none}
.slide-bar .slide-bar__item:hover{background-color:#fcab00;color:#fff}
.slide-bar .slide-bar__item:hover .slide-bar__item__ercode,.slide-bar__item:hover .slide-bar__item__tips{visibility:visible;left:-137px;opacity:1}
.slide-bar .slide-bar__item:hover .slide-bar__item__img{visibility:visible;left:-130px;opacity:1}
.slide-bar .slide-bar__item__top{display:block;line-height:50px;font-size:24px;-webkit-text-stroke:1px #fff}
.slide-bar .slide-bar__item__icon{display:block;font-size:16px;padding-top:12px}
.slide-bar img.slide-bar__item__icon{width:26px;height:auto;margin:0 auto}
.slide-bar .slide-bar__item__text{display:block;height:20px;font-size:12px}
.slide-bar .slide-bar__item__tips{width:130px;height:50px;line-height:50px;text-align:center;font-size:14px;position:absolute;z-index:1;left:-180px;color:#fff;top:0;opacity:0;visibility:hidden;background-color:#fcab00;-webkit-transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s;-o-transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s;transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s}
.slide-bar .slide-bar__item__tips:after{border-bottom:5px solid transparent;border-top:5px solid transparent;border-left:6px solid #fcab00;right:-6px;top:5px;content:"";height:0;position:absolute;top:20px;width:0;z-index:1}
.slide-bar .slide-bar__item__img{width:123px;text-align:center;font-size:14px;position:absolute;z-index:1;left:-180px;color:#fff;bottom:0;opacity:0;visibility:hidden;background:0 0;-webkit-transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s;-o-transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s;transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s;}
.slide-bar .slide-bar__item__img:after{border-bottom:5px solid transparent;border-top:5px solid transparent;border-left:6px solid #e7e7e7;right:-6px;content:"";height:0;position:absolute;bottom:20px;width:0;z-index:1}
.slide-bar .slide-bar__item.scrollup{display:none}

.slide-bar .slide-bar-title_none img.slide-bar__item__icon{width:25px}
.slide-bar .slide-bar-title_none .slide-bar__item__icon{padding-top:12px}

@media screen and (max-width:767px){
    .slide-bar .slide-bar__item,.slide-bar .slide-bar__item__tips{display:none}
    .slide-bar .slide-bar__item.scrollup{display:block;width:40px;height:40px}
    .slide-bar .slide-bar__item__top{line-height:38px}
    .slide-bar{width:40px;right:15px}
}
