body,ul,li{margin: 0; padding: 0; touch-action: none;}
div{cursor:pointer;}

/*横屏*/
.screen-tip {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 999999;
	color: #FFF;
	font-size: 0.6rem;
	text-align: center;
	display: none
}

.screen-tip i {
	position: absolute;
	left: 52%;
    top: 54%;
    width: 9rem;
    height: 4rem;
	background: url(../img/screen-tips.png) no-repeat;
	background-size: 2rem;
	margin-top: -3rem;
	margin-left: -1.5rem;
	-webkit-animation: screentip 1s ease-out infinite;
	animation: screentip 1s ease-out infinite;
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right
}

.screen-tip span {
	position: absolute;
	left: 0;
	width: 100%;
	top: 60%
}

@-webkit-keyframes screentip {
	from {
		-webkit-transform: rotate(-12deg);
		transform: rotate(-12deg)
	}
}

@keyframes screentip {
	from {
		-webkit-transform: rotate(-12deg);
		transform: rotate(-12deg)
	}
}

@media all and (orientation:landscape) {
	.screen-tip {
		display: block
	}
}

/*加载动画*/
#load{ position: fixed; z-index: 999; width: 100%; height: 100%; background: #000; padding-left: 7.5rem; padding-top: 12rem;}
@keyframes loader {
	from {transform: rotate(0deg);}
	to {transform: rotate(720deg);}
}
@-webkit-keyframes loader {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(720deg);}
}
.square {
	display:inline-block;
	background: rgba(247, 202, 24,0.6);
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	text-align: center;
	-webkit-transform: rotate(20deg);
	   -moz-transform: rotate(20deg);
	    -ms-transform: rotate(20deg);
	     -o-transform: rotate(20eg);
	-webkit-animation: loader 3s linear infinite;
	animation: loader 3s linear infinite;
}
.square:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background: rgba(247, 202, 24,0.5);
  -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
       -o-transform: rotate(135deg);
}

/*page style*/

/* custom */
/*section[data-id="1"] {
	background-color: #3498db;
}
section[data-id="2"] {
	background-color: #40d47e;
}
section[data-id="3"] {
	background-color: #ff8c81;
}
section[data-id="4"] {
	background-color: #3498db;
}*/

.pages {
	background: url(../img/img_bg.jpg) center repeat-y;
	background-size: 100%;
}



.box1 {
	width: 100px;
	height: 200px;
	background-color: #ecf0f1;
	position: absolute;
	left: 160px; top: 126px;
}
.box2 {
	width: 200px;
	height: 100px;
	background-color: #8e44ad;
	position: absolute;
	left: 60px; top: 226px;
}
.box3 {
	width: 100px;
	height: 100px;
	background-color: #34495e;
	position: absolute;
	left: 160px; top: 226px;
}
.box4 {
	width: 50px;
	height: 50px;
	background-color: #e74c3c;
	position: absolute;
	left: 185px; top: 250px;
}



