/*采用rem为单位做移动端页面*/
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
html {
  width: 100%;
}
*,
:after,
:before {
  box-sizing: border-box;
}
article,
aside,
blockquote,
body,
button,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
section,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}
img {
  border-style: none;
}
#app,
html,
html body {
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#app .wraps {
  min-height: 100%;
  min-width: 920px;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
#app .wraps a {
  color: #2d8cf0;
  background: 0 0;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
#app .wraps .head1 {
  min-width: 920px;
  width: 100%;
  top: 0;
  position: fixed;
}
#app .wraps .header-wraps {
  z-index: 999;
}
#app .wraps .header-wraps .head-box {
  height: 60px;
  background: #fff;
  box-shadow: 0 0 5px #ccc;
}
#app .wraps .header-wraps .head-box .head {
  max-width: 1446px;
  height: 100%;
  padding: 0 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#app .wraps .header-wraps .head-box .head .logo {
  width: 336px;
}
#app .wraps .header-wraps .head-box .head .logo img {
  width: 100%;
  display: block;
}
#app .wraps .header-wraps .head-box .head .header-right {
  display: flex;
  align-items: center;
}
#app .wraps .header-wraps .head-box .head .header-right .ivu-tooltip {
  display: inline-block;
}
#app .wraps .header-wraps .head-box .head .header-right .ivu-tooltip .ivu-tooltip-rel {
  position: relative;
  width: inherit;
  display: inline-block;
}
#app .wraps .header-wraps .head-box .head .header-right .ivu-tooltip .ivu-tooltip-rel .ivu-avatar.ivu-avatar-icon {
  font-size: 18px;
}
#app .wraps .header-wraps .head-box .head .header-right .ivu-tooltip .ivu-tooltip-rel .ivu-avatar {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
}
#app .wraps .header-wraps .head-box .head .header-right .outLoing {
  margin: 0 15px;
  line-height: 1;
  display: inline-block;
  cursor: pointer;
  color: #666;
  font-size: 16px;
}
#app .wraps .content {
  max-width: 1496px;
  min-width: 920px;
  width: 100%;
  padding: 0 30px;
  margin: 80px auto 80px auto;
  display: flex;
  justify-content: space-between;
}
#app .wraps .content .videoPlay-wrap {
  width: 100%;
  height: 668px;
  z-index: 0;
  background: #000;
}
#app .wraps .content .listbox {
  width: 248px;
  background-color: #252a34;
  position: relative;
  transition: all 0.5s;
}
#app .wraps .content .listbox .listbox-btn {
  width: 14px;
  height: 50px;
  display: block;
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50px);
  background-color: #252a34;
  cursor: pointer;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFBUlEQVR4Xu2bW4gcRRSGz6mZZXf1QQRFSRAv+CKBGF2NZJeZrlPzMLLmookPogGJsgqJogRC0AgKXpAgBLxFJeZBUGFNoiay4LKT6pmHhSjEeEF88AIBwcuDoui6A9NHCtond7q6J6d7huzW8+nT//9NndNdXTUIy3zgMvcPKwBWZoAggTAM9zDzZgC4HgCOA8AhIgoFbyGeSqwErLWPAsCBJRTeQERnxJULJZQE8BUArFlK1/Dw8AXj4+MLQppF00gC4ARlvxPRxaLKhZJJAjgLAFd004WI81rrCSHdYmkkATwEAC95lLmmOCWmXiCRGACnxVrrADgQXQcz7zbGLNUsBexkTyEKwN3+5MmTRxFxa5IUpVQ9CILZ7HLlrxAHYK29BBGPM/MGD4S1QRB8KW8pW0ZxAO72c3Nza0ulknsRujJJTrvdvqxer/+STbJsdC4A4lKoI+IJABhKkPwdEV0raylbttwAOBlhGO5g5sNJkly5aK23ZJMtF50rgPjJsA8AnvFIfp6IHpOzlT5T7gDicngFEXd6ZsJOrfXB9NJlIgsBwMwYhuExALg9STYzbzPGuLjCRiEAnJvZ2dlVQ0NDztwtSe6iKJqo1WrzRREoDEBcCmOI+H7SmgEA/iyXy+sqlcr3RUAoFEDcFDcCwAcAUEoweKrdbtfq9fpfeUMoHED8eJxi5jc8TfEdrfU95yWAeCY8CQBPeZriAWPM7jwh9GUG/GfIWvsaADzogbDXGLM/Lwh9BTAzMzM8MjIyjYjuQ2rXoZS6NwiCt/KA0FcAcSlchYjTzHyzZybcaoz5WBpC3wHETXEDM78HAKu7GUTEs1EUbTbGfC4JYSAAxO8IWxHxCED33SpE/ISZtxDRT1IQBgZAXA67AOBlj7kTRJTYM7LAGSgAMQS3cnQryKTxAhHtyWK0a2lJJJHOEYbhm8x8X0LekIhI4r4DNwPifnAYEXcsSwBhGD7LzI8vyxJoNBoPK6Ve9Jj/iIg2SUx/l2NgSsBaeycATHs0nYmiaGOtVvvxvALQarUmoihyb4OrEoz9ysybjDGnpMwPxAxoNptXdzqdI4h4Y5IxpdS2IAjEP5f1tQTcYmh0dPQoANzmWQc8Yozx9YaeJkZfAVhrDwHA/UnKEXG/1npvT+5SXNQ3ANbapwHgCY/Gt4loewofPYf0BYC1Ns07f5OIdM/OUl5YOABrrdsbcKu+pI+i35bL5fWVSuW3lD56DisUQKPRWI+IxxCx67ofAP5BxKrW+tOeXWW4sDAA8/PzqxcXF93n8Js8Te9urfW7GTycU2ghANzWWLPZ/NC9yHjM79NaP3dOjjJeXAiAMAxfZ+YHPM/6g8aYxA3UjN5ShecOwFrr/f7fzzMCuQJoNBpTSqnEHSBmPm2MGUv1c+UQlBuAZrM5GUWRa3pJR2R+JqLLc/CVOmUuAKy16+LT4l1PjjqFSqlrgiD4IbXaHALFAbRarUs7nY47HOU7B1Cv1Wp9PysoDsBa65asd3g6/i5jzKs5/KCZU4oCSHlUNvcd3ywUxABYa72Hpd25Qa212KZGFqPdYiUBJB6XB4BviOg6CdGSOSQBdP3DBDP/bYy5UFK4VC5JAJ8BgHv8/W8sLCxcNDk5+YeUaMk8kgCW7AGlUmmsWq2elhQtmUsMgBNlrb0LANy/x9Yg4hdKqalqtfq1pGDpXKIApMUVkW8FQBGUB/key34G/Atd5pRQfsyf0gAAAABJRU5ErkJggg==);
}
#app .wraps .content .listbox .btn-show {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEzklEQVR4Xu2bXWhcRRSAz7kLG6Mo+uAPCII/DyJKtaCFPOzOuRtWCKbGNAZU8KFqtWoLBSmiFRStWoSCtAb8LYKKD1pr1OA+7My9uzSlarUo4ov4Q0lRFMQHTcLuzpGBDeQheydm5/5wk3nde+fO982Ze2fmzCKs84LrnB82BGxEQMYNKKUEADwLAJsQ8TtmPkRE77tqdqaHgFLqRgD4ZgXYB4joDRcSMitgdnZ2cHFx8d8ekN8T0fW5FqCU+gsALuwFSUROOs9JJS56YnkdQRAcZ+ahiHrPENEVLp6bOQFKqdcB4H4L3C4iOpw7AVLKPYh40AJ2mIh2uYA3dWQmAsIwrGqta1FgzHzU9/1truAzIyAMwxu01t9GgSHiCWbeSkR/5kpArVa7pFgs/m6B+rXT6WwdHh6OlLQWMakPAaXUjwBwdUTjW8w86vt+5PBYC3zqQyAIgo9NWFtCf7sQ4shaAW33pRYBSqkXAOBxSwP3EdF+G0Q/v6ciIAiCncw8ZXnjT/m+/0g/cKu5N3EBUspxRPzQ0rhjQghzHa8Gop9rEhVQr9eHPM87bmnwyVarNV6tVs/2A7baexMT0Gw2r2q326cB4PyoOT4z3+H7/qnVAvR7XSICarXaecVisQ4AWyIa3AGAMSL6tF+o/3N/IgKCIHiXme+2fO52CCHMQijRErsAKeVBRNxjoXqaiJ5JlLz7sFgFSCn3IuIBC9irRPRQGvCxzgTDMLxXa/225Vs/vbCwMDkyMrKYKwFSylsR8XPLmP+SmSeJ6Je04GOJACnlJs/zppk5astqDhHvFEKcSBPeuQCl1GWIaBY4t0SAMTNP+L5/NG34OARMA8CoBexRInolC/BOBSilXgKAxyxg+4loX1bgXQtQAGDSWCsWRHxLCHFfluATFcDMR3zf355nAdYhgIjPCyGezJIEpzNBpdQnAHBbFKDWenelUjmUFQlOBdTr9cs9zzOrOZPV7VXMJoeZAH2QBQlOBRggKeUWRDSRcHHEC/Gs53mTpVLJtjkSuyPnAkyLwzAc11pHbnsx89eFQmGiXC7/HDtlxANiEdCNhN2I+LIF7rP5+fltuVsMLUEHQXCAmfdaJLxJRLZscGxBElsELLVYKfUOANxjIXiOiJ6KjTKNIbD8mUqpAADKFsBU1gixR4CBbjabF7Xb7S8A4JoICWZTdIKIjiUZCYkIMEBBENzMzA0AOKfnBIF5jpnHK5WKkZVISUxAV8JdzPyeheyrgYGBsaGhobkkDCQqoCvhCWaOTHiaiVS5XL49d6mxpR6VUk4h4s6oHkbE14QQD8YdBYlHwLI5gvVsAADEni9ITUB3tngKETdH9bLWekelUoktY5SqAAOulPoNAC6NkNDyPG+sXC7PxDEcUhcQhuGVWuufLHBnAMCcEDPZZacldQGGpl6vVz3Psx2COlkoFEZLpdIfLg1kQkD3ffAwItq2yz8iovFcCuhKWE0mOZ9HZZd9Hk1azZZcyedh6SUJSqkfAODaiFDP73H5ZbPFfxDx3F4Scv2HCQM9MzNzweDg4N89BJwmoptcvAwz8xVYCabRaGzudDornRhzNkXOtAAjpdFoXKe1fpGZCRHNaXFziNJkoZyUzAtwQhlRyYaAuA1nvf51HwH/AW4DrFDkmht2AAAAAElFTkSuQmCC);
}
#app .wraps .content .listbox .list-hide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app .wraps .content .listbox .list-hide .list-top {
  width: 248px;
  height: 58px;
  padding: 0 10px;
  margin: 10px 0 0 0;
  font-size: 15px;
  color: #fff;
  border-bottom: 1px solid #668;
  display: flex;
  align-items: center;
}
#app .wraps .content .listbox .list-hide .list-top p {
  max-height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
}
#app .wraps .content .listbox .list {
  width: 100%;
  height: 600px;
  padding: 10px 10px 0 10px;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#app .wraps .content .listbox .list .list-item {
  width: 224px;
  height: 65px;
  margin: 0 0 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#app .wraps .content .listbox .list .list-item .list-item-img {
  height: 100%;
  width: 116px;
  float: left;
  border-radius: 2px;
  background-color: #e5e5e5;
  border-bottom: 1px #92da5a solid;
}
#app .wraps .content .listbox .list .list-item .list-item-title {
  width: 108px;
  float: left;
  margin-left: 10px;
  color: #fff;
  font-size: 14px;
  text-align: left;
  align-items: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  letter-spacing: 1px;
}
#app .wraps .content .listbox .list .list-item-active .list-item-title {
  color: #0d9bff;
}
#app .wraps .content .listbox .list::-webkit-scrollbar {
  width: 0;
}
#app .wraps .footer-wraps {
  height: 102px;
  background: #212121;
}
#app .wraps .footer-wraps .footer-cont {
  max-width: 1446px;
  width: 100%;
  height: 100%;
  padding: 0 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app .wraps .footer-wraps .footer-cont .footer-beian {
  color: #eaeaea;
  font-size: 16px;
  line-height: 1;
}
#app .wraps .footer-wraps .footer-cont .footer-beian a {
  margin: 10px 0;
  display: inline-block;
}
#app .wraps .footer-wraps .footer-cont .footer-QR {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#app .wraps .footer-wraps .footer-cont .footer-QR .QR-box {
  cursor: pointer;
  margin: 0 10px;
}
#app .wraps .footer-wraps .footer-cont .footer-QR .QR-box .QR-icon {
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 1px solid #8a8a8a;
  border-radius: 50%;
  display: block;
}
#app .wraps .footer-wraps .footer-cont .footer-QR .QR-box .QR-icon img {
  width: 100%;
  display: block;
}
#app .wraps .foot {
  min-width: 920px;
  margin-top: auto;
}
#app .wraps .content .listbox .list .list-item-active .active_vod{
  color:red;
}
@media screen and (max-width: 768px) {
  #app .wraps {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    background-color: #252a34;
  }
  #app .wraps .head1 {
    width: 100%;
    min-width: 0;
  }
  #app .wraps .header-wraps .head-box {
    height: 0.7rem;
  }
  #app .wraps .header-wraps .head-box .head {
    padding: 0 0.25rem;
  }
  #app .wraps .header-wraps .head-box .head .logo {
    width: 3.6rem;
  }
  #app .wraps .content {
    min-width: 100%;
    margin: 0.7rem auto 0 auto;
    padding: 0;
    flex-direction: column;
  }
  #app .wraps .content .videoPlay-wrap {
    height: 4.35rem;
    position: fixed;
    top: 0.7rem;
    z-index: 99;
  }
  #app .wraps .content .listbox {
    width: 100%;
    transition: all 0s;
    margin-top: 4.35rem;
  }
  #app .wraps .content .listbox .listbox-btn {
    display: none;
  }
  #app .wraps .content .listbox .list-hide .list-top {
    width: 100%;
    position: fixed;
    top: 5.05rem;
    z-index: 99;
    background-color: #252a34;
    margin: 0;
  }
  #app .wraps .content .listbox .list-hide .list {
    margin-top: 58px;
    /*height: auto;*/
  }
  #app .wraps .content .listbox .list-hide .list .list-item {
    width: 100%;
    height: 1.4rem;
  }
  #app .wraps .content .listbox .list-hide .list .list-item .list-item-img {
    width: 2.4rem;
  }
  #app .wraps .content .listbox .list-hide .list .list-item .list-item-title {
    width: auto;
    font-size: 0.29rem;
  }
  #app .wraps .foot {
    min-width: 0;
    height: 1.5rem;
  }
  #app .wraps .foot .footer-cont .footer-beian {
    font-size: 0.2rem;
  }
  #app .wraps .foot .footer-cont .footer-beian a {
    margin: 10px 0;
    display: inline-block;
  }
  #app .wraps .foot .footer-cont .footer-QR .QR-mobile {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  #app .wraps {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }
  #app .wraps .head1 {
    width: 100%;
    min-width: 0;
  }
  #app .wraps .header-wraps .head-box {
    height: 1rem;
  }
  #app .wraps .header-wraps .head-box .head {
    padding: 0 0.25rem;
  }
  #app .wraps .header-wraps .head-box .head .logo {
    width: 4.8rem;
  }
  #app .wraps .content {
    margin: 1rem auto 0 auto;
  }
  #app .wraps .content .videoPlay-wrap {
    top: 1rem;
  }
  #app .wraps .content .listbox {
    width: 100%;
    transition: all 0s;
    margin-top: 4.35rem;
  }
  #app .wraps .content .listbox .list-hide .list-top {
    width: 100%;
    position: fixed;
    top: 5.32rem;
    z-index: 99;
    background-color: #252a34;
    margin: 0;
  }
  #app .wraps .foot {
    min-width: 0;
  }
  #app .wraps .foot .footer-cont .footer-beian {
    font-size: 0.28rem;
  }
  #app .wraps .foot .footer-cont .footer-beian a {
    margin: 10px 0;
    display: inline-block;
  }
  #app .wraps .foot .footer-cont .footer-QR .QR-mobile {
    display: none;
  }
}