body {
    background-color: rgba(26, 43, 103, 1);
    padding-bottom: 10px;
}

@font-face {
    font-family: CL_HAPPY;
    src: url(./CL_HAPPY.TTF);
}

@font-face {
    font-family: SourceHanSansCN;
    src: url(SourceHanSansCN-Normal.otf)
}

.progress {
    position: relative;
    width: 10rem;
    height: 13.226667rem;
    background-image: url(./image/background.png);
    background-size: cover
}

.progress .logo {
    width: 1.72rem;
    margin-top: .226667rem;
    margin-left: .4rem;
}

.progress .person {
    position: absolute;
    top: 3.32rem;
    left: .186667rem;
    width: 2.573333rem;
    z-index: 99;
}

.progress .border {
    position: absolute;
    width: 9.2rem;
    height: 6.786667rem;
    background-image: url(./image/border.png);
    background-size: cover;
    top: 5.946667rem;
    left: 4%;
}

.border .headPhoto {
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: rgba(255, 213, 138, 1);
    z-index: 9;
}

.header {
    width: 2.106667rem;
    height: 2.106667rem;
    border-radius: 50%;
    margin-left: .146667rem;
    margin-top: .146667rem;
    overflow: hidden;
}

.level {
    position: absolute;
    top: 1.866667rem;
}

.levelText {
    position: absolute;
    top: .7rem;
    left: 45%;
    font-size: .356667rem;
    z-index: 99;
    color: #fff;
    font-family: SourceHanSansCN;
}

.Sabrina {
    font-size: .4rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    color: #E8962B;
}

.progressCenter {
    width: 100%;
    /* display: flex; */
    text-align: center;
    height: 2rem;
    margin-top: 1.546667rem;
    flex-direction: column;
    align-items: center;
}

.start {
    width: .293333rem;
    vertical-align: middle;
    /* margin-top: -0.1rem; */
}

.learning {
    position: absolute;
    top: 2.253333rem;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: .4rem;
    /* text-align: center; */
    line-height: .4rem;
}

.learning span {
    font-size: .48rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    color: #E8962B;
    vertical-align: middle;
}

.data {
    margin-top: .733333rem;
    font-size: .32rem;
    font-family: CL_HAPPY;
    font-weight: normal;
    color: #E8962B;
}

.progressFoot {
    width: 8.4rem;
    height: 2.093333rem;
    background-image: url(./image/蓝底@2x.png);
    background-size: cover;
    margin-left: .4rem;
    margin-top: .5rem;
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    padding: .266667rem 0;
}

.weekstitle {
    /* margin-left: .373333rem; */
    overflow: hidden;
}

.weekstitle img {
    width: .533333rem;
    vertical-align: middle;
    float: left;
}

.weekstitle span {
    font-size: .4rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    color: #66728B;
    margin-left: .16rem;
    float: left;
}

.line {
    height: 1.56rem;
    width: .026667rem;
    background-color: rgba(195, 209, 236, 1);
}

.weeknum {
    font-size: .48rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    color: #E8962B;
    text-align: center;
    margin-top: .373333rem;
}

.weekReadingTime {
    position: relative;
    width: 9.2rem;
    height: 6.866667rem;
    margin-top: .226667rem;
    background-image: url(./image/1@2x.png);
    background-size: cover;
    margin-left: .4rem;
    overflow: hidden;
    margin-bottom: .533333rem;
}

.weekReadingTitle {
    width: 6.64rem;
    height: .746667rem;
    background-image: url(./image/标题@2x.png);
    background-size: cover;
    margin-left: 1.28rem;
    margin-top: .18rem;
    font-size: .453333rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    color: #FAD846;
    line-height: .746667rem;
    text-align: center;
}

.weekReadingTitle span {
    color: #fff;
}

#main {
    margin-left: .52rem;
    width: 8.5rem;
    height: 6.5rem;
}

#monthMain {
    margin-left: .52rem;
    width: 8.5rem;
    height: 6rem;
}

.line1,
.line2,
.line3,
.line4,
.line5,
.line6,
.line7,
.line8,
.levelx,
.level1,
.level2,
.level3,
.level4,
.level5,
.level6,
.level7,
.level8,
.level9,
.levelx2 {
    position: absolute;
    top: 26.5%;
    height: 3.7888rem;
    width: .026667rem;
    background-color: rgba(125, 153, 248, 0.15);
}

.timeLine1,
.timeLine2,
.timeLine3,
.timeLine4,
.timeLine5,
.timeLine6,
.timeLine7 {
    position: absolute;
    top: 26.5%;
    height: 3.43rem;
    width: .026667rem;
    background-color: rgba(125, 153, 248, 0.15);
}

