ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.press-intro {
  padding: 0 .24rem;
}

.press-intro__tabs {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;

  .press-intro__tab {
    width: 1.76rem;
    height: .6rem;
    margin: 0;
    text-align: center;
    font-size: .24rem;
    line-height: .6rem;
    color: rgba(33, 33, 36, .55);
    background: #edecef url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/tab-fill.png) left top repeat;
    background-size: 1.8rem .6rem;
    box-sizing: border-box;
    border: .02rem solid rgba(84, 84, 87, .06);
    flex: 1;

    &:first-child {
      border-radius: .04rem 0 0 .04rem;
    }

    &:last-child {
      border-radius: 0 .04rem .04rem 0;
    }

    &--act {
      color: #5300c3;
      background: rgba(92, 40, 247, .16);
      border: .02rem solid rgba(93, 40, 247, .16);
      box-sizing: border-box;
    }
  }
}

.press-intro__content {
  height: 6.8rem;
  overflow-y: auto;
}

.press-intro__main {
  padding: 0;
  background: none;
}

.press-intro__rules-form {
  padding-top: .4rem;

  .press-intro__rules-form-li {
    display: flex;
    justify-content: flex-start;
    margin-bottom: .3rem;

    &.no-flex {
      display: block;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .press-intro__rule-form-label {
    display: inline-block;
    width: 1.52rem;
    font-size: .24rem;
    line-height: .34rem;
    white-space: nowrap;
    color: rgba(33, 33, 36, .5);
  }

  .press-intro__rule-value {
    color: #212124;
    display: flex;
    justify-content: flex-start;
  }
}

.press-intro__rule-form-table {
  display: table;
  width: 100%;
  margin-top: .24rem;
  border-collapse: collapse;
  border: 1px solid #dedce8;
  box-sizing: border-box;

  .press-intro__rule-form-thead {
    display: table-header-group;
    width: 100%;
    height: .6rem;
    line-height: .6rem;
    font-size: .24rem;
    color: #212124;
    background: linear-gradient(78.86deg, #d3cdee -1.19%, #ecf0fd 106.68%);
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/press-intro__rule-form-table-thead.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  .press-intro__rule-form-tbody {
    display: table-row-group;
    box-sizing: border-box;

    .press-intro__rule-form-tr:nth-child(1) {
      .press-intro__rule-form-td:first-child {
        font-size: 0;
        padding: .12rem 0 .12rem .48rem;

        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--1.png) center top;
          background-size: cover;
          background-repeat: no-repeat;
          width: .4rem;
          height: .46rem;
          transform: translateX(-.1rem);
        }
      }
    }

    .press-intro__rule-form-tr:nth-child(2) {
      .press-intro__rule-form-td:first-child {
        font-size: 0;
        padding: .12rem 0 .12rem .48rem;

        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--2.png) center top;
          background-size: cover;
          background-repeat: no-repeat;
          width: .4rem;
          height: .46rem;
          transform: translateX(-.1rem);
        }
      }
    }

    .press-intro__rule-form-tr:nth-child(3) {
      .press-intro__rule-form-td:first-child {
        font-size: 0;
        padding: .12rem 0 .12rem .48rem;

        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--3.png) center top;
          background-size: cover;
          background-repeat: no-repeat;
          width: .4rem;
          height: .46rem;
          transform: translateX(-.1rem);
        }
      }
    }

    .press-intro__rule-form-td {
      font-family: 'AgencyFB-Bold';
      color: #212124;
      font-size: .28rem;
      padding: .12rem 0 .12rem .62rem;
      box-sizing: border-box;
    }
  }

  .press-intro__rule-form-tr {
    box-sizing: border-box;
    display: table-row;
    border-bottom: 1px solid #dedce8;
  }

  .press-intro__rule-form-th {
    display: table-cell;
    font-size: .24rem;
    text-align: left;
    box-sizing: border-box;
    font-weight: 200;
    padding: 0 0 0 .52rem;
    color: #212124;
  }

  .press-intro__rule-form-td {
    display: table-cell;
    height: .8rem;
    box-sizing: border-box;
    line-height: .8rem;
  }
}

.press-intro__rule-value {
  display: flex;
  justify-content: flex-start;
  font-size: .24rem;
  line-height: .34rem;
  color: #212124;
  width: 5.4rem;
  font-weight: 400;
  flex-direction: row;

  .ico-tip-24-location {
    margin: 0 .06rem 0 0;
    display: inline-block;
  }
}

.press-intro__rule-sche {
  display: inline-block;
  width: 4.5rem;
}

