@charset "UTF-8";
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html, body { width: 100%;height: 100%;overflow: hidden;-webkit-overflow-scrolling: touch;-webkit-user-select: none;user-select: none;}
body { margin: 0; position: relative; font-family: Microsoft Yahei; -webkit-text-size-adjust: 100%; background-color: #A99783;}
html,body,div,p,ul,ol,li,em,i,span,a,img,input,h1,h2,h3,h4,h5,p, form, dl, dd, dt, table { margin: 0; padding:0;}
ul,li { list-style: none; }
a, img { -webkit-touch-callout: none; }
img { border: none; vertical-align: middle;  pointer-events: none; -webkit-user-select: none;}
a { text-decoration: none; border: none; }
input, textarea , select{ font-family: Microsoft Yahei; font-size: 18px; -webkit-appearance: none; appearance: none; }
::-webkit-input-placeholder { /* WebKit browsers */
color:  #8C8C8C; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:  #8C8C8C}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:  #8C8C8C; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:  #8C8C8C; }
input[type="search"]::-webkit-search-cancel-button{
    display: none;
}
canvas { pointer-events: none;}

.none{display: none}
.pointAuto{pointer-events: auto;}

.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; height: 1%; line-height: 0; font-size: 0; visibility: hidden; clear: both; content: ''; }
.clearfix { zoom: 1; }
.tc { text-align: center; }
.tr { text-align: right; }
.pr { position: relative; }
.pa { position: absolute; }
.clear {clear: both;}
.zIndex12 { z-index: 12;}

/*元素变灰*/
.gray { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
/*音乐图标*/
#musicPic {
	pointer-events: auto;
	position: absolute;bottom: 2%;right: 3%;width: 30px;
	z-index: 9999;
}
/* 箭头start */
#next {
	position: absolute;
	top: 97%;
	left: 48%;
	z-index: 11;
	width: 40px;
	height: 50px;
	animation: pound 2s infinite;
	-webkit-animation: pound 2s infinite;
}

@keyframes pound {
	from {
		top: 96%;
		opacity: 0;
	}
	50% {
		top: 94%;
		opacity: 1;
	}
	to {
		top: 96%;
		opacity: 0;
	}
}

@-webkit-keyframes pound {
	from {
		top: 96%;
		opacity: 0;
	}
	50% {
		top: 94%;
		opacity: 1;
	}
	to {
		top: 96%;
		opacity: 0;
	}
}
/* 箭头end */
/*加载*/
/*.pace-progress {
	content: attr(data-progress-text);
	text-align: center;
	color: #fee000;
	font-size: 25px;
	font-weight: bold;
	width: 100%;
	height: 35px;
    line-height: 35px;
	display: block;
	position: absolute;
	top: 35%;
	margin-top: 10px;
	z-index: 1002;
}*/
/*输入框*/
.inputK{
	position:absolute;width:514px;height:90px;
	margin:0 auto;left:0;right:0;
}
.kname{
	top:44%;
	-webkit-animation: zoomIn 1s ease 1s 1 both;
}
.ktel{
	top:54%;
	-webkit-animation: zoomIn 1s ease 1.2s 1 both;
}
.kren{
	top:64%;
	-webkit-animation: zoomIn 1s ease 1.4s 1 both;
}
.kuang{
	position: absolute;width: 100%;height: 100%;
}
input {
	position: absolute;top: 5%;left: 38%; width: 62%;height: 100%;
	outline: none;border: none;
	background: none;
	color: #fff;
	/*border-radius: 12px;*/
	text-align: center;
	font-size: 24px;
	/*-webkit-animation: fadeIn 1s ease 2.5s 1 both;*/
	z-index: 5;
}
#name{
	top: 55%;left: 30%;width: 40%;height: 20%;
}
.swal2-popup {
    width: 80%;
    padding: 10px;
    border-radius: 10px;
    font-size: 24px;
}
.hei {
	position: absolute;width: 100%;height: 100%;top: 0;left: 0;
	background: #000;
	opacity: 0.6;
	/*display: none;*/
	/*-webkit-animation: fadeIn1 .5s ease 0s 1 both;*/
}
.guang {
	position: absolute;
	background-blend-mode: color-dodge;
	mix-blend-mode: color-dodge;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 11;
	-webkit-animation: fadeIn 1.5s ease 0.4s 1 both;
}
.page {
	position: absolute;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;margin:auto;
	display: none;
}
.bg {
	position: absolute;width: 100%;height:100%;top: 0;left: 0;
}
.bg1{
	position: absolute;width: 100%;height: 1500px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
}
.bg2 {
	position: absolute;width: 100%;height: 1500px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
	-webkit-animation: suoxiao 2s ease 0s 1 both,pulse 10s linear 3s infinite normal;
}
/*.bg3 {
	position: absolute;width: 100%;height: 1450px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
	background: url(../images/bg3.jpg) no-repeat;
	background-size: 100% 100%;
}*/

