@font-face {
    font-family: 'latoregular';
    src: url('//cdn.staticresourcecdn.com/h5lobby/live/common1/template5/fonts/lato-regular-webfont.woff2?v=1.0.965') format('woff2'),
         url('//cdn.staticresourcecdn.com/h5lobby/live/common1/template5/fonts/lato-regular-webfont.woff?v=1.0.965') format('woff');
    font-weight: normal;
    font-style: normal;
}

.loginLogo{
	touch-action: manipulation;
	position: absolute;
    animation: loginLogoPlayX 0.5s steps(4) infinite,
                 loginLogoPlayY 1s steps(2) infinite;
}
.logoTopLeft{
	touch-action: manipulation;
	position: absolute;
    animation: logoTopLeftPlayX 0.5s steps(4) infinite,
                 logoTopLeftPlayY 1s steps(2) infinite;
}

/* 
#effectCanvas {
	display: block!important;
}
 */
@media screen and (orientation:landscape) {
/* 
.wrapper{
	background: url(//cdn.staticresourcecdn.com/h5lobby/staging/common1/template5/images/bg_cny.jpg?v=401) left/cover no-repeat !important;
}
 */
.loginLogo{
    top: -10%;
    left: 50%;
    width: 50vh;
    height: 22.3vh;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: url('Images?image=logo.png') left top/200vh 44.6vh no-repeat;
}
@keyframes loginLogoPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: calc(-200vh);}
    }
@keyframes loginLogoPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: calc(-44.6vh);}
    }
.logoTopLeft{
	position: absolute;
	top: 7vh;
	right: 5vh;
	width: 36vh;
	height: 15.9vh;
	-ms-transform: translate(-0%, -50%);
	transform: translate(-0%, -50%);
	background: url('Images?image=logo.png') left top/144vh 31.8vh no-repeat;
}
 @keyframes logoTopLeftPlayX {
	from {background-position-x: 0px;}
	to {background-position-x: -144vh;}
}
@keyframes logoTopLeftPlayY {
	from {background-position-y: 0px;}
	to {background-position-y: -31.8vh;}
}   

#version{
	right:1vh!important;
	top:-61vh!important;
	font-size: 1.5vh!important;
}

}

@media screen and (orientation:portrait) {
/* 
.wrapper{
	background: url(//cdn.staticresourcecdn.com/h5lobby/staging/common1/template5/images/bg_cny.jpg?v=401) center/cover no-repeat !important;
}
 */
.loginLogo{
    top: -30%;
    left: 50%;
    width: 65vw;
    height: 29vw;
    position: absolute;
     -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, -0%);
    background: url('Images?image=logo.png') left top/260vw  58vw no-repeat;
}
@keyframes loginLogoPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: calc(-260vw);}
    }
@keyframes loginLogoPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: calc(-58vw);}
    }
.logo{
	position: absolute;
    top: -3vw;
    left: calc(50% - 15vw);
    width: 28vw;
    height: 12.5vw;
    background: url('Images?image=logo.png') left top/112vw 25vw no-repeat;
    animation: logoPlayX 0.5s steps(4) infinite,
                 logoPlayY 1s steps(2) infinite;
}
@keyframes logoPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: -112vw;}
    }
@keyframes logoPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: -25vw;}
    }
.logoTopLeft{
	position: absolute;
	-ms-transform: translate(-0%, -50%);
	transform: translate(-0%, -50%);
	background: url('Images?image=logo.png') left top/172vw 38vw no-repeat;
}
@keyframes logoTopLeftPlayX {
      from {background-position-x: 0px;}
      to {background-position-x: -172vw;}
    }
@keyframes logoTopLeftPlayY {
      from {background-position-y: 0px;}
      to {background-position-y: -38vw;}
    }
}