.nav-main{
    background: #fff;
}
.nav-search{
    background: #fff;
}
.big-bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("img/join-partner.jpg?v=201710277") no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

.join-box i{
    width: 54px;
    height: 54px;
    background: url("img/go-nextbox-hui_07.png");
    border-radius: 50%;
    display: block;
    margin: 40px auto;
    margin-bottom: 60px;
}
.join-box i:hover{
    cursor: pointer;
}

.join-one{
    width: 100%;
    height: auto;
}
.join-one img{
    display: block;
    margin: 0 auto;
    margin-top: 60px;
}

.join-two{
    width: 100%;
    height: auto;
    background: #fff;
    overflow: hidden;
}
.join-two img{
    display: block;
    margin: 0 auto;
    margin-top: 40px;
}
.join-two i{
    background: url("img/go-nextbox-icon_07.png?v=20171124");
}


.zixun{
    width: 360px;
    height: 40px;
    background: url("img/zixun-bg-24.png");
    margin: 0 auto;
    margin-top: 40px;
    border-radius: 20px;
}
.zixun a{
    display: block;
    width: 100%;
    height: 100%;

}.zixun:hover{
    background: url("img/zixun-bg24-red.png");
    cursor: pointer;
 }
.get-a{
    width: 100%;
}
.get-a a{
    font-size: 20px;
    color: #d51b23;
    text-decoration: underline;
    line-height: 20px;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 24px;
}
.get-a a:hover{
    cursor: pointer;
}

.join-three{
    width: 100%;
    height: auto;
}
.join-three img
{
    display: block;
    margin: 0 auto;
    margin-top: 60px;
}
.join-three p{
    font-size: 24px;
    color: #fff;
    margin-top: 15px;
    text-align: center;
}
.join-three p a{
    font-size: 24px;
    margin: 0 8px;
    color: #d51b23;
}

.join-four{
    width: 100%;
    height: auto;
    background: #fff;
}
.four-main{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.four-main h4{
    margin: 60px auto;
    margin-bottom: 24px;
    font-weight: bold;
    font-size: 28px;
    color: #333;
    text-align: center;
}

.four-main div.ul-box{
    width: 100%;
    height: 550px;
    position: relative;
    background: url("img/four-main-bg-1120.jpg");
    background-size: 100% 100%;
}
.sale-list ul{
    margin: 0;
    padding: 0;
    width:400%;
    position: absolute;
    left: 0;
    top:0;
    margin-top: 20px;

}

.sale-list{
    width: 1040px;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.sale-list ul li{
    float: left;
    width: 240px;
    height: 492px;
    margin:0 10px;
}
.sale-list ul li a{
    display: block;
    width: 240px;
    height: 226px;
    margin: 10px auto;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    float: left;
}
.sale-list ul li a:hover{
    cursor: pointer;
}
.sale-list ul li img{
    display: block;
    width: 100%;
    height: 150px;
}
.sale-list ul li div.none-box{
     width: 100%;
     height: 76px;
    background: #ffffff;
     position: absolute;
     left: 0;
     bottom: 0;

 }

.sale-list ul li h3{
    font-size: 16px;
    color: #333;
    font-weight: normal;
    text-align: left;
    margin-left: 12px;
    line-height: 16px;
    margin-top:10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sale-list ul li p{
    font-size: 12px;
    color: #999;
    line-height: 20px;
    margin-top: 4px;
    text-align: justify;
    padding: 0 12px;
}
.sale-list ul li span{
    font-size: 18px;
    color: #ff6d3b;
    line-height: 18px;
    display: inline-block;
    text-align: center;
    margin: 0 3px;

}

.sale-list ul li a:hover{
    margin: 0;width: 260px;
    height: 246px;
    margin-left: -10px;
    background: #fff;
}

.sale-list ul li a:hover img{
    padding-top: 10px;
    margin-left: 10px;
    width: 240px;
    height: 160px;
}
.sale-list ul li a:hover .none-box{
    left: 10px;
    bottom: 10px;
    width: 240px;
}

.arrow-icon{
    width: 29px;
    height: 58px;
}
.arrow-icon:hover{cursor: pointer}
#arrow-left{
    background: url("img/join-arrow_10.png");
    position: absolute;
    left: 32px;
    top: 50%;
    margin-top: -29px;
}
#arrow-right{
    background: url("img/join-arrow_18.png");
    position: absolute;
    right: 32px;
    top: 50%;
    margin-top: -29px;
}
#arrow-left:hover{
    background: url("img/join-arrow_17.png");
}
#arrow-right:hover{
    background: url("img/join-arrow_12.png");
}

