.match {
  .table {
    position: fixed;
    left: 2.2rem;
    top: .42rem;
    display: flex;
    width: 5.16rem;
    height: 1.02rem;

    .match_title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }

  .whole_match_focus {
    background: url('assets/match/tab_left.png');
    background-size: 5.16rem 1.02rem;
    color: #fff;
  }

  .my_match_focus {
    background: url('assets/match/tab_right.png');
    background-size: 5.16rem 1.02rem;
    color: #fff;
  }

  .match_two_icon {
    position: fixed;
    top: .42rem;
    right: .3rem;

    img {
      width: 1.28rem;
      height: 1.18rem;
    }

    .error_icon {
      margin-right: 1rem;
    }

    .ranking_icon {
      width: .95rem;
    }
  }

  .match_container {
    display: flex;
    position: absolute;
    left: 0;
    top: 1.82rem;
    width: 100%;
    overflow-x: scroll;
    padding-left: .3rem;

    .place-right {
      flex-shrink: 0;
      display: flex;
      width: 0.3rem;
      height: 1rem;
    }

    .match_container_children {
      flex-shrink: 0;
      display: flex;
      margin-right: .69rem;

      .match_container_icon {
        width: 2.17rem;
        height: 6.08rem;
        display: block;
        margin-left: 1rem;
      }

      .match_container_detail_box {
        display: flex;
        flex-direction: column;
      }

      .match_container_detail {
        display: flex;
        align-items: center;
        width: 9.63rem;
        height: 3.9rem;
        background: rgba(153, 153, 153, 0.6);
        border-radius: .36rem;
        padding: 0 .21rem;
        margin-bottom: .6rem;

        .img_icon {
          width: 4.24rem;
          height: 3.15rem;
          margin-left: .28rem;
          display: block;
          border-radius: .4rem;
        }

        .course_match {
          display: flex;
          flex-direction: column;
          margin-left: .36rem;

          .course_match_title {
            font-size: .45rem;
            font-weight: 500;
          }

          .course_match_date {
            font-size: .4rem;
            font-weight: 400;
          }

          .course_match_sign_up {
            font-size: .34rem;
            margin-top: .3rem;
          }

          .course_btn {
            display: flex;
            color: #666;
            font-size: .34rem;
            font-weight: 600;
            margin-top: .29rem;

            .btn {
              width: 2.02rem;
              height: .81rem;
              background: #fff;
              border-radius: .4rem;
              text-align: center;
              line-height: .81rem;
            }

            .detail_btn {
              margin-right: .36rem;
            }
          }
        }
      }

      .history {
        color: #fff;
      }

      .now {
        background: #fff;

        .course_match_title {
          color: #3D3D3D;
        }

        .course_match_date {
          color: #666;
        }

        .course_match_sign_up {
          span {
            color: #77CE6A;
          }
        }

        .course_match .course_btn .detail_btn {
          background: #fff;
          border: .02rem solid #979797;
        }

        .course_match .course_btn .ranking_btn {
          background: #FFA227;
          color: #fff;
        }
      }
    }

  }

  .rocket_icon {
    position: fixed;
    left: 16.49rem;
    bottom: 0;
    z-index: 9;

    img {
      width: 2.01rem;
      height: 1.17rem;
    }
  }
}