@charset "UTF-8";
.footer .box .fb, .controlBox .videoBox a, .controlBox .logo, .controlBox .copyright, .controlBox .down, .topFrame .dirty, .page00 .detail h1, .page00 .detail .subTitle, .page01 .detail h2, .bg-cloud, .page02 .detail h2, .page02 .showBox .monster, .page02 .showBox .frontPic, .page03 .detail h2, .page03 .item_cat { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: transparent; background-repeat: no-repeat; user-select: none; -ms-user-select: none; -webkit-user-select: none; }
.controlBox .sound a, .controlBox .sound a:before, .controlBox .sound a:after, .controlBox .eventMenu li a, .controlBox .eventMenu .comingSoon:hover:after { display: block; color: #fff; }
.footer .box .fb, .controlBox, .controlBox .join, .controlBox .videoBox, .controlBox .sound, .controlBox .sound a:before, .controlBox .sound a:after, .controlBox .eventMenu, .controlBox .eventMenu li a:before, .controlBox .eventMenu li a:after, .controlBox .eventMenu .comingSoon:hover:before, .controlBox .eventMenu .comingSoon:hover:after, .controlBox .copyright, .controlBox .down:before, .controlBox .down:after, #myVideo, .topFrame, .topFrame .pattern, .topFrame .dirty, .showBox, .bg-cloud { position: absolute; }
 @keyframes flash { 0% {
opacity: .3;
}
 50% {
opacity: .7;
}
 100% {
opacity: .3;
}
}
@keyframes flashBG { 0% {
background-color: rgba(255, 255, 255, 0.15);
}
/*30% {
background-color: rgba(255, 255, 255, 0.75);
}*/
 100% {
background-color: rgba(255, 255, 255, 0.55);
}
}
@keyframes pause { 0% {
transform: rotate(45deg);
background-color: rgba(255, 255, 255, 0.8);
}
 100% {
background-color: rgba(255, 255, 255, 0);
}
}
@keyframes flash_2 { 0% {
top: 13px;
left: 13px;
opacity: .3;
}
 50% {
top: 14px;
left: 14px;
opacity: .7;
}
 100% {
top: 13px;
left: 13px;
opacity: .3;
}
}
.container { min-width: 960px; position: relative; }
.content { width: 100%; min-width: 980px; }
.controlBox { width: 100%; height: 0; z-index: 5555; }
.controlBox .topbg { width: 100%; height: 80px; background-color: rgba(0, 0, 0, .65); position: absolute; }
.controlBox a { color: #fff; font-size: 13px; line-height: 20px; text-shadow: 0 0 5px rgba(0, 0, 0, .85); letter-spacing: 3px;}
.controlBox a:hover { color: #fff; text-decoration:none; }
.controlBox .navbar { width: 130px; margin: 0 auto 10px; }
.controlBox .fb-page { /*top: 63%;*/ top: 600px; right: 50px; position: absolute; width: 200px; }
.controlBox .navbar li { margin-bottom: 3px; cursor: pointer; padding: 0px; background-color: #000; }
.controlBox .navbar li a { display: block; width: 100%; height: 80px; text-indent: -9999px; background-image: url(../images/slider.jpg); background-repeat: no-repeat; opacity: .35; transition: opacity .2s ease-in-out; }
.controlBox .navbar li.active a, .controlBox .navbar li a:hover { opacity: 1; }
.controlBox .navbar li.navbar-1 a { background-position: 0px 0px; }
.controlBox .navbar li.navbar-2 a { background-position: 0px -100px; }
.controlBox .navbar li.navbar-3 a { background-position: 0px -200px; }
.controlBox .navbar li.navbar-4 a { background-position: 0px -300px; }
.controlBox .navbar li.navbar-5 a { background-position: 0px -400px; }
.controlBox .navbar li.navbar-6 a { background-position: 0px -500px; }
.controlBox .navbar li.navbar-7 a { background-position: 0px -600px; }
.controlBox .navbar li.navbar-8 a { background-position: 0px -700px; }
.controlBox .videoBox { top: 240px; left: 15px; cursor: pointer; height: 140px; width: 208px; transition: all 1s; background-position: -4040px 0; }
.controlBox .join { top: 240px; left: 15px; cursor: pointer; height: 200px; width: 210px; transition: all 1s; background-position: -2210px 0; padding-top: 117px; }
.controlBox .join a { font-size: 16px; height: 40px; width: 70%; display: block; margin: 0 auto 4px; text-align: center; line-height: 40px; background-color: rgba(255, 255, 255, 0.15); text-shadow: 0 0 5px rgba(0, 0, 0, .85); border: 1px rgba(255, 255, 255, 0) solid; }
.controlBox .join a:hover { animation: flashBG .2s ease-out; background-color: rgba(255, 255, 255, .55); }
.controlBox .videoBox a { width: 100%; height: 100%; }
.controlBox .black-65 { position: absolute; }
.controlBox .black-65, .controlBox .sound { top: 30px; right: 50px; cursor: pointer; }
.controlBox .sound a { position: relative; width: 70px; height: 20px; line-height: 20px; color: #fff; font-size: 10px; letter-spacing: 1px; }
.controlBox .sound a:before { content: ""; right: 0; top: 2px; width: 15px; height: 15px; border: 1px #fff solid; }
.controlBox .sound a:after { content: ""; right: 3px; top: 5px; width: 9px; height: 9px; background-color: white; }
.controlBox .sound a.play:before { animation: flashBG .2s ease-out; background-color: rgba(255, 255, 255, 0.3); }
.controlBox .sound a.play:after { animation-delay: 0.5s; animation: flashBG .2s ease-out; background-color: white; }
.controlBox .sound a.pause:after { transform-origin: 50%; transform: scale(1.5, 0.2); animation: pause .2s ease-out; }
.controlBox .logo { height: 100px; width: 180px; }
.controlBox .logo a { display: block; height: 100%; width: 100%; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: 99%; }
.controlBox .gameMenu { width: 150px; margin: 0 auto 6px; }
.controlBox .gameMenu li { margin-bottom: 3px; }
.controlBox .gameMenu li a { display: block; padding: 7px 0px 6px; line-height: 1; background-color: rgba(255, 255, 255, 0.15); text-shadow: 0 0 5px rgba(0, 0, 0, .85); border: 1px rgba(255, 255, 255, 0) solid; text-align: center; }
.controlBox .gameMenu li a:hover { animation: flashBG .2s ease-out; background-color: rgba(255, 255, 255, .55); }
.controlBox .eventMenu { top: 230px; background-position: -1668px 0; height: 574px; width: 267px; padding-top: 20px; padding-left: 15px; }
.controlBox .eventMenu li { margin-bottom: 10px; }
.controlBox .eventMenu li a { position: relative; width: 236px; height: 110px; font-size: 16px; line-height: 36px; text-align: center; line-height: 1.2; padding-top: 40px; background-color: rgba(255, 255, 255, 0.3); }
.controlBox .eventMenu li a:before { content: ''; display: block; top: 10px; left: 20px; }
.controlBox .eventMenu li a:after { content: ''; display: block; width: 246px; height: 120px; top: -5px; left: -5px; }
.controlBox .eventMenu li a:hover:after { background-color: #fff; animation: flash 0.2s ease-out; opacity: .3; }
.controlBox .eventMenu li:nth-child(1) { }
.controlBox .eventMenu li:nth-child(1) a:before { background-position: -150px 0; height: 20px; width: 70px; }
.controlBox .eventMenu li:nth-child(2) { }
.controlBox .eventMenu li:nth-child(2) a:before { background-position: -270px 0; height: 20px; width: 70px; }
.controlBox .eventMenu li:nth-child(3) { }
.controlBox .eventMenu li:nth-child(3) a:before { background-position: -390px 0; height: 20px; width: 70px; }
.controlBox .eventMenu .comingSoon { position: relative; }
.controlBox .eventMenu .comingSoon:hover { cursor: pointer; }
.controlBox .eventMenu .comingSoon:hover:before { content: ''; display: block; width: 120px; height: 120px; top: -10px; left: 7px; background-color: rgba(0, 0, 0, .85); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 8888; }
.controlBox .eventMenu .comingSoon:hover:after { content: "敬請期待"; width: 100px; height: 100px; top: 39px; left: 28px; letter-spacing: 1px; font-size: 20px; z-index: 8889; }
.controlBox .copyright { width: 100px; height: 20px; bottom: 0; left: 0; cursor: pointer; background-position: 0 0; height: 25px; width: 100px; }
#common_nav { z-index: 2000; position: fixed; left: 0; top: 0; width: 180px; height: 100%; background-image: url(../images/bg_nav_pattern.png); background-position: left top; background-repeat: repeat-y; }
/*************************************** .section **********************************************/