764 lines
12 KiB
CSS
764 lines
12 KiB
CSS
body,
|
|
html {
|
|
height: 100%
|
|
}
|
|
|
|
a,
|
|
a:hover {
|
|
outline: 0
|
|
}
|
|
|
|
.footer,
|
|
.header {
|
|
z-index: 99
|
|
}
|
|
|
|
.clearfix:after,
|
|
.page_1 .page_bg:before {
|
|
content: ""
|
|
}
|
|
|
|
html {
|
|
+overflow: hidden
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
width: 100%
|
|
}
|
|
|
|
.header,
|
|
.wrap,
|
|
.wrapper {
|
|
position: absolute;
|
|
top: 0
|
|
}
|
|
|
|
body,
|
|
dd,
|
|
div,
|
|
dl,
|
|
dt,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
input,
|
|
li,
|
|
ol,
|
|
p,
|
|
table,
|
|
ul {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
table {
|
|
width: auto;
|
|
border-collapse: collapse;
|
|
border-spacing: 0
|
|
}
|
|
|
|
.footer,
|
|
.header,
|
|
.wrap,
|
|
.wrapper {
|
|
width: 100%;
|
|
left: 0
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
vertical-align: bottom
|
|
}
|
|
|
|
em,
|
|
i {
|
|
font-style: normal
|
|
}
|
|
|
|
a {
|
|
text-decoration: none
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline
|
|
}
|
|
|
|
.btn_download:hover,
|
|
.header .nav_box a:hover {
|
|
text-decoration: none
|
|
}
|
|
|
|
img {
|
|
border: 0
|
|
}
|
|
|
|
.hidden {
|
|
display: none
|
|
}
|
|
|
|
.hide_txt {
|
|
text-indent: -9999em;
|
|
font-size: 0;
|
|
line-height: 0
|
|
}
|
|
|
|
.clearfix:after {
|
|
display: block;
|
|
visibility: hidden;
|
|
clear: both;
|
|
height: 0
|
|
}
|
|
|
|
.clearfix {
|
|
zoom: 1
|
|
}
|
|
|
|
.wrap {
|
|
font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, sans-serif;
|
|
font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "微软雅黑", tahoma, arial, simsun, "宋体"
|
|
}
|
|
|
|
.wrap,
|
|
.wrapper {
|
|
height: 100%;
|
|
background: #000;
|
|
overflow: hidden
|
|
}
|
|
|
|
.header .head {
|
|
padding: 20px
|
|
}
|
|
|
|
.header .logo_box {
|
|
float: left
|
|
}
|
|
|
|
.header .logo_link img {
|
|
display: block
|
|
}
|
|
|
|
.header .nav_box {
|
|
float: right;
|
|
position: relative
|
|
}
|
|
|
|
.header .nav_box li {
|
|
float: left;
|
|
padding: 0 10px
|
|
}
|
|
|
|
.header .nav_box a {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
line-height: 50px;
|
|
padding: 0 6px;
|
|
display: block
|
|
}
|
|
|
|
.header .nav_box .ic_line {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: #fff;
|
|
bottom: 6px;
|
|
width: 40px;
|
|
transition: left .2s, width .2s;
|
|
-webkit-transition: left .2s, width .2s;
|
|
display: none
|
|
}
|
|
|
|
.page,
|
|
.page_wp {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 12px
|
|
}
|
|
|
|
.page_wp,
|
|
.page_wp .txt_box {
|
|
width: 100%;
|
|
z-index: 5;
|
|
position: absolute
|
|
}
|
|
|
|
.footer .foot {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #4c4c4c
|
|
}
|
|
|
|
.page_wp {
|
|
left: 0
|
|
}
|
|
|
|
.page {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 100%
|
|
}
|
|
|
|
.page_wp .show {
|
|
left: 0
|
|
}
|
|
|
|
.page_wp .txt_box {
|
|
bottom: 140px;
|
|
left: 0;
|
|
color: #fff;
|
|
opacity: 0;
|
|
transition: opacity .8s;
|
|
-webkit-transition: opacity .8s
|
|
}
|
|
|
|
.page_wp .show .txt_box {
|
|
opacity: 1
|
|
}
|
|
|
|
.page_wp .txt_box h2 {
|
|
text-align: center;
|
|
font-size: 36px;
|
|
font-weight: lighter;
|
|
line-height: 40px
|
|
}
|
|
|
|
.page_wp .txt_brief {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
width: 800px;
|
|
margin: 10px auto 0;
|
|
font-weight: lighter
|
|
}
|
|
|
|
.page_wp .img_box {
|
|
position: absolute;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -540px 0 0 -960px;
|
|
z-index: 3
|
|
}
|
|
|
|
.page_wp .img_box img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
.css3 .page_wp .img_box {
|
|
display: none
|
|
}
|
|
|
|
.page_1.hide {
|
|
left: 0
|
|
}
|
|
|
|
.page_1.hide .txt_box {
|
|
left: -9999px
|
|
}
|
|
|
|
.page_1 .page_bg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 2500px;
|
|
height: 1600px;
|
|
margin: -800px 0 0 -1250px;
|
|
transform-origin: center 708px;
|
|
-webkit-transform-origin: center 708px
|
|
}
|
|
|
|
.page_1 .page_bg:before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../img/page1_bg.jpg?v=e0cf3019042982b9f77845806f575682) center center no-repeat;
|
|
transform-origin: center 708px;
|
|
-webkit-transform-origin: center 708px
|
|
}
|
|
|
|
.page_4 .light_wp {
|
|
position: absolute;
|
|
width: 1000px;
|
|
height: 460px;
|
|
top: 50%;
|
|
left: 15%;
|
|
margin-top: -230px
|
|
}
|
|
|
|
.page_4 .light_box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
transform: scale(.8);
|
|
-webkit-transform: scale(.8)
|
|
}
|
|
|
|
.page_4 .light_1 {
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: 0;
|
|
width: 476px;
|
|
height: 72px;
|
|
margin-bottom: -18px;
|
|
background: url(../img/light_2.png?v=242c3c618a2ad541082733414997ef2a)
|
|
}
|
|
|
|
.page_4 .light_2,
|
|
.page_4 .light_3,
|
|
.page_4 .light_4 {
|
|
position: absolute;
|
|
width: 476px;
|
|
height: 72px;
|
|
background: url(../img/light_1.png?v=7c3e5e2e124547afaee7fcaaff70bd57);
|
|
transform: scale(.8);
|
|
-webkit-transform: scale(.8)
|
|
}
|
|
|
|
.page_4 .light_2 {
|
|
top: 0;
|
|
left: 260px
|
|
}
|
|
|
|
.page_4 .light_3 {
|
|
bottom: 0;
|
|
left: 190px
|
|
}
|
|
|
|
.page_4 .light_4 {
|
|
top: 50%;
|
|
margin-top: -18px;
|
|
right: 0
|
|
}
|
|
|
|
.page_4 .light_5 {
|
|
position: absolute;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
bottom: 50%;
|
|
margin-bottom: -523px;
|
|
left: -923px;
|
|
background: url(../img/light_3.png?v=e6f2a0b5f72f53e91796633bd94794e3);
|
|
transform: scale(.8);
|
|
-webkit-transform: scale(.8)
|
|
}
|
|
|
|
.page_4 .meteor_box {
|
|
position: absolute;
|
|
width: 576px;
|
|
height: 401px;
|
|
top: 0;
|
|
left: 0;
|
|
background: url(../img/light_4.png?v=6e531d6fa8a77d81ac30c0db5a31e828)
|
|
}
|
|
|
|
.star_wp {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: -9999px
|
|
}
|
|
|
|
.star_wp.show {
|
|
left: 0
|
|
}
|
|
|
|
.star_wp .star_bg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 2400px;
|
|
height: 2000px;
|
|
margin: -1000px 0 0 -1200px;
|
|
background: url(../img/page3_bg.jpg?v=5c3d36e0fef268ebd524ae0dcb2c56f7) center center no-repeat;
|
|
transform-origin: center center;
|
|
-webkit-transform-origin: center center
|
|
}
|
|
|
|
.star_wp .star_box {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 1740px;
|
|
height: 1356px;
|
|
margin: -678px 0 0 -870px;
|
|
background: url(../img/star.png?v=8832ec2224c70d23f526dab0c25f42eb) center center no-repeat;
|
|
transform-origin: center center;
|
|
-webkit-transform-origin: center center
|
|
}
|
|
|
|
#canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
pointer-events: none
|
|
}
|
|
|
|
.btn_control,
|
|
.btns_wp {
|
|
z-index: 20;
|
|
position: absolute
|
|
}
|
|
|
|
.btn_control {
|
|
top: 50%;
|
|
right: 50px;
|
|
margin-top: -42px
|
|
}
|
|
|
|
.btn_control a {
|
|
display: block;
|
|
background: url(../img/btn_spr.png?v=161c5cde5cca472566aee1331226a3ad) -14px -52px no-repeat;
|
|
width: 9px;
|
|
height: 9px;
|
|
margin: 0 0 12px
|
|
}
|
|
|
|
.btn_control a.cur,
|
|
.btn_control a:hover {
|
|
background-position: 0 -52px
|
|
}
|
|
|
|
.btns_wp {
|
|
width: 100%;
|
|
bottom: 70px
|
|
}
|
|
|
|
.btn_download {
|
|
display: block;
|
|
margin: 26px auto 0;
|
|
width: 156px;
|
|
height: 38px;
|
|
text-align: center;
|
|
line-height: 38px;
|
|
border: 2px solid #fff;
|
|
font-size: 18px;
|
|
color: #fff
|
|
}
|
|
|
|
.sys_footer {
|
|
color: #524d45!important;
|
|
min-width: 1000px;
|
|
font-family: Arial, "\65B0\5B8B\4F53";
|
|
position: absolute;
|
|
bottom: 40px
|
|
}
|
|
|
|
.foot .links a,
|
|
.foot a {
|
|
color: #524d45
|
|
}
|
|
|
|
.page_1.show .page_bg {
|
|
animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear;
|
|
-webkit-animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear
|
|
}
|
|
|
|
@keyframes p1bg_effect1 {
|
|
0% {
|
|
transform: rotate(0) scale(1)
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg) scale(4)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p1bg_effect1 {
|
|
0% {
|
|
-webkit-transform: rotate(0) scale(1)
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(-360deg) scale(4)
|
|
}
|
|
}
|
|
|
|
.page_1.hide .page_bg:before {
|
|
animation: p1bg_effect2 .4s both linear;
|
|
-webkit-animation: p1bg_effect2 .4s both linear
|
|
}
|
|
|
|
@keyframes p1bg_effect2 {
|
|
0% {
|
|
transform: rotate(0) scale(1);
|
|
opacity: 1
|
|
}
|
|
100% {
|
|
transform: rotate(-100deg) scale(4);
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p1bg_effect2 {
|
|
0% {
|
|
-webkit-transform: rotate(0) scale(1);
|
|
opacity: 1
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(-100deg) scale(4);
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
.star_wp.show .star_bg {
|
|
animation: opc_effect 2s both linear, p3bg_effect 30s both linear;
|
|
-webkit-animation: opc_effect 2s both linear, p3bg_effect 30s both linear
|
|
}
|
|
|
|
@keyframes p3bg_effect {
|
|
0% {
|
|
transform: rotate(0) scale(1)
|
|
}
|
|
100% {
|
|
transform: rotate(10deg) scale(1.2)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p3bg_effect {
|
|
0% {
|
|
-webkit-transform: rotate(0) scale(1)
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(10deg) scale(1.2)
|
|
}
|
|
}
|
|
|
|
.star_wp.show .star_box {
|
|
animation: p3star_effect 20s both linear;
|
|
-webkit-animation: p3star_effect 20s both linear
|
|
}
|
|
|
|
@keyframes p3star_effect {
|
|
0% {
|
|
transform: scale(0)
|
|
}
|
|
100% {
|
|
transform: scale(.98)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p3star_effect {
|
|
0% {
|
|
-webkit-transform: scale(0)
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(.98)
|
|
}
|
|
}
|
|
|
|
.page_4.show .light_wp {
|
|
animation: p4light_effect 10s both linear infinite;
|
|
-webkit-animation: p4light_effect 10s both linear infinite
|
|
}
|
|
|
|
@keyframes p4light_effect {
|
|
0% {
|
|
transform: translate(5000px, 0)
|
|
}
|
|
10%,
|
|
50% {
|
|
transform: translate(0, 0)
|
|
}
|
|
100%,
|
|
60% {
|
|
transform: translate(-5000px, 0)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p4light_effect {
|
|
0% {
|
|
-webkit-transform: translate(5000px, 0)
|
|
}
|
|
10%,
|
|
50% {
|
|
-webkit-transform: translate(0, 0)
|
|
}
|
|
100%,
|
|
60% {
|
|
-webkit-transform: translate(-5000px, 0)
|
|
}
|
|
}
|
|
|
|
.page_4.show .light_1,
|
|
.page_4.show .light_3 {
|
|
animation: p4light13_effect 10s both linear infinite;
|
|
-webkit-animation: p4light13_effect 10s both linear infinite
|
|
}
|
|
|
|
@keyframes p4light13_effect {
|
|
0%,
|
|
10% {
|
|
transform: translate(0, 0)
|
|
}
|
|
100%,
|
|
50% {
|
|
transform: translate(-50px, 0)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p4light13_effect {
|
|
0%,
|
|
10% {
|
|
-webkit-transform: translate(0, 0)
|
|
}
|
|
100%,
|
|
50% {
|
|
-webkit-transform: translate(-50px, 0)
|
|
}
|
|
}
|
|
|
|
.page_4.show .light_2,
|
|
.page_4.show .light_4 {
|
|
animation: p4light24_effect 10s both linear infinite;
|
|
-webkit-animation: p4light24_effect 10s both linear infinite
|
|
}
|
|
|
|
@keyframes p4light24_effect {
|
|
0%,
|
|
10% {
|
|
transform: translate(0, 0)
|
|
}
|
|
100%,
|
|
50% {
|
|
transform: translate(-100px, 0)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p4light24_effect {
|
|
0%,
|
|
10% {
|
|
-webkit-transform: translate(0, 0)
|
|
}
|
|
100%,
|
|
50% {
|
|
-webkit-transform: translate(-100px, 0)
|
|
}
|
|
}
|
|
|
|
.page_4.show .light_5 {
|
|
animation: p4light5_effect 10s both linear infinite;
|
|
-webkit-animation: p4light5_effect 10s both linear infinite
|
|
}
|
|
|
|
@keyframes p4light5_effect {
|
|
0%,
|
|
10% {
|
|
transform: translate(0, 0);
|
|
opacity: 0
|
|
}
|
|
16%,
|
|
28% {
|
|
opacity: 1
|
|
}
|
|
22%,
|
|
34% {
|
|
opacity: 0
|
|
}
|
|
100%,
|
|
50% {
|
|
transform: translate(-50px, 0);
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p4light5_effect {
|
|
0%,
|
|
10% {
|
|
-webkit-transform: translate(0, 0);
|
|
opacity: 0
|
|
}
|
|
16%,
|
|
28% {
|
|
opacity: 1
|
|
}
|
|
22%,
|
|
34% {
|
|
opacity: 0
|
|
}
|
|
100%,
|
|
50% {
|
|
-webkit-transform: translate(-50px, 0);
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
.page_4.show .meteor_box {
|
|
animation: p4meteor_effect 10s both linear infinite;
|
|
-webkit-animation: p4meteor_effect 10s both linear infinite
|
|
}
|
|
|
|
@keyframes p4meteor_effect {
|
|
0%,
|
|
65% {
|
|
transform: translate(-1000px, 1000px)
|
|
}
|
|
100%,
|
|
80% {
|
|
transform: translate(1000px, -1000px)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes p4meteor_effect {
|
|
0%,
|
|
65% {
|
|
-webkit-transform: translate(-1000px, 1000px)
|
|
}
|
|
100%,
|
|
80% {
|
|
-webkit-transform: translate(1000px, -1000px)
|
|
}
|
|
}
|
|
|
|
@keyframes opc_effect {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes opc_effect {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
.scale_box {
|
|
transform-origin: center center;
|
|
-webkit-transform-origin: center center
|
|
}
|
|
|
|
@media only screen and (min-width:1600px) {
|
|
.scale_box {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1)
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width:1024px) and (max-width:1599px) {
|
|
.scale_box {
|
|
transform: scale(.875);
|
|
-webkit-transform: scale(.875)
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:1023px) {
|
|
.scale_box {
|
|
transform: scale(.7);
|
|
-webkit-transform: scale(.7)
|
|
}
|
|
} |