  /* 等页面制作完，生成对应的字体文件 */
  @font-face {
    font-family: siyuanregular;
    src: ,
      ,
      ,
      ;
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: siyuanbold;
    src: ,
      ,
      ,
      ;
    font-weight: 400;
    font-style: normal;
  }

  /* 数字/英文字体 */
  @font-face {
    font-family: 'manroperegular';
    src: ,
      ,
      ,
      ;
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'manropebold';
    src: ,
      ,
      ,
      ;
    font-weight: 400;
    font-style: normal;
  }

  body {
    font-family: manroperegular, siyuanregular, sans-serif;
  }

  .bold {
    font-family: manropebold, siyuanbold, sans-serif;
    font-weight: bold;
  }

  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* 图片通用 */
  .banner .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  /* pc端图片 */
  @media (min-width: 768px) {
    .banner {
      position: relative;
      width: 100%;
      background-size: 100% 100.1%;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .banner_1 {
      margin-top: 40px;
    }

    .banner_2 {
      padding-top: 52.86%;
      background-image: ;
    }

    .banner_3 {
      padding-top: 72.03%;
    }

    .banner_4 {
      padding-top: 73.65%;
    }

    .banner_5 {
      padding-top: 79.38%;
    }

    .banner_6 {
      padding-top: 72.24%;
    }

    .banner_7 {
      padding-top: 72.24%;
      /* padding-top: 73.65%; */
    }

    .banner_8 {
      padding-top: 72.24%;
      /* padding-top: 79.83%; */
    }

    .banner_9 {
      padding-top: 70.83%;
    }

    .banner_10 {
      padding-top: 48.33%;
      /* padding-top: 72.24%; */
    }

    .banner_11 {
      padding-top: 52.5%;
      /* padding-top: 98.96%; */
    }

    .banner_12 {
      padding-top: 98.96%;
    }

    .banner_13 {
      padding-top: 61.98%;
    }

    .banner_14 {
      padding-top: 73.65%;
    }

    .banner_15 {
      padding-top: 57.66%;
      /* padding-top: 61.97%; */
    }

    .banner_16 {
      padding-top: 61.82%;
    }

    .banner_17 {
      padding-top: 48.33%;

    }

    .banner_18 {
      padding-top: 33.85%;
    }

    .banner_19 {
      margin-top: 40px;
      width: 100%;
      height: auto;
    }

    /* 手写笔 */
    /* .banner_19 {
      margin-top: 40px;
    }

    .banner_20 {
      padding-top: 54.69%;
      background-image: ;
    }

    .banner_21 {
      padding-top: 67.03%;
    }

    .banner_22 {
      padding-top: 65.52%;
    }

    .banner_23 {
      padding-top: 68.91%;
    }

    .banner_24 {
      padding-top: 124.95%;
    }

    .banner_25 {
      padding-top: 63.59%;
    }

    .banner_26 {
      padding-top: 60.05%;
    }

    .banner_27 {
      padding-top: 33.85%;
    }

    .banner_28 {
      margin-top: 40px;
      width: 100%;
      height: auto;
    } */
  }

  /* 移动端图片 */
  @media (max-width: 767px) {
    .banner {
      position: relative;
      width: 100%;
      background-size: 100% 100.1%;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .banner_1 {
      margin-top: 40px;
      width: 100%;
      height: auto;
    }

    .banner_2 {
      padding-top: 262%;
      background-image: ;
    }

    .banner_3 {
      padding-top: 300%;
    }

    .banner_4 {
      padding-top: 207.73%;
    }

    .banner_5 {
      padding-top: 153.33%;
    }

    .banner_6 {
      padding-top: 205.33%;
    }

    .banner_7 {
      padding-top: 205.33%;
    }

    .banner_8 {
      padding-top: 273.33%;
    }

    .banner_9 {
      padding-top: 200%;
    }

    .banner_10 {
      padding-top: 207.57%;
    }

    .banner_11 {
      padding-top: 411.07%;
    }

    .banner_12 {
      padding-top: 366.67%;
    }

    .banner_13 {
      padding-top: 206.67%;
    }

    .banner_14 {
      padding-top: 210.27%;
    }

    .banner_15 {
      padding-top: 174.13%;
    }

    .banner_16 {
      padding-top: 288%;
    }

    .banner_17 {
      padding-top: 152%;
    }

    .banner_18 {
      padding-top: 46.67%;
    }

    .banner_19 {
      margin-top: 40px;
      width: 100%;
      height: auto;
    }

    /* 手写笔 */
    /* .banner_19 {
      margin-top: 40px;
      width: 100%;
      height: auto;
    }

    .banner_20 {
      padding-top: 156.67%;
      background-image: ;
    }

    .banner_21 {
      padding-top: 156.67%;
    }

    .banner_22 {
      padding-top: 148.13%;
    }

    .banner_23 {
      padding-top: 145.73%;
    }

    .banner_24 {
      padding-top: 201.07%;
    }

    .banner_25 {
      padding-top: 165.33%;
    }

    .banner_26 {
      padding-top: 160.8%;
    }

    .banner_27 {
      padding-top: 50.13%;
    }

    .banner_28 {
      margin-top: 40px;
      width: 100%;
      height: auto;
    } */
  }

  /* pc端样式 */
  @media all and (min-width: 768px) {
    .max {
      display: block !important;
    }

    .min {
      display: none !important;
    }

    .size-68 {
      font-size: 3.54vw;
    }

    .size-64 {
      font-size: 3.33vw;
    }

    .size-60 {
      font-size: 3.13vw;
    }

    .size-50 {
      font-size: 2.6vw;
    }

    .size-48 {
      font-size: 2.5vw;
    }

    .size-40 {
      font-size: 2vw;
    }

    .size-36 {
      font-size: 1.88vw;
    }

    .size-30 {
      font-size: 1.56vw;
    }

    .size-26 {
      font-size: 1.35vw;
    }

    .size-24 {
      font-size: 1.25vw;
    }

    .text {
      width: 100%;
      position: absolute;
      padding: 0;
      margin: 0;
    }

    .title_1 {
      margin-bottom: 0.3vw;
    }

    .title_2 {
      color: #666666;
    }

    .banner_2 .text_1 {
      top: 6.29vw;
    }

    .banner_2 .text_1 p {
      width: 100vw;
      text-align: center;
      letter-spacing: 0.17vw;
    }

    .banner_3 .text_1 {
      top: 6.29vw;
    }

    .banner_3 .text_1 p {
      width: 100vw;
      text-align: center;
      letter-spacing: 0.17vw;
    }

    .banner_4 .text_1 {
      top: 19.83vw;
      text-align: center;
    }

    .banner_5 .text_1 {
      top: 4.21vw;
      text-align: center;
    }

    .banner_6 .text_1 {
      top: 19.83vw;
      text-align: center;
    }

    .banner_6 .text_2 {
      top: 35.83vw;
      left: 33.28vw
    }

    .banner_6 .text_2 .title_2 {
      display: flex;
    }

    .banner_6 .text_2 p {
      margin-right: 14.7vw
    }

    .banner_7 .text_1 {
      top: 19.83vw;
      text-align: center;
    }

    .banner_8 .text_1 {
      top: 19.83vw;
      text-align: center;
    }

    .banner_9 .text_1 {
      top: 19.83vw;
      text-align: center;
    }

    .banner_10 .text_1 {
      top: 4.21vw;
      text-align: center;
    }

    .banner_11 .text_1 {
      top: 4.21vw;
      text-align: center;
    }


    .banner_12 .text_1 {
      top: 30vw;
      left: 13vw;
    }

    .banner_12 .text_2 {
      bottom: 14vw;
      left: 60vw;
    }

    .banner_13 .text_1 {
      top: 4.63vw;
      left: 20.05vw
    }

    .banner_13 .text_2 {
      top: 22.6vw;
      left: 20.05vw;
    }

    .banner_13 .text_2 .title_1 {
      margin-top: 3.6vw;
      margin-bottom: 0;
    }

    .banner_13 .text_2 .title_2 {
      margin-top: -0.5vw;
      margin-bottom: 5.55vw;
    }

    .banner_13 .text_3 {
      top: 16.6vw;
      left: 20.05vw;
    }

    .banner_13 .text_3 .title_1 {
      color: #0087e6;
    }

    .banner_13 p {
      cursor: pointer;
    }

    .banner_14 .text_1 {
      top: 19vw;
      text-align: center;
    }

    .banner_14 .text_1 .title_1 {
      color: #fff !important;
    }

    .banner_14 .text_1 .title_2 {
      color: #fff !important;
    }

    .banner_15 .text_1 {
      top: 3.8vw;
      text-align: center;
    }

    .banner_16 .text_1 {
      top: 5.79vw;
      text-align: end;
      right: 10.46vw
    }

    .banner_16 .text_2 {
      top: 32.5vw;
      text-align: end;
      right: 10.46vw;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .banner_16 .text_2 .text-item {
      display: flex;
      margin-bottom: 4.1vw;
    }

    .banner_16 .text_2 .text-items {
      margin-left: 3.13vw;
    }

    .banner_17 .text_1 {
      top: 6.29vw;
      text-align: center;
      color: #ffffff;
    }

    .banner_18 .text_1 {
      top: 14vw;
      left: 63vw;
      width: 18vw;
      height: 4vw;
      cursor: pointer;
    }

    /* .banner_20 .text_1 {
      top: 4.29vw;
    }

    .banner_20 .title_1 p {
      text-align: center;
    }

    .banner_21 .text_1 {
      top: 18.46vw;
      left: 75.57vw;
    }

    .banner_21 .text_2 {
      top: 44.46vw;
      left: 75.57vw
    }

    .banner_21 .text_3 {
      top: 41.46vw;
      left: 75.57vw;
      width: 6.3vw;
      height: 0.47vw;
      background-color: #15c0e4;
      border-radius: 0.16vw;
    }

    .banner_22 .text_1 {
      top: 5.29vw;
      text-align: center;
    }

    .banner_22 .title_2 {
      color: rgb(29, 29, 29);
    }

    .banner_23 .text_1 {
      top: 5.29vw;
      text-align: center;
    }

    .banner_23 .title_2 {
      color: rgb(29, 29, 29);
    }

    .banner_24 .text_1 {
      top: 5.29vw;
      text-align: center;
    }

    .banner_24 .title_2 {
      color: rgb(29, 29, 29);
    }

    .banner_25 .text_1 {
      top: 5.29vw;
      text-align: center;
    }

    .banner_25 .title_2 {
      color: rgb(29, 29, 29);
    }

    .banner_26 .text_1 {
      top: 5.29vw;
      text-align: center;
    }

    .banner_26 .title_2 {
      color: rgb(29, 29, 29);
    }

    .banner_27 .text_1 {
      top: 14vw;
      left: 53vw;
      width: 31vw;
      height: 5vw;
      cursor: pointer;
    } */

    .blue_box {
      color: rgb(0, 150, 255);
    }

    #parameter,
    #word {
      display: none;
    }
  }

  /* 移动端样式 */
  @media all and (max-width: 767px) {
    .max {
      display: none !important;
    }

    .min {
      display: block !important;
    }

    .size-68 {
      font-size: 9.07vw;
    }

    .size-60 {
      font-size: 8vw;
    }

    .size-58 {
      font-size: 7.73vw;
    }

    .size-52 {
      font-size: 6.93vw;
    }

    .size-50 {
      font-size: 6.4vw;
    }

    .size-48 {
      font-size: 6vw;
    }

    .size-40 {
      font-size: 5vw;
    }

    .size-35 {
      font-size: 4.67vw;
    }

    .size-30 {
      font-size: 4vw;
    }

    .size-26 {
      font-size: 3.47vw;
    }

    .text {
      width: 100%;
      position: absolute;
      padding: 0;
      margin: 0;
    }

    .title_1 {
      margin-bottom: 2.33vw;
    }

    .title_2 {
      color: #666666;
    }

    /* p {
      text-align: justify;
    } */

    .banner_2 .text_1 {
      top: 13.67vw;
      text-align: center;
    }

    .banner_3 .text_1 {
      top: 13.33vw;
      text-align: center;
    }

    .banner_4 .text_1 {
      top: 57.47vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_5 .text_1 {
      top: 12.33vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_6 .text_1 {
      top: 56.83vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_6 .text_2 {
      top: 109.83vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_6 .text_2 .title_2 {
      display: flex;
    }

    .banner_6 .text_2 .title_2>:first-child {
      margin-right: 32.7vw
    }

    .banner_7 .text_1 {
      top: 56.47vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_8 .text_1 {
      top: 58.33vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_9 .text_1 {
      top: 62.47vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_10 .text_1 {
      top: 12.33vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_11 .text_1 {
      top: 10.33vw;
      left: 9.07vw;
    }

    .banner_12 .text_1 {
      top: 63.6vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_12 .text_2 {
      top: 220vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_13 .text_1 {
      top: 11.67vw;
      left: 9.07vw;
    }

    .banner_13 .text_2 {
      top: 55.6vw;
      left: 9.07vw;
    }

    .banner_13 .text_2 .title_1 {
      margin-top: 3.5vw;
      margin-bottom: 0;
    }

    .banner_13 .text_2 .title_2 {
      margin-bottom: 13.05vw;
    }

    .banner_13 .text_3 {
      top: 39.6vw;
      left: 9.07vw;
    }

    .banner_13 .text_3 .title_1 {
      color: #0087e6;
    }

    .banner_14 .text_1 {
      top: 59.47vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_14 .title_1 {
      color: #fff;
    }

    .banner_14 .title_2 {
      color: #fff;
    }

    .banner_15 .text_1 {
      top: 7.33vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_16 .text_1 {
      top: 9.67vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_16 .text_2 {
      top: 82.67vw;
      left: 9.07vw;
      width: 84vw;
    }

    .banner_16 .text-item {
      display: flex;
    }

    .banner_16 .text-item>:first-child {
      margin-right: 13vw;
    }

    .banner_16 .text-items {
      margin-bottom: 9.3vw;
    }

    .banner_16 .title_1 {
      margin-bottom: 0;
    }

    .banner_17 .text_1 {
      top: 13.83vw;
      text-align: center;
    }

    .banner_18 .text_1 {
      top: 18vw;
      left: 62vw;
      width: 30vw;
      height: 8vw;
    }

    .banner_20 .text_1 {
      top: 13.33vw;
      text-align: center;
    }

    .banner_21 .text_1 {
      top: 38.2vw;
      left: 72.8vw;
    }

    .banner_21 .text_2 {
      top: 101.1vw;
      left: 72.8vw;
    }

    .banner_21 .text_3 {
      top: 95.2vw;
      left: 74.1vw;
      width: 13.73vw;
      height: 0.8vw;
      background-color: #15c0e4;
      border-radius: 0.4vw;
    }

    .banner_22 .text_1 {
      top: 13.33vw;
      text-align: center;
    }

    .banner_22 .title_2 {
      width: 74.27vw;
      margin: 0 auto;
      color: rgb(29, 29, 29);
    }

    .banner_23 .text_1 {
      top: 10.33vw;
      text-align: center;
    }

    .banner_23 .title_2 {
      width: 74.27vw;
      margin: 0 auto;
      color: rgb(29, 29, 29);
    }

    .banner_24 .text_1 {
      top: 13.33vw;
      text-align: center;
    }

    .banner_24 .title_2 {
      width: 74.27vw;
      margin: 0 auto;
      color: rgb(29, 29, 29);
    }

    .banner_25 .text_1 {
      top: 13.33vw;
      text-align: center;
    }

    .banner_25 .title_2 {
      width: 74.27vw;
      margin: 0 auto;
      color: rgb(29, 29, 29);
    }

    .banner_26 .text_1 {
      top: 11.33vw;
      text-align: center;
    }

    .banner_26 .title_2 {
      width: 45.27vw;
      margin: 0 auto;
      color: rgb(29, 29, 29);
    }

    .banner_27 .text_1 {
      top: 21vw;
      left: 59vw;
      width: 34vw;
      height: 8vw;
    }

    .blue_box {
      color: rgb(0, 150, 255);
    }

    #parameter,
    #word {
      display: none;
    }
  }

  .rb_btn_slidedown {
    -webkit-transform: translatey(-160px);
    transform: translatey(-160px);
  }

  /* 文字动画 */
  @-webkit-keyframes text-animate {
    0% {
      opacity: 0;
      -webkit-transform: translatey(30px);
      transform: translatey(30px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translatey(0);
      transform: translatey(0);
    }
  }

  @keyframes text-animate {
    0% {
      opacity: 0;
      -webkit-transform: translatey(30px);
      transform: translatey(30px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translatey(0);
      transform: translatey(0);
    }
  }

  .text-move-after {
    opacity: 0;
  }

  .text-move-delay-after {
    opacity: 0;
  }

  .text-move {
    opacity: 0;
  }

  .text-move-delay {
    opacity: 0;
  }

  .text-move-delayer {
    opacity: 0;
  }

  .text-animate {
    -webkit-animation: text-animate ease-out 0.7s forwards;
    animation: text-animate ease-out 0.7s forwards;
  }

  .text-animate-delay {
    -webkit-animation: text-animate ease-out 0.7s 0.5s forwards;
    animation: text-animate ease-out 0.7s 0.5s forwards;
  }

  .text-animate-delayer {
    -webkit-animation: text-animate ease-out 0.7s 1s forwards;
    animation: text-animate ease-out 0.7s 1s forwards;
  }


  @media screen and (max-width: 767px) {
    .player-mask .player {
      width: 100%;
    }

    .player-mask .player .close {
      top: -40px;
      right: 10px;
    }
  }

  /* 蒙版动画 */
  .mask {
    opacity: 0;
    transition: opacity 0.3s;
  }

  .mask.mask-show {
    opacity: 1;
  }

  .mask-text {
    opacity: 0;
  }