/*右侧漂浮替换样式*/
 .im {
     position: fixed;
     right: 2px;
     top: auto;
     bottom: 50px;
     z-index: 11;
 }

 .im-l {
     color: #fff;
     width: 32px;
     height: 60px;
     cursor: pointer;
     background-color: var(--im-bg-color);
     ;
     box-shadow: 0 0 8px #eaf0f6;
     border-radius: 4px 0px 0px 4px;
     display: block;
     text-align: center;
     line-height: 60px;
     float: left;
 }

 .im-l i {
     font-size: 20px;
 }

 #select {
     display: none;
 }

 .im .box {
     float: right;
     width: 100px;
     background-color: var(--im-bg-color);
     ;
     border-radius: 0 4px 4px 4px;
     display: none;
 }

 .im .box ul {
     background-color: #fff;
     list-style-type: none;
     margin: 5px;
     padding: 15px 0 1px 0;
 }

 .im .box ul li {
     overflow: hidden;
     text-align: center;
     margin-bottom: 15px;
 }

 .im .box ul li a {
     text-decoration: none;
     display: block;
 }

 .im .box ul li a span {
     display: block;
     font-size: 12px;
     font-weight: normal;
     font-family: Arial;
     color: #666;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
 }

 .im .box ul li i {
     font-size: 24px;
     color: #f39d22;
 }

 .im .box ul li a:hover i {
     color: #343537;
 }

 #select:checked+.box {
     display: block;
 }

 @media screen and (min-width:768px) {
     .im {
         width: 132px;
         position: fixed;
         right: -100px;
         top: 250px;
         transition: right 0.5s;
         bottom: auto;
         z-index: 11;
     }

     .im:hover {
         right: 0;
     }

     .im .box {
         position: absolute;
         display: block;
         width: 100px;
         right: 0;
         top: 0;
     }
 }