@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
* { box-sizing:border-box; }
html{ font-size:625%;!important;height:100%;}
body{ font-family:苹方,'PingFangSC-Regular','PingFang SC','Helvetica Neue','Helvetica',STHeitiSC-Light,Arial,
sans-serif,"san francisco",HelveticaNeue-Light,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB",
"Hiragino Sans GB W3","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif; -webkit-text-size-adjust:none;
    font-size:.16rem; min-width:320px; background:#fff; color:#282828 ; height:100%;position: relative;
    touch-action:none;
    }
h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:.14rem;}
form{display:inline}
ul,ol{list-style:none}
a{text-decoration:none; color:#666; font-size:.12rem;}
a:hover, a:active, a:focus{text-decoration:none;}
ins { text-decoration:none; }
em , i { font-style:normal; }
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
button,input,textarea{ border-radius: 0; vertical-align:middle;outline:none;border:none;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
textarea{resize:none}
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button}
input:focus:-moz-placeholder,input:focus::-webkit-input-placeholder {color:transparent}
button::-moz-focus-inner,input::-moz-focus-inner { padding:0; border:0}
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button {-webkit-appearance:none;!important;}
table { border-collapse:collapse; border-spacing:0}

.fl{float:left;}
.fr{float:right;}
.hide{display:none;}
.show{display: block;}
.ellipsis{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}   /*单行省略号*/
.two-ellipsis { display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden;} /*2行省略号*/

.clearfix:after { content: " ";display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

html,body{
	position: relative;
	width: 100%;
	height: 100%;
	margin:0 auto;
}
.swiper-container{
	width: 100%;
	height: 100%;
}
.swiper-slide{
	position: relative;
	width: 100%;
	height: 100%;
}
.page1-wrap{
	background-image:url(../img/bg1.jpg) ;
	background-size:100% 100%;
	background-position:center center;
}
.page1-wrap .page1-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 12.2rem;
	margin-top: -6.1rem;
}
.page1-con .kv{
	position: absolute;
	left: 0.8rem;
	top: 0;
	width: 6.7rem;
	height: 5.7rem;
	background-image:url(../img/kv.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page1-con .tit{
	position: absolute;
	left: 50%;
	top: 7.5rem;
	width: 4.22rem;
	height: 1.47rem;
	margin-left: -2.11rem;
	background-image:url(../img/tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page1-con .logo{
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1.13rem;
	height: 0.67rem;
	margin-left: -0.565rem;
	background-image:url(../img/logo.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}

.page2-wrap{
	background-image:url(../img/bg.jpg) ;
	background-size:100% 100%;
	background-position:center center;
}
.page2-wrap .page2-con{
	position: absolute;
	left: 0;
	top: 50%;
	height: 12rem;
	width: 100%;
	margin-top: -6rem;
}
.page2-con .tit-kv{
	position: absolute;
	left: 0.9rem;
	top: 0;
	width: 6.6rem;
	height: 2rem;
	background-image:url(../img/tit-logo.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page2-con .tit2{
	position: absolute;
	left: 50%;
	top: 2.5rem;
	width: 4rem;
	height: 0.7rem;
	margin-left: -2rem;
	background-image:url(../img/tit2.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page2-con .tit-msg{
	position: absolute;
	left: 50%;
	top: 3.5rem;
	width: 3.1rem;
	height: 1.51rem;
	margin-left: -1.55rem;
	background-image:url(../img/xi.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page2-con .img-tit{
	position: absolute;
	left: 50%;
	bottom: 5.5rem;
	width: 5.82rem;
	height: 0.26rem;
	margin-left: -2.91rem;
	background-image:url(../img/img-tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page2-con .bank{
	position: absolute;
	left: 1.22rem;
	bottom: 0;
	height: 5.1rem;
	width: 5.06rem;
}
.bank .swiper-slide{
	position: relative;
	width: 2.75rem;
	height: 100%;
	background-size:cover ;
	background-position:center center;
	background-repeat:no-repeat ;
}
.page2-con .next{
	position: absolute;
	right: 0.42rem;
	bottom: 2.55rem;
	width: 0.45rem;
	height: 0.45rem;
	margin-bottom: -0.225rem;
	background-image:url(../img/next.png) ;
	background-size:100% 100%;
}
.page2-con .prev{
	position: absolute;
	left: 0.42rem;
	bottom: 2.55rem;
	width: 0.45rem;
	height: 0.45rem;
	margin-bottom: -0.225rem;
	background-image:url(../img/prev.png) ;
	background-size:100% 100%;
}
.page3-wrap{
	background-image:url(../img/bg.jpg) ;
	background-size:100% 100%;
	background-position:center center;
}
.page3-wrap .page3-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	overflow: hidden;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	padding-top: 2rem;
}
.page3-con .tit-kv{
	position: absolute;
	left: 0.9rem;
	top: 0;
	width: 6.6rem;
	height: 2rem;
	background-image:url(../img/tit-logo.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page3-con .tit3{
	position: relative;
	width: 4.52rem;
	height: 1.07rem;
	background-image:url(../img/tit3.png) ;
	background-repeat:no-repeat ;
	background-size:100% 100%;
	margin: 0.42rem auto 0;
}
.page3-con .msg3{
	position: relative;
	width: 5.75rem;
	height: 0.68rem;
	background-image:url(../img/msg3.png) ;
	background-repeat:no-repeat ;
	background-size:100% 100%;
	margin: 0.26rem auto 0.76rem;
}
.page3-con .form-wrap{
	position: relative;
	width: 5.9rem;
	margin: 0 auto;
	overflow: hidden;
}
.form-wrap .form-tit{
	position: relative;
	width: 100%;
	padding-left: 0.68rem;
	padding-bottom: 0.28rem;
	overflow: hidden;
}
.form-tit .tit-msg{
	position: absolute;
	left: 0;
	top: 0;
	width: 0.6rem;
	line-height: 0.28rem;
	font-size: 12px;
	color: #fff;
}
.form-tit .input-wrap{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.input-wrap input{
	position: relative;
	width: 100%;
	height: 0.5rem;
	line-height: 0.48rem;
	border: 1px solid #fff;
	font-size: 12px;
	background: transparent;
	color: #fff;
	padding-left: 0.12rem;
}
.intro-wrap{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-left: 0.68rem;
    padding-bottom: 0.28rem;
}
.intro-wrap .intro-msg{
	position: absolute;
  left: 0;
  top: 0;
  width: 0.6rem;
  line-height: 0.28rem;
  font-size: 12px;
  color: #fff;
}
.textarea-wrap{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0.12rem;
	border: 1px solid #fff;
}
.textarea-wrap textarea{
	position: relative;
	width: 100%;
	height: 2.2rem;
	border: none;
	background:transparent ;
	color: #fff;
	font-size: 12px;
	line-height: 0.4rem;
	
}
textarea::-webkit-input-placeholder{
	color: rgba(255,255,255,0.58);
}
.name-tel{
	position: relative;
	width: 100%;
	height: 0.5rem;
}
.name-wrap{
	position: relative;
	float: left;
	overflow: hidden;
}
.name-wrap .name{
	position: relative;
	width: 0.68rem;
  line-height: 0.5rem;
  font-size: 12px;
  color: #fff;
  float: left;
}
.name-wrap #name{
  position: relative;
  width: 1.98rem;
  height: 0.5rem;
  line-height: 0.48rem;
  border: 1px solid #fff;
  font-size: 12px;
  background: transparent;
  color: #fff;
  padding-left: 0.12rem;
}

.tel-wrap{
	position: relative;
	float: right;
	overflow: hidden;
}
.tel-wrap .tel{
	position: relative;
	width: 0.68rem;
  line-height: 0.5rem;
  font-size: 12px;
  color: #fff;
  float: left;
}
.tel-wrap #tel{
	position: relative;
  width: 2.18rem;
  height: 0.5rem;
  line-height: 0.48rem;
  border: 1px solid #fff;
  font-size: 12px;
  background: transparent;
  color: #fff;
  padding-left: 0.12rem;
}
.page3-con .submit{
	position: relative;
	width: 1.36rem;
	height: 0.4rem;
	background-image:url(../img/submit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0.4rem auto 0.3rem;
}
.page3-con .hint-msg{
	position: relative;
	width: 5.84rem;
	height: 0.35rem;
	background-image:url(../img/line.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0 auto;
}
.page3-con .logo{
	position: relative;
	width: 1.13rem;
	height: 0.67rem;
	background-image:url(../img/logo.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0.48rem auto 0;
}


.music {
  position: fixed;
  top: 0.28rem;
  right: 0.28rem;
  z-index: 1999;
  width: 0.56rem;
  height: 0.56rem;
  background-image: url("../img/music.png");
  background-size: 100% 100%;
  background-repeat: no-repeat
}
.music_on {
  background-image: url("../img/music.png");
  animation: musicroate 2s linear infinite;
  -webkit-animation: musicroate 2s linear infinite
}

@keyframes musicroate {
  from {
    transform: rotate(0);
    -webkit-transform: rotate(0)
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg)
  }
}

@-webkit-keyframes musicroate {
  from {
    transform: rotate(0);
    -webkit-transform: rotate(0)
  }

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

.hint{
	position: fixed;
	left: 50%;
	top: 50%;
	width: 5rem;
	padding: 0.1rem ;
	color: #fff;
	font-size: 0.32rem;
	text-align: center;
	line-height: 0.58rem;
	z-index: 999;
	transform: translate(-50%,-50%);
	background: rgba(0,0,0,0.88);
	border-radius: 0.2rem;
}
.arrow{
	position: absolute;
	left: 50%;
	bottom: 2.8%;
	width: 0.6rem;
	height: 0.6rem;
	background-image:url(../img/arrow.png) ;
	background-size:100% 100%;
	margin-left: -0.3rem;
	z-index: 9999;
	animation: arrow 2s infinite ease;
	-webkit-animation: arrow 2s infinite ease;
}
@keyframes arrow{
	0%{
		transform: translateY(0);
		-webkit-transform: translateY(0);
		opacity: 0.58;
	}
	50%{
		transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
		opacity: 1;
	}
	100%{
		transform: translateY(0);
		-webkit-transform: translateY(0);
		opacity: 0.58;
	}
}
@-webkit-keyframes arrow{
	0%{
		transform: translateY(0);
		-webkit-transform: translateY(0);
		opacity: 0.58;
	}
	50%{
		transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
		opacity: 1;
	}
	100%{
		transform: translateY(0);
		-webkit-transform: translateY(0);
		opacity: 0.58;
	}
}