.explore {
    margin-bottom: 5%
}

.explore .explore-main {
    padding: 0 5% 25% 5%
}

.explore .tab-area {
    padding: 0 3px
}

.explore .tab-area-outer .ivu-tabs-tab {
    padding-bottom: 24px
}

#dev-id .explore .tab-area-outer .ivu-tabs-ink-bar {
    height: 8px
}

.explore .tab-area--outer .main-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 5% 0 10px
}

.explore .tab-area--outer .main-title img {
    width: 25px;
    margin-right: 5px
}

.explore .tab-area--outer .main-title h2 {
    font-weight: 500
}

.explore .explore-title {
    background-image: -webkit-gradient(linear,left top,right top,from(#3b82f6),to(#9657d7));
    background-image: linear-gradient(90deg,#3b82f6,#9657d7);
    width: 100%;
    padding: 13px 5px;
    height: 44px;
    font-size: 12px;
    color: #fff;
    font-weight: 600
}

.explore .nav {
    overflow: auto;
    margin: 15px 0 20px 0
}

.explore .explore-card-div {
    height: 8.3rem;
    position: relative;
    border-radius: 14px;
    -webkit-box-shadow: 0 2px 4px 0 hsla(0,0%,75%,.5);
    box-shadow: 0 2px 4px 0 hsla(0,0%,75%,.5);
    margin-bottom: 10px;
    cursor: pointer
}

.explore .explore-card-div .explore-card-BIGimg {
    height: 5.5rem;
    width: 100%;
    border-radius: 10px 10px 0 0;
    -o-object-fit: cover;
    object-fit: cover
}

.explore .explore-card-div .explore-card-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 5px
}

.explore .explore-card-div .explore-card-small-div {
    background: #fcd535;
    width: 25px;
    height: 25px;
    bottom: 14px;
    left: 13px;
    padding: 2px;
    border-radius: 50%
}

.explore .explore-card-div .explore-card-small-div .explore-card-smallImg {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.explore .explore-card-div .explore-card-text {
    position: relative;
    text-align: center;
    font-weight: 600;
    margin: 0 0 0 5px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden!important;
    text-overflow: ellipsis
}

.explore .explore-card-div .explore-card-icon {
    width: 17px;
    height: 17px;
    -webkit-transform: translateX(2px);
    transform: translateX(2px)
}

@media screen and (min-width: 768px) {
    .explore {
        padding:0 5%
    }

    .explore .explore-main {
        padding: 3% 0
    }

    .explore .main-title {
        margin: 3% 0
    }

    .explore .list-area {
        padding: 0 0
    }

    .explore .list-area .explore-card-div {
        height: 14.5rem;
        margin: 5% 0
    }

    .explore .list-area .explore-card-div .explore-card-BIGimg {
        height: 10rem
    }

    .explore .list-area .explore-card-div .explore-card-small-div {
        width: 40px;
        height: 40px
    }

    .explore .list-area .explore-card-div .explore-card-text {
        width: unset;
        margin: 0 10px
    }

    .explore .list-area .explore-card-div .explore-card-icon {
        width: 25px;
        height: 25px
    }
}