.robotBox {
        bottom: 80px;
        right: 60px;
        }
    .robotBox {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 74px;
        height: 74px;
        border-radius: 50%;
        z-index: 999;
        cursor: pointer;
        background: linear-gradient(180deg, #A7C7FF 36%, rgba(133, 174, 245, 0.3) 85%);}
    .robotBox:before, .robotBox:after {
        content: "";
        width: 74px;
        height: 74px;
        border-radius: 50%;
        position: absolute;
        background: rgba(133, 174, 245, 0.3);
        animation: spread 1.4s linear infinite;
        animation-duration: 1.4s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-fill-mode: none;
        animation-play-state: running;
        animation-name: spread;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;}
    .robot {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        pointer-events: none;
        user-select: none;
    }
    .eye {
    position: absolute;
    left: 50%;
    height: 30px;
    width: 48px;
    top: 24px;
    margin-left: -23px;
    z-index: 2;
    animation: blink 8s infinite;
}
.tipsBox {
    position: absolute;
    min-width: 58px;
    margin-left: -25%;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: #fff;
    padding: 0 10px;
    line-height: 28px;
    border-radius: 6px;
    pointer-events: none;
    user-select: none;
    box-shadow: 0px 0px 8px 5px rgba(200, 200, 200, 0.5);
}
.tipsBox span {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    font-weight: bolder;
    font-family: "Alibaba PuHuiTi 2.0";
    background-clip: text;
    -ms-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #c084fc, #218bff);
}

.tipsBox::after {
    display: block;
    content: " ";
    width: 58px;
    height: 8px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAAANCAMAAAD41EI7AAAARVBMVEUAAAD+///////////////////////////+///////////9///9///9///8///////9///////////////////+///9///D3pV5AAAAF3RSTlMA92zm8BfpqeLLTZ2LdDF+fF9SKeu8kzyXxq8AAACDSURBVDjLtdDbDoMgEEXRw2WgWKBe2v7/pxpxCMbERJNhPUB4GdgAlGd9Rxq9N6qy5uCrijAm3UxzxmM0/a3aOVO5cvYLRFAKp4Ry4wdy9OuY4Hi8IIqcUJ8fICy3hG0bII3enOC2BR0MnNC+Rz6BeTDxhH7zOaHvfE6I6Iei/S24sgLhPAPVvCaHuQAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 26px;
}


blinkLine animation {
    opacity: 0.0304671;
}

.tipsBox span::after {
    content: ""; 
    margin-left: 2px;
    font-weight: bolder;
    background-clip: text;
    -ms-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom, #c084fc, #218bff);
    animation: blinkLine 1s infinite;
}
.name {
    font-family: "Alibaba PuHuiTi 2.0";
    font-size: 13px;
    color: #FBFCFD;
    background: linear-gradient(104deg, #A04CFF 5%, #1999FF 100%, #0F6DCE 100%);
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 11px;
    position: absolute;
    bottom: -15px;
    left: 50%;
    font-weight: bolder;
    transform: translateX(-50%);
    z-index: 999;
    overflow: hidden;
    white-space: nowrap;
}
move animation {
    left: 72.7256%;
}

.name:before {
    content: "";
    display: block;
    width: 132px;
    height: 22px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAABCBAMAAABZbFVyAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADnRSTlMAMSU9e3AaCWVIEl1WTzHOLMEAAAn1SURBVGjejVo7jptgEE7nGjgBFPSIyn18AyNRU2ykVOks0SNZcjpXLtwaySewhG9gOEAU+y6Z90CcwP5lomxGM99rhv3yz7eD116v1w94SZUkcRwEQRRleb5en06n1+vZ933X3W77/b5oimL7Vd5mWxRFA396OHRdD+/1+gX/ID/meR4F8OIEXoo/9zv8fPx/vvzvraCG+nrBIlKsIQniIAqghvwIP/LX69U/+3vXHW77poEaNputFrEpirKEKm5d1z2whtcJqlhTDVBFCC9Jkwp+8PX7ta2hiB//qeEHVniFKj4+qipNEqwhgBqoEevT+fUa+v7RddiIpiyKQhux5UaU+3136O59/xxev36djkdoRJZH0ggsIYVGSA0zjdjV9RWKqKCKJAkTrAGncVxTI55Qw4OmURbYCRtHsSmaspRp3AeZximHl2XQiCCOoRFpCtPAKmbGsVpxDd+haRWWHmMnsIYcGoGQGIb+LpAoC4TE1iFRFtCJw627wzSG1+uMwzjKNIIwCbET8KCEtp5pBOGyZlxW0IkwhBoy6Ge+zk8nnEbf3x8ACRhGUyAktBFUQ7lnSPTDMFAjjmuchiIiqdKKYXnFacxBor3WVENKnQiRHMKN8/n1fD57mEaHjSihEQbLYsOQOCAkHsQNqAIhkQcZkgMwjsOAIi4wjHoWEvDX1IiKCBpSDVGEkDg6QTuEBPKzMIJiDYUR9PkkSKyJG1RFHBMuoQqo4Yq4XM1AYndFSAAoUoFEFOQICSboMDxwGsqNjUJiWxhBqRE9EzRHciAk4jBBgjIkri3VMDeN9soExRriWLixhkb8gmn0RNAOG4GdcG5sEZbwuo4IytNwSATJGBK7dgYSK8Ql1ABFpGkK04hDmobL5fN5f4hcltAImwaNo8FpHJyga4WETCNNWanqeqETdS2aTXIZBjQN4gYRtL/3KJcCS68Clcq4IQQVuSSlChERFTKUubEsl1eTS3w54RJU4gUEHfpuLJdWA2m2yOUDpsEEBUhk1AkiaKLcaJe4Udc4DcJEjJ1wuTwBJKATSNA3ucQalBv3ngkq08gy6gQRNGVI1DMqsRJIkHkl0gmHxBkhQQRFADI3NiaXAokbajYSFMfHcqm4hBIYErt2Xi4dEilxI55CoocnckkqYbAkgnIn7mNIcCfCgKaRjOVySSU+FBKxQQJ+IHPjMXVQt1B0LyboXSDhwwi0BDKvelfPEVTyDEIiQUiECIkgJ0ioShBBG8ozTlCChMslKRV3IsqwDPhJ5KDMjdkaCJctOSiIhEIij0iq3EEPt8O+IYKag2qW6NhBnzgNd3EdBkOCXXy17KBpRcEuVN+AEs7WiI5FYholytJV4gmQwGkclaAg/i6XbUu4nHVQJihDIhYHzYmgJJdiHKrZjkuJEl3PDnpmzc4j5gbLJeeZ3ScJyg4qCZeV6pc66IEgIdzwPKOh6jEM3AjiRpZTxGXzSj3P/LcT1AiFBGs2PIKEEFS4IQz9OnVQhMSEoCyXESuVQ4KnMZ/svqN5fSRoXhYlkBysVI875ZnmDRIwjdv+RgSlTkymQebFkGh1GnMLR23TAFqpjQskoBMsl9D7cbrcEDdELvuBIIGarSoRk40zJBYI+sUXjqriTtDCYekSahAHfYdEg3mmQ0jYNI4UqiIWCV04EBOzkBByiFzGlLOznHEp02BINE1pvuGQ4FDVm1yuFZYhQYI3r+/zDvrD5ZIXjjieTsNVAuUSxzHN+rJwsIOqVCkkUngMiXoWEpwlLuRdJpeZaPZZ5fItZr9BYhg5aERSleAby+UCNy62cATkoBFD4swOakqF3PBpECTYQR8DQwLVkpIdEVS5sQQJVarL1EGznB30zA7qkNiOCCqQ6Gga461HjMO5AcP4LCRSy9mBTcMvAo3kGX0OCSaoZ/0og58ADpSoXMoivPqMgyYVXQTEQY+6gzpBm5GDsm8gQW9I0KfsoJRnor920O9kXqslB0W5dG5kAgmMuLZwNAyJUZ4BoBpBe8fldBqppcvVkkj4NIwcyE920O5t4VBI7BvmBocqxOVaCco76Ec6E6pcLt1BdRqREHQtO6hOwxYOD1XNYd9JqGIHPVIjZOuhTlioWnZQ8Q2oQRx07TtoP5LL0fpHImE76MtDVa47KE0DIVGTSsxwwx1U17+MYJn/LZeeZ/wsQdzwUEUykck0wveFY9lB5SrhZ4n1L8rZKpcccTf/lMt+YAclSIyn4XJJJSw76BQSf+2gGnG1BuyEyqWohO6gAe+gphJLZ4nxyc7TZR7ZMi47qBC0cAflRVgWDjvZUaiK+EqkDnqxdLkccT9ELf0+w3dDvQi852yOuH5A9bUH5ZJy9qgRn7mWpUaOLM8kZvP655DYTq+4+71E3H6w9e/9ZHfB+0y7pNlQhUaJMNRQRZiwK6476KgRUJbI5dBLzs6P4l6hhKrPO+hlesXNI4MlXuxEs8viL4IWtAdTxCVuICbWnvX9ZMfcWHJQX8YTaASfyxSXv2kZN/OayuXeHFRFgndQDlXuoG07ZxwTB7UDDYsEyaVDQmzc5bJwuZQ8czKRQKUySEC6XAhVO5FLgASHqowuAp6zOVSVzds0GrqNSMSVTuS8gwK0klGoqhcJSipx+UgsVEWkVEdy0ME0226XXoRA4tH7Djq54lYMCRaq1XwjbP0LQ5ZLtvHziaZxF6kySPjJrpFkpxeBNUWJnLO+LhxQA1Ux66Aql5WdswkSR57GQBHX5PI9XWLEJblkzdZOyO1SCIo1LDkoXwT8nB3Zye75+yHTmNo4mxdu42xerNlo4xIlaBqfclA6VL3LpTnoVC4VEr71YA0ECTrZKSRGi7Cc7JbkslW5TNU4WC6hBpaquznoGyT8e5MRlCERBnzF/dAddI6gUN/oK4veRkQvPeLe/g8Jlsver7j5+IpbMTcw2M0RtEZysINqqLKbOhH08fCF46sficYLB09DDoe0/YlI2Dl7yUFt6fGFA6chO6hBwgnqDmoqMfRKUMnZQcJZoiIH3bVLDrrDIi6ThUOm4XIpmj2NEvAmDkpbj6RL6QRDQjPVsnklhEtXidPa5LLTi8DWF2FbvQ60g+pHL1MJjhJE0OXD/s5xKdeyLOPDvsvl4c28+CvLu4NSnhlFCV7/rrOavZM8o2eJkCHB30FNLh0S2zcH7W62cJhcIiT0ZCeL8NzCsUJE6A5aKSQyOUsQLgkStoNOzIuOlz9VJaAEJCiIrWX9RQf1adSXi0IikO+gptnT3xHwHdTk0iFx1ogbZLr1sIO2QI6l+0x9oe+gckBFB2X34vVPHbT8h1wSLO12KdPQu7599PqGcvlj8aZu5+zAFo7cc/bEQbdTufSLgC8cQTQ52ZFSffoLB3Zi8r3J5dLyzD/l8j4MtnD4FdcddOaD0x96FMQ7Byin7gAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: -135px;
    animation: move 1.5s infinite;
}
spread animation {
    transform: scale(1.26207);
    opacity: 0.672416;
}

.robotBox:after {
    animation-delay: 0.7s;
}

.robotBox:before, .robotBox:after {
    content: "";
    width: 74px;
    height: 74px;
    border-radius: 50%;
    position: absolute;
    background: rgba(133, 174, 245, 0.3);
    animation: spread 1.4s linear infinite;
}
@keyframes spread{
	0% {
	    transform: scale(1);
	    opacity: 1;
	}
	
	100% {
	    transform: scale(1.8);
	    opacity: 0;
	}
}

@keyframes move{
	0% {
    left: -100%;
	}
	
	
	100% {
	    left: 120%;
	}
}