/* 官网主色调 */
.header {
  position: static;
  background-color: #191a1d;
}
.main > .headerBg {
  height: 560px;
  background: url('../img/join/icon_title_bg.png') no-repeat center;
}
.main > .headerBg > .info {
  position: relative;
  height: 560px;
  overflow: hidden;
}
.main > .headerBg > .info > i {
  position: absolute;
  width: 245px;
  height: 150px;
  background: url('../img/join/icon_txt.png') no-repeat center;
  top: 170px;
  left: 126px;
}
.main > .headerBg > .info > h3 {
  margin: 185px 0 40px 375px;
  font-size: 40px;
  color: #fff;
}
.main > .headerBg > .info > h3 > span {
  font-size: 40px;
  color: #f4cc4e;
}
.main > .headerBg > .info > p {
  margin-left: 375px;
  width: 647px;
  line-height: 32px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
.main > .bodyInfo {
  background-color: #fff;
}
.main > .bodyInfo > .info {
  overflow: hidden;
}
.main > .bodyInfo > .info > .top {
  height: 750px;
}
.main > .bodyInfo > .info > .top > h4 {
  margin: 118px 0 58px;
  font-size: 28px;
  color: #333;
  text-align: center;
}
.main > .bodyInfo > .info > .top > .left {
  float: left;
  width: 620px;
}
.main > .bodyInfo > .info > .top > .left > ul > li {
  margin-bottom: 55px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > i {
  float: left;
  margin-right: 20px;
  width: 95px;
  height: 75px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > i.one {
  background: url('../img/join/icon_sprint.png') no-repeat 0 -8px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > i.two {
  background: url('../img/join/icon_sprint.png') no-repeat 0 -110px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > i.three {
  background: url('../img/join/icon_sprint.png') no-repeat 0 -210px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > i.four {
  background: url('../img/join/icon_sprint.png') no-repeat 0 -310px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > i.five {
  background: url('../img/join/icon_sprint.png') no-repeat 0 -415px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > .text {
  float: left;
  width: 504px;
}
.main > .bodyInfo > .info > .top > .left > ul > li > .text > h5 {
  margin: 5px 0 10px;
  font-size: 18px;
  color: #333;
}
.main > .bodyInfo > .info > .top > .left > ul > li > .text > p {
  font-size: 14px;
  color: #777;
}
.main > .bodyInfo > .info > .top > .rjw-right {
  float: right;
  width: 463px;
  height: 615px;
}
.main > .bodyInfo > .info > .top > .rjw-right > .swiper-wrapper > .swiper-slide {
  height: 307px;
}
.main > .bodyInfo > .info > .top > .rjw-right > .swiper-wrapper > .swiper-slide > img {
  margin-bottom: 35px;
}
.main > .bodyInfo > .info > .center {
  position: relative;
  overflow: hidden;
  clear: both;
}
.main > .bodyInfo > .info > .center > h4 {
  margin: 107px 0 58px;
  font-size: 28px;
  color: #333;
  text-align: center;
}
.main > .bodyInfo > .info > .center > p {
  line-height: 26px;
  font-size: 16px;
  color: #777;
  text-align: center;
}
.main > .bodyInfo > .info > .center > p > span {
  font-size: 20px;
  color: #f4cc4e;
}
.main > .bodyInfo > .info > .center > i {
  position: absolute;
  width: 720px;
  height: 122px;
  background: url('../img/join/erweima.png') no-repeat center;
  top: 150px;
  left: 275px;
}
.main > .bodyInfo > .info > .center > ul {
  margin-top: 50px;
}
.main > .bodyInfo > .info > .center > ul > li {
  position: relative;
  float: left;
  margin-right: 12px;
  width: 190px;
  height: 100px;
  cursor: pointer;
}
.main > .bodyInfo > .info > .center > ul > li.one {
  background: url('../img/join/icon_pc_011.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.one:hover {
  background: url('../img/join/icon_pc_012.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.one:hover > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li.active > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li.two {
  background: url('../img/join/icon_pc_021.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.two:hover {
  background: url('../img/join/icon_pc_022.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.two:hover > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li.three {
  background: url('../img/join/icon_pc_031.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.three:hover {
  background: url('../img/join/icon_pc_032.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.three:hover > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li.four {
  background: url('../img/join/icon_pc_041.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.four:hover {
  background: url('../img/join/icon_pc_042.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.four:hover > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li.five {
  background: url('../img/join/icon_pc_051.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.five:hover {
  background: url('../img/join/icon_pc_052.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.five:hover > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li.six {
  margin-right: 0;
  background: url('../img/join/icon_pc_061.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.six:hover {
  margin-right: 0;
  background: url('../img/join/icon_pc_062.png') no-repeat center;
}
.main > .bodyInfo > .info > .center > ul > li.six:hover > p {
  background-color: rgba(212, 166, 18, 0.7);
}
.main > .bodyInfo > .info > .center > ul > li > p {
  position: absolute;
  width: 190px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  bottom: 0;
  left: 0;
}
.main > .bodyInfo > .info > .bottom {
  margin: 40px 0 118px;
}
.main .bottom .rjil-piece {
  position: relative;
  margin-bottom: 2px;
}
.main .bottom .rjil-piece .rjilp-head {
  cursor: pointer;
  height: 62px;
  line-height: 62px;
  background-color: #f3f3f3;
  font-size: 20px;
  text-align: center;
  color: #4c4c4c;
}
.main .bottom .rjil-piece .rjilph-onoff {
  position: absolute;
  top: 21px;
  right: 37px;
  width: 23px;
  height: 23px;
  background: url('../img/join/recruit_png.png') -100px -340px no-repeat;
  cursor: pointer;
}
.main .bottom .rjil-piece .rjilp-infor {
  overflow: hidden;
  height: 0;
  font-size: 16px;
  background-color: #f9f9f9;
}
.main .bottom .rjil-piece .rjilp-infor p {
  font-size: 18px;
  color: #f4c329;
  line-height: 45px;
  margin-left: -10px;
}
.main .bottom .rjil-piece .rjilp-infor ul li {
  list-style: initial;
  line-height: 30px;
  color: #777;
}
.main .bottom .rjil-piece .rjilp-infor .rjilpi-ask {
  margin-bottom: 40px;
}
.main .bottom .rji-look-on .rjilph-onoff {
  background: url('../img/join/recruit_png.png') -130px -340px no-repeat;
}
.main .bottom .rji-look-on .rjilp-infor {
  padding: 30px 10px 35px 160px;
  height: inherit;
}