/*清除默认边距*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 避免内边距撑大盒子 */
}

body {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", sans-serif;
    line-height: 1.6;
}

/* ------------------------------
   【全局统一：所有区域二级标题样式】
------------------------------ */
.section-title-wrap {
    text-align: center;
    margin-bottom: 50px;
}

.section-en {
    font-size: 35px;
    font-weight: 400;
    color: rgba(68, 66, 66, 0.1);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: -12px;
    /* 关键：让英文标题下沉一点，和中文标题重叠出层次感 */
    position: relative;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}

.section-zh {
    font-size: 32px;
    font-weight: 700;
    color: #222;
    position: relative;
    z-index: 1;
}


/* 深色区域标题（品牌） */
.brand-section .section-en {
    color: rgba(255, 255, 255, 0.1);
}

.brand-section .section-zh {
    color: #fff;
}

.brand-page-wrap .section-en {
    color: rgba(255, 255, 255, 0.1);
}

.brand-page-wrap .section-zh {
    color: #fff;
}


/*导航条区域*/
/*导航条部分*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    /*透明导航条部分1*/
    /* background-color: rgba(0,0,0,0); */
    z-index: 999;
    color: #000;
    /*透明导航条部分2*/
    /* color: #fff; */
    display: flex;
    align-items: center;
    /* 让子元素垂直居中 */
    justify-content: space-between;
    height: 90px;
    /* 给导航栏定一个统一高度，和Logo匹配 */
    padding: 0 20px;
    /* 左右加一点内边距 */

    /* 新增：兼容低版本浏览器 */
    -webkit-backdrop-filter: blur(0);
    /* 取消模糊，纯透明 */
    backdrop-filter: blur(0);
    transition: all 0.3s ease; /* 加过渡，切换顺滑 */
}

/* 滚动后的导航样式 */
.header.scrolled {
    background-color: rgba(255,255,255,0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
/* 原有.header保持不变，新增滚动类 */
/* .header.scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
} */

.header img {
    height: 70px;
    /* 固定高度，和导航栏匹配 */
    width: auto;
    /* 宽度自适应，避免变形 */
    /*margin-right: 40px; 和导航文字拉开一点距离 */
    margin-left: 80px;
    object-fit: contain;
    /* 防止变形，保持比例 */
}


.navbar {
    flex: 1;
    /* 让导航栏占满剩余空间 */
}

.navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    /* 导航文字居中 */
    align-items: center;
    /* 文字在导航栏里垂直居中 */
    height: 100%;
    /* 继承父级高度 */
    gap: 10px;
}

.navbar a.nav-link {
    color: #000;
    /*透明导航条部分3*/
    /* color: #fff; */
    padding: 0 20px;
    /* 水平内边距，避免撑高导航栏 */
    line-height: 90px;
    /* 和导航栏高度一致，实现垂直居中 */
    text-decoration: none;
    white-space: nowrap;
    /* 强制文字在一行，不换行 */
    position: relative;
    font-size: 17px;
    /* 关键：让下划线宽度 = 文字宽度 */
    display: inline-block;
}

/* 鼠标悬浮：文字变红 + 下划线 */
.navbar a.nav-link:hover {
    color: #9B182F;
}

.navbar a.nav-link:hover::after {
    width: 100%;
}

/* 点击/激活态：默认首页：#9B182F 红色 + 红色下划线 */
.navbar a.nav-link.active,
.navbar a.nav-link:active {
    color: #9B182F;
}

.navbar a.nav-link.active::after,
.navbar a.nav-link:active::after {
    width: 100%;
}

/* 默认下划线：透明，hover 过渡 */
.navbar a.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    /* 线离文字距离，可微调 */
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #9B182F;
    /*transition: width 0.3s; */
    transition: all 0.3s ease;
}

/* 响应式导航 */
@media (max-width: 1200px) {
    .navbar a.nav-link {
        padding: 0 18px;
    }

    .header img {
        margin-left: 40px;
    }
}

@media (max-width: 992px) {
    .navbar a.nav-link {
        padding: 0 12px;
        font-size: 14px;
    }
}

