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,
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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
}

* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body{margin: 0px;
	padding: 0px;
	overflow: hidden;
    background-color:#383232;    
    background-size:100%;
}
#noteblock{
    pointer-events: none;
    animation:tip_move 1.5s linear infinite;
}

@keyframes tip_move {
    0%{
        transform: translateY(70px);/*translateX(-50%);*/
    }
    100%{
        transform: translateY(0px);/* translateX(-50%);*/
    }
}

/*音乐 begin*/

#rotate {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	z-index: 9999;
	background-image: url("https://lib.zjol.com.cn/material/f1001c/images/mu.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #688A4A;
    border-radius: 25px;
	-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
	pointer-events: visible;
}

.rotate_ani {
	-webkit-animation: rotating 3s linear 0s infinite;
	-moz-animation: rotating 3s linear 0s infinite;
	-ms-animation: rotating 3s linear 0s infinite;
	animation: rotating 3s linear 0s infinite;
}

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

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

@keyframes rotating {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
.hide{display:none}
/*end end*/

html, body {
	position: relative;
	height: 100%;
  }
  body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color:#000;
	margin: 0;
	padding: 0;
  }
  .swiper-container {
	position: absolute;
	left:0;
	top:0;
	z-index:999;
	width: 100%;
	height: 100%;
  }
  .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-fslexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
  }
  #swiper-container2 .swiper-slide {
	font-size: 18px;
	height: auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	line-height:100px;
	background: #4390EE;
	color: #fff;

  }


.loadingBox {
	position:absolute;
	left:0;
	top:0;
	z-index:9999;
	width:750px;
	height:100%;
	background:#F6FBF4 url(../images/loading/loadingbg.jpg) no-repeat;
	background-size:100% auto;
}
.loading {
	position:absolute;
	/*top:460px;*/
	width:100%;
	height:100%;
}
.loading .timeline {
	position:absolute;
	top:450px;
	left:0;
	width:100%;
	text-align:center;
	color:#0A5B00;
	font-size:36px;
}

.videoBox {
	position:absolute;
	left:0;
	top:0;
	width:750px;
	height: 100%;
	overflow: hidden;;
	/*border:10px solid #b5c6a0*/
}
.videoBox .videoPlay,.videoBox .videoDz,.videoBox .videoFm {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:99
}

.videoBox .videoPlay,.videoBox .videoDz,.videoBox .videoFm2{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:99
}
.videoBox .playBtn {
	position:absolute;
	top:50%;
	margin:auto;
	left:0;
	right:0;
	-webkit-animation:videoBtnPulse 2s linear infinite;
	animation:videoBtnPulse 2s linear infinite
}
.videoBox .playBtn1 {
	top:100px
}
.videoBox .videoPlay {
	display:none;
	background:#b5c6a0
}
.videoBox video {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	object-fit: cover;
    object-position: center;
}
video::-webkit-media-controls,video::-moz-media-controls,video::-webkit-media-controls-enclosure {
	display:none!important
}
video::-webkit-media-controls-panel,video::-webkit-media-controls-panel-container,.video::-webkit-media-controls-start-playback-button {
	display:none!important;
	-webkit-appearance:none
}
.videoBox video::-webkit-media-controls,.videoBox video::-moz-media-controls,.videoBox video::-webkit-media-controls-enclosure {
	display:none!important
}
.videoBox video::-webkit-media-controls-panel,.videoBox video::-webkit-media-controls-panel-container,.videoBox video::-webkit-media-controls-start-playback-button {
	display:none!important;
	-webkit-appearance:none
}
.videoBox .videoLoadTxt {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	line-height:316px;
	color:#fff;
	font-size:20px;
	display:none;
	z-index:100
}
.videoLoadTxt {
	position:absolute;
	top: 50%;
    left: 50%;
	 
	text-align:center;
 	color:#fff;
	font-size:20px;
	display:none;
	z-index:100;
	transform:rotate(90deg)
}
.leaf{    	
	position: absolute;
	top: 550px;
    left: 150px;
	transform-origin: bottom;
	animation:wind 3s linear .5s infinite
}
.leaf2{  
	position: absolute;
	top: 550px;
    left: 200px;  	
	transform-origin: bottom;
	animation:wind 3s linear .5s infinite
}
.bug{
	position: absolute;
    left: 530px;
    top: 630px;
	animation:bugmove 3s linear .5s infinite

}
.bird{position: absolute;
    left: 550px;
    top: 300px;
	animation:birdpath 3s linear .5s infinite

}
.skipBtn1{
	position: absolute;
    right: 50px;
    top: 50px;
    z-index: 9999;
}
.closeBtn{
	position: absolute;
    right: 50px;
    top: 50px;
    z-index: 9999;
}
.cover img{position:absolute;}
.bg{left: 0;top:0;width: 100%;height: 100%;}
.uleaf{left: 0;top: 680px;transform-origin: left;
	animation:swing 3s linear 1.5s infinite}
