#side_fload_01 {position: fixed;top: 0;bottom: 0;display: flex;flex-direction: column;margin:40px 0px;pointer-events: none;}
#side_fload_01[data-pos="1"] { left: 40px;justify-content: flex-start; }
#side_fload_01[data-pos="4"] { left: 40px;justify-content: center; }
#side_fload_01[data-pos="7"] { left: 40px;justify-content: flex-end; }
#side_fload_01[data-pos="3"] { right: 40px;justify-content: flex-start; }
#side_fload_01[data-pos="6"] { right: 40px;justify-content: center; }
#side_fload_01[data-pos="9"] { right: 40px;justify-content: flex-end; }

/*  */
#side_fload_01 > *{background-color: #fff; pointer-events: all;cursor: pointer;position: relative;transition: .3s;width: 55px;height: 55px;border-radius: 10px;margin-bottom: 10px;box-shadow: 0 0 20px rgb(0 0 0 / 15%);}
#side_fload_01 .svg {width: 32px; height: 32px; fill: #333; transform: scale(.9);}



/* number */
#side_fload_01 .telBox {}
#side_fload_01 .telBox .box { width: 55px; border-radius: 8px; overflow: hidden; background-color: #f5f5f5; float: right; }
#side_fload_01[data-pos="1"] .telBox .box,
#side_fload_01[data-pos="4"] .telBox .box,
#side_fload_01[data-pos="7"] .telBox .box{float: left;}

#side_fload_01 .telBox .box .telImg { width: 55px; height: 55px; flex-shrink: 0; }
#side_fload_01 .telBox .box .text { font-size: 24px; font-weight: bold; line-height: 1; white-space: nowrap; transition: all 0.5s; color: #fff; }

#side_fload_01 .telBox:hover .box { background-color: var(--mainColor); }
#side_fload_01 .telBox:hover .box.text { line-height: 55px; color: #f5f5f5; font-weight: 700; }


/* 二维码 */
#side_fload_01 .codeBox {}
#side_fload_01 .codeBox .code {width: 130px; height: 130px; background: #fff; box-shadow: 0 0 20px rgb(0 0 0 / 15%); border-radius: 10px; right: 100%; top: 50%; transform: translate(0px,-50%);opacity: 0; transition: .3s; pointer-events: none;}
#side_fload_01 .codeBox .code img{max-width: 92%; max-height: 92%; object-fit: cover;}
#side_fload_01[data-pos="1"] .codeBox .code,
#side_fload_01[data-pos="4"] .codeBox .code,
#side_fload_01[data-pos="7"] .codeBox .code{right: initial;left: 100%;}
#side_fload_01 .codeBox:hover .code { opacity: 1; transform: translate(-20px, -50%)}
#side_fload_01[data-pos="1"] .codeBox:hover .code,
#side_fload_01[data-pos="4"] .codeBox:hover .code,
#side_fload_01[data-pos="7"] .codeBox:hover .code{transform: translate(20px, -50%)}


/* href */
#side_fload_01 .messageBox {}


/* 返回 */
#side_fload_01 .backTop {}
#side_fload_01 .backTop .svg { width: 24px; height: 24px; }



/* 基础交互 */
#side_fload_01 > *:hover{background: var(--mainColor);}
#side_fload_01 > *:hover .svg{fill: #fff;}



@media screen and (max-width: 768px){
    #side_fload_01{display: none;}
}