/*全局颜色定义 -------*/
:root {
    --white80: rgba(255, 255, 255, .8);
    --white60: rgba(255, 255, 255, .6);
    --white40: rgba(255, 255, 255, .4);
    --black20: rgba(0, 0, 0, .2);
    --black50: rgba(0, 0, 0, .5);
    --red40: #F04545;
    --blue40: #0170CA;
    --blue50: #0A8FEA;
    --green60: #2CA31F;
    --primary-color: var(--blue40);
}
.layui-layer-content{
    text-align:center;
}
html, body {
    padding: 0;
    margin: 0 auto;
    max-width: 750px;
}
body{background:#fff;color:#333;font-size: 12px;line-height:20px;font-weight:normal;font-family:"微软雅黑","黑体",Arial;-webkit-user-select:none;-webkit-text-size-adjust:none;margin:0;padding:0;}
ul,li {list-style: none;padding: 0;margin: 0;}
.red {color: #ff5517 !important;}
.green {color: var(--green60) !important;}
.f-l {text-align: left;}
.f-r {text-align: right;}
.rheaderbg {background:#fff;color:#333;font-size:16px;font-weight: bold;line-height:44px;text-align:center;display:block;position:relative;}
.rheaderbg .back {transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-left:15px;width:12px;height:12px;display:inline-block;position:absolute;left:5px;top:15px;border-left:2px solid #333;border-bottom:2px solid #333;z-index:9999;}
.masklayer {background: var(--black50);width: 100%;height: 100%;top: 0;left: 0;position: fixed;z-index: 1;}
.nodata {color: #666;font-size: 14px;text-align: center;padding: 20px;}
.nodata img {height: 100px;margin: 0 auto;display: block;}

.atycontainer {background: #f1f3f8;min-height: calc(100vh - 108px);padding-bottom: 64px;/*padding-top: env(safe-area-inset-top, 40px);*/position: relative;}
.HJpopbox {background: #fff;max-width: 680px;width: 82vw;padding: 14px;border-radius: 10px;transform: translate(-50%,-50%);top: 50%;left: 50%;position: fixed;z-index: 10;}
.HJpopbox .title {background: #ebf7ff;color: #0A8FEA;font-size: 16px;font-weight: bold;text-align: center;padding: 10px;border-radius: 6px;position: relative;}
.HJpopbox .titimg {background: url(./images/icon_tip.png) no-repeat center;background-size: 100%;width: 26px;height: 10px;left: 20%;top: 15px;position: absolute;opacity: 0.8;}
.HJpopbox .titimg.rev {left: auto;right: 20%;transform: scale(-1);}
.HJpopbox .popinfo {font-size: 16px;line-height: 24px;font-weight: bold;text-align: center;padding-bottom: 10px;}
.HJpopbox .popinfo img {height: 60px;margin: 5px auto;display: block;}
.HJpopbox .popinfo a {background: #f5f5f5;color: #666;font-size: 14px;font-weight: normal;padding: 1px 8px 1px 12px;margin: 5px auto;width: max-content;border-radius: 20px;display: block;cursor: pointer;}
.HJpopbox .popinfo a i {margin-left:5px;vertical-align:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #999;display:inline-block;}

.atypopbox {background: #f5f5f5;max-width: 720px;width: calc(100% - 20px);padding-bottom: env(safe-area-inset-bottom, 40px);padding: 20px 10px;border-radius: 20px 20px 0 0;bottom: 0;left: 50%;transform: translateX(-50%);position: fixed;z-index: 2;}
.atypopbox.Hauto {height: auto;}
.atypopbox .title {color: #333;font-size: 16px;font-weight: bold;text-align: center;padding: 0px;border-radius: 6px;position: relative;}
.atypopbox .title .excbtn {color: #8c8c8c;font-size: 12px;font-weight: normal;font-style: normal;left: 5px;top: 0;position: absolute;cursor: pointer;}
.atypopinfo {font-size: 13px;line-height: 22px;text-align: center;margin: 10px;height: calc(100% - 50px);overflow-y: auto;}
.atypopinfo .awardimg {width: 60px;height: 60px;margin: 6px auto;display: block;}
.atypopinfo p {text-align: left;margin: 8px 5px;}
.atypopinfo p span {text-indent: 12px;margin: 4px 0;display: block;}
.atypopinfo p a {color: #0A8FEA;text-decoration: none;}
.atypopinfo .des {color: #999;}
.atypopbox .atypopinfo.record {background: #f9f9f9;height: calc(100% - 210px);border-radius: 6px;position: relative;}
.atypopinfo .recordbox {padding: 0 10px;position: absolute;left: 0;top: 0;}
.recordbox li {font-size: 12px;line-height: normal;text-align: left;margin: 8px 0;}
.code {font-weight: bold;text-align: center;margin: 12px 0;}
.code img {width: 84px;height: 84px;margin: 0 auto;display: block;}
.confirmbtn {font-size: 14px;text-align: center;padding-top: 12px;border-top: 1px solid #f0f0f0;cursor: pointer;}
.atypopbox.award {height: 80vh;}
.award .atypopinfo {height: calc(100% - 20px);margin: 10px 0;display: flex;flex-wrap: wrap;}
.redeembox {background: #fff;padding-bottom: 5px;margin: 25px 3px 3px 3px;border-radius: 8px;flex: 0 0 calc(33.3% - 6px);position: relative;}
.redeembox::before,.redeembox::after {content:"";background: #f5f5f5;width: 6px;height: 10px;border-radius: 0 10px 10px 0;left: 0;top: 55%;transform: translateY(-50%);position: absolute;}
.redeembox::after {left: auto;right: 0;transform: translateY(-50%) scaleX(-1);}
.redeemgift {width: 80%;margin-top: -15px;}
.gifttype {font-size: 14px;font-weight: bold;text-align: center;display: block;}
.giftpoints {color: #0A8FEA;font-size: 16px;font-weight: bold;display: block;}
.gifttype font,.giftpoints font {color: #999;font-size: 12px;font-weight: normal;}
.redeembtn {background: #efefef;color: #666;font-size: 12px;padding: 3px 10px;margin: 5px 10px;border-radius: 30px;display: block;cursor: pointer;}
.redeembtn.on {background: #0170CA;color: #fff;}

.downloadbox {background: var(--black50);color: #fff;font-size: 16px;font-weight: 500;text-align: center;padding-bottom: env(safe-area-inset-bottom, 45px);padding: 15px 10px 25px 10px;width: calc(100% - 20px);cursor: pointer;position: absolute;left: 0;bottom: 0;}
.downloadbox img {height: 24px;margin-right: 8px;vertical-align: -6px;}
.downloadbox .closebtn {top: 17px;right: 10px;}
.downloadbox .closebtn::before,.downloadbox .closebtn::after {background: #fff;}
.closebtn {width: 20px;height: 20px;top: 0;right: 0;position: absolute;cursor: pointer;}
.closebtn::before,.closebtn::after {content:"";background: #999;width: 80%;height: 1px;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);position: absolute;}
.closebtn::after {transform: translate(-50%,-50%) rotate(-45deg);}

.banner {background: #4bb9f0 url(./images/banner.png) no-repeat top;background-size: 100%;padding-top: 65%;position: relative;}
.banner .popbtn {background: var(--black20);color: #fff;line-height: normal;text-align: center;width: 30px;padding: 5px 10px;border-radius: 0 10px 10px 0;bottom: 0;left: 0;position: absolute;cursor: pointer;}
.banner .popbtn.award {right: 0;left: auto;border-radius: 10px 0 0 10px;}
.atycontent {background: linear-gradient(0deg,#f1f3f8 50%,#4bb9f0);padding: 10px;}
.login {background:var(--black50);color:#fff;text-align: center;width: max-content;padding:4px 12px;margin: 0 auto 10px auto;border-radius: 20px;}
.login font {color: var(--white60);}
.login span {margin: 0 5px;}
.login .recordbtn::before {content:"";background: var(--white40);width: 1px;height: 10px;margin-right: 6px;vertical-align: -1px;display: inline-block;}
.login .recordbtn i {width: 5px;height: 5px;border-top: 1px solid var(--white60);border-right: 1px solid var(--white60);margin-left: 5px;vertical-align: 1px;transform: rotate(45deg);display: inline-block;}
.infoitem {color: #fff;padding: 0 2px 5px 2px;display: flex;justify-content: space-between;}

.guessbox {background: #fff;padding: 0 10px 10px 10px;margin-bottom: 10px;border-radius: 8px;}
.guessbox .timebox {background: #e0f4ff;color: #0A8FEA;width: 78%;padding: 5px 0;margin: 0 auto;display: flex;align-items: center;position: relative;}
.guessbox .timebox::before,.guessbox .timebox::after {content:"";background: #e0f4ff;width: 20px;height: 30px;transform: skew(30deg);left: -10px;position: absolute;}
.guessbox .timebox::after {transform: skew(-30deg);right: -10px;left: auto;}
.guessbox .timebox span {flex: 1;}
.guessbox .status {color: #666;text-align: center;flex: 0 0 50px;}
.guessbox .teambox {display: flex;align-items: center;margin: 10px 0;}
.guessbox .teambox img {width: 22px;height: 22px;object-fit: cover;margin: 0 5px;}
.guessbox .teamN {flex: 1;font-size: 14px;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.guessbox .teambox .status {color: #999;font-size: 18px;font-weight: bold;}
.guessbox .guessitem {display: flex;margin-bottom: 5px;}
.guessbox .guessitem .play {background: #efefef;font-size: 14px;line-height: normal;font-weight: bold;text-align: center;padding: 10px 5px;margin: 0 3px;border-radius: 5px;flex: 1;}
.guessbox .guessitem .play span {font-size: 12px;font-weight: normal;display: block;opacity: 0.75;}
.guessbox .guessitem .play.on {background: #f04545;color: #fff;}
/* .guessbox .guessitem .play.draw {background: #FF6B42;color: #fff;}
.guessbox .guessitem .play.lose {background: #3361E7;color: #fff;} */
.prizebox {background: url(./images/prizebox.png) no-repeat top;background-size: 100%;padding-top: 60%;position: relative;}
.priztit {color: #fff;font-size: 18px;font-weight: bold;text-align: center;top: 9%;left: 50%;transform: translateX(-50%);position: absolute;}
.prizes {width: calc(92% - 4%);padding: 3%;top: 56%;left: 50%;transform: translate(-50%,-50%);position: absolute;display: flex;}
.prizelis {background: #fe770f;padding: 2px;margin-right: 5px;border-radius: 10px;box-shadow: 0 0 10px #fff inset;flex: 1;}
.prizelis:last-child {margin: 0;}
.prizeimg {background: #fff;height: 55px;padding: 5px;border-radius: 8px;display: block;}
.prizeimg img {width: auto;height: 100%;margin: 0 auto;display: block;}
.Ptext {color: #fff;line-height: normal;text-align: center;height: 30px;padding: 8px;display: flex;align-items: center;justify-content: center;}
.disclaimers {margin: 10px;}
.distit {font-size: 14px;font-weight: bold;text-align: center;line-height: 20px;position: relative;}
.distit::before,.distit::after {content:"";background: #e0e0e0;width: 33%;height: 1px;top: 50%;left: 0;transform: translateY(-50%);position: absolute;}
.distit::after {left: auto;right: 0;}
.disclaimers .atypopinfo {margin: 0;}

@media screen and (max-width:360px) {
    .prizeimg {height: 46px;}
    .Ptext {padding: 6px;}
}


/* 记录页 */
.navbox span {color: #8c8c8c;font-weight: normal;padding: 0 10px;position: relative;cursor: pointer;}
.navbox .on {color: #333;font-weight: bold;}
.navbox .on::after {content:"";border-width: 5px;border-style: solid;border-color: transparent transparent #333 transparent;bottom: -8px;left: 50%;transform: translateX(-50%);position: absolute;}
.allpoints {background: #fff;color: #666;font-size: 13px;padding: 8px 10px;display: flex;align-items: center;justify-content: space-between;}
.allpoints span i {color: var(--blue50);font-size: 16px;font-weight: bold;font-style: normal;}
.allpoints .exchangebtn {background: #f5f5f5;padding: 2px 10px;border-radius: 5px;cursor: pointer;}
.content {padding: 10px;}
.guessbox .results {background: linear-gradient(90deg,#f0f0f0,transparent);color: #666;font-size: 14px;padding: 5px 8px;border-radius: 5px;display: flex;align-items: center;}
.guessbox .results span {flex: 1;}
.guessbox .results .tag {background: url(./Images/wrong.svg)no-repeat center;background-size: 100%;width: 16px;height: 16px;margin: 0 -8px 0 2px;vertical-align: -3px;display: inline-block;}
.guessbox .results.win .tag {background: url(./Images/correct.svg)no-repeat center;background-size: 100%;}
.guessbox .results.win {background: linear-gradient(90deg,#ffe9e9,transparent);color: var(--red40);}
.guessbox .results.win .line {background: #ffc6c6;}
.guessbox .results .line {background: #ddd;width: 1px;height: 12px;margin: 0 5px;display: inline-block;}
.exchangebox {background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 8px;display: flex;align-items: center;}
.exchangebox img {width: 40px;height: 40px;margin-right: 10px;}
.exchangebox .exchangegift {font-size: 14px;font-weight: bold;flex: 1;}
.exchangebox .exchange {color: var(--blue50);font-size: 14px;font-weight: bold;text-align: right;}
.exchangebox .exchange.jf {color: #333;}
.exchangebox .des {color: #999;font-size: 12px;font-weight: normal;display: block;}