@charset "utf-8";
/*滚动条 样式
::-webkit-scrollbar{width:8px;height: 10px;background-color:#e1搜索e5ea}
::-webkit-scrollbar-thumb{background-color:#aab1bc;border-radius:10px;border:2px solid #e1e5ea;}
::-webkit-scrollbar-thumb:hover{background-color:#aab1bc;}
::-webkit-scrollbar-thumb:active{background-color:#aab1bc;}
::-webkit-scrollbar-thumb:window-inactive{background-color:#aab1bc;}
::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: #fff;
}*/
html, body { width: 100%; }
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form { margin: 0; }
ol,ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: #666; background-color: transparent; }
a:hover { text-decoration: none; }
a:active, a:hover, a:focus, a:visited { outline: 0; text-decoration: none;}
img { border: none;	vertical-align: middle; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
input {
  outline: none;
  -webkit-appearance: none; /*去除系统默认的样式*/
}
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: ''; display: block; clear: both; width: 0; height: 0; visibility: hidden; }
.container { width: 1300px; border: 1px solid red;  margin: 0 auto;}
.fl { float: left; }
.fr { float: right; }
body {
  position: relative;
  min-height: 100vh;
	color: #333;
	font-family: Microsoft Yahei, sans-serif;
	font-size: 14px;
    background: #fff;
	-webkit-font-smoothing: antialiased; /*chrome、safari  字体抗锯齿*/
	-moz-osx-font-smoothing: grayscale;/*firefox  字体抗锯齿*/
	overflow-x: hidden;
	overflow-y: auto;
}
.live-list-head {
  padding: 15px;
  box-sizing: border-box;
  border-bottom: #f2f2f2 1px solid;
}
.live-list-headBox,
.live-list-footBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.live-head-container {
  display: flex;
  justify-content: left;
  align-items: center;
}
.live-head-title {
  font-size: 20px;
  font-weight: bold;
}
.live-head-wrap {
  display: none;
}
.live-head-main {
  position: relative;
}
.user-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 120px;
  cursor: pointer;
}
.user-nickName {
  color: #333;
  font-size: 15px;
  font-weight: 500;
}
.arrow-head {
  display: block;
  width: 20px;
  height: 10px;
  cursor: pointer;
}
.js-arrow-up {
  display: none;
}
.live-head-tool {
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 3;
  width: 120px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.live-tool-item {
  border-bottom: 1px solid #f2f2f2;
}
.live-tool-item:last-child {
  border: 0;
}
.live-login-out {
  padding: 8px 0;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
.live-list-wrapper {
  min-height: 60vh;
}
.live-list {
  margin: 20px auto;
  padding: 0 20px;
  max-width: 1200px;
}
.live-list-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.live-item {
  flex: 0 0 100%;
  margin: 0 auto 20px;
  padding: 5px;
  border: #f2f2f2 1px solid;
  padding: 5px 5px 15px;
  box-sizing: border-box;
}
.live-item-link  {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.live-item-info {
  position: relative;
  margin-bottom: 12px;
  width: 100%;
  min-height: 56.25%;
}
.live-item-img {
  display: block;
  width: 100%;
  border-radius: 5px;
}
.live-item-status {
  position: absolute;
  top: 0;
  right:0;
  padding: 7px 8px;
  color: #fff;
  font-size: 14px;
  border-radius: 0 5px 0 5px;
}
.live-status-prepare {
  background-color: #EF8B35;
}
.live-status-start {
  background-color: #68B958;
}
.live-status-end {
  background-color: #D13D2D;
}
.live-item-title {
  padding: 0 5px;
  text-align: center;
  font-size: 16px;
  color: #000;
  box-sizing: border-box;
}
.live-item-type {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 38px;
  padding: 0 10px;
  font-size: 15px;
  color: #fff;
  box-shadow: 1px 0 0 1px rgba(255,255,255,0.3);
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}
.live-item-typeMain {
  display: flex;
  justify-content: space-between;
  align-self: center;
}
.live-itemMultipleColumns {
  flex: 0 0 48%;
  margin: 0 0 20px;
  padding: 5px;
  border: #f2f2f2 1px solid;
  padding: 5px 5px 15px;
  box-sizing: border-box;
}
.live-list-foot {
  padding: 15px 15px 30px;
  background-color: #fff;
  box-sizing: border-box;
}
.live-list-footHead {
  margin-bottom: 10px;
  border-bottom: 1px solid #f2f2f2;
}
.live-list-footBox {
  justify-content: flex-start;
  align-items: flex-start;
}
.live-footHead-txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px auto;
  max-width: 1200px;
  font-size: 14px;
  color: #333;
}
.live-foot-icon {
  display: block;
  margin-right: 5px;
  width: 4px;
  height: 16px;
  background-color: #0058b3;
  border-radius: 2px;
}
.live-listFoot-item {
  display: block;
  margin: 0 5px;
  align-self: stretch;
  border: 1px solid #f2f2f2;
}
.live-listFoot-imgWrap {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.live-listFoot-img {
  display: block;
  width: 177px;
}
/* 下载APP */
.down-wrap {
  position: fixed;
  top: 30%;
  right: 0;
  z-index: 9;
  background-color: #ffffff;
}
.live-tool-appDown {
  display: block;
  padding: 5px 10px;
  border: 1px solid #f2f2f2;
  border-radius: 5px 0 0 5px;
  box-sizing: border-box;
  background-color: #ffffff;
}
.down-img {
  display: block;
  width: 45px;
  height: 45px;
  margin-bottom: 5px;
}
.down-txt {
  color: #444;
  font-size: 12px;
}
/* login */
.prompt-filed,
.login-filed {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}
.prompt-wrapper,
.login-wrapper {
  position: relative;
  margin: 13% auto 0;
  padding: 20px;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
}
.prompt-head,
.login-head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.head-logo,
.login-logo {
  display: block;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.head-logo {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.prompt-title,
.login-title {
  font-size: 20px;
  font-weight: 500;
}
.login-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.login-item-title {
  flex: 0 0 65px;
}
.login-item-ctn {
  flex: 0 1 100%;
}
.login-item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.login-item-phone,
.login-item-verifyCode {
  display: block;
  padding: 0 10px;
  width: 100%;
  height: 100%;
  border: #ccc 1px solid;
  border-radius: 5px;
  box-sizing: border-box;
}
.login-item-verifyCode {
  flex: 0 1 100%;
  border-radius: 5px 0 0 5px;
}
.login-verifyBtn {
  flex: 0 0 130px;
  display: block;
  padding: 6px;
  width: 130px;
  height: 40px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  outline: none;
  border: 0;
  box-sizing: border-box;
  border-radius: 0 5px 5px 0;
  background-color: #409eff;
  cursor: pointer;
}
.login-item-phone:focus,
.login-item-verifyCode:focus {
  outline: none;
}
.login-item-waning {
  color: #777;
  font-size: 12px;
}
.login-submitBox {
  margin-top: 50px;
}
.login-submit {
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 220px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  outline: none;
  border: 0;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #409eff;
  cursor: pointer;
}
.prompt-cancelBox,
.login-cancelBox {
  position: absolute;
  top: 8px;
  right: 8px;
}
.prompt-cancel,
.login-cancel {
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.prompt-item {
  margin-bottom: 20px;
}
.prompt-info {
  margin-bottom: 10px;
  color: #95989A;
  font-size: 16px;
  text-align: justify;
  text-indent: 30px;
}
.prompt-downBoxPC {
  margin: 0 auto 5px;
}
.prompt-downBox {
  margin-top: 30px;
}
.z4app-down-QRCode {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 150px;
}
.z4app-down {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.z4app-down-logoWrap {
  display: flex;
  justify-content: left;
  align-items: center;
}
.z4app-down-logo {
  display: block;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 50%;
  cursor: pointer;
}
.z4app-down-info {
  font-size: 16px;
  color: #333;
}
.z4app-down-btn {
  padding: 5px 20px;
  color: #fff;
  border-radius: 20px;
  background-color: #D13D2D;
}
.login-infoBox {
  margin: 10px auto;
}
.login-z4-userAgreement {
  font-size: 12px;
  color: #409eff;
}
.login-wxBox {
  display: none;
}


/* 多媒体窗口适配 */
@media screen and (max-width: 800px) {
  .live-itemMultipleColumns {
    flex: 0 0 100%;
  }
}
@media screen and (max-width: 450px) {
  .login-wrapper {
    margin: 18% auto 0;
  }
  .login-head {
    margin-bottom: 20px;
  }
  .login-item {
    flex-wrap: wrap;
  }
  .login-item-title {
    flex: 0 0 100%;
    margin-bottom: 5px;
  }
  .login-item-ctn {
    flex: 0 0 100%;
  }
  .login-submitBox {
      margin-top: 35px;
  }
  .login-submit {
    width: 100%;
  }
  .live-listFoot-img {
    width: 118px;
  }
}







/* toast 弹窗*/
.m-toast-pop {
	display: none; 
	position: fixed; 
	width: 100%;
	top: 50%;
	left: 50%;
	z-index: 999999;
	overflow: auto;
	text-align: center;
	transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
}      
.m-toast-inner {
	/*position: absolute;
	left:50%;
	top:50%;*/
	width: 100%; 
	/*transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);*/
	text-align: center;
}
.m-toast-inner-text{
	display: inline-block;
	margin: 0 22px; 
	padding: 8px 16px;
	font-size: 15px;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 22px;
	background: rgba(0,0,0,0.72);
  border-radius: 10px;
  box-sizing: border-box;
}