*{margin:0;padding:0;box-sizing:border-box}li,ol,ul{list-style:none}body{width:100%;min-height:100vh;color:#fff;font-size:16px;font-family:-apple-system,"Helvetica Neue",Roboto,sans-serif;background:#131420}a{text-decoration:none;color:inherit}body.layout-circle header{padding-top:50px;position:relative;height:389px;text-align:center;background-image:url('../img/navigation/layout-circle/bg.png');background-position:top center;background-size:cover;background-repeat:no-repeat;overflow:hidden}body.layout-circle header .logo{position:relative;top:-20px;height:110px;z-index:2;left:-34%;}body.layout-circle header .visual{position:absolute;left:50%;bottom:-50;transform:translateX(-50%);height:100%;z-index:1}#lineCtrl{margin:0 auto 40px auto;max-width:1196px;display:flex;flex-wrap:wrap;justify-content:center}.progress-content{margin:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:calc((100% - 96px)/6);height:272px;background-color:#212236;border:.5px solid #404268;border-radius:16px;color:#fff;overflow:hidden;transition:.2s}.progress-content:hover{transform:translateY(-4px);border-color:#786cff;box-shadow:0 12px 30px rgba(0,0,0,.3)}.progress-content .head{display:flex;align-items:center;position:relative;width:100%;line-height:38px;justify-content:flex-start}.progress-content .tag{display:inline-flex;align-items:center;justify-content:center;position:absolute;left:-4px;top:-4px;width:41px;height:41px;color:#111;font-weight:700;font-size:20px;text-shadow:0 0 .4px rgba(0,0,0,.6);background-image:url('../img/navigation/layout-circle/tag-green.png');background-position:4px 4px;background-size:calc(100% - 4px);background-repeat:no-repeat}.progress-content .name{margin-left:45px;font-size:16px;color:#b9bbe8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}.circleArea{position:relative;margin-top:18px;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#12172a}.circleArea .process{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#00d27a,#00b96c,#5ce8a9 0%,#12172a 0%,#12172a 100%)}.circleArea .cap{position:absolute;inset:13px;border-radius:50%;background:#212236;z-index:1;box-shadow:inset 0 0 24px rgba(0,0,0,.35)}.circleArea .val{position:relative;z-index:2;font-size:38px;font-weight:700;color:#fff;line-height:1}.circleArea .ms{position:absolute;z-index:2;top:94px;font-size:16px;color:#8f92c7}.play{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:118px;height:38px;color:#161616;font-size:16px;font-weight:700;background-image:url('../img/navigation/layout-circle/play.png');background-size:100% 100%;background-repeat:no-repeat}.progress-content.speed-green .play{background-image:url('../img/navigation/layout-circle/play-on.png')}.progress-content.speed-green .play .hot{display:block}.play .hot{position:absolute;right:-7px;top:-12px;width:31px;display:none}.speed-blue .tag{background-image:url('../img/navigation/layout-circle/tag-blue.png')}.speed-blue-purple .tag{background-image:url('../img/navigation/layout-circle/tag-blue-purple.png')}.speed-purple .tag{background-image:url('../img/navigation/layout-circle/tag-purple.png')}.speed-orange .tag{background-image:url('../img/navigation/layout-circle/tag-orange.png')}.speed-red .tag{background-image:url('../img/navigation/layout-circle/tag-red.png')}.footer{padding:0 0 68px;background-image:url('../img/navigation/layout-circle/bg-footer.png');background-position:bottom center;background-size:cover;background-repeat:no-repeat}.footer ul{display:flex;align-items:center;justify-content:center}.footer ul li{display:flex;flex-direction:column;min-width:140px;align-items:center}.footer ul li:not(:last-child){margin-right:110px}.footer ul li img{width:72px}.footer ul li p{margin-top:16px;color:#fff;font-size:20px}.footer ul li:nth-child(1) img{filter:drop-shadow(0 0 15px rgba(63,252,167,.8))}.footer ul li:nth-child(2) img{filter:drop-shadow(0 0 15px rgba(255,181,0,.8))}.footer ul li:nth-child(3) img{filter:drop-shadow(0 0 15px rgba(0,187,255,.8))}.footer ul li:nth-child(4) img{filter:drop-shadow(0 0 15px rgba(145,0,255,.8))}.online-kf{display:flex;align-items:center;justify-content:center;position:fixed;width:105px;height:105px;bottom:59px;right:342px;z-index:10}.online-kf:hover .kf-img{display:none}.online-kf:hover .kf-img-on{display:block}.online-kf img{width:100%}.online-kf .kf-img-on{display:none}@media (max-width:900px){.progress-content{width:calc((100% - 48px)/3)}.online-kf{right:28px}}@media (max-width:641px){body.layout-circle header{padding-top:40px;height:83vw;background-image:url('../img/navigation/layout-circle/bg-h5.png')}body.layout-circle header .logo{height:68px;left:-34%;}body.layout-circle header .visual{display:none}#lineCtrl{padding:0 7px;margin:-50px auto 24px auto;width:100%;max-width:100%}.progress-content{margin:4px;width:calc((100% - 24px)/3);height:170px;border-radius:14px}.progress-content .head{padding-left:15px;line-height:18px}.progress-content .tag{margin-top:14px;font-size:13px;line-height:21px;width:21px;height:21px;left:12px;background-position:center;background-size:100%;background-image:url('../img/navigation/layout-circle/tag-green-h5.png')}.speed-blue .tag{background-image:url('../img/navigation/layout-circle/tag-blue-h5.png')}.speed-blue-purple .tag{background-image:url('../img/navigation/layout-circle/tag-blue-purple-h5.png')}.speed-purple .tag{background-image:url('../img/navigation/layout-circle/tag-purple-h5.png')}.speed-orange .tag{background-image:url('../img/navigation/layout-circle/tag-orange-h5.png')}.speed-red .tag{background-image:url('../img/navigation/layout-circle/tag-red-h5.png')}.progress-content .name{padding-left:24px;margin:12px 10px 4px 0;margin-left:0;width:calc(100% - 12px);font-size:13px;font-weight:500}.circleArea{margin-top:9px;width:82px;height:82px}.circleArea .cap{inset:8px}.circleArea .val{font-size:24px}.circleArea .ms{top:52px;font-size:12px}.play{bottom:10px;width:86px;height:28px;font-size:13px}.play .hot{width:24px}.footer{padding-bottom:18px;background-image:url('../img/navigation/layout-circle/bg-footer-h5.png')}.footer ul{display:grid;grid-template-columns:1fr 1fr;padding:0 12px}.footer ul li{flex-direction:row;min-width:0;padding-left:24px;padding-bottom:18px}.footer ul li:not(:last-child){margin-right:0}.footer ul li img{width:38px;filter:none!important}.footer ul li p{margin-top:0;margin-left:12px;font-size:14px}.online-kf{width:87.5px;height:90px;bottom:21px;right:8px}}