* {
    margin: 0;
    padding: 0;
}

.main-box {
    background: url('../imgs/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    background-color: #222222;
}

.bg {
    width: 100vw;
    height: 100vh;
}

.bg img {
    width: 100vw;
    height: auto;
}

.text {
    width: 100vw;
    position: relative;
    z-index: 99;
    top: 24vh;
    height: 100vh;
}


.goal {
    width: 100vw;
    text-align: center;
    position: absolute;
    z-index: 999;
    top: 33vh;
}


.ball {
    width: 100vw;
    text-align: center;
    position: absolute;
    z-index: 99;
    top: 18vh;
    opacity: 0.6;
}

.text img {
    width: 100vw;
    height: auto;
    animation-name: zoomIn;
    /* 引用定义的动画 */
    animation-duration: 3s;
    /* 动画持续时间 */
    animation-iteration-count: infinite;
    /* 无限循环播放 */
    animation-timing-function: ease-in-out;
    /* 缓动函数，使动画更加平滑 */
}

.goal img {
    width: 20vw;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: -10vw;

}

.goal_2 {
    animation-name: zoomIn;
    /* 引用定义的动画 */
    animation-duration: 3s;
    /* 动画持续时间 */
    animation-iteration-count: infinite;
    /* 无限循环播放 */
    animation-timing-function: linear;
    /* 缓动函数，使动画更加平滑 */
}

.goal_1 {
    z-index: 88;
    animation-name: fadeInOut, zoomIn;
    /* 引用定义的动画 */
    animation-duration: 3s;
    /* 动画持续时间 */
    animation-iteration-count: infinite;
    /* 无限循环播放 */
    animation-timing-function: linear;
    /* 缓动函数，使动画更加平滑 */
}


.ball img {
    width: 35vw;
    height: auto;
    animation-name: rotate;
    /* 引用定义的动画 */
    animation-duration: 120s;
    /* 动画持续时间 */
    animation-iteration-count: infinite;
    /* 无限循环播放 */
    animation-timing-function: linear;
    /* 缓动函数，使动画更加线性 */
}

.rel {
    position: relative;
}

/* .logo {
    position:absolute;
    left:20px;
    top:20px;
    z-index:9999;
}

.logo img {
    width:80px;
    height:80px;
} */


/* 缩放 */
@keyframes zoomIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

/* 旋转 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 渐隐渐现动画 */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        /* 完全透明 */
    }

    50% {
        opacity: 1;
        /* 完全不透明 */
    }

    100% {
        opacity: 0;
        /* 完全透明 */
    }
}

/*彩/灰*/
@keyframes grayColor {
    0% {
        filter: saturate(0%);
    }

    50% {
        filter: saturate(100%);
    }

    100% {
        filter: saturate(0%);
    }
}

/*从上往下渐入*/
@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        /* 初始时完全透明 */
        transform: translateY(-100%);
        /* 初始时上移100%的距离，隐藏在视图之外 */
    }

    100% {
        opacity: 1;
        /* 结束时完全不透明 */
        transform: translateY(0);
        /* 结束时不再上移，显示在视图中 */
    }
}

/*从下往上渐入*/
@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        /* 初始时完全透明 */
        transform: translateY(100%);
        /* 初始时上移100%的距离，隐藏在视图之外 */
    }

    100% {
        opacity: 1;
        /* 结束时完全不透明 */
        transform: translateY(0);
        /* 结束时不再上移，显示在视图中 */
    }
}

@media screen and (max-width: 760px) {
	
	.goal {
		top:43vh!important;
	}
	.goal img {
		width:58vw!important;
		margin-left:-29vw!important;
	}
	.ball {
		top:34vh!important;
	}
	.ball img {
		width:85vw!important;
	}
	#fbx {
		bottom:6vh!important;
	}
	
}