.mainWrap{perspective:1000px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mainWrap div{transform-origin:50%}.wrapper{position:relative}.c1{width:200px;height:200px;transform-style:preserve-3d;border:1px solid #e7b439;border-radius:100%;animation:30s linear infinite rotFirst,2s forwards fadeIn;transform:rotateX(10deg)rotateY(10deg)}.c1 .c2{border:1px dashed #ffb61e;border-radius:100%;width:190px;height:190px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3{border:1px solid #ffb61e;border-radius:100%;width:180px;height:180px;animation:30s linear infinite changeColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1{border:1px dotted #ffb61e;width:120px;height:120px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .miniC{text-align:center;width:120px;height:120px;position:relative}.c1 .c2 .c3 .rect1 .miniC .box{border:1px solid #ffb61e;border-radius:100%;width:10px;height:10px;margin:4px}.c1 .c2 .c3 .rect1 .miniC .miniC1{border:3px solid #ffb61e;border-radius:100%;width:20px;height:20px;animation:30s linear infinite changeColor;position:absolute;top:-12%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .miniC .miniC2{border:3px solid #ffb61e;border-radius:100%;width:20px;height:20px;animation:30s linear infinite changeColor;position:absolute;top:50%;left:-12%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .miniC .miniC3{border:3px solid #ffb61e;border-radius:100%;width:20px;height:20px;animation:30s linear infinite changeColor;position:absolute;top:50%;left:112%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .miniC .miniC4{border:3px solid #ffb61e;border-radius:100%;width:20px;height:20px;animation:30s linear infinite changeColor;position:absolute;top:112%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .c4{border:1px dotted #ffb61e;border-radius:100%;width:120px;height:120px;animation:30s linear infinite changeColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .c4 .rect2{border:1px solid #ffb61e;width:80px;height:80px;margin:20px auto 0;animation:10s linear infinite rotminiC}.c1 .c2 .c3 .rect1 .c4 .rect3{transform-origin:50%;border:1px solid #ffb61e;width:80px;height:80px;transform:rotate(135deg)}.c1 .c2 .c3 .rect1 .c5{border:1px solid #ffb61e;border-radius:100%;width:70px;height:70px;animation:30s linear infinite changeColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1 .c2 .c3 .rect1 .c6{border:3px solid #ffb61e;border-radius:100%;width:50px;height:50px;animation:30s linear infinite changeColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(10deg)rotateY(10deg)}.c1:hover,.c1 .c2:hover,.c1 .c2 .c3:hover{cursor:pointer;transition:transform .5s ease-in-out,box-shadow .5s ease-in-out;box-shadow:0 0 20px #efb61e}@keyframes rotFirst{0%{transform:rotate(-360deg)}to{transform:rotate(0)}}@keyframes rotminiC{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}@keyframes changeColor{0%{border:3px solid #fa9642;box-shadow:0 0 70px #fa9542}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}