.team-container {
  &[data-skip="team"] {
    height: 195px;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #fff;
  }
}

[data-skip="team"] {
  position: relative;
  padding: 10px 0 0;

  .team-friend {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    padding-left: 2px;
    box-sizing: border-box;
    font-size: 12px;
    font-style: normal;
    color: #fff;
    background-size: cover;
    background-image: url("https://cdn.julyedu.com/newyear20/PC/team-friend-bg.png");
  }

  .team-status {
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    border-radius: 0 3px 0 5px;
    font-size: 12px;
    font-style: normal;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #00c091;
  }

  .team-decorate {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 25px;
    height: 25px;
    background-size: cover;
    background-image: url("https://cdn.julyedu.com/newyear20/PC/team-decorate.png");
  }

  .team-title {
    margin: 5px 0 0;
    font-size: 16px;
    color: #090909;
    text-align: center;
    line-height: 1;
  }

  .team-desc {
    margin: 10px 0 0;
    font-size: 12px;
    color: #ff2121;
    text-align: center;
    line-height: 1;
  }

  .team-member {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 0;
  }

  .team-member__item {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 10px;
    border-radius: 50%;
    background-size: cover;
    background-image: url("https://cdn.julyedu.com/newyear20/PC/team-bg.png");

    &.active {
      border: 1px solid #00c091;

      &::after {
        display: block;
      }
    }

    &::after {
      content: "";
      display: none;
      position: absolute;
      left: 0;
      bottom: -12px;
      right: 0;
      width: 24px;
      height: 3px;
      margin: 0 auto;
      border-radius: 50%;
      background-color: #e6e6e6;
    }
  }

  .team-member__captain {
    position: absolute;
    top: -6px;
    right: -23px;
    width: 33px;
    height: 18px;
    border-radius: 9px 9px 9px 1px;
    border: 1px solid #fff;
    box-sizing: border-box;
    font-size: 12px;
    color: #0b7b45;
    text-align: center;
    line-height: 18px;
    background-color: #ffe319;
  }

  .team-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 17px 0 0;

    &[data-layout="column"] {
      flex-direction: column;
    }
  }

  .team-button {
    display: block;
    width: 297px;
    height: 44px;
    margin: 0 auto;
    border: 1px solid #090909;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    color: #090909;
    text-align: center;
    line-height: 44px;
    background-color: #ffe319;
  }

  .team-button--split {
    display: inline-block;
    width: 60px;
    height: 46px;
    margin: 0 20px;
    background-size: cover;
    background-image: url("https://cdn.julyedu.com/newyear20/treasure-split.gif");
  }

  .team-icon {
    display: inline-block;
    width: 31px;
    height: 21px;
    background-size: cover;

    &[data-direction="left"] {
      background-image: url("https://cdn.julyedu.com/newyear20/PC/icon-direction-left.png");
    }

    &[data-direction="right"] {
      background-image: url("https://cdn.julyedu.com/newyear20/PC/icon-direction-right.png");
    }
  }

  .team-prize {
    margin: 5px 0 0;
    font-size: 15px;
    color: #303030;
    line-height: 1;
  }

  .team-result {
    margin: 8px 0 0;
    font-size: 12px;
    color: #666;
    line-height: 1;

    span {
      text-decoration: underline;
    }
  }
}
