body,
html {
    /* background: var(--bg); */
}

.content {
    padding-top: 10px;
}

.cover {
    width   : 100%;
    height  : 4rem;
    overflow: hidden;
}

.cover img {
    width     : 100%;
    display   : block;
    object-fit: cover;
}



.moer,
.join {
    padding         : 0.07rem 0.2rem;
    font-size       : 0.28rem;
    font-family     : SourceHanSansCN-Regular, SourceHanSansCN;
    color           : var(--theme);
    border          : 1px solid var(--theme);
    transition      : all 0.3s;
    z-index         : 2;
    position        : relative;
    /* overflow     : hidden; */
    margin          : auto;
    margin-bottom   : 0.3rem;
    display         : block;
    width           : 3rem;
    line-height     : 25px;
}

.join {
    font-size       : 0.26rem;
    /* background   : var(--theme);
    color           : #FFF; */
    background-color: #FFF;
    color           : var(--theme);
}

.moer {
    padding   : 6px;
    color     : #fff;
    border    : none;
    position  : absolute;
    left      : 0px;
    right     : 0px;
    bottom    : 60px;
    background: rgba(0, 0, 0, 0.5);
}

.moer::after {
    content: attr(data-foo) " ";
    width  : 100%;
    height : 100%;
    display: block;
    border : 2px solid #FFF;
}

.moer a {
    color: var(--theme);

}

.moer span,
.join span {
    font-size : 0.32rem;
    transform : translate(4px, 2px);
    display   : inline-block;
    transition: transform 0.3s;
}

.join:hover {
    background-color: #FFF;
    color           : var(--theme);
}

.moer:hover {
    background-color: var(--theme);
    color           : #FFF;
}

.moer:hover span,
.join:hover span {
    transform: translate(10px, 2px);
}

.swiper-slide img {
    width     : 100%;
    display   : block;
    margin    : auto;
    object-fit: cover;
}

.content .item {
    position        : relative;
    /* margin-top   : 0.5rem; */
    padding         : 0.3rem 0.5rem;
}

.content .item:last-child .arr {
    display: none;
}

.title i {
    position   : absolute;
    bottom     : 0.15rem;
    z-index    : -1;
    left       : 0px;
    right      : 0px;
    margin     : auto;
    width      : 1rem;
    font-size  : 0.82rem;
    color      : #e5e5e5;
    font-weight: bold;
}

.info {
    text-align     : center;
    /* padding-left: calc(0.8rem + 500px); */
}

.title {
    font-size  : 0.52rem;
    color      : #000;
    padding-top: 0.5rem;
    position   : relative;
    text-align : center;
}

.title>img {
    position: absolute;
    bottom  : 0.5rem;
    z-index : -1;
    left    : 0px;
    right   : 0px;
    margin  : auto;
    width   : 1rem;
}

.arr {
    padding-top: 20px;
}

.arr img {
    width: 20px;
}

.desc {
    /* height: 2.8rem; */
    margin     : auto;
    width      : 80%;
    padding    : 0.3rem 0px;
    font-size  : 0.28rem;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    color      : #717071FF;
}