195 lines
8.8 KiB
CSS
Executable File
195 lines
8.8 KiB
CSS
Executable File
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;
|
|
} |