*{margin:0;padding:0;box-sizing: border-box;font-family:"MicrosoftYaHei",Arial,Helvetica,sans-serif;}

/* html,body{width:100%;height:100%;overflow: hidden} */
html, body{width:100%;overflow: auto; }
a,a:hover{text-decoration:none!important;}
li{list-style:none;}
button{border:none;outline:none;cursor:pointer;}
input{border:none;outline:none;background: none;}

.w100{width:100%;}
.wh100{width:100%;height:100%;}

.fl{float:left;}
.fr{float:right;}

.fsz-0{font-size: 0;}

.pr{position:relative;}
.pa{position:absolute;}

.inb{display:inline-block;}
.tc{text-align:center;}

.vam{vertical-align:middle;}
.hide{display:none;}

.mglr-8{
  margin: 0 8px;
}.mgt-20{
  margin-top: 20px;
}.mgr-30{
  margin-top: 30px;
}
.mgr-4{
  margin-right: 4px;
}.mgr-12{
  margin-right: 12px;
}.mgr-20{
  margin-right: 20px;
}.mgl-20{
  margin-left: 20px;
}.pdt-36{
  padding-top: 36px
}.pdt-48{
  padding-top: 48px
}.pdt-24{
  padding-top: 24px
}.pdt-12{
  padding-top: 12px
}.color_red{
  color: #d65508;
}.color_yellow{
  color: #ffe933;
}.bold{
  font-weight: bold;
}

.btn{
  transition: transform 0.2s;
  cursor: pointer;
  background: none;
  vertical-align: middle;
  background-color: transparent;
}.btn:hover{
  transform: translateY(-4px);
}.btn:active{
  transition: transform 0s;
  transform: translateY(0px);
  filter: brightness(0.95)
}.btn.disabled{
  filter: brightness(0.6)
}

.newcommonNav .game-list:hover, 
.newcommonNav .more-link:hover {
  height: 100px;
}

#app{
  width: 100%;
  min-width:1200px;
  max-width:1920px;
  margin:0 auto;
  overflow: hidden;
  height: 2760px;
}
.main{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}img.logo{
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 100;
}

.bg_wrap{
  position: absolute;
  top: 0px;
  width: 100%;
}.bg.bg_1{
  height: 2760px;
  background-image: url(../img/bg.jpg);
  background-position: center;
}.bg.bg_2{
  height: 2176px;
  background-position: center;
}

.block{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.sideBar{
  position: fixed;
  top: 250px;
  right: 24px;
  z-index: 100;
}.booking{
  animation: 1.5s up-down ease-in-out infinite;
  animation-direction: alternate;
}.btn_yuyue{
  position: absolute;
  top: 146px;
  left: 64px;
  width: 120px;
  height: 42px;
  background: url(../img/booking-btn.png);
}.booking_count{
  position: absolute;
  top: 194px;
  left: 46px;
  width: 154px;
  color: #ffd9d9;
  font-size: 14px;
  text-align: center;
}.btn_rules{
  position: absolute;
  top: 260px;
  left: 94px;
  width: 70px;
  height: 87px;
  background: url(../img/rules.png)
}.btn_team{
  position: absolute;
  top: 370px;
  left: 94px;
  width: 70px;
  height: 87px;
  background: url(../img/my-team.png)
}

@keyframes up-down {
  from {
      transform: translateY(10px);
  }
  to {
      transform: translateY(-10px);
  }
}

.top_button{
  position: absolute;
  top: 30px;
  right: 30px;
  color: #fff;
  z-index: 10;
}
.block_1{
  height: 794px;
}.block_1 .btn{
  position: absolute;
}.role{
  margin: 0 auto 0 auto;
  width: 820px;
}.role img{
  position: absolute;
  top: 72px;
}.bg_linght{
  position: absolute;
  top: 150px;
  left: -162px;
}.block_1 .btn_to_create{
  top: 620px;
  left: -56px;
  width: 290px;
  height: 140px;
  background: url(../img/create.png?v=2);
}.block_1 .btn_to_room{
  top: 620px;
  left: 952px;
  width: 290px;
  height: 140px;
  background: url(../img/jion.png?v=2);
}.block_1{
  --color-text: #fff;
  --color-bg: #000;
  --color-link: #412f91;
  --color-link-hover: #fff;
  --color-info: #1034ff;
  --glitch-width: 957px;
  --glitch-height: 163px;
  --gap-horizontal: 20px;
  --gap-vertical: 50px;
  --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;
}.block_1 .title {
  padding-top: 36px;
}.block_1 .glitch {
  display: inline-block;
  width: 957px;
  height: 163px;
  overflow: hidden;
}.block_1 .glitch:hover {
    cursor: pointer;
}.block_1 .glitch__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 957px;
    height: 163px;
    background: url(../img/title.png);
    background-color: var(--blend-color-1);
    transform: translate3d(0, 0, 0);
    background-blend-mode: var(--blend-mode-1);
    opacity: 0.9;
}.block_1 .glitch__img:nth-child(n+2) {
    opacity: 0;
}.block_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;
}.block_1 .glitch__img:nth-child(2) {
    background-color: var(--blend-color-2);
    background-blend-mode: var(--blend-mode-2);
    animation-name: glitch-anim-1;
}.block_1 .glitch__img:nth-child(3) {
    background-color: var(--blend-color-3);
    background-blend-mode: var(--blend-mode-3);
    animation-name: glitch-anim-2;
}.block_1 .glitch__img:nth-child(4) {
    background-color: var(--blend-color-4);
    background-blend-mode: var(--blend-mode-4);
    animation-name: glitch-anim-3;
}.block_1 .glitch__img:nth-child(5) {
    background-color: var(--blend-color-5);
    background-blend-mode: var(--blend-mode-5);
    animation-name: glitch-anim-flash;
}

