@charset "UTF-8";
.shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10; }

/*直播列表筛选*/
.live-tab-list ul {
  padding: 0 20px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  height: 68px;
  background: white;
  border-radius: 4px; }
  .live-tab-list ul li {
    margin-left: 32px;
    padding: 4px 12px;
    color: #303133;
    cursor: pointer; }
    .live-tab-list ul li.active {
      background: #0486fe;
      border-radius: 4px;
      color: #fff; }

/*直播列表*/
.live-box {
  padding-bottom: 60px !important; }
  .live-box .live-list {
    display: flex;
    flex-wrap: wrap; }

/*直播详情头部*/
.live-detail-header {
  display: flex;
  height: 320px;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  margin-top: 20px !important; }
  .live-detail-header .header-img {
    width: 498px;
    height: 280px;
    position: relative; }
    .live-detail-header .header-img img {
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .live-detail-header .header-img .shadow {
      position: absolute;
      top: 0; }
    .live-detail-header .header-img .play-icon {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -30px;
      margin-top: -30px;
      width: 60px;
      height: 60px;
      background: url("../image/live-pause-icon.png") no-repeat center/cover; }
    .live-detail-header .header-img .live-tips {
      width: 350px;
      height: 60px;
      background: rgba(4, 134, 254, 0.6993);
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -175px;
      margin-top: -30px; }
      .live-detail-header .header-img .live-tips i {
        width: 22px;
        height: 22px;
        background: url("../image/live-pause-icon.png") no-repeat center/cover; }
      .live-detail-header .header-img .live-tips p {
        font-size: 16px;
        font-weight: 500;
        color: white;
        margin-left: 20px; }
  .live-detail-header .header-live {
    flex: 1;
    padding: 0 20px;
    position: relative; }
    .live-detail-header .header-live .live-titlex {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
      line-height: 33px;
      margin-bottom: 20px; }
    .live-detail-header .header-live .live-desc {
      color: #606266;
      line-height: 25px;
      margin-bottom: 20px;
      height: 50px; }
    .live-detail-header .header-live .live-state {
      display: flex; }
      .live-detail-header .header-live .live-state .state-num {
        color: #909399; }
      .live-detail-header .header-live .live-state i {
        color: #cccccc;
        padding: 0 10px; }
      .live-detail-header .header-live .live-state .state {
        margin-bottom: 20px; }
        .live-detail-header .header-live .live-state .state span.wait {
          color: #67c23a; }
        .live-detail-header .header-live .live-state .state span.living {
          color: #0486fe; }
        .live-detail-header .header-live .live-state .state span.end {
          color: #606266; }
        .live-detail-header .header-live .live-state .state span.playback {
          color: #ffa400; }
    .live-detail-header .header-live .live-price {
      font-size: 24px;
      font-weight: 500;
      color: #0088ff;
      line-height: 33px; }
    .live-detail-header .header-live .live-btn {
      position: absolute;
      bottom: 0; }
      .live-detail-header .header-live .live-btn button {
        width: 180px;
        height: 48px;
        font-size: 20px;
        color: #fff;
        width: 180px;
        line-height: 48px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer; }
      .live-detail-header .header-live .live-btn-original {
        background-color: #0088ff; }
        .live-detail-header .header-live .live-btn-original.end {
          background-color: #ccc; }
      .live-detail-header .header-live .live-btn-vip {
        background-color: #67c23a;
        margin-left: 20px; }

/*直播详情内容*/
.live-detail-content {
  margin: 20px auto 60px !important;
  overflow: hidden; }
  .live-detail-content .content-left {
    background: white;
    border-radius: 2px;
    float: left;
    margin-right: 20px;
    padding: 20px 20px 60px;
    width: 700px; }
    .live-detail-content .content-left .detail-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 20px; }
    .live-detail-content .content-left .detail-info p {
      color: #606266;
      line-height: 26px; }
  .live-detail-content .content-right {
    width: 460px;
    background: white;
    padding: 20px;
    float: left; }
    .live-detail-content .content-right .right-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      line-height: 22px; }
    .live-detail-content .content-right .course-items a {
      display: block;
      border-bottom: 1px solid #eee; }
      .live-detail-content .content-right .course-items a:last-child {
        border-bottom: none; }
    .live-detail-content .content-right .course-item-h {
      display: flex;
      padding: 10px 0; }
      .live-detail-content .content-right .course-item-h .img {
        width: 200px;
        height: 114px;
        flex: none; }
        .live-detail-content .content-right .course-item-h .img img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .live-detail-content .content-right .course-item-h .info {
        padding: 0 10px;
        position: relative;
        flex: 1; }
        .live-detail-content .content-right .course-item-h .info .title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          line-height: 20px; }
        .live-detail-content .content-right .course-item-h .info .num {
          margin-top: 10px;
          color: #909399;
          font-size: 12px; }
        .live-detail-content .content-right .course-item-h .info .price {
          font-size: 14px;
          color: #0088ff;
          position: absolute;
          bottom: 0;
          left: 10px; }

.live-title {
  width: 100%;
  height: 70px;
  background: #1d1d1d;
  padding-left: 20px;
  line-height: 65px;
  color: #c0c4cc;
  font-size: 18px;
  display: flex;
  align-items: center; }

.video_title img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.8;
  float: left; }

.video_title span {
  display: inline-block;
  margin-left: 20px;
  font-size: 18px;
  color: white;
  opacity: 0.8;
  line-height: 20px;
  float: left; }

.video_title i {
  display: inline-block;
  width: 1px;
  height: 18px;
  border-left: 1px solid white;
  opacity: 0.2;
  margin: 2px 0 0 20px;
  float: left; }

.live-ing {
  width: 100%; }

.live-video-box {
  width: 75%;
  background: #1d1d1d;
  height: 100%;
  position: fixed;
  left: 0;
  top: 70px;
  background: #000; }

.live-chat {
  width: 25%;
  background: #333333;
  height: 100%;
  position: fixed;
  right: 0;
  top: 70px; }

.chat-nav {
  width: 100%;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1); }

.chat-nav span {
  width: 49%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #c0c4cc;
  display: inline-block;
  cursor: pointer; }

.chat-nav .chat-nav-active {
  color: #0486fe;
  border-bottom: 2px solid #0486fe; }

.chat-info,
.chat-info-teacher {
  width: 100%;
  height: 100%; }

.see-more-msg {
  width: 100%;
  text-align: center;
  color: #666; }

.chat-msg {
  height: 69%;
  overflow-y: scroll;
  font-size: 12px; }

.chat-msg ul li {
  margin-top: 20px;
  color: #fff;
  line-height: 17px;
  padding-left: 10px; }

.chat-msg ul li span {
  color: #0486fe; }

.chat-msg ul li span em {
  background: #0486fe;
  display: inline-block;
  width: 32px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  color: #fff;
  margin-right: 10px;
  border-radius: 2px; }

.chat-msg ul li p {
  margin-top: 5px;
  font-size: 12px;
  color: white;
  line-height: 17px; }

.welcome-user {
  color: #f56c6c;
  font-weight: normal; }

/*定义滚动条轨道 内阴影+圆角*/
.chat-msg::-webkit-scrollbar {
  width: 10px;
  height: 16px;
  background-color: #333; }

.chat-msg::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #333; }

/*定义滑块 内阴影+圆角*/
.chat-msg::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #666; }

.chat-input {
  padding: 0 10px; }

.chat-btn {
  width: 100%;
  display: flex;
  position: relative; }

.chat-val input {
  width: 100%;
  border-radius: 2px;
  border: none;
  height: 30px;
  line-height: 30px;
  padding-left: 5px; }

.chat-btn button {
  width: 90%;
  background: #0486fe;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: none; }

.chat-btn span {
  display: inline-block;
  margin-top: 3px; }

.live-teacher {
  width: 100%; }

.live-teacher ul li {
  margin: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding-left: 10px;
  border-radius: 4px;
  height: 56px;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer; }

.live-teacher ul li span {
  width: 40px;
  height: 40px; }

.live-teacher ul li img {
  width: 40px;
  height: 40px;
  border-radius: 100%; }

.back-te-list {
  color: #c0c4cc;
  display: flex;
  align-items: center; }

.live-time {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  height: 30px;
  width: 70%;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; }

.chat-info-teacher {
  position: absolute;
  left: 100%;
  top: 40px;
  background: #333;
  transition: 0.5s; }

span.emotion {
  width: 42px;
  height: 20px;
  padding-left: 20px;
  cursor: pointer; }

span.emotion:hover {
  background-position: 2px -28px; }

.qqFace {
  margin-top: 4px;
  background: #fff;
  padding: 2px;
  border: 1px #dfe6f6 solid; }

.qqFace table td {
  padding: 0px; }

.qqFace table td img {
  cursor: pointer;
  border: 1px #fff solid; }

.qqFace table td img:hover {
  border: 1px #0066cc solid; }

#show {
  width: 770px;
  margin: 20px auto;
  background: #fff;
  padding: 5px;
  border: 1px solid #ddd;
  vertical-align: top; }

.sub_btn {
  position: absolute;
  right: 0px;
  top: 0;
  display: inline-block;
  zoom: 1;
  /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: 0.5em 2em 0.55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  color: #e8f0de;
  border: solid 1px #538312;
  background: #64991e;
  background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); }

.sub_btn:hover {
  background: #538018;
  background: -moz-linear-gradient(top, #6b9d28, #436b0c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); }

.one-chat-msg li:first-child {
  margin-top: 0; }

.one-msg-box {
  height: 61%;
  margin-top: 20px; }