/* ===== entry.B9R4d9tH.css ===== */
*{padding:0}
*,body{margin:0}
a{text-decoration: none;}
/* ===== Header.css ===== */
@media (min-width: 768px) {
  .header {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10000;
    transition: all ease 0.3s;
  }
  .header-box {
    height: 75px;
    min-width: 1040px;
    width: 85%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    background-color: transparent;
    top: 0px;
    backdrop-filter: blur(10px);
  }
  .header-logo {
    width: 260px;
    height: 44px;
  }
  .header-right {
    display: flex;
    align-items: center;
  }
  .header-btn {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 28px;
    border-radius: 5px;
    opacity: 1;
    justify-content: center;
    font-size: 18px;
    margin-left: 40px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
  }
  .header-line {
    position: absolute;
    width: 38px;
    height: 12px;
    bottom: -12px;
  }
  .header-btn a {
    color: #777777;
    text-decoration: none;
  }
  .header-btn span {
    margin-left: 7px;
  }
}
@media (max-width: 767px) {
  .header {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10000;
    transition: all ease 0.3s !important;
  }
  .header-box {
    height: 90px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 10px 16px 20px;
    box-sizing: border-box;
    background-color: transparent;
    top: 0px;
    backdrop-filter: blur(10px);
  }
  .header-logo {
    width: 50vw;
    height: auto;
  }
  .header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .header-btn {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 26px;
    border-radius: 5px;
    opacity: 1;
    justify-content: center;
    font-size: 14px;
    margin-right: 16px;
    margin-top: 6px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
  }
  .header-line {
    position: absolute;
    width: 38px;
    height: 12px;
    bottom: -12px;
    opacity: 0;
  }
  .header-btn a {
    color: #777777;
    text-decoration: none;
  }
  .header-btn span {
    margin-left: 7px;
  }
}

