@charset "utf-8";

/* 一字茶 yizitea.com - 黑金商务风
 * 字体：霞鹜文楷（标题/正文）+ 思源黑体（英文/数字）
 * 品牌色：黑 + 金（4 档梯度）
 * 印章感：朱红 (#B83227)
 */

/* ============== 字体 ============== */
/* 霞鹜文楷 LXGW WenKai - 中文书法/正文 */
@font-face { font-family: 'LXGW WenKai'; font-style: normal; font-weight: 400; font-display: swap; src: local('LXGW WenKai'), local('LXGWWenKai-Regular'); }

/* 字体栈：霞鹜文楷 → 思源宋体 → 微软雅黑 → 系统兜底 */
:root {
    --font-serif: 'LXGW WenKai', 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', 'Microsoft YaHei', serif;
    --font-sans:  'LXGW WenKai', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
    --font-mono:  'JetBrains Mono', 'Consolas', monospace;
}

/* ============== 品牌色 ============== */
:root {
    /* 黑 — 主背景 */
    --color-black:      #0F0F0F;   /* 主背景 */
    --color-black-soft: #1A1A1A;   /* 卡片/分割区 */
    --color-black-line: #2A2A2A;   /* 细线 */

    /* 金 — 4 档梯度 */
    --color-gold-bright: #E8C864;  /* 亮金：hover/高亮 */
    --color-gold:        #D4AF37;  /* 主金：标题/线/按钮 */
    --color-gold-deep:   #B8941F;  /* 暗金：tagline/副文 */
    --color-gold-fade:   rgba(212, 175, 55, 0.30);  /* 描边/淡金 */
    --color-gold-ghost:  rgba(212, 175, 55, 0.08);  /* hover 背景 */

    /* 文字 */
    --color-text:        #111;
    --color-text-soft:   #555;
    --color-text-mute:   #999;
    --color-text-on-dark: #fff;
    --color-text-on-dark-soft: #ccc;
    --color-text-on-dark-mute: #888;

    /* 朱红 — 印章 */
    --color-vermilion:   #B83227;  /* 印泥色 */
    --color-vermilion-deep: #8C2418;

    /* 米白 — 浅底 */
    --color-cream:       #F5F1E8;  /* 米黄/纸色 */
    --color-cream-soft:  #FAF7F0;
    --color-paper:       #FFFFFF;
}

/* ============== 基础重置 ============== */
* { box-sizing: border-box; }

a {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-text);
    transition: color 0.3s, border-color 0.3s, background-color 0.3s, opacity 0.3s;
}
a:link    { color: var(--color-text); }
a:visited { color: var(--color-text); }
a:hover   { color: var(--color-gold); }
a:active  { color: var(--color-gold); }

body {
    background: var(--color-paper);
    text-align: left;
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.85;
    font-family: var(--font-sans);
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

div, ul, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
img { border: 0; vertical-align: middle; max-width: 100%; }
form { margin: 0; padding: 0; }
input, select { vertical-align: middle; outline: none; }
p { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0; font-weight: 400;
    font-family: var(--font-serif);
    color: var(--color-text);
    letter-spacing: 1px;
}

button { border: 0; margin: 0; padding: 0; background: var(--color-gold); color: #000; cursor: pointer; font-family: var(--font-sans); }

/* ============== 公共类 ============== */
.blank  { clear: both; height: 0; line-height: 0; font-size: 0; }
.hide   { display: none; }
.textCenter { text-align: center; }

.globalBox  { position: relative; z-index: 10; width: 100%; max-width: 1440px; margin: 0 auto; clear: both; }
.globalWidth{ position: relative; z-index: 10; width: 1200px; margin: 0 auto; text-align: left; clear: both; }
.wrap       { width: 1200px; margin: 0 auto; position: relative; }
.floatL { float: left; }
.floatR { float: right; }

/* 小罐茶式大字标题 */
.big-title { text-align: center; margin: 80px auto 20px; }
.big-title h2 {
    font-size: 38px; font-weight: 400; letter-spacing: 8px;
    color: var(--color-text); margin-bottom: 14px;
    font-family: var(--font-serif);
}
.big-title h2 strong {
    font-weight: 600; color: #000;
}
.big-title .en {
    font-size: 12px; letter-spacing: 8px;
    color: var(--color-gold); text-transform: uppercase;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
}
.big-title .line {
    width: 40px; height: 1px;
    background: var(--color-gold); margin: 18px auto;
}
.big-title p.lead {
    text-align: center; color: var(--color-text-soft);
    font-size: 14px; letter-spacing: 2px; max-width: 760px;
    margin: 16px auto 0; line-height: 2.2;
}

/* 金色细线 */
.gold-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); opacity: 0.4; margin: 0; }
.gold-hr   { border: 0; height: 1px; background: var(--color-gold); opacity: 0.5; margin: 30px 0; }

