img{ width: 100%; display: block;}
.header{ width: 100%; height: 1rem; background: url(../images/header.jpg) repeat-x; background-size: auto 100%; position: fixed; top: 0; left: 0; z-index: 9999;}
.header_cont{ width: 10.3rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding-top: 0.1rem;}
.header_logo{ width: 0.8rem;}
.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: 3.5rem;}

.container{ width: 100%; overflow: hidden;}
.section{ width: 100%; height: 10.7rem; position: relative; overflow: hidden;}
.section1{ background: #141414; height: 12.9rem;}
.bline{ width: 100%; height: 15rem; position: absolute; bottom: -1rem; left: 0;}
.bannerlogo{ width: 10.19rem; position: absolute; top: 2rem; left: 0.4rem; z-index: 6;}

.section2{ background: linear-gradient(#0d0d0d,#141414, #141414); background-size: 100% auto; height: 11.6rem;}
.timeblock{ background: rgba(12,12,12,0.6); width: 9.12rem; height: 6.55rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.cit1{ width: 6.06rem; margin: 0 auto 0.88rem; padding-top: 0.96rem;}
.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: 7.8rem; 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: none;}
.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;}

.section3{ background: #111; height: 18rem;}
.lines{ width: 100%; height: 8rem; position: absolute; right: 0; bottom: 0; }
.descper{ position: absolute; top: 0.68rem; left: 0.8rem; width: 9.3rem;}
.ecent{ width: 9.3rem; margin-bottom: 0.2rem;}
.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.4rem; margin: 0 auto 0.7rem; padding-top:1.78rem;}
.cbg{ width: 100%; position: absolute; top: 0.6rem; left: 0;}
.rule_cont{ width: 9.26rem; 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.3rem; line-height: 1.2; color: #d6a165; margin-top: 0.2rem;}
.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;}
}
.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.4rem; color: #fff; text-align: center; width: 100%; position: absolute; top: 57%; left: 50%; transform: translate(-50%,-50%);}
.loaderpic{ width: 3rem; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); animation: ttt 2s infinite linear;}
.loaderpic img{ width: 100%; display: block;}

.ctimebg{ width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
.section1:after{ content: ""; display: block; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 8; height: 0.5rem; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));}
.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));}
.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: 0.2rem 0.2rem;}

.timelines{ width: 0.84rem; position: absolute; top: 4rem; left: 0.8rem; z-index: 3;}
.timelince{ width: 7.4rem; position: absolute; left: 1.6rem;}
.time_dp1{ font-size: 0.32rem; color: #c69967; font-family: "john";}
.time_dp2{ font-size: 0.32rem; 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: 10.3rem; margin: 0 auto; align-items: center; flex-direction: row-reverse;}
.footer_con>a{ display: block; margin-left: 0.8rem;}
.f_icon1{ width: 0.75rem;}
.f_icon2{ width: 0.77rem;}
.f_icon3{ width: 0.85rem;}


@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;}
.percotmodel{ position: absolute; top: 0; left: 0; width: 100%;}
.percotmodel img{ display: block; position: absolute; left: 0; top: 0; opacity: 0;}
.percotmodel img:nth-child(1){ opacity: 1;}

@keyframes ttt{
    0%{ opacity: 1;}
    50%{ opacity: 0.4;}
    100%{ opacity: 1;}
}
#logined_btn{
    color: white;
    font-size: 15px;
}