@charset "utf-8";
@font-face {
    font-family: 'SourceHanSansCN-Medium';
    src: url('font/SourceHanSansCN-Medium.woff2') format('woff2');
    font-display: block;
}
html {
-ms-touch-action: none;  /* 阻止windows Phone 的默认触摸事件 */
height:100%;
background-color: #E2EBD6;
overscroll-behavior: none;
}
body,div,p,img,table,tr,th,td {
	margin: 0;
	padding: 0;
}
body {
	background-color: #E2EBD6;
	position: fixed;
	top: 0;
	font: 16px/1.5;
	font-family: 'SourceHanSansCN-Medium';
	color: #535F5F;
}
/*字体样式*/
/* .fz01{ font-family:fzqks;} */
img{display: block;}

.music-rotating {
	animation: musicRotate 2s linear infinite;
	-webkit-animation: musicRotate 2s linear infinite;
}

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

@keyframes musicRotate {
	to {
		transform: rotate(360deg);
	}
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.tk_con::-webkit-scrollbar {
	width: 0.19rem;
	height: 0.19rem;
	background-color: #DFC8B2;
}

/*定义滚动条轨道 内阴影+圆角*/
.tk_con::-webkit-scrollbar-track {
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	border-radius: 10px;
	background-color: #DFC8B2;
}

/*定义滑块 内阴影+圆角*/
.tk_con::-webkit-scrollbar-thumb {
	border-radius: 10px;
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
	background-color: #A8402F;
}

/*  loading css */
.loading{ width:100%; height:100%; background: rgba(245,244,219,0.3); position:absolute; margin:0 auto; z-index:10000;display: flex;justify-content: center;align-items: center;}
.row{
	text-align: center;
	padding: 50px 0;
}
.dashboard{
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 30px auto;
	border: 2px #824437 solid;
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.dashboard:after, .dashboard:before{
	box-sizing: border-box;
	position: absolute;
	content: "";
}
.dashboard:after{
	box-sizing: border-box;
	width:14px;
	height: 2px;
	top: 20px;
	-webkit-transform-origin: 1px 1px;
	-moz-transform-origin: 1px 1px;
	transform-origin: 1px 1px;
	background-color:#824437;;
	-webkit-animation: dashboard_hand 2s linear infinite alternate;
	-moz-animation: dashboard_hand 2s linear infinite alternate;
	animation: dashboard_hand 2s linear infinite alternate;
}
.dashboard:before{
	box-sizing: border-box;
	width: 32px;
	height: 10px;
	background-color: #824437;
	top:20px;
	left: -2px;
}
@-webkit-keyframes dashboard_hand{
	0%{ -webkit-transform: rotate(-160deg);}
	100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
	0%{ -moz-transform: rotate(-160deg);}
	100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
	0%{ transform: rotate(-160deg);}
	100%{ transform: rotate(-20deg);}
}



.none {
    display: none
}
#box {
	width: 100%;
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: auto;
	min-height: 100vh;
	background: #E2EBD6;
	overscroll-behavior-y: none;
}

.scroll-arrow {
  position: fixed;
  left: 50%;
  bottom: .42rem;
  z-index: 20;
  width: .46rem;
  height: .46rem;
  margin-left: -.23rem;
  opacity: .9;
  pointer-events: none;
  animation: scrollArrowMove 1.3s ease-in-out infinite;
  -webkit-animation: scrollArrowMove 1.3s ease-in-out infinite;
  transition: opacity .35s ease, visibility .35s ease;
}

.scroll-arrow::before,
.scroll-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: .28rem;
  height: .28rem;
  border-right: .05rem solid #fff;
  border-bottom: .05rem solid #fff;
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
}

.scroll-arrow::before {
  top: 0;
  opacity: .45;
}

.scroll-arrow::after {
  top: .16rem;
}

