body { margin:0; font-family:'Lato', sans-serif; background:#fff; } /* 设置页面默认边距为0，使用Lato字体，背景为白色 */

/* Header */
header { position: fixed; 
          width: 100%; 
          top: 0; 
          z-index: 100; 
          transition: all 0.4s;
          background: transparent;
       } /* 固定顶部导航栏，宽度100%，带过渡效果，默认透明背景 */
header:hover { background: #fff; 
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             } /* 鼠标悬停时导航变白并出现阴影 */

/* 页面滚动后自动变白的样式（下方 JS 会动态加这个类） */
header.scrolled {
    background: #fff !important;               /* 强制变白 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);    /* 加更明显的阴影 */
}


.container { max-width:1200px; 
              margin:0 auto; 
              padding:15px 40px; 
              display:flex; 
              align-items:center; 
              justify-content:space-between; 
            } /* 内容区居中，最大宽度1200，并使用flex布局左右分布 */


/* Logo */
.logo-cn { font-size:18px; font-weight:700; font-family:'Playfair Display', serif; color:#000;letter-spacing: 5px; } /* 中文LOGO 字体大、加粗、高级感字体 */
.logo-en { font-size:11px; font-family:'Playfair Display', serif; color:rgba(0,0,0,0.7); } /* 英文LOGO 字体更小，颜色略淡 */

/* Nav */
nav a { text-decoration:none; color:#000; margin:0 15px; padding:5px 10px; transition:all 0.4s; } /* 导航链接取消下划线，添加间距和hover动画 */
nav a:hover { background: rgba(0,0,0,0.05); border-radius:4px; } /* 鼠标悬停导航项出现浅灰背景和圆角 */

/* Language Switch */
.lang-switch { font-size:13px; cursor:pointer; } /* 语言切换按钮，设置字体大小和鼠标变为手型 */

/* Hero */
.hero { position:relative; overflow:hidden; } /* 轮播区域相对定位并隐藏溢出内容 */
.carousel-track { display:flex; transition:transform 1s ease; } /* 轮播轨道使用flex布局并带滑动动画 */
.carousel-item { min-width:100%; height:100vh; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; } /* 单张幻灯片占满全屏，背景铺满并垂直水平居中 */
.hero-text { color:#fff; text-align:center; background:rgba(0,0,0,0.3); padding:20px 30px; border-radius:8px; font-family:'Playfair Display', serif; } /* 英雄文字居中、白色、带半透明背景盒子 */

/* Carousel Dots */
.carousel-dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:10px; } /* 轮播圆点定位在底部居中，水平排列并有间距 */
.carousel-dots span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.7); cursor:pointer; transition:all 0.3s; } /* 普通圆点为白色透明、可点击、带过渡效果 */
.carousel-dots span.active { background:#000; transform:scale(1.2); } /* 激活状态圆点变黑并放大 */


/* ======= Section 区块通用样式 ======= */
.section { 
  text-align: center;    /* 让区块内的文字内容居中对齐 */
  padding: 20px;   /* 上下各留 100px 间距，左右各 20px 内边距 */
  background-color: #0023a3;  /* 整个区块背景为深蓝色 */
}

/* 品牌名样式 */
.zy {
  font-size: 58px;      /* 字体大小：48像素 */
  letter-spacing: 14px;  /* 字间距：8像素，拉开英文字母间距 */
  font-weight: 500;     /* 字体粗细：中等 */
  color: white;              /* 字体颜色：白色 */
  font-family: "Didot LT Std", "Didot", "Bodoni XT", serif; /* 高端英文衬线字体，中英文都可 fallback */
}
/* 城市名样式 */
.xc {
  font-size: 20px;        /* 字体大小：20像素 */
  letter-spacing: 20px;   /* 字母间距：20像素（拉得比较开） */
  color: white;              /* 字体颜色：白色 */
  margin-top: 10px;       /* 与上方品牌名之间的间距：10像素 */
  font-family: "Didot LT Std", "Didot", "Bodoni XT", serif; /* 高端英文衬线字体，中英文都可 fallback */
}
/* 中文主标题样式 */
.zw {
  color: white;              /* 字体颜色：白色 */
  font-size: 60px;           /* 字体大小：60像素 */
  font-weight: bold;         /* 字体加粗 */
  padding: 20px 40px;        /* 内边距：上下20px，左右40px，让蓝底更厚实 */
  border-radius: 10px;       /* 圆角：10px，让蓝底边缘更柔和 */
  display: inline-block;     /* 让蓝底只包裹文字宽度 */
  margin-top: 10px;          /* 与上方内容间距：80像素 */
  font-family: "Didot LT Std", "Didot", "Bodoni XT", serif; /* 高端英文衬线字体，中英文都可 fallback */
}

.section2 { 
  text-align: center;    /* 让区块内的文字内容居中对齐 */
  padding: 60px 20px;   /* 上下各留 100px 间距，左右各 20px 内边距 */
}




/* 产品区域容器 - Grid 布局，第一排，每行三列 */
.productArea {
  display: grid;                       /* 使用 Grid 网格布局，让每个产品卡片在网格中排列 */
  grid-template-columns: repeat(3, 1fr); /* 一行三列，每列宽度相等（1fr 表示占可用空间的 1 份） */
  gap: 26px;                           /* 网格中每个卡片之间的水平和垂直间距都为 26px */
  justify-items: center;               /* 每个卡片在单元格内水平居中对齐 */
}

/* 单个产品卡片样式 */
.product-item {
  display: flex;                       /* 使用 Flex 布局，让内部内容（图片和文字）垂直排列 */
  flex-direction: column;              /* 子元素纵向排列：图片在上，文字在下 */
  align-items: center;                 /* 子元素水平居中对齐 */
  background: #fff;                    /* 卡片背景为白色 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.10); /* 添加轻微阴影，让卡片有浮起的立体感 */
  text-align: center;                  /* 卡片内文字居中显示 */
}

/* 卡片内图片样式 */
.product-item img {
  width: 100%;                         /* 图片宽度占满卡片的宽度 */
  height: auto;                        /* 高度自适应，保持图片原比例 */
  object-fit: cover;                    /* 图片填满容器并裁剪多余部分，保持比例不拉伸 */
  transition: transform 0.3s;          /* 设置过渡动画，便于鼠标悬停时缩放平滑过渡 */
}

/* 图片悬停效果 */
.product-item img:hover {
  transform: scale(1.05);              /* 鼠标悬停时图片略微放大 5%，增加交互感 */
}


/* 第二排三张图 */
.product-display {
  display: grid;                       /* 使用 Grid 网格布局，让每个产品卡片在网格中排列 */
  grid-template-columns: repeat(3, 1fr); /* 一行三列，每列宽度相等（1fr 表示占可用空间的 1 份） */
  gap: 26px;                           /* 网格中每个卡片之间的水平和垂直间距都为 26px */
  justify-items: center;               /* 每个卡片在单元格内水平居中对齐 */
}

/* 单个产品卡片整体样式 */
.product-card {
  display: flex;                       /* 使用 Flex 布局，让内部内容（图片和文字）垂直排列 */
  flex-direction: column;              /* 子元素纵向排列：图片在上，文字在下 */
  align-items: center;                 /* 子元素水平居中对齐 */
  background: #fff;                    /* 卡片背景为白色 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.10); /* 添加轻微阴影，让卡片有浮起的立体感 */
  text-align: center;                  /* 卡片内文字居中显示 */
}

/* 卡片内图片样式 */
.product-card img {
  width: 100%;                         /* 图片宽度占满卡片的宽度 */
  height: auto;                        /* 高度自适应，保持图片原比例 */
  object-fit: cover;                    /* 图片填满容器并裁剪多余部分，保持比例不拉伸 */
  transition: transform 0.3s;          /* 设置过渡动画，便于鼠标悬停时缩放平滑过渡 */
}

/* 鼠标悬停图片效果 */
.product-card img:hover {
  transform: scale(1.05);              /* 鼠标悬停时图片略微放大 5%，增加交互感 */
}



/* 底部品牌故事 */
.brand-section {
    width: 100%;                    /* 占满整行宽度 */
    height: 400px;                  /* 固定整个区域的总高度（包含 padding） */
    display: flex;                  /* 开启 Flex 布局，方便子元素居中 */
    justify-content: center;        /* 水平居中（左右居中） */
    align-items: center;            /* 垂直居中（上下居中） */
    background: #f4f4f4;            /* 浅灰白色背景，常用于品牌条、logo展示区 */
    padding: 40px 0;                /* 上下各留40px内边距，视觉更透气 */
    box-sizing: border-box;         /* 关键！让 padding 计入 height 内，总高度仍然是160px */
    overflow: hidden;               /* 如果图片异常大，超出部分直接隐藏，防止撑爆布局 */
}

.brand-section img {
    max-height: 100%;               /* 图片高度绝不超过 .brand-section 的可用高度（约80px左右，因为上下padding各40px） */
    max-width: 90%;                 /* 宽度最多占90%，左右自动留点呼吸空间，看起来更高级 */
    width: auto;                    /* 宽度自适应，保持图片原始比例 */
    height: auto;                   /* 高度自适应，防止被拉伸变形 */
    object-fit: cover;            /* 图片完整显示在限制区域内，不裁剪、不变形（推荐用于logo） */
                                    /* 如果你想让图片铺满并裁剪，可以改成 object-fit: cover */
    display: block;                 /* 去掉图片底部默认的几像素空隙（inline元素问题） */
}



/* 右侧文字区域的整体样式 */
.brand-text {
    max-width: 600px;           /* 最大宽度（避免太宽影响阅读） */
    padding: 0 40px;            /* 左右留白，避免靠得太近 */
    color: #080808;                /* 字体颜色深灰 */
    font-family: "Didot LT Std", "Didot", "Bodoni XT", serif; /* 高端英文衬线字体，中英文都可 fallback */
}

/* 品牌大标题 */
.brand-title {
    font-size: 36px;            /* 字体大小 */
    letter-spacing: 10px;        /* 字符间距 */
    font-weight: 600;           /* 加粗 */
    display: inline-block;           /* 必须加！让transform生效 */
    transform: translateY(-15px);     /* 往上移5px，根据需要改-3到-15px */
}


/* 副标题（N E W  Y O R K） */
.brand-subtitle {
    font-size: 15px;            /* 字体大小稍小 */
    letter-spacing: 8px;       /* 字母间距大，增强高级感 */
    margin-top: -30px;          /* 往上拉近标题 */
    color: #5f5e5e;                /* 字体颜色偏浅 */
    text-indent: 2em;
    font-weight: 600;           /* 加粗 */
}

/* “品牌故事”标题样式 */
.brand-story-title {
    font-size: 25px;            /* 字体大小 */
    margin: 30px 0 10px;        /* 上下外边距 */
    font-weight: 600;           /* 加粗 */
}

/* 内容段落样式 */
.brand-story {
    line-height: 1.8;           /* 行距更舒适 */
    font-size: 16px;            /* 字体大小 */
    color: #7a7979;                /* 字体颜色偏浅 */
    font-weight: 600;           /* 加粗 */
}



/* Fade */ /* 淡入淡出效果的标题注释 */
.fade { opacity:0; transition:opacity 0.5s ease; } /* 初始透明度为0，设置0.5秒的透明度过渡动画 */

/* Footer */ /* 页脚区域标题注释 */
#footer { background: #fff; border-top: 1px solid #eee; padding-top: 60px; color: #333; } /* 页脚背景白色，顶部加细边线，内边距顶部60px，文字深灰色 */
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 40px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } /* 页脚主内容区，最大宽度1200，左右居中布局，使用flex并自动换行和间距 */
.footer-logo h3 { font-family: 'Playfair Display', serif; font-size: 22px; color: #111; margin-bottom: 8px;} /* LOGO标题字体优雅，字号22px，深色，并设置底部间距 */
.footer-logo p { font-size: 14px; color: #555;font-weight: 600; } /* LOGO下方文字，较小字号，浅灰色 */
.footer-links { display: flex; flex-direction: column; gap: 10px; font-weight: 600;} /* 页脚链接列表纵向排列，每个之间10px间距 */
.footer-links a { text-decoration: none; color: #555; font-size: 14px; transition: 0.3s; } /* 链接无下划线，浅灰色文字，带0.3秒过渡动画 */
.footer-links a:hover { color: #000; transform: translateX(4px); } /* 鼠标悬停时变深色并向右平移4px */


/* 微信图标 + 二维码 */
.footer-social p { font-size: 14px; margin-bottom: 8px; }
.footer-social .icons { position: relative; }
.footer-social .wechat-icon { position: relative; display: inline-block; }
.footer-social .wechat-icon img { width: 26px; opacity: 0.8; transition: 0.3s; }
.footer-social .wechat-icon:hover img { opacity: 1; transform: scale(1.1); }

/* 二维码隐藏默认 */
.footer-social .wechat-icon .qr-code {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 120px;
  height: 120px;
  background: #fff;
  border: 1px solid #eee;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 8px;
  z-index: 10;
}

/* 悬停显示二维码 */
.footer-social .wechat-icon:hover .qr-code { display: block; }

.footer-bottom { border-top: 1px solid #eee; text-align: center; padding: 15px 0; font-size: 13px; color: #777; }

/* 响应式 */
@media (max-width: 768px) {
  .footer-container { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; }
}