/* ========== 导航下拉子菜单样式 ========== */
.nav-parent {
  position: relative;
}
/* 下拉容器默认隐藏 */
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* 默认状态：顶部透明导航时 白底黑字 */
  background: #ffffff;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: all 0.3s ease;
  z-index: 9999;
}
/* 悬浮父li显示下拉 */
.nav-parent:hover .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* 子菜单链接 默认黑色文字 */
.sub-link {
  display: block;
  width: 100%;
  padding: 14px 20px;
  text-align: center;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  transition: background 0.25s ease, color 0.25s ease;
}
/* hover仅文字变红，背景不变 */
.sub-link:hover {
  background-color: transparent;
  color: #9B182F;
}

/* ========== 滚动后导航.scrolled 下拉改为半透白 ========== */
.header.scrolled .nav-submenu {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 滚动后子项文字依旧黑色，hover仅红字 */
.header.scrolled .sub-link {
  color: #222;
}
.header.scrolled .sub-link:hover {
  background-color: transparent;
  color: #9B182F;
}

/* 移动端适配 */
@media (max-width: 992px) {
  .nav-submenu {
    min-width: 130px;
  }
  .sub-link {
    padding: 12px 10px;
    font-size: 14px;
  }
}

/* 中英文切换区域 */
/* 语言切换样式 */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: 28px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.lang-toggle span {
    padding: 0 2px;
}

/* 高亮当前语言 */
.lang-toggle .lang.active {
    color: #9B182F;
    /* 导航红色 */
    font-weight: 500;
}

/* 无任何下划线！ */
.lang-toggle * {
    text-decoration: none !important;
    border: none !important;
}


/* 轮播图区域 */
/* 轮播图部分 */
.slideshow-conatiner {
    position: relative;
    width: 100%;

    height: calc(100vh - 90px);
    /* 新增：轮播图顶部对齐导航栏底部 */
    margin-top: 90px;
    /*透明导航条部分4*/
    /* height: 100vh; */

    overflow: hidden;
    /* 确保轮播图在导航栏下方（z-index 低于999） */
    z-index: 1;
}

/* 单个轮播项 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* 始终居中显示 */
}

/* 左下角文字 */
.slide-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* 左右箭头 */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.1);
    /* 方形：取消圆角 */
    border-radius: 4px;
    user-select: none;
    transition: background 0.3s;
    z-index: 2;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.prev:hover,
.next:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 小圆点 */
.dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.dot {
    cursor: pointer;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: background 0.3s;
}

.dot.active {
    background: #fff;
}

/* 全局响应式：文字、间距随屏幕自动缩小，整齐 */
@media (max-width: 768px) {
    .slide-text {
        font-size: 18px;
        bottom: 20px;
        left: 20px;
    }

    .prev,
    .next {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
    }

    /* 响应式下轮播图高度适配 */
    /*透明导航条部分5,修改的话去掉*/
    .slideshow-conatiner {
        height: calc(100vh - 90px);
    }
}


/* 关于我们区域 */
/* 关于我们区域 */
.about-section {
    width: 100%;
    padding: 80px 0;
    background-color: #fff;
}

.about-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 介绍文字 */
.about-desc {
    text-align: center;
    color: #555555;
    font-size: 15px;
    margin-bottom: 50px;
    /* 初始状态：隐藏+下移 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.about-desc p {
    margin-bottom: 10px;
}

/* 图片区域 */
.about-images {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    /* 初始状态：隐藏+下移 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

/* 动画激活状态 */
.about-desc.animate,
.about-images.animate {
    opacity: 1;
    transform: translateY(0);
}

.about-img-item {
    flex: 1;
    /* 三个容器平分宽度 */
    aspect-ratio: 16 / 10;
    /* 固定宽高比，比如16:9，也可以改成4:3、1:1 */
    overflow: hidden;
    /* 隐藏超出部分，让放大效果更平滑 */
    border-radius: 4px;
    /* 可选：加一点圆角 */
    /* 给容器加一个固定高度，也可以用aspect-ratio */
    /* height: 200px; */

}

.about-img-item a {
    display: block;
    /* 让a标签充满容器，点击区域更大 */
    width: 100%;
    height: 100%;
}

.about-img-item img {
    width: 100%;
    /* height: auto; */
    height: 100%;
    /* 高度设为100%，占满容器 */
    object-fit: cover;
    /* 关键：图片按容器比例裁剪，不变形 */
    display: block;
    transition: transform 0.3s ease;
    /* 过渡动画，0.3秒完成，缓动效果 */
}

/* 鼠标悬停放大 */
.about-img-item img:hover {
    transform: scale(1.08);
    /* 放大8%，数值可以自己调整，比如1.1就是放大10% */
}

/* 按钮 */
.about-btn-wrap {
    text-align: center;
}

.about-btn {
    display: inline-block;
    padding: 12px 40px;
    background-color: #9B182F;
    color: #ffffff;
    text-decoration: none;
    border-radius: 2px;
    font-size: 15px;
}

.about-btn:hover {
    background-color: #7e1327;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .about-images {
        flex-direction: column;
        gap: 15px;
    }

    .about-section {
        padding: 50px 0;
    }
}



/* 视频横幅容器区域 */
/* 视频宣传横幅 */
.video-banner {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.banner-bg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    padding: 0 20px;
}

.play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.play-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #ffffff;
}

