@charset "utf-8";

html {
-ms-touch-action: none;  /* 阻止windows Phone 的默认触摸事件 */
}
body,div,p {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
body {
	width: 100%;
	*cursor: default;
	overflow: hidden;
	font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;
}
#pageContain {
	overflow: hidden;
}
.page {
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	/*top: 0;
	left: 0;*/
}
.contain {
	width: 100%;
	height: 100%;
	display: none;
	position: relative;
	z-index: 0;
}
.current .contain,.slide .contain {
	display: block;
}
.current {
	display: block;
	z-index: 1;
}
.slide {
	display: block;
	z-index: 2;
}
.swipe {
	display: block;
	z-index: 3;
	transition-duration: 0ms !important;
	-webkit-transition-duration: 0ms !important;
}

/* 页面导航 */
#navBar {
	z-index: 3;
	position: absolute;
	top: 10%;
	right: 3%;
}
#navBar .active {
	background: #ccc;
}
#navBar li {
	cursor: pointer;
	margin-bottom: 10px;
	transition: all .7s ease;
	border-radius: 50%;
	line-height: 0.3rem;
	text-align: center;
	width: 0.3rem;
	height: 0.3rem;
}

/* 箭头 */
.arrow_up {position:fixed; bottom:0.1rem; left:50%; width:0.6rem; height:auto; z-index:9999;
-webkit-transform:translateX(-50%);
-webkit-animation:dong 1s linear 0s infinite alternate;
transform:translateX(-50%);
animation:dong 1s linear 0s infinite alternate;
}
@-webkit-keyframes dong {
from {
	bottom:0.1rem;
}
to {
	bottom:0.25rem;
}
}
@keyframes dong {
from {
	bottom:0.1rem;
}
to {
	bottom:0.25rem;
}
}

