﻿@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;
}


/* 页面背景 */
.page0, .page1, .page2, .page3, .page4, .page5, .page6, .page7, .page8, .page9, .page10, .page11, .page12, .page13 {
	background: url(../images/001.jpg) no-repeat 50%;
	z-index:10!important;
}



.page0, .page1, .page2, .page3, .page4, .page5, .page6, .page7, .page8, .page9, .page10, .page11, .page12, .page13 {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.bgtp {
	background: url(../images/001.jpg) no-repeat 50%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top:0;
	left:0;
	z-index: 0;
	-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;}



/* 自适应框架（设计图宽度） */
body {
	max-width: 8.5rem;
	margin: 0 auto;
}
body * {
	max-width: 8.5rem;
}

.none{display:none}

.op1 {
	-webkit-animation: op 2s linear forwards;
	animation: op 2s linear forwards;
}

@-webkit-keyframes op {
	0% {
		opacity:0
	}

	100% {
		opacity: 1
	}
}

@keyframes op {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes op2 {
	0% {
		opacity: 0.3
	}

	100% {
		opacity: 1
	}
}

@keyframes op2 {
	0% {
		opacity: 0.3
	}

	100% {
		opacity: 1
	}
}

.antops {
	-webkit-animation: antop 1s linear forwards;
	animation: antop 1s linear forwards;
	opacity: 1
}
@-webkit-keyframes antop {
	0% {
		-webkit-transform: translateY(6rem);
		opacity: 1
	}

	100% {
		-webkit-transform: translateY(0rem);
		opacity: 1
	}
}

@keyframes antop {
	0% {
		transform: translateY(6rem);
		opacity: 1
	}

	100% {
		transform: translateY(0rem);
		opacity: 1
	}
}
.anupdowns {
	-webkit-animation: anupdown 0.6s alternate infinite;
	animation: anupdown 0.6s alternate infinite;
	opacity: 1
}

@-webkit-keyframes anupdown {
	0% {
		-webkit-transform: translateY(0.1rem);
		opacity: 1
	}

	100% {
		-webkit-transform: translateY(0rem);
		opacity: 1
	}
}

@keyframes anupdown {
	0% {
		transform: translateY(0.1rem);
		opacity: 1
	}

	100% {
		transform: translateY(0rem);
		opacity: 1
	}
}
.ansfs {
	-webkit-animation: ansf 1s alternate infinite;
	animation: ansf 1s alternate infinite;
}

.star {
	-webkit-animation: ansf2 0.5s alternate infinite;
	animation: ansf2 0.5s alternate infinite;
}
.bgtitles {
	-webkit-animation: ansf2 1s forwards linear;
	animation: ansf2 1s forwards linear;
	opacity:1!important
}
.cx {
	-webkit-animation: cxs 6s linear forwards;
	animation: cxs 6s linear forwards;
}
.cx2 {
	-webkit-animation: op 1s linear forwards;
	animation: op 1s linear forwards;
}
.items {
	-webkit-animation: op2 1s alternate infinite;
	animation: op2 1s alternate infinite;
}
.p0_3_btn {
	-webkit-animation: ansf 0.5s alternate infinite;
	animation: ansf 0.5s alternate infinite;
}

@-webkit-keyframes cxs {
	0% {
		/*-webkit-transform: scale(0);*/
		opacity:0
	}
	40% {
		/*-webkit-transform: scale(1);*/
		opacity: 1
	}
	80% {
		/*-webkit-transform: scale(1);*/
		opacity: 1
	}
	100% {
		/*-webkit-transform: scale(2);*/
		opacity: 0
	}
}
@keyframes cxs {
	0% {
		/*transform: scale(0);*/
		opacity: 0
	}
	40% {
		/*transform: scale(1);*/
		opacity: 1
	}
	80% {
		/*transform: scale(1);*/
		opacity: 1
	}

	100% {
		/*transform: scale(2);*/
		opacity: 0
	}
}

@-webkit-keyframes ansf {
	0% {
		-webkit-transform: scale(0.9)
	}

	100% {
		-webkit-transform: scale(1.1)
	}
}

@keyframes ansf {
	0% {
		transform: scale(0.9)
	}

	100% {
		transform: scale(1.1)
	}
}


@-webkit-keyframes ansf2 {
	0% {
		-webkit-transform: scale(0)
	}

	100% {
		-webkit-transform: scale(1)
	}
}

@keyframes ansf2 {
	0% {
		transform: scale(0)
	}

	100% {
		transform: scale(1)
	}
}

.items, .map, .star {
	/*background:#ff0000;*/
	position: absolute;
	z-index: 30
}

.f12{font-size:0.6em;}
.f14 {
    font-size: 0.65em;
}
.f16{font-size:0.7em;}
.f18{font-size:0.85em;}
.f20{font-size:0.9em;}
.f22{font-size:0.95em;}
.f24{font-size:1em;}
.f26{font-size:1.05em;}
.f30{font-size:1.15em;}
.f34{font-size:1.35em;}
.f36{font-size:1.45em;}
.f40{font-size:1.6em;}
.lh120{line-height:120%}
.lh140{line-height:140%}
.lh160{line-height: 160%}
.lh180{line-height:180%}
@media screen and (max-width: 640px) {
    .f12{font-size:0.6em;}
    .f14{font-size: 0.65em;}
    .f16{font-size:0.7em;}
    .f18{font-size:0.85em;}
    .f20{font-size:0.9em;}
    .f22{font-size:0.95em;}
    .f24{font-size:1em;}
    .f26{font-size:1.05em;}
    .f30{font-size:1.15em;}
    .f34{font-size:1.35em;}
    .f36{font-size:1.45em;}
    .f40{font-size:1.6em;}
}

@media screen and (max-width: 414px) {
    .f12{font-size:0.4em;}
    .f14{font-size: 0.45em;}
    .f16{font-size:0.5em;}
    .f18{font-size:0.65em;}
    .f20{font-size:0.7em;}
    .f22{font-size:0.75em;}
    .f24{font-size:0.8em;}
    .f26{font-size:0.85em;}
    .f30{font-size:0.95em;}
    .f34{font-size:1.15em;}
    .f36{font-size:1.25em;}
    .f40{font-size:1.6em;}
}

@media screen and (max-width: 400px) {
    .f12{font-size:0.4em;}
    .f14{font-size: 0.45em;}
    .f16{font-size:0.5em;}
    .f18{font-size:0.65em;}
    .f20{font-size:0.7em;}
    .f22{font-size:0.75em;}
    .f24{font-size:0.8em;}
    .f26{font-size:0.85em;}
    .f30{font-size:0.95em;}
    .f34{font-size:1.15em;}
    .f36{font-size:1.25em;}
    .f40{font-size:1.6em;}
}

@media screen and (max-width: 392px) {
    .f12{font-size:0.35em;}
    .f14{font-size: 0.4em;}
    .f16{font-size:0.45em;}
    .f18{font-size:0.6em;}
    .f20{font-size:0.65em;}
    .f22{font-size:0.7em;}
    .f24{font-size:0.75em;}
    .f26{font-size:0.8em;}
    .f30{font-size:0.9em;}
    .f34{font-size:1.1em;}
    .f36{font-size:1.2em;}
    .f40{font-size:1.5em;}
}

@media screen and (max-width: 385px) {
    .f12{font-size:0.35em;}
    .f14{font-size: 0.4em;}
    .f16{font-size:0.45em;}
    .f18{font-size:0.6em;}
    .f20{font-size:0.65em;}
    .f22{font-size:0.7em;}
    .f24{font-size:0.75em;}
    .f26{font-size:0.8em;}
    .f30{font-size:0.9em;}
    .f34{font-size:1.1em;}
    .f36{font-size:1.2em;}
    .f40{font-size:1.5em;}
}
@media screen and (max-width: 375px) {
    .f12{font-size:0.35em;}
    .f14{font-size: 0.4em;}
    .f16{font-size:0.45em;}
    .f18{font-size:0.6em;}
    .f20{font-size:0.65em;}
    .f22{font-size:0.7em;}
    .f24{font-size:0.75em;}
    .f26{font-size:0.8em;}
    .f30{font-size:0.9em;}
    .f34{font-size:1.1em;}
    .f36{font-size:1.2em;}
    .f40{font-size:1.5em;}
}
@media screen and (max-width: 359px) {
    .f12{font-size:0.3em;}
    .f14{font-size: 0.35em;}
    .f16{font-size:0.4em;}
    .f18{font-size:0.5em;}
    .f20{font-size:0.55em;}
    .f22{font-size:0.6em;}
    .f24{font-size:0.65em;}
    .f26{font-size:0.7em;}
    .f30{font-size:0.8em;}
    .f34{font-size:1em;}
    .f36{font-size:1.1em;}
    .f40{font-size:1.3em;}
}
.star_num{font-weight:bold;border-bottom:1px solid #67EBFF;padding:0 0.2rem 0.05rem}
.tcenter{text-align:center}

.t1{color:#67EBFF}
.t2{color:#ECBD0F}

@keyframes rotate {
	  0% {
	    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
	  }
	  100% {
	    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
	  }
	}
.stars {
	transform: perspective(500px);
	transform-style: preserve-3d;
	position: absolute;
	bottom: 0;
	perspective-origin: 50% 100%;
	left: 50%;
	animation: rotate 90s infinite linear;
	z-index: 10;
	/*width:100%;
	  height:100%*/
}

	.starss {
	  width: 2px;
	  height: 2px;
	  border-radius:50%;
	  background: #F7F7B6;
	  position: absolute;
	  top: 0;
	  left: 0;
	  transform-origin: 0 0 -300px;
	  transform: translate3d(0, 0, -300px);
	  backface-visibility: hidden;
	  z-index:1
	}