.line1 {
    left: 1.35rem;
    background-color: rgba(125, 153, 248, 1);
}

.line2 {
    left: 1.85rem;
}

.line3 {
    left: 2.82rem;
}

.line4 {
    left: 3.78rem;
}

.line5 {
    left: 4.78rem;
}

.line6 {
    left: 5.74rem;
}

.line7 {
    left: 6.70rem;
}

.line8 {
    left: 7.67rem;
}

.timeLine1 {
    left: 1.35rem;
    background-color: rgba(125, 153, 248, 1);
}

.timeLine2 {
    left: 1.93rem;
}

.timeLine3 {
    left: 3.05rem;
}

.timeLine4 {
    left: 4.19rem;
}

.timeLine5 {
    left: 5.32rem;
}

.timeLine6 {
    left: 6.45rem;
}

.timeLine7 {
    left: 7.57rem;
}

.min,
.min1 {
    position: absolute;
    font-size: .266667rem;
    font-family: CL_HAPPY;
    font-weight: normal;
    color: #FFFFFF;
    top: 20%;
    left: 6.5%;
}

.min1 {
    top: 22%;
    left: 9%;
}

.date {
    position: absolute;
    font-size: .266667rem;
    font-family: CL_HAPPY;
    font-weight: normal;
    color: #FFFFFF;
    top: 83.5%;
    left: 88%;
}

.weekReadingNum {
    position: relative;
    width: 9.2rem;
    height: 6.866667rem;
    margin-top: .226667rem;
    background-image: url(./image/1@2x.png);
    background-size: cover;
    margin-left: .4rem;
    overflow: hidden;
    margin-bottom: .533333rem;
}

#readNum,
#word {
    margin-left: .52rem;
    width: 8.5rem;
    height: 6.5rem;
}

.levelx {
    margin-left: 1.35rem;
    background-color: rgba(125, 153, 248, 1);
}

.levelx2 {
    margin-left: 1.32rem;
    background-color: rgba(125, 153, 248, 1);
}

.level1 {
    margin-left: 1.74rem;
}

.level2 {
    margin-left: 2.5rem;
}

.level3 {
    margin-left: 3.24rem;
}

.level4 {
    margin-left: 4.02rem;
}

.level5 {
    margin-left: 4.78rem;
}

.level6 {
    margin-left: 5.52rem;
}

.level7 {
    margin-left: 6.27rem;
}

.level8 {
    margin-left: 7.0rem;
}

.level9 {
    margin-left: 7.78rem;
}

#pie {
    width: 4.266667rem;
    height: 4.266667rem;
    margin-left: .68rem;
    margin-top: 0.6rem;
    float: left;
}

.toolip {
    margin-top: 0.6rem;
    margin-left: 0.52rem;
    height: 4.266667rem;
    display: flex;
    flex-direction: column;
    float: left;
    font-family: CL_HAPPY;
    font-size: .373333rem;
    font-weight: 400;
    justify-content: space-around;
}

.starclie1,
.starclie2,
.starclie3,
.starclie4,
.starclie5 {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: rgba(50, 74, 164, 1) .066667rem solid;
    margin-right: .133333rem;
}

.starclie1 {
    background-color: rgba(12, 207, 255, 1);
}

.starclie2 {
    background-color: rgba(5, 102, 235, 1);
}

.starclie3 {
    background-color: rgba(112, 83, 254, 1);
}

.starclie4 {
    background-color: rgba(253, 112, 56, 1);
}

.starclie5 {
    background-color: rgba(229, 230, 64, 1);
}

.star {
    display: flex;
    align-items: center
}

.star1 {
    color: rgba(12, 207, 255, 1);
}

.star2 {
    color: rgba(5, 102, 235, 1);
}

.star3 {
    color: rgba(112, 83, 254, 1);
}

.star4 {
    color: rgba(253, 112, 56, 1);
}

.star5 {
    color: rgba(229, 230, 64, 1);
}

.all {
    position: relative;
    font-family: CL_HAPPY;
    width: 9.2rem;
    height: 61.973333rem;
    background-image: url(./image/allBgc.png);
    background-size: cover;
    margin: .106667rem auto;
}

.all_time {
    position: absolute;
    width: 4.41rem;
    height: 1.053333rem;
    background-image: url(./image/white.png);
    background-size: cover;
    top: 1.933333rem;
    left: .52rem;
    font-size: .44rem;
    font-weight: 400;
    color: rgba(203, 117, 0, 1);
    line-height: 1rem;
    text-align: center;
}

