*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}

.loading{position:absolute;width:100vw;height:100vh;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;z-index: 9999999;}
.loading_img{position: absolute;left:32vmin;top:39vmin;width: 22vmin;}
.load_wave{
    position:absolute;top:89vmin;left:33vmin;width: 35.26vmin;height:5px;text-align: center;color: #a25c2d;font-size: 26px;font-weight: bold;
}
.load_val{
    position:absolute;top:0vmin;left:0;width: 0;height:5px;background-color: #a25c2d;
}


.music-box{
	width: 15vmin;
    z-index: 999999;
    position: fixed;
}
.music-btn{
	width: 6vmin;
    padding: 3vmin;
    animation: music1 2s linear infinite;
    -webkit-animation: music1 2s linear infinite;
}
/*头像*/
.swiper-container{
    width: 100%;
    height: 100%;
}
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /*z-index: 1;*/
}


.choose1,.choose2,.choose3,.choose4,.choose5,.choose6{
	display: none;
}
.choose1,.choose2,.choose3,.choose4,.choose5,.choose6{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.start_bg{
	width: 100%;
    height: 100%;
}
.cloud_left{
	position: absolute;
    top: 16%;
    left: 35%;
    width: 85%;
    height: 32%;
    animation: l-to-r-1 3s linear infinite alternate;
    -webkit-animation: l-to-r-1 3s linear infinite alternate;  
}
.cloud_right{
	position: absolute;
    top: 72%;
    left: 0%;
    width: 65%;
    height: 20%;
    animation: r-to-l-1 3s linear infinite alternate;
    -webkit-animation: r-to-l-1 3s linear infinite alternate;  
}
.follow{
	position: absolute;
    top: 20%;
    width: 55%;
    left: 19%;
}
.head{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    animation: hand-bling 2s linear;
    -webkit-animation: hand-bling 2s linear;  
    
}
.title{
	position: absolute;
    width: 86%;
    top: 69%;
    left: 7%;
    display: none;
    animation: bot-top 2s linear;
    -webkit-animation: bot-top 2s linear;  
    
}
.arrow{
	position: absolute;
    top: 86%;
    left: 40%;
    width: 17%;
    height: 5%;
    display: none;
    animation: arrow-scroll 1.5s linear infinite;
    -webkit-animation: arrow-scroll 1.5s linear infinite;  
    
}
.left_cloud{
	position: absolute;
    width: 13%;
    height: 4%;
    top: 46%;
    left: 5%;
    animation: l-to-r 2s linear infinite alternate;
    -webkit-animation: l-to-r 2s linear infinite alternate;  
}
.right_cloud{
	position: absolute;
    width: 31%;
    height: 10%;
    top: 55%;
    left: 65%;
    animation: r-to-l 2s linear infinite alternate;
    -webkit-animation: r-to-l 2s linear infinite alternate;  
}
.choose-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.add-box{
    animation: choose-box 1s;
    -webkit-animation: choose-box 1s;
}
.left-to-right{
	animation: left-to-right 1s;
    -webkit-animation: left-to-right 1s;
}
.choose1_1{
	position: absolute;
    top: 6%;
    width: 25%;
    left: 19%;
    display: none;
}
.choose1_2{
    position: absolute;
    top: 6%;
    width: 25%;
    left: 55%;
    display: none;
    
}
.choose1_3{
	position: absolute;
    top: 22%;
    width: 25%;
    left: 19%;
    display: none;
}
.choose1_4{
	position: absolute;
    top: 22%;
    width: 25%;
    left: 55%;
    display: none;
}
.choose1_5{
    position: absolute;
    top: 38%;
    width: 25%;
    left: 19%;
    display: none;
}
.choose1_6{
	position: absolute;
    top: 38%;
    width: 25%;
    left: 55%;
    display: none;
}
.choose1_7{
	position: absolute;
    top: 54%;
    width: 25%;
    left: 19%;
    display: none;
}.choose1_8{
	position: absolute;
    top: 54%;
    width: 25%;
    left: 55%;
    display: none;
}
.tishi{
	position: absolute;
    width: 50%;
    top: 67%;
    left: 45%;
    display: none;
}
.answer{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.answer-bg,.answer-title,.answer-photo,.answer-explain{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.answer-tips{
    position: absolute;
    top: 70%;
    width: 31%;
    left: 4%;
    display: none;
    animation: right-to-left 1s;
    -webkit-animation: right-to-left 1s;
}
.answer-audio{
	position: absolute;
    top: 71%;
    width: 29%;
    left: 34%;
}
.audio_play{
	position: absolute;
    top: 71%;
    width: 29%;
    left: 34%;
    display: none;
}
.answer-return{
	position: absolute;
    top: 86%;
    width: 23%;
    left: 72%;
}

/*小豹子 从右到左*/
@keyframes right-to-left{
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(-50px);
	}
	100%{
		opacity: 1;
		-webkit-transform:none;
	}
	}
@-webkit-keyframes right-to-left{
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(-50px);
	}
	100%{
		opacity: 1;
		-webkit-transform:none;
	}
	}
@-o-keyframes right-to-left{
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(-50px);
	}
	100%{
		opacity: 1;
		-webkit-transform:none;
	}
	}


