.fl { float: left; }
.fr { float: right; }
.spr {background: url("https://world.honorofkings.com/ipworld/img/spr-hero-list.2e503b1a.png") no-repeat;background-size: 4rem 1rem}
.main-wrapper { padding: 1.8rem 0 1rem;min-height: 100vh;background: #fff url(https://world.honorofkings.com/ipworld/img/bg.c7e8614f.jpg) 0 0/100% auto no-repeat }
.main-wrapper.tips {
  background: #e4c289;
  padding: 0;
}
.main-center { width: 23.64rem; margin: 0 auto }
.video-list { display: flex; flex-wrap: wrap ;margin-top: .35rem;}
.video-item { width: 5.12rem; height: 2.88rem; margin: 0 1.03rem 0.95rem 0 }
.video-item:nth-child(4n) { margin-right: 0 }
.video-item a { display: block; width: 100%; height: 100%; position: relative;border: 3px solid #e09f52; }
.video-item a img { display: block; width: 100%; height: 100%; object-fit: cover }
.video-mask { width: calc(100% - 3px); height: calc(100% - 3px); position: absolute; top: -3px; left: -3px; z-index: 2; opacity: 0; transition: opacity .3s ease; border: 6px solid #e09f52; box-shadow: 0 0 0.08rem rgba(255,208,128,.67); background: rgba(21,13,0,.85);}
.play-btn { position: absolute; z-index: 3; width: 1.2rem; height: 1.2rem; background: url(https://world.honorofkings.com/ipworld/img/play-video-btn.png) no-repeat; background-size: 100%; top: 0.5rem; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .3s ease }
.play-btn2 { position: absolute; width: 1.2rem; height: 1.2rem; background: url(https://world.honorofkings.com/ipworld/img/play-video-btn2.png) no-repeat; background-size: 100%; top: 0.5rem; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .3s ease }
.video-center-text { opacity: 10; position: absolute; z-index: 3; width: 100%; height: 0.7rem; bottom: 0; background: rgba(0,0,0,0.6); background-size: 100%; padding: 0 0.2rem; box-sizing: border-box; line-height: 0.7rem; border-top: 1px solid transparent; transition: color .3s ease,border-color .3s ease }
.video-center-text p { opacity: 10; font-size: 0.2rem; color: #fff; transition: color .3s ease;z-index: 1;position: relative; font-family: 'Radikal';}
.video-center-text p.fl{width: 4.1rem;height: 100%;overflow: hidden;;}
.video-center-text p.fr{z-index: 2;position: absolute;top: 0;right: 0.2rem;}
.video-item:hover .video-mask { opacity: 1 }
.video-item:hover .play-btn { opacity: 1 }
.video-item:hover .video-center-text { color: #e4c289; background: none;    transition: all .3s ease;}
.video-item:hover .video-center-text p { color: #f3b55e }
.video-item:hover .video-center-text::before{content: '';width: calc(100% - 4px);height: 100%;position: absolute;left: 3px;top: -1px;display: block;background: rgba(0,0,0,0.6);border-top: 1px solid rgba(140,127,104,.8)}
.video-item .video-center-text::after{content: '';width: 1.5rem;height: 100%;position: absolute;top: 0px;right: 0;display: block;background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1),rgba(0,0,0,1));z-index: 1;}
.no-data-filter { color: #000; font-size: 0.4rem; letter-spacing: 0rem; text-align: center; width: 100%; padding: 1rem 0 0 }

.video-tips {
  color: #fff;
  text-align: center;
  font-size: 2rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 1rem;
  line-height: 1rem;
}