body {
  margin: 0;
  padding: 0;
  font-family: "FZLanTingHei-R-GBK", STHeiti STXihei, Microsoft Yahei, Arial;
  background-color: #f0f0f0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  font-family: "FZLanTingHei-DB-GBK", STHeiti STXihei, Microsoft Yahei, Arial;
}

a {
  text-decoration: none;
}

.container {
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.in_con {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
}

.banner {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  -webkit-transition: padding ease .5s;
  transition: padding ease .5s;
  overflow: hidden;
}

.banner_full {
  height: 100%;
  z-index: 1;
}

.btn_icon {
  cursor: pointer;
  display: inline-block;
  height: 26px;
  margin: 0 6px;
  /*  border-width: 12px;
  border-style: solid;
  border-color: transparent transparent #fb4747 transparent; */
  z-index: 103;
}

.btn_icon img {
  width: auto;
  height: 100%;
  margin: 4px 0 -8px 0;
}

.zk_kingslide_in {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.zk_kingslide_in_full_show {
  position: absolute;
  background: #fff;
}

.banner_con {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1;
}

.banner_con video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
}

.top_banner .swiper-slide a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top_live_tips {
  position: absolute;
  z-index: 30;
  padding: 0 5px;
  top: 16px;
  right: 6px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 10px;
  color: white;
  border-radius: 9px;
  border: #fff solid 1px;
  opacity: 1;
  -webkit-transition: opacity ease .5s;
  transition: opacity ease .5s;
}

.top_live_tips.top_live_tips_hide {
  opacity: 0;
}

.top_live_tips:empty {
  display: none;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.top_tips {
  height: 45px;
  border-bottom: #f0f0f0 solid 8px;
}

.top_tips_full {
  position: absolute;
  bottom: 60%;
  margin-bottom: 64px;
  width: 100%;
  z-index: 999;
  background: #fff;
}

.top_tips_content:empty {
  display: none;
}

.top_tips_content {
  display: block;
  float: left;
  height: 45px;
  line-height: 45px;
  padding-left: 14px;
  font-size: 10px;
  color: #4a4a4a;
}

.top_tips_btn {
  display: block;
  float: right;
  padding: 0 10px;
  margin: 9px 14px 0 0;
  font-size: 10px;
  height: 27px;
  line-height: 27px;
  color: white;
  border-radius: 4px;
  background-color: #fb4747;
}

.article_con {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tab_con {
  position: relative;
  height: 35px;
  color: #ababab;
  text-align: center;
  border-bottom: #e8e8e8 solid 1px;
  white-space: nowrap;
  overflow-x: auto;
}

.tab_con_full {
  /* position: absolute; */
  position: fixed;
  bottom: 60%;
  margin-bottom: 34px;
  width: 100%;
  z-index: 999;
  background: #fff;
}

.tab_active_decorate {
  position: absolute;
  bottom: 0px;
  height: 2px;
  z-index: 2;
  background-color: #fb4747;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}

.tab_block {
  display: inline-block;
  max-width: 100px;
  margin: 0 10px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab_block.tab_block_active {
  color: #fb4747;
  cursor: default;
}

.tab_block:after {
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  margin: 0;
  border-radius: 3px;
  background-color: #fb4747;
  -webkit-transition: all cubic-bezier(0.25, 0.1, 0.35, 1.46) 0.5s;
  transition: all cubic-bezier(0.25, 0.1, 0.35, 1.46) 0.5s;
}

.tab_block.has_pop:after {
  width: 6px;
  height: 6px;
  margin: 0 4px;
}

.reply_outer {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 32px;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 99;
}

.reply_outer_full {
  position: absolute !important;
  bottom: 0;
  height: 60%;
  background: #fff;
}

.reply_outer.hide_bottom {
  margin-bottom: 0;
}

.reply_welfare_block {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 112px;
  height: 52px;
}

.reply_welfare_block img {
  display: block;
  width: 100%;
  height: 100%;
}

.reply_welfare_tips {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.reply_welfare_tips .reply_welfare_tips_in {
  display: block;
  max-width: 60%;
  max-height: 95%;
}

.lrb_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.lrb_top_avatar {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.lrb_top_rightcon {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.lrb_top_title {
  position: relative;
  /* margin: 14px 0 0 7px; */
  margin: 0 0 0 7px;
  height: 16px;
  font-size: 14px;
  color: #3b3b3b;
}

.lrb_top_tips {
  position: relative;
  height: 12px;
  line-height: 12px;
  font-size: 10px;
  color: #ababab;
  margin: 5px 0 0 7px;
}

.lrb_top_title_mark {
  width: 12px;
  height: 12px;
  margin-left: 6px;
}

.lrb_top_title_inner,
.lrb_top_tips_inner {
  position: absolute;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lrb_top_title_inner_text {
  display: inline-block;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.lrb_content {
  color: #3b3b3b;
  line-height: 1.46em;
  font-size: 14px;
  margin: 11px 0 0;
  word-break: break-all;
  -webkit-transition: height ease .5s;
  transition: height ease .5s;
}

.lrb_content_morebtn {
  height: 24px;
  line-height: 30px;
  text-align: left;
  font-size: 14px;
  color: #00a9ff;
  overflow: hidden;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}

.live_reply_block {
  padding: 14px;
}

.live_reply_block p {
  margin: 0;
}

.live_reply_block+.live_reply_block {
  border-top: #e8e8e8 solid 1px;
}

.lrb_imgs_gallery {
  width: 100%;
  height: 150px;
  overflow: hidden;
  margin-top: 10px;
}

.lrb_imgs_gallery .swiper-slide {
  position: relative;
  max-width: 195px;
  max-height: 145px;
  margin: 0 2px 0 0;
  background-size: cover;
}

.lrb_imgs_gallery .swiper-slide:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: rgba(0, 0, 0, 0.1) 1px solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.swiper_one_img {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-top: 10px;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.zhibo_swipe_img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.lrb_inreply {
  position: relative;
  background-color: #e8e8e8;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.46em;
  word-break: break-all;
  overflow: hidden;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  background-color: #f8f8f8;
  color: #919191;
  padding: 7px;
}

.lrb_inreply .lrb_content_morebtn {
  position: absolute;
  line-height: 24px;
  font-size: 12px;
  background-color: #f8f8f8;
  width: 100%;
  bottom: 0;
  margin-left: -10px;
  padding-left: 10px;
}

.reply_box {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 800px;
  background-color: white;
  border-top: #ececec solid 1px;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  z-index: 51;
}

.reply_box.reply_box_commentstate #reply_input {
  height: 100px;
}

.reply_box.reply_box_emojistate {
  white-space: nowrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.reply_box.reply_box_emojistate::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.reply_box.reply_box_emojistate .reply_input_con {
  display: inline-block;
  -webkit-box-flex: inherit;
  -ms-flex: inherit;
  flex: inherit;
  width: 255px;
  vertical-align: middle;
}

.reply_box.reply_box_emojistate .reply_submit {
  display: none;
}

.reply_box.reply_box_emojistate .reply_emoji_area {
  display: inline-block;
  height: 32px;
  vertical-align: middle;
  white-space: nowrap;
}

.reply_box.reply_box_emojistate .reply_emoji_area_block {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0 0 0 7px;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position: center;
}

.reply_box.reply_box_emojistate .reply_emoji_area_block:last-child {
  margin-right: 7px;
}

.reply_box.hide {
  -webkit-transform: translate3d(0, 47px, 0);
  transform: translate3d(0, 47px, 0);
}

.reply_input_con {
  display: inline-block;
  width: 79%;
  margin: 5px 0 5px 3.7%;
  vertical-align: middle;
  background-color: #f8f8f8;
}

.conwwww {
  height: auto;
}

.reply_input_con .btn_zaker {
  display: block;
  font-size: 10px;
  height: 27px;
  line-height: 27px;
  color: white;
  border-radius: 4px;
  text-align: center;
  background-color: #fb4747;
}

.reply_input_con input,
.reply_input_con textarea {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  -webkit-appearance: none;
  font-family: "FZLanTingHei-DB-GBK", STHeiti STXihei, Microsoft Yahei, Arial;
  background-color: transparent;
}

.reply_input_con textarea {
  padding: 0;
  line-height: 18px;
  margin: 10px 5px;
  font-size: 14px;
  resize: none;
  outline: none;
  height: 18px;
  -webkit-transition: height ease .3s;
  transition: height ease .3s;
}

.reply_submit {
  position: relative;
  display: inline-block;
  width: 15%;
  text-align: center;
  vertical-align: middle;
}

.reply_submit input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  border: none;
  -webkit-appearance: none;
}

.reply_emoji_area {
  display: none;
}

@media screen and (min-width: 800px) {
  body {
    position: fixed;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .top_tips {
    display: none;
  }

  .reply_box {
    position: absolute;
    width: 800px;
  }
}

.loading_page {
  position: fixed;
  z-index: 210;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: white;
  -webkit-transition: opacity ease .3s;
  transition: opacity ease .3s;
  opacity: 1;
}

.start_loading_text {
  text-align: center;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  color: #a8a8a8;
}

@-webkit-keyframes zk-tadain {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zk-tadain {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.zk-tadain {
  -webkit-animation: zk-tadain ease 2s infinite;
  animation: zk-tadain ease 2s infinite;
}

.zk_kingslide_page {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.inbottom_text {
  height: 20px;
  line-height: 20px;
  color: #888;
  text-align: center;
  font-size: 10px;
  margin-bottom: 4px;
}

@-webkit-keyframes live_reply_block_anime_in {
  0% {
    opacity: 0;
    padding-top: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  100% {
    opacity: 1;
    padding-top: 14px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes live_reply_block_anime_in {
  0% {
    opacity: 0;
    padding-top: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  100% {
    opacity: 1;
    padding-top: 14px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.live_reply_block_anime_in {
  -webkit-animation: live_reply_block_anime_in ease 0.5s;
  animation: live_reply_block_anime_in ease 0.5s;
}

.zk_kingslide_page {
  position: relative;
}

.tab_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tab_iframe iframe {
  border: none;
  width: 100%;
}

.live_reply_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  -webkit-transition: all ease .4s;
  transition: all ease .4s;
  background-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.zanting_poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../img/zanting_poster.png?v=2);
  z-index: 29;
}

.zanting_poster.zanting_stream_poster {
  background-image: url(../img/zanting_stream.png);
}

.reply_inner:empty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/no_content.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70px auto;
}

.host_inner .rely_content:empty,
.user_inner .rely_content:empty {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/zhuchiren_empty_bg.png);
  background-repeat: no-repeat;
  background-size: 166px auto;
  background-position: center;
}

.user_inner .rely_content:empty {
  background-image: url(../img/shafa_empty_bg.png);
}

.top_reply .lrb_top_title_inner:after {
  display: block;
  content: "";
  float: right;
  width: 18px;
  height: 19px;
  background-image: url(../img/zhiding.png);
  background-size: 18px 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.top_reply .live_reply_block:last-child {
  border-bottom: #e8e8e8 solid 1px;
}

.error_tips {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 10px;
  color: #dadada;
  text-align: center;
  background-color: #4c4c4c;
  -webkit-animation: error_tips_anime ease .5s;
  animation: error_tips_anime ease .5s;
}

@-webkit-keyframes error_tips_anime {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes error_tips_anime {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.ercode {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 50%;
  margin: 44px 0 0 526px;
  padding: 10px;
  background-color: #fff;
  border: #e8e8e8 solid 1px;
  text-align: center;
  color: #7b7b7b;
  font-size: 12px;
}

.ercode img {
  display: block;
  width: 116px;
  height: 116px;
  margin: 5px;
  border: none;
}

.tab_banner_con {
  display: block;
  position: relative;
}

.tab_banner_con:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 9;
}

.tab_banner_con img {
  display: block;
  width: 100%;
}

.tab_banner_con .tab_banner_close_btn {
  z-index: 10;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.tab_banner_con .tab_banner_close_btn img {
  display: block;
  width: 20px;
  height: 20px;
}

.bottom_reply_loading_con {
  text-align: center;
}

.loader {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
  animation: typing 1s linear infinite alternate;
  opacity: .5;
}

@-webkit-keyframes typing {
  0% {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -16px 0px 0px 0px #000000, 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -16px 0px 0px 0px #000000, 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }

  45% {
    background-color: #000000;
    -webkit-box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }

  75% {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px #000000;
    box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px #000000;
  }

  100% {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }
}

@keyframes typing {
  0% {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -16px 0px 0px 0px #000000, 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -16px 0px 0px 0px #000000, 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }

  45% {
    background-color: #000000;
    -webkit-box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }

  75% {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px #000000;
    box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px #000000;
  }

  100% {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -16px 0px 0px 0px rgba(0, 0, 0, 0.4), 16px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }
}

.live_list {
  width: 100%;
  height: 40px;
  background-color: #212121;
  font-size: 12px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.live_list_block {
  display: inline-block;
  margin: 10px 5px 0;
  max-width: 72px;
  height: 20px;
  line-height: 20px;
  border: #ababab solid 1px;
  padding: 0 10px;
  border-radius: 3px;
  color: #ababab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.live_list_active {
  border-color: #ab311c;
  color: #ab311c;
  cursor: default;
}

.fade_in {
  -webkit-animation: fadein ease-in-out 0.3s;
  animation: fadein ease-in-out 0.3s;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.emoji_pop_con {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 100;
}

.emoji_pop {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-position: center;
  background-size: 32px;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.new_emoji .emoji_pop {
  -webkit-animation: emoji_pop_anime ease-in-out 5s;
  animation: emoji_pop_anime ease-in-out 5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes emoji_pop_anime {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(0.3);
    transform: translate3d(0, 0, 0) scale(0.3);
  }

  4% {
    -webkit-transform: translate3d(0, -50px, 0) scale(0.3);
    transform: translate3d(0, -50px, 0) scale(0.3);
  }

  8% {
    -webkit-transform: translate3d(0, -50px, 0) scale(1.2);
    transform: translate3d(0, -50px, 0) scale(1.2);
  }

  12% {
    -webkit-transform: translate3d(0, -50px, 0) scale(1);
    transform: translate3d(0, -50px, 0) scale(1);
  }

  90% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 0;
  }
}

@keyframes emoji_pop_anime {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(0.3);
    transform: translate3d(0, 0, 0) scale(0.3);
  }

  4% {
    -webkit-transform: translate3d(0, -50px, 0) scale(0.3);
    transform: translate3d(0, -50px, 0) scale(0.3);
  }

  8% {
    -webkit-transform: translate3d(0, -50px, 0) scale(1.2);
    transform: translate3d(0, -50px, 0) scale(1.2);
  }

  12% {
    -webkit-transform: translate3d(0, -50px, 0) scale(1);
    transform: translate3d(0, -50px, 0) scale(1);
  }

  90% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 0;
  }
}

.emoji_pop_con {
  -webkit-transition: -webkit-transform ease 5s;
  transition: -webkit-transform ease 5s;
  transition: transform ease 5s;
  transition: transform ease 5s, -webkit-transform ease 5s;
}

.add_emoji .emoji_pop {
  -webkit-animation: emoji_pop_anime2 cubic-bezier(0.36, 0.18, 0.47, 0.82) 4s;
  animation: emoji_pop_anime2 cubic-bezier(0.36, 0.18, 0.47, 0.82) 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.add_emoji img {
  -webkit-animation: add_emoji_imgscale_anime linear 4s;
  animation: add_emoji_imgscale_anime linear 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes emoji_pop_anime2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0.4);
    transform: translate3d(0, 0, 0) scale(0.4);
    opacity: 0;
  }

  4% {
    -webkit-transform: translate3d(0, -10px, 0) scale(1);
    transform: translate3d(0, -10px, 0) scale(1);
    opacity: 1;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}

@keyframes emoji_pop_anime2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0.4);
    transform: translate3d(0, 0, 0) scale(0.4);
    opacity: 0;
  }

  4% {
    -webkit-transform: translate3d(0, -10px, 0) scale(1);
    transform: translate3d(0, -10px, 0) scale(1);
    opacity: 1;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}

@-webkit-keyframes add_emoji_imgscale_anime {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  10% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes add_emoji_imgscale_anime {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  10% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.emoji_pop_sunlight {
  position: absolute;
  width: 70px;
  height: 70px;
  left: -19px;
  top: -19px;
  z-index: 1;
}

.emoji_pop_sunlight_line {
  position: absolute;
  top: 15px;
  left: 34px;
  width: 2px;
  height: 20px;
}

.emoji_pop_sunlight_line:after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background-color: #fb4747;
  content: "";
  -webkit-animation: emoji_pop_sunlight_line_anime ease 1.2s;
  animation: emoji_pop_sunlight_line_anime ease 1.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.emoji_pop_sunlight_line:nth-child(1) {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(2) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(4) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(5) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(6) {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(7) {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.emoji_pop_sunlight_line:nth-child(8) {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

@-webkit-keyframes emoji_pop_sunlight_line_anime {
  0% {
    opacity: 0;
    height: 20px;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  1% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    height: 0px;
    -webkit-transform: translate(0, 55px);
    transform: translate(0, 55px);
  }
}

@keyframes emoji_pop_sunlight_line_anime {
  0% {
    opacity: 0;
    height: 20px;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  1% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    height: 0px;
    -webkit-transform: translate(0, 55px);
    transform: translate(0, 55px);
  }
}

.emoji_pop_img,
.emoji_avatar_img {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 2;
}

.emoji_pop_img {
  opacity: 0;
  -webkit-animation: emoji_fadein_anime ease-in-out 0.5s;
  animation: emoji_fadein_anime ease-in-out 0.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.emoji_avatar_img {
  -webkit-animation: emoji_fadein_anime ease-in-out 0.5s;
  animation: emoji_fadein_anime ease-in-out 0.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes emoji_fadein_anime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes emoji_fadein_anime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.hudong_left_block,
.hudong_right_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 15px;
}

.hudong_avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: white;
  margin-left: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hudong_avatar:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  border: rgba(0, 0, 0, 0.1) solid 1px;
}

.hudong_info {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 14px;
}

.hudong_title {
  position: absolute;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 25px;
  line-height: 25px;
  color: #ababab;
}

.hudong_title>div {
  display: block;
  line-height: 25px;
  margin: 0 0 0 10px;
}

.hudong_title:after {
  display: block;
  content: "";
  clear: both;
}

.hudong_name {
  height: 25px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hudong_mark {
  width: 12px;
}

.hudong_mark:empty {
  display: none;
}

.hudong_mark img {
  display: block;
  margin-top: 7px;
  width: 12px;
  height: 12px;
}

.hudong_time {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  min-width: 22px;
  height: 25px;
  font-size: 11px;
  line-height: 28px;
}

.hudong_pop {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  margin-top: 30px;
  padding: 12px;
  font-size: 14px;
  border-radius: 6px;
  line-height: 1.64em;
  color: #3b3b3b;
  background-color: white;
}

.hudong_pop:before {
  position: absolute;
  left: -10px;
  top: 10px;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid white;
  border-right: 5px solid white;
  border-left: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.hudong_link {
  display: inline-block;
  width: 32px;
  height: 16px;
  margin: 0 5px;
  line-height: 16px;
  font-size: 10px;
  border-radius: 4px;
  text-align: center;
  background-color: #00abff;
  text-decoration: none;
  color: white;
}

.hudong_reply_con {
  position: relative;
  margin-top: 10px;
  padding-left: 10px;
}

.hudong_reply_con:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #e8e8e8;
}

.hudong_reply_block {
  margin-top: 10px;
  word-break: break-all;
}

.hudong_reply_block_name {
  font-size: 14px;
  line-height: 14px;
  color: #ababab;
}

.hudong_reply_block_desc {
  margin-top: 4px;
}

.huodong_pai {
  font-size: 10px;
}

.hudong_right_block .hudong_name {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
  text-align: right;
}

.hudong_right_block .hudong_avatar {
  margin-left: 0;
  margin-right: 14px;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.hudong_right_block .hudong_info {
  margin-right: 0;
  margin-left: 14px;
}

.hudong_right_block .hudong_title {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.hudong_right_block .hudong_title>div {
  margin: 0 10px 0 0;
}

.hudong_right_block .hudong_mark {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}

.hudong_right_block .hudong_time {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.hudong_right_block .hudong_pop {
  margin-left: 0;
  margin-right: 10px;
  color: white;
  background-color: #00abff;
}

.hudong_right_block .hudong_pop:before {
  left: auto;
  right: -10px;
  border-top: 5px solid #00abff;
  border-left: 5px solid #00abff;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.hudong_right_block .hudong_link {
  background-color: white;
  color: #00abff;
}

.hudong_right_block .hudong_reply_block_name {
  color: #b3dfff;
}

.huodong_floor {
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  min-width: 50px;
  margin-left: 10px;
  font-size: 10px;
  color: #ababab;
}

.to_form_block {
  display: block;
  line-height: 27px;
  max-width: 80%;
  margin: 10px auto;
  text-align: center;
}

.to_form_block .tf_block_in {
  display: inline-block;
  vertical-align: middle;
  padding: 0 13px;
  font-size: 12px;
  color: white;
  border-radius: 14px;
  background-color: #bfbfbf;
}