em {
  font-style: normal;
}
li {
  list-style: none;
}
video {
  border: 5px solid #cce7ff !important;
}
/*--- 标题 ---*/
// 基础标题
.fn-tl_bs_1 {
  font-size: 24px;
}

.fn-tl_bs_2 {
  font-size: 20px;
}

.fn-tl_bs_3 {
  font-size: var(--title-default-size, 16px);
}

.fn-tl_bs_4 {
  font-size: var(--content-second-size, 14px);
  color: #666;
}

.fn-tl_bs_6 {
  margin: 10px 0;
  padding: 1em;
  color: #333;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  line-height: 26px;
  white-space: normal;
  counter-reset: line;

  code {
    background-color: unset !important;

    &:before {
      text-align: right;
      counter-increment: line;
      content: counter(line);
      display: inline;
      margin-right: 12px;
      color: rgba(0, 0, 0, 0.15);
    }
  }
}

.fn-tl_bs_7 {
  display: flex;
  justify-content: center;
  padding: 10px 0;

  & > em {
    border-top: 1px solid #ff6600;
  }
}

.fn-tl_bs_8 {
  display: flex;
  justify-content: center;
  padding: 10px 0;

  & > em {
    font-style: normal;
    color: rgb(255, 255, 255);
    font-size: var(--button-default-size, 17px);
    line-height: 1.8;
    letter-spacing: 4px;
    padding: 0px;
    text-align: center;
    text-shadow: rgb(1 177 164) 1px -1px, rgb(1 177 164) 1px 1px,
      rgb(1 177 164) -1px 1px, rgb(1 177 164) -1px -1px, rgb(1 177 164) 1px 0px,
      rgb(1 177 164) 0px 1px, rgb(1 177 164) -1px 0px, rgb(1 177 164) 0px -1px;
  }
}

.fn-tl_bs_9 {
  display: flex;
  justify-content: center;
  padding: 10px 0;

  & > em {
    font-style: normal;
    color: rgb(255, 255, 255);
    font-size: var(--button-default-size, 17px);
    line-height: 1.8;
    letter-spacing: 4px;
    padding: 0px;
    text-align: center;
    text-shadow: rgb(255, 0, 251) 1px -1px, rgb(255, 140, 0) 1px 1px,
      rgb(255, 234, 7) -1px 1px, rgb(94, 255, 0) -1px -1px,
      rgb(0, 255, 238) 1px 0px, rgb(31, 1, 255) 0px 1px,
      rgb(221, 0, 255) -1px 0px, rgb(0, 0, 0) 0px -1px;
  }
}

.fn-tl_bs_10 {
  display: flex;
  justify-content: center;
  padding: 10px 0;

  em {
    font-size: 25px;
    border-bottom: 1px solid #b2ac08;
    color: brown;
  }
}

.fn-tl_bs_11 {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  letter-spacing: 3px;
  text-shadow: #f9eaeb 2px 2px 1px, #f9eaeb -2px -2px 1px, #f9eaeb -2px 2px 1px,
    #f9eaeb 2px -2px 1px;
  em {
    font-size: 22px;
    border-bottom: 1px solid #000000;
    color: rgb(27, 74, 10);
  }
}

// 框线标题
.fn-tl_li_1 {
  padding: 20px;

  & > em {
    background-color: rgba(186, 215, 251, 0.25);
    padding: 7px 18px;
    display: inline-block;
    position: relative;

    &:before,
    &:after {
      content: '';
      display: block;
      background: #333;
      position: absolute;
    }

    &:before {
      height: 1px;
      width: calc(100% + 8px);
      top: -8px;
      left: -8px;
    }

    &:after {
      height: calc(100% + 8px);
      width: 1px;
      top: -8px;
      left: -8px;
    }
  }
}

.fn-tl_li_2 {
  display: flex;
  align-items: center;
  margin: 10px 30px 10px 30px !important;
  & > .m-lt {
    display: flex;
    width: 35%;
    margin: 15px 0;
    color: #fff;
    align-items: center;

    em {
      position: relative;
      background: #6667ab;
      padding: 2px 20px;
      font-size: var(--desc-default-size, 12px);

      &::before {
        position: absolute;
        top: -9px;
        right: -40px;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-left: 20px solid #6667ab;
      }
    }
  }

  & > .m-rt {
    height: 1px;
    flex: 1;
    background: #6667ab;
  }
}

.fn-tl_li_3 {
  margin: 15px 10px 15px 10px !important;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  & > .m-wd {
    margin: 0 5px 0 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: #e1edd4;
    border: 1px solid #4d6f2b;
    color: #4d6f2b;
    font-weight: 800;
  }

  &::before,
  &::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4d6f2b;
    position: relative;
    top: 12px;
    left: 235px;
  }
  &::after {
    left: 40px;
  }
}

.fn-tl_li_10 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px !important;

  & > div {
    padding: 10px 20px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    & > section {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: purple;
        display: inline-block;
        margin-right: 30px;
        position: absolute;
        top: 15px;
        left: 0;
      }

      &::after {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: yellow;
        display: block;
        margin-left: 30px;
        position: absolute;
        top: 15px;
        right: 0;
      }
    }
  }
}

.fn-tl_li_11 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;

  & > .m-lt,
  & > .m-rt {
    background-color: #f00;
    color: white;
    padding: 5px 10px 5px 10px;
    position: relative;
    margin-right: 20px;
    display: flex;
    align-items: center;
  }

  & > .m-lt {
    &::before {
      content: '';
      width: 120%;
      border-bottom: 2px solid #f00;
      display: block;
      position: absolute;
      left: -115px;
    }
  }

  & > .m-rt {
    &::before {
      content: '';
      width: 120%;
      border-bottom: 2px solid #f00;
      display: inline-block;
      position: absolute;
      right: -115px;
    }
  }
}

.fn-tl_li_12 {
  & > .m-tl {
    padding: 10px 0px 20px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: relative;

    & > div {
      border: 1px solid #b3c5bc;
      color: #b3c5bc;
      width: 25px;
      height: 25px;
      border-radius: 50%;

      & > section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }

    &::after {
      width: 50%;
      border-top: 3px solid #b3c5bc;
      content: '';
    }
  }

  & > .m-ft {
    color: #b3c5bc;
    text-align: center;
  }
}

.fn-tl_li_13 {
  position: relative;

  & > .m-ct {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #7aaaa3;
    padding: 10px;

    &::before {
      mix-blend-mode: multiply;
      background-color: #f3fbf0;
      content: '';
      display: block;
      height: 40px;
      width: 10%;
      position: absolute;
      top: 5px;
    }

    &::after {
      width: 20%;
      border-bottom: 1px solid #7aaaa3;
      height: 2px;
      content: '';
      margin-top: 5px;
      position: absolute;
      bottom: 0px;
    }

    & > section {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.fn-tl_li_14 {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  & > i {
    font-style: normal;
    width: 45px;
    height: 45px;
    border-radius: 0% 40% 0% 0%;
    background-color: #f00;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: var(--title-default-size, 16px);
    margin-right: 10px;
  }

  & > .m-bd {
    padding: 10px;
    color: #f00;
    font-weight: bold;
    border-bottom: 3px solid #f3d174;
    font-size: var(--title-default-size, 16px);
  }
}

.fn-tl_li_15 {
  background-color: #fff9e7;
  margin: 20px !important;

  & > div {
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 55px;
      height: 35px;
      border: 3px solid #ffd658;
      position: absolute;
      top: -25px;
      left: -25px;
      z-index: 1;
    }

    &::after {
      content: '';
      display: inline-block;
      width: 60px;
      height: 20px;
      background-color: #fff9e7;
      position: absolute;
      top: -10px;
      left: -10px;
      z-index: 10;
    }
  }
}

.fn-tl_li_16 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2px solid #f2b7b7;

  & > i {
    background-color: #f2b7b7;
    color: #fff;
    padding: 5px 10px;
    font-size: var(--title-default-size, 16px);
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
  }

  & > .m-bd {
    padding: 10px;
    color: #b57e79;
    font-weight: bold;
    border-left: 3px solid #f2b7b7;
    font-size: var(--content-second-size, 14px);
    margin-bottom: 10px;
    position: relative;
    top: 5px;
  }
}

.fn-tl_li_17 {
  & > div {
    padding: 5px 20px;
    border: 2px solid #e72215;
    display: inline-block;
    position: relative;
    color: #e72215;
    font-weight: bold;

    &::before {
      content: '';
      display: inline-block;
      border: 10px solid transparent;
      border-left: 10px solid #e72215;
      width: 0;
      height: 0;
      transform: rotate(-135deg);
      position: absolute;
      bottom: -10px;
    }
  }
}

.fn-tl_li_18 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    padding: 10px 20px;
    border: 1px solid #000;
    box-shadow: 6px 6px #ffda5c;
    font-weight: bold;
    color: #666666;
    position: relative;

    &::before,
    &::after {
      display: inline-block;
      width: 5px;
      height: 20px;
      content: '';
      transform: rotate(45deg);
      position: absolute;
      top: -10px;
      outline: 2px solid #fff;
    }

    &::before {
      background-color: #ffda5c;
      right: 20px;
    }

    &::after {
      background-color: #4abba8;
      right: 10px;
    }
  }
}

.fn-tl_li_19 {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > .m-bg {
    position: absolute;
    top: 0;
    color: #eeeeee;
    font-weight: bold;
    font-size: 50px;
    align-self: center;
  }

  & > .m-bd {
    font-weight: bold;
    border-bottom: 1px solid #000;
    display: inline-block;
    z-index: 10;
  }

  & > .m-ft {
    color: #bcbcbc;
    font-size: var(--desc-default-size, 12px);
    z-index: 10;
  }
}

.fn-tl_li_20 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  .my-bg {
    display: flex;
    flex-direction: column;
    & > .m-plus {
      display: flex;
      justify-content: end;
      & > section {
        margin-right: -11px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        font-size: 40px;
        font-weight: bold;
        color: rgb(17, 235, 255);
      }
    }

    em {
      margin-top: -7px;
      border: 3px solid rgb(17, 235, 255);
      font-size: 20px;
      color: #38a5fb;
      padding: 0 15px;
      line-height: 35px;
    }
  }
}

.fn-tl_li_21 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;

  & > .m-ob {
    border: 1px solid #000;

    & > .m-ib {
      border: 1px solid #a87a7a;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      padding: 0 8px;
      background-color: #efebe5;
      transform: translate(3px, 3px);
    }
    & ::before {
      content: '';
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      top: -20px;
      left: -20px;
      background-color: #cdd2c1;
      z-index: -1;
      opacity: 0.15;
    }
  }
}

.fn-tl_li_22 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  & > .m-bk {
    font-size: var(--title-default-size, 16px);
    color: #f0ebe5;
    text-align: center;
  }

  & > .m-m {
    margin: -13px 0 0 0;
    border-bottom: 2px solid #957304;
    padding: 0 8px;
    font-size: var(--button-default-size, 17px);
    color: #7d8971;
    text-align: center;
  }
}

.fn-tl_li_23 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;

  .m-bk {
    display: block;
    height: 30px;
    width: 30px;
    background-color: #f0ebe5;
    border-radius: 50%;
    margin: -13px -23px 0 0;
    border-top: 1px solid rgb(229, 156, 45);
  }

  & > .m-ft {
    padding: 0 8px;
    font-size: 20px;
    color: #1f3c03;
    font-weight: bold;
  }
  & > .m-lt {
    font-size: var(--button-default-size, 17px);
  }
}

.fn-tl_li_24 {
  display: flex;
  justify-content: center;
  align-items: center;
  .m-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    vertical-align: top;
    overflow: hidden;
    border-width: 0px;
    border-radius: 227px;
    border-style: none;
    border-color: rgb(62, 62, 62);
    background-color: rgb(37, 105, 117);
    position: relative;
    transform: translateY(-2px);
  }

  & > .m-lt {
    display: inline-block;
    vertical-align: bottom;
    width: auto;
    align-self: flex-end;
    min-width: 10%;
    max-width: 100%;
    height: auto;
    transform: rotateX(180deg);
    text-align: center;
  }

  & > .m-md {
    text-align: justify;
    font-size: var(--button-default-size, 17px);
    color: rgb(0, 66, 91);
    border-bottom: 2px solid #08678b;
  }
}

.fn-tl_li_25 {
  display: flex;
  justify-content: start;
  align-items: center;
  & > .m-lt {
    display: inline-block;
    border: 1px solid rgb(37, 105, 117);
    background-color: rgb(37, 105, 117);
    text-align: center;
    width: 35px;
    height: 35px;
    line-height: 32px;
    margin: 0 10px;
    border-radius: 100%;
    font-size: 24px;
    color: rgb(255, 255, 255);
  }

  .m-dt {
    display: inline-block;
    width: 5px;
    height: 5px;
    vertical-align: top;
    overflow: hidden;
    border-width: 0px;
    border-radius: 227px;
    border-style: none;
    border-color: rgb(62, 62, 62);
    background-color: rgb(37, 105, 117);
    position: relative;
    transform: translateY(-2px);
  }

  & > .m-rt {
    display: inline-block;
    vertical-align: bottom;
    width: auto;
    align-self: flex-end;
    min-width: 10%;
    max-width: 100%;
    height: auto;
    transform: rotateX(180deg);
    text-align: center;
  }

  & > .m-md {
    text-align: justify;
    font-size: var(--button-default-size, 17px);
    color: rgb(0, 66, 91);
    border-bottom: 2px solid #08678b;
    font-weight: bold;
  }
}

.fn-tl_li_26 {
  & > .m-m {
    & > .m-hd {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      padding: 0px;
      border-style: solid;
      border-width: 1px;
      border-radius: 0px;
      border-color: rgb(62, 62, 62);
      flex: 0 0 auto;
      height: auto;
      align-self: flex-start;

      & > .m-lt {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        background-color: rgb(62, 62, 62);
        flex: 0 0 auto;
        height: auto;
        padding: 9px;
        align-self: center;
        margin: 0px 10px 0px 0px;
        text-align: justify;
        color: rgb(255, 255, 255);
        font-size: var(--title-default-size, 16px);
        font-weight: bold;
      }

      & > .m-rt {
        display: flex;
        flex-flow: row nowrap;
        display: inline-block;
        vertical-align: middle;
        align-self: center;
        & > section {
          & > em {
            font-weight: bold;
          }
        }
      }
    }
  }
}

.fn-tl_li_27 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ffbd4a;

    & > div {
      background-color: #ffbd4a;
      color: white;
      padding: 0 5px;
      font-size: 20px;
      font-weight: bolder;
    }

    & > section {
      padding: 0 5px;
      font-weight: bolder;
      color: #8cb7f6;
      position: relative;

      &::after {
        content: '';
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-bottom: 4px solid #ffbd4a;
        display: inline-block;
        position: relative;
        top: -18px;
        left: 9px;
        transform: rotate(45deg);
      }
    }
  }
}

.fn-tl_li_28 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > .m-bg {
    align-self: center;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 9;

    & > .m-rd_l {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #bfc2e9;
      position: relative;
      left: 1px;
    }

    & > .m-curve {
      display: flex;
      justify-content: center;
      z-index: 9;
      & > div {
        width: 100px;
        height: 30px;
      }

      & > .u-cr_r {
        margin-top: 20px;
        background-image: radial-gradient(
          circle at 50px -105px,
          transparent 120px,
          #bfc2e9 121px,
          transparent 122px
        );
      }

      & > .u-cr_l {
        background-image: radial-gradient(
          circle at 50px -105px,
          transparent 120px,
          #8a8abe 121px,
          transparent 122px
        );
        transform: rotate(180deg);
      }
    }

    & > .m-rd_r {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #6868ac;
      position: relative;
      left: -3px;
      top: 5px;
    }
  }

  & > .m-bd {
    position: relative;
    margin-top: -56px;
    font-size: 30px;
    font-weight: bolder;
    z-index: 10;
  }
  & > .m-ft {
    position: relative;
    font-size: var(--title-default-size, 16px);
    top: -5px;
    z-index: 10;
  }
}

.fn-tl_li_29 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  & > .m-bg {
    position: relative;
    & > .m-ln {
      width: 200px;
      height: 60px;
      border: 1px solid black;
      transform-origin: center;
      transform: rotate(-15deg);
      position: relative;
      z-index: 10;
      border-radius: 100%;
      top: 30px;
    }

    & > .m-tr {
      position: relative;
      top: -30px;

      & > .m-el {
        width: 180px;
        height: 50px;
        position: relative;
        z-index: 9;
        background-image: radial-gradient(
          ellipse at center,
          transparent 0,
          #d4d6ed 100%
        );
        transform-origin: center;
        transform: rotate(15deg);
        border-radius: 100%;
      }

      & > .m-hide {
        width: 180px;
        height: 50px;
        position: relative;
        z-index: 11;
        background-image: radial-gradient(
          ellipse at center,
          white 0,
          #ebecf7 50%,
          transparent 80%
        );
        transform-origin: center;
        transform: rotate(15deg);
        box-shadow: 0 0 20px transparent inset;
        margin-top: -50px;
        border-radius: 100%;
      }
    }
  }

  & > .m-bd {
    position: relative;
    z-index: 12;
    margin-top: -80px;
    top: -20px;

    & > section {
      font-size: 26px;
      font-weight: bolder;
    }

    & > .m-top {
      position: relative;
      left: -13px;
    }

    & > .m-btm {
      position: relative;
      left: 13px;
    }
  }
}

.fn-tl_li_30 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > .m-num {
    & > section {
      padding: 0 50px;
      border-bottom: 2px solid #6669a9;
      font-weight: bolder;
      font-size: 20px;
    }
  }

  & > .m-bd {
    font-weight: bolder;
    letter-spacing: 2px;
    font-size: var(--button-default-size, 17px);
    margin-top: -5px;
    padding: 0 10px;
    border-bottom: 7px solid #bfc2e9;

    & > section {
      position: relative;
      top: 8px;
    }
  }
}

// 图片标题
.fn-tl_im_1 {
  margin: 30px 20px;
  background-color: #f0fbff;
  padding: 15px;
  display: flex;
  border-radius: 10px;
  position: relative;

  & > img {
    width: 100px;
    height: 25px;
    transform: rotate(-35deg);
    position: absolute;
    left: -30px;
    top: 5px;
  }

  & > div {
    flex: 1;
  }

  .m-lt {
    display: flex;
    justify-content: center;
    border-right: 1px solid rgb(206, 234, 255);
    padding-right: 20px;

    & > em {
      text-align: center;
      font-size: var(--button-default-size, 17px);
      font-weight: bold;
      color: rgb(255, 154, 155);
      line-height: 1.3;
      letter-spacing: 2px;
    }
  }

  .m-rt {
    display: flex;
    flex-direction: column;
    padding-left: 20px;

    & > .m-tp {
      display: flex;
      justify-content: center;

      em {
        display: flex;
        justify-content: center;
        flex: 2;
        font-size: var(--content-default-size, 15px);
        color: rgb(122, 129, 255);
      }

      img {
        width: 40px;
        margin-right: 20px;
      }
    }
    & > .m-bt {
      display: inline-block;
      margin: 5px 0 0 0;
      text-align: center;
      background-color: rgb(206, 234, 255);
      color: #fff;
      border-radius: 5px;
      font-size: var(--title-default-size, 16px);
      font-weight: bold;
      padding: 2px 10px;
    }
  }
}

.fn-tl_im_2 {
  display: flex;
  justify-content: center;
  margin: 15px 0 15px 0 !important;
  em {
    font-style: normal;
    font-size: var(--desc-default-size, 12px);
  }
  & > .m-rt {
    margin: 22px 25px 22px 25px;
    width: 80px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    text-align: center;
  }
  & > .m-cen {
    height: 70px;
    width: 70px;
    border-radius: 50%;
  }
}

.fn-tl_im_3 {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin: 15px 0 15px 0 !important;
  & > img {
    height: 90%;
    border-radius: 50%;
  }
  & > .m-wd {
    display: flex;
    align-items: center;
    position: relative;
    left: -100px;
    & > .m-ct {
      width: 60px;
      line-height: 30px;
      background: #93b06c;
      color: white;
      & > em {
        font-weight: 800;
      }
    }
    & > .m-lt {
      width: 90px;
      line-height: 29px;
      color: #93b06c;
      border: 1px solid;
      border-color: #93b06c transparent #93b06c transparent;
      margin-left: 15px;
    }
  }
}

.fn-tl_im_4 {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 20px !important;
  & > .m-hb {
    width: 30px;
    height: 30px;
    position: relative;
    top: 20px;
    left: 57px;
    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 7.5px;
      height: 12.5px;
      background-color: #a8c7ea;
      border-top-left-radius: 50% 3.875px;
      border-top-right-radius: 50% 3.875px;
      left: 2.05px;
      top: 0px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 5.6px;
    }
  }
  & > .m-hs {
    width: 30px;
    height: 30px;
    position: relative;
    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 15px;
      height: 25px;
      background-color: #a8c7ea;
      border-top-left-radius: 50% 7.5px;
      border-top-right-radius: 50% 7.5px;
      left: 4.1px;
      top: 0px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 11.2px;
    }
  }

  & > .m-ct {
    width: 180px;
    background: #eef6ff;
    color: #a8c7ea;
    padding-top: 4px;
  }
}

.fn-tl_im_5 {
  & > .m-lt {
    background: #fff5f4;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    top: 10px;
    left: 10px;
    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 30px;
      height: 50px;
      background-color: #e16054;
      border-top-left-radius: 50% 15px;
      border-top-right-radius: 50% 15px;
      left: 17.2px;
      top: 14px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 31.4px;
    }
  }
  & > .m-rt {
    position: relative;
    top: -45px;
    left: 130px;
    padding-bottom: 5px;
    width: 180px;
    text-align: center;
    color: #e16054;
    border: 1px solid;
    border-color: transparent transparent black transparent;
  }
}

.fn-tl_im_10 {
  position: relative;

  & > .m-bd {
    font-size: var(--button-default-size, 17px);
    font-weight: bold;
    position: relative;
    padding: 30px 0 10px 30px;

    & > :nth-child(1) {
      display: inline-block;
      position: absolute;
      top: 15px;
      left: 30px;
      font-size: var(--title-default-size, 16px);
      width: 30px;
      height: 30px;
    }
  }

  &::after {
    content: '';
    width: 60px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    mix-blend-mode: multiply;
    background-image: repeating-linear-gradient(
      -30deg,
      #ffc8c8,
      #fff 2px,
      transparent 0,
      transparent 4px
    );
  }
}

