* {
	outline: none;
	font-family: "Helvetica Neue",Helvetica,"Microsoft YaHei",'微软雅黑',arial,sans-serif;
	-webkit-tap-highlight-color: transparent;
	/*以下两行隐藏一些input控件本身样式及select箭头***/
    /*-webkit-appearance:none;
      -moz-appearance:none;*/
    /**以下3行解决webkit translation 闪烁问题**/
	/*-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform-style: preserve-3d;*/
}
body, html {
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: hidden;
	height: 100%;
	background: url(../images/img_19.png) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
/*body{
	background: url(../images/bg.jpg) left bottom no-repeat;
	background-size: 100% 100%;
}*/
.clearfix {
*zoom:1
}
.clearfix:before, .clearfix:after {
	content: ' ';
	display: table
}
.clearfix:after {
	clear: both;
}
a {
	text-decoration: none;
}
img{
	pointer-events: none;
}
img.cantouch{
	pointer-events: all;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}
.hideimg {
	opacity: 0;
}

/***arrow and loading***/
/***音乐控制按钮****/
.music{
	width: 25px;
	height: 25px;
	position: absolute;
	z-index: 500;
	right: 3%;
    bottom: 1%;
	background: url(../images/icon_music_off.png);
	background-size: 100% 100%;
	/*transform: rotate(90deg);*/
}
.music-play{
	/*transform: rotate(90deg);*/
	background: url(../images/icon_music_on.png);
	background-size: 100% 100%;
}
.music1,.music2,.music3{
	width: 9px;
	height: 13px;
	position: absolute;
	z-index: 5;
	background: url(../images/icon_music.png);
	background-size: 100% 100%;
	left: 10px;
	top: -10px;
	opacity: 0;
}
.music-play .music1{
	animation: musicplay1 2s linear infinite;
	-webkit-animation: musicplay1 2s linear infinite;
}
.music-play .music2{
	animation: musicplay2 2s linear 0.7s infinite;
	-webkit-animation: musicplay2 2s linear 0.7s infinite;
}
.music-play .music3{
	animation: musicplay3 2s linear 1.4s infinite;
	-webkit-animation: musicplay3 2s linear 1.4s infinite;
}


.arrow {
	width: 10.4%;
	position: absolute;
	bottom: 8%;
	left: 44.8%;
	opacity: 1;
	z-index: 99;
}
.arrow {
	animation: arrow 1s linear infinite;
	-webkit-animation: arrow 1s linear infinite;
}

/***loading***/
#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999999999;
	text-align: center;
	/*background: url(../images/ld-bg.jpg) no-repeat;
	background-size: 100% 100%;*/
	display: table;
}
#loading .ld-logo {
	width:56.25%;
	top: 35%;
	left: 21.875%;
}
#loading .ld-box{
	width: 100%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
#loading .ld-track {
	width: 70%;
	margin: 0 auto;
	height: 6px;
	position: relative;
	z-index: 1;
    border: 1px solid #e30117;
}
#loading .ld-line {
	width: 0;
	height: 6px;
	font-size: 0;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background: #e30117;
	-webkit-transition: all linear 0.3s;
	transition: all linear 0.3s;
}
#loading .percent{
	color: #fff;
	font-size: 12px;
}


/****公共部分****/
.loading{
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: 100;
    color: #fff;
    font-size: 3vw;
    left: 0;
    top:48%;
    animation: flash 1s linear infinite;
	-webkit-animation: flash 1s linear infinite;
}
.mask{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	background: #444;
	left: 0;
	top: 0;
}
.main {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.main::-webkit-scrollbar{
	width: 0;
}

.page {
	width: 100%;
	height: 100%;
	min-height: 504px;
	overflow: hidden;
	position: absolute;
	text-align: center;
	left: 0;
	top: 0;
	/*-webkit-transform: translateY(-100%);
	transform: translateY(-100%);*/
	-webkit-transition: all ease 0.8s;
	transition: all ease 0.8s;
	display: none;
}

/**page**/
#page1 {
	z-index: 100;
	background: url(../images/img_4.png) left top no-repeat;
	background-size: 100% 100%;	
}
#page2 {
	z-index: 95;
	background: url(../images/img_9.png) left top no-repeat;
	background-size: 100% 100%;	
}
#page3 {
	z-index: 90;
	background: url(../images/img_13.png) repeat-y;
	/*background-size: 100% 100%;*/
}
#page4{
	z-index: 85;
	background: url(../images/img_19.png) left top no-repeat;
	background-size: 100% 100%;
}
#page5 {
	z-index: 80;
	background: url(../images/img_22.png) left top no-repeat;
	background-size: 100% 100%;
}
#page6{
	z-index: 75;
	background: url(../images/img_28.png) left top no-repeat;
	background-size: 100% 100%;
}

