/* pages/replyQuestions/replyQuestions.wxss */
.nocontent{
  text-align: center;
  color: #999;
  margin: 20rpx 0;
  
}
.container{
  background: #f2f2f2;
  height: 100vh;
}

/*聊天室  */
.chart-header{
  display: flex;
  padding: 0 32rpx ;
  font-size: 0;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
  height: 74px;
  box-sizing: border-box;
  background: #fff;
  align-items: center;
  justify-content: space-between;
}
.chart-header .btn{
  display: inline-flex;
  width: calc(33.33% - 16rpx);
  height: 80rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  border:1px solid #e8e8e8;
  border-radius: 5px;
  font-size: 30rpx;
  color: #666;
  position: relative;
  justify-content: center;
}

.chart-header .btn image{
  display: inline-block;
  width: 36rpx;
  height: 36rpx;
  vertical-align: middle;
  position: absolute;
  left: 16rpx;
  top: 22rpx;
}
.chart-header .btn.active{
  background: #62b1fe;
  color: #fff;
}
.chart-content{
  height: calc(100vh - 400rpx);
  padding:0rpx 0rpx 0rpx;
  box-sizing: border-box;
  background: #fff;
}
.chart-content2{
  height: calc(100vh - 630rpx);
}

.chart-content.long{
  height: calc(100vh - 250rpx);
}
.chart-content2.long{
  height: calc(100vh - 480rpx); 
}
.content-list{
  padding: 60rpx 32rpx 30rpx;
}
.content-list .times{
  font-size: 26rpx;
  color: #ccc;
  text-align: center;
  margin-bottom: 60rpx;
}
.content-list .avatar{
  width: 64rpx;
  height: 64rpx;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  z-index: 1000;
}
.content-list .ta,.content-list .wo{
  font-size: 0;
  margin-bottom: 60rpx;
  position: relative;
}
.content-list .c{
  display: inline-block;
  width: calc(100% - 64rpx);
  box-sizing: border-box;
  padding-left: 20rpx;
}
.content-list .username{
  font-size: 26rpx;
  color: #999;
}
.content-list .content{
  margin-top: 20rpx;
}
.content-list .content .article{
  width: 20rpx;
  height: 21rpx;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -4rpx;
  margin-right: 12rpx;
}
.content-list .content .bg{
  display: inline-block;
  background: #eeeff3;
  font-size: 30rpx;
  color: #333;
  padding: 20rpx;
  border-radius: 5px;
  word-break: break-word;
}
.content-list .content .bg view{
  min-height: 38rpx;
}
.content-list .content .pic_bg{
  display: inline-block;
  font-size: 30rpx;
  color: #333;
  padding: 20rpx 0;
  border-radius: 5px;
  word-break: break-word;
}
.content-list .content .pic_bg image,.content-list .content .pic_bg video{
  max-width:calc(100vw - 148rpx);
  border-radius: 5px;

}
.content-list .content .video{
  width: 160rpx;
  height: 160rpx;
  background: #62b1fe;
  border-radius: 5px;
  position: relative;
  display: inline-block
}
/* .content-list .wo .video{

} */
.content-list .content .video image{
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  left: 50rpx;
  top: 50rpx;
}
.content-list .content .video .num{
  color: #fff;
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  text-align: right;
  font-size: 24rpx;
}
.content-list .content .map{
  width:400rpx;
  border-radius: 5px;
  display: inline-block;
}
.content-list .content .map .top{
  background: #eeeff3;
  color: #333;
  padding:0 30rpx;
  line-height: 100rpx;
  height: 100rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 30rpx;
  border-radius: 5px 5px 0 0;
  text-align: left;

}
.content-list .content .map image{
  width: 400rpx;
  height:145.6rpx;
}
.content-list  .wo .bg{
  /* animation: show_content 0.1s 1s ease-out forwards; 
  overflow: hidden;
  position: relative;
  width: 0;
  height: 0;
  left: -80rpx;
  top: -60rpx;
  z-index: 1;
  background: transparent; */
  background: #75cdc1;
  color: #fff;
}
.content-list .content .navigator{
  background: #62b1fe !important;
  color: #fff;
}
.source{
  font-size: 24rpx;
  margin-bottom: 10rpx;
}
.content-list .wo .c{
  padding: 0 20rpx 0 0;
}
.content-list .wo{
  text-align: right;
  
}
.content-list  .wo .username{
  text-align: right;
}
.content-list  .wo .bg{
  text-align: left;
  /* animation: show_contentr 0.1s 1s ease-out forwards; 
  overflow: hidden;
  position: relative;
  width: 0;
  height: 0;
  right: -80rpx;
  top: -60rpx;
  z-index: 1;
  background: transparent; */
}
@keyframes show_content{
  0%{
    width: 0;
    height: 0;
    left: -80rpx;
    top: -60rpx;
    background: transparent;
  }
  100%{
    width: auto;
    height: auto;
    left: 0;
    top: 0;
    background: #eeeff3;
  }
}
@keyframes show_contentr{
  0%{
    width: 0;
    height: 0;
    right: -80rpx;
    top: -60rpx;
    background: transparent;
  }
  100%{
    width: auto;
    height: auto;
    right: 0;
    top: 0;
    background: #eeeff3;
  }
}
.chart-footer{
  box-sizing: border-box;
  border-top: 2rpx solid #e8e8e8;
  background: #f2f2f2;
  display: table;
  width: 100vw;
  padding: 24rpx 0 16rpx;
  line-height: 78rpx;
  position: relative;
}
.chart-footer .show_new_msg{
  position: absolute;
  top:-80rpx;
  right: 30rpx;
  color: #1aad19;
  z-index: 1000;
}
.chart-footer>view{
  display: table-cell;
  vertical-align: top;
}
.chart-footer .l{
  width: 17%;
  font-size: 30rpx;
  text-align: left;
  padding-left: 20rpx;
  
}
.chart-footer .c{
  width: 71%;
  height: 78rpx;
  position: relative;
}
.chart-footer .c .text{
  width: 100%;  
  box-sizing: border-box;
  min-height: 80rpx;
  background: #fff;
  border:1px solid #e8e8e8;
  vertical-align: top;
  border-radius: 5px;
  /* position: absolute;
  left: 0;
  top: 0; */
  padding: 6rpx 8rpx 26rpx;
  line-height: 44rpx;
  height: auto;
  max-height: 240rpx;
}
.chart-footer .r{
  width: 12%;
  text-align: center;
  display: table-cell;
}
.chart-footer .tobottom{
  width: 20rpx;
  height: 10rpx;
  display: inline-block;
}
.chart-footer .pic{
  width: 43.2rpx;
  height: 34.4rpx;
  display: inline-block;
  position: relative;
  top: 4rpx;
}
.chart-footer .plusgrey{
  width: 43.2rpx;
  height: 43.2rpx;
  display: inline-block;
  position: relative;
  top: 8rpx;
}
.select-options1 .title{
  text-align: center;
  line-height: 160rpx;
  color: #333;
  font-size: 30rpx;
  font-weight: 650;
}
.select-options1 .ul{
  max-height: calc(64vh - 316rpx);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}
