*,
*::after,
*::before {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html,
body,
div,
a,
p,
ul,
li,
dl {
	margin: 0;
	padding: 0;
}
body,
button,
input,
select,
textarea {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "kern";
}
a,
button,
input,
select,
textarea {
	outline: 0;
}
textarea {
	min-height: 100px;
}
label {
	display: inline-block;
	max-width: 100%;
	font-weight: 400;
}
small {
	font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	line-height: 1.6;
	font-size: 14px;
}
a {
	color: #04a3f5;
}
a:hover {
	color: #0196e3;
}
a,
a:hover,
a:link,
a:visited,
a:active {
	text-decoration: none;
}
li {
	list-style: none;
}
ul::after,
li::after {
	clear: both;
}
ul::after,
ul::before,
li::after,
li::before {
	display: table;
	content: " ";
}
table {
	border-spacing: 0;
	border-collapse: collapse;
}
html,
body {
	width: 100%;
	height: 100%;
}
html {
	font-size: 10px;
	font-family: sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	line-height: 1.6;
	background-color: #030000;
	color: #fff;
	font-size: 14px;
	font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
}


.layui-m-layerchild,
.layui-m-layerbtn {
	background: none !important;
	border: 0 none !important;
	border-radius: 0 ;
	box-shadow: none;
	overflow: hidden;
}
.layui-m-layercont {
	padding: 20px !important;
	background: url('../images/layer_content.png') no-repeat center center / 100% 100%;
	color: #fff;
}
.layui-m-layerbtn {
	margin-top: 10px;
}
.layui-m-layerbtn span {
	margin-left: 10px;
	background: url('../images/layer_btn.png') no-repeat center center / 100% 100%;
	border: 0 none !important;
	border-radius: 0;
	color: #fff !important;
}
.layui-m-layerbtn span:first-child {
	margin-left: 0;
}
.layui-m-layerbtn span:nth-last-child(1):first-child {
	background-image: url('../images/layer_btn_all.png');
}

.log-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .6);
	z-index: 20230101;
}
.log-content {
	padding: 8px 10px;
	color: #fff;
}

.loading-container {
	position: relative;
	height: 100%;
	background: #030000 no-repeat center center / 100%;
	z-index: 2023;
}
.loading-logo,
.loading-box {
	position: absolute;
}
.loading-logo {
	top: 5%;
	left: 42%;
	width: 16%;
}
.loading-logo img {
	display: block;
	width: 100%;
}
.loading-box {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
}
.loading-box img,
.loading-box span {
	display: block;
	margin: 0 auto;
}
.loading-box img.text {
	width: 40%;
}
.loading-box img.icon {
	margin-top: 20px;
	width: 8%;
	animation: loading 1.5s linear infinite;
}
.loading-box span.percentage {
	margin-top: 10px;
	color: rgba(255, 255, 255, .6);
	text-align: center;
}

@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.audio-container {
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	width: 35px;
	height: 35px;
	background: url('../images/icon_play.png') no-repeat center center / 100% 100%;
	z-index: 2023;
}
.audio-container.show {
	display: block;
	opacity: .8;
}
.audio-container.play {
	background-image: url('../images/icon_stop.png');
	animation: play 1.5s linear infinite;
}
.audio-container.stop {
	animation-play-state: paused;
}

