li{
    list-style: none;
}
body{
    font-family: 微软雅黑;
}
.join{}
.join .join-part1{}
.join .join-part1 .left{
    width: 50%;
    padding-top: 30vh;
    float: left;
    background: url(/template/pc/skin/images/join-part1.png);
    color: #fff;
    padding-left: 9%;
    height: 100vh;
}
.join .join-part1 .left .ico{
    background: url(/template/pc/skin/images/xico.png)  no-repeat;
    height: 30px;
    width: 30px;
}
.join .join-part1 .left h2{
    font-size: 2.5vh;
    line-height: 4;
    font-weight: 100;
}
.join .join-part1 .left h3{
    font-size: 6vh;
    margin: 0;
    font-weight: bold;
    padding-bottom: 3vh;
}
.join .join-part1 .left p{
    font-size: 1.8vh;
    width: 80%;
    line-height: 2;
}
.join .join-part1 .right{
    float: right;
    background: black;
    width: 50%;
    height: 100vh;
    padding-top: 22vh;
}
.join .join-part1 .right li:hover h2{
    color: #fff
}
.join .join-part1 .right li:hover p{
    color: #fff
}
.join .join-part1 .right li:hover .more{
    background: url(/template/pc/skin/images/morebai.png) 0px 40px no-repeat;
}
.join .join-part1 .right li{
    border: 1px solid #999;
    color: #fff;
    width: 37.4%;
    float: left;
    border-radius: 20px;
    margin: 2%;
    padding: 2% 2%;
    padding-left: 2%;
    height: 34vh;
}
.join .join-part1 .right li h2{
    font-size: 2.5vh;
    color: #999999;
    font-weight: bold;
}
.join .join-part1 .right li p{
    font-size: 1.8vh;
    padding: 14% 0%;
    color: #999999;
}
.join .join-part1 .right li .more{
    line-height: 1;
    background: url(/template/pc/skin/images/morehui.png) 0px 40px no-repeat;
    height: 60px;
    width: 175px;
}
.join .join-part1 .right li .more p{
    font-size: 1.5vh;
}
.join .join-part2{
    clear: both;
}
.join .join-part2 .left{
    width: 50%;
    float: left;
}
.join .join-part2 .left li:nth-child(1){
    background: url(/template/pc/skin/images/join-part2.png);
}
.join .join-part2 .left li:nth-child(2){

background: url(/template/pc/skin/images/join-part2-2.png);

padding-bottom: 15%;
}
.join .join-part2 .left li:nth-child(3){ background: url(/template/pc/skin/images/join-part2-4.png);}
.join .join-part2 .left li:nth-child(4){ background: url(/template/pc/skin/images/join-part2-3.png);}
.join .join-part2 .left li{
    float: left;
    width: 50%;
    height: 50vh;
    padding-top: 15%;
    padding-bottom: 5%;
    color: #fff;
    padding-bottom: 15%;
    text-align: center;
    background: url(/template/pc/skin/images/join-part2.png);
}
.join .join-part2 .left li h3{
    font-size: 1.3rem;
}
.join .join-part2 .left li .line{
    width: 8%;
    height: 1px;
    margin: auto;
    background: white;
}
.join .join-part2 .left li p{
    width: 60%;
    margin: auto;
    margin-top: 4%;
    line-height: 2;
}
.join .join-part2 .right{
    float: right;
    width: 50%;
    color: #fff;
    background: url(/template/pc/skin/images/jon-part2-5.png);
    height: 100vh;
    padding-top: 35vh;
}
.join .join-part2 .right .ico{
    background: url(/template/pc/skin/images/xico.png)  no-repeat;
    height: 30px;
    width: 30px;
    margin-left: 24%;
    margin-bottom: 3vh;
}
.join .join-part2 .right span{
    font-size: 2rem;
    margin-left: 24%;
}
.join .join-part2 .right  p{
    font-size: 6vh;
    margin-left: 24%;
    padding-top: 3vh;
    font-weight: bold;
}
.join .join-part3{
    clear: both;
    background: #000;
    padding-bottom: 35%;
    color: #fff;
    height: 100vh;
}
.join .join-part3 .top{
    padding-top: 10vh;
    text-align: center;
}
.join .join-part3 .top .ico{
    background: url(/template/pc/skin/images/xico.png) no-repeat;
    height: 30px;
    width: 30px;
    margin-left: 24%;
    margin: auto;
    margin-bottom: 3vh;
}
.join .join-part3 .top span{
    font-size: 1.5rem;
}
.join .join-part3 .top p{
    font-size: 6vh;
    padding: 3vh;
    font-weight: bold;
}
.join .join-part3 .fot{
    width: 78%;
    margin: auto;
}
.join .join-part3 .fot li:hover{}
.join .join-part3 .fot li{
    width: 23%;
    float: left;
    border: 1px solid #999999;
    border-radius: 20px;
    padding: 2%;
    margin: 2% 5%;
    height: 26vh;
}
.join .join-part3 .fot li .t{
}
.join .join-part3 .fot li .t .left{
    width: 24%;
    float: left;
}
.join .join-part3 .fot li .t .left .head{
    float: left;
}
.join .join-part3 .fot li .t .left .head img{
    
width: 100%;
    
border-radius: 50%;
}
.join .join-part3 .fot li .t .right{
    float: left;
    margin-left: 6%;
    line-height: 2;
}
.join .join-part3 .fot li .t .right span{
    font-size: 1.2rem;
    font-weight: bold;
}
.join .join-part3 .fot li .t .right p{}
.join .join-part3 .fot li .f{
    clear: both;
}
.join .join-part3 .fot li .f p{
    line-height: 2;
    font-size: 1.5vh;
}
.join .join-part4{
    clear: both;
    color: #fff;
    background: #000;
    padding-bottom: 16%;
    height: 100vh;
    border-bottom: 1px solid #999999;
}
.join .join-part4 .top{
    text-align: center;
    padding-top: 10vh;
}
.join .join-part4 .top .ico{
    background: url(/template/pc/skin/images/xico.png)  no-repeat;
    height: 30px;
    width: 30px;
    margin-left: 24%;
    margin: auto;
    margin-bottom: 2%;
}
.join .join-part4 .top span{
    font-size: 1.5rem;
}
.join .join-part4 .top p{
    font-size: 3rem;
    margin: 1%;
    font-weight: bold;
}

