#container{position: absolute;width:100%;height:120%; z-index: 1; left: 0px; top: 0px; min-width:320px;}
.btn{position: absolute; width: 51px; height: 51px; top: 30px; left: 50%; margin-left:-25.5px; text-align: center;border-radius:4px;box-shadow:2px 2px 2px #8b7f7f;}
.btn:hover{ cursor:pointer;}
#startbtn{ background-image:url('menu.png');}
#closebtn{ background-image:url('close.png');}
#startbtn{ z-index: 3;}
#closebtn{display: none; z-index: 4;}
#box{display: none ;position: absolute; width: 548px; height: 534px; z-index: 2; left:50%; margin-left:-274px;top:150px;border-radius:50%;}
.sball{position: absolute; width: 30px; height: 30px; z-index: 1; background-color:#ff0000;border-radius:50%;top:50%; margin-top:-15px;
left: 50%;margin-left:-15px;box-shadow:3px 3px 7px #635a5a; overflow:hidden;}
.home{position: absolute; width: 30px; height: 30px; z-index: 1; background-color:#ff0000;border-radius:50%;top:50%; margin-top:-15px; left: 50%;margin-left:-15px;
 box-shadow:3px 3px 7px #635a5a;}
#sball00{} #sball01{} #sball02{} #sball03{} #sball04{} #sball05{}
.small{position: absolute; width: 0px; height: 0px; z-index: 2; bottom:5px; left: 50%; margin-left:-25%; background-color:#ffffff;border-radius:50%;
background-repeat:no-repeat;background-size:contain;}
#small01{background-image:url('run_001.png')}
#small02{background-image:url('bk_03_009.png')}
#small03{background-image:url('PC_017_s.png')}
#small04{background-image:url('20160604_mc001_s.png')}
#small05{background-image:url('0008.png')}
.navimsg{position: absolute; display:none; width: 100%; height: 35px; z-index: 5; top: 41%; left: 0px; text-align: center;font-size: 26px; font-weight: 500;
 color:#fffcc3; text-shadow:2px 2px 3px #000000; }
.navimsg a{ text-decoration:none;font-size: 26px; font-weight: 500; color:#fffcc3; text-shadow:2px 2px 3px #000000;}
.navisub{position: absolute; width:100%; text-align:center; height: 28px; z-index: 1; left:50%; margin-left:50%; opacity:1;top: 35%;}
.navisub a{ text-decoration:none;font-size: 16px;font-weight: 600;color:#ffffff;text-shadow:1px 1px 1px #000000;}
@keyframes ball{0%{transform: translateY(-5.4%);}50%{transform: translateY(-2.7%);}100%{transform: translateY(-5.4%);}}
@keyframes ball-float{100%{transform: translateY(-5.4%);}}
@keyframes ball-lage{0%{}70%{ width:63.87%; height:65.54%;margin-left:-13.69%; margin-top:-14.05%} 100% { width:54.75%; height:56.18%;margin-left:-9.12%;
 margin-top:-9.36%; }}
@keyframes home-lage{0%{}70%{ width: 45.62%; height: 46.82%; left:27.19%;top:27.9%;} 100% { width: 36.5%; height: 37.45%; top:34.83%; left:31.75%;}}
@keyframes move-titl{0%{}80%{margin-top:-27%;}100%{ margin-top:-23%;}}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 160px; height: 160px;}100%{transform: rotateY( 360deg ); opacity:1;width: 160px; height: 160px;} }
@keyframes move-act{0%{}80%{margin-left:-55%; opacity:1;}100%{ margin-left:-50%; opacity:1;}}
.sball:hover,.sball:focus, .sball:active {cursor: pointer ; z-index:10;
animation-name: ball-float, ball,ball-lage;animation-duration: 0.3s, 1.5s,0.2s; animation-delay: 0s, 0.3s,0s;
animation-timing-function: ease-out, ease-in-out,ease-in-out; animation-iteration-count: 1, infinite,1;
animation-fill-mode: forwards;animation-direction: normal, alternate,normal;}
.sball:hover > .navisub{animation:move-act; animation-duration:0.5s; animation-timing-function:ease-in-out; animation-fill-mode: forwards;}
.sball:hover > .navimsg{animation:move-titl; animation-duration:0.5s; animation-timing-function:ease-in-out; animation-fill-mode: forwards;}
.sball:hover > .small{animation:small-ball; animation-duration:0.5s; animation-timing-function:ease-in-out; animation-fill-mode: forwards;}
.home:hover, home:focus,.home:active {cursor: pointer ; z-index:10;
animation-name: ball-float, ball,home-lage;animation-duration: 0.3s, 1.5s,0.2s; animation-delay: 0s, 0.3s,0s;
animation-timing-function: ease-out, ease-in-out,ease-in-out; animation-iteration-count: 1, infinite,1;
animation-fill-mode: forwards;animation-direction: normal, alternate,normal;}

@media screen and (max-width: 712px){
#box{ width: 465.8px; height: 453.9px; margin-left:-232.9px;}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 136px; height: 136px;}100%{transform: rotateY( 360deg ); opacity:1;width: 136px; height: 136px;} }
}
@media screen and (max-width: 533px){
#box{ width: 416.48px; height: 405.84px; margin-left:-208.24px;}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 121.6px; height: 121.6px;}100%{transform: rotateY( 360deg ); opacity:1;width: 121.6px; height: 121.6px;} }
.small{ bottom:4px;}
}
@media screen and (max-width: 480px){
#box{ width: 372.64px; height: 363.12px; margin-left:-186.32px;}
.navimsg{ top: 38%; font-size: 24px; font-weight: 300; text-shadow:1px 1px 2px #000000;}
.navimsg a{ font-size: 24px; font-weight: 300; text-shadow:1px 1px 2px #000000;}
.navisub{ top: 32%;}
.navisub a{ font-size: 14px;font-weight: 400;}
@keyframes move-titl{0%{}80%{margin-top:-30%;}100%{ margin-top:-25%;}}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 108.8px; height: 108.8px;}100%{transform: rotateY( 360deg ); opacity:1;width: 108.8px; height: 108.8px;} }
}
@media screen and (max-width: 414px){
#box{ width: 301.4px; height: 293.7px; margin-left:-150.7px;}
.navimsg{ top: 38%;font-size: 20px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
.navimsg a{ font-size: 20px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
.navisub{ top: 30%;}
.navisub a{ font-size: 12px;font-weight: 400;}
.small{ bottom:3px;}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 88px; height: 88px;}100%{transform: rotateY( 360deg ); opacity:1;width: 88px; height: 88px;} }
}
@media screen and (max-width: 375px){
#box{ width: 251px; height: 244.57px; margin-left:-125.5px;}
.navimsg{ top: 30%;font-size: 18px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
.navimsg a{ font-size: 18px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
.small{ bottom:2px;}
@keyframes move-titl{0%{}80%{margin-top:-26%;}100%{ margin-top:-17%;}}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 73.28px; height: 73.28px;}100%{transform: rotateY( 360deg ); opacity:1;width: 73.28px; height: 73.28px;} }
}