:root {
  --btn-color: #7B995C;
}
* {
  box-sizing: border-box;
}

/* --------- home1 ------------ */
.btn-box {
  margin-top: 18px;
}
.btn-box button {
  background-color: rgba(0, 0, 0, 0.75);
  font-family: Roboto;
  text-transform: uppercase;
  height: auto;
  width: auto;
  color: rgb(255, 255, 255);
  border: none;
  /* line-height: 3em; */
  padding: 10px 28px;
  border-radius: 30px;
}
.btn-box button:hover {
  background-color: white;
  color: black;
}

/* ------------ */

button {
  color: white;
}


.home2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background-color: #121211;
  overflow: hidden;
}

.home2 .home2-left {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  opacity: 0;
  transition: opacity 0.4s ease-out, transform 0.4s ease!important;
}
.home2 .home2-left.animate {
  opacity: 1;
}
.home2 .home2-right {
  padding: 50px;
  width: 100%;
  text-align: center;
  font-size: 1em;
  color: white;
  --fontSize: 20;
  line-height: 2;
  opacity: 0;
  transform: translateX(10%);
  transition: opacity 0.8s ease-in, transform 0.5s ease-in!important;
}
.home2-right.animate {
  opacity: 1;
  transform: translateX(0);
}

.home2-right-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 70%;
  margin-top: 10%;
}

.home2-right-content h1 {
  font-size: 2em;
  color: white;
}
.home2-right-content div button {
  margin-top: 20px;
  background-color: #7B995C;
  border: none;
  padding: 0 20px;
}
.home2-right-content div button:hover {
  background-color: #DBB568;
}

/* .home2-right-content h1,.home2-right-content p,.home2-right-content div { */
/*     width: 100%; */
/* } */

.home3 {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  padding: 0 10px;
}

.intro-grid {
  position: relative;
  overflow: hidden!important;
  padding: 5px;
  aspect-ratio: 1 / 1;
}

.intro-grid span {
  display: block;
  width: calc(100% + 40px);
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: -20px;
  transition: left 0.5s ease!important;
}

.intro-grid span {
  transition: left 0.5s ease!important;
}

.intro-grid span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-grid p {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 1.5em;
  margin: 0;
  transition: transform 0.5s ease!important;
  z-index: 2;
}

.intro-grid:hover span{
  /* transform: translateX(20px); */
  left: 0px;
}

.intro-grid:hover p {
  transform: translateY(-20px);
}


/* 响应式设计 */
@media (max-width: 1200px) {
  .home3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {

  .home3 {
    display: flex;
    flex-wrap: wrap;
  }
  .intro-grid {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
  }

  .home2 {
    display: flex!important;
    flex-wrap: wrap;
  }
  .home2>div {
    width: 100%!important;
  }

  .home4-desc {
    padding: 0 50px;
  }

  .card-box>div {
    width: 50%!important;
  }

  .footer-bg {
    height: auto!important;
    display: flex!important;
    flex-wrap: wrap;
  }
  .f-left,.f-right,.f-middle {
    width: 100%;
    padding: 20px!important;
  }
  .f-middle {
    padding: 0 20px!important;
  }
}

@media (max-width: 636px) {
  .card-box>div {
    width: 100%!important;
  }
}


/* ----------- home4  ------------*/
.home4 {
  margin-top: 36px;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.home4-desc {
  text-align: center;
  display: inline-block;
  max-width: 800px;
  margin-left: calc(-4% / 2);
  margin-right: calc(-4% / 2);
}
.h4-safari {
  width: 100%;
  display: flex;
  justify-content: center;
}
.card-box {
  max-width: 1185.6px;
  display: flex;
  flex-wrap: wrap;
}

/* .card-solid { */
/*   opacity: 0; */
/*   transform: translateX(-10%); */
/*   transition: opacity 0.5s ease-in, transform 0.5s ease-out!important; */
/* } */
/* .card-solid.animate { */
/*   opacity: 1; */
/*   transform: translateX(0); */
/* } */
/* ----------- home5  ------------*/

.home5 {
  width: 100%;
  background-size: cover;
  height: 600px;
  margin-top: 80px;
  .home5-content {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    h1 {
      color: #fff;
    }
  }
}

.gh-foot {
  width: 100%;
  margin-top: 20px;
}

.footer-bg {
  height: 380px;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-size: cover;
}
.footer-bg>div {
  padding: 50px;
  background-color: rgba(0, 0, 0, 0.8);
}
.f-left p {
  word-wrap: break-word;
  white-space: normal;
  margin-top: 20px;
}
.f-left img {
  background-color: white;

}
.footer-nav li a:hover {
  color: #e56f1b;
}

.f-middle h3 {
  color: #e56f1b;
}
.footer-nav {
  padding: 0;
  list-style: none;

}
.footer-nav li {
  line-height: 2em;
  color: white!important;
}
.footer-nav li:hover {
  color: #e56f1b!important;
}

.f-right h3 {
  color: #e56f1b;
}
.f-right a:hover {
  color: #e56f1b;
}

 .contact-box {
  margin-top: 20px;
}
.contact-box p {
  line-height: 2em;
}
.contact-box p img {
  max-width: 140px;
  margin-top: 14px;
}

.f-bottom {
  background: #202326;
  text-align: center;
  color: white;
  word-wrap:break-word;
  white-space: normal;
}