/* ============== 头部 ============== */
.trip-navWrap {
    width: 100%; z-index: 1000; top: 0; position: fixed;
    background: var(--color-black);
    border-bottom: 1px solid var(--color-gold-fade);
    height: 80px;
}
#header { width: 100%; height: 80px; background: var(--color-black); z-index: 999; }
.head { width: 1200px; height: 80px; margin: 0 auto; z-index: 1000; position: relative; }
.head .logo { float: left; width: 130px; height: 80px; line-height: 80px; overflow: hidden; }
.head .logo img { height: 56px; width: auto; display: block; margin-top: 12px; }

#nav { float: right; width: auto; height: 80px; margin: 0; color: #ccc; display: block; }
#nav li {
    width: auto; height: 80px; line-height: 80px; text-align: center;
    display: inline-block; float: left; position: relative; z-index: 105; margin: 0 22px;
}
#nav li a {
    height: 80px; line-height: 80px; font-size: 15px;
    color: #e6e6e6; display: block; padding: 0 4px;
    font-weight: 300; letter-spacing: 3px; position: relative;
    font-family: var(--font-serif);
}
#nav li a span { display: none; }
#nav li a::after {
    content: ''; position: absolute; left: 50%; bottom: 22px;
    width: 0; height: 1px; background: var(--color-gold);
    transition: width 0.3s, left 0.3s;
}
#nav li a:hover, #nav li a.nc1 { color: var(--color-gold); }
#nav li a:hover::after, #nav li a.nc1::after { width: 100%; left: 0; }

#nav .tli p {
    position: absolute; z-index: 100; left: 0; top: 80px; margin: 0;
    padding: 18px 0; white-space: nowrap; display: none;
    background: var(--color-black);
    border: 1px solid var(--color-gold-fade);
}
#nav .tli p a {
    display: block; padding: 6px 22px; font-size: 13px;
    color: #ccc; line-height: 24px; font-weight: 300;
    text-align: left; height: auto; letter-spacing: 1px;
}
#nav .tli p a:hover { color: var(--color-gold); background: none; }

#subMenu_bg {
    position: absolute; left: 0; top: 80px; z-index: 2; width: 100%;
    min-height: 70px; background: var(--color-black);
    display: none; border-top: 1px solid var(--color-gold-fade);
}
#subMenu_bg div { width: 100%; text-align: center; position: relative; top: 18px; }

/* ============== 底部 ============== */
#footer {
    width: 100%; margin-top: 0; padding: 70px 0 30px;
    background: var(--color-black);
    color: var(--color-text-on-dark-mute);
    text-align: center;
    border-top: 1px solid var(--color-gold-fade);
}
.wrap1 { width: 1200px; margin: 0 auto; }

