.overflow-ellipsis {
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.label-style {
  width                     : 65px;
  height                    : 23px;
  border                    : 1px solid #2795d2;
  border-top-left-radius    : 10px;
  border-bottom-right-radius: 10px;
  text-align                : center;
  line-height               : 23px;
  cursor                    : pointer;
  font-size                 : 14px;
  margin-right              : 7px;
  color                     : #2795d2;
}

body {
  background: #000;
}

.match-wrap {
  width                : 100%;
  height               : 100%;
  background           : url(../../../images/seafish/replay-detail-bg.png);
  background-attachment: fixed;
  padding-top          : 76px;
}

.live-detail-box {
  padding-bottom: 20px;
  margin-top    : 20px;
  border-top    : 1px solid #262b2c;
}

.live-detail-box .live-player-box-container {
  width         : 1200px;
  margin        : 20px auto 0 auto;
  position      : relative;
  z-index       : 5;
  display       : flex;
  flex-direction: column;
}

.live-detail-box .live-player-box-container .live-player-box {
  width          : 1200px;
  position       : relative;
  z-index        : 5;
  display        : flex;
  justify-content: space-between;
}

.live-detail-box .live-player-box-container .news-detail-paging {
  color      : #fff;
  font-size  : 14px;
  line-height: 30px;
  padding    : 20px 0;
}

.live-detail-box .live-player-box-container .news-detail-paging a {
  color: #ccc;
}

.live-detail-box .live-player-box-container .live-plaer-box-components {
  display      : flex;
  width        : 1200px;
  margin-bottom: 80px;
}

.live-intro {
  width         : 940px;
  display       : flex;
  flex-direction: column;
  margin-bottom : 20px;
  position      : relative;
}

.live-intro-name {
  font-size    : 36px;
  color        : #fff;
  max-width    : 590px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.live-intro-label {
  max-width    : 350px;
  display      : flex;
  flex-wrap    : wrap;
  font-size    : 18px;
  color        : #1d90d0;
  position     : absolute;
  right        : 0;
  top          : 14px;
  align-items  : center;
  width        : 297px;
  height       : 25px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.live-intro-label li {
  height                    : 23px;
  border                    : 1px solid #2795d2;
  border-top-left-radius    : 10px;
  border-bottom-right-radius: 10px;
  text-align                : center;
  line-height               : 23px;
  cursor                    : pointer;
  font-size                 : 14px;
  margin-right              : 7px;
  color                     : #2795d2;
  margin                    : 0 7px;
  width                     : 65px;
  white-space               : nowrap;
  overflow                  : hidden;
  text-overflow             : ellipsis;
}

.live-intro-label li a {
  color: #2795d2;
}

.live-intro-label li a:hover {
  color: #2795d2 !important;
}

.live-intro-date {
  font-size : 14px;
  color     : #585858;
  margin-top: 12px;
}

.live-intro-text-msg {
  width     : 924px;
  flex-wrap : wrap;
  color     : #fff;
  font-size : 14px;
  margin-top: 23px;
}

.live-player-left {
  width : 940px;
  height: auto;
}

.live-player-left .info {
  width   : 940px;
  height  : 527px;
  position: relative;
}

.live-player-left .info .live {
  width   : 940px;
  height  : 527px;
  position: absolute;
  top     : 0;
  left    : -10px;
}

.live-player-left .info .live iframe {
  width : 957px;
  height: 529px;
}

.live-player-left .info .live-wrap {
  width     : 940px;
  height    : 527px;
  background: url(../../../images/seafish/replay-details-bg.png) no-repeat;
}

.live-player-left .info .live-wrap .lists {
  padding       : 34px 72px 52px 47px;
  height        : 441px;
  width         : 821px;
  margin        : auto;
  display       : flex;
  flex-direction: column;
}

.live-player-left .info .live-wrap .lists .lists-title {
  background: url(../../../images/seafish/replay-details-video-title.png) no-repeat;
  width     : 278px;
  height    : 43px;
}

.live-player-left .info .live-wrap .lists .lists-wrap {
  padding : 24px 0 0 39px;
  width   : 782px;
  height  : 368px;
  overflow: hidden;
}

.live-player-left .info .live-wrap .lists .lists-wrap li {
  display      : flex;
  margin-bottom: 43px;
  align-items  : center;
}

.live-player-left .info .live-wrap .lists .lists-wrap li:hover:not(i) i {
  background: url("../../../images/seafish/replay-details-video-title-icon-active.png") no-repeat;
}

.live-player-left .info .live-wrap .lists .lists-wrap li:hover:not(a) a {
  color: #1c84be !important;
}

.live-player-left .info .live-wrap .lists .lists-wrap li i {
  background  : url("../../../images/seafish/replay-details-video-title-icon.png") no-repeat;
  width       : 31px;
  height      : 25px;
  margin-right: 16px;
}

.live-player-left .info .live-wrap .lists .lists-wrap li i:hover {
  background: url("../../../images/seafish/replay-details-video-title-icon-active.png") no-repeat;
}

.live-player-left .info .live-wrap .lists .lists-wrap li a {
  color        : #fff;
  font-size    : 18px;
  width        : 735px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.live-player-left .info .live-wrap .lists .lists-wrap li a:hover {
  color: #1c84be !important;
}

/* 相关录像 */
.live-match-info-video {
  width        : 250px;
  max-height   : 527px;
  background   : #10223e;
  border-radius: 4px;
  position     : relative;
}

.live-match-info-video .title {
  position  : absolute;
  top       : -46px;
  right     : 0;
  width     : 227px;
  height    : 55px;
  background: url("../../../images/seafish/relevant-replay-title.png") no-repeat;
}

.live-match-info-video .playback-wrap {
  padding : 30px 10px 50px 14px;
  overflow: auto;
}

.live-match-info-video .playback-wrap .playback {
  display       : flex;
  position      : relative;
  max-height    : 448px;
  flex-direction: column;
}

.live-match-info-video .playback-wrap .playback .news {
  display      : flex;
  margin-bottom: 22px;
}

.live-match-info-video .playback-wrap .playback .news li {
  width          : auto;
  max-width      : 171px;
  padding-right  : 20px;
  list-style-type: disc;
  position       : relative;
  display        : flex;
}

.live-match-info-video .playback-wrap .playback .news li:before {
  content      : ' ';
  position     : absolute;
  left         : -9px;
  top          : 6px;
  width        : 4px;
  height       : 4px;
  border-radius: 50%;
  background   : #fff;
}

.live-match-info-video .playback-wrap .playback .news li:hover {
  cursor: pointer;
}

.live-match-info-video .playback-wrap .playback .news li:hover:before {
  content      : ' ';
  position     : absolute;
  left         : -9px;
  top          : 6px;
  width        : 4px;
  height       : 4px;
  border-radius: 50%;
  background   : #1c84c0;
}

.live-match-info-video .playback-wrap .playback .news li:hover:after {
  content   : ' ';
  position  : absolute;
  right     : 0;
  width     : 16px;
  height    : 16px;
  background: url("../../../images/seafish/relevant-replay-icon.png") no-repeat;
}

.live-match-info-video .playback-wrap .playback .news li a {
  font-size    : 14px;
  height       : 16px;
  line-height  : 16px;
  max-width    : 170px;
  display      : inline-block;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  color        : #fff;
}

.live-match-info-video .playback-wrap .playback .news li a:hover {
  color: #1c84c0 !important;
}

.live-match-info-video .playback-wrap .playback .news .date {
  color    : #6a6e75;
  font-size: 12px;
  position : absolute;
  right    : 0;
}

.recommend-news-wrap {
  width: 600px;
}

.recommend-news-wrap .container-wrap {
  width         : 600px;
  background    : none;
  overflow      : hidden;
  max-height    : 648px;
  display       : flex;
  flex-direction: column;
  overflow      : auto;
}

.recommend-news-wrap .container-wrap .item-wrap {
  width     : 600px;
  background: none;
}

.item-wrap {
  margin: 0;
}

.item-wrap .content {
  padding: 15px 0 20px 0;
}

.item-wrap .content .text-wrap {
  width: 363px;
}

.item-wrap .content .text-wrap .title {
  color: #fff;
}

.item-wrap .content .text-wrap .text {
  overflow          : hidden;
  text-overflow     : ellipsis;
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-wrap .content .text-wrap .news-label {
  width: 144px;
}

.news-video-info-video {
  margin-top : 46px;
  margin-left: 78px;
  position   : relative;
}

.news-video-info-video-banner {
  width     : 522px;
  height    : 67px;
  background: url("../../../images/seafish/replay-live-title.png") no-repeat;
}

.news-video-info-video-playback-wrap {
  height    : auto;
  max-height: 635px;
  overflow  : auto;
}

.news-video-info-video-playback-wrap .news-video-info-video-playback a {
  color: #999;
}

.news-video-info-video-playback-wrap .news-video-info-video-playback a li:hover {
  color: #038ccb;
}

.news-video-info-video-playback-wrap .news-video-info-video-playback a .news-video-info-video-playback-label {
  color: #999;
}

.news-video-info-video-playback-wrap .news-video-info-video-playback a .news-video-info-video-playback-label span {
  color : #557b90;
  border: 1px solid #557b90;
}

.news-video-info-video-playback-wrap .news-video-info-video-playback a:hover:not(.news-video-info-video-playback-icon) .news-video-info-video-playback-icon {
  background: url("../../../images/seafish/replay-hover-icon.png") no-repeat;
}

.news-video-info-video .news-video-info-video-playback:hover:not(.news-video-info-video-playback-icon) .news-video-info-video-playback-icon {
  background: url(../../../images/seafish/replay-hover-icon.png);
  width     : 42px;
  height    : 33px;
  cursor    : pointer;
  position  : absolute;
  right     : 0;
  top       : 50%;
  margin-top: -21px;
}

.news-video-info-video .news-video-info-video-playback-date {
  color: #484848 !important;
}

.news-video-info-video-playback:hover:not(.li-text) .li-text {
  color: #00a0e9 !important;
}

.news-video-info-video-playback li a:hover {
  color: #00a0e9 !important;
}

.news-video-info-video-playback li:hover {
  color: #00a0e9 !important;
}


div::-webkit-scrollbar {
  display: none;
}

div:hover::-webkit-scrollbar {
  display: none;
}

div {
  scrollbar-width: none;
}