* {padding: 0;margin: 0;outline: none; border: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);  -webkit-text-size-adjust: none; -webkit-touch-callout: none; font-family: "Microsoft YaHei", sans-serif;}

/*箭头*/
.arrow { display: inline-block; width: 30px; height: 15px; position: absolute; bottom: 20px; left: 50%; margin-left: -8px; background: url("../img/arrow.png") no-repeat 0 0; background-size: 32px auto; -webkit-animation: arrow 1.5s infinite 0s; opacity: 0;}
@-webkit-keyframes arrow {
    0% {-webkit-transform:translate3d(0, 62px, 0); opacity:0}
    60% { -webkit-transform:translate3d(0, 12px, 0); opacity:1}
    100% { -webkit-transform:translate3d(0, 0, 0); opacity:0}
}
/*加载页*/
.page-loading { position: absolute;left: 0; right: 0; bottom: 0;top: 0; z-index: 30; background: #182d4d;}
.page-loading .border { font-size: 100px; width: 1em;height: 1em; position: relative; margin: 60% auto auto auto;border-radius: 50%; list-style: none;}
.page-loading .border li { position: absolute; width: .2em; height: .2em;border-radius: 50%;}
.page-loading .border li:nth-child(1) { left: 50%; top: 0; margin: 0 0 0 -.1em; background: #feb963; -webkit-transform-origin: 50% 250%;-webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;}
.page-loading .border li:nth-child(2) { top: 50%; right: 0;margin: -.1em 0 0 0; background: #f86260; -webkit-transform-origin: -150% 50%;-webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate}
.page-loading .border li:nth-child(3) { left: 50%; bottom: 0; margin: 0 0 0 -.1em; background: #49b2e1; -webkit-transform-origin: 50% -150%; -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;}
.page-loading .border li:nth-child(4) { top: 50%; left: 0; margin: -.1em 0 0 0; background: #feb95d; -webkit-transform-origin: 250% 50%; -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;}

@-webkit-keyframes rota {
    from {}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes rota {
    from {}
    to { transform: rotate(360deg);}
}

/*背景图*/
.page {/*background: #182d4d;*/background: #000}
.back-img { position: absolute; height: 100%; width:100%;left: 50%;-webkit-transform: translate3d(-50%, 0, 0);}

/*第一页*/
.logo { position: fixed; left: 1rem; top: 1rem; width: 40%}

.pic1 { text-align: center; margin-top:27%}
.pic1 img{ width:90%; opacity: 0; margin-bottom: .5rem}
.pic1-1 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:1s;
}
.pic1-2 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay: 2s;
}
.pic1-3 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay: 3s;
}
@-webkit-keyframes big {
    0% { -webkit-transform:scale(10); opacity: 0}
    100% { -webkit-transform:scale(1); opacity: 1}
}
.earth { position: absolute; right: 0; top:37%; width: 70%; margin-right:15%;}
.ship {
    position: absolute; left: 0; top:67%; width: 15%; margin-left:45%;
    animation: left-page-1-1 1s forwards;
    -webkit-animation:left-page-1-1 1s forwards;
    -webkit-animation-delay: 4s;
    opacity: 0;
}
@-webkit-keyframes left-page-1-1 {
    0% { left: -55%; opacity: 0}
    100% { left:0; opacity: 1}
}
.track {
    position: absolute; left: 0; top:68%; width: 30%; margin-left:14%;
    animation: fade-page-1-1 1s forwards;
    -webkit-animation:fade-page-1-1 1s forwards;
    -webkit-animation-delay: 5s;
    opacity: 0;
}
@-webkit-keyframes fade-page-1-1 {
    0% { opacity: 0}
    100% {opacity: 1}
}
.ticket { position: absolute; right: 8%; top:42%; width: 70%;
    animation: right-page-1-2 1s forwards;
    -webkit-animation:right-page-1-2 1s forwards;
    opacity: 0;
}
@-webkit-keyframes right-page-1-2 {
    0% { right: -85%; opacity: 0}
    100% { right:8%; opacity: 1}
}

/*第二页*/
.page2-bg { width: 94%; margin: 25% 0 0 3%}
.page2-pic { position: absolute; width: 25%}
.page2-pic-1 {
    left:13%; top: 30%;
    animation: left-page2-1 1s forwards;
    -webkit-animation:left-page2-1 1s forwards;
    opacity: 0;
}
@-webkit-keyframes left-page2-1 {
    0% { left: 0%; opacity: 0}
    100% { left:13%; opacity: 1}
}
.page2-pic-2 {
    left:5%; top: 22%;
    animation: left-page2-2 1s forwards;
    -webkit-animation:left-page2-2 1s forwards;
    -webkit-animation-delay:1s;
    opacity: 0;
}
@-webkit-keyframes left-page2-2 {
    0% { left: 0%; opacity: 0}
    100% { left:5%; opacity: 1}
}
.page2-pic-3 {
    left:33%; top: 18%;
    animation: left-page2-3 1s forwards;
    -webkit-animation:left-page2-3 1s forwards;
    -webkit-animation-delay:2s;
    opacity: 0;
}
@-webkit-keyframes left-page2-3 {
    0% { left: 23%; opacity: 0}
    100% { left:33%; opacity: 1}
}
.page2-pic-4 {
    left:67%; top: 24%;
    animation: left-page2-4 1s forwards;
    -webkit-animation:left-page2-4 1s forwards;
    -webkit-animation-delay:3s;
    opacity: 0;
}
@-webkit-keyframes left-page2-4 {
    0% { left: 57%; opacity: 0}
    100% { left:67%; opacity: 1}
}
.page2-pic-5 {
    left:67%; top: 37%;
    animation: left-page2-4 1s forwards;
    -webkit-animation:left-page2-4 1s forwards;
    -webkit-animation-delay:4s;
    opacity: 0;
}
.page2-text {position: absolute; left: 8%; bottom: 6%; }
.page2-text img {width: 90%; margin:5% .2rem 0 0}
.page2-text1 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:4.5s;
    opacity: 0;
}
.page2-text2 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:5.5s;
    opacity: 0;
}
.page2-text3 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:6.5s;
    opacity: 0;
}
.page2-text4 {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:7.5s;
    opacity: 0;
}

/*第三页*/
.text { position: absolute; color: #52f6f6; width: 100%; text-align: center; margin-top: 32%}
.text span { display: inline-block; font-size: 1.9rem;opacity: 0; font-weight: bold}
.text span:nth-child(1) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:.5s;
}
.text span:nth-child(2) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:1s;
}
.text span:nth-child(3) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:1.5s;
}
.text span:nth-child(4) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:2s;
}
.text span:nth-child(5) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:2.5s;
}
.text span:nth-child(6) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:3s;
}
.text span:nth-child(7) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:3.5s;
}
.text span:nth-child(8) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:4s;
}
.text span:nth-child(9) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:4.5s;
}
.text span:nth-child(10) {
    animation: print .5s forwards;
    -webkit-animation:print .5s forwards;
    -webkit-animation-delay:5s;
}
@-webkit-keyframes print {
    0% { opacity: 0}
    100% { opacity: 1}
}
.page3-text { color: #fff; font-size: 1.1rem; position: absolute; top: 30%; width: 100%}
.page3-text p { margin: 0 8% 10% 8%; opacity: 0}
.page3-text p:nth-child(1){
    animation: big .5s forwards;
    -webkit-animation:big .5s forwards;
    -webkit-animation-delay:6.5s;
}
.page3-text p:nth-child(2){
    animation: big .5s forwards;
    -webkit-animation:big .5s forwards;
    -webkit-animation-delay:8.5s;
}
.page3-text p:nth-child(3){
    animation: big .5s forwards;
    -webkit-animation:big .5s forwards;
    -webkit-animation-delay:10.5s;
}
.page3-text p:nth-child(4){
    animation: big .5s forwards;
    -webkit-animation:big .5s forwards;
    -webkit-animation-delay:12.5s;
}

/*第四页*/
.pic4-1 { position: absolute; right: -40%; top: 10%; width: 100%}
.page4-track { position: absolute; right: 8%; top:25%; width: 70%;
    animation: right-page-1-2 1s forwards;
    -webkit-animation:right-page-1-2 1s forwards;
    -webkit-animation-delay:.5s;
    opacity: 0;
}
@-webkit-keyframes right-page-1-2 {
    0% { right: -85%; opacity: 0}
    100% { right:8%; opacity: 1}
}
.page4-p { position: absolute; bottom: 15%; width: 100%}
.page4-p p { text-align: center; color: #fff; margin-bottom: 2%; opacity: 0}
.page4-p p span { color: #52f6f6; display: inline-block; font-size: 1.4rem; font-weight: bold}
.page4-p p:nth-child(1) {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:1.5s;
}
.page4-p p:nth-child(2) {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:2.5s;
}
.page4-p p:nth-child(3) {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:3.5s;
}
.page4-p p:nth-child(4) {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:4.5s;
}
.page4-p p:nth-child(5) {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:5.5s;
}
.page4-p p:nth-child(6) {
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:6.5s;
}

/*第五页*/
.page5-title {
    position: absolute; left: 5%; top: 18%; width: 90%; color: #182d4d; background: #00e2ea; border-radius: 1rem; font-size: 1rem; text-align: center; padding: .2rem 0;
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:.5s;
    opacity: 0;
}
.page5-text {
    position: absolute; left: 5%; top:30%; width: 90%;
    animation: down-page5 .5s forwards;
    -webkit-animation:down-page5 .5s forwards;
    -webkit-animation-delay:1.5s;
    opacity: 0;
}
@-webkit-keyframes down-page5 {
    0% { top: 120%; opacity: 0}
    100% { top:30%; opacity: 1}
}

/*第六页*/
.user-pic {
    position: absolute; top: 25%; background: url("../images/line.png") center 0 no-repeat; background-size: 7rem; height: 7rem; width: 100%;
    animation: text-fade-out .5s forwards;
    -webkit-animation:text-fade-out .5s forwards;
    -webkit-animation-delay:1.5s;
    opacity: 0;
}
@-webkit-keyframes text-fade-out {
    0% { opacity: 0}
    100% { opacity: 1}
}
.user-pic img { display: block; width: 5rem; height: 5rem; border-radius: 2.5rem; margin: 1rem auto 0 auto}
.user-pic b { display: block; text-align: center; color: #fff; padding-top: 1.5rem}

.info {
    position: absolute; left: 5%; top:52%; width: 90%; background: rgba(8,187,253,.2); border-radius: 1rem;
    animation: down-page6 .5s forwards;
    -webkit-animation:down-page6 .5s forwards;
    -webkit-animation-delay:2s;
    opacity: 0;
}
.info h1 { font-size: 1rem; color: #fff; padding: 3%; text-indent: 2rem; font-weight: bold}
.info p { font-size: .9rem; color: #fff; padding: 3%; text-indent: 2rem}
@-webkit-keyframes down-page6 {
    0% { top: 120%; opacity: 0}
    100% { top:52%; opacity: 1}
}

/*第七页*/
.m-left {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    animation: m-left 3s forwards;
    -webkit-animation:m-left 3s forwards;
    -webkit-animation-delay:.5s;
}
@-webkit-keyframes m-left {
    0% { left:0}
    100% {left:-100%}
}
.m-right {
    position: absolute; right: 0; top: 0; width: 100%; height: 100%;
    animation: m-right 3s forwards;
    -webkit-animation:m-right 3s forwards;
    -webkit-animation-delay:.5s;
}
@-webkit-keyframes m-right {
    0% { right: 0}
    100% {right: -100%}
}

.page8 { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.from-box { position: absolute; top: 32%; color: #00e2ea; width: 100%; text-align: center;}
.from-box h1 { font-size: 1.6rem;
    animation: text-scale 1s forwards;
    -webkit-animation:text-scale 1s forwards;
    -webkit-animation-delay:1.5s;
    opacity: 0
}
@-webkit-keyframes text-scale {
    0% { -webkit-transform:scale(100); opacity: 0}
    50% { -webkit-transform:scale(.7); opacity: 1}
    100% { -webkit-transform:scale(1); opacity: 1}
}
.from-box button {
    background: #00e2ea; border-radius: .3rem; width: 60%; padding: .5rem 0; font-size: 1.1rem; color: #fff; margin: 1rem 0;
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:3s;
    opacity: 0;
}
.from-box p {
    font-size: .8rem;
    animation: big 1s forwards;
    -webkit-animation:big 1s forwards;
    -webkit-animation-delay:4s;
    opacity: 0;
}

.pop-form { display: none; position: absolute; left: 50%; top: 50%; background: url("../images/bg-0-1.jpg") 0 0 no-repeat; background-size: 100% 100%; width: 90%; height: 70%; margin-left: -45%; margin-top: -60%; z-index: 2 }
.close-btn { float: right; background: url("../images/close.png") 0 0 no-repeat; width: 2rem; height: 2rem; background-size: 2rem; border: 0; text-indent: -9999px; margin: 1rem 1rem 0 0}
.pop-form ul { margin-top: 10%}
.pop-form ul li { position: relative; color: #fff; padding:1rem 1rem 0 5rem}
.pop-form ul li input{ background: url("../images/input-bg.png") 0 0 no-repeat; color: #fff; font-size: 1rem; height: 3rem; background-size: 100% 100%; width: 90%; padding: 0 5%}
.pop-form ul li em { position: absolute; left: 1rem; top:1.5rem; width: 3rem; display: inline-block; font-style: normal}
.sub-btn { background: #00e2ea; display: block; width: 90%; margin-left: 5%; font-size: 1.2rem; border-radius: .5rem; padding: .5rem 0; margin-top: 20%}

.suc-box { display: none; position: absolute; left: 50%; top: 50%; background: url("../images/suc.jpg") 0 0 no-repeat; background-size: 100% 100%; width: 90%; height: 50%; margin-left: -45%; margin-top: -40%; z-index: 2 }
.suc-box h1,.suc-box p { color: #00e2ea; text-align: center}
.suc-box h1 { font-size: 2rem; padding: 10% 0}
.suc-box p { font-size: .9rem}

.pop-bg { display: none; position: fixed; left: 0; top: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; z-index: 1}

/*音乐控制*/
#lanren{position: fixed;z-index: 300; top: 1rem;right:1rem;}
#lanren #audio-btn{width: 2.5rem;height: 2.5rem;background-size: 100% 100%;}
#lanren .on{background: url('../img/music_on.png') no-repeat 0 0;background-size: cover; -webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#lanren .off{background: url('../img/music_off.png') no-repeat 0 0;background-size: cover;}
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}