img,video{ width: 100%; display: block;}
.header{ width: 100%; height: 0.8rem; background: url(../images/header.jpg) repeat-x; background-size: auto 100%; position: fixed; top: 0; left: 0; z-index: 9999;}
.header_cont{ width: 18.6rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.header_logo{ width: 0.7rem; padding-top: 0.05rem;}
.header_nav{ display: flex;}
.header_nav>a{ display: block; font-size: 0.2rem; color: #fff; margin-left: 0.35rem; text-transform: uppercase; font-weight: bold;}
.header_nav>a.act{ color: #141414;}
.headerbtn a{ display: block; width: 2.5rem;}

.container{ width: 100%; overflow: hidden; min-width: 1300px;}
.section{ width: 100%; height: 10.7rem; position: relative; overflow: hidden;}
.section1{ background: #141414;}
.bline{ width: 13.58rem; position: absolute; top: 0; left: 0;}
.bannerlogo{ width: 10.61rem; position: absolute; top: 50%; right: 0.66rem; transform: translate(0,-50%);}

.videobg{ width: 100%; position: absolute; top: 0; left: 0;}
.section2{ background: linear-gradient(#0d0d0d,#141414, #141414); background-size: 100% auto;}
.timeblock{ background: rgba(12,12,12,0.6); width: 10.26rem; height: 5.6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.timer{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.time-title{
   margin-top: 0.5rem; 
  text-align: center;
  /* margin-bottom: 0.4rem;  */
}
.title-img{
  width: 8.12rem !important;
  display: inline-block !important;
}
.time-out{
  width: 10.26rem; height: 5.6rem;background: rgba(89, 89, 89, 0.6); position: absolute; top:0; left: 0; text-align: center;
}
.time-out-img{
  width: 100%!important;
  text-align: center;
  display: flex;
  justify-content: center;
  display: block !important;
}
.time-out-img > a{
  display: flex;
  justify-content: center;
}
.time-out-img > a > img{
  width: 100% !important;
  width: 2.10rem !important;
  /* display: inline-block !important; */
}
.cit1{ width: 9.07rem; margin: 0 auto 0.7rem; padding-top: 0.85rem;}
.cit2{ width: 2.06rem; margin: 0 auto 0.54rem;}
.timeattack{ width: 100%; display: flex; justify-content: center;}
.timecoup{ margin: 0 0.1rem; width: 2rem;}
.time_around{ width: 2rem; height: 2rem; background: #353535; border-radius: 50%; margin: 0 auto 0.35rem; font-size: 1rem; line-height: 2rem; color: #fff; text-align: center;}
.time_desc{ text-align: center; color: #fff; font-size: 0.3rem; text-transform: uppercase;}
.btncont{ width: 100%; position: absolute; top: 6.6rem; left: 0; }
.login_btn{ width: 3.54rem; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); display: block;}
.login_btn:after{ content: ""; display: block; background: url(../images/shape.png) no-repeat; width: 0.46rem; height: 0.19rem; background-size: 100% auto; position: absolute; top: 0.28rem; left: -0.65rem;}
.quest_btn{ width: 3.54rem; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); display: block;}
.quest_btn:after{ content: ""; display: block; background: url(../images/shape.png) no-repeat; width: 0.46rem; height: 0.19rem; background-size: 100% auto; position: absolute; top: 0.28rem; left: -0.65rem;}
.sinupbtn{ width: 3.54rem; position: absolute; bottom: 0.6rem; left: 50%; margin-left: -1.77rem; z-index: 6;}
.sinupbtn>a{ display: block;}
.section1:after{ content: ""; display: block; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 1; height: 1.7rem; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); pointer-events: none;}
.section2:before{ content: ""; display: block;  width: 100%; position: absolute; top: 0; left: 0; z-index: 8; height: 3.09rem; background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));}


.section3{ background: linear-gradient(#222222, #111111); height: 11rem;}
.lines{ width: 6.67rem; height: 0; overflow: hidden; position: absolute; right: 0.56rem; top: 0; animation: slideshow 5s infinite linear;}
.lines>img{ animation: twinkis 1.5s infinite linear;}
.descper{ position: absolute; top: 0.68rem; left: 0.8rem; width: 10.2rem;}
.ecent{ width: 10.05rem; margin-bottom: 0.2rem;}
.ecent:after{ content: ""; display: block; background: url(../images/cl.png) no-repeat; width: 0.18rem; height: 0.18rem; background-size: 100% auto; position: absolute; top: 0.14rem; right: -0.55rem;}
.ecent_desc{ font-size: 0.34rem; color: #fffefe; line-height: 1.6;}
.cll{ width: 0.18rem; position: absolute; top: 0.25rem; left: 3rem;}

.section4{ background: #141414; height: auto;}
.rule_desc{ width: 5.37rem; margin: 0 auto 0.7rem; padding-top:1.78rem;}
.cbg{ width: 100%; position: absolute; top: 0.6rem; left: 0;}
.rule_cont{ width: 13.18rem; margin: 0 auto; padding-bottom: 1rem;}
.rule_sliders{ background: #212121; position: relative; padding: 0.22rem 1.44rem 0.22rem 0.5rem; margin-bottom: 0.06rem; }
.rule_tit{ font-size: 0.36rem; color: #fff; font-family: "bahnschrift";}
.rule_descprition{ font-size: 0.22rem; line-height: 1.2; color: #d6a165; margin-top: 0.1rem;}
.sliderbtn{ display: block; width: 0.32rem; position: absolute; right: 0.3rem; top: 50%; transform: translate(0,-50%);}
.sliderOn .sliderbtn{ transform: translate(0,-50%) rotate(180deg);}

.linelight{ width: 6.75rem; position: absolute; top: 19.3%; left: 3.14%; transform: scale(0.02);}
.lightsc1{ animation: lightscale 3s infinite linear forwards;}
.lightsc2{ animation: lightscale 3s 0.5s infinite linear forwards;}
.lightsc3{ animation: lightscale 3s 1s infinite linear forwards;}
.lightsc4{ animation: lightscale 3s 1.5s infinite linear forwards;}
.lightsc5{ animation: lightscale 3s 2s infinite linear forwards;}
.lightsc6{ animation: lightscale 3s 2.5s infinite linear forwards;}
@keyframes lightscale{
    0%{ transform: scale(0.02); opacity: 0;}
    5%{ opacity: 0.5;}
    60%{ opacity: 0.5;}
    80%{ opacity: 0;}
    100%{ transform: scale(2); opacity: 0;}
}

@keyframes slideshow{
    0%{ height: 0;}
    80%{ height: 100%;}
    100%{ height: 100%;}
}
@keyframes twinkis{
    0%{ opacity: 1;}
    50%{ opacity: 0.3;}
    100%{ opacity: 1;}
}

.timeout{ background: rgba(89,89,89,0.6); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; display: none;}
.timeout>span{ color: #fff; font-size: 0.75rem; background: #835b39; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 0rem 0.2rem;}

.timelines{ width: 0.84rem; position: absolute; top: 4rem; left: 0.8rem;}
.timelince{ width: 8.7rem; position: absolute; left: 1.6rem;}
.time_dp1{ font-size: 0.26rem; color: #c69967; font-family: "john";}
.time_dp2{ font-size: 0.26rem; color: #c69967;}
.tlincp1{ top: 0.7rem;}
.tlincp2{ top: 2.3rem;}
.tlincp3{ top: 3.8rem;}
.tlincp4{ top: 5.4rem;}

.footer{ background:#111111; width: 100%; padding: 0.22rem 0;}
.footer_con{ display: flex; width: 18.25rem; margin: 0 auto; align-items: center; flex-direction: row-reverse;}
.footer_con>a{ display: block; margin-left: 0.6rem;}
.f_icon1{ width: 0.65rem;}
.f_icon2{ width: 0.67rem;}
.f_icon3{ width: 0.75rem;}


@keyframes fadeUp{
    from{ opacity: 0; transform: translate(0,0.5rem);}
    to{ opacity: 1; transform: translate(0,0);}
}
.fadeUp{ opacity: 0;}
.animated .fadeUp{ animation: fadeUp linear both;}
@keyframes fadeLeft{
    from{ opacity: 0; transform: translate(-0.5rem,0);}
    to{ opacity: 1; transform: translate(0,0);}
}
.fadeLeft{ opacity: 0;}
.animated .fadeLeft{ animation: fadeLeft linear both;}

.loading{ background: #000; width: 100%; height: 100%; position: fixed; z-index: 99999; top: 0; left: 0;}
.loadinglines{ width: 80%; height: 0.1rem; position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%);}
.loadnote{ display: block; height: 100%; width: 0%; background: #fff; transition: all 0.4s ease;}
.loadnumber{ font-size: 0.5rem; color: #fff; text-align: center; width: 100%; position: absolute; top: 63%; left: 50%; transform: translate(-50%,-50%);}
.loaderpic{ width: 2.4rem; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); animation: ttt 2s infinite linear;}
.loaderpic img{ width: 100%; display: block;}

#logined_btn{
    color: white;
    font-size: 18px;
    border-radius: 50px;
    line-height: 46px;
    background: #0c0000;
    text-align: center;
    /* margin-top: 0.3vh; */
}
.headerbtn {
    position: relative;
  }
.dropdown-content {
    display: none;
    position: absolute;
    top: 0.78rem;
    /* right: 0.001rem; */
    left: -0.6rem;
    background-color: rgb(18, 18, 18);
    /* min-width: 90%; */
    border-radius: 4px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 0.19rem 0.16rem;
    padding-right: 5rem;
    z-index: 1;
  }
  .dropdown-content a {
    padding: 0.2rem 0.3rem;
    font-size: 18px;
    border-radius: 13px;
    text-align: center;
    font-family: OPPOSans;
    font-weight: normal;
    background: linear-gradient(90deg, #714f34, #f5c384);
    margin-top: 0.2rem;
    color: #fff;
  }
  .cebg-rally{
    font-size: 0.3rem; line-height: 1.2; color: #d6a165;
  }