@charset "UTF-8";
body{
  background-color: #262159;
}
*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.cblue{
  color: #33ccff;
}
.container{
  width: 7.5rem;
  height: 18.5rem;
  margin: 0 auto;
  background: url("../imgs/bg.jpg?__rev=b327603") no-repeat 0 0;
  background-size: 100%;
  padding-top: 1px;
}

.header{
  margin: 1.5rem auto 0;
  text-indent: -99999px;
  position: relative;
  width: 6.18rem;
  height: 2.51rem;
}
.header .title{
  width: 100%;
  height: 100%;
}
.header .subtitle{
  width: 4.14rem;
  height: 0.7rem;
  background: url("../imgs/sub_title.png?__rev=698149e") no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  left: 0.9rem;
  top: 1.9rem;
}

.content{
  margin-top: 3.08rem;
}
.content .total-num{
  width: 5.7rem;
  height: 0.66rem;
  background: url("../imgs/bg_num.png?__rev=6f493f1") no-repeat 0 0;
  background-size: 100%;
  margin: 0 auto;
  text-align: center;
}
.content .total-num p{
  font-size: 0.28rem;
  line-height: 0.66rem;
  color: #ffffff;
  text-shadow: -0.06rem 0 0.06rem #1036cf,
               0 -0.06rem 0.06rem #1036cf,
               0.06rem 0 0.06rem #1036cf,
               0 0.06rem 0.06rem #1036cf;
               
}
.content .total-num em{
  padding: 0 0.06rem;
  color: #ffff00;
  letter-spacing: 0.01rem;
  min-width: 0.2rem;
  display: inline-block;
}
.content .btns{
  margin-top: 0.1rem;
  text-indent: -9999px;
}
.content .btns .support-btn{
  width: 3.79rem;
  height: 0.98rem;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  margin: 0 auto;
  display: block;
}
.content .btns .support-btn.normal{
  background-image: url("../imgs/btn_support.png?__rev=82391ec");
}
.content .btns .support-btn.disabled{
  background-image: url("../imgs/btn_support_disabled.png?__rev=34466da");
}
.content .btns .download-btn{
  width: 3.79rem;
  height: 0.98rem;
  background: url("../imgs/btn_dl.png?__rev=1006c34") no-repeat 0 0;
  background-size: 100%;
  margin: 0.2rem auto 0;
  display: block;
}
.content .not-support{
  margin: 0.2rem auto 0;
  width: 7.32rem;
  height: 6.01rem;
  background: url("../imgs/border_1.png?__rev=7218c86") no-repeat 0 0;
  background-size: 100%;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}
.content .not-support p{
  font-size: 0.32rem;
  color: #fff;
  line-height: 0.6rem;
  letter-spacing: 0.02rem;
}
.content .not-support p .username{
  color: #ffff66;
}
.content .support-list{
  margin: 0.2rem auto 0;
  width: 7.28rem;
  height: 5.98rem;
  background: url("../imgs/border_2.png?__rev=ba45abf") no-repeat 0 0;
  background-size: 100%;
  padding-top: 1px;
}
.content .support-list .support-num{
  margin-top: 0.48rem;
  margin-right: 0.6rem;
  text-align: right;
  color: #33ccff;
  font-size: 0.2rem;
}
.content .support-list .support-num i{
  display: inline-block;
  width: 0.28rem;
  height: 0.28rem;
  background: url("../imgs/i_person.png?__rev=cd8cddd") no-repeat 0 0;
  background-size: 100%;
  vertical-align: middle;
  margin-right: 0.05rem;
  margin-top: -0.02rem;
}
.content .support-list ul{
  width: 6.66rem;
  height: 4.32rem;
  margin: 0.4rem auto 0;
  box-sizing: border-box;
  overflow: auto;
}
/* 滚动槽 */
.content .support-list ul::-webkit-scrollbar {
  width: 0.06rem;
  height: 0.06rem;
}
.content .support-list ul::-webkit-scrollbar-track {
  background: #9966ff;
}
/* 滚动条滑块 */
.content .support-list ul::-webkit-scrollbar-thumb {
  background: #99ffff;
}
.content .support-list li{
  margin-bottom: 0.06rem;
  font-size: 0.2rem;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.content .support-list li .avatar{
  width: 0.72rem;
  height: 0.81rem;
  background: url("../imgs/i_avatar.png?__rev=9967145") no-repeat 0 0;
  background-size: 100%;
  margin-right: 0.06rem;
}
.content .support-list li .info{
  max-width: 2rem;
  min-width: 1.2rem;
}
.content .support-list li .info p{
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
  line-height: 0.28rem;
}
.content .support-list li .word{
  width: 4.86rem;
  height: 0.64rem;
  background: url("../imgs/bg_comment.png?__rev=b59f301") no-repeat 0 50%;
  background-size: 100%;
  padding: 0 0.26rem;
  box-sizing: border-box;
  line-height: 0.64rem;
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
}
.content .rule{
  width: 0;
  height: 0;
  text-indent: -9999px;
}

/* toast */
.toast {
  position: fixed;
  background: #ddd;
  z-index: 9999;
  left: 50%;
  padding: 0.1rem 0.4rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  -webkit-border-radius: 0.4rem;
  border-radius: 0.4rem;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  bottom: -10%;
  -webkit-transition: bottom 0.5s;
  -o-transition: bottom 0.5s;
  transition: bottom 0.5s;
}
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #000;
  opacity: 0.6;
  display: none;
}
.popup{
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  background: url("../imgs/popup_bg.png?__rev=c804540") no-repeat;
  background-size: 100%;
  z-index: 100;
  width: 5.35rem;
  height: 3.17rem;
  display: none;
  transition: all .5s ease;
  opacity: 0;
}
.popup .msg{
  font-size: .32rem;
  text-align: center;
  margin: .64rem auto .3rem;
  color: #fff;
  line-height: .56rem;
  height: 1.06rem;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2; 
}
.popup .btnOk{
  display: block;
  margin: 0 auto;
  background: url("../imgs/popup_btn_ok.png?__rev=53af76a") no-repeat;
  background-size: 100%;
  width: 1.97rem;
  height: .68rem;
}
.popup .btnClose{
  display: block;
  margin: 0 auto;
  width: .92rem;
  height: .92rem;
  background: url("../imgs/popup_btn_close.png?__rev=26d37c1") no-repeat;
  background-size: 100%;
  margin-top: 0.6rem;
}
.channel-icon {
  position: absolute;
  display: block;
  bottom: -0.20rem;
  left: 0.53rem;
  background-size: 100%;
  width: 2.9rem;
  height: 1.1rem;
  overflow: hidden;
}

