#box-4{padding-bottom: 80px;}
#box-4 .box1 li{position: absolute;border-radius: 50%;overflow: hidden;}
#box-4 .box1 {position: relative;margin-top: 40px;}
#box-4 .box1 ul{perspective: 100px;perspective-origin: center;}


#box-4 .box1 {height: 41vw; /*黑色板块高度*/}
#box-4 .box1 li:nth-child(1){width: 9vw;left: 19vw;top: 1vw;}
#box-4 .box1 li:nth-child(2){width: 11vw;left: 3vw;top: 9vw;}
#box-4 .box1 li:nth-child(3){width: 10vw;left: 7vw;top: 24vw;}
#box-4 .box1 li:nth-child(4){width: 9vw;left: 20vw;top: 29vw;}
#box-4 .box1 li:nth-child(6){width: 13vw;left: 32vw;top: 13vw;}
#box-4 .box1 li:nth-child(5){width: 10vw;left: 18vw;top: 15vw;}
#box-4 .box1 li:nth-child(7){width: 9vw;left: 32vw;top: 30vw;}
#box-4 .box1 li:nth-child(8){width: 10vw;left: 46vw;top: 3vw;}
#box-4 .box1 li:nth-child(9){width: 10vw;left: 51vw;top: 18vw;}
#box-4 .box1 li:nth-child(10){width: 9vw;left: 46vw;top: 29vw;}
#box-4 .box1 li:nth-child(11){width: 10vw;left: 62vw;top: 5vw;}
#box-4 .box1 li:nth-child(12){width: 10vw;left: 66vw;top: 23vw;}


