/**
 *   randomLive v1.0.1
 *   Copyright: 2025 MX-TV, Date:20250523 21:56:24
 **/
html,
body {
  width: 100%;
}
html,
body,
div,
header,
bottom,
ul,
li {
  padding: 0;
  margin: 0;
  font-family: "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes webkit-loading {
  0% {
    -webkit-transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.loading_block {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.1rem;
  z-index: 1000;
}
.loading_block .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.15rem;
  width: 0.3rem;
  height: 0.3rem;
  background: url(../img/loading4.png) no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  animation: loading 1.2s infinite linear;
  -webkit-animation: webkit-loading 1.2s infinite linear;
  z-index: 5;
}
.move_top {
  display: none;
  position: fixed;
  z-index: 100;
  bottom: 2.4rem;
  right: 0.3rem;
  background-image: url(../img/bg_to_top.png);
  border-radius: 0.4rem;
  width: 0.9rem;
  height: 0.9rem;
  background-size: 100%;
}
.move_top.show {
  display: block;
}
.profile_page_btn {
  display: none;
  position: fixed;
  z-index: 100;
  bottom: 3.5rem;
  right: 0.3rem;
  background-image: url(../img/bg_profile_page_btn.png);
  border-radius: 0.4rem;
  width: 0.9rem;
  height: 0.9rem;
  background-size: 100%;
}
.profile_page_btn.show {
  display: block;
}
.tip-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
}
.tip-wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}
.tip-content {
  display: inline-block;
  min-width: 4rem;
  max-width: 6.2rem;
  line-height: .42rem;
  font-size: .32rem;
  color: #bfbfc2;
  word-wrap: break-word;
  padding: .43rem .2rem;
  background: rgba(0, 0, 0, 0.8);
}

