#header {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 8px 15px;
  background: white;

  .logo {
    max-width: 180px;
    max-height: 70px;
  }

  .search {
    width: 100%;
  }

  input {
    height: 36px;
    border-radius: 18px;
    border: none;
    background-color: #f2f2f2;
    width: 100%;
    padding: 0 15px;
    background-image: url(../images/searchicon.png);
    background-position: 95% center;
    background-repeat: no-repeat;
    background-size: 18px 18px;

    &::placeholder {
      color: #999;
    }
  }
}

main {
  display: grid;
  gap: 10px;
}

.fl1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-weight: bold;

  a {
    display: grid;
    place-items: center;
    gap: 5px;
  }

  img {
    width: 35px;
    height: 35px;
  }
}

.fl2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  a {
    height: 80px;
    display: flex;
    align-items: center;
  }

  i {
    display: block;
    width: 44px;
    height: 44px;
    background-size: contain;
  }

  .icon-worker {
    background-image: url(../images/genius_consult.png);
  }

  .icon-boss {
    background-image: url(../images/manage_full-time.png);
  }

  .fl2-texts {
    margin-left: 10px;

    span {
      font-size: 16px;
      font-weight: 500;
    }

    div {
      color: #999;
      margin-top: 5px;
    }
  }
}

.block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;

  a {
    color: #999;
    font-weight: normal;
    font-size: 12px;
  }
}

.fl3 {
  .item {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 3px));
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;

    >a {
      background: #f4f4f4;
      display: grid;
      height: 70px;
      padding: 10px;
      grid-template-areas: 'img name'
        'img desc';
      align-items: center;
      align-content: center;
      justify-content: start;
      gap: 4px 10px;
      white-space: nowrap;
    }

    img {
      grid-area: img;
    }

    .item-name {
      grid-area: name;
      font-size: 14px;
      font-weight: 500;
    }

    .item-desc {
      grid-area: desc;
    }
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(calc(-1 * var(--item-scroll)));
  }

  65% {
    transform: translateX(calc(-1 * var(--item-scroll)));
  }

  70% {
    transform: translateX(calc(-2 * var(--item-scroll)));
  }

  100% {
    transform: translateX(calc(-2 * var(--item-scroll)));
  }
}

#swiper {
  --item-scroll: 331px;
  overflow: hidden;
  width: 331px;
  margin: auto;

  .items {
    display: grid;
    grid-template-columns: repeat(3, 331px);
    animation: scroll 15s linear infinite;
  }
}

.switch-tab {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  >span {
    order: 0;
    width: 25%;
    height: 44px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    display: grid;
    place-content: center;
    position: relative;
  }

  .active {
    font-weight: bold;
    color: #333;

    &::after {
      content: '';
      width: 40px;
      height: 3px;
      background-color: rgb(39, 120, 248);
      position: absolute;
      bottom: 0;
      left: calc(50% - 20px);
    }

    &+.tab-links {
      display: grid;
      gap: 10px;
      padding-top: 10px;
    }
  }

  .tab-links {
    order: 1;
    display: none;
    align-items: center;
    width: 100%;
  }
}

.more-job {
  display: grid;
  background: white;
  height: 45px;
  place-content: center;
  font-size: 14px;
}

.bottom-links {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 10px;
}