.text-small {
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: 10px;
    opacity: 0.9;
}

.text-large {
    font-size: 3.2rem;
    font-weight: 500;
    margin-bottom: 40px;
    line-height: 1.3;
}

.learn-more {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 10px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.learn-more:hover {
    opacity: 1;
}

.learn-more .underline {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: #fff;
}

/* 视频弹窗遮罩 */
.video-modal {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 弹窗内容区 */
.modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
}

/* 视频16:9 */
#modalVideo {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}

/* 响应式 */
@media (max-width: 768px) {
    .video-banner {
        height: 400px;
    }

    .play-button {
        width: 60px;
        height: 60px;
    }

    .play-icon {
        border-width: 12px 0 12px 20px;
    }

    .text-small {
        font-size: 1.2rem;
    }

    .text-large {
        font-size: 1.8rem;
    }
}



/* 产品与案例区域 */
/* 产品案例区域 */
.service-section {
    width: 100%;
    padding: 60px 20px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}


/* 卡片容器 */
.service-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* 单个卡片 */
.service-card {
    width: 300px;
    height: 450px;
    background-color: #f5f5f5;
    overflow: hidden;
    position: relative;
    /* 盒子外阴影 */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);    */
    /* 新增：过渡动画，让放大效果平滑 */
    transition: transform 0.3s ease;
}

/* 新增：鼠标悬停时整个卡片放大 */
.service-card:hover {
    transform: scale(1.05);
    /* 放大5%，可以自己调整，比如1.08、1.1 */
}

.service-card a {
    display: block;
    /* 让a标签充满整个卡片，点击区域更大 */
    width: 100%;
    height: 100%;
    text-decoration: none;
    /* 去掉链接默认下划线 */
    color: inherit;
    /* 继承卡片内文字颜色，不影响原样式 */
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 底部遮罩层 */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(150, 25, 42, 0.85);
    color: #ffffff;
    padding: 15px 20px;
    text-align: center;
}

.card-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
}

.card-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* 白色分隔线 */
.divider-line {
    width: 30px;
    height: 2px;
    background-color: #ffffff;
    margin: 0 auto;
    opacity: 0.7;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .service-card {
        width: 220px;
        height: 380px;
    }
}

@media (max-width: 900px) {
    .service-card {
        width: 45%;
        height: 400px;
    }
}

@media (max-width: 600px) {
    .service-card {
        width: 100%;
        height: 350px;
    }
}

/* 滚动淡出动画基础样式 */
.fade-in-item {
  opacity: 0;
  transform: translateY(30px); /* 上浮距离 */
  transition: opacity 0.8s ease, transform 0.8s ease; /* 动画速度 */
}

/* 显示状态 */
.fade-in-item.show {
  opacity: 1;
  transform: translateY(0);
}
/* 卡片内层填满容器 */
.card-inner {
  width: 100%;
  height: 100%;
}

/* 产品分类区域 */
/* 产品分类区域 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 160px;
    /* 和 .about-container、.service-container 保持一致 */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 80px;
}

.item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon {
    width: 120px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 沙发 */
.icon.sofa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M10 60V25a5 5 0 0 1 5-5h90a5 5 0 0 1 5 5v35M10 40h100M10 50h100M15 60v10M105 60v10'/%3E%3C/svg%3E");
}

/* 床架 */
.icon.bed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M20 60V20a10 10 0 0 1 10-10h60a10 10 0 0 1 10 10v40M30 30h20M70 30h20M20 60h80'/%3E%3C/svg%3E");
}

/* 柜子 */
.icon.cabinet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M30 10h60v60H30zM30 40h60M60 10v30M50 25h3v3h-3zM67 25h3v3h-3zM35 70v10M85 70v10'/%3E%3C/svg%3E");
}