/******************************************/
.black-line{ position: absolute;  top: 0; left: 0; width: -webkit-fill-available; height: 96%; margin: 0.4rem; border:0.1rem solid #000;}
.action-01{ width: 15rem; }
.img-01{position: absolute;  top: 0; left: 0; width: -webkit-fill-available; height: 96%; margin: 0.4rem; background: url(../img/img_1.png) top center no-repeat; background-size: 14rem;}
.img-01 img:nth-child(1){position: absolute; top: 5.5rem; left: 6.2rem; width: 3.14rem; height: 2.86rem; }
.img-01 img:nth-child(2){position: absolute; top: 4.8rem; right: 1.4rem; width: 6.28rem; height: 8.32rem; }
.img-01 img:nth-child(3){position: absolute; top: 3rem; right: 3rem; width: 3.14rem;  }
.action-02{ position: absolute; left: 0.4rem; top: 0.4rem; width: 14.2rem; margin: 0 auto; }
.action-03 { position: absolute; left: 3.4rem; top: 12rem; width: 8.5rem; display: none;}
.action-04{ position: absolute; left: 0.4rem; top: 0.4rem; width: 14.2rem; margin: 0 auto; }

.txt-00{ position: absolute; top: 17.5rem; right: 0.5rem; width: 7.0rem; }
.txt-01{ position: absolute; top: 17.5rem; right: 0.85rem; width: 7.5rem;  }
.txt-02{ position: absolute; top: 18.5rem; right: 0.85rem; width: 7.5rem; }
.txt-03{ position: absolute; top: 3rem; left: 1.5rem; width: 12.0rem; }
.txt-04{ position: absolute; top: 4.5rem; left: 2.5rem; width: 10.16rem; }
.txt-05{ position: absolute; top: 6rem; left: 5rem; width: 4.22rem; }
.txt-06{ position: absolute; top: 7.5rem; left: 3.4rem; width: 8.88rem; }
.txt-07{ position: absolute; bottom: 2.7rem; left: 2.5rem; width: 10rem; }
.txt-08{ position: absolute; bottom: 3.8rem; left: 4rem; width: 7rem; }
.txt-09{ position: absolute; bottom: 4.9rem; left: 2.5rem; width: 10rem; }
.txt-10{ position: absolute; bottom: 15rem; left: 3.5rem; width: 8.3rem; }
.txt-11{ position: absolute; bottom: 13rem; left: 3.5rem; width: 7.2rem; }
.txt-12{ position: absolute; bottom: 13.5rem; left: 3.5rem; width: 7.16rem; }
.txt-12-1{ position: absolute; bottom: 11rem; left: 2.5rem; width: 10rem; }
.txt-12-2{ position: absolute; top: 10.2rem; left: 2.4rem; width: 10.2rem; }
.txt-12-3{ position: absolute; top: 11.5rem; left: 4.4rem; width: 5.84rem; }
.txt-12-4{ position: absolute; bottom: 10.2rem; left: 4.4rem; width: 6.38rem; }
.txt-13{ position: absolute; top: 8rem; right: 1rem; width: 9.56rem; }
.txt-14{ position: absolute; top: 9.5rem; right: 1rem; width: 7.04rem; }
.txt-15{ position: absolute; bottom: 3rem; left: 0.8rem; width: 6rem; }
.txt-16{ position: absolute; top: 2rem; left: 1.9rem; width: 11.2rem; }
.txt-17{ position: absolute; top: 3.5rem; left: 2.4rem; width: 10.22rem; }
.txt-18{ position: absolute; top: 5rem; left: 1rem; width: 12.84rem; }
.txt-19{ position: absolute; top: 5rem; left: 6rem; width: 1.28rem; }
.txt-20{ position: absolute; top: 2.5rem; left: 3.1rem; width: 8.88rem; }
.txt-21{ position: absolute; top: 4.5rem; left: 1.5rem; width: 11.84rem; }
.txt-22{ position: absolute; top: 1.5rem; left: 3.72rem; width: 7.66rem; }
.txt-23{ position: absolute; top: 3rem; left: 2.4rem; width: 10.18rem; }
.txt-24{ position: absolute; top: 4.5rem; left: 5rem; width: 5.46rem; }
.txt-25{ position: absolute; bottom: 5.2rem; left: 2.4rem; width: 10.18rem; }
.txt-26{ position: absolute; bottom: 3.9rem; left: 2.4rem; width: 10.18rem; }
.txt-27{ position: absolute; bottom: 2.6rem; left: -1rem; width: 10.18rem; }
.txt-28{ position: absolute; bottom: 2.6rem; right: -0.8rem; width: 10.18rem; }

.img-06{ position: absolute; right: 0.5rem; bottom: 0.6rem; width: 13.56rem; height: 14.26rem; }
.img-07{ position: absolute; right: 5.2rem; bottom: 10.05rem; width: 0.9rem; height: 1.56rem; }
.img-08{ position: absolute; top: 0.5rem; left: 0.5rem; width: 14rem; }
.img-09{ position: absolute; top: 2.4rem; left: 5.1rem; width: 3.2rem; }
.img-10{ position: absolute; top: 10.4rem; left: 7rem; width: 1.94rem; }
.img-11{ position: absolute; bottom: 0.5rem; right: 0.5rem; width: 4.24rem; }
.img-12{ position: absolute; top: 1.5rem; left: 1.68rem; width: 11.64rem; }
.img-12-1{ position: absolute; top: 5.22rem; right: 2.55rem; width: 2.14rem; }
.img-13{ position: absolute; bottom: 1.5rem; left: 1.68rem; width: 11.64rem; }
.img-13-1{ position: absolute; bottom: 5.55rem; right: 5.5rem; width: 5.72rem; }
.img-13-2{ position: absolute; bottom: 1.6rem; left: 2.5rem; width: 9.24rem; }
.img-14{ position: absolute; top: 0.5rem; left: 0.5rem; width: 14rem; }
.img-15{ position: absolute; top: 10.8rem; left: 5rem; width: 5.62rem; }
.img-16{ position: absolute; top: 0.5rem; left: 0.5rem; width: 14rem; }
.img-17{ position: absolute; top: 10rem; left: 3rem; width: 6.96rem; }
.img-18{ position: absolute; top: 5rem; left: 3.5rem; width: 7.82rem; }
.img-19{ position: absolute; bottom: 0.8rem; left: 0.6rem; width: 13.82rem; }
.img-20{ position: absolute; top: 0.5rem; left: 0.5rem; width: 14rem; }
.img-21{ position: absolute; top: 0.5rem; left: 0.5rem; width: 14rem; }
.img-22{ position: absolute; top: 12rem; left: 0.5rem; width: 7.0rem; }
.img-23{ position: absolute; top: 11rem; left: 6rem; width: 1.78rem; }
.img-23-p{ position: absolute; top: 12.5rem; left: 6.9rem; width: 1.6rem; }
.img-24{ position: absolute; bottom: 0.5rem; left: 0.5rem; width: 14rem; }
.img-25{ position: absolute; top: 0.5rem; left: 0.5rem; width: 14rem; }
.img-26{ position: absolute; bottom: 0.6rem; left: 1rem; width: 12.94rem; height: 1.8rem; background: url(../img/p14/img_5.png) top center no-repeat; background-size: cover; font-size: 0;}
.img-26 a{ display: inline-block; vertical-align: top; width: 6.47rem; height: 1.8rem; }
.img-27{ position: absolute; top: 1rem; left: 2.6rem; width: 9.58rem; }
.img-28{ position: absolute; top: 1rem; left: 2.25rem; width: 10.5rem; }
.img-29{ position: absolute; top: 11rem; left: 1rem; width: 5.32rem; }
.img-30{ position: absolute; top: 13rem; right: 1rem; width: 3.38rem; }
.img-31{ position: absolute; top: 1.2rem; left: 2.4rem; width: 10.16rem; }

.share{ position: fixed; top: 0; left: 0; z-index: 3; width: 15.0rem; height: 100%; background:url(../img/share_tips.png) top right no-repeat rgba(0,0,0,0.9); background-size: 6.22rem; background-position: 7rem 2rem; display: none;}
.share-tips{ width: 5.0rem; height: 2.2rem; }
/* action */
.flash{-webkit-animation:opa 100ms steps(2) infinite 0.01s; animation: opa 100ms steps(2) infinite 0.01s;}
@-webkit-keyframes opa {
	0% {opacity: 1;}
	50% {opacity: 0.8;}
	100% {opacity: 1;}
}

@-webkit-keyframes delay{
	0% {opacity: 1;}
	50% {opacity: 0.8;}
}


/*背景音乐*/
#music{position: absolute; background:url(../img/play.png) center no-repeat; background-size: 50%; width:45px; height:45px;cursor:pointer; z-index: 2; right: 0.3rem; top: 0.3rem;}
#music.play{background:url(../img/play.png) center no-repeat; background-size: 50%;}
#music.pause{background:url(../img/stop.png) center no-repeat; background-size: 50%;}