@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  /* Safari<=5 Android<=3 */
  -moz-box-sizing: border-box;
  /* <=28 */
  box-sizing: border-box;
  font-family: "helvetica"; }

*::-webkit-scrollbar {
  display: none; }

html {
  font-size: 1vw; }
  @media screen and (min-width: 1100px) {
    html {
      font-size: 11px; } }
  @media screen and (max-width: 900px) {
    html {
      font-size: 9px; } }

header, footer, section, aside {
  display: block; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

ul li {
  list-style: none; }

img {
  display: block;
  width: 100%; }

input, textarea, button {
  outline: none; }

@font-face {
  font-family: "iconfont";
  src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAV4AAsAAAAACwgAAAUsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXgqIUIZwATYCJAMcCxAABCAFhG0HZhtOCREVpDGR/Sxw3HK5tCZSVFJyROe7ZtRElvB1v3ME0VpWPTMLIVSgogh0WPOTUIBCIwn/6oVHI59t0Ig7wG0dzmTazKwGjK7xm9X/D/0ZPT+6A2Bzs1/LiAjDlJwH/8uXfrohXBt+XS2npVbh6tIdQqEkxt1RWnW9OQaJAsegEQqhIKVU9ROhImxiXIy10ZDOZmLhB2/m0wS6TbFH242MTwd5BXcHhu5XlheCfCaiNIhD668rrixntGmQ0abXUueAj+734xJWQp6kyviZBzcjSiD4xP/5EEL8J+SYGJDbS2FwHRlzQCFeVGYeARJqcxDds78p7QrQr5XUJ/7Pwp7xni16tuT50P//kJ3mq6Ff/INHJQlZURM1eHq79Bvu+kpalZ6KkzA9iROenuBkkZ7MyRI9hdMhr6tKbY7vxyiIPYD4zOhrtRB6n7j2mJZV6u/vlVZz/liYomIMNZcLSE1N/iijpExrMLgEVlqigfHGtMpLXVp1b8/v7Ga1tFWvWEOjPV47thrg0ar0UV0WX7J2OcbkCRncDElTLJas3C9iCNPp/DXkWhR9u5pyxgpdvkSLLVi+WshI5zJZiC+GaOVyUVzI3JgpBtxVbCqbvlbMpo+KtdDlxiwGi7Ka8E7JFt0u/h7LZacYHcJFOqLTaPfY2eITN0xJu41RguU8gksfZSzT5oJov8eY1cq1e9631W4tevy6CWG9zr2GED4p0OJprdQT0MQH6KPmy1YBPDpkvar4xg3WtWvp168zKYrtcRoD433l5SvH1hOMEuE2yzLxwr1jWOzA+Ph7m/dq/2z+jXNsUaTaLb+3rUDpT7yD9Z8exY4eaY6i2XvEe8Xw+wYwBwWqTFOza9oM2xJLcvBN1GT/LByf4ZbmoQNkLIX/oZ6zQ2ZwfIsHIfjANGmJOvvrziZvwTkUGfucUsRrnzcwOofeT3Fq40icuohzYskt2z2AdrGKQIW52xPbEteLT2yiJmJ7Ny0d4dIHelOKFGWdHKQNz/Bbpj7wgX2aw8Vn2BMUqyLH/WKbKJM8hOP2u2yF5qWwewZ/3dyM3kddgqbjFmZ0t1b572hU1gBGD2H2osKYMCljdFh5q/N57DwqtfTzxUJ1JUpVy1c3UP2S8ddLDy0KYsIb9wv/HZFH/2N3F6m6/Hzev+OMqbavjpP6RWOZQ5+u3Zdeef/+SmQVYlxIF8G1CgjtHquk9//+vU87pYHh3AcMc0LIPviP5uYq23+0+088/rBlanDgA6oy+w84AJ0F+QVS56Rr6tdIddvRvA8J/M+fN6sJRQiAzpG8HwkCIH+R6vpyH2Xh9fEP+Sr+X+XRD3zxX9uyS92p9SzfUC+y9ascavwaSD8dczuPNmWa00w4TLIXLcRc49MXpJLQLRb4AheG3dueb4zs8W/xjSWQNCYha02TC30OKj3WoNbagG6zoq7vMaIJIkoXZgwwCIM2QtLvB2SDzpML/S5Uxr2F2mAg0O1aaNyxB8oyKulhTSgYX9D/wEoalYzzyQ9fUc9BxLTdSZ4Yky1C5eicb3Y4YtzGOemta2YFKtIALXsehkAwRXIoOTfMU1M4lVV9US5pWJyERRSML9D/gJU0KrOeT4Wfv6Keg4gNM2eGT4zJbg8quZJA7jwjaeaxTKa3rnGnooAaDNIA2k4Kg6gRmKoPcyg5Z9aoTI2iM09RPfn+fcPjvAHd+FubSJGjRBV1NNGSvdUqxt6uOyrFwaeqMjv+wl6aK8Sok8LpEJ0rLyRpcNTfedtZP2c1LAA=") format("woff2"); }

@font-face {
  font-family: '优设标题黑';
  src: url("../fonts/youshe.eot");
  src: url("../fonts/youshe.eot?#iefix") format("embedded-opentype"), url("../fonts/youshe.woff") format("woff"), url("../fonts/youshe.TTF") format("truetype");
  font-weight: normal;
  font-style: normal; }

.icon {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-down:before {
  content: "\e787"; }

.icon-minigame:before {
  content: "\e63c"; }

.icon-xia:before {
  content: "\e643"; }

.icon-triangle:before {
  content: "\e6a2"; }

.icon-loading:before {
  content: "\e6a0"; }

.icon-close:before {
  content: "\e695"; }

header {
  width: 100%;
  height: 100px;
  max-height: 9.09091vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  padding: 0 20px;
  z-index: 666; }
  header .header-body {
    z-index: 2222;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 98px;
    padding: 0 150px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 1157px) {
      header .header-body {
        padding: 0 80px; } }
    @media screen and (max-width: 1023px) {
      header .header-body {
        padding: 0 50px; } }
    @media screen and (max-width: 1366px) {
      header .header-body {
        padding: 0 75px; } }
    header .header-body .header-logo {
      width: 200px; }
      @media screen and (max-width: 1157px) {
        header .header-body .header-logo {
          width: 18.18182vw; } }
  header ul.header-navs {
    display: flex;
    position: relative; }
    header ul.header-navs > li {
      padding: 15px 5px;
      position: relative; }
      header ul.header-navs > li:hover ul.header-navs-child {
        visibility: visible;
        opacity: 1; }
      header ul.header-navs > li > span, header ul.header-navs > li > a {
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 1.45455rem;
        border-radius: 3px;
        color: #fff;
        cursor: pointer; }
        @media screen and (max-width: 1157px) {
          header ul.header-navs > li > span, header ul.header-navs > li > a {
            font-size: 1.09091rem;
            padding: 0 5px; } }
      header ul.header-navs > li > a:hover, header ul.header-navs > li > span:hover {
        color: #dbdbdb;
        background-color: #b22929; }
      header ul.header-navs > li ul.header-navs-child {
        width: 110px;
        transition: opacity 0.5s ease-out;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: calc(100% - 5px);
        left: -8px;
        z-index: 3;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 10px 0px;
        border-radius: 2px; }
        header ul.header-navs > li ul.header-navs-child::before {
          position: absolute;
          top: -14px;
          left: 45px;
          z-index: 2;
          content: '';
          border: 10px solid transparent;
          border-bottom: 8px solid #fff; }
        header ul.header-navs > li ul.header-navs-child > li {
          display: flex;
          justify-content: center;
          border-bottom: 1px solid #fcf8f8;
          width: 100%; }
          header ul.header-navs > li ul.header-navs-child > li a {
            font-size: 1.27273rem;
            line-height: 2.3em;
            color: #686868; }
        header ul.header-navs > li ul.header-navs-child :hover {
          background-color: #fcf8f8;
          color: #323232; }

.title_red {
  background-color: #b22929 !important;
  color: #c2c2c2; }

footer {
  width: 100%;
  padding: 0 20px 30px;
  background-image: url("/static/img/footer_bg.png"); }
  @media screen and (max-width: 1157px) {
    footer {
      padding: 4.54545vw 20px 2.72727vw; } }
  footer h4 {
    font-size: 1.63636rem;
    line-height: 2em;
    font-weight: 500;
    letter-spacing: 1px; }
  footer p {
    font-size: 1.36364rem;
    color: #72768E; }
  footer a {
    color: #72768E !important; }
  footer .footer-body {
    position: relative;
    font-family: "helvetica";
    max-width: 1300px;
    margin: 0 auto; }
    footer .footer-body .footer-top {
      display: flex;
      justify-content: space-between;
      padding: 50px 0;
      border-bottom: 1px solid #4d4d4d; }
      footer .footer-body .footer-top .item-mode {
        display: flex; }
        footer .footer-body .footer-top .item-mode .left {
          padding-left: 20px; }
          footer .footer-body .footer-top .item-mode .left > h4 {
            color: #fff; }
          footer .footer-body .footer-top .item-mode .left > p {
            color: rgba(255, 255, 255, 0.3) !important; }
    footer .footer-body .footer-one {
      padding-top: 4px; }
      footer .footer-body .footer-one .footer-box {
        display: flex;
        padding: 50px 0 48px 0;
        border-bottom: 1px solid #666666; }
        footer .footer-body .footer-one .footer-box .footer-hd {
          font-size: 1.45455rem;
          line-height: 2em;
          color: #fff; }
        footer .footer-body .footer-one .footer-box p {
          line-height: 1em;
          margin-bottom: 1.81818rem; }
        footer .footer-body .footer-one .footer-box .footer-href {
          width: 35%; }
          footer .footer-body .footer-one .footer-box .footer-href > .href-wrap {
            display: flex;
            flex-wrap: wrap; }
            footer .footer-body .footer-one .footer-box .footer-href > .href-wrap > a {
              display: block;
              width: 33.3%;
              font-size: 1.27273rem;
              line-height: 1em;
              margin-bottom: 1.81818rem; }
        footer .footer-body .footer-one .footer-box .clo-line {
          width: 1px;
          height: auto;
          background-color: #3A3D4C;
          margin: 0 50px; }
        footer .footer-body .footer-one .footer-box .footer-unit {
          width: 41%;
          padding-left: 5%; }
          @media screen and (max-width: 1157px) {
            footer .footer-body .footer-one .footer-box .footer-unit {
              margin-right: 9.09091vw; } }
          footer .footer-body .footer-one .footer-box .footer-unit:last-child {
            margin-right: 0; }
          footer .footer-body .footer-one .footer-box .footer-unit img {
            border-radius: 10px;
            overflow: hidden;
            width: 118px;
            max-width: 12.27273vw;
            height: 118px;
            max-height: 12.27273vw; }
          footer .footer-body .footer-one .footer-box .footer-unit p.unit-wchat {
            display: none; }
            @media screen and (max-width: 1157px) {
              footer .footer-body .footer-one .footer-box .footer-unit p.unit-wchat {
                display: block; } }
            footer .footer-body .footer-one .footer-box .footer-unit p.unit-wchat > span {
              cursor: pointer; }
              footer .footer-body .footer-one .footer-box .footer-unit p.unit-wchat > span:hover {
                text-decoration: underline; }
              footer .footer-body .footer-one .footer-box .footer-unit p.unit-wchat > span:active {
                color: #fff; }
        footer .footer-body .footer-one .footer-box .footer-wchat {
          width: 20%;
          padding: 0 0 0 7%; }
          footer .footer-body .footer-one .footer-box .footer-wchat > p {
            line-height: 30px;
            margin-bottom: 17px !important;
            text-align: center;
            color: #fff;
            font-size: 1.45455rem; }
          footer .footer-body .footer-one .footer-box .footer-wchat img {
            width: 115px;
            margin: 0 auto; }
      footer .footer-body .footer-one .weixin-box {
        position: absolute;
        padding: 0 5px 10px 5px;
        margin-right: 10px;
        display: none;
        bottom: 150px;
        right: -30px;
        background-color: #fff; }
        footer .footer-body .footer-one .weixin-box::before {
          position: absolute;
          top: 144px;
          left: 108px;
          z-index: 2;
          content: '';
          border: 10px solid transparent;
          border-bottom: 8px solid #fff;
          transform: rotate(180deg); }
        footer .footer-body .footer-one .weixin-box > div p {
          text-align: center; }
        footer .footer-body .footer-one .weixin-box img {
          border-radius: 10px;
          overflow: hidden;
          width: 118px;
          max-width: 12.27273vw;
          height: 118px;
          max-height: 12.27273vw; }
      @media screen and (max-width: 1157px) {
        footer .footer-body .footer-one .wchat-box {
          display: none; } }
    footer .footer-body .footer-two {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 48px 0 0 0; }
      footer .footer-body .footer-two .footer-copyright {
        color: #9e9e9e;
        line-height: 2em;
        margin-right: 30px; }
        footer .footer-body .footer-two .footer-copyright p {
          font-size: 1.27273rem !important; }
      footer .footer-body .footer-two .footer-props {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; }
        footer .footer-body .footer-two .footer-props > p {
          margin-right: 25px;
          display: flex;
          align-items: center; }
          footer .footer-body .footer-two .footer-props > p img {
            width: 1.81818rem;
            margin-right: 5px; }
            footer .footer-body .footer-two .footer-props > p img.footer-icp {
              width: 1.63636rem; }
          footer .footer-body .footer-two .footer-props > p a {
            font-size: 1.27273rem;
            color: #9e9e9e;
            line-height: 2.5em; }
            footer .footer-body .footer-two .footer-props > p a:hover {
              text-decoration: underline; }
            footer .footer-body .footer-two .footer-props > p a:active {
              color: #fff; }
  footer .pops {
    visibility: hidden; }
    footer .pops.open {
      visibility: visible; }
      footer .pops.open .shade {
        opacity: .36; }
      footer .pops.open .body {
        opacity: 1; }
    footer .pops .shade {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 8;
      background-color: #000;
      opacity: 0;
      transition: opacity .1s ease-in; }
    footer .pops .body {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9;
      width: 300px;
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      opacity: 0;
      transition: opacity .3s ease-in .1s; }
      footer .pops .body > i {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.09091rem;
        color: #999; }
        footer .pops .body > i:hover, footer .pops .body > i:active {
          color: #c80000; }
      footer .pops .body > h6 {
        text-align: center;
        font-size: 1.09091rem;
        color: #333;
        font-weight: 600; }
      footer .pops .body > img {
        width: 160px;
        margin: 10px auto; }
      footer .pops .body > p {
        text-align: center;
        font-size: 1.09091rem;
        line-height: 2em;
        color: #333; }

@keyframes leftIn {
  0% {
    transform: translateX(-100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes leftIn /* Safari and Chrome */ {
  0% {
    transform: translateX(-100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

@keyframes rightIn {
  0% {
    transform: translateX(100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes rightIn /* Safari and Chrome */ {
  0% {
    transform: translateX(100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

.banner-wrap {
  position: relative;
  width: 100%; }

.kl-mask--mask3 {
  height: 57px;
  overflow-x: hidden; }
  .kl-mask--mask3 .glyphicon {
    bottom: 5px;
    display: block;
    text-align: center;
    font-size: 22px;
    opacity: .2;
    height: 15px;
    top: auto; }
    .kl-mask--mask3 .glyphicon::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-top: 5px solid #333;
      border-right: 5px solid #333;
      transform: rotate(135deg) translate(17%, 50%); }

.kl-mask {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -2px;
  pointer-events: none;
  z-index: 66; }

.kl-mask--mask3 .glyphicon, .kl-mask--mask3 .svgmask {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.kl-mask--mask3 .glyphicon, .kl-mask--mask3 .svgmask {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.glyphicon {
  position: relative;
  top: 1px;
  padding-bottom: 25px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.swiper-container {
  width: 100%;
  height: 100%; }

.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto; }

.mask-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: mask-light 0.3s ease-in-out; }

@keyframes mask-light {
  0% {
    opacity: 0.8;
    background-color: #fff; }
  50% {
    opacity: 0.5;
    background-color: #fff; }
  100% {
    opacity: 0;
    background-color: #000; } }

@-webkit-keyframes mask-light {
  0% {
    opacity: 0.8;
    background-color: #fff; }
  50% {
    opacity: 0.5;
    background-color: #fff; }
  100% {
    opacity: 0;
    background-color: #000; } }

.showtop {
  right: 60px !important;
  opacity: .7 !important;
  transition: right 1s ease-in-out; }

#totop {
  height: 9px;
  opacity: 0;
  position: fixed;
  right: -60px;
  width: 49px;
  z-index: 999;
  display: block;
  top: 75%;
  background-repeat: no-repeat;
  background-position: center 15px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 1;
  border-radius: 2px;
  padding: 28px 0 21px; }

.menu nav {
  text-align: center; }
  .menu nav a {
    font-family: "helvetica";
    font-size: 1.27273rem;
    line-height: 1em;
    color: #333;
    padding: 0 10px; }
    .menu nav a:last-child {
      border: none; }
    .menu nav a:hover {
      color: #dd3333; }
    .menu nav a:active {
      color: #dd3333; }

#app {
  background: url("/static/img/flow/nba/nbabg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat; }

.container {
  width: 100%;
  overflow-y: hidden; }
  .container p,
  .container span,
  .container a {
    font-size: 1.45455rem; }
  .container h4 {
    font-family: helvetica;
    font-size: 2.54545rem;
    color: #fff;
    font-weight: 700;
    line-height: 1em;
    font-size: 2.54545rem; }
  .container section {
    width: 100% ;
    height: 100%;
    /* max-width: 1100px; */
    /* margin: 55px auto 65px;  */
  }
    @media screen and (max-width: 1157px) {
      /* .container section {
        margin-bottom: 5.90909vw; 
      }  */
    }
    .container section > h4 {
      text-align: center; }
    .container section > p {
      letter-spacing: 1px;
      font-family: arial, helvetica, sans-serif;
      font-size: 1.45455rem;
      line-height: 2em;
      color: #fff;
      text-align: center;
      padding: 5px 0; }
      .container section > p:nth-last-of-type(1) {
        margin-bottom: 50px; }
        @media screen and (max-width: 1157px) {
          .container section > p:nth-last-of-type(1) {
            margin-bottom: 4.54545vw;
            font-size: 1.27273vw; } 
      }

.banners {
  position: relative;
  width: 100%;
  height: 35.45455vw;
  max-height: 390px; }
  @media screen and (max-width: 1366px) {
    .banners {
      height: 27.27273vw;
      max-height: 300px; } }
  @media screen and (max-width: 1157px) {
    .banners {
      height: 20.90909vw;
      max-height: 300px; } }
  .banners img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 390px; }
    @media screen and (max-width: 1366px) {
      .banners img {
        max-height: 278px; } }
    @media screen and (max-width: 1157px) {
      .banners img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-height: 390px; } }
  .banners .ren-wrap {
    position: absolute;
    top: 100px;
    right: 20%;
    width: 14%; }

.banner-wrap .title-wrap {
  position: absolute;
  left: 17%;
  top: 40%; }
  .banner-wrap .title-wrap h4 {
    font-size: 4.54545rem;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: 8px; }
    @media screen and (max-width: 1366px) {
      .banner-wrap .title-wrap h4 {
        font-size: 3.63636rem;
        margin-bottom: 10px; } }
    @media screen and (max-width: 1157px) {
      .banner-wrap .title-wrap h4 {
        font-size: 3.63636rem;
        margin-bottom: 5px; } }
  .banner-wrap .title-wrap p {
    font-size: 2.72727rem;
    color: #fff;
    letter-spacing: 4px; }
    @media screen and (max-width: 1366px) {
      .banner-wrap .title-wrap p {
        font-size: 2.27273rem; } }
    @media screen and (max-width: 1157px) {
      .banner-wrap .title-wrap p {
        font-size: 2.27273rem; } }

.h1-wrap {
  padding-top: 6%;
  position: relative; }
  .h1-wrap > h4 {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 50px !important; }
    .h1-wrap > h4 p {
      margin-top: 5%;
      color: #fff;
      letter-spacing: 1px; }
  .h1-wrap .text-content p {
    letter-spacing: 1px;
    font-family: arial, helvetica, sans-serif;
    font-size: 1.45455rem;
    line-height: 2em;
    text-align: center;
    color: #fff; }
  .h1-wrap .ren-icon1 {
    position: absolute;
    left: -20%;
    top: 50%; }
    @media screen and (max-width: 1366px) {
      .h1-wrap .ren-icon1 {
        left: -10%;
        top: 50%; } }
  .h1-wrap .ren-icon2 {
    position: absolute;
    right: -20%;
    top: 30%; }
    @media screen and (max-width: 1366px) {
      .h1-wrap .ren-icon2 {
        right: -10%;
        top: 20%; } }
  .h1-wrap .ren-icon3 {
    position: absolute;
    right: -15%;
    top: 80%; }
    @media screen and (max-width: 1366px) {
      .h1-wrap .ren-icon3 {
        right: -8%;
        top: 90%; } }

.h2-wrap {
  padding-top: 6%; }
  .h2-wrap > h4 {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 50px !important; }
  .h2-wrap .content-wrap .content {
    display: flex;
    flex-wrap: wrap; }
    .h2-wrap .content-wrap .content .item-wrap {
      width: 16%;
      border-radius: 50%;
      margin-bottom: 5%;
      margin-right: 2%;
      margin-left: 2%; }
      .h2-wrap .content-wrap .content .item-wrap .img-wrap {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        padding: 30px; }
        .h2-wrap .content-wrap .content .item-wrap .img-wrap img {
          border-radius: 50%; }
      .h2-wrap .content-wrap .content .item-wrap .text-div {
        text-align: center;
        color: #fff;
        margin-top: 10%; }
  .h2-wrap .content-wrap .more-data {
    color: #fff;
    display: flex;
    justify-content: center; }
    .h2-wrap .content-wrap .more-data span {
      display: block;
      padding: 5px 20px;
      border-radius: 10px;
      border: 2px solid #fff;
      cursor: pointer; }

.sign {
  background: url("/static/img/flow/nba/3_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative; }
  .sign .content-wrap {
    width: 50%;
    padding: 50px; }
    .sign .content-wrap .title {
      text-align: center;
      margin-bottom: 20px; }
    .sign .content-wrap #signform > div {
      margin-bottom: 20px;
      display: flex;
      justify-content: center; }
    .sign .content-wrap #signform .el-input__inner {
      background-color: rgba(255, 255, 255, 0.5);
      border: 0;
      color: #000;
      text-align: center;
      border-radius: 10px; }
    .sign .content-wrap #signform input::-webkit-input-placeholder {
      text-align: center;
      color: #666;
      font-size: 1.45455rem; }
  .sign .ren {
    position: absolute;
    right: -20px;
    top: -20px; }
  .sign .submit {
    margin: 0 auto;
    cursor: pointer;
    background: url("/static/img/flow/nba/icon_tj.png");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 70%;
    height: 100px;
    border: 0; }

.fixed-div {
  position: fixed;
  right: 20px;
  top: 50%;
  display: flex;
  flex-direction: row-reverse;
  z-index: 666; }
  .fixed-div .content-wrap {
    visibility: hidden;
    position: relative;
    z-index: 66;
    top: -70px;
    padding: 30px 20px;
    background-image: url("/static/img/flow/fixed/kols_float_bg.png");
    background-size: 100% 100%; }
    .fixed-div .content-wrap > .par-wrap,
    .fixed-div .content-wrap .weixin-wrap {
      display: flex;
      padding: 0 10px; }
      .fixed-div .content-wrap > .par-wrap > img,
      .fixed-div .content-wrap .weixin-wrap > img {
        width: 40px;
        height: 40px; }
      .fixed-div .content-wrap > .par-wrap .par-desc,
      .fixed-div .content-wrap .weixin-wrap .par-desc {
        padding: 0 20px 0 10px; }
        .fixed-div .content-wrap > .par-wrap .par-desc > h4,
        .fixed-div .content-wrap .weixin-wrap .par-desc > h4 {
          color: #535353;
          font-size: 1.45455rem;
          line-height: 30px; }
        .fixed-div .content-wrap > .par-wrap .par-desc p,
        .fixed-div .content-wrap .weixin-wrap .par-desc p {
          font-size: 14px;
          color: #666; }
          .fixed-div .content-wrap > .par-wrap .par-desc p:last-child,
          .fixed-div .content-wrap .weixin-wrap .par-desc p:last-child {
            color: #999;
            margin: 5px 0; }
      .fixed-div .content-wrap > .par-wrap .weixin,
      .fixed-div .content-wrap .weixin-wrap .weixin {
        margin-top: 10px; }
  .fixed-div .showSt {
    visibility: visible !important; }

.el-form-item__content {
  width: 70%; }
.section1{
  position: relative;
  overflow: hidden;
  width: 100%;
}
.section1 .section1_bg{
  height: 750px;
  z-index: -1;
}
.section1 .section1_bg img{
  height: 750px;
}

.section1 .section1_tit{
  position: absolute;
  top: 33%;
  left: 30%;
  width: 100%;
  z-index: 1;
}
.section1 .section1_tit img{
  width: 45%;
}
.section1 .section1_img{
  position: absolute;
  top: 23%;
  left: 66%;
  width: 100%;
  z-index: 1;
  animation: around6 6s infinite;
  -webkit-animation: around6 6s infinite;
}
.section1 .section1_img img{
  width: 28.5%;
}
.section2{
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #FDF1D8;
}
.section2 .section2_box{
  width: 100%;
  height: 100%;
  background-color: #FDF1D8;
  /* position: relative; */
}
.section2 .section2_box .section2_square{
    width: 90%;
    margin: 50px auto;
}
.section2 .section2_box .section2_character{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26%;
  z-index:2;
}
.section2 .section2_box .section2_character2{
  position: absolute;
  bottom: 10%;
  left: 19.4%;
  width: 11.5%;
  z-index:1;
}
.section2 .section2_box .section2_content{
  position: absolute;
  top: 15%;
  left: 32%;
  max-width: 40%
}
.section2 .section2_box .section2_content .section2_content_Tit{
  margin-left: 110px;
  width: 68%;
}
.section2 .section2_box .section2_content .section2_content_text{
  text-align: center;
  margin: 30px 0;
}
.section2 .section2_box .section2_content .section2_content_text h4{
  font-size: 2.7rem;
  letter-spacing: 2px;
}
.section2 .section2_box .section2_content .section2_content_text p{
  margin: 30px 0;
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: 1px;
}

@keyframes around6 {
  0% {
    transform: translate(-15px, 10px);
  }
  25% {
    transform: translate(15px, -10px);
  }
  50% {
    transform: translate(-15px, 10px);
  }
  75% {
    transform: translate(15px, -10px);
  }
  100% {
    transform: translate(-15px, 10px);
  }
}

/* 自适应屏幕大小的媒体查询 */
/* 大屏幕设备 (1920px 以上) */
@media screen and (min-width: 1920px) {
  .section1 .section1_bg {
    height: 750px;
  }
  .section1 .section1_bg img {
    height: 750px;
  }
  .section1 .section1_tit {
    top: 255px;
    left: 570px;
  }
  .section1 .section1_tit img {
    width: 44%;
  }
  .section1 .section1_img {
    top: 23%;
    left: 65%;
  }
  .section1 .section1_img img {
    width: 29%;
  }
  .section2 .section2_box .section2_content .section2_content_text h4 {
    font-size: 3rem;
  }
  .section2 .section2_box .section2_content .section2_content_text p {
    font-size: 1.8rem;
  }
  .section3 .section3_title h3 {
    font-size: 3.2rem;
  }
}

/* 标准桌面设备 (1440px - 1919px) */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .section1 .section1_bg {
    height: 850px;
  }
  .section1 .section1_bg img {
    height: 850px;
  }
  .section1 .section1_tit {
    top: 35%;
    left: 560px;
  }
  .section1 .section1_tit img {
    width: 45%;
  }
  .section1 .section1_img {
    top: 25%;
    left: 64%;
  }
  .section1 .section1_img img {
    width: 32%;
  }
  .section2 .section2_box .section2_content .section2_content_text h4 {
    font-size: 3rem;
  }
  .section2 .section2_box .section2_content .section2_content_text p {
    font-size: 1.8rem;
  }
  .section3 .section3_title h3 {
    font-size: 3rem;
  }
}

/* 标准桌面设备 (1366px - 1439px) */
@media screen and (min-width: 1366px) and (max-width: 1439px) {
  .section1 .section1_bg {
    height: 750px;
  }
  .section1 .section1_bg img {
    height: 750px;
  }
  .section1 .section1_tit {
    top: 35%;
    left: 395px;
  }
  .section1 .section1_tit img {
    width: 47%;
  }
  .section1 .section1_img {
    top: 26%;
    left: 63%;
  }
  .section1 .section1_img img {
    width: 37%;
  }
  .section2 .section2_box .section2_content .section2_content_text h4 {
    font-size: 2.7rem;
  }
  .section2 .section2_box .section2_content .section2_content_text p {
    font-size: 1.6rem;
  }
}

/* 小屏幕设备 (1024px - 1365px) */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
  .section1 .section1_bg {
    height: 650px;
  }
  .section1 .section1_bg img {
    height: 650px;
  }
  .section1 .section1_tit {
    top: 33%;
    left: 27%;
  }
  .section1 .section1_tit img {
    width: 48%;
  }
  .section1 .section1_img {
    top: 22%;
    left: 64%;
  }
  .section1 .section1_img img {
    width: 35%;
  }
  .section2 .section2_box .section2_content {
    left: 30%;
    max-width: 45%;
  }
  .section2 .section2_box .section2_content .section2_content_Tit {
    margin-left: 90px;
  }
  .section2 .section2_box .section2_content .section2_content_text h4 {
    font-size: 2.4rem;
  }
  .section2 .section2_box .section2_content .section2_content_text p {
    font-size: 1.5rem;
  }
  .section3 .section3_title h3 {
    font-size: 2.6rem;
  }
  /* .section3 .section3_content .section3_item {
    width: 31%;
    margin: 0 1%;
  } */
}

/* 为section3添加自适应设计 */
@media screen and (min-width: 1366px) {
  /* .section3 .section3_content {
    max-width: 1300px;
  }
  .section3 .section3_content .section3_item {
    width: 30%;
    margin: 0 1.5%;
    margin-bottom: 40px;
  } */
}

/* section3基础样式 */
.section3 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #FDF1D8;
  display: flex;
  flex-direction: column;
}

.section3 .section3_top {
  width: 100%;
  flex: 1;
  position: relative;
}
.section3 .section3_top .section3_top_bg{
  width: 100%;
  height: 100%;
  z-index: -1;
}
.section3 .section3_top .section3_top_tit{
  position: absolute;
  top: 25%;
  left: 20%;
  width: 12%;
  z-index: 3;
}
.section3 .section3_top .section3_top_btn{
  position: absolute;
  display: flex;
  top: 25%;
  left: 70%;  /* 从75%调整到70% */
  width: 100%;
  z-index: 2;
}

.section3 .section3_top .section3_top_btn .section3_top_left{
  width: 3%;
  margin-right: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.section3 .section3_top .section3_top_btn .section3_top_right{
  width: 3%;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.section3 .section3_top .section3_top_btn .section3_top_left:hover,
.section3 .section3_top .section3_top_btn .section3_top_right:hover {
  transform: scale(1.1);
}

.section3 .section3_top .section3_top_content{
  position: absolute;
  overflow: hidden;
  width: 50%;  /* 默认宽度设为50% */
  /* height: 100%; */
  top: 48%;
  left: 25%;  /* 从18%调整到25%，使其居中 */
  display: flex;
}

.section3 .section3_top .section3_top_content .section3_top_items_container {
  display: flex;
  transition: transform 0.3s ease;
}

.section3 .section3_top .section3_top_content .section3_top_item{
  width: auto;  /* 改为auto，由JavaScript动态控制 */
  margin-right: 20px;  /* 更新为20px间距，与JavaScript保持一致 */
  flex-shrink: 0;
}

.section3 .section3_top .section3_top_content .section3_top_item .top_item_img {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.section3 .section3_top .section3_top_content .section3_top_item .top_item_img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.section3 .section3_top .section3_top_content .section3_top_item .top_item_img .top_item_shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.section3 .section3_top .section3_top_content .section3_top_item .top_item_img .top_item_shadow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.section3 .section3_top .section3_top_content .section3_top_item:hover .top_item_img img {
  transform: scale(1.05);
}

.section3 .section3_top .section3_top_content .section3_top_item:hover .top_item_img .top_item_shadow {
  opacity: 0;
}

.section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
  font-size: 1.2rem;  /* 从1.4rem缩小到1.2rem */
  /* text-align: center; */
  margin-top: 12px;  /* 从15px缩小到12px */
  color: #333;
  font-weight: 500;
  line-height: 1.5;
}
.section .section3_middle{
  position: relative;
  width: 80%;
  margin: 150px auto
}
.section .section3_middle .section3_middle_bg{
  z-index: -1;
}
.section .section3_middle .section3_middle_tit{
  position: absolute;
  top: 15%;
  left: 8%;
  width: 30%;
}
.section .section3_middle .section3_middle_content{
  position: absolute;
  width: 80%;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.section .section3_middle .section3_middle_content .section3_middle_options{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 32px;
  background-color: #FFE0AF;
  border-radius: 20px;
  font-size: 2rem;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.section3_middle_options .option-item{
  width: 100px;
  cursor: pointer;
}
.option_selected{
  position: relative;
  width: 100px;
  height: 32px;
  display: flex;
  align-items: flex-end;
}
.option_selected img{
  width: 120px;
  /* object-fit: contain; */
}
.option_selected .option_name{
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 20px;
}

/* ========== SKU图片展示样式 ========== */
.section3_middle_content_list {
  margin-top: 20px;
}

.sku-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.sku-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.sku-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.sku-item:hover img {
  transform: scale(1.05);
}

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.page-indicator {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.page-indicator:hover {
  transform: scale(1.1);
}

/* SKU响应式设计 */
@media screen and (max-width: 768px) {
  .sku-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    padding: 0 10px;
  }
  
  .page-indicator {
    width: 25px;
    height: 25px;
  }
}

@media screen and (max-width: 480px) {
  .sku-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    padding: 0 5px;
  }
  
  .page-indicator {
    width: 20px;
    height: 20px;
  }
  
  .pagination-controls {
    gap: 5px;
  }
}

/* ========== 响应式设计 - 适配主流显示器尺寸 ========== */

/* 4K 超大屏幕 (≥2560px) - 32寸4K显示器 */
@media screen and (min-width: 2560px) {
  .section3 .section3_top .section3_top_content {
    left: 12%;
    width: 76%;
  }
  
  .section3 .section3_top .section3_top_btn {
    left: 82%;
  }
  
  .section3 .section3_top .section3_top_tit {
    left: 15%;
    width: 10%;
  }
  
  .section3 .section3_title h3 {
    font-size: 4rem;
  }
  
  .section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
    font-size: 1.4rem;
    margin-top: 16px;
  }
}

/* 2K 大屏幕 (1920px-2559px) - 27寸2K/4K显示器 */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
  .section3 .section3_top .section3_top_content {
    left: 19%;
    width: 70%;
  }
  
  .section3 .section3_top .section3_top_btn {
    left: 78%;
  }
  
  .section3 .section3_top .section3_top_tit {
    left: 18%;
    width: 12%;
  }
  
  .section3 .section3_title h3 {
    font-size: 3.5rem;
  }
  
  .section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
    font-size: 1.3rem;
    margin-top: 14px;
  }
}

/* 全高清大屏 (1600px-1919px) - 24-27寸1080p显示器 */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
  .section3 .section3_top .section3_top_content {
    left: 18%;
    width: 64%;
  }
  
  .section3 .section3_top .section3_top_btn {
    left: 75%;
  }
  
  .section3 .section3_title h3 {
    font-size: 3.2rem;
  }
  
  .section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
    font-size: 1.2rem;
    margin-top: 12px;
  }
}

/* 标准桌面 (1367px-1599px) - 22-24寸显示器 */
@media screen and (min-width: 1367px) and (max-width: 1599px) {
  .section3 .section3_top .section3_top_content {
    left: 20%;
    width: 60%;
  }
  
  .section3 .section3_top .section3_top_btn {
    left: 72%;
  }
  
  .section3 .section3_title h3 {
    font-size: 3rem;
  }
  
  .section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
    font-size: 1.1rem;
    margin-top: 12px;
  }
}

/* 小桌面/大笔记本 (1201px-1366px) - 15-17寸笔记本 */
@media screen and (min-width: 1201px) and (max-width: 1366px) {
  .section3 .section3_top .section3_top_content {
    left: 18%;
    width: 62%;
  }
  
  .section3 .section3_top .section3_top_btn {
    left: 70%;
  }
  
  .section3 .section3_title h3 {
    font-size: 2.8rem;
  }
  
  .section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
    font-size: 1.1rem;
    margin-top: 11px;
  }
}

/* 中等笔记本 (993px-1200px) - 13-15寸笔记本 */
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .section3 .section3_top .section3_top_content {
    left: 15%;
    width: 65%;
  }
  
  .section3 .section3_top .section3_top_btn {
    left: 68%;
  }
  
  .section3 .section3_title h3 {
    font-size: 2.5rem;
  }
  
  .section3 .section3_top .section3_top_content .section3_top_item .top_item_tit {
    font-size: 1rem;
    margin-top: 10px;
  }
}

/* section3底部样式 */
.section3_bottom {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 50px;
}

.section3_bottom > img {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.qrCode {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.qrCode img {
    width: 60%;
}

.qrCode >span{
  margin-top: 10px;
  font-size: 2rem;
}

/* ========== 右侧悬浮联系组件样式 ========== */
.section3_contact {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.section3_contact .contact_img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.section3_contact .contact_img img {
  width: 140px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section3_contact .contact_qrCode {
  visibility: hidden;
  opacity: 0;
  position: relative;
  top: 40px;
  transition: all 0.3s ease;
  transform: translateX(20px);
}

.section3_contact .contact_qrCode::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.section3_contact .contact_qrCode img {
  width: 260px;
  display: block;
}

.section3_contact .contact_img:hover + .contact_qrCode {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}