/* 床 */
.icon.mattress {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect x='25' y='10' width='70' height='60' rx='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='35' cy='20' r='1.5'/%3E%3Ccircle cx='45' cy='20' r='1.5'/%3E%3Ccircle cx='55' cy='20' r='1.5'/%3E%3Ccircle cx='65' cy='20' r='1.5'/%3E%3Ccircle cx='75' cy='20' r='1.5'/%3E%3Ccircle cx='35' cy='30' r='1.5'/%3E%3Ccircle cx='45' cy='30' r='1.5'/%3E%3Ccircle cx='55' cy='30' r='1.5'/%3E%3Ccircle cx='65' cy='30' r='1.5'/%3E%3Ccircle cx='75' cy='30' r='1.5'/%3E%3Ccircle cx='35' cy='40' r='1.5'/%3E%3Ccircle cx='45' cy='40' r='1.5'/%3E%3Ccircle cx='55' cy='40' r='1.5'/%3E%3Ccircle cx='65' cy='40' r='1.5'/%3E%3Ccircle cx='75' cy='40' r='1.5'/%3E%3Ccircle cx='35' cy='50' r='1.5'/%3E%3Ccircle cx='45' cy='50' r='1.5'/%3E%3Ccircle cx='55' cy='50' r='1.5'/%3E%3Ccircle cx='65' cy='50' r='1.5'/%3E%3Ccircle cx='75' cy='50' r='1.5'/%3E%3Ccircle cx='35' cy='60' r='1.5'/%3E%3Ccircle cx='45' cy='60' r='1.5'/%3E%3Ccircle cx='55' cy='60' r='1.5'/%3E%3Ccircle cx='65' cy='60' r='1.5'/%3E%3Ccircle cx='75' cy='60' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* 桌子 */
.icon.table {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M20 20h80v5H20zM30 25v45M90 25v45'/%3E%3C/svg%3E");
}

/* 椅子 */
.icon.chair {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M45 30h30v20H45zM40 50h40v5H40zM45 55v20M55 55v20M65 55v20M75 55v20M45 30h30V10H45z'/%3E%3C/svg%3E");
}

/* 床头柜 */
.icon.nightstand {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M30 30h60v30H30zM30 50h60M45 40h10M45 55h10M35 60v15M85 60v15'/%3E%3C/svg%3E");
}

/* 茶几 */
.icon.coffee-table {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M30 40h60v30H30zM30 50h60M35 70v15M85 70v15M60 30a5 5 0 1 0 0 10a5 5 0 0 0 0-10zM75 35h10v5H75z'/%3E%3C/svg%3E");
}

/* 其他 */
.icon.vanity {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M40 40h40v30H40zM40 50h40M50 45h5M65 45h5M35 70v15M85 70v15M60 25a10 10 0 1 0 0 20a10 10 0 0 0 0-20z'/%3E%3C/svg%3E");
}

.text h3 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 8px;
}

.more {
    font-size: 16px;
    color: #333;
    text-decoration: none;
}

.more:hover {
    color: #666;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
    }
}



/* 合作品牌区域 */
/* 合作品牌区域 */
.brand-section {
    width: 100%;
    /* background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%); */
    /* 黄渐变背景 */
    /* background: linear-gradient(135deg, #3a0a0a 0%, #1a0505 100%); 酒红渐变背景 */
    /* background: linear-gradient(135deg, #2b0505 0%, #0f0202 100%); 暗红渐变背景 */
    /* background: linear-gradient(135deg, #6d1010 0%, #3a0a0a 100%); 亮红渐变背景*/
    background: linear-gradient(135deg, #4a0a0a 0%, #140404 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
}

/* 模拟背景效果 */
.brand-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23c92a2a;stop-opacity:0.25' /%3E%3Cstop offset='100%25' style='stop-color:%23000;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23grad)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    opacity: 0.7;
    z-index: 0;
}

.brand-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* 品牌网格布局 */
.brand-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); */
    grid-template-columns: repeat(6, 1fr);
    /* 固定6列 */
    gap: 20px;
    /* 格子间距 */
    margin-bottom: 40px;
    /* 和 “更多品牌” 间距 */
}

.brand-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s ease;
}

.brand-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

/* 品牌Logo样式 */
.brand-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* 把文字/图标变白 */
    /* filter: brightness(0) invert(1); */
}

/* 给 SVG 用的白色滤镜 */
.brand-logo.is-svg {
    filter: brightness(0) invert(1);
}

