* {
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: #222734;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

#app {
	/* margin: 0 auto !important; */
	height: 100%;
	width: 100%;	
}

.appDiv {
	position: absolute;
	left: 50%;
	width: 50%;
	font-size: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* background-image: url('../img/bg.png'); */
	background-size: 100% 100%;
	transform: translateX(-50%);
}

.appDiv p {
	color: #001a37;
	font-size: 1.5rem;
	text-align: center;
	font-weight: bold;
}

	.pageSideBar {
			height: 14vw;
			width: 44vw;
			position: fixed;
			left: 28%;
			bottom: 0%;
			z-index: 100;
		}
		
		.sideBarBtnTop {
			position: absolute;
			right: 0%;
			width: 10%;
			top: 0%;
			z-index: 101;
			transform: translate(-40%, -60%);
			cursor: pointer;
		}
		
		.sideBarBtnIOSDownload {
			position: absolute;
			left: 78%;
			top: 40%;
			height: 4.5vw;
			z-index: 101;
			transform: translate(-50%, -50%);
			cursor: pointer;
		}
		

input::-webkit-input-placeholder {
	/* color: #aab2bd; */
	/* font-size: 12px; */
	/* text-align: right; */
	font-weight: bold;
}

.bgImage {
	width: 100%;
}

.divFirst{
	position: relative;
	width: 100%;
	margin-top: 5%;
}

.aPrize{
	position: absolute;
	height: 10vw;
	width: 40vw;
	top: 74%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}



.inputEmail {
	position: absolute;
	font-size: 1rem;
	height: 4vw;
	width: 55%;
	padding-left: 3%;
	padding-right: 3%;
	outline: none;
	border: 0;
	background-image: url('../img/bg_input.png');
	background-size: 100% 100%;
	text-align: center;
	top: 85%;
	left: 50%;
	transform: translate(-50%, -50%);
}

input::-webkit-input-placeholder {
	/* color: #aab2bd; */
	/* font-size: 12px; */
	/* text-align: right; */
	font-weight: normal;
	/* font-style: italic; */
}

.btnSubmit{
	position: absolute;
	height: 4vw;
	top: 92%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.divSecond{
	position: relative;
	width: 100%;
}

.divThird{
	position: relative;
	width: 100%;
}

.divFourth{
	position: relative;
	width: 100%;
}

.pOrderNumber{
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	/* font-style: italic; */
	color: #001a37 !important;
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	letter-spacing: .5%
}

.pLastTime{
	font-style: italic;
	font-size: .4rem !important;
	color: #001a37;
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.divFifth{
	position: relative;
	width: 100%;
}

.btnDownload{
	position: absolute;
	width: 45%;
	/* top: 5.5%; */
	top: 25.5%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pInviteNum{
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 2.8rem !important;
	color: #000 !important;
	position: absolute;
	top: 54.5%;
	left: 72%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.pLeftTime{
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 2rem !important;
	color: #000 !important;
	position: absolute;
	top: 60.5%;
	left: 70%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.pShareUrl{
	font-size: .2rem !important;
	color: #000 !important;
	position: absolute;
	top: 66%;
	left: 59%;
	width: 47%;
	text-overflow:ellipsis;
	transform: translate(-50%, -50%);
	z-index: 99;
	overflow: scroll;
	white-space: nowrap;
	opacity: 0;
}

.btnCopyUrl{
	position: absolute;
	top: 65.5%;
	left: 83%;
	width: 3%;
	z-index: 99;
	opacity: 0;
}

.divLogin{
	display: none;
}

.divUnLogin{
	display: none;
}

.textSignIn{
	position: absolute;
	width: 45%;
	top: 68%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.btnFacebook{
	position: absolute;
	width: 12%;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	opacity: 0;
}

.btnGoogle{
	position: absolute;
	width: 12%;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
} 

.g_id_signin{
	position: absolute;
	width: 12%;
	height: 12%;
	top: 74%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

.bgUrl{
	position: absolute;
	width: 75%;
	top: 66%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.divAddAny{
	position: absolute;
	width: auto;
	top: 68.8%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

.btnReward{
	position: absolute;
	width: 35%;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

.pLogout{
	position: absolute;
	width: 30%;
	height: 5%;
	top: 74%;
	left: 75%;
	transform: translate(-50%, -50%);
	z-index: 99;
	opacity: .4;
	font-size: .8rem !important;
}

.textReserved {
	position: absolute;
	height: 2vw;
	z-index: 50;
	left: 50%;
	top: 40%;
	transform: translate(-50%, 0%);
}

.textPrivacy{
	position: absolute;
	height: 1.5vw;
	z-index: 50;
	left: 50%;
	top: 60%;
	cursor: pointer;
	transform: translate(-50%, 0%);
}


.divCodeAll{
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 55%;
	left: 50%;
	top: 25%;
	transform: translate(-50%, -50%);
}

.divCodes {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 90%;
	left: 50%;
	top: 41%;
	transform: translate(-50%, -50%);
}

.divCode {
	width: 32%;
	display: flex;
	position: relative;
	margin-top: .3rem;
}

.bgCode {
	width: 100%;
}

.textCode {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	font-size: .9rem !important;
}

.btnCodeCopy {
	position: absolute;
	top: 50%;
	right: 5%;
	height: 50%;
	transform: translate(-50%, -50%);
}