/* banner start */

.banner {
  background-image: url("../imgs/building_banner.png");
}

.banner .layout form .layui-form-label {
  padding: 9px 0px 9px 20px;
  width: 91px;
}

/* banner end */

/* mod-1 start */

.mod-1 {
  background-color: #f9fafe;
  height: 697px;
  padding-top: 40px;
  box-sizing: border-box;
}

.mod-1 .layout {
  height: 426px;
  box-shadow: 0px 0px 15px 0px rgba(191, 191, 191, 0.3);
  padding: 20px;
  box-sizing: border-box;
  margin-top: 40px;
}

.mod-1 .tit {
  justify-content: space-around;
  line-height: 75px;
  height: 75px;
  width: 1160px;
  background-image: url("../imgs/building_mod_1.png");
}

.mod-1 .tit h3 {
  font-size: 22px;
  color: #333;
  width: 20%;
  text-align: center;
  font-weight: 700;
}

.mod-1 .tit div {
  font-size: 12px;
  color: #666;
  width: 20%;
  text-align: center;
}

.mod-1 .tit span {
  display: inline-block;
  margin-right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fc8e00;
}

.mod-1 .content .top,
.mod-1 .content .bottom {
  margin-top: 5px;
}

.mod-1 .content .item {
  width: 286px;
  height: 150px;
  background-color: #f1f3f7;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.mod-1 .content .item h5 {
  font-size: 16px;
  color: #333;
  line-height: 30px;
  font-weight: 700;
}

.mod-1 .content .item p {
  font-size: 14px;
  color: #999;
  line-height: 20px;
}

.mod-1 .content .item a {
  font-size: 12px;
  color: #ff7e19;
  line-height: 24px;
  width: 72px;
  height: 24px;
  border: 1px solid #ff7e19;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  transition: all 0.3s;
}

.mod-1 .content .item a:hover {
  color: #fff;
  background-color: #ff7e19;
}

/* mod-1 end */

/* mod-2 start */

.mod-2 {
  background-image: url("../imgs/building_mod_2_bg.png");
  height: 680px;
  padding-top: 40px;
  box-sizing: border-box;
}

.mod-2 .layout {
  margin-top: 60px;
}

.mod-2 .item {
  width: 110px;
  text-align: center;
  position: relative;
}

.mod-2 .top .item::after,
.mod-2 .bottom .item::after {
  content: "";
  width: 23px;
  height: 24px;
  position: absolute;
  top: 30px;
  right: -46px;
  background-image: url("../imgs/building_mod_2_arrow.png");
}

.mod-2 .top .item:last-child::after,
.mod-2 .bottom .item:last-child::after {
  content: "";
  background: transparent;
}

.mod-2 .bottom .item::after {
  transform: rotate(180deg);
}

.mod-2 .top .item:last-child::after {
  content: "";
  background: transparent;
}

.center-arrow {
  height: 150px;
  line-height: 150px;
  text-align: right;
}

.center-arrow img {
  width: 23px;
  height: 24px;
  transform: rotate(90deg);
  margin-right: 45px;
}

.mod-2 .item span {
  width: 60px;
  height: 60px;
  display: inline-block;
  border-radius: 50%;
  background-color: #ff8825;
  border: 12px solid #f1e2d7;
  line-height: 60px;
  font-size: 24px;
  color: #fff;
}

.mod-2 .item.blue span {
  background-color: #454d5d;
  border: 12px solid #d5d9dd;
}

.mod-2 .item p {
  margin-top: 10px;
  font-size: 14px;
}

/* mod-2 end */

/* mod-3 start */

.mod-3 {
  background-image: url("../imgs/building_mod_3_bg.png");
  height: 625px;
  padding-top: 40px;
  box-sizing: border-box;
  background-size: cover
}

.mod-3 .main {
  height: 323px;
  padding: 15px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 90px;
  position: relative;
}

.mod-3 .tit {
  position: absolute;
  width: 392px;
  height: 58px;
  background-color: #ff8825;
  color: #fff;
  text-align: center;
  line-height: 58px;
  font-size: 22px;
  border-radius: 29px;
  top: -29px;
  left: calc(50% - 196px);
}

.mod-3 .content {
  border: 1px dashed #ff8825;
  height: 295px;
  padding: 28px 50px 0;
  box-sizing: border-box;
}

.mod-3 .content p {
  color: #fff;
  line-height: 37px;
  font-size: 18px;
}

.mod-3 .content .yellow {
  color: #ff8825;
}

/* mod-3 end */

/* mod-4 start */

.mod-4 {
  height: 590px;
  padding-top: 40px;
  box-sizing: border-box;
  background-image: url("../imgs/building_mod_4_bg.png");
}

.mod-4 .tips {
  color: #fff;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
}

.mod-4 .swiper-container {
  width: 100%;
  height: 322px;
  margin-top: 60px;
}

.mod-4 .swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  transform: scale(0.8);
}

.mod-4 .swiper-slide img {
  width: 220px;
  height: 322px;
}

.mod-4 .swiper-slide-active,
.mod-4 .swiper-slide-duplicate-active {
  transform: scale(1);
  z-index: 10;
}

/* mod-4 end */