@charset "utf-8";
/* CSS Document */
.PB{background: url(img/S11.png) no-repeat -9999px -9999px;
    background: url(img/S15.png) no-repeat -9999px -9999px,
            url(img/S22.png) no-repeat -9999px -9999px,
            url(img/S33.png) no-repeat -9999px -9999px,
            url(img/S44.png) no-repeat -9999px -9999px,
			url(img/S55.png) no-repeat -9999px -9999px,
            url(img/S66.png) no-repeat -9999px -9999px;}
.p{background: url(img/w7h01.png) no-repeat -9999px -9999px;
    background: url(img/w7h02.png) no-repeat -9999px -9999px,
            url(img/w7h03.png) no-repeat -9999px -9999px,
            url(img/w7h04.png) no-repeat -9999px -9999px,
            url(img/w7h05.png) no-repeat -9999px -9999px,
            url(img/w7h06.png) no-repeat -9999px -9999px,
			url(img/w7h07.png) no-repeat -9999px -9999px,
			url(img/w7h08.png) no-repeat -9999px -9999px,
			url(img/w7h09.png) no-repeat -9999px -9999px,
			url(img/w7h10.png) no-repeat -9999px -9999px,
		
			url(img/wb7h01.png) no-repeat -9999px -9999px,
			url(img/wb7h02.png) no-repeat -9999px -9999px,
            url(img/wb7h03.png) no-repeat -9999px -9999px,
            url(img/wb7h04.png) no-repeat -9999px -9999px,
            url(img/wb7h05.png) no-repeat -9999px -9999px,
            url(img/wb7h06.png) no-repeat -9999px -9999px,
			url(img/wb7h07.png) no-repeat -9999px -9999px,
			url(img/wb7h08.png) no-repeat -9999px -9999px,
			url(img/wb7h09.png) no-repeat -9999px -9999px,
			url(img/wb7h10.png) no-repeat -9999px -9999px
		;}
#xbox {position: absolute; width: 100em;height: 100em;min-height: 512px;min-width: 512px;top:50%;left: 50%;margin: -50em;}
#book{height:90%;width:90%;position:absolute;left:4%;top:5%;}
#a{height: 21.6%;width: 23.2%;position: absolute;left:43%; top:72.4%;display: block;background-color: antiquewhite;opacity: 0; z-index: 3;}
#b{height: 100%;width: 100%;position: absolute;left:0%; top:0%;background-size: contain;background-repeat: no-repeat;z-index: 2;animation:b 0.5s ease 0s 1 normal paused forwards;}
@keyframes b { 0%  {background-image: url(img/S11.png);}  20% {background-image: url(img/S15.png);} 40%  { background-image: url(img/S22.png);} 60%  {background-image: url(img/S33.png);} 70%  {background-image: url(img/S44.png);} 90% {background-image: url(img/S55.png);} 100% {background-image: url(img/S66.png);}}
@-moz-keyframes imga {}/* Firefox */@-webkit-keyframes imga {}/* Safari and Chrome */@-o-keyframes imga {}/* Opera */

#c{height: 20%;width: 20%;position: absolute;left:27%; top:47%;background-color:brown;display: none;
	animation:c 1s ease-out 0.5s 1 normal paused forwards;-moz-animation:c 1s ease-out 0.5s 1 normal paused forwards; /* Firefox */-webkit-animation:c 1s ease-out 0.5s 1 normal paused forwards; /* Safari and Chrome */-o-animation:c 1s ease-out 0.5s 1 normal paused forwards; /* Opera */}
@keyframes c { 0%  {left: 50%;top: 50%;background-color: dodgerblue;} 25% {background-color: hotpink;} 50% {background-color: darkorange;} 75% {background-color: greenyellow;} 100% {left: 30%;top: 30%;background-color: darkgreen;;}}
@-moz-keyframes c {}/* Firefox */
@-webkit-keyframes c { 0%  {left: 50%;top: 50%;background-color: dodgerblue;} 25% {background-color: hotpink;} 50% {background-color: darkorange;} 75% {background-color: greenyellow;} 100% {left: 30%;top: 30%;background-color: darkgreen;}}/* Safari and Chrome */
@-o-keyframes imga {}/* Opera */



