.box{margin:0px -10px;height:auto;overflow:hidden;display:flex;flex-wrap:wrap}
 .box a{width:calc(25% - 30px);margin:15px;float:left;text-align:center;box-shadow:1px 5px 5px 1px #eee;background-color:#fff}
 .box a img{max-width:240px;max-height:240px;margin:30px 0;display: inline-block;}
 .box a h2{font-size:20px;color:#3d3e40;font-weight:800;margin-bottom:30px}
 .box a span{border:1px solid #eee;padding:8px 0;display:inline-block;width:90%;margin-bottom:30px;color:#333}
 .box a:hover{background:#223643}
 .box a:hover h2{color:#fff}
 .box a:hover span{color: #fff}


.banner-container .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 160px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.4) !important;
  color: #fff !important;
  transition: all 0.3s;
}

/* 左 */
.banner-container .owl-nav .owl-prev {
  left: 20px;
}

/* 右 */
.banner-container .owl-nav .owl-next {
  right: 20px;
}

/* hover效果 */
.banner-container .owl-nav button:hover {
  background: #ef4444 !important; /* 红色 */
  transform: translateY(-50%) scale(1.1);
}

/* 去掉默认 outline */
.banner-container .owl-nav button:focus {
  outline: none;
}
/*  */
.banner-container .owl-nav {
  opacity: 0;
  transition: opacity 0.3s;
}

.banner-container:hover .owl-nav {
  opacity: 1;
}
/*  */
.banner-container .owl-dots{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5%;
}
.banner-container .owl-dots > .owl-dot{
	margin-right: 16px;
}
.banner-container .owl-dots .owl-dot span{
	width: 72px !important;
	height: 8px !important;
	background: #fff !important;
}
.banner-container .owl-dots  .active span{
	background: red !important;
}
.banner-container .owl-dots > .owl-dot.owl-dot:hover span{
	background: red !important;
}
/*  */
#bg-img{
  background-image: url("/static/a-(20).jpg");
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  padding: 242px 0px 242px 0px;
  position: relative;
}
#bg-img::after{
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: black;
  opacity: 0.1;
}
#bg-img ul{
  padding:20px;
  margin: 0;
  position: relative;
  z-index: 2;
}
#bg-img li{
  list-style-type: none;
  text-align: center;
  color: #fff;
}
/*  */
@media (max-width: 1028px) {

  .grid.grid-cols-2 > div:last-child:nth-child(odd) {
      grid-column: span 2;
  }

}
/*  */
#bg-img{
  background-image: url("/static/a-(20).jpg");
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  position: relative;
}
#bg-img::after{
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: black;
  opacity: 0.05;
}
#bg-img ul{
  padding:20px;
  margin: 0;
  position: relative;
  z-index: 2;
}
#bg-img li{
  list-style-type: none;
  text-align: center;
  color: #fff;
}
/*  */
@media (max-width: 1028px) {

  .grid.grid-cols-2 > div:last-child:nth-child(odd) {
      grid-column: span 2;
  }
	#bg-img{
		background-attachment: scroll;
		background-size: cover;
	}
  .banner-container .owl-nav button{
    width: 30px;
    height: 80px;
  }
  .banner-container .owl-dots{
    display: none;
  }

}