* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}


/* 全屏滚动时隐藏滚动条 */
::-webkit-scrollbar {
    width: 0 !important
}

/* 全屏滚动时隐藏滚动条 */

@font-face {
    font-family: 'Hungke';
    src: url('/static/font/hungke.ttf') format('truetype');
    /* 可以是其他格式，如 'opentype' 或 'embedded-opentype' */
}

@font-face {
    font-family: 'Nanan';
    src: url('/static/font/nanan.ttf') format('truetype');
    /* 可以是其他格式，如 'opentype' 或 'embedded-opentype' */
}

@font-face {
    font-family: 'Sim';
    src: url('/static/font/sim.ttf') format('truetype');
    /* 可以是其他格式，如 'opentype' 或 'embedded-opentype' */
}

@font-face {
    font-family: 'Beauty';
    src: url('/static/font/beauty.ttf') format('truetype');
    /* 可以是其他格式，如 'opentype' 或 'embedded-opentype' */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-top: 0;
}

p {
    font-family: 'Sim', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
}






/* 引导页 */
@media screen and (min-width: 1201px) {
    .loading {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .loading-video video {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .loading-video img {
        display: none;
    }

    .loading-text {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .loading-text {
        display: flex;
        gap: 50px;
    }

    .loading-text-slogan h4 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: -3px;
        font-size: 1.4rem;
    }

    .loading-text-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .loading-text-logo img {
        width: 100px;
        margin-bottom: 30px;
    }

    .loading-text-logo h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 60px;
        color: #fff;
    }

    .loading-bar {
        position: absolute;
        z-index: 2;
        left: 50%;
        bottom: 80px;
        transform: translateX(-50%);
    }

    .loading-bar i {
        font-size: 50px;
        color: #fff;
        opacity: 0.3;
    }

    .loading-bar a:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    @keyframes zoomInOut {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.1);
        }
    }

    @keyframes scaleAndBlur {
        0% {
            transform: scale(1);
            filter: blur(0px);
        }

        100% {
            transform: scale(1.1);
            filter: blur(10px);
        }
    }
}

@media screen and (max-width:1200px) {
    .loading {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .loading-video {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .loading-video video {
        display: none;
    }

    .loading-video img {
        width: auto; /* 宽度自动，保持比例 */
        height: 100%; /* 高度占满父容器 */
        object-fit: cover; /* 保持图片比例，并裁剪超出的部分 */
    }

    .loading-text {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .loading-text {
        display: flex;
        gap: 30px;
    }

    .loading-text-slogan h4 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 5px;
        font-size: 1.1rem;
    }

    .loading-text-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .loading-text-logo img {
        width: 60px;
        margin-bottom: 30px;
    }

    .loading-text-logo h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 60px;
        color: #fff;
    }

    .loading-bar {
        position: absolute;
        z-index: 2;
        left: 50%;
        bottom: 80px;
        transform: translateX(-50%);
    }

    .loading-bar i {
        font-size: 50px;
        color: #fff;
        opacity: 0.3;
    }

    .loading-bar a:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    @keyframes zoomInOut {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.1);
        }
    }

    @keyframes scaleAndBlur {
        0% {
            transform: scale(1);
            filter: blur(0px);
        }

        100% {
            transform: scale(1.1);
            filter: blur(10px);
        }
    }
}
/* 引导页 */





