127 lines
7.0 KiB
CSS
Executable File
127 lines
7.0 KiB
CSS
Executable File
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;
|
|
}
|