/*首页*/
.logoM{
	position:absolute;left:25.6%;top:23.2%;width:373px;height:184px;
	-webkit-animation: zoomIn 1s ease 1s 1 both,shan 1s ease 2s infinite normal;
	z-index: 20;
}
.logoM1{
	position:absolute;left:8.67%;top:3.93%;width:245px;height:121px;
	-webkit-animation: fadeInLeft 1s ease .4s 1 both,shan 1s ease 1.4s infinite normal;
	z-index: 20;
}
.logo{
	position:absolute;left:0;top:0;width:100%;
}
.logo1{
	position:absolute;left:3%;top:3%;width:96px;
	-webkit-animation: fadeInLeft 1s ease .4s 1 both;
}
.logo2{
	position:absolute;right:3%;top:2%;width:148px;
	-webkit-animation: fadeInRight 1s ease .4s 1 both;
}
.logo1-1{
	position:absolute;left:3%;top:3%;width:96px;
}
.logo2-1{
	position:absolute;right:3%;top:2%;width:148px;
}
/*logo扫光效果*/
.logoMask {
	position:absolute;left:0;top:0;width:100%;
	-webkit-mask: url(../images/mask.png);
	-webkit-mask-size: 418px 280px;
	-webkit-mask-position: -418px 0px;
	-webkit-mask-repeat: no-repeat;
	
	-webkit-animation: maskShine 2s ease-out 2s infinite both;
}

@-webkit-keyframes maskShine {
	0% {
		-webkit-mask-position: -418px 0px;
		mask-position: -418px 0px
	}
	75% {
		-webkit-mask-position: 418px 0px;
		mask-position: 418px 0px
	}
	100% {
		-webkit-mask-position: 418px 0px;
		mask-position: 418px 0px
	}
}

