.common-wrap {
  padding: 0.625rem;
}
.btn-common {
  display: inline-block;
  border-radius: 0.9375rem;
  background: #04aa81;
}
.btn-common,
.btn-common:focus,
.btn-common:active,
.btn-common:hover {
  color: #FFF;
}
.btn-common:active {
  box-shadow: 0 0 3rem 3rem inset rgba(0, 0, 0, 0.3);
}
.common-mask {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1997;
}
.common-mask .msg {
  padding: 0.5rem 1rem;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.5);
}
.j_matchitem,
.j_classfy,
.j_myMatch {
  padding-top: 3.125rem;
}
.j_index .shuffling {
  height: 12.5rem;
  background-color: #04aa81;
}
.j_index .part-t {
  line-height: 2.25rem;
  font-weight: bold;
  font-size: 1.125rem;
  color: #333;
}
.j_index .part-icon {
  width: auto;
  height: 0.5rem;
  margin-right: 0.375rem;
}
.j_index .btn-nav {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  color: #FFF;
}
.j_index .main-wrap {
  position: relative;
  top: -1.9375rem;
  border-radius: 0.9375rem 0.9375rem 0 0;
  background-color: #FFF;
  z-index: 3;
}
.j_index .section {
  padding: 0.625rem 0;
}
.j_index .news-wrap .news-item {
  position: relative;
  padding: 0.5rem 2.5rem 0.5rem 4.25rem;
}
.j_index .news-wrap .icon-news,
.j_index .news-wrap .news-more {
  position: absolute;
  top: 0.5rem;
}
.j_index .news-wrap .icon-news {
  left: 0;
  width: 3.75rem;
  height: 1.125rem;
}
.j_index .news-wrap .news-more {
  right: 0;
  color: #999;
}
.j_index .menu-wrap {
  padding-top: 0;
  border-bottom: 1px solid #EEE;
}
.j_index .menu-ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  max-height: 22.5rem;
  overflow: hidden;
}
.j_index .menu-ul,
.j_index .menu-ul.packup {
  transition: all 0.3s;
}
.j_index .menu-ul.packup {
  max-height: 5.5rem;
}
.j_index .menu-ul .menu-li {
  width: 22%;
  margin: 0.625rem 0;
  text-align: center;
}
.j_index .menu-ul .icon-menu {
  width: 2.8125rem;
  height: 2.8125rem;
  margin-bottom: 0.3rem;
}
.j_index .navs-pic {
  height: 10.5rem;
}
.j_index .navs-pic .pull-left {
  width: 9rem;
  padding-top: 1.125rem;
  padding-left: 0.75rem;
}
.j_index .navs-pic .pull-right {
  position: relative;
  width: 12rem;
}
.j_index .navs-pic .pull-right > div {
  height: 4.375rem;
  padding-top: 0.75rem;
  padding-left: 1.25rem;
}
.j_index .navs-pic .pull-right .bottom-box {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.j_index .navs-pic .pull-left,
.j_index .navs-pic .pull-right {
  height: 100%;
}
.j_index .navs-pic .nav-t {
  font-size: 1rem;
}
.j_index .rank-wrap {
  color: #333;
}
.j_index .rank-list {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding-top: 0.5rem;
}
.j_index .rank-list .rank-item {
  display: block;
  width: 6.625rem;
  height: 11rem;
  margin: 0;
  padding: 0;
  padding-top: 56px;
  text-align: center;
  color: #333;
}
.j_index .rank-list .first {
  width: 7.375rem;
}
.j_index .rank-list .first .face-wrap {
  width: 3.75rem;
  height: 3.75rem;
}
.j_index .rank-list .face-wrap {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto;
  padding: 0.125rem;
}
.j_index .rank-list .rank-item,
.j_index .rank-list .face-wrap {
  background-size: 100% 100% !important;
}
.j_index .rank-list .icon-rank {
  position: absolute;
  right: -20%;
  top: -24%;
  width: 1.375rem;
  height: 1.375rem;
}
.j_index .rank-list .img-face {
  border-radius: 50%;
}
.j_index .rank-list .user-name {
  padding: 0.5rem 0 0.375rem;
}
.j_index .rank-list .rank-num {
  color: #AAA;
}
.j_index .my-rank {
  line-height: 2.25rem;
  font-weight: bold;
}
.j_index .my-rank .icon-medal {
  width: auto;
  height: 1rem;
  margin-right: 0.375rem;
  vertical-align: text-top;
}
.j_index .my-rank .rank-posi {
  color: #04aa81;
}
.j_index .intro-wrap {
  height: 4.375rem;
  padding-left: 1.125rem;
  background-size: 100% 100% !important;
}
.j_index .tabs-wrap .nav-tabs {
  display: block;
  border: 0;
  font-size: 1rem;
}
.j_index .tabs-wrap .nav-tabs li {
  padding: 0.3125rem;
}
.j_index .tabs-wrap .nav-tabs li:not(:last-child) {
  margin-right: 0.875rem;
}
.j_index .tabs-wrap .nav-tabs li a,
.j_index .tabs-wrap .nav-tabs li a:hover,
.j_index .tabs-wrap .nav-tabs li a:focus {
  color: #555;
}
.j_index .tabs-wrap .nav-tabs li a {
  position: relative;
}
.j_index .tabs-wrap .nav-tabs li a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 1rem;
  border-top: 0.25rem solid transparent;
}
.j_index .tabs-wrap .nav-tabs li.active {
  background-color: #FFF;
}
.j_index .tabs-wrap .nav-tabs li.active a {
  font-weight: bold;
  color: #333;
}
.j_index .tabs-wrap .nav-tabs li.active a::before {
  border-top: 3px solid #04aa81;
}
.j_index .tabs-wrap .tab-item {
  position: relative;
  padding-left: 8.125rem;
}
.j_index .tabs-wrap .tab-item:not(:last-child) {
  margin-bottom: 8px;
}
.j_index .tabs-wrap .tab-item,
.j_index .tabs-wrap .tab-cover {
  height: 5.625rem;
}
.j_index .tabs-wrap .tab-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 7.375rem;
  border-radius: 0.5rem 0 0 0.5rem;
  overflow: hidden;
}
.j_index .tabs-wrap .tab-cont {
  padding: 0.1875rem 0;
}
.j_index .tabs-wrap .tab-state {
  padding-top: 1.5rem;
  color: #999;
}
.j_index .tabs-wrap .tab-state .fa {
  margin-right: 0.375rem;
}
.j_index .tabs-wrap .line-dvide {
  position: relative;
  top: -1px;
}
.j_match .match-list .match-li {
  position: relative;
  height: 6.25rem;
  padding: 0.625rem;
  padding-left: 6.25rem;
  border-radius: 0.625rem;
  background-color: #FFF;
}
.j_match .match-list .match-li:not(:last-child) {
  margin-bottom: 0.5rem;
}
.j_match .match-list .match-li .match-t {
  padding-top: 0.5rem;
  font-weight: bold;
}
.j_match .match-list .match-li .cont-bottom {
  padding-top: 1.25rem;
  line-height: 1.875rem;
  color: #BBB;
}
.j_match .match-list .match-cover {
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  width: 5rem;
  height: 5rem;
  border-radius: 0.625rem;
  overflow: hidden;
}
.j_matchitem .matchitem-top,
.j_matchitem .matchitem-menu {
  background-color: #FFF;
}
.j_matchitem .matchitem-top {
  margin-bottom: 0.625rem;
  padding: 0.9375rem 0;
}
.j_matchitem .match-poster {
  width: 21.75rem;
  height: 6.25rem;
  margin: 0 auto;
  padding-top: 1rem;
  border-radius: 0.625rem;
  text-align: center;
  color: #FFF;
  background: url("../../img/frontend/match/bg-poster.jpg") no-repeat;
  background-size: 100% 100%;
}
.j_matchitem .match-poster .poster-t {
  font-weight: bold;
  font-size: 1.125rem;
  text-shadow: 1px 1px 3px #F39C12;
}
.j_matchitem .match-poster .poster-subt {
  padding: 0.25rem 0;
  font-size: 0.75rem;
}
.j_matchitem .match-signin {
  padding-top: 1.5rem;
  text-align: center;
}
.j_matchitem .match-signin .btn-signin {
  padding: 0;
  width: 13.25rem;
  height: 3.125rem;
  border-radius: 1.5625rem;
  line-height: 3.125rem;
  font-size: 1rem;
}
.j_matchitem .matchitem-menu {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding: 1.125rem 0.9375rem;
}
.j_matchitem .matchitem-menu img {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.625rem;
}
.j_classfy {
  position: relative;
  padding-left: 6.5625rem;
}
.j_classfy .left-nav,
.j_classfy .right-cont {
  min-height: calc(100vh - 3.125rem);
  max-height: calc(100vh - 3.125rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.j_classfy .left-nav {
  position: absolute;
  left: 0;
  width: 5.625rem;
  background-color: #FFF;
}
.j_classfy .left-nav .nav-item {
  height: 3.375rem;
  text-align: center;
  line-height: 3.3125rem;
  border-bottom: 1px solid #f3f5f7;
}
.j_classfy .left-nav .nav-item .fa-angle-up {
  display: none;
}
.j_classfy .left-nav .nav-item.cur .fa-angle-down {
  display: none;
}
.j_classfy .left-nav .nav-item.cur .fa-angle-up {
  display: inline-block;
}
.j_classfy .left-nav .nav-wrap .nav-ul {
  display: none;
}
.j_classfy .left-nav .nav-wrap > .nav-item {
  position: relative;
}
.j_classfy .left-nav .nav-wrap > .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 3px;
  border-top: 1.25rem solid transparent;
}
.j_classfy .left-nav .nav-wrap > .nav-item.cur::before {
  border-top-color: #04aa81;
}
.j_classfy .left-nav .nav-ul {
  color: #a5a5a5;
}
.j_classfy .left-nav .nav-ul .cur {
  color: #04aa81;
}
.j_classfy .right-cont {
  padding: 0.625rem 0.625rem 0.625rem 0;
}
.j_matchD .bg-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 11.25rem;
  background-color: #04aa81;
}
.j_matchD .info-wrap {
  padding: 6.875rem 0.625rem 0.625rem;
}
.j_matchD .info-box {
  position: relative;
  padding: 2.5rem 0 0.9375rem;
  border-radius: 0.625rem;
  text-align: center;
  background-color: #FFF;
}
.j_matchD .info-box .img-user {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4.375rem;
  height: 4.375rem;
  border: 1px solid #04aa81;
  border-radius: 50%;
}
.j_matchD .info-box .username {
  font-weight: bold;
  font-size: 0.9375rem;
}
.j_matchD .matchD-datas {
  display: -webkit-flex;
  display: flex;
}
.j_matchD .matchD-datas .data-item {
  -webkit-flex: 1;
          flex: 1;
  text-align: center;
}
.j_matchD .matchD-datas .data-item:first-child {
  border-right: 1px solid #F5FAF9;
}
.j_matchD .matchD-datas .data-item:not(:first-child) .td {
  color: #04aa81;
}
.j_matchD .matchD-datas .th {
  padding-bottom: 0.1875rem;
}
.j_matchD .matchD-datas .td {
  font-weight: bold;
  font-size: 0.9375rem;
}
.j_matchD .matchD-main .rank-ul {
  padding: 0 0.625rem;
}
.j_matchD .matchD-main .rank-li {
  position: relative;
  height: 4.375rem;
  padding: 0.9375rem 3.875rem 0.9375rem 6.125rem;
  border-radius: 0.5rem;
  line-height: 2.625rem;
  background-color: #FFF;
  display: -webkit-flex;
  display: flex;
}
.j_matchD .matchD-main .rank-li:not(:last-child) {
  margin-bottom: 0.5rem;
}
.j_matchD .matchD-main .img-user {
  position: relative;
  top: -0.125rem;
  left: -1.5625rem;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
}
.j_matchD .matchD-main .rank-left,
.j_matchD .matchD-main .rank-score {
  position: absolute;
  top: 0.9375rem;
}
.j_matchD .matchD-main .rank-left {
  left: 0;
  width: 3.75rem;
  text-align: center;
  margin-left: 0.625rem;
}
.j_matchD .matchD-main .rank-num {
  margin-right: 0.5rem;
  font-size: 1.25rem;
  color: #999;
}
.j_matchD .matchD-main .rank-score {
  right: 0.9375rem;
}
.j_matchD .matchD-main .rank-num,
.j_matchD .matchD-main .rank-score {
  font-weight: bold;
}
.j_matchD .filterbar {
  position: relative;
  display: -webkit-flex;
  display: flex;
  background-color: #FFF;
  z-index: 66;
  width: 50%;
  margin: 0 25%;
}
.j_matchD .filter-item {
  width: 33.3%;
  max-width: 33.3%;
  margin: 0 0.375rem;
  text-align: center;
  line-height: 2.875rem;
  font-size: 0.9375rem;
}
.j_matchD .filter-item .fa {
  position: relative;
  top: -0.1875rem;
}
.j_matchD .filter-ul {
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0px 3px 6px 0 #e7e7e7;
}
.j_matchD .filter-li {
  background-color: #FFF;
}
.j_matchSignup .page-head {
  padding: 3.625rem 0.625rem 0.625rem;
  color: #FFF;
  background-color: #04aa81;
}
.j_matchSignup .page-head .head-t {
  font-weight: bold;
  font-size: 0.9375rem;
}
.j_matchSignup .page-head .stage-wrap {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
  height: 3.25rem;
  margin-top: 0.5rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  background-color: rgba(255, 255, 255, 0.3);
}
.j_matchSignup .page-head .bg-line {
  position: absolute;
  left: 8%;
  top: 32%;
  width: 86%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.j_matchSignup .page-head .stage-item {
  padding-top: 0.25rem;
}
.j_matchSignup .page-head .stage-dot {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 auto 0.1875rem;
  border-radius: 50%;
  background-color: #a8e2d3;
  z-index: 3;
}
.j_matchSignup .page-head .stage-dot.cur {
  background-color: #FFF;
}
.j_matchSignup .form-wrap {
  overflow: hidden;
}
.j_matchSignup .form-wrap select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  max-width: 15rem;
  min-width: 6.25rem;
  text-align: right;
  direction: rtl;
  overflow: auto;
}
.j_matchSignup .form-wrap select option {
  direction: ltr;
}
.j_matchSignup .form-wrap .form-item {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding: 0.9375rem 0.625rem;
  line-height: 1.375rem;
  background-color: #FFF;
}
.j_matchSignup .form-wrap .form-item:not(:last-child) {
  margin-bottom: 0.625rem;
}
.j_matchSignup .form-wrap .form-item input {
  text-align: right;
}
.j_matchSignup .form-wrap .form-item .subT {
  font-size: 0.75rem;
  color: #999;
}
.j_matchSignup .form-wrap .form-item .subT a {
  color: #04aa81;
}
.j_matchSignup .form-wrap .form-item .match-tip {
  width: 3.75rem;
  height: 0.75rem;
}
.j_matchSignup .form-wrap .form-item .video-wrap {
  padding-top: 0.5rem;
}
.j_matchSignup .form-wrap .form-item .video {
  width: 100%;
  height: 8.75rem;
}
.j_matchSignup .form-wrap .form-item .icon-upload {
  width: 4.25rem;
  height: 4.25rem;
}
.j_matchSignup .form-wrap .form-item .upload-wrap {
  position: relative;
  display: inline-block;
}
.j_matchSignup .form-wrap .form-item .btn-upload {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.j_matchSignup .form-wrap .must::before {
  content: "*";
  position: relative;
  top: 4px;
  margin-right: 4px;
  font-size: 1rem;
  color: #e22222;
}
.j_matchSignup .form-wrap .btn-submit {
  display: block;
  width: 13.125rem;
  height: 3.125rem;
  margin: 2.5rem auto;
  border-radius: 1.5625rem;
  color: #FFF;
  background-color: #04aa81;
}
.j_matchSignup .form-wrap .btn-submit:active {
  background-color: #069c77;
}
.j_myMatch .tab-content {
  padding: 0.75rem 0.625rem;
}
.j_myMatch .myMatch-item {
  padding: 0.625rem;
  margin-bottom: 0.3125rem;
  border-radius: 0.625rem;
  background-color: #FFF;
}
.j_myMatch .myMatch-item:not(:last-child) {
  margin-bottom: 0.75rem;
}
.j_myMatch .myMatch-item .item-main {
  position: relative;
  height: 5.625rem;
  padding-left: 5.625rem;
}
.j_myMatch .myMatch-item .img-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.j_myMatch .myMatch-item .item-t {
  width: 73%;
  padding: 6px 0 2px;
  font-weight: bold;
  font-size: 1.125rem;
}
.j_myMatch .myMatch-item .sub-text {
  font-size: 0.75rem;
  color: #999;
}
.j_myMatch .myMatch-item .item-date {
  padding-top: 5%;
}
.j_myMatch .myMatch-item .item-tools {
  padding-top: 0.5rem;
}
.j_myMatch .myMatch-item .item-text {
  line-height: 2.25rem;
  font-weight: bold;
  font-size: 1rem;
}
.j_myMatch .myMatch-item .item-score {
  color: #f05145;
}
.j_myMatch .myMatch-item .btn-common.waiting {
  background-color: #ff9947;
}
.j_rank {
  padding: 0.625rem;
}
.j_rank .pro-item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  padding: 0.625rem;
  padding-left: 2.5rem;
  border-radius: 0.5rem;
  line-height: 1.25rem;
  background-color: #FFF;
}
.j_rank .pro-item:not(:last-child) {
  margin-bottom: 0.625rem;
}
.j_rank .pro-item .pro-icon {
  position: absolute;
  left: 0.9375rem;
  top: 0.6875rem;
  width: 1.1875rem;
  height: 1.0625rem;
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -0.3125rem;
  background-size: 1.8125rem;
}
.j_rank .pro-item .pro-t {
  min-width: 3.75rem;
}
.j_rank .pro-item .pro-box {
  position: relative;
  width: 4.5rem;
  height: 0.75rem;
  margin: 0 0.5rem 0 0.375rem;
  border-radius: 0.375rem;
  background-color: #f3f3f3;
  overflow: hidden;
}
.j_rank .pro-item .pro-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 0.375rem;
  background: linear-gradient(to right, #00ddc1, #12e394);
}
.j_rank .pro-item .pro-info {
  -webkit-flex: 1;
          flex: 1;
}
.j_rank .pro-item .pro-num {
  color: #04aa81;
}
.j_rank .pro-item:nth-child(1) .pro-icon {
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -0.3125rem;
  background-size: 1.8125rem;
}
.j_rank .pro-item:nth-child(2) .pro-icon {
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -2rem;
  background-size: 1.8125rem;
}
.j_rank .pro-item:nth-child(3) .pro-icon {
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -5.3125rem;
  background-size: 1.8125rem;
}
.j_rank .pro-item:nth-child(4) .pro-icon {
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -6.9375rem;
  background-size: 1.8125rem;
}
.j_rank .pro-item:nth-child(5) .pro-icon {
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -3.625rem;
  background-size: 1.8125rem;
}
.j_rank .pro-item:nth-child(6) .pro-icon {
  background: url('../../img/frontend/rank/rank_sprites.png') -0.3125rem -8.625rem;
  background-size: 1.8125rem;
}
.j_rank .progress-chart {
  height: 10.625rem;
  margin-top: 0.75rem;
  background-color: #FFF;
}
@media (max-width: 320px) {
  .j_rank .pro-item {
    font-size: 0.75rem;
  }
}