body, html { height: 100%; max-width: 640px; margin: 0 auto;}
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; position: relative;  }
.swiper-wrapper { height: 100%; }
.swiper-container { height: 100%; color: #fff; text-align: center; }
.swiper-slide { height: 100%; text-align: center; position: relative; background-position: center; background-repeat: no-repeat; background-size: 100%; }
.swiper-slide section { height: 100%; position: relative; }
.swiper-slide section img { width: 100%; display: none; top: 50%; position: absolute; left: 0; }
@media(max-height:461px){
	.swiper-slide section img{ width:80%; left:10%;}
	.swiper-slide section img[alt="bot"]{ top:48%}
	.swiper-slide section img[alt="top"]{ top:52%}
	.swiper-slide .logo{ display:none;}
	.swiper-slide:first-child .logo,.swiper-slide:last-child .logo{ display:block;}
}
@media(min-height:480px){
	.swiper-slide{background-size:cover}
}
.anim-delay { -webkit-animation-delay: 1s; }
.anim-delay-2 { -webkit-animation-delay: 1.5s; }
.anim-delay-3 { -webkit-animation-delay: 2s; }
.anim-delay-4 { -webkit-animation-delay: 2.5s; }
.anim-delay-5 { -webkit-animation-delay: 3s; }
.anim-delay-6 { -webkit-animation-delay: 3.5s; }
.anim-delay-7 { -webkit-animation-delay: 4s; }
#audio_btn { position: absolute; right: 10px; top: 10px; z-index: 200; width: 50px; height: 50px; background-repeat: no-repeat; }
.loading_background { background-image: url(../images/music_loading.gif); background-size: 30px 30px; opacity: 0.5; background-position: center center; }
.loading_yinfu { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-image: url(../images/yinfu.png); background-repeat: no-repeat; background-position: center center; }
.play_yinfu { background-image: url(../images/music.gif); background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; }
.rotate { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-size: 100% 100%; background-image: url(../images/music_off.png); -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; }
 @-webkit-keyframes rotating { from {
 -webkit-transform: rotate(0deg);
}
to { -webkit-transform: rotate(360deg); }
}
 @keyframes rotating { from {
 transform: rotate(0deg);
}
to { transform: rotate(360deg); }
}
 @-moz-keyframes rotating { from {
 -moz-transform: rotate(0deg);
}
to { -moz-transform: rotate(360deg); }
}
.off { background-image: url(../images/music_off.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; }
 @-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);
}
}
.arrow { position: fixed; bottom: 5px; left: 50%; margin-left: -8px; -webkit-animation: myfirst .6s infinite; z-index:1}
@-webkit-keyframes myfirst {  from {
-webkit-transform:translateY(0px);
}
to { -webkit-transform: translateY(2px); }
}
.arrow img { width: 10px; }
.logo{ width: 100%; top: 10px; left: 0; position: absolute;}