@keyframes maskShine {
	0% {
		-webkit-mask-position: -418px 0px;
		mask-position: -418px 0px
	}
	75% {
		-webkit-mask-position: 418px 0px;
		mask-position: 418px 0px
	}
	100% {
		-webkit-mask-position: 418px 0px;
		mask-position: 418px 0px
	}
}
.shanguang{
	position: absolute;width: 100%;height: 100%;top: 0;left: 0;
	background: #fff;
	-webkit-animation: shanguangdeng .6s ease 2s 1 both;
}
.back{
	pointer-events: auto;
	display: none;
	position: absolute;left: 3%;top:2%;width: 75px;
	-webkit-animation: fadeInRight 1s ease 0s 1 both,shakeLeftRight 1s ease 1s infinite normal;
	z-index: 11;
}
.b-start{
	pointer-events: auto;
	position: absolute;left: 0;right:0;bottom:10%;margin:0 auto;width: 441px;
	-webkit-animation: puffIn 1s ease 1.5s 1 both,pulse 1s ease 2.5s infinite normal;
}
.photoPanel{
	position:absolute;left:0;right:0;top:5%; margin:0 auto;width: 613px; height: 812px;
	background: url(../images/2-1.png) no-repeat;
	-webkit-animation: bounceInUp 1s ease .4s 1 both;
}
.b-man{
	pointer-events: auto;
	position:absolute;left:21%;bottom:19%; width: 220px; height: 75px;
	-webkit-animation: bounceInUp 1s ease .7s 1 both;
}
.b-women{
	pointer-events: auto;
	position:absolute;right:21%;bottom:19%; width: 220px; height: 75px;
	-webkit-animation: bounceInUp 1s ease .7s 1 both;
}
#okBtn{
	pointer-events: auto;
	position:absolute;left:0;right:0;bottom:1%; margin:0 auto;width: 441px; height: 99px;
	-webkit-animation: bounceInUp 1s ease .9s 1 both,pulse 1s ease 1.9s infinite normal;
    background:transparent;
    border: none;
    outline: none;
    overflow: hidden;
}
.p11 {
	position: absolute;left: 0px;right:0;top: 0;bottom:0;margin:auto;width: 727px;height: 1200px;
	-webkit-animation: bounceInDown 1s ease .7s 1 both;
}
.p12 {
	position: absolute;left: 42px; top: 96px; width: 636px; height: 1014px;
}
.p13 {
	position:absolute;left:5.66%;top:21.4%;width:94.34%;height:78.6%;
	background: url(../images/1-3.png) no-repeat;
	overflow: hidden;
	-webkit-animation: bounceInUp 1s ease 1s 1 both,shan 1s ease 2s infinite normal;
}
.p14 {
	position:absolute;left: 8px; top: 85px; width: 737px; height: 336px;
	-webkit-animation: bounceIn 1s ease 1.3s 1 both,shan 1s ease 2.3s infinite normal,shakeUpDown 1s ease 2.3s infinite normal;
}

.p22{
	position:absolute;left: 269px; bottom: 10%; width: 213px;
	-webkit-animation: fadeInUp 1s ease 3.5s 1 both,pulse 1s ease 4.5s infinite normal;	
}
.b-back{
	pointer-events: auto;
	position:absolute;left:2%;bottom:3%; width: 219px;
	-webkit-animation: bounceInUp 1s ease .7s 1 both;
}
.b-zp{
	pointer-events: auto;
	position:absolute;left:0;right:0;bottom:3%; margin:0 auto;width: 292px;
	-webkit-animation: bounceInUp 1s ease .8s 1 both,shakeUpDown 1s ease 1.8s infinite normal;
}
.b-save{
	pointer-events: auto;
	position:absolute;right:2%;bottom:3%; width: 219px;
	-webkit-animation: bounceInUp 1s ease .9s 1 both;
}


/* 海报生成 */ 
#photoWrap{
	overflow: hidden;
	background: #fff;
	position: absolute; left: 41px; top: 38px; width: 530px; height: 610px;
}
#nickname{
	position: absolute; top: 12%; left: 0;right: 0;margin: 0 auto; width: 100%;
   /* height: 60px;
    line-height: 60px; */
    text-align: center;
    color: #fff;
    font-size: 32px;
    /* font-weight: bold; */
}
.haibao{
	position: absolute;width: 100%; height:100%;top: 0%;left: 0%;
	display: none;z-index: 11;
	
}
#over{
	pointer-events: auto;
	position: absolute;width: 80%;top: 3%;left: 0;right: 0;margin: 0 auto;
	-webkit-animation: zoomIn 1s ease 0s 1 both;
}
.tt{
	position: absolute; top: 23%; left: 0;right: 0;margin: 0 auto; width: 601px;
}

/* 海报生成end */ 
/*swiper*/
.swiper-container {
	position: absolute;
	width: 100%;
	top:25%;
	-webkit-animation: bounceInUp 1s ease .4s 1 both;
}

.swiper-wrapper {
	overflow: initial;
}

.swiper-slide {
	width: 100%;
}