.fn-tl_im_11 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;

  & > .m-tl {
    & > em {
      display: block;
      background-color: #e96c6f;
      color: #fff;
      padding: 5px 10px 5px 10px;
      font-weight: bold;
    }
  }

  & > :nth-child(2) {
    position: relative;
    border-left: 1px solid #e96c6f;
    padding: 0 0 0 20px;
    right: 35px;
    display: flex;
    align-items: center;

    &::before,
    &::after {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background-color: #e96c6f;
      display: inline-block;
      position: absolute;
    }

    &::before {
      left: 90px;
    }

    &::after {
      left: 110px;
    }
  }

  img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
  }
}

.fn-tl_im_12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  & > .m-img {
    opacity: 0.8;
    top: 0;
    img {
      max-width: 100%;
    }
  }

  & > section {
    position: absolute;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
    font-size: var(--button-default-size, 17px);
    align-self: center;
    &::after,
    &::before {
      content: '';
      display: inline-block;
      width: 120px;
      border-top: 1px solid #fff;
      margin: 10px;
    }
  }
}

.fn-tl_im_13 {
  & > :nth-child(odd) {
    display: flex;
    flex-direction: row;
    align-items: center;
    & > img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    & > section {
      display: inline-block;
      margin-left: 15px;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      padding: 7px 15px;
    }
  }
}

.fn-tl_im_14 {
  padding: 30px !important;
  border-bottom: 1px solid #e96c6f;
  position: relative;

  & > .m-tl {
    position: relative;
    top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;

    & > :nth-child(1) {
      color: #fff;
      font-weight: bold;
      font-size: 60px;
      text-shadow: #e29cbf 1px -1px, #e29cbf 1px 1px, #e29cbf -1px 1px,
        #e29cbf -1px -1px, #e29cbf 1px 0px, #e29cbf 0px 1px, #e29cbf -1px 0px,
        #e29cbf 0px -1px;
      display: inline-block;
      position: relative;
      top: 13px;
    }

    & > :nth-child(2) {
      color: #e96c6f;
      position: relative;
      top: -10px;
      display: inline-block;
    }
  }

  & > img {
    width: 150px;
    height: 150px;
    padding: 5px;
    border: 1px solid #e29cbf;
    border-bottom: 1px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.fn-tl_im_15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > .m-bk {
    background: url('https://static.suosihulian.com/file/richText/img/img4.png')
      no-repeat center center;
    height: 180px;
    width: 180px;
    & > .m-txt {
      margin: 60px 0px 0px 80px;
      & > div {
        font-size: 25px;
        font-weight: bold;
        color: rgb(20, 67, 1);
      }
    }
  }
}

.fn-tl_im_16 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > .m-bk1 {
    margin-top: 5px;
    background: url('https://static.suosihulian.com/file/richText/img/img2.png')
      no-repeat center center;
    height: 70px;
    width: 70px;
    z-index: 100;
    & > div {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
      color: rgb(0, 0, 0);
    }
  }

  & > .m-bk2 {
    background: url('https://static.suosihulian.com/file/richText/img/img3.webp')
      no-repeat center center;
    height: 70px;
    width: 100%;
    margin: -35px 0 0 0;
  }
}

.fn-tl_im_17 {
}

// 底色标题
.fn-tl_bc_1 {
  display: flex;
  flex-direction: column;
  background-color: rgb(194, 37, 35);
  padding: 15px 15px 10px;
  color: #fff;

  & > em {
    text-align: center;
    font-size: var(--title-default-size, 16px);
  }
  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--button-default-size, 17px);
    font-weight: bold;

    label {
      margin: 5px 20px;
    }

    & > i {
      display: flex;
      align-items: center;
      width: 30px;
      height: 1px;
      background: #fff;
      position: relative;

      &:before,
      &:after {
        content: '';
        width: 100%;
        height: 1px;
        background: #fff;
        display: block;
        position: absolute;
      }

      &:nth-child(1) {
        &:before {
          top: -5px;
          left: 5px;
        }
        &:after {
          top: 5px;
          left: 5px;
        }
      }

      &:nth-child(3) {
        &:before {
          top: -5px;
          left: -5px;
        }
        &:after {
          top: 5px;
          left: -5px;
        }
      }
    }
  }
}

.fn-tl_bc_2 {
  border-color: transparent red red transparent;
  border-style: solid;
  text-align: center;
  margin: 5px 10px 5px 10px;
  em {
    font-size: var(--desc-default-size, 12px);
    font-style: normal;
    font-weight: 500;
    margin: 10px 0 10px 0;
  }
  & > .m-cen {
    padding: 8px 0 8px 0;
    background: #fff7f0;
  }
}

.fn-tl_bc_10 {
  & > .m-tl {
    background-color: #ef5036;
    padding: 5px;
    color: #f5e6d3;
    font-size: var(--button-default-size, 17px);
    position: relative;

    & > section {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  & > .m-bd {
    background-color: #fcf5ec;
    padding: 60px 0px 20px 0px;
    font-size: 70px;
    font-weight: bold;
    color: #f00;
    position: relative;

    & > :nth-child(1) {
      font-weight: normal;
      font-size: 20px;
      color: black;
      display: block;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    & > :nth-child(2) {
      display: block;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      & > :nth-child(2) {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f00;
        color: #fcf5ec;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: normal;
        margin-left: 10px;
      }
    }
  }
}

.fn-tl_bc_11 {
  padding: 15px !important;
  text-align: center;
  justify-content: center;

  & > section {
    display: inline-block;
  }

  & > .m-lt,
  & > .m-ft {
    background-color: #f65746;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    margin-right: 15px;
    //text-align: center;
    //justify-content: center;

    & > p {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
      font-size: var(--button-default-size, 17px);
      font-weight: bold;
      position: relative;
      top: 2px;
    }
  }

  & > .m-bd {
    color: #f00;
    margin-right: 15px;
  }
}

.fn-tl_bc_12 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: var(--button-default-size, 17px);

  & > div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #bc4141;
    margin: 5px;
    outline: 2px solid #bc4141;
    outline-offset: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.fn-tl_bc_13 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;

  & > .m-ct {
    left: 30px;
    position: relative;

    & > :nth-child(1) {
      font-weight: bold;
      font-size: var(--button-default-size, 17px);
    }

    & > :nth-child(2) {
      color: #d1d2d1;
    }

    &::before {
      content: '';
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #e6e6e6;
      mix-blend-mode: multiply;
      display: inline-block;
      position: absolute;
      left: -35px;
    }
  }
}

.fn-tl_bc_14 {
  padding: 15px;

  & > div {
    width: 80%;
    padding: 5px;
    outline: 1px solid #cd4242;
    outline-offset: 20px;
    margin: auto;
    background-color: #cd4242;
    color: #f5e6d3;
    text-align: center;
    font-weight: bold;
    font-size: var(--button-default-size, 17px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &::before {
      content: '';
      position: relative;
      background-color: #cd4242;
      display: inline-block;
      width: 95%;
      height: 10px;
      top: -15px;
      left: 0;
      border: 1px solid #cd4242;
      border-color: #cd4242 #cd4242 transparent #cd4242;
    }

    &::after {
      content: '';
      background-color: #cd4242;
      display: inline-block;
      position: relative;
      width: 95%;
      height: 10px;
      bottom: -15px;
      left: 0;
      border: 1px solid #cd4242;
      border-color: transparent #cd4242 #cd4242 #cd4242;
    }
  }
}

.fn-tl_bc_15 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;

  & > .m-lt {
    margin-right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & > div {
      width: 50px;
      height: 50px;
      color: #fff;
      background-color: #7aaaa3;
      border-radius: 50%;
      margin-bottom: 20px;
      font-size: var(--button-default-size, 17px);

      & > section {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    em {
      display: inline-block;

      &:nth-child(1) {
        color: #fff;
      }

      &:nth-child(2),
      &:nth-child(3) {
        color: #e3edec;
        font-size: var(--title-default-size, 16px);
      }
    }
  }

  & > .m-rt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--button-default-size, 17px);

    & > div {
      width: 50px;
      height: 50px;
      color: #fff;
      background-color: #7aaaa3;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: var(--button-default-size, 17px);
    }

    &::before {
      content: '/';
      color: #7aaaa3;
      font-size: var(--button-default-size, 17px);
      display: block;
      margin-bottom: 15px;
    }
  }
}

.fn-tl_bc_16 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    color: #fff;
    background-color: #fa5b47;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: relative;

    &::before {
      content: '';
      width: 10px;
      display: block;
      height: 30px;
      background-color: #fa5b47;
      position: absolute;
      top: 7px;
      right: 0;
      z-index: 10;
    }

    & > section {
      border-top: 2px solid #fbd083;
    }
    &::after {
      content: '';
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top: 20px solid #fbd083;
      position: absolute;
      right: -10px;
      top: 15px;
    }
  }
}

.fn-tl_bc_17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > .m-font {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background-color: #d8caa0;
    padding: 10px;
    font-size: var(--button-default-size, 17px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & > em {
    color: #d8caa0;
    display: block;
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:nth-child(2) {
      border-bottom: 1px solid #d8caa0;
    }
  }
}

.fn-tl_bc_18 {
  margin: auto !important;
  position: relative;
  padding: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;

  & > .m-bd {
    font-weight: bold;
    font-size: var(--button-default-size, 17px);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
  }

  & > .m-sq {
    display: flex;
    flex-direction: row;

    & > div {
      width: 40px;
      height: 40px;
    }

    & > :nth-child(1) {
      background-color: #f36452;
      transform: rotate(-15deg);
    }

    & > :nth-child(2) {
      background-color: #7aafe7;
      transform: rotate(20deg);
    }

    & > :nth-child(3) {
      background-color: #f7c05f;
      transform: rotate(-10deg);
    }

    & > :nth-child(4) {
      background-color: #6dcb9b;
      transform: rotate(25deg);
    }
  }
}

.fn-tl_bc_19 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  & > .m-bd {
    color: #f00;
    background-color: #f1f8ff;
    padding: 15px 10px 10px;

    position: relative;

    & > .m-cr {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      position: absolute;
      top: 5px;
      right: 0;

      & > div {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #f7ce2a;
        display: block;
        margin-right: 10px;
      }

      &::before,
      &::after {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        content: '';
        display: inline-block;
        margin-right: 10px;
      }

      &::before {
        background-color: #f15c19;
      }

      &::after {
        background-color: #39dbb7;
      }
    }
  }
}

.fn-tl_bc_20 {
  & > .m-ft {
    & > .m-lt {
      display: inline-block;
      width: auto;
      background-color: rgba(97, 155, 139, 0.09);
      padding: 9px;
      font-size: var(--button-default-size, 17px);
      font-weight: bold;
      color: rgb(0, 66, 91);
    }
    & > .m-rt {
      margin-left: 12px;
      display: inline-block;
      width: auto;
      font-size: var(--button-default-size, 17px);
      font-weight: 500;
      color: rgb(0, 66, 91);
    }
  }
}

.fn-tl_bc_21 {
  & > .m-ft {
    display: inline-block;
    width: auto;
    font-size: var(--button-default-size, 17px);
    font-weight: bold;
    padding: 13px 15px;
    background-color: rgb(255, 247, 240);
    border-right: 5px solid rgb(222, 54, 54);
    border-bottom: 5px solid rgb(222, 54, 54);
  }
}

.fn-tl_bc_22 {
  & > .m-m {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    & > .m-lt {
      display: inline-block;
      transform: rotateZ(19deg);
      height: auto;
      width: 3px;
      background-color: rgb(222, 54, 54);
    }
    & > .m-bf {
      display: inline-block;
      border-style: solid;
      border-width: 24px 8px;
      border-top-color: rgba(255, 255, 255, 0);
      border-right-color: rgb(222, 54, 54);
      border-bottom-color: rgb(222, 54, 54);
      border-left-color: rgba(255, 255, 255, 0);
    }

    & > .m-rt {
      background-color: rgb(222, 54, 54);
      padding: 11px 14px 11px;
      color: rgb(255, 255, 255);
      font-size: var(--button-default-size, 17px);
      font-weight: bold;
    }
    & > .m-af {
      display: inline-block;
      border-style: solid;
      border-width: 24px 8px;
      border-right-color: rgba(255, 255, 255, 0);
      border-top-color: rgb(222, 54, 54);
      border-left-color: rgb(222, 54, 54);
      border-bottom-color: rgba(255, 255, 255, 0);
    }
  }
}

.fn-tl_bc_23 {
  & > .m-m {
    text-align: center;
    margin: 10px;
    & > .m-bf {
      display: inline-block;
      transform: translate3d(19px, 21px, 0);
      letter-spacing: -20px;
      & > .m-lt {
        display: inline-block;
        height: 20px;
        width: 12px;
        border-right: 1px solid rgb(66, 100, 236);
        border-bottom: 1px solid rgb(66, 100, 236);
      }
      & > .m-rt {
        display: inline-block;
        height: 20px;
        width: 24px;
        border-left: 1px solid rgb(66, 100, 236);
        border-bottom: 1px solid rgb(66, 100, 236);
      }
    }
    & > .m-bd {
      display: inline-block;
      background-image: linear-gradient(
        to top,
        rgb(188, 178, 230) 0%,
        rgb(231, 191, 232) 100%
      );
      padding: 10px;
      font-size: var(--title-default-size, 16px);
      color: white;
      font-weight: 600;
    }
    & > .m-af {
      display: inline-block;
      transform: translate3d(-21px, -15px, 0);
      letter-spacing: -20px;
      & > .m-lt {
        display: inline-block;
        height: 20px;
        width: 24px;
        border-right: 1px solid rgb(188, 178, 230);
        border-top: 1px solid rgb(188, 178, 230);
      }
      & > .m-rt {
        display: inline-block;
        height: 20px;
        width: 12px;
        border-left: 1px solid rgb(188, 178, 230);
        border-top: 1px solid rgb(188, 178, 230);
      }
    }
  }
}

.fn-tl_bc_24 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;

  & > .m-num {
    & > .m-bg {
      background-color: #7daeed;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      margin-bottom: 6px;

      & > section {
        background-color: white;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        font-size: 20px;
        color: #7daeed;
        position: relative;
        left: 4px;
        top: 4px;
        font-weight: bolder;
      }
    }
  }

  & > .m-tl {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;

    & > section {
      background-color: #7daeed;
      color: white;
      border-radius: 6px;
      font-size: var(--title-default-size, 16px);
      padding: 2px 8px;
      font-weight: bolder;
    }

    &::before {
      content: '';
      position: relative;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #ffd028;
      border-radius: 5px;
      margin-right: 12px;
    }

    &::after {
      content: '';
      position: relative;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #ffd028;
      border-radius: 5px;
      margin-left: 12px;
    }
  }
}

.fn-tl_bc_25 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & > section {
      color: white;
      font-weight: bolder;
      position: relative;
      top: 25px;
      z-index: 11;
    }

    & > .m-bc {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: relative;
      z-index: 9;
    }

    & > .m-btm {
      background-color: #6669a9;
    }

    & > .m-top {
      background-image: linear-gradient(
        to bottom,
        #6669a9 0%,
        #6669a9 50%,
        transparent 51%
      );
      position: relative;
      top: -30px;
      z-index: 10;
    }

    & > .m-rd {
      width: 50px;
      height: 10px;
      border: 1px solid #bfc2e9;
      border-radius: 100%;
      transform-origin: center;
      transform: rotate(-10deg);
      position: relative;
      top: -50px;
      margin-bottom: -20px;
      z-index: 9;
    }
  }
}

// 符号标题
.fn-tl_sy_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;

  em {
    font-size: var(--button-default-size, 17px);
    padding: 0 20px;
  }

  i {
    width: 70px;
    background: rgb(127, 161, 191);
    height: 2px;
    position: relative;

    &:nth-child(1) {
      &:before {
        position: absolute;
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        border: 2px solid rgb(127, 161, 191);
        left: -12px;
        top: -5px;
      }
    }

    &:nth-child(3) {
      &:before {
        position: absolute;
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        border: 2px solid rgb(127, 161, 191);
        right: -12px;
        top: -5px;
      }
    }
  }
}

.fn-tl_sy_2 {
  margin: 0 auto;

  & > .m-lt {
    display: flex;

    & > .m-lt-wd1 {
      height: 30px;
      width: 30px;
      line-height: 30px;
      color: white;
      background: #d96163;
      border-radius: 50%;
      margin: 15px 15px 15px 15px;
      text-align: center;
    }
    & > .m-lt-wd2 {
      height: 30px;
      width: 30px;
      line-height: 30px;
      color: white;
      background: #679b97;
      border-radius: 50%;
      margin: 15px 15px 15px 15px;
      text-align: center;
    }
    & > .m-lt-wd3 {
      margin: 20px 0 0 50px;
      color: #679b97;
      width: 40%;
      em {
        font-style: normal;
      }
    }
  }
}

.fn-tl_sy_3 {
  background: #f6fafe;
  display: flex;
  & > .m-rt {
    width: 3px;
    background: #a9cff5;
  }
  & > .m-cen {
    width: 0;
    height: 0;
    margin: 6px;
    border: 10px solid;
    border-color: transparent transparent transparent #ffd853;
  }
  & > .m-lt {
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  em {
    font-style: normal;
  }
}

.fn-tl_sy_10 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  padding: 15px;
  font-weight: bold;
  color: #707070;

  &::before {
    content: '';
    width: 25px;
    height: 25px;
    background-color: #2ac477;
    margin-right: 10px;
  }

  &::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #99ea87;
    position: absolute;
    top: 30px;
    left: 30px;
  }
  & > .m-bd {
    position: absolute;
    top: 15px;
    left: 50px;

    & > section {
      display: inline-block;
    }
  }
}

.fn-tl_sy_11 {
  & > section {
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    top: -10px;
  }

  &::before {
    content: '“';
    font-size: 70px;
    color: #d8c6b1;
    font-style: oblique;
    display: inline-block;
    margin-right: 10px;
  }
}

.fn-tl_sy_12 {
  display: flex;
  justify-content: center;

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background-color: #000;
    color: white;
    font-weight: bold;
    width: 40%;
    padding: 10px 15px 10px 0;
    font-size: var(--title-default-size, 16px);
    margin-right: 10px;
    position: relative;

    &::before {
      content: '';
      border-left: 8px solid yellow;
      height: 15px;
      width: 20px;
      top: 10px;
      left: 20px;
      position: absolute;
    }

    &::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 45px;
      border-left: 8px solid #95d4d6;
      height: 15px;
      width: 20px;
    }
  }
}

.fn-tl_sy_13 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  & > section {
    display: inline-block;
    font-size: var(--button-default-size, 17px);
    font-weight: bold;
    padding: 10px;
  }

  & > div {
    display: inline-block;
    flex-direction: row;
    position: relative;
    margin-left: 10px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #abbace;
    margin: 0 0 0 30px;
    top: -5px;

    &::before,
    &::after {
      content: '';
      display: inline-block;
      width: 15px;
      height: 15px;

      background-color: #d8e2e9;
      border-radius: 50%;
      position: absolute;
    }

    &::before {
      top: 0;
      left: -25px;
    }

    &::after {
      top: 0;
      right: -25px;
    }
  }
}

.fn-tl_sy_14 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  padding: 30px;

  & > .m-tc {
    position: relative;
    mix-blend-mode: multiply;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #b2c250;
    top: 25px;

    &::before {
      content: '';
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #b2c250;
      display: inline-block;
      position: absolute;
      top: -20px;
      left: -40px;
    }

    &::after {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #b2c250;
      display: inline-block;
      position: absolute;
      top: -20px;
      left: 65px;
    }
  }

  & > em {
    font-weight: bold;
    font-size: var(--button-default-size, 17px);
    display: block;
  }

  & > .m-bc {
    position: relative;
    &::before {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #b2c250;
      display: block;
      position: absolute;
      bottom: -12px;
      left: -30px;
    }
    &::after {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #b2c250;
      display: block;
      position: absolute;
      left: 40px;
      bottom: -5px;
    }
  }
}

.fn-tl_sy_15 {
  margin: auto !important;
  padding: 15px !important;

  & > section {
    letter-spacing: 10px;
    color: #3086f5;

    & > :nth-child(odd) {
      text-shadow: 0 3px #ffe240;
    }
  }
}

.fn-tl_sy_16 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  position: relative;
  & > div {
    display: inline-block;
    &::after {
      content: '';
      width: 40%;
      height: 5px;
      background-color: #89cdce;
      display: block;
      margin-top: 5px;
    }
  }
}

.fn-tl_sy_17 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > div {
    position: relative;
    &::after {
      display: inline-block;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #ffe03a;
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
    }
    em {
      color: #29aa91;
    }
  }
}

.fn-tl_sy_18 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  & > div {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left: 20px solid #fede45;
    transform: rotate(-90deg);
    position: relative;
    display: inline-block;

    &::before {
      content: '!';
      transform: rotate(90deg);
      display: inline-block;
      position: absolute;
      top: -11px;
      left: -11px;
      z-index: 100;
    }

    &::after {
      content: '';
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-left: 10px solid #fff;
      position: absolute;
      top: -10px;
      left: -16px;
    }
  }

  & > section {
    display: inline-block;
    border-bottom: 3px solid #fede45;
    position: relative;
    top: 5px;
    margin-left: 10px;
  }
}

.fn-tl_sy_19 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > .m-tl {
    width: 20px;
    height: 20px;
    border-radius: 50% 0;
    border: 3px solid #ca1d18;
    transform: rotate(45deg);
    display: inline-block;
    margin-right: 10px;

    &::before {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #ca1d18;
      content: '';
      position: relative;
      top: -5px;
    }

    &::after {
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50% 0;
      background-color: #fff;
      content: '';
      position: relative;
      top: -30px;
      left: 0;
      transform: rotate(45deg);
    }
  }

  & > .m-bd {
    border-bottom: 5px solid #e0e0e0;
    font-weight: bold;
    display: inline-block;

    & > :nth-child(2) {
      color: #ca1d18;
    }
    & > em > section {
      display: inline-block;
    }
  }
}

.fn-tl_sy_20 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;

  .m-bk {
    background: url('https://static.suosihulian.com/file/richText/img/img2.png')
      no-repeat center center;
    background-size: 100% 100%;
    display: inline-block;
    padding: 10px 20px;

    font-size: var(--button-default-size, 17px);
    letter-spacing: 3px;
    color: rgb(40, 146, 32);
    text-shadow: #e2e21e 0px 0px 0px;
  }
}

.fn-tl_sy_21 {
  & > .m-m {
    text-align: center;
    margin: 12px;
    & > .m-lt {
      display: inline-block;
      vertical-align: middle;

      background-color: rgb(25, 15, 73);
      height: 1px;
      width: 26px;
      transform: rotateZ(291deg);
    }

    & > .m-md {
      display: inline-block;

      font-size: var(--title-default-size, 16px);
      font-weight: bold;
      color: rgb(255, 207, 85);
    }
  }
}

