:root {
  --bg-left: #BF4D65;
  --bg-right: #4F2253;
  --bg-active:#FB0304;
}

body{
	background: #fff;
}

@font-face {
    font-family: 'iconfont';  /* Project id 3213278 */
    src: url('//at.alicdn.com/t/font_3213278_flhy4e6wbjg.woff2?t=1646127490384') format('woff2'),
    url('//at.alicdn.com/t/font_3213278_flhy4e6wbjg.woff?t=1646127490384') format('woff'),
    url('//at.alicdn.com/t/font_3213278_flhy4e6wbjg.ttf?t=1646127490384') format('truetype');
}

.iconfont {
    font-family: "iconfont";
    font-size: 14px;
    font-style: normal;
}

.app_box{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.main{
	padding: 5px;
}
.header_top{
	background-image: linear-gradient(to right, var(--bg-left) , var(--bg-right));
	color: #fff;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 2px rgba(0,0,0,.4);
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding-bottom: 10px;
}
.clearfloat:after{
	clear: both;
	content: "";
	display: block;
}
.header_box{
	border-radius: 4px;
	width: 14.2%;
	float: left;
	text-align: center;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
.header_box.active{
	background: var(--bg-active);
}
.header_box:last-child{
	color: #F4FF3F;
}
.search_box{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 5px;
}
.search_box_input{
	background: rgba(255,255,255,.8);
	border-radius: 25px;
	height: 28px;
	line-height: 28px;
	text-indent: 10px;
	font-size: 12px;
	width: 80%;
	margin-left: 2%;
	color: #333;
}
.search_box_btn{
	width: 50px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: var(--bg-active);
	font-size: 15px;
	color: #fff;
	border-radius: 5px;
}

.list_con{
	/* margin-top: 60px; */
	/* padding: 0 10px; */
	/* height: calc(100vh - 60px); */
	/* overflow-y: auto; */
}
.list_box{
	/* padding: 0 10px; */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
	padding-bottom: 36px;
}
.list{
	position: relative;
	width: 49%;
	/* height: 150px; */
	margin-bottom: 10px;
}
.list_img{
	width: 100%;
	height: 100px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	border-radius: 5px;
	margin-bottom: 2px;
}
.icon_play{
	position: absolute;
	width: 35px;
	height: 35px;
	z-index: 333;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	margin-top: -18px;
}
.list_text{
	background-image: linear-gradient(to right, var(--bg-left) , var(--bg-right));
	color: #fff;
	font-size: 10px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	padding: 2px 10px;
	border-radius: 4px;
	text-align: center;
	margin-bottom: 3px;
}
.list_text_duration{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list_title {
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-indent: 5px;
    line-height: 16px;
	min-height: 32px;
}
@-webkit-keyframes shine{   /*创建动画*/
	0%{
		background-position: 0 0;
	}
	100%{
		background-position: 100% 100%;
	}
}
.list_du{
	position: absolute;
	bottom: 5px;
	right: 5px;
	z-index: 2;
	font-size: 12px;
	background-color: rgba(0, 0, 0, .3);
	color: #fff;
	padding: 5px;
	border-radius: 5px;
}
.list_bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 12px;
	margin-top: 5px;
}
.list_money,.list_count,.p_class{
	background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;/*设置线性渐变*/
	-webkit-background-size: 130px;                        /*设置背景大小*/
	-webkit-background-clip: text;                            /*背景被裁剪到文字*/
	-webkit-text-fill-color: rgba(255, 255, 255, 0.6);        /*设置文字的填充颜色*/
	/* -webkit-animation: shine 3s infinite;                    /*设置动画 */
}
.p_class2{
	background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;/*设置线性渐变*/
	-webkit-background-size: 100px;                        /*设置背景大小*/
	-webkit-background-clip: text;                            /*背景被裁剪到文字*/
	-webkit-text-fill-color: #000;        /*设置文字的填充颜色*/
	-webkit-animation: shine 3s infinite;                    /*设置动画*/
}

.shopcart{
	position: fixed;
	top: 70%;
	right: 4px;
	background: rgba(0,0,0,.5);
	color: #fff;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50px;
	font-size: 12px;
	z-index: 334;
}


.content {
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 5px; */
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #000;
  z-index: 335;
}
.icon_back{
  position: fixed;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  z-index: 3;
}
.popup_box{
  z-index: 2;
  width: 90%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.popup_box_bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  height: 100%;
  z-index: 1;
}
.video_box{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 200px;
}
.video_img{
  width: 100%;
  height: 200px;
  border-radius: 5px 5px 0 0;
}
.video_box .icon_play_btn{
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.popup_bot{
  background: #fff;
  border-radius: 0 0 5px 5px;
  position: relative;
}
.popup_title{
  color: #000;
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: bold;
  padding: 5px 5px;
}
.popup_pay{
  background-color: #fae2b2;
  width: 95%;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  color: #d35b4d;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}
.popup_wait{
  background-color: #d35b4d;
  width: 95%;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  color: #fae2b2;
  border: none;
  text-align: center;
  margin: 0 auto;
}

.popup_box_error{
  width: 100%;
}
.popup_bot_error{
  width: 100%;
  position: absolute;
  z-index: 2;
}
.popup_title_error{
  font-size: 14px;
  text-align: center;
  margin-bottom: 5px;
  color: #fff;
}

/* 口令 */

.login-dialog {
  z-index: 1002;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 270px;
  overflow: hidden;
  font-size: 16px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform, opacity, -webkit-transform;
  border-radius: 7px;
  background: #005ab5;
}
.login-dialog .item{
  background-color: #fff;
}
.login-dialog .item .title {
  text-align: center;
  font-size: 16px;
  color: #FFF;
  height: 40px;
  line-height: 40px;
  background: #005ab5;
}
.login-dialog .item .form-item {
  height: 164px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding: 10px;
}
.login-dialog .item .form-item .form-label {
  height: 35px;
  line-height: 35px;
  color: orange;
  font-weight: bolder;
}
.login-dialog .item .form-item input {
  background: #fff;
  border: 1px solid #969799;
  height: 30px;
  padding: 0 10px;
  width: 175px;
  height: 32px;
  line-height: 32px;
  border-width: 2px;
  border-style: solid;
  border-radius: 2px;
}
.login-dialog .item .login-dialog-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 20px;
}
.login-dialog .item .login-dialog-footer .login-close {
  padding: 9px;
  background: #dcdee0;
  color: #005ab5;
  width: 40%;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
}
.login-dialog .item .login-dialog-footer .login-sum {
  padding: 9px;
  background: #005ab5;
  color: #dcdee0;
  width: 40%;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
}



.mse{
  top: 0;
  left: 0;
  position: absolute;
}
.preview_box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.preview_text{
  z-index: 2;
  color: #FFFFFF;
  font-size: 14px;
  opacity: 1;
  position: absolute;
  width: 110px;
  margin: 105px auto 0 auto;
  text-align: center;
  padding: 1px 4px;
  left: 0;
  right: 0;
  background: rgba(16, 1, 1, 0.44);
  border-radius: 3px;
}

.tip {
  padding:5px 10px 0px 10px;
}
.tip-wrap {
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,.4);
}
.tip-title{
  font-size: 14px;
  color: red;
  font-weight: bold;
}
.tip-item{
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tip-item-title{
  user-select: text;
  padding: 5px 30px;
  border: 1px solid #bfc7d3;
  border-radius: 5px 0 0 5px;
}
.copy{
  background-color: #005ab5;
  color: #fff;
  padding: 6px 10px;
  border-radius:0 5px 5px 0;
}
.play{
  position: relative;
  width: 100%;
}
.banner{
  width: 100%;
  height: 200px
}
.video-js {
  width: 100%;
}
.article-text{
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 155px;
}
.popup_note{
  color: red;
  font-size: 12px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}
.popup_note p{
	transform: scale(.9);
}
.popup_note span{
    color:blue
}
.dialog-footer{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dialog-footer>div{
  flex: 1;
  color: #fff;
  padding: 10px 5px;
}
.dialog-footer .qrcode {
  background: #005ab5;
}
.dialog-footer .login {
  background: #da2b30;
}
.dialog-footer .close {
  background: #d5af1e;
  color: #000;
}

.down_box{
	width: 100%;
}
.down_box>img{
	width: 100%;
}

.shareText{
  color: #fff;
  font-size: 14px;
  text-align: center;
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  z-index: 2;
  background: rgba(16, 1, 1, 0.34);
}
.shareText>span{
  font-weight: bold;
  margin: 0 4px;
  color: #FA436A;
}


/* 支付弹窗 */
.pay_mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, .7);
	height: 100%;
	z-index: 397;
}
.pay_box{
  background: #fff;
  z-index: 398;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;    
  border-radius: 10px 10px 0 0;
}
.pay_close{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	z-index: 399;
}
.pay_title{
	height: 46px;
	line-height: 46px;
	font-size: 18px;
	color: #000;
	font-weight: 500;
	letter-spacing: .5px;
}
.pay-item {
  position:relative;
  width: 150px;
  height: 150px;
  /* background-size: 100% 100%; */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.pay_top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	margin-top: 10px;
}
.pay_top_left{
	/* width: 100px; */
	font-size: 14px;
}
.pay_top_center{
	flex: 1;
	font-size: 16px;
}
.pay_top_right{
	height: 35px;
	line-height: 35px;
	background: #1c89f0;
	color: #fff;
	border-radius: 3px;
	font-size: 14px;
	padding: 0 10px;
}
.pay_tips{
	color: #cc0f09;
	font-size: 13px;
	font-weight: bold;
	margin-top: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #eee;
}
.pay_by{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pay_by_item{
	flex: 1;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid #eee;
}
.pay_by_item>img{
	width: 60px;
	height: 60px;
}
.pay_by_item>p{
	font-size: 14px;
	color: #666;
	margin-top: 10px;
}
.wx_img{
	
}
.pay-alipay {
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	top: 33px;
	right: 35px;
	left: 0;
	margin: 0 auto;
	color: #E6A23C;
	width: 100%;
}
.pay-title{
  padding-top: 10px;
  font-size: 14px;
}
.pay-container{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.pay-item img{
  width: 150px;
  height: 150px;
}



/* 直播 */
.gallery_box{
	/* position: fixed; */
	/* top: 120upx; */
	/* left: 0; */
	width: 100%;
	z-index: 2;
	background-image: linear-gradient(to right, var(--bg-left), var(--bg-right));
	padding-bottom: 10px;
	/* box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 40%); */
}
.gallery_box_top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 17px;
	padding: 5px 10px 10px 10px;
}
.gallery_box_top>p{
	color : #fff;
}
.gallery_box_top>p>span{
	background-color: #a6567c;
	color: #fff;
	height: 20px;
	width: 20px;
	line-height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 25px;
	margin-right: 4px;
}
.gallery_box_top>p:nth-child(1){
	font-weight: bold;
}
.gallery_box_top>p:nth-child(2){
	font-size: 12px;
}

.rooms{
	width: 100%;
}
/deep/ .uni-scroll-view-content{
	display: flex;
}
.rooms_box{
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.item_list{
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 125px;
  margin-right: 10px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.item_list:nth-last-child(2){
	margin-right: 0px;
}
.emty{
	padding: 5px;
}
.zb_avatar{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 3px solid #00d2be;
}
.zb_avatar>img{
  width: 26px;
  height: 26px;
  border-radius: 26px;
}
.zb_avatar>.online{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgb(130, 255, 140);
  position: absolute;
  bottom: 0;
  right: 0;
}
.zb_status{
  display: flex;
  align-items: center;
  position: absolute;
  /* top:30px; */
  top: 5px;
  right: 3px;
  background-image: linear-gradient(110deg, rgb(186, 57, 243), rgb(84, 32, 162) 102%);
  border-radius: 4upx;
  animation: 0.5s linear 0s infinite alternate none running cowwyi;
  font-size: 12px;
  padding: 1px 3px;
}
.zb_status>p{
  color: #fff;
  margin-left: 3px;
  /* font-size: 20upx;
  height: 30upx;
  line-height: 34upx; */
}
.zb_free{
  display: flex;
  align-items: center;
  position: absolute;
  /* top: 30px; */
  top:5px;
  right: 5px;
  background-image: linear-gradient(117deg, rgb(164, 69, 179) 5%, rgb(212, 24, 114) 55%, rgb(255, 0, 102));
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  padding: 1px 3px;
}
.zb_roomid{
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;
  width: 70px;
  bottom: 5px;
  /* right: 5px; */
  right: 0px;
  left: 0;
  margin: 0 auto;
  border-radius: 2px;
  padding:1px 3px;
  font-size: 10px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  /* background-color: #ffbe00; */
  background-color: rgba(0,0,0,.4);
}
.zb_type{
  display: flex;
  align-items: center;
  position: absolute;
  /* top: 55px; */
  top:30px;
  right: 5px;
  border-radius: 2px;
  padding:1px 3px;
  color: #fff;
  font-size: 12px;
}
.zb_greed{
  background-image: linear-gradient(117deg, #2ba245 5%,#2ba245 );
}
.zb_red{
  background-image: linear-gradient(117deg, #f76260 5%,#f76260 );
}
.el_statistic{
  position: absolute;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.4);
  top: 50%;
  transform: translateY(-10px);
  width: 80%;
  margin: 0 auto;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
}
/deep/ .el-statistic{
  color: #fff;
}

.footer_box{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-image: linear-gradient(to right, var(--bg-left) , var(--bg-right));
	color: #fff;
	font-size: 13px;
	padding: 4px 0 ;
	z-index: 400;
}
.footer_box>div{
	display: flex;
	height: 30px;
}
.icon_hot{
	width: 25px;
	height: 20px;
	position: relative;
	top: 5px;
}
.icon_heart{
	width: 25px;
	height: 20px;
	position: relative;
	top: 5px;
}
.icon_up{
	width: 15px;
	height: 20px;
	position: relative;
	top: 5px;
	margin-right: 2px;
}


/* //新增分享模态框 */
.model_box{
	width: 100%;
	position: fixed;
	z-index: 600;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.model_mask{
	position: fixed;
	z-index: 601;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
}
.model_box_con{
	width: 90%;
	margin: 0 auto;
	background-color: #fff;
	font-size: 14px;
	color: #333;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 2px #fff;
	z-index: 602;
}
.model_box_con>div{
	padding: 8px;
	text-align: center;
	width: 100%;
}
.model_box_con>div>.title{
	display: block;
}
.model_box_con .title1{
	font-size: 17px;
	margin: 10px 0;
	width: 100%;
	display: block;
}
.model_box_btn{
	padding: 5px 10px;
	border-radius: 5px;
	background-image: linear-gradient(to right, var(--bg-left) , var(--bg-right));
	color: #fff;
	font-size: 15px;
	display: inline-block !important;
	font-weight: bold;
	margin-top: 10px;
}
.height300 .model_box_btn{
	margin-top: 0;
}
#qrcode_shareUrl{
	text-align: center;
	margin-top: 10px;
}
#qrcode_shareUrl img{
	margin: 0 auto;
}


.ewm_tab{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 !important;
	font-size: 16px;
	font-weight: bold;
}
.ewm_tab>div{
	flex: 1;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eee;
}
.ewm_tab>div.active{
	background-image: linear-gradient(to right, #565EF1, #6709C1);
	color: #fff;
}
.surl {
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow:ellipsis;
	padding: 0 10px;
	box-sizing: border-box;
}

.animater{
	animation: living .5s linear ;
}
 @keyframes living {
	0% {
			transform: scale(0);
		}
		25% {
			transform: scale(0);
		}
		50% {
			transform: scale(0.1);
		}
		75% {
			transform: scale(0.5);
		}
		100% {
			transform: scale(1);
		}
}
.height300{
	height: 320px;
}