.readTimeAll {
    position: absolute;
    top: 3.893333rem;
    left: .48rem;
}

.textCss {
    font-size: .533333rem;
    font-weight: 400;
    color: #FFFFFF;
}

.allNumber {
    font-size: .733333rem;
    font-weight: 400;
    color: #FFDE13;
}

.day {
    position: absolute;
    top: 5.013333rem;
    left: .546667rem;
    width: 3.16rem;
}

.readNumAll {
    position: absolute;
    top: 15.146667rem;
    right: .546667rem;
}

.step {
    position: absolute;
    top: 16.28rem;
    width: 4.773333rem;
    right: .546667rem;
}

.readWordAll {
    position: absolute;
    top: 28.28rem;
    left: .56rem;
}

.river {
    position: absolute;
    top: 29.413333rem;
    left: .56rem;
    width: 4.826667rem;
}

.getStarAll {
    position: absolute;
    top: 40.426667rem;
    right: .546667rem;
}

.soil {
    position: absolute;
    width: 4.573333rem;
    top: 41.546667rem;
    right: .546667rem;
}

.getRankingAll {
    position: absolute;
    top: 52.4rem;
    left: .56rem;
}

.rank {
    position: absolute;
    top: 53.573333rem;
    left: .546667rem;
    width: 4.133333rem;
}

.table {
    position: absolute;
    top: 3.13333rem;
    left: 3.786667rem;
    font-size: .453333rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.5;
}

.first {
    position: absolute;
    top: 5.8rem;
    left: 1.19rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    font-size: 0.25rem;
    color: #fff;
}

.first span {
    margin-left: 0.3666rem;
    display: inline-block;
}

.firsty {
    position: absolute;
    top: 1.75rem;
    left: 0.8rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    font-size: 0.25rem;
    color: #fff;
}

.firsty div {
    margin-top: 0.295rem;
    text-align: right;
}

.secondLevel {
    position: absolute;
    top: 5.9rem;
    left: 1.24rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    font-size: 0.25rem;
    color: #fff;
}

.secondLevel span {
    display: inline-block;
    transform: rotate(-45deg);
    margin-left: -0.06rem;
}

.secondy {
    position: absolute;
    top: 1.75rem;
    left: 0.8rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    font-size: 0.25rem;
    color: #fff;
}

.secondy div {
    margin-top: 0.38rem;
    text-align: right;
}

.thirdly {
    position: absolute;
    top: 1.75rem;
    left: 0.8rem;
    font-family: CL_HAPPY;
    font-weight: 400;
    font-size: 0.25rem;
    color: #fff;
}

.thirdly div {
    margin-top: 0.38rem;
    text-align: right;
}

.readAdvise {
    position: relative;
    top: 0;
    left: 0;
    width: 7.1rem;
    margin-left: .769231rem;
    /* height: 3.769231rem; */
    background: #475EB3;
    border-radius: 10px;
    padding: 1.476923rem .969231rem .630769rem .769231rem;
}

.readAdvise .adviseTitle {
    position: absolute;
    top: 0;
    left: -0.343846rem;
    width: 4.230769rem;
    height: 1.015385rem;
    background-image: url(./image/adviseimg.png);
    background-size: 100%;
    font-size: .323077rem;
    font-weight: 400;
    color: #FFFFFF;
    font-family: CL_HAPPY;
    line-height: 1.015385rem;
}

.readAdvise span {
    margin-left: 1.138462rem;
}

#advisetext {
    font-weight: 400;
    color: #FFFFFF;
    line-height: .646154rem;
    font-size: .461538rem;
    font-family: CL_HAPPY;
}

.footBox {
    width: 100%;
    left: 0;
    bottom: 0;
    height: 2.3rem;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.footBox img {
    position: absolute;
    border-radius: 5px;
    top: 0.5rem;
    left: .3846rem;
    width: 1.3rem;
}

.footTitle {
    position: absolute;
    top: 0.5rem;
    left: 2rem;
    font-size: .415rem;
    color: #fff;
    font-weight: 700;
}

.footText {
    position: absolute;
    top: 1.3rem;
    left: 2rem;
    font-size: .345rem;
    color: #fff;
}

#ljxz {
    position: absolute;
    border-radius: .153846rem;
    top: 0.6rem;
    right: 0.3rem;
    width: 2rem;
    height: 1.1rem;
    text-align: center;
    line-height: 1.1rem;
    color: #fff;
    font-size: .345rem;
    background-color: #ff6767;
}