@charset "UTF-8";
* {
  padding: 0;
  margin: 0; }

html, body {
  width: 100%;
  height: 100%; }

body {
  overflow: hidden;
  font-family: 'Heiti SC',"黑体","STHeiti","Microsoft YaHei","PingFang SC"; }

a, img {
  -webkit-touch-callout: none;
  /* 使用 !important 确保覆盖浏览器或其他样式 */
  /* 禁止长按链接与图片弹出菜单 */ }

img {
  outline: none;
  border: none;
  user-select: none;
  -webkit-user-select: none; }

.fixed {
  position: fixed; }

.abs {
  position: absolute; }

.rel {
  position: relative; }

.hidden {
  display: none; }

.alpha {
  opacity: 0;
  visibility: hidden; }

.alpha2 {
  opacity: 0; }

.mouseDisabled {
  pointer-events: none; }

.clear {
  clear: both; }

.noEvent {
  pointer-events: none; }

.noSel {
  pointer-events: auto !important;
  /* 允许 Pointer Events，尽管目的是取消默认 */
  user-select: none !important;
  /* 阻止用户选中图片文本 */
  -webkit-user-drag: none !important;
  /* 阻止图片被拖拽 */
  touch-action: manipulation !important;
  /* 优化触摸交互，有时也能间接影响默认菜单 */
  -webkit-touch-callout: none !important;
  /* 针对 Safari 的直接屏蔽方法 (如果上面方法不完全有效) */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* 设置透明度为0 */
  outline: none !important;
  /* 使用 !important 确保覆盖浏览器或其他样式 */ }

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent; }

@-webkit-keyframes rot_ani {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@-moz-keyframes rot_ani {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes rot_ani {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@font-face {
  font-family: "myFont_03";
  src: url("myFont_03.eot");
  /* IE9 */
  src: url("myFont_03.eot?#iefix") format("embedded-opentype"), url("myFont_03.woff") format("woff"), url("myFont_03.ttf") format("truetype"), url("myFont_03.svg#myFont_03") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal; }
@font-face {
  font-family: "numFont";
  src: url("numFont.eot");
  /* IE9 */
  src: url("numFont.eot?#iefix") format("embedded-opentype"), url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), url("numFont.svg#numFont") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal; }
input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-appearance: none;
  outline: none;
  border: none; }

.alertLayer2 {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 99;
  position: fixed; }
  .alertLayer2 .alertBox2 {
    width: 100%;
    height: 400px;
    top: 50%;
    left: 0;
    overflow: hidden;
    margin-top: -175px; }
    .alertLayer2 .alertBox2 .alertInfo2 {
      width: 100%;
      font-family: 'myFont_03', Arial, sans-serif;
      font-size: 30px;
      line-height: 43px;
      text-align: center;
      color: white; }
    .alertLayer2 .alertBox2 .pBtn {
      left: 50%;
      margin-left: -87px;
      top: 129px; }

.alertLayer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 99;
  position: fixed;
  font-weight: 500;
  font-family: 'Heiti SC',"黑体","STHeiti","Microsoft YaHei","PingFang SC"; }
  .alertLayer .alertBox {
    width: 100%;
    height: 400px;
    top: 50%;
    left: 0;
    overflow: hidden;
    margin-top: -163px; }
    .alertLayer .alertBox .alertInfo {
      width: 100%;
      font-family: 'myFont_03', Arial, sans-serif;
      font-size: 30px;
      line-height: 38px;
      text-align: center;
      color: white; }
    .alertLayer .alertBox .closeBtn {
      left: 50%;
      margin-left: -87px;
      top: 109px; }

.popLayer {
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0; }
  .popLayer .popBox {
    width: 561px;
    height: 557px;
    top: 380px;
    left: 98px;
    color: white;
    font-size: 30px;
    border-radius: 28px;
    border-radius: 210px;
    background-color: rgba(0, 0, 0, 0.5); }
  .popLayer .pop_pic {
    left: -10px;
    top: -5px; }
  .popLayer .popTil {
    font-size: 30px;
    top: 178px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 38px;
    height: 208px;
    font-family: 'myFont_03', Arial, sans-serif; }
  .popLayer .pop_close {
    top: 584px;
    left: 221px;
    padding: 30px;
    pointer-events: auto; }

.qrcodeContainer {
  top: 300px;
  left: 200px;
  z-index: 99999; }

.black-body-chinese {
  font-family: "黑体", "SimHei"; }

