.room-top {
  width: 10rem;
  height: 1.85rem;
  position: absolute;
  left: 0;
  top: 0.1rem;
  z-index: 5;
  transform: translate3d(0, 0, 0);
}
.room-mc-box {
  width: 3.7rem;
  height: 0.8rem;
  background: rgba(255, 111, 176, 0.4);
  border-radius: 1rem;
  border: 0.06rem solid #FF8BC2;
  position: relative;
  top: 0.1rem;
  left: 0.2rem;
}
.room-mc-face {
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 50%;
  position: absolute;
  top: 0.02rem;
  left: 0.02rem;
  z-index: 50;
}
.room-mc-name {
  font-size: 0.3rem;
  height: 0.4rem;
  width: 3rem;
  color: #FFFFFF;
  text-indent: 0.9rem;
  padding-top: 0.03rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.like-icon {
  width: 0.52rem;
  position: absolute;
  right: 0.15rem;
  top: 0.19rem;
}
.room-rich-num {
  width: 3rem;
  font-size: 0.3rem;
  position: relative;
  top: -0.03rem;
  color: #fff;
  text-indent: 0.8rem;
  transform: scale(0.9);
}
.room-rich-num > img {
  width: 0.27rem;
  vertical-align: middle;
  margin-right: 0.08rem;
  margin-top: -0.05rem;
}
.room-user-list {
  width: 3.1rem;
  height: 0.8rem;
  position: absolute;
  right: 0;
  top: 0.15rem;
}
.room-user-ul-box {
  width: 2rem;
  height: 0.8rem;
  overflow-x: scroll;
}
.room-user-ul {
  height: 0.8rem;
}
.room-user-ul li {
  width: 1rem;
  height: 0.8rem;
  float: left;
  line-height: 0.8rem;
  font-size: 0;
  text-align: center;
  overflow: hidden;
}
.room-user-ul li img {
  vertical-align: middle;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}
.room-close {
  width: 0.37rem;
  position: absolute;
  right: 0.4rem;
  top: 0.24rem;
  z-index: 10;
}
.room-hot-box {
  float: left;
  position: relative;
  margin-left: 0.2rem;
  height: 0.58rem;
  padding-right: 0.2rem;
  background: linear-gradient(to right, #D46F70, #CF5E5D);
  border-radius: 1rem;
  border: 0.04rem solid #F7906A;
  line-height: 0.58rem;
  font-size: 0.3rem;
  color: #fff;
  text-indent: 0.65rem;
}
.room-hot-box > img {
  position: absolute;
  width: 0.35rem;
  left: 0.2rem;
  top: 0.08rem;
}
.rich-tips-box {
  height: 0.6rem;
  width: 10rem;
  position: absolute;
  top: 1.2rem;
}
.hot-list-box {
  position: relative;
  padding-right: 0.2rem;
  height: 0.62rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1rem;
  font-size: 0.3rem;
  color: #fff;
  float: left;
  margin-left: 0.2rem;
  line-height: 0.62rem;
  text-indent: 0.7rem;
}
.hot-list-box i {
  font-style: normal;
}
.hot-list-box img {
  width: 0.37rem;
  position: absolute;
  left: 0.15rem;
  top: 0.19rem;
}
.hot-list-box span {
  color: #A7A9AD;
  display: inline-block;
  text-indent: 0;
  transform: scaleY(1.5);
}
.guard-btn {
  height: 0.62rem;
  width: 1.72rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1rem;
  color: #fff;
  font-size: 0.3rem;
  line-height: 0.62rem;
  text-align: center;
  margin-left: 0.2rem;
  float: left;
}
.room-bottom {
  width: 10rem;
  height: 1.3rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
.gift-btn {
  width: 0.89rem;
  position: absolute;
  right: 0.45rem;
  top: 0.11rem;
}
.sound-btn {
  width: 0.89rem;
  position: absolute;
  right: 1.6rem;
  top: 0.11rem;
}
.msg-btn {
  width: 0.89rem;
  position: absolute;
  left: 0.32rem;
  top: 0.11rem;
}
.more-btn {
  width: 0.89rem;
  position: absolute;
  right: 2.73rem;
  top: 0.11rem;
}
.user-msg-box {
  width: 7.45rem;
  height: 4.5rem;
  bottom: 1.4rem;
  position: absolute;
  z-index: 200;
  left: 0.44rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
}
.user-msg-big {
  display: flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
}
.hot-list-layer {
  width: 10rem;
  height: 9.1rem;
  position: fixed;
  bottom: -9.1rem;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.2rem 0.2rem 0 0;
  z-index: 800;
  transition: 0.3s all;
}
.hot-list-layer-top {
  width: 10rem;
  height: 1.25rem;
  position: relative;
}
.hot-list-top-text1 {
  width: 2rem;
  height: 1.25rem;
  float: left;
  font-size: 0.35rem;
  color: #3B3B3B;
  line-height: 1.25rem;
  text-align: center;
}
.hot-list-top-text2 {
  width: 2.7rem;
  height: 1.25rem;
  float: left;
  color: #282828;
  font-size: 0.35rem;
  line-height: 1.25rem;
  text-align: center;
}
.hot-list-top-text2 span {
  color: #DF448A;
}
.hot-close {
  position: absolute;
  color: #999999;
  font-size: 0.46rem;
  transform: scaleX(1.4);
  right: 0.5rem;
  top: 0.3rem;
}
.hot-list-ul {
  position: relative;
  height: 7.8rem;
  width: 10rem;
  overflow: scroll;
}
.hot-list-ul li {
  position: relative;
  height: 1.65rem;
}
.hot-list-ul .hot-list-li-box1 {
  position: relative;
  width: 1.1rem;
  height: 1.65rem;
  float: left;
  text-align: center;
  line-height: 1.65rem;
  color: #5A5A5A;
  font-size: 0.4rem;
}
.hot-list-ul .hot-list-li-box2 {
  position: relative;
  width: 8.9rem;
  height: 1.65rem;
  float: left;
}
.hot-list-ul .hot-li-face {
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 50%;
  position: absolute;
  left: 0.1rem;
  top: 0.285rem;
}
.hot-list-ul .hot-li-p1 {
  color: #303030;
  font-size: 0.35rem;
  text-indent: 1.4rem;
  padding-top: 0.33rem;
}
.hot-list-ul .hot-li-p2 {
  color: #585858;
  font-size: 0.3rem;
  text-indent: 1.4rem;
  line-height: 0.6rem;
}
.hot-list-ul .hot-li-p2 > img {
  vertical-align: middle;
  width: 0.4rem;
  margin-top: -0.05rem;
  margin-right: 0.1rem;
}
.layer-shadow {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  display: none;
}
.rich-list-layer {
  transition: 0.3s all;
  width: 10rem;
  height: 9.1rem;
  position: fixed;
  bottom: -9.1rem;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.2rem 0.2rem 0 0;
  z-index: 800;
}
.rich-list-top {
  width: 10rem;
  height: 1.3rem;
  position: relative;
}
.rich-list-top-text1 {
  height: 1.3rem;
  width: 3.95rem;
  float: left;
  line-height: 1.3rem;
  font-size: 0.35rem;
  color: #2B2B2B;
  text-align: center;
}
.rich-list-top-text1 span {
  color: #8F60EE;
  margin-left: 0.1rem;
}
.rich-list-top-text1 span > img {
  vertical-align: middle;
  width: 0.4rem;
  margin-top: -0.05rem;
}
.rich-list-top-text2 {
  width: 2.55rem;
  height: 1.3rem;
  float: left;
  line-height: 1.3rem;
  font-size: 0.35rem;
  color: #2B2B2B;
  text-align: center;
}
.rich-list-top-text2 span {
  color: #DE3682;
}
.rich-close {
  position: absolute;
  color: #999999;
  font-size: 0.46rem;
  transform: scaleX(1.4);
  right: 0.5rem;
  top: 0.3rem;
}
.rich-time-box {
  height: 0.9rem;
  width: 10rem;
  position: relative;
}
.rich-time-ul {
  width: 6.3rem;
  height: 0.9rem;
  margin: 0 auto;
}
.rich-time-ul li {
  width: 2.1rem;
  height: 0.9rem;
  float: left;
  line-height: 0.9rem;
  text-align: center;
  font-size: 0.35rem;
  color: #6C6B6C;
}
.rich-time-ul .rich-time-click {
  color: #E25896;
}
.rich-list-ul {
  width: 10rem;
  height: 6.8rem;
  position: relative;
  overflow: scroll;
}
.rich-list-ul li {
  height: 1.7rem;
}
.rich-list-ul p {
  line-height: 5rem;
  text-align: center;
  font-size: 0.45rem;
  color: #6C6B6C;
}
.rich-list-ul .rich-list-li1 {
  width: 1.1rem;
  height: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  float: left;
  position: relative;
  color: #545454;
  font-size: 0.4rem;
}
.rich-list-ul .rich-list-li1 > img {
  width: 0.42rem;
  vertical-align: middle;
}
.rich-list-ul .rich-list-li2 {
  width: 8.9rem;
  height: 1.7rem;
  float: left;
  position: relative;
}
.rich-list-ul .rich-li-face {
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 50%;
  position: absolute;
  left: 0.1rem;
  top: 0.285rem;
}
.rich-list-ul .rich-li-p1 {
  color: #303030;
  font-size: 0.35rem;
  text-indent: 1.4rem;
  padding-top: 0.33rem;
}
.rich-list-ul .rich-li-p2 {
  color: #585858;
  font-size: 0.3rem;
  text-indent: 1.4rem;
  line-height: 0.6rem;
}
.rich-list-ul .rich-li-p2 > img {
  vertical-align: middle;
  width: 0.4rem;
  margin-top: -0.05rem;
  margin-right: 0.1rem;
}
.guard-layer {
  height: 11.3rem;
  width: 10rem;
  position: fixed;
  bottom: -11.3rem;
  left: 0;
  z-index: 800;
  transition: 0.3s all;
}
.guard-layer-content {
  width: 10rem;
  height: 10.54rem;
  background: url(../images/guard-layer.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.guard-layer-top {
  width: 7.67rem;
  height: 2.57rem;
  background: url(../images/guard-layer-top.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  left: 50%;
  margin-left: -3.835rem;
}
.guard-layer-btn {
  width: 4.41rem;
  height: 1rem;
  background: url(../images/guard-layer-btn.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -2.205rem;
  bottom: 1rem;
}
.guard-layer-btn-yes {
  background: url(../images/guard-layer-btn2.png) no-repeat;
  background-size: 100% 100%;
}
.guard-face {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  position: absolute;
  border: 0.1rem solid #FEE5F1;
  left: 0.3rem;
  top: 0.4rem;
}
.guard-top-p1 {
  text-indent: 1.8rem;
  font-size: 0.33rem;
  line-height: 0.6rem;
  color: #fff;
  padding-top: 0.5rem;
}
.guard-top-p1 > img {
  width: 0.35rem;
  vertical-align: middle;
  margin-top: -0.13rem;
  margin-right: 0.1rem;
}
.guard-top-p1 > span {
  color: #FA5AA0;
}
.guard-top-p2 {
  text-indent: 1.8rem;
  font-size: 0.33rem;
  line-height: 0.6rem;
  color: #fff;
}
.gift-layer {
  height: 7.8rem;
  width: 10rem;
  position: fixed;
  bottom: -7.8rem;
  z-index: 800;
  left: 0;
  transition: 0.3s all;
}
.gift-layer-top {
  position: relative;
  height: 1.3rem;
  width: 10rem;
  border-radius: 0.3rem 0.3rem 0 0;
  background: linear-gradient(to right, #E43984, #E538C1);
}
.gift-layer-top .gift-layer-ul {
  width: 7.2rem;
  height: 1.3rem;
}
.gift-layer-top .gift-layer-ul li {
  width: 1.8rem;
  height: 1.3rem;
  float: left;
  line-height: 1.3rem;
  text-align: center;
  color: #BDC2BF;
  font-size: 0.35rem;
}
.gift-layer-top .gift-layer-ul .gift-layer-click {
  color: #FEFBFC;
}
.gift-layer-content {
  width: 10rem;
  height: 6.5rem;
  background: rgba(0, 0, 0, 0.8);
}
.gift-layer-diamond-box {
  padding-right: 0.2rem;
  height: 0.66rem;
  background: #9F2886;
  border-radius: 1rem;
  position: absolute;
  top: 0.37rem;
  right: 0.25rem;
  font-size: 0.35rem;
  text-indent: 0.85rem;
  line-height: 0.7rem;
  color: #FFFFFF;
}
.gift-layer-diamond-box img {
  position: absolute;
}
.gift-layer-diamond-box .gift-diamond {
  width: 0.35rem;
  position: absolute;
  left: 0.25rem;
  top: 0.1rem;
}
.gift-layer-diamond-box .gift-add {
  width: 0.293rem;
  position: absolute;
  left: 0.43rem;
  top: 0.03rem;
}
.level-box {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0;
  position: relative;
}
.level-box .level-icon {
  width: 1rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.level-bar-content {
  width: 8.4rem;
  height: 0.15rem;
  border-radius: 1rem;
  position: absolute;
  top: 0.3rem;
  background: #666666;
  left: 1.4rem;
}
.level-my-bar {
  height: 0.15rem;
  width: 0%;
  background: linear-gradient(to right, #E03D85, #F160AD);
  border-radius: 1rem;
  transition: 0.2s all;
}
.gift-ul {
  height: 5.6rem;
  width: 10rem;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.gift-ul > div {
  text-align: center;
}
.gift-ul > div img {
  width: 3rem;
}
.gift-ul > div p {
  color: #898989;
  font-size: 0.35rem;
}
.gift-ul .subimg {
  width: 0.9rem;
  left: 0.2rem;
  position: absolute;
}
.gift-ul li {
  position: relative;
  width: 2.5rem;
  height: 2.8rem;
  float: left;
  text-align: center;
  font-size: 0;
}
.gift-ul li > img {
  width: 1.5rem;
}
.gift-ul .gift-p1 {
  position: absolute;
  bottom: 0.9rem;
  width: 2.5rem;
  text-align: center;
  font-size: 0.3rem;
  color: #989897;
}
.gift-ul .gift-p2 {
  width: 2.5rem;
  font-size: 0.3rem;
  color: #EF5399;
  text-align: center;
  position: absolute;
  bottom: 0.45rem;
}
.gift-ul .gift-p2 > img {
  vertical-align: middle;
  margin-top: -0.07rem;
  width: 0.3rem;
  margin-right: 0.1rem;
  margin-left: -0.1rem;
}
.user-msg {
  font-size: 0;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  display: block;
}
.user-msg .user-level-icon {
  margin-top: -0.05rem;
}
.user-msg-content {
  line-height: 0.63rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.12rem;
  font-size: 0.33rem;
  position: relative;
  color: #fff;
  padding-left: 0.15rem;
  display: inline-block;
  padding-right: 0.25rem;
}
.user-msg-content .user-msg-name {
  color: #5BE9EE;
}
.user-msg-content .user-msg-level {
  background: rgba(255, 255, 255, 0.3);
  width: 0.43rem;
  height: 0.43rem;
  line-height: 0.4rem;
  text-align: center;
  border-radius: 50%;
  margin-left: 0.1rem;
  display: inline-block;
}
.user-msg-content .user-msg-level span {
  font-size: 0.3rem;
  vertical-align: middle;
  display: inline-block;
  transform: scale(0.8);
  line-height: 0.43rem;
  width: 0.43rem;
  height: 0.43rem;
}
.system-msg {
  font-size: 0.33rem;
  line-height: 0.63rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  color: #fff;
}
.system-msg > span {
  color: #5BE9EE;
  margin-right: 0.1rem;
}
.video-box {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}
.video-box video {
  width: 10rem;
  min-height: 103%;
}
.touch-box {
  position: fixed;
  z-index: 100;
  width: 10rem;
  left: 0;
  bottom: 3rem;
}
.room-bg {
  width: 100vw;
  position: fixed;
  top: 0rem;
  height: 99vh;
  overflow: hidden;
}
.more-layer {
  height: 4.4rem;
  width: 10rem;
  position: fixed;
  bottom: -4.4rem;
  transition: 0.3s all;
  left: 0;
  background: rgba(255, 255, 255, 0.88);
  z-index: 800;
}
.more-layer div {
  height: 1.45rem;
  width: 10rem;
  border-bottom: 0.05rem solid #CDCDCD;
  color: #181818;
  font-size: 0.37rem;
  text-align: center;
  line-height: 1.45rem;
  font-weight: 700;
}
.more-layer div:last-child {
  border-bottom: 0;
}
.task-layer {
  width: 10rem;
  height: 8.55rem;
  background: #fff;
  border-radius: 0.3rem 0.3rem 0 0;
  position: fixed;
  bottom: -8.55rem;
  left: 0;
  z-index: 800;
  transition: 0.3s all;
}
.task-layer-top {
  height: 1.45rem;
  width: 8.95rem;
  margin: 0 auto;
  border-bottom: 1px solid #EBEBEB;
  line-height: 1.45rem;
  color: #282828;
  font-size: 0.38rem;
}
.task-layer-ul {
  width: 8.95rem;
  height: 7.1rem;
  margin: 0 auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.task-layer-ul li {
  position: relative;
  width: 8.95rem;
  height: 1.85rem;
}
.task-layer-ul .task-p1 {
  color: #282828;
  font-size: 0.35rem;
  line-height: 0.55rem;
  padding-top: 0.35rem;
}
.task-layer-ul .task-p1 span {
  color: #CE74F0;
  margin-left: 0.1rem;
}
.task-layer-ul .task-p1 span img {
  width: 0.5rem;
  vertical-align: middle;
  margin-top: -0.1rem;
  margin-left: -0.2rem;
}
.task-layer-ul .task-p2 {
  color: #A5A5A5;
  font-size: 0.3rem;
  padding-top: 0.1rem;
}
.task-get-btn {
  width: 1.9rem;
  height: 0.75rem;
  line-height: 0.75rem;
  text-align: center;
  font-size: 0.33rem;
  color: #fff;
  background: #E53985;
  border-radius: 1rem;
  position: absolute;
  right: 0;
  top: 0.53rem;
}
.task-get-btn1 {
  width: 1.8rem;
  height: 0.65rem;
  line-height: 0.65rem;
  border: 0.05rem solid #E11C73;
  background: #FEE5F0;
  color: #E32E7F;
}
.task-get-btn3 {
  background: #ccc;
}
.exc-layer {
  width: 10rem;
  height: 6.45rem;
  background: #FFFFFF;
  border-radius: 0.3rem 0.3rem 0 0;
  position: fixed;
  bottom: -6.45rem;
  left: 0;
  z-index: 800;
  transition: 0.3s all;
}
.exc-diamond-layer {
  width: 10rem;
  height: 6.45rem;
  background: #FFFFFF;
  border-radius: 0.3rem 0.3rem 0 0;
  position: fixed;
  bottom: -6.45rem;
  left: 0;
  z-index: 800;
  transition: 0.3s all;
}
.exc-diamond-top {
  width: 9.6rem;
  border-bottom: 1px solid #EBEBEB;
  margin: 0 auto;
  height: 1.3rem;
  line-height: 1.3rem;
  text-align: center;
  color: #989898;
  font-size: 0.35rem;
}
.exc-btn {
  color: #E43381;
  font-size: 0.4rem;
  position: absolute;
  right: 0.5rem;
  top: 0.38rem;
}
.exc-ul {
  width: 9.5rem;
  margin: 0 auto;
  position: relative;
  margin-top: 0.4rem;
}
.exc-ul li {
  width: 3rem;
  height: 1.58rem;
  background: #F6F6F6;
  border-radius: 0.2rem;
  float: left;
  padding: 1px;
  margin-right: 0.15rem;
  margin-bottom: 0.15rem;
}
.exc-ul li .exc-li-p1 {
  font-size: 0.37rem;
  color: #8D8D8D;
  text-align: center;
  line-height: 0.6rem;
  padding-top: 0.2rem;
}
.exc-ul li .exc-li-p1 > img {
  vertical-align: middle;
  width: 0.35rem;
  margin-top: -0.1rem;
}
.exc-ul li .exc-li-p2 {
  font-size: 0.3rem;
  line-height: 0.55rem;
  color: #A5A5A5;
  text-align: center;
}
.exc-ul li:nth-child(3n) {
  margin-right: 0;
}
.exc-ul .exc-li-click {
  padding: 0;
  border: 1px solid #E85A98;
}
.exc-tips {
  font-size: 0.3rem;
  width: 10rem;
  text-align: center;
  color: #666666;
  margin-top: 0.25rem;
}
.exc-tips img {
  width: 0.35rem;
  vertical-align: middle;
}
.keyboard-box {
  height: 1.2rem;
  width: 10rem;
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 1000;
}
.keyboard-input {
  height: 1.2rem;
  width: 8rem;
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  font-size: 0.37rem;
}
.keyboard-btn {
  width: 1.5rem;
  height: 1.2rem;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.35rem;
  line-height: 1.2rem;
  text-align: center;
  color: #E43985;
}
.room-gift-box {
  position: absolute;
  width: 7.3rem;
  height: 5.7rem;
  top: 3.5rem;
  overflow: hidden;
  pointer-events: none;
}
.gift-bar-box {
  height: 1rem;
  width: 8rem;
  position: relative;
  margin-left: 0.25rem;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  border-radius: 1rem 0 0 1rem;
  margin-bottom: 0.5rem;
  margin-top: 0.1rem;
  transition: 0.35s all;
  transform: translateX(7.5rem);
  opacity: 0;
}
.gift-bar-box-go {
  animation: trackGo 0.55s forwards 1;
}
.gift-bar-box-out {
  animation: trackOut 0.55s forwards 1;
}
@keyframes trackGo {
  0% {
    transform: translateX(7.5rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem);
    opacity: 1;
  }
}
@keyframes trackOut {
  0% {
    transform: translateX(0rem);
    opacity: 1;
  }
  100% {
    transform: translateX(-7.5rem);
    opacity: 0;
  }
}
.gift-bar-floor1 {
  width: 0.55rem;
  height: 1.1rem;
  position: absolute;
  top: -0.05rem;
  left: -0.05rem;
  overflow: hidden;
}
.gift-bar-floor1 > div {
  width: 1rem;
  height: 1rem;
  border: 0.05rem solid #EDA0C5;
  border-radius: 50%;
}
.gift-bar-floor2 {
  height: 0.05rem;
  width: 5rem;
  position: absolute;
  top: -0.05rem;
  left: 0.5rem;
  background: pink;
  background: linear-gradient(to right, #EDA0C5, #EDA0C5, #CE729B, rgba(206, 114, 155, 0.7), rgba(206, 114, 155, 0));
}
.gift-bar-floor3 {
  height: 0.05rem;
  width: 5rem;
  position: absolute;
  bottom: -0.05rem;
  left: 0.5rem;
  background: linear-gradient(to right, #EDA0C5, #EDA0C5, #CE729B, rgba(206, 114, 155, 0.7), rgba(206, 114, 155, 0));
}
.gift-face {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position: absolute;
}
.gift-bar-p1 {
  font-size: 0.3rem;
  color: #fff;
  position: absolute;
  left: 1.2rem;
  top: 0.1rem;
  width: 2.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.gift-bar-p2 {
  width: 2.5rem;
  font-size: 0.3rem;
  color: #fff;
  position: absolute;
  left: 1.1rem;
  bottom: 0.1rem;
  transform: scale(0.9);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.gift-bar-icon-box {
  position: absolute;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  left: 3.7rem;
  top: -0.05rem;
}
.gift-bar-icon-box .gift-bar-icon {
  font-size: 0;
  width: 1rem;
  vertical-align: middle;
}
.gift-bar-num {
  color: #E55A96;
  font-weight: 700;
  font-size: 0.63rem;
  position: absolute;
  left: 4.8rem;
  top: 0.1rem;
  text-shadow: 0.03rem 0.025rem 0.02rem #fff, -0.03rem -0.03rem 0.02rem #fff, 0.03rem -0.03rem 0.02rem #fff, -0.03rem 0.025rem 0.02rem #fff;
}
.room-big-giftBox {
  width: 10rem;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  z-index: 500;
  position: absolute;
  top: 0rem;
  font-size: 0;
  pointer-events: none;
  overflow: hidden;
}
.room-big-giftBox .gift-webp {
  vertical-align: middle;
  width: 10rem;
}
.room-big-text-content {
  position: absolute;
  width: 10rem;
  line-height: 0.72rem;
  top: 66vh;
  text-align: center;
}
.room-big-text-content > div {
  position: relative;
  display: inline-block;
  height: 0.72rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border: 0.02rem solid #FE64A6;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1rem;
  text-align: center;
  font-size: 0.35rem;
  color: #fff;
  text-indent: 0.43rem;
}
.room-big-text-content > div > img {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}
.room-big-content {
  display: none;
}
.new-msg {
  display: none;
  position: absolute;
  width: 2rem;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 0.75rem;
  color: #BF5188;
  font-size: 0.35rem;
  border-radius: 1rem;
  left: 0.4rem;
  bottom: 1.5rem;
  z-index: 250;
}
.layer-space-box {
  height: 8.8rem;
  position: relative;
  width: 8rem;
  display: none;
}
.layer-space {
  position: absolute;
  bottom: 0;
  width: 8rem;
  height: 8rem;
  background: #fff;
  border-radius: 0.2rem;
}
.layer-space-face {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  height: 1.8rem;
  width: 1.8rem;
  left: 50%;
  margin-left: -0.9rem;
}
.layer-space-p1 {
  color: #333333;
  font-size: 0.35rem;
  text-align: center;
  padding-top: 1.2rem;
  position: relative;
  z-index: 5;
}
.layer-space-p2 {
  color: #AAAAAA;
  font-size: 0.3rem;
  text-align: center;
  padding-top: 0.15rem;
  position: relative;
  z-index: 5;
}
.layer-space-icon .space-vip {
  width: 1.25rem;
  vertical-align: middle;
  margin-right: 0.15rem;
}
.layer-space-icon {
  width: 7.8rem;
  height: 0.875rem;
  line-height: 0.875rem;
  text-align: center;
  margin-top: 0.1rem;
  position: relative;
  z-index: 5;
}
.layer-space-icon .space-sex-box {
  height: 0.5rem;
  max-width: 1rem;
  padding-right: 0.125rem;
  padding-left: 0.125rem;
  font-size: 0.35rem;
  text-align: center;
  line-height: 0.5rem;
  border: 1px solid #FFA3B9;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.5rem;
  color: #FFAABE;
}
.space-sex-box2 {
  border: 1px solid #A1C5FC !important;
  color: #A1C5FC !important;
}
.layer-space-icon .space-medals-img {
  width: 0.75rem;
  vertical-align: middle;
  margin-top: -0.06rem;
}
.layer-space-tag {
  text-align: center;
  height: 0.875rem;
  line-height: 0.875rem;
  font-size: 0;
  margin-top: 0.2rem;
}
.layer-space-tag span {
  display: inline-block;
  font-size: 0.3rem;
  color: #E74E8F;
  width: 1.35rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border: 1px solid #E43582;
  border-radius: 0.1rem;
  margin-right: 0.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.space-text {
  width: 7.4rem;
  height: 0.84rem;
  margin: 0 auto;
  background: url(../images/space-text.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.3rem;
  text-shadow: 1px 1px 1px #d26ac0;
  text-align: center;
  line-height: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.space-num-ul li {
  width: 2rem;
  height: 1.9rem;
  float: left;
  position: relative;
  font-size: 0.3rem;
  text-align: center;
}
.space-num-ul li img {
  height: 0.4rem;
  vertical-align: middle;
  margin-top: -0.05rem;
}
.space-num-ul li p {
  height: 0.52rem;
  line-height: 0.52rem;
}
.space-num-ul li p:nth-child(1) {
  margin-top: 0.4rem;
}
.space-num-ul li p:nth-child(2) {
  color: #AAAAAA;
}
.space-bottom-box {
  width: 8rem;
  height: 1.1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #E5E5E5;
}
.space-bottom-box .space-bottom-ul {
  width: 8rem;
  height: 0.32rem;
  padding-top: 0.4rem;
}
.space-bottom-ul li {
  float: left;
  font-size: 0.3rem;
  line-height: 0.32rem;
  width: 2.62rem;
  border-right: 1px solid #E5E5E5;
  text-align: center;
  cursor: pointer;
}
.layer-space-icon .space-sex-box > img {
  width: 0.2rem;
  vertical-align: middle;
  margin-top: -0.04rem;
  margin-right: 0.08rem;
}
.guard-show-box {
  height: 17.6rem;
  width: 10rem;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 50;
  display: none;
}
.guard-show-box .guard-show-webp {
  width: 10rem;
}
.guard-show-box .guard-show-face {
  position: absolute;
  width: 1.94rem;
  height: 1.94rem;
  border-radius: 50%;
  top: 7.97rem;
  left: 50%;
  margin-left: -0.95rem;
}
.guard-name {
  width: 10rem;
  text-align: center;
  font-size: 0.5rem;
  position: absolute;
  color: #FCF2AE;
  top: 10.41rem;
  font-weight: 700;
}
.guard-tips {
  width: 7.22rem;
  position: absolute;
  left: 50%;
  margin-left: -3.61rem;
  top: 11.5rem;
}
.room-secret-bg {
  width: 10rem;
  height: 100vh;
  line-height: 100vh;
  overflow: hidden;
  font-size: 0;
  top: 0;
  left: 0;
  position: absolute;
}
.room-secret-bg img {
  vertical-align: middle;
  width: 20rem;
  height: 20rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10rem;
  margin-top: -10rem;
  filter: blur(0.4rem);
}
.room-secret-shadow {
  width: 10rem;
  height: 100vh;
  position: absolute;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  top: -1vw;
  left: 0;
}
.room-secret-mc {
  position: absolute;
  text-align: center;
  z-index: 10;
  width: 10rem;
  top: 5rem;
}
.room-secret-mc > img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.room-secret-mc p {
  color: #fff;
  font-size: 0.35rem;
  padding-top: 0.3rem;
}
.secret-diamond-box {
  height: 2.68rem;
  width: 6.57rem;
  left: 50%;
  top: 9rem;
  margin-left: -3.285rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.2rem;
  text-align: center;
  line-height: 2.68rem;
  position: absolute;
  z-index: 10;
  color: #E45D9A;
  font-size: 0.55rem;
  font-weight: 700;
}
.secret-diamond-box img {
  width: 0.4rem;
  vertical-align: middle;
  margin-top: -0.14rem;
  margin-right: 0.1rem;
}
.secret-btn {
  height: 1.3rem;
  line-height: 1.3rem;
  text-align: center;
  width: 8.35rem;
  position: absolute;
  z-index: 10;
  background: #D34784;
  border-radius: 1rem;
  color: #fff;
  font-size: 0.45rem;
  left: 50%;
  margin-left: -4.175rem;
  bottom: 1.8rem;
}
.secret-tips {
  font-size: 0.3rem;
  color: #fff;
  position: absolute;
  z-index: 10;
  bottom: 1.1rem;
  width: 10rem;
  text-align: center;
}
.more-btn-dian {
  width: 0.15rem !important;
  height: 0.15rem !important;
  position: absolute;
  background: red;
  border-radius: 50%;
  left: 7.05rem;
  top: 0.1rem;
  display: none;
}
.more-layer-btn1 .more-btn-dian {
  left: 5.4rem;
  top: 0.5rem;
}
.user-level-icon {
  width: 1.2rem;
  vertical-align: middle;
  margin-top: -0.12rem;
  margin-right: 0.15rem;
}
.room-out-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
.mc-out-mcBox {
  width: 3.7rem;
  height: 0.8rem;
  background: rgba(255, 111, 176, 0.4);
  border-radius: 1rem;
  border: 0.06rem solid #FF8BC2;
  position: relative;
  top: 0.1rem;
  left: 0.2rem;
}
.mc-out-tips {
  width: 10rem;
  position: absolute;
  z-index: 5;
  text-align: center;
  left: 0;
  bottom: 10rem;
}
.mc-out-tips p {
  color: #A3A3A3;
  font-size: 0.5rem;
  padding-top: 0.1rem;
}
.mc-out-tips > img {
  width: 1.65rem;
}
.more-mc-recommend {
  position: absolute;
  z-index: 5;
  left: 0.35rem;
  bottom: 2.5rem;
}
.more-mc-recommend > p {
  color: #fff;
  font-size: 0.4rem;
  margin-bottom: 0.3rem;
  text-indent: 0.25rem;
}
.more-mc-recommend-ul {
  width: 9.3rem;
  margin: 0 auto;
}
.more-mc-recommend-ul li {
  width: 2.9rem;
  height: 2.9rem;
  float: left;
  border-radius: 0.2rem;
  margin-left: 0.15rem;
  position: relative;
  overflow: hidden;
}
.more-mc-recommend-ul .more-mc-num {
  position: absolute;
  font-size: 0.3rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  padding: 0.08rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  right: 0.15rem;
  top: 0.18rem;
  z-index: 10;
}
.more-mc-recommend-ul .more-mc-face {
  width: 2.9rem;
  height: 2.9rem;
  position: absolute;
}
.more-mc-p1 {
  color: #fff;
  font-size: 0.3rem;
  position: absolute;
  height: 0.45rem;
  text-indent: 0.2rem;
  bottom: 0.45rem;
  z-index: 10;
}
.more-mc-p2 {
  color: #FFF;
  font-size: 0.3rem;
  position: absolute;
  bottom: 0.05rem;
  height: 0.45rem;
  left: -0.15rem;
  width: 3.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 0.2rem;
  transform: scale(0.9);
  z-index: 10;
}
.more-shadow {
  width: 2.9rem;
  height: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.room-out-mc-shadow {
  width: 20rem;
  position: absolute;
  top: 50%;
  margin-top: -10rem;
  height: 20rem;
  left: 50%;
  margin-left: -10rem;
  z-index: -1;
  filter: blur(0.4rem);
  opacity: 0.8;
}
.room-content-loading {
  display: none;
  width: 10rem;
  height: 100vh;
  position: fixed;
  z-index: 0;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
}
.room-content-loading .mc-tv {
  width: 3rem;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -1.5rem;
  margin-top: -3rem;
}
.room-content-loading > p {
  position: absolute;
  width: 10rem;
  text-align: center;
  font-size: 0.4rem;
  color: #fff;
  top: 50%;
  left: 50%;
  margin-left: -5rem;
}
.room-content-loading .loading-icon {
  position: absolute;
  width: 2.66rem;
  top: 47%;
  left: 50%;
  margin-left: -1.33rem;
  margin-top: -1.33rem;
}
.loading-face {
  position: absolute;
  display: none;
  width: 20rem;
  height: 20rem;
  z-index: -1;
  left: -5rem;
  top: 50%;
  margin-top: -10rem;
  opacity: 0.5;
  filter: blur(0.4rem);
}
.play-icon {
  display: none;
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  left: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
  z-index: 500;
}