@media screen and (min-width: 1921px) {
    .page-scroll {
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    .page-section {
        width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        position: relative;
    }

    /* 导航栏 */
    .topnav {
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 60px;
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
    }

    .search i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .search a:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    .top-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }

    .top-logo img {
        width: 270px;
    }

    .top-logo h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 3rem;
        color: #fff;
    }

    .top-menu i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .top-menu i:hover {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-scroll {
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    .page-section {
        width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        position: relative;
    }

    /* 导航栏 */
    .topnav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 60px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
    }

    .search i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .search a:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    .top-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }

    .top-logo img {
        width: 180px;
    }

    .top-logo h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 3rem;
        color: #fff;
    }

    .top-menu i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .top-menu i:hover {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .page-scroll {
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    .page-section {
        width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        position: relative;
    }

    /* 导航栏 */
    .topnav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 80px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        background: linear-gradient(to bottom, #000000, #00000064);
    }

    .search {
        display: none;
    }

    .search i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .search a:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    .top-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .top-logo img {
        width: 150px;
    }

    .top-logo h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 3rem;
        color: #fff;
    }

    .top-menu i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .top-menu i:hover {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

/* 导航栏 */



/* 网站首页 第一屏 */
@media screen and (min-width: 1921px) {
    .slide-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .slide-content-bg {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }

    .slide-content-bg img {
        width: 100%;
    }

    .slide-content-text-item {
        margin-top: 350px;
        display: flex;
    }

    .slide-content-text-item-des {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .slide-content-text-item-des h5 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        line-height: 4rem;
    }

    .slide-content-text-item-title {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .slide-content-text-item-title h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        line-height: 6rem;
    }

    .switch-button {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px;
        display: flex;
        justify-content: space-between;
    }

    .switch-button button {
        border: none;
        background: none;
    }

    .switch-button i {
        color: #fff;
        font-size: 3rem;
        opacity: 0.6;
    }

    .switch-button:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .slide-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .slide-content-bg {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }

    .slide-content-bg img {
        width: 100%;
    }

    .slide-content-text-item {
        margin-top: 250px;
        display: flex;
    }

    .slide-content-text-item-des {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .slide-content-text-item-des h5 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        line-height: 4rem;
        letter-spacing: 0;
    }

    .slide-content-text-item-title {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .slide-content-text-item-title h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        line-height: 6rem;
    }

    .switch-button {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
    }

    .switch-button button {
        border: none;
        background: none;
    }

    .switch-button i {
        color: #fff;
        font-size: 3rem;
        opacity: 0.6;
    }

    .switch-button:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .slide-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .slide-content-bg {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slide-content-bg img {
        height: 100%;
        object-fit: cover;
    }

    .slide-content-text-item {
        margin-top: 250px;
    }

    .slide-content-text-item-des {
        letter-spacing: 8px;
    }

    .slide-content-text-item-des h5 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 1.6rem;
        line-height: 2.5rem;
        letter-spacing: 0;
    }

    .slide-content-text-item-title {
        letter-spacing: 8px;
    }

    .slide-content-text-item-title h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        line-height: 6rem;
    }

    .switch-button {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
    }

    .switch-button button {
        border: none;
        background: none;
    }

    .switch-button i {
        color: #fff;
        font-size: 3rem;
        opacity: 0.6;
    }

    .switch-button:hover i {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

/* 网站首页 第一屏 */




/* 网站首页 第二屏 */
@media screen and (min-width: 1921px) {
    .page-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .page-content-bg {
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
    }

    .page-content-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .page-content-keyform {
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        animation: zoomInOut 35s infinite;
    }

    .page-content-text-item {
        margin-top: 350px;
        display: flex;
        justify-content: end;
    }

    .page-content-text-item-des {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .page-content-text-item-des h5 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        line-height: 4rem;
    }

    .page-content-text-item-title {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .page-content-text-item-title h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        line-height: 6rem;
    }

    .page-content-text-item-btn {
        margin-top: 50px;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .page-content-bg {
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
    }

    .page-content-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .page-content-keyform {
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        animation: zoomInOut 35s infinite;
    }

    .page-content-text-item {
        margin-top: 250px;
        display: flex;
        justify-content: end;
    }

    .page-content-text-item-des {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .page-content-text-item-des h5 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        line-height: 4rem;
        letter-spacing: 0;
    }

    .page-content-text-item-title {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .page-content-text-item-title h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        line-height: 6rem;
    }

    .page-content-text-item-btn {
        margin-top: 50px;
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 1200px) {
    .page-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .page-content-bg {
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
    }

    .page-content-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .page-content-keyform {
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        animation: zoomInOut 35s infinite;
    }

    .page-content-text-item {
        margin-top: 250px;
        display: flex;
        justify-content: end;
    }

    .page-content-text-item-des {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .page-content-text-item-des h5 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        line-height: 4rem;
        letter-spacing: 0;
    }

    .page-content-text-item-title {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .page-content-text-item-title h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        line-height: 6rem;
    }

    .page-content-text-item-btn {
        margin-top: 50px;
        display: flex;
        justify-content: center;
    }
}

/* 网站首页 第二屏 */




/* 网站首页 第三屏 */
@media screen and (min-width: 1921px) {
    .background-feature {
        display: flex;
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .background-feature-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #00000081, #00000000);
    }

    .featurebox {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: end;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        /* background: linear-gradient(to top, #000, #00000085); */
    }

    .title-image {
        width: 100%;
        /* 根据需要调整宽度 */
        height: 100px;
        /* 根据需要调整高度 */
        margin-bottom: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.3;
        /* 默认透明度 */
        transition: opacity 0.3s;
        /* 添加过渡效果 */
    }

    .featurebox:hover .title-image,
    .featurebox.active .title-image {
        opacity: 1;
        /* 悬停或激活时透明度为100% */
    }


    .background-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        background-size: cover;
        background-position: center;
        animation: zoomInOut 5s infinite;
        transition: background-image 0.5s;
        /* 添加背景图切换过渡效果 */
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    .background-feature {
        display: flex;
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .background-feature-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #00000081, #00000000);
    }

    .featurebox {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: end;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        /* background: linear-gradient(to top, #000, #00000085); */
    }

    .title-image {
        width: 100%;
        /* 根据需要调整宽度 */
        height: 100px;
        /* 根据需要调整高度 */
        margin-bottom: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.3;
        /* 默认透明度 */
        transition: opacity 0.3s;
        /* 添加过渡效果 */
    }

    .featurebox:hover .title-image,
    .featurebox.active .title-image {
        opacity: 1;
        /* 悬停或激活时透明度为100% */
    }


    .background-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        background-size: cover;
        background-position: center;
        animation: zoomInOut 5s infinite;
        transition: background-image 0.5s;
        /* 添加背景图切换过渡效果 */
    }
}

@media screen and (max-width: 1200px) {
    .background-feature {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        padding: 50px 0;
    }

    .background-feature-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #00000081, #00000000);
    }

    .featurebox {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: end;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        /* background: linear-gradient(to top, #000, #00000085); */
    }

    .title-image {
        width: 100%;
        /* 根据需要调整宽度 */
        height: 100px;
        /* 根据需要调整高度 */
        margin-bottom: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.3;
        /* 默认透明度 */
        transition: opacity 0.3s;
        /* 添加过渡效果 */
    }

    .featurebox:hover .title-image,
    .featurebox.active .title-image {
        opacity: 1;
        /* 悬停或激活时透明度为100% */
    }


    .background-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        background-size: cover;
        background-position: center;
        animation: zoomInOut 5s infinite;
        transition: background-image 0.5s;
        /* 添加背景图切换过渡效果 */
    }
}

/* 网站首页 第三屏 */




/* 网站首页 第四屏 */
@media screen and (min-width: 1921px) {
    .page-content-process {
        padding: 300px 120px;
        display: flex;
        justify-content: space-between;
    }

    .page-content-process-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-content-process-item-title img {
        width: 80%;
    }

    .page-content-process-item-description img {
        width: 60%;
    }

    .page-content-process-item:hover .page-content-process-item-title {
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }

    .page-content-process-item:hover .page-content-process-item-description {
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content-process {
        padding: 120px;
        display: flex;
        justify-content: space-between;
    }

    .page-content-process-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-content-process-item-title img {
        width: 80%;
    }

    .page-content-process-item-description img {
        width: 60%;
    }

    .page-content-process-item:hover .page-content-process-item-title {
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }

    .page-content-process-item:hover .page-content-process-item-description {
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .page-content-process {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .page-content-process-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-content-process-item-title img {
        width: 80%;
    }

    .page-content-process-item-description img {
        width: 60%;
    }

    .page-content-process-item:hover .page-content-process-item-title {
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }

    .page-content-process-item:hover .page-content-process-item-description {
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }
}

/* 网站首页 第四屏 */






/* 网站首页 第五屏 */
@media screen and (min-width: 1921px) {
    .background-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
    }

    #background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-wrapper {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 50%;
        z-index: 1;
        background-color: #000000a2;
        padding: 30px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .title-container {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        gap: 50px;
    }

    .title-item {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0 10px;
        border-radius: 5px;
        transition: opacity 0.3s;
        opacity: 0.3;
        color: #fff;
        font-size: 2rem;
        font-family: 'Hungke', sans-serif;
    }

    .title-item.active,
    .title-item:hover {
        opacity: 1;
        font-weight: bold;
    }

    .description-container {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #description-text {
        padding: 10px;
        color: #fff;
        border-radius: 5px;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .background-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
    }

    #background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-wrapper {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 70%;
        z-index: 1;
        background-color: #000000a2;
        padding: 30px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .title-container {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        gap: 50px;
    }

    .title-item {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0 10px;
        border-radius: 5px;
        transition: opacity 0.3s;
        opacity: 0.3;
        color: #fff;
        font-size: 2rem;
        font-family: 'Hungke', sans-serif;
    }

    .title-item.active,
    .title-item:hover {
        opacity: 1;
        font-weight: bold;
    }

    .description-container {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #description-text {
        padding: 10px;
        color: #fff;
        border-radius: 5px;
    }
}

@media screen and (max-width: 1200px) {
    .background-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
    }

    #background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-wrapper {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 90%;
        z-index: 1;
        background-color: #000000a2;
        padding: 20px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .title-container {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .title-item {
        cursor: pointer;
        margin: 0 10px;
        border-radius: 5px;
        transition: opacity 0.3s;
        opacity: 0.3;
        color: #fff;
        font-size: 2rem;
        font-family: 'Hungke', sans-serif;
    }

    .title-item.active,
    .title-item:hover {
        opacity: 1;
        font-weight: bold;
    }

    .description-container {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #description-text {
        color: #fff;
        border-radius: 5px;
        display: -webkit-box;
        /* 必须结合的弹性盒子模型 */
        -webkit-box-orient: vertical;
        /* 设置子元素的排列方式 */
        -webkit-line-clamp: 6;
        /* 限制显示行数（此处为3行） */
        overflow: hidden;
        /* 隐藏超出内容 */
        text-overflow: ellipsis;
    }
}

/* 网站首页 第五屏 */




/* 网站首页 第六屏 */
@media screen and (min-width: 1921px) {
    .page-content-history {
        max-width: 1640px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .page-content-history-text {
        margin-top: 250px;
        width: 50%;
    }

    .page-content-history-text h5 {
        color: #ffffffc5;
        font-family: 'Nanan', sans-serif;
        margin-left: 10px;
    }

    .page-content-history-text h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        line-height: 6rem;
    }

    .page-content-history-text p {
        color: #ffffffc5;
        font-family: 'Sim', sans-serif;
        line-height: 2rem;
        margin-bottom: 50px;
        font-size: 1.3rem;
    }

    .page-content-history-text-job ul li {
        list-style: none;
        color: #fff;
        font-family: 'Sim', sans-serif;
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 3px;
        margin-bottom: 5px;
    }

    .page-content-history-text-job h6 {
        margin-bottom: 0;
        margin-top: 3px;
    }

    .page-content-history-text-job span {
        font-size: 1.2rem;
    }

    .page-content-history-text-job p {
        color: #fff;
        font-size: 2rem;
    }

    .page-content-history-text-btn {
        display: none;
    }

    .page-content-history-person {
        width: 40%;
        position: relative;
    }

    .page-content-history-img {
        height: 100vh;
        margin-top: 200px;
        width: 100%;
    }

    .page-content-history-img img {
        width: 100%;
    }

    .page-content-history-post {
        margin-top: 300px;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #fff;
        position: absolute;
        top: 0;
        right: 40px;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content-history {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .page-content-history-text {
        margin-top: 200px;
        width: 55%;
    }

    .page-content-history-text h5 {
        color: #ffffffc5;
        font-family: 'Nanan', sans-serif;
        margin-left: 10px;
    }

    .page-content-history-text h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 3rem;
        line-height: 4rem;
    }

    .page-content-history-text p {
        color: #ffffffc5;
        font-family: 'Sim', sans-serif;
        margin-bottom: 20px;
    }

    .page-content-history-text-job ul li {
        list-style: none;
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 3px;
    }

    .page-content-history-text-job h6 {
        margin-bottom: 0;
        margin-top: 3px;
    }

    .page-content-history-text-job span {
        font-size: 1.1rem;
    }

    .page-content-history-text-job p {
        color: #fff;
        font-size: 1.2rem;
    }

    .page-content-history-text-btn {
        display: none;
    }

    .page-content-history-img {
        height: 100vh;
        padding-top: 150px;
        width: 100%;
    }

    .page-content-history-img img {
        width: 100%;
    }

    .page-content-history-person {
        width: 40%;
        position: relative;
    }

    .page-content-history-post {
        margin-top: 180px;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 1px;
        font-family: 'Nanan', sans-serif;
        color: #fff;
    }

    .page-content-history-post {
        margin-top: 200px;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #fff;
        position: absolute;
        top: 0;
        right: 40px;
    }
}

@media screen and (max-width: 1200px) {
    .page-content-history {
        padding: 20px;
        padding: 20px;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .page-content-history-text {
        margin-top: 30px;
    }

    .page-content-history-text h5 {
        color: #ffffffc5;
        font-family: 'Nanan', sans-serif;
        margin-left: 10px;
    }

    .page-content-history-text h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        line-height: 3rem;
    }

    .page-content-history-text p {
        color: #ffffffc5;
        font-family: 'Sim', sans-serif;
        margin-bottom: 20px;
        display: -webkit-box;
        /* 必须结合的弹性盒子模型 */
        -webkit-box-orient: vertical;
        /* 设置子元素的排列方式 */
        -webkit-line-clamp: 3;
        /* 限制显示行数（此处为3行） */
        overflow: hidden;
        /* 隐藏超出内容 */
        text-overflow: ellipsis;
    }

    .page-content-history-text-job {
        display: none;
    }

    .page-content-history-text-btn {
        width: 40%;
    }

    .page-content-history-img {
        padding-top: 100px;
        width: 100%;
        height: 60vh;
        overflow: hidden;
    }

    .page-content-history-img img {
        width: 100%;
    }

    .page-content-history-post {
        margin-top: 180px;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 1px;
        font-family: 'Nanan', sans-serif;
        color: #fff;
    }

    .page-content-history-post {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #fff;
        position: absolute;
        top: 0;
        right: 40px;
    }
}

/* 网站首页 第六屏 */





/* 网站首页 第七屏 */
@media screen and (min-width: 1921px) {
    .page-content-brand {
        display: flex;
    }

    .page-content-brand-null {
        width: 75%;
    }

    .page-content-brand-text {
        width: 25%;
        background-image: url(/static/picture/slider2.jpg);
        height: 100vh;
        padding: 300px 80px 80px 80px;
    }

    .page-content-brand-text h5 {
        color: #ffffffc5;
        font-family: 'Nanan', sans-serif;
    }

    .page-content-brand-text h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        line-height: 6rem;
    }

    .page-content-brand-text-des {
        margin: 30px 0 50px 0;
    }

    .page-content-brand-text-des p {
        color: #ffffffc5;
        font-family: 'Sim', sans-serif;
        line-height: 2rem;
        text-indent: 2em;
    }

    .page-content-brand-text-btn img {
        width: 160px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-brand-text-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content-brand {
        display: flex;
    }

    .page-content-brand-null {
        width: 75%;
    }

    .page-content-brand-text {
        width: 25%;
        background-image: url(/static/picture/slider2.jpg);
        height: 100vh;
        padding: 120px 80px 80px 80px;
    }

    .page-content-brand-text h5 {
        color: #ffffffc5;
        font-family: 'Nanan', sans-serif;
    }

    .page-content-brand-text h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        line-height: 6rem;
    }

    .page-content-brand-text-des {
        margin: 30px 0 50px 0;
    }

    .page-content-brand-text-des p {
        color: #ffffffc5;
        font-family: 'Sim', sans-serif;
        text-indent: 2em;
    }

    .page-content-brand-text-btn img {
        width: 160px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-brand-text-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .page-content-brand {
        display: flex;
    }

    .page-content-brand-null {
        width: 75%;
    }

    .page-content-brand-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-image: url(/static/picture/slider2.jpg);
        height: 50%;
        padding: 20px;
    }

    .page-content-brand-text h5 {
        color: #ffffffc5;
        font-family: 'Nanan', sans-serif;
    }

    .page-content-brand-text h1 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        line-height: 3rem;
    }

    .page-content-brand-text-des {
        display: -webkit-box;
        /* 必须结合的弹性盒子模型 */
        -webkit-box-orient: vertical;
        /* 设置子元素的排列方式 */
        -webkit-line-clamp: 5;
        /* 限制显示行数（此处为3行） */
        overflow: hidden;
        /* 隐藏超出内容 */
        text-overflow: ellipsis;
    }

    .page-content-brand-text-des p {
        color: #ffffffc5;
        font-family: 'Sim', sans-serif;
        text-indent: 2em;
    }

    .page-content-brand-text-btn {
        margin-top: 20px;
    }

    .page-content-brand-text-btn img {
        width: 100px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-brand-text-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

/* 网站首页 第七屏 */





/* 网站首页 第八屏 */
@media screen and (min-width: 1921px) {
    .page-content-video {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        margin-top: 350px;
    }

    .page-content-video-left {
        width: 60%;
    }

    .page-content-video-left video {
        width: 100%;
    }

    .page-content-video-left-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .page-content-video-left-item-box {
        position: relative;
        width: 49%;
    }

    .page-content-video-left-item-img {
        width: 100%;
        height: 160px;
        overflow: hidden;
        display: flex;
    }

    .page-content-video-left-item-img img {
        width: 100%;
    }

    .page-content-video-left-item-box:hover .page-content-video-left-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-content-video-left-item-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .page-content-video-left-item-text a {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
    }

    .page-content-video-left-item-text a:hover {
        color: #650102;
        transition: all 0.3s ease-in-out;
    }

    .page-content-hot-article-box {
        padding: 20px 0 0 100px;
        width: 40%;
    }

    .page-content-hot-article-box a {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ffffff29;
        margin-bottom: 20px;
    }

    .page-content-hot-article-box-title {
        width: 80%;
    }

    .page-content-hot-article-box-title h4 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .page-content-hot-article-box a:hover .page-content-hot-article-box-title h4 {
        color: #650102;
        transition: all 0.3s ease-in-out;
    }

    .page-content-hot-article-box-date {
        display: flex;
        justify-content: end;
        width: 20%;
        font-family: 'Sim', sans-serif;
        color: #9a9a9a;
    }

}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content-video {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        margin-top: 150px;
    }

    .page-content-video-left {
        width: 60%;
    }

    .page-content-video-left video {
        width: 100%;
    }

    .page-content-video-left-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .page-content-video-left-item-box {
        position: relative;
        width: 49%;
    }

    .page-content-video-left-item-img {
        width: 100%;
        height: 160px;
        overflow: hidden;
        display: flex;
    }

    .page-content-video-left-item-img img {
        width: 100%;
    }

    .page-content-video-left-item-box:hover .page-content-video-left-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-content-video-left-item-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .page-content-video-left-item-text a {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
    }

    .page-content-video-left-item-text a:hover {
        color: #650102;
        transition: all 0.3s ease-in-out;
    }

    .page-content-hot-article-box {
        padding: 20px 0 0 100px;
        width: 40%;
    }

    .page-content-hot-article-box a {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ffffff29;
        margin-bottom: 20px;
    }

    .page-content-hot-article-box-title {
        width: 80%;
    }

    .page-content-hot-article-box-title h4 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .page-content-hot-article-box a:hover .page-content-hot-article-box-title h4 {
        color: #650102;
        transition: all 0.3s ease-in-out;
    }

    .page-content-hot-article-box-date {
        display: flex;
        justify-content: end;
        width: 20%;
        font-family: 'Sim', sans-serif;
        color: #9a9a9a;
    }
}

@media screen and (max-width: 1200px) {
    .page-content-video {
        margin-top: 100px;
        padding: 20px;
    }

    .page-content-video-left-item {
        display: none;
    }

    .page-content-video-left-item-img {
        width: 100%;
        overflow: hidden;
        display: flex;
    }

    .page-content-video-left-item-img img {
        width: 100%;
    }

    .page-content-video-left-item-box:hover .page-content-video-left-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-content-video-left-item-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .page-content-video-left-item-text a {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;

    }

    .page-content-video-left-item-text a:hover {
        color: #650102;
        transition: all 0.3s ease-in-out;
    }

    .page-content-hot-article-box {
        padding: 20px;
    }

    .page-content-hot-article-box a {
        display: flex;
        border-bottom: 1px solid #ffffff29;
        margin-bottom: 20px;
    }

    .page-content-hot-article-box-title {
        width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-content-hot-article-box-title h4 {
        color: #fff;
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .page-content-hot-article-box a:hover .page-content-hot-article-box-title h4 {
        color: #650102;
        transition: all 0.3s ease-in-out;
    }

    .page-content-hot-article-box-date {
        display: flex;
        justify-content: end;
        width: 30%;
        font-family: 'Sim', sans-serif;
        color: #9a9a9a;
    }

}

/* 网站首页 第八屏 */







/* 网站首页 第九屏 */
@media screen and (min-width: 1921px) {
    .backgroud-product {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        z-index: -3;
        overflow: hidden;
    }

    .page-content-category {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .cateproduct-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        width: 80%;
        /* 根据需要调整宽度 */
        padding: 20px;
        /* 根据需要调整内边距 */
        box-sizing: border-box;
        gap: 20px;
        z-index: 3;
    }

    .cateproduct {
        position: relative;
        flex: 1;
        max-width: 20%;
        /* 根据需要调整每个分类的最大宽度 */
        cursor: pointer;
        text-align: center;
        height: 180px;
        overflow: hidden;
    }

    .category-thumbnail {
        width: 100%;
        padding-top: 75%;
        /* 保持宽高比，例如16:9则为56.25% */
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
        /* 确保缩略图在渐变层之上 */
    }

    .gradient-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        z-index: 2;
        /* 确保渐变层在缩略图之上，但在标题之下（如果不隐藏标题的话） */
        transition: opacity 0.3s;
        /* 添加过渡效果 */
    }

    .category-title {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        box-sizing: border-box;
        z-index: 3;
        transition: opacity 0.3s, visibility 0.3s;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        height: 180px;
    }

    .cateproduct.active .gradient-overlay {
        opacity: 0;
        /* 隐藏渐变层 */
    }

    .cateproduct.active .category-title {
        opacity: 0;
        visibility: hidden;
        /* 隐藏标题 */
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .backgroud-product {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        z-index: -3;
        overflow: hidden;
    }

    .page-content-category {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .cateproduct-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        width: 80%;
        /* 根据需要调整宽度 */
        padding: 20px;
        /* 根据需要调整内边距 */
        box-sizing: border-box;
        gap: 20px;
        z-index: 3;
    }

    .cateproduct {
        position: relative;
        flex: 1;
        max-width: 20%;
        /* 根据需要调整每个分类的最大宽度 */
        cursor: pointer;
        text-align: center;
        height: 180px;
        overflow: hidden;
    }

    .category-thumbnail {
        width: 100%;
        padding-top: 75%;
        /* 保持宽高比，例如16:9则为56.25% */
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
        /* 确保缩略图在渐变层之上 */
    }

    .gradient-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        z-index: 2;
        /* 确保渐变层在缩略图之上，但在标题之下（如果不隐藏标题的话） */
        transition: opacity 0.3s;
        /* 添加过渡效果 */
    }

    .category-title {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        box-sizing: border-box;
        z-index: 3;
        transition: opacity 0.3s, visibility 0.3s;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        height: 180px;
    }

    .cateproduct.active .gradient-overlay {
        opacity: 0;
        /* 隐藏渐变层 */
    }

    .cateproduct.active .category-title {
        opacity: 0;
        visibility: hidden;
        /* 隐藏标题 */
    }
}

@media screen and (max-width: 1200px) {
    .backgroud-product {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        z-index: -3;
        overflow: hidden;
    }

    .page-content-category {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .cateproduct-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* 根据需要调整宽度 */
        padding: 20px;
        /* 根据需要调整内边距 */
        box-sizing: border-box;
        z-index: 3;
    }

    .cateproduct {
        position: relative;
        flex: 1;
        max-width: 20%;
        /* 根据需要调整每个分类的最大宽度 */
        cursor: pointer;
        text-align: center;
        height: 180px;
        overflow: hidden;
    }

    .category-thumbnail {
        width: 100%;
        padding-top: 75%;
        /* 保持宽高比，例如16:9则为56.25% */
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
        /* 确保缩略图在渐变层之上 */
    }

    .gradient-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        z-index: 2;
        /* 确保渐变层在缩略图之上，但在标题之下（如果不隐藏标题的话） */
        transition: opacity 0.3s;
        /* 添加过渡效果 */
    }

    .category-title {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        box-sizing: border-box;
        z-index: 3;
        transition: opacity 0.3s, visibility 0.3s;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        height: 180px;
    }

    .cateproduct.active .gradient-overlay {
        opacity: 0;
        /* 隐藏渐变层 */
    }

    .cateproduct.active .category-title {
        opacity: 0;
        visibility: hidden;
        /* 隐藏标题 */
    }
}

/* 网站首页 第九屏 */








/* 网站首页 第十屏 */
@media screen and (min-width: 1921px) {
    .page-content-furniture-box {
        margin-top: 350PX;
    }

    .page-content-furniture-box-btn {
        margin-top: 150px;
    }

    .page-content-furniture-box-btn img {
        width: 50px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-furniture-box-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .page-content-furniture-box-text {
        width: 100%;
        display: flex;
        justify-content: end;
        gap: 30px;
        margin-top: 100px;
    }

    .page-content-furniture-box-text-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-content-furniture-box-text-title h3 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        color: #ffca4b;
        font-family: 'Sim';
    }

    .page-content-furniture-box-text-title img {
        width: 30px;
    }

    .page-content-furniture-box-text-case {
        position: relative;
    }

    .page-content-furniture-box-text-case-img {
        width: 80px;
    }

    .page-content-furniture-box-text-case-img img {
        position: absolute;
        left: 0;
        top: -50px;
        z-index: -1;
        width: 100%;
    }

    .page-content-furniture-box-text-case-name h2 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        color: #fff;
        font-family: 'Hungke';
        margin-left: 20px;
        transform: translateY(-20px);
    }

    .furniture-switch {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .furniture-switch img {
        width: 15px;
        opacity: 0.2;
    }

    .furniture-switch:hover img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content-furniture-box {
        margin-top: 200PX;
    }

    .page-content-furniture-box-btn {
        margin-top: 150px;
    }

    .page-content-furniture-box-btn img {
        width: 50px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-furniture-box-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .page-content-furniture-box-text {
        width: 100%;
        display: flex;
        justify-content: end;
        gap: 30px;
        margin-top: 100px;
    }

    .page-content-furniture-box-text-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-content-furniture-box-text-title h3 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        color: #ffca4b;
        font-family: 'Sim';
    }

    .page-content-furniture-box-text-title img {
        width: 30px;
    }

    .page-content-furniture-box-text-case {
        position: relative;
    }

    .page-content-furniture-box-text-case-img {
        width: 70px;
    }

    .page-content-furniture-box-text-case-img img {
        position: absolute;
        left: 0;
        top: -30px;
        z-index: -1;
        width: 100%;
    }

    .page-content-furniture-box-text-case-name h2 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 0;
        color: #fff;
        font-family: 'Hungke';
        margin-left: 15px;
        transform: translateY(-20px);
    }

    .furniture-switch {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: absolute;
        padding: 200px;
        bottom: -100px;
        left: 0;
        z-index: 6;
    }

    .furniture-switch .switch-btn img {
        width: 20px;
        opacity: 0.2;
    }

    .furniture-switch:hover img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .page-content-furniture-box {
        margin-top: 100px;
    }

    .page-content-furniture-box-btn {
        margin-top: 30px;
    }

    .page-content-furniture-box-btn img {
        width: 50px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-furniture-box-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .page-content-furniture-box-text {
        width: 100%;
        display: flex;
        justify-content: end;
        gap: 30px;
        position: absolute;
        right: 20px;
        top: -530px;
    }

    .page-content-furniture-box-text-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateY(-40px);
    }

    .page-content-furniture-box-text-title h3 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 3px;
        font-size: 1.2rem;
        color: #ffca4b;
        font-family: 'Sim';
    }

    .page-content-furniture-box-text-title img {
        width: 30px;
    }

    .page-content-furniture-box-text-case {
        position: relative;
    }

    .page-content-furniture-box-text-case-img {
        width: 40px;
    }

    .page-content-furniture-box-text-case-img img {
        position: absolute;
        left: 0;
        top: -50px;
        z-index: -1;
        width: 100%;
    }

    .page-content-furniture-box-text-case-name h2 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        color: #fff;
        font-family: 'Hungke';
        margin-left: 20px;
        transform: translateY(-20px);
    }

    .furniture-switch {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .furniture-switch img {
        width: 15px;
        opacity: 0.2;
    }

    .furniture-switch:hover img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

/* 网站首页 第十屏 */




/* 网站首页 第十一屏 */
@media screen and (min-width: 1921px) {
    .page-content-auction {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-content-auction-title {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .page-content-auction-title h1 {
        color: #fff;
        font-family: 'Beauty', sans-serif;
        font-size: 12rem;
        line-height: 13rem;
        font-weight: 100;
    }

    .page-content-auction-btn {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .page-content-auction-btn img {
        width: 160px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-auction-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-content-auction {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-content-auction-title {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .page-content-auction-title h1 {
        color: #fff;
        font-family: 'Beauty', sans-serif;
        font-size: 6rem;
        line-height: 7rem;
        font-weight: 100;
    }

    .page-content-auction-btn {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .page-content-auction-btn img {
        width: 160px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-auction-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .page-content-auction {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-content-auction-title {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .page-content-auction-title h1 {
        color: #fff;
        font-family: 'Beauty', sans-serif;
        font-size: 4rem;
        line-height: 5rem;
        font-weight: 100;
    }

    .page-content-auction-btn {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .page-content-auction-btn img {
        width: 160px;
        filter: grayscale(0);
        /* 兼容性设置 */
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-content-auction-btn:hover img {
        filter: grayscale(100%);
        /* 兼容性设置 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

/* 网站首页 第十一屏 */




/* 首页网站底部 */
@media screen and (min-width: 1921px) {
    .footer {
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/footer.jpg);
        padding: 120px 0;
    }

    .page-footer {
        width: 100%;
        background-image: url(/static/picture/footer.jpg);
        padding: 80px 0 20px 0;
    }

    .footer-top {
        width: 100%;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .footer-top img {
        width: 100%;
        animation: zoomInOut 5s infinite;
    }

    .footer-nav {
        margin-top: 120px;
    }


    .footer-menu h5 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .footer-nav-item {
        display: flex;
        flex-direction: column;
    }

    .page-footer-nav-menu h5 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .page-footer-nav-menu {
        display: flex;
        flex-direction: column;
    }

    .page-footer-nav-menu-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

    .footer-menu-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-menu-item a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .footer-menu-item a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .page-footer-nav-menu-item a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        text-decoration: none;
    }

    .page-footer-nav-menu-item a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .footer-logo-item {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        transform: translateY(-30px);
        gap: 15px;
    }

    .footer-logo-item-img img {
        width: 200px;
    }

    .footer-logo-item h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
    }

    .footer-logo-qr {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .footer-logo-qr img {
        width: 80px;
    }

    .footer-logo-social {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin: 30px 0 50px 0;
    }

    .footer-logo-social i {
        font-size: 1.5rem;
        color: #727272;
    }

    .footer-logo-social a:hover i {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .footer-copyright-line {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .footer-copyright-line img {
        width: 100%;
        opacity: 0.2;
    }

    .footer-copyright-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    .footer-copyright-text a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        font-size: 0.8rem;
    }

    .footer-copyright-text a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .footer {
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/footer.jpg);
        padding: 120px 0 0 0;
        overflow: hidden;
    }

    .page-footer {
        width: 100%;
        background-image: url(/static/picture/footer.jpg);
        padding: 80px 0 20px 0;
    }

    .footer-top {
        width: 100%;
        height: 300px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        --mask: radial-gradient(10px at 10px 10px, #0000 98%, #000) -10px -10px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .footer-top img {
        width: 100%;
        animation: zoomInOut 5s infinite;
    }

    .footer-nav {
        margin-top: 120px;
    }


    .footer-menu h4 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .footer-nav-item {
        display: flex;
        flex-direction: column;
    }

    .page-footer-nav-menu h5 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .page-footer-nav-menu {
        display: flex;
        flex-direction: column;
    }

    .page-footer-nav-menu-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

    .footer-menu-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-menu-item a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .footer-menu-item a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .page-footer-nav-menu-item a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        text-decoration: none;
    }

    .page-footer-nav-menu-item a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .footer-logo-item {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        transform: translateY(-30px);
        gap: 15px;
    }

    .footer-logo-item-img img {
        width: 200px;
    }

    .footer-logo-item h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
    }

    .footer-logo-qr {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .footer-logo-qr img {
        width: 80px;
    }

    .footer-logo-social {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin: 30px 0 50px 0;
    }

    .footer-logo-social i {
        font-size: 1.5rem;
        color: #727272;
    }

    .footer-logo-social a:hover i {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .footer-copyright-line {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .footer-copyright-line img {
        width: 100%;
        opacity: 0.2;
    }

    .footer-copyright-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    .footer-copyright-text a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        font-size: 0.8rem;
    }

    .footer-copyright-text a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .footer {
        width: 100%;
        background-image: url(/static/picture/footer.jpg);
        padding: 20px 0;
    }

    .page-footer {
        width: 100%;
        background-image: url(/static/picture/footer.jpg);
        padding: 80px 0 20px 0;
    }

    .footer-top {
        display: none;
    }

    .footer-top img {
        width: 100%;
        animation: zoomInOut 5s infinite;
    }

    .footer-nav {
        margin-top: 120px;
    }


    .footer-menu h5 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .footer-nav-item {
        display: flex;
        flex-direction: column;
    }

    .page-footer-nav-menu h5 {
        color: #fff;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .page-footer-nav-menu {
        display: flex;
        flex-direction: column;
    }

    .page-footer-nav-menu-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        margin-bottom: 30px;
    }

    .footer-menu-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 30px;
    }

    .footer-menu-item a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .footer-menu-item a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .page-footer-nav-menu-item a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        text-decoration: none;
    }

    .page-footer-nav-menu-item a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .footer-logo {
        display: none;
    }

    .footer-copyright-line {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .footer-copyright-line img {
        width: 100%;
        opacity: 0.2;
    }

    .footer-copyright-text {
        width: 100%;
    }

    .footer-copyright-text a {
        color: #727272;
        font-family: 'Sim', sans-serif;
        font-size: 0.8rem;
    }

    .footer-copyright-text a:hover {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }
}

/* 首页网站底部 */





/* 菜单 */
@media screen and (min-width: 1921px) {
    .top-menu-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/slider2.jpg);
        padding: 0 120px;
        z-index: 4;
        display: none;
    }

    .top-menu-box-item ul {
        display: flex;
        justify-content: space-between;
    }

    .top-menu-box-item .top-menu-box-item-download {
        padding: 300px 100px 800px 100px;
    }

    .top-menu-box-item .top-menu-box-item-download h1 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        font-size: 5rem;
        color: #b60607;
        cursor: pointer;
    }

    .top-menu-box-item .top-menu-box-item-download:hover h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .top-menu-box-item .top-menu-box-item-download {
        position: relative;
        list-style: none;
    }

    .top-menu-box-item-child {
        position: absolute;
        top: 850px;
        left: 0;
        width: 100%;
        display: none;
    }

    .top-menu-box-item-child-item {
        display: flex;
        gap: 30px;
        transform: translateX(-10%);
        transition: all 0.3s ease-in-out;
    }

    .top-menu-box-item-child-item a {
        color: #fff;
        font-family: 'Sim', sans-serif;
        text-decoration: none;
        font-size: 1.5rem;
        position: relative;
        text-align: center;
        padding: 10px;
    }

    .top-menu-box-item-child-item a:before {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        height: 4px;
        width: 100%;
        border-bottom: 2px solid transparent;
        border-left: 2px solid transparent;
        box-sizing: border-box;
        transform: translateX(100%);
    }

    .top-menu-box-item-child-item a:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        border-top: 2px solid transparent;
        border-right: 2px solid transparent;
        box-sizing: border-box;
        transform: translateX(-100%);
    }

    .top-menu-box-item-child-item a:hover {
        color: #b60607;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .top-menu-box-item-child-item a:hover:before {
        border-color: #262626;
        height: 100%;
        transform: translateX(0);
        transition: .3s transform linear, .3s height linear .3s;
    }

    .top-menu-box-item-child-item a:hover:after {
        border-color: #262626;
        height: 100%;
        transform: translateX(0);
        transition: .3s transform linear, .3s height linear .5s;

    }

    .top-menu-box-item-download:hover .top-menu-box-item-child {
        display: block;
        animation: fadeIn 0.5s ease-in-out;
    }

    .nav-close {
        position: fixed;
        right: 40px;
        top: 50px;
        z-index: 4;
        display: none;
    }

    .nav-close i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .nav-close i:hover {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .top-menu-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/slider2.jpg);
        padding: 0 120px;
        z-index: 4;
        display: none;
    }

    .top-menu-box-item ul {
        display: flex;
        justify-content: space-between;
    }

    .top-menu-box-item .top-menu-box-item-download {
        padding: 180px 80px;
    }

    .top-menu-box-item .top-menu-box-item-download h1 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #b60607;
        cursor: pointer;
    }

    .top-menu-box-item .top-menu-box-item-download:hover h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .top-menu-box-item .top-menu-box-item-download {
        position: relative;
        list-style: none;
    }

    .top-menu-box-item-child {
        position: absolute;
        top: 600px;
        left: -10px;
        width: 100%;
        display: none;

    }

    .top-menu-box-item-child-item {
        display: flex;
        gap: 10px;
        transition: all 0.3s ease-in-out;
    }

    .top-menu-box-item-child-item a {
        color: #fff;
        font-family: 'Sim', sans-serif;
        text-decoration: none;
        font-size: 1.5rem;
        position: relative;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        padding: 5px;
    }

    .top-menu-box-item-child-item a:before {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        height: 4px;
        width: 100%;
        border-bottom: 2px solid transparent;
        border-left: 2px solid transparent;
        box-sizing: border-box;
        transform: translateX(100%);
    }

    .top-menu-box-item-child-item a:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        border-top: 2px solid transparent;
        border-right: 2px solid transparent;
        box-sizing: border-box;
        transform: translateX(-100%);
    }

    .top-menu-box-item-child-item a:hover {
        color: #b60607;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .top-menu-box-item-child-item a:hover:before {
        border-color: #262626;
        height: 100%;
        transform: translateX(0);
        transition: .3s transform linear, .3s height linear .3s;
    }

    .top-menu-box-item-child-item a:hover:after {
        border-color: #262626;
        height: 100%;
        transform: translateX(0);
        transition: .3s transform linear, .3s height linear .5s;

    }

    .top-menu-box-item-download:hover .top-menu-box-item-child {
        display: block;
        animation: fadeIn 0.5s ease-in-out;
    }

    .nav-close {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 4;
        display: none;
    }

    .nav-close i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .nav-close i:hover {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .top-menu-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/slider2.jpg);
        padding: 30px;
        z-index: 4;
        display: none;
    }

    .top-menu-box-item {
        margin-top: 50px;
    }

    .top-menu-box-item .top-menu-box-item-download {
        list-style: none;
        margin-bottom: 20px;
    }

    .top-menu-box-item .top-menu-box-item-download h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 3rem;
        color: #b60607;
        cursor: pointer;
    }

    .top-menu-box-item .top-menu-box-item-download:hover h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .top-menu-box-item-child {
        width: 100%;
        display: none;
    }

    .top-menu-box-item-child-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
        transition: all 0.3s ease-in-out;
    }

    .top-menu-box-item-child-item a {
        color: #fff;
        font-family: 'Sim', sans-serif;
        text-decoration: none;
        font-size: 1.6rem;
        letter-spacing: 8px;
        padding: 5px;
    }

    .top-menu-box-item-child-item a:before {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        height: 4px;
        width: 100%;
        border-bottom: 2px solid transparent;
        border-left: 2px solid transparent;
        box-sizing: border-box;
        transform: translateX(100%);
    }

    .top-menu-box-item-child-item a:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        border-top: 2px solid transparent;
        border-right: 2px solid transparent;
        box-sizing: border-box;
        transform: translateX(-100%);
    }

    .top-menu-box-item-child-item a:hover {
        color: #b60607;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .top-menu-box-item-child-item a:hover:before {
        border-color: #262626;
        height: 100%;
        transform: translateX(0);
        transition: .3s transform linear, .3s height linear .3s;
    }

    .top-menu-box-item-child-item a:hover:after {
        border-color: #262626;
        height: 100%;
        transform: translateX(0);
        transition: .3s transform linear, .3s height linear .5s;

    }

    .top-menu-box-item-download:hover .top-menu-box-item-child {
        display: block;
        animation: fadeIn 0.5s ease-in-out;
    }

    .nav-close {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 4;
        display: none;
    }

    .nav-close i {
        font-size: 2rem;
        color: #fff;
        opacity: 0.3;
    }

    .nav-close i:hover {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

/* 菜单 */






/* 品牌故事 */
@media screen and (min-width: 1921px) {
    .page-bg {
        width: 100%;
        height: 1000px;
        overflow: hidden;
        position: relative;
    }

    .page-bg-img {
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .page-bg-img img {
        width: 100%;
        animation: zoomInOut 5s infinite;
    }

    .page-bg-text {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -30%);
        text-align: center;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .page-bg-text h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 6rem;
        color: #650102;
    }

    .page-bg-text h5 {
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        color: #fff;
    }

    .page-bg-overlay {
        width: 100%;
        height: 1000px;
        overflow: hidden;
        padding: 120px 120px 0 120px;
        margin-top: 120px;
    }

    .page-bg-overlay-img {
        width: 100%;
        height: 760px;
        padding: 120px 0;
        overflow: hidden;
        --mask: radial-gradient(40px at 40px 40px, #0000 98%, #000) -40px -40px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .page-bg-overlay-img img {
        width: 100%;
        transform: translateY(-13%);
    }

    /*.page-bg:hover .page-bg-overlay-img img {*/
    /*    transform: scale(1.1);*/
    /*    transition: all 0.3s ease-in-out;*/
    /*}*/

    .page-bg-text-line {
        border-bottom: 5px solid #650102;
        width: 80px;
    }

    .page-about {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
    }

    .page-about-box {
        position: relative;
        width: 40%;
    }

    .page-about-img {
        --mask: radial-gradient(40px at 40px 40px, #0000 98%, #000) -40px -40px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        width: 100%;
        height: 500px;
        display: flex;
        overflow: hidden;
    }

    .page-about-img img {
        width: 100%;
    }

    .page-about-img:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-about-box-btn {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        gap: 20px;
    }

    .page-about-box-btn img {
        width: 120px;
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-about-box-btn a:hover img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .page-about-text {
        width: 60%;
        padding-left: 300px;
    }

    .page-about-text-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        justify-content: center;
        margin-bottom: 80px;
    }

    .page-about-text-icon img {
        width: 50px;
    }

    .page-about-text h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 20px;
    }

    .page-about-text p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .page-about-text-icon-bottom {
        writing-mode: vertical-rl;
        letter-spacing: 3px;
        margin-right: 12px;
    }

    .page-about-text-icon-bottom h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.8rem;
    }

    .page-about-text-icon-bottom h6 {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
    }

    .page-about-text-title {
        position: relative;
    }

    .page-about-text-title-circle {
        position: absolute;
        top: -10px;
        left: 130px;
        z-index: 0;
    }

    .page-about-text-title-circle img {
        width: 70%;
    }

    .page-about-history {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
    }

    .page-about-history-icon {
        width: 30%;
    }

    .page-about-history-icon-top {
        margin-bottom: 15px;
    }

    .page-about-history-icon-top img {
        width: 50px;
    }

    .page-about-history-icon-bottom {
        writing-mode: vertical-rl;
        letter-spacing: 3px;
        margin-left: 5px;
    }

    .page-about-history-icon-bottom h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.8rem;
    }

    .page-about-history-icon-bottom h6 {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
    }

    .page-about-history-box {
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
    }

    .page-about-history-box-item {
        width: 31%;
        position: relative;
        margin-bottom: 30px;
        --mask: radial-gradient(10px at 10px 10px, #0000 98%, #000) -10px -10px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .page-about-history-box-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #b60607;
        background: linear-gradient(to top, #000000c0, #00000044);
        z-index: 2;
    }

    .page-about-history-box-item:hover .page-about-history-box-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-bg {
        width: 100%;
        height: 260px;
        overflow: hidden;
    }

    .page-about-history-box-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-text {
        position: absolute;
        bottom: 10px;
        left: 20px;
        z-index: 3;
    }

    .page-about-history-box-item:hover .page-about-history-box-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-text h4 {
        font-family: 'Sim', sans-serif;
        color: #fff;
    }

    .page-about-history-box-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
    }

    .page-about-history-icon-title {
        position: relative;
        margin-top: 50px;
    }

    .page-about-history-icon-title-circle {
        position: absolute;
        top: -10px;
        left: 200px;
        z-index: 0;
    }

    .page-about-history-icon-title-circle img {
        width: 60%;
    }

    .page-about-history-icon-title-text {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .page-about-history-icon-title-text h1 {
        color: #fff;
        font-size: 4rem;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .page-about-history-icon-title-text p {
        color: #d2d2d2;
        font-size: 1.2rem;
        font-family: 'Sim', sans-serif;
        text-indent: 2em;
        padding-right: 100px;
    }

    .history-switch {
        position: absolute;
        z-index: 3;
        width: 100%;
        display: flex;
        left: 0;
        justify-content: space-between;
        bottom: 40%;
    }

    .hire-area {
        background-image: url(/static/picture/slider2.jpg);
        background-size: cover;
        background-position: center;
        padding: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

    .hire-area-item {
        background-color: #272727;
        padding: 50px;
        border-radius: 10px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        color: #fff;
    }

    .hire-area-item-title {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .hire-area-item-title-icon {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .hire-area-item-title-icon i {
        font-size: 3rem;
    }

    .hire-area-item-title-text {
        margin-top: 20px;
    }

    .hire-area-item-title-text h3 {
        font-family: 'Hungke', sans-serif;
    }

    .hire-area-item-title-text p {
        font-family: 'Sim', sans-serif;
    }

    .hire-area-item-content p {
        font-family: 'Sim', sans-serif;
        word-break: break-all;
    }

    .hire-area-item--btn {
        margin-top: 50px;
    }

    .hire-area-item--btn a {
        padding: 15px 50px;
        background-color: #650102;
        color: #fff;
        font-family: 'Sim', sans-serif;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .hire-area-item--btn a:hover {
        background-color: #000;
        transition: all 0.3s;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-bg {
        width: 100%;
        height: 600px;
        overflow: hidden;
        position: relative;
    }

    .page-bg-img {
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .page-bg-img img {
        width: 100%;
        animation: zoomInOut 5s infinite;
    }

    .page-bg-text {
        position: absolute;
        width: 100%;
        height: 500px;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .page-bg-text h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 6rem;
        color: #650102;
    }

    .page-bg-text h5 {
        font-family: 'Sim', sans-serif;
        font-size: 2rem;
        color: #fff;
    }

    .page-bg-overlay {
        width: 100%;
        overflow: hidden;
        padding: 120px 120px 0 120px;
    }

    .page-bg-overlay-img {
        width: 100%;
        height: 500px;
        overflow: hidden;
        --mask: radial-gradient(40px at 40px 40px, #0000 98%, #000) -40px -40px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .page-bg-overlay-img img {
        width: 100%;
    }

    /*.page-bg:hover .page-bg-overlay-img img {*/
    /*    transform: scale(1.1);*/
    /*    transition: all 0.3s ease-in-out;*/
    /*}*/

    .page-bg-text-line {
        border-bottom: 5px solid #650102;
        width: 80px;
    }

    .page-about {
        padding: 120px 120px 0 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
    }

    .page-about-box {
        position: relative;
        width: 40%;
    }

    .page-about-img {
        --mask: radial-gradient(40px at 40px 40px, #0000 98%, #000) -40px -40px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        width: 100%;
        height: 520px;
        display: flex;
        overflow: hidden;
    }

    .page-about-img img {
        width: 100%;
    }

    .page-about-img:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-about-box-btn {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        gap: 20px;
    }

    .page-about-box-btn img {
        width: 120px;
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-about-box-btn a:hover img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .page-about-text {
        width: 60%;
        padding-left: 80px;
    }

    .page-about-text-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        justify-content: center;
        margin-bottom: 80px;
    }

    .page-about-text-icon img {
        width: 50px;
    }

    .page-about-text h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 20px;
    }

    .page-about-text p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .page-about-text-icon-bottom {
        writing-mode: vertical-rl;
        letter-spacing: 3px;
        margin-right: 12px;
    }

    .page-about-text-icon-bottom h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.8rem;
    }

    .page-about-text-icon-bottom h6 {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
    }

    .page-about-text-title {
        position: relative;
    }

    .page-about-text-title-circle {
        position: absolute;
        top: -10px;
        left: 130px;
        z-index: 0;
    }

    .page-about-text-title-circle img {
        width: 70%;
    }

    .page-about-history {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
    }

    .page-about-history-icon {
        width: 30%;
    }

    .page-about-history-icon-top {
        margin-bottom: 15px;
    }

    .page-about-history-icon-top img {
        width: 50px;
    }

    .page-about-history-icon-bottom {
        writing-mode: vertical-rl;
        letter-spacing: 3px;
        margin-left: 5px;
    }

    .page-about-history-icon-bottom h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.8rem;
    }

    .page-about-history-icon-bottom h6 {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
    }

    .page-about-history-box {
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
    }

    .page-about-history-box-item {
        width: 31%;
        position: relative;
        margin-bottom: 30px;
        --mask: radial-gradient(10px at 10px 10px, #0000 98%, #000) -10px -10px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        height: 200px;
        overflow: hidden;
    }

    .page-about-history-box-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #b60607;
        background: linear-gradient(to top, #000000c0, #00000044);
        z-index: 2;
    }

    .page-about-history-box-item:hover .page-about-history-box-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-bg {
        width: 100%;
        height: 260px;
        overflow: hidden;
    }

    .page-about-history-box-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-text {
        position: absolute;
        bottom: 0;
        left: 20px;
        z-index: 3;
    }

    .page-about-history-box-item:hover .page-about-history-box-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-text h2 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
    }

    .page-about-history-box-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
    }

    .page-about-history-icon-title {
        position: relative;
        margin-top: 30px;
        padding-right: 30px;
    }

    .page-about-history-icon-title-circle {
        position: absolute;
        top: -10px;
        left: 200px;
        z-index: 0;
    }

    .page-about-history-icon-title-circle img {
        width: 70%;
    }

    .page-about-history-icon-title-text {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        padding-right: 80px;
    }

    .page-about-history-icon-title-text h1 {
        font-family: 'Hungke';
        color: #fff;
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .page-about-history-icon-title-text h4 {
        color: #fff;
        font-size: 1.5rem;
        font-family: 'Sim', sans-serif;
        margin-bottom: 20px;
    }

    .page-about-history-icon-title-text p {
        color: #d2d2d2;
        font-size: 1.2rem;
        font-family: 'Sim', sans-serif;
        text-indent: 2em;
    }

    .history-switch {
        position: absolute;
        z-index: 3;
        width: 100%;
        display: flex;
        left: 0;
        justify-content: space-between;
        bottom: 40%;
    }

    .hire-area {
        background-image: url(/static/picture/slider2.jpg);
        background-size: cover;
        background-position: center;
        padding: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

    .hire-area-item {
        background-color: #272727;
        padding: 50px;
        border-radius: 10px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        color: #fff;
    }

    .hire-area-item-title {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .hire-area-item-title-icon {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .hire-area-item-title-icon i {
        font-size: 3rem;
    }

    .hire-area-item-title-text {
        margin-top: 20px;
    }

    .hire-area-item-title-text h3 {
        font-family: 'Hungke', sans-serif;
    }

    .hire-area-item-title-text p {
        font-family: 'Sim', sans-serif;
    }

    .hire-area-item-content p {
        font-family: 'Sim', sans-serif;
        word-break: break-all;
    }

    .hire-area-item--btn {
        margin-top: 50px;
    }

    .hire-area-item--btn a {
        padding: 15px 50px;
        background-color: #650102;
        color: #fff;
        font-family: 'Sim', sans-serif;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .hire-area-item--btn a:hover {
        background-color: #000;
        transition: all 0.3s;
    }
}

@media screen and (max-width: 1200px) {
    .page-bg {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .page-bg-img {
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .page-bg-img img {
        height: 100%;
        animation: zoomInOut 5s infinite;
    }

    .page-bg-text {
        position: absolute;
        top: 170px;
        left: 50%;
        transform: translate(-50%, -30%);
        text-align: center;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-bg-text h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        color: #650102;
    }

    .page-bg-text h5 {
        font-family: 'Sim', sans-serif;
        font-size: 1.5rem;
        margin-top: 10px;
        color: #fff;
    }

    .page-bg-overlay {
        width: 100%;
        overflow: hidden;
        padding: 20px;
        margin-top: 100px;
    }

    .page-bg-overlay-img {
        width: 100%;
        overflow: hidden;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .page-bg-overlay-img img {
        width: 100%;
        transform: translateY(-13%);
    }

    /*.page-bg:hover .page-bg-overlay-img img {*/
    /*    transform: scale(1.1);*/
    /*    transition: all 0.3s ease-in-out;*/
    /*}*/

    .page-bg-text-line {
        border-bottom: 5px solid #650102;
        width: 80px;
    }

    .page-about {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .page-about-box {
        position: relative;
    }

    .page-about-img {
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        width: 100%;
        height: 300px;
        display: flex;
        overflow: hidden;
    }

    .page-about-img img {
        width: 100%;
    }

    .page-about-img:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-about-box-btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        gap: 20px;
    }

    .page-about-box-btn img {
        width: 80px;
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .page-about-box-btn a:hover img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .page-about-text {
        margin-top: 30px;
    }

    .page-about-text-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        justify-content: center;
        margin-bottom: 80px;
    }

    .page-about-text-icon img {
        width: 50px;
    }

    .page-about-text h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 20px;
    }

    .page-about-text p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .page-about-text-icon-bottom {
        writing-mode: vertical-rl;
        letter-spacing: 3px;
        margin-right: 12px;
    }

    .page-about-text-icon-bottom h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.8rem;
    }

    .page-about-text-icon-bottom h6 {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
    }

    .page-about-text-title {
        position: relative;
    }

    .page-about-text-title-circle {
        position: absolute;
        top: -10px;
        left: 70px;
        z-index: 0;
    }

    .page-about-text-title-circle img {
        width: 40%;
    }

    .page-about-history {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .page-about-history-icon-top {
        margin-bottom: 15px;
    }

    .page-about-history-icon-top img {
        width: 50px;
    }

    .page-about-history-icon-bottom {
        writing-mode: vertical-rl;
        letter-spacing: 3px;
        margin-left: 5px;
    }

    .page-about-history-icon-bottom h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.8rem;
    }

    .page-about-history-icon-bottom h6 {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
    }

    .page-about-history-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }

    .page-about-history-box-item {
        position: relative;
        margin-bottom: 30px;
        --mask: radial-gradient(10px at 10px 10px, #0000 98%, #000) -10px -10px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .page-about-history-box-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #b60607;
        background: linear-gradient(to top, #000000c0, #00000044);
        z-index: 2;
    }

    .page-about-history-box-item:hover .page-about-history-box-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-bg {
        width: 100%;
        height: 260px;
        overflow: hidden;
        display: flex;
    }

    .page-about-history-box-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-text {
        position: absolute;
        bottom: 10px;
        left: 20px;
        z-index: 3;
    }

    .page-about-history-box-item:hover .page-about-history-box-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .page-about-history-box-item-text h4 {
        font-family: 'Sim', sans-serif;
        color: #fff;
    }

    .page-about-history-box-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
    }

    .page-about-history-icon-title {
        position: relative;
        margin-top: 50px;
    }

    .page-about-history-icon-title-circle {
        position: absolute;
        top: -15px;
        left: 100px;
        z-index: 0;
    }

    .page-about-history-icon-title-circle img {
        width: 40%;
    }

    .page-about-history-icon-title-text h1 {
        color: #fff;
        font-size: 2rem;
        font-family: 'Hungke', sans-serif;
        margin-bottom: 20px;
    }

    .page-about-history-icon-title-text p {
        color: #d2d2d2;
        font-size: 1.2rem;
        font-family: 'Sim', sans-serif;
        text-indent: 2em;
    }

    .history-switch {
        position: absolute;
        z-index: 3;
        width: 100%;
        display: flex;
        left: 0;
        justify-content: space-between;
        bottom: 40%;
    }

    .hire-area {
        background-image: url(/static/picture/slider2.jpg);
        background-size: cover;
        background-position: center;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .hire-area-item {
        background-color: #272727;
        padding: 20px;
        border-radius: 10px;
        color: #fff;
        width: 100%;
        margin-bottom: 10px;
    }

    .hire-area-item-title {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .hire-area-item-title-icon {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .hire-area-item-title-icon i {
        font-size: 3rem;
    }

    .hire-area-item-title-text {
        margin-top: 20px;
    }

    .hire-area-item-title-text h3 {
        font-family: 'Hungke', sans-serif;
    }

    .hire-area-item-title-text p {
        display: none;
    }

    .hire-area-item-content p {
        font-family: 'Sim', sans-serif;
        word-break: break-all;
    }

    .hire-area-item--btn {
        margin-top: 50px;
    }

    .hire-area-item--btn a {
        padding: 10px 25px;
        background-color: #650102;
        color: #fff;
        font-family: 'Sim', sans-serif;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .hire-area-item--btn a:hover {
        background-color: #000;
        transition: all 0.3s;
    }
}

/* 品牌故事 */





/* 非遗红木 */
@media screen and (min-width: 1921px) {
    .ich-info {
        background-image: url(/static/picture/slider2.jpg);
        padding: 120px;
        text-align: center;
    }

    .ich-info-title h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .ich-info-title p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
    }

    .ich-process {
        padding: 0 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .ich-process-item {
        width: 30%;
        position: relative;
        height: 1000px;
        overflow: hidden;
        margin-bottom: 80px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .ich-process-item-img {
        width: 100%;
    }

    .ich-process-item-img img {
        width: 100%;
    }

    .ich-process-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }


    .ich-process-item-text {
        position: absolute;
        bottom: 0;
        left: 20px;
        z-index: 3;
        padding: 50px;
    }

    .ich-process-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
    }

    .ich-process-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .ich-process-item:hover .ich-process-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item:hover .ich-process-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item-text-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .ich-value {
        padding: 0 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
        text-align: center;
    }

    .ich-inherit {
        padding: 0 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
        position: relative;
    }

    .ich-inherit-up {
        position: relative;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .ich-inherit-up-img img {
        width: 100%;
    }

    .ich-inherit-up-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }

    .ich-inherit-down-text {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        text-align: center;
    }

    .ich-inherit-down-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .ich-inherit-down-text ul li {
        list-style: none;
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .ich-inherit-down-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .ich-info {
        background-image: url(/static/picture/slider2.jpg);
        padding: 120px;
        text-align: center;
    }

    .ich-info-title h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .ich-info-title p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
    }

    .ich-process {
        padding: 0 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .ich-process-item {
        width: 32%;
        position: relative;
        margin-bottom: 30px;
        height: 700px;
        overflow: hidden;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .ich-process-item-img {
        width: 100%;
    }

    .ich-process-item-img img {
        width: 100%;
    }

    .ich-process-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }


    .ich-process-item-text {
        position: absolute;
        bottom: 0;
        left: 20px;
        z-index: 3;
        padding: 30px;
    }

    .ich-process-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
    }

    .ich-process-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .ich-process-item:hover .ich-process-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item:hover .ich-process-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item-text-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .ich-value {
        padding: 0 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
        text-align: center;
    }

    .ich-inherit {
        padding: 0 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
        position: relative;
    }

    .ich-inherit-up {
        position: relative;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .ich-inherit-up-img img {
        width: 100%;
    }

    .ich-inherit-up-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }

    .ich-inherit-down-text {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        text-align: center;
        width: 80%;
    }

    .ich-inherit-down-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .ich-inherit-down-text ul li {
        list-style: none;
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .ich-inherit-down-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 1200px) {
    .ich-info {
        background-image: url(/static/picture/slider2.jpg);
        padding: 20px;
        text-align: center;
    }

    .ich-info-title h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .ich-info-title p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
    }

    .ich-process {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .ich-process-item {
        width: 30%;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }

    .ich-process-item-img {
        width: 100%;
    }

    .ich-process-item-img img {
        width: 100%;
    }

    .ich-process-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }


    .ich-process-item-text {
        display: none;
    }

    .ich-process-item:hover .ich-process-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item:hover .ich-process-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .ich-process-item-text-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .ich-value {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
        text-align: center;
    }

    .ich-inherit {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
        position: relative;
    }

    .ich-inherit-up {
        position: relative;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .ich-inherit-up-img img {
        width: 100%;
    }

    .ich-inherit-up-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }

    .ich-inherit-down-text {
        padding: 20px;
    }

    .ich-inherit-down-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .ich-inherit-down-text ul li {
        list-style: none;
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .ich-inherit-down-icon {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
}

/* 非遗红木 */






/* 企业荣誉 */
@media screen and (min-width: 1921px) {
    .honor-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
    }

    .honor-section-left {
        width: 40%;
        padding: 200px 300px 0 0;
    }

    .honor-section-left h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .honor-section-left p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .honor-section-right {
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .honor-item {
        width: 30%;
        margin-bottom: 30px;
    }

    .honor-item-img {
        width: 100%;
    }

    .honor-item-img img {
        width: 100%;
    }

    .honor-item:hover img {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .honor-item-text {
        text-align: center;
        margin-top: 30px;
    }

    .honor-item:hover .honor-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .honor-item-text h3 {
        color: #fff;
        font-family: 'Sim', sans-serif;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .honor-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
    }

    .honor-section-left {
        width: 40%;
        padding: 200px 300px 0 0;
    }

    .honor-section-left h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .honor-section-left p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .honor-section-right {
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .honor-item {
        width: 30%;
        margin-bottom: 30px;
    }

    .honor-item-img {
        width: 100%;
    }

    .honor-item-img img {
        width: 100%;
    }

    .honor-item:hover img {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .honor-item-text {
        text-align: center;
        margin-top: 30px;
    }

    .honor-item:hover .honor-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .honor-item-text h3 {
        color: #fff;
        font-family: 'Sim', sans-serif;
    }
}

@media screen and (max-width: 1200px) {
    .honor-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .honor-section-left h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 20px;
    }

    .honor-section-left p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .honor-section-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .honor-section-right .slide {
        margin-bottom: 20px;
    }

    .honor-section-right .slider-controls {
        display: none;
    }

    .honor-item {
        width: 30%;
        margin-bottom: 30px;
    }

    .honor-item-img {
        width: 100%;
    }

    .honor-item-img img {
        width: 100%;
    }

    .honor-item:hover img {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .honor-item-text {
        text-align: center;
        margin-top: 30px;
    }

    .honor-item:hover .honor-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .honor-item-text h3 {
        color: #fff;
        font-family: 'Sim', sans-serif;
    }
}

/* 企业荣誉 */





/* 创始人寄语 */
@media screen and (min-width: 1921px) {
    .founder-section {
        padding: 150px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
    }

    .founder-section-left {
        width: 40%;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .founder-section-left-img img {
        width: 100%;
    }

    .founder-section-left:hover img {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-middle {
        width: 20%;
        margin-top: 100px;
        transform: translateX(-100px);
    }

    .founder-section-right {
        width: 40%;
        padding: 800px 0 0 60px;
    }

    .founder-section-right h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .founder-section-right p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
    }

    .founder-section-middle h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 12rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .founder-section-middle h3 {
        font-family: 'Nanan', sans-serif;
        font-size: 5rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .founder-section-middle:hover h1 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-middle:hover h3 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-right:hover h1 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-right:hover p {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .founder-section {
        padding: 150px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
    }

    .founder-section-left {
        width: 40%;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .founder-section-left-img img {
        width: 100%;
    }

    .founder-section-left:hover img {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-middle {
        width: 20%;
        transform: translateX(-100px);
    }

    .founder-section-right {
        width: 40%;
        padding: 500px 0 0 60px;
    }

    .founder-section-right h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .founder-section-right p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
    }

    .founder-section-middle h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 12rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .founder-section-middle h3 {
        font-family: 'Nanan', sans-serif;
        font-size: 3.5rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .founder-section-middle:hover h1 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-middle:hover h3 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-right:hover h1 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-right:hover p {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .founder-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .founder-section-left {
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .founder-section-left-img img {
        width: 100%;
    }

    .founder-section-left:hover img {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-middle {
        margin: 50px 0;
    }

    .founder-section-right h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 2rem;
        color: #fff;
        margin-bottom: 20px;
    }

    .founder-section-right p {
        font-family: 'Sim', sans-serif;
        font-size: 1.2rem;
        color: #d2d2d2;
    }

    .founder-section-middle h1 {
        font-family: 'Hungke', sans-serif;
        font-size: 4rem;
        color: #fff;
        margin-bottom: 30px;
    }

    .founder-section-middle h3 {
        font-family: 'Nanan', sans-serif;
        font-size: 2.3rem;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .founder-section-middle:hover h1 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-middle:hover h3 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-right:hover h1 {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .founder-section-right:hover p {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }
}

/* 创始人寄语 */





/* 党建团队 */
@media screen and (min-width: 1921px) {
    .party-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .party-item {
        display: flex;
        background-color: #111111;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .party-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .party-item-img {
        width: 50%;
        overflow: hidden;
    }

    .party-item-img img {
        width: 100%;
    }

    .party-item:hover .party-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .party-item-text {
        width: 50%;
        padding: 80px;
    }

    .party-item-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
    }

    .party-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .party-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .party-item-text-job {
        margin-top: 50px;
    }

    .party-item-text-job ul li {
        list-style: none;
    }

    .party-item-text-job ul li {
        font-family: 'Sim', sans-serif;
        color: #959595;
        font-size: 1.2rem;
    }

    .party-switch {
        position: absolute;
        top: 680px;
        right: 50px;
        width: 100%;
        display: flex;
        justify-content: end;
        z-index: 3;
    }

    .switch-btn img {
        width: 30px;
        cursor: pointer;
        opacity: 0.3;
    }

    .party-switch:hover .switch-btn img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .party-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .party-item {
        display: flex;
        background-color: #111111;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .party-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .party-item-img {
        width: 50%;
        overflow: hidden;
    }

    .party-item-img img {
        width: 100%;
    }

    .party-item:hover .party-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .party-item-text {
        width: 50%;
        padding: 80px;
    }

    .party-item-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
    }

    .party-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .party-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .party-item-text-job {
        margin-top: 50px;
    }

    .party-item-text-job ul li {
        list-style: none;
    }

    .party-item-text-job ul li {
        font-family: 'Sim', sans-serif;
        color: #959595;
        font-size: 1.2rem;
    }

    .party-switch {
        position: absolute;
        top: 680px;
        right: 50px;
        width: 100%;
        display: flex;
        justify-content: end;
        z-index: 3;
    }

    .switch-btn img {
        width: 30px;
        cursor: pointer;
        opacity: 0.3;
    }

    .party-switch:hover .switch-btn img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .party-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .party-item {
        background-color: #111111;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .party-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .party-item-img {
        overflow: hidden;
    }

    .party-item-img img {
        width: 100%;
    }

    .party-item:hover .party-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .party-item-text {
        margin-top: 50px;
    }

    .party-item-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
    }

    .party-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .party-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .party-item-text-job {
        margin-top: 50px;
    }

    .party-item-text-job ul li {
        list-style: none;
    }

    .party-item-text-job ul li {
        font-family: 'Sim', sans-serif;
        color: #959595;
        font-size: 1.2rem;
    }

    .party-switch {
        position: absolute;
        top: 680px;
        right: 50px;
        width: 100%;
        display: flex;
        justify-content: end;
        z-index: 3;
    }

    .switch-btn img {
        width: 30px;
        cursor: pointer;
        opacity: 0.3;
    }

    .party-switch:hover .switch-btn img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
}

/* 党建团队 */





/* 一级分类 */
@media screen and (min-width: 1921px) {
    .pro-section {
        width: 100%;
        background-image: url(/static/picture/slider2.jpg);
        padding: 200px 120px;
    }

    .pro-section .mySwiper2 .swiper-slide {
        width: 100%;
        height: 800px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pro-section .mySwiper .swiper-slide {
        width: 100%;
        height: 200px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pro-section-item {
        position: relative;
    }

    .pro-section-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0000008d, #00000027);
        z-index: 2;
    }

    .pro-section-item-text {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 20px;
    }

    .pro-section-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 5rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .pro-section-item-text h6 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        text-transform: uppercase;
        transform: translateY(-30px);
    }

    .pro-section .swiper-slide {
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .pro-section-item-select {
        position: relative;
    }

    .pro-section-item-select-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }

    .mySwiper .swiper-slide.active .pro-section-item-select-mask {
        background: none;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .pro-section {
        width: 100%;
        background-image: url(/static/picture/slider2.jpg);
        padding: 120px;
    }

    .pro-section .mySwiper2 .swiper-slide {
        width: 100%;
        height: 600px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pro-section .mySwiper .swiper-slide {
        width: 100%;
        height: 150px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pro-section-item {
        position: relative;
    }

    .pro-section-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0000008d, #00000027);
        z-index: 2;
    }

    .pro-section-item-text {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 20px;
    }

    .pro-section-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 5rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .pro-section-item-text h6 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        text-transform: uppercase;
        transform: translateY(-30px);
    }

    .pro-section .swiper-slide {
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .pro-section-item-select {
        position: relative;
    }

    .pro-section-item-select-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }

    .mySwiper .swiper-slide.active .pro-section-item-select-mask {
        background: none;
    }
}

@media screen and (max-width: 1200px) {
    .pro-section {
        width: 100%;
        background-image: url(/static/picture/slider2.jpg);
    }

    .pro-section .mySwiper2 {
        width: 100%;
        height: 80vh;
        overflow: hidden;
    }

    .pro-section .mySwiper2 .swiper-slide {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .pro-section .mySwiper {
        width: 100%;
        height: 20vh;
        overflow: hidden;
    }

    .pro-section .mySwiper .swiper-slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
    }

    .pro-section-item {
        position: relative;
    }

    .pro-section-item-img {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
    }

    .pro-section-item-img img {
        height: 100%;
    }

    .pro-section-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0000008d, #00000027);
        z-index: 2;
    }

    .pro-section-item-text {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 20px;
    }

    .pro-section-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 5rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .pro-section-item-text h6 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        text-transform: uppercase;
        transform: translateY(-30px);
    }

    .pro-section .swiper-slide {
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .pro-section-item-select {
        position: relative;
    }

    .pro-section-item-select-img {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
    }

    .pro-section-item-select-img img {
        height: 100%;
    }

    .pro-section-item-select-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000d9, #00000044);
        z-index: 2;
    }

    .mySwiper .swiper-slide.active .pro-section-item-select-mask {
        background: none;
    }
}

/* 一级分类 */




/* 二级分类 */
@media screen and (min-width: 1921px) {
    .prolist-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .prolist-item {
        padding: 80px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #131313;
        position: relative;
        width: 49%;
        margin-bottom: 50px;
    }

    .prolist-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .prolist-item-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .prolist-item-text-title {
        position: relative;
    }

    .prolist-item-text-title-bg img {
        width: 300px;
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .prolist-item-text-title-name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        text-align: center;
        width: 300px;
        margin-bottom: 80px;
    }

    .prolist-item-img {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .prolist-item-img img {
        width: 80%;
    }

    .prolist-item:hover .prolist-item-img img {
        transform: translateX(-10px);
        transition: all 0.3s ease-in-out;
    }

    .prolist-item:hover .prolist-item-text-title-bg img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .prolist-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .prolist-item {
        padding: 80px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #131313;
        position: relative;
        width: 49%;
        margin-bottom: 50px;
    }

    .prolist-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .prolist-item-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .prolist-item-text-title {
        position: relative;
    }

    .prolist-item-text-title-bg img {
        width: 300px;
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .prolist-item-text-title-name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        text-align: center;
        width: 300px;
        margin-bottom: 80px;
    }

    .prolist-item-img {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .prolist-item-img img {
        width: 80%;
    }

    .prolist-item:hover .prolist-item-img img {
        transform: translateX(-10px);
        transition: all 0.3s ease-in-out;
    }

    .prolist-item:hover .prolist-item-text-title-bg img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .prolist-section {
        background-image: url(/static/picture/slider2.jpg);
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px;
    }

    .prolist-item {
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #0d0d0d;
        position: relative;
        margin-bottom: 20px;
        padding-top: 30px;
    }

    .prolist-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .prolist-item-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .prolist-item-text-title {
        position: relative;
    }

    .prolist-item-text-title-bg img {
        width: 200px;
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .prolist-item-text-title-name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        text-align: center;
        width: 300px;
        margin-bottom: 80px;
    }

    .prolist-item-text-title-name h4 {
        font-size: 1rem;
    }

    .prolist-item-img {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .prolist-item-img img {
        width: 80%;
    }

    .prolist-item:hover .prolist-item-img img {
        transform: translateX(-10px);
        transition: all 0.3s ease-in-out;
    }

    .prolist-item:hover .prolist-item-text-title-bg img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }
}

/* 二级分类 */



/* 产品详情 */
@media screen and (min-width: 1921px) {
    .pro-detail {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .pro-detail-item {
        background-color: #111111;
        display: flex;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        padding: 200px;
    }

    .pro-detail-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .pro-detail-item-img {
        width: 50%;
    }

    .pro-detail-item-img img {
        width: 80%;
    }

    .pro-detail-item-text {
        width: 50%;
        padding-left: 200px;
    }

    .pro-detail-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .pro-detail-item-text-title {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .pro-detail-item-text-title-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-align: center;
        width: 300px;
    }

    .pro-detail-item-text-info p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .pro-detail-item-text-des {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin: 60px 0;
    }

    .pro-detail-item-text-des span {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-transform: uppercase;
    }

    .pro-detail-item-text-des img {
        width: 50px;
    }

    .pro-detail-item-text-info h4 {
        text-align: center;
        color: #fff;
        margin-bottom: 60px;
    }

    .page-bread {
        padding: 120px 120px 0 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .page-bread-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .page-bread-item a {
        font-family: 'Sim', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .page-bread-item a:hover {
        color: #b60607;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .pro-detail {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .pro-detail-item {
        background-color: #111111;
        display: flex;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        padding: 120px;
    }

    .pro-detail-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .pro-detail-item-img {
        width: 40%;
    }

    .pro-detail-item-img img {
        width: 90%;
    }

    .pro-detail-item-text {
        width: 60%;
        padding-left: 100px;
    }

    .pro-detail-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .pro-detail-item-text-title {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .pro-detail-item-text-title img {
        width: 200px;
    }

    .pro-detail-item-text-title-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-align: center;
        width: 300px;
    }

    .pro-detail-item-text-title-info h2 {
        font-size: 1.5rem;
        color: #fff;
        font-family: 'Hungke', sans-serif;
    }

    .pro-detail-item-text-info p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .pro-detail-item-text-des {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin: 30px 0;
    }

    .pro-detail-item-text-des span {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-transform: uppercase;
    }

    .pro-detail-item-text-des img {
        width: 50px;
    }

    .pro-detail-item-text-info h4 {
        text-align: center;
        color: #fff;
        margin-bottom: 60px;
    }

    .page-bread {
        padding: 120px 120px 0 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .page-bread-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .page-bread-item a {
        font-family: 'Sim', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .page-bread-item a:hover {
        color: #b60607;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .pro-detail {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .pro-detail-item {
        background-color: #111111;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .pro-detail-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .pro-detail-item-img {
        width: 100%;
    }

    .pro-detail-item-img img {
        width: 100%;
    }

    .pro-detail-item-text h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .pro-detail-item-text-title {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .pro-detail-item-text-title-img img {
        width: 220px;
    }

    .pro-detail-item-text-title-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-align: center;
        width: 300px;
    }

    .pro-detail-item-text-title-info h2 {
        font-size: 1.3rem;
        color: #fff;
        font-family: 'Hungke', sans-serif;
    }

    .pro-detail-item-text-info p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1rem;
        text-indent: 2em;
    }

    .pro-detail-item-text-des {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin: 60px 0;
    }

    .pro-detail-item-text-des span {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.9rem;
        text-transform: uppercase;
    }

    .pro-detail-item-text-des img {
        width: 50px;
    }

    .pro-detail-item-text-info h4 {
        text-align: center;
        color: #fff;
        margin-bottom: 60px;
        font-size: 1rem;
    }

    .page-bread {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .page-bread-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .page-bread-item a {
        font-family: 'Sim', sans-serif;
        color: #fff;
        font-size: 1.2rem;
    }

    .page-bread-item a:hover {
        color: #b60607;
        transition: all 0.3s ease-in-out;
    }
}

/* 产品详情 */






/* 项目案例 */
@media screen and (min-width: 1921px) {
    .case-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .case-section-menu {
        display: flex;
        justify-content: space-between;
        margin-bottom: 80px;
    }

    .case-section-menu-title {
        position: relative;
    }

    .case-section-menu-title-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        text-align: center;
        width: 300px;
    }

    .case-section-menu-title-text h3 {
        font-size: 2.5rem;
    }

    .case-section-menu-title-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }

    .case-section-menu a.active .case-section-menu-title-icon img {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .case-section-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .case-section-content-item {
        width: 24%;
        position: relative;
        margin-bottom: 30px;
        overflow: hidden;
    }

    .case-section-content-item-img img {
        width: 100%;
    }

    .case-section-content-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0000008d, #00000027);
        z-index: 2;
    }

    .case-section-content-item:hover .case-section-content-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item:hover .case-section-content-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item-text {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        z-index: 3;
    }

    .case-section-content-item:hover .case-section-content-item-text {
        transform: translate(-50%, -10px);
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item-text span {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
    }

    .case-section-content-item-text h4 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        margin-top: 10px;
    }

    .copyright-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .copyright-section-item {
        display: flex;
    }

    .copyright-section-item-left {
        width: 50%;
        height: 700px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .copyright-section-item-left-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 700px;
    }

    .copyright-section-item-left-img img {
        width: 100%;
    }

    .copyright-section-item-left:hover .copyright-section-item-left-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .copyright-section-item-right {
        width: 50%;
        padding-left: 120px;
    }

    .copyright-section-item-right-title {
        display: flex;
        justify-content: end;
        gap: 50px;
    }

    .copyright-section-item-right-title-slogan {
        display: flex;
    }

    .copyright-section-item-right-title-slogan h1 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        color: #b60607;
        font-size: 5rem;
    }

    .copyright-section-item-right-title-icon {
        margin-bottom: 20px;
    }

    .copyright-section-item-right-title-icon img {
        width: 100px;
    }

    .copyright-section-item-right-title-des {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .copyright-section-item-right-title-des h4 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
    }

    .copyright-section-item-right-text {
        margin-top: 60px;
    }

    .copyright-section-item-right-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .case-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .case-section-menu {
        display: flex;
        justify-content: space-between;
        margin-bottom: 80px;
    }

    .case-section-menu-title {
        position: relative;
    }

    .case-section-menu-title-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        text-align: center;
        width: 300px;
    }

    .case-section-menu-title-text h3 {
        font-size: 2rem;
    }

    .case-section-menu-title-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        width: 200px;
    }

    .case-section-menu a.active .case-section-menu-title-icon img {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .case-section-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .case-section-content-item {
        width: 24%;
        position: relative;
        margin-bottom: 30px;
        overflow: hidden;
    }

    .case-section-content-item-img img {
        width: 100%;
    }

    .case-section-content-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0000008d, #00000027);
        z-index: 2;
    }

    .case-section-content-item:hover .case-section-content-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item:hover .case-section-content-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item-text {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        z-index: 3;
    }

    .case-section-content-item:hover .case-section-content-item-text {
        transform: translate(-50%, -10px);
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item-text span {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
    }

    .case-section-content-item-text h4 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        margin-top: 10px;
    }
}

@media screen and (max-width: 1200px) {
    .case-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .case-section-menu {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        height: 120px;
        padding: 20px;
    }

    .case-section-menu-title {
        position: relative;
    }

    .case-section-menu-title-icon {
        display: none;
    }

    .case-section-menu-title-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        text-align: center;
    }

    .case-section-menu-title-text h3 {
        font-size: 1.5rem;
    }

    .case-section-menu-title-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }

    .case-section-menu a.active .case-section-menu-title-icon img {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
    }

    .case-section-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .case-section-content-item {
        width: 49%;
        position: relative;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .case-section-content-item-img img {
        width: 100%;
    }

    .case-section-content-item-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0000008d, #00000027);
        z-index: 2;
    }

    .case-section-content-item:hover .case-section-content-item-mask {
        background: none;
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item:hover .case-section-content-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item-text {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        z-index: 3;
    }

    .case-section-content-item:hover .case-section-content-item-text {
        transform: translate(-50%, -10px);
        transition: all 0.3s ease-in-out;
    }

    .case-section-content-item-text span {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
    }

    .case-section-content-item-text h4 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        margin-top: 10px;
    }
}
/* 项目案例 */



/* 作品版权 */
@media screen and (min-width: 1921px) {
    .copyright-section {
        padding: 120px 120px 0 120px;
        background-image: url(/static/picture/slider2.jpg);
    }
    
    .copyright-section-item {
        display: flex;
    }
    
    .copyright-section-item-left {
        width: 50%;
        height: 700px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }
    
    .copyright-section-item-left-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 700px;
    }
    
    .copyright-section-item-left-img img {
        width: 100%;
    }
    
    .copyright-section-item-left:hover .copyright-section-item-left-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }
    
    .copyright-section-item-right {
        width: 50%;
        padding-left: 120px;
    }
    
    .copyright-section-item-right-title {
        display: flex;
        justify-content: end;
        gap: 50px;
    }
    
    .copyright-section-item-right-title-slogan {
        display: flex;
    }
    
    .copyright-section-item-right-title-slogan h1 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        color: #b60607;
        font-size: 5rem;
    }
    
    .copyright-section-item-right-title-icon {
        margin-bottom: 20px;
    }
    
    .copyright-section-item-right-title-icon img {
        width: 100px;
    }
    
    .copyright-section-item-right-title-des {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
    
    .copyright-section-item-right-title-des h4 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
    }
    
    .copyright-section-item-right-text {
        margin-top: 60px;
    }
    
    .copyright-section-item-right-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .copyright-section {
        padding: 120px 120px 0 120px;
        background-image: url(/static/picture/slider2.jpg);
    }
    
    .copyright-section-item {
        display: flex;
    }
    
    .copyright-section-item-left {
        width: 50%;
        height: 700px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }
    
    .copyright-section-item-left-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 700px;
    }
    
    .copyright-section-item-left-img img {
        width: 100%;
    }
    
    .copyright-section-item-left:hover .copyright-section-item-left-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }
    
    .copyright-section-item-right {
        width: 50%;
        padding-left: 120px;
    }
    
    .copyright-section-item-right-title {
        display: flex;
        justify-content: end;
        gap: 50px;
    }
    
    .copyright-section-item-right-title-slogan {
        display: flex;
    }
    
    .copyright-section-item-right-title-slogan h1 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        color: #b60607;
        font-size: 5rem;
    }
    
    .copyright-section-item-right-title-icon {
        margin-bottom: 20px;
    }
    
    .copyright-section-item-right-title-icon img {
        width: 100px;
    }
    
    .copyright-section-item-right-title-des {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
    
    .copyright-section-item-right-title-des h4 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
    }
    
    .copyright-section-item-right-text {
        margin-top: 60px;
    }
    
    .copyright-section-item-right-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }
}

@media screen and (max-width: 1200px) {
    .copyright-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }
    
    .copyright-section-item-left {
        width: 100%;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }
    
    .copyright-section-item-left-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .copyright-section-item-left-img img {
        width: 100%;
    }
    
    .copyright-section-item-left:hover .copyright-section-item-left-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }
    
    .copyright-section-item-right-title {
        display: flex;
        justify-content: end;
        gap: 50px;
        margin-top: 50px;
    }
    
    .copyright-section-item-right-title-slogan {
        display: flex;
    }
    
    .copyright-section-item-right-title-slogan h1 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Hungke', sans-serif;
        color: #b60607;
        font-size: 2rem;
    }
    
    .copyright-section-item-right-title-icon {
        margin-bottom: 20px;
    }
    
    .copyright-section-item-right-title-icon img {
        width: 100px;
    }
    
    .copyright-section-item-right-title-des {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
    
    .copyright-section-item-right-title-des h4 {
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
    }
    
    .copyright-section-item-right-text {
        margin-top: 60px;
    }
    
    .copyright-section-item-right-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }
}
/* 作品版权 */








/* 品牌承诺 */
@media screen and (min-width: 1921px) {
    .commitment-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .commitment-section-item {
        display: flex;
        justify-content: space-between;
    }

    .commitment-section-item-left {
        width: 50%;
    }

    .commitment-section-item-left-img {
        width: 900px;
        height: 900px;
        border-radius: 50%;
        overflow: hidden;
    }

    .commitment-section-item-right {
        width: 50%;
        padding-top: 120px;
    }

    .commitment-section-item-right-up {
        display: flex;
        justify-content: end;
        margin-bottom: 30px;
        gap: 30px;
    }

    .commitment-section-item-right-up-des {
        display: flex;
    }

    .commitment-section-item-right-up-des h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 4rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-item-right-up-picture img {
        width: 50px;
    }

    .commitment-section-item-right-up-text {
        display: flex;
        margin-top: 20px;
        gap: 15px;
    }

    .commitment-section-item-right-up-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-item-right-down {
        margin-top: 100px;
    }

    .commitment-section-item-right-down p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .commitment-section-logo-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .commitment-section-logo-item-text {
        margin-top: 20px;
        display: flex;
        gap: 15px;
    }

    .commitment-section-logo-item-text h1 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 2rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-logo-item-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        margin-top: 10px;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-adv {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .commitment-section-adv-item {
        width: 30%;
        padding: 60px;
        background-color: #262626;
        margin-bottom: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        text-align: center;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .commitment-section-adv-item:hover {
        background-color: #1a1a1a;
        transition: all 0.3s ease-in-out;
    }

    .commitment-section-adv-item-icon img {
        width: 80px;
    }

    .commitment-section-adv-item-text h3 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .commitment-section-adv-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        margin-top: 20px;
    }

    .commitment-section-adv-item:hover .commitment-section-adv-item-icon {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .commitment-section-adv-item:hover .commitment-section-adv-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }
}


@media (min-width: 1600px) and (max-width: 1920px) {
    .commitment-section {
        padding: 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .commitment-section-item {
        display: flex;
        justify-content: space-between;
    }

    .commitment-section-item-left {
        width: 50%;
    }

    .commitment-section-item-left-img {
        width: 900px;
        height: 900px;
        border-radius: 50%;
        overflow: hidden;
    }

    .commitment-section-item-right {
        width: 50%;
        padding-top: 120px;
    }

    .commitment-section-item-right-up {
        display: flex;
        justify-content: end;
        margin-bottom: 30px;
        gap: 30px;
    }

    .commitment-section-item-right-up-des {
        display: flex;
    }

    .commitment-section-item-right-up-des h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 4rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-item-right-up-picture img {
        width: 50px;
    }

    .commitment-section-item-right-up-text {
        display: flex;
        margin-top: 20px;
        gap: 15px;
    }

    .commitment-section-item-right-up-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-item-right-down {
        margin: 100px 0 0 100px;
    }

    .commitment-section-item-right-down p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .commitment-section-logo-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .commitment-section-logo-item-text {
        margin-top: 20px;
        display: flex;
        gap: 15px;
    }

    .commitment-section-logo-item-text h1 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 2rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-logo-item-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        margin-top: 10px;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-adv {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .commitment-section-adv-item {
        width: 30%;
        padding: 60px;
        background-color: #262626;
        margin-bottom: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        text-align: center;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .commitment-section-adv-item:hover {
        background-color: #1a1a1a;
        transition: all 0.3s ease-in-out;
    }

    .commitment-section-adv-item-icon img {
        width: 80px;
    }

    .commitment-section-adv-item-text h3 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .commitment-section-adv-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        margin-top: 20px;
    }

    .commitment-section-adv-item:hover .commitment-section-adv-item-icon {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .commitment-section-adv-item:hover .commitment-section-adv-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .commitment-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .commitment-section-item-left-img {
        width: 100%;
        border-radius: 50%;
        overflow: hidden;
    }

    .commitment-section-item-right {
        padding-top: 80px;
    }

    .commitment-section-item-right-up {
        display: flex;
        justify-content: end;
        margin-bottom: 30px;
        gap: 30px;
    }

    .commitment-section-item-right-up-des {
        display: flex;
    }

    .commitment-section-item-right-up-des h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-item-right-up-picture img {
        width: 50px;
    }

    .commitment-section-item-right-up-text {
        display: flex;
        margin-top: 20px;
        gap: 15px;
    }

    .commitment-section-item-right-up-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        font-size: 0.6rem;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-item-right-down {
        margin-top: 50px;
    }

    .commitment-section-item-right-down p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .commitment-section-logo-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .commitment-section-logo-item img {
        width: 100px;
    }

    .commitment-section-logo-item-text {
        margin-top: 20px;
        display: flex;
        gap: 15px;
    }

    .commitment-section-logo-item-text h1 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 2rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-logo-item-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #d2d2d2;
        margin-top: 10px;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .commitment-section-adv {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .commitment-section-adv-item {
        width: 49%;
        padding: 20px;
        background-color: #262626;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        text-align: center;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .commitment-section-adv-item:hover {
        background-color: #1a1a1a;
        transition: all 0.3s ease-in-out;
    }

    .commitment-section-adv-item-icon img {
        width: 80px;
    }

    .commitment-section-adv-item-text h3 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.5rem;
    }

    .commitment-section-adv-item-text p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        margin-top: 20px;
    }

    .commitment-section-adv-item:hover .commitment-section-adv-item-icon {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }

    .commitment-section-adv-item:hover .commitment-section-adv-item-text {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
    }
}
/* 品牌承诺 */






/* 全景展示 */
@media screen and (min-width: 1921px) {
    #container {
        width: 100vw;
        height: 100vh;
    }

    #thumbnails {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 20px;
        /* 增加间距以容纳标题 */
        z-index: 1000;
    }

    .thumbnail:hover {
        transform: scale(1.1);
    }

    .thumbnail.active {
        border-color: #ff0000;
    }

    .thumbnail-container {
        text-align: center;
    }

    .thumbnail {
        width: 80px;
        height: 45px;
        cursor: pointer;
        border: 2px solid #fff;
        transition: all 0.3s;
        margin-bottom: 5px;
        /* 为标题留出空间 */
    }

    .thumbnail-title {
        color: white;
        font-size: 12px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin-top: 4px;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    #container {
        width: 100vw;
        height: 100vh;
    }

    #thumbnails {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 20px;
        /* 增加间距以容纳标题 */
        z-index: 1000;
    }

    .thumbnail:hover {
        transform: scale(1.1);
    }

    .thumbnail.active {
        border-color: #ff0000;
    }

    .thumbnail-container {
        text-align: center;
    }

    .thumbnail {
        width: 150px;
        height: 80px;
        cursor: pointer;
        border: 2px solid #fff;
        transition: all 0.3s;
        margin-bottom: 5px;
        /* 为标题留出空间 */
    }

    .thumbnail-title {
        color: white;
        font-size: 12px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin-top: 4px;
    }
}

/* 全景展示 */






/* 家装精品 */
@media screen and (min-width: 1921px) {
    .decoration-section {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    .decitem {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    
    .decitem.active {
        opacity: 1;
    }
    
    .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .decitem-box {
        position: absolute;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 80px;
        /* border-radius: 10px; */
        text-align: center;
        width: 80%;
        max-width: 600px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        cursor: pointer;
    }
    
    .decitem-box:hover {
        background: rgba(0, 0, 0, 1);
        transition: all 0.3s ease-in-out;
    }
    
    .decitem-box-title h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .decitem-box-des {
        margin-top: 30px;
    }
    
    .decitem-box-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }
    
    .decoration-switch {
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
    }
    
    .decoration-button {
        background: none;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .decoration-button img {
        width: 10px;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .decoration-section {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    .decitem {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    
    .decitem.active {
        opacity: 1;
    }
    
    .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .decitem-box {
        position: absolute;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 80px;
        /* border-radius: 10px; */
        text-align: center;
        width: 80%;
        max-width: 600px;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        cursor: pointer;
    }
    
    .decitem-box:hover {
        background: rgba(0, 0, 0, 1);
        transition: all 0.3s ease-in-out;
    }
    
    .decitem-box-title h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .decitem-box-des {
        margin-top: 30px;
    }
    
    .decitem-box-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }
    
    .decoration-switch {
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
    }
    
    .decoration-button {
        background: none;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .decoration-button img {
        width: 10px;
    }
}

@media screen and (max-width: 1200px) {
    .decoration-section {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    .decitem {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    
    .decitem.active {
        opacity: 1;
    }
    
    .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .decitem-box {
        position: absolute;
        right: 10%;
        bottom: 20px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 20px;
        /* border-radius: 10px; */
        text-align: center;
        width: 80%;
        --mask: radial-gradient(8px at 8px 8px, #0000 98%, #000) -8px -8px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        cursor: pointer;
    }
    
    .decitem-box:hover {
        background: rgba(0, 0, 0, 1);
        transition: all 0.3s ease-in-out;
    }
    
    .decitem-box-title h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .decitem-box-des {
        margin-top: 30px;
    }
    
    .decitem-box-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }
    
    .decoration-switch {
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
    }
    
    .decoration-button {
        background: none;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .decoration-button img {
        width: 10px;
    }
}
/* 家装精品 */





/* 收藏展览 */
@media screen and (min-width: 1921px) {
    #collbg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.5s ease;
    }
    
    .collect-box {
        position: fixed;
        bottom: 50px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 0 20px;
    }
    
    .collect-item {
        position: relative;
        width: 200px;
        height: 120px;
        cursor: pointer;
        overflow: hidden;
    }
    
    .collimg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .collmask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        transition: opacity 0.3s ease;
    }
    
    .colldes {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        transform: translate(-50%, -50%);
        text-align: center;
        transition: opacity 0.3s ease;
    }
    
    .colldes h4 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.5rem;
    }
    
    .active .collmask,
    .active .colldes {
        opacity: 0;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    #collbg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.5s ease;
    }
    
    .collect-box {
        position: fixed;
        bottom: 50px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 0 20px;
    }
    
    .collect-item {
        position: relative;
        width: 200px;
        height: 120px;
        cursor: pointer;
        overflow: hidden;
    }
    
    .collimg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .collmask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        transition: opacity 0.3s ease;
    }
    
    .colldes {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        transform: translate(-50%, -50%);
        text-align: center;
        transition: opacity 0.3s ease;
    }
    
    .colldes h4 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.5rem;
    }
    
    .active .collmask,
    .active .colldes {
        opacity: 0;
    }
}

@media screen and (max-width: 1200px) {
    .collect-section {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .collect-section img {
        height: 100%;
        object-fit: cover;
    }

    .collect-box {
        position: fixed;
        bottom: 50px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 5px;
        padding: 0 20px;
    }

    .collect-item {
        position: relative;
        width: 19%;
        height: 120px;
        cursor: pointer;
        overflow: hidden;
    }

    .collect-item img {
        height: 100%;
        object-fit: cover;
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
    }

    .collect-item .collmask {
        width: 100%;
        height: 100%;
        background-color: #00000073;
        position: absolute;
        left: 0;
        top: 0;
    }

    .collect-item .colldes {
        padding: 30px 10px;
        color: #fff;
        text-align: center;
    }

    .collect-item .colldes h4 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.2rem;
    }
}
/* 收藏展览 */







/* 新闻资讯 */
@media screen and (min-width: 1921px) {
    .article-section {
        padding: 200px 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .hot-article-box {
        display: flex;
        justify-content: space-between;
        background-color: #111111;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .hot-article-box:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-left {
        width: 50%;
        display: flex;
        overflow: hidden;
    }

    .hot-article-box-left img {
        width: 100%;
    }

    .hot-article-box-left:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-right {
        width: 50%;
        padding: 80px;
    }

    .hot-article-box-right-title {
        margin-bottom: 30px;
    }

    .hot-article-box-right-title a {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
    }

    .hot-article-box-right-date {
        display: flex;
        gap: 50px;
        margin-bottom: 20px;
    }

    .hot-article-box-right-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.3rem;
        font-family: 'Sim', sans-serif;
    }

    .hot-article-box-right-date-item i {
        font-size: 1.3rem;
    }

    .hot-article-box-right-des {
        margin-bottom: 50px;
    }

    .hot-article-box-right-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .hot-article-box-right-btn-item {
        position: relative;
    }

    .hot-article-box-right-btn-item-icon img {
        width: 180px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
    }

    .hot-article-box-right-btn-item:hover .hot-article-box-right-btn-item-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-right-btn-item-text {
        position: absolute;
        top: 50%;
        left: 40px;
        transform: translateY(-30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.5rem;
        z-index: 3;
    }

    .article-more {
        display: flex;
        flex-wrap: wrap;
        margin: 120px 0 80px 0;
        gap: 30px;
    }

    .article-more-item {
        width: 24%;
        background-color: #111111;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        margin-bottom: 50px;
    }

    .article-more-item-img {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }

    .article-more-item-content {
        padding: 30px;
    }

    .article-more-item-title a {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.7rem;
    }

    .article-more-item-title a:hover {
        color: #ff0000;
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-date {
        margin: 20px 0;
        display: flex;
        gap: 50px;
    }

    .article-more-item-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.1rem;
        font-family: 'Sim', sans-serif;
    }

    .article-more-item-date-item i {
        font-size: 1.1rem;
    }

    .article-more-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .article-more-item:hover .article-more-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .article-more-item-btn {
        margin-top: 50px;
    }

    .article-more-item-btn-item {
        position: relative;
    }

    .article-more-item-btn-icon img {
        width: 150px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
    }

    .article-more-item-btn-item:hover .article-more-item-btn-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-btn-text {
        position: absolute;
        top: 12px;
        left: 25px;
        font-family: 'Hungke', sans-serif;
        color: #fff;
        z-index: 3;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .article-section {
        padding: 200px 120px 120px 120px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .hot-article-box {
        display: flex;
        justify-content: space-between;
        background-color: #111111;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .hot-article-box:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-left {
        width: 50%;
        display: flex;
        overflow: hidden;
    }

    .hot-article-box-left img {
        width: 100%;
    }

    .hot-article-box-left:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-right {
        width: 50%;
        padding: 40px 60px;
    }

    .hot-article-box-right-title {
        margin-bottom: 30px;
    }

    .hot-article-box-right-title a {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
    }

    .hot-article-box-right-date {
        display: flex;
        gap: 50px;
        margin-bottom: 20px;
    }

    .hot-article-box-right-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.3rem;
        font-family: 'Sim', sans-serif;
    }

    .hot-article-box-right-date-item i {
        font-size: 1.3rem;
    }

    .hot-article-box-right-des {
        margin-bottom: 50px;
    }

    .hot-article-box-right-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .hot-article-box-right-btn-item {
        position: relative;
    }

    .hot-article-box-right-btn-item-icon img {
        width: 180px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
    }

    .hot-article-box-right-btn-item:hover .hot-article-box-right-btn-item-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-right-btn-item-text {
        position: absolute;
        top: 50%;
        left: 40px;
        transform: translateY(-30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.5rem;
        z-index: 3;
    }

    .article-more {
        display: flex;
        flex-wrap: wrap;
        margin: 120px 0 80px 0;
        gap: 30px;
    }

    .article-more-item {
        width: 24%;
        background-color: #111111;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        margin-bottom: 50px;
    }

    .article-more-item-img {
        width: 100%;
        height: 250px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }

    .article-more-item-content {
        padding: 30px;
    }

    .article-more-item-title a {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.7rem;
    }

    .article-more-item-title a:hover {
        color: #ff0000;
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-date {
        margin: 20px 0;
        display: flex;
        gap: 50px;
    }

    .article-more-item-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.1rem;
        font-family: 'Sim', sans-serif;
    }

    .article-more-item-date-item i {
        font-size: 1.1rem;
    }

    .article-more-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .article-more-item:hover .article-more-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .article-more-item-btn {
        margin-top: 50px;
    }

    .article-more-item-btn-item {
        position: relative;
    }

    .article-more-item-btn-icon img {
        width: 150px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
    }

    .article-more-item-btn-item:hover .article-more-item-btn-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-btn-text {
        position: absolute;
        top: 12px;
        left: 25px;
        font-family: 'Hungke', sans-serif;
        color: #fff;
        z-index: 3;
    }
}

@media screen and (max-width: 1200px) {
    .article-section {
        padding: 20px;
        background-image: url(/static/picture/slider2.jpg);
    }

    .hot-article-box {
        background-color: #111111;
        overflow: hidden;
        margin-top: 100px;
    }

    .hot-article-box:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-left {
        display: flex;
        overflow: hidden;
    }

    .hot-article-box-left img {
        width: 100%;
    }

    .hot-article-box-left:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-right {
        padding: 20px;
    }

    .hot-article-box-right-title {
        margin-bottom: 20px;
    }

    .hot-article-box-right-title a {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .hot-article-box-right-date {
        display: flex;
        gap: 50px;
        margin-bottom: 20px;
    }

    .hot-article-box-right-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.3rem;
        font-family: 'Sim', sans-serif;
    }

    .hot-article-box-right-date-item i {
        font-size: 1.3rem;
    }

    .hot-article-box-right-des {
        margin-bottom: 50px;
    }

    .hot-article-box-right-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .hot-article-box-right-btn-item {
        position: relative;
    }

    .hot-article-box-right-btn-item-icon img {
        width: 150px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
    }

    .hot-article-box-right-btn-item:hover .hot-article-box-right-btn-item-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .hot-article-box-right-btn-item-text {
        position: absolute;
        top: 50%;
        left: 35px;
        transform: translateY(-30%);
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.5rem;
        z-index: 3;
    }

    .hot-article-box-right-btn-item-text h4 {
        font-size: 1.2rem;
    }

    .article-more-item {
        background-color: #111111;
        margin-bottom: 20px;
    }

    .article-more-item-img {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }

    .article-more-item-content {
        padding: 20px;
    }

    .article-more-item-title a {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.7rem;
    }

    .article-more-item-title a:hover {
        color: #ff0000;
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-date {
        margin: 20px 0;
        display: flex;
        gap: 50px;
    }

    .article-more-item-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.1rem;
        font-family: 'Sim', sans-serif;
    }

    .article-more-item-date-item i {
        font-size: 1.1rem;
    }

    .article-more-item:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .article-more-item:hover .article-more-item-img img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-des p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .article-more-item-btn {
        margin-top: 20px;
    }

    .article-more-item-btn h4 {
        font-size: 1.2rem;
    }

    .article-more-item-btn-item {
        position: relative;
    }

    .article-more-item-btn-icon img {
        width: 150px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
    }

    .article-more-item-btn-item:hover .article-more-item-btn-icon img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.3s ease-in-out;
    }

    .article-more-item-btn-text {
        position: absolute;
        top: 9px;
        left: 37px;
        font-family: 'Hungke', sans-serif;
        color: #fff;
        z-index: 3;
    }
}
/* 新闻资讯 */




/* 新闻详情 */
@media screen and (min-width: 1921px) {
    .article-content-section {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
    }

    .article-content-section-left {
        width: 50%;
        overflow: hidden;
    }

    .article-content-section-left img {
        width: 100%;
    }

    .article-content-section-left:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .article-content-section-right {
        width: 50%;
        padding: 200px 80px 80px 80px;
        background-color: #111111;
    }

    .article-content-section-right:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .article-content-section-right h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
    }

    .article-content-section-right-date {
        display: flex;
        gap: 50px;
        margin: 20px 0;
    }

    .article-content-section-right-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.3rem;
        font-family: 'Sim', sans-serif;
    }

    .article-content-section-right-date-item i {
        font-size: 1.3rem;
    }

    .article-content-section-right-content p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .article-content-section-right-content-line {
        margin: 30px 0;
        border: 1px solid #5f5f5f1d;
    }

    .article-content-section-right-switch {
        display: flex;
        justify-content: space-between;
    }

    .article-content-section-right-switch a {
        font-family: 'Sim', sans-serif;
    }

    .article-content-section-right-switch a:hover {
        color: #ff0000;
        transition: all 0.3s ease-in-out;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .article-content-section {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
    }

    .article-content-section-left {
        width: 50%;
        overflow: hidden;
    }

    .article-content-section-left img {
        width: 100%;
    }

    .article-content-section-left:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .article-content-section-right {
        width: 50%;
        padding: 120px 80px 80px 80px;
        background-color: #111111;
        overflow-y: scroll;
    }

    .article-content-section-right:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .article-content-section-right h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
    }

    .article-content-section-right-date {
        display: flex;
        gap: 50px;
        margin: 20px 0;
    }

    .article-content-section-right-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.3rem;
        font-family: 'Sim', sans-serif;
    }

    .article-content-section-right-date-item i {
        font-size: 1.3rem;
    }

    .article-content-section-right-content p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .article-content-section-right-content-line {
        margin: 30px 0;
        border: 1px solid #5f5f5f1d;
    }

    .article-content-section-right-switch {
        display: flex;
        justify-content: space-between;
    }

    .article-content-section-right-switch a {
        font-family: 'Sim', sans-serif;
    }

    .article-content-section-right-switch a:hover {
        color: #ff0000;
        transition: all 0.3s ease-in-out;
    }
}

@media screen and (max-width: 1200px) {
    .article-content-section {
        width: 100%;
        overflow: hidden;
    }

    .article-content-section-left img {
        width: 100%;
    }

    .article-content-section-left:hover img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .article-content-section-right {
        padding: 20px;
        background-color: #111111;
    }

    .article-content-section-right:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .article-content-section-right h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 1.8rem;
    }

    .article-content-section-right-date {
        display: flex;
        gap: 50px;
        margin: 20px 0;
    }

    .article-content-section-right-date-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5f5f5f;
        font-size: 1.3rem;
        font-family: 'Sim', sans-serif;
    }

    .article-content-section-right-date-item i {
        font-size: 1.3rem;
    }

    .article-content-section-right-content p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        text-indent: 2em;
    }

    .article-content-section-right-content-line {
        margin: 30px 0;
        border: 1px solid #5f5f5f1d;
    }

    .article-content-section-right-switch {
        display: flex;
        justify-content: space-between;
    }

    .article-content-section-right-switch a {
        font-family: 'Sim', sans-serif;
    }

    .article-content-section-right-switch a:hover {
        color: #ff0000;
        transition: all 0.3s ease-in-out;
    }
}

/* 新闻详情 */




/* 招商加盟 */
@media screen and (min-width: 1921px) {
    .join-section {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .join-section-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -3;
    }

    .join-section-bg img {
        width: 100%;
        animation: zoomInOut 10s infinite;
    }

    .join-section-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.74);
        z-index: -2;
    }

    .join-section-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        background-color: #111111;
        display: flex;
        justify-content: space-between;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
    }

    .join-section-content:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .join-section-content-left {
        width: 50%;
        display: flex;
        overflow: hidden;
    }

    .join-section-content-left img {
        width: 100%;
    }

    .join-section-content:hover .join-section-content-left img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .join-section-content-right {
        width: 50%;
        padding: 80px;
    }

    .join-section-content-right-up {
        display: flex;
        justify-content: end;
        gap: 50px;
    }

    .join-section-content-right-up-slogan {
        display: flex;
        gap: 15px;
    }

    .join-section-content-right-up-slogan h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .join-section-content-right-up-logo-item img {
        width: 60px;
    }

    .join-section-content-right-up-logo-text {
        margin-top: 20px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .join-section-content-right-up-logo-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.6rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .join-section-content-right-up-logo-text h6 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.3rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        text-transform: uppercase;
    }

    .join-section-content-right-down {
        margin-top: 60px;
    }

    .join-section-content-right-down p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .join-section-content-right-down h3 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .join-section-content-right-down-item {
        margin: 30px 0;
    }

    .join-section-content-right-down-item-left ul li {
        list-style: none;
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .join-section-content-right-down-item-right {
        margin-top: 30px;
        display: flex;
        gap: 20px;
    }

    .join-section-content-right-down-item-right img {
        width: 80px;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .join-section {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .join-section-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -3;
    }

    .join-section-bg img {
        width: 100%;
        animation: zoomInOut 10s infinite;
    }

    .join-section-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.74);
        z-index: -2;
    }

    .join-section-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        background-color: #111111;
        display: flex;
        justify-content: space-between;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        width: 80%;
        height: 650px;
    }

    .join-section-content:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .join-section-content-left {
        width: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .join-section-content-left img {
        width: 100%;
    }

    .join-section-content:hover .join-section-content-left img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .join-section-content-right {
        width: 50%;
        padding: 80px;
    }

    .join-section-content-right-up {
        display: flex;
        justify-content: end;
        gap: 50px;
    }

    .join-section-content-right-up-slogan {
        display: flex;
        gap: 15px;
    }

    .join-section-content-right-up-slogan h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 3rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .join-section-content-right-up-logo-item img {
        width: 60px;
    }

    .join-section-content-right-up-logo-text {
        margin-top: 20px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .join-section-content-right-up-logo-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.6rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .join-section-content-right-up-logo-text h6 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.3rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        text-transform: uppercase;
    }

    .join-section-content-right-down {
        margin-top: 20px;
    }

    .join-section-content-right-down p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .join-section-content-right-down h3 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .join-section-content-right-down-item {
        margin: 30px 0;
    }

    .join-section-content-right-down-item-left ul li {
        list-style: none;
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .join-section-content-right-down-item-right {
        margin-top: 30px;
        display: flex;
        gap: 20px;
    }

    .join-section-content-right-down-item-right img {
        width: 80px;
    }
}

@media screen and (max-width: 1200px) {
    .join-section {
        width: 100%;
        overflow: hidden;
    }

    .join-section-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -3;
    }

    .join-section-bg img {
        height: 100%;
        animation: zoomInOut 10s infinite;
    }

    .join-section-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.74);
        z-index: -2;
    }

    .join-section-content {
        background-color: #111111;
    }

    .join-section-content:hover {
        background-color: #070707;
        transition: all 0.3s ease-in-out;
    }

    .join-section-content-left {
        display: flex;
        overflow: hidden;
    }

    .join-section-content-left img {
        width: 100%;
    }

    .join-section-content:hover .join-section-content-left img {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

    .join-section-content-right {
        padding: 20px;
    }

    .join-section-content-right-up {
        display: flex;
        justify-content: end;
        gap: 20px;
    }

    .join-section-content-right-up-slogan {
        display: flex;
        gap: 15px;
    }

    .join-section-content-right-up-slogan h1 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 5px;
    }

    .join-section-content-right-up-logo-item img {
        width: 60px;
    }

    .join-section-content-right-up-logo-text {
        margin-top: 20px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .join-section-content-right-up-logo-text h5 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.6rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
    }

    .join-section-content-right-up-logo-text h6 {
        font-family: 'Nanan', sans-serif;
        color: #fff;
        font-size: 0.3rem;
        writing-mode: vertical-rl;
        /* 文本从上到下，从右到左 */
        letter-spacing: 8px;
        text-transform: uppercase;
    }

    .join-section-content-right-down {
        margin-top: 60px;
    }

    .join-section-content-right-down p {
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
        text-indent: 2em;
    }

    .join-section-content-right-down h3 {
        font-family: 'Hungke', sans-serif;
        color: #fff;
        font-size: 2rem;
    }

    .join-section-content-right-down-item {
        margin: 30px 0;
    }

    .join-section-content-right-down-item-left ul li {
        list-style: none;
        font-family: 'Sim', sans-serif;
        color: #d2d2d2;
        font-size: 1.2rem;
    }

    .join-section-content-right-down-item-right {
        margin-top: 30px;
        display: flex;
        gap: 20px;
    }

    .join-section-content-right-down-item-right img {
        width: 80px;
    }
}
/* 招商加盟 */






/* 搜索 */
.search-section {
    width: 100%;
    height: 100vh;
    background-image: url(/static/picture/slider2.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-section-box {
    position: relative;


}

.search-section-box input {
    width: 600px;
    border-radius: 30px;
    background-color: #333;
    padding: 15px;
    border: none;
}

.search-section-box input:focus {
    outline: none;
    background-color: #fff;
}

.search-section-box button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: none;
    color: #5f5f5f;
    font-family: 'Sim', sans-serif;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    background: none;
}

.search-section-box button i {
    font-size: 2rem;
}

/* 搜索 */





/* 进度条容器样式 */
.fp-progress-nav {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 进度条点的样式 */
.fp-progress-dot {
    width: 10px;
    height: 10px;
    border: 1px solid #6f6f6f;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 当前section对应的进度条点高亮样式 */
.fp-progress-dot.active {
    background-color: #333;
    transform: scale(1.2);
}

/* 进度条容器样式 */





/*返回上一页*/
@media screen and (min-width: 1921px) {
    .page-button {
        position: fixed;
        bottom: 40px;
        right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        z-index: 2;
    }

    .page-button a {
        width: 50px;
        height: 50px;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #650102;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-button button {
        width: 50px;
        height: 50px;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #650102;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        cursor: pointer;
    }

    .page-button i {
        font-size: 1.2rem;
        color: #fff;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .page-button {
        position: fixed;
        bottom: 40px;
        right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        z-index: 2;
    }

    .page-button a {
        width: 50px;
        height: 50px;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #650102;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-button button {
        width: 50px;
        height: 50px;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #650102;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        cursor: pointer;
    }

    .page-button i {
        font-size: 1.2rem;
        color: #fff;
    }
}

@media screen and (max-width: 1200px) {
    .page-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        z-index: 2;
    }

    .page-button a {
        width: 45px;
        height: 45px;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #650102;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-button button {
        width: 45px;
        height: 45px;
        --mask: radial-gradient(5px at 5px 5px, #0000 98%, #000) -5px -5px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        background-color: #650102;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        cursor: pointer;
    }

    .page-button i {
        font-size: 1.2rem;
        color: #fff;
    }
}

/*返回上一页*/





/* 拍卖会 */
@media screen and (min-width: 1921px) {
    .auction-area {
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/slider2.jpg);
    }

    .auction-area video {
        margin-top: 300px;
        width: 100%;
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    .auction-area {
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/slider2.jpg);
    }

    .auction-area video {
        margin-top: 200px;
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .auction-area {
        width: 100%;
        height: 100vh;
        background-image: url(/static/picture/slider2.jpg);
    }

    .auction-area video {
        margin-top: 300px;
        width: 100%;
    }
}

/* 拍卖会 */



/* 精选展览 */
@media screen and (min-width: 1921px) {
    .premium-more {
        margin: 120px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .premium-more-item {
        width: 24%;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        margin-bottom: 40px;
    }
    
    .premium-more-item-img img {
        width: 100%;
    }
    
    .premium-more-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s;
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    .premium-more {
        margin: 120px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .premium-more-item {
        width: 24%;
        --mask: radial-gradient(25px at 25px 25px, #0000 98%, #000) -25px -25px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        margin-bottom: 40px;
    }
    
    .premium-more-item-img img {
        width: 100%;
    }
    
    .premium-more-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s;
    }
}

@media screen and (max-width: 1200px) {
    .premium-more {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .premium-more-item {
        width: 49%;
        margin-bottom: 8px;
    }
    
    .premium-more-item-img img {
        width: 100%;
    }
    
    .premium-more-item:hover img {
        transform: scale(1.1);
        transition: all 0.3s;
    }
}



@media screen and (min-width: 1921px) {
    .page-about-timeline-item {
        margin-bottom: 50px;
        padding: 35px;
        background-color: #272727;
        --mask: radial-gradient(15px at 15px 15px, #0000 98%, #000) -15px -15px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        height: 300px;
    }

    .page-about-timeline-item h1 {
        font-family: fantasy;
        color: #fff;
        font-size: 1.5rem;
    }

    .page-about-timeline-item-des {
        margin-top: 30px;
    }

    .page-about-timeline-item-des p {
        color: #808080;
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    .page-about-timeline-item {
        margin-bottom: 30px;
        padding: 35px;
        background-color: #272727;
        --mask: radial-gradient(15px at 15px 15px, #0000 98%, #000) -15px -15px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        height: 300px;
    }

    .page-about-timeline-item h1 {
        font-family: fantasy;
        color: #fff;
        font-size: 1.5rem;
    }

    .page-about-timeline-item-des {
        margin-top: 30px;
    }

    .page-about-timeline-item-des p {
        color: #808080;
    }
}

@media screen and (max-width: 1200px) {
    .page-about-timeline-item {
        margin-bottom: 50px;
        padding: 35px;
        background-color: #272727;
        --mask: radial-gradient(15px at 15px 15px, #0000 98%, #000) -15px -15px;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        overflow: hidden;
        height: 300px;
    }

    .page-about-timeline-item h1 {
        font-family: fantasy;
        color: #fff;
        font-size: 1.5rem;
    }

    .page-about-timeline-item-des {
        margin-top: 30px;
    }

    .page-about-timeline-item-des p {
        color: #808080;
    }
}

/* 精选展览 */





/* 全景展示 */
@media screen and (max-width: 1200px) {
    .panorama-section {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-image: url(/static/picture/slider2.jpg);
    }
}
/* 全景展示 */





.about-lql {
    background-color: #181818;
    padding: 20px;
    color: #fff;
}

.page-content-history-person {
    position: relative;
}

.about-lql-history-post {
    left: 20px;
    position: absolute;
    bottom: 20px;
}

.about-lql-history-text {
    margin-top: 30px;
}

.about-lql-history-text h1 {
    font-family: 'Hungke';
}

.about-lql-history-text-job ul li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-family: cursive;
}