.rJoinCont{
    background: #f7f7f7 url(../image/rJoinCont-bg.png) no-repeat center 80px;
}

.rJoinCont .topTitle{
    padding: 70px 0 35px;
}
.rJoinCont .seleteBox{
    padding: 30px;
    background-color: #f0eee9;
    border: 1px solid #e0ded9;
}
.rJoinCont .seleteList{
    overflow: hidden;
}
.rJoinCont .seleteBox dl{
    margin-bottom: 16px;
}
.rJoinCont .seleteBox dl dt{
    float: left;
    font-size: 14px;
    color: #666666;
    line-height: 30px;
}
.rJoinCont .seleteBox dl dd{
    display: table-cell;
}
.rJoinCont .seleteBox dl dd ul{
    margin-right: -14px;
    font-size: 0;
}
.rJoinCont .seleteBox dl dd li{
    display: inline-block;
    margin-right: 14px;
    font-size: 14px;
    color: #999999;
    padding: 0 14px;
    border-radius: 1000px;
    line-height: 30px;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 4px;
}
.rJoinCont .seleteBox dl dd li.on{
    background-color: #f63b2e;
    color: #FFF;
}
.rJoinCont .searchInp{
    height: 50px;
    overflow: hidden;
    margin-top: 10px;
}
.rJoinCont .searchInp input{
    float: left;
    width: 630px;
    height: 50px;
    border: 0;
    background-color: #FFF;
    color: #666;
    padding: 0 15px;
    box-sizing: border-box;
    outline:0 none;
}
.rJoinCont .searchInp input::-webkit-placeholder{
    color: #d9d9d9;
}
.rJoinCont .searchInp input::placeholder{
    color: #d9d9d9;
}
.rJoinCont .searchInp button{
    float: left;
    color: #FFF;
    background: #f63b2e url(../image/rJoinCont-search-ic.png) no-repeat 25px center;
    padding-left: 52px;
    text-align: left;
    border: 0;
    height: 50px;
    line-height: 50px;
    width: 135px;
    cursor: pointer;
    outline:0 none;
}

.rJoin-data{
    padding: 40px 0 70px;
}
.rJoin-data .tips{
    margin-bottom: 24px;
    color: #999999;
    vertical-align: bottom;
}
.rJoin-data .tips em{
    color: #f63b2e;
    font-size: 24px;
    font-style: normal;
    font-family: Montserrat-Regular;
    letter-spacing: -1px;
    line-height: 1;
}
.rJoin-data .listData{
    overflow: hidden;
    margin-right: -10px;
}

.rJoin-data .listData .box{
    float: left;
    width: 595px;
    height: 147px;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 24px 30px 0 90px;
    background: #ffffff url(../image/rJoinCont-ry-ic.png) no-repeat 29px 26px;
    border: 1px solid #e6e6e6;
    cursor: pointer;
}

.rJoin-data .listData .box h4{
    color: #56565a;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 10px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;

}
.rJoin-data .listData .box ul{
    font-size: 0;
    margin-right: -30px;
}
.rJoin-data .listData .box ul li{
    display: inline-block;
    color: #bebebe;
    font-size: 14px;
    margin-right: 30px;
}
.rJoin-data .listData .box:hover{
    border: 1px solid #f63b2e;
}
.rJoin-data .listData .box:hover h4{
    color: #f63b2e;
}

