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

#main>.content {
    background: #FFF;
    padding   : 0.35rem;
    margin    : 0.1rem auto 0.2rem;
}

#main .content {
    padding-top: 10px;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
}

#main .cover {
    width   : 500px;
    position: relative;
    overflow: hidden;
    cursor  : pointer;
    display : inline-block;
    position: absolute;
    top     : 0px;
}

#main .cover img {
    width  : 100%;
    display: block;
    margin : auto;
}



#main .moer,
#main .join {
    padding       : 0.07rem 0.2rem;
    font-size     : 0.16rem;
    font-family   : SourceHanSansCN-Regular, SourceHanSansCN;
    color         : var(--theme);
    transition    : all 0.3s;
    z-index       : 2;
    position      : relative;
    overflow      : hidden;
}

#main .join {
    font-size       : 0.16rem;
    background-color: #FFF;
    color           : var(--theme);
}

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

}

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

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

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

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

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

#main .item {
    position     : relative;
    margin-bottom: 1rem;
    margin-top   : 0.5rem;
}

#main .info {
    padding-left: calc(0.8rem + 500px);
}

#main .title {
    font-size    : 0.35rem;
    color        : #000;
    padding-top  : 50px;
    margin-bottom: 20px;
    position     : relative;
}

#main .title>img {
    position: absolute;
    bottom  : 70px;
    z-index : -1;
}

#main .title .arr {
    margin-top: 20px;
}

#main .title .arr img {
    width: 20px;
}

#main .desc {
    height: 2.8rem;
}



/*  */
#main .items {
    width        : calc(100% - 0.15rem);
    margin       : auto;
    margin-bottom: 0.2rem;
    border-radius: 0.03rem;
    overflow     : hidden;
}

#main .items .cover-bg {
    height             : 300px;
    background-image   : url("http://china-beauty-test.oss-cn-shenzhen.aliyuncs.com/official/vcavnu45v0094ba7jfncnita.png");
    background-repeat  : no-repeat;
    background-size    : cover;
    background-position: center center;
}

#main .items .cover-bg img {
    object-fit: cover;
    width     : 100%;
    height    : 100%;
    display   : block;
}

#main .cover-info {
    padding            : 0px 0.15rem;
    height             : 100%;
    width              : 2.2rem;
    background         : var(--theme);
    text-align         : center;
    display            : -webkit-flex;
    display            : flex;
    -webkit-align-items: center;
    align-items        : center;
}

#main .cover-info>div {
    width: 100%;
}

#main .cover-right {
    background-color: #333;
}

#main .cover-title {
    color    : #FFF;
    font-size: 0.28rem;
}

#main .cover-desc {
    margin       : 0.1rem 0rem;
    color        : #efefef;
    font-size    : 0.16rem;
    margin-bottom: 0.4rem;

}



#main .ivu-col:nth-child(2) .cover-info,
#main .ivu-col:nth-child(3) .cover-info,
#main .ivu-col:nth-child(6) .cover-info,
#main .ivu-col:nth-child(7) .cover-info {
    background-color: #333;
}


#main .cover-right .join,
#main .ivu-col:nth-child(2) .cover-info .join,
#main .ivu-col:nth-child(3) .cover-info .join,
#main .ivu-col:nth-child(6) .cover-info .join,
#main .ivu-col:nth-child(7) .cover-info .join {
    color           : #fff;
    background-color: var(--theme);
}



#main .style2-item {
    margin        : 0.3rem;
    padding       : 0.4rem;
    background    : #F7F7F7;
    padding-bottom: 0.35rem;
}

#main .style2-item .style2-cover {
    width        : 100%;
    height       : 3rem;
    overflow     : hidden;
    margin-bottom: 0.3rem;
}

#main .style2-item .style2-cover img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: all 0.3s;
}

#main .style2-item .style2-cover-title {
    font-size  : 0.24rem;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color      : #2F2F2F;
    line-height: 57px;
}

#main .style2-item .style2-cover-desc {
    color      : #FFA1A5FF;
    font-style : italic;
    font-weight: bold;
}

#main .style2-next {
    position        : absolute;
    top             : 0px;
    bottom          : 0px;
    right           : 0px;
    margin          : auto;
    width           : 0.45rem;
    height          : 0.45rem;
    line-height     : 0.52rem;
    background-color: #FFA1A5FF;
    color           : #FFF;
    text-align      : center;
    border-radius   : 100%;
    padding-left    : 2px;
}

#main .style2-item:hover .style2-cover img {
    transform: scale(1.5);
}