* {
     margin: 0;
     padding: 0;
     font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 400;
 }

 p {
     font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 400;
 }

 html {
     font-size: 16px;
 }

 body {
     -webkit-user-select: none;
     /* Chrome / Safari */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* IE / Edge */
     user-select: none;
     /* 标准语法 */
 }

 img {
     display: block;

 }

 a {
     text-decoration: none;
 }

 .gray_back {
     background: #f5f5f5;
     width: 100%;
 }

 .body {
     width: 100%;

 }

 .header {
     width: 100%;
     background-color: #ffffff;
     position: relative;
     margin: 0 auto;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
 }

 .header_top {
     width: 90rem;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color: #fff;
     position: relative;
 }

 .header-l {
     width: 13.93rem;
     height: 100%;
     display: flex;
     /* 关键 */
     align-items: center;
 }

 .logo {
     width: 100%;
 }

 .header_p {
     position: relative;
     padding: 1.438rem 0;
     /* 23px -> 1.438rem */
     font-size: 1.5rem;
     font-weight: normal;
     letter-spacing: 0rem;
     /* 0px -> 0rem */
     color: #333333;
 }

 .header_act p {
     font-weight: bold;
 }

 .header_act::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     /* 拉满整个容器宽度 */
     height: 0.375rem;
     /* 6px -> 0.375rem */
     /* 条的厚度 */
     background-color: #ff5000;
     /* 条的颜色，可以改 */
     border-radius: 0.313rem;
     /* 5px -> 0.313rem */
 }

 .header-r {
     display: flex;
     gap: 6.1rem;
     align-items: center;
     position: relative;
     justify-content: space-between;
     height: 100%;
 }

 .main_page {
     width: 100%;
     padding-top: 12rem;
 }

 .main_title {
     width: 71.7%;
     margin: 0 auto 3.375rem;
     /* 54px -> 3.375rem */
 }

 #main_animation {
     width: 71.7%;
     margin: 0 auto;
 }

 .bigbox {
     padding: 0 0 3.25rem;
     /* 52px -> 3.25rem */
 }

 .main_bg_box {
     position: relative;
     width: 90rem;
     margin: 0 auto;
 }

 .main_bg {
     width: 100%;
     margin: 0 auto;
 }

 .down_btn {
     width: 26.5%;
     margin: 2.125rem auto 0;
     /* 34px -> 2.125rem */
 }

 .toggle_box {
     padding-top: 8.563rem;
     /* 137px -> 8.563rem */
     padding-bottom: 14.688rem;
     /* 235px -> 14.688rem */
     box-sizing: border-box;
     width: 90rem;
     margin: 0 auto;
 }

 .toggle_out {
     width: 36.8rem;
     margin-bottom: 3.313rem;
     /* 53px -> 3.313rem */
     display: flex;
     justify-content: flex-end;
     margin-left: auto;
     /* ✅容器在父级中靠右 */
 }

 .toggle-container {
     display: flex;
     margin: 0 auto 5rem;
     width: 24.75rem;
     height: 4.125rem;
     background: #f2f2f2;
     border-radius: 4rem;
     padding: 0.375rem;
     box-sizing: border-box;
 }

 .toggle-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: #999;
     border-radius: 4rem;
     cursor: pointer;
     transition: all 0.3s;
 }

 .toggle-btn.active {
     background: #fff;
     color: #333;
     font-weight: bold;
     box-shadow: 0 0 0.188rem rgba(0, 0, 0, 0.1);
     /* 3px -> 0.188rem */
 }

 .big-img {
     width: 100%;
     height: auto;
     /* 高度自适应 */
     display: none;
 }

 .big-img.active {
     display: block;
     /* 只显示当前 */
 }

 .triangle {
     display: flex;
     align-items: end;
     justify-content: center;
     gap: 8.5rem;
     margin: 0 auto;
 }

 .toggle_left {
     width: 26.125rem;
 }

 .img-wrap {
     width: 55.375rem;
 }

 .level_box {
     background: #f5f5f5;
     padding: 7.5rem 0 10.75rem;
     text-align: center;
     position: relative;
 }

 .level_title {
     width: 61rem;
     margin: 0 auto 2.1875rem;
 }

 .level_desc {
     height: 3.187rem;
     /* 51px -> 3.187rem */
     position: absolute;
     left: 50%;
     top: 19.313rem;
     /* 309px -> 19.313rem */
     transform: translate(-50%, 0);
 }

 .level-btns {
     text-align: center;
     margin: 0 auto 10rem;
 }

 .level-btn {
     display: inline-block;
     width: 11.25rem;
     margin: 0 0.625rem;
     /* 10px -> 0.625rem */
     height: 3rem;
     line-height: 3rem;
     font-size: 1.25rem;
     color: #231815;
     background: #edeae9;
     border-radius: 3rem;
 }

 .level-btn:hover {
     background: rgba(0, 0, 0, 0.2);
     transition: all 0.3s;
 }

 .level-btn.active {
     background: #231815;
     color: #fff;
 }

 .marquee-box {
     width: 100%;
     /* height: 13.75rem; */
     overflow: hidden;
     white-space: nowrap;
     margin: 0 auto 1.313rem;
     /* 21px -> 1.313rem */
     position: relative;
 }

 .marquee-content {
     width: 100%;
     display: inline-block;
     white-space: nowrap;
 }

 .marquee-content img {
     height: 13.75rem;
     margin-right: 2rem;
     /* 保持 rem */
     display: inline-block;
 }

 .plan_box {
     padding: 5rem 0 5.75rem;
     /* 80px -> 5rem, 92px -> 5.75rem */
     width: 90rem;
     margin: 0 auto;
 }

 .plan_title {
     width: 68rem;
     margin: 0 auto 4.063rem;
     /* 65px -> 4.063rem */
 }

 .plan-selector {
     display: flex;
     align-items: center;
     gap: 4.5rem;
     /* 72px -> 4.5rem */
     margin-bottom: 2.5rem;
     /* 40px -> 2.5rem */
     justify-content: center;
 }

 .plan-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: pointer;
     /* transition: transform 0.3s; */
     position: relative;
 }

 .plan-item .circle {
     width: 0.75rem;
     height: 0.75rem;
     border-radius: 50%;
     transition: all 0.3s;
     margin-bottom: 0.375rem;
     /* 6px -> 0.375rem */
     position: absolute;
     left: 50%;
     top: -1.25rem;
     /* -20px -> -1.25rem */
     transform: translate(-50%, -50%);
     background: #000;
 }

 .plan-item.active .circle {
     width: 1rem;
     height: 1rem;
     border: 0.375rem solid #f5f5f5;
     /* 6px -> 0.375rem */
     background: #ff5000;
 }

 .play_dot {
     width: 3.87rem;
     position: absolute;
     left: 105%;
     bottom: 160%;
 }

 .plan-item span {
     font-size: 1.25rem;
     color: #999;
     transition: color 0.3s;
 }

 .plan-item.active span {
     color: #231815;
 }

 .plan_image {
     width: 63.75rem;
     margin: 0 auto;
 }

 .parant_title {
     width: 46rem;
     margin: 0 auto 3rem;
     /* 48px -> 3rem */
 }

 .parant-selector {
     position: absolute;
     height: 2.125rem;
     /* 34px -> 2.125rem */
     left: 50%;
     transform: translateX(-50%);
     bottom: 3.563rem;
     /* 57px -> 3.563rem */
     display: flex;
     align-items: center;
     gap: 1.625rem;
     /* 26px -> 1.625rem */
     justify-content: center;
 }

 .parant-selector .circle {
     width: 1rem;
     /* 16px -> 1rem */
     height: 1rem;
     /* 16px -> 1rem */
     border-radius: 50%;
     background: #000;
     transition: all 0.3s ease;
     transform: scale(0.5);
     /* 默认视觉缩小 */
     box-shadow: 0 0 0 0 #fff;
     /* 初始无边框 */
 }

 .parant-selector .circle.active_circle {
     transform: scale(1);
     /* 视觉放大 */
     background: #ff5000;
     box-shadow: 0 0 0 0.188rem #fff;
     /* 3px -> 0.188rem */
 }

 .VIP_box {
     background: #fff;
     padding: 5rem 0 5.375rem;
     /* 80px -> 5rem, 86px -> 5.375rem */
     width: 90rem;
     margin: 0 auto;
 }

 .vip_img {
     width: 58.375rem;
     margin: 0 auto;
 }

 .desc_box {
     background: #f5f5f5;
     padding: 7.5rem 0;
     width: 90rem;
     margin: 0 auto;
 }

 .outdevice {
     background: #f5f5f5;
     padding: 5rem 0 8.375rem;
     /* 80px -> 5rem, 134px -> 8.375rem */
     position: relative;
     width: 90rem;
     margin: 0 auto;
 }

 .device {
     width: 100%;
     margin: 0 auto;
     position: relative;
 }

 .swiper-container {
     width: 62.5rem;
     margin: 0 auto;
 }

 .slide-box img {
     width: 100%;
     display: block;
 }

 .arrow-left,
 .arrow-right {
     position: absolute;
     top: 55%;
     width: 5rem;
     height: 5rem;
     transform: translateY(-50%);
     cursor: pointer;
     z-index: 10;
 }

 .arrow-left {
     left: 3.75rem;
     /* 60px -> 3.75rem */
 }

 .arrow-right {
     right: 3.75rem;
     /* 60px -> 3.75rem */
 }

 .download {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     display: none;
     background: #fff;
     padding: 9.375rem 17.875rem 7.625rem;
     /* 100px -> 6.25rem, 190px -> 11.875rem, 81px -> 5.063rem */
     border-radius: 1.25rem;
     /* 12px -> 0.75rem */
 }

 .down_content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5.188rem;
     /* 83px -> 5.188rem */
 }

 .down_title_app {
     width: 14.625rem;
     /* 156px -> 9.75rem */
     margin: 0 auto;
     margin-bottom: 2.5rem;
     /* 26px -> 1.625rem */
 }

 .app_ercode {
     width: 15.5rem;
     /* 165px -> 10.313rem */
 }

 .down_tv_box {
     text-align: center;
 }

 .down_title_tv {
     width: 6.375rem;
     /* 102px -> 6.375rem */
     margin: 0 auto;
     margin-bottom: 3.75rem;
     /* 40px -> 2.5rem */
 }

 .tv_app_img {
     width: 14.875rem;
     /* 160px -> 10rem */
 }

 .down_tv_btn {
     background: #231815;
     color: #fff;
     width: 12.25rem;
     margin: 0 auto;
     font-size: 1.375rem;
     /* 14px -> 0.875rem */
     border-radius: 1rem;
     /* 10px -> 0.625rem */
     margin-top: 2rem;
     /* 21px -> 1.313rem */
     padding: 0.5rem 0;
     /* 8px 33px -> 0.5rem 2.063rem */
 }

 .close_icon {
     position: absolute;
     width: 2.5rem;
     /* 22px -> 1.375rem */
     right: 1.25rem;
     /* 15px -> 0.938rem */
     top: 1.25rem;
     /* 15px -> 0.938rem */
 }

 .outfooter {
     background-color: #000;
 }

 .footer {
     font-size: 1.375rem;
     margin: 0 auto;
     padding: 3.75rem 0;
     color: #706a6a;
     line-height: 2.375rem;
     text-align: center;
 }

 .footer a {
     color: #706a6a;
     text-decoration: none;
 }

 .footer a:hover {
     color: #fff;
 }

 .mask {
     display: none;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     z-index: 98;
 }

 .certificate_mask {
     display: none;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     z-index: 98;
 }

 .certificate {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background: #fff;
     padding: 3.563rem 14.938rem;
     /* 57px 239px -> 3.563rem 14.938rem */
     border-radius: 0.75rem;
     /* 12px -> 0.75rem */
 }

 .certificate_img {
     width: 20.875rem;
     /* 334px -> 20.875rem */
 }

 .anima_page {
     display: none;
     padding-top: 10.875rem;
     /* 174px -> 10.875rem */
     padding-bottom: 10.875rem;
     /* 174px -> 10.875rem */
 }

 .guide_page,
 .service_page,
 .Official_page {
     display: none;
     padding-top: 16.312rem;
     /* 174px -> 10.875rem */
     height: 100vh;
     box-sizing: border-box;
 }

 .common_div {
     width: 90rem;
     margin: 0 auto;
     position: relative;
 }

 .anima_toggle {}

 .float_down {
     width: 24.8125rem;
     position: fixed;
     left: 50%;
     bottom: 2.5rem;
     /* 40px -> 2.5rem */
     transform: translate(-50%);
     z-index: 999;
 }

 .anima_toggle_container {
     display: flex;
     width: fit-content;
     background: #f2f2f2;
     border-radius: 3rem;
     padding: 0.375rem;
     box-sizing: border-box;
     margin: 0 auto;
 }

 .anima_toggle_btn {
     font-size: 1.5rem;
     line-height: 1.375rem;
     padding: 1rem 3.75rem;
     color: #706a6a;
     border-radius: 1.75rem;
     /* 28px -> 1.75rem */
     cursor: pointer;
     transition: all 0.3s;
 }

 .anima_toggle_btn.active {
     background: #fff;
     color: #231815;
     font-weight: bold;
     box-shadow: 0 0 0.188rem rgba(0, 0, 0, 0.1);
     /* 3px -> 0.188rem */
 }

 .anima_content {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));
     gap: 2.5rem;
     padding: 5rem 0;
 }

 .anima_box {
     position: relative;
     width: 100%;
     padding: 1.125rem 0 1.75rem;
     /* 12px 0 18px -> 0.75rem 0 1.125rem */
     border-radius: 1.0625rem;
     /* 11px -> 0.688rem */
     background-color: #fff;
     box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
     /* 4px 12px -> 0.25rem 0.75rem */
     text-align: center;
     font-family: "PingFang SC", sans-serif;
     opacity: 0;
     transform: translateY(1.25rem);
     /* 20px -> 1.25rem */
     animation: fadeInUp 0.6s forwards;
 }

 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .card-img {
     position: relative;
     display: inline-block;
     margin-bottom: 0.313rem;
     /* 5px -> 0.313rem */
 }

 .card-img .avatar {
     width: 6.25rem;
     border-radius: 50%;
 }

 .badge {
     position: absolute;
     top: 0.625rem;
     /* 10px -> 0.625rem */
     right: 0.625rem;
     /* 10px -> 0.625rem */
     background-color: #ff5000;
     color: #fff;
     font-size: 0.625rem;
     /* 10px -> 0.625rem */
     line-height: 0.625rem;
     padding: 0.25rem 0.375rem;
     /* 4px 6px -> 0.25rem 0.375rem */
     border-radius: 0.25rem;
     /* 4px -> 0.25rem */
 }

 .card-title {
     width: 80%;
     margin: 0 auto;
     font-size: 1.25rem;
     font-weight: bold;
     margin-bottom: 0.375rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .card-info {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 0.125rem;
     /* 2px -> 0.125rem */
     font-size: 0.563rem;
     margin-bottom: 1rem;
 }

 .u_box {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #f4f4f4;
     border-radius: 0.25rem;
     padding: 0 0.375rem;
     height: 1.875rem;
     line-height: 1.875rem;
     color: #231815;
     font-size: 0.875rem;
 }

 .card-info .icon-u {
     width: 1.125rem;
     margin-right: 0.125rem;
     /* 2px -> 0.125rem */
 }

 .card-info .season {
     background-color: #f4f4f4;
     border-radius: 0.25rem;
     width: 3.0625rem;
     height: 1.875rem;
     line-height: 1.875rem;
     font-size: 0.875rem;
     color: #231815;
 }

 .card-desc {
     font-size: 1.0625rem;
     /* 11px -> 0.688rem */
     color: #999;
 }

 .guide_title {
     width: 24.5rem;
     /* 261px -> 16.313rem */
     margin: 0 auto 6.25rem;
     /* 66px -> 4.125rem */
 }

 .guide_code {
     width: 20.375rem;
     /* 217px -> 13.563rem */
     margin: 0 auto 2.5rem;
     /* 26px -> 1.625rem */
 }

 .guide_desc {
     font-size: 1.75rem;
     text-align: center;
 }

 .service_title {
     width: 28.937rem;
     /* 308px -> 19.25rem */
     margin: 0 auto 5.937rem;
     /* 63px -> 3.938rem */
 }

 .service_code {
     width: 20.375rem;
     /* 217px -> 13.563rem */
     margin: 0 auto 2.5rem;
     /* 26px -> 1.625rem */
 }

 .Official_toggle {}

 .Official_toggle_container {
     display: flex;
     width: fit-content;
     background: #f2f2f2;
     border-radius: 2.625rem;
     /* 24px -> 1.5rem */
     padding: 0.375rem;
     /* 3px -> 0.188rem */
     box-sizing: border-box;
     margin: 0 auto;
 }

 .Official_toggle_btn {
     font-size: 1.5rem;
     /* 16px -> 1rem */
     padding: 1rem 2.5rem;
     color: #706a6a;
     border-radius: 2.625rem;
     /* 28px -> 1.75rem */
     cursor: pointer;
     transition: all 0.3s;
 }

 .Official_toggle_btn.active {
     background: #fff;
     color: #231815;
     font-weight: bold;
     box-shadow: 0 0 0.188rem rgba(0, 0, 0, 0.1);
     /* 3px -> 0.188rem */
 }

 .Official_box {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 12.5rem auto 0;
     /* 148px -> 9.25rem */
     gap: 9.5rem;
     /* 101px -> 6.313rem */
 }

 .icon_p_box img {
     width: 6.25rem;
     /* 66px -> 4.125rem */
     margin: 0 auto 2rem;
     /* 21px -> 1.313rem */
 }

 .icon_p_box p {
     font-size: 1.75rem;
     /* 18px -> 1.125rem */
     color: #231815;
     text-decoration: underline;
 }

 .redbook {}

 .business_box,
 .join_box {
     display: none;
 }

 .business_box {
     margin-top: 6.625rem;
     /* 70px -> 4.375rem */
 }

 .business_box p {
     text-align: center;
     font-size: 1.75rem;
     /* 15px -> 0.938rem */
     color: #231815;
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
 }

 .contact_icon {
     width: 16.1875rem;
     /* 172px -> 10.75rem */
     margin: 0 auto 2.5625rem;
     /* 27px -> 1.688rem */
 }

 .join_box {
     margin-top: 6rem;
     /* 64px -> 4rem */
 }

 .join_code {
     width: 20.375rem;
     /* 217px -> 13.563rem */
     margin: 0 auto 2.5rem;
     /* 26px -> 1.625rem */
 }

 .join_box p {
     text-align: center;
     color: #231815;
     font-size: 1.75rem;
     /* 18px -> 1.125rem */
 }

 .wx_hover {
     position: relative;
 }

 .wx_code {
     width: 12.5rem !important;
     /* 133px -> 8.313rem */
     position: absolute;
     left: 0;
     top: -0.625rem;
     /* -10px -> -0.625rem */
     opacity: 0;
     transition: opacity 0.3s;
 }

 .wx_hover:hover .wx_code {
     opacity: 1;
 }

 .top_icon {
     width: 4.25rem;
     position: fixed;
     right: 10%;
     bottom: 5rem;
     /* 80px -> 5rem */
     z-index: 9;
     display: none;
     z-index: 999;
 }

 .div_br {
     white-space: nowrap;
 }

 @media screen and (max-width: 1920px) {
     html {
         font-size: 10.666px;
     }

     .marquee-content img {
         height: 12.469rem;
     }
 }

 @media screen and (min-width: 2560px) {
     /* html { font-size: 24px; }  */
 }