/* 首页 */

body {
  overflow-x: hidden;
  background-color: #d2f0f7;
}

/* 滚动显示 */
.box {
  opacity: 0;
  transition: opacity 1s ease;
}

.box-show {
  animation: showcontent 1s ease;
}

@keyframes showcontent {
  from {
    transform: translateY(100px);
    filter: blur(10px);
  }

  to {
    transform: translateY(0);
    filter: blur(0);
  }
}

.container1 {
  background-color: #d2f0f7;
}

.bg1 {
  position: relative;
  width: 100%;
  z-index: 1;
}

/* 云朵动画 */
.cloud1 {
  position: absolute;
  top: 50px;
  left: -150px;
  width: 800px;
  animation: cloudMove 20s linear infinite alternate;
  z-index: 2;
}

.cloud2 {
  position: absolute;
  top: 120px;
  right: -150px;
  width: 800px;
  animation: cloudMove 20s linear infinite alternate;
  z-index: 2;
}

@keyframes cloudMove {
  to {
    transform: translateX(10vw);
  }
}

/* 标题文字样式 + 滚动动画容器 */
.title-container {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  z-index: 3;
  transition: transform 0.3s ease-out;
}

.HomeTitle {
  position: absolute;
  z-index: 5;
  width: 1200px;
  top: 100px;
  left: 10px;
  transition: transform 1s ease-out;
}

/* 大豆田前景 */
.fg {
  position: absolute;
  top: 313px;
  right: 0;
  width: 1500px;
  z-index: 10;
}

.logo1 {
  position: absolute;
  left: 20px;
  top: 500px;
  width: 200px;
  z-index: 11;
}

/* 第二页 */
.bg2 {
  background-color: #d2f0f7;
  text-align: center;
  padding: 300px 0 0 0;
}

.letter1 {
  font-size: 80px;
  font-weight: bolder;
  color: #5AABE0;
}

.letter2 {
  font-size: 100px;
  font-weight: bolder;
  color: black;
}

.letter3 {
  position: relative;
  top: -300px;
  left: 200px;
  font-size: 80px;
  font-weight: bolder;
  color: black;
}

.letter4 {
  position: relative;
  top: -300px;
  left: 400px;
  font-size: 120px;
  font-weight: bolder;
  color: black;
}

.medicine {
  width: 600px;
  position: relative;
  top: 200px;
  left: -300px;
}

/* 第三页 */
.bg9 {
  background-color: #d2f0f7;
  text-align: center;
  padding: 200px 0 0 0;
}

.map {
  width: 1100px;
}

.markBox{
  width: 100%;
}

.mark {
  position: relative;
  opacity: 0;
  transition: all 0.5s ease;
}

.mark.visible {
  opacity: 1;
  animation: bounce 1s ease;
}

@keyframes bounce {
  0% { transform: translateY(50px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

#mark1{
  width: 570px;
  left: 320px;
  top: -645px;
}

#mark2{
  width: 550px;
  left: -250px;
  top: -610px;
}

#mark3{
  width: 460px;
  left: 25px;
  top: -855px;
}

.mapLetter1 {
  font-size: 70px;
  font-weight: bolder;
  color: rgb(166, 13, 13);
  /* margin-top: -100px; */
}

.mapLetter2 {
  font-size: 50px;
  font-weight: bolder;
  color: black;
}

.mapLetter3 {
  font-size: 60px;
  font-weight: bolder;
  color: rgb(166, 13, 13);
}

/* 第四页 */
.container8{
  text-align: center;
  margin-top: -200px;
}

.plantLetter1{
  font-size: 40px;
  font-weight: 600;
  color: #4e7640;
  position: relative;
  left: -420px;
}

.plantBox{
  width: 100%;
}

.plantImg1{
  width: 500px;
}

.plantImg2{
  width: 500px;
  position: relative;
  top: -350px;
}

.plantImg3{
  width: 500px;
  position: relative;
  top: -180px;
  left: -50px;
}

