@charset "UTF-8";
/* match-percent-box */
.match-percent-box{margin:.1rem 0 .3rem;}
.percent-top{
    padding: 0 .3rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: .16rem;
    margin-top: .5rem;
}
.percent-top .match-percent{flex: 1; height: 70px; text-align: center; position: relative;}
.percent-top .match-percent canvas{margin: 0 auto;}
.percent-top .match-percent .result{line-height: 70px;font-size: .32rem;}

.percent-top .match-percent .info{position: absolute; top: 10px;width: 50px; height: 50px; border:1px solid #f2f2f2; border-radius: 50%; display: flex;left: 50%; margin-left: -25px;flex-direction: column;justify-content: center; box-sizing: border-box;}
.percent-top .match-percent .info div{font-size: 16px; height: 20px;line-height: 20px;color: #999; font-weight: bold;}
.percent-top .match-percent .info div em{color: #333;}
.percent-top .match-percent .info p{font-size: 12px; height: 15px;line-height: 15px;color: #999;}

/* per-mid */
.per-mid{margin: .2rem .3rem .5rem;}
.comparison-score{margin-top: 5px;}
.comparison-score-num{display: flex; height: .5rem; line-height: .5rem; width: 80%; margin: 0 auto;font-size: .24rem;}
.comparison-score-num span{flex: 1; text-align: center;color: #999;}
.comparison-score-num span em{color: #333;margin: 0 2px;}
.comparison-score-num span:nth-child(2){font-size: .28rem;}

.comparison-score-line{display: flex; height: .3rem; line-height: .3rem;align-items: center;}
.comparison-score-line span:nth-child(1){width: 10%; text-align: right; }
.comparison-score-line span:nth-child(2){flex: 1; height: 2px; background: #1b9fce; border-radius: 2px; margin: 0 6px;overflow: hidden;zoom: 1;} 
.comparison-score-line span:nth-child(2) em{display: inline-block; float: left; height: 2px; background: #e60012; }
.comparison-score-line span:nth-child(3){width: 10%; text-align: left; }

.comparison-table{width: 100%; margin: .4rem auto 0; height: .5rem; line-height: .5rem; border: 1px solid #999;display: flex;color: #999;}
.comparison-table span{flex: 1; text-align: center;font-size: .26rem;border-right: 1px solid #999;}
.comparison-table span em{font-size: .3rem;font-weight: bold;margin: 0 2px;}
.comparison-table span:nth-child(3){border:none}
.comparison-table span:nth-child(1) em{color: #e60012;}
.comparison-table span:nth-child(3) em{color: #1b9fce;}

/* ball-range */
.ball-range{margin-bottom: .3rem;}
.ball-range .ball-num{margin: .8rem auto;height: .6rem; border: 1px solid #999;line-height: .6rem; width: 80%;display: flex;}
.ball-range .ball-num span{flex: 1; text-align: center; font-size: .26rem;color: #999;border-right: 1px solid #999;}
.ball-range .ball-num span:last-child{border:none}
.ball-range .ball-num span.active{color: #fff; background: #333;}

/* ball-intro */
.ball-intro{margin-bottom: .3rem;}
.ball-intro .ball-num{margin: .8rem auto;height: .6rem; border: 1px solid #999;line-height: .6rem; width:80%;display: flex;}
.ball-intro .ball-num span{flex: 1; text-align: center; font-size: .26rem;color: #999;border-right: 1px solid #999;}
.ball-intro .ball-num span:last-child{border:none}
.ball-intro .ball-num span.active{color: #fff; background: #333;}

/* score-intro */
.score-intro{margin-bottom: .3rem;}
.score-intro .score-list{margin: .4rem .3rem;border-top: 1px solid #999;border-left: 1px solid #999;line-height: .6rem;font-size: .2rem;}
.score-intro .score-num{display: flex;}
.score-intro .score-num span{flex: 1; text-align: center; font-size: .26rem;color: #999;border-right: 1px solid #999;border-bottom: 1px solid #999;}
/*
.score-intro .score-num span:last-child{flex: 2;}
*/
.score-intro .score-num span.active{color: #fff; background: #333;}