.press-intro__rule-sche-line {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.press-intro__rule-sche-item {
  position: relative;
  width: 100%;
  padding: 0 0 0 .4rem;

  &::after {
    content: '';
    display: block;
    width: .24rem;
    height: .24rem;
    background: url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/progress-circle.png') center center no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: .04rem;
  }

  &::before {
    content: '';
    display: block;
    height: 100%;
    width: .06rem;
    position: absolute;
    top: .06rem;
    left: .08rem;
    background: #d3ceee;
  }

  .press-intro__rule-step-name {
    font-size: .24rem;
    line-height: .28rem;
    color: #212124;
    text-align: left;
    margin-bottom: .04rem;
    font-weight: 500;
  }

  .press-intro__rule-step-content {
    height: auto;
    display: block;
    font-size: .2rem;
    line-height: .28rem;
    color: rgba(33, 33, 36, .75);
    margin: .14rem 0 .32rem;
    font-weight: 200;
  }

  &:last-child {
    &::before {
      content: none;
    }
  }
}

.press-intro__title {
  display: flex;
  justify-content: flex-start;

  padding: .32rem 0 .26rem;
  font-size: .24rem;
  line-height: .4rem;
  color: #212124;

  .press-intro__title--num {
    font-weight: 400;
    background: linear-gradient(to right, #5300c3, #5e2eff);
    -webkit-background-clip: text;
    color: transparent;
    font-size: .32rem;
    width: auto;
    letter-spacing: -.02rem;
    height: .44rem;
    margin: 0 .1rem 0 0;
  }
}

.press-intro__rules-form {
  padding-top: .4rem;

  .press-intro__rules-form-li {
    display: flex;
    justify-content: flex-start;
    margin-bottom: .3rem;

    &.no-flex {
      display: block;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .press-intro__rule-form-label {
    display: inline-block;
    width: 1.52rem;
    font-size: .24rem;
    line-height: .34rem;
    color: rgba(33, 33, 36, .5);
  }

  .press-intro__rule-value {
    color: #212124;
  }
}

.press-intro__rule-form-table {
  width: 100%;
  margin-top: .24rem;
  border-collapse: collapse;
  border: 1px solid #dedce8;

  .press-intro__rule-form-thead {
    width: 100%;
    height: .6rem;
    line-height: .6rem;
    font-size: .24rem;
    color: #212124;

    .press-intro__rule-form-tr {
      background: linear-gradient(78.86deg, #d3cdee -1.19%, #ecf0fd 106.68%);
    }
  }

  .press-intro__rule-form-tbody {
    .press-intro__rule-form-tr:nth-child(1) {
      .press-intro__rule-form-td:first-child {
        font-size: 0;
        padding: .12rem 0 .12rem .48rem;

        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--1.png) center top;
          background-size: cover;
          background-repeat: no-repeat;
          width: .4rem;
          height: .46rem;
          transform: translateX(-.1rem);
        }
      }
    }

    .press-intro__rule-form-tr:nth-child(2) {
      .press-intro__rule-form-td:first-child {
        font-size: 0;
        padding: .12rem 0 .12rem .48rem;

        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--2.png) center top;
          background-size: cover;
          background-repeat: no-repeat;
          width: .4rem;
          height: .46rem;
          transform: translateX(-.1rem);
        }
      }
    }

    .press-intro__rule-form-tr:nth-child(3) {
      .press-intro__rule-form-td:first-child {
        font-size: 0;
        padding: .12rem 0 .12rem .48rem;

        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--3.png) center top;
          background-size: cover;
          background-repeat: no-repeat;
          width: .4rem;
          height: .46rem;
          transform: translateX(-.1rem);
        }
      }
    }

    .press-intro__rule-form-td {
      font-family: 'AgencyFB-Bold';
      color: #212124;
      font-size: .28rem;
      padding: .12rem 0 .12rem .62rem;
    }
  }

  .press-intro__rule-form-tr {
    border-bottom: 1px solid #dedce8;
  }

  .press-intro__rule-form-th {
    font-size: .24rem;
    text-align: left;
    font-weight: 200;
    padding: 0 0 0 .52rem;
    color: #212124;
  }

  .press-intro__rule-form-td {
    height: .8rem;
    line-height: .8rem;
  }
}

.press-intro__rule-value {
  display: flex;
  justify-content: flex-start;
  font-size: .24rem;
  line-height: .34rem;
  color: #212124;
  width: 5.4rem;
  font-weight: 400;

  .ico-tip-24-location {
    margin: 0 .06rem 0 0;
  }

  .press-intro__rule-value-text {
    max-width: 4.2rem;
  }
}

.press-intro__rule-sche {
  display: inline-block;
  width: 4.5rem;
}

.press-intro__rule-sche-line {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;

  .press-intro__rule-sche-item {
    &:last-child {
      &::before {
        content: none;
      }
    }
  }
}

