/* DaTouWang URL: www.datouwang.com */
* {
  padding: 0;
  margin: 0;
}
#kefu {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
  width: 60px;
  height: 60px;
}
#kefu .topBtn {
  width: 60px;
  height: 60px;
  background-color: #f2f2f2;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  -webkit-animation: wobble 250ms  infinite;
  animation: wobble 250ms  infinite;
  background-image: url('../image/logo.png');
}
#kefu .topBtn:active {
  background: #ddd;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-image: url('../image/logo.png');
}
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.8;
  }
  30% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0.9;
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    opacity: 1;
  }
  85% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    opacity: 0.9;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.8;
  }
  30% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0.9;
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    opacity: 1;
  }
  85% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    opacity: 0.9;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
}
#kefu span {
  width: 60px;
  height: 60px;
  background-color: #f2f2f2;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
}
#kefu span.wechat {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 100ms linear;
  transition: all 100ms linear;
  z-index: -1;
}
#kefu span.wechat:hover .eweima {
  display: block;
}
#kefu span.wechat .eweima {
  position: absolute;
  right: 0;
  bottom: 70px;
  padding: 10px;
  background: rgba(163, 163, 163, 0.8);
  width: 120px;
  height: 150px;
}
#kefu span.wechat .eweima img {
  width: 120px;
  height: 120px;
  display: block;
}
#kefu span.wechat .eweima small {
  padding-top: 10px;
  font-style: normal;
  font-style: 14px;
  text-align: center;
  color: #fff;
  display: block;
}
#kefu span.qq {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  z-index: -1;
}
#kefu span.other {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  z-index: -1;
}
#kefu span.other:hover .tel {
  display: block;
}
#kefu span.other .tel {
  position: absolute;
  right: 70px;
  bottom: 0;
  width: 120px;
  height: 50px;
  padding: 10px 10px 0 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 14px;
}
#kefu span.other .tel dt {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
#kefu span.other .tel dd {
  font-size: 14px;
}
#kefu .eweima,
#kefu .tel {
  display: none;
}
#showKfList:checked + label {
  background: #ddd;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-image: url('../image/logo.png');
}
#showKfList:checked ~ span.wechat {
  -webkit-transform: translate(0, -70px);
  transform: translate(0, -70px);
  background-color: #3cb035;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20t%3D%221575461686978%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%221208%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M664.250054%20368.541681c10.015098%200%2019.892049%200.732687%2029.67281%201.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083%200-308.085774%20114.232694-308.085774%20259.274068%200%2083.708494%2046.165436%20152.460344%20123.281791%20205.78483l-30.80868%2091.730191%20107.688651-53.455469c38.558178%207.53665%2069.459978%2015.308661%20107.924012%2015.308661%209.66308%200%2019.230993-0.470721%2028.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693%20476.632491%20517.908058%20368.541681%20664.250054%20368.541681zM498.62897%20285.87389c23.200398%200%2038.557154%2015.120372%2038.557154%2038.061874%200%2022.846334-15.356756%2038.156018-38.557154%2038.156018-23.107277%200-46.260603-15.309684-46.260603-38.156018C452.368366%20300.994262%20475.522716%20285.87389%20498.62897%20285.87389zM283.016307%20362.090758c-23.107277%200-46.402843-15.309684-46.402843-38.156018%200-22.941502%2023.295566-38.061874%2046.402843-38.061874%2023.081695%200%2038.46301%2015.120372%2038.46301%2038.061874C321.479317%20346.782098%20306.098002%20362.090758%20283.016307%20362.090758zM945.448458%20606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838%200-262.015505%2099.348706-262.015505%20221.236753%200%20122.06508%20115.437126%20221.200938%20262.015505%20221.200938%2030.66644%200%2061.617359-7.609305%2092.423993-15.262612l84.513836%2045.786813-23.178909-76.17082C899.379213%20735.776599%20945.448458%20674.90216%20945.448458%20606.151333zM598.803483%20567.994292c-15.332197%200-30.807656-15.096836-30.807656-30.501688%200-15.190981%2015.47546-30.477129%2030.807656-30.477129%2023.295566%200%2038.558178%2015.286148%2038.558178%2030.477129C637.361661%20552.897456%20622.099049%20567.994292%20598.803483%20567.994292zM768.25071%20567.994292c-15.213493%200-30.594809-15.096836-30.594809-30.501688%200-15.190981%2015.381315-30.477129%2030.594809-30.477129%2023.107277%200%2038.558178%2015.286148%2038.558178%2030.477129C806.808888%20552.897456%20791.357987%20567.994292%20768.25071%20567.994292z%22%20p-id%3D%221209%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
#showKfList:checked ~ span.qq {
  -webkit-transform: translate(-70px, -70px);
  transform: translate(-70px, -70px);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-image: url('../image/logo.png');
}
#showKfList:checked ~ span.other {
  -webkit-transform: translate(-70px, 0);
  transform: translate(-70px, 0);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-image: url('../image/20.008_61498.png');
}
#showKfList {
  width: 60px;
  height: 60px;
  display: none;
}