.item_hover {
  overflow: hidden; }
  .item_hover:hover img {
    transform: scale(1.05); }
  .item_hover img {
    width: 100%;
    height: 100%;
    transition: .6s ease; }

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; }

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1; }

.common_title.center {
  text-align: center; }
.common_title .cn {
  font-weight: 900; }
.common_title .en {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 900;
  opacity: 0.1; }

.index1 {
  height: 100vh;
  position: relative;
  z-index: 1; }
  .index1 video,.index1 img {
    width: 100%;
    height: 100vh;
    object-fit: cover; }
  .index1 .title {
    position: absolute;
    width: 100%;
    padding: 0 12.5vw 0 15vw;
    top: 40%;
    left: 0;
    display: flex;
    justify-content: space-between; }
    .index1 .title p {
      color: #FFF;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      font-family: "Source Han Serif SC"; }
  .index1 .text {
    position: absolute;
    bottom: 4.84375vw;
    width: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    gap: 2.5vw; }
    .index1 .text p {
      color: #FFF;
      font-family: "Source Han Serif SC";
      font-style: normal;
      font-weight: 700;
      line-height: normal; }

.index2 {
  overflow: hidden;
  padding: 7.1875vw 8.3333333333vw 8.8020833333vw 8.3333333333vw; }
  .index2 .title .p1 {
    color: #000;
    font-style: normal;
    font-weight: 900;
    margin: 0 0 1.40625vw;
    line-height: 100%;
    position: relative; }
    .index2 .title .p1:after {
      content: '';
      width: 0.7291666667vw;
      height: 0.7291666667vw;
      border-radius: 50%;
      background: #BA0000;
      position: absolute;
      top: 0.3125vw;
      left: 5.9375vw; }
  .index2 .title .p2 {
    width: 31.40625vw;
    color: #666;
    font-style: normal;
    font-weight: 400;
    line-height: 177.778%;
    /* 177.778% */ }
  .index2 .content {
    margin: 1.5625vw 0 0 0;
    overflow: hidden;
    width: 95.8333333333vw;
    padding: 0 0 0 4.1666666667vw;
    position: relative;
    left: -4.1666666667vw; }
    .index2 .content .index2Swiper {
      width: 95.1041666667vw;
      overflow: unset;
      position: relative; }
      .index2 .content .index2Swiper .swiper-slide {
        padding: 4.1666666667vw 0; }
        .index2 .content .index2Swiper .swiper-slide.swiper-slide-active .item {
          box-shadow: 0 26px 64.7px 0 rgba(0, 0, 0, 0.1); }
          .index2 .content .index2Swiper .swiper-slide.swiper-slide-active .item .r .dis span, .index2 .content .index2Swiper .swiper-slide.swiper-slide-active .item .r .dis .dw {
            color: #000; }
        .index2 .content .index2Swiper .swiper-slide .item {
          border-radius: 1.5625vw;
          background: #FFF;
          height: 21.9270833333vw;
          padding: 3.1770833333vw 3.0208333333vw;
          display: flex;
          gap: 1.7708333333vw;
          transition: .6s ease; }
          .index2 .content .index2Swiper .swiper-slide .item .l {
            width: 17.8125vw; }
            .index2 .content .index2Swiper .swiper-slide .item .l .p1 {
              color: #000;
              font-style: normal;
              font-weight: 900;
              line-height: normal; }
            .index2 .content .index2Swiper .swiper-slide .item .l .p2 {
              color: rgba(162, 162, 162, 0.2);
              text-align: justify;
              font-style: normal;
              font-size: 1.7708333333vw;
              font-weight: 700;
              line-height: normal;
              text-transform: uppercase; }
          .index2 .content .index2Swiper .swiper-slide .item .r {
            width: 21.9270833333vw; }
            .index2 .content .index2Swiper .swiper-slide .item .r .dis {
              display: flex;
              gap: 1.5625vw; }
              .index2 .content .index2Swiper .swiper-slide .item .r .dis span {
                color: #D0D0D0;
                text-align: justify;
                font-family: "ES Build";
                font-size: 4.25vw;
                font-style: normal;
                font-weight: 700;
                line-height: 70%;
                transition: .6s ease; }
              .index2 .content .index2Swiper .swiper-slide .item .r .dis .dw {
                color: #D0D0D0;
                font-style: normal;
                font-weight: 700;
                font-family: "ES Build";
                line-height: normal;
                margin: 0.2083333333vw 0 0 0;
                transition: .6s ease; }
            .index2 .content .index2Swiper .swiper-slide .item .r .pick {
              margin: 2.8645833333vw 0 0 0;
              color: #666;
              text-align: justify;
              font-style: normal;
              font-weight: 400;
              line-height: 177.778%;
              /* 177.778% */ }

.index3 {
  padding: 2.6041666667vw 0 9.0104166667vw; }
  .index3 .common_title {
    padding: 0 10.2083333333vw; }
  .index3 .circle {
    width: 27.7604166667vw;
    height: 27.7604166667vw;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: 5.6770833333vw auto 4.8958333333vw; }
    .index3 .circle img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: 1s;
      pointer-events: none; }
      .index3 .circle img:hover {
        transform: rotate(180deg); }
      .index3 .circle img.on {
        opacity: 1;
        pointer-events: auto; }
  .index3 .content .item {
    height: 6.25vw;
    width: 100%;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    padding: 0 9.4791666667vw;
    cursor: pointer; }
    .index3 .content .item.on .num, .index3 .content .item.on .p1, .index3 .content .item.on .p2, .index3 .content .item:hover .num, .index3 .content .item:hover .p1, .index3 .content .item:hover .p2 {
      opacity: 1; }
    .index3 .content .item .num {
      color: #000;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      transition: .6s ease;
      margin: 0 1.0416666667vw 0 0;
      opacity: .5; }
    .index3 .content .item .p1 {
      color: #000;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin: 0 2.0833333333vw 0 0;
      opacity: .5;
      transition: .6s ease; }
    .index3 .content .item .p2 {
      width: 67.7083333333vw;
      color: #666;
      font-style: normal;
      font-weight: 400;
      line-height: 177.778%;
      /* 177.778% */
      transition: .6s ease;
      opacity: .5; }

.index4 {
  padding: 5.2083333333vw 1.5625vw 4.8958333333vw 0.78125vw; }
  .index4 .common_title {
    padding: 0 9.0625vw; }
  .index4 .content {
    margin: 5vw 0 0 0;
    display: flex;
    gap: 1.40625vw; }
    .index4 .content .item {
      height: 23.9583333333vw;
      flex: 1;
      transition: .6s ease;
      position: relative;
      z-index: 1;
      border-radius: 1.5625vw;
      overflow: hidden;
      padding: 2.03125vw 1.9270833333vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer; }
      .index4 .content .item.on {
        flex: 2.98; }
        .index4 .content .item.on .top .p2 {
          opacity: 1; }
        .index4 .content .item.on .flex {
          transition: .6s ease;
          opacity: 1;
          transition-delay: .5s; }
      .index4 .content .item .top .p1 {
        color: #FFF;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0 0 0.3645833333vw; }
      .index4 .content .item .top .p2 {
        color: #A2A2A2;
        text-align: justify;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        opacity: .2;
        transition: .6s; }
      .index4 .content .item .flex {
        display: flex;
        gap: 0.78125vw;
        justify-content: space-between;
        opacity: 0; }
        .index4 .content .item .flex .list {
          width: 13.5416666667vw; }
          .index4 .content .item .flex .list span {
            color: #FFF;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            margin: 0 0 0.3125vw;
            display: block; }
          .index4 .content .item .flex .list p {
            color: #FFF;
            font-style: normal;
            font-weight: 400;
            line-height: 177.778%;
            /* 177.778% */ }

.index5 {
  padding: 5.2083333333vw 10.4166666667vw 10.4166666667vw 10.4166666667vw; }
  .index5 .fix {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center; }
  .index5 .top {
    display: flex;
    justify-content: space-between; }
    .index5 .top .pick {
      margin: 2.7604166667vw 0 0 0;
      width: 35.0520833333vw;
      color: #666;
      font-style: normal;
      font-weight: 400;
      line-height: 160%;
      /* 160% */ }
  .index5 .content {
    position: relative;
    margin: 2.6041666667vw 0 0 0; }
    .index5 .content .item {
      width: 74.375vw;
      height: 26.0416666667vw;
      border-radius: 1.5625vw;
      background: #FFF;
      position: relative;
      cursor: pointer; }
      .index5 .content .item .joke {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.875vw 1.6666666667vw;
        box-shadow: 0 4px 80.5px 0 rgba(0, 0, 0, 0.14);
        transition: .6s ease; }
      .index5 .content .item:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(100vh); }
      .index5 .content .item .img {
        width: 32.34375vw;
        height: 22.2916666667vw;
        border-radius: 0.5208333333vw; }
      .index5 .content .item .r {
        width: 35.9375vw; }
        .index5 .content .item .r .label {
          display: flex;
          gap: 0.8333333333vw; }
          .index5 .content .item .r .label .list {
            height: 1.71875vw;
            border-radius: 1.0416666667vw;
            border: 1px solid #000;
            width: fit-content;
            padding: 0 1.25vw;
            color: #000;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            display: flex;
            align-items: center;
            justify-content: center; }
        .index5 .content .item .r .p1 {
          margin: 0.8333333333vw 0 0 0;
          color: #000;
          font-style: normal;
          font-weight: 700;
          line-height: normal; }
        .index5 .content .item .r .p2 {
          margin: 0.2604166667vw 0 0 0;
          color: rgba(0, 0, 0, 0.5);
          opacity: .2;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-transform: uppercase; }
        .index5 .content .item .r .flex {
          margin: 3.28125vw 0 0;
          display: flex;
          justify-content: space-between;
          align-items: flex-end; }
          .index5 .content .item .r .flex .pick {
            width: 21.6145833333vw;
            color: #666;
            font-style: normal;
            font-weight: 400;
            line-height: 177.778%;
            /* 177.778% */ }
          .index5 .content .item .r .flex .more {
            width: 3.3854166667vw;
            height: 3.3854166667vw;
            display: block; }

@media screen and (max-width: 768px) {
  .index1 .title {
    padding: 0 5%; }
  .index1 .text {
    padding: 0 5%;
    gap: 10px;
    bottom: 30px; }
    .index1 .text p {
      font-size: 16px; }

  .index2 {
    padding: 40px 5%; }
    .index2 .title .p1 {
      margin: 0 0 10px; }
      .index2 .title .p1:after {
        display: none; }
    .index2 .title .p2 {
      width: 100%; }
    .index2 .content {
      margin: 30px 0 0 0;
      overflow: unset;
      width: 100%; }
      .index2 .content .index2Swiper {
        width: 105%; }
        .index2 .content .index2Swiper .swiper-slide.swiper-slide-active .item {
          box-shadow: 0 3px 31.7px 0 rgba(0, 0, 0, 0.1); }
        .index2 .content .index2Swiper .swiper-slide .item {
          height: auto;
          flex-direction: column;
          padding: 25px 5%; }
          .index2 .content .index2Swiper .swiper-slide .item .l {
            width: 100%; }
            .index2 .content .index2Swiper .swiper-slide .item .l .p2 {
              font-size: 20px; }
          .index2 .content .index2Swiper .swiper-slide .item .r {
            margin: 25px 0 0 0;
            width: 100%; }
            .index2 .content .index2Swiper .swiper-slide .item .r .dis {
              gap: 20px; }
              .index2 .content .index2Swiper .swiper-slide .item .r .dis span {
                font-size: 40px; }
              .index2 .content .index2Swiper .swiper-slide .item .r .dis .dw {
                top: 0; }
            .index2 .content .index2Swiper .swiper-slide .item .r .pick {
              margin: 20px 0 0 0; }

  .index3 {
    padding: 30px 5%; }
    .index3 .common_title {
      padding: 0; }
    .index3 .circle {
      width: 60vw;
      height: 60vw;
      margin: 30px auto; }
    .index3 .content .item {
      padding: 20px 5%;
      height: auto;
      flex-direction: column;
      align-items: unset; }
      .index3 .content .item:not(:last-child) {
        margin: 0 0 20px; }
      .index3 .content .item .num {
        margin: 0 0 15px; }
      .index3 .content .item .p1 {
        margin: 0 0 10px; }
      .index3 .content .item .p2 {
        width: 100%; }

  .index4 {
    padding: 30px 5%; }
    .index4 .common_title {
      padding: 0; }
    .index4 .content {
      margin: 30px 0 0 0;
      flex-direction: column;
      gap: 20px; }
      .index4 .content .item {
        flex: unset;
        width: 100%;
        height: auto;
        padding: 30px 15px; }
        .index4 .content .item:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.2); }
        .index4 .content .item .top {
          position: relative;
          z-index: 2; }
          .index4 .content .item .top .p1 {
            margin: 0 0 5px; }
          .index4 .content .item .top .p2 {
            opacity: 1; }
        .index4 .content .item .flex {
          flex-direction: column;
          gap: 10px;
          opacity: 1;
          grid-template-columns: repeat(1, 1fr);
          margin: 40px 0 0 0;
          position: relative;
          z-index: 2; }
          .index4 .content .item .flex .list {
            width: 100%; }
            .index4 .content .item .flex .list .p1 {
              margin: 0 0 3px; }
            .index4 .content .item .flex .list p {
              font-size: 12px; }

  .index5 {
    padding: 30px 5% 50px 5%; }
    .index5.index5_ {
      height: auto !important;
      margin-top: 0;
      padding: 0 5% 50px 5%; }
      .index5.index5_ .fix {
        height: auto; }
        .index5.index5_ .fix .content .item {
          transform: none !important; }
          .index5.index5_ .fix .content .item .joke {
            height: auto;
            flex-direction: column;
            padding: 30px 5%;
            box-shadow: 0 4px 80.5px 0 rgba(0, 0, 0, 0.14); }
    .index5 .top {
      flex-direction: column;
      gap: 20px; }
      .index5 .top .pick {
        width: 100%;
        margin: 0; }
    .index5 .content {
      margin: 30px 0 0 0; }
      .index5 .content .item {
        width: 100%;
        height: auto;
        flex-direction: column;
        position: static !important;
        transform: none !important;
        border-radius: 15px; }
        .index5 .content .item:not(:last-child) {
          margin: 0 0 20px; }
        .index5 .content .item .img {
          width: 100%;
          height: auto; }
        .index5 .content .item .r {
          width: 100%;
          margin: 25px 0 0 0; }
          .index5 .content .item .r .label {
            gap: 10px;
            flex-wrap: wrap; }
            .index5 .content .item .r .label .list {
              height: 35px;
              padding: 0 15px;
              border-radius: 30px; }
          .index5 .content .item .r .p1 {
            margin: 15px 0 0; }
          .index5 .content .item .r .p2 {
            margin: 10px 0 0; }
          .index5 .content .item .r .flex {
            flex-direction: column;
            margin: 20px 0 0 0;
            align-items: unset;
            gap: 15px; }
            .index5 .content .item .r .flex .pick {
              width: 100%; }
            .index5 .content .item .r .flex .more {
              width: 30px;
              height: 30px; } }

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