.bentley {
    background-image: url("../images/brand/brand1.jpg");
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Ctext x='60' y='45' text-anchor='middle' font-size='14' font-weight='bold'%3EBENTLEY%3C/text%3E%3Ctext x='60' y='60' text-anchor='middle' font-size='8'%3EHOME%3C/text%3E%3Ccircle cx='60' cy='25' r='12' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Cpath d='M40 25 Q50 15, 60 25 Q70 15, 80 25' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); */
}

.versace {
    background-image: url("../images/brand/brand2.jpg");
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Ctext x='60' y='50' text-anchor='middle' font-size='16' font-weight='bold'%3EVERSACE%3C/text%3E%3Ctext x='60' y='65' text-anchor='middle' font-size='8'%3EHOME%3C/text%3E%3Ccircle cx='60' cy='25' r='12' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); */
}

.giorgetti {
    background-image: url("../images/brand/brand3.jpg");
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Ctext x='40' y='45' text-anchor='middle' font-size='14' font-weight='bold'%3EGIORGETTI%3C/text%3E%3Cpath d='M90 20 L100 30 L90 40 L100 50 L90 60 L80 50 L90 40 L80 30 Z' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); */
}

.moroso {
    background-image: url("../images/brand/brand4.jpg");
}

.gallotti {
    background-image: url("../images/brand/brand5.jpg");
}

.gamma {
    background-image: url("../images/brand/brand6.jpg");
}

.armani {
    background-image: url("../images/brand/brand7.jpg");
}

.hessentia {
    background-image: url("../images/brand/brand8.png");
}

.roberto {
    background-image: url("../images/brand/brand9.jpg");
}

.bonaldo {
    background-image: url("../images/brand/brand10.jpg");
}

.cierre {
    background-image: url("../images/brand/brand11.jpg");
}

.casalago {
    background-image: url("../images/brand/brand12.jpg");
}

.malerba {
    background-image: url("../images/brand/brand13.jpg");
}

.cappellini {
    background-image: url("../images/brand/brand14.jpg");
}

.tacchini {
    background-image: url("../images/brand/brand15.jpg");
}

.magis {
    background-image: url("../images/brand/brand16.jpg");
}

.cantori {
    background-image: url("../images/brand/brand17.jpg");
}

.blacktie {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Ctext x='60' y='40' text-anchor='middle' font-size='16' font-weight='light'%3EBLACK TIE%3C/text%3E%3Cpath d='M55 50 L60 55 L65 50' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Ctext x='60' y='65' text-anchor='middle' font-size='8'%3EHome Decor%3C/text%3E%3C/svg%3E");
}

/* 更多品牌按钮 */
.more-brands {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-block;
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: all 0.3s ease;
    /* 加上这一行，去掉a标签的默认下划线 */
    text-decoration: none;
}

.more-brands:hover {
    color: #fff;
    border-color: #fff;
}

/* 响应式适配 只在小屏幕改成 3 列，大屏永远 6 列 */
@media (max-width: 1024px) {
    .brand-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .brand-item {
        height: 120px;
    }
}

@media (max-width: 480px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .brand-item {
        height: 100px;
    }
}



/* 新闻资讯区域 */
/* 新闻资讯区域 */
.news-wrap {
    background-color: #fff;
    /* 背景给外层 */
    padding: 60px 0 40px;
    /* 上下间距放外层，左右不要限制 */
}

.news-section {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    /* 给父元素加上相对定位，让子元素可以正确定位 */
    overflow: hidden;
}

.news-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    /* 左右两栏之间的间距 */
}

/* 左侧大图卡片 */
.news-card {
    background-color: #ffffff;
    padding: 32px;
    /* 给整个卡片加上内边距（父元素） */
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    /* 去掉下划线 */
    display: block;
}