.channel-icon-detail {
  display:block;
  top: 1.07rem;
  left: .52rem;
  background-repeat: no-repeat;
  background-size: 1.4rem 1.1rem;
  width: 2.9rem;
  height: 2.26rem;
  margin-top: -1.4rem;
  background-position: center bottom;
}

/**标题故障效果**/
.header{
  --glitch-width: 6.18rem;
  --glitch-height: 2.51rem;
  --gap-horizontal: 0.05rem;
  --gap-vertical: 0.5rem;
  --time-anim: 4s;
  --delay-anim: 1s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: none;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: transparent;
}
.glitch {
  width: var(--glitch-width);
  height:  var(--glitch-height);
  overflow: hidden;
}
.glitch__img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--glitch-width);
  height: var(--glitch-height);
  background: url("../imgs/title.png?__rev=245fc23");
  background-size: cover;
  background-color: var(--blend-color-1);
  transform: translate3d(0, 0, 0);
  background-blend-mode: var(--blend-mode-1);
  z-index: 0;
  opacity: 0.9;
}

.glitch__img:nth-child(2) {
  background-color: var(--blend-color-2);
  background-blend-mode: var(--blend-mode-2);
  animation-name: glitch-anim-1;
}

.glitch__img:nth-child(n+2) {
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.glitch__img:nth-child(n+2) {
  opacity: 0;
  z-index: 10;
}

.glitch__img:nth-child(3) {
  background-color: var(--blend-color-3);
  background-blend-mode: var(--blend-mode-3);
  animation-name: glitch-anim-2;
}

.glitch__img:nth-child(4) {
  background-color: var(--blend-color-4);
  background-blend-mode: var(--blend-mode-4);
  animation-name: glitch-anim-3;
}

.glitch__img:nth-child(5) {
  background-color: var(--blend-color-5);
  background-blend-mode: var(--blend-mode-5);
  animation-name: glitch-anim-flash;
}

/* Animations */

@keyframes glitch-anim-1 {
  0% {
      opacity: 1;
      transform: translate3d(var(--gap-horizontal), 0, 0);
      -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
      clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }

  2% {
      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
      clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }

  4% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
      clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }

  6% {
      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
      clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }

  8% {
      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
      clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }

  10% {
      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
      clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }

  12% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
      clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }

  14% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
      clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }

  16% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }

  18% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
      clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }

  20% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
      clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }

  21.9% {
      opacity: 1;
      transform: translate3d(var(--gap-horizontal), 0, 0);
  }

  22%,
  100% {
      opacity: 0;
      transform: translate3d(0, 0, 0);
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
      opacity: 1;
      transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
      -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
      clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }

  3% {
      -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
      clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }

  5% {
      -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
      clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }

  7% {
      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
      clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }

  9% {
      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
      clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }

  11% {
      -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
      clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }

  13% {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
      clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }

  15% {
      -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
      clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }

  17% {
      -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
      clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }

  19% {
      -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
      clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }

  20% {
      -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
      clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }

  21.9% {
      opacity: 1;
      transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
  }

  22%,
  100% {
      opacity: 0;
      transform: translate3d(0, 0, 0);
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-3 {
  0% {
      opacity: 1;
      transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
      clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }

  1.5% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
      clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }

  2% {
      -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
      clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }

  2.5% {
      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
      clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }

  3% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
      clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }

  5% {
      -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
      clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }

  5.5% {
      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
      clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }

  7% {
      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
      clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }

  8% {
      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
      clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }

  9% {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
      clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }

  10.5% {
      -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
      clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }

  11% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
      clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }

  13% {
      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
      clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }

  14% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
      clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }

  14.5% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
      clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }

  15% {
      -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
      clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }

  16% {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
      clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }

  18% {
      -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
      clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }

  20% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
      clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }

  21.9% {
      opacity: 1;
      transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
  }

  22%,
  100% {
      opacity: 0;
      transform: translate3d(0, 0, 0);
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-text {
  0% {
      transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
      clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }

  2% {
      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
      clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }

  4% {
      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
      clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }

  5% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
      clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }

  6% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
      clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }

  7% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }

  8% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
      clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }

  9% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
      clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }

  9.9% {
      transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
  }

  10%,
  100% {
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}


/* Flash */

@keyframes glitch-anim-flash {

  0%,
  5% {
      opacity: 0.2;
      transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }

  5.5%,
  100% {
      opacity: 0;
      transform: translate3d(0, 0, 0);
  }
}