/*resetStyle*/
html,body,div,p,ul,li,img,video{display: block; margin: 0; padding: 0;}
ul{list-style: none;}
img{border: none;}
*{font-family: "微软雅黑";}
.dsn{display: none;}

#arrow{left: 45%; position: absolute; -webkit-animation: arrow 1s infinite both; z-index: 10;}

#playButton{left: 41%; position: absolute;}

video{position: absolute; top: 0; z-index: 100;}

body{background: #000;}
#music{position: absolute; z-index: 151;}
.music{-webkit-animation: music 5s linear infinite both;}

#loading{background: #fff; height: 100%; position: absolute; top: 0; width: 100%; z-index: 10;}
#loading img{padding: 40% 0 0 42%;}

.s{position: absolute;}

#adama{margin-top: -9999px;}

#slogan5,#arrow5{z-index: 2;}
#photoLayer1,#photoLayer2,#photoLayer3,#photoLayer4{background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; z-index: 20;}

#logo{-webkit-animation-delay: .5s;}

#text1_1{-webkit-animation-delay: .5s;}
#text1_2{-webkit-animation-delay: 1s;}
#text1_3{-webkit-animation-delay: 1.5s;}

#circle2_1{-webkit-animation-delay: .5s;}
#circle2_2{-webkit-animation-delay: .8s;}
#circle2_3{-webkit-animation-delay: 1.1s;}
#line2{-webkit-animation-delay: 1s;}
#text2_1{-webkit-animation-delay: 1.4s;}
#text2_2{-webkit-animation-delay: 1.7s;}
#shape2_1{-webkit-animation-delay: 2s;}
#shape2_2{-webkit-animation-delay: 2.1s;}
#shape2_3{-webkit-animation-delay: 2.2s;}
#shape2_4{-webkit-animation-delay: 2.3s;}
#note2{-webkit-animation-delay: 2.5s;}

.circle1{-webkit-animation: circle1 5s linear infinite both;}
.circle2{-webkit-animation: circle2 5s linear infinite both;}
#circle3_1{-webkit-animation-delay: .5s;}
#circle3_2{-webkit-animation-delay: .5s;}
#circle3_3{-webkit-animation-delay: .5s;}
#line3{-webkit-animation-delay: 1s;}
#shape3_1{-webkit-animation-delay: 1.3s;}
#shape3_2{-webkit-animation-delay: 1.5s;}
#shape3_3{-webkit-animation-delay: 1.7s;}
#shape3_4{-webkit-animation-delay: 1.9s;}
#shape3_5{-webkit-animation-delay: 2.1s;}
#shape3_6{-webkit-animation-delay: 2.3s;}
#shape3_7{-webkit-animation-delay: 2.5s;}
#hand3{-webkit-animation: text 1s linear 2.6s infinite both;}

#box4{-webkit-animation-delay: .3s;}
#text4{-webkit-animation-delay: .6s;}
#line4{-webkit-animation-delay: .9s;}
#shape4_1{-webkit-animation-delay: 1.1s;}
#shape4_2{-webkit-animation-delay: 1.3s;}
#shape4_3{-webkit-animation-delay: 1.5s;}
#shape4_4{-webkit-animation-delay: 1.7s;}
#hand4{-webkit-animation: text 1s linear 1.8s infinite both;}

#shape5_1{-webkit-animation-delay: .3s;}
#shape5_2{-webkit-animation-delay: .6s;}
#shape5_3{-webkit-animation-delay: .9s;}
#shape5_4{-webkit-animation-delay: 1.2s;}
#hand5{-webkit-animation: text 1s linear 1.3s infinite both;}

#shape6_1{-webkit-animation-delay: .3s;}
#shape6_2{-webkit-animation-delay: .4s;}
#shape6_3{-webkit-animation-delay: .5s;}
#text6_1{-webkit-animation-delay: .8s;}
#city6_1{-webkit-animation-delay: 1.1s;}
#city6_2{-webkit-animation-delay: 1.3s;}
#city6_3{-webkit-animation-delay: 1.5s;}
#city6_4{-webkit-animation-delay: 1.7s;}
#city6_5{-webkit-animation-delay: 1.9s;}
#text6_2{-webkit-animation-delay: 2.1s;}
#note6{-webkit-animation-delay: 2.3s;}
#hand6{-webkit-animation: text 1s linear 2.4s infinite both;}

#code7{-webkit-animation-delay: .3s;}
#title7{-webkit-animation-delay: .6s;}
#line7_1{-webkit-animation-delay: .8s;}
#line7_2{-webkit-animation-delay: 1s;}
#line7_3{-webkit-animation-delay: 1.2s;}
#line7_4{-webkit-animation-delay: 1.4s;}
#line7_5{-webkit-animation-delay: 1.6s;}
#line7_6{-webkit-animation-delay: 1.8s;}
#button7{-webkit-animation-delay: 2.1s;}

@-webkit-keyframes arrow {
	0% {opacity: .3; -webkit-transform: translate(0, 0);}
	100% {opacity: .7; -webkit-transform: translate(0, 15px);}
}

@-webkit-keyframes music {
	0% {-webkit-transform: rotate(0);}
	100% {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes circle1 {
	0% {-webkit-transform: rotate(0);}
	100% {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes circle2 {
	0% {-webkit-transform: rotate(360deg);}
	100% {-webkit-transform: rotate(0);}
}

@-webkit-keyframes text {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes text {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes arrow5 {
	0% {opacity: .3; -webkit-transform: translate(0, 0);}
	100% {opacity: 1; -webkit-transform: translate(15px, 0);}
}

@media (min-width:320px) and (max-width:359px) {
	*{font-size: 12px;}
}

@media (min-width:360px) and (max-width:399px) {
	*{font-size: 13px;}
}

@media (min-width:400px) and (max-width:500px) {
	*{font-size: 14px;}
}