.fn-tl_sy_22 {
  & > .m-hd {
    margin: 10px 0px 0px;
    background-color: rgb(240, 244, 255);

    & > .m-m {
      // padding: 10px 15px;
      & > .m-lt {
        display: inline-block;
        width: auto;
        vertical-align: top;
        padding: 10px 15px;
        background-color: rgb(79, 109, 155);

        & > .m-tri {
          display: inline-block;
          vertical-align: middle;

          border-style: solid;
          border-width: 6px 0px 6px 10px;
          border-radius: 0px;
          border-top-color: rgba(255, 255, 255, 0);
          border-right-color: rgba(255, 255, 255, 0);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgb(255, 255, 255);
        }
      }

      & > .m-rt {
        display: inline-block;
        width: auto;
        vertical-align: top;
        margin-left: 12px;
        padding: 10px 0;
        color: rgb(79, 109, 155);
        font-weight: bold;
        text-align: justify;
        font-size: var(--title-default-size, 16px);
      }
    }
  }
}

.fn-tl_sy_23 {
  & > .m-hd {
    & > .m-m {
      margin: 20px 0;
      text-align: center;
      & > .m-lt {
        display: inline-block;
        vertical-align: bottom;
        width: 3px;
        height: 12px;
        background-color: rgb(255, 216, 83);

        & + .m-lt {
          height: 18px;
        }
      }

      & > .m-md {
        display: inline-block;
        padding: 3px 8px;
        font-weight: bold;
        border-bottom: 1px solid rgb(255, 216, 83);
      }

      & > .m-rt {
        display: inline-block;
        vertical-align: bottom;
        width: 3px;
        height: 18px;
        background-color: rgb(255, 216, 83);

        & + .m-rt {
          height: 12px;
        }
      }
    }
  }
}

/*--- 卡片 ---*/
// 基本卡片
.fn-cd_bs_1 {
  font-size: var(--desc-default-size, 12px);
  line-height: 1.8;
  padding: 10px 5px;
}

.fn-cd_bs_2 {
  padding: 20px 5px 10px;
  background: #fff;
  position: relative;

  & > label {
    position: absolute;
    top: 9px;
    left: 30px;
    color: #ff6600;
    background: #fff;
    padding: 0 5px;
  }

  & > em {
    display: block;
    background: #eee;
    padding: 15px 10px 10px;
  }
}
.fn-cd_bs_10 {
  border: 1px solid #000;
  margin: 10px !important;
  box-shadow: 2px 2px 2px gray;
  padding: 10px !important;

  & > div {
    padding: 10px;
  }
}

.fn-cd_bs_11 {
  margin: auto !important;
  padding: 10px !important;

  & > div {
    padding: 10px;
    border: 2px dashed #c0c8d1;
    background-color: #efefef;
    border-radius: 15px;
  }
}

.fn-cd_bs_12 {
  margin: auto !important;
  padding: 10px !important;

  & > div {
    padding: 10px;
    border: 2px dashed #c0c8d1;
    background-color: #efefef;
  }
}

.fn-cd_bs_13 {
  margin: auto !important;
  padding: 10px !important;

  & > div {
    padding: 20px;
    border: 1px solid #c0c8d1;
    background-color: #fafaef;
    box-shadow: 0px -1px 20px #b6bec8 inset, 1px -1px 20px #b6bec8 inset;
  }
}

.fn-cd_bs_14 {
  margin: auto !important;
  padding: 10px !important;

  & > div {
    padding: 20px;
    border: 1px solid #c0c8d1;
    background-color: #fafaef;
    box-shadow: -1px -1px 5px #b6bec8 inset, -1px -1px 5px #b6bec8 inset;
    border-radius: 10px;
  }
}

.fn-cd_bs_15 {
  margin: auto !important;
  padding: 10px !important;

  & > div {
    padding: 20px;
    background-color: #fafaef;
    box-shadow: 1px 1px 5px #b6bec8, -1px -1px 5px #b6bec8;
  }
}

.fn-cd_bs_16 {
  margin: auto !important;
  width: 90%;

  & > div {
    padding: 10px 15px;
    margin: 10px;
    border: 1px solid #000;
    outline: 3px solid #000;
    outline-offset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.fn-cd_bs_17 {
  & > div {
    border: 1px dashed #000;
  }
}

.fn-cd_bs_18 {
  margin: auto !important;
  padding: 10px !important;
  & > div {
    background-size: 100% 100%;
    background-position: 23px 16px;
    padding: 20px 20px;

    line-height: 1.75em;
    letter-spacing: 2px;
    font-size: var(--content-second-size, 14px);
    color: #c7b8a1;
  }
}

.fn-cd_bs_19 {
  padding: 18px;

  border: 2px dotted rgb(192, 200, 209);
}

.fn-cd_bs_20 {
  & > div {
    border: 1px solid black;
    padding: 18px;
    background-color: transparent;
    box-shadow: rgb(204, 204, 204) 2px 2px 3px;
  }
}

.fn-cd_bs_21 {
  & > div {
    margin: 20px;
    & > div {
      width: 100%;
      border-top: 1px solid rgb(192, 200, 209);
    }
    & > section {
      margin: -15px 15px;
      border-left: 1px solid rgb(192, 200, 209);
      border-right: 1px solid rgb(192, 200, 209);
      padding: 30px;
      background-color: transparent;
      font-size: var(--title-default-size, 16px);
    }
  }
}

// 框线卡片
.fn-cd_li_1 {
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin: 10px 5px;
  background-color: rgb(240, 244, 255);
  outline: 1px dashed rgb(79, 109, 155);
  outline-offset: -12px;

  & > .m-tl {
    font-size: var(--title-default-size, 16px);
    color: rgb(79, 109, 155);
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(79, 109, 155);
    margin-bottom: 10px;
  }
  & > .m-bd {
    display: flex;
    flex-direction: column;
    counter-reset: line;

    & > li {
      font-size: var(--content-second-size, 14px);
      text-align: justify;
      position: relative;
      text-indent: 20px;

      &:before {
        counter-increment: line;
        content: counter(line);
        display: inline;
        margin-right: 32px;
        font-size: 28px;
        font-weight: bold;
        color: #4f6d9b;
        margin-left: -20px;
      }

      &:after {
        content: '';
        position: absolute;
        left: 30px;
        top: 20px;
        display: block;
        height: 0;
        width: 0;
        border: 6px solid transparent;
        border-left: 10px solid #4f6d9b;
      }
    }
  }
}

.fn-cd_li_2 {
  margin: 15px 10px 15px 10px !important;
  background: #e5eedc;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #4d6f2b;

  &::before {
    content: '';
    position: relative;
    background: #e5eedc;
    width: 90%;
    height: 10px;
    top: -10px;
    border: 1px solid;
    border-color: #4d6f2b #4d6f2b transparent #4d6f2b;
  }
  &::after {
    content: '';
    position: relative;
    background: #e5eedc;
    width: 90%;
    height: 10px;
    top: 10px;
    border: 1px solid;
    border-color: transparent #4d6f2b #4d6f2b #4d6f2b;
  }

  img {
    margin-top: 15px;
    width: 350px;
    height: 175px;
  }

  & > .m-ct {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    text-align: center;
    & > .m-wd1 {
      margin: 25px 5px 15px 80px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      border: 1px solid #4d6f2b;
      color: #4d6f2b;
    }
    & > .m-wd2 {
      margin: 25px 0 15px 5px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      border: 1px solid #4d6f2b;
      color: #4d6f2b;
    }

    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #4d6f2b;
      position: relative;
      top: 35px;
      left: 190px;
    }
    &::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #4d6f2b;
      position: relative;
      top: 35px;
      left: 56px;
    }
  }

  & > .m-bt {
    width: 70%;
    margin-bottom: 20px;
    em {
      font-size: var(--desc-default-size, 12px);
    }
  }
}

.fn-cd_li_3 {
  background: #f6f9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin: 10px !important;
  padding: 20px 10px 20px 10px !important;

  &::before {
    content: '';
    width: 30%;
    height: 1px;
    background: red;
    position: relative;
    top: 11px;
    left: -100px;
  }
  & > .m-ab {
    width: 30%;
    height: 1px;
    background: red;
    position: relative;
    top: 11px;
    left: 100px;
  }
  & > .m-tp {
    & > em {
      color: #f65746;
      font-size: var(--desc-default-size, 12px);
      text-align: center;
      &::before {
        content: '√';
        display: inline-block;
        width: 15px;
        height: 15px;
        line-height: 15px;
        color: white;
        background: #f65746;
        border-radius: 50%;
      }
    }
  }
  & > .m-bt {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    & > em {
      font-size: var(--desc-default-size, 12px);
      margin: 15px 20px 15px 20px;
    }

    &::after {
      content: '';
      margin: 0 auto;
      height: 2px;
      width: 80%;
      background: red;
    }
  }
}

.fn-cd_li_4 {
  border: 3px #a9cff5;
  border-style: solid;

  em {
    margin: 0;
    font-size: var(--desc-default-size, 12px);
  }
  & > .m-tp {
    display: flex;
    justify-content: flex-end;

    & > .m-tp-rt {
      float: right;
      width: 5px;
      height: 20px;
      background: #a9cff5;
      margin: 10px 10px 0 13px;
    }

    & > .m-tp-lt {
      float: right;
      width: 35%;
      margin-top: 10px;
      border-top: #a9cff5;
      border-right: 10px #a9cff5;
      border-bottom: transparent;
      border-left: transparent;
      border-style: solid;
      height: 20px;
    }
  }

  & > .m-cen {
    padding: 20px;
  }

  & > .m-bt {
    display: flex;
    justify-content: flex-start;

    & > .m-bt-lt {
      float: right;
      width: 5px;
      height: 20px;
      background: #a9cff5;
      margin: 0 10px 13px 10px;
    }
    & > .m-bt-rt {
      float: right;
      width: 35%;
      margin-bottom: 10px;
      border-left: 10px;
      border-color: transparent transparent #a9cff5 #a9cff5;
      border-style: solid;
      height: 20px;
    }
  }
}

.fn-cd_li_5 {
  margin: 15px 10px 15px 10px !important;
  background: #e5eedc;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #4d6f2b;

  &::before {
    content: '';
    position: relative;
    background: #e5eedc;
    width: 90%;
    height: 10px;
    top: -10px;
    border: 1px solid;
    border-color: #4d6f2b #4d6f2b transparent #4d6f2b;
  }
  &::after {
    content: '';
    position: relative;
    background: #e5eedc;
    width: 90%;
    height: 10px;
    top: 10px;
    border: 1px solid;
    border-color: transparent #4d6f2b #4d6f2b #4d6f2b;
  }

  img {
    margin-top: 15px;
    width: 350px;
    height: 175px;
  }

  & > .m-ct {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    text-align: center;
    & > .m-wd1 {
      margin: 25px 5px 15px 80px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      border: 1px solid #4d6f2b;
      color: #4d6f2b;
    }
    & > .m-wd2 {
      margin: 25px 0 15px 5px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      border: 1px solid #4d6f2b;
      color: #4d6f2b;
    }

    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #4d6f2b;
      position: relative;
      top: 35px;
      left: 190px;
    }
    &::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #4d6f2b;
      position: relative;
      top: 35px;
      left: 56px;
    }
  }

  & > .m-bt {
    width: 70%;
    margin-bottom: 20px;
    em {
      font-size: var(--desc-default-size, 12px);
    }
  }
}

.fn-cd_li_10 {
  padding: 30px;
  border-left: 1px solid rgb(222, 56, 56);
  border-right: 5px solid rgb(222, 56, 56);
  border-top: 1px solid rgb(222, 56, 56);
  border-bottom: 5px solid rgb(222, 56, 56);

  & > .m-bd {
    counter-reset: line;
    text-align: justify;
    display: flex;
    flex-direction: column;
    position: relative;

    & > li {
      margin-bottom: 15px;
      position: relative;
      padding: 0 0 0 40px;
      &::before {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        counter-increment: line;
        content: counter(line);
        height: 30px;
        border-radius: 50%;
        color: white;
        background-color: rgb(222, 56, 56);
        position: absolute;
        top: 0;
        left: 0;
        margin-right: 10px;
      }
    }
  }
}

.fn-cd_li_11 {
  border-left: 2px solid rgb(194, 37, 35);
  padding: 10px 10px 20px 20px !important;

  & > div {
    background-color: rgb(194, 37, 35);
    color: #fff;
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    font-weight: bold;
  }
}

.fn-cd_li_12 {
  & > .m-tl {
    color: #b49d88;
    padding: 10px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;

    &::before {
      content: '';
      background-color: #e6e6dd;
      width: 50%;
      display: inline;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      mix-blend-mode: multiply;
    }
  }

  & > .m-ft {
    display: flex;
    flex-direction: row;
    margin-top: 15px;

    & > div {
      width: 10px;
      height: 10px;
      background-color: #ede6dd;
      margin-left: 10px;
      margin-bottom: 5px;
      z-index: 10;
    }
  }
}

.fn-cd_li_13 {
  & > .m-ig {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0px 0px 0px;
    margin-bottom: -90px;
  }

  & > .m-ct {
    padding: 100px 20px 30px 20px;
    border-left: 5px solid #76a0ee;
    background-color: #f1f5fd;

    & > :nth-child(1) {
      padding: 10px;
      background-color: #76a0ee;
      color: white;
      text-align: center;
      display: inline-block;
      margin: 10px 10px 10px 0;
    }
  }
}

.fn-cd_li_14 {
  border-bottom: 1px solid #4252be;
  padding: 10px !important;
  & > .m-tl {
    font-size: var(--button-default-size, 17px);
    outline-offset: 2px;
    position: relative;
    display: block;
    padding: 5px;
    &::before {
      content: '';
      display: inline-block;
      width: 100px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #4252be;
      position: absolute;
      top: 10px;
      left: 0;
      transform: rotate(-30deg);
    }

    &::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #425b42;
      display: inline-block;
      position: absolute;
      top: 5px;
      left: 220px;
    }
  }

  & > em {
    display: block;
    padding: 10px;
  }
}

.fn-cd_li_15 {
  & > .m-bd {
    background-color: #f5f9ff;
    box-shadow: -5px -5px #d8e2ff;
    text-indent: 20px;
    padding: 20px;
    position: relative;

    &::after {
      content: '';
      width: 0;
      height: 0;
      border: 10px solid white;
      border-left: 10px solid #d8e2ff;
      border-top: 10px solid #d8e2ff;
      display: inline-block;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

.fn-cd_li_16 {
  border-top: 1px solid #c2d1ff;
  & > .m-tl {
    border-top: 1px solid #f00;
    z-index: 10;
    width: 0;
    height: 0;
    margin-bottom: 10px;
  }
  & > .m-bd {
    background-color: #f5f9ff;
    padding: 20px;
    position: relative;

    &::before,
    &::after {
      content: '';
      border: 10px solid white;
      width: 0;
      height: 0;
      display: inline-block;
      position: absolute;
    }
    &::before {
      border-left: 10px solid #ffdf9c;
      top: -20px;
      left: 70px;
    }

    &::after {
      border-right: 10px solid #c2d1ff;
      top: -20px;
      left: 50px;
      transform: rotate(180deg);
    }
  }
}

.fn-cd_li_17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > em {
    padding: 0 10px;
    background-color: #ffedec;
    display: inline-block;
    color: #ff6461;
    margin-bottom: 10px;
  }

  & > .m-tl {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff6461;
    position: relative;
    padding: 10px;
    &::after {
      content: '';
      border: 10px solid transparent;
      border-top: 10px solid #ff6461;
      position: absolute;
      bottom: -20px;
      left: 60px;
    }
  }

  & > .m-bd {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    &::after {
      content: '';
      border-bottom: 1px solid #ff6461;
      display: block;
      width: 90%;
      margin-top: 10px;
    }
  }
}

.fn-cd_li_18 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  & > .m-tl {
    font-weight: bold;
    position: relative;
    display: inline-block;

    &::before,
    &::after {
      content: '';
      width: 3px;
      height: 8px;
      position: absolute;
    }

    &::before {
      background-color: #ffe34e;
      top: 0;
      left: -20px;
    }

    &::after {
      background-color: #95d4d6;
      top: 0;
      left: -10px;
    }
  }

  & > em {
    display: block;
    padding: 10px;
  }
  & > .m-ft {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #95d4d6;
    bottom: 0;
    right: 0;
    &::after {
      content: '';
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid #000;
      display: inline-block;
      position: absolute;
      top: 3px;
      left: 3px;
    }

    &::before {
      content: '';
      width: 60px;
      height: 1px;
      background-color: #000;
      display: inline-block;
      position: absolute;
      top: 10px;
      left: -70px;
    }
  }
}

.fn-cd_li_19 {
  & > div {
    color: #62c3cc;
    border: 5px solid #ceeeef;
    padding: 10px;
    box-shadow: -5px -5px #f5d288;
    position: relative;

    &::after,
    &::before {
      content: '';
      background-color: #eb827e;
      position: absolute;
    }

    &::before {
      right: -5px;
      bottom: -10px;
      width: 100%;
      height: 5px;
    }

    &::after {
      bottom: -10px;
      right: -10px;
      width: 5px;
      height: calc(100% + 10px);
    }
  }
}
.fn-cd_li_20 {
  & > .m-bk {
    border: 1px solid #5df5e6;
    padding: 30px 20px 20px 20px;
    margin: 8px 15px 0 10px;
  }
  &::before {
    content: '';
    background: rgb(60, 189, 240);
    background-image: repeating-linear-gradient(
      -30deg,
      hsla(147, 82%, 60%, 0.501),
      hsla(124, 65%, 54%, 0.462) 15px,
      transparent 10px,
      transparent 10px
    );
    color: #fff;
    display: inline-block;
    width: 50px;
    height: 12px;
    position: relative;
    top: 33px;
    opacity: 0.5;
    transform: rotate(-45deg);
  }
  &::after {
    content: '';
    background: rgb(60, 189, 240);
    background-image: repeating-linear-gradient(
      -30deg,
      hsla(147, 82%, 60%, 0.501),
      hsla(124, 65%, 54%, 0.462) 15px,
      transparent 10px,
      transparent 10px
    );
    color: #fff;
    display: inline-block;
    width: 50px;
    height: 12px;
    position: relative;
    bottom: 26px;
    left: 89.5%;
    opacity: 0.5;
    transform: rotate(-45deg);
  }
}

.fn-cd_li_21 {
  margin: 40px;

  & > .m-bk {
    margin: 20px 0px;
    display: inline-block;
    width: auto;
    vertical-align: top;
    background-color: rgb(247, 247, 247);
    min-width: 10%;
    max-width: 100%;
    height: auto;
    padding: 21px;
    & > .m-lt {
      display: inline-block;
      width: auto;
      align-self: center;
      vertical-align: middle;

      & > .m-cir {
        border: 1px solid rgb(136, 162, 197);
        background-color: rgb(136, 162, 197);
        text-align: center;
        width: 2.2em;
        height: 2.2em;
        line-height: 2.2em;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        font-size: var(--content-second-size, 14px);
        color: rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    & > .m-rt {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      margin: 0px 20px;
      & > .m-big {
        font-size: 22px;
      }
      & > .m-sml {
        font-size: 25%;
      }
    }
  }
  & > .m-bt {
    margin-bottom: 20px;
    text-align: right;
    & > .m-txt {
      display: inline-block;
      padding: 24px;
      border-left: 1px dashed rgb(136, 162, 197);
      width: 90%;

      & > section {
        text-align: justify;
      }
    }
  }
}

.fn-cd_li_22 {
  & > .m-hd {
    margin: 10px 0px 0px;
    background-color: rgb(79, 109, 155);

    & > .m-m {
      padding: 10px 15px;
      & > .m-lt {
        display: inline-block;
        width: auto;
        vertical-align: top;

        & > .m-tr {
          display: inline-block;
          vertical-align: middle;

          border-style: solid;
          border-width: 6px 0px 6px 10px;
          border-radius: 0px;
          border-top-color: rgba(255, 255, 255, 0);
          border-right-color: rgba(255, 255, 255, 0);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgb(255, 255, 255);
        }
      }

      & > .m-rt {
        display: inline-block;
        width: auto;
        vertical-align: top;
        margin-left: 12px;
        color: rgb(255, 255, 255);
        text-align: justify;
        font-size: var(--title-default-size, 16px);
      }
    }
  }

  & > .m-bd {
    display: inline-block;
    border: 1px solid rgb(79, 109, 155);
    padding: 27px;
    & > .m-tl {
      text-align: justify;
      color: rgb(79, 109, 155);
    }

    & > .m-m {
      & > .m-line {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        text-align: justify;

        & > .m-d {
          margin: 20px;
          display: inline-block;
          flex-grow: 100;
          flex-shrink: 100;
          flex-basis: 0%;

          & > .num {
            display: inline-block;
            font-size: 230.25%;
            font-weight: bold;
            color: rgb(79, 109, 155);
          }

          & > .dot {
            display: inline-block;
            font-size: 20px;
            color: rgb(79, 109, 155);
          }
        }
      }
    }
  }
}

.fn-cd_li_23 {
  background-color: rgba(97, 155, 139, 0.09);
  padding: 29px;
  & > .m-bd {
    & > .m-wd {
      margin: 0 30px 0 30px;
      padding: 30px 0;
      font-size: var(--title-default-size, 16px);
      border-bottom: 1px dashed rgb(37, 105, 117);
    }
  }
}

.fn-cd_li_24 {
  & > .m-tl {
    display: flex;
    position: relative;
    top: 20px;

    & > section {
      background-color: #6d9dfe;
      padding-left: 10px;
      padding-top: 3px;
      margin: 0 8px;
      color: white;
      font-size: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      z-index: 50;
      box-shadow: 10px -10px 10px white;
    }

    & > div {
      width: 0;
      height: 0;
      border-top: 40px solid #84adff;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      transform-origin: left;
      transform: rotate(40deg);
      position: relative;
      top: -18px;
      left: -17px;

      &::before {
        content: '';
        border-top: 26px solid #84adff;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        transform: rotate(20deg);
        position: absolute;
        left: 6px;
        top: -35px;
      }

      &::after {
        content: '';
        border-top: 26px solid #84adff;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        transform: rotate(-20deg);
        position: absolute;
        left: -12px;
        top: -32px;
      }
    }
  }

  & > .m-bd {
    border: 1px solid #38a5fb;
    padding: 25px;
    font-size: var(--button-default-size, 17px);
  }
}

// 底色卡片
.fn-cd_bc_1 {
  background-color: rgb(240, 248, 240);
  margin: 30px 10px 10px;
  padding: 30px;
  color: #333;
  letter-spacing: 1px;
  text-align: justify;
  position: relative;

  & > i {
    font-size: 20px;
    font-style: normal;
    position: absolute;
    background: rgb(109, 167, 149);
    border-radius: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    top: -15px;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #6da795;
      position: absolute;
      display: block;
      right: -22px;
      border-radius: 20px 0 20px 0;
      top: 4px;
    }
    &:after {
      content: '';
      width: 8px;
      height: 9px;
      background: #6da795;
      position: absolute;
      display: block;
      right: -8px;
      border-radius: 10px 0 10px 0;
      top: -7px;
    }
  }
}

.fn-cd_bc_2 {
  display: flex;
  flex-direction: column;

  & > .m-tp {
    top: 28px;
    width: 30%;
    left: 50px;
    position: relative;
    height: 1px;
    background: #6fac89;
    &:before {
      content: '';
      width: 8px;
      height: 9px;
      background: #6da795;
      position: relative;
      display: block;
      border-radius: 0 20px 0 20px;
      top: -15px;
      left: -15px;
    }
    &:after {
      content: '';
      width: 16px;
      height: 16px;
      background: #6da795;
      position: relative;
      display: block;
      border-radius: 0 20px 0 20px;
      top: -5px;
      left: -25px;
    }
  }
  & > .m-bt {
    background: #f0f8f0;
    padding: 55px 50px 30px 50px;
  }

  em {
    font-size: var(--desc-default-size, 12px);
  }
}

.fn-cd_bc_10 {
  position: relative;

  & > .m-tl {
    background-image: linear-gradient(#fff, #e2e1ff);
    margin-left: 20px;
    padding: 15px;

    & > label {
      & > section {
        background-color: #bfb3e6;
        color: #fff;
        font-weight: bold;
        padding: 10px;
        margin-top: 30px;
        display: inline-block;
      }
    }

    & > .m-bd {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      padding: 30px;
    }

    &::before {
      width: 30px;
      height: 70px;
      content: '';
      background: #d1b8e7;
      position: absolute;
      bottom: 0px;
      left: -10px;
    }
  }
}

.fn-cd_bc_11 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px !important;
  & > .m-bd {
    background-color: #fff6f6;
    padding: 50px 20px 10px 20px;
    margin-top: -90px;
    position: relative;

    & > em {
      display: inline-block;
      position: relative;
      padding: 30px 40px;
    }

    &::before,
    &::after {
      content: '';
      width: 25px;
      height: calc(100% + 20px);
      border: 1px solid #c22523;
      display: inline-block;
      position: absolute;
      top: -10px;
    }

    &::before {
      border-right: transparent;
      left: 0;
      margin-left: 30px;
    }

    &::after {
      border-left: transparent;
      right: 0;
      margin-right: 30px;
    }
  }

  & > img {
    max-width: 100%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px;
    z-index: 5;
  }
}

.fn-cd_bc_12 {
  position: relative;

  & > .m-tl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    left: 40px;

    & > section {
      font-size: var(--button-default-size, 17px);
      font-weight: bold;
      color: #afcfee;
      text-align: center;
      padding: 2px 10px 8px 2px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-bottom: 4px solid #afcfee;
      align-self: flex-end;
      min-width: 10%;
    }

    & > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background-color: #afcfee;
      position: relative;
      left: -10px;
      margin-left: 10px;
      padding: 5px;

      & > :nth-child(1) {
        padding: 5px 0px 0px 5px;
        color: white;
        font-weight: bold;
        font-size: 20px;
      }

      & > :nth-child(2) {
        padding: 0px 5px 0px 5px;
        color: white;
      }
    }
  }

  & > em {
    display: block;
    margin-top: 10px;
    background-color: #f2f9ff;
    padding: 25px;
    margin-top: 10px;
  }
}

