body {
    background-color: #f3f5f6;
}

p {
    margin-bottom: 0;
}

.block-banner {
    position: relative;
    z-index: 0;
    height: 400px;
    display: flex;
    align-items: center;
    background: url(https://cms-image.leyifan.cn/resources/image/2026/08/28/842774307950661.png) center center / cover no-repeat;
}

.channel-name {
    position: absolute;
    top: 165px;
    left: 240px;
    font-size: 48px;
    font-weight: 600;
    line-height: 62px;
    color: #FFFFFF;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
}

.channel-tips {
    position: absolute;
    top: 243px;
    left: 240px;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: #FFFFFF;
}

.page-main {
    position: relative;
}

.content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0;
}

.container {
    width: 1440px;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.nav-warp {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.nav-warp .nav-item {
    position: relative;
    width: calc((100% - 40px) / 2);
    height: 190px;
    display: flex;
    gap: 32px;
    padding: 48px 64px;

    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffffb3 100%);
    box-sizing: border-box;
    border: 1px solid #FFFFFF;
    overflow: hidden;
}

.nav-item .info {
    display: flex;
    gap: 32px;
}

.nav-item .info .icon {
    height: 64px;
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    background: #F6F6F6;
}

.nav-item .info .icon img {
    width: 40px;
    height: 40px;
    display: block;
}

.nav-item .info .nav-item-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nav-item .info .nav-item-row .title {
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    color: #222222;
}

.nav-item .info .nav-item-row .btn {
    width: 128px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    font-size: 16px;
    font-weight: 500;
    line-height: 40px;

    color: #FFFFFF;
    border-radius: 24px;
    background: #F74054;
}

.nav-item .left-back-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 340px;
    height: 190px;
    background: url(https://cms-image.leyifan.cn/resources/image/2026/06/25/820205717188677.png) center center / cover no-repeat;
    pointer-events: none;
}

.nav-item .right-back-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 340px;
    height: 190px;
    background: url(https://cms-image.leyifan.cn/resources/image/2026/06/26/820458922991685.png) center center / cover no-repeat;
}

.service-intro-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.service-intro-col .title {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    color: #222222;
}

.service-intro-col .tips {
    font-size: 16px;
    line-height: 22px;
    color: #666666;
    text-align: center;
}

.video-container {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-top: 28px;
}

.video-container video {
    width: 100%;
    display: block;
}

/* 视频遮罩层样式 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    /* 半透明黑色遮罩 */
    z-index: 5;
    transition: opacity 0.3s ease;
}

/* 播放状态下隐藏遮罩 */
.video-playing .video-overlay {
    opacity: 0;
    pointer-events: none;
}

/* 自定义视频播放按钮 */
.custom-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 124px;
    height: 80px;
    cursor: pointer;
    z-index: 10;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px) saturate(100%);
}

.custom-video-play img {
    width: 100%;
    height: 100%;
}

/* 播放状态下隐藏按钮 */
.video-playing .custom-video-play {
    opacity: 0;
    display: none;
    /* 添加这一行确保完全隐藏 */
    transition: opacity 0.3s ease;
}

/* 全屏按钮样式 */
.fullscreen-button {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.video-container:hover .fullscreen-button {
    opacity: 1;
}

.fullscreen-button img {
    width: 24px;
    height: 24px;
}

/* 在全屏模式下的特殊样式 */
.video-container.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
}

.video-container.fullscreen-mode video {
    height: 100%;
    object-fit: contain;
    background-color: #000;
}

/* 视频进度条样式 */
.video-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 15;
    transition: height 0.3s ease;
}

.video-container:hover .video-progress-container {
    height: 6px;
}

.video-progress {
    height: 100%;
    background-color: #cf2c3f;
    width: 0;
    position: relative;
}

.video-progress-handle {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 16;
    display: none;
}

.video-container:hover .video-progress-handle {
    display: block;
}

.video-time-remaining {
    position: absolute;
    bottom: 30px;
    right: 80px;
    background: #fff;
    color: #222222;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    width: 60px;
    height: 24px;
    z-index: 10;
}

.service-advantage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.service-advantage .title {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    color: #222222;
}

.service-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.service-advantage .service-row-item {
    width: 330px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #FFFFFF;
}

