body{
    font-size: 1.5em;
    line-height: 1em;
    font-family: "微軟正黑體" ,arial;
    background-position: center top,3px 0;
    background-size: 1920px,40px;
    background-color: #fff;
    color: #000;
    background-image: url(images/background2.jpg),url(images/background3.gif);
    background-repeat: no-repeat,repeat;
}

.p0{
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
    margin-top: -23%;
}


.copyright{
    font-size: 9px;
    text-align: center;
    color: #D4D4D4;
}

.toptxt{
    font-size: 1.5em;
    color: #FFFFFF;
    line-height: 1.5em;
    padding: 15px;
    margin-top: 20px;
	margin-bottom: 20px;
}


.toptxt2{
    font-size: 1.8em;
    color: #ff0000;
    padding: 15px;
    margin-top: 20px;
    line-height: 1.5em;
}

.col-sm-4{
	text-align: center;
	line-height: 1.5em;
	color: #000;

}
.col-sm-4 img{
	width: 100%;
	border-radius: 15px;
	border: 1px solid #999;
}
.su{
	text-align: center;
	background-color: #fff;
	padding: 1px;
	margin-bottom: 30px;
}
.note{
    font-size: 11px;
    line-height: 1.5em;
    margin: 10px 20px 20px 20px;
    color: #909090;
}
.toptxt a:link {
	color: #9d2100;
	text-decoration: none;
}
.toptxt a:visited {
	color: #F00;
	text-decoration: none;
}
.toptxt a:hover {
	color: #9d2100;
	text-decoration: none;
}
.footer-img{
	width: 100%;
}

.col-xs-6{
	padding-bottom: 20px;
}
.mb20{
	margin-bottom: 20px;
}
.winner{
	text-align: center;
	background-color: #fff;
	border-radius: 15px;
	font-size: 1.75em;
	line-height: 1em;
	padding-top: 30px;
	padding-bottom: 20px;
}
.mv{  
	background-color: #f3c5cb;
	margin-bottom: 20px;

}
.topbg{
	text-align: center;

}

.login-bg{

    text-align: center;
}

.w-text01{
    color: #fff;
    line-height: 1.2em;
    text-align: center;
}

.w-text01 p {
		margin: 3% 0 10% 0;
}

.games{
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: 431px;
    position: relative;
}

.sprite {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z0.png');
    z-index: 1;
}

.off {
    display: none;	
}

.spriteA {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z1.png');
    z-index: 1;
}

.spriteB {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z2.png');
    z-index: 1;
}

.spriteC {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z3.png');
    z-index: 1;
}

.spriteD {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z4.png');
    z-index: 1;
}

.spriteE {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z5.png');
    z-index: 1;
}

.spriteF {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z6.png');
    z-index: 1;
}

.spriteG {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z7.png');
    z-index: 1;
}

.spriteH {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z8.png');
    z-index: 1;
}

.spriteI {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z9.png');
    z-index: 1;
}

.spriteJ {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z10.png');
    z-index: 1;
}

.spriteK {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z11.png');
    z-index: 1;
}

.spriteL {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/Z12.png');
    z-index: 1;
}

.sprite2 {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-image: url('images/A1.png');
    z-index: 1;
}

.sprite2:hover{
  animation-play-state:paused;
}



.sprite4 {
    width: 700px;
    height: 431px;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url('images/B1.png');
    z-index: 300;
}


.sprite4:hover{
    background-image: url('images/B2.png');
}







@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.delay-0s {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}


.animated.delay-1s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.animated.delay-2s {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.animated.delay-4s {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.animated.delay-5s {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.animated.delay-6s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-7s {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

.animated.delay-8s {
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}