.fn-cd_bc_13 {
  background-color: #ebedf2;

  & > .m-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    & > img {
      max-width: 50%;
    }
  }

  & > em {
    display: inline-block;
    padding: 30px 50px 30px 50px;
  }
  & > .m-ft {
    margin: 10px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    & > div {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #4a5d8a;
    }
  }
}

.fn-cd_bc_14 {
  & > .m-tl {
    background-color: #ed513d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0px 15px 0px;
    font-size: var(--button-default-size, 17px);
    font-weight: bold;
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      margin-left: 20px;
      width: 90%;
      height: 10px;
      background-color: #ffd1cc;
      position: absolute;
      bottom: -10px;
    }
  }

  & > em {
    display: inline-block;
    margin-top: 20px;
    padding: 15px;
    background-color: #fff7f7;
    border-bottom: 5px solid #ffd1cc;
  }
}

.fn-cd_bc_15 {
  background-color: #f4f4f4;
  padding: 15px;

  & > .m-tl {
    font-weight: bold;
    font-size: var(--button-default-size, 17px);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    &::before {
      content: '';
      width: 100px;
      display: inline-block;
      border-bottom: 1px solid #000;
      margin-right: 30px;
    }

    &::after {
      content: '1';
      width: 30px;
      height: 30px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #d16a5b;
      margin-left: 10px;
      font-weight: normal;
    }
  }

  & > section {
    margin: 15px 5px;
    padding: 10px;
    &::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #d16a5b;
      margin-right: 5px;
    }
  }
}

.fn-cd_bc_16 {
  & > .m-tl {
    font-weight: bold;
    background-color: #6667ab;
    color: #fff;
    width: 95%;
    position: relative;
    padding: 10px 0;

    &::after {
      content: '';
      display: inline-block;
      border: 20px solid transparent;
      border-left: 20px solid #6667ab;
      position: absolute;
      top: 0;
      right: -50px;
      width: 0;
      height: 0;
    }

    & > section {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  & > em {
    background-color: #f6f6ff;
    display: block;
    padding: 25px;
    margin-top: 10px;
  }
}

.fn-cd_bc_17 {
  background-color: #f6f6ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  & > em {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 5px solid #ea4949;
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: var(--button-default-size, 17px);
    position: relative;
    top: 35px;
  }

  & > .m-bd {
    background-color: #f5edf6;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ea4949;
    border-right: 1px solid #ea4949;

    margin: 10px;

    & > div {
      margin: 15px;

      & > section {
        display: inline-block;
      }

      & > :nth-child(odd) {
        color: #ea4949;
        margin: 10px;
      }
    }
  }
}

.fn-cd_bc_18 {
  border-top: 3px solid #73987c;
  border-bottom: 3px solid #73987c;
  & > .m-bd {
    background: #fafff5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #4d6f2b;
    padding: 10px;
    margin: 25px 15px;
    &::before {
      content: '';
      position: relative;
      background: #fafff5;
      width: 95%;
      height: 10px;
      top: -20px;
      border: 1px solid;
      border-color: #4d6f2b #4d6f2b transparent #4d6f2b;
    }
    &::after {
      content: '';
      position: relative;
      background: #fafff5;
      width: 95%;
      height: 10px;
      top: 20px;
      border: 1px solid;
      border-color: transparent #4d6f2b #4d6f2b #4d6f2b;
    }
  }
}

.fn-cd_bc_19 {
  & > .m-m {
    & > .m-hd {
      text-align: center;
      margin: 10px 0px -30px;
      z-index: 100;

      & > .m-cir {
        margin: 5px;
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 36px;
        border-radius: 50%;
        background-color: #ffb119;
        color: #fff;
        font-size: 22px;
        text-align: center;
      }
    }

    & > .m-bd {
      border-top: 50px solid #fff3e3;
      border-left: 20px solid #fff3e3;
      border-right: 20px solid #fff3e3;
      border-bottom: 50px solid #fff3e3;
      padding: 30px;
      font-size: var(--button-default-size, 17px);
      text-align: justify;
    }
    & > .m-ft {
      font-size: var(--content-default-size, 15px);
      text-align: end;
      padding: 15px 0;
      margin-right: 15px;
      margin-top: -50px;
      color: #ffc14b;
    }
  }
}

.fn-cd_bc_20 {
  & > .m-m {
    & > .m-bk {
      background-color: rgb(235, 236, 243);

      & > .m-bd {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 24px 0;
        & > .m-lt {
          display: inline-block;
          background-color: rgb(74, 93, 138);
          padding: 12px;

          & > .m-big {
            text-align: justify;
            font-size: 40px;
            color: rgb(255, 255, 255);
          }

          & > .m-sml {
            font-size: var(--button-default-size, 17px);
            margin: -5px 0% 0px;
            text-align: center;
            color: rgb(255, 255, 255);
            text-decoration: underline;
          }
        }

        & > .m-rt {
          & > .m-hd {
            display: inline-block;
            margin: 10px;
            font-size: var(--title-default-size, 16px);
            min-height: 24px;
            color: rgb(74, 93, 138);
            text-align: justify;
            border-bottom: 1px solid rgb(74, 93, 138);
            font-weight: bold;
          }

          & > .m-bd {
            padding: 10px;
            font-size: var(--title-default-size, 16px);
          }
          display: inline-block;
          flex-grow: 100;
          flex-shrink: 100;
          flex-basis: 0%;
          margin: 0px 0px 0px 24px;
        }
      }
    }
  }
}
.fn-cd_bc_21 {
  & > .m-m {
    margin: 20px;

    & > .m-hd1 {
      height: 37px;
      background-color: rgb(240, 240, 240);
      margin: 0 20px;
    }

    & > .m-hd {
      background-color: rgb(30, 59, 116);
      color: rgb(243, 227, 181);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      padding: 10px 0 20px 0;
    }

    & > .m-m {
      display: flex;
      flex-flow: row nowrap;
      margin: 0px 0% 10px;

      & > .m-lt {
        display: inline-block;
        width: auto;
        flex: 0 0 0%;
        height: auto;

        & > .m-tri {
          border: 10px solid;
          border-top-color: rgb(243, 227, 181);
          border-right-color: rgb(243, 227, 181);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
        }
      }
      & > .m-rt {
        display: inline-block;
        width: auto;
        flex: 0 0 0%;
        height: auto;

        & > .m-tri {
          border: 10px solid;
          border-top-color: rgb(243, 227, 181);
          border-right-color: rgba(255, 255, 255, 0);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgb(243, 227, 181);
        }
      }
      & > .m-bd {
        display: inline-block;
        min-height: 37px;
        background-color: rgb(240, 240, 240);

        width: auto;
        color: rgb(156, 156, 156);
        padding: 20px;
        font-size: var(--button-default-size, 17px);
        text-align: justify;
      }
    }
  }
}

.fn-cd_bc_22 {
  text-align: center;
  & > .m-m {
    display: inline-block;
    width: 90%;
    vertical-align: top;
    background-color: rgb(250, 248, 255);
    border-width: 0px;
    padding: 30px;
    height: auto;

    & > .m-bd {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      border-style: solid;
      border-width: 2px;
      border-radius: 0px;
      border-color: rgb(237, 231, 255);
      height: auto;
      background-color: rgb(255, 255, 255);
      & > .m-txt {
        text-align: justify;
        color: rgb(111, 100, 141);
        padding: 10px 35px;
        margin: 20px 0;
      }
    }
  }
}
.fn-cd_bc_23 {
  & > .m-m {
    & > .m-hd {
      display: inline-block;
      text-align: left;
      width: 100%;
      vertical-align: top;
      background-color: rgb(243, 243, 243);
      padding: 20px 20px 8px;

      & > .m-lt {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        border-bottom: 2px solid rgb(62, 62, 62);
        font-size: 25px;
        font-weight: 700;
        color: rgb(92, 92, 92);
        text-align: center;
        padding: 5px 13px;
        line-height: 1.5;
        letter-spacing: 0px;
      }

      & > .m-rt {
        display: inline-block;
        width: auto;
        display: inline-block;
        width: auto;
        vertical-align: middle;
        font-size: 25px;
        font-weight: 700;
        color: rgb(92, 92, 92);
        text-align: center;
        padding: 5px 13px;
        line-height: 1.5;
        letter-spacing: 0px;
      }
    }

    & > .m-nk {
      display: inline-block;
      text-align: left;
      width: 100%;
      vertical-align: top;
      background-color: rgb(243, 243, 243);
      padding: 0 20px 8px;
      color: rgb(181, 181, 181);
      font-size: var(--desc-default-size, 12px);
    }
    & > .m-bd {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      border-style: solid;
      border-width: 0px 5px 5px;
      border-radius: 0px;
      border-color: rgb(243, 243, 243);
      padding: 24px 30px;
      font-size: var(--button-default-size, 17px);
      color: rgb(92, 92, 92);
      font-weight: 400;
    }
  }
}

.fn-cd_bc_24 {
  & > .m-m {
    text-align: center;
    & > .m-hd {
      text-align: center;

      & > .m-lt {
        display: inline-block;
        background-color: rgb(147, 176, 108);
        padding: 2px 12px;
        font-size: 22px;
        font-weight: bold;
        color: rgb(255, 255, 255);
      }

      & > .m-rt {
        color: rgb(147, 176, 108);
        display: inline-block;
        vertical-align: bottom;
        width: auto;
        align-self: flex-end;
        border-top: 1px solid rgb(147, 176, 108);
        border-bottom: 1px solid rgb(147, 176, 108);

        height: auto;
        margin: 0px 0px 0px 10px;
        font-size: var(--button-default-size, 17px);
        padding: 3.5px 0;
      }
    }

    & > .m-bd {
      display: inline-block;
      width: 91%;
      vertical-align: top;
      border-style: dashed;
      border-width: 0px 0px 1px;
      border-radius: 0px;
      border-color: rgb(147, 176, 108);
      padding: 25px;
      height: auto;
      font-size: var(--title-default-size, 16px);
      text-align: justify;
      & > section {
        margin-top: 20px;
        & > .m-dot {
          display: inline-block;
          vertical-align: middle;
          border: 5px solid rgb(147, 176, 108);
          background-color: rgb(147, 176, 108);
          border-radius: 100%;
          margin: 0 8px;
          margin-top: -3px;
        }
      }
    }
  }
}

.fn-cd_bc_25 {
  & > .fn-co_fo_16 {
    & > .m-md {
      padding: 10px 30px;
      font-size: var(--title-default-size, 16px);
      line-height: 24px;
      text-align: justify;
    }
  }
}

// 底纹卡片
.fn-cd_pa_1 {
  background: rgb(109, 167, 149);
  background-image: repeating-linear-gradient(
    30deg,
    hsla(0, 0%, 100%, 0.1),
    hsla(0, 0%, 100%, 0.1) 15px,
    transparent 0,
    transparent 30px
  );
  color: #fff;

  & > i {
    background: #9eed1e;

    &:before,
    &:after {
      background: #9eed1e;
    }
  }
}

.fn-cd_pa_2 {
  background: #fdf5f5;
  padding: 20px 0 20px 0;

  & > .m-cen {
    background: rgb(255, 255, 255);
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(186, 133, 133, 0.1),
      rgba(193, 138, 138, 0.1) 10px,
      transparent 0,
      transparent 20px
    );
    color: #896b6b;
    padding: 20px 20px 20px 20px;
    text-align: center;
    border: 1px solid;
    border-color: transparent transparent red transparent;
  }
  em {
    font-size: var(--title-default-size, 16px);
  }
}

.fn-cd_pa_3 {
  padding: 10px !important;
  display: flex;
  & > .m-ct {
    width: 150px;
    height: 150px;
    background: #fafaf4;
    border-radius: 50%;
    position: relative;
    left: 60px;
    &::after {
      content: '“';
      font-size: 60px;
      color: #aaa94b;
      position: relative;
      top: 35px;
      left: 30px;
    }
  }
  & > .m-wd {
    z-index: 2;
    display: flex;
    flex-direction: column;
    & > em {
      font-size: var(--desc-default-size, 12px);
    }
  }
}

.fn-cd_pa_4 {
  padding-top: 10px !important;
  height: 300px;
  & > img {
    width: 95%;
    height: 95%;
  }
  & > .m-ct {
    z-index: 2;
    height: 100px;
    width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -230px;
    left: 125px;
    background: #e2d6a6;
    color: white;
    & > em {
      margin: 5px;
    }
    & > .m-ct-ct {
      background: white;
      height: 1px;
      width: 160px;
    }
  }
}

.fn-cd_pa_5 {
  margin: 5px 10px 5px 10px !important;
  padding: 10px !important;
  background: #fef5e7;
  border: 5px dashed;
  border-color: transparent #ffd881 transparent #ffd881;
  & > .m-ct {
    border: 1px solid #ffd881;
    padding: 15px 20px 15px 20px;
    background: #fffef7;

    & > em {
      font-size: var(--desc-default-size, 12px);
    }
  }
}

.fn-cd_pa_10 {
  & > div {
    border-bottom: 8px solid #775fff;
    padding: 50px;
    position: relative;
    background-image: repeating-linear-gradient(
      -45deg,
      white,
      #f8f7fe 5px,
      transparent 0,
      transparent 15px
    );

    &::before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      content: '';
      background-color: #775fff;
      position: relative;
      bottom: -20px;
      left: -20px;
    }
  }
}

.fn-cd_pa_11 {
  background-color: #fef9ef;
  border: 5px dashed #ffd881;
  border-right: 5px solid #ffd881;
  border-left: 5px solid #ffd881;

  & > div {
    background-color: #fffef7;
    padding: 10px;
    margin: 20px;
  }
}