.dleaf{left: -20px;top: 830px;transform-origin: left;
	animation:swing 3s linear 1.5s infinite;}
.waterdrop{left: 250px;top: 950px;
	animation:watermove 3s linear 1.5s infinite}

.longcontainer img{position:absolute;}
.longcontainer .head{top:50px;left:223px;margin:0 auto}

.longcontainer .text1{top:417px;left:223px;margin:0 auto}
.longcontainer .text2{top:650px;left:200px;margin:0 auto}

.longcontainer .text3{top:950px;left:200px;margin:0 auto;}
.longcontainer .p1{position: absolute;left:50px;top:1200px;animation: pulse1 3s linear 1.5s infinite;}
.longcontainer .p2{position: absolute;right:0px;top:1650px;animation: pulse1 3s linear 1.5s infinite;}
.longcontainer .p22{position: absolute;right:0px;top:1788px;animation: pulse1 3s linear 1.5s infinite;}
.longcontainer .p3{position: absolute;left:0px;top:2415px;animation: pulse1 3s linear 1.5s infinite;}
.longcontainer .bird2{position: absolute;
    left: 587px;
    top: 100px;
	animation:birdpath 3s linear .5s infinite

}
.longcontainer .hand{left:380px;top:2800px;
	animation:pulse1 1s linear .5s infinite
}
.longcontainer .moon{left:110px;top:2400px;animation: pulse2 3s linear 1.5s infinite;}
.longcontainer .air{right:20px;top:2060px;animation: pulse2 2.9s linear 1.5s infinite;}
.longcontainer .cloud{left:280px;top:1630px;animation: pulse2 3.1s linear 1.5s infinite;}
.longcontainer .field{left:20px;top:1950px;animation: pulse2 2.8s linear 1.5s infinite;}
 .arr{position:absolute;bottom:20px;left:49%;z-index: 1000;animation: tip_move 1s linear .5s infinite;}
