锘?blank_20{position: absolute;top:0;left: 0;width:100%;height: 100%;background: rgba(0,0,0,0.2);} .join_01{/*background:#f5f5f5;*/padding:80px 50px;margin:70px 0 50px 0;} .join_01 h3{margin-bottom: 20px;} .join_title{margin-bottom: 30px;} .join_top{position: relative;margin-bottom: 50px} .join_class{width: 74%; padding: 50px;position: absolute;left: 0;bottom: 5%;height: 59%;z-index: 2;color: #fff;overflow: hidden;} .join_class h3{margin-bottom: 20px;} .join_cont{padding-bottom: 80px;} .join_02{margin-bottom: 40px;} .join_03{margin-bottom: 50px;} .join_04{margin-bottom: 60px;} .join_bottom ul{margin:0;} .join_bottom dl{margin:0;background:#f5f5f5;} .join_bottom li{float: left;width: 25%;margin-bottom: 20px;} .join_bottom dt{overflow: hidden;position: relative;} .join_bottom dd,.join_slider dd{padding:30px 20px;height:270px;overflow: hidden;box-sizing:border-box;} .join_bottom h3,.join_slider h3{margin-bottom: 20px;} .join_bottom dd p,.join_slider dd p{line-height: 24px;} .join_bottom dd{ height: 315px;} .join_03{padding:70px 30px;background:#f5f5f5;overflow: hidden;position: relative;} .j_line{width: 1px;height: calc(100% - 210px);background:#d6c6ba;position: absolute;left:50%;top:140px;} .join_03 .left{float: left;width: 48.5%;box-sizing:border-box;} .join_03 .left h3{margin-bottom: 20px;} .join_03 .left h4{margin-bottom: 40px;} .join_03 .left ul{overflow: hidden;margin: 0 -20px;} .join_03 .left li{float: left;width:50%;margin-bottom: 60px;} .join_03 .left li:nth-child(2n+1){clear: both;} .join_03 .left dl{padding:0 20px;} .join_03 .right{float: right;width: 47%;margin-top: 70px;box-sizing:border-box;} .join_03 .right h2{margin-bottom: 140px;} .join_poress{max-width:274px;position: relative;margin: auto;} .join_poress>img{width: 100%;} .join_poress dd{width: 110px;position: absolute;} .join_poress dd img{max-width: 75px;} .join_poress li{width:20px;height: 20px; text-align: center;position: absolute;} .join_poress li dl,.join_poress li dt{width:100%;height: 100%;} .join_poress li:nth-child(1) {top: -4.4%;left: 20.5%;} .join_poress li:nth-child(2) {top: -4.4%;right: 20.5%;} .join_poress li:nth-child(1) dd{left: -110px;top: -45px;} .join_poress li:nth-child(2) dd{right: -130px;top: -45px;} .join_poress li:nth-child(3) {top: 44.2%;left: -3%;} .join_poress li:nth-child(4) {top: 44.2%;right: -3%;} .join_poress li:nth-child(3) dd{left: -110px;top: -15px;} .join_poress li:nth-child(4) dd{right: -110px;top: -15px;} .join_poress li:nth-child(5) {bottom: -1.8%;left: 21.5%;}.join_poress li:nth-child(6) {bottom: -1.8%;right: 21.5%;} .join_poress li:nth-child(5) dd{left: -110px;top: 0px;} .join_poress li:nth-child(6) dd{right: -130px;top: 0px;} .join_05 ul{overflow: hidden;margin: 0 -10px;} .join_05 li{width: 50%;float: left;} .join_05 dl{margin: 0 10px;color:#fff;position: relative;} .join_05 dt{position: relative;} .join_05 dd{padding: 0 70px;width: 100%; box-sizing:border-box;transform: translate(0,-50%); -webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);-moz-transform: translate(0,-50%);-o-transform: translate(0,-50%); position:absolute; left:0; top:50%;} .j_03{font-size: 42px;} .j_01{width: 45px;height: 45px;margin-bottom: 5px;} .j_01 img{width:100%;height: 100%;} .join_slider{position: relative;} .join_slider dl{background:#f5f5f5;} .join_slider dt{overflow: hidden;} .join_slider dd{overflow: hidden;height: 222px;} .join_slider .index_but .swiper-button-prev{left: 25px;} .join_slider .index_but .swiper-button-next{right: 25px;} .join_bottom{position: relative;} .join_bottom .swiper-button-prev,.join_bottom .swiper-button-next{ width:40px; height: 40px; line-height: 40px; text-align: center; font-size: 40px; background-image:none!important;} .join_bottom .swiper-button-prev{left:-50px;} .join_bottom .swiper-button-next{right:-50px;} .join_bottom .swiper-button-prev i,.join_bottom .swiper-button-next i{ color: #96643C;} @media only screen and (max-width:1279px) { .join_bottom .swiper-button-prev{left:10px;} .join_bottom .swiper-button-next{right:10px;} } @media only screen and (max-width:767px) { .join_bottom .swiper-button-prev i,.join_bottom .swiper-button-next i{ /*color: #fff;*/} } @media only screen and (max-width:1440px) { .j_03{font-size: 36px;line-height: 36px;} .join_05 dd{padding: 0 50px;} } @media only screen and (max-width:1320px) { .join_poress{max-width: 200px;} } @media only screen and (max-width:1024px) { .join_01{margin:40px 0;padding: 40px;} .join_03{margin-bottom: 50px;padding: 50px 30px;padding-bottom: 100px;} .join_02{margin-bottom: 30px;} .join_04{margin-bottom: 30px;} .join_cont{padding-bottom: 50px;} .join_slider dd{padding: 20px;height: 160px;} .join_bottom dd{padding: 20px;} .join_03 .left{margin-bottom: 20px;} .join_03 .left h4{margin-bottom: 20px;} .join_03 .left h3{margin-bottom: 10px;} .join_03 .left,.join_03 .right{width: 100%;float: none;} .j_line{display: none;} .join_03 .left li{margin-bottom: 20px;} .join_03 .right{margin-top: 0;} .join_03 .right h2{margin-bottom: 50px;} .join_bottom h3, .join_slider h3{margin-bottom: 10px;} .join_slider .index_but .swiper-button-prev{left:5px;} .join_slider .index_but .swiper-button-next{right:5px;} } @media only screen and (max-width:1023px) { .join_bottom li{width: 50%;} } @media only screen and (max-width:767px) { .join_01{margin:20px 0;padding:20px;} .join_02,.join_03{margin-bottom: 20px;} .join_02{margin-bottom: 0;} .join_04{margin-bottom: 20px;} .join_cont{padding-bottom: 30px;} .join_01 h3{margin-bottom: 10px;} .join_title{margin-bottom: 10px;} .join_class{width: auto;padding: 20px; height: auto;position: static;color: #333;} .join_top{margin-bottom: 20px;} .join_top .blank_20{display: none;} .join_top{background:#eee;} .join_class h3{margin-bottom: 10px;} .join_03{padding: 20px;} .join_03 .left ul{margin: 0;} .join_03 .left dl{padding: 0;} .join_03 .left li{margin: 0;padding: 10px 0; width: 100%;border-bottom: 1px solid #d6c6ba;} .join_03 .left h4{margin-bottom: 10px;} .join_poress>img{display: none;} .join_poress li{position: static;width: 33.33%;height: auto;float: left;margin-bottom: 20px;} .join_poress li:nth-child(3n+1){clear: both;} .join_poress li dt{display: none;} .join_poress li dd{width: 100%;position: static;} .join_poress{max-width: 100%;} .join_03 .right h2{margin-bottom: 20px;} .join_poress li dl{padding: 0 5px;} .join_poress li ul{margin: 0 -5px;} .j_img{margin-bottom: 10px;} .join_bottom li{width: 100%;} .join_bottom dd,.join_slider dd{height: auto;} .join_slider dd{height: 180px;} .join_bottom h3,.join_slider h3{margin-bottom: 10px;} .join_05 dd{padding: 0 20px;} .join_05 ul,.join_05 dl{margin: 0;} .join_05 li{float: none;width: 100%;margin-bottom: 10px;} .j_03{font-size: 24px;line-height: 24px;} .j_01{width:36px;height: 36px} } @media only screen and (min-width:1025px) { .join_bottom dl{transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;} .join_bottom dl:hover{background:#96643c;box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);color: #fff;} .join_slider dl{transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;} .join_slider dl:hover{background:#96643c;box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);color: #fff;} } .join_cicle{position: relative;width: 100%;height: 100%;} .join_cicle span{ z-index: 2;display: inline-block; width: 20px;height: 20px;position: relative;} .join_cicle span b{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: rgba(150,100,60,0.3)} .join_cicle span i{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: rgba(150,100,60,0.3)} .join_cicle span em{display: inline-block;width: 9px;height: 9px;border-radius: 50%;background: #96643c;} .join_cicle b{ -webkit-animation: loading_b 1500ms linear forwards infinite; animation: loading_b 1500ms linear forwards infinite; } .join_cicle span i{ -webkit-animation: loading 1500ms linear forwards infinite; animation: loading 1500ms linear forwards infinite; } @-webkit-keyframes loading { 0% { width: 20px; height: 20px; opacity: 1; } 100% { width: 20px; height: 20px; opacity:0.3; } } @keyframes loading { 0% { width: 20px; height: 20px; opacity: 1; } 100% { width: 20px; height: 20px; opacity:0.3; } } @-webkit-keyframes loading_b { 0% { width: 20px; height: 20px; opacity: 1; } 100% { width: 20px; height: 20px; opacity:0.3; } } @keyframes loading_b { 0% { width: 20px; height: 20px; opacity: 1; } 100% { width: 30px; height: 30px; opacity:0.3; } } .join_03_new{padding:0 0 5%;} .join_03_new h4{margin:1.5% 0 2%;} .join_03_new .imgbox{margin-top:4%;} .join_03_new .imgbox h3{margin-bottom:2%;} .join_03_new .imgbox .edit_con_original{ margin-bottom: 3%;} .join_03_new .imgbox p.p1{ text-align: center;} .join_03_new .imgbox p.p1 img{max-width: 70%;} @media only screen and (max-width:767px) { .join_03_new .imgbox p.p1 img{max-width: 90%;} } .join_bottom dd .mCSB_scrollTools{ width: 2px; right:2px;} .join_bottom dd.mCustomScrollbar{padding-right: 0;} .join_bottom dd .mCSB_inside>.mCSB_container{margin-right: 20px;}