@charset "utf-8";


.music, .point, .point .avatar {
	position: absolute
}
.music, .page1 .circle, .point, .point .dot {
	cursor: pointer
}

@-webkit-keyframes rotating {
0% {
-webkit-transform:rotate(0);
transform:rotate(0)
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes rotating {
0% {
-webkit-transform:rotate(0);
transform:rotate(0)
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes inRotating {
0% {
-webkit-transform:rotate(0);
transform:rotate(0)
}
100% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes inRotating {
0% {
-webkit-transform:rotate(0);
transform:rotate(0)
}
100% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@-webkit-keyframes breathing {
0% {
-webkit-transform:scale(.85);
transform:scale(.85);
opacity:.38
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:.78
}
}
@keyframes breathing {
0% {
-webkit-transform:scale(.85);
transform:scale(.85);
opacity:.38
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:.78
}
}
@-webkit-keyframes fadeIn {
from {
opacity:0
}
to {
	opacity: 1
}
}
@keyframes fadeIn {
from {
opacity:0
}
to {
	opacity: 1
}
}
@-webkit-keyframes fadeOut {
from {
opacity:1
}
to {
	opacity: 0
}
}
@keyframes fadeOut {
from {
opacity:1
}
to {
	opacity: 0
}
}
@-webkit-keyframes fadeInTop {
from {
opacity:0;
-webkit-transform:translate(0, .2rem);
transform:translate(0, .2rem)
}
to {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}
@keyframes fadeInTop {
from {
opacity:0;
-webkit-transform:translate(0, .2rem);
transform:translate(0, .2rem)
}
to {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}
@-webkit-keyframes pageTitle {
0% {
opacity:0;
-webkit-transform:translate(0, .2rem);
transform:translate(0, .2rem)
}
60%, 80% {
opacity:1;
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
100% {
opacity:0
}
}
@keyframes pageTitle {
0% {
opacity:0;
-webkit-transform:translate(0, .2rem);
transform:translate(0, .2rem)
}
60%, 80% {
opacity:1;
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
100% {
opacity:0
}
}
@-webkit-keyframes circleLine {
0% {
-webkit-transform:scale(.5);
transform:scale(.5);
opacity:0
}
40% {
opacity:1
}
100% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
opacity:0
}
}
@keyframes circleLine {
0% {
-webkit-transform:scale(.5);
transform:scale(.5);
opacity:0
}
40% {
opacity:1
}
100% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
opacity:0
}
}
@-webkit-keyframes touchTip {
20% {
opacity:0
}
25% {
opacity:1
}
50%, 95% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
100% {
opacity:0;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes touchTip {
20% {
opacity:0
}
25% {
opacity:1
}
50%, 95% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
100% {
opacity:0;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@-webkit-keyframes touchEffect {
49% {
opacity:0
}
50% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
100% {
opacity:0;
-webkit-transform:scale(3);
transform:scale(3)
}
}
@keyframes touchEffect {
49% {
opacity:0
}
50% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
100% {
opacity:0;
-webkit-transform:scale(3);
transform:scale(3)
}
}
@-webkit-keyframes auraIn {
0% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(90deg) scale(.1, .1);
transform:translate3d(0, 0, 0) rotateZ(90deg) scale(.1, .1);
opacity:0
}
5% {
opacity:1
}
100% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(-90deg) scale(1, 1);
transform:translate3d(0, 0, 0) rotateZ(-90deg) scale(1, 1);
opacity:1
}
}
@keyframes auraIn {
0% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(90deg) scale(.1, .1);
transform:translate3d(0, 0, 0) rotateZ(90deg) scale(.1, .1);
opacity:0
}
5% {
opacity:1
}
100% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(-90deg) scale(1, 1);
transform:translate3d(0, 0, 0) rotateZ(-90deg) scale(1, 1);
opacity:1
}
}
@-webkit-keyframes auraOut {
0% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(0) scale(1, 1);
transform:translate3d(0, 0, 0) rotateZ(0) scale(1, 1);
opacity:0
}
5% {
opacity:.6
}
100% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(20deg) scale(2.2, 2.2);
transform:translate3d(0, 0, 0) rotateZ(20deg) scale(2.2, 2.2);
opacity:0
}
}
@keyframes auraOut {
0% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(0) scale(1, 1);
transform:translate3d(0, 0, 0) rotateZ(0) scale(1, 1);
opacity:0
}
5% {
opacity:.6
}
100% {
-webkit-transform:translate3d(0, 0, 0) rotateZ(20deg) scale(2.2, 2.2);
transform:translate3d(0, 0, 0) rotateZ(20deg) scale(2.2, 2.2);
opacity:0
}
}
@-webkit-keyframes lineIn {
0% {
width:0;
opacity:.5
}
100% {
width:100%;
opacity:1
}
}
@keyframes lineIn {
0% {
width:0;
opacity:.5
}
100% {
width:100%;
opacity:1
}
}
@-webkit-keyframes mxLineIn {
0%, 100% {
right:100%;
width:0
}
25% {
right:0;
width:100%
}
75% {
right:-100%;
width:100%
}
}
@keyframes mxLineIn {
0%, 100% {
right:100%;
width:0
}
25% {
right:0;
width:100%
}
75% {
right:-100%;
width:100%
}
}
@-webkit-keyframes p4LineIn {
0%, 100% {
width:0;
opacity:0
}
20%, 80% {
width:100%;
opacity:1
}
}
@keyframes p4LineIn {
0%, 100% {
width:0;
opacity:0
}
20%, 80% {
width:100%;
opacity:1
}
}
@-webkit-keyframes slipLine {
0% {
left:0;
right:auto;
width:0
}
50% {
left:0;
right:auto;
width:100%
}
100% {
left:auto;
right:0;
width:100%
}
}
@keyframes slipLine {
0% {
left:0;
right:auto;
width:0
}
50% {
left:0;
right:auto;
width:100%
}
100% {
left:auto;
right:0;
width:100%
}
}
caption, table, td, th {
	vertical-align: middle
}
ol, ul {
	list-style: none
}
table {
	border-collapse: separate;
	border-spacing: 0
}
caption, td, th {
	text-align: left;
	font-weight: 400
}
a img {
	border: none
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
	font-family:"微软雅黑", "新宋体";
}
audio, canvas, video {
	display: inline-block;
*display:inline;
*zoom:1
}
[hidden], audio:not([controls]) {
display:none
}
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0)
}
html {
	font-size: 100px;
	background-color: #131313
}
body, html {
	width: 100%;
}
body {
	-webkit-text-size-adjust: 100%!important;

	background-size: cover;
	
	-webkit-user-select: none
}
.music {
	top: 15px;
	right: 15px;
	width: 24px;
	height: 24px;
	background: url(../image/sound_muted@2x.a2c62b046b.png) center center no-repeat;
	background-size: 24px 24px;
	z-index: 98
}
.music.playing {
	background: url(../image/sound@2x.257e2b046b.png) center center no-repeat;
	background-size: 24px 24px;
	-webkit-animation: rotating 2s linear infinite both;
	animation: rotating 2s linear infinite both
}
.point {
	top:300px;
	left:240px;
-webkit-transform:translate3d(-.1rem, .3rem, 0);
transform:translate3d(-.1rem, .3rem, 0);
width:20px;
height:20px;
	z-index: 998
}
.point .avatar, .point .avatar img {
width:72px;
height:72px;
border-radius:72px
}
.point.animation {
	-webkit-transition: all .4s cubic-bezier(.68, -.55, .265, 1.55);
	transition: all .4s cubic-bezier(.68, -.55, .265, 1.55)
}
.point .avatar {
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0) scale(.3, .3);
	transform: translate3d(-50%, -50%, 0) scale(.3, .3);
	opacity: 0;
	-webkit-transition: all .6s linear;
	transition: all .6s linear;
	z-index: 19;
	background-color: #131313
}
.point .avatar img {
	display: block;
	background-clip: padding-box;
	box-shadow: 0 0 5px #00ff01
}
.point.loading {
-webkit-transform:translate3d(-.1rem, -.1rem, 0);
transform:translate3d(-.1rem, -.1rem, 0)
}
.point.loading .avatar {
	-webkit-transform: translate3d(-50%, -50%, 0) scale(1, 1);
	transform: translate3d(-50%, -50%, 0) scale(1, 1);
	-webkit-transition: none;
	transition: none;
	opacity: 1
}
.page1 .circle, .point .after_wrap {
	-webkit-transform: translate3d(-50%, -50%, 0)
}
.point .dot {
width:20px;
height:20px;
	background-color: #3bb3c2;
border-radius:20px;
	color: rgba(0,0,0,0);
	font-size: 1px;
	position: relative;
	z-index: 9
}
.point .after_wrap {
	position: absolute;
	top: 50%;
	right: 50%;
	bottom: 50%;
	left: 50%;
width:40px;
height:40px;
	transform: translate3d(-50%, -50%, 0)
}
.point .after_wrap .after {
	position: relative;
	box-sizing: border-box;
	display: block;
	color: rgba(0,0,0,0);
width:40px;
height:40px;
border-radius:40px;
	background-color: rgba(59,179,194,.6);
	box-shadow: 0 0 3px #3bb3c2;
	z-index: 6;
	-webkit-animation: breathing 1.8s ease-in-out infinite alternate;
	animation: breathing 1.8s ease-in-out infinite alternate;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.open_statement, .statement {
	display: none;
	position: absolute
}
.point .touch_tip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 20px;
	margin-left: -5px;
	background: url(../image/hand@2x.34a42b046b.png) center center no-repeat;
	background-size: 14px 20px;
	opacity: 0;
	-webkit-transform: translateY(15px);
	transform: translateY(15px);
	color: rgba(0,0,0,0);
	z-index: 19
}
.point .touch_effect {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border: 1px solid #0a7c8a;
	border-radius: 8px;
	box-sizing: border-box;
	opacity: 0;
	color: rgba(0,0,0,0);
	z-index: 18
}
.point.page1 .touch_tip {
	-webkit-animation: touchTip 3s ease-out 1s infinite;
	animation: touchTip 3s ease-out 1s infinite
}
.point.page1 .touch_effect {
	-webkit-animation: touchEffect 3s ease-out 1s infinite;
	animation: touchEffect 3s ease-out 1s infinite
}
.point.page2 .touch_tip {
	-webkit-animation: touchTip 3s ease-out 3s infinite;
	animation: touchTip 3s ease-out 3s infinite
}
.point.page2 .touch_effect {
	-webkit-animation: touchEffect 3s ease-out 3s infinite;
	animation: touchEffect 3s ease-out 3s infinite
}
.point.page3 .touch_tip {
	-webkit-animation: touchTip 3s ease-out 3s infinite;
	animation: touchTip 3s ease-out 3s infinite
}
.point.page3 .touch_effect {
	-webkit-animation: touchEffect 3s ease-out 3s infinite;
	animation: touchEffect 3s ease-out 3s infinite
}
.point.page4 .touch_tip {
	-webkit-animation: touchTip 3s ease-out 3s infinite;
	animation: touchTip 3s ease-out 3s infinite
}
.point.page4 .touch_effect {
	-webkit-animation: touchEffect 3s ease-out 3s infinite;
	animation: touchEffect 3s ease-out 3s infinite
}
.point.page5 .touch_tip {
	-webkit-animation: touchTip 3s ease-out 3s infinite;
	animation: touchTip 3s ease-out 3s infinite
}
.point.page5 .touch_effect {
	-webkit-animation: touchEffect 3s ease-out 3s infinite;
	animation: touchEffect 3s ease-out 3s infinite
}
.open_statement {
bottom:.2rem;
	left: 50%;
font-size:.12rem;
	color: #777;
	border-bottom: 1px solid #777;
	text-align: center;
	text-decoration: none;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
	z-index: 999
}
.statement {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
padding:.4rem .3rem 0;
	line-height: 1.8;
	color: #afaeae;
	z-index: 9999;
	background: url(../image/bg@2x.46122b046b.jpg) center center no-repeat #131313;
	background-size: cover;
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

.statement h2 {
font-size:.2rem;
	text-align: center;
	line-height: 1.4;
margin-bottom:.38rem;
	color: #00FF01
}
.statement strong {
	font-weight: 700;
font-size:.18rem
}
.statement p {
font-size:.15rem;
margin-bottom:.15rem
}
.statement .toolbar {
	position: absolute;
	right: 0;
bottom:.24rem;
	left: 0;
	text-align: center;
	line-height: 1
}
.statement .toolbar a {
	display: inline-block;
	color: #717070;
font-size:.12rem;
padding-top:.3rem;
	text-decoration: none;
	text-align: center
}
.statement .toolbar a.close_statement {
	background: url(../image/close@2x.4a0d2b046b.png) center top no-repeat;
background-size:.24rem .24rem
}
.statement .toolbar a.return {
	background: url(../image/source@2x.bdad2b046b.png) center top no-repeat;
background-size:.24rem .24rem
}
@media (max-height:520px) {
.statement .toolbar {
	position: relative
}
}

.preloader, .wrapper, .wrapper .page {
	width: 100%;
	height: 100%
}
.preloader {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	background: url(../image/bg@2x.46122b046b.jpg) center center no-repeat #131313;
	background-size: cover
}

.preloader .percent {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	text-align: center;
	color: #00FF01;
font-size:.14rem;
line-height:.15rem;
margin-top:.65rem
}
.page h2, .preloader .story {
	margin: 0;
	text-align: center
}
.preloader .story {
	position: absolute;
top:.48rem;
	right: 0;
	left: 0;
font-size:.3rem;
line-height:.3rem;
	color: #AFAEAE
}
.preloader.loaded {
	-webkit-animation: fadeOut .3s linear;
	animation: fadeOut .3s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.wrapper {
	position: absolute;
	top: 0;
	left: 0
}
.wrapper .page {
	position: relative;
	z-index: 96
}
.page h2 {
font-size:.22rem;
	color: #afaeae
}
.page h2.page_title {
	position: absolute;
	right: 0;
	bottom: 50%;
	left: 0;
	text-align: center;
margin-bottom:-.05rem;
	opacity: 0
}
.page .dot {
	opacity: 0;
	width: 10px;
	height: 10px;
	border-radius: 10px
}
.page .dot .inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #3bb3c2;
	z-index: 9
}
.page .dot .ray {
	z-index: 8
}
.page .ray {
	position: absolute;
	top: 300px;
	left:240px;
	height: 1px;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0
}
.page .ray i {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	display: block;
	background-color: #666
}
.page .section {
	opacity: 0;
	color: #afaeae;
font-size:.14rem;
	line-height: 1.3
}
.page .section h3 {
font-size:.14rem;
	margin: 0;
	color: #3aeb3b
}
.page .section .data {
	color: #fff;
font-size:.25rem;
	line-height: 1;
	font-weight: 700
}
.page .section .data.city {
margin-top:.02rem;
font-size:.2rem;
	display: inline-block
}
.page1 h2.page_title {
	position: absolute;
top:.48rem;
	right: 0;
	bottom: auto;
	left: 0;
font-size:.16rem;
line-height:.16rem;
	margin-top: 0;
-webkit-transform:translate3d(.01rem, 0, 0);
transform:translate3d(.01rem, 0, 0)
}
.page1 h2.page_title:before {
	content: ' ';
	margin-left: -1.28rem;
	border-top: 2px solid #AFAEAE;
	border-left: 2px solid #AFAEAE;
width:.1rem;
height:.1rem;
	position: absolute;
top:-.08rem;
	left: 50%
}
.page1 h2.page_title:after {
	content: ' ';
	margin-left: 1.11rem;
	border-bottom: 2px solid #AFAEAE;
	border-right: 2px solid #AFAEAE;
width:.1rem;
height:.1rem;
	position: absolute;
bottom:-.08rem;
	left: 50%
}
.page1 h2.page_title .year {
font-size:.18rem;
	vertical-align: middle
}
.page1 .action_tips {
	position: absolute;
	right: 0;
bottom:.2rem;
	left: 0;
	text-align: center;
	color: #777;
font-size:.12rem;
	line-height: 1;
	opacity: 0
}
.page2 .dot1 .line i, .page2 .dot2 .line i, .page2 .dot3 .line i, .page2 .dot5 .line i, .page2 .dot6 .line i, .page2 .dot7 .line i, .page2 .ol i{
	display: block;
	color: rgba(0,0,0,0);
	font-size: 1px;
	box-sizing: border-box
}
.page1 .circle {
	position: absolute;
	top: 50%;
	left: 50%;
margin-top:.4rem;
	transform: translate3d(-50%, -50%, 0);
width:.2rem;
height:.2rem;
	z-index: 999
}
.page1 .circle .line {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	opacity: 0
}
.page1 .circle .line i {
	width: 100%;
	height: 100%;
	border: 1px solid #4F4C48;
	border-radius: 100%
}
.page1 .circle .line1, .page1 .circle .line1 i {
width:.6rem;
height:.6rem
}
.page1 .circle .line1 i {
border-radius:.6rem;
	border-style: dashed
}
.page1 .circle .line2, .page1 .circle .line2 i {
	width: 1.05rem;
	height: 1.05rem
}
.page1 .circle .line2 i {
	border-radius: 1.05rem
}
.page1 .circle .line3, .page1 .circle .line3 i {
	width: 1.2rem;
	height: 1.2rem
}
.page1 .circle .line3 i {
	border-radius: 1.2rem;
	border-style: dashed;
	border-width: 2px
}
.page1 .circle .line4, .page1 .circle .line4 i {
	width: 1.33rem;
	height: 1.33rem
}
.page1 .circle .line4 i {
	border-radius: 1.33rem
}
.page1 .circle .line5, .page1 .circle .line5 i {
	width: 1.48rem;
	height: 1.48rem
}
.page1 .circle .line5 i {
	border-radius: 1.48rem;
	border-width: 2px;
	opacity: .6
}
.page1 .circle .line6, .page1 .circle .line6 i {
	width: 1.6rem;
	height: 1.6rem
}
.page1 .circle .line6 i {
	border-radius: 1.6rem
}
.page1 .circle .line7, .page1 .circle .line7 i {
	width: 1.65rem;
	height: 1.65rem
}
.page1 .circle .line7 i {
	border-radius: 1.65rem;
	border-style: dashed
}
.page1 .circle .line8, .page1 .circle .line8 i {
	width: 1.77rem;
	height: 1.77rem
}
.page1 .circle .line8 i {
	border-radius: 1.77rem
}
.page1 .circle .line9, .page1 .circle .line9 i {
	width: 2.06rem;
	height: 2.06rem
}
.page1 .circle .line9 i {
	border-radius: 2.06rem;
	border-width: 2px;
	opacity: .6
}
.page1 .circle .line10, .page1 .circle .line10 i {
	width: 2.17rem;
	height: 2.17rem
}
.page1 .circle .line10 i {
	border-radius: 2.17rem;
	opacity: .6
}
.page1 .circle .line11, .page1 .circle .line11 i {
	width: 2.55rem;
	height: 2.55rem
}
.page1 .circle .line11 i {
	border-radius: 2.55rem;
	border-style: dotted
}
.page1 .circle .line12, .page1 .circle .line12 i {
	width: 3.03rem;
	height: 3.03rem
}
.page1 .circle .line12 i {
	border-radius: 3.03rem;
	border-style: dotted;
	border-width: 2px
}
.page1 .circle .line13, .page1 .circle .line13 i {
	width: 3.19rem;
	height: 3.19rem
}
.page1 .circle .line13 i {
	border-radius: 3.19rem;
	opacity: .6
}
.page1 .circle .line14, .page1 .circle .line14 i {
	width: 3.5rem;
	height: 3.5rem
}
.page1 .circle .line14 i {
	border-radius: 3.5rem;
	border-width: 2px;
	opacity: .6
}
.page1 .circle .line15, .page1 .circle .line15 i {
	width: 4.22rem;
	height: 4.22rem
}
.page1 .circle .line15 i {
	border-radius: 4.22rem;
	border-style: dashed;
	opacity: .6
}
.page1.play h2.page_title {
	-webkit-animation: fadeInTop 1.6s ease-in both;
	animation: fadeInTop 1.6s ease-in both
}
.page1.play .action_tips {
	-webkit-animation: fadeIn 1.4s ease-in .5s both;
	animation: fadeIn 1.4s ease-in .5s both
}
.page1.play .line {
	opacity: 1
}
.page1.play .line1 i {
	-webkit-animation: auraIn 1.6s cubic-bezier(.215, .61, .355, 1) 2.3s both;
	animation: auraIn 1.6s cubic-bezier(.215, .61, .355, 1) 2.3s both
}
.page1.play .line2 i {
	-webkit-animation: auraIn 1.7s cubic-bezier(.215, .61, .355, 1) 2.2s both;
	animation: auraIn 1.7s cubic-bezier(.215, .61, .355, 1) 2.2s both
}
.page1.play .line3 i {
	-webkit-animation: auraIn 1.8s cubic-bezier(.215, .61, .355, 1) 2.1s both;
	animation: auraIn 1.8s cubic-bezier(.215, .61, .355, 1) 2.1s both
}
.page1.play .line4 i {
	-webkit-animation: auraIn 1.9s cubic-bezier(.215, .61, .355, 1) 2s both;
	animation: auraIn 1.9s cubic-bezier(.215, .61, .355, 1) 2s both
}
.page1.play .line5 i {
	-webkit-animation: auraIn 2s cubic-bezier(.215, .61, .355, 1) 1.9s both;
	animation: auraIn 2s cubic-bezier(.215, .61, .355, 1) 1.9s both
}
.page1.play .line6 i {
	-webkit-animation: auraIn 2.1s cubic-bezier(.215, .61, .355, 1) 1.8s both;
	animation: auraIn 2.1s cubic-bezier(.215, .61, .355, 1) 1.8s both
}
.page1.play .line7 i {
	-webkit-animation: auraIn 2.2s cubic-bezier(.215, .61, .355, 1) 1.7s both;
	animation: auraIn 2.2s cubic-bezier(.215, .61, .355, 1) 1.7s both
}
.page1.play .line8 i {
	-webkit-animation: auraIn 2.3s cubic-bezier(.215, .61, .355, 1) 1.6s both;
	animation: auraIn 2.3s cubic-bezier(.215, .61, .355, 1) 1.6s both
}
.page1.play .line9 i {
	-webkit-animation: auraIn 2.4s cubic-bezier(.215, .61, .355, 1) 1.5s both;
	animation: auraIn 2.4s cubic-bezier(.215, .61, .355, 1) 1.5s both
}
.page1.play .line10 i {
	-webkit-animation: auraIn 2.5s cubic-bezier(.215, .61, .355, 1) 1.4s both;
	animation: auraIn 2.5s cubic-bezier(.215, .61, .355, 1) 1.4s both
}
.page1.play .line11 i {
	-webkit-animation: auraIn 2.6s cubic-bezier(.215, .61, .355, 1) 1.2s both;
	animation: auraIn 2.6s cubic-bezier(.215, .61, .355, 1) 1.2s both
}
.page1.play .line12 i {
	-webkit-animation: auraIn 2.7s cubic-bezier(.215, .61, .355, 1) 1s both;
	animation: auraIn 2.7s cubic-bezier(.215, .61, .355, 1) 1s both
}
.page1.play .line13 i {
	-webkit-animation: auraIn 2.8s cubic-bezier(.215, .61, .355, 1) .8s both;
	animation: auraIn 2.8s cubic-bezier(.215, .61, .355, 1) .8s both
}
.page1.play .line14 i {
	-webkit-animation: auraIn 2.9s cubic-bezier(.215, .61, .355, 1) .6s both;
	animation: auraIn 2.9s cubic-bezier(.215, .61, .355, 1) .6s both
}
.page1.play .line15 i {
	-webkit-animation: auraIn 3s cubic-bezier(.215, .61, .355, 1) .4s both;
	animation: auraIn 3s cubic-bezier(.215, .61, .355, 1) .4s both
}
.page1.play .line1 .lr {
	-webkit-animation: inRotating 9s linear 3.7s infinite both;
	animation: inRotating 9s linear 3.7s infinite both
}
.page1.play .line3 .lr {
	-webkit-animation: rotating 15s linear 3.7s infinite both;
	animation: rotating 15s linear 3.7s infinite both
}
.page1.play .line7 .lr {
	-webkit-animation: inRotating 22s linear 3.7s infinite both;
	animation: inRotating 22s linear 3.7s infinite both
}
.page1.play .line11 .lr {
	-webkit-animation: rotating 28s linear 3.8s infinite both;
	animation: rotating 28s linear 3.8s infinite both
}
.page1.play .line12 .lr {
	-webkit-animation: inRotating 19s linear 3.2s infinite both;
	animation: inRotating 19s linear 3.2s infinite both
}
.page1.play .line15 .lr {
	-webkit-animation: rotating 30s linear 3.2s infinite both;
	animation: rotating 30s linear 3.2s infinite both
}
.page2.point {
-webkit-transform:translate3d(-1.06rem, .64rem, 0);
transform:translate3d(-1.06rem, .64rem, 0);
-ms-transform:translate3d(-1.06rem, .64rem, 0);
-moz-transform:translate3d(-1.06rem, .64rem, 0);
-0-transform:translate3d(-1.06rem, .64rem, 0);
-webkit-animation: fadeIn .6s linear .4s both;
  animation: fadeIn .6s linear .4s both;

}



.page2 .ray.ray1 {
width: 300px;
-webkit-transform: translate3d(68px, -10px, 0) rotateZ(28.1deg);
transform:translate3d(68px, -10px, 0) rotateZ(28.1deg);
-ms-transform: translate3d(68px, -10px, 0) rotateZ(28.1deg);
-o-transform: translate3d(68px, -10px, 0) rotateZ(28.1deg);
-moz-transform: translate3d(68px, -10px, 0) rotateZ(28.1deg);
}

.page2 .ray.ray1 i {
	right: 0;
	left: auto
}
.page2 .ray.ray2 {
	width:190px;
-webkit-transform:translate3d(-100px, 78px, 0) rotateZ(-27.5deg);
transform:translate3d(-100px, 78px,, 0) rotateZ(-27.5deg);
-ms-transform:translate3d(-100px, 78px, 0) rotateZ(-27.5deg);
-moz-transform:translate3d(-100px, 78px, 0) rotateZ(-27.5deg);
-o-transform:translate3d(-100px, 78px, 0) rotateZ(-27.5deg);

}
.page2 .ray.ray3 {
  width: 375px;
  -webkit-transform: translate3d(-96px, 75px, 0) rotateZ(-9.6deg);
  transform: translate3d(-96px, 75px, 0) rotateZ(-9.6deg);
    -ms-transform: translate3d(-96px, 75px, 0) rotateZ(-9.6deg);
    -moz-transform: translate3d(-96px, 75px, 0) rotateZ(-9.6deg);
    -o-transform: translate3d(-96px, 75px, 0) rotateZ(-9.6deg);
}

.page2 .ray.ray4 {
  width: 300px;
  -webkit-transform: translate3d(330px, 130px, 0) rotateZ(-16.6deg);
  transform: translate3d(330px, 130px, 0) rotateZ(-16.6deg);
  -o-transform: translate3d(330px, 130px, 0) rotateZ(-16.6deg);
  -ms-transform: translate3d(330px, 130px, 0) rotateZ(-16.6deg);
  -moz-transform: translate3d(330px, 130px, 0) rotateZ(-16.6deg);
}

.page2 .ray.ray5 {
  width: 260px;
  -webkit-transform: translate3d(615px, 45px, 0) rotateZ(19.4deg);
  transform: translate3d(615px, 45px, 0) rotateZ(19.4deg);
  -moz-transform: translate3d(615px, 45px, 0) rotateZ(19.4deg);
  -ms-transform: translate3d(615px, 45px, 0) rotateZ(19.4deg);
  -0-transform: translate3d(615px, 45px, 0) rotateZ(19.4deg);
}
.page2 .ray.ray6 {
  width: 465px;
  -webkit-transform:translate3d(270px, 13px, 0) rotateZ(19.4deg);
  transform: translate3d(270px, 13px, 0) rotateZ(19.4deg);
}

.page2 .ray.ray7 {
  width: 200px;
  -webkit-transform: translate3d(708px, 167px, 0) rotateZ(-18.6deg);
  transform: translate3d(708px, 167px, 0) rotateZ(-18.6deg);
}


.page2 .ol {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	opacity: 0
}
.page2 .ol i {
	width: 100%;
	height: 100%;
	border: 2px solid #4F4C48;
	border-radius: 100%
}
.page2 .ol.ol1 {
	width: 5rem;
	height: 5rem;
	-webkit-transform: translate3d(-3.73rem, -5.12rem, 0);
	transform: translate3d(-3.73rem, -5.12rem, 0)
}
.page2 .ol.ol1 i {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem;
	border-style: dotted
}
.page2 .ol.ol2 {
	width: 4.25rem;
	height: 4.25rem;
	-webkit-transform: translate3d(-3.2rem, -5.56rem, 0);
	transform: translate3d(-3.2rem, -5.56rem, 0)
}

.page2 .dot1 .line, .page2 .dot2 .line {
	-webkit-transform: translate3d(-50%, -50%, 0);
	position: absolute
}
.page2 .ol.ol2 i {
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 4.25rem;
	border-style: dashed
}

.page2 .ol.ol1.ol_b {
	-webkit-transform: translate3d(.4rem, 1.2rem, 0);
	transform: translate3d(.4rem, 1.2rem, 0)
}

.page2 .ol.ol2.ol_b {
	-webkit-transform: translate3d(1rem, 2rem, 0);
	transform: translate3d(1rem, 2rem, 0)
}


.page2 .dot1 {
  position: absolute;
  top: 340px;
  left: 850px;
  width: 10px;
  height: 10px;
  
  
  color: rgba(0,0,0,0);
}
.page2 .dot1 .line {
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0)
}
.page2 .dot1 .line i {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 100%
}
.page2 .dot1 .line1, .page2 .dot1 .line1 i {
width:.21rem;
height:.21rem
}
.page2 .dot1 .line1 i {
border-radius:.21rem;
	border-width: 1px
}
.page2 .dot1 .line2, .page2 .dot1 .line2 i {
width:.4rem;
height:.4rem
}
.page2 .dot1 .line2 i {
border-radius:.4rem;
	border-style: dotted;
	border-width: 2px
}
.page2 .dot1 .line3, .page2 .dot1 .line3 i {
width:.48rem;
height:.48rem
}
.page2 .dot1 .line3 i {
border-radius:.48rem
}
.page2 .dot1 .line4, .page2 .dot1 .line4 i {
	width: 1.8rem;
	height: 1.8rem
}
.page2 .dot1 .line4 i {
	border-radius: 1.8rem;
	border-width: 2px
}
.page2 .dot2 {
position: absolute;
top: 293px;
left: 143px;
margin-top: -7px;
margin-left: 160px;
color: rgba(0,0,0,0);
}
.page2 .dot2 .line {
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	-webkit-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-0-transform: translate3d(-50%, -50%, 0);
}
.page2 .dot2 .line i {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 100%
}
.page2 .dot2 .line1, .page2 .dot2 .line1 i {
width:.24rem;
height:.24rem
}
.page2 .dot2 .line1 i {
border-radius:.24rem;
	border-width: 1px
}
.page2 .dot2 .line2, .page2 .dot2 .line2 i {
width:35px;
height:35px
}
.page2 .dot2 .line2 i {
border-radius:35px;
border-width: 2px;

border-style: dotted;
border-color: #fff;

}
.page2 .dot2 .line3, .page2 .dot2 .line3 i {
	width:50px;
	height:50px
}
.page2 .dot2 .line3 i {
	border-radius: 1.78rem
}


.page2 .dot2 .line4, .page2 .dot2 .line4 i {
	width: 2.04rem;
	height: 2.04rem
}
.page2 .dot2 .line4 i {
	border-radius: 2.04rem;
	border-width: 2px
}
.page2 .dot2 .line5, .page2 .dot2 .line5 i {
	width: 2.45rem;
	height: 2.45rem
}
.page2 .dot2 .line5 i {
	border-radius: 2.45rem;
	border-style: dashed
}
.page2 .dot2 .line6, .page2 .dot2 .line6 i {
	width: 3.44rem;
	height: 3.44rem
}
.page2 .dot2 .line6 i {
	border-radius: 3.44rem
}

.page2 > a{ position:relative;}

.page2 .menu {
  position: absolute;
  left: 33px;
  display: none;
  top: -203px;
}

.page2 .menu li {
background: url(../image/home_buttom.png) no-repeat;
width: 127px;
height: 32px;
padding: 1px 0;
text-align: center;
line-height: 32px;
cursor: pointer;
font-size: 13px;
color: #fff;

}
.page2 .menu .top {
background: url(../image/home_buttom03.png) no-repeat;
width: 137px;
height: 40px;
margin-left: -10px;
line-height: 40px;
}

.page2 .menu .bottom {
background: url(../image/home_buttom05.png) no-repeat;
width: 137px;
height: 40px;
}

.page2 .text{  width:100px;
  position: absolute;
left: -45px;
  top: -50px;  
  color: #eee;
  font-size:15px;
  font-family:"微软雅黑", "新宋体";
-webkit-animation: fadeIn .6s linear 1.6s both;
  animation: fadeIn .6s linear 1.6s both;
  text-align:center; 
    height: 50px;
 
  }
.page2 .dot3 .text{ top: 50px;}
.page2 .dot6 .text{ top: 50px;}

.page2 .dot3 {
position: absolute;
top: 426px;
left: 566px;
width: 10px;
height: 10px;
color: rgba(0,0,0,0);
}

.page2 .dot3 .line {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0)
}
.page2 .dot3 .line i {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 100%
}
.page2 .dot3 .line1, .page2 .dot3 .line1 i {
width:.22rem;
height:.22rem
}
.page2 .dot3 .line1 i {
border-radius:.22rem;
	border-width: 1px
}
.page2 .dot3 .line2, .page2 .dot3 .line2 i {
width:.34rem;
height:.34rem
}
.page2 .dot3 .line2 i {
border-radius:.34rem;
	border-width: 2px;
	border-style: dotted
}
.page2 .dot3 .line3, .page2 .dot3 .line3 i {
	width:50px;
	height: 50px
}
.page2 .dot3 .line3 i {
	border-radius:50px;
	border-width:1px
}
.page2 .dot3 .line4, .page2 .dot3 .line4 i {
	width: 3.22rem;
	height: 3.22rem
}
.page2 .dot3 .line4 i {
	border-radius: 3.22rem;
	border-style: dashed
}



.dot.dot5 {
  position: absolute;
  top: 308px;
  left: 509px;
  color: rgba(0,0,0,0);
}
.page2 .dot5 .line {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0)
}
.page2 .dot5 .line i {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 100%
}
.page2 .dot5 .line1, .page2 .dot5 .line1 i {
width:.22rem;
height:.22rem
}
.page2 .dot5 .line1 i {
border-radius:.22rem;
	border-width: 1px
}
.page2 .dot5 .line2, .page2 .dot5 .line2 i {
width:34px;
height:34px
}
.page2 .dot5 .line2 i {
border-radius:34px;
	border-width: 2px;
	border-style: dotted
}
.page2 .dot5 .line3, .page2 .dot5 .line3 i {
	width:50px;
	height: 50px
}
.page2 .dot5 .line3 i {
	border-radius:50px;
	border-width:1px
}
.page2 .dot5 .line4, .page2 .dot5 .line4 i {
	width: 3.22rem;
	height: 3.22rem
}
.page2 .dot5 .line4 i {
	border-radius: 3.22rem;
	border-style: dashed
}
.page2.play .dot5 {
  -webkit-animation: fadeIn .6s linear 2.8s both;
  animation: fadeIn .6s linear 2.8s both;
}


