body {
	background: #000;
}

.swiper-slide {
	background: #000;
}

.music {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: .5rem;
    top: .5rem;
    z-index: 100;
}

.music.stopped .control {
	background: 0 0;
}

.music.stopped .control .control-after {
	-webkit-animation: none;
	animation: none;
}

audio:not([controls]) {
    display: none;
}

audio {
    width: 300px;
    height: 32px;
}

.music .control {
    width: 2.5rem;
    height: 2.5rem;
    background: url(../images/music_f.gif) transparent no-repeat center center;
    background-size: contain;
}

.music .control .control-after {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.75rem;
    margin-left: -.75rem;
    background: url(../images/music_off.png) transparent no-repeat center center;
    background-size: 100% 100%;
    -webkit-animation: rotate2d 1.2s linear infinite;
    animation: rotate2d 1.2s linear infinite;
    z-index: -1;
}
/*提出动画*/
.a-oneAni{
    -webkit-animation: zoomOut 1.5s 0.5s 1 both;
    -moz-animation: zoomOut 1.5s 0.5s 1 both;
    animation: zoomOut 1.5s 0.5s 1 both;
}

.a-one {
	width: 100%;
    height: 100%;
    background-size: 100%;
	color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    
}
/*提出动画*/
.a-twoAni{
    -webkit-animation: fadeInUp 3s 1.5s 1 both;
    -moz-animation: fadeInUp 3s 1.5s 1 both;
    animation: fadeInUp 3s 1.5s 1 both;
}

.a-two {
	width: 100%;
    background-size: 100%;
	color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    bottom: 0;
    z-index: 1;
    
}

.a-threeAni{
    -webkit-animation: fadeInDown 2s 0.5s 1 both;
    -moz-animation: fadeInDown 2s 0.5s 1 both;
    animation: fadeInDown 2s 0.5s 1 both;
}

.a-three {
	width: 95%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    left: 0;
    z-index: 3;
    
}

.a-fourAni{
    -webkit-animation: zoomIn 1s 1s 1 both;
    -moz-animation: zoomIn 1s 1s 1 both;
    animation: zoomIn 1s 1s 1 both;
}

.a-four {
	width: 40%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -60% 0 0 -20%;
    z-index: 4;
    
}

.a-fiveAni{
    -webkit-animation: bounceIn 1s 2s 1 both;
    -moz-animation: bounceIn 1s 2s 1 both;
    animation: bounceIn 1s 2s 1 both;
}

.a-five {
	width: 30%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -55% 0 0 -15%;
    z-index: 5;
   	
}

.a-sixAni{
    -webkit-animation: fadeInRight 1s 2.5s 1 both;
    -moz-animation: fadeInRight 1s 2.5s 1 both;
    animation: fadeInRight 1s 2.5s 1 both;
}

.a-six {
	width: 12%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -22% 0 0 -6%;
    z-index: 5;
   	
}

.a-sevenAni{
    -webkit-animation: zoomIn 1s 2.5s 1 both;
    -moz-animation: zoomIn 1s 2.5s 1 both;
    animation: zoomIn 1s 2.5s 1 both;
}

.a-seven {
	width: 4%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -21% 0 0 -12%;
    z-index: 5;
   	
}

.a-eightAni{
    -webkit-animation: slideUp 1s 3s 1 both;
    -moz-animation: slideUp 1s 3s 1 both;
    animation: slideUp 1s 3s 1 both;
}

.a-eight {
    width: 80%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 15% 0 0 -40%;
    z-index: 6;
    
}

.a-nineAni{
    -webkit-animation: zoomIn 1s 3s 1 both;
    -moz-animation: zoomIn 1s 3s 1 both;
    animation: zoomIn 1s 3s 1 both;
}

.a-nine {
	width: 100%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    bottom: 31%;
    z-index: 6;
   	
}

.a-tenAni{
    -webkit-animation: fadeInUp 1s 3.5s 1 both;
    -moz-animation: fadeInUp 1s 3.5s 1 both;
    animation: fadeInUp 1s 3.5s 1 both;
}

.a-ten {
    width: 80%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 28% 0 0 -40%;
    z-index: 6;
    
}

.b-one {
    width: 100%;
    height: 100%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
}

.b-oneAni{
    -webkit-animation: zoomOut 1.5s 0.5s 1 both;
    -moz-animation: zoomOut 1.5s 0.5s 1 both;
    animation: zoomOut 1.5s 0.5s 1 both;
}

.b-two {
    width: 100%;
    height: 90%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 50%;
    margin: 8% 0 0 -50%;
}

.b-twoAni{
    -webkit-animation: zoomOut 1s 1.5s 1 both;
    -moz-animation: zoomOut 1s 1.5s 1 both;
    animation: zoomOut 1s 1.5s 1 both;
}

.b-three {
    width: 16%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 50%;
    margin: 6% 0 0 -8%;
}

.b-threeAni{
    -webkit-animation: zoomIn 1s 1.5s 1 both;
    -moz-animation: zoomIn 1s 1.5s 1 both;
    animation: zoomIn 1s 1.5s 1 both;
}

.b-four {
    width: 100%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    bottom: 5.5%;
    left: 50%;
    margin: 0 0 0 -50%;
}

.b-fourAni{
    -webkit-animation: fadeIn 2s 2s 1 both;
    -moz-animation: fadeIn 2s 2s 1 both;
    animation: fadeIn 2s 2s 1 both;
}

.b-five {
    width: 66%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 50%;
    margin: 40% 0 0 -42%;
}

.b-fiveAni{
    -webkit-animation: zoomIn 1s 2s 1 both;
    -moz-animation: zoomIn 1s 2s 1 both;
    animation: zoomIn 1s 2s 1 both;
}

.b-six {
    width: 80%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 50%;
    margin: 54% 0 0 -40%;
}

.b-sixAni{
    -webkit-animation: zoomOut 1s 2.5s 1 both;
    -moz-animation: zoomOut 1s 2.5s 1 both;
    animation: zoomOut 1s 2.5s 1 both;
}

.c-five {
    width: 80%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 50%;
    margin: 46% 0 0 -40%;
}

.c-fiveAni{
    -webkit-animation: zoomOut 1s 2.5s 1 both;
    -moz-animation: zoomOut 1s 2.5s 1 both;
    animation: zoomOut 1s 2.5s 1 both;
}

.c-six {
    width: 80%;
    background-size: 100%;
    color: black;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    font-size: 1rem;
    opacity: 1;
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 50%;
    margin: 78% 0 0 -40%;
}

.c-sixAni{
    -webkit-animation: zoomOut 1s 2.5s 1 both;
    -moz-animation: zoomOut 1s 2.5s 1 both;
    animation: zoomOut 1s 2.5s 1 both;
}
.top {
    position: absolute;
    width: 1.2rem;
    height: .9rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: .5rem;
    background: url(../images/top.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: webSwipeTipAfter 1.5s infinite ease-in-out;
    animation: webSwipeTipAfter 1.5s infinite ease-in-out;
    z-index: 100;
}