@import url(https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700;800&display=swap);*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}img{max-width:100%}body{width:100vw;min-height:100vh;color:#fff;font-size:16px;font-family:-apple-system,"Helvetica Neue",Roboto,sans-serif}body.layout-circle{width:100%;background-image:url(../img/navigation/layout-circle/bg.jpg);background-position:center top;background-size:cover;background-repeat:no-repeat}@media (max-width:641px){body.layout-circle{background-image:url(../img/navigation/layout-circle/bg-mobile.jpg)}}body.layout-circle header{padding-top:30px;text-align:center}body.layout-circle header .visual{height:50vh;-webkit-filter:drop-shadow(0 0 30px rgba(111, 144, 177, .5));filter:drop-shadow(0 0 30px rgba(111, 144, 177, .5))}@media (max-width:641px){body.layout-circle header .visual{display:none}}body.layout-circle header .visual-h5{display:none}@media (max-width:641px){body.layout-circle header .visual-h5{display:block;margin:auto;width:90%}}body.layout-circle .visual-bottom{display:none}@media (max-width:641px){body.layout-circle .visual-bottom{display:block}}body.layout-circle #lineCtrl{margin:0 auto 40px auto;max-width:1196px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width:641px){body.layout-circle #lineCtrl{padding:0 7px;margin:30px auto 30px auto;width:100%;max-width:100%}}body.layout-circle #lineCtrl.double-box{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}body.layout-circle #lineCtrl .progress-content{margin:8px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:calc((100% - 96px)/ 6);height:272px;background-color:#212236;border:.5px solid #404268;border-radius:16px;text-decoration:none}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content{margin:4px;width:calc((100% - 24px)/ 3);height:170px;border-radius:14px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}body.layout-circle #lineCtrl .progress-content.double-item{width:300px}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.double-item{width:calc((100% - 16px)/ 2)}}body.layout-circle #lineCtrl .progress-content .head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;line-height:38px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .head{padding-left:15px;line-height:18px}}body.layout-circle #lineCtrl .progress-content .head .tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack: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}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .head .tag{margin-top:14px;font-size:13px;line-height:21px;width:21px;height:21px;left:12px;background-position:center;background-size:100%}}body.layout-circle #lineCtrl .progress-content .head .name{margin-left:45px;font-size:16px;color:#b9bbe8}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .head .name{padding-left:24px;margin:12px 10px 4px 0;margin-left:0!important;width:calc(100% - 12px);font-size:13px;font-weight:500;text-overflow:ellipsis;overflow:hidden}}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .head.truncate-name .tag{left:12px}}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .head.truncate-name .name{max-width:100%;margin-right:0}}body.layout-circle #lineCtrl .progress-content .circleArea{margin:38px 0 34px 0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;width:108px;height:108px;background:#12172a;border-radius:50%}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .circleArea{margin:6px 0 12px 0;width:75px;height:75px}}body.layout-circle #lineCtrl .progress-content .circleArea .cap{position:absolute;z-index:1;top:50%;left:50%;width:78%;height:78%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .circleArea .cap{width:78%;height:78%}}body.layout-circle #lineCtrl .progress-content .circleArea .process{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .circleArea .process{width:67px;height:67px}}body.layout-circle #lineCtrl .progress-content .circleArea .val{position:relative;z-index:1;font-size:32px;color:#fff;font-weight:700;text-shadow:0 3px 4px rgba(0,0,0,.4)}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .circleArea .val{font-size:24px}}body.layout-circle #lineCtrl .progress-content .circleArea .ms{margin-top:-5px;position:relative;z-index:1;font-size:14px;color:#fff;font-weight:700}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .circleArea .ms{font-size:12px}}body.layout-circle #lineCtrl .progress-content .play{position:relative;width:128px;height:40px;font-size:16px;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;font-weight:500;background-image:url(../img/navigation/layout-circle/play.png);background-size:contain;background-repeat:no-repeat;background-position:center}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .play{margin:2px 0;width:100px;height:24px;font-size:12px;font-weight:700}}body.layout-circle #lineCtrl .progress-content .play .hot{position:absolute;top:-12px;right:-12px;width:34px;height:34px;display:none}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content .play .hot{top:-10px;right:-4px;width:24px;height:24px}}body.layout-circle #lineCtrl .progress-content.speed-green{background-image:url(../img/navigation/layout-circle/mirror.png);background-position:top center;background-size:100% 50%;background-repeat:no-repeat}body.layout-circle #lineCtrl .progress-content.speed-green .tag{background-image:url(../img/navigation/layout-circle/tag-green.png);color:#00522d}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-green .tag{background-image:url(../img/navigation/layout-circle/tag-green-h5.png)}}body.layout-circle #lineCtrl .progress-content.speed-green .circleArea{-webkit-filter:drop-shadow(0 0 20px rgba(0, 210, 122, .6));filter:drop-shadow(0 0 20px rgba(0, 210, 122, .6))}body.layout-circle #lineCtrl .progress-content.speed-green .circleArea .cap{background-image:radial-gradient(rgba(0,210,122,.7),#12172a 60%);background-color:#12172a}body.layout-circle #lineCtrl .progress-content.speed-green .circleArea .ms{color:#44e29d}body.layout-circle #lineCtrl .progress-content.speed-green .play{background-image:url(../img/navigation/layout-circle/play-on.png)}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-green .play{margin:0;height:35px;font-size:12px}}body.layout-circle #lineCtrl .progress-content.speed-green .play .hot{display:block}body.layout-circle #lineCtrl .progress-content.speed-blue .tag{background-image:url(../img/navigation/layout-circle/tag-blue.png);color:#003169}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-blue .tag{background-image:url(../img/navigation/layout-circle/tag-blue-h5.png)}}body.layout-circle #lineCtrl .progress-content.speed-blue .circleArea{-webkit-filter:drop-shadow(0 0 20px rgba(0, 117, 255, .6));filter:drop-shadow(0 0 20px rgba(0, 117, 255, .6))}body.layout-circle #lineCtrl .progress-content.speed-blue .circleArea .cap{background-image:radial-gradient(rgba(0,117,255,.7),#12172a 60%);background-color:#12172a}body.layout-circle #lineCtrl .progress-content.speed-blue .circleArea .ms{color:#01c1ff}body.layout-circle #lineCtrl .progress-content.speed-blue-purple .tag{background-image:url(../img/navigation/layout-circle/tag-blue-purple.png);color:#1a1554}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-blue-purple .tag{background-image:url(../img/navigation/layout-circle/tag-blue-purple-h5.png)}}body.layout-circle #lineCtrl .progress-content.speed-blue-purple .circleArea{-webkit-filter:drop-shadow(0 0 20px rgba(80, 64, 255, .6));filter:drop-shadow(0 0 20px rgba(80, 64, 255, .6))}body.layout-circle #lineCtrl .progress-content.speed-blue-purple .circleArea .cap{background-image:radial-gradient(rgba(80,64,255,.7),#12172a 60%);background-color:#12172a}body.layout-circle #lineCtrl .progress-content.speed-blue-purple .circleArea .ms{color:#9296ff}body.layout-circle #lineCtrl .progress-content.speed-purple .tag{background-image:url(../img/navigation/layout-circle/tag-purple.png);color:#321554}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-purple .tag{background-image:url(../img/navigation/layout-circle/tag-purple-h5.png)}}body.layout-circle #lineCtrl .progress-content.speed-purple .circleArea{-webkit-filter:drop-shadow(0 0 20px rgba(153, 0, 255, .6));filter:drop-shadow(0 0 20px rgba(153, 0, 255, .6))}body.layout-circle #lineCtrl .progress-content.speed-purple .circleArea .cap{background-image:radial-gradient(rgba(153,0,255,.7),#12172a 60%);background-color:#12172a}body.layout-circle #lineCtrl .progress-content.speed-purple .circleArea .ms{color:#eb6dff}body.layout-circle #lineCtrl .progress-content.speed-orange .tag{background-image:url(../img/navigation/layout-circle/tag-orange.png);color:#6e2100}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-orange .tag{background-image:url(../img/navigation/layout-circle/tag-orange-h5.png)}}body.layout-circle #lineCtrl .progress-content.speed-orange .circleArea{-webkit-filter:drop-shadow(0 0 20px rgba(255, 77, 0, .6));filter:drop-shadow(0 0 20px rgba(255, 77, 0, .6))}body.layout-circle #lineCtrl .progress-content.speed-orange .circleArea .cap{background-image:radial-gradient(rgba(255,77,0,.7),#12172a 60%);background-color:#12172a}body.layout-circle #lineCtrl .progress-content.speed-orange .circleArea .ms{color:#ff9c01}body.layout-circle #lineCtrl .progress-content.speed-red .tag{background-image:url(../img/navigation/layout-circle/tag-red.png);color:#540001}@media (max-width:641px){body.layout-circle #lineCtrl .progress-content.speed-red .tag{background-image:url(../img/navigation/layout-circle/tag-red-h5.png)}}body.layout-circle #lineCtrl .progress-content.speed-red .circleArea{-webkit-filter:drop-shadow(0 0 20px rgba(179, 0, 0, .6));filter:drop-shadow(0 0 20px rgba(179, 0, 0, .6))}body.layout-circle #lineCtrl .progress-content.speed-red .circleArea .cap{background-image:radial-gradient(rgba(179,0,0,.7),#12172a 60%);background-color:#12172a}body.layout-circle #lineCtrl .progress-content.speed-red .circleArea .ms{color:#fe1a55}body.layout-circle .online-kf{position:fixed;width:120px;height:120px;bottom:59px;right:342px}@media (max-width:641px){body.layout-circle .online-kf{width:87.5px;height:90px;bottom:21px;right:8px}}body.layout-circle .online-kf img{width:100%}