.top i{ color:#fff!important; } .kefu{ position:fixed; z-index:999; right: 20px; top:40%; } .imgbox{ background-color: rgb(255 255 255); width: 50px; text-align:center; cursor:pointer; transition:all 0.5s cubic-bezier(.165,.84,.44,1); -webkit-transition:all 0.5s cubic-bezier(.165,.84,.44,1); position:relative; display: flex; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 10px 0; box-shadow: 0px 0px 5px rgb(0 0 0 / 10%); border-radius: 10px; height: 50px; } .kefu span{ display:block; color: #999; font-size: 12px; } .imgbox img{ display:block; margin:0 auto; margin-top:9px; max-width: 16px; } .imgbox .weixin{ position:absolute; opacity:0; margin-top:0px; height:0px; right:90px; top:30px; transition:all 0.3s cubic-bezier(.165,.84,.44,1); -webkit-transition:all 0.3s cubic-bezier(.165,.84,.44,1); box-shadow:0px 0px 10px rgba(0,0,0,0.2); } .top .imgbox{ background-color: #00429a; margin-top:5px; border:none; } .top .imgbox span{ color:#fff; } .imgbox:hover{ background-color: #8fd455; } .imgbox:hover span{ color:#fff; } .imgbox:hover .tb{ filter:brightness(100); } .ewm:hover .weixin{ display:block; height:auto; opacity:1; top:0px; } .ds{ position:absolute; z-index:-1; right: 20px; display:block; color:#fff; background-color:#fff; transition:all 0.5s cubic-bezier(.165,.84,.44,1); -webkit-transition:all 0.5s cubic-bezier(.165,.84,.44,1); line-height: 50px; padding: 0 30px; top:0; font-size: 14px; box-shadow:0px 0px 10px rgba(0,0,0,0.1); opacity:0; width: 0; white-space: pre; overflow: hidden; border-radius: 100px; } .tel:hover .ds{ opacity:1; background-color: #8fd455; right: 50px; width: max-content; } .top .imgbox svg{fill:#fff;} .kefu li:hover i svg{ fill:#fff; } .kefu i{font-size: 20px;color: #808080;line-height: 50px;} .kefu li:hover i{color:#fff;} @media only screen and (max-width: 768px){ .kefu{ display:none!important; } } .btn-primary{ background:none; }