.float {
  z-index: 25;
  position: fixed;
  bottom: 10%;
  right: 10px;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.05); }
  .float .float-item {
    width: 94px;
    height: 102px;
    background-color: #ffffff;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: width .3s; }
    .float .float-item:before {
      position: absolute;
      content: ' ';
      height: 100%;
      width: 19px;
      right: 100%; }
    .float .float-item .float-pop {
      background-color: #ffffff;
      display: none;
      position: absolute;
      z-index: -1;
      right: 100%;
      padding: 5px;
      border-radius: 6px;
      border: 1px solid var(--main-color, #e53d3d);
      transform: translateX(-18px); }
      .float .float-item .float-pop img {
        width: 144px;
        height: auto; }
      .float .float-item .float-pop div {
        padding: 12px 7px; }
        .float .float-item .float-pop div span {
          white-space: nowrap;
          color: var(--main-font-color, #333333); }
    .float .float-item svg path {
      fill: #666666; }
    .float .float-item span {
      margin-top: 12px;
      font-size: 14px;
      line-height: 18px;
      color: #666666; }
    .float .float-item:hover {
      background-color: var(--main-color, #e53d3d);
      border-color: var(--main-color, #e53d3d); }
      .float .float-item:hover svg circle {
        fill: var(--main-color, #e53d3d); }
      .float .float-item:hover svg path {
        fill: #ffffff; }
      .float .float-item:hover span {
        color: #ffffff; }
      .float .float-item:hover .float-pop {
        display: block; }
  .float > *:first-child {
    border-radius: 12px 0 0 0; }
  .float > *:last-child {
    border-radius: 0 0 0 12px; }

/*# sourceMappingURL=side.css.map */