#page1.goOut, #page2.goOut, #page3.goOut, #page4.goOut, #page5.goOut, #page6.goOut, #page7.goOut{
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
#page1.goin, #page2.goin, #page3.goin, #page4.goin, #page5.goin, #page6.goin, #page6.goin, #page7.goin{
	-webkit-transform: translateY(0);
	transform: translateY(0);
}


/*****通用****/
.box-images{
	position: absolute;
	font-size: 0;
}
.box-images-bg{
	position: relative;
	width: 100%;
	z-index: 1;
}
.box-images-item{
	position: absolute;
	z-index: 10;
}


/***第一页***/
.logo{
	width: 87.8125%;
	position: absolute;
	top: 3%;
	left: 6.09375%;
	z-index: 10;
}
.mainkv {
	position: absolute;
	width: 100%;
	top: 30%;
	left: 0;
	z-index: 2;
}
.kv1{
	width: 70%;
	left: 15%;
	top: 0%;
}
.kv2{
	width: 82.6%;
	left: 8.68%;
	top: auto;
	bottom: 0%;
}

#page1.active .logo{
	-webkit-animation:  bounceInCenter 0.8s ease 1s forwards;
	animation: bounceInCenter 0.8s ease 1s forwards;
}
#page1.active .mainkv{
	-webkit-animation:  fadeInLeft 0.8s ease 1.8s forwards;
	animation: fadeInLeft 0.8s ease 1.8s forwards;
}
#page1.active .kv1{
	-webkit-animation:  bounceInDown 1s ease 2.4s forwards;
	animation: bounceInDown 1s ease 2.4s forwards;
}
#page1.active .kv2{
	-webkit-animation:  bounceInUp 0.8s ease 3s forwards;
	animation: bounceInUp 0.8s ease 3s forwards;
}


/***第二页***/
.page2-1 {
	position: absolute;
	width: 100%;
	top: 7%;
	left: 0;
}
.page2-2 {
	position: absolute;
	width: 100%;
	top: 25%;
	left: 0;
}
.page2-3 {
	position: absolute;
	width: 100%;
	top: 43%;
	left: 0;
}
.page2-4 {
	position: absolute;
	width: 80%;
	top: 65%;
	left: 10%;
}

#page2.active .page2-1 {
	-webkit-animation: bounceInLeft 1s ease 0.8s forwards;
	animation:  bounceInLeft 1s ease 0.8s forwards;
}
#page2.active .page2-2 {
	-webkit-animation: bounceInRight 1s ease 1.4s forwards;
	animation: bounceInRight 1s ease 1.4s forwards;
}
#page2.active .page2-3 {
	-webkit-animation: bounceInLeft 1s ease 2s forwards;
	animation: bounceInLeft 1s ease 2s forwards;
}
#page2.active .page2-4 {
	-webkit-animation: bounceInCenter 1.2s ease 2.8s forwards;
	animation: bounceInCenter 1.2s ease 2.8s forwards;
}


/**page3**/
.page3-1 {
	position: absolute;
	width: 100%;
	top: 12%;
	left: 0;
}
.page3-2 {
	position: absolute;
	width: 100%;
	top: 35%;
	left: 0;
}
.page3-3 {
	position: absolute;
	width: 83.75%;
	top: 60%;
	left: 8.125%;
}

#page3.active .page3-1 {
	-webkit-animation: bounceInLeft 1s ease 0.8s forwards;
	animation:  bounceInLeft 1s ease 0.8s forwards;
}
#page3.active .page3-2 {
	-webkit-animation: bounceInRight 1s ease 1.4s forwards;
	animation: bounceInRight 1s ease 1.4s forwards;
}
#page3.active .page3-3 {
	-webkit-animation: bounceInCenter 1.2s ease 2.4s forwards;
	animation: bounceInCenter 1.2s ease 2.4s forwards;
}


