.task {
    z-index: 1;
    position: absolute;
    top: 0;
    left: -25%;
    right: -25%;
    height: 4rem;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    background: linear-gradient(to right, rgb(3,209,161), rgb(3,184,209)); 
}
.bui-bar-main {
    color: #fff !important;
}
.body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    display: block;   
    font-size: .28rem;
    z-index: 2;
    padding: .2rem .2rem 2rem .2rem;
    overflow-x: auto;
}
.body .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
    padding: 0 .1rem;
}
.body .head .gold {
    color: #fff;
    display: flex;
    align-items: center;
}
.body .head .signbtn {
    background: #ff604e;
    border-radius: .3rem;
    color: #fff;
    font-size: .25rem;
    padding: .07rem .3rem;
    border: 0;
}
.body .head .signbtn.ok {
    background: #efefef;
    color: #999;
}
.body .head .gold h3 {
    font-size: .4rem;
    font-weight: 600;
    padding-left: .2rem;
}
.body .head span {
    color: #fff;
}
.body .signin {
    margin: .5rem .1rem .2rem .1rem;
    border-radius: .2rem;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px 0px;
    padding: .3rem;
}
.body .signin .title {
    display: flex;
    color: #333333;
    justify-content: space-between;
}
.body .signin .title span {
    font-size: .28rem;
    display: block;
}
.body .signin .title span u {
    color: #03d1a1;
    text-decoration: none;
}
.body .signin .title span i {
    margin-left: .1rem;
}
.body .signin .title span:last-child {
    color: #999;
}
.body .signin .main {
 display: block;
}
.body .signin .main ul {
    display: flex;
    justify-content:space-between;
    padding: .2rem 0 0 0;
}
.body .signin .main ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: .25rem;
}
.body .signin .main ul li.ok .icon {
    background: #03d1a1;
}
.body .signin .main ul li.ok span {
    color: #03d1a1;
}
.body .signin .main ul li p {
    margin-bottom: 0;
    color: #03d1a1;
}
.body .signin .main ul li .icon {
    background: #dddddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: .7rem;
    height: .7rem;
    margin: .1rem 0;
}
.body .signin .main ul li .icon i {
    color: #fff;
    font-size: .4rem;
}
.novice {
    display: block;
    padding: .2rem;
    background: #fff;
    border-radius: .3rem;        
}
.novice .subtitle {
    padding: .2rem 0;
    font-size: .28rem;
    font-weight: 600;
}
.novice ul {
    display: block;
}
.novice ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .2rem 0;
}
.novice ul li .left {
    display: flex;      
    align-items: center;      
}
.novice ul li .left .hallmark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 209, 161, 0.19);
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    float: left;
}
.novice ul li .left .hallmark i {
    color: #03d1a1;
}
.novice ul li .left .desc {
    display: flex;
    flex-direction:column;
    font-size: .25rem;
    width: 4rem;
    margin-left: .2rem;
}
.novice ul li .left .desc p {
    display: block;
}
.novice ul li .left .desc span {
    display: block;
    color: #999;
}
.novice ul li .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: .2rem;
    font-size: .25rem;
}
.novice ul li .right span {
    color: #ff604f;
}
.novice ul li .right .btn {        
    color: #fff;
    border-radius: .2rem;
    font-size: .24rem;
    padding: .05rem .2rem;
    margin-top: .1rem;
    border: 0;
}
.novice ul li .right .progress {
    background: #03d1a1;
}
.novice ul li .right .started {
    background: #ff604e;
}
.novice ul li .right .complete {
    background: #efefef;
    color: #999;
}
.invite {
    background: #03d1a1;
    color: #fff !important;
}