.holder {
  width: 750px;
  height: 100%; }
  .holder .pages {
    width: 100%;
    height: 1560px;
    top: 50%;
    margin-top: -780px; }
  .holder .load_box {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px; }
    .holder .load_box .load_bg {
      top: 0;
      left: 0;
      background: url("../imgs/load_bg.jpg?v2") no-repeat; }
    .holder .load_box .load_ui {
      top: 674px;
      width: 302px;
      left: 0px;
      height: 750px; }
    .holder .load_box .load_01, .holder .load_box .load_02, .holder .load_box .load_03, .holder .load_box .load_04 {
      top: 44px;
      left: 74px;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      opacity: 0; }
    .holder .load_box .load_lineBox {
      width: 0px;
      overflow: hidden;
      height: 400px;
      top: -180px; }
    .holder .load_box .load_line {
      top: 30px;
      width: 750px;
      height: 220px; }
    .holder .load_box .icon_con {
      top: 0px;
      left: 0px;
      width: 750px;
      height: 190px; }
      .holder .load_box .icon_con .icon {
        top: 0;
        left: 0; }
      .holder .load_box .icon_con .icon1 {
        top: 28px;
        left: 321px; }
      .holder .load_box .icon_con .icon2 {
        top: 0px;
        left: 332px;
        opacity: 0; }
      .holder .load_box .icon_con .icon3 {
        top: 20px;
        left: 323px;
        opacity: 0; }
      .holder .load_box .icon_con .icon4 {
        top: 73px;
        left: 275px;
        opacity: 0; }
      .holder .load_box .icon_con .icon5 {
        top: 62px;
        left: 285px;
        opacity: 0; }
    .holder .load_box .load_txt {
      text-align: center;
      color: #eacca8;
      top: 40px;
      left: 0px;
      width: 750px;
      height: 110px;
      line-height: 110px;
      font-size: 36px;
      font-family: 'myFont_03', Arial, sans-serif; }
    .holder .load_box .load_txt2 {
      color: #eacca8;
      font-size: 38px;
      text-align: center;
      height: 60px;
      line-height: 60px;
      top: 192px;
      left: 0;
      width: 100%; }
  .holder .vid_box {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px; }
    .holder .vid_box .vid_bg {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0px;
      background: url("../imgs/load_bg.jpg?v2") no-repeat; }
    .holder .vid_box .logo_01 {
      top: 238px;
      left: 50%;
      margin-left: -269px; }
    .holder .vid_box .vid_bm {
      top: 1235px;
      left: 0px; }
      .holder .vid_box .vid_bm .ready_btn {
        left: 271px;
        top: 5px;
        opacity: 0;
        width: 208px;
        height: 95px;
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center; }
@keyframes border-thickness-flash {
  0% {
    border-color: #f2e8cf;
    /* 初始颜色 */ }
  50% {
    border-color: rgba(242, 232, 207, 0.2);
    /* 变化颜色 */ }
  100% {
    border-color: #f2e8cf;
    /* 恢复颜色 */ } }
    .holder .vid_box .v1_01 {
      height: 808px;
      width: 539px;
      top: 342px;
      left: 105px;
      border: 2px #f2e8cf solid;
      border-radius: 33px;
      overflow: hidden;
      border-width: 2px;
      border-style: solid;
      -webkit-animation: border-thickness-flash 1.5s infinite ease-in-out;
      animation: border-thickness-flash 1.5s infinite ease-in-out;
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center; }
      .holder .vid_box .v1_01 .vid_light {
        width: 100%;
        height: 100%;
        pointer-events: none;
        top: 0;
        background-color: rgba(255, 255, 255, 0.4);
        -webkit-animation: fadeInOut 2s linear infinite;
        animation: fadeInOut 2s linear infinite; }
      .holder .vid_box .v1_01 .vid_hit {
        width: 100%;
        height: 78%;
        pointer-events: auto;
        top: 100px; }
      .holder .vid_box .v1_01 .vid_playBtn {
        top: 50%;
        left: 50%;
        margin-left: -54px;
        margin-top: -54px;
        opacity: 1;
        visibility: visible; }
  .holder .ting_layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px; }
    .holder .ting_layer .ting_logo {
      top: 211px;
      left: 50%;
      margin-left: -80px; }
    .holder .ting_layer .startBtn {
      left: 271px;
      top: 1241px;
      opacity: 0;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      width: 208px;
      height: 95px; }
  .holder .ww_list {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px; }
    .holder .ww_list .ww_logo {
      top: 211px;
      left: 50%;
      margin-left: -80px; }
    .holder .ww_list .ww_content {
      left: 85px;
      top: 418px;
      width: 580px;
      height: 586px; }
      .holder .ww_list .ww_content .ww_imgBox {
        top: 20px;
        left: 64px;
        width: 457px;
        height: 530px;
        overflow: hidden;
        transition: transform 0.5s ease;
        will-change: transform; }
        .holder .ww_list .ww_content .ww_imgBox .imageTrack {
          display: flex; }
        .holder .ww_list .ww_content .ww_imgBox .ww_img_box {
          width: 457px;
          height: 530px;
          background-repeat: no-repeat;
          background-position: center;
          top: 0;
          left: 0; }
        .holder .ww_list .ww_content .ww_imgBox .ww_light {
          top: 0;
          left: 0;
          -webkit-animation: fadeInOut 1.4s linear infinite;
          animation: fadeInOut 1.4s linear infinite; }
        .holder .ww_list .ww_content .ww_imgBox .ww_img {
          top: 0;
          left: 0;
          width: 457px;
          height: 530px;
          background-size: cover;
          background-position: center; }
      .holder .ww_list .ww_content .ww_txt_imgBox {
        top: 582px;
        left: -6px;
        width: 586px;
        height: 41px;
        overflow: hidden; }
      .holder .ww_list .ww_content .ww_txt_img {
        top: 0px;
        left: 0px; }
      .holder .ww_list .ww_content .arrow_left {
        top: 270px;
        left: -22px;
        padding: 50px 20px; }
      .holder .ww_list .ww_content .arrow_right {
        top: 270px;
        right: -20px;
        padding: 50px 20px; }
      .holder .ww_list .ww_content .ww_txt_box {
        height: 71px;
        width: 298px;
        top: 637px;
        left: 215px;
        display: flex;
        font-size: 28px;
        color: #f6d6a4;
        align-items: center; }
      .holder .ww_list .ww_content .ww_dynasty {
        top: 643px;
        left: 60px;
        height: 60px;
        width: 140px; }
        .holder .ww_list .ww_content .ww_dynasty img {
          float: right; }
      .holder .ww_list .ww_content .btn_kp {
        top: 777px;
        left: 53px; }
      .holder .ww_list .ww_content .btn_zt {
        top: 777px;
        left: 220px; }
      .holder .ww_list .ww_content .btn_lsj {
        top: 777px;
        left: 391px; }
    .holder .ww_list .btn_sel {
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      top: 1252px;
      left: 280px;
      opacity: 0;
      width: 188px;
      height: 75px; }
  .holder .bei_layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px; }
    .holder .bei_layer .bei_logo {
      top: 211px;
      left: 50%;
      margin-left: -80px; }
    .holder .bei_layer .bei_content {
      width: 606px;
      height: 360px;
      top: 340px;
      left: 75px; }
    .holder .bei_layer .bei_txt1 {
      left: 4px;
      top: 676px; }
    .holder .bei_layer .bei_txt2 {
      left: 0px;
      top: 797px;
      width: 100%;
      font-size: 28px;
      color: #f6d6a4;
      text-align: center;
      font-family: 'myFont_03', Arial, sans-serif;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation: fadeInOut2 1.4s linear infinite;
      animation: fadeInOut2 1.4s linear infinite; }
    .holder .bei_layer .bei_imgBox {
      width: 457px;
      height: 530px;
      overflow: hidden;
      top: 69px;
      left: 73px;
      background-repeat: no-repeat;
      background-position: center; }
    .holder .bei_layer .bei_bm {
      top: 1250px;
      left: 0px;
      width: 750px;
      height: 90px;
      overflow: hidden; }
    .holder .bei_layer .bei_btn1 {
      top: 1238px;
      left: 163px;
      width: 204px;
      height: 94px; }
    .holder .bei_layer .bei_btn3 {
      top: 1238px;
      left: 380px;
      width: 204px;
      height: 94px; }
  .holder .shuo_layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
    .holder .shuo_layer .shuo_logo {
      top: 211px;
      left: 50%;
      margin-left: -80px; }
    .holder .shuo_layer .shuo_selBox1 {
      top: 0;
      left: 0; }
      .holder .shuo_layer .shuo_selBox1 .shuo_btn_sel {
        top: 1239px;
        left: 165px;
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        width: 208px;
        height: 95px;
        display: block; }
      .holder .shuo_layer .shuo_selBox1 .shuo_btn_my {
        top: 1240px;
        left: 391px;
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        width: 208px;
        height: 95px;
        display: block; }
      .holder .shuo_layer .shuo_selBox1 .shuo_btn_sel.disable {
        left: 270px; }
      .holder .shuo_layer .shuo_selBox1 .shuo_btn_my.disable {
        display: none; }
    .holder .shuo_layer .shuo_bg {
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      opacity: 1; }
    .holder .shuo_layer .shuo_kuang {
      top: 378px;
      left: 88px; }
    .holder .shuo_layer .shuo_tip1 {
      top: 1035px;
      left: 248px; }
    .holder .shuo_layer .shuo_tips_box {
      top: 1046px;
      left: 0px;
      color: white;
      font-size: 28px;
      display: flex;
      align-items: flex-end;
      width: 100%;
      height: 130px;
      text-align: center;
      line-height: 40px;
      justify-content: center; }
      .holder .shuo_layer .shuo_tips_box .shuo_tip_info {
        font-family: 'myFont_03', Arial, sans-serif;
        width: 90%;
        left: 5%; }
      .holder .shuo_layer .shuo_tips_box .shuo_tip_info.guan {
        font-family: 'myFont_03', Arial, sans-serif;
        -webkit-animation: fadeInOut2 1.4s linear infinite;
        animation: fadeInOut2 1.4s linear infinite; }
    .holder .shuo_layer .guan_layer {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0px; }
      .holder .shuo_layer .guan_layer .guan_box {
        width: 560px;
        height: 560px;
        transform-origin: center center;
        top: 378px;
        left: 94px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm {
          width: 175px;
          height: 200px; }
          .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm img {
            margin-top: 15px;
            margin-left: 15px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm:nth-child(1) {
          top: 97px;
          left: 39px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm:nth-child(2) {
          top: 97px;
          left: 200px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm:nth-child(3) {
          top: 97px;
          left: 359px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm:nth-child(4) {
          top: 313px;
          left: 90px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm:nth-child(5) {
          top: 313px;
          left: 287px; }
          .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm:nth-child(5) img {
            margin-left: -17px; }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itmBg {
          top: -1px;
          left: 27px;
          display: block;
          width: 137px;
          height: 137px;
          background: url("../imgs/guan_lst_itmBg.png?v1") no-repeat;
          opacity: 0;
          transition: opacity 1s;
          -webkit-transition: opacity .4s;
          -o-transform: scale(0.8, 0.8);
          -moz-transform: scale(0.8, 0.8);
          -ms-transform: scale(0.8, 0.8);
          -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8); }
        .holder .shuo_layer .guan_layer .guan_box .guan_lst_itm.on .guan_lst_itmBg {
          opacity: 1;
          -o-transform: scale(1, 1);
          -moz-transform: scale(1, 1);
          -ms-transform: scale(1, 1);
          -webkit-transform: scale(1, 1);
          transform: scale(1, 1); }
      .holder .shuo_layer .guan_layer .guan_bm {
        top: 1221px;
        left: 0px; }
        .holder .shuo_layer .guan_layer .guan_bm .guan_ln {
          top: 20px;
          left: 0px;
          width: 750px;
          height: 100px;
          overflow: hidden; }
        .holder .shuo_layer .guan_layer .guan_bm .guan_btn {
          top: 32px;
          left: 280px;
          -o-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -webkit-transform-origin: center center;
          transform-origin: center center;
          width: 188px;
          height: 75px; }
    .holder .shuo_layer .select_layer {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0px; }
      .holder .shuo_layer .select_layer .select_box {
        width: 560px;
        height: 560px;
        transform-origin: center center;
        top: 378px;
        left: 94px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm {
          width: 175px;
          height: 200px;
          pointer-events: none;
          background: url("../imgs/sel_ItemBg.png") no-repeat;
          background-position: 37px 14px; }
          .holder .shuo_layer .select_layer .select_box .sel_lst_itm .headIcon {
            top: 19px;
            left: 40px;
            width: 88px;
            height: 88px;
            border-radius: 50%;
            overflow: hidden;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm.lock {
          background: url("../imgs/sel_ItemBg_lock.png?v1") no-repeat;
          background-position: 37px 14px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm.noData {
          background: url("../imgs/sel_ItemBg.png?v1") no-repeat;
          background-position: 37px 14px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm.hasData {
          background: none;
          pointer-events: auto; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm:nth-child(1) {
          top: 111px;
          left: 34px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm:nth-child(2) {
          top: 111px;
          left: 200px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm:nth-child(3) {
          top: 111px;
          left: 366px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm:nth-child(4) {
          top: 300px;
          left: 34px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm:nth-child(5) {
          top: 300px;
          left: 200px; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm:nth-child(6) {
          top: 300px;
          left: 366px; }
        .holder .shuo_layer .select_layer .select_box .guan_lst_itmBg {
          top: 2px;
          left: 20px;
          display: block;
          width: 137px;
          height: 137px;
          background: url("../imgs/guan_lst_itmBg.png?v1") no-repeat;
          opacity: 0;
          transition: opacity 1s;
          -webkit-transition: opacity .4s;
          -o-transform: scale(0.8, 0.8);
          -moz-transform: scale(0.8, 0.8);
          -ms-transform: scale(0.8, 0.8);
          -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
          background-position: 18% 10%; }
        .holder .shuo_layer .select_layer .select_box .sel_lst_itm.on .guan_lst_itmBg {
          opacity: 1;
          -o-transform: scale(1, 1);
          -moz-transform: scale(1, 1);
          -ms-transform: scale(1, 1);
          -webkit-transform: scale(1, 1);
          transform: scale(1, 1); }
        .holder .shuo_layer .select_layer .select_box .sel_nick {
          width: 90%;
          height: 36px;
          color: white;
          font-size: 20px;
          text-align: center;
          text-overflow: ellipsis;
          top: 122px;
          left: 10px;
          white-space: nowrap;
          font-weight: 500;
          overflow: hidden;
          font-family: 'Heiti SC',"黑体","STHeiti","Microsoft YaHei","PingFang SC"; }
      .holder .shuo_layer .select_layer .select_tips_box {
        font-family: 'myFont_03', Arial, sans-serif;
        top: 1046px;
        left: 5%;
        color: white;
        font-size: 28px;
        display: flex;
        align-items: flex-end;
        width: 90%;
        height: 130px;
        text-align: center;
        line-height: 40px;
        justify-content: center; }
        .holder .shuo_layer .select_layer .select_tips_box .select_tip_info {
          width: 100%; }
      .holder .shuo_layer .select_layer .select_bm {
        top: 1198px;
        left: 0px; }
        .holder .shuo_layer .select_layer .select_bm .btn_sel2 {
          left: 161px;
          top: 39px;
          -o-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -webkit-transform-origin: center center;
          transform-origin: center center;
          width: 208px;
          height: 95px;
          display: block; }
        .holder .shuo_layer .select_layer .select_bm .btn_again {
          left: 379px;
          top: 39px;
          -o-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -webkit-transform-origin: center center;
          transform-origin: center center;
          width: 208px;
          height: 95px;
          display: block;
          background: url("../imgs/btn_again.png?v1") no-repeat;
          background-position: 50% 50%; }
        .holder .shuo_layer .select_layer .select_bm .btn_again.disable {
          pointer-events: none;
          opacity: .6;
          display: block; }
        .holder .shuo_layer .select_layer .select_bm .btn_again.unable {
          display: none; }
        .holder .shuo_layer .select_layer .select_bm .btn_sel2.unable {
          left: 268px; }
    .holder .shuo_layer .record_layer {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0px; }
      .holder .shuo_layer .record_layer .record_box {
        width: 560px;
        height: 560px;
        top: 378px;
        left: 94px;
        transform-origin: center center; }
        .holder .shuo_layer .record_layer .record_box .record_imgBox {
          overflow: hidden;
          width: 552px;
          height: 477px; }
        .holder .shuo_layer .record_layer .record_box .record_txt {
          top: 52px;
          left: 36px;
          width: 496px;
          height: 423px;
          background: url("../imgs/record_txt.png") no-repeat;
          overflow: hidden; }
        .holder .shuo_layer .record_layer .record_box .record_fail_txt {
          top: 244px;
          left: 118px; }
        .holder .shuo_layer .record_layer .record_box .record_sucBox {
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px; }
          .holder .shuo_layer .record_layer .record_box .record_sucBox .record_suc_icon {
            top: 213px;
            left: 60px; }
        .holder .shuo_layer .record_layer .record_box .beizhu {
          top: 1032px;
          left: 119px; }
      .holder .shuo_layer .record_layer .record_bm {
        top: 1216px;
        left: 0px; }
        .holder .shuo_layer .record_layer .record_bm .record_s0 {
          width: 100%;
          height: 100%; }
          .holder .shuo_layer .record_layer .record_bm .record_s0 .record_ln0 {
            top: 22px;
            left: 0px;
            width: 750px;
            height: 100px;
            overflow: hidden; }
        .holder .shuo_layer .record_layer .record_bm .record_s1 {
          width: 100%;
          height: 100%; }
          .holder .shuo_layer .record_layer .record_bm .record_s1 .record_btn {
            top: 8px;
            left: 227px;
            -o-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -webkit-transform-origin: center center;
            transform-origin: center center;
            width: 288px;
            height: 125px; }
        .holder .shuo_layer .record_layer .record_bm .record_s2 {
          top: 0px; }
          .holder .shuo_layer .record_layer .record_bm .record_s2 .shuo_btn_record1 {
            left: 171px;
            top: 36px;
            width: 188px;
            height: 75px; }
          .holder .shuo_layer .record_layer .record_bm .record_s2 .shuo_btn_sub2 {
            left: 390px;
            top: 36px;
            width: 188px;
            height: 75px; }
        .holder .shuo_layer .record_layer .record_bm .shuo_btn_record1 {
          left: 171px;
          top: 13px; }
        .holder .shuo_layer .record_layer .record_bm .shuo_btn_sub2 {
          left: 390px;
          top: 13px; }
  .holder .pro_loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px;
    z-index: 99;
    background: url("../imgs/pro_loading_bg.jpg?v3") no-repeat; }
    .holder .pro_loading .pro_loading_b {
      width: 100%;
      height: 170px;
      top: 40%; }
    .holder .pro_loading .proload_txt {
      top: 0;
      left: 0; }
    .holder .pro_loading .proload_per {
      font-family: 'myFont_03', Arial, sans-serif;
      color: #eacca8;
      font-size: 25px;
      text-align: center;
      top: 190px;
      width: 100%; }
    .holder .pro_loading .pro_per_txt {
      color: #eacca8;
      font-size: 30px;
      text-align: center;
      top: 230px;
      width: 100%; }
  .holder .boke_layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
    .holder .boke_layer .boke_logo {
      top: 211px;
      left: 50%;
      margin-left: -80px; }
    .holder .boke_layer .boke_p1 {
      top: 296px;
      left: 50%;
      margin-left: -56px;
      width: 106px;
      height: 108px;
      background: url("../imgs/boke_p1.png") no-repeat;
      overflow: hidden; }
    .holder .boke_layer .boke_logo {
      top: 204px;
      left: 294px; }
    .holder .boke_layer .boke_p2 {
      top: 373px;
      left: 50%;
      margin-left: -331px;
      width: 665px;
      height: 854px;
      background: url("../imgs/boke_p2.png") no-repeat;
      overflow: hidden; }
    .holder .boke_layer .boke_k1 {
      top: -11px;
      left: -7px;
      width: 455px;
      height: 304px;
      background: url("../imgs/boke_k1.png") no-repeat;
      overflow: hidden; }
    .holder .boke_layer .boke_k2 {
      top: 1px;
      left: 16px;
      border-radius: 30px;
      width: 455px;
      height: 304px;
      overflow: hidden;
      background: url("../imgs/boke_k2.png") no-repeat; }
    .holder .boke_layer .boke_txtBox_bg {
      top: 5px;
      left: 20px;
      border-radius: 98px;
      width: 445px;
      height: 295px;
      background-color: #9b211a; }
    .holder .boke_layer .boke_txtBox {
      top: 838px;
      left: 131px;
      width: 484px;
      height: 314px;
      color: white;
      font-size: 23px;
      text-indent: 40px;
      line-height: 28px;
      border-radius: 114px;
      overflow: hidden;
      -webkit-transition: all 0.6s linear;
      transition: all 0.6s linear; }
      .holder .boke_layer .boke_txtBox .boke_txt_boxs {
        top: 14px;
        left: 36px;
        width: 417px;
        height: 278px;
        overflow: hidden;
        border-radius: 76px; }
      .holder .boke_layer .boke_txtBox .boke_txt_b {
        top: 70px;
        left: 0px;
        width: 100%;
        transition: all 0.6s linear;
        -webkit-transition: all 0.6s linear; }
      .holder .boke_layer .boke_txtBox .boke_name {
        top: -29px;
        left: 27px;
        width: 365.3px;
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        opacity: 0;
        display: block;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear; }
      .holder .boke_layer .boke_txtBox .boke_txt {
        width: 100%;
        top: 0px;
        left: 0;
        line-height: 30px;
        font-size: 18px;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;
        text-align: justify;
        /* 整体两端对齐 */
        text-align-last: left;
        /* 可以设置为 left, right, center, justify */
        /* 针对最后一行 */ }
    .holder .boke_layer .boke_txtBox.on {
      -o-transform: scale(1.5, 1.5);
      -moz-transform: scale(1.5, 1.5);
      -ms-transform: scale(1.5, 1.5);
      -webkit-transform: scale(1.5, 1.5);
      transform: scale(1.5, 1.5); }
      .holder .boke_layer .boke_txtBox.on .boke_txt_b {
        top: 120px;
        transition: all 0.4s linear;
        -webkit-transition: all 0.4s linear; }
      .holder .boke_layer .boke_txtBox.on .boke_name {
        opacity: 1; }
    .holder .boke_layer .boke_msk {
      top: 15px;
      left: 34px;
      width: 422px;
      height: 277px;
      border-radius: 82px;
      overflow: hidden;
      background: url("../imgs/boke_msk2.png") no-repeat;
      background-size: 100%; }
    .holder .boke_layer .boke_floatBtn {
      top: 17px;
      left: 29px;
      width: 427px;
      height: 275px;
      background: url(../imgs/boke_floatBtn.png?v1) no-repeat;
      background-position: center; }
    .holder .boke_layer .boke_info {
      top: 1158px;
      left: 130px;
      color: #f6d6a4;
      font-weight: 500;
      text-align: center;
      width: 482px;
      font-family: 'Heiti SC',"黑体","STHeiti","Microsoft YaHei","PingFang SC";
      font-size: 27px; }
    .holder .boke_layer .boke_info.mini {
      font-size: 22px; }
    .holder .boke_layer .boke_imgBox {
      top: 453px;
      left: 158px;
      width: 429px;
      height: 281px; }
      .holder .boke_layer .boke_imgBox .boke_pic {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat; }
      .holder .boke_layer .boke_imgBox .boke_pic2 {
        top: -44px;
        left: -7px; }
    .holder .boke_layer .boke_bm {
      top: 1228px;
      left: 0px; }
      .holder .boke_layer .boke_bm .boke_btn1, .holder .boke_layer .boke_bm .boke_btn2, .holder .boke_layer .boke_bm .boke_btn3 {
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        width: 161px;
        height: 71px;
        background-position: center;
        background-repeat: no-repeat; }
      .holder .boke_layer .boke_bm .boke_btn1 {
        top: 25px;
        left: 124px;
        opacity: .5;
        pointer-events: none;
        background-image: url("../imgs/boke_btn1_off.png?v1");
        -webkit-animation: fadeInOut 2s linear infinite;
        animation: fadeInOut 2s linear infinite; }
      .holder .boke_layer .boke_bm .boke_btn1.on {
        opacity: 1;
        pointer-events: auto;
        background-image: url("../imgs/boke_btn1.png?v1");
        -webkit-animation: none;
        animation: none; }
      .holder .boke_layer .boke_bm .boke_btn2 {
        top: 24px;
        left: 294px;
        background-image: url("../imgs/boke_btn2_a1.png?v1"); }
      .holder .boke_layer .boke_bm .boke_btn3 {
        top: 24px;
        left: 465px;
        background-image: url("../imgs/boke_btn3.png?v1"); }
      .holder .boke_layer .boke_bm .boke_tips {
        color: #f6d6a4;
        top: 125px;
        font-size: 17px;
        font-size: 17px;
        text-align: center;
        width: 750px; }
    .holder .boke_layer .boke_bm.mini .boke_btn1 {
      display: none; }
    .holder .boke_layer .boke_bm.mini .boke_btn2 {
      left: 273px;
      width: 200px;
      height: 80px; }
    .holder .boke_layer .boke_bm.mini .boke_btn3 {
      display: none; }
  .holder .works_layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
    .holder .works_layer .works_bg {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url("../imgs/load_bg.jpg?v2") no-repeat; }
    .holder .works_layer .works_logo {
      top: 211px;
      left: 295px; }
    .holder .works_layer .works_tilBox {
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      top: 305px;
      left: 130px;
      width: 490px;
      height: 79px;
      background: url("../imgs/works_bg.png?v2") no-repeat; }
      .holder .works_layer .works_tilBox .works_b1 {
        left: 60px;
        top: 20px;
        opacity: .5; }
      .holder .works_layer .works_tilBox .works_b2 {
        left: 267px;
        top: 20px;
        opacity: .5; }
      .holder .works_layer .works_tilBox .works_b1.on, .holder .works_layer .works_tilBox .works_b2.on {
        opacity: 1;
        pointer-events: none; }
    .holder .works_layer .works_con {
      top: 413px;
      left: 0px;
      width: 100%;
      height: 1035px;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center; }
      .holder .works_layer .works_con .works_bg2 {
        width: 666px;
        height: 930px;
        overflow: hidden;
        left: 41px;
        background: url("../imgs/works_bg2.png?v26") no-repeat; }
      .holder .works_layer .works_con .works_lstCon {
        top: 144px;
        left: 126px;
        width: 497px;
        height: 785px;
        overflow: hidden;
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center; }
      .holder .works_layer .works_con .works_items {
        list-style: none;
        top: 0;
        left: 20px; }
      .holder .works_layer .works_con .works_item {
        list-style: none;
        margin-bottom: 0px;
        width: 454px;
        height: 394px;
        border-radius: 30px;
        position: relative;
        background: url("../imgs/works_it_bg.png?v2") no-repeat; }
        .holder .works_layer .works_con .works_item .w_imgCon {
          background-position: center center;
          left: 18px;
          top: 18px;
          width: 421px;
          height: 269px;
          background-size: contain;
          background-repeat: no-repeat; }
        .holder .works_layer .works_con .works_item .works_img {
          top: 0px;
          left: -2px;
          width: 459px;
          height: 304px;
          overflow: hidden;
          background-image: url("../imgs/s/gong_02.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain; }
        .holder .works_layer .works_con .works_item .works_txt {
          top: 313px;
          left: -61px;
          width: 589px;
          height: 44px;
          background-image: url("../imgs/s/txt_02.png");
          background-position: center;
          background-repeat: no-repeat; }
        .holder .works_layer .works_con .works_item .w_img_hit {
          left: 18px;
          top: 18px;
          width: 421px;
          height: 269px;
          background: url("../imgs/vid_playBtn.png?v2") no-repeat;
          background-position: center; }
        .holder .works_layer .works_con .works_item .ww_img_unable {
          left: 16px;
          top: 15px;
          width: 422px;
          height: 273px;
          display: flex;
          align-items: center;
          justify-content: center;
          display: none;
          color: white;
          font-size: 24px;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 80px; }
          .holder .works_layer .works_con .works_item .ww_img_unable .unable_txt {
            -webkit-animation: fadeInOut2 1.4s linear infinite;
            animation: fadeInOut2 1.4s linear infinite; }
        .holder .works_layer .works_con .works_item .w_txt1, .holder .works_layer .works_con .works_item .w_txt2 {
          font-size: 18px;
          font-weight: 500;
          color: #f6d6a4;
          text-align: center;
          top: 256px;
          left: 0px;
          width: 100%;
          height: 30px;
          line-height: 30px; }
        .holder .works_layer .works_con .works_item .w_txt2 {
          top: 353px;
          font-family: 'Heiti SC',"黑体","STHeiti","Microsoft YaHei","PingFang SC"; }
        .holder .works_layer .works_con .works_item .w_img {
          margin-left: 5px;
          margin-top: 39px; }
        .holder .works_layer .works_con .works_item .w_info {
          top: 306px;
          left: 0px;
          font-size: 25px;
          font-weight: bolder;
          color: #f6d6a4;
          height: 62px;
          width: 100%; }
          .holder .works_layer .works_con .works_item .w_info .boke_dynasty {
            width: 133px;
            top: 7px;
            left: 0px; }
            .holder .works_layer .works_con .works_item .w_info .boke_dynasty .bei_dy {
              background-position: center; }
          .holder .works_layer .works_con .works_item .w_info .boke_txt_dy_box {
            top: 6px;
            font-size: 23px;
            left: 146px;
            line-height: 30px;
            width: 242px;
            height: 62px;
            display: flex;
            align-items: center; }
      .holder .works_layer .works_con .arrow_up {
        top: 84px;
        left: 279px;
        padding: 30px 80px;
        background: url("../imgs/arrow_up.png?v2") no-repeat;
        background-position: center; }
      .holder .works_layer .works_con .arrow_down {
        top: 914px;
        left: 279px;
        padding: 30px 80px;
        background: url("../imgs/arrow_down.png?v2") no-repeat;
        background-position: center; }
  .holder .haibao_layer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9; }
    .holder .haibao_layer .haibao_bg {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.75); }
    .holder .haibao_layer .haibao_picBox {
      top: 45%;
      left: 50%;
      margin-left: -290px;
      margin-top: -503px;
      overflow: hidden;
      border-radius: 20px;
      width: 580px;
      height: 1005px; }
    .holder .haibao_layer .haibao_pic {
      top: 0px;
      left: 0px; }
    .holder .haibao_layer .haibao_close {
      top: 1334px;
      left: 348px; }
    .holder .haibao_layer .haibao_tips {
      top: 1280px;
      left: 270px; }
  .holder .fmBox {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9;
    font-size: 20px; }
    .holder .fmBox .cpr_bg {
      top: 45%;
      left: 50%;
      margin-top: -504px;
      margin-left: -259px;
      width: 518px;
      height: 1009px;
      background: url("../imgs/cpr_bg_a1.png") no-repeat; }
    .holder .fmBox .fm_b1 {
      top: 158px;
      left: 34px;
      width: 88%;
      height: 600px;
      color: white;
      overflow: scroll;
      text-align: justify;
      /* 整体两端对齐 */
      text-align-last: left;
      /* 可以设置为 left, right, center, justify */
      /* 针对最后一行 */ }
    .holder .fmBox .cpr_gou {
      top: 782px;
      left: 46px;
      opacity: 0; }
    .holder .fmBox .cpr_gou.on {
      opacity: 1; }
    .holder .fmBox .cpr_hit {
      width: 450px;
      height: 60px;
      top: 755px;
      left: 40px; }
    .holder .fmBox .cpr_subBtn {
      width: 240px;
      height: 70px;
      top: 818px;
      left: 140px; }
    .holder .fmBox .cpr_closeBtn {
      width: 160px;
      height: 90px;
      top: 948px;
      left: 174px; }
  .holder .shareTips_layer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9; }
    .holder .shareTips_layer .share_tips {
      top: 30px;
      left: 0px; }
  .holder .vidTips_layer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9; }
    .holder .vidTips_layer .vid_tips {
      top: 30px;
      left: 0px; }

.btn {
  width: 140px;
  height: 140px;
  border: 2px solid red;
  border-radius: 50%;
  text-indent: -600px;
  overflow: hidden;
  top: 0;
  left: 0;
  color: #eeeeee; }

.gotoIndex, .p3_return {
  top: 63px;
  left: 30px;
  cursor: pointer; }

.btn_create, .btn_works, .btn_return, .btn_create2 {
  width: 150px;
  height: 76px;
  top: 0px;
  background-repeat: no-repeat;
  background-position: center; }

.float_layer {
  width: 750px;
  height: 100px;
  top: 140px;
  left: 0; }

.logo {
  top: 17px;
  left: 50%;
  margin-left: -80px;
  width: 158px;
  height: 40px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../imgs/logo.png"); }

.btn_works {
  right: 0px;
  background-image: url("../imgs/btn_works.png"); }

.btn_create {
  right: 0px;
  background-image: url("../imgs/btn_chuangzuo.png"); }

.btn_return {
  left: 0px;
  background-image: url("../imgs/btn_return.png"); }

.btn_create2 {
  left: 0px;
  background-image: url("../imgs/btn_create2.png"); }

#canvas_role {
  position: absolute;
  width: 750px;
  height: 300px;
  display: block;
  top: 520px;
  left: 0px; }

.container {
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
  .container h1 {
    text-align: center;
    color: #07C160;
    margin-bottom: 30px;
    font-size: 24px; }
  .container .status-container {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px; }
  .container #status {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333; }
  .container #audio-info {
    font-size: 14px;
    color: #666; }
  .container .button-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px; }
  .container .record-btn, .container .download-btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none; }
  .container .record-btn {
    background-color: #07C160;
    color: white; }
  .container .record-btn:active, .container .recording {
    background-color: #FF4D4F;
    transform: scale(0.98); }
  .container .download-btn {
    background-color: #1890ff;
    color: white; }
  .container .download-btn:disabled {
    background-color: #d9d9d9;
    color: #999;
    cursor: not-allowed; }
  .container .download-btn:not(:disabled):active {
    transform: scale(0.98); }
  .container .audio-container {
    text-align: center; }
  .container #audio-player {
    width: 100%;
    max-width: 400px;
    margin: 0 auto; }

@keyframes load_ani {
  0% {
    transform: scale(1, 1);
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    transform: scale(3, 3);
    opacity: 0; } }
/* 音波动画关键帧 - 更加随机的缩放比例，减小上下幅度 */
@keyframes wave-animation {
  0%, 100% {
    transform: scaleY(calc(0.6 + var(--random-factor, 0.1)));
    opacity: calc(0.6 + var(--random-opacity, 0.1)); }
  50% {
    transform: scaleY(calc(1.5 + var(--random-peak, 0.15)));
    opacity: calc(0.9 + var(--random-peak-opacity, 0.1)); } }
/* 音波动画效果样式 */
.audio-wave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  gap: 4px;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0; }

/* 增强版音波效果 - 色彩渐变 */
.audio-wave-enhanced .audio-wave-bar {
  background: linear-gradient(to bottom, #FFFFFF, #E0E0E0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }

/* 脉冲版音波效果 */
.audio-wave-pulse {
  top: 210px;
  left: 80px;
  animation: container-pulse 3s ease-in-out infinite; }

/* 基本的音波条形 */
.audio-wave-bar {
  width: 6px;
  margin-right: 5px;
  background-color: #FFFFFF;
  /* 白色 */
  border-radius: 2px;
  animation: wave-animation 0.7s ease-in-out infinite;
  /* 稍微放慢频率 */ }

/* 暂停动画的样式 */
.paused .audio-wave-bar {
  animation-play-state: paused; }

.paused.audio-wave-pulse {
  animation-play-state: paused; }

/* 为每个条形设置不同的高度、动画延迟和持续时间，增加随机性 */
.audio-wave-bar:nth-child(1) {
  height: 15px;
  animation-delay: -0.6s;
  animation-duration: 0.6s; }

.audio-wave-bar:nth-child(2) {
  height: 25px;
  animation-delay: -0.55s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(3) {
  height: 35px;
  animation-delay: -0.45s;
  animation-duration: 0.75s; }

.audio-wave-bar:nth-child(4) {
  height: 45px;
  animation-delay: -0.4s;
  animation-duration: 0.65s; }

.audio-wave-bar:nth-child(5) {
  height: 50px;
  animation-delay: -0.35s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(6) {
  height: 40px;
  animation-delay: -0.3s;
  animation-duration: 0.75s; }

.audio-wave-bar:nth-child(7) {
  height: 30px;
  animation-delay: -0.25s;
  animation-duration: 0.6s; }

.audio-wave-bar:nth-child(8) {
  height: 20px;
  animation-delay: -0.2s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(9) {
  height: 15px;
  animation-delay: -0.65s;
  animation-duration: 0.75s; }

.audio-wave-bar:nth-child(10) {
  height: 25px;
  animation-delay: -0.6s;
  animation-duration: 0.65s; }

.audio-wave-bar:nth-child(11) {
  height: 35px;
  animation-delay: -0.4s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(12) {
  height: 20px;
  width: 6px;
  margin-right: 10px;
  animation-delay: -0.25s;
  animation-duration: 0.75s; }

/* 为第13-24个音波条添加样式定义 */
.audio-wave-bar:nth-child(13) {
  height: 25px;
  animation-delay: -0.5s;
  animation-duration: 0.6s; }

.audio-wave-bar:nth-child(14) {
  height: 30px;
  animation-delay: -0.35s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(15) {
  height: 40px;
  animation-delay: -0.4s;
  animation-duration: 0.65s; }

.audio-wave-bar:nth-child(16) {
  height: 35px;
  animation-delay: -0.55s;
  animation-duration: 0.75s; }

.audio-wave-bar:nth-child(17) {
  height: 15px;
  animation-delay: -0.6s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(18) {
  height: 20px;
  animation-delay: -0.3s;
  animation-duration: 0.6s; }

.audio-wave-bar:nth-child(19) {
  height: 45px;
  animation-delay: -0.45s;
  animation-duration: 0.65s; }

.audio-wave-bar:nth-child(20) {
  height: 30px;
  animation-delay: -0.5s;
  animation-duration: 0.75s; }

.audio-wave-bar:nth-child(21) {
  height: 25px;
  animation-delay: -0.25s;
  animation-duration: 0.7s; }

.audio-wave-bar:nth-child(22) {
  height: 35px;
  animation-delay: -0.6s;
  animation-duration: 0.6s; }

.audio-wave-bar:nth-child(23) {
  height: 40px;
  animation-delay: -0.35s;
  animation-duration: 0.75s; }

.audio-wave-bar:nth-child(24) {
  height: 15px;
  animation-delay: -0.4s;
  animation-duration: 0.65s; }

/* 增强版音波效果 - 色彩渐变 */
.audio-wave-enhanced .audio-wave-bar {
  background: linear-gradient(to bottom, #FFFFFF, #E0E0E0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }

/* 脉冲版音波效果 */
.audio-wave-pulse {
  animation: container-pulse 3s ease-in-out infinite; }

@keyframes container-pulse {
  0%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(1.02); } }
/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
@keyframes fadeInOut {
  0% {
    opacity: .2; }
  60% {
    opacity: .6; }
  100% {
    opacity: .2; } }
@keyframes fadeInOut2 {
  0% {
    opacity: .3; }
  60% {
    opacity: 1; }
  100% {
    opacity: .3; } }
.bei_dy {
  width: 58px;
  height: 58px;
  background: url("../imgs/ww_dynasty_1.png?v2") no-repeat;
  font-weight: bolder;
  float: right;
  text-align: center;
  color: #f6d6a4;
  font-size: 30px;
  line-height: 58px; }

.bei_dy.long {
  width: 136px;
  background-image: url("../imgs/ww_dynasty_2.png?v2");
  background-size: contain; }

@keyframes fade-in-out {
  0%,100% {
    opacity: 1; }
  60% {
    opacity: 0; } }

/*# sourceMappingURL=main_ani.css.map */