.fieldSwiper {
  margin-top: .75rem;
  height: 8.65rem;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
}

.fieldSwiper .swiper-slide {
  display: flex;
  opacity: 0!important;
}

.fieldSwiper .swiper-slide-active{
    opacity: 1!important;
}

.fieldSwiper>.fieldSwiperText {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}


.fieldSwiperText {
  width: 6.27rem;
  height: 100%;
  background: linear-gradient(90deg, #F7F7F7 0%, rgba(244, 244, 244, 0) 100%);
  flex-shrink: 0;
  padding: 1.84rem 1.82rem 3.86rem 1.6rem;
  box-sizing: border-box;
}

.fieldTit {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.35rem;
  color: #000000;
  line-height: 0.5rem;
  margin-bottom: .6rem;
}

.fieldTxt {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.2rem;
  color: #444444;
  line-height: 0.35rem;
}

.fieldList {
  position: absolute;
  top: 50%;
  left: 5.32rem;
  transform: translateY(-50%);
  width: 1.9rem;
  background: #FFFFFF;
  border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
  z-index: 100;
  overflow: hidden;
}

.fieldListItem {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.22rem;
  color: #333333;
  width: 100%;
  height: .85rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fieldListItem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.35rem;
  height: .01rem;
  background: #707070;
  opacity: 0.2;
}

.fieldListItem:hover,
.fieldItemActive {
  background: #0866DF;
  font-weight: bold;
  color: #FFFFFF;
}

.fieldListItem:hover::after,
.fieldItemActive::after {
  display: none;
}

.seaOut {
  width: 100%;
  height: 11rem;
  background-image: url(../img/field/seaOut.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.seaOut .commmonTitle {
  margin-top: .98rem;
}

.seaOutItem {
  width: .17rem;
  height: .17rem;
  position: absolute;
  background: #0866DF;
  border-radius: 50%;
}

.seaOutItem::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: .07rem solid #FFFFFF;
}

.seaOutItem .vertical {
  width: .02rem;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.seaOutItem .vertical::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #0052BB;
}

.seaOutItem:nth-of-type(6) .vertical::after,
.seaOutItem:nth-of-type(7) .vertical::after {
  bottom: auto;
  top: 0;
}


.seaOutItem .transverse {
  width: .44rem;
  height: .02rem;
  display: block;
  position: absolute;
  z-index: 1;
}

.seaOutItem .transverse::after {
  content: '';
  position: absolute;
  left: 0;
  width: 0%;
  height: 100%;
  background: #0052BB;
}

.seaOutItem:nth-of-type(3) .transverse::after {
  left: auto;
  right: 0;
}

.seaOutItem p {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 0.25rem;
  color: #0052BB;
  white-space: nowrap;
  position: absolute;
  opacity: 0;
}

.seaOutItemActive .vertical::after {
  height: 100%;
  transition: all 2s;
}

.seaOutItemActive .transverse::after {
  width: 100%;
  transition: all 2s 2s;
}

.seaOutItemActive p {
  opacity: 1;
  transition: all .5s 4s;
}

.seaOutItem:nth-of-type(2) {
  top: 44.82%;
  left: 21.15%;
}

.seaOutItem:nth-of-type(2) .vertical {
  height: 1.34rem;
  bottom: .09rem;
}

.seaOutItem:nth-of-type(2) .transverse {
  /*left: .075rem;*/
  /*top: -1.28rem;*/
  left: 0;
  top: 0;
}

.seaOutItem:nth-of-type(2) p {
  left: .6rem;
  top: -1.46rem;
}

.seaOutItem:nth-of-type(3) {
  top: 44.82%;
  left: 48.39%;
}

.seaOutItem:nth-of-type(3) .vertical {
  height: 1.78rem;
  bottom: .09rem;
}

.seaOutItem:nth-of-type(3) .transverse {
  /*right: .075rem;*/
  /*top: -1.72rem;*/
  right: 0;
  top: 0;
}

.seaOutItem:nth-of-type(3) p {
  right: .6rem;
  top: -1.92rem;
}

.seaOutItem:nth-of-type(4) {
  top: 44.82%;
  left: 58.33%;
}

.seaOutItem:nth-of-type(4) .vertical {
  height: 2.31rem;
  bottom: .09rem;
}

.seaOutItem:nth-of-type(4) .transverse {
  /*left: .075rem;*/
  /*top: -2.25rem;*/
  left: 0;
  top: 0;
}

.seaOutItem:nth-of-type(4) p {
  left: .6rem;
  top: -2.4rem;
}

.seaOutItem:nth-of-type(5) {
  top: 51.21%;
  left: 62.03%;
}

.seaOutItem:nth-of-type(5) .vertical {
  height: 1.73rem;
  bottom: .09rem;
}

.seaOutItem:nth-of-type(5) .transverse {
  /*left: .075rem;*/
  /*top: -1.67rem;*/
  left: 0;
  top: 0;
}

.seaOutItem:nth-of-type(5) p {
  left: .6rem;
  top: -1.85rem;
}

.seaOutItem:nth-of-type(6) {
  top: 64.59%;
  left: 22.81%;
}

.seaOutItem:nth-of-type(6) .vertical {
  height: 1.78rem;
  top: .09rem;
}

.seaOutItem:nth-of-type(6) .transverse {
  /*left: .07rem;*/
  /*bottom: -1.72rem;*/
  left: 0;
  bottom: 0;
}

.seaOutItem:nth-of-type(6) p {
  left: .6rem;
  bottom: -1.85rem;
}

.seaOutItem:nth-of-type(7) {
  top: 59.84%;
  left: 45.36%;
}

.seaOutItem:nth-of-type(7) .vertical {
  height: 1.78rem;
  top: .09rem;
}

.seaOutItem:nth-of-type(7) .transverse {
  /*left: .075rem;*/
  /*bottom: -1.72rem;*/
  left: 0;
  bottom: 0;
}

.seaOutItem:nth-of-type(7) p {
  left: .6rem;
  bottom: -1.85rem;
}

.seaOutItem:hover::after {
  animation: identifier .8s linear infinite forwards;
}

.seaOutItem:nth-of-type(5)::after{
    animation: identifier .8s linear infinite forwards;
}

@keyframes identifier {
  0% {
    border: .07rem solid #FFFFFF;
  }
  
  50%{
    border: .21rem solid rgba(255, 255, 255, 0.8);
  }

  100% {
    border: .21rem solid rgba(255, 255, 255, 0.2);
  }
}

.select {
  width: 100%;
  min-height: 8rem;
  background-image: url(../img/field/select.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.select .commmonTitle {
  margin-top: 1.1rem;
}

.selectList {
  width: 16rem;
  margin: 1rem auto 0;
  box-sizing: border-box;
  display: flex;
}

.selectItem {
  width: 3.75rem;
  height: 3.46rem;
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.15rem 0.01rem rgba(0, 0, 0, 0.15);
  border-radius: .2rem;
  transform: skew(-5deg);
  margin-right: .33rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .5s;
}

.selectItem:hover {
  transform: skew(-5deg) translateY(-.15rem);
}

.selectItemBox {
  transform: skew(5deg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.selectItem:nth-child(4n) {
  margin-right: 0;
}

.selectItemImg {
  width: 1.22rem;
  height: 1.22rem;
  display: flex;
  margin-top: .5rem;
  margin-bottom: .22rem;
}

.selectItemImg img:last-child,
.selectItem:hover .selectItemImg img:first-child {
  display: none;
}

.selectItem:hover .selectItemImg img:last-child {
  display: block;
}

.selectItemTit {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.25rem;
  color: #000000;
  margin-bottom: .18rem;
}

.selectItemTxt {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.18rem;
  color: #777777;
  width: 1.6rem;
  text-align: center;
}

.serve {
  height: 10.55rem;
  overflow: hidden;
  position: relative;
}

.serve .commmonTitle {
  margin-top: 1.2rem;
}

.serveBox {
  width: 15rem;
  height: 15rem;
  /* margin: 1.03rem auto 0; */
  background: rgba(57, 132, 229, 0.03);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: -7.5rem;
  transform: translateX(-50%);
  z-index: 100;
}

.serveBox::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 15rem;
  height: 15rem;
  border: 2px dashed rgba(57, 132, 229, 0.50);
  border-radius: 50%;
  box-sizing: border-box;
  clip: rect(0rem 0rem 15rem 0rem);
}

.serveBoxActive::before {
  animation: serve1 7s linear forwards;
}

.serveBox_small {
  width: 11rem;
  height: 11rem;
  margin: 0 auto;
  border-radius: 50%;
  position: absolute;
  bottom: -5.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.serveBox_small::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 11rem;
  height: 11rem;
  border: 2px dashed #3984E5;
  border-radius: 50%;
  box-sizing: border-box;
}

.serveBox_smallActive::before {
  animation: serve2 7s linear forwards;
}

@keyframes serve1 {
  0% {
    clip: rect(0rem 0rem 15rem 0rem);
  }

  100% {
    clip: rect(0rem 15rem 15rem 0rem);
  }
}

@keyframes serve2 {
  0% {
    clip: rect(0rem 0rem 11rem 0rem);
  }

  100% {
    clip: rect(0rem 11rem 11rem 0rem);
  }
}

.serveItem {
  position: absolute;
  transform: translateY(-100%);
  opacity: 0;
}

.serveNumber {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 0.5rem;
  color: rgba(142, 142, 142, 0.3);
}

.serveTit {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.25rem;
  color: #333333;
  position: relative;
}

.serveTit::after {
  content: '';
  width: 0.15rem;
  height: 0.15rem;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 0.03rem solid #0866DF;
  position: absolute;
  border-radius: 50%;
  left: -.24rem;
  top: .09rem;
}

.serveItem:nth-child(1) {
  left: 0.1%;
  top: 29.79%;
  animation: serve 1s forwards;
}

.serveItemActive:nth-child(1) {
  animation: serve 1s forwards;
}

.serveItem:nth-child(2) {
  left: 8.67%;
  top: 13.53%;
}

.serveItemActive:nth-child(2) {
  animation: serve 1s 1s forwards;
}

.serveItem:nth-child(3) {
  left: 27.93%;
  top: .87%;
}

.serveItemActive:nth-child(3) {
  animation: serve 1s 2s forwards;
}

.serveItem:nth-child(4) {
  left: 47.58%;
  top: -2.58%;
}

.serveItemActive:nth-child(4) {
  animation: serve 1s 3s forwards;
}

.serveItem:nth-child(5) {
  left: 70%;
  top: .87%;
}

.serveItemActive:nth-child(5) {
  animation: serve 1s 4s forwards;
}

.serveItem:nth-child(6) {
  left: 87.3%;
  top: 13.53%;
}

.serveItemActive:nth-child(6) {
  animation: serve 1s 5s forwards;
}

.serveItem:nth-child(7) {
  left: 93.33%;
  top: 29.79%;
}

.serveItemActive:nth-child(7) {
  animation: serve 1s 6s forwards;
}

.smallItem {
  width: 1.04rem;
  height: 1.04rem;
  display: flex;
  cursor: pointer;
  position: absolute;
  transform: translateY(-100%);
  opacity: 0;
}

.smallItem img:last-child,
.smallItem:hover img:first-child {
  display: none;
}

.smallItem:hover img:last-child {
  display: block;
}

.smallItem:nth-child(1) {
  left: -1.67%;
  top: 28.92%;
}

.smallItemActive:nth-child(1) {
  animation: serve 1s forwards;
}

.smallItem:nth-child(2) {
  left: 6.91%;
  top: 12.82%;
}

.smallItemActive:nth-child(2) {
  animation: serve 1s 1s forwards;
}

.smallItem:nth-child(3) {
  left: 23.64%;
  top: 0%;
}

.smallItemActive:nth-child(3) {
  animation: serve 1s 2s forwards;
}

.smallItem:nth-child(4) {
  left: 43.94%;
  top: -4.73%;
}

.smallItemActive:nth-child(4) {
  animation: serve 1s 3s forwards;
}

.smallItem:nth-child(5) {
  left: 66.91%;
  top: 0%;
}

.smallItemActive:nth-child(5) {
  animation: serve 1s 4s forwards;
}

.smallItem:nth-child(6) {
  left: 84%;
  top: 12.82%;
}

.smallItemActive:nth-child(6) {
  animation: serve 1s 5s forwards;
}

.smallItem:nth-child(7) {
  left: 92%;
  top: 28.92%;
}

.smallItemActive:nth-child(7) {
  animation: serve 1s 6s forwards;
}

@keyframes serve {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.serveImg {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: -4rem;
  transform: translateX(-50%);
  z-index: 200;
}

.serveMore {
  position: absolute;
  left: 50%;
  top: 1.84rem;
  transform: translateX(-50%);
  width: fit-content;
  height: 0.5rem;
  display: flex;
  padding: 0 .08rem 0 .27rem;
  align-items: center;
  background: rgba(57, 132, 229, 0.85);
  border: 0.01rem solid #FFFFFF;
  border-radius: .5rem;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 0.17rem;
  color: #FFFFFF;
}

.serveMore img {
  width: .36rem;
  height: .36rem;
  margin-left: .71rem;
  flex-shrink: 0;
}

.case {
  overflow: hidden;
  background: #FFFFFF!important;
}

.case .commmonTitle {
  margin-top: 1.1rem;
}

.caseSwiper {
  width: 16rem;
  margin: .79rem auto 1.41rem !important;
}

.caseSwiper .swiper-slide {
  border-radius: .15rem;
  overflow: hidden;
}

.caseImg {
  width: 100%;
  height: 3rem;
  overflow: hidden;
}

.caseTit {
  width: 100%;
  height: .63rem;
  padding: 0 .45rem;
  box-sizing: border-box;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.2rem;
  color: #FFFFFF;
  line-height: 0.63rem;
  background: linear-gradient(180deg, #0866DF 0%, #3984E5 100%);
}

.product {
  overflow: hidden;
  background: #F7F7F7;
}

.product .commmonTitle {
  margin-top: .91rem;
}

.productSwiper {
  width: 16rem;
  margin: .88rem auto 1.15rem !important;
}

.productSwiper .swiper-slide {
  padding: .2rem .45rem;
  box-sizing: border-box;
  background: #FFFFFF;
}

.productImg {
  width: 2.72rem;
  height: 3.15rem;
  overflow: hidden;
  margin: 0 auto .19rem;
}

.productTit {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.2rem;
  color: #333333;
  margin-bottom: 0.22rem;
  text-align: center;
}

.productMore {
  height: .36rem;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.14rem;
  color: #0866DF;
  margin: 0 auto;
  width: fit-content;
  margin-bottom: .27rem;
  display: flex;
  align-items: center;
  padding: 0 .18rem;
  transition: all .5s;
}

.productSwiper .swiper-slide:hover .productMore{
  background: #3984E5;
  color: #FFFFFF;
  border-radius: .36rem;
}

@media screen and (max-width:1024px){
    .field{
        padding: .3rem;
        margin-top: .3rem;
    }
    .fieldSwiper{
        height: auto;
        box-shadow: 0 .02rem .12rem 0 rgba(0, 0, 0, 0.1)
    }
    .fieldSwiper>.fieldSwiperText{
        position: static;
        width: 100%;
        height: auto;
        padding: .3rem;
        margin-top: .8rem;
    }
    .fieldTit{
        font-size: 16px;
        margin-bottom: .3rem;
    }
    .fieldTxt{
        font-size: 14px;
    }
    .fieldSwiper .swiper-slide .fieldSwiperText{
        display: none;
    }
    .fieldList{
        display: flex;
        width: 100%;
        left: 0;
        top: 0;
        transform: translateY(0);
    }
    .fieldListItem{
        width: 100%;
        padding: 0 .15rem;
        white-space: nowrap;
    }
    .selectList{
        width: 100%;
        flex-wrap: wrap;
        padding: .3rem;
        box-sizing: border-box;
    }
    .selectItem{
        width: 48%;
        margin-right: 4%;
        margin-bottom: 4%;
    }
    .selectItem:nth-child(2n){
        margin-right: 0%;
    }
    .selectItemTit{
        font-size: 16px;
    }
    .selectItemTxt{
        width: 90%;
        font-size: 14px;
    }
    .serveBox,
    .serveBox_small,
    .serveImg{
        transform: translateX(-50%) scale(.4);
    }
    .serve{
        height: 6rem;
    }
    .serveNumber{
        font-size: 40px;
    }
    .serveTit{
        font-size: 28px;
        white-space: nowrap;
    }
    .serveMore{
        width: fit-content;
        height: 1rem;
        font-size: 30px;
        white-space: nowrap;
    }
    .serveMore img{
        width: .8rem;
        height: .8rem;
    }
    .caseTit{
        font-size: 14px;
    }
    .productText{
        padding: 0 .3rem;
        box-sizing: border-box;
    }
    .productTit{
        font-size: 14px;
    }
    .productMore{
        font-size: 14px;
    }
}