/*小豹子 从左往右*/
@keyframes left-to-right{
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(50px);
	}
	100%{
		opacity: 1;
	    -webkit-transform:none;
	}
	}
@-webkit-keyframes left-to-right{
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(50px);
	}
	100%{
		opacity: 1;
	    -webkit-transform:none;
	}
	}
@-o-keyframes left-to-right{
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(50px);
	}
	100%{
		opacity: 1;
	    -webkit-transform:none;
	}
	}
/*箭头*/
@keyframes arrow-scroll{
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(10px);
	}
	100%{
		opacity: 1;
	    -webkit-transform:none;
	}
	}
@-webkit-keyframes arrow-scroll{
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(10px);
	}
	100%{
		opacity: 1;
	    -webkit-transform:none;
	}
	}
@-o-keyframes arrow-scroll{
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(10px);
	}
	100%{
		opacity: 1;
	    -webkit-transform:none;
	}
	}




/*弹出视频*/
@keyframes choose-box{
	0% {
	    opacity: 0;
	    transform: scale(0);
	}
	100% {
	    opacity: 1;
	    transform: scale(1);
	}
	}
@-webkit-keyframes choose-box{
	0% {
	    opacity: 0;
	    transform: scale(0);
	}
	100% {
	    opacity: 1;
	    transform: scale(1);
	}
	}
@-o-keyframes choose-box{
	0% {
	    opacity: 0;
	    transform: scale(0);
	}
	100% {
	    opacity: 1;
	    transform: scale(1);
	}
	}
/*从下 淡入 向上移*/
@keyframes bot-top{
	0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
100% {
    opacity: 1;
    -webkit-transform:none;
    transform:none;
}
}
@-moz-keyframes  bot-top{
	0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
100% {
    opacity: 1;
    -webkit-transform:none;
    transform:none;
}
}
@-webkit-keyframes bot-top{
	0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
100% {
    opacity: 1;
    -webkit-transform:none;
    transform:none;
}
}
@-o-keyframes  bot-top{
	0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
100% {
    opacity: 1;
    -webkit-transform:none;
    transform:none;
}
}
/*淡入淡出 闪烁*/
@keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-moz-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-webkit-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-o-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/*云 左到右 l-to-r*/
@keyframes l-to-r-1{
	0% {
    -webkit-transform: translateX(-80px);
    transform: translateX(-80px);
}
100% {
     -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
}
@-moz-keyframes l-to-r-1{
	0% {
    -webkit-transform: translateX(-80px);
    transform: translateX(-80px);
}
100% {
     -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
}

@-webkit-keyframes l-to-r-1{
	0% {
    -webkit-transform: translateX(-80px);
    transform: translateX(-80px);
}
100% {
     -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
}

@-o-keyframes l-to-r-1{
	0% {
    -webkit-transform: translateX(-80px);
    transform: translateX(-80px);
}
100% {
     -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
}






/*云 左到右 l-to-r*/
@keyframes l-to-r{
	0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
100% {
     -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
}
@-moz-keyframes l-to-r{
	0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
100% {
     -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
}

@-webkit-keyframes l-to-r{
	0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
100% {
     -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
}

@-o-keyframes l-to-r{
	0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
100% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
}
/*云 左到右 l-to-r*/
@keyframes r-to-l{
	0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
100% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}
}
@-moz-keyframes r-to-l{
	0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
100% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}
}

@-webkit-keyframes r-to-l{
	0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
100% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}
}

@-o-keyframes r-to-l{
	0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
100% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}
}



/*云 左到右 l-to-r*/
@keyframes r-to-l-1{
	0% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
100% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
}
@-moz-keyframes r-to-l-1{
	0% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
100% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
}

@-webkit-keyframes r-to-l-1{
	0% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
100% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
}

@-o-keyframes r-to-l-1{
	0% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
100% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
}




/*音乐动*/
@keyframes music1{
	0% {
    	transform: rotate(0);
	}
	33% {
		    transform: rotate(-10deg);
	}
	66%{
		transform: rotate(10deg);
	}
	100% {
	    transform: rotate(0);
	}
}
@-webkit-keyframes {
	0% {
    	transform: rotate(0);
	}
	33% {
		    transform: rotate(-10deg);
	}
	66%{
		transform: rotate(10deg);
	}
	100% {
	    transform: rotate(0);
	}
}