.rJoin-pop{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
}
.rJoin-pop var{
    background-color: #000;
    opacity: .5;
    filter: alpha(opacity=50);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.rJoin-pop .pop-cont{
    width: 920px;
   
    background-color: #FFF;
    position: absolute;
    left: 0;
    right: 0;
    top: 14%;
    margin: auto;
}
.rJoin-pop .pop-cont .Cont{
    max-height: 70vh;
    overflow: auto;
    padding: 50px ;
}
.rJoin-pop .pop-cont .Cont p{
    color: #888888;
    margin-bottom: 7px;
}
.rJoin-pop .pop-cont .close{
    width: 60px;
    height: 60px;
    background: url(../image/rJoinCont-pop-close.png) no-repeat 0 0;
    position: absolute;
    right: 0;
    top: -70px;
    cursor: pointer;
}

.rJoin-pop .pop-cont .top{
    /* margin-bottom: 30px; */
}
.rJoin-pop .pop-cont .top h3{
    color: #f63b2e;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 14px;
}
.rJoin-pop .pop-cont .top li{
    display: inline-block;
    color: #888888;
    margin-right: 25px;

}
.rJoin-pop .pop-cont .cont{
    padding-top: 10px;
}
.rJoin-pop .pop-cont .cont h5{
    color: #616161;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 9px;
    margin-top: 20px;

}
.rJoin-pop .pop-cont .cont p{
    color: #888888;
    line-height: 25px;
    padding-bottom: 7px;
}
.rJoin-pop .pop-cont .ps{
    margin-top: 40px;
    border-top: 1px solid #e3e3e3;
    padding-top: 34px;
    color: #666666;
}
.rJoin-pop .pop-cont .ps p,
.rJoin-pop .pop-cont .ps a{
    color: #b8b8b8;
    display: inline-block;
    margin-right: 20px;
    cursor: default;
}

@media (max-width:1200px){
    .rJoinCont{
        padding: 50px 20px;
    }
    .rJoin-data .listData .box{
        width: calc(50% - 10px);
        height: 154px;
    }

    .rJoin-pop .pop-cont{
        width: calc(100% - 50px);

    }
}
@media (max-width:890px){
    .rJoinCont .searchInp input{
        width: calc(100% - 135px);
    }
    .rJoin-data .listData .box{
        height: 183px;
    }
}
@media (max-width:750px){
    .rJoinCont .topTitle{
        padding-top: 0;
    }
    .rJoinCont .seleteBox dl dt{
        float: none;
        display: block;
    }
    .rJoinCont .seleteBox dl dd{
        float: none;
        display: block;
    }
    .rJoinCont .seleteBox dl dd ul{
        margin-right: 0;
    }
    .rJoinCont .seleteBox dl dd li{
        margin-right: 0;
        font-size: 12px;
        padding: 0 10px;
        line-height: 26px;
    }
    .rJoinCont .seleteBox{
        padding: 20px 15px;
    }
    .rJoinCont .searchInp{
        margin-top: 0;
    }
    .rJoinCont .searchInp button{
        width: 100px;
        padding-left: 35px;
        background: #f63b2e url(../image/rJoinCont-search-ic.png) no-repeat 10px center;
    }
    .rJoinCont .searchInp input{
        width: calc(100% - 100px);
    }
    .rJoinCont .seleteBox dl dt{
        margin-bottom: 4px;
    }
    .rJoin-data{
        padding: 30px 0 0px;
    }
    .rJoin-data .listData .box{
        width: 100%;
        height: auto;
        padding: 24px 20px 0 80px;
        padding-bottom: 20px;
        margin-right: 0;
        background: #ffffff url(../image/rJoinCont-ry-ic.png) no-repeat 23px 26px;
    }
    .rJoin-data .listData{
        margin-right: 0;
    }
    .rJoin-data .listData .box ul{
        margin-right: 0;
    }
    .rJoin-data .listData .box ul li{
        display: block;
        margin-right: 0;
    }

    #myPage .spage-number button{
        width: 26px ;
        font-size: 14px ;
    }
    #myPage .spage-number{
        display: flex;
        justify-content: space-between;
    }
    #myPage .spage-number button[data-page="prev"], .spage-number button[data-page="next"]{
        width: 30px ;
        height: 40px ;
    }
    .rJoin-pop .pop-cont .Cont{
        padding: 30px 20px;
    }
    .rJoin-pop .pop-cont .top h3{
        font-size: 20px;
    }
    .rJoin-pop .pop-cont .top li{
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
        margin-right: 0;
    }
    .rJoin-pop .pop-cont .top{
        /* margin-bottom: 20px; */
    }
    .rJoin-pop .pop-cont p{
        font-size: 14px;
    }
    .rJoin-pop .pop-cont .close{
        zoom: .6;
    }
}