.fn-cd_pa_12 {
  padding: 10px !important;

  & > .m-tl {
    background-color: #e3efff;
    position: relative;

    & > :nth-child(1) {
      font-weight: bold;
      font-size: var(--title-default-size, 16px);
    }

    & > em {
      position: relative;
      top: -15px;
      left: 20px;

      & > section {
        display: inline-block;
      }
    }

    &::before,
    &::after {
      content: '';
      background-color: #fff;
      border: 1px solid #000;
      display: inline-block;
      position: absolute;
    }

    &::before {
      width: 25px;
      height: 7px;
      border-radius: 10px;
      right: 70px;
      top: 10px;
    }

    &::after {
      border-radius: 50%;
      width: 7px;
      height: 7px;
      top: 10px;
      right: 30px;
    }
  }

  & > .m-bd {
    background-image: linear-gradient(to bottom, #e3efff, white);
    padding: 10px;
    border: 10px solid #fff;
    outline: 1px solid gray;
    margin-top: 10px;
  }
}

.fn-cd_pa_13 {
  position: relative;
  & > img {
    opacity: 0.5;
    max-width: 100%;
  }

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40px;
    right: 30px;
    width: 70%;

    & > :nth-child(1) {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: var(--title-default-size, 16px);
      width: 40px;
      height: 40px;
      border-radius: 30px;
      background-color: #ffe179;
      color: #fff;
      margin-bottom: 30px;
      margin-top: 20px;
    }
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 40px;
    height: 100%;
    display: inline-block;
    background-image: linear-gradient(to bottom, #9cccf5, #e4ebf6);
  }
}

.fn-cd_pa_14 {
  position: relative;
  & > img {
    opacity: 0.5;
    max-width: 100%;
  }

  & > div {
    position: absolute;
    top: 20px;
    left: 30px;

    & > em {
      color: #b7cdff;
      font-size: var(--title-default-size, 16px);

      &::before {
        content: '#';
        color: #ffe179;
        margin-right: 10px;
      }

      &::after {
        content: '';
        display: inline-block;
        width: 150%;
        border-top: 3px solid #b7cdff;
      }
    }
  }

  & > section {
    display: inline-block;
    background-color: #fff;
    padding: 15px;
    position: absolute;
    top: 110px;
    left: 0;
    margin: 30px;
  }
}

.fn-cd_pa_15 {
  & > div {
    padding: 20px;
    position: relative;
    background-image: repeating-linear-gradient(
      -45deg,
      white,
      #fdf4ff 5px,
      transparent 0,
      transparent 15px
    );
    & > .text {
      padding: 20px;
      border: 1px solid rgba(86, 61, 227, 0.48);
      background-color: white;

      & > li {
        padding: 10px;
        color: rgb(116, 111, 143);
        text-align: justify;
      }
    }
  }
}

.fn-cd_pa_16 {
  & > div {
    padding: 20px;
    position: relative;
    background-image: repeating-linear-gradient(
      284deg,
      #289d86db,
      #289d86 10px,
      #2ab99d,
      #2ab99d 23px
    );
    & > .text {
      padding: 20px;

      & > li {
        color: white;
        font-size: var(--button-default-size, 17px);
        padding: 10px;
        text-align: justify;
      }
    }
  }
}

// 对话/问答
.fn-cd_qu_1 {
  margin: 10px;

  .m-q {
    background: rgb(255, 247, 240);
    color: rgb(154, 27, 36);
    text-align: justify;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 50px;

    &:before {
      content: 'Q';
      font-size: var(--title-default-size, 16px);
      font-weight: bold;
      color: #fff;
      background: #ff0000;
      height: 40px;
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border: 6px solid transparent;
      border-left: 6px solid #ff0000;
      transform: rotate(-135deg);
      position: absolute;
      left: 0;
      bottom: -6px;
    }
  }

  .m-a {
    padding: 10px 10px 10px 50px;
    margin: 30px 0 0 0;
    text-align: justify;
    border: 1px solid #ff0000;
    position: relative;

    &:before {
      content: 'A';
      font-size: var(--title-default-size, 16px);
      font-weight: bold;
      color: rgb(154, 27, 36);
      background: rgb(255, 247, 240);
      height: 40px;
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

.fn-cd_qu_2 {
  display: flex;
  flex-direction: column;
  margin: 10px;

  & > .m-tp {
    display: flex;
    justify-content: space-around;
    text-align: center;
    & > .m-tp-lt {
      background: #de3838;
      color: white;
      width: 15%;
      height: 45px;
      line-height: 45px;
    }
    & > .m-tp-rt {
      background: #fff7f0;
      color: #a7383f;
      position: relative;
      top: 15px;
      width: 85%;
      height: 30px;
      line-height: 30px;
    }
  }

  & > .m-bt {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 1px solid;
    border-color: #de3636;
    em {
      font-size: var(--desc-default-size, 12px);
    }
    & > .m-bt-tp {
      margin: 10px 30px 10px 100px;
      counter-reset: section;
      &:before {
        counter-increment: section;
        content: counter(section);
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #de3636;
        color: white;
        position: relative;
        display: block;
        border-radius: 50%;
        top: 30px;
        left: -50px;
      }
    }
    & > .m-bt-cen {
      margin: 10px 30px 10px 100px;

      &:before {
        counter-increment: section;
        content: counter(section);
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #de3636;
        color: white;
        position: relative;
        display: block;
        border-radius: 50%;
        top: 30px;
        left: -50px;
      }
    }
    & > .m-bt-bt {
      margin: 10px 30px 10px 100px;

      &:before {
        counter-increment: section;
        content: counter(section);
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #de3636;
        color: white;
        position: relative;
        display: block;
        border-radius: 50%;
        top: 30px;
        left: -50px;
      }
    }
  }
}

.fn-cd_qu_3 {
  margin: 10px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  background: #f1f5fd;
  padding: 15px 0 15px 0 !important;
  & > .m-wd {
    width: 80%;
    display: flex;
    flex-direction: column;
    text-align: center;
    em {
      margin: 5px;
      font-size: var(--desc-default-size, 12px);
      &:nth-child(odd) {
        color: #749fee;
      }
    }
    &::before {
      content: '问';
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 25px;
      background: #749fee;
      color: white;
      position: relative;
      top: 30px;
      left: -70px;
    }
    &::after {
      content: '答';
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 25px;
      background: #ffc32e;
      color: white;
      position: relative;
      top: -45px;
      left: -70px;
    }
  }
}

.fn-cd_qu_10 {
  background-color: #f1f5fd;
  padding: 20px;
  margin-left: 10px;
  margin-right: 10px;

  & > .m-q,
  & > .m-a {
    padding: 10px 10px 10px 50px;
    position: relative;
    left: 10px;
    display: flex;
    margin-right: 20px;
    text-align: justify;
  }

  & > .m-q {
    color: #749fef;

    &::before {
      content: '问';
      width: 30px;
      height: 30px;
      background-color: #749fef;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      right: 0;
    }
  }

  & > .m-a {
    &::before {
      content: '答';
      width: 30px;
      height: 30px;
      background-color: #ffc32e;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      position: absolute;
      left: 0;
      right: 0;
    }
  }
}

.fn-cd_qu_11 {
  padding: 20px !important;
  display: flex;
  justify-content: center;
  align-items: center;

  & > em {
    font-size: var(--button-default-size, 17px);
    color: #f96e57;
    position: relative;
    left: -25px;
    top: -10px;

    &::before {
      content: '&';
      font-size: var(--desc-default-size, 12px);
      color: #99999f;
      position: absolute;
      bottom: 0;
      right: -11px;
    }

    &::after {
      content: 'A';
      color: #f96e57;
      font-size: var(--button-default-size, 17px);
      position: absolute;
      bottom: -20px;
      right: -25px;
    }
  }

  & > div {
    width: 80%;
    border-bottom: 1px solid #f96e57;
  }
}

.fn-cd_qu_12 {
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  & > div {
    padding: 10px;
    border: 1px solid #f96e57;
    position: relative;
    box-shadow: 2px 2px 2px #d4d4d4;
    width: 80%;

    & > section {
      font-size: var(--button-default-size, 17px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &::before,
  &::after {
    content: '';
    border: 20px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
  }

  &::before {
    bottom: -32px;
    border-top: 30px solid #f96e57;
  }

  &::after {
    bottom: -29px;
    border-top: 30px solid #fff;
  }
}

.fn-cd_qu_13 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px !important;
  & > .m-img {
    margin-bottom: 20px;
    margin-right: 20px;

    & > img {
      width: 100px;
      height: 100px;
    }
  }

  & > .m-bd {
    display: inline-block;
    position: relative;
    top: 15px;
    left: 50px;

    & > section {
      background-color: #b03632;
      padding: 5px 8px;
      position: relative;
      top: 5px;
      left: -55px;
      border-radius: 5px;
      color: #fff;
      display: inline-block;

      &::before {
        content: '';
        display: inline-block;
        border: 6px solid transparent;
        border-right: 6px solid #b03632;
        position: absolute;
        left: -12px;
        top: 10px;
      }
    }
  }
}

.fn-cd_qu_14 {
  padding: 10px !important;
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    border: 2px solid #0173a4;
    position: relative;
    box-shadow: -10px 10px #01b7cc;
    &::before,
    &::after {
      content: '';
      display: inline-block;
      border: 10px solid transparent;
      position: absolute;
    }

    &::before {
      border-right: 10px solid #0173a4;
      border-bottom: 10px solid #0173a4;
      right: -2px;
      top: -22px;
    }

    &::after {
      border-right: 10px solid #fff;
      border-bottom: 10px solid #fff;
      right: 0;
      top: -15px;
    }

    & > em {
      display: inline-block;
    }
  }
}

.fn-cd_qu_15 {
  text-align: right;
  margin: 8px 0%;
  & > .main {
    display: inline-block;
    width: 95%;
    background-color: rgb(233, 250, 255);
    padding: 0px 0px 10px;

    & > .head {
      text-align: left;
      display: flex;
      transform: translate3d(-15px, 0px, 0px);

      & > .left {
        display: inline-block;
        min-width: 40px;
        background-color: rgb(139, 207, 224);
        color: rgb(255, 255, 255);
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        padding: 3px;
      }

      & > .right {
        display: inline-block;
        width: auto;
        font-size: var(--button-default-size, 17px);
        padding: 3px;
        color: rgb(255, 255, 255);
        background-color: rgb(98, 169, 187);
      }
    }

    & > .neck {
      height: 18px;
      margin-left: -15px;
      text-align: start;
      & > .triangle {
        width: 5px;
        border: 7.5px solid;
        border-top-color: rgb(98, 169, 187);
        border-right-color: rgb(98, 169, 187);
        border-bottom-color: rgba(255, 255, 255, 0);
        border-left-color: rgba(255, 255, 255, 0);
      }
    }

    & > .body {
      padding: 10px 20px;
      text-align: justify;
      letter-spacing: 4px;
      color: rgb(106, 106, 106);
    }
  }
}

.fn-cd_qu_16 {
  .left {
    display: inline-block;
    min-width: 40px;
    background-color: rgb(226, 234, 255);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 3px;
  }
  .right {
    letter-spacing: 2px;
    margin-left: 0;
    display: inline-block;
    vertical-align: top;
    width: 70%;
    font-size: var(--title-default-size, 16px);
    padding: 3px;
    background-color: white;
    padding: 20px;
    box-shadow: rgb(226, 234, 255) 0px 0px 45px inset;
  }

  & > .main {
    text-align: left;
    margin: 15px;
    & > .head {
      letter-spacing: -4px;
      & > .middle {
        display: inline-block;
        min-width: 24px;
        vertical-align: top;

        & > .triangle {
          border: 10px solid;
          border-top-color: rgba(255, 255, 255, 0);
          border-right-color: rgb(226, 234, 255);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
        }
      }
    }
  }
  & > .else {
    text-align: right;
    margin: 15px;
    & > .head {
      letter-spacing: -4px;
      & > .middle {
        display: inline-block;
        min-width: 24px;
        vertical-align: top;

        & > .triangle {
          border: 10px solid;
          border-top-color: rgba(255, 255, 255, 0);
          border-left-color: rgb(226, 234, 255);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-right-color: rgba(255, 255, 255, 0);
        }
      }
    }
  }
}
.fn-cd_qu_17 {
  .left {
    display: inline-block;
    min-width: 40px;
    background-color: rgb(226, 234, 255);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 3px;
  }
  .right {
    letter-spacing: 1px;
    margin-left: 0;
    display: inline-block;
    vertical-align: top;
    width: auto;
    font-size: var(--title-default-size, 16px);
    padding: 6px 10px;
    background-color: rgb(249, 110, 87);
    color: white;
    border-radius: 0.5em;
  }

  & > .main {
    text-align: left;
    margin: 15px;
    & > .head {
      letter-spacing: -4px;
      & > .middle {
        display: inline-block;
        min-width: 24px;
        margin-top: 10px;

        & > .triangle {
          border: 10px solid;
          border-top-color: rgba(255, 255, 255, 0);
          border-right-color: rgb(249, 110, 87);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
        }
      }
    }
  }
  & > .else {
    text-align: right;
    margin: 15px;
    & > .head {
      letter-spacing: -4px;
      & > .middle {
        display: inline-block;
        min-width: 24px;
        vertical-align: middle;
        margin-top: 10px;

        & > .triangle {
          border: 10px solid;
          border-top-color: rgba(255, 255, 255, 0);
          border-left-color: rgb(249, 110, 87);
          border-bottom-color: rgba(255, 255, 255, 0);
          border-right-color: rgba(255, 255, 255, 0);
        }
      }
    }
  }
}

.fn-cd_qu_18 {
  & > .main {
    padding: 20px 50px;
    & > .head {
      display: inline-block;
      vertical-align: bottom;
      margin-left: -48px;
      margin-bottom: -51px;
      width: 80px;
      height: 80px;
      border-radius: 100%;
      border: 4px solid rgb(249, 110, 87);
      background: white;
    }
    & > .body {
      & > .on {
        border-radius: 0.8em 0.8em 0px 0px;
        display: block;
        background-color: rgb(249, 110, 87);
        width: 100%;
        color: white;
        font-size: var(--title-default-size, 16px);
        padding: 8px 45px;
      }

      & > .under {
        border: 1px solid rgb(249, 110, 87);
        border-radius: 0px 0px 0.8em 0.8em;
        padding: 10px;
        padding: 8px 45px;
      }
    }
  }
}

// 轴线卡片
.fn-cd_ax_1 {
  margin: 10px;

  & > .m-ax {
    display: flex;
    flex-direction: column;

    & > .m-tl {
      background: linear-gradient(45deg, #fff, #d5ebe7, #d5ebe7, #fff);
      padding: 6px 20px 6px 10px;

      & > em {
        font-size: var(--button-default-size, 17px);
        color: rgb(147, 198, 188);
      }

      & > label {
        color: rgb(147, 198, 188);
        display: inline-block;
        padding: 0 10px;
        margin-left: 10px;
        position: relative;

        &:before {
          content: '';
          height: 14px;
          width: 1px;
          background: #ff6600;
          display: block;
          position: absolute;
          left: -3px;
          top: 3px;
        }
      }
    }

    & > .m-bd {
      padding: 20px;
      border-left: 1px dashed #d5ebe7;
      margin-left: 20px;
      color: #666;
    }
  }
}

.fn-cd_ax_10 {
  padding: 20px;

  & > .m-tl {
    width: 25px;
    height: 25px;
    background-color: #ffcf55;
    border-radius: 50%;
    padding: 5px;
    color: white;
    font-style: normal;
    position: relative;
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;

    &::before {
      content: '';
      position: absolute;
      left: -30px;
      bottom: 10px;
      top: 0;
      width: 100%;
      border-bottom: 1px solid black;
      transform: rotate(-60deg);
    }

    &::after {
      content: '';
      position: absolute;
      left: 30px;
      bottom: 10px;
      top: 10px;
      width: 100%;
      border-bottom: 1px solid black;
      transform: rotate(120deg);
    }
  }

  & > .m-bd {
    margin-top: 10px;
    padding: 0 10px 0 35px;
  }
}

.fn-cd_ax_10 {
  padding: 20px;

  & > .m-tl {
    width: 25px;
    height: 25px;
    background-color: #ffcf55;
    border-radius: 50%;
    padding: 5px;
    color: white;
    font-style: normal;
    position: relative;
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;

    &::before {
      content: '';
      position: absolute;
      left: -30px;
      bottom: 10px;
      top: 0;
      width: 100%;
      border-bottom: 1px solid black;
      transform: rotate(-60deg);
    }

    &::after {
      content: '';
      position: absolute;
      left: 30px;
      bottom: 10px;
      top: 10px;
      width: 100%;
      border-bottom: 1px solid black;
      transform: rotate(120deg);
    }
  }

  & > .m-bd {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 0 10px 0 35px;
  }
}

.fn-cd_ax_11 {
  & > :nth-child(odd) {
    display: flex;
    margin-bottom: 10px;
    margin-top: 15px;

    & > em {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #93b06c;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: var(--title-default-size, 16px);
      color: #fff;
    }

    & > label {
      border-top: 1px solid #93b06c;
      border-bottom: 1px solid #93b06c;
      margin-left: 15px;
      padding: 5px 10px;
      color: #93b06c;
      display: inline-block;
    }
  }

  & > :nth-child(even) {
    text-indent: 15px;
    display: inline-block;
    position: relative;
    padding: 20px 10px 30px 50px;
    border-left: 1px dashed #93b06c;
    left: 15px;
    &::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #93b06c;
      position: absolute;
      top: 30px;
      left: 45px;
    }
  }
}

.fn-cd_ax_12 {
  margin: 35px !important;
  border: transparent;
  border-left: 1px dashed rgb(222, 56, 56);

  & > .m-bd {
    & > li {
      padding: 0px 0px 0px 20px;

      &::before {
        left: -45px;
      }
    }
  }
}

.fn-cd_ax_13 {
  padding: 10px !important;
  & > :nth-child(odd) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 15px;

    & > em {
      width: 40px;
      height: 50px;
      background-image: linear-gradient(90deg, #cbd7fe, #e0d7fa);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: var(--title-default-size, 16px);
      color: #fff;
      position: relative;

      &::after {
        content: '';
        border: 10px solid transparent;
        border-left: 10px solid #e6d7f9;
        position: absolute;
        right: -20px;
        top: 15px;
      }
    }

    & > label {
      margin-left: 15px;
      padding: 5px 10px;
      color: #a4baf3;
      display: inline-block;
      font-weight: bold;
      font-size: var(--title-default-size, 16px);
    }
  }

  & > :nth-child(even) {
    text-indent: 15px;
    display: inline-block;
    position: relative;
    padding: 20px 10px 20px 30px;
    border-left: 1px solid #a4baf3;
    left: 15px;
  }
}

.fn-cd_ax_14 {
  & > img {
    width: 80px;
    height: 80px;
  }

  & > :nth-child(even) {
    padding: 25px 15px 25px 40px;
    margin-left: 40px;
    margin-top: 15px;
    background-color: #f4f4f4;
    margin-bottom: 15px;
    border: transparent;
  }
}

.fn-cd_ax_15 {
  padding: 5px !important;

  & > div {
    display: flex;
    flex-direction: row;
    justify-content: center;

    & > em {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background-color: #ed513d;
      color: #fff;
      flex-shrink: 0;

      &::after {
        content: '';
        width: 80%;
        height: 8px;
        background-color: #ffd7d2;
        position: absolute;
        bottom: -8px;
      }
    }

    & > div {
      border-top: 1px solid #ed513d;
      padding: 10px;
      margin: 10px 15px;
    }
  }
}

.fn-cd_ax_16 {
  padding: 20px 0;
  text-align: center;
  & > .m-m {
    display: inline-block;

    width: 80%;
    vertical-align: top;
    background-color: rgba(69, 39, 36, 0.06);
    height: auto;
    padding: 33px;
    & > .m-hd {
      margin: -15px 0px 0px;
      text-align: left;
      & > .m-lt {
        display: inline-block;
        color: white;
        font-size: var(--button-default-size, 17px);
        font-weight: bold;
        vertical-align: top;
        min-width: 10%;
        background-color: rgb(69, 39, 36);
        padding: 8px 21px;
        margin-left: -60px;
      }
    }

    & > .m-nk {
      color: rgb(69, 39, 36);
      font-size: var(--title-default-size, 16px);
      font-weight: bold;
      margin: 10px 10px;
      padding: 15px 0;
      border-bottom: 2px solid rgb(69, 39, 36);
      text-align: left;
    }

    & > .m-bd {
      text-align: justify;
      margin: 0 15px;
      padding: 20px 0;
      font-size: var(--title-default-size, 16px);
    }
  }
}

.fn-cd_ax_17 {
  & > .m-m {
    & > .m-hd {
      display: inline-block;
      position: relative;
      transform: translate3d(6px, 20px, 0px);
      text-align: center;
      margin: 12px;
      background-color: rgb(255, 255, 255);
      & > .m-lt {
        display: inline-block;
        vertical-align: middle;

        background-color: rgb(25, 15, 73);
        height: 1px;
        width: 26px;
        transform: rotateZ(291deg);
      }

      & > .m-md {
        display: inline-block;

        font-size: var(--title-default-size, 16px);
        font-weight: bold;
        color: rgb(255, 207, 85);
      }
    }
    & > .m-bd {
      border: 1px solid rgb(25, 15, 73);
      padding: 20px;
      text-align: justify;
    }
  }
}

.fn-cd_ax_18 {
  & > .m-m {
    & > .m-hd {
      padding: 0px 0px 0px 5px;
      & > .m-hd {
        display: inline-block;
        margin-top: 20px;

        & > .m-lt {
          display: inline-block;
          width: 10px;
          height: 10px;
          vertical-align: bottom;
          border: 2px solid rgb(255, 172, 63);
          border-radius: 50%;
          background-color: rgb(234, 44, 44);
          transform: translate3d(-5px, 0px, 0px);
        }
        & > .m-rt {
          display: inline-block;
          color: rgb(204, 17, 17);
          padding: 0px 10px;
          background-color: rgba(255, 172, 63, 0.23);
          vertical-align: bottom;
          font-weight: bold;
        }
      }

      & > .m-bd {
        border-left: 1px dashed rgb(204, 17, 17);
        padding: 10px 15px;
        text-align: justify;
        font-size: var(--title-default-size, 16px);
      }
    }
  }
}

.fn-cd_ax_19 {
  & > .m-m {
    margin: 20px;
    & > .m-hd {
      & > .m-hd {
        letter-spacing: -5px;
        margin-left: -6px;
        & > .m-lt {
          letter-spacing: normal;
          display: inline-block;
          font-size: var(--button-default-size, 17px);
          font-weight: bold;
          width: 60%;
          color: rgb(255, 241, 223);
          padding: 0px 10px;
          text-shadow: rgb(255, 86, 55) 1.7px 1.7px;
          background-image: linear-gradient(
            -90deg,
            rgb(255, 88, 49) 0%,
            rgb(255, 190, 138) 100%
          );
        }

        & > .m-rt {
          display: inline-block;
          vertical-align: bottom;
          width: 6px;
          height: 28px;
          background-image: linear-gradient(
            -135deg,
            rgba(255, 226, 215, 0) 0%,
            rgba(255, 225, 214, 0) 5px,
            rgb(255, 225, 214) 5px,
            rgb(255, 190, 138) 100%
          );
        }

        & > .m-bt {
          width: calc(~'60% + 6px');
          height: 7px;
          background-image: linear-gradient(
            45deg,
            rgba(255, 94, 54, 0) 5px,
            rgb(255, 94, 54) 5px,
            rgb(255, 187, 135) 100%,
            rgba(255, 188, 136, 0) 100%,
            rgba(255, 190, 138, 0) 100%
          );
        }
      }
      & > .m-bd {
        background-color: rgb(255, 242, 238);
        font-size: var(--button-default-size, 17px);
        padding: 10px 20px;
      }
    }
  }
}

.fn-cd_ax_20 {
  & > .m-bd {
    border-left: 1px solid #38a5fb;
    padding: 0 4px;
    margin: 20px 5px;

    & > .m-tl {
      display: flex;
      position: relative;
      margin-bottom: 10px;

      & > section {
        background-color: #e6f4ff;
        border-left: 5px solid #38a5fb;
        padding: 5px 8px;
        font-size: var(--button-default-size, 17px);
        font-weight: bolder;
        color: #38a5fb;
      }

      & > div {
        width: 0;
        height: 0;
        border-top: 38.28px solid #e6f4ff;
        border-left: 0;
        border-right: 15px solid transparent;
        position: relative;

        &::before {
          background-color: #fe906a;
          display: inline-block;
          content: '';
          width: 4px;
          height: 18px;
          position: relative;
          left: 12px;
          top: -50px;
        }

        &::after {
          content: '';
          background-color: #fe906a;
          display: inline-block;
          width: 18px;
          height: 4px;
          position: relative;
          left: 5px;
          top: -79px;
        }
      }
    }

    & > .m-txt {
      font-size: var(--title-default-size, 16px);
    }
  }
}

/*--- 图片 ---*/
// 基础图片
.fn-im_bs_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;

  img {
    width: 100%;
    outline: 1px solid #ccc;
    outline-offset: 10px;
  }
}

.fn-im_bs_10 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;

  img {
    width: 100%;
    box-shadow: 0 0 10px #ccc, -3px 0 10px #ccc;
  }
}

.fn-im_ba_11 {
  & > div {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    & > img {
      border: 1px solid #edf5f7;
      padding: 10px;
      box-shadow: 10px 10px 5px #edf5f7;
      margin-bottom: 10px;
    }
  }
}

.fn-im_ba_12 {
  & > div {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    & > img {
      border-radius: 30% 0 30% 0;
    }
  }
}

.fn-im_ba_13 {
  & > div {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    & > img {
      border: 10px solid #afcfee;
    }
  }
}

.fn-im_ba_14 {
  background-image: linear-gradient(to bottom, #c5e3d3 50%, #fff 50%);
  padding: 15px !important;

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      max-width: 100%;
    }
  }
}

.fn-im_ba_15 {
  padding: 10px;

  & > div {
    border: 1px solid #97cdaf;

    & > div {
      border: 1px solid #97cdaf;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 5px;
      left: 5px;
      position: relative;

      & > img {
        padding: 10px;
      }
    }
  }
}

// 单图
.fn-im_on_1 {
  display: flex;

  .m-img {
    position: relative;
    margin: 40px 20px;

    img {
      max-width: 100%;
    }

    & > em {
      position: absolute;
      right: -10px;
      bottom: -10px;
      height: 70px;
      width: 70px;
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
    }
  }
}

.fn-im_on_2 {
  background: #fafff5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #4d6f2b;

  &::before {
    content: '';
    position: relative;
    background: #fafff5;
    width: 95%;
    height: 10px;
    top: -10px;
    border: 1px solid;
    border-color: #4d6f2b #4d6f2b transparent #4d6f2b;
  }
  &::after {
    content: '';
    position: relative;
    background: #fafff5;
    width: 95%;
    height: 10px;
    top: 10px;
    border: 1px solid;
    border-color: transparent #4d6f2b #4d6f2b #4d6f2b;
  }

  img {
    width: 350px;
    height: 175px;
  }
}

.fn-im_on_3 {
  display: flex;
  justify-content: space-around;
  height: 300px;
  img {
    width: 40%;
    height: 90%;
  }

  & > .m-lt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > .m-lt-tp {
      display: flex;
      flex-direction: column;
      text-align: center;
      position: relative;
      left: 40px;
      top: -55px;
      em {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-weight: 800;
        border: 1px solid;
        border-radius: 50%;
        background: #d9e1d1;
        color: #90a574;
        margin: 7px;
      }
    }
    & > .m-lt-ct {
      font-size: var(--desc-default-size, 12px);
      border: 1px solid;
      border-color: transparent transparent #90a574 transparent;
      text-align: center;
      position: relative;
      top: -30px;
      left: 10px;
      margin: 5px;
    }
    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #90a574;
      position: relative;
      top: 145px;
      left: 55px;
    }
    &::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #90a574;
      position: relative;
      top: 25px;
      left: 55px;
    }
  }
}

.fn-im_on_4 {
  display: flex;
  justify-content: center;

  img {
    margin-right: 100px;
    border-radius: 50%;
  }

  & > .m-lt {
    display: flex;
    flex-direction: column;

    & > em {
      margin: 5px;
      border: 1px solid;
      border-color: transparent transparent #90a574 transparent;
    }

    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #90a574;
      position: relative;
      top: 95px;
      left: 50px;
    }
    &::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #90a574;
      position: relative;
      top: 35px;
      left: 50px;
    }
  }
}