.service-advantage .service-row-item .cover,
.service-advantage .service-row-item img {
    width: 100% !important;
    height: 240px !important;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.service-advantage .service-row-item .cover img {
    width: 100%;
    height: 100%;
    display: block;
}

.service-advantage .service-row-item .intro {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-row-item .intro .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: #000000;
}

.service-row-item .intro .tips {
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}

.service-grid {
    margin-top: 80px;
    width: 100%;
    background: url(https://cms-image.leyifan.cn/resources/image/2026/06/26/820550203457605.png) center center / cover no-repeat;
    padding: 80px 240px;
}

.service-grid .title {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    color: #FFFFFF;
}

.service-grid .tips {
    margin-top: 20px;
    width: 650px;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

.service-grid .row-list {
    margin-top: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-grid .row-list .item {
    width: 330px;
    height: 130px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(10px) saturate(100%);
}

.service-grid .row-list .item .num-col {
    display: flex;
    align-items: center;
    gap: 6px;
}

.item .num-col .num {
    font-size: 32px;
    font-weight: bold;
    line-height: 42px;
    color: #222222;
}

.item .num-col .icon {
    height: 20px;
    width: 20px;
}

.item .num-col .icon img {
    height: 100%;
    width: 100%;
    display: block;
}

.row-list .item .label {
    font-size: 16px;
    line-height: 24px;
    color: #666666;
}



@media (min-width: 1440px) and (max-width:1919px) {
    .channel-name {
        left: clamp(80px, calc(80px + (100vw - 1440px) * 160 / 480), 240px);
    }
    .channel-tips {
        left: clamp(80px, calc(80px + (100vw - 1440px) * 160 / 480), 240px);
    }
    .content-wrap {
        padding: clamp(40px, calc(40px + (100vw - 1440px) * 40 / 480), 80px) 0;
    }
    .content-wrap {
        padding: clamp(40px, calc(40px + (100vw - 1440px) * 40 / 480), 80px) 0;
    }
    .container {
        width: clamp(1392px, calc(1392px + (100vw - 1440px) * 48 / 480), 1440px);
    }
    .nav-warp {
        gap: clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px);
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px)) / 2);
    }
    .service-row {
        gap: clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px);
    }
    .service-grid {
        padding: 80px clamp(24px, calc(24px + (100vw - 1440px) * 216 / 480), 240px);
    }
}

@media (min-width: 1280px) and (max-width:1439px) {
    .block-banner {
        height: clamp(356px, calc(356px + (100vw - 1280px) * 44 / 160), 400px);
    }
    .channel-name {
        top: clamp(137px, calc(137px + (100vw - 1280px) * 28 / 160), 165px);
        left: 80px;
    }
    .channel-tips {
        top: clamp(211px, calc(211px + (100vw - 1280px) * 32 / 160), 243px);
        left: 80px;
        width: 784px;
    }
    .content-wrap {
        padding: 40px 0;
    }
    .container {
        width: clamp(1232px, calc(1232px + (100vw - 1280px) * 160 / 160), 1392px);
    }
    .nav-warp {
        gap: 24px;
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px)) / 2);
    }
    .service-row {
        gap: 24px;
    }
    .service-advantage .service-row-item {
        width: clamp(290px, calc(290px + (100vw - 1280px) * 40 / 160), 330px);
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: clamp(211px, calc(211px + (100vw - 1280px) * 29 / 160), 240px) !important;
    }
    .service-grid {
        padding: 80px 24px;
    }
    .service-grid .row-list .item {
        width: clamp(290px, calc(290px + (100vw - 1280px) * 40 / 160), 330px);
    }
    
}

