* {
	outline: none;
	font-family: "microsoft yahei";
	-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%;
	min-height: 554px;
	background-color: #fff;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	position: relative;
}

.clearfix {
	*zoom: 1
}

.clearfix:before,
.clearfix:after {
	content: ' ';
	display: table
}

.clearfix:after {
	clear: both;
}

h1,
h2,
h3,
h4,
h5,
p {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

img {
	border: none;
	pointer-events: none;
	object-fit: contain;
}

img.cantouch {
	pointer-events: all;
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}
img{
	pointer-events: none;
}
img.cantouch{
	pointer-events: visible;
}
.hideimg {
	opacity: 0;
}
.box-images {
	position: absolute;
	z-index: 1;
}

.box-images-bg {
	width: 100%;
	position: relative;
	z-index: 1;
}

.box-images-item {
	position: absolute;
	z-index: 5;
}
.table{
	width: 100%;
	height: 100%;
	display: table;
}
.table-cell{
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}
.mask{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	background: rgba(0,0,0,0.8);
	display: none;
}
.abslute-img{
	position: absolute;
	z-index: 5;
}
.main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.page {
	width: 100%;
	height: 100%;
	min-height: 554px;
	position: absolute;
	text-align: center;
	left: 0;
	top: 0;
	background: #fff;
	overflow: hidden;
	-webkit-transition: all ease 0.6s;
	transition: all ease 0.6s;
	display: none;
}
.page::-webkit-scrollbar{
	width: 0;
}

/***arrow and loading***/
/***音乐控制按钮****/
.music{
	width: 30px;
	height: 30px;
	position: absolute;
	z-index: 99999;
	right: 3%;
	top: 5%;
	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{
	-webkit-animation: musicplay1 2s linear 0s infinite;
	animation: musicplay1 2s linear 0s infinite;
}
.music-play .music2{
	-webkit-animation: musicplay2 2s linear 0.7s infinite;
	animation: musicplay2 2s linear 0.7s infinite;
}
.music-play .music3{
	-webkit-animation: musicplay3 2s linear 1.4s infinite;
	animation: musicplay3 2s linear 1.4s infinite;
}

/****音乐按钮动画******/

@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;
	}
}


.arrow {
	width: 8%;
	position: absolute;
	bottom: 1.5%;
	left: 46%;
	opacity: 1;
	z-index: 99;
}
.arrow {
	animation: upAndDown 1s ease-out infinite;
	-webkit-animation: upAndDown 1s ease-out infinite;
}

/***loading***/
#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999999999;
	text-align: center;
	background: #000000;
}

#loading .load-icon{
	width: 18%;
	position: absolute;
	z-index: 5;
	left: 41%;
	top: 40%;
	-webkit-animation: rolling 3s linear infinite ;
	animation: rolling 3s linear infinite ;
}
/**音乐按钮旋转***/
@-webkit-keyframes rolling {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
  }
}

@keyframes rolling {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

/**page**/
#page1 {
	z-index: 200;
	/*-webkit-transform: translateY(100%);
	transform: translateY(100%);*/
}
#page2 {
	z-index: 180;
}
#page3 {
	z-index: 160;
}
#page4 {
	z-index: 140;
}
#page5 {
	z-index: 120;
}
#page6 {
	z-index: 100;
}
#page7 {
	z-index: 80;
}
#page8 {
	z-index: 60;
}
#page9 {
	z-index: 40;
}
#page10 {
	z-index: 20;
}
#main .goOut{
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
#main .goIn{
	-webkit-transform: translateY(0);
	transform: translateY(0);
}