.fn-im_on_5 {
  display: flex;
  justify-content: space-around;

  img {
    border-radius: 50%;
  }

  & > .m-lt {
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    left: 35px;
    top: 25px;
    em {
      width: 25px;
      height: 25px;
      line-height: 25px;
      font-weight: 800;
      border: 1px solid;
      border-radius: 50%;
      background: #d9e1d1;
      color: #73987c;
      margin: 7px;
    }
  }
}

.fn-im_on_6 {
  display: flex;
  justify-content: center;
  padding-top: 65px;
  & > .m-img {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #73987c;
    border-radius: 50%;
    padding: 15px;

    & > img {
      border-radius: 50%;
    }
  }
  &::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #90a574;
    position: relative;
    top: -26px;
    left: 88px;
  }
  &::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #90a574;
    position: relative;
    top: -50px;
    left: -87px;
  }
}

.fn-im_on_7 {
  display: flex;
  justify-content: space-around;

  & > .m-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 170px;
    border: 1px solid #73987c;
    border-radius: 50%;
    padding: 15px;

    & > img {
      border-radius: 50%;
      object-fit: contain;
    }
  }

  & > .m-lt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > em {
      margin: 5px;
      border: 1px solid;
      border-color: transparent transparent #90a574 transparent;
    }
  }
}

.fn-im_on_8 {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    margin-left: 10px;
    width: 95%;
    height: 95%;
  }

  & > .m-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    & > .m-top-cir {
      height: 6px;
      width: 6px;
      border: 2px;
      margin: 2px;
      border-radius: 50%;
      border-style: solid;
      border-color: #fe826c;
    }
  }
  .m-bt {
    float: right;
    width: 40%;
    margin-top: 10px;
    margin-right: 5px;
    height: 10px;
    background: #89cdce;
  }
}

.fn-im_on_9 {
  margin-left: 110px !important;
  border-top: 3px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: #c4ae76;
  background-color: #eee5cc;
  height: 200px;
  width: 300px;
  text-align: center;
  img {
    height: 95%;
    width: 95%;
  }
}

.fn-im_on_10 {
  display: flex;
  align-items: center;
  .m-img {
    display: inline-block;
    margin-right: 15px;
    img {
      max-width: 100%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
  }

  & > em {
    display: inline-block;
    background-color: #93b06c;
    padding: 5px 10px;
    color: #fff;
    font-weight: bold;
    font-size: var(--title-default-size, 16px);
    margin-right: 10px;
  }

  & > label {
    color: #93b06c;
    border-top: 1px solid #93b06c;
    border-bottom: 1px solid #93b06c;
    padding: 5px 0;
  }
}

.fn-im_on_11 {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f9fff5;

  img {
    max-width: 50%;
  }

  & > .m-bd {
    position: relative;
    margin: 50px;
    left: 40px;
    top: 10px;
    & > :nth-child(1) {
      display: inline-block;
      position: relative;
      top: -50px;
      margin-right: 20px;
      & > em {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #7b9b7b;
        border: 2px solid #7b9b7b;
        font-weight: bold;
        padding: 5px;
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: '';
        width: 5px;
        height: 5px;
        background-color: #7b9b7b;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 10px;
      }

      &::before {
        bottom: -20px;
      }

      &::after {
        bottom: -50px;
      }
    }
  }
}

.fn-im_on_12 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background-color: #f9fff5;

  img {
    width: 200px;
    margin-right: 20px;
  }

  & > .m-bd {
    position: relative;
    margin: 50px;

    & > :nth-child(1) {
      display: inline-block;
      position: relative;
      top: -25px;
      margin-right: 20px;

      & > em {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #7b9b7b;
        border: 2px solid #7b9b7b;
        font-weight: bold;
        padding: 5px;
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: '';
        width: 5px;
        height: 5px;
        background-color: #7b9b7b;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 10px;
      }

      &::before {
        bottom: -20px;
      }

      &::after {
        bottom: -50px;
      }
    }
  }
}

.fn-im_on_13 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  & > .m-img {
    width: 220px;
    height: 220px;
    display: inline-block;
    background: #fafff5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #4d6f2b;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      background: #fafff5;
      width: 95%;
      height: 10px;
      top: -10px;
      border: 1px solid;
      border-color: #4d6f2b #4d6f2b transparent #4d6f2b;
    }

    &::after {
      content: '';
      position: absolute;
      background: #fafff5;
      width: 95%;
      height: 10px;
      bottom: -10px;
      border: 1px solid;
      border-color: transparent #4d6f2b #4d6f2b #4d6f2b;
    }

    img {
      width: 150px;
      height: 150px;
    }
  }

  & > .m-bd {
    position: relative;
    margin: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;

    & > :nth-child(1) {
      display: inline-block;

      position: relative;
      top: -50px;
      margin-right: 20px;

      & > em {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #7b9b7b;
        border: 2px solid #7b9b7b;
        font-weight: bold;
        padding: 5px;
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: '';
        width: 5px;
        height: 5px;
        background-color: #7b9b7b;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 10px;
      }

      &::before {
        bottom: -20px;
      }

      &::after {
        bottom: -50px;
      }
    }

    & > :nth-child(2) {
      display: inline-block;
      & > em {
        display: block;
        color: #7b9b7b;

        &:nth-child(2) {
          margin-bottom: 20px;
        }
      }
    }
  }
}

.fn-im_on_14 {
  padding: 20px !important;

  & > .m-img {
    position: relative;
    padding: 15px;
    border-bottom: 5px dotted #9de1fc;

    img {
      max-width: 100%;
    }

    &::before,
    &::after {
      content: '';
      width: 50px;
      height: 50px;
      display: inline-block;
      position: absolute;
      z-index: 1;
    }

    &::before {
      top: 0;
      left: 0;
      border-top: 5px solid #9de1fc;
      border-left: 5px solid #9de1fc;
    }

    &::after {
      top: 0;
      right: 0;
      border-top: 5px solid #9de1fc;
      border-right: 5px solid #9de1fc;
    }
  }
}

.fn-im_on_15 {
  display: flex;
  flex-wrap: nowrap;

  & > .m-lt {
    flex: 138.842 138.842 0%;
    align-self: flex-end;
    & > .m-lt {
      display: inline-block;
      vertical-align: top;
      margin-left: 30px;
      width: 12px;
      height: 78px;

      overflow: hidden;
      background-color: rgb(255, 207, 85);
    }
  }

  & > .m-m {
    display: flex;
    transform: translateX(-64px);
    flex-direction: column;
    align-items: flex-end;
    margin-right: 40px;

    & > .m-hd {
      transform: translate3d(-83px, 20px, 0px);
      margin: 12px;
      background-color: rgb(255, 255, 255);

      & > .m-lt {
        display: inline-block;
        vertical-align: middle;

        background-color: rgb(25, 15, 73);
        height: 1px;
        width: 26px;
        transform: rotateZ(291deg);
      }

      & > .m-md {
        display: inline-block;
        font-size: var(--title-default-size, 16px);
        font-weight: bold;
        color: rgb(255, 207, 85);
      }
    }
    & > .m-bd {
      border: 1px solid rgb(25, 15, 73);
      width: 60%;
    }
  }

  img {
    margin: 60px 60px 60px -76px;
    position: relative;
    width: 100%;
  }
}

.fn-im_on_16 {
  & > .m-m {
    & > .m-bd {
      & > .m-img {
        & > img {
          width: 100%;
        }
      }
    }

    & > .m-ft {
      & > .m-lt {
        display: inline-block;
        width: auto;
        background-color: rgba(97, 155, 139, 0.09);
        padding: 9px;
        font-size: var(--button-default-size, 17px);
        font-weight: bold;
        color: rgb(0, 66, 91);
      }
      & > .m-rt {
        margin-left: 12px;
        display: inline-block;
        width: auto;
        font-size: var(--button-default-size, 17px);
        font-weight: 500;
        color: rgb(0, 66, 91);
      }
    }
  }
}
.fn-im_on_17 {
  & > .m-m {
    & > .m-bd {
      margin-top: 20px;
      & > .m-img {
        & > img {
          width: 100%;
        }
      }
    }
    & > .m-hd {
      display: flex;
      justify-content: center;
      align-items: center;
      .m-dot {
        display: inline-block;
        width: 5px;
        height: 5px;
        vertical-align: top;
        overflow: hidden;
        border-width: 0px;
        border-radius: 227px;
        border-style: none;
        border-color: rgb(62, 62, 62);
        background-color: rgb(37, 105, 117);
        position: relative;
        transform: translateY(-2px);
      }

      & > .m-lt {
        align-self: flex-end;
        min-width: 10%;
        transform: rotateX(180deg);
        text-align: center;
      }

      & > .m-md {
        text-align: justify;
        font-size: var(--button-default-size, 17px);
        font-weight: 500;
        color: rgb(0, 66, 91);
        border-bottom: 2px solid #08678b;
      }
    }
  }
}

.fn-im_on_18 {
  & > .fn-co_qr_16 {
    & > div {
      & > .m-img {
        & > img {
          padding: 10px;
          width: 100%;
        }
      }
      & > :nth-child(3) {
        font-size: var(--desc-default-size, 12px);
      }
    }
  }
}

// 双图
.fn-im_tw_1 {
  display: flex;
  flex-direction: column;
  margin: 10px;

  & > .m-bd {
    display: flex;

    .m-img {
      & + .m-img {
        margin-left: 10px;
      }

      img {
        flex: 1;
        max-width: 100%;
      }
    }
  }
}

.fn-im_tw_2 {
  padding: 10px !important;
  display: flex;
  justify-content: center;
  & > .m-lt {
    margin: 0 5px 0 5px;
    padding: 10px;
    background: #eff8f0;
    img {
      width: 230px;
    }
    & > .m-wd {
      width: 230px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: white;
      color: #506f6e;
      em {
        font-size: var(--desc-default-size, 12px);
      }
    }
  }
}

.fn-im_tw_3 {
  padding: 10px !important;
  display: flex;
  flex-direction: column;
  align-items: center;

  & > .m-img {
    display: flex;
    img {
      margin: 5px;
    }
  }
  & > .m-wd {
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    left: 60px;
    em {
      font-size: var(--desc-default-size, 12px);
      margin: 10px;
    }

    &::before {
      content: '1';
      color: white;
      width: 25px;
      height: 25px;
      line-height: 25px;
      border-radius: 50%;
      background: #e197a1;
      position: relative;
      top: 40px;
      left: -100px;
    }
    &::after {
      content: '';
      border: 8px solid;
      border-color: transparent transparent transparent #e197a1;
      position: relative;
      top: -82px;
      left: -50px;
    }
  }
}

.fn-im_tw_4 {
  padding: 10px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  & > .m-img {
    display: flex;
    align-items: flex-end;
    text-align: center;
    & > .m-img1 {
      margin: 0 0 0 10px;
      width: 250px;
      height: 120px;
      flex: 1;
    }
    & > .m-img2 {
      flex: 1.2;
    }

    &::before {
      content: '2';
      color: white;
      width: 25px;
      height: 25px;
      line-height: 25px;
      border-radius: 50%;
      background: #e197a1;
      position: relative;
      top: -160px;
      left: 420px;
    }
    &::after {
      content: '';
      border: 8px solid;
      border-color: #e197a1 transparent transparent transparent;
      position: relative;
      top: -130px;
      left: -116px;
    }
  }
  & > .m-wd {
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    em {
      font-size: var(--desc-default-size, 12px);
      margin: 10px;
    }
    &::before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e197a1;
      position: relative;
      top: 23px;
      left: -15px;
    }
    &::after {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e197a1;
      position: relative;
      top: -26px;
      left: -15px;
    }
  }
}

.fn-im_tw_5 {
  padding: 10px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  & > .m-img {
    display: flex;
    align-items: flex-end;
    text-align: center;
    & > .m-img1 {
      margin: 0 0 0 10px;
      width: 250px;
      height: 120px;
      flex: 1;
    }
    & > .m-img2 {
      margin-left: 10px;
      flex: 1.3;
    }

    &::before {
      content: '1';
      color: white;
      width: 25px;
      height: 25px;
      line-height: 25px;
      border-radius: 50%;
      background: #e197a1;
      position: relative;
      top: -160px;
      left: 140px;
    }

    &::after {
      content: '';
      border: 8px solid;
      border-color: #e197a1 transparent transparent transparent;
      position: relative;
      top: -130px;
      left: -407px;
    }
  }
}

.fn-im_tw_10 {
  display: flex;
  flex-direction: column;
  margin: 10px;
  position: relative;
  padding: 20px !important;

  & > .m-limg {
    display: flex;
    align-items: flex-end;

    & > :nth-child(1) {
      flex: 2;
      & > img {
        max-width: 100%;
      }
    }

    & > :nth-child(2) {
      flex: 1;
      margin-left: 15px;
      & > img {
        max-width: 100%;
      }
    }
  }

  & > em {
    display: inline-block;
    font-weight: bold;
    font-size: var(--title-default-size, 16px);
    padding: 10px;
    position: absolute;
    top: 40px;
    right: 80px;
    border: 1px solid #000;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba(186, 215, 251, 0.25);
      display: inline-block;
      position: absolute;
      top: 5px;
      left: 5px;
    }
  }
}

.fn-im_tw_11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9fff5;

  & > .m-img {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-width: 90%;
    }
  }

  & > .m-bd {
    position: relative;
    margin: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    right: 80px;
    font-size: var(--title-default-size, 16px);

    & > :nth-child(1) {
      display: inline-block;
      position: relative;
      top: -50px;
      margin-right: 20px;

      & > em {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #7b9b7b;
        border: 2px solid #7b9b7b;
        padding: 5px;
        margin-bottom: 10px;
        font-weight: bold;
      }

      &::before,
      &::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #7b9b7b;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 20px;
      }

      &::before {
        bottom: -20px;
      }

      &::after {
        bottom: -60px;
      }
    }

    & > :nth-child(2) {
      display: inline-block;

      & > em {
        display: block;
        color: #7b9b7b;

        &:nth-child(2) {
          margin-bottom: 20px;
        }
      }
    }

    & > img {
      width: 200px;
      height: 200px;
      border-radius: 100px;
      outline: 1px solid #7b9b7b;
      outline-offset: 10px;
      position: relative;
      left: 130px;
    }
  }
}

.fn-im_tw_12 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #f9fff5;
  position: relative;
  padding: 30px !important;

  & > .m-img {
    display: inline-block;
    position: relative;
    width: 50%;

    & > :nth-child(1) {
      max-width: 100%;
    }

    & > :nth-child(2) {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      z-index: 10;
      border-radius: 50%;
      border: 1px solid #7b9b7b;
      padding: 10px;
      background-color: #fafdf7;
      position: absolute;
      right: -70px;
      top: -70px;
    }
  }

  & > .m-bd {
    position: relative;
    margin: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 50%;

    & > :nth-child(1) {
      display: inline-block;
      position: relative;
      top: -50px;
      margin-right: 20px;

      & > em {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #7b9b7b;
        border: 2px solid #7b9b7b;
        font-weight: bold;
        padding: 5px;
        margin-bottom: 10px;
        font-size: 20px;
      }

      &::before,
      &::after {
        content: '';
        width: 5px;
        height: 5px;
        background-color: #7b9b7b;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 20px;
      }

      &::before {
        bottom: -20px;
      }

      &::after {
        bottom: -50px;
      }
    }

    & > :nth-child(2) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: var(--button-default-size, 17px);

      & > em {
        display: block;
        color: #7b9b7b;

        &:nth-child(2) {
          margin-bottom: 20px;
        }
      }
    }
  }
}

.fn-im_tw_13 {
  & > .m-m {
    margin: 20px 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    & > .m-lt {
      & > .m-bd {
        display: inline-block;
        border: 1px solid rgb(25, 15, 73);
        min-width: 40%;
        min-height: 300px;
        max-width: 77%;
        & > .m-hd {
          transform: translate3d(0, -26px, 0px);
          display: inline-block;

          margin: 12px;
          background-color: rgb(255, 255, 255);
          width: auto;

          & > .m-lt {
            display: inline-block;
            vertical-align: middle;
            transform: rotateZ(291deg);

            background-color: rgb(25, 15, 73);
            height: 1px;
            width: 26px;
          }
          & > .m-md {
            display: inline-block;
            font-size: var(--title-default-size, 16px);
            font-weight: bold;
            color: rgb(255, 207, 85);
          }
        }

        & > .m-img {
          display: inline-block;
          width: 90%;
          background-color: white;
          & > img {
            width: 90%;
            margin: 20px 0;
          }
          transform: translateX(166px);
          & + .m-img {
            transform: translateX(102px);
            margin-bottom: 60px;
          }
        }
      }
    }
    & > .m-rt {
      display: inline-block;
      align-self: flex-end;
      height: auto;
      & > .m-rt {
        display: inline-block;
        vertical-align: bottom;
        margin-left: 30px;
        width: 12px;
        height: 78px;
        overflow: hidden;
        background-color: rgb(255, 207, 85);
      }
    }
  }
}

.fn-im_tw_14 {
  & > .m-m {
    & > .m-bd {
      margin: 20px;
      & > .m-img {
        & > img {
          width: 50%;
        }
        & + .m-img {
          margin-top: 20px;
          transform: translateX(30%);
        }
      }
    }
  }
}
// 三图
.fn-im_th_1 {
  margin: 10px;
  background: rgb(240, 251, 255);
  padding: 20px;

  & > em {
    padding: 8px 25px;
    background: #ff6600;
    font-size: var(--title-default-size, 16px);
    color: #fff;
    display: inline-block;
    margin-bottom: 10px;
  }

  & > .m-img {
    display: flex;
    margin-bottom: 10px;

    &:nth-child(2) {
      & > img {
        max-width: 100%;
        flex: 1;
      }
    }

    &:nth-child(3) {
      & > img {
        max-width: calc(50% - 5px);
        flex: 1;

        & + img {
          margin-left: 10px;
        }
      }
    }
  }
}

.fn-im_th_2 {
  margin: 10px !important;
  display: flex;
  justify-content: space-around;

  & > .m-lt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
    & > .m-lt-tp {
      max-width: 100%;
    }
    & > .m-lt-bt {
      margin-top: 20px;
      max-width: 100%;
      width: 50%;
    }
  }
  & > .m-rt {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    & > .m-rt-tp {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #ffd05a;
      color: white;
      position: relative;
      left: 110px;
      top: -45px;
      em {
        position: relative;
        top: -22px;
      }
      &::before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 40px;
        background: black;
        position: relative;
        left: -20px;
        top: -10px;
        transform: rotate(25deg);
      }
      &::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 40px;
        background: black;
        position: relative;
        left: 20px;
        top: -10px;
        transform: rotate(25deg);
      }
    }
    & > .m-rt-bt {
      max-width: 100%;
    }
  }
}

.fn-im_th_10 {
  background-color: #6667ab;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & > .m-bd {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    width: 80%;

    .m-img {
      border: 10px solid #fff;

      img {
        flex: 1;
        max-width: 100%;
      }

      & + .m-img {
        margin-left: 10px;
      }
    }
  }

  & > em {
    color: #fff;
    display: block;
    text-align: center;
    margin: 15px;
  }
}

.fn-im_th_3 {
  & > .m-m {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    & > .m-lt {
      display: inline-block;
      margin: 20px;
      max-width: 40%;
      text-align: center;
      & > .m-bd {
        & > .m-img {
          display: inline-block;
          & > img {
            width: 100%;
          }
          & + .m-img {
            margin-top: 20px;
            width: 60%;
          }
        }
      }
    }
    & > .m-rt {
      display: inline-block;
      max-width: 40%;
      margin: 20px;
      & > .m-hd {
        display: inline-block;
        margin-top: 30px;
        background-color: rgb(255, 255, 255);
        width: auto;

        & > .m-lt {
          display: inline-block;
          vertical-align: middle;
          transform: rotateZ(291deg);

          background-color: rgb(25, 15, 73);
          height: 1px;
          width: 26px;
        }
        & > .m-md {
          display: inline-block;
          font-size: var(--title-default-size, 16px);
          font-weight: bold;
          color: rgb(255, 207, 85);
        }
      }
      & > .m-img {
        & > img {
          margin-top: 65px;
          width: 100%;
        }
      }
    }
  }
}

// 多图
.fn-im_mu_1 {
  margin: 10px;
  background: rgb(240, 251, 255);
  padding: 20px;

  & > em {
    padding: 8px 25px;
    background: #ff6600;
    font-size: var(--title-default-size, 16px);
    color: #fff;
    display: inline-block;
    margin-bottom: 10px;
  }

  & > .m-img {
    display: flex;
    margin-bottom: 10px;

    & > img {
      max-width: calc(50% - 5px);
      flex: 1;
      & + img {
        margin-left: 10px;
      }
    }
  }
}

.fn-im_mu_2 {
  & > .m-m {
    & > .m-bd {
      margin: 20px;
      & > .m-img {
        text-align: center;
        & > img {
          display: inline-block;
          width: 45%;
          & + img {
            margin-left: 20px;
            width: 30%;
          }
        }
        & + .m-img {
          margin-top: 20px;

          & > img {
            display: inline-block;
            width: 30%;
            & + img {
              margin-left: 20px;
              width: 45%;
            }
          }
        }
      }
    }
  }
}

// 圆形图
.fn-im_ci_1 {
  margin: 10px;

  & > img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
  }

  & > em {
    margin-left: 20px;
    display: inline-block;
    padding: 2px 10px;
    background: #21a557;
    color: #fff;
    font-size: var(--button-default-size, 17px);
    font-weight: bold;
  }
  & > label {
    display: inline-block;
    margin: 0 0 0 20px;
    color: #21a557;
    border-top: 1px solid #21a557;
    border-bottom: 1px solid #21a557;
    padding: 3px 0;
  }
}

.fn-im_ci_10 {
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  & > i {
    background-color: #f0f5f3;
    color: #73a095;
    position: relative;
    left: 175px;
    top: -80px;
  }

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
}

.fn-im_ci_11 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  flex-direction: column;

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    outline: 1px solid #b9c1bb;
    outline-offset: 15px;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  & > .m-bd {
    position: relative;
    margin: 50px;

    & > :nth-child(1) {
      display: inline-block;
      position: relative;
      top: -50px;
      margin-right: 20px;

      & > em {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #7b9b7b;
        border: 2px solid #7b9b7b;
        font-weight: bold;
        padding: 5px;
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: '';
        width: 5px;
        height: 5px;
        background-color: #7b9b7b;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 10px;
      }

      &::before {
        bottom: -20px;
      }

      &::after {
        bottom: -50px;
      }
    }

    & > :nth-child(2) {
      display: inline-block;

      & > em {
        display: block;
        color: #7b9b7b;

        &:nth-child(2) {
          margin-bottom: 20px;
        }
      }
    }
  }
}

