*, *:before, *:after { box-sizing: border-box; }

.section{height:100%;}

.u-arrow { animation: 1.5s ease-in-out 0s normal none infinite start; bottom: 3%; left: 50%; position: fixed; width: 10%; margin-left:-5%; z-index: 150; }
.u-arrow { position: fixed; -webkit-animation: start 1.5s infinite ease-in-out; -moz-animation: start 1.5s infinite ease-in-out; animation: start 1.5s infinite ease-in-out; }
.u-arrow img { width: 100%; }
@-webkit-keyframes start { 0%, 30% {
opacity:0;
-webkit-transform:translate(0, 10px);
}
60% {
opacity:1;
-webkit-transform:translate(0, 0);
}
100% {
opacity:0;
-webkit-transform:translate(0, -8px);
}
}
@-moz-keyframes start { 0%, 30% {
opacity:0;
-moz-transform:translate(0, 10px);
}
60% {
opacity:1;
-moz-transform:translate(0, 0);
}
100% {
opacity:0;
-moz-transform:translate(0, -8px);
}
}
@keyframes start { 0%, 30% {
opacity:0;
transform:translate(0, 10px);
}
60% {
opacity:1;
transform:translate(0, 0);
}
100% {
opacity:0;
transform:translate(0, -8px);
}
}
#music { height: 36px; width: 36px;}
#music span { color: #fff; font-family: "iconfont"; font-size: 15px; left: 0; opacity: 0; position: absolute; top: 0; }
#m_main { position: absolute; -webkit-animation: music 2s ease infinite;animation: music 2s ease infinite; }
#m1 { -webkit-animation: kd1 3s ease-out infinite; -webkit-animation-delay: 0s; animation: kd1 3s ease-out infinite; animation-delay: 0s; }
#m2 { -webkit-animation: kd1 3s ease-out infinite; -webkit-animation-delay: 1s; animation: kd1 3s ease-out infinite; animation-delay: 1s; }
#m3 { -webkit-animation: kd1 3s ease-out infinite; -webkit-animation-delay: 2s; animation: kd1 3s ease-out infinite; animation-delay: 2s; }
#m6 { -webkit-animation: kd2 3s ease-out infinite; -webkit-animation-delay: 0.5s; animation: kd2 3s ease-out infinite; animation-delay: 0.5s; }
#m7 { -webkit-animation: kd2 3s ease-out infinite; -webkit-animation-delay: 1.5s; animation: kd2 3s ease-out infinite; animation-delay: 1.5s; }
#m5 { -webkit-animation: kd2 3s ease-out infinite; -webkit-animation-delay: 2.5s; animation: kd2 3s ease-out infinite; animation-delay: 2.5s; }
@-webkit-keyframes music { 0% {
-webkit-transform:rotateZ(45deg);
}
50% {
-webkit-transform:rotateZ(-45deg);
}
100% {
-webkit-transform:rotateZ(45deg);
}
}
@keyframes music { 0% {
transform:rotateZ(45deg);
}
50% {
transform:rotateZ(-45deg);
}
100% {
transform:rotateZ(45deg);
}
}
 @-webkit-keyframes kd1 { 0% {
-webkit-transform:translateY(0) rotateY(0);
opacity:0;
}
20% {
opacity:0.2;
}
40% {
opacity:0.8;
}
60% {
opacity:0.6;
}
80% {
opacity:0.3;
}
100% {
-webkit-transform:translateY(-50px) rotateY(90deg) translateX(-25px);
opacity:0;
}
}
@-webkit-keyframes kd2 { 0% {
-webkit-transform:translateY(0) translateX(0) rotateY(0);
opacity:0;
}
20% {
opacity:0.4;
}
40% {
opacity:0.8;
}
60% {
opacity:0.6;
}
80% {
opacity:0.3;
}
100% {
-webkit-transform:translateY(-60px) translateX(30px) rotateY(60deg);
opacity:0;
}
}