.join-six{
    width: 100%;
    padding-bottom: 50px;
}
.join-six img{
    display: block;
    margin: 0 auto;
    margin-bottom: 60px;
    margin-top: 60px;
}
.join-six .zixun{
    margin-top: 0;
}

.join-five{
    width: 100%;
    background: #fff;
    overflow: hidden;
}
.join-five i{
    background: url("img/go-nextbox-icon_07.png");
}

.explain-main {
    /*margin-top: 40px;*/
}
.content-title-join {
    margin-bottom: 18px;
    font-weight: bold;
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-top: 60px;
}
.content-explain {
    font-size: 16px;
    color: #666;
    text-align: center;
}
.join-finance {
    margin-top: 28px;
    position: relative;
}
.join-left {
    float: left;
    width: 880px;
    margin-left: 34px;
    position: relative;
    z-index: 6;
}
.join-left ul li {
    float: left;    width: 200px;
    height: 144px;
    margin: 0 20px 20px 0;
    position: relative;
}
.join-left ul li:hover{
    width: 220px;
    height: 164px;
    margin: -10px 10px 10px -10px;
}
.join-default{
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}
.join-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: #f8f8f8;
    box-shadow: inset 0 0 8px rgba(213,27,35,0.15);
}
.join-hover p{
    padding: 20px;
    font-size: 16px;
    color: #333;
    text-align: left;
    line-height: 24px;
}

.join-left ul li:hover .join-hover{
    display: block;
}


.default-NO1 {
    background: url(img/comeon-pic1_03.png) no-repeat center center;
}
.default-NO2 {
    background: url(img/comeon-pic2_05.png) no-repeat center center;
}
.default-NO3 {
    background: url(img/comeon-pic3_07.png) no-repeat center center;
}
.default-NO4 {
    background: url(img/comeon-pic4_09.png) no-repeat center center;
}
.default-NO5 {
    background: url(img/comeon-pic5_15.png) no-repeat center center;
}
.default-NO6 {
    background: url(img/comeon-pic6_16.png) no-repeat center center;
}
.default-NO7 {
    background: url(img/comeon-pic7_17.png) no-repeat center center;
}

.join-right {
    width: 472px;
    position: absolute;
    right: 34px;
}
.join-images {
    width: 220px;
    /*margin: 0 auto 20px;*/
    float: right;
}
.join-images img{
    width: 100%;
}
.join-percentage {
    width: 472px;
    height: 144px;
    float: right;
    background: url(img/percentage_03.png) no-repeat center center;
}








.active-iii{
    width: 300px;
    height: 300px;
    position: relative;
    background: #fdb94e;
    margin: 20px auto;
}
.active-iii div{
    display: block;
    position: absolute;
}
.active-iii div h4{
    font-size: 20px;
    color: #e50615;
    text-align: center;
}
.active-iii div span{
    font-size: 14px;
    color: #666;
    text-align: center;
}
.active-iii div.pp1{
    left: -110px;
    top:  30px;
    transform: rotate3d(1,1,1,45deg);
    transform-style: preserve-3d;
    animation: pp 3s infinite;
}

.active-iii div.pp2{
    left: -110px;
    top: 190px;
    transform: rotate3d(1,1,1,45deg);
    transform-style: preserve-3d;
}
.active-iii div.pp3{
    left: auto;
    right: -110px;
    top: 30px;
    transform: rotate3d(1,1,1,45deg);
    transform-style: preserve-3d;
}
.active-iii div.pp4{
    left: auto;
    right: -110px;
    top: 190px;
    transform: rotate3d(1,1,1,45deg);
    transform-style: preserve-3d;
}