@keyframes play {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.audio-content {
	display: none;
}

.page-container {
	display: none;
}
.page-container.show {
	display: block;
}
.page-container,
.page-slide,
.page-content {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.page-slide,
.page-content {
	display: none;
}
.page-slide.show,
.page-content.show {
	display: block;
}
.page-element {
	position: absolute;
}
.page-element img {
	display: block;
	width: 100%;
}
.page-ani div,
.page-ani img {
	display: none;
}
.page-ani div.show,
.page-ani img.show {
	display: block;
}
.page-ani div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: no-repeat center center / 100%;
}

.page-slide-1 {
	background: #030000 no-repeat center center / 100%;
}
.page-1-logo {
	top: 5%;
	left: 42%;
	width: 16%;
}
.page-1-text {
	top: 17%;
	left: 0;
	width: 100%;
}
.page-1-text img {
	margin: 0 auto;
}
.page-1-text img.t1 {
	width: 40%;
}
.page-1-text img.t2 {
	margin-top: 10px;
	width: 60%;
}
.page-1-ani-1 {
	top: 0%;
	left: 0;
	right: 0;
	bottom: 0;
}
.page-1-ani-1 video {
	display: block;
	width: 100%;
	height: 100%;
}
.page-1-img-1,
.page-1-img-2,
.page-1-img-3  {
	top: 0%;
	left: 0;
	right: 0;
	bottom: 0;
	background: no-repeat center center / 100%;
}
.page-1-button {
	left: 30%;
	bottom: 5%;
	width: 40%;
	animation: page-1-button 1.6s infinite linear;
}

.page-slide-2 {
	background: #030000 no-repeat center center / 100%;
}
.page-2-back {
	top: 8%;
	left: 10%;
	width: 6%;
}
.page-2-logo,
.page-2-logo-1 {
	top: 5%;
	width: 16%;
}
.page-2-logo {
	left: 42%;
}
.page-2-logo-1 {
	right: 10%;
}
.page-2-text {
	top: 17%;
	left: 0;
	width: 100%;
}
.page-2-text img {
	margin: 0 auto;
}
.page-2-text i {
	display: block;
	margin: 10px auto;
	border-top: 1px solid #ccad8e;
}
.page-2-text img.t1,
.page-2-text i {
	width: 60%;
}
.page-2-text img.t2 {
	width: 40%;
}
.page-2-star {
	width: 40%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: page-2-star;
	opacity: 0;
}
.page-2-star.hide {
	display: none;
}
.page-2-star-1 {
	top: 25%;
	left: 8%;
	animation-duration: 2.5s;
	animation-delay: 0s;
}
.page-2-star-2 {
	top: 28%;
	right: 12%;
	animation-duration: 2.8s;
	animation-delay: .8s;
}
.page-2-star-3 {
	top: 45%;
	left: 10%;
	animation-duration: 3s;
	animation-delay: .6s;
}
.page-2-star-4 {
	top: 46%;
	right: 13%;
	animation-duration: 2.5s;
	animation-delay: .4s;
}
.page-2-star-5 {
	top: 65%;
	left: 8%;
	animation-duration: 2.8s;
	animation-delay: .2s;
}
.page-2-star-6 {
	top: 67%;
	right: 13%;
	animation-duration: 3s;
	animation-delay: 1s;
}
.page-2-ball {
	display: none;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.page-2-ball-1 {
	top: 30%;
	left: 15%;
	width: 25%;
	animation-name: page-2-ball-1;
	animation-duration: 2.5s;
}
.page-2-ball-2 {
	top: 33%;
	right: 20%;
	width: 20%;
	animation-name: page-2-ball-2;
	animation-duration: 2.8s;
}
.page-2-ball-3 {
	top: 50%;
	left: 20%;
	width: 22%;
	animation-name: page-2-ball-3;
	animation-duration: 3s;
}
.page-2-ball-4 {
	top: 51%;
	right: 22%;
	width: 18%;
	animation-name: page-2-ball-4;
	animation-duration: 2.5s;
}
.page-2-ball-5 {
	top: 70%;
	left: 16%;
	width: 21%;
	animation-name: page-2-ball-5;
	animation-duration: 2.8s;
}
.page-2-ball-6 {
	top: 68%;
	right: 18%;
	width: 23%;
	animation-name: page-2-ball-6;
	animation-duration: 3s;
}
.page-2-ball.show {
	display: block;
}
.page-2-button {
	display: none;
	left: 30%;
	bottom: 5%;
	width: 40%;
}
.page-2-button.show {
	display: block;
	overflow: hidden;
}
.page-2-button.show:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150%;
	background-image: linear-gradient(to bottom, transparent, rgba(255, 227, 199, .3), transparent);
	transform: rotate(-45deg);
	animation: page-2-button 2.2s ease-in 0s infinite;
}
.page-2-materials {
	top: 20%;
	left: 8%;
	right: 8%;
	animation: page-2-materials 4s infinite linear;
}
.page-2-materials img {
	display: none;
}
.page-2-materials img.show {
	display: block;
}
.page-2-materials img.name,
.page-2-materials img.text {
	position: absolute;
}
.page-2-materials img.name {
	top: 8%;
	left: 36%;
	width: 35%;
}
.page-2-materials img.text {
	top: 20%;
	left: 20%;
	width: 65%;
}
.page-2-bottle {
	display: none;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: no-repeat center center / auto 100%;
}
.page-2-bottle.show {
	display: block;
}
.page-2-round-1 {
	top: 23%;
	left: 15%;
	width: 13%;
}
.page-2-round-2 {
	top: 21%;
	right: 25%;
	width: 11%;
}
.page-2-round-3 {
	top: 35%;
	left: 27%;
	width: 10%;
}
.page-2-round-4 {
	top: 32%;
	right: 15%;
	width: 11%;
}
.page-2-round-5 {
	top: 48%;
	left: 16%;
	width: 12%;
}
.page-2-round-6 {
	top: 45%;
	right: 16%;
	width: 13%;
}
.page-2-round.ani-1 {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.page-2-round-1.ani-1 {
	animation-name: page-2-round-1;
	animation-duration: 2.5s;
}
.page-2-round-2.ani-1 {
	animation-name: page-2-round-2;
	animation-duration: 2.8s;
}
.page-2-round-3.ani-1 {
	animation-name: page-2-round-3;
	animation-duration: 3s;
}
.page-2-round-4.ani-1 {
	animation-name: page-2-round-4;
	animation-duration: 2.5s;
}
.page-2-round-5.ani-1 {
	animation-name: page-2-round-5;
	animation-duration: 2.8s;
}
.page-2-round-6.ani-1 {
	animation-name: page-2-round-6;
	animation-duration: 3s;
}
.page-2-round.ani-2 {
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}
.page-2-round-1.ani-2 {
	animation-name: page-2-round-1-2;
	animation-duration: 1.5s;
}
.page-2-round-2.ani-2 {
	animation-name: page-2-round-2-2;
	animation-duration: 1.3s;
}
.page-2-round-3.ani-2 {
	animation-name: page-2-round-3-2;
	animation-duration: 2s;
}
.page-2-round-4.ani-2 {
	animation-name: page-2-round-4-2;
	animation-duration: 1.2s;
}
.page-2-round-5.ani-2 {
	animation-name: page-2-round-5-2;
	animation-duration: 2s;
}
.page-2-round-6.ani-2 {
	animation-name: page-2-round-6-2;
	animation-duration: 1.8s;
}
.page-2-shake {
	left: 40%;
	bottom: 10%;
	width: 20%;
}
.page-2-shake .img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
	animation: page-2-shake 2s infinite linear;
}
.page-2-result {
	background: #030000 no-repeat center center / 100%;
}
.page-2-img-1,
.page-2-img-2,
.page-2-img-3  {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: no-repeat center center / 100%;
}

.page-slide-3 {
	background: #030000 no-repeat center center / 100%;
}
.page-3-back {
	top: 8%;
	left: 10%;
	width: 6%;
}
.page-3-logo,
.page-3-logo-1 {
	top: 5%;
	width: 16%;
}
.page-3-logo {
	left: 42%;
}
.page-3-logo-1 {
	right: 10%;
}
.page-3-video {
	top: 15%;
	left: 13%;
	width: 74%;
	height: 25%;
}
.page-3-video video {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
}
.page-3-video-box {
	top: 43%;
	left: 8%;
	right: 8%;
}
.page-3-video-box .box {
	position: absolute;
	top: 7%;
	left: 13%;
	right: 13%;
	bottom: 10%;
}
.page-3-video-box .title {
	padding: 10px 40px 15px;
}
.page-3-video-box .title .t-1 {
	margin: 0 auto;
	width: 60%;
}
.page-3-video-box .title .line {
	display: block;
	margin-top: 10px;
	width: 100%;
	border-top: 2px solid #4b361e;
}
.page-3-select-box {
	top: 20%;
	left: 8%;
	right: 8%;
}
.page-3-select-box .box {
	position: absolute;
	top: 7%;
	left: 13%;
	right: 13%;
	bottom: 10%;
}
.page-3-select-box .title {
	padding: 20px 20px 30px;
}
.page-3-select-box .title .line {
	display: block;
	margin: 20px auto;
	width: 30%;
	border-top: 1px solid #aa895d;
}
.page-3-select-box .title .t-2 {
	margin: 0 auto;
	width: 60%;
}
.page-3-select-box .option .o-2 {
	margin: 20px 0;
}
.page-3-result-box {
	top: 20%;
	left: 8%;
	right: 8%;
}
.page-3-result-box .img,
.page-3-result-box .text,
.page-3-result-box .wine,
.page-3-result-box .qrcode {
	position: absolute
}
.page-3-result-box .img,
.page-3-result-box .text {
	display: none;
}
.page-3-result-box .img.show,
.page-3-result-box .text.show {
	display: block;
}
/*
.page-3-result-box .img {
	top: 8%;
	left: 15%;
	width: 72%;
}*/
.page-3-result-box .text {
	right: 13%;
	bottom: 10%;
	width: 50%;
}
.page-3-result-box .wine {
	right: 18%;
	bottom: 18%;
	width: 12%;
}
.page-3-result-box .qrcode {
	left: 15%;
	bottom: 10%;
	width: 16%;
}

@keyframes page-1-button {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes page-2-button {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}
@keyframes page-2-star {
	0% {
		opacity: 0;
		transform: rotate(0deg);
	}
	50% {
		opacity: 1;
		transform: rotate(180deg);
	}
	100% {
		opacity:  0;
		transform: rotate(360deg);
	}
}
@keyframes page-2-ball-1 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-20%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-ball-2 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(10%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-ball-3 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(15%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-ball-4 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-15%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-ball-5 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-ball-6 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(20%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-materials {
	0% {
		transform-origin: 0% 0%;
		transform: rotate(0deg);
	}
	50% {
		transform-origin: 0% 0%;
		transform: rotate(3deg);
	}
	100% {
		transform-origin: 0% 0%;
		transform: rotate(0deg);
	}
}
@keyframes page-2-round-1 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-20%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-round-2 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(10%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-round-3 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(15%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-round-4 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-15%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-round-5 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-round-6 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(20%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes page-2-round-1-2 {
	100% {
		top: 50%;
		left: 50%;
		opacity: 0;
	}
}
@keyframes page-2-round-2-2 {
	100% {
		top: 50%;
		right: 50%;
		opacity: 0;
	}
}
@keyframes page-2-round-3-2 {
	100% {
		top: 50%;
		left: 50%;
		opacity: 0;
	}
}
@keyframes page-2-round-4-2 {
	100% {
		top: 50%;
		right: 50%;
		opacity: 0;
	}
}
@keyframes page-2-round-5-2 {
	100% {
		top: 50%;
		left: 50%;
		opacity: 0;
	}
}
@keyframes page-2-round-6-2 {
	100% {
		top: 50%;
		right: 50%;
		opacity: 0;
	}
}
@keyframes page-2-shake  {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(20deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-20deg);
	}
	100% {
		transform: rotate(0deg);
	}
}