@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%;
	background-size:cover ;
	margin:0 auto;
	background: #96b874;
}
.loading-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #96b874;
	z-index: 9999;
}
.loading-wrap .loading-con{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.8rem;
	height: 2.1rem;
	margin-left: -1.4rem;
	margin-top: -1.05rem;
}

.loading-con .progressbar{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.32rem;
	border-radius: 0.32rem;
	background: #566f40;
	overflow: hidden;
}
.progressbar span{
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 0.32rem;
	border-radius: 0.32rem;
	background:#deeb99 ;
}
.loading-con .loading-icon{
	position: absolute;
	left: 50%;
	top: 0;
	width: 2rem;
	height: 2rem;
	margin-left: -1rem;
	background-image:url(../img/loading.gif) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.kv-page{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../img/bg1.png) ;
	background-size:cover ;
	background-repeat:no-repeat ;
}
.kv-page .kv-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 100%;
	max-height: 12rem;
	transform: translateY(-49%);
	transform: translateY(-49%);
}
.kv-con .tit{
	position: absolute;
	left: 50%;
	top: 0;
	width: 5.78rem;
	height: 2.3rem;
	margin-left: -2.89rem;
	background-image:url(../img/tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.kv-con .msg{
	position: absolute;
	left: 50%;
	top: 3.16rem;
	width: 3.77rem;
	height: 1.35rem;
	margin-left: -1.885rem;
	background-image:url(../img/msg.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.kv-con .car{
	position: absolute;
	left: 50%;
	bottom: 1.82rem;
	width: 1.78rem;
	height: 1.47rem;
	margin-left: -0.89rem;
	background-image:url(../img/car.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.kv-con .car.act{
	transition: all 1s;
	-webkit-transition: all 1s;
	transform: translateY(4rem);
	-webkit-transform: translateY(4rem);
}

.kv-con .start-btn{
	position: absolute;
	left: 50%;
	bottom: 0rem;
	width: 2.31rem;
	height: 0.82rem;
	margin-left: -1.155rem;
	background-image:url(../img/start_btn.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.hintCli{
	animation: hintClick infinite 1s linear;
	-webkit-animation: hintClick infinite 1s linear;
}
@keyframes hintClick{
	0%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
	50%{
		transform: scale3d(0.88,0.88,0.88);
		-webkit-transform: scale3d(0.88,0.88,0.88);
	}
	100%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
}
@-webkit-keyframes hintClick{
	0%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
	50%{
		transform: scale3d(0.88,0.88,0.88);
		-webkit-transform: scale3d(0.88,0.88,0.88);
	}
	100%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
}



.car-page{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.car-page #canvas{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.car-page .playcar{
	position: absolute;
	left: 50%;
	bottom: 1rem;
	width: 2.58rem;
	height: 0.82rem;
	margin-left: -1.29rem;
	background-image:url(../img/start_map.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 88;
}
.car-page .hint-loosen{
	position: absolute;
	left: 50%;
	bottom: 2.18rem;
	width: 1.55rem;
	height: 0.46rem;
	margin-left: -0.775rem;
	background-image:url(../img/hint-loosen.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.car-page .dialog-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 88888;
}
.dialog-wrap .dialog-con{
	position: absolute;
	left: 1rem;
	width: 5.5rem;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.dialog-con .dialogbg{
	position: relative;
	width: 100%;
}
.dialog-con .photograph{
	position: absolute;
	bottom: 0.4rem;
	left: 50%;
	width: 2.3rem;
	height: 0.82rem;
	margin-left: -1.15rem;
	background-image:url(../img/photograph.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.car-page .img-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 88888;
}
.img-wrap .img-con{
	position: absolute;
	left: 1rem;
	top: 50%;
	width: 5.5rem;
	height: 10.2rem;
	margin-top: -4.5rem;
}
.img-con .img-show{
	position: relative;
	width: 5.5rem;
	height: 8rem;
	background-size:cover ;
	background-repeat:no-repeat ;
	border-radius: 0.2rem;
}
.img-con .return-btn{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.58rem;
	height: 0.82rem;
	background-image:url(../img/return_map.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.img-con .album-btn{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 2.3rem;
	height: 0.82rem;
	background-image:url(../img/album.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.car-page .form-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 88888;
}
.form-wrap .form-con{
	position: absolute;
	left: 1rem;
	top: 50%;
	width: 5.5rem;
	height: 3.34rem;
	margin-top: -1.67rem;
	background: #96b874;
	border-radius: 0.2rem;
}
.form-con .form-tit{
	position: relative;
	width: 2.25rem;
	height: 0.61rem;
	background-image:url(../img/form_tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0.36rem auto 0.2rem;
}
.form-con .input-wrap{
	position: relative;
	display: block;
	width: 5rem;
	height: 0.8rem;
	background: #566f40;
	border-radius: 0.1rem;
	margin: 0 auto;
}
.input-wrap input{
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 0.78rem;
	background: transparent;
	text-align: center;
	color: #fff;
	font-size: 0.4rem;
}
.input-wrap input::-webkit-input-placeholder{
	color: #fff;
}
.form-con .input-btn{
	position: relative;
	width: 2.3rem;
	height: 0.82rem;
	background-image:url(../img/sure.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0.22rem auto 0;
}

.album-page{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../img/album_bg.png) ;
	background-size:cover;
	background-repeat:no-repeat ;
}
.album-page .album-con{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 100%;
	height: 100%;
	max-height: 12.08rem;
}
.album-con .clock-in{
	position: absolute;
	top: 0;
	left: 0.76rem;
	width: 6.05rem;
	height: 0.94rem;
	background-image:url(../img/clock_in.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.clock-in .name{
	position: absolute;
	left: 1.2rem;
	top: -0.08rem;
	line-height: 0.5rem;
	font-size:0.36rem;
	color: #502813;
	font-weight:bold;
	font-family: "微软雅黑";
}
.clock-in .num{
	position: absolute;
	left: 2.22rem;
	right: 3.26rem;
	text-align: center;
	top: 0.5rem;
	line-height: 0.5rem;
	font-size:0.4rem;
	color: #502813;
	font-weight:bold;
	font-family: "微软雅黑";
}
.album-con .album-tit{
	position: absolute;
	left: 50%;
	bottom: 7.8rem;
	width: 4.44rem;
	height: 0.48rem;
	margin-left: -2.22rem;
	background-image:url(../img/album_tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.album-con .album-list{
	position: absolute;
	left: 0.94rem;
	width: 6rem;
	bottom: 1.65rem;
}
.album-list .album-item{
	position: relative;
	float: left;
	width: 1.82rem;
	height: 1.85rem;
	margin-right: 0.1rem;
	margin-bottom: 0.06rem;
	background-image:url(../img/default.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.album-list .album-item.canclick.act:after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	border: 0.06rem solid #fff;
	width: 1.78rem;
	height: 1.78rem;
	border-radius: 0.2rem;
	box-sizing: border-box;
	z-index: 88;
}
.album-list .album-item.canclick:nth-of-type(1){
	background-image:url(../img/s1.png) ;
}
.album-list .album-item.canclick:nth-of-type(2){
	background-image:url(../img/s2.png) ;
}
.album-list .album-item.canclick:nth-of-type(3){
	background-image:url(../img/s3.png) ;
}
.album-list .album-item.canclick:nth-of-type(4){
	background-image:url(../img/s4.png) ;
}
.album-list .album-item.canclick:nth-of-type(5){
	background-image:url(../img/s5.png) ;
}
.album-list .album-item.canclick:nth-of-type(6){
	background-image:url(../img/s6.png) ;
}
.album-list .album-item.canclick:nth-of-type(7){
	background-image:url(../img/s7.png) ;
}
.album-list .album-item.canclick:nth-of-type(8){
	background-image:url(../img/s8.png) ;
}
.album-list .album-item.canclick:nth-of-type(9){
	background-image:url(../img/s9.png) ;
}

.album-con .album-return{
	position: absolute;
	left: 0.98rem;
	bottom: 0;
	width: 2.58rem;
	height: 0.82rem;
	background-image:url(../img/return_map.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.album-con .album-sure{
	position: absolute;
	right: 0.98rem;
	bottom: 0;
	width: 2.31rem;
	height: 0.82rem;
	background-image:url(../img/sure.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.word-page{
	position: relative;
	width: 100%;
	height: 100%;
	background-size:cover ;
	background-repeat:no-repeat;
}
.word-page .word-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 11rem;
	margin-top: -5rem;
}
.word-con .word-tit{
	position: absolute;
	left: 50%;
	top: 0;
	width: 4.42rem;
	height: 0.47rem;
	margin-left: -2.21rem;
	background-image:url(../img/word_tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.word-con .word-cen{
	position: absolute;
	left: 1rem;
	top: 1.46rem;
	width: 5.5rem;
	height: 7.6rem;
	background:rgba(150,184,116,0.8) ;
	border-radius: 0.2rem;
	padding: 0.44rem 0;
	overflow: hidden;
}
.word-cen .word-wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.word-wrap .word-list{
	position: relative;
	width: 100%;
	padding: 0 0.28rem;
}
.word-list .word-item{
	position: relative;
	width: 100%;
	padding-left:0.72rem;
	line-height: 0.44rem;
	font-size: 0.32rem;
	color: #fff;
	margin-bottom: 0.4rem;
}
.word-list .word-item:after{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	box-sizing: border-box;
	border: 0.04rem solid #fff;
	border-radius: 0.5rem;
}
.word-list .word-item.act:before{
	content: '';
	position: absolute;
	left: 0.08rem;
	top: 50%;
	margin-top: -0.17rem;
	width: 0.34rem;
	height: 0.34rem;
	background: #fff;
	border-radius: 0.35rem;
}


.word-con .word-return{
	position: absolute;
	left: 0.98rem;
	bottom: 0;
	width: 2.58rem;
	height: 0.82rem;
	background-image:url(../img/return_icon.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.word-con .word-sure{
	position: absolute;
	right: 0.98rem;
	bottom: 0;
	width: 2.31rem;
	height: 0.82rem;
	background-image:url(../img/sure.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}


.share-page{
	position: relative;
	width: 100%;
	height: 100%;
}
.share-page .crad-bg{
	position: relative;
	width: 100%;
	height: 100%;
	filter: blur(4px);
	-webkit-filter: blur(4px);
}
.share-page .cead-con{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 78%;
	z-index: 88;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
} 
.share-page .hint-save{
	position: absolute;
	left: 0;
	bottom: 1.2rem;
	text-align: center;
	width: 100%;
	color: #fff;
	font-size: 0.3rem;
	z-index: 888;
	animation: tofade infinite 6s linear;
	-webkit-animation: tofade infinite 6s linear;
}
.again-btn{
	position: absolute;
	left: 50%;
	bottom: 0.4rem;
	text-align: center;
	width: 2rem;
	margin-left: -1rem;
	color: #fff;
	line-height: 0.5rem;
	font-size: 0.3rem;
	z-index: 888;
}



@keyframes tofade{
	0%{
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes tofade{
	0%{
		opacity: 1;
	}
	15%{
		opacity: 0;
	}
	30%{
		opacity: 1;
	}
	100%{
		opacity: 1;
	}
}
.music {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 1999;
  width: 0.6rem;
  height: 0.6rem;
  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)
  }
}
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}