.main-banner {
  height: 80vh;
  position: relative;
  overflow: hidden;
}
.main-banner > .main-img {
  width: 100%;
  height: 100%;
  background-image: url(/static/image2/banner_main.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(110%);
  transition: all 2s cubic-bezier(0.060, 0.515, 0.485, 0.970);
}
.main-banner.main-start > .main-img {
  transform: scale(100%);
}
.main-banner > .main-banner-text-box {
  position: absolute;
  bottom: 110px;
  right: 135px;
  text-align: right;
  font-size: 64px;
  color: #fff;
}
.main-banner > .main-banner-text-box > div {
  font-weight: 700;
}
.main-banner > .main-banner-text-box>* {
  filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, .4));
  transform: translateY(-100px);
  transition: all 1s .2s cubic-bezier(0.015, 0.195, 0.140, 0.780);
  opacity: 0;
}
.main-banner > .main-banner-text-box img {
  margin-bottom: -10px;
  transform: translateY(-120px);
  transition: all 1s .5s cubic-bezier(0.015, 0.195, 0.140, 0.780);
}
.main-banner.main-start .main-banner-text-box>* {
  transform: translateY(0);
  opacity: 1;
}

.scroll-img-box {
  /*height: calc(28px + 20vh);*/
}

.scroll-img-box > .scroll-img {
  width: 28px;
  height: 45px;
  border-radius: 20px;
  border: 2px solid #000;
  position: relative;
  margin-top: 33px;
}
.scroll-img-box > .scroll-img::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background-color: #000;
  animation: scroll 2s infinite;
}
@keyframes scroll {
  0% {top:8px; height: 0px;}
  45% {top:8px; height: 12px;}
  90% {top:20px; height: 0px;}
  100% {top:8px; height: 0px;}
}
.scroll-img-box > .scroll-img::before {
  content: "scroll";
  display: block;
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  color: #cacaca;
}

.recommend-container {
  padding-top: 100px;
  /*padding-bottom: 240px;*/
}
.recommend-container > .content-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 57px;
}
.recommend-container .recommend-item {
  width: calc(100%/ 4 - 15px);
  opacity: 0;
  transform: translateY(-100px);
  transition: .5s;
  cursor: pointer;
}
.recommend-container.active .recommend-item {
  opacity: 1 !important;
  transform: translateY(0px) !important;
}
.recommend-container .recommend-item:nth-child(2) {
  transition: .5s .2s;
}
.recommend-container .recommend-item:nth-child(3) {
  transition: .5s .4s;
}
.recommend-container .recommend-item:nth-child(4) {
  transition: .5s .6s;
}

.recommend-item > .img-box {
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.recommend-item > .img-box > img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.recommend-item > .desc-box {
  min-height: 125px;
}
.recommend-item > .desc-box > .item-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  margin-top: 14px;
}
.recommend-item > .desc-box > .item-sub-title {
  margin-top: 10px;
  line-height: 20px;
  color: #4B4B4B;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommend-item > a {
  color: #9c9c9c;
  font-size: 16px;
  font-weight: 500;
  transition: .3s;
}
.recommend-item:hover > a {
  color: #D66947;
}