/*
* @Author: xiezuowei
* @Date:   2017-08-25 16:44:39
* @Last Modified by:   xiezuowei
* @Last Modified time: 2017-08-30 16:42:19
*/

.btn:active{transform: scale(.9);-webkit-transform: scale(.9);}

.loading img.loading_icon{
	-webkit-animation: upDownfloat .8s linear infinite;
			animation: upDownfloat .8s linear infinite;
}

.jump{
	display: inline-block;
	-webkit-animation: loadingJump 1s ease-in-out infinite;
			animation: loadingJump 1s ease-in-out infinite;
}
.jump.jump2{
	-webkit-animation-delay: .15s;
			animation-delay: .15s;
}
.jump.jump3{
	-webkit-animation-delay: .3s;
			animation-delay: .3s;
}
.jump.jump4{
	-webkit-animation-delay: .45s;
			animation-delay: .45s;
}
.jump.jump5{
	-webkit-animation-delay: .6s;
			animation-delay: .6s;
}
.jump.jump6{
	-webkit-animation-delay: .75s;
			animation-delay: .75s;
}

.slide_home{transition: .8s linear;-webkit-transition: .8s linear;}
.slide_home.out{transform: translateY(-100%);-webkit-transform: translateY(-100%);}
.slide_home .title.animated{
	-webkit-transform-origin: 4rem bottom;
			transform-origin: 4rem bottom;
	-webkit-animation-delay: 1s;
			animation-delay: 1s;	
}
.slide_home .subtitle.animated{
	-webkit-animation-delay: 1s;
			animation-delay: 1s;
}
.slide_home .desk.animated{
	-webkit-animation-duration: .8s;
			animation-duration: .8s;
}
.slide_home .fish.animated{
	-webkit-animation-delay: .4s;
			animation-delay: .4s;
}
.slide_home .btn_start.animated{
	-webkit-animation-delay: 1.4s;
			animation-delay: 1.4s;
}
.slide_home .fish_03 .mark,
.slide_home .fish_04 .mark{
	-webkit-animation: markZoom 1s linear infinite;
			animation: markZoom 1s linear infinite;
}

.mask_ques_box .ques1.animated{-webkit-animation-delay: 100ms;animation-delay: 100ms;}
.mask_ques_box .ques2.animated{-webkit-animation-delay: 200ms;animation-delay: 200ms;}
.mask_ques_box .ques3.animated{-webkit-animation-delay: 300ms;animation-delay: 300ms;}
.mask_ques_box .ques4.animated{-webkit-animation-delay: 400ms;animation-delay: 400ms;}
.mask_ques_box .ques5.animated{-webkit-animation-delay: 500ms;animation-delay: 500ms;}
.mask_ques_box .ques6.animated{-webkit-animation-delay: 600ms;animation-delay: 600ms;}
.mask_ques_box .ques7.animated{-webkit-animation-delay: 700ms;animation-delay: 700ms;}
.mask_ques_box .ques8.animated{-webkit-animation-delay: 800ms;animation-delay: 800ms;}
.mask_ques_box .ques9.animated{-webkit-animation-delay: 900ms;animation-delay: 900ms;}
.mask_ques_box .ques10.animated{-webkit-animation-delay: 1000ms;animation-delay: 1000ms;}
.mask_ques_box .ques11.animated{-webkit-animation-delay: 1100ms;animation-delay: 1100ms;}
.mask_ques_box .ques12.animated{-webkit-animation-delay: 1200ms;animation-delay: 1200ms;}
.mask_ques_box .ques13.animated{-webkit-animation-delay: 1300ms;animation-delay: 1300ms;}
.mask_ques_box .ques14.animated{-webkit-animation-delay: 1400ms;animation-delay: 1400ms;}
.mask_ques_box .ques15.animated{-webkit-animation-delay: 1500ms;animation-delay: 1500ms;}
.mask_ques_box .ques16.animated{-webkit-animation-delay: 1600ms;animation-delay: 1600ms;}
.mask_ques_box .ques17.animated{-webkit-animation-delay: 1700ms;animation-delay: 1700ms;}
.mask_ques_box .ques18.animated{-webkit-animation-delay: 1800ms;animation-delay: 1800ms;}
.mask_ques_box .ques19.animated{-webkit-animation-delay: 1900ms;animation-delay: 1900ms;}
.mask_ques_box .ques20.animated{-webkit-animation-delay: 2000ms;animation-delay: 2000ms;}
.mask_ques_box .ques21.animated{-webkit-animation-delay: 2100ms;animation-delay: 2100ms;}
.mask_ques_box .ques22.animated{-webkit-animation-delay: 2200ms;animation-delay: 2200ms;}

.page_animate .animate_box{display: block;}

.page_animate .desk_02,
.page_animate .desk_03{animation-delay: .3s;-webkit-animation-delay: .3s;}
.page_animate .desk_04,
.page_animate .desk_05{animation-delay: .6s;-webkit-animation-delay: .6s;}

.candy_box .candy{
	-webkit-animation: candy 1s linear 1.4s both infinite;
			animation: candy 1s linear 1.4s both infinite;
}

