// @media all and (orientation: portrait) {
.home {
	width: 100%;
	height: 100%;
	max-width: 500px;
	overflow-y: hidden;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none; /* Firefox all */
	-ms-user-select: none; /* IE 10+ */ /* No support for these yet,use at own risk */
	-o-user-select: none;
	user-select: none;
	.playBtn {
		position: absolute;
		right: 27px;
		top: 55px;
		width: 42px;
		height: 37px;
		z-index: 10000;
	}
	.startBox {
		width: 100vw;
		max-width: 500px;
		height: 100%;
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: cover;
		z-index: 100;
		position: relative;
		overflow-y: hidden;
		&.fadeOut {
			opacity: 0;
			transition: all 1s;
			z-index: -100;
		}
		.logo {
			width: 250px;
			margin: 16px auto 0;
		}

		.age {
			position: absolute;
			right: 27px;
			top: 114px;
			width: 35px;
		}
		.start {
			position: absolute;
			bottom: 118px;
			left: 0;
			width: 100%;
		}
		.tips {
			position: absolute;
			bottom: 100px;
			left: 0;
			color: #ffefd1;
			width: 100%;
		}
		.starlinear {
			width: 128px;
			position: absolute;
			bottom: 27px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.beginText {
		max-width: 500px;
		width: 100vw;
		height: 100%;
		align-items: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-position: 0 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 50;
		position: absolute;
		opacity: 1;
		&.fadeOut {
			opacity: 0;
			transition: all 1s;
			z-index: -50;
		}
		.textList {
			font-size: 14px;
			width: 80%;
			text-align: center;
			color: #ffefd1;
			font-weight: 200;
			margin-bottom: 0px;
			// margin-bottom: 140px;
			opacity: 0;
			&.fadein {
				margin-bottom: 140px;
				opacity: 1;
				transition: all 2s;
			}
			.textItem {
				line-height: 1.6;
			}
			.mt {
				margin-top: 20px;
			}
		}

		.step2 {
			width: 351px;
			height: 69px;
			text-align: center;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			line-height: 65px;
			font-size: 12px;
			color: #ffefd1;
			font-weight: 400;
			position: absolute;
			bottom: 20%;
			opacity: 0;
			&.fadein {
				opacity: 1;
				transition: all 4s;
			}
		}
	}
	.startText {
		width: 100%;
		height: 100%;
		max-width: 500px;
		align-items: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-position: 0 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 50;
		opacity: 1;
		position: absolute;
		&.fadeOut {
			opacity: 0;
			transition: all 1s;
			z-index: -50;
		}
		.textList {
			font-size: 14px;
			text-align: center;
			color: #ffefd1;
			font-weight: 200;
			margin-bottom: 0px;
			opacity: 0;
			&.fadein {
				margin-bottom: 140px;
				opacity: 1;
				transition: all 2s;
			}
			.textItem {
				line-height: 1.6;
			}
		}

		.step2 {
			width: 351px;
			height: 69px;
			text-align: center;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			margin: 180px auto 0;
			line-height: 65px;
			font-size: 12px;
			color: #ffefd1;
			font-weight: 400;
			position: absolute;
			bottom: 20%;
			opacity: 0;
			&.fadein {
				opacity: 1;
				transition: all 4s;
			}
		}
	}

	.qa {
		width: 100%;
		max-width: 500px;
		height: 100%;
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 0 53px;
		box-sizing: border-box;
		position: absolute;
		opacity: 1;
		z-index: 10;
		&.fadeOut {
			opacity: 0;
			transition: all 1s;
			z-index: -1;
		}
		.req {
			font-size: 15px;
			text-align: center;
			color: #ffefd1;
			font-weight: 200;
			margin-top: 46%;
			padding: 5px 40px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-bottom: 15px;
			opacity: 1;
			transition: all 1.5s;
			&.active {
				opacity: 0;
				transition: all 1.5s;
			}
		}

		.reqBtn {
			width: 209px;
			height: 69px;
			text-align: center;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			line-height: 65px;
			font-size: 12px;
			color: #ffefd1;
			margin-bottom: -15px;
			position: relative;
			// transition: all 0.5s;
			&::after {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 69px;
				display: block;
				background: url("@night/btn_hignlight.png") center no-repeat;
				background-size: auto 100%;
				content: "";
			}
			&.active {
				color: #494949;
				transition: all 0.6s;
				p {
					z-index: 2;
					position: relative;
				}
				&::after {
					width: 209px;
				}
			}
		}
	}

	.resultBox {
		width: 100%;
		max-width: 500px;
		min-height: 100vh;
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0;
		position: absolute;
		z-index: -1;

		&.active {
			max-height: 250vw;
			opacity: 1;
			z-index: 1;
		}
		.figure {
			width: 100%;
			height: 100%;
		}
		.shareBtn {
			width: 209px;
			height: 70px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			z-index: 1001;
			position: absolute;
			left: 50%;
			bottom: 13%;
			transform: translateX(-50%);
		}
		.saveTips {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 12%;
			color: #ffeed1;
			font-size: 12px;
		}
		.pic_bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 13.5%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.toDream {
				position: absolute;
				bottom: 6.5vh;
				right: 7%;
				width: 41%;
				z-index: 1001;
				height: 2vh;
				// background-color: #fff;
			}
		}
	}

	.canvasImg {
		max-width: 500px;
		width: 100%;
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		&.active {
			// height: 100vh;
			// height: 243vw;
			z-index: 1000;
		}
	}
}
// }

// #root {
// 	position: relative;
// 	&::after {
// 		content: "请将页面调整至竖屏体验";
// 		font-size: 24px;
// 		display: block;
// 		position: fixed;
// 		top: 50%;
// 		left: 50%;
// 		transform: translate(-50%, -50%);
// 		color: #ffefd1;
// 		z-index: 10000;
// 		width: 100%;
// 		height: 100%;
// 		background: #000;
// 		text-align: center;
// 		line-height: 90vh;
// 	}
// }
// .home {
// 	width: 100%;
// 	height: 100%;
// 	background: rgba(0, 0, 0, 0.8);
// 	display: none;
// 	position: relative;
// }