@media (min-width: 1024px) and (max-width:1279px) {
    .block-banner {
        height: clamp(285px, calc(285px + (100vw - 1024px) * 71 / 256), 356px);
    }
    .channel-name {
        top: clamp(117px, calc(117px + (100vw - 1024px) * 20 / 256), 137px);
        left: 80px;
        font-size: clamp(32px, calc(32px + (100vw - 1024px) * 16 / 256), 48px);
        line-height: clamp(42px, calc(42px + (100vw - 1024px) * 20 / 256), 62px);
    }
    .channel-tips {
        top: clamp(171px, calc(171px + (100vw - 1024px) * 40 / 256), 211px);
        left: 80px;
        font-size: clamp(14px, calc(14px + (100vw - 1024px) * 6 / 256), 20px);
        line-height: clamp(22px, calc(22px + (100vw - 1024px) * 4 / 256), 26px);
    }
    .content-wrap {
        padding: 40px 0;
    }
    .container {
        width: clamp(976px, calc(976px + (100vw - 1024px) * 256 / 256), 1232px);
    }
    .nav-warp {
        gap: 24px;
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px)) / 2);
        padding: 48px clamp(32px, calc(32px + (100vw - 1024px) * 32 / 256), 64px);
        gap: clamp(24px, calc(24px + (100vw - 1024px) * 8 / 256), 32px);
    }
    .nav-item .info {
        gap: clamp(24px, calc(24px + (100vw - 1024px) * 8 / 256), 32px);
    }
    .service-advantage {
        align-items: flex-start;
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px 24px;
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: 24px;
    }
    .service-grid .row-list .item {
        width: calc( (100% - 24px) /2 );
    }
}

@media (min-width: 960px) and (max-width:1023px) {
    .block-banner {
        height: clamp(267px, calc(267px + (100vw - 960px) * 18 / 64), 285px);
    }
    .channel-name {
        top: clamp(111px, calc(111px + (100vw - 960px) * 6 / 64), 117px);
        left: clamp(64px, calc(64px + (100vw - 960px) * 16 / 64), 80px);
        font-size: 32px;
        line-height: 42px;
    }
    .channel-tips {
        top: clamp(165px, calc(165px + (100vw - 960px) * 6 / 64), 171px);
        left: clamp(64px, calc(64px + (100vw - 960px) * 16 / 64), 80px);
        font-size: 14px;
        line-height: clamp(18px, calc(18px + (100vw - 960px) * 4 / 64), 22px);
        width: 520px;
    }
    .content-wrap {
        padding: 40px 0;
    }
    .container {
        width: clamp(912px, calc(912px + (100vw - 960px) * 64 / 64), 976px);
    }
    .nav-warp {
        gap: 24px;
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px)) / 2);
        padding: 48px 32px;
    }
    .nav-item .info {
        gap: 24px;
    }

    .service-advantage {
        align-items: flex-start;
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px 24px;
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: 24px;
    }
    .service-grid .row-list .item {
        width: calc( (100% - 24px) /2 );
    }
}

@media (min-width: 840px) and (max-width:959px) {
    .block-banner {
        height: clamp(234px, calc(234px + (100vw - 840px) * 33 / 120), 267px);
    }

    .channel-name {
        top: clamp(75px, calc(75px + (100vw - 840px) * 36 / 120), 111px);
        left: 64px;
        font-size: 32px;
        line-height: 42px;
        max-width: clamp(498px, calc(498px + (100vw - 840px) * 84 / 120), 582px);
    }

    .channel-tips {
        top: 167px;
        left: 64px;
        font-size: 14px;
        line-height: 18px;
        max-width: clamp(498px, calc(498px + (100vw - 840px) * 84 / 120), 582px);
    }
    .content-wrap {
        padding: 40px 0;
    }
    .container {
        width: clamp(792px, calc(792px + (100vw - 840px) * 120 / 120), 912px);
    }
    .nav-warp {
        gap: 24px;
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px)) / 2);
        padding: 48px 32px;
    }
    .nav-item .info {
        gap: 24px;
    }
    .nav-item .info .nav-item-row .title {
        font-size: clamp(20px, calc(20px + (100vw - 840px) * 4 / 120), 24px);
        line-height: clamp(26px, calc(26px + (100vw - 840px) * 6 / 120), 32px);
    }
    .nav-item .info .nav-item-row .btn {
        width: clamp(104px, calc(104px + (100vw - 840px) * 24 / 120), 128px);
        height: clamp(32px, calc(32px + (100vw - 840px) * 8 / 120), 40px);
        font-size: clamp(14px, calc(14px + (100vw - 840px) * 2 / 120), 16px);
    }

    .service-advantage {
        align-items: flex-start;
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px 24px;
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: 24px;
        margin-top: clamp(40px, calc(40px + (100vw - 840px) * 24 / 120), 64px);
    }
    .service-grid .row-list .item {
        width: calc( (100% - 24px) /2 );
    }
}

