.plan-page {
  min-height: 100vh;
  background: #fff;
}

.ser-flow{ position: relative; margin-top: 80px;}
 
.ser-flow .index-tit h2{ font-size:40px; text-align:center; line-height:80px; position: relative; z-index: 1;}
.ser-flow .index-tit h2 .pinyin-bg{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; font-size: 80px; color: rgba(155, 89, 182, 0.1); font-weight: bold; white-space: nowrap; z-index: 0; letter-spacing: 8px; pointer-events: none; text-align: center;}

.ser-flow ul{ clear: both; overflow: visible; margin: 50px auto; list-style: none; padding: 0; min-height: 0; position: relative; z-index: 2;}
.ser-flow ul:empty{ display: none;}
.ser-flow li{ float:left; width:16.6%; text-align:center; background: transparent; position: relative; z-index: 2;}
.ser-flow li:empty{ display: none;}
.ser-flow li h3{ font-size:16px; position: relative; z-index: 2; color: #9B59B6;}
.ser-flow li span{ display:block; position:relative; width:54px; height:54px; font-size:16px; font-weight: bold; margin:30px auto; z-index: 2;}
.ser-flow li i{ display:block; width:54px; height:54px;line-height:54px; }
.ser-flow li .ser-line01{ position:absolute; top:0; color:#0b92c8;background:url(../images/ser-line03.png) no-repeat center; transform:rotateX(0deg); backface-visibility:hidden; transition:all ease 0.5s;}
.ser-flow li .ser-line02{ color: #FFF; background:url(../images/ser-line04.png) no-repeat center; transform:rotateX(-180deg); backface-visibility:hidden; transition:all ease 0.5s;}
.ser-flow li p{ color: #666; line-height: 26px;}
.ser-flow li:hover h3{color:#0b92c8;}
.ser-flow li:hover .ser-line01{ transform:rotateX(180deg); -ms-transform:rotateX(180deg); -moz-transform:rotateX(180deg); -webkit-transform:rotateX(180deg); -o-transform:rotateX(180deg);}
.ser-flow li:hover .ser-line02{ transform:rotateX(0deg); -ms-transform:rotateX(0deg); -moz-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); -o-transform:rotateX(0deg);}
.ser-flow ul .ser-line{ position:absolute; top: 0; left: 0; width:100%; height:1px; background-color:#C8D4F1; z-index:0; display: block; transform: translateY(calc(24px + 30px + 27px + 10px));}

 
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .ser-flow {
    margin-top: 40px;
    padding: 0 15px;
  }

  .ser-flow .index-tit h2 {
    font-size: 24px;
    line-height: 1.4;
    padding: 0 10px;
    word-wrap: break-word;
    white-space: normal;
  }

  .ser-flow .index-tit h2 .pinyin-bg {
    width: 90%;
    font-size: 40px;
    letter-spacing: 4px;
    white-space: normal;
    word-wrap: break-word;
  }

  .ser-flow ul {
    margin: 30px auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    clear: none;
    padding-inline-start: 0;
  }

  .ser-flow li {
    float: none;
    width: 48%;
    margin-bottom: 30px;
  }

  .ser-flow li h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .ser-flow li span {
    width: 44px;
    height: 44px;
    margin: 15px auto;
  }

  .ser-flow li i {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
  }

  .ser-flow ul .ser-line {
    display: none;
  }
}

@media (max-width: 480px) {
  .ser-flow {
    margin-top: 30px;
    padding: 0 10px;
  }

  .ser-flow .index-tit h2 {
    font-size: 20px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
  }

  .ser-flow .index-tit h2 .pinyin-bg {
    width: 95%;
    font-size: 32px;
    letter-spacing: 2px;
    white-space: normal;
    word-wrap: break-word;
  }

  .ser-flow ul {
    margin: 20px auto;
    padding-inline-start: 0;
  }

  .ser-flow li {
    width: 100%;
    margin-bottom: 25px;
  }

  .ser-flow li h3 {
    font-size: 13px;
  }

  .ser-flow li span {
    width: 40px;
    height: 40px;
    margin: 10px auto;
  }

  .ser-flow li i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
  }
}