.banner-box {
  width: 100%;
  height: 5.6962rem;
  background-image: url('/static/img/add1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.banner-box .top-title {
  margin: 0 auto;
  max-width: 17.7215rem;
  height: 100%;
  color: #fff;
  font-size: 0.5063rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.0633rem;
}
.banner-box .top-title span {
  color: #c5082c;
  font-size: 0.6582rem;
  padding: 0 0.0633rem;
}
.nav-box {
  width: 100%;
  height: 8.7595rem;
  padding-top: 0.8608rem;
  background-image: url('/static/img/latest02-bj.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.nav-box .nav-conter {
  max-width: 17.7215rem;
  margin: 0 auto;
}
.nav-box .nav-conter h1 {
  font-size: 0.443rem;
  text-align: center;
  padding-bottom: 0.2025rem;
}
.nav-box .nav-conter span {
  display: block;
  font-size: 0.2025rem;
  text-align: center;
  color: #868686;
  padding-bottom: 0.557rem;
}
.nav-box .nav-conter .nav-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nav-box .nav-conter .nav-bottom .nav-item {
  width: 5.6962rem;
  height: 2.1772rem;
  margin-bottom: 0.4051rem;
  position: relative;
  transition: all 0.3s;
}
.nav-box .nav-conter .nav-bottom .nav-item .img-box {
  z-index: 2;
  position: absolute;
  left: 0.3797rem;
  top: 0;
  width: 1.8481rem;
  height: 1.8481rem;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0rem 0.0759rem 0.2278rem 0.0127rem rgba(197, 8, 44, 0.15);
  display: flex;
  align-items: center;
  transition: all 0.4s;
}
.nav-box .nav-conter .nav-bottom .nav-item .img-box img {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 50%;
  object-fit: contain;
  transition: all 0.3s;
}
.nav-box .nav-conter .nav-bottom .nav-item .con-box {
  position: absolute;
  bottom: 0;
  width: 5.6962rem;
  height: 1.4684rem;
  padding: 0.1266rem 0;
  padding-left: 2.5316rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.1013rem 0.3418rem 0.0127rem rgba(120, 120, 120, 0.18);
  border-radius: 0.1899rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.nav-box .nav-conter .nav-bottom .nav-item .con-box h2 {
  font-size: 0.3038rem;
  color: #545454;
}
.nav-box .nav-conter .nav-bottom .nav-item .con-box h3 {
  font-size: 0.2025rem;
  color: #989898;
}
.nav-box .nav-conter .nav-bottom .nav-item .con-box h4 {
  width: 1.7468rem;
  height: 0.5063rem;
  background-color: #c5082c;
  box-shadow: 0rem 0.0633rem 0.2278rem 0.0127rem rgba(197, 8, 44, 0.3);
  border-radius: 0.2532rem;
  font-size: 0.2025rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.5063rem;
  transition: all 0.3s;
}
.nav-box .nav-conter .nav-bottom .nav-item:hover {
  transform: scale(1.02);
}
.nav-box .nav-conter .nav-bottom .nav-item:hover .img-box {
  transform: scaleX(-1);
}
.nav-box .nav-conter .nav-bottom .nav-item:hover .img-box img {
  width: 55%;
  height: 55%;
}
.nav-box .nav-conter .nav-bottom .nav-item:hover .con-box h4 {
  letter-spacing: 0.0506rem;
}
.template-box {
  width: 100%;
  height: 10.1266rem;
  background-image: url('/static/img/latest03-bj.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.template-box .template-conter {
  width: 17.7215rem;
  margin: 0 auto;
  padding-top: 0.8861rem;
}
.template-box .template-conter h1 {
  text-align: center;
  font-size: 0.443rem;
  color: #333333;
}
.template-box .template-conter .template-nav {
  margin: 0 auto;
  width: 14.3924rem;
}
.template-box .template-conter .template-nav .nav-item {
  padding-top: 0.7342rem;
  width: 100%;
  border-bottom: 0.0127rem solid #dcdcdc;
  display: flex;
  justify-content: space-around;
}
.template-box .template-conter .template-nav .nav-item a {
  height: 0.6329rem;
  padding: 0 0.3165rem;
  font-size: 0.2025rem;
  color: #565656;
}
.template-box .template-conter .template-nav .nav-item a:hover {
  color: #c5082c;
}
.template-box .template-conter .template-nav .nav-item .nav-active {
  color: #c5082c;
  border-bottom: 0.0253rem solid #c5082c;
}
.template-box .template-conter .template-nav .nav-item .bottom-active {
  display: none;
}
.template-box .template-conter .template-bottom {
  width: 100%;
  height: 6.3291rem;
  padding-top: 0.6329rem;
  font-size: 0.5063rem;
  color: red;
  justify-content: space-between;
}
.template-box .template-conter .template-bottom .bottom-left {
  width: 48%;
  height: 100%;
  position: relative;
}
.template-box .template-conter .template-bottom .bottom-left .left-di {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.443rem;
  height: 2.7848rem;
  background-image: linear-gradient(90deg, #950019 0%, #c70122 100%);
  border-radius: 0.1013rem;
}
.template-box .template-conter .template-bottom .bottom-left .left-di2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.443rem;
  height: 2.7848rem;
  background-image: linear-gradient(90deg, #57f5a2 0%, #c1fdc9 100%);
  border-radius: 0.1013rem;
}
.template-box .template-conter .template-bottom .bottom-left .left-di3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.443rem;
  height: 2.7848rem;
  background-image: linear-gradient(90deg, #fba980 0%, #f8e9c7 100%);
  border-radius: 0.1013rem;
}
.template-box .template-conter .template-bottom .bottom-left .left-di4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.443rem;
  height: 2.7848rem;
  background-image: linear-gradient(90deg, #3966f5 0%, #75a3f7 100%);
  border-radius: 0.1013rem;
}
.template-box .template-conter .template-bottom .bottom-left .left-di5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.443rem;
  height: 2.7848rem;
  background-image: linear-gradient(90deg, #3966f5 0%, #75a3f7 100%);
  border-radius: 0.1013rem;
}
.template-box .template-conter .template-bottom .bottom-left .left-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.481rem;
  height: 5.6962rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.2278rem 0.3291rem 0.0253rem rgba(120, 120, 120, 0.3);
  border-radius: 0.1266rem;
  padding: 0.1899rem;
}
.template-box .template-conter .template-bottom .bottom-left .left-img img {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}
.template-box .template-conter .template-bottom .bottom-left:hover img {
  transform: scale(1.05);
}
.template-box .template-conter .template-bottom .bottom-right {
  width: 48%;
  height: 100%;
}
.template-box .template-conter .template-bottom .bottom-right h2 {
  padding-bottom: 0.1899rem;
  font-size: 0.3038rem;
  color: #333333;
}
.template-box .template-conter .template-bottom .bottom-right p {
  font-size: 0.2025rem;
  color: #868686;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box {
  margin-top: 0.5063rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann {
  cursor: pointer;
  width: 1.519rem !important;
  height: 0.481rem !important;
  margin-right: 0.2025rem;
  margin-bottom: 0.2278rem;
  border-radius: 0.2278rem;
  border: solid 0.0127rem #989898;
  font-size: 0.2025rem;
  color: #333333;
  text-align: center;
  line-height: 0.481rem;
  transition: all 0.2s;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann:nth-child(5n) {
  margin-right: 0;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann:hover {
  background-color: #c5082c;
  color: #ffffff;
  border: solid 0.0127rem #c5082c;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann2 {
  cursor: pointer;
  width: 1.519rem !important;
  height: 0.481rem !important;
  margin-right: 0.2025rem;
  margin-bottom: 0.2278rem;
  border-radius: 0.2278rem;
  border: solid 0.0127rem #989898;
  font-size: 0.2025rem;
  color: #333333;
  text-align: center;
  line-height: 0.481rem;
  transition: all 0.2s;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann2:nth-child(5n) {
  margin-right: 0;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann2:hover {
  background-color: #61ce7c;
  color: #ffffff;
  border: solid 0.0127rem #61ce7c;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann3 {
  cursor: pointer;
  width: 1.519rem !important;
  height: 0.481rem !important;
  margin-right: 0.2025rem;
  margin-bottom: 0.2278rem;
  border-radius: 0.2278rem;
  border: solid 0.0127rem #989898;
  font-size: 0.2025rem;
  color: #333333;
  text-align: center;
  line-height: 0.481rem;
  transition: all 0.2s;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann3:nth-child(5n) {
  margin-right: 0;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann3:hover {
  background-color: #fba980;
  color: #ffffff;
  border: solid 0.0127rem #fba980;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann4 {
  cursor: pointer;
  width: 1.519rem !important;
  height: 0.481rem !important;
  margin-right: 0.2025rem;
  margin-bottom: 0.2278rem;
  border-radius: 0.2278rem;
  border: solid 0.0127rem #989898;
  font-size: 0.2025rem;
  color: #333333;
  text-align: center;
  line-height: 0.481rem;
  transition: all 0.2s;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann4:nth-child(5n) {
  margin-right: 0;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann4:hover {
  background-color: #3a67f5;
  color: #ffffff;
  border: solid 0.0127rem #3a67f5;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann5 {
  cursor: pointer;
  width: 1.519rem !important;
  height: 0.481rem !important;
  margin-right: 0.2025rem;
  margin-bottom: 0.2278rem;
  border-radius: 0.2278rem;
  border: solid 0.0127rem #989898;
  font-size: 0.2025rem;
  color: #333333;
  text-align: center;
  line-height: 0.481rem;
  transition: all 0.2s;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann5:nth-child(5n) {
  margin-right: 0;
}
.template-box .template-conter .template-bottom .bottom-right .right-nav-box .ann5:hover {
  background-color: #3a67f5;
  color: #ffffff;
  border: solid 0.0127rem #3a67f5;
}
.template-box .template-conter .template-bottom .jiantou {
  margin-top: 0.6962rem;
  width: 2.7848rem;
  height: 0.6329rem;
  padding: 0 0.0633rem;
  background-color: #c5082c;
  box-shadow: 0rem 0.0633rem 0.2278rem 0.0127rem rgba(197, 8, 44, 0.3);
  border-radius: 0.3165rem;
  font-size: 0.2025rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
}
.template-box .template-conter .template-bottom .jiantou img {
  width: 0.5316rem;
  height: 0.5316rem;
}
.template-box .template-conter .template-bottom .jiantou span {
  flex: 1;
  text-align: center;
}
.template-box .template-conter .template-bottom .jiantou:hover {
  width: 3.1646rem;
}
.template-box .template-conter .template-bottom .jiantou2 {
  margin-top: 0.6962rem;
  width: 2.7848rem;
  height: 0.6329rem;
  padding: 0 0.0633rem;
  background-color: #61ce7c;
  box-shadow: 0rem 0.0633rem 0.2278rem 0.0127rem rgba(93, 245, 164, 0.3);
  border-radius: 0.3165rem;
  font-size: 0.2025rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
}
.template-box .template-conter .template-bottom .jiantou2 img {
  width: 0.5316rem;
  height: 0.5316rem;
}
.template-box .template-conter .template-bottom .jiantou2 span {
  flex: 1;
  text-align: center;
}
.template-box .template-conter .template-bottom .jiantou2:hover {
  width: 3.1646rem;
}
.template-box .template-conter .template-bottom .jiantou3 {
  margin-top: 0.6962rem;
  width: 2.7848rem;
  height: 0.6329rem;
  padding: 0 0.0633rem;
  background-color: #fba980;
  box-shadow: 0rem 0.0633rem 0.2278rem 0.0127rem rgba(242, 172, 135, 0.3);
  border-radius: 0.3165rem;
  font-size: 0.2025rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
}
.template-box .template-conter .template-bottom .jiantou3 img {
  width: 0.5316rem;
  height: 0.5316rem;
}
.template-box .template-conter .template-bottom .jiantou3 span {
  flex: 1;
  text-align: center;
}
.template-box .template-conter .template-bottom .jiantou3:hover {
  width: 3.1646rem;
}
.template-box .template-conter .template-bottom .jiantou4 {
  margin-top: 0.6962rem;
  width: 2.7848rem;
  height: 0.6329rem;
  padding: 0 0.0633rem;
  background-color: #3a67f5;
  box-shadow: 0rem 0.0633rem 0.2278rem 0.0127rem rgba(58, 103, 245, 0.3);
  border-radius: 0.3165rem;
  font-size: 0.2025rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
}
.template-box .template-conter .template-bottom .jiantou4 img {
  width: 0.5316rem;
  height: 0.5316rem;
}
.template-box .template-conter .template-bottom .jiantou4 span {
  flex: 1;
  text-align: center;
}
.template-box .template-conter .template-bottom .jiantou4:hover {
  width: 3.1646rem;
}
.template-box .template-conter .template-bottom .jiantou5 {
  margin-top: 0.6962rem;
  width: 2.7848rem;
  height: 0.6329rem;
  padding: 0 0.0633rem;
  background-color: #3a67f5;
  box-shadow: 0rem 0.0633rem 0.2278rem 0.0127rem rgba(58, 103, 245, 0.3);
  border-radius: 0.3165rem;
  font-size: 0.2025rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
}
.template-box .template-conter .template-bottom .jiantou5 img {
  width: 0.5316rem;
  height: 0.5316rem;
}
.template-box .template-conter .template-bottom .jiantou5 span {
  flex: 1;
  text-align: center;
}
.template-box .template-conter .template-bottom .jiantou5:hover {
  width: 3.1646rem;
}
.service-box {
  width: 100%;
  height: 8.8608rem;
  background-image: url('/static/img/latest04-bj.png');
  background-size: contain;
  background-repeat: no-repeat;
  border-bottom: 0.0127rem solid #c5c5c5;
}
.service-box .service-conter {
  width: 17.7215rem;
  margin: 0 auto;
}
.service-box .service-conter h1 {
  text-align: center;
  padding: 0.8861rem 0;
  font-size: 0.443rem;
  color: #ffffff;
}
.service-box .service-conter .service-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.service-box .service-conter .service-bottom .service-item {
  width: 3.3544rem;
  height: 4.1772rem;
  margin-right: 0.2278rem;
  margin-bottom: 0.2278rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.2025rem 0.3418rem 0.0127rem rgba(120, 120, 120, 0.15);
  border-radius: 0.3165rem;
  border: solid 0.0127rem #d2d2d2;
  padding: 0 0.5696rem;
  padding-top: 0.7215rem;
  text-align: center;
  transition: all 0.5s;
}
.service-box .service-conter .service-bottom .service-item img {
  width: 1.443rem;
  height: 1.6456rem;
}
.service-box .service-conter .service-bottom .service-item h3 {
  padding-top: 0.6329rem;
  font-size: 0.2532rem;
  color: #333333;
}
.service-box .service-conter .service-bottom .service-item:last-child {
  margin-right: 0 !important;
}
.service-box .service-conter .service-bottom .service-item:hover {
  transform: translateY(-0.6329rem);
}