*{margin:0;padding:0;box-sizing:border-box;}
a{text-decoration:none;}
ul li{list-style:none;}
body{background:#e7e7e7;user-select:none;}
#app{max-width:720px;margin:auto;}
.masking{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;z-index:100;}
.loading{display:block;}
.masking .icon{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:50px;height:50px;text-align:center;line-height:50px;}
.masking .icon .iconfont{display:inline-block;font-size:50px;color:#fff;animation:loading 2s;animation-iteration-count:infinite;animation-timing-function:linear;}
@keyframes loading{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
header{position:fixed;top:0;width:100%;max-width:720px;height:50px;text-align:center;background:#168800;z-index:99;}
.esc{position:absolute;top:5px;left:0;width:75px;height:40px;text-align:center;line-height:40px;font-weight:bold;color:#fff;cursor:pointer;}
.logo{font-size:20px;color:#fff;font-weight:bold;line-height:50px;}
main{padding-top:50px;}
.control{width:100%;padding:10px;background:#fff;}
.control .title{font-size:14px;color:#333;margin-bottom:5px;font-weight:bold;}
.control .ordinary{width:100%;overflow:hidden;}
.control .ordinary .item{float:left;border:1px solid #e3e3e3;border-radius:6px;padding:6px 10px;font-size:13px;color:#333;margin:5px 5px 0 0;cursor:pointer;}
.control .ordinary .item:last-child{margin-right:0;}
.control .ordinary .sel{background:#168800;color:#fff;}
.control .special{width:100%;overflow:hidden;margin-top:5px;border-top:1px solid #f0f0f0;}
.control .special .item{float:left;border:1px solid #e3e3e3;border-radius:6px;padding:6px 10px;font-size:13px;color:#333;margin:5px 5px 0 0;cursor:pointer;}
.control .special .item:last-child{margin-right:0;}
.control .special .sel{background:#168800;color:#fff;}
.selTime{width:100%;overflow:hidden;padding:5px 10px 10px 10px;background:#fff;}
.selTime .title{font-size:14px;color:#333;margin-bottom:5px;font-weight:bold;}
.selTime .item{float:left;border:1px solid #e3e3e3;border-radius:6px;padding:6px 10px;font-size:13px;color:#333;margin:5px 5px 0 0;cursor:pointer;}
.selTime .sel{background:#168800;color:#fff;}
.list{width:100%;padding:0 10px 10px 10px;background:#fff;margin-top:1px;}
.list .item{width:100%;border-bottom:1px solid #e7e7e7;padding:15px 0;}
.list .item .title{font-size:15px;color:#333;font-weight:500;}
.list .item .title i{font-size:13px;font-weight:500;}
.list .numberList{width:100%;overflow:hidden;padding-top:15px;}
.list .numberList .numberItem{float:left;width:12.5%;height:51px;}
.list .numberList .numberItem .con{position:relative;width:90%;border:1px solid #e3e3e3;}
.list .numberList .numberItem .con .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#ccc;display:flex;justify-content:center;align-items:center;font-size:24px;color:#fff;font-weight:bold;}
.list .numberList .numberItem .colour{width:100%;height:21.6px;text-align:center;line-height:21.6px;font-size:16px;color:#fff;font-weight:700;margin:auto;}
.list .numberList .numberItem .colourRed{background:red;}
.list .numberList .numberItem .colourGreen{background:green;}
.list .numberList .numberItem .colourBlue{background:blue;}
.list .numberList .numberItem .animal{text-align:center;font-size:15px;color:#333;font-weight:500;padding:2px;}
.list .numberList .symbol{float:left;font-size:14px;color:#6d6d6d;width:10%;height:51px;text-align:center;padding-top:3px;}

.number_opac{opacity:0.2}

footer{width:100%;padding:20px 0;background:#fff;color:#333;margin-top:20px;text-align:center;font-size:14px;}
footer a{color:#333;font-size:14px;}

.gotop{display:none;position:fixed;bottom:60px;right:30px;width:40px;height:40px;background:rgba(255, 0, 0, 0.8);border-radius:50%;text-align:center;line-height:40px;cursor:pointer;}
.gotop .iconfont{font-size:22px;color:#fff;}

@media screen and (max-width: 700px) {
    .logo{font-size:18px;}
    .list .item{padding:5px;}
    .list .numberList{padding:5px;}
}