@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@keyframes fadeIn-R{
	0%{
		transform: translateX(20px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeIn-L{
	0%{
		transform: translateX(-20px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeIn-B{
	0%{
		transform: translateY(20px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeIn-T{
	0%{
		transform: translateY(-20px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes shaking{
    0%{
		transform: translateY(0);
	}
	25%{
		transform: translateY(-10px);
	}
    50%{
		transform: translateY(0);
	}
    75%{
		transform: translateY(10px);
	}
    100%{
		transform: translateY(0);
	}
}

@keyframes shaking-slow{
    0%{
		transform: translateY(0);
	}
	25%{
		transform: translateY(-3px);
	}
    50%{
		transform: translateY(0);
	}
    75%{
		transform: translateY(3px);
	}
    100%{
		transform: translateY(0);
	}
}

@keyframes pulse{
    0%{
        transform: scale(1,1);
        transform: translateY(0);
        opacity: 0;
	}
    5%{
        opacity: 1;
	}
	15%{
        transform: translateY(-70px) scale(0.76,0.76);
	}
    30%{
        transform: translateY(-127px) scale(0.59,0.59);
	}
    45%{
        transform: translateY(-182px) scale(0.45,0.45);
	}
    60%{
        transform: translateY(-235px) scale(0.33,0.33);
	}
    75%{
        transform: translateY(-287px) scale(0.24,0.24);
	}
    90%{
        transform: translateY(-329px) scale(0.18,0.18);
	}
    99%{
        transform: translateY(-366px) scale(0.14,0.14);
        opacity: 1;
	}
    100%{
        transform: translateY(-388px) scale(0,0);
        opacity: 0;
	}
}

@keyframes zoom{
    0%{
		transform: scale(1,1);
        opacity: 0;
	}
    5%{
        opacity: 0.33;
	}
    25%{
		transform: scale(1.2,1.2);
        opacity: 0.12;
	}
    50%{
		transform: scale(1.4,1.4);
        opacity: 0;
	}
    100%{
		transform: scale(1,1);
        opacity: 0;
	}
}

.fadeIn{
	animation: fadeIn 0.3s ease-in-out forwards;
}

.fadeIn-R{
	animation: fadeIn-R 0.6s ease-in-out forwards;
}

.fadeIn-L{
	animation: fadeIn-L 0.6s ease-in-out forwards;
}

.fadeIn-T{
	animation: fadeIn-T 0.6s ease-in-out forwards;
}

.fadeIn-B{
	animation: fadeIn-B 0.6s ease-in-out forwards;
}

.shaking{
    animation: shaking 2s linear infinite;
}

/*=====Banner=====*/
.slogan svg{
    animation: fadeIn 0.2s ease-in-out forwards;
    opacity: 0;
}

.slogan svg:nth-of-type(2){
    animation: fadeIn 0.2s ease-in-out 0.1s forwards;
}

.slogan svg:nth-of-type(3){
    animation: fadeIn 0.2s ease-in-out 0.15s forwards;
}

.slogan svg:nth-of-type(4){
    animation: fadeIn 0.2s ease-in-out 0.2s forwards;
}

.slogan svg:nth-of-type(5){
    animation: fadeIn 0.2s ease-in-out 0.25s forwards;
}

.slogan svg:nth-of-type(6){
    animation: fadeIn 0.2s ease-in-out 0.3s forwards;
}

.slogan svg:nth-of-type(7){
    animation: fadeIn 0.2s ease-in-out 0.35s forwards;
}

.slogan svg:nth-of-type(8){
    animation: fadeIn 0.2s ease-in-out 0.4s forwards;
}

.slogan svg:nth-of-type(9){
    animation: fadeIn 0.2s ease-in-out 0.45s forwards;
}

.slogan svg:nth-of-type(10){
    animation: fadeIn 0.2s ease-in-out 0.5s forwards;
}

.slogan svg:nth-of-type(11){
    animation: fadeIn 0.2s ease-in-out 0.55s forwards;
}

.slogan svg:nth-of-type(12){
    animation: fadeIn 0.2s ease-in-out 0.6s forwards;
}

.slogan svg:nth-of-type(13){
    animation: fadeIn 0.2s ease-in-out 0.65s forwards;
}

.slogan-border{
    animation: slogan-b 0.3s ease-in-out 1s forwards;
}

@keyframes slogan-b{
    0%{
        margin-left: -253px;
        top: 199px;
        opacity: 0;
	}
    100%{
        margin-left: -256px;
        top: 196px;
        opacity: 1;
	}
}

.slogan-stage{
    animation: slogan-s 0.3s ease-in-out 1s forwards;
}

@keyframes slogan-s{
    0%{
        margin-left: -253px;
        top: 199px;
        opacity: 0;
	}
    100%{
        margin-left: -250px;
        top: 202px;
        opacity: 1;
	}
}

.slogan-sub i:nth-of-type(1){
    animation: move-l 0.4s ease-in-out 1.3s forwards;
}

@keyframes move-l{
    0%{
        transform: translateX(-400px);
        opacity: 0;
	}
    100%{
        transform: translateX(0);
        opacity: 1;
	}
}

.slogan-sub i:nth-of-type(3){
    animation: move-r 0.4s ease-in-out 1.3s forwards;
}

@keyframes move-r{
    0%{
        transform: translateX(400px);
        opacity: 0;
	}
    100%{
        transform: translateX(0);
        opacity: 1;
	}
}

.slogan-sub i:nth-of-type(2){
    animation: fadeIn 0.3s ease-in-out 1.3s forwards;
}

/*=====企业介绍=====*/
.info-item > .ai > div:nth-of-type(1){
     animation: shaking-slow 3s linear infinite;
}

/*=====功能模块=====*/
.function-ai > div.block01{
    animation: shaking 6s linear infinite;
}

.function-ai > div.block02{
    animation: shaking 8s linear 0.5s infinite;
}

.function-ai > div.shield{
    animation: shaking-slow 3s linear infinite;
}

.function-ai > div.shield::after{
    animation: zoom 1.5s linear infinite;
}

.loop-line .pulse:nth-of-type(1){
    animation: pulse 7s linear infinite;
}

.loop-line .pulse:nth-of-type(2){
    animation: pulse 7s linear 1s infinite;
}

.loop-line .pulse:nth-of-type(3){
    animation: pulse 7s linear 2s infinite;
}

.loop-line .pulse:nth-of-type(4){
    animation: pulse 7s linear 3s infinite;
}

.loop-line .pulse:nth-of-type(5){
    animation: pulse 7s linear 4s infinite;
}

.loop-line .pulse:nth-of-type(6){
    animation: pulse 7s linear 5s infinite;
}

.loop-line .pulse:nth-of-type(7){
    animation: pulse 7s linear 6s infinite;
}

.loop-line .pulse:nth-of-type(8){
    animation: pulse 7s linear 7s infinite;
}

.icon-group-left > div{
    animation: fadeIn-R 0.3s ease-in-out forwards;
}

.icon-group-right > div{
    animation: fadeIn-L 0.3s ease-in-out forwards;
}

/*=====案例进场=====*/
.prototype{
    position: absolute;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
}

.type-etk{
    width: 690px;
    height: 600px;
    background-image: url(../../animate/etk.webp);
    top: -70px;
    background-position: center;
    right: -100px;
}

.type-bjsy{
    width: 1300px;
    height: 570px;
    background-image: url(../../animate/bjsy.webp);
    left: 50%;
    margin-left: -650px;
    top: 274px;
    background-position: center;
}

.case-item03{
    transform: perspective(400px);
}

.type-qh{
    width: 600px;
    height: 540px;
    background-image: url(../../animate/qh.webp);
    transform: rotateY(180deg);
    left: -80px;
    top: -60px;
}

.type-ytyd{
    width: 1360px;
    height: 540px;
    background-image: url("../../animate/ytyd.webp");
    left: 50%;
    margin-left: -680px;
    top: 300px;
}

.type-sddy{
    width: 822px;
    height: 680px;
    background-image: url(../../animate/sddy.webp);
    right: -330px;
    top: -40px;
}

.type-yt{
    width: 866px;
    height: 637px;
    background-image: url(../../animate/yitai.webp);
    left: -310px;
    top: -60px;
}

.type-ytwr{
    width: 902px;
    height: 700px;
    background-image: url(../../animate/ytwr.webp);
    left: 50%;
    margin-left: -401px;
    top: 260px;
}

.type-tzry{
    width: 744px;
    height: 680px;
    background-image: url(../../animate/tzry.webp);
    right: -300px;
    top: -50px;
    background-position: right;
}

.performance-list > div{
    animation: scroll-T 60s linear infinite;
}

@keyframes scroll-T{
    0%{
        transform: translateY(0);
	}
    99%{
        transform: translateY(-1760px);
	}
    100%{
        transform: translateY(0);
	}
}

/*=====指示线=====*/
.play::after{
	animation: right-line 5.6s linear infinite;
}

.restart::after{
	animation: right-line01 5.6s linear infinite;
}

@keyframes right-line{
    0%{
        right: 185px;
	}
	95%{
        right: 0;
	}
    100%{
        right: 0;
	}
}

@keyframes right-line01{
    0%{
        right: 185px;
	}
	95%{
        right: 0;
	}
    100%{
        right: 0;
	}
}
}