.select-options1 .edit{
  width: 216rpx;
  height: 76rpx;
  border-radius: 76rpx;
  line-height: 76rpx;
  text-align: center;
  margin: 40rpx auto;
  background: #f2f2f2;
  font-size: 30rpx;
  color: #666;
}
.select-options1 .box .li{
  padding: 31rpx 40rpx;
  line-height: 40rpx;
}
.select-options1 .edit image{
  width: 32rpx;
  height: 32rpx;
  display: inline-block;
  position: relative;
  top: 3rpx;
  margin-right: 4rpx;
  float: none;
}
.select-options1 .black{
  height: 36vh;
}
.send_btn{
  font-size: 30rpx;
  color: #1aad19
}
.function-box{
  border-top: 2rpx solid #e8e8e8;
  background: #f2f2f2;
  padding:30rpx 20rpx 40rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 114px;
  box-sizing: border-box;

}
.function-box .item{
  display: inline-block;
  margin-right: 48rpx;
  text-align: center;
  color: #999;
  font-size: 28rpx;
  letter-spacing: 1px;
}
.function-box .item .pic-box{
  width: 110rpx;
  height: 110rpx;
  border:1px solid #e8e8e8;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 10rpx;
  position: relative
}
.function-box .item image{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.function-box .item .pic{
  width: 54rpx;
  height: 43rpx;
}
.function-box .item .video{
  width: 54rpx;
  height:54rpx;
}
.function-box .item .location{
  width: 54rpx;
  height:54rpx;
}
.back-to-index{
  position: fixed;
  right: 20rpx;
  bottom: 140rpx;
  background:#eb7b78;
  border-radius: 50%;
  width: 100rpx;
  height: 100rpx;
  z-index: 1000;
}
.back-to-index.movetop{
  bottom: 380rpx;
}
.back-to-index image{
  width: 56rpx;
  height:46rpx;
  position: absolute;
  left:22rpx;
  top: 27rpx;
}

.page-footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
}