.fn-im_ci_12 {
  & > .m-m {
    & > .m-lt {
      display: inline-block;

      & > .m-img {
        & > img {
          width: 120px;
          height: 120px;
          border-radius: 100px;
        }
      }
    }
    & > .m-rt {
      display: inline-block;
      width: 300px;
    }
  }
}

.fn-im_ci_13 {
  text-align: center;
  & > .m-img {
    display: inline-block;
    & > img {
      border: 1px solid black;
      width: 100%;
      border-radius: 100%;
      padding: 10px;
    }
  }
  & > .m-nk {
    margin-top: 10px;
    & > div {
      display: inline-block;
      height: 40px;
      width: 1px;
      border: 1px none #fff;
      background-color: black;
    }
  }
  & > .m-wd {
    font-size: 24px;
    color: white;
    text-shadow: rgb(62, 62, 62) 0px 1.4px, rgb(62, 62, 62) 1px 1px,
      rgb(62, 62, 62) 1.4px 0px, rgb(62, 62, 62) 1px -1px,
      rgb(62, 62, 62) 0px -1.4px, rgb(62, 62, 62) -1px -1px,
      rgb(62, 62, 62) -1.4px 0px, rgb(62, 62, 62) -1px 1px;
  }
}

// 背景图
.fn-im_ba_1 {
  margin: 10px 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 40px 0 0 0;

  & > .m-logo {
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: calc(50% - 40px);
    & > img {
      width: 100%;
      border-radius: 40px;
      height: 100%;
      border: 2px solid #fff;
    }
  }

  & > .m-img {
    display: flex;
    flex-direction: column;
    & > img {
      width: 100%;
      opacity: 0.3;
    }
  }

  & > .m-txt {
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    text-align: justify;
    color: #666;
    display: flex;
    justify-content: center;
    padding: 80px 0 0 0;
  }
}

.fn-im_ba_10 {
  margin: 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  & > .m-logo {
    position: absolute;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    & > img {
      max-width: 50%;
    }
  }

  & > .m-img {
    & > img {
      max-width: 100%;
      opacity: 0.3;
      border-radius: 10%;
    }
  }

  & > .m-txt {
    position: absolute;
    left: 10px;
    bottom: 50px;
    right: 10px;
    text-align: justify;
    color: #666;
    margin: 10px;
  }
}

/*--- 布局 ---*/
// 基础布局
.fn-ly_bs_1,
.fn-ly_bs_2,
.fn-ly_bs_3,
.fn-ly_bs_4,
.fn-ly_bs_5,
.fn-ly_bs_6 {
  display: flex;

  & > .m-grid {
    padding: 10px;
    flex: 1;

    &.m-gf2 {
      flex: 2;
    }
    & + .m-grid {
      margin-left: 10px;
    }
    &:empty {
      border: 2px dashed #ccc;
      height: 40px;
    }
  }
}

.fn-ly_ba_10 {
  border: 2px dashed #91bed6;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  & > div {
    width: 32%;
    height: 45px;
    border: 2px dashed #91bed6;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:empty::before {
      content: '空白处输入文字';
      color: #91bed6;
    }
  }
}

.fn-ly_ba_11 {
  display: flex;

  & > div {
    background-color: #fff;
    padding: 10px;
    font-size: var(--button-default-size, 17px);
    margin: 10px 5px;
    color: #9ecbe4;
    min-height: 45px;
    min-width: 15%;
    width: 100%;
    border: 2px solid #9ecbe4;
  }
}

// 组合
.fn-ly_gr_10 {
  & > .m-ft {
    width: 80%;
    padding: 5px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    outline: 1px dashed #91bed6;
    outline-offset: -15px;
    background-color: #f5f5f5;
    margin: auto;
    margin-top: 15px;
    padding: 20px;
  }
}

// 表格
.fn-ly_ta_1 {
  margin: 10px 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  box-sizing: border-box;

  & > .m-row {
    display: flex;
    padding: 2px;

    & + .m-row {
      margin-top: 2px;
      border-top: 1px solid #eee;
    }

    & > .m-col {
      flex: 1;
      padding: 0 3px;
      text-align: center;

      & + .m-col {
        margin-left: 2px;
      }

      &:empty {
        border: 2px dashed #ccc;
        height: 30px;
      }
    }
  }

  &.fn-ly_ta_green {
    & > .m-row:first-child {
      background: #3ebb5f;
      color: #fff;
    }
  }

  &.fn-ly_ta_red {
    & > .m-row:first-child {
      background: #d67171;
      color: #fff;
    }
  }
  &.fn-ly_ta_blue {
    & > .m-row:first-child {
      background: #2976e0;
      color: #fff;
    }
  }
}

.fn-ly_ta_2 {
  margin: 10px 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  box-sizing: border-box;

  & > .m-row {
    display: flex;
    padding: 2px;

    & + .m-row {
      margin-top: 2px;
      border-top: 1px solid #eee;
    }

    & > .m-col {
      flex: 1;
      padding: 0 3px;
      text-align: center;

      & + .m-col {
        margin-left: 1px;
      }

      &:empty {
        height: 30px;
      }
    }
  }

  &.fn-ly_ta_sky {
    & > .m-row:first-child {
      background-color: white;
      color: #fff;
      & > .m-col {
        background-color: #7aafe7;
        color: #fff;
      }
    }
  }

  &.fn-ly_ta_green {
    & > .m-row:first-child {
      background-color: white;
      color: #fff;
      & > .m-col {
        background-color: #3ebb5f;
        color: #fff;
      }
    }
  }

  &.fn-ly_ta_red {
    & > .m-row:first-child {
      background: #fff;
      color: #fff;
      & > .m-col {
        background-color: #d67171;
        color: #fff;
      }
    }
  }
  &.fn-ly_ta_blue {
    & > .m-row:first-child {
      background: #fff;
      color: #fff;
      & > .m-col {
        background-color: #2976e0;
        color: #fff;
      }
    }
  }
}
.fn-ly_ta_3 {
  margin: 10px 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  box-sizing: border-box;

  & > .m-row {
    display: flex;
    padding: 2px;
    height: 50px;
    background-color: #f0f9ff;

    & + .m-row {
      margin-top: 2px;
      border-top: 1px solid #eee;
    }

    & > .m-col {
      flex: 3;
      padding: 0 3px;
      text-align: center;

      & + .m-col {
        margin-left: 1px;
        flex: 4;
      }
    }
    & :nth-child(3) {
      flex: 6 !important;
    }
  }

  &.fn-ly_ta_sky {
    & > .m-row:first-child {
      background-color: white;
      color: #fff;
      & > .m-col {
        background-color: #7aafe7;
        color: #fff;
      }
    }
  }
}

/*--- 组件 ---*/
// 分割线
.fn-co_sp_1 {
  display: flex;
  justify-content: space-around;
  padding-top: 10px !important;

  & > a {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;

    & > img {
      width: 100%;
    }

    & > i {
      position: absolute;
      background: #518cfc;
      height: 56px;
      right: 20px;
      top: calc(50% - 28px);
      width: 180px;
      border-radius: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 22px;
      font-weight: bold;
    }
  }
}

.fn-co_sp_2 {
  display: flex;
  justify-content: center;
  padding-top: 10px !important;
  &::before {
    content: '';
    display: inline-block;
    width: 30%;
    height: 1px;
    background: #25b4aa;
    position: relative;
    top: 10px;
    left: -28px;
  }
  &::after {
    content: '';
    display: inline-block;
    width: 30%;
    height: 1px;
    background: #25b4aa;
    position: relative;
    top: 10px;
    left: 20px;
  }
  & > .m-wd {
    & > em {
      color: #f65746;
      font-size: var(--desc-default-size, 12px);
      text-align: center;
      &::before {
        content: '√';
        display: inline-block;
        width: 15px;
        line-height: 15px;
        color: white;
        background: #f65746;
        border-radius: 50%;
      }
    }
  }
}

.fn-co_sp_3 {
  margin: 15px 5px 15px 5px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  & > .m-even {
    width: 10px;
    height: 15px;
    background: black;
    border-radius: 100% 100% 50% 50%;
  }
  & > .m-odd {
    width: 10px;
    height: 15px;
    background: #ffc16a;
    border-radius: 100% 100% 50% 50%;
  }
}

.fn-co_sp_4 {
  display: flex;
  justify-content: center;
  & > .m-lt,
  .m-rt {
    width: 20px;
    height: 20px;
    margin: 5px;
    border-radius: 50%;
  }
  & > .m-lt {
    background: #d2edf4;
    &::before {
      content: '';
      display: inline-block;
      width: 130px;
      height: 1px;
      background: black;
      position: relative;
      top: -6px;
      left: -156px;
    }
  }
  & > .m-rt {
    background: #f49683;
    &::before {
      content: '';
      display: inline-block;
      width: 130px;
      height: 1px;
      background: black;
      position: relative;
      top: -6px;
      left: 38px;
    }
  }
}

.fn-co_sp_5 {
  display: flex;
  justify-content: end;
  margin: 15px 40px 15px 15px !important;
  & > .m-rt {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fbe497;
  }
  & > .m-lt {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #c3d7d9;
    z-index: 2;
    position: relative;
    left: 10px;
  }
  &::before {
    content: '';
    display: inline-block;
    width: 80%;
    height: 1px;
    background: #c3d7d9;
    position: relative;
    top: 13px;
    left: -15px;
  }
}

.fn-co_sp_6 {
  display: flex;
  flex-direction: column;
  & > .m-lt {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 2px;
  }
  & > .m-rt {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 2px;
  }
  & > .m-lt {
    & > .m-lt-lt {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #679b97;
    }
    & > .m-lt-ct {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d96163;
    }
    & > .m-lt-rt {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #d96163;
    }
  }
  & > .m-rt {
    & > .m-rt-lt {
      margin-right: 140px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: #679b97;
    }
    & > .m-rt-rt {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d96163;
    }
  }
}

.fn-co_sp_10 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    margin: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffd05a;
    position: relative;

    &::before,
    &::after {
      content: '';
      background-color: #91c8f3;
      width: 100px;
      display: block;
      height: 1px;
      position: absolute;
      top: 10px;
    }

    &::before {
      left: -120px;
    }

    &::after {
      right: -120px;
    }
  }
}

.fn-co_sp_11 {
  & > div {
    width: 100%;
    height: 2px;
    background-color: #25b4aa;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    &::before,
    &::after {
      display: inline-block;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #25b4aa;
    }
  }
}

.fn-co_sp_13 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  & > div {
    width: 100%;
    border-bottom: 2px dotted #25b4aa;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    &::before,
    &::after {
      display: inline-block;
      content: '';
      width: 6px;
      height: 6px;
      background-color: #25b4aa;
      position: relative;
      top: 4px;
    }
  }
}

.fn-co_sp_14 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  & > div {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #ea4c3f;
    outline: 1px solid #ea4c3f;
    outline-offset: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  &::before,
  &::after {
    display: inline-block;
    content: '';
    width: 45%;
    height: 1px;
  }
  &::before {
    background-image: linear-gradient(to right, #fff, #ea4c3f);
  }

  &::after {
    background-image: linear-gradient(to right, #ea4c3f, #fff);
  }
}

.fn-co_sp_15 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px dashed rgb(182, 182, 182);

  & > div {
    padding: 5px 10px;
    background-color: #e9f2f4;
    display: inline-block;
    outline: 1px dashed rgb(182, 182, 182);
    outline-offset: 5px;
    position: relative;
    top: 4px;

    & > em {
      text-shadow: rgb(251, 197, 255) 2px 0px 2px;
      font-weight: bold;
    }

    &:nth-child(1) {
      border-radius: 50% 0;
    }

    &:nth-child(2) {
      border-radius: 0 50%;
    }

    & + div {
      margin-left: 30px;
    }
  }
}

.fn-co_sp_16 {
  padding: 20px;

  & > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 1px;
    background-color: #6669a9;

    &::before {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: relative;
      display: inline-block;
      box-shadow: 7px 5px 12px 7px white;
      background-color: #6669a9;
      top: -7px;
      left: 5px;
      z-index: 10;
    }

    &::after {
      content: '';
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: relative;
      display: inline-block;
      background-color: #6669a9;
      top: -15px;
      left: -5px;
    }
  }
}

.fn-co_sp_17 {
  text-align: center;
  letter-spacing: -5px;
  & > .m-lt {
    display: inline-block;
    vertical-align: middle;
    border-left: 1em solid rgb(37, 180, 170);
    border-top: 0.8em solid transparent !important;
    border-bottom: 0.8em solid transparent !important;

    & + .m-md + .m-lt {
      border-left: unset;
      border-right: 1em solid rgb(37, 180, 170);
    }
  }
  & > .m-md {
    display: inline-block;
    height: 2px;
    width: 90%;
    background-color: rgb(37, 180, 170);
    vertical-align: middle;
  }
}

.fn-co_sp_18 {
  text-align: left;
  letter-spacing: -5px;
  & > .m-lt {
    display: inline-block;
    vertical-align: middle;
    border-left: 13px solid rgb(37, 180, 170);
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
  }
  & > .m-md {
    display: inline-block;
    height: 2px;
    width: 96%;
    background-color: rgb(37, 180, 170);
    vertical-align: middle;
  }
}

.fn-co_sp_19 {
  text-align: center;
  letter-spacing: -6px;
  & > .m-md {
    display: inline-block;
    vertical-align: bottom;
    border-left: 10px solid transparent !important;
    border-top: 8px solid transparent !important;
    border-bottom: 16px solid rgb(37, 180, 170);
    border-right: 10px solid transparent !important;
  }
  & > .m-lt {
    display: inline-block;
    height: 2px;
    width: 48%;
    background-color: rgb(37, 180, 170);
    vertical-align: bottom;
    margin-right: -2px;

    & + .m-md + .m-lt {
      margin-left: -2px;
    }
  }
}

.fn-co_sp_20 {
  & > .m-md {
    height: 18px;
    width: 100%;
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(166, 160, 26, 0.2),
      rgba(166, 160, 26, 0.2) 2px,
      transparent 0,
      transparent 4px
    );
  }
}

// 分隔符
.fn-co_spls_2 {
  height: 35px;
  display: flex;
  justify-content: center;
  & > .m-hb {
    position: relative;
    top: 23px;
    left: 4px;
    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 7.5px;
      height: 12.5px;
      background-color: #a8c7ea;
      border-top-left-radius: 50% 3.875px;
      border-top-right-radius: 50% 3.875px;
      left: 2.05px;
      top: 0px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 5.6px;
    }
  }
  & > .m-hs {
    position: relative;
    top: 3px;
    left: -40px;
    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 15px;
      height: 25px;
      background-color: #a8c7ea;
      border-top-left-radius: 50% 7.5px;
      border-top-right-radius: 50% 7.5px;
      left: 4.1px;
      top: 0px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 11.2px;
    }
  }
}

.fn-co_spls_3 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > .m-lt,
  .m-rt {
    width: 15px;
    height: 15px;
    border-radius: 50%;
  }
  & > .m-lt {
    background: #775fff;
    margin-right: 15px;
  }
  & > .m-rt {
    background: #f7ce2a;
  }
}

.fn-co_spls_4 {
  display: flex;
  justify-content: center;
  margin: 15px 5px 15px 5px !important;
  & > .m-lt {
    width: 30px;
    height: 15px;
    border: 1px solid;
    border-color: #4252be;
    border-radius: ~'30px/15px';
    transform: rotate(-45deg);
    &::before {
      content: '';
      display: inline-block;
      transform: rotate(45deg);
      width: 100px;
      height: 1px;
      background: #4252be;
      position: relative;
      top: -10px;
      left: -35px;
    }
  }
}

.fn-co_spls_5 {
  display: flex;
  justify-content: center;
  & > .m-rt,
  .m-ct,
  .m-lt {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 5px;
  }
  & > .m-lt {
    background: #f1d5d5;
    &::before,
    &::after {
      display: inline-block;
      position: relative;
      content: '';
      width: 7.5px;
      height: 12.5px;
      background-color: white;
      border-top-left-radius: 50% 3.875px;
      border-top-right-radius: 50% 3.875px;
      left: 8.05px;
      top: 3px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 5.6px;
    }
  }
  & > .m-ct {
    background: #fdeaaf;
    &::before,
    &::after {
      display: inline-block;
      position: relative;
      content: '';
      width: 7.5px;
      height: 12.5px;
      background-color: white;
      border-top-left-radius: 50% 3.875px;
      border-top-right-radius: 50% 3.875px;
      left: 8.05px;
      top: 3px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 5.6px;
    }
  }
  & > .m-rt {
    background: #c1dff4;
    &::before,
    &::after {
      display: inline-block;
      position: relative;
      content: '';
      width: 7.5px;
      height: 12.5px;
      background-color: white;
      border-top-left-radius: 50% 3.875px;
      border-top-right-radius: 50% 3.875px;
      left: 8.05px;
      top: 3px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 5.6px;
    }
  }
}

.fn-co_spls_6 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > .m-ct {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffd154;
    &::before {
      position: relative;
      top: 4px;
      left: 15px;
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-left: 15px solid #4a2517;
    }
  }
}

.fn-co_spls_7 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > .m-lt {
    width: 40px;
    height: 50px;
    background: #eef5fe;
    & > em {
      margin: 10px 0 0 7px;
      font-size: 20px;
    }
  }
  &::before {
    position: relative;
    top: -6px;
    left: 33px;
    z-index: 2;
    content: '';
    width: 40px;
    height: 50px;
    border: 1px solid black;
  }
}

.fn-co_spls_8 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > .m-lt {
    width: 40px;
    height: 50px;
    background: #eff4ff;
    text-align: center;
    & > em {
      font-size: var(--button-default-size, 17px);
      font-weight: 800;
    }
  }
  &::before {
    position: relative;
    top: 3px;
    left: -6px;
    content: '';
    width: 5px;
    height: 15px;
    background: #f65746;
  }
  &::after {
    position: relative;
    top: 33px;
    left: 5px;
    content: '';
    width: 5px;
    height: 15px;
    background: #f65746;
  }
}

.fn-co_spls_9 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > i {
    font-size: 20px;
    font-style: normal;
    position: relative;
    background: rgb(109, 167, 149);
    border-radius: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #6da795;
      position: absolute;
      display: block;
      right: -22px;
      border-radius: 20px 0 20px 0;
      top: 4px;
    }
    &:after {
      content: '';
      width: 8px;
      height: 9px;
      background: #6da795;
      position: absolute;
      display: block;
      right: -8px;
      border-radius: 10px 0 10px 0;
      top: -7px;
    }
  }
}

.fn-co_spls_20 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > .m-lt {
    width: 40px;
    height: 40px;
    background: #c0b3e7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    & > em {
      font-size: 25px;
      font-weight: 800;
      color: white;
    }
  }
  & > .m-rt {
    width: 60px;
    height: 10px;
    border: 1px solid;
    border-color: #c0b3e7 transparent transparent transparent;
    background: white;
    z-index: 2;
    transform: rotate(-45deg);
    position: relative;
    top: 27px;
    left: -39px;
  }
}

.fn-co_spls_21 {
  display: flex;
  justify-content: center;
  margin: 15px !important;
  & > .m-lt {
    width: 40px;
    height: 40px;
    background: #abbace;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    & > em {
      font-size: 25px;
      font-weight: 800;
      color: white;
    }
  }
  &::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #d8e2e9;
    position: relative;
    top: 23px;
    left: 70px;
  }
  &::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #abbace;
    position: relative;
    top: 13px;
    left: 47px;
  }
}

.fn-co_spls_10 {
  display: flex;
  justify-content: center;

  & > div {
    width: 60px;
    height: 70px;
    background-image: linear-gradient(to right, #597ade, #3d99eb);
    border-radius: 50% 50% 0 0;

    & > div {
      position: relative;
      top: 50%;
      left: 50%;
      transform: skewX(-10deg);

      &::before {
        top: 50%;
        content: '';
        position: absolute;
        margin-top: -1.5em;
        margin-left: -0.75em;
        border-top: 1em solid transparent;
        border-right: 0.5em solid white;
        border-bottom: 1em solid white;
        border-left: 0.5em solid transparent;
      }

      &::after {
        content: '';
        position: absolute;
        margin-left: -0.25em;
        border-top: 1em solid white;
        border-right: 0.5em solid transparent;
        border-bottom: 1em solid transparent;
        border-left: 0.5em solid white;
      }
    }
  }
}

.fn-co_spls_11 {
  display: flex;
  align-items: center;
  justify-content: center;

  & > div {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #f7ce2a;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;

    &::before,
    &::after {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      position: absolute;
    }

    &::before {
      background-color: #f15c19;
      left: -15px;
    }

    &::after {
      background-color: #39dbb7;
      right: -15px;
    }
  }
}

.fn-co_spls_12 {
  margin: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;

  & > div {
    width: 50px;
    height: 50px;
    background-color: #fae04a;
    border-radius: 50px;
    position: relative;

    &::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background-color: #000;
      position: absolute;
      top: 20px;
      right: 7px;
    }

    &::after {
      content: '';
      width: 6px;
      height: 18px;
      border-style: solid;
      border-width: 23px 2px 0px;
      border-color: rgb(0, 0, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
      display: inline-block;
      transform: rotate(30deg);
      position: absolute;
      top: -5px;
      right: -2px;
    }
  }
}

.fn-co_spls_13 {
  margin: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  & > div {
    width: 30px;
    height: 30px;
    border-bottom: 4px solid #ffa41e;
    border-right: 4px solid #ffa41e;
    transform: rotate(45deg);
    margin-bottom: 10px;
  }
}

.fn-co_spls_14 {
  //margin: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid #000;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;

    &::after {
      content: '';
      width: 30px;
      height: 30px;
      border-radius: 20px;
      background-color: #ffe34e;
      position: absolute;
      top: -5px;
      right: -5px;
      mix-blend-mode: multiply;
    }
  }

  &::before,
  &::after {
    content: '';
    width: 20%;
    height: 1px;
    display: inline-block;
    background-color: #000;
  }
}

.fn-co_spls_15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  & > .m-hd {
    height: 20px;
    width: 40px;
    border: 1px none #000;
    border-radius: 50px 50px 0 0;
    background-color: pink;
  }

  & > .m-bd {
    text-align: center;
    letter-spacing: 5px;
    & > div {
      display: inline-block;
      height: 8px;
      width: 8px;
      border: 1px none #000;
      border-radius: 50px;
      background-color: pink;
    }
  }
}

