You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2225 lines
48 KiB
CSS
2225 lines
48 KiB
CSS
5 years ago
|
body {
|
||
|
|
font-family: "Microsoft YaHei", "微软雅黑"
|
||
|
|
}
|
||
|
|
.no-scroll {
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: hidden
|
||
|
|
}
|
||
|
|
.section .title {
|
||
|
|
position: relative;
|
||
|
|
z-index: 3
|
||
|
|
}
|
||
|
|
.section .title img {
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 10%
|
||
|
|
}
|
||
|
|
.section .content {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 60px;
|
||
|
|
left: 50%;
|
||
|
|
opacity: 0;
|
||
|
|
transition: .5s;
|
||
|
|
transform-origin: bottom
|
||
|
|
}
|
||
|
|
.section.active .content {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
.titlenotice h1 {
|
||
|
|
font-size:34px;
|
||
|
|
line-height:70px;
|
||
|
|
color:#333333;
|
||
|
|
font-weight:500;
|
||
|
|
}
|
||
|
|
.titlenotice h5 {
|
||
|
|
font-size:20px;
|
||
|
|
color:#6c6c6c;
|
||
|
|
line-height:42px;
|
||
|
|
}
|
||
|
|
.section-a {
|
||
|
|
background-image: url(../images/banner.jpg);
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat
|
||
|
|
}
|
||
|
|
.section-a.sp {
|
||
|
|
background-size: 100% 100%
|
||
|
|
}
|
||
|
|
.section-a .top-menu {
|
||
|
|
background-color: #fff
|
||
|
|
}
|
||
|
|
.section-a .menu {
|
||
|
|
float: right
|
||
|
|
}
|
||
|
|
.section-a a {
|
||
|
|
display: inline-block;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: .3s;
|
||
|
|
-webkit-transition: .3s;
|
||
|
|
-ms-transition: .3s
|
||
|
|
}
|
||
|
|
.section-a .top-menu a {
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 12px 29px;
|
||
|
|
margin: 13px auto;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #999
|
||
|
|
}
|
||
|
|
.section-a .top-menu a:hover {
|
||
|
|
color: #21c1fc;
|
||
|
|
cursor: pointer
|
||
|
|
}
|
||
|
|
.section-a .top-menu .logo {
|
||
|
|
height: 54px;
|
||
|
|
line-height: normal;
|
||
|
|
padding: 0;
|
||
|
|
margin: 14px 0
|
||
|
|
}
|
||
|
|
.section-a .logo img {
|
||
|
|
vertical-align: middle
|
||
|
|
}
|
||
|
|
.section-a .icon {
|
||
|
|
display: inline-block;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
float: left;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin-right: 8px;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
transition: .3s;
|
||
|
|
-webkit-transition: .3s;
|
||
|
|
-ms-transition: .3s
|
||
|
|
}
|
||
|
|
.section-a .icon-1 {
|
||
|
|
background-image: url(../images/back.png)
|
||
|
|
}
|
||
|
|
.section-a .icon-2 {
|
||
|
|
background-image: url(../images/top_nav_2_8318f57.png)
|
||
|
|
}
|
||
|
|
.section-a .icon-3 {
|
||
|
|
background-image: url(../images/top_nav_3_d5cd46c.png)
|
||
|
|
}
|
||
|
|
.section-a .icon-4 {
|
||
|
|
background-image: url(../images/top_nav_4_5da050b.png)
|
||
|
|
}
|
||
|
|
.section-a a:hover .icon-1 {
|
||
|
|
background-image: url(../images/back1.png)
|
||
|
|
}
|
||
|
|
.section-a a:hover .icon-2 {
|
||
|
|
background-image: url(../images/top_nav_2_active_f92583f.png)
|
||
|
|
}
|
||
|
|
.section-a a:hover .icon-3 {
|
||
|
|
background-image: url(../images/top_nav_3_active_aeb9d4a.png)
|
||
|
|
}
|
||
|
|
.section-a a:hover .icon-4 {
|
||
|
|
background-image: url(../images/top_nav_4_active_12b7bee.png)
|
||
|
|
}
|
||
|
|
.section-a .wave {
|
||
|
|
width: 100%;
|
||
|
|
height: 90px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
transition: none;
|
||
|
|
-webkit-transition: none;
|
||
|
|
-ms-transition: none
|
||
|
|
}
|
||
|
|
.section-a .wave-1 {
|
||
|
|
background-position: 108px top;
|
||
|
|
background-image: url(../images/banner_bottom_1.png)
|
||
|
|
}
|
||
|
|
.section-a .wave-2 {
|
||
|
|
background-position: 0 4px;
|
||
|
|
background-image: url(../images/banner_bottom_2.png)
|
||
|
|
}
|
||
|
|
.section-a .content {
|
||
|
|
width: 994px;
|
||
|
|
margin-left: -774.5px;
|
||
|
|
bottom: auto;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -370px;
|
||
|
|
transform-origin: center
|
||
|
|
}
|
||
|
|
.section-a .left-size {
|
||
|
|
margin-right: 25px;
|
||
|
|
transform: translateX(-54px);
|
||
|
|
transition: .8s;
|
||
|
|
-webkit-transition: .8s;
|
||
|
|
-ms-transition: .8s
|
||
|
|
}
|
||
|
|
.section-a .right-size {
|
||
|
|
transform: translateX(54px);
|
||
|
|
transition: .8s;
|
||
|
|
-webkit-transition: .8s;
|
||
|
|
-ms-transition: .8s
|
||
|
|
}
|
||
|
|
.section.active .left-size, .section.active .right-size {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0)
|
||
|
|
}
|
||
|
|
.section-a .slogan {
|
||
|
|
margin: 57px auto 95px;
|
||
|
|
background-size:100% 100%;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position:center center;
|
||
|
|
width:535px;
|
||
|
|
height:140px;
|
||
|
|
}
|
||
|
|
.section-a .slogan .slogantext {
|
||
|
|
padding-top: 19%;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 30px;
|
||
|
|
text-indent:30px;
|
||
|
|
text-align: center;
|
||
|
|
transform:skewX(170deg);
|
||
|
|
}
|
||
|
|
.section-a .download {
|
||
|
|
display: block;
|
||
|
|
width: 228px;
|
||
|
|
height: 66px;
|
||
|
|
margin-left: 66px;
|
||
|
|
padding-left: 30px;
|
||
|
|
color: #333;
|
||
|
|
transition: all .3s;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 13px;
|
||
|
|
background-color:#fff;
|
||
|
|
}
|
||
|
|
.section-a .download:hover {
|
||
|
|
opacity:.8;
|
||
|
|
}
|
||
|
|
.section-a .download_android {
|
||
|
|
margin-bottom: 17px;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
.section-a .download_ios {
|
||
|
|
margin-bottom: 17px;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
.section-a .download .icon {
|
||
|
|
float:left;
|
||
|
|
margin: 18px 16px 8px 0;
|
||
|
|
}
|
||
|
|
.section-a .download .downloadtext {
|
||
|
|
float:left;
|
||
|
|
margin-top:18px;
|
||
|
|
}
|
||
|
|
.section-a .download .downloadtext strong {
|
||
|
|
font-size:24px;
|
||
|
|
line-height:32px;
|
||
|
|
color:#999;
|
||
|
|
}
|
||
|
|
.section-a .download_ios .icon {
|
||
|
|
background: url(../images/icon-index.png) no-repeat;
|
||
|
|
background-position: -42px 0;
|
||
|
|
width: 24px;
|
||
|
|
height: 29px;
|
||
|
|
}
|
||
|
|
.section-a .download_android .icon {
|
||
|
|
background: url(../images/icon-index.png) no-repeat;
|
||
|
|
background-position: -110px 0;
|
||
|
|
width: 28px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
.section-a .qrcode {
|
||
|
|
width: auto;
|
||
|
|
height: 149px;
|
||
|
|
margin-left: 35px
|
||
|
|
}
|
||
|
|
.section-b .content {
|
||
|
|
margin-left:-379px;
|
||
|
|
opacity:0;
|
||
|
|
visibility:hidden;
|
||
|
|
transition:all .1s;
|
||
|
|
}
|
||
|
|
.section-b .content .pull-left {
|
||
|
|
transform: translateY(-54px);
|
||
|
|
transition: .8s;
|
||
|
|
-webkit-transition: .8s;
|
||
|
|
-ms-transition: .8s;
|
||
|
|
}
|
||
|
|
.section-b.active .content {
|
||
|
|
opacity:1;
|
||
|
|
visibility:visible;
|
||
|
|
}
|
||
|
|
.section-b.active .content .pull-left {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
.section-b .pull-left:first-child {
|
||
|
|
}
|
||
|
|
.section-b .pull-left:last-child {
|
||
|
|
width:400px;
|
||
|
|
height:514px;
|
||
|
|
}
|
||
|
|
.section-b .titlenotice {
|
||
|
|
height:160px;
|
||
|
|
padding-top:80px;
|
||
|
|
}
|
||
|
|
.section-b .titlenotice h1, .section-b .titlenotice h5 {
|
||
|
|
text-align:right;
|
||
|
|
}
|
||
|
|
.section-b .bool {
|
||
|
|
width: 403px;
|
||
|
|
height: 341px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 168px;
|
||
|
|
left: 169px;
|
||
|
|
opacity: 0;
|
||
|
|
transform-origin: bottom;
|
||
|
|
}
|
||
|
|
.section-b.active .bool {
|
||
|
|
opacity: 1;
|
||
|
|
bottom: 188px;
|
||
|
|
}
|
||
|
|
.section-b .bool1, .section-b .bool2, .section-b .bool3, .section-b .bool4, .section-b .bool5, .section-b .bool6, .section-b .bool7, .section-b .bool8 {
|
||
|
|
transform-origin: bottom;
|
||
|
|
-webkit-transform: scale(0.5);
|
||
|
|
transform: scale(0.5);
|
||
|
|
bottom:0;
|
||
|
|
left:130px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool1 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 3s, left 2s ease-in .5s, bottom 2s linear .5s, visibility .1s linear .6s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool2 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 3s, left 3s ease-in .7s, bottom 3s linear .7s, visibility .1s linear .8s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool3 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 3s, left 1s ease-in 1s, bottom 1s linear 1s, visibility .1s linear 1.1s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool4 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 3s, left 2s ease-in 1.3s, bottom 2s linear 1.3s, visibility .1s linear 1.4s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool5 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 4s, left .9s ease-in 1.5s, bottom .9s linear 1.5s, visibility .1s linear 1.7s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool6 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 4s, left 2s ease-in 1.7s, bottom 2s linear 1.7s, visibility .1s linear 1.9s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool7 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 4s, left 2s ease-in 2s, bottom 2s linear 2s, visibility .1s linear 2.6s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool8 {
|
||
|
|
position: absolute;
|
||
|
|
transition:transform 3s linear 4s, left 1s ease-in 2.3s, bottom 1s linear 2.3s, visibility .1s linear 2.5s;
|
||
|
|
}
|
||
|
|
.section-b.active .bool1, .section-b.active .bool2, .section-b.active .bool3, .section-b.active .bool4, .section-b.active .bool5, .section-b.active .bool6, .section-b.active .bool7, .section-b.active .bool8 {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: scale(1);
|
||
|
|
transform: scale(1);
|
||
|
|
animation: bool 3s linear 1.5s infinite;
|
||
|
|
-webkit-animation: bool 3s linear 1.5s infinite
|
||
|
|
}
|
||
|
|
.section-b.active .bool1 {
|
||
|
|
bottom:400px;
|
||
|
|
left:0;
|
||
|
|
}
|
||
|
|
.section-b.active .bool2 {
|
||
|
|
bottom:360px;
|
||
|
|
left:100px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool3 {
|
||
|
|
bottom:340px;
|
||
|
|
left:280px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool4 {
|
||
|
|
bottom:390px;
|
||
|
|
left:380px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool5 {
|
||
|
|
bottom:200px;
|
||
|
|
left:30px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool6 {
|
||
|
|
bottom:200px;
|
||
|
|
left:180px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool7 {
|
||
|
|
bottom:100px;
|
||
|
|
left:180px;
|
||
|
|
}
|
||
|
|
.section-b.active .bool8 {
|
||
|
|
bottom:160px;
|
||
|
|
left:380px;
|
||
|
|
}
|
||
|
|
@keyframes bool {
|
||
|
|
0% {
|
||
|
|
transform: translateY(0)
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: translateY(16px)
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateY(0)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes bool {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0)
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateY(16px);
|
||
|
|
transform: translateY(16px)
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.section-b .light {
|
||
|
|
/* width: 448px;
|
||
|
|
height: 129px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 194px;
|
||
|
|
left: 124px; */
|
||
|
|
width: 615px;
|
||
|
|
height: 159px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 120px;
|
||
|
|
left: 74px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/section_a_2_c794c0f.png) no-repeat;
|
||
|
|
background-size:100%;
|
||
|
|
transition: 1.4s
|
||
|
|
}
|
||
|
|
.section-b.active .light {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
.section-b .titlenotice, .section-c .titlenotice, .section-d .titlenotice, .section-f .titlenotice {
|
||
|
|
padding-top:90px;
|
||
|
|
width:585px;
|
||
|
|
margin:0 auto;
|
||
|
|
}
|
||
|
|
.section-b .titlenotice h1, .section-b .titlenotice h5, .section-c .titlenotice h1, .section-c .titlenotice h5, .section-d .titlenotice h1, .section-d .titlenotice h5, .section-f .titlenotice h1, .section-f .titlenotice h5 {
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
.section-d .content {
|
||
|
|
margin-left: -466.5px;
|
||
|
|
}
|
||
|
|
@-webkit-keyframes bounceInLeft {
|
||
|
|
from, 60%, 75%, 90%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(-3000px, 0, 0);
|
||
|
|
transform: translate3d(-3000px, 0, 0);
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(25px, 0, 0);
|
||
|
|
transform: translate3d(25px, 0, 0)
|
||
|
|
}
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||
|
|
transform: translate3d(-10px, 0, 0)
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(5px, 0, 0);
|
||
|
|
transform: translate3d(5px, 0, 0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes bounceInLeft {
|
||
|
|
from, 60%, 75%, 90%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(-3000px, 0, 0);
|
||
|
|
transform: translate3d(-3000px, 0, 0)
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(25px, 0, 0);
|
||
|
|
transform: translate3d(25px, 0, 0)
|
||
|
|
}
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||
|
|
transform: translate3d(-10px, 0, 0)
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(5px, 0, 0);
|
||
|
|
transform: translate3d(5px, 0, 0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes leftFly {
|
||
|
|
from, 20%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(-3000px, 0, 0) rotate(-260deg);
|
||
|
|
transform: translate3d(-3000px, 0, 0) rotate(-260deg);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(-1500px, 0, 0) rotate(-320deg);
|
||
|
|
transform: translate3d(-1500px, 0, 0) rotate(-320deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform:translate3d(0, 0, 0) rotate(-45deg);
|
||
|
|
transform:translate3d(0, 0, 0) rotate(-45deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes leftFly {
|
||
|
|
from, 20%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(-3000px, 0, 0) rotate(-260deg);
|
||
|
|
transform: translate3d(-3000px, 0, 0) rotate(-260deg);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(-1500px, 0, 0) rotate(-320deg);
|
||
|
|
transform: translate3d(-1500px, 0, 0) rotate(-320deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform:translate3d(0, 0, 0) rotate(-45deg);
|
||
|
|
transform:translate3d(0, 0, 0) rotate(-45deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* .section-d.active .mall {bottom:0;position:absolute;transform-origin:540px 460px;width:100%;height:100%;}
|
||
|
|
.section-d.active .mall {
|
||
|
|
animation: rotate 2s linear 5s infinite;
|
||
|
|
-webkit-animation: rotate 2s linear 5s infinite;
|
||
|
|
} */
|
||
|
|
.section-d .mall div {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.section-d .mall div {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
.section-d .mall .mall1 {
|
||
|
|
width: 244px;
|
||
|
|
height: 246px;
|
||
|
|
left: 220px;
|
||
|
|
bottom: 180px;
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
opacity:0;
|
||
|
|
background:url(../images/mall1.png) center center no-repeat;
|
||
|
|
}
|
||
|
|
.section-d .mall .mall2 {
|
||
|
|
width: 244px;
|
||
|
|
height: 246px;
|
||
|
|
left: 400px;
|
||
|
|
bottom: 320px;
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
opacity:0;
|
||
|
|
background:url(../images/mall2.png) center center no-repeat;
|
||
|
|
}
|
||
|
|
.section-d .mall .mall3 {
|
||
|
|
width: 244px;
|
||
|
|
height: 246px;
|
||
|
|
left: 495px;
|
||
|
|
bottom: 180px;
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
opacity:0;
|
||
|
|
background:url(../images/mall3.png) center center no-repeat;
|
||
|
|
}
|
||
|
|
.section-d .mall .mall4 {
|
||
|
|
width: 244px;
|
||
|
|
height: 246px;
|
||
|
|
left: 400px;
|
||
|
|
bottom: 60px;
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
opacity:0;
|
||
|
|
background:url(../images/mall4.png) center center no-repeat;
|
||
|
|
}
|
||
|
|
.section-d.active .mall .mall1 {
|
||
|
|
opacity: 1;
|
||
|
|
transition:1ms 1.4s;
|
||
|
|
animation: leftFly 1s linear .5s;
|
||
|
|
-webkit-animation: leftFly 1s linear .5s;
|
||
|
|
}
|
||
|
|
.section-d.active .mall .mall2 {
|
||
|
|
opacity: 1;
|
||
|
|
transition:1ms 2.5s;
|
||
|
|
animation: leftFly 1s linear 1.5s;
|
||
|
|
-webkit-animation: leftFly 1s linear 1.5s;
|
||
|
|
}
|
||
|
|
.section-d.active .mall .mall3 {
|
||
|
|
opacity: 1;
|
||
|
|
transition: 1ms 3.5s;
|
||
|
|
animation: leftFly 1s linear 2.5s;
|
||
|
|
-webkit-animation: leftFly 1s linear 2.5s;
|
||
|
|
}
|
||
|
|
.section-d.active .mall .mall4 {
|
||
|
|
opacity: 1;
|
||
|
|
transition:1ms 4.4s;
|
||
|
|
animation: leftFly 1s linear 3.5s;
|
||
|
|
-webkit-animation: leftFly 1s linear 3.5s;
|
||
|
|
}
|
||
|
|
.section-c .content {
|
||
|
|
margin-left: -450px
|
||
|
|
}
|
||
|
|
@-webkit-keyframes bounceInDown {
|
||
|
|
from, 60%, 75%, 90%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(0, -3000px, 0);
|
||
|
|
transform: translate3d(0, -3000px, 0)
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(0, 25px, 0);
|
||
|
|
transform: translate3d(0, 25px, 0)
|
||
|
|
}
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
||
|
|
transform: translate3d(0, -10px, 0)
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, 5px, 0);
|
||
|
|
transform: translate3d(0, 5px, 0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes bounceInDown {
|
||
|
|
from, 60%, 75%, 90%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(0, -3000px, 0);
|
||
|
|
transform: translate3d(0, -3000px, 0)
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(0, 25px, 0);
|
||
|
|
transform: translate3d(0, 25px, 0)
|
||
|
|
}
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
||
|
|
transform: translate3d(0, -10px, 0)
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, 5px, 0);
|
||
|
|
transform: translate3d(0, 5px, 0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.section-c .package {
|
||
|
|
width: 500px;
|
||
|
|
height: 450px;
|
||
|
|
bottom: -10px;
|
||
|
|
left:230px;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/gift2.png) center center no-repeat;
|
||
|
|
background-size:100%;
|
||
|
|
transition: 1ms 1s
|
||
|
|
}
|
||
|
|
.section-c .money {
|
||
|
|
width: 60%;
|
||
|
|
height:60%;
|
||
|
|
bottom: 250px;
|
||
|
|
left: 24%;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0.2);
|
||
|
|
background: url(../images/gift1.png) center center no-repeat;
|
||
|
|
background-size:100%;
|
||
|
|
transform-origin: bottom;
|
||
|
|
z-index:10;
|
||
|
|
transition: 1s 1.4s;
|
||
|
|
}
|
||
|
|
.section-c.active .package {
|
||
|
|
opacity: 1;
|
||
|
|
animation: bounceInDown .8s linear .5s;
|
||
|
|
-webkit-animation: bounceInDown .8s linear .5s
|
||
|
|
}
|
||
|
|
.section-c.active .money {
|
||
|
|
opacity: 1;
|
||
|
|
bottom:300px;
|
||
|
|
transform: scale(1);
|
||
|
|
animation: bool 3s linear 2.5s infinite;
|
||
|
|
-webkit-animation: bool 3s linear 2.5s infinite
|
||
|
|
}
|
||
|
|
.section-f .content {
|
||
|
|
margin-left: -450px;
|
||
|
|
}
|
||
|
|
@-webkit-keyframes rotate {
|
||
|
|
from {
|
||
|
|
transform: rotate(0);
|
||
|
|
-webkit-transform: rotate(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
-webkit-transform: rotate(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes rotate {
|
||
|
|
from {
|
||
|
|
transform: rotate(0);
|
||
|
|
-webkit-transform: rotate(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
-webkit-transform: rotate(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.section-f .radar {
|
||
|
|
width: 508px;
|
||
|
|
height: 508px;
|
||
|
|
bottom: 100px;
|
||
|
|
left: 212px;
|
||
|
|
transform: scale(0.3);
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
background: url(../images/rotate.png);
|
||
|
|
transition: 500ms 2s
|
||
|
|
}
|
||
|
|
.section-f.active .radar {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
animation: rotate 4s linear 2.7s infinite;
|
||
|
|
-webkit-animation: rotate 4s linear 2.7s infinite
|
||
|
|
}
|
||
|
|
@-webkit-keyframes bounceIn {
|
||
|
|
from, 20%, 40%, 60%, 80%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3)
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1)
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
||
|
|
transform: scale3d(.9, .9, .9)
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
transform: scale3d(1.03, 1.03, 1.03)
|
||
|
|
}
|
||
|
|
80% {
|
||
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
||
|
|
transform: scale3d(.97, .97, .97)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes bounceIn {
|
||
|
|
from, 20%, 40%, 60%, 80%, to {
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
|
||
|
|
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
|
||
|
|
}
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3)
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1)
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
||
|
|
transform: scale3d(.9, .9, .9)
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
transform: scale3d(1.03, 1.03, 1.03)
|
||
|
|
}
|
||
|
|
80% {
|
||
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
||
|
|
transform: scale3d(.97, .97, .97)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.section-f .p {
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute
|
||
|
|
}
|
||
|
|
.section-f .p1 {
|
||
|
|
width: 324px;
|
||
|
|
height: 230px;
|
||
|
|
top: 313px;
|
||
|
|
left: 300px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/invitation.png);
|
||
|
|
transition: 500ms 1.5s
|
||
|
|
}
|
||
|
|
.section-f.active .p1 {
|
||
|
|
opacity: 1;
|
||
|
|
animation: bounceIn 1.5s linear 1.5s;
|
||
|
|
-webkit-animation: bounceIn 1.5s linear 1.5s
|
||
|
|
}
|
||
|
|
.section-f .p2 {
|
||
|
|
width: 126px;
|
||
|
|
height: 126px;
|
||
|
|
top: 162px;
|
||
|
|
right: 200px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/p2.png);
|
||
|
|
transition: 300ms 4s
|
||
|
|
}
|
||
|
|
.section-f.active .p2 {
|
||
|
|
opacity: 1;
|
||
|
|
animation: bounceIn 2s linear 4s;
|
||
|
|
-webkit-animation: bounceIn 2s linear 4s
|
||
|
|
}
|
||
|
|
.section-f .p3 {
|
||
|
|
width: 112px;
|
||
|
|
height: 112px;
|
||
|
|
right: 160px;
|
||
|
|
bottom: 190px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/p3.png);
|
||
|
|
transition: 300ms 4.4s
|
||
|
|
}
|
||
|
|
.section-f.active .p3 {
|
||
|
|
opacity: 1;
|
||
|
|
animation: bounceIn 2s linear 4.2s;
|
||
|
|
-webkit-animation: bounceIn 2s linear 4.4s
|
||
|
|
}
|
||
|
|
.section-f .p4 {
|
||
|
|
width: 101px;
|
||
|
|
height: 106px;
|
||
|
|
left: 256px;
|
||
|
|
bottom: 119px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/p4.png);
|
||
|
|
transition: 300ms 5.6s
|
||
|
|
}
|
||
|
|
.section-f.active .p4 {
|
||
|
|
opacity: 1;
|
||
|
|
animation: bounceIn 2s linear 4.4s;
|
||
|
|
-webkit-animation: bounceIn 2s linear 5.6s
|
||
|
|
}
|
||
|
|
.section-f .p5 {
|
||
|
|
width: 102px;
|
||
|
|
height: 95px;
|
||
|
|
top: 208px;
|
||
|
|
left: 224px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/p5.png);
|
||
|
|
transition: 300ms 6.6s
|
||
|
|
}
|
||
|
|
.section-f.active .p5 {
|
||
|
|
opacity: 1;
|
||
|
|
animation: bounceIn 2s linear 6.6s;
|
||
|
|
-webkit-animation: bounceIn 2s linear 6.6s
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 100%;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #000;
|
||
|
|
font-family: "Microsoft YaHei", "微软雅黑";
|
||
|
|
}
|
||
|
|
.footer .link {
|
||
|
|
padding: 16px 0 30px
|
||
|
|
}
|
||
|
|
.footer .link, .footer .link a {
|
||
|
|
color: #000;
|
||
|
|
background-color: #F3F3F3
|
||
|
|
}
|
||
|
|
.footer .link a {
|
||
|
|
display: inline-block;
|
||
|
|
height: 24px;
|
||
|
|
margin: auto 10px;
|
||
|
|
text-decoration: none;
|
||
|
|
border-bottom: 1px solid transparent;
|
||
|
|
transition: .2s
|
||
|
|
}
|
||
|
|
.footer .link a:hover {
|
||
|
|
color: #08B3FF;
|
||
|
|
border-bottom-color: #08B3FF
|
||
|
|
}
|
||
|
|
.footer .Copyright {
|
||
|
|
line-height: 29px;
|
||
|
|
}
|
||
|
|
.right_nav {
|
||
|
|
position: fixed;
|
||
|
|
right: 46px;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -128px;
|
||
|
|
z-index: 100
|
||
|
|
}
|
||
|
|
.right_nav a {
|
||
|
|
display: block;
|
||
|
|
width: 36px;
|
||
|
|
margin: 5px auto;
|
||
|
|
border-radius: 100%;
|
||
|
|
background-color: #ccc;
|
||
|
|
background-color: rgba(0, 0, 0, .2);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: .3s
|
||
|
|
}
|
||
|
|
.right_nav .unvis {
|
||
|
|
margin: auto
|
||
|
|
}
|
||
|
|
.right_nav a.active {
|
||
|
|
cursor: none;
|
||
|
|
background-color: #08B3FF
|
||
|
|
}
|
||
|
|
.right_nav a.last.active {
|
||
|
|
cursor: none;
|
||
|
|
background-color: #ccc;
|
||
|
|
background-color: rgba(0, 0, 0, .2)
|
||
|
|
}
|
||
|
|
.right_nav img {
|
||
|
|
width: 100%;
|
||
|
|
float: left
|
||
|
|
}
|
||
|
|
.yydb {
|
||
|
|
width: 146px;
|
||
|
|
height: 142px;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 46px;
|
||
|
|
right: 10px;
|
||
|
|
background: url(http://cdn.guopan.cn/uploads/static/img/yydb_1907ab9.png) no-repeat;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 3
|
||
|
|
}
|
||
|
|
.yydb-code {
|
||
|
|
width: 120px;
|
||
|
|
opacity: 0;
|
||
|
|
transition: .5s;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 57px;
|
||
|
|
right: 23px;
|
||
|
|
transform: translateY(0) scale(0.8);
|
||
|
|
-webkit-transform: translateY(0) scale(0.8);
|
||
|
|
z-index: 2
|
||
|
|
}
|
||
|
|
.yydb-code-show {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(-136px) scale(1);
|
||
|
|
-webkit-transform: translateY(-136px) scale(1)
|
||
|
|
}
|
||
|
|
.tips {
|
||
|
|
display: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 101;
|
||
|
|
user-select: none;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-ms-user-select: none
|
||
|
|
}
|
||
|
|
.tips .bg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, .72);
|
||
|
|
position: relative;
|
||
|
|
z-index: 102
|
||
|
|
}
|
||
|
|
.tips .bg b {
|
||
|
|
display: block;
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
line-height: 48px;
|
||
|
|
margin: 16px;
|
||
|
|
float: right;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 48px;
|
||
|
|
font-weight: 100;
|
||
|
|
border: 1px solid;
|
||
|
|
border-radius: 3px;
|
||
|
|
color: #fff;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: .3s;
|
||
|
|
-ms-transition: .3s;
|
||
|
|
-webkit-transition: .3s
|
||
|
|
}
|
||
|
|
.tips .bg b:hover {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
border-color: #fff;
|
||
|
|
border-radius: 56px;
|
||
|
|
color: rgba(0, 0, 0, .72);
|
||
|
|
background-color: #fff
|
||
|
|
}
|
||
|
|
.tips .content {
|
||
|
|
line-height: 24px;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
margin: -140px auto auto -140px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #fff;
|
||
|
|
z-index: 103
|
||
|
|
}
|
||
|
|
.tips .content img {
|
||
|
|
width: 280px
|
||
|
|
}
|
||
|
|
.blur {
|
||
|
|
transition: all .3s;
|
||
|
|
-webkit-transition: all .3s;
|
||
|
|
-ms-transition: all .3s;
|
||
|
|
filter: blur(6px);
|
||
|
|
-webkit-filter: blur(6px);
|
||
|
|
-ms-filter: blur(6px);
|
||
|
|
-moz-filter: blur(6px);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=6, MakeShadow=false)
|
||
|
|
}
|
||
|
|
@keyframes txt {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(100px)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes txt {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translateY(100px)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translateY(0px)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes lightcx {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(350px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0) scale(1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes lightcx {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(350px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0) scale(1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes ShadowObj1 {
|
||
|
|
from {
|
||
|
|
transform: skew(0deg) rotateX(0deg)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: skew(0deg) rotateX(-75deg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes ShadowObj1 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: skew(0deg) rotateX(0deg)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: skew(0deg) rotateX(-75deg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes ShadowObj2 {
|
||
|
|
from {
|
||
|
|
transform: skew(0deg) rotateX(0deg)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: skew(0deg) rotateX(-60deg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes ShadowObj2 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: skew(0deg) rotateX(0deg)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: skew(0deg) rotateX(-60deg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes ShadowObj3 {
|
||
|
|
from {
|
||
|
|
transform: skew(0deg) rotateX(0deg)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: skew(0deg) rotateX(50deg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes ShadowObj3 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: skew(0deg) rotateX(0deg)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: skew(0deg) rotateX(50deg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes left_right_frame {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotateY(-2deg)
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotateY(2deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes left_right_frame {
|
||
|
|
0% {
|
||
|
|
transform: rotateY(-2deg)
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotateY(2deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.section-b {
|
||
|
|
}
|
||
|
|
.section-b .game {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
right:0;
|
||
|
|
margin:0 auto;
|
||
|
|
}
|
||
|
|
.section-b .stage {
|
||
|
|
width: 100%;
|
||
|
|
left: auto;
|
||
|
|
margin-left: 0;
|
||
|
|
position: relative;
|
||
|
|
bottom: 0px;
|
||
|
|
}
|
||
|
|
.section-b .stage .flybase {
|
||
|
|
width: 835px;
|
||
|
|
height: 530px;
|
||
|
|
margin: 0 auto;
|
||
|
|
zoom: 1;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.section-b .stage .phone_box {
|
||
|
|
width: 845px;
|
||
|
|
height: 145px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -80px;
|
||
|
|
left: 0px;
|
||
|
|
opacity: 0;
|
||
|
|
background: url(../images/phone1.png) no-repeat;
|
||
|
|
background-size:contain;
|
||
|
|
}
|
||
|
|
.section-b.active .phone_box {
|
||
|
|
animation: txt 200ms linear 400ms forwards;
|
||
|
|
-webkit-animation: txt 200ms linear 400ms forwards;
|
||
|
|
-moz-animation: txt 200ms linear 400ms forwards;
|
||
|
|
}
|
||
|
|
.light_v {
|
||
|
|
position: absolute;
|
||
|
|
width: 1200px;
|
||
|
|
height: 650px;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -600px;
|
||
|
|
top: -220px;
|
||
|
|
-webkit-perspective: 930px;
|
||
|
|
perspective: 930px;
|
||
|
|
-webkit-perspective-origin: 50% 70%;
|
||
|
|
perspective-origin: 50% 70%;
|
||
|
|
transform: translateZ(-250px);
|
||
|
|
-webkit-transform: translateZ(-250px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
.section-b.active .bbb {
|
||
|
|
animation: lightcx 500ms linear 500ms forwards;
|
||
|
|
-webkit-animation: lightcx 500ms linear 500ms forwards;
|
||
|
|
-moz-animation: lightcx 500ms linear 500ms forwards;
|
||
|
|
}
|
||
|
|
.transform-3d {
|
||
|
|
webkit-transform-style: preserve-3d !important;
|
||
|
|
transform-style: preserve-3d !important;
|
||
|
|
}
|
||
|
|
.light_v .light_vinner {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -230px;
|
||
|
|
width: 460px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.light_v .light_m {
|
||
|
|
height: 900px;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.light_v .light_r {
|
||
|
|
height: 1000px;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.transform_left_bottom {
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
}
|
||
|
|
.lg_1 {
|
||
|
|
width: 60px !important;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -30px;
|
||
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.75)));
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
|
||
|
|
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
|
||
|
|
transform: skew(0deg) rotateX(-75deg) !important;
|
||
|
|
}
|
||
|
|
.light_v .light_vinner div {
|
||
|
|
width: 460px;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
.section-b.active .BgAnimate_1 {
|
||
|
|
animation: ShadowObj1 200ms linear 0ms forwards;
|
||
|
|
-webkit-animation: ShadowObj1 200ms linear 0ms forwards;
|
||
|
|
-moz-animation: ShadowObj1 200ms linear 0ms forwards;
|
||
|
|
}
|
||
|
|
.lg_2 {
|
||
|
|
transform: skew(0deg) rotateX(-60deg) !important;
|
||
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.55)));
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
|
||
|
|
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
|
||
|
|
}
|
||
|
|
.section-b.active .BgAnimate_2 {
|
||
|
|
animation: ShadowObj2 200ms linear 0ms forwards;
|
||
|
|
-webkit-animation: ShadowObj2 200ms linear 0ms forwards;
|
||
|
|
-moz-animation: ShadowObj2 200ms linear 0ms forwards;
|
||
|
|
}
|
||
|
|
.lg_3 {
|
||
|
|
transform: skew(0deg) rotateX(50deg) !important;
|
||
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.2)));
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
|
||
|
|
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
|
||
|
|
}
|
||
|
|
.section-b.active .BgAnimate_3 {
|
||
|
|
animation: ShadowObj3 200ms linear 0ms forwards;
|
||
|
|
-webkit-animation: ShadowObj3 200ms linear 0ms forwards;
|
||
|
|
-moz-animation: ShadowObj3 200ms linear 0ms forwards;
|
||
|
|
}
|
||
|
|
.section-b .base_container {
|
||
|
|
height: 400px;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 70px;
|
||
|
|
height: 350px;
|
||
|
|
margin-left: -200px;
|
||
|
|
-webkit-perspective: 400px;
|
||
|
|
perspective: 400px;
|
||
|
|
-webkit-perspective-origin: 50% 70%;
|
||
|
|
perspective-origin: 50% 70%;
|
||
|
|
}
|
||
|
|
.base {
|
||
|
|
width: 400px;
|
||
|
|
height: 350px;
|
||
|
|
-webkit-transform: translateZ(-250px);
|
||
|
|
transform: translateZ(-250px);
|
||
|
|
}
|
||
|
|
.transform_center_bottom {
|
||
|
|
-webkit-transform-origin: 50% 0;
|
||
|
|
transform-origin: 50% 0;
|
||
|
|
}
|
||
|
|
.section-b.active .base_inner_frame_dh {
|
||
|
|
-webkit-animation: left_right_frame 2s ease-in-out 0s infinite alternate;
|
||
|
|
animation: left_right_frame 2s ease-in-out 0s infinite alternate;
|
||
|
|
}
|
||
|
|
.section-b.active .aaa {
|
||
|
|
animation: baseinner 500ms linear 500ms forwards;
|
||
|
|
-webkit-animation: baseinner 500ms linear 500ms forwards;
|
||
|
|
-moz-animation: baseinner 500ms linear 500ms forwards;
|
||
|
|
}
|
||
|
|
.base .base_inner .object {
|
||
|
|
position: absolute;
|
||
|
|
width: 95px;
|
||
|
|
height: 95px;
|
||
|
|
left: 170px;
|
||
|
|
top: 350px;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
.section-b.active .object1 {
|
||
|
|
animation: animateObj1 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj1 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj1 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object1 div, .object2 div, .object3 div, .object4 div, .object5 div, .object6 div, .object7 div, .object8 div, .object9 div, .object10 div {
|
||
|
|
background: url(../images/icon1.png) no-repeat;
|
||
|
|
}
|
||
|
|
.object11 div, .object12 div, .object13 div, .object14 div, .object15 div, .object16 div, .object17 div, .object18 div, .object19 div, .object20 div, .object21 div {
|
||
|
|
background: url(../images/icon2.png) no-repeat;
|
||
|
|
}
|
||
|
|
.object1 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -318px 0px;
|
||
|
|
}
|
||
|
|
.section-b.active .object2 {
|
||
|
|
animation: animateObj2 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj2 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj2 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object2 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -495px -51px;
|
||
|
|
}
|
||
|
|
.section-b.active .object3 {
|
||
|
|
animation: animateObj3 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj3 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj3 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object3 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -407px -209px;
|
||
|
|
}
|
||
|
|
.section-b.active .object4 {
|
||
|
|
animation: animateObj4 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj4 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj4 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object4 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -267px -243px;
|
||
|
|
}
|
||
|
|
.section-b.active .object5 {
|
||
|
|
animation: animateObj5 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj5 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj5 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object5 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -58px -243px;
|
||
|
|
}
|
||
|
|
.section-b.active .object6 {
|
||
|
|
animation: animateObj6 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj6 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj6 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object6 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -255px -130px;
|
||
|
|
}
|
||
|
|
.section-b.active .object7 {
|
||
|
|
animation: animateObj7 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj7 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj7 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object7 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -168px -230px;
|
||
|
|
}
|
||
|
|
.section-b.active .object8 {
|
||
|
|
animation: animateObj8 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj8 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj8 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object8 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -84px -122px;
|
||
|
|
}
|
||
|
|
.section-b.active .object9 {
|
||
|
|
animation: animateObj9 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj9 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj9 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object9 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -143px -27px;
|
||
|
|
}
|
||
|
|
.section-b.active .object10 {
|
||
|
|
animation: animateObj10 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj10 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj10 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object10 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: 15px -57px;
|
||
|
|
}
|
||
|
|
.section-b.active .object11 {
|
||
|
|
animation: animateObj11 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj11 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj11 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object11 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: 0px -12px;
|
||
|
|
}
|
||
|
|
.section-b.active .object12 {
|
||
|
|
animation: animateObj12 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj12 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj12 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object12 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -35px -100px;
|
||
|
|
}
|
||
|
|
.section-b.active .object13 {
|
||
|
|
animation: animateObj13 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj13 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj13 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object13 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -125px -203px;
|
||
|
|
}
|
||
|
|
.section-b.active .object14 {
|
||
|
|
animation: animateObj14 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj14 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj14 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object14 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -158px -2px;
|
||
|
|
}
|
||
|
|
.section-b.active .object15 {
|
||
|
|
animation: animateObj15 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj15 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj15 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object15 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -267px -9px;
|
||
|
|
}
|
||
|
|
.section-b.active .object16 {
|
||
|
|
animation: animateObj16 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj16 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj16 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object16 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -238px -181px;
|
||
|
|
}
|
||
|
|
.section-b.active .object17 {
|
||
|
|
animation: animateObj17 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj17 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj17 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object17 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -406px -160px;
|
||
|
|
}
|
||
|
|
.section-b.active .object18 {
|
||
|
|
animation: animateObj18 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj18 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj18 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object18 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -519px 15px;
|
||
|
|
}
|
||
|
|
.section-b.active .object19 {
|
||
|
|
animation: animateObj19 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj19 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj19 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object19 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -480px -60px;
|
||
|
|
}
|
||
|
|
.section-b.active .object20 {
|
||
|
|
animation: animateObj20 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj20 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj20 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object20 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -550px -123px;
|
||
|
|
}
|
||
|
|
.section-b.active .object21 {
|
||
|
|
animation: animateObj21 500ms linear 800ms forwards;
|
||
|
|
-webkit-animation: animateObj21 500ms linear 800ms forwards;
|
||
|
|
-moz-animation: animateObj21 500ms linear 800ms forwards;
|
||
|
|
}
|
||
|
|
.object21 div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-position: -670px -15px;
|
||
|
|
}
|
||
|
|
@keyframes animateObj1 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(150px, -420px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj1 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(150px, -420px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj2 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(375px, -345px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj2 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(375px, -345px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj3 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(240px, -85px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj3 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(240px, -85px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj4 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(28px, -25px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj4 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(28px, -25px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj5 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-285px, -25px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj5 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-285px, -25px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj6 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(15px, -191px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj6 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(15px, -191px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj7 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-120px, -50px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj7 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-120px, -50px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj8 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-240px, -215px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj8 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-240px, -215px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj9 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-150px, -360px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj9 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-150px, -360px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj10 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-390px, -309px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj10 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-390px, -309px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj11 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-520px, -370px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj11 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-520px, -370px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj12 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-450px, -230px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj12 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-450px, -230px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj13 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-315px, -80px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj13 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-315px, -80px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj14 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-270px, -382px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj14 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-270px, -382px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj15 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-95px, -375px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj15 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-95px, -375px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj16 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(-150px, -113px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj16 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(-150px, -113px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj17 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(96px, -140px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj17 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(96px, -140px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj18 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(320px, -440px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj18 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(320px, -440px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj19 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(260px, -320px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj19 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(260px, -320px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj20 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(317px, -208px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj20 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(317px, -208px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes animateObj21 {
|
||
|
|
from {
|
||
|
|
transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(505px, -405px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animateObj21 {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translate(0px, 0px) scale(0)
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
-webkit-transform: translate(505px, -405px) scale(1.5);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.section-c .giftbg {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
right:0;
|
||
|
|
margin:0 auto;
|
||
|
|
}
|
||
|
|
.section-c .pzstonet {
|
||
|
|
width: 68px;
|
||
|
|
height: 55px;
|
||
|
|
right: -10%;
|
||
|
|
bottom: 90px;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translateX(150px);
|
||
|
|
transform: translateX(150px);
|
||
|
|
transition:200ms 200ms;
|
||
|
|
background: url(../images/icons_stone.png) no-repeat;
|
||
|
|
background-position: 0 0px;
|
||
|
|
}
|
||
|
|
.section-c .pzstoneb {
|
||
|
|
width: 77px;
|
||
|
|
height: 61px;
|
||
|
|
bottom: 250px;
|
||
|
|
left: -10%;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translateX(-150px);
|
||
|
|
transform: translateX(-150px);
|
||
|
|
transition:200ms 0ms;
|
||
|
|
background: url(../images/icons_stone.png) no-repeat;
|
||
|
|
background-position: 0 -89px;
|
||
|
|
}
|
||
|
|
.section-c.active .pzstonet {
|
||
|
|
opacity:1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
.section-c.active .pzstoneb {
|
||
|
|
opacity:1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
.section-c .giftbox {
|
||
|
|
margin-top: 0px;
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 700px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.section-c .giftbox .vl {
|
||
|
|
background: url(../images/g1.png) no-repeat;
|
||
|
|
background-size:contain;
|
||
|
|
height:566px;
|
||
|
|
width:338px;
|
||
|
|
top:576px;
|
||
|
|
left:0;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
overflow: hidden;
|
||
|
|
transition:300ms 400ms;
|
||
|
|
}
|
||
|
|
.section-c .giftbox .vr {
|
||
|
|
background: url(../images/g2.png) no-repeat;
|
||
|
|
background-size:contain;
|
||
|
|
height:566px;
|
||
|
|
width:338px;
|
||
|
|
top:576px;
|
||
|
|
right:0;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
overflow: hidden;
|
||
|
|
transition:300ms 400ms;
|
||
|
|
}
|
||
|
|
.section-c .giftbox .vm {
|
||
|
|
background: url(../images/g3.png) no-repeat;
|
||
|
|
background-size:contain;
|
||
|
|
top: 623px;
|
||
|
|
height:613px;
|
||
|
|
width:378px;
|
||
|
|
left: 0;
|
||
|
|
right:0;
|
||
|
|
margin:0 auto;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
overflow: hidden;
|
||
|
|
transition:300ms 700ms;
|
||
|
|
}
|
||
|
|
.section-c.active .giftbox .vl {
|
||
|
|
opacity:1;
|
||
|
|
top: 40px;
|
||
|
|
}
|
||
|
|
.section-c.active .giftbox .vr {
|
||
|
|
opacity:1;
|
||
|
|
top: 40px;
|
||
|
|
}
|
||
|
|
.section-c.active .giftbox .vm {
|
||
|
|
opacity:1;
|
||
|
|
top:15px;
|
||
|
|
}
|
||
|
|
.section-c .content, .section-b .content {
|
||
|
|
margin-left: -450px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#fp-nav {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 100;
|
||
|
|
margin-top: -32px;
|
||
|
|
top: 50%;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
#fp-nav.right {
|
||
|
|
right: 17px;
|
||
|
|
}
|
||
|
|
#fp-nav.left {
|
||
|
|
left: 17px;
|
||
|
|
}
|
||
|
|
.fp-slidesNav{
|
||
|
|
position: absolute;
|
||
|
|
z-index: 4;
|
||
|
|
left: 50%;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.fp-slidesNav.bottom {
|
||
|
|
bottom: 17px;
|
||
|
|
}
|
||
|
|
.fp-slidesNav.top {
|
||
|
|
top: 17px;
|
||
|
|
}
|
||
|
|
#fp-nav ul,
|
||
|
|
.fp-slidesNav ul {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
#fp-nav ul li,
|
||
|
|
.fp-slidesNav ul li {
|
||
|
|
display: block;
|
||
|
|
width: 14px;
|
||
|
|
height: 13px;
|
||
|
|
margin: 7px;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.fp-slidesNav ul li {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
#fp-nav ul li a,
|
||
|
|
.fp-slidesNav ul li a {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
#fp-nav ul li a.active span,
|
||
|
|
.fp-slidesNav ul li a.active span {
|
||
|
|
background: #333;
|
||
|
|
}
|
||
|
|
#fp-nav ul li a span,
|
||
|
|
.fp-slidesNav ul li a span {
|
||
|
|
top: 2px;
|
||
|
|
left: 2px;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border: 1px solid #000;
|
||
|
|
background: rgba(0, 0, 0, 0);
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
#fp-nav ul li .fp-tooltip {
|
||
|
|
position: absolute;
|
||
|
|
top: -2px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: arial, helvetica, sans-serif;
|
||
|
|
white-space: nowrap;
|
||
|
|
max-width: 220px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: block;
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
#fp-nav ul li:hover .fp-tooltip {
|
||
|
|
-webkit-transition: opacity 0.2s ease-in;
|
||
|
|
transition: opacity 0.2s ease-in;
|
||
|
|
width: auto;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
#fp-nav ul li .fp-tooltip.right {
|
||
|
|
right: 20px;
|
||
|
|
}
|
||
|
|
#fp-nav ul li .fp-tooltip.left {
|
||
|
|
left: 20px;
|
||
|
|
}
|
||
|
|
.app_size{display:none;}
|
||
|
|
|
||
|
|
@media screen and (max-width:1000px){
|
||
|
|
|
||
|
|
.section-a .top-menu .logo{ margin:0px; height:34px; padding: 0px 29px;}
|
||
|
|
.section-a .top-menu .logo img{ height: 34px;}
|
||
|
|
.section-a .top-menu a{ margin:0 auto; padding: 0px 29px; margin: 0px auto;}
|
||
|
|
.section-a .download_android .icon, .section-a .download_ios .icon{
|
||
|
|
/*margin-top:5vw!important;*/
|
||
|
|
float: none;
|
||
|
|
margin: 0px 16px 0 0;
|
||
|
|
display: inline-block;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.section-a .download .downloadtext{
|
||
|
|
margin-top: 0px;
|
||
|
|
display: inline-block;
|
||
|
|
float:none;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.section-a .download .downloadtext strong{ /*line-height:20vw;*/display: block;}
|
||
|
|
.container{ width:100%}
|
||
|
|
.section-a .content{ transform: scale(0.4)!important;/* top:5%;*/top:10%;}
|
||
|
|
.section-a .left-size{width: 75%; float: initial; margin: 0 auto; top: -50%; text-align:center;}
|
||
|
|
.section-a .left-size img{ width:50%;}
|
||
|
|
.section-a .right-size .pull-left:first-child{ /*width:90vw;*/width:100%;}
|
||
|
|
.section-a .right-size .pull-left{ width:40%; text-align:right;}
|
||
|
|
.section-a .right-size{ width:150vw; margin: 0 auto; float: initial;}
|
||
|
|
.section-a .slogan{ width:150vw; height:40vw; margin: 12vh auto;}
|
||
|
|
.section-a .download{margin-bottom: 10vw;
|
||
|
|
margin-left: 0px;
|
||
|
|
width: 95%;
|
||
|
|
height: 8.8rem;
|
||
|
|
line-height: 8.8rem;
|
||
|
|
border-radius: 20vw;
|
||
|
|
text-align: center;
|
||
|
|
float:left;
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-left:0;
|
||
|
|
}
|
||
|
|
.section-a .download:last-child{ margin-bottom:0px;}
|
||
|
|
.section-a .right-size .pull-left div p{ display:none; }
|
||
|
|
.section-a .slogan .slogantext{ line-height:40px;transform: skewX(0deg);}
|
||
|
|
.section-a .qrcode{ /* width: 50vw; height: 50vw;*/display:none;}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#fp-nav.right{ right:1%;}
|
||
|
|
|
||
|
|
.section-b .titlenotice, .section-c .titlenotice, .section-d .titlenotice, .section-f .titlenotice{ padding-top:15vh}
|
||
|
|
|
||
|
|
.section-b .titlenotice{ width:100%;}
|
||
|
|
.section-b .titlenotice h1{ font-size:20px; line-height:40px;}
|
||
|
|
.section-b .titlenotice h5{ font-size:1em; line-height:40px;}
|
||
|
|
.section-b .content{transform: scale(0.4)!important; margin: 0px; left:1%; bottom: 40%;}
|
||
|
|
.section-b .base_container{left: 1%; margin: 0px;}
|
||
|
|
.section-b .stage .phone_box{ left:-25%; bottom: -150px; width:90%;}
|
||
|
|
|
||
|
|
.section-c .titlenotice{ width:100%;}
|
||
|
|
.section-c .titlenotice h1{ font-size:20px; line-height:40px;}
|
||
|
|
.section-c .titlenotice h5{ font-size:1em; line-height:40px;}
|
||
|
|
.section-c .content{ bottom:15%; transform: scale(0.4)!important; }
|
||
|
|
|
||
|
|
.section-d .titlenotice{ width:100%;}
|
||
|
|
.section-d .titlenotice h1{ font-size:20px; line-height:40px;}
|
||
|
|
.section-d .titlenotice h5{ font-size:1em; line-height:40px;}
|
||
|
|
.section-d .content{ bottom:20%; transform: scale(0.4)!important;}
|
||
|
|
|
||
|
|
|
||
|
|
.section-f .titlenotice{ width:100%;}
|
||
|
|
.section-f .titlenotice h1{ font-size:20px; line-height:40px;}
|
||
|
|
.section-f .titlenotice h5{ font-size:1em; line-height:40px;}
|
||
|
|
.section-f .content{ bottom:20%; transform: scale(0.4)!important;}
|
||
|
|
.footer{ padding:0px; display:none;}
|
||
|
|
.app_size{display:block;}
|
||
|
|
.section-a .download .downloadtext .app_kinds{font-size: 4rem;
|
||
|
|
font-weight: 400;
|
||
|
|
margin-bottom: 0.6rem;}
|
||
|
|
.section-a .download_android .icon {
|
||
|
|
background: url(../images/icon_normal_andriod@3x.png) no-repeat center center;
|
||
|
|
background-size:100% 100%;
|
||
|
|
width: 6rem;
|
||
|
|
height: 6rem;
|
||
|
|
vertical-align: sub;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.section-a .download_ios .icon {
|
||
|
|
background: url(../images/icon_normal_ios@3x.png) no-repeat center center;
|
||
|
|
background-size:100% 100%;
|
||
|
|
width: 6rem;
|
||
|
|
height: 6rem;
|
||
|
|
vertical-align: sub;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.zdiv_download{
|
||
|
|
width: 100%;
|
||
|
|
display: table;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 1.5rem;
|
||
|
|
height: 5rem;
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
.zdiv_download {
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.zp_download{
|
||
|
|
width: 100%;
|
||
|
|
height: 5rem;
|
||
|
|
display: table-cell;
|
||
|
|
text-align: center;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.za_download{
|
||
|
|
border: 1px solid currentColor;
|
||
|
|
color: #797575;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 0.8rem 2.8rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
text-decoration:none;
|
||
|
|
display: block;
|
||
|
|
width: 14rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.za_download .zicon_and,.za_download .zicon_ios{
|
||
|
|
display: inline-block;
|
||
|
|
height: 1.4rem;
|
||
|
|
width: 1.4rem;
|
||
|
|
vertical-align: sub;
|
||
|
|
margin-right:0.5rem;
|
||
|
|
}
|
||
|
|
.za_download .zicon_and{
|
||
|
|
background:url("../images/icon_normal_andriod@3x.png") no-repeat center center;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
.za_download .zicon_ios{
|
||
|
|
background:url("../images/icon_normal_ios@3x.png") no-repeat center center;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
.zfont_size14{
|
||
|
|
font-size:14px;
|
||
|
|
}
|