.page2.play .dot5 .line1 i {
  -webkit-animation: auraIn .8s ease-out 3.6s both;
  animation: auraIn .8s ease-out 3.6s both;
}
.page2.play .dot5 .line2 .lr {
  -webkit-animation: rotating 9s linear 4.4s infinite both;
  animation: rotating 9s linear 4.4s infinite both;
}
.page2.play .dot5 .line2 i {
  -webkit-animation: auraIn 1s ease-out 3.4s both;
  animation: auraIn 1s ease-out 3.4s both;
}
.page2.play .dot5 .line3 i {
  -webkit-animation: auraIn 1.2s ease-out 3.2s both;
  animation: auraIn 1.2s ease-out 3.2s both;
}




.dot.dot6 {
  position: absolute;
  top: 460px;
  left: 943px;
  color: rgba(0,0,0,0);
}
.page2 .dot6 .line {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0)
}
.page2 .dot6 .line i {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 100%
}
.page2 .dot6 .line1, .page2 .dot6 .line1 i {
width:.22rem;
height:.22rem
}
.page2 .dot6 .line1 i {
border-radius:.22rem;
	border-width: 1px
}
.page2 .dot6 .line2, .page2 .dot6 .line2 i {
width:.34rem;
height:.34rem
}
.page2 .dot6 .line2 i {
border-radius:.34rem;
	border-width: 2px;
	border-style: dotted
}
.page2 .dot6 .line3, .page2 .dot6 .line3 i {
	width:50px;
	height: 50px
}
.page2 .dot6 .line3 i {
	border-radius:50px;
	border-width:1px
}
.page2 .dot6 .line4, .page2 .dot6 .line4 i {
	width: 3.22rem;
	height: 3.22rem
}
.page2 .dot6 .line4 i {
	border-radius: 3.22rem;
	border-style: dashed
}
.page2.play .dot6 {
  -webkit-animation: fadeIn .6s linear 3.8s both;
  animation: fadeIn .6s linear 3.8s both;
}