/***page4***/
.screen1{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: url(../images/img_16.png) no-repeat;
	background-size: 100% 100%;
}
.screen1-1{
	width: 100%;
	position: absolute;
	left: 0;
	top: 10%;
}
.screen1-2{
	width: 100%;
	position: absolute;
	left: 0;
	top: 35%;
}
.screen2{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	background: url(../images/img_19.png) no-repeat;
	background-size: 100% 100%;
}
.layer1{
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.screen2-1{
	width: 100%;
	position: absolute;
	left: 0;
	top: 30%;
}
.layer2{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.layer3{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.layer4,.layer5,.layer6,.layer7{
	width: 120%;
	height: 120%;
	position: absolute;
	left: -10%;
	top: -10%;
}

#page4.active .layer1 {
	-webkit-animation: flash 0.8s ease infinite;
	animation:  flash 0.8s ease infinite;
}
/*#page4.active .screen2-1 {
	-webkit-animation: fadeIn 0.8s ease infinite;
	animation:  fadeIn 0.8s ease infinite;
}*/
#page4.active .layer2, #page4.active .layer3{
	-webkit-animation: zoomScaleIn 1.4s linear 0.8s forwards;
	animation: zoomScaleIn 1.4s linear 0.8s forwards;
}
#page4.active .layer4{
	-webkit-animation: zoomScaleIn 1.4s linear 1.2s forwards;
	animation: zoomScaleIn 1.4s linear 1.2s forwards;
}
#page4.active .layer5{
	-webkit-animation: zoomScaleIn 1.4s linear 1.6s forwards;
	animation: zoomScaleIn 1.4s linear 1.6s forwards;
}
#page4.active .layer6{
	-webkit-animation: zoomScaleIn 1.4s linear 2s forwards;
	animation: zoomScaleIn 1.4s linear 2s forwards;
}
/*#page4.active .layer7{
	-webkit-animation: zoomScaleIn 1.6s linear 2.1s forwards;
	animation: zoomScaleIn 1.6s linear 2.1s forwards;
}*/
#page4.active .screen2{
	-webkit-animation: fadeOut 1s ease 2.6s forwards;
	animation: fadeOut 1s ease 2.6s forwards;
}
#page4.active .screen1{
	-webkit-animation: zoomBigIn 1s ease 2.8s forwards;
	animation: zoomBigIn 1s ease 2.8s forwards;
}

/***page5***/
.page5-1 {
	position: absolute;
	width: 100%;
	top: 2%;
	left: 0;
}
.page5-2 {
	position: absolute;
	width: 84.375%;
	top: 17%;
	left: 7.8125%;
}

#page5.active .page5-1 {
	-webkit-animation: bounceInLeft 1s ease 0.8s forwards;
	animation:  bounceInLeft 1s ease 0.8s forwards;
}
#page5.active .page5-2 {
	-webkit-animation: zoomBigIn 0.6s ease 1.6s forwards;
	animation: zoomBigIn 0.6s ease 1.6s forwards;
}




/***page6***/
.page6-1 {
	position: absolute;
	width: 100%;
	top: 2%;
	left: 0;
	z-index: 10;
}
.page6-2 {
	position: absolute;
	width: 75%;
	top: 11%;
	left: 12.5%;
	z-index: 5;
}
.t1{
	width: 74.5%;
	left: 12.73%;
	top: 22%;
}
.t2{
	width: 70.35%;
	left: 14.82%;
	top: 8%;
}
.t3{
	width: 88%;
	left: 6%;
	top: 40%;
}

#page6.active .page6-1 {
	-webkit-animation: fadeInDown 0.8s ease 1s forwards;
	animation:  fadeInDown 0.8s ease 1s forwards;
}
#page6.active .page6-2 {
	-webkit-animation: fadeInUp 0.8s ease 1s forwards;
	animation: fadeInUp 0.8s ease 1s forwards;
}
#page6.active .t2 {
	-webkit-animation: bounceInLeft 1s ease 1.8s forwards;
	animation: bounceInLeft 1s ease 1.8s forwards;
}
#page6.active .t1 {
	-webkit-animation: bounceInRight 1s ease 2.4s forwards;
	animation: bounceInRight 1s ease 2.4s forwards;
}
#page6.active .t3 {
	-webkit-animation: bounceInLeft 1s ease 3s forwards;
	animation: bounceInLeft 1s ease 3s forwards;
}


/**animation**/
@keyframes musicplay1 {
  0% {
    transform: translate3d(0,0,0) rotate(15deg);
    opacity: 0;
  }
  50% {
    transform: translate3d(10px,-20px,0) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(20px,-30px,0) rotate(15deg);
    opacity: 0;
  }
}
@keyframes musicplay2 {
  0% {
    transform: translate3d(0,0,0) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: translate3d(-1px,-20px,0) rotate(-15deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-5px,-30px,0) rotate(-15deg);
    opacity: 0;
  }
}
@keyframes musicplay3 {
  0% {
    transform: translate3d(0,0,0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: translate3d(-20px,-20px,0) rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-30px,-30px,0) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes cloud1 {
  0% {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
  90% {
    transform: translate3d(0,-1300%,0);
    opacity: 1;
  }
  90.001% {
    transform: translate3d(0,-1300%,0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0,0,0);
    opacity: 0;
  }
}
@keyframes cloud2 {
  0% {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
  90% {
    transform: translate3d(0,-400%,0);
    opacity: 1;
  }
  90.001% {
    transform: translate3d(0,-400%,0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0,0,0);
    opacity: 0;
  }
}

/**iphone4***/
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {
}

/**iphone6s***/
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:3) {
}