.slide_02.swiper-slide-active .fish{
	-webkit-animation: fadeIn 1.5s both;
			animation: fadeIn 1.5s both;
}
.slide_02.swiper-slide-active .text_bankruptcy{
	-webkit-animation: bounceInDown 1s 1s both;
			animation: bounceInDown 1s 1s both;
}

.slide_03.swiper-slide-active .fish{
	-webkit-animation: fadeIn 3s both;
			animation: fadeIn 3s both;
}
.slide_03.swiper-slide-active .fort{
	-webkit-animation: fortShow 1.5s both;
			animation: fortShow 1.5s both;
}
.slide_03.swiper-slide-active .fort_mark{
	-webkit-animation-name: fortMarkShow;
			animation-name: fortMarkShow;
	-webkit-animation-duration: .2s;
			animation-duration: .2s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}
.slide_03.swiper-slide-active .fort_mark.mark_01{
	-webkit-animation-delay: 1.5s;
			animation-delay: 1.5s;
}
.slide_03.swiper-slide-active .fort_mark.mark_02{
	-webkit-animation-delay: 1.7s;
			animation-delay: 1.7s;
}
.slide_03.swiper-slide-active .fort_mark.mark_03{
	-webkit-animation-delay: 1.9s;
			animation-delay: 1.9s;
}
.slide_03.swiper-slide-active .fort_mark.mark_04{
	-webkit-animation-delay: 2.1s;
			animation-delay: 2.1s;
}
.slide_03.swiper-slide-active .fort_mark.mark_05{
	-webkit-animation-delay: 2.3s;
			animation-delay: 2.3s;
}

.slide_04.swiper-slide-active .fish{
	-webkit-animation: bounceInUp 1s .5s both;
			animation: bounceInUp 1s .5s both;	
}
.slide_04.swiper-slide-active .mark{
	-webkit-animation: glint .5s 1.5s both;
			animation: glint .5s 1.5s both;	
}
.slide_04.swiper-slide-active .bubble{
	-webkit-transform-origin: right 1.85rem;
			transform-origin: right 1.85rem;
	-webkit-animation: zoomIn .3s 2.1s both;
			animation: zoomIn .3s 2.1s both;	
}

.slide_05.swiper-slide-active .mark{
	-webkit-animation: glint .5s .8s both;
			animation: glint .5s .8s both;	
}
.slide_05.swiper-slide-active .bubble{
	-webkit-animation: zoomIn .5s 1.3s both, upDownfloat 1.2s linear 1.8s infinite;
			animation: zoomIn .5s 1.3s both, upDownfloat 1.2s linear 1.8s infinite;		
}

.slide_06.swiper-slide-active .fish{
	-webkit-animation: bounceInRight 1s .3s both, upDownfloat 1.2s linear 1.5s infinite;
			animation: bounceInRight 1s .3s both, upDownfloat 1.2s linear 1.5s infinite;
}

.slide_07.swiper-slide-active .captain{
	-webkit-animation: fadeInUp .4s .5s both;
			animation: fadeInUp .4s .5s both;	
}
.slide_07.swiper-slide-active .bubble{
	-webkit-animation: zoomIn .2s both;
			animation: zoomIn .2s both;	
}
.slide_07.swiper-slide-active .bubble.bubble_01{
	-webkit-transform-origin: 2.22rem bottom;
			transform-origin: 2.22rem bottom;
	-webkit-animation-delay: 1s;
			animation-delay: 1s;	
}
.slide_07.swiper-slide-active .bubble.bubble_02{
	-webkit-transform-origin: .3rem bottom;
			transform-origin: .3rem bottom;
	-webkit-animation-delay: 1.2s;
			animation-delay: 1.2s;	
}
.slide_07.swiper-slide-active .bubble.bubble_03{
	-webkit-transform-origin: .06rem 1.9rem;
			transform-origin: .06rem 1.9rem;
	-webkit-animation-delay: 1.4s;
			animation-delay: 1.4s;	
}

.slide_08.swiper-slide-active .bubble{
	-webkit-transform-origin: right 1.32rem;
			transform-origin: right 1.32rem;
	-webkit-animation: zoomIn .5s 2s both, glint2 1.2s linear 2.5s infinite;
			animation: zoomIn .5s 2s both, glint2 1.2s linear 2.5s infinite;		
}
.slide_08.swiper-slide-active .coop{
	-webkit-animation: fadeInRight 2s ease-out both,upDownfloat 2s linear 2s infinite;
			animation: fadeInRight 2s ease-out both,upDownfloat 2s linear 2s infinite;
}

.slide_09.swiper-slide-active .captain{
	-webkit-animation: captainShow 1.5s ease-out both;
			animation: captainShow 1.5s ease-out both;
}
.slide_09.swiper-slide-active .bubble{
	-webkit-transform-origin: .14rem 3.26rem;
			transform-origin: .14rem 3.26rem;
	-webkit-animation: zoomIn .4s 1.6s both;
			animation: zoomIn .4s 1.6s both;	
}