@media (min-width: 768px) and (max-width:839px) {
    .block-banner {
        height: 400px;
        background: url(https://cms-image.leyifan.cn/resources/image/2026/08/28/842774484017221.png) center center / cover no-repeat;
        margin-top: 96px;
    }

    .channel-name {
        top: 179px;
        left: 64px;
        font-size: 32px;
        line-height: 42px;
    }

    .channel-tips {
        top: 229px;
        left: 64px;
        font-size: 14px;
        line-height: 18px;
    }
    .content-wrap {
        padding: 40px 0;
    }
    .container {
        width: clamp(720px, calc(720px + (100vw - 768px) * 72 / 72), 792px);
    }
    .nav-warp {
        gap: 24px;
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(24px, calc(24px + (100vw - 1440px) * 16 / 480), 40px)) / 2);
        padding: 48px clamp(24px, calc(24px + (100vw - 768px) * 8 / 72), 32px);
    }
    .nav-item .info {
        gap: 24px;
    }

    .nav-item .info .nav-item-row .title {
        font-size: 20px;
        line-height: 26px;
    }
    .nav-item .info .nav-item-row .btn {
        width: 104px;
        height: 32px;
        font-size: 14px;
    }

    .service-intro-col .title {
        font-size: clamp(30px, calc(30px + (100vw - 768px) * 2 / 72), 32px);
        line-height: clamp(40px, calc(40px + (100vw - 768px) * 2 / 72), 42px);
    }


    .service-advantage {
        align-items: flex-start;
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
        font-size: clamp(30px, calc(30px + (100vw - 768px) * 2 / 72), 32px);
        line-height: clamp(40px, calc(40px + (100vw - 768px) * 2 / 72), 42px);
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px 24px;
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 40px;
    }
    .service-grid .row-list .item {
        width: calc( (100% - 24px) /2 );
    }
}