.swiper-slide .main-img {
	width: 90%;
	margin: 0 auto;
	display: block
}
/*swiper-end*/

/*微信信息*/
.nickname{
	position: absolute;width: 100%;height: 35px;top: 0;
	line-height: 35px;
	text-align: center;
	color: #738fc0;
	font-size: 25px;
}
.headimg{
	position:absolute;left:0;right:0;top:21%;margin:0 auto;width:138px;height:138px;
	border-radius: 50%;
	border: 3px solid #003ea2;
}

/*-----------------------------------华丽的分割线--------------------------------------------*/
.rotateAm {
	-webkit-animation-name: rotateAm;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes rotateAm {
	from {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(360deg);
	}
}
@-webkit-keyframes scaleBigHide {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		opacity: 1
	}
	to {
		-webkit-transform: scale3d(1.5, 1.5, 1.5);
		opacity: 0
	}
}

@-webkit-keyframes xunhuan {
	0% {
		-webkit-transform: translate3d(-49%, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0)
	}
}

@-webkit-keyframes fadeIn1 {
	0% {
		opacity: 0
	}
	100% {
		opacity: 0.6
	}
}

@-webkit-keyframes flash1 {
	0%,
	100%,
	50% {
		opacity: 1
	}
	25%,
	75% {
		opacity: 0.4
	}
}
@-webkit-keyframes zoomIn1 {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}
	100% {
		opacity: .6;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes puffIn1 {
	0% {
		opacity: 0;
		-webkit-transform: scale(2);
	}
	100% {
		opacity: .6;
		-webkit-transform: scale(1);
	}
}

@-webkit-keyframes suofang {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(1.3, 1.3, 1.3);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes zishow {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes zishowMc {
	0% {
		height:0px;
	}
	100% {
		height: 797px;
	}
}
@-webkit-keyframes run {
	0% {
		-webkit-transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(-49%, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0)
	}
}
@-webkit-keyframes suoxiao {
	from {
		-webkit-transform: scale3d(3, 3, 3);
		opacity: 0
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		opacity: 1
	}
}

@-webkit-keyframes mask_up {
	from {
		-webkit-mask-position-y: 1100px;
	}
	to {
		-webkit-mask-position-y: -300px;
	}
}

@-webkit-keyframes mask_down {
	from {
		-webkit-mask-position-y: -1350px;
	}
	to {
		-webkit-mask-position-y: 0;
	}
}

@-webkit-keyframes mask_left {
	from {
		-webkit-mask-position-x: -1000px;
	}
	to {
		-webkit-mask-position-x: 0px;
	}
}

@-webkit-keyframes mask_right {
	from {
		-webkit-mask-position-x: 1000px;
	}
	to {
		-webkit-mask-position-x: -300px;
	}
}

@-webkit-keyframes feiji {
	0% {
		-webkit-transform: translate3d(500%, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(-500%, 0, 0)
	}
}

@-webkit-keyframes feiji1 {
	0% {
		-webkit-transform: translate3d(-300%, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(200%, 0, 0)
	}
}

@-webkit-keyframes feiji2 {
	0% {
		-webkit-transform: translate3d(-180%, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(150%, 0, 0)
	}
}

@-webkit-keyframes shan {
	0% {
		-webkit-filter: saturate(1) brightness(1) contrast(1)
	}
	50% {
		-webkit-filter: saturate(1.1) brightness(1.2) contrast(1.1)
	}
	100% {
		-webkit-filter: saturate(1) brightness(1) contrast(1)
	}
}
@-webkit-keyframes shan1 {
	0% {
		-webkit-filter: saturate(1) brightness(1) contrast(1)
	}
	50% {
		-webkit-filter: saturate(1.05) brightness(1.05) contrast(1.05)
	}
	100% {
		-webkit-filter: saturate(1) brightness(1) contrast(1)
	}
}
@-webkit-keyframes shanguangdeng {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}