.top-up-list{
    margin:-10px;
    margin-top:20px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.top-up-list > .item{
    width:33%;
    width:calc(33% - 20px) ;
    box-sizing: border-box;
    margin:10px;
    cursor: pointer;
}
.top-up-list > .item > .item-in{
    background-color:#FFFFFF;
    border-radius:5px;
    padding:15px;
}
.top-up-list > .item > .item-in h3{ 
    font-size:20px;
    font-weight:bold;
    text-align:center;
}
.top-up-list > .item > .item-in > .desc{ 
    font-size:14px;
    color:#577788;
    margin-top:10px;
    text-align:center;
}
.top-up-list > .item > .item-in > .price{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:end;
    flex-wrap:nowrap;
}
.top-up-list > .item > .item-in > .price i{
    font-style:normal;
    font-size:18px;
    line-height:18px;
    margin-bottom:3px;
}
.top-up-list > .item > .item-in > .price span{ 
    font-size:24px;
    line-height:26px;
}

.top-up-list > .active > .item-in{background-color:var(--primary-color);}
.top-up-list > .active > .item-in *{color:#FFFFFF !important;}


.task-body{max-width:780px; margin:0 auto; padding:15px;}
.task-title{display:flex; flex-direction:row; align-items:center;}
.task-title .iconfont{font-size:24px; line-height:30px;}
.task-title h3{font-size:24px; line-height:30px;}
.task-desc{margin-top:20px; font-size:15px; line-height:2.2em; color:#577788;}

.choose-file {
    width:100%;
    height:288px;
    border-radius: 8px;
    border: 1px dashed #cdd3de; 
    background:#f9f9fa;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:20px auto;
    box-sizing:border-box;
    position: relative;
}
.choose-file .iconfont{font-size:38px; color:var(--primary-color);}
.choose-file .tips{font-size:15px; font-weight:500; line-height:2.2em; margin-top:15px; color:#577788;}
.choose-file .desc{font-size:13px; line-height:1.8em; color:#577788; text-align:center; margin-top:3px;}
.choose-file input{display:block; width:100%; height:288px; position:absolute; z-index:2; left:0; top:0; right:0; bottom:0; cursor:pointer; opacity:0;}

.points-display{
    flex: 1;
    background: linear-gradient(135deg, rgba(196, 154, 56, 0.06) 0%, rgba(196, 154, 56, 0.02) 100%);
    border: 1px solid rgba(196, 154, 56, 0.2);
    border-radius:12px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

@media screen and (max-width: 768px) {
    .top-up-list > .item{
        width:50%;
        width:calc(50% - 20px) ;
    }
    .task-body{width:100%; padding:15px 5px;}
    .choose-file {margin:10px auto;}
}