body {
	margin: auto;
	width: 100%;
}

.nav_list .active {
	color: #d75a1f;
}


#banner {
	width: 100%;
	height: 800px;
	background: url(../img/banner-view.jpg) no-repeat center;
}


#content {
	width: 100%;
	height: 946px;
	background: url(../img/tree.jpg) no-repeat center;
	color: #007130;
	font-size: 48px;
	font-family: Arial, Helvetica, sans-serif,微软雅黑;
	position: relative;
	overflow: hidden;
}

#content .w {
	height: 846px;
}


.Side_navigation,
.content {
	float: left;
}

.Side_navigation {
	width: 120px;
	height: 846px;
	margin-right: 54px;
}

#btn {
	width: 60px;
	height: 846px;
	position: relative;
}


.time,
.navigation {
	float: left;
}

.navigation {
	position: relative;
}

.navigation p {
	position: absolute;
}

.nav_1 {
	top: 100px;
	color: #06cd5b;
}

.nav_2 {
	top: 500px;
}

.btn1,
.btn2,
.timeLine {
	position: absolute;
	background: #007130;
	border-radius: 100%;
}

.btn1 {
	width: 30px;
	height: 30px;
	top: 240px;
	left: 1%;
	z-index: 99;
}

.btn2 {
	width: 20px;
	height: 20px;
	top: 600px;
	left: 9%;
	z-index: 99;
}

.timeLine {
	height: 1195px;
	width: 5px;
	left: 20%;
	top: -10%;
	z-index: 1;
}

#Plantation_Landscape,
#Fishing_Garden_Scenery {
	width: 1000px;
	margin: auto;
}

#Plantation_Landscape {
	position: relative;
	margin-top: 10px;
}

.i,
.m,
.a,
.g,
.e,
.s {
	position: absolute;
	filter: opacity(0);
	transition: all .75s ease-out;
}

.i {
	top: 35.2%;
	left: 8.4%;
}

.m {
	top: 35.3%;
	left: 42.6%;
}

.a {
	top: 52.7%;
	left: 29.8%;
}

.g {
	top: 37.4%;
	left: 74.5%;
}

.e {
	top: 57%;
	left: 0.2%;
}

.s {
	top: 54%;
	left: 56.5%;

}

.e:hover,
.s:hover,
.i:hover,
.m:hover,
.a:hover,
.g:hover {
	scale: 1.2;
	filter: opacity(1);
}

#Plantation_Landscape p {
	text-align: center;
	padding-top: 124px;
	padding-bottom: 52px;
}

#Plantation_Landscape .spn,
#Plantation_Landscape .Photo_wall {
	overflow: hidden;
}

#Fishing_Garden_Scenery {
	display: none;
}

#Fishing_Garden_Scenery p {
	text-align: center;
	padding-top: 84px;
	padding-bottom: 52px;
}

.Photo_Gallery {
	width: 1000px;
	height: 514px;
	margin-top: 60px;
	margin-left: 50px;
}

.photo {
	display: inline-block;
	position: relative;
	margin-right: 20px;
	margin-top: 20px;
}

.photo img {
	border-radius: 20px;
}

.photo:hover img {
	border-radius: 30px;
}

.photo .Mask {
	border-radius: 20px;
	position: absolute;
	width: 300px;
	height: 200px;
	background: #06cd5b;
	left: 300px;
	top: 0;
	opacity: 0;
	transition: all .5s ease-out;
}

.photo:hover .Mask {
	left: 0;
	opacity: 0.3;
	border-radius: 30px;
}

.photo p {
	position: absolute;
	bottom: -30%;
	opacity: 0;
	color: #fff;
	transition: all .5s ease-out;
}

.photo:hover p {
	opacity: 1;
	bottom: 50%;
}

.ocean {
  height: 48px;
  width: 100%;
  position: absolute;
  bottom: -15%;
  left: 0;
  background: #015871;
  z-index: 9;
}

.wave {
  background: url(../img/wave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}