.slide_10.swiper-slide-active .note{
	-webkit-animation-duration: 3s;
			animation-duration: 3s;
	-webkit-animation-timing-function: linear;
			animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
}
.slide_10.swiper-slide-active .note_01{
	-webkit-animation-name: noteRotate1;
			animation-name: noteRotate1;
}
.slide_10.swiper-slide-active .note_02{
	-webkit-animation-name: noteRotate2;
			animation-name: noteRotate2;
}
.slide_10.swiper-slide-active .bubble{
	-webkit-animation: zoomIn .5s .8s both;
			animation: zoomIn .5s .8s both;	
}

.slide_11.swiper-slide-active .result_img_box{
	-webkit-animation: fadeIn 2s both;
			animation: fadeIn 2s both;
}
.slide_11.swiper-slide-active .result_text_box{
	-webkit-animation: bounceIn 1s 1s both;
			animation: bounceIn 1s 1s both;
}
.slide_11.swiper-slide-active .result_num_box{
	-webkit-animation: numShow .5s ease-in 1.8s both;
			animation: numShow .5s ease-in 1.8s both;
}

@keyframes homeTitleShow{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
@-webkit-keyframes homeTitleShow{
	from{
		-webkit-transform: scale(0);
	}
	to{
		-webkit-transform: scale(1);
	}
}

@keyframes candy{
	0%,100%{
		transform: translate(0,0);
	}
	50%{
		transform: translate(-.5rem,.2rem);
	}
}
@-webkit-keyframes candy{
	0%,100%{
		-webkit-transform: translate(0,0);
	}
	50%{
		-webkit-transform: translate(-.5rem,.2rem);
	}
}

@keyframes opacityShow{
	from{opacity: 0;}
	to{opacity: 1;}
}
@-webkit-keyframes opacityShow{
	from{opacity: 0;}
	to{opacity: 1;}
}

@keyframes fortShow{
	from{
		transform: translateY(100%);
	}
	to{
		transform: translateY(0);
	}
}
@-webkit-keyframes fortShow{
	from{
		-webkit-transform: translateY(100%);
	}
	to{
		-webkit-transform: translateY(0);
	}
}

@keyframes fortMarkShow{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		transform: scale(.8);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes fortMarkShow{
	0%{
		opacity: 0;
		-webkit-transform: scale(1);
	}
	50%{
		-webkit-transform: scale(.8);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@keyframes glint{
	0%,66%{
		opacity: 0;
	}
	33%,100%{
		opacity: 1;
	}
}
@-webkit-keyframes glint{
	0%,66%{
		opacity: 0;
	}
	33%,100%{
		opacity: 1;
	}
}

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

@keyframes captainShow{
	from{
		opacity: 0;
		transform: translate(-50%,-50%);
	}
	to{
		opacity: 1;
		transform: translate(0,0);
	}
}
@-webkit-keyframes captainShow{
	from{
		opacity: 0;
		-webkit-transform: translate(-50%,-50%);
	}
	to{
		opacity: 1;
		-webkit-transform: translate(0,0);
	}
}

@keyframes noteRotate1{
	0%{
		opacity: 0;
		transform: translate(.6rem, .6rem) rotate(0deg) scale(0);
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translate(-.6rem, -.6rem) rotate(-1080deg) scale(1);
	}
}
@-webkit-keyframes noteRotate1{
	0%{
		opacity: 0;
		-webkit-transform: translate(.6rem, .6rem) rotate(0deg) scale(0);
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		-webkit-transform: translate(-.6rem, -.6rem) rotate(-1080deg) scale(1);
	}
}
@keyframes noteRotate2{
	0%{
		opacity: 0;
		transform: translate(-.6rem, .6rem) rotate(0deg) scale(0);
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translate(.6rem, -.6rem) rotate(1080deg) scale(1);
	}
}
@-webkit-keyframes noteRotate2{
	0%{
		opacity: 0;
		-webkit-transform: translate(-.6rem, .6rem) rotate(0deg) scale(0);
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		-webkit-transform: translate(.6rem, -.6rem) rotate(1080deg) scale(1);
	}
}

@keyframes markZoom{
	0%,100%{
		transform: scale(1);
	}
	50%{
		transform: scale(.9);
	}
}
@-webkit-keyframes markZoom{
	0%,100%{
		-webkit-transform: scale(1);
	}
	50%{
		-webkit-transform: scale(.9);
	}
}

@keyframes upDownfloat{
	0%,100%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(.1rem);
	}
}
@-webkit-keyframes upDownfloat{
	0%,100%{
		-webkit-transform: translateY(0);
	}
	50%{
		-webkit-transform: translateY(.1rem);
	}
}

@keyframes numShow{
	from{
		opacity: 0;
		transform: scale(5);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes numShow{
	from{
		opacity: 0;
		-webkit-transform: scale(5);
	}
	to{
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@keyframes loadingJump{
	0%,100%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-.05rem);
	}
}
@-webkit-keyframes loadingJump{
	0%,100%{
		-webkit-transform: translateY(0);
	}
	50%{
		-webkit-transform: translateY(-.05rem);
	}
}