/* ===== homemax.css (桌面版首页样式) ===== */
.body {
  background-image: url('/images/2.png');
  background-size: 100% 100%;
  padding-bottom: 60px;
}
@media (min-width:768px) {
  .dec-price-vip{
    font-size: 12px;
    color: #40796C;
    background-image: url('/images/52.png');
    background-size: 100% 100%;
    padding: 0 10px;
    background-repeat: no-repeat;
    height: 20px;
    line-height: 20px;
    margin-left: 10px;
    margin-right: auto;
  }
  .champion-img {
    display: block;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    object-fit: cover;
    background-color: #D53939;
  }
  .video {
    position: relative;
  }
  .video-card {
    position: absolute;
    left: 100px;
    bottom: 100px;
  }
  .video-card-name {
    font-size: 40px;
    font-weight: 600;
    color: #FFF;
    line-height: 1.2;
  }
  .video-card-name2 {
    font-size: 40px;
    font-weight: 600;
    color: #FFF;
    line-height: 1.2;
    margin-top: 8px;
  }
  .video-card-yue {
    width: 118px;
    height: 48px;
    color: #EA4F13;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    border-radius: 50px;
    margin-top: 35px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .video-card-yue:hover {
    background-color: #F20921;
    color: #FFF;
    transform: scale(1.05);
  }
  .video-card-btnlist {
    display: flex;
    align-items: center;
    margin-top: 70px;
  }
  .video-card-btnitem {
    margin-right: 10px;
    width: 120px;
    height: 44px;
    border-radius: 21px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .video-card-btnitem:hover {
    background-color: #F20921;
  }
  .video-card-btnitem-image {
    width: 21px;
    height: 21px;
    margin-right: 5px;
  }
  .video-card-btnitem-text {
    color: #FFF;
    font-size: 15px;
  }
  .title-wrap {
    display: flex;
    justify-content: center;
  }
  .title {
    text-align: center;
    display: inline-block;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin: 80px auto 0;
  }
  .title-1 {
    font-size: 36px;
    font-family: PingFang SC-中等, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
  }
  .title-2 {
    margin-top: 16px;
    height: auto;
    font-size: 18px;
    font-family: PingFang SC-中等, PingFang SC;
    font-weight: normal;
    color: #666;
    line-height: 1.6;
  }
  .title-3 {
    width: 140px;
    height: 140px;
    position: absolute;
    right: -100px;
    top: -20px;
  }
  .title-4 {
    width: 169px;
    height: 169px;
    position: absolute;
    left: 100px;
    top: -60px;
  }
  .title-5{
    width: 169px;
    height: 169px;
    position: absolute;
    right: -150px;
    top: -60px;
  }
  .dec-list {
    width: 1480px;
    margin: 60px auto 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    gap: 30px;
  }
  .dec-list-images2 {
    width: 167px;
    height: 167px;
    position: absolute;
    right: -40px;
    top: 408px;
  }
  .dec-list-images3 {
    width: 167px;
    height: 167px;
    position: absolute;
    left: -60px;
    bottom: -100px;
  }
  .dec-item-wrap {
    padding: 15px;
    background-image: url('/images/13.png');
    background-size: 340px 480px;
    background-position: 0px 0px;
    width: 340px;
    height: 480px;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-sizing: border-box;
  }
  .dec-item-wrap:hover {
    transform: scale(1.05);
    box-shadow: 0px 3 9px 0px rgba(178, 110, 255, 0.5);
    background-image: url('/images/12.png');
  }
  .dec-item {
    width: 310px;
    height: 450px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 3 9px 0px rgba(178, 110, 255, 0.5);
    border-radius: 38px;
    align-items: center;
  }
  .dec-image {
    width: 200px;
    height: 200px;
    margin-top: 18px;
    box-shadow: 0px 3 9px 0px rgba(129, 129, 129, 0.1);
    border-radius: 50%;
  }
  .dec-name {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 28px;
  }
  .dec-name-title {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  .dec-text-itle {
    font-weight: 600;
    font-size: 28px;
    color: #333;
  }
  .dec-text {
    color: #777777;
    font-size: 14px;
  }
  .dec-time {
    margin-right: 10px;
    display: flex;
    align-items: center;
  }
  .dec-time-icon {
    width: 15px;
    height: 15px;
  }
  .dec-time-length {
    color: #777777;
    font-size: 12px;
    margin-left: 2px;
  }
  .dec-price-num {
    color: #FF3F22;
  }
  .dec-price-after {
    font-size: 12px;
    margin-left: 10px;
    font-weight: 800;
  }
  .dec-price-info {
    font-size: 18px;
    font-weight: 800;
  }
  .dec-price-hua {
    margin-right: 10px;
    color: #777777;
    text-decoration: line-through;
    font-size: 14px;
  }
  .dec-price {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 16px;
  }
  .dec-btn {
    width: 150px;
    height: 44px;
    border-radius: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18px;
    background-color: #FB9548;
    line-height: 44px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    transition: all 1000ms;
    cursor: pointer;
  }
  .dec-btn:hover {
    color: #FFF;
    transform: scale(1.05);
    outline: 2px solid #FFFFFF;
    box-shadow: 4px 5px 17px -4px #FFFFFF;
  }
  .dec-btn::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #F53D50;
    transform: skewX(45deg);
    z-index: -1;
    transition: width 500ms;
  }
  .dec-btn:hover::before {
    width: 250%;
  }
  .ser-list {
    width: 1400px;
    margin: 60px auto 0;
    display: flex;
    position: relative;
    justify-content: center;
    gap: 25px;
  }
  .ser-list-bottom {
    position: absolute;
    left: -60px;
    bottom: -90px;
    width: 155px;
    height: 194px;
  }
  .ser-item {
    display: flex;
    flex-direction: column;
    width: 320px;
    height: 420px;
    background: rgba(255, 255, 255, 0.7);
    border: 3px solid #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 30px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: all ease 0.3s;
  }
  .ser-item:hover {
    transform: translateY(-30px) !important;
  }
  .ser-icon {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 70px;
    width: 70px;
  }
  .ser-bg {
    width: 270px;
    margin-top: 40px;
    height: 200px;
  }
  .ser-title {
    height: auto;
    font-size: 28px;
    font-family: PingFang SC-粗体, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
  }
  .ser-item-img1 {
    position: relative;
    display: flex;
    margin-top: 30px;
  }
  .ser-item-img1-1 {
    width: 160px;
    height: 181px;
    cursor: pointer;
  }
  .ser-item-img1-2 {
    width: 160px;
    height: 181px;
    margin-left: -70px;
    margin-top: 40px;
    cursor: pointer;
  }
  .ser-item-img2-1 {
    width: 128px;
    height: 145px;
    margin-left: 120px;
    margin-top: 30px;
    position: relative;
    z-index: 1;
  }
  .ser-item-img3 {
    display: flex;
    margin-top: 90px;
  }
  .ser-item-1:hover,
  .ser-item-2:hover,
  .ser-item-3:hover,
  .ser-item-4:hover {
    transform: translateY(-30px);
  }
  .ser-item-img3-1 {
    width: 130px;
    height: 130px;
    position: relative;
    z-index: 3;
    transition: all ease 0.3s;
  }
  .ser-item-img3-2 {
    width: 115px;
    height: 115px;
    margin-left: -60px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
    transition: all ease 0.3s;
  }
  .ser-item-img3-3 {
    width: 100px;
    height: 100px;
    margin-left: -60px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    transition: all ease 0.3s;
  }
  .ser-item-img2-2 {
    width: 243px;
    height: 127px;
    margin-top: -60px;
  }
  .ser-item-img4 {
    margin: 70px auto;
  }
  .ser-item-img4-1 {
    width: 160px;
    height: 160px;
    transition: all ease 0.3s;
  }
  .ser-text {
    margin-top: 30px;
    width: 260px;
    height: 40px;
    font-size: 16px;
    font-family: PingFang SC-中等, PingFang SC;
    font-weight: normal;
    color: #777;
    line-height: 24px;
  }
  .card-info {
    width: 1440px;
    min-height: 640px;
    background-image: url('/images/32.png');
    background-size: 100% 100%;
    background-position: center;
    margin: 70px auto 0;
    display: flex;
    position: relative;
    border-radius: 30px;
  }
  .card-info-img1 {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 180px;
    top: 280px;
  }
  .card-info-img2 {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 760px;
    top: 100px;
  }
  .card-info-img3 {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 1000px;
    bottom: 60px;
  }
  .card-info-img4 {
    width: 334px;
    height: 240px;
    position: absolute;
    right: -170px;
    bottom: -80px;
    z-index: 1;
  }
  .card-info-one {
    width: 220px;
    display: flex;
    flex-direction: column;
    height: 610px;
    margin-left: 20px;
    overflow: hidden;
    padding-top: 10px;
  }
  .card-info-one-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    border-radius: 10px;
    margin-top: 6px;
    font-size: 26px;
    color: #777777;
    cursor: pointer;
  }
  .card-info-one-item:hover{
    background: linear-gradient(90deg, #FBDA31 0%, #FE5618 100%);
    color: #FFF;
  }
  .card-info-active {
    background: linear-gradient(90deg, #FBDA31 0%, #FE5618 100%);
    color: #FFF;
  }
  .card-info-two {
    padding-left: 60px;
  }
  .card-info-two-title1 {
    font-size: 26px;
    font-weight: 600;
    margin-top: 40px;
  }
  .card-info-two-title2 {
    margin-top: 5px;
    color: #777;
  }
  .card-info-two-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 1100px;
  }
  .card-info-two-card {
    background: linear-gradient(150deg, #F3E5FE 0%, #B99FF5 100%);
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 30px;
    margin-right: 38px;
    margin-bottom: 10px;
  }
  .card-info-two-card:nth-of-type(4n) {
    background: linear-gradient(150deg, #FFF2D6 0%, #FFBD71 100%);
  }
  .card-info-two-card:nth-of-type(4n-1) {
    background: linear-gradient(150deg, #EDFEFA 0%, #52DCD1 100%);
  }
  .card-info-two-card:nth-of-type(4n-2) {
    background: linear-gradient(150deg, #C5D7FF 0%, #6F98FB 100%);
  }
  .card-info-two-card-img {
    width: 80px;
    height: 80px;
    border-radius: 80px;
  }
  .card-info-two-card-title1 {
    color: #FFF;
    font-size: 20px;
    font-weight: 800;
    margin-top: 5px;
  }
  .card-info-two-card-title2 {
    font-weight: 500;
    color: #FFF;
    font-size: 12px;
    text-align: center;
  }
  .card-info-two-card-title3 {
    font-weight: 500;
    color: #FFF;
    font-size: 12px;
  }
  .card-info-two-title3 {
    font-size: 16px;
    margin-top: 10px;
    position: relative;
  }
  .card-info-two-title4 {
    width: 94px;
    height: 26px;
    margin-left: 30px;
    margin-top: -14px;
  }
  .card-info-three {
    margin-left: auto;
    margin-top: -20px;
  }
  .card-info-three-wrap {
    width: 314px;
    height: 670px;
    background-image: url('/images/31.png');
    background-size: 314px 670px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-info-three-video {
    width: 304px;
    height: 660px;
    border-radius: 26px;
    margin: auto;
  }
  .numInfo {
    width: 1440px;
    min-height: 700px;
    position: relative;
    margin: 80px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
  }
  .numInfo-title1{
    font-weight: 600;
    font-size: 36px;
    color: #333333;
    line-height: 1.4;
    margin-top: 40px;
  }
  .numInfo-title2{
    font-size: 18px;
    color: #666666;
    margin-top: 16px;
  }
  .numInfo-title3{
    font-weight: 500;
    font-size: 24px;
    color: rgba(51,51,51,0.8);
    margin-top: 30px;
  }
  .numInfo-title3-num{
    font-size: 80px;
    color: #000000;
    font-weight: 700;
    margin: 0 8px;
  }
  .numInfo-title4-num{
    font-size: 80px;
    color: #000000;
    font-weight: 700;
    margin-right: 8px;
  }
  .numInfo-title4{
    margin-top: 20px;
    font-weight: 500;
    font-size: 24px;
    color: rgba(51,51,51,0.8);
  }
  .numInfo-title5{
    width: 313px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    border-radius: 50px;
    background-color: #F20921;
    color: #FFF;
    font-size: 18px;
    margin-top: 60px;
    cursor: pointer;
    transition: all ease 0.3s; 
  }
  .numInfo-title5:hover{
    transform: scale(1.05);
  }
  .numInfo-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 30px;
  }
  .numInfo-img {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 500px;
    background-image: url('/images/37.png');
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
  }
  .num-img1 {
    background-image: url('/images/41.png');
    background-size: 194px 267px;
    width: 194px;
    height: 267px;
    left:0;
    top: 0;
  }
  .num-img2 {
    background-image: url('/images/42.png');
    background-size: 167px 219px;
    width: 167px;
    height: 219px;
    left:243px;
    top: 240px;
  }
  .num-img3 {
    background-image: url('/images/38.png');
    background-size: 204px 209px;
    width: 204px;
    height: 209px;
    left:13px;
    top: 440px;
  }
  .num-img4 {
    background-image: url('/images/43.png');
    background-size: 171px 171px;
    width: 171px;
    height: 171px;
    right: 0;
    top: 0;
  }
  .num-img5 {
    background-image: url('/images/40.png');
    background-size: 167px 195px;
    width: 167px;
    height: 195px;
    right: 240px;
    top: 227px;
  }
  .num-img6 {
    background-image: url('/images/39.png');
    background-size: 200px 264px;
    width: 200px;
    height: 264px;
    right: 0;
    top: 387px;
  }
  .num-p {
    position: absolute;
    background-repeat: no-repeat;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 15px 15px 20px 15px;
    transition: all ease 0.4s;
    cursor: pointer;
  }
  .num-p:hover{
    transform: translateY(-15px);
  }
  .num-text1 {
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  .num-text2 {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .news{
    display: flex;
    flex-wrap: wrap;
    width: 1400px;
    margin: 60px auto;
    justify-content: center;
    gap: 30px;
  }
  .news-item{
    width: 420px;
    height: auto;
    min-height: 409px;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all ease 0.3s;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }
  .news-item:hover{
    transform: translateY(-8px);
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.12);
  }
  .news-item-title1-wrap{
    display: flex;
    justify-content: space-between;
  }
  .news-item-title1-date{
    font-size: 12px;
    color: #AAAAAA;
    white-space: nowrap;
    line-height: 40px;
  }
  .news-item-title1{
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    color: #333333;
    text-overflow: ellipsis;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .news-item-title2{
    font-size: 15px;
    color: #777;
    margin-top: 16px;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-item-img{
    width: 355px;
    height: 235px;
    position: relative;
    margin-top: 10px;
    display: flex;
  }
  .news-item-img-wrap{
    width: 90px;
    height: 90px;
    position: absolute;
    top: 0px;
    right: -2px;
    z-index: 1;
    display: flex;
    background-image: url('/images/50.png');
    background-size: 90px 90px;
    align-items: start;
    justify-content: flex-end;
  }
  .news-item-img-jian{
    width: 60px;
    height: 60px;
    background-image: url('/images/45.png');
    background-size: 60px 60px;
    background-repeat: no-repeat;
    transition: all ease 0.3s;
  }
  .news-item:hover .news-item-img-jian{
    background-image: url('/images/46.png');
  }
  .news-item-img1{
    width: 355px;
    height: 235px;
    border-radius: 10px;
    object-fit: cover;
  }
  .news-more{
    width: 150px;
    height: 55px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    transition: all ease 0.3s;
  }
  .news-more:hover{
    transform: scale(1.05);
  }
  ::-webkit-scrollbar-track-piece {
    background-color: #f8f8f8;
  }
  ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #333;
    background-clip: padding-box;
    min-height: 28px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
  }
}

/* ===== homemin.css (手机版首页样式) ===== */
@media (max-width: 767px) {
  .dec-price-vip{
    font-size: 10px;
    color: #40796C;
    background-image: url('/images/52.png');
    background-size: 100% 100%;
    padding: 0 6px;
    background-repeat: no-repeat;
    height: 20px;
    line-height: 20px;
    margin-left: 10px;
    margin-right: auto;
  }
  .champion-img {
    display: block;
    width: 100%;
    height: 70vh;
    margin: 0 auto;
    object-fit: cover;
    background-color: #D53939;
  }
  .video {
    position: relative;
  }
  .video-card {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 40px;
  }
  .video-card-name {
    font-size: 26px;
    font-weight: 600;
    color: #FFF;
  }
  .video-card-name2 {
    font-size: 22px;
    font-weight: 600;
    color: #FFF;
    margin-top: 6px;
  }
  .video-card-yue {
    width: 118px;
    height: 48px;
    color: #EA4F13;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    border-radius: 50px;
    margin-top: 35px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .video-card-yue:hover {
    background-color: #F20921;
    color: #FFF;
    transform: scale(1.05);
  }
  .video-card-btnlist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    row-gap: 8px;
  }
  .video-card-btnitem {
    margin-right: 8px;
    width: auto;
    min-width: 110px;
    padding: 0 10px;
    height: 40px;
    border-radius: 21px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .video-card-btnitem:hover {
    background-color: #F20921;
  }
  .video-card-btnitem-image {
    width: 21px;
    height: 21px;
    margin-right: 5px;
  }
  .video-card-btnitem-text {
    color: #FFF;
    font-size: 15px;
  }
  .title-wrap {
    display: flex;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
    margin-top: 0 !important;
  }
  .title {
    text-align: center;
    display: inline-block;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin: 40px auto 0;
    max-width: 100%;
  }
  .title-1 {
    font-size: 24px;
    font-family: PingFang SC-中等, PingFang SC;
    font-weight: normal;
    color: #000000;
    font-weight: 600;
  }
  .title-2 {
    margin-top: 8px;
    height: auto;
    font-size: 14px;
    font-family: PingFang SC-中等, PingFang SC;
    font-weight: normal;
    color: #666;
    line-height: 20px;
  }
  .title-3,
  .title-4,
  .title-5 {
    display: none;
  }
  .dec-list {
    width: 100%;
    margin: 30px auto 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    box-sizing: border-box;
  }
  .dec-list-images2,
  .dec-list-images3 {
    display: none;
  }
  .dec-item-wrap {
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    width: 48%;
    max-width: 340px;
    height: auto;
    transition: all 0.3s ease;
    margin: 10px auto 0;
    padding-bottom: 20px;
    background-color: #FFF;
  }
  .dec-item-wrap:hover {
    box-shadow: 0px 3 9px 0px rgba(178, 110, 255, 0.5);
  }
  .dec-item {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 3 9px 0px rgba(178, 110, 255, 0.5);
    border-radius: 38px;
    align-items: center;
  }
  .dec-image {
    width: 100%;
    height: 100%;
    box-shadow: 0px 3 9px 0px rgba(129, 129, 129, 0.1);
  }
  .dec-name {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
  }
  .dec-name-title {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  .dec-text-itle {
    font-weight: 600;
    font-size: 18px;
    color: #333;
  }
  .dec-text {
    color: #777777;
    font-size: 10px;
  }
  .dec-time {
    margin-right: 10px;
    display: flex;
    align-items: center;
  }
  .dec-time-icon {
    width: 15px;
    height: 15px;
  }
  .dec-time-length {
    color: #777777;
    font-size: 12px;
    margin-left: 2px;
  }
  .dec-price-num {
    color: #FF3F22;
  }
  .dec-price-after {
    font-size: 12px;
    margin-left: 10px;
    font-weight: 800;
    line-height: 20px;
  }
  .dec-price-info {
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
  }
  .dec-price-hua {
    width: 100%;
    margin-left: 10px;
    color: #777777;
    text-decoration: line-through;
    font-size: 12px;
  }
  .dec-price {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
  }
  .dec-btn {
    width: 150px;
    height: 30px;
    border-radius: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 14px;
    background-color: #FB9548;
    line-height: 30px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    transition: all 1000ms;
    cursor: pointer;
  }
  .dec-btn:hover {
    color: #FFF;
    outline: 2px solid #FFFFFF;
    box-shadow: 4px 5px 17px -4px #FFFFFF;
  }
  .dec-btn::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #F53D50;
    transform: skewX(45deg);
    z-index: -1;
    transition: width 500ms;
  }
  .dec-btn:hover::before {
    width: 250%;
  }
  .ser-list {
    width: 100%;
    margin: 40px auto 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    row-gap: 8px;
  }
  .ser-list-bottom {
    display: none;
  }
  .ser-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 48%;
    height: 250px;
    background: rgba(255, 255, 255, 0.6);
    border: 4px solid #FFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.102);
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: all ease 0.3s;
  }
  .ser-icon {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 40px;
    width: 40px;
  }
  .ser-title {
    font-size: 18px;
    font-family: PingFang SC-粗体, PingFang SC;
    font-weight: normal;
    color: #000000;
    font-weight: 600;
    margin-top: 10px;
  }
  .ser-item-img1 {
    position: relative;
    display: flex;
    margin-top: 30px;
  }
  .ser-item-img1-1 {
    width: 80px;
    height: 90px;
    cursor: pointer;
  }
  .ser-item-img1-2 {
    width: 80px;
    height: 90px;
    margin-left: -20px;
    margin-top: 10px;
    cursor: pointer;
  }
  .ser-item-img2-2 {
    width: 160px;
    height: 73px;
    margin-top: -40px;
  }
  .ser-item-img2-1 {
    width: 64px;
    height: 72px;
    margin-left: 80px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
  }
  .ser-item-img3 {
    display: flex;
    margin-top: 40px;
  }
  .ser-item-1:hover,
  .ser-item-2:hover,
  .ser-item-3:hover,
  .ser-item-4:hover {
    transform: translateY(-30px);
  }
  .ser-item-img3-1 {
    width: 70px;
    height: 70px;
    position: relative;
    z-index: 3;
    transition: all ease 0.3s;
  }
  .ser-item-img3-2 {
    width: 60px;
    height: 60px;
    margin-left: -15px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
    transition: all ease 0.3s;
  }
  .ser-item-img3-3 {
    width: 50px;
    height: 50px;
    margin-left: -15px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    transition: all ease 0.3s;
  }
  .ser-item-img4 {
    margin: 30px auto 0;
  }
  .ser-item-img4-1 {
    width: 80px;
    height: 80px;
    transition: all ease 0.3s;
  }
  .ser-text {
    margin-top: 15px;
    height: 40px;
    font-size: 12px;
    font-family: PingFang SC-中等, PingFang SC;
    font-weight: normal;
    color: #777;
    line-height: 24px;
  }
  .card-info {
    width: 98%;
    min-height: 640px;
    background-size: 1440px 640px;
    border: 2px solid #FFF;
    border-radius: 24px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 16px 10px;
    box-sizing: border-box;
  }
  .card-info-img1,
  .card-info-img2,
  .card-info-img3,
  .card-info-img4 {
    display: none;
  }
  .card-info-one {
    width: 100%;
    display: flex;
    height: auto;
    overflow: hidden;
    padding-top: 10px;
    gap: 10px;
  }
  .card-info-one-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    border-radius: 4px;
    margin-top: 6px;
    font-size: 16px;
    color: #777777;
    cursor: pointer;
  }
  .card-info-one-item:hover {
    background: linear-gradient(90deg, #FBDA31 0%, #FE5618 100%);
    color: #FFF;
  }
  .card-info-active {
    background: linear-gradient(90deg, #FBDA31 0%, #FE5618 100%);
    color: #FFF;
  }
  .card-info-two {
    padding-left: 0;
    width: 100%;
    margin: 0 auto 0;
  }
  .card-info-two-title1 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
  }
  .card-info-two-title2 {
    margin-top: 5px;
    color: #777;
    font-size: 14px;
  }
  .card-info-two-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    width: 100%;
    justify-content: space-between;
  }
  .card-info-two-card {
    background: linear-gradient(150deg, #F3E5FE 0%, #B99FF5 100%);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 20px;
    margin-right: 0;
    margin-bottom: 12px;
    width: 48%;
    box-sizing: border-box;
  }
  .card-info-two-card:nth-of-type(4n) {
    background: linear-gradient(150deg, #FFF2D6 0%, #FFBD71 100%);
  }
  .card-info-two-card:nth-of-type(4n-1) {
    background: linear-gradient(150deg, #EDFEFA 0%, #52DCD1 100%);
  }
  .card-info-two-card:nth-of-type(4n-2) {
    background: linear-gradient(150deg, #C5D7FF 0%, #6F98FB 100%);
  }
  .card-info-two-card-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .card-info-two-card-title1 {
    color: #FFF;
    font-size: 20px;
    font-weight: 800;
    margin-top: 5px;
  }
  .card-info-two-card-title2 {
    font-weight: 500;
    color: #FFF;
    font-size: 12px;
    text-align: center;
  }
  .card-info-two-card-title3 {
    font-weight: 500;
    color: #FFF;
    font-size: 12px;
  }
  .card-info-two-title3 {
    font-size: 16px;
    margin-top: 10px;
    position: relative;
  }
  .card-info-two-title4 {
    width: 94px;
    height: 26px;
    margin-left: 30px;
    margin-top: -14px;
  }
  .card-info-three {
    margin: 0 auto;
  }
  .card-info-three-wrap {
    width: 260px;
    height: 550px;
    background-image: url('/images/31.png');
    background-size: 260px 550px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-info-three-video {
    width: 250px;
    border-radius: 18px;
    margin: auto;
  }
  .numInfo {
    width: 100%;
    min-height: 520px;
    position: relative;
    margin: 0 auto 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .numInfo-title1 {
    font-weight: 600;
    font-size: 24px;
    color: #333333;
    line-height: 64px;
    margin-top: 20px;
  }
  .numInfo-title2 {
    font-size: 14px;
    color: #333333;
    margin-top: 10px;
  }
  .numInfo-title3 {
    font-weight: 500;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.8);
    margin-top: 10px;
  }
  .numInfo-title3-num {
    font-size: 48px;
    color: #000000;
  }
  .numInfo-title4-num {
    font-size: 48px;
    color: #000000;
  }
  .numInfo-title4 {
    margin-top: 10px;
    font-weight: 500;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.8);
  }
  .numInfo-title5 {
    width: 240px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    border-radius: 50px;
    background-color: #F20921;
    color: #FFF;
    font-size: 18px;
    margin-top: 60px;
    cursor: pointer;
    transition: all ease 0.3s;
  }
  .numInfo-title5:hover {
    transform: scale(1.05);
  }
  .numInfo-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 30px;
  }
  .numInfo-img {
    position: relative;
    width: 100%;
    height: 420px;
    background-image: url('/images/37.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .num-p-wrap{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    color: #FFF;
    align-items: center;
    gap: 10%;
    box-sizing: border-box;
    padding: 0 16px;
  }
  .num-img1 {
    background-image: url('/images/41.png');
    background-size: 97px 133px;
    width: 97px;
    height: 133px;
    left:0;
    top: 0;
  }
  .num-img2 {
    background-image: url('/images/42.png');
    background-size: 83px 110px;
    width: 83px;
    height: 110px;
    left:243px;
    top: 240px;
  }
  .num-img3 {
    background-image: url('/images/38.png');
    background-size: 102px 104px;
    width: 102px;
    height: 104px;
    left:13px;
    top: 440px;
  }
  .num-img4 {
    background-image: url('/images/43.png');
    background-size: 85px 85px;
    width: 85px;
    height: 85px;
    right: 0;
    top: 0;
  }
  .num-img5 {
    background-image: url('/images/40.png');
    background-size: 83px 97px;
    width: 83px;
    height: 97px;
    right: 240px;
    top: 227px;
  }
  .num-img6 {
    background-image: url('/images/39.png');
    background-size: 100px 132px;
    width: 100px;
    height: 132px;
    right: 0;
    top: 387px;
  }
  .num-text1 {
    font-size: 14px;
  }
  .num-text2 {
    margin-top: 5px;
    font-size: 12px;
    display: none;
  }
  .news {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 30px auto 40px;
    justify-content: center;
    padding: 0 0;
    box-sizing: border-box;
    gap: 5px;
  }
  .news-item {
    box-sizing: border-box;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 12px;
    cursor: pointer;
    width: 95%;
  }
  .news-item-title1-wrap {
    display: flex;
    justify-content: space-between;
  }
  .news-item-title1-date {
    font-size: 12px;
    color: #AAAAAA;
    white-space: nowrap;
    line-height: 40px;
  }
  .news-item-title1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    color: #333333;
    text-overflow: ellipsis;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .news-item-title2 {
    font-size: 14px;
    color: #777;
    margin-top: 10px;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-item-img {
    width: 100%;
    height: 235px;
    position: relative;
    margin-top: 10px;
    display: flex;
  }
  .news-item-img-wrap {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 0px;
    right: -2px;
    z-index: 1;
    display: flex;
    background-image: url('/images/50.png');
    background-size: 90px 90px;
    align-items: start;
    justify-content: flex-end;
  }
  .news-item-img-jian {
    width: 60px;
    height: 60px;
    background-image: url('/images/45.png');
    background-size: 60px 60px;
    background-repeat: no-repeat;
    transition: all ease 0.3s;
  }
  .news-item:hover .news-item-img-jian {
    background-image: url('/images/46.png');
  }
  .news-item-img1 {
    width: 100%;
    height: 235px;
    border-radius: 10px;
    object-fit: cover;
  }
  .news-more {
    width: 150px;
    height: 55px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    transition: all ease 0.3s;
  }
  .news-more:hover {
    transform: scale(1.05);
  }
  ::-webkit-scrollbar-track-piece {
    background-color: #f8f8f8;
  }
  ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #333;
    background-clip: padding-box;
    min-height: 28px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
  }
}

/* ===== Footer.css ===== */
@media (min-width:768px) {
  .footer {
    width: 100%;
    background: #D53939;
    border-radius: 30px 30px 0px 0px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    padding: 0 200px 10px;
    min-width: 1440px;
  }
  .footer5 {
    color: #FFF;
  }
  .footer5-text1 {
    height: 33px;
    margin-top: 44px;
    font-size: 18px;
    font-weight: 600;
  }
  .footer5-item {
    display: flex;
    font-size: 14px;
    line-height: 30px;
  }
  .footer2-text1 {
    height: 33px;
    width: 180px;
    margin-top: 44px;
  }
  .footer2-text2 {
    margin-top: 12px;
    width: 282px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 20px;
  }
  .footer3 {
    box-sizing: border-box;
  }
  .footer3-text1 {
    height: 18px;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 18px;
    margin-top: 44px;
  }
  .footer3-text2 {
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 10px;
  }
  .footer3-code {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .footer3-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30px;
  }
  .footer3-code-item img {
    width: 70px;
    height: 70px;
  }
  .footer3-code-item span {
    height: 20px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 20px;
    margin-top: 8px;
  }
    .footer5-text2 {
    color: #ffffff;
  }
  .footer5-text2:hover {
    color: #FFDF6F;
    cursor: pointer;
    font-size: 14px;
  }
  .chengshi {
    width: 100%;
    background: #D53939;
    border-radius: 0px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 34px;
    text-align: center;
    min-width: 1440px;
    padding: 0 200px 20px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
  }
  .banquan {
    width: 100%;
    background: #7d001a;
    border-radius: 0px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 34px;
    text-align: center;
    min-width: 1440px;
  }
  .chengshi span,.banquan span {
    color: white;
    margin-right: 10px;
  }
  .banquan img {
    vertical-align: middle;
  }
  .chengshi a,.banquan a {
    color: white;
    text-decoration: none;
  }
  .chengshi a:hover,.banquan a:hover {
    color: #FFDF6F;
  }
}
@media (max-width: 767px) {
  .chengshi {
    width: 100%;
    background: #D53939;
    border-radius: 0px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 34px;
    text-align: center;
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
    position: relative;
    padding: 24px 16px 20px;
  }
  .banquan {
    width: 100%;
    background: #7d001a;
    border-radius: 0px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 34px;
    text-align: center;
  }
  .chengshi span,.banquan span {
    color: white;
    margin-right: 10px;
  }
  .banquan img {
    vertical-align: middle;
  }
  .chengshi a,.banquan a {
    color: white;
    text-decoration: none;
  }
  .chengshi a:hover,.banquan a:hover {
    color: blue;
  }
  .footer {
    width: 100%;
    background: #D53939;
    border-radius: 30px 30px 0px 0px;
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
    position: relative;
    padding: 24px 16px 10px;
  }
  .footer4 {
    max-width: 1200px;
  }
  .footer .footer5:nth-of-type(n-1) {
    margin-right: 100px;
  }
  .footer5 {
    color: #FFF;
    margin-right: 10px;
  }
  .footer5-text1 {
    height: 33px;
    margin-top: 44px;
    font-size: 18px;
    font-weight: 600;
  }
  .footer5-item {
    display: flex;
    font-size: 14px;
    line-height: 30px;
  }
  .footer2-text1 {
    height: 33px;
    width: 180px;
    margin-top: 44px;
  }
  .footer2-text2 {
    margin-top: 12px;
    max-width: 100%;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 20px;
  }
  .footer3 {
    box-sizing: border-box;
  }
  .footer3-text1 {
    height: 18px;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 18px;
    margin-top: 44px;
  }
  .footer3-text2 {
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 10px;
  }
  .footer3-code {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .footer3-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }
  .footer3-code-item img {
    width: 70px;
    height: 70px;
  }
  .footer3-code-item span {
    height: 20px;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 20px;
    margin-top: 8px;
  }
  .footer5-text2 {
    color: #ffffff;
  }
  .footer5-text2:hover {
    color: #FFDF6F;
    cursor: pointer;
    font-size: 14px;
  }
}

/* ===== PopupWeixin.css ===== */
@media (min-width:768px) {
  .popup-weixin-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: none;
  }
  .popup-weixin {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    background-color: #fff;
    border-radius: 5px;
    z-index: 1;
  }
  .weixin-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  .th-icon {
    width: 180px;
    height: 180px;
    border: 1px solid #EEE;
    padding: 2px;
    border-radius: 6px;
  }
  .popup-header {
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #EEE;
    position: relative;
  }
  .close-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    cursor: pointer;
  }
  .popup-content {
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .popup-content-right {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
  }
}
@media (max-width:767px) {
  .popup-weixin-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: none;
  }
  .popup-weixin {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    background-color: #fff;
    border-radius: 5px;
    z-index: 1;
  }
  .weixin-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  .th-icon {
    width: 180px;
    height: 180px;
    border: 1px solid #EEE;
    padding: 2px;
    border-radius: 6px;
  }
  .popup-header {
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #EEE;
    position: relative;
  }
  .close-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    cursor: pointer;
  }
  .popup-content {
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .popup-content-right {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
  }
}

/* ===== joinUsmax.css (加入页桌面版) ===== */
.join-body {
	background-image: url('/images/joinUs/27.png');
	background-size: 100% 100%;
	padding-bottom: 1px;
}
@media (min-width:768px) {
	.join-banner {
		width: 100%;
		height: 100vh;
		background-image: url('/images/joinUs/51.png');
		background-size: 100% 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	.join-banner-content {
		text-align: center;
		color: #333;
		z-index: 2;
		position: relative;
		max-width: 1600px;
		width: 100%;
	}
	.join-banner-title {
		font-size: 42px;
		font-weight: 700;
		line-height: 1.6;
		margin-bottom: 20px;
		color: #2C3E50;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		animation: fadeInUp 1s ease-out;
		margin-top: 100px;
	}
	.join-banner-subtitle {
		font-size: 18px;
		color: #5A6C7D;
		margin-bottom: 60px;
		font-weight: 400;
		animation: fadeInUp 1.2s ease-out;
	}
	.join-banner-data {
		margin-bottom: 50px;
		animation: fadeInUp 1.4s ease-out;
	}
	.join-banner-data-title {
		font-size: 32px;
		color: #2C3E50;
		margin-bottom: 12px;
	}
	.join-banner-data-subtitle {
		font-size: 16px;
		color: #7F8C8D;
	}
	.join-banner-cards {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 40px;
		animation: fadeInUp 1.6s ease-out;
	}
	.join-banner-card {
		position: relative;
	}
	.join-banner-card-top {
		box-sizing: border-box;
		height: 177px;
		width: 282px;
		padding: 15px 17px;
		border-radius: 20px;
		border: 2px solid #FFF;
		position: relative;
		z-index: 1;
	}
	.join-banner-card-bottom {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		border-radius: 20px;
		width: 319px;
		height: 184px;
		margin-top: -120px;
	}
	.join-banner-card-icon {
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}
	.card-icon-img {
		width: 40px;
		height: 40px;
		object-fit: contain;
	}
	.join-banner-card-title {
		font-size: 24px;
		font-weight: 700;
		color: #333;
		margin-left: 12px;
	}
	.join-banner-card-desc {
		flex: 1;
	}
	.join-banner-card-desc p {
		font-size: 13px;
		color: #333333;
		line-height: 1.8;
		margin: 0;
		text-align: left;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	}
	.join-banner-card-btn {
		color: #FFF;
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 20px;
	}
	.join-banner-card:nth-of-type(1) .join-banner-card-top {
		background: linear-gradient(180deg, #F6F9FF 0%, #CECBFC 100%);
	}
	.join-banner-card:nth-of-type(1) .join-banner-card-bottom {
		background: linear-gradient(180deg, #E2D6FE 0%, #1514D9 100%);
	}
	.join-banner-card:nth-of-type(2) .join-banner-card-top {
		background: linear-gradient(180deg, #F6FCFF 0%, #CBE9FC 100%);
	}
	.join-banner-card:nth-of-type(2) .join-banner-card-bottom {
		background: linear-gradient(180deg, #D6F8FE 0%, #14A4D9 100%);
	}
	.join-banner-card:nth-of-type(3) .join-banner-card-top {
		background: linear-gradient(180deg, #FFF6F6 0%, #FCCBCB 100%);
	}
	.join-banner-card:nth-of-type(3) .join-banner-card-bottom {
		background: linear-gradient(180deg, #FED6D6 0%, #D91414 100%);
	}
	.join-banner-card:nth-of-type(4) .join-banner-card-top {
		background: linear-gradient(180deg, #F6FFFD 0%, #CBFCF4 100%);
	}
	.join-banner-card:nth-of-type(4) .join-banner-card-bottom {
		background: linear-gradient(180deg, #D6FEED 0%, #14D9AB 100%);
	}
	.join-banner-card:nth-of-type(5) .join-banner-card-top {
		background: linear-gradient(180deg, #FFF6FD 0%, #FCCBF0 100%);
	}
	.join-banner-card:nth-of-type(5) .join-banner-card-bottom {
		background: linear-gradient(180deg, #F7D6FE 0%, #D914CC 100%);
	}
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.join-section {
		width: 1440px;
		margin: 80px auto;
		position: relative;
	}
	.join-title-wrap {
		text-align: center;
		margin-bottom: 60px;
	}
	.join-title {
		font-size: 46px;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
		position: relative;
		display: inline-block;
	}
	.join-title::after {
		content: '';
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 80px;
		height: 4px;
		background: linear-gradient(90deg, #FF6B9D 0%, #C084FC 100%);
		border-radius: 2px;
	}
	.join-subtitle {
		font-size: 19px;
		color: #666;
		line-height: 1.6;
	}
	.join-cards {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 30px;
	}
	.join-card {
		width: 260px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 28px;
		padding: 35px 28px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		position: relative;
		overflow: hidden;
		border: 2px solid rgba(255, 255, 255, 0.8);
	}
	.join-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: linear-gradient(90deg, #FF6B9D 0%, #C084FC 50%, #4FC3F7 100%);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.join-card:hover::before {
		transform: scaleX(1);
	}
	.join-card:hover {
		transform: translateY(-15px) scale(1.02);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
		border-color: rgba(255, 107, 157, 0.3);
	}
	.join-card:nth-child(1):hover {
		box-shadow: 0 16px 48px rgba(255, 107, 157, 0.25);
	}
	.join-card:nth-child(2):hover {
		box-shadow: 0 16px 48px rgba(255, 140, 66, 0.25);
	}
	.join-card:nth-child(3):hover {
		box-shadow: 0 16px 48px rgba(155, 89, 182, 0.25);
	}
	.join-card:nth-child(4):hover {
		box-shadow: 0 16px 48px rgba(231, 76, 60, 0.25);
	}
	.join-card:nth-child(5):hover {
		box-shadow: 0 16px 48px rgba(26, 188, 156, 0.25);
	}
	.join-card-icon {
		width: 70px;
		height: 70px;
		margin-bottom: 20px;
		transition: transform 0.5s ease;
	}
	.join-card:hover .join-card-icon {
		transform: scale(1.05) rotate(5deg);
	}
	.join-card-title {
		font-size: 24px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
	}
	.join-card-desc {
		font-size: 15px;
		color: #666;
		line-height: 1.8;
	}
	.join-card-btn {
		width: 100%;
		height: 46px;
		border-radius: 23px;
		background: linear-gradient(135deg, #FF6B9D 0%, #C084FC 100%);
		color: #FFF;
		font-size: 15px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 25px;
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		border: none;
		position: relative;
		overflow: hidden;
	}
	.join-card-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
		transition: left 0.5s ease;
	}
	.join-card-btn:hover::before {
		left: 100%;
	}
	.join-card-btn:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 24px rgba(255, 107, 157, 0.5);
	}
	.join-card:nth-child(1) .join-card-btn {
		background: linear-gradient(135deg, #FF6B9D 0%, #FF8FAB 100%);
	}
	.join-card:nth-child(2) .join-card-btn {
		background: linear-gradient(135deg, #FF8C42 0%, #FFB366 100%);
	}
	.join-card:nth-child(3) .join-card-btn {
		background: linear-gradient(135deg, #9B59B6 0%, #B57EDC 100%);
	}
	.join-card:nth-child(4) .join-card-btn {
		background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
	}
	.join-card:nth-child(5) .join-card-btn {
		background: linear-gradient(135deg, #1ABC9C 0%, #48D1B8 100%);
	}
	.xiejie {
		height: 116px;
		background: linear-gradient(180deg, #E7F1FF 0%, rgba(0, 0, 0, 0) 100%);
		border-radius: 0px 0px 0px 0px;
	}
	.join-process {
		position: relative;
	}
	.join-process-title {
		position: relative;
		z-index: 1;
		text-align: center;
		margin-bottom: 80px;
	}
	.join-process-main {
		font-size: 46px;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
		position: relative;
		display: inline-block;
	}
	.join-process-icon {
		width: 120px;
		height: 120px;
		position: absolute;
		right: -100px;
		top: -40px;
	}
	.join-process-cards {
		margin: 0 auto;
		width: 1340px;
		display: flex;
		justify-content: space-between;
		gap: 40px;
		position: relative;
		z-index: 1;
	}
	.join-process-card {
		position: relative;
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
	}
	.join-process-card.user {
		background-image: url('/images/joinUs/21.png');
		background-size: 420px 564px;
		width: 420px;
		height: 564px;
		background-repeat: no-repeat;
	}
	.join-process-card.technician {
		background-image: url('/images/joinUs/22.png');
		background-size: 420px 564px;
		width: 420px;
		height: 564px;
		background-repeat: no-repeat;
	}
	.join-process-card.merchant {
		background-image: url('/images/joinUs/23.png');
		background-size: 420px 564px;
		width: 420px;
		height: 564px;
		background-repeat: no-repeat;
	}
	.join-process-card.agent {
		background-image: url('/images/joinUs/25.png');
		background-size: 630px 440px;
		width: 630px;
		height: 440px;
		background-repeat: no-repeat;
	}
	.join-process-card.promotion {
		background-image: url('/images/joinUs/24.png');
		background-size: 630px 440px;
		width: 630px;
		height: 440px;
		background-repeat: no-repeat;
	}
	.join-process-card-header {
		margin-bottom: 35px;
	}
	.join-process-card-icon {
		width: 157px;
		height: 157px;
		position: absolute;
		right: 20px;
		top: -40px;
	}
	.join-process-card-title {
		font-size: 30px;
		font-weight: 700;
		color: #FFF;
		margin-left: 16px;
		margin-top: 20px;
	}
	.join-process-card-title2 {
		width: 191px;
		height: 35px;
		background: #FFFFFF;
		border-radius: 9px 9px 9px 9px;
		margin-top: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16px;
	}
	.join-process-card-title2-img {
		width: 14px;
		height: 14px;
	}
	.join-process-card-title2-title {
		color: #0984FF;
		font-size: 14px;
		margin-left: 4px;
	}
	.join-process-card-title3 {
		color: #FFF;
		font-size: 14px;
		margin-left: 16px;
		margin-top: 16px;
	}
	.join-process-card-steps {
		margin-top: auto;
		height: 380px;
		border-radius: 10px 10px;
	}
	.steps-bg1 {
		background: linear-gradient(0deg, #D4EAFF 0%, #FFF 50%, #D4EAFF 100%);
	}
	.steps-bg2 {
		background: linear-gradient(0deg, #FFE3D2 0%, #FFF 50%, #FFE3D2 100%);
	}
	.steps-bg3 {
		background: linear-gradient(0deg, #E5D2FF 0%, #FFF 50%, #E5D2FF 100%);
	}
	.steps-bg4 {
		background: linear-gradient(0deg, #FFDBE0 0%, #FFF 50%, #FFDBE0 100%);
	}
	.steps-bg5 {
		background: linear-gradient(0deg, #E2FAF5 0%, #FFF 50%, #E2FAF5 100%);
	}
	.join-process-card-step-title {
		font-size: 18px;
		color: #333;
		margin-left: 18px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.bg-img-process {
		padding-bottom: 100px;
	}
	.bg-img-process:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 800px;
		background-size: 100% 100%;
		background-image: url('/images/joinUs/9.png');
	}
	.timeline-item {
		display: flex;
		margin-left: 26px;
	}
	.timeline-item-right {
		font-size: 14px;
		padding-left: 16px;
		color: #131E3A;
		position: relative;
		margin-top: 5px;
	}
	.timeline-item-right-num {
		position: absolute;
		left: -8px;
		top: -1px;
	}
	.timeline-item-line {
		width: 1px;
		height: calc(68%);
		position: absolute;
		left: -1px;
		bottom: 10px;
		top: 20px;
	}
	.timeline-item-title {
		font-size: 14px;
		color: #131E3A;
	}
	.timeline-item-content {
		margin: 4px 0;
		border-radius: 4px;
		font-size: 14px;
		color: #59647B;
		min-height: 4px;
	}
	.timeline-item-content-title {
		font-size: 12px;
		color: #666;
	}
	.timeline-item-content-title-text {
		font-size: 10px;
		color: #0381FF;
		cursor: pointer;
	}
	.timeline-item-content-person {
		margin: 8px 0;
	}
	.join-process-card-step-wrap {
		display: flex;
		align-items: center;
	}
	.join-process-card-step-item {
		height: 35px;
		background: #FFFFFF;
		border-radius: 9px 9px 9px 9px;
		margin-top: 8px;
		display: flex;
		padding: 0 15px;
		margin-bottom: 20px;
		align-items: center;
		justify-content: center;
		margin-left: 16px;
		font-size: 12px;
	}
	.steps-tel {
		position: absolute;
		bottom: 12px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 12px;
		color: #666;
	}
	.join-advantage {
		width: 1440px;
		margin: 100px auto;
		position: relative;
	}
	.join-advantage-title {
		text-align: center;
		margin-bottom: 80px;
		position: relative;
	}
	.join-advantage-title-img1 {
		width: 80px;
		height: 93px;
		position: absolute;
		left: 280px;
		top: -20px;
	}
	.join-advantage-title-img2 {
		width: 297px;
		height: 260px;
		position: absolute;
		right: 0;
		top: 0;
	}
	.join-advantage-main {
		font-size: 46px;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
		position: relative;
		display: inline-block;
	}
	.join-advantage-sub {
		font-size: 26px;
		color: #333;
		margin-top: 100px;
		line-height: 1.6;
	}
	.join-advantage-sub2 {
		font-size: 16px;
		color: #666;
		margin-top: 10px;
		line-height: 1.6;
	}
	.join-advantage-cards {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 30px;
	}
	.join-advantage-card {
		flex: 1;
		border: 2px solid #FFF;
		background: linear-gradient(-45deg, #F4DBEB 0%, #F3EDE9 50%, #E7EBEC 100%);
		border-radius: 28px;
		padding: 45px 35px;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
		text-align: center;
		transition: all 0.5s ease;
		position: relative;
		overflow: hidden;
	}
	.join-advantage-card:hover {
		transform: translateY(-30px) !important;
	}
	.join-advantage-card-icon {
		width: 184px;
		height: 149px;
		margin: 30px auto 30px;
		transition: transform 0.5s ease;
	}
	.join-advantage-card-title {
		font-size: 26px;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
	}
	.join-advantage-card-desc {
		font-size: 15px;
		color: #666;
		line-height: 1.9;
	}
	.join-cities {
		width: 1440px;
		margin: 180px auto;
		position: relative;
	}
	.join-cities-img1 {
		width: 359px;
		height: 199px;
		position: absolute;
		bottom: -120px;
		left: -200px;
	}
	.join-cities-img2 {
		width: 176px;
		height: 176px;
		position: absolute;
		top: 220px;
		right: -100px;
	}
	.join-cities-img3 {
		width: 676px;
		height: 880px;
		position: absolute;
		top: -320px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	.join-cities-title {
		text-align: center;
		margin-bottom: 50px;
	}
	.join-cities-main {
		font-size: 46px;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
		position: relative;
		display: inline-block;
	}
	.join-cities-sub {
		font-size: 19px;
		color: #666;
		line-height: 1.6;
	}
	.join-cities-content {
		margin-top: 100px;
	}
	.join-cities-region {
		margin-bottom: 40px;
		background-color: #FFF;
		margin-top: 30px;
		border-radius: 10px;
		max-height: 600px;
		overflow-y: scroll;
	}
	.join-cities-region-row {
		display: flex;
	}
	.join-cities-region-row:nth-of-type(2n) {
		background: #F7FAFE;
	}
	.join-cities-content-title {
		font-size: 25px;
		color: #333333;
	}
	.join-cities-content-title2 {
		font-size: 16px;
		color: #666;
	}
	.join-cities-region-title {
		font-size: 16px;
		min-height: 100px;
		line-height: 100px;
		color: #333;
		position: relative;
		box-shadow: 3px 0px 3px 0px #ebebeb;
		width: 140px;
		text-align: center;
	}
	.join-cities-list {
		padding: 15px 0;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		margin-left: 40px;
		flex: 1;
		align-items: center;
	}
	.join-city-tag {
		color: #333;
		font-size: 15px;
		cursor: pointer;
		margin-right: 10px;
	}
	.join-cases {
		position: relative;
		margin-bottom: 20px;
	}
	.join-cases-wrap {
		width: 1440px;
		margin: 100px auto 0;
		padding-bottom: 100px;
		position: relative;
		z-index: 1;
	}
	.join-cases-title {
		text-align: center;
		margin-bottom: 80px;
	}
	.join-cases-main {
		font-size: 46px;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
		position: relative;
		display: inline-block;
	}
	.join-cases-cards {
		display: flex;
		justify-content: space-between;
		gap: 30px;
		margin-top: 26px;
	}
	.join-case-card {
		background: #FFF;
		border-radius: 14px;
		overflow: hidden;
		transition: all 0.5s ease;
		cursor: pointer;
		position: relative;
		width: 298px;
		box-sizing: border-box;
		padding: 30px;
	}
	.join-case-card:hover {
		transform: translateY(-15px) scale(1.02);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
	}
	.join-case-card-name {
		font-size: 18px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
	}
	.join-case-card-info {
		font-size: 12px;
		color: #666;
		line-height: 1.5;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.join-case-card-tags {
		display: flex;
		align-items: center;
	}
	.join-case-card-tag {
		font-size: 12px;
		color: #333;
		background-color: #F5F7FC;
		padding: 2px 10px;
		margin-right: 10px;
	}
	.join-btn {
		width: 122px;
		height: 36px;
		background: #FFFFFF;
		border-radius: 88px 88px 88px 88px;
		border: 2px solid #EF061C;
		text-align: center;
		line-height: 36px;
		color: #EF061C;
		font-size: 18px;
		font-weight: 700;
	}
	.join-btn:hover {
		background: #EF061C;
		color: #FFFFFF;
	}
	.join-cases-dec {
		margin-top: 26px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333;
		font-size: 14px;
	}
	.join-cases:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 400px;
		background-size: 100% 100%;
		background-image: url('/images/joinUs/16.png');
	}
}

/* ===== joinUsmin.css (加入页手机版) ===== */
@media (max-width:767px) {
	.join-banner {
		width: 100%;
		min-height: auto;
		padding: 60px 0 40px;
		background-image: url('/images/joinUs/51.png');
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	.join-banner-content {
		text-align: center;
		color: #333;
		z-index: 2;
		position: relative;
		width: 100%;
		padding: 0 20px;
	}
	.join-banner-title {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.5;
		margin-bottom: 15px;
		color: #2C3E50;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		animation: fadeInUp 1s ease-out;
		margin-top: 60px;
	}
	.join-banner-title br {
		display: none;
	}
	.join-banner-subtitle {
		font-size: 14px;
		color: #5A6C7D;
		margin-bottom: 30px;
		font-weight: 400;
		animation: fadeInUp 1.2s ease-out;
	}
	.join-banner-data {
		margin-bottom: 30px;
		animation: fadeInUp 1.4s ease-out;
	}
	.join-banner-data-title {
		font-size: 20px;
		color: #2C3E50;
		margin-bottom: 8px;
	}
	.join-banner-data-subtitle {
		font-size: 13px;
		color: #7F8C8D;
		padding: 0 15px;
	}
	.join-banner-cards {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
		margin-top: 30px;
		animation: fadeInUp 1.6s ease-out;
		padding: 0 15px;
	}
	.join-banner-card {
		position: relative;
		width: 100%;
		max-width: 340px;
	}
	.join-banner-card-top {
		box-sizing: border-box;
		height: auto;
		min-height: 150px;
		width: 100%;
		padding: 20px 15px;
		border-radius: 16px;
		border: 2px solid #FFF;
		position: relative;
		z-index: 1;
	}
	.join-banner-card-bottom {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		border-radius: 16px;
		width: 100%;
		height: 60px;
		margin-top: -20px;
	}
	.join-banner-card-icon {
		margin-bottom: 12px;
		display: flex;
		align-items: center;
	}
	.card-icon-img {
		width: 36px;
		height: 36px;
		object-fit: contain;
	}
	.join-banner-card-title {
		font-size: 20px;
		font-weight: 700;
		color: #333;
		margin-left: 10px;
	}
	.join-banner-card-desc {
		flex: 1;
	}
	.join-banner-card-desc p {
		font-size: 12px;
		color: #333333;
		line-height: 1.6;
		margin: 0;
		text-align: left;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	}
	.join-banner-card-btn {
		color: #FFF;
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
		cursor: pointer;
	}
	.join-banner-card:nth-of-type(1) .join-banner-card-top {
		background: linear-gradient(180deg, #F6F9FF 0%, #CECBFC 100%);
	}
	.join-banner-card:nth-of-type(1) .join-banner-card-bottom {
		background: linear-gradient(180deg, #E2D6FE 0%, #1514D9 100%);
	}
	.join-banner-card:nth-of-type(2) .join-banner-card-top {
		background: linear-gradient(180deg, #F6FCFF 0%, #CBE9FC 100%);
	}
	.join-banner-card:nth-of-type(2) .join-banner-card-bottom {
		background: linear-gradient(180deg, #D6F8FE 0%, #14A4D9 100%);
	}
	.join-banner-card:nth-of-type(3) .join-banner-card-top {
		background: linear-gradient(180deg, #FFF6F6 0%, #FCCBCB 100%);
	}
	.join-banner-card:nth-of-type(3) .join-banner-card-bottom {
		background: linear-gradient(180deg, #FED6D6 0%, #D91414 100%);
	}
	.join-banner-card:nth-of-type(4) .join-banner-card-top {
		background: linear-gradient(180deg, #F6FFFD 0%, #CBFCF4 100%);
	}
	.join-banner-card:nth-of-type(4) .join-banner-card-bottom {
		background: linear-gradient(180deg, #D6FEED 0%, #14D9AB 100%);
	}
	.join-banner-card:nth-of-type(5) .join-banner-card-top {
		background: linear-gradient(180deg, #FFF6FD 0%, #FCCBF0 100%);
	}
	.join-banner-card:nth-of-type(5) .join-banner-card-bottom {
		background: linear-gradient(180deg, #F7D6FE 0%, #D914CC 100%);
	}
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.xiejie {
		height: 60px;
		background: linear-gradient(180deg, #E7F1FF 0%, rgba(0, 0, 0, 0) 100%);
		border-radius: 0px 0px 0px 0px;
	}
	.join-process {
		position: relative;
		padding: 30px 0 0;
	}
	.join-process-title {
		position: relative;
		z-index: 1;
		text-align: center;
		margin-bottom: 40px;
		padding: 0 20px;
	}
	.join-process-main {
		font-size: 24px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
		position: relative;
		display: inline-block;
	}
	.join-process-icon {
		width: 60px;
		height: 60px;
		position: absolute;
		right: -50px;
		top: -20px;
	}
	.join-process-cards {
		margin: 0 auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
		position: relative;
		z-index: 1;
	}
	.join-process-card {
		position: relative;
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 380px;
	}
	.join-process-card.user {
		background-image: url('/images/joinUs/21.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 500px;
		background-repeat: no-repeat;
	}
	.join-process-card.technician {
		background-image: url('/images/joinUs/22.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 500px;
		background-repeat: no-repeat;
	}
	.join-process-card.merchant {
		background-image: url('/images/joinUs/23.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 500px;
		background-repeat: no-repeat;
	}
	.join-process-card.agent {
		background-image: url('/images/joinUs/25.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 400px;
		background-repeat: no-repeat;
	}
	.join-process-card.promotion {
		background-image: url('/images/joinUs/24.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 400px;
		background-repeat: no-repeat;
	}
	.join-process-card-header {
		margin-bottom: 25px;
	}
	.join-process-card-icon {
		width: 100px;
		height: 100px;
		position: absolute;
		right: 15px;
		top: -30px;
	}
	.join-process-card-title {
		font-size: 22px;
		font-weight: 700;
		color: #FFF;
		margin-left: 15px;
		margin-top: 15px;
	}
	.join-process-card-title2 {
		width: auto;
		max-width: 180px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 8px;
		margin-top: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15px;
		padding: 0 12px;
	}
	.join-process-card-title2-img {
		width: 12px;
		height: 12px;
	}
	.join-process-card-title2-title {
		font-size: 13px;
		margin-left: 4px;
	}
	.join-process-card-title3 {
		color: #FFF;
		font-size: 13px;
		margin-left: 15px;
		margin-top: 12px;
	}
	.join-process-card-steps {
		margin-top: auto;
		min-height: 320px;
		border-radius: 10px 10px;
		padding-bottom: 15px;
	}
	.steps-bg1 {
		background: linear-gradient(0deg, #D4EAFF 0%, #FFF 50%, #D4EAFF 100%);
	}
	.steps-bg2 {
		background: linear-gradient(0deg, #FFE3D2 0%, #FFF 50%, #FFE3D2 100%);
	}
	.steps-bg3 {
		background: linear-gradient(0deg, #E5D2FF 0%, #FFF 50%, #E5D2FF 100%);
	}
	.steps-bg4 {
		background: linear-gradient(0deg, #FFDBE0 0%, #FFF 50%, #FFDBE0 100%);
	}
	.steps-bg5 {
		background: linear-gradient(0deg, #E2FAF5 0%, #FFF 50%, #E2FAF5 100%);
	}
	.join-process-card-step-title {
		font-size: 16px;
		color: #333;
		margin-left: 15px;
		margin-top: 15px;
		margin-bottom: 10px;
	}
	.bg-img-process {
		margin-top: 0px !important;
		padding-bottom: 60px;
	}
	.bg-img-process:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 400px;
		background-size: 100% 100%;
		background-image: url('/images/joinUs/9.png');
		z-index: 0;
	}
	.timeline-item {
		display: flex;
		margin-left: 20px;
	}
	.timeline-item-right {
		font-size: 13px;
		padding-left: 14px;
		color: #131E3A;
		position: relative;
		margin-top: 5px;
	}
	.timeline-item-right-num {
		position: absolute;
		left: -8px;
		top: -1px;
		font-size: 14px;
	}
	.timeline-item-line {
		width: 1px;
		height: calc(68%);
		position: absolute;
		left: -1px;
		bottom: 10px;
		top: 20px;
	}
	.timeline-item-title {
		font-size: 13px;
		color: #131E3A;
		font-weight: 600;
	}
	.timeline-item-content {
		margin: 4px 0;
		border-radius: 4px;
		font-size: 13px;
		color: #59647B;
		min-height: 4px;
	}
	.timeline-item-content-title {
		font-size: 11px;
		color: #666;
	}
	.timeline-item-content-title-text {
		font-size: 10px;
		cursor: pointer;
	}
	.timeline-item-content-person {
		margin: 8px 0;
	}
	.join-process-card-step-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.join-process-card-step-item {
		height: 32px;
		background: #FFFFFF;
		border-radius: 8px;
		margin-top: 6px;
		display: flex;
		padding: 0 12px;
		margin-bottom: 8px;
		align-items: center;
		justify-content: center;
		margin-left: 15px;
		font-size: 11px;
	}
	.join-process-card-step-item-text {
		white-space: nowrap;
	}
	.steps-tel {
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 11px;
		color: #666;
		padding: 0 15px;
	}
	.join-advantage {
		width: 98%;
		margin: 60px auto;
		position: relative;
	}
	.join-advantage-title {
		text-align: center;
		margin-bottom: 40px;
		position: relative;
	}
	.join-advantage-title-img1 {
		width: 50px;
		height: 58px;
		position: absolute;
		left: 20px;
		top: -10px;
	}
	.join-advantage-title-img2 {
		width: 150px;
		height: 130px;
		position: absolute;
		right: 10px;
		top: 0;
	}
	.join-advantage-main {
		font-size: 22px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
		position: relative;
		display: inline-block;
		padding: 0 10px;
	}
	.join-advantage-sub {
		font-size: 18px;
		color: #333;
		margin-top: 50px;
		line-height: 1.6;
	}
	.join-advantage-sub2 {
		font-size: 14px;
		color: #666;
		margin-top: 10px;
		line-height: 1.6;
		padding: 0 10px;
	}
	.join-advantage-cards {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30px;
		justify-content: space-around;
	}
	.join-advantage-card {
		width: 48%;
		box-sizing: border-box;
		border: 2px solid #FFF;
		background: linear-gradient(-45deg, #F4DBEB 0%, #F3EDE9 50%, #E7EBEC 100%);
		border-radius: 20px;
		padding: 20px 10px;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
		text-align: center;
		transition: all 0.5s ease;
		position: relative;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.join-advantage-card:active {
		transform: translateY(-10px) !important;
	}
	.join-advantage-card-icon {
		width: 100px;
		height: 80px;
		margin: 20px auto 20px;
		transition: transform 0.5s ease;
	}
	.join-advantage-card-title {
		font-size: 20px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
	}
	.join-advantage-card-desc {
		font-size: 13px;
		color: #666;
		line-height: 1.8;
	}
	.join-cities {
		width: 98%;
		margin: 80px auto;
		position: relative;
	}
	.join-cities-img1 {
		width: 180px;
		height: 100px;
		position: absolute;
		bottom: -60px;
		left: -80px;
		opacity: 0.6;
	}
	.join-cities-img2 {
		width: 88px;
		height: 88px;
		position: absolute;
		top: 120px;
		right: 0px;
		opacity: 0.6;
	}
	.join-cities-img3 {
		width: 300px;
		height: 400px;
		position: absolute;
		top: -150px;
		right: 0;
		left: 0;
		margin: 0 auto;
		opacity: 0.3;
	}
	.join-cities-title {
		text-align: center;
		margin-bottom: 30px;
	}
	.join-cities-main {
		font-size: 22px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
		position: relative;
		display: inline-block;
		line-height: 1.4;
	}
	.join-cities-sub {
		font-size: 15px;
		color: #666;
		line-height: 1.6;
	}
	.join-cities-content {
		margin-top: 50px;
	}
	.join-cities-region {
		margin-bottom: 30px;
		background-color: #FFF;
		margin-top: 20px;
		border-radius: 10px;
		max-height: 500px;
		overflow-y: auto;
	}
	.join-cities-region-row {
		display: flex;
		flex-direction: column;
		padding: 15px 0;
	}
	.join-cities-region-row:nth-of-type(2n) {
		background: #F7FAFE;
	}
	.join-cities-content-title {
		font-size: 20px;
		color: #333333;
		font-weight: 600;
	}
	.join-cities-content-title2 {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}
	.join-cities-region-title {
		font-size: 15px;
		line-height: 1.5;
		color: #333;
		position: relative;
		width: 100%;
		text-align: center;
		padding: 10px 0;
		font-weight: 600;
		border-bottom: 1px solid #ebebeb;
	}
	.join-cities-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		padding: 15px;
	}
	.join-city-tag {
		color: #333;
		font-size: 13px;
		cursor: pointer;
		padding: 5px 10px;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 4px;
	}
	.join-cases {
		position: relative;
		margin-bottom: 20px;
	}
	.join-cases-wrap {
		width: 98%;
		margin: 60px auto 0;
		padding: 0 0 60px;
		position: relative;
		z-index: 1;
	}
	.join-cases-title {
		text-align: center;
		margin-bottom: 40px;
	}
	.join-cases-title2{
		text-align: center;
	}
	.join-cases-main {
		font-size: 22px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
		position: relative;
		display: inline-block;
	}
	.join-cases-cards {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		margin-top: 20px;
	}
	.join-case-card {
		background: #FFF;
		border-radius: 12px;
		overflow: hidden;
		transition: all 0.5s ease;
		cursor: pointer;
		position: relative;
		width: 100%;
		max-width: 340px;
		box-sizing: border-box;
		padding: 25px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}
	.join-case-card:active {
		transform: translateY(-8px) scale(1.01);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
	}
	.join-case-card-name {
		font-size: 17px;
		font-weight: 700;
		color: #333;
		margin-bottom: 12px;
	}
	.join-case-card-info {
		font-size: 12px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 15px;
		margin-top: 15px;
	}
	.join-case-card-tags {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}
	.join-case-card-tag {
		font-size: 11px;
		color: #333;
		background-color: #F5F7FC;
		padding: 4px 12px;
		border-radius: 4px;
	}
	.join-btn {
		width: 110px;
		height: 34px;
		background: #FFFFFF;
		border-radius: 88px;
		border: 2px solid #EF061C;
		text-align: center;
		line-height: 30px;
		color: #EF061C;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	.join-btn:active {
		background: #EF061C;
		color: #FFFFFF;
	}
	.join-cases-dec {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333;
		font-size: 13px;
		line-height: 1.8;
		text-align: center;
	}
	.join-cases-dec span {
		margin-bottom: 8px;
	}
	.join-cases:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 250px;
		background-size: 100% 100%;
		background-image: url('/images/joinUs/16.png');
	}
}

        .city-stations-section {
            max-width: 1320px;
            margin: 0 auto;
            padding: 60px 20px 40px;
            position: relative;
            background: transparent;
        }
        
        .city-stations-section .title-wrap {
            margin-bottom: 80px;
        }
        
        .city-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
            gap: 24px 20px;
            margin: 30px 0 20px;
        }
        
        .city-item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 28px;
            padding: 14px 8px;
            font-size: 1rem;
            font-weight: 500;
            color: #2c3e4e;
            text-decoration: none;
            transition: all 0.25s ease-in-out;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
            letter-spacing: 0.5px;
            backdrop-filter: blur(0px);
            line-height: 1.3;
        }
        
        .city-item:hover {
            background: linear-gradient(to left, #bc1f21, #e44947, #e94057);
            border-color: #FFDF6F;
            color: #ffffff;
            transform: translateY(-3px);
            box-shadow: 0 12px 20px -12px rgba(28, 178, 155, 0.28);
        }
        
        .city-more {
            text-align: center;
            margin-top: 42px;
            font-size: 0.9rem;
            color: #8e9eae;
            position: relative;
            display: inline-block;
            width: 100%;
            letter-spacing: 0.3px;
            font-weight: 400;
            background: transparent;
        }
        
        .city-more::before,
        .city-more::after {
            content: "";
            display: inline-block;
            width: 30px;
            height: 1px;
            background: #d4e2e6;
            vertical-align: middle;
            margin: 0 12px;
        }
        
        @media (max-width: 992px) {
            .city-stations-section {
                padding: 50px 20px 30px;
            }
            .city-grid {
                gap: 18px;
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
            .city-item {
                padding: 12px 6px;
                font-size: 0.95rem;
                border-radius: 26px;
            }
        }
        
        @media (max-width: 768px) {
            .city-stations-section {
                padding: 40px 16px 30px;
            }
            .city-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
            }
            .city-item {
                padding: 10px 6px;
                font-size: 0.9rem;
                border-radius: 32px;
            }
            .city-more {
                margin-top: 32px;
                font-size: 0.85rem;
            }
            .city-more::before,
            .city-more::after {
                width: 20px;
                margin: 0 8px;
            }
        }
        
        .city-stations-section + footer {
            margin-top: 0;
        }
        
        .city-stations-section .title-3,
        .city-stations-section .title-4 {
            max-width: 100%;
            height: auto;
        }
        
        @media (hover: none) {
            .city-item:hover {
                transform: none;
                background: #ffffff;
                border-color: #e9ecef;
                color: #2c3e4e;
            }
        }