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

body {
	height: 100%;
	width: 100%;
	font-family: "Arial", SimSun, serif;
	overflow: hidden;
	color: #fff;
	background-color: #900a17;
	padding: 0;
	margin: 0;
	-webkit-text-size-adjust: none;
	font-size: 24px
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* @font-face {
	font-family: "bwggt";
	src: url("../font/bwggt.woff?v4") format("woff");
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "zkxhh";
	src: url("../font/zkxhh.woff?v3") format("woff");
	font-style: normal;
	font-weight: normal;
}
.bwggt{
	font-family: bwggt;
	font-size:28px;
}
.zkxhh{
	font-family: zkxhh;
	font-size:28px;
} */
.abcenter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hcenter {
	position: absolute;
	top: 50%;
	/* transform: translateY(-50%); */
}
textarea:focus,
input:focus,
img:focus {
	outline: none;
}

p,
img,
form {
	border: 0;
	margin: 0;
	padding: 0
}

.hide {
	display: none;
}

input,
textarea,
select {
	font-family: "Arial", "Microsoft YaHei", SimSun, serif;
	outline: none;
	resize: none;
	color: #606060;
	font-size: 24px;
	line-height: 44px;
	vertical-align: middle
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

a {
	color: #000;
	text-decoration: none
}

.ctext {
	text-align: center;
}

.abs {
	position: absolute;
}

.rel {
	position: relative;
}

.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}

.l0 {
	left: 0;
}

.r0 {
	right: 0;
}

.t0 {
	top: 0;
}

.b0 {
	bottom: 0;
}

.nv {
	visibility: hidden;
}

.btn-c{
	width:200px;
	height:60px;
	line-height: 60px;
	text-align: center;
	font-size:30px;
	color:#faf7f1;
}

.img-middle {
	vertical-align: middle;
}

.auto-width {
	width: 100%;
	height: auto;
}

.img-block {
	display: block;
}

.cover{
	object-fit: cover;
}
.auto {
	margin: 0 auto;
}

.co {
	/*visibility: hidden;*/
	width: 100%;
	height: 100%;
	max-width: 640px;
	overflow: hidden;
	position: relative;
}

.c {
	width: 640px;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	/* overflow: hidden; */
	position: relative;
	/* background-image: url("../img/bg.jpg");
    background-repeat: no-repeat;
		background-size:100% auto;
		background-position: center; */
}
.loading-gif{
	width:140px;
}
.loading-text{
	margin:15px 0;
}
.orange{
	color:#ecdec1;
}


/*
.breath {
	width: 38px;
	height: 38px;
	position: absolute;
}

.breath>div {
	border-radius: 50%;
}

.breath .c-in {
	background-color: #fff;
	animation: scaleout-cin .6s ease-out infinite alternate-reverse;
}

.breath .c-out {
	background-color: #ccc;
}

.breath .c-out.ani {
	animation: scaleout 1.2s ease-in-out infinite;
}
.btn-start-box.breath .c-out.ani {
	animation: scaleout-loading 1.2s ease-in-out infinite;
}*/

/*.logo-loading {
	font-size: 0;
	width: 116px;
	height: 119px;
}

.loading-mask {
	transform: translateY(0%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1));
}*/
/*
.cloading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background-color: #fff;
}

.loading {
	position: absolute;
	top: 40%;
	margin-top: 0px;
	text-align: center;
	width: 100%;
	font-size: 36px;
	color: #ccc;
}

.loading span {
	font-size: 30px;
}

.loader1,
.loader2 {
	top: 40%;
	left: 50%;
	margin-left: -1.25em;
	margin-top: -6em;
}

.loader2 {
	top: 45%;
}*/

.innerLoading {
	display: none;
	/*background-color: rgba(0, 0, 0, 0.8);*/
	z-index: 9000;
}

.arrow {
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: -20px;
	width: 40px;
	animation: arrow 2s infinite;
}

.logo {
	position: absolute;
	left: 0px;
	top: 25px;
	z-index: 1200;
}
.logo.small{
	width:200px;
	top:10px;
}
.p {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1000;
	background-size: 100% auto;
	background-position: center center;
	/*display: none;*/
	/*@todo may back*/
	background-repeat: no-repeat;
}

.fullbg{
	background-size:100% 104%;
}

.page-box {
	position: absolute;
	width: 640px;
	height: 1038px;
	top: 50%;
	margin-top: -519px;
}

.pi {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center center;
}
.p0 {
	opacity: 1;
	z-index: 1100;
	background-color: #900a17;
	display: block;
}

.p0 .ctext.orange{
	opacity:0;
}
/*p1*/
.p1i{
	top:-40px;
}
.p1t1 {
	top:276px;
}
.p1t2{
	top:-94px;
}
.p1img1{
	top:210px;
}
.p1bottle{
	width:254px;
	right:34px;
	top: 608px;
}
.p1t4{
	bottom:147px;
}
.p1price{
	bottom:0;
}
/*p2**/

#bottle-svg{
	position: absolute;
	top:258px;
	width:155px;
	height:540px;
	left:50%;
	margin-left:-78px;
}
#bottle-path {
	/* fill: #fff; */
	animation: bottle-path 6s linear infinite backwards;
	/* stroke-dasharray: 5px 20px; */
  }
  
  @keyframes bottle-path {
	  /*1277*/
	  0% {
		  stroke-dasharray: 0 1577px;
	  }
	  100% {
		  stroke-dasharray: 1577px 0;
	  }
  }

  .p2t1{
	  /* top:20px; */
	  top:0px;
  }
  .p2t2{
	/* top:95px; */
	top:70px;
}
.p2t3{
	bottom:40px;
}
.p2img1{
	top:115px;
}