.plantImg4{
  width: 500px;
  position: relative;
  top: -250px;
  left: 50px;
}

/* 第五页 */
.container9{
  text-align: center;
}

.indMakeLetter1{
  font-size: 40px;
  font-weight: 600;
  color: #4e7640;
  position: relative;
  left: -190px;
}

.indMakeBox{
  width: 100%;
  margin: 20px;
}

.indMakeImg1{
  width: 700px;
  margin-right: 50px;
}

.indMakeImg2{
  width: 500px;
}

.indMakeImg {
  opacity: 0;
  transform: translateX(-200px);
  transition: all 0.5s ease;
}

.indMakeImg.show {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}

/* 第六页 */
.container10{
  text-align: center;
  margin-top: 150px;
}

.humanGetLetter{
  font-size: 40px;
  font-weight: 600;
  color: #000000;
  position: relative;
  left: -350px;
}

.humanGetBox{
  width: 100%;
  margin: 20px;
}

.humanGetImg1{
  width: 290px;
  position: relative;
  left: -50px;
  top: 30px;
}

.humanGetImg2{
  width: 370px;
  position: relative;
  left: 0px;
  top: 25px;
  transform: translateX(-200px);
  transition: all 0.3s ease;
}

.humanGetImg3{
  width: 350px;
  position: relative;
  left: 0px;
  top: 45px;
  transform: translateX(-400px);
  transition: all 0.6s ease;
}

.humanGetImg4{
  width: 350px;
  position: relative;
  left: 0px;
  transform: translateX(-600px);
  transition: all 0.9s ease;
}

.humanGetImg {
  opacity: 0;
}

.humanGetImg.show {
  opacity: 1;
  transform: translateX(0);
}

/* 第七页 */
.container4{
  margin-top: 200px;
  margin-bottom: 100px;
}

.bg10{
  background-color: #d2f0f7;
  text-align: center;
  /* padding: 200px 0 0 0; */
}

.industryLetter1{
  font-size: 40px;
  font-weight: 600;
  color: black;
  position: relative;
  left: -520px;
}

.industryLetters{
  display: flex;
  margin: -80px 200px;
}

.industryLetter2{
  width: 400px;
  font-size: 35px;
  color: rgb(54, 53, 53);
  font-weight: 500;
}

.industryLetter3{
  font-size: 38px;
  font-weight: 700;
  color: rgb(54, 53, 53);
  margin-top: 30px;
}

.industryLetter3 p{
  margin: 0;
  padding: 0;
}

.industryImg {
  opacity: 0;
  transform: translateX(-200px);
  transition: all 0.5s ease;
}

.industryImg.show {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}

.industryImg1{
  width: 600px;
  position: relative;
  top: 70px;
}

.industryImg2{
  width: 400px;
  position: relative;
  top: -20px;
}

.industryImg3{
  width: 400px;
  position: relative;
  top: -30px;
}

.industryImg4{
  width: 400px;
  position: relative;
  top: -60px;
}

/* 第八页 */
.container5{
  text-align: center;
}

.vegetableLetter1{
  font-size: 40px;
  font-weight: 600;
  color: #55714b;
  margin: 200px 50px 20px 50px;
  position: relative;
  left: -250px;
}

.vegetableLetter2{
  width: 380px;
  font-size: 25px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 100px 0;
  background-color: #448aab;
  border-radius: 50px;
  position: relative;
  left: 550px;
}

.vegetableBoxes{
  width: 100%;
}

.vegetableBox1{
  display: flex;
  position: relative;
  left: 200px;
  top: -50px;
}

.vegetableBox2{
  display: flex;
  position: relative;
  left: 800px;
  top: -200px;
}

.vegetableBox3{
  display: flex;
  position: relative;
  left: 400px;
  top: -250px;
}

.vegetableBox4{
  display: flex;
  position: relative;
  left: 1000px;
  top: -400px;
}

.vegetableBox5{
  display: flex;
  position: relative;
  left: 150px;
  top: -420px;
}

