.loginLogo{
	touch-action: manipulation;
	position: absolute;
    animation: loginLogoPlayX 1s steps(3) infinite,
                 loginLogoPlayY 3s steps(1) infinite;
}
/* 
#promo {
    background: url('//cdn.staticresourcecdn.com/h5lobby/live/common1/template1/images/promotion/promo2.jpg?v=1.0.965') center/contain no-repeat !important;
}
 */
/* 
#effectCanvas {
	display: block!important;
} 
 */

@media screen and (orientation:landscape) {
/* 
.wrapper{
	background: url(//cdn.staticresourcecdn.com/h5lobby/staging/common1/template1/images/bg_cny.jpg) left/cover no-repeat !important;
}
 */

.loginLogo{
    top: -13%;
    left: 50%;
    width: 60vh;
    height: 25.4vh;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: url('Images?image=logo.png') left top/180vh 50.8vh no-repeat;
}
@keyframes loginLogoPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: calc(-180vh);}
    }
@keyframes loginLogoPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: calc(-50.8vh);}
    }
.logoTopLeft{
	position: absolute;
	top: 48%;
	left: 43%;
	width: 30vh;
	height: 12.6vh;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: url('Images?image=logo.png') left top/90vh 25.2vh no-repeat;
	animation: logoPlayX 1s steps(3) infinite,
                 logoPlayY 3s steps(1) infinite;
}
@keyframes logoPlayX {
	from {background-position-x: 0px;}
	to {background-position-x: -90vh;}
}
@keyframes logoPlayY {
	from {background-position-y: 0px;}
	to {background-position-y: -25.2vh;}
}
#annoucement{
	bottom:-2vh !important;
	left: 64% !important;
	width: calc(100% - 38vh) !important;
}

#version{
	right:1vh!important;
	top:5.5vh!important;
	font-size: 2vh!important;
}

}

@media screen and (orientation:portrait) {
/* 
.wrapper{
	background: url(//cdn.staticresourcecdn.com/h5lobby/staging/common1/template1/images/bg_cny.jpg) center/cover no-repeat !important;
}
 */
.loginLogo{
    top: -30%;
    left: 50%;
    width: 80vw;
    height: 33.7vw;
     -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, -0%);
    background: url('Images?image=logo.png') left top/240vw 67.4vw no-repeat;
}
@keyframes loginLogoPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: calc(-240vw);}
    }
@keyframes loginLogoPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: calc(-67.4vw);}
    }
.logo{
	position: absolute;
    top: -3vw;
    left: calc(50% - 15vw);
    width: 28vw;
    height: 11.8vw;
    background: url('Images?image=logo.png') left top/84vw 23.6vw no-repeat;
    animation: logoPlayX 1s steps(3) infinite,
                 logoPlayY 3s steps(1) infinite;
}
@keyframes logoPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: -84vw;}
    }
@keyframes logoPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: -23.6vw;}
    }
#version{
	top:7vw !important;
}

}