.main {
  --gapWidth: 40px;
}
@media screen and (max-width: 1200px) {
  .main {
    --gapWidth: 20px;
  }
}

a.view-more {
  position: relative;
  display: inline-block;
  position: relative;
  padding: 4px 12px;
  box-sizing: border-box;
  font-size: 14px;
  color: #386BA5;
  border-radius: 60px;
  border: 1px solid rgba(56, 107, 165, 0.2);
}
a.view-more:hover {
  background: #386BA5;
  color: #fff;
}
@media screen and (max-width: 807px) {
  a.view-more {
    padding-right: 20px;
    font-size: 12px;
  }
  a.view-more::after {
    width: 12px;
    height: 12px;
  }
}

.learn-more {
  position: relative;
  display: inline-block;
  font-family: Muli;
  font-weight: 700;
  font-size: 12px;
  color: #000000;
  line-height: 2;
  text-transform: Uppercase;
}
.learn-more::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-100%);
  width: max(0.16rem, 16px);
  height: 0.2rem;
  background: url(/_upload/tpl/0f/99/3993/template3993/images/home/left-arrow.png) no-repeat center/contain;
}
@media screen and (max-width: 807px) {
  .learn-more::after {
    width: 16px;
    height: 18px;
  }
}

.action-img {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
}
.action-img > a {
  display: block;
  width: 100%;
  height: 100%;
}
.action-img:hover img {
  transform: scale(1.2);
}
.action-img img {
  position: absolute;
  transform: scale(1);
  transition: all 0.6s;
}

