:root{
    --primary:#cda292;
    --bg:rgba(0,0,0,.55);
    --radius:16px;
    --transition:.3s ease;
}
/* 全局限制 */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}
/* 触发按钮 */
.head-btn-watch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 32px;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(135deg, #cda292 0%, #b78e7e 100%); 
  box-shadow: 0 4px 12px rgba(205,162,146,.30);
  cursor: pointer;
  transition: all .3s ease;
}
.head-btn-watch:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(205,162,146,.40);
}
.head-btn-watch i{
    margin-right: 6px; 
}

    .content-home {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center;
        align-items: center;
        max-width: 100%;
        /* margin: 80px auto 0; */ /* 居中 */
        padding: 0 20px; /* 左右留空 */
        gap: 40px;
        margin: 80px 8%;
    }
    .show-img{
         max-width: 100%;
         height: auto;
         border-radius: 10px;
    }
    @keyframes fadeInOut {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
    .left-content-home {
        flex: 1 1 500px; /* 允许缩小，最小500px */
        position: relative; /* 为绝对定位的子元素提供参照 */
    }
    .right-content-home {
        flex: 0 1 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
    } 
    .product-tags-home{
        float: right;
        margin-right: 13%;
    }
    .pStyle {
         margin-top: 20px;
          font-size: clamp(18px, 2.5vw, 28px);
          color: gray;
    }
    .buttons-home {
           margin-top: 40px;
        display: flex;
        justify-content: flex-start;
        gap: 40px;
        flex-wrap: wrap;
    }
    .btn-home {
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        border: none;
        text-align: center;
        margin-right: 2rem;
    }
    .tag-home1,.tag-home2{cursor: pointer;}
    .btn-primary-home {
        background-color: #cda292;
        color: white;
        width:140px;
        font-size: 17px;
    }
    .btn-secondary-home {
        background-color: transparent;
        border: none;
    }
    .product-image-home {
        width: 100%;
        max-width: 500px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .div-before-pseudo-home {
           border-left: 2px solid #A8A8A8;
        height: 70px;
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left:20px;
    }
    .tag-home {
        background-color: #f0f0f0;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 14px;
    }
    .left-content-home h1 {
         font-size: clamp(32px, 5vw, 60px); /* 自适应字体 */
          color: #333;
          line-height: 1.2;
    } 
    .features {
        display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1.5rem;
          margin-top: 3rem;
    }
    
    .feature {
        background: white;
          padding: 1.5rem;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .feature:hover {
        transform: translateY(-5px);
    }
    
    .feature h3 {
        color: #2c5f2d;
        margin-bottom: 1rem;
    }
    .tag-home2{
        color: #c0c0c0;
    }
    
        
    .content-home-center{
        flex: 1; /* 让左侧内容占据剩余空间，但这里不再设置具体的flex值，因为我们要让h1自行换行 */
        position: relative; /* 为绝对定位的子元素提供参照 */
        /* border: 1px solid #cda292; 
        border-radius: 10px; */
        margin-top: 40px;
        
    }
    
    
    .product-section {
       padding: 0px 142px;
    }
    
    .section-title {
        color: #cda292;
        font-size: 24px;
        margin: 10px 0 20px;
    }
    
    .product-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        padding: 5px 5px;
    }
    
    .product-card {
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .product-image {
        width: 210px;
        height: 300px;
        background-color: #f0f0f0;
        margin-bottom: 10px;
        border-radius: 5px;
        overflow: hidden; /* 防止图片溢出div */
        object-fit: fill;
    }
    
    .product-name {
        font-size: 14px;
        color: #cda292;
        margin-bottom: 5px;
    }
    .view-details {
        display: inline-block;
        background-color: #cda292;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        margin-top: 10px;
        transition: background-color 0.3s;
        margin-left: 35px;
    }
     
    .contact-form {
        max-width: 50%;
    }
    
    .contact-title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
  .form-group {
        margin-bottom: 15px;
    }
  .product-image {
        transition: transform 0.25s ease; /* 平滑过渡效果 */
        cursor: pointer; /* 鼠标悬停时显示指针光标 */
    }
    .product-image:hover {
        transform: scale(1.1); /* 鼠标悬停时放大1.5倍 */
    }
    .product-image img{
        transition: transform 0.25s ease; /* 平滑过渡效果 */
        cursor: pointer; /* 鼠标悬停时显示指针光标 */
    }
    .product-image img:hover {
        transform: scale(1.2); /* 鼠标悬停时放大1.5倍 */
    }
    .favorite-icon {
        display: inline-block; /* 使元素成为行内块级元素，以便设置宽高 */
        width: 30px; /* 设置爱心图标的宽度 */
        height: 30px; /* 设置爱心图标的高度 */
        background-color: white; /* 设置背景颜色为白色 */
        color: #cda292; /* 设置爱心图标的初始颜色为粉色（但这里不会直接显示，因为文字被背景色覆盖了） */
        line-height: 30px; /* 设置行高与高度相同，使爱心图标垂直居中 */
        text-align: center; /* 设置文本居中 */
        font-size: 20px; /* 设置爱心图标的大小 */
        border-radius: 50%; /* 设置圆角为50%，使背景成为圆形 */
        cursor: pointer; /* 设置鼠标悬停时的样式为手形，表示可点击 */
        margin-left: 10px; /* 设置与“View Details”链接之间的间距 */
        transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
    }
    
    .favorite-icon:hover {
        background-color: #cda292; /* 鼠标悬停时背景颜色变为粉色 */
        color: white; /* 鼠标悬停时文字颜色变为白色（但实际上这里不需要，因为文字已经被背景色覆盖了） */
    }
    
    .content-cent-product-section {
        /* max-width: 1200px; */
        margin: 30px 8%;
    }

    .content-cent-section-title {
        font-size: 28px;
        font-weight: 700;
        color: #cda292;
        margin-bottom: 30px;
        text-align: center;
        position: relative;
        padding-bottom: 15px;
    }

    .content-cent-section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #4299e1, #48bb78);
        border-radius: 2px;
    }

    .content-cent-products-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 40px;
    }

    .content-cent-product-row {
        display: flex;
        gap: 25px;
    }

    .content-cent-product-card {
        flex: 1;
        display: flex;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.5);
        transition: all 0.4s ease;
    }

    .content-cent-product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(66, 153, 225, 0.2);
        border: 1px solid rgba(66, 153, 225, 0.3);
    }

    .content-cent-product-image {
        width: 200px;
        height: 200px;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .content-cent-product-info {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .content-cent-product-title {
        font-size: 20px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .content-cent-product-description {
        font-size: 15px;
        color: #4a5568;
        line-height: 1.7;
        margin-bottom: 15px;
        flex-grow: 1;
    }

    .content-cent-product-price {
        font-size: 22px;
        font-weight: 800;
        color: #38a169;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .content-cent-product-price .content-cent-original-price {
        font-size: 16px;
        color: #a0aec0;
        text-decoration: line-through;
        margin-left: 10px;
        font-weight: 500;
    }

    .content-cent-product-rating {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 14px;
        color: #4a5568;
    }

    .content-cent-stars {
        color: #ecc94b;
        margin-right: 8px;
        letter-spacing: 1px;
    }

    .content-cent-product-actions {
        display: flex;
        gap: 12px;
        margin-top: 10px;
    }

    .content-center-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .content-center-btn-primary {
        background: linear-gradient(90deg, #4299e1, #3182ce);
        color: white;
        box-shadow: 0 4px 10px rgba(66, 153, 225, 0.3);
    }

    .content-center-btn-primary:hover {
        background: linear-gradient(90deg, #3182ce, #2b6cb0);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(66, 153, 225, 0.4);
    }

    .content-center-btn-secondary {
        background: rgba(255, 255, 255, 0.8);
        color: #4299e1;
        border: 1px solid #cbd5e0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .content-center-btn-secondary:hover {
        background: rgba(255, 255, 255, 1);
        border-color: #a0aec0;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .content-cent-badge {
        display: inline-block;
        padding: 4px 10px;
        background: linear-gradient(90deg, #e53e3e, #c53030);
        color: white;
        font-size: 12px;
        border-radius: 20px;
        margin-bottom: 10px;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(229, 62, 62, 0.2);
    }
 
    /* 响应式设计 */
    @media (max-width: 768px) {
        .content-cent-product-row {
            flex-direction: column;
        }
        
        .content-cent-product-card {
            flex-direction: row;
        }
        
        .content-cent-product-image {
            width: 150px;
            height: 150px;
        }
        
        .content-cent-product-title {
            font-size: 18px;
        }
        
        .content-cent-section-title {
            font-size: 24px;
        }
    }

    @media (max-width: 480px) {
        .content-cent-product-card {
            flex-direction: column;
            text-align: center;
        }
        
        .content-cent-product-image {
            width: 100%;
            height: 200px;
        }
        
        .content-cent-product-actions {
            justify-content: center;
        }
    }   
/* ---- Factory ---- */
:root{
          --gold:#cda292;          /* 保留金色点缀 */
          --black:#111;
          --white:#ffffff;
          --gray:#444;             /* 正文黑灰 */
          --light-gray:#f5f5f5;
}

.factory-jade{
          background:var(--white);   /* 白底 */
          color:var(--black); 
          margin: 0 8%; 
          border-radius: 24px;
          padding:10px 10px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.factory-jade .title{
          font-size:2.5rem;
          font-weight:300;
          letter-spacing:2px; 
          color:var(--gold);
}
.factory-jade .sub-title{
          font-size:1.1rem;
          color:var(--gray);
          margin-bottom:50px;
}

/* video */
.video-box{
          position:relative;
          border-radius:20px;
          overflow:hidden;
          border:1px solid #e6e6e6;
          background:var(--white);
}
.video-box video{
          width:100%;
          height:350px;
          object-fit:cover;
          display:block;
}
.play-overlay{
          position:absolute;
          inset:0;
          background:rgba(0,0,0,.3);
          display:flex;
          align-items:center;
          justify-content:center;
          font-size:3rem;
          color:var(--gold);
          pointer-events:none;
          transition:.3s;
}
.video-box:hover .play-overlay{transform:scale(1.1);opacity:0;}

/* text block */
.heading{
          font-size:1.8rem;
          margin-bottom:20px;
          font-size: 30px;
          font-weight: 700;
          color: #2d3748;
          line-height: 1.4;
}
.desc{line-height:1.8;color:var(--gray);margin-bottom:30px;}

/* counters */
.counter-area .counter-box{
          background:var(--light-gray);
          border:1px solid var(--gold);
          border-radius:12px;
          text-align:center;
          padding:20px 5px;
          transition:.3s;
}
.counter-area .counter-box:hover{
          background:rgba(205,162,146,0.15);
          transform:translateY(-3px);
}
.counter-box .num{
          display:block;
          font-size:2rem;
          font-weight:700;
          color:var(--gray);
}
.counter-box .txt{font-size:0.9rem;color:var(--gray);}

/* feature list */
.feature-list{
          list-style:none;
          padding:0;
          margin:30px 0;
}
.feature-list li{
          margin-bottom:12px;
          font-size:1rem;
          color:var(--gray);
}
.feature-list i{
          color:var(--gold);
          margin-right:8px;
}

/* CTA */
.cta-btn{
          display:inline-block;
          background:var(--gold);
          color:var(--black);
          padding:12px 32px;
          border-radius:30px;
          font-weight:600;
          text-decoration:none;
          transition:.3s;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(205,162,146,.35);}

/* mobile */
@media (max-width:992px){
          .video-box video{height:280px;}
          .title{font-size:2rem;}
}
    /* 图片区  */
    .carousel-container {
        /* max-width: 1200px; */
        margin: 60px 8%; 
        /* padding: 20px; */
    }
    
    .carousel {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }
    
    .carousel-inner {
        border-radius: 15px;
    }
    
    .carousel-item img {
        height: 500px;
         object-fit: contain;
        background-color: #ffffff; 
        filter: brightness(0.9);
    }
    
    .carousel-caption {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 15px;
        padding: 20px 30px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        width: auto;
        max-width: 80%;
    }
    
    .carousel-caption h5 {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #fff;
    }
    
    .carousel-caption p {
        font-size: 16px;
        color: #e0e0e0;
        margin: 0;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }
    
    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-50%) scale(1.1);
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px;
        height: 30px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    
    .carousel-indicators {
        bottom: 20px;
    }
    
    .carousel-indicators button {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin: 0 8px;
        background-color: rgba(255, 255, 255, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
    }
    
    .carousel-indicators button.active {
        background-color: #fff;
        transform: scale(1.3);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    
    .carousel-indicators button:hover {
        background-color: rgba(255, 255, 255, 0.8);
        transform: scale(1.1);
    }
    
    /* 添加动画效果 */
    .carousel-item {
        transition: transform 0.8s ease-in-out;
        height: 500px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ffffff;  
    }
    
    .carousel-fade .carousel-item {
        transition: opacity 0.8s ease-in-out;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .carousel-item img {
            height: 300px;
        }
        
        .carousel-caption h5 {
            font-size: 20px;
        }
        
        .carousel-caption p {
            font-size: 14px;
        }
        
        .carousel-control-prev,
        .carousel-control-next {
            width: 45px;
            height: 45px;
            margin: 0 10px;
        }
    }
    
    /* 添加加载动画 */
    .carousel-item img {
        animation: fadeIn 1s ease-in-out;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(1.1);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    /* 模态框中的图片样式 */
     .show-modal-image {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
    } 
    /* 模态框内容区域半透明 */
    .modal-content {
        background-color: rgba(0, 0, 0, 0.25); /* 黑色半透明 */
        border: none;
        backdrop-filter: blur(10px); /* 毛玻璃效果 */
    }
    
    /* 模态框头部和身体背景透明 */
    .modal-header,
    .modal-body {
        background-color: transparent;
        border: none;
    }
    
    /* 确保图片不透明 */
    .show-modal-image {
        opacity: 1;
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
    }
    
    /* 关闭按钮不透明（Bootstrap 默认就是不透明） */
    .btn-close {
        opacity: 1;
        filter: none;
    }
/* -------------- dialog 全局 -------------- */
    .consult-dialog{
        width:90%;
        max-width:720px;
        border:none;
        border-radius:var(--radius);
        background:var(--bg);
        backdrop-filter:blur(12px);
        box-shadow:0 8px 32px rgba(0,0,0,.35);
        color:#fff;
        padding:0;
        animation:fadeIn .4s;
    }
    @keyframes fadeIn{
        from{opacity:0;transform:scale(.95);}
        to  {opacity:1;transform:scale(1);}
    }
    
    /* -------------- 关闭按钮 -------------- */
    .btnClose{
        position:absolute;
        top:12px;
        right:12px;
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:24px;
        color:#fff;
        background:var(--primary);
        border:none;
        border-radius:50%;
        cursor:pointer;
        transition:transform var(--transition), background var(--transition);
        z-index:10;
    }
    .btnClose:hover{
        transform:scale(1.1);
    }
    
    /* -------------- 联系我们布局：左右分栏 -------------- */
    .consult-containerUs{
        display:flex;
        gap:30px;
        padding:40px;
    }
    #consult-contactFormUs{
        flex:1 1 380px;
    }
    .consult-cat{
        flex:0 0 220px;
        width:220px;
        object-fit:contain;
        align-self:center;
        user-select:none;
    }
    
    #consult-contactFormUs h2{margin-bottom:20px;font-size:26px;}
    #consult-contactFormUs input,
    #consult-contactFormUs textarea{
        width:100%;
        margin-bottom:14px;
        padding:12px 15px;
        border:none;
        border-radius:8px;
        font-size:15px;
        background:rgba(255,255,255,.85);
        color:#222;
        transition:box-shadow var(--transition);
    }
    #consult-contactFormUs input:focus,
    #consult-contactFormUs textarea:focus{
        outline:none;
        box-shadow:0 0 0 3px var(--primary);
    }
    #consult-contactFormUs button{
        width:100%;
        padding:12px;
        border:none;
        border-radius:8px;
        font-size:16px;
        color:#fff;
        cursor:pointer;
        transition:background var(--transition);
    }
    #consult-contactFormUs button:hover{
        background:#b88e7d;
    }
    
    /* -------------- 移动端自适应 -------------- */
    @media(max-width:700px){
        .consult-containerUs{flex-direction:column;align-items:center;}
        .consult-cat{width:160px;flex:0 0 auto;}
    }
  /* 回顶部箭头 */  
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.back-to-top:hover {
    background-color: #cda292;
}
 /* -----------------   */