:root{--mobile-footer-gradient:#0b2600;--mobile-bar-bottom:#4a8700;--topup-btn:#56ab2f}body{min-width:960px;padding:0;margin:0 auto;color:#4d4d4d;background-color:#ebf1f2;font-family:PingFang SC,Noto Sans SC,Microsoft Yahei,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif}@media only screen and (max-width:520px){body{min-width:unset}}body *{box-sizing:border-box}body ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.container{width:960px;margin:0 auto}@media only screen and (max-width:520px){.container{width:100%}}.header{position:relative;color:#fff;background:linear-gradient(1turn,var(--mobile-background),var(--mobile-navbar-background-gradient) 101%);background:linear-gradient(180deg,##000000 0,##000000);padding:16px 0}@media only screen and (max-width:520px){.header{padding:20px 24px 16px}}@media only screen and (max-width:520px) and (max-width:320px){.header{padding-left:16px;padding-right:16px}}.header .container{display:flex;align-items:center;justify-content:space-between}@media only screen and (max-width:520px){.header .container{justify-content:space-between}}.header .title{text-align:center}.header .title .logo{display:inline-block;vertical-align:middle}.header .title .logo img{display:block;width:120px}@media only screen and (max-width:320px){.header .title .logo img{width:100px}}@media only screen and (max-width:520px){.header .header-ip{position:absolute;width:100%;left:0;bottom:12px}}.header .btns{text-align:center}.header .btns .btn{cursor:pointer;vertical-align:middle;padding:7px 12px;background:hsla(0,0%,100%,.37);background:linear-gradient(180deg,hsla(0,0%,100%,.87) 0,hsla(0,0%,100%,.75));border-radius:8px;font-size:12px;color:rgba(0,22,26,.7);display:inline-flex;align-items:center;margin-left:8px;box-shadow:inset 0 1px 0 #fff,0 1px 4px rgba(0,0,0,.15);border:1px solid hsla(0,0%,100%,.3)}@media only screen and (max-width:520px){.header .btns .btn{margin-left:4px;padding:8px}}.header .btns .btn img{max-width:24px;max-height:24px;display:block;margin-right:8px}@media only screen and (max-width:520px){.header .btns .btn img{width:16px;margin-right:4px}}.main{padding:32px 0;text-align:center;background-color:#f2f2f2}@media only screen and (max-width:520px){.main{padding:10px 24px}}.main .line-info{font-size:20px;line-height:32px;font-weight:700;text-align:center;margin-top:24px;margin-bottom:40px;color:var(--topup-btn)}@media only screen and (max-width:520px){.main .line-info{font-size:16px;margin:12px 0}}.main .list{display:flex;flex-wrap:wrap;justify-content:space-between}.main .item{position:relative;display:flex;align-items:center;text-decoration:none;text-align:left;color:#4d4d4d;background:#fff;width:310px;height:78px;border-radius:16px;overflow:hidden;margin-bottom:16px;font-size:13px}@media only screen and (max-width:520px){.main .item{width:100%;margin-bottom:8px}}.main .item .meter:not(.loading){position:relative;color:#fff;width:100px;height:78px;font-size:56px;padding-left:20px;font-weight:700;background-color:#d6dedf;background-size:100px 78px}.main .item .meter:not(.loading):after{content:"";position:absolute;top:0;right:0;border-color:transparent transparent #fff;border-style:solid;border-width:0 0 78px 40px}.main .item.green .status{color:#1aa400}.main .item.green .status:after{background-color:#1aa400;width:40px}.main .item.blue .status{color:#008dc9}.main .item.blue .status:after{background-color:#008dc9;width:80px}.main .item.orange .status{color:#e46a00}.main .item.orange .status:after{background-color:#e46a00;width:120px}.main .item.red .status{color:#f23d31}.main .item.red .status:after{background-color:#f23d31;width:160px}.main .item.disable .status{display:none}.main .item p{padding:0;margin:0}.main .item p .status{display:block;font-size:18px;margin-bottom:5px;font-weight:700}.main .item p .status:after{content:"";display:block;height:4px;border-radius:2px}.main .item p .number{font-size:32px;font-weight:700;margin-right:8px}.main .item p span{margin:0 8px}.main .item.disable{background:rgba(0,0,0,.1);box-shadow:none;cursor:default}.main .item.disable>*{opacity:.3}.main .item.disable .icon,.main .item.disable .meter:after{display:none}.footer{text-align:center;background-color:rgba(0,21,26,.1);padding:28px}.footer .slogan{display:inline-block;vertical-align:middle;margin-right:30px}@media only screen and (max-width:520px){.footer .slogan{display:block;margin-right:0;margin-bottom:20px}}.footer .slogan span{display:block}.footer .slogan strong{border-top:1px solid #ccc;padding-top:5px;margin-top:5px;display:block;color:var(--topup-btn);font-size:1.5em}@media only screen and (max-width:520px){.footer .slogan strong{border-top:none;border-bottom:1px solid #ccc;padding-top:0;padding-bottom:10px}}.footer .qrcode{display:inline-block;vertical-align:middle;background-color:#fff;padding:10px;border-radius:8px;box-shadow:0 0 5px rgba(0,0,0,.15)}.footer .qrcode img{display:block}.footer .btns{display:inline-block;vertical-align:middle}.footer .btns .btn{padding:8px 12px;display:flex;align-items:center;color:#fff;background-color:var(--topup-btn);border-radius:8px;margin:8px}.footer .btns .btn img{margin-right:8px;display:block;width:20px;height:24px}