.page2.play .dot6 .line1 i {
  -webkit-animation: auraIn .8s ease-out 3.6s both;
  animation: auraIn .8s ease-out 3.6s both;
}
.page2.play .dot6 .line2 .lr {
  -webkit-animation: rotating 9s linear 4.4s infinite both;
  animation: rotating 9s linear 4.4s infinite both;
}
.page2.play .dot6 .line2 i {
  -webkit-animation: auraIn 1s ease-out 3.4s both;
  animation: auraIn 1s ease-out 3.4s both;
}
.page2.play .dot6 .line3 i {
  -webkit-animation: auraIn 1.2s ease-out 3.2s both;
  animation: auraIn 1.2s ease-out 3.2s both;
}


.point .text {
  position: absolute;
  top: 50%;
  left: 50%;
width: 100px;
  left: -45px;
  top: 50px;  
  color:#eee;
  z-index: 19;
  font-size:15px;
}




.page a:hover .text{ color:#3bb3c2}

.point:hover .text{color:#3bb3c2}






.page3 .triangle, .page3 .triangle i {
	width: 3.48rem;
	height: 3.47rem;
	position: absolute
}
.page2.play h2.page_title {
	-webkit-animation: pageTitle 2.2s linear both;
	animation: pageTitle 2.2s linear both
}
.page2.play .ol {
	opacity: 1
}
.page2.play .ol1 i {
	-webkit-animation: auraIn 1.4s ease-out 4s both;
	animation: auraIn 1.4s ease-out 4s both
}
.page2.play .ol2 i {
	-webkit-animation: auraIn 1.8s ease-out 3.8s both;
	animation: auraIn 1.8s ease-out 3.8s both
}
.page2.play .ol1 .lr {
	-webkit-animation: rotating 20s linear 4.6s infinite both;
	animation: rotating 20s linear 4.6s infinite both
}
.page2.play .ol2 .lr {
	-webkit-animation: inRotating 18s linear 4.6s infinite both;
	animation: inRotating 18s linear 4.6s infinite both
}
.page2.play .section1 {
	-webkit-animation: fadeIn .6s linear 4.8s both;
	animation: fadeIn .6s linear 4.8s both
}
.page2.play .dot1 {
	-webkit-animation: fadeIn .6s linear 3s both;
	animation: fadeIn .6s linear 3s both
}
.page2.play .dot1 .line1 i {
	-webkit-animation: auraIn .8s ease-out 3.8s both;
	animation: auraIn .8s ease-out 3.8s both
}
.page2.play .dot1 .line2 i {
	-webkit-animation: auraIn 1s ease-out 3.6s both;
	animation: auraIn 1s ease-out 3.6s both
}
.page2.play .dot1 .line3 i {
	-webkit-animation: auraIn 1.2s ease-out 3.3s both;
	animation: auraIn 1.2s ease-out 3.3s both
}
.page2.play .dot1 .line4 i {
	-webkit-animation: auraIn 1.4s ease-out 4.2s both;
	animation: auraIn 1.4s ease-out 4.2s both
}
.page2.play .dot1 .line2 .lr {
	-webkit-animation: inRotating 9s linear 3.6s infinite both;
	animation: inRotating 9s linear 3.6s infinite both
}
.page2.play .ray1 i {
	-webkit-animation: lineIn .4s ease-in 1s forwards;
	animation: lineIn .4s ease-in 1s forwards;
	background:#fff
}
.page2.play .dot2 {
	-webkit-animation: fadeIn .6s linear .6s both;
	animation: fadeIn .6s linear .6s both;
	-moz-animation: fadeIn .6s linear .6s both;
	-o-animation: fadeIn .6s linear .6s both;
	-ms-animation: fadeIn .6s linear .6s both;
}
.page2.play .dot2 .line1 i {
	-webkit-animation: auraIn .8s ease-out 1.8s both;
	animation: auraIn .8s ease-out 1.8s both;
	-moz-animation: auraIn .8s ease-out 1.8s both;
	-ms-animation: auraIn .8s ease-out 1.8s both;
	-o-animation: auraIn .8s ease-out 1.8s both;
	
}
.page2.play .dot2 .line2 i {
	-webkit-animation: auraIn 1s ease-out 1.6s both;
	animation: auraIn 1s ease-out 1.6s both;
	-moz-animation: auraIn 1s ease-out 1.6s both;
	-ms-animation: auraIn 1s ease-out 1.6s both;
	-o-animation: auraIn 1s ease-out 1.6s both;
}
.page2.play .dot2 .line3 i {
	-webkit-animation: auraIn 1.2s ease-out 1.4s both;
	animation: auraIn 1.2s ease-out 1.4s both;
	-moz-animation: auraIn 1.2s ease-out 1.4s both;
	-ms-animation: auraIn 1.2s ease-out 1.4s both;
	-o-animation: auraIn 1.2s ease-out 1.4s both;
}
.page2.play .dot2 .line4 i {
	-webkit-animation: auraIn 1.4s ease-out 1.2s both;
	animation: auraIn 1.4s ease-out 1.2s both
}
.page2.play .dot2 .line5 i {
	-webkit-animation: auraIn 1.6s ease-out 1s both;
	animation: auraIn 1.6s ease-out 1s both;
	-moz-animation: auraIn 1.6s ease-out 1s both;
	-ms-animation: auraIn 1.6s ease-out 1s both;
	-o-animation: auraIn 1.6s ease-out 1s both;
}
.page2.play .dot2 .line6 i {
	-webkit-animation: auraIn 1.7s ease-out 3.8s both;
	animation: auraIn 1.7s ease-out 3.8s both;
	-moz-animation: auraIn 1.7s ease-out 3.8s both;
	-ms-animation: auraIn 1.7s ease-out 3.8s both;
	-o-animation: auraIn 1.7s ease-out 3.8s both;
}
.page2.play .dot2 .line2 .lr {
	-webkit-animation: rotating 9s linear 2.5s infinite both;
	animation: rotating 9s linear 2.5s infinite both;
	-moz-animation: rotating 9s linear 2.5s infinite both;
	-ms-animation: rotating 9s linear 2.5s infinite both;
	-o-animation: rotating 9s linear 2.5s infinite both;
}

.page2.play .dot2 .line5 .lr {
	-webkit-animation: inRotating 16s linear 5s infinite both;
	animation: inRotating 16s linear 5s infinite both
}
.page2.play .ray2 i {
	-webkit-animation: lineIn .6s ease-in .5s forwards;
	animation: lineIn .6s ease-in .5s forwards;
	background: #fff;
}
.page2.play .dot3 {
	-webkit-animation: fadeIn .6s linear 1.4s both;
	animation: fadeIn .6s linear 1.4s both
}
.page2.play .dot3 .line1 i {
	-webkit-animation: auraIn .8s ease-out 2s both;
	animation: auraIn .8s ease-out 2s both
}
.page2.play .dot3 .line2 i {
	-webkit-animation: auraIn 1s ease-out 1s both;
	animation: auraIn 1s ease-out 1s both
}
.page2.play .dot3 .line3 i {
	-webkit-animation: auraIn 1.2s ease-out 1.6s both;
	animation: auraIn 1.2s ease-out 1.6s both
}
.page2.play .dot3 .line4 i {
	-webkit-animation: auraIn 1.4s ease-out 3s both;
	animation: auraIn 1.4s ease-out 3s both
}
.page2.play .dot3 .line2 .lr {
	-webkit-animation: rotating 9s linear 2.6s infinite both;
	animation: rotating 9s linear 2.6s infinite both
}
.page2.play .dot3 .line4 .lr {
	-webkit-animation: inRotating 18s linear 4.4s infinite both;
	animation: inRotating 18s linear 4.4s infinite both
}
.page2.play .ray3 i {
	-webkit-animation: lineIn .8s ease-in 1.7s forwards;
	animation: lineIn .8s ease-in 1.7s forwards
}

.page2.play .ray4 i {
	-webkit-animation: lineIn .8s ease-in 1.8s forwards;
	animation: lineIn .8s ease-in 1.8s forwards;
	  background: #fff;

}

.page2.play .ray5 i {
  -webkit-animation: lineIn .6s ease-in 4s forwards;
  animation: lineIn .6s ease-in 4s forwards;
  background: #fff;
}


.page2.play .ray6 i {
  -webkit-animation: lineIn 1s ease-in 3s forwards;
  animation: lineIn 1s ease-in 3s forwards;
}

.page2.play .ray7 i {
  -webkit-animation: lineIn .6s ease-in 4.2s forwards;
  animation: lineIn .6s ease-in 4.2s forwards;
}


.page_error .error_msg {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	border: 1px solid #00FF01;
	width: 70%;
font-size:.16rem;
	color: #00FF01;
	border-radius: 3px;
	text-align: center;
padding:.1rem;
	box-shadow: 0 0 3px rgba(1,255,0,.8)
}
#landscape_hinter {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #131313;
	z-index: 999;
	display: none
}
#landscape_hinter .hinter_phone {
	width: 114px;
	height: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -57px;
	background: url(../image/landscape_phone@2x.cc5a2b046b.png) center center no-repeat;
	background-size: 114px 60px;
	-webkit-animation: rotateHint 2.6s ease-in infinite;
	animation: rotateHint 2.6s ease-in infinite
}
#landscape_hinter .hinter_rotate {
	width: 155px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -15px 0 0 -77px;
	background: url(../image/landscape_hint@2x.7f8d2b046b.png) center center no-repeat;
	background-size: 155px 30px
}
#landscape_hinter .hinter_text {
	position: absolute;
	right: 0;
	bottom: 15%;
	left: 0;
	color: #bbb;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	line-height: 1
}
@-webkit-keyframes rotateHint {
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
opacity:.2
}
50% {
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
opacity:1
}
100% {
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
opacity:0
}
}
@keyframes rotateHint {
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
opacity:.2
}
50% {
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
opacity:1
}
100% {
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
opacity:0
}
}
@media screen and (orientation:landscape) {
#landscape_hinter {
	display: block
}
}
@media (max-width:320px) {
html {
	font-size: 85.33px
}
}
@media (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) {
html {
	font-size: 100px
}
}
@media (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) {
html {
	font-size: 110.4px
}
}


.anli .nav:first-child{ z-index:9999;}


@media screen and (max-width: 1500px){

.w120{ width:auto !important;}

}

@media screen and (max-width: 1351px){

.w120{ font-size:12px !important; line-height:1.3 !important; width:auto !important;}
.xiala a{ font-size:12px;}
 

}