/*太极 css*/
		.tj {
                        display:none;
			position: fixed;
			right: -140px;
			bottom: -280px;
			animation: mymove 5s linear infinite;
			/*animation-direction: alternate-reverse;*/
		}


		
		@keyframes mymove {
			0%{
				transform: rotate(0deg);
			}
			25% {
				transform: rotate(50deg);
			}
			50% {
				transform: rotate(180deg);
			}
			80% {
				transform: rotate(270deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
	  .tj div {
	  		z-index: 999;
			transform: scale(.25);
			width: 400px;
			height: 200px;
			background-color: white;
			border: 5px solid black;
			border-bottom: 199px solid black;
			border-radius: 50%;
			position: relative;
			margin: 150px auto;
			
			}

		.tj div::before {
			z-index: 999;
			content: "";
			position: absolute;
			width: 50px;
			height: 50px;
			top: 100px;
			left: 0;
			border-radius: 50%;
			border: 75px solid black;
			background-color: white;

		}

		.tj div::after {
			z-index: 999;
			content: "";
			position: absolute;
			width: 50px;
			height: 50px;
			top: 100px;
			left: 200px;
			border-radius: 50%;
			border: 75px solid white;
			background-color: black;
		}
/*
正方体
*/
	.box {
	
		position:relative;
		width: 200px;
		margin: 100px auto;
		text-align: center;
		line-height: 300px;
		transform-style: preserve-3d;
		-webkit-transform-style:preserve-3d;
	
        -webkit-backface-visibility:visible;
        -webkit-animation: rotate 10s infinite;

        animation-timing-function: linear;
        transform-origin: 50% 50% 0;
		

	}
		.faces {
			transform: scale(.25);
			width: 400px;
			height: 400px;
			display: inline-block;
			position:absolute;
			font-size: 50px;
			opacity: .9;
			border: 3px dashed  black;
			 border-radius: 5%;
			-webkit-animation: colort 20s infinite;
			
		}
		#f1 {
			/*background-color:yellow;*/ 
			transform:translate3d(0,0,200px); 
			opacity: 0.3;
			
			
			}
		#x1 {
			/*background-color:yellow; */
			transform:translate3d(0,0,200px); 
			border: 1px solid black ;
			background-color: red;
			transition: 10s;
			-webkit-animation: rotatex 10s infinite;
			border-radius: 50%;

	

		}
		#f2 {
			/*background-color: #D1EEEE;*/
			transform: rotate3d(0,1,0,-90deg) translate3d(0,0,200px); 
		}
		#f3 {
			/*background-color: #66CD00;*/
			transform: rotate3d(0,1,0,90deg) translate3d(0,0,200px); 
		}
        #f4 {
        	/*background-color: #262626;*/
        	transform: rotate3d(1,0,0,-90deg) translate3d(0,0,200px); 


        }
        #f5 {
        	/*background-color: #551A8B;*/

        	transform: rotate3d(1,0,0,90deg) translate3d(0,0,200px); 


        }
        #f6 {
        	/*background-color: #556B2F;*/
        	transform:  rotateY(-180deg) translate3d(0,0,200px); 

        	
        }
        .x2 {
			width: 67%;
			height: 67%;
			position: absolute;
			top: 65px;
			left: 65px;
			border: 1px solid black ;
			border-radius: 49%;
			z-index: 2;
		}

		.x3 {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 175px;
			left: 175px;
			background-color: black;
			border-radius: 50%;

		}


		#x1 .d1 {
			position: absolute;
			width: 40px;
			height: 80px;
			top: 25px;
			left: 160px;
			background-color: red;
			border: 1px solid black;
			border-left: 39px solid black;
			border-right-color: red;
			border-radius: 50%;
			transform: rotate(30deg);
		}
		
		#x1 .d1::before{
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			top: 0px;
			left: -20px;
			border-radius: 50%;
			border: 10px solid red;
			background-color: red;
		}
		#x1 .d1::after{
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			top: 40px;
			left: -20px;
			border-radius: 50%;
			border: 10px solid black;
			background-color: black;
		}

		
		#x1 .d2 {
			position: absolute;
			width: 40px;
			height: 80px;
			top: 252px;
			left: 267px;
			background-color: red;
			border: 1px solid black;
			border-left: 39px solid black;
			border-right-color: red;
			border-radius: 50%;
			transform: rotate(168deg);
		}
		
		#x1 .d2::before{
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			top: 0px;
			left: -20px;
			border-radius: 50%;
			border: 10px solid red;
			background-color: red;
		}
		#x1 .d2::after{
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			top: 40px;
			left: -20px;
			border-radius: 50%;
			border: 10px solid black;
			background-color: black;
		}


	#x1 .d3 {
			position: absolute;
			width: 40px;
			height: 80px;
			top: 245px;
			left: 48px;
			background-color: red;
			border: 1px solid black;
			border-left: 39px solid black;
			border-right-color: red;
			border-radius: 50%;
			transform: rotate(285deg);
		}
		
		#x1 .d3::before{
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			top: 0px;
			left: -20px;
			border-radius: 50%;
			border: 10px solid red;
			background-color: red;
		}
		#x1 .d3::after{
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			top: 40px;
			left: -20px;
			border-radius: 50%;
			border: 10px solid black;
			background-color: black;
		}


        @keyframes rotate {
        	0%{
        		transform: rotateX(0deg) rotateY(0deg) ;
        	}
        	12% {
        		transform: rotateX(45deg) rotateY(45deg);
        	}
       		25% {
        		transform: rotateX(-45deg) rotateY(180deg);
        	}
        	37% {	
        		transform: rotateX(0deg) rotateY(360deg);
        	}
        	50% {
        		transform: rotateX(180deg) rotateY(360deg);

        	}
        	62% {
        		transform: rotateX(360deg) rotateY(180deg);
        	}
        	75% {
        		transform: rotateX(180deg) rotateY(180deg);
        	}
        	87% {
        		transform: rotateX(-45deg) rotateY(45deg);
        	}

        	100% {
        		transform: rotateX(0deg) rotateY(0deg);
        	}
        	
        }
       
        	 @keyframes rotatex {
        	 	0% {
        	 		transform: rotate(0deg);

        	 	}
        	 	50% {
        	 		transform: rotate(1800deg);

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


	.scale {

			transform: scale(.25);
		
	}

	.anima {
	animation: myscale 10s infinite;
}
	@keyframes myscale {
			0% {
        	 		transform: scale(.001);

        	}

        	20% {
        	 		transform: scale(.001);

        	}
        	50% {
        	 		transform: scale(.9);

        	 	}
        	90% {
        	 		transform: scale(.001);

        	}

    	 	100% {
        	 		transform: scale(0.01);

        	 	}
	}

.ti {
display:none;
}
.box{
display:none;
}