.hoverbox {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* width: 438px; height: 438px; */
	width: 350px; height: 350px;
    background: url('/assets/javis/base.png')
    center center / 100% no-repeat;
}

.hoverbox .screen {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
}

.hoverbox .screen [class*='hud']{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity:0;
    /* opacity:1; */
    transition: all 1s;
}

.hud01 {
}

.hoverbox .screen:hover [class*='hud'] {opacity:1;}
.hoverbox .screen [class*='hud'] img {max-width: 100%;}

/* rotate 속성으로 1바퀴 돌아가는 키프레임 */
@keyframes rolling01 {
	0% {transform:translate(-50%,-50%) rotate(0);}
	100% {transform:translate(-50%,-50%) rotate(360deg);}
}
/* rotate 속성으로 1바퀴 돌아가는 키프레임 [반시계 방향]*/
@keyframes rolling01-ban {
	0% {transform:translate(-50%,-50%) rotate(0);}
	100% {transform:translate(-50%,-50%) rotate(-360deg);}
}
/* rotate 속성으로 1바퀴 돌아가는데, 초반에는 빠르게 돌다가 천천히 돌아가는 키프레임 */
@keyframes rolling02 {
	0% {transform:translate(-50%,-50%) rotate(0);}
	30% {transform:translate(-50%,-50%) rotate(200deg);}
	100% {transform:translate(-50%,-50%) rotate(360deg);}
}
/* rotate 속성으로 1바퀴 돌리고 중간에 크기도 변화기시키는 키프레임  scale()의 1이 기본값!! 값이 1보다 작으면 크기가 작아지고 1보다 값이 크면 크기가 커짐 */
@keyframes rollandscale {
	0% {transform:translate(-50%,-50%) rotate(0) scale(1);}
	35% {transform:translate(-50%,-50%) rotate(360deg) scale(1);}
	40% {transform:translate(-50%,-50%) rotate(360deg) scale(.5);}
	60% {transform:translate(-50%,-50%) rotate(0deg) scale(.5);}
	65% {transform:translate(-50%,-50%) rotate(0deg) scale(1);}
	100% {transform:translate(-50%,-50%) rotate(360deg)  scale(1);}
}
@keyframes rollandscale {
	0% {transform:translate(-50%,-50%) rotate(0) scale(1);}
	35% {transform:translate(-50%,-50%) rotate(360deg) scale(1);}
	40% {transform:translate(-50%,-50%) rotate(360deg) scale(.5);}
	60% {transform:translate(-50%,-50%) rotate(0deg) scale(.5);}
	65% {transform:translate(-50%,-50%) rotate(0deg) scale(1);}
	100% {transform:translate(-50%,-50%) rotate(360deg)  scale(1);}
}
@keyframes rollandscale-ban {
	0% {transform:translate(-50%,-50%) rotate(0) scale(1);}
	35% {transform:translate(-50%,-50%) rotate(-360deg) scale(1);}
	40% {transform:translate(-50%,-50%) rotate(-360deg) scale(.5);}
	60% {transform:translate(-50%,-50%) rotate(0deg) scale(.5);}
	65% {transform:translate(-50%,-50%) rotate(0deg) scale(1);}
	100% {transform:translate(-50%,-50%) rotate(-360deg)  scale(1);}
}

/*큰원*/
.hoverbox .screen .hud01-circle01 {animation:rolling01-ban 15s linear infinite;width:80%;}
.hoverbox .screen .hud01-circle02 {animation:rolling01 10s linear infinite;width:80%;}
.hoverbox .screen .hud01-circle03 {animation:rolling01-ban 10s linear infinite;width:80%;}

/*중간원*/
.hoverbox .screen .hud01-5 {animation:rolling01 5s linear infinite;width:80%;}
.hoverbox .screen .hud01-7 {animation:rolling01 7s linear infinite;width:80%;}
.hoverbox .screen .hud02 {animation:rolling02 10s infinite alternate;}
.hoverbox .screen .hud03 {animation:rollandscale 3s infinite;}
.hoverbox .screen .hud04 {}
.hoverbox .screen .hud05 {animation:rolling02 6s infinite alternate;}
.hoverbox .screen .hud06 {top:22%;}


.hoverbox .screen .hud11-ban {animation:rolling01-ban 7s linear infinite;}
.hoverbox .screen .hud11 {animation:rolling01 7s linear infinite;}
.hoverbox .screen .hud03-ban {animation:rollandscale-ban 10s linear infinite;}
.hoverbox .screen .hud04-ban {animation: rolling01 10s linear infinite;}