.foot-left   { width: 32%; background: none; height: 130px; }
.foot-logo   { margin-left: 50px; margin-top: 20px; }
.foot-center { width: 32%; color: #999; margin-left: 7%; line-height: 28px; margin-top: 7px; text-align: center; font-family: var(--font-serif); }
.foot-center span { padding-right: 10px; color: #555; }
.foot-center a     { color: #ccc; }
.foot-center a:hover { color: var(--color-gold); }
.foot-right  { width: 28%; height: 130px; background: none; }
.foot-ewm    { margin-top: 15px; }

.foot-link  { width: 120px; margin-top: 10px; }
.foot-link dl { line-height: 24px; padding-left: 30px; color: #999; margin-bottom: 15px; }
.foot-link dl.fl_01 { background-position: 0px 0px; }
.foot-link dl.fl_02 { background-position: 0px -41px; }
.foot-link dl.fl_03 { background-position: 0px -80px; }

.wxewm-img { padding: 5px; background: var(--color-black-soft); border: 1px solid var(--color-black-line); }

.footblock {
    width: 1200px; margin: 30px auto 0; padding-top: 25px;
    line-height: 24px; color: #888; font-size: 12px;
    border-top: 1px solid var(--color-black-line);
}
.footblock a { font-size: 12px; color: #aaa; }
.footblock a:hover { color: var(--color-gold); }

/* ============== 通用 ============== */
.line {
    font-size: 0; line-height: 0; height: 1px;
    background: var(--color-gold); opacity: 0.5;
    margin: 50px auto; clear: both;
}
.line2 {
    font-size: 0; line-height: 0; height: 1px;
    background: var(--color-gold); opacity: 0.4;
    margin: 0 auto 50px; clear: both;
}

/* ============== 区块 ============== */
.section { width: 100%; padding: 80px 0; background: #fff; }
.section.dark { background: var(--color-black); color: var(--color-text-on-dark-soft); }
.section.dark h2 { color: #fff; }
.section.dark p.lead { color: #999; }
.section.gold { background: linear-gradient(180deg, var(--color-black-soft) 0%, var(--color-black) 100%); }

/* 金色按钮 */
.btn-gold {
    display: inline-block; padding: 12px 36px;
    border: 1px solid var(--color-gold); color: var(--color-gold);
    background: transparent; font-size: 13px;
    letter-spacing: 4px; transition: all 0.3s;
    font-family: var(--font-serif);
}
.btn-gold:hover { background: var(--color-gold); color: #000; }
.btn-gold-fill {
    display: inline-block; padding: 12px 36px;
    background: var(--color-gold); color: #000;
    font-size: 13px; letter-spacing: 4px; transition: all 0.3s;
    font-family: var(--font-serif);
}
.btn-gold-fill:hover { background: var(--color-gold-deep); color: #fff; }

/* 子导航 tag */
.sub-nav-list {
    text-align: center;
    margin: 50px 0 0;
}
.sub-nav-list .sub-tag { margin: 4px; }
.sub-tag.active {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: var(--color-gold-ghost);
}

/* 产品卡片 */
    background: #fff; text-align: center; transition: all 0.4s;
    border: 1px solid #f0f0f0;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--color-gold);
}
.product-card .img {
    width: 100%; height: 320px; background: #fafafa;
    overflow: hidden; position: relative;
}
.product-card .img img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s;
}
.product-card:hover .img img { transform: scale(1.05); }
.product-card .info { padding: 24px 20px 28px; border-top: 1px solid #f0f0f0; }
.product-card .name {
    font-size: 18px; color: var(--color-text);
    letter-spacing: 2px; margin-bottom: 8px;
    font-family: var(--font-serif);
}
.product-card .sub {
    font-size: 12px; color: var(--color-text-mute);
    letter-spacing: 4px; text-transform: uppercase;
    margin-bottom: 14px; font-family: 'Inter', 'Helvetica Neue', sans-serif;
}
.product-card .price {
    font-size: 20px; color: var(--color-gold-deep);
    font-weight: 400; font-family: var(--font-serif);
}
.product-card .price small { font-size: 12px; color: var(--color-text-mute); font-weight: normal; }

/* ============== 自适应 ============== */
@media screen and (max-width: 1280px) {
    .head { width: 1000px; }
    .head .logo { width: 120px; }
    .head .logo img { width: auto; height: 56px; }
    #nav li { margin: 0 14px; }
    .footblock { width: 1000px; }
    .wrap1, .globalWidth, .wrap { width: 1000px; }
}