.vegetableBox6{
  display: flex;
  position: relative;
  left: 630px;
  top: -600px;
}

.vegetableBox7{
  display: flex;
  position: relative;
  left: 400px;
  top: -550px;
}

.vegetableBox8{
  display: flex;
  position: relative;
  left: 900px;
  top: -700px;
}

.vegetable1{
  width: 200px;
  margin-right: 10px;
  cursor: pointer;
}

.vegetable2{
  width: 200px;
  object-fit: contain;
  transition: all 0.5 ease;
}

.image-wrapper img{
    opacity: 0;
}

.image-wrapper img.visible{
  opacity: 1;
}

button{
  background-color: #448aab00;
  border: none;
}

/* 第九页 */
.container11{
  text-align: center;
  margin-top: -400px;
  height: 700px;
}

.oursLetter{
  font-size: 35px;
  font-weight: 600;
  color: #000000;
}

.oursBox{
  width: 100%;
  margin: 20px;
}

.oursImg1{
  width: 150px;
  position: relative;
  left: -100px;
  top: 30px;
  transform: translateX(-100px);
  transition: all 0.2s ease;
}

.oursImg2{
  width: 170px;
  position: relative;
  left: 0px;
  top: 150px;
  transform: translateX(-200px);
  transition: all 0.4s ease;
}

.oursImg3{
  width: 250px;
  position: relative;
  left: 100px;
  top: 30px;
  transform: translateX(200px);
  transition: all 0.6s ease;
}

.oursImg4{
  width: 280px;
  position: relative;
  left: 100px;
  top: 120px;
  transform: translateX(100px);
  transition: all 0.6s ease;
}

.oursImg5{
  width: 60px;
  position: relative;
  left: -60px;
  top: -50px;
}

.oursImg6{
  width: 60px;
  position: relative;
  left: 70px;
}

.oursImg7{
  width: 60px;
  position: relative;
  left: 80px;
  top: -50px;
}

.oursImg {
  opacity: 0;
}

.oursImg.show {
  opacity: 1;
  transform: translateX(0);
}

/* 第十页 */
.container12{
  text-align: center;
}

.ourMoreBox{
  width: 100%;
  margin: 50px;
}

.ourMoreImg1{
  width: 450px;
}

.ourMoreImg2{
  width: 500px;
  position: relative;
  left: -300px;
  top: -340px;
  animation: ourMove 20s linear infinite alternate;
  transition: all 0.5s ease;
}

@keyframes ourMove {
  0% {
    left: -300px;
    top: -340px;
  }
  25% {
    left: -480px;
    top: -340px;
  }
  50%{
    left: -400px;
    top: -250px;
  }
  100%{
    left: -200px;
    top: -280px;
  }
}

.ourMoreImg3-1{
  width: 300px;
  position: relative;
  top: -200px;
  left: -450px;
}

.ourMoreImg3-2{
  width: 250px;
  position: relative;
  top: -200px;
  left: -730px;
  opacity: 0;
  transition: all 0.5s ease;
}

.ourMoreImg3-2:hover{
  opacity: 1;
}

.ourMoreImg4-1{
  width: 250px;
  position: relative;
  top: -550px;
  left: 1000px;
}

.ourMoreImg4-2{
  width: 260px;
  position: relative;
  top: -550px;
  left: 740px;
  opacity: 0;
  transition: all 0.5s ease;
}

.ourMoreImg4-2:hover{
  opacity: 1;
}

.ourMoreImg5-1{
  width: 250px;
  position: relative;
  top: -280px;
  left: 300px;
}

.ourMoreImg5-2{
  width: 250px;
  position: relative;
  top: -280px;
  left: 45px;
  opacity: 0;
  transition: all 0.5s ease;
}

.ourMoreImg5-2:hover{
  opacity: 1;
}

.container14{
  background-color: #9d7b4e;
  width: 100%;
  height: 200px;
  margin-top: -380px;
}