/*
404 Not Found
404 Not Found
nginx
*/
@keyframes animate4 {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes animate4 {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.onLoadingDiv {
width: 100%;
height: 100%;
background-color: #fff;
/*opacity: 0.8;*/
text-align: center;
font-size: 2em;
color: #000000;
left: 0;
top: 0;
z-index: 12;
font-size:1rem;
color:#000;
text-align: center;
}
.onLoadingDiv img {
display: block;
width: 3.28125rem;
height: 3.28125rem;
margin: 40% auto 0.5rem;
animation: animate4 1s linear infinite;
-webkit-animation: animate4 1s linear infinite;
}
html,
body,
.htmleaf-container {
overflow: hidden!important;
}
.htmleaf-container {
z-index: 10;
position: absolute;
top: 0;
left: 0;
}
#m_btn{
width:1.375rem;
height:1.375rem;
position:absolute;
left:1rem;
top:1rem;
}
#m_btn.active{
animation: play 2s linear infinite;
-webkit-animation: play 2s linear infinite;
}
@keyframes play{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
@-webkit-keyframes play{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
#m_btn img{
display: block;
width:100%;
height:100%;
}
#myCar {
width: 140%!important;
position: absolute;
bottom: -1.3rem;
left: -25%;
z-index: 10;
}
.drop_main {
display: none;
position: relative;
z-index:12;
}
.drop_main1 {
display: block;
}
.drop {
width: 1.53125rem;
height: 5.21875rem;
position: absolute;
transition:all .5s;
opacity: 0;
}
.drop_img .drop{
opacity: 1;
}
.drop.active{
opacity: 1;
}
.drop1 {
top: 7.3125rem;
left: 7.6875rem;
}
.drop2 {
top: 9.375rem;
left: 10.25rem;
}
.drop3 {
top: 6.75rem;
left: 13.375rem;
}
.drop4 {
top: 10.25rem;
left: 16.375rem;
}
.drop5 {
top: 6.75rem;
left: 18.5rem;
}
.drop6 {
top: 13.75rem;
left: 7.5rem;
}
.drop7 {
top: 12.75rem;
left: 13.5rem;
}
.drop8 {
top: 12.75rem;
left: 18.5rem;
}
.drop9 {
top: 7.75rem;
left: 11.5rem;
}
.drop10 {
top: 10.75rem;
left: 8.5rem;
}
.drop11 {
top: 6.75rem;
left: 13.5rem;
}
.drop12 {
top: 8.75rem;
left: 8.5rem;
}
.drop13 {
top: 7.75rem;
left: 12.5rem;
}
.drop14 {
top: 9.75rem;
left: 15.5rem;
}
.drop15 {
top: 9.75rem;
left: 7.5rem;
}
.drop.rotate {
animation: music-move 1s infinite alternate ease-in-out;
-webkit-animation: music-move 1s infinite alternate ease-in-out;
}
@keyframes music-move {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
33% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
66% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes music-move
/* Safari and Chrome */
{
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
33% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
66% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#canvas {
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.bg_wrap {
width: 57.0rem;
height: 100%;
background: url(../images/0_04.jpg) no-repeat;
background-size: 100% 100%;
z-index: 2;
background-position: 0 0;
}
.bg {
height: 100%;
position: absolute;
display: block;
left: 0;
top: 0;
}
.elephant {
width: 8.65625rem;
height: 8.53125rem;
position: absolute;
bottom: 0.8rem;
left: -0.5rem;
z-index: 10;
}
.logo {
width: 6.34375rem;
height: 2.5rem;
position: absolute;
right: 1.25rem;
top: 0.75rem;
z-index: 12;
}
.loadBtn {
width: 6.6875rem;
height: 5.90625rem;
background: url(../images/loadBtn.png) no-repeat;
background-size: 100% 100%;
z-index: 10;
position: absolute;
bottom: 1.875rem;
right: 1.25rem;
z-index: 11;
}
.loadBtn a {
display: block;
width: 6.6875rem;
height: 1.875rem;
position: absolute;
bottom: 0;
left: 0;
}
.loadBtn .show_tc {
width: 100%;
height: 4.125rem;
position: absolute;
top: 0;
left: 0;
}
.mask,
.audio_play,
.text_play,
.tc_main {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: none;
}
.share_bg {
width: 100%;
height: 100%;
background-image: url(../images/share_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
display: none;
z-index: 11;
}
.tc_main .tc_text {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.start {
display: block;
width: 8.65625rem;
height: 2.03125rem;
margin: 9.0625rem auto 0;
}
.tc_text p {
font-size: 0.875rem;
color: #fff;
text-align: center;
margin: 1.5rem 0 3.03125rem 0;
}
.a_share {
width: 14.625rem;
height: 1.78125rem;
margin: 0 auto;
display: flex;
display: -webkit-flex;
justify-content: space-around;
}
.a_share a {
display: block;
width: 6.5625rem;
height: 1.78125rem;
border: 2px solid #00ffd8;
text-align: center;
line-height: 1.65625rem;
color: #00ffd8;
font-size: 0.75rem;
}
.n_close {
display: block;
width: 3.28125rem;
height: 3.28125rem;
position: relative;
margin: 7.4375rem auto 0;
}
.mask_main {
width: 16.1875rem;
height: 26.46875rem;
background: url(../images/bg.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -13.234375rem 0 0 -8.09375rem;
}
.audio_main {
width: 16.1875rem;
height: 26.46875rem;
background: url(../images/bg.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -13.234375rem 0 0 -8.09375rem;
}
.text_main {
width: 16.1875rem;
height: 26.46875rem;
background: url(../images/bg.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -13.234375rem 0 0 -8.09375rem;
}
.text_main ul {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.text_main ul li {
width: 13.90625rem;
overflow: hidden;
font-size: 0.875rem;
color: #fff;
padding-top: 5.3125rem;
line-height: 3.625rem;
display: none;
margin: 0 auto;
text-align: left;
}
.text_main ul li.active {
display: block;
}
.audio_con {
width: 9.21875rem;
height: 2.75rem;
background: url(../images/audio_bg.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
bottom: 9.25rem;
left: 50%;
margin-left: -4.609375rem;
}
.audio_con .wife {
width: 1.1875rem;
height: 1.53125rem;
position: absolute;
font-size: 0;
left: 50%;
margin-left: -0.59375rem;
top: 0.84375rem;
}
.audio_con .wife span {
display: block;
float: left;
position: absolute;
}
.audio_con .wife span.fist_span {
width: 0.21875rem;
height: 0.40625rem;
background: url(../images/x1.png) no-repeat center;
background-size: 100% 100%;
left: 0;
top: 0.59375rem;
}
.audio_con .wife.active .fist_span {
animation-name: vGo;
animation-delay: .2s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.audio_con .wife span.second_span {
width: 0.40625rem;
height: 0.96875rem;
background: url(../images/x2.png) no-repeat center;
background-size: 100% 100%;
left: 0.28125rem;
top: 0.28125rem;
}
.audio_con .wife.active .second_span {
animation-name: vGo;
animation-delay: .5s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes vGo {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes vGo {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.audio_con .wife span.third_span {
width: 0.5625rem;
height: 1.53125rem;
background: url(../images/x3.png) no-repeat center;
background-size: 100% 100%;
top: 0;
right: 0;
}
.audio_con .wife.active .third_span {
animation-name: vGo;
animation-delay: .8s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.n_logo {
display: block;
width: 9.375rem;
height: 4.1875rem;
position: absolute;
top: 7.8125rem;
left: 50%;
margin-left: -4.6875rem;
}
.mask_main img {
display: block;
width: 10.46875rem;
height: 17.34375rem;
margin: 4.53125rem 0 0 2.375rem;
}
.close {
width: 3.28125rem;
height: 3.28125rem;
position: absolute;
bottom: 0;
right: 50%;
margin-right: -1.640625rem;
display: block;
}
.img_p {
font-size: 1.1875rem;
color: #fff;
text-align: center;
padding-top: 9.1875rem;
}
.img_p p {
display: none;
}
.img_p p.active {
display: block;
}
.w_logo {
display: block;
width: 7.34375rem;
height: 1.1875rem;
position: absolute;
top: 9.1875rem;
left: 50%;
margin-left: -3.671875rem;
}