#d {height: 35.6%;width: 17.8%;left: 18.2%;top: 31.7%;position: absolute; z-index: 2;display:none;}
#d a:link{height: 100%;width: 100%;display: block;}
#d a:hover {background-size: contain;background-repeat: no-repeat; animation:dh 1s ease 0s 1 normal running forwards;-webkit-animation:dh 1s ease 0s 1 normal running forwards;}
@keyframes dh {0%{}10%{background-image: url(img/wb7h01.png);}20%{background-image: url(img/wb7h02.png);}30%{background-image: url(img/wb7h03.png);}40%{background-image: url(img/wb7h04.png);}50%{background-image: url(img/wb7h05.png);}60%{background-image: url(img/wb7h06.png);}70%{background-image: url(img/wb7h07.png);}80%{background-image: url(img/wb7h08.png);}90%{background-image: url(img/wb7h09.png);}100%{background-image: url(img/wb7h10.png);}}


#d2 {height: 31.56%;width: 19%;left: 3.5%;top: 24.55%;position: absolute; z-index: 2;display:none;}
#d2 a:link{height: 100%;width: 100%;display: block;}
#d2 a:hover {background-size: contain;background-repeat: no-repeat; animation:dh2 1s ease 0s 1 normal running forwards;-webkit-animation:dh2 1s ease 0s 1 normal running forwards;}
@keyframes dh2 {0%{}10%{background-image: url(img/w7h01.png);}20%{background-image: url(img/w7h02.png);}30%{background-image: url(img/w7h03.png);}40%{background-image: url(img/w7h04.png);}50%{background-image: url(img/w7h05.png);}60%{background-image: url(img/w7h06.png);}70%{background-image: url(img/w7h07.png);}80%{background-image: url(img/w7h08.png);}90%{background-image: url(img/w7h09.png);}100%{background-image: url(img/w7h10.png);}}

#J {height: 42%;width: 31.6%;left: 70.9%;top: 20.79%;position: absolute; z-index: 2;display:none;}
#J a:link{height: 100%;width: 100%;display: block;}
#J a:hover {background-size: contain;background-repeat: no-repeat; animation:jh 1s ease 0s 1 normal running forwards;}
@keyframes jh {0%{background-image: url(img/JS10.png);}100%{background-image: url(img/JS10.png);}}

#H {height: 32%;width: 20%;left: 44.2%;top: 18%;position: absolute; z-index: 2;display:none;}
#H a:link{height: 100%;width: 100%;display: block;}
#H a:hover {background-size: contain;background-repeat: no-repeat; animation:hh 1s ease 0s 1 normal running forwards;}
@keyframes hh {0%{background-image: url(img/0.png);}100%{background-image: url(img/0.png);}}

#X{animation:xx 4s ease 0s 1 normal paused forwards;}
@keyframes xx {0%{opacity: 0;}20%{opacity: 0;}100%{opacity: 1;}}
.x1 {position: absolute; width: 8em;min-width: 60px;height: auto; border-bottom:1px solid #BBBBBB;margin: 0;} 
.x2 {position: absolute; width: 10em;min-width: 60px;height: auto; border-bottom:1px solid #BBBBBB;margin: 0;} 
.x3 {position: absolute; width: 10em;min-width: 60px;height: auto; border-bottom:1px solid #BBBBBB;margin: 0;transform: rotate(90deg)}
h4{text-align:center;color: #BBBBBB;font-size: 1.8em;font-weight: lighter;margin:0;}

.the7th {bottom: 10px;font-size: 12px;left: 0;position: fixed;text-align: center; width: 100%;color: #fff;opacity: 0.4; z-index: 900;}
    .the7th a {color: #fff;cursor: pointer;display: inline-block; text-decoration: none;margin-top: 5px; width: auto;}
@media(min-aspect-ratio:1/1){
	body{font-size: 1vh;}
	#X{font-size: 1vh;}
	.x1 {margin: 0;top:50%;left: 0%;} 
	.x2 {margin: 0;top:54%;right: 0%;} 
	.x3 {margin: 0;top:10%;left: 50%;}
}
@media(max-aspect-ratio:1/1){
	body{font-size: 1vw;}
	#X{font-size: 1vw;}
	.x1 {margin: 0;top:58%;left: 4%;} 
	.x2 {margin: 0;top:64%;right: 2%;} 
	.x3 {margin: 0;top:4%;left: 50%;}
}