.fn-co_spls_16 {
  text-align: center;
  letter-spacing: 5px;
  & > div {
    display: inline-block;
    height: 12px;
    width: 12px;
    border: 1px none #000;
    border-radius: 50px;
    background-color: rgb(119, 95, 255);

    & + div {
      background-color: rgb(247, 206, 42);
    }
  }
}

.fn-co_spls_17 {
  text-align: center;
  transform: translateY(10px);
  & > div {
    display: inline-block;
    width: 16%;
    vertical-align: top;
    height: auto;
    border-top: 1px solid rgb(66, 82, 190);

    & > div {
      display: inline-block;
      transform: translateY(-80%) rotateZ(328deg);

      width: 26px;
      height: 13px;
      border: 1px solid rgb(66, 82, 190);
      border-radius: 50%;
    }
  }
}

.fn-co_spls_18 {
  text-align: center;
  & > div {
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px 6px 10px 6px;
    border-radius: 0px;
    border-left-color: rgba(255, 255, 255, 0);
    border-right-color: rgba(255, 255, 255, 0);
    border-top-color: rgba(255, 255, 255, 0);
    border-bottom-color: #21a557;
  }
}
.fn-co_spls_19 {
  display: flex;
  flex-direction: column;
  align-items: center;
  & > div {
    margin-top: 5px;
    width: 26px;
    height: 3px;
    border: 1px none #000;
    background-color: rgb(66, 82, 190);
  }
}

// 关注原文
.fn-co_fo_2 {
  border: 1px solid;
  border-color: transparent transparent #c1d6eb transparent;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: 10px !important;
  & > .m-wd-tp {
    & > em {
      font-size: 20px;
    }
    &::before,
    &::after {
      display: inline-block;
      content: '';
      width: 10px;
      height: 10px;
      background: #c1d6eb;
    }

    &::before {
      position: relative;
      top: 3px;
      left: -1px;
    }
    &::after {
      position: relative;
      top: -10px;
      left: -184px;
    }
  }
  & > .m-wd-bt {
    color: #c1d6eb;
    & > em {
      font-size: var(--button-default-size, 17px);
    }
    &::before,
    &::after {
      display: inline-block;
      content: '';
      width: 2px;
      height: 25px;
      background: #c1d6eb;
      transform: rotate(30deg);
    }
    &::before {
      position: relative;
      top: 4px;
      left: -5px;
    }
    &::after {
      position: relative;
      top: 4px;
      left: -166px;
    }
  }
}

.fn-co_fo_3 {
  margin: 15px !important;
  display: flex;
  justify-content: center;
  &::after,
  &::before {
    display: inline-block;
    content: '';
    width: 2px;
    height: 30px;
    background: black;
    transform: rotate(30deg);
  }
  &::before {
    position: relative;
    top: 0px;
    left: -30px;
  }
  &::after {
    position: relative;
    top: 0px;
    left: 30px;
  }
  & > .m-wd-tp {
    margin-right: 15px;
    & > em {
      font-size: var(--content-default-size, 15px);
      font-weight: 600;
    }
    &::after {
      display: inline-block;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffcf55;
      position: relative;
      left: 12px;
    }
  }
  & > .m-wd-bt {
    margin-left: 15px;
    & > em {
      font-size: var(--content-default-size, 15px);
      font-weight: 600;
    }
  }
}

.fn-co_fo_4 {
  margin: 15px !important;
  display: flex;
  justify-content: center;
  & > .m-wd-tp {
    padding: 5px 15px 5px 15px;
    margin-right: 10px;
    background: #93b06c;
    color: white;
  }
  & > .m-wd-bt {
    padding: 5px 15px 5px 15px;
    margin-left: 10px;
    border: 1px solid;
    border-color: #93b06c transparent #93b06c transparent;
    color: #93b06c;
  }
}

.fn-co_fo_5 {
  margin: 15px !important;
  display: flex;
  justify-content: center;
  padding-top: 30px !important;
  & > .m-wd-tp {
    color: #a8c7ea;
    margin-right: 10px;
    & > em {
      font-size: 20px;
      font-weight: 600;
    }
    &::before {
      display: inline-block;
      content: '';
      width: 100px;
      height: 1px;
      background: #a8c7ea;
      position: relative;
      top: -7px;
      left: -10px;
    }
  }
  & > .m-wd-bt {
    color: #a8c7ea;
    margin-left: 10px;
    & > em {
      font-size: 20px;
      font-weight: 600;
    }
    &::after {
      display: inline-block;
      content: '';
      width: 100px;
      height: 1px;
      background: #a8c7ea;
      position: relative;
      top: -7px;
      left: 8px;
    }
  }
  & > .m-hb {
    position: relative;
    top: 3px;
    left: -40px;
    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 15px;
      height: 25px;
      background-color: #f9776b;
      border-top-left-radius: 50% 7.5px;
      border-top-right-radius: 50% 7.5px;
      left: 216.1px;
      top: -37px;
      transform: rotate(-45deg);
    }
    &::after {
      transform: rotate(45deg);
      left: 223.2px;
    }
  }
}

.fn-co_fo_6 {
  margin: 15px 15px 30px 40px !important;
  display: flex;
  justify-content: start;
  &::before,
  &::after {
    content: '';
    width: 15px;
    height: 15px;
  }
  &::before {
    background: #c3daf1;
    z-index: 2;
    position: relative;
    top: 5px;
    left: -13px;
  }
  &::after {
    background: #fff2b4;
    position: relative;
    top: 12px;
    left: -440px;
  }
  & > .m-wd-tp {
    color: #a8c7ea;
    margin-right: 5px;
    & > em {
      font-size: 20px;
      font-weight: 400;
    }
  }
  & > .m-wd-bt {
    color: #a8c7ea;
    margin-left: 5px;
    & > em {
      font-size: 20px;
      font-weight: 400;
    }
    &::after {
      display: inline-block;
      content: '';
      width: 180px;
      height: 1px;
      background: #a8c7ea;
      position: relative;
      top: 13px;
      left: -225px;
    }
  }
}

.fn-co_fo_10 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    margin: 15px;
    position: relative;
    background-color: #eff4ff;
    padding: 10px;
    font-weight: bold;

    &::before,
    &::after {
      content: '';
      background-color: #f00;
      width: 8px;
      display: block;
      height: 15px;
      position: absolute;
    }

    &::before {
      top: -5px;
      left: -20px;
    }

    &::after {
      right: -20px;
    }
  }
}

.fn-co_fo_11 {
  & > .m-ct {
    & > :nth-child(1) {
      font-size: var(--title-default-size, 16px);
    }
  }
}

.fn-co_fo_12 {
  margin: auto !important;
  padding: 10px !important;

  & > div {
    color: #315ea3;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #315ea3;
    font-size: var(--button-default-size, 17px);
    position: relative;

    &::after {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background-color: #315ea3;
      display: inline-block;
      position: absolute;
      bottom: -3px;
    }
  }
}

.fn-co_fo_13 {
  & > div {
    display: flex;
    justify-content: center;
    align-items: center;

    &::before,
    &::after {
      content: '';
      width: 0;
      height: 0;
      display: inline-block;
      border: 10px solid transparent;
    }

    &::before {
      border-left: 10px solid #fb8581;
    }

    &::after {
      border-right: 10px solid #84b4ee;
    }
  }
}

.fn-co_fo_14 {
  margin: auto !important;
  padding: 10px;

  & > div {
    letter-spacing: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--title-default-size, 16px);

    &::before {
      width: 50px;
      height: 30px;
      border-radius: 50%;
      content: '';
      display: inline-block;
      background-image: linear-gradient(to bottom right, #f4d7e8, #c8dcfa);
      transform: rotate(-45deg);
      position: absolute;
      top: 10px;
      mix-blend-mode: multiply;
    }

    &::after {
      content: '';
      width: 80px;
      height: 1px;
      background-color: #dac9f5;
      display: inline-block;
    }
  }
}

.fn-co_fo_15 {
  display: flex;
  justify-content: start;
  align-items: center;
  & > .m-lt {
    display: inline-block;
    border: 1px solid rgba(97, 155, 139, 0.09);
    background-color: rgba(97, 155, 139, 0.09);
    width: 35px;
    height: 35px;
    line-height: 32px;
    margin: 0 10px;
    border-radius: 100%;
  }

  .m-dt {
    display: inline-block;
    width: 5px;
    height: 5px;
    vertical-align: top;
    overflow: hidden;
    border-width: 0px;
    border-radius: 227px;
    border-style: none;
    border-color: rgb(62, 62, 62);
    background-color: rgb(37, 105, 117);
    position: relative;
    transform: translateY(6px);
  }

  & > .m-rt {
    min-width: 10%;
    transform: rotateX(180deg);
    text-align: center;
  }

  & > .m-md {
    font-size: var(--button-default-size, 17px);
    color: rgb(0, 66, 91);
    border-bottom: 1px solid #08678b;
    font-weight: bold;
    padding: 5px;
  }
}

.fn-co_fo_16 {
  background-color: rgba(175, 194, 120, 0.17);
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;

  & > .m-lt {
    display: inline-block;

    & > .m-dt {
      width: 6px;
      height: 6px;
      border-radius: 60px;
      background-color: rgb(255, 255, 255);
      margin-top: 10px;
    }
  }

  & > .m-md {
    display: inline-block;
    padding: 0 15px;
    font-size: 20px;
    line-height: 50px;
    color: rgb(175, 194, 120);
  }
}

.fn-co_fo_17 {
  margin: auto !important;
  padding: 10px;

  & > div {
    display: flex;
    align-items: baseline;
    z-index: 10;

    & > .m-bf {
      background-color: #f0f1ff;
      padding: 16px 6px 2px 18px;
      color: #6669a9;
      font-size: var(--title-default-size, 16px);
    }

    & > .m-af {
      background-color: #6669a9;
      padding: 2px 100px 2px 6px;
      border-radius: 0 14px 14px 0;
      color: white;
      font-size: var(--title-default-size, 16px);
    }
  }

  & > em {
    padding: 0;
    position: relative;
    display: inline-block;
    border-left: 1px solid #6669a9;
    border-top: 1px solid #6669a9;
    height: 36px;
    width: 250px;
    top: -17px;
    margin-top: -36px;
    left: 10px;
  }
}

.fn-co_fo_18 {
  & > .m-m {
    & > .m-hd {
      text-align: center;
      & > .m-lt {
        display: inline-block;
        color: white;
        font-size: var(--button-default-size, 17px);
        font-weight: bold;
        vertical-align: middle;
        min-width: 10%;
        background-color: #452724;
        padding: 8px 21px;
      }
      & > .m-nk {
        display: inline-block;
        color: rgb(69, 39, 36);
        font-size: var(--title-default-size, 16px);
        font-weight: bold;
        margin: 10px 10px;
        padding: 15px 0;
        border-bottom: 2px solid rgb(69, 39, 36);
        text-align: left;
      }
    }
  }
}

.fn-co_fo_19 {
  & > .m-m {
    & > .m-lt {
      vertical-align: top;
      display: inline-block;
      padding: 10px;
      & > div {
        width: 14px;
        height: 14px;
        border: 1px none #f0f1ff;
        background-color: #01b7cc;
        margin-top: 10px;
      }
    }
    & > .m-rt {
      display: inline-block;
      padding: 20px 0 10px 10px;
      border-bottom: 1px solid #01b7cc;
      & > .m-lt {
        display: inline-block;
        font-size: 20px;
        color: rgb(69, 39, 36);
        font-weight: bold;
      }
      & > .m-rt {
        display: inline-block;
        font-size: var(--title-default-size, 16px);
        color: rgb(171, 204, 231);
      }
    }
  }
}

.fn-co_fo_20 {
  text-align: center;
  & > .m-m {
    display: inline-block;
    & > .m-lt {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      font-weight: bold;
      color: rgb(52, 54, 121);
    }
    & > .m-rt {
      vertical-align: middle;
      display: inline-block;
      font-size: var(--title-default-size, 16px);
      color: rgb(52, 54, 121);
      & > div {
        width: 50px;
        text-align: right;

        & + div {
          text-align: center;
        }
      }
    }
  }
}

// 二维码
.fn-co_qr_2 {
  margin: 15px !important;
  display: flex;
  justify-content: space-around;
  background: #f3f8fc;
  & > .m-lt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > div {
      margin: 5px 0 5px 20px;
      width: 10px;
      height: 10px;
      background: #abcce7;
    }
  }
  & > .m-ct {
    & > img {
      margin-top: 25px;
      height: 70%;
    }
  }
  & > .m-bt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > em {
      margin-top: 15px;
      font-size: var(--desc-default-size, 12px);
    }
  }
}

.fn-co_qr_3 {
  margin: 15px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  & > .m-tp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    &::after {
      content: '';
      display: inline-block;
      width: 60px;
      height: 3px;
      background: #e197a1;
      position: relative;
      top: 8px;
    }
  }
  & > .m-ct {
    background: #6d9bd1;
    padding: 15px;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  & > .m-bt {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    & > em {
      font-size: var(--desc-default-size, 12px);
    }
    & > .m-bt-odd {
      background: #e197a1;
      color: white;
    }
  }
}

.fn-co_qr_4 {
  margin: 15px !important;
  display: flex;
  justify-content: space-around;
  &::before,
  &::after {
    content: '';
    width: 1px;
    height: 80%;
    background: black;
  }
  &::before {
    position: relative;
    top: 10px;
    left: 0px;
  }
  &::after {
    position: relative;
    top: 10px;
    left: 0px;
  }
  & > .m-lt {
    background: #eef5fe;
    padding: 20px;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  & > .m-rt {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    & > em {
      &:nth-child(1) {
        background: #eef5fe;
        padding: 10px;
        font-size: var(--content-default-size, 15px);
        font-weight: 600;
      }
      &:nth-child(2) {
        font-size: var(--desc-default-size, 12px);
      }
    }
  }
}

.fn-co_qr_5 {
  margin: 15px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  & > .m-lt {
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 70%;
    }
    &::before,
    &::after {
      content: '';
      width: 2px;
      height: 100%;
      background: #a9cff5;
    }
    &::before {
      position: relative;
      top: 0px;
      left: -35px;
    }
    &::after {
      position: relative;
      top: 0px;
      left: 35px;
    }
  }
  & > .m-ct {
    display: flex;
    &::before,
    &::after {
      display: block;
      content: '';
      width: 0px;
      height: 0px;
    }
    &::before {
      border: 10px solid;
      border-color: transparent transparent transparent #ffd853;
      position: relative;
      top: -56px;
      left: -70px;
    }
    &::after {
      border: 10px solid;
      border-color: transparent #ffd853 transparent transparent;
      position: relative;
      top: -56px;
      left: 70px;
    }
  }
  & > .m-rt {
    display: flex;
    flex-direction: column;
    align-items: center;
    & > em {
      font-size: var(--desc-default-size, 12px);
      &:nth-child(1) {
        margin-bottom: 10px;
      }
    }
  }
}

.fn-co_qr_6 {
  margin: 15px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  & > .m-lt {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 10px 0;
    background: #eff4ff;
    img {
      width: 70%;
    }
    &::before,
    &::after {
      display: block;
      content: '';
      width: 10px;
      height: 20px;
      background: #f65746;
    }
    &::before {
      position: relative;
      top: -47px;
      left: -21px;
    }
    &::after {
      position: relative;
      top: 47px;
      left: 21px;
    }
  }
  & > .m-rt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    & > em {
      font-size: var(--desc-default-size, 12px);
      &:nth-child(1) {
        margin-bottom: 10px;
      }
    }
  }
}

.fn-co_qr_10 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > .m-tl {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px;
    font-size: var(--title-default-size, 16px);

    & > div {
      border-radius: 50%;
      margin: 10px;
    }

    & > :nth-child(3n + 1) {
      width: 30px;
      height: 30px;
      background-color: #ffcc5b;
    }

    & > :nth-child(3n + 2) {
      width: 30px;
      height: 30px;
      background-color: #acc180;
    }

    & > :nth-child(3) {
      width: 10px;
      height: 10px;
      background-color: #ffcc5b;
      margin: 10px;
    }
  }

  & > .m-bd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & > img {
      max-width: 100%;
    }
  }

  & > em {
    display: inline-block;
    color: #acc180;
    font-size: var(--button-default-size, 17px);
  }

  & > .m-ft {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 5px;

    & > div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    & > :nth-child(1) {
      em {
        font-size: var(--title-default-size, 16px);

        &:nth-child(1) {
          font-weight: bold;
        }
      }
    }

    & > :nth-child(2) {
      em {
        font-size: var(--title-default-size, 16px);

        &:nth-child(1) {
          font-weight: bold;
        }
      }
    }
  }
}

.fn-co_qr_11 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  em {
    display: inline-block;
  }

  & > .m-tl {
    display: inline-block;
    color: #b2c1d2;
    font-size: var(--button-default-size, 17px);
    border-bottom: 1px solid #b2c1d2;
    position: relative;
    margin-bottom: 15px;

    &::before,
    &::after {
      content: '';
      width: 30px;
      height: 2px;
      background-color: #b2c1d2;
      transform: rotate(-45deg);
      display: inline-block;
      margin-right: 10px;
      position: absolute;
      left: -40px;
    }

    &::before {
      top: 15px;
    }

    &::after {
      top: 30px;
    }
  }

  & > .m-bd {
    border: 1px solid #b2c1d2;
    padding: 10px;
  }

  & > .m-ft {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;

    & > :nth-child(odd) {
      font-weight: bold;
      font-size: var(--title-default-size, 16px);
    }

    & > :nth-child(even) {
      font-size: var(--button-default-size, 17px);
      color: #b2c1d2;
    }
  }
}

.fn-co_qr_12 {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;

  & > .m-bd {
    flex: 1;

    & > img {
      max-width: 100%;
    }
  }

  & > .m-bd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fef6f6;
    height: auto;
    flex: 1;
    margin-left: 15px;
    padding: 15px;

    & > :nth-child(1) {
      display: inline-block;
      border-bottom: 1px solid #eb4949;
      font-size: var(--button-default-size, 17px);
      margin-bottom: 20px;

      & > :nth-child(odd) {
        color: #eb4949;
        margin: 10px;
      }
    }
  }

  & > em {
    display: inline-block;
  }
}

.fn-co_qr_13 {
  display: flex;
  justify-content: center;
  align-items: center;

  & > .m-bd {
    margin-right: 30px;
  }
}

.fn-co_qr_14 {
  background-image: repeating-linear-gradient(
    -45deg,
    white,
    #f8f7fe 5px,
    transparent 0,
    transparent 15px
  );
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px !important;

  & > .m-img {
    flex: 1;

    img {
      max-width: 100%;
    }
  }

  & > .m-bd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;

    & > em {
      color: #775fff;
      display: inline-block;

      &:nth-child(1) {
        font-size: var(--button-default-size, 17px);
        font-weight: bold;
        position: relative;

        &::before {
          width: 10px;
          height: 10px;
          border-radius: 10px;
          background-color: #ffe22e;
          display: inline-block;
          content: '';
          position: absolute;
          left: -20px;
          top: 15px;
        }
      }
    }
  }
}

.fn-co_qr_15 {
  & > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 2px solid #7daeed;
    border-radius: 10px;
    box-shadow: 4px 4px 2px #7daeed;

    & > .m-img {
      flex: 1 1 auto;
      position: relative;
      left: 10px;
      width: 258px;
      & > img {
        max-width: 100%;
      }
    }

    & > .m-bd {
      & > em {
        padding: 0 8px;
        display: block;
        color: #7daeed;
      }

      & > .m-txt {
        font-size: 24px;
        font-weight: bolder;
      }

      & > div {
        color: white;
        background-color: #7daeed;
        padding: 2px 8px;
        border-radius: 3px;
      }
    }

    & > .u-rd {
      background-color: #e4f2f5;
      width: 20px;
      height: 20px;
      border: 1px solid #7daeed;
      border-radius: 50%;
      position: relative;
      left: -10px;
      top: -110px;
    }
  }
}

.fn-co_qr_16 {
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    & > .m-hd {
      font-size: var(--button-default-size, 17px);
      font-weight: bold;
      border: 1px solid black;
      padding: 15px;
      width: 60%;
      text-align: center;
    }
    & > .m-img {
      text-align: center;
      border: 1px solid black;
      width: 60%;
    }
    & > :nth-child(3) {
      font-weight: unset;
    }
    & > :nth-child(4) {
      width: 60px;
      height: 26px;
      vertical-align: top;
      border: 1px solid rgb(62, 62, 62);
      border-radius: 50%;
      transform: rotateZ(328deg);
      align-self: flex-end;
      margin: -12px 63px 0 0;
    }
  }
}

.fn-co_qr_17 {
  & > div {
    & > .m-img {
      display: inline-block;
      width: 129px;
      & > img {
        width: 100%;
        height: auto;
      }
    }
    & :nth-child(2) {
      vertical-align: middle;
      margin-left: 20px;
      display: inline-block;
      & :nth-child(1) {
        display: flex;
        flex-direction: column;
        & :nth-child(2) {
          font-weight: 400;
        }
      }
    }
  }
}

.fn-co_qr_18 {
  text-align: center;
  & > .fn-cd_bc_19 {
    display: inline-block;
    width: 40%;

    & > .m-m {
      & > .m-bd {
        padding: unset;
        & > img {
          width: 100%;
        }
      }
      & > .m-ft {
        width: 100%;
        & > section {
          width: 100%;
          background-color: #fef3e3;
          padding-right: 5px;
        }
      }
    }
  }
}

.fn-co_qr_19 {
  background-color: rgb(244, 247, 249);
  text-align: center;
  & > .m-hd {
    text-align: center;
    & > .m-bd {
      display: inline-block;
      text-align: center;
      margin-top: 30px;
      padding: 20px 0;
      width: 70%;
      border-top: 1px solid rgb(159, 168, 185);
      & > .m-lt {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: var(--title-default-size, 16px);
        color: rgb(159, 168, 185);
      }
      & > .m-rt {
        display: inline-block;
        width: 35%;
        margin-left: 40px;
        & > img {
          width: 100%;
        }
      }
    }
  }

  & > .m-ft {
    margin-bottom: 30px;
    display: inline-block;
    width: 70%;
    text-align: left;
    & > .m-hd {
      display: inline-block;
      width: auto;
      min-width: 30%;
      font-size: 20px;
      font-weight: bold;
      color: rgb(159, 168, 185);
      border-top: 1px solid rgb(159, 168, 185);
      text-align: center;
      padding: 10px 10px 0 0;
    }
    & > :nth-child(2) {
      display: inline-block;
      transform: translateY(-10px);
      width: 12px;
      height: 12px;
      border: 1px none rgb(159, 168, 185);
      background-color: rgb(159, 168, 185);
      border-radius: 50%;
    }

    & > .m-ft {
      border-bottom: 1px solid rgb(159, 168, 185);
      color: rgb(159, 168, 185);
      padding-bottom: 10px;
    }
  }
}