* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  /* font-family: "PingFangSC-Light", "Microsoft Yahei"; */
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue", Helvetica,Tahoma,"Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
  user-select: none;
}
html,
body {
  height: 100%;
  width: 100%;
  position: relative;
}
i,
em,
b {
  font-style: normal;
  font-weight: normal;
}
ul li {
  list-style: none;
}
input,
button,
textarea {
  border: 0;
  outline: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}
.clearfix {
  *zoom: 1;
}
a {
  text-decoration: none;
}

@font-face {
  font-family: "DINAlternate-Bold";
  src: url("../icons/DIN\ Alternate\ Bold.ttf") format("truetype");
}

/*一行超出省略*/
.omit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-wrapper {
  /* height: 100%; */
  position: relative;
  overflow-y: auto;
  background: url('../images/background.png') center center no-repeat;
  background-size: cover;
}
#page{
  position: fixed;
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container {
  margin: 30px auto;
  position: relative;
}
.page-wrapper .page-container .header {
  height: 80px;
  background: #242530;
  box-shadow: 0px 0px 6px 0px rgba(17,18,21,0.3);
  border-radius: 8px;
}
.page-wrapper .page-container .header .channel {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.page-wrapper .page-container .header .channel-img {
  /* width: 60px;
  height: 60px; */
  margin-left: 20px;
  display: none;
}
.page-wrapper .page-container .header .channel-img img {
  /* width: 100%;
  height: auto; */
  height: 46px;
  border-radius: 6px;
  width: 46px;
  /* object-fit: cover; */
}
.page-wrapper .page-container .header .channel-info {
  margin-right: 200px;
  margin-left: 14px;
  /* height: 100%; */
}
.page-wrapper .page-container .header .channel-info h4 {
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
}
.page-wrapper .page-container .header .channel-info .nameBox {
  display: flex;
  align-items: center;
}
.page-wrapper .page-container .header .channel-info .nameBox img {
  height: 20px;
  margin-left: 12px;
}
.page-wrapper .page-container .header .channel-info > .live_time {
  margin-top: 4px;
  vertical-align: middle;
  font-size: 0;
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
}
.page-wrapper .page-container .header .channel-info p {
  /* display: inline-block;
  font-size: 14px;
  color: #8898af;
  letter-spacing: 1px;
  vertical-align: middle;
  height: 20px; */

  font-size: 14px;
  font-weight: 400;
  color: #B3B3B9;
}
.page-wrapper .page-container .header .channel-info p span {
  /* vertical-align: middle; */
}
.page-wrapper .page-container .header .channel-info p span img {
  width: 12px;
  height: 12px;
  /* vertical-align: middle; */
}
.page-wrapper .page-container .header .channel-info > div .people-num {
  display: none;
  margin-left: 34px;
  position: relative;
  /* height: 20px;
  width: fit-content; */
  padding: 0 15px 0 28px;
  /* background-color: #151623;
  border-radius: 10px;
  font-size: 0; */
  vertical-align: middle;
  color: #B3B3B9;
}
.page-wrapper .page-container .header .people-num span {
  font-size: 14px;
  color: #B3B3B9;
  line-height: 20px;
  vertical-align: middle;
}
.page-wrapper .page-container .header .people-num span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 3px;
  left: 12px;
  background: url(../images/renshu.png) no-repeat center center;
  -webkit-background-size: 12px 11px;
  background-size: 12px 12px;
}
.page-wrapper .page-container .header .time-start,
.page-wrapper .page-container .header .time-end {
  /* color: #96b4e0; */
}
.page-wrapper .page-container .header .channel-func {
  position: absolute;
  /* top: 0; */
  right: 0;
  /* height: 100%; */
  display: flex;
  justify-content: flex-end;
  /* padding-top: 16px; */
  /*弹幕/分享/扫码*/
  /* 中英文切换 */
}
.page-wrapper .page-container .header .channel-func .share,
.page-wrapper .page-container .header .channel-func .mobile,
.page-wrapper .page-container .header .channel-func .guidance,
.page-wrapper .page-container .header .channel-func .danmu-control {
  position: relative;
  /* width: 44px;
  height: 44px; */
  z-index: 999;
  margin: 0 20px;
  /* background-color: #151623;
  border-radius: 50%; */
  cursor: pointer;
}
.page-wrapper .page-container .header .channel-func .share,
.page-wrapper .page-container .header .channel-func .mobile,
.page-wrapper .page-container .header .channel-func .guidance,
.page-wrapper .page-container .header .channel-func .danmu-control {
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.page-wrapper .page-container .header .channel-func .share div img,
.page-wrapper .page-container .header .channel-func .mobile div img,
.page-wrapper .page-container .header .channel-func .guidance div img,
.page-wrapper .page-container .header .channel-func .danmu-control div img {
  width: 18px;
  height: 18px;
  margin-top: 5px;
}
.page-wrapper .page-container .header .channel-func .share>div>img:nth-child(2),
.page-wrapper .page-container .header .channel-func .mobile>div>img:nth-child(2),
.page-wrapper .page-container .header .channel-func .guidance>div>img:nth-child(2),
.page-wrapper .page-container .header .channel-func .danmu-control>div>img:nth-child(2) {
  display: none;
}

.page-wrapper .page-container .header .channel-func .share div span,
.page-wrapper .page-container .header .channel-func .mobile div span,
.page-wrapper .page-container .header .channel-func .guidance div span,
.page-wrapper .page-container .header .channel-func .danmu-control div span {
  margin-top: 8px;
  display: block;
}
.page-wrapper .page-container .header .channel-func .share:hover,
.page-wrapper .page-container .header .channel-func .mobile:hover,
.page-wrapper .page-container .header .channel-func .guidance:hover,
.page-wrapper .page-container .header .channel-func .danmu-control:hover {
  /* background-color: #347fff; */
  color: #2D7FF0;
}
.page-wrapper .page-container .header .channel-func .share:hover>div>img:first-child,
.page-wrapper .page-container .header .channel-func .mobile:hover>div>img:first-child,
.page-wrapper .page-container .header .channel-func .guidance:hover>div>img:first-child,
.page-wrapper .page-container .header .channel-func .danmu-control:hover>div>img:first-child {
  display: none;
}
.page-wrapper .page-container .header .channel-func .share:hover div img:nth-child(2),
.page-wrapper .page-container .header .channel-func .mobile:hover div img:nth-child(2),
.page-wrapper .page-container .header .channel-func .guidance:hover div img:nth-child(2),
.page-wrapper .page-container .header .channel-func .danmu-control:hover div img:nth-child(2) {
  display: inline-block;
}
.page-wrapper .page-container .header .channel-func img {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .header .channel-func .svg-icon {
  width: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.page-wrapper .page-container .header .channel-func .icon {
  display: block;
  height: 44px;
  line-height: 44px;
  margin: 0 auto;
  color: #fff;
  font-size: 26px;
}
.page-wrapper .page-container .header .channel-func .danmu-control {
  display: none;
}
.page-wrapper .page-container .header .channel-func .danmu-control .icon {
  margin-left: 11px;
}
.page-wrapper .page-container .header .channel-func .share .share-box {
  position: absolute;
  top: 59px;
  right: -20px;
  width: 200px;
  height: 105px;
  background-color: rgba(30, 31, 42, 0.9);
  border: solid 2px #151623;
  border-radius: 10px;
  transform: scale(0);
  transform-origin: top right;
}
.page-wrapper .page-container .header .channel-func .share .share-box::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -10px;
  right: 25px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(30, 31, 42, 0.9);
}
.page-wrapper .page-container .header .channel-func .share .share-box h4 {
  font-weight: normal;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-top: 15px;
}
.page-wrapper .page-container .header .channel-func .share .share-box .share-list {
  margin: 15px auto;
}
.page-wrapper .page-container .header .channel-func .share .share-box .share-list a {
  float: left;
  width: 33.33%;
  height: 38px;
}
.page-wrapper .page-container .header .channel-func .share .share-box .share-list .share-qq {
  background: url(../images/qq.png) no-repeat center center;
  background-size: 38px;
}
.page-wrapper .page-container .header .channel-func .share .share-box .share-list .share-weixin {
  background: url(../images/weixin.png) no-repeat center center;
  background-size: 38px;
}
.page-wrapper .page-container .header .channel-func .share .share-box .share-list .share-weibo {
  background: url(../images/weibo.png) no-repeat center center;
  background-size: 38px;
}
.page-wrapper .page-container .header .channel-func .share:hover .share-box {
  opacity: 1;
  transform: scale(1);
}
.page-wrapper .page-container .header .channel-func .guidance {
  display: none;
}
.page-wrapper .page-container .header .channel-func .guidance .guidance-box {
  position: absolute;
  top: 59px;
  left: -48px;
  width: fit-content;
  height: 185px;
  background-color: rgba(30, 31, 42, 0.9);
  border: solid 2px #151623;
  border-radius: 10px;
  transform: scale(0);
  transform-origin: top left;
}
.page-wrapper .page-container .header .channel-func .guidance .guidance-box .title {
  font-weight: normal;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-top: 15px;
  padding: 0 6px;
  white-space: nowrap;
}
.page-wrapper .page-container .header .channel-func .guidance .guidance-box .guidance-img {
  width: 100px;
  height: 100px;
  margin: 15px auto;
}
.page-wrapper .page-container .header .channel-func .guidance .guidance-box .guidance-img img {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .header .channel-func .guidance:hover .guidance-box {
  opacity: 1;
  transform: scale(1);
}
.page-wrapper .page-container .header .channel-func .mobile .scan {
  position: absolute;
  top: 59px;
  right: -15px;
  width: 174px;
  height: 185px;
  background-color: rgba(30, 31, 42, 0.9);
  border: solid 2px #151623;
  border-radius: 10px;
  transform: scale(0);
  transform-origin: top right;
}
.page-wrapper .page-container .header .channel-func .mobile .scan::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -10px;
  right: 25px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(30, 31, 42, 0.9);
}
.page-wrapper .page-container .header .channel-func .mobile .scan h4 {
  font-weight: normal;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-top: 15px;
}
.page-wrapper .page-container .header .channel-func .mobile .scan .code-box {
  width: 110px;
  height: 110px;
  background-color: #fff;
  padding: 5px;
  margin: 15px auto;
}
.page-wrapper .page-container .header .channel-func .mobile .scan .code-box #qr_code {
  width: 100px;
  height: 100px;
}
.page-wrapper .page-container .header .channel-func .mobile:hover .scan {
  opacity: 1;
  transform: scale(1);
}
.page-wrapper .page-container .header .channel-func .scan,
.page-wrapper .page-container .header .channel-func .share-box,
.page-wrapper .page-container .header .channel-func .guidance-box {
  opacity: 0;
  transition: all 0.5s 0.2s;
}
.page-wrapper .page-container .header .channel-func .lang {
  /* width: 60px;
  height: 24px;
  line-height: 24px;
  border-radius: 12px;
  overflow: hidden; */
  margin: 0 20px;
  display: none;
  font-size: 14px;
  color: #fff;
  /* color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.4); */
  cursor: pointer;
}
.page-wrapper .page-container .header .channel-func .lang:hover {
  color: #2D7FF0;
}
.page-wrapper .page-container .header .channel-func .lang p {
  /* width: 50%;
  height: 100%;
  float: left; */
  text-align: center;
  display: none;
  
  font-size: 12px;
}
.page-wrapper .page-container .header .channel-func .lang p img {
  width: 18px;
  height: 18px;
  margin-top: 5px;
}
.page-wrapper .page-container .header .channel-func .lang p img:nth-child(2) {
  display: none;
}
.page-wrapper .page-container .header .channel-func .lang:hover p img:first-child {
  display: none;
}
.page-wrapper .page-container .header .channel-func .lang:hover p img:nth-child(2) {
  display: inline-block;
}
.page-wrapper .page-container .header .channel-func .lang p span {
  margin-top: 8px;
  display: block;
}
.page-wrapper .page-container .header .channel-func .lang p.active {
  /* background-color: rgba(255, 255, 255, 0.7);
  color: #151623; */
  display: block;
}
.page-wrapper .page-container .main {
  margin-top: 8px;
  display: flex;
}
.page-wrapper .page-container .main .main-left {
  /* background: #FFFFFF; */
  box-shadow: 0px 0px 6px 0px rgba(17,18,21,0.3);
  border-radius: 8px;
  /* overflow: hidden; */
}
.page-wrapper .page-container .main .main-left .view-part {
  background: #000;
  position: relative;
  border-radius: 8px 8px 0 0;
  /* 倒计时部分 */
  /*验证登录*/
}
.page-wrapper .page-container .main .main-left .view-part .player-box {
  position: relative;
  width: 100%;
  height: 100%;
  /* 弹幕 */
  /*播放器*/
  /*播放异常提示*/
  /*返回直播*/
}
.page-wrapper .page-container .main .main-left .view-part .player-box .player-ccl-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .player-ccl-box.pos-right-top {
  position: absolute;
  width: 360px;
  height: 186px;
  right: -350px;
  top: -64px;
  z-index: 888;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .player-ccl-box .video-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.page-wrapper .page-container .main .main-left .view-part .player-box .player-ccl-box .video-player .danmu-control {
  display: none;
  width: 48px;
  height: 36px;
  cursor: pointer;
  text-align: center;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .player-ccl-box .video-player .danmu-control img{
  width: 15px;
  height: 15px;
  margin-top: 11px;
}

.page-wrapper .page-container .main .main-left .view-part .player-box #danmu-box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  top: 0;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .danmuitem {
  transition: left 0.1s linear;
  z-index: 9999;
  color: #ffffff;
  font-size: 14px;
  line-height: 30px;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .danmu_right {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  z-index: 101;
  /* left: 100%; */
  /* transform: translateX(700px); */
}
.page-wrapper .page-container .main .main-left .view-part .player-box .danmu_left {
  position: absolute;
  white-space: nowrap;
  user-select: none;
  z-index: 101;
  transition: transform 14s linear;
  /* 时间相同 越长的弹幕滑动距离越长 所以越快~ */
}
.page-wrapper .page-container .main .main-left .view-part .player-box .video-player,
.page-wrapper .page-container .main .main-left .view-part .player-box .vr-player {
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.page-wrapper .page-container .main .main-left .view-part .player-box #videojs-panorama-player {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .network-error,
.page-wrapper .page-container .main .main-left .view-part .player-box .no-streaming {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #000000;
  border-radius: 8px 8px 0 0;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .network-error-box,
.page-wrapper .page-container .main .main-left .view-part .player-box .no-streaming-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .network-error-box > img {
  width: 250px;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .network-error-box > p {
  margin-top: 10px;
  font-size: 16px;
  color: #494e51;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .network-error-box > p > a {
  color: #0569f1;
  margin: 0px 4px;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .network-error-box > p > a:hover {
  color: #4172B5;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .no-streaming-box {
  width: 20%;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .no-streaming-box > img {
  width: 100%;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .no-streaming-box > p {
  margin-top: 5px;
  font-size: 16px;
  color: #494e51;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .live-cover-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .live-cover-box > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .return {
  width: 82px;
  height: 72px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -82px;
  -webkit-transition: right 0.5s linear;
  -moz-transition: right 0.5s linear;
  transition: right 0.5s linear;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .return.active {
  right: 0px;
}
.page-wrapper .page-container .main .main-left .view-part .player-box .return > img {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-left .view-part .count-box {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #347FFF;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .view-part .count-box::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: url('../images/time-icon.png');
  background-size: 70px;
  top: -26px;
  left: 260px;
}
.page-wrapper .page-container .main .main-left .view-part .count-box::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: url('../images/time-icon.png');
  background-size: 70px;
  bottom: -45px;
  right: 260px;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center > p {
  font-size: 18px;
  line-height: 18px;
  color: #FFFFFF;
  margin-right: 20px;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown {
  height: 100%;
  display: flex;
  align-items: center;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countDays,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countHours,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countMinutes,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countSeconds {
  height: 100%;
  font-size: 24px;
  font-family: Arial;
  color: #FFFFFF;
  display: flex;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countDays .position,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countHours .position,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countMinutes .position,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countSeconds .position {
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 20px;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countDays .position .digit,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countHours .position .digit,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countMinutes .position .digit,
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countSeconds .position .digit {
  position: absolute;
  width: 20px;
  height: 100%;
  line-height: 50px;
  left: 0;
  text-align: center;
  color: #fff;
}
.page-wrapper .page-container .main .main-left .view-part .count-box .count-center #countdown .countDiv {
  width: 40px;
  height: 100%;
  line-height: 50px;
  font-size: 18px;
  color: #FFFFFF;
  text-align: center;
}
.page-wrapper .page-container .main .main-left .view-part .login-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 260px;
  /* background-color: rgba(30, 31, 42, 0.8);
  border-radius: 10px;
  border: solid 2px #151623; */
  background: #FFFFFF;
  border-radius: 20px;
  text-align: center;
  z-index: 1000;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login > h4 {
  font-weight: normal;
  font-size: 20px;
  color: #111;
  margin-top: 40px;
  padding: 0px 34px;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login .yanzhengma{
  position: relative;
    width: 320px;
    letter-spacing: 1px;
    text-align: center;
    margin: 23px auto 0;
    height: 56px;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login .yanzhengma img{
  position: absolute;
  width: 18px;
  top: 19px;
  left: 18px;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login .yanzhengma em{
  position: absolute;
  top: 19px;
  left: 52px;
  height: 20px;
  width: 1px;
  background: #eee;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login .yanzhengma> input {
  width: 320px;
  letter-spacing: 1px;
  /* text-align: center; */
  /* margin-top: 23px; */
  text-align: left;
  padding-left: 68px;
  height: 56px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EEEEEE;
  color: #B0B0B0;
  font-size: 14px;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login > button {
  font-size: 18px;
  color: #ffffff;
  margin-top: 20px;
  cursor: pointer;
  width: 320px;
  height: 56px;
  background: linear-gradient(90deg, #80BFFF 0%, #6CB0FB 24%, #2D7FF0 100%);
  box-shadow: 0px 2px 5px 0px rgba(45,127,240,0.3);
  border-radius: 8px;
}
.page-wrapper .page-container .main .main-left .view-part .login-box .verify-login > button:hover {
  box-shadow: 0px 0px 10px 0px rgba(3, 95, 219, 0.5);
}
.page-wrapper .page-container .main .main-left .sub-part {
  background: #242530;
  min-height: 81px;
  /*多通道播放异常提示*/
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel {
  display: none;
  /* background-color: rgba(30, 31, 42, 0.9);
  border: solid 2px #151623; */
  background: #242530;
  text-align: center;
  z-index: 999;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part {
  padding: 20px 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part .multi-list {
  width: 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part .multi-list > li {
  float: left;
  position: relative;
  width: 140px;
  height: 79px;
  margin-right: 14px;
  cursor: pointer;
  overflow: hidden;
  /* background: #336187; */
  border-radius: 4px;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part .multi-list > li.active {
  box-shadow: 0px 0px 6px 0px rgba(45,127,240,0.6);
  border-radius: 4px;
  border: 2px solid #2D7FF0;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part .multi-list > li div img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part .multi-list > li  p{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 25px;
  line-height: 25px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1px;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 12px;
  text-overflow: ellipsis;
}
.page-wrapper .page-container .main .main-left .sub-part .multichannel .multi-part .multi-list > li > .multi-player {
  width: 100%;
  height: 100%;
  border: 2px solid #2D7FF0;
}
.page-wrapper .page-container .main .main-left .sub-part .multi-list .prompt1,
.page-wrapper .page-container .main .main-left .sub-part .multi-list .prompt2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background-color: #000000;
}
.page-wrapper .page-container .main .main-left .sub-part .prompt1 > img,
.page-wrapper .page-container .main .main-left .sub-part .prompt2 > img {
  width: 50%;
  margin-top: 6%;
}
.page-wrapper .page-container .main .main-left .sub-part .prompt1 > p,
.page-wrapper .page-container .main .main-left .sub-part .prompt2 > p {
  font-size: 12px;
  color: #494e51;
}
.page-wrapper .page-container .main .main-left .sub-part .multi-list > li > .multi-name {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  line-height: 30px;
  padding: 0 10px;
  font-size: 14px;
  color: #ffffff;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .tab {
  position: relative;
  height: 52px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: none;
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab_list_box {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab-list {
  position: absolute;
  top: 0;
  left: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  transition: left 0.2s linear;
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab-list > li {
  /* float: left; */
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  display: block;
  padding: 0 10px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255, 0.6);
  cursor: pointer;
  word-break: keep-all;
  flex-shrink: 0;
  z-index: 0;
  margin-right: 16px;
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab-list > li::after {
  content: "";
  display: block;
  position: absolute;
  /* left: 50%;
  transform: translateX(-50%); */
  bottom: 16px;
  z-index: -1;
  transition: width 0.2s linear;
  height: 8px;
  background: linear-gradient(275deg, rgba(45,127,240,0) 0%, #2D7FF0 100%);
  border-radius: 4px;
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab-list > li.active {
  /* background-color: rgba(6, 20, 47, 0.14); */
  color: #ffffff;
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab-list > li.active::after {
  width: calc(100% - 20px);
}
.page-wrapper .page-container .main .main-left .sub-part .tab .tab-list > li:hover {
  background-color: rgba(6, 20, 47, 0.14);
  color: #ffffff;
}
.page-wrapper .page-container .main .main-left .sub-part .content {
  background-color: #242530;
  position: relative;
  overflow: hidden;
  /* 图文直播 */
  /* 图片链接 */
  /* 文本链接 */
  /* 文本菜单 */
  /* 商品列表 */
  /* 直播推荐列表 */
  /*点播部分*/
  /*排行榜部分*/
  /*活动简介部分*/
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list {
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list > li {
  width: 100%;
  display: none;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list .text-menu-part i,
.page-wrapper .page-container .main .main-left .sub-part .content .content-list .summary-part i{
  font-style: italic;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list .text-menu-part em,
.page-wrapper .page-container .main .main-left .sub-part .content .content-list .summary-part em{
  font-style: italic;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list .text-menu-part b,
.page-wrapper .page-container .main .main-left .sub-part .content .content-list .summary-part b{
  font-weight: bold;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list > li .video-album-list {
  width: 100%;
  padding: 20px 30px;
} 
.page-wrapper .page-container .main .main-left .sub-part .content .content-list > li .video-album-list li{
  cursor: pointer;
  width: calc(20% - 16px);
  float: left;
  margin-bottom: 14px;
  margin-right: 20px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list > li .video-album-list li:nth-child(5){
  margin-right: 0px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list > li .video-album-list li .img-intro{
  position: relative;
  width: 100%;
  padding-top: 56%;
  height: 0;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .content-list > li .video-album-list li .img-intro img{
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .chat-room-part,
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part,
.page-wrapper .page-container .main .main-left .sub-part .content .video-album-part,
.page-wrapper .page-container .main .main-left .sub-part .content .activity-detail-part {
  display: flex;
  flex-direction: column;
  padding-top: 5px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .activity-detail-part .imageText-filter,
.page-wrapper .page-container .main .main-left .sub-part .content .activity-detail-part .imageText-box {
  padding: 0 30px;
  min-height: 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .activity-detail-part .imageText-filter {
  padding-top: 10px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .chat-room-part > .inter {
  font-size: 12px;
  color: #6f7a8e;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgba(71, 91, 123, 0.2);
}
.page-wrapper .page-container .main .main-left .sub-part .content .chat-room-part > .comments,
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part > .ranking-box,
.page-wrapper .page-container .main .main-left .sub-part .content .playfile-part > .video-album-box,
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-part > .imageText-box,
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-part > .live-recommend-box,
.page-wrapper .page-container .main .main-left .sub-part .content .goods-part > .goods-box {
  padding: 0 30px 30px;
  width: 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-part > .live-recommend-box {
  padding: 0;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-part .imageText-filter {
  height: 44px;
  padding-top: 7px;
  padding-left: 14px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-filter select {
  width: 100px;
  height: 28px;
  border-radius: 4px;
  border: solid 1px rgba(191, 191, 191, 0.2);
  background-color: transparent;
  margin-right: 10px;
  font-size: 12px;
  color: #ffffff;
  padding-left: 5px;
}
.page-wrapper .page-container .main .main-left .sub-part .content #timeSelect {
  /* width: 102px; */
  position: relative;
  width: 96px;
  height: 28px;
  line-height: 26px;
  border-radius: 4px;
  border: 1px solid #3A3B45;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #B3B3B9;
  padding: 0 18px 0 12px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-left .sub-part .content #timeSelect span:nth-child(2){
  display: none;
}
.page-wrapper .page-container .main .main-left .sub-part .content #timeSelect i{
  position: absolute;
  top: 50%;
  right: 10px;
  width: 5px;
  height: 10px;
  transform: translateY(-50%);
  background: url('../images/pcImage/jiantou.png') no-repeat center/100% 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content #timeSelect:hover{
  color: #2D7FF0;
  border: 1px solid #2D7FF0;
}
.page-wrapper .page-container .main .main-left .sub-part .content #timeSelect:hover i{
  background: url('../images/pcImage/jiantou_hover.png') no-repeat center/100% 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-filter select > option {
  background-color: rgba(30, 31, 42, 0.9);
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-list > li {
  margin: 16px 0;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-list > li::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.1;
  margin-top: 22px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-list > li:last-child::after{
  height: 0;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-list > li .compere-head {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 3px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .compere-head > img {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-list > li .imageText-content {
  width: 92%;
  padding-left: 54px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .compere-name > i {
  font-size: 12px;
  color: #94949B;
}
.page-wrapper .page-container .main .main-left .sub-part .content .compere-name > .guanfang {
  display: inline-block;
  width: 32px;
  height: 18px;
  background-color: #2D7FF0;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-content > p {
  font-size: 14px;
  color: #ffffff;
  margin-top: 4px;
  word-wrap: break-word;
  word-break: break-all;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-content .video-content {
  width: max-content;
  height: max-content;
  margin-top: 6px;
  background-color: #000000;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  background: url("../images/playIcon.png");
  background-size: 40px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-content > img {
  vertical-align: top;
  object-fit: contain;
  max-width: 498px;
  max-height: 280px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-content .img-content {
  margin-top: 10px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .img-content > img {
  width: auto;
  height: 220px;
  background-color: #BFBFBF;
  vertical-align: top;
  border-radius: 6px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .img-content-list li {
  float: left;
  width: 140px;
  height: 140px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-wrapper .page-container .main .main-left .sub-part .content .img-content-list li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #BFBFBF;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-content .imageText-funcs {
  font-size: 12px;
  color: #B3B3B9;
  margin-top: 6px;
  position: relative;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-input {
  display: none;
  margin-top: 6px;
  height: 36px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-input > input {
  width: 184px;
  height: 36px;
  background-color: rgba(71, 91, 123, 0.5);
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 10px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .imageText-input > button {
  width: 50px;
  height: 36px;
  background-color: #347fff;
  border-radius: 0px 4px 4px 0px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-left .sub-part .content .audience-info {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.page-wrapper .page-container .main .main-left .sub-part .content .audience-info > i {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}
.page-wrapper .page-container .main .main-left .sub-part .content .picture-link-part,
.page-wrapper .page-container .main .main-left .sub-part .content .text-link-part {
  padding: 24px 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .picture-link-part a {
  display: block;
  float: left;
  height: 120px;
  text-align: center;
  background-color: #151623;
}
.page-wrapper .page-container .main .main-left .sub-part .content .picture-link-part a img {
  max-height: 120px;
  max-width: 360px;
  object-fit: contain;
}
.page-wrapper .page-container .main .main-left .sub-part .content .text-link-part a {
  display: block;
  color: #ffff;
  font-size: 14px;
  line-height: 30px;
  width: 100%;
  word-break: break-all;
  height: auto;
}
.page-wrapper .page-container .main .main-left .sub-part .content .text-menu-box {
  padding: 10px 15px 20px;
  width: 100%;
  word-wrap: break-word;
}
.page-wrapper .page-container .main .main-left .sub-part .content .menu-item {
  width: fit-content;
  padding: 0 10px;
  line-height: 30px;
  float: left;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  width: 100%;
  word-wrap: break-word;
  font-size: 14px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .menu-item img {
  max-width: 100%;
  margin: 10px 0 0;
}
.page-wrapper .page-container .main .main-left .sub-part .content .menu-item p span {
  /* font-size: 14px!important;
  color: #fff!important;
  background: none!important;
  font-style: normal!important;
  font-weight: 400!important; */
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list {
  width: calc(100% + 20px);
  padding: 20px 0 20px;
  margin-left: -10px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li {
  float: left;
  width: calc(25% - 20px);
  margin: 10px;
  /* width: 294px; */
  height: 100px;
  background-color: #ffffff;
  box-shadow: 0px 6px 16px 0px rgba(56, 61, 71, 0.1);
  border-radius: 4px;
  display: flex;
  padding: 14px;
  position: relative;
}

@media screen and (max-width: 1600px) {
	.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li {
		width: calc(33.3% - 20px);
	}
}

.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .img {
  width: 72px;
  height: 72px;
  background: #D8D8D8;
  border-radius: 6px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .img img {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .info {
  flex: 1;
  position: relative;
  width: 0;
  margin-left: 10px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .info h5 {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0px;
  font-weight: 500;
  color: #333333;
  /* word-break: break-all; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .info > div {
  position: absolute;
  bottom: 4px;
  color: #f13c2c;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .info > div p {
  height: 20px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .info > div p:nth-of-type(1) {
  font-size: 16px;
  /* padding-top: 1px; */
  line-height: 20px;
  font-family: "DINAlternate-Bold";
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .info > div p:nth-of-type(2) {
  font-size: 16px;
  /* margin-left: -2px; */
  line-height: 20px;
  max-width: 100px;
  /* white-space: no-wrap; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "DINAlternate-Bold";
}
.page-wrapper .page-container .main .main-left .sub-part .content .goods-list li .buy {
  width: 80px;
  height: 26px;
  background-image: linear-gradient(-90deg, #e0612e 0%, #de3d23 100%), linear-gradient(#ea392a, #ea392a);
  background-blend-mode: normal, normal;
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  line-height: 26px;
  position: absolute;
  bottom: 16px;
  right: 13px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  /* padding-left: 14px; */
  margin-top: 6px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list {
  height: 100%;
  width: 100%;
  padding: 24px 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list li {
  /* margin: 20px 0px; */
  /* height: 110px;
  padding: 20px; */
  cursor: pointer;
  /* display: flex;
  flex-direction: row; */
  width: calc(20% - 16px);
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list li:nth-child(5n) {
  margin-right: 0px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list li:hover {
  /* background-color: #0b1a37; */
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list li .cover-img {
  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: center;
  width: 125px;
  height: 70px; */
  width: 100%;
  padding-top: 56%;
  height: 0;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list li .cover-img img {
  /* max-height: 70px; */
  object-fit: contain;
  /* max-width: 100%; */
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list li p {
  width: 100%;
  font-size: 12px;
  color: #e0e0e0;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list .live-name {
  font-weight: bold;
  font-size: 14px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .live-recommend-list >li:hover .live-name {
  color: #2D7FF0;
}
/* .page-wrapper .page-container .main .main-left .sub-part .content .video-album-list > li {
  margin: 20px 0px;
  padding: 0 10px;
  height: 70px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-album-list > li > .img-intro {
  position: relative;
} */
.page-wrapper .page-container .main .main-left .sub-part .content .img-intro > img {
  float: left;
  width: 125px;
  height: 70px;
  border-radius: 6px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .img-intro > i {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0px 4px;
  background-color: rgba(31, 31, 32, 0.8);
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-album-list > li > p {
  width: 100%;
  height: 38px;
  /* padding-left: 12px; */
  font-size: 14px;
  color: #fefefe;
  display: table-cell;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-album-list > li > p > span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-album-list > li:hover > p {
  color: #3E6FB4;
}
.page-wrapper .page-container .main .main-left .sub-part .content .video-album-list > li.active > p {
  color: #3E6FB4;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part .ranking-type {
  width: 100%;
  height: 30px;
  /* text-align: center; */
  margin: 20px 30px 0px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-type-list {
  display: inline-block;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-type-list li {
  display: none;
  float: left;
  /* width: 70px;
  height: 26px; */
  /* border: 1px solid #347fff; */
  /* font-size: 12px; */
  /* color: #347fff; */
  /* letter-spacing: 1px; */
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #30313E;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255, 0.4);
  text-align: center;
  margin-right: 16px;
}
/* .page-wrapper .page-container .main .main-left .sub-part .content .ranking-type-list li:first-child {
  border-radius: 2px 0px 0px 2px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-type-list li:last-child {
  border-radius: 0px 2px 2px 0px;
} */
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-type-list li.active {
  background: #4D4E5D;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part > .ranking-box {
  position: relative;
  padding: 20px 30px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part-list {
  overflow: hidden;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part-list > li {
  display: none;
  float: left;
  width: 100%;
  height: 100%;
  /* padding: 0px 15px; */
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li {
  position: relative;
  width: 500px;
  height: 60px;
  line-height: 60px;
  background: linear-gradient(270deg, rgba(53,55,68,0) 0%, #353744 100%);
  border-radius: 4px;
  margin-bottom: 2px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(1),
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(1){
  background: url("../images/pcImage/first.png") no-repeat;
  background-size: cover;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(2),
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(2){
  background: url("../images/pcImage/secend.png") no-repeat;
  background-size: cover;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(3),
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(3){
  background: url("../images/pcImage/third.png") no-repeat;
  background-size: cover;
}
/* .page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(1),
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(2),
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(3),
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(1),
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(2),
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(3) {
  
} */
/* .page-wrapper .page-container .main .main-left .sub-part .content .v-head { */
  /* position: relative;
  display: inline-block;
  width: 75px; */
  /* height: 43px;
  margin-top: 6px; */
/* } */
/* .page-wrapper .page-container .main .main-left .sub-part .content .v-head .head-bgc {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 75px;
  height: 16px;
} */
/* .page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(1) .head-bgc,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(1) .head-bgc {
  background: url(../images/nobg1.png) 0px 0px no-repeat;
  -webkit-background-size: 75px 16px;
  background-size: 75px 16px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(2) .head-bgc,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(2) .head-bgc {
  background: url(../images/nobg2.png) 0px 0px no-repeat;
  -webkit-background-size: 75px 16px;
  background-size: 75px 16px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(3) .head-bgc,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(3) .head-bgc {
  background: url(../images/nobg3.png) 0px 0px no-repeat;
  -webkit-background-size: 75px 16px;
  background-size: 75px 16px;
} */
.page-wrapper .page-container .main .main-left .sub-part .content li .v-term{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 18px;
  width: 40px;
  text-align: center;
  font-family: "DINAlternate-Bold";
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part-list li li:nth-child(1) .v-term{
  display: none;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part-list li li:nth-child(2) .v-term{
  display: none;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-part-list li li:nth-child(3) .v-term{
  display: none;
}
.page-wrapper .page-container .main .main-left .sub-part .content .v-head{
  display: inline-block;
  vertical-align: middle;
  margin-left: 45px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .v-head img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #fff;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-left .sub-part .content .v-name {
  display: inline-block;
  font-size: 16px;
  margin-left: 20px;
  color: #ffffff;
  vertical-align: middle;
}
/* .page-wrapper .page-container .main .main-left .sub-part .content .head-img > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
} */
/* .page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(1) .head-img,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(1) .head-img {
  border: 1px solid #D8D8D8;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(2) .head-img,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(2) .head-img {
  border: 1px solid #D8D8D8;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(3) .head-img,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(3) .head-img {
  border: 1px solid #D8D8D8;
}
.page-wrapper .page-container .main .main-left .sub-part .content .v-head .v-term {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  width: 52px;
  height: 15px;
  text-align: center;
  line-height: 15px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(1) .v-term,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(1) .v-term {
  background-color: #fdcc00;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(2) .v-term,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(2) .v-term {
  background-color: #7b9dff;
}
.page-wrapper .page-container .main .main-left .sub-part .content .share-act-list li:nth-of-type(3) .v-term,
.page-wrapper .page-container .main .main-left .sub-part .content .reward-list li:nth-of-type(3) .v-term {
  background-color: #ff9967;
} */
.page-wrapper .page-container .main .main-left .sub-part .content .v-count {
  display: inline-block;
  float: right;
  margin-top: 1px;
  font-size: 14px;
  margin-right: 45px;
  /* color: #6a6a82; */
  color: #ffffff;
}
.page-wrapper .page-container .main .main-left .sub-part .content .v-count > i {
  color: #ffffff;
  margin: 0px 4px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-term {
  position: absolute;
  top: 2px;
  left: 0px;
  width: 22px;
  height: 26px;
  background: url(../images/no.png) 0px 0px no-repeat;
  -webkit-background-size: 22px 26px;
  background-size: 22px 26px;
  font-size: 12px;
  color: #666666;
  text-align: center;
  line-height: 26px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-head {
  position: absolute;
  top: 0;
  left: 40px;
  width: 30px;
  height: 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-head > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-name {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  padding: 0px 80px 0px 86px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-count {
  position: absolute;
  top: 0;
  right: 0px;
  width: 70px;
  text-align: left;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #6a6a82;
}
.page-wrapper .page-container .main .main-left .sub-part .content .ranking-count > i {
  color: #ffffff;
  margin: 0px 4px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .summary-box {
  padding: 20px 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .summary-content {
  position: relative;
  max-width: 100% !important;
  word-wrap: break-word;
  word-break: break-all;
  color: #ffff;
  font-size: 14px;
  line-height: 30px;
}
.page-wrapper .page-container .main .main-left .sub-part .content .summary-content p span{
  /* font-size: 14px!important;
  background: none!important;
  color: #fff!important;
  font-style: normal!important;
  font-weight: 400!important; */
}
.page-wrapper .page-container .main .main-left .sub-part .content .summary-content img {
  max-width: 100%;
}
.page-wrapper .page-container .main .main-right {
  width: 360px;
  background: #242530;
  box-shadow: 0px 0px 6px 0px rgba(17,18,21,0.3);
  border-radius: 8px;
  margin-left: 8px;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-wrapper .page-container .main .main-right .file-part {
  height: 248px;
}
.page-wrapper .page-container .main .main-right .file-part .file-head {
  position: relative;
  height: 46px;
  background-color: #242530;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px 8px 0 0;
}
.page-wrapper .page-container .main .main-right .file-part .file-head > span {
  position: absolute;
  font-size: 14px;
  color: #959fb1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.page-wrapper .page-container .main .main-right .file-part .file-head > a {
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .file-part .file-head > a:hover {
  opacity: 0.7;
}
.page-wrapper .page-container .main .main-right .file-part .file-head > .file-download {
  display: none;
  background: url("../images/file_download.png");
  background-size: contain;
  margin-right: 12px;
}
.page-wrapper .page-container .main .main-right .file-part .file-head > .file-exchange {
  background: url("../images/exchangeIcon.png");
  background-size: contain;
  margin-right: 20px;
}
.page-wrapper .page-container .main .main-right .file-part .file-content {
  position: relative;
  height: 203px;
  /* background-color: #0c1017; */
}
.page-wrapper .page-container .main .main-right .file-part .file-view-box {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: #000; */
}
.page-wrapper .page-container .main .main-right .file-part .file-view-box.pos-left-bottom {
  position: absolute;
  top: 65px;
  right: 350px;
  z-index: 888;
  width: 83rem;
  height: 46.8rem;
  min-width: 830px;
  min-height: 468px;
  border-radius: 8px 8px 0 0;
}
.page-wrapper .page-container .main .main-right .file-part .file-view-box > img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  transform: scale(1) translate(-50%, -50%);
}
@keyframes scaleToggle {
  0% {
    transform: scale(0) translate(-50%, -50%);
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
  }
}
.page-wrapper .page-container .main .main-right .file-part .file-controls {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 34px;
  padding: 0 10px;
  display: none;
}
.page-wrapper .page-container .main .main-right .file-part .pos-left-bottom .file-controls {
  height: 60px;
  padding: 0 20px;
}
.page-wrapper .page-container .main .main-right .file-part .file-view-box:hover .file-controls {
  display: inline-block;
}
.page-wrapper .page-container .main .main-right .file-part .file-controls > a {
  width: 34px;
  height: 34px;
  border: solid 1px #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  cursor: pointer;
  display: none;
}
.page-wrapper .page-container .main .main-right .file-part .pos-left-bottom .file-controls > a {
  width: 60px;
  height: 60px;
}
.page-wrapper .page-container .main .main-right .file-part .file-controls > a:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.page-wrapper .page-container .main .main-right .file-part .file-controls > a::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 11px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page-wrapper .page-container .main .main-right .file-part .pos-left-bottom .file-controls > a::before {
  content: '';
  width: 11px;
  height: 20px;
}
.page-wrapper .page-container .main .main-right .file-part .last-file::before {
  background: url("../images/lastIcon.png");
  background-size: contain;
}
.page-wrapper .page-container .main .main-right .file-part .next-file::before {
  background: url("../images/nextIcon.png");
  background-size: contain;
}
.page-wrapper .page-container .main .main-right .cash-box {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 84px;
  width: 278px;
  height: 390px;
  background: url(../images/bg2.png) 0px 0px no-repeat;
  -webkit-background-size: 278px 390px;
  background-size: 278px 390px;
  border-radius: 16px;
  z-index: 100;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  font-size: 18px;
  color: #d03b20;
  font-weight: normal;
  width: 182px;
  text-align: center;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-type {
  position: absolute;
  width: 210px;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
}
.page-wrapper .page-container .main .main-right .cash-box .cash-list li {
  float: left;
  width: 56px;
  height: 29px;
  border-radius: 4px;
  border: solid 1px #d03b20;
  text-align: center;
  line-height: 27px;
  font-size: 14px;
  color: #cc3d35;
  background-color: #fefaef;
  margin: 5px 7px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-list li.active {
  background-color: #d03b20;
  color: #ffffff;
}
.page-wrapper .page-container .main .main-right .cash-box .custom-cash {
  position: absolute;
  width: 194px;
  top: 168px;
  left: 50%;
  transform: translateX(-50%);
}
.page-wrapper .page-container .main .main-right .cash-box .custom-cash p {
  font-size: 12px;
  color: #999999;
}
.page-wrapper .page-container .main .main-right .cash-box .custom-cash input {
  width: 100%;
  background: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 30px;
  color: #d03b20;
  padding: 2px 24px;
}
.page-wrapper .page-container .main .main-right .cash-box .custom-cash::before {
  content: '¥';
  position: absolute;
  top: 24px;
  left: 8px;
  font-size: 18px;
  color: #d03b20;
}
.page-wrapper .page-container .main .main-right .cash-box .pay {
  position: absolute;
  width: 181px;
  height: 37px;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fadb4a;
  border-radius: 17px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .cash-box .pay:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-list-icon {
  position: absolute;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-list-icon:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-list-icon > em {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(../images/list.png) 0px 0px no-repeat;
  -webkit-background-size: 12px;
  background-size: 12px;
  margin-right: 4px;
  position: relative;
  top: 2px;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-close {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 8px;
  right: 24px;
  background: url(../images/redCancel.png) 0px 0px no-repeat;
  -webkit-background-size: 14px;
  background-size: 14px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .cash-box .cash-close:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .gift-box {
  display: none;
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 100%;
  height: 288px;
  border-radius: 8px 8px 0px 0px;
  background-color: #ffffff;
  z-index: 100;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-title {
  height: 42px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(219, 218, 218, 0.4);
}
.page-wrapper .page-container .main .main-right .gift-box .gift-title > em {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 17px;
  font-size: 14px;
  color: rgba(52, 127, 255, 0.8);
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-title > em:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-title > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #333333;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-title > i {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  background: url(../images/close.png) 0px 0px no-repeat;
  -webkit-background-size: 14px;
  background-size: 14px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-title > i:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-type {
  height: 204px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.page-wrapper .page-container .main .main-right .gift-box .gift-type .gift-list {
  width: 100%;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li {
  float: left;
  width: 25%;
  height: 92px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(1),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(2),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(3),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(5),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(6),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(7) {
  border-right: 1px solid rgba(219, 218, 218, 0.4);
  border-bottom: 1px solid rgba(219, 218, 218, 0.4);
}
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(1),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(5) {
  border-left: 1px solid rgba(219, 218, 218, 0.4);
}
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(4),
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li:nth-of-type(8) {
  border-bottom: 1px solid rgba(219, 218, 218, 0.4);
  border-right: 1px solid rgba(219, 218, 218, 0.4);
}
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li .gift-content {
  width: 100%;
  height: 100%;
  border: solid 2px transparent;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-list > li.active .gift-content {
  border: solid 2px #347fff;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-content .gift-img {
  height: 50px;
  width: 100%;
  padding: 5px;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-img > .img-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.page-wrapper .page-container .main .main-right .gift-box .img-box > img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page-wrapper .page-container .main .main-right .gift-box .gift-content p {
  text-align: center;
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-content .gift-name {
  color: #333333;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-content .gift-price {
  color: #d03b20;
}
.page-wrapper .page-container .main .main-right .gift-box .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0px;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-func {
  position: relative;
  height: 30px;
  margin-top: 2px;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-func > span {
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 14px;
  color: #666666;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-func .gift-count {
  position: absolute;
  top: 4px;
  left: 70px;
}
.page-wrapper .page-container .main .main-right .gift-box .set-count {
  height: 22px;
  border-radius: 11px;
  border: solid 1px rgba(153, 153, 153, 0.4);
  overflow: hidden;
}
.page-wrapper .page-container .main .main-right .gift-box .set-count li {
  float: left;
  font-size: 14px;
  color: #ffffff;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.page-wrapper .page-container .main .main-right .gift-box .set-count .minus-count,
.page-wrapper .page-container .main .main-right .gift-box .set-count .add-count {
  width: 26px;
  background-color: #e5e5e5;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .gift-box .set-count .count-num {
  width: 34px;
  border-left: solid 1px rgba(255, 255, 255, 0.4);
  border-right: solid 1px rgba(255, 255, 255, 0.4);
}
.page-wrapper .page-container .main .main-right .gift-box .count-num > input {
  width: 100%;
  height: 100%;
  text-align: center;
  background: none;
  font-size: 14px;
  color: #666666;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-func > button {
  position: absolute;
  top: 2px;
  right: 6px;
  width: fit-content;
  padding: 0 10px;
  height: 26px;
  background-color: #347fff;
  border-radius: 6px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .gift-box .gift-func > button:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .cash-list-box,
.page-wrapper .page-container .main .main-right .gift-list-box {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 90px;
  width: 284px;
  height: 380px;
  background: url(../images/bg1.png) 0px 0px no-repeat;
  -webkit-background-size: 284px 380px;
  background-size: 284px 380px;
  z-index: 100;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-close,
.page-wrapper .page-container .main .main-right .gift-list-box .list-close {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 46px;
  right: 36px;
  background: url(../images/redCancel.png) 0px 0px no-repeat;
  -webkit-background-size: 14px;
  background-size: 14px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-close:hover,
.page-wrapper .page-container .main .main-right .gift-list-box .list-close:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-title,
.page-wrapper .page-container .main .main-right .gift-list-box .list-title {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  color: #ffffff;
  font-weight: normal;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-content,
.page-wrapper .page-container .main .main-right .gift-list-box .list-content {
  position: absolute;
  bottom: 0;
  left: 23px;
  width: 238px;
  height: 298px;
  padding: 0px 17px;
}
.page-wrapper .page-container .main .main-right .cash-list-box .cash-list-content,
.page-wrapper .page-container .main .main-right .gift-list-box .cash-list-content,
.page-wrapper .page-container .main .main-right .cash-list-box .gift-list-content,
.page-wrapper .page-container .main .main-right .gift-list-box .gift-list-content {
  width: 100%;
}
.page-wrapper .page-container .main .main-right .cash-list-box .cash-list-content li,
.page-wrapper .page-container .main .main-right .gift-list-box .cash-list-content li,
.page-wrapper .page-container .main .main-right .cash-list-box .gift-list-content li,
.page-wrapper .page-container .main .main-right .gift-list-box .gift-list-content li {
  height: 41px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  position: relative;
}
.page-wrapper .page-container .main .main-right .cash-list-box .cash-list-content li:last-of-type,
.page-wrapper .page-container .main .main-right .gift-list-box .cash-list-content li:last-of-type,
.page-wrapper .page-container .main .main-right .cash-list-box .gift-list-content li:last-of-type,
.page-wrapper .page-container .main .main-right .gift-list-box .gift-list-content li:last-of-type {
  border-bottom: none;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-img,
.page-wrapper .page-container .main .main-right .gift-list-box .list-img {
  position: absolute;
  top: 0;
  left: 0;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-img > img,
.page-wrapper .page-container .main .main-right .gift-list-box .list-img > img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 8px;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-name,
.page-wrapper .page-container .main .main-right .gift-list-box .list-name {
  width: 100%;
  font-size: 11px;
  color: #333333;
  line-height: 40px;
}
.page-wrapper .page-container .main .main-right .cash-list-box.cash-list-box .list-name,
.page-wrapper .page-container .main .main-right .gift-list-box.cash-list-box .list-name {
  padding: 0px 54px 0px 32px;
}
.page-wrapper .page-container .main .main-right .cash-list-box .list-count,
.page-wrapper .page-container .main .main-right .gift-list-box .list-count {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  color: #d03b20;
  line-height: 40px;
}
.page-wrapper .page-container .main .main-right .cash-list-box.gift-list-box .list-name,
.page-wrapper .page-container .main .main-right .gift-list-box.gift-list-box .list-name {
  padding: 0px 64px 0px 32px;
}
.page-wrapper .page-container .main .main-right .cash-list-box .gift-info,
.page-wrapper .page-container .main .main-right .gift-list-box .gift-info {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.page-wrapper .page-container .main .main-right .cash-list-box .gift-info > img,
.page-wrapper .page-container .main .main-right .gift-list-box .gift-info > img {
  max-width: 25px;
  max-height: 20px;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-right .cash-list-box .gift-info > span,
.page-wrapper .page-container .main .main-right .gift-list-box .gift-info > span {
  font-size: 11px;
  color: #d03b20;
}
.page-wrapper .page-container .main .main-right .interact-answer {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  padding: 20px 0;
  background-color: #ffffff;
  border-radius: 8px;
  z-index: 100;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-head {
  width: 100%;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-head span {
  position: relative;
  margin-left: 30px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-head span::before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 14px;
  background-color: #347fff;
  left: -10px;
  top: 3px;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-head a {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 13px;
  right: 13px;
  background: url("../images/close.png") center center no-repeat;
  background-size: 14px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .interact-answer .subject-btn {
  display: flex;
  justify-content: center;
  margin-top: 120px;
}
.page-wrapper .page-container .main .main-right .interact-answer .subject-btn a {
  width: 88px;
  height: 28px;
  border-radius: 14px;
  border: solid 1px #bec2ca;
  text-align: center;
  line-height: 26px;
  color: #666666;
  margin: 0 18px;
  font-size: 12px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .interact-answer .subject-btn a#submitSubject {
  background-color: #347fff;
  color: #ffff;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part {
  padding: 0 16px;
  margin-top: 8px;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .bank-title {
  font-size: 16px;
  letter-spacing: 1px;
  color: #333333;
  font-weight: bold;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .bank-title em {
  font-weight: bold;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content {
  margin-top: 10px;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-title em {
  font-weight: bold;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list {
  padding: 0 20px;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: #666666;
  margin-top: 20px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li:nth-of-type(1) {
  margin-top: 15px;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li > em {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 1px #bdc2cb;
  position: relative;
  margin-right: 10px;
  top: 1px;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li > i {
  margin-left: 0.3rem;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li > span {
  flex: 1;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li.active > em {
  background-color: #347fff;
  border-color: #347fff;
}
.page-wrapper .page-container .main .main-right .interact-answer .interact-part .subject-content .subject-list > ul > li.active > em::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  background: url('../images/gou.svg') no-repeat center center;
  background-size: 10px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box,
.page-wrapper .page-container .main .main-right .vote-topic-box {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  padding: 20px 0;
  background-color: #ffffff;
  border-radius: 8px;
  z-index: 100;
  /* 投票话题部分 */
}
.page-wrapper .page-container .main .main-right .vs-topic-box > h4,
.page-wrapper .page-container .main .main-right .vote-topic-box > h4 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 14px;
  border-left: 3px solid #347fff;
  padding-left: 10px;
  margin-left: 14px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box > i,
.page-wrapper .page-container .main .main-right .vote-topic-box > i {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 10px;
  right: 10px;
  background: url(../images/close.png) center center no-repeat;
  -webkit-background-size: 14px;
  background-size: 14px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .vs-topic-box > i:hover,
.page-wrapper .page-container .main .main-right .vote-topic-box > i:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-content,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-content,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-topic-content,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-topic-content {
  margin-top: 13px;
  padding: 0 14px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-content > h5,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-content > h5,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-topic-content > h5,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-topic-content > h5 {
  font-size: 16px;
  font-weight: normal;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 14px;
  letter-spacing: 1px;
  color: #333333;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-content > p,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-content > p,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-topic-content > p,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-topic-content > p {
  font-size: 14px;
  letter-spacing: 1px;
  color: #999999;
  margin-top: 6px;
  word-wrap: break-word;
  word-break: break-all;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-content .topic-bg,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-content .topic-bg {
  position: relative;
  width: 266px;
  height: 114px;
  background: url("../images/topicBg.png") center center no-repeat;
  background-size: 266px 114px;
  margin-top: 11px;
  transform: translateX(-9px);
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > span,
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > span {
  position: absolute;
  width: 84px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: bold;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > span:nth-of-type(1),
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > span:nth-of-type(1) {
  top: 24px;
  left: 22px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > span:nth-of-type(2),
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > span:nth-of-type(2) {
  top: 30px;
  right: 30px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > a,
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > a {
  position: absolute;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > .blue-btn,
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > .blue-btn {
  width: 103px;
  height: 37px;
  bottom: 20px;
  left: 12px;
  background: url("../images/blueBtn.png");
  background-size: 103px 37px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > .blue-btn.status1,
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > .blue-btn.status1 {
  background: url("../images/blueBtn2.png");
  background-size: 103px 37px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > .red-btn,
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > .red-btn {
  width: 122px;
  height: 37px;
  bottom: 14px;
  right: 16px;
  background: url("../images/redBtn.png");
  background-size: 122px 37px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .topic-bg > .red-btn.status1,
.page-wrapper .page-container .main .main-right .vote-topic-box .topic-bg > .red-btn.status1 {
  background: url("../images/redBtn2.png");
  background-size: 122px 37px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-content .vs-bg,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-content .vs-bg {
  position: relative;
  height: 16px;
  background-color: #ff3844;
  border-radius: 8px;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-bg .blue-bg,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-bg .blue-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: #446fe5;
  border-radius: 8px 0 0 8px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-bg .vs-blue,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-bg .vs-blue,
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-red,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-red {
  position: absolute;
  top: 0;
  height: 100%;
  line-height: 15px;
  font-size: 12px;
  color: #ffffff;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-blue,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-blue {
  left: 6px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-red,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-red {
  right: 6px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-content .vs-date,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-content .vs-date,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-topic-content .vote-date,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-topic-content .vote-date {
  height: 24px;
  border-radius: 12px;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
  color: #ffffff;
  margin-top: 16px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-date.status1,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-date.status1,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-date.status1,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-date.status1 {
  background-color: #347fff;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-date.status2,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-date.status2,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-date.status2,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-date.status2 {
  background-color: #c8c9cb;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-control,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-control {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: 20px;
  cursor: pointer;
  z-index: 100;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-control-left,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-control-left {
  left: 24px;
  background: url("../images/toLeft2.png");
  background-size: 30px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-topic-control-right,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-topic-control-right {
  right: 24px;
  background: url("../images/toRight2.png");
  background-size: 30px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-container,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-container,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-container,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-container {
  padding-bottom: 40px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .swiper-container{
  height: 466px;
  padding: 0;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vs-container > .swiper-pagination-bullets,
.page-wrapper .page-container .main .main-right .vote-topic-box .vs-container > .swiper-pagination-bullets,
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-container > .swiper-pagination-bullets,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-container > .swiper-pagination-bullets {
  bottom: 7px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .vote-option-title,
.page-wrapper .page-container .main .main-right .vote-topic-box .vote-option-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #666666;
  opacity: 0.5;
  margin: 6px 0;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .unchecked-option-list > li,
.page-wrapper .page-container .main .main-right .vote-topic-box .unchecked-option-list > li {
  height: 30px;
  background-color: #e9ebed;
  position: relative;
  margin-top: 4px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .unchecked-option-list > li.checked,
.page-wrapper .page-container .main .main-right .vote-topic-box .unchecked-option-list > li.checked {
  background-color: #347fff;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .unchecked-option-list > li > span,
.page-wrapper .page-container .main .main-right .vote-topic-box .unchecked-option-list > li > span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #333333;
  padding-left: 10px;
  max-width: 200px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .unchecked-option-list > li::after,
.page-wrapper .page-container .main .main-right .vote-topic-box .unchecked-option-list > li::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 14px;
  height: 14px;
  background: url("../images/uncheckedIcon.png");
  background-size: 14px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .unchecked-option-list > li.checked::after,
.page-wrapper .page-container .main .main-right .vote-topic-box .unchecked-option-list > li.checked::after {
  background: url("../images/checkedIcon.png");
  background-size: 14px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li {
  height: 40px;
  background-color: #e9ebed;
  position: relative;
  margin-top: 4px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li.checked,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li.checked {
  background-color: #347fff;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li.checked span,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li.checked span,
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li.checked i,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li.checked i,
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li.checked em,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li.checked em {
  color: #ffffff;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li.checked .option-bg,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li.checked .option-bg {
  background-color: #2a65ca;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li > *,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li > * {
  position: absolute;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li > span,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li > span {
  width: 180px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #333333;
  top: 4px;
  left: 10px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li > em,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li > em {
  font-size: 12px;
  letter-spacing: 1px;
  color: #ffffff;
  top: 5px;
  left: 200px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li > i,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li > i {
  font-size: 12px;
  letter-spacing: 1px;
  color: #666666;
  bottom: 3px;
  left: 200px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .checked-option-list > li > .option-bg,
.page-wrapper .page-container .main .main-right .vote-topic-box .checked-option-list > li > .option-bg {
  width: 180px;
  height: 8px;
  background-color: #c5c6c7;
  border-radius: 4px;
  bottom: 6px;
  left: 10px;
}
.page-wrapper .page-container .main .main-right .vs-topic-box .option-bg .option-cover,
.page-wrapper .page-container .main .main-right .vote-topic-box .option-bg .option-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 8px;
  background-image: linear-gradient(90deg, #ffd050 0%, #feb049 32%, #fc9041 100%), linear-gradient(#fcb841, #fcb841);
  background-blend-mode: normal,
              normal;
  border-radius: 4px;
}
.page-wrapper .page-container .main .main-right .login-mode {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 4px;
  opacity: 0.92;
  padding: 13px;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  z-index: 1000;
}
.page-wrapper .page-container .main .main-right .login-mode .close {
  position: absolute;
  font-size: 20px;
  right: 13px;
  top: 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .login-mode > h4 {
  font-weight: normal;
  font-size: 14px;
  color: #333333;
}
.page-wrapper .page-container .main .main-right .login-mode .mode-list {
  margin-top: 20px;
}
.page-wrapper .page-container .main .main-right .login-mode .mode-list > li {
  float: left;
  width: 33.33%;
  cursor: pointer;
  height: 38px;
}
.page-wrapper .page-container .main .main-right .login-mode .mode-list > .mode-weixin {
  background: url(../images/weixin.png) no-repeat center center;
  background-size: 38px;
}
.page-wrapper .page-container .main .main-right .weChat-payment-box,
.page-wrapper .page-container .main .main-right .pay-success-box {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background-color: #ffffff;
  border-radius: 8px;
  z-index: 1000;
  text-align: center;
}
.page-wrapper .page-container .main .main-right .weChat-payment-box .payment-code-box .payment-code,
.page-wrapper .page-container .main .main-right .pay-success-box .payment-code-box .payment-code {
  width: 118px;
  height: 118px;
}
.page-wrapper .page-container .main .main-right .weChat-payment-box > i,
.page-wrapper .page-container .main .main-right .pay-success-box > i {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 10px;
  right: 10px;
  background: url(../images/close.png) 0px 0px no-repeat;
  -webkit-background-size: 14px;
  background-size: 14px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .weChat-payment-box > i:hover,
.page-wrapper .page-container .main .main-right .pay-success-box > i:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .weChat-payment-box > h4 {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
  margin-top: 24px;
}
.page-wrapper .page-container .main .main-right .weChat-payment-box .payment-code-box {
  width: 126px;
  height: 126px;
  margin: 16px auto;
  padding: 4px;
  background-color: #ffffff;
}
.page-wrapper .page-container .main .main-right .pay-success-box > h4 {
  font-size: 18px;
  color: #333333;
  font-weight: normal;
  margin-top: 48px;
}
.page-wrapper .page-container .main .main-right .pay-success-box > img {
  width: 110px;
  height: 83px;
  margin-top: 24px;
}
.page-wrapper .page-container .main .main-right .tab {
  position: relative;
  height: 46px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #3F404A;
  display: none;
}
.page-wrapper .page-container .main .main-right .tab .tab_list_box {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.page-wrapper .page-container .main .main-right .tab .tab-list {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  transition: left 0.2s linear;
}
.page-wrapper .page-container .main .main-right .tab .tab-list > li {
  /* float: left; */
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  /* width: 50%; */
  display: block;
  /* padding: 0 10px; */
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 14px;
  color: #959fb1;
  cursor: pointer;
  word-break: keep-all;
  flex-shrink: 0;
  z-index: 0;
}
.page-wrapper .page-container .main .main-right .tab .tab-list > li::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #347fff;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 99;
  transition: width 0.2s linear;
  height: 8px;
  background: linear-gradient(275deg, rgba(45,127,240,0) 0%, #2D7FF0 100%);
  border-radius: 4px;
  z-index: -1;
}
.page-wrapper .page-container .main .main-right .tab .tab-list > li.active {
  background-color: rgba(6, 20, 47, 0.14);
  color: #ffffff;
}
.page-wrapper .page-container .main .main-right .tab .tab-list > li.active::after {
  width: 100%;
}
.page-wrapper .page-container .main .main-right .tab .tab-list > li:hover {
  background-color: rgba(6, 20, 47, 0.14);
  color: #ffffff;
}
.page-wrapper .page-container .main .main-right .content {
  /* background-color: #1e1f2a; */
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* 对抗消息 */
  /* 投票消息 */
  /* 点赞 */
  /*发表评论*/
  /*现金*/
}
.page-wrapper .page-container .main .main-right .content .content-list {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.page-wrapper .page-container .main .main-right .content .content-list > li {
  float: left;
  width: 360px;
  height: 100%;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part,
.page-wrapper .page-container .main .main-right .content .ranking-part,
.page-wrapper .page-container .main .main-right .content .video-album-part,
.page-wrapper .page-container .main .main-right .content .activity-detail-part {
  display: flex;
  flex-direction: column;
  padding-top: 5px;
}
.page-wrapper .page-container .main .main-right .content .activity-detail-part .imageText-filter,
.page-wrapper .page-container .main .main-right .content .activity-detail-part .imageText-box {
  padding: 0 20px;
}
.page-wrapper .page-container .main .main-right .content .activity-detail-part .imageText-filter {
  padding-top: 10px;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part > div > .inter {
  font-size: 12px;
  color: #B3B3B9;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid rgba(71, 91, 123, 0.2);
}
.page-wrapper .page-container .main .main-right .content .chat-room-part > .comments,
.page-wrapper .page-container .main .main-right .content .ranking-part > .ranking-box,
.page-wrapper .page-container .main .main-right .content .playfile-part > .video-album-box,
.page-wrapper .page-container .main .main-right .content .imageText-part > .imageText-box,
.page-wrapper .page-container .main .main-right .content .live-recommend-part > .live-recommend-box,
.page-wrapper .page-container .main .main-right .content .goods-part > .goods-box {
  flex: 1;
  padding: 0 16px;
  width: 100%;
}
.page-wrapper .page-container .main .main-right .content .live-recommend-part > .live-recommend-box {
  padding: 0;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part {
  position: relative;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part .unreadtip {
  color: #6f7a8e;
  background: #343845;
  z-index: 999;
  width: fit-content;
  padding: 0 8px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  position: absolute;
  right: 10px;
  top: 62px;
  cursor: pointer;
  display: none;
  white-space: nowrap;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part > .comments {
  position: relative;
  overflow: auto;
  height: 100%;
  padding: 0 16px;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part .thumb {
  position: absolute;
  /* height: 48px; */
  bottom: 14px;
  right: 13px;
  cursor: pointer;
  z-index: 21;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part .thumb>p{
  width: 38px;
  height: 38px;
  background: linear-gradient(180deg, #FFC248 0%, #FF840D 100%);
  border-radius: 50%;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part .thumb .thumb-btn {
  /* width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-left: 50%;
  transform: translateX(-50%); */
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: auto;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part .thumb:hover .thumb-btn {
  width: 24px;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part .thumb .thumb-num {
  position: absolute;
  top: 0;
  left: 50%;
  /* transform: translate(-50%,-50%); */
  height: 18px;
  line-height: 18px;
  font-size: 14px;
  color: #EF7601;
  text-align: center;
  border-radius: 4px;
  background: #F7E6CC;
  min-width: 26px;
  transform: scale(0.8) translate(-50%,-50%);
}
.page-wrapper .page-container .main .main-right .content .chat-room-part canvas {
  display: block;
  position: absolute;
  bottom: 130px;
  right: -26px;
  z-index: 20;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.page-wrapper .page-container .main .main-right .content .comment-list li,
.page-wrapper .page-container .main .main-right .content .top-comment-list li {
  margin: 15px 0;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .photo,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 1px;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .photo > img,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .photo > img {
  width: 100%;
  height: 100%;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message {
  width: 100%;
  padding-left: 42px;
  text-align: left;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .up,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .up {
  display: flex;
  align-items: center;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .up i,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .up i {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #94949B;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .up>span,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .up>span {
  display: inline-block;
  width: 32px;
  height: 18px;
  background-color: #2D7FF0;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
  margin-left: 2px;
}

.page-wrapper .page-container .main .main-right .content .comment-list li .message .has_one,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .has_one {
  width: 272px;
  padding: 8px 12px;
  background: #353744;
  border-radius: 2px 10px 10px 10px;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .has_one p,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .has_one p{
  color: #333;
  font-size: 14px;
  margin-bottom: 6px;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .has_one img,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .has_one img {
  width: 100%;
  border-radius: 6px;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .has_much,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .has_much {
  max-width: 272px;
  padding: 8px 12px;
  background: #353744;
  border-radius: 2px 10px 10px 10px;
  display: inline-block;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .has_much p,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .has_much p{
  color: #333;
  font-size: 14px;
  margin-bottom: 6px;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .has_much img,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .has_much img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 2px 2px 0;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .no_one,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .no_one {
  /* display: flex;
  align-items: center; */
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .no_one img,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .no_one img {
  width: 240px;
  border-radius: 6px;
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .no_much,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .no_much {
  /* display: flex;
  align-items: center; */
}
.page-wrapper .page-container .main .main-right .content .comment-list li .message .no_much img,
.page-wrapper .page-container .main .main-right .content .top-comment-list li .message .no_much img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 2px 2px 0;
}

.page-wrapper .page-container .main .main-right .content .comment-list .time,
.page-wrapper .page-container .main .main-right .content .top-comment-list .time {
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #B3B3B9;
}
.page-wrapper .page-container .main .main-right .content .compere {
  font-size: 14px;
  color: #959fb1;
}
.page-wrapper .page-container .main .main-right .content .audience {
  font-size: 14px;
  color: #959fb1;
}
.page-wrapper .page-container .main .main-right .content .stick {
  display: inline-block;
  width: 20px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #ffffff;
  background-color: #f67b31;
  border-radius: 4px;
  margin-left: 8px;
}
.page-wrapper .page-container .main .main-right .content .down {
  margin-top: 6px;
  padding-right: 24px;
}
.page-wrapper .page-container .main .main-right .content .down > .reply-list,
.page-wrapper .page-container .main .main-right .content .down > .reply {
  display: inline-block;
  background-color: #343845;
  border-radius: 2px 10px 10px 10px;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-right .content .down > .reply {
  padding: 8px 12px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 22px;
}
.page-wrapper .page-container .main .main-right .content .reply-list > li {
  padding: 8px;
  font-size: 14px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  word-wrap: break-word;
  word-break: break-all;
}
.page-wrapper .page-container .main .main-right .content .reply-list > li:last-child {
  border-bottom: none;
}
.page-wrapper .page-container .main .main-right .content .question-part {
  color: #fff;
  font-size: 14px;
  overflow: hidden;
  padding-bottom: 50px;
  position: relative;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-box {
  height: 100%;
  width: 100%;
  overflow: auto;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 14px;
  height: 54px;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish .publish-quest-box {
  width: 100%;
  /* height: 38px; */
  overflow: hidden;
  border-radius: 4px;
  display: flex;
  position: relative;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish .publish-quest-box .loginbox {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  align-items: center;
  display: flex;
  padding-left: 12px;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish .publish-quest-box .loginbox span:nth-of-type(2) {
  color: #9ca4ae;
  opacity: 0.6;
  margin-left: 6px;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish .publish-quest-box .loginbox .login {
  color: #347fff;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish .publish-quest-box input {
  flex: 1;
  /* height: 38px;
  border: none;
  outline: none; */
  padding-left: 14px;
  /* background-color: #151623; */
  color: #fff;
  background: #161722;
  border-radius: 8px;
  border: 1px solid #363743;
  height: 42px;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-publish .publish-quest-box button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 48px;
  height: 28px;
  line-height: 28px;
  background-color: #f85454;
  color: #ffffff;
  border-radius: 6px;
  text-align: center;
  display: none;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-list {
  padding: 14px;
  width: 100%;
  height: fit-content;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-list li {
  background-color: #353744;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}
.page-wrapper .page-container .main .main-right .content .question-part .question-list li:first-child {
  margin-top: 0px;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest-user-info {
  position: relative;
  display: flex;
  align-items: center;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest-user-info img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  float: left;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest-user-info p {
  height: 24px;
  line-height: 24px;
  display: inline-block;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest-user-info p:nth-of-type(1) {
  padding-left: 10px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest-user-info p.top {
  width: 20px;
  height: 18px;
  background-color: #f67b31;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  margin-left: 5px;
  position: relative;
  padding: 0;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest-user-info p.same {
  padding: 0;
  width: fit-content;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
  height: 24px;
  background-color: #f85454;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest,
.page-wrapper .page-container .main .main-right .content .question-part .ans {
  margin-top: 10px;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest p,
.page-wrapper .page-container .main .main-right .content .question-part .ans p {
  line-height: 20px;
  color: #fff;
  word-break: break-word;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest p:nth-of-type(1),
.page-wrapper .page-container .main .main-right .content .question-part .ans p:nth-of-type(1) {
  width: 20px;
  background-color: #f76363;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  float: left;
  font-size: 12px;
}
.page-wrapper .page-container .main .main-right .content .question-part .ans-box {
  overflow: hidden;
}
.page-wrapper .page-container .main .main-right .content .question-part .ans-box .ans-cont {
  border-top: 1px solid transparent;
}
.page-wrapper .page-container .main .main-right .content .question-part .ans {
  padding-left: 27px;
  position: relative;
}
.page-wrapper .page-container .main .main-right .content .question-part .ans p:nth-of-type(1) {
  position: absolute;
  left: 0;
  background-color: #347fff;
}
.page-wrapper .page-container .main .main-right .content .question-part .quest p:nth-of-type(2) {
  font-weight: bold;
  padding-left: 27px;
}
.page-wrapper .page-container .main .main-right .content .question-part .more {
  font-size: 12px;
  color: #347fff;
  margin-top: 10px;
  position: relative;
  cursor: pointer;
  height: 24px;
}
.page-wrapper .page-container .main .main-right .content .question-part .more .closeDetail,
.page-wrapper .page-container .main .main-right .content .question-part .more .showAllAns {
  display: none;
}
.page-wrapper .page-container .main .main-right .content .question-part .more .closeDetail i,
.page-wrapper .page-container .main .main-right .content .question-part .more .showAllAns i {
  display: inline-block;
  width: 10px;
  height: 6px;
  background: url("../images/jiantou2.png") center center no-repeat;
  background-size: 10px 6px;
  margin-left: 4px;
  margin-bottom: 2px;
}
.page-wrapper .page-container .main .main-right .content .question-part .more .closeDetail i {
  transform: rotate(-180deg);
}
.page-wrapper .page-container .main .main-right .content .question-part .more p {
  height: 24px;
  line-height: 24px;
}
.page-wrapper .page-container .main .main-right .content .question-part .more p.time {
  position: absolute;
  right: 0;
  top: 0;
  color: #999999;
}
.page-wrapper .page-container .main .main-right .content .down > .vs-msg {
  font-size: 14px;
  color: #ffffff;
  word-wrap: break-word;
  word-break: break-all;
}
.page-wrapper .page-container .main .main-right .content .down > .vs-img {
  position: relative;
  left: -9px;
  width: 229px;
  height: 90px;
  padding-top: 15px;
  background: url("../images/vsBg.png") center center no-repeat;
  background-size: 229px 90px;
}
.page-wrapper .page-container .main .main-right .content .down > .vs-img p {
  margin-left: 20px;
}
.page-wrapper .page-container .main .main-right .content .down > .vs-img p:nth-of-type(2) {
  color: #c74975;
}
.page-wrapper .page-container .main .main-right .content .down > .vote-msg {
  font-size: 14px;
  color: #ffffff;
  word-wrap: break-word;
  word-break: break-all;
  margin-bottom: 6px;
}
.page-wrapper .page-container .main .main-right .content .down > .vote-img {
  position: relative;
  left: -11px;
  width: 229px;
  height: 96px;
  padding-top: 17px;
  background: url("../images/voteBg.png") center center no-repeat;
  background-size: 229px 96px;
}
.page-wrapper .page-container .main .main-right .content .down > .vote-img p {
  margin-left: 22px;
}
.page-wrapper .page-container .main .main-right .content .down > .vote-img p:nth-of-type(2) {
  color: #0b94f8;
}
.page-wrapper .page-container .main .main-right .content .question-img {
  position: relative;
  left: -11px;
  width: 229px;
  height: 96px;
  background: url("../images/questionBg.png") center center no-repeat;
  background-size: 229px 96px;
  padding-top: 17px;
}
.page-wrapper .page-container .main .main-right .content .question-img p {
  margin-left: 22px;
}
.page-wrapper .page-container .main .main-right .content .question-img p:nth-of-type(2) {
  color: #18ceb4;
}
.page-wrapper .page-container .main .main-right .content .question-img p,
.page-wrapper .page-container .main .main-right .content .vote-img p,
.page-wrapper .page-container .main .main-right .content .vs-img p {
  font-size: 14px;
}
.page-wrapper .page-container .main .main-right .content .question-img p:nth-of-type(1),
.page-wrapper .page-container .main .main-right .content .vote-img p:nth-of-type(1),
.page-wrapper .page-container .main .main-right .content .vs-img p:nth-of-type(1) {
  color: #ffffff;
  font-weight: bold;
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-wrapper .page-container .main .main-right .content .question-img p:nth-of-type(2),
.page-wrapper .page-container .main .main-right .content .vote-img p:nth-of-type(2),
.page-wrapper .page-container .main .main-right .content .vs-img p:nth-of-type(2) {
  width: 95px;
  height: 23px;
  background-color: #ffffff;
  border-radius: 11px;
  letter-spacing: 1px;
  line-height: 23px;
  text-align: center;
  margin-top: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.page-wrapper .page-container .main .main-right .content .praise {
  display: inline-block;
  position: relative;
  font-size: 12px;
  color: #6f7a8e;
  margin-left: 5px;
  cursor: pointer;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-right .content .praise.active {
  color: #347fff;
}
.page-wrapper .page-container .main .main-right .content .praise > img {
  width: 16px;
  height: 14px;
  vertical-align: top;
}
.page-wrapper .page-container .main .main-right .content .praise > i {
  position: absolute;
  width: 10px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  color: red;
  top: 0px;
  left: 8px;
  font-size: 12px;
  opacity: 0;
}
.page-wrapper .page-container .main .main-right .content .praise .agreednum {
  color: #347fff;
}
.page-wrapper .page-container .main .main-right .content .praise > i.active {
  -webkit-animation: float 1s linear;
  -moz-animation: float 1s linear;
  animation: float 1s linear;
}
@keyframes float {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}
@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(-10px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-20px);
    opacity: 0;
  }
}
@-moz-keyframes float {
  0% {
    -moz-transform: translateY(0px);
    opacity: 0;
  }
  50% {
    -moz-transform: translateY(-10px);
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(-20px);
    opacity: 0;
  }
}
.page-wrapper .page-container .main .main-right .content .comment-list > .notice-msg,
.page-wrapper .page-container .main .main-right .content .comment-list > .reward-msg,
.page-wrapper .page-container .main .main-right .content .comment-list > .gift-msg,
.page-wrapper .page-container .main .main-right .content .comment-list > .bonus-msg {
  text-align: center;
}
.page-wrapper .page-container .main .main-right .content .bonus-msg > .bonus-content {
  display: inline-block;
  padding: 2px 15px 4px 15px;
  background-color: rgba(104, 114, 140, 0.1);
  border-radius: 10px;
  margin: 5px 0px;
}
.page-wrapper .page-container .main .main-right .content .bonus-content > i {
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-right: 6px;
  background: url(../images/smallPacket.png) center center no-repeat;
  -webkit-background-size: 16px 18px;
  background-size: 16px 18px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.page-wrapper .page-container .main .main-right .content .bonus-content > span {
  font-size: 14px;
  color: #4697f3;
}
.page-wrapper .page-container .main .main-right .content .bonus-content > em {
  font-size: 14px;
  color: #ff4343;
  margin: 0px 4px;
  vertical-align: middle;
}
.page-wrapper .page-container .main .main-right .content .notice-msg > span {
  display: inline-block;
  width: 240px;
  height: 24px;
  background-color: #ec4548;
  border-radius: 2px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #ffffff;
}
.page-wrapper .page-container .main .main-right .content .reward-msg > i {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  background: url(../images/gold.png) center center no-repeat;
  -webkit-background-size: 18px;
  background-size: 18px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 6px;
}
.page-wrapper .page-container .main .main-right .content .gift-msg,
.page-wrapper .page-container .main .main-right .content .reward-msg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.page-wrapper .page-container .main .main-right .content .reward-msg > span,
.page-wrapper .page-container .main .main-right .content .gift-msg > span {
  font-size: 12px;
  color: #4697f3;
  margin: 0 5px;
}
.page-wrapper .page-container .main .main-right .content .reward-msg > em,
.page-wrapper .page-container .main .main-right .content .gift-msg > em {
  font-size: 14px;
  color: #ff4343;
  vertical-align: middle;
  margin: 0px 4px;
}
.page-wrapper .page-container .main .main-right .content .gift-msg > img {
  max-width: 44px;
  max-height: 30px;
  vertical-align: middle;
  margin: 0px 4px;
}
.page-wrapper .page-container .main .main-right .content .gift-msg > span {
  max-width: 70px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-wrapper .page-container .main .main-right .content .chat-room-part > .user-interaction {
  height: 102px;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area {
  /* width: 360px;
  height: 48px;
  background-color: #151623; */
  position: relative;
  padding: 10px 10px;
  height: 42px;
  background: #161722;
  border-radius: 8px;
  border: 1px solid #363743;
  margin: 0 14px;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .loginboxLt {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  align-items: center;
  display: flex;
  font-size: 14px;
  display: none;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .loginboxLt .login{
  color: #347fff;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .loginboxLt span:nth-child(1){
  color: #9ca4ae;
  opacity: 0.6;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .send {
  width: 48px;
  height: 28px;
  background-color: #347fff;
  border-radius: 6px;
  position: absolute;
  right: 6px;
  top: 6px;
  color: #ffffff;
  font-size: 14px;
  line-height: 26px;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .send.sendDisabled {
  color: #c5c8ce;
  background-color: #f7f7f7;
  border-color: #C0C0C0;
  cursor: not-allowed;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_no,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_nologin {
  color: #ffffff;
  font-size: 14px;
  resize: none;
  background-color: #151623;
  width: 250px;
  height: 100%;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area::-webkit-input-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_no::-webkit-input-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_nologin::-webkit-input-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area::-moz-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_no::-moz-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_nologin::-moz-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area:-ms-input-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_no:-ms-input-placeholder,
.page-wrapper .page-container .main .main-right .content .user-interaction .comment-area .review-area_nologin:-ms-input-placeholder {
  color: #495671 !important;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func {
  height: 48px;
  /* line-height: 40px; */
  padding-left: 8px;
  position: relative;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list {
  /* position: absolute;
  bottom: 0;
  right: 6px; */
  /* height: 48px; */
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  /* margin-top: -8px; */
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li {
  display: none;
  width: 26px;
  height: 26px;
  margin: 0 8px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li:hover {
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li.task-icon {
  background: url("../images/taskIcon.png") center center no-repeat;
  background-size: auto 100%;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li.vs-icon {
  background: url("../images/vsIcon.png") center center no-repeat;
  background-size: auto 100%;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li.vote-icon {
  background: url("../images/voteIcon.png") center center no-repeat;
  background-size: auto 100%;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li.gift-icon {
  background: url(../images/gift.png) center center no-repeat;
  background-size: auto 100%;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li.cash-icon {
  background: url(../images/redPacket.png) center center no-repeat;
  background-size: auto 100%;
}
.page-wrapper .page-container .main .main-right .content .user-interaction .user-func .icon-list li.question-icon {
  background: url(../images/qaIcon.png) center center no-repeat;
  background-size: auto 100%;
}



.page-wrapper .page-container .header .channel-func .users {
  display: flex;
  align-items: center;
}
/* .page-wrapper .page-container .header .channel-func .users .user-name {
  font-size: 16px;
  color: #959fb1;
  height: 50px;
  line-height: 50px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
} */
.page-wrapper .page-container .header .channel-func .users .user-name,
.page-wrapper .page-container .header .channel-func .users .user-login {
  font-size: 12px;
  color: #347fff;
  margin: 0 30px 0 20px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
.page-wrapper .page-container .header .channel-func .users .user-name img,
.page-wrapper .page-container .header .channel-func .users .user-login img{
  width: 28px;
  height: 28px;
  border-radius: 50%
}
.page-wrapper .page-container .header .channel-func .users .user-name span,
.page-wrapper .page-container .header .channel-func .users .user-login span{
  display: block;
  margin-top: 2px;
}





.page-wrapper .page-container .main .main-right .content .user-func {
  display: flex;
  align-items: center;
}
.page-wrapper .page-container .main .main-right .content .user-func .user-name {
  font-size: 16px;
  color: #959fb1;
  height: 50px;
  line-height: 50px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.page-wrapper .page-container .main .main-right .content .user-func .user-login {
  font-size: 14px;
  color: #347fff;
  margin-left: 20px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
.page-wrapper .page-container .main .main-right .content .user-func .user-login img{
  width: 28px;
  height: 28px;
}
.page-wrapper .page-container .main .main-right .content .user-func .user-login span{
  display: block;
  margin-top: 6px;
}
.page-wrapper .page-container .main .main-right .content .user-func .user-login:hover {
  /*box-shadow: 0px 4px 8px 0px rgba(6, 6, 30, 0.5);*/
  opacity: 0.8;
}
.page-wrapper .page-container .main .main-right .content .user-func button {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 70px;
  height: 30px;
  line-height: 30px;
  background-color: #0569f1;
  border-radius: 6px;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}
.page-wrapper .page-container .main .main-right .content .user-func button:hover {
  box-shadow: 0px 0px 16px 0px rgba(6, 6, 30, 0.5);
}
.error-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../images/offline-bg.png') center center no-repeat;
}
.animation {
  animation: bounceIn 0.8s ease normal forwards;
  -webkit-animation: bounceIn 0.8s ease normal forwards;
  -moz-animation: bounceIn 0.8s ease normal forwards;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1.05);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
  }
}
@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    -moz-transform: translate(-50%, -50%) scale(1.05);
  }
  70% {
    opacity: 1;
    -moz-transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    -moz-transform: translate(-50%, -50%) scale(1);
  }
}
/*弹出警告*/
.popup,
.fullpopup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  font-size: 12px;
  color: #ffffff;
  background-color: #FF9966;
  border-radius: 5px;
  word-break: keep-all;
  white-space: nowrap;
  z-index: 999;
}
.popup > span,
.fullpopup > span {
  word-break: keep-all;
  white-space: nowrap;
}
/* 预览 */
.preview-box,
.imageText-vod {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  overflow-y: scroll;
}
.preview-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0 0;
  transition: all 0.3s;
}
.preview-img img {
  position: absolute;
  /* width: 50%; */
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.preview-img img.center {
  top: 50%;
  transform: translate(-50%, -50%);
}
.preview-box.active .preview-img {
  transform: scale(1) translate(-50%, -50%);
}
.imageText-vod .video-box {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000000;
}
.video-box > video {
  width: 100%;
  height: 100%;
}
.shadow-register {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.76);
  top: 0;
  left: 0;
  z-index: 999;
}
.shadow-register .register-login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.shadow-register .register-login.active {
  -webkit-animation: bounceIn 0.5s 0.3s ease both;
  animation: bounceIn 0.5s 0.3s ease both;
}
.shadow-register .register-login .top {
  position: relative;
  width: 440px;
  height: 60px;
  border-radius: 6px;
}
.shadow-register .register-login .top .title {
  top: -1px;
  width: 100%;
  height: 100%;
  background-color: #347fff;
  border-radius: 6px;
  font-family: PangMenZhengDao;
  font-size: 28px;
  letter-spacing: 3px;
  color: #ffffff;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.shadow-register .register-login .top .title > span {
  max-width: 360px;
  margin: 0 10px;
}
.shadow-register .register-login .top img {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 16px;
  z-index: -1;
}
.shadow-register .register-login .top .left {
  left: -30px;
}
.shadow-register .register-login .top .right {
  right: -30px;
}
.shadow-register .register-login .reg-cnt {
  width: 420px;
  min-height: 100px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
  margin-left: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
}
.shadow-register .register-login .reg-cnt .enter-tab {
  position: relative;
  width: 240px;
  height: 34px;
  display: flex;
}
.shadow-register .register-login .reg-cnt .enter-tab::after {
  content: "";
  display: inline-block;
  width: 120px;
  height: 2px;
  background-color: #347fff;
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 2;
  transition: left 0.2s linear;
}
.shadow-register .register-login .reg-cnt .enter-tab.ed::after {
  left: 120px;
}
.shadow-register .register-login .reg-cnt .enter-tab div {
  width: 120px;
  height: 34px;
  text-align: center;
  font-size: 16px;
  color: #999999;
  font-weight: bold;
  border-bottom: 2px solid #e3e3e3;
  cursor: pointer;
}
.shadow-register .register-login .reg-cnt .enter-tab div.active {
  color: #347fff;
}
.shadow-register .register-login .reg-cnt .enter-content {
  margin-top: 4px;
}
.shadow-register .register-login .reg-cnt .enter-content .login-item {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.shadow-register .register-login .reg-cnt .enter-content .login-item > p {
  width: 240px;
  font-size: 12px;
  color: #333333;
  padding-left: 20px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shadow-register .register-login .reg-cnt .enter-content .login-item > input,
.shadow-register .register-login .reg-cnt .enter-content .login-item > select {
  width: 240px;
  height: 30px;
  border-radius: 15px;
  border: solid 1px #e3e3e3;
  background-color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  color: #000000;
  padding: 0 20px;
  outline: none;
}
.shadow-register .register-login .reg-cnt .enter-content .login-item > input::-webkit-input-placeholder,
.shadow-register .register-login .reg-cnt .enter-content .login-item > select::-webkit-input-placeholder {
  color: #c6c6c6;
}
.shadow-register .register-login .reg-cnt .enter-content .login-item > input:focus,
.shadow-register .register-login .reg-cnt .enter-content .login-item > select:focus {
  border: solid 1px #347fff;
}
.shadow-register .register-login .reg-cnt .enter-content .login-item > select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url("../images/downArrow.png") no-repeat right 13px center;
  padding-right: 21px;
}
.shadow-register .register-login .reg-cnt .enter-content .login-content {
  display: none;
}
.shadow-register .register-login .reg-cnt #submitLogin {
  position: absolute;
  display: block;
  width: 220px;
  height: 42px;
  background-color: #347fff;
  box-shadow: 0px 4px 10px 0px rgba(3, 95, 219, 0.5);
  border-radius: 20px;
  bottom: -21px;
  text-align: center;
  line-height: 42px;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
}
.shadow-register .register-login .register-close {
  top: -50px;
  right: -24px;
  display: none;
}
.cancel {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  top: -0.8rem;
  right: 0.1rem;
  z-index: 2;
  cursor: pointer;
}
.cancel::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: url("../images/cancel.png");
  background-size: 22px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #242530;
}
::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: #353744;
  border-radius: 5px;
}
.vcp-loading {
  transform: translate(-50%, -50%);
  margin: 0 !important;
}
.vcp-error-tips {
  margin-top: -1.25em !important;
}
.video-status {
  position: absolute;
  right: 100px;
  top: 40px;
  z-index: 101;
}
.video-status img {
  width: 100px;
}
.player video {
  width: 100%;
  height: 100%;
}
.full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
}