@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%;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:#1d212d; color:#282828 ; height:100%;position: relative;}
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;}
table { border-collapse:collapse; border-spacing:0}
.clearfix:after { content: " ";display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

.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行省略号*/
.fl{float: left;	}
.fr{float: right;}
.show{display: block;}
.hide{display: none;}

html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;
	margin: 0 auto;
}


#wrapper.swiper-container{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#wrapper .swiper-slide{
	position: relative;
	width: 100%;
	height: 100%;
}
.page1{
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(../images/bg1.jpg);
	background-size:cover ;
	background-repeat:no-repeat ;
}
.page1 .logo{
	position: fixed;
	top: 0.55rem;
	right: 0.5rem;
	width: 1.18rem;
	z-index: 58;
}
.page1 .page1_con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 10.4rem;
	margin-top: -5.4rem;
}
.page1_con .tit{
	position: absolute;
	top: 0;
	left: 1.22rem;
	width: 2.26rem;
}
.page1_con .brand{
	position: absolute;
	bottom: 0.84rem;
	left: 1.22rem;
	width: 3.53rem;
}
.page1_con .start{
	position: absolute;
	bottom: 0;
	left: 1.22rem;
	width: 1.78rem;
	height: 0.45rem;
	background-image:url(../images/start.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page2{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../images/bg2.jpg) ;
	background-size:cover ;
	background-repeat:no-repeat ;
}
.page2 .page2_con{
	position: absolute;
	left: 1.55rem;
	top: 50%;
	width: 4.4rem;
	height: 4.2rem;
	margin-top: -2.2rem;
}
.page2_con div{
	position: relative;
	width: 100%;
	background-image:url(../images/msg2.png) ;
	background-size:4.4rem 4.18rem;
	background-repeat:no-repeat ;
	overflow: hidden;
}
.page2_con .line1{
	background-position:0 0;
	height: 0.8rem;
}
.page2_con .line2{
	background-position:0 -0.8rem;
	height: 1.35rem;
}
.page2_con .line3{
	background-position:0 -2.15rem;
	height: 1.12rem;
}
.page2_con .line4{
	background-position:0 -3.27rem;
	height: 0.95rem;
}
.arrow{
	position: absolute;
	bottom: 0.45rem;
	left: 50%;
	margin-left: -0.31rem;
	width: 0.62rem;
	height: 0.36rem;
	background-image:url(../images/arrow.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	animation: updown 1s linear infinite;
	-webkit-animation: updown 1s linear infinite;
}
@keyframes updown{
	0%{
		transform: translate3d(0,-10px,0);
		-webkit-transform: translate3d(0,10px,0);
	}
	100%{
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
	}
}
@-webkit-keyframes updown{
	0%{
		transform: translate3d(0,-10px,0);
		-webkit-transform: translate3d(0,10px,0);
	}
	100%{
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
	}
}


.page3{
	position: relative;
	width: 100%;
	height: 100%;
	background:#edebeb ;
}
.page3 .next{
	position: fixed;
	bottom: 0.5rem;
	right: 0.78rem;
	width: 1.68rem;
	height: 0.52rem;
	background-image:url(../images/next.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 5888;
}
.scroll_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.scroll_con{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 1rem;
}
.scroll_con .msg_tit{
	position: relative;
	width: 5.54rem;
	height: 0.66rem;
	background-image:url(../images/msg_tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0 auto;
}
.content{
	position: relative;
	width: 100%;
	padding: 0.6rem 0.3rem;
}
.content:before{
	content: '';
	position: absolute;
	left: 0.75rem;
	top: 3.52rem;
	bottom: 0;
	width: 0.02rem;
	background: #000;
}
.content:after{
	content: '';
	position: absolute;
	left: 0.75rem;
	top: 3.42rem;
	width: 0.33rem;
	margin-left: -0.165rem;
	height: 0.56rem;
	background-image:url(../images/icon_car.png) ;
	background-size:100% 100%;
	z-index: 1;
}

.img_wrap{
	position: relative;
	width: 100%;
	padding: 0 0.45rem;
}
.atlas{
	position: relative;
	width: 100%;
}
.atlas .swiper-slide{
	position: relative;
	width: 100%;
}
.atlas .swiper-slide img{
	position: relative;
	width: 100%;
}
.img_wrap .button_next{
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -0.92rem;
	width: 0.46rem;
  height: 1.84rem;
 	background-image:url(../images/arrow_r.png) ;
  background-size:100% 100%;
  background-repeat:no-repeat ;
  z-index: 999;
}
.img_wrap .button_prev{
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -0.92rem;
	width: 0.46rem;
  height: 1.84rem;
 	background-image:url(../images/arrow_l.png) ;
  background-size:100% 100%;
  background-repeat:no-repeat ;
  z-index: 999;
}
.content_msg{
	position: relative;
	width: 100%;
	padding: 0.32rem  0.46rem 0.5rem 1rem;
}
.content_msg .content_tit{
	position: relative;
	width: 100%;
	font-size: 0.38rem;
	line-height: 0.6rem;
	color: #000;
	padding-bottom: 0.15rem;
}
.content_msg .content_cen{
	position: relative;
	width: 100%;
	font-size: 0.26rem;
	line-height: 0.44rem;
	color: #000;
}
.content_msg .content_more{
	position: relative;
	width: 100%;
	font-size: 0.26rem;
	line-height: 0.44rem;
	color: #8c8c8c;
}

.page4{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../images/bg4.jpg) ;
	background-size:cover ;
	background-repeat:no-repeat ;
}
.page4 .logo{
	position: absolute;
	top: 0.5rem;
	right: 0.35rem;
	width: 1.18rem;
}
.page4 .page4-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 11.5rem;
	margin-top: -5.75rem;
}
.page4-con .input-tit{
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 0.5rem;
}
.input-tit img{
	width: 4.62rem;
	margin: 0 auto;
}
.page4-con .input-wrap{
	position: relative;
	width: 5.5rem;
	height: 3rem;
	background: rgba(255,255,255,0.8);
	margin: 0 auto;
	box-shadow:0px 0px 14px 5px #a6a4a4;
	padding: 0.1rem 0.3rem;
}
.input-wrap .sendword{
	position: relative;
	width: 100%;
	line-height: 0.65rem;
	font-size: 0.4rem;
	text-align: center;
	background: transparent;
	margin: 0;
	padding: 0;
	height: 1.95rem;
	overflow: hidden;
}
.input-wrap .word-line{
	position: absolute;
	left: 0.3rem;
	right: 0.3rem;
	height: 1px;
	background: #aaaaaa;
}
.input-wrap .word-line1{
	top: 0.75rem;
}
.input-wrap .word-line2{
	top: 1.4rem;
}
.input-wrap .word-line3{
	top: 2.05rem;
}
.name{
	position: relative;
	width: 100%;
	line-height: 0.65rem;
	font-size: 0.4rem;
	text-align: right;
	background: transparent;
	margin-top: 0.1rem;
}
.page4-con .card-tit{
	position: relative;
	width: 3.84rem;
	height: 1.72rem;
	background-image:url(../images/card_tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0.88rem auto 1.22rem;
}
.page4-con .create{
	position: relative;
	width: 3.05rem;
	height: 0.61rem;
	background-image:url(../images/create.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0 auto;
}
.page4-con .card-logo{
	position: relative;
	width: 4.21rem;
	height: 0.66rem;
	background-image:url(../images/card_logo.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 1.36rem auto 0;
}



.page5{
	position: relative;
	width: 100%;
	height: 100%;
}
.page5 .logo{
	position: absolute;
	top: 0.5rem;
	right: 0.35rem;
	width: 1.18rem;
}
.page5 .page5-con{
	position: absolute;
	left: 0;
	bottom: 1.2rem;
	width: 100%;
}
.page5-con .word-con{
	position: relative;
	width: 4.9rem;
	margin: 0 auto;
}
.word-con .word-cen{
	position: relative;
	width: 4.9rem;
	font-size: 0.4rem;
/*	line-height: 0.6rem;*/
	color: #fff;
	text-align: center;
	
}
.word-cen span{
	display: inline-block;
	line-height: 0.4rem;
	padding: 0.1rem 0;
	border-bottom:1px solid #fff ;
}
.word-con .word-author{
	position: relative;
	width: 4.9rem;
	font-size: 0.4rem;
	color: #fff;
	text-align: center;
}
.word-author span{
	display: inline-block;
	line-height: 0.4rem;
	padding: 0.1rem 0;
	border-bottom:1px solid #fff ;
}
.img-w{
	position: relative;
	width: 100%;
	text-align: center;
}
.page5-con .card-tit{
	position: relative;
	width: 3.84rem;
	margin: 1.28rem auto 1.64rem;
}
.page5-con .code{
	position: relative;
	width: 1.04rem;
	margin: 0 auto;
}
.page5-con .card-logo{
	position: relative;
	width: 4.21rem;
	margin: 0.96rem auto 0; 
}
#page5{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../images/card_bg.jpg) ;
	background-size:cover ;
	background-repeat:no-repeat ;
}
.share-card{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 19900;
	opacity: 0;
}