.p2tipst1box{
	width:38px;
	height:38px;
	top:391px;
	right:100px;
}
.p2tipst1box::before{
	position: absolute;
	content:'';
	width:200px;
	height:280px;
	left:-100px;
	top:-177px;
}
.p2tipst1circle{
	animation: star 1s infinite;	
}
.p2tipst1{
	left:-39px;
	top:-50px;
	width:51px;
}

/*ps21*/
.ps21t1{
	top:56px;
}
.ps21person{
	top:364px;
}
.ps21ball{
	top:336px;
	left:236px;
	width:50px;
	animation: rotate 1s linear infinite;
}
.ps21bottle{
	top:425px;
}
.ps21price{
	bottom:82px;
	left:-50px;
}


.ps21tipst1box{
	width:30px;
	height:30px;
	top:470px;
	left:96px;
}
.ps21tipst1box::before{
	position: absolute;
	content:'';
	width:200px;
	height:280px;
	left:-100px;
	top:-177px;
}
.ps21tipst1circle{
	animation: star 1s infinite;	
}
.ps21tipst1{
	left:-48px;
	top:-82px;
	width:62px;
}
/*p3*/
.p3t1{
	top:9px;
}
.p3t2{
	bottom:2px;
}
.p3tipst1box{
	width:38px;
	height:38px;
	top:743px;
	left:474px;
}
.p3tipst1box::before{
	position: absolute;
	content:'';
	width:200px;
	height:280px;
	left:-100px;
	top:-177px;
}
.p3tipst1circle{
	animation: star 1s infinite;	
}
.p3tipst1{
	left:19px;
	top:50%;
	margin-top:-105px;
}
.p3bottle{
	top:283px;
}

.pswp__container, .pswp__img{
	/* padding:40px 15px; */
	background-color:transparent;
}
.pswp__caption, .pswp__top-bar{
	background-color:transparent;
}
/*p4*/
.stamp1-box{
	left:30px;
	width:268px;
}
.stamp2-box{
	right:30px;
	width:270px;
}
.stamp1-box, .stamp2-box{
	position: absolute;
	height:355px;
	top:469px;
	display: block;
	
}
.stamp1-box .sc, .stamp2-box .sc{
	/* overflow:hidden; */
	position: absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.stamp1, .stamp2{
	/* filter:blur(10px); */
	/* transition:filter 3s ease; */
	/* will-change: filter; */
	/* transform: translate3d(-1px, -1px, 0); */
	/* border:solid 1px transparent; */
	/* border-width:1px 0 0 1px; */
	width:100%;
	position: relative;
	z-index:5;
}
.stamp1.ani2, .stamp2.ani2{
	/* filter:blur(0); */
}
.stamp-click-tips{
	position: absolute;
	width:38px;
	height: 38px;
	left:50%;
	margin-left:-19px;
	top:10px;
}
.stamp-click-tips::before{
	position: absolute;
	content:"";
	width:2px;
	height:50px;
	top:-30px;
	left:50%;
	margin-left:-1px;
	background-color: #ac1017;
}
.stamp-click-tips::after{
	content:"点击查看";
	position: absolute;
	top:-60px;
	color:#f6e0af;
	font-size:20px;
	width:200px;
	left:50%;
	margin-left:-100px;
	text-align: center;
}

#stamp2-svg, #stamp1-svg{
	position: absolute;
	top:-10px;
	width:calc(100% + 20px);
	height:calc(100% + 20px);
	left:-10px;	
}
#stamp2-path {
	/* fill: #fff; */
	animation: stamp2-path 4s linear infinite backwards;
	/* paint-order:stroke; */
	/* stroke-dasharray: 5px 20px; */
  }
  #stamp1-path {
	/* fill: #fff; */
	animation: stamp2-path 4s 0s linear infinite backwards;
	/* paint-order:stroke; */
	/* stroke-dasharray: 5px 20px; */
  }
  @keyframes stamp2-path {
	  /*1277*/
	  0% {
		  stroke-dasharray: 0 1250px;
	  }
	  100% {
		  stroke-dasharray: 1250px 0;
	  }
  }