.news-card:hover {
    transform: translateY(-6px);
    /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
                0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

.card-image-wrap {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 28px;
    /* 图片和下方文字之间的间距 */
}

.card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content-left {
    padding: 0;
    /* 现在由父元素控制 */
}

.card-title-left {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.5;
    margin-bottom: 8px;
}

.card-date-left {
    font-size: 14px;
    color: #999;
    margin-bottom: 16px;
}

.card-desc-left {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 限制为2行*/
    line-clamp: 2;
}

/* 右侧列表卡片 */
.news-right-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-card-right {
    background-color: #ffffff;
    overflow: hidden;
    padding: 22px;
    /* 给右侧整个卡片加上 24px 内边距 */
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.news-card-right:last-child {
    border-bottom: none;
}

.news-card-right:hover {
    transform: translateY(-6px);
    /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
                0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

.card-content-right {
    padding: 0;
}

.card-header-right {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.card-title-right {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.5;
}

.card-date-right {
    font-size: 14px;
    color: #999;
}

.card-desc-right {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* 标签样式 */
.card-tags {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.tag {
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    background-color: #fafafa;
}

/* 按钮 */
.news-btn-wrap {
    text-align: center;
    margin: 50px auto 10px;
}

.news-btn {
    display: inline-block;
    padding: 12px 40px;
    /* 去掉原来的纯色背景 */
    background-color: transparent;
    /* 改成红色边框，和你要的风格一致 */
    border: 1px solid #9B182F;
    color: #9B182F;
    text-decoration: none;
    border-radius: 2px;
    font-size: 15px;
    /* 关键：为背景动画做准备 */
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
}

/* 用伪元素实现从左滑入的红色背景 */
.news-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #9B182F;
    z-index: -1;
    transition: width 0.3s ease;
}

/* hover 时的动画效果 */
.news-btn:hover {
    color: #ffffff;
}

.news-btn:hover::before {
    width: 100%;
}


/* 响应式适配 */
@media (max-width: 768px) {
    .news-container {
        grid-template-columns: 1fr;
    }
}


/* 页脚区域 */
/* 页脚区域 */
.page-footer {
    background-color: #000;
    padding: 50px 20px;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* 左侧联系信息 */
.footer-contact {
    flex: 1;
    min-width: 280px;
}

.contact-item {
    font-size: 16px;
    line-height: 2.2;
    color: #f5f5f5;
}

.contact-item.icp {
    margin-top: 16px;
    font-size: 13px;
    color: #f0f0f0;
}

/* 右侧二维码区域 */
.footer-qrcodes {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.qr-item {
    text-align: center;
}

.qr-box {
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
    background-color: #fff;
    /* border-radius: 8px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 二维码占位样式，可替换为真实图片 */
.qr-placeholder {
    width: 120px;
    height: 120px;
    background-size: cover;
    background-position: center;
}

.qr-placeholder.wechat1 {
    background-image: url("../images/qr/qr-wechat1.jpg");
}

.qr-placeholder.wechat2 {
    background-image: url("../images/qr/qr-wechat1.jpg");
}

.qr-placeholder.xiaohongshu {
    background-image: url("../images/qr/qr-xiaohongshu.png");
}

.qr-placeholder.douyin {
    background-image: url("../images/qr/qr-douyin.png");
}

.qr-label {
    font-size: 15px;
    line-height: 1.6;
    color: #f5f5f5;
}

/* 响应式适配 */
@media (max-width: 1024px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-qrcodes {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-qrcodes {
        gap: 20px;
    }

    .qr-box {
        width: 100px;
        height: 100px;
    }

    .qr-placeholder {
        width: 85px;
        height: 85px;
    }

    .qr-label {
        font-size: 14px;
    }

    .contact-item {
        font-size: 16px;
    }
}


/* 右侧悬浮快捷侧边栏区域 */
/* 右侧悬浮快捷侧边栏 */
.right-sidebar {
    position: fixed;
    right: 20px;
    top: 80%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* 间距 */
}

.sidebar-item {
    width: 50px;
    height: 50px;
    background-color: #f5f5f5;
    color: #000;
    /* 控制所有 SVG 图标颜色 */
    /* border: 1px solid #eee; */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

.sidebar-item:hover {
    background-color: #e0e0e0;
}

.sidebar-item i {
    font-size: 20px;
    color: #666;
    line-height: 1;
}

.sidebar-item:hover i {
    color: #333;
}

/* hover 弹出提示 */
.sidebar-tooltip {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background-color: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-item:hover .sidebar-tooltip {
    opacity: 1;
}

/* 二维码特殊样式 */
.qr-tooltip {
    padding: 10px;
    text-align: center;
    /* 让文字和图片整体居中 */
}

.qr-tooltip img {
    width: 120px;
    height: 120px;
    display: block;
}

.qr-tooltip p {
    margin: 8px 0 0;
    /* 文字和二维码之间留一点间距 */
    font-size: 14px;
    color: #333;
}

/* 回到顶部按钮 */
#backToTop {
    margin-top: 10px;
}