.styling-title {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.styling-title .title {
  position: relative;
  padding-left: 20px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #303133;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.styling-title .title::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #386BA5;
}

.index {
  background-color: #F7F7F7;
}
.index .banner {
  height: 51vh;
  max-height: 480px;
  min-height: 200px;
}
.index .banner img {
  width: 100%;
}
.index .banner .swiper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.index .banner .swiper-pagination {
  --swiper-pagination-color: #fff;
  display: inline-block;
  width: auto;
  max-width: 92%;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  font-size: 0;
  padding: 8px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.4);
}
.index .banner .swiper-pagination-bullet {
  margin: 0 8px;
  background-color: #fff;
}
.index .banner .slide-img {
  width: 100%;
  height: 100%;
  font-size: 0;
}
@media screen and (max-width: 1280px) {
  .index .banner {
    height: 400px;
  }
}
@media screen and (max-width: 807px) {
  .index .banner {
    height: 300px;
    max-height: unset;
  }
  .index .banner .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 15px;
  }
  .index .banner .swiper-pagination-bullet {
    width: 30px;
  }
}
.index .quick-link {
  position: relative;
  z-index: 1;
  margin-top: -60px;
}
.index .quick-link .list {
  display: flex;
  padding: 12px 0;
  background-color: #fff;
  border-radius: 8px;
  margin: 0 60px;
}
.index .quick-link .item {
  flex: 1;
  position: relative;
  padding: 0 10px;
  text-align: center;
}
.index .quick-link .item .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
.index .quick-link .item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
  background-color: #E3E3E3;
}
.index .quick-link .item:last-child::after {
  content: none;
}
.index .part-one {
  padding: 32px 0 48px;
}
.index .part-one .news-list {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  font-size: 14px;
  color: #fff;
}
.index .part-one .item {
  position: relative;
  width: calc(25% - 18px);
  height: 214px;
  border-radius: 8px;
  overflow: hidden;
}
.index .part-one .item .bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.index .part-one .item .bg img {
  width: 100%;
}
.index .part-one .item .text {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 16px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.index .part-two {
  padding: 50px 0 48px;
  background-color: #fff;
  font-weight: 500;
  font-size: 16px;
  color: #525252;
}
.index .part-two .page-content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 0.76rem;
}
.index .part-two .left,
.index .part-two .right {
  flex: 1 1 300px;
}
.index .part-two .styling-title {
  padding-bottom: 16px;
  border-bottom: 1px solid #E0E0E0;
}
.index .part-two .item {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px dashed #979797;
}
.index .part-two .item img {
  display: none;
}
.index .part-two .notice .item {
  padding: 8px 0;
  line-height: 1.625;
  height: 69px;
}
.index .part-two .notice .item:first-child {
  padding-top: 10px;
}
.index .part-two .notice .item .title {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.index .part-two .notice .item .date {
  display: flex;
  flex-direction: column;
  width: 54px;
  background: #0B7ED9;
  border-radius: 8px;
  color: #fff;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  overflow: hidden;
}
.index .part-two .notice .item .date > div {
  flex: 1;
}
.index .part-two .notice .item .date .month {
  padding: 4px 0;
  font-size: 0.875em;
}
.index .part-two .notice .item .date .day {
  padding: 4px 0;
  font-size: 1.25em;
  background: rgba(11, 77, 163, 0.5);
}
.index .part-two .news .item {
  padding: 12px 0;
  line-height: 1.25;
  height: 46px;
}
.index .part-two .news .item:first-child {
  padding-top: 18px;
}
.index .part-two .news .item .title {
  flex: 1;
  position: relative;
  padding-left: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.index .part-two .news .item .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #386BA5;
  border-radius: 50%;
}
.index .part-two .news .item .date {
  color: #999999;
  font-size: 0.875em;
}
.index .part-three {
  padding: 40px 0 42px;
  font-size: 12px;
  line-height: 1.428;
  color: #666666;
  background-color: #0B4DA3;
}
.index .part-three .title-wrap {
  display: flex;
  gap: 20px 40px;
  justify-content: center;
  margin-bottom: 30px;
  font-size: 1.666em;
  color: #fff;
  font-weight: 400;
}
.index .part-three .title-wrap .title-btn {
  position: relative;
  padding-bottom: 14px;
  cursor: pointer;
}
.index .part-three .title-wrap .title-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 4px;
  background-color: #fff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
.index .part-three .title-wrap .title-btn.active {
  font-weight: 600;
}
.index .part-three .title-wrap .title-btn.active::after {
  left: 0;
  width: 100%;
  visibility: visible;
}
.index .part-three .title-wrap .title-btn:hover {
  font-weight: 600;
}
.index .part-three .item-content {
  display: none;
}
.index .part-three .item-content.active {
  display: block;
}
.index .part-three .item-content .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
}
.index .part-three .item-content .item {
  display: flex;
  gap: 10px;
  width: calc((100% - 0.48rem) / 3);
  padding: 6px;
  padding-right: 10px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.index .part-three .item-content .item .img {
  width: 104px;
  height: 158px;
}
.index .part-three .item-content .item .text {
  flex: 1;
}
.index .part-three .item-content .item .head {
  max-width: 90%;
  margin-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #D8D8D8;
}
.index .part-three .item-content .item .head .name {
  margin-bottom: 2px;
  color: #386BA5;
  font-size: 1.5em;
}
.index .part-three .item-content .item .head .position {
  font-size: 1.1666;
}
.index .part-three .item-content .intro {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.index .part-three .item-content .btn-wrap {
  margin-top: 20px;
  text-align: center;
}
.index .part-three .item-content .view-more {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.index .part-four {
  padding: 116px 0 104px;
  font-size: 12px;
  line-height: 1.44;
  color: #494747;
  background-color: rgba(22, 126, 217, 0.07);
}
.index .part-four .page-content {
  display: flex;
  gap: 30px 0.6rem;
}
.index .part-four .left {
  width: 204px;
}
.index .part-four .description {
  margin-top: 44px;
}
.index .part-four .right {
  flex: 1;
  font-size: 1.333em;
  color: #595959;
}
.index .part-four .right .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.16rem;
}
.index .part-four .right .item {
  position: relative;
  width: calc(25% - 0.12rem);
  border-radius: 5px;
  background: #fff;
}
.index .part-four .right .item a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 10px;
  padding-left: 32px;
}
.index .part-four .right .item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 21px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #595959;
}
.index .part-four .right .item:hover {
  color: #fff;
  background: #167ED9;
}
.index .part-four .right .item:hover::before {
  background: #fff;
}
.index .part-five {
  padding: 82px 0 94px;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
}
.index .part-five .wrapper {
  margin-top: 14px;
}
.index .part-five .list {
  display: flex;
  gap: 0.24rem;
}
.index .part-five .item {
  position: relative;
  width: calc(25% - 0.18rem);
  border-radius: 8px;
  overflow: hidden;
}
.index .part-five .item a {
  display: block;
  width: 100%;
  height: 100%;
}
.index .part-five .item .img {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.index .part-five .item img {
  width: 100%;
  transition: transform 0.3s ease-in-out;
}
.index .part-five .item .text {
  padding: 20px;
  background: #167ED9;
}
.index .part-five .item:hover img {
  transform: scale(1.1);
}

@media screen and (max-width: 910px) {
  .index .part-one .news-list {
    flex-wrap: wrap;
  }
  .index .part-one .news-list .item {
    width: calc(50% - 18px);
  }
  .index .part-three .item-content .list .item {
    width: calc(50% - 0.16rem);
  }
  .index .part-four {
    padding: 40px 0;
  }
  .index .part-four .page-content {
    display: block;
  }
  .index .part-four .page-content .left {
    width: 100%;
  }
  .index .part-four .page-content .left .description {
    margin: 20px 0;
  }
  .index .part-four .page-content .right .list .item {
    width: calc(33.33% - 0.167rem);
  }
  .index .part-five .list {
    flex-wrap: wrap;
  }
  .index .part-five .list .item {
    width: calc(50% - 0.12rem);
  }
}