.notbg{background: none;}
.detial,.bransh {
  width: 88%;
  max-width: 1200px;
  margin:0 auto;
  font-size: 18px;
  line-height: 34px;
}
.bransh{color:#777;padding-top: 5px;}
.userComment{
  width:100%;
  padding: 40px 0;
}
.userComment .userInfo{
  overflow: hidden;
  line-height: 90px;
}
.userComment .userInfo .avatar{
  float: left;
  width: 90px;
  height: 90px;
  margin-right: 40px;
}
.userComment .userInfo .avatar img{
  width:100%;
  height:auto;
}
.userComment .userInfo .name{
  float: left;
  width: 70%;
  font-size: 42px;
}
.userComment .info{
  padding-left: 130px;
  font-size: 24px;
  line-height: 38px;
}
.userComment .date{
  display: block;
  color:#777;
  font-size: 14px;
  padding-top: 10px;
}
.relateList{
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-top: 50px;
}
.relateList .lists{
  width: 100%;
  overflow: hidden;
}
.relateList .lists .litem{
  float: left;
  width:23.5%;
  margin-right:2%;
  margin-bottom:  20px;
  cursor: pointer;
}
.relateList .lists .litem.notMr{
  margin-right: 0;  
}
.relateList .lists .litem .imgBox{
  position: relative;
  width:100%;
  height:160px;
  background: no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
}
.relateList .lists .litem .imgBox .img{
  width:100%;
  height:100%;
  background: no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  transition-duration: 1.2s;
}
.relateList .lists .litem:hover .imgBox .img{
  transform:scale(1.2);
}
.relateList .lists .litem .infos{
  width:100%;
  height:150px;
  background: #fff;
}
.course .lists .litem .infos{
  height: 145px;
}
.relateList .lists .litem .date,
.relateList .lists .litem .text{
  width: 90%;
  margin:0 auto;
}
.relateList .lists .litem:hover .text{
  color:#916413;
}
.relateList .lists .litem .date{
  position: relative;
  padding-top: 20px;
  padding-bottom: 14px;
  margin-bottom: 14px;  
}
.relateList .lists .litem .date::after{
  content:"";
  position: absolute;
  left: 0;bottom:0;
  width: 30px;
  height: 2px;
  background: #000;
}
.relateList .lists .litem .text{
  font-size: 16px; 
  line-height: 24px;   
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 48px; 
}
.relateList .lists .litem .item-count{
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  font-size: 18px;
  border-radius: 10px 0 0 10px;
  padding: 0 6px 0 14px;
  height: 28px;
  line-height: 28px;
  background: #916413;
  color: #FFFFFF;
  z-index: 9;
  background: linear-gradient(-31deg, #916413, #A27425, #C29E38);
  display: block;
}
.relateList .lists .litem .userInfo{
  font-size: 16px;
  background: #fff;
  width:100%;
  padding:0 5% 20px;
  overflow: hidden;
  line-height: 28px;
}
.relateList .lists .litem .userInfo .avatar{
  float: left;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ddd;
}
.relateList .lists .litem .userInfo .name{
  float: left;
  width: 70%;
  margin-left: 6%;
}
.relateList .title h5{
  background: linear-gradient(to right,#c29e38,#916413);
  -webkit-background-clip:text;
  color:transparent;
  font-size: 36px;
  padding-left: 30px;
  padding-bottom: 40px;
}
.relateList .title span{
  background: linear-gradient(to right,#c29e38,#916413);
  -webkit-background-clip:text;
  color:transparent;
  font-size: 16px;
  padding-left: 10px;
}
.detial .qrcode img{
  width: 468px;
  height: 468px;
  border-radius: 50%;
  margin:0 auto 24px;
}
.detial .qrcode{
  background: linear-gradient(to right,#c29e38,#916413);
  -webkit-background-clip:text;
  color:transparent;
  font-size: 26px;
  padding:60px 0 90px;
  text-align: center;
}
.videoDetail .bigCont{
  margin-bottom: 40px;
}
.bigCont{
  position: relative;
  width: 100%;
  height: 648px;
  background: no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  margin-bottom: 18px;
}
.bigCont .topVideoImg{
  width:100%;
  height:100%;
  position:absolute;
  left:0;top:0;
  z-index:2;
  background: no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  background: #000;
}
.video-pause{display: none;}
video{background: #000;}

.bigCont:hover .video-pause.show{display: block;}
.video-play,.video-pause{
  position: absolute;
  left: 0;top: 0;
  bottom: 0;right: 0;
  margin:auto;
  z-index: 2;
  cursor: pointer;
  width:52px;

  max-width: 20%;
}
.video-play.hideImg{
  display: none;
}
.bigCont video{
  width:100%;
  height:100%;
}
.smallList {
  width:100%;
  height:102px;
  overflow: hidden;
  margin-bottom: 40px;
}
.smallList .imgItem{
  float: left;
  width:10.2%;
  height: 100%;
  max-width: 152px;
  background: no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  margin-right: 1%;
  cursor: pointer;
  border:3px solid transparent;
}
.smallList .imgItem.act{border:3px solid #c29e38;}
.smallList .imgItem.notMr{margin-right: 0;}
.relateList .swiper-pagination-bullet-active{background: linear-gradient(to right,#d1ab40,#906210);}
.c-footer{margin-top: 0!important;}

.swiperCont{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 669999;
  background: rgba(0,0,0,.9);
  display: none;
}
.swiperCont.show{display: block;}
.swiperCont .swiper-box,.swiperCont .swiper-container,.swiperCont .swiper{
  position: absolute;
  left: 0;
  top: 0;bottom: 0;
  margin:auto 0;
  width: 100%;
  height: 100%;
}
.swiperCont .swiper-box .swiper-slide img{
  position: absolute;
  left: 0;
  top: 0;bottom: 0;
  right: 0;
  margin:auto;
  max-width: 100%;
  max-height: 100%;
}
.swiperCont .swiper-pagination-bullet{
  background: #ddd;
}
.swiperCont .swiper-pagination-bullet-active{
  background: #c29e38;
}
@media (min-width:1200px) and (max-width:1500px){
.bransh{font-size: 16px;padding-top: 20px;}
.userComment{padding:30px 0;}
.userComment .userInfo .avatar{width: 60px;height: 60px;margin-right: 20px;}
.userComment .userInfo{line-height: 60px;}
.userComment .info{padding-left: 80px;font-size: 18px;line-height: 26px;}
.userComment .userInfo .name{font-size: 24px;}
.bigCont{height: 560px;}
.relateList{padding-top: 40px;}
.relateList .title h5{font-size: 28px;padding-bottom: 30px;}
.relateList .title h5 span{font-size: 14px;}
.detial .qrcode{font-size: 20px;}
.detial .qrcode img{width: 248px;height: 248px;}
.relateList .lists .litem .imgBox{
  height: 140px;
}
.relateList .lists .litem .infos{
  height: 130px;
}
.relateList .lists .litem .date{
  font-size: 12px;
  padding-top: 16px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.relateList .lists .litem .text{
  font-size: 14px;
  line-height: 22px;
  height: 40px;
}
}
@media (min-width:950px) and (max-width:1200px){
  .smallList{height: 80px;margin-bottom: 30px;}
  .relateList .lists .litem .userInfo{font-size: 14px;padding-bottom: 0;}
  .relateList .lists .litem .imgBox{
    height: 140px;
  }
  .relateList .lists .litem .infos{
    height: 130px;
  }
  .relateList .lists .litem .date{
    font-size: 12px;
    padding-top: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .relateList .lists .litem .text{
    font-size: 14px;
    line-height: 22px;
    height: 40px;
  }
  .bransh{font-size: 14px;padding-top: 10px;}
  .userComment{padding:30px 0;}
  .userComment .userInfo .avatar{width: 50px;height: 50px;margin-right: 20px;}
  .userComment .userInfo{line-height: 50px;}
  .userComment .info{padding-left: 70px;font-size: 16px;line-height: 26px;}
  .userComment .userInfo .name{font-size: 24px;}
  .bigCont{height: 520px;margin-bottom: 30px;}
  .relateList{padding-top: 40px;}
  .relateList .title h5{font-size: 26px;padding-bottom: 20px;}
  .relateList .title h5 span{font-size: 12px;}
  .detial .qrcode{padding:30px 0 50px;font-size: 18px;}
  .detial .qrcode img{width: 208px;height: 208px;}
  .relateList .lists .litem .item-count{font-size: 14px;}

}
@media (min-width:800px) and (max-width:950px){
  .smallList{height: 70px;margin-bottom: 20px;}
  .relateList .lists .litem .item-count{font-size: 12px;}
.relateList .lists .litem .userInfo{font-size: 14px;padding-bottom: 0;}
  .relateList .lists .litem .imgBox{
    height: 130px;
  }
  .relateList .lists .litem .infos{
    height: 130px;
  }
  .relateList .lists .litem .date{
    font-size: 12px;
    padding-top: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .relateList .lists .litem .text{
    font-size: 14px;
    line-height: 22px;
    height: 40px;
  }
  .bransh{font-size: 14px;padding-top: 10px;}
  .userComment{padding:20px 0;}
  .userComment .userInfo .avatar{width: 40px;height: 40px;margin-right: 20px;}
  .userComment .userInfo{line-height: 50px;}
  .userComment .info{padding-left: 60px;font-size: 14px;line-height: 24px;}
  .userComment .userInfo .name{font-size: 24px;}
  .bigCont{height: 400px;margin-bottom: 30px;}
  .relateList{padding-top: 40px;}
  .relateList .title h5{font-size: 20px;padding-bottom: 20px;}
  .relateList .title h5 span{font-size: 12px;}
  .detial .qrcode{padding:40px 0 50px;font-size: 18px;}
  .detial .qrcode img{width: 208px;height: 208px;}
  .userComment .date{padding-top: 0;}
}
@media (max-width:800px){
  /*.wap-wrap .head-nav{background: none;}*/
  .userComment{padding:80px 0 15px;}
  .userComment .userInfo .avatar{width: 30px;height: 30px;margin-right: 12px;}
  .userComment .userInfo{line-height: 30px;}
  .userComment .info{padding-left: 42px;font-size: 12px;line-height: 22px;}
  .userComment .userInfo .name{font-size: 14px;}
  .bigCont,.videoDetail .bigCont{height: 400px;margin-bottom: 30px;}
  .relateList{padding-top: 8px;}
  .relateList .title h5{font-size: 16px;padding-bottom: 0;padding-left: 14px;}
  .relateList .title h5 span{font-size: 12px;}
  .detial .qrcode{padding:25px 0;font-size: 12px;}
  .detial .qrcode img{width: 80px;height: 80px;margin-bottom: 6px;}
  .relateList .lists{width:auto;}
  .relateList .lists .litem{width:100%;}
  /*.relateList{width:100%;height:380px;}*/
  .smallList{
    height:auto;
    margin-bottom: 20px;
  }
  .smallList .imgItem{
    float: left;
    width:31%;
    margin-right: 2.3%;
    height:90px;
    margin-bottom: 10px;
  }
  .relateList .lists .litem .date{font-size: 12px;padding-bottom: 10px;}
  .relateList .lists .litem .date::after{width: 20px;height: 1px;bottom:4px;}
  .relateList .lists .litem .item-count{font-size: 12px;}
  .relateList .lists .litem .userInfo{font-size: 14px;}
  .bigCont:hover .video-pause.show{display: none;}
  .bigCont .date{position: absolute;left: 0;bottom: 18px;font-size: 14px;color:#777;}
  .content{position: relative;padding-bottom:  20px;}
  .content .date{position: absolute;left: 0;bottom:   14px;font-size: 14px;color:#777;}
  .wap-wrap .head-nav{background: none;}
}