/* 关于 */
.pbox{width: 66.66%;margin-left: 20.8%;}

.p_100{padding: 100px 0;}

.pb_120{padding-bottom: 120px;}

.p_200_100{padding: 200px 0 100px;}

.join_banner{z-index: 3;}

.join_banner .ban_con{position: relative;}

.join_banner .ban_con img{width: 100%;}

.join_banner .ban_con .txt{position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding-top: 175px;}

.join_banner .ban_con .txt .ts{width: 1120px;margin: 0 auto;color: #fff;}

.join_banner .ban_con .txt .ts .t1{display: flex;align-items: center;margin-bottom: 150px;}

.join_banner .ban_con .txt .ts .t1 a{color: #fff;}

.join_banner .ban_con .txt .ts .t1 {}

.join_banner .ban_con .txt .ts .t2{margin-bottom: 50px;letter-spacing:1.2px;}

.join_banner .ban_con .txt .ts .t3{line-height: 70px;}

.join_banner .ban_con .txt .ts .t4{line-height: 70px;}


.join_banner .ban_con .txt .ts .t1 a:first-child{margin-right: 15px;}

.join_banner .ban_con .txt .ts .t1 a:hover{color: #007440;}


/* 插画背景 */
.bei{}

.beijingh {position: relative;overflow: hidden;background: url(../img/abb.jpg)  no-repeat;background-size: cover;}

.beijingh  .biejt{position: absolute;left: 0;top: 0;width: 100%;height: 0;overflow: hidden;}

.beijingh  .biejt img{width: 100%;max-height:none;}

.beijingh  .biejt{}

.maodian{position: absolute;left: 0;top: -80px;width: 100%;height: 1px;}

.join1{position: relative;z-index: 5;background: url(../img/ab1_b.png) right top no-repeat;background-size: cover;}

.join1 .jo1_con{
    height: auto;
}
.join1 .jo1_con .con1{
    margin: 100px 0 130px;
}
.join1 .jo1_con .jo1img{
    width: 100%;
    height: auto;
}
.join1 .jo1_con .jo1img img{
    width: 100%;
    margin-left: 0%;
    height: auto;
}
.join1 .jo1_con .jo1box {
    width: 35.4%;
    background: white;
    border-radius: 20px 0 20px 0;
    position: absolute;
    bottom: -30px;
    right: 12.5%;
    color: #222222;
    padding: 2.6% 2.6% 5.7% 2.6%;
    box-sizing: border-box;
}
.join1 .jo1_con .jo1box .jo1box_1span{ margin-bottom: 35px;}

.join1 .jo1_con .jo1box .jo1box_1span img{ width: 40%;}

.join1 .jo1_con .jo1box .jo1box_2span{ margin-bottom: 18px; line-height: 32px;}

.join1 .jo1_con .jo1box .jo1box_3span{  line-height: 30px;  font-weight: lighter;}

.join2{position: relative;z-index: 5;background: url(../img/ab1_b.png) right top no-repeat;background-size: cover;}

.join2 .jo2_con{ height: auto;}

.join2 .jo2_con .con1{  margin: 100px 0 120px;}

.join2 .jo2_con .jo1img{ width: 100%; height: auto;}

.join2 .jo2_con .jo1img img{ width: 100%; margin-left: 0%; height: auto;}

.join2 .jo2_con .jo1box{  width: 33.5%;  height: 73%; background: white;  position: absolute; top: 14%;  color: #222222; padding: 4.2% 3.15%; box-sizing: border-box;}

.join2 .jo2_con .jo1box .jo1box_2span{ margin: 40px 0 25px;}

.join2 .jo2_con .jo1box .jo1box_3span{ line-height: 34px;font-weight: lighter;}

.join3{position: relative;z-index: 5;}

.join3 .con1{display: flex;flex-direction: row;}

.join3 .con1 .jo3_box{
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-right: 2%;
    overflow: hidden;
}
.join3 .con1 .jo3_box .jo3_tit{
   width: 27.5%;
   height: 100px;

}
.join3 .con1 .jo3_box .jo3_text{
   width: auto;
   flex: 1;
   height: 100px;
   padding-right: 16%;
   line-height: 31px;
}

.join4{position: relative;z-index: 5;}

.join4 .jo4_con .con1{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 840px;
    display: flex;
    flex-direction: column;
}

.join4 .jo4_con .con1 .jo4_box1{
    width: 100%;
    height: auto;
    flex: 1;
    background: url(../img/jh3_1.jpg) no-repeat;
    -moz-background-size:100% 100%; background-size:100% 100%;
    position: relative;
}
.join4 .jo4_con .con1 .jo4_box1 .jo4_box1con{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(60, 150, 168,0.8);
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
/* .join4 .jo4_con .con1 .jo4_box1:hover .jo4_box1con{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(60, 150, 168,1);
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: column;
    
} */
.join4 .jo4_con .con1 .jo4_box1 .jo4_box1con img{
    width: 120px;
    height: auto;
    position: absolute;
    right: 40px;
    top: 40px;
}

.join4 .jo4_con .con1 .jo4_box1 .jo4_box1con .span1{
    color: white;
    margin-top: 90px;
    text-align: right;
    padding-right: 40px;
    opacity: 0;
}

.join4 .jo4_con .con1 .jo4_box1 .jo4_box1con .span2{
    color: white;
    margin-top: 20px;
    text-align: right;
    padding-right: 40px;
    opacity: 0;
    line-height: 30px;
    font-weight: lighter;
}
.join4 .jo4_con .con1 .jo4_box1:hover .jo4_box1con .span1{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box1:hover .jo4_box1con .span2{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box2{
    width: 100%;
    height: auto;
    flex: 1;
    display: flex;
    flex-direction: row;
}
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: url(../img/jh3_2.jpg) no-repeat;
    -moz-background-size:100% 100%; background-size:100% 100%;
    position: relative;
}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(253, 113, 49,0.8);
    -moz-background-size:100% 100%; background-size:100% 100%;
    padding: 40px 0 0 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1:hover .jo4_box2_1con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(253, 113, 49,1);
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: column;
} */
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con img{
    width: 112px;
    height: 30px;
    position: absolute;
    right: 40px;
}
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con .span1{
    color: white;
    margin-top: 50px;
    text-align: right;
    font-weight: 700;
    padding-right: 40px;
    opacity: 0;
}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con .span2{
    line-height: 30px;
    color: white;
    margin-top: 20px;
    text-align: right;
    padding-right: 40px;
    opacity: 0;

}
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1:hover .jo4_box2_1con .span1{
 
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1:hover .jo4_box2_1con .span2{
    opacity: 1;

}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2{
    width: auto;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    background: url(../img/jh3_3.jpg) no-repeat;
    -moz-background-size:100% 100%; background-size:100% 100%;
    position: relative;
}
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(22, 103, 184,0.8);
    -moz-background-size:100% 100%; background-size:100% 100%;
    padding: 40px 0 0 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
/* .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2:hover .jo4_box2_2con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(22, 103, 184,1);
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: column;
} */
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con img{
    width: 112px;
    height: 30px;
    position: absolute;
    right: 40px;
}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con .span1{
    color: white;
    margin-top: 50px;
    text-align: right;
    font-weight: 700;
    padding-right: 40px;
    opacity: 0;
}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con .span2{
    color: white;
    margin-top: 20px;
    text-align: right;
    padding-right: 40px;
    opacity: 0;
    line-height: 30px;
}
.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2:hover .jo4_box2_2con .span1{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2:hover .jo4_box2_2con .span2{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box3{
    width: 100%;
    height: auto;
    flex: 1;
    background: url(../img/jh3_5.jpg) no-repeat;
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: row;
}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: url(../img/jh3_4.jpg) no-repeat;
    -moz-background-size:100% 100%; background-size:100% 100%;
    position: relative;
}
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(28, 118, 77,0.8);
    -moz-background-size:100% 100%; background-size:100% 100%;
    padding: 40px 0 0 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1:hover .jo4_box3_1con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(28, 118, 77,1);
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: column;
} */
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con img{
    width: 112px;
    height: 30px;
    position: absolute;
    right:40px;
}
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con .span1{
    color: white;
    margin-top: 50px;
    text-align: right;
    font-weight: 700;
    padding-right: 40px;
    opacity: 0;
}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con .span2{
    color: white;
    margin-top: 20px;
    text-align: right;
    padding-right: 40px;
    opacity: 0;
    line-height: 30px;
}
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1:hover .jo4_box3_1con .span1{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1:hover .jo4_box3_1con .span2{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(123, 73, 27,0.8);
    -moz-background-size:100% 100%; background-size:100% 100%;
    padding: 40px 0 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2:hover .jo4_box3_2con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: rgba(123, 73, 27,1);
    -moz-background-size:100% 100%; background-size:100% 100%;
    display: flex;
    flex-direction: column;
} */
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con img{
    width: 112px;
    height: 30px;
    position: absolute;
    right: 40px;
}
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con .span1{
    
    color: white;
    margin-top: 50px;
    text-align: right;
    font-weight: 700;
    padding-right: 40px;
    opacity: 0;
}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con .span2{
    color: white;
    margin-top: 20px;
    text-align: right;
    padding-right: 40px;
    opacity: 0;
    line-height: 30px;
}
.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2:hover .jo4_box3_2con .span1{
    opacity: 1;
}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2:hover .jo4_box3_2con .span2{
    opacity: 1;
}

.join5{padding-bottom: 150px;position: relative;z-index: 5;}

.join5 .con1{margin-bottom: 50px;
width: 100%;
height: 364px;
}
.join5 .con1 .jo5box1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.join5 .con1 .jo5box1 .jo5le{
    width: auto;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    background:  url(../img/jo5_1.png)  no-repeat;
    -moz-background-size:100% 100%; background-size:100% 100%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    padding: 50px; box-sizing: border-box;
}
.join5 .con1 .jo5box1 .jo5le .jo5le_title{
font-weight: 700;
}
.join5 .con1 .jo5box1 .jo5le .jo5le_xian{
    width: 100%;
    height: 1px;
    background: #ecedef;
    margin: 30px 0;
}
.join5 .con1 .jo5box1 .jo5le .jo5le_box{
   flex: 1;
   width: 100%;
   display: flex;
   flex-direction: row;
} 
.join5 .con1 .jo5box1 .jo5le .jo5le_box .jo5lebox1{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
 } 
 .join5 .con1 .jo5box1 .jo5le .jo5le_box .jo5lebox1 span{
 display: block;
 border: 1px solid #ecedef;
 border-radius: 50px;
 width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
margin-right: 20px;
 } 
 .join5 .con1 .jo5box1 .jo5le .jo5le_box .jo5leboxxian{
   width: 1px;
   height: 100%;
   background: #ecedef;
   margin-right: 40px;
 } 
 .join5 .con1 .jo5box1 .jo5le .jo5le_box .jo5lebox2{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
 } 

 .join5 .con1 .jo5box1 .jo5le .jo5le_box .jo5lebox2 span{
    display: block;
    border: 1px solid #ecedef;
    border-radius: 50px;
    width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
margin-right: 20px;
} 

.join5 .con1 .jo5box1 .jo5ri{
    width: auto;
    /* flex: 1; */
    height: 100%;
    display: flex;
    flex-direction: row;
    z-index: 10;


}
.join5 .con1 .jo5box1 .jo5ri .imgname{
    position: absolute;
    color: white;
    padding: 30px 0px;
    width: 15%;
    border-bottom: 1px solid #fff;
    top: 43%;
    margin-left: 2%;
    font-weight: 700;

}

.join5 .con1 .jo5box1 .jo5ri img{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.join5 .con1 .jo5box2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    top: -100%;
}
.join5 .con1 .jo5box2 .jo5le{
    width: auto;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    background:  url(../img/jo5_1.png)  no-repeat right;
    -moz-background-size:100% 100%; background-size:100% 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    padding: 50px; box-sizing: border-box;
}
.join5 .con1 .jo5box2 .jo5le .jo5le_title{
font-weight: 700;
}
.join5 .con1 .jo5box2 .jo5le .jo5le_xian{
    width: 100%;
    height: 1px;
    background: #ecedef;
    margin: 30px 0;
}
.join5 .con1 .jo5box2 .jo5le .jo5le_box{
   flex: 1;
   width: 100%;
   display: flex;
   flex-direction: row;
} 
.join5 .con1 .jo5box2 .jo5le .jo5le_box .jo5lebox1{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
 } 
 .join5 .con1 .jo5box2 .jo5le .jo5le_box .jo5lebox1 span{
 display: block;
 border: 1px solid #ecedef;
 border-radius: 50px;
 width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
margin-right: 20px;
 } 
 .join5 .con1 .jo5box2 .jo5le .jo5le_box .jo5leboxxian{
   width: 1px;
   height: 100%;
   background: #ecedef;
   margin-right: 40px;
 } 
 .join5 .con1 .jo5box2 .jo5le .jo5le_box .jo5lebox2{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
 } 

 .join5 .con1 .jo5box2 .jo5le .jo5le_box .jo5lebox2 span{
    display: block;
    border: 1px solid #ecedef;
    border-radius: 50px;
    width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
margin-right: 20px;
} 

.join5 .con1 .jo5box2 .jo5ri{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    z-index: 10;

}
.join5 .con1 .jo5box2 .jo5ri .imgname{
    position: absolute;
    color: white;
    padding: 30px 0px;
    width: 15%;
    border-bottom: 1px solid #fff;
    top: 66%;
    margin-left: 2%;
    font-weight: 700;

}
.join5 .con1 .jo5box2 .jo5ri img{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.ons{
    opacity: 0;
    animation: opat 0.5s;
}
.ons2{
    opacity: 1;
    animation: opat2 0.5s;
}

@keyframes opat {0% {opacity: 1;}100% { opacity: 0;}}
@keyframes opat2 {0% {opacity: 0;}100% { opacity: 1;}}





.anfeny{display: flex;justify-content: center;line-height: 53px;position: absolute;bottom: 0;width: 100%;}

.anfeny .lls{position: relative;bottom: 0;width: auto;}

.ab5_prev,.ab5_next{width: 53px;height: 53px;background: url(../img/ab5_7.png) center no-repeat;background-size: 100% 100%;outline: none;}

.ab5_next{transform: rotate(180deg);}

.anfeny .ab5_prev,.anfeny .ab5_next{top: 0;margin: 0;opacity: 1;}

.anfeny .anan{width: 115px;position: relative;height: 53px;margin-left: 40px;}

.anfeny .ab5_prev{left: 0;}

.anfeny .ab5_next{right: 0px;}

.ab5_prev:hover,.ab5_next:hover{background: url(../img/ab5_8.png) center no-repeat;background-size: 100% 100%;}

.life1{background: url(../img/life1_1.jpg)  no-repeat;position: relative;z-index: 5;padding: 100px 0 80px;}

.life1 .con1{margin-bottom: 140px;}

.life1 .con1 img{display: block;margin: 0 auto;max-width: 1280px;}

.life1 .con2 .ul{display: flex;flex-wrap: wrap;justify-content: space-between;}

.life1 .con2 .ul .li{width: 49%;position: relative;overflow: hidden;margin-bottom: 20px;}

.life1 .con2 .ul .li .img img{width: 100%;}

.life1 .con2 .ul .li .img{position: relative;}

.life1 .con2 .ul .li .d{position: absolute;left: 0;width: 100%;bottom: 30px;color: #fff;padding: 0 30px;}

.life1 .con2 .ul .li .txt{position: absolute;left: 0;top: 100%;width: 100%;height: 100%;background: rgba(25,129,83,0.96);color: #fff;padding: 10px 30px ;}

.life1 .con2 .ul .li .txt .t1{line-height: 75px;border-bottom: 1px dotted rgba(255,255,255,0.3);margin-bottom: 15px;}

.life1 .con2 .ul .li .txt .t2{line-height: 32px;}

.life1 .con2 .ul .li .txt .t2 span{display: block;margin-bottom: 13px;}

.life1 .con2 .ul .li:hover .txt{top: 0;}

.life1 .con2 .ul .li:hover .d{opacity: 0;}

.life2{background: url(../img/life3_1.jpg) no-repeat;background-size: cover;position: relative;z-index: 5;padding: 80px 0;}

.life2 .con1{text-align: center;color: #fff;margin-bottom: 50px;}

.life2 .con2  .life3_sw{padding-bottom: 90px;}

.life2 .con2 .ss{display: flex;}

.life2 .con2 .ss .sl{width: 67%;background:#fff;padding: 120px 55px 60px 70px ;position: relative;}

.life2 .con2 .ss .sr{width: 33%;}

.life2 .con2 .ss .sr img{width: 100%;}

.life2 .con2 .ss .sl .l1{color: #198152;}

.life2 .con2 .ss .sl s{display: block;width: 30px;height: 6px;background: #fe8a0b;margin: 25px 0 35px;}

.life2 .con2 .ss .sl .l2{margin-bottom: 30px;}

.life2 .con2 .ss .sl .l3{line-height: 30px;}

.as1{width: 170px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 100px;background: #fe8a0b;color: #fff;margin-right: 25px;}

.as1 img{margin-left: 10px;}

.as2{width: 50px;height: 50px;border-radius: 100%;background: #fe8a0b;}

.life2 .con2 .ss .sl .l4 .le{display: flex;}

.life2 .con2 .ss .sl .l4{display: flex;justify-content: space-between;position: absolute;bottom: 60px;width: 100%;left: 0;padding: 0 55px 0 70px;}


.join4 .jo4_con .con1 .jo4_box1::after{content: "";width: 100%;height: 0%;position: absolute;left: 0;bottom: 0;background: rgba(60, 150, 168,1);transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box1:hover::after{height: 100%;transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1::after{content: "";width: 100%;height: 0%;position: absolute;left: 0;bottom: 0;background: rgba(253, 113, 49,1);transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1:hover::after{height: 100%;transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2::after{content: "";width: 100%;height: 0%;position: absolute;left: 0;bottom: 0;background:rgba(22, 103, 184,1);transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2:hover::after{height: 100%;transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1::after{content: "";width: 100%;height: 0%;position: absolute;left: 0;bottom: 0;background: rgba(28, 118, 77,1);transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1:hover::after{height: 100%;transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2::after{content: "";width: 100%;height: 0%;position: absolute;left: 0;bottom: 0;background: rgba(123, 73, 27,1);transition: all 0.6s;}

.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2:hover::after{height: 100%;transition: all 0.6s;}
@media screen and (max-width:2360px) {
}
@media screen and (max-width:2260px) {
}
@media screen and (max-width:2160px) {
}
@media screen and (max-width:2060px) {
}

@media screen and (max-width:1920px) {
 
}
@media screen and (max-width:1820px) {
   
}
@media screen and (max-width:1680px) {
    .join2 .jo2_con .jo1box{padding: 30px;}
}
@media screen and (max-width:1560px) {
   
}
@media screen and (max-width:1440px) {

}
@media screen and (max-width:1360px) {

}
@media screen and (max-width:1025px) {
    .f_16{font-size: 14px;}
    .f_20{font-size: 16px;}
    .f_22{font-size: 18px;}
    .f_24{font-size: 18px;}
    .f_26{font-size: 18px;}
    .f_28{font-size: 20px;}
    .f_30{font-size: 20px;}
    .f_32{font-size: 22px;}
    .f_36 {font-size: 22px;}
    .f_40{font-size: 22px;}
    .f_42{font-size: 24px;}
    .f_44{font-size: 24px;}
    .f_48{font-size: 24px;}
    .f_50{font-size: 24px;}
    .f_54{font-size: 26px;}
    .f_56{font-size: 26px;}
    .f_60{font-size: 30px;}
    .f_64{font-size: 36px;}
    .f_72{font-size: 22px;}
    .f_76{font-size: 24px;}
    .f_88{font-size: 24px;}
    .f_100{font-size: 50px;}
    .pc{
        display: none;
    }
    .yd{
        display: block;
    }
    .cedao{
        display: none;
    }

    .pbox {  width: calc(100% - 40px); margin: 0 20px; }

    .join1 {
        position: relative;
        z-index: 5;
        width: 100vw;
        margin: 0;
    }
    .join1 .jo1_con .con1 {
        margin: 0px;
    }
    .join1 .jo1_con {
        padding: 20px 0;
    }
    .join1 .jo1_con .jo1box {
        width: 100%;
        height: 66%;
        background: white;
        border-radius: 0 0 20px 20px;
        position: relative;
        right: 0%;
        color: #222222;
        padding: 20px;
        box-sizing: border-box;
        top:0;
    }
    .join1 .jo1_con .jo1img img {
        width: 100%;
        margin-left: 0%;
        height: auto;
    }

    .join2 {
        position: relative;
        z-index: 5;
        width: 556px;
        margin: 20px 0 0;
        width: 100vw;
    }
    .join2 .con1 {
        margin: 100px 0 180px;
        height: auto;
        display: flex;
        border-radius: 15px;
        flex-direction: column;
    }

    .join3 {
        position: relative;
        z-index: 5;
        width: 100vw;
    }

    .join3 .con1 {
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
    }

    .join4 { position: relative; z-index: 5; width: 100vw; }

    .join4 .jo4_con{width: 100%;}

    .join5 { position: relative; z-index: 5; width: 100vw; padding-bottom: 0px; height: auto; }

    .join2 .jo2_con .con1{  margin: 20px 0 20px;}

    .join2 .jo2_con .jo1box {  width: 100%;  height: auto; background: white;  position: relative; top: 0%; color: #222222; padding: 20px; box-sizing: border-box; border-radius: 0 0 20px 20px; }

    .join3 .con1 { margin-bottom: 20px; display: block; }

    .join3 .con1 .jo3_box { display: block; margin-right: 0; }

    .join3 .con1 .jo3_box .jo3_tit { width: 100%; height: auto; margin-bottom: 10px;}

    .join3 .con1 .jo3_box .jo3_text { width: 100%;  height: auto; padding-right: 0%; }

    .join4 .jo4_con .con1 .jo4_box2 { width: 100%; display: block; }

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 { width: 100%; height: 100%; display: flex; }

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con img { right: 40px; }

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con { height: auto;  padding: 40px 20px 0px;}

    .join4 .jo4_con .con1 .jo4_box1{background-size: cover;}

    .join4 .jo4_con .con1 .jo4_box1 .jo4_box1con .span1{opacity: 1;}

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con .span1 { opacity: 1;padding-right: 20px;}

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1{background-size: cover;}

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2{background-size: cover;width: 100%;}

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con .span2 { opacity: 1; padding-bottom: 20px; padding-right: 20px;}

    .join4 .jo4_con .con1 .jo4_box1 .jo4_box1con .span2 {  opacity: 1;padding:0 40px 20px 20px; }

    .join4 .jo4_con .con1 { height: auto; }

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con .span1 { padding-right: 20px; opacity: 1; }

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con .span2 { padding-right: 20px; opacity: 1; padding:0 20px 20px 20px;}

    .join4 .jo4_con .con1 .jo4_box3 { background-size: cover; display: block; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 { width: 100%; display: block;background-size: cover;}

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con img { right: 40px; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con .span1 { opacity: 1; padding-right: 20px; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con .span2 { opacity: 1; padding:0 20px 20px 20px; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 { width: 100%; display: flex; flex-direction: row; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con img { right: 40px; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con .span1 { opacity: 1; padding-right: 20px;}

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con .span2 { opacity: 1; padding:0 20px 20px 20px; }

    .join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con { padding: 40px 20px 0px; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con { padding: 40px 20px 0px; }

    .join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con { padding: 40px 20px 0px; }

    .join1 .jo1_con .jo1box .jo1box_1span{margin-bottom: 25px;}

    .join4 .jo4_con .con1 .jo4_box1 .jo4_box1con img,.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_1 .jo4_box2_1con img,.join4 .jo4_con .con1 .jo4_box2 .jo4_box2_2 .jo4_box2_2con img,.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_1 .jo4_box3_1con img,.join4 .jo4_con .con1 .jo4_box3 .jo4_box3_2 .jo4_box3_2con img{height: auto;width:100px;}
}