/**
该页面由灰色和白色构成 上方的颜色为白色的话 下方就为灰色
 */
@top-bg-color: #fff;
@bottom-bg-color: #eee;

.join {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;

  .navbar {
    height: auto;

    .bg-content {
      height: 300px;
      background-image: url("https://file.funcheergame.com/office/image/join_banner.png");
    }
  }

  .join-content {
    flex: 1;
    background-color: @top-bg-color;

    .join-content-wrapper {
      width: 1200px;
      margin: 0 auto 60px;

      .join-top-wrapper {
        background-color: @top-bg-color;

        .title-icon-wrapper {
          background-color: @top-bg-color;
          display: flex;
          justify-content: center;
          margin: 60px 0 40px;

          .title-icon {
            flex: 1;
            margin: 0 70px;

            .title-span {
              font-family: "黑体";
              line-height: 14px;
              display: block;
              font-size: 14px;
              margin-top: 30px;
              font-weight: 400;
              text-align: center;
            }
          }
        }

        .activity_wrap {
          .activity-item {
            width: 100%;
            height: 240px;
            display: flex;

            img {
              display: block;
            }

            .item {
              font-family: "黑体";
              height: 100%;
              position: relative;
            }

            .image {
              overflow: hidden;

              img {
                transition: transform .5s ease-out;
              }

              img:hover {
                transform: scale(1.2);
              }

              .triangle-left {
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -16px;
                z-index: 1;
              }
            }

            .long {
              flex: 2;
            }

            .long.image {
              .triangle-left {
                border-right: 16px solid @bottom-bg-color;
              }
            }

            .short {
              flex: 1;
            }

            .text {
              overflow: hidden;
              text-align: center;
              background-color: #eee;
              font-weight: 400;

              h1 {
                margin-top: 90px;
                font-size: 24px;
                color: #000;
              }

              h2 {
                margin-top: 4px;
                font-size: 14px;
                color: #aaa;
              }
            }

            .item.short.text.red {
              background-color: #e4004f;


              h1 {
                color: #fff;
              }

              h2 {
                color: #fff;
                //opacity: .8;
                font-weight: 500;
              }
            }

          }
        }
      }

    }

    .recruitment-content-wrapper {

      background-color: @bottom-bg-color;
      padding-top: 60px;
      padding-bottom: 100px;


      .recruitment-content {
        font-family: "黑体";
        width: 1200px;
        margin: 0 auto;

        .recruitment-title {
          color: rgba(0, 0, 0, 0.6);
          position: relative;
          font-size: 34px;
          line-height: 45px;
          text-align: center;
          letter-spacing: 4px;
          font-weight: 600;
        }

        .recruitment-title-second {
          color: rgba(0, 0, 0, 0.1);
          font-size: 20px;
          text-align: center;
          margin-bottom: 40px;
          font-family: "黑体";
          font-weight: 600;
        }

        .recruitment-content-list {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;

          .message-content {
            height: 100%;
            overflow: hidden;
            color: #000;

            .text {
              color: #666;
              font-size: 14px;

              a {
                color: #1780FF;
              }
            }
          }

          .recruitment-item {
            height: 144px;
            width: 396px;
            background-color: @top-bg-color;
            margin: 2px;
            padding: 28px 20px 24px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            transition: background-color 0.3s;

            .title-wrapper {
              font-family: "黑体";
              position: relative;
              width: 100%;

              .title {
                width: auto;
                height: 56px;
                font-size: 20px;
                line-height: 28px;
                color: #222831;
                overflow: hidden;
              }

              .expedited {
                position: absolute;
                top: 0;
                right: 0;
                width: 16px;
                height: 18px;
                background-image: url('https://file.funcheergame.com/office/image/join/prior-icon.svg');
                background-size: 100%;
                z-index: 9;
              }
            }

            .bottom {
              font-family: "黑体";
              display: flex;
              justify-content: flex-start;
              font-size: 14px;
              line-height: 20px;
              color: #a2a4a8;

              .desc {
                padding-right: 12px;
                margin-right: 12px;
                border-right: 1px solid #dddfe3;
              }

              .location {
                padding-right: 12px;
                margin-right: 12px;
              }
            }

            &:hover {
              background-color: #f9f9fa;
            }
          }

        }
      }


    }


  }
}

