@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

@keyframes img_show {
    0%{
        opacity: 0;
		transform: scale(0.3);
    }
    10%{
        opacity: 1;
		transform: scale(1);
    }
}

.img_show{
	-webkit-animation-name: img_show;
	animation-name: img_show
}

@keyframes ring{
	0%{
		opacity: 0;
		transform: scale(1) rotate(0deg);
	}
	15%{
		opacity: 1;
		transform: scale(1.1) rotate(0deg)
	}
	100%{
		transform: scale(1.1) rotate(1440deg);
	}
}
.ring{
	-webkit-animation-name: ring;
	animation-name: ring
}

@keyframes fadeleft{
	0%{
		transform: translateX(-50%);
		opacity: 0;
	}
	100%{
		transform: translateX(0%);
		opacity: 1;
	}
}
.fadeleft{
	-webkit-animation-name: fadeleft;
	animation-name: fadeleft
}

@keyframes downline1 {
	0%{
		width: 0%;
	}
	100%{
		width: 10%;
	}
}
.downline1{
	-webkit-animation-name: downline1;
	animation-name: downline1
}
@keyframes downline2 {
	0%{
		width: 0%;
	}
	100%{
		width: 20%;
	}
}
.downline2{
	-webkit-animation-name: downline2;
	animation-name: downline2
}
@keyframes upline {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}
.upline{
	-webkit-animation-name: upline;
	animation-name: upline
}

/* 移动端 */

@keyframes linemoving-1 {
	0%{
		width: 0%;
	}
	100%{
		width: 80%;
	}
}
.linemoving-1{
	-webkit-animation-name: linemoving-1;
	animation-name: linemoving-1
}
@keyframes linemoving-2 {
	0%{
		width: 0%;
	}
	100%{
		width: 20%;
	}
}
.linemoving-2{
	-webkit-animation-name: linemoving-2;
	animation-name: linemoving-2
}
@keyframes ring-m{
	0%{
		opacity: 0;
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
	15%{
		opacity: 1;
		transform: translateX(-50%) scale(1.05) rotate(0deg)
	}
	100%{
		transform: translateX(-50%) scale(1.05) rotate(1440deg);
	}
}
.ring-m{
	-webkit-animation-name: ring-m;
	animation-name: ring-m
}

@keyframes phone {
    0%, 80%, 84%, 90%, 96%, 100% {
        transform: translateY(0);
    }
    
    88% {
        transform: translateY(-5px);
    }
    92% {
        transform: translateY(-2px);
    }
}

@keyframes bannerFadeUp {
    0%{
        opacity: 0;
        transform: translate(-50%,100%);
    }
    100%{
        opacity: 1;
        transform: translate(-50%,0);
    }
}
.bannerFadeUp{
	-webkit-animation-name: bannerFadeUp;
	animation-name: bannerFadeUp
}

@keyframes compareFade{
    0%{
        opacity: 0;
        transform: translateX(-50%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.compareFade{
	-webkit-animation-name: compareFade;
	animation-name: compareFade
}

@keyframes jiantouFade{
	0%{
        opacity: 0;
        transform: translateX(-50%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.jiantouFade{
	-webkit-animation-name: jiantouFade;
	animation-name: jiantouFade;
}
@keyframes fadeInUp{
	0%{
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	100%{
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.fadeInUp{
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

@media screen and (max-width:425px) {
	@keyframes compareFade{
		0%{
			opacity: 0;
			transform: translateY(-40%);
		}
		100%{
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes jiantouFade{
		0%{
			opacity: 0;
			transform: translateY(-100%) rotate(90deg);
		}
		100%{
			opacity: 1;
			transform: translateY(0) rotate(90deg);
		}
	}
}