@font-face {
    font-family: "hkyt";
    src: url("../plugin/hkyt.TTF");
  }
  
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: Arial, "Microsoft Yahei";
  }
  
  a {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: none;
  }
  
  /*清除浮动*/
  
  .clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  ol,
  li {
    list-style: none;
  }
  
  section {
    font-size: 0.24rem;
  }
  
  img {
    border: 0;
    outline-width: 0px;
    vertical-align: top;
  }
  
  html,
  body {
    position: relative;
    height: 100%;
  }
  
  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }
  
  .loa_header_box {
    background: url(../img/homepc/top_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 63px;
    position: fixed;
    top: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .loa_logo {
    margin-left: 20px;
  }
  
  .loa_media {
    width: 100px;
    display: flex;
    margin-right: 20px;
    justify-content: space-between;
  }
  
  .loa_media img {
    cursor: pointer;
  }
  
  .header_out {
    top: -70px !important;
    transition: all 0.5s;
  }
  
  .loa_header_logo {
    margin: 0 80px 0 50px;
    flex-shrink: 0;
    cursor: pointer;
  }
  
  .loa_header_logo img {
    width: 200px;
  }
  
  .loa_header_content {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  .loa_header_item {
    color: #999;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
  }
  .loa_header_content .header_item_curr {
    color: #fff;
  }
  
  .loa_img0 {
    background: url("../img/explore.png?v=20230518") no-repeat;
  }
  
  .loa_img1 {
    background: url("../img/shikigamia.png?v=20230523") no-repeat;
  }
  
  .loa_img2 {
    background: url("../img/features.png?v=20230518") no-repeat;
  }
  
  .loa_img3 {
    background: url("../img/playNow.png?v=20230518") no-repeat;
  }
  
  .loa_img0_on {
    background: url("../img/explore_y.png?v=20230518") no-repeat;
  }
  
  .loa_img1_on {
    background: url("../img/shikigamia_y.png?v=20230523") no-repeat;
  }
  
  .loa_img2_on {
    background: url("../img/features_y.png?v=20230518") no-repeat;
  }
  
  .loa_img3_on {
    background: url("../img/playNow_y.png?v=20230518") no-repeat;
  }
  
  .close_menu {
    background: url("../img/return.png?v=20230518") no-repeat;
  }
  
  .loa_fade_out {
    left: 0;
    transition: all 1s;
  }
  
  .swiper_left_nav {
    width: 30px;
    height: 394px;
    background: url(../img/pc/common/spLeft.png) no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
  }
  .loa_left_item_a {
    margin-top: 62px;
  }
  .loa_left_item {
    margin-bottom: 20px;
    margin-left: 50px;
    cursor: pointer;
  }
  .currNav {
    position: absolute;
    left: -8px;
    display: none;
  }
  .currNav_a {
    top: 25px;
    display: block;
  }
  .currNav_b {
    top: 59px;
  }
  .currNav_c {
    top: 96px;
  }
  .currNav_d {
    top: 133px;
  }
  .currNav_e {
    top: 168px;
  }
  .currNav_f {
    top: 206px;
  }
  .currNav_g {
    top: 243px;
  }
  
  .pa_aside_float {
    /* display: none; */
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    background: url("../img/pc/common/suspension.png");
    background-size: 100% 100%;
    width: 255px;
    height: 403px;
    transition: all 1s;
  }
  
  .pa_aside_btn {
    position: absolute;
    top: 180px;
    right: 48px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .pa_aside_btn div {
    margin-bottom: -7px;
    cursor: pointer;
  }
  
  .pa_aside_btn img {
    width: 156px;
  }
  
  .pa_aside_btn div:last-child img{
    width: 150px;
  }
  
  
  .in_touch {
    background: url(../img/right_btn.png?v=20230518) no-repeat;
    background-position: 50% 45%;
    width: 35px;
    height: 35px;
    background-color: #fff;
  }
  
  .fade_out {
    right: -207px;
    transition: all 1s;
  }
  
  .pa_aside_top {
    cursor: pointer;
    position: absolute;
    width: 80px;
    height: 40px;
    bottom: 15px;
    right: 50px;
  }
  
  .swiper-out {
    height: 100%;
    width: 100%;
  }
  
  .home_bg {
    position: relative;
    height: 100%;
    width: 100%;
    /* background: url("../img/home_pcbg.jpg?v=20230518") no-repeat; */
    background-size: 100% 100%;
  }
  
  .home_bg .video {
    width: 100%;
    height: calc(100% + 45px);
    position: absolute;
    background-position: 50%;
    background-size: contain;
    object-fit: cover;
  }
  
  .home_content {
    position: relative;
    width: 100%;
    height: 100%;
    /* background: url("../img/home_role.png?v=20230518") no-repeat center center; */
  }
  
  .home_top {
    min-width: 100%;
    height: 45px;
    background: url("../img/top.png?v=20230518") no-repeat center center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
  }
  
  .home_logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 230px;
  }
  
  .home_logo img {
    width: 280px;
  }
  
  .home_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    display: flex;
  }
  
  .home_btn div {
    margin: 0 10px;
  }
  
  .home_btn img {
    width: 200px;
  }
  
  .page_next {
    position: absolute;
    left: 50%;
    /* transform: translateX(-50%); */
    bottom: 30px;
    animation: nextPage_ami 1.5s infinite;
  }
  
  .page_next img {
    width: 40px;
  }
  
  .indexBtn {
    cursor: pointer;
    animation: scaleAnimation 1s ease 0s infinite normal forwards;
  }
  
  .info_bg {
    position: relative;
    height: 100%;
    width: 100%;
    background: url("../img/explore_info.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    z-index: 5;
  }
  
  .info_bg .video {
    width: 100%;
    height: calc(100% + 45px);
    position: absolute;
    background-position: 50%;
    background-size: contain;
    object-fit: cover;
  }
  
  .info_content {
    width: 100%;
    height: 100%;
    background: url("../img/genesis_bg.png?v=20230518") no-repeat center center;
  }
  
  .role_bg {
    height: 100%;
    width: 100%;
    /* background: url("../img/video_img.jpg?v=20230518") no-repeat;
    background-size: 100% 100%; */
    position: relative;
  }
  
  .hero_box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .hero_content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .hero_img {
    object-fit: fill;
    -webkit-animation: hero_img_fade_in 0.6s infinite;
    animation: hero_img_fade_in 0.6s infinite;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }
  
  .hero_img_0 {
  
    position: absolute;
    right: 2%;
    top: 14%;
  }
  
  .hero_img_1 {
  
    position: absolute;
    right: 2%;
    top: -17%;
  }
  
  .hero_img_2 {
  
    position: absolute;
    right: 17%;
    top: 18%;
  }
  
  .hero_img_3 {
    position: absolute;
    right: 2%;
    top: 2%;
  }
  
  .hero_img_4 {
    position: absolute;
    right: 2%;
    top: 2%;
  }
  
  .hero_aside {
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  
  .hero_camp {
    position: absolute;
    top: 18%;
    left: 15%;
    width: 30%;
    height: 4em;
    background: url(../img/camp_bg.png?v=20230518) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
  }
  
  .hero_camp_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 25%;
    width: 80%;
  }
  
  .camp0 {
    width: 0.9em;
    height: 0.9em;
    margin: 10px 20px 10px;
    background: url("../img/maiden.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  
  .camp1 {
    width: 0.9em;
    height: 0.9em;
    margin: 10px 20px 10px;
    background: url("../img/prajna.png?v=20230109") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  
  .camp2 {
    width: 0.9em;
    height: 0.9em;
    margin: 10px 20px 10px;
    background: url("../img/dog.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  
  .camp3 {
    width: 0.9em;
    height: 0.9em;
    margin: 10px 20px 10px;
    background: url("../img/muramasa.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  
  .camp4 {
    width: 0.9em;
    height: 0.9em;
    margin: 10px 20px 10px;
    background: url("../img/paperDemon.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  
  .camp0.camp_active {
    background: url("../img/maiden_active.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .camp1.camp_active {
    background: url("../img/prajna_active.png?v=20230109") no-repeat;
    background-size: 100% 100%;
  }
  
  .camp2.camp_active {
    background: url("../img/dog_active.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .camp3.camp_active {
    background: url("../img/muramasa_active.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .camp4.camp_active {
    background: url("../img/paperDemon_active.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .hero_btn {
    position: absolute;
    right: 0;
    bottom: 2%;
    width: 55%;
    height: 2em;
    background: url("../img/hero_btn_bg.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    display: flex;
  }
  
  .west_btn1 {
    width: 1em;
    height: 1em;
    /* background-color: #fff; */
    background: url("../img/west_btn1.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    margin-left: 8.2%;
    transform: translateY(0.9em);
    cursor: pointer;
  }
  
  .west_btn2 {
    width: 1em;
    height: 1em;
    background: url("../img/west_btn2.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.8em);
    cursor: pointer;
  }
  
  .west_btn3 {
    width: 1em;
    height: 1em;
    background: url("../img/west_btn3.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.7em);
    cursor: pointer;
  }
  
  .west_btn4 {
    width: 1em;
    height: 0.98em;
    background: url("../img/west_btn4.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.6em);
    cursor: pointer;
  }
  
  .west_btn5 {
    width: 1em;
    height: 1em;
    background: url("../img/west_btn5.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.5em);
    cursor: pointer;
  }
  
  .west_btn1.active {
    background: url("../img/west_active_btn1.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .west_btn2.active {
    background: url("../img/west_active_btn2.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .west_btn3.active {
    background: url("../img/west_active_btn3.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .west_btn4.active {
    background: url("../img/west_active_btn4.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .west_btn5.active {
    background: url("../img/west_active_btn5.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .infernal_btn1 {
    width: 1em;
    height: 1em;
    background: url("../img/infernal_btn1.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    margin-left: 8.2%;
    transform: translateY(0.9em);
    cursor: pointer;
  }
  
  .infernal_btn2 {
    width: 1em;
    height: 1em;
    background: url("../img/infernal_btn2.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.8em);
    cursor: pointer;
  }
  
  .infernal_btn3 {
    width: 1em;
    height: 1em;
    background: url("../img/infernal_btn3.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.7em);
    cursor: pointer;
  }
  
  .infernal_btn4 {
    width: 1em;
    height: 0.98em;
    background: url("../img/infernal_btn4.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.6em);
    cursor: pointer;
  }
  
  .infernal_btn1.active {
    background: url("../img/infernal_active_btn1.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .infernal_btn2.active {
    background: url("../img/infernal_active_btn2.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .infernal_btn3.active {
    background: url("../img/infernal_active_btn3.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .infernal_btn4.active {
    background: url("../img/infernal_active_btn4.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .east_btn1 {
    width: 1em;
    height: 1em;
    background: url("../img/east_btn1.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    margin-left: 8.2%;
    transform: translateY(0.9em);
    cursor: pointer;
  }
  
  .east_btn2 {
    width: 1em;
    height: 1em;
    background: url("../img/east_btn2.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.8em);
    cursor: pointer;
  }
  
  .east_btn3 {
    width: 1em;
    height: 1em;
    background: url("../img/east_btn3.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.7em);
    cursor: pointer;
  }
  
  .east_btn4 {
    width: 1em;
    height: 0.98em;
    background: url("../img/east_btn4.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.6em);
    cursor: pointer;
  }
  
  .east_btn5 {
    width: 1em;
    height: 1em;
    background: url("../img/east_btn5.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    transform: translateY(0.5em);
    cursor: pointer;
  }
  
  .east_btn1.active {
    background: url("../img/east_active_btn1.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .east_btn2.active {
    background: url("../img/east_active_btn2.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .east_btn3.active {
    background: url("../img/east_active_btn3.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .east_btn4.active {
    background: url("../img/east_active_btn4.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .east_btn5.active {
    background: url("../img/east_active_btn5.png?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .maiden_img_0 {
    width: 53%;
    position: absolute;
    right: 10%;
    top: 12%;
  }
  
  .prajna_role_img {
    width: 53%;
    position: absolute;
    right: 10%;
    top: 6%;
  }
  
  .dog_role_img {
    width: 60%;
    position: absolute;
    right: 2%;
    top: -22%;
  }
  
  .muramasa_role_img {
    width: 63%;
    position: absolute;
    right: 19%;
    top: 10%;
  }
  
  .paperDemon_role_img {
    width: 53%;
    position: absolute;
    right: 8%;
    top: 14%;
  }
  
  
  .hero_bg0 {
    background: url("../img/genesis_bg.jpg?v=20230518") no-repeat;
    background-size: 100% 100%;
    display: none;
  }
  
  .hero_bg1 {
    background: url("../img/genesis_bg.jpg?v=20230518") no-repeat;
    background-size: 100% 100%;
    display: none;
  }
  
  .hero_bg2 {
    background: url("../img/genesis_bg.jpg?v=20230518") no-repeat;
    background-size: 100% 100%;
    display: none;
  }
  
  .hero_bg3 {
    background: url("../img/genesis_bg.jpg?v=20230518") no-repeat;
    background-size: 100% 100%;
    display: none;
  }
  
  .hero_bg4 {
    background: url("../img/genesis_bg.jpg?v=20230518") no-repeat;
    background-size: 100% 100%;
    display: none;
  }
  
  .hero_bg0.active {
    display: block;
  }
  
  .hero_bg1.active {
    display: block;
  }
  
  .hero_bg2.active {
    display: block;
  }
  
  .hero_bg3.active {
    display: block;
  }
  
  .hero_bg4.active {
    display: block;
  }
  
  .new_bg {
    height: 100%;
    width: 100%;
    background: url("../img/new_pcbg.jpg?v=20230518") no-repeat;
    background-size: 100% 100%;
  }
  
  .new_content {
    height: 100%;
    width: 100%;
    background: url("../img/new_content_bg.png?v=20230518") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  
  .swiper_content {
    position: absolute;
    top: 0;
    width: 50%;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -63%);
  }
  
  .swiper-new {
    width: 100%;
    height: 100%;
  }
  
  .border_bg {
  
  }
  
  .swiper-new .swiper-slide {
    transform-style: preserve-3d;
    /* 保持3D空间效果 */
    perspective: 2000px;
    filter: brightness(0.3);
    /* 透视距离，调整此值可以改变3D效果的强度 */
  }
  .swiper-new .swiper-wrapper .swiper-slide-active {
    filter: brightness(1);
  }
  .swiper-new img {
    width: 100%;
    height: 100%;
  }
  
  .swiper-new .swiper-wrapper {
    width: 80%;
  }
  
  .swiper-pagination-new {
    position: absolute;
    left: 50%;
    bottom: -80px;
    transform: translateX(-50%) !important;
    z-index: 99;
  }
  
   .swiper-pagination-bullets {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: -30px;
  }
  
  .swiper-pagination-new .swiper-pagination-bullet {
    background: url("../img/pc/pc_6/switch.png") no-repeat;
    width: 19px;
    height: 20px;
    opacity: 1;
    box-sizing: border-box;
    margin: 0 0.1em;
    background-size: 100% 100%;
  }
  
  .swiper-pagination-new .swiper-pagination-bullet-active {
    background: url("../img/pc/pc_6/switch_on.png") no-repeat;
    width: 40px;
    height: 42px;
    box-sizing: border-box;
    background-size: 100% 100%;
  }
  
  .right_btn {
    position: absolute;
    top: 50%;
    transform: translate(-150%, -50%);
    left: 0;
    width: 158px;
    height: 139px;
    background: url("../img/pc/pc_6/right_btn.png") no-repeat;
    /* background-size: 100% 100%; */
    cursor: pointer;
    animation: glow 1.5s infinite alternate;
  }
  .left_btn {
    position: absolute;
    top: 50%;
    transform: translate(150%, -50%);
    right: 0;
    width: 158px;
    height: 139px;
    background: url("../img/pc/pc_6/left_btn.png") no-repeat;
    /* background-size: 100% 100%; */
    cursor: pointer;
    animation: glow 1s infinite alternate;
  }
  @keyframes glow {
    from {
        filter: brightness(90%);
    }
    to {
        filter: brightness(150%);
    }
  }
  .play_bg {
    width: 100%;
    height: 178px!important;
    background: url("../img/pc/pc_6/bottom_bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .bottom_content_box {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
    height: 126px;
    color: #fff;
  }
  
  .link_text {
    display: flex;
    justify-content: space-around;
    width: 200px;
  }
  
  .link_text a {
    color: #fff;
  }
  
  .bottom_btn_flex {
    display: flex;
    justify-content: space-between;
    margin: 0 5%;
  }
  
  .commuty {
    margin: 20px 0 2% 5%;
  }
  
  .commuty img {
    width: 35%;
  }
  
  .bottom_btn_box {
    margin-bottom: 3%;
  }
  
  .bottom_btn_box img {
    width: 25%;
    margin-right: 10px;
  }
  
  .bottom_follow {
    margin-bottom: 3%;
  }
  
  .bottom_follow img {
    width: 25%;
  }
  
  .right_btn_box {
    display: flex;
  }
  
  .right_btn_item {
    margin-right: 20px;
  }
  
  .right_btn_top {
    margin-bottom: 15px;
  }
  
  .right_btn_box img {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .bottom_logo {
    text-align: center;
    width: 100%;
    margin-top: 4%;
  }
  
  .bottom_logo img {
    width: 25%;
  }
  
  @media screen and (min-width: 1800px) {
    .home_bg .video {
      object-position: 100% 85%;
    }
  }
  
  @keyframes hero_img_fade_in {
    0% {
      opacity: 0;
      filter: alpha(opacity=0);
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
    }
  
    100% {
      opacity: 1;
      filter: alpha(opacity=0);
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  @keyframes nextPage_ami {
    0% {
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0);
    }
  
    100% {
      opacity: 0;
      -webkit-transform: translateY(30px);
      transform: translateX(-50%) translateY(30px);
    }
  }
  
  .menu_btn {
    width: 25px;
    height: 25px;
    line-height: 30px;
    margin-left: 23px;
    margin-right: 25px;
  }
  
  
  /* PA oversea */
  .one_bg {
    background: url(../img/pc/pc_1/one_bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .one_character {
    position: absolute;
    bottom: 0;
    left: 6%;
  }
  .one_btn_group {
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    filter: brightness(0.6);
  }
  .next_page {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translate(-50%, 0);
    text-align: center;
    width: 1065px;
    vertical-align: middle;
  }
  .next_page img {
    vertical-align: middle;
  }
  .next_btn {
    margin-top: 20px;
    cursor: pointer;
  }
  .one_make_point {
    width: 80%;
    animation: scaleAnimation 1s ease 0s infinite normal forwards;
  }
  
  /* .vedio_bg {
    background: url(../img/pc/pc_1/vedio_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 20%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  
  .video_bg {
    position: relative;
    margin-top: 3%;
    width: 285px;
    height: 141px;
  }
  
  .video_bg :nth-child(1) {
    width: 100%;
  } 
  
  .home_content .video_btn:hover {
    /* animation: glow 1.5s infinite alternate; */
    filter: brightness(1);
  }
  
  .video_top {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .video_top :nth-child(1) {
    width: 5vw!important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: calc(50% - 2.5vw);
    animation: rotate 3s linear infinite;
  }
  
  .video_top :nth-child(2) {
    width: 4.5vw !important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: calc(50% - 2.25vw);
    animation: rotate_reverse 3s linear infinite;
  }
  .video_top :nth-child(3) {
    width: 1.5vw !important;
    position: absolute;
    left: calc(50% - 0.55vw);
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes rotate_reverse {
    from {
      transform: rotate(360deg);
    }
  
    to {
      transform: rotate(0deg);
    }
  }
  
  
  .store_group {
    width: 80%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 3%;
  }
  
  .store_group a {
    width: 45%;
  }
  
  .store_group img {
    width: 100%;
  }
  
  
  .two_bg {
    background: url(../img/pc/pc_2/two_bg.jpg) no-repeat;
    background-size: 100% 100%;
  }
  .two_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .yy_card {
    background: url(../img/pc/pc_2/card.png) no-repeat;
    background-size: 100% 100%;
    /* width: 1887px;
    height: 883px; */
    width: 1415px;
    height: 662px;
    /* transform: scale(.75); */
    position: relative;
    top: 23vh;
  }
  
  .yy_box {
    position: absolute;
    width: 35%;
    height: 45%;
    right: 19%;
    top: 11%;
  }
  .yy_box_new {
    margin-top: 198px;
  }
  .yy_box_new_top {
    width: 1182px;
    height: 431px;
    background: url(../img/pc/pc_2/yybg_top.png) no-repeat;
    background-size: 100% 100%;
  }
  .yy_box_cont {
    display: flex;
  }
  .box_cont_right {
    padding-top: 83px;
  }
  .box_cont_chanel img {
    cursor: pointer;
  }
  .yy_box_new_bottom {
    margin-top: -20px;
    width: 1182px;
    height: 296px;
    background: url(../img/pc/pc_2/yybg_bottom.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  
  .checkbox_store {
    width: 68%;
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-top: 2%;
    align-items: center;
  }
  
  .checkbox_store img {
    cursor: pointer;
    width: 45%;
  }
  .input_content {
    width: 96%;
    display: flex;
    justify-content: flex-start;
    /* margin-left: 5%; */
    margin-top: 16px;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding-bottom: 10px;
    height: 41px;
    font-size: 0.5rem;
    position: relative;
  }
  .phone_input {
    width: 100%;
    min-width: 200px;
    padding-left: 70px;
    font-size: 20px;
    color: #999;
    border: none;
    background-color: transparent;
  }
  .input_content .smsPage {
    top: 10px;
    left: 10px;
  }
  input:focus {
    outline: none;
    border: none;
  }
  
  .re_btn {
    width: 88%;
    margin: auto;
    animation: scaleAnimation 1s ease 0s infinite normal forwards; 
    margin-top: 5%;
  }
  
  .yy_box_download {
    position: absolute;
    right: 30px;
    top: 70px;
  }
  
  .re_btn .re_character {
    width: 20%;
    position: absolute;
    top: -36%;
    right: 6%;
  }
  
  .re_btn img {
    width: 100%;
    cursor: pointer;
  }
  .two_store {
    position: absolute;
    /* width: 240px; */
    width: 13%;
    position: absolute;
    right: 24%;
    bottom: 17%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 20%;
  }
  
  .two_store a{
    width: 100%;
    height: 50%;
  }
  
  .agreement {
    color: #f4ddc2;
    display: flex;
    width: 90%;
    /* margin-left: 5%; */
    margin-top: 10px;
    /* font-size: 18px; */
    font-size: 0.8rem;
    position: relative;
  }
  .agreement span{
    color: #f4ddc2;
    text-decoration: underline;
    cursor: pointer;
  }
  .notice {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
  .notice_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 300;
    display: none;
  }
  .notice_cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .smscode_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
  }
  .smscode_cont {
   width: 667px;
   height: 457px;
   background: url(../img/pc/pc_2/smsBg.png) no-repeat;
   background-size: 100% 100%; 
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  }
  .input_a {
    margin-top: 120px;
    margin-left: 50px;
    display: flex;
    align-items: center;
    position: relative;
  }
  .input_a input {
    width: 311px;
    height: 58px;
    background: #fff;
    padding-left: 90px;
    font-size: 24px;
    border: none;
    color: #999;
    border-radius: 5px 0 0 5px;
  }
  .smsBtnCode {
    width: 163px;
    height: 61px;
    background: url(../img/pc/pc_2/smsBtn.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 61px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  .smsNum {
    position: absolute;
    left: 25px;
    top: 15px;
    color: #999;
    font-size: 24px;
  }
  .input_b {
    margin-top: 29px;
    margin-left: 50px;
  }
  .input_b input {
    width: 530px;
    height: 58px;
    background: #fff;
    padding-left: 30px;
    font-size: 24px;
    border: none;
    color: #999;
    border-radius: 5px;
  }
  .input_btn {
    margin-top: 29px;
    margin-left: 40px;
    cursor: pointer;
  }
  
  .checkbox {
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
  }
  
  .agree_text {
    /* line-height: 35px; */
    font-size: 0.75vw;
  }
  
  .two_store img {
    width: 100%;
    cursor: pointer;
  }
  
  /* page3 */
  .three_bg {
    background: url(../img/pc/pc_3/three_bg.jpg) no-repeat;
    background-size: 100% 100%;
  }
  
  .three_title {
    /* width: 100%; */
    /* display: flex; */
    /* justify-content: center; */
    /* top: 10%; */
    width: 874px;
    margin: 0 auto;
    text-align: center;
    text-align: center;
    padding-top: 30px;
    position: relative;
  }
  
  .three_title img{
    width: 70%;
  }
  .three_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1000px;
    margin: -50px auto;
  }
  .three_content div{
    width: 313px;
    height: 270px;
  }
  .three_content .foot {
    width: 475px;
    height: 346px;
  }
  .three_content div img {
    width: 100%;
    height: 100%;
  }
  .person_num {
    position: absolute;
    top: 25%;
    color: #fff;
    display: flex;
    justify-content: space-around;
    width: 40%;
    font-size: 20px;
    color: #f6eccb;
    line-height: 1.2;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    align-items: center;
  }
  .totalPersonNum {
    position: absolute;
    top: 50px;
  }
  .three_personNum {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 140px;
    color: #f6eccb;
    font-size: 20px;
    vertical-align: middle;
    display: flex;
  }
  
  .progress_card {
    position: absolute;
    top: 48%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
  
  .progress_content {
    background: url(../img/pc/pc_3/top.png) no-repeat;
    background-size: 100% 100%;
    /* width: 1050px;
    height: 360px; */
    width: 55%;
    height: 36%;
  }
  
  .progress_bg {
    background: url(../img/pc/pc_3/progress_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 68.5%;
    height: 4.35%;
    position: absolute;
    top: 17.5%;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
  }
  
  .progress {
    width: 0%;
    background-color: #6b2324;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    position: relative;
    left: 8.8%;
  }
  
  
  .progress img {
    width: 100%;
    height: 10px;
  }
  .award_make_point {
    position: absolute;
    left: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 325px;
    bottom: 3%;
    animation: scaleAnimation 1s ease 0s infinite normal forwards;
  }
  
  .award_make_point img {
    width: 100%;
    cursor: pointer;
  }
  
  .all_award {
    position: relative;
    bottom: 20%;
    width: 100%;
    height: 100%;
  }
  
  .award_item1{
    position: absolute;
    left: -3.7%;
    bottom: 34%;
    width: 17%;
  }
  
  .award_item2 {
    position: absolute;
    left: 18.5%;
    bottom: 38%;
    width: 17%;
  }
  
  .award_item3 {
    position: absolute;
    left: 40.6%;
    bottom: 43%;
    width: 17%;
  }
  
  .award_item4 {
    position: absolute;
    left: 62.8%;
    bottom: 51%;
    width: 17%;
  }
  
  .award_item5 {
    position: absolute;
    left: 82.3%;
    bottom: 60%;
    width: 21%;
  }
  
  
  .award_item1_on {
    position: absolute;
    left: -8.4%;
    bottom: 31%;
    width: 24.7%;
  }
  
  .award_item2_on {
    position: absolute;
    left: 13.8%;
    bottom: 35%;
    width: 24.7%;
  }
  .award_item3_on {
    position: absolute;
    left: 36%;
    bottom: 39%;
    width: 24.7%;
  }
  .award_item4_on {
    position: absolute;
    left: 58.05%;
    bottom: 47%;
    width: 24.7%;
  }
  
  .award_item5_on {
    position: absolute;
    left: 80.2%;
    bottom: 57%;
    width: 24.7%;
  }
  .all_star {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 8.8%;
  }
  .all_star img {
    width: 1.2%;
  }
  .star1 {
    position: absolute;
    left: 4.2%;
    bottom: 28%;
  }
  .star2 {
    position: absolute;
    left: 22.1%;
    bottom: 28%;
  }
  .star3 {
    position: absolute;
    left: 39.9%;
    bottom: 28%;
  }
  .star4 {
    position: absolute;
    left: 57.7%;
    bottom: 28%;
  }
  .star5 {
    position: absolute;
    left: 75.5%;
    bottom: 28%;
  }
  
  /* page4 */
  .four_page {
    background: url(../img/pc/pc_4/four_bg.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .four_page .title {
    /* position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    top: 10%; */
    width: 26%;
    margin-top: -30px;
  }
  .lottery_bg {
    background: url(../img/pc/pc_4/card.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 24%;
    width: 1100px;
    height: 530px;
    /* left: calc(50% - 550px); */
    /* transform: scale(0.85); */
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .lottery_bg_new {
    background: url(../img/pc/pc_4/card.png) no-repeat;
    background-size: 100% 100%;
    width: 57.29%;
    height: 54%;
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .lottery_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: 455px;
    width: 1020px;
    margin: 3% 4%;
    /* height: 27vw;
    width: 95%;
    padding: 3% 2.8%; */
  }
  
  .lottery_bottom {
    position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    margin: auto;
    /* width: 800px; */
    width: 45%;
  }
  
  #share_link {
    width: 100%;
  }
  
  #open_community {
    width: 100%;
  }
  
  .sns_shareList {
    width: 291px;
    height: 49px;
    background: url(../img/pc/common/sns_share.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -50px;
    left: -45px;
    z-index: 102;
    display: none;
  }
  .sns_shareList_cont {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .sns_shareList span {
    display: block;
    width: 38px;
    height: 38px;
    margin-top: 5px;
    margin-left: 16px;
  }
  .sns_shareList a:nth-child(1) {
    margin-left: 18px;
  }
  
  .lottery_btn_group {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .lottery_btn_group> :nth-child(1) {
    width: 200px;
    height: 47px;
    margin-top: 36px;
    cursor: pointer;
  }
  
  .lottery_btn_group> :nth-child(2) {
    width: 315px;
    height: 98px;
    cursor: pointer;
    animation: scaleAnimation 1s ease 0s infinite normal forwards;
  }
  
  .lottery_btn_group> :nth-child(3) {
    width: 200px;
    height: 47px;
    margin-top: 36px;
    cursor: pointer;
  }
  
  .lottery_total {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
    font-size: 16px;
  }
  
  .lottery_text {
    color: rgb(163, 150, 120);
  }
  .lottery_num {
    color: rgb(232,73,29);
  }
  
  .logo_center {
    /* width: 332px!important;
    height: 143px!important; */
    width: 30% !important;
    height: 30% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .logo_center img{
    /* width: 75%!important; */
    /* height: 75%!important; */
  }
  
  .lottery_list {
    position: absolute;
    right: 0;
    top: 245px;
  }
  
  .list_cont {
    width: 268px;
    height: 308px;
    background: url(../img/pc/pc_4/lottery_num.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
  }
  .list_cont_a {
    width: 268px;
    height: 308px;
    overflow: hidden;
    position: relative;
    margin-top: 50px;
  }
  .awardList {
    /* height: 226px;
    overflow: hidden;
    padding-top: 73px;
    color: #666;
    text-align: center; */
  
    position: absolute;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
      color: #666;
  }
  .awardList div {
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    /* animation: scroll 10s linear infinite; */
  }
  @keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
  }
  
  .five_page {
    background: url(../img/pc/pc_5/five_bg.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  
  .five_title {
    justify-content: flex-start!important;  
    text-align: center;
  }
  .five_content {
    height: 100%;
  }
  .five_roleCont {
    /* padding: 0px 200px; */
    display: flex;
    width: 1250px;
    margin: 0 auto;
    flex: 1;
  }
  .five_roleCont div {
    margin-right: 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 197px;
    height: 457px;
    
  }
  .five_roleCont .roleGray {
    filter: brightness(0.5);
  }
  .five_content .five_roleCont .currRoleColor {
    filter: brightness(1);
  }
  .five_roleCont div:hover {
    transform: scale(1.1);
  }
  .five_roleCont div:nth-child(1) {
    margin-top: -50px;
  }
  .five_roleCont div:nth-child(2) {
   
  }
  .five_roleCont div:nth-child(3) {
    margin-top: -50px;
  }
  .five_roleCont div:nth-child(4) {
  }
  .five_roleCont div:nth-child(5) {
    margin-top: -50px;
  }
  .five_roleCont div:nth-child(6) {
  }
  .five_roleCont div:nth-last-child(1) {
    margin-right: 0;
  }
  
  
  .rolePop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
  }
  .rolePop_cont {
  
  }
  .rolePage_left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(-50%, 0);
    cursor: pointer;
  }
  .rolePage_right {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translate(-50%, 0);
    cursor: pointer;
  }
  .role_video {
    position: absolute;
    bottom: 70px;
    left: 270px;
    width: 369px;
    height: 207px;
    background: url(../img/pc/pc_5/roleVideoBg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .role_video img {
    cursor: pointer;
  }
  
  .swiper_role {
    height: 100%;
  }
  
  .icon_container {
    display: flex;
    flex-direction: column;
    width: 5.2%;
    position: absolute;
    right: 7%;
    top: 15%;
    height: 70%;
    justify-content: space-evenly;
    z-index: 199;
  }
  
  .icon_container img {
    cursor: pointer;
    width: 100%;
  }
  
  @keyframes slide-in-right {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slide-in-left {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .slide_right {
    animation: slide-in-right 1s forwards;
  }
  
  .slide_left {
    animation: slide-in-left 1s forwards;
  }
  
  .cm_role_1,
  .cm_role_3,
  .cm_role_4,
  .cm_role_2,
  .cm_role_5,
  .cm_role_6,
  .cm_introduce1,
  .cm_introduce2,
  .cm_introduce3,
  .cm_introduce4,
  .cm_introduce5,
  .cm_introduce6 {
    opacity: 0;
  }
  
  
  
  /*  */
  .sun_bg {
    position: absolute;
    width: 100vh;
    right: 11vw;
    top: 4vw;
  }
  .five_content .cm_role_1 {
    position: absolute;
    right: 5vw;
    height: 80vh;
    bottom: 0%;
  }
  .five_content .cm_role_2 {
    position: absolute;
    right: 5.2vw;
    height: 81vh;
    bottom: 0%;
  }
  
  .five_content .cm_role_3 {
    position: absolute;
    right: 6.5vw;
    height: 88vh;
    bottom: 0%;
  }
  
  .five_content .cm_role_4 {
    position: absolute;
    right: 5vw;
    height: 78vh;
    bottom: 0%;
  }
  
  .five_content .cm_role_5 {
    position: absolute;
    right: 6vw;
    height: 90vh;
    bottom: 0%;
  }
  
  .five_content .cm_role_6 {
    position: absolute;
    right: 15vw;
    height: 84vh;
    bottom: 0%;
  }
  
  .video_dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 199;
  }
  
  .video_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .video_content {
    width: 50%;
    position: relative;
  }
  
  .video_close {
    position: absolute;
    top: -30px;
    right: -40px;
    cursor: pointer;
  }
  
  .video_preview {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }
  
  .preview_bg {
  }
  
  /* .five_content .cm_role_2 {
    position: absolute;
    right: 6%;
    width: 61%;
    bottom: 0%;
  }
  .five_content .cm_role_3 {
    position: absolute;
    right: 6%;
    width: 58%;
    bottom: 0%;
  }
  .five_content .cm_role_4 {
    position: absolute;
    right: 5%;
    width: 50%;
    bottom: 0%;
  }
  .five_content .cm_role_5 {
    position: absolute;
    right: 7%;
    width: 59%;
    bottom: 0%;
  }
  
  .five_content .cm_role_6 {
    position: absolute;
    right: 16.8%;
    width: 53%;
    bottom: 0%;
  } */
  
  
  
  .sevent_page {
    background: url(../img/pc/pc_7/newpageBg.jpg) no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  
  
  
  .cm_introduce1 {
    position: absolute;
    top: 38%;
    left: 6%;
    width: 18%;
  }
  
  .cm_introduce2 {
    position: absolute;
    top: 38%;
    left: 6%;
    width: 20%;
  }
  .cm_introduce3 {
    position: absolute;
    top: 38%;
    left: 6%;
    width: 18%;
  }
  
  .cm_introduce4 {
    position: absolute;
    top: 38%;
    left: 6%;
    width: 21%;
  }
  
  .cm_introduce5 {
    position: absolute;
    top: 38%;
    left: 6%;
    width: 20%;
  }
  
  .cm_introduce6 {
    position: absolute;
    top: 38%;
    left: 6%;
    width: 18%;
  }
  
  .six_page {
    background: url(../img/pc/pc_6/six_bg.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  
  .title {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -30px;
  }
  
  .title img {
    /* width: 20%; */
  }
  
  .award_item {
    padding: 4px 4px;
    width: 30%;
  }
  
  .award_item img {
    margin-top: 4px;
    width: 100%;
  }
  
  
  .select_box {
    background: url(../img/pc/pc_4/select_box.png) no-repeat;
    background-size: 100% 100%;
  }
  
  @keyframes scaleAnimation {
    0% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.1);
    }
  
    100% {
      transform: scale(1);
    }
  }
  
  .person_info_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 101;
    display: none;
  }
  
  .person_info_container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .person_info_content {
    background: url(../img/pc/common/info_dialog.png) no-repeat;
    background-size: 100% 100%;
    width: 48%;
    height: 75%;
    position: relative;
  }
  
  .info_close_btn {
    position: absolute;
    top: 6%;
    right: 5%;
    cursor: pointer;
  }
  
  .activity_close_btn {
    position: absolute;
    top: 8%;
    right: 5%;
    cursor: pointer;
  }
  
  .activity_info_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 101;
    display: none;
  }
  
  .activity_info_content {
    background: url(../img/pc/common/activity_info_dialog.png) no-repeat;
    background-size: 100% 100%;
    width: 1067px;
    height: 352px;
    position: relative;
  }
  
  .code_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
  }
  
  .all_code {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .code_content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .code_container {
    background: url(../img/pc/common/gift_code_dialog.png?v=1) no-repeat;
    background-size: 100% 100%;
    width: 668px;
    height: 512px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .code_close_btn {
    position: absolute;
    top: 8%;
    right: 5%;
    cursor: pointer;
  }
  
  .code_text {
    font-size: 1.8vw;
    color: #c0a171;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* 12.24新增弹窗 */
  .register_code_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
  }
  .register_code_cont {
    width: 1067px;
    height: 512px;
    background: url(../img/pc/pc_2/regi_code_bg.jpg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .register_code_a {
    padding-top: 99px;
    padding-left: 108px;
  }
  .register_code_b {
    width: 394px;
    height: 63px;
    background: url(../img/pc/pc_2/regi_code_txt.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    margin-left: 155px;
    margin-top: 18px;
  }
  .register_code_b span {
    color: #666;
    margin-left: 130px;
    padding-top: 20px;
    display: block;
    font-size: 20px;
  }
  .register_code_c {
    margin-left: 155px;
    margin-top: 48px;
  }
  .register_code_c a:nth-child(2) {
    margin-left: 30px;
  }
  .register_code_d {
    margin-left: 155px;
    margin-top: -10px;
  }
  
  /* common */
  .toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
  }
  
  .toast {
    padding: 10px 20px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  
  .register_dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
  }
  .register_bg {
    width: 667px;
    height: 737px;
    background: url(../img/pc/common/rigisterBg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
  .register_cont {
    padding: 140px 42px;
  }
  .register_close {
    position: absolute;
    right: -20px;
    top: -15px;
    cursor: pointer;
  }