body { margin: 0; padding: 0; font: 'Helvetica Neue', Helvetica, Arial, 微软雅黑, sans-serif; color: #7f7f7f; }
input, button { font-family: 微软雅黑, arial; }
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p, figure { padding: 0; margin: 0; }
ol, ul { list-style: none; }
li { list-style-type: none; }
img { vertical-align: top; border: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: normal; }
em, i { font-style: normal; }
iframe { margin: 0; padding: 0; vertical-align: top; }
/* Hides from IE-mac \*/
input[type=button], input[type=submit], button { -webkit-appearance: none; outline: none; }
body, html { width: 100%; height: 100%; position: relative; overflow: hidden; }
html { font-size: 20px; }
.swiper-container { width: 100%; height: 100%; -webkit-transform: translatey(0); }
.swiper-container .swiper-pagination { right: 25px; }
.swiper-container .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; opacity: 0.7; margin: 20px 0; }
.swiper-container .swiper-pagination .swiper-pagination-bullet-active { width:30px; height: 30px; background: url("../images/pagination-active.png") no-repeat;margin-left:-10px;border-radius: 0; }
.swiper-container .swiper-slide { position: relative; }
body { background-color: #fee59b; }
.upArrows { background-image: url("../img/upArrows.png"); background-size: 100% 100%; width: 0.85rem; height: 0.45rem; position: fixed; left: 50%; bottom: 0.2rem; z-index: 99; -webkit-transform: translatex(-50%); -webkit-animation: upArrows 0.5s ease infinite alternate; -moz-animation: upArrows 0.5s ease infinite alternate; animation: upArrows 0.5s ease infinite alternate; }
.mallDownloadBtn, .mallDownloadBtn em {background-image: url("../img/scene04Tag01.png"); background-size: 100% 100%; width: 4rem; height: 4rem; position: fixed; left: 50%; top: 6.5rem; margin-left: -2rem; z-index: 3; opacity: 0; }
.mallDownloadBtn em, .mallDownloadBtn em em { top: 50%; margin-left: 0; position: absolute; opacity: 0; -webkit-animation: scene01spreadDot 1.8s linear 1.8s infinite; -moz-animation: scene01spreadDot 1.8s linear 1.8s infinite; animation: scene01spreadDot 1.8s linear 1.8s infinite; }
.swiper-container { width: 100%; height: 100%; -webkit-transform: translatey(0); }
.swiper-container .swiper-slide { height: 100%; width: 100%; overflow: hidden; position: relative; }
.swiper-slide.page1 .text { text-indent: -999em; }
.swiper-slide.page1 .text { background-image: url("../img/sceneText01.png"); background-repeat: no-repeat; background-size: 100% 100%; width:11rem; height:6.8rem; margin:1rem auto 0; text-indent: -999em;}
.swiper-slide.page1 .phone { background-image: url("../img/scenePhone01.png"); background-repeat: no-repeat; background-size: 100% 100%; width: 16rem; height: 14rem; position: absolute; bottom: 4.2rem; left: 50%; margin-left: -8rem; z-index: 2; -webkit-animation: scene01phone 1s ease 1; -moz-animation: scene01phone 1s ease 1; animation: scene01phone 1s ease 1; }
.download { background-color: #fff; padding: 0.8rem 0 2em; position: absolute; width: 100%; bottom: 0; z-index: 3; }
.swiper-slide.page1 .downloadBtn { background: url("../img/downloadBtn.png") no-repeat; background-size: 100% 100%; width:11rem; height: 2.25rem; margin: 0 auto; text-indent: -999em; display: block; opacity: 0; transition: opacity 1s 1.8s; -moz-transition: opacity 1s 1.8s; /* Firefox 4 */ -webkit-transition: opacity 1s 1.8s; /* Safari and Chrome */ -o-transition: opacity 1s 1.8s; /* Opera */ -webkit-animation: scene01downloadBtn 1s ease 0.8s forwards; -moz-animation: scene01downloadBtn 1s ease 0.8s forwards; animation: scene01downloadBtn 1s ease 0.8s forwards; }
.swiper-slide-active.page1 .downloadBtn { opacity: 1; }
.swiper-slide.page1 .spreadDot { position: absolute; left: 50%; top: 38.5%; }
.swiper-slide.page1 .spreadDot em { position: absolute; display: block; width: 7.5rem; height: 7.5rem; top: 50%; opacity: 0; border-radius: 50%; -webkit-transform: translate(-50%, -50%); background-color: rgba(246, 188, 89, 0.5); width: 12.5rem; height: 12.5rem; }
.swiper-slide.page1 .spreadDot em.dot01 { -webkit-animation: scene01spreadDot 2.6s linear 1s infinite; -moz-animation: scene01spreadDot 2.6s linear 1s infinite; animation: scene01spreadDot 2.6s linear 1s infinite; }
.swiper-slide.page1 .spreadDot em.dot02 { -webkit-animation: scene01spreadDot 1.8s linear 1.8s infinite; -moz-animation: scene01spreadDot 1.8s linear 1.8s infinite; animation: scene01spreadDot 1.8s linear 1.8s infinite; }
.swiper-slide.page1 .spreadDot em.dot03 { -webkit-animation: scene01spreadDot 1s linear 2.6s infinite; -moz-animation: scene01spreadDot 1s linear 2.6s infinite; animation: scene01spreadDot 1s linear 2.6s infinite; }
.swiper-slide.page1 .bubble01 { transition: all .6s ease-in 0s; }
.swiper-slide.page1 .bubble02 { transition: all .6s ease-in 0s; }
.swiper-slide.page1 .bubble03 { transition: all .6s ease-in 0s; }
.swiper-slide.page1 .bubble01 { background-image: url("../img/scene01Tag01.png"); background-repeat: no-repeat; background-size: 100% 100%; width:2rem; height:1.4rem; opacity: 1; position: absolute; left: 50%; top:2rem; margin-left: -7rem; z-index: 3; -webkit-transform: translatex(4.725rem) scale(0, 0) rotate(800deg); -webkit-transform: translatex(0) scale(1, 1) rotate(0deg);}
.swiper-slide.page1 .bubble02 { background-image: url("../img/scene01Tag02.png"); background-repeat: no-repeat; background-size: 100% 100%; width:2.1rem; height:1.5rem; opacity: 1; position: absolute; left: 50%; top:2.5rem; margin-left:5rem; z-index: 3; -webkit-transform: translatex(-1.575rem) scale(0, 0) rotate(800deg); -webkit-transform: translatex(0) scale(1, 1) rotate(0deg);}
.swiper-slide.page1 .bubble03 { background-image: url("../img/scene01Tag03.png"); background-repeat: no-repeat; background-size: 100% 100%; width:1.5rem; height:1.1rem; opacity: 1; position: absolute; left: 50%; top:8.5rem; margin-left:-6.5rem; z-index: 3; -webkit-transform: translatex(-3.25rem) scale(0, 0) rotate(800deg);-webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }

.swiper-slide.page2 { background-color: #f75656; text-align: center; transition: all .6s ease-in 0s; }
.swiper-slide.page2 .text { text-indent: -999em; }
.swiper-slide.page2 .text { background-image: url("../img/sceneText02.png"); background-repeat: no-repeat; background-size: 100% 100%; width:9.8rem; height: 4.4rem; margin: 1.275rem auto 0; text-indent: -999em; opacity: 0; }
.swiper-slide.page2 .figure { background-image: url("../img/scenePhone02.png"); background-repeat: no-repeat; background-size: 100% 100%; width:7.2rem; height: 14rem; opacity: 0; position: absolute; left:50%; margin-left:-6.5rem; bottom:2rem; z-index: 3; }
.swiper-slide.page2 .bubble01 { transition: all .6s ease-in 0s; }
.swiper-slide.page2 .bubble02 { transition: all .6s ease-in 0s; }
.swiper-slide.page2 .bubble03 { transition: all .6s ease-in 0s; }
.swiper-slide.page2 .bubble04 { transition: all .6s ease-in 0s; }
.swiper-slide.page2 .bubble05 { transition: all .6s ease-in 0s; }
.swiper-slide.page2 .bubble06 { transition: all .6s ease-in 0s; }
.swiper-slide.page2 .bubble01 { background-image: url("../img/p2_1z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.6rem; height:0.6rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:4rem; z-index: 3; -webkit-transform: translatex(4.725rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page2 .bubble02 { background-image: url("../img/p2_2s.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.3rem; height:0.3rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:2.2rem; z-index: 3; -webkit-transform: translatex(-1.575rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page2 .bubble03 { background-image: url("../img/p2_3z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.4rem; height:0.4rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:6rem; z-index: 3; -webkit-transform: translatex(-3.25rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page2 .bubble04 { background-image: url("../img/p2_big.png"); background-repeat: no-repeat; background-size: 100% 100%; width:3.8rem; height:3.5rem; opacity: 0; position: absolute; left: 50%; top:12.5rem; margin-left:2rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page2 .bubble05 { background-image: url("../img/p2_heart.png"); background-repeat: no-repeat; background-size: 100% 100%; width:1.3rem; height:1.2rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:3rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page2 .bubble06 { background-image: url("../img/phone_water.png"); background-repeat: no-repeat; background-size: 100% 100%; width:8rem; height:1rem; opacity: 0; position: absolute; left: 50%; top:25.8rem; margin-left:-6.8rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide-active.page2 .phone { -webkit-animation: scene01phone 1s ease 0s forwards; -moz-animation: scene01phone 1s ease 0s forwards; animation: scene01phone 1s ease 0s forwards; }
.swiper-slide-active.page2 .text { -webkit-animation: scene01text 1s ease 0.4s forwards; -moz-animation: scene01text 1s ease 0.4s forwards; animation: scene01text 1s ease 0.4s forwards; }
.swiper-slide-active.page2 .figure { -webkit-animation: scene01text 1s ease 0.8s forwards; -moz-animation: scene01text 1s ease 0.8s forwards; animation: scene01text 1s ease 0.8s forwards; }
.swiper-slide-active.page2 .bubble01 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page2 .bubble02 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page2 .bubble03 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page2 .bubble04 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page2 .bubble05 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page2 .bubble06 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page2 .bubble01 { top:12.8rem; transition: all .6s ease-in 1.2s; -webkit-animation: bubble01 1s ease 1.8s forwards; -moz-animation: bubble01 1s ease 1.8s forwards; animation: bubble01 1s ease 1.8s forwards; }
.swiper-slide-active.page2 .bubble02 { top:12.7rem; transition: all .6s ease-in 1.4s; -webkit-animation: bubble01 1s ease 2s forwards; -moz-animation: bubble01 1s ease 2s forwards; animation: bubble01 1s ease 2s forwards; }
.swiper-slide-active.page2 .bubble03 { top: 17.5rem; transition: all .6s ease-in 1.6s; -webkit-animation: bubble01 1s ease 2.2s forwards; -moz-animation: bubble01 1s ease 2.2s forwards; animation: bubble01 1s ease 2.2s forwards; }
.swiper-slide-active.page2 .bubble04 { top:17.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page2 .bubble05 { top:13.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page2 .bubble06 { bottom:0rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }

.swiper-slide.page3 { background-color: #ffca28; text-align: center; transition: all .6s ease-in 0s; }
.swiper-slide.page3 .text { text-indent: -999em; }
.swiper-slide.page3 .text { background-image: url("../img/sceneText03.png"); background-repeat: no-repeat; background-size: 100% 100%; width:9.5rem; height: 4.4rem; margin: 1.275rem auto 0; text-indent: -999em; opacity: 0; }
.swiper-slide.page3 .figure { background-image: url("../img/scenePhone03.png"); background-repeat: no-repeat; background-size: 100% 100%; width:7.2rem; height: 14rem; opacity: 0; position: absolute; left:50%; margin-left:-6.5rem; bottom:2rem; z-index: 3; }
.swiper-slide.page3 .bubble01 { transition: all .6s ease-in 0s; }
.swiper-slide.page3 .bubble02 { transition: all .6s ease-in 0s; }
.swiper-slide.page3 .bubble03 { transition: all .6s ease-in 0s; }
.swiper-slide.page3 .bubble04 { transition: all .6s ease-in 0s; }
.swiper-slide.page3 .bubble05 { transition: all .6s ease-in 0s; }
.swiper-slide.page3 .bubble06 { transition: all .6s ease-in 0s; }
.swiper-slide.page3 .bubble01 { background-image: url("../img/p3_1s.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.3rem; height:0.3rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:4rem; z-index: 3; -webkit-transform: translatex(4.725rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page3 .bubble02 { background-image: url("../img/p3_2z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.5rem; height:0.5rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:2.2rem; z-index: 3; -webkit-transform: translatex(-1.575rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page3 .bubble03 { background-image: url("../img/p3_3z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.4rem; height:0.4rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:6rem; z-index: 3; -webkit-transform: translatex(-3.25rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page3 .bubble04 { background-image: url("../img/p3_big.png"); background-repeat: no-repeat; background-size: 100% 100%; width:5rem; height:4.35rem; opacity: 0; position: absolute; left: 50%; top:11.5rem; margin-left:2rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page3 .bubble05 { background-image: url("../img/p3_star.png"); background-repeat: no-repeat; background-size: 100% 100%; width:1.3rem; height:1.2rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:3rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page3 .bubble06 { background-image: url("../img/phone_water.png"); background-repeat: no-repeat; background-size: 100% 100%; width:8rem; height:1rem; opacity: 0; position: absolute; left: 50%; top:25.8rem; margin-left:-6.8rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide-active.page3 .phone { -webkit-animation: scene01phone 1s ease 0s forwards; -moz-animation: scene01phone 1s ease 0s forwards; animation: scene01phone 1s ease 0s forwards; }
.swiper-slide-active.page3 .text { -webkit-animation: scene01text 1s ease 0.4s forwards; -moz-animation: scene01text 1s ease 0.4s forwards; animation: scene01text 1s ease 0.4s forwards; }
.swiper-slide-active.page3 .figure { -webkit-animation: scene01text 1s ease 0.8s forwards; -moz-animation: scene01text 1s ease 0.8s forwards; animation: scene01text 1s ease 0.8s forwards; }
.swiper-slide-active.page3 .bubble01 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page3 .bubble02 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page3 .bubble03 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page3 .bubble04 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page3 .bubble05 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page3 .bubble06 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page3 .bubble01 { top:12.8rem; transition: all .6s ease-in 1.2s; -webkit-animation: bubble01 1s ease 1.8s forwards; -moz-animation: bubble01 1s ease 1.8s forwards; animation: bubble01 1s ease 1.8s forwards; }
.swiper-slide-active.page3 .bubble02 { top:12.7rem; transition: all .6s ease-in 1.4s; -webkit-animation: bubble01 1s ease 2s forwards; -moz-animation: bubble01 1s ease 2s forwards; animation: bubble01 1s ease 2s forwards; }
.swiper-slide-active.page3 .bubble03 { top: 17.5rem; transition: all .6s ease-in 1.6s; -webkit-animation: bubble01 1s ease 2.2s forwards; -moz-animation: bubble01 1s ease 2.2s forwards; animation: bubble01 1s ease 2.2s forwards; }
.swiper-slide-active.page3 .bubble04 { top:18.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page3 .bubble05 { top:13.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page3 .bubble06 { bottom:0rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }

.swiper-slide.page4 { background-color: #45d080; text-align: center; transition: all .6s ease-in 0s; }
.swiper-slide.page4 .text { text-indent: -999em; }
.swiper-slide.page4 .text { background-image: url("../img/sceneText04.png"); background-repeat: no-repeat; background-size: 100% 100%; width:10.4rem; height: 4.4rem; margin: 1.275rem auto 0; text-indent: -999em; opacity: 0; }
.swiper-slide.page4 .figure { background-image: url("../img/scenePhone04.png"); background-repeat: no-repeat; background-size: 100% 100%; width:7.2rem; height: 14rem; opacity: 0; position: absolute; left:50%; margin-left:-6.5rem; bottom:2rem; z-index: 3; }
.swiper-slide.page4 .bubble01 { transition: all .6s ease-in 0s; }
.swiper-slide.page4 .bubble02 { transition: all .6s ease-in 0s; }
.swiper-slide.page4 .bubble03 { transition: all .6s ease-in 0s; }
.swiper-slide.page4 .bubble04 { transition: all .6s ease-in 0s; }
.swiper-slide.page4 .bubble05 { transition: all .6s ease-in 0s; }
.swiper-slide.page4 .bubble06 { transition: all .6s ease-in 0s; }
.swiper-slide.page4 .bubble01 { background-image: url("../img/p4_1s.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.6rem; height:0.6rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:4rem; z-index: 3; -webkit-transform: translatex(4.725rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page4 .bubble02 { background-image: url("../img/p4_2s.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.3rem; height:0.3rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:2.2rem; z-index: 3; -webkit-transform: translatex(-1.575rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page4 .bubble03 { background-image: url("../img/p4_3z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.4rem; height:0.4rem; opacity: 0; position: absolute; left: 50%; top: 17.2rem; margin-left:7rem; z-index: 3; -webkit-transform: translatex(-3.25rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page4 .bubble04 { background-image: url("../img/p4_big.png"); background-repeat: no-repeat; background-size: 100% 100%; width:5rem; height:3.48rem; opacity: 0; position: absolute; left: 50%; top:12.5rem; margin-left:2rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page4 .bubble05 { background-image: url("../img/p4_star.png"); background-repeat: no-repeat; background-size: 100% 100%; width:1.3rem; height:1.2rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:3rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page4 .bubble06 { background-image: url("../img/phone_water.png"); background-repeat: no-repeat; background-size: 100% 100%; width:8rem; height:1rem; opacity: 0; position: absolute; left: 50%; top:25.8rem; margin-left:-6.8rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide-active.page4 .phone { -webkit-animation: scene01phone 1s ease 0s forwards; -moz-animation: scene01phone 1s ease 0s forwards; animation: scene01phone 1s ease 0s forwards; }
.swiper-slide-active.page4 .text { -webkit-animation: scene01text 1s ease 0.4s forwards; -moz-animation: scene01text 1s ease 0.4s forwards; animation: scene01text 1s ease 0.4s forwards; }
.swiper-slide-active.page4 .figure { -webkit-animation: scene01text 1s ease 0.8s forwards; -moz-animation: scene01text 1s ease 0.8s forwards; animation: scene01text 1s ease 0.8s forwards; }
.swiper-slide-active.page4 .bubble01 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page4 .bubble02 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page4 .bubble03 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page4 .bubble04 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page4 .bubble05 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page4 .bubble06 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page4 .bubble01 { top:12.8rem; transition: all .6s ease-in 1.2s; -webkit-animation: bubble01 1s ease 1.8s forwards; -moz-animation: bubble01 1s ease 1.8s forwards; animation: bubble01 1s ease 1.8s forwards; }
.swiper-slide-active.page4 .bubble02 { top:12.7rem; transition: all .6s ease-in 1.4s; -webkit-animation: bubble01 1s ease 2s forwards; -moz-animation: bubble01 1s ease 2s forwards; animation: bubble01 1s ease 2s forwards; }
.swiper-slide-active.page4 .bubble03 { top: 17.5rem; transition: all .6s ease-in 1.6s; -webkit-animation: bubble01 1s ease 2.2s forwards; -moz-animation: bubble01 1s ease 2.2s forwards; animation: bubble01 1s ease 2.2s forwards; }
.swiper-slide-active.page4 .bubble04 { top:17.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page4 .bubble05 { top:13.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page4 .bubble06 { bottom:0rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }

.swiper-slide.page5 { background-color: #ad1dff; text-align: center; transition: all .6s ease-in 0s; }
.swiper-slide.page5 .text { text-indent: -999em; }
.swiper-slide.page5 .text { background-image: url("../img/sceneText05.png"); background-repeat: no-repeat; background-size: 100% 100%; width:9.5rem; height: 4.4rem; margin: 1.275rem auto 0; text-indent: -999em; opacity: 0; }
.swiper-slide.page5 .figure { background-image: url("../img/scenePhone05.png"); background-repeat: no-repeat; background-size: 100% 100%; width:7.2rem; height: 14rem; opacity: 0; position: absolute; left:50%; margin-left:-6.5rem; bottom:2rem; z-index: 3; }
.swiper-slide.page5 .bubble01 { transition: all .6s ease-in 0s; }
.swiper-slide.page5 .bubble02 { transition: all .6s ease-in 0s; }
.swiper-slide.page5 .bubble03 { transition: all .6s ease-in 0s; }
.swiper-slide.page5 .bubble04 { transition: all .6s ease-in 0s; }
.swiper-slide.page5 .bubble05 { transition: all .6s ease-in 0s; }
.swiper-slide.page5 .bubble06 { transition: all .6s ease-in 0s; }
.swiper-slide.page5 .bubble01 { background-image: url("../img/p5_1s.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.2rem; height:0.2rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:4rem; z-index: 3; -webkit-transform: translatex(4.725rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page5 .bubble02 { background-image: url("../img/p5_2z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.3rem; height:0.3rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:2.2rem; z-index: 3; -webkit-transform: translatex(-1.575rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page5 .bubble03 { background-image: url("../img/p5_3z.png"); background-repeat: no-repeat; background-size: 100% 100%; width:0.4rem; height:0.4rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:6rem; z-index: 3; -webkit-transform: translatex(-3.25rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page5 .bubble04 { background-image: url("../img/p5_big.png"); background-repeat: no-repeat; background-size: 100% 100%; width:3.5rem; height:5rem; opacity: 0; position: absolute; left: 50%; top:12.5rem; margin-left:2rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page5 .bubble05 { background-image: url("../img/p5_heart.png"); background-repeat: no-repeat; background-size: 100% 100%; width:1.3rem; height:1.2rem; opacity: 0; position: absolute; left: 50%; top: 17.5rem; margin-left:3rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide.page5 .bubble06 { background-image: url("../img/phone_water.png"); background-repeat: no-repeat; background-size: 100% 100%; width:8rem; height:1rem; opacity: 0; position: absolute; left: 50%; top:25.8rem; margin-left:-6.8rem; z-index: 3; -webkit-transform: translatex(7rem) scale(0, 0) rotate(800deg); }
.swiper-slide-active.page5 .phone { -webkit-animation: scene01phone 1s ease 0s forwards; -moz-animation: scene01phone 1s ease 0s forwards; animation: scene01phone 1s ease 0s forwards; }
.swiper-slide-active.page5 .text { -webkit-animation: scene01text 1s ease 0.4s forwards; -moz-animation: scene01text 1s ease 0.4s forwards; animation: scene01text 1s ease 0.4s forwards; }
.swiper-slide-active.page5 .figure { -webkit-animation: scene01text 1s ease 0.8s forwards; -moz-animation: scene01text 1s ease 0.8s forwards; animation: scene01text 1s ease 0.8s forwards; }
.swiper-slide-active.page5 .bubble01 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page5 .bubble02 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page5 .bubble03 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page5 .bubble04 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page5 .bubble05 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page5 .bubble06 { opacity: 1; -webkit-transform: translatex(0) scale(1, 1) rotate(0deg); }
.swiper-slide-active.page5 .bubble01 { top:12.8rem; transition: all .6s ease-in 1.2s; -webkit-animation: bubble01 1s ease 1.8s forwards; -moz-animation: bubble01 1s ease 1.8s forwards; animation: bubble01 1s ease 1.8s forwards; }
.swiper-slide-active.page5 .bubble02 { top:12.7rem; transition: all .6s ease-in 1.4s; -webkit-animation: bubble01 1s ease 2s forwards; -moz-animation: bubble01 1s ease 2s forwards; animation: bubble01 1s ease 2s forwards; }
.swiper-slide-active.page5 .bubble03 { top: 17.5rem; transition: all .6s ease-in 1.6s; -webkit-animation: bubble01 1s ease 2.2s forwards; -moz-animation: bubble01 1s ease 2.2s forwards; animation: bubble01 1s ease 2.2s forwards; }
.swiper-slide-active.page5 .bubble04 { top:17.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page5 .bubble05 { top:13.7rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
.swiper-slide-active.page5 .bubble06 { bottom:0rem; transition: all .6s ease-in 1.8s; -webkit-animation: bubble01 1s ease 2.4s forwards; -moz-animation: bubble01 1s ease 2.4s forwards; animation: bubble01 1s ease 2.4s forwards; }
@-webkit-keyframes upArrows {
 0% {
 -webkit-transform: translate(-50%, 0);
}
 100% {
 -webkit-transform: translate(-50%, -6px);
}
}
.zhuan { animation: zhuan 4s infinite linear; -webkit-animation: zhuan 4s infinite linear; }
 @keyframes zhuan {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(360deg);
}
}
@-webkit-keyframes zhuan {
 from {
 -webkit-transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
}
}
.shan { animation: shan 4s infinite linear; -webkit-animation: shan 4s infinite linear; }
 @keyframes shan {
 0% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
@-webkit-keyframes shan {
 0% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
@-webkit-keyframes scene01phone {
 0% {
 -webkit-transform: translateY(-50%);
 opacity: 0;
}
 100% {
 -webkit-transform: translateY(0);
 opacity: 1;
}
}
@-webkit-keyframes scene01text {
 0% {
 -webkit-transform: translatex(-50%);
 opacity: 0;
}
 100% {
 -webkit-transform: translatex(0);
 opacity: 1;
}
}
@-webkit-keyframes scene01downloadBtn {
 0% {
 -webkit-transform: translatey(120%);
 opacity: 0;
}
 100% {
 -webkit-transform: translatey(0);
 opacity: 1;
}
}
@-webkit-keyframes scene01spreadDot {
 0% {
 -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5);
 opacity: 0;
}
 50% {
 -webkit-transform: translate(-50%, -50%) scale(1, 1);
 opacity: .3;
}
 100% {
 -webkit-transform: translate(-50%, -50%) scale(1.6, 1.6);
 opacity: 0;
}
}
@-webkit-keyframes bubble01 {
 0% {
 -webkit-transform: translate(-10%, 10%);
}
 20% {
 -webkit-transform: translate(10%, -5%);
}
 40% {
 -webkit-transform: translate(-5%, 10%) scale(1.1, 1.1);
}
 60% {
 -webkit-transform: translate(0, -5%);
}
 80% {
 -webkit-transform: translate(0, 5%);
}
 100% {
 -webkit-transform: translate(0%, 0%);
}
}
/*@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
html { font-size: 23.4px; }
}
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
html { font-size: 25.8px; }
}
*/