.eacde-user-b1 { position: relative; width: 30vh; height: 30vh; background: url(../img/lot_nouser.jpg) center center no-repeat; background-size: contain; margin: 15px auto; overflow: visible; border: 6px solid rgba(255,255,255,1); border-radius: 100%; }
.eacde-user-b1:before { content: ""; position: absolute; top: -15%; left: -15%; right: -15%; bottom: -15%; display: block; background: url(../img/b002.png) no-repeat; background-size: 100% 100%; opacity: 1; border-radius: 100%; -webkit-animation: cjout2 2s -3s linear infinite; }
.eacde-user-b1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    box-shadow: 0 0 100px 60px #03a9f4;
    opacity: 1;
    z-index: -1;
    border-radius: 100%;
    -webkit-animation: cjout 4s 0s linear infinite;
}

.eacde-user-b2 {
	position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(../img/lot_nouser.jpg) center center no-repeat;
    background-size: contain;
}

.eacde-user-b2:before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    display: block;
    background: url(../img/b001.png) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    border-radius: 100%;
    -webkit-animation: cjout2 2s -3s linear infinite;
}

.eacde-user-y1 { position: relative; width: 30vh; height: 30vh; background: url(../img/lot_nouser.jpg) center center no-repeat; background-size: contain; margin: 15px auto; overflow: visible; border: 6px solid rgba(255,255,255,1); border-radius: 100%; }
.eacde-user-y1:before { content: ""; position: absolute; top: -15%; left: -15%; right: -15%; bottom: -15%; display: block; background: url(../img/y002.png) no-repeat; background-size: 100% 100%; opacity: 1; border-radius: 100%; -webkit-animation: cjout2 2s -3s linear infinite; }
.eacde-user-y1:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; box-shadow: 0 0 100px 60px rgba(255, 235, 59, 1); opacity: 1; z-index: -1; border-radius: 100%; -webkit-animation: cjout 4s 0s linear infinite; }


.eacde-user-y2 {
	position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(../img/lot_nouser.jpg) center center no-repeat;
    background-size: contain;
}

.eacde-user-y2:before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    display: block;
    background: url(../img/y001.png) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    border-radius: 100%;
    -webkit-animation: cjout2 2s -3s linear infinite;
}

.eacde-user-y3 { position: relative; width: 180px; height: 180px; background: url(../img/lot_nouser.jpg) center center no-repeat; background-size: contain; margin: 15px auto; overflow: visible; border: 3px solid rgba(255,255,255,1); border-radius: 100%; }
.eacde-user-y3:before { content: ""; position: absolute; top: -12%; left: -12%; right: -12%; bottom: -12%; display: block; background: url(../img/y001.png) no-repeat; background-size: 100% 100%; opacity: 1; border-radius: 100%; -webkit-animation: cjout2 2s -3s linear infinite; }


@-webkit-keyframes cjout3 { 
	0% {
	-webkit-transform: rotateZ(0deg);
	}
	100% {
	-webkit-transform: rotateZ(360deg);
	}
}

@-webkit-keyframes cjout2 { 
	0% {
	-webkit-transform: rotateZ(0deg);
	}
	100% {
	-webkit-transform: rotateZ(-360deg);
	}
}

@-webkit-keyframes cjout { 
	0% {
	opacity:0;
	}
	50% {
	opacity:1;
	}
	100% {
	opacity:0;
	}
}


.eacdebox{
	width:120px;
	height:120px;
	position: relative;
	margin: 0px auto;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:eacdemove 8s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:10px;
	top:10px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
	border-radius:3px;
	background-size:contain !important;
	background-repeat:no-repeat !important;
	background-position:center !important;
	background-color:rgba(51,204,255,0.5) !important;
	list-style: none;
}
.minbox li:nth-child(1){
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	-webkit-transform:rotateY(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 120px;
	height: 120px;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transform-style: preserve-3d;
}
.maxbox li{
	width: 120px;
	height: 120px;
	background: #fff;
	border:1px solid #ccc;
	border-radius:5px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.1;
	list-style: none;
	-webkit-transition:all 1s ease;
}
.maxbox li{
		width: 120px;
		height: 120px;
		background: #fff;
		border:1px solid #ccc;
		border-radius:5px;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0.1;
		-webkit-transition:all 0.5s ease;
	}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(60px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(60px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(60px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(60px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(60px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(60px);
}
.eacdebox:hover ol li:nth-child(1){
	-webkit-transform:translateZ(80px);
}
.eacdebox:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(80px);
}
.eacdebox:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(80px);
}
.eacdebox:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(80px);
}
.eacdebox:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(80px);
}
.eacdebox:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(80px);
}
	
@keyframes eacdemove{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

.eacde-ellipse{
	position:absolute;
	z-index:-10;
	top:-60px;
	left:50%;
	width:300px;
	height:300px;
	margin-left:-150px;
	transform: rotateX(70deg);
}

.eacde-ellipse:before { content: ""; position: absolute; top: -15%; left: -15%; right: -15%; bottom: -15%; display: block; background:url(../img/hx.png) no-repeat; background-size: 100% 100%; opacity: 1; border-radius: 100%; -webkit-animation: cjout3 3s -3s linear infinite; }
.eacde-ellipse:after{
	content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; box-shadow: 0 0 30px 10px rgba(0,255,255,0.7); opacity: 1; z-index: -1; border-radius: 100%; -webkit-animation: cjout 4s 0s linear infinite;
}