.novice_package {
  display: inline-block;
  width: 1.8rem;
  height: 1.9rem;
  background-image: url(../img/novice_package_1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 0;
  z-index: 50;
  transition: bottom 0.2s;
}
.novice_package.up {
  bottom: 4.5rem;
}
.novice_package.big {
  background-image: url(../img/novice_package_2.png);
}
.main {
  padding-bottom: .2rem;
  overflow: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.main .h2 .title {
  position: relative;
  padding-top: .9rem;
  padding: .9rem .4rem 0;
  max-width: 7.5rem;
  margin: 0 auto;
}
.main .h2 .title .title_bg {
  position: absolute;
  top: .58rem;
  left: .4rem;
  width: 2.47rem;
  height: .47rem;
  background: url('../img/new_teacher_top.png') no-repeat center;
  background-size: contain;
}
.main .h2 .title .title_detail {
  position: relative;
  z-index: 1;
  line-height: 1;
  cursor: pointer;
}
.main .h2 .title .title_detail .lf {
  font-size: .36rem;
  color: #333;
  font-weight: 800;
  cursor: pointer;
}
.main .h2 .title .title_detail .rt {
  font-size: .28rem;
  color: #999;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.main .h2 .title .title_detail .rt .arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: .05rem;
  height: .21rem;
  width: .11rem;
  background-image: url('../img/arrow1.png');
  background-size: 100% 100%;
  margin-top: -2px;
}
.main .ranking_top {
  position: relative;
}
.main .ranking_top .top_bg {
  height: 1.2rem;
}
.main .ranking_top .top_bg1 {
  height: 8.4rem;
  background-color: #ddd0ae;
}
.main .ranking_top .top_content {
  position: absolute;
  top: 0;
  width: 100%;
  padding-top: .44rem;
}
.main .ranking_top .top_content .top250 {
  width: 7.1rem;
  margin: 0 auto;
  height: 2.9rem;
  border-radius: .18rem;
  background: url('../img/top_ranking_bg.png') no-repeat center;
  background-size: 7.1rem 2.9rem;
  /*background-size: 100% 100%;*/
  position: relative;
  cursor: pointer;
}
.main .ranking_top .top_content .top250_msg {
  padding-left: .6rem;
  overflow: hidden;
}
.main .ranking_top .top_content .top250_text {
  padding-top: .5rem;
  font-size: .32rem;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.main .ranking_top .top_content .top250_logo {
  width: 2.13rem;
  height: .65rem;
  margin-top: .07rem;
  margin-left: -0.1rem;
  background: url('../img/top250_logo.png') no-repeat center;
  background-size: contain;
}
.main .ranking_top .top_content .top250_text1 {
  color: #b39b79;
  font-size: .24rem;
  cursor: pointer;
  padding-top: .3rem;
  line-height: 1;
}
.main .ranking_top .top_content .top250_swipe {
  height: 2.9rem;
  width: 3.4rem;
  position: absolute;
  top: -0.4rem;
  right: .6rem;
  /*.swiper-container{
          height: 100%;
        }
        .swiper-slide{
          background-color: blue;
          height: 100%;
        }*/
}
.main .ranking_top .top_content .top250_swipe .top1,
.main .ranking_top .top_content .top250_swipe .top2,
.main .ranking_top .top_content .top250_swipe .top3 {
  position: absolute;
  overflow: hidden;
  background-size: 100%;
  background-position: center;
}
.main .ranking_top .top_content .top250_swipe .top1 .top_mask,
.main .ranking_top .top_content .top250_swipe .top2 .top_mask,
.main .ranking_top .top_content .top250_swipe .top3 .top_mask {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.main .ranking_top .top_content .top250_swipe .top1 {
  height: 2.4rem;
  width: 2.4rem;
  left: 50%;
  top: 50%;
  margin-left: -1.2rem;
  margin-top: -1.3rem;
  z-index: 3;
  border-radius: .12rem;
  box-shadow: 0 0 0.1rem 0.01rem rgba(0, 0, 0, 0.2);
}
.main .ranking_top .top_content .top250_swipe .top2 {
  left: 0;
  top: 50%;
  margin-top: -1rem;
  width: 2rem;
  height: 2rem;
  border-radius: .1rem;
  background-color: blue;
  background: url('../img/new_logo4.png') no-repeat center;
  background-size: cover;
}
.main .ranking_top .top_content .top250_swipe .top3 {
  right: 0;
  top: 50%;
  margin-top: -1rem;
  width: 2rem;
  height: 2rem;
  border-radius: .1rem;
  background-color: green;
  background: url('../img/new_logo4.png') no-repeat center;
  background-size: cover;
}
.main .ranking_top .top_content .other_ranking {
  width: 6.7rem;
  margin: 0 auto;
  height: 5.7rem;
  margin-top: .16rem;
}
.main .ranking_top .top_content .other_ranking .swiper-container1 {
  height: 100%;
  line-height: 1;
  font-size: 0;
}
.main .ranking_top .top_content .week_top {
  height: 100%;
  width: 5rem;
  position: relative;
  background-color: white;
  border-radius: .18rem;
  box-shadow: 0 0 0.22rem 0.02rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.main .ranking_top .top_content .week_top .week_top_title {
  position: relative;
  padding: .6rem .4rem .2rem;
}
.main .ranking_top .top_content .week_top .week_top_title .week_bg {
  position: absolute;
  top: .3rem;
  left: .4rem;
  width: 1.74rem;
  height: .45rem;
  background: url('../img/week.png') no-repeat center;
  background-size: contain;
}
.main .ranking_top .top_content .week_top .week_top_title .week_title {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.main .ranking_top .top_content .week_top .week_top_title .week_title .lf {
  float: left;
  font-size: .36rem;
  font-weight: 800;
  color: #333;
}
.main .ranking_top .top_content .week_top .week_top_title .week_title .rt {
  font-size: .24rem;
  color: #eb5b3f;
  float: right;
  height: .36rem;
  line-height: .46rem;
  cursor: pointer;
}
.main .ranking_top .top_content .week_top .week_top_content {
  padding: 0 .4rem;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item {
  padding: .1rem 0;
  height: 1.4rem;
  display: block;
  width: 100%;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .lf {
  float: left;
  margin-right: .2rem;
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .lf .img {
  height: 100%;
  width: 100%;
  display: block;
  border-radius: .1rem;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .lf .top_num {
  position: absolute;
  top: .2rem;
  left: -0.1rem;
  width: .36rem;
  height: .32rem;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .lf .top_num1 {
  background: url('../img/week_top1.png') no-repeat center;
  background-size: contain;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .lf .top_num2 {
  background: url('../img/week_top2.png') no-repeat center;
  background-size: contain;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .lf .top_num3 {
  background: url('../img/week_top3.png') no-repeat center;
  background-size: contain;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .rt {
  overflow: hidden;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .rt .title {
  padding-top: .06rem;
  margin-bottom: .12rem;
  min-height: .74rem;
  font-size: .28rem;
  line-height: .36rem;
  color: #333;
  font-weight: 600;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.main .ranking_top .top_content .week_top .week_top_content .course_item .rt .teacher {
  font-size: .24rem;
  color: #999;
}
.main .top_new_teacher .top_teacher_course {
  text-align: center;
  padding-top: .3rem;
  font-size: 0;
}
.main .top_new_teacher .top_teacher_course .item {
  display: inline-block;
  width: 2.16rem;
  vertical-align: top;
}
.main .top_new_teacher .top_teacher_course .item .img_wrapper {
  position: relative;
  border-radius: .08rem;
  overflow: hidden;
}
.main .top_new_teacher .top_teacher_course .item .top_logo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: .8rem;
  height: .4rem;
}
.main .top_new_teacher .top_teacher_course .item .top_logo1 {
  background: url('../img/Top1.png') no-repeat center;
  background-size: contain;
}
.main .top_new_teacher .top_teacher_course .item .top_logo2 {
  background: url('../img/Top2.png') no-repeat center;
  background-size: contain;
}
.main .top_new_teacher .top_teacher_course .item .top_logo3 {
  background: url('../img/Top3.png') no-repeat center;
  background-size: contain;
}
.main .top_new_teacher .top_teacher_course .item .img {
  height: 2.16rem;
  width: 2.16rem;
}
.main .top_new_teacher .top_teacher_course .item .course_title {
  padding-top: .16rem;
  font-weight: 600;
  box-sizing: content-box;
  height: .68rem;
  font-size: .28rem;
  color: #333;
  line-height: .36rem;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-align: left;
  -webkit-box-orient: vertical;
}
.main .top_new_teacher .top_teacher_course .item:nth-child(2) {
  margin: 0 .1rem;
}
.main .single_course_top {
  /*.item:after{
      box-sizing: border-box;
      position: absolute;
      content: "";
      border: 1px solid #e8e8e8;
      border-radius: 0.18rem;
      width: 200%;
      height: 200%;
      top: 0;
      left: 0;
      transform: scale(.5);
      transform-origin: 0 0;
      -webkit-transform: scale(.5);
      -webkit-transform-origin: 0 0;
    }*/
}
.main .single_course_top .title {
  padding-top: .78rem;
}
.main .single_course_top .single_course_list {
  padding-top: .3rem;
}
.main .single_course_top .single_course_list .item {
  padding: .2rem 0;
  position: relative;
  background-color: #fafafa;
  width: 6.7rem;
  margin: 0 auto;
  border-radius: .18rem;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  margin-bottom: .2rem;
  cursor: pointer;
}
.main .single_course_top .single_course_list .item .lf {
  float: left;
  padding-left: .4rem;
  padding-top: .26rem;
}
.main .single_course_top .single_course_list .item .lf .name {
  font-size: .32rem;
  color: #333;
  font-weight: 800;
}
.main .single_course_top .single_course_list .item .lf .name span {
  color: #eb5b3f;
}
.main .single_course_top .single_course_list .item .lf .num {
  font-size: .24rem;
  color: #999;
}
.main .single_course_top .single_course_list .item .rt {
  float: right;
  padding-right: .2rem;
  font-size: 0;
}
.main .single_course_top .single_course_list .item .rt .img {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: .1rem;
  margin-left: .1rem;
}
.main .class_course_top .title {
  padding-top: .6rem;
}
.main .class_course_top .class_list {
  padding-left: .4rem;
  max-width: 7.5rem;
  box-sizing: border-box;
  padding-top: .3rem;
  overflow: hidden;
  margin: 0 auto;
}
.main .class_course_top .class_list .item {
  position: relative;
  width: 2.16rem;
  height: 1.3rem;
  border-radius: .1rem;
  overflow: hidden;
  margin-right: .12rem;
  margin-bottom: .1rem;
  float: left;
}
.main .class_course_top .class_list .item .img,
.main .class_course_top .class_list .item .img_mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.main .class_course_top .class_list .item .img {
  background-image: url('../img/new_logo4.png');
  background-position: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.main .class_course_top .class_list .item .img_mask {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}
.main .class_course_top .class_list .item .img_title {
  position: absolute;
  z-index: 2;
  font-size: .28rem;
  color: #fff;
  font-weight: 800;
  text-align: center;
  width: 100%;
  line-height: 1.3rem;
  cursor: pointer;
}