.block_2{
  margin-left: -164px;
  padding-top: 40px;
  width: 1522px;
  height: 100px;
  background: url(../img/scroll-bar.png);
  background-position: center
}.scroll_item{
  display: none;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
}.scroll_item .color_yellow{
  cursor: pointer;
}.scroll_item .color_yellow:hover{
  text-decoration-style: solid;
}

.block_3{
  padding-top: 28px;
  height: 898px;
}.search_bar{
  margin: 0 auto;
  height: 48px;
  width: 1246px;
}.search_key input{
  position: relative;
  padding: 0 36px 0 12px;
  width: 240px;
  height: 34px;
  color: #cbb7ff;
  font-size: 14px;
  box-sizing: border-box;
  border: 1px solid #8b60f9;
  background: #412f91;
  z-index: 8;
}.search_key input:focus{
  box-shadow: 0 0 10px rgba(155, 116, 255, 0.6);
}.search_key input::-webkit-input-placeholder{
  color: #a292ca;
}.search_key img{
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 10;
  cursor: pointer; 
}.search_type {
  margin-left: 10px;
  width: 80px;
  height: 34px;
  color: #cbb7ff;
  line-height: 34px;
  text-align: center;
  border: 1px solid #8b60f9;
  z-index: 10;
}.search_type li{
  height: 0;
  overflow: hidden;
  transition: all 0.2s;
  background: #412f91;
}.search_type:hover li{
  height: 34px;
}.search_type .curr_type{
  width: 68px;
  cursor: pointer;
}.search_type li{
  width: 80px;
  color: #cbb7ff;
  line-height: 34px;
  text-align: center;
  border-top: none;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(155, 116, 255,1) inset;
}.search_type li:hover{
  box-shadow: 0 0 8px rgba(155, 116, 255,1) inset;
}.search_type:hover{
  color: #d3c2ff;
  box-shadow: 0 0 10px rgba(155, 116, 255, 0.6);
}.arrow {
  position: absolute;
  top: 14px;
  right: 6px;
  width: 0;
  height: 0;
  border-width: 6px 6px 6px;
  border-style: solid;
  border-color: #8b60f9 transparent transparent ;
}.room_list {
  margin-left: -84px;
  width: 1540px;
  min-height: 774px;
  /* text-align: center; */
}.room {
  display: inline-block;
  margin: 20px 26px;
  padding: 24px 0 0 0;
  width: 287px;
  height: 347px;
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  background-image: url(../img/room-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  text-align: left;
}.room.temp{
  background: none;
}.room>p{
  padding: 0 0 0 24px;
}.room>p.team_slogan{
    height: 60px;
}.room .members{
  padding: 0px 0 0 10px;
}.members .icon{
  display: inline-block;
  margin: 0 2px;
  height: 74px;
  font-size: 14px;
  color: #c8a9ff;
}.dialog .members .icon{
  height: 86px;
  color: #666666;
}.members .icon img{
  margin: 0 6px;
  width: 74px;
}.dialog .members .icon img{
  width: 86px;
  margin: 0 10px;
}.btn_room_jion{
  margin: 12px 0 0 24px;
  width: 240px;
  height: 48px;
  background-image: url(../img/room-jion.png);
  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.2);
}.btn_room_jion:active{
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) inset;
}.room_nav{
  margin-top: 30px;
}.page_index{
  display: inline-block;
  margin: 0 12px;
  padding: 0 12px;
  height: 36px;
  color: #cbb7ff;
  font-size: 14px;
  line-height: 36px;
  border: 1px solid #8b60f9;
  background: #412f91;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  user-select: none;
}.page_index.curr{
  color: #ffe933;
  border: 1px solid #ffe933;
}.page_index:hover{
  box-shadow: 0 0 10px rgba(155, 116, 255, 0.6);
}