.press-intro__right-tips-box {
  position: relative;

  .press-intro__game-start-tips {
    width: 3.6rem;
    height: .36rem;
    line-height: .36rem;
    margin-left: -1.8rem;
    overflow: visible;
    text-indent: 0;
    background: #000;
    border-radius: 0;
    transform: skewX(-15deg);
    font-size: .2rem;
    top: -.48rem;
    left: 50%;
    position: absolute;

    text-align: center;

    &::before {
      content: '';
      position: absolute;
      display: block;
      transform: skewX(-6deg) rotate(37deg);
      bottom: -.05rem;
      left: 50%;
      margin-left: -.1rem;
      width: 0;
      height: 0;
      border-style: solid;
      background: #000;
      border-width: .1rem .08rem 0 .08rem;
      border-color: transparent transparent #000 transparent;
    }

    .press-intro__game-start-text {
      display: inline-block;
      transform: skewX(15deg);
      color: #fff;
    }
  }

  .ico-tip-help {
    width: .32rem;
    height: .32rem;
    margin: 0 .08rem;
    font-size: .24rem;

    font-family: 'iconfont';
    font-style: normal;
    display: inline-block;

    &::before {
      content: '\e028';
    }
  }
}

.press-intro__guide-content {
  margin: 0 auto;
}

.press-intro__guide-content--bg-1 {
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/guide-panel--1.png) center top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 6.9rem;
  height: 4.86rem;
  box-shadow: 0px 2px 2px rgba(196, 193, 205, .8);
}

.press-intro__guide-content--bg-2 {
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/guide-panel--2.png) center top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 6.9rem;
  height: 4.86rem;
  box-shadow: 0px 2px 2px rgba(196, 193, 205, .8);
}


.press-intro__guide-text {
  padding: .3rem .14rem;

  &.press-intro__guide-text--service {
    padding: 0 .24rem;
  }
}

.press-intro__guide-text::v-deep {
  .press-intro__guide-wx-wrap {
    img,
    image {
      width: 4.72rem !important;
      display: block;
      margin: .28rem 0 0 .7rem;
    }
  }  
}

.press-intro__qr-code {
  width: 2.46rem;
  height: 2.46rem;
  display: block;
  border: .06rem solid #d8d4f1;
  border-radius: .12rem;
  margin: .26rem auto .32rem;
  background: #fff;
  object-fit: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.press-intro__qr-code-tips {
  margin-bottom: .12rem;
  font-size: .24rem;
  line-height: .34rem;
  text-align: center;
  color: #212124;
  font-weight: 200;
}

.press-intro__guide-tips {
  font-size: .24rem;
  line-height: .28rem;
  display: block;
  color: #212124;
  text-align: center;
  margin-top: -1rem;

  &.press-intro__guide-tips-wx {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 12px;
    font-weight: 200;
    text-align: left;
    white-space: nowrap;

    .dots {
      display: inline-block;
      width: .52rem;
      height: .52rem;
      background: rgba(217, 217, 217, .4) url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/dots.png') center center no-repeat;
      background-size: .32rem .06rem;
      margin: 0 .04rem;
    }
  }
}

.press-intro__guide-example-img {
  display: block;
  margin: -.26rem auto -1.4rem;
  width: 100%;
}



.press-intro__guide-tabs {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  .press-intro__guide-tab {
    width: 3.72rem;
    height: .74rem;
    display: block;
    text-align: center;
    font-size: .24rem;
    line-height: .84rem;
    color: #212124;

    &--act {
      color: #5300c3;
      position: relative;
      line-height: .74rem;

      &::after {
        display: block;
        border-radius: .03rem;
        content: '';
        background-image: linear-gradient(180deg, #5300c3 0%, #5e2eff 62%);
        width: .72rem;
        height: .06rem;
        position: absolute;
        margin-left: -.36rem;
        left: 50%;
        bottom: .08rem;
      }
    }
  }
}

.press-intro__calendar {
  margin: .24rem auto 0;
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/calendar.png) center top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 3.1rem;
  height: 2.7rem;

  .press-intro__calendar-date {
    display: block;
    font-size: .36rem;
    line-height: 1.1rem;
    text-align: center;
    text-indent: -.8em;
    color: #212124;
  }

  .press-intro__calendar-time {
    display: block;
    font-size: .84rem;
    line-height: 1.2rem;
    text-align: center;
    text-indent: -.3rem;
    color: #000;
    font-family: 'AgencyFB-Bold';
  }
}

.press-intro__btn--common {
  height: .5rem;
  line-height: .5rem;
  width: 3.06rem;
  display: block;
  font-size: .24rem;
  text-align: center;
  font-family: 'PEACE';
  letter-spacing: .02rem;
}

.press-intro__btn--primary {
  color: #212124;
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/bg-btn.png) no-repeat;
  background-size: 100% 100%;
  margin: .36rem auto 0;
}


.press-intro__btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding: .32rem 0 .48rem;

  .press-intro__btn-inner:only-child {
    list-style: none;
    width: 4.4rem;
    padding: 0;
    margin: 0 auto;
  }
}