/*p5*/
.btn-play{
	top:324px;
	left:50%;
	width:101px;
	margin-left:-50px;
	position: absolute;
}
#v1{
	/* position: absolute;
	width:640px;
	height:auto;
	left:0px;
	top:-1200px; */
}
/* video::-webkit-media-controls-panel {
    width: 640px;
  } */
/* #v1.show{
	left:0;
	top:194px;
	/* transform:translateY(-50%);
} */
.vc{
	position: absolute;
	width:640px;
	height:360px;
	top:-1200px;
	left:0;
}
.vc.show{
	top:194px;
}
.vc #v1{
	object-fit: contain;
	transform-origin: 0 0;
}
/*p6*/
.btn-order{
	position: absolute;
	bottom:64px;
	left:60px;
	width:227px;
	/* animation: gapScaleJz 3s infinite; */
	/* animation: half-time-tada 3s infinite; */
	animation: scaleJz2 3s infinite;
}


@-webkit-keyframes fingerHandle {
	0% {
		transform: none;
	}

	70% {
		transform: scale3d(.8, .8, .8);
	}

	100% {
		transform: none;
	}
}

@keyframes fingerHandle {
	0% {
		-webkit-transform: none;
	}

	70% {
		-webkit-transform: scale3d(.8, .8, .8);
	}

	100% {
		-webkit-transform: none;
	}
}

@-webkit-keyframes circleHide {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0, 0, 0);
	}

	70% {
		opacity: 1;
		-webkit-transform: scale3d(1.2, 1.2, 1.2);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale3d(0, 0, 0);
	}
}

@keyframes circleHide {
	0% {
		opacity: 0;
		transform: scale3d(0, 0, 0);
	}

	70% {
		opacity: 1;
		transform: scale3d(1.2, 1.2, 1.2);
	}

	100% {
		opacity: 0;
		transform: scale3d(0, 0, 0);
	}
}