.scroll-arrow.is-hide {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes scrollArrowMove {
  0%, 100% {
    -webkit-transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(.12rem);
  }
}

@keyframes scrollArrowMove {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(.12rem);
  }
}
.table_1 tr td{height: .6rem;color:#824437;}
.table_5 tr td{height: .76rem;color:#824437;text-align: left;padding-left: .2rem;}
.table_5 tr th{height: .76rem;color:#fff;background-color: #824437;padding-left: .2rem;border-color: white;text-align: left}
.biao{z-index: 2}


@keyframes lineMove {
	to {
		stroke-dasharray: 800, 800;
	}
}
@keyframes op_Show {
	to{ opacity: 1}
}
.headerPF{opacity: 0;}
@keyframes headerP {
	from{margin-top: 0.5rem;opacity: 0}
	to{margin-top: 0;opacity: 1}
}
.fourWords{position: absolute;opacity:0;}
.kuang{height: 1.5rem;display: flex;align-items: center;flex-direction: column;overflow: hidden}
.abs{position: absolute}
.border_1{border: .01rem solid #824437;padding: .08rem;width:auto;box-sizing:border-box;display:inline-block;background-color: #fff;font-size: 0;}
.border_2{border: .01rem solid #824437;padding: .07rem .2rem;width:auto;box-sizing:border-box;display:inline-block;font-size: 0;}
#p_21,#p_22,#p_23,#p_31,#p_32,#p_41,#p_42,#p_51,#p_52,#p_53,#p_61,#p_71,#p_91,#p_91,#p_92,#p_93,#p_94,#p_91{opacity: 0}
.biao{width: 6rem;padding: .08rem;background-color: #fff;border: .01rem solid #824437;}
.biao_sub{width: 5.84rem;padding: .08rem;background-color: #fff;border: .01rem solid #824437;position: relative}
.cirlce_x{border: .01rem solid #824437;border-radius: 50%;width: .84rem;height: .84rem;left: 2.58rem;bottom:-.42rem;background-color: #fff;display: flex;justify-content: center;align-items: center}
.fb{font-weight:bold;}
.t1{color:#fff}
.t2{color:#A8402F}
.t3{color:#ff0000}
.textCenter{text-align: center}
.textRight{text-align: right}
.f12{font-size:0.6em;}
.f14 {
    font-size: 0.65em;
}
.f16{font-size:0.7em;}
.f18{font-size:0.85em;}
.f20{font-size:0.9em;}
.f22{font-size:0.95em;}
.f24{font-size:1em;}
.f26{font-size:1.05em;}
.f30{font-size:1.15em;}
.f34{font-size:1.35em;}
.f36{font-size:1.45em;}
.f40{font-size:1.6em;}
.text p {
  font-size: clamp(17px, 4.8vw, 30px);
  color: #555d03;
  line-height: 1.6;
  margin:0
}

.text p span {
  font-size: clamp(33px, 8.8vw, 56px);
  color: #b77701;
  margin: 0 .1rem;
}

.intro-count-text.is-waiting {
  visibility: hidden;
}

.intro-count-text.is-show {
  visibility: visible;
  animation: introTextIn .7s ease-out both;
  -webkit-animation: introTextIn .7s ease-out both;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(.64rem);
  -webkit-transform: translateY(.64rem);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.scroll-reveal.is-show {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

.fade-in-reveal {
  transform: none;
  -webkit-transform: none;
}

.fade-in-reveal.is-show {
  transform: none;
  -webkit-transform: none;
}

.right-reveal {
  transform: translateX(.68rem);
  -webkit-transform: translateX(.68rem);
}

.left-reveal {
  transform: translateX(-.68rem);
  -webkit-transform: translateX(-.68rem);
}

.scale-reveal {
  transform: scale(.35);
  -webkit-transform: scale(.35);
  transform-origin: center;
  -webkit-transform-origin: center;
}

.scale-reveal.is-show {
  transform: scale(1);
  -webkit-transform: scale(1);
}

@-webkit-keyframes introTextIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(.58rem);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes introTextIn {
  from {
    opacity: 0;
    transform: translateY(.58rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.title {
  position: relative;
}

.title p {
  font-size: clamp(14px, 4vw, 25px);
  color: #2b5f1f;
  line-height: 1.4;
  font-weight: bold;
  margin:0
}

.tap-hand {
  position: absolute;
  right: -.58rem;
  top: .05rem;
  width: .46rem;
  pointer-events: none;
  transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
  transform-origin: 50% 85%;
  -webkit-transform-origin: 50% 85%;
  animation: tapHandPulse 1.15s ease-in-out infinite;
  -webkit-animation: tapHandPulse 1.15s ease-in-out infinite;
}

.tap-hand img {
  display: block;
  width: 100%;
  height: auto;
}

@-webkit-keyframes tapHandPulse {
  0%, 100% {
    -webkit-transform: rotate(-12deg) scale(1);
  }

  50% {
    -webkit-transform: rotate(-12deg) scale(1.18);
  }
}

@keyframes tapHandPulse {
  0%, 100% {
    transform: rotate(-12deg) scale(1);
  }

  50% {
    transform: rotate(-12deg) scale(1.18);
  }
}
.endtext p {
  font-size: clamp(17px, 4.8vw, 30px);
  color: #2f5b24;
  line-height: 2;
  margin:0
}

.lh120{line-height:120%}
.lh130 {
    line-height: 130%
}
.lh140{line-height:140%}
.lh160 {
    line-height: 160%
}
.lh180{line-height:180%}

img,
video,
iframe {
  display: block;
}

video {
  object-fit: cover;
}

.panda-sway {
  transform-origin: 50% 88%;
  animation: pandaSway 3.8s ease-in-out infinite;
  -webkit-transform-origin: 50% 88%;
  -webkit-animation: pandaSway 3.8s ease-in-out infinite;
}

@-webkit-keyframes pandaSway {
  0%, 48%, 100% {
    -webkit-transform: translateX(0) rotate(0deg);
  }

  8% {
    -webkit-transform: translateX(-0.03rem) rotate(-4deg);
  }

  18% {
    -webkit-transform: translateX(0.035rem) rotate(4deg);
  }

  28% {
    -webkit-transform: translateX(-0.018rem) rotate(-2deg);
  }

  38% {
    -webkit-transform: translateX(0) rotate(0deg);
  }
}

@keyframes pandaSway {
  0%, 48%, 100% {
    transform: translateX(0) rotate(0deg);
  }

  8% {
    transform: translateX(-0.03rem) rotate(-4deg);
  }

  18% {
    transform: translateX(0.035rem) rotate(4deg);
  }

  28% {
    transform: translateX(-0.018rem) rotate(-2deg);
  }

  38% {
    transform: translateX(0) rotate(0deg);
  }
}

.tag-bounce {
  animation: tagFloat 3.2s ease-in-out infinite;
  -webkit-animation: tagFloat 3.2s ease-in-out infinite;
}

@-webkit-keyframes tagFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-0.07rem);
  }
}

@keyframes tagFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.07rem);
  }
}
@media screen and (max-width: 640px) {
	.f12{font-size:0.6em;}
    .f14 {
        font-size: 0.65em;
    }
	.f16{font-size:0.7em;}
	.f18{font-size:0.85em;}
	.f20{font-size:0.9em;}
	.f22{font-size:0.95em;}
	.f24{font-size:1em;}
	.f26{font-size:1.05em;}
	.f30{font-size:1.15em;}
	.f34{font-size:1.35em;}
	.f36{font-size:1.45em;}
    .f40{font-size:1.6em;}
}

@media screen and (max-width: 414px) {
	.f12{font-size:0.4em;}
    .f14 {
        font-size: 0.45em;
    }
	.f16{font-size:0.5em;}
	.f18{font-size:0.65em;}
	.f20{font-size:0.7em;}
	.f22{font-size:0.75em;}
	.f24{font-size:0.8em;}
	.f26{font-size:0.85em;}
	.f30{font-size:0.95em;}
	.f34{font-size:1.15em;}
	.f36{font-size:1.25em;}
    .f40{font-size:1.6em;}
}

@media screen and (max-width: 400px) {
	.f12{font-size:0.4em;}
    .f14 {
        font-size: 0.45em;
    }
	.f16{font-size:0.5em;}
	.f18{font-size:0.65em;}
	.f20{font-size:0.7em;}
	.f22{font-size:0.75em;}
	.f24{font-size:0.8em;}
	.f26{font-size:0.85em;}
	.f30{font-size:0.95em;}
	.f34{font-size:1.15em;}
	.f36{font-size:1.25em;}
    .f40{font-size:1.6em;}
}

@media screen and (max-width: 392px) {
	.f12{font-size:0.35em;}
    .f14 {
        font-size: 0.4em;
    }
	.f16{font-size:0.45em;}
	.f18{font-size:0.6em;}
	.f20{font-size:0.65em;}
	.f22{font-size:0.7em;}
	.f24{font-size:0.75em;}
	.f26{font-size:0.8em;}
	.f30{font-size:0.9em;}
	.f34{font-size:1.1em;}
	.f36{font-size:1.2em;}
    .f40{font-size:1.5em;}
}

@media screen and (max-width: 385px) {
	.f12{font-size:0.35em;}
    .f14 {
        font-size: 0.4em;
    }
	.f16{font-size:0.45em;}
	.f18{font-size:0.6em;}
	.f20{font-size:0.65em;}
	.f22{font-size:0.7em;}
	.f24{font-size:0.75em;}
	.f26{font-size:0.8em;}
	.f30{font-size:0.9em;}
	.f34{font-size:1.1em;}
	.f36{font-size:1.2em;}
    .f40{font-size:1.5em;}
}
@media screen and (max-width: 375px) {
	.f12{font-size:0.35em;}
    .f14 {
        font-size: 0.4em;
    }
	.f16{font-size:0.45em;}
	.f18{font-size:0.6em;}
	.f20{font-size:0.65em;}
	.f22{font-size:0.7em;}
	.f24{font-size:0.75em;}
	.f26{font-size:0.8em;}
	.f30{font-size:0.9em;}
	.f34{font-size:1.1em;}
	.f36{font-size:1.2em;}
    .f40{font-size:1.5em;}
}
@media screen and (max-width: 359px) {
	.f12{font-size:0.3em;}
    .f14 {
        font-size: 0.35em;
    }
	.f16{font-size:0.4em;}
	.f18{font-size:0.5em;}
	.f20{font-size:0.55em;}
	.f22{font-size:0.6em;}
	.f24{font-size:0.65em;}
	.f26{font-size:0.7em;}
	.f30{font-size:0.8em;}
	.f34{font-size:1em;}
	.f36{font-size:1.1em;}
    .f40{font-size:1.3em;}
}
/* 自适应框架（设计图宽度） */
body {
	max-width: 8.5rem;
	margin: 0 auto;
}

	body * {
		max-width: 8.5rem;
	}




.container {
	position: relative;
	display: inline-block;
	width: 5.52rem;
	height: 3rem;
}

.robot {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	-webkit-box-shadow: 0px 0px 0.2rem 0px #707070;
	-moz-box-shadow: 0px 0px 0.2rem 0px #707070;
	box-shadow: 0px 0px 0.2rem 0px #707070;
	width: 100%;
	height: auto;
}

.redux {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 5.52rem;
	height: 3rem;
}

.tk{background: rgba(0,0,0,0.73);width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 1000;}
.tk_box1 {
	width: 6.77rem;
	position: fixed;
	height: 12.06rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1000;
	background: url(../img/tk_1.png) no-repeat;
	background-size: 100% 100%;
}

.tk_con{width:5.42rem;height:10.06rem;margin:1.03rem auto 0 0.55rem;}


.an1_1{-webkit-animation: op1 1s forwards;animation: op1 1s forwards;}
	.an1_2{-webkit-animation: op1 1s 0.5s forwards;animation: op1 1s 0.5s forwards;}
	.an1_3{-webkit-animation: op1 1s 1s forwards;animation: op1 1s 1s forwards;}
	.an1_4{-webkit-animation: op1 1s 1.5 forwards;animation: op1 1s 1.5s forwards;}
	@-webkit-keyframes yd1 {
		0% {
			-webkit-transform: translateX(-4.26rem);
			opacity: 0;
		}
	
		100% {
			-webkit-transform: translateX(0rem);
			opacity: 1;
		}
	}
	
	@keyframes yd1 {
		0% {
			transform: translateX(-4.26rem);
			opacity: 0;
		}
	
		100% {
			transform: translateX(0rem);
			opacity: 1;
		}
	}
	@-webkit-keyframes yd2 {
		0% {
			-webkit-transform: translateX(4.26rem);
			opacity: 0;
		}
	
		100% {
			-webkit-transform: translateX(0rem);
			opacity: 1;
		}
	}
	
	@keyframes yd2 {
		0% {
			transform: translateX(4.26rem);
			opacity: 0;
		}
	
		100% {
			transform: translateX(0rem);
			opacity: 1;
		}
	}
	@-webkit-keyframes cloud1 {
		0% {
			-webkit-transform: translateX(0.5rem) scale(0.95);
		}
	
		100% {
			-webkit-transform: translateX(0rem) scale(1);
		}
	}
	
	@keyframes cloud1 {
		0% {
			transform: translateX(0.5rem) scale(0.95);
		}
	
		100% {
			transform: translateX(0rem) scale(1);
		}
	}
	@-webkit-keyframes cloud2 {
		0% {
			-webkit-transform: translateY(0.3rem) translateX(-0.2rem);
		}
	
		100% {
			-webkit-transform: translateY(0rem) translateX(0rem);
		}
	}
	
	@keyframes cloud2 {
		0% {
			transform: translateY(0.3rem) translateX(-0.2rem);
		}
	
		100% {
			transform: translateY(0rem) translateX(0rem);;
		}
	}
	.logos{animation: op1 3s 2s forwards;-webkit-animation: op1 3s 2s forwards;}
	.an1_5{animation: arrow 1s 3s infinite alternate;-webkit-animation: arrow 1s 3s infinite alternate;}
	.jls{animation: arrow 2s infinite alternate;-webkit-animation: arrow 2s infinite alternate;}
	.yh{animation: op1 1s forwards;-webkit-animation: op1 1s forwards;}
	@-webkit-keyframes op1 {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	
	@keyframes op1 {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	@-webkit-keyframes arrow {
		0% {
			-webkit-transform: translateY(-0.1rem);
			opacity: 1
		}
	
		100% {
			-webkit-transform: translateY(0.1rem);
			opacity: 1;
		}
	}
	
	@keyframes arrow {
		0% {
			transform: translateY(-0.1rem);
			opacity: 1;
		}
	
		100% {
			transform: translateY(0.1rem);
			opacity: 1;
		}
	}
	@-webkit-keyframes rotateZ{
		0% {
			-webkit-transform: rotateZ(0);
		}
	
		100% {
			-webkit-transform: rotateZ(-40deg);
		}
	}
	
	@keyframes rotateZ {
		0% {
			transform: rotateZ(0);
		}
	
		100% {
			transform: rotateZ(-40deg);
		}
	}
	@-webkit-keyframes rotateZ2{
		0% {
			-webkit-transform: rotateZ(0);
		}
	
		100% {
			-webkit-transform: rotateZ(-10deg);
		}
	}
	
	@keyframes rotateZ2 {
		0% {
			transform: rotateZ(0);
		}
	
		100% {
			transform: rotateZ(-10deg);
		}
	}
	.scales{animation: scale 2s forwards;-webkit-animation: scale 2s forwards;}
	@-webkit-keyframes scale{
		0% {
			-webkit-transform: scale(0.5);
		}
	
		100% {
			-webkit-transform: scale(1);
		}
	}
	
	@keyframes scale {
		0% {
			transform: scale(0.5);
		}
	
		100% {
			transform: scale(1);
		}
	}
	.train{animation:train 3s 1s infinite; -webkit-animation:train 3s 1s infinite;}
	@-webkit-keyframes train{
		0% {
			right:20rem;
		}
	
		100% {
			right: -24rem;
		}
	}
	
	@keyframes train {
		0% {
			right:20rem;
		}
	
		100% {
			right: -24rem;
		}
	}
	.hbboy{animation:hbboy 3s infinite; -webkit-animation:hbboy 3s infinite;}
	@-webkit-keyframes hbboy{
		0% {
			left: 2.29rem;
			top: 13.63rem;
		}
		10% {
			left: 2.29rem;
			top: 13.63rem;
		}
	
		60% {
			left:-2rem;
			top: 17.5rem;
		}
		100% {
			left:-2.5rem;
			top: 17.5rem;
		}
	}
	
	@keyframes hbboy {
		0% {
			left: 2.29rem;
			top: 13.63rem;
		}
		10% {
			left: 2.29rem;
			top: 13.63rem;
		}
	
		60% {
			left:-2rem;
			top: 17.5rem;
		}
		100% {
			left:-2.5rem;
			top: 17.5rem;
		}
	}
	.share{opacity: 0;}
	.bird1{animation:bird1 2s forwards; -webkit-animation:bird1 2s forwards;}
	.bird2{animation:bird1 4s forwards; -webkit-animation:bird1 4s forwards;}
	.bird3{animation:bird1 4s forwards; -webkit-animation:bird1 4s forwards;}
	.bird4{animation:bird4 4s forwards; -webkit-animation:bird4 4s forwards;}
	@-webkit-keyframes bird4 {
		0% {
			-webkit-transform: translateX(-8rem) scale(0.8);
			opacity: 0;
		}
	
		100% {
			-webkit-transform: translateX(0rem) scale(1);
			opacity: 1;
		}
	}
	
	@keyframes bird4 {
		0% {
			transform: translateX(-8rem) scale(0.8);
			opacity: 0;
		}
	
		100% {
			transform: translateX(0rem) scale(1);
			opacity: 1;
		}
	}
	@-webkit-keyframes bird1 {
		0% {
			-webkit-transform: translateY(-4.26rem) scale(0.8);
			opacity: 0;
		}
	
		100% {
			-webkit-transform: translateY(0rem) scale(1);
			opacity: 1;
		}
	}
	
	@keyframes bird1 {
		0% {
			transform: translateY(-4.26rem) scale(0.8);
			opacity: 0;
		}
	
		100% {
			transform: translateY(0rem) scale(1);
			opacity: 1;
		}
	}