.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}
.FL{ float:left; display:inline;}
.FR{ float:right; display:inline;}
/* 页面背景 */
.page1{background:#fff;}
.page2{background:url(../images/002.jpg) no-repeat 50%;}

.page1,.page2{
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}




/* 页面元素 */
.contain{overflow:hidden;}
.contain ul {position:absolute; width:100%; height:100%; margin:0; padding:0;}
.contain li img{position:absolute; z-index:10;}

.loading{ width:100%; height:100%; background:#fff; position:absolute; margin:0 auto; z-index:10000;}
.loading img{ position:absolute; top:50%; left:50%; margin-top:-0.95rem; margin-left:-1.56rem;  z-index:10001;}

/* 自适应框架（设计图宽度） */
body {
	max-width: 6.4rem; 
	margin: 0 auto;
}
body * {
	max-width: 6.4rem;
}
.none{display:none;}


@-webkit-keyframes bounce-down {
    25% {
        -webkit-transform: translateY(-6px);
    }
    50%, 100% {
        -webkit-transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(6px);
    }
}
 
@keyframes bounce-down {
    25% {
        transform: translateY(-6px);
    }
    50%, 100% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(6px);
    }
}
 
.animate-bounce-down{
    -webkit-animation: bounce-down 1.5s linear infinite;
    animation: bounce-down 1.5s linear infinite;
}





.btn_btn{transform:rotate(45deg); -webkit-transform:rotate(45deg); transform-origin:center; -webkit-transform-origin:center}
.tb1{
-webkit-transform:translateZ(0);
background-image:url(../images/3_4.png);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-mask:url(../images/1.jpg) center top;
-webkit-mask-size:100% 100%;
-webkit-animation:wipe 2s forwards 2.5s;
background-position:0 0.65rem;
}
.tb2{
-webkit-transform:translateZ(0);
background-image:url(../images/3_5.png);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-mask:url(../images/2.jpg) center top;
-webkit-mask-size:100% 100%;
-webkit-animation:wipe 2s forwards 2.5s;
background-position:0 1.07rem;
}
.tb3{
-webkit-transform:translateZ(0);
background-image:url(../images/3_6.png);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-mask:url(../images/3.jpg) center top;
-webkit-mask-size:100% 100%;
-webkit-animation:wipe 2s forwards 2.5s;
background-position:0 1.17rem;
}
@-webkit-keyframes wipe {
 100% {
 background-position:0 0;
}
}


.kg{text-indent:2em;}
.tcenter{text-align:center;}
.FB{font-weight:bold;}
.t1{color:#FF3333;}
.t2{color:#999999}
.t3{color:#333}
.lh120{line-height:120%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.F18{font-size:0.9em}
.F22{font-size:1.1em}
.F40{font-size:2.5em}
@media screen and (max-width: 640px) {
	.F18{font-size:0.9em}
	.F22{font-size:1em}
	.F40{font-size:2.5em}
}

@media screen and (max-width: 414px) {
	.F18{font-size:0.7em}
	.F22{font-size:0.9em}
	.F40{font-size:2em}
}

@media screen and (max-width: 400px) {
	.F18{font-size:0.7em}
	.F22{font-size:0.9em}
	.F40{font-size:2em}
}

@media screen and (max-width: 392px) {
	.F18{font-size:0.7em}
	.F22{font-size:0.9em}
	.F40{font-size:2em}
}

@media screen and (max-width: 385px) {
	.F18{font-size:0.7em}
	.F22{font-size:0.9em}
	.F40{font-size:2em}
}
@media screen and (max-width: 375px) {
	.F18{font-size:0.7em}
	.F22{font-size:0.8em}
	.F40{font-size:1.8em}
}
@media screen and (max-width: 359px) {
	.F18{font-size:0.5em}
	.F22{font-size:0.7em}
	.F40{font-size:1.6em}
}


@-webkit-keyframes op{
   to{
        opacity:1;
   } 
}
@keyframes op{
   to{
        opacity:1;
   } 
}


.page1_1s{
-webkit-animation: page1_1 0.5s 0.5s forwards;
animation:page1_1 0.5s 0.5s forwards;
}
@-webkit-keyframes page1_1 {
100% { top:0%; left:0%;}
}
@keyframes page1_1 {
100% { top:0%; left:0%;}
}
.page1_2s{
-webkit-animation: page1_2 0.5s 0.5s forwards;
animation:page1_2 0.5s 0.5s forwards;
}
@-webkit-keyframes page1_2 {
100% { top:81.82%; right:0%;}
}
@keyframes page1_2 {
100% { top:81.82%; right:0%;}
}

.page1_3s {
-webkit-animation:page1_3 0.5s 1s linear forwards,op 0.1s 1s forwards;
animation:page1_3 0.5s 1s linear forwards,op 0.1s 1s forwards;
}
@-webkit-keyframes page1_3 {
0% {-webkit-transform:scale(0.1);}
100% {-webkit-transform:scale(1);}
}
@keyframes page1_3 {
0% {transform:scale(0.1);}
100% {transform:scale(1);}
}

.page1_4s{
-webkit-animation: page1_4 0.5s 1.5s forwards,op 0.1s 1.5s forwards;
animation:page1_4 0.5s 1.5s forwards,op 0.1s 1.5s forwards;
}
@-webkit-keyframes page1_4 {
100% {left:40%;}
}
@keyframes page1_4 {
100% {left:40%;}
}

.page1_5s{
-webkit-animation: page1_5 0.5s 2.5s forwards,op 0.1s 2.5s forwards;
animation:page1_5 0.5s 2.5s forwards,op 0.1s 2.5s forwards;
}
@-webkit-keyframes page1_5 {
100% {top:200%;}
}
@keyframes page1_5 {
100% {top:200%;}
}

.back {
-webkit-animation:backs 1s linear 0s infinite alternate;
animation:backs 1s linear 0s infinite alternate;
transform-origin:center;
-webkit-transform-origin:center;
}
@-webkit-keyframes backs{
from {
	-webkit-transform:rotatez(-8deg)
}
to {
	-webkit-transform:rotatez(8deg)
}
}
@keyframes backs {
from {
	transform:rotatez(-8deg)
}
to {
	transform:rotatez(8deg)
}
}

.rotos {
-webkit-animation:roto 0.5s linear 1.5s forwards,op 0.2s 1.5s forwards;
animation:roto 0.5s linear 1.5s forwards,op 0.2s 1.5s forwards;
transform-origin:center;
-webkit-transform-origin:center;
}

@-webkit-keyframes roto{
from {
	-webkit-transform:rotatez(0deg);
}
to {
	-webkit-transform:rotatez(360deg);
}
}
@keyframes roto {
from {
	transform:rotatez(0deg);
}
to {
	transform:rotatez(360deg);
}
}

.train {
-webkit-animation:page1_3 0.5s linear 0.2s forwards,op 0.2s 0.2s forwards;
animation:page1_3 0.5s linear 0.2s forwards,op 0.2s 0.2s forwards;
transform-origin:right center;
-webkit-transform-origin:right center;
}
.plane {
-webkit-animation:page1_3 0.5s linear 2s forwards,op 0.2s 2s forwards;
animation:page1_3 0.5s linear 2s forwards,op 0.2s 2s forwards;
transform-origin:left 80%;
-webkit-transform-origin:left 80%;
}