.lucy .bg{position: absolute;}
.lucy .boxtitle{position: absolute;left:100px;top:200px;width: 400px;}
.lucy .box{position: absolute; left:180px;top:380px;width:250px;animation: pulse1 2s linear .5s infinite;}
.lucy .hand{ position: absolute; left:250px;top:620px;width:150px;}
.vcloud{display:none;}
.vfield{display:none}
.author{position:absolute;display: none;width: 100%;height: 100%;overflow: hidden;z-index:1000;left: 0;top:0;}
.author img{width: 100%;height:auto;}
.authorbtn{position:absolute;left:0;bottom:200px;}
.videoswiper{position:absolute;left:0;top:0;width:100%;height:100%;display: none;z-index:1000;
	background: url(../images/videoswiper/bg.jpg) no-repeat;
	background-size: 100% 100%;
}
.backBtn{position:absolute;left:20px;top:20px;z-index: 1010;}
.leftswiper{position:absolute;left:45%;top:1270px;animation: tip_moveRL 1s linear .5s infinite;}
@keyframes wind {
	0% {
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}
50% {
	-webkit-transform:rotate(-20deg);
	-ms-transform:rotate(-20deg);
	transform:rotate(-20deg);
}
100% {
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}
}
@keyframes swing {
	0% {
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}

50% {
	-webkit-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
100% {
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}
}
@keyframes watermove {
0% {
	-webkit-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}
50% {
	-webkit-transform:translate(-20px, -20px);
	-ms-transform:translate(-20px, -20px);
	transform:translate(-20px, -20px);
}
100% {
	
	-webkit-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}
}
@keyframes bugmove {
	0% {
	-webkit-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}
50% {
	-webkit-transform:translate(0px, -40px);
	-ms-transform:translate(0px, -40px);
	transform:translate(0px, -40px);
}
100% {
	
	-webkit-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}
}
@keyframes birdpath {
	0% { 
		opacity: 0.5;
		transform:translate(0, 0);
	}
	10% { 
		opacity: 1;

		transform:translate(-60px, 30px);
	}
	20% { 
		transform:translate(-120px, 60px);
	}
	30% { 
		transform:translate(-180px, 90px);
	}40% { 
		transform:translate(-240px, 120px);
	}50% { 
		transform:translate(-300px, 150px);
	}60% { 
		transform:translate(-360px, 180px);
	}70% { 
		transform:translate(-420px, 210px);
	}80% { 
		opacity: 0.75;

		transform:translate(-480px, 240px);
	}90% { 
		transform:translate(-540px, 270px);
		opacity: 0.5;
	}
	100% { 
		opacity: 0;
		transform:translate(-600px, 300px);
	}
}
@keyframes pulse1 {
	0% {
	-webkit-transform:scale3d(1,1,1);
	-ms-transform:scale3d(1,1,1);
	transform:scale3d(1,1,1)
}
50% {
	-webkit-transform:scale3d(1.2,1.2,1.2);
	-ms-transform:scale3d(1.2,1.2,1.2);
	transform:scale3d(1.2,1.2,1.2)
}
100% {
	-webkit-transform:scale3d(1,1,1);
	-ms-transform:scale3d(1,1,1);
	transform:scale3d(1,1,1)
}
}
@keyframes pulse2 {
	0% {
	-webkit-transform:scale3d(1,1,1);
	-ms-transform:scale3d(1,1,1);
	transform:scale3d(1,1,1)
}
50% {
	-webkit-transform:scale3d(1.05,1.05,1.05);
	-ms-transform:scale3d(1.05,1.05,1.05);
	transform:scale3d(1.05,1.05,1.05)
}
100% {
	-webkit-transform:scale3d(1,1,1);
	-ms-transform:scale3d(1,1,1);
	transform:scale3d(1,1,1)
}
}

@keyframes tip_move {
	0%,100% {
	transform:translateY(-30px)
}
50% {
	transform:translateY(0)
}
}
@keyframes tip_moveRL {
	0%,100% {
	transform:translateX(30px)
}
50% {
	transform:translateX(0)
}
}
.again{position: absolute;left:150px;top:34500px}
.about{position: absolute;left:300px;top:34858px}
.video_container{/*width:585px;*/height:33908px;;position: absolute;top:0px;left:165px;z-index:1000;}
.innervideo {
	position: absolute;
	background-image: url("../images/btn/videobox.png");
	background-position: center;
	background-size: cover;
	width:600px;
	height:990px;
	left:-50px;
	/*width: 640px;
	height: 1056px;
	left:-100px;*/
	/*top:3750px;*/
}
.poster{position:absolute;width: 526px;
    height: 936px;left:38px;top:18px;z-index: 981;}
.innervideo video{
	/*position:absolute;width:558px;height: 996px;object-fit: cover;object-position: left;
left:42px;top:20px;z-index: 990;
*/
position: absolute;
    width: 526px;
    height: 936px;
    object-fit: cover;
    object-position: left;
    left: 38px;
    top: 18px;
    z-index: 990;
}
.innervideo .playbtn{
	position: absolute;
	left: 250px;
    top: 450px;
    z-index: 999;
}
.vd1{top:6240px;}
.vd2{top:10367px;}
.vd3{top:13030px;}
.vd4{top:16050px;}
.vd5{top:18695px;}
.vd6{top:21585px;}
.vd7{top:24675px;}
.vd8{top:27330px;}
.vd9{top:29912px;}
.vd10{top:32580px;}

/*
.startbtn{
	position:fixed;bottom: 0;left: 0;
	
	-webkit-touch-callout:none; 
	
	user-select:none;
	pointer-events: none;

	}
	*/