.join{ background: #f5f5f5;}
.join .title{ padding: 50px 0;}
.join .title h2{ text-align: center; font-size: 44px; color: #333; padding-bottom: 20px;}
.join .title p{ width: 1000px; margin: 0 auto; line-height: 26px; text-align: center; font-size: 16px; color: #777;}

.join .layer1 ul{ width: 100%; overflow: hidden;}
.join .layer1 ul li{ position: relative; width: 49%; float: left; margin-right: 2%; height: 400px;}
.join .layer1 ul li:last-child{ margin-right: 0;}
.join .layer1 ul li img.bg{ display: block; width: 100%; height: 100%}
.join .layer1 ul li .text{ width: 100%; position: absolute; bottom: 0; left: 0; height: 120px; background: rgba(0,78,162,0.96);}
.join .layer1 ul li .text .bt{ line-height: 120px; font-size: 22px; color: #fff; float: left; height: 120px; margin-left:40px; padding-left: 55px; background: url(/frontEnd/static/img/join_icon_03.png) left center no-repeat;}
.join .layer1 ul li .text dl{ position: absolute; left: 250px; top: 50%; transform: translateY(-50%);}
.join .layer1 ul li .text dl dd{ line-height: 35px; color: #fff; font-size: 16px; color: #fff;}
.join .layer1 ul li .text dl dd img{ display: inline-block; vertical-align: middle; margin-right: 15px;}
.join .layer1 ul li .text .More{ position: absolute; right: 40px; top: 50%; transform: translateY(-50%);}

.join .layer2 ul{ width: 100%; overflow: hidden;}
.join .layer2 ul li{ margin-bottom: 30px; width: 23.5%; float: left; margin-right: 2%; overflow: hidden; background: #fff; height: 140px;}
.join .layer2 ul li:nth-child(4n){ margin-right: 0;}
.join .layer2 ul li .icon{ float: left; width: 130px; height: 100%; position: relative;}
.join .layer2 ul li .icon img{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.join .layer2 ul li .text{ width: calc(100% - 130px); float: left; padding: 40px 0 0 0;}
.join .layer2 ul li .text h2{ font-size: 28px; color: #333; margin-bottom: 18px;}
.join .layer2 ul li .text p{ font-size: 12px; color: #b0b0b0;}

.join .layer3{padding-bottom:100px ;}
.join .layer3Box{ height: 470px; position: relative;}
.join .layer3Box .swiper-container{ overflow: hidden; width: 100%; height: 100%;}
.join .layer3Box .swiper-container .swiper-slide{ background: none;}
.join .layer3Box .swiper-container .swiper-slide img{ transition: 0.5s; height: 100%; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.join .layer3Box .swiper-container .swiper-slide.swiper-slide-active img{ z-index: 3; opacity: 1;}
.join .layer3Box .swiper-container .swiper-slide.swiper-slide-prev img{transform: translate(-50%,-50%) scale(0.8); z-index: 2; opacity: 0.7;}
.join .layer3Box .swiper-container .swiper-slide.swiper-slide-next img{transform: translate(-50%,-50%) scale(0.8); z-index: 2; opacity: 0.7;}
.join .layer3Box .swiper-container .swiper-slide.swiper-slide-prev::after{ display: none!important;}
.join .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{ display: none;}
.join .layer3Box .swiper-button-next{ right: -60px!important; top: 50%; transform: translateY(-50%); background: url(/frontEnd/static/img/join_Jt2.png); width: 40px; height: 40px; margin: 0;}
.join .layer3Box .swiper-button-prev{ left: -60px!important; top: 50%; transform: translateY(-50%); background: url(/frontEnd/static/img/join_Jt.png); width: 40px; height: 40px; margin: 0;}
<!--ºÄʱ1754965401.7902Ãë-->