@import url('./base.css');

/* 定义 @font-face 规则 */
@font-face {
    font-family: 'Butler Bold';
    /* 自定义字体名称 */
    src: url('../fonts/BUTLER_BOLD.OTF') format('opentype');
    /* 设置字体文件路径 */
    font-weight: bold;
    /* 设置字体粗细 */
    font-style: normal;
    /* 设置字体样式 */
}

.warp {
    max-width: 1595px;
    margin: 0 auto;
}
header .top{
    max-width: 1595px;
    margin: 0 auto;
    display:flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    padding: 5px 0;
}
header {
   
}

header i {
    cursor: pointer;
}

header .search {
    margin-right: 65px;
}

header .search i {
    font-size: 24px;
}

header .warp {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

header nav {
    position: relative;
}

header nav ul {
    display: flex;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 97px;
    font-size: 16px;

}

header nav ul a {
    text-transform: capitalize;
}

header nav .logo {
    position: absolute;
}

header nav ul li {
    padding: 40px 0;
}

header nav ul li:nth-of-type(4n) {
    margin-right: 247px
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    z-index: 2;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: 0.31s all;
}

.dropdown-menu li {
    padding: 10px 30px;
    background: #eee;
    min-width:100%;
    width: max-content;
}

header nav>ul>li:hover .dropdown-menu {
    transform: translateX(-50%) translateY(0px);
    visibility: visible;
    opacity: 1;
}

.dropdown-menu>li:hover {
    background: var(--color-primary);
    color: #fff;
    transform: rotateX(10deg) rotateY(20deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.button-3d {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
    perspective: 500px;
    /* 设置透视，使 3D 旋转更自然 */
    transform-style: preserve-3d;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 悬停时，按钮上移并旋转一点，阴影拉长 */
.button-3d:hover {
    transform: translateY(-5px) rotateX(10deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 悬停时，前侧面缩小，模拟抬起效果 */
.button-3d:hover::before {
    height: 5px;
    top: 100%;
    background: #963f00;
}

/* 悬停时，阴影变大 */
.button-3d:hover::after {
    top: 110%;
    height: 20px;
    filter: blur(8px);
}

/* 按下时，按钮下沉并减少阴影 */
.button-3d:active {
    transform: translateY(2px) rotateX(2deg);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* 按下时，前侧面变厚，模拟按压效果 */
.button-3d:active::before {
    height: 15px;
    top: 100%;
    background: #7a3000;
}

/* 按下时，阴影减小 */
.button-3d:active::after {
    top: 103%;
    height: 10px;
    filter: blur(3px);
}


.dropdown-menu>li:nth-of-type(4n) {
    margin: 0;
}

header nav .logo {
    width: 100px;
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
}

header .r {
    margin-left: auto;
    display: flex;
}

header .r .lang {
    margin-right: 30px;
    font-size: 16px;
}

header .r i {
    font-size: 24px;
}

.banner .swiper-slide img {
    width: 100%;
}

.index {
    .product {
        margin: 80px 0;
    }

    .product .title {
        position: relative;
    }

    .product .title h3 {
        font-size: 48px;
        font-family: 'Butler Bold'
    }

    .product .title h4 {
        font-size: 20px;
        color: #666666;
        font-weight: 400;
        letter-spacing: -1px;
    }

    .product .title a {
        position: absolute;
        right: 0;
        top: 20px;
        width: 142px;
        background-color: var(--color-primary);
        color: #fff;
        border-radius: 20px;
        height: 44px;
    }

    .product .title a:hover {
        background-color: rgb(116, 56, 36)
    }

    .swiper-product {
        margin-top: 56px;
        padding-bottom: 50px;
        height:1500px;
    }

    .swiper-product .swiper-slide h2 {
        margin-top: 40px;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
        text-align: center;
    }

    .swiper-product img {
        width: 100%;
    }

    .swiper-product .hot {
        position: absolute;
        top: 15px;
        left: 15px;
        background-color: var(--color-primary);
        color: #fff;
        padding: 5px 15px;
        border-radius: 15px;
    }

    .swiper-scrollbar {
        margin-top: 20px;
    }

    .swiper-scrollbar-drag {
        background-color: var(--color-primary);
    }

    .category {
        padding: 86px 40px;
        background-color: var(--color-primary);
    }

    .category .title {
        position: relative;
    }

    .category .title h3 {
        font-size: 61px;
        font-family: 'Butler Bold';
        color: #fff;
        line-height: 1;
        margin-bottom: 60px;
        text-align: center;
    }

    .category .swiper-slide {
        position: relative;
    }

    .category .swiper-slide img {
        width: 100%;
    }

    .category .swiper-slide h2 {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1.5;
        padding: 60px;
        width: 100%;
        bottom: 0;
        left: 0;
        top: 0;
        font-size: 60px;
        font-family: 'Butler Bold';
        text-transform: uppercase;
        color: #fff;
        pointer-events: none;
        text-align: center;
    }

    .about {
        padding: 80px 0;
    }

    .about .warp {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .about .l {
        width: 54%;
        flex-shrink: 0;
    }

    .about .r {
        padding-left: 120px;
        width: 50%;
        flex-shrink: 0;
    }

    .about .r h2 {
        font-size: 59px;
        font-weight: 400;
        line-height: 1;
        margin-bottom: 20px;
        text-transform: capitalize;
    }

    .about .r .desc {
        line-height: 2;
    }

    .about .r ul {
        margin-top: 40px;
        margin-bottom: 40px;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .about .r ul li {
        width: 40%;
        color: #333333;
        flex-shrink: 0;
    }

    .about .r ul .count {
        font-size: 41px;
        font-family: 'Butler Bold';
    }

    .about .r ul i {
        font-size: 22px;
        font-style: normal;
    }

    .about .r .more {
        font-size: 18px;
        width: 195px;
        height: 61px;
        color: #fff;
        background-color: var(--color-primary);
    }

    .about .r .more:hover {
        background-color: rgb(116, 56, 36);
    }

    .honor .title h3 {
        font-size: 48px;
        font-weight: 400;

        margin-bottom: 60px;
    }

    .swiper-honor {
        padding: 40px 0;
    }

    .swiper-honor .swiper-slide {
        box-shadow: 0 0 10px 0 #ddd;

    }

    .swiper-honor .swiper-slide img {
        width: 100%;
    }

    .swiper-honor .swiper-slide:hover {

        box-shadow: 0 0 20px 0 #ddd;

    }

    .form {
        margin-top: 80px;
        height: 554px;
        background: url(../images/form.jpg) no-repeat center / cover;
        position: relative;
        background-attachment: fixed;
    }

    .form .formbox {
        transition: .2s all;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translate(50%, -50%);
        width: 520px;
        height: 359px;
        background-color: #fff;
        padding: 50px;
        background: rgb(255 255 255 / 60%);
        backdrop-filter: blur(10px);
    }

    .form .formbox h3 {
        font-size: 36px;
        font-weight: 400;
        font-family: 'Butler Bold';
    }

    .form .formbox .input {
        position: relative;
        margin-top: 30px;
    }

    .form .formbox input {
        width: 100%;
        height: 42px;
        border: none;
        background: none;
        padding: 0 20px;
        outline: none;
        border: 1px solid var(--color-primary);
        border-radius: 30px;
    }

    .form .formbox button {
        position: absolute;
        top: 0;
        right: 0;
        width: 164px;
        height: 42px;
        background-color: var(--color-primary);
        color: #fff;
        border-radius: 30px;
        border: none;
    }

    .form .title {
        font-size: 48px;
        font-weight: 400;
        margin-bottom: 30px;
    }

    .formbox:focus-within {
        transform: translate(50%, -50%) scale(1.1);
    }

    .news {
        padding: 80px 0;
    }

    .news .title {
        margin-bottom: 60px;
    }

    .news .title h3 {
        font-size: 18px;
        font-weight: 400;
        color: #cc6633;
        text-align: center;
    }

    .news .title h2 {
        font-size: 48px;
        font-weight: 400;
        font-family: 'Butler Bold';
        text-align: center;
    }

    .news .wenzi {
        background: #5b361a2e;
        padding: 20px;
        height: 235px;
        position: relative;
    }

    .news .wenzi h2 {
        font-size: 21px;
        font-weight: 400;
        text-align: left;
        margin-bottom: 20px;
    }

    .news .wenzi .more {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .news .wenzi .more a {
        font-size: 12px;
        border-radius: 20px;
        width: 77px;
        height: 31px;
        color: #fff;
        background-color: var(--color-primary);
    }
}


footer {
    height: 568px;
    background-color: var(--color-primary);
    color: #fff;
    position: relative;
}

footer .warp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 80px;
}

footer dt {
    font-size: 16px;
    color: #cc9966;

    margin-bottom: 20px;
    text-transform: capitalize;
}

footer dd {
    line-height: 2;
    margin-bottom: 10px;
}

footer .Copyright {
    position: absolute;
    bottom: 10px;
    text-align: center;
    left: 0;
    width: 100%;
}

footer .follow dd {
    display: flex;
    gap: 20px;
}

footer .follow i {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #fff;
    color: var(--color-primary);
    display: flex;
    justify-self: center;
    align-items: center;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

/** 面包屑*/
.breadcrumb {
    position: relative;
    padding: 15px 20px;
    border-radius: 8px;

}

/* 🏗️ 内部容器，使用 Flexbox 让它对齐 */
.breadcrumb-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 左右对齐 */
    color: white;
}

/* 🚀 面包屑路径 */
.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #999;
    letter-spacing: 1px;
}

/* 🔗 面包屑链接样式 */
.breadcrumb-item .breadcrumb-link {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

.breadcrumb-item .breadcrumb-link:hover {
    color: #ffeb3b;
}

/* ➡️ 面包屑图标 */
.breadcrumb-item i {
    margin: 0 5px;
    font-size: 14px;
    color: #ffeb3b;
}

/* 🎯 当前页面标题 */
.breadcrumb-title {
    font-size: 52px;
    font-weight: bold;
    font-family: 'Butler Bold';
}

/* 📱 移动端优化 */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 10px 15px;
        border-radius: 0;
    }

    .breadcrumb-item {
        font-size: 14px;
    }

    .breadcrumb-title {
        font-size: 16px;
    }
}

/** 内页下拉菜单*/
.classifcation {
    display: inline-flex;
    position: absolute;
    right: 0;
    top: 0;
}

.classifcation ul li {
    position: relative;
}

.classifcation ul li a.classifcationa {
    border: 1px solid var(--color-primary);
    display: block;
}

.classifcation ul li:hover a.classifcationa {
    border-bottom: 1px solid transparent;
}

.classifcation ul li ul {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% - 1px);
    z-index: 1000;
    width: 100%;
    background-color: #fff;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-size: 12px;
}


.classifcation ul li:hover ul {
    display: block;
    border: 1px solid var(--color-primary);
    border-top: none;
    padding: 0.25rem 0;
}

.classifcation ul li ul li {
    line-height: 2.4rem;
    text-align: right;
    border-bottom: 1px solid #EEF;
    color: #333;
    position: relative;
}

.classifcation ul li ul li:hover:after {
    width: 100%;
}

.classifcation ul li ul li:after {
    content: "";
    display: block;
    transition: width .3s ease;
    width: 0%;
    height: 3px;
    background: var(--color-primary);
    position: absolute;
    bottom: -3px;
    left: 0px;
}
/** page_abot**/
.single_page.about{color: #434342;font-weight: 400;font-size: 3rem;position: relative;margin-bottom: 80px}
.single_page .title{font-family: 'Butler Bold';text-transform: uppercase}
.single_page .content {max-width: 1200px;margin: 16px auto 0;line-height: 2rem;font-size: 16px;}
.single_page.culture{display: flex;justify-content: space-between;align-items: center;width: 100vw;position: relative;left: 50%;transform: translateX(-50%)}
.single_page.culture .l{width: 50%; align-self: stretch;padding:3rem;background:#f2ede7;display: flex;flex-direction: column;text-align: left;    justify-content: center;}
.single_page.culture .r{width: 50%;flex-shrink: 0}
.single_page.culture .title{font-size: 3rem}
.aboutico{margin: 96px 0;}
.page-about .aboutico{display: flex;justify-content: space-evenly;align-items: flex-start;gap:80px;}
.page-about .icon-item{display: flex;align-items:center;flex-direction: column;flex: 1}
.icon-item .txt .title {padding: 18px;font-size: 1.125rem;}
.environment{width: 100vw;position: relative;left: 50%;transform: translateX(-50%);background:#f2ede7;padding: 80px 5% }
.single_page.environment .title{position: relative;    font-size: 3rem;margin-bottom: 60px;}
.single_page.environment .swiper-slide  img{display: block;width: 100%;}
.single_page.environment .swiper-slide  .title{font-size: 16px;padding: 10px;margin: 0;background: var(--color-primary);color: #fff}
.customer {width: 100vw;position: relative;left: 50%;transform: translateX(-50%);background:#f2ede7;padding: 0px 0% }
.single_page.customer .title{position: relative;    font-size: 3rem;margin-bottom: 60px;}
.single_page.customer .swiper-slide  img{display: block;width: 100%;}
.single_page.customer .swiper-slide  .title{font-size: 16px;padding: 10px;margin: 0;background: var(--color-primary);color: #fff;display: none}
/** category*/
.category,
.list-product,
.category_product {
    .imggroup-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 一行 4 列 */
        gap: 20px;
        /* 设置间距 */
        padding: 20px;
        list-style: none;
        /* 去掉默认的 li 样式 */
    }

    .imggroup {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        background: #fff;
        transition: transform 0.3s ease;
    }

    .imggroup:hover {
        transform: scale(1.05);
        /* 悬停时放大 */
    }

    .imggroup-img img {
        width: 100%;
        object-fit: cover;
        /* 确保图片填充 */
    }

    .imggroup-text {
        padding: 10px;
    }

    .imggroup-text .title {
        font-size: 16px;
        font-weight: bold;
        margin: 5px 0;
    }

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

    .imggroup-text .title a:hover {
        color: var(--color-primary);
    }

    .latest-post-img {
        --ratio: 100%;
        position: relative;
        height: 0;
        padding-bottom: var(--ratio);
        top: 0;
        display: block;
    }
}



/** 新闻列表页 */


.blog-item-wrapper {
    /* --- 全局基础样式 --- */

    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;


    .blog-item-wrapper:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    /* --- 左中右布局 --- */
    .blog-item-text {
        display: flex;
        align-items: stretch;
        padding: 15px;
    }

    /* --- 左侧：时间栏 --- */
    .l {
        flex: 0 0 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .time {

        padding: 10px;
        border-radius: 8px;
        text-align: center;
    }

    .time h3 {
        font-size: 33px;
        font-weight: bold;
        color: var(--color-primary);
        margin: 0;
    }

    .time p {
        font-size: 14px;
        color: #666;
        margin: 0;
    }

    /* --- 中间：图片区域 --- */
    .m {
        flex: 0 0 350px;
        position: relative;
        padding: 0 20px;
    }


    .m .pic {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .m .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .m a:hover .pic img {
        transform: scale(1.05);
    }

    /* --- 右侧：内容部分 --- */
    .r {
        flex: 1;
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .txt .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .txt .title a {
        color: #333;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .txt .title a:hover {
        color: var(--color-primary);
    }

    .description {
        font-size: 14px;
        color: #777;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* --- "More" 按钮 --- */
    .item-more a {
        font-size: 14px;
        color: var(--color-primary);
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s ease;
    }

    .item-more a:hover {
        color: #d84315;
    }

    /* --- 元数据（作者、日期、点赞等） --- */
    .meta-tags {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .meta-tags i {
        margin-right: 5px;
    }

    /* --- 响应式适配 --- */
    @media (max-width: 768px) {
        .blog-item-text {
            flex-direction: column;
        }

        .l {
            display: none;
            /* 移动端隐藏时间 */
        }

        .m {
            flex: 1;
            height: 180px;
        }

        .m .pic {
            height: 100%;
        }

        .r {
            padding-left: 0;
            padding-top: 10px;
        }
    }

}


/** 产品详情 **/
.zoomContainer {
    z-index: 99999;
}

.product__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

/* 容器整体布局 */
.product__details__pic {
    width: 50%;
    max-width: 600px;
    position: relative;
}

/* 主图 Swiper */
.productImageSwiper {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.productImageSwiper .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.productImageSwiper .swiper-slide img:hover {
    transform: scale(1.05);
}

.productImageSwiper img {
    cursor: zoom-in;
}

/* 缩略图 Swiper */
.thumbnailSwiper {
    margin-top: 10px;
}

.thumbnailSwiper .swiper-slide {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.thumbnailSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.thumbnailSwiper .swiper-slide-thumb-active {
    transform: scale(1.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-primary);
}

/* Swiper 按钮样式 */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-primary);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease-in-out;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--color-primary);
    color: #fff;
}

[thumbsSlider] {
    padding: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}

/* 隐藏无效的按钮 */
.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 右侧 文字区域 */
.product__details__text {
    width: 50%;
    flex-grow: 1;
}

.product__details__text h3 {
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Butler Bold';
}

.product__details__rating {
    margin-bottom: 15px;
}

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

.product__details__price {
    font-size: 22px;
    font-weight: bold;
    color: #d9534f;
    margin-bottom: 15px;
}

.product__details__text p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.btn-primary {
    display: inline-block;
    padding: 10px 20px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.btn-primary:hover {
    background: #0056b3;
}

/* 产品参数 */
.product__details__attr {
    list-style: none;
    padding: 0;
}

.product__details__attr li {
    margin-bottom: 8px;
    font-size: 16px;
}

.product__details__attr b {
    font-weight: bold;
    margin-right: 5px;
}

/* 分享图标 */
.share {
    margin-top: 10px;
}

.share a {
    font-size: 22px;
    color: #333;
    margin-right: 10px;
    transition: color 0.3s;
}

.share a:hover {
    color: var(--color-primary);
}

/* 产品详情Tab */
.product__details__tab {
    margin-top: 40px;
}

.product__details__tab .nav-tabs {
    border-bottom: 2px solid #ddd;
}

.product__details__tab .nav-link {
    font-size: 16px;
    color: #333;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

.product__details__tab .nav-link.active {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.product__details__tab__desc {
    padding: 20px 0;
    font-size: 16px;
    line-height: 1.6;
}

.product__details__text {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.product__details__text h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.product__details__rating {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
}

.product__details__rating a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: bold;
    display: flex;
    align-items: center;
}

.product__details__rating a i {
    margin-right: 5px;
    font-size: 16px;
}

.product__details__rating span {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
}

.product__details__rating span i {
    margin-right: 5px;
    font-size: 16px;
}

.product__details__price {
    font-size: 20px;
    font-weight: bold;
    color: #ff4500;
    margin-bottom: 15px;
}

.product__details__text p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.product__details__attr {
    list-style: none;
    padding: 0;
}

.product__details__attr li {
    font-size: 14px;
    color: #444;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.product__details__attr li:last-child {
    border-bottom: none;
}

.product__details__attr b {
    font-weight: bold;
    color: #222;
}

/* 分享按钮美化 */
.share {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.share a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* 统一容器样式 */
.project-area.home-product {
    padding-top: 0;
    padding-bottom: 40px;
}

/* 产品详情选项卡 */
.product__details__tab {
    padding-top: 0;
    padding-bottom: 40px;
    text-align: center;
}

.product__details__tab .nav-tabs {
    border-bottom: none;
    display: inline-flex;
    gap: 15px;
}

.product__details__tab .nav-item .nav-link {
    background: none;
    border: none;
    font-size: 18px;
    color: #333;
    font-weight: 600;
    padding: 8px 15px;
    transition: all 0.3s ease-in-out;
}

.product__details__tab .nav-item .nav-link.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

/* 产品列表区域 */
.property-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

/* 产品项 */
.property-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
}

.property-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* 产品图片 */
.pi-pic {
    position: relative;
    width: 100%;
    padding-top: var(--ratio);
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 分类标签 */
.pi-pic .label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
}

/* 产品文本信息 */
.pi-text {
    padding: 15px;
    text-align: center;
}

.pi-text h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pi-text h5 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.pi-text h5 a:hover {
    color: var(--color-primary);
}

/* 价格显示 */
.pt-price {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.pt-price.text-danger {
    color: #e74c3c;
}

.pt-price.text-warning {
    color: #f39c12;
}

/* 产品描述 */
.pi-text .desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 收藏图标 */
.heart-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #e74c3c;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s ease-in-out;
}

.heart-icon:hover {
    background: rgba(255, 255, 255, 1);
}

/* 响应式优化 */
@media (max-width: 768px) {
    .property-item {
        width: 100%;
    }

    .product__details__tab .nav-tabs {
        flex-direction: column;
        align-items: center;
    }
}

/** 新闻详情***************************************************/

.viewbox {
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.showtitle {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.showsubtitle {
    font-size: 14px;
    color: #777;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.showsubtitle span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.showsubtitle a {
    color: var(--color-primary);
    text-decoration: none;
}

.fontZoom {
    margin-top: 15px;
}

.page {
    text-align: center;
}

.shangxia {
    margin-top: 20px;
}

.bc-related-post {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    font-size: 14px;
}

.bc-related-post a {
    color: var(--color-primary);
    text-decoration: none;
}

.likearticle {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.likearticletitle h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    padding-bottom: 5px;
}

.likearticlelist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.likearticlelist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
}

.likearticlelist a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.likearticlelist a:hover {
    color: var(--color-primary);
}

@media (max-width: 600px) {
    .showsubtitle {
        flex-direction: column;
        text-align: center;
    }
}

/******文章编辑器文字优化***************************************************/
.main-content {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    line-height: 1.8;
    color: #333;
}

.main-content h1,
.main-content h2,
.main-content h3 {
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.main-content h1 {
    font-size: 32px;
}

.main-content h2 {
    font-size: 26px;
}

.main-content h3 {
    font-size: 22px;
}

.main-content p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #555;
}

.main-content ul,
.main-content ol {
    padding-left: 20px;
    margin-bottom: 20px;
    color: #555;
}

.main-content ul li,
.main-content ol li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.main-content a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-content a:hover {
    color: #0056b3;
}

.main-content blockquote {
    padding: 15px;
    margin: 20px 0;
    border-left: 5px solid var(--color-primary);
    background-color: #f9f9f9;
    font-style: italic;
    color: #555;
}

.main-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
    border-radius: 8px;
}

.main-content pre {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    overflow-x: auto;
    margin-bottom: 20px;
}

.main-content code {
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #c7254e;
}

.main-content hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}

@media (max-width: 600px) {
    .main-content {
        padding: 15px;
    }

    .main-content h1 {
        font-size: 28px;
    }

    .main-content h2 {
        font-size: 22px;
    }

    .main-content h3 {
        font-size: 18px;
    }

    .main-content p {
        font-size: 14px;
    }
}

/******文章编辑器文字优化结束***************************************************/


/*****联系我们****************************************************************/
#map {height: 500px;width: 100vw;left: 50%;transform: translateX(-50%);}
.page_contact .cotact_info_item .iconfont {font-size: 48px;color: var(--color-primary);}
.cotact_info_item {text-align: center;background-color: rgb(255, 255, 255);margin-bottom: 30px;padding: 51px 80px 21px;border-radius: 5px;transition: 0.5s;border-width: 2px;border-style: solid;border-color: rgb(247, 243, 237);border-image: initial;height: 100%;}
.contact_warpper_content h3 {font-size: 22px;margin: 24px 0px 10px;}
.contact_warpper_content p{font-size: 17px;line-height: 26px;color: #5d5f62;font-weight: 400;font-family: "Cabin";transition: 0.5s;}
.cotact_info_item:hover {filter: drop-shadow(rgba(177, 177, 177, 0.3) 0px 10px 27px);border-color: rgb(255, 255, 255);}


.contact_warpper {background: #edf5f6;padding: 60px 60px 60px;}}
.section_title h4 {margin-bottom: 14px;font-size: 18px;color: #3dc595;font-weight: 500;}
.section_title h1 {font-size: 46px;line-height: 56px;color: #1a1a1a;font-weight: 700;}
.form-box input {border-radius: 0;transition: 0.5s;background: transparent !important;border: 1px solid #acacac4f;color: #1e1e1e;outline: 0;width: 100%;height: 60px;position: relative;margin-bottom: 20px;padding: 0 21px;}
.form-box.message textarea {color: #232323;transition: 0.5s;background: transparent !important;border: 1px solid #acacac4f;outline: 0;width: 100%;height: 120px;position: relative;padding: 9px 19px;border-radius: 0;}
.contact-form button {display: block;border-radius: 0;text-align: center;font-size: 16px;text-transform: uppercase;color: #ffffff;font-weight: 500;font-family: "Cabin";width: 100%;border: transparent;padding: 16px 0;margin-top: 13px;position: relative;z-index: 1;transition: 0.5s;background: var(--color-primary);}
.contact-form button:hover{opacity: 0.8;filter: drop-shadow(rgba(177, 177, 177, 0.3) 0px 10px 27px);}
.form-captcha{width: 200ppx;height: 50px;border: 1px solid #acacac4f;padding: 10px;background: none;}
/****************************通用list***************************/

@layer components {
  .text-primary {
    color: var(--color-primary);
  }
}
/* 动态效果：悬停时的缩放和阴影效果 */
.latest-post {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.latest-post:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.latest-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保证图片覆盖并且不失真 */
    transition: transform 0.3s ease-in-out;
}

.latest-post:hover .latest-post-img {
    transform: scale(1.1);
}

/* 标题样式 */
.post-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 20px 0;
    transition: color 0.3s ease;
    text-align: center;
}

.latest-post-img {
    --ratio: 100%;
    position: relative;
    height: 0;
    padding-bottom: var(--ratio);
    top: 0;
    display: block;
}

.latest-post-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-title a {
    color: inherit;
    text-decoration: none;
}

.latest-post:hover .post-title {
    color: #00ace6;
    /* 鼠标悬停时标题变色 */
}


/* 给水波效果的伪元素添加 pointer-events: none，避免它干扰点击事件 */
.latest-post-media::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: rgba(0, 172, 238, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 2s ease-out;
    animation-delay: var(--time);
    visibility: hidden;
    pointer-events: none;
    /* 使水波效果不干扰点击 */
}

.latest-post-media:hover::after {
    animation: ripple 2s infinite ease-out;
}

/* 确保图片和链接可以响应点击 */
.latest-post-media {
    position: relative;
    display: block;
    pointer-events: none;
    /* 禁止元素本身响应点击事件 */
    overflow: hidden;
}

.latest-post-media .latest-post-img {
    pointer-events: auto;
    /* 让链接可以响应点击 */
}

/* 确保图片本身也可以响应点击事件 */
.latest-post-media img {
    pointer-events: auto;
    /* 使图片可以点击 */
}

.list .col,
.list-image .col {
    width: 100%;
    max-width: calc(25% - 30px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes ripple {
    0% {
        visibility: visible;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}


/*****************************分页开始**************************************/



.text-center {
    text-align: center;
    margin: 0 auto;
}

.pagination-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
}

.pagination li {
    margin:3px;
}

.pagination li a,
.pagination li span {
    display: inline-block;
    padding: 1px 12px;
    border: 1px solid var(--color-border, #e5e5e5);
    background: var(--color-bg, #fff);
    color: var(--color-text, #333);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    min-width: 36px;
    text-align: center;
    border-radius: 4px;
}

.pagination li a:hover {
    background: var(--color-primary, #ff9800);
    color: var(--color-white, #fff);
    border-color: var(--color-primary, #ff9800);
}

.pagination li.active span {
    background: var(--color-primary, #ff9800);
    color: var(--color-white, #fff);
    font-weight: bold;
    border-color: var(--color-primary, #ff9800);
}

.pagination li.disabled span {
    background: var(--color-bg-light, #f7f7f7);
    color: var(--color-muted, #bbb);
    cursor: not-allowed;
    border-color: var(--color-border, #e5e5e5);
}

/* 分页信息 */
.pagination_info {
    display: none;
    font-size: 14px;
    color: var(--color-muted, #777);
    margin-left: 15px;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        gap: 2px;
    }

    .pagination li a,
    .pagination li span {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 30px;
    }

    .pagination_info {
        font-size: 12px;
    }
}

/*****************************分页结束**************************************/


/*****************************搜索开始**************************************/

/* 标题整体样式 */
.search {
    .title {
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
        color: var(--color-primary, #007BFF);
        text-align: center;
        /* 改成 left 可左对齐 */
        position: relative;
        padding: 10px 0;
        margin: 0 auto;
        display: inline-block;
        inset: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 添加左右装饰线条 */
    .title::before,
    .title::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 50px;
        /* 线条长度 */
        height: 2px;
        /* 线条厚度 */
        background-color: var(--color-primary, #007BFF);
        /* 线条颜色 */
    }

    .title::before {
        left: 111%;
    }

    .title::after {
        right: 111%;
    }

    /* 小屏幕优化 */
    @media (max-width: 768px) {

        .title::before,
        .title::after {
            width: 30px;
        }
    }
}

.search-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 40px;

    .sidebar {

        width: 250px;
        /* 适当调整宽度 */
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        font-family: Arial, sans-serif;
        margin-right: 50px;
    }

    .widget-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        border-bottom: 2px solid var(--color-primary);
        /* 蓝色下划线 */
        padding-bottom: 8px;
        margin-bottom: 15px;
    }

    .service-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .service-menu li {
        margin-bottom: 10px;
    }

    .service-menu li a {
        display: block;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 16px;
        color: #333;
        background: #f8f9fa;
        transition: all 0.3s ease-in-out;
    }

    .service-menu li a:hover {
        background: var(--color-primary, #007BFF);
        color: #fff;
        text-decoration: none;
    }

    .service-menu li.active a,
    .service-menu li.currentstyle a {
        background: var(--color-primary, #007BFF);
        color: #fff;
        font-weight: bold;
    }

    .search-item-list {
        flex: 1;
    }

    /* 搜索结果整体容器 */
    .search-item-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        /* 增加间距 */
        padding: 10px;
    }

    /* 单个搜索结果 */
    .blog-item {
        background: #fff;
        border-radius: 10px;
        /* 圆角 */
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease-in-out;
    }

    .blog-item:hover {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    /* 文字区域 */
    .bi-text h4 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .bi-text h4 a {
        color: var(--color-primary, #007BFF);
        text-decoration: none;
        transition: color 0.3s;
    }

    .bi-text h4 a:hover {
        color: #0056b3;
        text-decoration: underline;
    }

    /* 搜索关键词高亮 */
    hkcms\:color {
        color: #d9534f;
        /* 红色高亮 */
        font-weight: bold;
    }

    /* 信息列表 */
    .bi-text ul {
        list-style: none;
        padding: 0;
        margin: 10px 0;
        display: flex;
        gap: 15px;
        font-size: 14px;
        color: #666;
    }

    .bi-text ul li {
        display: flex;
        align-items: center;
    }

    .bi-text ul i {
        margin-right: 5px;
        color: var(--color-primary, #007BFF);
    }

    /* 描述文本 */
    .desc {
        color: #555;
        font-size: 15px;
        line-height: 1.6;
        margin-top: 8px;
    }

    /* 阅读更多按钮 */
    .read-more {
        display: inline-flex;
        align-items: center;
        color: var(--color-primary, #007BFF);
        font-weight: bold;
        text-decoration: none;
        margin-top: 10px;
        transition: all 0.3s ease-in-out;
    }

    .read-more i {
        margin-left: 5px;
        transition: transform 0.3s;
    }

    .read-more:hover {
        color: #0056b3;
    }

    .read-more:hover i {
        transform: translateX(5px);
    }

}


/*****************************搜索结束**************************************/



/*****************************首页baner开始**************************************/

/* 轮播图区域 */
.banner-area {
    position: relative;
    width: 100%;
    height: 550px;
    /* 控制高度，可根据需要调整 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

/* 添加黑色透明遮罩 */
.banner-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* 黑色半透明 */
}

/* 文字区域 */
.banner-text {
    position: relative;
    text-align: center;
    z-index: 2;
}

/* 标题样式 */
.banner-title {
    font-size: 42px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    padding: 10px 20px;
    display: inline-block;
    font-family: 'Butler Bold';
    border-bottom: 3px solid var(--color-primary);
    /* 蓝色下划线点缀 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .banner-area {
        height: 200px;
        /* 移动端高度缩小 */
    }

    .banner-title {
        font-size: 28px;
        /* 移动端标题稍小 */
        letter-spacing: 1px;
    }
}


/*****************************首页baner结束**************************************/

@media (max-width: 768px) {
    body{
        box-sizing: border-box;
        padding:60px 0 0px;
        overscroll-behavior: none; /* 防止滑动回弹 */
        -webkit-overflow-scrolling: touch; /* iOS 滑动流畅 */
        touch-action: manipulation;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .banner-title{border: none}
    .pi-text h5 a{font-size: 12px}
    .index .layui-layer{width: 100vw !important;}
    .single_page.about{font-size: 20px}
    .single_page.culture{flex-wrap: wrap}
    .single_page.culture .l,.single_page.culture .r{width: 100%}
    .single_page.culture .l{padding: 10px}
    .single_page.culture .title{font-size: 20px}
    .page-about .aboutico{overflow: auto;scroll-behavior: smooth;margin: 0;padding: 40px 0}
    .page-about .icon-item{flex-shrink: 0;flex: none;width: 100vw}
    .environment{padding: 20px}
    .single_page.environment .title{font-size: 20px}
    .single_page.environment .title{margin-bottom: 20px}
    .single_page.customer .title{font-size: 20px}
    header {
        height: 60px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
    }

    .xymob-head {
        position: absolute;
        top: 0;
        z-index: 999999;
        width: 100%;
        left: 0;
        right: 0;
        background: #eee;
    }

    .xymob-head-box {
        position: relative;
        height: 60px;
    }

    .xymob-head-box .xymob-logo {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .xymob-head-box .xymob-logo h1,
    .xymob-head-box .xymob-logo a {
        display: inline;
        font-size: 0;
    }

    .xymob-head-box .xymob-logo img {
        width: 78px;
        mix-blend-mode: multiply;
    
    }
    

    .xymob-navbtn {
        position: absolute;
        z-index: 9;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto 0 auto 27px;
        width: 30px;
        height: 20px;
    }

    .xymob-navbtn span,
    .xymob-navbtn:after,
    .xymob-navbtn:before {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--color-primary);
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .xymob-navbtn span {
        margin: 7px 0;
    }

    .xymob-navbtn:after,
    .xymob-navbtn:before {
        content: '';
        -webkit-transform-origin: 7.5%;
        transform-origin: 7.5%;
    }

    .xymob-navbtn.clicked span {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    .xymob-navbtn.clicked:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .xymob-navbtn.clicked:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .xymob-search-btn {
        position: absolute;
        z-index: 9;
        right: 0;
        top: 0;
        bottom: 0;
        width: 14%;
        text-align: center;
        line-height: 60px;
        font-size: 32px;
        color: #fff;
    }

    .xymob-search-btn i {
        font-size: 24px;
    }

    .xymob-search-btn .icon-font {
        display: block;
        width: 100%;
        height: 100%;
    }

    .xymob-search-btn .icon-font:after {
        background-position: -30px -210px;
    }

    .xymob-menu {
        display: none;
        position: absolute;
        z-index: 9999;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: var(--color-primary);
        padding: 0 10px;
    }

    .xymob-menu .xymob-menu-box {
        height: 100vh;
        overflow: auto;
        padding-bottom: 80px;
    }

    .xymob-nav>li {
        border-bottom: 1px solid #fff;
        position: relative;
    }

    .xymob-nav>li>a {
        display: block;
        line-height: 50px;
        font-size: 16px;
        color: #ffffff;
    }

    .xymob-nav .xymob-menu-jt {
        position: absolute;
        width: 20%;
        height: 50px;
        line-height: 50px;
        right: 0;
        top: 0;
        text-align: center;
        z-index: 9;
        color: #fff;
    }

    .xymob-nav .xymob-menu-jt .icon-font {
        display: block;
        width: 100%;
        height: 100%;
    }

    .xymob-nav .xymob-menu-jt .icon-font:after {
        background-position: -30px -240px;
    }

    .xymob-nav .xymob-menu-jt.clicked .icon-font:after {
        background-position: -30px -270px;
    }

    .xymob-nav .xymob-sub-menu {
        background: var(--cPrimary);
        display: none;
    }

    .xymob-nav .xymob-sub-menu>li {
        border-top: 1px dashed #fff;
    }

    .xymob-nav .xymob-sub-menu>li>a {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 40px;
        text-indent: 2em;
    }

    .xymob-dlbtn {
        margin-top: 40px;
    }

    .xymob-dlbtn a {
        text-align: center;
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: var(--primary);
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
    }

    .xymob-dlbtn a i {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }

    .xymob-dlbtn a .icon-dl:after {
        background-position: -30px -540px;
    }

    .xymob-dlbtn a .icon-pn:after {
        background-position: -30px -600px;
    }

    .xymob-dlbtn a .icon-tc:after {
        background-position: -30px -570px;
    }

    .xymob-dlbtn .zx-btn {
        margin-top: 10px;
        background: none;
        border: 1px solid #fff;
    }

    .xymob-search {
        position: fixed;
        z-index: 99999;
        left: 100%;
        bottom: 0;
        top: 0;
        width: 100%;
        background: var(--primary);
        padding: 15px 15% 0 15%;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .xymob-search .xymob-search-close-btn {
        position: absolute;
        top: 27px;
        left: 30px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
/**手机导航栏结束*/
    .warp{max-width: 100%;padding: 0 10px}
    .index{
        .product{margin: 20px 0;}
        .product .title h3{font-size: 20px;}
        .product .title a {width: 80px;height: 30px;font-size: 12px;top: auto;}
        .swiper-product .swiper-slide h2{margin-top: 20px;font-size: 12px;}
        .category{padding: 40px;}
        .category .title h3{font-size: 36px;margin-bottom: 40px}
        .category .swiper-slide h2{font-size: 24px;}
        .about{padding: 40px 0;}
        .about .warp{flex-direction: column;}
        .about .l{width: 100%;}
        .animated-follow img{ transform: scale(1);}
        .about .r{width: 100%;padding: 0;}
        .about .r h2 {font-size: 28px;margin: 10px 0}
        .about .r ul{margin: 20px 0;}
        .about .r ul .count{font-size: 24px;}
        .about .r .more {width: 80px;height: 30px;font-size: 12px;top: auto;}
        .honor .title h3{font-size: 24px;margin-bottom: 20px;}
        .swiper-honor{padding: 0;}
        .form{margin-top: 20px;}
        .form .formbox { top: 50%;left: 0%;  transform: translateY(-50%);height: auto;width: 100%;}
        .form .formbox h3{font-size: 24px;}
        .form .formbox button{width: 76px;}
        .news{padding: 40px 0;}
        .news .title h2{font-size: 24px;}
    }
    footer{max-height: 450px;}
    footer .warp dl:not(:nth-last-of-type(-n+2)) {
        display: none;
    }

    /*** 内页样式 **/
    .classifcation{top: -27px;}
    .breadcrumb-item{justify-content: flex-end}
    .breadcrumb{margin: 10px 0;}
    .classifcation ul li a.classifcationa{font-size: 12px;}
    .category, .list-product,
    .category_product {
        .imggroup-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 0px;
            margin-bottom: 20px;
        }
        .imggroup-text .title a {
            font-size: 12px;
        }
        .imggroup-text {
            padding: 6px;
        }
    }
    .product__wrapper{gap: 0;flex-direction: column;}
    .product__details__pic{width: 100%;}
    .product__details__text h3{font-size: 16px;}
    .thumbnailSwiper .swiper-slide{height: auto;}
    .product__details__text{width: 100%;}
    .product__details__attr li{align-items: center;}
    .classifcation ul li:focus-within ul {   display: block;}
    .list .col, .list-image .col{width: calc(50% - 10px);max-width:50%}
    .showtitle {font-size: 18px;}
    .company-info{padding: 20px 0;}
    .viewbox{padding: 10px}
    .section_title h1{font-size: 20px}
    .contact_warpper{padding: 0}
    .form-box input{height: 37px}
    .contact-form button{padding: 7px 0}
}