@media (min-width: 600px) and (max-width:767px) {
    .block-banner {
        height: clamp(313px, calc(313px + (100vw - 600px) * 87 / 168), 400px);
        background: url(https://cms-image.leyifan.cn/resources/image/2026/08/28/842774484017221.png) center center / cover no-repeat;
        margin-top: 96px;
    }

    .channel-name {
        top: clamp(112px, calc(112px + (100vw - 600px) * 67 / 168), 179px);
        left: clamp(24px, calc(24px + (100vw - 600px) * 40 / 168), 64px);
        font-size: clamp(30px, calc(30px + (100vw - 600px) * 2 / 168), 32px);
        line-height: clamp(40px, calc(40px + (100vw - 600px) * 2 / 168), 42px);
        width: clamp(442px, calc(442px + (100vw - 600px) * 128 / 168), 570px);
    }

    .channel-tips {
        top: clamp(200px, calc(200px + (100vw - 600px) * 29 / 168), 229px);
        left: clamp(24px, calc(24px + (100vw - 600px) * 40 / 168), 64px);
        font-size: 14px;
        line-height: 22px;
        width: clamp(442px, calc(442px + (100vw - 600px) * 128 / 168), 570px);
    }
    .content-wrap {
        padding: 40px 0;
    }
    .container {
        width: clamp(568px, calc(568px + (100vw - 600px) * 152 / 168), 720px);
        gap: clamp(64px, calc(64px + (100vw - 600px) * 16 / 168), 80px);
    }
    .nav-warp {
        gap: clamp(16px, calc(16px + (100vw - 600px) * 8 / 168), 24px);
    }
    .nav-warp .nav-item {
        width: calc((100% - clamp(16px, calc(16px + (100vw - 600px) * 8 / 168), 24px)) / 2);
        padding: 48px 24px;
    }
    .nav-item .info .icon {
        display: none;
    }

    .nav-item .info .nav-item-row .title {
        font-size: 20px;
        line-height: 26px;
    }
    .nav-item .info .nav-item-row .btn {
        width: 104px;
        height: 32px;
        font-size: 14px;
    }

    .service-intro-col .title {
        font-size: clamp(24px, calc(24px + (100vw - 600px) * 6 / 168), 30px);
        line-height: clamp(32px, calc(32px + (100vw - 600px) * 8 / 168), 40px);
    }
    .service-intro-col .tips {
        line-height: 24px;
    }

    .service-advantage {
        align-items: flex-start;
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
        font-size: clamp(24px, calc(24px + (100vw - 600px) * 6 / 168), 30px);
        line-height: clamp(32px, calc(32px + (100vw - 600px) * 8 / 168), 40px);
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px clamp(16px, calc(16px + (100vw - 600px) * 8 / 168), 24px);
        margin-top: clamp(64px, calc(64px + (100vw - 600px) * 16 / 168), 80px);
    }
    .service-grid .title {
        font-size: clamp(24px, calc(24px + (100vw - 600px) * 6 / 168), 30px);
        line-height: clamp(32px, calc(32px + (100vw - 600px) * 8 / 168), 40px);
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 40px;
    }
    .service-grid .row-list .item {
        width: calc( (100% - 24px) /2 );
    }
}

@media (min-width: 480px) and (max-width:599px) {
    .block-banner {
        height: clamp(250px, calc(250px + (100vw - 480px) * 63 / 120), 313px);
        background: url(https://cms-image.leyifan.cn/resources/image/2026/08/28/842774484017221.png) center center / cover no-repeat;
        margin-top: 96px;
    }

    .channel-name {
        top: clamp(95px, calc(95px + (100vw - 480px) * 17 / 120), 112px);
        left: 24px;
        font-size: clamp(24px, calc(24px + (100vw - 480px) * 6 / 120), 30px);
        line-height: clamp(32px, calc(32px + (100vw - 480px) * 8 / 120), 40px);
        width: clamp(345px, calc(345px + (100vw - 480px) * 97 / 120), 442px);
    }

    .channel-tips {
        top: clamp(167px, calc(167px + (100vw - 480px) * 33 / 120), 200px);
        left: 24px;
        font-size: clamp(12px, calc(12px + (100vw - 480px) * 2 / 120), 14px);
        line-height: clamp(16px, calc(16px + (100vw - 480px) * 6 / 120), 22px);
        width: clamp(345px, calc(345px + (100vw - 480px) * 97 / 120), 442px);
    }
    .content-wrap {
        padding: clamp(24px, calc(24px + (100vw - 480px) * 16 / 120), 40px) 0;
    }
    .container {
        width: clamp(448px, calc(448px + (100vw - 480px) * 120 / 120), 568px);
        gap: clamp(56px, calc(56px + (100vw - 480px) * 8 / 120), 64px);
    }
    .nav-warp {
        gap: 16px;
    }
    .nav-warp .nav-item {
        width: 100%;
        height: 118px;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
    .nav-item .info .icon {
        display: none;
    }
    .nav-item .info .nav-item-row {
        gap: 16px;
    }

    .nav-item .info .nav-item-row .title {
        font-size: clamp(16px, calc(16px + (100vw - 480px) * 4 / 120), 20px);
        line-height: clamp(22px, calc(22px + (100vw - 480px) * 4 / 120), 26px);
    }
    .nav-item .info .nav-item-row .btn {
        width: 104px;
        height: 32px;
        font-size: 14px;
    }
    .nav-item .left-back-img {
        height: 118px;
    }

    .service-intro-col .title {
        font-size: clamp(20px, calc(20px + (100vw - 480px) * 4 / 120), 24px);
        line-height: clamp(26px, calc(26px + (100vw - 480px) * 6 / 120), 32px);
    }
    .service-intro-col .tips {
        font-size: clamp(13px, calc(13px + (100vw - 480px) * 3 / 120), 16px);
        line-height: clamp(21px, calc(21px + (100vw - 480px) * 3 / 120), 24px);
    }

    .service-advantage {
        align-items: flex-start;
        gap: clamp(24px, calc(24px + (100vw - 480px) * 16 / 120), 40px);
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
        font-size: clamp(20px, calc(20px + (100vw - 480px) * 4 / 120), 24px);
        line-height: clamp(26px, calc(26px + (100vw - 480px) * 6 / 120), 32px);
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px 16px;
        margin-top: clamp(56px, calc(56px + (100vw - 480px) * 8 / 120), 64px);
    }
    .service-grid .title {
        font-size: clamp(24px, calc(24px + (100vw - 600px) * 6 / 168), 30px);
        line-height: clamp(32px, calc(32px + (100vw - 600px) * 8 / 168), 40px);
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: clamp(16px, calc(16px + (100vw - 480px) * 8 / 120), 24px);
        margin-top: 40px;
    }
    .service-grid .row-list .item {
        width: calc( (100% - clamp(16px, calc(16px + (100vw - 480px) * 8 / 120), 24px)) /2 );
    }
}

@media (max-width:479px) {
    .block-banner {
        height: clamp(188px, calc(188px + (100vw - 360px) * 62 / 120), 250px);
        background: url(https://cms-image.leyifan.cn/resources/image/2026/08/28/842774484017221.png) center center / cover no-repeat;
        margin-top: 96px;
    }

    .channel-name {
        top: clamp(64px, calc(64px + (100vw - 360px) * 31 / 120), 95px);
        left: clamp(16px, calc(16px + (100vw - 360px) * 8 / 120), 24px);
        font-size: clamp(20px, calc(20px + (100vw - 360px) * 4 / 120), 24px);
        line-height: clamp(26px, calc(26px + (100vw - 360px) * 6 / 120), 32px);
        width: clamp(263px, calc(263px + (100vw - 360px) * 82 / 120), 345px);
    }

    .channel-tips {
        top: clamp(120px, calc(120px + (100vw - 360px) * 47 / 120), 167px);
        left: clamp(16px, calc(16px + (100vw - 360px) * 8 / 120), 24px);
        font-size: 12px;
        line-height: 16px;
        width: clamp(263px, calc(263px + (100vw - 360px) * 82 / 120), 345px);
    }
    .content-wrap {
        padding: 24px 0;
    }
    .container {
        width: clamp(340px, calc(340px + (100vw - 360px) * 108 / 120), 448px);
        gap: 56px;
    }
    .nav-warp {
        gap: 16px;
    }
    .nav-warp .nav-item {
        width: 100%;
        padding: 0;
        height: 118px;
        align-items: center;
        justify-content: center;
    }
    .nav-item .info .icon {
        display: none;
    }

    .nav-item .info .nav-item-row {
        gap: 16px;
    }

    .nav-item .info .nav-item-row .title {
        font-size: 16px;
        line-height: 22px;
    }
    .nav-item .info .nav-item-row .btn {
        width: 104px;
        height: 32px;
        font-size: 14px;
    }
    .nav-item .left-back-img {
        height: 118px;
    }

    .service-intro-col .title {
        font-size: 20px;
        line-height: 26px;
        text-align: center;
    }
    .service-intro-col .tips {
        line-height: 24px;
    }

    .service-advantage {
        align-items: flex-start;
        gap: clamp(24px, calc(24px + (100vw - 480px) * 16 / 120), 40px);
    }
    .service-advantage .title {
        width: 100%;
        text-align: center;
        font-size: clamp(20px, calc(20px + (100vw - 480px) * 4 / 120), 24px);
        line-height: clamp(26px, calc(26px + (100vw - 480px) * 6 / 120), 32px);
    }
    .service-row {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .service-row::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge WebKit */
    }
    .service-advantage .service-row-item {
        flex-shrink: 0;
        width: 290px;
    }
    .service-advantage .service-row-item .cover, .service-advantage .service-row-item img {
        height: 211px !important;
    }
    .service-row-item .intro .title {
        text-align: left;
    }
    .service-grid {
        padding: 80px 16px;
        margin-top: clamp(56px, calc(56px + (100vw - 480px) * 8 / 120), 64px);
    }
    .service-grid .title {
        font-size: clamp(24px, calc(24px + (100vw - 600px) * 6 / 168), 30px);
        line-height: clamp(32px, calc(32px + (100vw - 600px) * 8 / 168), 40px);
    }
    .service-grid .tips {
        width: 100%;
    }
    .service-grid .row-list {
        flex-wrap: wrap;
        gap: clamp(16px, calc(16px + (100vw - 480px) * 8 / 120), 24px);
        margin-top: 40px;
    }
    .service-grid .row-list .item {
        width: 100%;
    }
}