.block_4{
  margin-top: 392px;
  white-space: nowrap;
}.block_4 .reward {
  margin-left: -74px;
  height: 398px;
}.block_4 .reward img{
  margin: 0 80px 0 0;
}.block_4 .btm_btn{
  padding-top: 86px;
  text-align: center;
}.block_4 .btm_btn .desc{
  display: none;
  position: absolute;
  top: -72px;
  left: -2px;
  padding: 12px;
  width: 213px;
  color: #fff;
  font-size: 15px;
  line-height: 18px;
  background: rgba(0, 0, 0, 0.5);
  white-space: initial;
  word-break: break-all;
}.block_4 .btn_to_create:hover .desc{
  display: block;
}.block_4 .btn{
  position: relative;
  background: none;
  margin-left: 14px;
}.block_4 .btn:first-child{
  margin-left: 26px;
}

.all_dialog{
  z-index: 10000;
}.all_dialog .dialog_body>.close{
  position: absolute;
  top: -24px;
  right: -60px;
  width: 46px;
  height: 40px;
  background: url(../img/normal_96.png);
  cursor: pointer;
  z-index: 10;
}.all_dialog .close:hover{
  background: url(../img/hover_57.png)
}.dialog_cover{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5)
}.dialog{
  display: none;
  position: fixed;
  top: 15%;
  left: 50%;
}.dialog.dialog_msg .dialog_body{
  background: none;
  border: none;
  text-align: center;
  z-index: 10;
}.dialog.dialog_msg p{
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  background: #666;
  border-radius: 8px;
}.dialog.small .dialog_body{
  margin-left: -230px;
  width: 460px;
}.dialog_body{
  position: relative;
  padding:  24px 24px 36px 24px;
  width: 620px;
  min-height: 250px;
  margin-left: -310px;
  color: #333;
  background-image: url(../img/dialog-bg.jpg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: top center;
  border: 4px solid#aea88a;
  z-index: 10;
}.dialog .title{
  margin-bottom: 24px;
  text-align: center;
  white-space: nowrap;
}.dialog .title h2{
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
}.dialog .title_bg{
  display: inline-block;
  width: 90px;
  height: 30px;
  background-image: url(../img/title_bg.png);
  background-position-x: -30px;
}.dialog .title_bg.bg_r{
  background-position-x: -250px;
}.dialog .inner p{
  font-size: 18px;
  line-height: 32px;
}.dialog .dig_input{
  margin: 0 auto 18px auto;
  width: 440px;
  height: 50px;
  padding: 0 12px;
  background: url(../img/input_bg.png);
  background-color: none;
}.dialog .dig_input.small{
  width: 280px;
  background: url(../img/input_bg_small.png);
  background-size: 100% 100%;
}.dialog .dig_input input{
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  background: none;
  color: #736f5c;
}.dialog .dialog_btn{
  width: 224px;
  height: 70px;
  line-height: 70px;
  padding: 0 12px;
  font-size: 28px;
  color: #d65508;
  font-weight: 700;
  background: url(../img/dialog_btn.png);
}.dialog .dialog_btn.small{
  width: 110px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background: url(../img/dialog_btn_small.png);
}.dialog .dialog_btn.small_2{
  width: 140px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background: url(../img/dialog_btn_small2.png);
}.dialog .invite{
  margin: 24px -24px -36px -24px;
  padding-bottom: 36px;
  background: #eee;
}.dialog .invite li{
  display: inline-block;
  margin: 0 8px;
  background: none;
}.dialog .link input{
  width: 340px;
  height: 34px;
  border: 1px #ddd solid;
  background: #fff;
}.dialog .link .btn{
  width: 100px;
  height: 34px;
  border: 1px #ddd solid;
  color: #fff;
  background: #8957db;
  vertical-align: middle
}.dialog .lixi{
  position: absolute;
  bottom: 0;
  right: -120px;
}.dialog .word{
  position: absolute;
  top: 0;
  left: 12px;
}.dialog .word p{
  padding: 18px 12px 0 16px;
  color: #fff;
  line-height: 1.5;
  font-size: 14px;
}.dialog .word .btn{
  margin-left: 28px;
  width: 100px;
  height: 36px;
  line-height: 1.5;
  font-size: 14px;
  background-size: 100px 36px;
}
.dialog_team .word1{
  display: block
}.dialog_team .word2{
  display: none;
}.team_sucess .word1{
  display: none;
}.team_sucess .word2{
  display: block
}.team_sucess .word2 p{
  margin-left: 18px;
  font-size: 20px;
}

.dialog_yuyue_login .input {
  margin: 0px auto 15px auto;
  width: 440px;
  text-align: center;
}
.dialog_yuyue_login .radio {
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;
}
.dialog_yuyue_login .sysBox * {
  font-size: 18px;
  vertical-align: middle;
}
.dialog_yuyue_login .ios {
  background: url(../img/ios_n.png) no-repeat 0 0;
  width: 150px;
  height: 58px;
}
.dialog_yuyue_login .ios:hover, .dialog_yuyue_login .ios.active {
  background-image: url(../img/ios_h.png);
}
.dialog_yuyue_login .android:hover, .dialog_yuyue_login .android.active {
  background-image: url(../img/android_h.png);
}
.dialog_yuyue_login .android {
  background: url(../img/android_n.png) no-repeat 0 0;
  width: 150px;
  height: 58px;
}
.dialog_yuyue_login .android {
  margin-left: 40px;
}.dialog_yuyue_login .input .border {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}.dialog_yuyue_login .getcode.active {
    background: #f6d150!important;
    color: #905f0a;
    border-radius: 12px;
    vertical-align: middle;
}.dialog_yuyue_login .emailBox .autoSel {
  position: absolute;
  font-family: 'MicrosoftYaHei';
  top: 16px;
  right: 10px;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 2px;
  color: #a39f7b;
}.dialog_yuyue_login .status {
  position: absolute;
  color: #fff;
  width: 26px;
  display: inline-block;
  height: 26px;
  right: -40px;
  top: 9px;
}.yuyue-btn {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}.login_btn {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}.login_btn div{
  font-weight: 700;
  background: #f7db5d;
  margin: 0 30px;
  font-size: 29px;
}.dialog_yuyue_login.in_login .yuyue-btn {
  display: none;
}.dialog_yuyue_login.in_login .login_btn {
  display: block;
}.dialog_yuyue_login .yuyue-btn{
  display: block;
}.dialog_yuyue_login .login_btn {
  display: none;
}
.dialog_yuyue_login .input .border {
    display: inline-block;
    position: relative;
}.dialog_yuyue_login input {
  font-family: "Microsoft YaHei";
  font-size: 18px;
  color: #494949;
  text-indent: 12px;
}.color-err {
  color: #ff3030;
}.err-tips {
  position: absolute;
  right: 8px;
  top: 0%;
  display: inline-block;
  height: 48px;
  font-size: 14px;
  line-height: 48px;
  text-align: center;
  z-index: 300;
}.dialog_yuyue_login .error {
  background-image: url(http://www.100bt.com/tianti/gwTemplate/pc/res/img/e_tip.png);
}

.shareWpr {
  height: 90px;
  display: block;
  float: none;
  text-align: center;
  background: #eeeeee;
  border-bottom: 1px solid #ddd ;
}
.shareWpr .shareBtn {
  color: #777;
  font-size: 14px;
  line-height: 90px;
  margin-right: 10px;
  margin-left: 5px;
  position: relative;
}
.shareWpr .shareBtn > .icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.shareWpr .shareBtn_weixin > .icon{
  background: url(http://resource.a0bi.com/rev/waltz/img/share_wx.png) no-repeat -60px -10px;
}
.shareWpr .shareBtn_qq > .icon{
  background: url(http://resource.a0bi.com/rev/waltz/img/share_qq.png) no-repeat -60px -10px;
}
.shareWpr .shareBtn_qzone > .icon{
  background: url(http://resource.a0bi.com/rev/waltz/img/share_qqzone.png) no-repeat -60px -10px;
}
.shareWpr .shareBtn_sinaweibo > .icon{
  background: url(http://resource.a0bi.com/rev/waltz/img/share_wb.png) no-repeat -60px -10px;
}
.shareWpr .shareBtn:hover > .icon{
  background-position: -10px -10px;
}
.shareWpr .shareBtn_weixin:hover{
  color: #6eba57;
}
.shareWpr .shareBtn_qq:hover{
  color: #678be5;
}
.shareWpr .shareBtn_qzone:hover{
  color: #ff9933;
}
.shareWpr .shareBtn_sinaweibo:hover{
  color: #dc4541;
}
.weixincode {
  position: absolute;
  left: -128px;
  bottom: 26px;
  top: auto;
  width: 250px;
  padding: 13px 15px 8px;
  border: 1px solid #999;
  background: #fff;
  text-align: center;
  color: #666;
  line-height: 30px;
  font-size: 14px;
  text-decoration: none;
  zoom: 1;
  text-indent: 0;
  z-index: 10;
}.weixincode .code {
  width: 200px;
  display: inline-block;
}


/* Animations */
.animated_slow {
  animation-duration: 1s !important;    
  animation-delay: 0s;   
  animation-iteration-count: 1;   
}
.animated {
  animation-duration: 0.5s !important;    
  animation-delay: 0s;   
  animation-iteration-count: 1;   
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 40%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@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);
  }
}