.join .join-part4 .f{
    width: 90%;
    margin: auto;
    padding-top: 10vh;
}
.join .join-part4 .f li:hover span{color:#fff}
.join .join-part4 .f li:hover p{color:#fff;padding: 7% 0;}
.join .join-part4 .f li{
    float: left;
    width: 33%;
}
.join .join-part4 .f li .num{
    font-size: 4rem;
    color: #363636;
    font-weight: bold;
    position: relative;
    top: 60px;
    left: 25px;
}
.join .join-part4 .f li .list{
    position: absolute;
    z-index: 999999999999999;
    margin-left: 1rem;
    margin-top: 1rem;
}
.join .join-part4 .f li span{
    font-size: 1.5rem;
    color: #999999;
    margin-left: 18%;
    z-index: 9999;
    top: 65px;
}
.join .join-part4 .f li p{
    color: #999999;
    margin-left: 18%;
    padding: 7% 0;
}
.join .join-part4 .f .more{
    /* background: url(/template/pc/skin/images/moreb.png) 0px 25px; */
    height: 42px;
    width: 139px;
    background-repeat: no-repeat;
    margin-left: 18%;
    padding-top: 1%;
}
.join .join-part4 .f li:hover .more{
   /* background: url(/template/pc/skin/images/moreb.png) 0px 25px; */
   height: 42px;
   width: 139px;
   background-repeat: no-repeat;
   margin-left: 18%;
   padding-top: 1%;
}
.join .join-part4 .f .more p{
    margin-left: 0%;
    font-size: 12px;
}