/* ==========================================================
           1. 基础重置与 Rem 适配设置
           ========================================================== */
  :root {
      --page-max-width: 1240px;
      --root-font-size-mobile: 13.3333333333vw;
      --root-font-size-desktop: 60px;
      --root-font-size-breakpoint: 450px;
  }
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
  }
  html {
      font-size: 13.333333vw;
      scroll-behavior: smooth;
  }


  * {
      margin: 0;
      padding: 0;
  }


  body {
      max-width: var(--page-max-width);
      margin: 0 auto;
  }

  @media (min-width: 450px) {
      html {
          font-size: 60px;
      }
  }

  @media screen and (min-width: 750px) {
      html {
          font-size: 100px !important;
      }
  }
  body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      margin: 0 auto;
      background-color: #fff;
      color: #333;
      font-size: 0.28rem;
      position: relative;
  }
  ul, li {
      list-style: none;
  }
  a {
      text-decoration: none;
      color: inherit;
      display: inline-block;
  }
  img {
      display: block;
      max-width: 100%;
      width: 100%;
  }

  .placeholder-img {
      width: 100%;
      background-color: #eee;
      border-radius: 0.12rem;
  }
  .section-wrapper {
      padding: 0.3rem;
      scroll-margin-top: 0.9rem;
      background: #fff;
  }
  .tit-img {
      height: 0.77rem;
      width: auto;
      margin: 0 auto 0.3rem;
      display: block;
  }

  /* ==========================================================
           2. 极客感全屏 Loading (全局静态，不依赖 JS)
           ========================================================== */
  #global-loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  }
  .tech-loader {
      position: relative;
      width: 1.5rem;
      height: 1.5rem;
      margin-bottom: 0.4rem;
  }
  .tech-loader::before, .tech-loader::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 0.08rem solid transparent;
  }
  .tech-loader::before {
      border-top-color: #69b93c;
      border-bottom-color: #69b93c;
      animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  }
  .tech-loader::after {
      border-left-color: #ff4d6a;
      border-right-color: #ff4d6a;
      animation: spin-reverse 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  }
  .tech-loader .center-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.3rem;
      height: 0.3rem;
      background: #69b93c;
      border-radius: 50%;
      animation: pulse 1s ease-in-out infinite alternate;
  }
  .loading-text {
      font-size: 0.32rem;
      color: #333;
      font-weight: bold;
      letter-spacing: 0.04rem;
      animation: blink 1.5s infinite;
  }

  @keyframes spin {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }
  @keyframes spin-reverse {
      0% {
          transform: rotate(360deg);
      }
      100% {
          transform: rotate(0deg);
      }
  }
  @keyframes pulse {
      0% {
          transform: translate(-50%, -50%) scale(0.8);
          opacity: 0.5;
      }
      100% {
          transform: translate(-50%, -50%) scale(1.2);
          opacity: 1;
          box-shadow: 0 0 0.15rem #69b93c;
      }
  }
  @keyframes blink {
      0%, 100% {
          opacity: 1;
      }
      50% {
          opacity: 0.5;
      }
  }

  /* ==========================================================
           3. 进场动画定义 (Staggered Animation)
           ========================================================== */
  @keyframes fadeInUp {
      0% {
          opacity: 0;
          transform: translateY(0.5rem);
      }
      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* 默认隐藏的主容器，切换为 display:block 并加上 .ready 后触发进场动画 */
  #app {
      display: none;
  }

  .sf-loading-wrap {
      height: 80vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .sf-loading {
      position: relative;
      z-index: 100000;
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border-radius: 999px;
      border: 4px solid #508cee;
      border-top-color: transparent;
      animation: sf-rotate360 1s infinite linear;
  }
  .sf-loading::after {
      content: '';
      position: absolute;
      z-index: 100001;
      border-radius: 999px;
      border: 6px solid #508cee;
      left: 10px;
      top: -4px;
  }
  .sf-loading::before {
      content: '';
      position: absolute;
      box-sizing: border-box;
      z-index: 100000;
      width: 50px;
      height: 50px;
      border-radius: 999px;
      border: 4px solid #508cee;
      border-top-color: transparent;
      left: -4px;
      top: -4px;
      transform: rotate(-30deg);
  }
  .sf-loading-cont {
      transform: scale(.7);
      position: relative;
      display: flex;
  }
  @keyframes sf-rotate360 {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }

  /* 交错动画延迟设置，让模块像瀑布一样逐个浮现 */
  #app.ready .sticky-nav {
      animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: 0.1s;
      padding: 0 .2rem;
  }
  #app.ready .banner {
      animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: 0.2s;
  }
  #app.ready section:nth-of-type(1) {
      animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: 0.3s;
  }
  #app.ready section:nth-of-type(2) {
      animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: 0.4s;
  }
  #app.ready section:nth-of-type(3) {
      animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: 0.5s;
  }
  /* 超过第3个的模块统一延迟，保证视觉不会等太久 */
  #app.ready section:nth-of-type(n+4), #app.ready .footer {
      animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: 0.6s;
  }

  /* ==========================================================
           4. 模块定制样式
           ========================================================== */
  .sticky-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      width: 100%;
      height: 0.6rem;
      background: rgb(255, 55, 89);
      display: flex;
      align-items: center;
      overflow-x: auto;
      white-space: nowrap;
      box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.05);
      scroll-behavior: smooth;
  }
  .sticky-nav::-webkit-scrollbar {
      display: none;
  }
  .sticky-nav .nav-item {
      display: inline-block;
      padding: 0 0.1rem;
      line-height: 0.6rem;
      font-size: 0.24rem;
      color: #fff;
      font-weight: 500;
      transition: all 0.3s;
      cursor: pointer;
      flex-shrink: 0;
  }
  .sticky-nav .nav-item.active {
      color: #ffffc2;
      font-size: 0.24rem;
      font-weight: bold;
      position: relative;
  }
  .sticky-nav .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0.4rem;
      height: 0.06rem;
      background-color: #ffffc2;
      border-radius: 0.03rem;
  }
  .banner {
      scroll-margin-top: 0.9rem;
  }
  .main {
      padding-top: .3rem;
  }

  /* --- 嘉年华直播 --- */
  .live-tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 0.3rem;
      background: #f2f2f2;
      border-radius: 0.4rem;
      width: max-content;
      margin-left: auto;
      margin-right: auto;
      padding: 0.06rem;
  }
  .live-tabs .tab-btn {
      padding: 0.11rem 0.28rem;
      font-size: 0.24rem;
      color: #333;
      border-radius: 0.63rem;
      transition: all 0.3s;
      cursor: pointer;
  }
  .live-tabs .tab-btn.active {
      background: #ff4d6a;
      color: #fff;
      font-weight: bold;
      background-image: -moz-linear-gradient(122deg, rgb(255, 55, 89) 0%, rgb(255, 133, 133) 100%);
      background-image: -webkit-linear-gradient(122deg, rgb(255, 55, 89) 0%, rgb(255, 133, 133) 100%);
      background-image: -ms-linear-gradient(122deg, rgb(255, 55, 89) 0%, rgb(255, 133, 133) 100%);
  }

  .video-wrapper {
      position: relative;
      border-radius: 0.12rem;
      overflow: hidden;
  }
  .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.9rem;
      height: 0.9rem;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .play-icon::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0.2rem 0 0.2rem 0.3rem;
      border-color: transparent transparent transparent #eafb7c;
      margin-left: 0.1rem;
  }

  /* --- 跟手手势轮播图 (支持 Gap 间距) --- */
  .custom-swiper {
      position: relative;
      overflow: hidden;
      border-radius: 0.12rem;
      touch-action: pan-y;
  }
  .swiper-track {
      display: flex;
      width: 100%;
      will-change: transform;
  }
  .swiper-slide {
      flex: 0 0 100%;
      width: 100%;
      position: relative;
  }
  .swiper-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 0.3rem;
      height: 0.8rem;
      cursor: pointer;
      z-index: 10;
      background: url(https://n.sinaimg.cn/sina_client/66ceb6d9/20260402/icon-arr.png) no-repeat center;
      background-size: 100%;
  }
  .swiper-arrow.left {
      left: 0;
  }
  .swiper-arrow.right {
      right: 0;
      transform: translateY(-50%) rotate(180deg);
  }
  .swiper-title-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 0.15rem 0.2rem;
      font-size: 0.26rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  /* --- 头条新闻 --- */
  .news-list-box {
      margin-top: 0.17rem;
      background: #f8f8f4;
      border-radius: 0.12rem;
      padding: 0 0 .26rem;
  }
  .news-item {
      display: flex;
      align-items: flex-start;
      padding: 0.18rem 0.2rem;
      border-bottom: 1px solid #fff;
      gap: 0.2rem;
  }
  .news-item:last-child {
      border-bottom: none;
  }
  .news-date {
      padding: .03rem;
      border-radius: 0.08rem;
      overflow: hidden;
      text-align: center;
      flex-shrink: 0;
      width: 0.85rem;
      background-image: -moz-linear-gradient(111deg, rgb(137, 194, 68) 37%, rgb(203, 233, 105) 100%);
      background-image: -webkit-linear-gradient(111deg, rgb(137, 194, 68) 37%, rgb(203, 233, 105) 100%);
      background-image: -ms-linear-gradient(111deg, rgb(137, 194, 68) 37%, rgb(203, 233, 105) 100%);
  }

  .news-date .y {
      color: #fff;
      font-size: 0.24rem;
      line-height: 0.36rem;
  }
  .news-date .d {
      background: #fff;
      color: #75ba50;
      font-size: 0.24rem;
      line-height: 0.36rem;
      font-weight: bold;
      border-bottom-left-radius: 0.08rem;
      border-bottom-right-radius: 0.08rem;
  }
  .news-text {
      font-size: 0.26rem;
      line-height: 1.5;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
  }
  .btn-more {
      display: block;
      width: 4rem;
      margin: 0.2rem auto 0;
      text-align: center;
      border: 0.03rem solid #41943c;
      color: #41943c;
      border-radius: 0.08rem;
      padding: 0.15rem 0;
      font-size: 0.26rem;
      transition: background 0.2s;
      font-weight: bold;
  }
  .btn-more:active {
      background: #f0f9eb;
  }

  /* --- 活动亮点 (折叠) --- */
  .accordion-item {
      margin-bottom: 0.06rem;
      overflow: hidden;
  }
  .accordion-header {
      font-size: 0.28rem;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      height: 0.8rem;
      border-radius: .1rem;
      background-color: rgb(137, 194, 68);
      color: #fff;
  }
  .accordion .accordion-item:nth-of-type(5n+1) .accordion-header {
      background-color: rgb(255, 160, 150);
      background-image: -moz-linear-gradient(180deg, rgb(255, 79, 109) 0%, rgb(255, 160, 150) 100%);
      background-image: -webkit-linear-gradient(180deg, rgb(255, 79, 109) 0%, rgb(255, 160, 150) 100%);
      background-image: -ms-linear-gradient(180deg, rgb(255, 79, 109) 0%, rgb(255, 160, 150) 100%);
  }
  .accordion .accordion-item:nth-of-type(5n+2) .accordion-header {
      background-color: rgb(248, 218, 113);
      background-image: -moz-linear-gradient(180deg, rgb(255, 169, 46) 1%, rgb(248, 218, 113) 100%);
      background-image: -webkit-linear-gradient(180deg, rgb(255, 169, 46) 1%, rgb(248, 218, 113) 100%);
      background-image: -ms-linear-gradient(180deg, rgb(255, 169, 46) 1%, rgb(248, 218, 113) 100%);
  }
  .accordion .accordion-item:nth-of-type(5n+3) .accordion-header {
      background-color: rgb(203, 233, 105);
      background-image: -moz-linear-gradient(180deg, rgb(148, 199, 87) 0%, rgb(203, 233, 105) 82%);
      background-image: -webkit-linear-gradient(180deg, rgb(148, 199, 87) 0%, rgb(203, 233, 105) 82%);
      background-image: -ms-linear-gradient(180deg, rgb(148, 199, 87) 0%, rgb(203, 233, 105) 82%);
  }
  .accordion .accordion-item:nth-of-type(5n+4) .accordion-header {
      background-color: rgb(138, 233, 244);
      background-image: -moz-linear-gradient(180deg, rgb(93, 182, 250) 2%, rgb(138, 233, 244) 100%);
      background-image: -webkit-linear-gradient(180deg, rgb(93, 182, 250) 2%, rgb(138, 233, 244) 100%);
      background-image: -ms-linear-gradient(180deg, rgb(93, 182, 250) 2%, rgb(138, 233, 244) 100%);
  }
  .accordion .accordion-item:nth-of-type(5n+5) .accordion-header {
      background-color: rgb(222, 175, 250);
      background-image: -moz-linear-gradient(173deg, rgb(162, 141, 253) 0%, rgb(222, 175, 250) 100%);
      background-image: -webkit-linear-gradient(173deg, rgb(162, 141, 253) 0%, rgb(222, 175, 250) 100%);
      background-image: -ms-linear-gradient(173deg, rgb(162, 141, 253) 0%, rgb(222, 175, 250) 100%);
  }



  .accordion-content-wrapper {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease-out;
  }
  .accordion-content-wrapper.open {
      grid-template-rows: 1fr;
  }
  .accordion-content {
      overflow: hidden;
  }
  .accordion-inner {
      padding: 0.1rem 0;
  }

  /* --- 精彩日程 --- */
  .schedule-box {
      background: #f9f8f4;
      border-radius: 0.12rem;
      overflow: hidden;
      margin-bottom: .3rem;

  }
  .schedule-head {
      background: linear-gradient(90deg, #81c257, #e8cfd3);
      padding: 0.2rem 0.3rem;
      color: #fff;
      font-size: 0.32rem;
      font-weight: bold;
      background: url(https://n.sinaimg.cn/sina_client/66ceb6d9/20260402/item-bg.png) no-repeat;
      background-size: cover;
  }
  .schedule-list {
      padding: 0.2rem 0.3rem;
  }
  .schedule-item {
      display: flex;
      padding: 0.2rem 0;
      font-size: 0.3rem;
      color: #333;
  }
  .schedule-item .time {
      width: 2.2rem;
      color: #666;
      flex-shrink: 0;
  }
  .schedule-item .event {
      flex: 1;
      font-weight: 500;
  }

  /* --- KOL 推荐 --- */
  .kol-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.4rem 0.2rem;
  }
  .kol-item {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .1rem;
  }
  .kol-item .avator-wrap {
      background: url(https://n.sinaimg.cn/sina_client/66ceb6d9/20260402/bg-persom.png) no-repeat;
      width: 1.8rem;
      height: 1.8rem;
      background-size: cover;
      padding: .09rem;
  }
  .kol-item .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      margin: 0 auto 0.15rem;
      border: 1px solid #fff;
  }
  .kol-item .name {
      font-size: 0.3rem;
      font-weight: bold;
  }
  .kol-item .title {
      font-size: 0.24rem;
      color: #888;
  }

  /* --- 联系方式 --- */
  .contact-list {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
  }
  .contact-card {
      background: #fff;
      border: 1px solid #e9e9e9;
      border-radius: 0.12rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
      padding-bottom: .3rem;
      overflow: hidden;
  }
  .contact-header {
      display: flex;
      justify-content: space-between;
      font-size: 0.3rem;
      font-weight: bold;
      color: #000;
      height: 0.66rem;
      line-height: 0.66rem;
      padding: 0 .3rem;
      background-color: #f5f5f5;
      margin-bottom: .3rem;
  }
  .contact-header .role {
      color: #41943c;
      font-size: 0.3rem;
      font-weight: normal;
  }
  .contact-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.28rem;
      color: #666;
      padding: .12rem .3rem 0;
      height: 0.58rem;

  }
  .icon-circle {
      width: 0.46rem;
      height: 0.46rem;
      border: 1px solid #41943c;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      background-color: #fff;
  }
  .icon-circle:active {
      background: #f0f9eb;
  }
  .icon-phone {
      width: 0.26rem;
      height: 0.26rem;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%2341943c"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>') no-repeat center/contain;
  }
  .icon-mail {
      width: 0.26rem;
      height: 0.26rem;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%2341943c"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat center/contain;
  }

  /* --- Footer --- */
  .footer {
      background: url('https://n.sinaimg.cn/sina_client/66ceb6d9/20260402/bg-footer.png') center/cover no-repeat;
      background-color: #69b93c;
      text-align: center;
      font-size: 0.22rem;
      color: #fff;
      line-height: 1.8;
      margin-top: 0.2rem;
      height: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #video {
      min-height: 3.8rem;
  }
  #video video,
  #video .countDown-wrap img {
      border-radius: .12rem;
  }

  /* --- Image Preview Overlay --- */
  .preview-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.95);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
  }
  .preview-close {
      position: absolute;
      top: 0.4rem;
      right: 0.4rem;
      width: 0.8rem;
      height: 0.8rem;
      color: #fff;
      font-size: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      z-index: 10001;
      cursor: pointer;
      display: block;
  }
  .preview-img-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      will-change: transform;
  }
  .preview-img-wrap img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.1s ease-out;
  }