.title {
    color: #fff;
    margin: .5rem 0;
    font-weight: 700;
    text-align: center;
}

.main {
    width: 6.8rem;
    height: 10rem;
    margin: 0 auto;
}
.main .main-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.5rem;
    border-radius: .3rem;
    margin: .3rem 0;
    padding: .5rem;
}
.type-name {
    color: #fff;
    width: 3rem;
    height: 1rem;
    line-height: .5rem;

}
.type-img {
    width: 1rem;
    height: 1rem;
    /* margin-right: .3rem; */
}
.type-img img {
    width: 100%;
    height: 100%;
}
.box1 { background: linear-gradient(90deg, #4C9CFB 0%, #75D4FF 100%); }
.box2 { background: linear-gradient(90deg, #AE29E2 0%, #E5AAFF 100%); }
.box3 { background: linear-gradient(90deg, #22B69F 0%, #64FFC2 100%);  }
.box4 { background: linear-gradient(90deg, #FC9743 0%, #F9CD99 100%); }
.box5 { background: linear-gradient(90deg, #FC4390 0%, #FFB2CF 100%); }
.box6 { background: linear-gradient(90deg, #08DAFA 0%, #8CEEFF 100%); }
.box3 .type-name {
    width: 4rem;
}