.modules .item{width:150px;height:150px;border:1px solid hsla(0,0%,100%,.6);text-align:center;transition:.3s;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer;position:relative}.modules .item p{margin-top:12px;font-size:20px;font-weight:300}.modules .item:hover{border:1px solid #fff}.user_info{width:55%;margin:40px auto}@media only screen and (max-width:767px){.user_info{width:100%;margin:0}}.user_info li{display:flex;margin:30px 0}.user_info li span{width:30%;text-align:right}@media only screen and (max-width:767px){.user_info li span{width:28%}}.user_info li p{padding-left:40px}@media only screen and (max-width:767px){.user_info li p{flex:1;padding-left:25px;word-break:break-all;text-align:left}}.user_info li p a{color:#fff}.user_hr{position:relative;text-align:center}.user_hr:before{position:absolute;content:"";width:44%;height:1px;background:#d6d6d6;left:0;top:50%}@media only screen and (max-width:767px){.user_hr:before{width:33%}}.user_hr:after{position:absolute;content:"";width:44%;height:1px;background:#d6d6d6;right:0;top:50%}@media only screen and (max-width:767px){.user_hr:after{width:33%}}.skills{width:90%;margin:auto}@media only screen and (max-width:767px){.skills{width:100%}}.skills.playing .progress-bar{animation-play-state:running}.skills li{height:7px;background:#e3e3e3;border-radius:0;box-shadow:none;box-sizing:border-box;margin:40px 0 80px;overflow:visible;padding-left:40px;position:relative}@media only screen and (max-width:767px){.skills li{margin:65px 0 0;padding-left:24px}}.skills li .label{height:34px;padding:6px 10px 0;box-sizing:border-box;background:#393a3d;border-radius:5px 0 0 5px;box-shadow:0 7px 7px rgba(0,0,0,.4);font-size:16px;font-weight:700;color:#fff;position:absolute;top:-13px;left:0;z-index:1;vertical-align:bottom}@media only screen and (max-width:767px){.skills li .label{font-size:16px;margin-left:-2px;padding:9px}}.skills li .label:after{content:"";border-left:17px solid #393a3d;border-top:17px solid transparent;border-bottom:17px solid transparent;position:absolute;top:0;right:-17px}@media only screen and (max-width:767px){.skills li .label:after{right:-16px}}.skills li .progress-bar{height:100%;box-shadow:none;border-radius:0;position:relative;-webkit-animation:animate-positive 3s 1s both;animation:animate-positive 2s 0s both;animation-play-state:paused}.skills li .progress-bar:after{content:"";width:20px;height:20px;border-radius:50%;box-shadow:0 5px 5px rgba(0,0,0,.6);background:#fff;position:absolute;right:-5px;top:-6px}@-webkit-keyframes animate-positive{0%{width:0}}@keyframes animate-positive{0%{width:0}}.skills li .vue{background:#3fb27f}.skills li .vue:after{box-sizing:border-box;border:5px solid #3fb27f}.skills li .react{background:#5ed3f3}.skills li .react:after{box-sizing:border-box;border:5px solid #5ed3f3}.skills li .dapp{background:#ff1170}.skills li .dapp:after{box-sizing:border-box;border:5px solid #ff1170}.skills li .solidity{background:#7e7e7e}.skills li .solidity:after{box-sizing:border-box;border:5px solid #7e7e7e}.skills li .nodeJS{background:#74ab5d}.skills li .nodeJS:after{box-sizing:border-box;border:5px solid #74ab5d}.skills li .cocos{background:#56c2e2}.skills li .cocos:after{box-sizing:border-box;border:5px solid #56c2e2}.skills li .uniapp{background:#8b29dc}.skills li .uniapp:after{box-sizing:border-box;border:5px solid #8b29dc}.skills li .python{background:#fed94c}.skills li .python:after{box-sizing:border-box;border:5px solid #fed94c}.skills li .tauri{background:#0078d7}.skills li .tauri:after{box-sizing:border-box;border:5px solid #0078d7}.workListWrap ul li{margin-right:20px;font-size:0}.kind{display:flex;align-items:center}@media only screen and (max-width:767px){.kind{align-items:flex-start}}.kind:not(:first-child){margin-top:10px}@media only screen and (max-width:767px){.kind:not(:first-child){margin-top:20px}}.kind .label{min-width:40px;font-size:26px;margin-right:16px;display:flex;align-items:center}.kind .label img{margin-right:8px}@media only screen and (max-width:767px){.kind .label{font-size:24px}}.kind .list{display:flex;flex-wrap:wrap}.kind .list .item{cursor:pointer;font-size:0;position:relative;margin-right:10px}@media only screen and (max-width:767px){.kind .list .item{margin-bottom:10px}}.kind .list .item img{width:100px;height:32px;border-radius:5px}.kind .list .item .qrcode{width:0;height:0;background:#fff;position:absolute;border-radius:10px;left:0;right:0;margin:auto;bottom:40px;opacity:0;cursor:default;transition:.3s}.kind .list .item .qrcode img{width:100%;height:100%}.kind .list .item .qrcode:before{content:"";width:0;height:0;border-top:6px solid #fff;border-right:6px solid transparent;border-left:6px solid transparent;position:absolute;bottom:-6px;left:0;right:0;margin:auto}.kind .list .item:hover .qrcode{width:80px;height:80px;opacity:1;transition:.3s}.kind .website a{color:#fff;line-height:26px;font-weight:600}.kind .website a small{font-weight:500}.canvas-container{width:100%;height:100%}