@media (min-width:1199px) and (max-width:1380px){
	/*小电脑*/
	#box-4 .box1 li:nth-child(1){width: 9vw;left: 24vw;top: 1vw;}
	#box-4 .box1 li:nth-child(2){width: 11vw;left: 8vw;top: 11vw;}
	#box-4 .box1 li:nth-child(3){width: 10vw;left: 15vw;top: 25vw;}
	#box-4 .box1 li:nth-child(4){width: 9vw;left: 27vw;top: 31vw;}
	#box-4 .box1 li:nth-child(5){width: 10vw;left: 26vw;top: 15vw;}
	#box-4 .box1 li:nth-child(6){width: 13vw;left: 40vw;top: 13vw;}
	#box-4 .box1 li:nth-child(7){width: 9vw;left: 42vw;top: 31vw;}
	#box-4 .box1 li:nth-child(8){width: 10vw;left: 56vw;top: 3vw;}
	#box-4 .box1 li:nth-child(9){width: 10vw;left: 59vw;top: 18vw;}
	#box-4 .box1 li:nth-child(10){width: 9vw;left: 56vw;top: 31vw;}
	#box-4 .box1 li:nth-child(11){width: 10vw;left: 70vw;top: 5vw;}
	#box-4 .box1 li:nth-child(12){width: 10vw;left: 74vw;top: 23vw;}
	
}
@media (min-width:1380px) and (max-width:1500px){
	/*小电脑*/
	#box-4 .box1 li:nth-child(1){width: 9vw;left: 24vw;top: 1vw;}
	#box-4 .box1 li:nth-child(2){width: 11vw;left: 8vw;top: 11vw;}
	#box-4 .box1 li:nth-child(3){width: 10vw;left: 15vw;top: 25vw;}
	#box-4 .box1 li:nth-child(4){width: 9vw;left: 25vw;top: 31vw;}
	#box-4 .box1 li:nth-child(5){width: 10vw;left: 26vw;top: 15vw;}
	#box-4 .box1 li:nth-child(6){width: 13vw;left: 40vw;top: 13vw;}
	#box-4 .box1 li:nth-child(7){width: 9vw;left: 42vw;top: 31vw;}
	#box-4 .box1 li:nth-child(8){width: 10vw;left: 56vw;top: 3vw;}
	#box-4 .box1 li:nth-child(9){width: 10vw;left: 59vw;top: 18vw;}
	#box-4 .box1 li:nth-child(10){width: 9vw;left: 56vw;top: 31vw;}
	#box-4 .box1 li:nth-child(11){width: 10vw;left: 70vw;top: 5vw;}
	#box-4 .box1 li:nth-child(12){width: 10vw;left: 74vw;top: 23vw;}
	
}
@media (min-width:1500px) and (max-width:1700px){
	/*小电脑*/
	#box-4 .box1 li:nth-child(1){width: 9vw;left: 24vw;top: 1vw;}
	#box-4 .box1 li:nth-child(2){width: 11vw;left: 8vw;top: 11vw;}
	#box-4 .box1 li:nth-child(3){width: 10vw;left: 15vw;top: 25vw;}
	#box-4 .box1 li:nth-child(4){width: 9vw;left: 25vw;top: 31vw;}
	#box-4 .box1 li:nth-child(5){width: 10vw;left: 26vw;top: 15vw;}
	#box-4 .box1 li:nth-child(6){width: 13vw;left: 40vw;top: 13vw;}
	#box-4 .box1 li:nth-child(7){width: 9vw;left: 42vw;top: 31vw;}
	#box-4 .box1 li:nth-child(8){width: 10vw;left: 56vw;top: 3vw;}
	#box-4 .box1 li:nth-child(9){width: 10vw;left: 59vw;top: 18vw;}
	#box-4 .box1 li:nth-child(10){width: 9vw;left: 56vw;top: 31vw;}
	#box-4 .box1 li:nth-child(11){width: 10vw;left: 70vw;top: 5vw;}
	#box-4 .box1 li:nth-child(12){width: 10vw;left: 74vw;top: 23vw;}
	
}
@media (min-width:1700px) and (max-width:1880px){
	/*小电脑*/
	#box-4 .box1 li:nth-child(1){width: 9vw;left: 19vw;top: 1vw;}
	#box-4 .box1 li:nth-child(2){width: 11vw;left: 3vw;top: 9vw;}
	#box-4 .box1 li:nth-child(3){width: 10vw;left: 7vw;top: 24vw;}
	#box-4 .box1 li:nth-child(4){width: 9vw;left: 20vw;top: 29vw;}
	#box-4 .box1 li:nth-child(5){width: 10vw;left: 18vw;top: 15vw;}
	#box-4 .box1 li:nth-child(6){width: 13vw;left: 32vw;top: 13vw;}
	#box-4 .box1 li:nth-child(7){width: 9vw;left: 32vw;top: 30vw;}
	#box-4 .box1 li:nth-child(8){width: 10vw;left: 46vw;top: 3vw;}
	#box-4 .box1 li:nth-child(9){width: 10vw;left: 51vw;top: 18vw;}
	#box-4 .box1 li:nth-child(10){width: 9vw;left: 46vw;top: 29vw;}
	#box-4 .box1 li:nth-child(11){width: 10vw;left: 62vw;top: 5vw;}
	#box-4 .box1 li:nth-child(12){width: 10vw;left: 66vw;top: 23vw;}
	
}
@media (min-width:767px) and (max-width:850px){
	/*平板*/
	#box-4 .box1 li:nth-child(1){width: 9vw;left: 22vw;top: 1vw;}
	#box-4 .box1 li:nth-child(2){width: 11vw;left: 6vw;top: 11vw;}
	#box-4 .box1 li:nth-child(3){width: 10vw;left: 11vw;top: 25vw;}
	#box-4 .box1 li:nth-child(4){width: 9vw;left: 22vw;top: 31vw;}
	#box-4 .box1 li:nth-child(5){width: 10vw;left: 24vw;top: 15vw;}
	#box-4 .box1 li:nth-child(6){width: 13vw;left: 38vw;top: 13vw;}
	#box-4 .box1 li:nth-child(7){width: 9vw;left: 40vw;top: 31vw;}
	#box-4 .box1 li:nth-child(8){width: 10vw;left: 54vw;top: 3vw;}
	#box-4 .box1 li:nth-child(9){width: 10vw;left: 56vw;top: 18vw;}
	#box-4 .box1 li:nth-child(10){width: 9vw;left: 54vw;top: 31vw;}
	#box-4 .box1 li:nth-child(11){width: 10vw;left: 68vw;top: 5vw;}
	#box-4 .box1 li:nth-child(12){width: 10vw;left: 72vw;top: 23vw;}
	
}
@media (min-width:850px) and (max-width:1199px){
	/*平板*/
	#box-4 .box1 li:nth-child(1){width: 9vw;left: 24vw;top: 1vw;}
	#box-4 .box1 li:nth-child(2){width: 11vw;left: 6vw;top: 11vw;}
	#box-4 .box1 li:nth-child(3){width: 10vw;left: 11vw;top: 25vw;}
	#box-4 .box1 li:nth-child(4){width: 9vw;left: 25vw;top: 31vw;}
	#box-4 .box1 li:nth-child(5){width: 10vw;left: 24vw;top: 15vw;}
	#box-4 .box1 li:nth-child(6){width: 14vw;left: 40vw;top: 13vw;}
	#box-4 .box1 li:nth-child(7){width: 9vw;left: 41vw;top: 31vw;}
	#box-4 .box1 li:nth-child(8){width: 10vw;left: 56vw;top: 3vw;}
	#box-4 .box1 li:nth-child(9){width: 10vw;left: 60vw;top: 18vw;}
	#box-4 .box1 li:nth-child(10){width: 9vw;left: 56vw;top: 31vw;}
	#box-4 .box1 li:nth-child(11){width: 10vw;left: 73vw;top: 6vw;}
	#box-4 .box1 li:nth-child(12){width: 10vw;left: 75vw;top: 23vw;}

}
@media (max-width:767px){
	/*手机*/
	#box-4 {padding-bottom: 60px;}
	#box-4 .box1 {height: auto;}
	#box-4 .box1 ul{display: flex;flex-wrap: wrap;}
	#box-4 .box1 li{width: calc(33.3% - 20px)!important;position: relative;left: 0!important;top: 0!important;margin: 10px;}
}


@keyframes fadeSO{
	0% {transform: scale(1.5) translate3D(0, 0, 100px);opacity: 0;filter: blur(8);}
	100% {transform: scale(1) translate3D(0, 0, 0);filter: blur(0);opacity: 1;}
}
.fadeSO{-webkit-animation-name:fadeSO;animation-name:fadeSO;position: relative;animation-duration: 2s;animation-timing-function:ease-in-out;}

.fadeSO:nth-child(2n-1){animation-delay: 0.1s;}
.fadeSO:nth-child(3n){animation-delay: 0.3s;}
.fadeSO:nth-child(3n-1){animation-delay: 0.4s;}