.sharepage {
	display: block;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 9990;
	opacity: 0;
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.sharepage img {
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all .7s ease;
	transition: all .7s ease;
}

.sharepage.show {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.sharepage.show img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.sharetip {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.blackbg {
	background-color: rgba(0, 0, 0, 0.9);
}

.emailpage{
	visibility: hidden;
	opacity: 0;
	background-color:rgba(0,0,0,0.9);
	z-index:2000;
	transition: all .5s;
	color:#354350;
	text-align:center;
}
.emailpage.show{
	visibility: visible;
	opacity: 1;
}
.email-form, .success-box{
	top:50%;
	height:300px;
	margin-top:-150px;
	width:592px;
	margin-left:-296px;
	left:50%;
	background-color:#faf7f1;
}
.email-form h3, .success-box h3{
	padding:0;
	margin:0;
	padding-top:40px;
	font-size:30px;
}
.email-form>div:nth-child(2){
	width:500px;
	margin:30px auto;
}
.email-form input{
	height:60px;
	line-height: 60px;
	padding:0 30px;
	width:100%;
	background-color:#beaf9a;
	box-sizing: border-box;
	border:none;
	-webkit-appearance: none;
	outline: none;
	color:#fff;
	font-size:22px;
}
input:focus {
	border: none;
  }
.btn-submit-email{
	margin:0 auto;
}
.btn-email-back{
	width:70px !important;
	top:16px;
	right:16px;
}
.btn-email-back span.iconfont{
	padding:0;
	font-size:30px;
}
.success-box h5{
	margin:0;
	line-height: 2;
	font-size:22px;
	font-weight: lighter;
}
.music-icon {
	position: absolute;
	right: 18px;
	top: 110px;
	background-image: url("../img/music.png?v2");
	background-size: 116px 58px;
	background-position: -58px 0;
	background-repeat: no-repeat;
	width: 58px;
	height: 58px;
	z-index: 1100;
}

.music-icon.active {
	background-position: 0 0;
}

.music-icon.small{
	top:188px;
}

.leftarrowani {
	animation: leftarrow 1.2s infinite linear;
}

.rightarrowani {
	animation: rightarrow 1.2s infinite linear;
}

.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
	left:50%;
	top:50%;
}

.loader {
	color: #ccc;
	font-size: 10px;
	position: absolute;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}

.loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.loader:after {
	left: 3.5em;
}

@-webkit-keyframes load7 {

	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@keyframes load7 {

	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@-webkit-keyframes scaleSmall {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}

@keyframes scaleSmall {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}

@keyframes leftInJz {
	0% {
		transform: translateX(-10px);
	}

	50% {
		transform: translateX(0px);
	}

	55% {
		transform: translateX(-1px);
	}

	60% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(-10px);
	}
}

@keyframes jumpJz {
	0% {
		transform: translate(0, -20px);
	}

	50% {
		transform: translate(10px, 0px);
	}

	100% {
		transform: translate(0, -20px);
	}
}

@keyframes gapScaleJz {
	0% {
		transform: scale(1);
	}

	5% {
		transform: scale(1.1);
	}

	10% {
		transform: scale(1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes scaleJz2 {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(1.08);
	}

	40% {
		transform: scale(1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes scaleJz3 {
	0% {
		transform: scale(1);
	}

	70% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1.2);
	}
}

@keyframes rotateLightJz {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(30deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@keyframes cloud1Jz {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(700px);
	}
}

@keyframes cloud2Jz {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-700px);
	}
}

@keyframes chanJz {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(10deg);
	}
}

@-webkit-keyframes arrow {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	60% {
		transform: translateY(-15px);
	}
}

@keyframes arrow {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	60% {
		transform: translateY(-15px);
	}
}

@keyframes leftarrow {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(0);
	}

	40% {
		transform: translateX(-8px);
	}

	60% {
		transform: translateX(-4px);
	}
}

@keyframes rightarrow {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(0);
	}

	40% {
		transform: translateX(8px);
	}

	60% {
		transform: translateX(4px);
	}
}

/*p3云*/
@-webkit-keyframes p3-s-cloud {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: -903px;
	}
}

@keyframes p3-s-cloud {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: -903px;
	}
}


@keyframes half-time-tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	5%,
	10% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 3deg);
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -3deg);
	}

	50% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes hand {
	0% {
		transform: translate(-20px, -20px) scale3d(.9, .9, .9);
	}

	70% {
		transform: none;
	}

	100% {
		transform: translate(-20px, -20px) scale3d(.9, .9, .9);
	}
}

@keyframes hand {
	0% {
		transform: translate(-20px, -20px) scale3d(.9, .9, .9);
	}

	70% {
		transform: none;
	}

	100% {
		transform: translate(-20px, -20px) scale3d(.9, .9, .9);
	}
}

@keyframes bg-shine {
	from {
		opacity: 0;
		transform: rotate(0) scale(1.2);
	}

	to {
		opacity: 1;
		transform: rotate(5deg) scale(1.2);
	}
}

@keyframes p6cloud1 {
	from {
		transform: translateX(80px);
	}

	to {
		transform: translateX(-80px);
	}
}

@keyframes p6cloud2 {
	from {
		transform: translateX(-80px);
	}

	to {
		transform: translateX(80px);
	}
}

@keyframes star {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

	to {
		transform: rotate(-360deg);
	}
}

@keyframes scaleout-loading {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes scaleout {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}
@keyframes scaleout-cin {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		transform: scale(1.2);
		opacity: 1;
	}
}