.oc-main-magnet-categories{
    position: relative;
    width: 15rem;
    margin: 0.52rem auto;
}

.oc-main-magnet-categories .categories-wrapper{
    padding: 0.92rem 1.5rem ;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 0.06rem;
    background: #F9F9F9;
}
.oc-main-magnet-categories .categories-box{
    max-width: 2.16rem;
    margin: 0 0.2rem;
}
.oc-main-magnet-categories .categories-box a{
    text-align: center;
    /* cursor: pointer; */
    display: inline-block;
}
.oc-main-magnet-categories .categories-box:hover a p{
    color: var(--Color);
}

.oc-main-magnet-categories .categories-box a img{
    width: 1rem;
    height: 1rem;
    object-fit: cover;
    margin: 0 auto 0.15rem;
}

.oc-main-magnet-categories .categories-box a p{
    color: #1D1D1B;
    font-family: Poppins;
    font-size: 0.24rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.oc-main-magnet-categories .tip-box{
    position: absolute;
    left: 3.95rem;
    bottom: -1rem;
    width: 7.39rem;
    height: 1.72rem;
    border-radius: 0.06rem;
    background: #fff;;
    box-shadow: 0 0.01rem 0.04rem 0 rgba(0, 0, 0, 0.25);
    padding: 0.35rem 0.6rem;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


.oc-main-magnet-categories .tip-box .title{
    font-size: 0.24rem;
    margin-bottom: 0.18rem;
}

.oc-main-magnet-categories .tip-box .text{
    font-size: 0.16rem;
    width: 3.66rem;
}

.oc-main-magnet-categories .tip-box .btn{
    cursor: pointer;
}
.oc-main-magnet-categories .tip-box .btn:hover .btn-text{
    font-size: 0.22rem;
}
.oc-main-magnet-categories .tip-box .btn .btn-text{
    font-size: 0.2rem;
    color: var(--Color);
    margin-right: 0.19rem;
    vertical-align: middle;
}

.oc-main-magnet-categories .tip-box .btn img{
    width: 0.36rem;
    height: 0.04rem;
    vertical-align: middle;
}


/* ipad和mobile */
@media screen and (max-width: 1025px) {
    .oc-main-magnet-categories{
        width: 100vw;

    }
    
    .oc-main-magnet-categories .categories-wrapper{
        padding: 0.53rem 0 1.1rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .oc-main-magnet-categories .categories-box a{
        width: 1.48rem;
        margin-bottom: 0.87rem;
        margin-left: 0.8rem;
    }

    .oc-main-magnet-categories .categories-box  a img{
        width: 1.14rem;
        height: 1.14rem;
        margin-bottom: 0.2rem;
    }
    
    .oc-main-magnet-categories .tip-box{
        /* top: 6.54rem;  首页移动端 Magnet Finder模块tip-box会有问题 */
        left: 0.31rem;
        width: 6.89rem;
        height: 2.53rem;
        padding: 0.29rem 0.6rem;
        display: block;
        box-sizing: border-box;
    }
    .oc-main-magnet-categories .tip{
        margin-bottom: 0.34rem;
    }
    .oc-main-magnet-categories .tip-box .title{
        font-size: 0.32rem;
        margin-bottom: 0.11rem;
    }

    .oc-main-magnet-categories .tip-box .btn .btn-text{
        font-size: 0.24rem;
        margin-right: 0.07rem;
    }
}