html, body {
width: 100%;
height: 100%;
/*background-color: #2a3655;*/
touch-action: none;
}
/*loading*/
.x {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
}
.y {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
}
.xy {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
}
.posa {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.loading {
height: 100%;
color: #fff;
background: #ffffff url("../images/loadgif.gif") no-repeat top center;
background-size: 100%;
z-index: 999;
}
.loadimgmes{
width: 7rem;
left: 50%;
position: absolute;
top: 1.24rem;
}
.load-content {
width: 6rem;
text-align: center;
height: 0.7rem;
top: 8.9rem;
}
.cell {
width: 100%;
height: 100%;
background-color: #d8d8d8;
box-sizing: border-box;
border-radius: 50px;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.progress {
width: 100%;
height: 100%;
background-color: #71d1f6;
/*-webkit-transform: scaleX(0) perspective(1000);*/
/*-webkit-transform-origin: 0 0;*/
position: relative;
}
.progress:after{
position: absolute;
right: -0.69rem;
top: -0.69rem;
content: '';
display: inline-block;
width: 0;
height: 0;
border-bottom: 0.7rem solid transparent;
border-top: 0.7rem solid transparent;
border-left: 0.7rem solid #71d1f6;
}
.loadtext{
width: 6.29rem;
height: 2.2rem;
position: absolute;
top: 10.25rem;
left: 50%;
margin-left: -3.14rem;
}
.ideal {
position: absolute;
left: 50%;
width: 3rem;
height: 1.5rem;
top: -1.2rem;
overflow: hidden;
-webkit-transform: translate(-50%, 0) scale(0.7);
z-index: -1;
}
.ideal:before, .ideal:after, .head:before, .head, .head:after, .hat {
background-color: #fff;
}
.head {
border: 1px solid #a6a6a6;
}
.ideal:before, .ideal:after {
content: '';
position: absolute;
bottom: -0.3rem;
width: 0.4rem;
height: 0.5rem;
border-radius: 40%;
-webkit-animation: hand-ani 4s ease-in 0s infinite;
}
.ideal:before {
left: 0.2rem;
}
.ideal:after {
right: 0.2rem;
}
.head-wrap {
width: 1.6rem;
height: 1.5rem;
position: relative;
top: 0.15rem;
left: 50%;
margin-left: -0.8rem;
-webkit-animation: head-ani 4s ease-out 0s infinite;
}
.head {
width: 100%;
height: 100%;
padding: 0.1rem;
box-sizing: border-box;
border-radius: 50%;
background-color: #fff;
}
.head:before, .head:after {
content: '';
position: absolute;
bottom: 0.42rem;
width: 0.3rem;
height: 0.6rem;
z-index: -1;
border-radius: 35%;
-webkit-transform: translateY(-0rem);
}
.head:before {
left: -0.1rem;
-webkit-animation: left-ear-ani 4s 0s infinite;
}
.head:after {
right: -0.1rem;
-webkit-animation: right-ear-ani 4s 0s infinite;
}
.face {
width: 100%;
height: 100%;
position: relative;
background-color: #005286;
border-radius: 50%;
-webkit-animation: face-ani 4s 0s infinite;
}
.face:before, .face:after {
content: '';
position: absolute;
bottom: 0.45rem;
width: 0.14rem;
height: 0.25rem;
background-color: #fff;
border-radius: 35%;
-webkit-animation: eye-ani 4s 0s infinite;
}
.face:before {
left: 25%;
}
.face:after {
right: 25%;
}
.hat {
position: absolute;
top: -0.05rem;
left: 50%;
width: 0.6rem;
height: 0.4rem;
border-radius: 35%;
margin-left: -0.3rem;
z-index: -1;
}
@-webkit-keyframes head-ani {
0%, 20% {
-webkit-transform: translateY(100%);
}
25%, 35% {
-webkit-transform: translateY(60%);
}
40%, 90% {
-webkit-transform: translateY(0);
}
92%, 100% {
-webkit-transform: translateY(100%);
}
}
@-webkit-keyframes hand-ani {
0%, 1% {
-webkit-transform: translate(0, 100%);
}
10%, 12% {
-webkit-transform: translate(0, -4%);
}
15%, 93% {
-webkit-transform: translate(0, 0);
}
96%, 100% {
-webkit-transform: translate(0, 100%);
}
}
@-webkit-keyframes eye-ani {
0%, 45% {
-webkit-transform: scaleY(1);
}
47%, 48% {
-webkit-transform: scaleY(0.1);
}
50%, 65% {
-webkit-transform: scaleY(1);
}
67%, 68% {
-webkit-transform: scaleY(0.1);
}
70%, 82% {
-webkit-transform: scaleY(1);
}
84%, 85% {
-webkit-transform: scaleY(0.1);
}
86%, 100% {
-webkit-transform: scaleY(1);
}
}
@-webkit-keyframes face-ani {
0%, 50% {
-webkit-transform: translate(0, 0);
}
57%, 64% {
-webkit-transform: translate(-5%, 0);
}
71%, 78% {
-webkit-transform: translate(5%, 0);
}
85%, 100% {
-webkit-transform: translate(0, 0);
}
}
@-webkit-keyframes left-ear-ani {
0%, 50% {
-webkit-transform: translate(0, 0);
}
57%, 64% {
-webkit-transform: translate(20%, 0);
}
71%, 78% {
-webkit-transform: translate(-10%, 0);
}
85%, 100% {
-webkit-transform: translate(0, 0);
}
}
@-webkit-keyframes right-ear-ani {
0%, 50% {
-webkit-transform: translate(0, 0);
}
57%, 64% {
-webkit-transform: translate(10%, 0);
}
71%, 78% {
-webkit-transform: translate(-20%, 0);
}
85%, 100% {
-webkit-transform: translate(0, 0);
}
}
@-webkit-keyframes lightLoop {
0% {
-webkit-transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1.2, 3);;
}
}
.progress-num {
position: absolute;
top: 0;
left: 104%;
height: 100%;
line-height: 0.3rem;
font-size: 0.2rem;
}
.loading p {
text-align: center;
position: absolute;
top: 0.5rem;
left: 0;
width: 100%;
font-size: 0.24rem;
}
/*loading*/
/*cover*/
.cover {
height: 100%;
background-color: #005286;
z-index: 998;
display: none;
}
.cover .iphone {
width: 2.9rem;
height: 4.36rem;
position: absolute;
left: 50%;
top: 40%;
margin-top: -2.18rem;
margin-left: -1.45rem;
background: url(../images/phone.png) no-repeat;
background-size: 100% 100%;
animation: zhuan 1.5s 0.3s infinite;
-webkit-animation: zhuan 1.5s 0.3s infinite
}
.cover p {
position: absolute;
top: 65%;
left: 0;
text-align: center;
width: 100%;
color: #fff;
font-size: .5rem;
line-height: 1.5;
}
@keyframes zhuan {
0% {
transform: rotate(-90deg)
}
50% {
transform: rotate(0deg)
}
100% {
transform: rotate(-90deg)
}
}
@-webkit-keyframes zhuan {
0% {
-webkit-transform: rotate(-90deg)
}
50% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(-90deg)
}
}
@media screen and (orientation:landscape) {
.cover {
display: block
}
}
/*cover*/
/*footer*/
footer {
width: 100%;
text-align: center;
color: #fff;
line-height: 16px;
font-size: 12px;
position: absolute;
bottom: 0px;
left: 0;
z-index: 200;
padding: 6px 0
}
footer img {
vertical-align: text-bottom;
padding-right: 5px;
width: 12px;
display: inline-block
}
/*footer*/
/*music*/
.media-wrap {
position: absolute;
width: 0.6rem;
height: 0.6rem;
z-index: 102;
border-radius: 50%;
top: 0.6rem;
right: 0.4rem;
}
.media-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.media-wrap .music_off {
display: none;
}
@-webkit-keyframes music {
0%, 50%, 100% {
-webkit-transform: rotate(0deg)
}
25% {
-webkit-transform: rotate(36deg)
}
75% {
-webkit-transform: rotate(-36deg)
}
}
.media-wrap.on {
-webkit-animation: music 1.2s linear infinite;
background-position: 0 0;
}
/*music*/
/*页面切换功能必须添加的样式*/
.curMoveToTop {
-webkit-animation: curMoveToTop 0.4s 0.1s ease-in-out both;
}
.topMoveToCur {
-webkit-animation: topMoveToCur 0.4s 0.1s ease-in-out both;
}
.bottomMoveToCur {
-webkit-animation: bottomMoveToCur 0.4s 0.1s ease-in-out both;
}
.CurMoveTobottom {
-webkit-animation: CurMoveTobottom 0.4s 0.1s ease-in-out both;
}
.curMoveToLeft {
-webkit-animation: curMoveToLeft 0.4s 0.1s ease-in-out both;
}
.leftMoveToCur {
-webkit-animation: leftMoveToCur 0.4s 0.1s ease-in-out both;
}
.rightMoveToCur {
-webkit-animation: rightMoveToCur 0.4s 0.1s ease-in-out both;
}
.CurMoveToright {
-webkit-animation: CurMoveToright 0.4s 0.1s ease-in-out both;
}
@-webkit-keyframes curMoveToTop {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
}
}
@-webkit-keyframes topMoveToCur {
0% {
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes bottomMoveToCur {
0% {
-webkit-transform: translateY(100%);
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes CurMoveTobottom {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
}
}
@-webkit-keyframes curMoveToLeft {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes leftMoveToCur {
0% {
-webkit-transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes rightMoveToCur {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes CurMoveToright {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(100%);
}
}
/*页面切换功能必须添加的样式*/
/* CSS Document */
html,body,div.container{ height:100%;width:100%;overflow:hidden; }
/* 翻页图片动画 */
.arrow{
position:absolute;bottom:16px;left:0; height:0.63rem; width: 100%;z-index:200;
-webkit-animation:upDown 2s both ease-out 1s infinite;
animation:upDown 2s both ease-out 1s infinite;
}
@-webkit-keyframes upDown{
0%{-webkit-transform:translateY(8px);opacity:0;}
50%{-webkit-transform:translateY(0px);opacity:1;}
100%{-webkit-transform:translateY(-8px);opacity:0;}
}
/* 页面动画end */
img{display:block; margin: 0 auto; width: auto;}
.imgW{display:block;width:100%; height: auto;}
.on{ display: block;}
/* 版权 */
.footer {position:fixed;bottom: -2px;width: 100%;height: 24px;line-height: 24px;text-align: center; color:#1244b1; z-index:150;}
.hand{vertical-align:middle; height:16px; display:inline-block;margin-right: 3px;}
/* 版权 end */
/* 主体开始 */
.container section,.wrap{ width:100%;height: 100%;position: absolute; left: 0;top:0; overflow: hidden;}
section {display: none;}
.container section .wrap{opacity:0;}
.container section.pageOpen .wrap{opacity:1;}
div.logo{position:absolute;top:0.46rem;left:.5rem; width:4.42rem;height: 0.58rem;}
div.bg{
width: 100%;
height: 100%;
-webkit-transform: scale3d(1.2, 1.2, 1);
}
.pageOpen div.logo{-webkit-animation: fadeInDown 1s 0.1s both;}
.pageOpen div.bg{-webkit-animation: bigtosmall 1s 0.1s both;}
.pos-h{ position: absolute; left: 50%;}
.pos-v{ position: absolute; top: 50%;}
.flex-box{
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
}
.flex-box .item{
-webkit-flex:1;/*Chrome*/
-ms-flex:1;/*IE 10*/
flex: 1;/* NEW ,Spec - Opera 12.1,Firefox 20+*/
-webkit-box-flex:1;/*OLD -iOS 6-,Safari 3.1-6*/
-moz-box-flex:1;/*OLD - Firefox 19-*/
}
/* page的id与js并无关系，只是为了设置背景颜色*/
/* page 1 */
#page1{z-index:99;}
#page1 .wrap{
text-align: center;
}
#page1 .bg{
background: url("../images/indexbg.jpg") no-repeat center;
background-size: 100% 100%;
}
/* page2*/
#page2{z-index:98;}
/*page3*/
#page3{z-index:97;}
/*page4*/
#page4{ z-index:96;}
/*page5*/
#page5{z-index:95;}
#page9 .bg{
background: url("../images/p9bg.jpg") no-repeat;
width: 100%;;height: 100%;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
#page13 .bg,#page14 .bg{
background: #9be4ff;
}
#page15 .bg{
background: #ffe475 url("../images/p16bg.png") no-repeat center;
background-size: 6.10rem;
}
/*self defined animation*/
@-webkit-keyframes scaleIn {
0% {
opacity: 0;
-webkit-transform: scale3d(3, 3, 3);
transform: scale3d(3, 3, 3);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes bigtosmall {
0% {
-webkit-transform: scale3d(1.2, 1.2, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
.centerimg{
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.indexlogo{
width: 1.39rem;
position: absolute;
left: 0.68rem;
top: 0.38rem;
opacity: 0;
-webkit-animation: slideInDown 1s 0.7s ease forwards;
}
.indexboy{
width: 2.8rem;
position: absolute;
left: 60%;
top: 2rem;
opacity: 0;
-webkit-animation: fadeIn 1s 1.5s ease forwards
}
.indexgril{
width: 3.12rem;
position: absolute;
left: 22%;
top: 2.14rem;
opacity: 0;
-webkit-animation: fadeIn 1s 1.8s ease forwards
}
.indextextbg{
width: 100%;
position: absolute;
left: 0;
top: 3.75rem;
opacity: 0;
-webkit-animation: bounceIn 1s 1.2s ease forwards
}
.indextext1{
width: 2.12rem;
position: absolute;
left: 38%;
top: 5.3rem;
opacity: 0;
-webkit-animation: slideInLeft 1s 2.1s ease forwards
}
.indextext2{
width: 5.53rem;
position: absolute;
left: 50%;
top: 5.8rem;
opacity: 0;
-webkit-animation: slideInRight 1s 2.1s ease forwards
}
.indextext{
width: 5.35rem;
position: absolute;
left: 50%;
top: 9.1rem;
opacity: 0;
-webkit-animation: slideInUp 1s 2.5s ease forwards
}
.indexdeng{
width: 1.75rem;
position: absolute;
top: 3.34rem;
right: 0.4rem;
z-index: 10;
opacity: 0;
-webkit-animation: bounceIn 1s 1.8s ease forwards
}
.indexenter{
width: 2.31rem;
position: absolute;
left: 77%;
top: 10.1rem;
opacity: 0;
-webkit-animation: slideInRight 1s 2.9s ease forwards
}
.indexenter img{
width: 100%;
-webkit-animation: pulse 2.5s 3.5s ease forwards infinite;
}
.p1img1{
width: 6.42rem;
margin: 0.55rem auto 0 auto;
opacity: 0;
-webkit-animation: slideInDown 0.8s 0.2s ease forwards;
overflow: hidden;
}
.p1img1-1{
width: 5.99rem;
position: absolute;
left: 53%;
bottom: 0;
right: 0;
opacity: 0;
-webkit-animation: fadeIn 0.8s 0.9s ease forwards;
}
.p1img1s{
width: 100%;
}
.p1img2{
width: 6.43rem;
top: 6.3rem;
position: absolute;
left: 50%;
opacity: 0;
-webkit-animation: slideInRight 0.8s 1.2s ease forwards
}
.p1img2s{
width: 100%;
}
.p1imgmen2s{
width: 6.38rem;
bottom: 0;
position: absolute;
right: 0%;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.6s ease forwards
}
.p1img3{
width: 4.46rem;
position: absolute;
left: 67%;
margin-left: -2.25rem;
top: 8.45rem;
opacity: 0;
-webkit-animation: slideInLeft 0.8s 1.9s ease forwards
}
.p1img3s{
width: 100%;
}
.p1img3smen{
width: 3.54rem;
bottom: -0.25rem;
position: absolute;
left: 0;
opacity: 0;
-webkit-animation: fadeIn 0.8s 2.2s ease forwards
}
.p1mes1{
width: 2.97rem;
position: absolute;
top: 4.45rem;
left: 43%;
margin-left: -1.5rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.9s ease forwards
}
.p1mes2{
width: 2.97rem;
position: absolute;
top: 10.2rem;
left: 64%;
margin-left: -1.5rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 2.5s ease forwards
}
.p2img1{
width: 6.42rem;
position: absolute;
top: 0.55rem;
left: 50%;
opacity: 0;
-webkit-animation: slideInDowns 0.8s 0.2s ease forwards
}
.p2img1s{
width: 100%;
}
.p2imglou{
width: 6.04rem;
position: absolute;
left: 0.68rem;
top: 0.1rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 0.6s ease forwards
}
.p2imgren{
width: 2.72rem;
position: absolute;
left: 0.15rem;
bottom: 0.08rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 0.9s ease forwards
}
.p2img2{
width: 6.42rem;
position: absolute;
top: 4.35rem;
left: 50%;
opacity: 0;
-webkit-animation: slideInRight 0.8s 1.5s ease forwards
}
.p2img2-1{
width: 2.21rem;
position: absolute;
bottom: 0.08rem;
left: 1.9rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.8s ease forwards
}
.p2img2bg{
width: 100%;
}
.p2img3{
width: 6.42rem;
position: absolute;
top: 8.35rem;
left: 50%;
opacity: 0;
-webkit-animation: slideInUp 0.8s 2.7s ease forwards
}
.p2img3-2{
width: 3.29rem;
position: absolute;
bottom: 0rem;
right: 0rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 3.2s ease forwards
}
.p2img3s{
width: 100%;
}
.p2img3-1{
width: 3.22rem;
position: absolute;
left: 0.35rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 3.2s ease forwards;
top: 0.5rem;
}
.p2mes1{
width: 3.29rem;
position: absolute;
left: 34%;
top: 2.05rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.2s ease forwards
}
.p2mes2{
width: 3.29rem;
position: absolute;
left: 69%;
top: 4.38rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 2.4s ease forwards
}
.p2mes3{
width: 2.83rem;
position: absolute;
left: 15%;
top: 11.38rem;
opacity: 0;
-webkit-animation: bounceIn 0.8s 3.6s ease forwards
}
.p3item1{
width: 6.75rem;
height: 2.64rem;
position: relative;
margin: 0.35rem auto 0 auto;
border: 0.08rem solid #000000;
background: #9fd2d3;
overflow: hidden;
opacity: 0;
-webkit-animation: fadeIn 1s 0.2s ease forwards
}
.p3item1 .p3mens,.p3item2 .p3mens,.p3item3 .p3mens{
width: 2.02rem;
position: absolute;
top: 0.39rem;
left: 31%;
}
.p3item1 .p3men1,.p3item2 .p3men2,.p3item3 .p3men3{
position: absolute;
top: 0.25rem;
left: 70%;
}
.p3item1 .p3mens{
opacity: 0;
-webkit-animation: slideInLeft 1s 0.6s ease forwards
}
.p3item2 .p3mens{
opacity: 0;
-webkit-animation: slideInLeft 1s 1.4s ease forwards
}
.p3item3 .p3mens{
opacity: 0;
-webkit-animation: slideInLeft 1s 2.2s ease forwards
}
.p3item1 .p3men1{
opacity: 0;
-webkit-animation: slideInRight 0.8s 0.6s ease forwards
}
.p3item2 .p3men2{
opacity: 0;
-webkit-animation: slideInRight 0.8s 1.4s ease forwards
}
.p3item3 .p3men3{
opacity: 0;
-webkit-animation: slideInRight 0.8s 2.2s ease forwards
}
.p3item1 .p3men1{width: 2.35rem;}
.p3item2 .p3men2{ width: 3.51rem; }
.p3item3 .p3men3{ width: 1.88rem;}
.p3item4 .p3bimg1{ width: 2.18rem; position: absolute; top: 0.3rem; left: 0;
opacity: 0;
-webkit-animation: bounceIn 1s 2.8s ease forwards
}
.p3item4 .p3bimg2{ width: 2.1rem; position: absolute; top: 0.3rem; left: 35%;
opacity: 0;
-webkit-animation: bounceIn 1s 3.1s ease forwards
}
.p3item4 .p3bimg3{ width: 2.24rem; position: absolute; top: 0.3rem; right: 0;
opacity: 0;
-webkit-animation: bounceIn 1s 3.4s ease forwards
}
.p3item2{
width: 6.75rem;
height: 2.64rem;
position: relative;
margin: 0.30rem auto;
overflow: hidden;
border: 0.08rem solid #000000;
background: #ffe988;
opacity: 0;
-webkit-animation: fadeIn 1s 0.8s ease forwards
}
.p3item3{
width: 6.75rem;
height: 2.64rem;
position: relative;
margin: 0.30rem auto;
border: 0.08rem solid #000000;
overflow: hidden;
background: #b4be71;
opacity: 0;
-webkit-animation: fadeIn 1s 1.8s ease forwards
}
.p3item4{
width: 6.75rem;
overflow: hidden;
height: 3.4rem;
position: relative;
background: url("../images/p3menbg.png") no-repeat;
background-size: 100%;
margin: 0.30rem auto 0 auto;
overflow: hidden;
opacity: 0;
-webkit-animation: fadeIn 1s 2.5s ease forwards
}
.page4img1{
width: 6.6rem;
position: absolute;
top: 0.1rem;
left: 50%;
opacity: 0;
-webkit-animation: slideInRight 1s 0.2s ease forwards
}
.page4img2{
width: 6.0rem;
position: absolute;
top: 4.8rem;
left: 47%;
opacity: 0;
-webkit-animation: slideInLeft 1s 0.6s ease forwards
}
.page4img3{
width: 6rem;
position: absolute;
top: 8.1rem;
left: 56%;
opacity: 0;
-webkit-animation: slideInRight 1s 1s ease forwards
}
.p6img1{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.p6img2{
width: 100%;
position: absolute;
left: 0;
top: 2rem;
}
.p6img3{
width: 5.36rem;
position: absolute;
left: 50%;
top: 1.75rem;
opacity: 0;
-webkit-animation: slideInDowns 0.8s 0.2s ease forwards
}
.p6gifboy{
width: 3.48rem;
position: absolute;
left: 74%;
top: 5.3rem;
opacity: 0;
-webkit-animation: slideInRight 0.8s 0.4s ease forwards
}
.p6gifgril{
width: 3.68rem;
position: absolute;
left: 28%;
top: 5rem;
opacity: 0;
-webkit-animation: slideInLeft 0.8s 0.4s ease forwards
}
.p7img1{
width: 6.43rem;
position: absolute;
left: 50%;
top: 0.55rem;
opacity: 0;
-webkit-animation: slideInDowns 0.8s 0.2s ease forwards
}
.p7img2{
width: 6.43rem;
position: absolute;
left: 50%;
top: 4.48rem;
opacity: 0;
-webkit-animation: slideInRight 0.8s 1s ease forwards
}
.p7img3{
width: 6.42rem;
position: absolute;
left: 50%;
top: 8.2rem;
opacity: 0;
-webkit-animation: slideInUp 0.8s 1.8s ease forwards
}
.p7text1{
width: 5.75rem;
position: absolute;
left: 50%;
top: 0.6rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 0.8s ease forwards
}
.p7text2{
width: 6.23rem;
position: absolute;
left: 51%;
top: 4.92rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.6s ease forwards
}
.p7text3{
width: 6.33rem;
position: absolute;
left: 50%;
top: 8.45rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 2.4s ease forwards
}
.p8img1{
width: 6.43rem;
position: absolute;
left: 50%;
top: 0.55rem;
overflow: hidden;
opacity: 0;
-webkit-animation: slideInLeft 0.8s 0.2s ease forwards;
}
.p8imgmen1{
width: 5.82rem;
position: absolute;
left: 54%;
top: 0.75rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 0.7s ease forwards;
}
.p8img2{
width: 4.5rem;
position: absolute;
left: 64%;
top: 2.68rem;
z-index: 2;
opacity: 0;
-webkit-animation: slideInRight 0.8s 0.8s ease forwards;
}
.p8img2bg{
width: 4.39rem;
position: absolute;
left: 66%;
top: 2.78rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.4s ease forwards;
}
.p8imgmens{
width: 2.74rem;
position: absolute;
left: 56%;
top: 4.68rem;
z-index: 4;
opacity: 0;
-webkit-animation: fadeIn 0.8s 1.6s ease forwards;
}
.p8img3{
width: 6.35rem;
border: 0.08rem solid #000000;
position: absolute;
left: 50%;
top: 7.44rem;
opacity: 0;
-webkit-animation: slideInUp 0.8s 1.6s ease forwards;
}
.p8img3mens{
width: 6.41rem;
position: absolute;
bottom: 0.04rem;
left: -0.04rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 2.2s ease forwards;
}
.p8img3bg{
width: 100%;
}
.p8mes1{
width: 3.44rem;
position: absolute;
left: 18%;
top: 0.4rem;
opacity: 0;
-webkit-animation: bounceIn 1s 1.1s ease forwards;
}
.p8mes2{
width: 3.44rem;
position: absolute;
left: 14%;
top: 7.85rem;
opacity: 0;
-webkit-animation: bounceIn 1s 2.6s ease forwards;
}
.p9mes1 img{
width: 2.39rem;
margin-top: 0.4rem;
opacity: 0;
-webkit-animation: tada 1.2s 1.2s ease forwards;
}
.p9mes2 img{
width: 3.9rem;
margin-top: 0.5rem;
opacity: 0;
-webkit-animation: tada 1.2s 2s ease forwards;
}
.p9mes3 img{
width: 5.08rem;
margin-top: 0.7rem;
opacity: 0;
-webkit-animation: tada 1.2s 2.8s ease forwards;
}
.p9mes1{
width: 3.03rem;
height: 1.83rem;
background: url("../images/p9mesbg1.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.08rem;
left: 55%;
opacity: 0;
-webkit-animation: bounceIn 1s 0.6s ease forwards;
}
.p9mes2{
width: 4.56rem;
height: 2.5rem;
background: url("../images/p9mesbg2.png") no-repeat;
background-size: 100%;
position: absolute;
top: 8rem;
z-index: 2;
left: 8%;
opacity: 0;
-webkit-animation: bounceIn 1s 1.8s ease forwards;
}
.p9mes3{
width: 5.3rem;
z-index: 1;
height: 3.33rem;
background: url("../images/p9mesbg3.png") no-repeat;
background-size: 100%;
position: absolute;
top: 9.64rem;
left: 26%;
opacity: 0;
-webkit-animation: bounceIn 1s 2.6s ease forwards;
}
.p10item1{
width: 6.85rem;
height: 7.84rem;
position: absolute;
left: 50%;
top: 0.32rem;
background: url("../images/p10img1.png") no-repeat;
background-size: 100%;
opacity: 0;
-webkit-animation: slideInLeft 1s 0.2s ease forwards;
}
.p10item2{
width: 6.85rem;
height: 8.26rem;
position: absolute;
left: 50%;
top: 4.75rem;
background: url("../images/p10img2.png") no-repeat;
background-size: 100%;
opacity: 0;
-webkit-animation: slideInRight 1s 1.2s ease forwards;
}
.p10men1{
width: 3.48rem;
position: absolute;
left: 63%;
top: 2.4rem;
opacity: 0;
-webkit-animation: slideInUp 1s 0.5s ease forwards;
}
.p10mes1{
width: 3.36rem;
position: absolute;
left: 54%;
top: 1.2rem;
opacity: 0;
-webkit-animation: bounceIn 1s 1s ease forwards;
}
.p10men2{
width: 3.65rem;
position: absolute;
left: 31%;
top: 4.55rem;
opacity: 0;
-webkit-animation: slideInLeft 1s 1.8s ease forwards;
}
.p10mes2{
width: 2.9rem;
position: absolute;
left: 54%;
top: 4.8rem;
z-index: 2;
opacity: 0;
-webkit-animation: bounceIn 1s 2.2s ease forwards;
}
.p10mes3{
width: 4.3rem;
position: absolute;
left: 33%;
top: 1.4rem;
opacity: 0;
-webkit-animation: bounceIn 1s 2.8s ease forwards;
}
.p11item1{
width: 6.74rem;
height: 7.60rem;
position: absolute;
left: 50%;
top: 0.5rem;
background: url("../images/p11img1.png") no-repeat;
background-size: 100%;
overflow: hidden;
opacity: 0;
-webkit-animation: slideInLeft 1s 0.2s ease forwards;
}
.p11item2{
width: 6.74rem;
height: 6.29rem;
position: absolute;
left: 50%;
top: 6.6rem;
background: url("../images/p11img2.png") no-repeat;
background-size: 100%;
overflow: hidden;
opacity: 0;
-webkit-animation: slideInRight 1s 1.4s ease forwards;
}
.p11men1{
width: 2.99rem;
position: absolute;
left: 26%;
top: 2.36rem;
opacity: 0;
-webkit-animation: slideInLeft 0.5s 1s ease forwards;
}
.p11text1{
width: 4.96rem;
position: absolute;
left: 62%;
top: 0;
opacity: 0;
-webkit-animation: slideInUp 1.2s 0.4s ease forwards;
}
.p11men2{
width: 2.39rem;
position: absolute;
right: -0.9rem;
z-index: 4;
top: 2.86rem;
opacity: 0;
-webkit-animation: slideInUp 1s 2.4s ease forwards;
}
.p11text2{
width: 7.5rem;
z-index: 3;
position: absolute;
left: 54%;
top: 0.5rem;
opacity: 0;
-webkit-animation: fadeIn 1s 2.2s ease forwards;
}
.p12item1{
width: 6.84rem;
height: 7.84rem;
position: absolute;
left: 50%;
top: 0.32rem;
background: url("../images/p12img1.png") no-repeat;
background-size: 100%;
overflow: hidden;
opacity: 0;
-webkit-animation: slideInLeft 1s 0.2s ease forwards;
}
.p12item2{
width: 6.84rem;
height: 8.26rem;
position: absolute;
left: 50%;
top: 4.82rem;
background: url("../images/p12img2.png") no-repeat;
background-size: 100%;
overflow: hidden;
opacity: 0;
-webkit-animation: slideInRight 1s 1.4s ease forwards;
}
.p12men1{
width: 3.04rem;
position: absolute;
left: 26%;
top: 2.36rem;
opacity: 0;
-webkit-animation: slideInLeft 0.8s 0.8s ease forwards;
}
.p12huatong{
width: 2.58rem;
position: absolute;
left: 74%;
top: 3rem;
opacity: 0;
-webkit-animation: fadeIn 0.8s 0.5s ease forwards;
}
.p12text1{
width: 5.44rem;
margin-top: 0.34rem;
opacity: 0;
-webkit-animation: slideInDown 0.8s 1.2s ease forwards;
}
.p12men2{
width: 6.64rem;
position: absolute;
bottom: 0;
left: 50%;
opacity: 0;
-webkit-animation: slideInUp 0.8s 1.9s ease forwards;
}
.p12text2{
width: 3.24rem;
position: absolute;
top: 1.2rem;
left: 48%;
z-index: 2;
opacity: 0;
-webkit-animation: bounceIn 0.8s 2.6s ease forwards;
}
.p12text3{
width: 4.32rem;
position: absolute;
top: 2.8rem;
left: 38%;
opacity: 0;
-webkit-animation: bounceIn 0.8s 2.2s ease forwards;
}
.p13title{
width: 4.85rem;
position: absolute;
left: 50%;
top: 1.32rem;
opacity: 0;
-webkit-animation: slideInDowns 0.8s 0.2s ease forwards;
}
.p13img1{
width: 100%;
margin-top: 2.94rem;
opacity: 0;
-webkit-animation: fadeIn 1s 0.5s ease forwards;
}
.p13img2{
width: 100%;
position: absolute;
bottom: 0;
}
.p13boy{
width: 2.66rem;
position: absolute;
left: 59%;
bottom: 0.2rem;
opacity: 0;
-webkit-animation: slideInRight 1s 0.8s ease forwards;
}
.p13gril{
width: 2.62rem;
position: absolute;
left: 80%;
bottom: 0.2rem;
opacity: 0;
-webkit-animation: slideInRight 1s 1s ease forwards;
}
.p14text{
width: 6.04rem;
margin-top: 0.75rem;
opacity: 0;
-webkit-animation: slideInDown 0.8s 0.2s ease forwards;
}
.p14bottom{
width: 100%;
position: absolute;
bottom: 0 ;
}
.p16title{
width: 2.96rem;
position: absolute;
left: 29%;
top:1.85rem;
opacity: 0;
-webkit-animation: slideInDown 0.8s 0.6s ease forwards;
}
.p16text{
width: 4.44rem;
position: absolute;
left: 50%;
top: 3.62rem;
opacity: 0;
-webkit-animation: slideInUp 0.8s 0.8s ease forwards;
}
.p16btn{
width: 2.76rem;
position: absolute;
left: 50%;
bottom: 1.82rem;
opacity: 0;
z-index: 3;
-webkit-animation: slideInUp 0.8s 1s ease forwards;
}
.p16btn img{
width: 100%;
}
.p16btn a{
display: inline-block;
width: 100%;
height: 0.9rem;
position: absolute;
bottom: 0;
}
.p16men{
width: 5.45rem;
position: absolute;
left: 50%;
bottom: 0.75rem;
opacity: 0;
-webkit-animation: slideInUp 0.8s 1.2s ease forwards;
}
a.arr{position:absolute;z-index:100;bottom: 0.7rem;left:50%;opacity: 0; -webkit-animation:upDown 1.2s 3s linear infinite;animation:upDown 1.2s 3s linear infinite;width:0.9rem;text-align:center;}
a.arr img{
width: 100%;
}
@-webkit-keyframes upDown{
0%{-webkit-transform:translate(-50%,8px);opacity:0;}
50%{-webkit-transform:translate(-50%,0px);opacity:1;}
100%{-webkit-transform:translate(-50%, -8px);opacity:0;}
}