@charset "UTF-8";
@import url(../Base.css);
.button-hover {
  transition: all 0.3s ease; }

.button-hover:hover {
  -webkit-box-shadow: 0px 2px 4px 0px #208aec;
  box-shadow: 0px 2px 4px 0px #208aec;
  -webkit-transform: translateY(-0.2rem);
  transform: translateY(-0.2rem);
  -webkit-transition-duration: .45s;
  transition-duration: .45s; }

.join-us-page .develop-component {
  padding-top: 66px;
  padding-bottom: 94px;
  background-color: #f7f8fa; }
  .join-us-page .develop-component > h2 {
    font-size: 36px;
    color: #333333;
    text-align: center;
    margin-bottom: 40px;
    font-weight: normal; }
  .join-us-page .develop-component > div {
    width: 999px;
    height: 440px;
    margin: 0 auto; }
    .join-us-page .develop-component > div > ul {
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      height: 100%; }
      .join-us-page .develop-component > div > ul > li {
        width: 333px;
        height: 220px; }
        .join-us-page .develop-component > div > ul > li:first-child, .join-us-page .develop-component > div > ul > li:nth-child(2) {
          background: url("../img/join_def_environment@2x.png") no-repeat center;
          -webkit-background-size: cover;
          background-size: cover; }
        .join-us-page .develop-component > div > ul > li:nth-child(3), .join-us-page .develop-component > div > ul > li:last-child {
          background: url("../img/join_def_train@2x.png") no-repeat center;
          -webkit-background-size: cover;
          background-size: cover; }
        .join-us-page .develop-component > div > ul > li:nth-child(4), .join-us-page .develop-component > div > ul > li:nth-child(5) {
          background: url("../img/join_def_welfare@2x.png") no-repeat center;
          -webkit-background-size: cover;
          background-size: cover; }
        .join-us-page .develop-component > div > ul > li:nth-child(2n) {
          position: relative; }
          .join-us-page .develop-component > div > ul > li:nth-child(2n) > div {
            width: 100%;
            height: 100%;
            background-color: rgba(35, 87, 160, 0.74);
            color: #FFFFFF;
            font-size: 36px;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap; }

.join-us-page .job-component {
  padding-top: 58px;
  padding-bottom: 80px; }
  .join-us-page .job-component .job-wrap {
    width: 1200px;
    margin: 0 auto; }
    .join-us-page .job-component .job-wrap > h2 {
      color: #333333;
      font-size: 36px;
      margin-bottom: 58px;
      text-align: center;
      font-weight: normal; }
      .join-us-page .job-component .job-wrap > h2:after {
        content: '';
        display: block;
        width: 30px;
        height: 4px;
        background: #207cff;
        margin: 10px auto 0; }
    .join-us-page .job-component .job-wrap .job-box {
      width: 100%; }
      .join-us-page .job-component .job-wrap .job-box .top-classify {
        margin-bottom: 30px;
        border-bottom: 1px solid #d8d8d8;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap; }
        .join-us-page .job-component .job-wrap .job-box .top-classify > li {
          width: 72px;
          height: 80px;
          position: relative;
          color: #1a1a1a;
          font-size: 18px;
          line-height: 80px;
          cursor: pointer;
          text-align: center; }
        .join-us-page .job-component .job-wrap .job-box .top-classify .active:after {
          content: '';
          display: block;
          width: 72px;
          height: 4px;
          background: #207cff;
          position: absolute;
          bottom: 0;
          left: 0; }
      .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .current {
        display: flex !important; }
      .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: nowrap;
        display: none; }
        .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job {
          display: -webkit-flex;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap; }
          .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li {
            width: 382px;
            margin-bottom: 20px;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 16px;
            color: #1A1A1A;
            cursor: pointer; }
            .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li:hover {
              color: #207CFF; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li:hover > header > i {
                background-color: #207CFF; }
            .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header {
              width: 100%;
              height: 54px;
              background: #f7f8fa;
              position: relative;
              cursor: pointer;
              display: -webkit-flex;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: nowrap; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header > i {
                margin: 0 20px;
                width: 30px;
                height: 30px;
                position: relative;
                cursor: pointer;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header .close {
                background-color: #d8d8d8; }
                .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header .close:before {
                  content: '';
                  display: block;
                  width: 3px;
                  height: 15px;
                  background-color: #fff;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  -webkit-border-radius: 2px;
                  -moz-border-radius: 2px;
                  border-radius: 2px; }
                .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header .close:after {
                  content: '';
                  display: block;
                  width: 15px;
                  height: 3px;
                  background-color: #fff;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  -webkit-border-radius: 2px;
                  -moz-border-radius: 2px;
                  border-radius: 2px; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header .open {
                background-color: #207cff; }
                .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header .open:after {
                  content: '';
                  display: block;
                  width: 15px;
                  height: 3px;
                  background-color: #fff;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  -webkit-border-radius: 2px;
                  -moz-border-radius: 2px;
                  border-radius: 2px; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li > header > input {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
                left: 0;
                top: 0; }
            .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content {
              display: none;
              width: 100%;
              padding: 15px 25px 28px 28px;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              border: 1px solid #f0f0f0;
              border-top: none;
              transition: all 0.5s linear;
              -moz-transition: all 0.5s linear;
              /* Firefox 4 */
              -webkit-transition: all 0.5s linear;
              /* Safari 和 Chrome */
              -o-transition: all 0.5s linear;
              /* Opera */
              color: #1A1A1A;
              font-size: 14px; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > article {
                margin-bottom: 10px; }
                .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > article > h5 {
                  margin-bottom: 6px;
                  font-weight: normal; }
                .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > article > p {
                  position: relative;
                  padding-left: 16px;
                  margin-bottom: 6px; }
                  .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > article > p:before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 8px;
                    width: 4px;
                    height: 4px;
                    background: #1a1a1a;
                    border-radius: 50%; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > aside {
                padding-left: 16px;
                position: relative;
                margin-bottom: 25px; }
                .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > aside:before {
                  content: '';
                  display: block;
                  width: 8px;
                  height: 8px;
                  background: #207cff;
                  position: absolute;
                  left: 0;
                  top: 7px; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job > li .job-content > p {
                text-align: right;
                font-size: 12px;
                color: #999999; }
          .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job .active {
            color: #207CFF;
            border: 1px solid #D8D8D8; }
            .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job .active > header > i {
              background-color: #207CFF; }
              .join-us-page .job-component .job-wrap .job-box .bottom-wrap-container .bottom-wrap .bottom-job .active > header > i:before {
                display: none; }